/* Sphere Fabrica Portal */
@import url('https://fonts.googleapis.com/css2?family=League+Spartan:wght@300;400;500;600;700;800;900&display=swap');

/* ── SPHERE FABRICA BRAND ───────────────────────────────────────────────────────
   Blue #045cb4 (the globe) and deep navy #0a2547, per spherefabrica.co.za. This
   portal shipped in FreedomHub's gold/charcoal, which is our brand, not theirs —
   the client's staff open this every day and it has to look like their company.
   The variable NAMES stay --gold/--char because ~48 files reference them; renaming
   them would be churn with a real chance of missing one and leaving a gold patch.
   Read them as "accent" and "dark".

   --on-dark exists because one accent can't do both jobs. Gold was light enough to
   sit on near-black AND dark enough to read on white. Blue is not: #045cb4 on navy
   is unreadable. So anything painted on a dark ground uses --on-dark instead. */
:root {
  --gold:#045cb4; --gold-l:#2a7fd4; --gold-d:#023f7d;
  --on-dark:#8fbdf0;
  --char:#0a2547; --char-l:#12294a; --char-m:#1c3a63;
  --white:#fff; --body:#333; --muted:#666;
  --border:#e8e8e8; --border-d:#1c3a63;
  --success:#3a8a54; --warn:#b87400; --danger:#c0392b;
  --r:4px; --shadow:0 2px 8px rgba(0,0,0,.08);
  --font:'League Spartan','Helvetica Neue',Arial,sans-serif;
  --nav:220px;
  /* aliases used by page-scoped styles */
  --card-bg:#ffffff; --bg:#f6f6f6; --text:#333333;
}

*{margin:0;padding:0;box-sizing:border-box}
/* STANDARD RULE (Ismari 2026-07-28): the page must stay fixed at 100% width — never
   drift/scroll left-right. Any wide content scrolls INSIDE its own container
   (.table-wrap etc.), never the whole page. Applies on every screen size. */
