:root { color-scheme: dark; font-family: Inter, system-ui, sans-serif; background: #0b1020; color: #eef2ff; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at top left, #233460, transparent 42%), #0b1020; }
.desktop-shell { min-height: 100vh; display: grid; grid-template-columns: minmax(320px, 420px) minmax(400px, 1fr); gap: 24px; padding: 32px; align-items:start; }
.panel, .phone-shell { background: rgba(18, 27, 49, .93); border: 1px solid #344261; border-radius: 24px; padding: 32px; box-shadow: 0 24px 70px #0007; }
h1 { font-size: clamp(2rem, 5vw, 3.4rem); line-height: 1; margin: 8px 0 18px; } h2 { margin: 4px 0 0; }
p { color: #b9c3d9; line-height: 1.55; }.eyebrow { color: #7dd3fc; font-weight: 800; letter-spacing: .14em; font-size: .75rem; margin: 0; }
.qr { display: block; width: min(270px, 100%); margin: 26px auto 18px; border: 12px solid white; border-radius: 16px; }
.phone-url { color: #7dd3fc; display: block; overflow-wrap: anywhere; text-align: center; }.hint { font-size: .85rem; text-align: center; }
.result-heading { display: flex; justify-content: space-between; gap: 20px; align-items: start; }.status { border-radius: 999px; padding: 8px 14px; font-size: .8rem; font-weight: 700; }.waiting { background: #334155; }.received { background: #065f46; color: #a7f3d0; }
.session-heading { display:flex;justify-content:space-between;gap:20px;align-items:start; }.session-summary { display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:18px 0 8px; }.session-summary article { display:grid;gap:7px;background:#0f172a;border:1px solid #334155;border-radius:14px;padding:14px; }.session-summary span { color:#aab6cc;font-size:.78rem; }.session-summary strong { color:#86efac;font-size:1.45rem; }.session-note{font-size:.8rem}.session-history{margin:16px 0 28px}.session-history summary{cursor:pointer;font-weight:800;color:#7dd3fc}.session-history #session-list{display:grid;gap:8px;margin-top:10px}.session-history article{display:flex;justify-content:space-between;gap:12px;background:#0f172a;border-radius:10px;padding:10px;font-size:.8rem}.session-history article span{color:#aab6cc}
.empty-state { min-height: 420px; margin-top: 24px; display: grid; place-items: center; border: 2px dashed #344261; border-radius: 18px; color: #8290aa; }
.latest-image { display: block; max-width: 100%; max-height: 65vh; margin: 24px auto 0; border-radius: 16px; object-fit: contain; }.hidden { display: none !important; }.timestamp, .recognition-note { font-size: .9rem; }
.phone-body { padding: 20px; }.phone-shell { max-width: 560px; margin: 20px auto; } form { display: grid; gap: 14px; margin-top: 28px; } label { font-weight: 700; }
select, button, .capture-button { width: 100%; border: 0; border-radius: 14px; padding: 16px; font: inherit; } select { background: #1e293b; color: white; border: 1px solid #475569; }.capture-button { display: block; text-align: center; background: #0e7490; cursor: pointer; margin-top: 8px; } input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; } button { background: #38bdf8; color: #082f49; font-weight: 900; cursor: pointer; } button:disabled { opacity: .45; cursor: default; }.preview { width: 100%; max-height: 52vh; object-fit: contain; border-radius: 14px; background: #070b14; }.message { min-height: 24px; margin: 0; }.success { color: #86efac; }.error { color: #fca5a5; }
.detection { border-radius: 12px; padding: 12px 14px; background: #26344d; color: #dbeafe; line-height: 1.4; }.detection.detected { background: #064e3b; color: #a7f3d0; }.detection.not-detected { background: #422006; color: #fde68a; }
.live-shell { display:grid; gap:14px; }.camera-stage { position:relative; overflow:hidden; border-radius:18px; background:#020617; aspect-ratio:3/4; }.camera-stage video { width:100%;height:100%;object-fit:cover; }.card-guide { position:absolute;inset:8% 12%;border:3px solid #7dd3fc;border-radius:18px;box-shadow:0 0 0 999px #0005; }.card-guide span { position:absolute;inset:8px;border:1px dashed #fff8;border-radius:12px; }.secondary { background:#334155;color:#e2e8f0; }.scan-result { display:grid;gap:4px;background:#172554;border:1px solid #3b82f6;padding:16px;border-radius:14px; }.scan-result strong{font-size:1.25rem}.scan-result span{color:#bfdbfe}
.history-panel { grid-column:1/-1; }.history-list { display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px;margin-top:18px; }.history-card { display:flex;gap:12px;background:#0f172a;border:1px solid #334155;border-radius:14px;padding:10px; }.history-card img { width:58px;height:82px;object-fit:cover;border-radius:7px; }.history-card div { min-width:0;display:flex;flex-direction:column;gap:5px; }.history-card strong { white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }.history-card span { color:#aab6cc;font-size:.78rem; }
.collection-link { display:inline-block;background:#38bdf8;color:#082f49;text-decoration:none;font-weight:900;border-radius:12px;padding:12px 16px;margin-top:12px; }.collection-shell{max-width:1400px;margin:auto;padding:32px}.collection-header{display:flex;justify-content:space-between;align-items:center;gap:20px}.summary-grid{display:grid;grid-template-columns:repeat(3,minmax(180px,320px));gap:16px;margin:24px 0}.summary-card{background:#172554;border:1px solid #3b82f6;border-radius:18px;padding:20px;display:grid;gap:8px}.summary-card span{color:#bfdbfe}.summary-card strong{font-size:2rem}.collection-controls{display:grid;grid-template-columns:minmax(250px,2fr) 1fr 1fr;gap:16px}.collection-controls>div{display:grid;gap:8px}.collection-controls input{background:#1e293b;color:white;border:1px solid #475569;border-radius:14px;padding:16px;font:inherit}.search-wrap{position:relative}.suggestions{position:absolute;z-index:5;top:76px;left:0;right:0;background:#0f172a;border:1px solid #475569;border-radius:12px;overflow:hidden;box-shadow:0 16px 35px #0009}.suggestions button{display:block;width:100%;text-align:left;background:none;color:#e2e8f0;border:0;border-bottom:1px solid #26344d;border-radius:0;padding:12px 14px}.suggestions button:hover{background:#1e3a5f}.result-count{margin:22px 0 10px}.collection-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:16px}.collection-item{display:flex;gap:16px;background:#121b31;border:1px solid #344261;border-radius:18px;padding:14px;color:#eef2ff;text-align:left;width:100%;position:relative}.collection-group{cursor:pointer}.collection-group:hover{border-color:#38bdf8;transform:translateY(-2px)}.collection-item img{width:105px;height:150px;object-fit:cover;border-radius:10px;background:#020617}.collection-item div{display:flex;flex-direction:column;min-width:0}.collection-item h2{font-size:1.05rem;margin:3px 0 7px}.collection-item p{font-size:.82rem;margin:2px 0}.collection-item strong{color:#86efac;margin-top:auto}.collection-item small{color:#7f8da7;margin-top:6px}.quantity-badge{position:absolute;top:8px;left:8px;z-index:2;background:#0284c7;color:white;border-radius:999px;padding:6px 9px;font-weight:900;box-shadow:0 4px 12px #0009}.group-total{color:#bfdbfe;font-size:.82rem;margin-top:3px}
.card-detail{width:min(820px,calc(100% - 28px));max-height:90vh;overflow:auto;background:#121b31;color:#eef2ff;border:1px solid #475569;border-radius:22px;padding:28px;box-shadow:0 30px 100px #000}.card-detail::backdrop{background:#020617cc}.detail-close{position:absolute;right:14px;top:12px;width:44px;padding:8px;background:#334155;color:white;font-size:1.3rem}.detail-header{display:flex;gap:22px;align-items:flex-start;padding-right:38px}.detail-header img{width:150px;max-height:215px;object-fit:cover;border-radius:12px}.detail-header h1{font-size:2rem}.detail-current{display:grid;grid-template-columns:1fr 1.5fr;gap:8px 18px;background:#0f172a;border-radius:14px;padding:16px;margin:20px 0}.detail-current span{color:#94a3b8}.detail-editor{display:grid;grid-template-columns:1fr 1fr;gap:10px 14px;align-items:end}.detail-editor label:first-child,.detail-editor select:first-of-type{grid-column:1/-1}.detail-editor input{background:#1e293b;color:white;border:1px solid #475569;border-radius:14px;padding:16px;font:inherit}.detail-editor .message{grid-column:1/-1}.copy-grid{display:flex;gap:10px;overflow-x:auto}.copy-grid img{width:90px;height:128px;object-fit:cover;border-radius:8px}
@media(max-width:700px){.collection-shell{padding:16px}.collection-header{align-items:flex-start}.summary-grid{grid-template-columns:1fr}.collection-controls{grid-template-columns:1fr}.collection-item img{width:90px;height:128px}.detail-header{display:block}.detail-header img{width:120px}.detail-editor{grid-template-columns:1fr}.detail-editor>*{grid-column:1!important}}
@media (max-width: 800px) { .desktop-shell { grid-template-columns: 1fr; padding: 16px; }.panel { padding: 24px; }.empty-state { min-height: 280px; } }
.collection-controls { grid-template-columns:minmax(250px,2fr) repeat(4,1fr); }
.quantity-editor { display:grid;grid-template-columns:1fr 1fr;gap:10px 14px;align-items:end;background:#0f172a;border-radius:14px;padding:16px;margin:0 0 20px; }
.quantity-editor label,.quantity-editor .message { grid-column:1/-1; }
.quantity-editor input { background:#1e293b;color:white;border:1px solid #475569;border-radius:14px;padding:16px;font:inherit; }
.danger { background:#b91c1c;color:white; }
@media(max-width:900px){.collection-controls{grid-template-columns:1fr 1fr}}
@media(max-width:700px){.collection-controls,.quantity-editor{grid-template-columns:1fr}.quantity-editor>*{grid-column:1!important}}
.scan-hint { margin-top:4px;font-size:.85rem; }
.copy-button { flex:0 0 auto;width:auto;padding:0;background:none;border:2px solid transparent;border-radius:10px;overflow:hidden; }
.copy-button:hover,.copy-button:focus-visible { border-color:#38bdf8; }
.copy-button img { display:block; }
.scan-viewer { width:100vw;height:100vh;max-width:none;max-height:none;margin:0;padding:20px;border:0;background:#020617ed;overflow:auto; }
.scan-viewer::backdrop { background:#020617ed; }
.scan-viewer img { display:block;max-width:calc(100vw - 40px);max-height:calc(100vh - 40px);width:auto;height:auto;margin:auto;object-fit:contain; }
.scan-close { position:fixed;z-index:3;right:20px;top:20px;width:48px;padding:9px;background:#334155;color:white;font-size:1.35rem;box-shadow:0 5px 20px #000; }
.manual-market { background:#172554;border:1px solid #3b82f6;border-radius:14px;padding:18px;margin:0 0 20px; }.manual-market h2{margin:0 0 6px}.market-links{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}.market-links a{background:#0e7490;color:white;text-decoration:none;border-radius:10px;padding:10px 12px;font-weight:800;font-size:.85rem}.manual-price-row{display:grid;grid-template-columns:1fr auto;gap:10px;margin-top:8px}.manual-price-row input{background:#0f172a;color:white;border:1px solid #475569;border-radius:12px;padding:13px;font:inherit}