/* =========================================================
   RDV Entertainment — Distribution Platform
   app.css  ·  single stylesheet for the whole panel
   Layout: icon rail  +  module panel  +  wide workspace
   ========================================================= */

:root{
  /* brand */
  --brand:#4F46E5;
  --brand-2:#3B82F6;
  --brand-3:#06B6D4;
  --brand-grad:linear-gradient(100deg,#4F46E5,#3B82F6 55%,#06B6D4);

  /* ink & surfaces */
  --ink:#101828;
  --ink-2:#475467;
  --ink-3:#8A93A6;
  --line:#E4E7EC;
  --line-2:#F0F2F5;
  --bg:#F6F7FB;
  --card:#FFFFFF;
  --rail-bg:#0C1220;
  --panel-bg:#FBFCFE;

  /* semantic */
  --ok:#0E9F6E;  --ok-bg:#E7F8F1;
  --warn:#B54708; --warn-bg:#FFF6E8;
  --bad:#D92D20;  --bad-bg:#FEF0EF;
  --info:#175CD3; --info-bg:#EAF1FE;
  --violet:#6938EF; --violet-bg:#F2EFFE;

  /* metrics */
  --rail-w:68px;
  --panel-w:236px;
  --top-h:60px;
  --r:10px;
  --r-sm:8px;
  --r-lg:14px;
  --sh:0 1px 2px rgba(16,24,40,.05);
  --sh-md:0 4px 14px -6px rgba(16,24,40,.14);
  --sh-lg:0 18px 44px -18px rgba(16,24,40,.26);
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg);color:var(--ink);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased;
}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none}
a{color:inherit;text-decoration:none}
table{border-collapse:collapse;width:100%}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:#CFD5E2;border-radius:99px;border:3px solid transparent;background-clip:content-box}
::-webkit-scrollbar-track{background:transparent}

