/* hephus.com — platform styles.
   Monochrome. Bebas Neue shouting in caps over DM Sans at light weights,
   hairline rules instead of cards, 9px labels at wide tracking. The
   discipline is borrowed from the 180 Programme's own system, which Rachel
   designed and which this was measured against and found wanting: warm
   cream, a serif, a terracotta accent, rounded cards with shadows, and
   five different button colours competing on one screen.

   Colour is spent in one place only. The admin has none; a seller's own
   accent belongs to their storefront and their academy, where student.js
   sets --accent per seller. Hephus's chrome staying black is what lets
   their colour read as theirs. */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;1,9..40,300&family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root{
  /* One name per colour, chosen by what it is for. There were two sets
     this morning, the second aliasing the first, because renaming across
     twenty-one screens looked like the expensive option. It was the
     cheaper one. */
  --ink:#0A0A0A;         /* type, rules, and the one fill */
  --ink-2:#3A3A36;       /* secondary prose */
  --ink-hover:#141414;   /* a filled button, pressed */
  --mute:#888880;        /* labels and meta */
  --faint:#D0D0CC;       /* a numeral in the margin */
  --paper:#F5F5F3;       /* the page */
  --paper-2:#FAFAF8;     /* a quieter ground inside it */
  --raised:#FFFFFF;      /* a panel sitting on the page */
  --hair:#E8E8E5;        /* every rule and border */

  /* Hephus's accent is black, on purpose. Kept as its own token rather
     than written as --ink everywhere, so putting colour back later is one
     line rather than a search. */
  --ember:#0A0A0A;

  /* Semantic colour is the exception, and it is used on text and hairlines
     rather than as a fill, so a screen never gains a second accent. */
  --ok:#2F6B4F; --warn:#8A6508; --bad:#9E3535;

  /* Revenue. The one drawn line on the dashboard, and the one place the
     monochrome rule gives way: money coming in is the figure a seller
     opens the page for, and a green line says so before the axis labels
     are read. 4.87:1 on the page, so it holds as a 2.5px line and as the
     faint wash underneath it. */
  --chart:#1F7A4C;

  --ease:cubic-bezier(.2,.8,.2,1);
  --f-display:'Bebas Neue','Arial Narrow',sans-serif;
  --f-body:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}
*{box-sizing:border-box} html,body{margin:0;padding:0}
body{background:var(--paper);color:var(--ink);font-family:var(--f-body);
     line-height:1.55;font-size:15px;font-weight:400;
     -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}

/* Bebas has one weight and no lowercase, so size and tracking carry the
   hierarchy rather than boldness. */
h1,h2,.display{font-family:var(--f-display);font-weight:400;margin:0;
               text-transform:uppercase;line-height:.95;letter-spacing:.01em}
h1{font-size:clamp(2.1rem,4vw,3.1rem)}
h2{font-size:1.9rem}
h3{font-family:var(--f-body);font-size:15px;font-weight:500;margin:0;letter-spacing:0;line-height:1.3}

/* The 9px tracked label. It appears above headings, on stat tiles, in
   table headers and on every meta line, which is most of what makes the
   180 site read as one system rather than a set of pages. */
.tag,.card h3,.side .grp,th,.stat .k{
  font-family:var(--f-body);font-size:9px;font-weight:500;
  letter-spacing:.3em;text-transform:uppercase;color:var(--mute)}

a{color:inherit;text-decoration:none} p{margin:0 0 1em}
.mute{color:var(--mute)} .small{font-size:13px}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;letter-spacing:0}
.ember{color:var(--ink)}

/* ---------- app shell ---------- */
/* The sidebar is a full-height black band. It is the only large area of
   colour on the screen and it does the job the 180 site's hero band does:
   it tells you where the page starts. */
.shell{display:grid;grid-template-columns:216px 1fr;min-height:100vh}
.side{background:var(--ink);color:rgba(255,255,255,.75);padding:26px 0;
      position:sticky;top:0;align-self:start;height:100vh;display:flex;flex-direction:column;gap:2px;
      overflow:auto}
