:root{--bg: #f8f9fc;--surface: #ffffff;--border: #e2e6ef;--text-primary: #1a1a2e;--text-secondary: #6b7280;--text-muted: #9ca3af;--accent: #6366f1;--accent-subtle: rgba(99, 102, 241, .1);--radius-sm: 6px;--radius-md: 10px;--radius-lg: 16px;--shadow-md: 0 4px 12px rgba(0, 0, 0, .08);--font-sans: "DM Sans", system-ui, sans-serif;--font-mono: "SF Mono", "Fira Code", monospace}*,*:before,*:after{box-sizing:border-box}html{font-size:16px;-webkit-font-smoothing:antialiased}body{margin:0;font-family:var(--font-sans);background:var(--bg);color:var(--text-primary);line-height:1.5}#root{min-height:100vh}button{font-family:inherit}.upload__dropzone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:56px 32px;border:2px dashed var(--border);border-radius:var(--radius-lg);background:var(--surface);cursor:pointer;transition:border-color .2s,background .2s}.upload__dropzone:hover,.upload__dropzone--active{border-color:var(--accent);background:var(--accent-subtle)}.upload__icon{color:var(--accent);margin-bottom:4px}.upload__title{font-size:16px;font-weight:600;margin:0}.upload__hint{font-size:14px;color:var(--text-secondary);margin:0}.upload__formats{font-size:12px;color:var(--text-muted);margin-top:4px}.upload__preview{position:relative;border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--border);background:var(--surface)}.upload__preview img{display:block;width:100%;max-height:320px;object-fit:contain;background:repeating-conic-gradient(#e2e6ef 0% 25%,transparent 0% 50%) 50% / 16px 16px}.upload__change{position:absolute;bottom:12px;right:12px;padding:8px 14px;background:#000000b3;color:#fff;border:none;border-radius:var(--radius-sm);font-size:13px;font-weight:500;cursor:pointer;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.upload__change:disabled{opacity:.5;cursor:not-allowed}.color-swatch{display:flex;flex-direction:column;border:1px solid var(--border);border-radius:var(--radius-md);overflow:hidden;background:var(--surface);cursor:pointer;transition:transform .2s ease,box-shadow .2s ease;text-align:left;padding:0}.color-swatch:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}.color-swatch__preview{height:64px;display:flex;flex-direction:column;justify-content:flex-end;padding:8px 10px;gap:1px}.color-swatch__hex{font-family:var(--font-mono);font-size:11px;font-weight:600}.color-swatch__pct{font-family:var(--font-mono);font-size:10px;opacity:.85}.color-swatch__info{padding:10px 12px;display:flex;flex-direction:column;gap:3px}.color-swatch__top{display:flex;justify-content:space-between;align-items:center}.color-swatch__name{font-size:13px;font-weight:600;color:var(--text-primary)}.color-swatch__role{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--accent)}.color-swatch__codes{font-family:var(--font-mono);font-size:10px;color:var(--text-muted)}.color-swatch__usage{font-size:11px;color:var(--text-secondary)}.result{display:flex;flex-direction:column;gap:20px}.result__header h2{font-size:20px;font-weight:700;margin:0 0 8px}.result__header p{font-size:14px;line-height:1.6;color:var(--text-secondary);margin:0}.result__preview-thumb{border-radius:var(--radius-md);overflow:hidden;border:1px solid var(--border);max-height:180px}.result__preview-thumb img{width:100%;height:180px;object-fit:cover;display:block}.result__card{position:relative;padding:24px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg)}.result__card-label{position:absolute;top:20px;right:20px;font-family:var(--font-mono);font-size:11px;font-weight:600;color:var(--text-muted)}.result__card h3{font-size:15px;font-weight:700;margin:0 0 12px;color:var(--text-primary)}.result__card-desc{font-size:13px;line-height:1.6;color:var(--text-secondary);margin:0 0 16px}.result__card-desc strong{color:var(--accent)}.result__comp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:16px}.result__comp-item{padding:12px;background:var(--bg);border-radius:var(--radius-sm);display:flex;flex-direction:column;gap:4px}.result__comp-key{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted)}.result__comp-val{font-size:13px;font-weight:600;color:var(--text-primary)}.result__detail-list{margin:0;padding:0 0 0 18px;display:flex;flex-direction:column;gap:8px}.result__detail-list li{font-size:13px;line-height:1.55;color:var(--text-secondary)}.result__keywords{display:flex;flex-wrap:wrap;gap:8px}.result__keyword{font-size:12px;font-weight:500;padding:6px 12px;background:var(--bg);border:1px solid var(--border);border-radius:100px;color:var(--text-primary)}.result__card--reference .result__keyword{background:var(--accent-subtle);border-color:#6366f133;color:var(--accent)}.result__style-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:12px}.result__style-row>div{padding:14px;background:var(--bg);border-radius:var(--radius-sm);display:flex;flex-direction:column;gap:4px}.result__style-label{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted)}.result__style-value{font-size:18px;font-weight:700;color:var(--accent)}.result__subgenres{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}.result__subgenre{font-size:12px;padding:5px 10px;background:var(--accent-subtle);color:var(--accent);border-radius:var(--radius-sm);font-weight:500}.result__mood{display:flex;flex-wrap:wrap;gap:8px}.result__mood-tag{font-size:12px;font-weight:500;padding:5px 12px;border:1px solid var(--border);border-radius:100px}.result__colors{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}.result__fonts{display:flex;flex-direction:column;gap:12px}.result__font-card{padding:16px;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--bg)}.result__font-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}.result__font-role{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--accent)}.result__font-spec{font-family:var(--font-mono);font-size:10px;color:var(--text-muted)}.result__font-name{font-size:17px;font-weight:700;margin:0 0 8px}.result__font-sample{font-size:22px;margin:0 0 10px}.result__font-reason{font-size:13px;color:var(--text-secondary);margin:0;line-height:1.5}.result__font-alt{font-size:12px;color:var(--text-muted);margin:8px 0 0}@media(max-width:600px){.result__comp-grid{grid-template-columns:1fr 1fr}.result__style-row{grid-template-columns:1fr}}.app{max-width:720px;margin:0 auto;padding:48px 24px 80px;min-height:100vh}.intro{text-align:center;margin-bottom:40px}.intro__logo{display:flex;gap:3px;align-items:flex-end;justify-content:center;margin-bottom:20px}.intro__dot{width:8px;border-radius:2px}.intro__dot--1{height:16px;background:#e94560}.intro__dot--2{height:24px;background:#6366f1}.intro__dot--3{height:12px;background:#f5a623}.intro h1{font-size:28px;font-weight:700;margin:0 0 12px;letter-spacing:-.02em}.intro p{font-size:15px;line-height:1.65;color:var(--text-secondary);margin:0 auto;max-width:520px}.intro p strong{color:var(--text-primary);font-weight:600}.upload-section{display:flex;flex-direction:column;gap:16px}.analyze-btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:15px;background:var(--accent);color:#fff;border:none;border-radius:var(--radius-md);font-size:15px;font-weight:600;cursor:pointer;transition:opacity .2s,transform .2s}.analyze-btn:hover:not(:disabled){opacity:.92;transform:translateY(-1px)}.analyze-btn:disabled{opacity:.7;cursor:not-allowed}.analyze-btn__spinner{width:18px;height:18px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.error-msg{color:#dc2626;font-size:14px;margin:0;text-align:center}.result-section{margin-top:48px;padding-top:48px;border-top:1px solid var(--border)}@media(max-width:480px){.app{padding:32px 16px 64px}.intro h1{font-size:24px}}