:root{--bg:#0E1A2B;--card:#15243A;--line:#22344C;--line2:#2A3E57;--text:#E8EEF4;--muted:#9FB0C3;--brass:#D4AF5A;--warn:#F2B37A;--deep:#0B1522;color-scheme:dark}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--text);font:16px/1.45 Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;-webkit-text-size-adjust:100%}
h1,h2,.brand{font-family:Sora,Inter,system-ui,sans-serif}
h1{font-size:1.6rem;margin:.2rem 0}h2{font-size:1rem;margin:1.4rem 0 .5rem;color:var(--muted);font-weight:600}
a{color:var(--text);text-decoration:none}
.screen{max-width:560px;margin:0 auto;padding:20px 16px 110px}
.center{text-align:center;padding-top:40px}.center form,.center .row{text-align:left;max-width:360px;margin:0 auto}
.muted{color:var(--muted)}.small{font-size:.8rem}.caps{letter-spacing:.08em;text-transform:uppercase}.gold{color:var(--brass);font-weight:600}.warn{color:var(--warn)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.brand{font-weight:700;letter-spacing:.02em;font-size:1.3rem;margin:0}
.top{display:flex;align-items:center;gap:10px;margin-bottom:14px}.top>div{flex:1}.top.plain{justify-content:space-between}
.wheel{width:30px;height:30px;fill:none;stroke:var(--brass);stroke-width:1.8;stroke-linecap:round}
.icon{width:44px;height:44px;border-radius:22px;border:1px solid var(--line2);background:var(--card);color:var(--text);display:grid;place-items:center;flex:none}
.icon svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.tiles div{background:var(--card);border-radius:14px;padding:10px 12px}.tiles b{display:block;font:600 1.4rem Sora,sans-serif}.tiles span{font-size:.75rem;color:var(--muted)}
.card{display:flex;gap:12px;background:var(--card);border:1px solid var(--line);border-radius:18px;padding:12px 14px;margin-bottom:10px;min-height:56px}
.card.empty{background:transparent;border-style:dashed;align-items:center}
.slot{width:32px;height:32px;flex:none;border-radius:16px;background:var(--brass);color:#14202F;font:700 .9rem Sora,sans-serif;display:grid;place-items:center}
.slot.hollow{background:transparent;border:1px dashed var(--line2);color:var(--muted)}
.body{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.line{display:flex;justify-content:space-between;align-items:center;gap:8px}.line.left{justify-content:flex-start}
.code{font-size:.75rem;color:var(--muted);letter-spacing:.06em}
.name{font:600 1rem Sora,sans-serif;line-height:1.25}.one{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.next{font-size:.85rem;color:#B8C5D3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.rank{font-size:.72rem;background:#1E3049;border-radius:10px;padding:2px 8px;color:#C9D4E0}.rank.none{color:var(--warn);background:#2A1F14}
.pill{font-size:.72rem;font-weight:600;color:#0E1A2B;border-radius:8px;padding:2px 8px;flex:none}
.dots{font-size:.75rem;letter-spacing:2px}.parked{font-size:.72rem;color:var(--muted);border:1px solid var(--line2);border-radius:8px;padding:1px 6px}
.search input,input,select,textarea{width:100%;background:var(--card);color:var(--text);border:1px solid var(--line2);border-radius:14px;padding:12px 14px;font:inherit}
.search input{border-radius:22px}
input:focus,select:focus,textarea:focus,button:focus-visible,a:focus-visible{outline:2px solid var(--brass);outline-offset:2px}
.chips{display:flex;gap:6px;overflow-x:auto;padding:10px 0 4px}.chips.wrap{flex-wrap:wrap;overflow:visible}
.chip{flex:none;min-height:40px;padding:0 14px;border-radius:20px;border:1px solid var(--line2);background:transparent;color:#C9D4E0;font:inherit;font-size:.9rem}
.chip.on{background:var(--brass);border-color:var(--brass);color:#14202F}
.list{display:flex;flex-direction:column;gap:8px;margin-top:6px}
.row-item{display:flex;align-items:center;gap:12px;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:10px 12px;min-height:60px}
.sq{width:40px;height:40px;flex:none;border-radius:12px;background:#1E3049;color:#C9D4E0;font:700 1rem Sora,sans-serif;display:grid;place-items:center}.sq.hi{background:var(--brass);color:#14202F}.sq.none{background:#2A1F14;color:var(--warn)}
.hero{background:var(--card);border:1px solid var(--line);border-radius:22px;padding:18px}.hero h1{font-size:1.7rem}
.grid5{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.slotbtn,.rankbtn{min-height:48px;border-radius:12px;border:1px solid var(--line2);background:var(--card);color:#C9D4E0;font:600 1rem Sora,sans-serif}
.slotbtn.on,.rankbtn.on{background:var(--brass);border-color:var(--brass);color:#14202F}
button{cursor:pointer;font:inherit}
.primary,.btn{min-height:48px;border-radius:14px;border:1px solid var(--line2);background:var(--card);color:var(--text);padding:0 16px;font-weight:600;display:inline-flex;align-items:center;justify-content:center}
.primary{background:var(--brass);border-color:var(--brass);color:#14202F;margin-top:8px}
.btn.disabled{opacity:.5}.wide{width:100%;margin-top:12px}
.link{background:none;border:none;color:var(--brass);padding:10px 0;min-height:44px;text-decoration:underline}
.stack{display:flex;flex-direction:column;gap:8px}.stack label{font-size:.85rem;color:var(--muted);margin-top:6px}
.row{display:flex;gap:8px;margin-top:8px}.row input{flex:1}
.actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px}
.notes{list-style:none;padding:0;margin:12px 0 0;display:flex;flex-direction:column;gap:8px}.notes li{background:var(--card);border-radius:12px;padding:10px 12px;display:flex;flex-direction:column;gap:2px;white-space:pre-wrap}
.status{position:fixed;left:50%;transform:translateX(-50%);bottom:86px;margin:0;padding:10px 16px;border-radius:14px;background:#1E3049;border:1px solid var(--line2);max-width:92vw;z-index:5;font-size:.9rem}
.status.ok{border-color:#86CF8A}.status.error{background:#2A1F14;border-color:#5A3E22;color:var(--warn)}.status.saving{border-color:var(--brass)}
.center .status{position:static;transform:none;margin:16px auto 0;display:inline-block}
.tabs{position:fixed;left:0;right:0;bottom:0;display:grid;grid-template-columns:repeat(5,1fr);background:var(--deep);border-top:1px solid var(--line);padding:6px 6px calc(8px + env(safe-area-inset-bottom))}
.tabs a{display:flex;flex-direction:column;align-items:center;gap:2px;min-height:48px;justify-content:center;color:var(--muted);font-size:.72rem}
.tabs a.on{color:var(--brass)}.tabs svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.glass{display:block;margin:0 auto 10px}.crystal{animation:glow 6s ease-in-out infinite}
@keyframes glow{0%,100%{opacity:.55}50%{opacity:1}}
@media (prefers-reduced-motion:reduce){.crystal{animation:none}}
.splash{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px}
.splash p{letter-spacing:.22em;font-size:.8rem;color:#B8C5D3}
/* ---- project sections ---- */
.segs{display:grid;grid-template-columns:repeat(3,1fr);background:var(--card);border:1px solid var(--line);border-radius:14px;padding:4px;margin:-4px 0 14px}
.seg{min-height:40px;display:flex;align-items:center;justify-content:center;border-radius:10px;font-size:.9rem;color:var(--muted)}
.seg.on{background:var(--brass);color:#14202F;font-weight:600}
.check{display:flex;align-items:center;gap:10px;min-height:44px;font-size:.9rem;color:#C9D4E0}.check input{width:22px;height:22px;accent-color:var(--brass)}
/* ---- files ---- */
.panel{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:16px;margin-bottom:12px}.center-text{text-align:center}
h2.flush{margin:0 0 6px;color:var(--text)}
code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.85em;background:#0B1522;border-radius:6px;padding:1px 5px;word-break:break-all}
.loading{padding:30px 0;text-align:center}.pad{padding:12px 14px;margin:0}
.quick{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.quick.two{grid-template-columns:1fr 1fr}
.quick>*{min-height:68px;border-radius:14px;border:1px solid var(--line2);background:var(--card);color:var(--text);font-size:.78rem;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;text-align:center;padding:6px}
.quick svg,.fi svg,.chev{width:22px;height:22px;fill:none;stroke:var(--brass);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.chev{width:16px;height:16px;stroke:#5F7089}
.group{background:var(--card);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.frow{display:flex;align-items:center;gap:12px;width:100%;padding:10px 14px;min-height:56px;border:none;border-bottom:1px solid var(--line);background:none;color:var(--text);text-align:left}
.group>.frow:last-child{border-bottom:none}.frow.dim .fname{color:#7F91A6}
.frow .body{gap:1px}.fname{font-size:.95rem;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fi{width:38px;height:38px;flex:none;border-radius:10px;background:#1E3049;display:grid;place-items:center;object-fit:cover}
.fi.folder{background:none}.fi.folder.empty svg{stroke:#3A4D66}
.fi.badge{font-size:.62rem;font-weight:700;color:#7DB3E3;letter-spacing:.02em}
.thumbs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:8px}
.tile{aspect-ratio:1/1;border-radius:12px;border:1px solid var(--line2);background:#2B3B4F center/cover no-repeat;display:flex;align-items:flex-end;padding:5px;color:#E8EEF4;font-size:.6rem;overflow:hidden;text-align:left}
.tile span{background:rgba(14,26,43,.72);border-radius:6px;padding:1px 4px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.crumbs{color:var(--muted);margin:0 0 10px}.crumbs a{color:var(--brass)}
.backdrop{position:fixed;inset:0;background:rgba(5,10,18,.6);z-index:10}
.sheet{position:fixed;left:0;right:0;bottom:0;z-index:11;max-width:560px;margin:0 auto;background:var(--card);border-top:1px solid var(--line2);border-radius:24px 24px 0 0;padding:10px 18px calc(18px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:12px;max-height:88vh;overflow:auto}
.grab{width:40px;height:4px;border-radius:2px;background:#3A4D66;align-self:center}
.preview{width:100%;max-height:46vh;object-fit:contain;border-radius:14px;background:#0B1522}
.sheet-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}.sheet .link{align-self:center}
.flushbtn{margin-top:0}
.reader{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:14px 16px;font-size:.92rem;overflow-wrap:anywhere}
.reader h2,.reader h3,.reader h4{color:var(--text);margin:1rem 0 .4rem}.reader h2{font-size:1.15rem;margin-top:0}.reader h3{font-size:1rem;color:var(--brass)}
.reader p{margin:.3rem 0}.reader .li{padding-left:16px;position:relative}.reader .li::before{content:'•';position:absolute;left:2px;color:var(--brass)}
.reader pre{white-space:pre-wrap;margin:0;font-size:.85rem}
/* ---- boxes, labels, scan (V1.1) ---- */
.sq.box{background:#1E3049}.sq.box svg,.qrmini svg{display:block}.sq.box svg{width:22px;height:22px;fill:none;stroke:var(--brass);stroke-width:1.8;stroke-linejoin:round}
.row-item.dim{opacity:.55}
.top .icon svg,.top a.icon svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
a.icon{color:var(--text)}
.boxhero{display:flex;gap:14px;align-items:center}.boxhero h1{font-size:1.35rem}
.qrmini{width:84px;height:84px;flex:none;border-radius:10px;overflow:hidden;background:#fff}.qrmini svg{width:100%;height:100%}
.check.small{font-size:.85rem;min-height:40px}
.pick{display:flex;align-items:center;gap:12px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:8px 12px;min-height:52px}
.pick input{width:22px;height:22px;flex:none;accent-color:var(--brass)}
.stickybar{position:sticky;bottom:78px;display:flex;justify-content:space-between;align-items:center;gap:10px;background:var(--deep);border:1px solid var(--line2);border-radius:16px;padding:6px 8px 6px 14px;margin-top:14px}
.stickybar .primary{margin:0}.primary:disabled{opacity:.45}
.viewfinder{position:relative;border-radius:18px;overflow:hidden;background:#000;aspect-ratio:3/4;max-height:60vh;margin:0 auto 8px}
.viewfinder video{width:100%;height:100%;object-fit:cover;display:block}
.reticle{position:absolute;inset:18%;border:3px solid var(--brass);border-radius:16px;box-shadow:0 0 0 999px rgba(0,0,0,.35)}
.labels{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:10px}
.label{width:50mm;height:80mm;background:#fff;color:#000;box-sizing:border-box;padding:3mm 3mm 2.5mm;display:flex;flex-direction:column;align-items:center;border-radius:2mm;overflow:hidden;font-family:Arial,Helvetica,sans-serif}
.lqr{width:44mm;height:44mm;flex:none}.lqr svg{width:100%;height:100%;display:block}
.lcode{font-weight:700;font-size:7mm;line-height:1.1;margin-top:2mm;letter-spacing:.02em}
.lname{font-weight:600;font-size:4.2mm;line-height:1.2;text-align:center;margin-top:1.4mm;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.lsub{font-size:3.1mm;line-height:1.2;color:#333;margin-top:auto;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
@media print{
  @page{size:50mm 80mm;margin:0}
  html,body{background:#fff!important}
  .no-print,.tabs,.status{display:none!important}
  .print-screen{padding:0;margin:0;max-width:none}
  .labels{display:block;margin:0}
  .label{border-radius:0;margin:0;break-after:page;page-break-after:always}
  .label:last-child{break-after:auto;page-break-after:auto}
}
