/* =====================================================
   MY FAVOURITE PLACE — style.css
   Warm minimal theme — itissimple.co.uk/myfavouriteplace/
   ===================================================== */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ─────────────────────────────────────────────
   THEME TOKENS
   ───────────────────────────────────────────── */
:root {
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body:    'DM Sans', system-ui, sans-serif;
  --radius-tile:  12px;
  --radius-modal: 18px;
  --radius-btn:   10px;
  --ease:         cubic-bezier(0.4, 0, 0.2, 1);
  --spring:       cubic-bezier(0.34, 1.56, 0.64, 1);
  --transition:   0.22s var(--ease);

  /* Bottom sheet */
  --sheet-collapsed: 68px;
  --sheet-expanded:  72vh;
  --sheet-radius:    22px;
}

/* ── DARK THEME (warm espresso) ── */
[data-theme="dark"] {
  --bg:              #13100a;
  --bg-2:            #1c1710;
  --surface:         rgba(255,220,160,.055);
  --surface-hover:   rgba(255,220,160,.09);
  --surface-active:  rgba(255,220,160,.13);
  --border:          rgba(255,220,160,.08);
  --border-accent:   rgba(232,168,106,.45);
  --text-primary:    #f0dfc0;
  --text-secondary:  rgba(240,210,170,.42);
  --accent:          #e8a86a;
  --accent-2:        #c4705a;
  --accent-glow:     rgba(232,168,106,.15);
  --accent-glow-2:   rgba(196,112,90,.08);
  --modal-bg:        #1c1710;
  --input-bg:        rgba(255,220,160,.06);
  --delete:          #e05a5a;
  --header-bg:       rgba(19,16,10,.95);
  --text-bar-bg:     rgba(255,220,160,.025);
  --lock-active:     rgba(232,168,106,.18);
  --lock-color:      #e8a86a;
  --sheet-bg:        #1c1710;
  --sheet-border:    rgba(255,220,160,.07);
  --handle-color:    rgba(255,220,160,.2);
  --theme-color:     #13100a;
}

/* ── LIGHT THEME (warm cream — matches itissimple #f5f0e8) ── */
[data-theme="light"] {
  --bg:              #c5c1ba;
  --bg-2:            #beb9b1;
  --surface:         rgba(255,255,255,.82);
  --surface-hover:   #ffffff;
  --surface-active:  #e8e0d4;
  --border:          rgba(0,0,0,.07);
  --border-accent:   rgba(180,100,40,.4);
  --text-primary:    #2a1f0e;
  --text-secondary:  rgba(42,31,14,.45);
  --accent:          #b46428;
  --accent-2:        #994020;
  --accent-glow:     rgba(180,100,40,.1);
  --accent-glow-2:   rgba(153,64,32,.06);
  --modal-bg:        #faf7f2;
  --input-bg:        rgba(0,0,0,.04);
  --delete:          #d03030;
  --header-bg:       rgba(197,193,186,.95);
  --text-bar-bg:     rgba(0,0,0,.02);
  --lock-active:     rgba(180,100,40,.1);
  --lock-color:      #b46428;
  --sheet-bg:        #faf7f2;
  --sheet-border:    rgba(0,0,0,.07);
  --handle-color:    rgba(0,0,0,.18);
  --theme-color:     #c5c1ba;
}

/* ── BASE ── */
html { height: 100%; overflow-x: hidden; }

body {
  min-height: 100%;
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text-primary);
  transition: background var(--transition), color var(--transition);
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  overscroll-behavior: none;
  touch-action: pan-y;
  /* Space for collapsed bottom sheet */
  padding-bottom: var(--sheet-collapsed);
}

body::before {
  content: '';
  position: fixed; inset: 0;
  background:
    radial-gradient(ellipse 65% 45% at 15% 5%,  var(--accent-glow)   0%, transparent 65%),
    radial-gradient(ellipse 50% 35% at 85% 90%, var(--accent-glow-2) 0%, transparent 65%);
  pointer-events: none; z-index: 0;
}

#app { position: relative; z-index: 1; min-height: 100vh; display: flex; flex-direction: column; overflow-x: hidden; }

/* ── HEADER ── */
.header {
  position: sticky; top: 0; z-index: 100;
  background: var(--header-bg);
  backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px);
  border-bottom: 1px solid var(--border);
  padding: env(safe-area-inset-top, 0px) 16px 0;
  transition: background var(--transition);
  /* Force header always visible — never auto-hide */
  transform: translateY(0) !important;
  will-change: auto;
}

.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  height: 54px; max-width: 960px; margin: 0 auto; width: 100%;
  overflow: visible;
  gap: 8px;
}

/* ── LOGO ── */
.logo {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  font-style: italic;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  user-select: none;
  flex-shrink: 0;
  letter-spacing: -0.02em;
  line-height: 1;
  white-space: nowrap;
  display: flex; align-items: center; gap: 1px;
}
.logo-smart {
  color: var(--accent);
}
.logo-links {
  color: var(--text-secondary);
}
.logo:hover .logo-links { color: var(--accent-2); }

.logo sup {
  font-size: 0.52em;
  font-weight: 400;
  font-style: italic;
  color: var(--text-secondary);
  vertical-align: super;
  letter-spacing: 0.01em;
}

.header-actions {
  display: flex; gap: 4px; align-items: center;
  flex-shrink: 0;
}

