/* ============================================================
   BYANUSERVICES — Partner Portal theme.
   Skinned 1:1 to the live BYANUSERVICES member-app design language
   (/Users/dami/byanu-app/app: app.css / home.css / intro.css). Every recipe
   below — the self-hosted Cormorant + Satoshi faces, the gold-gradient pill
   with its soft glow, the liquid-glass cards with a hairline edge, the
   floating glass tab bar, the faint A-crest watermark + warm-gold vignette —
   is lifted from the member-app so the two surfaces read as one house.

   Dark is default; :root[data-theme="light"] ships the ivory day theme.
   Mobile-first (375px), tap targets >=44px, bottom tab bar 64px + safe-area.
   Class names are unchanged from Fase 1 so no view/logic breaks — this is a
   pure skin. New helper classes (.brand-crest, .auth-crest, .auth-wordmark,
   .auth-luxe, .auth-rule, .auth-dust) are additive.
   ============================================================ */

/* ---- Fonts (self-hosted, offline-safe — identical @font-face to member-app
        app.css lines 7-11). Without these --serif fell back to Georgia, which
        is the main reason the portal read as a generic dark form. ---- */
@font-face{font-family:'Cormorant Garamond';src:url('fonts/cg-normal.woff2') format('woff2');font-weight:300 700;font-style:normal;font-display:swap}
@font-face{font-family:'Cormorant Garamond';src:url('fonts/cg-italic.woff2') format('woff2');font-weight:300 700;font-style:italic;font-display:swap}
@font-face{font-family:'Satoshi';src:url('fonts/satoshi-300.woff2') format('woff2');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'Satoshi';src:url('fonts/satoshi-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Satoshi';src:url('fonts/satoshi-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}

:root{
  --bg:#080808; --bg2:#0d0d0d; --bg3:#141414; --bg4:#1a1a1a;
  /* member-app cards are a soft glass pane, not flat #121212. --card is only
     ever consumed as `background:var(--card)` in the views, so a translucent
     gradient is safe and turns every inline card into liquid glass at once
     (the blur is added on top via the [style*="var(--card)"] rule below). */
  --card:linear-gradient(160deg,rgba(28,28,31,.62),rgba(15,15,17,.52));
  --card-solid:#121212;
  --white:#f4f2ed; --off:#ccc9c1; --muted:#8d8980; --dim:#6f6b62; --subtle:#3a3733;
  --gold:#C9A961; --gold2:#e3cfa0; --gold-dim:rgba(201,169,97,0.12);
  --border:rgba(255,255,255,0.07); --border2:rgba(255,255,255,0.12);
  --glass-edge:rgba(255,255,255,.10); --glass-edge-gold:rgba(201,169,97,.20);
  --red:#e08a8a; --green:#7fd093;
  --serif:'Cormorant Garamond',Georgia,serif;
  --sans:'Satoshi',-apple-system,system-ui,sans-serif;
  --tabbar-h:64px;
  --sat:env(safe-area-inset-top); --sab:env(safe-area-inset-bottom);
  --sal:env(safe-area-inset-left); --sar:env(safe-area-inset-right);
  --topbar-h:56px;
  --fade-mid:rgba(8,8,8,.5);
  --watermark:.05;
}
:root[data-theme="light"]{
  --bg:#faf8f3; --bg2:#ffffff; --bg3:#f1ede4; --bg4:#e9e3d6;
  --card:linear-gradient(160deg,rgba(255,255,255,.82),rgba(247,242,232,.72));
  --card-solid:#ffffff;
  --white:#211d15; --off:#3d382c; --muted:#8a8272; --dim:#b7ae9c; --subtle:#d8d0be;
  --gold:#A9803A; --gold2:#c79a52; --gold-dim:rgba(169,128,58,0.10);
  --border:rgba(0,0,0,0.09); --border2:rgba(0,0,0,0.05);
  --glass-edge:rgba(0,0,0,.08); --glass-edge-gold:rgba(169,128,58,.24);
  --red:#c4523a; --green:#3f8f61;
  --fade-mid:rgba(250,248,243,.5);
  --watermark:.04;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important} /* attribute must beat #id display rules below */
html,body{margin:0;padding:0;min-height:100%;background:var(--bg);color:var(--white);
  font-family:var(--sans);font-weight:400;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  -webkit-text-size-adjust:100%;text-size-adjust:100%;overscroll-behavior-y:none}
a{color:inherit;text-decoration:none}
button{font-family:inherit;color:inherit;background:none;border:none;cursor:pointer}
img{display:block;max-width:100%}
input,textarea,select{font-family:inherit;font-size:16px}
::selection{background:var(--gold);color:#000}

/* ============================================================
   Ambient shell — faint A-crest watermark + warm-gold vignette, lifted from
   the member-app home (.hero::before glow + the big crest watermark). Fixed,
   pointer-events off, GPU-cheap (two gradients + one image), sits behind #app.
   ============================================================ */
body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(120% 78% at 50% -12%, rgba(201,169,97,.11), rgba(201,169,97,0) 60%),
    radial-gradient(90% 60% at 50% 112%, rgba(201,169,97,.06), rgba(201,169,97,0) 72%);}
body::after{content:"";position:fixed;left:50%;top:42%;transform:translate(-50%,-50%);
  width:min(540px,112vw);height:min(540px,112vw);z-index:0;pointer-events:none;
  opacity:var(--watermark);
  /* isolated A-crest only (logo-icon.png) — logo-gold.png bakes in the
     BYANUSERVICES / A LUXURY CONCIERGE wordmark, which as a 540px watermark
     bled legible ghost text across every screen. The crest alone is the
     member-app's own big home watermark. */
  background:url('assets/logo-icon.png') center/contain no-repeat;
  filter:drop-shadow(0 0 44px rgba(201,169,97,.22));}
:root[data-theme="light"] body::before{
  background:
    radial-gradient(120% 78% at 50% -12%, rgba(169,128,58,.09), rgba(169,128,58,0) 60%),
    radial-gradient(90% 60% at 50% 112%, rgba(169,128,58,.05), rgba(169,128,58,0) 72%);}
@media (prefers-reduced-motion:no-preference){
  body::after{animation:crest-breathe 14s ease-in-out infinite}
}
@keyframes crest-breathe{0%,100%{opacity:var(--watermark)}50%{opacity:calc(var(--watermark) * 1.7)}}

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

/* ============================================================
   Top bar — liquid-glass, gold crest + serif wordmark (member-app shell feel)
   ============================================================ */
#topbar{position:sticky;top:0;z-index:30;display:flex;align-items:center;justify-content:space-between;
  height:calc(var(--topbar-h) + var(--sat));padding:var(--sat) calc(var(--sar) + 16px) 0 calc(var(--sal) + 16px);
  background:linear-gradient(180deg,rgba(8,8,8,.86) 40%,rgba(8,8,8,.30) 82%,rgba(8,8,8,0));
  backdrop-filter:saturate(150%) blur(16px);-webkit-backdrop-filter:saturate(150%) blur(16px)}
:root[data-theme="light"] #topbar{background:linear-gradient(180deg,rgba(250,248,243,.9) 40%,rgba(250,248,243,.4) 82%,rgba(250,248,243,0))}
.brand{display:flex;align-items:center;gap:9px;padding:6px 2px;min-height:44px;line-height:1}
.brand-crest{width:22px;height:22px;object-fit:contain;flex:none;
  filter:drop-shadow(0 1px 4px rgba(0,0,0,.4))}
.brand-word{font-family:var(--sans);font-size:13px;font-weight:600;letter-spacing:.26em;
  text-transform:uppercase;color:var(--white);padding-left:.26em}
/* legacy: any leftover serif <em> brand keeps the gold accent */
.brand em{font-style:italic;color:var(--gold)}
.top-actions{display:flex;align-items:center;gap:4px}
.icon-btn{width:44px;height:44px;display:flex;align-items:center;justify-content:center;border-radius:12px;position:relative;color:var(--off)}
.icon-btn:hover{color:var(--white)}
.icon-btn svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.notif-badge{position:absolute;top:5px;right:5px;min-width:16px;height:16px;padding:0 4px;border-radius:8px;
  background:linear-gradient(160deg,var(--gold2),var(--gold));color:#0c0c0c;font-size:9px;font-weight:700;line-height:16px;text-align:center;
  box-shadow:0 0 8px rgba(201,169,97,.4)}

/* ---- Main view region ---- */
#view{flex:1 1 auto;width:100%;max-width:640px;margin:0 auto;position:relative;z-index:1;
  padding:8px calc(var(--sar) + 16px) calc(var(--tabbar-h) + var(--sab) + 40px) calc(var(--sal) + 16px)}
body:not(.authed) #view{padding-bottom:calc(var(--sab) + 24px);max-width:none}

/* ---- View header (shared) ---- */
.vhead{padding:10px 2px 14px}
.vkicker{font-size:10.5px;letter-spacing:.32em;text-transform:uppercase;color:var(--gold);font-weight:600}
.vtitle{font-family:var(--serif);font-weight:500;font-size:36px;line-height:1.02;margin:6px 0 0;letter-spacing:-.015em}
.vtitle em{font-style:italic;color:var(--gold)}
.vsub{color:var(--muted);font-size:13.5px;font-weight:300;line-height:1.6;margin:8px 0 0;max-width:40ch}

/* ============================================================
   Cards — liquid glass with a hairline edge (member-app @supports .card block)
   ============================================================ */
.card{background:var(--card);border:1px solid var(--border);border-radius:18px;padding:16px;position:relative;
  box-shadow:0 1px 0 rgba(255,255,255,.05) inset,0 6px 22px rgba(0,0,0,.34)}
.card + .card{margin-top:12px}
.section-label{font-size:10.5px;letter-spacing:.28em;text-transform:uppercase;color:var(--gold);font-weight:600;margin:22px 2px 10px}

/* ---- Stat grid (dashboard widgets) ---- */
.stat-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.stat{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:15px 14px 16px;
  box-shadow:0 1px 0 rgba(255,255,255,.05) inset,0 4px 14px rgba(0,0,0,.18)}
.stat-val{font-family:var(--serif);font-size:28px;font-weight:500;line-height:1;color:var(--white)}
.stat-lbl{font-size:11px;color:var(--muted);margin-top:6px;letter-spacing:.06em;text-transform:uppercase}
@media (min-width:520px){.stat-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* ---- Badges ---- */
.badge{display:inline-flex;align-items:center;gap:5px;font-size:10px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;padding:4px 9px;border-radius:999px;border:1px solid var(--border2);color:var(--off);background:var(--bg3)}
.badge.gold{color:var(--gold);border-color:var(--glass-edge-gold);background:var(--gold-dim)}
.badge.green{color:var(--green);border-color:rgba(127,208,147,.25);background:rgba(127,208,147,.10)}
.badge.red{color:var(--red);border-color:rgba(224,138,138,.25);background:rgba(224,138,138,.10)}
.badge.dim{color:var(--muted)}

/* ============================================================
   Buttons — member-app pill (app.css .btn/.btn-gold): tracked caps, full
   round, gold gradient + soft gold glow. This is the signature control.
   ============================================================ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:15px 24px;
  border-radius:999px;font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  border:1px solid transparent;transition:background .18s ease,transform .15s ease,filter .15s ease,opacity .15s ease}
.btn:active:not(:disabled){transform:scale(.985)}
.btn:disabled{opacity:.55;cursor:default}
.btn-block{width:100%}
.btn-gold{background:linear-gradient(160deg,var(--gold2),var(--gold));color:#080808;border-color:transparent;
  box-shadow:0 1px 0 rgba(255,255,255,.34) inset,0 6px 18px rgba(201,169,97,.20),0 2px 8px rgba(0,0,0,.3)}
.btn-gold:hover:not(:disabled){filter:brightness(1.04)}
.btn-gold:active:not(:disabled){background:var(--gold2)}
.btn-dark{background:var(--bg4);color:var(--white);border-color:var(--border2)}
.btn-outline,.btn-ghost{background:transparent;color:var(--gold);border:1px solid var(--glass-edge-gold)}
.btn-outline:hover:not(:disabled),.btn-ghost:hover:not(:disabled){border-color:var(--gold)}
.btn-danger{background:transparent;color:var(--red);border-color:rgba(224,138,138,.35);letter-spacing:.14em}
.btn-sm{min-height:40px;padding:0 16px;font-size:10px;letter-spacing:.16em}

/* ---- Fields ---- */
.field{display:block;margin:0 0 14px}
.field-label{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0 0 7px;font-weight:500}
.input,.textarea,.select{width:100%;min-height:48px;padding:13px 15px;border-radius:13px;
  background:var(--bg3);border:1px solid var(--border);color:var(--white);font-size:16px;outline:none;transition:border-color .15s ease}
.input:focus,.textarea:focus,.select:focus{border-color:rgba(201,169,97,.4)}
.input::placeholder,.textarea::placeholder{color:var(--muted)}
.textarea{min-height:110px;resize:vertical;line-height:1.5}

/* ---- Empty / loading state ---- */
.gate-empty{padding:56px 20px;text-align:center;color:var(--muted)}
.gate-empty-title{font-family:var(--serif);font-size:24px;font-weight:500;color:var(--off)}
.gate-empty-sub{font-size:12px;margin-top:6px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}

/* ---- List rows (assignments / notifications) ---- */
.row{display:flex;align-items:center;gap:12px;padding:14px 16px;background:var(--card);border:1px solid var(--border);border-radius:16px;width:100%;text-align:left;
  box-shadow:0 1px 0 rgba(255,255,255,.05) inset,0 4px 14px rgba(0,0,0,.18)}
.row + .row{margin-top:10px}
.row-main{flex:1 1 auto;min-width:0}
.row-title{font-size:15px;font-weight:600;color:var(--white);line-height:1.25}
.row-sub{font-size:12.5px;color:var(--muted);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row-meta{flex:0 0 auto;text-align:right;color:var(--dim);font-size:11.5px}

/* ---- Filter chips (member-app .chip) ---- */
.chips{display:flex;gap:8px;overflow-x:auto;padding:2px 0 12px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{flex:0 0 auto;min-height:40px;padding:0 16px;border-radius:999px;border:1px solid var(--glass-edge);
  background:rgba(255,255,255,.05);-webkit-backdrop-filter:saturate(150%) blur(14px);backdrop-filter:saturate(150%) blur(14px);
  color:var(--off);font-size:12.5px;font-weight:500;display:inline-flex;align-items:center;white-space:nowrap}
.chip.active{background:var(--gold);color:#0c0c0c;border-color:var(--gold);box-shadow:0 1px 0 rgba(255,255,255,.3) inset}

/* ============================================================
   Bottom tab bar (floating "liquid glass" pill — app.css #tabbar) with a
   soft glass highlight pill behind the active tab + a small gold dot.
   ============================================================ */
#tabbar{position:fixed;left:calc(var(--sal) + 14px);right:calc(var(--sar) + 14px);bottom:calc(var(--sab) + 12px);
  max-width:612px;margin:0 auto;height:var(--tabbar-h);padding:0 6px;display:flex;align-items:stretch;z-index:40;
  background:linear-gradient(180deg,rgba(26,26,30,.78),rgba(11,11,13,.74));
  backdrop-filter:saturate(150%) blur(26px);-webkit-backdrop-filter:saturate(150%) blur(26px);
  border:1px solid rgba(255,255,255,.13);border-radius:26px;
  box-shadow:0 16px 44px rgba(0,0,0,.55),0 1px 0 rgba(255,255,255,.15) inset,0 -8px 20px rgba(0,0,0,.22) inset}
:root[data-theme="light"] #tabbar{background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(245,241,232,.86));
  border-color:rgba(0,0,0,.08);box-shadow:0 12px 34px rgba(120,100,60,.20),0 1px 0 rgba(255,255,255,.6) inset}
.tab{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:44px;
  color:rgba(244,242,237,.60);transition:color .22s ease;border-radius:16px;position:relative;z-index:1}
:root[data-theme="light"] .tab{color:var(--muted)}
/* liquid-glass highlight pill behind the active tab (static per-tab variant of
   the member-app #tab-glow) */
.tab.active::before{content:"";position:absolute;top:6px;bottom:6px;left:6px;right:6px;border-radius:16px;z-index:-1;
  background:linear-gradient(180deg,rgba(255,255,255,.18),rgba(255,255,255,.06));
  box-shadow:0 1px 0 rgba(255,255,255,.26) inset,0 0 0 .5px rgba(201,169,97,.32) inset,0 3px 12px rgba(0,0,0,.22)}
:root[data-theme="light"] .tab.active::before{background:linear-gradient(180deg,rgba(201,169,97,.16),rgba(201,169,97,.05));
  box-shadow:0 0 0 .5px rgba(169,128,58,.3) inset}
.tab svg{width:23px;height:23px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.45));transition:transform .22s cubic-bezier(.16,1,.3,1)}
.tab span{font-size:10px;letter-spacing:.04em;font-weight:500}
.tab.active{color:var(--gold)}
.tab.active span{font-weight:700;color:var(--gold)}
.tab.active svg{filter:drop-shadow(0 1px 2px rgba(0,0,0,.45)) drop-shadow(0 0 6px rgba(201,169,97,.45))}
.tab:active svg{transform:scale(.9)}

/* ============================================================
   Auth screens (login / forced pw / status) — the member-app intro/login:
   gold A-crest, tracked-caps wordmark, "A LUXURY CONCIERGE", serif-italic mood.
   ============================================================ */
.auth-wrap{position:relative;min-height:100vh;min-height:100dvh;display:flex;align-items:center;justify-content:center;
  padding:calc(var(--sat) + 24px) 20px calc(var(--sab) + 24px);overflow:hidden}
/* floating gold bokeh canvas (login.js) sits behind the card */
.auth-dust{position:absolute;inset:0;z-index:0;width:100%;height:100%;pointer-events:none}
.auth-card{position:relative;z-index:1;width:100%;max-width:400px;text-align:center;
  animation:auth-in .7s cubic-bezier(.16,1,.3,1) both}
@keyframes auth-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.auth-card{animation:none}}

