:root{color-scheme:dark;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;line-height:1.5}*{box-sizing:border-box}html,body,#root{margin:0;min-height:100vh;background:#0a0a0a;color:#fafafa}.app{min-height:100vh;padding:2rem 1.5rem;max-width:960px;margin:0 auto}.header{text-align:center;margin-bottom:2.5rem}.header h1{font-size:2rem;font-weight:700;letter-spacing:-.03em;margin:0 0 .25rem}.header p{color:#ffffff80;font-size:.95rem;margin:0}.outfit-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem;margin-bottom:2rem}.slot-card{border:1px solid rgba(255,255,255,.1);border-radius:.75rem;padding:1.25rem;background:#ffffff08;transition:border-color .2s}.slot-card.has-item{border-color:#fff3}.slot-label{font-size:.7rem;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.15em;text-transform:uppercase;color:#ffffff73;margin-bottom:.75rem;display:block}.item-select{width:100%;background:#ffffff0f;border:1px solid rgba(255,255,255,.12);border-radius:.5rem;color:#fafafa;padding:.5rem .75rem;font-size:.875rem;font-family:inherit;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;margin-bottom:.75rem}.item-select:focus{outline:none;border-color:#ffffff4d}.color-row{display:flex;gap:.5rem;flex-wrap:wrap}.color-swatch{width:28px;height:28px;border-radius:50%;border:2px solid transparent;cursor:pointer;transition:border-color .15s,transform .15s;padding:0;outline:none}.color-swatch:hover{transform:scale(1.15)}.color-swatch.selected{border-color:#fff;transform:scale(1.15)}.color-swatch:focus-visible{box-shadow:0 0 0 2px #fff6}.check-btn{display:block;margin:0 auto 2rem;padding:.75rem 2.5rem;background:#fff;color:#0a0a0a;border:none;border-radius:.5rem;font-size:1rem;font-weight:600;font-family:inherit;cursor:pointer;transition:opacity .15s}.check-btn:hover{opacity:.85}.check-btn:disabled{opacity:.3;cursor:not-allowed}.result-panel{border:1px solid rgba(255,255,255,.1);border-radius:.75rem;padding:2rem;background:#ffffff08;animation:fadeIn .3s ease}@keyframes fadeIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.score-section{text-align:center;margin-bottom:1.5rem}.score-ring{position:relative;width:120px;height:120px;margin:0 auto 1rem}.score-ring svg{transform:rotate(-90deg)}.score-ring .bg{fill:none;stroke:#ffffff14;stroke-width:8}.score-ring .fill{fill:none;stroke-width:8;stroke-linecap:round;transition:stroke-dashoffset .8s ease,stroke .8s ease}.score-number{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;font-size:2rem;font-weight:700;letter-spacing:-.02em}.verdict{font-size:1.1rem;font-weight:600;margin:0}.verdict-sub{color:#ffffff80;font-size:.85rem;margin-top:.25rem}.breakdown{display:flex;flex-direction:column;gap:.75rem;margin-bottom:1.5rem}.breakdown-row{display:flex;align-items:center;justify-content:space-between;gap:1rem}.breakdown-label{font-size:.85rem;color:#fff9;min-width:100px}.breakdown-bar-bg{flex:1;height:6px;background:#ffffff14;border-radius:3px;overflow:hidden}.breakdown-bar-fill{height:100%;border-radius:3px;transition:width .6s ease}.breakdown-score{font-size:.85rem;font-weight:600;min-width:28px;text-align:right}.tips-section h3{font-size:.9rem;font-weight:600;margin:0 0 .75rem}.tip-item{display:flex;gap:.5rem;align-items:flex-start;padding:.5rem 0;border-top:1px solid rgba(255,255,255,.06)}.tip-icon{font-size:.85rem;flex-shrink:0;margin-top:.1rem}.tip-text{font-size:.85rem;color:#ffffffb3;line-height:1.5}.outfit-preview{display:flex;justify-content:center;gap:.75rem;margin-bottom:1.5rem;flex-wrap:wrap}.preview-item{width:56px;height:56px;border-radius:.5rem;border:1px solid rgba(255,255,255,.15);display:flex;align-items:center;justify-content:center;font-size:1.5rem;position:relative}.preview-item-label{position:absolute;bottom:-1.25rem;font-size:.6rem;color:#fff6;white-space:nowrap}@media(max-width:600px){.app{padding:1.5rem 1rem}.outfit-grid{grid-template-columns:1fr 1fr}.header h1{font-size:1.5rem}}