/* ============================================================
   EVICTED PANEL - ev-linear: edinaya dizayn-sistema (Linear-style)
   Izvlecheno iz prototipa _redesign-linear.html. Podklyuchaetsya na VSE stranicy.
   Shrifty: Inter (text) + IBM Plex Mono (mono). Aktsent: #9717d9.
   Podklyuchat POSLE Bootstrap/dark-theme, chtoby perebit ih nachisto.
   ============================================================ */

/* ============================================================
   LINEAR DESIGN TOKENS
   ============================================================ */
:root{
  /* surfaces */
  --onyx:#08090a;        /* page canvas */
  --charcoal:#0f1011;    /* nav / cards */
  --obsidian:#161718;    /* elevated cards */
  --graphite:#23252a;    /* borders */
  --iron:#323334;
  --steel:#383b3f;       /* inputs */
  /* text */
  --slate:#62666d;       /* muted */
  --fog:#8a8f98;         /* secondary */
  --mist:#d0d6e0;
  --platinum:#e5e5e6;
  --snow:#f7f8f8;        /* primary */
  /* accents */
  --lime:#e4f222;
  --indigo:#9717d9;   /* fioletovyy aktsent paneli (zamena indigo) */
  --emerald:#27a644;
  --crimson:#eb5757;
  --cyan:#02b8cc;
  --blue:#5B82C9;     /* status Frozen (siniy) */
  /* effects */
  --sh-sm:rgba(0,0,0,0.4) 0 2px 4px;
  --sh-xl:rgba(8,9,10,0.6) 0 4px 32px;
  --ring:inset 0 0 0 1px var(--graphite);
  /* metrics */
  --sidebar-w:248px;
  --ctl-h:38px;       /* edinaya vysota kontrolov (knopki/segmenty/inputy) */
  --ctl-h-sm:34px;    /* kompaktnaya vysota (table-segmenty, btn-ghost) */
  --mono:'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:var(--onyx);
  color:var(--snow);
  font-family:'Inter', -apple-system, system-ui, sans-serif;
  font-size:15px;
  font-weight:400;
  line-height:1.6;
  letter-spacing:-0.011em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
::selection{background:rgba(151,23,217,0.35);color:var(--snow)}

/* scrollbar */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--graphite);border-radius:8px;border:2px solid var(--onyx)}
::-webkit-scrollbar-thumb:hover{background:var(--iron)}

/* ============================================================
   LAYOUT SHELL
   ============================================================ */
.app{display:flex;min-height:100vh}

/* ---------- SIDEBAR ---------- */
.sidebar{
  position:fixed;
  inset:0 auto 0 0;
  width:var(--sidebar-w);
  background:var(--charcoal);
  border-right:1px solid var(--graphite);
  display:flex;
  flex-direction:column;
  z-index:40;
}
.brand{
  display:flex;
  align-items:center;
  gap:10px;
  padding:18px 20px;
  height:60px;
  border-bottom:1px solid var(--graphite);
}
.brand-mark{
  height:32px;
  display:flex;align-items:center;justify-content:center;
  flex:none;
  /* myagkoe fioletovoe svechenie pod logo (logo sam s tyomnym+fioletovym, fon ne nuzhen) */
  filter:drop-shadow(0 2px 8px rgba(151,23,217,0.4));
}
.brand-mark img{height:100%;width:auto;display:block;object-fit:contain}
.brand-mark i{font-size:16px;color:#fff}
.brand-name{
  font-size:15px;
  font-weight:600;
  letter-spacing:-0.02em;
  color:var(--snow);
}
.brand-name .tag{
  display:block;
  font-size:10px;
  font-weight:500;
  color:var(--slate);
  letter-spacing:0.04em;
  text-transform:uppercase;
  line-height:1;
  margin-top:2px;
}

.nav{flex:1;overflow-y:auto;padding:14px 12px}
.nav-group{margin-bottom:18px}
.nav-label{
  font-size:10.5px;
  font-weight:600;
  letter-spacing:0.07em;
  text-transform:uppercase;
  color:var(--slate);
  padding:0 10px 6px;
}
.nav-item{
  position:relative;
  display:flex;
  align-items:center;
  gap:10px;
  padding:7px 10px;
  border-radius:6px;
  color:var(--fog);
  font-size:14px;
  font-weight:400;
  line-height:1;
  margin-bottom:1px;
  transition:background .12s ease,color .12s ease;
}
.nav-item i{font-size:17px;width:18px;text-align:center;color:var(--slate);transition:color .12s ease}
.nav-item:hover{background:rgba(255,255,255,0.035);color:var(--snow)}
.nav-item:hover i{color:var(--fog)}
.nav-item.active{
  background:rgba(255,255,255,0.05);
  color:var(--snow);
  font-weight:500;
}
.nav-item.active i{color:var(--indigo)}
.nav-item.active::before{
  content:"";
  position:absolute;
  left:-12px;top:50%;
  transform:translateY(-50%);
  width:3px;height:18px;
  border-radius:0 3px 3px 0;
  background:var(--indigo);
}
.nav-item .badge-count{
  margin-left:auto;
  font-size:10.5px;
  font-weight:500;
  color:var(--slate);
  background:var(--obsidian);
  border:1px solid var(--graphite);
  border-radius:5px;
  padding:1px 6px;
  font-family:var(--mono);
}

.sidebar-footer{
  padding:14px 16px;
  border-top:1px solid var(--graphite);
}
.status-block{
  display:flex;
  align-items:flex-start;
  gap:9px;
}
.status-dot{
  width:8px;height:8px;border-radius:50%;
  background:var(--emerald);
  margin-top:5px;flex:none;
  box-shadow:0 0 0 3px rgba(39,166,68,0.18);
}
.status-dot.pulse{animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 3px rgba(39,166,68,0.18)}50%{box-shadow:0 0 0 5px rgba(39,166,68,0.05)}}
.status-text .t1{font-size:12.5px;font-weight:500;color:var(--mist);line-height:1.3}
.status-text .t2{font-size:11.5px;color:var(--slate);line-height:1.3}
.status-text .up{
  margin-top:6px;font-size:11px;color:var(--fog);
  font-family:var(--mono);
}
.status-text .up b{color:var(--emerald);font-weight:500}

/* ---------- MAIN ---------- */
.main{
  margin-left:var(--sidebar-w);
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
}

/* ---------- SOVMESTIMOST so staroy Bootstrap-obyortkoy stranic ----------
   Realnye stranicy ispolzuyut .container-fluid.page-body-wrapper > .main-panel
   > .content-wrapper. Privodim ih k novomu layoutu s fixed-sidebar. */
body{min-height:100vh}
.container-scroller{display:block}
.page-body-wrapper{display:block;position:relative}
.main-panel{
  margin-left:var(--sidebar-w);
  /* flex-rebenok .app: bez flex:1 szhimaetsya po kontentu (poluchaetsya "na polovinu shiriny",
     topbar/kontent uezzhayut k centru). flex:1 + width:auto -> tyanetsya na vsyu shirinu sprava ot sidebar. */
  flex:1 1 auto;
  min-width:0;width:auto;
  display:flex;flex-direction:column;min-height:100vh;
  background:transparent !important;
}
.content-wrapper{
  padding:28px 28px 40px !important;
  background:transparent !important;
  flex:1;width:100%;
}
/* topbar i preview-banner lezhat VNUTRI .main-panel (kotoryy uzhe sdvinut margin-left:sidebar-w
   i tyanetsya flex:1). Svoy margin-left im NE nuzhen - inache dvoynoy sdvig (sidebar-w x2)
   i topbar uezzhaet vpravo / na polovinu. Tyanutsya na vsyu shirinu roditelya. */
.topbar{margin-left:0;width:100%}
.ev-preview-banner{margin-left:0;width:100%}

