:root{--blue-50:#eef4ff;--blue-100:#dbe7ff;--blue-500:#2f6bff;--blue-600:#1f5bff;--blue-700:#1746d6;--ink:#0e1726;--ink-2:#384258;--ink-3:#6b7689;--line:#e6e9f0;--line-2:#eef0f5;--bg:#f4f6fb;--surface:#ffffff;--ok:#16a34a;--warn:#d97706;--danger:#dc2626;--radius:16px;--radius-sm:12px;--shadow-sm:0 1px 2px rgba(16,23,38,.06),0 1px 3px rgba(16,23,38,.04);--shadow-md:0 8px 24px -12px rgba(16,23,38,.18),0 2px 8px rgba(16,23,38,.04);--shadow-lg:0 24px 60px -24px rgba(16,23,38,.28)}*{box-sizing:border-box;margin:0;padding:0}body,html{height:100%}body{font-family:Plus Jakarta Sans,-apple-system,sans-serif;background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased;line-height:1.5}button{font-family:inherit;cursor:pointer;border:none;background:none}a{color:inherit;text-decoration:none}input,select{font-family:inherit}.screen{display:none;min-height:100vh}.screen.active{display:block}.brand,.flex{display:flex}.brand{align-items:center;gap:10px;font-weight:800;font-size:18px;letter-spacing:-.02em;color:var(--ink)}.brand .mark{width:34px;height:34px;border-radius:10px;flex:0 0 auto;background:linear-gradient(135deg,var(--blue-500),var(--blue-700));display:grid;place-items:center;color:#fff;font-weight:800;font-size:16px;box-shadow:0 6px 14px -6px rgba(31,91,255,.7)}.brand small{font-weight:500;color:var(--ink-3);font-size:13px;letter-spacing:0}.auth{min-height:100vh;display:grid;grid-template-columns:1.05fr .95fr}.auth-aside{position:relative;overflow:hidden;color:#fff;padding:48px;background:radial-gradient(120% 90% at 15% 10%,rgba(255,255,255,.14),transparent 50%),radial-gradient(100% 80% at 90% 100%,rgba(0,0,0,.25),transparent 60%),linear-gradient(150deg,#1746d6,#1f5bff 55%,#2f6bff);display:flex;flex-direction:column;justify-content:space-between}.auth-aside .brand{color:#fff}.auth-aside .brand small{color:rgba(255,255,255,.7)}.auth-aside .mark{background:rgba(255,255,255,.16);box-shadow:none}.aside-grid{position:absolute;inset:0;opacity:.5;background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 0),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 0);background-size:46px 46px;-webkit-mask-image:radial-gradient(120% 120% at 50% 30%,#000,transparent 75%);mask-image:radial-gradient(120% 120% at 50% 30%,#000,transparent 75%)}.aside-copy{position:relative;max-width:420px}.aside-copy h1{font-size:38px;line-height:1.1;letter-spacing:-.03em;font-weight:800;margin-bottom:16px}.aside-copy p{color:rgba(255,255,255,.82);font-size:15.5px}.aside-apps{position:relative;display:flex;gap:10px;flex-wrap:wrap}.aside-app{display:flex;align-items:center;gap:9px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);padding:9px 13px;border-radius:11px;font-size:13px;font-weight:600;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.aside-app i{width:8px;height:8px;border-radius:3px;display:block}.auth-main{display:flex;align-items:center;justify-content:center;padding:40px 24px;background:var(--surface)}.auth-card{width:100%;max-width:392px;animation:rise .5s ease both}.auth-card .top-brand{display:none}.auth-card h2{font-size:26px;letter-spacing:-.02em;font-weight:800;margin-bottom:6px}.auth-card .sub{color:var(--ink-3);font-size:14.5px;margin-bottom:28px}.field{margin-bottom:16px}.field label{display:block;font-size:13px;font-weight:600;color:var(--ink-2);margin-bottom:7px}.input{width:100%;height:50px;border:1.5px solid var(--line);border-radius:12px;padding:0 15px;font-size:15px;color:var(--ink);background:#fff;transition:.18s}.input::placeholder{color:#aab2c2}.input:focus{outline:none;border-color:var(--blue-500);box-shadow:0 0 0 4px var(--blue-50)}.input-wrap{position:relative}.input-wrap .eye{position:absolute;right:12px;top:50%;transform:translateY(-50%);color:var(--ink-3);padding:6px}.row-2{display:grid;grid-template-columns:1fr 1fr;grid-gap:12px;gap:12px}.btn{width:100%;height:50px;border-radius:12px;font-size:15px;font-weight:700;display:flex;align-items:center;justify-content:center;gap:8px;transition:.18s}.btn-primary{background:var(--blue-600);color:#fff;box-shadow:0 10px 22px -12px rgba(31,91,255,.8)}.btn-primary:hover{background:var(--blue-700);transform:translateY(-1px)}.btn-ghost{background:#fff;color:var(--ink);border:1.5px solid var(--line)}.btn-ghost:hover{border-color:#cfd6e4;background:#fafbff}.btn-sm{height:42px;font-size:14px;width:auto;padding:0 18px}.divider{display:flex;align-items:center;gap:14px;color:var(--ink-3);font-size:13px;margin:22px 0}.divider:after,.divider:before{content:"";height:1px;background:var(--line);flex:1 1}.helper{display:flex;justify-content:space-between;align-items:center;margin-top:-4px;margin-bottom:20px}.link{color:var(--blue-600);font-weight:600;font-size:13.5px}.link:hover{text-decoration:underline}.check{display:flex;gap:9px;font-size:13.5px;color:var(--ink-2);align-items:flex-start}.check input{margin-top:3px;accent-color:var(--blue-600);width:16px;height:16px}.foot-line{text-align:center;color:var(--ink-3);font-size:14px;margin-top:26px}.auth-legal{text-align:center;color:#9aa3b4;font-size:12px;margin-top:34px;line-height:1.6}.pw-meter{display:flex;gap:5px;margin-top:9px}.pw-meter i{height:5px;flex:1 1;border-radius:3px;background:var(--line-2);transition:.25s}.pw-meter.s1 i:first-child{background:var(--danger)}.pw-meter.s2 i:nth-child(-n+2){background:var(--warn)}.pw-meter.s3 i:nth-child(-n+3){background:#eab308}.pw-meter.s4 i{background:var(--ok)}.pw-hint{font-size:12px;color:var(--ink-3);margin-top:6px}.code-row{display:flex;gap:10px;justify-content:space-between;margin:8px 0 22px}.code-cell{width:54px;height:62px;border:1.5px solid var(--line);border-radius:12px;text-align:center;font-size:24px;font-weight:700;color:var(--ink)}.code-cell:focus{outline:none;border-color:var(--blue-500);box-shadow:0 0 0 4px var(--blue-50)}.method{display:flex;gap:13px;align-items:center;padding:15px;border:1.5px solid var(--line);border-radius:13px;margin-bottom:12px;transition:.15s}.method:hover{border-color:var(--blue-300,#bcd0ff);background:#fafbff}.method .ic{width:42px;height:42px;border-radius:11px;background:var(--blue-50);color:var(--blue-600);display:grid;place-items:center;flex:0 0 auto}.method b{font-size:14.5px;display:block}.method span{font-size:12.5px;color:var(--ink-3)}.method .chev{margin-left:auto;color:var(--ink-3)}.appbar{height:64px;background:var(--surface);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:18px;padding:0 22px;position:-webkit-sticky;position:sticky;top:0;z-index:40}.appbar .brand{font-size:16px}.appbar .mark{width:30px;height:30px;border-radius:9px;font-size:14px}.appbar .spacer{flex:1 1}.iconbtn{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;color:var(--ink-2);transition:.15s}.iconbtn:hover{background:var(--bg)}.avatar{width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,#ff9a4d,#f76b6b);color:#fff;display:grid;place-items:center;font-weight:700;font-size:15px;cursor:pointer}.shell{display:grid;grid-template-columns:260px 1fr;max-width:1280px;margin:0 auto}.side{padding:22px 14px;position:-webkit-sticky;position:sticky;top:64px;height:calc(100vh - 64px);overflow:auto}.navlink{display:flex;align-items:center;gap:14px;padding:11px 16px;border-radius:999px;color:var(--ink-2);font-weight:600;font-size:14.5px;margin-bottom:3px;transition:.14s;cursor:pointer}.navlink:hover{background:#eef1f7}.navlink.active{background:var(--blue-50);color:var(--blue-700)}.navlink svg{flex:0 0 auto}.content{padding:34px 40px 70px}.page-head{max-width:720px;margin-bottom:30px}.page-head h1{font-size:30px;letter-spacing:-.025em;font-weight:800;margin-bottom:8px}.page-head p{color:var(--ink-3);font-size:15px}.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);margin-bottom:18px;overflow:hidden}.card-pad{padding:22px 24px}.card-title{font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3);margin-bottom:4px}.card h3{font-size:18px;font-weight:700;letter-spacing:-.01em}.list-row{display:flex;align-items:center;gap:16px;padding:17px 24px;border-top:1px solid var(--line-2);transition:.12s;cursor:pointer}.list-row:first-child{border-top:none}.list-row:hover{background:#fafbff}.list-row .lbl{font-size:13px;color:var(--ink-3);width:150px;flex:0 0 auto;font-weight:600}.list-row .val{font-size:14.5px;color:var(--ink);font-weight:500;flex:1 1}.list-row .chev{color:#aab2c2}.hero-card{position:relative;overflow:hidden;color:#fff;border:none;background:radial-gradient(100% 120% at 90% 0,rgba(255,255,255,.12),transparent),linear-gradient(135deg,#1746d6,#2f6bff)}.hero-card .card-pad{padding:30px}.hero-card h2{font-size:24px;font-weight:800;letter-spacing:-.02em;margin-bottom:6px}.hero-card p{color:rgba(255,255,255,.85);font-size:14.5px;max-width:520px}.hero-card .grid-tex{position:absolute;inset:0;opacity:.4;background-image:linear-gradient(rgba(255,255,255,.07) 1px,transparent 0),linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 0);background-size:38px 38px;-webkit-mask-image:radial-gradient(120% 120% at 80% 0,#000,transparent 70%);mask-image:radial-gradient(120% 120% at 80% 0,#000,transparent 70%)}.hero-avatar{width:74px;height:74px;border-radius:50%;background:linear-gradient(135deg,#ff9a4d,#f76b6b);display:grid;place-items:center;font-size:28px;font-weight:800;color:#fff;border:3px solid rgba(255,255,255,.35);position:relative}.tiles{display:grid;grid-template-columns:repeat(3,1fr);grid-gap:16px;gap:16px}.tile{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow-sm);transition:.16s;cursor:pointer}.tile:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}.tile .ic{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;margin-bottom:14px}.tile h4{font-size:15.5px;font-weight:700;margin-bottom:4px}.tile p{font-size:13px;color:var(--ink-3)}.tile .status{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;margin-top:12px}.dot{width:8px;height:8px;border-radius:50%;display:inline-block}.badge{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;padding:5px 11px;border-radius:999px}.badge-ok{background:#e8f7ee;color:#15803d}.badge-warn{background:#fef3e2;color:#b45309}.badge-now{background:var(--blue-50);color:var(--blue-700)}.btn-inline{display:inline-flex;align-items:center;justify-content:center;height:40px;padding:0 18px;border-radius:10px;font-weight:700;font-size:13.5px;gap:7px;transition:.15s}.bi-primary{background:var(--blue-600);color:#fff}.bi-primary:hover{background:var(--blue-700)}.bi-ghost{border:1.5px solid var(--line);color:var(--ink)}.bi-ghost:hover{border-color:#cfd6e4;background:#fafbff}.bi-danger{border:1.5px solid #f3c4c4;color:var(--danger)}.bi-danger:hover{background:#fef2f2}.device{display:flex;align-items:center;gap:16px;padding:18px 24px;border-top:1px solid var(--line-2)}.device:first-child{border-top:none}.device .ic{width:46px;height:46px;border-radius:12px;background:var(--bg);display:grid;place-items:center;color:var(--ink-2);flex:0 0 auto}.device .meta b{font-size:14.5px;display:flex;align-items:center;gap:9px}.device .meta span{font-size:13px;color:var(--ink-3)}.device .act{margin-left:auto}.toggle{width:46px;height:27px;border-radius:999px;background:#cfd6e4;position:relative;transition:.2s;flex:0 0 auto}.toggle:after{content:"";position:absolute;width:21px;height:21px;border-radius:50%;background:#fff;top:3px;left:3px;transition:.2s;box-shadow:0 1px 3px rgba(0,0,0,.2)}.toggle.on{background:var(--blue-600)}.toggle.on:after{left:22px}.launcher{position:absolute;top:60px;right:18px;width:312px;background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow-lg);padding:18px;z-index:60;display:none;animation:rise .2s ease both}.launcher.open{display:block}.launcher h5{font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-3);margin-bottom:14px;font-weight:700}.app-grid{display:grid;grid-template-columns:repeat(3,1fr);grid-gap:6px;gap:6px}.app-item{display:flex;flex-direction:column;align-items:center;gap:9px;padding:14px 8px;border-radius:13px;transition:.13s;cursor:pointer}.app-item:hover{background:var(--bg)}.app-item .ic{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;color:#fff;font-weight:800}.app-item span{font-size:12px;font-weight:600;color:var(--ink-2)}.profile-photo{width:96px;height:96px;background:linear-gradient(135deg,#ff9a4d,#f76b6b);place-items:center;font-size:38px;font-weight:800;color:#fff;position:relative;flex:0 0 auto}.photo-edit,.profile-photo{border-radius:50%;display:grid}.photo-edit{position:absolute;bottom:-2px;right:-2px;width:34px;height:34px;background:#fff;border:1px solid var(--line);place-items:center;color:var(--blue-600);box-shadow:var(--shadow-sm)}.section-label{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);margin:30px 0 13px}@keyframes rise{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}@media(max-width:920px){.auth{grid-template-columns:1fr}.auth-aside{display:none}.auth-card .top-brand{display:flex;margin-bottom:30px}.shell{grid-template-columns:1fr}.side{display:none}.content{padding:22px 18px 60px}.row-2,.tiles{grid-template-columns:1fr}}.mt8{margin-top:8px}.mt16{margin-top:16px}.mt24{margin-top:24px}.muted{color:var(--ink-3)}.flex-between{justify-content:space-between;gap:16px}.flex-between,.flex-c{display:flex;align-items:center}.flex-c{gap:14px}.demo-nav{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);background:#0e1726;color:#fff;padding:7px;display:flex;gap:4px;z-index:200;box-shadow:var(--shadow-lg);max-width:94vw;overflow:auto}.demo-nav,.demo-nav button{border-radius:999px;font-size:12px}.demo-nav button{color:rgba(255,255,255,.7);padding:7px 13px;font-weight:600;white-space:nowrap}.demo-nav button.active,.demo-nav button:hover{background:rgba(255,255,255,.14);color:#fff}