/* ===========================================================
   Reincofusion — Live Platform Demo (simulated product UI)
   =========================================================== */
:root{
  --blue-900:#062355; --blue-800:#0A3179; --blue-700:#0F44A8;
  --blue-600:#1558D6; --blue-500:#2B71F5; --blue-100:#DDE8FD; --blue-50:#EFF5FF;
  --cyan:#00C2D7; --cyan-light:#3DDCEC;
  --ink:#0A1628; --slate:#5B6B85; --slate-light:#8494AC;
  --line:#E4EAF3; --bg:#FFFFFF; --bg-soft:#F5F8FD;
  --green:#0E9F6E; --green-bg:#E6F6F0;
  --amber:#B76E00; --amber-bg:#FDF3E4;
  --red:#C2536B; --red-bg:#FCEDF0;
  --grad:linear-gradient(115deg,#1558D6 0%,#2B71F5 45%,#00C2D7 100%);
  --f-head:'Plus Jakarta Sans',system-ui,sans-serif;
  --f-body:'Inter',system-ui,sans-serif;
  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-pill:100px;
  --sh-sm:0 1px 3px rgba(10,22,40,.06);
  --sh-md:0 6px 20px rgba(10,22,40,.09);
  --sh-lg:0 20px 48px rgba(10,22,40,.16);
}
*,*::before,*::after{box-sizing:border-box;}
body{margin:0;background:var(--bg-soft);color:var(--ink);font-family:var(--f-body);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased;}
h1,h2,h3,h4{font-family:var(--f-head);margin:0;letter-spacing:-.02em;font-weight:700;line-height:1.2;}
p{margin:0;} a{color:inherit;text-decoration:none;} ul{margin:0;padding:0;list-style:none;}
button{font-family:inherit;cursor:pointer;}
:focus-visible{outline:2px solid var(--blue-500);outline-offset:2px;}

/* ---------- demo banner ---------- */
.dbanner{background:var(--blue-900);color:#fff;padding:.6rem 1.2rem;display:flex;align-items:center;gap:.8rem;font-size:.83rem;flex-wrap:wrap;}
.dbanner b{font-family:var(--f-head);font-weight:700;}
.dbanner span{color:rgba(255,255,255,.7);}
.dbanner a{margin-left:auto;background:rgba(255,255,255,.14);border-radius:var(--r-pill);padding:.35rem 1rem;font-family:var(--f-head);font-size:.8rem;font-weight:600;transition:background .18s;}
.dbanner a:hover{background:rgba(255,255,255,.24);}
.dpill{background:var(--cyan);color:var(--blue-900);border-radius:var(--r-pill);padding:.15rem .6rem;font-family:var(--f-head);font-size:.7rem;font-weight:800;letter-spacing:.06em;}

/* ---------- shell ---------- */
.app{display:grid;grid-template-columns:230px 1fr;min-height:calc(100vh - 42px);}
.nav{background:var(--blue-900);color:rgba(255,255,255,.72);display:flex;flex-direction:column;position:sticky;top:0;height:calc(100vh - 42px);overflow-y:auto;}
.nav__brand{display:flex;align-items:center;gap:.6rem;padding:1rem 1.1rem;border-bottom:1px solid rgba(255,255,255,.12);}
.nav__brand svg{width:28px;height:28px;flex-shrink:0;}
.nav__brand b{font-family:var(--f-head);font-size:.95rem;color:#fff;font-weight:800;letter-spacing:-.03em;display:block;line-height:1.1;}
.nav__brand em{font-style:normal;font-size:.62rem;color:var(--cyan-light);font-weight:700;letter-spacing:.1em;text-transform:uppercase;}
.nav__list{padding:.7rem .6rem;flex:1;}
.nav__lbl{font-family:var(--f-head);font-size:.6rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:rgba(255,255,255,.35);padding:.8rem .7rem .45rem;}
.nav__i{display:flex;align-items:center;gap:.65rem;padding:.55rem .7rem;border-radius:var(--r-sm);font-family:var(--f-head);font-size:.85rem;font-weight:500;color:rgba(255,255,255,.72);width:100%;background:none;border:0;text-align:left;margin-bottom:.12rem;transition:background .16s,color .16s;}
.nav__i:hover{background:rgba(255,255,255,.08);color:#fff;}
.nav__i.is-on{background:var(--grad);color:#fff;font-weight:600;}
.nav__i svg{width:16px;height:16px;flex-shrink:0;}
.nav__i .tag{margin-left:auto;background:var(--cyan);color:var(--blue-900);border-radius:var(--r-pill);padding:.02rem .4rem;font-size:.62rem;font-weight:800;}

.main{min-width:0;display:flex;flex-direction:column;}
.top{background:#fff;border-bottom:1px solid var(--line);padding:.85rem 1.4rem;display:flex;align-items:center;gap:1rem;position:sticky;top:0;z-index:30;}
.top h1{font-size:1.1rem;}
.top .sub{font-size:.78rem;color:var(--slate-light);}
.top__r{margin-left:auto;display:flex;align-items:center;gap:.6rem;}
.live{display:inline-flex;align-items:center;gap:.4rem;background:var(--green-bg);color:var(--green);border-radius:var(--r-pill);padding:.3rem .75rem;font-family:var(--f-head);font-size:.74rem;font-weight:700;}
.live i{width:6px;height:6px;border-radius:50%;background:currentColor;display:block;animation:bp 2s ease-in-out infinite;}
@keyframes bp{0%,100%{box-shadow:0 0 0 0 rgba(14,159,110,.5);}50%{box-shadow:0 0 0 5px rgba(14,159,110,0);}}
.clock{font-family:var(--f-head);font-size:.85rem;font-weight:700;font-variant-numeric:tabular-nums;}
.burger{display:none;background:none;border:0;padding:.3rem;}
.burger svg{width:20px;height:20px;}
.view{padding:1.4rem;flex:1;}

/* ---------- primitives ---------- */
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--sh-sm);}
.card__h{padding:.9rem 1.1rem;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:.7rem;}
.card__h h3{font-size:.92rem;}
.card__h .r{margin-left:auto;font-size:.78rem;color:var(--slate-light);}
.card__b{padding:1.1rem;}
.g{display:grid;gap:1rem;}
.g2{grid-template-columns:1fr 1fr;}
.g3{grid-template-columns:repeat(3,1fr);}
.g4{grid-template-columns:repeat(4,1fr);}
.g-2-1{grid-template-columns:1.6fr 1fr;}
.g-1-2{grid-template-columns:1fr 1.6fr;}
@media (max-width:1100px){.g3,.g4{grid-template-columns:1fr 1fr;}.g-2-1,.g-1-2{grid-template-columns:1fr;}}
@media (max-width:680px){.g2,.g3,.g4{grid-template-columns:1fr;}}

.kpi{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:1.05rem;box-shadow:var(--sh-sm);}
.kpi__t{display:flex;align-items:center;gap:.45rem;font-size:.76rem;color:var(--slate-light);font-weight:500;margin-bottom:.5rem;}
.kpi__t svg{width:14px;height:14px;color:var(--blue-600);}
.kpi__v{font-family:var(--f-head);font-size:1.65rem;font-weight:800;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums;}
.kpi__d{font-size:.74rem;color:var(--slate-light);margin-top:.35rem;}
.up{color:var(--green);font-weight:600;} .down{color:var(--red);font-weight:600;}

.bar{height:6px;background:var(--line);border-radius:6px;overflow:hidden;}
.bar i{display:block;height:100%;background:var(--grad);border-radius:6px;transition:width .6s cubic-bezier(.3,.8,.4,1);}
.bar.g i{background:var(--green);} .bar.a i{background:#E0A33E;} .bar.r i{background:var(--red);}

table.t{width:100%;border-collapse:collapse;font-size:.85rem;}
.t thead th{text-align:left;padding:.6rem 1.1rem;font-family:var(--f-head);font-size:.68rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--slate-light);background:var(--bg-soft);border-bottom:1px solid var(--line);white-space:nowrap;}
.t tbody td{padding:.7rem 1.1rem;border-bottom:1px solid var(--line);}
.t tbody tr:last-child td{border-bottom:0;}
.t tbody tr:hover{background:var(--bg-soft);}
.t .nm{font-family:var(--f-head);font-weight:600;}
.t .sub{font-size:.75rem;color:var(--slate-light);}
.tw{overflow-x:auto;}

.pl{display:inline-flex;align-items:center;gap:.28rem;border-radius:var(--r-pill);padding:.2rem .6rem;font-family:var(--f-head);font-size:.7rem;font-weight:700;white-space:nowrap;}
.pl i{width:5px;height:5px;border-radius:50%;background:currentColor;}
.pl.ok{background:var(--green-bg);color:var(--green);}
.pl.warn{background:var(--amber-bg);color:var(--amber);}
.pl.bad{background:var(--red-bg);color:var(--red);}
.pl.info{background:var(--blue-50);color:var(--blue-700);}
.pl.mute{background:var(--bg-soft);color:var(--slate);}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;padding:.5rem 1rem;border-radius:var(--r-sm);font-family:var(--f-head);font-size:.83rem;font-weight:600;border:1.5px solid transparent;transition:all .16s;}
.btn svg{width:13px;height:13px;}
.btn.p{background:var(--grad);color:#fff;}
.btn.p:hover{filter:brightness(1.07);}
.btn.g{border-color:var(--line);background:#fff;color:var(--ink);}
.btn.g:hover{border-color:var(--blue-500);color:var(--blue-600);}
.btn.sm{padding:.32rem .7rem;font-size:.76rem;}

.tabs{display:flex;gap:.4rem;flex-wrap:wrap;margin-bottom:1rem;}
.tab{background:#fff;border:1.5px solid var(--line);border-radius:var(--r-pill);padding:.42rem .95rem;font-family:var(--f-head);font-size:.8rem;font-weight:600;color:var(--slate);transition:all .16s;}
.tab:hover{border-color:var(--blue-500);color:var(--blue-600);}
.tab.is-on{background:var(--grad);border-color:transparent;color:#fff;}

/* charts */
.chart{display:flex;align-items:flex-end;gap:.45rem;height:150px;}
.chart .b{flex:1;display:flex;flex-direction:column;align-items:center;gap:.35rem;height:100%;justify-content:flex-end;}
.chart .f{width:100%;border-radius:4px 4px 0 0;background:var(--grad);min-height:3px;transition:height .6s cubic-bezier(.3,.8,.4,1);position:relative;}
.chart .f:hover::after{content:attr(data-v);position:absolute;top:-22px;left:50%;transform:translateX(-50%);background:var(--ink);color:#fff;font-size:.68rem;padding:.15rem .45rem;border-radius:4px;white-space:nowrap;}
.chart .l{font-size:.66rem;color:var(--slate-light);}
.spark{width:100%;height:auto;display:block;}

/* gauge */
.gauge{display:flex;align-items:center;gap:1rem;}
.gauge svg{width:96px;height:96px;flex-shrink:0;}
.gauge__v{font-family:var(--f-head);font-size:1.5rem;font-weight:800;letter-spacing:-.03em;}
.gauge__l{font-size:.76rem;color:var(--slate-light);}

/* line / machine status */
.lines{display:grid;gap:.6rem;}
.line{display:grid;grid-template-columns:auto 1fr auto;gap:.9rem;align-items:center;padding:.75rem .9rem;background:var(--bg-soft);border-radius:var(--r-sm);}
.line__d{width:9px;height:9px;border-radius:50%;flex-shrink:0;}
.line b{font-family:var(--f-head);font-size:.85rem;font-weight:600;display:block;}
.line small{font-size:.72rem;color:var(--slate-light);}
.line__v{text-align:right;font-family:var(--f-head);font-weight:700;font-size:.85rem;}

/* kanban */
.kan{display:grid;grid-template-columns:repeat(4,1fr);gap:.8rem;align-items:start;}
@media (max-width:1000px){.kan{grid-template-columns:1fr 1fr;}}
@media (max-width:600px){.kan{grid-template-columns:1fr;}}
.kcol{background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--r-md);padding:.7rem;min-height:160px;transition:background .16s,border-color .16s;}
.kcol.over{background:var(--blue-50);border-color:var(--blue-500);}
.kcol__h{display:flex;align-items:center;gap:.45rem;padding:.15rem .25rem .6rem;font-family:var(--f-head);font-size:.78rem;font-weight:700;}
.kcol__h .n{margin-left:auto;background:#fff;border:1px solid var(--line);border-radius:var(--r-pill);padding:0 .45rem;font-size:.68rem;color:var(--slate);}
.kc{background:#fff;border:1px solid var(--line);border-radius:var(--r-sm);padding:.7rem;margin-bottom:.5rem;box-shadow:var(--sh-sm);cursor:grab;transition:box-shadow .16s,transform .16s;}
.kc:hover{box-shadow:var(--sh-md);transform:translateY(-1px);}
.kc.drag{opacity:.4;}
.kc b{display:block;font-family:var(--f-head);font-size:.82rem;font-weight:600;}
.kc small{font-size:.72rem;color:var(--slate-light);}
.kc .m{display:flex;align-items:center;margin-top:.5rem;font-size:.72rem;color:var(--slate);}
.kc .m .v{margin-left:auto;font-family:var(--f-head);font-weight:700;color:var(--blue-700);}

/* operator kiosk */
.kiosk{background:var(--blue-900);border-radius:var(--r-lg);padding:1.4rem;color:#fff;}
.kiosk__h{display:flex;align-items:center;gap:.8rem;margin-bottom:1.1rem;flex-wrap:wrap;}
.kiosk__av{width:42px;height:42px;border-radius:50%;background:var(--grad);display:flex;align-items:center;justify-content:center;font-family:var(--f-head);font-weight:800;font-size:.85rem;}
.kiosk__h b{font-family:var(--f-head);font-size:.95rem;display:block;}
.kiosk__h small{font-size:.76rem;color:rgba(255,255,255,.6);}
.kiosk__st{margin-left:auto;display:flex;align-items:center;gap:.9rem;}
.kiosk__sync{display:inline-flex;align-items:center;gap:.4rem;background:rgba(61,220,236,.16);color:var(--cyan-light);border-radius:var(--r-pill);padding:.3rem .8rem;font-size:.74rem;font-weight:600;}
.kiosk__m{display:grid;grid-template-columns:repeat(3,1fr);gap:.7rem;margin-bottom:1rem;}
.kiosk__m div{background:rgba(255,255,255,.08);border-radius:var(--r-sm);padding:.8rem;}
.kiosk__m b{display:block;font-family:var(--f-head);font-size:1.3rem;font-weight:800;letter-spacing:-.02em;}
.kiosk__m small{font-size:.7rem;color:rgba(255,255,255,.6);}
.kbtns{display:grid;grid-template-columns:1fr 1fr;gap:.7rem;}
@media (max-width:560px){.kbtns,.kiosk__m{grid-template-columns:1fr;}}
.kbtn{display:flex;align-items:center;gap:.85rem;background:rgba(255,255,255,.1);border:1.5px solid rgba(255,255,255,.18);border-radius:var(--r-md);padding:1.1rem;color:#fff;text-align:left;transition:all .16s;width:100%;}
.kbtn:hover{background:rgba(255,255,255,.18);border-color:#fff;transform:translateY(-2px);}
.kbtn svg{width:24px;height:24px;flex-shrink:0;color:var(--cyan-light);}
.kbtn b{display:block;font-family:var(--f-head);font-size:.92rem;font-weight:600;}
.kbtn small{font-size:.72rem;color:rgba(255,255,255,.6);}
.klog{margin-top:1rem;border-top:1px solid rgba(255,255,255,.14);padding-top:.8rem;}
.klog div{display:flex;justify-content:space-between;font-size:.78rem;padding:.3rem 0;color:rgba(255,255,255,.8);}
.klog span{color:rgba(255,255,255,.45);}

/* checklist */
.chk{display:grid;gap:.5rem;}
.chk__i{display:flex;align-items:center;gap:.8rem;padding:.8rem .9rem;border:1.5px solid var(--line);border-radius:var(--r-sm);background:#fff;transition:all .16s;width:100%;text-align:left;}
.chk__i:hover{border-color:var(--blue-500);}
.chk__b{width:24px;height:24px;border-radius:7px;border:2px solid var(--line);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:transparent;transition:all .18s;}
.chk__i.done .chk__b{background:var(--green);border-color:var(--green);color:#fff;}
.chk__i.fail .chk__b{background:var(--red);border-color:var(--red);color:#fff;}
.chk__b svg{width:13px;height:13px;}
.chk__i b{font-family:var(--f-head);font-size:.86rem;font-weight:600;display:block;}
.chk__i small{font-size:.74rem;color:var(--slate-light);}
.chk__i .act{margin-left:auto;display:flex;gap:.3rem;}

/* timeline / genealogy */
.tl{position:relative;padding-left:2.2rem;}
.tl::before{content:"";position:absolute;left:8px;top:6px;bottom:6px;width:2px;background:linear-gradient(180deg,var(--blue-500),var(--cyan));border-radius:2px;}
.tl__i{position:relative;padding-bottom:1.3rem;}
.tl__i:last-child{padding-bottom:0;}
.tl__i::before{content:"";position:absolute;left:-2.2rem;top:3px;width:18px;height:18px;border-radius:50%;background:#fff;border:3px solid var(--blue-500);}
.tl__i.ok::before{border-color:var(--green);}
.tl__i b{font-family:var(--f-head);font-size:.88rem;font-weight:700;display:block;}
.tl__i small{font-size:.76rem;color:var(--slate-light);}
.tl__i p{font-size:.82rem;color:var(--slate);margin-top:.2rem;}

/* chat */
.chat{display:flex;flex-direction:column;height:420px;}
.chat__b{flex:1;overflow-y:auto;padding:1.1rem;display:flex;flex-direction:column;gap:.8rem;}
.msg{max-width:82%;padding:.75rem .95rem;border-radius:var(--r-md);font-size:.87rem;line-height:1.55;}
.msg.u{align-self:flex-end;background:var(--grad);color:#fff;border-bottom-right-radius:4px;}
.msg.a{align-self:flex-start;background:var(--bg-soft);border-bottom-left-radius:4px;}
.msg.a b{font-family:var(--f-head);}
.msg table{width:100%;font-size:.8rem;margin-top:.5rem;border-collapse:collapse;}
.msg table td{padding:.25rem 0;border-bottom:1px solid var(--line);}
.msg table td:last-child{text-align:right;font-weight:600;}
.chat__f{border-top:1px solid var(--line);padding:.8rem;display:flex;gap:.5rem;}
.chat__f input{flex:1;padding:.6rem .85rem;border:1.5px solid var(--line);border-radius:var(--r-pill);font-family:var(--f-body);font-size:.88rem;}
.chat__f input:focus{border-color:var(--blue-500);outline:none;}
.sugg{display:flex;gap:.4rem;flex-wrap:wrap;padding:0 1.1rem 1rem;}
.sugg button{background:var(--blue-50);border:0;border-radius:var(--r-pill);padding:.35rem .8rem;font-size:.76rem;color:var(--blue-700);font-weight:500;}
.sugg button:hover{background:var(--blue-100);}
.dots span{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--slate-light);margin-right:3px;animation:d 1.2s infinite;}
.dots span:nth-child(2){animation-delay:.2s;} .dots span:nth-child(3){animation-delay:.4s;}
@keyframes d{0%,60%,100%{opacity:.3;}30%{opacity:1;}}

/* alerts */
.al{display:flex;gap:.8rem;padding:.9rem;border:1px solid var(--line);border-left-width:3px;border-radius:var(--r-sm);background:#fff;margin-bottom:.6rem;}
.al.hi{border-left-color:var(--red);} .al.md{border-left-color:#E0A33E;} .al.lo{border-left-color:var(--blue-500);}
.al__i{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.al.hi .al__i{background:var(--red-bg);color:var(--red);}
.al.md .al__i{background:var(--amber-bg);color:var(--amber);}
.al.lo .al__i{background:var(--blue-50);color:var(--blue-600);}
.al__i svg{width:15px;height:15px;}
.al b{font-family:var(--f-head);font-size:.86rem;font-weight:700;display:block;}
.al p{font-size:.8rem;color:var(--slate);margin-top:.15rem;}
.al small{font-size:.72rem;color:var(--slate-light);}
.al .x{margin-left:auto;align-self:center;}

/* heat / grid map */
.heat{display:grid;grid-template-columns:repeat(12,1fr);gap:3px;}
.heat i{aspect-ratio:1;border-radius:3px;background:var(--blue-50);}
.heat i.l1{background:#BBD5FF;} .heat i.l2{background:#7FB0FF;} .heat i.l3{background:#2B71F5;} .heat i.l4{background:#0F44A8;}
.legend{display:flex;align-items:center;gap:.4rem;font-size:.72rem;color:var(--slate-light);margin-top:.6rem;}
.legend i{width:12px;height:12px;border-radius:3px;display:block;}

/* bins */
.bins{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:.5rem;}
.bin{border:1.5px solid var(--line);border-radius:var(--r-sm);padding:.55rem;text-align:center;background:#fff;transition:all .16s;}
.bin:hover{border-color:var(--blue-500);transform:translateY(-2px);}
.bin b{display:block;font-family:var(--f-head);font-size:.74rem;font-weight:700;}
.bin small{font-size:.68rem;color:var(--slate-light);}
.bin.full{background:var(--blue-50);border-color:var(--blue-100);}
.bin.low{background:var(--amber-bg);border-color:#F0DCB8;}
.bin.empty{opacity:.5;}

/* roster */
.roster{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.6rem;}
.rp{display:flex;align-items:center;gap:.6rem;padding:.6rem;border:1px solid var(--line);border-radius:var(--r-sm);background:#fff;}
.rp__a{width:32px;height:32px;border-radius:50%;background:var(--grad);color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--f-head);font-size:.68rem;font-weight:800;flex-shrink:0;}
.rp b{font-family:var(--f-head);font-size:.8rem;font-weight:600;display:block;line-height:1.2;}
.rp small{font-size:.7rem;color:var(--slate-light);}
.rp.out{opacity:.5;}
.rp.out .rp__a{background:var(--line);color:var(--slate);}

.toast{position:fixed;bottom:1.2rem;left:50%;transform:translateX(-50%) translateY(90px);background:var(--ink);color:#fff;padding:.65rem 1.15rem;border-radius:var(--r-pill);font-size:.84rem;font-weight:500;z-index:200;opacity:0;transition:all .28s cubic-bezier(.2,.7,.3,1);}
.toast.on{transform:translateX(-50%) translateY(0);opacity:1;}

.note{background:var(--blue-50);color:var(--blue-700);border-radius:var(--r-sm);padding:.6rem .9rem;font-size:.8rem;margin-bottom:1rem;display:flex;gap:.5rem;align-items:center;}
.note svg{width:15px;height:15px;flex-shrink:0;}

@media (max-width:900px){
  .app{grid-template-columns:1fr;}
  .nav{position:fixed;left:0;top:42px;bottom:0;width:230px;z-index:60;transform:translateX(-100%);transition:transform .24s;height:auto;}
  .nav.open{transform:none;}
  .burger{display:block;}
  .view{padding:1rem;}
}

/* ---------- configurator ---------- */
.cfgbtn{display:inline-flex;align-items:center;gap:.4rem;background:rgba(255,255,255,.14);border:0;border-radius:var(--r-pill);padding:.35rem 1rem;color:#fff;font-family:var(--f-head);font-size:.8rem;font-weight:600;transition:background .18s;}
.cfgbtn:hover{background:rgba(255,255,255,.26);}
.cfgbtn svg{width:14px;height:14px;}
.cfg{position:fixed;inset:0;z-index:150;display:none;}
.cfg.open{display:block;}
.cfg__bg{position:absolute;inset:0;background:rgba(10,22,40,.5);}
.cfg__p{position:absolute;top:0;right:0;bottom:0;width:min(460px,100%);background:#fff;box-shadow:var(--sh-lg);display:flex;flex-direction:column;animation:sl .24s cubic-bezier(.2,.7,.3,1);}
@keyframes sl{from{transform:translateX(100%);}to{transform:none;}}
.cfg__h{padding:1.1rem 1.3rem;border-bottom:1px solid var(--line);display:flex;align-items:flex-start;gap:.8rem;}
.cfg__h h3{font-size:1.05rem;}
.cfg__h p{font-size:.8rem;color:var(--slate-light);margin-top:.2rem;}
.cfg__x{margin-left:auto;background:var(--bg-soft);border:0;border-radius:50%;width:30px;height:30px;display:flex;align-items:center;justify-content:center;color:var(--slate);flex-shrink:0;}
.cfg__x svg{width:14px;height:14px;}
.cfg__b{padding:1.2rem 1.3rem;overflow-y:auto;flex:1;}
.cfg__f{padding:1rem 1.3rem;border-top:1px solid var(--line);display:grid;gap:.5rem;}
.cfg__lbl{font-family:var(--f-head);font-size:.72rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--slate-light);margin:1.3rem 0 .6rem;display:flex;align-items:center;gap:.6rem;}
.cfg__lbl:first-child{margin-top:0;}
.cfg__lbl::after{content:"";flex:1;height:1px;background:var(--line);}
.cfg__in{width:100%;padding:.6rem .8rem;border:1.5px solid var(--line);border-radius:var(--r-sm);font-family:var(--f-body);font-size:.9rem;}
.cfg__in:focus{border-color:var(--blue-500);outline:none;}
.preset{display:grid;gap:.5rem;}
.preset button{display:flex;align-items:center;gap:.7rem;text-align:left;background:#fff;border:1.5px solid var(--line);border-radius:var(--r-sm);padding:.75rem .85rem;transition:all .16s;width:100%;}
.preset button:hover{border-color:var(--blue-500);transform:translateY(-1px);}
.preset b{font-family:var(--f-head);font-size:.85rem;font-weight:700;display:block;}
.preset small{font-size:.74rem;color:var(--slate-light);}
.preset .c{margin-left:auto;background:var(--blue-50);color:var(--blue-700);border-radius:var(--r-pill);padding:.12rem .55rem;font-family:var(--f-head);font-size:.7rem;font-weight:700;white-space:nowrap;}
.mods{display:grid;gap:.4rem;}
.mod{display:flex;align-items:center;gap:.7rem;padding:.6rem .75rem;border:1.5px solid var(--line);border-radius:var(--r-sm);background:#fff;width:100%;text-align:left;transition:all .14s;}
.mod:hover{border-color:var(--blue-100);}
.mod.on{border-color:var(--blue-500);background:var(--blue-50);}
.mod__c{width:20px;height:20px;border-radius:6px;border:2px solid var(--line);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:transparent;transition:all .16s;}
.mod.on .mod__c{background:var(--grad);border-color:transparent;color:#fff;}
.mod__c svg{width:11px;height:11px;}
.mod b{font-family:var(--f-head);font-size:.83rem;font-weight:600;display:block;}
.mod small{font-size:.72rem;color:var(--slate-light);}
.mod svg.ic{width:15px;height:15px;color:var(--blue-600);flex-shrink:0;}
.copied{background:var(--green-bg)!important;color:var(--green)!important;}

/* ---------- feature panel ---------- */
.featgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:1.2rem;}
.featcol h5{font-family:var(--f-head);font-size:.74rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--blue-600);margin:0 0 .6rem;display:flex;align-items:center;gap:.45rem;}
.featcol h5 span{background:var(--blue-50);border-radius:var(--r-pill);padding:0 .4rem;font-size:.68rem;}
.featcol ul{display:grid;gap:.3rem;}
.featcol li{display:flex;gap:.4rem;align-items:flex-start;font-size:.79rem;color:var(--slate);}
.featcol li svg{width:12px;height:12px;color:var(--blue-500);flex-shrink:0;margin-top:.22rem;}

/* ---------- settings widgets ---------- */
.tgl{display:flex;align-items:center;gap:1rem;padding:.75rem .9rem;border:1px solid var(--line);border-radius:var(--r-sm);background:#fff;}
.tgl b{font-family:var(--f-head);font-size:.85rem;font-weight:600;display:block;}
.tgl small{font-size:.75rem;color:var(--slate-light);}
.tgl .sw{margin-left:auto;width:38px;height:21px;border-radius:var(--r-pill);background:var(--line);position:relative;flex-shrink:0;transition:background .2s;}
.tgl .sw i{position:absolute;top:2.5px;left:2.5px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:var(--sh-sm);transition:transform .2s;}
.tgl.on .sw{background:var(--green);}
.tgl.on .sw i{transform:translateX(17px);}

table.mx th{text-align:center;} table.mx td{text-align:center;} table.mx td:first-child{text-align:left;}
.mk{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:6px;}
.mk svg{width:12px;height:12px;}
.mk.full{background:var(--green-bg);color:var(--green);}
.mk.part{background:var(--blue-50);color:var(--blue-600);}
.mk.none{background:var(--bg-soft);color:var(--slate-light);font-size:.8rem;}
.legend .mk{margin-right:.3rem;margin-left:.6rem;}
.legend .mk:first-child{margin-left:0;}

.tree{display:grid;gap:.25rem;}
.tree ul{margin:.25rem 0 .25rem 1.3rem;display:grid;gap:.2rem;border-left:1px solid var(--line);padding-left:.8rem;}
.tree__n{display:flex;align-items:center;gap:.45rem;font-size:.84rem;padding:.3rem .4rem;border-radius:var(--r-sm);font-family:var(--f-head);font-weight:600;}
.tree__n:hover{background:var(--bg-soft);}
.tree__n svg{width:14px;height:14px;color:var(--blue-600);}
.tree__n em{font-style:normal;margin-left:auto;font-size:.72rem;color:var(--slate-light);font-weight:500;}
.tree__n.leaf{font-weight:400;color:var(--slate);font-family:var(--f-body);font-size:.8rem;}

/* ---------- extra widgets for the 60-screen build ---------- */
.flowsteps{display:grid;gap:.5rem;}
.fstep{display:flex;align-items:center;gap:.8rem;padding:.7rem .85rem;border:1px solid var(--line);border-radius:var(--r-sm);background:#fff;}
.fstep__n{width:24px;height:24px;border-radius:50%;background:var(--grad);color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--f-head);font-size:.72rem;font-weight:800;flex-shrink:0;}
.fstep b{font-family:var(--f-head);font-size:.84rem;font-weight:600;display:block;}
.fstep small{font-size:.74rem;color:var(--slate-light);}
.fstep .pl{margin-left:auto;}

.gantt{display:grid;gap:.45rem;}
.gantt__r{display:grid;grid-template-columns:190px 1fr;gap:.8rem;align-items:center;}
.gantt__l b{font-family:var(--f-head);font-size:.8rem;font-weight:600;display:block;line-height:1.2;}
.gantt__l small{font-size:.72rem;color:var(--slate-light);}
.gantt__t{position:relative;height:22px;background:var(--bg-soft);border-radius:5px;}
.gantt__b{position:absolute;top:3px;height:16px;border-radius:4px;background:var(--grad);}
.gantt__b.a{background:#E0A33E;} .gantt__b.r{background:var(--red);} .gantt__b.g{background:var(--grad);}
.gantt__x{display:grid;grid-template-columns:190px 1fr;gap:.8rem;margin-top:.3rem;}
.gantt__x span{display:none;}
.gantt__x::after{content:"";}
@media (max-width:700px){.gantt__r{grid-template-columns:120px 1fr;}}

table.rost td{text-align:center;} table.rost td:first-child{text-align:left;}
.shift{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:7px;font-family:var(--f-head);font-size:.74rem;font-weight:800;}
.shift.sm{background:var(--blue-50);color:var(--blue-700);}
.shift.sa{background:#E6F6F0;color:var(--green);}
.shift.sn{background:#EDE9FB;color:#5B45B8;}
.shift.so{background:var(--bg-soft);color:var(--slate-light);}

.bigsearch{position:relative;}
.bigsearch svg{position:absolute;left:1rem;top:50%;transform:translateY(-50%);width:18px;height:18px;color:var(--slate-light);}
.bigsearch input{width:100%;padding:.9rem 1rem .9rem 2.8rem;border:1.5px solid var(--blue-500);border-radius:var(--r-pill);font-family:var(--f-head);font-size:1rem;font-weight:600;}

.plant{position:relative;height:300px;background:var(--bg-soft);border-radius:var(--r-md);border:1px solid var(--line);}
.zone{position:absolute;border-radius:6px;display:flex;align-items:center;justify-content:center;padding:.4rem;text-align:center;border:2px solid;}
.zone b{font-family:var(--f-head);font-size:.72rem;font-weight:700;line-height:1.2;}
.zone.ok{background:rgba(14,159,110,.12);border-color:var(--green);color:var(--green);}
.zone.warn{background:rgba(224,163,62,.14);border-color:#E0A33E;color:var(--amber);}
.zone.bad{background:rgba(194,83,107,.12);border-color:var(--red);color:var(--red);}

.seqrow{display:flex;gap:.35rem;flex-wrap:wrap;}
.seqrow span{background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--r-sm);padding:.4rem .7rem;font-family:var(--f-head);font-size:.76rem;font-weight:600;}
.seqrow.opt span{background:var(--green-bg);border-color:#BCE5D5;color:var(--green);}

.portal{border:2px dashed var(--blue-100);border-radius:var(--r-lg);padding:1.1rem;background:linear-gradient(180deg,var(--blue-50) 0%,transparent 120px);}

.phones{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:1rem;}
.phone{border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:#fff;box-shadow:var(--sh-sm);}
.phone__top{padding:1rem;color:#fff;}
.phone__top b{font-family:var(--f-head);font-size:.95rem;display:block;}
.phone__top small{font-size:.72rem;opacity:.85;}
.phone__body{padding:.7rem;display:grid;gap:.35rem;}
.phone__row{display:flex;align-items:center;gap:.5rem;font-size:.79rem;padding:.45rem .5rem;background:var(--bg-soft);border-radius:var(--r-sm);}
.phone__ic{width:20px;height:20px;border-radius:5px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.phone__ic svg{width:9px;height:9px;}

.thread{display:grid;gap:.9rem;}
.msgrow{display:flex;gap:.7rem;}
.msgrow__a{width:30px;height:30px;border-radius:50%;background:var(--grad);color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--f-head);font-size:.68rem;font-weight:800;flex-shrink:0;}
.msgrow__h{display:flex;align-items:baseline;gap:.5rem;flex-wrap:wrap;}
.msgrow__h b{font-family:var(--f-head);font-size:.83rem;}
.msgrow__h span{font-size:.72rem;color:var(--slate-light);}
.msgrow__h em{font-style:normal;font-size:.72rem;color:var(--slate-light);margin-left:auto;}
.msgrow p{font-size:.85rem;color:var(--slate);margin-top:.15rem;}
.msgrow.hi p{background:var(--blue-50);padding:.5rem .7rem;border-radius:var(--r-sm);color:var(--blue-700);}

.rb{display:grid;grid-template-columns:1fr 1fr;gap:1rem;}
.rb__col h5{font-family:var(--f-head);font-size:.72rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--slate-light);margin:0 0 .5rem;}
.rb__f{padding:.45rem .7rem;border:1px solid var(--line);border-radius:var(--r-sm);font-size:.8rem;margin-bottom:.3rem;background:#fff;cursor:grab;}
.rb__f.on{background:var(--blue-50);border-color:var(--blue-500);color:var(--blue-700);font-weight:600;}
@media (max-width:600px){.rb{grid-template-columns:1fr;}}

.agent__ic{width:34px;height:34px;border-radius:10px;background:var(--grad);color:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.agent__ic svg{width:14px;height:14px;}

.chain{display:flex;flex-wrap:wrap;gap:.35rem;align-items:center;}
.chain span{background:#fff;border:1px solid var(--line);border-radius:var(--r-pill);padding:.35rem .8rem;font-family:var(--f-head);font-size:.77rem;font-weight:600;}
.chain span.hi{background:var(--grad);border-color:transparent;color:#fff;}
.chain i{color:var(--blue-500);font-style:normal;font-weight:700;font-size:.8rem;}

.nav__list{padding-bottom:2rem;}