.side .logo{font-family:var(--f-display);font-size:30px;color:#fff;letter-spacing:.06em;
            padding:0 22px 26px;display:flex;align-items:baseline;gap:2px;text-transform:uppercase}
.side .logo i{width:5px;height:5px;border-radius:50%;background:#fff;align-self:flex-start;margin-top:6px}
.side a{display:flex;align-items:center;gap:10px;padding:8px 22px;
        color:rgba(255,255,255,.62);font-weight:400;font-size:13.5px;
        border-left:2px solid transparent;transition:color .15s var(--ease)}
.side a:hover{color:#fff}
/* The current screen is marked with a white rule in the margin rather than
   a filled block, so the eye finds it without the nav gaining a second
   background colour. */
.side a.on{color:#fff;border-left-color:#fff}
.side a .dot{display:none}
.side .grp{color:rgba(255,255,255,.3);padding:22px 22px 7px}
.side .foot{margin-top:auto;padding:20px 22px 0;font-size:11px;color:rgba(255,255,255,.35);line-height:1.5}
.side .foot b{display:block;color:rgba(255,255,255,.8);font-weight:500;font-size:12px}

.main{padding:44px 48px 96px;max-width:1160px;width:100%}
.topbar{display:flex;align-items:flex-end;justify-content:space-between;
        gap:20px 28px;margin-bottom:34px;flex-wrap:wrap;
        padding-bottom:18px;border-bottom:1px solid var(--hair)}
.topbar > .row{flex:0 0 auto;align-items:center;gap:10px}
.topbar select,.topbar input[type=search]{width:auto;min-width:150px;max-width:210px}
.topbar .sub{color:var(--mute);margin-top:9px;max-width:58ch;font-size:14px;font-weight:300}
h1 + .sub{margin-top:10px}

/* ---------- the phone ---------- */
@media (max-width:720px){
  .shell{grid-template-columns:1fr}
  .main{padding:20px 18px 90px}
  .side{position:sticky;top:0;z-index:30;height:auto;padding:0;
        flex-direction:column;gap:0;background:var(--ink);overflow:visible}
  .side .logo{padding:14px 18px;font-size:24px;order:-1}
  .side .grp{display:none}
  .side a{display:none}
  .side .foot{display:none;padding:14px 18px}
  .side.open a{display:flex;padding:12px 18px;border-left:0}
  .side.open .grp{display:block;padding:14px 18px 5px}
  .side.open .foot{display:block}
  .side.open{max-height:80vh;overflow:auto}
  .navtoggle{position:absolute;top:13px;right:14px;background:transparent;
             border:1px solid rgba(255,255,255,.3);color:#fff;font-family:var(--f-body);
             font-size:9px;font-weight:500;letter-spacing:.3em;text-transform:uppercase;
             padding:8px 13px;cursor:pointer}
  .tabbar{position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;
          background:var(--raised);border-top:1px solid var(--hair);
          padding-bottom:env(safe-area-inset-bottom)}
  .tabbar a{flex:1;text-align:center;padding:11px 4px 13px;
            color:var(--mute);font-size:9px;font-weight:500;letter-spacing:.2em;text-transform:uppercase}
  .tabbar a.on{color:var(--ink)}
  .tabbar a b{display:block;font-family:var(--f-display);font-size:19px;font-weight:400;
              line-height:1.2;letter-spacing:.02em}
  .tbl{margin-left:-18px;margin-right:-18px;padding:0 18px}
  .topbar{align-items:flex-start;gap:12px}
  .modal{padding:22px}
  .btn{padding:12px 18px}
}
@media (min-width:721px){.tabbar,.navtoggle{display:none}}

/* ---------- components ---------- */
/* Black fill or a hairline outline, and nothing in between. Five button
   colours on one screen was the loudest thing about the old design. */
.btn{display:inline-flex;align-items:center;gap:8px;background:var(--ink);color:#fff;
     border:1px solid var(--ink);border-radius:0;padding:11px 20px;
     font-family:var(--f-body);font-size:9px;font-weight:500;letter-spacing:.25em;
     text-transform:uppercase;cursor:pointer;white-space:nowrap;
     transition:background .15s var(--ease),border-color .15s var(--ease)}
.btn:hover{background:var(--ink-hover)}
.btn:disabled{opacity:.35;cursor:not-allowed}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--hair)}
.btn.ghost:hover{background:transparent;border-color:var(--ink)}
.btn.dark{background:var(--ink);border-color:var(--ink)}
.btn.sm{padding:7px 13px;letter-spacing:.2em}
.btn.danger{background:transparent;color:var(--bad);border-color:var(--hair)}
.btn.danger:hover{border-color:var(--bad)}

/* A panel is a hairline and a ground, never a rounded box with a shadow.
   Eight shadowed boxes down a page made eight equally important things,
   which reads the same as none of them being important. */
.card{background:var(--raised);border:1px solid var(--hair);border-radius:0;
      padding:26px 28px;box-shadow:none}
.card h3{margin-bottom:16px}

/* A 1px gap over the border colour makes the hairlines BETWEEN cells,
   so a row of figures reads as one ruled object rather than four
   floating boxes. */
.grid{display:grid;gap:1px;background:var(--hair);border:1px solid var(--hair)}
.grid > *{background:var(--raised)}
.grid > .card{border:0}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
@media (max-width:900px){.g3,.g4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.g2,.g3,.g4{grid-template-columns:1fr}}

/* Figures are set in the display face at a size nothing else on the page
   reaches, which is what makes one of them the first thing you read. */
.stat{background:var(--raised);border:0;border-radius:0;padding:24px 26px;
      display:flex;flex-direction:column;gap:0;min-height:168px}
.stat .k{margin-bottom:16px;display:block}
.stat .v{display:block;margin-bottom:10px;font-family:var(--f-display);font-size:2.9rem;line-height:.9;
         font-variant-numeric:tabular-nums;letter-spacing:.01em;color:var(--ink)}
.stat .d{font-size:12px;color:var(--mute);margin-top:auto;padding-top:14px;line-height:1.5;font-weight:300}
.stat.hero{background:var(--ink);color:#fff;padding:24px 26px;max-width:none}
.stat.hero .k{color:rgba(255,255,255,.45)}
.stat.hero .v{color:#fff;font-size:4rem}
.stat.hero .d{color:rgba(255,255,255,.55)}
@media (max-width:900px){.stat.hero .v{font-size:3rem}}

table{width:100%;border-collapse:collapse;font-size:14px;font-variant-numeric:tabular-nums}
th{text-align:left;padding:0 12px 11px;border-bottom:1px solid var(--hair)}
td{padding:14px 12px;border-bottom:1px solid var(--hair);vertical-align:top;font-weight:300}
td b,td strong{font-weight:500}
tr:last-child td{border-bottom:0}
.tbl{overflow-x:auto}

/* Status is carried by a hairline and the word itself rather than a filled
   lozenge, so a table of twenty rows does not become twenty colour chips. */
.pill{display:inline-block;padding:3px 9px;border-radius:0;font-size:9px;font-weight:500;
      letter-spacing:.2em;text-transform:uppercase;background:transparent;
      border:1px solid var(--hair);color:var(--mute)}
.pill.ok{border-color:var(--ok);color:var(--ok)}
.pill.warn{border-color:var(--warn);color:var(--warn)}
.pill.bad{border-color:var(--bad);color:var(--bad)}
.pill.ember{border-color:var(--ink);color:var(--ink)}
.pill.ink{background:var(--ink);border-color:var(--ink);color:#fff}

label{display:block;font-size:9px;font-weight:500;letter-spacing:.3em;text-transform:uppercase;
      color:var(--mute);margin:20px 0 8px}
input,select,textarea{width:100%;font-family:var(--f-body);font-size:14px;font-weight:400;
      padding:11px 13px;border:1px solid var(--hair);border-radius:0;
      background:var(--raised);color:var(--ink)}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--ink)}
textarea{min-height:110px;resize:vertical;line-height:1.6}

.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.row.between{justify-content:space-between}
.empty{padding:60px 34px;text-align:center;color:var(--mute);border:1px solid var(--hair);
       border-radius:0;background:var(--raised);font-weight:300}
.empty b{display:block;font-family:var(--f-display);color:var(--ink);font-size:28px;
         text-transform:uppercase;letter-spacing:.02em;margin-bottom:12px;font-weight:400}
.toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);background:var(--ink);
       color:#fff;padding:14px 24px;border-radius:0;font-size:9px;font-weight:500;
       letter-spacing:.25em;text-transform:uppercase;box-shadow:none;opacity:0;
       pointer-events:none;transition:opacity .2s var(--ease);z-index:50}
