/* broker-radar.ru — общая стилевая система сайта и админки.
   Токены и типографика перенесены из design-прототипа (prototype.html / admin-prototype.html). */

:root{
  --bg:#eef2f1;
  --surface:#ffffff;
  --surface-alt:#f2f4f2;
  --ink:#14212b;
  --text:#33454c;
  --muted:#5b6f77;
  --line:#dde3e0;
  --line-soft:#eaeeec;
  --accent:#a85f22;
  --accent-ink:#7c4517;
  --accent-soft:#f4e7d9;
  --good-bg:#e4f2e6; --good-text:#2f7a44;
  --warn-bg:#fbeed9; --warn-text:#a8681b;
  --bad-bg:#fbe3e0;  --bad-text:#b3402f;
  --sidebar-bg:#14212b;
  --sidebar-active:#232f39;
  --sidebar-text:#a9b8bd;
  --sidebar-muted:#8ba0a8;
}

*{box-sizing:border-box;}
html,body{margin:0; padding:0;}
body{
  background:var(--bg);
  color:var(--text);
  font-family:'IBM Plex Sans', -apple-system, 'Segoe UI', sans-serif;
  font-size:14px;
  line-height:1.5;
}
a{color:var(--accent-ink); text-decoration:none;}
a:hover{color:var(--accent);}
h1,h2,h3{font-family:'Source Serif 4', Georgia, serif; color:var(--ink); margin:0;}
.mono{font-family:'IBM Plex Mono', ui-monospace, monospace;}
.num{font-variant-numeric:tabular-nums;}

/* ---------- site header / nav ---------- */
.site-header{
  display:flex; align-items:center; justify-content:space-between;
  height:72px; padding:0 40px; background:var(--surface); border-bottom:1px solid var(--line);
}
.site-header .brand{display:flex; align-items:center; gap:8px; font-family:'Source Serif 4',Georgia,serif; font-size:18px; font-weight:700; color:var(--ink);}
.site-nav{display:flex; align-items:center; gap:20px; font-size:13.5px;}
.site-nav a{color:var(--muted);}
.site-nav a.active{color:var(--ink); font-weight:600;}
.site-search{display:flex; align-items:center; gap:8px; width:280px; padding:8px 12px; background:var(--surface-alt); border:1px solid var(--line); border-radius:7px; color:var(--muted); font-size:12.5px;}

.page-head{padding:32px 40px 18px; display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap;}
.page-head h1{font-size:28px; font-weight:700;}
.page-head .sub{margin-top:6px; font-size:13.5px; color:var(--muted);}

.container{max-width:1360px; margin:0 auto;}

