:root{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#14213a;background:#f5f4fc;font-synthesis:none;--ink:#14213a;--muted:#50617c;--border:#e1e7f0;--blue:#5743dd;--pale:#f0ebff}
*{box-sizing:border-box}
body{margin:0;min-width:320px}
h1,h2,p{margin:0}
button,input,select{font:inherit}
button{cursor:pointer}
button:disabled{cursor:wait;opacity:.55}
:focus-visible{outline:3px solid #5074fa;outline-offset:3px}
[hidden]{display:none!important}
svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.shell{width:min(850px,calc(100% - 48px));margin:auto}
.top{background:radial-gradient(ellipse at 90% 10%,#5244ae 0,transparent 62%),linear-gradient(126deg,#241b54,#30256e 62%,#3d3186);color:#fff;padding:29px 0 57px}
.mast,.brand{display:flex;align-items:center}
.mast{justify-content:space-between;gap:16px}
.brand{gap:15px}
.brand-icon{display:grid;place-items:center;width:52px;height:52px;border-radius:16px;background:linear-gradient(135deg,#8d7aff,#6745ec);box-shadow:0 7px 18px #1712388c}
.brand-icon svg{width:30px;height:30px}
.eyebrow{font-size:.64rem;font-weight:800;letter-spacing:.18em;color:#d8cffd;margin-bottom:4px}
h1{font-size:clamp(1.15rem,3vw,1.66rem);font-weight:760;letter-spacing:-.045em;line-height:1.16}
.add-button{flex:none;color:#2c1d77;background:#fff;border-color:#ffffff75;min-height:46px;box-shadow:0 4px 16px #15103950;padding-inline:15px}
.add-button:hover{background:#f0eaff}
.workspace{margin-top:-28px}
.overview{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:13px}
.metric{--metric-ink:#4530ae;--metric-bg:#eae3ff;display:grid;grid-template-columns:auto 1fr;column-gap:10px;row-gap:3px;align-items:center;background:#fff;border:1px solid #e9e3f8;border-radius:13px;padding:9px 12px;box-shadow:none;min-width:0}
.metric:nth-child(2){--metric-ink:#855111;--metric-bg:#fff0d4}
.metric:nth-child(3){--metric-ink:#116649;--metric-bg:#dcf6e8}
.metric-icon{grid-row:span 2;width:35px;height:35px;display:grid;place-items:center;border-radius:13px;color:var(--metric-ink);background:var(--metric-bg)}
.metric strong{color:var(--metric-ink)}
.metric span{color:var(--muted);font-weight:650;font-size:.78rem}
.metric strong{font-size:1.7rem;letter-spacing:-.06em;line-height:1.05;font-variant-numeric:tabular-nums}
.metric #next{font-size:1.15rem;letter-spacing:-.04em;overflow-wrap:anywhere}
.panel{background:#fff;border:1px solid var(--border);border-radius:23px;padding:22px;box-shadow:0 7px 21px #2f20560d}
.section-label{font-weight:800;letter-spacing:.12em;font-size:.68rem;color:#425473;display:flex;align-items:center;gap:8px;margin-bottom:11px}
.section-label span{letter-spacing:0;color:#4730b7;background:var(--pale);border-radius:6px;padding:4px 6px}
h2{font-size:1.45rem;font-weight:770;letter-spacing:-.045em}
.muted{font-size:.89rem;line-height:1.5;color:var(--muted);margin-top:7px}
.button{border:1px solid transparent;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:0 12px;min-height:43px;font-weight:720;font-size:.86rem}
.button svg{width:18px;height:18px}
.primary{color:#fff;background:var(--blue)}
.primary:hover{background:#4831bc}
.secondary-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:9px}
.secondary,.icon-button{color:#283a5b;background:#f7f9fc;border:1px solid var(--border)}
.secondary:hover,.icon-button:hover{background:#eaf0f9}
.search{display:flex;align-items:center;gap:10px;background:#f5f7fb;border:1px solid #dce4f0;border-radius:11px;padding:0 12px;margin-top:14px;color:#52678a}
.search:focus-within{outline:2px solid #7591f6}
.search input{min-width:0;width:100%;padding:13px 0;border:none;outline:none;background:transparent;color:var(--ink);font-size:1rem}
.search input::placeholder{color:#60718d}
.listbar{display:flex;align-items:center;justify-content:space-between;gap:7px;margin-top:15px;color:var(--muted);font-size:.78rem;font-weight:700}
.items{display:grid;gap:7px;margin-top:9px}
.row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;padding:8px;border:1px solid var(--border);border-radius:12px}
.shelf{min-width:56px;min-height:49px;display:grid;place-content:center;text-align:center;padding:4px 6px;background:var(--pale);color:#4730b7;border-radius:8px;line-height:1}
.shelf span{font-size:.53rem;font-weight:800;letter-spacing:.12em;margin-bottom:3px}
.shelf strong{font-size:1.26rem;font-variant-numeric:tabular-nums;letter-spacing:-.045em}
.name{font-size:.93rem;overflow-wrap:anywhere;display:block}
.meta{display:flex;flex-wrap:wrap;gap:2px 7px;align-items:center;margin-top:4px;font-size:.69rem;color:var(--muted);overflow-wrap:anywhere}
.row-actions{display:flex;gap:5px}
.icon-button{display:grid;place-items:center;padding:0;width:36px;height:39px;border-radius:8px}
.icon-button svg{width:17px;height:17px}
.deliver{min-height:39px;border-radius:8px;background:#e7f8ef;color:#116148;padding:0 9px;white-space:nowrap}
.deliver:hover{background:#d3f0df}
.delete{color:#a43546}
.empty{text-align:center;border:1px dashed #d9e1ee;border-radius:12px;padding:26px 12px;margin-top:3px;color:var(--ink)}
.empty-icon{display:grid;place-items:center;background:#eee9ff;border-radius:11px;color:#5946b7;width:41px;height:41px;margin:0 auto 10px}
.empty p{font-size:.81rem;color:var(--muted);margin-top:5px}
footer{color:var(--muted);display:flex;justify-content:space-between;gap:8px;padding:20px 2px 24px;font-size:.73rem}
.toast{position:fixed;left:50%;bottom:calc(15px + env(safe-area-inset-bottom));transform:translateX(-50%);width:max-content;max-width:calc(100% - 24px);background:#111e36;color:#fff;padding:11px 15px;border-radius:11px;box-shadow:0 5px 25px #111e3644;z-index:3;font-size:.85rem}
dialog{width:min(480px,calc(100% - 24px));max-height:calc(100% - 24px);border:1px solid var(--border);color:var(--ink);border-radius:17px;padding:17px;box-shadow:0 15px 70px #111e3660}
dialog::backdrop{background:#101a30a6}
.dialog-header,.dialog-actions{display:flex;align-items:center;justify-content:space-between;gap:8px}
.dialog-actions{justify-content:flex-end;margin-top:15px}
.stats-section{margin-top:15px;padding-top:12px;border-top:1px solid var(--border)}
.stats-section h3{font-size:1rem;margin:0}
.stats-section h3 span{color:var(--muted);font-size:.85rem}
.stats-list{list-style:none;padding:0;margin:9px 0 0;display:grid;gap:6px}
.stats-list:empty{display:none}
.stats-row{grid-template-columns:auto minmax(0,1fr)}
.viewfinder{background:#111e36;border-radius:11px;margin-top:11px;position:relative;overflow:hidden}
video{display:block;width:100%;height:min(42vh,390px);object-fit:contain}
.guide{pointer-events:none;position:absolute;inset:10% 11%;border:2px dashed #a390ffcc;border-radius:15px}
.field{display:block;margin-top:13px;font-size:.83rem;font-weight:720}
.field span{color:var(--muted);font-weight:450}
.field input,.field select{display:block;width:100%;border:1px solid #cdd8e8;border-radius:8px;background:#f7f9fd;color:var(--ink);font-size:1rem;padding:9px;margin-top:5px}
.error{color:#a32335;font-size:.83rem;margin-top:10px}
.danger{background:#a62540}
.danger:hover{background:#84172d}
progress{display:block;width:100%;height:14px;margin-top:12px;accent-color:var(--blue)}
.camera-actions{display:grid;gap:7px;margin-top:13px}
.camera-actions > .button{min-height:48px}
.camera-actions .secondary-actions{margin-top:0}
.saved-dialog{text-align:center;border:1px solid #dbe8df;padding:14px}
.saved-content{background:radial-gradient(ellipse at 50% 0,#d6fae8,transparent 85%),#f1fbf5;border-radius:13px;padding:19px 13px;color:#143f32}
.saved-badge{display:grid;place-items:center;width:46px;height:46px;margin:0 auto 10px;background:#1c8058;color:#fff;border-radius:50%}
.saved-badge svg{width:26px;height:26px;stroke-width:2.4}
.saved-shelf{display:grid;gap:1px;margin:15px auto 8px}
.saved-shelf span{font-size:.74rem;letter-spacing:.14em;font-weight:800;color:#275b49}
.saved-shelf strong{color:#126343;font-size:clamp(3.6rem,16vw,6rem);line-height:1;letter-spacing:-.055em;font-variant-numeric:tabular-nums}
.saved-name{font-size:clamp(1.35rem,6vw,2.2rem);font-weight:790;line-height:1.13;overflow-wrap:anywhere;margin-top:8px}
.saved-dialog .dialog-actions{justify-content:center}
.saved-dialog .dialog-actions .button{flex:1}
.sound-toggle{display:inline-flex;align-items:center;gap:6px;color:var(--muted);background:transparent;border:0;min-height:38px;padding:5px;font-weight:650}
.sound-toggle svg{width:16px;height:16px}
.footer-actions{display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:flex-end}
footer{align-items:center;padding:12px 2px calc(18px + env(safe-area-inset-bottom))}
@media(max-width:600px){
  .shell{width:calc(100% - 20px)}
  .top{padding:calc(13px + env(safe-area-inset-top)) 0 47px}
  .mast,.brand{gap:8px}
  .brand-icon{width:36px;height:36px;border-radius:11px;flex:none}
  .brand-icon svg{width:22px;height:22px}
  .brand h1{font-size:clamp(.9rem,3.8vw,1.2rem)}
  .eyebrow{font-size:.55rem;margin-bottom:3px}
  .add-button{padding-inline:9px;gap:5px;min-height:43px;font-size:.78rem}
  .add-button svg{width:16px;height:16px}
  .overview{gap:6px}
  .metric{padding:7px;gap:3px 5px;border-radius:10px}
  .metric-icon{width:21px;height:25px;border-radius:7px}
  .metric-icon svg{width:14px;height:14px}
  .metric span{font-size:.61rem}
  .metric strong{font-size:1.24rem}
  .metric #next{font-size:.9rem}
  .panel{padding:13px;border-radius:19px}
  .row{gap:6px}
  .row-actions{display:grid;grid-template-columns:repeat(2,1fr);gap:3px}
  .deliver{grid-column:1/-1;min-height:34px;padding:0 5px;font-size:.73rem}
  .row-actions .icon-button{width:100%;height:34px}
  .shelf{min-width:43px}
  .shelf strong{font-size:1.05rem}
}