/* GPDS Machine Section — panel-grey neutrals (RAL 7035 family), amber = running. System fonts only: the factory LAN may have no internet. */
:root{
  --bg:#eceeec; --surface:#f8f9f8; --line:#cfd4d1; --ink:#1d232a; --muted:#5d6670; --chip:#e1e5e2;
  --accent:#c9820a; --accent-ink:#fff; --ok:#2f8f57; --bad:#c43d2f; --info:#2d6fb8;
  --f-body:"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --f-mono:"Cascadia Mono",Consolas,"Roboto Mono","Droid Sans Mono",monospace;
  --tv-bg:#0f1317; --tv-panel:#161b20; --tv-row:#1c2228; --tv-line:#2a333c; --tv-ink:#eef1f3; --tv-muted:#8a97a3; --tv-amber:#f2b544; --tv-red:#ff6b5e; --tv-redbg:#a8261c; --tv-green:#5ccf8a;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{background:var(--bg);color:var(--ink);font:15px/1.45 var(--f-body);-webkit-tap-highlight-color:transparent}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--info)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.mono{font-family:var(--f-mono);font-variant-numeric:tabular-nums}
.num{font-variant-numeric:tabular-nums}
[hidden]{display:none!important}

/* top bar */
.bar{position:sticky;top:0;z-index:5;background:var(--surface);border-bottom:1px solid var(--line)}
.bar-in{max-width:1400px;margin:0 auto;padding:8px 16px;display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.brand{font-weight:800;letter-spacing:.06em;text-transform:uppercase;display:flex;gap:8px;align-items:center;font-size:16px}
.brand i{width:12px;height:12px;border-radius:2px;background:var(--accent)}
nav{display:flex;gap:2px;flex-wrap:wrap}
nav a{padding:6px 10px;border-radius:6px;color:var(--muted);text-decoration:none;font-weight:600}
nav a.on{background:var(--chip);color:var(--ink)}
.who{margin-left:auto;display:flex;gap:8px;align-items:center;color:var(--muted);font-size:13px}
main{max-width:1400px;margin:0 auto;padding:18px 16px 64px;display:grid;gap:16px}
h1,h2,h3{margin:0;line-height:1.2;text-wrap:balance}
h1{font-size:26px} h2{font-size:19px} h3{font-size:16px}
.lede{color:var(--muted);max-width:80ch;margin:4px 0 0}
.eyebrow{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.card{background:var(--surface);border:1px solid var(--line);border-radius:8px}
.pad{padding:14px}
.scroll{overflow-x:auto}
table{border-collapse:collapse;width:100%}
th{font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);text-align:left;padding:8px 10px;border-bottom:1px solid var(--line);white-space:nowrap;background:var(--surface)}
td{padding:7px 10px;border-bottom:1px solid var(--line);vertical-align:middle}
tr:last-child td{border-bottom:0}
tr.click{cursor:pointer} tr.click:hover td{background:#e6e9e7}
.btn{border:1px solid var(--line);background:var(--surface);border-radius:6px;padding:7px 12px;font-weight:600;cursor:pointer;white-space:nowrap}
.btn.sm{padding:3px 8px;font-size:13px}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn.ok{background:var(--ok);border-color:var(--ok);color:#fff}
.btn.warn{border-color:var(--bad);color:var(--bad)}
.btn.danger{background:var(--bad);border-color:var(--bad);color:#fff}
.btn:disabled{opacity:.45;cursor:default}
.pill{display:inline-flex;align-items:center;gap:6px;padding:2px 8px;border-radius:999px;background:var(--chip);font-size:12px;font-weight:600;white-space:nowrap}
.lamp{width:9px;height:9px;border-radius:50%;background:var(--muted);flex:none;display:inline-block}
.lamp.run{background:var(--accent)} .lamp.ok{background:var(--ok)} .lamp.bad{background:var(--bad)} .lamp.info{background:var(--info)}
.late{color:var(--bad);font-weight:600}
.note{font-size:13px;color:var(--muted)}
.empty{padding:22px;text-align:center;color:var(--muted)}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.spread{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.in{background:#fff;border:1px solid var(--line);border-radius:6px;padding:6px 8px;min-width:0;max-width:100%}
.form{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px;align-items:end}
.form label{display:grid;gap:4px;font-size:13px;font-weight:600}
.kpis{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:12px}
.kpi b{display:block;font-size:26px;line-height:1.1}
.kpi span{font-size:12px;color:var(--muted)}
.kpi.red b{color:var(--bad)}
.prog{display:flex;align-items:center;gap:8px;min-width:120px}
.prog .t{flex:1;height:6px;background:var(--chip);border-radius:4px;overflow:hidden}
.prog .t i{display:block;height:100%;background:var(--accent)}
.prog .t i.done{background:var(--ok)}
.op{display:inline-flex;align-items:center;gap:4px;font:600 12px var(--f-mono);padding:2px 6px;border-radius:4px;background:var(--chip);border:1px solid var(--line)}
.op button{border:0;background:none;padding:0 0 0 2px;cursor:pointer;color:var(--muted);font-size:14px;line-height:1}
.op.rel{background:#dfe9e2;border-color:#b9d1c1}
.route{display:flex;gap:4px;flex-wrap:wrap;align-items:center}
.route .arr{color:var(--muted);font-size:12px}
.src{font:600 11px var(--f-mono);padding:1px 5px;border-radius:3px;background:var(--chip)}
.src.memory{background:#dbeee2;color:var(--ok)} .src.rule{background:#dce7f4;color:var(--info)} .src.none{background:#f6dcd8;color:var(--bad)} .src.jo{background:#efe5d2;color:#8a5a00}
.warnbox{border:1px solid var(--bad);background:#f7e6e3;border-radius:8px;padding:10px 14px}
.okbox{border:1px solid var(--ok);background:#e3f1e8;border-radius:8px;padding:10px 14px}
.bars .b{display:grid;grid-template-columns:190px 1fr 70px;gap:10px;align-items:center;margin:4px 0;font-size:13px}
.bars .b .t{height:14px;background:var(--chip);border-radius:3px;overflow:hidden}
.bars .b .t i{display:block;height:100%;background:var(--accent)}
.grid2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px}
@media (max-width:900px){.grid2{grid-template-columns:minmax(0,1fr)}}
.drop{border:2px dashed var(--line);border-radius:10px;padding:20px;text-align:center;color:var(--muted);cursor:pointer}
.drop.over{border-color:var(--accent);background:#f6eedd}
.tag{font:600 11px var(--f-mono);padding:1px 5px;border-radius:3px;background:var(--chip);color:var(--muted)}
.toast{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);background:var(--ink);color:#fff;padding:12px 18px;border-radius:8px;font-weight:600;z-index:60;max-width:90vw;box-shadow:0 6px 24px rgb(0 0 0/.25)}
.toast.err{background:var(--bad)}
.modal{position:fixed;inset:0;background:rgb(0 0 0/.5);z-index:50;display:grid;place-items:center;padding:16px}
.modal .panel{background:var(--surface);border-radius:12px;padding:18px;width:min(560px,100%);max-height:92vh;overflow:auto;display:grid;gap:12px}
.modal .panel.wide{width:min(900px,100%)}

/* login */
.login{max-width:760px;margin:30px auto;padding:0 16px;display:grid;gap:16px}
.users{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:8px}
.users button{padding:14px;border:1px solid var(--line);border-radius:10px;background:var(--surface);font-weight:600;cursor:pointer;text-align:left}
.users button small{display:block;color:var(--muted);font-weight:400;text-transform:capitalize}
.pin{display:grid;grid-template-columns:repeat(3,minmax(0,90px));gap:10px;justify-content:center}
.pin button{height:70px;font-size:26px;font-weight:700;border-radius:12px;border:1px solid var(--line);background:var(--surface);cursor:pointer}
.pindots{display:flex;gap:12px;justify-content:center;font-size:30px;letter-spacing:6px;min-height:40px}

/* tablet */
body.tab main{max-width:1200px}
.tbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;justify-content:space-between}
.tbar .mc{font:700 30px var(--f-mono)}
.queue{display:grid;gap:10px}
.qcard{display:grid;grid-template-columns:1fr auto;gap:6px 14px;padding:16px;border:1px solid var(--line);border-radius:12px;background:var(--surface);cursor:pointer;text-align:left;width:100%}
.qcard b{font:700 22px var(--f-mono)}
.qcard.active{border-color:var(--accent);box-shadow:inset 6px 0 0 var(--accent)}
.items{display:grid;gap:10px}
.item{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;padding:14px 16px;border:1px solid var(--line);border-radius:12px;background:var(--surface);align-items:center}
.item.next{border-color:var(--accent);box-shadow:inset 6px 0 0 var(--accent)}
.item.done{opacity:.65}
.item .pn{font:700 19px var(--f-mono)}
.item .qty{font:700 22px var(--f-mono)}
.item .acts{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.big{padding:14px 20px!important;font-size:17px!important;min-width:110px;border-radius:10px!important}
.huge{padding:20px 28px!important;font-size:22px!important;border-radius:12px!important;min-width:180px}
.files{display:flex;gap:6px;flex-wrap:wrap}
.files button{border:1px solid var(--line);background:#fff;border-radius:8px;padding:8px 12px;font-weight:600;cursor:pointer}
.work{display:grid;gap:14px;padding:18px;border-radius:14px;background:var(--surface);border:2px solid var(--accent)}
.work.paused{border-color:var(--info)}
.work .timer{font:700 64px/1 var(--f-mono)}
.steps{display:flex;gap:8px;flex-wrap:wrap;font-size:13px;color:var(--muted)}
.steps span b{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--chip);color:var(--ink);font-size:12px;margin-right:4px}
.reasons{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px}
.reasons button{padding:18px;font-size:17px;font-weight:600;border-radius:10px;border:1px solid var(--line);background:#fff;cursor:pointer;text-align:left}
.qtyrow{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:10px;align-items:center;padding:8px 0;border-bottom:1px solid var(--line)}
.stepper{display:flex;align-items:center;gap:4px}
.stepper button{width:44px;height:44px;border-radius:8px;border:1px solid var(--line);background:#fff;font-size:22px;cursor:pointer}
.stepper input{width:84px;height:44px;text-align:center;font:700 20px var(--f-mono);border:1px solid var(--line);border-radius:8px}
@media (max-width:700px){.item{grid-template-columns:minmax(0,1fr)} .item .acts{justify-content:flex-start} .work .timer{font-size:44px}}

/* viewer */
.viewer{position:fixed;inset:0;z-index:70;background:#1b1f23;display:grid;grid-template-rows:auto 1fr}
.viewer .vh{display:flex;gap:10px;align-items:center;padding:10px 14px;background:#111;color:#fff;flex-wrap:wrap}
.viewer .vh b{font-family:var(--f-mono)}
.viewer .vh .btn{background:#2a3036;color:#fff;border-color:#3a4148}
.viewer .vb{overflow:auto;touch-action:pan-x pan-y pinch-zoom;display:grid;place-items:start center;padding:12px}
.viewer .vb img,.viewer .vb canvas{background:#fff;max-width:none;display:block;margin:0 auto 12px}
.viewer pre{color:#e9ecef;background:#0f1215;padding:14px;border-radius:8px;white-space:pre-wrap;max-width:900px;width:100%}

/* screens */
body.screen{background:var(--tv-bg);color:var(--tv-ink);overflow:hidden}
body.screen .bar{display:none}
.scr{height:100vh;display:grid;grid-template-rows:auto 1fr auto;gap:1.6vh;padding:2vh 2vw}
.scr-h{display:flex;align-items:center;gap:1.5vw}
.scr-h .t{font:700 3.4vw/1 var(--f-mono)}
.scr-h .s{font:500 1.3vw/1 var(--f-mono);color:var(--tv-muted)}
.scr-h .clock{margin-left:auto;font:500 2.4vw/1 var(--f-mono);text-align:right}
.scr-h .clock small{display:block;font-size:1vw;color:var(--tv-muted)}
.st{display:inline-flex;align-items:center;gap:.6vw;font:700 1.7vw/1 var(--f-body);padding:.6vh 1vw;border-radius:.4vw;background:var(--tv-row)}
.st .lamp{width:1.2vw;height:1.2vw}
.st.RUN{color:var(--tv-amber)} .st.RUN .lamp{background:var(--tv-amber);box-shadow:0 0 1vw var(--tv-amber)}
.st.PAUSE{color:#7cb8ff} .st.PAUSE .lamp{background:#7cb8ff}
.st.IDLE{color:var(--tv-muted)} .st.IDLE .lamp{background:#56616c}
.st.DOWN{background:var(--tv-redbg);color:#fff} .st.DOWN .lamp{background:#fff}
.mgrid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:1.6vw;min-height:0}
.pnl{background:var(--tv-panel);border:1px solid var(--tv-line);border-radius:.6vw;padding:1.6vh 1.2vw;display:grid;align-content:start;gap:1.2vh;min-height:0;overflow:hidden}
.lbl{font:600 1vw/1 var(--f-mono);letter-spacing:.14em;color:var(--tv-muted)}
.cur{display:grid;gap:.6vh;background:var(--tv-row);border-radius:.4vw;padding:1.4vh 1vw}
.cur .p{font:700 2.6vw/1 var(--f-mono)}
.cur .d{font:500 1.5vw/1.2 var(--f-body);color:var(--tv-muted)}
.cur .m{display:flex;gap:2vw;font:500 1.5vw/1 var(--f-mono);flex-wrap:wrap}
.cur .m em{font-style:normal;color:var(--tv-amber)}
.bign{font:700 6.5vw/1 var(--f-mono)}
.tb{height:1.4vh;background:#2a323a;border-radius:1vh;overflow:hidden}
.tb i{display:block;height:100%;background:var(--tv-amber)} .tb i.g{background:var(--tv-green)}
.q{display:grid;grid-template-columns:2vw 11vw 1fr 6vw 6vw;gap:.8vw;align-items:center;background:var(--tv-row);border-radius:.4vw;padding:1.1vh .8vw;font:500 1.4vw/1 var(--f-mono)}
.q .n{color:var(--tv-muted)} .q .j{color:#fff;font-weight:700} .q .g{color:var(--tv-muted);font:400 1.15vw var(--f-body)}
.tiles{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1vw;align-content:start}
.tile{background:var(--tv-panel);border:1px solid var(--tv-line);border-radius:.5vw;padding:1.1vh .8vw;display:grid;gap:.6vh;min-width:0}
.tile .h{display:flex;justify-content:space-between;align-items:center;font:700 1.5vw/1 var(--f-mono)}
.tile .lamp{width:1vw;height:1vw}
.tile.RUN .lamp{background:var(--tv-amber);box-shadow:0 0 .8vw var(--tv-amber)} .tile.PAUSE .lamp{background:#7cb8ff} .tile.IDLE .lamp{background:#56616c} .tile.DOWN{border-color:var(--tv-red)} .tile.DOWN .lamp{background:var(--tv-red)}
.tile .x{font:500 1vw/1.25 var(--f-mono);color:var(--tv-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tile .x b{color:var(--tv-ink)}
.jr{display:grid;grid-template-columns:12vw repeat(var(--n),minmax(0,1fr)) 6vw;gap:.6vw;align-items:center;font:500 1.1vw/1 var(--f-mono)}
.jr .c{display:grid;gap:.4vh} .jr .c span{font-size:.9vw;color:var(--tv-muted)}
.tools{position:fixed;right:1vw;bottom:1vh;display:flex;gap:6px;opacity:.15;transition:opacity .2s;z-index:3}
.tools:hover,.tools:focus-within{opacity:1}
.tools a,.tools button{background:#232a31;color:var(--tv-ink);border:1px solid #333c45;border-radius:6px;padding:8px 12px;font-size:14px;text-decoration:none;cursor:pointer}
.qtyrow.note>span:not(:first-child){width:180px;text-align:center}
.in-app .tools{display:none}