/* ── HEADER BUTTONS ── */
.btn-icon {
  background: var(--surface); border: 1px solid var(--border);
  color: var(--text-primary); border-radius: var(--radius-btn);
  padding: 6px 10px; cursor: pointer;
  font-family: var(--font-body); font-size: 0.78rem; font-weight: 500;
  transition: background var(--transition), border-color var(--transition), transform 0.1s;
  display: inline-flex; align-items: center; gap: 4px;
  white-space: nowrap; line-height: 1;
}
.btn-icon:hover  { background: var(--surface-hover); border-color: var(--border-accent); }
.btn-icon:active { transform: scale(0.95); }

/* Lock */
#lockToggle .icon-locked   { display: none;   }
#lockToggle .icon-unlocked { display: inline; }
body.locked   #lockToggle .icon-locked   { display: inline; }
body.locked   #lockToggle .icon-unlocked { display: none;   }
body.unlocked #lockToggle .icon-locked   { display: none;   }
body.unlocked #lockToggle .icon-unlocked { display: inline; }
body.unlocked #lockToggle { background: var(--lock-active); border-color: var(--lock-color); color: var(--lock-color); }

/* Theme */
#themeToggle { font-size: 1rem; padding: 6px 9px; }
[data-theme="dark"]  #themeToggle .icon-sun  { display: none;   }
[data-theme="dark"]  #themeToggle .icon-moon { display: inline; }
[data-theme="light"] #themeToggle .icon-sun  { display: inline; }
[data-theme="light"] #themeToggle .icon-moon { display: none;   }

/* ── CLOCK ── */
.header-clock {
  font-family: var(--font-body); font-size: 0.65rem; font-weight: 600;
  color: var(--text-primary); white-space: nowrap;
  letter-spacing: 0.02em; flex-shrink: 0; line-height: 1;
  padding: 4px 7px; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-btn); user-select: none;
  display: none;
}
/* Show clock from 480px — never auto-hide */
@media (min-width: 480px) {
  .header-clock {
    display: flex !important;
    align-items: center;
    visibility: visible !important;
    opacity: 1 !important;
  }
}

/* ── TEXT BAR ── */
.text-bar {
  background: var(--text-bar-bg); border-bottom: 1px solid var(--border);
  padding: 9px 16px;
  transition: background var(--transition), max-height 0.3s var(--ease),
              opacity 0.25s var(--ease), padding 0.3s var(--ease);
  max-height: 56px; overflow: hidden;
}
.text-bar.hidden { max-height:0; opacity:0; padding-top:0; padding-bottom:0; border-bottom-width:0; }
.text-bar-inner  { max-width:960px; margin:0 auto; display:flex; align-items:center; gap:8px; }
.text-bar-content { flex:1; font-size:0.9rem; font-weight:500; color:var(--text-primary); }
.text-bar-content.placeholder { color:var(--text-secondary); font-style:italic; }
.text-bar-actions { display:flex; gap:4px; flex-shrink:0; }
.text-bar-btn {
  background:none; border:none; color:var(--text-secondary); font-size:0.8rem;
  cursor:pointer; padding:4px 7px; border-radius:7px;
  transition:all var(--transition); opacity:0.5;
}
.text-bar-btn:hover { opacity:1; background:var(--surface); color:var(--accent); }

/* ── MAIN ── */
.main {
  flex:1; padding:14px 12px 20px; max-width:960px; margin:0 auto; width:100%;
  overflow-x:hidden; touch-action:pan-y;
}
.main.swipe-left  { animation:swipeLeft  0.22s var(--ease) both; }
.main.swipe-right { animation:swipeRight 0.22s var(--ease) both; }
@keyframes swipeLeft  { from{opacity:.5;transform:translateX(30px)}  to{opacity:1;transform:translateX(0)} }
@keyframes swipeRight { from{opacity:.5;transform:translateX(-30px)} to{opacity:1;transform:translateX(0)} }

/* ── GRID ── */
.grid {
  display:grid; grid-template-columns:repeat(4,1fr); gap:8px;
  animation:gridIn 0.28s var(--ease) both; touch-action:pan-y;
}
@media (min-width:540px) { .grid { grid-template-columns:repeat(5,1fr); gap:10px; } }
@media (min-width:700px) { .grid { grid-template-columns:repeat(6,1fr); gap:11px; } }
@media (min-width:860px) { .grid { grid-template-columns:repeat(7,1fr); gap:12px; } }
@keyframes gridIn { from{opacity:0} to{opacity:1} }

/* ── TILE ── */
.tile {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-tile); padding:5px 5px 8px;
  display:flex; flex-direction:column; align-items:center; gap:6px;
  cursor:pointer; position:relative; color:var(--text-primary);
  animation:tileIn 0.32s var(--ease) both;
  user-select:none; touch-action:pan-y; overflow:hidden; height:96px;
  transition:background var(--transition), border-color var(--transition),
             transform 0.18s var(--ease), box-shadow 0.18s var(--ease);
}
.tile:hover {
  background:var(--surface-hover); border-color:var(--border-accent);
  transform:translateY(-2px) scale(1.03);
  box-shadow:0 8px 24px var(--accent-glow);
}
.tile:active { transform:scale(0.97); }

.tile:nth-child(1){animation-delay:.03s} .tile:nth-child(2){animation-delay:.06s}
.tile:nth-child(3){animation-delay:.09s} .tile:nth-child(4){animation-delay:.12s}
.tile:nth-child(5){animation-delay:.15s} .tile:nth-child(6){animation-delay:.18s}
.tile:nth-child(7){animation-delay:.21s} .tile:nth-child(8){animation-delay:.24s}
.tile:nth-child(9){animation-delay:.27s} .tile:nth-child(10){animation-delay:.30s}
.tile:nth-child(11){animation-delay:.33s} .tile:nth-child(12){animation-delay:.36s}

@keyframes tileIn { from{opacity:0;transform:scale(.86) translateY(10px)} to{opacity:1;transform:scale(1) translateY(0)} }

