@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');
:root{--bg:#0a0e11;--panel:#11171b;--line:#202a30;--text:#f1f5f3;--muted:#859198;--acid:#c8ff3d;--orange:#ff6a32}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font:14px Manrope,system-ui,sans-serif}.shell{min-height:100vh;display:grid;grid-template-columns:230px 1fr}aside{position:fixed;width:230px;height:100vh;border-right:1px solid var(--line);padding:32px 22px;display:flex;flex-direction:column;background:#0c1114}.brand{color:white;text-decoration:none;display:flex;align-items:center;gap:12px}.brand>span{display:grid;place-items:center;width:38px;height:38px;background:var(--acid);color:#0b100d;font-size:21px;font-weight:900;clip-path:polygon(18% 0,100% 0,82% 100%,0 100%)}.brand strong{font-size:14px;line-height:1.05;text-transform:uppercase}.brand i{color:var(--acid);font-style:normal}nav{margin-top:54px;display:grid;gap:8px}nav button{border:0;background:transparent;color:#78858b;text-align:left;padding:13px 14px;border-radius:8px;font:inherit;font-size:18px;cursor:pointer}nav button b{font-size:13px;margin-left:12px}nav button.active{background:#18201d;color:var(--acid)}.aside-status{margin-top:auto;border-top:1px solid var(--line);padding-top:20px;display:flex;gap:10px;align-items:center}.aside-status em{width:8px;height:8px;background:var(--acid);border-radius:50%;box-shadow:0 0 12px var(--acid)}small,.aside-status small{color:var(--muted);font-size:11px}.aside-status b{display:block;font-size:12px;margin-top:3px}main{grid-column:2;padding:0 5vw 60px;max-width:1600px;width:100%;margin:auto}header{height:105px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}header p,.eyebrow,.pagehead span,.panel-title span{color:var(--acid);font-size:10px;letter-spacing:.22em;font-weight:800;margin:0 0 5px}h1{font-size:20px;margin:0}.icon{border:1px solid var(--line);background:var(--panel);color:white;width:40px;height:40px;border-radius:50%;cursor:pointer}.view{display:none}.view.active{display:block}.hero{min-height:360px;display:grid;grid-template-columns:1.2fr 1fr;align-items:center;border-bottom:1px solid var(--line);overflow:hidden}.hero h2{font-size:clamp(42px,5.3vw,78px);letter-spacing:-.06em;line-height:.92;margin:18px 0}.hero mark{background:none;color:var(--acid)}.hero p{color:var(--muted);max-width:570px;line-height:1.7}.primary{border:0;background:var(--acid);color:#10150f;padding:14px 20px;font-weight:800;border-radius:3px;cursor:pointer;margin-top:14px}.radar{width:280px;height:280px;margin:auto;border:1px solid #283139;border-radius:50%;display:grid;place-items:center;position:relative;background:radial-gradient(circle,#18201d 0 2px,transparent 3px),conic-gradient(from 20deg,transparent 0 75%,#c8ff3d12)}.radar:before,.radar:after,.radar i{content:"";position:absolute;border:1px solid #283139;border-radius:50%;inset:18%}.radar:after{inset:36%}.radar i:nth-child(1){width:1px;height:100%;inset:0 50%;border:0;background:#283139;border-radius:0}.radar i:nth-child(2){height:1px;width:100%;inset:50% 0;border:0;background:#283139;border-radius:0}.radar b{font-size:48px;color:var(--acid)}.metrics{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid var(--line)}.metrics article{padding:28px 3vw;border-right:1px solid var(--line)}.metrics article:first-child{padding-left:0}.metrics span{font-size:9px;letter-spacing:.18em;color:var(--muted)}.metrics strong{font-size:28px;display:block;margin:10px 0}.split{display:grid;grid-template-columns:1.5fr 1fr;gap:20px;margin-top:34px}.panel{border:1px solid var(--line);background:var(--panel);padding:24px}.panel-title,.pagehead{display:flex;justify-content:space-between;align-items:start}.panel-title h3,.pagehead h2{margin:4px 0;font-size:22px}.panel-title button{background:none;border:0;color:var(--acid);cursor:pointer}.server-row{display:flex;align-items:center;gap:14px;padding:14px 0;border-top:1px solid var(--line)}.server-row:first-child{margin-top:16px}.server-row>i{width:9px;height:9px;background:var(--acid);border-radius:50%}.server-row b{flex:1}.server-row small{font-family:monospace}.action{width:100%;display:flex;gap:15px;align-items:center;padding:17px 0;border:0;border-top:1px solid var(--line);background:none;color:white;text-align:left;cursor:pointer}.action>span{display:flex;flex-direction:column;gap:4px}.pagehead{padding:46px 0 28px}.pagehead p{color:var(--muted)}.server-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.server-card{border:1px solid var(--line);background:var(--panel);padding:22px;min-height:150px}.server-card i{display:block;width:8px;height:8px;background:var(--acid);border-radius:50%;margin-bottom:24px}.server-card b{font-size:16px}.server-card small{display:block;margin-top:8px}form{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}.form-group{border:1px solid var(--line);background:var(--panel);padding:24px}.form-group h3{margin:0 0 20px}.field{margin:15px 0}.field label{display:block;color:#b4bec2;font-size:12px;margin-bottom:7px}.field input,.field select{width:100%;background:#0a0f12;border:1px solid #2a353b;color:white;padding:12px;border-radius:4px}.toggle{display:flex!important;justify-content:space-between;align-items:center}.toggle input{width:42px;height:22px;accent-color:var(--acid)}.log{padding:0}.log-row{display:grid;grid-template-columns:150px 80px 1fr;padding:16px 20px;border-bottom:1px solid var(--line)}.log-row .success{color:var(--acid)}.log-row .error{color:#ff765f}#toast{position:fixed;right:24px;bottom:24px;background:var(--acid);color:#10150f;padding:14px 20px;font-weight:700;transform:translateY(100px);transition:.25s}#toast.show{transform:none}
@media(max-width:900px){.shell{grid-template-columns:76px 1fr}aside{width:76px;padding:25px 14px}.brand strong,nav b,.aside-status div{display:none}.brand>span{margin:auto}nav button{text-align:center;padding:13px 4px}.aside-status{justify-content:center}main{grid-column:2}.hero{grid-template-columns:1fr}.radar{display:none}.split{grid-template-columns:1fr}.server-grid{grid-template-columns:repeat(2,1fr)}form{grid-template-columns:1fr}}
@media(max-width:600px){.shell{display:block}aside{position:fixed;z-index:10;bottom:0;top:auto;width:100%;height:66px;padding:7px 12px;border:0;border-top:1px solid var(--line)}.brand,.aside-status{display:none}nav{margin:0;display:flex;justify-content:space-around}nav button{width:23%;font-size:20px}nav button b{display:block;margin:2px 0 0;font-size:8px}main{grid-column:auto;padding:0 18px 90px}header{height:76px}.hero{min-height:400px}.hero h2{font-size:48px}.metrics{grid-template-columns:1fr}.metrics article,.metrics article:first-child{padding:20px 0;border-right:0;border-bottom:1px solid var(--line)}.server-grid{grid-template-columns:1fr}.pagehead{display:block}.pagehead .primary{width:100%}.log-row{grid-template-columns:1fr;gap:4px}}

/* Компактные карточки не растягиваются до высоты соседней большой группы. */
#settingsForm{display:block;columns:2;column-gap:18px}
.form-group{display:inline-block;width:100%;margin:0 0 18px;break-inside:avoid;vertical-align:top}
.form-group.compact{padding-bottom:16px}
.form-group.compact h3{margin-bottom:12px}
.form-group.compact .field{margin-bottom:0}

/* Интерактивный индикатор объясняет проблему и ведёт к нужному разделу. */
.aside-status{position:relative;width:100%;border-left:0;border-right:0;border-bottom:0;background:transparent;color:inherit;text-align:left;cursor:pointer;font:inherit;z-index:51}
.aside-status>span{display:block}
.aside-status:after{content:attr(data-tooltip);position:absolute;left:calc(100% + 14px);bottom:0;width:260px;padding:12px 14px;border:1px solid var(--line);border-radius:6px;background:#18201d;color:var(--text);font-size:12px;line-height:1.5;box-shadow:0 12px 30px #0008;opacity:0;visibility:hidden;transform:translateX(-6px);transition:.18s;pointer-events:none;z-index:100}
.aside-status:hover:after,.aside-status:focus-visible:after{opacity:1;visibility:visible;transform:none}
.aside-status:focus-visible{outline:1px solid var(--acid);outline-offset:5px}
@media(max-width:900px){.aside-status>span{display:none}.aside-status:after{left:calc(100% + 8px)}}
@media(max-width:900px){#settingsForm{columns:1}}
@media(max-width:600px){.aside-status{display:none}}

/* Motion system: живые переходы без тяжёлых библиотек. */
@keyframes view-enter{from{opacity:0;transform:translateY(14px);filter:blur(3px)}to{opacity:1;transform:none;filter:none}}
@keyframes card-enter{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes status-pulse{0%,100%{box-shadow:0 0 8px color-mix(in srgb,var(--acid) 55%,transparent)}50%{box-shadow:0 0 18px var(--acid)}}
.view.active{animation:view-enter .42s cubic-bezier(.22,1,.36,1) both}
.view.active .hero,.view.active .pagehead{animation:card-enter .48s .05s cubic-bezier(.22,1,.36,1) both}
.view.active .metrics,.view.active .split,.view.active #settingsForm,.view.active .server-grid,.view.active.log{animation:card-enter .5s .12s cubic-bezier(.22,1,.36,1) both}

button,a,.panel,.server-card,.form-group,.field input,.field select{transition:color .2s ease,background-color .2s ease,border-color .2s ease,box-shadow .2s ease,transform .2s ease,opacity .2s ease}
button:active{transform:scale(.97)}
.primary{position:relative;overflow:hidden;box-shadow:0 0 0 transparent}
.primary:before{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 25%,#fff8 48%,transparent 70%);transform:translateX(-130%);transition:transform .5s ease}
.primary:hover{transform:translateY(-2px);box-shadow:0 10px 28px #c8ff3d26}
.primary:hover:before{transform:translateX(130%)}
.icon:hover{color:var(--acid);border-color:var(--acid);transform:rotate(45deg)}
nav button:hover{color:var(--text);background:#141b1e;transform:translateX(3px)}
nav button.active:hover{color:var(--acid);background:#18201d}
.panel:hover,.form-group:hover{border-color:#344149}
.server-card:hover{border-color:var(--acid);transform:translateY(-4px);box-shadow:0 14px 36px #0005}
.action:hover{color:var(--acid);padding-left:8px}
.panel-title button:hover{transform:translateX(3px)}
.field input:hover,.field select:hover{border-color:#46555d}
.field input:focus,.field select:focus{outline:0;border-color:var(--acid);box-shadow:0 0 0 3px #c8ff3d16}
.aside-status em{animation:status-pulse 2s ease-in-out infinite}
.aside-status:hover{color:var(--acid)}

@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}}

/* Полноэкранная авторизация и переход в приложение. */
@keyframes auth-in{from{opacity:0;transform:translateY(22px) scale(.97)}to{opacity:1;transform:none}}
@keyframes orbit-spin{to{transform:rotate(360deg)}}
@keyframes auth-flow{0%{clip-path:circle(100% at 50% 50%);opacity:1}55%{clip-path:circle(18% at 50% 50%);opacity:1}100%{clip-path:circle(0 at 50% 50%);opacity:0}}
@keyframes shake{20%,60%{transform:translateX(-8px)}40%,80%{transform:translateX(8px)}}
.auth-screen{position:fixed;inset:0;z-index:100;display:grid;grid-template-columns:minmax(280px,420px) minmax(360px,520px);align-items:center;justify-content:center;gap:9vw;padding:32px;background:radial-gradient(circle at 25% 30%,#17231d 0,transparent 34%),var(--bg);transition:opacity .3s ease}
.auth-screen.hidden{display:none}.auth-screen.authenticated{pointer-events:none;animation:auth-flow .85s cubic-bezier(.65,0,.35,1) forwards}
.shell.locked{visibility:hidden;opacity:0}.shell:not(.locked){visibility:visible;opacity:1}.shell:not(.locked) main{animation:view-enter .8s .25s cubic-bezier(.22,1,.36,1) both}
.auth-card{display:block;columns:auto;width:100%;max-width:480px;padding:42px;border:1px solid #2a353b;background:#10171aee;box-shadow:0 30px 80px #0008;animation:auth-in .6s cubic-bezier(.22,1,.36,1) both}
.auth-card.shake{animation:shake .35s ease}.auth-kicker{color:var(--acid);font-size:10px;letter-spacing:.24em;font-weight:800}.auth-card h1{font-size:36px;margin:12px 0}.auth-card>p{color:var(--muted);line-height:1.65;margin:0 0 28px}.auth-card>label{display:block;margin-bottom:8px;color:#bdc7cb;font-size:12px}.password-field{position:relative}.password-field input{width:100%;height:52px;padding:0 54px 0 15px;border:1px solid #354249;border-radius:4px;background:#080d0f;color:white;font:inherit;transition:.2s}.password-field input:focus{outline:0;border-color:var(--acid);box-shadow:0 0 0 3px #c8ff3d1a}.password-field button{position:absolute;right:5px;top:5px;width:42px;height:42px;border:0;background:transparent;color:var(--muted);cursor:pointer}.auth-card #authError{display:block;min-height:22px;padding-top:8px;color:#ff765f}.auth-submit{width:100%;display:flex;justify-content:space-between;margin-top:10px;font:inherit}.auth-submit:disabled{opacity:.55;cursor:wait}
.auth-orbit{position:relative;width:min(32vw,390px);aspect-ratio:1;display:grid;place-items:center;border:1px solid #2b383d;border-radius:50%;background:radial-gradient(circle,#c8ff3d12,transparent 55%)}.auth-orbit:before,.auth-orbit:after,.auth-orbit i{content:"";position:absolute;border:1px solid #2b383d;border-radius:50%;inset:17%}.auth-orbit:after{inset:34%}.auth-orbit i:first-child{inset:-1px;border-color:transparent var(--acid) transparent transparent;animation:orbit-spin 5s linear infinite}.auth-orbit i:nth-child(2){inset:8%;border-color:transparent transparent #4d635a transparent;animation:orbit-spin 8s linear reverse infinite}.auth-orbit b{font-size:72px;color:var(--acid);text-shadow:0 0 35px #c8ff3d55}
@media(max-width:800px){.auth-screen{grid-template-columns:1fr}.auth-orbit{position:absolute;width:360px;opacity:.2}.auth-card{position:relative;margin:auto;backdrop-filter:blur(10px)}}
@media(max-width:520px){.auth-screen{padding:18px}.auth-card{padding:28px 22px}.auth-card h1{font-size:29px}}
.header-actions{display:flex;gap:10px}

/* Подсказка статуса всегда поверх контента основной страницы. */
aside{z-index:50;overflow:visible}
.aside-status:after{position:fixed;left:244px;bottom:28px;z-index:1000}
@media(max-width:900px){.aside-status:after{left:88px}}

/* Карточка быстрого подключения к подписке. */
.share-card{position:relative;display:grid;grid-template-columns:1fr auto;align-items:center;gap:36px;margin-bottom:28px;padding:30px 34px;border:1px solid #314039;background:linear-gradient(125deg,#121a1c 0,#10171a 62%,#18251d 100%);overflow:hidden}
.share-card:before{content:"";position:absolute;width:260px;height:260px;right:-90px;top:-110px;border:1px solid #c8ff3d25;border-radius:50%;box-shadow:0 0 70px #c8ff3d0d}.share-copy{position:relative;z-index:1}.share-copy>span,.qr-wrap>span{color:var(--acid);font-size:9px;letter-spacing:.2em;font-weight:800}.share-copy h3{font-size:22px;margin:7px 0}.share-copy>p{margin:0 0 18px;color:var(--muted)}.copy-field{display:flex;max-width:680px}.copy-field input{min-width:0;flex:1;padding:13px 15px;border:1px solid #354249;border-right:0;border-radius:4px 0 0 4px;background:#080d0f;color:#dce5e1;font:12px monospace}.copy-field button{min-width:130px;border:0;border-radius:0 4px 4px 0;background:var(--acid);color:#10150f;font-weight:800;cursor:pointer}.copy-field button i{display:none;font-style:normal}.copy-field button.copied b{display:none}.copy-field button.copied i{display:inline}.share-copy>small{display:block;height:16px;margin-top:7px;color:var(--acid)}.qr-wrap{position:relative;z-index:1;display:grid;justify-items:center;gap:8px;padding:12px;border:1px solid #34443b;background:#dfffa0;border-radius:7px;transition:.25s}.qr-wrap:hover{transform:rotate(1.5deg) scale(1.025);box-shadow:0 12px 35px #0006}.qr-wrap img{display:block;width:138px;height:138px}.qr-wrap>span{color:#172016}
@media(max-width:700px){.share-card{grid-template-columns:1fr;padding:24px}.qr-wrap{justify-self:center}.copy-field{display:grid}.copy-field input{border-right:1px solid #354249;border-radius:4px 4px 0 0}.copy-field button{min-height:44px;border-radius:0 0 4px 4px}}

/* Управление клиентами и персональными подписками. */
.client-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:20px}.client-metrics article{padding:18px 22px;border:1px solid var(--line);background:var(--panel)}.client-metrics span{color:var(--muted);font-size:9px;letter-spacing:.18em}.client-metrics b{display:block;margin-top:6px;font-size:25px}.client-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}.client-card{padding:22px;border:1px solid var(--line);background:var(--panel);transition:.25s}.client-card:hover{border-color:#3b4a51;transform:translateY(-2px)}.client-top{display:flex;align-items:center;gap:12px}.client-avatar{display:grid;place-items:center;width:43px;height:43px;background:var(--acid);color:#10150f;font-weight:900}.client-top h3{margin:0 0 3px}.client-top>i{margin-left:auto;padding:5px 8px;border-radius:20px;font-size:9px;font-style:normal;text-transform:uppercase}.client-state.active{color:var(--acid);background:#c8ff3d12}.client-state.off,.client-state.expired{color:#ff765f;background:#ff765f12}.client-info{display:grid;grid-template-columns:repeat(4,1fr);margin:20px 0;border:1px solid var(--line)}.client-info span{padding:11px;color:var(--muted);font-size:9px;border-right:1px solid var(--line)}.client-info span:last-child{border:0}.client-info b{display:block;margin-top:5px;color:var(--text);font-size:12px}.client-link{display:flex}.client-link input{min-width:0;flex:1;padding:10px;border:1px solid var(--line);background:#090e10;color:var(--muted);font:10px monospace}.client-link button{border:0;background:var(--acid);font-weight:800}.client-actions{display:flex;gap:8px;margin-top:14px}.client-actions button{border:1px solid var(--line);background:transparent;color:var(--text);padding:8px 10px;cursor:pointer}.client-actions button:hover{border-color:var(--acid);color:var(--acid)}.client-actions .danger:hover{border-color:#ff765f;color:#ff765f}.empty-clients{grid-column:1/-1;padding:55px;text-align:center;border:1px dashed #344149;color:var(--muted)}.empty-clients b{color:var(--text);font-size:18px}
dialog{width:min(760px,calc(100% - 30px));max-height:90vh;padding:0;border:1px solid #354249;background:#10171a;color:var(--text);box-shadow:0 30px 100px #000c}dialog::backdrop{background:#050809d9;backdrop-filter:blur(5px)}#clientForm{display:block;columns:auto;padding:28px}.modal-head{display:flex;justify-content:space-between;align-items:start}.modal-head span{color:var(--acid);font-size:9px;letter-spacing:.2em}.modal-head h2{margin:6px 0 20px}.modal-head button{border:0;background:none;color:var(--muted);font-size:26px;cursor:pointer}.modal-fields{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}#clientForm label{display:grid;gap:6px;color:#b9c3c7;font-size:11px}#clientForm input,#clientForm textarea{width:100%;padding:11px;border:1px solid #344149;background:#080d0f;color:white}.client-enabled{display:flex!important;margin:18px 0}#clientForm fieldset{margin:18px 0;padding:16px;border:1px solid var(--line)}#clientForm fieldset p{color:var(--muted);font-size:11px}#clientServers{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;max-height:180px;overflow:auto}#clientServers label{display:flex;align-items:center;padding:9px;background:#0b1113}#clientServers input{width:auto}.modal-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:20px}.modal-actions button{padding:12px 18px}.modal-actions>button:first-child{border:1px solid var(--line);background:transparent;color:white}
@media(max-width:900px){.client-grid{grid-template-columns:1fr}}@media(max-width:600px){.client-metrics{grid-template-columns:1fr}.client-info{grid-template-columns:repeat(2,1fr)}.modal-fields,#clientServers{grid-template-columns:1fr}}
.client-share{display:grid;grid-template-columns:1fr 58px;gap:10px;align-items:stretch}.client-qr{width:58px;height:58px;padding:4px;background:#dfffa0;border-radius:3px}
/* Несколько онлайн-источников. */
.source-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}.source-card{padding:24px;border:1px solid var(--line);background:var(--panel)}.source-head{display:flex;justify-content:space-between}.source-head span{color:var(--acid);font-size:9px;letter-spacing:.18em}.source-head h3{margin:6px 0 0}.source-head i{height:max-content;padding:5px 8px;border-radius:20px;font-size:9px;font-style:normal}.source-head .good{color:var(--acid);background:#c8ff3d12}.source-head .bad{color:#ff765f;background:#ff765f12}.source-error{padding:10px;background:#ff765f0d;color:#ff8b78;font-size:11px}.source-stats{display:grid;grid-template-columns:repeat(3,1fr);margin:18px 0;border:1px solid var(--line)}.source-stats span{padding:10px;color:var(--muted);font-size:9px}.source-stats b{display:block;margin-top:4px;color:white}.source-servers{display:flex;flex-wrap:wrap;gap:6px;max-height:150px;overflow:auto}.source-servers span{padding:6px 8px;background:#0a1012;color:#bcc7ca;font-size:10px}.source-options{margin-top:16px}@media(max-width:900px){.source-grid{grid-template-columns:1fr}}

/* Полная форма создания и редактирования онлайн-источника. */
#sourceForm{display:block;columns:auto;padding:28px}
#sourceForm>.modal-head{margin-bottom:4px;padding-bottom:18px;border-bottom:1px solid var(--line)}
#sourceForm>label{display:grid;gap:7px;margin-top:15px;color:#b9c3c7;font-size:11px}
#sourceForm input{width:100%;min-height:42px;padding:11px;border:1px solid #344149;border-radius:3px;background:#080d0f;color:white;font:inherit;transition:border-color .2s,box-shadow .2s}
#sourceForm input:hover{border-color:#4a5b62}
#sourceForm input:focus{outline:0;border-color:var(--acid);box-shadow:0 0 0 3px #c8ff3d16}
#sourceForm input[type="password"]{font-family:monospace;letter-spacing:.06em}
#sourceForm .modal-fields{margin-top:15px}
#sourceForm .modal-fields>label{display:grid;gap:7px;color:#b9c3c7;font-size:11px}
#sourceForm .source-options{padding:16px;border:1px solid var(--line);background:#0c1214;align-items:center}
#sourceForm .source-options .toggle{display:flex!important;min-height:42px;margin:0;padding:0 4px;justify-content:space-between;align-items:center}
#sourceForm .source-options .toggle input{width:42px;min-height:22px;height:22px;margin:0;accent-color:var(--acid)}
#sourceForm .modal-actions{padding-top:18px;border-top:1px solid var(--line)}
#sourceForm .modal-actions .primary{margin-top:0}
#sourceForm:invalid .modal-actions .primary{box-shadow:none}
@media(max-width:600px){#sourceForm{padding:22px 18px}#sourceForm .source-options{padding:12px}}

/* Обратная связь во время проверки крупного источника. */
@keyframes source-spin{to{transform:rotate(360deg)}}
.source-progress{display:none;align-items:center;gap:10px;margin-top:16px;padding:12px 14px;border:1px solid #354249;background:#0b1214;color:#cbd5d1;font-size:12px}.source-progress.active{display:flex}.source-progress>i,.source-submit:disabled>i{width:16px;height:16px;border:2px solid #53615d;border-top-color:var(--acid);border-radius:50%;animation:source-spin .7s linear infinite}.source-progress.failed{border-color:#ff765f55;color:#ff8b78}.source-progress.failed>i{border-color:#ff765f;border-top-color:transparent}.source-submit>i{display:none}.source-submit:disabled>i{display:block}.source-submit:disabled{cursor:wait;opacity:.75}.source-submit:disabled>span{opacity:.7}

/* Персональный QR-код достаточно крупный для сканирования с другого экрана. */
.client-share{grid-template-columns:minmax(0,1fr) 112px;align-items:center}.client-qr{width:112px;height:112px;padding:7px}.client-link{min-width:0}.client-link input{min-width:0}
@media(max-width:520px){.client-share{grid-template-columns:1fr}.client-qr{width:148px;height:148px;justify-self:center}}
.client-link button{cursor:pointer}

/* Групповое назначение и сортировка серверов клиента. */
#clientServers{display:block;max-height:280px}.server-source-group{margin-bottom:10px;border:1px solid var(--line);background:#0a1012}.server-source-group>.source-select{display:grid!important;grid-template-columns:auto 1fr auto;gap:9px;padding:11px 12px;background:#151e20;color:white!important}.server-source-group>.source-select small{align-self:center}.server-source-group>div{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line)}.server-source-group>div label{display:flex!important;min-width:0;background:#0b1113}.server-source-group>div span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.server-order-head{display:flex;justify-content:space-between;align-items:end;margin:18px 0 8px}.server-order-head small{color:var(--muted)}#clientOrder{display:grid;gap:4px;max-height:230px;overflow:auto}#clientOrder>div{display:grid;grid-template-columns:28px 1fr 34px 34px;align-items:center;gap:5px;padding:7px;background:#0b1113;border:1px solid transparent}#clientOrder>div:hover{border-color:#344149}#clientOrder i{display:grid;place-items:center;width:23px;height:23px;background:#18231d;color:var(--acid);font-style:normal;font-size:10px}#clientOrder span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#clientOrder button{height:30px;border:1px solid var(--line);background:#131b1e;color:white;cursor:pointer}#clientOrder button:hover{border-color:var(--acid);color:var(--acid)}
@media(max-width:600px){.server-source-group>div{grid-template-columns:1fr}.server-order-head{display:block}.server-order-head small{display:block;margin-top:4px}}

/* Список устройств клиента. */
.device-modal{padding:28px}.device-intro{margin:-8px 0 20px;color:var(--muted);font-size:12px}.device-row{display:grid;grid-template-columns:42px minmax(0,1fr) auto;gap:14px;align-items:start;padding:16px 0;border-top:1px solid var(--line)}.device-icon{display:grid;place-items:center;width:42px;height:42px;background:#18231d;color:var(--acid);font-size:22px}.device-main{min-width:0}.device-main>b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px}.device-main>small{display:block;margin-top:5px;font:10px monospace}.device-main dl{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:14px 0 0}.device-main dl div{padding:8px;background:#0a1012}.device-main dt{color:var(--muted);font-size:8px;text-transform:uppercase;letter-spacing:.08em}.device-main dd{margin:4px 0 0;font-size:10px}.device-delete{padding:8px 10px;border:1px solid #ff765f55;background:transparent;color:#ff8b78;cursor:pointer}.device-delete:hover{border-color:#ff765f}.empty-devices{padding:38px;text-align:center;border:1px dashed #344149;color:var(--muted)}.empty-devices b{color:var(--text)}
@media(max-width:650px){.device-row{grid-template-columns:36px 1fr}.device-icon{width:36px;height:36px}.device-delete{grid-column:2;justify-self:start}.device-main dl{grid-template-columns:repeat(2,1fr)}}

/* Квоты и служебные данные, переданные источником подписки. */
.subscription-info{margin:0 0 18px;padding:14px;border:1px solid #33433c;background:#0b1211}.subscription-info-title{display:flex;justify-content:space-between;gap:12px;margin-bottom:11px;color:var(--acid);font-size:9px;letter-spacing:.13em}.subscription-info-title b{color:#dbe5e0;letter-spacing:0}.subscription-quota{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line)}.subscription-quota span{padding:10px;background:#0c1315;color:var(--muted);font-size:9px}.subscription-quota b{display:block;margin-top:5px;color:white;font-size:12px}.subscription-extra{display:flex;flex-wrap:wrap;gap:8px 16px;margin-top:10px;color:var(--muted)}.subscription-extra small{font-size:10px}.subscription-extra b{color:#dbe5e0}.subscription-extra a{color:var(--acid);font-size:10px;text-decoration:none}.source-info-empty{margin:0 0 18px;padding:11px;border:1px dashed var(--line);color:var(--muted);font-size:10px}@media(max-width:600px){.subscription-quota{grid-template-columns:repeat(2,1fr)}}
.client-info .client-expiry small{display:block;margin-top:3px;color:var(--muted);font-size:8px}.client-info .client-expiry.soon b{color:#ffd166}.client-info .client-expiry.expired b{color:#ff765f}.client-info .client-expiry.unlimited b{color:var(--acid)}
/* Управление серверами источника в отдельном окне. */
.source-servers-button{display:flex;align-items:center;gap:6px}.source-servers-button b{display:grid;place-items:center;min-width:20px;height:20px;border-radius:10px;background:#c8ff3d18;color:var(--acid);font-size:9px}.source-servers-button i{padding:3px 6px;border-radius:9px;background:#ff765f16;color:#ff8b78;font-size:8px;font-style:normal}.source-servers-modal{padding:28px}.source-servers-modal>p{margin:-8px 0 16px;color:var(--muted);font-size:11px}.server-search{display:flex;align-items:center;gap:9px;margin-bottom:12px;padding:0 12px;border:1px solid var(--line);background:#080d0f;color:var(--muted);font-size:20px}.server-search:focus-within{border-color:var(--acid)}.server-search input{width:100%;padding:12px 0;border:0;outline:0;background:transparent;color:white}.source-servers-modal #sourceServerList{display:grid;gap:6px;max-height:52vh;overflow:auto}.source-server-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 14px;border:1px solid var(--line);background:#0b1113;cursor:pointer}.source-server-row:hover{border-color:#45564d}.source-server-row>span{min-width:0}.source-server-row b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px}.source-server-row small{display:block;margin-top:4px;color:var(--acid);font-size:9px}.source-server-row input{width:18px;height:18px;accent-color:var(--acid)}.source-server-row.disabled{border-color:#ff765f28;opacity:.65}.source-server-row.disabled b{text-decoration:line-through}.source-server-row.disabled small{color:#ff8b78}