/* =========================================================
   Link2Manage — Bold Rusty Product UI (v1)
   Inspired by modern fintech auth UI + layered cards
   Notes:
   - Header-only nav (no sidebar)
   - Big gradient presence (Option A)
   - Square form controls
   ========================================================= */

/* -------------------------
   1) TOKENS
   ------------------------- */
:root{
  /* Brand gradient */
  --rust-700:#A94418;
  --rust-600:#B94C1A;
  --rust-500:#C5541E;
  --rust-450:#E06A2C;
  --gold-200:#F2C77A;

  /* Light surfaces */
  --bg:#fff6ef;
  --bg2:#fff;
  --panel:#ffffff;
  --panel2:#fffdfb;

  --text:#19120e;
  --muted:rgba(25,18,14,.72);
  --muted2:rgba(25,18,14,.56);

  --stroke:rgba(25,18,14,.10);
  --stroke2:rgba(197,84,30,.22);

  --shadow:0 22px 60px rgba(17,12,9,.14);
  --shadow2:0 14px 34px rgba(17,12,9,.12);

  --r:20px;
  --r2:16px;

  --accent:var(--rust-500);
  --accent2:var(--rust-450);

  --btnTextOnAccent:#fff;

  /* Header */
  --header-bg:rgba(255,255,255,.62);
  --header-bd:rgba(255,255,255,.45);

  /* Pills */
  --pill-bg:rgba(197,84,30,.10);
  --pill-bd:rgba(197,84,30,.22);

  /* Controls */
  --control-bg:#ffffff;
  --control-bd:rgba(25,18,14,.18);
  --control-fg:var(--text);
  --focus:rgba(224,106,44,.25);
}

html[data-theme="dark"]{
  /* Dark theme — Bold Rust UI (EasyPay-inspired) */
  --bg:#0d0705;
  --bg2:#0a0504;

  /* Cards: warm charcoal with depth */
  --panel:rgba(22,12,9,.92);
  --panel2:rgba(17,10,8,.92);

  --text:#fff7f2;
  --muted:rgba(255,247,242,.78);
  --muted2:rgba(255,247,242,.58);

  --stroke:rgba(255,247,242,.10);
  --stroke2:rgba(224,106,44,.30);

  --shadow:0 28px 74px rgba(0,0,0,.62);
  --shadow2:0 16px 40px rgba(0,0,0,.52);

  /* Make accent pop in dark */
  --accent:#E06A2C;
  --accent2:#F08A3C;
  --btnTextOnAccent:#1a0c07;

  /* Header */
  --header-bg:rgba(14,8,6,.55);
  --header-bd:rgba(255,247,242,.10);

  /* Pills */
  --pill-bg:rgba(224,106,44,.16);
  --pill-bd:rgba(224,106,44,.30);

  /* Controls */
  --control-bg:rgba(255,255,255,.06);
  --control-bd:rgba(255,247,242,.16);
  --control-fg:var(--text);
  --focus:rgba(240,138,60,.32);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  color:var(--text);
  background:
    radial-gradient(1200px 650px at 12% -10%, rgba(224,106,44,.40), transparent 60%),
    radial-gradient(900px 560px at 88% 0%, rgba(242,199,122,.22), transparent 60%),
    radial-gradient(1100px 680px at 60% 120%, rgba(197,84,30,.18), transparent 55%),
    linear-gradient(180deg, var(--bg), var(--bg2));
}

/* -------------------------
   2) APP SHELL
   ------------------------- */
.app-shell{
  min-height:100vh;
  display:grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "topbar"
    "main";
}

.app-topbar{
  grid-area: topbar;
  position: sticky;
  top:0;
  z-index: 50;
  padding: 14px 18px;
  display:flex;
  align-items:center;
  gap: 12px;
  border-bottom: 1px solid var(--header-bd);
  background: var(--header-bg);
  backdrop-filter: blur(12px);
}

.app-brand{
  display:flex;
  align-items:center;
  gap: 12px;
  text-decoration:none;
  color:inherit;
  min-width: 240px;
}
.brand-mark{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border-radius: 18px;
  border:1px solid var(--stroke2);
  background:
    radial-gradient(60px 50px at 30% 20%, rgba(242,199,122,.35), transparent 55%),
    linear-gradient(135deg, rgba(224,106,44,.28), rgba(197,84,30,.12));
  box-shadow: 0 16px 40px rgba(0,0,0,.18);
  font-weight: 800;
  letter-spacing: .6px;
}
.brand-text strong{display:block; font-size:14px; letter-spacing:.2px}
.brand-text span{display:block; font-size:12px; color:var(--muted)}

.topnav{
  display:flex;
  align-items:center;
  gap: 8px;
  flex-wrap: wrap;
}
.topnav-link{
  text-decoration:none;
  color:inherit;
  font-weight:700;
  font-size:13px;
  padding: 9px 12px;
  border-radius: 999px;
  background: var(--pill-bg);
  border:1px solid var(--pill-bd);
  transition: transform .12s ease, filter .12s ease, background .12s ease;
}
.topnav-link:hover{ transform: translateY(-1px); filter: brightness(1.02); }
.topnav-link.active{
  background:
    radial-gradient(140px 80px at 30% 10%, rgba(242,199,122,.28), transparent 60%),
    linear-gradient(90deg, var(--accent), var(--accent2));
  color: var(--btnTextOnAccent);
  border-color: transparent;
  box-shadow: 0 18px 45px rgba(197,84,30,.22);
}

.topbar-actions{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:10px;
}

.icon-btn{
  width:40px;
  height:40px;
  border-radius: 14px;
  border:1px solid var(--stroke);
  background: rgba(255,255,255,.40);
  color:inherit;
  display:grid;
  place-items:center;
  cursor:pointer;
}
html[data-theme="dark"] .icon-btn{ background: rgba(255,255,255,.06); border-color: rgba(247,242,239,.12); }

.userbox{
  display:flex;
  align-items:center;
  gap:8px;
  padding: 9px 12px;
  border-radius: 999px;
  border:1px solid var(--stroke);
  background: rgba(255,255,255,.35);
}
html[data-theme="dark"] .userbox{ background: rgba(255,255,255,.06); border-color: rgba(247,242,239,.12); }

.user-dot{
  width:10px;height:10px;border-radius:999px;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  box-shadow: 0 10px 24px rgba(197,84,30,.22);
}

