/* EasyClippers 13.9: glass. The owner, Nov 3 2026: "a really high quality glass finish over it so it looks like
   glass/water, but really good". The light comes from a soft aurora behind everything: a few slow pools of aqua,
   violet, blue and rose that drift, with a fine grain over them so they never band. Panels are glass over it: a faint
   tint, a specular sheen in the top corner, a bright rim along the top edge, a soft shadow below, and a real frosted
   blur where content moves beneath (the bars, sheets, menus and dialogs). Buttons are liquid: a glossy highlight over
   a deeper colour. Text stays full white on navy and full navy on white (the owner's ask of the same day): the glass
   never lowers it. Loaded last, so it lays the finish over app.css, shell.css and home.css. Motion stops for reduced
   motion, and browsers without backdrop-filter get the same panels without the frost. */

/* ---------- the glass tokens, per surface (light: on white; dark: on navy) ---------- */
:root, :root[data-theme="dark"] :is(.card.glass, .glass.card, .feat, .lp-plan, .tiles, .monitor, .post-list, .auth-card, .ob-line) {
  --g-tint: rgba(255, 255, 255, .86); --g-tint-2: rgba(255, 255, 255, .6); --g-edge: rgba(7, 18, 38, .12);
  --g-rim: rgba(255, 255, 255, .95); --g-sheen: rgba(255, 255, 255, .7); --g-base: rgba(255, 255, 255, .78);
  --g-shadow: 0 1px 2px rgba(7, 18, 38, .06), 0 14px 34px -16px rgba(7, 18, 38, .22);
  --g-shadow-sm: 0 1px 2px rgba(7, 18, 38, .08);
  --g-field: #ffffff; --g-field-sh: inset 0 1px 2px rgba(7, 18, 38, .07);
  --chart-a: #0e7490; --chart-a2: #0891b2; --chart-b: #6d28d9; --chart-c: #475569; --chart-d: #e11d48; --chart-e: #b45309; --chart-grid: rgba(7, 18, 38, .08);
  --aurora: radial-gradient(34% 30% at 14% 8%, rgba(46, 230, 214, .16), transparent 70%),
    radial-gradient(32% 30% at 88% 6%, rgba(124, 92, 255, .13), transparent 70%),
    radial-gradient(38% 34% at 70% 70%, rgba(37, 99, 235, .09), transparent 70%),
    radial-gradient(30% 28% at 6% 86%, rgba(255, 143, 179, .08), transparent 70%);
}
:root[data-theme="dark"], .sidebar, .tabbar, .on-dark, .card.glass, .glass.card, .feat, .tiles, .monitor, .post-list, .ob-line,
.home, .hm-sticky, .hm-float, .login.site {
  --g-tint: rgba(255, 255, 255, .11); --g-tint-2: rgba(255, 255, 255, .035); --g-edge: rgba(255, 255, 255, .14);
  --g-rim: rgba(255, 255, 255, .26); --g-sheen: rgba(255, 255, 255, .17); --g-base: rgba(10, 24, 48, .46);
  --g-shadow: 0 1px 2px rgba(0, 0, 0, .28), 0 26px 64px -34px rgba(0, 0, 0, .9);
  --g-shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);
  --g-field: rgba(2, 8, 20, .35); --g-field-sh: inset 0 1px 2px rgba(0, 0, 0, .35), 0 1px 0 rgba(255, 255, 255, .05);
  --chart-a: #2ee6d6; --chart-a2: #22d3ee; --chart-b: #a78bfa; --chart-c: #6b8bb5; --chart-d: #fb7185; --chart-e: #fbbf24; --chart-grid: rgba(148, 197, 255, .08);
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --aurora: var(--aurora-dark); } }
:root[data-theme="dark"] { --aurora: var(--aurora-dark); }
:root { --aurora-dark: radial-gradient(36% 30% at 16% 10%, rgba(46, 230, 214, .24), transparent 70%),
    radial-gradient(34% 30% at 86% 6%, rgba(124, 92, 255, .26), transparent 70%),
    radial-gradient(42% 38% at 72% 60%, rgba(37, 99, 235, .2), transparent 70%),
    radial-gradient(36% 32% at 8% 76%, rgba(255, 143, 179, .11), transparent 70%),
    radial-gradient(30% 28% at 50% 98%, rgba(46, 230, 214, .12), transparent 70%);
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* ---------- the light behind everything ---------- */
.backdrop { isolation: isolate; }
.backdrop.studio::before, .backdrop.home-bg::before, html.pre-home .backdrop::before {
  content: ''; position: absolute; inset: -18%; z-index: 0; pointer-events: none;
  background: var(--aurora); filter: blur(28px) saturate(125%); animation: auroraDrift 40s ease-in-out infinite alternate; }
.backdrop.home-bg::before, html.pre-home .backdrop::before { background: var(--aurora-dark); }
.backdrop.studio::after, .backdrop.home-bg::after, html.pre-home .backdrop::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background-image: var(--grain); opacity: .05; mix-blend-mode: overlay; }
@keyframes auroraDrift { 0% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(3%, 2%, 0) scale(1.06); }
  100% { transform: translate3d(-2%, 4%, 0) scale(1.03); } }