/* ── ICON WRAP ── */
.tile-icon-wrap {
  width:calc(100% - 4px); height:64px; flex-shrink:0; border-radius:10px;
  background:rgba(0,0,0,0.35); display:flex; align-items:center;
  justify-content:center; overflow:hidden; position:relative;
  transition:background var(--transition), box-shadow var(--transition);
}
.tile:hover .tile-icon-wrap {
  background:rgba(0,0,0,0.48);
  box-shadow:0 0 18px 4px var(--accent-glow), 0 0 6px 2px var(--accent-glow) inset;
}
[data-theme="light"] .tile-icon-wrap { background:rgba(0,0,0,0.06); }
[data-theme="light"] .tile:hover .tile-icon-wrap { background:rgba(0,0,0,0.09); box-shadow:0 0 16px 3px var(--accent-glow), 0 0 5px 2px var(--accent-glow) inset; }

.tile-icon         { width:90%; height:90%; object-fit:contain; display:block; }
.simple-icon       { width:72%; height:72%; filter:brightness(0) invert(1); opacity:0.85; }
[data-theme="light"] .simple-icon { filter:none; opacity:1; }
.tile-icon-fallback { font-size:2rem; font-weight:700; font-family:var(--font-display); color:var(--accent); line-height:1; }
.tile-icon-emoji    { font-size:2.4rem; line-height:1; display:flex; align-items:center; justify-content:center; width:100%; height:100%; }

/* ── LABEL ── */
.tile-label {
  font-size:0.82rem; font-weight:500; text-align:center; color:var(--text-primary);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  max-width:100%; padding:0 4px; flex-shrink:0; line-height:1; height:16px;
  transition:color var(--transition);
}
.tile:hover .tile-label { color:var(--accent); }

/* ── TILE CONTROLS ── */
.tile-controls { position:absolute; top:3px; right:3px; left:3px; display:flex; gap:3px; justify-content:flex-end; opacity:0; transition:opacity var(--transition); z-index:2; }
body.unlocked .tile:hover .tile-controls { opacity:1; }
body.locked   .tile-controls             { display:none !important; }

.tile-ctrl {
  width:22px; height:22px; border-radius:7px; border:none; cursor:pointer;
  font-size:0.72rem; display:flex; align-items:center; justify-content:center;
  background:rgba(19,16,10,0.85); color:var(--text-primary);
  transition:background var(--transition), transform 0.1s; line-height:1;
  box-shadow:0 3px 10px rgba(0,0,0,.3);
  backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
}
.tile-ctrl:hover     { background:var(--accent); color:#fff; transform:scale(1.08); }
.tile-ctrl.del:hover { background:var(--delete);  color:#fff; }
.tile-ctrl:active    { transform:scale(0.94); }

/* ── ADD TILE ── */
.tile-add {
  background:none; border:2px dashed var(--border); border-radius:var(--radius-tile);
  padding:6px; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:5px; cursor:pointer; height:96px;
  color:var(--text-secondary); font-size:0.65rem; font-family:var(--font-body);
  font-weight:500; transition:border-color var(--transition), color var(--transition), background var(--transition);
}
.tile-add:hover { border-color:var(--accent); color:var(--accent); background:var(--accent-glow); }
.tile-add-icon  { font-size:1.3rem; line-height:1; }
body.locked .tile-add { display:none; }

/* ── DRAG ── */
.tile.dragging  { opacity:0.3; }
.tile.drag-over { border-color:var(--accent); background:var(--accent-glow); transform:scale(1.04); }

/* ── TILE POPOVER ── */
#tile-popover {
  position:fixed; z-index:400; background:var(--bg-2); color:var(--text-primary);
  border:1px solid var(--border-accent); border-radius:10px; padding:7px 14px;
  font-size:0.8rem; font-weight:500; font-family:var(--font-body);
  white-space:nowrap; pointer-events:none;
  box-shadow:0 6px 24px rgba(0,0,0,.25);
  opacity:0; transform:translateY(4px);
  transition:opacity 0.18s var(--ease), transform 0.18s var(--ease);
}
#tile-popover.show { opacity:1; transform:translateY(0); }
#tile-popover::after {
  content:''; position:absolute; top:-6px; left:50%; transform:translateX(-50%);
  border:6px solid transparent; border-top:none; border-bottom-color:var(--border-accent);
}

/* ══════════════════════════════════════════════
   BOTTOM SHEET
   ══════════════════════════════════════════════ */
.sheet {
  position:fixed; bottom:0; left:0; right:0; z-index:200;
  height:var(--sheet-expanded);
  transform:translateY(calc(var(--sheet-expanded) - var(--sheet-collapsed)));
  background:var(--sheet-bg);
  border-top-left-radius:var(--sheet-radius);
  border-top-right-radius:var(--sheet-radius);
  border:1px solid var(--sheet-border); border-bottom:none;
  box-shadow:0 -4px 40px rgba(0,0,0,.35), 0 -1px 0 rgba(255,220,160,.04);
  display:flex; flex-direction:column; overflow:hidden;
  will-change:transform;
  transition:transform 0.45s var(--spring);
  touch-action:none;
}
.sheet.is-expanded { transform:translateY(0); }
.sheet.is-dragging { transition:none; }

/* Handle */
.sheet-handle-zone {
  flex-shrink:0; height:36px;
  display:flex; align-items:center; justify-content:center;
  cursor:grab; padding: 8px 0;
}
.sheet-handle-zone:active { cursor:grabbing; }
.handle-pill {
  width:40px; height:5px; border-radius:3px;
  background:var(--handle-color);
  transition:background 0.2s, width 0.2s;
}
.sheet-handle-zone:hover .handle-pill,
.sheet.is-expanded .handle-pill { background:var(--accent); width:52px; }