/* -------------------------
   3) MAIN + LAYOUT HELPERS
   ------------------------- */
.app-main{
  grid-area: main;
  padding: 22px 18px 42px;
}
.container{max-width: 1200px; margin: 0 auto;}
.grid{display:grid; grid-template-columns: repeat(12,1fr); gap: 16px;}
@media(max-width: 980px){
  .topnav{display:none;}
  .app-brand{min-width: auto;}
}
@media(max-width: 740px){
  .app-main{padding: 16px 14px 34px;}
}

/* -------------------------
   4) TYPOGRAPHY
   ------------------------- */
.h1{font-size: 26px; line-height: 1.12; letter-spacing: -.2px; margin:0 0 8px;}
.p{margin:0; color: var(--muted); font-size: 14px; line-height: 1.55;}
.small{font-size: 12px; color: var(--muted2);}
.label{
  font-size: 11px;
  letter-spacing: .18px;
  text-transform: uppercase;
  color: rgba(25,18,14,.72);
  margin: 0 0 6px;
}
html[data-theme="dark"] .label{ color: rgba(247,242,239,.72); }

/* -------------------------
   5) CARDS + PANELS
   ------------------------- */
.card{
  background: var(--panel);
  border: 1px solid var(--stroke);
  border-radius: var(--r);
  box-shadow: var(--shadow2);
  padding: 18px;
}
.card.soft{
  background: linear-gradient(180deg, var(--panel), var(--panel2));
}
.card.hero{
  border-color: rgba(197,84,30,.20);
  background:
    radial-gradient(900px 420px at 18% -10%, rgba(224,106,44,.55), transparent 60%),
    radial-gradient(700px 360px at 90% 0%, rgba(242,199,122,.20), transparent 60%),
    linear-gradient(135deg, rgba(197,84,30,.28), rgba(255,255,255,.35));
}
html[data-theme="dark"] .card.hero{
  background: rgba(22,12,9,.96);
  border-color: rgba(255,255,255,.10);
}

/* KPI blocks */
.kpis{display:grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin-top: 14px;}
@media(max-width: 900px){ .kpis{grid-template-columns:1fr;} }
.kpi{
  border-radius: 18px;
  padding: 14px;
  border: 1px solid rgba(255,255,255,.35);
  background:
    radial-gradient(220px 120px at 20% 20%, rgba(242,199,122,.18), transparent 60%),
    linear-gradient(90deg, rgba(197,84,30,.22), rgba(224,106,44,.10));
}
html[data-theme="dark"] .kpi{
  background: rgba(22,12,9,.94);
  border-color: rgba(255,255,255,.10);
}
.kpi strong{display:block; font-size: 15px;}
.kpi span{display:block; color: var(--muted); font-size: 12px; margin-top: 4px;}

/* -------------------------
   6) BUTTONS + LINKS
   ------------------------- */
   /* =========================================================
   Fix default blue hyperlinks (safe version)
   ========================================================= */

a:not(.btn):not(.btn-primary):not(.btn-outline):not(.btn-ghost)
:not(.topnav-link):not(.bn-item):not(.pill):not(.badge),
a:not(.btn):not(.btn-primary):not(.btn-outline):not(.btn-ghost)
:not(.topnav-link):not(.bn-item):not(.pill):not(.badge):visited{
  color: var(--accent);
  text-decoration: underline;
}

a:not(.btn):not(.btn-primary):not(.btn-outline):not(.btn-ghost)
:not(.topnav-link):not(.bn-item):not(.pill):not(.badge):hover{
  color: var(--accent2);
}

html[data-theme="dark"] 
a:not(.btn):not(.btn-primary):not(.btn-outline):not(.btn-ghost)
:not(.topnav-link):not(.bn-item):not(.pill):not(.badge),
html[data-theme="dark"]
a:not(.btn):not(.btn-primary):not(.btn-outline):not(.btn-ghost)
:not(.topnav-link):not(.bn-item):not(.pill):not(.badge):visited{
  color:#FF9A3D;
}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  font-weight:800;
  font-size: 13px;
  padding: 10px 14px;
  border-radius: 14px;
  border: 1px solid transparent;
  text-decoration:none;
  cursor:pointer;
  transition: transform .12s ease, filter .12s ease, box-shadow .12s ease;
}
.btn-primary, .btn{
  background:
    radial-gradient(220px 120px at 20% 10%, rgba(242,199,122,.22), transparent 60%),
    linear-gradient(90deg, var(--accent), var(--accent2));
  color: var(--btnTextOnAccent);
  box-shadow: 0 18px 45px rgba(197,84,30,.24);
}
.btn:hover{ transform: translateY(-1px); filter: brightness(1.02); }
.btn:active{ transform: translateY(0px); }

.btn-outline{
  background: rgba(255,255,255,.40);
  color: var(--text);
  border-color: rgba(25,18,14,.16);
  box-shadow: none;
}
html[data-theme="dark"] .btn-outline{
  background: rgba(255,255,255,.06);
  border-color: rgba(247,242,239,.14);
}
.btn-ghost{
  background: transparent;
  color: var(--text);
  border-color: var(--stroke);
  box-shadow: none;
}
.link-btn{
  background:none;border:none;padding:0;margin:0;
  color: var(--accent);
  font-weight:800;
  cursor:pointer;
}

/* -------------------------
   7) FORMS (square)
   ------------------------- */
.form-stack{display:flex; flex-direction:column; gap: 12px; margin-top: 14px;}
.row{display:grid; grid-template-columns:1fr 1fr; gap: 12px;}
@media(max-width: 820px){ .row{grid-template-columns:1fr;} }

.input, input, select, textarea{
  width:100%;
  padding: 12px 12px;
  border-radius: 0 !important; /* square */
  border: 1px solid var(--control-bd);
  background: var(--control-bg);
  color: var(--control-fg);
  outline: none;
  box-shadow: 0 1px 0 rgba(0,0,0,.05);
}
input::placeholder, textarea::placeholder{ color: rgba(25,18,14,.44); }
html[data-theme="dark"] input::placeholder, html[data-theme="dark"] textarea::placeholder{ color: rgba(247,242,239,.44); }

.input:focus, input:focus, select:focus, textarea:focus{
  border-color: rgba(224,106,44,.65);
  box-shadow: 0 0 0 4px var(--focus);
}

/* -------------------------
   8) TABLES
   ------------------------- */
