/* Customer-facing layer: richer background, header with tabs, cards, confetti. Builds on style.css tokens. */
:root{
  --violet:#8b5cf6; --cyan2:#22d3ee; --pink:#f472b6;
  --glass:color-mix(in srgb,var(--panel) 78%,transparent);
  --glow:0 0 0 1px color-mix(in srgb,var(--accent) 40%,transparent),0 12px 40px -12px color-mix(in srgb,var(--accent) 45%,transparent);
}
body.cust{
  background:
    radial-gradient(900px 500px at 85% -10%,color-mix(in srgb,var(--violet) 22%,transparent),transparent 70%),
    radial-gradient(700px 420px at -10% 20%,color-mix(in srgb,var(--accent) 14%,transparent),transparent 70%),
    var(--bg);
  background-attachment:fixed;
}

/* header */
.cnav{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--bg) 72%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line);padding-top:env(safe-area-inset-top,0px)}
.cnav-in{max-width:1180px;margin:0 auto;display:flex;align-items:center;gap:14px;padding:10px 20px}
.cnav .spacer{flex:1}
.ctabs{display:flex;gap:4px;background:var(--glass);border:1px solid var(--line);border-radius:12px;padding:4px}
.ctabs a{display:flex;align-items:center;gap:7px;padding:7px 14px;border-radius:9px;color:var(--muted);text-decoration:none;font-weight:500;font-size:14px;position:relative;white-space:nowrap}
.ctabs a:hover{color:var(--fg)}
.ctabs a[aria-current="page"]{background:var(--raised);color:var(--fg);box-shadow:inset 0 0 0 1px var(--line)}
.ctabs svg{width:18px;height:18px;flex:none}
.ctabs .dot{position:absolute;top:5px;right:6px;width:8px;height:8px;border-radius:50%;background:var(--bad);box-shadow:0 0 0 2px var(--bg)}
.pts{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:999px;background:linear-gradient(135deg,var(--accent),#ff8a3d);color:var(--accent-ink);font:700 12px/18px var(--f-mono)}
.cnav .who{font-size:13px;color:var(--muted);white-space:nowrap}
@media (max-width:720px){
  .cnav-in{padding:8px 12px;gap:8px}
  .ctabs a{padding:7px 10px}
  .ctabs a .lbl{display:none}
  .cnav .acct-name,.cnav .brand-name,.acct .caret{display:none}
  .acct-btn{padding:3px!important}
  .cnav .sound-btn{padding:6px 9px}
  .cnav .sound-btn .lbl{display:none}
  .cnav .logout-btn{display:none}
  .cnav-in{gap:6px}
  .ctabs{padding:3px;gap:2px}
  .ctabs a{padding:7px 9px}
}

/* generic glass card */
.gcard{background:var(--glass);border:1px solid var(--line);border-radius:16px;backdrop-filter:blur(8px)}
.kicker{font:500 12px var(--f-mono);color:var(--accent-text);text-transform:uppercase;letter-spacing:.14em}
.h-display{font:700 clamp(28px,4.6vw,46px)/1.04 var(--f-display);text-transform:uppercase;letter-spacing:.01em;margin:0;text-wrap:balance}
.grad-text{background:linear-gradient(100deg,var(--accent) 10%,#ff8a3d 50%,var(--pink) 90%);-webkit-background-clip:text;background-clip:text;color:transparent}

/* confetti */
.confetti{position:fixed;inset:0;pointer-events:none;z-index:60;overflow:hidden}
.confetti i{position:absolute;top:-12px;width:9px;height:14px;border-radius:2px;animation:fall 1.8s cubic-bezier(.2,.6,.4,1) forwards}
@keyframes fall{to{transform:translate3d(var(--dx),105vh,0) rotate(var(--rot));opacity:.9}}
@media (prefers-reduced-motion:reduce){.confetti{display:none}}
:root[data-theme="light"]{--glass:color-mix(in srgb,var(--panel) 90%,transparent);--glow:0 0 0 1px color-mix(in srgb,var(--accent) 45%,transparent),0 12px 34px -14px color-mix(in srgb,var(--accent) 55%,transparent)}
:root[data-theme="light"] body.cust{background:radial-gradient(900px 500px at 85% -10%,color-mix(in srgb,var(--violet) 12%,transparent),transparent 70%),radial-gradient(700px 420px at -10% 20%,color-mix(in srgb,var(--accent) 12%,transparent),transparent 70%),var(--bg)}
.av-img{width:100%;height:100%;object-fit:cover;border-radius:inherit;display:block}
.acct .me-av{width:28px;height:28px;border-radius:50%;overflow:hidden;display:grid;place-items:center;font:700 11px var(--f-display);color:#fff;flex:none;text-transform:uppercase}
.acct{position:relative}
.acct-btn{display:flex;align-items:center;gap:8px;padding:4px 10px 4px 4px;border-radius:999px;border:1px solid var(--line);background:var(--glass);color:var(--fg);font-weight:500;font-size:14px;max-width:220px}
.acct-btn:hover,.acct-btn[aria-expanded="true"],.acct-btn.on{border-color:var(--accent)}
.acct-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.acct .caret{font-size:11px;color:var(--muted)}
.acct-menu{position:absolute;right:0;top:calc(100% + 8px);z-index:40;min-width:230px;padding:6px;border-radius:14px;border:1px solid var(--line);background:var(--panel);box-shadow:0 20px 50px -12px rgba(0,0,0,.45);display:flex;flex-direction:column}
.acct-menu .acct-head{padding:10px 12px 10px;border-bottom:1px solid var(--line);margin-bottom:4px;display:flex;flex-direction:column;min-width:0}
.acct-menu .acct-head b{font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acct-menu .acct-head span{font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acct-menu a,.acct-menu button{display:block;width:100%;text-align:left;padding:10px 12px;border-radius:9px;border:0;background:transparent;color:var(--fg);text-decoration:none;font-size:14px}
.acct-menu a:hover,.acct-menu button:hover,.acct-menu a[aria-current="page"]{background:var(--raised)}
.acct-menu .danger{color:var(--bad)}

/* ---------- phone + installed app: bottom navigation bar ---------- */
.bnav{display:none}
@media (max-width:720px), (display-mode: standalone){
.cnav .ctabs,.cnav .acct{display:none}
body.cust.has-bnav{padding-bottom:calc(64px + env(safe-area-inset-bottom,0px))}
.bnav{display:grid;grid-template-columns:repeat(4,1fr);position:fixed;left:0;right:0;bottom:0;z-index:30;padding:6px max(6px, calc((100% - 560px) / 2)) calc(6px + env(safe-area-inset-bottom,0px));background:color-mix(in srgb,var(--panel) 92%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-top:1px solid var(--line);box-shadow:0 -10px 30px -18px rgba(0,0,0,.35)}
.bitem{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:52px;border-radius:12px;color:var(--muted);text-decoration:none;font-size:11px;font-weight:600;letter-spacing:.01em}
.bitem .bic{position:relative;display:grid;place-items:center;width:44px;height:28px;border-radius:999px;transition:background .15s}
.bitem svg{width:22px;height:22px}
.bitem .me-av{width:24px;height:24px;border-radius:50%;overflow:hidden;display:grid;place-items:center;font:700 11px var(--f-display);color:#fff;text-transform:uppercase}
.bitem[aria-current="page"]{color:var(--accent-text)}
.bitem[aria-current="page"] .bic{background:color-mix(in srgb,var(--accent) 22%,transparent)}
.bitem[aria-current="page"] .me-av{box-shadow:0 0 0 2px var(--accent)}
.bitem:active .bic{background:var(--raised)}
.bbadge{position:absolute;top:-6px;right:-2px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:linear-gradient(135deg,var(--accent),#ff8a3d);color:var(--accent-ink);font:700 10px/18px var(--f-mono);text-align:center}
.bdot{position:absolute;top:0;right:8px;width:9px;height:9px;border-radius:50%;background:var(--bad);box-shadow:0 0 0 2px var(--panel)}
body.has-bnav .pnav .link,body.has-bnav #navLogin{display:none}
}
/* installed app (class set by the page, works in every browser) */
html.app-mode .cnav .ctabs,html.app-mode .cnav .acct{display:none}
html.app-mode body.cust.has-bnav{padding-bottom:calc(64px + env(safe-area-inset-bottom,0px))}
html.app-mode .bnav{display:grid;grid-template-columns:repeat(4,1fr);position:fixed;left:0;right:0;bottom:0;z-index:30;padding:6px max(6px, calc((100% - 560px) / 2)) calc(6px + env(safe-area-inset-bottom,0px));background:color-mix(in srgb,var(--panel) 92%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-top:1px solid var(--line);box-shadow:0 -10px 30px -18px rgba(0,0,0,.35)}
html.app-mode .bitem{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:52px;border-radius:12px;color:var(--muted);text-decoration:none;font-size:11px;font-weight:600;letter-spacing:.01em}
html.app-mode .bitem .bic{position:relative;display:grid;place-items:center;width:44px;height:28px;border-radius:999px;transition:background .15s}
html.app-mode .bitem svg{width:22px;height:22px}
html.app-mode .bitem .me-av{width:24px;height:24px;border-radius:50%;overflow:hidden;display:grid;place-items:center;font:700 11px var(--f-display);color:#fff;text-transform:uppercase}
html.app-mode .bitem[aria-current="page"]{color:var(--accent-text)}
html.app-mode .bitem[aria-current="page"] .bic{background:color-mix(in srgb,var(--accent) 22%,transparent)}
html.app-mode .bitem[aria-current="page"] .me-av{box-shadow:0 0 0 2px var(--accent)}
html.app-mode .bitem:active .bic{background:var(--raised)}
html.app-mode .bbadge{position:absolute;top:-6px;right:-2px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:linear-gradient(135deg,var(--accent),#ff8a3d);color:var(--accent-ink);font:700 10px/18px var(--f-mono);text-align:center}
html.app-mode .bdot{position:absolute;top:0;right:8px;width:9px;height:9px;border-radius:50%;background:var(--bad);box-shadow:0 0 0 2px var(--panel)}
html.app-mode body.has-bnav .pnav .link,html.app-mode body.has-bnav #navLogin{display:none}