.auth-crest{width:62px;height:62px;object-fit:contain;margin:0 auto 20px;display:block;
  filter:drop-shadow(0 6px 18px rgba(0,0,0,.5)) drop-shadow(0 0 26px rgba(201,169,97,.22))}
.auth-wordmark{font-family:var(--sans);font-size:14px;font-weight:600;letter-spacing:.34em;text-transform:uppercase;
  color:var(--gold);padding-left:.34em}
.auth-luxe{font-family:var(--sans);font-size:9.5px;font-weight:500;letter-spacing:.42em;text-transform:uppercase;
  color:var(--muted);margin-top:9px;padding-left:.42em}
.auth-rule{width:72px;height:1px;margin:20px auto 0;
  background:linear-gradient(90deg,transparent,rgba(201,169,97,.6),transparent)}
/* legacy brand lines (kept as aliases so any older markup still styles) */
.auth-brand{font-family:var(--sans);font-size:14px;font-weight:600;letter-spacing:.34em;text-transform:uppercase;color:var(--gold);text-align:center}
.auth-brand-sub{font-family:var(--serif);font-style:italic;font-size:16px;text-align:center;color:var(--muted);margin-top:6px}
.auth-brand-sub em{font-style:italic;color:var(--gold)}

.auth-kicker{text-align:center;font-size:10.5px;letter-spacing:.32em;text-transform:uppercase;color:var(--gold);font-weight:600;margin-top:22px}
.auth-title{font-family:var(--serif);font-weight:500;font-size:34px;line-height:1.04;text-align:center;margin:16px 0 0;letter-spacing:-.015em}
.auth-title em{font-style:italic;color:var(--gold)}
.auth-sub{color:var(--muted);font-size:13.5px;font-weight:300;line-height:1.6;text-align:center;margin:12px auto 0;max-width:32ch}
.auth-form{margin-top:28px;text-align:left}
.auth-field{display:block;margin:0 0 14px}
.auth-label{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0 0 7px;font-weight:500}
.auth-input{width:100%;min-height:50px;padding:14px 15px;border-radius:14px;background:var(--bg3);
  border:1px solid var(--border);color:var(--white);font-size:16px;outline:none;transition:border-color .15s ease}