.tablewrap{
  border: 1px solid var(--stroke);
  border-radius: var(--r2);
  overflow:hidden;
  background: var(--panel);
  box-shadow: var(--shadow2);
}
.t{width:100%; border-collapse: collapse;}
.t th, .t td{padding: 12px 12px; border-bottom: 1px solid var(--stroke); text-align:left;}
.t th{
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .16px;
  color: var(--muted2);
  background:
    radial-gradient(800px 200px at 12% 0%, rgba(224,106,44,.16), transparent 60%),
    rgba(255,255,255,.55);
}
html[data-theme="dark"] .t th{ background: rgba(255,255,255,.04); }
.t tr:hover td{ background: rgba(197,84,30,.06); }

/* -------------------------
   9) AUTH PAGES (split)
   ------------------------- */
.auth-shell{
  min-height: calc(100vh - 84px);
  display:grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 18px;
  align-items: stretch;
}
@media(max-width: 980px){
  .auth-shell{grid-template-columns:1fr;}
  .auth-panel{min-height: 240px;}
}

.auth-panel{
  border-radius: 28px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.55);
  box-shadow: var(--shadow);
  background:
    radial-gradient(900px 520px at 15% -10%, rgba(242,199,122,.22), transparent 60%),
    radial-gradient(900px 520px at 90% 0%, rgba(255,255,255,.20), transparent 60%),
    linear-gradient(135deg, var(--rust-700), var(--rust-500), var(--rust-450));
  color: #fff;
  position: relative;
}
html[data-theme="dark"] .auth-panel{
  border-color: rgba(247,242,239,.10);
  background:
    radial-gradient(900px 520px at 15% -10%, rgba(242,199,122,.14), transparent 60%),
    radial-gradient(900px 520px at 90% 0%, rgba(0,0,0,.18), transparent 60%),
    linear-gradient(135deg, var(--rust-700), var(--rust-500), var(--rust-450));
}
.auth-panel-inner{padding: 26px;}
.auth-brand{display:flex; gap: 14px; align-items:center;}
.auth-mark{
  width:54px;height:54px;border-radius:22px;
  display:grid;place-items:center;
  background: rgba(255,255,255,.20);
  border:1px solid rgba(255,255,255,.30);
  font-weight: 900;
  letter-spacing: .7px;
}
.auth-title{font-size: 28px; font-weight: 900; letter-spacing: -.2px;}
.auth-sub{opacity:.92; margin-top: 6px; max-width: 520px; line-height:1.55;}

.auth-highlights{margin-top: 18px; display:grid; gap: 10px;}
.hl{
  padding: 12px 14px;
  border-radius: 18px;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.22);
}
.hl strong{display:block; font-size: 14px;}
.hl span{display:block; opacity:.92; margin-top: 4px; font-size: 12px; line-height: 1.45;}
.auth-note{margin-top: 16px; opacity:.92; font-size: 12px;}

.auth-card-wrap{display:flex; align-items:center; justify-content:center;}
.auth-card{
  width: min(520px, 100%);
  background: rgba(255,255,255,.88);
  border: 1px solid rgba(255,255,255,.60);
  border-radius: 28px;
  box-shadow: var(--shadow);
  padding: 22px;
}
html[data-theme="dark"] .auth-card{
  background: rgba(29,18,13,.88);
  border-color: rgba(247,242,239,.10);
}

/* -------------------------
   10) MISC
   ------------------------- */
.err{
  margin-top: 10px;
  padding: 12px 12px;
  border-radius: 16px;
  border: 1px solid rgba(239,68,68,.35);
  background: rgba(239,68,68,.12);
  color: var(--text);
}


/* =========================================================
   Page wrapping
   ========================================================= */
.container{max-width:1200px; margin:0 auto;}
.app-container{padding: 0 2px;} /* keeps cards from touching edges */
@media(max-width:740px){ .app-container{padding:0 0;} }

/* Allow specific sections to opt into full-bleed when needed */
.full-bleed{width:100%; margin-left:0; margin-right:0;}


/* =========================================================
   Header nav — single-row simple links (no pills)
   ========================================================= */
.topnav{
  gap: 14px;
  flex-wrap: nowrap;
  overflow-x: auto;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.topnav::-webkit-scrollbar{ display:none; }

.topnav-link{
  background: transparent !important;
  border: none !important;
  padding: 8px 2px !important;
  border-radius: 0 !important;
  font-weight: 800;
  color: var(--muted) !important;
  position: relative;
}
.topnav-link:hover{ transform:none !important; filter:none !important; color: var(--text) !important; }

.topnav-link.active{
  color: var(--text) !important;
  background: transparent !important;
  box-shadow: none !important;
}
.topnav-link.active::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-10px;
  height:3px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
}
@media(max-width: 980px){
  .topnav{display:flex;} /* keep single row, scrollable */
}


/* Keep top header single-row */
.app-topbar{
  flex-wrap: nowrap;
}
.topnav{min-width: 0;}
.topbar-actions{flex-shrink: 0;}


/* =========================================================
   Footer
   ========================================================= */
.app-footer{
  margin-top: 26px;
  padding: 14px 18px;
  border-top: 1px solid var(--stroke);
  background: rgba(255,255,255,.40);
  backdrop-filter: blur(10px);
}
html[data-theme="dark"] .app-footer{ background: rgba(255,255,255,.04); border-top-color: rgba(247,242,239,.10); }

.footer-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
}
.footer-left{display:flex; align-items:center; gap: 10px;}
.footer-mark{
  width:34px; height:34px;
  display:grid; place-items:center;
  border-radius: 14px;
  border: 1px solid var(--stroke2);
  background: linear-gradient(135deg, rgba(224,106,44,.22), rgba(197,84,30,.10));
  font-weight: 900;
  letter-spacing: .5px;
}
.footer-right{display:flex; align-items:center; gap: 10px; flex-wrap: wrap;}
.footer-link{color: inherit; text-decoration:none; font-weight:800;}
.footer-link:hover{color: var(--text); text-decoration: underline;}
.footer-right .dot{opacity:.5;}


/* =========================================================
   Page layouts
   ========================================================= */
.page-head{margin: 10px 0 18px;}
.page-head-inner{display:flex; align-items:flex-end; justify-content:space-between; gap:14px;}
.page-split{
  display:grid;
  grid-template-columns: 2fr 1fr;
  gap: 16px;
  align-items:start;
}
@media(max-width: 980px){
  .page-split{grid-template-columns:1fr;}
}
.page-tip{position: sticky; top: 96px;}
@media(max-width: 980px){
  .page-tip{position: static;}
}
.form-actions{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items:center;
}


