/* FONTS — inlined base64 for standalone preview only.
   IN PRODUCTION: replace this whole block with the self-hosted refs
   already present in app.css (assets/fonts/*.woff2, 21 files). */

/* ============================================================
   TOKENS — LOCKED. Do not change. Ported from app.css.
   ============================================================ */
:root{
  --canvas:#F2EDE7;
  --paper:#FFFDF9;
  --ink:#251D27;
  --plum:#713D63;
  --slash:#FF5C00;
  --danger:#A43E4D;
  --hair:#DDD2D9;

  --ink-70:#5C5460;
  --ink-45:#8B8490;
  --plum-tint:#F0E8EE;
  --danger-tint:#F6E9EB;

  --r:2px;
  --side:236px;
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--canvas);
  color:var(--ink);
  font-family:'Vazirmatn',Tahoma,sans-serif;
  font-size:13.5px;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.disp{font-family:'Estedad','Vazirmatn',Tahoma,sans-serif;font-weight:700;margin:0}
.num{font-family:'Inter',sans-serif;direction:ltr;unicode-bidi:isolate;font-variant-numeric:tabular-nums}
.folio{font-family:'Archivo',sans-serif;direction:ltr;unicode-bidi:isolate;font-weight:600}
button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}
a{color:var(--plum);text-decoration:none}

/* ============================================================
   SHELL
   ============================================================ */
.shell{display:grid;grid-template-columns:1fr var(--side);min-height:100vh}

.side{
  background:var(--ink);color:#EDE7E9;
  display:flex;flex-direction:column;
  position:sticky;top:0;height:100vh;
}
.brand{padding:22px 20px 18px;border-bottom:1px solid rgba(255,255,255,.09)}
.brand .mark{display:flex;align-items:center;gap:9px}
.brand .slashmark{width:3px;height:17px;background:var(--slash);transform:skewX(-16deg)}
.brand .nm{font-family:'Estedad';font-weight:800;font-size:15px;letter-spacing:-.01em}
.brand .sub{font-size:10.5px;color:rgba(237,231,233,.45);margin-top:3px;padding-right:12px}