/* ---------- helpers ---------- */
.row{display:flex;align-items:center}
.col{display:flex;flex-direction:column}
.between{display:flex;align-items:center;justify-content:space-between}
.wrap{flex-wrap:wrap}
.grow{flex:1;min-width:0}
.g4{gap:4px}.g6{gap:6px}.g8{gap:8px}.g10{gap:10px}.g12{gap:12px}.g14{gap:14px}.g16{gap:16px}.g20{gap:20px}.g24{gap:24px}
.mt4{margin-top:4px}.mt6{margin-top:6px}.mt8{margin-top:8px}.mt10{margin-top:10px}.mt12{margin-top:12px}
.mt16{margin-top:16px}.mt20{margin-top:20px}.mt24{margin-top:24px}.mt32{margin-top:32px}
.mb4{margin-bottom:4px}.mb8{margin-bottom:8px}.mb12{margin-bottom:12px}.mb16{margin-bottom:16px}.mb20{margin-bottom:20px}.mb24{margin-bottom:24px}
.tc{text-align:center}.tr{text-align:right}
.muted{color:var(--ink-3)}
.dim{color:var(--ink-2)}
.b5{font-weight:500}.b6{font-weight:600}.b7{font-weight:700}.b8{font-weight:800}
.f11{font-size:11px}.f12{font-size:12px}.f13{font-size:13px}.f15{font-size:15px}.f16{font-size:16px}
.f18{font-size:18px}.f20{font-size:20px}.f22{font-size:22px}.f26{font-size:26px}.f32{font-size:32px}
.lbl{font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.trunc{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.num{font-variant-numeric:tabular-nums}
.hide{display:none !important}
.grid{display:grid;gap:16px}
.grid > *{min-width:0}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.sep{height:1px;background:var(--line);margin:16px 0}
.gt{background:var(--brand-grad);-webkit-background-clip:text;background-clip:text;color:transparent}

/* =========================================================
   SHELL  —  rail + panel + workspace
   PHP map:  rail = includes/rail.php · panel = includes/subnav.php
   ========================================================= */
.shell{display:flex;min-height:100vh}

/* --- icon rail --- */
.rail{
  width:var(--rail-w);flex:0 0 var(--rail-w);background:var(--rail-bg);
  display:flex;flex-direction:column;align-items:center;padding:14px 0 12px;
  position:sticky;top:0;height:100vh;z-index:30;
}
.rail-logo{
  width:40px;height:40px;border-radius:12px;background:var(--brand-grad);color:#fff;
  display:grid;place-items:center;font-weight:800;font-size:17px;margin-bottom:18px;flex:0 0 auto;
}
.rail-nav{display:flex;flex-direction:column;gap:4px;flex:1;overflow-y:auto;width:100%;align-items:center}
.rail-nav::-webkit-scrollbar{width:0}
.rail-i{
  width:44px;height:44px;border-radius:12px;display:grid;place-items:center;color:#77839C;
  position:relative;transition:.15s;flex:0 0 auto;
}
.rail-i:hover{background:rgba(255,255,255,.07);color:#fff}
.rail-i.on{background:var(--brand);color:#fff}
.rail-i.on::before{content:'';position:absolute;left:-12px;top:11px;bottom:11px;width:3px;border-radius:0 3px 3px 0;background:var(--brand-3)}
.rail-i .tip{
  position:absolute;left:56px;top:50%;transform:translateY(-50%) scale(.96);transform-origin:left center;
  background:#101828;color:#fff;font-size:11.5px;font-weight:700;padding:6px 10px;border-radius:7px;
  white-space:nowrap;opacity:0;pointer-events:none;transition:.13s;z-index:5;
}
.rail-i:hover .tip{opacity:1;transform:translateY(-50%) scale(1)}
.rail-foot{display:flex;flex-direction:column;gap:6px;align-items:center;padding-top:10px;border-top:1px solid rgba(255,255,255,.09);width:44px}

/* --- module panel --- */
.panel{
  width:var(--panel-w);flex:0 0 var(--panel-w);background:var(--panel-bg);border-right:1px solid var(--line);
  position:sticky;top:0;height:100vh;overflow-y:auto;padding:18px 14px;z-index:20;
}
.panel-brand{padding:0 8px 16px;border-bottom:1px solid var(--line);margin-bottom:14px}
.panel-brand .nm{font-size:15px;font-weight:800;letter-spacing:-.02em}
.panel-brand .nm span{color:var(--ink-3);font-weight:600}
.panel-brand .sub{font-size:9px;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-3);font-weight:800;margin-top:3px}
.panel-h{font-size:10.5px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3);padding:0 8px;margin:16px 0 7px}
.panel-h:first-of-type{margin-top:0}
.panel-i{
  display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:var(--r-sm);
  font-size:13px;font-weight:600;color:var(--ink-2);transition:.13s;
}
.panel-i:hover{background:#EFF2F7;color:var(--ink)}
.panel-i.on{background:#EEF0FF;color:var(--brand);font-weight:700}
.panel-i .ct{margin-left:auto;font-size:11px;font-weight:700;color:var(--ink-3);background:#EDF0F5;padding:1px 7px;border-radius:99px}
.panel-i.on .ct{background:#fff;color:var(--brand)}
.panel-cta{
  margin-top:18px;padding:14px;border-radius:var(--r);background:var(--brand-grad);color:#fff;
}
.panel-cta .t{font-size:13px;font-weight:800}
.panel-cta .s{font-size:11px;opacity:.85;margin-top:3px;line-height:1.45}
.panel-cta a{display:flex;align-items:center;justify-content:center;gap:7px;margin-top:11px;background:rgba(255,255,255,.2);
  border:1px solid rgba(255,255,255,.3);border-radius:var(--r-sm);padding:8px;font-size:12px;font-weight:700}
.panel-cta a:hover{background:rgba(255,255,255,.3)}

/* --- workspace --- */
.work{flex:1;min-width:0;display:flex;flex-direction:column}
.work-top{
  height:var(--top-h);background:var(--card);border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:14px;padding:0 22px;position:sticky;top:0;z-index:15;
}
.crumb{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--ink-3);font-weight:600}
.crumb b{color:var(--ink);font-weight:700}
.work-title{font-size:15px;font-weight:800;letter-spacing:-.01em}
.work-body{padding:22px;flex:1}
.page-h{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.page-h .row{flex-wrap:wrap}
.page-h h1{font-size:21px;font-weight:800;letter-spacing:-.025em}
.page-h p{font-size:13px;color:var(--ink-2);margin-top:5px;max-width:620px}

.search{display:flex;align-items:center;gap:8px;background:#F2F4F8;border:1px solid transparent;border-radius:var(--r-sm);
  padding:7px 12px;width:280px;color:var(--ink-3)}
.search:focus-within{background:#fff;border-color:var(--brand-2);box-shadow:0 0 0 3px rgba(59,130,246,.12)}
.search input{border:0;background:none;outline:none;width:100%;font-size:13px}
.icon-btn{width:34px;height:34px;border-radius:var(--r-sm);display:grid;place-items:center;color:var(--ink-2);transition:.13s;border:1px solid transparent}
.icon-btn:hover{background:#F2F4F8;color:var(--ink)}
.icon-btn.bd{border-color:var(--line);background:#fff}
.icon-btn.bd:hover{border-color:#C9D2E5}
.dot{position:relative}
.dot::after{content:'';position:absolute;top:6px;right:7px;width:7px;height:7px;border-radius:50%;background:var(--bad);border:2px solid #fff}
.avatar{width:34px;height:34px;border-radius:50%;background:var(--brand-grad);color:#fff;display:grid;place-items:center;
  font-weight:800;font-size:12px;flex:0 0 auto}
.avatar-sm{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:800;font-size:11px;flex:0 0 auto}

/* =========================================================
   COMPONENTS
   ========================================================= */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh)}
.card-h{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px;border-bottom:1px solid var(--line)}
.card-h h2{font-size:14px;font-weight:800;letter-spacing:-.01em;display:flex;align-items:center;gap:9px}
.card-b{padding:18px}
.card-f{padding:14px 18px;border-top:1px solid var(--line);background:#FCFCFE;border-radius:0 0 var(--r) var(--r)}
.bub{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;flex:0 0 auto}

.kpi{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px;box-shadow:var(--sh)}
.kpi .k{font-size:12px;color:var(--ink-2);font-weight:600}
.kpi .v{font-size:24px;font-weight:800;letter-spacing:-.03em;margin-top:7px}
.kpi .d{font-size:11.5px;color:var(--ink-3);margin-top:5px}

.trend{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;font-weight:700;padding:2px 7px;border-radius:6px}
.trend.up{background:var(--ok-bg);color:var(--ok)}
.trend.down{background:var(--bad-bg);color:var(--bad)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:9px 15px;border-radius:var(--r-sm);
  font-size:13px;font-weight:700;transition:.14s;white-space:nowrap;border:1px solid transparent}
.btn-p{background:var(--brand);color:#fff}
.btn-p:hover{background:#4338CA}
.btn-grad{background:var(--brand-grad);color:#fff}
.btn-grad:hover{filter:brightness(1.06)}
.btn-o{background:#fff;border-color:var(--line);color:var(--ink-2)}
.btn-o:hover{border-color:#C9D2E5;color:var(--ink);background:#FCFDFF}
.btn-s{background:#EEF0FF;color:var(--brand)}
.btn-s:hover{background:#E3E7FF}
.btn-g{background:var(--ok-bg);color:var(--ok)}
.btn-g:hover{background:#D6F2E6}
.btn-r{background:var(--bad-bg);color:var(--bad)}
.btn-r:hover{background:#FCE2E0}
.btn-d{background:var(--ink);color:#fff}
.btn-d:hover{background:#1D2939}
.btn-sm{padding:6px 11px;font-size:12px;border-radius:7px}
.btn-lg{padding:12px 22px;font-size:14px;border-radius:var(--r)}
.btn-block{width:100%}
.btn:disabled{opacity:.5;cursor:not-allowed}

/* chips */
.chip{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:6px;font-size:11px;font-weight:700;letter-spacing:.01em}
.c-live{background:var(--ok-bg);color:var(--ok)}
.c-draft{background:#F0F2F5;color:#5D6B82}
.c-pending{background:var(--warn-bg);color:var(--warn)}
.c-review{background:var(--info-bg);color:var(--info)}
.c-approved{background:#EEF0FF;color:var(--brand)}
.c-rejected{background:var(--bad-bg);color:var(--bad)}
.c-hold{background:var(--violet-bg);color:var(--violet)}
.c-takedown{background:var(--bad-bg);color:var(--bad)}
.c-soon{background:#F0F2F5;color:var(--ink-3)}

/* tabs */
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin-bottom:18px;overflow-x:auto}
.tab{padding:9px 14px;font-size:13px;font-weight:700;color:var(--ink-3);border-bottom:2px solid transparent;
  margin-bottom:-1px;white-space:nowrap;transition:.13s}
.tab:hover{color:var(--ink-2)}
.tab.on{color:var(--brand);border-bottom-color:var(--brand)}
.tab .ct{margin-left:6px;font-size:11px;background:#F0F2F5;padding:1px 6px;border-radius:99px;color:var(--ink-3)}
.tab.on .ct{background:#EEF0FF;color:var(--brand)}

.seg{display:inline-flex;background:#F2F4F8;border-radius:var(--r-sm);padding:3px}
.seg button{padding:6px 14px;border-radius:6px;font-size:12.5px;font-weight:700;color:var(--ink-2)}
.seg button.on{background:#fff;color:var(--ink);box-shadow:var(--sh)}

/* tables */
.tbl-wrap{overflow-x:auto}
table.tbl th{
  text-align:left;font-size:10.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);
  padding:11px 16px;background:#FAFBFD;border-bottom:1px solid var(--line);white-space:nowrap}
table.tbl td{padding:12px 16px;border-bottom:1px solid var(--line-2);font-size:13px;vertical-align:middle}
table.tbl tbody tr:hover{background:#FAFBFD}
table.tbl tbody tr:last-child td{border-bottom:0}
.thumb{width:40px;height:40px;border-radius:var(--r-sm);display:grid;place-items:center;color:#fff;flex:0 0 auto}
.song-cell{display:flex;align-items:center;gap:11px;min-width:0}

/* forms */
.field{display:flex;flex-direction:column;gap:6px}
.field > label{font-size:12.5px;font-weight:700;color:var(--ink-2)}
.field .req{color:var(--bad)}
.inp{border:1px solid var(--line);background:#fff;border-radius:var(--r-sm);padding:9px 12px;font-size:13.5px;
  outline:none;transition:.13s;width:100%;color:var(--ink)}
.inp::placeholder{color:#A6AFC0}
.inp:focus{border-color:var(--brand-2);box-shadow:0 0 0 3px rgba(59,130,246,.13)}
.inp:disabled{background:#F6F7FB;color:var(--ink-3)}
select.inp{appearance:none;padding-right:34px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238A93A6' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 11px center}
textarea.inp{resize:vertical;min-height:92px;line-height:1.6}
.hint{font-size:11.5px;color:var(--ink-3)}
.err{font-size:11.5px;color:var(--bad);font-weight:600}
.inp.bad{border-color:var(--bad)}
.sw{width:38px;height:22px;border-radius:99px;background:#D6DBE6;position:relative;transition:.18s;flex:0 0 auto;cursor:pointer}
.sw::after{content:'';position:absolute;width:16px;height:16px;border-radius:50%;background:#fff;top:3px;left:3px;transition:.18s;box-shadow:0 1px 2px rgba(0,0,0,.25)}
.sw.on{background:var(--brand)}
.sw.on::after{left:19px}
.cb{width:18px;height:18px;border-radius:5px;border:1.6px solid #C3CBDA;display:grid;place-items:center;flex:0 0 auto;
  transition:.13s;color:transparent;cursor:pointer;background:#fff}
.cb.on{background:var(--brand);border-color:var(--brand);color:#fff}
.opt{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:var(--r-sm);padding:10px 12px;
  background:#fff;cursor:pointer;transition:.13s}
.opt:hover{border-color:#C9D2E5}
.opt.on{border-color:var(--brand);background:#F7F8FF}

/* upload */
.drop{border:1.5px dashed #C9D2E5;border-radius:var(--r);padding:26px;text-align:center;background:#FBFCFE;transition:.15s}
.drop:hover{border-color:var(--brand-2);background:#F6F9FF}
.drop.filled{border-style:solid;border-color:var(--line);background:#fff;text-align:left;padding:16px}
.bar{height:6px;border-radius:99px;background:#EDF0F5;overflow:hidden}
.bar > i{display:block;height:100%;border-radius:99px;background:var(--brand-grad)}

/* notes */
.note{display:flex;gap:10px;padding:12px 14px;border-radius:var(--r-sm);font-size:12.5px;line-height:1.55}
.note.blue{background:var(--info-bg);color:#1A4FAE}
.note.amber{background:var(--warn-bg);color:#93370D}
.note.green{background:var(--ok-bg);color:#05603A}
.note.red{background:var(--bad-bg);color:#B42318}
.note.grey{background:#F4F6F9;color:var(--ink-2)}
.note svg{flex:0 0 auto;margin-top:1px}

/* =========================================================
   RELEASE FLOW  —  left checklist + step body
   ========================================================= */
.flow{display:grid;grid-template-columns:262px minmax(0,1fr);gap:22px;align-items:start}
.checklist{background:var(--card);border:1px solid var(--line);border-radius:var(--r);position:sticky;top:calc(var(--top-h) + 22px);overflow:hidden}
.checklist-h{padding:14px 16px;border-bottom:1px solid var(--line);background:#FAFBFD}
.checklist-h .t{font-size:13px;font-weight:800}
.checklist-h .s{font-size:11.5px;color:var(--ink-3);margin-top:3px}
.cl-prog{height:5px;background:#EDF0F5;border-radius:99px;margin-top:9px;overflow:hidden}
.cl-prog > i{display:block;height:100%;background:var(--brand-grad);border-radius:99px}
.cl-list{padding:8px}
.cl-i{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:var(--r-sm);font-size:13px;
  font-weight:600;color:var(--ink-2);transition:.13s}
.cl-i:hover{background:#F4F6FA}
.cl-i .mk{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;flex:0 0 auto;
  font-size:10.5px;font-weight:800;background:#EDF0F5;color:var(--ink-3);border:1.5px solid transparent}
.cl-i.done{color:var(--ink)}
.cl-i.done .mk{background:var(--ok);color:#fff}
.cl-i.now{background:#EEF0FF;color:var(--brand);font-weight:800}
.cl-i.now .mk{background:var(--brand);color:#fff;box-shadow:0 0 0 3px rgba(79,70,229,.18)}
.cl-i .sub{margin-left:auto;font-size:11px;font-weight:600;color:var(--ink-3)}
.cl-i.now .sub{color:var(--brand)}

.step-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:16px}
.step-head .no{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--brand)}
.step-head h1{font-size:22px;font-weight:800;letter-spacing:-.03em;margin-top:4px}
.step-head p{font-size:13px;color:var(--ink-2);margin-top:6px;max-width:640px}
.step-nav{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:20px;
  padding-top:18px;border-top:1px solid var(--line)}
.step-nav .mid{font-size:12px;color:var(--ink-3);font-weight:600}

/* preview strip used across release steps */
.rel-preview{display:flex;align-items:center;gap:14px;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r);padding:12px 16px;margin-bottom:18px}
.rel-preview .art{width:46px;height:46px;border-radius:var(--r-sm);background:var(--brand-grad);display:grid;place-items:center;color:#fff;flex:0 0 auto}

/* timeline */
.tl{position:relative;padding-left:24px}
.tl::before{content:'';position:absolute;left:6px;top:5px;bottom:5px;width:2px;background:var(--line)}
.tl-i{position:relative;padding-bottom:18px}
.tl-i:last-child{padding-bottom:0}
.tl-i::before{content:'';position:absolute;left:-23px;top:3px;width:12px;height:12px;border-radius:50%;background:#fff;border:2px solid var(--line)}
.tl-i.done::before{background:var(--ok);border-color:var(--ok)}
.tl-i.now::before{background:var(--brand);border-color:var(--brand);box-shadow:0 0 0 3px rgba(79,70,229,.16)}
.tl-i .t{font-size:13px;font-weight:700}
.tl-i .s{font-size:11.5px;color:var(--ink-3);margin-top:3px}

/* empty */
.empty{text-align:center;padding:48px 20px;color:var(--ink-3)}
.empty .bub{width:52px;height:52px;border-radius:14px;margin:0 auto 14px;background:#F2F4F8;color:var(--ink-3)}
.empty .t{font-size:15px;font-weight:700;color:var(--ink)}

/* toast */
.toast-wrap{position:fixed;right:20px;bottom:20px;z-index:80;display:flex;flex-direction:column;gap:10px}
.toast{display:flex;align-items:center;gap:11px;background:#101828;color:#fff;padding:12px 16px;border-radius:var(--r);
  box-shadow:var(--sh-lg);font-size:13px;font-weight:600;animation:tin .22s ease-out}
@keyframes tin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* modal */
.mask{position:fixed;inset:0;background:rgba(16,24,40,.5);z-index:70;display:grid;place-items:center;padding:20px}
.modal{background:#fff;border-radius:var(--r-lg);box-shadow:var(--sh-lg);width:100%;max-width:520px;max-height:88vh;overflow-y:auto}

/* =========================================================
   LOGIN
   ========================================================= */
.login-wrap{min-height:100vh;display:grid;grid-template-columns:1.05fr 1fr}
.login-art{
  background:linear-gradient(150deg,#0C1220 0%,#141F3A 45%,#0E2A3D 100%);color:#fff;
  padding:52px;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden;
}
.login-art::before{content:'';position:absolute;width:520px;height:520px;border-radius:50%;left:-180px;bottom:-220px;
  background:radial-gradient(circle,rgba(79,70,229,.42),transparent 68%)}
.login-art::after{content:'';position:absolute;width:420px;height:420px;border-radius:50%;right:-160px;top:-160px;
  background:radial-gradient(circle,rgba(6,182,212,.34),transparent 68%)}
.login-art > *{position:relative;z-index:1}
.login-form{display:flex;align-items:center;justify-content:center;padding:40px 28px;background:#fff}
.login-box{width:100%;max-width:400px}
.role-pick{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.role{border:1.5px solid var(--line);border-radius:var(--r);padding:14px;text-align:left;transition:.15s;background:#fff}
.role:hover{border-color:#C9D2E5}
.role.on{border-color:var(--brand);background:#F7F8FF;box-shadow:0 0 0 3px rgba(79,70,229,.1)}
.role .ic{width:32px;height:32px;border-radius:8px;display:grid;place-items:center;margin-bottom:9px}
.role .t{display:block;font-size:13.5px;font-weight:800}
.role .s{display:block;font-size:11.5px;color:var(--ink-3);margin-top:3px;line-height:1.45}
.stat-line > div{min-width:0}
.stat-line{display:flex;gap:26px;flex-wrap:wrap}
.stat-line .v{font-size:22px;font-weight:800;letter-spacing:-.02em}
.stat-line .k{font-size:11px;opacity:.6;margin-top:2px}

/* =========================================================
   RESPONSIVE
   ========================================================= */
.mob-btn{display:none}
@media(max-width:1200px){
  .flow{grid-template-columns:228px minmax(0,1fr)}
  .g4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid[style*="repeat(6"]{grid-template-columns:repeat(3,minmax(0,1fr)) !important}
  .grid[style*="repeat(4"]{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
}
@media(max-width:1000px){
  .panel{position:fixed;left:var(--rail-w);top:0;transform:translateX(-110%);transition:.22s;box-shadow:var(--sh-lg)}
  .panel.show{transform:none}
  .mob-btn{display:grid}
  .g3,.g2{grid-template-columns:minmax(0,1fr)}
  .grid[style*="grid-template-columns"]{grid-template-columns:minmax(0,1fr) !important}
  .flow{grid-template-columns:minmax(0,1fr)}
  .flow > *{min-width:0}
  .checklist{position:static}
  .search{width:auto;flex:1}
  .login-wrap{grid-template-columns:1fr}
  .login-art{display:none}
}
@media(max-width:620px){
  .work-body{padding:14px}
  .g4,.grid[style*="repeat(6"],.grid[style*="repeat(4"]{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
  .page-h h1{font-size:18px}
  .page-h .btn{flex:1}
  .work-top{padding:0 14px}
  .crumb{display:none}
  .step-nav{flex-wrap:wrap;row-gap:12px}
  .step-nav .mid{order:3;width:100%;text-align:center}
  .step-nav .btn{flex:1}
  .card-f.row{flex-wrap:wrap;row-gap:10px}
  .card-h{flex-wrap:wrap;row-gap:8px}
}