:root{
  --bg:#1b2530; --panel:#243140; --panel2:#2c3b4c; --line:#3a4b5e; --text:#e8eef4; --muted:#93a4b6;
  --green:#3fb24f; --blue:#2f9bd6; --amber:#f0a92e; --red:#e2524a; --purple:#9d6ce0;
  --radius:6px;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--text);font:14px/1.4 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
a{color:var(--blue);text-decoration:none}
button{font:inherit;cursor:pointer}
.app{display:grid;grid-template-columns:64px minmax(0,1fr);min-height:100vh}
.app > div{min-width:0}
.side{background:#141c25;display:flex;flex-direction:column;align-items:center;padding-top:0}
.side .logo{width:64px;height:56px;background:var(--green);display:grid;place-items:center;font-weight:800;font-size:22px;color:#fff}
.side a{width:64px;height:56px;display:grid;place-items:center;color:var(--muted)}
.side a.on{background:var(--green);color:#fff}
.side a:hover{color:#fff}
.side svg{width:22px;height:22px}
.top{display:flex;align-items:center;gap:16px;padding:0 20px;height:56px;border-bottom:1px solid var(--line);background:#18212b}
.top .brand{font-weight:700;letter-spacing:.3px}
.top .brand span{color:var(--muted);font-weight:400}
.top .sp{flex:1}
.pill{font-size:12px;padding:3px 9px;border-radius:99px;background:var(--panel2);color:var(--muted)}
.pill.warn{background:#4a3a14;color:#ffd27a}
.pill.err{background:#4a1c1a;color:#ff9b93}
main{padding:20px 24px;overflow:auto}
h1{font-size:22px;font-weight:500;margin:0 0 4px}
.crumbs{color:var(--muted);font-size:12px;margin-bottom:16px}
.crumbs a{color:var(--green)}
.btn{background:var(--blue);color:#fff;border:0;border-radius:4px;padding:8px 12px;font-size:13px}
.btn.green{background:var(--green)}
.btn.ghost{background:var(--panel2);color:var(--text)}
.btn.amber{background:var(--amber);color:#1b1b1b}
.btn:disabled{opacity:.5;cursor:default}
.toolbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:14px}
input[type=search],input[type=text],input[type=number],input[type=password],textarea,select{background:#111922;border:1px solid var(--line);color:var(--text);border-radius:4px;padding:8px 10px;font:inherit}
/* job list */
table.jobs{width:100%;border-collapse:collapse;background:var(--panel);border-radius:var(--radius);overflow:hidden}
table.jobs th{text-align:left;font-weight:600;font-size:12px;color:var(--muted);padding:10px;border-bottom:1px solid var(--line);background:var(--panel2);white-space:nowrap}
table.jobs td{padding:9px 10px;white-space:nowrap;border-bottom:1px solid #2f3e4f;vertical-align:middle}
table.jobs tr:hover td{background:#2a394a;cursor:pointer}
.tier{font-size:11px;font-weight:700;padding:2px 7px;border-radius:3px;white-space:nowrap}
.t0{background:var(--red);color:#fff}.t1{background:var(--purple);color:#fff}.t2{background:var(--amber);color:#1b1b1b}.t3{background:#3b6a8f;color:#fff}.t4,.t5{background:var(--panel2);color:var(--muted)}
.mini-steps{display:flex;gap:3px}
.mini-steps i{width:10px;height:10px;border-radius:50%;background:#3d4f63;display:block}
.mini-steps i.done{background:var(--green)}.mini-steps i.active{background:var(--blue)}.mini-steps i.current{background:#fff}.mini-steps i.stuck{background:var(--amber)}
/* job page */
.hdr{display:flex;flex-wrap:wrap;gap:22px;align-items:flex-end;background:var(--panel);padding:14px 16px;border-radius:var(--radius);margin-bottom:14px}
.hdr .title{background:#fff;color:#111;font-weight:700;font-size:17px;padding:8px 12px;border-radius:3px}
.kv small{display:block;color:var(--muted);font-size:12px}
.kv b{font-size:16px;font-weight:600}
.section{background:var(--panel);border-radius:var(--radius);margin-bottom:14px}
.section > h3{margin:0;padding:10px 14px;font-size:13px;font-weight:600;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center}
.section .body{padding:14px}
.track{display:flex;justify-content:space-between;position:relative;padding:10px 6px 4px}
.track:before{content:"";position:absolute;left:40px;right:40px;top:22px;height:2px;background:#3d4f63}
.step{position:relative;text-align:center;flex:1;font-size:12px;color:var(--muted)}
.dot{width:24px;height:24px;border-radius:50%;background:#3d4f63;margin:0 auto 6px;display:grid;place-items:center;color:#fff;font-size:13px;position:relative;z-index:1}
.step.done .dot{background:var(--green)}
.step.active .dot{background:var(--blue);box-shadow:0 0 0 5px rgba(47,155,214,.25)}
.step.current .dot{background:var(--blue);width:30px;height:30px;margin-top:-3px}
.step.stuck .dot{background:var(--amber)}
.step.done,.step.current,.step.active{color:var(--text)}
.step .note{font-size:11px;color:var(--muted);margin-top:2px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px 18px}
.grid .kv b{font-size:14px}
.cols2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:900px){.cols2{grid-template-columns:1fr}}
table.mach{width:100%;border-collapse:collapse}
table.mach td,table.mach th{padding:8px;border-bottom:1px solid #2f3e4f;text-align:left}
table.mach th{color:var(--muted);font-size:12px;font-weight:600}
.time{color:var(--green);font-weight:700}
.muted{color:var(--muted)}
.warnbox{background:#3d3317;color:#ffd98a;padding:8px 12px;border-radius:4px;margin-bottom:10px;font-size:13px}
.art-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px}
.art{background:#1c2733;border:1px solid var(--line);border-radius:4px;padding:8px;font-size:12px;word-break:break-all}
.art img{width:100%;height:110px;object-fit:contain;background:#fff;border-radius:2px;margin-bottom:6px}
.art .ph{height:110px;display:grid;place-items:center;background:#0f161e;color:var(--muted);border-radius:2px;margin-bottom:6px;font-weight:700}
.drop{border:2px dashed var(--line);border-radius:6px;padding:16px;text-align:center;color:var(--muted);margin-top:10px}
.drop.over{border-color:var(--green);color:var(--text)}
.hist{font-size:12px;color:var(--muted);max-height:180px;overflow:auto}
.hist div{padding:3px 0;border-bottom:1px solid #2f3e4f}
/* schedule */
.board{display:flex;gap:12px;overflow-x:auto;padding-bottom:10px;align-items:flex-start}
.col{background:var(--panel);border-radius:var(--radius);min-width:270px;width:270px;flex-shrink:0}
.col h4{margin:0;padding:10px 12px;border-bottom:1px solid var(--line);font-size:14px}
.col h4 .sub{display:block;font-weight:400;color:var(--muted);font-size:12px;margin-top:2px}
.col .list{padding:8px;min-height:80px;display:flex;flex-direction:column;gap:8px}
.card{background:#1c2733;border:1px solid var(--line);border-left:4px solid #3d4f63;border-radius:4px;padding:8px 10px;cursor:grab;font-size:13px}
.card.t0{border-left-color:var(--red)}.card.t1{border-left-color:var(--purple)}.card.t2{border-left-color:var(--amber)}.card.t3{border-left-color:#3b6a8f}
.card .n{font-weight:600;margin-bottom:3px}
.card .meta{display:flex;justify-content:space-between;color:var(--muted);font-size:12px;gap:6px}
.card.dragging{opacity:.4}
.col .list.over{background:#2a394a}
.status-chip{font-size:11px;padding:1px 6px;border-radius:3px;background:var(--panel2)}
.status-chip.working{background:var(--blue);color:#fff}
/* login + proof */
.center{min-height:100vh;display:grid;place-items:center;padding:16px}
.card-box{background:var(--panel);border-radius:8px;padding:24px;width:100%;max-width:380px}
.toast{position:fixed;bottom:18px;right:18px;background:var(--green);color:#fff;padding:10px 14px;border-radius:4px;z-index:10}
[hidden]{display:none!important}

/* v2: orders + lines */
.top{flex-wrap:wrap;min-height:56px;height:auto;padding-block:8px}
.pagehead{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap}
.tablewrap{overflow-x:auto;border-radius:var(--radius)}
table.jobs td{white-space:nowrap}
table.jobs td.wrap{white-space:normal;min-width:200px}
.mono{font-variant-numeric:tabular-nums;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px}
.src{font-size:11px;font-weight:600;padding:2px 7px;border-radius:3px;background:var(--panel2);color:var(--muted)}
.src-manual{background:#264a33;color:#9fe2b0}.src-woo{background:#3a2c55;color:#cdb6ff}.src-email{background:#2d3f55;color:#a9cdf3}
.btn.small{padding:5px 9px;font-size:12px}
.small{font-size:12px}
.pill.ok{background:#1f4a2a;color:#a9eab8}
.infobox{background:#1d3347;color:#b9d8f2;padding:10px 14px;border-radius:4px;margin-bottom:14px;font-size:13px}
.okbox{background:#17352a;color:#b9f3c8;padding:10px 12px;border-radius:4px;margin:8px 0;font-size:13px}
.okbox input{width:100%;margin-top:6px}
.lines-title{font-size:16px;font-weight:600;margin:18px 0 10px}
.line{background:var(--panel);border-radius:var(--radius);margin-bottom:14px;border-left:3px solid var(--blue)}
.line-head{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.lineno{background:#fff;color:#111;font-weight:700;border-radius:3px;padding:1px 7px;font-size:13px}
.track-wrap{overflow-x:auto;padding:0 14px}
.track{min-width:560px}
.line-body{display:grid;grid-template-columns:1.2fr 1fr;gap:18px;padding:12px 14px}
@media(max-width:900px){.line-body{grid-template-columns:1fr}}
.notes{margin-top:12px}
label.inline{display:flex;gap:8px;align-items:center;margin-top:10px;color:var(--muted);font-size:13px}
.art-row{border-top:1px solid var(--line);padding:12px 14px}
.art-head{display:flex;align-items:center;gap:10px;margin-bottom:8px;flex-wrap:wrap}
.art{display:flex;flex-direction:column;gap:2px;color:var(--text)}
.drop{display:grid;place-items:center;text-align:center;min-height:150px;border:2px dashed var(--line);border-radius:4px;color:var(--muted);cursor:pointer;font-size:13px;padding:8px;margin:0}
.drop.over{border-color:var(--green);color:var(--text)}
.order-edit{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end}
.order-edit label,label.block{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--muted)}
.order-edit label.grow{flex:1;min-width:200px}
label.block{margin-top:12px}
label.block textarea{width:100%}
h3.sub{font-size:13px;margin:16px 0 8px}
table.form-lines{width:100%;border-collapse:collapse;min-width:980px}
table.form-lines th{font-size:12px;color:var(--muted);text-align:left;padding:4px;font-weight:600}
table.form-lines td{padding:3px 4px}
table.form-lines input[type=text]{width:100%}
table.form-lines .num{width:74px}
table.form-lines td.c{text-align:center}
.form-actions{display:flex;gap:10px;align-items:center;margin-top:12px;flex-wrap:wrap}
.err{color:var(--red)}
.section.narrow{max-width:560px}
.hist div{padding:4px 0}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,tr:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
@media(max-width:600px){main{padding:16px}.hdr{gap:14px}}
/* v3: people */
.card-box label.block input{width:100%}
.side a[hidden]{display:none}
#who{text-decoration:none}
.who{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 5px;border-radius:11px;background:#3a2c55;color:#d9c9ff;font-size:11px;font-weight:700}
.myjobs{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(min(100%,460px),1fr))}
.job{background:var(--panel);border-radius:var(--radius);border-left:5px solid #3d4f63;padding:14px;display:flex;flex-direction:column;gap:10px}
.job.t0{border-left-color:var(--red)}.job.t1{border-left-color:var(--purple)}.job.t2{border-left-color:var(--amber)}.job.t3{border-left-color:#3b6a8f}
.job-top{display:flex;gap:10px;align-items:center;justify-content:space-between}
.job-main{display:grid;grid-template-columns:120px 1fr;gap:14px}
.job h3{margin:0 0 2px;font-size:17px}
.job .spec{font-size:14px;margin-top:4px}
.thumb{width:120px;height:120px;background:#0f161e;border-radius:4px;display:grid;place-items:center;color:var(--muted);font-weight:700;overflow:hidden}
.thumb img{width:100%;height:100%;object-fit:contain;background:#fff}
.job-actions{display:flex;flex-wrap:wrap;gap:8px}
.job-actions .btn{padding:12px 16px;font-size:15px}
@media(max-width:480px){.job-main{grid-template-columns:80px 1fr}.thumb{width:80px;height:80px}}

/* v4: art previews */
.art .ph.loading { opacity: .6; animation: pulse 1.2s ease-in-out infinite; }
.art .ph.nopreview { opacity: .8; }
@keyframes pulse { 50% { opacity: .3; } }
.art img { background: #fff; object-fit: contain; }
.viewer { position: fixed; inset: 0; z-index: 50; background: rgba(0,0,0,.82); display: flex; flex-direction: column; }
.viewer-bar { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--panel, #1e2633); color: var(--text, #e8edf3); flex-wrap: wrap; }
.viewer-bar b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 50vw; }
.viewer-bar .grow { flex: 1; }
.viewer-body { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 12px; overflow: auto; }
.viewer-body img, .viewer-body canvas { max-width: 100%; max-height: 100%; background: #fff; box-shadow: 0 4px 24px rgba(0,0,0,.5); }

/* v5: customer notes */
.notebox { background: #3a2f12; border-left: 4px solid #f0b429; color: #ffe7a8; padding: 10px 14px; border-radius: 4px; margin-bottom: 14px; }
.notebox small { display: block; color: #d9b45a; text-transform: uppercase; letter-spacing: .04em; font-size: 11px; margin-bottom: 4px; }
.notebox div { white-space: pre-wrap; font-size: 14px; line-height: 1.45; }
.custnote { background: #3a2f12; color: #ffe7a8; border-left: 3px solid #f0b429; padding: 6px 8px; border-radius: 3px; font-size: 13px; margin: 6px 0; white-space: pre-wrap; }

/* v6: production notes (prepress -> printer) */
.pnotes-row { border-top: 1px solid var(--line); padding: 12px 14px; }
.pnote { background: #16304a; border-left: 4px solid #4aa3ff; color: #d6ebff; padding: 8px 12px; border-radius: 4px; margin: 0 0 8px; }
.pnote-meta { font-size: 12px; color: #9cc6ee; margin-bottom: 3px; }
.pnote-body { white-space: pre-wrap; font-size: 14px; line-height: 1.45; }
.pnote-add { display: flex; gap: 8px; align-items: flex-start; }
.pnote-add textarea { flex: 1; min-height: 44px; resize: vertical; background: #0f161e; color: var(--text); border: 1px solid var(--line); border-radius: 4px; padding: 8px; font: inherit; }
.linkbtn { background: none; border: 0; color: #9cc6ee; text-decoration: underline; cursor: pointer; font-size: 12px; padding: 0 0 0 6px; }
.pnote-card { background: #16304a; border-left: 3px solid #4aa3ff; color: #d6ebff; padding: 6px 8px; border-radius: 3px; font-size: 13px; margin: 6px 0; white-space: pre-wrap; }
.pnote-card div + div { margin-top: 4px; }

/* v7: rush badges in Monday's colors */
.rush-chip { display: inline-block; font-weight: 800; font-size: 11px; letter-spacing: .03em; padding: 2px 7px; border-radius: 3px; margin-left: 6px; white-space: nowrap; vertical-align: middle; }
.rush-chip.big { font-size: 15px; padding: 6px 12px; border-radius: 4px; margin-left: 0; box-shadow: 0 0 0 2px rgba(255,255,255,.15); }