.nav{padding:10px 0;flex:1;overflow-y:auto}
.nav button{
  display:flex;align-items:center;gap:8px;width:100%;
  background:none;border:0;border-right:2px solid transparent;
  padding:7px 20px;text-align:right;cursor:pointer;
  color:rgba(237,231,233,.62);font-size:13px;
}
.nav button:hover{color:#fff;background:rgba(255,255,255,.035)}
.nav button.on{color:#fff;background:rgba(255,255,255,.06);border-right-color:var(--plum)}
.nav .ct{margin-inline-start:auto;font-size:11px;color:rgba(237,231,233,.4)}
.nav button.on .ct{color:rgba(255,255,255,.7)}
.nav .ct.hot{color:#E88A96}
.nav .grp{font-size:10px;color:rgba(237,231,233,.3);padding:14px 20px 4px;letter-spacing:.06em}

.sfoot{padding:14px 20px 18px;border-top:1px solid rgba(255,255,255,.09)}
.roles{display:flex;border:1px solid rgba(255,255,255,.16)}
.roles button{flex:1;background:none;border:0;padding:6px;font-size:11.5px;color:rgba(237,231,233,.55);cursor:pointer}
.roles button.on{background:var(--plum);color:#fff}
.who{margin-top:11px;font-size:11px;color:rgba(237,231,233,.42);line-height:1.6}
.demo{margin-top:9px;font-size:10px;color:rgba(237,231,233,.28)}

.main{padding:34px 44px 90px;max-width:1180px}

/* ============================================================
   PAGE FURNITURE
   ============================================================ */
.ph{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap}
.ph h1{font-size:27px;letter-spacing:-.015em}
.ph .meta{font-size:12px;color:var(--ink-45)}
.ph-rule{height:1px;background:var(--ink);margin:13px 0 26px;position:relative}
.ph-rule::after{content:"";position:absolute;top:-1px;left:0;width:34px;height:3px;background:var(--slash);transform:skewX(-16deg)}

.sec{margin-bottom:34px}
.sec-h{display:flex;align-items:baseline;gap:10px;padding-bottom:7px;border-bottom:1px solid var(--hair);margin-bottom:2px}
.sec-h .fo{font-family:'Archivo';direction:ltr;font-size:11px;font-weight:600;color:var(--ink-45);min-width:16px}
.sec-h h2{font-size:14.5px;font-weight:700}
.sec-h .n{font-size:11.5px;color:var(--ink-45);margin-inline-start:auto}
.sec-h.danger{border-bottom-color:var(--danger)}
.sec-h.danger h2,.sec-h.danger .fo{color:var(--danger)}

.rows > *{border-bottom:1px solid var(--hair)}
.row{display:flex;align-items:center;gap:14px;padding:11px 2px;background:none}
.row:hover{background:var(--paper)}
.row .grow{flex:1;min-width:0}
.row .t{font-weight:600}
.row .s{font-size:11.5px;color:var(--ink-45);margin-top:1px}
.row .r{text-align:left;font-size:12px;white-space:nowrap}
.clickable{cursor:pointer}

.kind{font-size:10.5px;color:var(--ink-45);border:1px solid var(--hair);padding:1px 6px;border-radius:var(--r);white-space:nowrap}

.empty{padding:16px 2px;color:var(--ink-45);font-size:12.5px}

/* ============================================================
   HEADROOM STRIP
   ============================================================ */
.strip{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--hair);background:var(--paper);margin-bottom:30px}
.strip > div{padding:14px 16px}
.strip > div + div{border-right:1px solid var(--hair)}
.strip .lb{font-size:11px;color:var(--ink-45)}
.strip .vl{font-family:'Estedad';font-weight:700;font-size:19px;margin-top:2px;letter-spacing:-.01em}
.strip .vl small{font-size:11.5px;font-weight:400;color:var(--ink-45);font-family:'Vazirmatn'}
.bar{height:2px;background:var(--hair);margin-top:9px;position:relative}
.bar i{position:absolute;top:0;right:0;height:2px;background:var(--plum)}
.bar i.warn{background:var(--danger)}

/* ============================================================
   BADGES / MARKS
   ============================================================ */
.bg{display:inline-block;font-size:10.5px;padding:1px 7px;border-radius:var(--r);border:1px solid var(--hair);white-space:nowrap;line-height:1.7}
.bg.new{border-color:var(--ink);color:var(--ink)}
.bg.sleep{border-color:var(--hair);color:var(--ink-45)}
.bg.rej{border-color:var(--hair);color:var(--ink-45);text-decoration:line-through}
.bg.live{border-color:var(--plum);color:var(--plum);background:var(--plum-tint)}
.bg.risk{border-color:var(--danger);color:#fff;background:var(--danger);font-weight:600}
.bg.idx{border-color:var(--hair);color:var(--ink-70);background:#fff}
.bg.over{border-color:var(--danger);color:var(--danger)}
.late{color:var(--danger);font-weight:600}

/* ============================================================
   TABLE
   ============================================================ */
.tbl{width:100%;border-collapse:collapse;background:var(--paper);border:1px solid var(--hair)}
.tbl th{
  text-align:right;font-size:11px;font-weight:600;color:var(--ink-45);
  padding:8px 11px;border-bottom:1px solid var(--hair);white-space:nowrap;
}
.tbl td{padding:9px 11px;border-bottom:1px solid var(--hair);vertical-align:middle}
.tbl tr:last-child td{border-bottom:0}
.tbl tbody tr:hover{background:#F8F3ED}
.tbl .nm{font-weight:600;cursor:pointer}
.tbl .nm:hover{color:var(--plum)}
.acts{display:flex;gap:5px;justify-content:flex-end}

/* ============================================================
   FILTERS
   ============================================================ */
.filters{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:14px}
.filters input[type=search],.filters select{
  background:var(--paper);border:1px solid var(--hair);border-radius:var(--r);
  padding:6px 9px;font-size:12.5px;outline:none;
}
.filters input[type=search]{min-width:230px}
.filters input:focus,.filters select:focus{border-color:var(--plum)}
.chip{
  background:none;border:1px solid var(--hair);border-radius:var(--r);
  padding:5px 10px;font-size:11.5px;cursor:pointer;color:var(--ink-70);
}
.chip.on{border-color:var(--plum);color:var(--plum);background:var(--plum-tint)}
.fcount{font-size:11.5px;color:var(--ink-45);margin-inline-start:auto}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{
  background:none;border:1px solid var(--hair);border-radius:var(--r);
  padding:5px 11px;font-size:12px;cursor:pointer;color:var(--ink-70);white-space:nowrap;
}
.btn:hover{border-color:var(--ink);color:var(--ink)}
.btn.primary{background:var(--plum);border-color:var(--plum);color:#fff;font-weight:600}
.btn.primary:hover{background:#5E3253;border-color:#5E3253;color:#fff}
.btn.dg:hover{border-color:var(--danger);color:var(--danger)}
.btn.lg{padding:8px 18px;font-size:13px}
.addbar{position:fixed;bottom:26px;left:38px;z-index:20}
.addbar .btn{background:var(--ink);border-color:var(--ink);color:#fff;padding:9px 17px;font-size:13px}

/* ============================================================
   ALERT PANELS
   ============================================================ */
.alert{border:1px solid var(--danger);background:var(--danger-tint);padding:13px 15px;margin-bottom:26px;position:relative}
.alert::before{content:"";position:absolute;top:-1px;right:0;width:3px;height:calc(100% + 2px);background:var(--danger)}
.alert h3{font-size:13.5px;color:var(--danger);margin-bottom:4px}
.alert p{margin:0;font-size:12.5px;color:var(--ink-70)}
.quiet{border:1px dashed var(--hair);padding:9px 13px;font-size:12px;color:var(--ink-45);margin-bottom:22px}

/* ============================================================
   FORM
   ============================================================ */
.form{max-width:760px}
.blk{border-top:1px solid var(--ink);padding-top:14px;margin-bottom:30px}
.blk-h{display:flex;align-items:baseline;gap:10px;margin-bottom:14px}
.blk-h .fo{font-family:'Archivo';direction:ltr;font-size:22px;font-weight:600;color:var(--hair);line-height:1}
.blk-h h2{font-size:14.5px}
.blk-h .hint{font-size:11.5px;color:var(--ink-45);margin-inline-start:auto}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px 18px}
.f label{display:block;font-size:11.5px;color:var(--ink-45);margin-bottom:4px}
.f input,.f select,.f textarea{
  width:100%;background:var(--paper);border:1px solid var(--hair);border-radius:var(--r);
  padding:7px 10px;outline:none;
}
.f input:focus,.f select:focus,.f textarea:focus{border-color:var(--plum)}
.f .help{font-size:11px;color:var(--ink-45);margin-top:3px}
.f .warn{font-size:11.5px;color:var(--danger);margin-top:5px;border-right:2px solid var(--danger);padding-right:8px}
.f .warn b{display:block;font-weight:600}
.f .warn span{color:var(--ink-45);font-size:10.5px}

.lookup{border:1px solid var(--hair);background:var(--paper);padding:12px 14px;margin-top:14px}
.lookup.hit{border-color:var(--ink)}
.lookup.hot{border-color:var(--danger);background:var(--danger-tint)}
.lookup .lh{font-size:11px;color:var(--ink-45);margin-bottom:6px}
.lookup .lv{font-size:13px}
.lookup .split{border-top:1px solid var(--hair);margin-top:10px;padding-top:10px}
.lookup.hot .split{border-top-color:var(--danger)}

/* ============================================================
   COMPANY FILE
   ============================================================ */
.cf-head{border-bottom:1px solid var(--ink);padding-bottom:16px;margin-bottom:6px}
.cf-title{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.cf-title h1{font-size:25px;letter-spacing:-.015em}
.cf-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(128px,1fr));gap:13px 18px;margin-top:16px}
.cf-fields .k{font-size:10.5px;color:var(--ink-45)}
.cf-fields .v{font-size:13.5px;margin-top:1px}

.boundary{display:flex;align-items:center;gap:12px;margin:26px 0 24px}
.boundary .ln{flex:1;height:1px;background:var(--hair)}
.boundary .tx{font-size:10.5px;color:var(--ink-45);letter-spacing:.04em;white-space:nowrap}
.boundary.locked .ln{border-top:1px dashed var(--hair);height:0;background:none}

.layer{margin-bottom:30px}
.layer-h{display:flex;align-items:baseline;gap:10px;padding-bottom:6px;border-bottom:1px solid var(--hair);margin-bottom:12px}
.layer-h h2{font-size:13.5px}
.layer-h .tag{font-size:10px;color:var(--ink-45);border:1px solid var(--hair);padding:0 6px;border-radius:var(--r)}
.layer-h .tag.priv{border-color:var(--plum);color:var(--plum)}

.stages{border:1px solid var(--hair);background:var(--paper)}
.stg{display:flex;align-items:center;gap:12px;padding:9px 13px;border-bottom:1px solid var(--hair)}
.stg:last-child{border-bottom:0}
.stg .fo{font-family:'Archivo';direction:ltr;font-size:11px;color:var(--ink-45);width:14px}
.stg .lb{flex:1}
.stg .sla{font-size:11px;color:var(--ink-45)}
.stg.done{color:var(--ink-45)}
.stg.done .lb{text-decoration:none}
.stg.cur{background:var(--plum-tint);border-right:2px solid var(--plum)}
.stg.cur .lb{font-weight:700}
.stg.cur .fo{color:var(--plum)}

.mini{width:100%;border-collapse:collapse;background:var(--paper);border:1px solid var(--hair)}
.mini th{text-align:right;font-size:10.5px;color:var(--ink-45);font-weight:600;padding:6px 10px;border-bottom:1px solid var(--hair)}
.mini td{padding:7px 10px;border-bottom:1px solid var(--hair);font-size:12.5px}
.mini tr:last-child td{border-bottom:0}

.gates{display:flex;gap:0;border:1px solid var(--hair);background:var(--paper)}
.gate{flex:1;padding:11px 13px;border-left:1px solid var(--hair)}
.gate:last-child{border-left:0}
.gate .g{font-weight:600}
.gate .d{font-size:11px;color:var(--ink-45);margin-top:2px}
.gate.pend .g{color:var(--ink-45)}

.notes .note{border-bottom:1px solid var(--hair);padding:10px 2px}
.notes .nh{display:flex;gap:8px;align-items:center;font-size:11px;color:var(--ink-45);margin-bottom:3px}
.notes .kind-p{border-color:var(--plum);color:var(--plum)}

.hidden-note{border:1px dashed var(--hair);padding:11px 13px;font-size:12px;color:var(--ink-45)}

/* ============================================================
   PIPELINE
   ============================================================ */
.pl-stage{margin-bottom:26px}
.pl-h{display:flex;align-items:baseline;gap:10px;border-bottom:1px solid var(--ink);padding-bottom:6px;margin-bottom:2px}
.pl-h .fo{font-family:'Archivo';direction:ltr;font-size:19px;font-weight:600;color:var(--hair);line-height:1}
.pl-h h2{font-size:14px}
.pl-h .sla{font-size:11px;color:var(--ink-45)}
.pl-h .ct{margin-inline-start:auto;font-size:11.5px;color:var(--ink-45)}

/* ============================================================
   REGULATIONS
   ============================================================ */
.reg{display:flex;align-items:flex-start;gap:16px;padding:13px 2px;border-bottom:1px solid var(--hair)}
.reg .rv{font-family:'Estedad';font-weight:700;font-size:17px;min-width:190px;letter-spacing:-.01em}
.reg .rn{flex:1}
.reg .rn .t{font-size:13px}
.reg .rn .src{font-size:11px;color:var(--ink-45);margin-top:2px}
.reg .conflict{font-size:11px;color:var(--danger);border-right:2px solid var(--danger);padding-right:8px;margin-top:5px}
.meas{display:flex;align-items:center;gap:14px;padding:12px 2px;border-bottom:1px solid var(--hair)}
.meas .ml{flex:1}
.meas .mv{font-family:'Inter';direction:ltr;font-size:14px;font-weight:600}
.meas .mbar{width:170px;height:2px;background:var(--hair);position:relative}
.meas .mbar i{position:absolute;top:0;right:0;height:2px;background:var(--plum)}
.meas .mbar i.warn{background:var(--danger)}

/* ============================================================
   HIGH RISK
   ============================================================ */
.drop{border:1px dashed var(--hair);background:var(--paper);padding:22px;text-align:center;margin-bottom:26px}
.drop .d1{font-size:13px}
.drop .d2{font-size:11.5px;color:var(--ink-45);margin-top:4px}
.drop .cols{font-size:10.5px;color:var(--ink-45);margin-top:10px;font-family:'Inter';direction:rtl}
.diff-crit{border:1px solid var(--danger);margin-bottom:24px}
.diff-crit .dh{background:var(--danger);color:#fff;padding:7px 13px;font-size:12.5px;font-weight:700}
.diff-crit .db{background:var(--danger-tint)}
.diff-crit .row{padding:10px 13px;border-bottom:1px solid rgba(164,62,77,.22)}
.diff-crit .row:last-child{border-bottom:0}
.diff-crit .row:hover{background:rgba(164,62,77,.06)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-bottom:26px}

/* ============================================================
   WIZARD
   ============================================================ */
.steps{display:flex;border:1px solid var(--hair);background:var(--paper);margin-bottom:22px}
.step{flex:1;padding:9px 13px;border-left:1px solid var(--hair);font-size:12px;color:var(--ink-45)}
.step:last-child{border-left:0}
.step.on{background:var(--plum-tint);color:var(--plum);font-weight:600}
.step .fo{font-family:'Archivo';direction:ltr;font-size:10.5px;margin-inline-end:6px}
.preview{border:1px solid var(--hair);background:#fff;padding:26px 30px;line-height:2.1;font-size:13px}
.preview .pt{text-align:center;font-weight:700;margin-bottom:18px}

/* ============================================================
   SETTINGS
   ============================================================ */
.set-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.locked-box{border:1px solid var(--hair);background:#EFE9E2;padding:12px 14px;font-size:12.5px;color:var(--ink-70)}
.locked-box .lt{font-weight:600;color:var(--ink);margin-bottom:3px}

/* ============================================================
   LOGIN
   ============================================================ */
.login-wrap{min-height:100vh;display:grid;place-items:center;padding:24px}
.login{width:100%;max-width:352px;background:var(--paper);border:1px solid var(--hair);padding:34px 32px}
.login .lock{display:flex;align-items:center;gap:9px;padding-bottom:16px;border-bottom:1px solid var(--ink);margin-bottom:22px}
.login .slashmark{width:3px;height:19px;background:var(--slash);transform:skewX(-16deg)}
.login h1{font-size:17px}
.login .sub{font-size:11.5px;color:var(--ink-45);margin-bottom:18px}
.login .f{margin-bottom:12px}

@media(max-width:900px){
  .shell{grid-template-columns:1fr}
  .side{position:static;height:auto;order:-1}
  .nav{display:flex;flex-wrap:wrap;padding:8px}
  .nav .grp{display:none}
  .nav button{width:auto;border-right:0;border-bottom:2px solid transparent;padding:6px 11px}
  .nav button.on{border-bottom-color:var(--plum)}
  .main{padding:24px 18px 90px}
  .strip,.grid2,.two,.set-grid{grid-template-columns:1fr}
  .strip > div + div{border-right:0;border-top:1px solid var(--hair)}
}