/* ---------- ADAPTIVNOST: avtorastyazhka pod lyuboe razreshenie ---------- */
/* burger-knopka (pokazyvaetsya tolko na uzkih ekranah) */
.ev-burger{
  display:none;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:8px;flex:none;
  background:var(--obsidian);border:1px solid var(--graphite);color:var(--mist);
  font-size:20px;cursor:pointer;margin-right:4px;
}
.ev-burger:hover{background:var(--steel);color:#fff}
/* zatemnenie pod otkrytym sidebar (mobile) */
.ev-sidebar-overlay{
  display:none;position:fixed;inset:0;z-index:35;
  background:rgba(0,0,0,0.55);backdrop-filter:blur(1px);
}
.ev-sidebar-overlay.show{display:block}

/* PLANSHET i menshe: sidebar uezzhaet, kontent na vsyu shirinu */
@media (max-width:1100px){
  .main-panel,.topbar,.ev-preview-banner{margin-left:0 !important}
  .sidebar{transform:translateX(-100%);transition:transform .22s cubic-bezier(.2,.7,.2,1);box-shadow:none}
  .sidebar.open{transform:none;box-shadow:0 0 40px rgba(0,0,0,0.6)}
  .ev-burger{display:inline-flex}
  .content-wrapper{padding:20px 18px 32px !important}
  /* poisk uzhe na planshete */
  .search{width:200px}
}
/* MOBILE: tesnee, poisk pryachem, topbar kompaktnyy */
@media (max-width:640px){
  .content-wrapper{padding:16px 12px 28px !important}
  .topbar{padding:0 14px;gap:8px}
  .search{display:none}
  .user-chip .uname{display:none}
  .welcome{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .stat-grid{grid-template-columns:1fr 1fr;gap:10px}
  /* stranicy s inline-pinom kolonok (support-dashboard: 3 kolonki cherez
     style="grid-template-columns") na telefone tozhe svodim k 2 - atribut-scoped
     !important beryot verkh nad inline; class-based grids (.bal-grid, .ms-kpis)
     NE matchatsya, ostayutsya kak zadano. */
  .stat-grid[style*="grid-template-columns"]{grid-template-columns:1fr 1fr !important}
  .page-head .ps{display:none}
  .table-head{flex-wrap:wrap;gap:10px}
}
@media (max-width:420px){
  .stat-grid{grid-template-columns:1fr}
}

/* ---------- TOPBAR ---------- */
.topbar{
  position:sticky;top:0;z-index:30;
  height:60px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 28px;
  background:rgba(8,9,10,0.96);
  backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid var(--graphite);
}
.topbar .welcome{
  font-size:14px;font-weight:500;color:var(--mist);
  /* odnoy strokoy, ne lomaetsya "kuskom"; szhimaetsya plavno na uzkih ekranah */
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;flex:0 1 auto;
}
.topbar .welcome b{color:var(--snow);font-weight:600}
.topbar-right{display:flex;align-items:center;gap:14px;flex:0 0 auto}

.search{
  position:relative;
  display:flex;align-items:center;gap:9px;
  width:320px;
  background:rgba(255,255,255,0.03);
  border:1px solid var(--graphite);
  border-radius:9px;
  padding:0 10px 0 13px;
  height:38px;
  transition:border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
.search:hover{border-color:var(--iron);background:rgba(255,255,255,0.045)}
.search:focus-within{
  border-color:var(--indigo);
  background:rgba(151,23,217,0.05);
  box-shadow:0 0 0 3px rgba(151,23,217,0.16);
}
.search > i{font-size:17px;color:var(--slate);transition:color .16s ease}
.search:focus-within > i{color:var(--indigo)}
.search input{
  flex:1;background:none;border:none;outline:none;
  color:var(--snow);font-size:13.5px;letter-spacing:-0.005em;padding:0;
}
.search input::placeholder{color:var(--slate)}
.kbd{
  font-family:var(--mono);
  font-size:11px;font-weight:500;
  color:var(--fog);
  background:var(--obsidian);
  border:1px solid var(--graphite);
  border-radius:5px;
  min-width:20px;height:20px;
  display:inline-flex;align-items:center;justify-content:center;
  padding:0 5px;
  box-shadow:0 1px 0 rgba(0,0,0,0.4);
}

.user-chip{
  display:flex;align-items:center;gap:8px;
  padding:4px 8px 4px 4px;
  border-radius:8px;
  border:1px solid transparent;
  transition:background .12s ease,border-color .12s ease;
}
.user-chip:hover{background:rgba(255,255,255,0.04);border-color:var(--graphite)}
.avatar{
  width:28px;height:28px;border-radius:50%;
  background:linear-gradient(140deg,#9717d9,#c44cf0);
  display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:600;color:#fff;flex:none;
}
.user-chip .uname{font-size:13.5px;font-weight:500;color:var(--mist)}
.user-chip .preview-uname{text-transform:capitalize}
.user-chip i{font-size:16px;color:var(--slate)}

/* ---------- CONTENT ---------- */
/* tyanetsya na vsyu shirinu; ochen shirokie ekrany ogranichivaem dlya chitaemosti */
.content{padding:28px 28px 40px;width:100%;max-width:1800px;margin:0 auto}

/* PAGE HEADER */
.page-head{display:flex;align-items:center;gap:14px;margin-bottom:26px}
.icon-tile{
  width:40px;height:40px;border-radius:10px;
  background:var(--obsidian);
  box-shadow:var(--ring);
  display:flex;align-items:center;justify-content:center;
  flex:none;
}
.icon-tile i{font-size:20px;color:var(--indigo)}
.page-head .pt{font-size:24px;font-weight:600;letter-spacing:-0.022em;color:var(--snow);line-height:1.15}
.page-head .ps{font-size:13.5px;color:var(--fog);font-weight:400;margin-top:2px}

/* ============================================================
   CARDS
   ============================================================ */
.card{
  background:var(--charcoal);
  border-radius:12px;
  box-shadow:var(--ring),var(--sh-sm);
}

/* STAT GRID - 5 kart v ryad (Total / Active / Activated / Banned / Not activated) */
.stat-grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:14px;
  margin-bottom:24px;
}
.stat{
  display:block;
  padding:16px 18px;
  position:relative;
  overflow:hidden;
  color:inherit;text-decoration:none;
  cursor:pointer;
  border-radius:12px;
  transition:box-shadow .18s ease, transform .18s ease, border-color .18s ease;
  /* accent-cvet karty zadayotsya peremennoy --c (default indigo) */
  --c:var(--indigo);
}
/* hover lyuboy karty: podsvetka bordera v cvet karty + lyogkiy podyom */
.stat:hover{
  transform:translateY(-2px);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--c) 55%, transparent),
             0 8px 26px color-mix(in srgb, var(--c) 14%, transparent);
}
/* aktivnaya karta - fioletovyy border + lyogkoe svechenie (Total keys) */
.stat.active{
  box-shadow:inset 0 0 0 1px rgba(151,23,217,0.6), 0 0 0 1px rgba(151,23,217,0.2), 0 8px 28px rgba(151,23,217,0.12);
}
.stat.active:hover{
  transform:translateY(-2px);
  box-shadow:inset 0 0 0 1px rgba(151,23,217,0.85), 0 0 0 1px rgba(151,23,217,0.25), 0 10px 32px rgba(151,23,217,0.18);
}

/* verhnyaya stroka: ikonka-plashka + label sleva, +% pill sprava */
.stat-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:18px}
.stat-name{display:inline-flex;align-items:center;gap:9px;font-size:12.5px;font-weight:500;color:var(--mist);letter-spacing:-0.005em}
.stat-ic{
  width:26px;height:26px;border-radius:7px;flex:0 0 auto;
  display:inline-flex;align-items:center;justify-content:center;
  /* plashka v cvet karty: priglushyonnyy fon + yarkaya ikonka */
  background:color-mix(in srgb, var(--c) 16%, transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--c) 28%, transparent);
}
.stat-ic i{font-size:15px;color:var(--c)}
/* delta-pill so strelkoy (kak v dizayne B, no v nashey palitre) */
.stat-delta{
  display:inline-flex;align-items:center;gap:3px;
  font-size:11px;font-weight:600;font-family:var(--mono);letter-spacing:-0.01em;
  padding:2px 7px 2px 5px;border-radius:6px;line-height:1.3;
}
.stat-delta i{font-size:13px;line-height:1}
.stat-delta.up{color:var(--emerald);background:rgba(39,166,68,0.12)}
.stat-delta.down{color:var(--crimson);background:rgba(235,87,87,0.12)}

/* nizhnyaya stroka: krupnoe chislo sleva + mini-bar-chart sprava snizu */
.stat-bottom{display:flex;align-items:flex-end;justify-content:space-between;gap:10px}
.stat-num{
  font-size:30px;font-weight:600;
  letter-spacing:-0.03em;
  color:var(--snow);
  line-height:1;
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
}
/* kompaktnyy stolbchatyy mini-grafik v pravom nizhnem uglu */
.stat-bars{
  display:flex;align-items:flex-end;gap:2px;height:26px;flex:0 0 auto;
  opacity:.95;
}
.stat-bars i{
  display:block;width:3px;border-radius:1.5px;
  background:var(--c);
  /* vysota zadayotsya inline cherez height */
}

/* pill so strelkoy (ispolzuetsya v tablicah vs-prev) */
.pill{
  display:inline-flex;align-items:center;gap:2px;
  font-size:11px;font-weight:600;
  border-radius:6px;
  padding:2px 7px 2px 5px;
  font-family:var(--mono);
  letter-spacing:-0.01em;
}
.pill i{font-size:13px;line-height:1}
.pill .dot{width:5px;height:5px;border-radius:50%}
.pill.up{color:var(--emerald);background:rgba(39,166,68,0.12)}
.pill.up .dot{background:var(--emerald)}
.pill.down{color:var(--crimson);background:rgba(235,87,87,0.12)}
.pill.down .dot{background:var(--crimson)}
.pill.new{color:var(--fog);background:rgba(138,143,152,0.12);padding:2px 8px}
.pill.new .dot{background:var(--fog)}

/* ============================================================
   PERIOD BAR
   ============================================================ */