/* the website's own colour now comes from the backdrop, so its pages let the light through */
.home, .login.site { background: transparent; }
html.pre-home .home { background: transparent; }

/* ---------- glass panels ---------- */
.glass, .card.glass, .glass.card, .tiles, .monitor, .post-list, .ob-line, .auth-card,
.hm-card, .hm-step, .hm-plan, .hm-incl, .hm-extra > div, .hm-why > div, .hm-stage, .hm-final {
  background:
    radial-gradient(120% 70% at 8% -14%, var(--g-sheen), transparent 56%),
    linear-gradient(160deg, var(--g-tint), var(--g-tint-2) 48%, transparent),
    var(--g-base);
  border-color: var(--g-edge);
  box-shadow: inset 0 1px 0 var(--g-rim), inset 0 0 0 1px rgba(255, 255, 255, .02), var(--g-shadow);
}
/* the navy cards keep their deep navy under the glass (full white text on them): only a sheen in the corner and a
   bright rim, never a grey wash */
.card.glass, .glass.card, .tiles, .monitor, .post-list, .ob-line, .feat {
  --g-base: #081530; --g-tint: rgba(255, 255, 255, .05); --g-tint-2: rgba(255, 255, 255, .01); --g-sheen: rgba(150, 210, 255, .16);
  --g-rim: rgba(255, 255, 255, .22); --g-edge: rgba(255, 255, 255, .1);
}
:root[data-theme="dark"] :is(.card.glass, .glass.card, .tiles, .monitor, .post-list, .ob-line, .feat, .auth-card) {
  --g-base: color-mix(in srgb, var(--surface) 92%, transparent);
}
/* the website's panels frost what drifts behind them */
.hm-card, .hm-step, .hm-plan, .hm-incl, .hm-extra > div, .hm-why > div, .hm-stage, .hm-final, .login.site .auth-card {
  -webkit-backdrop-filter: blur(18px) saturate(165%); backdrop-filter: blur(18px) saturate(165%);
}
.hm-plan.rec { background:
    radial-gradient(120% 70% at 8% -14%, rgba(255, 255, 255, .2), transparent 56%),
    linear-gradient(160deg, rgba(46, 230, 214, .16), rgba(124, 92, 255, .08) 55%, transparent), rgba(12, 30, 60, .55);
  border: 1px solid rgba(46, 230, 214, .55); }
.hm-final { background:
    radial-gradient(70% 60% at 50% -10%, rgba(46, 230, 214, .26), transparent 70%),
    radial-gradient(120% 70% at 8% -14%, rgba(255, 255, 255, .14), transparent 56%),
    linear-gradient(160deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .03) 48%, transparent), rgba(10, 24, 48, .5); }
.hm-use { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 26px 60px -34px rgba(0, 0, 0, .9); border-color: rgba(255, 255, 255, .14); }

