/* =========================================================
   Orderly design v2 — Glass (as in SulitSee).
   Everything here is scoped to html[data-design="v2"], so the Classic
   design (v1) is untouched. theme.js sets data-design and data-glass
   before first paint; the switch lives in the account menu, More and
   Settings → Preferences.

   data-glass="liquid"   clear, saturated, light-catching rim, refraction
   data-glass="frosted"  soft and mostly opaque, easiest to read

   Tokens
     --g-card   cards and page panels (text-heavy: keeps enough body)
     --g-float  floating surfaces: dock, menus, sheets, dialogs
     --g-bar    edge-to-edge bars (top bar, sidebar)
     --g-solid  tiles inside glass
   ========================================================= */
html[data-design="v2"] {
  --g-card: linear-gradient(165deg, rgb(255 255 255 / .8), rgb(255 255 255 / .6));
  --g-card-filter: blur(16px) saturate(170%);
  --g-card-border: rgb(255 255 255 / .75);
  --g-card-shadow: inset 0 1px 1px rgb(255 255 255 / .95), 0 12px 32px -18px rgb(194 65 12 / .3), 0 2px 8px -4px rgb(15 23 42 / .08);
  --g-float: radial-gradient(130% 110% at 0% 0%, rgb(255 255 255 / .85), rgb(255 255 255 / 0) 55%), rgb(255 255 255 / .8);
  --g-float-filter: blur(22px) saturate(190%) brightness(1.03);
  --g-border: rgb(255 255 255 / .7);
  --g-shadow: inset 0 1px 1px rgb(255 255 255 / .95), inset 0 -10px 18px -12px rgb(255 138 0 / .2), 0 18px 48px -16px rgb(194 65 12 / .3), 0 6px 20px -10px rgb(15 23 42 / .22);
  --g-rim: linear-gradient(140deg, #fff, rgb(255 255 255 / .12) 32%, rgb(255 138 0 / .32) 62%, rgb(167 139 250 / .32) 82%, rgb(255 255 255 / .85));
  --g-bar: rgb(255 251 246 / .62);
  --g-bar-filter: blur(20px) saturate(180%);
  --g-solid: rgb(255 255 255 / .55);
  --g-amb: radial-gradient(42% 36% at 92% 4%, rgb(255 138 0 / .3), transparent 72%), radial-gradient(40% 34% at 0% 46%, rgb(139 92 246 / .2), transparent 72%), radial-gradient(46% 40% at 96% 92%, rgb(20 184 166 / .16), transparent 72%), radial-gradient(36% 30% at 30% 102%, rgb(255 178 87 / .24), transparent 72%), linear-gradient(180deg, #FFF8F1, #F6F4FB 55%, #F2F7F8);
  --bottom-nav-h: 84px;
}
html[data-design="v2"][data-glass="frosted"] {
  --g-card: rgb(255 255 255 / .9);
  --g-card-filter: blur(24px) saturate(140%);
  --g-card-border: rgb(226 232 240 / .9);
  --g-card-shadow: 0 10px 30px -18px rgb(15 23 42 / .25), 0 2px 6px -3px rgb(15 23 42 / .06);
  --g-float: rgb(255 255 255 / .9);
  --g-float-filter: blur(28px) saturate(140%);
  --g-border: rgb(226 232 240 / .95);
  --g-shadow: 0 20px 50px -18px rgb(15 23 42 / .28), 0 4px 14px -6px rgb(15 23 42 / .1);
  --g-bar: rgb(255 253 250 / .86);
  --g-bar-filter: blur(24px) saturate(130%);
  --g-solid: rgb(241 245 249 / .8);
}
html.dark[data-design="v2"] {
  --g-card: linear-gradient(165deg, rgb(30 43 70 / .66), rgb(17 26 44 / .56));
  --g-card-border: rgb(255 255 255 / .09);
  --g-card-shadow: inset 0 1px 1px rgb(255 255 255 / .1), 0 16px 40px -18px rgb(0 0 0 / .7);
  --g-float: radial-gradient(130% 110% at 0% 0%, rgb(255 255 255 / .1), rgb(255 255 255 / 0) 55%), rgb(17 26 44 / .82);
  --g-float-filter: blur(22px) saturate(180%) brightness(1.06);
  --g-border: rgb(255 255 255 / .1);
  --g-shadow: inset 0 1px 1px rgb(255 255 255 / .2), inset 0 -12px 22px -14px rgb(255 138 0 / .28), 0 20px 50px -16px rgb(0 0 0 / .75), 0 6px 18px -8px rgb(0 0 0 / .5);
  --g-rim: linear-gradient(140deg, rgb(255 255 255 / .5), rgb(255 255 255 / .04) 32%, rgb(255 138 0 / .32) 62%, rgb(167 139 250 / .3) 80%, rgb(255 255 255 / .26));
  --g-bar: rgb(10 16 30 / .62);
  --g-solid: rgb(255 255 255 / .06);
  --g-amb: radial-gradient(42% 36% at 92% 4%, rgb(255 138 0 / .2), transparent 72%), radial-gradient(40% 34% at 0% 46%, rgb(124 58 237 / .22), transparent 72%), radial-gradient(46% 40% at 96% 92%, rgb(20 184 166 / .13), transparent 72%), radial-gradient(36% 30% at 30% 102%, rgb(255 138 0 / .12), transparent 72%), linear-gradient(180deg, #0B1120, #0A0F1E 55%, #08121A);
}
html.dark[data-design="v2"][data-glass="frosted"] {
  --g-card: rgb(17 26 44 / .9);
  --g-card-border: rgb(255 255 255 / .07);
  --g-card-shadow: 0 16px 40px -18px rgb(0 0 0 / .7);
  --g-float: rgb(17 26 44 / .92);
  --g-border: rgb(255 255 255 / .08);
  --g-shadow: 0 20px 50px -16px rgb(0 0 0 / .75), 0 6px 18px -8px rgb(0 0 0 / .5);
  --g-bar: rgb(10 16 30 / .88);
  --g-solid: rgb(255 255 255 / .05);
}

/* ---------- Ambient light behind the glass ---------- */
html[data-design="v2"] body { background: transparent; }
html[data-design="v2"] { background: #FFF8F1; }
html.dark[data-design="v2"] { background: #0A0F1E; }
html[data-design="v2"] body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: var(--g-amb); }

/* ---------- Surfaces ---------- */
html[data-design="v2"] .card:not([class*="bg-"]),
html[data-design="v2"] .place-card,
html[data-design="v2"] .empty,
html[data-design="v2"] .pal-trigger {
  background: var(--g-card); border-color: var(--g-card-border); box-shadow: var(--g-card-shadow);
  -webkit-backdrop-filter: var(--g-card-filter); backdrop-filter: var(--g-card-filter);
}
html[data-design="v2"] .card-hover:hover { box-shadow: var(--g-card-shadow), 0 18px 40px -20px rgb(255 138 0 / .45); border-color: rgb(255 138 0 / .35); }
/* coloured cards stay solid, with a glassy gloss */
html[data-design="v2"] .card.bg-brand { background: linear-gradient(160deg, #FFB257, #FF8A00 48%, #F07C00); box-shadow: inset 0 1px 1px rgb(255 255 255 / .55), inset 0 -10px 20px -12px rgb(194 65 12 / .6), 0 14px 30px -14px rgb(255 138 0 / .7); }
html[data-design="v2"] .card.bg-deep { background: radial-gradient(120% 100% at 0% 0%, rgb(255 255 255 / .12), transparent 55%), linear-gradient(160deg, #1E293B, #0F172A); box-shadow: inset 0 1px 1px rgb(255 255 255 / .18), 0 14px 30px -14px rgb(15 23 42 / .6); }
/* tiles inside glass read as a lighter layer, not a solid block */
html[data-design="v2"] .card .bg-soft, html[data-design="v2"] .acct-stats a, html[data-design="v2"] .more-prefs { background: var(--g-solid); }
html[data-design="v2"] .input, html[data-design="v2"] .select, html[data-design="v2"] textarea.input { background-color: rgb(var(--c-surface) / .72); }
html[data-design="v2"][data-glass="frosted"] .input, html[data-design="v2"][data-glass="frosted"] .select { background-color: var(--surface); }
html[data-design="v2"] .btn-secondary { background: rgb(var(--c-surface) / .62); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
html[data-design="v2"] .btn-primary { background: linear-gradient(160deg, #FFB257, #FF8A00 45%, #F07C00); box-shadow: inset 0 1px 1px rgb(255 255 255 / .55), inset 0 -6px 12px -8px rgb(194 65 12 / .6), 0 10px 22px -10px rgb(255 138 0 / .8); }
html[data-design="v2"] .btn-primary:hover { filter: brightness(1.04); }

/* Top bar and sidebar: edge-to-edge glass */
html[data-design="v2"] .topbar, html[data-design="v2"] .topbar.is-scrolled { background: var(--g-bar); -webkit-backdrop-filter: var(--g-bar-filter); backdrop-filter: var(--g-bar-filter); }
html[data-design="v2"] .topbar.is-scrolled { border-bottom-color: var(--g-border); box-shadow: 0 10px 30px -22px rgb(15 23 42 / .35); }
html[data-design="v2"] .sidebar { background: var(--g-bar); -webkit-backdrop-filter: var(--g-bar-filter); backdrop-filter: var(--g-bar-filter); border-right-color: var(--g-border); }
html[data-design="v2"] .sb-nav a:hover { background: var(--g-solid); }
html[data-design="v2"] .sb-nav a[aria-current="page"] { background: linear-gradient(90deg, rgb(255 138 0 / .16), rgb(255 138 0 / .05)); box-shadow: inset 0 0 0 1px rgb(255 138 0 / .18); }
html[data-design="v2"] .set-nav a.is-active { background: var(--g-card); box-shadow: var(--g-card-shadow); }
html[data-design="v2"] .demo-banner { background: rgb(15 23 42 / .82); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }

/* Floating glass: account menu, dialogs, tour */
html[data-design="v2"] .glass-panel,
html[data-design="v2"] .modal-panel,
html[data-design="v2"] .tour-card {
  background: var(--g-float); border: 1px solid var(--g-border); box-shadow: var(--g-shadow);
  -webkit-backdrop-filter: var(--g-float-filter); backdrop-filter: var(--g-float-filter);
}
html[data-design="v2"] .glass-panel::before, html[data-design="v2"] .modal-panel::after {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; background: var(--g-rim); pointer-events: none; z-index: 2;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
}
html[data-design="v2"][data-glass="frosted"] .glass-panel::before, html[data-design="v2"][data-glass="frosted"] .modal-panel::after { display: none; }
html[data-design="v2"] .acct-menu { border-radius: 26px; }
html[data-design="v2"] .acct-row:hover, html[data-design="v2"] .acct-row:focus-visible { background: var(--g-solid); }
html[data-design="v2"] .modal-foot { background: transparent; border-top-color: var(--g-border); }
html[data-design="v2"] .modal-backdrop { background: rgb(15 23 42 / .3); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
html.dark[data-design="v2"] .modal-backdrop { background: rgb(2 6 15 / .5); }
html[data-design="v2"] .more-grid a, html[data-design="v2"] .more-grid button { background: var(--g-solid); border-color: var(--g-border); }
/* Liquid refraction on Chromium (glass.js): sharper blur so the bend shows */
html.can-refract[data-design="v2"][data-glass="liquid"] .glass-panel[data-refract] { -webkit-backdrop-filter: var(--refract,) blur(8px) saturate(190%) brightness(1.04); backdrop-filter: var(--refract,) blur(8px) saturate(190%) brightness(1.04); }

/* Segmented controls with a glass thumb */
html[data-design="v2"] .seg3, html[data-design="v2"] .theme-seg { background: var(--g-solid); box-shadow: inset 0 1px 2px rgb(15 23 42 / .08); }
html[data-design="v2"] .seg3 > button[aria-checked="true"], html[data-design="v2"] .theme-seg button[aria-pressed="true"] { background: radial-gradient(120% 90% at 30% 8%, rgb(255 255 255 / .98), rgb(255 255 255 / .7)); box-shadow: inset 0 1px 1px #fff, inset 0 0 0 1px rgb(255 255 255 / .8), 0 4px 12px -4px rgb(255 138 0 / .35); }
html.dark[data-design="v2"] .seg3 > button[aria-checked="true"], html.dark[data-design="v2"] .theme-seg button[aria-pressed="true"] { background: radial-gradient(120% 90% at 30% 8%, rgb(255 255 255 / .22), rgb(255 255 255 / .06)); box-shadow: inset 0 1px 1px rgb(255 255 255 / .35), inset 0 0 0 1px rgb(255 255 255 / .12), 0 6px 14px -6px rgb(0 0 0 / .6); }

/* ---------- Mobile dock (bottom nav) ----------
   A floating glass pill. glass.js adds the liquid lens that follows your
   finger and folds the labels away while you scroll down. */
@media (max-width: 1023px) {
  html[data-design="v2"] .bottom-nav {
    left: 12px; right: 12px; bottom: calc(12px + var(--safe-b)); height: 66px; padding: 0 6px; border-radius: 26px; border: 1px solid var(--g-border);
    background: radial-gradient(130% 120% at 0% 0%, rgb(255 255 255 / .75), rgb(255 255 255 / 0) 55%), rgb(255 255 255 / .62); box-shadow: var(--g-shadow);
    -webkit-backdrop-filter: blur(14px) saturate(180%) brightness(1.04); backdrop-filter: blur(14px) saturate(180%) brightness(1.04);
    touch-action: pan-y; -webkit-user-select: none; user-select: none; transition: height .35s cubic-bezier(.2,.8,.2,1), border-radius .35s ease;
  }
  html.dark[data-design="v2"] .bottom-nav { background: radial-gradient(130% 120% at 0% 0%, rgb(255 255 255 / .12), rgb(255 255 255 / 0) 55%), rgb(17 26 44 / .66); }
  html[data-design="v2"][data-glass="frosted"] .bottom-nav { background: var(--g-float); -webkit-backdrop-filter: var(--g-float-filter); backdrop-filter: var(--g-float-filter); }
  html.can-refract[data-design="v2"][data-glass="liquid"] .bottom-nav[data-refract] { -webkit-backdrop-filter: var(--refract,) blur(9px) saturate(180%) brightness(1.04); backdrop-filter: var(--refract,) blur(9px) saturate(180%) brightness(1.04); }
  html[data-design="v2"] .bn-item { position: relative; z-index: 3; min-height: 0; transition: color .2s, transform .35s cubic-bezier(.3,1.5,.5,1), gap .35s ease; }
  html[data-design="v2"] .bn-item[aria-current="page"]::after { content: ""; position: absolute; bottom: 6px; left: 50%; width: 16px; height: 3px; margin-left: -8px; border-radius: 99px; background: linear-gradient(90deg, #FF8A00, #FFB257); box-shadow: 0 0 10px rgb(255 138 0 / .7); transition: bottom .35s, width .35s, margin .35s; }
  html[data-design="v2"]:not(.dark) .bn-item { text-shadow: 0 1px 0 rgb(255 255 255 / .7); }
  html[data-design="v2"] .bn-add { position: relative; z-index: 3; }
  html[data-design="v2"] .bn-add span { margin-top: -26px; border-radius: 21px; background: linear-gradient(145deg, #FFC47A, #FF8A00 45%, #E06A00); box-shadow: 0 14px 30px -8px rgb(255 138 0 / .75), 0 4px 12px -2px rgb(194 65 12 / .4), inset 0 1px 1px rgb(255 255 255 / .55); position: relative; overflow: hidden; transition: transform .35s cubic-bezier(.3,1.5,.5,1); }
  html[data-design="v2"] .bn-add span::before { content: ""; position: absolute; inset: 2px 2px 50% 2px; border-radius: 19px 19px 40% 40%; background: linear-gradient(180deg, rgb(255 255 255 / .45), rgb(255 255 255 / 0)); pointer-events: none; }
  /* compact while scrolling down */
  html[data-design="v2"].dock-compact .bottom-nav { height: 54px; border-radius: 22px; }
  html[data-design="v2"].dock-compact .bn-item { gap: 0; font-size: 0; }
  html[data-design="v2"].dock-compact .bn-item svg { transform: scale(1.06); }
  html[data-design="v2"].dock-compact .bn-item[aria-current="page"]::after { bottom: 4px; width: 5px; margin-left: -2.5px; }
  html[data-design="v2"].dock-compact .bn-add span { transform: scale(.84) translateY(6px); }
  /* liquid lens */
  html[data-design="v2"] .dock-lens { position: absolute; z-index: 2; top: 5px; bottom: 5px; left: 0; width: 64px; border-radius: 20px; pointer-events: none; opacity: 0; transform: translateX(var(--lx, 0px)) scale(.5, .65); transition: transform .5s cubic-bezier(.25,1.6,.45,1), opacity .25s ease;
    background: radial-gradient(120% 90% at 30% 8%, rgb(255 255 255 / .95), rgb(255 255 255 / .35) 55%, rgb(255 237 213 / .55)), linear-gradient(180deg, rgb(255 255 255 / .5), rgb(255 255 255 / .2));
    box-shadow: inset 0 1px 1px #fff, inset 0 -3px 6px rgb(255 138 0 / .16), inset 0 0 0 1px rgb(255 255 255 / .75), inset 4px 0 8px -6px rgb(255 138 0 / .5), inset -4px 0 8px -6px rgb(167 139 250 / .55), 0 10px 26px -6px rgb(255 138 0 / .35); }
  html.dark[data-design="v2"] .dock-lens { background: radial-gradient(120% 90% at 30% 8%, rgb(255 255 255 / .24), rgb(255 255 255 / .05) 60%), rgb(255 138 0 / .08); box-shadow: inset 0 1px 1px rgb(255 255 255 / .4), inset 0 -3px 6px rgb(0 0 0 / .3), inset 0 0 0 1px rgb(255 255 255 / .16), 0 10px 26px -6px rgb(0 0 0 / .6); }
  html[data-design="v2"][data-glass="frosted"] .dock-lens { background: var(--raised); box-shadow: 0 6px 16px -6px rgb(15 23 42 / .3); }
  html[data-design="v2"] .bottom-nav.is-touching .dock-lens { opacity: 1; transform: translateX(var(--lx, 0px)) scale(var(--sx, 1), var(--sy, 1)); }
  html[data-design="v2"] .bottom-nav.is-dragging .dock-lens { transition: transform .12s ease-out, opacity .25s ease; }
  html[data-design="v2"] .bn-item.is-lensed { color: var(--text); transform: scale(1.12); }
  html[data-design="v2"] .bn-add.is-lensed span { transform: scale(1.06); }
  html[data-design="v2"] .toast-wrap { bottom: calc(var(--bottom-nav-h) + 1rem + var(--safe-b)); }
}
html:not([data-design="v2"]) .dock-lens { display: none; }

/* Design switch: a soft cross-fade */
html.design-switching::view-transition-old(root) { animation: 220ms ease both oGlassOut; }
html.design-switching::view-transition-new(root) { animation: 340ms cubic-bezier(.2,.8,.2,1) both oGlassIn; }
@keyframes oGlassOut { to { opacity: 0; } }
@keyframes oGlassIn { from { opacity: 0; filter: blur(6px); } }

/* Readability first: no blur or motion for people who ask for less */
@media (prefers-reduced-transparency: reduce) {
  html[data-design="v2"] { --g-card: var(--surface); --g-float: var(--surface); --g-bar: var(--soft); }
}
@media (prefers-reduced-motion: reduce) {
  html[data-design="v2"] .dock-lens, html[data-design="v2"] .bottom-nav, html[data-design="v2"] .bn-item, html[data-design="v2"] .bn-add span { transition: none; }
}