/* Sheet content */
.sheet-content {
  flex:1; overflow-y:auto; overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  opacity:0; transition:opacity 0.2s ease 0.1s;
  padding:0 16px 12px;
}
.sheet.is-expanded .sheet-content { opacity:1; }

/* Tab panels */
.sheet-tab-panel { display:none; }
.sheet-tab-panel.active { display:block; animation:panelIn 0.22s var(--ease) both; }
@keyframes panelIn { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:translateY(0)} }

.sheet-panel-heading {
  font-family:var(--font-display); font-size:1.15rem; font-weight:700;
  color:var(--text-primary); margin-bottom:4px; padding-top:4px;
  font-style:italic;
}
.sheet-panel-sub {
  font-size:0.8rem; color:var(--text-secondary); margin-bottom:16px; line-height:1.5;
}

/* Links grid inside sheet */
.sheet-link-grid {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 8px; margin-bottom: 16px;
}
@media (min-width:540px) { .sheet-link-grid { grid-template-columns: repeat(5,1fr); gap:10px; } }
@media (min-width:700px) { .sheet-link-grid { grid-template-columns: repeat(6,1fr); gap:11px; } }

.sheet-link-tile {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-tile); padding:5px 5px 8px;
  display:flex; flex-direction:column; align-items:center; gap:6px;
  cursor:pointer; transition:all var(--transition);
  height:96px;
  position: relative;
}
.sheet-link-tile:hover { background:var(--surface-hover); border-color:var(--border-accent); transform:scale(1.04); }
.sheet-link-tile:active { transform:scale(0.96); }
.sheet-link-tile-icon {
  width: calc(100% - 4px);
  height: 64px;
  border-radius: 10px;
  background: rgba(0,0,0,0.35);
  display: flex; align-items: center;
  justify-content: center; overflow: hidden; flex-shrink: 0;
  transition: background var(--transition), box-shadow var(--transition);
}
.sheet-link-tile:hover .sheet-link-tile-icon {
  background: rgba(0,0,0,0.48);
  box-shadow: 0 0 18px 4px var(--accent-glow), 0 0 6px 2px var(--accent-glow) inset;
}
[data-theme="light"] .sheet-link-tile-icon { background: rgba(0,0,0,0.06); }
.sheet-link-tile-icon img { width:90%; height:90%; object-fit:contain; }
.sheet-link-tile-lbl {
  font-size: 0.82rem; font-weight: 500;
  color: var(--text-primary); text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 100%; padding: 0 4px;
  transition: color var(--transition);
  flex-shrink: 0; line-height: 1; height: 16px;
}
.sheet-link-tile:hover .sheet-link-tile-lbl { color: var(--accent); }

/* Add link in sheet */
.sheet-add-btn {
  background:none; border:2px dashed var(--border); border-radius:10px;
  padding:8px 4px; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:4px; cursor:pointer; min-height:68px;
  color:var(--text-secondary); font-size:0.62rem; font-family:var(--font-body);
  transition:all var(--transition);
}
.sheet-add-btn:hover { border-color:var(--accent); color:var(--accent); background:var(--accent-glow); }
body.locked .sheet-add-btn { display:none; }

/* Sheet section label */
.sheet-section-label {
  font-size:0.68rem; font-weight:600; letter-spacing:0.08em;
  text-transform:uppercase; color:var(--text-secondary); margin:16px 0 8px;
}

/* ── TAB BAR ── */
.tab-bar {
  flex-shrink:0; height:var(--sheet-collapsed);
  display:flex; align-items:stretch;
  padding:0 8px env(safe-area-inset-bottom, 8px);
  border-top:1px solid var(--sheet-border);
  background:rgba(19,16,10,0.7);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  gap:4px;
}
[data-theme="light"] .tab-bar { background:rgba(245,240,232,0.85); }

.tab-btn {
  flex:1; display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  gap:4px; cursor:pointer; border:none;
  background:none; border-radius:12px; padding:8px 4px;
  transition:background 0.2s; position:relative;
  -webkit-tap-highlight-color:transparent; color:inherit;
}
.tab-btn:active { background:var(--surface); transform:scale(0.95); }

.tab-icon-wrap { width:28px; height:28px; display:flex; align-items:center; justify-content:center; position:relative; }

.tab-icon {
  font-size:1.3rem; line-height:1;
  transition:transform 0.3s var(--spring), filter 0.2s;
  filter:grayscale(1) opacity(0.4);
}
.tab-label {
  font-size:0.62rem; font-weight:500; color:var(--text-secondary);
  transition:color 0.2s; letter-spacing:0.01em;
  font-family:var(--font-body); white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; max-width:52px;
}
.tab-dot {
  position:absolute; bottom:-3px; left:50%;
  transform:translateX(-50%) scale(0);
  width:4px; height:4px; border-radius:50%;
  background:var(--accent);
  transition:transform 0.3s var(--spring);
}
.tab-btn.active .tab-icon  { filter:grayscale(0) opacity(1); transform:translateY(-1px) scale(1.08); }
.tab-btn.active .tab-label { color:var(--accent); font-weight:600; }
.tab-btn.active .tab-dot   { transform:translateX(-50%) scale(1); }

/* Add tab button in tab bar */
.tab-add-btn {
  flex-shrink:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:3px;
  cursor:pointer; border:none; background:none;
  padding:8px 6px; border-radius:10px;
  transition:background 0.2s; color:var(--text-secondary);
  font-size:0.62rem; font-family:var(--font-body);
}
.tab-add-btn:hover { background:var(--surface); color:var(--accent); }
.tab-add-btn-icon  { font-size:1.1rem; line-height:1; opacity:0.5; }
body.locked .tab-add-btn { display:none; }