/* ---------- liquid buttons ---------- */
.btn.primary, .btn.success, .hm-btn.primary, .hm-sticky a {
  background: radial-gradient(130% 100% at 50% -38%, rgba(255, 255, 255, .7), rgba(255, 255, 255, 0) 54%),
    linear-gradient(180deg, #67f3e8 0%, #26dccd 50%, #15c2b4 100%);
  border: 1px solid rgba(255, 255, 255, .5); color: #03141a;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), inset 0 -3px 8px rgba(0, 92, 92, .26), 0 10px 26px -10px rgba(34, 214, 200, .7), 0 1px 2px rgba(0, 0, 0, .18);
  transition: filter .16s, transform .16s, box-shadow .16s; }
.btn.primary:hover, .btn.success:hover, .hm-btn.primary:hover, .hm-sticky a:hover { filter: brightness(1.06) saturate(1.06); color: #03141a;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85), inset 0 -3px 8px rgba(0, 92, 92, .22), 0 14px 32px -10px rgba(34, 214, 200, .8), 0 1px 2px rgba(0, 0, 0, .18); }
.btn.primary:active, .btn.success:active, .hm-btn.primary:active { transform: translateY(1px); filter: brightness(.98); }
.btn.primary:disabled { filter: saturate(.4) brightness(.95); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6); }
/* Approve is the main action wherever it shows, so it wears the one main colour too (the owner's decision 10).
   Every other button is glass: clear on white, smoked on navy */
.btn:not(.primary):not(.success):not(.danger):not(.ghost):not(.link):not(.google) {
  background: linear-gradient(180deg, var(--g-tint), var(--g-tint-2)); border-color: var(--g-edge);
  box-shadow: inset 0 1px 0 var(--g-rim), var(--g-shadow-sm); }
.btn:not(.primary):not(.success):not(.danger):not(.ghost):not(.link):not(.google):hover { border-color: var(--border-3); filter: brightness(1.03); }
.hm-btn.line { background: linear-gradient(180deg, rgba(255, 255, 255, .13), rgba(255, 255, 255, .04)); border-color: rgba(255, 255, 255, .28);
  -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28); }
.hm-btn.line:hover { background: linear-gradient(180deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, .07)); border-color: rgba(255, 255, 255, .4); }

/* ---------- frosted bars, sheets and menus ---------- */
.topbar { background: color-mix(in srgb, var(--topbar-bg) 70%, transparent); -webkit-backdrop-filter: blur(20px) saturate(170%); backdrop-filter: blur(20px) saturate(170%);
  box-shadow: inset 0 -1px 0 var(--g-edge); }
.sidebar { background: radial-gradient(120% 40% at 0% 0%, rgba(46, 230, 214, .12), transparent 62%),
    radial-gradient(120% 50% at 100% 100%, rgba(124, 92, 255, .12), transparent 62%),
    linear-gradient(180deg, rgba(10, 24, 50, .9), rgba(6, 15, 34, .95));
  -webkit-backdrop-filter: blur(22px) saturate(150%); backdrop-filter: blur(22px) saturate(150%);
  border-right: 1px solid rgba(255, 255, 255, .07); box-shadow: inset -1px 0 0 rgba(255, 255, 255, .04); }