/* =========================================================
   Auth (pro polish)
   ========================================================= */
.auth-shell-pro{gap: 22px;}
.auth-panel-pro{border-radius: 30px;}
.auth-panel-pro .auth-title{font-size: 30px;}
.auth-panel-pro .auth-sub{max-width: 560px;}
.auth-metrics{margin-top: 18px; display:grid; gap: 10px;}
.metric{
  padding: 12px 14px;
  border-radius: 18px;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.22);
}
.metric strong{display:block; font-size: 14px; letter-spacing:.1px;}
.metric span{display:block; opacity:.92; margin-top: 4px; font-size: 12px; line-height: 1.45;}
.auth-footnote{margin-top: 14px; opacity:.92; font-size: 12px;}

.auth-card-pro{border-radius: 30px;}
.auth-card-head{margin-bottom: 6px;}
.auth-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  padding-top: 2px;
}
.chk{display:flex; align-items:center; gap: 8px; font-weight:700; font-size: 13px; color: var(--text);}
.chk input{width:16px; height:16px;}
.auth-submit{width:100%;}
.auth-divider{
  height:1px;
  background: var(--stroke);
  margin: 16px 0 12px;
}
.auth-help-pro{display:flex; flex-direction:column; gap: 6px;}


/* =========================================================
   Auth width wrapping (centered, not screen-wide)
   ========================================================= */
.auth-shell{
  max-width: 1200px;
  margin: 40px auto 60px;
  padding: 0 18px;
}
@media(max-width: 980px){
  .auth-shell{
    margin: 20px auto 40px;
  }
}


/* =========================================================
   Single Column Login Layout
   ========================================================= */
.auth-single{
  max-width: 560px;
  margin: 60px auto 80px;
  padding: 0 18px;
}

.auth-single-inner{
  display:flex;
  flex-direction:column;
  gap: 22px;
}

.auth-single-header{
  text-align:center;
}

.auth-mark.large{
  width:64px;
  height:64px;
  margin: 0 auto 12px;
  font-size: 20px;
  border-radius: 22px;
}

.auth-single-card{
  padding: 26px;
}

.auth-submit{
  width:100%;
}


/* =========================================================
   KPI card sizing (avoid giant full-width stat cards)
   ========================================================= */
.kpis{
  grid-template-columns: repeat(auto-fit, minmax(220px, 280px));
  justify-content: center;
}
@media(min-width: 1100px){
  .kpis{ grid-template-columns: repeat(auto-fit, minmax(240px, 320px)); }
}
.kpi{
  width: 100%;
  max-width: 340px;
  padding: 12px;
}
.kpi strong{font-size: 14px;}
.kpi span{font-size: 12px;}


/* =========================================================
   Dashboard (professional layout)
   ========================================================= */
.dash-head{padding: 18px;}
.dash-head-inner{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap: 14px;
  flex-wrap: wrap;
}
.dash-actions{
  display:flex;
  gap: 10px;
  align-items:center;
  flex-wrap: wrap;
}

.badge{
  display:inline-flex;
  align-items:center;
  gap: 6px;
  padding: 8px 10px;
  border-radius: 999px;
  border:1px solid var(--stroke);
  background: rgba(255,255,255,.45);
  font-size: 12px;
}
html[data-theme="dark"] .badge{ background: rgba(255,255,255,.06); border-color: rgba(247,242,239,.12); }

.kpi-grid{
  margin-top: 14px;
  display:grid;
  grid-template-columns: repeat(3, minmax(220px, 1fr));
  gap: 12px;
}
@media(max-width: 980px){
  .kpi-grid{ grid-template-columns: 1fr; }
}
.kpi{
  border-radius: 18px;
  padding: 14px;
  border: 1px solid rgba(255,255,255,.35);
  background:
    radial-gradient(220px 120px at 20% 20%, rgba(242,199,122,.14), transparent 60%),
    linear-gradient(90deg, rgba(197,84,30,.18), rgba(224,106,44,.10));
}
html[data-theme="dark"] .kpi{
  background: rgba(22,12,9,.94);
  border-color: rgba(255,255,255,.10);
}
.kpi.primary{
  background:
    radial-gradient(260px 140px at 16% 10%, rgba(242,199,122,.18), transparent 60%),
    linear-gradient(90deg, rgba(224,106,44,.28), rgba(197,84,30,.16));
}
.kpi strong{display:block; font-size: 18px; letter-spacing:.1px;}
.kpi span{display:block; color: var(--muted); font-size: 12px; margin-top: 4px; line-height:1.35;}

.dash-main-grid{
  display:grid;
  grid-template-columns: 1.4fr .9fr;
  gap: 16px;
  align-items:start;
}
@media(max-width: 980px){
  .dash-main-grid{ grid-template-columns: 1fr; }
}

/* Card header helpers used in dashboard */
.card-header{display:flex; align-items:flex-start; justify-content:space-between; gap: 12px; flex-wrap: wrap;}
.card-title .h2{font-size: 16px; margin:0 0 2px;}
.divider{height:1px; background: var(--stroke); margin: 14px 0;}
.mt-2{margin-top: 10px;}
.mt-3{margin-top: 16px;}


/* =========================================================
   Admin Demo Requests — alignment fixes
   ========================================================= */
.right{text-align:right;}
.nowrap{white-space:nowrap;}
.truncate{
  max-width: 1px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.t-fixed{table-layout:fixed;}
.demo-filters{
  display:grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items:end;
}
@media(max-width: 980px){
  .demo-filters{grid-template-columns: 1fr;}
}
.demo-filter-right{
  display:flex;
  gap: 12px;
  align-items:end;
  flex-wrap: wrap;
  justify-content:flex-end;
}
.demo-actions-inline{
  display:flex;
  gap: 10px;
  align-items:center;
  flex-wrap: wrap;
}
.demo-inline{
  display:flex;
  gap: 8px;
  align-items:center;
  justify-content:flex-start;
}
.demo-inline-select{min-width: 140px;}
.subrow td{border-bottom: none;}
.subcell{
  padding-top: 0;
  padding-bottom: 14px;
  opacity: .85;
}


/* =========================================================
   Pills (status)
   ========================================================= */
.pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding: 6px 10px;
  border-radius: 999px;
  border:1px solid var(--pill-bd);
  background: var(--pill-bg);
  font-weight: 800;
  font-size: 12px;
  line-height: 1;
}
.pill-new{ background: rgba(224,106,44,.14); border-color: rgba(224,106,44,.26); }
.pill-contacted{ background: rgba(59,130,246,.12); border-color: rgba(59,130,246,.22); }
.pill-qualified{ background: rgba(242,199,122,.14); border-color: rgba(242,199,122,.22); }
.pill-verified{ background: rgba(34,197,94,.12); border-color: rgba(34,197,94,.22); }
.pill-closed{ background: rgba(148,163,184,.14); border-color: rgba(148,163,184,.22); }
.pill-spam{ background: rgba(239,68,68,.12); border-color: rgba(239,68,68,.22); }