/* ── EDIT BANNER ── */
.edit-banner {
  display:none; position:fixed;
  bottom:calc(var(--sheet-collapsed) + max(8px, env(safe-area-inset-bottom, 8px)));
  left:50%; transform:translateX(-50%);
  background:var(--accent); color:#fff; border-radius:50px;
  padding:9px 16px; font-size:0.76rem; font-weight:500;
  z-index:300; gap:10px; align-items:center;
  box-shadow:0 4px 20px rgba(0,0,0,.25); white-space:nowrap;
  animation:bannerIn 0.2s var(--ease) both;
}
body.unlocked .edit-banner { display:flex; }
@keyframes bannerIn { from{opacity:0;transform:translateX(-50%) translateY(8px)} to{opacity:1;transform:translateX(-50%) translateY(0)} }

#editBannerLock {
  background:rgba(255,255,255,.25); border:none; color:#fff;
  border-radius:20px; padding:7px 18px; font-size:0.88rem; font-weight:700;
  cursor:pointer; font-family:var(--font-body); transition:background 0.15s;
}
#editBannerLock:hover  { background:rgba(255,255,255,.4); }
#editBannerLock:active { transform:scale(0.96); }

/* ── MODALS ── */
.modal-overlay {
  display:none; position:fixed; inset:0;
  background:rgba(0,0,0,.55); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  z-index:500; align-items:center; justify-content:center; padding:20px;
}
.modal-overlay.open { display:flex; }

.modal {
  background:var(--modal-bg); border:1px solid var(--border);
  border-radius:var(--radius-modal); padding:24px 22px;
  width:100%; max-width:350px;
  animation:modalIn 0.18s var(--ease) both;
  box-shadow:0 24px 60px rgba(0,0,0,.3);
  max-height:90vh; overflow-y:auto;
}
@keyframes modalIn { from{opacity:0;transform:scale(.93) translateY(10px)} to{opacity:1;transform:scale(1) translateY(0)} }

.modal-title { font-family:var(--font-display); font-size:1rem; font-weight:700; font-style:italic; margin-bottom:18px; color:var(--text-primary); }
.form-group  { margin-bottom:12px; }
.form-group label { display:block; font-size:0.68rem; font-weight:500; color:var(--text-secondary); margin-bottom:5px; text-transform:uppercase; letter-spacing:0.06em; }
.form-group input { width:100%; background:var(--input-bg); border:1px solid var(--border); border-radius:10px; padding:10px 12px; color:var(--text-primary); font-family:var(--font-body); font-size:16px; outline:none; transition:border-color var(--transition); }
.form-group input:focus        { border-color:var(--border-accent); }
.form-group input::placeholder { color:var(--text-secondary); }
.label-hint { font-size:0.64rem; color:var(--text-secondary); text-transform:none; letter-spacing:0; font-weight:400; }
.field-hint { font-size:0.67rem; color:var(--text-secondary); margin-top:5px; line-height:1.4; }

.modal-actions { display:flex; gap:9px; margin-top:18px; }
.btn-primary, .btn-secondary { flex:1; padding:10px; border-radius:var(--radius-btn); border:none; cursor:pointer; font-family:var(--font-body); font-size:0.87rem; font-weight:500; transition:all var(--transition); }
.btn-primary          { background:var(--accent); color:#fff; }
.btn-primary:hover    { filter:brightness(1.08); }
.btn-primary:active   { transform:scale(0.97); }
.btn-secondary        { background:var(--surface); border:1px solid var(--border); color:var(--text-primary); }
.btn-secondary:hover  { background:var(--surface-hover); border-color:var(--border-accent); }
.btn-secondary:active { transform:scale(0.97); }

/* ── ICON FIELD ── */
.icon-field-wrap     { display:flex; gap:10px; align-items:flex-start; }
.icon-preview-box    { width:52px; height:52px; flex-shrink:0; border-radius:12px; background:var(--surface-active); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; overflow:hidden; }
.icon-preview-box img { width:38px; height:38px; object-fit:contain; }
.icon-preview-placeholder { font-size:1.4rem; color:var(--text-secondary); }
.icon-field-inputs   { flex:1; display:flex; flex-direction:column; gap:7px; }
.icon-field-inputs input { width:100%; }
.btn-pick-icon { background:var(--surface); border:1px solid var(--border); color:var(--text-primary); border-radius:10px; padding:9px 12px; font-family:var(--font-body); font-size:0.82rem; font-weight:500; cursor:pointer; transition:all var(--transition); text-align:left; width:100%; }
.btn-pick-icon:hover { background:var(--surface-hover); border-color:var(--border-accent); color:var(--accent); }

.icon-picker { display:none; flex-direction:column; background:var(--modal-bg); border:1px solid var(--border); border-radius:14px; overflow:hidden; margin-top:8px; }
.icon-picker.open { display:flex; }
.icon-picker-header { display:flex; gap:8px; padding:10px 10px 8px; border-bottom:1px solid var(--border); flex-shrink:0; }
.icon-picker-header input { flex:1; background:var(--input-bg); border:1px solid var(--border); border-radius:8px; padding:7px 10px; color:var(--text-primary); font-family:var(--font-body); font-size:16px; outline:none; }
.icon-picker-header input:focus { border-color:var(--border-accent); }
.icon-picker-header input::placeholder { color:var(--text-secondary); }
.icon-picker-close { background:var(--surface); border:1px solid var(--border); color:var(--text-secondary); border-radius:8px; width:34px; height:34px; cursor:pointer; font-size:0.8rem; display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:all var(--transition); }
.icon-picker-close:hover { background:var(--delete); color:#fff; border-color:var(--delete); }
.icon-picker-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(60px,1fr)); gap:6px; padding:10px; overflow-y:auto; flex:1; max-height:240px; scrollbar-width:thin; }
.icon-picker-item { display:flex; flex-direction:column; align-items:center; gap:4px; padding:8px 4px; border-radius:10px; cursor:pointer; border:2px solid transparent; transition:all var(--transition); background:var(--surface); }
.icon-picker-item:hover    { background:var(--surface-hover); border-color:var(--border-accent); }
.icon-picker-item.selected { border-color:var(--accent); background:var(--accent-glow); }
.icon-picker-item img  { width:36px; height:36px; object-fit:contain; border-radius:8px; }
.icon-picker-item span { font-size:0.52rem; color:var(--text-secondary); text-align:center; line-height:1.2; word-break:break-word; max-width:100%; }

