/* 27 SMS · веб-админка. Палитра и размеры из макета (.scratch/web-admin/mockup). */
:root {
  --bg: #0A0607; --sf: #140C0E; --s2: #1D1215; --bd: rgba(255,110,110,.11);
  --tx: #EDEDF2; --mt: #9090A0; --dm: #5F5F6D; --hv: rgba(255,90,90,.06);
  --ok: #34D399; --er: #F87171; --wn: #FBBF24;
  --okt: rgba(52,211,153,.13); --ert: rgba(248,113,113,.12); --wnt: rgba(251,191,36,.14);
  --ac: #FF3B4E; --ac2: #D91E36; --acr: 255,59,78;
  --acs: rgba(var(--acr),.15); --acb: rgba(var(--acr),.42);
  --shadow: 0 24px 60px rgba(0,0,0,.45);
  --mono: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;
  --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  color-scheme: dark;
}
:root[data-theme="light"] {
  --bg: #F7F2F2; --sf: #FFFFFF; --s2: #F3EAEA; --bd: rgba(15,15,30,.09);
  --tx: #14141A; --mt: #6A6A79; --dm: #9A9AA8; --hv: rgba(15,15,30,.045);
  --ok: #10A878; --er: #E5484D; --wn: #D98A00;
  --okt: rgba(16,168,120,.11); --ert: rgba(229,72,77,.10); --wnt: rgba(217,138,0,.12);
  --acs: rgba(var(--acr),.11); --acb: rgba(var(--acr),.5);
  --shadow: 0 24px 60px rgba(20,10,10,.14);
  color-scheme: light;
}
:root[data-accent="emerald"] { --ac: #2DD4A0; --ac2: #12B886; --acr: 45,212,160; }

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--tx); }
body { font-family: var(--sans); font-size: 14px; line-height: 1.4; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; }
input::placeholder, textarea::placeholder { color: var(--dm); }
svg { display: block; }
:focus-visible { outline: 2px solid var(--acb); outline-offset: 2px; }

