/* Clearway shared design system — promoted from website/index.html tokens.
   Single source of truth for the authenticated app (dashboard + admin + login). */
:root{
  --bg:#0A0E14;
  --surface:#12171F;
  --surface-2:#1A212B;
  --border:#232B36;
  --text:#E6EBF2;
  --text-muted:#7C8798;
  --text-dim:#4B5563;
  --mint:#6EE7C0;
  --mint-dim:#3FA98A;
  --amber:#F2A65A;
  --danger:#E8746E;
  --on-mint:#08110D;
  --radius:10px;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", "Consolas", "Liberation Mono", monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{background:var(--bg); color:var(--text); font-family:var(--sans); font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased;}
a{color:var(--mint); text-decoration:none;}
a:hover{text-decoration:underline;}
.wrap{max-width:1120px; margin:0 auto; padding:0 24px;}
.wrap.narrow{max-width:820px;}
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible{outline:2px solid var(--mint); outline-offset:3px;}

/* ---- app shell ---- */
header.topbar{position:sticky; top:0; z-index:50; backdrop-filter:blur(10px); background:rgba(10,14,20,0.72); border-bottom:1px solid var(--border);}
header.topbar nav{display:flex; align-items:center; justify-content:space-between; padding:16px 0;}
.logo{font-family:var(--mono); font-weight:600; font-size:17px; letter-spacing:0.01em; color:var(--text);}
.logo span{color:var(--mint);}
.navlinks{display:flex; gap:26px; font-size:14.5px; color:var(--text-muted); align-items:center;}
.navlinks a{color:var(--text-muted);}
.navlinks a:hover{color:var(--text); text-decoration:none;}
.navlinks a.active{color:var(--mint);}
main{padding:48px 0 90px;}

/* ---- headings ---- */
h1{font-family:var(--mono); font-weight:600; font-size:clamp(24px,3.4vw,34px); letter-spacing:-0.01em; margin-bottom:10px;}
h2{font-family:var(--mono); font-weight:600; font-size:20px; margin:36px 0 16px;}
.page-sub{color:var(--text-muted); margin-bottom:32px;}
.eyebrow{font-family:var(--mono); font-size:12px; color:var(--amber); letter-spacing:0.11em; text-transform:uppercase; margin-bottom:14px;}

/* ---- buttons ---- */
.btn-primary{font-family:var(--mono); font-size:14.5px; font-weight:600; background:var(--mint); color:var(--on-mint); padding:12px 22px; border:none; border-radius:8px; cursor:pointer; display:inline-flex; align-items:center; gap:8px; transition:transform .15s, box-shadow .15s, opacity .15s;}
.btn-primary:hover{transform:translateY(-1px); box-shadow:0 8px 24px rgba(110,231,192,0.18); text-decoration:none;}
.btn-primary:disabled{opacity:0.5; cursor:progress; transform:none; box-shadow:none;}
.btn-ghost{font-family:var(--mono); font-size:14.5px; background:transparent; border:1px solid var(--border); color:var(--text-muted); padding:12px 22px; border-radius:8px; cursor:pointer; transition:border-color .15s, color .15s;}
.btn-ghost:hover{border-color:var(--text-muted); color:var(--text); text-decoration:none;}
.btn-danger{font-family:var(--mono); font-size:13.5px; background:transparent; border:1px solid rgba(232,116,110,0.4); color:var(--danger); padding:9px 16px; border-radius:7px; cursor:pointer;}
.btn-danger:hover{background:rgba(232,116,110,0.08);}
.btn-sm{padding:8px 15px; font-size:13px;}
.btn-block{width:100%; justify-content:center;}
.btn-yandex{font-family:var(--mono); font-size:14.5px; background:var(--surface-2); border:1px solid var(--border); color:var(--text); padding:12px 22px; border-radius:8px; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:10px;}
.btn-yandex:hover{border-color:var(--amber); text-decoration:none;}
.btn-yandex b{color:var(--amber);}

/* ---- fields ---- */
/* Base styling for every control, not just those wrapped in .field — inputs
   placed directly in a table or toolbar were falling back to the browser
   default (white box) and broke the dark theme. */
input[type="text"], input[type="email"], input[type="number"],
input[type="search"], select, textarea{
  background:var(--bg); border:1px solid var(--border); border-radius:7px;
  padding:8px 10px; color:var(--text); font-family:var(--mono); font-size:13.5px;
}
input[type="text"]::placeholder, input[type="email"]::placeholder,
input[type="number"]::placeholder, input[type="search"]::placeholder,
textarea::placeholder{color:var(--text-dim);}
input:hover, select:hover, textarea:hover{border-color:var(--text-dim);}
input:focus, select:focus, textarea:focus{border-color:var(--mint-dim); outline:none;}
select{appearance:none; padding-right:28px;
  background-image:linear-gradient(45deg,transparent 50%,var(--text-muted) 50%),linear-gradient(135deg,var(--text-muted) 50%,transparent 50%);
  background-position:calc(100% - 15px) 52%, calc(100% - 10px) 52%;
  background-size:5px 5px, 5px 5px; background-repeat:no-repeat;}

.field{margin-bottom:18px;}
.field label{display:block; font-family:var(--mono); font-size:12.5px; color:var(--text-muted); margin-bottom:8px; letter-spacing:0.03em;}
.field input, .field select, .field textarea{width:100%; background:var(--bg); border:1px solid var(--border); border-radius:7px; padding:12px 14px; color:var(--text); font-family:var(--mono); font-size:14px;}
.field textarea{resize:vertical; line-height:1.5;}
.field input::placeholder, .field textarea::placeholder{color:var(--text-dim);}
.field-row{display:grid; grid-template-columns:2fr 1fr; gap:14px;}
@media (max-width:520px){ .field-row{grid-template-columns:1fr;} }
.form-msg{margin-top:14px; font-family:var(--mono); font-size:13px; padding:12px 14px; border-radius:7px;}
.form-msg.ok{background:rgba(110,231,192,0.08); border:1px solid var(--mint-dim); color:var(--mint);}
.form-msg.err{background:rgba(232,116,110,0.08); border:1px solid var(--danger); color:var(--danger);}

/* ---- cards / panels ---- */
.panel{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:26px 28px; margin-bottom:22px;}
.panel.tight{padding:20px 22px;}
.grid{display:grid; gap:20px;}
.grid.cols-2{grid-template-columns:1fr 1fr;}
.grid.cols-3{grid-template-columns:repeat(3,1fr);}
.grid.cols-4{grid-template-columns:repeat(4,1fr);}
@media (max-width:1000px){ .grid.cols-4{grid-template-columns:1fr 1fr;} }
@media (max-width:860px){ .grid.cols-2, .grid.cols-3{grid-template-columns:1fr;} }
@media (max-width:560px){ .grid.cols-4{grid-template-columns:1fr;} }
.auth-box{max-width:440px; margin:40px auto; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:36px;}

/* ---- config/kv readout ---- */
.config-block{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:22px 24px; font-family:var(--mono); font-size:13.5px; line-height:2; overflow-x:auto;}
.config-block .k{color:var(--text-muted);}
.config-block .v{color:var(--mint);}
.config-block .eq{color:var(--text-dim); margin:0 10px;}
pre.code{background:var(--bg); border:1px solid var(--border); border-radius:7px; padding:16px; font-family:var(--mono); font-size:12px; overflow-x:auto; color:var(--text-muted); white-space:pre-wrap; word-break:break-all;}

/* ---- quota meter ---- */
.meter{height:10px; background:var(--bg); border:1px solid var(--border); border-radius:6px; overflow:hidden;}
.meter > span{display:block; height:100%; background:var(--mint); border-radius:6px;}
.meter.warn > span{background:var(--amber);}
.meter.over > span{background:var(--danger);}
.stat-big{font-family:var(--mono); font-size:30px; color:var(--text); letter-spacing:-0.01em;}
.stat-label{font-family:var(--mono); font-size:12px; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.06em;}

/* ---- tables ---- */
.data-table{width:100%; border-collapse:collapse; font-family:var(--mono); font-size:14px;}
.data-table th{text-align:left; color:var(--text-muted); font-weight:500; font-size:11.5px; text-transform:uppercase; letter-spacing:0.06em; padding:0 14px 12px; border-bottom:1px solid var(--border);}
.data-table td{padding:14px; border-bottom:1px solid var(--border); color:var(--text); vertical-align:middle;}
.data-table tr:last-child td{border-bottom:none;}
.data-table td.num{text-align:right; font-variant-numeric:tabular-nums;}
.data-table tr.highlight td{background:rgba(110,231,192,0.045);}

/* ---- status pills ---- */
.pill{font-family:var(--mono); font-size:11px; padding:3px 9px; border-radius:5px; letter-spacing:0.03em; display:inline-block;}
.pill.ok{background:rgba(110,231,192,0.12); color:var(--mint);}
.pill.warn{background:rgba(242,166,90,0.12); color:var(--amber);}
.pill.err{background:rgba(232,116,110,0.12); color:var(--danger);}

/* ---- callouts / flash ---- */
.callout{border-left:2px solid var(--amber); background:rgba(242,166,90,0.06); border-radius:0 8px 8px 0; padding:15px 18px; margin:20px 0; font-size:14.5px;}
.callout strong{color:var(--amber);}
.callout.mint{border-left-color:var(--mint); background:rgba(110,231,192,0.06);}
.callout.mint strong{color:var(--mint);}
.callout.err{border-left-color:var(--danger); background:rgba(232,116,110,0.06);}
.callout.err strong{color:var(--danger);}

/* ---- pricing cards ---- */
.pkg-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(190px,1fr)); gap:16px;}
.pkg{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:22px; text-align:center;}
.pkg.best{border-color:var(--mint-dim);}
.pkg .gb{font-family:var(--mono); font-size:22px; color:var(--text);}
.pkg .price{font-family:var(--mono); font-size:16px; color:var(--mint); margin:8px 0;}
.pkg .per{font-family:var(--mono); font-size:12px; color:var(--text-muted); margin-bottom:16px;}

