*{box-sizing:border-box}body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;color:#0f2a3d;background:linear-gradient(#f6fbff,#f1f5f9)}h1{margin:0;font-size:28px}h2{margin:0 0 8px}header.app-header{padding:24px 16px;text-align:center;background:#ffffffaa;backdrop-filter:saturate(1.2) blur(6px);border-bottom:1px solid #e6eef5}.subtitle{margin:6px 0 0;color:#446277}.container{max-width:960px;margin:24px auto;padding:0 16px}.card{background:#fff;border:1px solid #e6eef5;border-radius:14px;padding:16px 16px 20px;box-shadow:0 8px 30px rgba(15,42,61,.06);margin-bottom:16px}.tabs{display:flex;gap:8px;margin-bottom:12px}.tab-button{flex:1;padding:12px;border:1px solid #c9d9e5;background:#f3f8fc;border-radius:10px;cursor:pointer;font-weight:600}.tab-button.active{background:#0f2a3d;color:#fff;border-color:#0f2a3d}.tab-panel{display:none}.tab-panel.active{display:block}.uploader{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.preview{border:1px dashed #b9c8d3;border-radius:10px;width:320px;height:320px;background:#f7fbff}.hint{color:#58748a;margin:8px 0}.actions{display:flex;gap:8px;margin:10px 0 6px}.actions button{padding:10px 14px;border-radius:10px;border:1px solid #0f2a3d;background:#0f2a3d;color:#fff;font-weight:700;cursor:pointer}.actions .secondary{background:#fff;color:#0f2a3d}.result{margin-top:8px;padding:10px 12px;border:1px solid #e6eef5;background:#f9fcff;border-radius:10px}.quiz .q{margin:12px 0;display:grid;gap:6px}.quiz label{cursor:pointer}.palettes .swatches{display:grid;grid-template-columns:repeat(auto-fit,minmax(88px,1fr));gap:8px;margin-top:10px}.swatch{height:64px;border-radius:10px;border:1px solid #e2e8f0;display:flex;align-items:flex-end;justify-content:center;padding:6px;font-weight:700;color:#0f2a3d;background:#eee}.swatch small{background:#ffffffcc;border-radius:6px;padding:2px 6px}.palette-title{margin:0 0 6px;color:#446277}.app-footer{padding:20px;text-align:center;color:#58748a}details.details{margin-top:10px}