:root{--ink:#141922;--muted:#5A6372;--line:#E1E4EA;--line2:#EEF0F3;--bg:#F4F5F7;--blue:#1F4FD1;--blue2:#163A9E;--blueBg:#E6EDFC;
--ok:#0F6B36;--okBg:#E3F4EA;--warn:#8A4B06;--warnBg:#FDF0DC;--bad:#A3231F;--badBg:#FBE5E5;--side:#10151F;
--font:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans",sans-serif;--mono:"IBM Plex Mono",ui-monospace,"DejaVu Sans Mono",monospace}
*{box-sizing:border-box}
body{margin:0;font:14px/1.45 var(--font);color:var(--ink);background:var(--bg)}
a{color:var(--blue)}a:hover{color:var(--blue2)}
h1{margin:0;font-size:26px}h2{margin:0;font-size:17px}h3{margin:0;font-size:15px}
.app{display:flex;flex-wrap:wrap;min-height:100vh}
.side{flex:1 1 220px;max-width:250px;background:var(--side);padding:20px 14px;display:flex;flex-direction:column;gap:3px}
.brand{display:flex;gap:10px;align-items:center;padding:0 8px 18px;color:#fff}
.brand .logo{width:32px;height:32px;border-radius:8px;background:var(--blue);display:flex;align-items:center;justify-content:center}
.brand small{display:block;color:#9AA3B2;font-size:12px}
.navsec{color:#8A93A3;font-size:11px;font-weight:700;letter-spacing:.08em;padding:14px 12px 4px}
.nav{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:42px;padding:0 12px;border-radius:8px;color:#C9CFDA;text-decoration:none;font-weight:500}
.nav:hover{background:#1C2330;color:#fff}.nav.on{background:var(--blue);color:#fff}
.nav .badge{font-size:12px;font-weight:700;border-radius:999px;padding:1px 8px;background:#E8A33A;color:#1B1408}
.nav .badge.red{background:#E5534B;color:#fff}
.sidefoot{margin-top:auto;padding:14px 12px 0;border-top:1px solid #252D3B;font-size:12px;color:#AEB6C4;display:flex;flex-direction:column;gap:8px}
.sidefoot .live{color:#7FD3A0;font-weight:600}
main{flex:999 1 560px;min-width:0;padding:26px 30px 48px;display:flex;flex-direction:column;gap:20px}
.head{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between}
.head p{margin:4px 0 0;color:var(--muted)}
.row{display:flex;flex-wrap:wrap;gap:20px;align-items:flex-start}
.grow{flex:1 1 420px;min-width:0}.grow2{flex:2 1 560px;min-width:0}.narrow{flex:1 1 300px;min-width:0}
.card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:18px}
.card.flush{padding:0}.card.flush>.ch{padding:16px 18px 6px}
.ch{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.grid{display:grid;gap:12px}.g4{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.kpi .v{font-size:28px;font-weight:700;margin-top:4px}.kpi .n{font-size:13px;color:var(--muted)}
.lbl{font-size:12px;color:var(--muted);letter-spacing:.04em;text-transform:uppercase;font-weight:600}
.mono{font-family:var(--mono)}.muted{color:var(--muted)}.small{font-size:12px}
.pill{display:inline-flex;align-items:center;height:22px;padding:0 9px;border-radius:999px;font-size:12px;font-weight:600;white-space:nowrap;background:#EEF0F3;color:#475061}
.pill.ok{background:var(--okBg);color:var(--ok)}.pill.warn{background:var(--warnBg);color:var(--warn)}.pill.bad{background:var(--badBg);color:var(--bad)}.pill.info{background:var(--blueBg);color:#1A44B8}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:40px;padding:0 16px;border-radius:8px;font:600 14px var(--font);border:1px solid #CBD0D8;background:#fff;color:var(--ink);cursor:pointer;text-decoration:none;white-space:nowrap}
.btn:hover{border-color:#9AA3B2}.btn:disabled{opacity:.5;cursor:default}
.btn.pri{background:var(--blue);border-color:var(--blue);color:#fff}.btn.good{background:#127A3E;border-color:#127A3E;color:#fff}
.btn.danger{color:var(--bad)}.btn.sm{min-height:32px;padding:0 10px;font-size:13px}
.tabs{display:flex;flex-wrap:wrap;gap:8px}
.tab{min-height:36px;padding:0 14px;border-radius:999px;border:1px solid #CBD0D8;background:#fff;font:600 13px var(--font);cursor:pointer;color:#2A313D}
.tab.on{background:var(--blue);border-color:var(--blue);color:#fff}
table{border-collapse:collapse;width:100%}
th{text-align:left;font-size:12px;color:var(--muted);font-weight:600;padding:9px 12px;border-bottom:1px solid var(--line);white-space:nowrap}
td{padding:9px 12px;border-bottom:1px solid var(--line2);vertical-align:middle}
tr.sel td{background:#EEF3FD}
.scroll{overflow-x:auto}
input,select,textarea{font:14px var(--font);min-height:40px;padding:0 10px;border:1px solid #CBD0D8;border-radius:8px;background:#fff;color:var(--ink);width:100%}
textarea{padding:8px 10px;min-height:70px;resize:vertical}
input[type=checkbox],input[type=radio]{width:18px;min-height:18px;padding:0}
label{font-size:13px;font-weight:600;color:#2A313D}
.field{display:flex;flex-direction:column;gap:5px}
.linkbtn{background:none;border:0;padding:0;font:600 14px var(--font);color:var(--blue);cursor:pointer;text-align:left}
.linkbtn:hover{text-decoration:underline}
.bar{height:7px;background:#EEF0F3;border-radius:4px}.bar>div{height:7px;border-radius:4px;background:var(--blue)}
.stages{display:flex;flex-wrap:wrap;gap:8px}.stage{flex:1 1 120px;border:1px solid var(--line);border-radius:10px;padding:12px}
.stage .c{font:500 20px var(--mono);margin-top:4px}
.viewer{background:#DCE0E7;border-radius:12px;padding:16px;display:flex;flex-direction:column;gap:10px;position:sticky;top:12px}
.page{position:relative;background:#fff;box-shadow:0 2px 10px rgba(16,21,31,.12);line-height:0}
.page img{width:100%;height:auto;display:block}
.hl{position:absolute;outline:3px solid #E8A33A;background:rgba(232,163,58,.16);border-radius:3px;pointer-events:none}
.frow{display:grid;grid-template-columns:140px minmax(0,1fr) 58px;gap:8px;align-items:center;padding:4px 6px;border-radius:8px}
.frow.on{background:#FDF6EA}.frow.low input,.frow.low textarea{border-color:#E0B36B}
.checks div{display:flex;gap:8px;align-items:flex-start;font-size:13px;padding:2px 0}
.ok-t{color:var(--ok)}.warn-t{color:var(--warn)}.bad-t{color:var(--bad)}
.notice{font-size:13px;background:#FDF6EA;border:1px solid #F2D9AE;border-radius:8px;padding:10px 12px;color:#5C3A06}
.drop{border:2px dashed #B9C3D6;border-radius:12px;padding:26px;text-align:center;background:#FAFBFD;display:flex;flex-direction:column;gap:8px;align-items:center}
.drop.over{border-color:var(--blue);background:var(--blueBg)}
.toast{position:fixed;right:20px;bottom:20px;background:#10151F;color:#fff;padding:12px 16px;border-radius:10px;max-width:420px;z-index:50;box-shadow:0 6px 24px rgba(0,0,0,.25)}
.toast.err{background:#7A1A17}
.login{max-width:380px;margin:12vh auto;display:flex;flex-direction:column;gap:14px}
pre.code{margin:0;background:#10151F;color:#DCE3EE;border-radius:8px;padding:14px;font:12px/1.55 var(--mono);overflow:auto;max-height:420px}
.thumbs{display:flex;flex-wrap:wrap;align-items:stretch}
.thumb{width:120px;display:flex;flex-direction:column;gap:6px;align-items:center}
.thumb img{width:104px;height:140px;object-fit:cover;border:3px solid;border-radius:4px;background:#fff}
.cut{width:40px;cursor:pointer;background:none;border:0;display:flex;align-items:center;justify-content:center;padding-bottom:40px}
.cut span{width:4px;height:140px;border-radius:2px;background:#D2D7DF}.cut.on span{background:var(--ink)}
.empty{padding:28px;text-align:center;color:var(--muted)}
.modalbg{position:fixed;inset:0;background:rgba(16,21,31,.45);display:flex;align-items:flex-start;justify-content:center;padding:6vh 16px;z-index:40;overflow:auto}
.modal{background:#fff;border-radius:12px;padding:20px;width:min(720px,100%);display:flex;flex-direction:column;gap:14px}
.sr{position:absolute;left:-9999px}
@media (max-width:700px){.g2{grid-template-columns:1fr}.frow{grid-template-columns:1fr 58px}.frow label{grid-column:span 2}main{padding:18px}}