:root { color-scheme: light; --bg: #f5f5f7; --ink: #1d1d1f; --muted: #6e6e73; --line: rgba(0,0,0,.1); --blue: #0071e3; --card: #fff; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { min-width: 320px; min-height: 100vh; margin: 0; color: var(--ink); font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "PingFang SC", "Helvetica Neue", Arial, sans-serif; -webkit-font-smoothing: antialiased; background: radial-gradient(circle at 15% 0, rgba(0,113,227,.11), transparent 29rem), var(--bg); }
button, input { font: inherit; } button { cursor: pointer; }
.shell { width: min(620px, calc(100% - 32px)); margin: 0 auto; padding: 30px 0 42px; }
.back { display: inline-block; margin: 0 0 18px 2px; color: var(--muted); font-size: 13px; text-decoration: none; }
.back:hover { color: var(--blue); }
.card { padding: 34px; border: 1px solid var(--line); border-radius: 24px; background: rgba(255,255,255,.88); box-shadow: 0 18px 55px rgba(0,0,0,.08); backdrop-filter: blur(20px); }
.heading { margin-bottom: 25px; } .eyebrow { color: var(--blue); font-size: 11px; font-weight: 700; letter-spacing: .12em; } h1 { margin: 7px 0 5px; font-size: clamp(28px, 6vw, 36px); letter-spacing: -.05em; } .heading p { margin: 0; color: var(--muted); font-size: 14px; }
.dropzone { display: grid; min-height: 220px; padding: 26px; place-items: center; align-content: center; border: 1.5px dashed #b8c1cc; border-radius: 18px; text-align: center; transition: .18s ease; } .dropzone:hover, .dropzone:focus-visible, .dropzone.is-over { outline: none; border-color: var(--blue); background: #f4f9ff; }
.dropzone svg { width: 38px; margin-bottom: 10px; fill: none; stroke: var(--blue); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .dropzone strong { font-size: 18px; } .dropzone span { margin: 6px 0 16px; color: var(--muted); font-size: 13px; } .dropzone label { padding: 10px 17px; border-radius: 999px; color: white; background: var(--blue); font-size: 13px; font-weight: 650; }
.file-panel { border: 1px solid var(--line); border-radius: 18px; overflow: hidden; } .file-row { display: flex; align-items: center; gap: 12px; padding: 15px; border-bottom: 1px solid var(--line); } .file-icon { display: grid; width: 38px; height: 38px; flex: 0 0 auto; place-items: center; border-radius: 10px; color: #ba2828; background: #fff0f0; font-size: 10px; font-weight: 750; } .file-copy { min-width: 0; flex: 1; } .file-copy strong, .file-copy span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .file-copy strong { font-size: 14px; } .file-copy span { margin-top: 3px; color: var(--muted); font-size: 12px; } .file-row button { border: 0; color: var(--blue); background: transparent; font-size: 13px; }
.levels { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 14px; } .level { padding: 14px; border: 1px solid var(--line); border-radius: 13px; color: var(--ink); background: #fff; text-align: left; } .level strong, .level span { display: block; } .level strong { font-size: 14px; } .level span { margin-top: 6px; color: var(--muted); font-size: 12px; } .level.is-selected { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(0,113,227,.1); } .level.is-selected strong { color: var(--blue); }
.status { min-height: 20px; margin: 17px 2px 12px; color: var(--muted); font-size: 13px; } .status.is-error { color: #c9342f; } .status.is-success { color: #17825a; }
.primary { width: 100%; min-height: 48px; border: 0; border-radius: 13px; color: white; background: var(--blue); font-weight: 650; } .primary:hover { background: #0077ed; } .primary:disabled { cursor: default; opacity: .4; }
.legal { margin: 13px 2px; color: #929299; font-size: 11px; text-align: center; } .legal a { color: inherit; }
@media (max-width: 520px) { .shell { width: min(100% - 22px, 620px); padding-top: 16px; } .card { padding: 24px 18px; border-radius: 20px; } .levels { grid-template-columns: 1fr; } }