/* =========================================================
   EasyLeasey — Bold Rusty Product UI (cleaned)
   ========================================================= */

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

  --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-bg:rgba(255,255,255,.62);
  --header-bd:rgba(255,255,255,.45);

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

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

html[data-theme="dark"]{
  --bg:#0d0705;
  --bg2:#0a0504;
  --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);

  --accent:#E06A2C;
  --accent2:#F08A3C;
  --btnTextOnAccent:#1a0c07;

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

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

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

/* -------------------------
   2) BASE
   ------------------------- */
*,
*::before,
*::after{box-sizing:border-box}

html,body{
  height:100%;
  max-width:100%;
  overflow-x:hidden;
}

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));
}

html[data-theme="dark"] body{
  background:#E06A2C;
}

img, svg, video, canvas{
  max-width:100%;
  height:auto;
}

/* -------------------------
   3) 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;
  flex-wrap:nowrap;
  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:46px;
  height:46px;
  min-width:46px;
  display:block;
  border-radius:12px;
  border:0;
  background:transparent url('/assets/img/brand/easyleasey-icon.jpg') center / contain no-repeat;
  box-shadow:none;
  overflow:hidden;
  text-indent:-9999px;
}

.brand-text strong{display:block; font-size:14px; letter-spacing:.2px}
.brand-text span{display:block; font-size:12px; color:var(--muted)}

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

.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,.05);
  border-color:rgba(255,247,242,.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,.05);
  border-color:rgba(255,247,242,.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);
}

/* -------------------------
   4) LAYOUT HELPERS
   ------------------------- */
.app-main{
  grid-area:main;
  padding:22px 18px 42px;
  overflow-x:hidden;
}

.container{
  max-width:1200px;
  margin:0 auto;
}

.app-container{
  padding:0 2px;
}

.full-bleed{
  width:100%;
  margin-left:0;
  margin-right:0;
}

.grid{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:16px;
}

/* -------------------------
   5) 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);
}

/* -------------------------
   6) CARDS
   ------------------------- */
.card{
  background:var(--panel);
  border:1px solid var(--stroke);
  border-radius:var(--r);
  box-shadow:var(--shadow2);
  padding:18px;
  overflow:visible;
}

.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);
}

.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;
}

/* -------------------------
   7) BUTTONS + LINKS
   ------------------------- */
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;
}

.app-main a:link,
.app-main a:visited,
.app-main a:hover,
.app-main a:active{
  color:#B94C1A !important;
  text-decoration:underline;
}

.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;
}

.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;
  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-primary{
  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);
}

.btn:hover{
  transform:translateY(-1px);
  filter:brightness(1.02);
}

.btn:active{
  transform:translateY(0);
}

.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;
}

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

.link-btn{
  background:none;
  border:none;
  padding:0;
  margin:0;
  color:var(--accent);
  font-weight:800;
  cursor:pointer;
}

/* -------------------------
   8) FORMS
   ------------------------- */
.form-stack{
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-top:14px;
}

.row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}

.input,
input,
select,
textarea{
  width:100%;
  padding:12px 12px;
  border-radius:0 !important;
  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,
html[data-theme="dark"] select.input,
html[data-theme="dark"] textarea.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::placeholder,
html[data-theme="dark"] textarea::placeholder{
  color:rgba(0,0,0,.45) !important;
}

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

html[data-theme="dark"] input: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;
}

.form-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}

/* -------------------------
   9) TABLES
   ------------------------- */
.tablewrap{
  border:1px solid var(--stroke);
  border-radius:var(--r2);
  overflow:auto;
  background:var(--panel);
  box-shadow:var(--shadow2);
  -webkit-overflow-scrolling:touch;
}

.t{
  width:100%;
  border-collapse:collapse;
}

.t th,
.t td{
  padding:12px 12px;
  border-bottom:1px solid var(--stroke);
  text-align:left;
  line-height:1.35;
}

.t td{
  font-size:13px;
  vertical-align:top;
}

.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);
}

.t-fixed{table-layout:fixed}

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

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

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

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

.t tr:hover td{
  background:rgba(197,84,30,.06);
}

/* -------------------------
   10) STATUS PILLS
   ------------------------- */
.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); }

/* -------------------------
   11) 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;
}

.page-tip{
  position:sticky;
  top:96px;
}

.stack{
  display:grid;
  gap:10px;
}

.right{text-align:right}
.nowrap{white-space:nowrap}

.truncate{
  max-width:1px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* -------------------------
   12) DASHBOARD
   ------------------------- */
.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);
}

.kpis{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px, 280px));
  justify-content:center;
  gap:12px;
  margin-top:14px;
}

.kpi-grid{
  margin-top:14px;
  display:grid;
  grid-template-columns:repeat(3, minmax(220px, 1fr));
  gap:12px;
}

.kpi,
.kpi-card{
  width:100%;
  min-width:0;
}

.kpi{
  max-width:340px;
  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));
}

.kpi-card{
  border:1px solid var(--stroke);
  border-radius:16px;
  padding:14px;
  background:rgba(255,255,255,.06);
}

html[data-theme="light"] .kpi-card{
  background:rgba(0,0,0,.02);
}

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;
}

.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-head{padding:18px}
.dash-head-inner,
.dash-head-row{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
}

.dash-actions,
.dash-head-actions{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}

.dash-layout{
  margin-top:16px;
  display:grid;
  grid-template-columns:1.6fr .9fr;
  gap:16px;
  align-items:start;
  min-width:0;
}

.dash-main-grid{
  display:grid;
  grid-template-columns:1.4fr .9fr;
  gap:16px;
  align-items:start;
}

