:root{
  --bg:#f5f7fb; --card:#fff; --ink:#0f1b33; --muted:#5a6781; --line:#e3e8f0; --line-2:#d3dae6;
  --pri:#2f3fb8; --pri-2:#26339a; --pri-soft:#eef0fd; --teal:#0f9d8a; --teal-soft:#e3f6f3; --acc:#e07b1a;
  --ok:#15803d; --warn:#b45309; --bad:#b91c1c; --info:#1d4ed8;
  --ok-bg:#e8f6ee; --warn-bg:#fdf3e4; --bad-bg:#fdecec; --info-bg:#eaf0fd;
  --r:12px; --shadow:0 1px 2px rgba(15,27,51,.05),0 4px 14px rgba(15,27,51,.05);
  --font:"Manrope",system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans",sans-serif; --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:var(--font);color:var(--ink);background:var(--bg);font-size:14.5px;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:var(--pri)}
h1{font-size:1.55rem;margin:0 0 .75rem;letter-spacing:-.015em;text-wrap:balance} h2{font-size:1.12rem;margin:1.6rem 0 .6rem;letter-spacing:-.01em} h3{font-size:1rem;margin:0 0 .4rem}
.muted{color:var(--muted)} .small{font-size:.84rem} .right{text-align:right} .center{text-align:center}
.mono{font-family:var(--mono);font-size:.82em}
.brand{font-weight:800;font-size:1.22rem;text-decoration:none;color:var(--ink);letter-spacing:-.02em;white-space:nowrap}
.brand span{color:var(--acc)} .brand i{font-style:normal;font-size:.7em;color:var(--muted);font-weight:700}
.eyebrow{font-size:.72rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.demo-tag{font-family:var(--mono);font-size:.7rem;font-weight:600;background:var(--pri-soft);color:var(--pri);padding:.15rem .45rem;border-radius:6px}
:focus-visible{outline:2px solid var(--pri);outline-offset:2px}

/* buttons & forms */
.btn{display:inline-flex;align-items:center;gap:.35rem;background:var(--pri);color:#fff;border:1px solid transparent;border-radius:9px;padding:.52rem 1rem;font:inherit;font-weight:700;cursor:pointer;text-decoration:none;white-space:nowrap;line-height:1.3}
.btn:hover{background:var(--pri-2)} .btn.sm{padding:.35rem .7rem;font-size:.85rem}
.btn.ghost{background:#fff;color:var(--ink);border:1px solid var(--line-2)} .btn.ghost:hover{background:var(--pri-soft);color:var(--pri)}
.btn.teal{background:var(--teal)}
.btn.danger{background:var(--bad)} .btn.acc{background:var(--acc)}
.btn[disabled]{opacity:.5;cursor:not-allowed}
button.link{background:none;border:0;color:var(--pri);cursor:pointer;font:inherit;padding:0;text-decoration:underline}
form.inline{display:inline}
label{display:block;font-size:.85rem;font-weight:600;color:var(--muted);margin-bottom:.2rem}
input,select,textarea{width:100%;font:inherit;padding:.5rem .65rem;border:1px solid var(--line-2);border-radius:9px;background:#fff;color:var(--ink)}
input:focus,select:focus,textarea:focus{outline:3px solid #c9cef8;border-color:var(--pri)}
input[type=checkbox],input[type=radio]{width:auto}
.grid{display:grid;gap:.9rem;grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
.grid .span2{grid-column:span 2} .grid .full{grid-column:1/-1}
.actions{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center;margin-top:1rem}
.toolbar{display:flex;gap:.6rem;flex-wrap:wrap;align-items:end;margin-bottom:1rem}
.toolbar > *{flex:0 1 auto}

/* cards, tables */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:1.1rem 1.2rem;margin-bottom:1rem;box-shadow:var(--shadow)}
.card.narrow{max-width:460px;margin:2rem auto}
.kpis{display:grid;gap:.9rem;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));margin-bottom:1rem}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:.9rem 1rem;box-shadow:var(--shadow);position:relative;text-decoration:none;color:var(--ink);display:block}
a.kpi:hover{border-color:var(--pri);}
.kpi small{color:var(--muted);display:block;font-weight:600;font-size:.8rem} .kpi b{font-size:1.6rem;font-variant-numeric:tabular-nums;letter-spacing:-.02em} .kpi em{display:block;font-style:normal;font-size:.76rem;color:var(--muted)}
.kpi.ok{border-left:3px solid var(--ok)} .kpi.warn{border-left:3px solid var(--warn)} .kpi.bad{border-left:3px solid var(--bad)} .kpi.info{border-left:3px solid var(--info)}
.kpi.main{background:var(--pri);color:#fff;border-color:var(--pri)} .kpi.main small,.kpi.main em{color:#dfe3ff}
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:#fff;box-shadow:var(--shadow)}
table{border-collapse:collapse;width:100%}
th,td{padding:.5rem .6rem;border-bottom:1px solid var(--line);text-align:left;vertical-align:top;font-size:.9rem}
th{background:#f6f8fb;font-weight:700;white-space:nowrap;font-size:.76rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
tr:hover td{background:#fafbfe}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
tr.err td{background:var(--bad-bg)} tr.wrn td{background:var(--warn-bg)}
.pill{display:inline-block;padding:.12rem .55rem;border-radius:99px;font-size:.74rem;font-weight:700;background:var(--pri-soft);color:var(--pri);white-space:nowrap}
.pill.info{background:var(--info-bg);color:var(--info)} .pill.teal{background:var(--teal-soft);color:var(--teal)} .pill.verify{background:var(--warn-bg);color:var(--warn);border:1px dashed var(--warn)}
.pill.ok{background:var(--ok-bg);color:var(--ok)} .pill.warn{background:var(--warn-bg);color:var(--warn)} .pill.bad{background:var(--bad-bg);color:var(--bad)}
.flash{padding:.7rem 1rem;border-radius:8px;margin-bottom:1rem;background:var(--info-bg)}
.flash.success{background:var(--ok-bg);color:var(--ok)} .flash.error{background:var(--bad-bg);color:var(--bad)} .flash.warn{background:var(--warn-bg);color:var(--warn)}
code.big{font-size:1rem;background:#f0f3f7;padding:.15rem .45rem;border-radius:6px;letter-spacing:.08em}
ul.issues{margin:0;padding-left:1rem;font-size:.8rem} ul.issues li.e{color:var(--bad)} ul.issues li.w{color:var(--warn)}
.reg-cards{display:grid;gap:.8rem;grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.reg-card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:1rem;display:flex;flex-direction:column;gap:.4rem}
.reg-card p{margin:0;font-size:.85rem;color:var(--muted);flex:1}

/* app shell */
.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:.8rem;background:#fff;border-bottom:1px solid var(--line);padding:.55rem 1rem;min-height:58px}
.topbar .ctx{flex:1;display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;font-size:.9rem;min-width:0}
.menu-btn{display:none;background:none;border:0;font-size:1.4rem;cursor:pointer}
.sidebar{position:fixed;top:58px;bottom:0;left:0;width:236px;background:#fff;border-right:1px solid var(--line);padding:.8rem .6rem 1.4rem;overflow-y:auto}
.sidebar a{display:flex;align-items:center;gap:.5rem;padding:.42rem .7rem;border-radius:8px;text-decoration:none;color:#33405a;font-weight:600;font-size:.88rem}
.sidebar a .cnt{margin-left:auto;background:var(--bad-bg);color:var(--bad);font-size:.7rem;border-radius:99px;padding:0 .45rem}
.sidebar a.active,.sidebar a:hover{background:var(--pri-soft);color:var(--pri)}
.sub-box{margin-top:1.2rem;padding:.7rem .8rem;border-radius:8px;background:var(--ok-bg);font-size:.85rem}
.sub-box small{display:block;color:var(--muted)} .sub-box.warn{background:var(--warn-bg)} .sub-box.bad{background:var(--bad-bg)}
.content{margin-left:236px;padding:1.4rem 1.6rem 3rem;max-width:1440px}
@media (max-width:860px){
  .menu-btn{display:block}
  .sidebar{transform:translateX(-100%);transition:transform .2s;z-index:30;box-shadow:0 0 30px rgba(0,0,0,.15)}
  .nav-open .sidebar{transform:none}
  .content{margin-left:0;padding:1rem}
  .topbar .ctx{display:none}
  .grid .span2{grid-column:auto}
}

/* public */
.pub-head{display:flex;justify-content:space-between;align-items:center;padding:1rem 1.2rem;max-width:1150px;margin:0 auto}
.pub-head nav{display:flex;gap:1rem;align-items:center} .pub-head nav a:not(.btn){text-decoration:none;color:var(--ink);font-weight:500}
.pub-main{max-width:1150px;margin:0 auto;padding:1rem}
.pub-foot{text-align:center;color:var(--muted);font-size:.85rem;padding:2rem 1rem}
.hero{padding:3rem 0 2rem;display:grid;grid-template-columns:1.2fr 1fr;gap:2rem;align-items:center}
.hero h1{font-size:2.4rem;line-height:1.15;letter-spacing:-.02em}
.hero p.lead{font-size:1.1rem;color:var(--muted)}
.hero-panel{background:#fff;border:1px solid var(--line);border-radius:14px;padding:1.2rem}
.features{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:1rem;margin:2rem 0}
.features .card h3{color:var(--pri)}
.plans{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1rem}
.plan{background:#fff;border:1px solid var(--line);border-radius:14px;padding:1.2rem;display:flex;flex-direction:column;gap:.4rem}
.plan .price{font-size:1.8rem;font-weight:800} .plan .price small{font-size:.9rem;color:var(--muted);font-weight:500}
.plan ul{padding-left:1.1rem;margin:.3rem 0 1rem;flex:1;font-size:.9rem}
.plan.current{border:2px solid var(--pri)}
.segment{display:flex;gap:.4rem;margin:1rem 0}
@media (max-width:860px){.hero{grid-template-columns:1fr;padding-top:1rem}.hero h1{font-size:1.8rem}.pub-head nav a:nth-child(-n+2){display:none}}

/* print / registers */
body.print{background:#fff;padding:1rem}
.print-bar{display:flex;gap:.5rem;margin-bottom:1rem;flex-wrap:wrap}
.reg-head{text-align:center;margin-bottom:.6rem} .reg-head h1{font-size:1.2rem;margin:0} .reg-head .form{font-size:.85rem;color:var(--muted)}
.meta{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:.1rem 1.2rem;font-size:.85rem;margin-bottom:.8rem}
.meta b{color:var(--muted);font-weight:600}
table.reg th,table.reg td{border:1px solid #9aa3b2;padding:.25rem .35rem;font-size:.75rem}
table.reg th{background:#eef1f5;white-space:normal} table.reg tfoot td{font-weight:700;background:#f5f6f8}
.sign-row{display:flex;justify-content:space-between;margin-top:2.5rem;font-size:.85rem}
.slip{border:1px solid #9aa3b2;padding:.8rem 1rem;margin-bottom:1rem;page-break-inside:avoid;break-inside:avoid;font-size:.85rem}
.slip h2{margin:0;font-size:1rem;text-align:center}
.slip .two{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
.slip table td,.slip table th{border:1px solid #c7ccd4;padding:.2rem .4rem;font-size:.8rem}
@media print{
  .no-print{display:none!important}
  body.print{padding:0}
  @page{size:A4 landscape;margin:10mm}
  .slip{page-break-inside:avoid}
  thead{display:table-header-group}
}

/* v2: login tabs, role tiles, portals, employee portal */
.tabs{display:flex;gap:.3rem;flex-wrap:wrap;border-bottom:1px solid var(--line);margin:0 0 1rem}
.tab{background:none;border:0;border-bottom:3px solid transparent;padding:.5rem .7rem;font:inherit;font-weight:600;color:var(--muted);cursor:pointer}
.tab.on{color:var(--pri);border-bottom-color:var(--acc)}
.section-title{margin-top:2.2rem}
.role-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1rem}
.role-tile{background:#fff;border:1px solid var(--line);border-radius:14px;padding:1.2rem;text-decoration:none;color:var(--ink);display:flex;flex-direction:column;gap:.35rem;transition:box-shadow .15s,border-color .15s}
.role-tile:hover{border-color:var(--pri);box-shadow:0 6px 20px rgba(31,78,121,.12)}
.role-tile p{margin:0;color:var(--muted);font-size:.9rem;flex:1}
.role-ico{width:42px;height:42px;border-radius:12px;background:var(--pri);color:#fff;display:grid;place-items:center;font-weight:800;font-size:.9rem;letter-spacing:.03em}
.role-tile:nth-child(2) .role-ico{background:var(--acc)} .role-tile:nth-child(3) .role-ico{background:#2c7a7b} .role-tile:nth-child(4) .role-ico{background:#6b4fa0}
.role-tile .go{font-weight:700;color:var(--pri);font-size:.9rem}
.portal-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:.7rem}
.portal{background:#fff;border:1px solid var(--line);border-left:4px solid var(--pri);border-radius:10px;padding:.7rem .9rem;text-decoration:none;color:var(--ink);display:flex;flex-direction:column;gap:.15rem}
.portal:hover{border-left-color:var(--acc)} .portal span{font-size:.82rem;color:var(--muted)} .portal small{color:var(--pri);font-size:.75rem}
ol.steps{padding-left:1.2rem;margin:.4rem 0 0} ol.steps li{margin:.35rem 0}
.alerts{list-style:none;padding:0;margin:0} .alerts li{padding:.45rem .6rem;border-radius:8px;margin-bottom:.35rem;font-size:.9rem}
.alerts li.bad{background:var(--bad-bg);color:var(--bad)} .alerts li.warn{background:var(--warn-bg);color:var(--warn)} .alerts li.ok{background:var(--ok-bg);color:var(--ok)}
.unit-grid{margin-bottom:1rem;display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1rem}
.unit{background:#fff;border:1px solid var(--line);border-radius:12px;padding:1rem;display:flex;flex-direction:column;gap:.5rem}
.unit .nums{display:grid;grid-template-columns:repeat(3,1fr);gap:.4rem;text-align:center}
.unit .nums div{background:#f5f7fa;border-radius:8px;padding:.4rem} .unit .nums b{display:block;font-size:1.1rem} .unit .nums small{color:var(--muted);font-size:.72rem}
.emp-nav{display:flex;gap:.3rem;overflow-x:auto;background:#fff;border-bottom:1px solid var(--line);padding:0 1rem;position:sticky;top:57px;z-index:15}
.emp-nav a{padding:.7rem .8rem;white-space:nowrap;text-decoration:none;color:var(--muted);font-weight:600;border-bottom:3px solid transparent}
.emp-nav a.active{color:var(--pri);border-bottom-color:var(--acc)}
.emp-main{max-width:980px;margin:0 auto;padding:1.2rem 1rem}
.doc{max-width:800px;margin:0 auto;font-size:.95rem;line-height:1.6}
.doc h1{text-align:center;font-size:1.2rem;text-decoration:underline;margin:1rem 0}
.doc .lh{display:flex;justify-content:space-between;border-bottom:2px solid var(--ink);padding-bottom:.5rem;margin-bottom:1rem}
.doc table td{border:1px solid #c7ccd4;padding:.3rem .5rem;font-size:.9rem}
.doc ol li{margin:.3rem 0}
.idcard{width:340px;border:2px solid var(--pri);border-radius:12px;padding:1rem;margin:1rem auto;font-size:.85rem;page-break-inside:avoid}
.idcard h2{margin:0 0 .5rem;font-size:1rem;text-align:center;color:var(--pri)}
@media print{.emp-nav,.topbar{display:none}.doc{max-width:none}}
/* v3: identity card (CR80-like 86x54mm scaled), photos */
.idc-wrap{display:flex;gap:1rem;flex-wrap:wrap;justify-content:center;margin:1rem 0}
.idc{width:86mm;height:54mm;border:1.5px solid var(--pri);border-radius:3mm;overflow:hidden;display:flex;flex-direction:column;font-size:7.5pt;line-height:1.3;background:#fff;page-break-inside:avoid}
.idc-head{background:var(--pri);color:#fff;padding:1.2mm 2.5mm;display:flex;flex-direction:column}
.idc-head b{font-size:8.5pt} .idc-head span{font-size:6.5pt;opacity:.9}
.idc-body{display:flex;gap:2.5mm;padding:2mm 2.5mm;flex:1}
.idc-photo{width:20mm;height:25mm;border:1px solid #9aa3b2;display:grid;place-items:center;overflow:hidden;background:#f5f6f8;color:#999;font-size:6pt;text-align:center;flex:0 0 auto}
.idc-photo img{width:100%;height:100%;object-fit:cover}
.idc-fields{display:flex;flex-direction:column;gap:.3mm}
.idc-name{font-weight:800;font-size:9pt;color:var(--pri)}
.idc-foot{background:var(--acc);color:#fff;text-align:center;font-weight:800;letter-spacing:.2em;font-size:7pt;padding:.8mm}
.idc-back{padding:2.5mm;display:flex;flex-direction:column;gap:.4mm;height:100%}
.idc-sign{margin-top:auto;display:flex;justify-content:space-between;border-top:1px dashed #9aa3b2;padding-top:1mm;font-size:6.5pt}
.photo-sm{width:64px;height:80px;object-fit:cover;border-radius:6px;border:1px solid var(--line)}
.notice{background:#fff;border:1px solid var(--line);border-radius:12px;padding:1.2rem;max-height:60vh;overflow:auto;font-size:.92rem}
.notice h3{color:var(--pri);margin-top:1rem}
.due-bad{color:var(--bad);font-weight:700} .due-ok{color:var(--muted)}
.reg-card.form-card p{flex:0 0 auto}.reg-card.form-card{justify-content:flex-start}
/* v4: attendance */
.grid-att th,.grid-att td{padding:.25rem .3rem;font-size:.75rem}
.grid-att td a{text-decoration:none;color:inherit;display:block}
.att-P,.att-WOP,.att-HP,.att-OD{background:var(--ok-bg);color:var(--ok)} .att-A{background:var(--bad-bg);color:var(--bad)} .att-HD{background:var(--warn-bg);color:var(--warn)}
.att-L{background:#e8e3f5;color:#5b3fa0} .att-WO,.att-H{background:#eef1f5;color:var(--muted)}
body.kiosk{background:var(--pri);min-height:100vh;display:grid;place-items:center;padding:1rem}
.kiosk-box{background:#fff;border-radius:18px;padding:2rem;max-width:460px;width:100%;text-align:center}
.kiosk-box h1{font-size:1.3rem;margin:.6rem 0 0}
.kiosk-clock{font-size:2.8rem;font-weight:800;color:var(--pri);font-variant-numeric:tabular-nums}
.kiosk-input{font-size:1.4rem;text-align:center;margin-top:1rem;padding:.8rem}
.kiosk-btns{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;margin-top:1rem}
.kiosk-btns .btn{font-size:1.4rem;padding:1rem}
table.musterx th,table.musterx td{font-size:.6rem;padding:.12rem .15rem} td.mcell{white-space:nowrap;text-align:center;line-height:1.15}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:1rem}@media(max-width:860px){.two-col{grid-template-columns:1fr}}
.nav-h{display:flex;align-items:center;gap:.45rem;font-size:.68rem;text-transform:uppercase;letter-spacing:.09em;color:#8a94ab;margin:1rem .7rem .25rem;font-weight:800}
.nav-h svg{width:14px;height:14px}
.reg-scroll{overflow-x:auto}@media print{.reg-scroll{overflow:visible}}
.wage-comp td,.wage-comp th{font-size:.78rem}.wage-comp th{text-align:left;background:#eef1f5}
.plan .btn{white-space:normal;line-height:1.3}

/* v6: enterprise shell, search, notifications, charts, heatmap, law library */
.top-search{flex:1;max-width:520px;position:relative}
.top-search input{padding-left:2.1rem;background:#f6f8fb;border-color:var(--line)}
.top-search svg{position:absolute;left:.7rem;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--muted)}
.top-search kbd{position:absolute;right:.6rem;top:50%;transform:translateY(-50%);font-family:var(--mono);font-size:.7rem;color:var(--muted);border:1px solid var(--line-2);border-radius:5px;padding:0 .3rem;background:#fff}
.icon-btn{position:relative;display:inline-grid;place-items:center;width:38px;height:38px;border-radius:10px;border:1px solid var(--line);background:#fff;color:var(--ink);text-decoration:none}
.icon-btn:hover{background:var(--pri-soft);color:var(--pri)} .icon-btn svg{width:18px;height:18px}
.icon-btn .badge{position:absolute;top:-5px;right:-6px;background:var(--bad);color:#fff;font-size:.66rem;font-weight:800;border-radius:99px;padding:.05rem .35rem;border:2px solid #fff}
.ctx-chip{display:flex;flex-direction:column;line-height:1.2;min-width:0} .ctx-chip b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:260px} .ctx-chip small{color:var(--muted);font-size:.74rem}
.user-menu{position:relative} .user-menu summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:.4rem}
.user-menu summary::-webkit-details-marker{display:none}
.avatar{width:36px;height:36px;border-radius:50%;background:var(--teal);color:#fff;display:grid;place-items:center;font-weight:800;font-size:.8rem}
.user-menu .menu{position:absolute;right:0;top:44px;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 30px rgba(15,27,51,.14);min-width:230px;padding:.4rem;z-index:40}
.user-menu .menu a,.user-menu .menu button{display:block;width:100%;text-align:left;padding:.5rem .7rem;border-radius:8px;color:var(--ink);text-decoration:none;background:none;border:0;font:inherit;cursor:pointer}
.user-menu .menu a:hover,.user-menu .menu button:hover{background:var(--pri-soft)}
.page-head{display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;flex-wrap:wrap;margin:0 0 1rem}
.page-head h1{margin:.1rem 0 .2rem} .page-head p{margin:0;color:var(--muted);max-width:75ch}
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem} .grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
.grid-21{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:1rem}
@media(max-width:1100px){.grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-21{grid-template-columns:1fr}}
@media(max-width:760px){.grid-2,.grid-3{grid-template-columns:1fr}}
.card h3{display:flex;justify-content:space-between;align-items:center;gap:.5rem}
.chart{width:100%;height:auto;display:block}
.chart text{font-family:var(--font);font-size:11px;fill:var(--muted)}
.chart .lbl{fill:var(--ink);font-weight:700}
.bars .row{display:grid;grid-template-columns:minmax(90px,34%) 1fr 56px;gap:.5rem;align-items:center;font-size:.84rem;margin:.28rem 0;text-decoration:none;color:var(--ink)}
.bars .track{background:#eef1f7;border-radius:6px;height:10px;overflow:hidden} .bars .fill{height:100%;background:var(--pri);border-radius:6px}
.bars .fill.teal{background:var(--teal)} .bars .fill.ok{background:var(--ok)} .bars .fill.warn{background:var(--warn)} .bars .fill.bad{background:var(--bad)}
.bars .v{text-align:right;font-variant-numeric:tabular-nums;font-weight:700}
.heat{border-collapse:separate;border-spacing:4px;width:100%} .heat th{background:none;text-transform:none;letter-spacing:0;font-size:.74rem;color:var(--muted);text-align:center;border:0}
.heat td{border:0;text-align:center;border-radius:7px;font-weight:800;font-size:.8rem;padding:.55rem .3rem;color:#fff;font-variant-numeric:tabular-nums}
.heat td.h-na{background:#eef1f7;color:var(--muted);font-weight:600}
.heat td.h0{background:#b91c1c}.heat td.h1{background:#dc6b3a}.heat td.h2{background:#d9a21b;color:#1f1300}.heat td.h3{background:#46a867}.heat td.h4{background:#15803d}
.heat td.rowh{background:none;color:var(--ink);text-align:left;font-weight:700}
.state-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:6px}
.state-tiles a{display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:8px;padding:.45rem .2rem;text-decoration:none;font-weight:800;font-size:.8rem;background:#eef1f7;color:var(--muted)}
.state-tiles a small{font-weight:600;font-size:.68rem}
.state-tiles a.on{background:var(--ok);color:#fff}.state-tiles a.mid{background:#d9a21b;color:#1f1300}.state-tiles a.low{background:var(--bad);color:#fff}
.filter-bar{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.6rem;align-items:end}
.stepper{display:flex;gap:0;flex-wrap:wrap;margin:.3rem 0}
.stepper span{flex:1 1 110px;position:relative;padding:.45rem .5rem .45rem 1.3rem;font-size:.76rem;font-weight:700;background:#eef1f7;color:var(--muted);border-right:2px solid #fff}
.stepper span:first-child{border-radius:8px 0 0 8px}.stepper span:last-child{border-radius:0 8px 8px 0}
.stepper span.done{background:var(--teal-soft);color:var(--teal)} .stepper span.cur{background:var(--pri);color:#fff}
.stepper span::before{content:"";position:absolute;left:.5rem;top:50%;width:6px;height:6px;border-radius:50%;background:currentColor;transform:translateY(-50%)}
.src{display:flex;flex-wrap:wrap;gap:.3rem .9rem;font-size:.76rem;color:var(--muted);border-top:1px dashed var(--line-2);margin-top:.6rem;padding-top:.5rem;font-family:var(--mono)}
.src b{color:var(--ink);font-weight:600}
.cmp{display:grid;grid-template-columns:1fr 1fr;gap:.8rem} .cmp>div{border-radius:10px;padding:.8rem .9rem;font-size:.9rem}
.cmp .old{background:var(--bad-bg);} .cmp .old p{text-decoration:line-through;color:#7f1d1d} .cmp .new{background:var(--ok-bg)} .cmp .new p{color:#14532d;font-weight:700}
@media(max-width:700px){.cmp{grid-template-columns:1fr}}
.kv{display:grid;grid-template-columns:minmax(120px,38%) 1fr;gap:.35rem .8rem;font-size:.88rem} .kv dt{color:var(--muted);font-weight:600} .kv dd{margin:0}
.chat{display:flex;flex-direction:column;gap:.8rem}
.msg{border:1px solid var(--line);border-radius:12px;padding:.8rem 1rem;background:#fff} .msg.q{background:var(--pri-soft);border-color:#d7dbfb;align-self:flex-end;max-width:80%}
.msg ul{margin:.4rem 0 0;padding-left:1.1rem} .msg li{margin:.3rem 0}
.draft-banner{background:var(--warn-bg);color:var(--warn);border:1px dashed var(--warn);border-radius:8px;padding:.5rem .8rem;font-weight:700;font-size:.85rem}
.cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
.cal .d{background:#fff;border:1px solid var(--line);border-radius:8px;min-height:88px;padding:.3rem .35rem;font-size:.72rem;overflow:hidden}
.cal .d.off{background:#f6f8fb;color:#a0a8b8} .cal .d.today{border-color:var(--pri);box-shadow:inset 0 0 0 1px var(--pri)}
.cal .d b{display:block;font-size:.75rem;color:var(--muted)} .cal .h{font-size:.7rem;font-weight:800;color:var(--muted);text-align:center;text-transform:uppercase}
.cal .ev{display:block;border-radius:5px;padding:.1rem .3rem;margin-top:2px;text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:700}
.ev.done{background:var(--ok-bg);color:var(--ok)} .ev.overdue{background:var(--bad-bg);color:var(--bad)} .ev.due_soon{background:var(--warn-bg);color:var(--warn)} .ev.upcoming{background:var(--info-bg);color:var(--info)}
@media(max-width:760px){.cal{grid-template-columns:1fr}.cal .h{display:none}.cal .d{min-height:0}.cal .d.off{display:none}}
.timeline{list-style:none;margin:0;padding:0 0 0 1rem;border-left:2px solid var(--line)} .timeline li{position:relative;padding:.1rem 0 .7rem .6rem;font-size:.86rem}
.timeline li::before{content:"";position:absolute;left:-1.42rem;top:.4rem;width:10px;height:10px;border-radius:50%;background:var(--pri);border:2px solid #fff}
.folder-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.5rem}
.folder-grid a{display:flex;justify-content:space-between;align-items:center;border:1px solid var(--line);border-radius:10px;padding:.55rem .7rem;text-decoration:none;color:var(--ink);font-weight:600;font-size:.86rem;background:#fff}
.folder-grid a.on,.folder-grid a:hover{border-color:var(--pri);color:var(--pri);background:var(--pri-soft)}
.qr{width:120px;height:120px} .qr svg{width:100%;height:100%}
.wf-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.4rem}
.wf-steps li{display:grid;grid-template-columns:24px 1fr 190px 60px;gap:.5rem;align-items:center;background:#f6f8fb;border:1px solid var(--line);border-radius:9px;padding:.35rem .5rem;cursor:grab}
.wf-steps li.drag{opacity:.5} .wf-steps .h{color:var(--muted);text-align:center;font-weight:800}
@media(max-width:700px){.wf-steps li{grid-template-columns:24px 1fr}}
.cert{max-width:820px;margin:0 auto;border:2px solid var(--pri);border-radius:14px;padding:1.6rem 2rem;position:relative}
.cert h1{text-align:center;font-size:1.4rem;margin:.2rem 0} .cert .score{font-size:3rem;font-weight:800;color:var(--pri);text-align:center;font-variant-numeric:tabular-nums}
.verify-box{max-width:520px;margin:2rem auto;border-radius:16px;overflow:hidden;border:1px solid var(--line);background:#fff;box-shadow:var(--shadow)}
.verify-box .vh{padding:1rem 1.2rem;color:#fff;font-weight:800;font-size:1.1rem} .verify-box .vh.ok{background:var(--ok)} .verify-box .vh.bad{background:var(--bad)}
.verify-box dl{padding:1rem 1.2rem;margin:0}
/* public site */
.pub-head{position:sticky;top:0;z-index:20;background:rgba(245,247,251,.92);backdrop-filter:blur(6px);max-width:none;padding:.8rem max(1.2rem,calc((100vw - 1180px)/2))}
.pub-head nav a:not(.btn){font-size:.92rem;font-weight:600}
.hero2{padding:3.2rem 0 2.2rem;display:grid;grid-template-columns:1.05fr 1fr;gap:2.4rem;align-items:center}
.hero2 h1{font-size:clamp(2rem,4.2vw,3.1rem);line-height:1.08;letter-spacing:-.03em;margin:.4rem 0 .9rem}
.hero2 h1 em{font-style:normal;color:var(--pri)} .hero2 .lead{font-size:1.1rem;color:var(--muted);max-width:52ch}
.hero2 .cta{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.4rem}
.shot-frame{background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 30px 60px rgba(15,27,51,.12);overflow:hidden}
.shot-frame .bar{display:flex;gap:6px;padding:.55rem .8rem;border-bottom:1px solid var(--line)} .shot-frame .bar i{width:9px;height:9px;border-radius:50%;background:#dfe4ee}
.mini-dash{padding:1rem;display:grid;gap:.7rem}
.mini-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem} .mini-kpis div{border:1px solid var(--line);border-radius:10px;padding:.55rem .6rem} .mini-kpis b{display:block;font-size:1.2rem} .mini-kpis small{color:var(--muted);font-size:.7rem;font-weight:700}
.industries{display:flex;flex-wrap:wrap;gap:.5rem} .industries span{border:1px solid var(--line-2);background:#fff;border-radius:99px;padding:.3rem .8rem;font-weight:700;font-size:.85rem;color:#33405a}
.modules{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:.8rem}
.module{background:#fff;border:1px solid var(--line);border-radius:14px;padding:1rem 1.1rem} .module h3{font-size:.98rem;margin:.5rem 0 .25rem} .module p{margin:0;color:var(--muted);font-size:.88rem}
.module .ic{width:36px;height:36px;border-radius:10px;background:var(--pri-soft);color:var(--pri);display:grid;place-items:center} .module .ic svg{width:18px;height:18px}
.module:nth-child(3n+2) .ic{background:var(--teal-soft);color:var(--teal)} .module:nth-child(3n) .ic{background:#fdf1e6;color:var(--acc)}
.flow{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:.5rem;counter-reset:f}
.flow div{background:#fff;border:1px solid var(--line);border-radius:12px;padding:.8rem;text-align:center;font-weight:800;position:relative}
.flow div small{display:block;font-weight:500;color:var(--muted);font-size:.78rem;margin-top:.2rem}
@media(max-width:900px){.hero2{grid-template-columns:1fr}.flow{grid-template-columns:repeat(2,minmax(0,1fr))}}
.site-foot{background:#0f1b33;color:#c8d0e0;margin-top:3rem;padding:2.2rem max(1.2rem,calc((100vw - 1180px)/2)) 1.4rem}
.site-foot a{color:#e6ebf5;text-decoration:none} .site-foot a:hover{text-decoration:underline}
.site-foot .cols{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:1.5rem} .site-foot h4{color:#fff;margin:0 0 .5rem;font-size:.9rem} .site-foot ul{list-style:none;margin:0;padding:0} .site-foot li{margin:.3rem 0;font-size:.88rem}
.site-foot .legal{border-top:1px solid #26324d;margin-top:1.6rem;padding-top:1rem;font-size:.8rem;color:#93a0b8}
@media(max-width:760px){.site-foot .cols{grid-template-columns:1fr 1fr}}
@media print{.topbar,.sidebar{display:none!important}.content{margin:0;padding:0}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
@media (max-width:860px){.sidebar{top:58px}.content{margin-left:0;padding:1rem}.top-search{display:none}.ctx-chip{display:none}}
.lang-switch{display:flex;align-items:center;gap:.3rem;border:1px solid var(--line);border-radius:10px;padding:0 .4rem;background:#fff;height:38px}
.lang-switch svg{width:16px;height:16px;color:var(--muted);flex:0 0 auto} .lang-switch select{border:0;padding:.2rem;background:transparent;max-width:150px;font-weight:600;font-size:.85rem}
@media(max-width:860px){.lang-switch select{max-width:90px}.hide-sm{display:none}}
.pub-head nav{gap:.8rem;flex-wrap:wrap;justify-content:flex-end}
[dir=rtl] .sidebar{left:auto;right:0;border-right:0;border-left:1px solid var(--line)} [dir=rtl] .content{margin-left:0;margin-right:236px} @media(max-width:860px){[dir=rtl] .content{margin-right:0}}
.emp-nav{top:58px}
.lang-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:.45rem;margin:1rem 0}
.lang-opt{display:block;cursor:pointer;margin:0;position:relative} .lang-opt input{position:absolute;opacity:0}
.lang-opt span{display:flex;flex-direction:column;border:1px solid var(--line-2);border-radius:10px;padding:.5rem .7rem;background:#fff;color:var(--ink)} .lang-opt b{font-size:1.02rem} .lang-opt small{color:var(--muted);font-weight:600}
.lang-opt input:checked+span{border-color:var(--pri);background:var(--pri-soft);box-shadow:inset 0 0 0 1px var(--pri)} .lang-opt input:focus-visible+span{outline:2px solid var(--pri)}
.setup-list{list-style:none;margin:0;padding:0;display:grid;gap:.4rem} .setup-list li{display:flex;gap:.6rem;align-items:center;border:1px solid var(--line);border-radius:10px;padding:.5rem .7rem;background:#fff}
.setup-list li .ck{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:.75rem;font-weight:800;background:#eef1f7;color:var(--muted);flex:0 0 auto}
.setup-list li.done .ck{background:var(--ok);color:#fff} .setup-list li.done b{text-decoration:line-through;color:var(--muted)} .setup-list li a.btn{margin-left:auto}
.login-wrap{display:grid;grid-template-columns:1fr 1fr;gap:2rem;max-width:1080px;margin:2rem auto;align-items:start}
.login-aside{background:var(--pri);color:#fff;border-radius:18px;padding:2rem;position:sticky;top:90px} .login-aside h2{color:#fff;font-size:1.5rem;margin:0 0 .6rem;letter-spacing:-.02em} .login-aside p,.login-aside li{color:#dfe3ff}
.login-aside ul{padding-left:1.1rem} .login-aside li{margin:.35rem 0}
.tabs.scroll{flex-wrap:nowrap;overflow-x:auto}
.sso-btns{display:grid;grid-template-columns:1fr 1fr;gap:.5rem} .sso-btns .btn{justify-content:center}
.or{display:flex;align-items:center;gap:.6rem;color:var(--muted);font-size:.8rem;margin:1rem 0} .or::before,.or::after{content:"";flex:1;height:1px;background:var(--line)}
@media(max-width:860px){.login-wrap{grid-template-columns:1fr}.login-aside{position:static;order:2}}
.emp-ctx{display:flex;gap:.4rem;align-items:center;flex-wrap:wrap;min-width:0}
@media(max-width:700px){.emp-ctx .muted,.emp-ctx .pill{display:none}.emp-ctx strong{font-size:.85rem;max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.topbar{gap:.5rem;padding:.5rem .7rem}.brand{font-size:1.05rem}}
.bars .track,.bars .fill{display:block}
/* v6.1 Safety & PPE marketplace */
.chips{display:flex;gap:.4rem;flex-wrap:wrap;margin:.6rem 0 1rem}
.chips a{padding:.3rem .7rem;border:1px solid var(--line-2);border-radius:99px;text-decoration:none;color:var(--ink);font-size:.82rem;font-weight:600;background:#fff}
.chips a.on{background:var(--pri);border-color:var(--pri);color:#fff}
.chips a small{color:inherit;opacity:.7}
.prod-grid{display:grid;gap:.9rem;grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
.prod{background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden;display:flex;flex-direction:column;text-decoration:none;color:var(--ink);position:relative}
.prod:hover{border-color:var(--pri)}
.prod .ph{aspect-ratio:4/3;background:var(--pri-soft);display:flex;align-items:center;justify-content:center;color:var(--pri);font-weight:800;font-size:2rem}
.prod .ph img{width:100%;height:100%;object-fit:cover}
.prod .pb{padding:.7rem .8rem;display:flex;flex-direction:column;gap:.2rem;flex:1}
.prod .pb b{font-size:.95rem;line-height:1.3}
.prod .price{font-weight:800;font-size:1.05rem} .prod .price s{color:var(--muted);font-weight:500;font-size:.8rem;margin-left:.3rem}
.prod .offer{position:absolute;top:.5rem;left:.5rem;background:var(--acc);color:#fff;font-size:.72rem;font-weight:800;padding:.15rem .5rem;border-radius:6px}
.prod-detail{display:grid;gap:1.2rem;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.prod-detail .ph{aspect-ratio:4/3;background:var(--pri-soft);border-radius:var(--r);overflow:hidden;display:flex;align-items:center;justify-content:center;font-size:3rem;font-weight:800;color:var(--pri)}
.prod-detail .ph img{width:100%;height:100%;object-fit:contain;background:#fff}
@media (max-width:760px){.prod-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem}.prod-detail{grid-template-columns:1fr}}
.prod-detail s{font-size:.8rem;color:var(--muted);font-weight:500;margin-left:.4rem}