/* OZYNIX Desk — UI */
:root{
  --navy:#0B1633;--midnight:#071126;--blue:#2563EB;--blue-d:#1D4ED8;--cyan:#06B6D4;
  --bg:#F4F7FB;--card:#FFFFFF;--line:#E2E8F0;--line2:#EEF2F7;--text:#1E293B;--muted:#64748B;--soft:#F8FAFC;
  --ok:#059669;--ok-bg:#ECFDF5;--warn:#B45309;--warn-bg:#FFFBEB;--bad:#DC2626;--bad-bg:#FEF2F2;--info-bg:#EFF6FF;
  --r:12px;--sh:0 1px 2px rgba(11,22,51,.06),0 1px 3px rgba(11,22,51,.05);
  --font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root{
  --bg:#0A1022;--card:#111A33;--line:#1F2B4A;--line2:#18223D;--text:#E2E8F0;--muted:#8B9AB8;--soft:#0E1730;
  --ok-bg:#062A22;--warn-bg:#2A1E06;--bad-bg:#2C0F12;--info-bg:#0E1F44;--ok:#34D399;--warn:#FBBF24;--bad:#F87171;color-scheme:dark;
}}
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:var(--font);font-size:14px;line-height:1.5;color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased}
a{color:var(--blue);text-decoration:none}a:hover{text-decoration:underline}
h1{font-size:22px;margin:0;font-weight:700;letter-spacing:-.01em}h2{font-size:15px;margin:0 0 12px;font-weight:650}h3{font-size:14px;margin:0 0 10px}
code{background:var(--soft);border:1px solid var(--line);padding:1px 5px;border-radius:5px;font-size:12px}
.muted{color:var(--muted)}.small{font-size:12px}.block{display:block}.nowrap{white-space:nowrap}.center{text-align:center}.late{color:var(--bad);font-weight:600}.dim{opacity:.55}
small{font-size:12px;color:var(--muted)}