html,body{max-width:100%;overflow-x:hidden}
body{font-family:var(--font);color:var(--body);background:#f6f6f6;font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:var(--gold);text-decoration:none}
button{font-family:var(--font);cursor:pointer}
input,select,textarea{font-family:var(--font)}

/* ── LAYOUT ── */
#shell{display:flex;min-height:100vh}
#nav{width:var(--nav);background:var(--char);color:#fff;display:flex;flex-direction:column;position:fixed;top:0;left:0;height:100vh;z-index:100;overflow-y:auto}
/* min-width:0 lets the content column shrink to the viewport so a wide table
   scrolls INSIDE its own box (.table-wrap) instead of pushing the whole page
   sideways — otherwise a flex child keeps its content's intrinsic width and the
   page scrolls left/right (Ismari, Weighbridge, 2026-07-21). */
#main{margin-left:var(--nav);flex:1;min-width:0;display:flex;flex-direction:column;min-height:100vh}
#topbar{background:var(--white);border-bottom:1px solid var(--border);padding:0 28px;height:56px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:50}
#content{padding:28px;flex:1;min-width:0;max-width:100%}

/* ── NAV ── */
.nav-brand{padding:20px 20px 16px;border-bottom:1px solid var(--border-d);display:flex;align-items:center;gap:10px}
.nav-brand img{height:28px}
.nav-brand-name{font-size:15px;font-weight:800;color:#fff;letter-spacing:-.2px}
.nav-brand-sub{font-size:10px;color:rgba(255,255,255,.4);letter-spacing:.5px;text-transform:uppercase;display:block;margin-top:1px}

.nav-entity{padding:12px 16px;background:rgba(143,189,240,.1);border-bottom:1px solid var(--border-d);font-size:11px}
.nav-entity label{color:rgba(255,255,255,.4);font-size:10px;font-weight:700;letter-spacing:1px;text-transform:uppercase;display:block;margin-bottom:5px}
#entity-select{width:100%;background:var(--char-m);color:#fff;border:1px solid rgba(255,255,255,.1);border-radius:var(--r);padding:6px 8px;font-size:12px;font-family:var(--font);font-weight:600}
#entity-select:focus{outline:none;border-color:var(--on-dark)}

.nav-section{padding:14px 16px 6px;font-size:10px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:rgba(255,255,255,.35);display:flex;align-items:center;justify-content:space-between;cursor:pointer;user-select:none}
.nav-section:hover{color:rgba(255,255,255,.7)}
.nav-caret{font-size:10px;opacity:.55;transition:transform .18s}
.nav-group.open>.nav-section .nav-caret{transform:rotate(90deg)}
/* Collapsible sidebar sections (Claire 2026-08-13): collapsed by default, the
   active section open, hover reveals a group inline, click the heading pins it. */
.nav-group-items{overflow:hidden;max-height:0;transition:max-height .22s ease}
.nav-group.open>.nav-group-items{max-height:1600px}
/* Click the heading to open/close (no hover-reveal — hover made it jump — Claire 2026-08-13). */
.nav-item{display:flex;align-items:center;gap:10px;padding:9px 18px;color:rgba(255,255,255,.7);font-size:13px;font-weight:500;cursor:pointer;transition:all .15s;text-decoration:none}
.nav-item:hover{background:rgba(255,255,255,.06);color:#fff}
.nav-item.active{background:rgba(143,189,240,.16);color:var(--on-dark);border-left:3px solid var(--on-dark)}
.nav-item .ni{font-size:16px;min-width:20px}
.nav-footer{margin-top:auto;padding:16px;border-top:1px solid var(--border-d);font-size:11px;color:rgba(255,255,255,.3)}

/* ── TOPBAR ── */
.topbar-left h2{font-size:18px;font-weight:800;color:var(--char);letter-spacing:-.3px}
.topbar-left p{font-size:12px;color:var(--muted);margin-top:1px}
.topbar-right{display:flex;align-items:center;gap:12px}
.topbar-user{font-size:12px;font-weight:600;color:var(--char)}
.topbar-role{font-size:10px;color:var(--gold);font-weight:700;text-transform:uppercase;letter-spacing:.8px}
.btn-logout{background:none;border:1px solid var(--border);color:var(--muted);font-size:11px;font-weight:600;padding:5px 12px;border-radius:var(--r);transition:.15s}
.btn-logout:hover{border-color:var(--danger);color:var(--danger)}

/* ── CARDS ── */
.card{background:var(--white);border:1px solid var(--border);border-radius:var(--r);box-shadow:var(--shadow);margin-bottom:20px}
.card-header{padding:16px 20px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
.card-header h3{font-size:14px;font-weight:700;color:var(--char)}
.card-body{padding:20px}
.card-footer{padding:12px 20px;border-top:1px solid var(--border);background:#fafafa}

/* ── KPIS ── */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px;margin-bottom:24px}
.kpi{background:var(--white);border:1px solid var(--border);border-radius:var(--r);padding:18px 20px;box-shadow:var(--shadow)}
.kpi-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.kpi-icon{width:36px;height:36px;border-radius:var(--r);display:flex;align-items:center;justify-content:center;font-size:18px}
.kpi-trend{font-size:11px;font-weight:700;padding:2px 7px;border-radius:10px}
.kpi-trend.up{background:#edf7f1;color:var(--success)}
.kpi-trend.warn{background:#fff8e6;color:var(--warn)}
.kpi-trend.down{background:#fdf0ee;color:var(--danger)}
.kpi .value{font-size:26px;font-weight:800;color:var(--char);line-height:1;margin-bottom:3px}
.kpi .label{font-size:11px;color:var(--muted);font-weight:600}

/* ── TABLES ── */
/* Real-data rules: grids taller than a screen scroll INSIDE the wrap so the
   header can stick; first column sticks on horizontal scroll; long cells
   ellipsize instead of wrapping the row into a paragraph. */
.table-wrap{overflow:auto;max-width:100%;max-height:calc(100vh - 200px)}
table{width:100%;border-collapse:collapse;font-size:13px}
th{background:var(--char);color:var(--on-dark);padding:9px 14px;text-align:left;font-size:10px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;white-space:nowrap}
td{padding:10px 14px;border-bottom:1px solid var(--border);vertical-align:middle;text-align:left;max-width:420px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
tr:hover td{background:#fafafa}
tr:last-child td{border-bottom:none}
.table-wrap thead th{position:sticky;top:0;z-index:3}
.table-wrap th:first-child{position:sticky;left:0;z-index:4}
.table-wrap td:first-child{position:sticky;left:0;z-index:1;background:var(--white)}
.table-wrap tr:hover td:first-child{background:#fafafa}
.table-wrap td.empty{position:static;max-width:none;white-space:normal}

/* ── BADGES ── */
.badge{display:inline-block;font-size:10px;font-weight:700;padding:3px 9px;border-radius:10px;text-transform:uppercase;letter-spacing:.5px;white-space:nowrap}
.badge-gold{background:rgba(4,92,180,.13);color:var(--gold-d)}
.badge-green{background:#edf7f1;color:#2a6a3e}
.badge-blue{background:#eef4ff;color:#2a5aaa}
.badge-orange{background:#fff4e6;color:#8a4a00}
.badge-red{background:#fdf0ee;color:var(--danger)}
.badge-grey{background:#f0f0f0;color:#555}
.badge-char{background:var(--char);color:var(--on-dark)}

/* ── BUTTONS ── */
.btn{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border-radius:var(--r);font-size:13px;font-weight:700;border:none;cursor:pointer;transition:.15s;font-family:var(--font)}
.btn-primary{background:var(--gold);color:#fff}
.btn-primary:hover{background:var(--gold-l)}
.btn-dark{background:var(--char);color:var(--on-dark)}
.btn-dark:hover{background:var(--char-l)}
.btn-ghost{background:none;border:1px solid var(--border);color:var(--body)}
.btn-ghost:hover{border-color:var(--char);color:var(--char)}
.btn-danger{background:var(--danger);color:#fff}
.btn-sm{padding:5px 12px;font-size:12px}

/* ── FORMS ── */
/* min-width:0 lets a .form-row shrink when it's a grid/flex child (e.g. the blend
   modal's responsive header grid), instead of Safari sizing it to its widest control. */
.form-row{margin-bottom:16px;min-width:0}
.form-row label{display:block;font-size:11px;font-weight:700;color:var(--char);text-transform:uppercase;letter-spacing:.5px;margin-bottom:5px}
.form-row input,.form-row select,.form-row textarea{width:100%;min-width:0;max-width:100%;box-sizing:border-box;border:1px solid var(--border);border-radius:var(--r);padding:9px 12px;font-size:13px;font-family:var(--font);color:var(--body);transition:.15s}
.form-row input:focus,.form-row select:focus,.form-row textarea:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 2px rgba(4,92,180,.18)}
.form-row textarea{resize:vertical;min-height:80px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}

/* ── MODAL ── */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:1000;display:flex;align-items:center;justify-content:center;padding:20px}
/* min-width:0 — the modal is a flex child of .modal-overlay; without this WebKit/Safari
   gives it an automatic minimum of its content's min-content width, which overrides
   max-width and blows the modal (and its horizontal scrollbar) wide on long <select>
   options. Blink shrinks it either way; min-width:0 makes Safari behave the same. */
.modal{background:var(--white);border-radius:6px;width:100%;max-width:560px;max-height:90vh;min-width:0;overflow-y:auto;overflow-x:hidden;box-shadow:0 8px 32px rgba(0,0,0,.2)}
.modal-header{padding:20px 24px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
.modal-header h3{font-size:16px;font-weight:800;color:var(--char)}
.modal-close{background:none;border:none;font-size:20px;color:var(--muted);cursor:pointer;line-height:1;padding:0 4px}
.modal-close:hover{color:var(--danger)}
.modal-body{padding:24px}
/* An order card carries six-plus actions (Edit · Custom blend · Print customer copy ·
   Log production · Send to production · Move to: …). On one non-wrapping row flex
   shrank every button until its own label broke across three lines — "Print /
   customer / copy". Wrap onto a second row instead, and never let a button squash
   below its label (Claire 2026-08-05: "bottom blocks not fitting properly"). */
.modal-footer{padding:16px 24px;border-top:1px solid var(--border);display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:10px;row-gap:8px}
/* min-height + line-height: an emoji glyph is taller than the label's own line box,
   so 🧾/🚛 buttons stood ~10px taller than the plain ones and the row read crooked.
   Pin every action to the same height so a wrapped row still lines up. */
.modal-footer .btn{flex:0 0 auto;white-space:nowrap;max-width:100%;min-height:36px;line-height:1.2}

/* ── TABS ── */
.tabs{display:flex;gap:0;border-bottom:2px solid var(--border);margin-bottom:20px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.tab{flex:0 0 auto;white-space:nowrap;padding:10px 20px;font-size:13px;font-weight:700;color:var(--muted);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-2px;transition:.15s}
.tab:hover{color:var(--char)}
.tab.active{color:var(--gold);border-bottom-color:var(--gold)}

/* ── STATUS INDICATORS ── */
.dot{width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:5px}
.dot-green{background:var(--success)}
.dot-amber{background:var(--warn)}
.dot-red{background:var(--danger)}
.dot-grey{background:#aaa}

/* ── ALERTS / BANNERS ── */
.banner{background:rgba(4,92,180,.08);border:1px solid rgba(4,92,180,.26);border-radius:var(--r);padding:12px 16px;margin-bottom:20px;font-size:13px;color:var(--gold-d);font-weight:600}
.banner-warn{background:#fff8e6;border-color:#f5c842;color:#7a5000}
.banner-danger{background:#fdf0ee;border-color:var(--danger);color:var(--danger)}
.banner-success{background:#edf7f1;border-color:var(--success);color:#1e5c35}

/* ── MISC ── */
.empty{text-align:center;padding:40px 20px;color:var(--muted);font-size:13px}
.loading{text-align:center;padding:24px;color:var(--muted);font-size:13px}
.text-gold{color:var(--gold)}
.text-muted{color:var(--muted)}
.text-danger{color:var(--danger)}
.text-success{color:var(--success)}
.mt-4{margin-top:16px}
.mb-4{margin-bottom:16px}
.flex{display:flex}
.flex-between{display:flex;justify-content:space-between;align-items:center}
.gap-2{gap:8px}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.three-col{display:grid;grid-template-columns:1fr 1fr 1fr;gap:20px}

/* ── FLOW DIAGRAM ── */
.flow{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:8px 0}
.flow-node{background:var(--char-l);border:1px solid var(--border-d);border-radius:var(--r);padding:10px 16px;color:#fff;font-size:12px;font-weight:600;text-align:center;cursor:pointer;transition:.15s;min-width:100px}
.flow-node:hover{border-color:var(--on-dark)}
.flow-node .fn-icon{font-size:20px;display:block;margin-bottom:4px}
.flow-arrow{color:var(--muted);font-size:18px}

/* ── STATUS PILL ── */
.pill{display:inline-block;font-size:10px;font-weight:700;padding:2px 8px;border-radius:10px;background:#f0f0f0;color:#555;white-space:nowrap}
.pill.green{background:#edf7f1;color:#2a6a3e}
.pill.blue{background:#eef4ff;color:#2a5aaa}
.pill.amber{background:#fff4e6;color:#8a4a00}
.pill.gold{background:rgba(4,92,180,.13);color:var(--gold-d)}
.pill.char{background:var(--char);color:var(--on-dark)}
.pill.red{background:#fdf0ee;color:var(--danger)}
.pill.clay{background:#fff0e6;color:#8a4a00}

/* ── INLINE LINK ACTIONS ── */
.lnk{color:var(--gold);cursor:pointer;font-size:12px;font-weight:600;white-space:nowrap}
.lnk:hover{color:var(--gold-d);text-decoration:underline}

/* ── BUTTON MODIFIER SHORTHANDS ── */
.btn.ghost{background:none;border:1px solid var(--border);color:var(--body)}
.btn.ghost:hover{border-color:var(--char);color:var(--char)}
.btn.sml{padding:4px 10px;font-size:11px}

/* ── KPI VALUE STATE MODIFIERS ── */
.kpi .value.green{color:var(--success)}
.kpi .value.clay{color:var(--warn)}
.kpi .value.red{color:var(--danger)}

/* ── CARD TITLE ── */
.card-title{padding:16px 20px;border-bottom:1px solid var(--border);font-size:14px;font-weight:700;color:var(--char)}

/* ── SCROLLBAR ── */
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:#f0f0f0}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:#bbb}

/* ── RESPONSIVE ── */
#nav-burger{display:none;background:none;border:1px solid rgba(4,92,180,.4);border-radius:8px;color:#0a0a0a;font-size:20px;padding:4px 12px;cursor:pointer;margin-right:10px;flex-shrink:0}
#nav-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:99}
@media(max-width:768px){
  :root{--nav:0px}
  #nav{display:flex;transform:translateX(-105%);transition:transform .22s ease;width:270px;box-shadow:4px 0 24px rgba(0,0,0,.35)}
  body.nav-open #nav{transform:none}
  body.nav-open #nav-overlay{display:block}
  #nav-burger{display:inline-block}
  .topbar-left{display:flex;align-items:center;min-width:0}
  .topbar-left h2{font-size:1.02rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  #content{padding:12px;max-width:100vw;overflow-x:hidden}
  /* the page itself never scrolls sideways — wide tables scroll INSIDE their
     own wrapper instead (Ismari: "content cut off, must scroll right") */
  html,body{max-width:100vw;overflow-x:hidden}
  #main{min-width:0}
  /* fixed 56px height made wrapped topbar rows spill OVER the page (Ismari's
     "text at the top gets mixed up" screenshot) — let it grow */
  #topbar{flex-wrap:wrap;gap:6px;padding:10px 14px;height:auto;min-height:56px}
  .topbar-left p{white-space:normal;overflow-wrap:anywhere;line-height:1.3}
  .topbar-right{flex-wrap:wrap;row-gap:2px}
  .card,.kpi,.panel{min-width:0;max-width:100%}
  .card-header{flex-wrap:wrap;gap:8px}
  .table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
  /* Ismari: no sideways scrolling to read a row — cells WRAP to a second line */
  td{white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere;max-width:230px;min-width:70px;font-size:.82rem;padding:8px 10px}
  th{padding:8px 10px}
  .kpis{grid-template-columns:1fr 1fr;gap:10px}
  .kpi .value{font-size:1.25rem;overflow:hidden;text-overflow:ellipsis}
  .kpi .value .btn{white-space:normal;font-size:.72rem;padding:.4rem .6rem}
  .banner{font-size:.82rem;overflow-wrap:anywhere}
  .modal{max-width:94vw!important;max-height:88vh;overflow-y:auto}
  .kpis > .kpi:only-child,.bigbtn{max-width:100%}
  .form-grid{grid-template-columns:1fr}
  .two-col,.three-col{grid-template-columns:1fr}
  pre,code{white-space:pre-wrap;overflow-wrap:anywhere}
  img,canvas,svg{max-width:100%;height:auto}
  /* Ismari: "seems a bit zoomed" — desktop-density chrome is oversized on a
     phone, so less fits per screen. Shrink the base + card/KPI padding + the
     big numbers so the same content reads more compact (less zoomed-in). */
  body{font-size:13px}
  .card{margin-bottom:14px}
  .card-header{padding:12px 14px}
  .card-header h3{font-size:13px}
  .card-body{padding:14px}
  .card-footer{padding:10px 14px}
  .kpis{margin-bottom:16px}
  .kpi{padding:13px 14px}
  .kpi-top{margin-bottom:6px}
  .kpi-icon{width:30px;height:30px;font-size:15px}
  .kpi .value{font-size:1.15rem}
  .topbar-left h2{font-size:.98rem}
  .btn{padding:7px 13px;font-size:12px}
  /* eugene bag logger: the "+ BAG #1" button is desktop-huge on a phone */
  .bagbtn{font-size:1.1rem;padding:.85rem 1.4rem}
}
/* very small phones — trim a touch more so wide rows/numbers still fit */
@media(max-width:430px){
  #content{padding:10px}
  .card-body{padding:12px}
  .kpi{padding:11px 12px}
  .kpi .value{font-size:1.05rem}
  .kpis{gap:8px}
  td,th{padding:7px 8px}
}

/* ── Personal dashboard: My shortcuts + plant toggle (Claire 2026-08-13) ── */
.sc-wrap{background:var(--white);border:1px solid var(--border);border-radius:var(--r);box-shadow:var(--shadow);padding:16px 18px;margin-bottom:18px}
.sc-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.sc-title{font-size:15px;font-weight:800;color:var(--char)}
.sc-ent{font-size:11px;font-weight:700;color:var(--gold);background:rgba(4,92,180,.10);padding:2px 8px;border-radius:9px;margin-left:6px}
.sc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.sc-tile{display:flex;align-items:center;gap:9px;background:var(--char-l);border:1px solid var(--border-d);border-radius:var(--r);padding:11px 13px;color:#fff;transition:.14s;text-decoration:none}
.sc-tile:hover{border-color:var(--gold);background:#33373d;transform:translateY(-1px)}
.sc-tile .sc-ic{font-size:18px;line-height:1}
.sc-tile .sc-lb{font-size:13px;font-weight:700;color:#fff}
.sc-empty{color:var(--muted);font-size:13px;padding:6px 0}
/* picker modal */
.sc-ov{position:fixed;inset:0;background:rgba(10,37,71,.45);z-index:9000;display:flex;align-items:center;justify-content:center;padding:20px}
.sc-modal{background:var(--white);border-radius:12px;box-shadow:0 20px 60px rgba(0,0,0,.3);width:min(560px,100%);max-height:86vh;display:flex;flex-direction:column;overflow:hidden}
.sc-mh{padding:16px 20px;border-bottom:1px solid var(--border)}
.sc-list{padding:8px 20px;overflow-y:auto}
.sc-sec{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);margin:12px 0 4px}
.sc-opt{display:flex;align-items:center;gap:10px;padding:7px 4px;font-size:14px;color:var(--char);cursor:pointer;border-radius:6px}
.sc-opt:hover{background:rgba(4,92,180,.06)}
.sc-opt input{width:16px;height:16px;accent-color:var(--gold)}
.sc-mf{padding:14px 20px;border-top:1px solid var(--border);display:flex;justify-content:flex-end;gap:10px}
/* plant strip */
.ps-strip{display:flex;flex-direction:column;gap:8px}
.ps-row{display:flex;align-items:center;gap:11px;border:1px solid var(--border);border-left-width:4px;border-radius:var(--r);padding:9px 13px}
.ps-row.up{border-left-color:#2e7d46}
.ps-row.down{border-left-color:#c0392b;background:rgba(192,57,43,.04)}
.ps-dot{width:9px;height:9px;border-radius:50%;flex:none}
.ps-row.up .ps-dot{background:#2e7d46}
.ps-row.down .ps-dot{background:#c0392b}
.ps-name{font-size:14px;color:var(--char)}
.ps-state{font-size:12px;font-weight:700;color:var(--muted)}
.ps-row.down .ps-state{color:#c0392b}
.sc-psbtn{margin-left:auto;padding:6px 13px;font-size:12px}