.auth-input:focus{border-color:rgba(201,169,97,.42)}
.auth-error{background:rgba(224,138,138,.10);border:1px solid rgba(224,138,138,.3);color:var(--red);
  font-size:13px;border-radius:12px;padding:11px 13px;margin:0 0 14px;line-height:1.4}
.auth-links{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:18px;flex-wrap:wrap}
.auth-link{color:var(--muted);font-size:12.5px;font-weight:500;letter-spacing:.02em;min-height:44px;display:inline-flex;align-items:center;padding:0 2px}
.auth-link:hover{color:var(--gold)}
.auth-card .btn-block + .btn-block{margin-top:10px}

/* ============================================================
   Glass refinement — turn the class-based surfaces into member-app liquid
   glass wherever backdrop-filter is available (mirrors app.css @supports).
   Inline-styled view cards keep the opaque --card gradient; these upgrade the
   chrome surfaces to true frosted glass.
   ============================================================ */
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .card,.row,.stat{
    background:linear-gradient(160deg,rgba(30,30,33,.60),rgba(16,16,18,.50));
    -webkit-backdrop-filter:saturate(150%) blur(18px);backdrop-filter:saturate(150%) blur(18px);
    border-color:var(--glass-edge);
  }
  :root[data-theme="light"] .card,:root[data-theme="light"] .row,:root[data-theme="light"] .stat{
    background:linear-gradient(160deg,rgba(255,255,255,.82),rgba(247,242,232,.72));
    border-color:var(--glass-edge);
  }
  .auth-input,.input,.textarea,.select{
    background:rgba(255,255,255,.045);
    -webkit-backdrop-filter:saturate(140%) blur(12px);backdrop-filter:saturate(140%) blur(12px);
    border-color:var(--glass-edge);
  }
  :root[data-theme="light"] .auth-input,:root[data-theme="light"] .input,
  :root[data-theme="light"] .textarea,:root[data-theme="light"] .select{
    background:rgba(255,255,255,.7);border-color:var(--glass-edge);
  }
}