.period-bar{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:14px 18px;
  margin-bottom:24px;
  /* edinaya vysota vseh kontrolov v stroke */
  --ctl-h:38px;
}
.period-bar .plabel{font-size:12.5px;color:var(--fog);font-weight:500}
.seg{
  display:inline-flex;align-items:stretch;
  height:var(--ctl-h);
  background:var(--obsidian);
  border-radius:6px;
  box-shadow:var(--ring);
  padding:3px;
  gap:2px;
}
/* table-segment kompaktnee (sovpadaet s btn-ghost po vysote) */
.table-head .seg{height:var(--ctl-h-sm)}
.seg button{
  display:inline-flex;align-items:center;
  font-size:12.5px;font-weight:500;
  color:var(--fog);
  padding:0 13px;
  border-radius:5px;
  line-height:1;
  transition:background .14s ease,color .14s ease,box-shadow .14s ease,transform .06s ease;
  white-space:nowrap;
}
.seg button:hover{color:var(--snow);background:rgba(255,255,255,0.04)}
.seg button:active{transform:scale(.97)}
/* novyy aktivnyy segment: akcentnaya plashka (fioletovyy tint + ramka + svechenie),
   a ne ploskiy seryy. Chitaetsya kak vybrannyy, ne kak prosto navedyonnyy. */
.seg button.active{
  background:linear-gradient(180deg, rgba(151,23,217,0.22), rgba(151,23,217,0.12));
  color:#fff;
  box-shadow:inset 0 0 0 1px rgba(151,23,217,0.45), 0 2px 8px rgba(151,23,217,0.22);
}
.seg button.active:hover{background:linear-gradient(180deg, rgba(151,23,217,0.28), rgba(151,23,217,0.16))}
/* anchor-segmenty (period-pereklyuchateli na <a>, naprimer "This month 7d 15d 30d 3m")
   dolzhny vyglyadet 1:1 kak button-segmenty - inache <a> shlepayutsya v kuchu bez otstupov */
.seg a{
  display:inline-flex;align-items:center;
  font-size:12.5px;font-weight:500;
  color:var(--fog);
  padding:0 13px;
  border-radius:5px;
  line-height:1;
  transition:background .14s ease,color .14s ease,box-shadow .14s ease,transform .06s ease;
  white-space:nowrap;
}
.seg a:hover{color:var(--snow);background:rgba(255,255,255,0.04)}
.seg a:active{transform:scale(.97)}
.seg a.active{
  background:linear-gradient(180deg, rgba(151,23,217,0.22), rgba(151,23,217,0.12));
  color:#fff;
  box-shadow:inset 0 0 0 1px rgba(151,23,217,0.45), 0 2px 8px rgba(151,23,217,0.22);
}
.seg a.active:hover{background:linear-gradient(180deg, rgba(151,23,217,0.28), rgba(151,23,217,0.16))}
.or-custom{font-size:12.5px;color:var(--slate)}
/* date-field (stil kak na skrine 2): ikonka kalendarya sleva + chistyy ISO-format,
   akkuratnaya ramka. Nativnyy indikator pikera pryachem, klik po polyu otkryvaet ego. */
.date-field{
  position:relative;
  display:inline-flex;align-items:center;gap:8px;
  height:var(--ctl-h);
  background:var(--steel);
  border-radius:6px;
  box-shadow:var(--ring);
  padding:0 12px;
  transition:box-shadow .14s ease;
}
.date-field:focus-within{box-shadow:inset 0 0 0 1px var(--indigo),0 0 0 3px rgba(151,23,217,0.22)}
.date-field > .mdi{font-size:15px;color:var(--fog);flex:0 0 auto}
.date-input{
  background:none;border:none;outline:none;
  color:var(--snow);
  font-size:12.5px;
  font-family:var(--mono);
  letter-spacing:-0.01em;
  width:96px;
  color-scheme:dark;
  padding:0;
}
/* skryvaem nativnuyu ikonku-indikator (svoya ikonka sleva) */
.date-input::-webkit-calendar-picker-indicator{
  position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;
  opacity:0;cursor:pointer;
}
.btn-cta{
  display:inline-flex;align-items:center;justify-content:center;
  height:var(--ctl-h);
  background:var(--lime);
  color:#030404;
  font-size:14px;font-weight:600;
  letter-spacing:-0.01em;
  padding:0 20px;
  border-radius:6px;
  box-shadow:var(--sh-sm);
  transition:filter .12s ease,transform .06s ease;
  margin-left:auto;
}
.btn-cta:hover{filter:brightness(1.06)}
.btn-cta:active{transform:translateY(1px)}

/* ============================================================
   CHART ROW
   ============================================================ */
.chart-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
  margin-bottom:24px;
}
.chart-card{padding:20px 22px 18px}
.chart-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.chart-title{font-size:15px;font-weight:600;color:var(--snow);letter-spacing:-0.01em}
.chart-sub{font-size:12px;color:var(--slate);font-family:var(--mono)}
.chart-wrap{height:250px;position:relative;margin-top:8px}

/* ============================================================
   MOST POPULAR
   ============================================================ */