.btn-sm{ padding: 8px 10px; border-radius: 12px; font-size: 12px; }


/* =========================================================
   Demo Requests — polish + alignment
   ========================================================= */
.tablewrap{overflow:auto;}
.t td{vertical-align: top;}
.t th, .t td{line-height: 1.35;}
.t td{font-size: 13px;}
.t th{font-size: 11px;}

.demo-status-cell{display:flex; flex-direction:column; gap: 8px; align-items:flex-start;}
.demo-status-form{display:flex; gap: 8px; align-items:center; flex-wrap: nowrap;}
.demo-status-form .demo-inline-select{min-width: 170px; max-width: 220px;}
.demo-status-pill{display:flex; gap: 8px; flex-wrap: wrap;}

.demo-invite-cell{display:flex; flex-direction:column; gap: 8px; align-items:flex-end;}
.demo-invite-actions{display:flex; gap: 8px; align-items:center; justify-content:flex-end; flex-wrap: wrap;}

@media(max-width: 980px){
  .demo-filter-right{justify-content:flex-start;}
  .demo-invite-cell{align-items:flex-start;}
}

/* Dark mode background glow (bold, brand-forward) */
html[data-theme="dark"] body{
  background: #E06A2C;
}

/* =========================================================
   Dark mode — topbar polish
   ========================================================= */
html[data-theme="dark"] .icon-btn{
  background: rgba(255,255,255,.05);
  border-color: rgba(255,247,242,.12);
}
html[data-theme="dark"] .userbox{
  background: rgba(255,255,255,.05);
  border-color: rgba(255,247,242,.12);
}
html[data-theme="dark"] .topnav-link{
  color: rgba(255,247,242,.72) !important;
}
html[data-theme="dark"] .topnav-link.active{
  color: var(--text) !important;
}

/* =========================================================
   Dark mode — hero & KPI polish
   ========================================================= */
html[data-theme="dark"] .card.hero{
  background: rgba(22,12,9,.96);
  border-color: rgba(255,255,255,.10);
}
html[data-theme="dark"] .kpi{
  background: rgba(22,12,9,.94);
  border-color: rgba(255,255,255,.10);
}
html[data-theme="dark"] .tablewrap{
  background: rgba(22,12,9,.92);
}
html[data-theme="dark"] .t th{
  background: rgba(255,255,255,.04);
}


/* =========================================================
   Dark theme — white form fields
   ========================================================= */
html[data-theme="dark"] .input,
html[data-theme="dark"] select.input,
html[data-theme="dark"] textarea.input{
  background: #ffffff !important;
  color: #1a0c07 !important;
  border-color: rgba(0,0,0,.12) !important;
}

html[data-theme="dark"] .input::placeholder{
  color: rgba(0,0,0,.45) !important;
}

html[data-theme="dark"] .input:focus{
  border-color: #E06A2C !important;
  box-shadow: 0 0 0 3px rgba(224,106,44,.25) !important;
}


/* =========================================================
   Dark theme — force white form fields everywhere (even if missing .input)
   ========================================================= */