.nav button.on { background: linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .05)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), inset 0 0 0 1px rgba(255, 255, 255, .05); }
/* 13.14.5: the phone tab bar is near solid (it was 72% here and 82% in Light): page text showed through its labels */
.tabbar { background: rgba(6, 15, 34, .96); -webkit-backdrop-filter: blur(22px) saturate(170%); backdrop-filter: blur(22px) saturate(170%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 -10px 30px -12px rgba(0, 0, 0, .5); }
.overlay { -webkit-backdrop-filter: blur(6px) saturate(120%); backdrop-filter: blur(6px) saturate(120%); }
.modal, .drawer, .popover {
  background: radial-gradient(120% 60% at 10% -10%, var(--g-sheen), transparent 55%), linear-gradient(160deg, var(--g-tint), var(--g-tint-2) 50%, transparent),
    color-mix(in srgb, var(--raised) 90%, transparent);
  -webkit-backdrop-filter: blur(26px) saturate(170%); backdrop-filter: blur(26px) saturate(170%);
  border: 1px solid var(--g-edge); box-shadow: inset 0 1px 0 var(--g-rim), var(--shadow-pop); }
.toast { -webkit-backdrop-filter: blur(18px) saturate(170%); backdrop-filter: blur(18px) saturate(170%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 16px 40px -14px rgba(0, 0, 0, .55); }
.hm-nav { transition: background .25s, box-shadow .25s; }
.home.scrolled .hm-nav { background: rgba(6, 16, 34, .55); -webkit-backdrop-filter: blur(20px) saturate(170%); backdrop-filter: blur(20px) saturate(170%);
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .08); border-bottom-color: transparent; }
.hm-sticky { background: linear-gradient(180deg, rgba(3, 10, 23, 0), rgba(3, 10, 23, .55) 40%); }
.hm-float, .hm-field { background: linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .04)), rgba(10, 24, 48, .5);
  -webkit-backdrop-filter: blur(20px) saturate(170%); backdrop-filter: blur(20px) saturate(170%);
  border-color: rgba(255, 255, 255, .2); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .24), 0 20px 50px -24px rgba(0, 0, 0, .85); }
.hm-menu { background: rgba(4, 12, 28, .78); -webkit-backdrop-filter: blur(24px) saturate(160%); backdrop-filter: blur(24px) saturate(160%); }
.ptabs, .stab-groups, .seg { background: linear-gradient(180deg, var(--g-tint), var(--g-tint-2)); box-shadow: inset 0 1px 0 var(--g-rim); }
.ptabs button.on, .stab-groups button.on { box-shadow: inset 0 1px 0 var(--g-rim), var(--g-shadow-sm); }
/* 13.14.5: the option chosen in a segmented control was white on the white track in Light and darker than its track in
   Dark: it now takes the brand's aqua, a tint inside an ink ring, in both themes */
.seg button.on { background: rgb(var(--aq) / .16); color: var(--text-hi); box-shadow: inset 0 0 0 1.5px var(--brand-ink); }

/* ---------- fields ---------- */
.input, select.input, textarea.input { box-shadow: inset 0 1px 2px rgba(7, 18, 38, .06); }
:is(.card.glass, .glass.card, .monitor, .tiles, .auth-card, .sidebar) :is(.input, select.input, textarea.input) {
  background-color: var(--g-field); box-shadow: var(--g-field-sh); }     /* a recess on navy glass, plain white on white glass */
/* (13.14.5: background-color, not the shorthand, which wiped app.css's arrow off every dropdown in a card) */

@media (prefers-reduced-motion: reduce) { .backdrop::before { animation: none; } }

/* ---------- a light that follows the pointer across the glass (computers only; glass.js-free: core.js sets --mx/--my
   on the panel under the pointer). A soft pool of light, as on real glass or water ---------- */
@media (hover: hover) and (pointer: fine) {
  .glass, .card.glass, .glass.card, .tiles, .monitor, .post-list, .hm-card, .hm-step, .hm-plan:not(.rec), .hm-incl, .hm-extra > div, .hm-why > div {
    background-image: radial-gradient(280px circle at var(--mx, -400px) var(--my, -400px), rgba(255, 255, 255, var(--g-glow, .09)), transparent 62%),
      radial-gradient(120% 70% at 8% -14%, var(--g-sheen), transparent 56%),
      linear-gradient(160deg, var(--g-tint), var(--g-tint-2) 48%, transparent); }
  :root:not([data-theme="dark"]) :is(.glass:not(.card), .auth-card) { --g-glow: .5; }
}
.btn.danger { box-shadow: inset 0 1px 0 var(--g-rim), var(--g-shadow-sm); }