.popular{
  display:flex;align-items:center;gap:16px;
  padding:18px 22px;
  margin-bottom:24px;
}
.fire-tile{
  width:44px;height:44px;border-radius:11px;
  background:radial-gradient(circle at 30% 25%, rgba(228,242,34,0.16), var(--obsidian) 70%);
  box-shadow:var(--ring);
  display:flex;align-items:center;justify-content:center;flex:none;
}
.fire-tile i{font-size:22px;color:#f5a623}
.popular .ov{font-size:10.5px;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;color:var(--slate)}
.popular .pl-name{font-size:17px;font-weight:600;color:var(--snow);letter-spacing:-0.015em;margin-top:2px}
.popular .pl-name span{font-family:var(--mono);color:var(--indigo)}
.popular .pl-name em{font-style:normal;color:var(--fog);font-weight:400;font-size:14px}
.popular .pl-right{margin-left:auto;display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.popular .pl-right .big-pill{
  font-size:13px;padding:3px 9px;font-weight:600;
}
.popular .pl-right .cap{font-size:11px;color:var(--slate)}

/* ============================================================
   TABLES
   ============================================================ */
.table-card{margin-bottom:24px;overflow:hidden}
.table-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 22px;
  border-bottom:1px solid var(--graphite);
}
.table-head .tt{font-size:15px;font-weight:600;color:var(--snow);letter-spacing:-0.01em}
.table-head .tt i{color:var(--slate);font-size:15px;margin-right:7px;vertical-align:-2px}

table{width:100%;border-collapse:collapse}
thead th{
  font-size:10.5px;font-weight:600;letter-spacing:0.06em;text-transform:uppercase;
  color:var(--slate);
  text-align:left;
  padding:11px 22px;
  border-bottom:1px solid var(--graphite);
  background:rgba(255,255,255,0.012);
  white-space:nowrap;
}
thead th.num{text-align:right}
tbody td{
  padding:13px 22px;
  font-size:13.5px;
  color:var(--mist);
  border-bottom:1px solid rgba(35,37,42,0.6);
  vertical-align:middle;
}
tbody tr:last-child td{border-bottom:none}
tbody tr{transition:background .1s ease}
tbody tr:hover{background:rgba(255,255,255,0.018)}
td.num{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums;color:var(--platinum)}

.prod-cell{display:flex;align-items:center;gap:11px}
.prod-ic{
  width:30px;height:30px;border-radius:7px;
  background:var(--obsidian);
  box-shadow:var(--ring);
  display:flex;align-items:center;justify-content:center;flex:none;
}
.prod-ic i{font-size:16px}
.prod-name{font-weight:500;color:var(--snow);font-size:13.5px}
.prod-name .pmono{font-family:var(--mono);font-size:12.5px;color:var(--mist);font-weight:400}

.keycode{
  font-family:var(--mono);
  font-size:12.5px;
  color:var(--indigo);
  background:rgba(151,23,217,0.08);
  border:1px solid rgba(151,23,217,0.18);
  border-radius:5px;
  padding:2px 8px;
}
.owner-cell{display:flex;align-items:center;gap:9px}
.owner-av{
  width:24px;height:24px;border-radius:50%;
  background:var(--steel);
  display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:600;color:var(--mist);flex:none;
}
.country{display:flex;align-items:center;gap:7px;font-family:var(--mono);font-size:12.5px;color:var(--fog)}
.country .flag{font-size:14px}
.muted{color:var(--slate)}
.timecol{font-family:var(--mono);font-size:12.5px;color:var(--fog)}

/* edinaya knopka-ghost po vsemu UI: odna vysota, odin ritm, odin radius */
.btn-ghost{
  height:34px;
  font-size:12.5px;font-weight:500;
  color:var(--fog);
  padding:0 14px;
  border-radius:6px;
  border:1px solid var(--graphite);
  background:var(--obsidian);
  transition:color .12s ease,border-color .12s ease,background .12s ease;
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  white-space:nowrap;
}
.btn-ghost i{font-size:14px}
.btn-ghost:hover{color:var(--snow);border-color:var(--iron);background:var(--steel)}
/* kompaktnyy variant dlya strok tablicy (Open) - ta zhe sistema, men'she vysota */
.btn-ghost.btn-row{height:30px;padding:0 12px;font-size:12px}

/* FOOTER */
.foot{
  text-align:center;
  font-size:12px;
  color:var(--slate);
  padding:24px 0 8px;
  letter-spacing:-0.005em;
}
.foot b{color:var(--fog);font-weight:500}

@media (max-width:1100px){
  .stat-grid{grid-template-columns:repeat(2,1fr)}
  .chart-row{grid-template-columns:1fr}
}

/* ============================================================
   UNIVERSALNYE KOMPONENTY (dlya vseh stranic, ne bylo v prototipe)
   ============================================================ */

/* ---------- SIDEBAR DROPDOWN (kategorii: Sellers -> Dashboard/Keys/...) ---------- */
/* Punkt-tumbler kategorii (raskryvaetsya v spisok podpunktov) */
.nav-item.has-sub{cursor:pointer}
.nav-item .menu-arrow{margin-left:auto;font-size:16px;color:var(--slate);transition:transform .18s ease}
.nav-item[aria-expanded="true"] .menu-arrow,
.nav-item.open .menu-arrow{transform:rotate(90deg)}
/* Podmenu: skrytaya po umolchaniyu, plavnoe raskrytie */
.nav-sub{
  list-style:none;margin:2px 0 2px;padding:0;
  overflow:hidden;max-height:0;
  transition:max-height .24s cubic-bezier(.2,.7,.2,1);
}
.nav-sub.show,.nav-item[aria-expanded="true"] + .nav-sub{max-height:420px}
.nav-sub .nav-item{
  font-size:13px;padding:6px 10px 6px 38px;color:var(--slate);
}
.nav-sub .nav-item::after{
  content:"";position:absolute;left:20px;top:50%;transform:translateY(-50%);
  width:4px;height:4px;border-radius:50%;background:var(--graphite);
  transition:background .14s ease;
}
.nav-sub .nav-item:hover{color:var(--snow);background:rgba(255,255,255,0.03)}
.nav-sub .nav-item:hover::after{background:var(--fog)}
.nav-sub .nav-item.active{color:var(--snow);background:rgba(151,23,217,0.08)}
.nav-sub .nav-item.active::after{background:var(--indigo)}
.nav-sub .nav-item.active::before{display:none}

/* ---------- TOPBAR PROFILE DROPDOWN ---------- */
.dropdown{position:relative}
/* PO UMOLCHANIYU SKRYT - pokazyvaem tolko pri .show (klik) */
.dropdown-menu,.navbar-dropdown{
  display:none !important;
  position:absolute;right:0;top:calc(100% + 8px);z-index:60;
  background:var(--obsidian) !important;
  border:1px solid var(--graphite) !important;
  border-radius:10px !important;
  box-shadow:var(--sh-xl) !important;
  padding:6px !important;
  min-width:190px;
}
.dropdown-menu.show,.navbar-dropdown.show{display:block !important;animation:ev-dd-in .14s ease}
@keyframes ev-dd-in{from{opacity:0;transform:translateY(-6px) scale(.98)}to{opacity:1;transform:none}}
.user-chip.dropdown-toggle i.mdi-chevron-down{transition:transform .16s ease}
.dropdown.open .user-chip i.mdi-chevron-down{transform:rotate(180deg)}
.dropdown-item{
  display:flex;align-items:center;gap:9px;
  color:var(--mist) !important;font-size:13.5px !important;font-weight:400 !important;
  padding:8px 10px !important;border-radius:7px !important;
  transition:background .12s ease,color .12s ease;
}
.dropdown-item i{font-size:16px;color:var(--slate)}
.dropdown-item:hover{background:rgba(151,23,217,0.12) !important;color:#fff !important}
.dropdown-item:hover i{color:var(--indigo)}
.dropdown-divider{border-color:var(--graphite) !important;margin:5px 0}

/* ---------- BUTTONS (Bootstrap-klassy -> nash stil) ---------- */
.btn{
  font-family:'Inter',sans-serif !important;
  height:var(--ctl-h-sm);
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  font-size:13px !important;font-weight:500 !important;
  border-radius:7px !important;padding:0 15px !important;
  letter-spacing:-0.006em;border:1px solid transparent;
  cursor:pointer; /* <a class="btn"> bez href sam po sebe ne dayot pointer-kursor */
  transition:filter .12s ease,background .12s ease,border-color .12s ease,transform .06s ease;
}
/* Disabled knopki - kursor-zapret, bez podyoma na hover */
.btn:disabled,.btn.disabled{cursor:not-allowed}
.btn:disabled:hover,.btn.disabled:hover{transform:none}
.btn i{font-size:15px}
/* edinyy feedback dlya VSEH knopok: lyogkiy podyom na hover, vzhatie na klik */
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0) scale(.985)}
.btn-lg{height:var(--ctl-h);font-size:14px !important;padding:0 20px !important}
.btn-sm{height:30px;font-size:12px !important;padding:0 12px !important;border-radius:6px !important}
.btn-primary,.btn-gradient-primary,.bg-gradient-primary{
  background:var(--indigo) !important;color:#fff !important;border:0 !important;
  box-shadow:0 2px 12px rgba(151,23,217,0.3) !important;
}
.btn-primary:hover,.btn-gradient-primary:hover{
  background:#a92ee6 !important;filter:none;
  box-shadow:0 4px 20px rgba(151,23,217,0.5) !important;
}
.btn-primary:active,.btn-gradient-primary:active{box-shadow:0 2px 10px rgba(151,23,217,0.4) !important}
.btn-outline-primary{
  background:var(--obsidian) !important;border:1px solid var(--graphite) !important;color:var(--mist) !important;
}
.btn-outline-primary:hover{background:var(--steel) !important;border-color:var(--iron) !important;color:#fff !important}
.btn-secondary{background:var(--obsidian) !important;border:1px solid var(--graphite) !important;color:var(--mist) !important}
.btn-secondary:hover{background:var(--steel) !important;color:#fff !important}
.btn-success{background:var(--emerald) !important;border:0 !important;color:#fff !important}
.btn-danger{background:var(--crimson) !important;border:0 !important;color:#fff !important}
.btn-info{background:var(--obsidian) !important;border:1px solid var(--graphite) !important;color:var(--cyan) !important}
.btn-dark{background:var(--obsidian) !important;border:1px solid var(--graphite) !important;color:var(--mist) !important}
.btn-light{background:var(--steel) !important;border:0 !important;color:var(--snow) !important}
.btn-block{width:100%}

/* ---------- FORMS / INPUTS (Bootstrap -> nash stil) ---------- */
.form-control,.form-select,select,textarea,input[type=text],input[type=password],
input[type=email],input[type=number],input[type=search],input[type=date],input[type=datetime-local]{
  background:rgba(255,255,255,0.025) !important;
  border:1px solid var(--graphite) !important;
  border-radius:8px !important;
  color:var(--snow) !important;
  font-size:13.5px !important;font-family:'Inter',sans-serif !important;
  min-height:var(--ctl-h);padding:8px 12px !important;
  box-shadow:none !important;color-scheme:dark;
  transition:border-color .16s ease,box-shadow .16s ease;
}
.form-control:focus,.form-select:focus,select:focus,textarea:focus,input:focus{
  border-color:var(--indigo) !important;
  box-shadow:0 0 0 3px rgba(151,23,217,0.16) !important;outline:none;
}
.form-control::placeholder{color:var(--slate) !important}
.form-control-lg{min-height:var(--ctl-h);font-size:14px !important}
.form-control-sm{min-height:32px;font-size:12.5px !important;padding:5px 10px !important}

/* ---------- SELECT: svoy chevron + sbros nativnogo vida ----------
   Bez appearance:none brauzer risuet svoyu strelku; spisok optsiy na Windows-Chrome
   svetlyy. color-scheme:dark prosit tyomnyy nativnyy spisok; svoya strelka-chevron sprava. */
select,.form-select{
  -webkit-appearance:none;-moz-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238a8f98' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
  background-repeat:no-repeat !important;
  background-position:right 11px center !important;
  background-size:16px 16px !important;
  padding-right:34px !important;
  color-scheme:dark;
  cursor:pointer;
}
select:hover,.form-select:hover{border-color:var(--iron) !important}
/* nativnyy spisok optsiy - delaem tyomnym (naskolko pozvolyaet OS/brauzer) */
.form-select option,select option{background:var(--obsidian) !important;color:var(--snow) !important}
.form-select optgroup,select optgroup{background:var(--obsidian) !important;color:var(--fog) !important}

label,.form-label{color:var(--mist);font-size:13px;font-weight:500}

/* ---------- CHECKBOX / RADIO: custom (uroven shadcn / Linear / Vercel) ----------
   Akkuratnyy kvadrat 18px, radius 5px. Galochka - tonkiy SVG-stroke (ne grubyy
   border-treugolnik), "risuetsya" sleva-napravo cherez clip-path za .2s. Checked-fon -
   lyogkiy gradient dlya glubiny, myagkoe svechenie. Motion po Emil (ease-out, <250ms). */
.form-check-input{
  -webkit-appearance:none !important;-moz-appearance:none !important;appearance:none !important;
  width:18px;height:18px;flex:0 0 auto;
  border:1.5px solid var(--steel) !important;
  background:var(--obsidian) !important;
  background-image:none !important;
  border-radius:5px !important;
  cursor:pointer;position:relative;vertical-align:-4px;
  transition:background-color .18s cubic-bezier(.23,1,.32,1),border-color .18s ease,box-shadow .18s ease,transform .1s ease;
  box-shadow:none !important;
}
.form-check-input[type=radio]{border-radius:50% !important}
@media (hover:hover) and (pointer:fine){
  .form-check-input:not(:checked):hover{border-color:var(--indigo) !important;background:rgba(151,23,217,0.10) !important}
}
.form-check-input:focus-visible{box-shadow:0 0 0 3px rgba(151,23,217,0.25) !important;outline:none;border-color:var(--indigo) !important}
.form-check-input:active{transform:scale(.9)}
.form-check-input:checked{
  background:var(--indigo) !important;
  background-image:linear-gradient(180deg, #a82ee8, #8a13c9) !important;
  border-color:#8a13c9 !important;
  box-shadow:0 2px 10px rgba(151,23,217,0.45) !important;
}
/* galochka - tonkiy belyy SVG-stroke; risuetsya sleva-napravo (clip-path inset) */
.form-check-input[type=checkbox]::after{
  content:"";position:absolute;inset:0;
  background:no-repeat center/11px 11px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
  clip-path:inset(0 100% 0 0);
  transition:clip-path .22s cubic-bezier(.65,0,.35,1);
}
.form-check-input[type=checkbox]:checked::after{clip-path:inset(0 0 0 0)}
/* tochka (radio) - rastyot ot centra */
.form-check-input[type=radio]::after{
  content:"";position:absolute;left:50%;top:50%;
  width:7px;height:7px;border-radius:50%;background:#fff;
  transform:translate(-50%,-50%) scale(0);
  transition:transform .2s cubic-bezier(.23,1,.32,1);
  box-shadow:0 0 4px rgba(255,255,255,0.5);
}
.form-check-input[type=radio]:checked::after{transform:translate(-50%,-50%) scale(1)}
/* indeterminate (select-all v shapke tablicy) - akkuratnyy tире */
.form-check-input:indeterminate{
  background:var(--indigo) !important;
  background-image:linear-gradient(180deg, #a82ee8, #8a13c9) !important;
  border-color:#8a13c9 !important;box-shadow:0 2px 10px rgba(151,23,217,0.45) !important;
}
.form-check-input:indeterminate::after{
  content:"";position:absolute;left:50%;top:50%;width:9px;height:2px;background:#fff;border-radius:1px;
  clip-path:none;transform:translate(-50%,-50%);
}
.form-check-label{cursor:pointer;user-select:none}

/* ---------- BARE checkbox/radio (bez .form-check-input klassa) - tot zhe krasivyy vid ----------
   Naprimer permission-checkboxy v roles.html. Opt-out: data-no-style.
   Bazovaya korobka; vsyu otrisovku galochki/tochki nasleduem ot pravil .form-check-input
   nizhe (oni dublirovany dlya etih selektorov chtob byl 1-v-1 vid). */
.app input[type=checkbox]:not(.form-check-input):not([data-no-style]),
.app input[type=radio]:not(.form-check-input):not([data-no-style]){
  -webkit-appearance:none !important;-moz-appearance:none !important;appearance:none !important;
  width:18px;height:18px;flex:0 0 auto;
  border:1.5px solid var(--steel) !important;
  background:var(--obsidian) !important;background-image:none !important;
  border-radius:5px !important;
  cursor:pointer;position:relative;vertical-align:-4px;margin:0;
  transition:background-color .18s cubic-bezier(.23,1,.32,1),border-color .18s ease,box-shadow .18s ease,transform .1s ease;
  box-shadow:none !important;
}
.app input[type=radio]:not(.form-check-input):not([data-no-style]){border-radius:50% !important}
@media (hover:hover) and (pointer:fine){
  .app input[type=checkbox]:not(.form-check-input):not([data-no-style]):not(:checked):hover,
  .app input[type=radio]:not(.form-check-input):not([data-no-style]):not(:checked):hover{border-color:var(--indigo) !important;background:rgba(151,23,217,0.10) !important}
}
.app input[type=checkbox]:not(.form-check-input):not([data-no-style]):focus-visible,
.app input[type=radio]:not(.form-check-input):not([data-no-style]):focus-visible{box-shadow:0 0 0 3px rgba(151,23,217,0.25) !important;outline:none;border-color:var(--indigo) !important}
.app input[type=checkbox]:not(.form-check-input):not([data-no-style]):active,
.app input[type=radio]:not(.form-check-input):not([data-no-style]):active{transform:scale(.9)}
.app input[type=checkbox]:not(.form-check-input):not([data-no-style]):checked,
.app input[type=radio]:not(.form-check-input):not([data-no-style]):checked{
  background:var(--indigo) !important;background-image:linear-gradient(180deg, #a82ee8, #8a13c9) !important;
  border-color:#8a13c9 !important;box-shadow:0 2px 10px rgba(151,23,217,0.45) !important;
}
.app input[type=checkbox]:not(.form-check-input):not([data-no-style])::after{
  content:"";position:absolute;inset:0;
  background:no-repeat center/11px 11px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
  clip-path:inset(0 100% 0 0);
  transition:clip-path .22s cubic-bezier(.65,0,.35,1);
}
.app input[type=checkbox]:not(.form-check-input):not([data-no-style]):checked::after{clip-path:inset(0 0 0 0)}
.app input[type=radio]:not(.form-check-input):not([data-no-style])::after{
  content:"";position:absolute;left:50%;top:50%;width:7px;height:7px;border-radius:50%;background:#fff;
  transform:translate(-50%,-50%) scale(0);transition:transform .2s cubic-bezier(.23,1,.32,1);
}
.app input[type=radio]:not(.form-check-input):not([data-no-style]):checked::after{transform:translate(-50%,-50%) scale(1)}
.app input[type=checkbox]:not(.form-check-input):not([data-no-style]):indeterminate{
  background:var(--indigo) !important;background-image:linear-gradient(180deg, #a82ee8, #8a13c9) !important;border-color:#8a13c9 !important;
}
.app input[type=checkbox]:not(.form-check-input):not([data-no-style]):indeterminate::after{
  content:"";position:absolute;left:50%;top:50%;width:9px;height:2px;background:#fff;border-radius:1px;
  clip-path:none;transform:translate(-50%,-50%);
}

.form-text,.text-muted{color:var(--slate) !important}

/* ---------- INPUTY VNUTRI KONTEYNEROV (.search / .date-field) ----------
   Ramku/fon risuet sam konteyner. Globalnoe pravilo input[type=...] vyshe veshaet
   svoyu ramku+fon+padding s !important -> poluchalas "ramka v ramke" (nakladka).
   Vozvrashchaem inputam vnutri etih konteynerov golyy vid (vse s !important, chtob perebit). */
.search input,
.date-field input,
.date-field .date-input{
  background:none !important;
  border:none !important;
  border-radius:0 !important;
  box-shadow:none !important;
  min-height:0 !important;
  height:auto !important;
  padding:0 !important;
}
/* fokus takzhe ne dolzhen risovat svoyu ramku/teni - podsvechivaetsya konteyner (focus-within) */
.search input:focus,
.date-field input:focus,
.date-field .date-input:focus{
  border:none !important;
  box-shadow:none !important;
  outline:none !important;
}

/* ---------- BADGES / STATUS PILLS (Bootstrap -> nash stil) ---------- */
.badge{
  font-family:'Inter',sans-serif !important;font-weight:600 !important;
  font-size:11px !important;border-radius:6px !important;padding:3px 8px !important;
  letter-spacing:-0.005em;
}
.badge.bg-secondary,.badge-secondary{background:var(--obsidian) !important;color:var(--mist) !important;border:1px solid var(--graphite)}
.badge.bg-primary,.badge-primary{background:rgba(151,23,217,0.14) !important;color:var(--violet-3,#c9a6ff) !important}
.badge.bg-success,.badge-success{background:rgba(39,166,68,0.14) !important;color:var(--emerald) !important}
.badge.bg-danger,.badge-danger{background:rgba(235,87,87,0.14) !important;color:var(--crimson) !important}
.badge.bg-warning,.badge-warning{background:rgba(245,166,35,0.14) !important;color:#f5a623 !important}
.badge.bg-info,.badge-info{background:rgba(2,184,204,0.14) !important;color:var(--cyan) !important}

/* status-tochki s tekstom (aktiv/banned/expired) */
.status-chip{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:500}
.status-chip::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--slate)}
.status-chip.ok::before{background:var(--emerald);box-shadow:0 0 7px rgba(39,166,68,.6)}
.status-chip.bad::before{background:var(--crimson);box-shadow:0 0 7px rgba(235,87,87,.6)}
.status-chip.warn::before{background:#f5a623;box-shadow:0 0 7px rgba(245,166,35,.6)}
.status-chip.frozen{color:var(--blue)}
.status-chip.frozen::before{background:var(--blue);box-shadow:0 0 7px rgba(91,130,201,.6)}

/* ---------- MODALS (Bootstrap -> nash stil) ---------- */
.modal{
  display:none;position:fixed;inset:0;z-index:1050;
  overflow-y:auto;padding:40px 16px;
}
.modal.show{display:block}
.modal-dialog{
  max-width:540px;margin:0 auto;position:relative;z-index:1051;
  animation:ev-modal-pop .18s cubic-bezier(.2,.7,.2,1);
}
.modal-dialog.modal-lg{max-width:760px}
.modal-dialog.modal-sm{max-width:380px}
.modal-dialog-centered{display:flex;align-items:center;min-height:calc(100vh - 80px)}
@keyframes ev-modal-pop{from{opacity:0;transform:translateY(-12px) scale(.98)}to{opacity:1;transform:none}}
.ev-backdrop{position:fixed;inset:0;z-index:1040;background:rgba(0,0,0,0.62);backdrop-filter:blur(2px)}
body.ev-modal-open{overflow:hidden}
.modal-header{padding:18px 24px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--graphite) !important}
.modal-body{padding:22px 24px}
.modal-footer{padding:16px 24px;border-top:1px solid var(--graphite) !important;display:flex;align-items:center;justify-content:flex-end;gap:10px}
.modal-content{
  background:var(--charcoal) !important;border:1px solid var(--graphite) !important;
  border-radius:16px !important;box-shadow:var(--sh-xl) !important;color:var(--mist);
  overflow:hidden;
  /* tonkiy aktsentnyy otsvet sverhu - chtoby okno ne bylo "ploskim" */
  background-image:radial-gradient(120% 80% at 50% -10%, rgba(151,23,217,0.10), transparent 60%) !important;
}
.modal-title{color:var(--snow) !important;font-weight:600;font-size:16px;letter-spacing:-0.01em;display:flex;align-items:center;gap:9px}
.modal-title i{color:var(--indigo);font-size:19px}
.btn-close{
  filter:none;width:30px;height:30px;border-radius:8px;
  background:var(--obsidian);border:1px solid var(--graphite);
  display:inline-flex;align-items:center;justify-content:center;
  opacity:1;position:relative;
  transition:background .12s ease,border-color .12s ease;
}
.btn-close:hover{background:var(--steel);border-color:var(--iron)}
/* svoy krestik (X) - nativnyy bootstrap-fon mog ne podgruzitsya */
.btn-close::before{
  content:"\00d7";color:var(--fog);font-size:20px;line-height:1;
}
.btn-close:hover::before{color:#fff}

/* ---------- PAGINATION ---------- */
/* .pagination - Bootstrap <ul>; bez sbrosa pokazyvaet markery spiska (bullety) i idyot
   vertikalno. Privodim k gorizontalnomu ryadu bez markerov. */
.pagination{
  display:flex;flex-wrap:wrap;align-items:center;gap:4px;
  list-style:none;margin:0;padding:0;
}
.pagination .page-item{list-style:none}
.page-link{
  background:var(--obsidian) !important;border:1px solid var(--graphite) !important;
  color:var(--mist) !important;border-radius:7px !important;margin:0 3px;font-size:13px;
  min-width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;
  text-decoration:none;
}
.page-link:hover{background:var(--steel) !important;color:#fff !important}
.page-item.active .page-link{background:var(--indigo) !important;border-color:var(--indigo) !important;color:#fff !important}
.page-item.disabled .page-link{opacity:.45}

/* ---------- TABS (Bootstrap nav-tabs/pills) ---------- */
.nav-tabs,.nav-pills{border-bottom:1px solid var(--graphite) !important;gap:4px}
.nav-tabs .nav-link,.nav-pills .nav-link{
  color:var(--fog) !important;border:0 !important;border-radius:7px !important;
  font-size:13.5px;font-weight:500;padding:8px 14px !important;background:transparent !important;
}
.nav-tabs .nav-link:hover,.nav-pills .nav-link:hover{color:var(--snow) !important;background:rgba(255,255,255,0.03) !important}
/* aktivnyy tab/pill - akcentnaya plashka s ramkoy i svecheniem (bez "podchyorkivaniya snizu") */
.nav-tabs .nav-link.active,.nav-pills .nav-link.active{
  color:#fff !important;
  background:linear-gradient(180deg, rgba(151,23,217,0.22), rgba(151,23,217,0.12)) !important;
  box-shadow:inset 0 0 0 1px rgba(151,23,217,0.45), 0 2px 8px rgba(151,23,217,0.22) !important;
}

/* ---------- ALERTS / TOASTS ---------- */
.alert{border-radius:10px !important;border:1px solid var(--graphite) !important;background:var(--obsidian) !important;color:var(--mist);font-size:13.5px}
.alert-success{border-color:rgba(39,166,68,.3) !important;background:rgba(39,166,68,.08) !important;color:var(--emerald) !important}
.alert-danger{border-color:rgba(235,87,87,.3) !important;background:rgba(235,87,87,.08) !important;color:var(--crimson) !important}
.alert-warning{border-color:rgba(245,166,35,.3) !important;background:rgba(245,166,35,.08) !important;color:#f5a623 !important}

/* ---------- GENERIC CARD wrapper (lyuboy kontent-blok) ---------- */
.panel{background:var(--charcoal);border-radius:12px;box-shadow:var(--ring),var(--sh-sm);padding:22px 24px;margin-bottom:18px}
.panel-title{font-size:15px;font-weight:600;color:var(--snow);letter-spacing:-0.01em;margin-bottom:14px;display:flex;align-items:center;gap:8px}
.panel-title i{color:var(--slate);font-size:16px}

/* ---------- PREVIEW BANNER (View as role) ---------- */
.ev-preview-banner{
  display:flex;align-items:center;gap:14px;justify-content:center;
  background:linear-gradient(90deg,var(--indigo),#c44cf0);
  color:#fff;padding:9px 18px;font-size:13.5px;font-weight:500;
  border-bottom:1px solid rgba(255,255,255,0.12);
}
.ev-preview-banner strong{font-weight:700}
.ev-preview-banner .btn-light{height:28px;padding:0 14px;font-weight:600}

/* ============================================================
   BOOTSTRAP-SOVMESTIMAYA SETKA + UTILITY (Bootstrap css ubran,
   no stranicy ispolzuyut .row/.col/.d-flex/.mt-/... - daom im stili,
   chtoby NICHEGO ne naezzhalo drug na druga)
   ============================================================ */
.container,.container-fluid{width:100%;padding-right:0;padding-left:0;margin:0 auto}
.row{display:flex;flex-wrap:wrap;margin-right:-8px;margin-left:-8px}
.row > *{padding-right:8px;padding-left:8px;box-sizing:border-box}
/* gutters g-* */
.g-0{margin:0}.g-0 > *{padding:0}
.g-1{margin:-2px}.g-1 > *{padding:2px}
.g-2{margin:-4px}.g-2 > *{padding:4px}
.g-3{margin:-8px}.g-3 > *{padding:8px}
.g-4{margin:-12px}.g-4 > *{padding:12px}
/* kolonki: auto-rastyazhka */
.col{flex:1 0 0%;min-width:0}
.col-auto{flex:0 0 auto;width:auto}
.col-1{flex:0 0 auto;width:8.3333%}
.col-2{flex:0 0 auto;width:16.6667%}
.col-3{flex:0 0 auto;width:25%}
.col-4{flex:0 0 auto;width:33.3333%}
.col-5{flex:0 0 auto;width:41.6667%}
.col-6{flex:0 0 auto;width:50%}
.col-7{flex:0 0 auto;width:58.3333%}
.col-8{flex:0 0 auto;width:66.6667%}
.col-9{flex:0 0 auto;width:75%}
.col-10{flex:0 0 auto;width:83.3333%}
.col-11{flex:0 0 auto;width:91.6667%}
.col-12{flex:0 0 auto;width:100%}
@media (min-width:768px){
  .col-md{flex:1 0 0%;min-width:0}
  .col-md-2{flex:0 0 auto;width:16.6667%}.col-md-3{flex:0 0 auto;width:25%}
  .col-md-4{flex:0 0 auto;width:33.3333%}.col-md-5{flex:0 0 auto;width:41.6667%}
  .col-md-6{flex:0 0 auto;width:50%}.col-md-7{flex:0 0 auto;width:58.3333%}
  .col-md-8{flex:0 0 auto;width:66.6667%}.col-md-9{flex:0 0 auto;width:75%}
  .col-md-12{flex:0 0 auto;width:100%}
}
@media (min-width:992px){
  .col-lg{flex:1 0 0%;min-width:0}
  .col-lg-2{flex:0 0 auto;width:16.6667%}.col-lg-3{flex:0 0 auto;width:25%}
  .col-lg-4{flex:0 0 auto;width:33.3333%}.col-lg-5{flex:0 0 auto;width:41.6667%}
  .col-lg-6{flex:0 0 auto;width:50%}.col-lg-7{flex:0 0 auto;width:58.3333%}
  .col-lg-8{flex:0 0 auto;width:66.6667%}.col-lg-9{flex:0 0 auto;width:75%}
  .col-lg-12{flex:0 0 auto;width:100%}
}
/* na uzkih ekranah col-md/col-lg = polnaya shirina (chtob ne nalezali) */
@media (max-width:767.98px){ [class*="col-md"],[class*="col-lg"]{flex:0 0 auto;width:100%} }

/* ---- FLEX utility ---- */
.d-flex{display:flex !important}
.d-inline-flex{display:inline-flex !important}
.d-block{display:block !important}
.d-inline{display:inline !important}
.d-inline-block{display:inline-block !important}
.d-none{display:none !important}
.flex-grow{flex:1 1 auto}.flex-grow-1{flex-grow:1 !important}
.flex-wrap{flex-wrap:wrap !important}
.flex-column{flex-direction:column !important}
.flex-row{flex-direction:row !important}
.justify-content-start{justify-content:flex-start !important}
.justify-content-end{justify-content:flex-end !important}
.justify-content-center{justify-content:center !important}
.justify-content-between{justify-content:space-between !important}
.justify-content-around{justify-content:space-around !important}
.align-items-start{align-items:flex-start !important}
.align-items-end{align-items:flex-end !important}
.align-items-center{align-items:center !important}
.align-items-stretch{align-items:stretch !important}
.text-center{text-align:center !important}
.text-end,.text-right{text-align:right !important}
.text-start,.text-left{text-align:left !important}
.ms-auto{margin-left:auto !important}.me-auto{margin-right:auto !important}
.mx-auto{margin-left:auto !important;margin-right:auto !important}
.w-100{width:100% !important}.h-100{height:100% !important}
.gap-1{gap:4px !important}.gap-2{gap:8px !important}.gap-3{gap:12px !important}.gap-4{gap:16px !important}

/* ---- SPACING utility (m/p t/b/s/e/x/y 0-5) ---- */
.m-0{margin:0 !important}.m-1{margin:4px !important}.m-2{margin:8px !important}.m-3{margin:16px !important}.m-4{margin:24px !important}.m-5{margin:48px !important}
.mt-0{margin-top:0 !important}.mt-1{margin-top:4px !important}.mt-2{margin-top:8px !important}.mt-3{margin-top:16px !important}.mt-4{margin-top:24px !important}.mt-5{margin-top:48px !important}
.mb-0{margin-bottom:0 !important}.mb-1{margin-bottom:4px !important}.mb-2{margin-bottom:8px !important}.mb-3{margin-bottom:16px !important}.mb-4{margin-bottom:24px !important}.mb-5{margin-bottom:48px !important}
.ms-1{margin-left:4px !important}.ms-2{margin-left:8px !important}.ms-3{margin-left:16px !important}
.me-1{margin-right:4px !important}.me-2{margin-right:8px !important}.me-3{margin-right:16px !important}
.mr-2{margin-right:8px !important}.ml-2{margin-left:8px !important}
.p-0{padding:0 !important}.p-1{padding:4px !important}.p-2{padding:8px !important}.p-3{padding:16px !important}.p-4{padding:24px !important}.p-5{padding:48px !important}
.pt-3{padding-top:16px !important}.pb-3{padding-bottom:16px !important}
.px-3{padding-left:16px !important;padding-right:16px !important}.py-3{padding-top:16px !important;padding-bottom:16px !important}

/* table-responsive: gorizontalnyy skroll vmesto naezda */
.table-responsive{display:block;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}

/* utility */
.text-violet{color:var(--indigo) !important}
.text-success,.text-emerald{color:var(--emerald) !important}
.text-danger{color:var(--crimson) !important}
.mono{font-family:var(--mono)}
hr{border-color:var(--graphite) !important;opacity:1}

/* ============================================================
   LICENSE TIME PROGRESS BARS (keys.html / seller-keys.html)
   Tsvet polosy = skolko sroka OSTALOS: zelyonyy (svezhiy klyuch)
   plavno k krasnomu k koncu. Tier prihodit s backenda (LicenseTier):
   high (>50%) emerald / mid (>20%) amber / low (<=20%) crimson / expired grey.
   Vnutri polosy lyogkiy gradient -> chitaetsya kak zhivoy perehod, ne ploskaya zalivka.
   ============================================================ */
.lic-track{
  height:5px;
  border-radius:3px;
  background:var(--graphite);
  overflow:hidden;
}
.lic-fill{
  height:100%;
  border-radius:3px;
  transition:width .3s ease, background .3s ease;
}
/* high: polnyy / svezhiy - zelyonyy s lyogkim svecheniem */
.lic-fill.lic-high{
  background:linear-gradient(90deg, #1f8f3a, var(--emerald));
  box-shadow:0 0 6px rgba(39,166,68,0.45);
}
/* mid: sered srok - yantarnyy (zelyonyy uhodit v oranzhevyy) */
.lic-fill.lic-mid{
  background:linear-gradient(90deg, #c9851a, #f5a623);
  box-shadow:0 0 6px rgba(245,166,35,0.4);
}
/* low: skoro konec - krasnyy */
.lic-fill.lic-low{
  background:linear-gradient(90deg, #c23b3b, var(--crimson));
  box-shadow:0 0 6px rgba(235,87,87,0.45);
}
/* expired / banned: seryy bez svecheniya */
.lic-fill.lic-expired{
  background:var(--slate);
  box-shadow:none;
}

/* ============================================================
   CUSTOM SELECT (.dd) - global, progressive enhancement nad <select>
   (ev-select.js pryachet nativnyy select i risuet etot widget). Tyomnoe menyu
   vmesto svetlogo OS-spiska. Motion po Emil: scale .96->1, ease-out ~180ms,
   origin sverhu (menyu rastyot ot triggera vniz).
   ============================================================ */
/* po umolchaniyu shirina 100% (kak u .form-select v stroke formy). No esli ev-select.js
   skopiroval inline width/min/max so staroga <select> - root.style perebivaet eto. */
.dd{position:relative;width:100%;vertical-align:middle}
.dd__trigger{
  display:flex;align-items:center;gap:8px;width:100%;
  height:var(--ctl-h);
  background:rgba(255,255,255,0.025);
  border:1px solid var(--graphite);
  border-radius:8px;
  padding:0 12px;
  color:var(--snow);
  font-size:13.5px;font-family:'Inter',sans-serif;
  cursor:pointer;text-align:left;
  transition:border-color .16s ease,box-shadow .16s ease,background .16s ease;
}
/* kompaktnyy variant (zamena .form-control-sm select) - nizhe i melche, dlya inline-strok */
.dd--sm .dd__trigger{height:32px;font-size:12.5px;padding:0 10px;border-radius:6px}
.dd--sm .dd__caret{font-size:14px}
.dd__trigger:hover{border-color:var(--iron)}
.dd__value{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dd__trigger.is-placeholder .dd__value{color:var(--slate)}
.dd__caret{color:var(--fog);font-size:16px;flex-shrink:0;transition:transform .2s cubic-bezier(.23,1,.32,1),color .15s ease}
.dd.open .dd__trigger{border-color:var(--indigo);box-shadow:0 0 0 3px rgba(151,23,217,0.18)}
.dd.open .dd__caret{transform:rotate(180deg);color:var(--indigo)}
.dd__menu{
  position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:70;
  background:var(--obsidian);
  border:1px solid var(--graphite);
  border-radius:10px;
  box-shadow:var(--sh-xl);
  padding:5px;
  max-height:300px;overflow-y:auto;
  opacity:0;transform:translateY(-6px) scale(.96);transform-origin:top center;
  pointer-events:none;
  transition:opacity .18s ease-out,transform .18s cubic-bezier(.23,1,.32,1);
}
.dd.open .dd__menu{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}

/* Portaled menu: while open, ev-select.js moves the REAL .dd__menu node onto <body>
   and positions it position:fixed against the viewport (inline top/left/width/max-height).
   This escapes the modal's overflow:hidden clip, its stacking context and the transient
   transform on .modal-dialog. z-index sits above .modal (1050) / .modal-dialog (1051).
   The node keeps its .dd__menu look (bg, border, radius, shadow, padding, scroll) and
   animation; only positioning and the shown-state come from here, since ".dd.open
   .dd__menu" no longer matches once the node leaves its .dd. */
.dd__menu--portal{
  position:fixed;top:0;left:0;right:auto;z-index:1060;
  /* stays in the closed visual state (opacity:0, translateY/scale from base .dd__menu)
     for one frame; JS then adds .dd__menu--show on the next frame to animate open. */
}
/* Flip-up: grow from the bottom edge toward the trigger instead of the top. */
.dd__menu--up{transform-origin:bottom center}
.dd__menu--up:not(.dd__menu--show){transform:translateY(6px) scale(.96)}
/* Shown state for the portaled menu (replaces ".dd.open .dd__menu", which cannot
   match once the node lives on <body>). */
.dd__menu--portal.dd__menu--show{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}
/* No-JS / reduced-motion users still get the crossfade; movement removed. */
@media (prefers-reduced-motion:reduce){
  .dd__menu{transition:opacity .12s ease-out}
  .dd__menu,.dd.open .dd__menu,.dd__menu--portal,.dd__menu--up:not(.dd__menu--show){transform:none}
}
.dd__opt{
  display:flex;align-items:center;gap:9px;
  padding:8px 10px;border-radius:7px;
  font-size:13.5px;color:var(--mist);cursor:pointer;
  transition:background .12s ease,color .12s ease;
}
/* Text label takes the free space and truncates instead of wrapping onto a second
   line (long role names like "- No role (Support view only) -" used to break the
   row and push the check mark out of place). */
.dd__opt > span:not(.opt-dot){flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dd__opt .check{margin-left:auto;flex-shrink:0;color:var(--indigo);font-size:15px;opacity:0;transition:opacity .12s ease}
.dd__opt:hover,.dd__opt.active{background:rgba(255,255,255,0.04);color:var(--snow)}
.dd__opt.selected{background:rgba(151,23,217,0.12);color:var(--snow);font-weight:500}
.dd__opt.selected .check{opacity:1}
.dd__opt .opt-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;background:var(--od,transparent)}

/* ============================================================
   MOBILE / TOUCH - udobstvo na telefone dlya modalok, form i dropdaunov.
   ============================================================ */
@media (max-width:640px){
  /* Modalka pochti na vsyu shirinu, s nebolshimi polyami; kontent scrollitsya. */
  .modal{padding:16px 10px;}
  .modal-dialog,.modal-dialog.modal-lg,.modal-dialog.modal-sm{max-width:100%;width:100%;margin:0;}
  .modal-dialog-centered{min-height:calc(100vh - 32px);}
  .modal-body{padding:18px 16px;max-height:calc(100vh - 180px);overflow-y:auto;}
  .modal-header,.modal-footer{padding-left:16px;padding-right:16px;}
  /* Knopki v footere modalki perenosyatsya i tyanutsya na vsyu shirinu. */
  .modal-footer{flex-wrap:wrap;}
  .modal-footer .btn{flex:1 1 auto;min-width:120px;}
  /* Bolshe zona kasaniya u kontrolov na telefone. */
  .dd__trigger,.form-control,.form-select,select,input[type=text],input[type=password],
  input[type=email],input[type=number]{min-height:44px;}
  .dd__opt{padding:11px 12px;}
}
/* Touch-ustroystva (bez tochnogo kursora): punkty dropdauna krupnee dlya paltsa. */
@media (hover:none) and (pointer:coarse){
  .dd__opt{padding:12px;}
  .dd__menu{max-height:60vh;}
}

/* ============================================================
   PANEL BACKGROUND - tonkiy fon na vsey paneli pod kontentom.
   Priglushyonnaya tochechnaya setka + myagkie fioletovye svecheniya po uglam.
   fixed + z-index:-1 -> pod vsem, ne meshaet klikam, ne ezdit pri skrolle.
   ============================================================ */
body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(60% 50% at 85% 0%, rgba(151,23,217,0.10), transparent 70%),
    radial-gradient(50% 45% at 0% 100%, rgba(2,184,204,0.06), transparent 70%),
    var(--onyx);
}
body::after{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.5;
  background-image:radial-gradient(rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size:26px 26px;
  -webkit-mask-image:radial-gradient(circle at 50% 30%, #000 0%, transparent 75%);
  mask-image:radial-gradient(circle at 50% 30%, #000 0%, transparent 75%);
}

/* ============================================================
   MOBILE FINAL - phone polish (<=640) and small-phone (<=420).
   Appended at EOF so these win source-order ties over base
   components (.page-link, thead th, .btn, inputs) without !important.
   Nothing here affects >=1101px: every rule is width- or touch-gated.
   No em-dashes (project rule).
   ============================================================ */
@media (max-width:640px){

  /* 1. Bare <table> in a .table-card scrolls itself on phones.
     Wrapped tables live inside .table-responsive, so they are NOT a
     direct child of .table-card -> not matched -> no double scroll.
     .kd-info key/value tables live in .panel -> not matched. */
  .table-card > table{
    display:block;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }
  /* Right-edge fade = "there is more to scroll ->". Wrapper only, so it
     never smudges a table that fits. */
  .table-responsive{
    box-shadow:inset -14px 0 12px -12px rgba(0,0,0,0.55);
    scrollbar-width:thin;
  }

  /* 2. Page-head action buttons drop below the title, full-width.
     Target the action cluster ONLY: it always carries inline
     margin-left:auto, or the head is justify-content:space-between.
     Never selects the title div (which has no inline style). */
  .page-head{flex-wrap:wrap;gap:10px 12px;margin-bottom:20px}
  /* The title block (2nd child, the div holding .pt/.ps) must GROW to fill the
     first row so the action cluster is pushed onto its own wrapped row. Without
     this it stays narrow, leaving space for the buttons beside it in row 1 and
     they overflow to the right instead of wrapping. Target the middle div: it
     is the direct child that is neither the icon-tile nor the action cluster. */
  .page-head > .icon-tile{flex:0 0 auto}
  .page-head > div:not(.icon-tile):not([style]):not([class]){flex:1 1 auto;min-width:0}
  /* Action cluster: full row, reset the auto-margin, wrap its own buttons. */
  .page-head > [style*="margin-left:auto"],
  .page-head[style*="space-between"] > div:last-child{
    margin-left:0 !important;
    flex:1 1 100%;
    width:100%;
    display:flex;
    flex-wrap:wrap;
    gap:8px;
  }
  /* Lone direct <a class="btn"> action (sellers, my-keys, generate). */
  .page-head > a.btn[style*="margin-left:auto"],
  .page-head > .btn[style*="margin-left:auto"]{
    flex:1 1 100%;width:100%;justify-content:center;
  }
  /* Buttons inside an action wrapper: flex-basis ~45% so two fit side by side
     when the labels are short, and long-label buttons ("Support Management",
     "Mass key generation") wrap onto their own full-width line instead of
     overflowing past the screen edge. min-width:0 lets them shrink. */
  .page-head > [style*="margin-left:auto"] .btn,
  .page-head[style*="space-between"] > div:last-child .btn{
    flex:1 1 45%;min-width:0;min-height:44px;justify-content:center;
    white-space:nowrap;
  }
  /* settings.html .set-actions (3 full-label buttons): stack single-column
     so long labels ("Reset All HWIDs") cannot force horizontal page scroll. */
  .page-head > .set-actions{
    margin-left:0 !important;flex:1 1 100%;width:100%;
    display:flex;flex-direction:column;gap:8px;
  }
  .page-head > .set-actions > .btn{
    width:100%;min-height:44px;justify-content:center;min-width:0;
  }

  /* 3. Titles / icon-tile scale down so long titles fit at 360. */
  .page-head .pt{font-size:20px}
  .icon-tile{width:36px;height:36px}
  .icon-tile i{font-size:18px}

  /* 4. Filter bars / multi-field rows: stack full-width + tappable.
     Scoped to .panel .row so page-head/modal buttons are unaffected. */
  .panel .row > [class*="col-"]{flex:0 0 auto;width:100%}
  .panel .row .form-control,
  .panel .row .form-select,
  .panel .row select,
  .panel .row .dd,
  .panel .row .dd__trigger{width:100%;min-height:44px}
  .panel .row .btn{flex:1 1 auto;min-height:44px}
  #keys_custom_range .form-control{max-width:none;width:100%}

  /* 5. Shared .period-bar (index, my-earnings): stack cleanly.
     .seg wraps (never overflow-x on a fixed 38px control -> would clip pills). */
  .period-bar{padding:12px 14px;gap:10px}
  .period-bar .seg{width:100%;flex-wrap:wrap;height:auto}
  .period-bar .date-field{flex:1 1 auto}
  .period-bar .btn-cta{margin-left:0;width:100%}
  .period-bar form{margin-left:0 !important;width:100%;flex-wrap:wrap}

  /* 6. Tighter surfaces so tables/cards use the narrow width. */
  .panel{padding:16px 14px}
  .chart-card{padding:16px 14px 14px}
  .table-head{padding:13px 14px}
  .table-head .tt{font-size:14px}
  thead th{padding:10px 14px}
  tbody td{padding:11px 14px}
  .popular{flex-wrap:wrap;padding:16px 14px}
  .popular .pl-right{margin-left:0;align-items:flex-start;width:100%}

  /* 7. iOS Safari zooms the page on focus of any control under 16px and
     never zooms back. Bump focus targets to 16px on phones only. Must be
     !important to beat the global input rule. EXCLUDES .date-input (12.5px
     in a fixed 96px box) and .dd__opt/.dd__value (tap targets, not focus). */
  .form-control,.form-select,select,textarea,
  input[type=text],input[type=password],input[type=email],
  input[type=number],input[type=search],input[type=date],
  input[type=datetime-local],
  .dd__trigger{font-size:16px !important}

  /* 8. Topbar at 360: keep burger + welcome + chip clear. */
  .topbar{gap:10px}
  .topbar-right{gap:8px}
  .user-chip{padding:4px}
  .user-chip .mdi-chevron-down{display:none}
  .topbar .welcome{max-width:46vw}

  /* 9. Profile dropdown menu (the plain absolute menu, NOT the .dd portal). */
  .dropdown-menu,.navbar-dropdown{min-width:180px;max-width:calc(100vw - 20px)}
  .dropdown-item{padding:11px 12px !important;min-height:44px}

  /* 10. Modal footer buttons fill the row cleanly when they wrap. */
  .modal-footer .btn{min-width:0;flex:1 1 auto;min-height:44px}

  /* 11. Pagination touch targets (base is 34px; this block wins by order). */
  .page-link{min-width:40px;height:40px}
}

@media (max-width:420px){
  .page-head .pt{font-size:18px}
  .icon-tile{width:34px;height:34px}
  .icon-tile i{font-size:17px}
  /* smallest phones: single-column stat grids even when inline-pinned. */
  .stat-grid[style*="grid-template-columns"]{grid-template-columns:1fr !important}
  /* drop the welcome text entirely, keeps burger + chip only. */
  .topbar .welcome{display:none}
}

/* Touch phones only (width-gated so touch laptops/tablets >=641 keep the
   34/38px desktop rhythm): comfortable tap heights on segmented/ghost
   controls and nav rows. */
@media (max-width:640px) and (pointer:coarse){
  .seg button,.seg a,.btn-ghost,.btn-cta,.pc-btn{min-height:44px}
  .sidebar .nav-item{padding-top:10px;padding-bottom:10px}
  .nav-sub .nav-item{padding-top:9px;padding-bottom:9px}
}