/* Alira Kids desktop+mobile hotfix v2 */
.chat-layout{ display:flex; gap:14px; min-height:calc(100vh - 90px); }
.sidebar{
  position:sticky; top:12px; flex:0 0 320px; max-width:320px;
  height:calc(100vh - 120px); overflow:auto; background:#fff;
  border:1px solid #e5e7eb; border-radius:12px;
}
.chat-pane{
  flex:1 1 auto; display:flex; flex-direction:column; min-width:0; min-height:0;
  background:#fff; border:1px solid #e5e7eb; border-radius:12px;
}
.thread{
  flex:1 1 auto; min-height:0; overflow:auto; padding:16px;
  display:flex; flex-direction:column; gap:10px; scroll-behavior:smooth; background:#fafcff;
}
.composer{ display:flex; gap:8px; padding:12px; border-top:1px solid #e5e7eb; background:#fff; }
.bubble{ max-width:85%; padding:12px 14px; border-radius:14px; box-shadow:0 1px 0 rgba(0,0,0,.03); line-height:1.55 }
.bubble.user{ align-self:flex-end; background:#d1fae5 }
.bubble.paraphrase{ align-self:flex-start; background:#e0e7ff }
.bubble.assistant{ align-self:flex-start; background:#fff7ed }

@media (max-width: 900px){
  .chat-layout{ flex-direction:column; gap:10px }
  .sidebar{
    position:fixed; top:0; left:0; height:100vh; width:min(86vw,360px);
    transform:translateX(-105%); transition:transform .2s ease; border-radius:0; z-index:60; background:#fff;
  }
  .sidebar.open{ transform:translateX(0) }
  .drawer-overlay{ position:fixed; inset:0; background:rgba(0,0,0,.25); opacity:0; pointer-events:none; transition:opacity .2s ease; z-index:55 }
  .drawer-overlay.show{ opacity:1; pointer-events:auto }
  .chat-pane{ min-height:70vh }
  .thread{ padding-bottom:max(env(safe-area-inset-bottom),10px) }
  .composer{ position:sticky; bottom:0; padding-bottom:calc(env(safe-area-inset-bottom) + 10px) }
  .bubble{ max-width:92% }
}
/* ---- Auto-scroll hotfix ---- */
.app-shell { display:flex; flex-direction:column; min-height:100vh; }
.content   { flex:1 1 auto; display:flex; flex-direction:column; min-height:0; }

/* chat layout + pane must let the thread own the scroll */
.chat-layout { flex:1 1 auto; min-height:0; }
.chat-pane   { display:flex; flex-direction:column; min-height:0; }
.thread      { flex:1 1 auto; min-height:0; overflow:auto; scroll-behavior:smooth; }

/* ensure no ancestor sets overflow:hidden on body/html that prevents scrolling */
html, body { overscroll-behavior-y: none; }
/* --- Sticky autoscroll base --- */
html, body { height: 100%; }
.app-shell { display:flex; flex-direction:column; min-height:100vh; }
.content   { flex:1 1 auto; display:flex; flex-direction:column; min-height:0; }

.chat-layout { flex:1 1 auto; min-height:0; }
.chat-pane   { display:flex; flex-direction:column; min-height:0; }
.thread      {
  flex:1 1 auto;
  min-height:0;              /* critical */
  overflow:auto;             /* must be scrollable */
  -webkit-overflow-scrolling: touch; /* iOS inertia */
  scroll-behavior:smooth;
}

/* Optional: avoid browser bounces triggering weird scroll positions */
html, body { overscroll-behavior-y: none; }

/* Always show header (desktop + mobile) */
.topbar{
  position: sticky; top: 0; z-index: 1000;
  display:flex; align-items:center; gap:12px;
  padding:10px 14px; background:#fff; border-bottom:1px solid #e9eef6;
}

/* Brand */
.topbar .brand{ font-weight:700; color:#6d4dd6; text-decoration:none; }

/* Desktop actions */
.topbar .topnav a, .topbar .topnav .navlink, .topbar .topnav .badge, .topbar .topnav .usage{
  margin-left:10px;
}
.topbar .topnav a{ text-decoration:none; color:#1f2330; }

/* Hamburger hidden on desktop */
.menu-btn{ font-size:22px; background:none; border:0; cursor:pointer; display:none; }

/* Mobile drawer */
.mobile-drawer{
  position:fixed; inset:0 0 0 auto; width:78%; max-width:320px;
  background:#fff; transform:translateX(100%); transition:transform .25s ease;
  z-index:1100; padding:16px; box-shadow:-8px 0 24px rgba(0,0,0,.08);
}
.mobile-drawer.open{ transform:translateX(0); }

.drawer-backdrop{
  position:fixed; inset:0; background:rgba(0,0,0,.24);
  z-index:1090;
}

.mobile-actions{ display:flex; flex-direction:column; gap:10px; }
.mobile-actions .navbtn, .mobile-actions a{
  display:block; padding:12px; border-radius:10px; background:#f5f7fb;
  text-decoration:none; color:#1f2330; font-weight:600; border:0; text-align:left;
}

/* Responsive rules */
@media (max-width: 768px){
  .menu-btn{ display:inline-block; }
  .topbar .topnav{ display:none; }    /* collapse desktop links */
}

/* iOS safe area nicety */
:root{ --safe-bottom: env(safe-area-inset-bottom); }

/* Keep topbar visible on mobile */
.topbar{
  position: sticky; top: 0; z-index: 1000;
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; background: #fff;
  border-bottom: 1px solid #e9eef6;
}

/* Desktop actions styling already OK via .navlink etc., keep as-is */

.menu-btn{ display:none; background:none; border:0; font-size:22px; line-height:1; cursor:pointer; }

@media (max-width:768px){
  .menu-btn{ display:inline-block; }
  .js .topbar .topnav{ display:none; }      /* hide desktop links on phones */
}

/* Mobile drawer */
.mobile-drawer{
  position: fixed; inset: 0 0 0 auto; width: 78%; max-width: 320px;
  background:#fff; box-shadow: -8px 0 24px rgba(0,0,0,.08);
  transform: translateX(100%); transition: transform .25s ease;
  z-index: 1100; padding: 16px;
}
.mobile-drawer.open{ transform: translateX(0); }

.mobile-actions{ display:flex; flex-direction:column; gap:10px; }
.mobile-actions .navlink,
.mobile-actions button{
  display:block; text-align:left; padding:12px; border-radius:10px;
  background:#f5f7fb; color:#1f2330; font-weight:600; text-decoration:none; border:0;
}
.mobile-actions .pill{ background:#f1eefe; }

.drawer-backdrop{
  position:fixed; inset:0; background:rgba(0,0,0,.24); z-index:1090;
}
.topbar .topnav a,
.mobile-actions a,
.mobile-actions button {
  text-decoration: none;
  color: #1f2330;       /* or your brand color */
  font-weight: 600;
}
/* iOS safe area */
:root{ --safe-bottom: env(safe-area-inset-bottom); }
/* === Site footer (safe, isolated) === */
.site-footer{
  background:#0b1020;
  color:#cbd5e1;
  margin-top:24px;
  border-top:1px solid rgba(255,255,255,.08);
}
.site-footer a{ color:#cbd5e1; text-decoration:none; opacity:.9 }
.site-footer a:hover{ opacity:1 }

.foot-wrap{
  max-width:1120px; margin:0 auto;
  padding:22px 16px;
  display:grid; gap:18px;
  grid-template-columns:2fr 1fr 1fr 1fr;
}
.foot-brand{ display:flex; align-items:center; gap:12px }
.foot-brand .logo{ font-size:20px }

.foot-col{ display:grid; gap:8px }
.foot-col > strong{ color:#e5e7eb; font-size:.95rem }

.foot-note{
  max-width:1120px; margin:0 auto; padding:12px 16px;
  border-top:1px solid rgba(255,255,255,.08);
  display:flex; justify-content:space-between; align-items:center; gap:12px;
  font-size:.95rem;
}
.foot-note .social a{
  display:inline-block; width:28px; height:28px; line-height:28px; text-align:center;
  border:1px solid rgba(255,255,255,.25); border-radius:8px;
}

/* Responsive stacking */
@media (max-width: 820px){
  .foot-wrap{ grid-template-columns:1fr 1fr; }
}
@media (max-width: 520px){
  .foot-wrap{ grid-template-columns:1fr; }
  .foot-note{ flex-direction:column; align-items:flex-start; }
}
/* === Announcement bar (safe, isolated) === */
.announce{
  background:#fff7ed;           /* warm peach */
  border-bottom:1px dashed #fdba74;
  color:#7c2d12;
}
.announce__inner{
  max-width:1120px;
  margin:0 auto;
  padding:.6rem 16px;
  display:flex; gap:.75rem; align-items:center; justify-content:center;
  font-size:14.5px;
}
.announce__badge{
  background:#fed7aa; color:#7c2d12; border:1px solid #fdba74;
  border-radius:999px; padding:2px 8px; font-weight:700; font-size:12px;
}

/* tiny button variant that reuses your generic button look */
.btn.btn--tiny{ padding:.4rem .6rem; border-radius:8px; font-weight:700; font-size:.9rem; text-decoration:none }
.btn--primary{ background:#4f46e5; color:#fff; border:1px solid transparent }
.btn--primary:hover{ filter:saturate(1.1) }

.announce__close{
  margin-left:.5rem; border:0; background:transparent; color:#7c2d12;
  font-size:18px; line-height:1; padding:.1rem .35rem; border-radius:6px; cursor:pointer;
}
.announce__close:hover{ background:rgba(124,45,18,.08) }

@media (max-width:560px){
  .announce__inner{ padding:.55rem 12px; gap:.5rem; flex-wrap:wrap; }
}

/* === MOBILE DRAWER FIX === */
.mobile-drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: 80%;
  max-width: 300px;
  height: 100%;
  background: #fff;
  color: #111;
  transform: translateX(100%);
  transition: transform 0.25s ease-in-out;
  box-shadow: -4px 0 12px rgba(0,0,0,0.3);
  z-index: 2000;
  padding: 1rem;
  overflow-y: auto;
}
.mobile-drawer.open {
  transform: translateX(0);
}

.drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(1px);
  z-index: 1999;
  transition: opacity 0.2s ease-in-out;
}
.drawer-backdrop[hidden] {
  opacity: 0;
  pointer-events: none;
}
.drawer-backdrop.show {
  opacity: 1;
}
.mobile-actions .navbtn {
  display:block;
  width:100%;
  text-align:left;
  padding:12px 14px;
  margin-bottom:4px;
  background:none;
  border:none;
  font-size:1rem;
  border-radius:8px;
  color:#111;
}
.mobile-actions .navbtn:hover {
  background:#f1f5f9;
}

[hidden] { display: none !important; }

#drawerBackdrop {
  position: fixed; inset: 0; 
  background: rgba(0,0,0,.4);
  /* ensure it sits below the drawer but above content */
  z-index: 999;
}

#mobileDrawer {
  position: fixed; top: 0; left: 0; bottom: 0; width: 280px;
  background: #fff; box-shadow: 0 0 12px rgba(0,0,0,.2);
  z-index: 1000;
}

/* Drawer behavior: visible only on small screens; hidden on desktop */
.mobile-drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: 78%;
  max-width: 320px;
  height: 100%;
  background: #fff;
  color: #111;
  box-shadow: -6px 0 16px rgba(0,0,0,.25);
  transform: translateX(100%);
  transition: transform .25s ease-in-out;
  z-index: 2000;
  padding: 12px 10px;
  overflow-y: auto;
}
.mobile-drawer.open { transform: translateX(0); }

.drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(1px);
  z-index: 1999;
  opacity: 0;
  transition: opacity .2s ease-in-out;
}
.drawer-backdrop[hidden] { opacity: 0; pointer-events: none; }
.drawer-backdrop.show { opacity: 1; }

.mobile-actions .navbtn,
.mobile-actions a.navbtn {
  display: block;
  width: 100%;
  text-align: left;
  padding: 12px 14px;
  margin: 4px 0;
  font-size: 16px;
  border: 0;
  background: transparent;
  border-radius: 10px;
  color: #111;
}
.mobile-actions .navbtn:hover,
.mobile-actions a.navbtn:hover { background: #f1f5f9; }

/* Desktop vs Mobile visibility */
@media (min-width: 900px) {
  .menu-btn { display: none !important; }
  #desktopActions { display: flex !important; }
  .mobile-drawer { display: none !important; }
  .drawer-backdrop { display: none !important; }
}

@media (max-width: 899px) {
  #desktopActions { display: none !important; }
  .menu-btn { display: inline-flex !important; }
  .mobile-drawer { display: block; } /* still off-canvas via transform until .open */
}

/* Drawer behavior and FOUC guards */
.mobile-drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: 78%;
  max-width: 320px;
  height: 100%;
  background: #fff;
  color: #111;
  box-shadow: -6px 0 16px rgba(0,0,0,.25);
  transform: translateX(100%);
  transition: transform .25s ease-in-out;
  z-index: 2000;
  padding: 12px 10px;
  overflow-y: auto;
}
.mobile-drawer.open { transform: translateX(0); }
.mobile-drawer[hidden] { display: none !important; }  /* prevent initial paint */

.drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(1px);
  z-index: 1999;
  opacity: 0;
  transition: opacity .2s ease-in-out;
}
.drawer-backdrop[hidden] { opacity: 0; pointer-events: none; }
.drawer-backdrop.show { opacity: 1; }

.mobile-actions .navbtn,
.mobile-actions a.navbtn {
  display: block;
  width: 100%;
  text-align: left;
  padding: 12px 14px;
  margin: 4px 0;
  font-size: 16px;
  border: 0;
  background: transparent;
  border-radius: 10px;
  color: #111;
}
.mobile-actions .navbtn:hover,
.mobile-actions a.navbtn:hover { background: #f1f5f9; }

/* Desktop vs Mobile visibility */
@media (min-width: 900px) {
  .menu-btn { display: none !important; }
  #desktopActions { display: flex !important; }
  .mobile-drawer { display: none !important; }
  .drawer-backdrop { display: none !important; }
}

@media (max-width: 899px) {
  #desktopActions { display: none !important; }
  .menu-btn { display: inline-flex !important; }
  .mobile-drawer { display: block; }
}

/* ===== Login landing polish (scoped) ===== */
.page-login {
  --card-bg: #ffffff;
  --card-shadow: 0 12px 30px rgba(2, 6, 23, 0.14);
  --ring: #8b5cf6;
  --muted: #64748b;
  --edge: #e2e8f0;
  --text: #0f172a;
  --accent: #8b5cf6;
  --accent-ink: #ffffff;
  background:
    radial-gradient(900px 600px at 10% -10%, #eef2ff 0%, rgba(238,242,255,0) 40%),
    radial-gradient(900px 600px at 110% 10%, #f5f3ff 0%, rgba(245,243,255,0) 40%);
}


/* container + spacing */
/*
.page-login .content {
  max-width: 980px;
  margin: 0 auto;
  padding: clamp(16px, 2.5vw, 28px);
}
*/


/* headline */
/*
.page-login h1,
.page-login .content > h1 {
  font-size: clamp(1.25rem, 1.1rem + 1.2vw, 1.75rem);
  line-height: 1.2;
  margin: 10px 0 14px;
  color: var(--text);
}
*/


/* login card */
.page-login .auth-card {
  background: var(--card-bg);
  border: 1px solid var(--edge);
  box-shadow: var(--card-shadow);
  border-radius: 16px;
  padding: clamp(16px, 2.5vw, 24px);
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: clamp(12px, 2.5vw, 24px);
}

/* collapse to single column on phones */
@media (max-width: 780px){
  .page-login .auth-card { grid-template-columns: 1fr; }
}

/* left column: welcome + banner spacing */
.page-login .auth-intro p { color: var(--muted); margin: 6px 0 0; }

/* form styles (scoped so chat inputs unaffected) */
.page-login .auth-form label { display:block; font-weight:600; margin: 8px 0 6px; color: var(--text); }
.page-login .auth-form input[type="email"],
.page-login .auth-form input[type="password"]{
  width: 100%;
  height: 46px;
  border: 1px solid var(--edge);
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 16px;
  color: var(--text);
  outline: none;
  transition: box-shadow .15s ease, border-color .15s ease;
  background: #fff;
}
.page-login .auth-form input:focus{
  border-color: var(--ring);
  box-shadow: 0 0 0 3px rgba(139,92,246,.2);
}

.page-login .auth-actions{
  display:flex; gap:10px; align-items:center; margin-top: 10px;
}
.page-login .btn-primary{
  appearance: none;
  border: none;
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 700;
  padding: 12px 16px;
  border-radius: 12px;
  cursor: pointer;
}
.page-login .btn-primary:hover{ filter: brightness(1.05); }
.page-login .help-link{ color: var(--muted); text-decoration: none; }
.page-login .help-link:hover{ text-decoration: underline; }

/* keep footer nicely spaced from card */
.page-login .site-footer{ margin-top: clamp(22px, 5vw, 44px); }
/* ===== Header + Footer polish ===== */
.topbar {
  display:flex; align-items:center; justify-content:space-between;
  padding: 10px 16px;
  background: linear-gradient(180deg,#fff 0%,#f8fafc 100%);
  border-bottom:1px solid #e2e8f0;
  box-shadow: 0 1px 3px rgba(15,23,42,0.08);
  position: sticky; top:0; z-index:100;
}

/* Brand */
.topbar .brand {
  display:flex; align-items:center; gap:6px;
  font-weight:700;
  font-size:1.05rem;
  color:#0f172a;
  text-decoration:none;
}
.topbar .brand:hover { color:#8b5cf6; }

/* Navigation links (desktop) */
.topbar .topnav .navlink {
  color:#334155;
  text-decoration:none;
  font-weight:500;
  padding:8px 10px;
  border-radius:8px;
  position:relative;
  transition: color .15s ease, background .15s ease;
}
.topbar .topnav .navlink:hover {
  color:#8b5cf6;
  background:#f1f5f9;
}
.topbar .topnav .navlink.active::after {
  content:'';
  position:absolute;
  bottom:-1px; left:10%; width:80%; height:2px;
  background:#8b5cf6; border-radius:2px;
}

/* Mobile button */
.menu-btn {
  background:none; border:none;
  font-size:1.6rem;
  line-height:1; color:#0f172a;
  cursor:pointer;
}
.menu-btn:hover { color:#8b5cf6; }

/* Footer re-tone */
.site-footer {
  background:#0f172a;
  color:#e2e8f0;
  border-top:1px solid rgba(255,255,255,0.05);
  font-size:0.95rem;
}
.site-footer a {
  color:#cbd5e1;
  text-decoration:none;
}
.site-footer a:hover { color:#fff; text-decoration:underline; }
.site-footer .foot-wrap {
  display:grid;
  grid-template-columns: repeat(auto-fit,minmax(160px,1fr));
  gap:20px;
  padding:24px 16px;
}
.site-footer .foot-brand strong { color:#fff; }
.site-footer .foot-note {
  border-top:1px solid rgba(255,255,255,0.08);
  padding:12px 16px;
  display:flex; align-items:center; justify-content:space-between;
  color:#94a3b8;
  font-size:0.85rem;
}
/* ===== Premium hero tint + motion (login only) ===== */
/*
.page-login .content {
  position: relative;
  isolation: isolate;              
  overflow: clip;                    
*/

/* Soft gradient wash behind the login card */
.page-login .content::before{
  content:"";
  position:absolute; inset:-10% -10% -20% -10%;
  z-index:-1;
  background:
    radial-gradient(600px 400px at 12% 8%, rgba(139,92,246,.18), transparent 65%),
    radial-gradient(700px 480px at 88% 12%, rgba(56,189,248,.16), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,0), rgba(248,250,252,.9) 80%);
  filter: saturate(110%);
  transform: translateZ(0);
}

/* Subtle drifting glow */
@keyframes akFloat {
  0%   { transform: translate3d(0,0,0) scale(1);   filter: blur(0px) saturate(110%); }
  50%  { transform: translate3d(0,-4px,0) scale(1.01); filter: blur(.2px) saturate(115%); }
  100% { transform: translate3d(0,0,0) scale(1);   filter: blur(0px) saturate(110%); }
}
.page-login .auth-card { animation: akFloat 9s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce){
  .page-login .auth-card { animation: none; }
}

/* Announcement bar spacing on mobile so it doesn’t collide with brand */
@media (max-width: 640px){
  .announce { margin-bottom: 6px; }
  .topbar   { padding-top: 8px; padding-bottom: 8px; }
}

/* Buttons and inputs: focus + autofill polish */
.page-login .btn-primary:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(139,92,246,.35);
}
.page-login .btn-primary:disabled{
  opacity:.7; cursor:not-allowed; filter:none;
}
.page-login .auth-form input:-webkit-autofill{
  -webkit-text-fill-color: #0f172a;
  box-shadow: 0 0 0px 1000px #fff inset;  /* remove yellow */
  transition: background-color 5000s ease-in-out 0s;
}
.page-login .auth-form input::placeholder{ color:#94a3b8; }

/* A touch more separation from footer on tall phones */
@media (max-width: 780px){
  .page-login .site-footer { margin-top: 48px; }
}
/* ===== Form field states ===== */
.page-login .field{ margin-bottom:14px; }
.page-login .hint{ color:#64748b; font-size:.9rem; margin-top:6px; }
.page-login .error-msg{ color:#b91c1c; font-size:.9rem; margin-top:6px; }

.page-login .auth-form input{
  border:1px solid #e2e8f0; background:#fff;
}
.page-login .auth-form input:focus{
  border-color:#8b5cf6; box-shadow:0 0 0 3px rgba(139,92,246,.2);
}
.page-login .auth-form .has-error input{
  border-color:#ef4444; box-shadow:0 0 0 3px rgba(239,68,68,.15);
}
.page-login .auth-form .has-success input{
  border-color:#22c55e; box-shadow:0 0 0 3px rgba(34,197,94,.15);
}

/* Submit: busy state */
.page-login .btn-primary[data-busy="1"]{
  position:relative; pointer-events:none; opacity:.9;
}
.page-login .btn-primary[data-busy="1"]::after{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(closest-side, rgba(255,255,255,.9) 70%, transparent 72%) left/1.15em 1.15em no-repeat,
    conic-gradient(from 0turn, transparent 10%, rgba(255,255,255,.7) 10% 30%, transparent 30% 60%, rgba(255,255,255,.7) 60% 80%, transparent 80% 100%);
  mask: radial-gradient(circle at 20% 50%, transparent 35%, #000 36%);
  animation: akSpin .9s linear infinite;
  border-radius:12px;
}
@keyframes akSpin { to { transform: rotate(1turn); } }

/* ===== Toasts ===== */
.ak-toasts{
  position: sticky; top: 8px; z-index: 120;
  display: grid; gap: 8px; padding: 0 12px;
}
.toast{
  border-radius: 12px; padding: 10px 12px;
  background:#0f172a; color:#e2e8f0; box-shadow:0 8px 20px rgba(2,6,23,.18);
  border:1px solid #1f2937; font-size:.95rem;
  opacity:0; transform: translateY(-6px); animation: toastIn .35s ease forwards;
}
.toast.success{ background:#064e3b; border-color:#065f46; }
.toast.info   { background:#111827; border-color:#1f2937; }
.toast.error  { background:#7f1d1d; border-color:#991b1b; }
@keyframes toastIn { to { opacity:1; transform: translateY(0); } }
/* ===== Hero-style announce ribbon (login only) ===== */
.page-login .announce {
  margin: 0 0 10px;
  border: 0;
  border-radius: 0 0 18px 18px;
  background:
    radial-gradient(60% 120% at 10% 0%, rgba(139,92,246,.10), transparent 60%),
    radial-gradient(60% 120% at 90% 0%, rgba(56,189,248,.10), transparent 62%),
    linear-gradient(#fffaf2, #fff4e5);
  box-shadow: 0 1px 0 rgba(0,0,0,.05), 0 10px 30px rgba(2,6,23,.08);
  padding: 10px 0;
}

.page-login .announce__inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  color: #3f3a2f;
  font-size: 0.98rem;
}

.page-login .announce__badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border-radius: 999px;
  background: #111827;
  color: #fff;
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: .02em;
}

.page-login .announce .btn--primary {
  appearance: none;
  border: 0;
  border-radius: 10px;
  padding: 8px 12px;
  font-weight: 700;
  background: #8b5cf6;
  color: #fff;
  box-shadow: 0 6px 16px rgba(139,92,246,.35);
  transition: transform .06s ease, filter .12s ease;
}
.page-login .announce .btn--primary:hover { filter: brightness(1.05); }
.page-login .announce .btn--primary:active { transform: translateY(1px); }

/* Close (×) button */
.page-login .announce__close {
  margin-left: auto;
  background: none; border: 0; cursor: pointer;
  font-size: 18px; line-height: 1; color: #6b7280;
  padding: 6px 10px; border-radius: 8px;
}
.page-login .announce__close:hover { background: rgba(0,0,0,.05); color: #111827; }

/* Mobile stacking */
@media (max-width: 640px) {
  .page-login .announce__inner {
    flex-wrap: wrap;
    gap: 8px 10px;
  }
  .page-login .announce .btn--primary { padding: 8px 12px; }
  .page-login .announce__close { order: 3; margin-left: 0; }
}
/* ===== Global focus (keyboard only) */
:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(139,92,246,.35);
  border-radius: 10px;
}

/* Topbar + footer links: subtle underline grow */
.topbar .navlink,
.site-footer a {
  text-decoration: none;
  position: relative;
}
.topbar .navlink::after,
.site-footer a::after {
  content:"";
  position:absolute; left:10%; right:10%; bottom:-2px; height:2px;
  background:#8b5cf6; border-radius:2px;
  transform: scaleX(0); transform-origin:left;
  transition: transform .18s ease;
}
.topbar .navlink:hover::after,
.site-footer a:hover::after { transform: scaleX(1); }

/* ===== Login card: gentle hover + border glow */
.page-login .auth-card {
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  border: 1px solid #e2e8f0;
}
.page-login .auth-card .trust-strip,
.page-singup .auth-card .trust-strip {
  margin: 10px 0 0;
  border-radius: 12px;
}

@media (hover:hover){
  .page-login .auth-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 16px 40px rgba(2,6,23,.12);
    border-color: rgba(139,92,246,.35);
  }
}

/* Inputs: compact states + placeholder tone */
.page-login .auth-form .input,
.page-login .auth-form input[type="email"],
.page-login .auth-form input[type="password"]{
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.page-login .auth-form input::placeholder { color:#9aa5b1; }

/* Buttons: press feedback */
.page-login .btn-primary { transition: transform .06s ease, filter .12s ease; }
.page-login .btn-primary:active { transform: translateY(1px); }

/* Reduce motion respect (no card float if user opts out) */
@media (prefers-reduced-motion: reduce){
  .page-login .auth-card { animation: none; }
}
/* ===== Input alignment fix ===== */
.page-login .auth-form input[type="email"],
.page-login .auth-form input[type="password"],
.page-login .auth-form .input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  height: 46px;               /* uniform height */
  line-height: 1.2;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 10px 14px;
  font-size: 16px;
  font-family: inherit;
  color: #0f172a;
  background: #fff;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
  appearance: none;           /* remove native iOS styling */
}

.page-login .auth-form input[type="email"]:focus,
.page-login .auth-form input[type="password"]:focus {
  border-color: #8b5cf6;
  box-shadow: 0 0 0 3px rgba(139,92,246,.25);
}

/* remove autofill tint */
.page-login .auth-form input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px #fff inset !important;
  -webkit-text-fill-color: #0f172a !important;
}

/* prevent jump in focus */
.page-login .auth-form input:focus-visible {
  outline: none;
}
/* ===== Trust strip under login card ===== */
.page-login .trust-strip,
.page-signup .trust-strip
{
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 14px;
  max-width: 980px;
  margin: 14px auto 0;
  padding: 10px 12px;
  color: #334155;
  background: linear-gradient(180deg,#ffffffcc,#ffffffa8);
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  box-shadow: 0 8px 22px rgba(2,6,23,.06);
}

.page-login .trust-item,
.page-signup .trust-item{
  display:flex; align-items:center; gap:8px;
  font-weight:600; white-space:nowrap;
}
.page-login .trust-item svg{ color:#8b5cf6; flex:0 0 auto; }
.page-signup .trust-item svg{ color:#8b5cf6; flex:0 0 auto; }

/* Stack nicely on phones */
@media (max-width: 780px){
  .page-login .trust-strip,
  .page-signup .trust-strip
  {
    grid-auto-flow: row;
    grid-template-columns: 1fr;
  }
}

/* Small spacing from footer */
.page-login .site-footer{ margin-top: 22px; }


/* Apply the same visuals to both pages */
.page-login .content, .page-signup .content { max-width: 980px; margin: 0 auto; padding: clamp(16px, 2.5vw, 28px); }
/* .page-login .auth-card, .page-signup .auth-card { same as login card; already defined if you used earlier rules  } */
.page-signup { 
  --card-bg:#fff; --edge:#e2e8f0; --ring:#8b5cf6; --muted:#64748b; --text:#0f172a;
  background: radial-gradient(900px 600px at 10% -10%, #eef2ff 0%, rgba(238,242,255,0) 40%),
              radial-gradient(900px 600px at 110% 10%, #f5f3ff 0%, rgba(245,243,255,0) 40%);
}

/* Inputs alignment (share login rules) */
.page-signup .auth-form input[type="email"],
.page-signup .auth-form input[type="password"],
.page-signup .auth-form input[type="text"],
.page-signup .auth-form .input {
  display:block; width:100%; box-sizing:border-box;
  height:46px; line-height:1.2;
  border:1px solid #e2e8f0; border-radius:12px;
  padding:10px 14px; font-size:16px; font-family:inherit;
  color:#0f172a; background:#fff; outline:none;
  transition:border-color .15s ease, box-shadow .15s ease; appearance:none;
}
.page-signup .auth-form input:focus {
  border-color:#8b5cf6; box-shadow:0 0 0 3px rgba(139,92,246,.25);
}
.page-signup .auth-form .checkbox { display:flex; align-items:center; gap:8px; }
.page-signup .auth-form .checkbox input[type="checkbox"]{ width:18px; height:18px; }

/* Password strength meter (simple) */
.pw-meter{ height:6px; margin-top:6px; border-radius:999px; background:#e5e7eb; overflow:hidden; }
.pw-meter::after{ content:""; display:block; height:100%; width:0%; background:#f43f5e; transition:width .25s ease, background .25s ease; border-radius:inherit; }
.pw-meter.level-1::after{ width:25%; background:#f43f5e; }
.pw-meter.level-2::after{ width:50%; background:#f59e0b; }
.pw-meter.level-3::after{ width:75%; background:#10b981; }
.pw-meter.level-4::after{ width:100%; background:#22c55e; }


/* Headline spacing harmony */
.page-signup .auth-intro h1{ margin:8px 0 8px; }
.page-signup .auth-intro p{ color:#64748b; margin:0 0 14px; }

/* Field stack + hint alignment */
.page-signup .field{ margin-bottom:14px; }
.page-signup .hint{ color:#64748b; font-size:.95rem; margin-top:6px; }
.page-signup .error-msg{ color:#b91c1c; font-size:.95rem; margin-top:6px; }

/* Inputs (same as login) */
.page-signup .auth-form input[type="text"],
.page-signup .auth-form input[type="email"],
.page-signup .auth-form input[type="password"],
.page-signup .auth-form .input{
  display:block; width:100%; height:46px; box-sizing:border-box;
  border:1px solid #e2e8f0; border-radius:12px; padding:10px 14px;
  font-size:16px; font-family:inherit; color:#0f172a; background:#fff;
  transition:border-color .15s, box-shadow .15s; appearance:none; outline:none;
}
.page-signup .auth-form input:focus{ border-color:#8b5cf6; box-shadow:0 0 0 3px rgba(139,92,246,.25); }

/* Password meter: match tone + thickness */
.page-signup .pw-meter{ height:8px; margin-top:8px; border-radius:999px; background:#eef2f7; }
.page-signup .pw-meter::after{ content:""; display:block; height:100%; width:0; border-radius:inherit; background:#f43f5e; transition:width .25s, background .25s; }
.page-signup .pw-meter.level-1::after{ width:25%; }
.page-signup .pw-meter.level-2::after{ width:50%; background:#f59e0b; }
.page-signup .pw-meter.level-3::after{ width:75%; background:#10b981; }
.page-signup .pw-meter.level-4::after{ width:100%; background:#22c55e; }

/* Checkbox row: align neatly */
.page-signup .checkbox{ display:flex; align-items:center; gap:10px; line-height:1.2; }
.page-signup .checkbox input[type="checkbox"]{ width:18px; height:18px; accent-color:#8b5cf6; }
.page-signup .checkbox a{ text-decoration:none; color:#6b7280; border-bottom:1px solid rgba(139,92,246,.35); }
.page-signup .checkbox a:hover{ color:#111827; border-bottom-color:#8b5cf6; }

/* Primary button matches Login */
.page-signup .btn-primary{
  appearance:none; border:0; border-radius:16px; padding:12px 18px;
  background:#7c4dff; color:#fff; font-weight:800; cursor:pointer;
  box-shadow:0 10px 24px rgba(124,77,255,.35);
  transition:transform .06s, filter .12s;
}
.page-signup .btn-primary:hover{ filter:brightness(1.05); }
.page-signup .btn-primary:active{ transform:translateY(1px); }

/* Secondary link next to button */
.page-signup .auth-actions{ display:flex; align-items:center; gap:12px; margin-top:8px; }
.page-signup .help-link{ color:#6b7280; text-decoration:none; }
.page-signup .help-link:hover{ color:#111827; text-decoration:underline; }

/* Disabled while validating */
.page-signup .btn-primary[disabled]{ opacity:.6; cursor:not-allowed; box-shadow:none; }
.page-signup .field{ position:relative; }
.page-signup .pw-toggle{
  position:absolute; right:10px; top:36px;
  border:0; background:#fff; color:#6b7280; padding:6px 8px; border-radius:8px; cursor:pointer;
}
.page-signup .pw-toggle:hover{ color:#111827; background:#f3f4f6; }

/* Position the toggle and reserve space */
.page-signup .field { position: relative; }

/* reserve room on the right so text doesn't go under the button */
.page-signup .auth-form input[type="password"] {
  padding-right: 64px; /* space for the toggle */
}

/* the toggle itself */
.page-signup .pw-toggle{
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  border: 1px solid #e5e7eb;
  background: #fff;
  color: #6b7280;
  padding: 6px 10px;
  border-radius: 10px;
  font-size: 0.9rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
.page-signup .pw-toggle:hover{ background:#f8fafc; color:#111827; }
.page-signup .pw-toggle:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(139,92,246,.35); }

/* keep the strength bar from running under the toggle */
.page-signup .pw-toggle + .pw-meter{
  margin-right: 64px;
}

/* slightly tighter on very small phones */
@media (max-width: 420px){
  .page-signup .auth-form input[type="password"]{ padding-right: 56px; }
  .page-signup .pw-toggle{ right: 10px; padding: 5px 9px; }
  .page-signup .pw-toggle + .pw-meter{ margin-right: 56px; }
}

/* Reserve space for the inline toggle */
.page-signup .auth-form input[type="password"]{ padding-right: 72px; }

/* === Refined ghost toggle === */
.page-signup .pw-toggle{
  position:absolute;
  right:14px;
  top:50%;
  transform:translateY(-50%);
  border:0;
  background:transparent;
  color:#6b7280;
  font-size:0.85rem;          /* smaller text */
  font-weight:600;
  line-height:1;              /* prevents vertical expansion */
  padding:2px 4px;            /* tighter padding */
  cursor:pointer;
  border-radius:6px;
  transition:color .12s, background .12s;
}
.page-signup .pw-toggle:hover{
  color:#111827;
  background:rgba(0,0,0,0.04);
}
.page-signup .pw-toggle:focus-visible{
  outline:none;
  box-shadow:0 0 0 2px rgba(139,92,246,.35);
}

/* Maintain spacing for meter and right padding */
.page-signup .auth-form input[type="password"]{
  padding-right:64px;
}
.page-signup .pw-toggle + .pw-meter{
  margin-right:64px;
}

/* FINAL ghost-style toggle (overrides any earlier pill rules) */
.page-signup .auth-form .field { position: relative; }

.page-signup .auth-form input[type="password"]{
  padding-right: 84px;                 /* extra breathing room */
}

.page-signup .auth-form .pw-toggle{
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  /* force ghost look */
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #6b7280;
  font-size: .85rem;
  font-weight: 600;
  line-height: 1;
  padding: 2px 6px;                    /* compact */
  border-radius: 6px;
  cursor: pointer;
}
.page-signup .auth-form .pw-toggle:hover{
  color:#111827; background: rgba(0,0,0,.04);
}
.page-signup .auth-form .pw-toggle:focus-visible{
  outline: none; box-shadow: 0 0 0 2px rgba(139,92,246,.35);
}

/* keep the meter clear of the toggle */
.page-signup .auth-form .pw-toggle + .pw-meter{
  margin-right: 84px;
}

/* Anchor toggle to the input, not the whole field */
.page-signup .auth-form .input-wrap { position: relative; }

/* equal padding room for the inline toggle */
.page-signup .auth-form .input-wrap > input[type="password"] {
  padding-right: 72px;
}

/* final ghost toggle: perfectly centered on the input */
.page-signup .auth-form .input-wrap > .pw-toggle{
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #6b7280;
  font-size: .85rem;
  font-weight: 600;
  line-height: 1;
  padding: 2px 6px;
  border-radius: 6px;
  cursor: pointer;
}
.page-signup .auth-form .input-wrap > .pw-toggle:hover{
  color:#111827; background: rgba(0,0,0,.04);
}
.page-signup .auth-form .input-wrap > .pw-toggle:focus-visible{
  outline: none; box-shadow: 0 0 0 2px rgba(139,92,246,.35);
}

/* keep the meter clear only when it follows a toggle */
.page-signup .auth-form .input-wrap + .pw-meter { margin-right: 72px; }

/* neutralize autofill tint so both fields look the same */
.page-signup .auth-form input:-webkit-autofill,
.page-signup .auth-form input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px #fff inset !important;
  -webkit-text-fill-color: #0f172a !important;
}

/* match message under confirm password */
.match-msg{ font-size:.95rem; margin-top:8px; min-height:1.2em; }
.match-msg.ok{ color:#16a34a; }     /* green */
.match-msg.bad{ color:#b91c1c; }    /* red */

/* (optional) subtle border tint when confirmed */
.input-wrap.match-ok > input{ border-color:#22c55e; }
.input-wrap.match-bad > input{ border-color:#ef4444; }

/* apply input-wrap and toggle on login too */
.page-login .auth-form .input-wrap{ position:relative; }
.page-login .auth-form .input-wrap > input[type="password"]{ padding-right:72px; }
.page-login .auth-form .input-wrap > .pw-toggle{
  position:absolute; right:14px; top:50%; transform:translateY(-50%);
  border:0; background:transparent; box-shadow:none; color:#6b7280;
  font-size:.85rem; font-weight:600; line-height:1; padding:2px 6px; border-radius:6px; cursor:pointer;
}
.page-login .auth-form .input-wrap > .pw-toggle:hover{ color:#111827; background:rgba(0,0,0,.04); }
.page-login .auth-form .input-wrap > .pw-toggle:focus-visible{ outline:none; box-shadow:0 0 0 2px rgba(139,92,246,.35); }

/* Make sure nothing sits on top of the toggle */
.input-wrap { position: relative; }
.pw-toggle{
  position:absolute; right:14px; top:50%; transform:translateY(-50%);
  z-index: 3;                /* sit above input borders/meter */
  pointer-events: auto;      /* ensure clicks are received */
}
.pw-meter{ position: relative; z-index: 1; } /* stays under the toggle */


/* ==== Mobile Drawer polish (uses existing markup) ==== */

/* Backdrop */
.drawer-backdrop{
  position: fixed; inset: 0; z-index: 70;
  background: rgba(2,6,23,.55);           /* dark, semi-opaque */
  backdrop-filter: blur(2px);
  opacity: 0; transition: opacity .18s ease;
}
.drawer-open .drawer-backdrop{ opacity: 1; }

/* Panel */
.mobile-drawer{
  position: fixed; inset: 0 auto 0 0; z-index: 80;
  width: min(82vw, 340px);                 /* comfy width */
  background: #0b1225;                     /* match site bg */
  color: #e5e7eb;
  transform: translateX(-105%);            /* hidden by default */
  transition: transform .22s cubic-bezier(.2,.8,.2,1);
  box-shadow: 0 10px 40px -10px rgba(0,0,0,.7);
  border-right: 1px solid rgba(255,255,255,.06);
  padding-top: calc(16px + env(safe-area-inset-top, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* Reveal */
.drawer-open .mobile-drawer{ transform: translateX(0); }

/* Inside list */
.mobile-actions{
  display: grid; gap: .25rem;
  padding: .75rem .75rem 1rem .75rem;
}

.mobile-actions .navbtn,
.mobile-actions a.navbtn{
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  padding: .9rem 1rem;
  border-radius: .9rem;
  color: #e5e7eb;
  font-weight: 700;
  letter-spacing: .2px;
  text-decoration: none;
}

.mobile-actions .navbtn:hover,
.mobile-actions a.navbtn:hover{
  background: rgba(255,255,255,.06);
}

.mobile-actions .navbtn.active,
.mobile-actions a.navbtn.active{
  background: rgba(99,102,241,.18);
  color: #fff;
}

/* Section separators (optional) */
.mobile-actions .section-title{
  margin: .75rem 0 .25rem;
  padding: 0 .5rem;
  font-size: .8rem;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: .12rem;
}

/* Make the hamburger always visible on dark header */
.menu-btn{ color:#e5e7eb; }

/* Prevent page scroll when drawer is open */
.drawer-open, .drawer-open body{ overflow: hidden; }

/* ===== Drawer Rescue: force dark theme + readable text ===== */

/* Backdrop: darker and always on top of header */
html.drawer-open .drawer-backdrop{
  position: fixed !important;
  inset: 0 !important;
  z-index: 9998 !important;
  background: rgba(2,6,23,.60) !important; /* #020617 at 60% */
  backdrop-filter: blur(2px);
  opacity: 1 !important;
}

/* Panel */
.app-shell .mobile-drawer{
  position: fixed !important;
  inset: 0 auto 0 0 !important;
  z-index: 9999 !important;
  width: min(82vw, 340px) !important;
  background: #0b1225 !important;          /* FORCE dark */
  color: #e5e7eb !important;
  transform: translateX(-105%) !important;  /* hidden by default */
  transition: transform .22s cubic-bezier(.2,.8,.2,1) !important;
  box-shadow: 0 10px 40px -10px rgba(0,0,0,.7) !important;
  border-right: 1px solid rgba(255,255,255,.06) !important;
  padding-top: calc(16px + env(safe-area-inset-top, 0px)) !important;
  padding-bottom: env(safe-area-inset-bottom, 0px) !important;
  border-top-right-radius: 14px; 
  border-bottom-right-radius: 14px;
}
html.drawer-open .mobile-drawer{ transform: translateX(0) !important; }

/* Inside list */
.app-shell .mobile-drawer .mobile-actions{
  display: grid !important;
  gap: .25rem !important;
  padding: .75rem .75rem 1rem .75rem !important;
}

.app-shell .mobile-drawer .navbtn,
.app-shell .mobile-drawer a.navbtn{
  display: block !important;
  width: 100% !important;
  text-align: left !important;
  background: transparent !important;
  border: 0 !important;
  padding: .9rem 1rem !important;
  border-radius: .9rem !important;
  color: #e5e7eb !important;
  font-weight: 700 !important;
  letter-spacing: .2px !important;
  text-decoration: none !important;
}
.app-shell .mobile-drawer .navbtn:hover,
.app-shell .mobile-drawer a.navbtn:hover{
  background: rgba(255,255,255,.07) !important;
}
.app-shell .mobile-drawer .navbtn.active,
.app-shell .mobile-drawer a.navbtn.active{
  background: rgba(99,102,241,.18) !important;
  color: #fff !important;
}

/* Prevent page scroll while open */
html.drawer-open, html.drawer-open body{ overflow: hidden !important; }

/* Make hamburger visible on dark headers */
.menu-btn{ color:#e5e7eb !important; }

/* === Pro Drawer v2 — compact, floating sheet === */

/* Backdrop: a touch darker + blur for depth */
html.drawer-open .drawer-backdrop{
  background: rgba(2,6,23,.55) !important;
  backdrop-filter: blur(3px);
}

/* Panel: float with margins, rounded corners, sane width/height */
.app-shell .mobile-drawer{
  position: fixed !important;
  /* inset: top right bottom left (use dvh for mobile toolbars) */
  top: calc(12px + env(safe-area-inset-top, 0px)) !important;
  bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
  left: 12px !important;
  right: auto !important;

  width: min(86vw, 360px) !important;
  max-height: calc(100dvh - (24px + env(safe-area-inset-top,0px) + env(safe-area-inset-bottom,0px))) !important;
  overflow: auto !important;

  background: #0c1224 !important;
  background-image: radial-gradient(120% 90% at -20% 0%, rgba(99,102,241,.12), transparent 60%),
                    radial-gradient(120% 90% at 120% 110%, rgba(34,197,94,.07), transparent 60%);
  color: #e5e7eb !important;

  border: 1px solid rgba(255,255,255,.06) !important;
  border-radius: 16px !important;
  box-shadow: 0 24px 60px -20px rgba(0,0,0,.65) !important;

  transform: translateX(-110%) !important;
  transition: transform .22s cubic-bezier(.2,.8,.2,1) !important;
}
html.drawer-open .mobile-drawer{ transform: translateX(0) !important; }

/* Inner layout */
.app-shell .mobile-drawer .mobile-actions{
  padding: .6rem .6rem 1rem .6rem !important;
  display: grid !important;
  gap: .2rem !important;
}

/* Item styling: smaller, neater */
.app-shell .mobile-drawer .navbtn,
.app-shell .mobile-drawer a.navbtn{
  display: block !important;
  padding: .7rem .85rem !important;
  border-radius: 10px !important;
  font-size: 0.98rem !important;              /* smaller text */
  font-weight: 700 !important;
  letter-spacing: .15px !important;
  color: #e5e7eb !important;
  background: transparent !important;
  border: 0 !important;
  text-decoration: none !important;
}
.app-shell .mobile-drawer .navbtn:hover,
.app-shell .mobile-drawer a.navbtn:hover{
  background: rgba(255,255,255,.06) !important;
}
.app-shell .mobile-drawer .navbtn.active,
.app-shell .mobile-drawer a.navbtn.active{
  background: rgba(99,102,241,.18) !important;
  color: #fff !important;
}

/* Subtle divider line on the sheet edge for realism */
.app-shell .mobile-drawer::after{
  content:"";
  position:absolute; top:0; right:-1px; bottom:0; width:1px;
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.02));
  border-radius: 0 16px 16px 0;
}

/* Hamburger: keep visible */
.menu-btn{ color:#e5e7eb !important; }

.drawer-head{
  position: sticky; top: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(12,18,36,1), rgba(12,18,36,.92));
  border-bottom: 1px solid rgba(255,255,255,.06);
  padding: .5rem .5rem .5rem .5rem;
  border-radius: 16px 16px 0 0;
}
.drawer-head .handle{
  display:block; width: 34px; height: 4px; border-radius: 999px;
  background: rgba(255,255,255,.18); margin: .25rem auto .4rem;
}
.drawer-head .brand-mini{
  display:flex; align-items:center; gap:.5rem; color:#e5e7eb; padding: 0 .25rem .25rem;
  font-size: .95rem;
}
.drawer-close{
  position:absolute; right:.35rem; top:.35rem; border:0; background:transparent;
  color:#cbd5e1; font-size: 1.4rem; line-height:1; padding:.25rem .4rem; border-radius: .5rem;
}
.drawer-close:hover{ background: rgba(255,255,255,.06); color:#fff; }

/* ===== Drawer height + lift off the bottom ===== */
.app-shell .mobile-drawer{
  /* float it: add top/bottom gaps and rounded corners */
  top: calc(12px + env(safe-area-inset-top, 0px)) !important;
  bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
  left: 12px !important;
  right: auto !important;
  border-radius: 16px !important;

  /* ensure the panel scrolls inside if content grows */
  overflow: auto !important;

  /* cap height using dynamic viewport units (fixes iOS toolbar issues) */
  max-height: calc(
    100dvh - (24px + env(safe-area-inset-top, 0px) + env(safe-area-inset-bottom, 0px))
  ) !important;

  /* a touch more depth */
  box-shadow: 0 24px 60px -20px rgba(0,0,0,.65) !important;
}

/* Keep the sticky header inside the drawer rounded and notched */
.drawer-head{
  position: sticky; top: 0;
  border-radius: 16px 16px 0 0;
}

/* Prevent the page behind from scrolling when drawer is open */
html.drawer-open, html.drawer-open body{ overflow: hidden !important; }

/* Nice-to-have: avoid bounce/chain scroll on iOS when at edges */
.app-shell .mobile-drawer{ overscroll-behavior: contain; }

/* ===== FINAL OVERRIDE: lift drawer off the bottom and cap height ===== */
:root { --drawer-gap: 14px; }

/* 1) Nuke any previous 'inset: 0' and 100% heights */
html.drawer-open .app-shell .mobile-drawer{
  /* reset the shorthand so top/bottom can take effect */
  inset: auto auto auto auto !important;
  height: auto !important;
  min-height: 0 !important;
}

/* 2) Apply the floating sheet geometry */
html.drawer-open .app-shell .mobile-drawer{
  position: fixed !important;
  top: calc(var(--drawer-gap) + env(safe-area-inset-top,0px)) !important;
  bottom: calc(var(--drawer-gap) + env(safe-area-inset-bottom,0px)) !important;
  left: var(--drawer-gap) !important;
  right: auto !important;

  width: min(86vw, 360px) !important;
  max-height: calc(
    100dvh - (2 * var(--drawer-gap) + env(safe-area-inset-top,0px) + env(safe-area-inset-bottom,0px))
  ) !important;
  overflow: auto !important;

  background: #0c1224 !important;
  border: 1px solid rgba(255,255,255,.06) !important;
  border-radius: 16px !important;
  box-shadow: 0 24px 60px -20px rgba(0,0,0,.65) !important;
}

/* (nice-to-have) keep header in the sheet rounded & sticky */
.drawer-head{ position: sticky; top: 0; border-radius: 16px 16px 0 0; }

/* prevent background scroll while open */
html.drawer-open, html.drawer-open body{ overflow: hidden !important; }

/* iOS edge bounce */
html.drawer-open .app-shell .mobile-drawer{ overscroll-behavior: contain; }

.site-footer {
  background: #0c0f1a;
  border-top: 1px solid rgba(255,255,255,0.05);
  padding: 0.8rem 1rem;
  color: #94a3b8;
  font-size: 0.9rem;
}

.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.8rem;
  max-width: 1200px;
  margin: 0 auto;
}

.footer-logo {
  height: 28px;
  opacity: 0.9;
}

.footer-nav {
  display: flex;
  gap: 1.2rem;
  flex-wrap: wrap;
}

.footer-nav a {
  color: #cbd5e1;
  text-decoration: none;
  transition: color 0.2s;
}

.footer-nav a:hover {
  color: #93c5fd;
}

.copyright {
  opacity: 0.8;
}