/* =============================================================================
   Prime Dumpster — Hidden-Gem Operator Console
   Design system implemented straight from the brand guidelines.
   ========================================================================== */

:root {
  /* Primary */
  --forest:   #1E3226;   /* primary dark — headers, dark sections, sidebar */
  --prime:    #016940;   /* brand green — CTAs, icons, links, accents */
  --night:    #0F1F18;   /* deep night green — footer */
  /* Accent */
  --gold:     #FDC400;   /* primary CTA, stat numbers */
  --amber:    #FFC107;   /* hover */
  --gold-dk:  #E5B000;   /* gold button hover */
  /* Neutral */
  --body:     #737C76;   /* body text */
  --ink:      #333333;   /* subheads, nav */
  --gray-bg:  #F3F3F3;   /* cards, alt sections */
  --offwhite: #F5F5F5;   /* main content bg, soft cards */
  --white:    #FFFFFF;
  --border:   #C1C1C1;
  --mint:     #E6F0EC;   /* soft bg behind green icons */
  --sage:     #A5B9AD;   /* secondary accents */
  --danger:   #CF2E2E;

  --maxw: 1200px;
  /* 8px spacing scale */
  --xs:4px; --sm:8px; --md:16px; --lg:24px; --xl:40px; --xxl:64px; --xxxl:96px;

  --shadow-card: 0 4px 20px rgba(0,0,0,.10);
  --shadow-nav:  0 2px 14px rgba(0,0,0,.06);
  --ease: cubic-bezier(.4,0,.2,1);
}

/* ---- reset ---- */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:"Catamaran",sans-serif;
  font-size:16px;font-weight:500;line-height:32px;
  color:var(--body);background:var(--offwhite);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
h1,h2,h3,h4{color:var(--forest);font-weight:700;line-height:1.1}
a{color:var(--prime);text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none}
.eyebrow{
  font-size:14px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--gold);line-height:20px;
}

/* =============================================================================
   App gating + login
   ========================================================================== */
#app{display:none}
body.authed #app{display:block}
body.authed #login{display:none}