/* ============================================================
   Reach the views. The 6 view files never use the .card/.btn-gold/.chip
   classes — they inline-style every element straight against the tokens
   (background:var(--card), background:var(--gold), the 22px 22px 0 0 sheet).
   So the member-app liquid-glass + gold-leaf signature is delivered here by
   matching those exact inline signatures. No view file is touched. --card is
   already a translucent pane (above), so cards only need the blur / gold ring
   / lift added on top; gold buttons get the gradient + glow; the need-to-know
   sheet becomes frosted glass with a gold top hairline.
   ============================================================ */
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  /* every inline card / stat tile / list-row / today+notif box the views build */
  [style*="var(--card)"]{
    -webkit-backdrop-filter:saturate(150%) blur(18px);backdrop-filter:saturate(150%) blur(18px);
    box-shadow:0 0 0 1px var(--glass-edge-gold) inset,0 1px 0 rgba(255,255,255,.05) inset,0 6px 22px rgba(0,0,0,.30);
  }
  :root[data-theme="light"] [style*="var(--card)"]{
    box-shadow:0 0 0 1px var(--glass-edge-gold) inset,0 4px 16px rgba(120,100,60,.12);
  }
  /* need-to-know bottom sheet (assignments / documents openSheet — the only
     elements with radius 22px 22px 0 0): frosted glass + gold top hairline.
     Selector matches the CSSOM-serialized attribute (`22px 22px 0px 0px`). */
  [style*="22px 22px 0px 0px"]{
    background:linear-gradient(180deg,rgba(20,20,22,.90),rgba(12,12,14,.86))!important;
    -webkit-backdrop-filter:saturate(180%) blur(30px);backdrop-filter:saturate(180%) blur(30px);
    border:1px solid var(--glass-edge)!important;border-bottom:none!important;
    border-top:1px solid var(--glass-edge-gold)!important;
    box-shadow:0 -16px 50px rgba(0,0,0,.5),0 1px 0 rgba(255,255,255,.13) inset;
  }
  :root[data-theme="light"] [style*="22px 22px 0px 0px"]{
    background:linear-gradient(180deg,rgba(255,255,255,.94),rgba(247,242,232,.9))!important;
    border-top-color:var(--glass-edge-gold)!important;
    box-shadow:0 -16px 50px rgba(120,100,60,.18),0 1px 0 rgba(255,255,255,.6) inset;
  }
}
/* Solid-gold inline buttons -> member-app gold-leaf gradient + soft glow.
   Signature `background: var(--gold);` matches the CSSOM-serialized inline
   style (space after colon, trailing ; never matches --gold-dim / --gold2 /
   color:var(--gold)): the Accept/Submit primaries, the gold status toggle
   state and the active filter tab. */
