* { box-sizing: border-box; }
body { margin: 0; background: #fff; color: #292733; font: 14px -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif; }
main { max-width: 560px; margin: 24px auto; padding: 0 20px; }
h1 { margin: 0 0 20px; color: #68616f; font-size: 16px; font-weight: 600; }
button { font: inherit; touch-action: manipulation; }
.dropzone { display: block; overflow: hidden; border: 1px dashed #a99ac4; border-radius: 14px; background: #f5f2f9; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.dropzone:hover, .dropzone.dragover { border-color: #71609f; background: #f0ebf7; }
.empty-state { display: flex; min-height: 258px; padding: 24px 12px; flex-direction: column; align-items: center; justify-content: center; }
.upload-art { width: 68px; height: 68px; margin-bottom: 18px; }
.upload-art svg { width: 100%; height: 100%; }
.empty-state strong { font-size: 16px; font-weight: 600; }
.drop-hint { margin-top: 10px; color: #a29aa9; font-size: 12px; }
.file-types { margin-top: 24px; color: #a79fb0; font-size: 11px; }
.preview-state { position: relative; height: 258px; padding: 12px; align-items: center; justify-content: center; }
.preview-state:not([hidden]) { display: flex; }
.preview-state img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 6px; }
.change-chip { position: absolute; right: 10px; bottom: 10px; padding: 7px 10px; border-radius: 16px; background: #fff; color: #71609f; font-size: 11px; }
.primary { display: flex; width: 100%; height: 52px; margin-top: 20px; border: 0; border-radius: 11px; align-items: center; justify-content: center; gap: 10px; background: #71609f; color: #fff; font-size: 16px; font-weight: 600; cursor: pointer; }
.primary:disabled { background: #e5e1eb; color: #a59ab5; cursor: default; }
.primary.loading { background: #71609f; color: #fff; }
.spinner { width: 16px; height: 16px; border: 2px solid #ffffff55; border-top-color: #fff; border-radius: 50%; animation: spin .8s linear infinite; }
#status, #error, #result { margin: 18px 0 0; line-height: 1.7; }
#status { color: #89818f; font-size: 12px; }
#error { color: #a45e44; }
#result { display: flex; align-items: center; gap: 24px; padding: 8px 0; }
.score-ring { width: 116px; height: 116px; position: relative; flex-shrink: 0; }
.score-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.score-ring circle { fill: none; stroke-width: 5; }
.ring-bg { stroke: #eeeaf3; }
.ring-value { stroke: #8371ad; stroke-linecap: round; stroke-dasharray: 326.726; stroke-dashoffset: 326.726; }
.score-number { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 2px; color: #8371ad; }
.score-number strong { font-size: 36px; font-weight: 550; letter-spacing: -1.5px; font-variant-numeric: tabular-nums; }
.score-number span { font-size: 13px; margin-top: 10px; }
.result-label { font-size: 11px; color: #a59aaa; }
.result-copy h2 { font-size: 19px; margin: 7px 0 8px; font-weight: 600; }
.result-copy p { font-size: 12px; color: #958b9b; line-height: 1.8; margin: 0; }
@media (max-width: 360px) { #result { gap: 16px; } .score-ring { width: 100px; height: 100px; } .result-copy h2 { font-size: 17px; } }
:focus-visible { outline: 2px solid #9180b1; outline-offset: 4px; }
[hidden] { display: none !important; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (max-width: 600px) { main { margin: 20px auto; padding: 0 16px; } }
@media (prefers-reduced-motion: reduce) { .spinner { animation: none; } }