html{scroll-behavior:smooth}body{min-width:320px;min-height:100vh}:root{--bg:#f6f3ec;--panel:#fff;--text:#231f20;--muted:#6f675d;--primary:#e3350d;--primary-dark:#b92708;--border:#e3dbcf;--soft:#fff7ef;--shadow:0 18px 40px #231f2014}*{box-sizing:border-box}body{background:radial-gradient(circle at top left, #e3350d1f, transparent 32rem), var(--bg);color:var(--text);margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}button,input{font:inherit}h1,h2,h3,p{margin-top:0}.app{width:min(1480px,100% - 48px);margin:0 auto;padding:56px 0}.intro-section{max-width:760px;margin-bottom:36px}.eyebrow{color:var(--primary);letter-spacing:.12em;text-transform:uppercase;margin:0 0 10px;font-size:.82rem;font-weight:800}h1{letter-spacing:-.07em;margin-bottom:14px;font-size:clamp(2.7rem,7vw,5.6rem);line-height:.95}h2{margin-bottom:10px;font-size:1.35rem}h3{margin-bottom:10px}.intro-text{max-width:680px;color:var(--muted);font-size:1.08rem;line-height:1.7}.tool-layout{grid-template-columns:minmax(340px,420px) minmax(0,1fr);align-items:start;gap:24px;display:grid}.upload-panel,.preview-panel,.result-panel{border:1px solid var(--border);box-shadow:var(--shadow);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#ffffffd1;border-radius:26px;padding:24px}.upload-panel{grid-row:span 2;position:sticky;top:24px}.upload-panel p,.preview-card p{color:var(--muted);line-height:1.6}.upload-grid{gap:14px;margin:22px 0;display:grid}.upload-box{border:1.5px dashed var(--border);background:var(--soft);cursor:pointer;border-radius:20px;gap:12px;padding:18px;transition:border-color .16s,transform .16s,background .16s;display:grid}.upload-box:hover{border-color:var(--primary);background:#fff2e7;transform:translateY(-1px)}.upload-box span{font-weight:800}.upload-box input{width:100%;color:var(--muted)}.primary-button{background:var(--primary);color:#fff;cursor:pointer;border:0;border-radius:999px;width:100%;padding:14px 18px;font-weight:800;transition:background .16s,transform .16s,opacity .16s}.primary-button:hover:not(:disabled){background:var(--primary-dark);transform:translateY(-1px)}.primary-button:disabled{cursor:not-allowed;opacity:.45}.error-message{color:var(--primary-dark);margin:14px 0 0;font-size:.92rem;font-weight:700;line-height:1.5}.preview-grid{grid-template-columns:repeat(2,1fr);gap:14px;display:grid}.preview-card{border:1px solid var(--border);background:#fffaf5;border-radius:22px;min-height:280px;padding:16px}.preview-card img{object-fit:contain;background:#f0ebe4;border-radius:16px;width:100%;max-height:420px;display:block}.result-panel{color:#fff;background:#231f20}.result-panel h2{color:#fff}.result-card{background:#ffffff12;border:1px solid #ffffff24;border-radius:20px;padding:18px}.result-card p{color:#ffffffb8;line-height:1.6}.result-label{letter-spacing:.1em;text-transform:uppercase;margin-bottom:8px;font-size:.78rem;font-weight:900;color:#ffcb05!important}.result-stack{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;display:grid}.result-stack>.detected-card-layout,.result-stack>.disclaimer-box,:is(.result-stack>.result-card:has(.matches-grid),.result-stack>.result-card:has(.manual-search-grid)){grid-column:1/-1}.loading-card{overflow:hidden}.loading-bar{background:#ffffff24;border-radius:999px;height:8px;margin-top:18px;position:relative;overflow:hidden}.loading-bar span{background:#ffcb05;border-radius:999px;width:42%;animation:1.15s ease-in-out infinite loading-slide;position:absolute;inset:0}@keyframes loading-slide{0%{transform:translate(-110%)}to{transform:translate(260%)}}.detected-card-layout{grid-template-columns:112px 1fr;align-items:start;gap:18px;display:grid}.database-image-frame{width:112px}.database-card-image{object-fit:contain;background:#ffffff1f;border-radius:12px;width:100%;max-height:170px;display:block}.database-card-placeholder{color:#ffffff7a;text-align:center;background:#ffffff0f;border:1px dashed #ffffff38;border-radius:14px;place-items:center;min-height:156px;padding:12px;font-size:.76rem;font-weight:800;line-height:1.35;display:grid}.detected-card-content h3{margin-bottom:12px;font-size:1.35rem;line-height:1.18}.card-meta-list{gap:4px;margin-bottom:14px;display:grid}.card-meta-list p{margin:0}.confidence-row{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.confidence-pill{color:#ffcb05;background:#ffcb0524;border-radius:999px;width:fit-content;padding:7px 11px;font-size:.86rem;font-weight:950;display:inline-flex}.confidence-text{color:#ffffff9e;font-size:.86rem;font-weight:700}.matches-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:14px;display:grid}.match-card{color:#fff;text-align:left;cursor:pointer;background:#ffffff0f;border:1px solid #ffffff24;border-radius:16px;align-content:start;gap:8px;width:100%;padding:12px;transition:transform .16s,border-color .16s,background .16s;display:grid}.match-card:hover{background:#ffffff1a;border-color:#ffcb058c;transform:translateY(-1px)}.match-card img{object-fit:contain;border-radius:8px;width:72px;max-height:100px}.match-name{font-size:.95rem;font-weight:900;line-height:1.25}.match-meta,.match-rarity{color:#ffffffa8;font-size:.78rem;line-height:1.35}.match-strength,.match-source{color:#ffffffad;width:fit-content;font-size:.72rem;font-weight:800;line-height:1.3}.match-strength{text-transform:capitalize;border-radius:999px;padding:5px 8px}.match-strength.strong{color:#7df0a0;background:#49d67826}.match-strength.medium{color:#ffcb05;background:#ffcb0524}.match-strength.weak{color:#ff9b82;background:#e3350d24}.match-action{color:#ffcb05;background:#ffcb051f;border-radius:999px;width:fit-content;margin-top:4px;padding:6px 9px;font-size:.74rem;font-weight:900}.selected-match{background:#ffcb051a;border-color:#ffcb05cc}.collapsible-card{padding:0;overflow:hidden}.section-toggle{color:#fff;text-align:left;cursor:pointer;background:0 0;border:0;justify-content:space-between;align-items:center;gap:16px;width:100%;padding:18px;display:flex}.section-toggle span:first-child{gap:4px;display:grid}.section-toggle .result-label{margin-bottom:0}.section-toggle strong{color:#fff;font-size:1rem}.toggle-icon{color:#ffcb05;background:#ffcb0524;border-radius:999px;flex:none;place-items:center;width:32px;height:32px;font-size:1.2rem;font-weight:950;display:grid}.collapsible-card>p,.collapsible-card>.matches-grid,.collapsible-card>.manual-search-grid,.collapsible-card>.manual-search-message,.collapsible-card>.manual-matches-grid{margin-left:18px;margin-right:18px}.collapsible-card>p{margin-top:0}.collapsible-card>.matches-grid,.collapsible-card>.manual-matches-grid{margin-bottom:18px}.collapsible-card>.manual-search-grid{margin-bottom:0}.manual-search-grid{grid-template-columns:1fr 1fr;gap:10px;margin-top:14px;display:grid}.manual-search-grid input{color:#fff;background:#ffffff14;border:1px solid #ffffff29;border-radius:14px;outline:none;width:100%;padding:11px 12px}.manual-search-grid input::placeholder{color:#ffffff73}.manual-search-grid input:focus{border-color:#ffcb05a6}.secondary-button{color:#ffcb05;cursor:pointer;background:#ffcb051f;border:1px solid #ffcb0559;border-radius:999px;grid-column:1/-1;padding:12px 14px;font-weight:900;transition:transform .16s,background .16s,opacity .16s}.secondary-button:hover:not(:disabled){background:#ffcb052e;transform:translateY(-1px)}.secondary-button:disabled{cursor:not-allowed;opacity:.55}.manual-search-message{color:#ffffffad;margin:12px 0 0;font-size:.9rem;line-height:1.5}.manual-matches-grid{margin-top:14px}.grade-score-row{align-items:baseline;gap:6px;margin:6px 0 10px;display:flex}.grade-score{color:#ffcb05;letter-spacing:-.06em;font-size:3rem;font-weight:950;line-height:1}.grade-out-of{color:#ffffffa6;font-size:1.1rem;font-weight:800}.breakdown-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:18px;display:grid}.breakdown-item{background:#ffffff0e;border:1px solid #ffffff1f;border-radius:16px;padding:12px}.breakdown-header{color:#fff;justify-content:space-between;gap:12px;margin-bottom:8px;font-size:.92rem;font-weight:900;display:flex}.breakdown-header strong{color:#ffcb05}.breakdown-bar{background:#ffffff21;border-radius:999px;height:7px;margin-bottom:8px;overflow:hidden}.breakdown-bar span{border-radius:inherit;background:#ffcb05;height:100%;display:block}.breakdown-item p{margin:0;font-size:.82rem;line-height:1.45}.notes-list{color:#ffffffc2;gap:8px;margin:14px 0 0;padding-left:20px;line-height:1.5;display:grid}.photo-quality-box{background:#ffffff12;border-radius:18px;padding:14px 16px}.photo-quality-box h3{margin-bottom:10px}.photo-quality-box.positive{background:#49d6781a;border:1px solid #49d67859}.photo-quality-box.neutral{background:#ffcb0517;border:1px solid #ffcb0547}.photo-quality-box.warning{background:#e3350d1c;border:1px solid #e3350d59}.quality-subtitle{margin:12px 0 6px;font-size:.86rem;font-weight:900;color:#fff!important}.quality-list{color:#ffffffc2;gap:6px;margin:0;padding-left:20px;line-height:1.45;display:grid}.recommendation-box{background:#ffffff12;border-radius:18px;padding:14px 16px}.recommendation-box h3{margin-bottom:8px}.recommendation-box p{margin:0}.recommendation-box.positive{background:#49d6781a;border:1px solid #49d67859}.recommendation-box.neutral{background:#ffcb0517;border:1px solid #ffcb0547}.recommendation-box.warning{background:#e3350d1c;border:1px solid #e3350d59}.link-grid{grid-template-columns:repeat(2,1fr);gap:10px;display:grid}.link-grid a{color:#fff;text-align:center;background:#ffffff17;border:1px solid #ffffff29;border-radius:999px;justify-content:center;padding:11px 12px;font-size:.88rem;font-weight:800;text-decoration:none;transition:transform .16s,background .16s,border-color .16s;display:inline-flex}.link-grid a:hover{background:#ffcb0521;border-color:#ffcb0599;transform:translateY(-1px)}.disclaimer-box{color:#ffffffc7;background:#ffcb051a;border:1px solid #ffcb0540;border-radius:18px;padding:14px 16px;font-size:.9rem;line-height:1.5}@media (width<=1100px){.tool-layout{grid-template-columns:1fr}.upload-panel{grid-row:auto;position:static}.result-stack{grid-template-columns:1fr}:is(.result-stack>.detected-card-layout,.result-stack>.disclaimer-box,.result-stack>.result-card:has(.matches-grid),.result-stack>.result-card:has(.manual-search-grid)){grid-column:auto}.matches-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (width<=850px){.app{width:min(100% - 32px,1180px);padding:36px 0}.preview-grid{grid-template-columns:1fr}}@media (width<=520px){.detected-card-layout{grid-template-columns:1fr}.database-image-frame{width:128px}.manual-search-grid,.matches-grid,.link-grid,.breakdown-grid{grid-template-columns:1fr}}