.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.lbl { font-size: 12px; font-weight: 500; color: var(--mt); }
.h3 { font-size: 14px; font-weight: 600; margin: 0; }
.mt { color: var(--mt); } .dm { color: var(--dm); } .okc { color: var(--ok); } .erc { color: var(--er); }
.wnc { color: var(--wn); } .acc { color: var(--ac); }
.card { background: var(--sf); border: 1px solid var(--bd); border-radius: 14px; }
.grow { flex-grow: 1; } .nowrap { white-space: nowrap; } .ell { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.right { text-align: right; } .center { text-align: center; }
.row:hover { background: var(--hv); }
.link { color: var(--ac); font-weight: 500; font-size: 12.5px; }
.link:hover { text-decoration: underline; }

/* ---------- загрузка ---------- */
.boot { min-height: 100vh; display: flex; align-items: center; justify-content: center; }
.sk { background: linear-gradient(90deg, var(--hv), var(--bd), var(--hv)); background-size: 200% 100%;
      animation: skm 1.2s linear infinite; border-radius: 6px; }
@keyframes skm { 0% { background-position: 200% 0 } 100% { background-position: -200% 0 } }
@keyframes pulse { 0%,100% { opacity: 1 } 50% { opacity: .4 } }
@keyframes fadein { from { opacity: 0; transform: translateY(6px) } to { opacity: 1; transform: none } }
@keyframes pop { from { opacity: 0; transform: translate(-50%, 8px) scale(.98) } to { opacity: 1; transform: translate(-50%, 0) } }
.page { animation: fadein .25s ease-out; }

.logo27 { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; background: #000; flex: none;
          box-shadow: 0 0 0 1px rgba(var(--acr),.35), 0 0 18px rgba(var(--acr),.35); }
.logo27.big { width: 96px; height: 96px; box-shadow: 0 0 0 1px rgba(var(--acr),.4), 0 0 50px rgba(var(--acr),.55); }

/* ---------- каркас ---------- */
.app { display: flex; min-height: 100vh; }
.side { width: 232px; flex: none; padding: 18px 12px 20px; display: flex; flex-direction: column; gap: 2px;
        position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.side .brand { display: flex; align-items: center; gap: 10px; padding: 4px 10px 18px; }
.side .brand b { display: block; font-weight: 600; font-size: 14px; }
.side .brand span { font-size: 11px; color: var(--mt); }
.nav { display: flex; align-items: center; gap: 11px; padding: 8px 10px; border-radius: 9px; font-size: 13.5px;
       font-weight: 500; color: var(--mt); transition: background .15s, color .15s; }
.nav:hover { background: var(--hv); color: var(--tx); }
.nav.on { background: var(--acs); color: var(--tx); box-shadow: inset 0 0 0 1px var(--acb); }
.nav.soon { color: var(--dm); cursor: default; }
.nav.soon:hover { background: transparent; color: var(--dm); }
.pill-soon { font-size: 10px; padding: 1px 6px; border-radius: 999px; background: var(--hv); color: var(--mt); }
.side .botbox { display: flex; flex-direction: column; gap: 6px; padding: 12px; border-radius: 12px;
                border: 1px solid var(--bd); background: var(--sf); margin-top: 24px; }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 8px var(--ok); flex: none; }
.dot.wn { background: var(--wn); box-shadow: 0 0 8px var(--wn); }
.dot.er { background: var(--er); box-shadow: 0 0 8px var(--er); }
.dot.pulse { animation: pulse 2s infinite; }
.main { flex: 1 1 auto; min-width: 0; border-left: 1px solid var(--bd); display: flex; flex-direction: column; }
.content { padding: 22px 28px 40px; display: flex; flex-direction: column; gap: 14px; }

.top { position: sticky; top: 0; z-index: 20; min-height: 64px; padding: 10px 28px; display: flex; flex-wrap: wrap;
       align-items: center; gap: 12px 16px; border-bottom: 1px solid var(--bd);
       background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(12px); }
.top h1 { margin: 0; font-size: 18px; font-weight: 600; letter-spacing: -0.01em; flex-grow: 1; min-width: 140px; }
.seg { display: flex; gap: 2px; padding: 3px; border-radius: 10px; border: 1px solid var(--bd); background: var(--sf); }
.seg button { border: 0; padding: 6px 11px; border-radius: 7px; font-size: 12.5px; font-weight: 500; background: transparent;
              color: var(--mt); white-space: nowrap; }
.seg button:hover { color: var(--tx); }
.seg button.on { background: var(--s2); color: var(--tx); box-shadow: inset 0 0 0 1px var(--bd); }
.searchbtn { display: flex; align-items: center; gap: 9px; width: 270px; padding: 8px 11px; border-radius: 10px;
             border: 1px solid var(--bd); background: var(--sf); color: var(--mt); font-size: 12.5px; text-align: left; }
.searchbtn .ph { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.kbd { white-space: nowrap; flex: none; }
.kbd { font-family: var(--mono); font-size: 10.5px; padding: 2px 6px; border-radius: 5px; border: 1px solid var(--bd); color: var(--dm); }
.status-pill { display: flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--bd);
               background: var(--sf); font-size: 12.5px; font-weight: 500; white-space: nowrap; }
.iconbtn { width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--bd); background: var(--sf); color: var(--mt);
           display: flex; align-items: center; justify-content: center; flex: none; }
.iconbtn:hover { color: var(--tx); }
.avatar { width: 36px; height: 36px; border-radius: 50%; border: 0; padding: 0; background: #000; overflow: hidden; flex: none;
          box-shadow: 0 0 0 1px rgba(var(--acr),.45); }
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar:hover { box-shadow: 0 0 0 2px var(--ac), 0 0 16px rgba(var(--acr),.5); }
.pop { position: absolute; top: 46px; right: 0; padding: 6px; border-radius: 12px; border: 1px solid var(--bd);
       background: var(--sf); box-shadow: var(--shadow); z-index: 30; }
.pop a, .pop button.mi { display: block; width: 100%; text-align: left; padding: 8px 10px; border-radius: 8px; font-size: 13px;
                         background: transparent; border: 0; }
