@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');
:root{--bg:#0f1117;--bg2:#1a1d27;--bg3:#222636;--bg4:#2a2f42;--bdr:#2e3348;--bdr2:#5b8def;--t1:#e8eaf0;--t2:#8e93a7;--t3:#5a5f73;--ac:#5b8def;--ac2:#7ba4f7;--acd:rgba(91,141,239,.15);--ok:#4ecb8d;--okd:rgba(78,203,141,.15);--wn:#f0b429;--wnd:rgba(240,180,41,.15);--ng:#ef6461;--ngd:rgba(239,100,97,.15);--r1:6px;--r2:10px;--r3:16px;--f:'Noto Sans JP',-apple-system,sans-serif;--fm:'JetBrains Mono',monospace}
*{margin:0;padding:0;box-sizing:border-box}
html,body{font-family:var(--f);background:var(--bg);color:var(--t1);font-size:14px;line-height:1.6;overflow-x:hidden}
.hd{background:var(--bg2);border-bottom:1px solid var(--bdr);padding:0 12px;height:50px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:100}
.hd h1{font-size:15px;font-weight:600;white-space:nowrap}.hd h1 b{color:var(--ac)}
.tabs{display:flex;gap:2px;overflow-x:auto}
.tab{padding:5px 10px;border:none;background:0;color:var(--t2);font-family:var(--f);font-size:10px;font-weight:500;cursor:pointer;border-radius:var(--r1);white-space:nowrap;transition:.2s}
.tab:hover{background:var(--bg4);color:var(--t1)}.tab.on{background:var(--acd);color:var(--ac)}
.pg{display:none;padding:12px;min-height:calc(100vh - 50px)}.pg.on{display:block}
.cd{background:var(--bg3);border:1px solid var(--bdr);border-radius:var(--r3);padding:16px;margin-bottom:14px}
.ct{font-size:13px;font-weight:600;margin-bottom:12px;display:flex;align-items:center;gap:7px}.ct::before{content:'';width:3px;height:15px;background:var(--ac);border-radius:2px}
.fg{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px}
.fi{display:flex;flex-direction:column;gap:3px}
.fi label{font-size:10px;font-weight:500;color:var(--t2);text-transform:uppercase;letter-spacing:.5px}
.fi input,.fi textarea,.fi select{background:var(--bg);border:1px solid var(--bdr);border-radius:var(--r1);padding:7px 9px;color:var(--t1);font-family:var(--f);font-size:12px}
.fi input:focus,.fi select:focus{outline:0;border-color:var(--bdr2);box-shadow:0 0 0 3px var(--acd)}
.fi input[readonly]{background:var(--bg4);color:var(--t3)}
.fi textarea{resize:vertical;min-height:60px}
.bt{display:inline-flex;align-items:center;gap:4px;padding:7px 14px;border:none;border-radius:var(--r1);font-family:var(--f);font-size:11px;font-weight:500;cursor:pointer;transition:.2s}
.bt1{background:var(--ac);color:#fff}.bt1:hover{background:var(--ac2)}
.bt2{background:var(--bg4);color:var(--t1);border:1px solid var(--bdr)}
.bt3{background:var(--ngd);color:var(--ng)}
.bts{padding:4px 8px;font-size:10px}
.btg{display:flex;gap:5px;margin-top:12px;flex-wrap:wrap}
/* Search select */
.ss{position:relative}.ss input{width:100%}
.sd{position:absolute;top:100%;left:0;right:0;background:var(--bg3);border:1px solid var(--bdr);border-radius:0 0 var(--r1) var(--r1);max-height:160px;overflow-y:auto;z-index:50;display:none}
.sd.open{display:block}.sd .si{padding:6px 8px;font-size:11px;cursor:pointer;border-bottom:1px solid var(--bdr)}.sd .si:hover{background:var(--acd);color:var(--ac)}
/* Vehicle picker */
.vp{border:1px solid var(--bdr);border-radius:var(--r1);background:var(--bg);padding:6px;max-height:180px;overflow-y:auto}
.vp input{width:100%;border:none;background:0;color:var(--t1);font-size:11px;padding:3px 0;outline:0;border-bottom:1px solid var(--bdr);margin-bottom:4px}
.vi{display:flex;align-items:center;gap:6px;padding:5px 6px;border-radius:var(--r1);cursor:pointer;font-size:11px;transition:.15s}
.vi:hover{background:var(--bg4)}.vi.sel{background:var(--acd);border:1px solid var(--ac)}
.vi .ck{width:14px;height:14px;border:2px solid var(--bdr);border-radius:3px;display:flex;align-items:center;justify-content:center;font-size:9px;flex-shrink:0}
.vi.sel .ck{background:var(--ac);border-color:var(--ac);color:#fff}
.chips{display:flex;flex-wrap:wrap;gap:3px;margin-top:6px}
.chip{display:inline-flex;align-items:center;gap:3px;padding:2px 7px;background:var(--acd);color:var(--ac);border-radius:10px;font-size:9px;font-weight:600}
.chip .cx{cursor:pointer;font-size:11px;opacity:.7}.chip .cx:hover{opacity:1}
/* Table */
.dt{width:100%;border-collapse:collapse}.dt th{text-align:left;padding:7px 8px;font-size:9px;font-weight:600;color:var(--t3);text-transform:uppercase;border-bottom:1px solid var(--bdr)}.dt td{padding:8px;border-bottom:1px solid var(--bdr);font-size:11px;vertical-align:top}.dt tr:hover td{background:var(--bg4)}
.mono{font-family:var(--fm);font-size:11px}
.badge{display:inline-block;padding:1px 7px;border-radius:14px;font-size:9px;font-weight:600;margin:1px}
.b-ok{background:var(--okd);color:var(--ok)}.b-ng{background:var(--ngd);color:var(--ng)}.b-ac{background:var(--acd);color:var(--ac)}.b-wn{background:var(--wnd);color:var(--wn)}
/* Highlight on yard */
.parking-spot.highlight{animation:pulse 1s infinite;z-index:20!important;box-shadow:0 0 30px rgba(240,180,41,.8)!important;border-color:var(--wn)!important}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
/* Modal */
.mo{display:none;position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:1000;align-items:center;justify-content:center;backdrop-filter:blur(4px)}.mo.on{display:flex}
.mc{background:var(--bg2);border:1px solid var(--bdr);border-radius:var(--r3);padding:20px;width:94%;max-width:850px;max-height:90vh;overflow-y:auto}
.mt{font-size:15px;font-weight:600;margin-bottom:14px;display:flex;align-items:center;gap:8px}
.mx{margin-left:auto;background:0;border:0;color:var(--t3);font-size:16px;cursor:pointer;padding:3px 6px;border-radius:var(--r1)}.mx:hover{background:var(--bg4);color:var(--t1)}
.hr{border:none;border-top:1px solid var(--bdr);margin:14px 0}
/* Photo grid */
.pg2{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:8px;margin-top:8px}
.ps{position:relative;aspect-ratio:4/3;background:var(--bg);border:2px dashed var(--bdr);border-radius:var(--r2);display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;transition:.2s;overflow:hidden}
.ps:hover{border-color:var(--ac);background:var(--acd)}
.ps.has{border-style:solid;border-color:var(--ok)}
.ps img{position:absolute;width:100%;height:100%;object-fit:cover}
.ps .lb{font-size:9px;color:var(--t3);font-weight:500;z-index:1;pointer-events:none}
.ps .ic{font-size:18px;color:var(--t3);z-index:1;pointer-events:none}
.ps input[type=file]{position:absolute;width:100%;height:100%;opacity:0;cursor:pointer}
/* Camera capture slot */
.cam-slot{position:relative;aspect-ratio:4/3;background:var(--bg);border:2px dashed var(--wn);border-radius:var(--r2);display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;transition:.2s;overflow:hidden}
.cam-slot:hover{background:var(--wnd)}
.cam-slot.has{border-style:solid;border-color:var(--ok)}
.cam-slot img{position:absolute;width:100%;height:100%;object-fit:cover}
.cam-slot .lb{font-size:9px;color:var(--t3);z-index:1;pointer-events:none}
.cam-slot .ic{font-size:22px;z-index:1;pointer-events:none}
.cam-slot input[type=file]{position:absolute;width:100%;height:100%;opacity:0;cursor:pointer}
/* Photo gallery */
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px;margin-top:8px}
.gallery img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r2);border:1px solid var(--bdr);cursor:pointer;transition:.2s}
.gallery img:hover{border-color:var(--ac);transform:scale(1.02)}
/* Lightbox */
.lbox{display:none;position:fixed;inset:0;background:rgba(0,0,0,.9);z-index:2000;align-items:center;justify-content:center;cursor:pointer}.lbox.on{display:flex}
.lbox img{max-width:95%;max-height:90vh;object-fit:contain;border-radius:var(--r2)}
/* Sub tabs */
.stabs{display:flex;gap:3px;margin-bottom:12px}.stab{padding:5px 12px;border:1px solid var(--bdr);background:var(--bg);color:var(--t2);font-family:var(--f);font-size:10px;font-weight:500;cursor:pointer;border-radius:var(--r1)}.stab.on{background:var(--acd);color:var(--ac);border-color:var(--ac)}
.sp{display:none}.sp.on{display:block}
/* Toast */
.tc{position:fixed;top:56px;right:12px;z-index:2000;display:flex;flex-direction:column;gap:4px}
.ts{background:var(--bg3);border:1px solid var(--bdr);border-radius:var(--r2);padding:8px 14px;font-size:11px;box-shadow:0 4px 20px rgba(0,0,0,.3);animation:si .3s;display:flex;align-items:center;gap:5px}
.ts.ok{border-left:3px solid var(--ok)}.ts.ng{border-left:3px solid var(--ng)}
@keyframes si{from{opacity:0;transform:translateX(30px)}to{opacity:1;transform:translateX(0)}}
/* Yard */
.yc{display:flex;gap:12px;height:calc(100vh - 80px)}
.ysb{width:220px;flex-shrink:0;overflow-y:auto;display:flex;flex-direction:column;gap:6px}
.ymw{flex:1;background:var(--bg3);border:1px solid var(--bdr);border-radius:var(--r3);position:relative;overflow:hidden;display:flex;flex-direction:column}
.ytb{padding:5px 10px;border-bottom:1px solid var(--bdr);display:flex;justify-content:space-between;align-items:center;gap:6px;flex-wrap:wrap;flex-shrink:0}
.ytb .hn{font-size:9px;color:var(--t3)}
.yvp{flex:1;position:relative;overflow:hidden;touch-action:none}
.yvp::before{content:'';position:absolute;inset:0;background-image:radial-gradient(circle,var(--bdr) 1px,transparent 1px);background-size:40px 40px;opacity:.3;pointer-events:none}
.ym{position:absolute;top:0;left:0;transform-origin:0 0}
.mt2{display:flex;border-radius:var(--r1);overflow:hidden;border:1px solid var(--bdr)}
.mt2 button{padding:5px 12px;border:none;background:var(--bg);color:var(--t2);font-family:var(--f);font-size:10px;font-weight:500;cursor:pointer}.mt2 button.on{background:var(--ac);color:#fff}
.pk{position:absolute;border:2px solid;border-radius:var(--r1);display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:600;cursor:pointer;text-align:center;line-height:1.1;padding:2px;user-select:none;transition:box-shadow .15s;touch-action:none;z-index:1}
.pk.empty{background:#2a3a2e;border-color:var(--ok);color:var(--ok)}.pk.occ{background:#3a2a2e;border-color:var(--ng);color:var(--ng)}
.pk:hover{box-shadow:0 0 12px rgba(91,141,239,.4);z-index:10}
.pk.drop{box-shadow:0 0 18px rgba(78,203,141,.6);border-color:var(--ok)!important;z-index:10}
.pk.dg{opacity:.85;box-shadow:0 0 20px rgba(91,141,239,.6);z-index:50;border-color:var(--ac)!important;cursor:grabbing}
.pk .sn{font-size:8px;opacity:.7;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.pk .sp2{font-size:9px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.pk .dh{position:absolute;top:-2px;right:-2px;width:16px;height:16px;background:var(--ac);border-radius:0 var(--r1) 0 var(--r1);display:flex;align-items:center;justify-content:center;font-size:8px;color:#fff;cursor:grab;opacity:0;transition:opacity .2s}.pk:hover .dh,.pk.dg .dh{opacity:1}
.vc{background:var(--bg3);border:1px solid var(--bdr);border-radius:var(--r2);padding:8px;cursor:grab;transition:.2s;touch-action:none}
.vc:hover{border-color:var(--ac);box-shadow:0 2px 8px rgba(91,141,239,.2)}
.vc.dr{opacity:.4;transform:scale(.95)}
.vc .pl{font-family:var(--fm);font-size:12px;font-weight:600;color:var(--ac)}.vc .mn{font-size:9px;color:var(--t3);margin-top:1px}
.gh{position:fixed;pointer-events:none;z-index:9999;background:var(--ac);color:#fff;padding:5px 10px;border-radius:var(--r1);font-family:var(--fm);font-size:11px;font-weight:600;box-shadow:0 4px 16px rgba(0,0,0,.4);white-space:nowrap;transform:translate(-50%,-50%)}
.zc{position:absolute;bottom:10px;right:10px;display:flex;flex-direction:column;gap:3px;z-index:20}
.zc button{width:30px;height:30px;border-radius:var(--r1);border:1px solid var(--bdr);background:var(--bg3);color:var(--t1);font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center}.zc button:hover{background:var(--ac);color:#fff}
.text-muted{color:var(--t3)}.flex-between{display:flex;justify-content:space-between;align-items:center}.mb8{margin-bottom:8px}.mt8{margin-top:8px}
/* Container loading form - vehicle slot card */
.load-slot{background:var(--bg3);border:1px solid var(--bdr);border-radius:var(--r2);padding:12px;margin-bottom:10px}
.load-slot .slot-hd{font-size:12px;font-weight:600;margin-bottom:8px;display:flex;align-items:center;gap:6px}
.load-slot .slot-hd .num{background:var(--ac);color:#fff;width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;flex-shrink:0}
@media(max-width:900px){.yc{flex-direction:column;height:auto}.ysb{width:100%;flex-direction:row;flex-wrap:wrap;overflow-x:auto;gap:6px}.ysb .ct{width:100%}.vc{min-width:130px;flex-shrink:0}.ymw{min-height:50vh;height:55vh}.ytb .hn{display:none}}
@media(max-width:600px){.fg{grid-template-columns:1fr!important}.pg2{grid-template-columns:repeat(auto-fill,minmax(80px,1fr))}.gallery{grid-template-columns:repeat(auto-fill,minmax(90px,1fr))}}