:root { --ink:#172029; --muted:#637080; --line:#dce2e5; --cream:#f5f2ec; --card:#fff; --teal:#006f68; --lime:#c9ee79; --coral:#ff7d63; }
* { box-sizing:border-box; }
body { margin:0; background:var(--cream); color:var(--ink); font:16px/1.5 Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.topbar { height:72px; display:flex; align-items:center; gap:32px; padding:0 max(24px,calc((100vw - 1180px)/2)); border-bottom:1px solid var(--line); background:rgba(255,255,255,.72); }
.brand { color:var(--ink); text-decoration:none; font-size:20px; font-weight:800; letter-spacing:-.5px; margin-right:auto; }.brand span { display:inline-grid; place-items:center; width:28px; height:28px; margin-right:7px; border-radius:8px; background:var(--teal); color:var(--lime); font-size:11px; }
nav { display:flex; gap:6px; }.nav-link { text-decoration:none; color:var(--muted); padding:7px 10px; border-radius:8px; font-size:14px; font-weight:700; }.nav-link.active { color:var(--ink); background:#e5e9e8; }.count { display:inline-grid; place-items:center; margin-left:4px; min-width:18px; height:18px; border-radius:9px; background:var(--teal); color:white; font-size:11px; }
.local-badge { border:1px solid #b9d7ce; border-radius:999px; padding:5px 10px; color:#27685c; background:#edf8f3; font-size:12px; font-weight:700; }.new-item-button,.language-button,.account-button { border:0; border-radius:8px; padding:8px 11px; cursor:pointer; background:var(--teal); color:white; font:inherit; font-size:13px; font-weight:800; }.language-button{background:#e5e9e8;color:var(--teal)}.account-button{background:#172029}
main { max-width:1180px; margin:auto; padding:72px 24px; }.hero { max-width:860px; }.eyebrow { margin:0 0 10px; color:var(--teal); font-size:12px; font-weight:800; letter-spacing:1.2px; }.hero h1,.collection h1 { margin:0; max-width:780px; font-size:clamp(42px,6vw,76px); letter-spacing:-4px; line-height:.98; }.intro { max-width:570px; margin:22px 0; color:var(--muted); font-size:20px; }.demo-note { max-width:650px; margin:28px 0; padding:13px 16px; border-left:4px solid var(--coral); background:#fff2ef; color:#774235; font-size:14px; }
.landing{min-height:calc(100vh - 216px);display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:64px}.landing-copy h1{margin:0;max-width:720px;font-size:clamp(48px,7vw,86px);letter-spacing:-5px;line-height:.92}.landing-intro{max-width:630px;margin:28px 0;color:var(--muted);font-size:20px}.landing-actions{display:flex;flex-wrap:wrap;gap:12px}.landing-primary,.landing-secondary{border:0;border-radius:10px;padding:15px 19px;cursor:pointer;font:inherit;font-weight:800}.landing-primary{background:var(--teal);color:#fff}.landing-primary span{font-size:20px;margin-left:6px}.landing-secondary{border:1px solid var(--teal);background:transparent;color:var(--teal)}.landing-trust{color:#4c625f;font-size:13px;font-weight:700}.landing-showcase{padding:18px;border:1px solid #b9d7ce;border-radius:24px;background:linear-gradient(145deg,#eaf8f4,#fff);box-shadow:0 25px 60px rgba(0,111,104,.14)}.showcase-top{display:flex;align-items:center;gap:9px;padding:7px 5px 16px}.showcase-top>span{display:grid;place-items:center;width:30px;height:30px;border-radius:8px;background:var(--teal);color:var(--lime);font-size:11px;font-weight:900}.showcase-top small{margin-left:auto;color:#27685c;font-size:10px;font-weight:800;letter-spacing:.8px}.showcase-cards{display:grid;gap:10px}.showcase-cards article{display:flex;align-items:center;gap:12px;padding:13px;border-radius:14px;background:#fff;box-shadow:0 8px 16px rgba(23,32,41,.05)}.showcase-cards article>div{display:grid;gap:2px;margin-right:auto}.showcase-cards small{color:var(--muted);font-size:12px}.showcase-cards strong{color:#27685c;font-size:11px}.showcase-footer{display:flex;justify-content:space-between;margin-top:16px;padding:12px;color:var(--muted);font-size:13px}.showcase-footer strong{color:var(--teal)}
.valuation-form { display:grid; grid-template-columns:2fr 1fr 1fr 1.3fr; gap:12px; padding:20px; border:1px solid var(--line); border-radius:18px; background:var(--card); box-shadow:0 14px 35px rgba(23,32,41,.06); }.valuation-form label { display:grid; gap:6px; color:var(--muted); font-size:12px; font-weight:800; }.valuation-form select,.valuation-form input:not([type="file"]) { width:100%; border:1px solid #cbd4d7; border-radius:9px; padding:11px 9px; background:white; color:var(--ink); font:inherit; font-size:14px; }.valuation-form label small { color:var(--muted); font-size:11px; font-weight:500; }.photo-input { grid-column:1/3; }.photo-input span { color:var(--teal); }.photo-preview { display:flex; align-items:center; gap:9px; grid-column:3/-1; color:var(--muted); font-size:12px; font-weight:700; }.photo-preview img { width:56px; height:56px; border:1px solid var(--line); border-radius:10px; object-fit:cover; }.valuation-form button,.secondary { grid-column:1/-1; display:flex; justify-content:center; align-items:center; gap:8px; border:0; border-radius:10px; padding:14px; cursor:pointer; background:var(--teal); color:white; font:inherit; font-size:15px; font-weight:800; }.valuation-form button span { font-size:20px; }
.private-notes{grid-column:1/-1}.private-notes textarea{width:100%;resize:vertical;border:1px solid #cbd4d7;border-radius:9px;padding:10px;background:white;font:inherit}.private-notes span{color:var(--teal)}
.result-panel { display:grid; grid-template-columns:1.4fr 1fr; gap:28px; margin-top:42px; padding:34px; border-radius:20px; background:var(--ink); color:white; }.hidden { display:none!important; }.result-copy h2 { margin:0; font-size:30px; letter-spacing:-1px; }.result-copy p { color:#bdc7cc; }.disclaimer { max-width:470px; margin-top:30px; font-size:13px; }.result-photo { align-self:start; display:grid; gap:8px; color:#aebcc3; font-size:11px; }.result-photo img { width:100%; max-width:170px; aspect-ratio:1; border-radius:14px; object-fit:cover; }.price-block { align-self:start; padding:23px; border-radius:14px; background:#25333d; }.price-block>span,.price-block small { color:#aebcc3; font-size:13px; }.price-block strong { display:block; margin:7px 0 11px; color:var(--lime); font-size:31px; letter-spacing:-1.5px; }.confidence { display:flex; align-items:center; gap:7px; font-size:14px; font-weight:700; }.dot { width:9px; height:9px; border-radius:50%; background:var(--lime); }.method { grid-column:1/-1; border-top:1px solid #3a4750; padding-top:20px; }.method h3 { margin:0 0 8px; font-size:14px; }.method ol { display:flex; gap:30px; margin:0; padding-left:18px; color:#bdc7cc; font-size:13px; }.add-to-collection { margin-top:22px; border:1px solid #78bdb2; border-radius:9px; padding:11px 15px; cursor:pointer; background:var(--teal); color:white; font:inherit; font-size:14px; font-weight:800; }.add-to-collection span { margin-left:5px; font-size:18px; }.add-hint { margin:8px 0 0; color:#aebcc3; font-size:12px; }
.collection-heading { display:flex; align-items:end; justify-content:space-between; gap:24px; }.collection-heading h1 { font-size:52px; }.collection-actions{display:flex;align-items:center;gap:12px}.view-toggle{display:flex;padding:3px;border:1px solid var(--line);border-radius:9px;background:white}.view-toggle button{border:0;border-radius:6px;padding:7px 9px;background:transparent;color:var(--muted);font:inherit;font-size:12px;font-weight:800;cursor:pointer}.view-toggle button.active{background:#e5e9e8;color:var(--ink)}.secondary { width:auto; padding:12px 15px; background:transparent; color:var(--teal); border:1px solid var(--teal); }.portfolio-grid { display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:14px; margin:34px 0 18px; }.portfolio-grid article { padding:22px; border:1px solid var(--line); border-radius:14px; background:white; }.portfolio-grid span,.portfolio-grid small { display:block; color:var(--muted); font-size:13px; }.portfolio-grid strong { display:block; margin:7px 0; font-size:34px; letter-spacing:-1.5px; }.portfolio-total { background:var(--teal)!important; border-color:var(--teal)!important; color:white; }.portfolio-total span,.portfolio-total small { color:#bfe2d9!important; }.portfolio-total strong { color:var(--lime); }.positive { color:#16826a; }.collection-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:18px}.collection-card{display:grid;gap:9px;padding:18px;border:1px solid var(--line);border-radius:16px;background:white}.collection-card h2{margin:4px 0 0;font-size:19px;letter-spacing:-.5px}.collection-card p,.collection-card small{margin:0;color:var(--muted);font-size:13px}.collection-card strong{font-size:25px;color:var(--teal)}.big{width:100%;height:140px;border-radius:11px;font-size:24px}
.catalogue-toolbar{display:flex;justify-content:space-between;gap:14px;margin-top:28px}.catalogue-toolbar input{min-width:280px;border:1px solid var(--line);border-radius:9px;padding:11px 12px;font:inherit}.collection-card .private-note{margin-top:5px;padding-top:9px;border-top:1px solid var(--line);color:#4c625f;font-size:12px}
.collection-table-wrap { overflow:auto; border:1px solid var(--line); border-radius:14px; background:white; } table { width:100%; border-collapse:collapse; text-align:left; } th,td { padding:12px 20px; border-bottom:1px solid var(--line); } th { color:var(--muted); font-size:12px; letter-spacing:.6px; text-transform:uppercase; } td { font-size:14px; } tr:last-child td { border:0; }.photo-placeholder,.collection-photo { display:grid; place-items:center; width:38px; height:38px; border-radius:9px; background:#e5e9e8; color:var(--teal); font-size:11px; font-weight:800; }.collection-photo { object-fit:cover; }.type-tag,.confidence-tag { display:inline-block; padding:4px 8px; border-radius:999px; font-size:12px; font-weight:800; white-space:nowrap; }.console { background:#d9f1ed; color:#12645d; }.game { background:#e9f7cf; color:#4e6d16; }.accessory { background:#eee8ff; color:#6642a3; }.high { background:#e9f7cf; color:#4e6d16; }.medium { background:#fff1d6; color:#93600b; }.pending { background:#e5e9e8; color:#4f5c68; }.row-actions { white-space:nowrap; }.row-actions button { margin-right:6px; border:1px solid var(--line); border-radius:7px; padding:6px 8px; cursor:pointer; background:white; color:var(--teal); font:inherit; font-size:12px; font-weight:800; }.row-actions .delete-item { color:#a23825; border-color:#f1c7be; }.row-actions .delete-item[data-confirm="true"] { background:#a23825; color:white; border-color:#a23825; }
.account-dialog{width:min(560px,calc(100% - 32px));border:0;border-radius:18px;padding:28px;background:#fff;box-shadow:0 24px 80px rgba(0,0,0,.28)}.account-dialog::backdrop{background:rgba(23,32,41,.5)}.account-dialog-head{display:flex;justify-content:space-between;gap:18px}.account-dialog h2{margin:0;font-size:28px;letter-spacing:-1px;line-height:1.05}.dialog-close{align-self:start;border:0;border-radius:8px;width:34px;height:34px;cursor:pointer;background:#e5e9e8;color:var(--ink);font-size:24px}.account-intro,.account-privacy{color:var(--muted);font-size:14px}.account-form{display:grid;gap:14px;margin-top:20px}.account-form label{display:grid;gap:6px;color:var(--muted);font-size:12px;font-weight:800}.account-form input{width:100%;border:1px solid #cbd4d7;border-radius:9px;padding:11px;background:white;color:var(--ink);font:inherit;font-size:14px}.account-submit,.account-signout,.account-mode{border:0;border-radius:10px;padding:13px;cursor:pointer;background:var(--teal);color:white;font:inherit;font-size:14px;font-weight:800}.account-mode{background:white;color:var(--teal);border:1px solid var(--teal)}.account-signout{background:#fff;color:#a23825;border:1px solid #f1c7be}.account-status{min-height:20px;margin:0;color:#176d55;font-size:13px;font-weight:700}.account-privacy{margin:18px 0 0;padding-top:15px;border-top:1px solid var(--line);font-size:12px}
@media (max-width:760px) { .topbar{gap:10px;height:auto;padding:16px 20px;flex-wrap:wrap}.local-badge{display:none}.brand{margin-right:0}.valuation-form,.result-panel,.portfolio-grid,.landing{grid-template-columns:1fr}.method ol{display:block}.method li{margin:6px 0}.collection-heading{align-items:start;flex-direction:column}.collection-heading h1{font-size:42px}.topbar nav{order:3;width:100%}.landing{min-height:auto;gap:32px}.landing-copy h1{font-size:54px} }
.collection-empty{grid-column:1/-1;margin:0;padding:34px;border:1px dashed #b9d7ce;border-radius:16px;background:#edf8f3;color:#27685c;text-align:center;font-weight:700}