.pop a:hover, .pop button.mi:hover { background: var(--hv); }
.rel { position: relative; }

/* поиск Ctrl+K */
.search-pop { width: 460px; max-width: 92vw; padding: 8px; display: flex; flex-direction: column; gap: 2px; }
.search-pop input { width: 100%; padding: 10px 12px; border-radius: 9px; border: 1px solid var(--bd); background: var(--bg);
                    outline: 0; font-size: 13.5px; }
.search-pop .cap { padding: 8px 10px 6px; font-size: 11px; color: var(--dm); text-transform: uppercase; letter-spacing: .06em; }
.sr { display: flex; align-items: center; gap: 11px; padding: 9px 10px; border-radius: 9px; font-size: 13px; }
.sr:hover, .sr.on { background: var(--hv); }
.sr .tag { width: 26px; height: 26px; border-radius: 8px; background: var(--acs); color: var(--ac); display: flex;
           align-items: center; justify-content: center; font-size: 11px; font-weight: 600; flex: none; }
.sr .t { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.sr .t b { font-weight: 500; } .sr .t span { font-size: 11.5px; color: var(--mt); }

/* ---------- элементы ---------- */
.grid-kpi { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; }
.grid-4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: 16px; align-items: start; }
.flexrow { display: flex; flex-wrap: wrap; gap: 14px; align-items: stretch; }
.kpi { padding: 16px 16px 10px; display: flex; flex-direction: column; gap: 6px; position: relative; overflow: hidden; }
.kpi .v { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.kpi .v b { font-family: var(--mono); font-size: 25px; font-weight: 600; letter-spacing: -0.02em; }
.kpi .v span { font-size: 11.5px; color: var(--mt); }
.delta { display: flex; align-items: baseline; gap: 2px 6px; font-size: 12px; flex-wrap: wrap; }
.delta b { font-family: var(--mono); font-weight: 600; white-space: nowrap; }
.delta span { white-space: nowrap; }
.stat { padding: 16px 18px; display: flex; flex-direction: column; gap: 4px; }
.stat b { font-family: var(--mono); font-size: 24px; font-weight: 600; letter-spacing: -0.02em; }
.stat .sub { font-size: 12px; color: var(--dm); }
.cardpad { padding: 18px; display: flex; flex-direction: column; gap: 12px; }
.cardhead { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.cardhead .sub { font-size: 11.5px; color: var(--dm); }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 16px; border-radius: 10px;
       border: 1px solid var(--bd); background: var(--s2); color: var(--tx); font-size: 13px; font-weight: 600; white-space: nowrap; }
.btn:hover { border-color: var(--acb); }
.btn.pri { border: 0; background: linear-gradient(135deg, var(--ac), var(--ac2)); color: #fff; box-shadow: 0 8px 24px rgba(var(--acr),.25); }
.btn.pri:hover { filter: brightness(1.08); }
.btn.ghost { background: transparent; }
.btn.danger { border-color: rgba(248,113,113,.45); background: var(--ert); color: var(--er); }
.btn.danger.solid { border: 0; background: linear-gradient(135deg, #F87171, #E5484D); color: #fff; }
.btn.sm { padding: 7px 12px; font-size: 12.5px; border-radius: 9px; }
.btn:disabled { opacity: .45; filter: none; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { padding: 7px 12px; border-radius: 999px; border: 1px solid var(--bd); background: transparent; color: var(--mt);
        font-size: 12.5px; font-weight: 500; white-space: nowrap; }
.chip:hover { color: var(--tx); }
.chip.on { background: var(--acs); color: var(--ac); border-color: var(--acb); }
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 999px; font-size: 11.5px;
         font-weight: 500; white-space: nowrap; }
.badge::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.badge.plain::before { display: none; }
.b-ok { background: var(--okt); color: var(--ok); } .b-er { background: var(--ert); color: var(--er); }
.b-wn { background: var(--wnt); color: var(--wn); } .b-ac { background: var(--acs); color: var(--ac); }
.b-mt { background: var(--hv); color: var(--mt); }
.input, .select, .textarea { padding: 10px 12px; border-radius: 9px; border: 1px solid var(--bd); background: var(--bg);
                              color: var(--tx); font-size: 13.5px; outline: 0; width: 100%; }
.input:focus, .select:focus, .textarea:focus { border-color: var(--ac); box-shadow: 0 0 0 3px var(--acs); }
.input.big { font-size: 16px; font-family: var(--mono); }
.select { width: auto; padding: 9px 12px; font-size: 13px; }
.textarea { resize: none; min-height: 76px; line-height: 1.45; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field .hint { font-size: 11.5px; color: var(--dm); line-height: 1.4; }
.searchbox { display: flex; align-items: center; gap: 8px; flex: 1 1 240px; padding: 8px 12px; border-radius: 9px;
             border: 1px solid var(--bd); background: var(--bg); }
.searchbox input { flex-grow: 1; min-width: 0; border: 0; outline: 0; background: transparent; font-size: 13px; }
.filters { padding: 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.switch { width: 40px; height: 23px; border-radius: 999px; border: 0; padding: 2px; background: var(--s2); display: flex;
          justify-content: flex-start; transition: background .2s; flex: none; box-shadow: inset 0 0 0 1px var(--bd); }
.switch span { width: 19px; height: 19px; border-radius: 50%; background: #fff; transition: transform .2s; }
.switch.on { background: var(--ac); box-shadow: none; }
.switch.on span { transform: translateX(17px); }
.toggle-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 13.5px; }
.tags { display: flex; flex-wrap: wrap; gap: 8px; }
.tagx { display: inline-flex; align-items: center; gap: 8px; padding: 6px 8px 6px 12px; border-radius: 999px; background: var(--s2);
        border: 1px solid var(--bd); font-size: 12.5px; }
.tagx button { width: 18px; height: 18px; border-radius: 50%; border: 0; background: var(--hv); color: var(--mt); font-size: 12px;
               line-height: 1; padding: 0; }
.tagx button:hover { color: var(--er); }
.bar { height: 6px; border-radius: 4px; background: var(--hv); overflow: hidden; }
.bar > div { height: 100%; border-radius: 4px; transition: width .5s; }
.empty { padding: 52px 24px; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.empty .ic { width: 44px; height: 44px; border-radius: 14px; background: var(--acs); color: var(--ac); display: flex;
             align-items: center; justify-content: center; }
.empty b { font-size: 15px; } .empty p { margin: 0; font-size: 13px; color: var(--mt); max-width: 380px; line-height: 1.5; }
.note { padding: 11px 14px; border-radius: 10px; background: var(--s2); font-size: 13px; color: var(--mt); line-height: 1.5; }
.banner { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-radius: 14px; flex-wrap: wrap; }
.banner.er { border: 1px solid rgba(248,113,113,.4); background: rgba(248,113,113,.08); }
.banner .ic { width: 32px; height: 32px; border-radius: 10px; background: rgba(248,113,113,.16); color: var(--er);
              display: flex; align-items: center; justify-content: center; font-weight: 700; flex: none; }

/* таблицы на сетке */
.tbl { overflow-x: auto; }
.tr { display: grid; gap: 8px; align-items: center; padding: 11px 16px; border-bottom: 1px solid var(--bd); font-size: 13px; }
.tr.th { padding: 11px 16px; font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--dm);
         align-items: end; }
.tr.th span { white-space: nowrap; }
.tr.click { cursor: pointer; }
.tr.sel { background: var(--acs); }
.cell2 { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.cell2 .s { font-family: var(--mono); font-size: 11px; color: var(--dm); }
.tfoot { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; font-size: 12.5px;
         color: var(--mt); flex-wrap: wrap; gap: 8px; }
.pager { display: flex; gap: 4px; align-items: center; font-family: var(--mono); }
.pager button { padding: 4px 9px; border-radius: 6px; border: 0; background: transparent; color: var(--mt); }
.pager button:hover:not(:disabled) { color: var(--tx); background: var(--hv); }
.pager button.on { background: var(--acs); color: var(--ac); }
.pager button:disabled { opacity: .35; }
.av { width: 32px; height: 32px; flex: none; border-radius: 50%; background: var(--acs); color: var(--ac); display: flex;
      align-items: center; justify-content: center; font-size: 12px; font-weight: 700; }
.av.ban { background: var(--ert); color: var(--er); }
.svc-ic { width: 24px; height: 24px; border-radius: 7px; background: var(--acs); color: var(--ac); display: flex; align-items: center;
          justify-content: center; font-size: 11px; font-weight: 700; flex: none; }

/* графики */
.chart { position: relative; }
.tip { position: absolute; top: 6px; transform: translateX(-50%); width: 184px; padding: 10px 12px; border-radius: 10px;
       border: 1px solid var(--bd); background: var(--s2); box-shadow: 0 12px 32px rgba(0,0,0,.4); pointer-events: none;
       font-size: 12px; z-index: 5; }
.tip .r { display: flex; justify-content: space-between; margin-top: 3px; }
.tip .r b { font-family: var(--mono); font-weight: 600; }
.legend { display: flex; gap: 16px; font-size: 12px; color: var(--mt); flex-wrap: wrap; }
.legend span { display: flex; align-items: center; gap: 6px; }
.legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.heat { display: grid; gap: 3px; }
.heat .c { height: 26px; border-radius: 5px; }
.mx button { border: 0; height: 38px; border-radius: 7px; font-size: 12px; font-weight: 600; font-family: var(--mono); }

/* боковая карточка и окна */
.shade { position: fixed; inset: 0; background: rgba(0,0,0,.42); z-index: 40; animation: fadein .15s; }
.shade.dark { background: rgba(0,0,0,.6); z-index: 50; }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: 440px; max-width: 100%; z-index: 41; background: var(--sf);
          border-left: 1px solid var(--bd); box-shadow: -30px 0 80px rgba(0,0,0,.4); padding: 22px 24px;
          display: flex; flex-direction: column; gap: 18px; overflow-y: auto; animation: slidein .22s ease-out; }
@keyframes slidein { from { transform: translateX(30px); opacity: 0 } to { transform: none; opacity: 1 } }
.pairs { display: flex; flex-direction: column; border: 1px solid var(--bd); border-radius: 12px; overflow: hidden; }
.pairs div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 14px; border-top: 1px solid var(--bd); font-size: 13px; }
.pairs div:first-child { border-top: 0; }
.pairs span:first-child { color: var(--mt); flex: none; }
.pairs span:last-child { font-weight: 500; text-align: right; word-break: break-all; }
.steps .st { display: flex; gap: 12px; align-items: flex-start; }
.steps .rail { display: flex; flex-direction: column; align-items: center; align-self: stretch; }
.steps .rail i { width: 10px; height: 10px; border-radius: 50%; margin-top: 4px; }
.steps .rail u { flex-grow: 1; width: 1px; background: var(--bd); margin-top: 3px; }
.steps .st:last-child .rail u { display: none; }
.steps .tx { padding-bottom: 14px; display: flex; flex-direction: column; gap: 2px; }
.modal { position: fixed; z-index: 51; top: 14vh; left: 50%; transform: translateX(-50%); width: 440px; max-width: calc(100% - 32px);
         padding: 24px; border-radius: 18px; border: 1px solid var(--bd); background: var(--sf);
         box-shadow: 0 40px 100px rgba(0,0,0,.6); display: flex; flex-direction: column; gap: 16px; animation: pop .18s ease-out; }
.modal h3 { margin: 0; font-size: 17px; font-weight: 600; }
.modal p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--mt); }
.calc { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-radius: 12px; background: var(--hv); font-size: 13px; }
.calc div { display: flex; justify-content: space-between; gap: 10px; }
.calc span:first-child { color: var(--mt); }
.toast { position: fixed; z-index: 60; right: 28px; bottom: 28px; padding: 12px 16px; border-radius: 12px; border: 1px solid var(--bd);
         background: var(--s2); box-shadow: 0 20px 50px rgba(0,0,0,.5); font-size: 13px; display: flex; align-items: center; gap: 10px;
         animation: fadein .2s; max-width: calc(100% - 32px); }
.toast.er { border-color: rgba(248,113,113,.45); }

/* вход */
.login { position: relative; overflow: hidden; min-height: 100vh; display: flex; align-items: center; justify-content: center;
         padding: 24px; }
.login .glow { position: absolute; width: 760px; height: 760px; border-radius: 50%; top: 50%; left: 50%;
               transform: translate(-50%, -62%); pointer-events: none;
               background: radial-gradient(circle, rgba(var(--acr),.30) 0%, transparent 65%); }
.login .grid { position: absolute; inset: 0; pointer-events: none;
               background-image: linear-gradient(rgba(var(--acr),.06) 1px, transparent 1px), linear-gradient(90deg, rgba(var(--acr),.06) 1px, transparent 1px);
               background-size: 56px 56px; -webkit-mask-image: radial-gradient(ellipse at center, #000 10%, transparent 70%);
               mask-image: radial-gradient(ellipse at center, #000 10%, transparent 70%); }
.login .box { position: relative; width: 100%; max-width: 420px; padding: 36px 32px 28px; border-radius: 20px;
              border: 1px solid var(--bd); background: var(--sf); box-shadow: 0 30px 80px rgba(0,0,0,.6);
              display: flex; flex-direction: column; gap: 18px; text-align: center; align-items: center; }
.login h1 { margin: 0; font-size: 24px; font-weight: 600; letter-spacing: -0.02em; }
.login p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--mt); }
.login .stepsbox { width: 100%; text-align: left; display: flex; flex-direction: column; gap: 10px; padding: 14px 16px;
                   border-radius: 12px; background: var(--bg); border: 1px solid var(--bd); font-size: 13.5px; }
.login .stepsbox div { display: flex; gap: 10px; align-items: flex-start; }
.login .stepsbox b { width: 22px; height: 22px; border-radius: 50%; background: var(--acs); color: var(--ac); flex: none;
                     display: flex; align-items: center; justify-content: center; font-size: 12px; }
.err-box { width: 100%; padding: 10px 12px; border-radius: 10px; background: var(--ert); border: 1px solid rgba(248,113,113,.3);
           color: var(--er); font-size: 13px; text-align: left; }

/* мобильная версия */
.mtop, .mnav, .msheet { display: none; }
@media (max-width: 900px) {
  .side, .top .searchbtn .ph, .top .status-pill { display: none; }
  .main { border-left: 0; }
  .top { padding: 10px 16px; position: static; }
  .top h1 { font-size: 16px; }
  .top .periods { order: 5; width: 100%; overflow-x: auto; }
  .top .searchbtn { width: 36px; padding: 8px; justify-content: center; }
  .top .searchbtn .kbd { display: none; }
  .content { padding: 14px 16px 96px; }
  .grid-2 { grid-template-columns: 1fr; }
  .grid-kpi { grid-template-columns: 1fr 1fr; gap: 10px; }
  .kpi .v b { font-size: 19px; }
  .mtop { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--bd); }
  .mnav { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 35; background: var(--sf);
          border-top: 1px solid var(--bd); padding-bottom: env(safe-area-inset-bottom); }
  .mnav a, .mnav button { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 9px 0 11px;
                          border: 0; background: transparent; font-size: 10.5px; font-weight: 500; color: var(--mt); }
  .mnav .on { color: var(--ac); }
  .msheet.open { display: grid; position: fixed; left: 0; right: 0; bottom: 58px; z-index: 34; background: var(--sf);
                 border-top: 1px solid var(--bd); border-radius: 18px 18px 0 0; padding: 16px; grid-template-columns: 1fr 1fr; gap: 8px; }
  .msheet a { padding: 12px 14px; border-radius: 11px; background: var(--s2); font-size: 13.5px; font-weight: 500; }
  .drawer { width: 100%; }
  .grid-prices { grid-template-columns: 1fr !important; }
  .span2 { grid-column: auto !important; }
  .toast { right: 16px; bottom: 76px; }
  .hide-m { display: none !important; }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* рассылки: предпросмотр как в Telegram */
.tg { border-radius: 16px; overflow: hidden; border: 1px solid var(--bd); background: #0E1621; color: #F5F5F5; }
.tg-head { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: #17212B; }
.tg-head img { width: 34px; height: 34px; border-radius: 50%; }
.tg-head b { display: block; font-size: 14px; font-weight: 600; }
.tg-head span { font-size: 12px; color: #6C7883; }
.tg-chat { padding: 18px 14px 20px; min-height: 220px; display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
           background: radial-gradient(circle at 20% 20%, rgba(255,255,255,.03), transparent 60%), #0E1621; }
.tg-msg { position: relative; max-width: 92%; padding: 8px 12px 20px; border-radius: 12px 12px 12px 4px; background: #182533;
          font-size: 14px; line-height: 1.45; word-wrap: break-word; overflow-wrap: anywhere; min-width: 80px; }
.tg-msg a { color: #6AB3F3; text-decoration: none; }
.tg-msg code, .tg-msg pre { font-family: var(--mono); font-size: 13px; color: #E6E6E6; }
.tg-msg pre { margin: 4px 0; padding: 8px; background: rgba(0,0,0,.25); border-radius: 6px; white-space: pre-wrap; }
.tg-msg blockquote { margin: 4px 0; padding-left: 10px; border-left: 3px solid #6AB3F3; }
.tg-msg .spoiler { background: #4b5563; color: transparent; border-radius: 4px; }
.tg-msg .spoiler:hover { color: inherit; background: rgba(75,85,99,.4); }
.tg-time { position: absolute; right: 10px; bottom: 5px; font-size: 11px; color: #6C7883; }
.tg-btn { max-width: 92%; min-width: 180px; text-align: center; padding: 9px 12px; border-radius: 8px; background: rgba(24,37,51,.85);
          font-size: 13.5px; font-weight: 500; }

/* колокольчик и всплывающие уведомления */
.nbadge { position: absolute; top: -5px; right: -5px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
          background: var(--ac); color: #fff; font-size: 10.5px; font-weight: 700; line-height: 18px; text-align: center;
          box-shadow: 0 0 0 2px var(--bg), 0 0 12px rgba(var(--acr),.6); font-family: var(--mono); }
.npop { width: 380px; max-width: calc(100vw - 24px); padding: 6px; }
.nlist { max-height: 46vh; overflow-y: auto; display: flex; flex-direction: column; }
.nrow { display: flex; align-items: center; gap: 11px; padding: 9px 10px; border-radius: 9px; }
a.nrow:hover { background: var(--hv); }
.nic { width: 28px; height: 28px; border-radius: 9px; display: flex; align-items: center; justify-content: center; font-size: 13px;
       font-weight: 600; flex: none; }
.nset { border-top: 1px solid var(--bd); margin-top: 6px; padding: 10px 8px 6px; }
#nstack { position: fixed; right: 20px; bottom: 20px; z-index: 70; display: flex; flex-direction: column; gap: 8px; width: 360px;
          max-width: calc(100vw - 32px); pointer-events: none; }
.ntoast { position: relative; pointer-events: auto; border-radius: 14px; border: 1px solid var(--acb); background: var(--sf);
          box-shadow: 0 20px 50px rgba(0,0,0,.45), 0 0 24px rgba(var(--acr),.18); padding: 4px 30px 4px 4px;
          animation: nin .28s cubic-bezier(.2,.9,.3,1.2); transition: opacity .5s, transform .5s; }
.ntoast.out { opacity: 0; transform: translateX(30px); }
.nclose { position: absolute; top: 8px; right: 8px; width: 22px; height: 22px; border-radius: 50%; border: 0; background: var(--hv);
          color: var(--mt); font-size: 13px; line-height: 1; padding: 0; }
@keyframes nin { from { opacity: 0; transform: translateX(40px) scale(.96) } to { opacity: 1; transform: none } }
@media (max-width: 900px) { #nstack { right: 16px; left: 16px; width: auto; bottom: 76px; } }