:root{color-scheme:dark;--night:#0a1022;--orbit:#263a78;--ice:#edf5ff;--paper:#f5f8fd;--ink:#182640;--slate:#61718a;--cyan:#80e7f7;--line:#dde4ee;--body-font:"Segoe UI",-apple-system,BlinkMacSystemFont,Arial,sans-serif;--display-font:"Trebuchet MS","Avenir Next",var(--body-font)}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:24px}
body{margin:0;min-width:0;min-height:100vh;font-family:var(--body-font);font-size:15px;line-height:1.5;color:var(--ice);background:radial-gradient(ellipse at 4% 0%,#172951 0,transparent 48%),radial-gradient(ellipse at 100% 15%,#211e47 0,transparent 42%),var(--night);-webkit-font-smoothing:antialiased}
button,input{font:inherit}
button,a,input{-webkit-tap-highlight-color:transparent}
a{color:inherit}
button,a{touch-action:manipulation}
button:focus-visible,a:focus-visible{outline:3px solid #4081e4;outline-offset:4px}
button:disabled{cursor:wait;opacity:.66}
button,.button{display:inline-flex;align-items:center;justify-content:center;min-height:48px;border:1px solid transparent;border-radius:12px;padding:12px 20px;background:#243c7b;color:#fff;font-size:14px;font-weight:650;line-height:1.35;cursor:pointer;text-decoration:none;transition:background .15s,box-shadow .15s}
button:hover,.button:hover{background:#31539e}
h1,h2,h3,p{margin:0}
h1,h2,h3{font-family:var(--display-font);font-weight:700}
svg{display:block;width:22px;height:22px;flex:none}
[hidden]{display:none!important}
.page-shell{width:min(1200px,100%);margin:0 auto;padding:28px 36px 28px}
.site-header{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-bottom:24px;border-bottom:1px solid #ffffff16;margin-bottom:40px}
.brand{display:inline-flex;align-items:center;gap:13px;text-decoration:none;min-width:0;min-height:44px}
.brand-icon{width:48px;height:48px;display:block;border-radius:14px;border:1px solid #8da1e233}
.brand-wordmark{font-family:var(--display-font);font-size:25px;letter-spacing:-.6px;font-weight:700;line-height:1.2}
.header-caption{font-size:13px;color:#a3b3cd}
.account-actions{display:flex;align-items:center;gap:8px}
.inline{display:inline;margin:0}
.header-action{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:transparent;border:1px solid transparent;box-shadow:none;border-radius:10px;min-height:44px;padding:10px 14px;font-size:13px;font-weight:500;color:#c4d0e4;text-decoration:none}
.header-action svg{width:17px;height:17px}
.header-action:hover{background:#ffffff09;color:#fff}
.service-description{color:#aabbd5;font-size:15px;line-height:1.6;max-width:500px;margin-top:13px}
.message{display:flex;gap:12px;align-items:flex-start;border-radius:14px;padding:16px 20px;font-size:14px;line-height:1.6;margin:0 0 24px;overflow-wrap:anywhere}
.message svg{margin-top:1px}
.notice{background:#152f3b;border:1px solid #65ceba66;color:#d7fff2}
.error{background:#381e31;border:1px solid #eab0bc66;color:#ffe0e7}
.surface{color-scheme:light;color:var(--ink);background:var(--paper);border:1px solid #ffffff99;border-radius:24px;box-shadow:0 12px 42px #0108171a}
.welcome-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(350px,.84fr);align-items:center;gap:80px;padding:6px 28px 24px 4px}
.welcome-intro{min-width:0;padding-bottom:10px}
.welcome-art{width:220px;height:200px;margin:-12px 0 22px -14px;position:relative}
.welcome-art img{display:block;width:220px;height:220px;object-fit:contain;border-radius:50%;mask-image:radial-gradient(ellipse,black 40%,transparent 73%)}
.hero-title{font-size:51px;line-height:1.08;letter-spacing:-1.9px;max-width:510px;text-wrap:balance}
.welcome-intro .service-description{font-size:16px;max-width:390px;margin-top:20px}
.welcome-offer{margin-top:26px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.trial-offer{display:inline-flex;align-items:center;gap:7px;background:#80e7f710;color:#c2f3fc;border:1px solid #80e7f738;border-radius:99px;padding:8px 12px;white-space:nowrap;font-size:13px;font-weight:650}
.trial-offer svg{width:16px;height:16px}
.welcome-offer p{font-size:12px;color:#aabbd5;max-width:170px;line-height:1.5}
.welcome-note{font-size:14px;color:#aabbd5;margin-top:20px}
.login-panel{padding:34px 32px;max-width:460px;width:100%;justify-self:end}
.login-panel h2{font-size:28px;line-height:1.18;letter-spacing:-.6px;margin-bottom:26px}
.auth-form{display:grid;gap:18px}
.auth-field{display:grid;gap:8px;min-width:0;color:#46546b;font-size:13px;font-weight:650}
.auth-field input{width:100%;min-width:0;background:#fff;color:var(--ink);border:1px solid #7e8fa8;border-radius:11px;padding:14px 15px;min-height:50px;font-size:16px;line-height:1.4;font-weight:400;outline:none;box-shadow:0 1px 2px #0a102205;transition:border-color .15s,box-shadow .15s}
.auth-field input::placeholder{color:#61718a}
.auth-field input:focus{border-color:#446dbc;box-shadow:0 0 0 3px #4879ca1c}
.auth-submit{width:100%;margin-top:3px;min-height:50px}
.auth-provider{width:100%;font-weight:650}
.yandex-auth-button{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:44px;background:#000;color:#fff;border:1px solid #000;border-radius:8px;box-shadow:none;text-decoration:none}
.yandex-auth-button:hover{background:#000;border-color:#000;color:#fff;text-decoration:none}
.yandex-auth-icon{display:block;width:24px;height:24px;flex:0 0 24px}
.auth-divider{display:flex;align-items:center;gap:13px;color:#61718a;font-size:12px;margin:22px 0}
.auth-divider:before,.auth-divider:after{content:"";flex:1;height:1px;background:var(--line)}
.auth-links{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:22px;font-size:12px;line-height:1.6;color:var(--slate)}
.auth-links a{display:inline-flex;align-items:center;min-height:44px;color:#2b5299;text-underline-offset:4px;text-decoration-thickness:1px}
.auth-hint{font-size:12px;color:var(--slate);margin:-11px 0 0}
.auth-note{font-size:14px;color:var(--slate);margin:-10px 0 24px;line-height:1.6}
.login-status{font-size:14px;line-height:1.6;color:var(--slate);overflow-wrap:anywhere}
.login-status:empty{display:none}
.login-status[data-state="error"]{color:#a8314c}
.login-status[data-state="success"]{color:#226c55}
.dashboard-heading{display:flex;align-items:center;justify-content:space-between;gap:30px;margin-bottom:30px}
.dashboard-heading h1{font-size:35px;letter-spacing:-1px;line-height:1.15}
.dashboard-heading .service-description{font-size:14px;margin-top:10px}
.account-identity{display:flex;align-items:center;gap:10px;font-size:13px;color:#b6c5dd;max-width:320px;min-width:0;overflow-wrap:anywhere}
.account-identity svg{width:18px;height:18px;color:#86a0c9}
.dashboard-grid{display:grid;grid-template-columns:minmax(0,1fr) 330px;grid-template-rows:auto auto;gap:22px;align-items:start}
.account-sidebar{grid-column:2;grid-row:1;display:grid;gap:22px;align-content:start;min-width:0}
.devices-panel{grid-column:1;grid-row:1;padding:28px;min-width:0}
.section-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:21px}
.section-heading h2,.renewal-panel h2{font-size:23px;line-height:1.25;letter-spacing:-.6px}
.device-count{display:inline-flex;gap:4px;align-items:center;border-radius:99px;background:#e4ebf5;color:#263c61;font-size:14px;font-weight:700;white-space:nowrap;padding:6px 11px;font-variant-numeric:tabular-nums}
.device-count span{font-weight:400;color:var(--slate)}
.connect-submit{margin:0 0 22px}
.connect-submit button{font-size:14px;padding:13px 21px;box-shadow:0 4px 10px #263a7817}
.connect-feedback{font-size:13px;line-height:1.6;margin-top:12px;color:var(--slate)}
.limit-note{font-size:13px;line-height:1.6;color:var(--slate);margin-bottom:20px}
.device-list{list-style:none;padding:0;margin:0;border-top:1px solid var(--line)}
.device-row{display:flex;align-items:center;gap:13px;padding:20px 0;border-bottom:1px solid var(--line);min-width:0;flex-wrap:wrap}
.device-row:last-child{border-bottom:0;padding-bottom:0}
.device-symbol{width:45px;height:49px;display:grid;place-items:center;flex:none;background:#e9eef7;border:1px solid #dce5f1;border-radius:12px;color:#49638e}
.device-symbol svg{width:23px;height:23px}
.device-details{flex:1;min-width:130px}
.device-details h3{font-family:var(--body-font);font-size:15px;line-height:1.4;font-weight:650;overflow-wrap:anywhere}
.device-state{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--slate);margin-top:5px}
.state-dot{width:5px;height:5px;border-radius:100%;background:#97a4b7;flex:none}
.device-state[data-state="online"]{color:#24705b}
.device-state[data-state="online"] .state-dot{background:#2b997e}
.last-connected{font-size:11px;line-height:1.5;color:#61718a;margin-top:5px}
.device-link{display:inline-flex;align-items:center;gap:6px;min-height:44px;font-size:12px;line-height:1.4;font-weight:600;color:#2b5299;text-decoration:none;white-space:nowrap}
.device-link:hover{text-decoration:underline;text-underline-offset:4px}
.device-link svg{width:16px;height:16px}
.device-unavailable{font-size:11px;line-height:1.5;color:var(--slate)}
.empty-devices{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;border:1px dashed #cdd8e8;border-radius:16px;background:#edf2f8;padding:44px 16px;min-height:245px}
.empty-symbol{display:grid;place-items:center;width:58px;height:58px;background:#fff;border:1px solid #e0e7f1;border-radius:17px;color:#6d86ae;margin-bottom:20px}
.empty-symbol svg{width:29px;height:29px}
.empty-devices h3{font-family:var(--body-font);font-size:16px;font-weight:650;line-height:1.4}
.empty-devices p{max-width:270px;font-size:13px;line-height:1.65;margin-top:8px;color:var(--slate)}
.empty-devices .button{margin-top:22px}
.access-card{background:linear-gradient(125deg,#263c73,#242649);border:1px solid #7188c044;border-radius:24px;padding:23px 24px;color:var(--ice);min-width:0;box-shadow:0 12px 38px #0307161f}
.access-card-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:17px}
.access-card-top img{display:block;border-radius:17px;width:52px;height:52px}
.access-status{display:inline-flex;align-items:center;gap:6px;color:#cef5e8;border:1px solid #9bddd43d;background:#89d6c90a;border-radius:99px;padding:5px 10px;font-size:12px;line-height:1.5}
.access-status svg{width:14px;height:14px}
.access-expired{background:linear-gradient(125deg,#363047,#282039);border-color:#a990b344}
.access-expired .access-status{color:#f1d1d9;border-color:#daa6b33b;background:#daa6b309}
.access-card h2{font-size:24px;line-height:1.25;letter-spacing:-.5px;margin-bottom:18px}
.access-caption{font-size:12px;color:#b6c5e5;line-height:1.6}
.access-date{font-size:16px;font-weight:600;line-height:1.7;margin-top:3px;font-variant-numeric:tabular-nums}
.access-date span{font-size:10px;font-weight:400;color:#b6c5e5}
.access-footnote{font-size:11px;line-height:1.65;color:#c1b9cf;margin-top:14px}
.renewal-panel{padding:24px;min-width:0}
.renewal-panel h2{font-size:20px}
.section-note{color:var(--slate);font-size:12px;line-height:1.65;margin:8px 0 18px}
.tariffs{display:grid;gap:0}
.tariff{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0;padding:15px 0;border-top:1px solid var(--line)}
.tariff:last-child{padding-bottom:0}
.tariff-info{display:grid;gap:5px;min-width:0}
.tariff-label{font-size:12px;color:var(--slate);line-height:1.4;overflow-wrap:anywhere}
.price{font-size:20px;font-weight:650;line-height:1.3;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.price span{font-size:15px;font-weight:400;color:#677790}
.payment-button{background:#e6edf8;color:#2a4983;border:1px solid #cdd9ec;min-height:44px;padding:10px 13px;font-size:12px;border-radius:10px;flex:none}
.payment-button:hover{background:#d8e4f6;color:#193b79}
.support-note{grid-column:1;grid-row:2;font-size:12px;color:#9dafcc;line-height:1.8;padding:0 4px}
.support-note a{display:inline-flex;align-items:center;gap:4px;color:#d6e7ff;text-decoration:none;margin-left:3px;min-height:44px}
.support-note a:hover{text-decoration:underline;text-underline-offset:4px}
.support-note svg{width:14px;height:14px}
.account-footer{display:flex;align-items:baseline;gap:28px;border-top:1px solid #ffffff16;padding-top:22px;margin-top:46px;color:#8c9dbb}
.footer-brand{font-family:var(--display-font);font-size:14px;font-weight:700;color:#b4c0d8;flex:none}
.account-footer p{font-size:11px;line-height:1.8;max-width:750px}
@media(min-width:1600px){.page-shell{padding-top:42px}.welcome-grid{padding-top:24px;padding-bottom:32px}}
@media(max-width:1050px){.page-shell{padding:24px}.welcome-grid{gap:40px;padding-right:0}.hero-title{font-size:43px}.dashboard-grid{grid-template-columns:minmax(0,1fr) 300px;gap:18px}.devices-panel{padding:24px}.device-link{margin-left:58px}.renewal-panel,.access-card{padding:22px}.dashboard-heading{gap:20px}.account-identity{max-width:260px}}
@media(max-width:780px){.page-shell{padding:20px}.site-header{margin-bottom:28px}.welcome-grid{grid-template-columns:minmax(0,1fr) minmax(300px,.9fr);gap:28px}.welcome-art{width:180px;height:160px}.welcome-art img{width:180px;height:180px}.hero-title{font-size:36px}.login-panel{padding:28px 24px}.dashboard-heading{align-items:flex-start;flex-direction:column;gap:15px}.account-identity{max-width:100%;font-size:12px}.dashboard-heading h1{font-size:30px}.dashboard-grid{grid-template-columns:1fr;gap:18px}.access-card{grid-column:1;grid-row:1;padding:20px 24px;display:grid;grid-template-columns:1fr auto;column-gap:16px}.access-card-top{grid-column:2;grid-row:1 / 4;flex-direction:column-reverse;justify-content:center;margin:0;gap:10px}.access-card h2{font-size:22px;margin-bottom:9px}.access-caption{font-size:12px}.access-date{font-size:16px}.access-footnote{grid-column:1/-1}.access-card-top img{width:44px;height:44px;border-radius:13px}.access-status{padding:4px 8px;font-size:11px}.devices-panel{grid-column:1;grid-row:2}.renewal-panel{grid-column:1;grid-row:3}.support-note{grid-row:4}.device-link{margin-left:0}.tariffs{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.tariff{align-items:flex-start;flex-direction:column;gap:14px}.tariff:last-child{padding-bottom:15px}.payment-button{width:100%}.account-footer{gap:18px;margin-top:34px}}
@media(max-width:650px){.page-shell{padding:18px 16px 24px}.site-header{padding-bottom:18px;margin-bottom:22px;gap:12px}.brand{gap:10px}.brand-icon{width:42px;height:42px;border-radius:12px}.brand-wordmark{font-size:23px}.header-caption{font-size:11px;max-width:75px;text-align:right;line-height:1.5}.welcome-grid{grid-template-columns:1fr;gap:22px;padding:0;max-width:440px;margin:0 auto}.welcome-intro{padding:0}.welcome-art,.hero-title{display:none}.welcome-intro .service-description{font-size:14px;margin:0;max-width:360px;line-height:1.6}.welcome-offer{margin-top:13px;gap:10px}.trial-offer{font-size:12px;padding:6px 10px}.welcome-offer p{font-size:11px;max-width:145px}.login-panel{max-width:none;justify-self:stretch;padding:26px 24px;border-radius:22px}.login-panel h2{font-size:26px;margin-bottom:24px}.auth-links{font-size:12px}.auth-note{margin-bottom:20px}.message{font-size:13px;padding:14px 16px}.dashboard-heading{margin-bottom:22px;gap:13px}.dashboard-heading h1{font-size:30px}.dashboard-heading .service-description{font-size:13px;margin-top:9px}.account-actions{gap:2px}.header-action{padding:9px;font-size:12px;gap:5px}.header-action svg{display:none}.devices-panel{padding:22px}.section-heading h2{font-size:22px}.section-heading{gap:12px;margin-bottom:18px}.connect-submit button{width:100%;font-size:14px}.device-row{column-gap:12px;row-gap:8px;padding:18px 0}.device-details{min-width:130px}.device-link,.device-unavailable{margin-left:57px;min-height:36px}.device-details h3{font-size:15px}.empty-devices{padding:30px 14px;min-height:224px}.empty-devices h3{font-size:15px}.empty-devices p{font-size:12px}.empty-symbol{width:52px;height:52px;margin-bottom:16px}.access-card{padding:20px;border-radius:22px;column-gap:12px}.access-card h2{font-size:21px}.access-date{font-size:15px}.access-card-top img{width:42px;height:42px}.access-status{font-size:10px;padding:4px 7px}.access-status svg{width:12px;height:12px}.renewal-panel{padding:22px;border-radius:22px}.tariffs{grid-template-columns:1fr;gap:0}.tariff{flex-direction:row;align-items:center;padding:16px 0}.tariff:last-child{padding-bottom:0}.payment-button{width:auto;min-width:96px}.tariff-label{font-size:13px}.price{font-size:22px}.support-note{padding:0 3px}.account-footer{flex-direction:column;gap:8px;padding-top:20px;margin-top:30px}.account-footer p{font-size:11px;line-height:1.8}.footer-brand{font-size:13px}}
@media(max-width:359px){.page-shell{padding:16px 12px 22px}.brand-wordmark{font-size:20px}.brand-icon{width:38px;height:38px}.header-action{padding:8px}.login-panel{padding:24px 20px}.devices-panel,.renewal-panel{padding:20px}.access-card{padding:18px}.access-card h2{font-size:19px}.access-card-top img{display:none}.access-card-top{justify-content:flex-start}.access-date{font-size:13px}.device-count{font-size:12px;padding:5px 8px}.section-heading h2{font-size:20px}.connect-submit button{font-size:13px}.auth-links{font-size:11px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important}}
@media(max-width:650px){.device-link{min-height:44px}.hero-title{display:block;position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}}
@media(max-width:780px){.account-sidebar{display:contents}}