/* ---------- catalog ---------- */
.catalog-layout{display:flex; gap:24px; padding:0 40px 56px; align-items:flex-start;}
.filters{width:248px; flex:none; background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:20px 18px; display:flex; flex-direction:column; gap:16px;}
.filters .group-title{font-size:12.5px; font-weight:600; color:var(--ink);}
.broker-list{flex:1; display:flex; flex-direction:column; gap:12px;}
.broker-row{display:flex; align-items:center; padding:16px 20px; background:var(--surface); border:1px solid var(--line); border-radius:10px; gap:12px;}
.broker-row .rank{width:28px; font-family:'IBM Plex Mono',monospace; font-size:12px; color:#c7d0cc;}
.logo-chip{width:36px; height:36px; border-radius:9px; color:#fff; display:flex; align-items:center; justify-content:center; font-family:'Source Serif 4',serif; font-weight:700; font-size:13px; flex:none;}
.broker-row .name{font-size:14.5px; font-weight:600; color:var(--ink);}
.flag-chip{padding:1px 6px; border-radius:4px; background:var(--surface-alt); color:var(--muted); font-size:10px; font-family:'IBM Plex Mono',monospace;}
.col{width:120px;}
.col-sm{width:90px;}
.btn{display:inline-flex; align-items:center; gap:8px; padding:9px 16px; border-radius:8px; font-size:13px; font-weight:600; cursor:pointer; border:1px solid transparent;}
.btn-primary{background:var(--ink); color:#fff;}
.btn-secondary{background:var(--surface); color:var(--ink); border-color:var(--line);}
.pill{display:inline-block; padding:3px 10px; border-radius:999px; font-size:11.5px; font-weight:500;}
.pill-good{background:var(--good-bg); color:var(--good-text);}
.pill-warn{background:var(--warn-bg); color:var(--warn-text);}
.pill-bad{background:var(--bad-bg); color:var(--bad-text);}
.pill-neutral{background:var(--surface-alt); color:var(--muted);}

/* ---------- broker profile ---------- */
.profile-head{padding:14px 40px 26px; display:flex; align-items:flex-start; justify-content:space-between; border-bottom:1px solid var(--line); gap:16px; flex-wrap:wrap;}
.profile-body{display:flex; gap:32px; padding:32px 40px 72px; align-items:flex-start; flex-wrap:wrap;}
.profile-main{flex:1; min-width:320px; max-width:800px; display:flex; flex-direction:column; gap:28px;}
.profile-aside{width:300px; flex:none; display:flex; flex-direction:column; gap:14px;}
.card{background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:24px 26px;}
.card h2{font-size:18px; font-weight:700; margin-bottom:12px;}
.card.dark{background:var(--ink); color:#fff;}
.card.dark .label{color:var(--sidebar-muted); text-transform:uppercase; letter-spacing:.05em; font-size:11px;}
.kv-row{display:flex; align-items:center; padding:11px 0; border-bottom:1px solid var(--line-soft); gap:12px;}
.kv-row:last-child{border-bottom:none;}
.kv-row .k{width:210px; flex:none; font-size:12.5px; color:var(--muted);}
.kv-row .v{font-size:13.5px; color:var(--ink); font-weight:500;}
.table-wrap{border:1px solid var(--line-soft); border-radius:8px; overflow:hidden;}
table.data{width:100%; border-collapse:collapse; font-size:13px;}
table.data thead th{text-align:left; padding:9px 14px; background:var(--surface-alt); font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:.05em; text-transform:uppercase; color:#8a9a9f; font-weight:500;}
table.data tbody td{padding:11px 14px; border-top:1px solid var(--line-soft);}
.chip-grid{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px 24px;}
.flag-ok{display:flex; align-items:center; gap:8px;}
.flag-dot{width:8px; height:8px; border-radius:999px; background:var(--good-text); flex:none;}
.flag-dot.off{background:var(--line);}

/* ---------- admin shell ---------- */
.admin-shell{display:flex; min-height:100vh;}
.admin-sidebar{width:232px; flex:none; background:var(--sidebar-bg); padding:20px 14px; display:flex; flex-direction:column;}
.admin-sidebar .brand{display:flex; align-items:center; gap:8px; padding:6px 8px 22px; font-family:'Source Serif 4',Georgia,serif; font-size:15.5px; font-weight:700; color:#fff;}
.admin-nav{display:flex; flex-direction:column; gap:2px;}
.admin-nav a{display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:7px; color:var(--sidebar-text); font-size:13px; text-decoration:none;}
.admin-nav a.active{background:var(--sidebar-active); color:#fff; font-weight:500;}
.admin-nav .divider{height:1px; background:#243642; margin:10px 6px;}
.admin-content{flex:1; background:#eef1ef; padding:24px 32px 40px;}
.admin-content .toolbar{display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; gap:16px; flex-wrap:wrap;}
.admin-content h1{font-size:22px;}
.field{display:flex; flex-direction:column; gap:6px;}
.field label{font-size:12px; color:var(--muted);}
.field input, .field select{padding:9px 12px; border:1px solid var(--line); border-radius:7px; font-size:13.5px; font-family:inherit; background:var(--surface); color:var(--ink);}
.login-shell{min-height:100vh; background:var(--sidebar-bg); display:flex; align-items:center; justify-content:center;}
.login-card{width:360px; background:#1a2731; border:1px solid #2a3944; border-radius:12px; padding:36px 32px;}
.login-card .brand{display:flex; align-items:center; gap:8px; margin-bottom:28px; font-family:'Source Serif 4',Georgia,serif; font-size:19px; font-weight:700; color:#fff;}
.login-error{background:#3a2420; color:#f0a89a; border:1px solid #5a332c; border-radius:7px; padding:9px 12px; font-size:12.5px; margin-bottom:14px;}

.note{margin-top:24px; padding:16px 20px; background:var(--surface); border:1px solid var(--line); border-radius:10px; font-size:12.5px; color:var(--muted); max-width:70ch;}