:root { --bg:#f5f5f7; --ink:#1d1d1f; --muted:rgba(0,0,0,.62); --line:rgba(0,0,0,.08); --blue:#0071e3; --blue2:#0066cc; --card:#fff; --shadow:rgba(0,0,0,.12) 0 18px 60px; }
* { box-sizing: border-box; }
html, body { margin:0; min-height:100%; font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; color:var(--ink); background:var(--bg); letter-spacing:-.02em; }
.nav { height:48px; position:sticky; top:0; z-index:10; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.82); backdrop-filter:saturate(180%) blur(20px); color:#fff; font-size:12px; }
.nav-inner { width:min(980px, calc(100% - 32px)); display:flex; align-items:center; justify-content:space-between; }
.mark { font-weight:600; letter-spacing:-.01em; }
.nav span:last-child { opacity:.72; }
.hero { padding:76px 24px 32px; text-align:center; }
.hero h1 { margin:0 auto; max-width:860px; font-size: clamp(42px, 7vw, 72px); line-height:1.04; font-weight:700; letter-spacing:-.055em; }
.hero p { margin:18px auto 0; max-width:680px; color:var(--muted); font-size:21px; line-height:1.3; letter-spacing:-.026em; }
.shell { width:min(980px, calc(100% - 32px)); margin:0 auto 56px; }
.panel { background:rgba(255,255,255,.82); border:1px solid var(--line); border-radius:28px; box-shadow:var(--shadow); overflow:hidden; backdrop-filter:blur(16px); }
.panel-grid { display:grid; grid-template-columns: 1fr; gap:0; }
.left { padding:34px; border-right:0; }
.right { padding:34px; background:linear-gradient(180deg, rgba(255,255,255,.7), rgba(245,245,247,.88)); }
.eyebrow { margin:0 0 10px; color:#6e6e73; font-size:13px; font-weight:600; letter-spacing:.02em; text-transform:uppercase; }
h2 { margin:0 0 10px; font-size:32px; line-height:1.08; letter-spacing:-.04em; }
.copy { color:var(--muted); font-size:16px; line-height:1.45; }
.form { display:grid; gap:18px; margin-top:26px; }
label { font-size:14px; color:#3a3a3c; font-weight:600; }
select, input[type=file] { width:100%; margin-top:8px; padding:14px 14px; border:1px solid rgba(0,0,0,.14); border-radius:14px; background:#fff; font:inherit; color:var(--ink); }
select option:disabled { color:#86868b; }
input[type=file] { padding:20px; border-style:dashed; background:#fbfbfd; }
.btn { border:0; border-radius:980px; background:var(--blue); color:white; font-weight:600; font-size:16px; padding:13px 22px; cursor:pointer; box-shadow:rgba(0,113,227,.24) 0 10px 24px; transition:.18s ease; }
.btn:hover { transform:translateY(-1px); background:#0077ed; }
.btn:active { transform:translateY(0); }
.cards { display:grid; gap:12px; margin-top:24px; }
.card { padding:16px; border-radius:18px; background:#fff; border:1px solid var(--line); }
.card strong { display:block; font-size:15px; margin-bottom:4px; }
.card span { color:var(--muted); font-size:14px; line-height:1.35; }
.result { margin-top:26px; padding:24px; border-radius:20px; background:#f5f5f7; border:1px solid var(--line); box-shadow:rgba(0,0,0,.06) 0 8px 28px; }
.result a { display:inline-block; color:#fff; background:var(--blue); padding:12px 18px; border-radius:980px; font-weight:600; text-decoration:none; }
.result a:hover { background:#0077ed; }
.status-ok { color:#137333; font-weight:700; }
.status-warn { color:#9a6700; font-weight:700; }
.status-error { color:#b42318; font-weight:700; }
.error-list { margin:14px 0 0; padding-left:20px; color:#7a271a; font-size:14px; line-height:1.5; letter-spacing:0; }
pre { white-space:pre-wrap; overflow:auto; padding:14px; background:#111; color:#f5f5f7; border-radius:14px; font-size:12px; letter-spacing:0; }
.footer { width:min(980px, calc(100% - 32px)); margin:0 auto 38px; color:#6e6e73; font-size:12px; line-height:1.45; text-align:center; }
@media (max-width:760px){ .panel-grid{grid-template-columns:1fr}.left{border-right:0;border-bottom:1px solid var(--line)} .left,.right{padding:24px}.hero{padding-top:54px}.hero p{font-size:18px} }