/* ── Биллинг АйтиУслугиСПб: дизайн-система Remote Manager (светлая enterprise-тема, корпоративный синий).
   Перенесена с React/Tailwind-фронта RM в чистый CSS: те же токены, сайдбар 256px, шапка 68px,
   карточки rounded-2xl с мягкой тенью, KPI-плитки, бейджи, поля и кнопки. ───────────────── */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap");
:root {
  --brand-50:#eef4ff; --brand-100:#d9e6ff; --brand-200:#b8d0ff; --brand-500:#1857c4; --brand-600:#1449a6; --brand-700:#103b86; --brand-900:#0a2350;
  --ink:#0f172a; --muted:#64748b; --line:#cbd3e0; --canvas:#f4f6fb;
  --ok:#059669; --ok-bg:#ecfdf5; --warn:#d97706; --warn-bg:#fffbeb; --bad:#e11d48; --bad-bg:#fff1f2; --violet:#6d28d9; --violet-bg:#f5f3ff;
  --radius:16px; --shadow:0 1px 2px rgba(16,24,40,.04),0 8px 24px -12px rgba(16,24,40,.10);
  --font:"Inter","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
}
* { box-sizing:border-box; }
html, body { height:100%; }
body { margin:0; font-family:var(--font); font-size:14px; color:var(--ink); background:var(--canvas); -webkit-font-smoothing:antialiased; }
a { color:var(--brand-600); text-decoration:none; } a:hover { text-decoration:underline; }
code { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12px; background:#f1f5f9; padding:1px 6px; border-radius:6px; }
*::-webkit-scrollbar { width:10px; height:10px; } *::-webkit-scrollbar-thumb { background:#cbd5e1; border-radius:8px; border:2px solid transparent; background-clip:padding-box; } *::-webkit-scrollbar-track { background:transparent; }

/* ── каркас ── */
.app { display:flex; height:100vh; overflow:hidden; }
.side { display:flex; flex-direction:column; width:256px; flex-shrink:0; background:#fff; border-right:1px solid var(--line); }
.brand { display:flex; align-items:center; gap:12px; padding:0 20px; height:68px; border-bottom:1px solid var(--line); }
.brand img { height:38px; width:38px; } .brand b { display:block; font-size:13px; font-weight:700; color:#1e293b; } .brand small { display:block; font-size:11px; color:#94a3b8; }
.nav { flex:1; overflow-y:auto; padding:16px 12px; }
.grp { margin-bottom:20px; } .grp > span { display:block; padding:0 12px; margin-bottom:6px; font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:.08em; color:#94a3b8; }
.nav a { display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:12px; font-size:14px; font-weight:500; color:#475569; margin-bottom:2px; transition:.15s; }
.nav a:hover { background:#f8fafc; color:var(--ink); text-decoration:none; } .nav a.active { background:var(--brand-50); color:var(--brand-700); }
.nav a svg { width:18px; height:18px; flex-shrink:0; color:#94a3b8; } .nav a:hover svg { color:#64748b; } .nav a.active svg { color:var(--brand-600); }
.foot { border-top:1px solid var(--line); padding:12px; display:flex; align-items:center; gap:12px; }
.avatar { display:grid; place-items:center; height:36px; width:36px; border-radius:999px; background:var(--brand-500); color:#fff; font-size:12px; font-weight:700; flex-shrink:0; }
.foot .me { min-width:0; flex:1; } .foot .me b { display:block; font-size:14px; font-weight:600; color:#1e293b; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .foot .me small { display:block; font-size:11px; color:#94a3b8; }
.foot button { display:grid; place-items:center; height:36px; width:36px; border-radius:10px; border:0; background:transparent; color:#94a3b8; cursor:pointer; } .foot button:hover { background:var(--bad-bg); color:var(--bad); } .foot button svg { width:17px; height:17px; }
.main { flex:1; display:flex; flex-direction:column; min-width:0; }
.head { height:68px; flex-shrink:0; background:rgba(255,255,255,.8); backdrop-filter:blur(8px); border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; padding:0 32px; }
.head h1 { margin:0; font-size:18px; font-weight:700; line-height:1.2; } .head p { margin:2px 0 0; font-size:12px; color:var(--muted); }
.head .ver { font-size:11px; color:#94a3b8; font-family:ui-monospace,monospace; }
.content { flex:1; overflow-y:auto; padding:32px; }
.content > * { animation:rise .25s ease-out; } @keyframes rise { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }

/* ── карточки, плитки ── */
.card { background:#fff; border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:20px; margin-bottom:24px; }
.card h2 { display:flex; align-items:center; gap:10px; margin:-20px -20px 16px; padding:16px 20px; border-bottom:1px solid var(--line); font-size:15px; font-weight:600; color:#1e293b; }
.card h2 svg { width:18px; height:18px; color:var(--brand-600); background:var(--brand-50); padding:9px; box-sizing:content-box; border-radius:12px; }
.card small { font-size:12px; color:var(--muted); }
.grid2 { display:grid; gap:24px; grid-template-columns:1fr 1fr; } .grid3 { display:grid; gap:16px; grid-template-columns:repeat(3,1fr); margin-bottom:24px; } .grid4 { display:grid; gap:16px; grid-template-columns:repeat(4,1fr); margin-bottom:24px; }
.grid2 > .card, .grid3 > .card, .grid4 > .card { margin-bottom:0; }
.stat .ico { display:grid; place-items:center; height:44px; width:44px; border-radius:12px; background:var(--brand-50); color:var(--brand-600); } .stat .ico svg { width:22px; height:22px; }
.stat.ok .ico { background:var(--ok-bg); color:var(--ok); } .stat.warn .ico { background:var(--warn-bg); color:var(--warn); } .stat.bad .ico { background:var(--bad-bg); color:var(--bad); } .stat.slate .ico { background:#f1f5f9; color:#475569; }
.stat .top { display:flex; align-items:center; justify-content:space-between; } .stat .hint { font-size:12px; font-weight:500; color:#94a3b8; }
.big { display:block; font-size:30px; font-weight:700; letter-spacing:-.02em; margin-top:16px; font-variant-numeric:tabular-nums; } .stat .lbl { font-size:14px; color:var(--muted); margin-top:4px; }
.neg { color:var(--bad); } .pos { color:var(--ok); }
.notice { display:flex; align-items:center; gap:10px; background:var(--brand-50); color:var(--brand-700); border:1px solid var(--brand-200); border-radius:12px; padding:10px 14px; margin-bottom:24px; font-weight:500; }

/* ── таблицы ── */
table { width:100%; border-collapse:collapse; font-size:14px; }
th { text-align:left; font-size:12px; text-transform:uppercase; letter-spacing:.05em; color:#64748b; font-weight:600; padding:10px 12px; border-bottom:1px solid var(--line); }
td { padding:12px; border-top:1px solid #eef2f7; color:#334155; vertical-align:middle; } tr:hover td { background:#f8fafc; }
.r { text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; } .muted { color:#94a3b8; }
.tag { display:inline-flex; align-items:center; gap:4px; padding:2px 8px; border-radius:999px; font-size:12px; font-weight:500; background:#f1f5f9; color:#334155; }
.tag.ok { background:var(--ok-bg); color:#047857; } .tag.warn { background:var(--warn-bg); color:#b45309; } .tag.bad { background:var(--bad-bg); color:#be123c; } .tag.violet { background:var(--violet-bg); color:var(--violet); }

/* ── кнопки и поля ── */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; height:40px; padding:0 16px; border-radius:12px; border:1px solid var(--line); background:#fff; color:#334155; font:inherit; font-size:14px; font-weight:500; cursor:pointer; transition:.15s; white-space:nowrap; }
.btn:hover { background:#f8fafc; text-decoration:none; } .btn.primary { background:var(--brand-500); border-color:var(--brand-500); color:#fff; box-shadow:0 1px 2px rgba(16,24,40,.08); } .btn.primary:hover { background:var(--brand-600); }
.btn.sm { height:32px; padding:0 12px; font-size:12px; border-radius:10px; } .btn.lg { height:44px; padding:0 20px; }
.btn.danger { background:var(--bad-bg); border-color:var(--bad-bg); color:#be123c; } .btn.danger:hover { background:#ffe4e6; }
.btn:disabled { opacity:.5; cursor:not-allowed; } .btn svg { width:16px; height:16px; }
input, select, textarea { width:100%; height:40px; padding:0 12px; border-radius:12px; background:#f8fafc; border:1px solid #cbd5e1; font:inherit; font-size:14px; color:var(--ink); outline:none; transition:.15s; }
textarea { height:auto; min-height:80px; padding:8px 12px; } input[type=checkbox] { width:16px; height:16px; }
input:focus, select:focus, textarea:focus { background:#fff; border-color:var(--brand-500); box-shadow:0 0 0 3px var(--brand-100); }
.form { display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); align-items:end; }
.form label, .login label { display:block; font-size:12px; font-weight:600; color:#334155; } .form label input, .form label select, .form label textarea, .login label input { margin-top:6px; }
.row { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin:0; } .row input, .row select { width:auto; } .row label { font-size:13px; font-weight:400; color:#475569; }
.row.compact input, .row.compact select { height:32px; border-radius:10px; font-size:13px; }
.err { background:var(--bad-bg); color:#be123c; border-radius:12px; padding:10px 12px; font-size:14px; margin:0 0 14px; }

/* ── вход (две колонки, как в RM) ── */
.login-page { min-height:100vh; display:grid; grid-template-columns:1fr 1fr; background:var(--canvas); }
.hero { position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:space-between; padding:48px; color:#fff; background:linear-gradient(160deg,#0a2358,#0d2f6b 42%,#1857c4); }
.hero::before { content:""; position:absolute; inset:0; opacity:.14; background-image:linear-gradient(rgba(255,255,255,.7) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.7) 1px,transparent 1px); background-size:38px 38px; -webkit-mask-image:radial-gradient(circle at 50% 45%,#000,transparent 72%); mask-image:radial-gradient(circle at 50% 45%,#000,transparent 72%); }
.hero::after { content:""; position:absolute; top:-112px; right:-96px; width:420px; height:420px; border-radius:50%; background:radial-gradient(circle,rgba(56,189,248,.35),transparent 70%); animation:glow 9s ease-in-out infinite; }
@keyframes glow { 0%,100% { transform:scale(1); opacity:.45; } 50% { transform:scale(1.18); opacity:.8; } }
.hero .hb { position:relative; display:flex; align-items:center; gap:12px; } .hero .hb img.full { height:52px; }
.hero .hb b { display:block; font-size:18px; font-weight:700; } .hero .hb small { display:block; font-size:14px; color:rgba(255,255,255,.7); }
.hero .foot-note { position:relative; font-size:12px; color:rgba(255,255,255,.5); }
.orbit { position:relative; width:320px; height:320px; margin:0 auto; z-index:1; }
.orbit .pulse { position:absolute; left:50%; top:50%; width:96px; height:96px; border-radius:50%; border:1px solid rgba(103,232,249,.4); transform:translate(-50%,-50%); animation:pulse 3.4s ease-out infinite; }
.orbit .pulse:nth-child(2) { animation-delay:1.13s; } .orbit .pulse:nth-child(3) { animation-delay:2.26s; }
@keyframes pulse { from { width:96px; height:96px; opacity:.55; } to { width:300px; height:300px; opacity:0; } }
.orbit svg.lines { position:absolute; inset:0; }
.orbit .ring { animation:spin 38s linear infinite; transform-origin:160px 160px; } @keyframes spin { to { transform:rotate(360deg); } }
.orbit .beam { stroke-dasharray:22 116; animation:beam 1.9s linear infinite; } @keyframes beam { from { stroke-dashoffset:138; } to { stroke-dashoffset:0; } }
.node { position:absolute; transform:translate(-50%,-50%); text-align:center; animation:float 3.5s ease-in-out infinite; }
.node .box { display:grid; place-items:center; height:52px; width:52px; border-radius:16px; background:rgba(255,255,255,.1); backdrop-filter:blur(4px); border:1px solid rgba(255,255,255,.25); color:#cffafe; box-shadow:0 10px 15px -3px rgba(6,182,212,.1); }
.node .box svg { width:22px; height:22px; } .node span { display:block; margin-top:4px; font-size:10px; font-weight:600; letter-spacing:.05em; color:rgba(255,255,255,.6); }
@keyframes float { 0%,100% { transform:translate(-50%,-50%); } 50% { transform:translate(-50%,calc(-50% - 5px)); } }
.core { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); height:96px; width:96px; display:grid; place-items:center; border-radius:26px; background:linear-gradient(135deg,rgba(255,255,255,.25),rgba(255,255,255,.05)); backdrop-filter:blur(6px); border:1px solid rgba(255,255,255,.4); animation:core 2.4s ease-out infinite; }
.core svg { width:44px; height:44px; color:#fff; filter:drop-shadow(0 2px 8px rgba(56,189,248,.6)); animation:breathe 2.4s ease-in-out infinite; }
@keyframes core { from { box-shadow:0 0 0 0 rgba(56,189,248,.45); } to { box-shadow:0 0 0 18px rgba(56,189,248,0); } } @keyframes breathe { 0%,100% { transform:scale(1); } 50% { transform:scale(1.08); } }
.login-side { display:grid; place-items:center; padding:24px; }
.login { width:100%; max-width:384px; } .login h1 { margin:0; font-size:24px; font-weight:700; } .login p.sub { margin:4px 0 32px; color:var(--muted); font-size:14px; }
.login .mob { display:none; align-items:center; gap:12px; margin-bottom:32px; } .login .mob img { height:44px; } .login .mob b { color:#1e293b; }
.login label { margin-bottom:16px; } .login .fld { position:relative; margin-top:6px; } .login .fld svg { position:absolute; left:12px; top:50%; transform:translateY(-50%); width:16px; height:16px; color:#94a3b8; } .login .fld input { margin:0; padding-left:36px; }
.login .btn { width:100%; margin-top:8px; } .login .muted { display:block; margin-top:16px; font-size:12px; text-align:center; }
.twofa { text-align:center; padding:8px 0 24px; } .twofa .ico { display:grid; place-items:center; height:64px; width:64px; margin:0 auto 16px; border-radius:16px; background:var(--brand-50); color:var(--brand-600); animation:breathe 2s ease-in-out infinite; } .twofa .ico svg { width:30px; height:30px; }
.twofa h3 { margin:0; font-size:16px; font-weight:600; color:#1e293b; } .twofa p { margin:8px 0 0; font-size:14px; color:var(--muted); }
.code input { text-align:center; font-size:24px; letter-spacing:.4em; font-weight:600; height:52px; }
@media (max-width:1024px) { .login-page { grid-template-columns:1fr; } .hero { display:none; } .login .mob { display:flex; } }
@media (max-width:900px) { .grid2, .grid3, .grid4 { grid-template-columns:1fr; } .content { padding:16px; } .head { padding:0 16px; } }
.tbl { overflow-x:auto; margin:0 -20px; padding:0 20px; } .tbl table { min-width:1080px; }