:root{color-scheme:dark;--bg:#0c1218;--panel:#151f28;--line:#293640;--text:#f3f6f8;--muted:#a4b1bb;--mint:#7cf0c4;--mint-dark:#123e35;--gold:#e5b86c}
*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 90% 0%,#1c3438 0,transparent 36%),var(--bg);color:var(--text);font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;line-height:1.45}
.topbar{display:flex;align-items:center;gap:12px;padding:calc(15px + env(safe-area-inset-top)) 20px 15px;border-bottom:1px solid #ffffff10;position:sticky;top:0;background:#0c1218eF;backdrop-filter:blur(14px);z-index:5}
.brandmark{width:42px;height:42px;border-radius:14px;background:var(--mint);color:#09221b;display:grid;place-items:center;font-weight:900;font-size:22px}.brandmark span{font-size:12px}.brand{font-weight:800;letter-spacing:-.4px;font-size:18px}.brand b{color:var(--mint)}.subtitle{font-size:11px;color:var(--muted)}.icon-button{margin-left:auto;border:1px solid var(--line);border-radius:12px;background:var(--panel);color:var(--mint);font-size:24px;width:42px;height:42px}
main{width:min(100%,680px);margin:auto;padding:0 16px 28px}.hero{padding:30px 5px 22px}.eyebrow{font-size:10px;font-weight:800;letter-spacing:1.8px;color:var(--mint)}h1{font-size:clamp(38px,10vw,58px);line-height:.99;letter-spacing:-2.5px;margin:14px 0 15px}h1 span{color:var(--mint)}.hero p{color:#bac5cc;max-width:390px;font-size:15px;margin:0 0 18px}.notice{display:flex;gap:10px;align-items:flex-start;padding:12px 13px;border:1px solid #4a624f;border-radius:13px;background:#182b26;color:#cce8dc;font-size:12px}.notice>span:first-child{font-weight:900;color:var(--mint)}
.panel{background:linear-gradient(145deg,#18232d,#121a22);border:1px solid var(--line);border-radius:22px;padding:18px;margin:14px 0;box-shadow:0 14px 38px #0002}.section-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:17px}.section-head h2{font-size:20px;margin:3px 0 0;letter-spacing:-.4px}.camera-badge,.result-icon{width:42px;height:42px;border-radius:14px;background:#203e37;color:var(--mint);display:grid;place-items:center;font-size:23px}.dropzone{min-height:190px;border:1px dashed #49605e;border-radius:17px;background:#0e171d;display:grid;place-items:center;overflow:hidden}.placeholder{display:flex;flex-direction:column;align-items:center;text-align:center;padding:26px 10px}.camera-icon{font-size:42px;color:var(--mint);margin-bottom:9px}.placeholder strong{font-size:15px}.placeholder span{font-size:12px;color:var(--muted);margin-top:5px}.preview{width:100%;max-height:360px;object-fit:contain;background:#080d11}.actions{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:12px 0 20px}.button{min-height:47px;border-radius:13px;border:1px solid transparent;padding:12px 14px;font-weight:750;font-size:13px;cursor:pointer;transition:transform .12s,opacity .12s}.button:active{transform:scale(.985)}.primary{background:var(--mint);color:#09251c}.secondary{background:#202c35;border-color:#35444e;color:#f0f5f6}.analyze{width:100%;margin-top:13px;background:linear-gradient(100deg,#7cf0c4,#a3f4d7);color:#08251d;font-size:15px}.button:disabled{opacity:.4;cursor:not-allowed}.field-label{display:block;font-size:12px;font-weight:700;margin-bottom:7px;color:#d8e1e6}textarea{width:100%;resize:vertical;background:#0d151b;color:var(--text);border:1px solid #34434d;border-radius:12px;padding:12px;font:inherit;font-size:13px;outline:none}textarea:focus{border-color:var(--mint)}.status{font-size:12px;color:var(--muted);text-align:center;margin-top:10px;min-height:18px}.status.error{color:#ff9c9c}.hidden{display:none!important}.text-button{border:0;background:transparent;color:var(--mint);font-weight:700;font-size:12px}.empty{color:var(--muted);font-size:13px;padding:12px 0}.small{font-size:11px}.muted{color:var(--muted)}.history-item{display:flex;gap:11px;align-items:center;padding:12px 0;border-bottom:1px solid #ffffff0d}.history-item:last-child{border-bottom:0}.history-thumb{width:56px;height:56px;object-fit:cover;border-radius:12px;background:#0b1217}.history-meta{min-width:0;flex:1}.history-meta strong{display:block;font-size:13px}.history-meta span{display:block;color:var(--muted);font-size:11px;margin-top:3px}.history-open{border:1px solid var(--line);background:#202c35;color:var(--mint);border-radius:10px;padding:8px;font-size:12px}
.result-main{padding:15px;border-radius:15px;background:#0f1c20;border:1px solid #2d5147;margin-bottom:12px}.result-label{font-size:10px;color:var(--mint);font-weight:800;letter-spacing:1.4px}.result-name{font-size:25px;letter-spacing:-.7px;font-weight:850;margin:5px 0}.result-desc{font-size:13px;color:#c4d0d5}.confidence-row{display:flex;justify-content:space-between;font-size:11px;color:var(--muted);margin:15px 0 6px}.bar{height:6px;background:#29373b;border-radius:10px;overflow:hidden}.bar span{display:block;height:100%;background:var(--mint);border-radius:10px}.result-section{padding:10px 0;border-bottom:1px solid #ffffff10}.result-section:last-child{border-bottom:0}.result-section h3{font-size:12px;color:var(--mint);margin:0 0 5px}.result-section p,.result-section li{font-size:12px;color:#d0d9de;margin:4px 0}.result-section ul{padding-left:18px;margin:4px 0}.warning{background:#302719;border-color:#6a5230;color:#f0dfbd;margin:14px 0}.warning>span:first-child{color:var(--gold)}.full{width:100%}.materials{padding:22px 4px}.material-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-top:14px}.material-chip{border:1px solid var(--line);background:#141e26;border-radius:12px;padding:11px 12px;display:flex;align-items:center;gap:9px;font-size:12px}.swatch{width:11px;height:11px;border-radius:50%;display:inline-block}.copper{background:#bd6b43}.brass{background:#d7ad43}.bronze{background:#95633c}.aluminium{background:#c3ccd1}.iron{background:#737f89}.gold{background:#f3cf64}.silver{background:#dce1e3}.other{background:#7cf0c4}footer{text-align:center;padding:22px 16px calc(26px + env(safe-area-inset-bottom));border-top:1px solid #ffffff10;color:var(--muted);font-size:11px}footer p{margin:5px auto 0;max-width:300px}
@media(min-width:600px){main{padding-left:24px;padding-right:24px}.hero{padding-top:42px}.panel{padding:24px}.material-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}