/* ---------- Light: a white menu with navy words (the owner, Nov 3 2026: "for light mode the menu bar should be like
   white too or off white"). app.css paints the menu and the phone tab bar navy in both themes; in Light they take the
   page's own tokens instead (each one inherited, so they follow any change to the light palette). The plan has no
   box (flat.css), and its golds go deeper on white. Dark is unchanged ---------- */
:root:not([data-theme="dark"]) :is(.sidebar, .tabbar) {
  color-scheme: light; --side-bg: #f6f8fb;
  --bg: inherit; --surface: inherit; --surface-2: inherit; --surface-3: inherit; --raised: inherit; --well: inherit;
  --topbar-bg: inherit; --media-bg: inherit; --scrim: inherit; --tip-bg: inherit; --tip-text: inherit;
  --hover: inherit; --active: inherit; --nav-on: inherit; --text: inherit; --text-2: inherit; --text-3: inherit;
  --text-hi: inherit; --text-soft: inherit; --border: inherit; --border-2: inherit; --border-3: inherit;
  --accent: inherit; --accent-hover: inherit; --accent-2: inherit; --on-accent: inherit; --accent-text: inherit;
  --accent-text-hover: inherit; --focus-ring: inherit; --focus: inherit; --brand-ink: inherit; --on-brand: inherit;
  --bar: inherit; --switch-on: inherit; --tab-on: inherit; --knob: inherit; --brand: inherit; --aqua: inherit;
  --aqua-2: inherit; --cyan: inherit; --blue: inherit; --violet: inherit; --mint: inherit; --amber: inherit;
  --rose: inherit; --tally: inherit; --tally-ink: inherit; --ov: inherit; --aq: inherit; --aq2: inherit;
  --cy: inherit; --bl: inherit; --vi: inherit; --mi: inherit; --ro: inherit; --am: inherit; --ta: inherit;
  --sh: inherit; --shk: inherit; --t-chip: inherit; --t-blue: inherit; --t-violet: inherit; --t-amber: inherit;
  --t-green: inherit; --t-red: inherit; --t-cyan: inherit; --t-aqua: inherit; --t-live: inherit; --t-gold: inherit;
  --code-bg: inherit; --code-text: inherit; --shadow-xs: inherit; --shadow: inherit; --shadow-lift: inherit;
  --shadow-pop: inherit; --g-tint: inherit; --g-tint-2: inherit; --g-edge: inherit; --g-rim: inherit;
  --g-sheen: inherit; --g-base: inherit; --g-shadow: inherit; --g-shadow-sm: inherit; --g-field: inherit;
  --g-field-sh: inherit; --chart-a: inherit; --chart-a2: inherit; --chart-b: inherit; --chart-c: inherit;
  --chart-d: inherit; --chart-e: inherit; --chart-grid: inherit; }
:root:not([data-theme="dark"]) .sidebar {
  background: radial-gradient(120% 34% at 0% 0%, rgba(46, 230, 214, .1), transparent 62%),
    radial-gradient(120% 40% at 100% 100%, rgba(124, 92, 255, .07), transparent 62%),
    linear-gradient(180deg, rgba(255, 255, 255, .92), rgba(243, 246, 251, .94));
  border-right: 1px solid rgba(7, 18, 38, .08); box-shadow: inset -1px 0 0 rgba(255, 255, 255, .7); }
:root:not([data-theme="dark"]) .nav button:hover:not(.on) { background: rgba(7, 18, 38, .045); }
:root:not([data-theme="dark"]) .nav button.on { background: #ffffff;
  box-shadow: 0 1px 2px rgba(7, 18, 38, .07), 0 8px 18px -12px rgba(7, 18, 38, .3), inset 0 0 0 1px rgba(7, 18, 38, .06); }
:root:not([data-theme="dark"]) .tabbar { background: rgba(255, 255, 255, .96); border-color: rgba(7, 18, 38, .08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 14px 36px -14px rgba(7, 18, 38, .32); }
:root:not([data-theme="dark"]) .tabbar button.on { color: var(--text-hi); background: rgba(7, 18, 38, .06); }