/* shell */
.nav{position:fixed;inset:0 auto 0 0;width:236px;background:var(--navy);color:#C7D2FE;display:flex;flex-direction:column;z-index:30}
.brand{display:flex;align-items:center;gap:10px;padding:18px 18px 14px;color:#fff;font-size:16px;letter-spacing:.02em}
.brand:hover{text-decoration:none}.brand img{width:30px;height:30px;object-fit:contain}.brand b{color:var(--cyan);font-weight:700}
.nav nav{flex:1;overflow:auto;padding:4px 10px 12px}
.nav-sec{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:#6B7DB3;margin:14px 10px 6px}
.nav nav a{display:flex;align-items:center;gap:10px;color:#C7D2FE;padding:7px 10px;border-radius:8px;font-weight:500}
.nav nav a:hover{background:rgba(255,255,255,.06);text-decoration:none;color:#fff}
.nav nav a.on{background:linear-gradient(120deg,var(--blue-d),var(--blue));color:#fff}
.nav nav a i{font-style:normal;width:18px;text-align:center;opacity:.85}
.nav nav a span{flex:1}.nav nav a em{font-style:normal;background:var(--cyan);color:#04202A;font-size:11px;font-weight:700;border-radius:99px;padding:0 7px}
.nav-me{display:flex;align-items:center;gap:6px;border-top:1px solid rgba(255,255,255,.08);padding:10px 12px}
.nav-me .me{display:flex;align-items:center;gap:10px;color:#fff;flex:1;min-width:0}.nav-me .me:hover{text-decoration:none}
.nav-me b{display:block;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.nav-me small{color:#8EA0D0}
.nav-me .link{color:#C7D2FE;font-size:18px}
.av{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:50%;background:linear-gradient(120deg,var(--blue),var(--cyan));color:#fff;font-weight:700;font-size:12px;flex:none}
.av.sm{width:24px;height:24px;font-size:10px}
.main{margin-left:236px;min-height:100vh;min-width:0;overflow-x:clip}
.top{position:sticky;top:0;z-index:20;display:flex;gap:12px;align-items:center;padding:10px 24px;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.top .search{flex:1;max-width:560px}.top .search input{width:100%}
.burger{display:none;background:none;border:0;font-size:20px;color:var(--text);cursor:pointer}
.content{padding:22px 24px 60px;max-width:1440px}
.bare .content{max-width:none;padding:0}

/* page head */
.ph{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:18px;flex-wrap:wrap}
.ph p{margin:4px 0 0}.ph-act{display:flex;gap:8px;flex-wrap:wrap}
.sec{font-size:15px;margin:26px 0 10px}

/* controls */
input,select,textarea{font:inherit;color:var(--text);background:var(--card);border:1px solid var(--line);border-radius:8px;padding:8px 10px;outline:none;max-width:100%}
input:focus,select:focus,textarea:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(37,99,235,.15)}
textarea{resize:vertical;width:100%}
.btn{display:inline-flex;align-items:center;gap:6px;justify-content:center;font:inherit;font-weight:600;font-size:13px;border:1px solid var(--line);background:var(--card);color:var(--text);padding:8px 14px;border-radius:8px;cursor:pointer;white-space:nowrap;list-style:none}
.btn:hover{text-decoration:none;border-color:#CBD5E1;background:var(--soft)}
.btn.primary{background:var(--blue);border-color:var(--blue);color:#fff}.btn.primary:hover{background:var(--blue-d)}
.btn.danger{background:var(--bad-bg);border-color:#FECACA;color:var(--bad)}.btn.danger:hover{background:#FEE2E2}
.btn.ghost{background:transparent}.btn.sm{padding:5px 10px;font-size:12.5px}.btn.block{width:100%}
summary.btn::-webkit-details-marker{display:none}summary{list-style:none;cursor:pointer}summary::-webkit-details-marker{display:none}
.link{background:none;border:0;color:var(--blue);cursor:pointer;font:inherit;padding:0}.link.danger{color:var(--bad)}
.form{display:flex;flex-direction:column;gap:14px}.form.wide{max-width:none}.form.tight{gap:10px}
.form label,.pop-body label{display:flex;flex-direction:column;gap:5px;font-weight:600;font-size:13px}
.form label small,.pop-body label small{font-weight:400}
.form input:not([type=checkbox]):not([type=file]),.form select,.pop-body input:not([type=checkbox]),.pop-body select{width:100%}
label.chk{flex-direction:row!important;align-items:center;gap:8px!important;font-weight:500!important}
label.inl{display:inline-flex;align-items:center;gap:6px;font-size:13px}
.row2,.row3{display:grid;grid-template-columns:1fr 1fr;gap:14px}.row3{grid-template-columns:1fr 1fr 1fr}
.form-actions{display:flex;gap:10px;justify-content:flex-end}
.checks{display:flex;flex-wrap:wrap;gap:6px 18px;font-weight:400}
.num{width:90px}.grow{flex:1;min-width:220px}
.filters{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:14px}
.filters form{display:flex;gap:8px}.filters select,.filters input{padding:6px 8px;font-size:13px}
.inline{display:inline}.inline-form{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:10px}.inline-form.wrap{flex-wrap:wrap}.inline-form input{flex:1;min-width:140px}
.flash{padding:10px 14px;border-radius:10px;margin-bottom:14px;background:var(--ok-bg);color:var(--ok);border:1px solid color-mix(in srgb,var(--ok) 25%,transparent);font-weight:500}
.flash.err{background:var(--bad-bg);color:var(--bad);border-color:color-mix(in srgb,var(--bad) 25%,transparent)}
.flash.warn{background:var(--warn-bg);color:var(--warn);border-color:color-mix(in srgb,var(--warn) 25%,transparent)}
.tok{display:inline-block;margin-top:6px;word-break:break-all;user-select:all}

/* cards */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:18px;box-shadow:var(--sh);margin-bottom:16px}
.card.flush{padding:0;overflow:hidden}.card-h{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:12px}.card-h h2{margin:0}.card-h.pad{padding:16px 18px 0}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}.grid2>.card{margin:0}.span2{grid-column:1/-1}
.stats{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px;margin-bottom:18px}
.stats.inner{margin:0 0 12px}
.stat{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;color:var(--text);box-shadow:var(--sh)}
a.stat:hover{text-decoration:none;border-color:var(--blue)}
.stat span{display:block;font-size:12px;color:var(--muted);font-weight:500}.stat b{font-size:24px;font-weight:700;letter-spacing:-.02em}
.stat.warn b{color:var(--warn)}.stat.bad b{color:var(--bad)}
.stats.inner .stat{box-shadow:none;background:var(--soft)}
.empty{text-align:center;padding:48px 20px;color:var(--muted)}.empty.sm{padding:20px}.empty h2{color:var(--text)}
.li{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--line2);color:var(--text)}
.li:last-child{border-bottom:0}a.li:hover{text-decoration:none;background:var(--soft)}
.li>span{min-width:0;overflow-wrap:anywhere}
.li small{display:block;color:var(--muted);font-size:12px;margin-top:1px}
.alert{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 16px;border-radius:var(--r);background:var(--warn-bg);border:1px solid color-mix(in srgb,var(--warn) 30%,transparent);margin-bottom:12px;flex-wrap:wrap}
.alert.bad{background:var(--bad-bg);border-color:color-mix(in srgb,var(--bad) 30%,transparent)}
.mini{font-size:13px;margin:16px 0 8px;color:var(--muted);font-weight:600}
.bars{display:flex;flex-direction:column;gap:8px}.bar{display:grid;grid-template-columns:200px 1fr 40px;align-items:center;gap:10px;font-size:13px}
.bar i{height:10px;border-radius:99px;background:linear-gradient(90deg,var(--blue),var(--cyan));display:block;min-width:4px}.bar b{text-align:right}
.bar span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* badges */
.badge{display:inline-block;font-size:11.5px;font-weight:600;padding:2px 8px;border-radius:99px;background:var(--soft);color:var(--muted);border:1px solid var(--line);white-space:nowrap;line-height:1.5}
.st-new{background:var(--info-bg);color:var(--blue);border-color:#BFDBFE}.st-open{background:#EEF2FF;color:#4338CA;border-color:#C7D2FE}
.st-hold{background:var(--warn-bg);color:var(--warn);border-color:#FDE68A}.st-done{background:var(--ok-bg);color:var(--ok);border-color:#A7F3D0}
.st-closed{background:var(--soft);color:var(--muted)}.st-bad{background:var(--bad-bg);color:var(--bad);border-color:#FECACA}
.pr-p1{background:#DC2626;color:#fff;border-color:#DC2626}.pr-p2{background:#F97316;color:#fff;border-color:#F97316}.pr-p3{background:#FACC15;color:#422006;border-color:#FACC15}.pr-p4{background:#E2E8F0;color:#334155}
.ty-ir{background:#FEE2E2;color:#B91C1C;border-color:#FECACA}.ty-sr{background:#DBEAFE;color:#1D4ED8;border-color:#BFDBFE}.ty-pr{background:#F3E8FF;color:#7E22CE;border-color:#E9D5FF}
.ty-cr{background:#CFFAFE;color:#0E7490;border-color:#A5F3FC}.ty-ecr{background:#7F1D1D;color:#fff;border-color:#7F1D1D}
.risk-high{color:var(--bad)}.risk-medium{color:var(--warn)}.risk-low{color:var(--ok)}
.badge.risk-high{background:var(--bad-bg)}.badge.risk-medium{background:var(--warn-bg)}.badge.risk-low{background:var(--ok-bg)}
.badge.esc{background:#FFF7ED;color:#C2410C;border-color:#FED7AA}b.esc{color:#C2410C}
.wis-pending{}.wis-in_progress{background:#EEF2FF;color:#4338CA}.wis-blocked{background:var(--warn-bg);color:var(--warn)}.wis-completed{background:var(--ok-bg);color:var(--ok)}.wis-failed{background:var(--bad-bg);color:var(--bad)}.wis-skipped{text-decoration:line-through}
.sla{font-size:12px;font-weight:600;white-space:nowrap}.sla.ok{color:var(--ok)}.sla.warn{color:var(--warn)}.sla.bad{color:var(--bad)}

/* tables */
.tbl-wrap{overflow-x:auto}
.tbl{width:100%;border-collapse:collapse}
.tbl th{text-align:left;font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:600;padding:10px 12px;border-bottom:1px solid var(--line);background:var(--soft);white-space:nowrap}
.tbl td{padding:10px 12px;border-bottom:1px solid var(--line2);vertical-align:top}
.tbl tbody tr:last-child td{border-bottom:0}
.tbl tbody tr[onclick]{cursor:pointer}.tbl tbody tr[onclick]:hover{background:var(--soft)}
.tbl .ttl{min-width:240px}.tbl .ttl small{display:block}
.tbl.small td,.tbl.small th{padding:7px 10px;font-size:12.5px}
.clip{max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pager{display:flex;justify-content:center;gap:16px;align-items:center;margin:14px 0;color:var(--muted)}

/* new request */
.smart .big{font-size:15px;font-weight:600;display:flex;flex-direction:column;gap:8px}.smart input{font-size:16px;padding:12px 14px}
#smartout,#dupes,#ruleout{margin-top:8px}
.suggest{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 12px;background:var(--info-bg);border-radius:10px;margin-top:8px;flex-wrap:wrap}
.dupes{padding:10px 12px;background:var(--warn-bg);border-radius:10px;font-size:13px}.dupes a{display:block}
.types{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.type-card,.cat-card{display:flex;flex-direction:column;gap:6px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:18px;color:var(--text);box-shadow:var(--sh);transition:.15s}
.type-card:hover,.cat-card:hover{text-decoration:none;border-color:var(--blue);transform:translateY(-1px)}
.type-card .ic,.cat-card .ic{font-size:26px}.type-card b{font-size:15px}.type-card em{font-style:normal;font-size:11px;color:var(--muted);border:1px solid var(--line);border-radius:6px;padding:0 6px;margin-left:4px}
.type-card p{margin:0;color:var(--muted);font-size:13px}
.cats{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
.note{padding:10px 12px;background:var(--info-bg);border-radius:10px;margin:0}

/* ticket */
.t-head>div{min-width:0}.t-head h1{overflow-wrap:anywhere}
.t-head{display:flex;justify-content:space-between;gap:16px;margin-bottom:12px;flex-wrap:wrap}
.t-num{font-size:13px;color:var(--muted);margin-bottom:4px;display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.t-meta{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:8px}
.t-actions{display:flex;gap:8px;align-items:flex-start}
.flow{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px;padding:12px;background:var(--card);border:1px solid var(--line);border-radius:var(--r)}
.pop{position:relative;display:inline-block}
.pop-body{position:absolute;z-index:40;top:calc(100% + 6px);left:0;width:340px;background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 40px rgba(11,22,51,.18);padding:14px;display:flex;flex-direction:column;gap:10px}
.pop.right .pop-body{left:auto;right:0}.pop-body.wide{width:min(620px,90vw)}
.warnline{color:var(--warn);font-size:13px;margin:6px 0}
.csat{display:flex;align-items:center;gap:6px;margin-bottom:16px;padding:10px 14px;background:var(--info-bg);border-radius:var(--r)}
.csat button{font-size:22px;background:none;border:0;cursor:pointer;transition:transform .1s}.csat button:hover{transform:scale(1.25)}
.t-grid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:16px;align-items:start}
.t-side .card{padding:16px}
.prose{white-space:normal;word-wrap:break-word}.prose.clamp{max-height:9em;overflow:hidden;margin:8px 0}
.resolution{margin-top:14px;padding:12px;border-left:3px solid var(--ok);background:var(--ok-bg);border-radius:0 8px 8px 0}
.kv-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:14px}
.kv-grid div,.field{background:var(--soft);border-radius:8px;padding:10px 12px}.kv-grid span,.field>span{display:block;font-size:11.5px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.field{margin-bottom:10px}
.dl{display:grid;grid-template-columns:110px 1fr;gap:8px 10px;margin:0;font-size:13px}.dl dt{color:var(--muted)}.dl dd{margin:0;font-weight:500}.dl dd small{display:block;font-weight:400}
.chips{display:flex;flex-wrap:wrap;gap:6px}.chip{background:var(--soft);border:1px solid var(--line);border-radius:99px;padding:2px 10px;font-size:12px}
.steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.steps li{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:10px 12px;border:1px solid var(--line);border-radius:10px;flex-wrap:wrap}
.steps .ap-pending{border-color:var(--warn);background:var(--warn-bg)}.steps .ap-approved{background:var(--ok-bg)}.steps .ap-rejected{background:var(--bad-bg)}.steps .ap-skipped,.steps .ap-cancelled{opacity:.6}
.ap-form{display:flex;gap:6px;align-items:center;flex-wrap:wrap}.ap-form input{min-width:200px;flex:1}
.appr .appr-h h3{margin:6px 0 2px;font-size:15px}
.progress{position:relative;width:180px;height:18px;background:var(--soft);border-radius:99px;overflow:hidden;border:1px solid var(--line)}
.progress i{position:absolute;inset:0 auto 0 0;background:linear-gradient(90deg,var(--blue),var(--cyan))}.progress span{position:relative;font-size:11px;font-weight:600;display:block;text-align:center;line-height:16px}
.phase{font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:700;margin:14px 0 6px}
.wi{display:flex;align-items:flex-start;gap:10px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;margin-bottom:8px}
.wi-main{flex:1;display:flex;gap:10px}.wi-seq{font-weight:700;color:var(--muted);min-width:26px}
.wi-completed{background:color-mix(in srgb,var(--ok-bg) 60%,transparent)}.wi-failed{border-color:var(--bad)}.wi-blocked{border-color:var(--warn)}
.remark{margin-top:4px;color:var(--text)}
details.add{margin-top:10px}details.add[open] summary{margin-bottom:10px}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin:-4px 0 14px}
.tabs button{background:none;border:0;padding:8px 12px;font:inherit;font-weight:600;color:var(--muted);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px}
.tabs button.on{color:var(--blue);border-color:var(--blue)}
.cm{padding:12px 0;border-bottom:1px solid var(--line2)}.cm-h{display:flex;align-items:center;gap:8px;margin-bottom:6px;flex-wrap:wrap}.cm-h .muted{margin-left:auto}
.cm-b{padding-left:32px;word-wrap:break-word}
.cm.internal{background:var(--warn-bg);margin:0 -18px;padding:12px 18px}
.cm.sys .cm-b{color:var(--muted);font-size:13px}.cm.res .cm-b{border-left:3px solid var(--ok);padding-left:12px;margin-left:32px}
.files{display:flex;flex-wrap:wrap;gap:8px;padding:6px 0 0 32px}.file{background:var(--soft);border:1px solid var(--line);border-radius:8px;padding:4px 10px;font-size:12.5px}
.reply{margin-top:14px;display:flex;flex-direction:column;gap:8px}.reply-bar{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.reply-bar .btn{margin-left:auto}

/* changes calendar */
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.cal-h{font-size:11.5px;color:var(--muted);font-weight:600;text-align:center;padding:4px}
.cal-d{min-height:96px;background:var(--soft);border-radius:8px;padding:4px;display:flex;flex-direction:column;gap:3px;overflow:hidden}
.cal-d.off{background:transparent}.cal-d.today{outline:2px solid var(--blue)}
.cal-n{font-size:11.5px;font-weight:600;color:var(--muted)}
.cal-e{font-size:11px;padding:2px 5px;border-radius:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;border:1px solid transparent}
.cal-e.conflict{border-color:var(--bad);box-shadow:0 0 0 1px var(--bad)}
.legend{font-size:12px;color:var(--muted);display:flex;gap:6px;align-items:center}.legend i{display:inline-block;width:10px;height:10px;border-radius:3px}
.lg-a{background:var(--blue)}.lg-b{background:var(--cyan)}
.trend{display:flex;gap:2px;align-items:flex-end;height:180px;padding-top:8px}
.tcol{flex:1;display:flex;flex-direction:column;align-items:center;height:100%;min-width:0}
.tb{flex:1;width:100%;display:flex;align-items:flex-end;justify-content:center;gap:1px}
.tb i{width:45%;max-width:14px;border-radius:3px 3px 0 0;min-height:1px}.tb i.a{background:var(--blue)}.tb i.b{background:var(--cyan)}
.tcol small{font-size:10px}

/* admin */
.subtabs{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:16px;border-bottom:1px solid var(--line)}
.subtabs a{padding:8px 12px;color:var(--muted);font-weight:600;border-bottom:2px solid transparent;margin-bottom:-1px}.subtabs a.on{color:var(--blue);border-color:var(--blue)}.subtabs a:hover{text-decoration:none;color:var(--text)}
.cat-row{display:flex;justify-content:space-between;align-items:center;padding:7px 4px 7px 22px;border-bottom:1px solid var(--line2)}.cat-row.top{padding-left:4px;background:var(--soft);margin-top:6px}

/* auth */
.auth{min-height:100vh;display:grid;place-items:center;padding:24px;background:radial-gradient(ellipse at 20% 20%,rgba(37,99,235,.25),transparent 50%),radial-gradient(ellipse at 80% 80%,rgba(6,182,212,.2),transparent 50%),var(--midnight)}
.auth-card{width:100%;max-width:400px;background:var(--card);border-radius:16px;padding:28px;box-shadow:0 30px 80px rgba(0,0,0,.35)}
.auth-brand{display:flex;gap:12px;align-items:center;margin-bottom:22px;font-size:18px}.auth-brand img{width:42px;height:42px}.auth-brand b{color:var(--blue)}.auth-brand small{display:block;font-size:12px}
.auth-card h1{font-size:18px;margin-bottom:16px}

@media (max-width:1100px){.t-grid{grid-template-columns:minmax(0,1fr)}.grid2{grid-template-columns:1fr}.kv-grid{grid-template-columns:1fr 1fr}}
@media (max-width:860px){
  .nav{transform:translateX(-100%);transition:transform .2s}.nav-open .nav{transform:none;box-shadow:0 0 60px rgba(0,0,0,.4)}
  .main{margin-left:0}.burger{display:block}.content{padding:16px}.top{padding:10px 16px}
  .row2,.row3{grid-template-columns:1fr}.bar{grid-template-columns:110px 1fr 30px}
  .cal-d{min-height:60px}.cal-e{font-size:0;height:6px;padding:0}
  .pop-body{position:fixed;left:16px!important;right:16px!important;top:auto;bottom:16px;width:auto!important;max-height:80vh;overflow:auto}
}

label.form-l{display:flex;flex-direction:column;gap:5px;font-weight:600;font-size:13px}label.form-l textarea,label.form-l input{width:100%;font-weight:400}
.auth-card.wide{max-width:560px}.appr-box{background:var(--soft);border:1px solid var(--line);border-radius:12px;padding:14px;margin:14px 0}.prose.quote{margin-top:10px;padding:10px 12px;border-left:3px solid var(--blue);background:var(--card);border-radius:0 8px 8px 0;font-size:13px}

.kbs{padding:10px 12px;background:var(--ok-bg);border:1px solid color-mix(in srgb,var(--ok) 25%,transparent);border-radius:10px;font-size:13px;margin-top:8px}.kbs a{display:block;margin-top:4px;font-weight:600}
.kb-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}.kb-item{color:var(--text);margin:0;display:flex;flex-direction:column;gap:6px}.kb-item:hover{text-decoration:none;border-color:var(--blue)}.kb-item p{margin:0;color:var(--muted);font-size:13px}
.kb-body .prose{font-size:15px;line-height:1.7}.kb-h{display:inline-block;font-size:13px;text-transform:uppercase;letter-spacing:.05em;color:var(--blue);margin-top:8px}.kb-deflect{background:var(--info-bg)}

/* ---------- sign-in ---------- */
.login{min-height:100vh;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);background:var(--card)}
.login-hero{position:relative;overflow:hidden;color:#DCE6FF;padding:48px 56px;display:flex;flex-direction:column;justify-content:space-between;
  background:radial-gradient(ellipse at 15% 10%,rgba(37,99,235,.45),transparent 55%),radial-gradient(ellipse at 90% 90%,rgba(6,182,212,.35),transparent 55%),var(--midnight)}
.login-hero::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:44px 44px;mask-image:radial-gradient(ellipse at 30% 40%,#000 20%,transparent 75%)}
.login-hero>*{position:relative}
.login-hero-in{max-width:520px}
.login-logo{display:inline-flex;align-items:center;gap:10px;color:#fff;font-size:18px;letter-spacing:.02em}.login-logo:hover{text-decoration:none}
.login-logo img{width:38px;height:38px;object-fit:contain}.login-logo b{color:var(--cyan);font-weight:700}
.login-hero h2{font-size:clamp(28px,3vw,40px);line-height:1.15;color:#fff;margin:56px 0 14px;letter-spacing:-.02em;font-weight:700}
.login-hero p{font-size:15px;color:#A9B8DD;margin:0;max-width:460px}
.login-types{display:flex;gap:8px;margin:26px 0 30px}.login-types i{font-style:normal;font-size:12px;font-weight:700;padding:4px 10px;border-radius:99px;border:1px solid transparent}
.login-feat{list-style:none;margin:0;padding:0;display:grid;gap:16px}
.login-feat li{display:flex;gap:14px;align-items:flex-start}.login-feat span{flex:none;width:38px;height:38px;border-radius:10px;display:grid;place-items:center;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.09);font-size:18px}
.login-feat b{display:block;color:#fff;font-size:14px}.login-feat small{color:#93A3CC;font-size:13px}
.login-foot{font-size:12px;color:#6F80AE!important;margin-top:40px!important}
.login-pane{display:flex;flex-direction:column;justify-content:center;align-items:center;padding:40px 24px;background:var(--card)}
.login-box{width:100%;max-width:380px}
.login-logo.sm{display:none;color:var(--text);margin-bottom:28px}
.login-box h1{font-size:26px;letter-spacing:-.02em;margin:0 0 6px}.login-sub{margin:0 0 24px}
.login-form{gap:16px}.login-form label{font-size:13px}
.login-form input:not([type=checkbox]){height:46px;font-size:15px;border-radius:10px}
.ico-in,.pw{position:relative;display:block}.ico-in i{position:absolute;left:14px;top:50%;transform:translateY(-50%);font-style:normal;color:var(--muted);pointer-events:none;display:flex}
.ico-in input{padding-left:40px}.pw input{padding-right:46px}
.pw-eye{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:36px;height:36px;border:0;background:none;border-radius:8px;cursor:pointer;color:var(--muted);display:grid;place-items:center}.pw-eye:hover{color:var(--text);background:var(--soft)}.pw-eye.on{color:var(--blue)}
.caps{color:var(--warn)!important;font-weight:600!important}
.login-row{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:13px;flex-wrap:wrap}
.btn.lg{height:46px;font-size:15px;border-radius:10px}
.btn.loading{opacity:.75;pointer-events:none}.btn.loading::after{content:"";width:14px;height:14px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:spin .7s linear infinite;margin-left:6px}
@keyframes spin{to{transform:rotate(360deg)}}
.login-alt{margin-top:18px;font-size:13px}
.login-help{font-size:12.5px;color:var(--muted);margin-top:32px}
.pw-meter{height:4px;background:var(--line);border-radius:99px;overflow:hidden;margin-top:-8px}.pw-meter i{display:block;height:100%;width:0;transition:.2s;background:var(--bad)}
.pw-hint{margin-top:-10px}
.login .flash{font-size:13px}
@media (max-width:900px){
  .login{grid-template-columns:1fr}.login-hero{display:none}
  .login-pane{min-height:100vh;justify-content:flex-start;padding-top:56px;background:radial-gradient(ellipse at 50% -10%,rgba(37,99,235,.14),transparent 60%),var(--card)}
  .login-logo.sm{display:inline-flex}
}

/* ---------- icons ---------- */
svg.ic{display:inline-block;vertical-align:-0.18em;flex:none}
.btn svg.ic{vertical-align:0}
.nav nav a i{display:flex;align-items:center;justify-content:center;width:20px;opacity:.9}
.nav-me .link{display:flex;align-items:center;padding:6px;border-radius:8px}.nav-me .link:hover{background:rgba(255,255,255,.08);color:#fff}
.burger{align-items:center}
.top .search{position:relative}.top .search svg.ic{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--muted);pointer-events:none}.top .search input{padding-left:36px}
.type-card .ic,.cat-card .ic{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:var(--info-bg);color:var(--blue);font-size:0}
.type-card.ty-ir .ic{background:#FEE2E2;color:#B91C1C}.type-card.ty-sr .ic{background:#DBEAFE;color:#1D4ED8}.type-card.ty-pr .ic{background:#F3E8FF;color:#7E22CE}.type-card.ty-cr .ic{background:#CFFAFE;color:#0E7490}.type-card.ty-ecr .ic{background:#FEE2E2;color:#7F1D1D}
.type-card .ic svg,.cat-card .ic svg{width:22px;height:22px}
.alert svg.ic{color:var(--warn);margin-right:2px}.alert.bad svg.ic{color:var(--bad)}
.warnline svg.ic,.warn-ic{color:var(--warn)}
.empty svg.ic{color:var(--ok);margin-bottom:6px}
.csat button{color:#CBD5E1;font-size:0;padding:2px}.csat button:hover,.csat button:hover~button{color:#CBD5E1}.csat:hover button{color:#F59E0B}.csat button:hover~button{color:#CBD5E1}
.stars svg.ic{color:#CBD5E1}.stars svg.ic.on{color:#F59E0B;fill:#F59E0B}
.ap-ic{vertical-align:-3px}.ap-approved .ap-ic{color:var(--ok)}.ap-rejected .ap-ic{color:var(--bad)}.ap-pending .ap-ic{color:var(--warn)}.ap-waiting .ap-ic,.ap-skipped .ap-ic,.ap-cancelled .ap-ic{color:var(--muted)}
svg.ic.ok{color:var(--ok)}svg.ic.bad{color:var(--bad)}
.auth-card h1 svg.ic{vertical-align:-5px}
.remark svg.ic,.file svg.ic{color:var(--muted)}
.cat-name{display:inline-flex;align-items:center;gap:8px}.cat-name svg.ic{color:var(--blue)}
.kbs b{display:flex;align-items:center;gap:6px}
.pw-eye .i-hide{display:none}.pw-eye.on .i-show{display:none}.pw-eye.on .i-hide{display:block}
.caps{display:inline-flex;align-items:center;gap:4px}
.login-feat span{color:#7DD3FC}
.login-secure{display:flex;align-items:center;justify-content:center;gap:6px;margin:2px 0 0;font-size:12px;color:var(--muted)}
.login-form .btn.lg{gap:8px}
/* product preview on the sign-in hero */
.login-preview{margin-top:34px;max-width:400px;padding:16px 18px;border-radius:14px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(8px);box-shadow:0 20px 50px rgba(0,0,0,.35);font-size:12.5px;color:#C9D6F5}
.lp-top{display:flex;align-items:center;gap:8px}.lp-top b{color:#fff;font-size:12.5px}
.lp-type{font-size:10.5px;font-weight:700;padding:2px 8px;border-radius:99px;background:#CFFAFE;color:#0E7490}
.lp-st{margin-left:auto;font-size:11px;font-weight:600;padding:2px 9px;border-radius:99px;background:rgba(99,102,241,.25);color:#C7D2FE}
.lp-title{color:#fff!important;font-weight:600;font-size:14px!important;margin:10px 0 10px!important}
.lp-row{display:flex;align-items:center;gap:8px;padding:6px 0;border-top:1px solid rgba(255,255,255,.08)}.lp-row svg.ic{color:#34D399}.lp-row span{margin-left:auto;color:#6EE7B7;font-size:11.5px}
.lp-bar{height:6px;border-radius:99px;background:rgba(255,255,255,.1);margin-top:10px;overflow:hidden}.lp-bar i{display:block;height:100%;background:linear-gradient(90deg,#3B82F6,#06B6D4)}
.lp-foot{display:flex;justify-content:space-between;margin-top:8px;font-size:11.5px}.lp-sla{display:inline-flex;align-items:center;gap:4px;color:#FCD34D}
@media (max-height:820px){.login-preview{display:none}}

[hidden]{display:none!important}