footer.app-footer{border-top:1px solid var(--border); padding:28px 0; color:var(--text-dim); font-size:13px; font-family:var(--mono); text-align:center;}

/* ---- mobile (<=640px) ---- */
@media (max-width:640px){
  /* Top nav can't fit logo + links + logout on one row: let it wrap so the
     nav links flow onto their own row(s) below the logo instead of pushing
     "Выйти" off-screen and forcing horizontal page scroll. */
  header.topbar nav{flex-wrap:wrap; gap:8px 14px; padding:12px 0;}
  .navlinks{width:100%; flex-wrap:wrap; gap:12px 16px; font-size:13.5px;}
  /* Wide data tables (long emails / timestamps) scroll inside their panel
     instead of overflowing the whole page. */
  .panel{overflow-x:auto;}
  .data-table{min-width:max-content;}
}

/* ---- admin analytics dashboard ---- */
.stat-sub{font-family:var(--mono); font-size:11.5px; color:var(--text-dim); margin-top:6px;}
.sec-h{font-family:var(--mono); font-size:15px; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.06em; margin:30px 0 12px;}
.subnav{display:flex; gap:8px; flex-wrap:wrap; margin:14px 0 20px;}
.subnav a{font-family:var(--mono); font-size:13px; color:var(--text-muted); padding:7px 14px; border:1px solid var(--border); border-radius:8px;}
.subnav a:hover{color:var(--text); text-decoration:none;}
.subnav a.active{color:var(--on-mint); background:var(--mint); border-color:var(--mint);}
.cost-form{display:flex; gap:16px; align-items:flex-end; flex-wrap:wrap; margin-top:12px;}
.cost-form label{font-family:var(--mono); font-size:12px; color:var(--text-muted); display:flex; flex-direction:column; gap:6px;}
.cost-form input{background:var(--bg); border:1px solid var(--border); border-radius:7px; color:var(--text); font-family:var(--mono); font-size:14px; padding:9px 12px; width:150px;}
.cost-form input:focus{outline:none; border-color:var(--mint-dim);}

