:root {
  color-scheme: dark;
  --bg: #101114;
  --panel: #17191d;
  --panel-2: #1c1f24;
  --border: #2a2d33;
  --text: #f5f4ef;
  --muted: #8e939d;
  --mint: #b7f36a;
  --mint-dark: #17220f;
  --violet: #a99cff;
  --amber: #f6c66f;
  --coral: #ff8e7d;
  --radius: 18px;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; background: var(--bg); color: var(--text); min-height: 100vh; }
button, input { font: inherit; }
button { color: inherit; }
.hidden { display: none !important; }
.noise { position: fixed; inset: 0; pointer-events: none; opacity: .045; z-index: 20; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.4'/%3E%3C/svg%3E"); }
.app-shell { display: grid; grid-template-columns: 244px 1fr; min-height: 100vh; }
.sidebar { position: sticky; top: 0; height: 100vh; padding: 30px 18px 22px; border-right: 1px solid var(--border); display: flex; flex-direction: column; background: #121316; z-index: 5; }
.brand, .login-brand { display: flex; align-items: center; gap: 11px; padding: 0 10px; }
.brand strong, .login-brand strong { display: block; font-size: 17px; letter-spacing: -.3px; }
.brand small, .login-brand small { display: block; margin-top: 2px; font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 1.3px; }
.logo-mark { width: 35px; height: 35px; border-radius: 11px; display: flex; align-items: flex-end; justify-content: center; gap: 3px; padding: 8px; background: var(--mint); transform: rotate(-2deg); }
.logo-mark span { width: 4px; background: #10120e; border-radius: 4px; }
.logo-mark span:nth-child(1) { height: 8px; }.logo-mark span:nth-child(2) { height: 17px; }.logo-mark span:nth-child(3) { height: 12px; }
nav { margin-top: 42px; display: grid; gap: 5px; }
.nav-item { border: 0; background: transparent; width: 100%; display: flex; align-items: center; gap: 12px; min-height: 46px; border-radius: 12px; padding: 0 13px; color: var(--muted); cursor: pointer; text-align: left; transition: .18s ease; }
.nav-item:hover { background: #1a1c20; color: var(--text); }
.nav-item.active { background: var(--mint); color: #12140f; font-weight: 700; }
.nav-item i, .metric-icon i { display: grid; place-items: center; width: 20px; height: 20px; }
.nav-item svg, .metric-icon svg { width: 19px; height: 19px; }
.nav-item em { margin-left: auto; font-style: normal; font-size: 11px; min-width: 23px; height: 21px; display: grid; place-items: center; border-radius: 10px; background: #272a30; color: var(--text); }
.nav-item.active em { background: #10120e; color: var(--mint); }
.sidebar-note { margin-top: auto; margin-bottom: 14px; display: flex; gap: 10px; align-items: center; padding: 13px; border: 1px solid var(--border); border-radius: 13px; background: #17191d; }
.sidebar-note strong, .profile strong { display: block; font-size: 12px; }.sidebar-note small, .profile small { display: block; color: var(--muted); font-size: 10px; margin-top: 3px; }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 5px rgba(183,243,106,.09); }
.profile { display: flex; align-items: center; gap: 9px; background: transparent; border: 0; border-top: 1px solid var(--border); padding: 18px 7px 0; text-align: left; cursor: pointer; }
.profile b { margin-left: auto; color: #5f646d; letter-spacing: 1px; }.avatar { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 10px; background: #2a2e34; font-weight: 700; }
main { min-width: 0; }.topbar { min-height: 94px; padding: 22px 34px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 20px; position: sticky; top: 0; z-index: 4; background: rgba(16,17,20,.9); backdrop-filter: blur(18px); }
.topbar h1 { margin: 2px 0 0; font-size: 22px; letter-spacing: -.5px; }.eyebrow { margin: 0; color: var(--muted); font-weight: 700; font-size: 9px; text-transform: uppercase; letter-spacing: 1.5px; }
.top-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }.last-sync { color: var(--muted); font-size: 11px; margin-right: 3px; }.demo-badge { color: var(--amber); background: rgba(246,198,111,.09); border: 1px solid rgba(246,198,111,.25); border-radius: 999px; padding: 7px 10px; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .8px; }
.button, .icon-button { border: 1px solid transparent; border-radius: 11px; min-height: 41px; padding: 0 15px; font-size: 12px; font-weight: 750; cursor: pointer; transition: .18s ease; }.button:hover, .icon-button:hover { transform: translateY(-1px); }.button.primary { background: var(--mint); color: #11140d; }.button.secondary { border-color: var(--border); background: #1a1c21; color: var(--text); }.button.wide { width: 100%; }.icon-button, .menu-button { width: 41px; padding: 0; background: #191b1f; border: 1px solid var(--border); }.menu-button { display: none; border-radius: 10px; height: 40px; }
.button.danger{border-color:rgba(255,142,125,.25);background:rgba(255,142,125,.07);color:var(--coral)}.panel-actions{display:flex;align-items:center;gap:8px}.mini-button.danger{color:var(--coral);border-color:rgba(255,142,125,.22)}
.content { padding: 32px 34px 56px; max-width: 1600px; margin: 0 auto; }.hero-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; padding: 6px 2px 28px; }.hero-row h2, .section-intro h2 { margin: 0; font-size: clamp(25px, 3vw, 38px); letter-spacing: -1.5px; line-height: 1.05; }.hero-row p, .section-intro p { color: var(--muted); margin: 10px 0 0; font-size: 13px; }
.hero-status { display: flex; align-items: center; gap: 11px; padding: 12px 15px; background: #15171a; border: 1px solid var(--border); border-radius: 14px; }.hero-status > span { width: 10px; height: 10px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 18px var(--mint); }.hero-status small { display: block; color: var(--muted); font-size: 9px; text-transform: uppercase; letter-spacing: .9px; }.hero-status strong { display: block; font-size: 12px; margin-top: 3px; }
.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; }.metric-card { min-height: 127px; border: 1px solid var(--border); border-radius: var(--radius); background: linear-gradient(145deg,#191b1f,#15171a); padding: 20px; display: flex; align-items: flex-start; gap: 15px; }.metric-icon { width: 42px; height: 42px; flex: 0 0 auto; border-radius: 13px; display: grid; place-items: center; color: #111; }.metric-icon.mint{background:var(--mint)}.metric-icon.violet{background:var(--violet)}.metric-icon.amber{background:var(--amber)}.metric-icon.coral{background:var(--coral)}.metric-card span { display: block; font-size: 11px; color: var(--muted); }.metric-card strong { display: block; margin: 5px 0 2px; font-size: 25px; letter-spacing: -.8px; }.metric-card small { color: var(--muted); font-size: 10px; }.metric-card small.positive { color: var(--mint); }
.dashboard-grid { display: grid; grid-template-columns: minmax(0,1.18fr) minmax(320px,.82fr); gap: 12px; margin-top: 12px; }.panel { border: 1px solid var(--border); background: var(--panel); border-radius: var(--radius); overflow: hidden; }.panel-head { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 20px 22px; border-bottom: 1px solid var(--border); }.panel-head h3 { margin: 4px 0 0; font-size: 16px; letter-spacing: -.25px; }.text-button { background: none; border: 0; color: var(--mint); cursor: pointer; font-size: 11px; }
.site-row { display: grid; grid-template-columns: 34px minmax(150px,1fr) 90px 90px 26px; gap: 12px; align-items: center; padding: 15px 22px; border-bottom: 1px solid #25282d; cursor: pointer; transition: .15s; }.site-row:last-child { border-bottom: 0; }.site-row:hover { background: #1a1d21; }.site-favicon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: #25282f; font-weight: 800; color: var(--mint); }.site-main strong { display: block; font-size: 12px; }.site-main small { display: block; color: var(--muted); margin-top: 4px; font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }.site-stat { font-size: 10px; color: var(--muted); }.site-stat strong { color: var(--text); display: block; font-size: 13px; margin-bottom: 3px; }.status-pill { display: inline-flex; gap: 6px; align-items: center; padding: 6px 9px; border-radius: 999px; font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; }.status-pill::before { content:""; width: 5px; height: 5px; border-radius: 50%; }.status-pill.ok { color: var(--mint); background: rgba(183,243,106,.08); }.status-pill.ok::before{background:var(--mint)}.status-pill.fail { color: var(--coral); background: rgba(255,142,125,.09); }.status-pill.fail::before{background:var(--coral)}.status-pill.wait { color: var(--amber); background: rgba(246,198,111,.09); }.status-pill.wait::before{background:var(--amber)}
.activity-item { display: grid; grid-template-columns: 30px 1fr auto; gap: 11px; align-items: center; padding: 14px 20px; border-bottom: 1px solid #25282d; }.activity-item:last-child{border-bottom:0}.activity-icon { width: 30px; height: 30px; display:grid;place-items:center;border-radius:50%;font-size:12px;font-weight:900}.activity-icon.ok{background:rgba(183,243,106,.1);color:var(--mint)}.activity-icon.fail{background:rgba(255,142,125,.1);color:var(--coral)}.activity-icon.wait{background:rgba(246,198,111,.1);color:var(--amber)}.activity-item strong{display:block;font-size:11px}.activity-item small{display:block;color:var(--muted);font-size:9px;margin-top:4px}.activity-time{font-size:9px;color:var(--muted)}
.section-intro { display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin:6px 0 25px }.section-intro h2{font-size:30px}.sites-grid{display:grid;grid-template-columns:repeat(3,minmax(250px,1fr));gap:12px}.site-card{border:1px solid var(--border);background:linear-gradient(145deg,#191b20,#15171a);border-radius:var(--radius);padding:20px;cursor:pointer;transition:.18s}.site-card:hover,.site-card.active{border-color:#555b64;transform:translateY(-2px)}.site-card-head{display:flex;align-items:center;gap:11px}.site-card-head .status-pill{margin-left:auto}.site-card h3{font-size:14px;margin:0}.site-card p{font-size:10px;color:var(--muted);margin:4px 0 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.site-card-metrics{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:20px}.site-card-metrics div{border-top:1px solid var(--border);padding-top:13px}.site-card-metrics strong{display:block;font-size:18px}.site-card-metrics span{font-size:9px;color:var(--muted);text-transform:uppercase;letter-spacing:.8px}.forms-panel{margin-top:12px}.verification-box{margin:18px 22px;padding:16px;border:1px solid rgba(246,198,111,.25);background:rgba(246,198,111,.06);border-radius:13px;font-size:11px;line-height:1.5}.verification-box code{display:block;margin:8px 0;padding:10px;background:#111317;border-radius:8px;color:var(--amber);overflow:auto}.verification-box .button{margin-top:6px}
.table-wrap{overflow-x:auto}table{width:100%;border-collapse:collapse;min-width:760px}th{text-align:left;color:var(--muted);font-size:9px;text-transform:uppercase;letter-spacing:.9px;font-weight:700;padding:13px 19px;border-bottom:1px solid var(--border)}td{padding:15px 19px;border-bottom:1px solid #25282d;font-size:11px}tbody tr:last-child td{border-bottom:0}td strong{display:block;font-size:11px}td small{color:var(--muted);font-size:9px;display:block;margin-top:4px}.row-actions{display:flex;justify-content:flex-end;gap:7px}.mini-button{border:1px solid var(--border);background:#202329;border-radius:8px;padding:7px 9px;font-size:9px;cursor:pointer}.mini-button.accent{border-color:rgba(183,243,106,.3);color:var(--mint)}.empty-state{padding:45px 20px;text-align:center;color:var(--muted);font-size:12px}.empty-state strong{display:block;color:var(--text);font-size:14px;margin-bottom:7px}
.login-shell{position:relative;min-height:100vh;display:grid;place-items:center;padding:96px 24px 40px;background:radial-gradient(circle at 50% 30%,rgba(183,243,106,.1),transparent 34%),var(--bg)}.login-brand{position:absolute;left:36px;top:30px;padding:0}.login-card{width:min(100%,460px);padding:36px;border:1px solid var(--border);background:rgba(23,25,29,.92);border-radius:24px;box-shadow:0 30px 100px rgba(0,0,0,.35)}.login-card h1,.dialog-card h2{font-size:30px;letter-spacing:-1px;margin:8px 0}.muted{color:var(--muted);font-size:12px;line-height:1.55}.auth-tabs{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;margin:22px 0 4px;border:1px solid var(--border);background:#111317;border-radius:12px}.auth-tab{height:36px;border:0;border-radius:8px;background:transparent;color:var(--muted);font-size:11px;font-weight:750;cursor:pointer}.auth-tab.active{background:#25282e;color:var(--text);box-shadow:0 2px 8px rgba(0,0,0,.25)}.login-card label,.dialog-card label{display:grid;gap:7px;margin-top:17px;font-size:10px;color:#c3c6cc;font-weight:700}.login-card input,.dialog-card input{height:45px;border:1px solid var(--border);border-radius:10px;padding:0 12px;background:#111317;color:var(--text);outline:none}.login-card input:focus,.dialog-card input:focus{border-color:var(--mint)}.password-hint{color:var(--muted);font-size:9px;font-weight:500}.auth-switch{text-align:center;color:var(--muted);font-size:10px;margin:17px 0 0}.auth-switch button{border:0;background:none;padding:0;color:var(--mint);font-size:inherit;cursor:pointer}.form-error{min-height:16px;color:var(--coral);font-size:10px;margin:10px 0}
dialog{border:0;padding:0;background:transparent;color:var(--text);max-width:520px;width:calc(100% - 30px)}dialog::backdrop{background:rgba(6,7,8,.78);backdrop-filter:blur(8px)}.dialog-card{position:relative;background:#191b1f;border:1px solid #343840;border-radius:22px;padding:30px;box-shadow:0 30px 100px #000}.dialog-close{position:absolute;right:16px;top:16px;width:32px;height:32px;border:1px solid var(--border);background:#202329;border-radius:9px;cursor:pointer}.dialog-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:20px}.toast-stack{position:fixed;right:22px;bottom:22px;z-index:50;display:grid;gap:8px}.toast{max-width:340px;padding:13px 16px;border:1px solid var(--border);border-left:3px solid var(--mint);background:#1d2025;border-radius:10px;box-shadow:0 14px 40px rgba(0,0,0,.35);font-size:11px}.toast.error{border-left-color:var(--coral)}
@media(max-width:1050px){.metric-grid{grid-template-columns:repeat(2,1fr)}.dashboard-grid{grid-template-columns:1fr}.sites-grid{grid-template-columns:repeat(2,1fr)}.last-sync{display:none}}
@media(max-width:760px){.app-shell{display:block}.sidebar{position:fixed;left:-260px;width:244px;transition:.25s;box-shadow:20px 0 50px rgba(0,0,0,.5)}.sidebar.open{left:0}.menu-button{display:block}.topbar{padding:16px 18px;min-height:76px}.topbar .eyebrow,.topbar .icon-button{display:none}.topbar h1{font-size:18px}.button{padding:0 11px}.content{padding:22px 16px 42px}.hero-row{align-items:flex-start;flex-direction:column}.hero-status{width:100%}.metric-grid{grid-template-columns:1fr 1fr}.metric-card{padding:15px;min-height:112px}.metric-icon{width:36px;height:36px}.metric-card strong{font-size:20px}.sites-grid{grid-template-columns:1fr}.section-intro{align-items:flex-start;flex-direction:column}.login-shell{padding:100px 16px 30px}.login-brand{left:20px;top:24px}.login-card{width:min(100%,460px);padding:26px}.demo-badge{display:none}.site-row{grid-template-columns:34px 1fr 26px}.site-row .site-stat{display:none}}
@media(max-width:440px){.metric-grid{grid-template-columns:1fr}.top-actions .button span{display:none}.top-actions .button{font-size:0}.top-actions .button::after{content:"Добавить";font-size:11px}}