/* ============================================================
   ЯМАЛ ТЕЛЕКОМ (ЯТК) — Личный кабинет
   Палитра и шрифт — с фирменного сайта ytc.casoft.ru
   ============================================================ */

@font-face{ font-family:'Geist'; font-weight:400; font-style:normal; font-display:swap; src:url('geist/geist-400.ttf') format('truetype'); }
@font-face{ font-family:'Geist'; font-weight:500; font-style:normal; font-display:swap; src:url('geist/geist-500.ttf') format('truetype'); }
@font-face{ font-family:'Geist'; font-weight:600; font-style:normal; font-display:swap; src:url('geist/geist-600.ttf') format('truetype'); }
@font-face{ font-family:'Geist'; font-weight:700; font-style:normal; font-display:swap; src:url('geist/geist-700.ttf') format('truetype'); }

:root{
  /* --- бренд ЯТК (ytc.casoft.ru) --- */
  --brand:      #1e2c7a;   /* навигационно-синий — основной */
  --brand-600:  #182466;
  --brand-700:  #121c4e;
  --azure:      #182466;   /* тёмный край синего градиента */
  --azure-700:  #121c4e;
  --sky:        #3a48a0;   /* светлее бренда — центр градиента */
  --sky-300:    #8f97cf;
  --sky-100:    #d5d9ef;
  --ice:        #ebedf6;   /* поверхности бренд-оттенка */
  --ice-50:     #f4f5fa;
  --white:      #FFFFFF;

  /* --- акцент ЯТК (красный CTA) --- */
  --accent:     #d9252e;
  --accent-600: #b71d25;
  --accent-bg:  #fbe6e7;

  /* --- тёмная секция (hero/футер-акценты) --- */
  --navy:       #0e1638;

  /* --- текст --- */
  --ink:    #0f172a;
  --ink-70: #334155;
  --muted:  #64748b;
  --line:   #e2e8f0;
  --line-2: #eef1f6;

  /* --- функциональные --- */
  --mint:   #10b981;   --mint-bg:#e7f7f1;
  --amber:  #E08600;   --amber-bg:#FCEFD7;
  --rose:   #d9252e;   --rose-bg:#fbe6e7;

  /* --- атмосфера (навигационно-синий + красный отлив) --- */
  --glacier: radial-gradient(120% 120% at 15% 0%, #2f3d94 0%, #1e2c7a 45%, #121c4e 100%);
  --aurora:  conic-gradient(from 200deg at 80% 10%, rgba(58,72,160,.0), rgba(58,72,160,.28), rgba(58,72,160,.0) 60%);

  --shadow-sm: 0 1px 2px rgba(15,23,42,.06), 0 2px 6px rgba(15,23,42,.05);
  --shadow:    0 6px 22px -8px rgba(18,28,78,.28), 0 2px 8px rgba(15,23,42,.05);
  --shadow-lg: 0 28px 60px -24px rgba(18,28,78,.45), 0 8px 24px -12px rgba(15,23,42,.18);

  --r-sm: 10px;  --r: 16px;  --r-lg: 22px;  --r-xl: 30px;

  --nav-w: 264px;
  --head-h: 70px;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  font-family:'Geist', system-ui, sans-serif;
  color:var(--ink);
  background:var(--ice-50);
  -webkit-font-smoothing:antialiased;
  line-height:1.5;
}
a{ color:var(--brand); text-decoration:none; }
h1,h2,h3,h4{ font-family:'Geist', sans-serif; font-weight:600; letter-spacing:-.01em; margin:0; color:var(--ink); }
.num{ font-family:'Geist', sans-serif; font-variant-numeric:tabular-nums; letter-spacing:-.02em; }
.mono-num{ font-variant-numeric:tabular-nums; }

/* фоновое снежно-полярное сияние для рабочей зоны */
.bg-arctic{
  position:fixed; inset:0; z-index:-1; overflow:hidden;
  background:
    radial-gradient(60% 50% at 100% 0%, rgba(143,182,225,.20), transparent 60%),
    radial-gradient(50% 40% at 0% 100%, rgba(31,168,155,.10), transparent 55%),
    var(--ice-50);
}
.bg-arctic::after{ /* лёгкое снежное зерно */
  content:''; position:absolute; inset:0; opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.025'/%3E%3C/svg%3E");
}

/* ============================== ВХОД ============================== */
.login-page{
  min-height:100vh; display:grid; place-items:center; position:relative; overflow:hidden;
  background:var(--glacier);
}
.login-page::before{ content:''; position:absolute; inset:-20%; background:var(--aurora); filter:blur(20px); animation:auroraDrift 18s ease-in-out infinite alternate; }
.login-page::after{ /* снежинки-точки */
  content:''; position:absolute; inset:0; opacity:.5;
  background-image:
    radial-gradient(2px 2px at 20% 30%, rgba(255,255,255,.8), transparent),
    radial-gradient(2px 2px at 70% 20%, rgba(255,255,255,.6), transparent),
    radial-gradient(1.5px 1.5px at 40% 70%, rgba(255,255,255,.7), transparent),
    radial-gradient(1.5px 1.5px at 85% 65%, rgba(255,255,255,.5), transparent),
    radial-gradient(2px 2px at 60% 90%, rgba(255,255,255,.6), transparent);
}
@keyframes auroraDrift{ from{ transform:translateY(-4%) rotate(-2deg);} to{ transform:translateY(4%) rotate(3deg);} }

.auth-card{
  position:relative; z-index:2; width:min(420px, 92vw);
  background:rgba(255,255,255,.92); backdrop-filter:blur(18px) saturate(1.2);
  border:1px solid rgba(255,255,255,.7);
  border-radius:var(--r-xl); padding:42px 38px 34px;
  box-shadow:var(--shadow-lg);
  animation:cardRise .8s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes cardRise{ from{opacity:0; transform:translateY(22px) scale(.98);} to{opacity:1; transform:none;} }
.auth-logo{ display:flex; flex-direction:column; align-items:center; gap:14px; margin-bottom:26px; }
.auth-logo img{ height:54px; width:auto; max-width:86%; }
.auth-logo .brand{ font-family:'Geist'; font-weight:700; font-size:19px; letter-spacing:.02em; color:var(--azure); }
.auth-logo .sub{ font-size:12.5px; color:var(--muted); margin-top:-8px; letter-spacing:.14em; text-transform:uppercase; }

.field{ margin-bottom:16px; }
.field label{ display:block; font-size:12.5px; font-weight:600; color:var(--ink-70); margin:0 0 7px 4px; }
.input{
  width:100%; height:50px; padding:0 16px; font-size:15px; font-family:inherit; color:var(--ink);
  background:var(--ice-50); border:1.5px solid var(--line); border-radius:var(--r-sm);
  transition:border-color .15s, box-shadow .15s, background .15s;
}
.input::placeholder{ color:#9DAAC2; }
.input:focus{ outline:none; border-color:var(--sky); background:#fff; box-shadow:0 0 0 4px rgba(73,133,197,.16); }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  height:50px; padding:0 22px; border:none; border-radius:var(--r-sm); cursor:pointer;
  font-family:'Geist'; font-weight:700; font-size:15px; letter-spacing:.01em;
  transition:transform .12s, box-shadow .2s, filter .2s;
}
.btn-primary{ width:100%; color:#fff; background:var(--accent); box-shadow:0 12px 26px -10px rgba(217,37,46,.45); }
.btn-primary:hover{ transform:translateY(-1px); background:var(--accent-600); box-shadow:0 16px 30px -10px rgba(217,37,46,.55); }
.btn-primary:active{ transform:translateY(0); }
.btn-ghost{ background:#fff; color:var(--brand); border:1.5px solid var(--line); box-shadow:var(--shadow-sm); }
.btn-ghost:hover{ border-color:var(--sky); background:var(--ice-50); }
.btn-sm{ height:40px; padding:0 16px; font-size:13.5px; }

.auth-row{ display:flex; justify-content:flex-end; margin:-4px 4px 18px; }
.auth-row a{ font-size:13px; color:var(--sky); font-weight:600; }
.auth-foot{ text-align:center; margin-top:22px; font-size:12px; color:var(--muted); }
.lang-pill{ position:absolute; top:22px; right:22px; z-index:3; display:flex; align-items:center; gap:8px; height:38px; padding:0 14px; background:rgba(255,255,255,.75); border:1px solid var(--line); border-radius:999px; color:var(--ink-70); font-size:13px; font-weight:600; backdrop-filter:blur(8px); box-shadow:var(--shadow-sm); }

/* ============================== КАРКАС ============================== */
.app{ display:grid; grid-template-columns:var(--nav-w) 1fr; min-height:100vh; }

/* шапка */
.topbar{
  grid-column:1 / -1; height:var(--head-h);
  display:flex; align-items:center; gap:18px; padding:0 24px;
  background:rgba(255,255,255,.95); backdrop-filter:blur(10px);
  color:var(--ink); position:sticky; top:0; z-index:40;
  border-bottom:1px solid var(--line); box-shadow:var(--shadow-sm);
}
.topbar .brand-mark{ display:flex; align-items:center; gap:12px; }
.topbar .brand-mark img{ height:34px; width:auto; }
.topbar .brand-mark b{ font-family:'Geist'; font-weight:700; font-size:17px; letter-spacing:.02em; }
.topbar .spacer{ flex:1; }
.icon-btn{
  width:42px; height:42px; display:grid; place-items:center; border-radius:12px; cursor:pointer; position:relative;
  background:var(--ice); color:var(--ink-70); transition:background .15s;
}
.icon-btn:hover{ background:var(--sky-100); }
.icon-btn .dot{ position:absolute; top:9px; right:10px; width:8px; height:8px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 2px #fff; }
.top-pill{ display:flex; align-items:center; gap:8px; height:42px; padding:0 14px; border-radius:12px; background:var(--ice); color:var(--ink-70); font-size:13.5px; font-weight:600; cursor:pointer; transition:background .15s; }
.top-pill:hover{ background:var(--sky-100); }
.top-logout{ height:42px; padding:0 18px; border-radius:12px; background:var(--brand); color:#fff; font-weight:700; font-size:13.5px; display:inline-flex; align-items:center; gap:8px; cursor:pointer; }

/* боковое меню */
.sidebar{
  background:rgba(255,255,255,.82); backdrop-filter:blur(8px);
  border-right:1px solid var(--line); padding:18px 14px 30px;
  position:sticky; top:var(--head-h); align-self:start; height:calc(100vh - var(--head-h)); overflow-y:auto;
}
.nav-label{ font-size:11px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:#A7B4CC; margin:18px 12px 8px; }
.nav-item{
  display:flex; align-items:center; gap:12px; height:44px; padding:0 14px; margin:3px 0; border-radius:12px;
  color:var(--ink-70); font-size:14.5px; font-weight:600; cursor:pointer;
  transition:background .14s, color .14s;
}
.nav-item .ico{ width:20px; height:20px; flex:none; opacity:.85; }
.nav-item:hover{ background:var(--ice); color:var(--brand); }
.nav-item.active{ background:linear-gradient(100deg, var(--brand), var(--sky)); color:#fff; box-shadow:0 10px 22px -12px rgba(33,64,124,.8); }
.nav-item.active .ico{ opacity:1; }
.nav-badge{ margin-left:auto; background:var(--amber); color:#fff; font-size:11px; font-weight:700; padding:1px 8px; border-radius:999px; }

/* контент */
.main{ padding:30px 34px 50px; min-width:0; }
.page-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:24px; flex-wrap:wrap; }
.page-head h1{ font-size:27px; }
.crumbs{ font-size:13px; color:var(--muted); margin-bottom:6px; }
.crumbs b{ color:var(--ink-70); font-weight:700; }

/* ============================== КОМПОНЕНТЫ ============================== */
.card{ background:#fff; border:1px solid var(--line-2); border-radius:var(--r-lg); box-shadow:var(--shadow); }
.grid{ display:grid; gap:20px; }
.g-2{ grid-template-columns:repeat(2,1fr); }
.g-3{ grid-template-columns:repeat(3,1fr); }
.g-2-1{ grid-template-columns:2fr 1fr; }

/* герой-баланс */
.hero{
  position:relative; overflow:hidden; color:#fff; border-radius:var(--r-xl); padding:28px 30px;
  background:var(--glacier); box-shadow:var(--shadow-lg);
}
.hero::before{ content:''; position:absolute; inset:0; background:var(--aurora); opacity:.7; mix-blend-mode:screen; }
.hero .globe{ position:absolute; right:-30px; bottom:-50px; width:230px; opacity:.16; }
.hero .lbl{ font-size:13px; letter-spacing:.12em; text-transform:uppercase; opacity:.85; position:relative; }
.hero .bal{ font-size:46px; line-height:1.05; margin:8px 0 4px; position:relative; }
.hero .bal small{ font-size:22px; opacity:.8; margin-left:6px; }
.hero .meta{ position:relative; display:flex; gap:26px; margin-top:18px; flex-wrap:wrap; }
.hero .meta .k{ font-size:12px; opacity:.8; }
.hero .meta .v{ font-weight:700; font-size:15px; }
.hero .acts{ position:relative; display:flex; gap:12px; margin-top:22px; }
.hero .btn-white{ background:#fff; color:var(--brand); box-shadow:0 12px 26px -12px rgba(0,0,0,.4); }
.hero .btn-line{ background:rgba(255,255,255,.14); color:#fff; border:1.5px solid rgba(255,255,255,.5); }
.hero #agrmFilter{ position:relative; margin-top:12px; max-width:360px; width:100%; padding:9px 38px 9px 14px; font-size:14px; font-weight:600; color:#fff; background:rgba(255,255,255,.16); border:1.5px solid rgba(255,255,255,.45); border-radius:12px; cursor:pointer; -webkit-appearance:none; appearance:none; background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>"); background-repeat:no-repeat; background-position:right 13px center; transition:background .15s, border-color .15s; }
.hero #agrmFilter:hover{ background-color:rgba(255,255,255,.24); border-color:rgba(255,255,255,.7); }
.hero #agrmFilter:focus{ outline:none; border-color:#fff; }
.hero #agrmFilter option{ color:#0f2a4a; background:#fff; }

/* карточка лицевого счёта */
.acct{ padding:22px 22px 20px; display:flex; flex-direction:column; gap:14px; transition:transform .15s, box-shadow .2s; }
.acct:hover{ transform:translateY(-3px); box-shadow:var(--shadow-lg); }
.acct .top{ display:flex; justify-content:space-between; align-items:flex-start; }
.acct .ls{ font-size:13px; color:var(--muted); }
.acct .ls b{ display:block; color:var(--ink); font-size:16px; font-weight:700; font-family:'Geist'; margin-top:2px; }
.acct .bal{ font-size:30px; }
.acct .bal.pos{ color:var(--mint); } .acct .bal.neg{ color:var(--rose); }
.acct .row{ display:flex; justify-content:space-between; font-size:13.5px; padding:8px 0; border-top:1px dashed var(--line); }
.acct .row .k{ color:var(--muted); }
.acct .row .v{ font-weight:700; }
.speed{ display:inline-flex; align-items:center; gap:7px; }
.speed .bar{ width:54px; height:6px; border-radius:3px; background:var(--ice); overflow:hidden; }
.speed .bar i{ display:block; height:100%; background:linear-gradient(90deg,var(--sky),var(--brand)); }

/* статус-пилюли */
.pill{ display:inline-flex; align-items:center; gap:6px; height:26px; padding:0 11px; border-radius:999px; font-size:12.5px; font-weight:700; }
.pill::before{ content:''; width:7px; height:7px; border-radius:50%; background:currentColor; }
.pill-ok{ color:var(--mint); background:var(--mint-bg); }
.pill-warn{ color:var(--amber); background:var(--amber-bg); }
.pill-bad{ color:var(--rose); background:var(--rose-bg); }

/* таблицы */
.tbl{ width:100%; border-collapse:collapse; font-size:14px; }
.tbl thead th{ text-align:left; font-size:12px; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); font-weight:700; padding:0 16px 12px; border-bottom:2px solid var(--line); }
.tbl tbody td{ padding:15px 16px; border-bottom:1px solid var(--line-2); }
.tbl tbody tr{ transition:background .12s; }
.tbl tbody tr:hover{ background:var(--ice-50); }
.tbl .r{ text-align:right; }
.card-pad{ padding:24px 26px; }
.sec-title{ font-size:15px; font-weight:800; color:var(--ink); margin:0 0 4px; font-family:'Geist'; }
.sec-sub{ font-size:13px; color:var(--muted); margin:0 0 18px; }

/* способы оплаты */
.pay-methods{ display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:12px; }
.pay-m{ border:1.5px solid var(--line); border-radius:var(--r); padding:16px 12px; text-align:center; cursor:pointer; font-weight:600; font-size:13px; color:var(--ink-70); background:#fff; transition:all .15s; }
.pay-m:hover{ border-color:var(--sky); background:var(--ice-50); }
.pay-m.sel{ border-color:var(--brand); background:var(--ice); box-shadow:0 0 0 3px rgba(50,91,166,.12); color:var(--brand); }
.pay-m .em{ font-size:24px; display:block; margin-bottom:7px; }
.amount-box{ display:flex; align-items:center; gap:14px; background:var(--ice-50); border:1.5px solid var(--line); border-radius:var(--r); padding:6px 8px 6px 20px; }
.amount-box input{ flex:1; border:none; background:transparent; font-family:'Geist'; font-size:32px; font-variant-numeric:tabular-nums; color:var(--ink); outline:none; width:100%; }
.amount-box .cur{ font-family:'Geist'; font-size:24px; color:var(--muted); padding-right:8px; }
.chips{ display:flex; gap:10px; flex-wrap:wrap; margin-top:14px; }
.chip{ padding:8px 16px; border-radius:999px; border:1.5px solid var(--line); background:#fff; font-weight:700; font-size:13.5px; color:var(--brand); cursor:pointer; transition:all .14s; }
.chip:hover{ border-color:var(--sky); background:var(--ice-50); }

/* мини-график статистики */
.spark{ display:flex; align-items:flex-end; gap:7px; height:120px; padding-top:10px; }
.spark .bar{ flex:1; border-radius:6px 6px 3px 3px; background:linear-gradient(180deg,var(--sky),var(--brand)); opacity:.85; transition:opacity .15s; }
.spark .bar:hover{ opacity:1; }

.stat-mini{ display:flex; flex-direction:column; gap:4px; padding:18px 20px; }
.stat-mini .k{ font-size:12.5px; color:var(--muted); letter-spacing:.02em; }
.stat-mini .v{ font-size:24px; }
.stat-mini .v.sky{ color:var(--brand); }

.footer{ grid-column:1/-1; text-align:center; padding:22px; color:var(--muted); font-size:12.5px; border-top:1px solid var(--line); background:rgba(255,255,255,.6); }

/* утилиты */
.mt-s{margin-top:10px;} .mt{margin-top:20px;} .mb{margin-bottom:20px;}
.muted{ color:var(--muted); } .right{ text-align:right; }
@media(max-width:980px){
  .app{ grid-template-columns:1fr; } .sidebar{ display:none; }
  .g-3,.g-2,.g-2-1{ grid-template-columns:1fr; }
}

/* ============================ SPA-СПЕЦИФИКА ============================ */
.hidden{ display:none !important; }
.spinner{ width:22px; height:22px; border:3px solid rgba(255,255,255,.4); border-top-color:#fff; border-radius:50%; animation:spin .7s linear infinite; }
.spinner.dark{ border-color:var(--sky-100); border-top-color:var(--brand); }
@keyframes spin{ to{ transform:rotate(360deg); } }
.center-load{ min-height:60vh; display:grid; place-items:center; }
.skel{ background:linear-gradient(90deg,var(--ice) 25%,var(--ice-50) 37%,var(--ice) 63%); background-size:400% 100%; animation:skel 1.4s ease infinite; border-radius:10px; }
@keyframes skel{ 0%{background-position:100% 0} 100%{background-position:-100% 0} }

/* тосты */
#toasts{ position:fixed; top:18px; right:18px; z-index:9999; display:flex; flex-direction:column; gap:10px; }
.toast{ background:#fff; border-left:4px solid var(--brand); box-shadow:var(--shadow-lg); border-radius:12px; padding:14px 18px; font-size:14px; font-weight:600; color:var(--ink); min-width:240px; max-width:360px; animation:cardRise .3s ease both; }
.toast.ok{ border-left-color:var(--mint); } .toast.err{ border-left-color:var(--rose); }

/* кликабельные nav/acct */
.nav-item{ text-decoration:none; }
.acct{ cursor:default; }
.hero .globe{ pointer-events:none; }

/* scrim НЕ должен быть grid-элементом (иначе ломает колонки .app) */
.scrim{ display:none; }
/* бургер в шапке (моб.) */
.burger{ display:none; width:42px; height:42px; place-items:center; border-radius:12px; background:var(--ice); color:var(--ink); cursor:pointer; }
.burger svg{ width:22px; height:22px; }
@media(max-width:980px){
  .burger{ display:grid; }
  .app{ grid-template-columns:1fr; }
  .sidebar{ position:fixed; top:var(--head-h); left:0; bottom:0; z-index:60; width:78vw; max-width:300px;
    transform:translateX(-105%); transition:transform .28s cubic-bezier(.2,.7,.2,1); display:block; }
  body.nav-open .sidebar{ transform:translateX(0); box-shadow:var(--shadow-lg); }
  body.nav-open .scrim{ display:block; position:fixed; inset:var(--head-h) 0 0 0; background:rgba(20,35,62,.45); z-index:55; }
  .topbar .brand-mark b{ font-size:15px; }
}

/* пустые состояния */
.empty{ text-align:center; padding:50px 20px; color:var(--muted); }
.empty svg{ width:54px; height:54px; opacity:.4; margin-bottom:12px; }

/* форма-строки настроек */
.frow{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 0; border-bottom:1px solid var(--line-2); }
.frow:last-child{ border-bottom:none; }
.switch{ position:relative; width:48px; height:28px; flex:none; }
.switch input{ display:none; }
.switch i{ position:absolute; inset:0; background:var(--line); border-radius:999px; transition:.2s; }
.switch i::after{ content:''; position:absolute; top:3px; left:3px; width:22px; height:22px; background:#fff; border-radius:50%; transition:.2s; box-shadow:0 1px 3px rgba(0,0,0,.2); }
.switch input:checked + i{ background:var(--brand); } .switch input:checked + i::after{ transform:translateX(20px); }
.status-pay{ text-transform:capitalize; }

/* ============================ МОБИЛЬНАЯ ОПТИМИЗАЦИЯ (финальный слой) ============================ */
@media (max-width: 980px){
  :root{ --head-h:60px; }
  .app{ grid-template-columns:1fr !important; }
  .sidebar{ display:block !important; }     /* off-canvas (см. выше), не прячем совсем */
  .main{ padding:18px 14px 80px !important; }
  .page-head{ margin-bottom:16px; }
  .page-head h1{ font-size:21px; }
  .topbar{ height:60px; padding:0 12px; gap:10px; }
  .topbar .brand-mark img{ height:28px; width:auto; }
  .topbar .brand-mark b{ font-size:14px; }
  .top-pill{ display:none; }                 /* язык прячем на телефоне */
  .icon-btn{ width:38px; height:38px; }
  .top-logout{ height:38px; padding:0 12px; }
  .g-2,.g-3,.g-2-1{ grid-template-columns:1fr !important; }
  /* герой компактнее */
  .hero{ padding:22px 20px; border-radius:24px; }
  .hero .bal{ font-size:36px; }
  .hero .meta{ gap:16px; }
  .hero .acts{ flex-wrap:wrap; }
  .hero .acts .btn{ flex:1; min-width:140px; }
  /* карточки */
  .card-pad{ padding:18px 16px; }
  .acct{ padding:18px 16px; }
  /* таблицы → горизонтальный скролл, без слома */
  .card-pad{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .tbl{ min-width:520px; }
  /* оплата */
  .amount-box input{ font-size:26px; }
  .pay-methods{ grid-template-columns:1fr 1fr; }
  .chips{ gap:8px; }
  /* поля 16px — iOS не зумит */
  .input,.form-control{ font-size:16px !important; }
  .btn{ min-height:48px; }
  /* тосты на всю ширину сверху */
  #toasts{ left:12px; right:12px; top:12px; }
  .toast{ max-width:none; }
}
@media (max-width: 420px){
  .topbar .brand-mark b{ display:none; }     /* совсем узко — только лого */
  .hero .bal{ font-size:30px; }
  .pay-methods{ grid-template-columns:1fr; }
  .page-head{ flex-direction:column; align-items:stretch; }
  .page-head .btn{ width:100% !important; }
}

/* ============================ ТЕХПОДДЕРЖКА ============================ */
.tk{ padding:18px 20px; cursor:pointer; transition:transform .15s, box-shadow .2s; }
.tk:hover{ transform:translateY(-2px); box-shadow:var(--shadow-lg); }
.tk-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }
.tk-name{ font-weight:700; font-size:15.5px; color:var(--ink); }
.tk-meta{ font-size:12.5px; color:var(--muted); margin-top:3px; }
.tk-last{ font-size:13.5px; color:var(--ink-70); margin-top:10px; background:var(--ice-50); border-radius:10px; padding:9px 12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tk-open{ display:flex; align-items:center; gap:6px; justify-content:flex-end; color:var(--brand); font-weight:700; font-size:13px; margin-top:12px; }

/* чат */
.chat-wrap{ display:flex; flex-direction:column; max-height:72vh; overflow:hidden; }
.chat-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px; padding:20px 24px; border-bottom:1px solid var(--line-2); }
.chat-body{ flex:1; overflow-y:auto; padding:22px 24px; display:flex; flex-direction:column; gap:14px; background:var(--ice-50); min-height:240px; }
.bubble{ max-width:78%; padding:11px 15px; border-radius:16px; font-size:14px; box-shadow:var(--shadow-sm); }
.bubble.me{ align-self:flex-end; background:linear-gradient(135deg,var(--sky),var(--brand)); color:#fff; border-bottom-right-radius:5px; }
.bubble.staff{ align-self:flex-start; background:#fff; color:var(--ink); border:1px solid var(--line); border-bottom-left-radius:5px; }
.bb-meta{ font-size:11px; opacity:.75; margin-bottom:4px; font-weight:600; }
.bb-text{ white-space:pre-wrap; word-break:break-word; line-height:1.45; }
.chat-input{ display:flex; gap:10px; padding:16px 18px; border-top:1px solid var(--line-2); background:#fff; }
.chat-input .input{ flex:1; height:46px; }

/* модалка */
#modal{ position:fixed; inset:0; z-index:9000; background:rgba(20,35,62,.5); backdrop-filter:blur(3px); display:grid; place-items:center; padding:18px; animation:fadeIn .2s ease; }
@keyframes fadeIn{ from{opacity:0} to{opacity:1} }
.modal-card{ width:min(440px,96vw); max-height:92vh; overflow:auto; background:#fff; border-radius:var(--r-lg); box-shadow:var(--shadow-lg); padding:26px 26px 24px; animation:cardRise .3s cubic-bezier(.2,.7,.2,1) both; }
.modal-card select.input{ height:50px; }
@media(max-width:560px){ .modal-card{ padding:20px 18px; } .bubble{ max-width:88%; } .chat-wrap{ max-height:80vh; } }