.toast.on{opacity:1}
.demo-bar{background:var(--ink);color:rgba(255,255,255,.6);font-size:9px;font-weight:500;
          letter-spacing:.25em;text-transform:uppercase;padding:11px 14px;text-align:center;border-bottom:0}
.demo-bar b{color:#fff;font-weight:500}
.demo-bar .kbd,.demo-bar code{background:transparent;border:0;border-bottom:1px solid rgba(255,255,255,.35);
       color:rgba(255,255,255,.85);padding:0;font-size:9px;letter-spacing:.15em}
.blur{filter:blur(5px);user-select:none}

.bars{display:flex;align-items:flex-end;gap:6px;height:120px;padding-top:10px}
.bars .b{flex:1;background:var(--ink);border-radius:0;min-height:2px;position:relative}
.bars .b span{position:absolute;bottom:-20px;left:0;right:0;text-align:center;font-size:9px;
              letter-spacing:.15em;text-transform:uppercase;color:var(--mute)}
.log{font-size:13px;font-weight:300}
.log .e{display:grid;grid-template-columns:150px 110px 1fr;gap:10px;padding:12px 0;
        border-bottom:1px solid var(--hair)}
.log .e:last-child{border-bottom:0} .log .t{color:var(--mute)}
.kbd{font-family:ui-monospace,Menlo,monospace;background:var(--paper-2);border:1px solid var(--hair);
     padding:2px 6px;border-radius:0;font-size:11px}
.modal-bg{position:fixed;inset:0;background:rgba(10,10,10,.7);display:none;align-items:center;
          justify-content:center;z-index:40;padding:20px}
.modal-bg.on{display:flex}
.modal{background:var(--raised);border-radius:0;padding:34px;max-width:620px;width:100%;
       max-height:90vh;overflow:auto}
.tabs{display:flex;gap:28px;border-bottom:1px solid var(--hair);margin-bottom:26px}
.tabs button{background:none;border:0;padding:0 0 13px;font-family:var(--f-body);font-size:9px;
             font-weight:500;letter-spacing:.25em;text-transform:uppercase;color:var(--mute);
             cursor:pointer;border-bottom:1px solid transparent;margin-bottom:-1px}
.tabs button.on{color:var(--ink);border-bottom-color:var(--ink)}
/* A switch is also a <label>, so it inherits the 9px tracked capitals that
   suit a field caption and ruin a sentence. "Post to my community" set in
   those wrapped over three lines in a table cell. The caption treatment is
   for names of fields; a switch says something in words and keeps them. */
.switch{display:inline-flex;align-items:center;gap:9px;cursor:pointer;
        font-size:13px;font-weight:400;letter-spacing:0;text-transform:none;
        color:var(--ink);margin:0;line-height:1.45}
.switch input{width:auto}

/* ---------- marketing / auth ---------- */
.mk{max-width:1080px;margin:0 auto;padding:0 24px}
.nav{display:flex;align-items:center;justify-content:space-between;padding:22px 0}
.nav .logo{font-family:var(--f-display);font-size:30px;letter-spacing:.06em;text-transform:uppercase;display:flex;align-items:center;gap:10px;text-decoration:none}
.nav .logo i{width:10px;height:10px;border-radius:50%;background:var(--ember);box-shadow:0 0 16px var(--ember)}
.hero{padding:70px 0 40px;max-width:760px}
.hero h1{font-size:clamp(2.6rem,6vw,4.4rem);margin-bottom:18px}
.hero p{font-size:1.15rem;color:var(--ink-2);max-width:600px}
.feat{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;padding:30px 0 70px}
@media (max-width:760px){.feat{grid-template-columns:1fr}}
/* A card heading is a label inside the admin, where the card's contents
   are the thing being read. On the marketing page the heading IS the
   thing, so it takes the display face and the body text sits under it. */
.feat .card h3{font-family:var(--f-display);font-size:1.25rem;letter-spacing:.03em;
               text-transform:uppercase;color:var(--ink);margin-bottom:10px}
footer{border-top:1px solid var(--hair);padding:26px 0;color:var(--mute);font-size:13px}
footer a{margin-right:16px}

/* ---------- charts and change chips ---------- */
.chart{width:100%;height:auto;display:block;overflow:visible;min-height:200px}
.chart-wrap{min-height:210px}
.chart .gl{stroke:var(--hair);stroke-width:1}
.chart .ga{fill:var(--mute);font-size:11px;text-anchor:end;font-variant-numeric:tabular-nums}
.chart .gx{fill:var(--mute);font-size:11px}
.chart .ln{fill:none;stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
/* Last period, behind. Dashed and muted so it reads as context rather than
   as a second thing that happened. */
.chart .cmp{fill:none;stroke:var(--mute);stroke-width:1.5;stroke-dasharray:3 4;opacity:.7}
.chart-empty{padding:44px 0;text-align:center;color:var(--mute);font-size:14px}

/* A change reads as text with an arrow rather than a coloured lozenge.
   Four filled pills across a row of figures put four more colours on a
   page that has one. The direction is carried by the arrow, the colour
   only reinforces it. */
.chip{display:inline-flex;align-items:center;gap:5px;font-size:9px;font-weight:500;
      padding:0;border-radius:0;background:transparent;white-space:nowrap;
      letter-spacing:.2em;text-transform:uppercase}
.chip.up{color:var(--ok)}
.chip.down{color:var(--bad)}
.chip.flat{color:var(--mute)}
/* On the black tile the semantic greens and reds go muddy, so direction is
   carried by the arrow alone and the text stays white. */
.stat.hero .chip,.stat.hero .chip.up,.stat.hero .chip.down,.stat.hero .chip.flat{color:rgba(255,255,255,.7)}

/* ---------------------------------------------------------------- landing
   The front door had a headline, two buttons and six identically bordered
   boxes in a grid, which is a feature list with a border on it rather than
   a page. It carries the same devices as the rest of the system: full
   width bands to separate one idea from the next, a ghosted word behind
   the opening, numbered rows with hairlines instead of cards, and one
   statement given a whole black band to itself.

   Its own prefix rather than reusing .hero and .feat, because .hero is
   already the dashboard's first figure and the two collided twice. */
.lp-band{width:100%;padding:0 32px}
.lp-in{max-width:1100px;margin:0 auto;width:100%}
.lp-dark{background:var(--ink);color:#fff;position:relative;overflow:hidden}
.lp-light{background:var(--paper)}
.lp-paper{background:var(--paper-2)}

.lp-nav{display:flex;align-items:center;justify-content:space-between;padding:20px 0}
.lp-nav .logo{font-family:var(--f-display);font-size:28px;letter-spacing:.06em;
              text-transform:uppercase;color:#fff;display:flex;align-items:flex-start;gap:3px}
.lp-nav .logo i{width:5px;height:5px;border-radius:50%;background:#fff;margin-top:5px}
.lp-nav .btn{border-color:rgba(255,255,255,.3);background:transparent;color:#fff}
.lp-nav .btn:hover{border-color:#fff;background:transparent}
.lp-nav .btn.solid{background:#fff;color:var(--ink);border-color:#fff}
.lp-nav .btn.solid:hover{background:rgba(255,255,255,.85)}

/* The word set enormous behind the opening, clipped by the band. Sized in
   vw so it stays the same proportion of the page at any width, and kept
   out of the accessibility tree since it is the logo repeated. */
.lp-mark{position:absolute;right:-4vw;top:50%;transform:translateY(-50%);
         font-family:var(--f-display);font-size:26vw;line-height:.8;letter-spacing:.02em;
         color:rgba(255,255,255,.035);pointer-events:none;user-select:none;white-space:nowrap}

.lp-hero{padding:90px 0 100px;position:relative;z-index:1;max-width:840px}
.lp-hero .tag{color:rgba(255,255,255,.45);display:block;margin-bottom:22px}
.lp-hero h1{font-size:clamp(2.8rem,7vw,5.4rem);line-height:.92;color:#fff;
            max-width:13ch;text-wrap:balance}
.lp-hero p{margin:26px 0 0;font-size:1.05rem;font-weight:300;line-height:1.65;
           color:rgba(255,255,255,.7);max-width:56ch}
.lp-hero .row{margin-top:34px;gap:14px}
.lp-hero .btn{background:#fff;color:var(--ink);border-color:#fff}
.lp-hero .btn:hover{background:rgba(255,255,255,.85)}
.lp-hero .btn.ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.35)}
.lp-hero .btn.ghost:hover{border-color:#fff}

/* Numbered rows with a hairline between them. The number sits in the
   margin at display size and faint, so it orders the list without
   competing with the thing it numbers. */
.lp-list{padding:74px 0 84px}
.lp-list > .tag{display:block;margin-bottom:30px}
.lp-row{display:grid;grid-template-columns:64px 1fr 1.15fr;gap:0 26px;align-items:baseline;
        padding:24px 0;border-top:1px solid var(--hair)}
.lp-row:last-child{border-bottom:1px solid var(--hair)}
.lp-row .n{font-family:var(--f-display);font-size:22px;color:var(--faint);letter-spacing:.04em}
.lp-row h3{font-family:var(--f-display);font-size:1.45rem;letter-spacing:.03em;
           text-transform:uppercase;color:var(--ink);line-height:1.05}
.lp-row p{margin:0;color:var(--mute);font-weight:300;line-height:1.6;max-width:52ch}
@media (max-width:820px){
  .lp-row{grid-template-columns:46px 1fr;gap:4px 16px}
  .lp-row p{grid-column:2}
}

/* One statement with a band to itself. The figure it turns on is the
   percentage a seller keeps, which is the thing every other platform
   answers differently. */
.lp-claim{padding:88px 0;text-align:center}
.lp-claim .big{font-family:var(--f-display);font-size:clamp(4.5rem,13vw,10rem);line-height:.85;
               color:#fff;letter-spacing:.01em}
.lp-claim .tag{display:block;color:rgba(255,255,255,.45);margin-bottom:24px}
.lp-claim p{margin:28px auto 0;max-width:50ch;color:rgba(255,255,255,.7);
            font-weight:300;line-height:1.65}

.lp-signin{padding:80px 0 90px;max-width:420px;margin:0 auto;text-align:center}
.lp-signin h2{font-size:2.2rem;margin-bottom:10px}
.lp-signin p.sub{color:var(--mute);font-weight:300;margin:0 auto 8px;max-width:34ch}
.lp-signin label{text-align:left}
.lp-signin input{text-align:center}
.lp-signin .btn{width:100%;justify-content:center;margin-top:18px}

.lp-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;
         padding:26px 0;border-top:1px solid var(--hair);flex-wrap:wrap}
.lp-foot a,.lp-foot span{font-size:9px;font-weight:500;letter-spacing:.25em;
                         text-transform:uppercase;color:var(--mute)}
.lp-foot a{margin-right:24px}
.lp-foot a:hover{color:var(--ink)}
@media (max-width:720px){
  .lp-band{padding:0 18px}
  .lp-hero{padding:56px 0 64px}
  .lp-mark{font-size:40vw;right:-14vw}
  .lp-claim{padding:60px 0}
  .lp-list{padding:52px 0 60px}
}

/* ---------- Hephus Studio workspace ----------
   The creator workspace is not a student's academy. Academy themes are
   applied by student.js/store.css on public seller pages; this layer gives
   the internal builder its own calm, product-like visual language. */
:root{
  --ink:#f2ebe5;
  --ink-2:#b6aaa2;
  --ink-hover:#ff8340;
  --mute:#8c817a;
  --faint:#5f554f;
  --paper:#0c0b0b;
  --paper-2:#11100f;
  --raised:#171514;
  --hair:#2e2825;
  --ember:#ff6a1f;
  --ok:#4dd690;
  --warn:#ffc53d;
  --bad:#ff5c7a;
  --chart:#4dd690;
  --f-display:'Space Grotesk', 'DM Sans', sans-serif;
  --f-body:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}
body{background:var(--paper);color:var(--ink);font-size:14px}
h1,h2,.display{font-family:var(--f-display);text-transform:none;letter-spacing:-.045em;line-height:1.02}
h1{font-size:clamp(2rem,3.3vw,3rem);font-weight:600}
h2{font-size:1.65rem;font-weight:600}
h3{font-size:15px;font-weight:600;color:var(--ink)}
.tag,.card h3,.side .grp,th,.stat .k{font-family:var(--f-body);font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.shell{grid-template-columns:248px 1fr;min-height:100vh}
.side{background:#090808;color:rgba(255,255,255,.68);padding:22px 12px 18px;gap:3px;box-shadow:10px 0 30px rgba(0,0,0,.28)}
.side .logo{font-family:var(--f-display);font-size:25px;font-weight:700;letter-spacing:-.06em;text-transform:none;padding:8px 14px 34px;color:#fff}
.side .logo i{width:7px;height:7px;background:var(--ember);margin:0 0 3px 2px}
.side .grp{color:rgba(255,255,255,.34);padding:18px 14px 7px;font-size:10px;letter-spacing:.13em}
.side a{border-left:0;border-radius:10px;padding:10px 14px;gap:11px;color:rgba(255,255,255,.63);font-size:13px;font-weight:500;transition:background .15s var(--ease),color .15s var(--ease)}
.side a:before{content:'';width:7px;height:7px;border:1px solid currentColor;border-radius:3px;opacity:.65}
.side a:hover{background:rgba(255,255,255,.07);color:#fff}
.side a.on{background:var(--ember);color:#180b04;border-left:0;box-shadow:0 8px 20px rgba(255,106,31,.2)}
.side a.on:before{background:#180b04;border-color:#180b04}
.side .foot{padding:16px 14px 0;color:rgba(255,255,255,.35);font-size:11px}
.side .foot b{color:#fff;font-size:12px;font-weight:600;margin-bottom:2px}
.main{padding:36px 48px 90px;max-width:1380px}
.topbar{align-items:center;margin-bottom:26px;padding-bottom:0;border-bottom:0}
.topbar .sub{color:var(--ink-2);font-size:14px;font-weight:400;margin-top:8px}
.topbar > .row{gap:9px}
.topbar select,.topbar input[type=search]{border-radius:9px;border-color:var(--hair);background:var(--raised);min-height:40px}
.btn{background:var(--ember);border-color:var(--ember);border-radius:10px;padding:10px 16px;font-size:11px;font-weight:600;letter-spacing:.02em;text-transform:none;box-shadow:0 7px 16px rgba(107,99,232,.16)}
.btn:hover{background:#5951d2;border-color:#5951d2}
.btn.ghost{background:var(--raised);border-color:var(--hair);color:var(--ink);box-shadow:none}
.btn.ghost:hover{background:#f4f3ff;border-color:#c9c5ff}
.card{background:var(--raised);border:1px solid var(--hair);border-radius:16px;padding:23px 24px;box-shadow:0 7px 24px rgba(35,49,85,.045)}
.card h3{margin-bottom:16px}
.grid{gap:14px;background:transparent;border:0}
.grid > *,.grid > .card{background:var(--raised);border:1px solid var(--hair);border-radius:16px}
.stat{border:1px solid var(--hair);border-radius:16px;padding:20px 21px;min-height:138px;box-shadow:0 7px 24px rgba(35,49,85,.04)}
.stat .k{margin-bottom:17px}
.stat .v{font-family:var(--f-body);font-size:3.05rem;font-weight:300;letter-spacing:-.075em;line-height:.95;color:var(--ink);font-variant-numeric:tabular-nums}
.stat.hero{background:linear-gradient(135deg,#42d995,#237e58);border-color:#42d995;color:#07170f;box-shadow:0 12px 26px rgba(77,214,144,.18)}
.stat.hero .k{color:rgba(7,23,15,.68)}
.stat.hero .v{color:#07170f}
.stat.hero .d{color:rgba(7,23,15,.72)}
table{font-size:13px}
th{padding:0 12px 12px;border-bottom:1px solid var(--hair)}
td{padding:15px 12px;border-bottom:1px solid var(--hair);font-weight:400;color:var(--ink-2)}
td b,td strong{color:var(--ink);font-weight:600}
.pill{padding:4px 9px;border-radius:999px;font-size:10px;letter-spacing:.04em;background:#231f1c;border-color:transparent;color:var(--ink-2)}
.pill.ok{background:#123a2b;border-color:transparent;color:#72e5ac}.pill.warn{background:#493617;border-color:transparent;color:#ffd269}.pill.bad{background:#4b202a;border-color:transparent;color:#ff8da2}.pill.ink,.pill.ember{background:#4b2415;border-color:transparent;color:#ff9a66}
.chip.up{color:var(--ok)}.chip.down{color:var(--bad)}.chip.flat{color:var(--mute)}
.stat.hero .chip.up{color:#062f1d}.stat.hero .chip.down{color:#47131e}.stat.hero .chip.flat{color:rgba(7,23,15,.68)}
label{font-size:10px;letter-spacing:.12em;margin:18px 0 8px}
input,select,textarea{border-radius:10px;border-color:var(--hair);padding:11px 13px;background:var(--raised)}
input:focus,select:focus,textarea:focus{border-color:#8e87f2;box-shadow:0 0 0 3px rgba(112,104,237,.12)}
.empty{padding:56px 34px;border-radius:16px;background:var(--raised);box-shadow:0 7px 24px rgba(35,49,85,.045)}
.empty b{font-family:var(--f-display);font-size:25px;text-transform:none;letter-spacing:-.04em}
.demo-bar{background:#2c1d14;color:#e5b18d;border-bottom:1px solid #6a3d24;border-radius:10px;padding:10px 14px;text-align:left;font-size:11px;letter-spacing:.01em;text-transform:none;margin-bottom:20px}
.demo-bar b{color:#ff9a66}.demo-bar .kbd,.demo-bar code{color:#ffb58f;border-bottom-color:#9b5a36;font-size:11px;letter-spacing:0}
.tabs{gap:24px;border-bottom-color:var(--hair)}
.tabs button{font-size:10px;letter-spacing:.1em;text-transform:uppercase}
.tabs button.on{color:var(--ember);border-bottom-color:var(--ember)}
.toast{background:var(--ink);border-radius:10px;box-shadow:0 12px 28px rgba(15,24,48,.2);font-size:11px;letter-spacing:.03em;text-transform:none}
@media (max-width:900px){.main{padding:28px 26px 84px}}
@media (max-width:720px){
  .shell{grid-template-columns:1fr}.main{padding:18px 18px 84px}.side{background:#090808}.side .logo{padding:13px 18px 16px}.side a{border-radius:0;padding:12px 18px}.side a.on{border-radius:9px;margin:0 8px;padding-left:10px}.topbar{margin-bottom:20px}.topbar .sub{font-size:13px}
}