:root{--bg:#F4F5F7;--surface:#FFFFFF;--text:#17202A;--muted:#5B6573;--soft:#3F4955;--line:#D9DEE5;--field:#C3CAD4;--accent:#1D4ED8;--accent-soft:#E8EEFC;--accent-ink:#DCE6FB;--warn-bg:#FFF4E5;--warn-line:#F3D3A6;--warn:#7A4300;--warn-btn:#C98A3A;--bad:#9B2C1F;--bad-line:#E7B7B0;--ok:#2F7D4F;--off:#8A94A3;--chip:#EEF0F3}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
a{color:var(--accent);text-decoration:none}a:hover{color:#1E3A8A}
button{font-family:inherit;cursor:pointer}
.link{background:none;border:0;padding:0;color:var(--muted);font-size:14px}
.chip{font-size:12px;padding:2px 8px;border-radius:999px;background:var(--chip);color:var(--soft)}
.dot{display:inline-block;width:10px;height:10px;border-radius:999px;background:var(--off);flex:none}
.dot.ok{background:var(--ok)}.dot.bad{background:var(--bad)}.dot.on{background:var(--accent)}
.error{color:var(--bad);font-size:14px}
.trial{background:var(--warn-bg);border-bottom:1px solid var(--warn-line);color:var(--warn);padding:10px 24px;display:flex;align-items:center;gap:12px;font-size:14px;flex-wrap:wrap}
.trial form{margin-left:auto}
.trial button{height:32px;padding:0 14px;border:1px solid var(--warn-btn);background:#fff;color:var(--warn);border-radius:6px;font-size:13px;font-weight:600}
/* компьютер */
.top{min-height:64px;background:var(--surface);border-bottom:1px solid var(--line);padding:0 24px;display:flex;align-items:center;gap:28px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;font-size:18px;font-weight:700;color:var(--text)}
.menu{display:flex;gap:4px;font-size:15px;flex-wrap:wrap}
.menu a{padding:8px 12px;border-radius:8px;color:var(--text)}
.menu a.on{background:var(--accent-soft);color:var(--accent);font-weight:600}
.who{margin-left:auto;display:flex;align-items:center;gap:16px;font-size:14px}
.who>a{color:var(--muted)}
.who .me{display:flex;align-items:center;gap:8px;padding:6px 10px;border:1px solid var(--line);border-radius:8px}
.page{padding:24px;display:flex;flex-direction:column;gap:20px;max-width:1440px}
.page h1{margin:0;font-size:24px}
.sub{font-size:14px;color:var(--muted)}
.tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
@media (max-width:900px){.tiles,.two{grid-template-columns:1fr}}
.card{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:18px;display:flex;flex-direction:column;gap:10px}
.card h2{margin:0;font-size:16px}
.card .label{font-size:13px;color:var(--muted)}
.card .later{font-size:14px;color:var(--soft)}
.rows{display:flex;flex-direction:column;gap:10px;font-size:14px}
.row{display:flex;align-items:center;gap:8px}
textarea,input[type=text],input[type=password],select{border:1px solid var(--field);border-radius:8px;padding:10px 12px;font-size:16px;font-family:inherit;background:#fff;color:var(--text)}
.btn{height:44px;padding:0 18px;border:0;border-radius:8px;background:var(--accent);color:#fff;font-size:15px;font-weight:600}
.btn.ghost{background:#fff;color:var(--text);border:1px solid var(--field)}
.btn.danger{background:#fff;color:var(--bad);border:1px solid var(--bad-line)}
table.list{width:100%;border-collapse:collapse;font-size:14px}
table.list th,table.list td{text-align:left;padding:10px 8px;border-bottom:1px solid var(--line);vertical-align:middle}
.scroll{overflow-x:auto}
.secret{font-family:ui-monospace,Consolas,monospace;font-size:18px;padding:12px;border:1px dashed var(--accent);border-radius:8px;background:var(--accent-soft)}
/* вход на компьютере */
.login-wrap{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;padding:16px}
.login-brand{display:flex;align-items:center;gap:12px;font-size:26px;font-weight:700}
.login-card{width:100%;max-width:400px;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:32px;display:flex;flex-direction:column;gap:18px}
.login-card h1{margin:0;font-size:20px;font-weight:600}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:14px;color:var(--muted)}
.field input{height:44px}
.check{display:flex;align-items:center;gap:8px;font-size:14px}
.check input{width:18px;height:18px}
.login-card .btn{height:48px;font-size:16px}
/* ТСД */
body.tsd{min-height:100vh;display:flex;flex-direction:column}
.tsd-top{height:52px;background:var(--surface);border-bottom:1px solid var(--line);padding:0 16px;display:flex;align-items:center;gap:8px}
.tsd-top .name{font-size:17px;font-weight:700}
.tsd-top .now{font-size:15px;color:var(--soft)}
.tsd-top form{margin-left:auto}
.tsd-top .link{font-size:15px}
.tsd-trial{background:var(--warn-bg);color:var(--warn);padding:8px 16px;font-size:14px;font-weight:600;border-bottom:1px solid var(--warn-line)}
.offline{background:var(--bad);color:#fff;padding:8px 16px;font-size:15px;font-weight:600}
.tsd-main{flex:1;padding:16px;display:flex;flex-direction:column;gap:12px;padding-bottom:88px}
.scan label{font-size:14px;color:var(--soft)}
.scan input{width:100%;height:52px;border:2px solid var(--accent);border-radius:10px;font-size:18px}
.scan-result{font-size:15px;color:var(--soft);min-height:20px}
.work{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:14px;display:flex;flex-direction:column;gap:8px}
.work .label{font-size:13px;color:var(--muted)}
.work .title{font-size:18px;font-weight:700}
.work .text{font-size:15px;color:var(--soft)}
.tsd-btn{min-height:52px;background:var(--surface);border:1px solid var(--field);border-radius:10px;padding:0 14px;display:flex;align-items:center;gap:10px;font-size:16px;font-weight:600;color:var(--text)}
.msg{margin-top:auto;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:12px 14px;font-size:14px;color:var(--soft);line-height:1.45}
.msg b{color:var(--text)}
.msg button{margin-top:10px;height:44px;width:100%;border:1px solid var(--field);background:var(--bg);border-radius:8px;font-size:15px;font-weight:600;color:var(--text)}
.tabs{position:fixed;left:0;right:0;bottom:0;height:72px;background:var(--surface);border-top:1px solid var(--line);display:grid;grid-template-columns:1fr 1fr 1fr 1.35fr}
.tabs a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:var(--soft);font-size:12px;font-weight:500;border-top:3px solid transparent;min-width:0}
.tabs a.on{color:var(--accent);font-weight:600;border-top-color:var(--accent)}
.tabs a span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0 2px}
.tabs a.small{font-size:11px}
.tabs a.small span{padding:0}
.tsd-login{padding:28px 20px;display:flex;flex-direction:column;gap:20px}
.tsd-login .field label{font-size:16px;color:var(--soft)}
.tsd-login .field input{height:56px;font-size:20px;border-radius:10px}
.tsd-login .check{font-size:16px;gap:10px}
.tsd-login .check input{width:22px;height:22px}
.tsd-login .btn{height:60px;font-size:20px;border-radius:10px}
.tsd-login .hint{margin-top:auto;font-size:13px;color:var(--muted);line-height:1.5}