/* ── BACKUP ── */
.backup-section  { margin-bottom:4px; }
.backup-desc     { font-size:0.82rem; color:var(--text-secondary); margin-bottom:12px; line-height:1.5; }
.backup-desc strong { color:var(--delete); font-weight:600; }
.backup-divider  { height:1px; background:var(--border); margin:18px 0; }
.btn-full        { width:100%; padding:12px; font-size:0.92rem; }

/* ── SCROLLBAR ── */
@media (pointer:fine) {
  ::-webkit-scrollbar       { width:5px; height:5px; }
  ::-webkit-scrollbar-track { background:transparent; }
  ::-webkit-scrollbar-thumb { background:var(--border); border-radius:3px; }
}

/* ── iOS ZOOM FIX ── */
.form-group input,
.icon-picker-header input,
#textBarInput, #tabNameInput, #tabIconInput,
#linkName, #linkUrl, #linkAppUrl, #linkIcon, #iconPickerSearch {
  font-size: 16px !important;
}

/* ── TAB ICON IMAGE ── */
.tab-icon-img {
  width: 24px;
  height: 24px;
  object-fit: contain;
  border-radius: 6px;
  filter: none;
  transition: transform 0.3s var(--spring);
}
.tab-btn.active .tab-icon-img {
  transform: translateY(-1px) scale(1.08);
}
.tab-btn:not(.active) .tab-icon-img {
  opacity: 0.45;
  filter: grayscale(0.5);
}

/* ── TEXT ICON CREATOR ── */
.text-icon-modal { max-width: 380px; }

.text-icon-preview-wrap {
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 18px;
}

#textIconCanvas {
  width: 120px; height: 120px;
  border-radius: 24px;
  box-shadow: 0 8px 32px rgba(0,0,0,.3);
}

.color-presets {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: 4px;
}

.color-swatch {
  width: 32px; height: 32px; border-radius: 8px;
  cursor: pointer; position: relative;
  border: 2px solid transparent;
  transition: transform 0.15s, border-color 0.15s;
  flex-shrink: 0;
}
.color-swatch:hover  { transform: scale(1.15); }
.color-swatch.active { border-color: var(--text-primary); transform: scale(1.1); }

.color-custom {
  background: conic-gradient(red, yellow, lime, cyan, blue, magenta, red) !important;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.color-custom input[type="color"] {
  position: absolute; opacity: 0; width: 100%; height: 100%; cursor: pointer;
  font-size: 16px !important;
}
.color-custom span {
  font-size: 1.1rem; font-weight: 700; color: white;
  text-shadow: 0 1px 3px rgba(0,0,0,.5); pointer-events: none;
}

.text-color-options { display: flex; gap: 8px; margin-top: 4px; }

.text-color-btn {
  flex: 1; padding: 8px; border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface); color: var(--text-secondary);
  font-family: var(--font-body); font-size: 0.82rem;
  cursor: pointer; transition: all var(--transition);
}
.text-color-btn.active {
  background: var(--accent-glow);
  border-color: var(--border-accent);
  color: var(--accent); font-weight: 600;
}

.btn-text-icon {
  width: 100%; padding: 9px 12px; margin-top: 6px;
  background: var(--surface); border: 1px solid var(--border);
  color: var(--text-primary); border-radius: 10px;
  font-family: var(--font-body); font-size: 0.82rem; font-weight: 500;
  cursor: pointer; transition: all var(--transition); text-align: left;
}
.btn-text-icon:hover {
  background: var(--surface-hover); border-color: var(--border-accent);
  color: var(--accent);
}

/* ── SHEET TAB CONTROLS ── */
.sheet-tab-controls {
  display: none;
  gap: 8px;
  margin-bottom: 12px;
}
body.unlocked .sheet-tab-controls { display: flex; }