.chart{width:100%; margin-top:10px;}
.chart svg{width:100%; height:auto; display:block; overflow:visible;}
.chart-line{fill:none; stroke:var(--mint); stroke-width:2; vector-effect:non-scaling-stroke;}
.chart-area{fill:var(--mint); opacity:0.08;}
.chart-dot{fill:var(--mint);}
.chart-bar{fill:var(--mint); opacity:0.85;}
.chart-xlabel{fill:var(--text-dim); font-family:var(--mono); font-size:9px;}

/* ---- config page: panel header with copy button ---- */
.panel-head{display:flex; justify-content:space-between; align-items:center; gap:12px; margin:0 0 6px;}
.panel-head h2, .panel-head h3{margin:0;}

/* ---- support ticket thread ---- */
.msg{padding:14px 16px; border-radius:9px; margin-bottom:12px; max-width:82%;}
.msg-client{background:var(--bg); border:1px solid var(--border); margin-right:auto;}
.msg-admin{background:rgba(110,231,192,0.07); border:1px solid var(--mint-dim); margin-left:auto;}
.msg-meta{font-family:var(--mono); font-size:11px; color:var(--text-dim); margin-bottom:6px; letter-spacing:0.02em;}
.msg-body{font-size:14.5px; line-height:1.55; white-space:pre-wrap; word-break:break-word;}

@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} .btn-primary:hover{transform:none;} }