.dash-main,
.dash-side{
  display:grid;
  gap:16px;
  min-width:0;
}

.dash-pillrow{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:center;
  justify-content:flex-end;
}

.dash-pillrow .pill{
  white-space:nowrap;
}

/* -------------------------
   13) DEMO / ADMIN HELPERS
   ------------------------- */
.demo-filters{
  display:grid;
  grid-template-columns:1fr auto;
  gap:14px;
  align-items:end;
}

.demo-filter-right{
  display:flex;
  gap:12px;
  align-items:end;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.demo-actions-inline,
.demo-invite-actions{
  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}
.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}
.subrow td{border-bottom:none}
.subcell{padding-top:0; padding-bottom:14px; opacity:.85}

/* -------------------------
   14) 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}

/* -------------------------
   15) NAV / DROPDOWNS
   ------------------------- */
.topnav{
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:nowrap;
  overflow-x:auto;
  white-space:nowrap;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  min-width:0;
}

.topnav::-webkit-scrollbar{display:none}

.topnav-link{
  text-decoration:none;
  background:transparent !important;
  border:none !important;
  padding:8px 2px !important;
  border-radius:0 !important;
  font-weight:800;
  font-size:13px;
  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));
}

html[data-theme="dark"] .topnav-link{
  color:rgba(255,247,242,.72) !important;
}

html[data-theme="dark"] .topnav-link.active{
  color:var(--text) !important;
}

.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(--panel);
  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);
}

/* -------------------------
   16) MOBILE DRAWER / NAV
   ------------------------- */
.burger-btn{display:none}
.mobile-drawer,
.mobile-drawer-backdrop,
.mobile-bottom-nav,
.l2m-fab-mobile,
.bottom-nav{display:none}

.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;
}

/* -------------------------
   17) MESSAGES
   ------------------------- */
.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);
}

.ok{
  margin-top:10px;
  padding:12px 12px;
  border-radius:16px;
  border:1px solid rgba(34,197,94,.28);
  background:rgba(34,197,94,.10);
  color:var(--text);
}

.mt-2{margin-top:10px}
.mt-3{margin-top:16px}

/* -------------------------
   18) AUTH PAGES — SINGLE COLUMN ONLY
   ------------------------- */
.auth-shell{
  min-height:calc(100vh - 120px);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:32px 16px;
  width:100%;
}

.auth-container{
  width:100%;
  max-width:520px;
  margin:0 auto;
}

.auth-panel{
  display:none !important;
}

.auth-card-wrap{
  width:100%;
  max-width:520px;
  margin:0 auto;
  display:block;
}

.auth-card{
  width:100%;
  max-width:520px;
  margin:0 auto;
  padding:24px;
  border-radius:24px;
  background:var(--panel);
  border:1px solid var(--stroke);
  box-shadow:var(--shadow);
}

html[data-theme="dark"] .auth-card{
  background:rgba(29,18,13,.92);
  border-color:rgba(247,242,239,.10);
}

.auth-links{
  margin-top:10px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.hidden-field{
  position:absolute;
  left:-10000px;
  top:auto;
  width:1px;
  height:1px;
  overflow:hidden;
}

.turnstile,
.cf-turnstile{
  max-width:100%;
  overflow:hidden;
}

/* -------------------------
   19) MOBILE
   ------------------------- */
@media (max-width: 980px){
  .topnav{display:none !important;}
  .topnav-desktop,
  .userbox,
  .topbar-actions form{display:none !important;}
  .app-brand{min-width:auto;}
  .app-main{padding:16px 14px 34px;}
  .page-split,
  .dash-main-grid,
  .dash-layout,
  .demo-filters{
    grid-template-columns:1fr;
  }
  .page-tip{position:static}
  .demo-filter-right{justify-content:flex-start}
  .demo-invite-cell{align-items:flex-start}
  .kpi-grid{grid-template-columns:1fr}
  .kpis{grid-template-columns:1fr}
  .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(--panel);
    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}

  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 (max-width: 820px){
  .topbar-icon-btn{
    min-width:38px;
    padding:8px 10px;
  }

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

@media (max-width: 740px){
  .app-container{padding:0}
}

@media (max-width: 680px){
  .container{padding:0 14px !important}
  h1{font-size:24px !important}
  h2{font-size:20px !important}
  .card{padding:16px !important}
}

@media (max-width: 640px){
  .auth-shell{
    padding:18px 10px;
    min-height:auto;
  }

  .auth-container,
  .auth-card-wrap,
  .auth-card{
    max-width:100%;
  }

  .auth-card{
    padding:18px;
    border-radius:20px;
  }

  .row{
    grid-template-columns:1fr;
  }

  .form-actions{
    flex-direction:column;
    align-items:stretch;
  }

  .form-actions .btn{
    width:100%;
    justify-content:center;
  }
}

@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}
  .dash-head{padding:14px}
  .kpi-grid{grid-auto-columns:84vw}
  .dash-head-actions .btn{font-size:13px !important}
  .bottom-nav{
    left:8px;
    right:8px;
    padding:9px 9px;
  }
  .bn-item{padding:8px 4px}
  .bn-item .bn-text{font-size:10px}
}
.demo-login-btn {
  width: 100%;
  justify-content: center;
  background: #2563eb !important;
  color: #ffffff !important;
  border: 1px solid #3b82f6 !important;
  font-weight: 700;
  padding: 10px 16px;
  border-radius: 6px;
  display: block;
  text-align: center;
  margin-top: 4px;
  box-shadow: 0 10px 24px rgba(37, 99, 235, .35);
}

.demo-login-btn:hover {
  background: #1d4ed8 !important;
  color: #ffffff !important;
}