.sheet-tab-ctrl {
  flex: 1; padding: 7px 10px;
  background: var(--surface); border: 1px solid var(--border);
  color: var(--text-secondary); border-radius: 8px;
  font-family: var(--font-body); font-size: 0.75rem;
  cursor: pointer; transition: all var(--transition);
}
.sheet-tab-ctrl:hover     { background: var(--accent); color: #fff; border-color: var(--accent); }
.sheet-tab-ctrl.del:hover { background: var(--delete); border-color: var(--delete); }

/* ── SHEET TILE CONTROLS ── */
.sheet-tile-controls {
  position: absolute; top: 2px; right: 2px;
  display: flex; gap: 3px;
  opacity: 0; transition: opacity var(--transition); z-index: 2;
}
body.unlocked .sheet-link-tile:hover .sheet-tile-controls { opacity: 1; }
body.locked .sheet-tile-controls { display: none !important; }

.sheet-tile-ctrl {
  width: 20px; height: 20px; border-radius: 5px;
  border: none; cursor: pointer; font-size: 0.6rem;
  display: flex; align-items: center; justify-content: center;
  background: rgba(19,16,10,0.8); color: var(--text-primary);
  transition: background var(--transition);
}
.sheet-tile-ctrl:hover     { background: var(--accent); color: #fff; }
.sheet-tile-ctrl.del:hover { background: var(--delete); color: #fff; }

.sheet-link-tile { position: relative; }
.sheet-link-tile.dragging  { opacity: 0.3; }
.sheet-link-tile.drag-over { border-color: var(--accent); background: var(--accent-glow); }

/* ── SEARCH BAR ── */
.search-bar {
  background: var(--header-bg);
  backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px);
  border-bottom: 1px solid var(--border);
  max-height: 0; overflow: hidden;
  transition: max-height 0.3s var(--ease), opacity 0.25s var(--ease);
  opacity: 0;
}
.search-bar.open {
  max-height: 420px;
  opacity: 1;
}
.search-bar-inner {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 16px;
  max-width: 960px; margin: 0 auto;
}
.search-icon { font-size: 1rem; color: var(--text-secondary); flex-shrink: 0; }
#searchInput {
  flex: 1; background: var(--input-bg);
  border: 1px solid var(--border); border-radius: 10px;
  padding: 9px 12px; color: var(--text-primary);
  font-family: var(--font-body); font-size: 16px;
  outline: none; transition: border-color var(--transition);
}
#searchInput:focus { border-color: var(--border-accent); }
#searchInput::placeholder { color: var(--text-secondary); }

.search-clear {
  background: var(--surface); border: 1px solid var(--border);
  color: var(--text-secondary); border-radius: 8px;
  width: 32px; height: 32px; cursor: pointer;
  font-size: 0.75rem; display: flex; align-items: center;
  justify-content: center; flex-shrink: 0;
  transition: all var(--transition);
}
.search-clear:hover { background: var(--delete); color: #fff; border-color: var(--delete); }

.search-results {
  max-width: 960px; margin: 0 auto;
  padding: 0 16px 12px;
  display: grid; grid-template-columns: repeat(4,1fr); gap: 8px;
  max-height: 46vh;
  overflow-y: auto;
  overscroll-behavior: contain;
}
@media (min-width:540px) { .search-results { grid-template-columns: repeat(5,1fr); } }
@media (min-width:700px) { .search-results { grid-template-columns: repeat(6,1fr); } }

.search-empty {
  grid-column: 1/-1;
  text-align: center; padding: 16px;
  font-size: 0.85rem; color: var(--text-secondary);
  font-style: italic;
}

.search-result-tab {
  grid-column: 1/-1;
  font-size: 0.68rem; font-weight: 600;
  color: var(--text-secondary); letter-spacing: 0.08em;
  text-transform: uppercase; padding: 8px 0 4px;
}

/* Search toggle active state */
#searchToggle.active {
  background: var(--accent-glow);
  border-color: var(--border-accent);
  color: var(--accent);
}

/* ── NOTE INDICATOR — tappable notebook-pen icon ── */
.tile-note-dot {
  position: absolute;
  top: 4px; left: 4px;
  width: 18px; height: 18px;
  border-radius: 6px;
  background: var(--accent);
  box-shadow: 0 0 6px var(--accent-glow);
  border: none;
  cursor: pointer;
  z-index: 3;
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.15s, box-shadow 0.15s;
  padding: 0;
}
.tile-note-dot img {
  filter: invert(1) opacity(0.95);
  pointer-events: none;
}
.tile-note-dot:hover  { transform: scale(1.2); box-shadow: 0 0 10px var(--accent); }
.tile-note-dot:active { transform: scale(0.9); }

/* ── NOTE TOOLTIP ── */
.note-tooltip {
  position: fixed; z-index: 500;
  background: var(--modal-bg);
  color: var(--text-primary);
  border: 1px solid var(--border-accent);
  border-radius: 12px;
  padding: 10px 14px;
  font-size: 0.82rem;
  font-weight: 400;
  font-family: var(--font-body);
  max-width: 240px;
  word-break: break-word;
  pointer-events: none;
  box-shadow: 0 8px 28px rgba(0,0,0,.28);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.18s var(--ease), transform 0.18s var(--ease);
  line-height: 1.5;
  user-select: text;
  -webkit-user-select: text;
}
.note-tooltip .note-tooltip-label {
  font-size: 0.65rem;
  color: var(--accent);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  display: block;
  margin-bottom: 3px;
}
.note-tooltip.show { opacity: 1; transform: translateY(0); }

/* ── LUCIDE SVG ICONS ── */
.btn-icon img,
.btn-icon svg,
.text-bar-btn img,
.btn-add-tab img,
.btn-pick-icon img,
.btn-text-icon img,
.icon-picker-close img,
.edit-banner img {
  display: inline-block;
  vertical-align: middle;
  pointer-events: none;
  flex-shrink: 0;
  /* Dark mode default — invert to white */
  filter: invert(1) opacity(0.8);
  transition: filter var(--transition), opacity var(--transition);
}

/* Light mode — keep dark */
[data-theme="light"] .btn-icon img,
[data-theme="light"] .text-bar-btn img,
[data-theme="light"] .btn-add-tab img,
[data-theme="light"] .icon-picker-close img,
[data-theme="light"] .edit-banner img,
[data-theme="light"] .btn-pick-icon img,
[data-theme="light"] .btn-text-icon img {
  filter: invert(0) opacity(0.7);
}

/* Hover — full opacity */
.btn-icon:hover img { filter: invert(1) opacity(1); }
[data-theme="light"] .btn-icon:hover img { filter: invert(0) opacity(1); }

/* Lock button accent when unlocked */
body.unlocked #lockToggle img {
  filter: none;
  opacity: 1;
}