html[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
html[data-theme="dark"] select,
html[data-theme="dark"] textarea{
  background: #ffffff !important;
  color: #1a0c07 !important;
  border-color: rgba(0,0,0,.12) !important;
}

html[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"])::placeholder,
html[data-theme="dark"] textarea::placeholder{
  color: rgba(0,0,0,.45) !important;
}

html[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):focus,
html[data-theme="dark"] select:focus,
html[data-theme="dark"] textarea:focus{
  border-color: #E06A2C !important;
  box-shadow: 0 0 0 3px rgba(224,106,44,.25) !important;
}


/* =========================================================
   Dark theme — increase small text contrast
   ========================================================= */
html[data-theme="dark"] .small,
html[data-theme="dark"] .p,
html[data-theme="dark"] .muted{
  color: #fff7f2 !important;
  opacity: .92 !important;
}

/* =========================================================
   Dark theme — stronger table grid lines
   ========================================================= */
html[data-theme="dark"] .t th,
html[data-theme="dark"] .t td{
  border-bottom: 1px solid rgba(255,255,255,.18) !important;
}

html[data-theme="dark"] .t thead th{
  border-bottom: 2px solid rgba(255,255,255,.28) !important;
}

html[data-theme="dark"] .t{
  border: 1px solid rgba(255,255,255,.20) !important;
}

html[data-theme="dark"] .tablewrap{
  border: 1px solid rgba(255,255,255,.22) !important;
}



/* =========================================================
   GLOBAL MOBILE SAFETY
   ========================================================= */
html{max-width:100%; overflow-x:hidden;}
body{max-width:100%; overflow-x:visible;}

/* Tables wrap safely */
.tablewrap{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}
.t{
  width:100%;
  border-collapse:collapse;
}

/* =========================================================
   MOBILE LAYOUT REFACTOR
   ========================================================= */
@media(max-width: 980px){

  /* Force single column layout */
  .grid, .grid-2, .grid-3, .layout, .dashboard-grid{
    grid-template-columns: 1fr !important;
  }

  .card{
    border-radius:16px;
  }

  /* KPI cards stack cleanly */
  .kpi{
    width:100%;
  }

  /* Buttons full width */
  .btn{
    width:100%;
    justify-content:center;
  }

  /* Inputs full width */
  .input, select, textarea{
    width:100% !important;
  }

  /* Header compression */
  .topbar{
    padding:10px 12px !important;
  }

  .navlinks{
    display:none !important;
  }

}

/* =========================================================
   SMALL SCREEN TIGHTENING
   ========================================================= */
@media(max-width: 680px){

  .container{
    padding:0 14px !important;
  }

  h1{font-size:24px !important;}
  h2{font-size:20px !important;}

  .card{
    padding:16px !important;
  }

}



/* =========================================================
   MOBILE CUT-OFF FIXES
   ========================================================= */
*, *::before, *::after{ box-sizing:border-box; }

/* Only constrain media, not all elements */
img, svg, video, canvas{
  max-width:100%;
  height:auto;
}

/* Allow shadows and rounded corners to render fully */
.card{ overflow: visible; }

/* Prevent cards/grids from exceeding viewport due to padding */
@media(max-width: 980px){
  .card, .kpi, .tablewrap, .hero, .panel{
    width:100%;
    max-width:100%;
  }
  .container, .app-container{
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
  /* If any rows use negative margins, neutralize */
  .row{ margin-left:0 !important; margin-right:0 !important; }
}



/* =========================================================
   MOBILE SHADOW / CLIP FIX
   ========================================================= */
@media(max-width: 980px){
  /* give cards breathing room so shadows aren't clipped */
  .app-main{padding-left:10px !important; padding-right:10px !important;}
  .container, .app-container{padding-left:10px !important; padding-right:10px !important;}
  /* ensure grids can shrink */
  .grid, .dash-main-grid, .row{min-width:0;}
  .card, .kpi{margin-left:auto; margin-right:auto;}
}
@media(max-width: 420px){
  .app-main{padding-left:8px !important; padding-right:8px !important;}
  .container, .app-container{padding-left:8px !important; padding-right:8px !important;}
}



/* =========================================================
   MOBILE — stop any full-bleed overflow
   ========================================================= */
@media(max-width: 980px){
  .full-bleed{width:100% !important; margin-left:0 !important; margin-right:0 !important;}
  .app-main{overflow-x:hidden;}
}


/* =========================================================
   Dashboard — SaaS layout (desktop)
   ========================================================= */
.dash-head{padding: 18px;}
.dash-head-row{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap: 14px;
  flex-wrap: wrap;
}
.dash-head-actions{
  display:flex;
  gap: 10px;
  align-items:center;
  flex-wrap: wrap;
}
.kpi-card{
  border:1px solid var(--stroke);
  border-radius: 16px;
  padding: 14px;
  background: rgba(255,255,255,.06);
  min-width: 0;
}
html[data-theme="light"] .kpi-card{ background: rgba(0,0,0,.02); }
.kpi-num{font-size:18px; font-weight:900; letter-spacing:.1px;}
.kpi-lbl{font-size:12px; font-weight:800; margin-top:6px;}
.kpi-sub{margin-top:4px;}

.dash-layout{
  margin-top: 16px;
  display:grid;
  grid-template-columns: 1.6fr .9fr;
  gap: 16px;
  align-items:start;
  min-width:0;
}
.dash-main, .dash-side{display:grid; gap:16px; min-width:0;}
.stack{display:grid; gap:10px;}
.dash-pillrow{display:flex; gap:8px; flex-wrap:wrap; align-items:center; justify-content:flex-end;}
.dash-pillrow .pill{white-space:nowrap;}



/* =========================================================
   Dashboard — Mobile polish (does NOT change desktop)
   ========================================================= */
@media(max-width: 980px){

  .dash-head{padding:16px;}
  .dash-head-row{
    flex-direction: column;
    align-items:flex-start;
    gap: 12px;
  }
  .dash-head-actions{
    width: 100%;
    flex-direction: column;
    align-items: stretch;
  }
  .dash-head-actions .btn{ width:100%; justify-content:center; }

  /* KPI: swipe row like an app (scroll-snap) */
  .kpi-grid{
    display:grid;
    grid-auto-flow: column;
    grid-auto-columns: min(78vw, 320px);
    grid-template-columns: none;
    overflow-x:auto;
    overflow-y:hidden;
    gap: 12px;
    padding-bottom: 8px;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .kpi-grid::-webkit-scrollbar{ display:none; }
  .kpi-card{ scroll-snap-align: start; }

  /* Single column main layout */
  .dash-layout{ grid-template-columns: 1fr; gap: 14px; }
  .dash-main, .dash-side{ gap: 14px; }

  /* Make table sections feel like cards and avoid horizontal scroll */
  .tablewrap{ overflow: hidden; }
  .t{ display:block; width:100%; }
  .t thead{ display:none; }
  .t tbody{ display:block; }
  .t tr{
    display:block;
    border: 1px solid var(--stroke);
    border-radius: 14px;
    padding: 12px;
    margin: 10px 0;
    background: rgba(255,255,255,.04);
  }
  html[data-theme="light"] .t tr{ background: rgba(0,0,0,.02); }
  .t td{
    display:flex;
    justify-content:space-between;
    gap: 12px;
    padding: 6px 0;
    border-bottom: 1px solid var(--stroke);
  }
  .t td:last-child{ border-bottom:0; }

  /* label each cell using data-label attr if present, otherwise keep strong left */
  .t td::before{
    content: attr(data-label);
    font-size: 11px;
    letter-spacing: .14px;
    text-transform: uppercase;
    color: var(--muted2);
    font-weight: 800;
  }
}

/* very small phones: tighten padding */
@media(max-width: 420px){
  .dash-head{padding:14px;}
  .kpi-grid{ grid-auto-columns: 84vw; }
}



/* =========================================================
   MOBILE HOTFIX (Dashboard actions + nav)
   Desktop untouched (only <= 980px)
   ========================================================= */
@media (max-width: 980px){
  /* Ensure the desktop topnav never shows on phones (even if other CSS loads) */
  .topnav{display:none !important;}
  .app-topbar{flex-wrap:nowrap !important;}

  /* Dashboard hero actions: force readable button text */
  .dash-head-actions{width:100% !important;}
  .dash-head-actions .btn{
    width:100% !important;
    justify-content:center !important;
    font-size:14px !important;
    line-height:1.15 !important;
    padding-top:12px !important;
    padding-bottom:12px !important;
    white-space:normal !important;
    text-align:center !important;
  }
  .dash-head-actions .btn:not(.btn-outline){
    color: var(--btnTextOnAccent) !important;
  }
  .dash-head-actions .btn.btn-outline{
    color: var(--text) !important;
  }
  .dash-head-actions .badge{margin-left:8px !important;}

  /* Prevent any clipping/overlay that can hide text */
  .card.hero{overflow:visible !important;}
}

/* Ultra-small phones: slightly tighter */
@media (max-width: 420px){
  .dash-head-actions .btn{font-size:13px !important;}
}
/* ======================================
   MOBILE HEADER WIDTH FIX
   (does NOT affect desktop)
====================================== */
@media (max-width: 900px){

  /* prevent header overflow + horizontal scroll */
  .app-topbar{
    width:100%;
    max-width:100vw;
    overflow:hidden;
  }

  /* allow brand + actions to shrink properly */
  .app-brand{min-width:0; max-width: 44vw;}
  .app-brand .brand-mark{flex:0 0 auto;}
  .app-brand .brand-text{display:none;} /* keep header compact on mobile */

  .topbar-actions{
    min-width:0;
    gap:8px;
  }

  /* username should never push header wider than the phone */
  .userbox{
    min-width:0;
    max-width: 46vw;
    padding: 8px 10px;
  }
  .user-name{
    display:block;
    min-width:0;
    max-width: 30vw;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
    font-size: 12px;
    font-weight: 800;
  }

  /* logout: compact pill button (still readable) */
  .logout-btn{
    font-size:12px;
    padding:8px 10px;
    border-radius: 999px;
    border: 1px solid var(--stroke);
    background: rgba(255,255,255,.35);
    color: var(--text);
    white-space:nowrap;
  }
  html[data-theme="dark"] .logout-btn{
    background: rgba(255,255,255,.06);
    border-color: rgba(247,242,239,.12);
  }

  /* hard stop for any accidental x-overflow */
  body{ overflow-x:hidden; }

}



/* =========================================================
   MOBILE — Bottom navigation bar (app-style)
   Desktop untouched (only shows on <= 980px)
   ========================================================= */
.bottom-nav{display:none;}
@media (max-width: 980px){
  .bottom-nav{
    display:flex;
    position:fixed;
    left:10px;
    right:10px;
    bottom: calc(10px + env(safe-area-inset-bottom));
    z-index: 80;
    gap: 6px;
    padding: 10px 10px;
    border-radius: 20px;
    border: 1px solid var(--stroke);
    background: var(--header-bg);
    backdrop-filter: blur(12px);
    box-shadow: 0 20px 50px rgba(0,0,0,.22);
  }
  html[data-theme="dark"] .bottom-nav{ border-color: rgba(247,242,239,.12); }

  .bn-item{
    flex:1 1 0;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap: 6px;
    text-decoration:none;
    color: var(--muted);
    padding: 8px 6px;
    border-radius: 16px;
    border: 1px solid transparent;
    min-width: 0;
  }
  .bn-item .bn-ico{
    width:22px;
    height:22px;
    display:grid;
    place-items:center;
  }
  .bn-item .bn-ico svg{width:22px; height:22px; display:block;}
  .bn-item .bn-text{
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .1px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    max-width: 100%;
  }

  .bn-item.active{
    color: var(--text);
    border-color: var(--pill-bd);
    background:
      radial-gradient(140px 80px at 30% 10%, rgba(242,199,122,.18), transparent 60%),
      linear-gradient(90deg, rgba(197,84,30,.16), rgba(224,106,44,.10));
  }
  html[data-theme="dark"] .bn-item.active{
    background: rgba(255,255,255,.06);
    border-color: rgba(224,106,44,.30);
  }

  /* Give the page room so content doesn't hide behind the nav */
  body.is-auth .app-main{
    padding-bottom: calc(110px + env(safe-area-inset-bottom)) !important;
  }
}
@media (max-width: 420px){
  .bottom-nav{
    left:8px;
    right:8px;
    padding: 9px 9px;
  }
  .bn-item{padding: 8px 4px;}
  .bn-item .bn-text{font-size:10px;}
}
/* =========================================================
   Force normal links to stay red forever (incl. visited)
   Safe: excludes buttons/pills/nav components
   Place at VERY END of app.css
   ========================================================= */

a:not(.btn):not(.btn-primary):not(.btn-outline):not(.btn-ghost)
 :not(.topnav-link):not(.bn-item):not(.pill):not(.badge):link,
a:not(.btn):not(.btn-primary):not(.btn-outline):not(.btn-ghost)
 :not(.topnav-link):not(.bn-item):not(.pill):not(.badge):visited,
a:not(.btn):not(.btn-primary):not(.btn-outline):not(.btn-ghost)
 :not(.topnav-link):not(.bn-item):not(.pill):not(.badge):hover,
a:not(.btn):not(.btn-primary):not(.btn-outline):not(.btn-ghost)
 :not(.topnav-link):not(.bn-item):not(.pill):not(.badge):active{
  color: #B94C1A !important;      /* your “red/rust” */
  text-decoration: underline;
}
/* =========================================================
   FORCE content links to stay the same color (incl. visited)
   Put at VERY END of app.css
   ========================================================= */

/* Scope to main content so we don't touch nav/buttons */
.app-main a:link,
.app-main a:visited,
.app-main a:hover,
.app-main a:active{
  color:#B94C1A !important;          /* rust-red */
  text-decoration: underline;
}

/* Explicitly DO NOT change “button-like” links / nav */
.app-main a.btn,
.app-main a.btn-primary,
.app-main a.btn-outline,
.app-main a.btn-ghost,
.app-main a.topnav-link,
.app-main a.bn-item,
.app-main a.pill,
.app-main a.badge{
  color: inherit !important;
  text-decoration: none !important;
}

/* =========================================================
   Header nav refresh — grouped desktop nav + mobile drawer
   ========================================================= */
.topnav-desktop{
  display:flex;
  align-items:center;
  gap:16px;
  flex:1 1 auto;
  min-width:0;
  overflow:visible;
}
.nav-dropdown{
  position:relative;
}
.nav-dropdown summary{
  list-style:none;
  cursor:pointer;
}
.nav-dropdown summary::-webkit-details-marker{display:none;}
.nav-dropdown[open] .dropdown-trigger,
.nav-dropdown.is-active .dropdown-trigger{
  color: var(--text) !important;
}
.nav-dropdown[open] .dropdown-trigger::after,
.nav-dropdown.is-active .dropdown-trigger::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-10px;
  height:3px;
  border-radius:999px;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
}
.dropdown-trigger{padding-right:16px !important;}
.dropdown-trigger::before{
  content:"▾";
  position:absolute;
  right:0;
  top:50%;
  transform:translateY(-50%);
  font-size:11px;
  opacity:.8;
}
.dropdown-menu{
  position:absolute;
  top:calc(100% + 16px);
  left:0;
  min-width:220px;
  display:grid;
  gap:6px;
  padding:12px;
  border-radius:16px;
  border:1px solid var(--stroke);
  background:var(--card);
  box-shadow:0 18px 48px rgba(0,0,0,.18);
}
html[data-theme="dark"] .dropdown-menu{border-color: rgba(247,242,239,.12); background:#17120f;}
.dropdown-link{
  display:flex;
  align-items:center;
  justify-content:space-between;
  text-decoration:none;
  padding:10px 12px;
  border-radius:12px;
  color:var(--text) !important;
  font-weight:700;
}
.dropdown-link:hover,
.dropdown-link.active{
  background:rgba(197,84,30,.10);
}
html[data-theme="dark"] .dropdown-link:hover,
html[data-theme="dark"] .dropdown-link.active{
  background:rgba(255,255,255,.06);
}
.burger-btn{display:none;}
.mobile-drawer,
.mobile-drawer-backdrop{display:none;}

@media (min-width: 981px){
  .topbar-actions{gap:12px;}
  .userbox{max-width:160px;}
  .user-name{
    display:block;
    max-width:96px;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
  }
  .logout-btn{
    white-space:nowrap;
    padding:9px 14px;
    border-radius:999px;
    border:1px solid var(--stroke);
    background:rgba(255,255,255,.35);
    color:var(--text);
    font-weight:800;
  }
  html[data-theme="dark"] .logout-btn{background:rgba(255,255,255,.06); border-color:rgba(247,242,239,.12);}
}

@media (max-width: 980px){
  .topnav-desktop,
  .userbox,
  .topbar-actions form{display:none !important;}
  .burger-btn{display:grid;}
  .mobile-drawer-backdrop{
    display:block;
    position:fixed;
    inset:0;
    background:rgba(15,23,42,.38);
    opacity:0;
    pointer-events:none;
    transition:opacity .18s ease;
    z-index:88;
  }
  .mobile-drawer{
    display:flex;
    flex-direction:column;
    gap:16px;
    position:fixed;
    top:0;
    right:0;
    width:min(360px, 88vw);
    height:100vh;
    padding:18px 16px calc(24px + env(safe-area-inset-bottom));
    background:var(--card);
    border-left:1px solid var(--stroke);
    box-shadow:-20px 0 44px rgba(0,0,0,.20);
    transform:translateX(100%);
    transition:transform .2s ease;
    z-index:89;
    overflow:auto;
  }
  html[data-theme="dark"] .mobile-drawer{background:#17120f; border-left-color:rgba(247,242,239,.12);}
  body.mobile-menu-open .mobile-drawer{transform:translateX(0);}
  body.mobile-menu-open .mobile-drawer-backdrop{opacity:1; pointer-events:auto;}
  .mobile-drawer-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding-bottom:12px;
    border-bottom:1px solid var(--stroke);
  }
  .mobile-drawer-group{display:grid; gap:8px;}
  .mobile-drawer-title{
    font-size:12px;
    font-weight:900;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--muted);
  }
  .mobile-drawer-links{display:grid; gap:8px;}
  .mobile-drawer-link{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:12px 14px;
    border-radius:14px;
    border:1px solid var(--stroke);
    text-decoration:none;
    color:var(--text) !important;
    font-weight:800;
    background:rgba(255,255,255,.35);
  }
  html[data-theme="dark"] .mobile-drawer-link{background:rgba(255,255,255,.05); border-color:rgba(247,242,239,.12);}
  .mobile-drawer-link.active{
    border-color:rgba(224,106,44,.34);
    background:rgba(197,84,30,.10);
  }
  .mobile-logout-form{margin-top:4px;}
  .mobile-logout-btn{width:100%; justify-content:center;}
}


/* -------------------------
   MOBILE QUICK NAV + FAB
   ------------------------- */
.mobile-bottom-nav,
.l2m-fab-mobile{display:none;}

@media (max-width: 980px){
  body.is-auth{padding-bottom:92px;}

  .mobile-bottom-nav{
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    z-index:70;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:0;
    padding:10px max(10px, env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
    background:rgba(255,255,255,.92);
    backdrop-filter:blur(16px);
    border-top:1px solid var(--stroke);
    box-shadow:0 -14px 34px rgba(17,12,9,.08);
  }
  html[data-theme="dark"] .mobile-bottom-nav{
    background:rgba(14,8,6,.94);
    border-top-color:rgba(255,247,242,.10);
    box-shadow:0 -18px 40px rgba(0,0,0,.35);
  }

  .mobile-bottom-link{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:4px;
    min-height:56px;
    text-decoration:none;
    color:var(--muted);
    font-size:11px;
    font-weight:700;
    border-radius:16px;
    margin:0 4px;
  }
  .mobile-bottom-link.active{
    color:var(--accent);
    background:var(--pill-bg);
  }
  .mobile-bottom-icon{
    font-size:18px;
    line-height:1;
  }

  .l2m-fab-mobile{
    display:block;
    position:fixed;
    right:16px;
    bottom:86px;
    z-index:71;
  }
  .l2m-fab-btn{
    width:58px;
    height:58px;
    border:0;
    border-radius:999px;
    background:linear-gradient(135deg, var(--accent), var(--accent2));
    color:var(--btnTextOnAccent);
    font-size:32px;
    line-height:1;
    box-shadow:0 18px 38px rgba(197,84,30,.28);
    cursor:pointer;
  }
  .l2m-fab-menu{
    position:absolute;
    right:0;
    bottom:68px;
    min-width:210px;
    box-shadow:var(--shadow2);
  }
  .l2m-fab-menu-body{
    display:grid;
    gap:8px;
  }

  .app-footer{padding-bottom:96px;}
}

@media (min-width: 981px){
  .mobile-bottom-nav,
  .l2m-fab-mobile{display:none !important;}
}
.topbar-icon-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  min-width:40px;
  padding-left:10px;
  padding-right:10px;
}

.topbar-icon-btn span[aria-hidden="true"]{
  font-size:16px;
  line-height:1;
}

@media (max-width: 820px){
  .topbar-icon-btn{
    min-width:38px;
    padding:8px 10px;
  }

  .topbar-icon-btn .topbar-btn-text{
    display:none;
  }
}