/* =========================================================
   CtrlAltImran Client Dashboard
   Soft canvas, white rounded cards, pill controls, one accent.
   ========================================================= */
@font-face{font-family:"Manrope";font-style:normal;font-weight:200 800;font-display:swap;src:url(/assets/fonts/manrope-latin.woff2) format("woff2")}
@font-face{font-family:"Geist Mono";font-style:normal;font-weight:100 900;font-display:swap;src:url(/assets/fonts/geist-mono-latin.woff2) format("woff2")}
@font-face{font-family:"Instrument Serif";font-style:italic;font-weight:400;font-display:swap;src:url(/assets/fonts/instrument-serif-italic.woff2) format("woff2")}

:root{
  --font:"Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --serif:"Instrument Serif",Georgia,serif;

  --canvas:#F3F3F0;
  --card:#FFFFFF;
  --card-2:#F8F8F6;
  --line:#EAEAE6;
  --line-2:#DCDCD7;
  --ink:#141414;
  --muted:#6B6B66;
  --faint:#73736D;   /* 4.8:1 on white (was 2.5:1, failed WCAG AA) */
  --deco:#B4B4AE;    /* decorative only: chevrons, empty bars, never text */
  --on-ink:#FFFFFF;

  --accent:#FF4F1F;
  --accent-2:#FF8A5C;
  --accent-soft:#FFECE4;
  --accent-ink:#C93A12;

  --green:#17924A; --green-soft:#E3F6EA;
  --amber:#B56A00; --amber-soft:#FFF1D9;
  --red:#D33A2C;   --red-soft:#FDE7E4;
  --blue:#2F5BEA;  --blue-soft:#E8EEFF;
  --violet:#7A4CF0;--violet-soft:#EFE9FF;
  --teal:#0E9488;  --teal-soft:#DDF5F2;

  --shadow:0 1px 2px rgba(20,20,20,.04),0 6px 20px -12px rgba(20,20,20,.10);
  --r:22px; --r-md:16px; --r-sm:12px;
  --side:264px;

  /* legacy names still used in a few templates */
  --bg:var(--card); --surface:var(--card-2); --surface-2:var(--canvas);
  --border:var(--line); --border-strong:var(--line-2);
  --secondary:var(--muted); --tertiary:var(--faint);
  --green-bg:var(--green-soft); --amber-bg:var(--amber-soft); --red-bg:var(--red-soft); --blue-bg:var(--blue-soft); --accent-bg:var(--accent-soft);
}
[data-scheme="dark"]{
  --canvas:#0D0D0C; --card:#171716; --card-2:#1D1D1B;
  --line:#262624; --line-2:#34342F;
  --ink:#F2F0EA; --muted:#A3A097; --faint:#96928A; --deco:#4A4843; --on-ink:#121211;
  --accent:#FF6B3D; --accent-2:#FF9B70; --accent-soft:#33190F; --accent-ink:#FF9B70;
  --green:#4FD27F; --green-soft:#132A1B;
  --amber:#F2B24A; --amber-soft:#2E2210;
  --red:#FF7A6A;   --red-soft:#331714;
  --blue:#86A6FF;  --blue-soft:#18213A;
  --violet:#B39BFF;--violet-soft:#231B3A;
  --teal:#4FD1C5;  --teal-soft:#0F2A28;
  --shadow:0 1px 2px rgba(0,0,0,.3);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--canvas)}