[style*="background: var(--gold);"]{
  background:linear-gradient(160deg,var(--gold2),var(--gold))!important;
  box-shadow:0 1px 0 rgba(255,255,255,.34) inset,0 6px 16px rgba(201,169,97,.20)!important;
}
/* Full-width gold action buttons (primaryBtn = width:100% + gold) become true
   btn-gold pills: fully round, tracked caps. Compound selector (0,2,0) so it
   only ever hits the full-width primaries — never the status grid or the flex
   filter row. */
[style*="width: 100%"][style*="background: var(--gold);"]{
  border-radius:999px!important;
  text-transform:uppercase;letter-spacing:.16em;font-size:12px!important;
  box-shadow:0 1px 0 rgba(255,255,255,.34) inset,0 7px 20px rgba(201,169,97,.24),0 2px 8px rgba(0,0,0,.30)!important;
}

/* ============================================================
   Bottom sheet
   ============================================================ */
#sheet{position:fixed;inset:0;z-index:60;display:none}
#sheet.open{display:block}
.sheet-ov{position:absolute;inset:0;background:rgba(0,0,0,.45);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.sheet-panel{position:absolute;left:0;right:0;bottom:0;max-height:88vh;overflow-y:auto;-webkit-overflow-scrolling:touch;
  background:rgba(18,18,20,.82);backdrop-filter:saturate(180%) blur(30px);-webkit-backdrop-filter:saturate(180%) blur(30px);
  border-top:1px solid rgba(255,255,255,.12);border-radius:26px 26px 0 0;
  padding:8px calc(var(--sar) + 18px) calc(var(--sab) + 24px) calc(var(--sal) + 18px);
  box-shadow:0 -16px 50px rgba(0,0,0,.5),0 1px 0 rgba(255,255,255,.13) inset}
:root[data-theme="light"] .sheet-panel{background:rgba(255,255,255,.9);border-top-color:rgba(0,0,0,.06)}
.sheet-handle{width:40px;height:4px;border-radius:2px;background:var(--subtle);margin:8px auto 10px}
.sheet-close{position:absolute;top:12px;right:14px;width:40px;height:40px;border-radius:50%;
  background:rgba(255,255,255,.06);border:1px solid var(--border2);color:var(--off);font-size:22px;line-height:1;display:flex;align-items:center;justify-content:center}
.sheet-close:hover{color:var(--white)}
#sheet-body{padding-top:8px}
@media (min-width:640px){.sheet-panel{max-width:560px;margin:0 auto;border-radius:22px;bottom:24px;left:20px;right:20px}}

/* ============================================================
   Toast
   ============================================================ */
#toast{position:fixed;left:50%;transform:translateX(-50%) translateY(20px);
  bottom:calc(var(--tabbar-h) + var(--sab) + 24px);z-index:70;
  max-width:calc(100vw - 40px);padding:12px 18px;border-radius:13px;
  background:var(--bg4);border:1px solid var(--border2);color:var(--white);font-size:13.5px;font-weight:500;
  box-shadow:0 12px 34px rgba(0,0,0,.5);opacity:0;pointer-events:none;transition:opacity .2s ease,transform .2s ease}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
body:not(.authed) #toast{bottom:calc(var(--sab) + 24px)}

/* ---- shared keyboard focus ring (discreet gold, member-app) ---- */
.btn:focus-visible,.chip:focus-visible,.tab:focus-visible,.icon-btn:focus-visible,
.auth-input:focus-visible,.input:focus-visible,.auth-link:focus-visible{outline:none;box-shadow:0 0 0 2px rgba(201,169,97,.40)}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;animation-iteration-count:1!important}
  .tab svg,#toast{transition:none}
  body::after{animation:none}
}