.login{
  position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;
  padding:var(--lg);
  background:radial-gradient(1100px 600px at 70% -10%, #1b3a2a 0%, var(--forest) 38%, var(--night) 100%);
}
.login::before{content:"";position:absolute;inset:0;opacity:.5;
  background:radial-gradient(420px 420px at 18% 88%, rgba(253,196,0,.10), transparent 70%)}
.login-card{position:relative;width:404px;max-width:100%;background:#fff;padding:40px 36px 28px;
  border-radius:14px;box-shadow:0 30px 80px rgba(0,0,0,.45);text-align:center;
  animation:rise .5s var(--ease)}
.login-card .logo{margin-bottom:22px}
.login-eyebrow{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--prime);margin-top:4px}
.login-card h1{font-size:30px;margin:10px 0 4px}
.login-sub{font-size:14px;color:var(--body);margin-bottom:24px}
.login-card form{text-align:left;display:flex;flex-direction:column;gap:var(--md)}
.lf{display:flex;flex-direction:column;gap:6px}
.lf label{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--body)}
.lf input{padding:13px 14px;border:1px solid var(--border);border-radius:8px;font-family:inherit;
  font-size:16px;color:var(--ink);background:#fff;transition:all .2s var(--ease)}
.lf input:focus{outline:none;border-color:var(--prime);box-shadow:0 0 0 3px rgba(1,105,63,.15)}
.login-err{color:var(--danger);font-size:14px;font-weight:600;min-height:18px;text-align:center}
.login-foot{margin-top:22px;font-size:12px;color:var(--sage)}
.ub-logout{display:grid;place-items:center;width:28px;height:28px;border-radius:6px;color:var(--sage);transition:all .2s}
.ub-logout svg{width:16px;height:16px}
.ub-logout:hover{background:rgba(255,255,255,.1);color:#fff}

/* =============================================================================
   Utility strip — internal system context
   ========================================================================== */
.utilbar{
  height:38px;background:var(--night);color:var(--sage);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 var(--xl);font-size:13px;font-weight:600;
}
.ub-left{display:flex;align-items:center;gap:12px;color:#fff}
.ub-tag{background:var(--prime);color:#fff;font-size:10px;font-weight:800;
  letter-spacing:.12em;padding:3px 7px;border-radius:4px}
.ub-right{display:flex;align-items:center;gap:14px}
.ub-sep{width:1px;height:16px;background:rgba(255,255,255,.15)}
.ub-user{display:flex;align-items:center;gap:8px;color:#fff}
.ub-avatar{width:24px;height:24px;border-radius:50%;background:var(--prime);color:#fff;
  font-size:11px;font-weight:800;display:grid;place-items:center}
.src-chip{display:inline-flex;align-items:center;gap:7px;font-weight:700;color:#fff}
.src-chip i{width:8px;height:8px;border-radius:50%;background:var(--sage);box-shadow:0 0 0 3px rgba(165,185,173,.2)}
.src-chip.live i{background:var(--gold);box-shadow:0 0 0 3px rgba(253,196,0,.25)}
.src-chip.demo i{background:var(--sage)}
@media(max-width:760px){.utilbar{padding:0 var(--md);font-size:12px}.ub-right{gap:9px}#lastRun{display:none}}

/* =============================================================================
   2. Nav header
   ========================================================================== */
.header{
  position:sticky;top:0;z-index:40;background:var(--white);
  box-shadow:var(--shadow-nav);
  display:flex;align-items:center;justify-content:space-between;
  padding:var(--md) var(--xl);
}
.header-right{display:flex;align-items:center;gap:var(--lg)}
.phone-pill{display:flex;align-items:center;gap:var(--sm)}
.phone-circle{
  width:44px;height:44px;border-radius:50%;background:var(--mint);
  display:grid;place-items:center;
}
.phone-circle svg{width:20px;height:20px;stroke:var(--prime);fill:none}
.phone-num{font-weight:800;color:var(--forest);font-size:16px;line-height:1.1}
.phone-num small{display:block;font-size:12px;font-weight:600;color:var(--body)}

/* ---- logo ---- */
.logo{display:flex;flex-direction:column;line-height:.9;user-select:none}
.logo-mark{display:flex;align-items:flex-end;gap:3px}
.logo-mark .word{font-family:"Roboto",sans-serif;font-weight:800;font-size:30px;
  letter-spacing:-.01em;color:var(--forest)}
.logo .e-block{display:inline-flex;flex-direction:column;gap:3px;padding-bottom:5px}
.logo .e-block i{display:block;width:20px;height:5px;background:var(--prime);border-radius:1px}
.logo-sub{font-size:10px;font-weight:600;letter-spacing:.34em;text-transform:lowercase;
  color:var(--body);margin-top:3px;padding-left:2px}
.logo.reversed .word{color:var(--white)}
.logo.reversed .logo-sub{color:var(--sage)}

/* =============================================================================
   Layout: sidebar + main
   ========================================================================== */
.shell{display:grid;grid-template-columns:248px 1fr;min-height:calc(100vh - 114px)}
.sidebar{
  background:var(--forest);color:var(--white);padding:var(--lg) 0;
  position:sticky;top:114px;height:calc(100vh - 114px);overflow:auto;
  display:flex;flex-direction:column;
}
.side-foot{margin-top:auto;padding:var(--lg);border-top:1px solid rgba(255,255,255,.08)}
.side-foot-k{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--sage)}
.side-foot-v{font-size:28px;font-weight:800;color:var(--gold);line-height:1.2}
.side-section{padding:0 var(--lg);margin-bottom:var(--xs)}
.side-label{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--sage);padding:var(--lg) var(--lg) var(--sm)}
.nav-item{
  display:flex;align-items:center;gap:12px;width:100%;text-align:left;
  padding:13px var(--lg);color:rgba(255,255,255,.82);font-weight:600;font-size:15px;
  border-left:3px solid transparent;transition:all .2s var(--ease);
}
.nav-item svg{width:20px;height:20px;stroke:currentColor;fill:none;flex:none}
.nav-item:hover{background:rgba(255,255,255,.06);color:#fff}
.nav-item.active{color:#fff;border-left-color:var(--gold);background:rgba(253,196,0,.08)}
.nav-item.active svg{stroke:var(--gold)}

.main{padding:var(--xl) var(--xxl);max-width:1320px}
@media(max-width:1100px){
  .shell{grid-template-columns:1fr}
  .sidebar{position:static;height:auto;flex-direction:row;display:flex;overflow-x:auto}
  .side-label{display:none}.side-section{display:flex;gap:var(--xs)}
  .main{padding:var(--lg)}
}

/* =============================================================================
   Buttons
   ========================================================================== */
.btn{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:16px;
  padding:14px 28px;border-radius:7px;transition:all .25s var(--ease);white-space:nowrap}
.btn-gold{background:var(--gold);color:var(--forest)}
.btn-gold:hover{background:var(--gold-dk);box-shadow:0 6px 18px rgba(253,196,0,.35)}
.btn-dark{background:var(--forest);color:#fff}
.btn-dark:hover{background:var(--prime)}
.btn-ghost{background:transparent;color:var(--prime);border:1.5px solid var(--prime)}
.btn-ghost:hover{background:var(--prime);color:#fff}
.btn-sm{padding:9px 16px;font-size:14px}

/* =============================================================================
   Page header / eyebrow
   ========================================================================== */
.page-head{margin-bottom:var(--xl);opacity:0;animation:rise .6s var(--ease) forwards}
.page-head h1{font-size:44px;line-height:1.05;margin:6px 0 10px}
.page-head h1 .accent{color:var(--prime)}
.page-head p{max-width:680px}

/* =============================================================================
   Stat counter band (dark green, golden numbers)
   ========================================================================== */
.stat-band{
  background:var(--forest);border-radius:0;padding:var(--xl) var(--xl);
  display:grid;grid-template-columns:repeat(4,1fr);gap:var(--xl);
  margin-bottom:var(--xl);position:relative;overflow:hidden;
}
.stat-band::after{content:"";position:absolute;right:-60px;top:-60px;width:240px;height:240px;
  background:radial-gradient(circle,rgba(253,196,0,.10),transparent 70%)}
.stat{position:relative}
.stat .num{font-size:52px;font-weight:800;color:var(--gold);line-height:1.05;letter-spacing:-.02em}
.stat .lbl{font-size:18px;font-weight:700;color:#fff;margin-top:2px}
.stat .desc{font-size:14px;font-weight:400;color:var(--sage);margin-top:2px;line-height:20px}
@media(max-width:900px){.stat-band{grid-template-columns:repeat(2,1fr);gap:var(--lg);padding:var(--lg)}.stat .num{font-size:40px}}

/* =============================================================================
   Cards
   ========================================================================== */
.grid{display:grid;gap:var(--lg)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-2{grid-template-columns:repeat(2,1fr)}
@media(max-width:900px){.grid-3{grid-template-columns:1fr}.grid-2{grid-template-columns:1fr}}

.card{background:var(--gray-bg);padding:var(--lg);border-radius:0;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.card.panel{background:#fff;border:1px solid #ededed}
.card-hover:hover{transform:translateY(-2px);box-shadow:var(--shadow-card)}
.card h3{font-family:"Roboto",sans-serif;font-weight:800;font-size:22px;margin-bottom:6px}
.card .muted{font-size:14px;color:var(--body)}

.section-title{display:flex;align-items:center;justify-content:space-between;margin:var(--xxl) 0 var(--lg)}
.section-title h2{font-size:30px}
.section-title:first-of-type{margin-top:0}

/* icon circle */
.icon-circle{width:64px;height:64px;border-radius:50%;background:var(--mint);
  display:grid;place-items:center;margin-bottom:var(--md)}
.icon-circle svg{width:30px;height:30px;stroke:var(--prime);fill:none;stroke-width:1.6}

/* =============================================================================
   Pipeline funnel
   ========================================================================== */
.funnel{display:flex;flex-direction:column;gap:14px}
.funnel-row{display:grid;grid-template-columns:200px 1fr 96px;align-items:center;gap:var(--md)}
.funnel-row .fname{font-weight:700;color:var(--ink);font-size:15px}
.funnel-row .fname small{display:block;font-weight:500;color:var(--body);font-size:12px}
.funnel-bar{height:36px;background:#eaeaea;border-radius:5px;overflow:hidden;position:relative}
.funnel-bar > span{display:block;height:100%;border-radius:5px;
  background:linear-gradient(90deg,var(--prime),var(--forest));width:0;transition:width 1s var(--ease)}
.funnel-row .fval{font-weight:800;color:var(--forest);text-align:right;font-size:18px}
.funnel-row.drop .funnel-bar>span{background:linear-gradient(90deg,#b9c2bc,#8c988f)}

/* =============================================================================
   Chips / badges
   ========================================================================== */
.chip{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;
  padding:5px 11px;border-radius:6px;letter-spacing:.02em}
.chip-green{background:var(--prime);color:#fff}
.chip-yellow{background:var(--gold);color:var(--forest)}
.chip-mint{background:var(--mint);color:var(--prime);border:1px solid rgba(1,105,64,.25)}
.chip-pending{background:#fff4cf;color:#8a6d00;border:1px solid #f0d98a}
.tag{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;
  padding:4px 10px;border-radius:6px;background:var(--mint);color:var(--prime);
  border:1px solid rgba(1,105,64,.2);margin:2px 4px 2px 0}
.tag svg{width:13px;height:13px;stroke:var(--prime);fill:none}

/* =============================================================================
   Search + filters
   ========================================================================== */
.toolbar{display:flex;gap:var(--md);align-items:center;flex-wrap:wrap;margin-bottom:var(--lg)}
.search{position:relative;flex:1;min-width:280px}
.search svg{position:absolute;left:16px;top:50%;transform:translateY(-50%);
  width:20px;height:20px;stroke:var(--body);fill:none}
.search input{width:100%;padding:14px 16px 14px 46px;border:1px solid var(--border);
  border-radius:7px;font-family:inherit;font-size:16px;color:var(--ink);background:#fff;
  transition:all .2s var(--ease)}
.search input::placeholder{color:var(--sage)}
.search input:focus{outline:none;border-color:var(--prime);box-shadow:0 0 0 3px rgba(1,105,63,.15)}
select.filter{padding:13px 38px 13px 14px;border:1px solid var(--border);border-radius:7px;
  font-family:inherit;font-size:15px;font-weight:600;color:var(--ink);background:#fff;
  appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23016940' stroke-width='2'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat:no-repeat;background-position:right 12px center;background-size:18px}
select.filter:focus{outline:none;border-color:var(--prime);box-shadow:0 0 0 3px rgba(1,105,63,.15)}

/* =============================================================================
   Top-gem cards
   ========================================================================== */
.gem-card{background:#fff;border:1px solid #ececec;padding:var(--lg);cursor:pointer;position:relative}
.gem-card .rankpill{position:absolute;top:0;left:0;background:var(--gold);color:var(--forest);
  font-weight:800;font-size:13px;padding:4px 12px}
.gem-card h4{font-family:"Roboto",sans-serif;font-weight:800;font-size:19px;margin:18px 0 2px;color:var(--forest)}
.gem-card .loc{font-size:13px;color:var(--body);margin-bottom:var(--md)}
.gem-card .scorerow{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.gem-card .learn{margin-top:var(--md);font-size:13px;font-weight:700;text-transform:uppercase;
  letter-spacing:.06em;color:var(--prime);display:inline-flex;align-items:center;gap:5px}

/* hidden-gem meter */
.meter{flex:1;height:8px;background:#ececec;border-radius:5px;overflow:hidden}
.meter > span{display:block;height:100%;background:var(--prime);border-radius:5px}
.meter.gold > span{background:var(--gold)}
.meter-val{font-weight:800;color:var(--forest);font-size:14px;min-width:30px;text-align:right}

/* =============================================================================
   Data table
   ========================================================================== */
.table-wrap{background:#fff;border:1px solid #ececec;overflow:hidden}
table{width:100%;border-collapse:collapse}
thead th{text-align:left;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--body);padding:16px var(--lg);border-bottom:1px solid #ececec;background:#fff}
tbody td{padding:16px var(--lg);font-size:15px;color:var(--ink);border-bottom:1px solid #f1f1f1;vertical-align:middle}
tbody tr{cursor:pointer;transition:background .15s var(--ease)}
tbody tr:nth-child(even){background:var(--gray-bg)}
tbody tr:hover{background:var(--mint)}
.opname{font-weight:700;color:var(--forest);font-size:16px;line-height:1.2}
.opname small{display:block;font-weight:500;color:var(--body);font-size:13px}
td .meter-inline{display:flex;align-items:center;gap:8px;min-width:140px}

/* =============================================================================
   Full Excel-schema table (Operators) — horizontally scrollable
   ========================================================================== */
.table-wrap.xls{overflow-x:auto}
.xls-table{min-width:2200px;table-layout:auto}
.xls-table th,.xls-table td{white-space:nowrap;font-size:13px;padding:13px 16px;
  max-width:300px;overflow:hidden;text-overflow:ellipsis}
.xls-table thead th{position:sticky;top:0;background:#fff;z-index:1}
.xls-table td:first-child,.xls-table th:first-child{position:sticky;left:0;background:inherit;
  font-weight:700;box-shadow:1px 0 0 #ececec}
.xls-table tbody tr:nth-child(even) td:first-child{background:var(--gray-bg)}
.xls-table tbody tr:hover td:first-child{background:var(--mint)}

/* =============================================================================
   Coverage list
   ========================================================================== */
.gap-flag{color:var(--danger);font-weight:800;font-size:12px;letter-spacing:.04em}

/* =============================================================================
   Detail drawer
   ========================================================================== */
.scrim{position:fixed;inset:0;background:rgba(15,31,24,.45);backdrop-filter:blur(3px);
  opacity:0;pointer-events:none;transition:opacity .3s var(--ease);z-index:60}
.scrim.open{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;right:0;height:100vh;width:520px;max-width:94vw;background:#fff;
  z-index:70;transform:translateX(100%);transition:transform .35s var(--ease);
  display:flex;flex-direction:column;box-shadow:-12px 0 40px rgba(0,0,0,.2)}
.drawer.open{transform:translateX(0)}
.drawer-head{background:var(--forest);color:#fff;padding:var(--lg) var(--lg) var(--xl)}
.drawer-head .close{position:absolute;top:18px;right:18px;color:#fff;width:34px;height:34px;
  border-radius:50%;display:grid;place-items:center;transition:background .2s}
.drawer-head .close:hover{background:rgba(255,255,255,.15)}
.drawer-head h2{color:#fff;font-family:"Roboto",sans-serif;font-weight:800;font-size:26px;padding-right:40px}
.drawer-head .sub{color:var(--sage);font-size:14px;margin-top:2px}
.drawer-body{padding:var(--lg);overflow:auto;flex:1}
.dsec{margin-bottom:var(--xl)}
.dsec .eyebrow{margin-bottom:10px}
.gauges{display:grid;grid-template-columns:1fr 1fr;gap:var(--md);margin-top:-28px;margin-bottom:var(--xl)}
.gauge{background:#fff;border:1px solid #ececec;padding:var(--md);text-align:center;box-shadow:var(--shadow-card)}
.gauge .g-num{font-size:40px;font-weight:800;line-height:1;color:var(--forest)}
.gauge .g-lbl{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--body);margin-top:6px}
.gauge.gem .g-num{color:var(--prime)}
.kv{display:flex;justify-content:space-between;padding:11px 0;border-bottom:1px solid #f1f1f1;font-size:14px}
.kv .k{color:var(--body);font-weight:600}
.kv .v{color:var(--ink);font-weight:700;text-align:right}
.signal-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.signal-box{background:var(--gray-bg);padding:12px 14px;border-left:3px solid var(--prime)}
.signal-box.fail{border-left-color:var(--danger)}
.signal-box .sb-k{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--body)}
.signal-box .sb-v{font-size:18px;font-weight:800;color:var(--forest)}
.poslist{list-style:none}
.poslist li{display:flex;gap:10px;padding:7px 0;font-size:14px;color:var(--ink);line-height:1.4}
.poslist li svg{width:18px;height:18px;flex:none;margin-top:2px;stroke:var(--prime);fill:none}
.flaglist li svg{stroke:var(--danger)}
.drawer-foot{padding:var(--md) var(--lg);border-top:1px solid #ececec;display:flex;gap:var(--sm)}
.drawer-foot .btn{flex:1;justify-content:center}

/* =============================================================================
   Trust badges
   ========================================================================== */
.trust{background:var(--forest);padding:var(--xl);display:grid;grid-template-columns:repeat(4,1fr);gap:var(--lg);margin-top:var(--xxl)}
.badge{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;color:#fff}
.badge .b-ic{width:54px;height:54px;border:1.5px solid var(--gold);border-radius:50%;display:grid;place-items:center}
.badge .b-ic svg{width:26px;height:26px;stroke:var(--gold);fill:none}
.badge .b-ac{font-weight:800;font-size:16px;color:#fff}
.badge .b-full{font-size:12px;color:var(--sage);line-height:16px}
@media(max-width:900px){.trust{grid-template-columns:repeat(2,1fr)}}

/* =============================================================================
   Footer
   ========================================================================== */
.footer{background:var(--night);color:#fff;padding:var(--xxl) var(--xl) var(--lg)}
.footer-grid{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:2fr 1fr 1fr 1.4fr;gap:var(--xl)}
.footer h5{color:#fff;font-size:15px;font-weight:700;margin-bottom:var(--md);text-transform:uppercase;letter-spacing:.05em}
.footer a,.footer p{color:var(--sage);font-size:14px;line-height:28px;display:block}
.footer a:hover{color:var(--gold)}
.footer-bottom{background:var(--forest);margin:var(--xl) -40px -24px;padding:18px var(--xl);
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px}
.footer-bottom small{color:var(--sage);font-size:13px}
.footer-bottom a{color:var(--prime);font-weight:700;display:inline;margin-left:16px}
@media(max-width:900px){.footer-grid{grid-template-columns:1fr 1fr}}

/* =============================================================================
   Expenses
   ========================================================================== */
.budget-card{background:var(--forest);color:#fff;padding:var(--xl);position:relative;overflow:hidden;margin-bottom:var(--xl)}
.budget-card .eyebrow{margin-bottom:6px}
.budget-top{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:var(--md)}
.budget-spent{font-size:52px;font-weight:800;color:var(--gold);line-height:1}
.budget-spent small{font-size:18px;color:var(--sage);font-weight:700}
.budget-meta{text-align:right;color:var(--sage);font-size:14px;font-weight:600}
.budget-meta b{color:#fff;font-size:18px;display:block}
.budget-track{height:14px;background:rgba(255,255,255,.12);border-radius:7px;margin-top:var(--lg);overflow:hidden}
.budget-track>span{display:block;height:100%;border-radius:7px;background:linear-gradient(90deg,var(--prime),var(--gold));width:0;transition:width 1s var(--ease)}
.budget-track>span.warn{background:linear-gradient(90deg,var(--gold),#e0762b)}
.budget-note{margin-top:10px;font-size:13px;color:var(--sage)}

.bars{display:flex;flex-direction:column;gap:12px}
.bar-row{display:grid;grid-template-columns:150px 1fr 130px;align-items:center;gap:var(--md)}
.bar-row .bname{font-weight:700;color:var(--ink);font-size:14px;text-transform:capitalize}
.bar-track{height:26px;background:#eee;border-radius:5px;overflow:hidden}
.bar-track>span{display:block;height:100%;background:linear-gradient(90deg,var(--prime),var(--forest));width:0;border-radius:5px;transition:width .9s var(--ease)}
.bar-row .bval{text-align:right;font-weight:800;color:var(--forest);font-size:15px}
.bar-row .bval small{color:var(--body);font-weight:600;font-size:12px;display:block}
.spark{display:flex;align-items:flex-end;gap:5px;height:120px;padding:var(--md) 0}
.spark .col{flex:1;background:linear-gradient(180deg,var(--gold),var(--prime));border-radius:3px 3px 0 0;min-height:3px;position:relative}
.spark .col span{position:absolute;bottom:-22px;left:0;right:0;text-align:center;font-size:11px;color:var(--body)}

/* =============================================================================
   Motion
   ========================================================================== */
@keyframes rise{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
.reveal{opacity:0}
.reveal.in{animation:rise .6s var(--ease) forwards}
.view{display:none}
.view.active{display:block}

.empty{text-align:center;padding:var(--xxl) var(--lg);color:var(--body)}
.empty svg{width:120px;height:120px;margin-bottom:var(--md)}

/* =============================================================================
   Apple-grade calm refinements + animated premium icons  (override layer)
   ========================================================================== */

/* breathing room & softer surfaces */
.main{padding:52px 60px;max-width:1240px}
@media(max-width:1100px){.main{padding:24px 18px}}
.page-head{margin-bottom:44px}
.page-head h1{font-size:42px;line-height:1.06;letter-spacing:-.025em;margin:8px 0 12px}
.page-head p{font-size:17px;line-height:30px}
.card,.card.panel,.gem-card,.table-wrap,.adv-panel,.budget-card{border-radius:16px}
.card{border:1px solid #edefee}
.card-hover:hover{box-shadow:0 14px 44px rgba(16,40,28,.12);transform:translateY(-3px)}
.btn{border-radius:12px;padding:15px 26px}
.btn-sm{border-radius:11px;padding:10px 18px}
.stat-band{border-radius:22px;padding:44px}
.section-title{margin:56px 0 22px}
.section-title h2{font-size:26px;letter-spacing:-.01em}

/* nav: bigger, calmer targets */
.nav-item{font-size:15px;padding:15px 24px;gap:14px;margin:1px 12px 1px 0;border-radius:0 12px 12px 0}
.nav-item.active{background:rgba(253,196,0,.10)}

/* utility strip: never wrap; shed non-essentials when tight */
.utilbar{white-space:nowrap;gap:12px}
.utilbar .ub-left span:last-child,.utilbar #lastRun{overflow:hidden;text-overflow:ellipsis}
@media(max-width:1080px){.utilbar .ub-left span:last-child{display:none}.utilbar #lastRun{display:none}}
@media(max-width:680px){.utilbar #userEmail{display:none}}

/* tables: airier, quieter lines */
thead th{font-size:11px;padding:18px 24px}
tbody td{padding:20px 24px}

/* ---- animated icons: every icon fades in + scales on hover ---- */
@keyframes icoFade{from{opacity:0}to{opacity:1}}
@keyframes icoSpin{to{transform:rotate(360deg)}}
@keyframes icoDraw{to{stroke-dashoffset:0}}
@keyframes icoFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
.ico,.btn svg,.nav-item svg,.icon-circle svg,.adv-toggle svg,.ub-logout svg,
.phone-circle svg,.cta-ic svg{transition:transform .25s var(--ease),filter .25s var(--ease)}
.ico,.btn svg,.nav-item svg,.icon-circle svg,.cta-ic svg{animation:icoFade .4s var(--ease) both}
button:hover .ico,a:hover .ico,.btn:hover svg,.nav-item:hover svg,.adv-toggle:hover svg,
tr:hover .ico,.ub-logout:hover svg,.cta:hover .cta-ic svg{transform:scale(1.16)}
.icon-circle:hover svg{transform:scale(1.12) rotate(-4deg)}
#refreshBtn:hover svg{animation:icoSpin .7s var(--ease)}
#scrapeBtn:hover svg{transform:rotate(90deg) scale(1.1)}
.nav-item.active svg{stroke:var(--gold);animation:icoFloat 2.4s ease-in-out infinite}
.ico-draw path{stroke-dasharray:1;stroke-dashoffset:1;animation:icoDraw .7s var(--ease) .1s forwards}

/* primary-action tiles (overview) — make the next step obvious */
.cta-row{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:8px}
@media(max-width:760px){.cta-row{grid-template-columns:1fr}}
.cta{display:flex;align-items:center;gap:18px;text-align:left;background:#fff;border:1px solid #e9ebea;
  border-radius:18px;padding:26px;transition:all .25s var(--ease);cursor:pointer}
.cta:hover{box-shadow:0 16px 48px rgba(16,40,28,.14);transform:translateY(-4px);border-color:transparent}
.cta b{display:block;font-size:19px;color:var(--forest);font-family:Catamaran,sans-serif;font-weight:800;line-height:1.2}
.cta small{color:var(--body);font-size:14px;font-weight:600}
.cta-ic{width:58px;height:58px;border-radius:16px;display:grid;place-items:center;flex:none;background:var(--mint)}
.cta-ic svg{width:27px;height:27px;stroke:var(--prime);fill:none;stroke-width:1.8}
.cta-gold{background:var(--forest);border-color:var(--forest)}
.cta-gold b{color:#fff}.cta-gold small{color:var(--sage)}
.cta-gold .cta-ic{background:rgba(253,196,0,.16)}.cta-gold .cta-ic svg{stroke:var(--gold)}

/* ---- collapsible sidebar (desktop) ---- */
.header-left{display:flex;align-items:center;gap:16px}
.nav-toggle{width:42px;height:42px;border-radius:11px;display:grid;place-items:center;color:var(--forest);transition:background .2s}
.nav-toggle:hover{background:var(--gray-bg)}
.nav-toggle svg{width:22px;height:22px}
.nav-txt{transition:opacity .15s var(--ease)}
.shell{transition:grid-template-columns .26s var(--ease)}
@media(min-width:1101px){
  body.nav-collapsed .shell{grid-template-columns:76px 1fr}
  body.nav-collapsed .side-label{opacity:0;height:0;padding:0;margin:0;overflow:hidden}
  body.nav-collapsed .nav-txt{display:none}
  body.nav-collapsed .nav-item{justify-content:center;padding:15px 0;margin-right:0;border-radius:0}
  body.nav-collapsed .nav-item svg{width:24px;height:24px}
  body.nav-collapsed .side-foot{text-align:center;padding:18px 6px}
  body.nav-collapsed .side-foot-k{display:none}
}

/* ---- dashboard: KPI cards ---- */
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-bottom:20px}
@media(max-width:1000px){.kpis{grid-template-columns:repeat(2,1fr)}}
.kpi{background:#fff;border:1px solid #edefee;border-radius:16px;padding:22px 24px}
.kpi-ic{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;background:var(--mint);margin-bottom:14px}
.kpi-ic svg{width:22px;height:22px;stroke:var(--prime);fill:none;stroke-width:1.8}
.kpi.gold .kpi-ic{background:rgba(253,196,0,.18)}.kpi.gold .kpi-ic svg{stroke:#b88900}
.kpi-num{font-size:38px;font-weight:800;color:var(--forest);line-height:1;letter-spacing:-.02em}
.kpi-lbl{font-size:14px;font-weight:700;color:var(--ink);margin-top:8px}
.kpi-sub{font-size:12px;color:var(--body);margin-top:2px}

/* ---- dashboard: chart cards ---- */
.dash-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media(max-width:1000px){.dash-grid{grid-template-columns:1fr}}
.dash-grid .span2{grid-column:1/-1}
.chart-card{background:#fff;border:1px solid #edefee;border-radius:16px;padding:24px}
.ch-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:18px;gap:12px}
.ch-head h3{font-family:Catamaran,sans-serif;font-size:18px;font-weight:800;color:var(--forest)}
.ch-head span,.ch-head a{font-size:13px;color:var(--body);font-weight:700}
.ch-head a{color:var(--prime)}

/* donut */
.donut-wrap{display:flex;align-items:center;gap:28px}
.donut{width:150px;height:150px;flex:none;animation:icoFade .6s var(--ease) both}
.donut circle{transition:stroke-dasharray .9s var(--ease)}
.donut .d-num{font-size:30px;font-weight:800;fill:var(--forest)}
.donut .d-lbl{font-size:10px;font-weight:700;fill:var(--body);text-transform:uppercase;letter-spacing:.08em}
.legend{display:flex;flex-direction:column;gap:12px;flex:1}
.legend .lg{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:600;color:var(--ink)}
.legend .sw{width:13px;height:13px;border-radius:4px}
.legend .lg b{margin-left:auto;color:var(--forest);font-size:16px}

/* histogram */
.histo{display:flex;align-items:flex-end;gap:12px;height:172px;padding-top:14px}
.histo .hbar{flex:1;display:flex;flex-direction:column;align-items:center;height:100%;justify-content:flex-end;gap:9px}
.histo .hbar-fill{width:100%;max-width:48px;background:linear-gradient(180deg,var(--gold),var(--prime));
  border-radius:8px 8px 0 0;position:relative;height:0;transition:height .85s var(--ease);min-height:3px}
.histo .hbar-fill span{position:absolute;top:-22px;left:0;right:0;text-align:center;font-size:13px;font-weight:800;color:var(--forest)}
.histo .hbar label{font-size:12px;color:var(--body);font-weight:700}

/* =============================================================================
   Advanced filters
   ========================================================================== */
.adv-toggle{display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:14px;
  color:var(--prime);padding:13px 14px;border:1px solid var(--border);border-radius:7px;background:#fff}
.adv-toggle:hover{border-color:var(--prime)}
.adv-toggle svg{width:16px;height:16px;stroke:currentColor;fill:none;transition:transform .2s}
.adv-toggle.open svg{transform:rotate(180deg)}
.adv-panel{display:none;background:#fff;border:1px solid #ececec;padding:var(--lg);margin-bottom:var(--lg)}
.adv-panel.open{display:block;animation:rise .35s var(--ease)}
.adv-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--lg)}
@media(max-width:900px){.adv-grid{grid-template-columns:1fr 1fr}}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--body)}
.field .rangeval{font-weight:800;color:var(--forest)}
input[type=range]{accent-color:var(--prime);width:100%}
.chk{display:inline-flex;align-items:center;gap:7px;font-size:14px;font-weight:600;color:var(--ink);
  padding:7px 11px;border:1px solid var(--border);border-radius:6px;cursor:pointer}
.chk input{accent-color:var(--prime)}
.chk.on{border-color:var(--prime);background:var(--mint)}
.adv-foot{display:flex;justify-content:space-between;align-items:center;margin-top:var(--lg);
  border-top:1px solid #f1f1f1;padding-top:var(--md)}
.locked{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:700;color:var(--prime);
  background:var(--mint);border:1px solid rgba(1,105,64,.25);padding:7px 12px;border-radius:6px}
.locked svg{width:14px;height:14px;stroke:var(--prime);fill:none}

/* =============================================================================
   Modal (Run new scrape)
   ========================================================================== */
.modal{position:fixed;inset:0;z-index:80;display:none;align-items:flex-start;justify-content:center;
  padding:6vh var(--md);background:rgba(15,31,24,.5);backdrop-filter:blur(4px);overflow:auto}
.modal.open{display:flex;animation:fade .25s var(--ease)}
@keyframes fade{from{opacity:0}to{opacity:1}}
.modal-card{background:#fff;width:640px;max-width:100%;box-shadow:0 30px 80px rgba(0,0,0,.35);
  animation:rise .3s var(--ease)}
.modal-head{background:var(--forest);color:#fff;padding:var(--lg);position:relative}
.modal-head h2{color:#fff;font-family:Catamaran;font-size:24px}
.modal-head .sub{color:var(--sage);font-size:14px;margin-top:2px}
.modal-head .close{position:absolute;top:16px;right:16px;color:#fff;width:34px;height:34px;border-radius:50%;display:grid;place-items:center}
.modal-head .close:hover{background:rgba(255,255,255,.15)}
.modal-body{padding:var(--lg);display:flex;flex-direction:column;gap:var(--lg)}
.modal-body textarea{width:100%;min-height:96px;border:1px solid var(--border);border-radius:7px;
  padding:12px 14px;font-family:inherit;font-size:14px;color:var(--ink);resize:vertical;line-height:24px}
.modal-body textarea:focus{outline:none;border-color:var(--prime);box-shadow:0 0 0 3px rgba(1,105,63,.15)}
.modal-foot{padding:var(--md) var(--lg) var(--lg);display:flex;gap:var(--sm);justify-content:flex-end}
.chk-row{display:flex;flex-wrap:wrap;gap:8px}
.excl-terms{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.excl-terms .x{font-size:12px;font-weight:600;color:#9a2a2a;background:#fbeaea;border:1px solid #f0caca;
  padding:3px 9px;border-radius:5px;text-decoration:line-through}
.runmsg{font-size:14px;color:var(--ink);font-weight:700;margin-top:2px}
.runstat{display:flex;gap:var(--md);margin-top:var(--md)}
.runstat .rs{flex:1;background:var(--gray-bg);padding:12px;text-align:center}
.runstat .rs b{display:block;font-size:24px;color:var(--forest)}
.runstat .rs.drop b{color:var(--danger)}
.runstat .rs.good b{color:var(--prime)}
.runstat .rs span{font-size:12px;color:var(--body);font-weight:600}

/* live run tracker */
.run-chip{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:700;color:#fff;
  background:var(--prime);border-radius:6px;padding:4px 10px;cursor:pointer}
.run-chip i{width:8px;height:8px;border-radius:50%;background:var(--gold);animation:pulse 1.1s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}
.phases{display:flex;flex-direction:column;gap:2px;margin:var(--sm) 0}
.ph{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:6px;font-size:14px;font-weight:600;color:var(--body)}
.ph .dot{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;flex:none;
  border:2px solid var(--border);font-size:11px;color:var(--body)}
.ph.done{color:var(--forest)}
.ph.done .dot{background:var(--prime);border-color:var(--prime);color:#fff}
.ph.active{color:var(--forest);background:var(--mint)}
.ph.active .dot{border-color:var(--prime);border-right-color:transparent;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.ph .pmeta{margin-left:auto;font-size:12px;color:var(--body);font-weight:700}
.pbar{height:10px;background:#eee;border-radius:5px;overflow:hidden;margin:6px 0 2px}
.pbar>span{display:block;height:100%;background:linear-gradient(90deg,var(--prime),var(--gold));
  width:0;border-radius:5px;transition:width .3s var(--ease)}
.pbar.indet>span{width:35%;animation:slide 1.1s var(--ease) infinite}
@keyframes slide{0%{margin-left:-35%}100%{margin-left:100%}}
.runlog{background:#0f1f18;color:#cfe6da;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px;
  line-height:1.7;padding:12px 14px;border-radius:8px;height:132px;overflow:auto;margin-top:var(--md)}
.runlog div{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}