body{margin:0;font-family:var(--font);font-size:14.5px;line-height:1.45;letter-spacing:-.011em;color:var(--ink);background:var(--canvas);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit;letter-spacing:inherit}
h1,h2,h3,h4{margin:0;font-weight:650;letter-spacing:-.03em;line-height:1.15}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
::selection{background:var(--accent);color:#fff}
.ic{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.mono{font-family:var(--mono);letter-spacing:0}
.muted{color:var(--muted)} .faint{color:var(--faint)}
.inline{display:inline}
[data-scheme="dark"] .only-light,[data-scheme="light"] .only-dark{display:none}
.only-light,.only-dark{display:inline-flex}

[hidden]{display:none!important}


/* =========================================================
   APP FRAME — sidebar + canvas
   ========================================================= */
.app-frame{display:grid;grid-template-columns:var(--side) minmax(0,1fr);min-height:100vh;min-height:100dvh}
.side{position:sticky;top:0;height:100vh;height:100dvh;background:var(--card);border-right:1px solid var(--line);padding:16px 14px;display:flex;flex-direction:column;gap:6px;overflow-y:auto;scrollbar-width:thin}
.acct{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid var(--line);border-radius:14px;margin-bottom:12px;position:relative}
.acct__name{font-weight:700;font-size:14px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.acct__sub{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:5px}
.acct__sub::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--green)}
.acct > div{min-width:0;flex:1}
.acct .chev{color:var(--faint)}
.acct select{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%}
.av{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:13px;color:#fff;flex-shrink:0;background:linear-gradient(135deg,var(--accent),#FFB088)}
.av img{width:100%;height:100%;border-radius:50%;object-fit:cover}
.av--sm{width:26px;height:26px;font-size:11px}

.nav{display:flex;flex-direction:column;gap:2px}
.nav a{display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:11px;font-weight:600;font-size:14px;color:var(--muted);transition:background-color .15s,color .15s}
.nav a .ic{width:18px;height:18px}
.nav a:hover{color:var(--ink);background:var(--card-2)}
.nav a.is-on{background:var(--canvas);color:var(--ink)}
.nav a .badge{margin-left:auto}
.side__label{display:flex;align-items:center;justify-content:space-between;font-size:12.5px;font-weight:650;color:var(--muted);padding:18px 12px 6px;border-top:1px solid var(--line);margin-top:12px}
.side__label a{font-size:12px;font-weight:650;color:var(--accent);background:var(--accent-soft);padding:2px 9px;border-radius:99px}
.side__list{display:flex;flex-direction:column;gap:1px}
.side__list a{display:flex;align-items:center;gap:10px;padding:7px 12px;border-radius:10px;font-size:13.5px;font-weight:600;color:var(--ink)}
.side__list a:hover{background:var(--card-2)}
.side__list a span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1}
.side__list a small{color:var(--faint);font-size:11.5px;font-weight:600}
.sq{width:9px;height:9px;border-radius:3px;flex-shrink:0;background:var(--faint)}
.sq--up{background:var(--green)} .sq--down{background:var(--red)}
.promo{margin-top:auto;border-radius:18px;padding:16px;color:#fff;position:relative;overflow:hidden;background:#151413}
.promo::before{content:"";position:absolute;inset:0;background:radial-gradient(120% 90% at 100% 0%,rgba(255,79,31,.75),transparent 55%),radial-gradient(90% 70% at 0% 100%,rgba(255,170,120,.35),transparent 60%);pointer-events:none}
.promo > *{position:relative}
.promo b{display:flex;align-items:center;gap:6px;font-size:15px;letter-spacing:-.02em}
.promo p{margin:6px 0 12px;font-size:12.5px;line-height:1.45;color:rgba(255,255,255,.78)}
.promo .chip{background:#fff;color:#111;border-color:#fff;height:34px;font-size:13px}
.side__foot{display:flex;align-items:center;justify-content:space-between;gap:6px;padding-top:12px;margin-top:12px;border-top:1px solid var(--line)}
.side__foot .brandmini{display:flex;align-items:center;gap:8px;font-weight:700;font-size:13px}
.side__foot .brandmini img{width:22px;height:22px;border-radius:6px}

.badge{font-style:normal;font-family:var(--mono);font-size:10.5px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--accent);color:#fff;display:inline-grid;place-items:center;font-weight:600}
.icon-btn{width:36px;height:36px;display:grid;place-items:center;border:1px solid var(--line);background:var(--card);border-radius:50%;cursor:pointer;color:var(--ink);transition:background-color .15s}
.icon-btn:hover{background:var(--card-2)}
.icon-btn .ic{width:17px;height:17px}

.main{padding:30px 36px 80px;max-width:1340px;width:100%;min-width:0}
.topbar,.bottombar{display:none}


.client-pick{height:36px;border:1px solid var(--line);background:var(--card);border-radius:99px;padding:0 30px 0 14px;font-weight:650;font-size:13.5px;max-width:180px;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A5A59F' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;background-size:15px;cursor:pointer}

/* =========================================================
   HEADINGS / GREETING
   ========================================================= */
.hello{margin-bottom:22px}
.hello__date{font-size:13px;font-weight:600;color:var(--muted);margin-bottom:12px}
.hello h1{font-size:38px;font-weight:650;letter-spacing:-.045em;line-height:1.08}
.hello h1 + .hello__sub{font-size:38px;font-weight:650;letter-spacing:-.045em;line-height:1.12;background:linear-gradient(90deg,var(--accent) 0%,var(--accent-2) 55%,#F5B98F 100%);-webkit-background-clip:text;background-clip:text;color:transparent;padding-bottom:4px}
.hello__row{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;flex-wrap:wrap}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 16px;border-radius:999px;border:1px solid var(--line-2);background:var(--card);font-weight:650;font-size:13.5px;cursor:pointer;white-space:nowrap;transition:background-color .15s,border-color .15s,transform .15s}
.chip .ic{width:16px;height:16px}
.chip:hover{border-color:var(--ink)}


.chip--ink{background:var(--ink);border-color:var(--ink);color:var(--on-ink)}
.chip--sm{height:30px;padding:0 12px;font-size:12.5px}

.ph{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:20px;flex-wrap:wrap}
.ph__eyebrow{font-size:13px;font-weight:600;color:var(--muted);margin-bottom:8px}
.ph h1{font-size:34px;letter-spacing:-.045em}
.ph h1 em{font-style:normal;color:var(--faint)}
.ph__actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.section{margin-top:16px}





/* =========================================================
   BUTTONS
   ========================================================= */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:38px;padding:0 16px;border-radius:999px;border:1px solid var(--line-2);background:var(--card);font-weight:650;font-size:13.5px;cursor:pointer;white-space:nowrap;transition:background-color .15s,border-color .15s,color .15s}
.btn .ic{width:16px;height:16px}
.btn:hover{border-color:var(--ink)}
.btn--ink{background:var(--ink);border-color:var(--ink);color:var(--on-ink)}
.btn--ink:hover{background:var(--accent);border-color:var(--accent);color:#fff}

.btn--ghost{border-color:transparent;background:none}
.btn--ghost:hover{background:var(--canvas);border-color:transparent}
.btn--sm{height:30px;padding:0 12px;font-size:12.5px}
.btn--danger{color:var(--red)}
.btn--block{width:100%}
.btn[disabled]{opacity:.5;cursor:default}

/* =========================================================
   GRID + CARDS
   ========================================================= */
.g{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:16px}
.s4{grid-column:span 4}.s5{grid-column:span 5}.s7{grid-column:span 7}.s8{grid-column:span 8}.s12{grid-column:1/-1}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:20px 22px;box-shadow:var(--shadow);min-width:0}


.card__h{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.card__h h3{font-size:15.5px;letter-spacing:-.02em;margin:0;flex:1;display:flex;align-items:center;gap:10px;min-width:0}
.card__h .sub{font-size:12.5px;font-weight:600;color:var(--faint)}
.card__ic{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:var(--canvas);color:var(--ink);flex-shrink:0}
.card__ic .ic{width:16px;height:16px}
.card h3{font-size:15.5px;margin-bottom:12px}

.kv{display:grid;grid-template-columns:auto 1fr;gap:9px 16px;font-size:13.5px;margin:0}
.kv dt{color:var(--muted)}
.kv dd{margin:0;font-weight:650;text-align:right}

/* KPI cards */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.stat{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:18px 20px;box-shadow:var(--shadow);min-width:0;display:flex;flex-direction:column}
.stat__label{font-size:13px;font-weight:650;color:var(--muted);display:flex;align-items:center;gap:8px;justify-content:space-between}
.stat__value{font-size:34px;font-weight:650;letter-spacing:-.05em;margin-top:14px;line-height:1;font-variant-numeric:tabular-nums;white-space:nowrap}
.stat__value .cents,.cents{color:var(--faint)}
.stat__value small{font-size:.5em;color:var(--faint);letter-spacing:-.02em;margin-left:2px}
.stat__sub{font-size:12.5px;color:var(--muted);margin-top:12px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.stat--hl{background:#141413;border-color:#141413;color:#fff;position:relative;overflow:hidden}
.stat--hl::after{content:"";position:absolute;right:-40px;top:-60px;width:180px;height:180px;border-radius:50%;background:radial-gradient(circle,rgba(255,79,31,.55),transparent 65%);pointer-events:none}
.stat--hl .stat__label{color:rgba(255,255,255,.65)}
.stat--hl .stat__value .cents{color:rgba(255,255,255,.4)}
.stat--hl .stat__sub{color:rgba(255,255,255,.7)}
.stat--hl .stat__sub a{color:#fff;font-weight:700}
[data-scheme="dark"] .stat--hl{background:#22201E;border-color:#2D2A27}
.minibar{display:flex;gap:3px;margin-top:12px;height:22px;align-items:flex-end}
.minibar i{flex:1;border-radius:3px;background:var(--green);height:100%;opacity:.9}
.minibar i.dn{background:var(--red)} .minibar i.na{background:var(--canvas)}

/* progress bars (goals style) */
.prog{height:7px;border-radius:99px;background:var(--canvas);overflow:hidden;position:relative}
.prog i{position:absolute;inset:0 auto 0 0;border-radius:99px;background:linear-gradient(90deg,var(--accent),var(--accent-2))}
.prog--teal i{background:var(--teal)} .prog--violet i{background:var(--violet)} .prog--blue i{background:var(--blue)}
.goal{display:grid;grid-template-columns:1fr 120px 42px;gap:14px;align-items:center;padding:11px 0;border-top:1px solid var(--line)}
.goal:first-child{border-top:0;padding-top:2px}
.goal b{display:block;font-size:14px;font-weight:650}
.goal small{font-size:12px;color:var(--faint)}
.goal .pct{font-size:13px;font-weight:700;text-align:right;font-variant-numeric:tabular-nums}

/* site / favicon avatar */
.fav{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:var(--card-2);border:1px solid var(--line);flex-shrink:0;overflow:hidden;font-weight:750;font-size:12.5px;letter-spacing:-.02em}
.fav img{width:18px;height:18px}
.fav--sm{width:24px;height:24px;border-radius:7px;font-size:10px}
.fav--sm img{width:14px;height:14px}
.fav[data-c="0"]{background:var(--accent-soft);color:var(--accent-ink);border-color:transparent}
.fav[data-c="1"]{background:var(--violet-soft);color:var(--violet);border-color:transparent}
.fav[data-c="2"]{background:var(--teal-soft);color:var(--teal);border-color:transparent}
.fav[data-c="3"]{background:var(--blue-soft);color:var(--blue);border-color:transparent}
.fav[data-c="4"]{background:var(--amber-soft);color:var(--amber);border-color:transparent}
.fav[data-c="5"]{background:var(--green-soft);color:var(--green);border-color:transparent}

/* project tiles (sites with work this month) */
.tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 14px}
.tile{display:flex;align-items:center;gap:12px;padding:9px 8px;border-radius:14px;min-width:0}
.tile:hover{background:var(--card-2)}
.tile b{display:block;font-size:14px;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tile small{font-size:12px;color:var(--faint)}
.tile > div{min-width:0}


/* summary pills row (Codename style) */
.sumrow{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin-bottom:16px;padding:1px}
.sumrow::-webkit-scrollbar{display:none}
.sumpill{display:flex;align-items:center;gap:10px;flex-shrink:0;padding:5px 14px 5px 5px;border-radius:99px;background:var(--card);border:1px solid var(--line);font-size:13.5px;font-weight:650;cursor:pointer}
.sumpill .fav{border-radius:50%;width:28px;height:28px}
.sumpill span{color:var(--faint);font-weight:600;font-size:12.5px;font-variant-numeric:tabular-nums}
.sumpill.is-on{background:var(--ink);color:var(--on-ink);border-color:var(--ink)}
.sumpill.is-on span{color:inherit;opacity:.6}
.sumpill--stat{padding:8px 16px;cursor:default}
.sumpill--stat i{width:8px;height:8px;border-radius:50%;display:inline-block}

/* segmented control */
.seg{display:inline-flex;padding:3px;background:var(--card);border:1px solid var(--line);border-radius:99px;gap:2px;flex-shrink:0}
.seg button{border:0;background:none;height:30px;padding:0 14px;border-radius:99px;font-weight:650;font-size:13px;color:var(--muted);cursor:pointer;white-space:nowrap}
.seg button:hover{color:var(--ink)}
.seg button.is-on{background:var(--ink);color:var(--on-ink)}

/* =========================================================
   CHART
   ========================================================= */
.chart{margin:0}
.chart figcaption{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:12px;flex-wrap:wrap}
.chart figcaption > span:first-child{font-weight:650;font-size:15.5px;letter-spacing:-.02em;display:flex;align-items:center;gap:10px}
.legend{display:flex;align-items:center;gap:6px;font-weight:600;font-size:12.5px;color:var(--muted)}
.sw{width:12px;height:12px;border-radius:4px;display:inline-block;margin-left:10px}
.sw--a{background:linear-gradient(180deg,var(--accent-2),var(--accent))}
.sw--b{background:repeating-linear-gradient(135deg,var(--accent) 0 2px,var(--accent-soft) 2px 5px)}
.chart__box{position:relative}
.chart svg{width:100%;height:230px;display:block;overflow:visible}
.chart .grid{stroke:var(--line);stroke-width:1;stroke-dasharray:3 4;vector-effect:non-scaling-stroke}
.chart .tick{fill:var(--faint);font-family:var(--font);font-size:11px;font-weight:600}
.chart .a{fill:url(#gA)}
.chart .b{fill:url(#hB)}


.tip{position:absolute;pointer-events:none;background:var(--card);color:var(--ink);border:1px solid var(--line);box-shadow:0 8px 24px -8px rgba(0,0,0,.18);font-size:12.5px;padding:8px 12px;border-radius:12px;white-space:nowrap;transform:translate(-50%,-100%);z-index:5}
.tip b{display:block;margin-bottom:3px;font-size:13px}

/* =========================================================
   PILLS / TAGS
   ========================================================= */
.pill{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:99px;font-size:12px;font-weight:700;white-space:nowrap}
.pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.pill--ok{background:var(--green-soft);color:var(--green)}
.pill--warn{background:var(--amber-soft);color:var(--amber)}
.pill--bad{background:var(--red-soft);color:var(--red)}
.pill--info{background:var(--blue-soft);color:var(--blue)}
.pill--mute{background:var(--canvas);color:var(--muted)}
.pill--hl{background:rgba(255,255,255,.12);color:#fff}
.tag{display:inline-flex;align-items:center;height:24px;font-size:12px;font-weight:650;color:var(--muted);background:var(--canvas);padding:0 10px;border-radius:99px;white-space:nowrap}
.tag[data-t="New page"]{background:var(--violet-soft);color:var(--violet)}
.tag[data-t="Fix"]{background:var(--red-soft);color:var(--red)}
.tag[data-t="SEO"]{background:var(--teal-soft);color:var(--teal)}
.tag[data-t="Content"]{background:var(--blue-soft);color:var(--blue)}
.tag[data-t="Design"]{background:var(--accent-soft);color:var(--accent-ink)}
.delta{display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:7px;font-size:11.5px;font-weight:750;background:var(--accent);color:#fff}
.delta--soft{background:var(--accent-soft);color:var(--accent-ink)}

/* =========================================================
   TOOLBAR / MONTH TABS
   ========================================================= */
.toolbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.toolbar .grow{flex:1}
.search{position:relative;flex:1;min-width:200px;max-width:340px}
.search .ic{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--faint);width:16px;height:16px}
.search input{width:100%;height:40px;border:1px solid var(--line);background:var(--card);border-radius:99px;padding:0 14px 0 38px;font-size:14px}
.search input:focus{outline:none;border-color:var(--ink)}
.select{height:40px;border:1px solid var(--line);background:var(--card);border-radius:99px;padding:0 34px 0 16px;font-size:13.5px;font-weight:650;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A5A59F' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:15px;max-width:230px;cursor:pointer}
.mtabs{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin:0 0 16px;padding:1px;scroll-snap-type:x proximity}
.mtabs::-webkit-scrollbar{display:none}
.mtabs a{flex-shrink:0;scroll-snap-align:start;display:flex;flex-direction:column;gap:2px;padding:9px 16px;border:1px solid var(--line);border-radius:16px;background:var(--card);font-size:14px;font-weight:700;line-height:1.2;transition:border-color .15s}
.mtabs a small{font-size:11.5px;font-weight:600;color:var(--faint)}
.mtabs a:hover{border-color:var(--line-2)}
.mtabs a.is-on{background:var(--ink);border-color:var(--ink);color:var(--on-ink)}
.mtabs a.is-on small{color:inherit;opacity:.6}


/* =========================================================
   SHEETS (tables)
   ========================================================= */
.sheet-wrap{background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:auto;box-shadow:var(--shadow)}
.sheet{width:100%;border-collapse:separate;border-spacing:0;font-size:14px}
.sheet th{position:sticky;top:0;z-index:1;background:var(--card);text-align:left;font-weight:650;font-size:12.5px;color:var(--faint);padding:14px 18px 12px;border-bottom:1px solid var(--line);white-space:nowrap;user-select:none}
.sheet th[data-sort]{cursor:pointer}
.sheet th[data-sort]:hover{color:var(--ink)}
.sheet th .arr{opacity:.4;margin-left:4px;font-size:10px}
.sheet th.sorted{color:var(--ink)} .sheet th.sorted .arr{opacity:1}
.sheet td{padding:13px 18px;border-bottom:1px solid var(--line);vertical-align:middle}
.sheet tbody tr:last-child td{border-bottom:0}
.sheet tbody tr{transition:background-color .12s}
.sheet tbody tr:hover td{background:var(--card-2)}
.sheet .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.sheet .nowrap{white-space:nowrap}
.sheet .strong{font-weight:650}
.sheet .act{width:1%;white-space:nowrap;text-align:right}
.sheet .act > *{vertical-align:middle}
.sheet .act form.inline{display:inline-block}
.sheet tfoot td{background:var(--card-2);border-top:1px solid var(--line);border-bottom:0;font-weight:700;font-size:13.5px;padding-top:14px;padding-bottom:14px}
.sheet tfoot .lbl{font-size:10.5px;letter-spacing:.06em;color:var(--faint);font-weight:650;margin-right:6px;text-transform:uppercase}
.sheet tr.is-hidden{display:none}
.sheet .site-cell{display:flex;align-items:center;gap:10px;font-weight:650;white-space:nowrap}
.sheet .proj{display:flex;align-items:center;gap:12px}
.sheet .proj small{display:block;font-size:12px;color:var(--faint);font-weight:500;font-family:var(--mono);letter-spacing:0}
.empty{padding:44px 20px;text-align:center;color:var(--muted);font-size:14px}
.empty b{display:block;color:var(--ink);font-size:15px;margin-bottom:4px}

/* editable (admin) */











.sheet td.saving{background:var(--canvas)!important}
.sheet td.saved{animation:saved .9s ease}
@keyframes saved{0%{background:var(--green-soft)}100%{background:transparent}}
.sheet td.err{box-shadow:inset 0 0 0 2px var(--red)}






.sheet .act .btn--ghost{width:32px;padding:0}
[data-scheme="dark"] input[type=date]{color-scheme:dark}







/* =========================================================
   SITES
   ========================================================= */
.sites{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:16px}
.site{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:18px 20px;display:flex;flex-direction:column;gap:14px;box-shadow:var(--shadow)}
.site__top{display:flex;align-items:center;gap:12px}
.site__fav{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;overflow:hidden;flex-shrink:0}
.site__fav.fav{width:42px;height:42px;border-radius:12px;font-size:14px}
.site__fav img{width:22px;height:22px}
.site__name{font-weight:700;font-size:15px;line-height:1.2}
.site__host{font-size:12.5px;color:var(--muted);display:flex;align-items:center;gap:4px;margin-top:2px}
.site__host .ic{width:12px;height:12px}
.site__status{margin-left:auto}
.site__meta{display:grid;grid-template-columns:1fr 1fr;gap:10px;font-size:13px;padding:12px 14px;background:var(--card-2);border-radius:14px}
.site__meta span{color:var(--faint);display:block;font-size:11.5px;font-weight:650;margin-bottom:2px}
.site__meta b{font-weight:650}
.site__foot{display:flex;align-items:center;justify-content:space-between;gap:10px}
.dots{display:inline-flex;gap:3px}
.d{width:6px;height:18px;border-radius:99px;background:var(--canvas)}
.d--up{background:var(--green)}.d--down{background:var(--red)}
.warn-txt{color:var(--amber);font-weight:700}

/* =========================================================
   LISTS
   ========================================================= */
.list{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:6px 20px}
.card .list{background:none;border:0;box-shadow:none;padding:0}
.li{display:flex;align-items:center;gap:12px;padding:13px 0;border-top:1px solid var(--line);font-size:14px}
.li:first-child{border-top:0}
.li__main{flex:1;min-width:0}
.li__main b{display:block;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.li__main small{color:var(--muted);font-size:12.5px}
.li__end{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.dot-prog{width:9px;height:9px;border-radius:50%;background:var(--blue);flex-shrink:0;box-shadow:0 0 0 4px var(--blue-soft)}
.check-list{list-style:none;margin:0;padding:0;display:grid;gap:9px;font-size:13.5px}
.check-list li{display:flex;gap:9px;align-items:flex-start;color:var(--muted)}
.check-list li::before{content:"";width:16px;height:16px;flex-shrink:0;margin-top:1px;border-radius:50%;background:var(--green-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2317924A' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12 4 4 8-8'/%3E%3C/svg%3E") center/10px no-repeat}

/* plan card */
.plan__price{font-size:34px;font-weight:650;letter-spacing:-.05em;line-height:1}
.plan__price small{font-size:14px;color:var(--faint);font-weight:600;letter-spacing:-.01em}
.plan__period{display:flex;justify-content:space-between;font-size:12.5px;color:var(--muted);font-weight:600;margin:16px 0 8px}

/* calendar strip */
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;text-align:center;margin-top:4px}
.cal div{padding:8px 0;border-radius:12px;font-size:11.5px;color:var(--faint);font-weight:650}
.cal div b{display:block;font-size:16px;color:var(--ink);margin-top:3px;letter-spacing:-.02em}
.cal div.is-today{background:var(--ink);color:rgba(255,255,255,.7)}
.cal div.is-today b{color:#fff}
[data-scheme="dark"] .cal div.is-today{background:var(--accent)}

.event{margin-top:12px;background:var(--card-2);border-radius:16px;padding:14px 16px;display:flex;align-items:center;gap:12px}
.event b{display:block;font-size:14px}
.event small{font-size:12.5px;color:var(--muted)}

/* =========================================================
   FORMS
   ========================================================= */
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.field label{font-size:13px;font-weight:650;color:var(--muted)}
.input,.textarea{width:100%;height:44px;border:1px solid var(--line-2);border-radius:12px;padding:0 14px;background:var(--card);font-size:15px;transition:border-color .15s}
.textarea{height:auto;min-height:110px;padding:12px 14px;resize:vertical;line-height:1.5}
.textarea.code{font-family:var(--mono);font-size:13px;letter-spacing:0;min-height:280px}
.input:focus,.textarea:focus{outline:none;border-color:var(--ink)}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
.check{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:650;margin-bottom:14px;cursor:pointer}
.check input{width:16px;height:16px;accent-color:var(--accent)}
.help{font-size:12.5px;color:var(--faint)}

/* toast / notes */
.toast{position:fixed;left:50%;top:22px;transform:translateX(-50%);z-index:100;background:var(--ink);color:var(--on-ink);padding:11px 18px;border-radius:99px;font-size:13.5px;font-weight:650;animation:toast 4s ease forwards;max-width:calc(100% - 32px)}
.toast--err{background:var(--red);color:#fff}
@keyframes toast{0%{opacity:0;transform:translate(-50%,-8px)}8%,85%{opacity:1;transform:translate(-50%,0)}100%{opacity:0;visibility:hidden}}
.note{border:1px solid var(--line);background:var(--card);border-radius:16px;padding:14px 16px;font-size:13.5px;color:var(--muted)}
.note b{color:var(--ink)}
.note--accent{background:var(--accent-soft);border-color:transparent;color:var(--ink)}

/* =========================================================
   DRAWER
   ========================================================= */
.drawer{position:fixed;inset:0;z-index:80;display:flex;justify-content:flex-end;background:rgba(10,10,10,.25);padding:12px}

@keyframes slide{from{transform:translateX(30px);opacity:.4}}





.msg{margin-bottom:14px;max-width:88%}


.msg.me{margin-left:auto}



/* =========================================================
   AUTH
   ========================================================= */
.auth{min-height:100vh;min-height:100dvh;display:grid;grid-template-columns:1.05fr 1fr;padding:14px;gap:14px}
.auth__side{border-radius:26px;padding:38px 40px;display:flex;flex-direction:column;justify-content:flex-start;position:relative;overflow:hidden;color:#fff;background:#141312}
.auth__side::before{content:"";position:absolute;inset:0;background:radial-gradient(80% 70% at 100% 0%,rgba(255,79,31,.8),transparent 60%),radial-gradient(70% 60% at 0% 100%,rgba(255,160,110,.35),transparent 60%);pointer-events:none}
.auth__side::after{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.12) 1px,transparent 1px);background-size:22px 22px;mask-image:linear-gradient(180deg,transparent,#000);pointer-events:none}
.auth__side > *{position:relative;z-index:2}
.auth__side .brand{position:relative;z-index:2}
.auth__side .brand b{color:#fff}
.auth__content{margin-top:36px;max-width:580px;position:relative;z-index:2}
.auth__quote{font-size:clamp(46px, 3.8vw, 62px);font-weight:650;letter-spacing:-.045em;line-height:1.05;max-width:560px}
.auth__quote em{font-style:normal;color:rgba(255,255,255,.6)}
.auth__list{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px;max-width:540px}
.auth__list li{display:flex;gap:8px;align-items:center;padding:8px 14px;border-radius:99px;background:rgba(255,255,255,.1);font-size:13.5px;font-weight:600;backdrop-filter:blur(6px)}
.auth__list .ic{width:16px;height:16px}
.auth__preview{
  position:absolute;
  bottom:-70px;
  right:-90px;
  width:clamp(480px, 52vw, 680px);
  max-height:calc(100% - 340px);
  border-radius:24px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.14);
  box-shadow:none;
  pointer-events:none;
  z-index:1;
}
.auth__preview img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:top left;
  border-radius:24px;
}
.auth__copy{margin-top:auto;padding-top:20px;position:relative;z-index:2}

/* Shorter laptop screens: scale typography and constrain preview image so it never covers the text/pills */
@media (max-height: 860px){
  .auth__side{padding:28px 32px}
  .auth__content{margin-top:20px}
  .auth__quote{font-size:clamp(34px, 3.2vw, 42px);line-height:1.08}
  .auth__list{margin-top:14px;gap:6px}
  .auth__list li{padding:6px 12px;font-size:12.5px}
  .auth__preview{
    right:-60px;
    bottom:-50px;
    width:clamp(400px, 46vw, 540px);
    max-height:calc(100% - 270px);
    border-radius:20px;
  }
  .auth__preview img{border-radius:20px}
}
@media (max-height: 720px){
  .auth__side{padding:22px 26px}
  .auth__content{margin-top:14px}
  .auth__quote{font-size:28px;line-height:1.1}
  .auth__list{margin-top:10px;gap:5px}
  .auth__list li{padding:5px 10px;font-size:11.5px}
  .auth__preview{
    right:-45px;
    bottom:-40px;
    width:clamp(340px, 40vw, 440px);
    max-height:calc(100% - 210px);
    border-radius:18px;
  }
  .auth__preview img{border-radius:18px}
  .auth__copy{font-size:11px}
}
@media (max-height: 560px){
  .auth__preview{display:none}
}
.auth__main{display:flex;flex-direction:column;padding:10px 18px;background:var(--card);border-radius:26px;border:1px solid var(--line)}
.auth__top{display:flex;justify-content:space-between;align-items:center;padding-top:8px}
.auth__box{width:100%;max-width:380px;margin:auto;padding:30px 0}
.auth__box h1{font-size:32px;letter-spacing:-.045em;margin-bottom:8px}
.auth__box p.lead{color:var(--muted);margin:0 0 26px;font-size:14.5px}
.auth__row{display:flex;justify-content:space-between;align-items:center;margin:-2px 0 18px;font-size:13.5px}
.auth__row a{font-weight:650;color:var(--muted)}
.auth__row a:hover{color:var(--ink)}
.auth .btn--block{height:46px;font-size:14.5px}
.brand{display:flex;align-items:center;gap:10px}
.brand img{border-radius:9px}
.brand span{display:flex;flex-direction:column;line-height:1.15}
.brand b{font-weight:700;font-size:15px}
.brand small{font-size:12px;color:var(--faint);font-weight:600}
.auth__side .brand small{color:rgba(255,255,255,.6)}
.pw{position:relative}
.pw .input{padding-right:46px}
.pw button{position:absolute;right:5px;top:5px;width:34px;height:34px;border:0;background:none;border-radius:9px;cursor:pointer;color:var(--faint);display:grid;place-items:center}
.pw button:hover{color:var(--ink)}
.alert{border-radius:12px;padding:11px 14px;font-size:13.5px;margin-bottom:16px;font-weight:650}
.alert--err{background:var(--red-soft);color:var(--red)}
.alert--ok{background:var(--green-soft);color:var(--green)}
.nologin{margin-top:28px;padding:18px;border-radius:18px;background:var(--card-2);border:1px solid var(--line)}
.nologin p{margin:0 0 12px;font-size:13.5px;color:var(--muted)}
.nologin div{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.backlink{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;font-weight:650;color:var(--muted)}
.backlink:hover{color:var(--ink)}



details > summary::-webkit-details-marker{display:none}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1180px){
  .s4,.s5,.s7,.s8{grid-column:span 12}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  
}
@media (max-width:900px){
  .app-frame{grid-template-columns:1fr}
  .side{display:none}
  .topbar{display:flex;align-items:center;gap:10px;position:sticky;top:0;z-index:50;padding:10px 16px;background:color-mix(in srgb,var(--canvas) 86%,transparent);backdrop-filter:saturate(1.4) blur(12px);-webkit-backdrop-filter:saturate(1.4) blur(12px)}
  .topbar .brand{flex:1;min-width:0}
  .topbar .brand b{font-size:14.5px}
  .topbar .client-pick{max-width:130px}
  .bottombar{display:flex;position:fixed;left:12px;right:12px;bottom:calc(10px + env(safe-area-inset-bottom));z-index:60;background:color-mix(in srgb,var(--card) 92%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--line);border-radius:22px;padding:6px;box-shadow:0 -8px 28px -18px rgba(0,0,0,.28),0 1px 2px rgba(0,0,0,.04)}
  .bottombar a{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:7px 2px;border-radius:16px;font-size:10.5px;font-weight:700;color:var(--faint);position:relative}
  .bottombar a .ic{width:21px;height:21px}
  .bottombar a.is-on{color:var(--ink);background:var(--canvas)}
  .bottombar .badge{position:absolute;top:3px;left:calc(50% + 6px);min-width:16px;height:16px;font-size:9.5px}
  .main{padding:8px 16px calc(110px + env(safe-area-inset-bottom))}
  .hello h1,.hello h1 + .hello__sub{font-size:29px}
  .hello__row .chips{width:100%;overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none;margin:0 -16px;padding:0 16px;width:calc(100% + 32px)}
  .hello__row .chips::-webkit-scrollbar{display:none}
  .ph h1{font-size:28px}
  .g{gap:12px}
  
  .stats{gap:12px}
  .stat{padding:15px 16px}
  .stat__value{font-size:26px;margin-top:10px}
  .card{padding:18px}
  .chart svg{height:190px}
  .fgrid{grid-template-columns:1fr}
  .toolbar .search{max-width:none;flex-basis:100%}
  .toolbar .select{flex:1;max-width:none}
  .tiles{grid-template-columns:1fr}
  .goal{grid-template-columns:1fr 70px 40px}
  .toast{top:auto;bottom:calc(96px + env(safe-area-inset-bottom))}
  .drawer{align-items:flex-end;padding:0}
  
  @keyframes up{from{transform:translateY(40px);opacity:.4}}
  .auth{grid-template-columns:1fr;padding:0}
  .auth__side{display:none}
  .auth__main{border:0;border-radius:0;padding:12px 18px}
  
  .cards .only-d{display:none}
  .cards .sheet .proj small{display:none}
  .li .btn--sm span{display:none}
  .li .btn--sm{width:34px;padding:0}

  /* read-only sheets → stacked cards */
  .sheet-wrap.cards{border:0;border-radius:0;overflow:visible;background:none;box-shadow:none}
  .cards .sheet thead{display:none}
  .cards .sheet,.cards .sheet tbody,.cards .sheet tr,.cards .sheet td{display:block;width:100%}
  .cards .sheet tbody tr{border:1px solid var(--line);border-radius:18px;margin-bottom:10px;padding:14px 16px;display:grid;grid-template-columns:1fr auto;gap:6px 12px;background:var(--card);box-shadow:var(--shadow)}
  .cards .sheet tr.is-hidden{display:none}
  .cards .sheet td{padding:0;border:0!important;background:none!important;text-align:left}
  .cards .sheet td[data-m="title"]{grid-column:1;font-weight:700;font-size:14.5px;min-width:0}
  .cards .sheet td[data-m="end"]{grid-column:2;grid-row:1;text-align:right}
  .cards .sheet td[data-m="sub"]{grid-column:1/-1;color:var(--muted);font-size:13px}
  .cards .sheet td[data-m="amt"]{grid-column:1;font-weight:750;font-size:18px;text-align:left;margin-top:6px;letter-spacing:-.03em}
  .cards .sheet td[data-m="act"]{grid-column:2;text-align:right;margin-top:6px}
  .cards .sheet td[data-m="hide"]{display:none}
  .cards .sheet td[data-m="text"]{grid-column:1/-1;font-size:14px;color:var(--muted)}
  .cards .sheet tfoot{display:block}
  .cards .sheet tfoot tr{display:flex;flex-wrap:wrap;gap:6px 16px;border:1px solid var(--line);border-radius:18px;padding:14px 16px;background:var(--card)}
  .cards .sheet tfoot td{display:block;width:auto;padding:0;border:0;background:none}
  .cards .sheet tfoot td:empty{display:none}
}
@media (max-width:420px){
  
  .stat__value{font-size:23px}
  .bottombar a span{font-size:9.5px}
}
.app-frame{background:linear-gradient(90deg,var(--card) calc(var(--side) - 1px),var(--line) calc(var(--side) - 1px),var(--line) var(--side),transparent var(--side))}
@media (max-width:900px){.app-frame{background:none}}
.card__h + .goal,.card__h + .list .li:first-child{border-top:0}
.sumpill.is-on .fav{background:rgba(255,255,255,.15);color:inherit}
.side__list a .av{flex:0 0 22px}
.app-col{min-width:0}
.brand .av{display:grid;flex-direction:initial}


/* =========================================================
   v3 — custom controls (no browser-default UI)
   ========================================================= */
/* scrollbars */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:99px;border:3px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:var(--faint);background-clip:padding-box;border:3px solid transparent}
::-webkit-scrollbar-corner{background:transparent}
.side::-webkit-scrollbar{width:6px}
.side::-webkit-scrollbar-thumb{border-width:1px}
@supports not selector(::-webkit-scrollbar){*{scrollbar-width:thin;scrollbar-color:var(--line-2) transparent}}

/* sidebar: never squash children; collapsible sections */
.side > *{flex-shrink:0}
.side__label{cursor:pointer;user-select:none;background:none;border-left:0;border-right:0;border-bottom:0;width:100%;font:inherit;font-size:12.5px;font-weight:650;color:var(--muted)}
.side__label .ic{width:14px;height:14px;transition:transform .2s;margin-left:4px}
.side__label.is-closed .ic{transform:rotate(-90deg)}
.side__label .count{margin-left:auto;font-size:12px;font-weight:650;color:var(--accent);background:var(--accent-soft);padding:2px 9px;border-radius:99px}
.side__list{overflow:hidden;transition:max-height .25s ease, opacity .2s ease}
.side__list.is-closed{max-height:0!important;opacity:0}
.promo .chip .ic--fill,.chip .ic--fill{fill:currentColor;stroke:none}
.ic--fill{fill:currentColor;stroke:none}

/* icon tweaks */
.arr{display:inline-block;width:12px;height:12px;margin-left:5px;vertical-align:-1px;opacity:.35;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 15 5 5 5-5'/%3E%3Cpath d='m7 9 5-5 5 5'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 15 5 5 5-5'/%3E%3Cpath d='m7 9 5-5 5 5'/%3E%3C/svg%3E") center/contain no-repeat}
th[data-dir] .arr{opacity:1;-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 15 6-6 6 6'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 15 6-6 6 6'/%3E%3C/svg%3E")}
th[data-dir="desc"] .arr{transform:rotate(180deg)}
.stat__sub a,.more,.backlink{display:inline-flex;align-items:center;gap:4px}
.stat__sub a .ic{width:14px;height:14px}
.backlink .ic{width:16px;height:16px}
.delta .ic{width:12px;height:12px;stroke-width:2.6;margin-right:2px}

/* custom select */
.cs{position:relative;display:inline-flex;min-width:0}
.cs > select{position:absolute!important;opacity:0!important;pointer-events:none!important;width:1px!important;height:1px!important;inset:0}
.cs__btn{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 14px 0 16px;border:1px solid var(--line);background:var(--card);border-radius:99px;font-weight:650;font-size:13.5px;cursor:pointer;white-space:nowrap;max-width:260px;min-width:0;transition:border-color .15s}
.cs__btn span{overflow:hidden;text-overflow:ellipsis}
.cs__btn .ic{width:15px;height:15px;color:var(--faint);margin-left:auto;flex-shrink:0;transition:transform .2s}
.cs__btn:hover,.cs.is-open .cs__btn{border-color:var(--ink)}
.cs.is-open .cs__btn .ic{transform:rotate(180deg)}
.cs--cell{display:flex;width:100%}
.cs--cell .cs__btn{width:100%;max-width:none;height:46px;border:0;border-radius:0;background:transparent;padding:0 14px;font-weight:650}
.cs--cell .cs__btn:focus-visible{box-shadow:inset 0 0 0 2px var(--accent);outline:none}
.cs--field{display:flex;width:100%}
.cs--field .cs__btn{width:100%;max-width:none;height:44px;border-radius:12px;border-color:var(--line-2);font-weight:500;font-size:15px}




.pop{position:fixed;z-index:200;min-width:180px;max-width:min(340px,calc(100vw - 24px));max-height:min(340px,60vh);overflow:auto;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:6px;box-shadow:0 18px 40px -16px rgba(0,0,0,.28),0 2px 6px rgba(0,0,0,.05);animation:pop .14s ease}
@keyframes pop{from{opacity:0;transform:translateY(-4px) scale(.98)}}
.pop__search{position:sticky;top:-6px;background:var(--card);padding:4px 2px 6px;margin:-6px -6px 4px;padding:8px 8px 6px}
.pop__search input{width:100%;height:36px;border:1px solid var(--line);border-radius:10px;padding:0 12px;font-size:13.5px;background:var(--card-2)}
.pop__search input:focus{outline:none;border-color:var(--ink)}
.opt{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:9px 12px;border-radius:10px;border:0;background:none;font-size:14px;font-weight:600;cursor:pointer;color:var(--ink)}
.opt:hover,.opt.is-active{background:var(--canvas)}
.opt .ic{width:16px;height:16px;margin-left:auto;color:var(--accent);opacity:0}
.opt.is-sel .ic{opacity:1}
.opt small{color:var(--faint);font-weight:600;font-size:12px;margin-left:auto}
.opt.is-sel small{margin-left:8px}



/* date picker */
.dp-btn{display:flex;align-items:center;gap:8px;width:100%;height:44px;padding:0 14px;border:1px solid var(--line-2);border-radius:12px;background:var(--card);font-size:15px;cursor:pointer;text-align:left;color:var(--ink)}
.dp-btn .ic{width:16px;height:16px;color:var(--faint)}
.dp-btn:hover{border-color:var(--ink)}
.dp-btn.is-empty span{color:var(--faint)}
.dp-btn--cell{height:46px;border:0;border-radius:0;background:transparent;font-size:14px;white-space:nowrap;padding:0 14px}
.dp-btn--cell:focus-visible{box-shadow:inset 0 0 0 2px var(--accent);outline:none}
.dp{width:296px;padding:12px}
.dp__h{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.dp__h b{font-size:14.5px}
.dp__h button{width:32px;height:32px;border-radius:50%;border:1px solid var(--line);background:var(--card);display:grid;place-items:center;cursor:pointer;color:var(--ink)}
.dp__h button:hover{background:var(--canvas)}
.dp__h .ic{width:15px;height:15px}
.dp__g{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;text-align:center}
.dp__g span{font-size:11px;font-weight:700;color:var(--faint);padding:6px 0}
.dp__g button{height:36px;border:0;background:none;border-radius:10px;font-size:13.5px;font-weight:600;cursor:pointer;color:var(--ink)}
.dp__g button:hover{background:var(--canvas)}
.dp__g button.out{color:var(--faint)}
.dp__g button.today{box-shadow:inset 0 0 0 1.5px var(--line-2)}
.dp__g button.sel{background:var(--ink);color:var(--on-ink)}
.dp__f{display:flex;justify-content:space-between;margin-top:8px;padding-top:8px;border-top:1px solid var(--line)}

/* checkbox + switch */
.check input,input.ck{appearance:none;-webkit-appearance:none;width:18px;height:18px;border:1.5px solid var(--line-2);border-radius:6px;background:var(--card);display:inline-grid;place-content:center;cursor:pointer;flex-shrink:0;transition:background-color .15s,border-color .15s;margin:0}
.check input::after,input.ck::after{content:"";width:10px;height:10px;opacity:0;background:#fff;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat}
.check input:checked,input.ck:checked{background:var(--accent);border-color:var(--accent)}
.check input:checked::after,input.ck:checked::after{opacity:1}
.check input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.switch input{appearance:none;-webkit-appearance:none;width:38px;height:22px;border-radius:99px;background:var(--line-2);position:relative;cursor:pointer;transition:background-color .2s;flex-shrink:0;border:0;margin:0}
.switch input::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2);transition:transform .2s}
.switch input:checked{background:var(--green)}
.switch input:checked::after{transform:translateX(16px)}
.switch input:checked::before{display:none}
.check.switch input{width:38px;height:22px;border:0;border-radius:99px;background:var(--line-2);display:block}
.check.switch input::after{opacity:1;width:16px;height:16px;-webkit-mask:none;mask:none;background:#fff}
.check.switch input:checked{background:var(--green)}

/* radio cards (statement chooser, request type) */
.rcards{display:grid;gap:8px}
.rcard{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1.5px solid var(--line);border-radius:14px;cursor:pointer;transition:border-color .15s,background-color .15s}
.rcard input{appearance:none;-webkit-appearance:none;width:18px;height:18px;border:1.5px solid var(--line-2);border-radius:50%;margin:0;flex-shrink:0;display:grid;place-content:center}
.rcard input::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--accent);opacity:0}
.rcard input:checked{border-color:var(--accent)}
.rcard input:checked::after{opacity:1}
.rcard:has(input:checked){border-color:var(--accent);background:var(--accent-soft)}
.rcard b{display:block;font-size:14px}
.rcard small{font-size:12.5px;color:var(--muted)}
.rcard .rcard__v{margin-left:auto;font-weight:700;font-variant-numeric:tabular-nums}





/* modal */
.modal{position:fixed;inset:0;z-index:150;display:grid;place-items:center;padding:16px;background:rgba(10,10,10,.32);animation:fade .15s ease}
@keyframes fade{from{opacity:0}}
.modal__box{width:min(460px,100%);max-height:calc(100dvh - 32px);overflow:auto;background:var(--card);border:1px solid var(--line);border-radius:24px;padding:22px;box-shadow:0 30px 60px -20px rgba(0,0,0,.35);animation:pop .18s ease}
.modal__h{display:flex;align-items:flex-start;gap:12px;margin-bottom:16px}
.modal__h h3{font-size:18px;flex:1}
.modal__h p{margin:4px 0 0;font-size:13.5px;color:var(--muted)}
.modal__f{display:flex;gap:8px;justify-content:flex-end;margin-top:18px}
@media (max-width:900px){.modal{place-items:end center;padding:0}.modal__box{border-radius:24px 24px 0 0;width:100%;padding-bottom:calc(22px + env(safe-area-inset-bottom))}}

/* file drop */
.drop{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:22px 16px;border:1.5px dashed var(--line-2);border-radius:16px;background:var(--card-2);text-align:center;cursor:pointer;transition:border-color .15s,background-color .15s}
.drop:hover,.drop.is-over{border-color:var(--accent);background:var(--accent-soft)}
.drop .ic{width:22px;height:22px;color:var(--accent)}
.drop b{font-size:14px}
.drop small{font-size:12.5px;color:var(--muted)}
.drop input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.drop.has-file b{color:var(--green)}

/* switcher / managing bar */
.acct{cursor:pointer;transition:border-color .15s}
.acct:hover{border-color:var(--line-2)}






/* health */
.health{display:flex;align-items:center;gap:14px;padding:16px;border-radius:18px;background:var(--green-soft)}
.health .hico{width:44px;height:44px;border-radius:14px;background:var(--green);color:#fff;display:grid;place-items:center;flex-shrink:0}
.health .hico .ic{width:22px;height:22px}
.health b{display:block;font-size:15px}
.health small{font-size:12.5px;color:var(--muted)}
.health--warn{background:var(--red-soft)} .health--warn .hico{background:var(--red)}
.health--idle{background:var(--card-2)} .health--idle .hico{background:var(--faint)}

/* totals strip above tables */
.totals-strip{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;background:var(--card);border:1px solid var(--line);border-radius:18px;margin-bottom:14px;box-shadow:var(--shadow);overflow:hidden}
.totals-strip div{padding:14px 18px;border-left:1px solid var(--line);min-width:0}
.totals-strip div:first-child{border-left:0}
.totals-strip span{display:block;font-size:12px;font-weight:650;color:var(--muted);margin-bottom:4px}
.totals-strip b{font-size:20px;font-weight:700;letter-spacing:-.03em;font-variant-numeric:tabular-nums;white-space:nowrap}
.totals-strip .hl b{color:var(--accent)}
@media (max-width:900px){.totals-strip{grid-template-columns:1fr 1fr}.totals-strip div:nth-child(odd){border-left:0}.totals-strip div:nth-child(n/**/+3){border-top:1px solid var(--line)}.totals-strip div:last-child{grid-column:1/-1}.totals-strip b{font-size:17px}}

/* requests + documents */












.doc{display:flex;align-items:center;gap:14px;padding:14px 0;border-top:1px solid var(--line)}
.doc:first-child{border-top:0}
.doc__ico{width:44px;height:52px;border-radius:10px;background:var(--red-soft);color:var(--red);display:grid;place-items:center;flex-shrink:0;position:relative;font-size:9px;font-weight:800;letter-spacing:.04em}
.doc__ico .ic{width:20px;height:20px}
.doc__main{flex:1;min-width:0}
.doc__main b{display:block;font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.doc__main small{font-size:12.5px;color:var(--muted)}
.chip--wa{background:#E8F8EE;border-color:#BFE9CF;color:#128C4A}
.chip--wa:hover{border-color:#128C4A}
[data-scheme="dark"] .chip--wa{background:#12301F;border-color:#1E4A31;color:#5BD98C}
.av{overflow:hidden}
.av img{width:100%;height:100%;object-fit:cover;display:block}

.av--xl{width:72px;height:72px;font-size:24px}

.brandmini span{white-space:nowrap}
.topbar .brand small{display:block;font-size:11.5px;color:var(--faint);font-weight:600}
.seg a{display:inline-grid;place-items:center;height:30px;padding:0 14px;border-radius:99px;font-weight:650;font-size:13px;color:var(--muted)}
.seg a.is-on{background:var(--ink);color:var(--on-ink)}




@media (max-width:900px){
  
  

  /* admin edit tables → editable cards on phones */
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
}
@media (max-width:900px){
  
  .totals-strip div:first-child{display:none}
  .totals-strip div:nth-child(2),.totals-strip div:nth-child(4){border-left:0}
  .totals-strip div:nth-child(3),.totals-strip div:nth-child(5){border-left:1px solid var(--line)}
  .totals-strip div:nth-child(n/**/+4){border-top:1px solid var(--line)}
  .totals-strip div:nth-child(3){border-top:0}
  .totals-strip div:last-child{grid-column:auto}
  .totals-strip div{padding:12px 14px}
}


/* =========================================================
   v4 — refinement layer: one design system for every control
   ========================================================= */
:root{
  --h-sm:32px; --h:40px; --h-lg:46px;           /* control heights */
  --r-ctl:999px; --r-field:12px; --r-pop:16px;   /* radii */
  --ease:cubic-bezier(.2,.8,.2,1); --ease-in:cubic-bezier(.4,0,1,1);
  --t-fast:140ms; --t:180ms; --t-slow:240ms;     /* motion */
  --ring:0 0 0 3px color-mix(in srgb,var(--accent) 32%,transparent);
}
:focus-visible{outline:none;box-shadow:var(--ring)}
a:focus-visible,button:focus-visible{border-radius:inherit}
.sq,.d{background:var(--deco)}
.sq--up,.d--up{background:var(--green)} .sq--down,.d--down{background:var(--red)}
.cs__btn .ic,.search .ic,.acct .chev,.dp-btn .ic{color:var(--faint)}

/* controls: same height + radius everywhere */
.btn,.chip,.cs__btn,.select,.search input{height:var(--h)}
.btn--sm,.chip--sm{height:var(--h-sm)}
.btn--lg{height:var(--h-lg);font-size:14.5px}
.btn,.chip,.icon-btn,.opt,.nav a,.side__list a,.sumpill,.seg button,.seg a,.mtabs a,.tile,.dp__g button{transition:background-color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease),color var(--t-fast) var(--ease),transform var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease)}
.btn:active:not([disabled]),.chip:active,.icon-btn:active,.sumpill:active,.seg button:active,.tile:active{transform:scale(.97)}
.btn[disabled],.chip[disabled],.btn[aria-disabled="true"]{opacity:.45;cursor:not-allowed;transform:none}
.btn--danger:hover{border-color:var(--red);background:var(--red-soft)}
.btn--ghost.btn--danger:hover{background:var(--red-soft)}
.input:hover,.textarea:hover{border-color:var(--faint)}
.input:focus,.textarea:focus,.search input:focus{border-color:var(--ink);box-shadow:var(--ring)}
.input[disabled]{background:var(--card-2);color:var(--muted);cursor:not-allowed}
.nav a.is-on{font-weight:700}
.nav a.is-on .ic{color:var(--accent)}
.ph h1{font-size:30px}
.hello h1,.hello h1 + .hello__sub{font-size:36px}
.card__h h3,.chart figcaption > span:first-child{font-size:15px}

/* busy buttons */
.btn.is-busy,.chip.is-busy{pointer-events:none;opacity:.85}
.btn.is-busy::before,.chip.is-busy::before{content:"";width:14px;height:14px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:spin .7s linear infinite;flex-shrink:0}
.btn.is-busy .ic,.chip.is-busy .ic{display:none}
@keyframes spin{to{transform:rotate(360deg)}}

/* form validation */
.field__err{display:flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:var(--red);margin-top:2px}
.field__err::before{content:"";width:14px;height:14px;flex-shrink:0;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 8v4M12 16h.01'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 8v4M12 16h.01'/%3E%3C/svg%3E") center/contain no-repeat}
.is-invalid,.is-invalid.input,.is-invalid.textarea,.cs.is-invalid .cs__btn,.dp-btn.is-invalid,.drop.is-invalid{border-color:var(--red)!important}

.alert--info{background:var(--blue-soft);color:var(--blue)}

/* no leftover browser chrome */
input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none;appearance:none}
input[type=number]{-moz-appearance:textfield;appearance:textfield}
input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
input::-ms-reveal,input::-ms-clear{display:none}
input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus{-webkit-text-fill-color:var(--ink);box-shadow:0 0 0 40px var(--card) inset!important;transition:background-color 9999s}
textarea{scrollbar-width:thin}
.search__x{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:28px;height:28px;border-radius:50%;border:0;background:var(--canvas);color:var(--muted);display:grid;place-items:center;cursor:pointer}
.search__x .ic{position:static;transform:none;width:14px;height:14px;color:inherit}
.search__x:hover{color:var(--ink)}
.search input{padding-right:40px}

/* custom tooltip (replaces the browser's title bubble) */
.tt{position:fixed;z-index:300;pointer-events:none;background:var(--ink);color:var(--on-ink);font-size:12px;font-weight:600;padding:6px 10px;border-radius:8px;white-space:nowrap;max-width:280px;overflow:hidden;text-overflow:ellipsis;animation:ttIn var(--t-fast) var(--ease)}
@keyframes ttIn{from{opacity:0;transform:translateY(3px)}}

/* popovers + modals leave smoothly too */
.pop{transform-origin:top center;animation:pop var(--t) var(--ease)}
.pop.is-leaving{animation:popOut 120ms var(--ease-in) forwards}
@keyframes pop{from{opacity:0;transform:translateY(-4px) scale(.98)}}
@keyframes popOut{to{opacity:0;transform:translateY(-3px) scale(.985)}}
.modal{animation:fade var(--t) var(--ease)}
.modal__box{animation:modalIn var(--t-slow) var(--ease)}
@keyframes modalIn{from{opacity:0;transform:translateY(8px) scale(.985)}}
.modal.is-leaving{animation:fadeOut 160ms var(--ease-in) forwards}
.modal.is-leaving .modal__box{animation:modalOut 160ms var(--ease-in) forwards}
@keyframes fadeOut{to{opacity:0}}
@keyframes modalOut{to{opacity:0;transform:translateY(6px) scale(.99)}}
.modal--confirm .modal__box{width:min(420px,100%)}
.modal--confirm .modal__h p{white-space:pre-wrap}

/* toasts: stacked, consistent */
.toasts{position:fixed;left:50%;top:18px;transform:translateX(-50%);z-index:400;display:grid;gap:8px;justify-items:center;pointer-events:none;width:max-content;max-width:calc(100% - 32px)}
.toasts .toast{position:static;transform:none;display:flex;align-items:center;gap:8px;pointer-events:auto;animation:toastIn var(--t-slow) var(--ease),toastOut .3s var(--ease-in) 4.2s forwards;box-shadow:0 10px 30px -12px rgba(0,0,0,.35)}
.toasts .toast .ic{width:16px;height:16px;stroke-width:2.4}
.toasts .toast a{color:inherit;text-decoration:underline;font-weight:700}
.toasts .toast.is-sticky{animation:toastIn var(--t-slow) var(--ease)}
@keyframes toastIn{from{opacity:0;transform:translateY(-8px)}}
@keyframes toastOut{to{opacity:0;transform:translateY(-6px);visibility:hidden}}
body > .toast{display:none}

/* skip link */
.skip{position:fixed;left:12px;top:-60px;z-index:500;background:var(--ink);color:var(--on-ink);padding:10px 16px;border-radius:10px;font-weight:700;transition:top var(--t) var(--ease)}
.skip:focus{top:12px}
.main:focus{outline:none;box-shadow:none}

/* chart (HTML version) */
.chart__box{position:relative;display:grid;grid-template-columns:34px 1fr;grid-template-rows:210px auto;column-gap:8px}
.chart__y{position:relative;grid-row:1}
.chart__y span{position:absolute;right:0;transform:translateY(50%);font-size:11px;font-weight:600;color:var(--faint);font-variant-numeric:tabular-nums;line-height:1}
.chart__plot{position:relative;grid-row:1;grid-column:2}
.chart__grid i{position:absolute;left:0;right:0;height:0;border-top:1px dashed var(--line)}
.chart__grid i:first-child{border-top-style:solid}
.chart__bars{position:absolute;inset:0;display:flex;align-items:flex-end}
.bar{flex:1;height:100%;display:flex;align-items:flex-end;justify-content:center;border-radius:10px;cursor:default;outline:none;transition:background-color var(--t-fast) var(--ease)}
.bar:hover,.bar:focus-visible{background:var(--canvas)}
.bar:focus-visible{box-shadow:var(--ring)}
.bar__stack{width:min(62%,34px);display:flex;flex-direction:column;gap:2px;border-radius:7px 7px 0 0;overflow:hidden;min-height:3px;transition:height var(--t-slow) var(--ease)}
.bar__stack i{display:block;flex-basis:0;min-height:2px}
.bar__stack .a{background:linear-gradient(180deg,var(--accent-2),var(--accent))}
.bar__stack .b{background:repeating-linear-gradient(135deg,var(--accent) 0 2.6px,var(--accent-soft) 2.6px 7px)}
.chart__x{grid-column:2;display:flex;margin-top:8px}
.chart__x span{flex:1;text-align:center;font-size:11px;font-weight:600;color:var(--faint);white-space:nowrap}
.chart .tip{grid-column:1/-1}

/* filtered list with no matches */
.noresults{padding:28px 16px;text-align:center;color:var(--muted);font-size:14px}
.noresults b{display:block;color:var(--ink);margin-bottom:2px}

/* error page */
.errpage{min-height:100vh;display:grid;place-items:center;padding:20px}
.errbox{width:min(460px,100%);background:var(--card);border:1px solid var(--line);border-radius:24px;padding:30px;box-shadow:var(--shadow)}
.errbox__code{font-family:var(--mono);font-size:12px;font-weight:600;color:var(--accent);background:var(--accent-soft);display:inline-block;padding:4px 10px;border-radius:99px;margin-bottom:14px}
.errbox h1{font-size:24px;margin-bottom:8px}
.errbox p{color:var(--muted);margin:0 0 20px;line-height:1.55}
.errbox__f{display:flex;gap:8px;flex-wrap:wrap}

/* verified layout bugs from the width scan */
.sites{grid-template-columns:repeat(auto-fill,minmax(min(310px,100%),1fr))}
.toolbar .seg,.ph__actions .seg{max-width:100%;overflow-x:auto;scrollbar-width:none}
.toolbar .seg::-webkit-scrollbar,.ph__actions .seg::-webkit-scrollbar{display:none}
@media (max-width:900px){
  .chart__box{grid-template-rows:170px auto;grid-template-columns:28px 1fr;column-gap:6px}
  .chart__x span{font-size:10px}
  .ph h1{font-size:26px}
  .hello h1,.hello h1 + .hello__sub{font-size:28px}
  .toasts{top:auto;bottom:calc(96px + env(safe-area-inset-bottom))}
  .toolbar .seg{flex:1 1 auto}
}
@media (max-width:420px){ .chart__x span:nth-child(even){visibility:hidden} }

/* touch: bigger hit areas without changing the look */
@media (pointer:coarse){
  .btn--sm,.chip--sm{min-height:38px}
  
  .icon-btn{width:40px;height:40px}
  .opt{padding:12px}
  .dp__g button{height:40px}
}

/* smooth page-to-page navigation (Chrome/Edge/Safari 18; others just load normally) */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:180ms;animation-timing-function:var(--ease)}
.side{view-transition-name:side}
.bottombar{view-transition-name:bottombar}
::view-transition-group(side),::view-transition-group(bottombar){animation:none}

/* respect "reduce motion" */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  @view-transition{navigation:none}
}
.btn--danger-solid{background:var(--red);border-color:var(--red);color:#fff}
.btn--danger-solid:hover{background:#B42E21;border-color:#B42E21}

.sheet .proj{min-width:220px}
.side__label{padding-top:14px}
.side__list a{padding:6px 12px}
@media (min-width:901px) and (max-height:780px){ .side .promo{display:none} .side__foot{margin-top:auto} }

/* ---------- v5 security: two-step login setup, recovery codes, security log ---------- */
.steps{margin:0;padding:0;list-style:none;counter-reset:st;display:grid;gap:16px}
.steps>li{counter-increment:st;position:relative;padding-left:34px;display:grid;gap:6px;font-size:14px}
.steps>li::before{content:counter(st);position:absolute;left:0;top:0;width:22px;height:22px;border-radius:50%;background:var(--canvas);border:1px solid var(--line);display:grid;place-items:center;font:600 12px/1 var(--mono);color:var(--ink)}
.steps small{color:var(--muted);font-size:13px;line-height:1.5}
.qrbox{background:#fff;border:1px solid var(--line);border-radius:12px;padding:6px;width:max-content;max-width:100%;margin:4px 0}
.qrbox svg{display:block;width:172px;height:172px}
.mfa-confirm{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:2px}
.mfa-confirm .input{width:9.5em;letter-spacing:.12em;font-size:16px}
.mfa-confirm .alert{flex-basis:100%}
.codes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 18px;margin:12px 0;font:600 14px/1.4 var(--mono);color:var(--ink)}
.audit td{vertical-align:top}
.audit .ev{font-weight:600;color:var(--ink)}
.audit small{display:block;color:var(--muted);font-size:12px;margin-top:2px;word-break:break-word}


.audit td[data-m=end]{font-size:12px}



/* ---------- v6 instant pages: thin progress bar while a page loads in place ---------- */
.navprog{position:fixed;top:env(safe-area-inset-top,0px);left:0;height:2px;width:0;background:var(--accent);z-index:9999;opacity:0;pointer-events:none;transition:width 8s cubic-bezier(.1,.7,.2,1),opacity .2s}
.navprog.is-on{opacity:1;width:85%}
.navprog.is-done{width:100%;opacity:0;transition:width .2s ease,opacity .25s .12s}
@media (prefers-reduced-motion: reduce){.navprog{transition:none}}
main:focus{outline:none}

/* ---------- client dashboard (no-database version) ---------- */
.auth__eyebrow{display:inline-flex;align-items:center;gap:6px;margin-bottom:12px;padding:5px 11px;border-radius:99px;background:var(--card-2);border:1px solid var(--line);font-size:12px;font-weight:650;color:var(--muted)}
.auth__eyebrow .ic{width:14px;height:14px}
.nologin p b{color:var(--ink)}
.cf-turnstile{min-height:65px}
/* payments table: a little tighter on laptop screens so every column (incl. the Invoice button) fits without sideways scrolling */
@media (min-width:901px) and (max-width:1560px){#paySheet th,#paySheet td{padding-left:12px;padding-right:12px}#paySheet .proj{gap:10px}}
/* smaller laptops / tablets in landscape: Spend and Charges stay in the totals above the table */
@media (min-width:901px) and (max-width:1420px){#paySheet tr > :nth-child(3),#paySheet tr > :nth-child(4){display:none}}
@media (min-width:901px) and (max-width:1180px){#paySheet tr > :nth-child(7){display:none}#paySheet th,#paySheet td{padding-left:10px;padding-right:10px}#paySheet td.nowrap{white-space:normal}}
/* main website header + footer around the login on phones only (desktop stays the clean two-column login) */
.sitechrome{display:none}
@media (max-width:900px){
  .has-site-chrome .sitechrome{display:block}
  .has-site-chrome .auth__top{display:none}
  .has-site-chrome .auth{min-height:0}
  .has-site-chrome .auth__main{background:none;padding-top:64px}
  .has-site-chrome .auth .btn svg.ic:not(.ic--fill){fill:none;width:18px;height:18px}
  /* the website's stylesheet also styles .btn: keep the login's own buttons */
  .has-site-chrome .auth .btn{color:var(--ink);background:var(--card);border-color:var(--line-2);width:auto;font-size:13.5px;transform:none}
  .has-site-chrome .auth .btn:not(.btn--lg){height:38px;padding:0 16px}
  .has-site-chrome .auth .btn:hover{background:var(--card);border-color:var(--ink);color:var(--ink)}
  .has-site-chrome .auth .btn--ink,.has-site-chrome .auth .btn--ink:hover{background:var(--ink);border-color:var(--ink);color:var(--on-ink)}
  .has-site-chrome .auth .btn--block{width:100%}
  .has-site-chrome .auth .btn--lg{font-size:14.5px}
}

/* site cards: plan line with icon */
.site__foot .help{display:inline-flex;align-items:center;gap:6px}.site__foot .help .ic{width:15px;height:15px;flex:none}
/* work log table: fit laptops and tablets in landscape */
@media (min-width:901px) and (max-width:1180px){#logSheet th,#logSheet td{padding-left:10px;padding-right:10px}#logSheet .site-cell{white-space:normal}}

/* ---------- maintenance workload: smooth area chart ---------- */
.sw--wa{background:linear-gradient(135deg,var(--accent),var(--accent-2));border-radius:99px}
.sw--wb{background:var(--violet);border-radius:99px}
.wave{position:relative;padding:8px 0 30px 34px;user-select:none}
.wave__plot{position:relative;height:260px}
.wave__grid span{position:absolute;left:0;right:0;border-top:1px dashed var(--line);height:0}
.wave__grid i{position:absolute;left:-34px;top:-8px;width:26px;text-align:right;font-style:normal;font-size:11px;font-weight:600;color:var(--faint);font-variant-numeric:tabular-nums}
.wave svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.wave__line{fill:none;stroke-width:2.6;vector-effect:non-scaling-stroke;stroke-linecap:round}
.wave__line--a{stroke:url(#wvL)}
.wave__line--b{stroke:var(--violet);opacity:.75;stroke-width:2}
.wave__area--a{fill:url(#wvA)}
.wave__area--b{fill:url(#wvB)}
.wv-a0{stop-color:var(--accent);stop-opacity:.34}.wv-a1{stop-color:var(--accent);stop-opacity:0}
.wv-b0{stop-color:var(--violet);stop-opacity:.22}.wv-b1{stop-color:var(--violet);stop-opacity:0}
.wv-l0{stop-color:var(--accent-2)}.wv-l1{stop-color:var(--accent)}
.wave__pt{position:absolute;top:0;bottom:0;width:56px;margin-left:-28px;outline:none;cursor:pointer;z-index:2}
.wave__pt::before{content:"";position:absolute;left:50%;top:var(--ya);bottom:0;border-left:1px dashed var(--line-2);opacity:0;transition:opacity .2s}
.wave__dot{position:absolute;left:50%;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:var(--card);transition:transform .2s}
.wave__dot--a{top:var(--ya);border:3px solid var(--accent);box-shadow:0 0 0 5px var(--accent-soft)}
.wave__dot--b{top:var(--yb);width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border:2.5px solid var(--violet)}
.wave__pin{position:absolute;left:50%;top:var(--ya);transform:translate(-50%,calc(-100% - 16px)) scale(.92);opacity:0;pointer-events:none;
  display:flex;align-items:center;gap:9px;padding:8px 13px 8px 8px;border-radius:14px;white-space:nowrap;color:#fff;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));box-shadow:0 10px 24px -10px rgba(255,79,31,.55);transition:opacity .2s,transform .2s}
.wave__pin::after{content:"";position:absolute;left:50%;bottom:-5px;width:10px;height:10px;margin-left:-5px;background:var(--accent);transform:rotate(45deg);border-radius:2px}
.wave__pt.is-left .wave__pin{transform:translate(-22px,calc(-100% - 16px)) scale(.92)}.wave__pt.is-left .wave__pin::after{left:22px}
.wave__pt.is-right .wave__pin{transform:translate(calc(-100% + 22px),calc(-100% - 16px)) scale(.92)}.wave__pt.is-right .wave__pin::after{left:auto;right:17px}
.wave__pin-ic{width:28px;height:28px;border-radius:9px;background:rgba(255,255,255,.22);display:grid;place-items:center;flex:none}
.wave__pin-ic .ic{position:static;display:block;width:15px;height:15px;margin:0;color:#fff;stroke:#fff}
.wave__pin b{display:block;font-size:13.5px;line-height:1.2}
.wave__pin small{display:block;font-size:11.5px;opacity:.85;font-weight:600}
.wave__pt.is-on .wave__pin,.wave__pt:focus .wave__pin{opacity:1;transform:translate(-50%,calc(-100% - 16px))}
.wave__pt.is-left.is-on .wave__pin,.wave__pt.is-left:focus .wave__pin{transform:translate(-22px,calc(-100% - 16px))}
.wave__pt.is-right.is-on .wave__pin,.wave__pt.is-right:focus .wave__pin{transform:translate(calc(-100% + 22px),calc(-100% - 16px))}
.wave__pt:focus::before,.wave__pt.is-on::before{opacity:1}
.wave__pt:focus .wave__dot--a{transform:scale(1.15)}
.wave:has(.wave__pt:focus) .wave__pt.is-on:not(:focus) .wave__pin{opacity:0}
.wave__x{position:absolute;left:34px;right:0;bottom:0;height:20px}
.wave__x span{position:absolute;transform:translateX(-50%);font-size:12px;font-weight:600;color:var(--faint)}
@media (max-width:600px){.wave__plot{height:210px}.wave{padding-left:26px}.wave__grid i{left:-28px}.wave__x{left:26px}.wave__more{display:none}.wave-card .card__h{flex-wrap:wrap;gap:8px}.wave-card .card__h .sub{display:none}}
@media (prefers-reduced-motion:reduce){.wave__pin,.wave__dot,.wave__pt::before{transition:none}}
@media (hover:hover){
.wave__pt:hover .wave__pin{opacity:1;transform:translate(-50%,calc(-100% - 16px))}
.wave__pt.is-left:hover .wave__pin{transform:translate(-22px,calc(-100% - 16px))}
.wave__pt.is-right:hover .wave__pin{transform:translate(calc(-100% + 22px),calc(-100% - 16px))}
.wave__pt:hover::before{opacity:1}
.wave__pt:hover .wave__dot--a{transform:scale(1.15)}
.wave:has(.wave__pt:hover) .wave__pt.is-on:not(:hover) .wave__pin{opacity:0}
}

/* ---------- "You've been signed out" card ---------- */
.signedout{position:fixed;inset:0;z-index:300;display:grid;place-items:center;padding:16px;background:rgba(12,12,12,.42);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);animation:fade .2s ease}
.signedout__box{width:min(400px,100%);background:var(--card);border:1px solid var(--line);border-radius:26px;padding:30px 26px 22px;text-align:center;box-shadow:0 30px 70px -24px rgba(0,0,0,.45);animation:modalIn .28s cubic-bezier(.2,.8,.2,1)}
.signedout__ic{display:grid;place-items:center;width:56px;height:56px;margin:0 auto 16px;border-radius:18px;background:var(--accent-soft);color:var(--accent)}
.signedout__ic .ic{width:24px;height:24px}
.signedout__box h3{margin:0 0 8px;font-size:21px;letter-spacing:-.03em}
.signedout__box p{margin:0 auto 22px;max-width:320px;color:var(--muted);font-size:14px;line-height:1.55}
.signedout__alt{display:inline-block;margin-top:14px;font-size:13px;font-weight:600;color:var(--muted)}
.signedout__alt:hover{color:var(--ink)}
@media (max-width:600px){
  .signedout{place-items:end center;padding:0}
  .signedout__box{width:100%;border-radius:26px 26px 0 0;padding:26px 20px calc(20px + env(safe-area-inset-bottom));animation:sheetUp .3s cubic-bezier(.2,.8,.2,1)}
}
@keyframes sheetUp{from{transform:translateY(100%)}to{transform:none}}
@media (prefers-reduced-motion:reduce){.signedout,.signedout__box{animation:none}}

/* bottom bar: soft glow upwards only, so nothing gets cut off by the phone's own toolbar */