/* Icon btn — tighter padding for icon-only buttons */
.icon-btn { padding: 7px 8px !important; }

/* ── NOTE TEXTAREA ── */
#linkNote {
  width: 100%;
  background: var(--input-bg); border: 1px solid var(--border);
  border-radius: 10px; padding: 10px 12px;
  color: var(--text-primary); font-family: var(--font-body);
  font-size: 16px; outline: none; resize: vertical;
  transition: border-color var(--transition);
  min-height: 72px; max-height: 160px;
  line-height: 1.5;
}
#linkNote:focus        { border-color: var(--border-accent); }
#linkNote::placeholder { color: var(--text-secondary); }

/* ── TAB TITLE BAR ── */
.tab-title-bar {
  max-width: 960px; margin: 0 auto;
  width: 100%; padding: 12px 16px 4px;
  text-align: center;
}
.tab-title-bar span {
  font-family: var(--font-display);
  font-size: 1.2rem; font-weight: 700;
  font-style: italic;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}

/* ── GRID TABS ROW ── */
.grid-tabs-row {
  display: flex; align-items: center;
  background: var(--header-bg);
  backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px);
  border-bottom: 1px solid var(--border);
  padding: 0 14px 0;
  gap: 4px;
  max-width: 100%;
}

.grid-tabs-nav {
  display: flex; gap: 3px;
  overflow-x: auto; flex: 1;
  scrollbar-width: none;
  padding: 6px 0;
}
.grid-tabs-nav::-webkit-scrollbar { display: none; }

.grid-tab-btn {
  background: none; border: none;
  color: var(--text-secondary);
  font-family: var(--font-body); font-size: 0.88rem; font-weight: 500;
  padding: 5px 14px; border-radius: 8px;
  cursor: pointer; transition: all var(--transition);
  white-space: nowrap; flex-shrink: 0;
}
.grid-tab-btn:hover  { color: var(--text-primary); background: var(--surface); }
.grid-tab-btn.active { color: var(--accent); background: var(--accent-glow); font-weight: 600; }

.grid-tab-add {
  flex-shrink: 0; background: var(--surface);
  border: 1px dashed var(--border); color: var(--text-secondary);
  border-radius: 8px; width: 28px; height: 28px;
  font-size: 1rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all var(--transition); margin: 4px 0;
}
.grid-tab-add:hover { background: var(--accent-glow); border-color: var(--accent); color: var(--accent); }
body.locked .grid-tab-add { display: none; }

/* ── GOOGLE FALLBACK FOOTER (pinned under results) ── */
.search-google-footer {
  max-width: 960px; margin: 0 auto;
  width: 100%;
  padding: 8px 16px 12px;
}
.search-google-footer:empty { display: none; }
.search-google-row {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  padding: 11px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  cursor: pointer;
  font-family: var(--font-body);
  text-align: left;
  transition: background var(--transition), border-color var(--transition);
}
.search-google-row:hover {
  background: var(--surface-hover);
  border-color: var(--border-accent);
}
.search-google-g {
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: -0.02em;
  flex-shrink: 0;
}
.search-google-text {
  flex: 1;
  font-size: 0.82rem;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.search-google-arrow {
  flex-shrink: 0;
  color: var(--text-secondary);
  font-size: 0.95rem;
}

/* ── TEXT ICON OPTION ROWS (bg style + corner shape) ── */
.ti-option-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-top: 4px;
}
.ti-option-btn {
  padding: 8px 4px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-secondary);
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition);
  text-align: center;
}
.ti-option-btn:hover { background: var(--surface-hover); border-color: var(--border-accent); }
.ti-option-btn.active {
  background: var(--accent-glow);
  border-color: var(--border-accent);
  color: var(--accent);
  font-weight: 600;
}

/* ── MOVE BUTTON (tile control) ── */
.tile-ctrl.move:hover       { background: var(--accent-2); color: #fff; }
.sheet-tile-ctrl.move:hover { background: var(--accent-2); color: #fff; }

/* ── MOVE MODAL ── */
.move-modal-sub {
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin-bottom: 14px;
  line-height: 1.4;
}
.move-dest-list {
  display: flex; flex-direction: column; gap: 4px;
  max-height: 50vh; overflow-y: auto;
}
.move-group-label {
  font-size: 0.66rem; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-secondary);
  padding: 10px 2px 4px;
}
.move-dest-btn {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  font-family: var(--font-body);
  text-align: left;
  transition: background var(--transition), border-color var(--transition);
}
.move-dest-btn:hover:not(.current):not(.full) {
  background: var(--surface-hover);
  border-color: var(--border-accent);
}
.move-dest-btn.current,
.move-dest-btn.full {
  opacity: 0.45;
  cursor: not-allowed;
}
.move-dest-icon { font-size: 1.2rem; line-height: 1; flex-shrink: 0; width: 24px; text-align: center; }
.move-dest-icon-img { width: 22px; height: 22px; object-fit: contain; border-radius: 5px; flex-shrink: 0; }
.move-dest-name {
  flex: 1; font-size: 0.9rem; color: var(--text-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.move-dest-count {
  font-size: 0.7rem; color: var(--text-secondary);
  flex-shrink: 0;
}

.tile-ctrl.dup:hover       { background: var(--accent); color:#fff; }
.sheet-tile-ctrl.dup:hover { background: var(--accent); color:#fff; }