:root{color-scheme:dark;--bg:#050b13;--surface:#0b1523;--surface-2:#101f32;--line:#20344c;--text:#f6f9fc;--muted:#95a5b8;--blue:#2f81f7;--cyan:#30d6c8;--red:#ff5c72;--green:#36d399;--shadow:0 24px 70px rgba(0,0,0,.38)}
*{box-sizing:border-box}
html{min-height:100%;background:var(--bg)}
body{min-height:100vh;margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:radial-gradient(circle at 10% 0,rgba(47,129,247,.15),transparent 35%),linear-gradient(180deg,#07111f 0,#050b13 62%);color:var(--text)}
button,input,select{font:inherit}
button{touch-action:manipulation}
.shell{width:min(100%,520px);min-height:100vh;margin:0 auto;padding:calc(28px + env(safe-area-inset-top)) 20px calc(32px + env(safe-area-inset-bottom))}
.hidden{display:none!important}
.loading{min-height:70vh;display:grid;place-content:center;justify-items:center;gap:14px;color:var(--muted)}
.brand-line{display:flex;align-items:center;gap:10px;margin:12px 0 26px;font-weight:800;letter-spacing:.02em}
.brand-mark{width:42px;height:42px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(135deg,var(--blue),var(--cyan));box-shadow:0 12px 32px rgba(47,129,247,.28);font-weight:950;color:#03101b}
.card{background:linear-gradient(180deg,rgba(16,31,50,.96),rgba(9,20,34,.96));border:1px solid var(--line);border-radius:24px;box-shadow:var(--shadow)}
.login-card{padding:28px}
.eyebrow{margin:0 0 7px;color:var(--cyan);font-size:.78rem;font-weight:900;letter-spacing:.12em;text-transform:uppercase}
h1,h2,p{margin-top:0}
h1{margin-bottom:12px;font-size:clamp(1.75rem,7vw,2.45rem);line-height:1.04;letter-spacing:-.045em}
h2{margin:0 0 5px;font-size:1.12rem;letter-spacing:-.02em}
.lead{margin-bottom:25px;color:var(--muted);font-size:1rem;line-height:1.6}
.stack{display:grid;gap:15px}
.field>span{display:block;margin-bottom:8px;color:#dbe6f2;font-size:.88rem;font-weight:800}
.field input,.field select{width:100%;height:54px;border:1px solid var(--line);border-radius:14px;background:#07111f;color:var(--text);padding:0 15px;outline:none}
.field input:focus,.field select:focus{border-color:var(--cyan);box-shadow:0 0 0 3px rgba(48,214,200,.11)}
.input-wrap{position:relative}.input-wrap input{padding-right:65px}
.icon-button{position:absolute;right:7px;top:7px;height:40px;padding:0 11px;border:0;border-radius:10px;background:transparent;color:var(--cyan);font-weight:800;cursor:pointer}
.check-row{display:flex;align-items:flex-start;gap:11px;color:#cbd7e4;font-size:.92rem;line-height:1.45;cursor:pointer}
.check-row input{width:19px;height:19px;margin:1px 0 0;accent-color:var(--cyan);flex:0 0 auto}
.primary-button,.danger-button,.secondary-button,.install-button{width:100%;min-height:52px;border:0;border-radius:14px;padding:12px 18px;font-weight:900;cursor:pointer;transition:transform .15s ease,opacity .15s ease}
.primary-button{background:linear-gradient(135deg,var(--blue),#2465d3);color:#fff;box-shadow:0 13px 35px rgba(47,129,247,.23)}
.danger-button{background:linear-gradient(135deg,#ff5c72,#de3853);color:#fff}
.secondary-button{background:rgba(255,255,255,.06);border:1px solid var(--line);color:#fff}
.install-button{margin-top:18px;background:transparent;border:1px solid var(--line);color:#cbd7e4}
button:disabled{opacity:.48;cursor:not-allowed}.primary-button:not(:disabled):active,.danger-button:not(:disabled):active,.secondary-button:active{transform:scale(.985)}
.message{margin-top:15px;padding:12px 14px;border-radius:12px;font-size:.9rem;line-height:1.45}.message.error{background:rgba(255,92,114,.1);border:1px solid rgba(255,92,114,.28);color:#ffc1cb}.message.info{background:rgba(47,129,247,.1);border:1px solid rgba(47,129,247,.28);color:#c3dcff}
.app-header{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:8px 2px 24px}.app-header h1{font-size:1.7rem;margin:0}.text-button{border:0;background:transparent;color:var(--muted);font-weight:800;padding:10px;cursor:pointer}
.migration-card,.preview-card,.progress-card{padding:22px;margin-bottom:18px}
.card-heading{display:flex;align-items:flex-start;gap:13px;margin-bottom:22px}.card-heading p{margin:0;color:var(--muted);font-size:.88rem;line-height:1.45}.step{width:32px;height:32px;border-radius:11px;display:grid;place-items:center;background:rgba(48,214,200,.1);border:1px solid rgba(48,214,200,.24);color:var(--cyan);font-weight:900;flex:0 0 auto}
.direction{height:24px;display:grid;place-items:center;color:var(--cyan);font-size:1.2rem}
.metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:2px 0 18px}.metrics div{min-width:0;padding:14px 8px;border-radius:15px;background:#07111f;border:1px solid var(--line);text-align:center}.metrics strong{display:block;font-size:1.4rem}.metrics span{display:block;margin-top:4px;color:var(--muted);font-size:.72rem}.metrics .accent{border-color:rgba(48,214,200,.35)}.metrics .accent strong{color:var(--cyan)}
.notice{margin:0 0 17px;padding:12px 13px;border-radius:12px;background:rgba(255,197,92,.08);border:1px solid rgba(255,197,92,.22);color:#ffe1aa;font-size:.85rem;line-height:1.45}.confirm-row{margin:16px 0}
.progress-top{display:flex;justify-content:space-between;gap:12px;margin-bottom:13px}.progress-track{height:10px;border-radius:999px;overflow:hidden;background:#06101c;border:1px solid var(--line)}.progress-track div{height:100%;width:0;background:linear-gradient(90deg,var(--blue),var(--cyan));transition:width .28s ease}.progress-card p{margin:12px 0 0;color:var(--muted);font-size:.88rem}
.success-card{padding:30px 24px;border-radius:24px;background:linear-gradient(180deg,rgba(19,67,57,.95),rgba(8,34,32,.97));border:1px solid rgba(54,211,153,.34);box-shadow:var(--shadow);text-align:center}.success-icon{width:58px;height:58px;margin:0 auto 17px;border-radius:20px;display:grid;place-items:center;background:var(--green);color:#05251b;font-size:1.7rem;font-weight:950}.success-card h2{font-size:1.45rem}.success-card p{color:#c5e8dd;line-height:1.55;margin-bottom:22px}
@media(min-width:680px){.shell{padding-top:48px}.login-card{padding:36px}.migration-card,.preview-card,.progress-card{padding:26px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}