:root {
    /* Primary */
    --sky:   #0284c7;
    --sky-h: #0369a1;
    --sky-l: #e0f2fe;
    --sky-ll:#f0f9ff;

    /* Semantic */
    --em:    #059669;
    --am:    #d97706;
    --rose:  #e11d48;
    --vio:   #7c3aed;
    --ind:   #4338ca;
    --teal:  #0891b2;

    /* Surfaces */
    --page:  #eef2f7;
    --card:  #ffffff;
    --border:#dee4ed;
    --bord2: #f0f4f8;

    /* Text */
    --txt:   #0f172a;
    --txt2:  #4b5978;
    --txt3:  #8b9ab3;

    /* Navbar */
    --nb:    #0f1623;
    --nb-h:  rgba(255,255,255,.07);
    --nb-t:  #94a3b8;
    --nb-tw: #f1f5f9;
    --nb-h-px: 52px;

    /* Radius */
    --r1: 12px;
    --r2: 8px;
    --r3: 5px;
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-full: 9999px;

    /* Shadows */
    --s1: 0 1px 3px rgba(15,22,36,.08);
    --s2: 0 4px 14px rgba(15,22,36,.1);
    --s3: 0 12px 40px rgba(15,22,36,.15);
    --shadow-sm: 0 1px 3px rgba(15,22,36,.08);
    --shadow-md: 0 4px 14px rgba(15,22,36,.1);
    --shadow-lg: 0 12px 40px rgba(15,22,36,.15);

    /* Transition */
    --t: .14s ease;

    /* Status */
    --status-success: #059669;
    --status-success-light: #d1fae5;
    --status-warning: #d97706;
    --status-warning-light: #fef3c7;
    --status-error: #e11d48;
    --status-error-light: #fee2e2;
    --status-info: var(--sky);
    --status-info-light: #e0f2fe;

    /* Typography */
    --font-primary: 'Inter', 'Segoe UI', -apple-system, system-ui, sans-serif;
    --font-heading: 'Inter', 'Segoe UI', -apple-system, system-ui, sans-serif;
    --font-mono: 'Source Code Pro', 'Courier New', monospace;

    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;

    /* Spacing */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;

    /* Z-index */
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;

    /* Backward compat aliases */
    --primary-teal: var(--sky);
    --primary-teal-dark: var(--sky-h);
    --primary-teal-light: var(--sky-l);
    --primary-teal-lightest: var(--sky-ll);
    --accent-blue: var(--sky);
    --accent-blue-dark: var(--sky-h);
    --accent-blue-light: var(--sky-l);
    --accent-purple: var(--vio);
    --accent-purple-dark: var(--vio);
    --accent-orange: var(--am);
    --accent-gold: var(--am);
    --neutral-dark: var(--txt);
    --neutral-dark-medium: var(--txt);
    --neutral-dark-lighter: #334155;
    --neutral-gray: var(--txt2);
    --neutral-gray-medium: var(--txt3);
    --neutral-gray-light: var(--border);
    --neutral-gray-lighter: var(--border);
    --neutral-gray-lightest: var(--page);
    --neutral-white: var(--card);
    --neutral-offwhite: var(--page);

    /* Form fields */
    --field-height: 44px;
    --padding-x: 14px;
    --border-color: var(--border);
    --border-width: 1px;
    --border-radius: 8px;
    --font-size: 14px;
    --text-dark: var(--txt);
    --primary-color: var(--sky);
    --danger-color: var(--rose);
}

/* ==================== BASE RESET & LAYOUT ==================== */

*, *::before, *::after { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Inter', -apple-system, system-ui, sans-serif;
    background: var(--page);
    color: var(--txt);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.admin-dashboard {
    display: flex;
    min-height: 100vh;
    background: var(--page);
}

.dashboard-sidebar {
    width: 250px;
    min-width: 250px;
    background: var(--txt);
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.1) transparent;
    z-index: 10;
}

.dashboard-main {
    flex: 1;
    min-width: 0;
    overflow-x: hidden;
}

.dashboard-container {
    padding: 28px 32px;
    width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
}

.dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 28px;
    background: linear-gradient(135deg, var(--sky), var(--sky-h));
    border-radius: var(--r1);
    margin-bottom: 24px;
    position: relative;
    overflow: hidden;
    width: 100%;
    box-sizing: border-box;
    flex-shrink: 0;
}

.dashboard-header .header-left {
    flex: 1;
    max-width: 70%;
    min-width: 0;
}

.dashboard-header .header-right {
    flex-shrink: 0;
    margin-left: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* Unified header-right elements */
.dashboard-header .header-right .btn {
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    text-decoration: none;
    border: 2px solid rgba(255,255,255,.35);
    transition: all .2s;
    cursor: pointer;
    line-height: 1.3;
}
.dashboard-header .header-right .btn-primary {
    background: #fff;
    color: var(--sky-h);
}
.dashboard-header .header-right .btn-primary:hover {
    background: rgba(255,255,255,.9);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0,0,0,.15);
}
.dashboard-header .header-right .btn-secondary {
    background: rgba(255,255,255,.18);
    color: #fff;
}
.dashboard-header .header-right .btn-secondary:hover {
    background: rgba(255,255,255,.3);
}

/* Selects inside header */
.dashboard-header .header-right select,
.dashboard-header .header-right .dh-select select {
    padding: 8px 32px 8px 12px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    border: 2px solid rgba(255,255,255,.35);
    background: rgba(255,255,255,.18);
    color: #fff;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M1.5 5.5l6.5 6.5 6.5-6.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 10px;
    min-width: 80px;
}
.dashboard-header .header-right select:hover {
    background-color: rgba(255,255,255,.3);
}
.dashboard-header .header-right select option {
    background: #fff;
    color: var(--txt);
}
.dashboard-header .header-right .per-page-selector {
    display: flex;
    align-items: center;
    gap: 8px;
}
.dashboard-header .header-right .per-page-selector label {
    font-size: 13px;
    font-weight: 600;
    color: rgba(255,255,255,.85);
    white-space: nowrap;
}

.dashboard-content {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    width: 100%;
    box-sizing: border-box;
}

.main-content {
    flex: 1;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* ==================== MISSING COMPONENT STYLES ==================== */

.stats-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.stats-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }

.alert-box { background: var(--status-warning-light); border: 1px solid var(--am); border-radius: var(--r1); padding: 16px 20px; margin-bottom: 20px; }
.alert-box-content { display: flex; align-items: flex-start; gap: 12px; }
.alert-title { font-weight: 700; color: var(--txt); margin-bottom: 4px; }
.alert-text { font-size: 14px; color: var(--txt2); }

.badge-status { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 20px; font-size: 12px; font-weight: 600; }
.badge-confirmed { background: var(--status-success-light); color: var(--em); }

.btn-doc-delete { background: none; border: none; color: var(--rose); cursor: pointer; padding: 6px; border-radius: var(--r3); transition: background var(--t); }
.btn-doc-delete:hover { background: var(--status-error-light); }

.btn-icon-teal { color: var(--teal); }
.btn-icon-teal:hover { color: var(--sky); background: var(--sky-ll); }

.history-meta { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--txt3); margin-bottom: 4px; }
.history-comment { font-size: 14px; color: var(--txt2); line-height: 1.5; }

.offer-form-actions__left { display: flex; gap: 8px; align-items: center; }

.referrals-table { width: 100%; }

.withdrawal-box { background: var(--status-error-light); border: 1px solid var(--rose); border-radius: var(--r1); padding: 16px; margin-top: 16px; }
.withdrawal-text { font-size: 14px; color: var(--txt); }

.mt-3 { margin-top: 16px; }

.sidebar-icon { width: 18px; text-align: center; flex-shrink: 0; opacity: .7; transition: opacity var(--t); }
.sidebar-link:hover .sidebar-icon,
.sidebar-link.active .sidebar-icon { opacity: 1; }

.filter-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; background: var(--card); border: 1px solid var(--border); border-radius: var(--r2); font-size: 13px; color: var(--txt2); cursor: pointer; transition: all var(--t); }
.filter-btn:hover { border-color: var(--sky); color: var(--sky); }
.filter-btn.active { background: var(--sky); color: #fff; border-color: var(--sky); }

/* ==================== CSS VARIABLES (Portal 3.0 Tokens) ==================== */

/* ==================== RESET & BASE ==================== */

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* ==================== TYPOGRAPHY ==================== */

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    color: var(--neutral-dark);
}

h1 { font-size: var(--font-size-5xl); }

h2 { font-size: var(--font-size-4xl); }

h3 { font-size: var(--font-size-3xl); }

h4 { font-size: var(--font-size-2xl); }

h5 { font-size: var(--font-size-xl); }

h6 { font-size: var(--font-size-lg); }

p {
    font-family: var(--font-body);
    margin-bottom: var(--spacing-4);
}

a:hover {
    color: var(--primary-teal-dark);
}

/* ==================== LAYOUT ==================== */

.container {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 var(--spacing-8);
}

/* ==================== BUTTONS ==================== */

.btn-large {
    padding: var(--spacing-4) var(--spacing-8);
    font-size: var(--font-size-lg);
}

/* ==================== UTILITIES ==================== */

.fade-in {
    opacity: 0;
    animation: fadeIn 0.8s ease-out forwards;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.text-left { text-align: left; }

.mt-1 { margin-top: var(--spacing-1); }

.mt-8 { margin-top: var(--spacing-8); }

.mb-1 { margin-bottom: var(--spacing-1); }

.mb-2 { margin-bottom: var(--spacing-2); }

.mb-8 { margin-bottom: var(--spacing-8); }

/* ═══════════════════════════════════════════════════════════════
   PORTAL 3.0  |  B2B КПшка.ру
   Архитектура: Top Navbar + 3 колонки (левая/центр/правая)
   ═══════════════════════════════════════════════════════════════ */

/* ─── TOKENS ─────────────────────────────────────────────────── */

html { height: 100%; }

a { text-decoration: none; color: inherit; }

img { display: block; }

button { cursor: pointer; border: none; background: none; font: inherit; }

input, select { font: inherit; }

ul { list-style: none; }

/* ═══════════════════════════════════════════════════════════════
   TOP NAVBAR — горизонтальная шапка (fixed)
   ═══════════════════════════════════════════════════════════════ */

.pnav {
  position: fixed; top: 0; left: 0; right: 0;
  height: var(--nb-h-px);
  background: var(--nb);
  display: flex; align-items: center;
  z-index: 500;
  box-shadow: 0 1px 0 rgba(255,255,255,.06), 0 2px 12px rgba(0,0,0,.25);
}

.pnav-inner {
  width: 100%; max-width: 1680px; margin: 0 auto;
  display: flex; align-items: center;
  padding: 0 12px; gap: 0;
}

.pnav-logo {
  display: flex; align-items: center; gap: 9px;
  padding: 0 14px 0 0; margin-right: 4px;
  border-right: 1px solid rgba(255,255,255,.1);
  flex-shrink: 0; text-decoration: none;
}

.pnav-logo-mark {
  width: 38px; height: 38px; border-radius: 8px;
  background: var(--sky); display: flex; align-items: center;
  justify-content: center; font-weight: 900; font-size: 15px;
  color: #fff; flex-shrink: 0; letter-spacing: -.3px;
  box-shadow: 0 1px 8px rgba(2,132,199,.45);
}

.pnav-logo-text {}

.pnav-logo-name { font-weight: 700; font-size: 22px; color: var(--page); line-height: 1; }

.pnav-logo-sub  { font-size: 13px; color: rgba(255,255,255,.7); margin-top: 2px; }

.pnav-btn-help {
  font-size: 11px; color: var(--txt3); white-space: nowrap;
  padding: 4px 10px; border: 1px solid rgba(255,255,255,.12);
  border-radius: 5px; text-decoration: none;
  display: inline-flex; align-items: center; gap: 5px;
  transition: background .15s, color .15s, border-color .15s;
}

.pnav-btn-help:hover { background: rgba(255,255,255,.1); color: var(--border); border-color: rgba(255,255,255,.25); }

.pnav-btn-help i { font-size: 10px; }

.pnav-btn-appeal {
  font-size: 11px; background: var(--sky); color: #fff !important; font-weight: 600;
  white-space: nowrap; padding: 4px 11px; border-radius: 5px;
  text-decoration: none; border: 1px solid transparent;
  display: inline-flex; align-items: center; gap: 5px;
  transition: background .15s, box-shadow .15s;
}

.pnav-btn-appeal:hover { background: var(--sky-h); color: #fff !important; box-shadow: 0 2px 8px rgba(2,132,199,.35); }

.pnav-btn-appeal i { font-size: 10px; }

.pnav-menu {
  display: flex; align-items: center; gap: 0;
  margin-left: 8px; flex: 1;
}

.pnav-lnk {
  display: flex; align-items: center; gap: 5px;
  padding: 0 11px; height: var(--nb-h-px);
  font-size: 12.5px; font-weight: 500; color: var(--nb-t);
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: color var(--t), border-color var(--t), background var(--t);
}

.pnav-lnk:hover { color: var(--nb-tw); background: var(--nb-h); }

.pnav-lnk.on { color: var(--sky); border-bottom-color: var(--sky); }

.pnav-lnk i { font-size: 11px; }

.pnav-lnk-cnt {
  background: rgba(255,255,255,.1); color: var(--txt3);
  font-size: 9px; font-weight: 700; padding: 1px 5px;
  border-radius: var(--r2); line-height: 1.5;
}

.pnav-lnk.on .pnav-lnk-cnt { background: rgba(125,211,252,.2); color: var(--sky); }

.pnav-search {
  display: flex; align-items: center; gap: 0;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12);
  border-radius: 7px; overflow: hidden; height: 32px;
  transition: border-color var(--t), box-shadow var(--t);
  flex-shrink: 0; min-width: 220px;
}

.pnav-search:focus-within {
  border-color: rgba(125,211,252,.4);
  background: rgba(255,255,255,.12);
  box-shadow: 0 0 0 3px rgba(2,132,199,.2);
}

.pnav-search i { padding: 0 8px; color: var(--txt2); font-size: 11px; flex-shrink: 0; }

.pnav-s-in {
  flex: 1; border: none; background: transparent;
  font-size: 12.5px; color: var(--page); outline: none;
  padding: 0 8px 0 0; min-width: 0;
}

.pnav-s-in::placeholder { color: var(--txt2); }

.pnav-s-go {
  padding: 0 12px; height: 100%;
  background: var(--sky); color: #fff;
  font-size: 11px; font-weight: 600;
  transition: background var(--t); flex-shrink: 0;
}

.pnav-s-go:hover { background: var(--sky-h); }

.pnav-info-lnk:hover { color: var(--border) !important; }

.pnav-right { display: flex; align-items: center; gap: 8px; margin-left: 12px; flex-shrink: 0; }

.pnav-btn {
  padding: 0 14px; height: 30px; border-radius: var(--r3);
  font-size: 12px; font-weight: 600; display: flex; align-items: center; gap: 5px;
  white-space: nowrap; transition: var(--t);
}

.pnav-btn-out { border: 1px solid rgba(255,255,255,.2); color: var(--border); }

.pnav-btn-out:hover { border-color: rgba(255,255,255,.4); color: var(--page); background: rgba(255,255,255,.07); }

.pnav-btn-fill { background: var(--sky); color: #fff; }

.pnav-btn-fill:hover { background: var(--sky-h); color: #fff; }

.pnav-user { display: flex; align-items: center; gap: 7px; color: var(--nb-t); cursor: pointer; }

.pnav-user-av {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--sky); display: flex; align-items: center;
  justify-content: center; font-size: 10px; font-weight: 700;
  color: #fff; flex-shrink: 0; border: 2px solid rgba(255,255,255,.15);
}

.pnav-user-name { font-size: 12px; color: var(--nb-tw); }

.pnav-user:hover .pnav-user-name { color: #fff; }

/* ═══════════════════════════════════════════════════════════════
   BODY LAYOUT — 3 колонки под навбаром
   ═══════════════════════════════════════════════════════════════ */

.portal-body { padding-top: var(--nb-h-px); }

.pcols {
  display: flex; align-items: flex-start;
  max-width: 1680px; margin: 0 auto;
  padding: 14px 12px;
  gap: 12px;
  min-height: calc(100vh - var(--nb-h-px));
}

/* ─── ЛЕВАЯ ПАНЕЛЬ ────────────────────────────────────────────── */

.pcol-l {
  width: var(--lw); flex-shrink: 0;
  position: sticky;
  align-self: flex-start;
}

/* ─── ЦЕНТРАЛЬНАЯ КОЛОНКА ─────────────────────────────────────── */

.pcol-c { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }

/* ─── ПРАВАЯ КОЛОНКА ──────────────────────────────────────────── */

.pcol-r {
  width: var(--rw); flex-shrink: 0;
  position: sticky;
  align-self: flex-start;
}

/* ─── ОБЁРТКА КОНТЕНТА САЙДБАРА (без overflow, без обрезки) ──── */

.pcol-scroll {
  display: flex; flex-direction: column; gap: 10px;
  padding: 0 2px 10px 0;
}

/* ═══════════════════════════════════════════════════════════════
   PANEL — базовый блок карточек/виджетов
   ═══════════════════════════════════════════════════════════════ */

.panel {
  background: var(--card); border-radius: var(--r1);
  border: 1px solid var(--border);
  box-shadow: var(--s1); overflow: hidden;
}

.panel-hd {
  padding: 12px 14px 10px;
  border-bottom: 1px solid var(--bord2);
  display: flex; align-items: center; justify-content: space-between;
}

.panel-ttl { font-weight: 700; font-size: 12px; color: var(--txt); text-transform: uppercase; letter-spacing: .05em; }

.panel-all { font-size: 11px; color: var(--sky); font-weight: 600; }

.panel-all:hover { color: var(--sky-h); }

.panel-bd { padding: 12px 14px; }

/* ═══════════════════════════════════════════════════════════════
   ЛЕВАЯ ПАНЕЛЬ — содержимое
   ═══════════════════════════════════════════════════════════════ */

/* ── Авторизован ── */

.l-auth-panel { padding: 14px; }

.l-auth-user  { display: flex; align-items: center; gap: 10px; }

.l-auth-av {
  width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, var(--sky), var(--sky-h));
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 13px; color: #fff;
  overflow: hidden;
}

.l-auth-av-img {
  background: var(--page);
  border: 1px solid var(--border);
  border-radius: var(--r3);
}

.l-auth-av img {
  width: 100%; height: 100%; object-fit: contain;
}

.l-auth-info { flex: 1; min-width: 0; }

.l-auth-nm   { font-weight: 600; font-size: 13px; color: var(--txt1);
               overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.l-auth-cab  { font-size: 11px; color: var(--sky); display: block; margin-top: 2px; }

.l-auth-out  { color: var(--txt3); font-size: 14px; transition: color var(--t); flex-shrink: 0; }

.l-auth-out:hover { color: var(--rose); }

/* ── Гость ── */

.l-auth-guest       { display: flex; flex-direction: column; gap: 10px; padding-bottom: 2px; }

.l-auth-guest-ttl   { font-size: 13px; font-weight: 700; color: var(--txt1);
                      display: flex; align-items: center; gap: 7px; }

.l-auth-guest-ttl i { font-size: 16px; color: var(--sky); }

.l-auth-guest-sub   { font-size: 11px; color: var(--txt3); margin-top: -4px; }

.l-abtn {
  display: block; text-align: center; padding: 8px 10px;
  border-radius: var(--r2); font-size: 12px; font-weight: 600;
  transition: var(--t);
}

.l-abtn-out { border: 1.5px solid var(--border); color: var(--txt2); }

.l-abtn-out:hover { border-color: var(--sky); color: var(--sky); }

.l-abtn-sky { background: var(--sky); color: #fff; }

.l-abtn-sky:hover { background: var(--sky-h); color: #fff; }

/* ── Добавить / Моя компания ── */

.l-add-co {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 14px; text-decoration: none;
  color: var(--txt1); font-size: 12.5px; font-weight: 600;
  transition: background var(--t), color var(--t);
}

.l-add-co:hover { background: var(--sky-ll); color: var(--sky); }

.l-add-co i:first-child {
  width: 28px; height: 28px; flex-shrink: 0; border-radius: 7px;
  background: var(--sky-ll); color: var(--sky); font-size: 12px;
  display: flex; align-items: center; justify-content: center;
  transition: background var(--t);
}

.l-add-co:hover i:first-child { background: var(--sky); color: #fff; }

.l-add-co span { flex: 1; }

.l-add-co-arr  { font-size: 10px; color: var(--txt3); }

.l-nav { padding: 6px 8px; }

.l-nav-sec { padding: 8px 8px 3px; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--txt3); }

.l-nav-lnk {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 9px; border-radius: var(--r3);
  color: var(--txt2); font-size: 12.5px; font-weight: 500;
  transition: background var(--t), color var(--t);
}

.l-nav-lnk:hover { background: var(--sky-ll); color: var(--sky); }

.l-nav-lnk.on { background: var(--sky-l); color: var(--sky-h); font-weight: 600; }

.l-nav-ic { width: 17px; text-align: center; font-size: 12px; flex-shrink: 0; }

.l-nav-cnt {
  margin-left: auto; font-size: 9.5px; font-weight: 700;
  background: var(--bord2); color: var(--txt3);
  padding: 1px 6px; border-radius: var(--r2);
}

.l-nav-lnk.on .l-nav-cnt { background: var(--sky-l); color: var(--sky); }

.l-stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 12px 14px; }

.l-stat {
  background: var(--bord2); border-radius: var(--r2);
  padding: 9px 10px; text-align: center;
}

.l-stat-n { font-weight: 800; font-size: 18px; line-height: 1; margin-bottom: 3px; }

.l-stat-l { font-size: 9px; color: var(--txt3); line-height: 1.3; }

.l-live { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--em); vertical-align: middle; margin-right: 2px; animation: pulse 2s ease infinite; }

@keyframes pulse {
    0%, 100% { opacity: 0.5; transform: scale(0.95); }
    50% { opacity: 1; transform: scale(1.05); }
}

.l-contact { padding: 10px 14px 14px; }

.l-contact-row { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 6px; font-size: 11.5px; }

.l-contact-row i { color: var(--txt3); font-size: 10px; margin-top: 2px; width: 12px; flex-shrink: 0; }

.l-contact-row a { color: var(--txt2); }

.l-contact-row a:hover { color: var(--sky); }

.l-contact-row span { color: var(--txt2); line-height: 1.4; }

/* ═══════════════════════════════════════════════════════════════
   ЦЕНТР — поиск, вкладки, лента
   ═══════════════════════════════════════════════════════════════ */

.c-searchbox {
  background: var(--card); border-radius: var(--r1);
  border: 1px solid var(--border); box-shadow: var(--s1);
  padding: 14px 16px;
}

.c-sb-form {
  display: flex; align-items: stretch;
  border: 1.5px solid var(--border);
  border-radius: var(--r2); overflow: hidden;
  background: var(--page);
  transition: border-color var(--t), box-shadow var(--t);
  margin-bottom: 10px;
}

.c-sb-form:focus-within {
  border-color: var(--sky);
  box-shadow: 0 0 0 3px rgba(2,132,199,.12);
  background: var(--card);
}

.c-sb-ico { padding: 0 12px; color: var(--txt3); font-size: 13px; display: flex; align-items: center; background: var(--card); border-right: 1.5px solid var(--border); flex-shrink: 0; }

.c-sb-in { flex: 1; border: none; background: transparent; padding: 11px 12px; font-size: 14px; color: var(--txt); outline: none; }

.c-sb-in::placeholder { color: var(--txt3); }

.c-sb-city { border-left: 1.5px solid var(--border); display: none; position: relative; }

.c-sb-city input { border: none; background: transparent; padding: 11px 13px; font-size: 13px; color: var(--txt); outline: none; width: 130px; }

.c-sb-city input::placeholder { color: var(--txt3); }

.c-sb-go {
  background: var(--sky); color: #fff; padding: 0 22px;
  font-size: 13.5px; font-weight: 700; flex-shrink: 0;
  transition: background var(--t);
}

.c-sb-go:hover { background: var(--sky-h); }

.c-sb-tags { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

.c-sb-tags-lbl { font-size: 10.5px; color: var(--txt3); flex-shrink: 0; }

.c-sb-tag {
  padding: 3px 10px; border-radius: var(--r1);
  border: 1px solid var(--border); background: var(--card);
  font-size: 11px; color: var(--txt2); cursor: pointer;
  transition: var(--t);
}

.c-sb-tag:hover { border-color: var(--sky); color: var(--sky); background: var(--sky-ll); }

.c-tabs {
  background: var(--card); border-radius: var(--r1);
  border: 1px solid var(--border); box-shadow: var(--s1);
  display: flex; align-items: center; overflow-x: auto;
  scrollbar-width: none; padding: 5px 6px; gap: 3px;
}

.c-tabs::-webkit-scrollbar { display: none; }

.c-tab {
  display: flex; align-items: center; gap: 5px;
  padding: 6px 12px; font-size: 12.5px; font-weight: 500;
  color: var(--txt2); border-radius: var(--r2);
  border: 1px solid transparent;
  white-space: nowrap; flex-shrink: 0; cursor: pointer;
  transition: all .18s ease; background: transparent;
  user-select: none;
}

.c-tab:hover {
  color: var(--sky); background: var(--sky-ll); border-color: var(--sky-l);
}

.c-tab.on {
  color: #fff; background: var(--sky); border-color: var(--sky);
  font-weight: 700; box-shadow: 0 2px 8px rgba(2,132,199,.35);
}

.c-tab i { font-size: 11px; }

.c-tab-n {
  font-size: 9px; font-weight: 700; padding: 1px 5px;
  border-radius: var(--r2); background: rgba(0,0,0,.07); color: inherit; opacity: .8;
}

.c-tab:hover .c-tab-n { background: rgba(2,132,199,.15); color: var(--sky); opacity: 1; }

.c-tab.on .c-tab-n  { background: rgba(255,255,255,.25); color: #fff; opacity: 1; }

/* ═══ Статс-бар ═══ */

.c-stats { display: grid; grid-template-columns: repeat(7,1fr); gap: 8px; }

.c-stat {
  display: flex; align-items: center; gap: 9px;
  padding: 10px 11px; border-radius: var(--r1);
  border: 1px solid transparent;
  text-decoration: none; color: inherit;
  transition: transform var(--t), box-shadow var(--t);
  position: relative; overflow: hidden;
}

.c-stat:hover { transform: translateY(-3px); }

.c-stat-ic {
  width: 36px; height: 36px; border-radius: var(--r2);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; color: #fff; flex-shrink: 0;
}

.c-stat-body { flex: 1; min-width: 0; }

.c-stat-n {
  font-weight: 800; font-size: 20px; line-height: 1;
  letter-spacing: -.5px;
}

.c-stat-l {
  font-size: 9px; margin-top: 3px;
  line-height: 1.3; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}

.cs1 { background: linear-gradient(135deg,var(--status-success-light),var(--status-success-light)); border-color: var(--status-success-light); }

.cs1 .c-stat-ic { background: linear-gradient(135deg,var(--em),var(--em)); box-shadow: 0 4px 12px rgba(5,150,105,.3); }

.cs1 .c-stat-n  { color: var(--em); }

.cs1 .c-stat-l  { color: var(--em); }

.cs1:hover { box-shadow: 0 8px 24px rgba(5,150,105,.18); border-color: var(--em); }

.cs2 { background: linear-gradient(135deg,var(--sky-ll),var(--sky-l)); border-color: var(--sky-l); }

.cs2 .c-stat-ic { background: linear-gradient(135deg,var(--sky),var(--sky-h)); box-shadow: 0 4px 12px rgba(2,132,199,.3); }

.cs2 .c-stat-n  { color: var(--sky-h); }

.cs2 .c-stat-l  { color: var(--sky-h); }

.cs2:hover { box-shadow: 0 8px 24px rgba(2,132,199,.18); border-color: var(--sky); }

.cs3 { background: linear-gradient(135deg,var(--card)beb,var(--status-warning-light)); border-color: var(--status-warning-light); }

.cs3 .c-stat-ic { background: linear-gradient(135deg,var(--am),var(--am)); box-shadow: 0 4px 12px rgba(217,119,6,.3); }

.cs3 .c-stat-n  { color: var(--am); }

.cs3 .c-stat-l  { color: var(--am); }

.cs3:hover { box-shadow: 0 8px 24px rgba(217,119,6,.18); border-color: var(--am); }

.cs4 { background: linear-gradient(135deg,var(--card)1f2,var(--status-error-light)); border-color: var(--status-error-light); }

.cs4 .c-stat-ic { background: linear-gradient(135deg,var(--rose),var(--rose)); box-shadow: 0 4px 12px rgba(225,29,72,.3); }

.cs4 .c-stat-n  { color: var(--rose); }

.cs4 .c-stat-l  { color: var(--rose); }

.cs4:hover { box-shadow: 0 8px 24px rgba(225,29,72,.18); border-color: var(--rose); }

.cs5 { background: linear-gradient(135deg,var(--sky-ll),var(--sky-ll)); border-color: var(--teal); }

.cs5 .c-stat-ic { background: linear-gradient(135deg,var(--teal),var(--teal)); box-shadow: 0 4px 12px rgba(8,145,178,.3); }

.cs5 .c-stat-n  { color: var(--teal); }

.cs5 .c-stat-l  { color: var(--sky-h); }

.cs5:hover { box-shadow: 0 8px 24px rgba(8,145,178,.18); border-color: var(--teal); }

.cs6 { background: linear-gradient(135deg,var(--sky-ll),var(--sky-l)); border-color: var(--sky-l); }

.cs6 .c-stat-ic { background: linear-gradient(135deg,var(--ind),var(--ind)); box-shadow: 0 4px 12px rgba(67,56,202,.3); }

.cs6 .c-stat-n  { color: var(--ind); }

.cs6 .c-stat-l  { color: var(--ind); }

.cs6:hover { box-shadow: 0 8px 24px rgba(67,56,202,.18); border-color: var(--ind); }

.cs7 { background: linear-gradient(135deg,var(--sky-ll),var(--sky-ll)); border-color: var(--border)6fe; }

.cs7 .c-stat-ic { background: linear-gradient(135deg,var(--vio),var(--vio)); box-shadow: 0 4px 12px rgba(124,58,237,.3); }

.cs7 .c-stat-n  { color: var(--vio); }

.cs7 .c-stat-l  { color: var(--vio); }

.cs7:hover { box-shadow: 0 8px 24px rgba(124,58,237,.18); border-color: var(--vio); }

.c-promo {
  background: linear-gradient(120deg, var(--sky-h) 0%, var(--sky-h) 55%, var(--sky) 100%);
  border-radius: var(--r1); padding: 18px 22px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
  box-shadow: 0 4px 20px rgba(37,99,235,.25);
}

.c-promo-h { font-weight: 800; font-size: 16px; color: #fff; margin-bottom: 4px; }

.c-promo-s { font-size: 12px; color: rgba(255,255,255,.75); max-width: 500px; line-height: 1.5; }

.c-promo-btns { display: flex; gap: 8px; flex-shrink: 0; flex-wrap: wrap; }

.c-promo-btn {
  padding: 7px 14px; border-radius: 7px; font-size: 11.5px; font-weight: 700;
  white-space: nowrap; transition: var(--t); display: inline-flex; align-items: center; gap: 5px;
}

.c-promo-btn-w { background: var(--card); color: var(--sky-h); }

.c-promo-btn-w:hover { background: var(--sky-ll); }

.c-promo-btn-gov { background: linear-gradient(135deg, var(--am), var(--am)); color: #fff; }

.c-promo-btn-gov:hover { background: linear-gradient(135deg, var(--am), var(--am)); color: #fff; }

.c-feed-hd {
  display: flex; align-items: center; justify-content: space-between;
}

.c-feed-ttl {
  font-weight: 700; font-size: 13.5px; color: var(--txt);
  display: flex; align-items: center; gap: 7px;
}

.c-feed-ttl-ic {
  width: 24px; height: 24px; border-radius: var(--r3);
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; flex-shrink: 0;
}

.c-feed-all { font-size: 11.5px; font-weight: 600; color: var(--sky); padding: 4px 10px; border-radius: var(--r3); border: 1px solid var(--sky-l); transition: var(--t); }

.c-feed-all:hover { background: var(--sky-l); }

/* ═══════════════════════════════════════════════════════════════
   КАРТОЧКИ — 4 колонки, КВАДРАТНЫЕ (aspect-ratio: 1/1)
   ═══════════════════════════════════════════════════════════════ */

.c-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.c-grid--co { grid-template-columns: repeat(3, 1fr); }

.gc {                               /* grid card */
  aspect-ratio: 1 / 1;             /* КВАДРАТ */
  display: flex; flex-direction: column;
  background: var(--card);
  border-radius: var(--r1);
  border: 1px solid var(--border);
  overflow: hidden;
  box-shadow: var(--s1);
  transition: transform var(--t), box-shadow var(--t);
  text-decoration: none; color: var(--txt);
}

.gc:hover { transform: translateY(-3px); box-shadow: var(--s2); border-color: var(--sky-l); }

/* Картинка/обложка карточки — 60% высоты */

.gc-img {
  flex: 0 0 60%; position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}

.gc-img img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .35s ease;
}

.gc:hover .gc-img img { transform: scale(1.06); }

.gc-co   { background: linear-gradient(145deg, var(--em), var(--em)); }

.gc-proc { background: linear-gradient(145deg, var(--sky-h), var(--sky)); }

.gc-off  { background: linear-gradient(145deg, var(--am), var(--am)); }

.gc-tnd  { background: linear-gradient(145deg, var(--rose), var(--rose)); }

.gc-vac  { background: linear-gradient(145deg, var(--teal), var(--teal)); }

.gc-nws  { background: linear-gradient(145deg, var(--ind), var(--ind)); }

.gc-prs  { background: linear-gradient(145deg, var(--vio), var(--vio)); }

.gc-ico { font-size: 40px; color: rgba(255,255,255,.22); position: absolute; }

.gc-badge {
  position: absolute; bottom: 7px; left: 7px; z-index: 2;
  font-size: 9px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .05em; padding: 2px 8px; border-radius: 4px;
  backdrop-filter: blur(8px);
}

.gb-co   { background: rgba(5,150,105,.88);   color: #fff; }

.gb-proc { background: rgba(37,99,235,.88);   color: #fff; }

.gb-off  { background: rgba(217,119,6,.88);   color: #fff; }

.gb-tnd  { background: rgba(225,29,72,.88);   color: #fff; }

.gb-vac  { background: rgba(8,145,178,.88);   color: #fff; }

.gb-nws  { background: rgba(79,70,229,.88);   color: #fff; }

.gb-prs  { background: rgba(124,58,237,.88);  color: #fff; }

.gc-price {
  position: absolute; top: 7px; right: 7px; z-index: 2;
  background: rgba(5,150,105,.9); color: #fff;
  font-size: 9.5px; font-weight: 700; padding: 2px 8px; border-radius: 4px;
  max-width: 90%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.gc-dead {
  position: absolute; top: 7px; left: 7px; z-index: 2;
  background: rgba(220,38,38,.9); color: #fff;
  font-size: 9px; font-weight: 700; padding: 2px 7px; border-radius: 4px;
}

.gc-body {
  flex: 1; padding: 8px 10px 7px;
  display: flex; flex-direction: column; gap: 3px;
  min-height: 0; overflow: hidden;
}

.gc-title {
  font-weight: 700; font-size: 11.5px; line-height: 1.4; color: var(--txt);
}

.gc:hover .gc-title { color: var(--sky); }

.gc-src { font-size: 10px; color: var(--txt3); flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

.gc-dt    { font-size: 10px; color: var(--txt3); white-space: nowrap; flex-shrink: 0; }

.gc-views { font-size: 10px; color: var(--txt3); white-space: nowrap; flex-shrink: 0; display: flex; align-items: center; gap: 3px; }

.gc-views i { font-size: 9px; }

.gc-desc { font-size: 10.5px; color: var(--txt2); line-height: 1.5; }

.gc-meta { margin-top: auto; }

.gc-gov { color: var(--sky); margin-right: 3px; }

.gc-vrf { color: var(--em); margin-right: 3px; }

.gc-tag { display: inline-block; background: var(--sky-ll); color: var(--sky); font-size: 9px; padding: 1px 6px; border-radius: 4px; margin-top: 3px; margin-right: 3px; }

.gb-feat { background: var(--am) !important; color: var(--am) !important; }

.gb-prem { background: linear-gradient(135deg,var(--am),var(--am)) !important; color: #fff !important; }

/* ── Featured карточка + бейдж ── */

.gc-co-feat { border-color: var(--am); box-shadow: 0 0 0 1px var(--status-warning-light), var(--s1); }

.gc-co-feat:hover { border-color: var(--am); box-shadow: 0 6px 24px rgba(251,191,36,.2); }

.gc-co-b-feat { background: linear-gradient(135deg,var(--am),var(--am)); color: #fff; }

.gc-co-req-tag { color: var(--ind); }

.gc-co-req-tag i { color: var(--ind); }

.cof-tags-wrap { display: flex; flex-wrap: wrap; gap: 5px; }

.cof-tag-btn { padding: 3px 9px; border-radius: 5px; font-size: 11px; border: 1px solid var(--border); background: var(--page); color: var(--txt2); cursor: pointer; transition: var(--t); }

.cof-tag-btn small { color: var(--txt3); font-size: 10px; }

.cof-tag-btn:hover { border-color: var(--sky); color: var(--sky); }

.cof-tag-btn.on { background: var(--sky); color: #fff; border-color: var(--sky); }

.cof-tag-btn.on small { color: rgba(255,255,255,.7); }

.gc-co-hd {
  flex: 0 0 60%; position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}

.gc-co-hd img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 14px; background: var(--card); }

.gc-co-ini { font-weight: 900; font-size: 48px; letter-spacing: -3px; color: rgba(255,255,255,.8); }

.gc-co-bd { flex: 1; padding: 7px 10px 7px; display: flex; flex-direction: column; gap: 3px; min-height: 0; overflow: hidden; }

.gc:hover .gc-co-nm { color: var(--sky); }

.gc-co-tags { display: flex; gap: 3px; flex-wrap: wrap; flex-shrink: 0; }

.gc-co-tag { font-size: 8.5px; font-weight: 700; padding: 1px 5px; border-radius: 3px; }

.gct-ver { background: var(--sky-l); color: var(--em); }

.gct-prm { background: var(--status-warning-light); color: var(--am); }

/* ═══════════════════════════════════════════════════════════════
   INFINITE SCROLL
   ═══════════════════════════════════════════════════════════════ */

.c-grid-sentinel { height: 1px; }

.gc-loader { display: none; grid-column: 1/-1; text-align: center; padding: 20px; color: var(--txt3); font-size: 12.5px; }

.gc-loader.on { display: block; }

.gc-loader i { animation: spin .7s linear infinite; margin-right: 6px; }

@keyframes spin {
    to { transform: rotate(360deg); }
}

.gc-done { display: none; grid-column: 1/-1; text-align: center; padding: 14px; font-size: 12px; color: var(--txt3); border-top: 1px solid var(--bord2); }

.gc-done.on { display: block; }

@keyframes skpulse { 0%,100%{opacity:.6} 50%{opacity:1} }

.gc.sk { pointer-events: none; animation: skpulse 1.5s ease infinite; }

.gc.sk .gc-img { background: var(--border) !important; }

.sk-line { background: var(--border); border-radius: 4px; display: block; }

/* ═══════════════════════════════════════════════════════════════
   ПРАВАЯ КОЛОНКА — виджеты
   ═══════════════════════════════════════════════════════════════ */

.r-stats { padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }

.r-stat-row { display: flex; align-items: center; gap: 10px; }

.r-stat-ic { width: 30px; height: 30px; border-radius: 7px; display: flex; align-items: center; justify-content: center; font-size: 12px; flex-shrink: 0; }

.r-stat-n { font-weight: 800; font-size: 16px; line-height: 1; }

.r-stat-l { font-size: 10px; color: var(--txt3); margin-top: 1px; }

.r-news { display: flex; flex-direction: column; }

.r-news-item { display: flex; align-items: flex-start; gap: 9px; padding: 9px 14px; border-bottom: 1px solid var(--bord2); transition: background var(--t); }

.r-news-item:last-child { border-bottom: none; }

.r-news-item:hover { background: var(--sky-ll); }

.r-news-img { width: 46px; height: 46px; border-radius: var(--r3); object-fit: cover; flex-shrink: 0; background: var(--bord2); }

.r-news-img-ph { width: 46px; height: 46px; border-radius: var(--r3); display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; }

.r-news-body { flex: 1; min-width: 0; }

.r-news-t { font-size: 11.5px; font-weight: 600; line-height: 1.38; color: var(--txt); }

.r-news-item:hover .r-news-t { color: var(--sky); }

.r-news-dt { font-size: 10px; color: var(--txt3); margin-top: 3px; }

.r-contact { padding: 12px 14px; display: flex; flex-direction: column; gap: 7px; }

.r-c-row { display: flex; align-items: flex-start; gap: 8px; font-size: 12px; }

.r-c-row i { color: var(--sky); font-size: 11px; margin-top: 2px; width: 14px; flex-shrink: 0; }

.r-c-row a { color: var(--txt); font-weight: 500; }

.r-c-row a:hover { color: var(--sky); }

.r-c-row span { color: var(--txt2); line-height: 1.4; }

.r-chart { padding: 12px 14px; }

.r-chart-ttl { font-size: 11px; font-weight: 700; color: var(--txt); margin-bottom: 10px; }

.r-chart-area { height: 120px; }

/* ── Донат-виджет «Платформа» ── */

.r-donut-wrap { padding: 10px 14px 16px; }

.r-donut-cv   { position: relative; height: 165px; margin-bottom: 14px; }

.r-donut-leg  { display: flex; flex-direction: column; gap: 8px; }

.r-dleg       { display: flex; align-items: center; gap: 8px; }

.r-dleg-dot   { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }

.r-dleg-lbl   { font-size: 11px; color: var(--txt2); flex: 1; }

.r-dleg-bar   { flex: 0 0 52px; height: 4px; background: var(--bord2); border-radius: 2px; overflow: hidden; }

.r-dleg-bar span { display: block; height: 4px; border-radius: 2px; transition: width .6s ease; }

.r-dleg-n     { font-size: 12px; font-weight: 700; color: var(--txt1); min-width: 22px; text-align: right; }

/* ═══════════════════════════════════════════════════════════════
   CHART (центральный)
   ═══════════════════════════════════════════════════════════════ */

.c-chart {
  background: var(--card); border-radius: var(--r1);
  border: 1px solid var(--border); padding: 16px 18px;
}

.c-chart-top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 14px; flex-wrap: wrap; gap: 8px; }

.c-chart-ttl { font-weight: 700; font-size: 13px; }

.c-chart-sub { font-size: 10.5px; color: var(--txt3); margin-top: 2px; }

.c-chart-leg { display: flex; flex-wrap: wrap; gap: 10px; }

.leg { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--txt2); }

.leg-dot { width: 7px; height: 7px; border-radius: 50%; }

.c-chart-area { height: 170px; }

/* ═══ Карточка компании ═══ */

.gc-co-card {
  aspect-ratio: unset;          /* снимаем квадрат от .gc */
  overflow: hidden;             /* скругляем все углы */
  display: flex; flex-direction: column; gap: 0;
  text-decoration: none; color: inherit;
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--r1); box-shadow: var(--s1);
  transition: box-shadow var(--t), transform var(--t), border-color var(--t);
}

.gc-co-card:hover { box-shadow: 0 6px 24px rgba(0,0,0,.1); transform: translateY(-2px); border-color: var(--sky-l); }

.gc-co-prem { border-color: var(--am); box-shadow: 0 0 0 1px var(--status-warning-light), var(--s1); }

.gc-co-prem:hover { border-color: var(--am); box-shadow: 0 6px 24px rgba(251,191,36,.25); }

.gc-co-demo { border-color: var(--rose); box-shadow: 0 0 0 1px var(--status-error-light), var(--s1); }

.gc-co-demo:hover { border-color: var(--rose); box-shadow: 0 6px 24px rgba(239,68,68,.2); }

/* ── Шапка карточки ── */

.gc-co-top {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 16px 14px;
  position: relative;
  background: var(--card);
}

.gc-co-av {
  width: 80px; height: 80px; border-radius: 14px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; position: relative;
  border: 1px solid rgba(0,0,0,.07);
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
}

.gc-co-av img   { width: 100%; height: 100%; object-fit: contain; }

.gc-co-av-com   { background: var(--page); }

.gc-co-av-com i { font-size: 34px; color: var(--txt3); }

.gc-co-crown {
  position: absolute; top: -4px; right: -4px;
  width: 17px; height: 17px; border-radius: 50%;
  background: var(--am); display: flex; align-items: center; justify-content: center;
  font-size: 8px; color: #fff; border: 2px solid var(--card);
  box-shadow: 0 1px 4px rgba(245,158,11,.5);
}

.gc-co-info     { flex: 1; min-width: 0; padding-right: 52px; }

.gc-co-nm       {
  font-size: 14px; font-weight: 700; color: var(--txt);
  line-height: 1.35; word-break: break-word; margin-bottom: 7px;
}

.gc-co-sub-row  { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }

.gc-co-type     { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px;
                  font-weight: 600; padding: 3px 8px; border-radius: var(--r1); }

.gct-gov        { background: var(--sky-l); color: var(--sky-h); }

.gct-com        { background: var(--sky-l); color: var(--em); }

.gc-co-city     { display: inline-flex; align-items: center; gap: 4px;
                  font-size: 11px; color: var(--txt2); font-weight: 500; }

.gc-co-city i   { font-size: 9px; color: var(--txt3); }

/* Бейджи — колонка в правом верхнем углу */

.gc-co-badges   {
  position: absolute; top: 14px; right: 14px;
  display: flex; flex-direction: column; gap: 5px; align-items: center;
}

.gc-co-badge    {
  width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; cursor: default;
}

.gc-co-b-ver  { background: var(--em); color: #fff; box-shadow: 0 2px 6px rgba(5,150,105,.35); }

.gc-co-b-unv  { background: var(--txt3); color: #fff; box-shadow: 0 2px 6px rgba(148,163,184,.35); }

.gc-co-b-prm  { background: var(--am); color: #fff; box-shadow: 0 2px 6px rgba(245,158,11,.35); }

.gc-co-b-top  { background: var(--vio); color: #fff; box-shadow: 0 2px 6px rgba(124,58,237,.35); }

.gc-co-b-demo { background: var(--rose); color: #fff; box-shadow: 0 2px 6px rgba(239,68,68,.35); }

.gc-co-b-urg  { background: var(--am); color: #fff; box-shadow: 0 2px 6px rgba(249,115,22,.35); }

.gc-co-b-gov  { background: var(--sky); color: #fff; box-shadow: 0 2px 6px rgba(59,130,246,.35); }

.gc-co-av-vac, .gc-co-av-com, .gc-co-av-gov, .gc-off-av-ph, .gc-nws-av-ph {
  background: var(--page); display: flex; align-items: center; justify-content: center;
}

.gc-co-av-vac i, .gc-co-av-com i, .gc-co-av-gov i, .gc-off-av-ph i, .gc-nws-av-ph i {
  font-size: 28px; color: var(--txt3);
}

.gc-co-av-gov { background: var(--sky-ll); }

.gc-co-av-gov i { color: var(--sky); }

.gct-vac-fmt { background: rgba(99,102,241,.12); color: var(--ind); }

.gct-vac-emp { background: rgba(20,184,166,.12); color: var(--sky-h); }

.gc-vac-card .gc-co-foot { grid-template-columns: 1fr 1fr; }

.gc-off-av { border-radius: var(--r2); }

.gc-off-av img { border-radius: var(--r2); object-fit: cover; }

.gct-off-prod { background: rgba(217,119,6,.12) !important; color: var(--am) !important; }

.gct-off-work { background: rgba(37,99,235,.12) !important; color: var(--sky) !important; }

.gct-off-svc  { background: rgba(5,150,105,.12) !important; color: var(--em) !important; }

.gct-proc-goods { background: rgba(37,99,235,.12); color: var(--sky); }

.gct-proc-works { background: rgba(217,119,6,.12); color: var(--am); }

.gct-proc-svc   { background: rgba(124,58,237,.12); color: var(--vio); }

.gc-proc-card .gc-co-okved i { color: var(--em); }

.gct-tnd-44  { background: rgba(239,68,68,.12); color: var(--rose); }

.gct-tnd-223 { background: rgba(59,130,246,.12); color: var(--sky); }

.gct-tnd-com { background: rgba(20,184,166,.12); color: var(--sky-h); }

.gc-tnd-card .gc-co-okved i { color: var(--sky); }

.gc-tnd-price { background: var(--status-success-light) !important; border-top-color: var(--status-success-light) !important; }

.gc-tnd-price i { color: var(--em) !important; }

.gc-tnd-price span { font-weight: 700; color: var(--em); font-size: 13px; }

.gc-tnd-desc span { font-size: 11.5px; line-height: 1.45; color: var(--txt2); }

.gc-tnd-details {
  padding: 0; border-top: 1px solid var(--border); background: var(--card);
}

.gc-tnd-row {
  display: flex; align-items: baseline; gap: 8px;
  padding: 6px 16px; border-bottom: 1px solid var(--page);
  font-size: 11.5px; color: var(--txt2); line-height: 1.4;
  word-break: break-word;
}

.gc-tnd-row:last-child { border-bottom: none; }

.gc-tnd-row i { font-size: 10px; flex-shrink: 0; width: 14px; text-align: center; margin-top: 2px; }

.gc-tnd-row b { color: var(--txt2); font-weight: 600; white-space: nowrap; margin-right: 4px; }

.gc-tnd-row span { flex: 1; min-width: 0; }

.gc-tnd-card .gc-co-foot {
  grid-template-columns: 1fr 1fr;
}

.gc-tnd-card .gc-co-foot span {
  word-break: break-word; overflow-wrap: break-word;
}

/* Карточка новости в gc-co-card формате */

.gc-nws-av { border-radius: var(--r2); }

.gc-nws-av img { border-radius: var(--r2); object-fit: cover; }

.gc-nws-av-ph { background: linear-gradient(145deg, var(--ind), var(--ind)); }

.gc-nws-av-ph i { font-size: 28px; color: rgba(255,255,255,.5); }

.gc-nws-badge { background: rgba(79,70,229,.12) !important; color: var(--ind) !important; }

.gc-nws-desc { }

.gc-nws-desc span {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; font-size: 11px; line-height: 1.45;
}

.gc-card-desc { }

.gc-card-desc span {
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden; font-size: 11.5px; line-height: 1.45; color: var(--txt2);
}

.gc-skills { display: flex; flex-wrap: wrap; gap: 4px; padding: 8px 16px; border-top: 1px solid var(--border); background: var(--card); }

.gc-skill-tag {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 10px; font-weight: 500; padding: 2px 7px; border-radius: var(--r2);
  background: var(--page); color: var(--txt2); white-space: nowrap; max-width: 140px;
  overflow: hidden; text-overflow: ellipsis;
}

.gc-skill-tag i { font-size: 8px; color: var(--txt3); }

.gc-skill-more { font-size: 10px; color: var(--txt2); font-weight: 600; padding: 2px 7px;
  border-radius: var(--r2); background: var(--border); white-space: nowrap; }

.gc-benefits { display: flex; gap: 6px; flex-wrap: wrap; padding: 6px 16px; border-top: 1px solid var(--border); background: var(--card); }

.gc-benefit {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10px; font-weight: 500; color: var(--em); padding: 2px 8px;
  border-radius: var(--r2); background: var(--status-success-light);
}

.gc-benefit i { font-size: 9px; }

.gc-schedule { font-size: 11px; color: var(--ind); font-weight: 500; }

/* Футер карточки: даты, просмотры, отклики */

.gc-co-foot {
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px 8px;
  padding: 8px 16px; border-top: 1px solid var(--border); background: var(--card);
}

.gc-co-foot span {
  display: flex; align-items: center; gap: 5px;
  font-size: 11px; color: var(--txt2);
}

.gc-co-foot b { color: var(--txt2); font-weight: 600; }

.gc-co-foot i { font-size: 10px; flex-shrink: 0; }

.gc-co-foot .fa-calendar-plus { color: var(--sky); }

.gc-co-foot .fa-calendar-times { color: var(--rose); }

.gc-co-foot .fa-eye { color: var(--vio); }

.gc-co-foot .fa-paper-plane { color: var(--am); }

/* ── Секции внутри карточки ── */

.gc-co-okved, .gc-co-reqs, .gc-co-contacts {
  background: var(--card);
  padding: 10px 16px;
  border-top: 1px solid var(--border);
}

.gc-co-okved {
  display: flex; align-items: flex-start; gap: 8px;
  border-top: 1px solid var(--border);
}

.gc-co-okved i    { font-size: 11px; color: var(--ind); flex-shrink: 0; margin-top: 2px; }

.gc-co-okved span { font-size: 11.5px; color: var(--ind); line-height: 1.5; flex: 1; }

.gc-co-reqs {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}

.gc-co-req-item {
  display: flex; align-items: center; gap: 5px;
  font-size: 12px; color: var(--txt2);
}

.gc-co-req-item b { color: var(--txt); font-weight: 700; }

.gc-co-req-item i { font-size: 10px; color: var(--txt3); }

.gc-co-req-age {
  display: inline-flex; align-items: center; gap: 5px;
  background: linear-gradient(135deg,var(--status-warning-light),var(--status-warning-light));
  color: var(--am); font-weight: 700; font-size: 11.5px;
  padding: 3px 9px; border-radius: var(--r1); border: 1px solid var(--am);
  white-space: nowrap; flex: none;
}

.gc-co-req-age i { color: var(--am); font-size: 10px; }

.gc-co-req-site {
  display: inline-flex; align-items: center; gap: 5px;
  background: linear-gradient(135deg,var(--sky-ll),var(--sky-l));
  color: var(--sky-h); font-weight: 700; font-size: 11.5px;
  padding: 3px 9px; border-radius: var(--r1); border: 1px solid var(--sky-l);
  white-space: nowrap; flex-shrink: 0;
}

.gc-co-req-site i { color: var(--sky-h); font-size: 10px; }

.gc-co-phone {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 16px; border-top: 1px solid var(--border); background: var(--card); gap: 8px;
}

.gc-co-phone-num {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--txt2);
}

.gc-co-phone-num i { font-size: 10px; color: var(--em); flex-shrink: 0; }

/* ═══ Панель фильтров компаний ═══ */

.cof-panel { padding: 0; }

.cof-panel .panel-hd { padding: 11px 14px; border-bottom: 1px solid var(--border); }

.cof-sec { padding: 10px 14px; border-bottom: 1px solid var(--border); }

.cof-sec:last-child { border-bottom: none; }

.cof-lbl { font-size: 10.5px; font-weight: 700; color: var(--txt3); text-transform: uppercase;
           letter-spacing: .05em; margin-bottom: 7px; }

.cof-lbl-sub { font-size: 10px; font-weight: 600; color: var(--txt3); text-transform: none;
               letter-spacing: 0; margin: 8px 0 4px; }

.cof-type-tabs { display: flex; gap: 4px; }

.cof-ttab {
  flex: 1; padding: 5px 4px; border-radius: var(--r3); font-size: 11px; font-weight: 600;
  border: 1px solid var(--border); background: var(--bg); color: var(--txt2);
  cursor: pointer; transition: all var(--t); display: flex; align-items: center; justify-content: center; gap: 4px;
}

.cof-ttab:hover { border-color: var(--sky); color: var(--sky); }

.cof-ttab.on    { background: var(--sky); border-color: var(--sky); color: #fff; }

.cof-ttab i     { font-size: 9px; }

.cof-select {
  width: 100%; padding: 7px 10px; border-radius: 7px; font-size: 12px;
  border: 1px solid var(--border); background: var(--bg); color: var(--txt1);
  cursor: pointer; outline: none; transition: border-color var(--t);
}

.cof-select:focus { border-color: var(--sky); }

.cof-input {
  width: 100%; padding: 7px 10px; border-radius: 7px; font-size: 12px;
  border: 1px solid var(--border); background: var(--bg); color: var(--txt1);
  outline: none; transition: border-color var(--t); box-sizing: border-box;
}

.cof-input:focus { border-color: var(--sky); }

.cof-drop {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 50;
  background: var(--card); border: 1px solid var(--border); border-radius: 7px;
  box-shadow: var(--s2); max-height: 180px; overflow-y: auto; margin-top: 2px;
}

.cof-drop-item { padding: 7px 11px; font-size: 12px; cursor: pointer; color: var(--txt1); }

.cof-drop-item:hover { background: var(--sky-ll); color: var(--sky); }

.cof-radio {
  display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--txt2);
  cursor: pointer; padding: 3px 0;
}

.cof-radio input { display: none; }

.cof-radio span {
  width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--border);
  flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  transition: border-color var(--t);
}

.cof-radio input:checked ~ span { border-color: var(--sky); background: var(--sky); }

.cof-radio input:checked ~ span::after { content: ''; width: 5px; height: 5px; border-radius: 50%; background: #fff; }

.cof-chk {
  display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--txt2);
  cursor: pointer; padding: 3px 0;
}

.cof-chk input { display: none; }

.cof-chk span {
  width: 14px; height: 14px; border-radius: 4px; border: 2px solid var(--border);
  flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  transition: all var(--t);
}

.cof-chk input:checked ~ span { border-color: var(--sky); background: var(--sky); }

.cof-chk input:checked ~ span::after { content: '✓'; font-size: 9px; color: #fff; font-weight: 800; }

/* ═══ Виджет курса валют ═══ */

/* ── Градиентная шапка панели (Каталог / Статистика / Курс валют) ── */

.phg-panel { padding: 0; overflow: hidden; }

.phg {
  display: flex; align-items: center; justify-content: space-between;
  padding: 11px 14px 10px;
  background: linear-gradient(135deg, var(--sky-h), var(--sky));
  border-radius: var(--r1) var(--r1) 0 0;
}

.phg-ttl { font-size: 12.5px; font-weight: 700; color: #fff; display: flex; align-items: center; gap: 6px; }

.phg-ttl i { color: var(--sky); font-size: 11px; }

.phg-all { font-size: 10px; color: rgba(255,255,255,.65); display: flex; align-items: center; gap: 4px; transition: color .15s; }

.phg-all:hover { color: #fff; }

.cbr-widget { padding: 0; overflow: hidden; }

.cbr-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 11px 14px 10px;
  background: linear-gradient(135deg,var(--sky-h),var(--sky));
  border-radius: var(--r1) var(--r1) 0 0;
}

.cbr-title { font-size: 12.5px; font-weight: 700; color: #fff; display: flex; align-items: center; gap: 6px; }

.cbr-title i { color: var(--sky); font-size: 11px; }

.cbr-date { font-size: 10px; color: rgba(255,255,255,.6); }

.cbr-rows { display: flex; flex-direction: column; }

.cbr-row {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 14px;
  border-bottom: 1px solid var(--border);
  transition: background var(--t);
}

.cbr-row:last-child { border-bottom: none; }

.cbr-row:hover { background: var(--page); }

.cbr-flag-wrap {
  width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; font-size: 18px;
}

.cbr-info { flex: 1; min-width: 0; }

.cbr-code { display: block; font-size: 13px; font-weight: 700; line-height: 1.2; }

.cbr-name { display: block; font-size: 9.5px; color: var(--txt3); }

.cbr-rate-wrap { text-align: right; flex-shrink: 0; }

.cbr-rate { font-size: 16px; font-weight: 800; color: var(--txt1); letter-spacing: -.3px; }

.cbr-rub  { font-size: 11px; font-weight: 600; color: var(--txt3); margin-left: 2px; }

.cbr-footer {
  display: flex; align-items: center; justify-content: space-between;
  padding: 7px 14px; background: var(--page);
  font-size: 9.5px; color: var(--txt3); gap: 6px;
  border-top: 1px solid var(--border);
}

.cbr-footer i { color: var(--txt3); }

.cbr-src { color: var(--txt3); }

/* ═══════════════════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════════════════ */

.pfooter { background: var(--nb); margin-top: 24px; }

.pfooter-strip {
  background: rgba(255,255,255,.04);
  border-bottom: 1px solid rgba(255,255,255,.07);
  padding: 10px 24px;
}

.pfooter-strip-in { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px 0; }

.pfs-item { display: flex; align-items: center; gap: 7px; font-size: 12px; color: rgba(148,163,184,.8); padding: 4px 16px; }

.pfs-item i { color: var(--sky); font-size: 11px; }

.pfs-dot { width: 3px; height: 3px; border-radius: 50%; background: rgba(148,163,184,.3); flex-shrink: 0; }

.pfooter-main {
  display: grid; grid-template-columns: 2fr 1.2fr 1.2fr 1.4fr;
  gap: 32px; max-width: 1680px; margin: 0 auto;
  padding: 32px 24px 28px;
  border-bottom: 1px solid rgba(255,255,255,.07);
}

.pf-logo-row {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 12px; text-decoration: none;
}

.pf-logo-mark {
  width: 32px; height: 32px; background: var(--sky); border-radius: var(--r2);
  display: flex; align-items: center; justify-content: center;
  font-weight: 900; font-size: 11px; color: #fff; flex-shrink: 0;
}

.pf-logo-name { font-weight: 700; font-size: 15px; color: var(--page); }

.pf-logo-b2b {
  font-size: 9px; font-weight: 800; padding: 1px 6px; border-radius: 4px;
  background: rgba(2,132,199,.4); color: var(--sky); letter-spacing: .05em;
}

.pf-desc { font-size: 12px; color: rgba(148,163,184,.8); line-height: 1.65; margin-bottom: 6px; }

.pf-trust { margin: 10px 0; display: flex; flex-direction: column; gap: 5px; }

.pf-trust-item { display: flex; align-items: center; gap: 7px; font-size: 12px; color: rgba(148,163,184,.85); }

.pf-trust-item .fa-check-circle { color: var(--em); }

.pf-trust-item .fa-lock         { color: var(--sky); }

.pf-trust-item .fa-award        { color: var(--am); }

.pf-social { margin-top: 14px; }

.pf-social-lbl { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: rgba(148,163,184,.5); display: block; margin-bottom: 8px; }

.pf-social-icons { display: flex; gap: 8px; }

.pf-si {
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; color: #fff; transition: transform var(--t), opacity var(--t);
}

.pf-si:hover { transform: scale(1.1); opacity: .9; }

.pf-si-vk { background: var(--sky); }

.pf-si-tg { background: var(--sky); }

.pf-col-h {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; color: rgba(241,245,249,.8);
  margin-bottom: 12px; display: flex; align-items: center; gap: 7px;
}

.pf-col-h i { font-size: 10px; color: var(--sky); }

.pf-col-h-mt { margin-top: 20px; }

.pf-nav { list-style: none; display: flex; flex-direction: column; gap: 1px; }

.pf-nav a {
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px; color: rgba(148,163,184,.8); padding: 4px 0;
  transition: color var(--t); text-decoration: none;
}

.pf-nav a:hover { color: var(--sky); }

.pf-nav a i { font-size: 10px; color: rgba(148,163,184,.4); width: 14px; text-align: center; flex-shrink: 0; }

.pf-contacts { display: flex; flex-direction: column; gap: 6px; }

.pf-cc {
  display: flex; align-items: center; gap: 10px;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07);
  border-radius: var(--r2); padding: 8px 11px; text-decoration: none;
  transition: background var(--t), border-color var(--t);
}

.pf-cc:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.14); }

.pf-cc-ic {
  width: 32px; height: 32px; border-radius: var(--r2); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; color: #fff;
}

.pf-cc-green  { background: linear-gradient(135deg,var(--em),var(--em)); }

.pf-cc-teal   { background: linear-gradient(135deg,var(--sky),var(--sky-h)); }

.pf-cc-blue   { background: linear-gradient(135deg,var(--sky),var(--sky-h)); }

.pf-cc-purple { background: linear-gradient(135deg,var(--vio),var(--vio)); }

.pf-cc-amber  { background: linear-gradient(135deg,var(--am),var(--am)); }

.pf-cc-body { flex: 1; min-width: 0; }

.pf-cc-body span   { display: block; font-size: 9.5px; color: rgba(148,163,184,.55); margin-bottom: 1px; }

.pf-cc-body strong { display: block; font-size: 12px; color: var(--border); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.pfooter-bot {
  max-width: 1680px; margin: 0 auto; padding: 14px 24px;
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 8px;
}

.pfooter-bot-left { display: flex; flex-direction: column; gap: 3px; }

.pf-copy { font-size: 11.5px; color: rgba(148,163,184,.5); }

.pf-req  { font-size: 11px;   color: rgba(148,163,184,.35); }

.pfooter-bot-right { display: flex; align-items: center; gap: 10px; }

.pf-pay-lbl { font-size: 11px; color: rgba(148,163,184,.4); }

.pf-pay-logo { opacity: .85; transition: opacity var(--t); }

.pf-pay-logo:hover { opacity: 1; }

/* ═══════════════════════════════════════════════════════════════
   ЖИВАЯ ЛЕНТА — FEED GRID (tab=all)
   Masonry-style mixed-size cards with type ribbons
   ═══════════════════════════════════════════════════════════════ */

/* --- Feed: CSS-columns masonry (true Pinterest layout) --- */

.c-grid--feed {
  display: block !important;
  column-count: 3;
  column-gap: 14px;
}

.c-grid--feed .gc-loader,
.c-grid--feed .gc-done {
  column-span: all;
}

/* --- Type Ribbon (top-left label) --- */

.gf-ribbon {
  position: absolute; top: 12px; left: -6px; z-index: 4;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 12px 4px 10px;
  font-size: 11px; font-weight: 700; letter-spacing: .02em;
  color: #fff; border-radius: 0 6px 6px 0;
  box-shadow: 0 2px 8px rgba(0,0,0,.18);
  line-height: 1;
  text-transform: uppercase;
}

.gf-ribbon i { font-size: 10px; }

.gf-ribbon::before {
  content: ''; position: absolute; left: 0; bottom: -6px;
  border: 3px solid transparent;
}

.gf-rb-co  { background: linear-gradient(135deg, var(--em), var(--em)); }

.gf-rb-co::before  { border-right-color: var(--em); border-top-color: var(--em); }

.gf-rb-off { background: linear-gradient(135deg, var(--am), var(--am)); }

.gf-rb-off::before { border-right-color: var(--am); border-top-color: var(--am); }

.gf-rb-vac { background: linear-gradient(135deg, var(--vio), var(--vio)); }

.gf-rb-vac::before { border-right-color: var(--vio); border-top-color: var(--vio); }

.gf-rb-tnd { background: linear-gradient(135deg, var(--ind), var(--ind)); }

.gf-rb-tnd::before { border-right-color: var(--ind); border-top-color: var(--ind); }

.gf-rb-proc{ background: linear-gradient(135deg, var(--sky), var(--sky)); }

.gf-rb-proc::before{ border-right-color: var(--sky-h); border-top-color: var(--sky-h); }

.gf-rb-nws { background: linear-gradient(135deg, var(--teal), var(--teal)); }

.gf-rb-nws::before { border-right-color: var(--teal); border-top-color: var(--teal); }

.gf-rb-pr  { background: linear-gradient(135deg, var(--rose), var(--rose)); }

.gf-rb-pr::before  { border-right-color: var(--rose); border-top-color: var(--rose); }

.gf-card {
  position: relative;
  break-inside: avoid;
  margin-bottom: 14px;
  display: inline-block;
  width: 100%;
}

.gf-card .gc {
  aspect-ratio: unset;
}

.gf-card .gc-co-card {
  height: auto;
}

/* No truncation in feed — show full content */

.gf-card .gc-card-desc span,
.gf-card .gc-co-okved span {
  -webkit-line-clamp: unset;
  display: inline;
  overflow: visible;
}

/* colored left accent border per type */

.gf-card--co  .gc-co-card { border-left: 3px solid var(--em); }

.gf-card--off .gc-co-card { border-left: 3px solid var(--am); }

.gf-card--vac .gc-co-card { border-left: 3px solid var(--vio); }

.gf-card--tnd .gc-co-card { border-left: 3px solid var(--ind); }

.gf-card--proc .gc-co-card{ border-left: 3px solid var(--sky); }

.gf-card--nws .gc-co-card { border-left: 3px solid var(--teal); }

.gf-card--pr  .gc-co-card { border-left: 3px solid var(--rose); }

.gf-card .gc-co-prem { border-left-color: var(--am) !important; }

/* --- Featured cards — highlighted border --- */

.gf-card--wide .gc-co-card {
  border-width: 2px;
  border-color: var(--am);
  box-shadow: 0 4px 16px rgba(251,191,36,.15);
}

/* --- Tall cards (news / press with images) --- */

.gf-card--hero .gc-co-card {
  min-height: 280px;
}

.gf-card--hero .gf-hero-img {
  width: 100%; height: 160px; overflow: hidden;
  border-radius: var(--r1) var(--r1) 0 0;
  background: linear-gradient(135deg, var(--border), var(--page));
}

.gf-card--hero .gf-hero-img img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .3s;
}

.gf-card--hero:hover .gf-hero-img img {
  transform: scale(1.04);
}

.gf-card--off .gf-off-img {
  width: 100%; height: 140px; overflow: hidden;
  background: linear-gradient(135deg, var(--status-warning-light), var(--card)beb);
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--r1) var(--r1) 0 0;
}

.gf-card--off .gf-off-img img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .3s;
}

.gf-card--off:hover .gf-off-img img { transform: scale(1.04); }

.gf-card--off .gf-off-img .gf-off-ico {
  font-size: 32px; color: var(--am); opacity: .4;
}

.gf-card--vac .gc-co-top {
  background: linear-gradient(135deg, var(--sky-ll) 0%, var(--card) 60%);
}

.gf-card--tnd .gc-co-top {
  background: linear-gradient(135deg, var(--sky-ll) 0%, var(--card) 60%);
}

.gf-card--proc .gc-co-top {
  background: linear-gradient(135deg, var(--sky-ll) 0%, var(--card) 60%);
}

/* --- Compact stat pills for feed --- */

.gf-stats {
  display: flex; flex-wrap: wrap; gap: 4px;
  padding: 0 14px 10px;
}

.gf-pill {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 2px 8px; border-radius: var(--r2);
  font-size: 10.5px; font-weight: 600;
  background: var(--page); color: var(--txt2);
}

.gf-pill i { font-size: 9px; }

.gf-pill--green { background: var(--status-success-light); color: var(--em); }

.gf-pill--amber { background: var(--card)beb; color: var(--am); }

.gf-pill--red   { background: var(--status-error-light); color: var(--rose); }

.gf-pill--blue  { background: var(--sky-ll); color: var(--sky); }

/* --- Feed card hover glow per type --- */

.gf-card--co:hover  .gc-co-card { border-color: var(--status-success-light); box-shadow: 0 8px 24px rgba(16,185,129,.12); }

.gf-card--off:hover .gc-co-card { border-color: var(--status-warning-light); box-shadow: 0 8px 24px rgba(245,158,11,.12); }

.gf-card--vac:hover .gc-co-card { border-color: var(--vio); box-shadow: 0 8px 24px rgba(139,92,246,.12); }

.gf-card--tnd:hover .gc-co-card { border-color: var(--ind); box-shadow: 0 8px 24px rgba(99,102,241,.12); }

.gf-card--proc:hover .gc-co-card{ border-color: var(--sky-l); box-shadow: 0 8px 24px rgba(56,189,248,.12); }

.gf-card--nws:hover .gc-co-card { border-color: var(--teal); box-shadow: 0 8px 24px rgba(34,211,238,.12); }

.gf-card--pr:hover  .gc-co-card { border-color: var(--status-error-light); box-shadow: 0 8px 24px rgba(251,113,133,.12); }

/* ═══════════════════════════════════════════════════════════════
   MOBILE
   ═══════════════════════════════════════════════════════════════ */

.p-mob-toggle { display: none; }

.pnav-mob { display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 500; background: var(--nb); border-top: 1px solid rgba(255,255,255,.1); flex; padding: 4px 0 env(safe-area-inset-bottom,0); }

.city-drop { position: absolute; top: 100%; left: 0; min-width: 180px; background: var(--card); border: 1px solid var(--border); border-radius: var(--r2); box-shadow: var(--s3); z-index: 600; display: none; max-height: 220px; overflow-y: auto; }

.city-opt { padding: 8px 12px; font-size: 13px; cursor: pointer; color: var(--txt2); }

.city-opt:hover { background: var(--sky-ll); color: var(--sky); }

@media(max-width:1400px) {

  .c-stats{grid-template-columns:repeat(4,1fr)}

  .c-grid{grid-template-columns:repeat(3,1fr)}

  .c-grid--co{grid-template-columns:repeat(2,1fr)}

  .c-grid--feed{column-count:2!important}

}

@media(max-width:1200px) {

  :root{--lw:220px;--rw:240px}

  .c-stats{grid-template-columns:repeat(4,1fr)}

  .pfooter-main{grid-template-columns:1fr 1fr;gap:24px}

  .pnav-desc{display:none}

}

@media(max-width:1050px) {

  .pcol-r{display:none}

  .c-stats{grid-template-columns:repeat(3,1fr)}

  .pnav-info .pnav-info-lnk:last-of-type{display:none}

  .dzen-tab { font-size: 12px; padding: 8px 3px; }

}

@media(max-width:860px) {

  .pcol-l{display:none}

  .pcols{padding:10px 10px}

  .pnav-menu{display:none}

  .pnav-info{display:none!important}

  .c-stats{grid-template-columns:repeat(3,1fr)}

  .c-grid{grid-template-columns:repeat(2,1fr)}

  .c-grid--feed{column-count:2!important}

  .dzen-tab { font-size: 11px; }

  .dzen-ttl { font-size: 12px; }

  .vd-wrap{grid-template-columns:1fr}

  .vd-aside{position:static}

  .vd-hero-top{flex-direction:column}

  .vd-title{font-size:1.35rem}

}

@media(max-width:560px) {

  .c-stats{grid-template-columns:repeat(2,1fr)}

  .c-grid{grid-template-columns:repeat(2,1fr);gap:7px}

  .c-grid--feed{column-count:1!important}

  .gf-ribbon{font-size:10px;padding:3px 8px 3px 7px}

  .pnav-search{min-width:120px}

  .dzen-tabs { overflow-x: auto; }

  .dzen-tab { flex: 0 0 auto; padding: 7px 8px; font-size: 11px; }

  .dzen-item { padding: 7px 12px; gap: 6px; }

  .dzen-time { display: none; }

  .dzen-src { font-size: 8px; min-width: 32px; }

}

/* ═══════════════════════════════════════════════════════════════
   PORTAL WIDGETS — sidebar & news ticker
   ═══════════════════════════════════════════════════════════════ */

/* ── Dzen-style News Widget ── */

.dzen-news {
  margin-bottom: 12px; border-radius: var(--r1); overflow: hidden;
  background: var(--card); border: 1px solid var(--border);
  box-shadow: 0 1px 4px rgba(0,0,0,.04);
}

.dzen-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px; background: linear-gradient(135deg, var(--txt), var(--txt));
}

.dzen-hd-left { display: flex; align-items: center; gap: 8px; }

.dzen-live-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--rose);
  box-shadow: 0 0 6px var(--rose); animation: livePulse 2s ease-in-out infinite;
}

@keyframes livePulse { 0%,100%{opacity:1;box-shadow:0 0 4px var(--rose)} 50%{opacity:.5;box-shadow:0 0 12px var(--rose)} }

.dzen-hd-title { font-size: 14px; font-weight: 700; color: #fff; letter-spacing: .3px; }

.dzen-hd-right { display: flex; align-items: center; gap: 6px; }

.dzen-updated { font-size: 10px; color: var(--txt3); }

.dzen-tabs {
  display: flex; overflow-x: auto; scrollbar-width: none;
  background: var(--page); border-bottom: 1px solid var(--border);
}

.dzen-tabs::-webkit-scrollbar { display: none; }

.dzen-tab {
  flex: 1; padding: 9px 4px; font-size: 13px; font-weight: 500; color: var(--txt3);
  background: none; border: none; cursor: pointer; white-space: nowrap;
  border-bottom: 2px solid transparent; transition: all .15s;
  text-align: center;
}

.dzen-tab:hover { color: var(--txt); background: var(--page); }

.dzen-tab.on { color: var(--sky); border-bottom-color: var(--sky); font-weight: 700; background: var(--card); }

.dzen-list { display: flex; flex-direction: column; min-height: 60px; }

.dzen-loading { padding: 24px; text-align: center; color: var(--txt3); font-size: 13px; }

.dzen-empty { padding: 24px; text-align: center; color: var(--txt3); font-size: 13px; }

.dzen-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 16px; text-decoration: none; color: var(--txt);
  border-bottom: 1px solid var(--page); transition: all .12s;
  animation: dzenFadeIn .3s ease;
}

@keyframes dzenFadeIn { from{opacity:0;transform:translateY(-4px)} to{opacity:1;transform:none} }

.dzen-item:last-child { border-bottom: none; }

.dzen-item:hover { background: var(--sky-ll); padding-left: 20px; }

.dzen-src {
  flex-shrink: 0; font-size: 9px; font-weight: 700; padding: 2px 6px;
  border-radius: 4px; color: #fff; min-width: 42px; text-align: center;
  letter-spacing: .2px; text-transform: uppercase;
}

.dzen-ttl {
  flex: 1; font-size: 13px; line-height: 1.4; color: var(--txt);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.dzen-item:hover .dzen-ttl { color: var(--sky); }

.dzen-time {
  flex-shrink: 0; font-size: 10px; color: var(--txt3); font-variant-numeric: tabular-nums;
  background: var(--page); padding: 2px 6px; border-radius: 4px;
}

.dzen-more {
  display: block; width: 100%; padding: 10px; text-align: center;
  font-size: 13px; font-weight: 600; color: var(--sky); cursor: pointer;
  background: linear-gradient(0deg, var(--sky-ll), var(--card)); border: none;
  border-top: 1px solid var(--border); transition: all .15s;
}

.dzen-more:hover { background: var(--sky-ll); letter-spacing: .3px; }

.dzen-more i { font-size: 10px; margin-right: 4px; transition: transform .2s; }

.dzen-more:hover i { transform: translateY(2px); }

/* ── Deadlines Widget ── */

.w-dead-list { display: flex; flex-direction: column; }

.w-dead-item {
  display: block; padding: 10px 14px; text-decoration: none; color: var(--txt);
  border-bottom: 1px solid var(--border); transition: background .15s;
}

.w-dead-item:last-child { border-bottom: none; }

.w-dead-item:hover { background: var(--sky-ll); }

.w-dead-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }

.w-dead-type { font-size: 10px; font-weight: 600; color: var(--txt3); text-transform: uppercase; letter-spacing: .3px; }

.w-dead-type i { margin-right: 3px; }

.w-dead-days {
  font-size: 10px; font-weight: 700; padding: 2px 6px; border-radius: var(--r2);
}

.w-dead-red    { background: var(--status-error-light); color: var(--rose); }

.w-dead-orange { background: var(--card)beb; color: var(--am); }

.w-dead-green  { background: var(--status-success-light); color: var(--em); }

.w-dead-ttl { font-size: 12px; font-weight: 600; color: var(--txt); line-height: 1.35; margin-bottom: 3px; }

.w-dead-budget { font-size: 11px; font-weight: 700; color: var(--sky); margin-bottom: 2px; }

.w-dead-co { font-size: 10px; color: var(--txt3); }

/* ── New Companies Widget ── */

.w-org-list { display: flex; flex-direction: column; }

.w-org-item {
  display: flex; align-items: center; gap: 10px; padding: 8px 14px;
  text-decoration: none; color: var(--txt);
  border-bottom: 1px solid var(--border); transition: background .15s;
}

.w-org-item:last-child { border-bottom: none; }

.w-org-item:hover { background: var(--sky-ll); }

.w-org-av {
  width: 34px; height: 34px; border-radius: var(--r2); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; color: #fff; overflow: hidden;
}

.w-org-av-img { background: var(--page); }

.w-org-av-img img { width: 100%; height: 100%; object-fit: contain; }

.w-org-av-com { background: linear-gradient(135deg, var(--sky), var(--teal)); }

.w-org-av-gov { background: linear-gradient(135deg, var(--vio), var(--vio)); }

.w-org-info { flex: 1; min-width: 0; }

.w-org-nm { font-size: 12px; font-weight: 600; color: var(--txt); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.w-org-meta { font-size: 10px; color: var(--txt3); display: flex; align-items: center; gap: 6px; }

.w-org-meta i { font-size: 9px; color: var(--sky); }

.w-org-dt { margin-left: auto; }

/* ── Categories Tag Cloud ── */

.w-cat-cloud { padding: 10px 12px; display: flex; flex-wrap: wrap; gap: 4px; }

.w-cat-tag {
  display: inline-block; padding: 3px 7px; border-radius: var(--r2);
  background: var(--page); color: var(--txt2); text-decoration: none;
  font-size: 11px; font-weight: 500; transition: all .15s; line-height: 1.3;
  word-break: break-word; white-space: normal;
}

.w-cat-tag:hover { background: var(--sky); color: #fff; }

.w-cat-tag sup { font-size: 9px; color: var(--sky); margin-left: 2px; vertical-align: super; }

.w-cat-tag:hover sup { color: rgba(255,255,255,.7); }

/* ── Top Vacancies Widget ── */

.w-vac-list { display: flex; flex-direction: column; }

.w-vac-item {
  display: block; padding: 10px 14px; text-decoration: none;
  border-bottom: 1px solid var(--border); transition: background .15s;
}

.w-vac-item:last-child { border-bottom: none; }

.w-vac-item:hover { background: var(--sky-ll); }

.w-vac-sal {
  font-size: 13px; font-weight: 700; color: var(--em); margin-bottom: 2px;
}

.w-vac-ttl { font-size: 12px; font-weight: 600; color: var(--txt); line-height: 1.3; margin-bottom: 2px; }

.w-vac-co { font-size: 10px; color: var(--txt3); }

/* ── Geography Widget ── */

.w-geo-list { padding: 10px 14px; display: flex; flex-direction: column; gap: 8px; }

.w-geo-row { display: grid; grid-template-columns: 1fr auto; gap: 4px 8px; align-items: center; }

.w-geo-city { font-size: 12px; color: var(--txt); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.w-geo-cnt { font-size: 11px; font-weight: 700; color: var(--sky); text-align: right; }

.w-geo-bar { grid-column: 1 / -1; height: 4px; background: var(--page); border-radius: 2px; overflow: hidden; }

.w-geo-fill { height: 100%; background: linear-gradient(90deg, var(--sky), var(--teal)); border-radius: 2px; transition: width .5s ease; }

/* ── Responsive for widgets ── */

/* ==================== ADMIN DASHBOARD - MODERN DESIGN ==================== */

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes shimmer {
    0% {
        background-position: -1000px 0;
    }
    100% {
        background-position: 1000px 0;
    }
}

.admin-dashboard::before {
    display: none;
}

/* ==================== SIDEBAR ==================== */

.sidebar-link .badge {
    margin-left: auto;
    background: var(--neutral-gray-light);
    color: var(--neutral-gray);
    padding: 3px 10px;
    border-radius: var(--r1);
    font-size: 12px;
    font-weight: 700;
    transition: all 0.3s ease;
}

.sidebar-link .badge-warning {
    background: linear-gradient(135deg, var(--am) 0%, var(--am) 100%);
    color: white;
}

/* ==================== MAIN CONTENT ==================== */

.header-left h1 {
    font-size: 28px;
    font-weight: 800;
    color: #fff;
    -webkit-text-fill-color: #fff;
    background: none;
    -webkit-background-clip: unset;
    background-clip: unset;
    margin-bottom: 6px;
    font-family: var(--font-heading);
    letter-spacing: -.3px;
}

.header-left p {
    font-size: 14px;
    color: rgba(255,255,255,.75);
}

/* ==================== STATS GRID ==================== */

.stat-card-primary {
    border-color: var(--sky);
    background: linear-gradient(135deg, var(--sky-ll) 0%, var(--sky-ll) 100%);
}

.stat-card-primary .stat-value {
    color: var(--sky-h);
}

.stat-card-primary .stat-label {
    color: var(--sky-h);
}

.stat-card-success {
    border-color: var(--em);
    background: linear-gradient(135deg, var(--status-success-light) 0%, var(--sky-l) 100%);
}

.stat-card-success .stat-value {
    color: var(--em);
}

.stat-card-success .stat-label {
    color: var(--em);
}

.stat-card-warning {
    border-color: var(--am);
    background: linear-gradient(135deg, var(--card)beb 0%, var(--status-warning-light) 100%);
}

.stat-card-warning .stat-value {
    color: var(--am);
}

.stat-card-warning .stat-label {
    color: var(--am);
}

.stat-card-info {
    border-color: var(--sky);
    background: linear-gradient(135deg, var(--sky-ll) 0%, var(--sky-l) 100%);
}

.stat-card-info .stat-value {
    color: var(--sky);
}

.stat-card-info .stat-label {
    color: var(--sky-h);
}

.stat-card-danger {
    border-color: var(--rose);
    background: linear-gradient(135deg, var(--status-error-light) 0%, var(--status-error-light) 100%);
}

.stat-card-danger .stat-value {
    color: var(--rose);
}

.stat-card-danger .stat-label {
    color: var(--rose);
}

/* ==================== CHARTS ROW ==================== */

/* ==================== ACTIVITY SECTION ==================== */

.link-primary {
    color: var(--primary-teal);
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
}

.link-primary:hover {
    color: var(--accent-blue);
    gap: 12px;
}

/* ==================== ACTIVITY TABLE ==================== */

.activity-table tbody tr::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(135deg, var(--sky) 0%, var(--sky-h) 100%);
    border-radius: var(--r1) 0 0 12px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.activity-table tbody tr:hover::before {
    opacity: 1;
}

/* ==================== QUICK ACTIONS ==================== */

.actions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

.action-card:hover h3 {
    color: var(--sky);
}

/* ==================== RESPONSIVE ==================== */

@media (max-width: 1400px) {

  .charts-row {
        grid-template-columns: 1fr;
    }

  .module-stats-grid { grid-template-columns: repeat(3, 1fr); }

}

@media (max-width: 1024px) {

  .stats-grid   { grid-template-columns: 1fr 1fr; }

  .ticket-info {
        gap: 16px;
    }

  .info-item {
        flex: 1 1 calc(50% - 16px);
        min-width: 200px;
    }

  .messages-box {
        max-height: 500px;
    }

  .msg {
        gap: 12px;
        margin-bottom: 20px;
    }

  .msg-avatar {
        width: 40px;
        height: 40px;
        font-size: 18px;
    }

  .msg-content {
        padding: 12px;
    }

  .form-card {
        padding: 20px;
    }

  .layout-2col {
        flex-direction: column;
    }

  .col-side {
        width: 100%;
    }

  .user-dashboard {
        flex-direction: column;
    }

  .top-modules-grid {
        grid-template-columns: 1fr;
    }

  .bonus-banner { grid-template-columns: 1fr 1fr; }

  .content-layout {
        grid-template-columns: 1fr;
    }

  .meta-sidebar {
        order: 2;
    }

  .main-content {
        order: 1;
    }

  .offers-hero h1 { font-size: 2.75rem; }

  .offers-page-body { grid-template-columns: 240px 1fr; gap: 20px; }

  .offer-detail__layout { grid-template-columns: 1fr 290px; }

  .qcard-body { grid-template-columns: 1fr; }

  .companies-hero h1 {
        font-size: 2.5rem;
        letter-spacing: -1px;
    }

  .companies-hero h1::after {
        width: 60px;
        height: 4px;
    }

  .companies-hero p {
        font-size: 1rem;
        margin-top: 20px;
    }

  .search-form input[type="text"]:first-child {
        flex: 1 1 100%;
    }

  .search-form input[type="text"]:nth-child(2),
    .search-form input[type="text"]:nth-child(3) {
        flex: 1 1 calc(50% - 5px);
        min-width: 150px;
    }

  .search-form select {
        flex: 1 1 calc(50% - 5px);
        min-width: 150px;
    }

  .search-form button {
        flex: 0 0 auto;
    }

  .company-item-logo {
        width: 120px;
        height: 120px;
        padding: 15px;
    }

  .company-item-logo-placeholder {
        font-size: 48px;
    }

  .company-item-name {
        font-size: 17px;
    }

  .badge {
        font-size: 8px;
        padding: 3px 7px;
    }

  .badge i {
        font-size: 8px;
    }

  .pagination-numbers {
        gap: 3px;
    }

  .pagination-link {
        min-width: 38px;
        height: 38px;
        font-size: 13px;
    }

  .pagination-btn {
        padding: 10px 18px;
        font-size: 13px;
    }

  .related-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }

  .nd-layout { grid-template-columns: 1fr 280px; gap: 24px; }

  .nd-header, .nd-content, .nd-share { padding-left: 32px; padding-right: 32px; }

  .org-card-grid {
        grid-template-columns: 1fr;
    }

}

@media (max-width: 768px) {

  .dashboard-container { padding: 12px; }

  .dashboard-header {
        flex-direction: column;
        gap: 12px;
        margin-bottom: 16px;
    }

  .dashboard-header h1 {
        font-size: 22px;
    }

  .dashboard-header p {
        font-size: 13px;
    }

  .dashboard-header .header-left {
        max-width: 100%;
    }

  .dashboard-header .header-right {
        width: 100%;
        margin-left: 0;
        justify-content: stretch;
    }

  .dashboard-header .header-right .btn {
        width: 100%;
        justify-content: center;
        padding: 10px 16px;
        font-size: 13px;
    }

  .dashboard-header .header-right select {
        width: 100%;
        font-size: 13px;
    }

  .dashboard-header .header-right .per-page-selector {
        width: 100%;
        justify-content: space-between;
    }

  .dashboard-header .header-right .per-page-selector select {
        flex: 1;
        max-width: 120px;
    }

  .stats-grid    { grid-template-columns: 1fr; }

  .actions-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

  .dashboard-card {
        overflow: hidden;
    }

  .dashboard-card > div {
        padding: 20px;
    }

  .dashboard-card h3 {
        font-size: 17px;
    }

  .ticket-info {
        padding: 20px;
        gap: 16px;
    }

  .info-item {
        min-width: 100%;
        padding: 10px 14px;
    }

  .info-label {
        font-size: 12px;
        white-space: nowrap;
    }

  .badge-category,
    .priority-badge,
    .status-badge {
        justify-self: start;
    }

  .messages-box {
        padding: 20px;
    }

  .msg {
        gap: 12px;
        padding: 16px;
    }

  .msg-avatar {
        width: 44px;
        height: 44px;
        font-size: 18px;
    }

  .msg-content {
        padding: 16px;
    }

  .msg-header {
        flex-direction: column;
        gap: 5px;
        align-items: flex-start;
    }

  .msg-author {
        font-size: 14px;
    }

  .msg-time {
        font-size: 11px;
    }

  .msg-text {
        font-size: 14px;
        line-height: 1.5;
    }

  .msg-att {
        font-size: 12px;
    }

  .msg-att a {
        word-break: break-all;
    }

  .form-card {
        padding: 22px;
    }

  .form-card h3 {
        font-size: 16px;
        margin-bottom: 15px;
    }

  .form-group {
        margin-bottom: 15px;
    }

  .form-group textarea {
        font-size: 14px;
    }

  .form-group label {
        font-size: 13px;
    }

  .file-input-wrapper {
        margin-top: 8px;
    }

  .file-input-label {
        padding: 15px;
        font-size: 13px;
    }

  .form-text {
        font-size: 11px;
    }

  .form-actions {
        flex-direction: column;
    }

  .form-actions .btn {
        width: 100%;
        justify-content: center;
        padding: 12px 20px;
        font-size: 14px;
    }

  .alert {
        padding: 14px 16px;
        font-size: 14px;
    }

  .activity-log-table thead {
        display: none;
    }

  .activity-log-table tbody tr {
        display: block;
        margin-bottom: 16px;
        border: 2px solid var(--border);
        border-radius: var(--r2);
        background: var(--card);
        box-shadow: 0 1px 3px rgba(0,0,0,0.05);
        overflow: hidden;
    }

  .activity-log-table tbody td {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        padding: 12px 16px !important;
        border-bottom: 1px solid var(--page);
        text-align: left !important;
        min-height: auto;
        width: 100%;
        box-sizing: border-box;
    }

  .activity-log-table tbody td:last-child {
        border-bottom: none;
    }

  .activity-log-table tbody td::before {
        content: attr(data-label);
        font-weight: 600;
        color: var(--txt2);
        margin-right: 12px;
        flex: 0 0 40%;
        text-align: left;
    }

  .activity-log-table code {
        font-size: 11px;
        word-break: break-all;
    }

  .activity-table {
        font-size: 12px;
        min-width: 100%;
    }

  .activity-table tbody td {
        padding: 10px 8px;
    }

  .sidebar-link {
        flex: 1 1 100%;
    }

  .ticket-info::before {
        height: 3px;
    }

  .info-box {
        padding: 20px;
    }

  .col-side {
        width: 100%;
    }

  .welcome-card {
        padding: 20px;
        border-radius: 15px;
    }

  .welcome-actions {
        flex-direction: column;
        width: 100%;
    }

  .btn {
        width: 100%;
        justify-content: center;
    }

  .dashboard-grid {
        grid-template-columns: 1fr;
    }

  .tariffs-modal-grid {
        grid-template-columns: 1fr;
    }

  .dashboard-card table.data-table,
    .activity-table table {
        border-spacing: 0;
        display: block;
        width: 100%;
    }

  .dashboard-card table.data-table thead,
    .activity-table table thead {
        display: none;
    }

  .dashboard-card table.data-table tbody,
    .activity-table table tbody {
        display: block;
        width: 100%;
    }

  .dashboard-card table.data-table tbody tr,
    .activity-table table tbody tr {
        display: block;
        margin-bottom: 15px;
        border: 1px solid rgba(2, 132, 199, 0.1);
        border-radius: var(--r1);
        padding: 15px;
        background: var(--card);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    }

  .dashboard-card table.data-table tbody tr:hover,
    .activity-table table tbody tr:hover {
        transform: none;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    }

  .dashboard-card table.data-table tbody td,
    .activity-table table tbody td {
        display: block;
        padding: 12px 0;
        border: none !important;
        border-radius: 0 !important;
        border-bottom: 1px solid rgba(2, 132, 199, 0.08) !important;
        text-align: left;
        position: relative;
    }

  .dashboard-card table.data-table tbody td:last-child,
    .activity-table table tbody td:last-child {
        border-bottom: none !important;
    }

  .dashboard-card table.data-table tbody td:before,
    .activity-table table tbody td:before {
        content: attr(data-label);
        display: block;
        font-weight: 700;
        color: var(--txt2);
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        margin-bottom: 6px;
    }

  .dashboard-card table.data-table tbody td > span,
    .dashboard-card table.data-table tbody td > a,
    .activity-table table tbody td > span,
    .activity-table table tbody td > a {
        display: block;
        font-size: 14px;
        line-height: 1.5;
        color: var(--txt);
    }

  .dashboard-card table.data-table tbody td > a,
    .activity-table table tbody td > a {
        color: var(--sky) !important;
        font-weight: 500;
    }

  .dashboard-card table.data-table tbody td span[style*="background"],
    .activity-table table tbody td span[style*="background"] {
        display: inline-block;
        margin-top: 2px;
    }

  .dashboard-card table.data-table tbody td .badge,
    .activity-table table tbody td .badge {
        display: inline-block;
        margin-top: 2px;
    }

  .welcome-card-content {
        flex-direction: column;
        gap: 15px;
        align-items: flex-start;
    }

  .welcome-card-icon {
        width: 50px;
        height: 50px;
        font-size: 24px;
    }

  .welcome-card-info h2 {
        font-size: 18px;
    }

  .welcome-card-details {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 8px !important;
    }

  .welcome-card-details span {
        font-size: 12px;
    }

  .welcome-card-points {
        width: 100%;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }

  .points-value {
        font-size: 24px;
    }

  .points-label {
        font-size: 12px;
    }

  .stats-grid.stats-grid-6 {
        grid-template-columns: repeat(3, 1fr);
    }

  .stat-card {
        padding: 12px;
    }

  .stat-icon {
        width: 40px;
        height: 40px;
        font-size: 18px;
    }

  .stat-icon i {
        font-size: 20px !important;
    }

  .stat-content {
        flex: 1;
        min-width: 0;
        overflow: hidden;
    }

  .stat-label {
        font-size: 11px;
        word-break: break-word;
    }

  .stat-value {
        font-size: 20px;
    }

  .stat-trend {
        font-size: 11px;
    }

  .action-btn {
        padding: 15px;
    }

  .action-btn-icon {
        width: 45px;
        height: 45px;
        font-size: 20px;
    }

  .action-btn-title {
        font-size: 14px;
    }

  .action-btn-desc {
        font-size: 11px;
    }

  .dashboard-tabs {
        margin: 20px 0;
    }

  .tab-buttons {
        flex-wrap: wrap;
        gap: 8px;
    }

  .tab-button {
        padding: 10px 15px;
        font-size: 12px;
        flex: 1 1 calc(50% - 4px);
        min-width: auto;
    }

  .tab-button i {
        display: none;
    }

  .status-badge,
    .priority-badge {
        font-size: 10px;
        padding: 4px 8px;
    }

  .dashboard-section {
        margin-bottom: 20px;
    }

  .section-header {
        font-size: 18px;
    }

  .section-header h2 {
        font-size: 18px;
    }

  .section-title {
        font-size: 18px;
    }

  .section-description {
        font-size: 12px;
    }

  .view-all-link {
        font-size: 13px;
    }

  .content-card {
        padding: 15px;
        border-radius: var(--r1);
    }

  .points-display {
        flex-direction: column;
        gap: 12px;
    }

  .points-main {
        font-size: 32px;
    }

  .points-stats {
        width: 100%;
    }

  .filters-box {
        padding: 16px;
    }

  .filters-box > div:first-child {
        margin-bottom: 16px;
    }

  .filters-box > div:first-child label {
        font-size: 12px;
        margin-bottom: 8px;
    }

  .filters-box > div:first-child > div {
        flex-direction: column;
        gap: 8px;
    }

  .filters-box > div:first-child .btn {
        width: 100%;
        justify-content: center;
        font-size: 13px;
        padding: 10px 16px;
    }

  .filters-row {
        grid-template-columns: 1fr;
        gap: 12px;
        margin-bottom: 16px;
    }

  .filter-group label {
        font-size: 12px;
    }

  .filter-group input,
    .filter-group select {
        font-size: 14px;
        padding: 10px 12px;
    }

  .filter-group {
        gap: 6px;
    }

  .filter-group .btn {
        width: 100%;
        justify-content: center;
        padding: 10px 16px;
        font-size: 13px;
    }

  .dashboard-card > div:first-child {
        padding: 14px 16px !important;
        flex-direction: column;
        gap: 12px;
        align-items: flex-start !important;
    }

  .dashboard-card h2 {
        font-size: 16px !important;
    }

  .dashboard-card p {
        font-size: 12px !important;
    }

  .per-page-selector {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 12px;
    }

  .per-page-selector select {
        padding: 6px 10px;
        font-size: 12px;
    }

  .dashboard-card > div:not([class]) {
        padding: 40px 20px !important;
    }

  .dashboard-card > div:not([class]) i {
        font-size: 48px !important;
        margin-bottom: 16px !important;
    }

  .dashboard-card > div:not([class]) h3 {
        font-size: 16px !important;
        margin-bottom: 8px !important;
    }

  .dashboard-card > div:not([class]) p {
        font-size: 13px !important;
        margin-bottom: 20px !important;
    }

  .table-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

  .data-table {
        min-width: 600px;
        font-size: 11px;
    }

  .data-table thead {
        display: none;
    }

  .data-table tbody {
        display: block;
    }

  .data-table tbody tr {
        display: block;
        margin-bottom: 16px;
        border: 2px solid rgba(2, 132, 199, 0.15);
        border-radius: var(--r1);
        padding: 14px;
        background: var(--card);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    }

  .data-table tbody td {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 12px 0;
        border: none !important;
        border-bottom: 1px solid rgba(2, 132, 199, 0.08) !important;
        text-align: center !important;
    }

  .data-table tbody td:last-child {
        border-bottom: none !important;
        padding-bottom: 0;
    }

  .data-table tbody td:before {
        content: attr(data-label);
        font-weight: 700;
        color: var(--txt2);
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        margin-bottom: 8px;
        display: block;
        text-align: center;
    }

  .data-table tbody td:nth-child(1) {
        display: none;
    }

  .data-table tbody td:nth-child(2) {
        padding: 0 0 12px 0 !important;
        border-bottom: 2px solid rgba(2, 132, 199, 0.15) !important;
    }

  .data-table tbody td:nth-child(2) i {
        color: var(--sky);
        font-size: 16px;
        margin-bottom: 6px;
        display: block;
    }

  .data-table tbody td:nth-child(2) .company-link,
    .data-table tbody td:nth-child(2) strong {
        font-weight: 700;
        color: var(--sky);
        font-size: 15px;
        text-decoration: none;
        display: block;
        text-align: center;
    }

  .data-table tbody td:nth-child(2) .company-link:hover {
        color: var(--sky-h);
    }

  .data-table tbody td:nth-child(3) {
        padding: 14px 0 !important;
        border-bottom: 1px solid rgba(2, 132, 199, 0.1) !important;
    }

  .data-table tbody td:nth-child(3) .table-link {
        font-weight: 600;
        color: var(--sky);
        font-size: 15px;
        line-height: 1.5;
        text-decoration: none;
        display: block;
        text-align: center;
    }

  .data-table tbody td:nth-child(3) .table-link:hover {
        color: var(--sky-h);
    }

  .data-table tbody td:nth-child(4) {
        padding: 12px 0 !important;
        border-bottom: 1px solid rgba(2, 132, 199, 0.1) !important;
    }

  .data-table tbody td:nth-child(5) {
        padding: 12px 0 !important;
        border-bottom: 1px solid rgba(2, 132, 199, 0.1) !important;
        color: var(--txt);
        font-weight: 600;
        font-size: 14px;
    }

  .data-table tbody td:nth-child(5) strong {
        font-weight: 800;
        color: var(--em);
        font-size: 18px;
        display: block;
        text-align: center;
    }

  .data-table tbody td:nth-child(6) {
        padding: 12px 0 0 !important;
        border-bottom: none !important;
        color: var(--txt3);
        font-weight: 600;
        font-size: 14px;
    }

  .data-table tbody td:nth-child(7) {
        padding: 12px 0 !important;
        border-bottom: 1px solid rgba(2, 132, 199, 0.1) !important;
    }

  .data-table tbody td:nth-child(7) .badge {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 8px 14px;
        border-radius: var(--r2);
        font-size: 13px;
        font-weight: 700;
    }

  .data-table .badge-primary {
        background: rgba(99, 102, 241, 0.15);
        color: var(--ind);
    }

  .data-table .badge-info {
        background: rgba(6, 182, 212, 0.15);
        color: var(--teal);
    }

  .data-table .badge-success {
        background: rgba(16, 185, 129, 0.15);
        color: var(--em);
    }

  .data-table .badge-danger {
        background: rgba(239, 68, 68, 0.15);
        color: var(--rose);
    }

  .data-table .badge-warning {
        background: rgba(245, 158, 11, 0.15);
        color: var(--am);
    }

  .data-table .badge i {
        font-size: 12px;
    }

  .data-table tbody td i {
        color: var(--sky);
    }

  .data-table .status-badge.status-open {
        background: var(--sky-l);
        color: var(--em);
    }

  .data-table .status-badge.status-closed {
        background: var(--border);
        color: var(--txt3);
    }

  .data-table .status-badge.status-cancelled {
        background: var(--status-error-light);
        color: var(--rose);
    }

  .data-table tbody td:last-child:before {
        display: none;
    }

  .data-table .action-buttons {
        display: flex;
        gap: 8px;
        width: 100%;
        flex-wrap: wrap;
    }

  .data-table .btn,
    .data-table .btn-icon,
    .data-table .btn-primary,
    .data-table .btn-secondary,
    .data-table .btn-danger {
        flex: 1;
        min-width: calc(50% - 4px);
        padding: 10px 12px;
        border-radius: var(--r2);
        text-align: center;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        gap: 6px;
        font-size: 13px;
        font-weight: 600;
        transition: all 0.2s;
        text-decoration: none;
        border: none;
        cursor: pointer;
    }

  .data-table .btn-icon {
        background: rgba(2, 132, 199, 0.15) !important;
        color: var(--sky) !important;
        border: 2px solid rgba(2, 132, 199, 0.3) !important;
    }

  .data-table .btn-icon:hover {
        background: var(--sky) !important;
        color: white !important;
        border-color: var(--sky) !important;
    }

  .data-table .btn-icon i {
        color: var(--sky) !important;
        font-size: 14px;
    }

  .data-table .btn-icon:hover i {
        color: white !important;
    }

  .data-table .btn-icon.btn-primary,
    .data-table .btn-primary {
        background: var(--sky) !important;
        color: white !important;
    }

  .data-table .btn-icon.btn-primary:hover,
    .data-table .btn-primary:hover {
        background: var(--sky-h) !important;
        color: white !important;
    }

  .data-table .btn-icon.btn-primary i,
    .data-table .btn-primary i {
        color: white !important;
        font-size: 14px;
    }

  .data-table .btn-secondary {
        background: var(--sky) !important;
        color: #fff !important;
        border: none !important;
    }

  .data-table .btn-secondary:hover {
        background: var(--sky-h) !important;
        color: #fff !important;
    }

  .data-table .btn-secondary i {
        color: #fff !important;
        font-size: 14px;
    }

  .data-table .btn-icon.btn-danger,
    .data-table .btn-danger {
        background: rgba(239, 68, 68, 0.15) !important;
        color: var(--rose) !important;
        border: 2px solid rgba(239, 68, 68, 0.3) !important;
    }

  .data-table .btn-icon.btn-danger:hover,
    .data-table .btn-danger:hover {
        background: var(--rose) !important;
        color: white !important;
        border-color: var(--rose) !important;
    }

  .data-table .btn-icon.btn-danger i,
    .data-table .btn-danger i {
        color: var(--rose) !important;
        font-size: 14px;
    }

  .data-table .btn-icon.btn-danger:hover i,
    .data-table .btn-danger:hover i {
        color: white !important;
    }

  .table-pagination {
        padding: 12px 16px;
        gap: 6px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

  .table-pagination a,
    .table-pagination span {
        padding: 6px 10px;
        font-size: 12px;
        min-width: 32px;
        text-align: center;
    }

  .dashboard-card h3 i {
        font-size: 17px;
    }

  .form-row {
        grid-template-columns: 1fr;
    }

  .save-button-container {
        padding: 20px 16px !important;
        text-align: center;
        flex-direction: column !important;
        gap: 10px !important;
    }

  .save-button-container button,
    .save-button-container .btn {
        width: 100%;
        max-width: 100%;
        min-width: auto;
        padding: 14px 20px;
        font-size: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        box-sizing: border-box;
    }

  .form-group input[type="text"],
    .form-group input[type="email"],
    .form-group input[type="url"],
    .form-group input[type="date"],
    .form-group textarea,
    .form-group select {
        font-size: 16px;
        padding: 12px 14px;
        width: 100%;
        box-sizing: border-box;
    }

  .slug-info-box {
        padding: 14px;
        font-size: 13px;
    }

  .slug-info-box code {
        font-size: 12px;
        word-break: break-all;
    }

  .okved-row,
    .bank-row,
    .contact-row {
        padding: 16px;
        margin-bottom: 12px;
        overflow: hidden;
    }

  .okved-row .form-row,
    .bank-row .form-row,
    .contact-row .form-row {
        display: flex;
        flex-direction: column;
        gap: 12px;
        width: 100%;
    }

  .okved-row .form-group,
    .bank-row .form-group,
    .contact-row .form-group {
        width: 100%;
        margin-bottom: 0;
    }

  .okved-row input,
    .bank-row input,
    .contact-row input,
    .okved-row select,
    .bank-row select,
    .contact-row select,
    .okved-row textarea,
    .bank-row textarea,
    .contact-row textarea {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

  .btn-remove-row {
        width: 100%;
        margin-top: 8px;
        justify-content: center;
        align-self: stretch;
    }

  .crm-modal-content {
        width: 95%;
        max-height: 90vh;
        border-radius: var(--r1);
    }

  .crm-modal-header {
        padding: 20px 18px;
    }

  .crm-modal-header h3 {
        font-size: 18px;
    }

  .crm-modal-body {
        padding: 20px 18px;
    }

  .company-item,
    .category-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        padding: 12px 14px;
    }

  .btn-unlink {
        width: 100%;
        justify-content: center;
    }

  .btn-crm-settings {
        padding: 8px 12px;
        font-size: 12px;
    }

  .btn-crm-settings i {
        font-size: 12px;
    }

  .crm-filters-row {
        flex-direction: column;
        align-items: stretch;
    }

  .crm-filter-select,
    .crm-search-input {
        width: 100%;
    }

  .kanban-column {
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        min-height: auto !important;
        max-height: none !important;
        padding: 10px;
    }

  .task-header-row {
        flex-direction: column;
        gap: 10px;
    }

  .list-header {
        flex-direction: column;
        align-items: stretch;
    }

  .search-box {
        max-width: 100%;
    }

  .companies-table {
        font-size: 12px;
    }

  .companies-table th,
    .companies-table td {
        padding: 10px 8px;
    }

  .companies-table th:nth-child(3),
    .companies-table td:nth-child(3),
    .companies-table th:nth-child(4),
    .companies-table td:nth-child(4),
    .companies-table th:nth-child(5),
    .companies-table td:nth-child(5) {
        display: none;
    }

  .crm-container {
        padding: 12px 8px;
    }

  .crm-stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px;
        margin-bottom: 16px;
    }

  .crm-stat-card {
        padding: 10px 12px;
    }

  .crm-stat-value {
        font-size: 18px !important;
        min-height: auto;
    }

  .crm-stat-label {
        font-size: 9px;
    }

  .crm-stats-unified {
        margin-bottom: 16px;
    }

  .stats-header {
        margin-bottom: 10px;
    }

  .stats-title {
        font-size: 14px;
    }

  .stats-progress-compact {
        font-size: 11px;
    }

  .progress-label {
        font-size: 10px;
    }

  .crm-compact-section {
        display: grid !important;
        grid-template-columns: 1fr;
        gap: 10px;
        margin-bottom: 12px;
    }

  .compact-form-card {
        display: block !important;
        padding: 10px;
        order: 1;
    }

  .form-card-header {
        margin-bottom: 8px;
    }

  .form-card-header h3 {
        font-size: 13px;
    }

  .quick-actions-compact {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr);
        gap: 4px;
        margin-bottom: 8px;
    }

  .quick-btn {
        font-size: 9px !important;
        padding: 6px 4px !important;
        height: 30px !important;
        white-space: nowrap;
        min-width: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 3px;
    }

  .quick-btn i {
        font-size: 9px !important;
    }

  #add-task-form {
        width: 100%;
    }

  .form-control-compact {
        font-size: 11px !important;
        padding: 7px 9px !important;
        margin-bottom: 6px !important;
        width: 100% !important;
        border-radius: var(--r3) !important;
        box-sizing: border-box !important;
        border: 1.5px solid var(--border) !important;
    }

  .form-control-compact::placeholder {
        font-size: 10px !important;
        color: var(--txt3) !important;
    }

  #template-select {
        font-size: 11px !important;
        background-size: 14px !important;
        padding-right: 28px !important;
    }

  textarea.form-control-compact {
        min-height: 48px !important;
        max-height: 80px !important;
        resize: vertical;
        line-height: 1.3 !important;
    }

  .form-row-compact {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 5px;
        margin-bottom: 6px;
    }

  .form-row-compact input,
    .form-row-compact select {
        width: 100% !important;
        font-size: 11px !important;
        margin-bottom: 0 !important;
    }

  .contact-autocomplete-wrapper {
        margin-bottom: 8px;
        width: 100%;
    }

  .contact-search-input {
        font-size: 10px !important;
        padding: 7px 9px !important;
    }

  .contact-autocomplete-results {
        font-size: 10px;
        max-height: 150px;
    }

  .selected-contact-preview {
        font-size: 9px;
        padding: 5px;
        margin-top: 4px;
    }

  .btn-add-task,
    .crm-btn-primary {
        font-size: 12px !important;
        padding: 9px !important;
        width: 100% !important;
        margin-top: 4px;
        height: auto !important;
    }

  .layout-main {
        grid-template-columns: 1fr;
    }

  .sidebar-section {
        display: none !important;
    }

  .crm-filters-bar {
        flex-direction: column;
        gap: 10px;
        margin-bottom: 16px;
        padding: 12px;
    }

  .crm-filter-tabs {
        display: flex;
        gap: 4px;
        overflow-x: auto;
        padding-bottom: 4px;
        -webkit-overflow-scrolling: touch;
        width: 100%;
    }

  .crm-filter-tabs::-webkit-scrollbar {
        height: 4px;
    }

  .crm-filter-tab {
        padding: 6px 8px;
        font-size: 10px;
        white-space: nowrap;
        flex-shrink: 0;
        min-width: 0;
    }

  .crm-filter-tab i {
        font-size: 10px;
    }

  .crm-view-switcher {
        width: 100%;
        display: flex;
        gap: 6px;
        padding: 0;
    }

  .crm-view-btn {
        flex: 1;
        font-size: 10px;
        padding: 8px 6px;
        justify-content: center;
        min-width: 0;
    }

  .crm-view-btn i {
        font-size: 11px;
    }

  .filters-row,
    .crm-filters-row {
        display: flex;
        flex-direction: column;
        gap: 8px;
        width: 100%;
    }

  .crm-search-container {
        width: 100%;
    }

  .filters-row select,
    .filters-row input,
    .crm-filter-select,
    .crm-search-input {
        width: 100%;
        font-size: 13px;
        padding: 10px 12px;
    }

  .filters-actions {
        display: flex;
        flex-direction: row;
        gap: 6px;
        flex-wrap: wrap;
        width: 100%;
    }

  .filters-actions .btn,
    .crm-btn {
        flex: 1 1 calc(50% - 3px);
        min-width: 0;
        height: 40px;
        font-size: 11px;
        padding: 0 10px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

  .kanban-board {
        display: none !important;
        flex-direction: column !important;
        gap: 12px;
        padding: 12px 8px;
    }

  .kanban-board.active {
        display: flex !important;
    }

  #list-view {
        padding: 0;
    }

  #list-view.hidden {
        display: none !important;
    }

  .kanban-header {
        padding: 8px 10px;
        margin-bottom: 10px;
    }

  .kanban-title {
        font-size: 12px;
    }

  .kanban-count {
        font-size: 11px;
        padding: 2px 8px;
    }

  .crm-tasks-list {
        padding: 8px;
    }

  .crm-tasks-title {
        font-size: 12px;
        margin-bottom: 8px;
        padding: 6px;
    }

  #tasks-list {
        display: flex;
        flex-direction: column;
        gap: 6px;
    }

  .crm-task-item {
        display: flex !important;
        flex-direction: column !important;
        padding: 8px !important;
        margin-bottom: 0 !important;
        background: var(--card) !important;
        border: 1.5px solid var(--border) !important;
        border-radius: var(--r2) !important;
        min-height: auto !important;
        box-shadow: 0 1px 3px rgba(0,0,0,0.05) !important;
    }

  .crm-task-item.overdue {
        background: var(--status-error-light) !important;
        border-color: var(--status-error-light) !important;
    }

  .crm-task-item.high-priority {
        border-left: 3px solid var(--rose) !important;
    }

  .crm-task-header {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 6px !important;
        margin-bottom: 6px !important;
        flex-wrap: nowrap !important;
    }

  .crm-task-date {
        font-size: 9px !important;
        color: var(--txt3) !important;
        white-space: nowrap;
        flex: 1 1 auto;
        font-weight: 600;
    }

  .crm-task-actions {
        display: flex !important;
        gap: 4px !important;
        margin-left: auto !important;
        flex: 0 0 auto !important;
    }

  .crm-task-content {
        margin-bottom: 6px;
    }

  .crm-task-text {
        font-size: 11px !important;
        line-height: 1.4 !important;
        margin-bottom: 4px !important;
        color: var(--txt) !important;
        word-wrap: break-word !important;
        font-weight: 500 !important;
    }

  .crm-task-notes {
        font-size: 10px !important;
        line-height: 1.3 !important;
        margin-bottom: 4px !important;
        color: var(--txt3) !important;
        font-style: italic;
    }

  .crm-task-footer {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        gap: 4px !important;
        align-items: center !important;
    }

  .priority-badge {
        font-size: 8px !important;
        padding: 3px 6px !important;
        border-radius: 4px !important;
        min-height: auto !important;
        white-space: nowrap !important;
        font-weight: 600 !important;
    }

  .priority-badge.priority-high {
        background: var(--status-error-light) !important;
        color: var(--rose) !important;
        border: 1px solid var(--status-error-light) !important;
    }

  .priority-badge.priority-medium {
        background: var(--status-warning-light) !important;
        color: var(--am) !important;
        border: 1px solid var(--am) !important;
    }

  .priority-badge.priority-low {
        background: var(--sky-ll) !important;
        color: var(--sky) !important;
        border: 1px solid var(--sky-l) !important;
    }

  .task-category-badge {
        font-size: 8px !important;
        padding: 3px 6px !important;
        background: var(--status-success-light) !important;
        color: var(--em) !important;
        border: 1px solid var(--status-success-light) !important;
        border-radius: 4px !important;
        font-weight: 600 !important;
    }

  .crm-task-status {
        display: flex !important;
        gap: 3px !important;
        margin-left: auto !important;
    }

  .crm-status-btn {
        font-size: 9px !important;
        padding: 4px 8px !important;
        border: none !important;
        border-radius: 4px !important;
        cursor: pointer !important;
        transition: all 0.2s !important;
    }

  .crm-status-btn.complete {
        background: var(--status-success-light) !important;
        color: var(--em) !important;
    }

  .crm-status-btn.cancel {
        background: var(--status-error-light) !important;
        color: var(--rose) !important;
    }

  .crm-status-btn.reopen {
        background: var(--sky-l) !important;
        color: var(--sky) !important;
    }

  .btn-icon {
        width: 24px !important;
        height: 24px !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border: 1px solid var(--border) !important;
        border-radius: 4px !important;
        background: var(--card) !important;
        color: var(--txt3) !important;
        cursor: pointer !important;
        transition: all 0.2s !important;
    }

  .btn-icon i {
        font-size: 9px !important;
    }

  .btn-icon:active {
        transform: scale(0.95);
    }

  #pagination {
        padding: 8px;
        display: flex;
        justify-content: center;
        gap: 4px;
    }

  .pagination-btn {
        padding: 10px 16px;
        font-size: 12px;
        gap: 6px;
    }

  .pagination-btn.active {
        background: var(--sky) !important;
        color: white !important;
        border-color: var(--sky) !important;
    }

  .modal-content {
        padding: 25px;
    }

  .modal-form-group {
        margin-bottom: 12px;
    }

  .header-actions {
        width: 100%;
    }

  .header-actions .btn {
        width: 100%;
        justify-content: center;
    }

  .points-balance {
        padding: 16px;
        flex-direction: column;
        gap: 16px;
    }

  .points-balance-main {
        text-align: left;
    }

  .points-balance-label {
        font-size: 12px;
        margin-bottom: 10px;
    }

  .points-balance-value {
        font-size: 32px;
    }

  .points-balance-details {
        flex-direction: column;
        gap: 10px;
        align-items: flex-start;
    }

  .points-detail-item {
        font-size: 13px;
    }

  .points-stats-wrapper {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

  .points-stat-card {
        padding: 14px 16px;
    }

  .points-stat-icon {
        width: 44px;
        height: 44px;
        font-size: 18px;
    }

  .points-stat-content {
        flex: 1;
        min-width: 0;
    }

  .points-stat-label {
        font-size: 11px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

  .points-stat-value {
        font-size: 22px;
        word-break: break-all;
    }

  .points-filters {
        padding: 16px;
    }

  .points-filters-title {
        font-size: 15px;
        margin-bottom: 14px;
    }

  .points-filters-row {
        grid-template-columns: 1fr;
        gap: 12px;
    }

  .points-filter-label {
        font-size: 12px;
    }

  .points-filter-select,
    .points-filter-input {
        padding: 10px 12px;
        font-size: 13px;
    }

  .points-filters-actions {
        flex-direction: column;
        gap: 10px;
    }

  .points-btn {
        width: 100%;
        justify-content: center;
        padding: 10px 18px;
        font-size: 13px;
    }

  .data-table tbody td:nth-child(2):before {
        margin-bottom: 10px;
    }

  .data-table tbody td:nth-child(2) .status-badge {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 8px 14px;
        border-radius: var(--r2);
        font-size: 13px;
        font-weight: 700;
    }

  .data-table tbody td:nth-child(3) .points-amount {
        font-weight: 800;
        font-size: 24px !important;
        display: inline-flex;
        align-items: center;
        gap: 4px;
        padding: 6px 12px;
        border-radius: var(--r2);
    }

  .data-table tbody td:nth-child(3) .points-amount.income {
        color: var(--em);
        background: rgba(16, 185, 129, 0.1);
    }

  .data-table tbody td:nth-child(3) .points-amount.expense {
        color: var(--rose);
        background: rgba(239, 68, 68, 0.1);
    }

  .data-table tbody td:nth-child(4) strong {
        font-size: 14px;
        color: var(--txt);
        font-weight: 600;
        text-align: center;
        display: block;
        line-height: 1.5;
    }

  .data-table tbody td:nth-child(5) i {
        color: var(--sky);
        font-size: 15px;
        margin-right: 6px;
    }

  .data-table tbody td:nth-child(6) i {
        color: var(--sky);
        font-size: 14px;
        margin-right: 6px;
    }

  .table-pagination a {
        padding: 6px 10px;
        font-size: 12px;
        min-width: 32px;
    }

  .dashboard-header .header-left h1 {
        font-size: 20px;
    }

  .dashboard-header .header-left p {
        font-size: 12px;
    }

  .dashboard-header .header-right > div {
        width: 100%;
        justify-content: flex-start;
        gap: 4px !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

  .dashboard-header .btn-sm {
        font-size: 11px;
        padding: 6px 10px;
        white-space: nowrap;
        flex-shrink: 0;
    }

  .stat-card-inner {
        gap: 10px;
    }

  .card {
        margin-bottom: 16px;
        overflow: hidden;
    }

  .card > div[style*="padding: 20px 30px"],
    .card > div[style*="padding: 30px"] {
        padding: 12px 16px !important;
    }

  .card h2 {
        font-size: 16px !important;
    }

  .card p {
        font-size: 11px !important;
    }

  .card div[style*="height: 300px"] {
        height: 250px !important;
    }

  .card div[style*="height: 250px"] {
        height: 200px !important;
    }

  div[style*="minmax(400px"] {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

  div[style*="minmax(280px"] {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

  div[style*="minmax(280px"] > div {
        padding: 16px !important;
    }

  div[style*="minmax(280px"] div[style*="font-size: 15px"] {
        font-size: 13px !important;
    }

  div[style*="minmax(280px"] div[style*="font-size: 20px"] {
        font-size: 18px !important;
    }

  .content-type-stats,
    .device-stats,
    .browser-stats,
    .hour-stats,
    .country-stats,
    .city-stats {
        gap: 8px;
    }

  .content-type-item,
    .device-item,
    .browser-item,
    .hour-item,
    .country-item,
    .city-item {
        padding: 10px;
        font-size: 13px;
        flex-wrap: nowrap;
        min-width: 0;
    }

  .content-type-item i,
    .device-item i,
    .browser-item i,
    .hour-item i,
    .country-item i,
    .city-item i {
        font-size: 16px;
        width: 24px;
        flex-shrink: 0;
    }

  .content-type-name,
    .device-name,
    .browser-name,
    .hour-label,
    .country-name,
    .city-name {
        flex: 1;
        min-width: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 13px;
    }

  .content-type-count,
    .device-count,
    .browser-count,
    .hour-count,
    .country-count,
    .city-count {
        font-size: 16px;
        flex-shrink: 0;
    }

  .data-table th,
    .data-table td {
        padding: 8px 6px;
        font-size: 11px;
    }

  .data-table th {
        white-space: nowrap;
    }

  .module-stats-grid {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }

  .top-modules-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

  .analytics-row {
        grid-template-columns: 1fr;
        gap: 16px;
    }

  .top-content-grid {
        grid-template-columns: 1fr;
    }

  .card-section-header,
    .module-card-header {
        padding: 14px 16px;
    }

  .card-body {
        padding: 16px;
    }

  .card-chart-300,
    .card-chart-250 {
        height: 220px;
    }

  .stat-section-heading h2 {
        font-size: 16px;
    }

  .bonus-banner  { grid-template-columns: 1fr; }

  .usage-grid    { grid-template-columns: 1fr; }

  .tariff-cards  { grid-template-columns: 1fr; }

  .request-page {
        padding: 20px 15px;
    }

  .page-header {
        padding: 25px;
    }

  .page-header-top {
        flex-direction: column;
    }

  .page-header h1 {
        font-size: 24px;
    }

  .company-section {
        flex-direction: column;
        padding: 20px;
    }

  .content-section {
        padding: 20px;
    }

  .expired-notice {
        flex-direction: column;
        text-align: center;
        padding: 20px;
    }

  .expired-notice-icon {
        font-size: 36px;
    }

  .expired-notice-content h3 {
        font-size: 18px;
    }

  .expired-notice-content p {
        font-size: 14px;
    }

  .offers-hero h1 { font-size: 2.25rem; letter-spacing: -1px; }

  .offers-hero__inner { padding: 48px 16px 36px; }

  .offers-hero__stats { gap: 16px; }

  .hero-stat__num { font-size: 1.375rem; }

  .offers-searchbar__inner { padding: 12px 14px; gap: 8px; }

  .offers-page-body { padding: 16px 12px 40px; }

  .offers-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }

  .offer-detail__layout { grid-template-columns: 1fr !important; }

  .offer-detail__layout > aside { order: -1; }

  .offer-type-cards { grid-template-columns: 1fr; max-width: 400px; }

  .view-toggle { display: none; }

  .qs-perpage { display: none; }

  .quick-filter-sep { display: none; }

  .offers-searchbar__btn { padding: 0 16px; font-size: .8rem; }

  .offers-searchbar__btn i { display: none; }

  .dprf-container {
        padding: 20px;
    }

  .dprf-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

  .dprf-form {
        padding: 20px;
    }

  .dprf-actions {
        flex-direction: column;
    }

  .dt-header {
        flex-direction: column;
        gap: 20px;
        align-items: flex-start;
    }

  .dt-table-wrapper {
        overflow-x: scroll;
    }

  .dt-table {
        min-width: 1000px;
    }

  .dt-form-grid {
        grid-template-columns: 1fr;
    }

  .qcard-head  { padding: 14px 16px; }

  .qcard-body  { padding: 14px 16px; grid-template-columns: 1fr; }

  .qcard-head h2 { font-size: 16px; }

  .question-meta { flex-direction: column; gap: 2px; }

  .earnings-grid {
        grid-template-columns: 1fr;
    }

  .referral-link-input-group {
        flex-direction: column;
    }

  .social-share-buttons {
        flex-direction: column;
    }

  .btn-social {
        width: 100%;
        justify-content: center;
    }

  .modal-actions {
        flex-direction: column;
    }

  .btn-cancel,
    .btn-submit {
        width: 100%;
    }

  .period-filter-inline {
        flex-direction: column;
        align-items: stretch;
    }

  .period-filter {
        justify-content: center;
        flex-wrap: wrap;
    }

  .period-btn {
        flex: 1 1 calc(50% - 5px);
        min-width: 120px;
    }

  .year-selector {
        justify-content: center;
    }

  .table-controls {
        flex-direction: column;
        align-items: stretch;
        padding: 12px;
    }

  .table-info,
    .per-page-selector {
        width: 100%;
        justify-content: space-between;
    }

  .crm-table {
        font-size: 12px;
    }

  .crm-table th,
    .crm-table td {
        padding: 10px 8px;
    }

  .pagination-page {
        min-width: 32px;
        height: 32px;
        font-size: 13px;
    }

  .companies-container {
        padding: 20px 15px;
    }

  .companies-hero {
        margin-bottom: 25px;
    }

  .companies-hero h1 {
        font-size: 2rem;
        letter-spacing: -0.5px;
        margin-bottom: 12px;
    }

  .companies-hero h1::after {
        width: 50px;
        height: 3px;
        bottom: -10px;
    }

  .companies-hero p {
        font-size: 0.95rem;
        line-height: 1.6;
        margin-top: 16px;
    }

  .companies-controls {
        flex-direction: column;
        padding: 15px;
        gap: 15px;
        margin-bottom: 15px;
    }

  .search-form {
        width: 100%;
    }

  .search-form input[type="text"],
    .search-form select,
    .search-form button,
    .reset-btn {
        flex: 1 1 100%;
        min-width: 0;
        width: 100%;
    }

  .controls-right {
        width: 100%;
        justify-content: space-between;
    }

  .stat-compact {
        padding: 10px 14px;
        gap: 6px;
        flex: 1;
    }

  .stat-compact i {
        font-size: 14px;
    }

  .stat-compact span {
        font-size: 14px;
    }

  .controls-right select {
        flex: 0 0 auto;
        min-width: 100px;
    }

  .companies-list {
        gap: 10px;
        margin-bottom: 25px;
    }

  .company-item {
        grid-template-columns: 1fr;
        gap: 15px;
        padding: 16px;
    }

  .company-item-logo {
        width: 100px;
        height: 100px;
        margin: 0 auto;
        padding: 12px;
    }

  .company-item-logo-placeholder {
        font-size: 40px;
    }

  .company-item-content {
        gap: 6px;
        text-align: left;
    }

  .company-item-fullname {
        font-size: 9px;
        margin: 0 0 10px 0;
        letter-spacing: 0.6px;
        text-align: left;
    }

  .company-item-header {
        margin-bottom: 6px;
        gap: 8px;
    }

  .company-item-name {
        font-size: 16px;
        margin: 0 0 4px 0;
        text-align: left;
    }

  .company-badges {
        justify-content: flex-start;
        gap: 5px;
        margin-bottom: 10px;
    }

  .badge {
        font-size: 7.5px;
        padding: 2px 6px;
        letter-spacing: 0.3px;
    }

  .badge i {
        font-size: 7.5px;
    }

  .company-item-description {
        font-size: 13px;
        line-height: 1.5;
        margin: 0 0 12px 0;
        -webkit-line-clamp: 3;
        text-align: left;
    }

  .company-item-metadata {
        gap: 10px;
        font-size: 11px;
        justify-content: flex-start;
        flex-direction: column;
        align-items: flex-start;
    }

  .metadata-item {
        gap: 5px;
        width: 100%;
    }

  .metadata-item i {
        font-size: 12px;
    }

  .company-item-right {
        flex-direction: row;
        justify-content: center;
    }

  .company-item-arrow {
        width: 34px;
        height: 34px;
        font-size: 13px;
    }

  .companies-empty {
        padding: 40px 20px;
        border-radius: var(--r1);
    }

  .companies-empty i {
        font-size: 48px;
        margin-bottom: 12px;
    }

  .companies-empty h3 {
        font-size: 20px;
        margin: 0 0 6px 0;
    }

  .companies-empty p {
        font-size: 14px;
    }

  .pagination {
        flex-wrap: wrap;
        gap: 10px;
        margin: 25px 0;
    }

  .pagination-numbers {
        flex: 1 1 100%;
        justify-content: center;
        order: -1;
        gap: 4px;
        flex-wrap: wrap;
    }

  .pagination-link {
        min-width: 34px;
        height: 34px;
        padding: 0 8px;
        font-size: 12px;
    }

  .pagination-goto {
        order: 3;
        flex: 0 0 auto;
    }

  .pagination-goto input {
        width: 60px;
        padding: 6px 10px;
        font-size: 12px;
    }

  .pagination-goto button {
        width: 32px;
        height: 32px;
    }

  .pagination-prev {
        order: 1;
    }

  .pagination-next {
        order: 2;
    }

  .news-detail-section {
        padding: 60px 0;
    }

  .news-detail-container {
        padding: 0 20px;
    }

  .news-detail-header {
        padding: 32px 28px 20px;
    }

  .news-detail-title {
        font-size: 32px;
    }

  .news-detail-content {
        padding: 24px 28px 40px;
        font-size: 16px;
    }

  .news-detail-content h2 {
        font-size: 24px;
    }

  .related-news {
        padding: 32px 24px;
        margin-bottom: 60px;
    }

  .related-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

  .related-news h2 {
        font-size: 28px;
    }

  .org-card-header {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 30px;
    }

  .org-card-title h1 {
        font-size: 32px;
    }

  .org-section-title {
        font-size: 22px;
    }

  .org-info-item {
        flex-direction: column;
        align-items: flex-start;
    }

  .org-info-value {
        text-align: left;
    }

  .request-compact-header {
        flex-direction: column;
        align-items: flex-start;
    }

  .request-compact-meta {
        font-size: 12px;
    }

  .offer-section { padding: 18px 16px; }

  .tender-sb-price { font-size: 1.5rem; }

  .pr-main-image { max-height: 260px; }

}

/* ==================== DASHBOARD CARD ==================== */

/* ==================== DATA TABLE ==================== */

.data-table thead th {
    padding: 18px 20px;
    text-align: left;
    font-size: 13px;
    font-weight: 700;
    color: var(--neutral-dark);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 2px solid rgba(2, 132, 199, 0.15);
}

.data-table tbody tr {
    border-bottom: 1px solid rgba(2, 132, 199, 0.06);
    transition: all 0.3s ease;
    background: var(--card);
}

.data-table tbody td {
    padding: 18px 20px;
    font-size: 14px;
    color: var(--neutral-dark);
    vertical-align: middle;
}

.data-table tbody td a {
    color: var(--sky);
    text-decoration: none;
    font-weight: 500;
    transition: all 0.2s ease;
}

.data-table tbody td a:hover {
    color: var(--sky-h);
}

/* ==================== TABLE PAGINATION ==================== */

/* ==================== ACTION CONTENT & VALUES ==================== */

.action-content {
    flex: 1;
    text-align: center;
}

.action-value {
    font-size: 32px;
    font-weight: 900;
    color: var(--neutral-dark);
    line-height: 1;
    margin-bottom: 8px;
    font-family: var(--font-display);
}

.action-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--neutral-gray);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ==================== STATUS BADGE ==================== */

/* ==================== FILTERS SECTION ==================== */

.filters-section h3 {
    margin: 0 0 12px 0;
    color: var(--neutral-dark);
    font-size: 15px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}

.filters-section h3 i {
    color: var(--primary-teal);
}

.filters-block {
    background: var(--card);
    padding: 25px 30px;
    border-radius: var(--r1);
    margin-bottom: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.filters-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.filters-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
}

.filter-select,
.filter-input {
    padding: 12px 16px;
    border: 2px solid rgba(2, 132, 199, 0.2);
    border-radius: var(--r2);
    font-size: 14px;
    background: var(--card);
    transition: all 0.3s;
    font-weight: 500;
    color: var(--neutral-dark);
}

.filter-select:focus,
.filter-input:focus {
    outline: none;
    border-color: var(--primary-teal);
    box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.1);
}

.btn-outline {
    background: var(--card) !important;
    color: var(--txt) !important;
    border: 2px solid var(--border) !important;
}

.btn-outline:hover {
    background: var(--page) !important;
    border-color: var(--sky) !important;
    color: var(--sky) !important;
}

/* ==================== ACTION BUTTONS ==================== */

/* ==================== POINTS AMOUNT ==================== */

/* ==================== TABLE CONTAINER ==================== */

/* ==================== STATUS BADGES ==================== */

/* ==================== MODAL STYLES ==================== */

#userModal .modal-content,
#freezeModal .modal-content,
#pointsModal .modal-content,
#vipModal .modal-content {
    max-width: 500px;
    padding: 0;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.close {
    font-size: 32px;
    font-weight: 300;
    color: var(--neutral-gray);
    cursor: pointer;
    transition: all 0.3s ease;
    line-height: 1;
}

.close:hover {
    color: var(--primary-teal);
    transform: rotate(90deg);
}

#userModal form,
#pointsModal form,
#editModal form {
    display: block;
}

.form-group .required {
    color: var(--rose);
}

.form-group input,
.form-group textarea,

#editModal input,
#editModal textarea {
    padding: 12px 16px !important;
    border: 2px solid var(--border) !important;
}

.form-group input:focus,
.form-group textarea:focus,

.modal-footer .btn-primary,

.modal-footer .btn-primary {
    background: linear-gradient(135deg, var(--primary-teal) 0%, var(--accent-blue) 100%);
    color: white;
    border: none;
}

.modal-footer .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(2, 132, 199, 0.3);
}

.modal-footer .btn-secondary {
    background: var(--sky);
    color: #fff;
    border: none;
}

.modal-footer .btn-secondary:hover {
    background: var(--sky-h);
    color: #fff;
}

/* ==================== ACTION BUTTONS ==================== */

.btn-icon.btn-primary i {
    color: var(--sky);
}

.btn-icon.btn-primary:hover i {
    color: white;
}

.btn-icon.btn-danger i {
    color: var(--rose);
}

.btn-icon.btn-danger:hover i {
    color: var(--rose);
}

/* ==================== ALERTS ==================== */

/* ==================== HEADER RIGHT ==================== */

.dynamic-row {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
    align-items: center;
}

.dynamic-row input,
.dynamic-row textarea {
    padding: 8px 12px;
    border: 2px solid rgba(2, 132, 199, 0.2);
    border-radius: var(--r2);
    font-size: 14px;
}

.per-page-selector select:focus {
    outline: none;
    border-color: var(--primary-teal);
}

.btn-add-user {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 18px;
    background: linear-gradient(135deg, var(--sky), var(--teal));
    color: #fff;
    font-size: .875rem;
    font-weight: 600;
    border: none;
    border-radius: var(--r2);
    cursor: pointer;
    transition: opacity .2s, transform .15s;
    white-space: nowrap;
}

.btn-add-user:hover {
    opacity: .88;
    transform: translateY(-1px);
}

.btn-add-user:active {
    transform: translateY(0);
}

/* ==================== STATISTICS CARDS ==================== */

.badge-primary {
    background: rgba(99, 102, 241, 0.2);
    color: var(--ind);
}

.badge-secondary {
    background: rgba(107, 114, 128, 0.2);
    color: var(--txt3);
}

/* ==================== EXTRACTED INLINE STYLES ==================== */

.section-link { color: var(--sky); font-size: 13px; text-decoration: none; font-weight: 600; }

.section-link:hover { color: var(--sky-h); text-decoration: underline; }

.status-progress { background: var(--status-warning-light); color: var(--am); }

.status-resolved { background: var(--sky-l); color: var(--em); }

.status-danger { background: rgba(239, 68, 68, 0.1); color: var(--rose); }

.priority-low { background: var(--border); color: var(--txt2); }

.priority-medium { background: var(--sky-l); color: var(--sky-h); }

.priority-high { background: var(--status-warning-light); color: var(--am); }

.priority-urgent { background: var(--status-error-light); color: var(--rose); }

.grid-2col { display: grid; grid-template-columns: repeat(2, 1fr); gap: 25px; }

@media (max-width: 1200px) {

  .grid-2col { grid-template-columns: 1fr; }

  .dashboard-container { padding: 20px 24px 32px; }

  .db-kpi-grid { grid-template-columns: repeat(2, 1fr); }

  .module-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

  .crm-table {
        font-size: 13px;
    }

  .crm-table th,
    .crm-table td {
        padding: 12px 10px;
    }

}

/* chart-container moved to referral-program.css */

.cities-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }

.filters-section {
            background: var(--card);
            padding: 25px;
            border-radius: var(--r1);
            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
            margin-bottom: 25px;
        }

.filters-row-2 {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr 150px;
            gap: 15px;
            align-items: end;
        }

.filter-group input,
        .filter-group select {
            padding: 12px 16px;
            border: 2px solid rgba(2, 132, 199, 0.2);
            border-radius: var(--r2);
            font-size: 14px;
            transition: all 0.2s;
            height: 48px;
            box-sizing: border-box;
        }

.filter-group input:focus,
        .filter-group select:focus {
            outline: none;
            border-color: var(--sky);
            box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.1);
        }

.btn-search {
            background: var(--sky);
            color: white;
            border: none;
            padding: 10px 24px;
            border-radius: var(--r2);
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s;
            display: flex;
            align-items: center;
            gap: 8px;
            justify-content: center;
        }

.btn-search:hover {
            background: var(--sky-h);
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(2, 132, 199, 0.3);
        }

.detail-row:last-child {
    border-bottom: none;
}

.file-attachments {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 10px;
}

/* From: pages/admin/support_tickets.php */

.filter-group select,.filter-group input[type="date"]{width:100%;padding:12px 16px;border:1.5px solid var(--border);border-radius:10px;font-size:14px;background: var(--card);transition:all 0.3s;font-weight:500;color:var(--txt)}

.filter-group select:focus,.filter-group input[type="date"]:focus{outline:none;border-color:var(--sky);box-shadow:0 0 0 3px rgba(2,132,199,0.1)}

.ticket-subj{font-weight:600;color:var(--txt);text-decoration:none;font-size:15px}

.ticket-subj:hover{color:var(--sky)}

.info-card-header {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 12px;
            padding-bottom: 10px;
            border-bottom: 1px solid var(--border);
        }

.icon-php { background: linear-gradient(135deg, var(--txt3)bb3 0%, var(--ind) 100%); }

.icon-server { background: linear-gradient(135deg, var(--sky) 0%, var(--sky-h) 100%); }

.icon-database { background: linear-gradient(135deg, var(--em) 0%, var(--em) 100%); }

.icon-disk { background: linear-gradient(135deg, var(--rose) 0%, var(--rose) 100%); }

.icon-extensions { background: linear-gradient(135deg, var(--vio) 0%, var(--vio) 100%); }

.icon-security { background: linear-gradient(135deg, var(--am) 0%, var(--am) 100%); }

.info-card-title {
            font-size: 14px;
            font-weight: 600;
            color: var(--txt);
        }

.info-item:last-child {
            border-bottom: none;
        }

.info-value {
            font-size: 12px;
            color: var(--txt);
            font-weight: 600;
            font-family: 'Courier New', monospace;
        }

.status-ok {
            background: var(--sky-l);
            color: var(--em);
        }

.table-stats {
            width: 100%;
            border-collapse: collapse;
            margin-top: 15px;
        }

.table-stats th {
            background: var(--page);
            padding: 10px;
            text-align: left;
            font-size: 13px;
            font-weight: 600;
            color: var(--txt2);
            border-bottom: 2px solid var(--border);
        }

.table-stats td {
            padding: 10px;
            font-size: 13px;
            color: var(--txt);
            border-bottom: 1px solid var(--page);
        }

.table-stats tr:hover {
            background: var(--page);
        }

.progress-bar {
            width: 100%;
            height: 8px;
            background: var(--border);
            border-radius: 4px;
            overflow: hidden;
            margin-top: 8px;
        }

.progress-fill {
            height: 100%;
            background: linear-gradient(90deg, var(--sky) 0%, var(--sky) 100%);
            transition: width 0.3s ease;
        }

.progress-fill.warning {
            background: linear-gradient(90deg, var(--am) 0%, var(--am) 100%);
        }

.progress-fill.danger {
            background: linear-gradient(90deg, var(--rose) 0%, var(--rose) 100%);
        }

.per-page-selector select {
        padding: 8px 12px;
        border: 1px solid var(--border);
        border-radius: var(--r2);
        font-size: 14px;
        cursor: pointer;
    }

.btn-edit {
        background: rgba(59, 130, 246, 0.1);
        color: var(--sky);
    }

.btn-edit:hover {
        background: var(--sky);
        color: white;
    }

#passwordHint {
        font-weight: normal;
        color: var(--txt3);
        font-size: 12px;
    }

.points-badge {
        background: linear-gradient(135deg, var(--ind) 0%, var(--vio) 100%);
        color: white;
        padding: 6px 14px;
        border-radius: var(--r1);
        font-weight: 600;
        font-size: 14px;
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
    }

#userModal .modal-content {
        max-width: 600px !important;
        padding: 0 !important;
        border-radius: var(--r1);
    }

#userModal .modal-header {
        padding: 25px 30px !important;
        background: linear-gradient(135deg, var(--sky-ll) 0%, var(--sky-l) 100%) !important;
        border-bottom: 2px solid var(--border) !important;
        border-radius: var(--r1) 16px 0 0 !important;
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
    }

#userModal .modal-header h2 {
        margin: 0 !important;
        font-size: 24px !important;
        font-weight: 700 !important;
        color: var(--txt) !important;
    }

#userModal .close {
        font-size: 32px !important;
        font-weight: 300 !important;
        color: var(--txt3) !important;
        cursor: pointer !important;
        transition: all 0.2s !important;
        line-height: 1 !important;
    }

#userModal .close:hover {
        color: var(--sky) !important;
        transform: rotate(90deg) !important;
    }

#userModal form {
        padding: 35px !important;
        display: block !important;
    }

#userModal .form-group {
        margin-bottom: 22px !important;
    }

#userModal .form-group label {
        display: block !important;
        margin-bottom: 10px !important;
        font-weight: 700 !important;
        color: var(--txt) !important;
        font-size: 16px !important;
    }

#userModal .form-group input,
    #userModal .form-group select {
        width: 100% !important;
        padding: 14px 18px !important;
        border: 2px solid var(--border) !important;
        border-radius: var(--r2) !important;
        font-size: 16px !important;
        box-sizing: border-box !important;
        transition: all 0.2s ease !important;
        background: var(--card) !important;
        color: var(--txt) !important;
    }

#userModal .form-group input:focus,
    #userModal .form-group select:focus {
        outline: none !important;
        border-color: var(--sky) !important;
        box-shadow: 0 0 0 4px rgba(2, 132, 199, 0.15) !important;
    }

#userModal #passwordHint {
        font-size: 13px !important;
        color: var(--txt3) !important;
        font-weight: 400 !important;
    }

#userModal .modal-buttons {
        display: flex !important;
        gap: 15px !important;
        justify-content: flex-end !important;
        margin-top: 30px !important;
        padding-top: 25px !important;
        border-top: 2px solid var(--border) !important;
    }

#userModal .modal-buttons .btn {
        padding: 14px 28px !important;
        font-size: 16px !important;
        font-weight: 700 !important;
        border-radius: var(--r2) !important;
        border: none !important;
        cursor: pointer !important;
        transition: all 0.2s ease !important;
    }

#userModal .modal-buttons .btn-secondary {
        background: var(--page) !important;
        color: var(--txt2) !important;
        border: 2px solid var(--border) !important;
    }

#userModal .modal-buttons .btn-secondary:hover {
        background: var(--border) !important;
    }

#userModal .modal-buttons .btn-primary {
        background: linear-gradient(135deg, var(--sky) 0%, var(--sky-h) 100%) !important;
        color: white !important;
        box-shadow: 0 4px 12px rgba(2, 132, 199, 0.4) !important;
    }

#userModal .modal-buttons .btn-primary:hover {
        transform: translateY(-2px) !important;
        box-shadow: 0 6px 20px rgba(2, 132, 199, 0.5) !important;
    }

#pointsModal .modal-content {
        max-width: 600px !important;
        padding: 0 !important;
        border-radius: var(--r1);
    }

#pointsModal .modal-header {
        padding: 25px 30px !important;
        background: linear-gradient(135deg, var(--status-warning-light) 0%, var(--status-warning-light) 100%) !important;
        border-bottom: 2px solid var(--border) !important;
        border-radius: var(--r1) 16px 0 0 !important;
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
    }

#pointsModal .modal-header h2 {
        margin: 0 !important;
        font-size: 24px !important;
        font-weight: 700 !important;
        color: var(--txt) !important;
    }

#pointsModal .close {
        font-size: 32px !important;
        font-weight: 300 !important;
        color: var(--txt3) !important;
        cursor: pointer !important;
        transition: all 0.2s !important;
        line-height: 1 !important;
    }

#pointsModal .close:hover {
        color: var(--am) !important;
        transform: rotate(90deg) !important;
    }

#pointsModal form {
        padding: 35px !important;
        display: block !important;
    }

#pointsModal .form-group {
        margin-bottom: 22px !important;
    }

#pointsModal .form-group label {
        display: block !important;
        margin-bottom: 10px !important;
        font-weight: 700 !important;
        color: var(--txt) !important;
        font-size: 16px !important;
    }

#pointsModal #current_points {
        font-weight: 800 !important;
        color: var(--am) !important;
        font-size: 18px !important;
    }

#pointsModal .btn-operation {
        flex: 1;
        padding: 14px 20px !important;
        border: 2px solid var(--border) !important;
        border-radius: var(--r2) !important;
        background: var(--card) !important;
        color: var(--txt3) !important;
        font-size: 16px !important;
        font-weight: 600 !important;
        cursor: pointer !important;
        transition: all 0.2s ease !important;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
    }

#pointsModal .btn-operation:hover {
        border-color: var(--sky) !important;
        color: var(--sky) !important;
    }

#pointsModal .btn-operation.active {
        background: linear-gradient(135deg, var(--sky) 0%, var(--sky-h) 100%) !important;
        color: white !important;
        border-color: var(--sky) !important;
        box-shadow: 0 4px 12px rgba(2, 132, 199, 0.3) !important;
    }

#pointsModal .form-group input[type="number"],
    #pointsModal .form-group textarea {
        width: 100% !important;
        padding: 14px 18px !important;
        border: 2px solid var(--border) !important;
        border-radius: var(--r2) !important;
        font-size: 16px !important;
        box-sizing: border-box !important;
        transition: all 0.2s ease !important;
        background: var(--card) !important;
        color: var(--txt) !important;
    }

#pointsModal .form-group input[type="number"]:focus,
    #pointsModal .form-group textarea:focus {
        outline: none !important;
        border-color: var(--sky) !important;
        box-shadow: 0 0 0 4px rgba(2, 132, 199, 0.15) !important;
    }

#pointsModal .form-group textarea {
        resize: vertical !important;
        font-family: inherit !important;
        line-height: 1.5 !important;
    }

#pointsModal .modal-buttons {
        display: flex !important;
        gap: 15px !important;
        justify-content: flex-end !important;
        margin-top: 30px !important;
        padding-top: 25px !important;
        border-top: 2px solid var(--border) !important;
    }

#pointsModal .modal-buttons .btn {
        padding: 14px 28px !important;
        font-size: 16px !important;
        font-weight: 700 !important;
        border-radius: var(--r2) !important;
        border: none !important;
        cursor: pointer !important;
        transition: all 0.2s ease !important;
    }

#pointsModal .modal-buttons .btn-secondary {
        background: var(--page) !important;
        color: var(--txt2) !important;
        border: 2px solid var(--border) !important;
    }

#pointsModal .modal-buttons .btn-secondary:hover {
        background: var(--border) !important;
    }

#pointsModal .modal-buttons .btn-primary {
        background: linear-gradient(135deg, var(--am) 0%, var(--am) 100%) !important;
        color: white !important;
        box-shadow: 0 4px 12px rgba(245, 158, 11, 0.4) !important;
    }

#pointsModal .modal-buttons .btn-primary:hover {
        transform: translateY(-2px) !important;
        box-shadow: 0 6px 20px rgba(245, 158, 11, 0.5) !important;
    }

.proposal-link {
    color: var(--sky);
    text-decoration: none;
    font-weight: 500;
    font-size: 14px;
}

.proposal-link:hover {
    text-decoration: underline;
}

.info-card h3 {
    font-size: 16px;
    font-weight: 600;
    color: var(--txt);
    margin: 0 0 25px 0;
    padding-bottom: 15px;
    border-bottom: 2px solid var(--page);
    display: flex;
    align-items: center;
    gap: 10px;
}

.info-card h3 i {
    color: var(--sky);
    font-size: 16px;
}

.info-grid-2col {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 15px;
}

.info-grid-2col .info-item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 15px 0;
    border-bottom: 1px solid var(--border);
}

.info-grid-2col .info-item:last-child {
    border-bottom: none;
}

.info-grid-2col .info-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--txt3);
    min-width: 200px;
}

.info-grid-2col .info-value {
    font-size: 14px;
    color: var(--txt);
    flex: 1;
    text-align: right;
    line-height: 1.6;
}

.info-value a {
    color: var(--sky);
    text-decoration: none;
    font-weight: 500;
    font-size: 14px;
}

.info-value a:hover {
    text-decoration: underline;
}

.info-value small,
.info-value span {
    color: var(--txt3);
    font-size: 13px;
}

.proposal-subject {
    font-size: 16px;
    font-weight: 600;
    margin: 10px 0 0 0;
    color: var(--txt);
    line-height: 1.5;
}

.proposal-content {
    padding: 25px;
    background: var(--page);
    border-radius: var(--r2);
    margin-top: 10px;
    line-height: 1.8;
    color: var(--txt2);
    font-size: 14px;
}

.proposal-content p {
    margin: 0;
    color: var(--txt2);
    font-size: 14px;
}

.detail-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.detail-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--txt);
    line-height: 1.3;
}

.detail-value {
    font-size: 14px;
    color: var(--txt);
    font-weight: 400;
    line-height: 1.4;
}

.detail-value a {
    color: var(--sky);
    text-decoration: none;
    font-weight: 600;
}

.detail-value a:hover {
    text-decoration: underline;
}

.email-stats-section {
    margin-bottom: 25px;
}

.email-logs-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
}

.email-logs-table thead {
    background: var(--card);
}

.email-logs-table thead th {
    padding: 12px 16px;
    text-align: left;
    font-size: 12px;
    font-weight: 600;
    color: var(--txt);
    background: var(--card);
    border-bottom: 2px solid var(--border);
}

.email-logs-table thead th i {
    margin-right: 6px;
    opacity: 0.7;
    font-size: 12px;
    color: var(--txt3);
}

.email-logs-table tbody tr {
    background: var(--card);
    transition: background 0.15s;
    border-bottom: 1px solid var(--border);
}

.email-logs-table tbody tr:hover {
    background: var(--page);
}

.email-logs-table tbody tr:last-child {
    border-bottom: none;
}

.email-logs-table tbody td {
    padding: 12px 16px;
    font-size: 13px;
    color: var(--txt);
    vertical-align: middle;
}

.email-cell {
    display: flex;
    align-items: center;
    gap: 8px;
}

.email-cell i {
    color: var(--sky);
    font-size: 13px;
    flex-shrink: 0;
}

.email-cell span {
    font-weight: 500;
    color: var(--txt);
}

.subject-cell {
    color: var(--txt2);
    font-weight: 400;
}

.status-cell {
    text-align: left;
}

.error-cell {
    color: var(--rose);
    font-size: 12px;
}

.error-message {
    color: var(--rose);
    font-size: 12px;
    line-height: 1.4;
}

.no-error {
    color: var(--border);
    font-weight: 400;
}

.date-cell {
    font-family: 'Courier New', monospace;
    font-size: 12px;
    color: var(--txt3);
    white-space: nowrap;
}

.detail-value small {
    font-size: 12px;
    color: var(--txt3);
    font-weight: 400;
    display: block;
    margin-top: 2px;
}

.proposal-subject-text {
    font-size: 14px;
    color: var(--txt);
    font-weight: 400;
    line-height: 1.5;
    margin: 0;
    padding: 0;
}

.proposal-content-text {
    font-size: 14px;
    color: var(--txt);
    font-weight: 400;
    line-height: 1.6;
    background: var(--page);
    padding: 15px;
    border-radius: var(--r2);
}

.action-buttons-group {
    display: flex;
    gap: 10px;
    margin-top: 20px;
}

.btn-back:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(2, 132, 199, 0.3);
}

.form-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.form-section h3 {
    font-size: 18px;
    font-weight: 700;
    color: var(--txt);
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.form-section h3 i {
    color: var(--sky);
    font-size: 20px;
}

.form-group input[type=file] {
    width: 100%;
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: var(--r2);
}

.checkbox-group {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 0;
}

.checkbox-group input[type="checkbox"] {
    width: 20px;
    height: 20px;
    margin-top: 2px;
    cursor: pointer;
    accent-color: var(--sky);
}

.checkbox-group label {
    margin: 0;
    font-size: 14px;
    color: var(--txt2);
    cursor: pointer;
}

.slug-preview {
    margin-top: 10px;
    padding: 12px 16px;
    background: var(--page);
    border: 2px dashed var(--border);
    border-radius: var(--r2);
    color: var(--txt3);
    font-size: 14px;
    font-family: monospace;
    display: flex;
    align-items: center;
    gap: 8px;
}

.slug-preview.active {
    border-color: var(--sky);
    background: var(--sky-ll);
    color: var(--sky);
}

.seo-form .section-title {
    font-size: 24px;
    font-weight: 700;
    color: var(--txt);
    margin-bottom: 30px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 20px;
    border-bottom: 2px solid var(--page);
    position: relative;
}

.seo-form .section-title::before {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 60px;
    height: 2px;
    background: linear-gradient(90deg, var(--sky) 0%, transparent 100%);
}

.seo-form .section-title i {
    color: var(--sky);
    font-size: 26px;
    transition: transform 0.3s ease;
}

.seo-form:hover .section-title i {
    transform: rotate(5deg) scale(1.05);
}

.settings-form {
    max-width: 100%;
}

.settings-form .form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin-bottom: 20px;
}

.settings-form .form-grid-full {
    grid-column: 1 / -1;
}

.settings-form .form-group {
    margin-bottom: 25px;
}

.settings-form .form-group label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    font-weight: 600;
    color: var(--txt);
    font-size: 14px;
    transition: color 0.2s ease;
}

.settings-form .form-group label i {
    color: var(--sky);
    font-size: 16px;
    transition: transform 0.2s ease;
}

.settings-form .form-group:hover label i {
    transform: scale(1.1);
}

.settings-form .form-group label .required {
    color: var(--rose);
    font-weight: 700;
    margin-left: 4px;
}

.settings-form .form-input {
    width: 100%;
    padding: 14px 18px;
    border: 2px solid var(--border);
    border-radius: var(--r1);
    font-size: 15px;
    font-family: inherit;
    transition: all 0.3s ease;
    background: var(--page);
    box-sizing: border-box;
}

.settings-form .form-input:hover {
    border-color: var(--border);
    background: var(--card);
}

.settings-form .form-input:focus {
    outline: none;
    border-color: var(--sky);
    background: var(--card);
    box-shadow: 0 0 0 4px rgba(2, 132, 199, 0.1);
    transform: translateY(-1px);
}

.settings-form .form-input::placeholder {
    color: var(--txt3);
    opacity: 0.7;
}

.settings-form .form-input:disabled {
    background: var(--page);
    cursor: not-allowed;
    opacity: 0.6;
}

.settings-form textarea.form-input {
    min-height: 100px;
    resize: vertical;
    line-height: 1.6;
}

.settings-form input[type="number"].form-input {
    -moz-appearance: textfield;
}

.settings-form input[type="number"].form-input::-webkit-outer-spin-button,
.settings-form input[type="number"].form-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.settings-form input[type="checkbox"] {
    width: 20px;
    height: 20px;
    cursor: pointer;
    accent-color: var(--sky);
    border-radius: var(--r3);
    transition: all 0.3s ease;
}

.settings-form input[type="checkbox"]:hover {
    transform: scale(1.1);
}

.settings-form input[type="checkbox"]:focus {
    outline: none;
    box-shadow: 0 0 0 4px rgba(2, 132, 199, 0.1);
}

.settings-form .form-hint {
    display: block;
    margin-top: 8px;
    font-size: 13px;
    color: var(--txt3);
    line-height: 1.5;
}

.settings-form .info-badge {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 18px;
    background: linear-gradient(135deg, var(--status-success-light) 0%, var(--sky-l) 100%);
    border: 1px solid var(--status-success-light);
    border-left: 4px solid var(--sky);
    border-radius: var(--r2);
    font-size: 14px;
    color: var(--em);
    line-height: 1.6;
}

.settings-form .info-badge i {
    color: var(--sky);
    font-size: 18px;
    margin-top: 2px;
    flex-shrink: 0;
}

.settings-form .form-actions {
    margin-top: 35px;
    padding-top: 25px;
    border-top: 2px solid var(--page);
    display: flex;
    gap: 12px;
}

.settings-form .form-actions .btn {
    padding: 14px 28px;
    font-size: 15px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    border-radius: var(--r1);
    transition: all 0.3s ease;
}

.settings-form .form-actions .btn i {
    font-size: 16px;
}

.settings-form .form-actions .btn-primary {
    background: linear-gradient(135deg, var(--sky) 0%, var(--sky-h) 100%);
    border: none;
    color: white;
    box-shadow: 0 4px 12px rgba(2, 132, 199, 0.3);
}

.settings-form .form-actions .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(2, 132, 199, 0.4);
}

.settings-form .form-actions .btn-primary:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(2, 132, 199, 0.3);
}

.settings-form .form-actions .btn-secondary {
    background: var(--card);
    color: var(--txt2);
    border: 2px solid var(--border);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.settings-form .form-actions .btn-secondary:hover {
    background: var(--page);
    border-color: var(--sky);
    color: var(--sky);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.settings-form .form-actions .btn-secondary:active {
    transform: translateY(0);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
}

.page-section .form-group {
    margin-bottom: 20px;
}

.page-section .form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: var(--txt);
    font-size: 14px;
}

.page-section .form-group .hint {
    font-weight: 400;
    color: var(--txt3);
    font-size: 12px;
    font-style: italic;
}

.page-section .form-group input[type="text"],
.page-section .form-group input[type="file"],
.page-section .form-group textarea,
.page-section .form-group select {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid var(--sky);
    border-radius: var(--r2);
    font-size: 14px;
    background: var(--card);
    font-family: inherit;
    box-sizing: border-box;
    transition: all 0.2s ease;
    outline: none;
}

.page-section .form-group textarea {
    min-height: 100px;
    resize: vertical;
    line-height: 1.5;
}

.page-section .form-group input:focus,
.page-section .form-group textarea:focus,
.page-section .form-group select:focus {
    border-color: var(--sky);
    box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.1);
}

.btn-save:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(2, 132, 199, 0.3);
}

.btn-save i {
    font-size: 14px;
}

.btn-back-white {
    padding: 12px 28px;
    border-radius: var(--r2);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    letter-spacing: 0.3px;
    background: linear-gradient(135deg, var(--sky) 0%, var(--sky-h) 100%);
    color: white;
    border: none;
}

.btn-back-white:hover {
    background: linear-gradient(135deg, var(--sky-h) 0%, var(--sky-h) 100%);
    box-shadow: 0 6px 16px rgba(2, 132, 199, 0.35);
    transform: translateY(-2px);
}

.btn-back-white:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(2, 132, 199, 0.3);
}

.btn-back-white i {
    font-size: 14px;
}

.btn-delete-red {
    padding: 12px 28px;
    border-radius: var(--r2);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    letter-spacing: 0.3px;
    background: linear-gradient(135deg, var(--sky) 0%, var(--sky-h) 100%);
    color: white;
    border: 1px solid rgba(2, 132, 199, 0.2);
}

.btn-delete-red:hover {
    background: linear-gradient(135deg, var(--sky-h) 0%, var(--sky-h) 100%);
    box-shadow: 0 6px 16px rgba(2, 132, 199, 0.35);
    transform: translateY(-2px);
}

.btn-delete-red:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(2, 132, 199, 0.3);
}

.btn-delete-red i {
    font-size: 14px;
}

/* Edit Response Form - Unique Styles (erf = edit response form) */

.edit-response-form-unique {
    margin: 0 !important;
    padding: 0 !important;
    max-width: 100% !important;
}

#editModal .erf-field-group {
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border);
}

#editModal .erf-field-group-last {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

#editModal .erf-label {
    color: var(--sky);
    font-size: 14px;
    margin-bottom: 10px;
    font-weight: 600;
    display: flex;
    align-items: center;
    padding: 0;
}

#editModal .erf-input,

#editModal .erf-textarea {
    resize: vertical;
    min-height: 100px;
}

#editModal .erf-input:focus,
#editModal .erf-textarea:focus {
    outline: none;
    border-color: var(--sky);
    background: var(--card);
    box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.1);
}

#editModal .erf-checkbox-wrapper {
    display: flex;
    align-items: center;
    cursor: pointer;
    padding: 10px 0;
    margin: 0;
}

#editModal .erf-checkbox {
    width: 20px;
    height: 20px;
    margin: 0 10px 0 0;
    padding: 0;
    cursor: pointer;
    accent-color: var(--sky);
    flex-shrink: 0;
}

#editModal .erf-checkbox-label {
    color: var(--txt2);
    font-size: 15px;
    margin: 0;
    padding: 0;
    font-weight: 500;
}

#editModal .erf-hint {
    display: block;
    margin-top: 8px;
    padding: 8px 12px;
    color: var(--txt3);
    font-size: 13px;
    line-height: 1.5;
    background: var(--page);
    border-radius: var(--r3);
    border-left: 3px solid var(--sky);
}

#editModal .erf-buttons {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    align-items: center;
    padding-top: 20px;
    margin-top: 20px;
    border-top: 2px solid var(--border);
}

#editModal .erf-btn-cancel,

#editModal .erf-btn-cancel {
    background: var(--page);
    color: var(--txt2);
    border: 2px solid var(--border);
}

#editModal .erf-btn-cancel:hover {
    background: var(--border);
    border-color: var(--border);
}

#editModal .erf-btn-submit {
    background: var(--sky);
    color: #fff;
    box-shadow: 0 2px 4px rgba(2, 132, 199, 0.2);
}

#editModal .erf-btn-submit:hover {
    background: var(--sky-h);
    box-shadow: 0 4px 8px rgba(2, 132, 199, 0.3);
    transform: translateY(-1px);
}

#freezeModal .freeze-modal-content {
    background: var(--card) !important;
    margin: 2% auto !important;
    padding: 0 !important;
    border-radius: var(--r1) !important;
    max-width: 500px !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3) !important;
    animation: slideDown 0.3s ease !important;
}

#freezeModal .freeze-modal-header {
    background: linear-gradient(135deg, var(--sky) 0%, var(--sky-h) 100%) !important;
    color: white !important;
    padding: 24px 30px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    border-radius: var(--r1) 20px 0 0 !important;
}

#freezeModal .freeze-modal-header h2 {
    margin: 0 !important;
    font-size: 20px !important;
    font-weight: 600 !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

#freezeModal .modal-buttons {
    display: flex !important;
    gap: 15px !important;
    justify-content: flex-end !important;
    margin-top: 30px !important;
    padding-top: 25px !important;
    border-top: 2px solid var(--border) !important;
}

#freezeModal .modal-buttons .btn {
    padding: 14px 28px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    border-radius: var(--r2) !important;
    border: none !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

#freezeModal .modal-buttons .btn-secondary {
    background: var(--page) !important;
    color: var(--txt2) !important;
    border: 2px solid var(--border) !important;
}

#freezeModal .modal-buttons .btn-secondary:hover {
    background: var(--border) !important;
}

#freezeModal .modal-buttons .btn-primary {
    background: linear-gradient(135deg, var(--sky) 0%, var(--sky-h) 100%) !important;
    color: white !important;
    box-shadow: 0 4px 12px rgba(2, 132, 199, 0.4) !important;
}

#freezeModal .modal-buttons .btn-primary:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(2, 132, 199, 0.5) !important;
}

#freezeModal form {
    padding: 30px !important;
}

/* ==================== FILTER BUTTONS WITH BADGES ==================== */

.filter-buttons {
    display: flex;
    gap: 12px;
    align-items: center;
}

.btn-filter {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: var(--card);
    border: 2px solid var(--border);
    border-radius: var(--r2);
    color: var(--txt3);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    position: relative;
}

.btn-filter:hover {
    border-color: var(--sky);
    color: var(--sky);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(2, 132, 199, 0.15);
}

.btn-filter.active {
    background: linear-gradient(135deg, var(--sky) 0%, var(--sky-h) 100%);
    border-color: var(--sky);
    color: white;
    box-shadow: 0 4px 12px rgba(2, 132, 199, 0.3);
}

.btn-filter i {
    font-size: 14px;
}

.filter-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0 8px;
    background: rgba(2, 132, 199, 0.15);
    color: var(--sky);
    font-size: 12px;
    font-weight: 700;
    border-radius: var(--r1);
    transition: all 0.3s ease;
}

.btn-filter.active .filter-badge {
    background: rgba(255, 255, 255, 0.25);
    color: white;
}

/* ==================== LOGIN ATTEMPTS PAGE STYLES ==================== */

.stat-card h3 {
    margin: 0 0 12px 0;
    font-size: 13px;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}

.stat-card .value {
    font-size: 36px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1;
}

.stat-card.success .value {
    color: var(--em);
}

.stat-card.failed .value {
    color: var(--rose);
}

.table-wrapper {
    background: var(--card-bg);
    border-radius: var(--r1);
    overflow: hidden;
    margin-bottom: 30px;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
}

.table-wrapper table {
    width: 100%;
    border-collapse: collapse;
}

.table-wrapper thead {
    background: rgba(59, 130, 246, 0.05);
    border-bottom: 2px solid var(--border-color);
}

.table-wrapper th {
    padding: 16px;
    text-align: left;
    font-weight: 600;
    font-size: 13px;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.table-wrapper td {
    padding: 16px;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-primary);
    font-size: 14px;
}

.table-wrapper tbody tr {
    transition: background-color 0.15s ease;
}

.table-wrapper tbody tr:hover {
    background: rgba(59, 130, 246, 0.03);
}

.table-wrapper tbody tr:last-child td {
    border-bottom: none;
}

.badge.success {
    background: rgba(16, 185, 129, 0.1);
    color: var(--em);
}

.badge.failed {
    background: rgba(239, 68, 68, 0.1);
    color: var(--rose);
}

.btn-clear {
    padding: 8px 16px;
    background: var(--rose);
    color: white;
    border: none;
    border-radius: var(--r2);
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.btn-clear:hover {
    background: var(--rose);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}

.btn-clear:active {
    transform: translateY(0);
}

.btn-clear i {
    font-size: 12px;
}

.cleanup-actions {
    margin-bottom: 30px;
    padding: 24px;
    background: var(--card-bg);
    border-radius: var(--r1);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
}

.cleanup-actions h3 {
    margin: 0 0 16px 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 8px;
}

.cleanup-actions h3 i {
    color: var(--primary-color);
}

.cleanup-actions form {
    display: inline-block;
    margin-right: 10px;
}

/* ==================== MAINTENANCE PAGE STYLES ==================== */

.maintenance-preview {
    background: var(--page);
    border: 1px solid var(--border);
    border-radius: var(--r2);
    padding: 30px;
    margin-top: 20px;
    text-align: center;
}

.maintenance-preview h1 {
    color: var(--txt);
    font-size: 2.5rem;
    margin-bottom: 15px;
}

.maintenance-preview h2 {
    color: var(--txt2);
    font-size: 1.5rem;
    margin-bottom: 20px;
}

.maintenance-preview .description {
    color: var(--txt2);
    margin-bottom: 30px;
}

.countdown-preview {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 30px;
}

.countdown-item {
    background: var(--card);
    padding: 20px;
    border-radius: var(--r2);
    min-width: 100px;
}

.countdown-item .number {
    font-size: 2.5rem;
    font-weight: bold;
    color: var(--sky);
}

.countdown-item .label {
    font-size: 0.875rem;
    color: var(--txt2);
    margin-top: 5px;
}

.form-group-editor {
    margin-bottom: 20px;
}

.form-group-editor label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
}

.status-indicator {
    display: inline-block;
    padding: 8px 16px;
    border-radius: var(--r3);
    font-weight: 500;
    margin-bottom: 20px;
}

.status-enabled {
    background: var(--status-success-light);
    color: var(--em);
    border: 1px solid var(--status-success-light);
}

.status-disabled {
    background: var(--status-error-light);
    color: var(--rose);
    border: 1px solid var(--status-error-light);
}

.data-table thead tr th:nth-child(1),
.data-table tbody tr td:nth-child(1) {
    text-align: center !important;
}

.card:hover {
    box-shadow: 0 8px 24px rgba(2, 132, 199, 0.15);
    transform: translateY(-2px);
}

.card-header::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, var(--primary-teal) 0%, var(--sky-h) 100%);
}

.card-header h2,
.card-header h3 {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    color: var(--txt);
    display: flex;
    align-items: center;
    gap: 12px;
    letter-spacing: -0.02em;
}

.card-header h2 i,
.card-header h3 i {
    color: var(--primary-teal);
    font-size: 22px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(2, 132, 199, 0.1);
    border-radius: var(--r2);
}

.table-responsive {
    overflow-x: auto;
}

.section-header-analytics {
    margin: 40px 0 28px 0;
    padding: 28px 36px;
    background: linear-gradient(135deg, var(--sky) 0%, var(--sky-h) 100%);
    border-radius: var(--r1);
    display: flex;
    align-items: center;
    gap: 24px;
    box-shadow: 0 8px 24px rgba(2, 132, 199, 0.25);
    position: relative;
    overflow: hidden;
}

.section-header-analytics::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, transparent 0%, rgba(255, 255, 255, 0.1) 100%);
    pointer-events: none;
}

.section-header-analytics::after {
    content: '';
    position: absolute;
    top: -50%;
    right: -5%;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.15) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.section-header-analytics-icon {
    width: 64px;
    height: 64px;
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(10px);
    border-radius: var(--r1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 30px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}

.section-header-analytics-content {
    position: relative;
    z-index: 1;
}

.section-header-analytics-content h2 {
    margin: 0;
    font-size: 28px;
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.03em;
    line-height: 1.2;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.section-header-analytics-content p {
    margin: 8px 0 0 0;
    font-size: 15px;
    color: rgba(255, 255, 255, 0.95);
    font-weight: 400;
}

.data-table thead tr th:nth-child(5),
.data-table tbody tr td:nth-child(5) {
    text-align: center !important;
}

.data-table thead tr th:nth-child(6),
.data-table tbody tr td:nth-child(6) {
    text-align: center !important;
}

.data-table tbody tr td:nth-child(6) button {
    margin: 0 auto;
    display: inline-block;
}

/* Support Tickets View - view_ticket.php */

.ticket-info::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--sky) 0%, var(--sky) 100%);
}

.info-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.messages-box::-webkit-scrollbar {
    width: 8px;
}

.messages-box::-webkit-scrollbar-track {
    background: var(--page);
    border-radius: var(--r2);
}

.messages-box::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, var(--sky) 0%, var(--sky-h) 100%);
    border-radius: var(--r2);
}

.messages-box::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, var(--sky-h) 0%, var(--sky-h) 100%);
}

.msg:hover {
    background: var(--page);
    transform: translateX(4px);
}

.msg:last-child {
    margin-bottom: 0;
}

.msg-admin .msg-avatar::after {
    content: '';
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 16px;
    height: 16px;
    background: var(--em);
    border: 2px solid white;
    border-radius: 50%;
}

.msg-admin .msg-author::before {
    content: '';
    width: 8px;
    height: 8px;
    background: var(--sky);
    border-radius: 50%;
    display: inline-block;
}

.form-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--sky) 0%, var(--em) 100%);
}

.form-card h3 i {
    color: var(--sky);
    font-size: 21px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--sky-ll) 0%, var(--sky-ll) 100%);
    border-radius: var(--r2);
}

.form-group textarea,
.form-group select,

.form-group textarea:focus,

.layout-2col {
    display: flex;
    gap: 28px;
}

.col-main {
    flex: 1;
}

.col-side {
    width: 360px;
}

.info-box::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    bottom: 0;
    background: linear-gradient(180deg, var(--sky) 0%, var(--em) 100%);
    border-radius: var(--r1) 0 0 16px;
}

.info-box h3 i {
    color: var(--sky);
    font-size: 18px;
}

.info-row {
    padding: 16px 12px;
    border-radius: var(--r2);
    margin-bottom: 8px;
    background: var(--card);
    transition: all 0.2s ease;
}

.info-row:hover {
    background: var(--page);
    transform: translateX(4px);
}

.info-row:last-child {
    margin-bottom: 0;
}

.info-row-label {
    font-size: 12px;
    color: var(--txt3);
    margin-bottom: 6px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.info-row-label i {
    color: var(--sky);
    font-size: 13px;
}

.info-row-value {
    font-size: 15px;
    color: var(--txt);
    font-weight: 700;
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.msg:nth-child(2) {
    animation-delay: 0.1s;
}

.msg:nth-child(3) {
    animation-delay: 0.2s;
}

.msg:nth-child(4) {
    animation-delay: 0.3s;
}

/* Button improvements for view_ticket.php */

.form-card .btn {
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.form-card .btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
    z-index: -1;
}

.form-card .btn:hover::before {
    width: 300px;
    height: 300px;
}

.messages-box:empty::after {
    content: 'Сообщений пока нет';
    display: flex;
    align-items: center;
    justify-content: center;
    height: 200px;
    color: var(--txt3);
    font-size: 16px;
    font-weight: 500;
}

.btn[disabled] {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
}

/* Focus improvements for accessibility */

.form-group textarea:focus-visible,
.form-group select:focus-visible,
.form-group input[type="file"]:focus-visible {
    outline: none;
    outline-offset: 0;
}

.info-box hr {
    border: none;
    height: 2px;
    background: linear-gradient(90deg, transparent 0%, var(--border) 50%, transparent 100%);
    margin: 20px 0;
}

/* ── Кнопка «Обновить Sitemap» в шапке дашборда ── */

.btn-sitemap-gen {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 9px 18px;
    background: linear-gradient(135deg, var(--sky), var(--teal));
    color: #fff; font-size: .875rem; font-weight: 600;
    border: none; border-radius: var(--r2); cursor: pointer;
    transition: opacity .2s, transform .15s;
    white-space: nowrap;
}

.btn-sitemap-gen:hover { opacity: .88; transform: translateY(-1px); }

.sitemap-alert {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 16px; border-radius: var(--r2);
    font-size: .875rem; font-weight: 500;
    margin-bottom: 16px;
}

.sitemap-alert-ok  { background: rgba(20,184,166,.1); border: 1px solid rgba(20,184,166,.3); color: var(--sky-h); }

.sitemap-alert-err { background: rgba(239,68,68,.08); border: 1px solid rgba(239,68,68,.25); color: var(--rose); }

/* БАЗОВЫЙ СТИЛЬ - применяется ко ВСЕМ btn-icon */

.btn-icon,
button.btn-icon,
a

/* Просмотр - Синяя */

/* Синхронизация - Фиолетовая */

/* Редактирование - Бирюзовая */

/* Активация - Зеленая */

/* Блокировка - Красная */

/* ДЕМО - Желтая/Серая */

/* Удаление - Бирюзовая (как корзина на скриншоте) */

/* Иконки внутри */

/* ================================================================
   КНОПКИ ДЕЙСТВИЙ - ФИНАЛЬНАЯ ВЕРСИЯ 28x28
   ================================================================ */

.btn-icon,
button.btn-icon,
a.btn-icon {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;
    max-width: 28px !important;
    max-height: 28px !important;
    padding: 0 !important;
    margin: 0 2px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: var(--r3) !important;
    border: none !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    font-size: 12px !important;
    text-decoration: none !important;
    box-sizing: border-box !important;
    vertical-align: middle !important;
}

.btn-icon i {
    font-size: 12px !important;
    line-height: 1 !important;
    color: inherit !important;
}

.btn-icon.btn-view {
    background: rgba(59, 130, 246, 0.1) !important;
    color: var(--sky) !important;
}

.btn-icon.btn-view:hover {
    background: var(--sky) !important;
    color: white !important;
    transform: translateY(-2px);
}

.btn-icon.btn-sync {
    background: rgba(139, 92, 246, 0.1) !important;
    color: var(--vio) !important;
}

.btn-icon.btn-sync:hover {
    background: var(--vio) !important;
    color: white !important;
    transform: translateY(-2px);
}

.btn-icon.btn-edit {
    background: rgba(2, 132, 199, 0.1) !important;
    color: var(--sky) !important;
}

.btn-icon.btn-edit:hover {
    background: var(--sky) !important;
    color: white !important;
    transform: translateY(-2px);
}

.btn-icon.btn-activate {
    background: rgba(16, 185, 129, 0.1) !important;
    color: var(--em) !important;
}

.btn-icon.btn-activate:hover {
    background: var(--em) !important;
    color: white !important;
    transform: translateY(-2px);
}

.btn-icon.btn-block {
    background: rgba(239, 68, 68, 0.1) !important;
    color: var(--rose) !important;
}

.btn-icon.btn-block:hover {
    background: var(--rose) !important;
    color: white !important;
    transform: translateY(-2px);
}

.btn-icon.btn-demo {
    background: rgba(156, 163, 175, 0.1) !important;
    color: var(--txt3) !important;
}

.btn-icon.btn-demo.active {
    background: rgba(251, 191, 36, 0.2) !important;
    color: var(--am) !important;
}

.btn-icon.btn-demo:hover {
    background: var(--am) !important;
    color: white !important;
    transform: translateY(-2px);
}

.btn-icon.btn-delete {
    background: rgba(2, 132, 199, 0.15) !important;
    color: var(--sky) !important;
}

.btn-icon.btn-delete:hover {
    background: var(--sky) !important;
    color: white !important;
    transform: translateY(-2px);
}

/* ==================== USER DASHBOARD - MODERN DESIGN ==================== */

.user-dashboard {
    display: flex;
    background: linear-gradient(135deg, var(--sky-ll) 0%, var(--sky-ll) 50%, var(--sky-ll) 100%);
    position: relative;
    animation: fadeInUp 0.6s ease;
    min-height: 100vh;
}

.user-dashboard::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        radial-gradient(circle at 20% 30%, rgba(2, 132, 199, 0.05) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(59, 130, 246, 0.05) 0%, transparent 50%);
    pointer-events: none;
    z-index: 0;
}

/* ==================== SIDEBAR ==================== */

.sidebar-link.active .badge {
    background: rgba(255, 255, 255, 0.3);
    color: white;
}

/* ==================== MAIN CONTENT ==================== */

/* ==================== TOP BAR ==================== */

.dashboard-topbar {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    padding: 20px 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(226, 232, 240, 0.6);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
    position: relative;
    z-index: 5;
}

.topbar-left {
    display: flex;
    align-items: center;
    gap: 20px;
}

.sidebar-toggle {
    width: 40px;
    height: 40px;
    border-radius: var(--r2);
    border: none;
    background: rgba(2, 132, 199, 0.1);
    color: var(--sky);
    font-size: 18px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sidebar-toggle:hover {
    background: rgba(2, 132, 199, 0.2);
    transform: scale(1.05);
}

.topbar-breadcrumb {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--txt2);
    font-size: 15px;
    font-weight: 500;
}

.topbar-breadcrumb i {
    color: var(--sky);
    font-size: 16px;
}

.topbar-right {
    display: flex;
    align-items: center;
    gap: 20px;
}

.topbar-user {
    display: flex;
    align-items: center;
    gap: 12px;
}

.user-info {
    display: flex;
    flex-direction: column;
}

.user-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--txt);
}

.user-role {
    font-size: 13px;
    color: var(--txt2);
}

/* ==================== DASHBOARD CONTENT ==================== */

/* ==================== DASHBOARD HEADER ==================== */

.role-admin {
    background: linear-gradient(135deg, var(--am) 0%, var(--am) 100%);
    color: var(--txt);
    animation: pulse 2s ease infinite;
}

.role-user {
    background: linear-gradient(135deg, var(--sky) 0%, var(--sky-h) 100%);
    color: #fff;
    animation: pulse 2s ease infinite;
}

.role-badge i {
    font-size: 18px;
}

/* ==================== STATS GRID ==================== */

.stats-grid > * {
    min-width: 0;
}

.stats-grid.stats-grid-6 {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 15px;
}

.stats-grid.stats-grid-6 > * {
    min-width: 0;
}

.stat-card-warning .stat-icon {
    background: linear-gradient(135deg, var(--am) 0%, var(--am) 100%);
    color: white;
}

.stat-card-info .stat-icon {
    background: linear-gradient(135deg, var(--sky) 0%, var(--sky) 100%);
    color: white;
}

.stat-card-danger .stat-icon {
    background: linear-gradient(135deg, var(--rose) 0%, var(--rose) 100%);
    color: white;
}

.stat-trend {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 600;
    padding: 4px 8px;
    border-radius: var(--r2);
    line-height: 1.2;
}

.stat-trend-up {
    background: rgba(16, 185, 129, 0.1);
    color: var(--em);
}

.stat-trend-down {
    background: rgba(239, 68, 68, 0.1);
    color: var(--rose);
}

.stat-trend-neutral {
    background: rgba(100, 116, 139, 0.1);
    color: var(--txt2);
}

.stat-trend i {
    font-size: 12px;
}

/* ==================== CHARTS ROW ==================== */

.charts-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
    gap: 24px;
    margin-bottom: 40px;
}

.chart-card {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    border-radius: var(--r1);
    padding: 30px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(2, 132, 199, 0.1);
    animation: fadeInUp 0.6s ease backwards;
    animation-delay: 0.5s;
}

.chart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
    padding-bottom: 20px;
    border-bottom: 2px solid rgba(2, 132, 199, 0.1);
}

.chart-header h3 {
    font-size: 20px;
    font-weight: 700;
    color: var(--neutral-dark);
    display: flex;
    align-items: center;
    gap: 12px;
}

.chart-header h3 i {
    color: var(--primary-teal);
}

.chart-filter {
    padding: 8px 16px;
    border: 2px solid rgba(2, 132, 199, 0.2);
    border-radius: var(--r2);
    font-size: 14px;
    font-weight: 600;
    color: var(--neutral-dark);
    background: var(--card);
    cursor: pointer;
    transition: all 0.3s ease;
}

.chart-filter:hover {
    border-color: var(--primary-teal);
    background: rgba(2, 132, 199, 0.05);
}

.chart-body {
    min-height: 300px;
}

.chart-placeholder {
    height: 300px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(2, 132, 199, 0.05) 0%, rgba(59, 130, 246, 0.05) 100%);
    border-radius: var(--r1);
    border: 2px dashed rgba(2, 132, 199, 0.2);
}

.chart-placeholder i {
    font-size: 64px;
    color: var(--primary-teal);
    opacity: 0.3;
    margin-bottom: 15px;
}

.chart-placeholder p {
    color: var(--neutral-gray);
    font-weight: 600;
}

/* ==================== ACTIVITY SECTION ==================== */

.link-primary,

.link-primary:hover,

/* ==================== ACTIVITY TABLE ==================== */

.activity-table {
    overflow-x: auto;
}

.activity-table table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 8px;
}

.activity-table thead th {
    text-align: left;
    padding: 12px 16px;
    font-size: 12px;
    font-weight: 700;
    color: var(--neutral-gray);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 2px solid rgba(2, 132, 199, 0.1);
}

.activity-table tbody tr {
    background: var(--card);
    border-radius: var(--r1);
    transition: all 0.3s ease;
}

.activity-table tbody tr:hover {
    transform: translateX(5px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}

.activity-table tbody td {
    padding: 16px;
    font-size: 14px;
    color: var(--neutral-dark);
    border-top: 1px solid rgba(2, 132, 199, 0.05);
    border-bottom: 1px solid rgba(2, 132, 199, 0.05);
}

.activity-table tbody td:first-child {
    border-left: 1px solid rgba(2, 132, 199, 0.05);
    border-radius: var(--r1) 0 0 12px;
}

.activity-table tbody td:last-child {
    border-right: 1px solid rgba(2, 132, 199, 0.05);
    border-radius: 0 12px 12px 0;
}

.user-cell {
    display: flex;
    align-items: center;
    gap: 12px;
}

.user-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary-teal) 0%, var(--accent-blue) 100%);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 16px;
    flex-shrink: 0;
}

.status-success {
    background: rgba(16, 185, 129, 0.1);
    color: var(--em);
}

.status-info {
    background: rgba(59, 130, 246, 0.1);
    color: var(--sky);
}

/* ==================== QUICK ACTIONS ==================== */

.actions-grid,

.action-card:hover::before {
    left: 100%;
}

/* ==================== RESPONSIVE ==================== */

/* Старый медиа запрос удален - см. новый блок в конце файла */

/* ==================== WELCOME CARD ==================== */

.welcome-content h1 {
    font-size: 32px;
    font-weight: 700;
    color: var(--txt);
    margin: 0 0 12px 0;
}

.welcome-content p {
    font-size: 16px;
    color: var(--txt2);
    margin: 0;
}

.welcome-actions {
    display: flex;
    gap: 15px;
    flex-shrink: 0;
}

/* ==================== BUTTONS ==================== */

/* ==================== ACTION BUTTONS ==================== */

.action-buttons {
    display: flex;
    gap: 8px;
    justify-content: center;
    align-items: center;
}

.btn-info {
    background: linear-gradient(135deg, var(--sky) 0%, var(--sky) 100%);
    color: white;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
}

.btn-info:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
}

.btn-warning {
    background: linear-gradient(135deg, var(--am) 0%, var(--am) 100%);
    color: white;
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3);
}

.btn-warning:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.4);
}

.btn-sm i {
    font-size: 14px;
}

/* ==================== DASHBOARD GRID ==================== */

.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 24px;
    margin-bottom: 30px;
}

.card-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--r1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
}

.card-icon-primary {
    background: linear-gradient(135deg, rgba(2, 132, 199, 0.1) 0%, rgba(2, 132, 199, 0.2) 100%);
    color: var(--sky);
}

.card-icon-success {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.1) 0%, rgba(34, 197, 94, 0.2) 100%);
    color: var(--em);
}

.card-icon-warning {
    background: linear-gradient(135deg, rgba(251, 146, 60, 0.1) 0%, rgba(251, 146, 60, 0.2) 100%);
    color: var(--am);
}

.card-icon-info {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(59, 130, 246, 0.2) 100%);
    color: var(--sky);
}

.card-icon-danger {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.1) 0%, rgba(239, 68, 68, 0.2) 100%);
    color: var(--rose);
}

.card-icon-secondary {
    background: linear-gradient(135deg, rgba(100, 116, 139, 0.1) 0%, rgba(100, 116, 139, 0.2) 100%);
    color: var(--txt2);
}

.dashboard-card p {
    font-size: 14px;
    color: var(--txt2);
    line-height: 1.6;
    margin: 15px 0 20px 0;
}

.card-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--sky);
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    transition: gap 0.3s ease;
}

.card-link:hover {
    gap: 12px;
}

/* ==================== ACTIVITY SECTION ==================== */

.activity-section h2 {
    font-size: 22px;
    font-weight: 700;
    color: var(--txt);
    margin: 0 0 25px 0;
    display: flex;
    align-items: center;
    gap: 12px;
}

.activity-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.activity-item {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    padding: 20px;
    background: var(--page);
    border-radius: var(--r1);
    border-left: 4px solid transparent;
    transition: all 0.3s ease;
}

.activity-item:hover {
    background: var(--page);
    transform: translateX(4px);
}

.activity-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--r2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: white;
    flex-shrink: 0;
}

.activity-icon-success {
    background: linear-gradient(135deg, var(--em) 0%, var(--em) 100%);
}

.activity-icon-info {
    background: linear-gradient(135deg, var(--sky) 0%, var(--sky) 100%);
}

.activity-icon-warning {
    background: linear-gradient(135deg, var(--am) 0%, var(--am) 100%);
}

.activity-content {
    flex: 1;
}

.activity-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--txt);
    margin-bottom: 5px;
}

.activity-time {
    font-size: 13px;
    color: var(--txt3);
}

/* ==================== RESPONSIVE ==================== */

/* ==================== EXTRACTED INLINE STYLES ==================== */

.form-group input,.form-group select,.form-group textarea{width:100%;padding:12px;border:1px solid var(--border);border-radius:8px;font-size:14px;transition:all 0.3s}

.form-group input:focus,.form-group select:focus,.form-group textarea:focus{outline:none;border-color:var(--sky);box-shadow:0 0 0 3px rgba(20,184,166,0.1)}

.info-box{background:var(--sky-ll);border-left:4px solid var(--sky);padding:15px;border-radius:8px;margin-bottom:25px}

.info-box h3{margin:0 0 10px 0;color:var(--sky-h);font-size:16px}

.info-box ul{margin:0;padding-left:20px;color:var(--sky-h)}

.info-box ul li{margin-bottom:5px}

.welcome-card h2 {
            margin: 0 0 12px 0;
            font-size: 26px;
            font-weight: 700;
            color: #fff;
            text-shadow: 0 1px 2px rgba(0,0,0,0.1);
        }

.welcome-card i {
            margin-right: 8px;
        }

.welcome-card-details span {
            color: rgba(255,255,255,0.95);
            font-size: 15px;
            font-weight: 500;
        }

.points-value {
            font-size: 32px;
            font-weight: 700;
            color: #fff;
            text-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }

.points-label {
            font-size: 14px;
            font-weight: 600;
            color: rgba(255,255,255,0.9);
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

/* Старый медиа запрос удален - см. новый блок в конце файла */

.points-balance {
            background: linear-gradient(135deg, var(--sky) 0%, var(--sky-h) 100%);
            color: white;
            padding: 28px 32px;
            border-radius: var(--r1);
            margin-bottom: 24px;
            box-shadow: 0 4px 20px rgba(2, 132, 199, 0.25);
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

.points-balance-main {
            flex: 0 0 auto;
        }

.points-balance-details {
            display: flex;
            gap: 32px;
            align-items: center;
        }

.points-detail-item {
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 15px;
        }

.points-detail-item i {
            opacity: 0.75;
            font-size: 16px;
        }

.dashboard-header h1 i {
            margin-right: 10px;
        }

.stat-card .stat-label {
            color: var(--txt3);
            font-size: 14px;
            word-break: break-word;
            overflow-wrap: break-word;
            hyphens: auto;
            line-height: 1.2;
        }

.btn-modal {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 42px;
    padding: 0 22px;
    border-radius: var(--r2);
    border: none;
    box-sizing: border-box;
    cursor: pointer;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    transition: all .2s;
    white-space: nowrap;
}

.btn-modal-primary {
    background: var(--sky);
    color: #fff;
}
.btn-modal-primary:hover {
    background: var(--sky-h);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(2,132,199,.25);
}

.btn-modal-secondary {
    background: var(--sky);
    color: #fff;
}
.btn-modal-secondary:hover {
    background: var(--sky-h);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(2,132,199,.25);
}

.btn-icon.btn-danger {
            background: transparent !important;
            color: var(--txt3) !important;
        }

.btn-icon.btn-danger:hover {
            background: transparent !important;
            color: var(--rose) !important;
        }

.btn-icon.btn-danger i { color: inherit !important; }

/* From: pages/user/support_tickets.php */

.stat-icon.total{background:linear-gradient(135deg,var(--ind) 0%,var(--ind) 100%)}

.stat-icon.open{background:linear-gradient(135deg,var(--em) 0%,var(--em) 100%)}

.stat-icon.unread{background:linear-gradient(135deg,var(--am) 0%,var(--am) 100%)}

.stat-content h3{font-size:14px;color:var(--txt3);margin:0 0 5px 0;font-weight:500}

.stat-content p{font-size:32px;font-weight:700;color:var(--txt);margin:0}

.tickets-table{width:100%;background: var(--card);border-radius:12px;overflow:hidden;box-shadow:0 2px 8px rgba(0,0,0,0.05)}

.tickets-table table{width:100%;border-collapse:collapse}

.tickets-table th{background:var(--page);padding:15px;text-align:left;font-weight:600;color:var(--txt2);border-bottom:2px solid var(--border);font-size:15px}

.tickets-table td{padding:15px;border-bottom:1px solid var(--page);color:var(--txt);font-size:15px}

.tickets-table tr.unread{background:var(--status-warning-light)}

.tickets-table tr:hover{background:var(--page)}

.ticket-subject{font-weight:600;color:var(--txt);text-decoration:none;font-size:15px}

.ticket-subject:hover{color:var(--sky)}

/* From: pages/user/view_responses.php */

/* Карточки откликов - УЛУЧШЕННЫЙ ДИЗАЙН */

.response-card:nth-child(1) { animation-delay: 0.1s; }

.response-card:nth-child(2) { animation-delay: 0.2s; }

.response-card:nth-child(3) { animation-delay: 0.3s; }

.response-card:nth-child(4) { animation-delay: 0.4s; }

.response-card:nth-child(5) { animation-delay: 0.5s; }

.response-card.status-accepted::before {
            background: linear-gradient(180deg, var(--em) 0%, var(--em) 100%);
            width: 5px;
        }

.response-card.status-rejected::before {
            background: linear-gradient(180deg, var(--rose) 0%, var(--rose) 100%);
            width: 5px;
        }

.response-card.status-new::before,
        .response-card.status-viewed::before {
            background: var(--primary-color);
        }

.file-item:hover::before {
            width: 6px;
        }

/* Единый стиль для всех кнопок-статусов (как на картинке) */

/* Используем .response-card для избежания конфликтов с сайдбаром */

.response-card .badge,
        .footer-actions .badge {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            padding: 10px 24px;
            border-radius: 50px;
            font-size: 14px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            border: none;
            min-width: 150px;
            transition: all 0.3s ease;
        }

.response-card .badge i,
        .footer-actions .badge i {
            font-size: 14px;
        }

.response-card .badge-primary,
        .footer-actions .badge-primary { 
            background: var(--sky-l);
            color: var(--teal);
        }

.response-card .badge-info,
        .footer-actions .badge-info { 
            background: var(--sky-l);
            color: var(--teal);
        }

.response-card .badge-success,
        .footer-actions .badge-success { 
            background: var(--em);
            color: white;
        }

.response-card .badge-danger,
        .footer-actions .badge-danger { 
            background: var(--rose);
            color: white;
        }

.response-card .badge-warning,
        .footer-actions .badge-warning { 
            background: var(--am);
            color: white;
        }

.info-item::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            width: 3px;
            background: var(--primary-color);
            border-radius: var(--radius-full);
        }

.info-item strong {
            display: flex;
            align-items: center;
            gap: var(--spacing-xs);
            color: var(--gray-500);
            font-size: var(--font-size-xs);
            margin-bottom: var(--spacing-xs);
            text-transform: uppercase;
            font-weight: 600;
            letter-spacing: 0.5px;
        }

.info-item strong i {
            color: var(--primary-color);
        }

.info-item span {
            color: var(--gray-800);
            font-size: var(--font-size-lg);
            font-weight: 600;
            display: block;
        }

/* Единый стиль для кнопок действий (как на картинке) */

.btn-action:active::before {
            width: 300px;
            height: 300px;
        }

.btn-action:hover i {
            transform: scale(1.15);
        }

/* ОДОБРИТЬ - зеленый (как на картинке) */

/* ОТКЛОНИТЬ - красный (как на картинке) */

.rejection-reason strong {
            font-weight: 600;
        }

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(50px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.modal-body label {
            display: block;
            margin-bottom: var(--spacing-sm);
            font-weight: 600;
            color: var(--gray-700);
            font-size: var(--font-size-sm);
        }

.modal-body label span {
            color: var(--error-color);
            font-size: var(--font-size-lg);
        }

.modal-body textarea {
            width: 100%;
            min-height: 140px;
            padding: var(--spacing-md);
            border: 2px solid var(--gray-300);
            border-radius: var(--radius-md);
            font-family: var(--font-family);
            font-size: var(--font-size-sm);
            resize: vertical;
            transition: all var(--transition-base);
        }

.modal-body textarea:focus {
            outline: none;
            border-color: var(--primary-color);
            box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.1);
        }

.modal-body p {
            font-size: var(--font-size-xs);
            color: var(--gray-500);
            margin-top: var(--spacing-sm);
            display: flex;
            align-items: center;
            gap: var(--spacing-xs);
        }

.modal-body p i {
            color: var(--info-color);
        }

.modal-footer button {
            padding: var(--spacing-md) var(--spacing-xl);
            border: 2px solid;
            border-radius: var(--radius-md);
            font-size: var(--font-size-sm);
            font-weight: 600;
            cursor: pointer;
            transition: all var(--transition-base);
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

.modal-footer .btn-cancel {
            background: var(--card);
            border-color: var(--gray-300);
            color: var(--gray-700);
        }

.modal-footer .btn-cancel:hover {
            background: var(--gray-100);
            border-color: var(--gray-400);
        }

.modal-footer .btn-submit {
            background: var(--error-color);
            border-color: var(--error-color);
            color: white;
        }

.modal-footer .btn-submit:hover {
            background: var(--rose);
            border-color: var(--rose);
            box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4);
            transform: translateY(-2px);
        }

.modal-footer .btn-submit:disabled {
            background: var(--gray-300);
            border-color: var(--gray-300);
            color: var(--gray-500);
            cursor: not-allowed;
            transform: none;
        }

/* Старый медиа запрос удален - см. новый блок в конце файла */

.ticket-info{background: var(--card);padding:20px;border-radius:12px;margin-bottom:20px;display:flex;flex-wrap:wrap;gap:25px;box-shadow:0 2px 8px rgba(0,0,0,0.08);border:1px solid var(--border)}

.info-label{font-weight:600;color:var(--txt3);font-size:15px}

.info-item>span:not(.info-label){font-size:15px;font-weight:500}

.status-open{background:var(--sky-l);color:var(--em)}

.status-closed{background:var(--border);color:var(--txt2)}

.messages-box{background: var(--card);border-radius:12px;padding:25px;box-shadow:0 2px 8px rgba(0,0,0,0.08);margin-bottom:20px;max-height:650px;overflow-y:auto;border:1px solid var(--border)}

.msg{display:flex;gap:15px;margin-bottom:20px}

.msg-avatar{width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0;box-shadow:0 2px 8px rgba(0,0,0,0.12)}

.msg-user .msg-avatar{background:linear-gradient(135deg,var(--sky) 0%,var(--sky-h) 100%);color:white}

.msg-admin .msg-avatar{background:linear-gradient(135deg,var(--sky) 0%,var(--sky) 100%);color:white}

.msg-content{flex:1;background:var(--page);padding:16px 20px;border-radius:12px;border:1px solid var(--border)}

.msg-admin .msg-content{background:var(--sky-ll);border-color:var(--sky-l)}

.msg-header{display:flex;justify-content:space-between;margin-bottom:10px;align-items:center}

.msg-author{font-weight:700;color:var(--txt);font-size:16px}

.msg-time{font-size:13px;color:var(--txt3);font-weight:500}

.msg-text{color:var(--txt2);line-height:1.6;font-size:16px}

.msg-att{margin-top:12px;display:inline-flex;align-items:center;gap:10px;padding:10px 16px;background: var(--card);border:2px solid var(--sky);border-radius:8px;font-size:15px;transition:all 0.2s ease;text-decoration:none}

.msg-att:hover{background:var(--sky-ll);transform:translateY(-2px);box-shadow:0 4px 12px rgba(20,184,166,0.15)}

.msg-att i{color:var(--sky);font-size:18px}

.msg-att a{color:var(--sky);text-decoration:none;font-weight:600;font-size:15px}

.msg-att a:hover{color:var(--sky-h)}

.form-card h3{margin:0 0 20px 0;font-size:20px;color:var(--txt);font-weight:700;display:flex;align-items:center;gap:10px}

.file-input-wrapper{position:relative;width:100%;margin-top:8px}

.file-input-wrapper input[type=file]{position:absolute;opacity:0;width:100%;height:100%;cursor:pointer;z-index:2}

.file-input-label{display:flex;align-items:center;gap:12px;padding:16px 20px;background:var(--card);border:1px solid var(--sky);border-radius:10px;font-size:16px;color:var(--txt3);font-weight:500;cursor:pointer;transition:all 0.2s ease}

.file-input-label:hover{background:var(--card);border-color:var(--sky);color:var(--sky)}

.file-input-label i{font-size:22px;color:var(--sky)}

/* ==================== MY POINTS PAGE STYLES ==================== */

.points-balance-value {
    font-size: 48px;
    font-weight: 700;
    margin: 10px 0;
}

.points-balance-label {
    font-size: 14px;
    opacity: 0.9;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.points-amount {
    font-weight: 600;
    font-size: 14px;
    padding: 4px 12px;
    border-radius: var(--r3);
    display: inline-block;
}

.points-amount.income {
    background: rgba(16, 185, 129, 0.1);
    color: var(--em);
}

.points-amount.expense {
    background: rgba(239, 68, 68, 0.1);
    color: var(--rose);
}

/* ==================== TARIFF MODAL STYLES ==================== */

.tariffs-modal-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
    margin-bottom: 24px;
}

.tariff-modal-card {
    background: linear-gradient(135deg, var(--card) 0%, var(--page) 100%);
    border: 2px solid var(--border);
    border-radius: var(--r1);
    padding: 28px 24px 24px 24px;
    text-align: center;
    position: relative;
    transition: all 0.3s ease;
}

.tariff-modal-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(99, 102, 241, 0.2);
    border-color: var(--ind);
}

.tariff-modal-badge {
    position: absolute;
    top: -10px;
    right: 10px;
    padding: 6px 14px;
    border-radius: var(--r1);
    font-size: 12px;
    font-weight: 700;
    color: white;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.tariff-modal-badge.discount {
    background: linear-gradient(135deg, var(--am) 0%, var(--rose) 100%);
}

.tariff-modal-badge.base {
    background: linear-gradient(135deg, var(--ind) 0%, var(--vio) 100%);
}

.tariff-modal-name {
    font-size: 20px;
    font-weight: 700;
    color: var(--txt);
    margin: 24px 0 16px 0;
}

.tariff-modal-points {
    background: linear-gradient(135deg, var(--sky-ll) 0%, var(--sky-ll) 100%);
    border-radius: var(--r2);
    padding: 16px;
    margin-bottom: 16px;
}

.tariff-modal-points i {
    color: var(--sky);
    font-size: 24px;
    display: block;
    margin-bottom: 8px;
}

.tariff-modal-points .points-value {
    font-size: 32px;
    font-weight: 800;
    background: linear-gradient(135deg, var(--sky) 0%, var(--sky-h) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.tariff-modal-points .points-label {
    font-size: 14px;
    color: var(--txt2);
    margin-top: 4px;
}

.tariff-modal-price {
    margin-bottom: 16px;
}

.tariff-modal-price .price-old {
    color: var(--txt3);
    font-size: 14px;
    text-decoration: line-through;
    margin-bottom: 4px;
}

.tariff-modal-price .price-new {
    font-size: 28px;
    font-weight: 800;
    color: var(--sky-h);
}

.tariff-modal-desc {
    font-size: 13px;
    color: var(--txt2);
    line-height: 1.6;
    margin-bottom: 20px;
    min-height: 50px;
}

.modal-info-box {
    background: var(--sky-ll);
    border-left: 4px solid var(--sky);
    padding: 16px;
    border-radius: var(--r2);
    display: flex;
    gap: 12px;
    align-items: start;
    font-size: 14px;
    color: var(--sky-h);
}

.modal-info-box i {
    font-size: 20px;
    flex-shrink: 0;
    margin-top: 2px;
}

/* ==================== WELCOME CARD STRUCTURE ==================== */

.welcome-card-points {
    text-align: center;
    padding: 0 20px;
    border-left: 1px solid rgba(255,255,255,0.3);
}

.welcome-card-points .points-value {
    font-size: 36px;
    font-weight: 700;
    margin-bottom: 5px;
}

.welcome-card-points .points-label {
    font-size: 13px;
    opacity: 0.9;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* ==================== REQUEST INFO CARDS (view_responses.php) ==================== */

/* Старые медиа запросы удалены - см. новый блок в конце файла */

/* ==================== RESPONSIVE STYLES FOR MOBILE & TABLET ==================== */

@media (max-width: 1024px) and (min-width: 769px) {

  .welcome-card {
        padding: 30px;
    }

  .welcome-card-content {
        flex-direction: row;
        gap: 20px;
    }

  .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

  .dashboard-tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

  .tab-buttons {
        flex-wrap: nowrap;
        min-width: min-content;
    }

  .dashboard-card table.data-table th,
    .activity-table table th {
        font-size: 10px;
        padding: 8px 4px;
        white-space: nowrap;
    }

  .dashboard-card table.data-table td,
    .activity-table table td {
        font-size: 12px;
        padding: 8px 4px;
    }

  .dashboard-card table.data-table th:nth-child(4),
    .dashboard-card table.data-table td:nth-child(4),
    .activity-table table th:nth-child(4),
    .activity-table table td:nth-child(4) {
        display: none;
    }

  .dashboard-card table.data-table .badge,
    .activity-table table .badge {
        padding: 2px 6px;
        font-size: 11px;
    }

  .dashboard-card table.data-table td span[style*="background"],
    .activity-table table td span[style*="background"] {
        padding: 2px 8px;
        font-size: 11px;
    }

  .dashboard-header {
        gap: 16px;
    }

  .dashboard-header h1 {
        font-size: 24px;
    }

  .dashboard-header p {
        font-size: 13px;
    }

  .stat-card {
        padding: 16px;
    }

  .stat-icon {
        width: 50px;
        height: 50px;
        font-size: 22px;
    }

  .stat-value {
        font-size: 26px;
    }

  .stat-label {
        font-size: 12px;
    }

  .filters-box {
        padding: 18px;
    }

  .filters-row {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }

  .filter-group:last-child {
        grid-column: 1 / -1;
    }

  .filter-group input,
    .filter-group select {
        padding: 10px 14px;
        font-size: 13px;
    }

  .dashboard-card > div:first-child {
        padding: 16px 20px !important;
    }

  .per-page-selector {
        font-size: 13px;
    }

  .per-page-selector select {
        padding: 6px 10px;
        font-size: 13px;
    }

  .data-table thead {
        display: none;
    }

  .data-table tbody tr {
        display: block;
        margin-bottom: 16px;
        border: 2px solid var(--border);
        border-radius: var(--r2);
        background: var(--card);
        box-shadow: 0 1px 3px rgba(0,0,0,0.05);
        overflow: hidden;
    }

  .data-table tbody td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 12px 16px !important;
        border-bottom: 1px solid var(--page);
        text-align: right !important;
        min-height: auto;
        width: 100%;
        box-sizing: border-box;
    }

  .data-table tbody td:last-child {
        border-bottom: none;
    }

  .data-table tbody td::before {
        content: attr(data-label);
        font-weight: 600;
        color: var(--txt2);
        margin-right: 12px;
        text-align: left;
        flex: 0 0 auto;
        max-width: 45%;
    }

  .data-table tbody td > * {
        text-align: right;
    }

  .action-buttons {
        justify-content: flex-end;
        flex-wrap: nowrap;
        gap: 8px;
    }

  .table-container {
        overflow-x: visible;
    }

  .form-row {
        grid-template-columns: 1fr;
    }

  .dashboard-card > div {
        padding: 28px;
    }

  .dashboard-card h3 {
        font-size: 18px;
    }

  .stats-grid,
    .crm-stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

  .layout-main {
        grid-template-columns: 1fr;
    }

  .sidebar-section {
        display: none;
    }

  .filters-actions {
        grid-column: 1 / -1;
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
    }

  .filters-actions .btn {
        flex: 1 1 auto;
        min-width: 150px;
    }

  .kanban-board {
        grid-template-columns: 1fr;
        gap: 14px;
    }

  .kanban-column {
        min-height: auto;
        max-height: none;
    }

  #list-view {
        padding: 0;
    }

  #tasks-list {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

  .crm-task-item {
        display: flex !important;
        flex-direction: column !important;
        padding: 10px !important;
        background: var(--card) !important;
        border: 1.5px solid var(--border) !important;
        border-radius: var(--r2) !important;
        box-shadow: 0 1px 3px rgba(0,0,0,0.05) !important;
    }

  .crm-task-item.overdue {
        background: var(--status-error-light) !important;
        border-color: var(--status-error-light) !important;
    }

  .crm-task-item.high-priority {
        border-left: 3px solid var(--rose) !important;
    }

  .crm-task-header {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 8px !important;
        margin-bottom: 8px !important;
    }

  .crm-task-date {
        font-size: 11px;
        font-weight: 600;
        color: var(--txt3);
        white-space: nowrap;
    }

  .crm-task-actions {
        margin-left: auto;
        display: flex;
        gap: 4px;
    }

  .btn-icon {
        width: 28px;
        height: 28px;
        padding: 0;
        border: none;
        background: var(--page);
        color: var(--txt3);
        border-radius: var(--r3);
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.2s;
    }

  .btn-icon:hover {
        background: var(--border);
        color: var(--txt2);
    }

  .btn-icon i {
        font-size: 12px;
    }

  .crm-task-content {
        margin-bottom: 8px;
    }

  .crm-task-text {
        font-size: 13px;
        font-weight: 600;
        color: var(--txt);
        line-height: 1.4;
        margin-bottom: 4px;
    }

  .crm-task-notes {
        font-size: 12px;
        font-style: italic;
        color: var(--txt3);
        padding: 6px 10px;
        background: var(--page);
        border-left: 2px solid var(--sky);
        border-radius: 4px;
        margin-top: 4px;
    }

  .crm-task-footer {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        align-items: center;
    }

  .priority-badge {
        display: inline-block;
        padding: 3px 8px;
        border-radius: 4px;
        font-size: 10px;
        font-weight: 600;
    }

  .priority-badge.priority-high {
        background: var(--status-error-light);
        color: var(--rose);
    }

  .priority-badge.priority-medium {
        background: var(--status-warning-light);
        color: var(--am);
    }

  .priority-badge.priority-low {
        background: var(--sky-l);
        color: var(--sky-h);
    }

  .task-category-badge {
        display: inline-block;
        padding: 3px 8px;
        background: var(--sky-l);
        color: var(--em);
        border-radius: 4px;
        font-size: 10px;
        font-weight: 500;
    }

  .crm-task-status {
        margin-left: auto;
        display: flex;
        gap: 4px;
    }

  .crm-status-btn {
        padding: 5px 10px;
        border: 1px solid transparent;
        border-radius: 5px;
        cursor: pointer;
        font-size: 11px;
        display: flex;
        align-items: center;
        gap: 4px;
        transition: all 0.2s;
        font-weight: 500;
    }

  .crm-status-btn.complete {
        background: var(--sky-l);
        color: var(--em);
        border-color: var(--status-success-light);
    }

  .crm-status-btn.complete:hover {
        background: var(--em);
        color: white;
    }

  .crm-status-btn.cancel {
        background: var(--status-error-light);
        color: var(--rose);
        border-color: var(--status-error-light);
    }

  .crm-status-btn.cancel:hover {
        background: var(--rose);
        color: white;
    }

  .crm-status-btn.reopen {
        background: var(--sky-l);
        color: var(--sky-h);
        border-color: var(--sky-l);
    }

  .crm-status-btn.reopen:hover {
        background: var(--sky);
        color: white;
    }

  .points-balance {
        padding: 20px;
    }

  .points-balance-value {
        font-size: 36px;
    }

  .points-stats-wrapper {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 16px !important;
    }

  .points-stat-card {
        padding: 16px;
    }

  .points-stat-icon {
        width: 48px;
        height: 48px;
        font-size: 20px;
    }

  .points-stat-value {
        font-size: 24px;
    }

  .points-filters {
        padding: 18px 20px;
    }

  .points-filters-row {
        grid-template-columns: 1fr 1fr;
        gap: 14px;
    }

  .points-filter-group:last-child {
        grid-column: 1 / -1;
    }

  .points-filters-actions {
        gap: 10px;
    }

  .points-btn {
        flex: 1;
    }

  .viewers-table {
        font-size: 11px;
    }

  .viewers-table th,
    .viewers-table td {
        padding: 8px 6px;
    }

}

/* Small Mobile Styles (max-width: 480px) */

@media (max-width: 480px) {

  .dashboard-card {
        padding: 12px;
    }

  .dashboard-card table.data-table tbody tr,
    .activity-table table tbody tr {
        padding: 12px;
    }

  .dashboard-card table.data-table tbody td,
    .activity-table table tbody td {
        padding: 8px 0;
    }

  .dashboard-card table.data-table tbody td:before,
    .activity-table table tbody td:before {
        font-size: 11px;
        flex: 0 0 35%;
    }

  .dashboard-header h1 {
        font-size: 20px;
    }

  .dashboard-header p {
        font-size: 12px;
    }

  .role-badge {
        font-size: 11px;
        padding: 6px 12px;
    }

  .welcome-card {
        padding: 15px;
    }

  .welcome-card-info h2 {
        font-size: 16px;
    }

  .welcome-card-icon {
        width: 45px;
        height: 45px;
        font-size: 20px;
    }

  .stats-grid,
    .stats-grid.stats-grid-6 {
        grid-template-columns: 1fr;
    }

  .stat-card {
        padding: 12px;
    }

  .stat-icon {
        margin-left: auto;
        margin-right: auto;
    }

  .stat-content {
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

  .tab-button {
        flex: 1 1 100%;
    }

  .action-btn {
        padding: 12px;
    }

  .action-btn-content {
        gap: 10px;
    }

  .action-btn-icon {
        width: 40px;
        height: 40px;
        font-size: 18px;
    }

  .action-btn-title {
        font-size: 13px;
    }

  .action-btn-desc {
        font-size: 10px;
    }

  .section-header h2 {
        font-size: 16px;
    }

  .section-title {
        font-size: 16px;
    }

  .section-description {
        font-size: 11px;
    }

  .view-all-link {
        font-size: 12px;
    }

  .activity-table .hide-mobile,
    .dashboard-card .hide-mobile {
        display: none;
    }

  .stats-grid {
        gap: 10px;
    }

  .stat-value {
        font-size: 20px;
    }

  .filters-box {
        padding: 14px;
    }

  .dashboard-card > div:first-child {
        padding: 14px !important;
    }

  .data-table tbody tr {
        padding: 14px;
    }

  .dashboard-card > div {
        padding: 16px;
    }

  .dashboard-card h3 {
        font-size: 16px;
        margin-bottom: 18px;
        gap: 8px;
    }

  .save-button-container {
        padding: 18px 12px !important;
    }

  .save-button-container button {
        padding: 12px 16px;
        font-size: 15px;
    }

  .okved-row,
    .bank-row,
    .contact-row {
        padding: 14px;
    }

  .crm-container {
        padding: 10px 6px;
    }

  .stats-grid,
    .crm-stats-grid {
        grid-template-columns: 1fr !important;
        gap: 8px;
    }

  .stat-card,
    .crm-stat-card {
        padding: 10px;
    }

  .stat-value,
    .crm-stat-value {
        font-size: 16px !important;
    }

  .stat-label,
    .crm-stat-label {
        font-size: 9px !important;
    }

  .quick-actions-compact {
        grid-template-columns: repeat(3, 1fr);
        gap: 3px;
        margin-bottom: 6px;
    }

  .quick-btn {
        font-size: 8px !important;
        padding: 5px 3px !important;
        height: 26px !important;
    }

  .quick-btn i {
        font-size: 8px !important;
    }

  .compact-form-card {
        padding: 8px !important;
    }

  .form-card-header h3 {
        font-size: 12px !important;
    }

  .form-control-compact {
        font-size: 10px !important;
        padding: 6px 8px !important;
        margin-bottom: 5px !important;
        border-radius: 5px !important;
    }

  .form-control-compact::placeholder {
        font-size: 9px !important;
    }

  textarea.form-control-compact {
        min-height: 42px !important;
        max-height: 70px !important;
    }

  .form-row-compact {
        grid-template-columns: 1fr 1fr;
        gap: 4px;
        margin-bottom: 5px;
    }

  .form-row-compact input,
    .form-row-compact select {
        font-size: 10px !important;
    }

  .contact-search-input {
        font-size: 9px !important;
        padding: 6px 8px !important;
    }

  .btn-add-task {
        font-size: 11px !important;
        padding: 8px !important;
    }

  .crm-task-item {
        padding: 8px 10px;
    }

  .crm-task-header {
        gap: 4px !important;
        margin-bottom: 4px !important;
    }

  .crm-task-date {
        font-size: 8px !important;
    }

  .crm-task-text {
        font-size: 10px !important;
        margin-bottom: 3px !important;
    }

  .crm-task-notes {
        font-size: 9px !important;
    }

  .crm-task-footer {
        gap: 3px !important;
    }

  .btn-icon {
        width: 22px !important;
        height: 22px !important;
    }

  .btn-icon i {
        font-size: 8px !important;
    }

  .priority-badge {
        font-size: 7px !important;
        padding: 2px 5px !important;
    }

  .task-category-badge {
        font-size: 7px !important;
        padding: 2px 5px !important;
    }

  .crm-status-btn {
        font-size: 8px !important;
        padding: 3px 6px !important;
    }

  .pagination-btn {
        padding: 8px 12px;
        font-size: 11px;
    }

  .kanban-board {
        padding: 10px 6px;
        gap: 10px;
    }

  .kanban-board.active {
        display: flex !important;
        flex-direction: column !important;
    }

  #list-view {
        display: block;
    }

  #list-view.hidden {
        display: none !important;
    }

  .filters-actions .btn,
    .crm-btn {
        min-width: 0;
        flex: 1 1 100%;
        font-size: 12px;
    }

  .points-stat-card {
        padding: 12px;
    }

  .points-stat-icon {
        width: 40px;
        height: 40px;
        font-size: 16px;
    }

  .points-stat-content h4 {
        font-size: 11px;
    }

  .points-stat-content .points-value {
        font-size: 18px;
    }

  .module-stats-grid {
        grid-template-columns: 1fr;
    }

  .offers-hero h1 { font-size: 1.75rem; }

  .offers-hero__stats { gap: 10px; flex-wrap: wrap; justify-content: center; }

  .hero-stat { min-width: 70px; }

  .hero-stat__num { font-size: 1.25rem; }

  .offers-type-tab { padding: 6px 10px; font-size: .76rem; gap: 5px; }

  .offers-searchbar__inner { padding: 10px 12px; }

  .offers-grid { grid-template-columns: 1fr; }

  .offers-grid--list .offer-card { flex-direction: column; height: auto; }

  .offers-grid--list .offer-card__img { width: 100%; height: 160px; }

  .offer-card__body { padding: 14px 14px; }

  .offer-card__title { font-size: .9rem; }

  .offer-card__price { font-size: 1.05rem; }

  .qs-sort { flex: 1; width: 100%; }

  .offers-quickfilters { flex-wrap: wrap; }

  .offers-page-body { padding: 12px 10px 32px; }

  .companies-container {
        padding: 15px 10px;
    }

  .companies-hero h1 {
        font-size: 1.75rem;
    }

  .companies-hero p {
        font-size: 0.9rem;
    }

  .companies-controls {
        padding: 12px;
        gap: 12px;
    }

  .search-form input[type="text"],
    .search-form select,
    .search-form button {
        font-size: 13px;
        height: 40px;
        padding: 8px 12px;
    }

  .reset-btn {
        width: 40px;
        height: 40px;
    }

  .stat-compact {
        padding: 8px 12px;
    }

  .stat-compact i,
    .stat-compact span {
        font-size: 13px;
    }

  .company-item {
        padding: 14px;
        gap: 12px;
    }

  .company-item-logo {
        width: 90px;
        height: 90px;
        padding: 10px;
    }

  .company-item-logo-placeholder {
        font-size: 36px;
    }

  .company-item-name {
        font-size: 15px;
    }

  .company-item-fullname {
        font-size: 8.5px;
    }

  .badge {
        font-size: 7px;
        padding: 2px 5px;
    }

  .badge i {
        font-size: 7px;
    }

  .company-item-description {
        font-size: 12px;
    }

  .company-item-metadata {
        font-size: 10px;
        gap: 8px;
    }

  .metadata-item i {
        font-size: 11px;
    }

  .company-item-arrow {
        width: 32px;
        height: 32px;
        font-size: 12px;
    }

  .pagination-link {
        min-width: 32px;
        height: 32px;
        font-size: 11px;
    }

  .pagination-goto input {
        width: 55px;
        padding: 5px 8px;
        font-size: 11px;
    }

  .pagination-goto button {
        width: 30px;
        height: 30px;
    }

}

/* Landscape Mobile (max-height: 500px) */

@media (max-height: 500px) and (orientation: landscape) {

  .dashboard-sidebar {
        padding: 15px 0;
    }

  .sidebar-header {
        padding: 0 20px 15px;
        margin-bottom: 15px;
    }

  .sidebar-brand {
        font-size: 18px;
    }

  .sidebar-link {
        padding: 10px 20px;
        font-size: 13px;
    }

}

@media (hover: none) and (pointer: coarse) {

  .tab-button {
        min-height: 44px;
    }

  .action-btn {
        min-height: 60px;
    }

  .sidebar-link {
        min-height: 44px;
    }

  .stat-card:hover {
        transform: none;
    }

  .action-btn:hover {
        transform: none;
    }

  .tab-button:hover:not(.active) {
        background: transparent;
    }

}

input[readonly], textarea[readonly] {
    background: var(--page) !important;
    color: var(--txt3) !important;
    cursor: not-allowed !important;
    border-color: var(--border) !important;
}

input[readonly]:focus, textarea[readonly]:focus {
    box-shadow: none !important;
    border-color: var(--border) !important;
}

/* ═══════════════════════════════════════════════════════════════
   DASHBOARD — PORTAL 3.0 STYLE  (full-width)
   Переопределяет admin-dashboard.css + user-dashboard.css
   под дизайн-токены портала (portal-home.css :root)
   ═══════════════════════════════════════════════════════════════ */

/* ── Layout ── */

body.portal-body:has(.admin-dashboard) { padding-top: 0; }

.admin-dashboard {
  display: flex;
  min-height: 100vh;
  background: var(--page);
}

/* ── Sidebar ── */

.dashboard-sidebar {
  width: 250px;
  min-width: 250px;
  background: var(--txt);
  border-right: none;
  padding: 0;
  box-shadow: none;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  animation: none;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.1) transparent;
}

.sidebar-header {
  padding: 22px 20px 18px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  margin-bottom: 0;
  background: transparent;
}

.sidebar-brand {
  font-size: 15px;
  font-weight: 700;
  color: var(--page);
  font-family: 'Inter', system-ui, sans-serif;
  gap: 10px;
}

.sidebar-brand i {
  font-size: 20px;
  background: none;
  -webkit-background-clip: unset;
  -webkit-text-fill-color: var(--sky);
  background-clip: unset;
  color: var(--sky);
}

.sidebar-brand span {
  color: var(--page);
  -webkit-text-fill-color: var(--page);
}

.sidebar-nav { display: flex; flex-direction: column; padding: 10px 10px; gap: 2px; }

.sidebar-link {
  display: flex;
  align-items: center;
  padding: 9px 14px;
  border-radius: var(--r3);
  color: var(--txt3);
  font-weight: 500;
  font-size: 13px;
  transition: all .12s;
  gap: 10px;
  text-decoration: none;
  white-space: nowrap;
}

.sidebar-link i {
  font-size: 14px;
  width: 18px;
  color: var(--txt2);
  transition: color .12s;
}

.sidebar-link:hover {
  background: rgba(255,255,255,.06);
  color: var(--border);
  transform: none;
}

.sidebar-link:hover i {
  color: var(--border);
  transform: none;
}

.sidebar-link.active {
  background: var(--sky);
  color: #fff;
  box-shadow: 0 2px 8px rgba(2,132,199,.35);
}

.sidebar-link.active i { color: #fff; }

.sidebar-link.active .badge,
.sidebar-link.active .sidebar-badge {
  background: rgba(255,255,255,.2);
  color: #fff;
}

.sidebar-link .badge,
.sidebar-badge {
  margin-left: auto;
  background: rgba(255,255,255,.08);
  color: var(--txt3);
  padding: 2px 8px;
  border-radius: var(--r2);
  font-size: 11px;
  font-weight: 700;
}

.sidebar-link:hover .sidebar-badge {
  background: rgba(255,255,255,.12);
  color: var(--border);
}

.sidebar-footer {
  padding: 10px 10px 14px;
  border-top: 1px solid rgba(255,255,255,.08);
  margin-top: 8px;
}

.sidebar-link-website {
  background: rgba(2,132,199,.1);
  color: var(--sky);
  font-weight: 600;
}

.sidebar-link-website:hover {
  background: rgba(2,132,199,.18);
  color: var(--sky-l);
}

.sidebar-link-logout {
  background: rgba(225,29,72,.08);
  color: var(--rose);
  font-weight: 600;
}

.sidebar-link-logout:hover {
  background: rgba(225,29,72,.15);
  color: var(--status-error-light);
  transform: none;
}

/* ── Main Content — full width ── */

.dashboard-main {
  flex: 1;
  min-width: 0;
  overflow-x: hidden;
}

/* ── Dashboard Header ── */

.dashboard-header::before {
  content: '';
  position: absolute;
  top: -60%;
  right: -5%;
  width: 320px;
  height: 320px;
  background: radial-gradient(circle, rgba(2,132,199,.18), transparent 70%) !important;
  pointer-events: none;
}

.dashboard-header > * { position: relative; z-index: 1; }

.dashboard-header .header-left h1 {
  font-size: 26px;
  font-weight: 800;
  color: var(--page) !important;
  margin: 0 0 6px;
  letter-spacing: -.3px;
  background: none !important;
  -webkit-background-clip: unset !important;
  -webkit-text-fill-color: var(--page) !important;
  background-clip: unset !important;
  text-shadow: none;
}

.dashboard-header .header-left p {
  font-size: 14px;
  color: #fff !important;
  margin: 0;
  font-weight: 500;
}

.dashboard-header .btn-primary {
  background: #fff !important;
  color: var(--sky) !important;
  border: none;
}
.dashboard-header .btn-primary:hover {
  background: var(--page) !important;
  color: var(--sky-h) !important;
}
.dashboard-header .btn-primary i { color: var(--sky) !important; }

.dashboard-header .btn-outline,
.dashboard-header .btn-secondary {
  background: rgba(255,255,255,0.15) !important;
  color: #fff !important;
  border-color: rgba(255,255,255,0.4) !important;
}
.dashboard-header .btn-outline:hover,
.dashboard-header .btn-secondary:hover {
  background: rgba(255,255,255,0.25) !important;
  color: #fff !important;
}
.dashboard-header .btn-outline i,
.dashboard-header .btn-secondary i { color: #fff !important; }

.role-badge {
  padding: 6px 14px;
  border-radius: var(--r1);
  font-size: 12px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.role-badge.role-user {
  background: rgba(2,132,199,.15);
  color: var(--sky);
  border: 1px solid rgba(2,132,199,.25);
}

/* ── Welcome Card ── */

.welcome-card {
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r1);
  padding: 22px 26px !important;
  margin-bottom: 24px;
  box-shadow: var(--s1) !important;
  color: var(--txt) !important;
}

.welcome-card-content {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-direction: row !important;
  text-align: left !important;
}

.welcome-card-icon {
  width: 52px;
  height: 52px;
  border-radius: var(--r2);
  background: var(--sky);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.welcome-card-icon i { font-size: 22px; color: #fff; }

.welcome-card-info { flex: 1; min-width: 0; }

.welcome-card-info h2 {
  font-size: 18px;
  font-weight: 800;
  color: var(--txt) !important;
  margin: 0 0 10px;
  letter-spacing: -.2px;
  text-shadow: none !important;
}

.welcome-card-details {
  display: flex !important;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px !important;
  opacity: 1 !important;
  flex-direction: row !important;
}

/* WC-badges: единый стиль */
.welcome-card-details .wc-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border-radius: var(--r2);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  line-height: 1;
  height: 28px;
  text-transform: uppercase;
  letter-spacing: .3px;
  border: 1.5px solid;
}
.welcome-card-details .wc-badge i { font-size: 11px; flex-shrink: 0; }

.wc-badge-city   { background: var(--sky-ll)  !important; color: var(--sky-h) !important; border-color: var(--sky-l) !important; }
.wc-badge-city i { color: var(--sky) !important; }

.wc-badge-inn    { background: #ecfdf5 !important; color: var(--em)  !important; border-color: #a7f3d0 !important; }
.wc-badge-inn i  { color: var(--em) !important; }

.wc-badge-ogrn   { background: #ede9fe !important; color: var(--vio) !important; border-color: #c4b5fd !important; }
.wc-badge-ogrn i { color: var(--vio) !important; }

.wc-badge-vip    { background: #fffbeb !important; color: #b45309 !important; border-color: #fcd34d !important; }
.wc-badge-vip i  { color: #d97706 !important; }

.wc-badge-points   { background: #f5f3ff !important; color: var(--ind) !important; border-color: #c7d2fe !important; }
.wc-badge-points i { color: var(--ind) !important; }

/* ── Activity Chart ── */

.db-chart-wrap {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r1);
  box-shadow: var(--s1);
  margin-bottom: 24px;
  overflow: hidden;
}

.db-chart-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 22px 0;
  flex-wrap: wrap;
  gap: 10px;
}

.db-chart-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--txt);
  display: flex;
  align-items: center;
  gap: 8px;
}

.db-chart-title i { color: var(--sky); font-size: 15px; }

.db-chart-canvas {
  padding: 12px 18px 16px;
  height: 280px;
}

/* ── KPI Strip ── */

.db-kpi-strip {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r1);
  box-shadow: var(--s1);
  margin-bottom: 24px;
  overflow: hidden;
  padding: 20px 22px 14px;
}

.db-kpi-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--txt);
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 16px;
}

.db-kpi-title i { color: var(--sky); font-size: 15px; }

.db-kpi-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.kpi-row {
  display: flex;
  align-items: flex-start;
  padding: 14px 14px;
  gap: 10px;
  border: 1px solid var(--bord2);
  border-radius: var(--r2);
  transition: all .18s;
  flex-wrap: wrap;
  position: relative;
}

.kpi-row:hover {
  background: var(--page);
  transform: translateY(-1px);
  box-shadow: 0 3px 12px rgba(0,0,0,.06);
}

.kpi-dot {
  width: 36px;
  height: 36px;
  border-radius: var(--r2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 14px;
  background: currentColor;
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
}

.kpi-dot i {
  color: #fff;
  font-size: 14px;
}

.kpi-body {
  flex: 1;
  min-width: 0;
}

.kpi-head {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 5px;
}

.kpi-num {
  font-size: 20px;
  font-weight: 800;
  color: var(--txt);
  line-height: 1;
}

.kpi-lbl {
  font-size: 12px;
  font-weight: 600;
  color: var(--txt3);
}

.kpi-tags {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}

.db-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: var(--r2);
  font-size: 11px;
  font-weight: 600;
  background: var(--bord2);
  color: var(--txt2);
  white-space: nowrap;
  line-height: 1.4;
}

.db-tag i { font-size: 9px; }

.db-tag-em   { background: var(--sky-l); color: var(--em); }

.db-tag-am   { background: var(--status-warning-light); color: var(--am); }

.db-tag-rose { background: var(--status-error-light); color: var(--rose); }

.db-tag-sky  { background: var(--sky-l); color: var(--sky-h); }

.db-tag-muted { background: transparent; color: var(--txt3); padding: 3px 2px; }

/* ── Activity Sections ── */

.activity-section {
  margin-bottom: 24px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r1);
  padding: 20px 24px;
  box-shadow: var(--s1);
}

.activity-section .section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.activity-section .section-header h2 {
  font-size: 16px;
  font-weight: 700;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.section-header h2 i {
  font-size: 16px;
  color: var(--sky);
}

.view-all-link {
  font-size: 13px;
  font-weight: 600;
  color: var(--sky);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: all .14s;
  white-space: nowrap;
}

.view-all-link i { font-size: 10px; }
.view-all-link:hover { color: var(--sky-h); gap: 8px; }

/* ── Dashboard Card / Table ── */

.data-table { width: 100%; border-collapse: collapse; }

.data-table thead { background: var(--page); }

.data-table th {
  padding: 11px 16px;
  font-size: 11px;
  font-weight: 700;
  color: var(--txt3);
  text-transform: uppercase;
  letter-spacing: .5px;
  text-align: left;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.data-table td {
  padding: 11px 16px;
  font-size: 13px;
  color: var(--txt);
  border-bottom: 1px solid var(--bord2);
  vertical-align: middle;
}

.data-table tbody tr:last-child td { border-bottom: none; }

.data-table tbody tr:hover { background: var(--sky-ll); }

.data-table a {
  color: var(--sky) !important;
  text-decoration: none;
  font-weight: 600;
}

.data-table a:hover {
  color: var(--sky-h) !important;
  text-decoration: underline;
}

/* ── Quick Actions ── */

/* quick-actions теперь внутри activity-section */

.action-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.action-cards > a {
  flex: 1 1 auto;
  min-width: 120px;
}

.action-card {
  background: var(--page);
  border: 1px solid var(--border);
  border-radius: var(--r1);
  padding: 20px 14px;
  text-align: center;
  transition: all .14s;
  cursor: pointer;
}

.action-card::before { display: none; }

.action-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--s2);
  border-color: var(--sky);
}

.action-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--r2);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 10px;
  transition: transform .14s;
}

.action-icon i { font-size: 18px; }

.action-card:hover .action-icon { transform: scale(1.1); }

.action-icon-primary  { background: var(--sky-l); }

.action-icon-primary i { color: var(--sky); }

.action-icon-success  { background: var(--sky-l); }

.action-icon-success i { color: var(--em); }

.action-icon-warning  { background: var(--status-warning-light); }

.action-icon-warning i { color: var(--am); }

.action-icon-info     { background: var(--sky-l); }

.action-icon-info i   { color: var(--ind); }

.action-card h3 {
  font-size: 13px;
  font-weight: 700;
  color: var(--txt);
  margin: 0 0 3px;
}

.action-card p {
  font-size: 11px;
  color: var(--txt3);
  margin: 0;
}

/* ── Chart Legend ── */

.db-chart-legend {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.db-leg-tag {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: var(--r2);
  font-size: 11px;
  font-weight: 700;
}

/* ── Footer under dashboard ── */

.admin-dashboard + .pfooter { margin-top: 0; }

/* ── Responsive ── */

/* old 860/560 dashboard responsive — moved to end of file */

.filters-box {
    background: var(--card);
    border-radius: var(--r1);
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.filters-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 20px;
    align-items: end;
}

.filter-group input,
.filter-group select {
    padding: 12px 16px;
    border: 2px solid rgba(2, 132, 199, 0.2);
    border-radius: var(--r2);
    font-size: 14px;
    color: var(--txt);
    background: var(--card);
    font-weight: 500;
    transition: all 0.3s ease;
}

.filter-group input:focus,
.filter-group select:focus {
    outline: none;
    border-color: var(--sky);
    box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.1);
}

.filters-actions {
    display: flex;
    gap: 12px;
    align-items: center;
}
.filters-actions .btn {
    height: 44px;
    padding: 0 20px;
    box-sizing: border-box;
    font-size: 14px;
}

.table-link {
    color: var(--sky-h);
    text-decoration: none;
    font-weight: bold;
    transition: all 0.2s ease;
}

.table-link:hover {
    color: var(--sky);
    text-decoration: underline;
}

.question-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 12px;
    border-top: 1px solid var(--page);
}

.question-date {
    color: var(--txt3);
    font-size: 13px;
}

.question-actions {
    display: flex;
    gap: 8px;
}

.badge-category, .priority-badge, .status-badge {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
}

.btn-icon-only {
    padding: 6px 10px !important;
    min-width: auto !important;
}

/* ==================== RESPONSIVE STYLES ==================== */

/* my_responses.php — view response modal theme */

/* ===== Модалка "Мой отклик" — светлая бирюзовая тема ===== */

#viewResponseModal .modal-content {
    background: var(--card);
    border: 1.5px solid rgba(20,184,166,.25);
    border-radius: 18px;
    box-shadow: 0 20px 60px rgba(20,184,166,.12), 0 4px 20px rgba(0,0,0,.08);
    color: var(--txt);
    overflow: hidden;
}

#viewResponseModal .modal-header {
    background: var(--sky);
    border-bottom: none;
    border-radius: 0;
    margin: 0;
    padding: 20px 24px 18px;
}

#viewResponseModal .modal-header h3 {
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -.01em;
    gap: 10px;
    text-shadow: 0 1px 3px rgba(0,0,0,.15);
}

#viewResponseModal .modal-header h3 i {
    color: rgba(255,255,255,.9);
    font-size: 18px;
}

#viewResponseModal .modal-close {
    background: rgba(255,255,255,.2);
    color: #fff;
    border: 1px solid rgba(255,255,255,.3);
    border-radius: var(--r2);
    transition: all .2s;
}

#viewResponseModal .modal-close:hover {
    background: rgba(255,255,255,.35);
    color: #fff;
    border-color: rgba(255,255,255,.5);
    transform: rotate(90deg);
}

#viewResponseModal .modal-body {
    padding: 22px 24px 8px;
    background: var(--card);
}

#viewResponseModal .modal-body [style*="font-size:12px"] {
    color: var(--sky) !important;
    font-weight: 700;
    letter-spacing: .07em;
}

#viewResponseModal #vrm_request_title { color: var(--txt) !important; font-weight: 700; }

#viewResponseModal #vrm_date         { color: var(--txt2) !important; }

#viewResponseModal #vrm_amount       { color: var(--sky-h) !important; font-weight: 800; }

#viewResponseModal .modal-body > div {
    border-bottom: 1px solid var(--sky-ll);
    padding-bottom: 16px;
}

#viewResponseModal .modal-body > div:last-child {
    border-bottom: none;
}

#viewResponseModal #vrm_message {
    background: var(--sky-ll) !important;
    border: 1.5px solid var(--sky-l) !important;
    border-radius: var(--r2) !important;
    color: var(--sky-h) !important;
    line-height: 1.65;
    font-size: 14px;
}

#viewResponseModal #vrm_files a {
    background: var(--sky-ll) !important;
    border: 1.5px solid var(--sky-l) !important;
    border-radius: var(--r2) !important;
    color: var(--sky-h) !important;
    transition: all .18s;
}

#viewResponseModal #vrm_files a:hover {
    background: var(--sky-ll) !important;
    border-color: var(--sky) !important;
    color: var(--sky-h) !important;
    transform: translateX(3px);
}

#viewResponseModal #vrm_files a i.fa-download { color: var(--sky) !important; }

#viewResponseModal #vrm_rejection_block {
    background: var(--card)1f2 !important;
    border-left: 4px solid var(--rose) !important;
    border-radius: var(--r2) !important;
}

#viewResponseModal #vrm_rejection { color: var(--rose) !important; }

#viewResponseModal #vrm_rejection_block [style*="color:var(--rose)"] { color: var(--rose) !important; }

#viewResponseModal #vrm_admin_block {
    background: var(--card)beb !important;
    border-left: 4px solid var(--am) !important;
    border-radius: var(--r2) !important;
}

#viewResponseModal #vrm_admin { color: var(--am) !important; }

#viewResponseModal #vrm_admin_block [style*="color:var(--am)"] { color: var(--am) !important; }

#viewResponseModal .modal-footer {
    padding: 14px 24px 20px;
    border-top: 1.5px solid var(--sky-ll);
    gap: 10px;
    margin-top: 0;
    background: var(--page);
}

#viewResponseModal #vrm_request_link {
    background: var(--sky-ll);
    border: 1.5px solid var(--sky);
    color: var(--sky-h);
    border-radius: var(--r2);
    padding: 10px 18px;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all .2s;
}

#viewResponseModal #vrm_request_link:hover {
    background: var(--sky-ll);
    border-color: var(--sky-h);
    color: var(--sky-h);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(20,184,166,.2);
}

#viewResponseModal .modal-footer {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    padding: 16px 24px;
    border-top: 1px solid var(--border);
}

#viewResponseModal .badge {
    border-radius: var(--r2);
    padding: 5px 12px;
    font-size: 13px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

#viewResponseModal .badge-primary   { background: var(--sky-ll); color: var(--vio); }

#viewResponseModal .badge-info      { background: var(--sky-l); color: var(--sky-h); }

#viewResponseModal .badge-success   { background: var(--sky-l); color: var(--em); }

#viewResponseModal .badge-danger    { background: var(--status-error-light); color: var(--rose); }

#viewResponseModal .badge-warning   { background: var(--status-warning-light); color: var(--am); }

#viewResponseModal .badge-secondary { background: var(--page); color: var(--txt2); }

/* ==================== MY COMPANY PAGE STYLES ==================== */

.field-filled {
    color: var(--em);
}

.field-incomplete {
    background: var(--status-warning-light) !important;
    border: 2px solid var(--am) !important;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.1) !important;
    transition: all 0.3s ease;
}

.field-incomplete:focus {
    background: var(--card) !important;
    border: 2px solid var(--em) !important;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1) !important;
}

.dashboard-card > div {
    padding: 32px;
}

.dashboard-card h3 {
    margin: 0 0 28px 0;
    font-size: 20px;
    font-weight: 700;
    color: var(--sky-h);
    border-bottom: 2px solid var(--sky);
    padding-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.dashboard-card h3 i {
    color: var(--sky);
    font-size: 20px;
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="url"],
.form-group input[type="date"],
.form-group input[type="file"],
.form-group textarea,

.form-group input[type="text"]:hover,
.form-group input[type="email"]:hover,
.form-group input[type="url"]:hover,
.form-group input[type="date"]:hover,
.form-group textarea:hover,
.form-group select:hover {
    border-color: var(--txt3);
}

.form-group input[type="text"]:focus,
.form-group input[type="email"]:focus,
.form-group input[type="url"]:focus,
.form-group input[type="date"]:focus,
.form-group textarea:focus,

.form-group small {
    display: block;
    color: var(--txt3);
    font-size: 12px;
    margin-top: 4px;
    line-height: 1.5;
}

.form-group small i {
    color: var(--sky);
    margin-right: 4px;
}

.section-spacing {
    margin-top: 40px;
}

.btn-add-row {
    background: linear-gradient(135deg, var(--sky) 0%, var(--sky-h) 100%);
    color: white;
    padding: 12px 24px;
    border: none;
    border-radius: var(--r2);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
}

.btn-add-row:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(2, 132, 199, 0.3);
}

.btn-add-row i {
    font-size: 14px;
}

.btn-remove-row {
    background: linear-gradient(135deg, var(--rose) 0%, var(--rose) 100%);
    color: white;
    padding: 8px 16px;
    border: none;
    border-radius: var(--r3);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.btn-remove-row:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}

.alert strong {
    font-weight: 600;
}

.alert-info {
    background: linear-gradient(135deg, var(--sky-l) 0%, var(--sky-l) 100%);
    border-left: 4px solid var(--sky);
    color: var(--sky-h);
}

.alert-info i {
    color: var(--sky);
}

.alert-success i {
    color: var(--em);
}

.alert-error i {
    color: var(--rose);
}

.alert-warning {
    background: linear-gradient(135deg, var(--status-warning-light) 0%, var(--status-warning-light) 100%);
    border-left: 4px solid var(--am);
    color: var(--am);
}

.alert-warning i {
    color: var(--am);
}

#logoPreview {
    background: var(--page);
    padding: 16px;
    border-radius: var(--r2);
    border: 2px dashed var(--border);
    margin-bottom: 12px;
}

#logoImage {
    max-width: 200px;
    max-height: 100px;
    border-radius: var(--r2);
    display: block;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.slug-container {
    background: var(--sky-ll);
    padding: 20px;
    border-radius: var(--r2);
    border-left: 4px solid var(--sky);
}

.slug-container label {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: var(--sky-h) !important;
    margin-bottom: 10px !important;
}

.slug-container input {
    margin-top: 10px;
    padding-right: 45px;
}

#slugStatus {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 20px;
}

.slug-info-box {
    background: var(--card);
    padding: 16px;
    border-radius: var(--r2);
    margin-top: 12px;
    border: 1px solid var(--border);
}

.slug-info-box p {
    margin: 0 0 10px 0;
    font-size: 13px;
}

.slug-info-box ul {
    margin: 6px 0 0 0;
    padding-left: 20px;
    font-size: 13px;
}

.slug-info-box li {
    margin-bottom: 4px;
}

.slug-info-box code {
    background: var(--page);
    padding: 2px 6px;
    border-radius: 4px;
    color: var(--sky-h);
    font-family: 'Courier New', monospace;
    font-size: 13px;
}

.save-button-container {
    text-align: center;
    padding: 32px 24px;
    margin-top: 40px;
    background: linear-gradient(135deg, var(--sky-ll) 0%, var(--sky-l) 100%);
    border-radius: var(--r1);
    border: 2px solid var(--sky);
}

.save-button-container button {
    padding: 14px 48px;
    font-size: 16px;
    font-weight: 600;
    min-width: 280px;
    border-radius: var(--r2);
}

.save-button-container p {
    margin: 12px 0 0 0;
    color: var(--sky-h);
    font-size: 14px;
    font-weight: 500;
}

.okved-row,
.bank-row,
.contact-row {
    background: var(--page);
    border: 1px solid var(--border);
    border-radius: var(--r2);
    padding: 18px;
    margin-bottom: 12px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.okved-row:hover,
.bank-row:hover,
.contact-row:hover {
    border-color: var(--sky);
    box-shadow: 0 2px 8px rgba(2,132,199,.08);
}

.okved-row > .btn-remove-row,
.bank-row > .btn-remove-row,
.contact-row > .btn-remove-row {
    align-self: flex-end;
}

.okved-row .form-row,
.bank-row .form-row,
.contact-row .form-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.okved-row .form-row .form-group,
.bank-row .form-row .form-group,
.contact-row .form-row .form-group {
    margin-bottom: 0;
}

.bank-field-label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: var(--txt2);
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.field-hint {
    display: block;
    font-size: 11px;
    color: var(--txt3);
    margin-top: 3px;
    line-height: 1.4;
}

/* ==================== RESPONSIVE STYLES ==================== */

.ql-editor{min-height:180px;max-height:400px;overflow-y:auto;}

/* ===============================================
   MY REQUESTS — STAT CARDS REDESIGN
   =============================================== */

.stat-card-inner {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 16px;
    width: 100%;
}

.stat-info { flex: 1; min-width: 0; }

/* Цвет левой полоски под каждый статус */

.stat-card:nth-child(1) { border-color: var(--em); }

.stat-card:nth-child(2) { border-color: var(--am); }

.stat-card:nth-child(3) { border-color: var(--sky); }

.stat-card:nth-child(4) { border-color: var(--rose); }

.stat-card:nth-child(5) { border-color: #dc2626; }

.stat-card:nth-child(6) { border-color: #f59e0b; }

/* ── Планшет ── */

/* ── Мобильный ── */

@media (max-width: 600px) {

  .stats-grid { grid-template-columns: 1fr 1fr; gap: 8px; }

  .stat-card  { padding: 14px 16px; }

  .stat-icon  { width: 44px; height: 44px; font-size: 18px; }

  .stat-value { font-size: 28px; }

  .stat-label { font-size: 10px; }

  .companies-list.view-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

  .news-detail-section { padding: 24px 0 48px; }

  .nd-header, .nd-content, .nd-share { padding-left: 20px; padding-right: 20px; }

  .nd-title { font-size: 1.5rem; }

  .nd-hero-img { aspect-ratio: 16 / 9; }

  .nd-meta { gap: 4px 14px; font-size: .75rem; }

  .nd-share { gap: 8px; }

  .nd-share-btn { padding: 7px 12px; font-size: .75rem; }

  .nd-sidebar { flex-direction: column; }

  .nd-sb-card { flex: 1 1 100%; }

}

.header-right {
    display: flex;
    gap: 10px;
    align-items: center;
}

.btn-crm-settings {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: linear-gradient(135deg, var(--sky) 0%, var(--sky-h) 100%);
    color: white;
    border: none;
    border-radius: var(--r2);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(2, 132, 199, 0.3);
}

.btn-crm-settings:hover {
    background: linear-gradient(135deg, var(--sky-h) 0%, var(--sky-h) 100%);
    box-shadow: 0 4px 12px rgba(2, 132, 199, 0.5);
    transform: translateY(-2px);
}

.btn-crm-settings i {
    font-size: 14px;
}

.crm-stats-unified {
    background: linear-gradient(135deg, var(--card) 0%, var(--page) 100%);
    border: 2px solid var(--border);
    border-radius: var(--r1);
    padding: 24px;
    margin-bottom: 24px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}

.stats-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.stats-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--txt);
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
}

.stats-title i {
    color: var(--sky);
    font-size: 22px;
}

.stats-progress-compact {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--sky-ll);
    padding: 8px 16px;
    border-radius: var(--r1);
    border: 2px solid var(--sky);
}

.progress-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--sky-h);
}

.progress-value {
    font-size: 18px;
    font-weight: 800;
    color: var(--sky);
}

.stats-progress-bar {
    height: 12px;
    background: var(--border);
    border-radius: var(--r1);
    overflow: hidden;
    margin-bottom: 24px;
    position: relative;
}

.stats-progress-bar .progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--sky) 0%, var(--teal) 100%);
    border-radius: var(--r1);
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 0 10px rgba(2, 132, 199, 0.4);
}

.stat-card:hover::before {
    opacity: 1;
}

.stat-card.stat-active {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
    border-color: currentColor;
}

.stat-card.stat-active::after {
    content: '✓';
    position: absolute;
    top: 8px;
    right: 8px;
    width: 24px;
    height: 24px;
    background: var(--card);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: bold;
    color: currentColor;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.stat-card:hover .stat-icon {
    transform: scale(1.1) rotate(5deg);
}

/* Stat cards — white bg + colored border + light icon */
.stat-pending            { background: var(--card); border-color: var(--sky); }
.stat-pending .stat-icon { background: rgba(2,132,199,.12); color: var(--sky); }
.stat-pending .stat-value { color: var(--sky); }

.stat-completed            { background: var(--card); border-color: var(--em); }
.stat-completed .stat-icon { background: rgba(5,150,105,.12); color: var(--em); }
.stat-completed .stat-value { color: var(--em); }

.stat-cancelled            { background: var(--card); border-color: var(--txt3); }
.stat-cancelled .stat-icon { background: rgba(107,114,128,.12); color: var(--txt3); }
.stat-cancelled .stat-value { color: var(--txt3); }

.stat-today            { background: var(--card); border-color: var(--sky); }
.stat-today .stat-icon { background: rgba(2,132,199,.12); color: var(--sky); }
.stat-today .stat-value { color: var(--sky); }

.stat-overdue            { background: var(--card); border-color: var(--rose); }
.stat-overdue .stat-icon { background: rgba(225,29,72,.12); color: var(--rose); }
.stat-overdue .stat-value { color: var(--rose); }

.stat-high-priority            { background: var(--card); border-color: var(--am); }
.stat-high-priority .stat-icon { background: rgba(217,119,6,.12); color: var(--am); }
.stat-high-priority .stat-value { color: var(--am); }

.stat-total            { background: var(--card); border-color: var(--ind); }
.stat-total .stat-icon { background: rgba(67,56,202,.12); color: var(--ind); }
.stat-total .stat-value { color: var(--ind); }

/* Компактная секция календарь + форма */

.crm-compact-section {
    display: grid;
    grid-template-columns: 380px 1fr;
    gap: 20px;
    margin-bottom: 24px;
}

.compact-form-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 1px 3px rgba(0,0,0,.04);
    overflow: hidden;
}

.form-card-header h3 {
    font-size: 15px;
    font-weight: 700;
    color: var(--txt);
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 16px 0;
}
.form-card-header h3 i { color: var(--sky); font-size: 14px; }

.quick-actions-compact {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
}

.quick-btn {
    flex: 1;
    height: 40px;
    border: 2px solid var(--am);
    background: var(--card);
    border-radius: var(--r2);
    color: var(--am);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.quick-btn:hover {
    background: linear-gradient(135deg, var(--am) 0%, var(--am) 100%);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(251, 191, 36, 0.3);
}

.quick-btn i {
    font-size: 14px;
}

.form-control-compact {
    width: 100%;
    padding: 10px 14px;
    border: 2px solid var(--border);
    border-radius: var(--r2);
    font-size: 13px;
    font-weight: 500;
    color: var(--txt);
    background: var(--card);
    transition: all 0.3s ease;
    margin-bottom: 10px;
}

.form-control-compact:focus {
    outline: none;
    border-color: var(--am);
    box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.1);
}

.form-control-compact::placeholder {
    color: var(--txt3);
}

.form-row-compact {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 10px;
}

.btn-add-task {
    width: 100%;
    padding: 12px;
    background: linear-gradient(135deg, var(--sky) 0%, var(--sky-h) 100%);
    border: none;
    border-radius: var(--r2);
    color: white;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 16px;
}

.btn-add-task:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(2, 132, 199, 0.4);
}

.crm-form-input,

.crm-form-input:focus,
.crm-form-textarea:focus {
    outline: none;
    border-color: var(--sky);
    box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.1);
}

.crm-btn {
    padding: 10px 20px;
    border-radius: var(--r2);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 2px solid transparent;
}

.crm-btn-primary {
    background: var(--sky);
    color: white;
    border-color: var(--sky);
    width: 100%;
    justify-content: center;
}

.crm-btn-primary:hover {
    background: var(--sky-h);
    border-color: var(--sky-h);
    box-shadow: 0 4px 12px rgba(2, 132, 199, 0.25);
}

.crm-tasks-list {
    background: var(--card);
    border: 2px solid var(--border);
    border-radius: var(--r2);
    padding: 18px 20px;
}

.crm-tasks-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--txt);
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--page);
    display: flex;
    align-items: center;
    gap: 8px;
}

.crm-tasks-title i {
    color: var(--sky);
    font-size: 16px;
}

.crm-task-item {
    background: var(--page);
    border: 1.5px solid var(--border);
    border-radius: var(--r2);
    padding: 12px 14px;
    margin-bottom: 10px;
    transition: all 0.2s ease;
    min-width: 0;
    overflow: hidden;
}

.crm-task-item:hover {
    border-color: var(--sky);
    background: var(--sky-ll);
}

.crm-task-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    min-width: 0;
    gap: 8px;
}

.crm-task-date {
    font-size: 11px;
    font-weight: 600;
    color: var(--txt3);
    white-space: nowrap;
    flex-shrink: 0;
}

.crm-task-date i {
    font-size: 10px;
    margin-right: 4px;
}

.crm-task-actions {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

.crm-task-status {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.crm-status-btn {
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 11px;
    font-weight: 600;
    border: 1.5px solid;
    cursor: pointer;
    transition: all 0.2s ease;
}

.crm-status-btn.pending {
    background: var(--card);
    color: var(--am);
    border-color: var(--status-warning-light);
}

.crm-status-btn.pending.active {
    background: var(--status-warning-light);
    border-color: var(--am);
}

.crm-status-btn.completed {
    background: var(--card);
    color: var(--em);
    border-color: var(--status-success-light);
}

.crm-status-btn.completed.active {
    background: var(--sky-l);
    border-color: var(--em);
}

.crm-status-btn.cancelled {
    background: var(--card);
    color: var(--rose);
    border-color: var(--status-error-light);
}

.crm-status-btn.cancelled.active {
    background: var(--status-error-light);
    border-color: var(--rose);
}

.crm-status-btn:hover {
    transform: scale(1.05);
}

.crm-delete-btn {
    padding: 5px 9px;
    background: var(--card);
    color: var(--rose);
    border: 1.5px solid var(--status-error-light);
    border-radius: 5px;
    font-size: 11px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.crm-delete-btn:hover {
    background: var(--status-error-light);
    border-color: var(--rose);
}

.crm-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-bottom: 20px;
}

/* CRM stat cards — white bg + colored border */
.crm-stat-card {
    background: var(--card);
    border: 1.5px solid var(--border);
    border-radius: var(--r2);
    padding: 14px 18px;
    text-align: center;
    transition: all .2s;
    min-width: 0;
    overflow: hidden;
}
.crm-stat-card:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,.08); }

.crm-stat-value {
    font-size: 28px;
    font-weight: 800;
    color: var(--txt);
    margin-bottom: 4px;
    line-height: 1.2;
    display: block;
    min-height: 34px;
    word-break: break-all;
}
.crm-stat-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--txt3);
    text-transform: uppercase;
    letter-spacing: .5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.crm-stat-card.pending       { border-color: var(--sky); }
.crm-stat-card.pending .crm-stat-value { color: var(--sky); }
.crm-stat-card.completed     { border-color: var(--em); }
.crm-stat-card.completed .crm-stat-value { color: var(--em); }
.crm-stat-card.cancelled     { border-color: var(--rose); }
.crm-stat-card.cancelled .crm-stat-value { color: var(--rose); }
.crm-stat-card.today         { border-color: var(--sky); cursor: pointer; }
.crm-stat-card.today .crm-stat-value { color: var(--sky); }
.crm-stat-card.overdue       { border-color: var(--rose); cursor: pointer; }
.crm-stat-card.overdue .crm-stat-value { color: var(--rose); }
.crm-stat-card.high-priority { border-color: var(--am); }
.crm-stat-card.high-priority .crm-stat-value { color: var(--am); }
.crm-stat-card.total         { border-color: var(--ind); }
.crm-stat-card.total .crm-stat-value { color: var(--ind); }

.crm-empty {
    text-align: center;
    padding: 30px 20px;
    color: var(--txt3);
}

.crm-empty i {
    font-size: 40px;
    margin-bottom: 12px;
    opacity: 0.4;
}

.crm-empty p {
    font-size: 14px;
    margin: 0;
}

.crm-filters-bar {
    background: var(--card);
    border: 2px solid var(--border);
    border-radius: var(--r2);
    padding: 16px 20px;
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}

.crm-filter-tab:hover {
    border-color: var(--sky);
    color: var(--sky);
}

.crm-filter-tab.active {
    background: var(--sky);
    border-color: var(--sky);
    color: white;
}

.crm-per-page {
    display: flex;
    align-items: center;
    gap: 10px;
}

.crm-per-page label {
    font-size: 13px;
    font-weight: 600;
    color: var(--txt3);
}

.crm-per-page select {
    padding: 8px 12px;
    border: 2px solid var(--border);
    border-radius: var(--r2);
    font-size: 13px;
    font-weight: 600;
    color: var(--txt);
    cursor: pointer;
    transition: all 0.2s ease;
}

.crm-per-page select:focus {
    outline: none;
    border-color: var(--sky);
}

.crm-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 2px solid var(--page);
}

.crm-page-btn {
    padding: 8px 12px;
    border: 2px solid var(--border);
    background: var(--card);
    border-radius: var(--r3);
    font-size: 13px;
    font-weight: 600;
    color: var(--txt3);
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 36px;
    text-align: center;
}

.crm-page-btn:hover {
    border-color: var(--sky);
    color: var(--sky);
}

.crm-page-btn.active {
    background: var(--sky);
    border-color: var(--sky);
    color: white;
}

.crm-page-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.crm-page-info {
    font-size: 13px;
    color: var(--txt3);
    padding: 0 12px;
}

#alert-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9999;
    max-width: 400px;
}

.crm-alert {
    background: var(--card);
    border: 2px solid;
    border-radius: var(--r2);
    padding: 14px 18px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    animation: slideIn 0.3s ease;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.crm-alert.success {
    border-color: var(--em);
    color: var(--em);
}

.crm-alert.success i {
    color: var(--em);
}

.crm-alert.error {
    border-color: var(--rose);
    color: var(--rose);
}

.crm-alert.error i {
    color: var(--rose);
}

/* ==================== Новые стили CRM ==================== */

.crm-progress-container {
    margin-bottom: 25px;
    padding: 20px;
    background: var(--card);
    border-radius: var(--r1);
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.crm-progress-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.crm-progress-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--txt2);
}

.crm-progress-percent {
    font-size: 18px;
    font-weight: 700;
    color: var(--sky);
}

.crm-progress-bar {
    height: 12px;
    background: var(--page);
    border-radius: var(--r3);
    overflow: hidden;
    position: relative;
}

.crm-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--sky), var(--sky-h));
    border-radius: var(--r3);
    transition: width 0.5s ease;
    box-shadow: 0 2px 4px rgba(20,184,166,0.3);
}

.crm-progress-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    margin-top: 15px;
}

.crm-progress-stat {
    text-align: center;
    padding: 10px;
    background: var(--page);
    border-radius: var(--r2);
}

.crm-progress-stat-value {
    font-size: 20px;
    font-weight: 700;
    color: var(--txt);
    display: block;
}

.crm-progress-stat-label {
    font-size: 11px;
    color: var(--txt3);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 4px;
}

.crm-view-switcher {
    display: flex;
    gap: 8px;
    background: var(--card);
    padding: 4px;
    border-radius: var(--r2);
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.crm-view-btn {
    padding: 8px 16px;
    border: none;
    background: transparent;
    color: var(--txt3);
    font-size: 14px;
    font-weight: 500;
    border-radius: var(--r3);
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 6px;
}

.crm-view-btn:hover {
    background: var(--page);
    color: var(--txt);
}

.crm-view-btn.active {
    background: var(--sky);
    color: white;
    box-shadow: 0 2px 4px rgba(20,184,166,0.3);
}

.crm-search-container {
    position: relative;
    flex: 1;
}

.crm-search-input {
    width: 100%;
    padding: 10px 12px 10px 40px;
    border: 2px solid var(--border);
    border-radius: var(--r2);
    font-size: 14px;
    transition: all 0.2s;
}

.crm-search-input:focus {
    outline: none;
    border-color: var(--sky);
    box-shadow: 0 0 0 3px rgba(20,184,166,0.1);
}

.crm-search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--txt3);
    pointer-events: none;
}

.crm-filters-row {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

.crm-filter-select {
    padding: 10px 36px 10px 12px;
    border: 2px solid var(--border);
    border-radius: var(--r2);
    font-size: 14px;
    background: var(--card);
    color: var(--txt2);
    cursor: pointer;
    transition: all 0.2s;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3E%3C/svg%3E");
    background-position: right 10px center;
    background-repeat: no-repeat;
    background-size: 16px;
}

.crm-filter-select:focus {
    outline: none;
    border-color: var(--sky);
    box-shadow: 0 0 0 3px rgba(20,184,166,0.1);
}

.priority-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 5px 12px;
    border-radius: var(--r1);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    transition: all 0.2s ease;
    border: 1.5px solid transparent;
    min-height: 26px;
    white-space: nowrap;
}

.priority-badge:hover {
    transform: scale(1.03);
}

.priority-badge.high {
    background: linear-gradient(135deg, var(--status-error-light) 0%, var(--status-error-light) 100%);
    color: var(--rose);
    border-color: var(--rose);
}

.priority-badge.high:hover {
    box-shadow: 0 2px 6px rgba(239,68,68,0.25);
}

.priority-badge.medium {
    background: linear-gradient(135deg, var(--status-warning-light) 0%, var(--status-warning-light) 100%);
    color: var(--am);
    border-color: var(--am);
}

.priority-badge.medium:hover {
    box-shadow: 0 2px 6px rgba(245,158,11,0.25);
}

.priority-badge.low {
    background: linear-gradient(135deg, var(--sky-l) 0%, var(--sky-l) 100%);
    color: var(--sky-h);
    border-color: var(--sky);
}

.priority-badge.low:hover {
    box-shadow: 0 2px 6px rgba(59,130,246,0.25);
}

.priority-badge i {
    font-size: 10px;
}

.category-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 5px 12px;
    border-radius: var(--r1);
    font-size: 10px;
    font-weight: 600;
    background: linear-gradient(135deg, var(--page) 0%, var(--border) 100%);
    color: var(--txt2);
    border: 1.5px solid var(--border);
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    min-height: 26px;
    white-space: nowrap;
}

.category-badge:hover {
    background: linear-gradient(135deg, var(--sky) 0%, var(--sky-h) 100%);
    color: white;
    border-color: var(--sky);
    transform: scale(1.03);
    box-shadow: 0 2px 6px rgba(20,184,166,0.2);
}

.category-badge i {
    font-size: 10px;
}

.task-item {
    display: none;
}

.task-item.medium-priority::before,
.task-item.low-priority::before,
.task-item::before,
.task-item:hover::before {
    display: none;
}

.task-header-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 14px;
    gap: 15px;
    min-width: 0;
}

.task-text {
    font-size: 15px;
    font-weight: 600;
    color: var(--txt);
    line-height: 1.6;
    margin-bottom: 12px;
    word-wrap: break-word;
    min-width: 0;
    overflow-wrap: break-word;
}

.task-meta {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--page);
    flex-wrap: wrap;
}

.task-date {
    font-size: 13px;
    color: var(--txt3);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 500;
}

.task-date i {
    color: var(--sky);
}

.task-overdue-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 5px 10px;
    background: linear-gradient(135deg, var(--status-error-light) 0%, var(--status-error-light) 100%);
    color: var(--rose);
    border-radius: var(--r1);
    font-size: 10px;
    font-weight: 700;
    border: 1.5px solid var(--rose);
    animation: pulse 2s ease-in-out infinite;
    min-height: 26px;
    white-space: nowrap;
}

.task-time-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    background: linear-gradient(135deg, var(--sky-ll) 0%, var(--border)6fe 100%);
    color: var(--vio);
    border-radius: var(--r1);
    font-size: 12px;
    font-weight: 700;
    box-shadow: 0 2px 4px rgba(107,33,168,0.1);
    border: 1px solid var(--border)6fe;
}

.task-notes {
    margin-top: 10px;
    padding: 12px;
    background: var(--page);
    border-left: 3px solid var(--sky);
    border-radius: var(--r3);
    font-size: 13px;
    color: var(--txt2);
    line-height: 1.5;
}

.task-notes-toggle {
    color: var(--sky);
    font-size: 12px;
    cursor: pointer;
    text-decoration: underline;
    margin-top: 8px;
    display: inline-block;
}

.task-notes-toggle:hover {
    color: var(--sky-h);
}

.task-links {
    display: flex;
    gap: 12px;
    margin-top: 12px;
    padding: 10px;
    background: linear-gradient(135deg, var(--sky-ll) 0%, var(--sky-ll) 100%);
    border-radius: var(--r2);
    border: 1px solid var(--sky-ll);
    flex-wrap: wrap;
}

.task-link-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--sky-h);
    font-weight: 600;
    padding: 4px 10px;
    background: var(--card);
    border-radius: var(--r3);
    border: 1px solid var(--sky-l);
    transition: all 0.2s ease;
}

.task-link-item:hover {
    background: var(--sky-ll);
    transform: scale(1.05);
}

.task-link-item i {
    color: var(--sky);
}

.task-link-item a {
    color: var(--sky);
    text-decoration: none;
}

.task-link-item a:hover {
    text-decoration: underline;
}

.task-actions {
    display: flex;
    gap: 6px;
    margin-top: 12px;
    flex-wrap: wrap;
    align-items: center;
}

.task-btn {
    padding: 6px 12px;
    border: 1.5px solid transparent;
    border-radius: var(--r2);
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    white-space: nowrap;
    min-height: 32px;
}

.task-btn i {
    font-size: 11px;
}

.task-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(0,0,0,0.15);
}

.task-btn.complete {
    background: linear-gradient(135deg, var(--sky-l) 0%, var(--status-success-light) 100%);
    color: var(--em);
    border-color: var(--em);
}

.task-btn.complete:hover {
    background: linear-gradient(135deg, var(--status-success-light) 0%, var(--em) 100%);
    border-color: var(--em);
    box-shadow: 0 3px 8px rgba(16,185,129,0.25);
}

.task-btn.cancel {
    background: linear-gradient(135deg, var(--status-error-light) 0%, var(--status-error-light) 100%);
    color: var(--rose);
    border-color: var(--rose);
}

.task-btn.cancel:hover {
    background: linear-gradient(135deg, var(--status-error-light) 0%, var(--rose) 100%);
    border-color: var(--rose);
    box-shadow: 0 3px 8px rgba(239,68,68,0.25);
}

.task-btn.delete {
    background: linear-gradient(135deg, var(--page) 0%, var(--border) 100%);
    color: var(--txt3);
    border-color: var(--border);
}

.task-btn.delete:hover {
    background: linear-gradient(135deg, var(--rose) 0%, var(--rose) 100%);
    color: white;
    border-color: var(--rose);
    box-shadow: 0 3px 8px rgba(239,68,68,0.25);
}

.task-btn.reopen {
    background: linear-gradient(135deg, var(--sky-l) 0%, var(--sky-l) 100%);
    color: var(--sky-h);
    border-color: var(--sky);
}

.task-btn.reopen:hover {
    background: linear-gradient(135deg, var(--sky-l) 0%, var(--sky) 100%);
    border-color: var(--sky);
    box-shadow: 0 3px 8px rgba(59,130,246,0.25);
}

.task-actions-extended {
    display: flex;
    gap: 6px;
    margin-top: 10px;
    flex-wrap: wrap;
    align-items: center;
}

.task-action-btn-small {
    padding: 6px 12px;
    border: 1.5px solid transparent;
    background: var(--page);
    color: var(--txt3);
    font-size: 11px;
    font-weight: 600;
    border-radius: var(--r2);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 5px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.task-action-btn-small:hover {
    background: var(--border);
    color: var(--txt2);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.task-action-btn-small.edit {
    background: linear-gradient(135deg, var(--sky-l) 0%, var(--sky-l) 100%);
    color: var(--sky-h);
    border-color: var(--sky);
}

.task-action-btn-small.edit:hover {
    background: linear-gradient(135deg, var(--sky-l) 0%, var(--sky) 100%);
    border-color: var(--sky);
    box-shadow: 0 4px 8px rgba(59,130,246,0.2);
}

.task-action-btn-small.postpone {
    background: linear-gradient(135deg, var(--status-warning-light) 0%, var(--status-warning-light) 100%);
    color: var(--am);
    border-color: var(--am);
}

.task-action-btn-small.postpone:hover {
    background: linear-gradient(135deg, var(--status-warning-light) 0%, var(--am) 100%);
    border-color: var(--am);
    box-shadow: 0 4px 8px rgba(245,158,11,0.2);
}

.crm-modal.active {
    display: flex;
    align-items: center;
    justify-content: center;
}

.crm-modal-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--txt);
}

.crm-form-group {
    margin-bottom: 20px;
}

.crm-form-label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--txt2);
    margin-bottom: 8px;
}

.crm-form-input,
.crm-form-textarea,
.crm-form-select {
    width: 100%;
    padding: 12px;
    border: 2px solid var(--border);
    border-radius: var(--r2);
    font-size: 14px;
    transition: all 0.2s;
}

.crm-form-input:focus,
.crm-form-textarea:focus,
.crm-form-select:focus {
    outline: none;
    border-color: var(--sky);
    box-shadow: 0 0 0 3px rgba(20,184,166,0.1);
}

.crm-form-textarea {
    min-height: 100px;
    resize: vertical;
}

.crm-form-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
}

.crm-form-checkbox-group {
    display: flex;
    align-items: center;
    gap: 10px;
}

.crm-form-checkbox {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.kanban-board {
    display: none !important;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-top: 20px;
    padding: 16px;
    background: linear-gradient(135deg, var(--sky-ll) 0%, var(--sky-ll) 50%, var(--sky-l) 100%);
    border-radius: var(--r1);
    box-shadow: inset 0 2px 8px rgba(0,0,0,0.06);
}

.kanban-board.active {
    display: grid !important;
}

#list-view {
    display: block;
}

#list-view.hidden {
    display: none !important;
}

.kanban-column {
    background: var(--card);
    border-radius: var(--r1);
    padding: 12px;
    min-height: 400px;
    max-height: 70vh;
    overflow-y: auto;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    border: 2px solid transparent;
    transition: all 0.3s ease;
    position: relative;
}

.kanban-column::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    transition: height 0.2s ease;
}

.kanban-column:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}

.kanban-column:hover::before {
    height: 5px;
}

.kanban-column::-webkit-scrollbar {
    width: 6px;
}

.kanban-column::-webkit-scrollbar-track {
    background: var(--page);
    border-radius: 3px;
}

.kanban-column::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 3px;
}

.kanban-column::-webkit-scrollbar-thumb:hover {
    background: var(--txt3);
}

.kanban-column:nth-child(1) {
    border-color: var(--sky-l);
}

.kanban-column:nth-child(1)::before {
    background: linear-gradient(90deg, var(--sky) 0%, var(--sky) 100%);
}

.kanban-column:nth-child(2) {
    border-color: var(--status-warning-light);
}

.kanban-column:nth-child(2)::before {
    background: linear-gradient(90deg, var(--am) 0%, var(--am) 100%);
}

.kanban-column:nth-child(3) {
    border-color: var(--sky-l);
}

.kanban-column:nth-child(3)::before {
    background: linear-gradient(90deg, var(--em) 0%, var(--em) 100%);
}

.kanban-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--page);
    position: sticky;
    top: 0;
    background: var(--card);
    z-index: 10;
}

.kanban-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--txt);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.kanban-title::before {
    content: '';
    width: 4px;
    height: 18px;
    border-radius: 2px;
    display: inline-block;
}

.kanban-column:nth-child(1) .kanban-title::before {
    background: linear-gradient(135deg, var(--sky) 0%, var(--sky) 100%);
}

.kanban-column:nth-child(2) .kanban-title::before {
    background: linear-gradient(135deg, var(--am) 0%, var(--am) 100%);
}

.kanban-column:nth-child(3) .kanban-title::before {
    background: linear-gradient(135deg, var(--em) 0%, var(--em) 100%);
}

.kanban-count {
    background: linear-gradient(135deg, var(--sky) 0%, var(--sky-h) 100%);
    color: white;
    padding: 3px 10px;
    border-radius: var(--r1);
    font-size: 11px;
    font-weight: 700;
    box-shadow: 0 2px 4px rgba(2, 132, 199, 0.2);
    border: 1px solid white;
    min-width: 24px;
    text-align: center;
}

.kanban-tasks {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 100px;
    padding: 2px;
}

.kanban-task::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 3px;
    height: 100%;
    background: linear-gradient(180deg, var(--sky) 0%, var(--sky-h) 100%);
    opacity: 0;
    transition: all 0.2s ease;
}

.kanban-task:hover::before {
    opacity: 1;
    width: 4px;
}

.kanban-task:hover {
    box-shadow: 0 3px 8px rgba(20,184,166,0.15);
    transform: translateY(-2px);
    border-color: var(--sky);
}

.kanban-task.dragging {
    opacity: 0.7;
    transform: rotate(2deg) scale(1.02);
    box-shadow: 0 8px 16px rgba(0,0,0,0.2);
    cursor: grabbing;
    border-color: var(--sky-h);
}

.kanban-task.high-priority { }
.kanban-task.high-priority::before { display: none; }
.kanban-task.overdue { }
.kanban-task.overdue::before { display: none; }
.kanban-task.medium-priority {
}

.kanban-task.low-priority { }

.quick-actions {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
}

.quick-action-btn {
    padding: 10px 16px;
    border: 2px dashed var(--border);
    background: var(--card);
    color: var(--txt3);
    font-size: 13px;
    font-weight: 500;
    border-radius: var(--r2);
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 6px;
}

.quick-action-btn:hover {
    border-color: var(--sky);
    color: var(--sky);
    background: var(--sky-ll);
}

.reminder-indicator {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: linear-gradient(135deg, var(--status-warning-light) 0%, var(--status-warning-light) 100%);
    border-radius: 50%;
    border: 2px solid var(--am);
    box-shadow: 0 2px 8px rgba(245,158,11,0.3);
    animation: bell-ring 2s ease-in-out infinite;
}

.reminder-indicator::before {
    content: '🔔';
    font-size: 12px;
}

@keyframes bell-ring {
    0%, 100% { transform: rotate(0deg); }
    10%, 30% { transform: rotate(-10deg); }
    20%, 40% { transform: rotate(10deg); }
    50%, 100% { transform: rotate(0deg); }
}

.recurring-indicator {
    color: var(--vio);
    font-size: 14px;
    margin-left: 4px;
    animation: rotate-360 3s linear infinite;
}

@keyframes rotate-360 {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.task-item-content {
    flex: 1;
}

/* ============= МОДАЛЬНЫЕ ОКНА ============= */

.crm-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(4px);
    z-index: 10000;
    justify-content: center;
    align-items: center;
    animation: fadeIn 0.3s ease;
}

.crm-modal-content {
    background: linear-gradient(135deg, var(--card) 0%, var(--page) 100%);
    border-radius: var(--r1);
    max-width: 600px;
    width: 90%;
    max-height: 85vh;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3), 
                0 0 0 1px rgba(255, 255, 255, 0.1);
    animation: slideUp 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    display: flex;
    flex-direction: column;
}

.crm-modal-wide {
    max-width: 800px;
}

.crm-modal-narrow {
    max-width: 500px;
}

.crm-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 28px;
    background: linear-gradient(135deg, var(--sky) 0%, var(--sky-h) 100%);
    border-bottom: 3px solid var(--sky-h);
    box-shadow: 0 4px 12px rgba(2, 132, 199, 0.2);
}

.crm-modal-header h3 {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    color: white;
    display: flex;
    align-items: center;
    gap: 12px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.crm-modal-header h3 i {
    font-size: 22px;
    color: var(--sky-ll);
}

.crm-modal-close {
    background: rgba(255, 255, 255, 0.15);
    border: 2px solid rgba(255, 255, 255, 0.3);
    color: white;
    font-size: 28px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--r2);
    cursor: pointer;
    transition: all 0.3s ease;
    font-weight: 300;
    line-height: 1;
}

.crm-modal-close:hover {
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.5);
    transform: rotate(90deg) scale(1.1);
}

.crm-modal-body {
    padding: 28px;
    overflow-y: auto;
    flex: 1;
}

.crm-modal-body::-webkit-scrollbar {
    width: 8px;
}

.crm-modal-body::-webkit-scrollbar-track {
    background: var(--page);
    border-radius: var(--r2);
}

.crm-modal-body::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, var(--sky-l) 0%, var(--sky) 100%);
    border-radius: var(--r2);
}

.crm-modal-body::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, var(--sky) 0%, var(--sky-h) 100%);
}

.crm-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 20px 28px;
    background: linear-gradient(135deg, var(--page) 0%, var(--page) 100%);
    border-top: 2px solid var(--border);
}

.company-link-form h4,
.linked-companies-list h4,
.categories-list h4 {
    font-size: 16px;
    font-weight: 700;
    color: var(--txt);
    margin-bottom: 16px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--border);
    display: flex;
    align-items: center;
    gap: 8px;
}

.company-link-form h4::before {
    content: "📎";
    font-size: 18px;
}

.linked-companies-list h4::before {
    content: "🏢";
    font-size: 18px;
}

.categories-list h4::before {
    content: "🏷️";
    font-size: 18px;
}

.company-link-form {
    margin-bottom: 28px;
    padding-bottom: 28px;
    border-bottom: 3px solid var(--border);
}

.linked-companies-list,
.categories-list {
    margin-top: 24px;
}

.crm-modal-body form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.crm-modal-body .form-row-compact {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
}

.crm-modal-body .form-control-compact {
    padding: 10px 16px;
    border: 2px solid var(--border);
    border-radius: var(--r2);
    font-size: 14px;
    transition: all 0.3s ease;
    background: var(--card);
    height: 42px;
    line-height: 1.5;
}

.crm-modal-body textarea.form-control-compact {
    height: auto;
    min-height: 42px;
    resize: vertical;
}

.crm-modal-body .form-control-compact:focus {
    outline: none;
    border-color: var(--sky);
    box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.1);
}

.crm-modal-body .btn-add-task {
    padding: 10px 20px;
    background: linear-gradient(135deg, var(--sky) 0%, var(--sky-h) 100%);
    color: white;
    border: none;
    border-radius: var(--r2);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 0 2px 8px rgba(2, 132, 199, 0.3);
    height: 42px;
    line-height: 1.5;
}

.crm-modal-body .btn-add-task:hover {
    background: linear-gradient(135deg, var(--sky-h) 0%, var(--sky-h) 100%);
    box-shadow: 0 4px 14px rgba(2, 132, 199, 0.5);
    transform: translateY(-2px);
}

.crm-modal-body .btn-add-task i {
    font-size: 14px;
}

.crm-modal-body .btn-add-task.btn-inline {
    margin: 0;
}

.company-item,
.category-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 18px;
    background: linear-gradient(135deg, var(--card) 0%, var(--page) 100%);
    border: 2px solid var(--border);
    border-radius: var(--r1);
    margin-bottom: 12px;
    transition: all 0.3s ease;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
    animation: fadeInUp 0.4s ease backwards;
}

.company-item:hover,
.category-item:hover {
    background: linear-gradient(135deg, var(--sky-ll) 0%, var(--sky-ll) 100%);
    border-color: var(--sky-l);
    transform: translateX(4px);
    box-shadow: 0 4px 12px rgba(2, 132, 199, 0.15);
}

.company-info,
.category-info {
    flex: 1;
}

.company-info h5,
.category-info h5 {
    margin: 0 0 6px 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--txt);
    display: flex;
    align-items: center;
    gap: 8px;
}

.company-info h5::before {
    content: "🏢";
    font-size: 16px;
}

.category-info h5::before {
    content: "🔖";
    font-size: 16px;
}

.company-info p {
    margin: 0 0 4px 0;
    font-size: 13px;
    color: var(--txt3);
    line-height: 1.5;
}

.company-info p:last-child {
    margin-bottom: 0;
}

.btn-unlink {
    padding: 8px 14px;
    background: linear-gradient(135deg, var(--rose) 0%, var(--rose) 100%);
    color: white;
    border: none;
    border-radius: var(--r2);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3);
}

.btn-unlink:hover {
    background: linear-gradient(135deg, var(--rose) 0%, var(--rose) 100%);
    box-shadow: 0 4px 14px rgba(239, 68, 68, 0.5);
    transform: scale(1.05);
}

.btn-unlink i {
    font-size: 12px;
}

#company-search-result {
    padding: 14px 16px;
    background: linear-gradient(135deg, var(--status-success-light) 0%, var(--status-success-light) 100%);
    border: 2px solid var(--em);
    border-radius: var(--r1);
    font-size: 13px;
    color: var(--em);
    line-height: 1.6;
    margin-top: 12px;
    box-shadow: 0 2px 8px rgba(34, 197, 94, 0.1);
    animation: slideDown 0.3s ease;
}

#company-search-result.error {
    background: linear-gradient(135deg, var(--status-error-light) 0%, var(--status-error-light) 100%);
    border-color: var(--rose);
    color: var(--rose);
}

#company-search-result strong {
    font-weight: 700;
    color: var(--em);
}

#company-search-result.error strong {
    color: var(--rose);
}

#linked-companies-container p,
#categories-container p {
    color: var(--txt3);
    font-size: 14px;
    font-style: italic;
    text-align: center;
    padding: 32px 20px;
    background: linear-gradient(135deg, var(--page) 0%, var(--page) 100%);
    border: 2px dashed var(--border);
    border-radius: var(--r1);
    margin: 0;
}

/* Анимация появления элементов списка */

.company-item:nth-child(1),
.category-item:nth-child(1) { animation-delay: 0.05s; }

.company-item:nth-child(2),
.category-item:nth-child(2) { animation-delay: 0.1s; }

.company-item:nth-child(3),
.category-item:nth-child(3) { animation-delay: 0.15s; }

.company-item:nth-child(4),
.category-item:nth-child(4) { animation-delay: 0.2s; }

.company-item:nth-child(5),
.category-item:nth-child(5) { animation-delay: 0.25s; }

@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
}

.loading-spinner {
    display: inline-block;
    width: 40px;
    height: 40px;
    border: 4px solid var(--page);
    border-radius: 50%;
    border-top-color: var(--sky);
    animation: spin 1s ease-in-out infinite;
}

.loading-state {
    text-align: center;
    padding: 40px;
}

.loading-state .loading-spinner {
    margin-bottom: 15px;
}

.loading-text {
    color: var(--txt3);
    font-size: 14px;
    font-weight: 500;
}

.task-item,
.kanban-task {
    animation: fadeInUp 0.4s ease-out;
}

@media (max-width: 992px) {

  .kanban-board {
        grid-template-columns: 1fr;
    }

  .crm-form-row {
        grid-template-columns: 1fr;
    }

  .crm-progress-stats {
        grid-template-columns: 1fr;
    }

  .task-item {
        padding: 14px 16px;
    }

}

/* ==================== КОМПАКТНАЯ ТАБЛИЦА КОМПАНИЙ ==================== */

.list-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    gap: 20px;
}

.list-header h4 {
    margin: 0;
    font-size: 16px;
    color: var(--txt);
}

.search-box {
    position: relative;
    flex: 1;
    max-width: 350px;
}

.search-box i {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--txt3);
    font-size: 14px;
}

.search-input {
    width: 100%;
    height: 38px;
    padding: 8px 14px 8px 38px;
    border: 2px solid var(--border);
    border-radius: var(--r2);
    font-size: 13px;
    transition: all 0.2s;
}

.search-input:focus {
    outline: none;
    border-color: var(--sky);
    box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.1);
}

.companies-stats {
    padding: 12px 16px;
    background: linear-gradient(135deg, var(--sky-ll) 0%, var(--sky-ll) 100%);
    border-radius: var(--r2);
    margin-bottom: 16px;
    font-size: 14px;
    color: var(--sky-h);
    display: flex;
    align-items: center;
    gap: 8px;
}

.companies-stats i {
    font-size: 16px;
}

.companies-stats strong {
    color: var(--sky-h);
    font-weight: 600;
}

.companies-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--card);
    border-radius: var(--r2);
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.companies-table thead {
    background: linear-gradient(135deg, var(--page) 0%, var(--page) 100%);
}

.companies-table th {
    padding: 12px 16px;
    text-align: left;
    font-size: 12px;
    font-weight: 600;
    color: var(--txt3);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 2px solid var(--border);
}

.companies-table td {
    padding: 14px 16px;
    font-size: 13px;
    color: var(--txt);
    border-bottom: 1px solid var(--page);
}

.companies-table tbody tr {
    transition: background-color 0.2s;
}

.companies-table tbody tr:hover {
    background-color: var(--sky-ll);
}

.companies-table tbody tr:last-child td {
    border-bottom: none;
}

.badge-info {
    background: var(--sky-l);
    color: var(--sky-h);
}

.badge-warning {
    background: var(--status-warning-light);
    color: var(--am);
}

.btn-table-action {
    background: none;
    border: none;
    color: var(--rose);
    cursor: pointer;
    padding: 6px 10px;
    border-radius: var(--r3);
    transition: all 0.2s;
    font-size: 14px;
}

.btn-table-action:hover {
    background: var(--status-error-light);
    color: var(--rose);
}

.page-btn {
    min-width: 36px;
    height: 36px;
    padding: 0 12px;
    border: 1px solid var(--border);
    background: var(--card);
    color: var(--txt2);
    border-radius: var(--r3);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.page-btn:hover:not(.active) {
    border-color: var(--sky);
    color: var(--sky);
    background: var(--sky-ll);
}

.page-btn.active {
    background: linear-gradient(135deg, var(--sky) 0%, var(--sky-h) 100%);
    color: white;
    border-color: var(--sky-h);
    font-weight: 600;
}

.page-dots {
    color: var(--txt3);
    padding: 0 4px;
}

/* ==================== АВТОДОПОЛНЕНИЕ КОНТАКТОВ ==================== */

.contact-autocomplete-wrapper {
    position: relative;
    width: 100%;
}

.contact-search-input {
    width: 100%;
    padding-right: 40px;
}

.contact-autocomplete-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--card);
    border: 2px solid var(--sky);
    border-top: none;
    border-radius: 0 0 8px 8px;
    max-height: 300px;
    overflow-y: auto;
    z-index: 1000;
    display: none;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.contact-result-item {
    padding: 12px 14px;
    cursor: pointer;
    border-bottom: 1px solid var(--page);
    transition: background-color 0.2s;
}

.contact-result-item:last-child {
    border-bottom: none;
}

.contact-result-item:hover {
    background: var(--sky-ll);
}

.contact-result-main {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}

.contact-result-main strong {
    color: var(--txt);
    font-size: 14px;
}

.contact-result-company {
    color: var(--txt3);
    font-size: 12px;
    padding: 2px 8px;
    background: var(--page);
    border-radius: 4px;
}

.contact-result-details {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    font-size: 12px;
    color: var(--txt3);
}

.contact-result-details span {
    display: flex;
    align-items: center;
    gap: 5px;
}

.contact-result-details i {
    color: var(--sky);
    font-size: 11px;
}

.contact-result-empty {
    padding: 20px;
    text-align: center;
    color: var(--txt3);
    font-size: 13px;
}

.selected-contact-preview {
    display: none;
    margin-top: 12px;
}

.contact-preview-card {
    background: linear-gradient(135deg, var(--sky-ll) 0%, var(--sky-ll) 100%);
    border: 2px solid var(--sky);
    border-radius: var(--r2);
    padding: 12px 14px;
    max-width: 100%;
    box-sizing: border-box;
}

.contact-preview-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 8px;
    gap: 10px;
}

.contact-preview-header strong {
    color: var(--sky-h);
    font-size: 14px;
    display: block;
    margin-bottom: 3px;
    line-height: 1.3;
}

.contact-preview-position {
    color: var(--sky-h);
    font-size: 11px;
    font-style: italic;
    display: block;
    line-height: 1.3;
}

.contact-preview-remove {
    background: var(--card);
    border: 1px solid var(--sky);
    color: var(--rose);
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0;
}

.contact-preview-remove:hover {
    background: var(--status-error-light);
    border-color: var(--rose);
}

.contact-preview-company {
    color: var(--sky-h);
    font-size: 12px;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
    line-height: 1.3;
}

.contact-preview-company i {
    color: var(--sky);
}

.contact-preview-details {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.contact-preview-details div {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--sky-h);
    line-height: 1.3;
}

.contact-preview-details i {
    color: var(--sky);
    font-size: 12px;
    width: 16px;
}

.contact-preview-details a {
    color: var(--sky-h);
    text-decoration: none;
    transition: color 0.2s;
}

.contact-preview-details a:hover {
    color: var(--sky);
    text-decoration: underline;
}

.contact-autocomplete-results::-webkit-scrollbar {
    width: 6px;
}

.contact-autocomplete-results::-webkit-scrollbar-track {
    background: var(--page);
}

.contact-autocomplete-results::-webkit-scrollbar-thumb {
    background: var(--sky);
    border-radius: 3px;
}

.contact-autocomplete-results::-webkit-scrollbar-thumb:hover {
    background: var(--sky-h);
}

.task-view-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    z-index: 10001;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.task-view-modal.active {
    display: flex;
}

.task-view-modal-content {
    background: var(--card);
    border-radius: var(--r1);
    max-width: 650px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: slideUp 0.3s ease;
}

.task-view-modal-header {
    padding: 20px 24px;
    border-bottom: 2px solid var(--page);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(135deg, var(--page) 0%, var(--page) 100%);
}

.task-view-modal-header h3 {
    margin: 0;
    font-size: 18px;
    color: var(--txt);
    flex: 1;
    padding-right: 15px;
}

.modal-close-btn {
    background: var(--status-error-light);
    border: none;
    width: 32px;
    height: 32px;
    border-radius: var(--r2);
    font-size: 18px;
    cursor: pointer;
    color: var(--rose);
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-close-btn:hover {
    background: var(--rose);
    color: white;
}

.task-view-modal-body {
    padding: 20px 24px;
}

.view-section {
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--page);
}

.view-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.view-section h4 {
    margin: 0 0 12px 0;
    font-size: 14px;
    color: var(--txt3);
    font-weight: 600;
}

.view-badges {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.view-badge {
    padding: 6px 12px;
    border-radius: var(--r3);
    font-size: 12px;
    font-weight: 600;
}

.view-badge.priority {
    background: var(--status-warning-light);
    color: var(--am);
}

.view-badge.status {
    background: var(--sky-l);
    color: var(--sky-h);
}

.view-badge.category {
    background: var(--sky-l);
    color: var(--sky-h);
}

.view-notes {
    padding: 12px;
    background: var(--page);
    border-left: 3px solid var(--sky);
    border-radius: var(--r3);
    font-size: 13px;
    color: var(--txt2);
    line-height: 1.6;
    white-space: pre-wrap;
}

.view-contact-details {
    font-size: 13px;
    color: var(--txt2);
    line-height: 1.8;
}

.view-contact-details i {
    color: var(--sky);
    width: 16px;
}

.view-contact-details a {
    color: var(--sky);
    text-decoration: none;
}

.view-contact-details a:hover {
    text-decoration: underline;
}

.task-view-modal-footer {
    padding: 16px 24px;
    border-top: 2px solid var(--page);
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    background: var(--page);
}

.btn-view-action {
    padding: 8px 16px;
    border: 1px solid transparent;
    border-radius: var(--r3);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.btn-view-action:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

.btn-view-action.edit {
    background: var(--sky-l);
    color: var(--sky-h);
}

.btn-view-action.edit:hover {
    background: var(--sky);
    color: white;
}

.btn-view-action.complete {
    background: var(--sky-l);
    color: var(--em);
}

.btn-view-action.complete:hover {
    background: var(--em);
    color: white;
}

.btn-view-action.cancel {
    background: var(--status-error-light);
    color: var(--rose);
}

.btn-view-action.cancel:hover {
    background: var(--rose);
    color: white;
}

.btn-view-action.reopen {
    background: var(--sky-l);
    color: var(--sky-h);
}

.btn-view-action.reopen:hover {
    background: var(--sky);
    color: white;
}

.btn-view-action.delete {
    background: var(--status-error-light);
    color: var(--rose);
    margin-left: auto;
}

.btn-view-action.delete:hover {
    background: var(--rose);
    color: white;
}

/* ==================== RESPONSIVE MEDIA QUERIES ==================== */

/* Mobile (max-width: 768px) - ПОЛНЫЙ РЕДИЗАЙН */

.points-stats-wrapper {
    margin-bottom: 24px;
}

.points-stat-card {
    background: var(--card);
    border-radius: var(--r2);
    padding: 18px 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    border: 2px solid var(--border);
    transition: all 0.25s ease;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    min-width: 0;
    overflow: hidden;
}

.points-stat-card:hover {
    border-color: var(--sky);
    box-shadow: 0 4px 12px rgba(2, 132, 199, 0.15);
}

.points-stat-card.green:hover {
    border-color: var(--em);
}

.points-stat-card.red:hover {
    border-color: var(--rose);
}

.points-stat-card.orange:hover {
    border-color: var(--am);
}

.points-stat-icon {
    width: 52px;
    height: 52px;
    border-radius: var(--r1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
    border: 2px solid;
}

.points-stat-icon.green {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(16, 185, 129, 0.05) 100%);
    color: var(--em);
    border-color: rgba(16, 185, 129, 0.3);
}

.points-stat-icon.red {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.1) 0%, rgba(239, 68, 68, 0.05) 100%);
    color: var(--rose);
    border-color: rgba(239, 68, 68, 0.3);
}

.points-stat-icon.orange {
    background: linear-gradient(135deg, rgba(249, 115, 22, 0.1) 0%, rgba(249, 115, 22, 0.05) 100%);
    color: var(--am);
    border-color: rgba(249, 115, 22, 0.3);
}

.points-stat-content {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.points-stat-label {
    font-size: 12px;
    color: var(--txt3);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.points-stat-value {
    font-size: 28px;
    font-weight: 800;
    color: var(--txt);
    line-height: 1;
    word-break: break-all;
}

.points-filters {
    background: var(--card);
    border-radius: var(--r2);
    padding: 22px 26px;
    border: 2px solid var(--border);
    margin-bottom: 24px;
}

.points-filters-title {
    font-size: 17px;
    font-weight: 700;
    color: var(--txt);
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 14px;
    border-bottom: 2px solid var(--page);
}

.points-filters-title i {
    color: var(--sky);
    font-size: 18px;
}

.points-filters-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin-bottom: 18px;
}

.points-filter-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.points-filter-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--txt2);
}

.points-filter-select,
.points-filter-input {
    padding: 11px 15px;
    border: 2px solid var(--border);
    border-radius: var(--r2);
    font-size: 14px;
    color: var(--txt);
    transition: all 0.2s ease;
    background: var(--card);
}

.points-filter-select:focus,
.points-filter-input:focus {
    outline: none;
    border-color: var(--sky);
    box-shadow: 0 0 0 4px rgba(2, 132, 199, 0.1);
}

.points-filter-select:hover,
.points-filter-input:hover {
    border-color: var(--border);
}

.points-filters-actions {
    display: flex;
    gap: 12px;
}

.points-btn {
    padding: 11px 22px;
    border-radius: var(--r2);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 2px solid transparent;
}

.points-btn-primary {
    background: var(--sky);
    color: white;
    border-color: var(--sky);
}

.points-btn-primary:hover {
    background: var(--sky-h);
    border-color: var(--sky-h);
    box-shadow: 0 4px 12px rgba(2, 132, 199, 0.25);
}

.points-btn-secondary {
    background: var(--card);
    color: var(--sky);
    border-color: var(--sky);
}

.points-btn-secondary:hover {
    background: var(--sky-ll);
    border-color: var(--sky-h);
}

/* ==================== RESPONSIVE STYLES ==================== */

/* ========== СТИЛИ ДЛЯ СТРАНИЦЫ СТАТИСТИКИ ========== */

.device-stats {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.device-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: var(--page);
    border-radius: var(--r2);
    transition: background 0.2s;
}

.device-item:hover {
    background: var(--page);
}

.device-item i {
    font-size: 20px;
    color: var(--sky);
    width: 30px;
    text-align: center;
}

.device-name {
    flex: 1;
    font-weight: 500;
    color: var(--txt);
}

.device-count {
    font-size: 18px;
    font-weight: 700;
    color: var(--sky);
}

.browser-stats {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.browser-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: var(--page);
    border-radius: var(--r2);
    transition: background 0.2s;
}

.browser-item:hover {
    background: var(--page);
}

.browser-item i {
    font-size: 20px;
    width: 30px;
    text-align: center;
}

.browser-item.chrome i { color: var(--sky); }

.browser-item.firefox i { color: var(--am); }

.browser-item.safari i { color: var(--sky); }

.browser-item.edge i { color: var(--sky); }

.browser-item.opera i { color: var(--rose); }

.browser-name {
    flex: 1;
    font-weight: 500;
    color: var(--txt);
}

.browser-count {
    font-size: 18px;
    font-weight: 700;
    color: var(--sky);
}

/* city-stats/city-item — см. Statistics page block */

.viewers-table {
    width: 100%;
    border-collapse: collapse;
}

.viewers-table thead {
    background: var(--page);
}

.viewers-table th {
    padding: 12px 16px;
    text-align: left;
    font-size: 13px;
    font-weight: 600;
    color: var(--txt2);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 2px solid var(--border);
}

.viewers-table td {
    padding: 16px;
    border-bottom: 1px solid var(--page);
    font-size: 14px;
    color: var(--txt);
}

.viewers-table tbody tr:hover {
    background: var(--page);
}

.viewers-table tbody tr:last-child td {
    border-bottom: none;
}

.company-name-cell {
    font-weight: 600;
}

.company-email {
    color: var(--txt3);
    font-size: 13px;
}

.views-badge {
    display: inline-block;
    padding: 6px 12px;
    background: linear-gradient(135deg, var(--sky-l) 0%, var(--sky-l) 100%);
    color: var(--sky-h);
    border-radius: var(--r2);
    font-weight: 600;
    font-size: 14px;
}

.last-view {
    font-size: 13px;
    color: var(--txt3);
}

.viewed-content-list {
    font-size: 13px;
    color: var(--txt3);
    white-space: normal;
    word-wrap: break-word;
}

.pagination-btn:hover:not(.disabled):not(.active) {
    background: var(--page);
    border-color: var(--sky);
    color: var(--sky);
}

/* ── Легенда главного чарта ────────────────────────────── */

/* main-chart-legend / chart-leg-badge — см. Statistics page block */

/* ── Заголовок секции ──────────────────────────────────── */

.stat-section-heading {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
    background: linear-gradient(135deg, var(--sky-h) 0%, var(--sky) 100%);
    border-radius: var(--r1);
    padding: 14px 20px;
    margin-bottom: 20px;
    box-shadow: 0 4px 12px rgba(2, 132, 199, 0.25);
}

.stat-section-heading h2 {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 9px;
}

.stat-section-heading h2 i {
    color: rgba(255, 255, 255, 0.9);
    font-size: 16px;
}

.stat-section-heading p {
    margin: 0;
    color: rgba(255, 255, 255, 0.75);
    font-size: 12px;
    padding-left: 25px;
}

/* ── Заголовки карточек на этой странице ───────────────── */

.card .card-header {
    background: linear-gradient(135deg, var(--sky-h) 0%, var(--sky) 100%) !important;
    border-bottom-color: rgba(255,255,255,0.15) !important;
}

.card .card-header h2,
.card .card-header h3 {
    font-size: 16px;
    color: #fff !important;
    letter-spacing: normal;
}

.card .card-header h2 i,
.card .card-header h3 i {
    background: rgba(255, 255, 255, 0.2) !important;
    color: #fff !important;
}

.card .card-header p {
    color: rgba(255, 255, 255, 0.75) !important;
}

.card .card-header .all-link {
    color: rgba(255, 255, 255, 0.9) !important;
    background: rgba(255, 255, 255, 0.15);
    padding: 4px 12px;
    border-radius: var(--r1);
    font-size: 12px;
}

.card .card-header .all-link:hover {
    background: rgba(255, 255, 255, 0.25);
    text-decoration: none !important;
}

.card .card-header::before {
    background: rgba(255, 255, 255, 0.3) !important;
}

/* ── stat-trend с переносом для бейджей ───────────────── */

.module-stats-grid .stat-trend,
.stats-grid .stat-trend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    padding: 6px 0 4px;
    min-height: 28px;
}

/* ── Бейджи статусов на карточках ─────────────────────── */

.sbadge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 7px;
    border-radius: var(--r1);
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

.sbadge.green  { background: var(--status-success-light); color: var(--em); }

.sbadge.blue   { background: var(--sky-l); color: var(--sky); }

.sbadge.orange { background: var(--status-warning-light); color: var(--am); }

.sbadge.red    { background: var(--status-error-light); color: var(--rose); }

.sbadge.gray   { background: var(--page); color: var(--txt3); }

.sbadge.teal   { background: var(--sky-ll); color: var(--sky-h); }

/* ── Сетка 6 карточек модулей ──────────────────────────── */

.module-stats-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

@media (max-width: 900px) {

  .module-stats-grid { grid-template-columns: repeat(2, 1fr); }

  .action-costs-grid { grid-template-columns: repeat(2, 1fr); }

  .offers-page-body { grid-template-columns: 1fr; }

  .offers-sidebar { position: static; max-height: none; overflow: visible; border-radius: var(--r1); }

  .sidebar-filters-toggle {
        display: flex; align-items: center; justify-content: space-between;
        padding: 14px 18px; cursor: pointer; user-select: none;
        background: var(--card); border-radius: var(--r1);
    }

  .sidebar-filters-toggle .toggle-icon { transition: transform .3s; }

  .sidebar-collapsed .sidebar-filters-toggle .toggle-icon { transform: rotate(-180deg); }

  .sidebar-collapsed .sidebar-filters-body { display: none; }

  .offers-searchbar__inner { flex-wrap: wrap; }

  .offers-quickfilters { width: 100%; }

  .offers-searchbar__wrap { flex: 1 1 100%; min-width: 0; }

  .offers-searchbar__btn { flex: 0 0 auto; }

  .companies-list.view-grid {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    }

  .offer-detail__sidebar { position: static; }

}

/* ── Сетка топ-5 по модулям ────────────────────────────── */

.top-modules-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
    gap: 20px;
    margin-bottom: 24px;
}
.top-modules-grid > .activity-section { margin-bottom: 0; }

/* ── Подзаголовок внутри .card-header ──────────────────── */

.card-header .all-link {
    font-size: 13px;
    color: var(--sky);
    text-decoration: none;
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
}

.card-header .all-link:hover {
    text-decoration: underline;
}

/* ── Строки топ-таблиц ─────────────────────────────────── */

.top-table {
    width: 100%;
    border-collapse: collapse;
}

.top-table td {
    padding: 10px 16px;
    border-bottom: 1px solid var(--page);
    font-size: 13px;
    color: var(--txt);
}

.top-table tbody tr:last-child td {
    border-bottom: none;
}

.top-table tbody tr:hover {
    background: var(--page);
}

.top-table .rank-cell {
    width: 28px;
    color: var(--txt3);
    font-weight: 700;
    padding-right: 4px;
}

.top-table .title-cell {
    font-weight: 500;
    padding-left: 4px;
}

.top-table .title-cell a {
    color: var(--txt);
    text-decoration: none;
}

.top-table .title-cell a:hover {
    color: var(--sky);
}

.top-table .badge-warn {
    background: var(--status-error-light);
    color: var(--rose);
    font-size: 10px;
    padding: 1px 5px;
    border-radius: 4px;
    font-weight: 700;
    margin-left: 4px;
}

.top-table .views-cell {
    text-align: right;
    white-space: nowrap;
    font-weight: 700;
    color: var(--txt3);
}

.top-table .views-cell.indigo {
    color: var(--ind);
}

/* ── Ряды аналитических графиков ────────────────────────── */

.analytics-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 20px;
    margin-bottom: 20px;
}
.analytics-row > .activity-section { margin-bottom: 0; }

/* ── Высота графиков внутри карточек ───────────────────── */

.card-chart-300 {
    height: 300px;
}

.card-chart-250 {
    height: 250px;
}

/* ── Топ контента ───────────────────────────────────────── */

/* top-content-section wrapper */
.top-content-section { margin-bottom: 24px; }

/* ── Пустое состояние ───────────────────────────────────── */

.empty-state-card {
    text-align: center;
    padding: 60px 30px;
}

.empty-state-card i {
    font-size: 48px;
    color: var(--border);
    display: block;
    margin-bottom: 16px;
}

.empty-state-card p {
    color: var(--txt3);
    font-size: 16px;
    margin: 0;
}

/* ── Responsive дополнения ─────────────────────────────── */

/* ================================================================
   NOTIFICATION SETTINGS — only toggle + notification-specific styles
   Layout, cards, alerts, buttons come from admin-dashboard.css
   ================================================================ */

/* ── Bulk actions bar ─────────────────────────────────────── */

.bulk-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
}

.bulk-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 600;
    background: var(--card);
    color: var(--sky);
    border: 1px solid var(--sky);
    border-radius: var(--r2);
    cursor: pointer;
    transition: all .2s;
}

.bulk-btn:hover {
    background: var(--sky);
    color: #fff;
}

/* ── Section card header ──────────────────────────────────── */

.notification-section {
    overflow: hidden;
}

.notification-section-header {
    padding: 20px 30px;
    background: var(--card);
    border-bottom: 1px solid rgba(2, 132, 199, 0.1);
    display: flex;
    align-items: center;
    gap: 14px;
}

.notification-section-header h2 {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: var(--txt);
    display: flex;
    align-items: center;
    gap: 12px;
}

.notification-section-header .section-icon {
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, var(--sky), var(--teal));
    border-radius: var(--r2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 15px;
    flex-shrink: 0;
}

/* ── Category groups ──────────────────────────────────────── */

.notification-category {
    padding: 20px 30px;
    border-bottom: 1px solid var(--page);
    background: var(--card);
}

.notification-category:last-child {
    border-bottom: none;
}

.notification-category:nth-child(even) {
    background: var(--page);
}

.category-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--sky);
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.category-title i {
    font-size: 13px;
}

/* ── Notification row ─────────────────────────────────────── */

.notification-item {
    display: flex;
    align-items: flex-start;
    padding: 14px 16px;
    margin-bottom: 8px;
    background: var(--page);
    border-radius: var(--r2);
    border: 1px solid var(--border);
    transition: all 0.2s ease;
}

.notification-item:hover {
    background: var(--card);
    border-color: rgba(2, 132, 199, 0.3);
    box-shadow: 0 2px 8px rgba(2, 132, 199, 0.08);
}

.notification-item:last-child {
    margin-bottom: 0;
}

.notification-toggle {
    flex-shrink: 0;
    margin-right: 14px;
    margin-top: 2px;
}

.notification-info {
    flex: 1;
    min-width: 0;
}

.notification-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--txt);
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.notification-description {
    font-size: 13px;
    color: var(--txt3);
    line-height: 1.5;
}

/* ── Toggle switch ────────────────────────────────────────── */

.custom-checkbox {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 26px;
}

.custom-checkbox input {
    opacity: 0;
    width: 0;
    height: 0;
}

.checkbox-slider {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: var(--border);
    transition: 0.3s;
    border-radius: 34px;
}

.checkbox-slider:before {
    position: absolute;
    content: '';
    height: 20px;
    width: 20px;
    left: 3px;
    bottom: 3px;
    background-color: var(--card);
    transition: 0.3s;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.custom-checkbox input:checked + .checkbox-slider {
    background: linear-gradient(135deg, var(--sky), var(--teal));
}

.custom-checkbox input:checked + .checkbox-slider:before {
    transform: translateX(24px);
}

.custom-checkbox input:disabled + .checkbox-slider {
    opacity: 0.4;
    cursor: not-allowed;
}

/* ── Save button ──────────────────────────────────────────── */

.save-btn {
    margin-top: 30px;
    text-align: center;
}

.save-btn button {
    padding: 14px 50px;
    font-size: 15px;
    font-weight: 700;
    background: linear-gradient(135deg, var(--sky), var(--teal));
    color: white;
    border: none;
    border-radius: var(--r2);
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(2, 132, 199, 0.35);
    transition: all 0.2s ease;
}

.save-btn button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(2, 132, 199, 0.45);
}

/* User Notification Settings — дополнение к notification-settings.css */

.uns-info-box {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: var(--sky-ll);
    border: 1px solid rgba(2, 132, 199, 0.2);
    border-radius: var(--r2);
    padding: 14px 18px;
    margin-bottom: 20px;
    font-size: 13px;
    color: var(--txt2);
    line-height: 1.6;
}

.uns-info-box i { color: var(--sky); flex-shrink: 0; margin-top: 1px; }

.uns-info-box strong { color: var(--sky-h); }

.uns-item-disabled {
    opacity: 0.45;
    pointer-events: none;
}

.uns-global-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--page);
    color: var(--txt2);
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: var(--r1);
    border: 1px solid var(--border);
}

.uns-global-badge i { font-size: 10px; }

/* Улучшенные стили для формы создания заявки */

.form-card {
    background: var(--card);
    border-radius: var(--r1);
    padding: 32px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.form-group input[type="text"],
.form-group textarea,
.form-group select {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid var(--border);
    border-radius: var(--r2);
    font-size: 14px;
    font-family: inherit;
    transition: all 0.3s ease;
    background: var(--card);
}

.form-group input[type="text"]:focus,
.form-group textarea:focus,
.form-group select:focus {
    outline: none;
    border-color: var(--sky);
    box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.1);
}

/* Улучшенные стили для загрузки файлов */

.file-upload-wrapper {
    position: relative;
    display: block;
}

.file-upload-label {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    background: linear-gradient(135deg, var(--sky) 0%, var(--sky-h) 100%);
    color: white;
    border-radius: var(--r2);
    cursor: pointer;
    transition: all 0.3s ease;
    font-weight: 600;
    border: 2px solid var(--sky);
    box-shadow: 0 2px 8px rgba(2, 132, 199, 0.2);
}

.file-upload-label:hover {
    background: linear-gradient(135deg, var(--sky-h) 0%, var(--sky-h) 100%);
    box-shadow: 0 4px 12px rgba(2, 132, 199, 0.3);
    transform: translateY(-1px);
}

.file-upload-label i {
    font-size: 18px;
}

.file-name i {
    color: var(--sky);
    font-size: 16px;
}

.remove-file {
    margin-left: auto;
    color: var(--rose);
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    transition: background 0.2s;
}

.remove-file:hover {
    background: rgba(239, 68, 68, 0.1);
}

.form-text {
    display: block;
    margin-top: 8px;
    font-size: 13px;
    color: var(--txt3);
    line-height: 1.5;
}

.form-actions {
    display: flex;
    gap: 12px;
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid var(--border);
}

.file-name.active {
    animation: slideIn 0.3s ease;
}

/* ================================================
   ORDER POINTS — LIGHT + TEAL DASHBOARD STYLE
   ================================================ */

/* ── Layout ── */

/* ── Alerts ── */

/* ── Секция-заголовок (левый, компактный) ── */

.section-header-custom {
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 16px; margin-top: 28px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--sky-ll);
}

.section-header-custom:first-of-type { margin-top: 0; }

.section-header-custom h2 {
    font-size: 17px; font-weight: 700; color: var(--txt);
    margin: 0; display: flex; align-items: center; gap: 8px;
}

.section-header-custom h2 i { color: var(--sky); font-size: 17px; }

.section-header-custom p {
    font-size: 13px; color: var(--txt3); margin: 2px 0 0; line-height: 1.4;
    display: block; flex: 1;
}

/* ── Баланс + бонусы (инфо-карточки) ── */

.bonus-banner {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 20px;
}

.bonus-divider { display: none; }

.bonus-item {
    border: 1.5px solid var(--border);
    border-radius: var(--r1);
    background: var(--card);
    border: 1px solid var(--border);
    border-left: 4px solid var(--sky);
    border-radius: var(--r1);
    padding: 16px 20px;
    display: flex; align-items: center; gap: 14px;
    transition: box-shadow .2s, transform .2s;
}

.bonus-item:hover {
    box-shadow: 0 4px 14px rgba(20,184,166,.1);
    transform: translateY(-2px);
}

.bonus-icon {
    width: 48px; height: 48px;
    border-radius: var(--r2);
    background: rgba(20,184,166,.1);
    color: var(--sky);
    display: flex; align-items: center; justify-content: center;
    font-size: 20px; flex-shrink: 0;
}

.bonus-content { flex: 1; min-width: 0; }

.bonus-title {
    font-size: 11px; font-weight: 700; color: var(--txt3);
    text-transform: uppercase; letter-spacing: .06em;
    margin: 0 0 3px;
}

.bonus-value {
    font-size: 22px; font-weight: 800; color: var(--txt);
    line-height: 1.1; margin: 0 0 2px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.bonus-description { font-size: 12px; color: var(--txt3); margin: 0; line-height: 1.3; }

/* ── Тарифные карточки ── */

.tariff-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 16px;
    margin-bottom: 28px;
}

.tariff-card {
    background: var(--card);
    border-radius: var(--r1);
    padding: 24px 20px;
    border: 1px solid var(--border);
    border-top: 3px solid var(--border);
    transition: border-color .2s, box-shadow .2s, transform .2s;
    position: relative;
}

.tariff-card:hover {
    border-color: var(--sky-l);
    border-top-color: var(--sky);
    box-shadow: 0 4px 16px rgba(20,184,166,.12);
    transform: translateY(-3px);
}

.tariff-card.recommended {
    border-top-color: var(--sky);
    border-color: var(--sky-l);
}

.tariff-badge.discount-badge { background: var(--am); }

.tariff-badge.popular-badge  { background: var(--sky); }

.tariff-badge.base-badge     { background: var(--txt3); }

.tariff-points-box { margin-bottom: 12px; }

.tariff-points-label {
    font-size: 12px; color: var(--txt3); margin-top: 2px;
    text-transform: uppercase; letter-spacing: .05em; font-weight: 600;
}

.tariff-price-box { margin-bottom: 18px; }

.tariff-price-old {
    font-size: 13px; color: var(--txt3); text-decoration: line-through; margin-bottom: 2px;
}

.tariff-price-main { font-size: 26px; font-weight: 800; color: var(--txt); }

.btn-select-tariff {
    width: 100%; padding: 11px 20px;
    background: var(--sky); color: #fff;
    border: none; border-radius: var(--r2);
    font-size: 14px; font-weight: 700;
    cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 7px;
    transition: background .2s, transform .15s, box-shadow .2s;
}

.btn-select-tariff:hover {
    background: var(--sky-h); transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(20,184,166,.3);
}

/* ── Статистика платежей (строка карточек) ── */

.stat-card:hover { box-shadow: 0 2px 8px rgba(20,184,166,.1); transform: none; }

.stat-card::before { display: none; }

.stat-card-primary .stat-icon { background: rgba(59,130,246,.1); color: var(--sky); }

.stat-card-success .stat-icon { background: rgba(16,185,129,.1); color: var(--em); }

.stat-card-info    .stat-icon { background: rgba(20,184,166,.1); color: var(--sky); }

.stat-icon {
    width: 34px; height: 34px; border-radius: 7px;
    display: flex; align-items: center; justify-content: center;
    font-size: 15px; flex-shrink: 0; margin-bottom: 0;
}

.stat-content { flex: 1; }

/* ── Таблица заказов ── */

.card-header-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
    background: var(--page);
}

.card-header-left {
    display: flex; align-items: center; gap: 8px;
    font-size: 14px; font-weight: 700; color: var(--txt);
}

.card-header-left i { color: var(--sky); font-size: 15px; }

.card-header-sub {
    font-size: 12px; color: var(--txt3); margin: 0;
}

.orders-table-wrapper { overflow-x: auto; }

.orders-table { width: 100%; border-collapse: collapse; }

.orders-table thead th {
    background: var(--page); padding: 12px 14px;
    text-align: left; font-weight: 700; color: var(--txt2);
    font-size: 12px; text-transform: uppercase; letter-spacing: .05em;
    border-bottom: 1px solid var(--border);
}

.orders-table tbody td {
    padding: 13px 14px; border-bottom: 1px solid var(--page);
    font-size: 13px; color: var(--txt2); vertical-align: middle;
}

.orders-table tbody tr:last-child td { border-bottom: none; }

.orders-table tbody tr:hover { background: var(--page); }

.orders-table .td-right { text-align: right; }

.orders-table .td-center { text-align: center; }

.orders-table .val-teal { color: var(--sky); font-weight: 700; }

.orders-table .val-muted { color: var(--txt3); }

.orders-table tbody tr.row-new-invoice {
    background: var(--sky-ll);
    border-left: 3px solid var(--sky);
}

/* ── Статусы ── */

.status-rejected  { background: rgba(239,68,68,.1);  color: var(--rose); }

/* ── Кнопки действий ── */

.btn-invoice {
    background: var(--sky); color: #fff;
    box-shadow: 0 2px 8px rgba(20,184,166,.2);
}

.btn-invoice:hover { background: var(--sky-h); transform: translateY(-1px); }

/* ── Responsive ── */

/* ── Кнопка в шапке ── */

/* ── Оверрайды stat-label / stat-value / stat-content ── */

.stats-grid .stat-content { width: auto; flex: 1; }

.stats-grid .stat-label {
    justify-content: flex-start;
    min-height: auto;
    margin-bottom: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.stats-grid .stat-value {
    font-size: 20px;
    font-weight: 800;
    margin-bottom: 0;
    white-space: nowrap;
    line-height: 1.1;
}

/* ── Section heading bar ── */

.section-heading-bar {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--page);
    border: 1.5px solid var(--border);
    border-radius: 14px;
    padding: 16px 22px;
    margin-bottom: 20px;
}

.section-heading-bar > .fas {
    font-size: 1.4rem;
    color: var(--sky);
    flex-shrink: 0;
}

.section-heading-bar > div strong {
    display: block;
    font-size: .9375rem;
    font-weight: 700;
    color: var(--txt);
}

.section-heading-bar > div span {
    font-size: .8125rem;
    color: var(--txt2);
}

/* ── Премиум-карточки ── */

.premium-cards .tariff-card,
.tariff-card.premium-card {
    border: 2px solid var(--status-warning-light);
    background: linear-gradient(160deg, var(--card)beb 0%, var(--card) 70%);
    position: relative;
}

.premium-cards .tariff-card.recommended,
.tariff-card.premium-card.recommended {
    border-color: var(--am);
    box-shadow: 0 8px 32px var(--am)33;
}

/* ── Блок стоимости действий ── */

.action-costs-card {
    background: var(--card);
    border: 1.5px solid var(--border);
    border-radius: var(--r1);
    padding: 22px 28px;
    margin-bottom: 28px;
}

.action-costs-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
    flex-wrap: wrap;
}

.action-costs-header > .fa-coins {
    font-size: 1.5rem;
    color: var(--am);
    flex-shrink: 0;
}

.action-costs-header > div strong {
    display: block;
    font-size: .9375rem;
    font-weight: 700;
    color: var(--txt);
}

.action-costs-header > div span {
    font-size: .8125rem;
    color: var(--txt3);
}

.action-costs-gov-badge {
    margin-left: auto;
    background: linear-gradient(135deg, var(--sky-l), var(--status-success-light));
    border: 1px solid var(--em);
    color: var(--em);
    border-radius: var(--r1);
    padding: 5px 14px;
    font-size: .8125rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
}

.action-costs-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

@media (max-width: 580px) {

  .action-costs-grid { grid-template-columns: 1fr; }

}

.action-cost-item {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--card);
    border: 1.5px solid var(--border);
    border-radius: var(--r1);
    padding: 14px 16px;
    transition: box-shadow .15s, border-color .15s;
}

.action-cost-item:hover {
    border-color: var(--border);
    box-shadow: 0 2px 10px rgba(0,0,0,.06);
}

.action-cost-icon {
    width: 36px;
    height: 36px;
    border-radius: var(--r2);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 15px;
}

.action-cost-info {
    flex: 1;
    min-width: 0;
}

.action-cost-info strong {
    display: block;
    font-size: .875rem;
    color: var(--txt);
    font-weight: 600;
}

.action-cost-info small {
    font-size: .75rem;
    color: var(--txt3);
}

.action-cost-value {
    font-size: 1.2rem;
    font-weight: 900;
    white-space: nowrap;
    flex-shrink: 0;
    background: var(--page);
    border: 1px solid var(--border);
    border-radius: var(--r2);
    padding: 4px 10px;
    min-width: 60px;
    text-align: center;
}

/* ── Бесплатный тариф (order-points) ──────────────────────────────── */

.op-free-tier {
    display: flex;
    align-items: stretch;
    background: var(--card);
    border: 1.5px solid var(--border);
    border-radius: var(--r1);
    margin-bottom: 24px;
    overflow: hidden;
}

.op-free-left {
    padding: 24px 28px;
    min-width: 175px;
    flex-shrink: 0;
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
}

.op-free-label {
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .1em;
    color: var(--txt3);
    text-transform: uppercase;
}

.op-free-title {
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--txt);
    line-height: 1;
}

.op-free-price {
    font-size: 2rem;
    font-weight: 900;
    color: var(--txt);
    letter-spacing: -1.5px;
    line-height: 1;
    margin: 3px 0 12px;
}

.op-free-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--page);
    border: 1.5px solid var(--border);
    color: var(--txt2);
    padding: 7px 14px;
    border-radius: var(--r2);
    font-size: .8125rem;
    font-weight: 600;
    cursor: default;
    white-space: nowrap;
    width: fit-content;
}

.op-free-items {
    display: flex;
    flex: 1;
}

.op-free-item {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 24px 20px;
    border-right: 1px solid var(--page);
}

.op-free-item:last-child { border-right: none; }

.op-free-ico {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    background: var(--page);
    border: 1px solid var(--border);
    border-radius: var(--r2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: var(--txt3);
}

.op-free-val {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--txt);
    margin-bottom: 2px;
    letter-spacing: -.2px;
}

.op-free-desc {
    font-size: .7rem;
    color: var(--txt3);
    text-transform: uppercase;
    letter-spacing: .06em;
}

.request-page {
    max-width: 1280px;
    margin: 0 auto;
    padding: 30px 20px;
}

.expired-request {
    opacity: 0.9;
}

.expired-request .page-header,
.expired-request .meta-card,
.expired-request .main-content {
    background: var(--page) !important;
    filter: grayscale(15%);
}

.expired-notice {
    background: linear-gradient(135deg, var(--rose) 0%, var(--rose) 100%);
    color: white;
    padding: 24px 40px;
    border-radius: var(--r1);
    margin-bottom: 20px;
    box-shadow: 0 4px 15px rgba(239, 68, 68, 0.3);
    display: flex;
    gap: 20px;
    align-items: center;
}

.expired-notice-icon {
    font-size: 48px;
    opacity: 0.9;
}

.expired-notice-content h3 {
    margin: 0 0 8px 0;
    font-size: 22px;
    font-weight: 700;
    font-family: 'Inter', sans-serif;
}

.expired-notice-content p {
    margin: 0 0 16px 0;
    font-size: 15px;
    opacity: 0.95;
}

.btn-view-catalog {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--card);
    color: var(--rose);
    padding: 10px 20px;
    border-radius: var(--r2);
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    transition: all 0.3s ease;
}

.btn-view-catalog:hover {
    background: var(--status-error-light);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255, 255, 255, 0.3);
}

.badge-expired {
    background: linear-gradient(135deg, var(--rose) 0%, var(--rose) 100%);
    color: white;
    padding: 8px 16px;
    border-radius: var(--r1);
    font-size: 13px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.company-link {
    color: var(--sky);
    text-decoration: none;
    font-weight: 600;
    transition: color 0.2s ease;
}

.company-link:hover {
    color: var(--sky-h);
    text-decoration: underline;
}

.page-header {
    background: var(--card);
    padding: 35px 40px;
    border-radius: var(--r1);
    margin-bottom: 30px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.page-header-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 20px;
}

.page-header h1 {
    font-family: 'Inter', sans-serif;
    font-size: 32px;
    font-weight: 700;
    color: var(--txt);
    margin: 0 0 10px 0;
    line-height: 1.3;
}

.page-subtitle {
    color: var(--txt3);
    font-size: 15px;
    margin-bottom: 20px;
}

.header-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.btn i {
    font-size: 14px;
}

.btn-primary i {
    color: white !important;
}

.btn-secondary {
    background: var(--sky);
    color: #fff !important;
    border: 2px solid var(--sky);
    font-size: 1rem;
    border-radius: 1rem;
}

.btn-secondary:hover {
    background: var(--sky-h);
    border-color: var(--sky-h);
    color: #fff !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(20,184,166,.2);
}

.status-row {
    display: flex;
    align-items: center;
    gap: 15px;
    padding-top: 20px;
    border-top: 2px solid var(--page);
}

.meta-info {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    color: var(--txt3);
    font-size: 14px;
}

.meta-info-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.meta-info-item i {
    color: var(--txt3);
}

.meta-info-item strong {
    color: var(--txt);
    font-weight: 600;
}

.info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
    margin: 24px 0;
}

.info-item {
    background: var(--page);
    border: 1px solid var(--border);
    border-radius: var(--r2);
    padding: 16px;
}

.info-item-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.info-icon {
    color: var(--sky);
    font-size: 16px;
}

.info-item-label {
    color: var(--txt3);
    font-size: 13px;
    font-weight: 500;
}

.info-item-value {
    color: var(--txt);
    font-size: 15px;
    font-weight: 600;
}

.status-section {
    margin-bottom: 24px;
}

.status-badges {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.hidden-badge {
    background: var(--status-warning-light);
    color: var(--am);
    padding: 6px 12px;
    border-radius: var(--r3);
    font-size: 13px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.section-title i {
    color: var(--sky);
}

.contact-box {
    background: var(--page);
    border: 1px solid var(--border);
    border-radius: var(--r2);
    padding: 20px;
}

.contact-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
    color: var(--txt2);
}

.contact-item:last-child {
    border-bottom: none;
}

.contact-item i {
    color: var(--sky);
    width: 20px;
    text-align: center;
}

.contact-item strong {
    color: var(--txt);
}

.section-block {
    margin-bottom: 20px;
}

.card-content {
    padding: 20px 24px;
}

.content-layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 30px;
}

.meta-sidebar {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.meta-card {
    background: var(--card);
    padding: 28px;
    border-radius: var(--r1);
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    border: 2px solid var(--page);
    transition: all 0.3s ease;
}

.meta-card:hover {
    box-shadow: 0 6px 24px rgba(0,0,0,0.15);
    border-color: var(--sky);
    transform: translateY(-2px);
}

.meta-card-title {
    font-weight: 800;
    font-size: 17px;
    color: var(--sky-h);
    margin-bottom: 22px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 15px;
    border-bottom: 3px solid var(--page);
}

.meta-card-title i {
    color: var(--sky);
    font-size: 20px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--sky-l) 0%, var(--status-success-light) 100%);
    border-radius: var(--r2);
}

.meta-item {
    margin-bottom: 18px;
    padding: 12px;
    background: linear-gradient(135deg, var(--page) 0%, var(--card) 100%);
    border-radius: var(--r2);
    border: 1px solid var(--border);
    transition: all 0.3s ease;
}

.meta-item:hover {
    background: linear-gradient(135deg, var(--sky-ll) 0%, var(--sky-l) 100%);
    border-color: var(--sky);
    transform: translateX(3px);
}

.meta-item:last-child {
    margin-bottom: 0;
}

.meta-label {
    color: var(--txt3);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.meta-label i {
    width: 18px;
    text-align: center;
    color: var(--sky);
    font-size: 14px;
}

.meta-value {
    color: var(--sky-h);
    font-weight: 700;
    font-size: 16px;
    line-height: 1.5;
}

.meta-value a {
    color: var(--sky);
    text-decoration: none;
    font-weight: 700;
    border-bottom: 2px solid transparent;
    transition: all 0.3s ease;
    display: inline-block;
}

.meta-value a:hover {
    color: var(--sky-h);
    border-bottom-color: var(--sky);
    transform: translateY(-1px);
}

.text-urgent {
    color: var(--rose) !important;
    font-weight: 700 !important;
}

.badge-urgent-inline {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: linear-gradient(135deg, var(--status-error-light) 0%, var(--status-error-light) 100%);
    color: var(--rose);
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: 1px solid var(--rose);
    margin-left: 8px;
    animation: pulse-urgent 2s ease-in-out infinite;
}

.badge-urgent-inline i {
    font-size: 9px;
}

.main-content {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.company-section {
    background: linear-gradient(135deg, var(--sky-l) 0%, var(--sky-l) 100%);
    border: 1px solid rgba(59, 130, 246, 0.2);
    padding: 35px 40px;
    border-radius: var(--r1);
    box-shadow: 0 8px 24px rgba(59, 130, 246, 0.15);
}

.company-section-header {
    display: flex;
    gap: 24px;
    margin-bottom: 25px;
}

.company-icon {
    width: 130px;
    height: 130px;
    min-width: 130px;
    background: var(--card);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 60px;
    color: var(--sky);
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
    border: 2px solid rgba(255, 255, 255, 0.8);
    margin: 0 auto;
}

.company-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 12px;
}

.company-header-info {
    flex: 1;
}

.company-name {
    font-family: 'Inter', sans-serif;
    font-size: 28px;
    font-weight: 800;
    color: var(--sky-h);
    margin: 0 0 15px 0;
    line-height: 1.3;
}

.status-verified-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, var(--em) 0%, var(--em) 100%);
    color: white;
    padding: 10px 18px;
    border-radius: var(--r1);
    font-size: 14px;
    font-weight: 700;
    margin: 0;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.25);
    border: 2px solid rgba(255, 255, 255, 0.2);
}

.status-verified-badge i {
    font-size: 14px;
}

.company-text {
    color: var(--sky-h);
    line-height: 1.7;
    margin-bottom: 20px;
    font-size: 15px;
    background: rgba(255, 255, 255, 0.5);
    padding: 15px;
    border-radius: var(--r2);
    border-left: 4px solid var(--sky);
}

.company-meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 15px;
    font-size: 14px;
}

.company-meta-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: rgba(255, 255, 255, 0.6);
    padding: 12px 15px;
    border-radius: var(--r2);
    color: var(--sky-h);
    transition: all 0.3s ease;
}

.company-meta-item:hover {
    background: rgba(255, 255, 255, 0.85);
    transform: translateX(3px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.company-meta-item i {
    color: var(--sky);
    font-size: 16px;
    min-width: 20px;
    margin-top: 2px;
}

.company-meta-item strong {
    font-weight: 600;
    margin-right: 4px;
}

.company-meta-item a {
    color: var(--sky-h);
    text-decoration: none;
    font-weight: 600;
    border-bottom: 1px dashed var(--sky);
    transition: all 0.3s ease;
}

.company-meta-item a:hover {
    color: var(--sky);
    border-bottom-color: transparent;
}

.content-section {
    background: var(--card);
    padding: 35px 40px;
    border-radius: var(--r1);
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
    border: 1px solid rgba(0,0,0,0.05);
}

.section-header i {
    color: var(--sky);
    font-size: 26px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--sky-l) 0%, var(--status-success-light) 100%);
    border-radius: var(--r2);
}

.description-text {
    background: linear-gradient(135deg, var(--page) 0%, var(--card) 100%);
    padding: 28px;
    border-radius: var(--r1);
    line-height: 1.9;
    color: var(--txt2);
    white-space: pre-wrap;
    border: 2px solid var(--border);
    font-size: 15px;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.03);
}

.files-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.file-left {
    display: flex;
    align-items: center;
    gap: 15px;
    flex: 1;
}

.file-icon {
    width: 48px;
    height: 48px;
    background: var(--card);
    border-radius: var(--r2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--sky);
    font-size: 24px;
    border: 2px solid var(--border);
}

.file-info {
    flex: 1;
}

.file-meta {
    font-size: 13px;
    color: var(--txt3);
}

.file-download {
    background: var(--sky);
    color: white !important;
    padding: 10px 20px;
    border-radius: var(--r2);
    font-size: 14px;
    font-weight: 600;
    display: flex !important;
    align-items: center;
    gap: 8px;
    text-decoration: none !important;
    transition: all 0.2s;
}

.file-download i {
    color: white !important;
}

.file-download:hover {
    background: var(--sky-h);
    color: white !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(2, 132, 199, 0.3);
}

.file-download:hover i {
    color: white !important;
}

.contacts-box {
    background: linear-gradient(135deg, var(--status-success-light) 0%, var(--sky-l) 100%);
    border: 3px solid var(--em);
    padding: 32px;
    border-radius: var(--r1);
    box-shadow: 0 6px 20px rgba(16, 185, 129, 0.2);
    transition: all 0.3s ease;
}

.contacts-box:hover {
    box-shadow: 0 8px 28px rgba(16, 185, 129, 0.3);
    transform: translateY(-2px);
}

.contact-row {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 18px;
    padding: 14px 18px;
    background: rgba(255, 255, 255, 0.7);
    border-radius: var(--r1);
    color: var(--txt);
    font-size: 16px;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.contact-row:hover {
    background: rgba(255, 255, 255, 0.95);
    border-color: var(--em);
    transform: translateX(5px);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.15);
}

.contact-row:last-child {
    margin-bottom: 0;
}

.contact-row i {
    color: var(--em);
    width: 28px;
    height: 28px;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--card);
    border-radius: var(--r2);
    box-shadow: 0 2px 6px rgba(16, 185, 129, 0.15);
}

.contact-row strong {
    font-weight: 800;
    margin-right: 10px;
    color: var(--em);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.contact-row a {
    color: var(--em);
    text-decoration: none;
    font-weight: 700;
    border-bottom: 2px dashed var(--em);
    transition: all 0.3s ease;
}

.contact-row a:hover {
    color: var(--em);
    border-bottom-color: transparent;
    transform: translateY(-1px);
}

.contacts-hidden {
    background: linear-gradient(135deg, var(--status-error-light) 0%, var(--status-error-light) 100%);
    border: 2px solid var(--rose);
    padding: 40px;
    border-radius: var(--r1);
    text-align: center;
}

.contacts-hidden i {
    font-size: 56px;
    color: var(--rose);
    margin-bottom: 20px;
}

.contacts-hidden h4 {
    color: var(--rose);
    font-size: 20px;
    margin: 0 0 12px 0;
    font-weight: 700;
}

.contacts-hidden p {
    color: var(--rose);
    margin: 0;
    font-size: 15px;
}

.history-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.history-item {
    background: linear-gradient(135deg, var(--status-warning-light) 0%, var(--status-warning-light) 100%);
    border-left: 5px solid var(--am);
    padding: 20px 28px;
    border-radius: var(--r1);
    box-shadow: 0 3px 10px rgba(245, 158, 11, 0.12);
    transition: all 0.3s ease;
    border: 1px solid rgba(245, 158, 11, 0.2);
}

.history-item:hover {
    transform: translateX(5px);
    box-shadow: 0 5px 15px rgba(245, 158, 11, 0.2);
}

.history-date {
    color: var(--am);
    font-size: 13px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    letter-spacing: 0.3px;
}

.history-date i {
    color: var(--am);
    font-size: 14px;
}

.history-text {
    color: var(--am);
    font-size: 15px;
    line-height: 1.7;
}

.history-text strong {
    color: var(--am);
    font-weight: 700;
    margin-right: 6px;
}

/* ── view_request.php (user) ── */
.vr-status-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border);
}

.vr-meta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--txt3);
    font-weight: 500;
}

.vr-meta i { color: var(--sky); }

.vr-files { display: flex; flex-direction: column; gap: 10px; }

.vr-file-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
    background: var(--page);
    border: 1px solid var(--border);
    border-radius: var(--r2);
    transition: border-color .15s;
}

.vr-file-row:hover { border-color: var(--sky); }

.vr-file-icon {
    width: 42px; height: 42px;
    display: flex; align-items: center; justify-content: center;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--r2);
    color: var(--sky);
    font-size: 18px;
    flex-shrink: 0;
}

.vr-file-info { flex: 1; min-width: 0; }
.vr-file-name { font-size: 14px; font-weight: 600; color: var(--txt); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vr-file-meta { font-size: 12px; color: var(--txt3); margin-top: 2px; }

.history-editor { margin-left: 14px; }

/* ── view_request mobile ── */
@media (max-width: 860px) {
    .vr-status-bar { gap: 8px; }
    .info-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
    .vr-file-row { flex-wrap: wrap; gap: 10px; }
    .vr-file-row .btn { width: 100%; justify-content: center; }
    .contact-item { font-size: 13px; gap: 8px; }
}

@media (max-width: 480px) {
    .info-grid { grid-template-columns: 1fr; }
    .info-item { padding: 12px; }
    .vr-file-icon { width: 36px; height: 36px; font-size: 15px; }
    .contact-item { flex-wrap: wrap; }
    .history-item { padding: 14px 16px; }
    .history-editor { margin-left: 0; display: block; }
}

/* ==================== EXTRACTED INLINE STYLES ==================== */

/* From: pages/public/view_request.php */

.modal-header h2 i {
    font-size: 24px;
}

.close-modal {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-size: 24px;
    cursor: pointer;
    color: white;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.close-modal:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: rotate(90deg);
}

.modal form {
    padding: 30px;
}

.form-control {
    width: 100%;
    padding: 14px 16px;
    border: 2px solid var(--border);
    border-radius: var(--r2);
    font-size: 15px;
    font-family: inherit;
    transition: all 0.2s;
    background: var(--page);
}

.form-control:focus {
    outline: none;
    border-color: var(--sky);
    background: var(--card);
    box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.1);
}

.form-control::placeholder {
    color: var(--txt3);
}

textarea.form-control {
    resize: vertical;
    min-height: 120px;
}

input[type="file"].form-control {
    padding: 12px;
    cursor: pointer;
    background: var(--card);
}

input[type="file"].form-control::-webkit-file-upload-button {
    background: linear-gradient(135deg, var(--sky) 0%, var(--sky-h) 100%);
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: var(--r2);
    cursor: pointer;
    font-weight: 600;
    font-size: 14px;
    margin-right: 12px;
    transition: all 0.2s;
}

input[type="file"].form-control::-webkit-file-upload-button:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(2, 132, 199, 0.3);
}

.text-muted i {
    color: var(--sky);
    margin-right: 4px;
}

.d-block {
    display: block;
    margin-top: 5px;
}

#responseMessage.success {
    padding: 16px 20px;
    background: linear-gradient(135deg, var(--sky-l) 0%, var(--status-success-light) 100%);
    border: 2px solid var(--em);
    color: var(--em);
    border-radius: var(--r2);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
}

#responseMessage.success::before {
    content: '\f058';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 20px;
    color: var(--em);
}

#responseMessage.error {
    padding: 16px 20px;
    background: linear-gradient(135deg, var(--status-error-light) 0%, var(--status-error-light) 100%);
    border: 2px solid var(--rose);
    color: var(--rose);
    border-radius: var(--r2);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
}

#responseMessage.error::before {
    content: '\f06a';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 20px;
    color: var(--rose);
}

#selectedFiles {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.file-item i {
    color: var(--sky);
    font-size: 16px;
}

.file-item .file-name {
    flex: 1;
    font-weight: 500;
}

.file-item .file-size {
    color: var(--txt3);
    font-size: 12px;
}

@keyframes pulse-urgent {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.7;
    }
}

/* view_request.php — rich text description styles */

.description-box ul,.description-text ul{padding-left:1.4em;list-style:disc}

.description-box ol,.description-text ol{padding-left:1.4em;list-style:decimal}

.description-box p,.description-text p{margin:0 0 .5em}

.description-box strong,.description-text strong{font-weight:700}

.description-box blockquote,.description-text blockquote{border-left:3px solid var(--sky);margin:8px 0;padding-left:12px;color:var(--txt3)}

/* ─── Чистый HTML — новые классы ─── */

.rq-header-row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}

.rq-flex-1{flex:1}

.badge-views{font-size:.8125rem}

.meta-value--sm{font-size:.8125rem;line-height:1.4}

.meta-value--md{font-size:.875rem}

.meta-value--undefined{color:var(--txt3);font-size:.8125rem}

.meta-card--mt{margin-top:15px}

.meta-card__body{padding:15px}

.meta-info-row{margin-bottom:14px;padding-bottom:14px;border-bottom:1px solid var(--border)}

.meta-info-row:last-child{border-bottom:none;margin-bottom:0;padding-bottom:0}

.meta-info-label{font-size:.75rem;color:var(--txt3);margin-bottom:4px}

.meta-info-text{font-size:.875rem;color:var(--txt2);line-height:1.6}

.company-badge-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:8px}

.modal-success{padding:28px 24px;text-align:center}

.modal-success__icon{width:80px;height:80px;margin:0 auto 18px;background:linear-gradient(135deg,var(--em),var(--em));border-radius:50%;display:flex;align-items:center;justify-content:center}

.modal-success__icon i{font-size:38px;color: #fff}

.modal-success__title{margin:0 0 10px;color:var(--txt);font-size:1.25rem;font-weight:800}

.modal-success__text{margin:0;color:var(--txt2);font-size:.9rem;line-height:1.6}

.modal-success__actions{margin-top:20px}

.rq-label-flex{display:flex;align-items:center;cursor:pointer;font-size:.9375rem}

.rq-label-icon{margin-right:8px;color:var(--sky)}

.rq-files-list{margin-top:12px}

.rq-inline-btn{display:inline-block;padding:10px 20px;background:var(--sky);color: #fff;text-decoration:none;border-radius:8px;font-weight:600}

/* ── Request detail page — offer-style overrides ── */

.request-detail-page .offer-cta-btn{margin-top:14px;display:flex;align-items:center;justify-content:center;gap:8px;width:100%;box-sizing:border-box}

.rq-expired-banner{background:var(--status-error-light);border-bottom:2px solid var(--status-error-light);padding:12px 0;font-size:.9rem}

.rq-expired-banner .container{display:flex;align-items:center;gap:12px;color:var(--rose)}

.rq-expired-banner i{font-size:1.2rem;flex-shrink:0}

.rq-expired-banner a{color:var(--rose);font-weight:600;margin-left:8px}

.rq-pill--expired{background:var(--status-error-light);color:var(--rose);border-color:var(--status-error-light)}

.rq-pill--active{background:var(--status-success-light);color:var(--em);border-color:var(--em)}

.rq-budget-undef{font-size:1.3rem!important;color:var(--txt3)!important}

.rq-org-logo{width:80px;height:80px;object-fit:contain;border-radius:8px;border:1px solid var(--border);background:var(--card);padding:4px}

.rq-contacts-hidden{display:flex;align-items:flex-start;gap:12px;background:var(--page);border:1px solid var(--border);border-radius:10px;padding:18px 20px;color:var(--txt2)}

.rq-contacts-hidden i{font-size:1.4rem;color:var(--txt3);margin-top:2px;flex-shrink:0}

.rq-contacts-hidden strong{color:var(--txt);display:block;margin-bottom:4px}

.rq-contacts-hidden p{margin:0;font-size:.875rem}

.rq-qa-form{background:var(--sky-ll);border:1px solid var(--sky-l);border-radius:10px;padding:20px;margin-bottom:20px}

.rq-qa-form .form-group{margin-bottom:14px}

.rq-qa-form .form-label{display:block;font-weight:600;color:var(--txt);margin-bottom:8px;font-size:.875rem}

.rq-qa-form .form-input{width:100%;padding:10px 14px;border:1.5px solid var(--sky-l);border-radius:8px;font-size:.9375rem;resize:vertical;min-height:80px;box-sizing:border-box;font-family:inherit;transition:border-color .2s}

.rq-qa-form .form-input:focus{outline:none;border-color:var(--sky);box-shadow:0 0 0 3px rgba(20,184,166,.1)}

.rq-qa-list{display:flex;flex-direction:column;gap:14px}

.rq-qa-item{border:1px solid var(--border);border-radius:10px;overflow:hidden}

.rq-qa-q{padding:16px 18px;background:var(--card)}

.rq-qa-q__head{display:flex;align-items:center;gap:10px;margin-bottom:10px;flex-wrap:wrap}

.rq-qa-num{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;background:var(--sky);color:#fff;border-radius:50%;font-size:.72rem;font-weight:700;flex-shrink:0}

.rq-qa-company{font-weight:700;color:var(--txt);font-size:.875rem;text-decoration:none}

.rq-qa-company:hover{color:var(--sky)}

.rq-qa-date{font-size:.75rem;color:var(--txt3);margin-left:auto}

.rq-qa-q__text{color:var(--txt2);font-size:.9375rem;line-height:1.6}

.rq-qa-a{padding:14px 18px;background:var(--sky-ll);border-top:1px solid var(--sky-ll)}

.rq-qa-a__head{display:flex;align-items:center;gap:8px;margin-bottom:8px;font-size:.8rem;color:var(--sky-h)}

.rq-qa-a__text{color:var(--txt2);font-size:.9375rem;line-height:1.6}

.rq-qa-pending{padding:12px 18px;background:var(--card)BEB;border-top:1px solid var(--status-warning-light);color:var(--am);font-size:.8rem;display:flex;align-items:center;gap:8px}

.rq-qa-empty{text-align:center;padding:32px;color:var(--txt3)}

.rq-qa-empty i{font-size:2rem;display:block;margin-bottom:8px}

.rq-pill--withdrawn{background:var(--status-warning-light);color:var(--am);border-color:var(--am)}

.rq-pill--completed{background:var(--status-success-light);color:var(--em);border-color:var(--em)}

.rq-withdrawal-notice{display:flex;align-items:flex-start;gap:12px;background:var(--status-error-light);border:1px solid var(--status-error-light);border-radius:10px;padding:16px 18px;margin-top:16px;color:var(--rose);font-size:.9rem;line-height:1.5}

.rq-withdrawal-notice i{flex-shrink:0;margin-top:2px}

.rq-withdrawal-notice strong{display:block;margin-bottom:2px}

.rq-desc-plain{white-space:pre-line;font-size:.9375rem;line-height:1.8;color:var(--txt2)}

.rq-org-contacts{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px;padding-top:14px;border-top:1px solid var(--page)}

/* ===============================================
   VIEW RESPONSES — COMPACT GRID · LIGHT + TEAL
   =============================================== */

/* ── Шапка — меньший отступ снизу ── */

/* ── Двухколоночный грид для карточек ── */

.request-info-cards,

/* ── Инфо-панель сверху ── */

.request-info-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 16px;
}

.info-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-left: 4px solid var(--sky);
    border-radius: var(--r1);
    padding: 18px 20px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 16px;
    box-shadow: none;
    transition: border-color .2s, box-shadow .2s, transform .2s;
}

.info-card:hover {
    border-color: var(--sky-l);
    border-left-color: var(--sky-h);
    box-shadow: 0 4px 16px rgba(20,184,166,.12);
    transform: translateY(-2px);
}

.info-card-icon {
    width: 52px;
    height: 52px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
    margin-bottom: 0;
    transition: transform .2s;
}

.info-card:hover .info-card-icon { transform: scale(1.08) rotate(4deg); }

.info-card-content { flex: 1; min-width: 0; }

.info-card-value {
    font-size: 22px;
    font-weight: 800;
    color: var(--txt);
    line-height: 1.1;
    margin-bottom: 3px;
    letter-spacing: -.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.info-card-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--txt3);
    text-transform: uppercase;
    letter-spacing: .06em;
    line-height: 1.3;
}

/* ── Карточка отклика ── */

.response-card {
    padding: 13px 15px;
    margin-bottom: 0;
    border-radius: var(--r2);
    border: 1px solid var(--border);
    border-left: 3px solid var(--sky);
    box-shadow: none;
    background: var(--card);
    animation: none;
    transition: border-color .15s, box-shadow .15s;
}

.response-card::before     { display: none; }

.response-card:hover {
    border-color: var(--sky-l);
    border-left-color: var(--sky-h);
    box-shadow: 0 2px 12px rgba(20,184,166,.1);
    transform: none;
}

.response-card.status-accepted              { border-left-color: var(--em); background: var(--card); }

.response-card.status-rejected              { border-left-color: var(--rose); background: var(--card); }

.response-card.status-new::before,
.response-card.status-viewed::before        { display: none; }

/* ── Шапка карточки ── */

.response-header {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 10px;
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--page);
    grid-template-columns: unset !important;
}

/* ── Лого ── */

.company-logo-wrapper      { flex-shrink: 0; }

.company-logo {
    width: 56px; height: 56px;
    border-radius: var(--r2);
    border: 1px solid var(--border);
    padding: 6px;
    object-fit: contain;
    background: var(--card);
    display: block;
}

.company-logo-placeholder {
    width: 56px; height: 56px;
    border-radius: var(--r2);
    border: 1px solid var(--border);
    background: var(--page);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.company-logo-placeholder i { font-size: 22px; color: var(--txt3); }

/* ── Название и контакты ── */

.company-info              { flex: 1; display: flex; align-items: center; gap: 10px; min-width: 0; }

.company-info-text         { flex: 1; min-width: 0; }

.company-info-text h3 {
    font-size: 13px; font-weight: 700;
    margin: 0 0 3px; color: var(--txt);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.company-info-text h3 i    { font-size: 12px; color: var(--sky); }

.company-details {
    display: flex; flex-direction: row; flex-wrap: wrap;
    gap: 0 10px; font-size: 11px; color: var(--txt3); margin-top: 0;
}

.company-details > div {
    display: flex; align-items: center; gap: 4px;
    padding: 0; background: none; border-radius: 0; font-weight: 400;
}

.company-details i         { font-size: 10px; width: auto; color: var(--sky); }

/* ── Сумма ── */

.response-amount {
    flex-shrink: 0;
    background: var(--sky-ll);
    border: 1px solid var(--sky-l);
    border-radius: 7px;
    padding: 5px 11px;
    text-align: right;
    white-space: nowrap;
}

.amount-value              { font-size: 15px; font-weight: 700; color: var(--sky-h); margin: 0; display: block; }

.amount-label              { font-size: 10px; color: var(--txt3); text-transform: uppercase; letter-spacing: .03em; }

/* ── Сообщение ── */

.response-message {
    background: var(--page);
    border: 1px solid var(--border);
    border-radius: var(--r3);
    padding: 7px 11px;
    margin: 0 0 7px;
    font-size: 12px; line-height: 1.5; color: var(--txt2);
}

.response-message strong   { font-size: 11px; color: var(--txt3); margin-bottom: 3px; font-weight: 600; display: flex; align-items: center; gap: 4px; }

.response-message strong i { font-size: 11px; color: var(--sky); }

/* ── Файлы ── */

.response-files {
    background: none; border: none; padding: 0; margin: 0 0 7px;
    border-radius: 0;
}

.response-files > strong   { font-size: 11px; color: var(--txt3); margin-bottom: 5px; font-weight: 600; display: flex; align-items: center; gap: 4px; }

.response-files > strong i { font-size: 11px; color: var(--sky); }

.file-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
}

.file-item {
    display: flex; align-items: center;
    padding: 6px 9px;
    background: var(--page);
    border: 1px solid var(--border);
    border-radius: var(--r3);
    text-decoration: none; color: var(--txt2);
    font-size: 11px; font-weight: 500;
    box-shadow: none; position: relative; overflow: hidden;
    transition: background .15s, border-color .15s;
}

.file-item::before         { display: none; }

.file-item:hover {
    background: var(--sky-ll); border-color: var(--sky);
    color: var(--sky-h); transform: none; box-shadow: none;
}

.file-item i:first-child   { font-size: 14px; margin-right: 6px; margin-left: 0; flex-shrink: 0; }

.file-item:hover i:first-child { transform: none; }

.file-name                 { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.file-item i:last-child    { font-size: 11px; margin-left: 5px; opacity: .5; flex-shrink: 0; }

.file-item:hover i:last-child { opacity: 1; transform: none; }

/* ── Причина отклонения ── */

.rejection-reason {
    background: var(--card)5f5;
    border-left: 3px solid var(--rose);
    border-radius: var(--r3);
    padding: 7px 11px;
    font-size: 11px; color: var(--rose);
    margin: 0 0 7px; display: flex; gap: 8px; align-items: flex-start;
}

.rejection-reason i                { font-size: 12px; margin-top: 1px; flex-shrink: 0; }

.rejection-reason > div strong     { font-size: 11px; margin-bottom: 2px; display: block; }

/* ── Footer ── */

.response-footer {
    margin-top: 8px; padding-top: 8px;
    border-top: 1px solid var(--page);
    display: flex; justify-content: space-between; align-items: center;
}

.footer-actions {
    display: flex; gap: 5px; align-items: center;
    flex-wrap: nowrap; width: 100%;
}

/* ── Бейджи статусов ── */

.response-card .badge,
.footer-actions .badge {
    display: inline-flex; align-items: center; gap: 5px;
    height: 30px; padding: 0 11px;
    border-radius: var(--r3);
    font-size: 12px; font-weight: 600;
    min-width: auto; letter-spacing: 0; text-transform: none;
    border: 1px solid transparent; white-space: nowrap;
}

.response-card .badge i,
.footer-actions .badge i   { font-size: 11px; }

.response-card .badge-primary,
.footer-actions .badge-primary  { background: var(--sky-l); color: var(--sky-h); border-color: var(--sky-l); }

.response-card .badge-info,
.footer-actions .badge-info     { background: var(--sky-l); color: var(--sky-h); border-color: var(--sky-l); }

.response-card .badge-success,
.footer-actions .badge-success  { background: var(--sky-l); color: var(--em); border-color: var(--status-success-light); }

.response-card .badge-danger,
.footer-actions .badge-danger   { background: var(--status-error-light); color: var(--rose); border-color: var(--status-error-light); }

.response-card .badge-warning,
.footer-actions .badge-warning  { background: var(--status-warning-light); color: var(--am); border-color: var(--status-warning-light); }

/* ── Кнопки ── */

.btn-action {
    display: inline-flex; align-items: center; gap: 5px;
    height: 30px; padding: 0 13px;
    border-radius: var(--r3);
    font-size: 12px; font-weight: 600;
    min-width: auto; text-transform: none; letter-spacing: 0;
    cursor: pointer; border: 1px solid transparent;
    transition: background .15s;
}

.btn-action::before        { display: none; }

.btn-action i              { font-size: 11px; }

.btn-accept                { background: var(--sky); color: #fff; border-color: var(--sky); }

.btn-accept:hover          { background: var(--sky-h); border-color: var(--sky-h); }

.btn-reject                { background: var(--card); color: var(--rose); border-color: var(--status-error-light); }

.btn-reject:hover          { background: var(--status-error-light); border-color: var(--rose); }

/* ── Пустое состояние ── */
.empty-state {
    text-align: center;
    padding: 60px 20px;
}

.empty-state > i {
    font-size: 56px;
    color: var(--border);
    margin-bottom: 16px;
    display: block;
}

.empty-state h3 { font-size: 18px; color: var(--txt2); margin: 0 0 8px; font-weight: 600; }

.empty-state p  { font-size: 14px; color: var(--txt3); margin: 0 0 24px; }

.empty-state .btn { display: inline-flex; }

/* ── Section count badge ── */
.section-count {
    background: var(--sky-l);
    color: var(--sky);
    font-size: 13px;
    font-weight: 700;
    padding: 2px 10px;
    border-radius: 20px;
    margin-left: 8px;
}

/* ═══════════════════════════════════════
   ПЛАНШЕТ (769–1024px) — 1 колонка
═══════════════════════════════════════ */

@media screen and (max-width: 1024px) {

  .dashboard-content     { grid-template-columns: 1fr; }

  .request-info-cards    { grid-template-columns: repeat(2, 1fr); }

  .file-list             { grid-template-columns: 1fr; }

}

/* ═══════════════════════════════════════
   МОБИЛЬНАЯ (≤768px)
═══════════════════════════════════════ */

@media screen and (max-width: 768px) {

  .dashboard-container   { padding: 10px !important; }

  .request-info-cards    { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }

  .info-card             { padding: 14px 16px !important; }

  .info-card-icon        { width: 40px !important; height: 40px !important; font-size: 18px !important; margin-bottom: 10px !important; }

  .info-card-value       { font-size: 18px !important; }

  .info-card-label       { font-size: 10px !important; }

  .response-card         { padding: 10px 12px !important; }

  .response-header       { flex-wrap: wrap !important; }

  .response-amount       { width: 100% !important; text-align: left !important; }

  .file-list             { grid-template-columns: 1fr !important; }

  .footer-actions        { flex-wrap: wrap !important; }

  .footer-actions .badge,
    .btn-action            { width: 100% !important; justify-content: center !important; }

}

@media screen and (max-width: 480px) {

  .info-card             { min-width: 100%; }

  .company-details       { flex-direction: column !important; gap: 2px !important; }

}

/* ══════════════════════════════════════
   МОДАЛЬНОЕ ОКНО ОТКЛОНЕНИЯ
   ══════════════════════════════════════ */

#rejectModal.modal-overlay {
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(4px);
}

#rejectModal .modal-content {
    background: var(--card);
    border-radius: var(--r1);
    padding: 0;
    width: 90%;
    max-width: 480px;
    box-shadow: 0 20px 60px rgba(0,0,0,.15);
    border: none;
    overflow: hidden;
    animation: slideUp .25s ease;
}

#rejectModal .modal-header {
    background: var(--sky);
    padding: 18px 24px;
    margin-bottom: 0;
    border-bottom: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#rejectModal .modal-header h3 {
    margin: 0;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 10px;
}

#rejectModal .modal-header h3 i {
    font-size: 18px;
    color: #fff;
}

#rejectModal .modal-close {
    background: rgba(255,255,255,.2);
    border: none;
    color: #fff;
    width: 32px;
    height: 32px;
    border-radius: var(--r2);
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .2s, transform .2s;
    padding: 0;
    line-height: 1;
}

#rejectModal .modal-close:hover {
    background: rgba(255,255,255,.35);
    transform: rotate(90deg);
}

#rejectModal .modal-body {
    padding: 22px 24px 4px;
}

#rejectModal .modal-body label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    color: var(--txt3);
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: 8px;
}

#rejectModal .modal-body label span {
    color: var(--rose);
    font-size: 14px;
    text-transform: none;
}

#rejectModal .modal-body textarea {
    width: 100%;
    min-height: 120px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: var(--r2);
    font-size: 13px;
    line-height: 1.55;
    resize: vertical;
    font-family: inherit;
    color: var(--txt2);
    background: var(--page);
    transition: border-color .2s, box-shadow .2s, background .2s;
    box-sizing: border-box;
}

#rejectModal .modal-body textarea:focus {
    outline: none;
    border-color: var(--sky);
    background: var(--card);
    box-shadow: 0 0 0 3px rgba(20,184,166,.1);
}

#rejectModal .modal-body .modal-hint {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--txt3);
    margin-top: 8px;
    margin-bottom: 0;
}

#rejectModal .modal-body .modal-hint i {
    color: var(--sky);
    font-size: 13px;
}

#rejectModal .modal-footer {
    padding: 16px 24px 20px;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 0;
}

#rejectModal .modal-footer .btn-cancel {
    padding: 9px 20px;
    border: 1px solid var(--border);
    border-radius: var(--r2);
    background: var(--page);
    color: var(--txt3);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background .2s, border-color .2s;
    text-transform: none;
    letter-spacing: 0;
}

#rejectModal .modal-footer .btn-cancel:hover {
    background: var(--page);
    border-color: var(--border);
}

#rejectModal .modal-footer .btn-submit {
    padding: 9px 22px;
    border: none;
    border-radius: var(--r2);
    background: var(--rose);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: background .2s, transform .15s, box-shadow .2s;
    text-transform: none;
    letter-spacing: 0;
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

#rejectModal .modal-footer .btn-submit:hover {
    background: var(--rose);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(239,68,68,.3);
}

#rejectModal .modal-footer .btn-submit:disabled {
    background: var(--border);
    color: var(--txt3);
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.invoice-container {
    max-width: 800px;
    margin: 0 auto;
    background: var(--card);
}

.invoice-header {
    text-align: center;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--txt);
}

.invoice-title {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 5px;
}

.invoice-number {
    font-size: 14px;
}

.section {
    margin-bottom: 15px;
}

.details-grid {
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: 5px;
    margin-bottom: 10px;
}

.details-label {
    font-weight: bold;
}

.invoice-table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
}

.invoice-table th,
.invoice-table td {
    border: 1px solid var(--txt);
    padding: 8px;
    text-align: left;
}

.invoice-table th {
    background: var(--page);
    font-weight: bold;
    text-align: center;
}

.text-right {
    text-align: right;
}

.total-section {
    margin-top: 20px;
    padding: 15px;
    background: var(--page);
    border: 1px solid var(--border);
}

.total-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
}

.total-row.main {
    font-size: 16px;
    font-weight: bold;
    padding-top: 8px;
    border-top: 2px solid var(--txt);
}

.total-words {
    margin-top: 15px;
    padding-top: 10px;
    font-size: 11px;
    font-style: italic;
    color: var(--txt);
}

.signatures {
    margin-top: 40px;
}

.signature-block {
    padding: 15px 0;
}

.signature-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 15px;
}

.signature-table td {
    padding: 10px 0;
    border: none;
    vertical-align: bottom;
}

.signature-position {
    width: 200px;
    font-size: 11px;
}

.signature-blank {
    width: 150px;
    border-bottom: 1px solid var(--txt);
}

.signature-name {
    width: auto;
    font-size: 11px;
    padding-left: 10px;
}

.signature-stamp-cell {
    width: 120px;
    text-align: center;
    vertical-align: middle;
    padding: 10px;
    position: relative;
}

.stamp-image {
    width: 200px;
    height: 200px;
    opacity: 0.8;
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
}

.print-button {
    position: fixed;
    top: 20px;
    right: 20px;
    padding: 12px 24px;
    background: var(--sky);
    color: white;
    border: none;
    border-radius: var(--r2);
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
}

.print-button:hover {
    background: var(--sky-h);
}

@media print {

  .print-button {
        display: none;
    }

  body {
        margin: 0;
        padding: 0;
    }

  * {
        overflow: visible !important;
    }

  .admin-dashboard {
        display: block !important;
    }

  .dashboard-sidebar,
    .sidebar,
    .dashboard-header,
    .mob-burger,
    .mob-overlay,
    aside {
        display: none !important;
        visibility: hidden !important;
        width: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
    }

  .dashboard-main {
        margin-left: 0 !important;
        padding: 0 !important;
        width: 100% !important;
    }

  .dashboard-container {
        padding: 0 !important;
        margin: 0 !important;
        max-width: 100% !important;
    }

  .dashboard-content {
        padding: 0 !important;
        margin: 0 !important;
    }

  .preview-wrapper {
        background: var(--card) !important;
        padding: 0 !important;
        margin: 0 !important;
        box-shadow: none !important;
        min-height: 0 !important;
        border-radius: 0 !important;
    }

  #previewContainer {
        box-shadow: none !important;
        max-width: 100% !important;
        border-radius: 0 !important;
    }

  .preview-page {
        margin: 0;
        padding: 0;
    }

  .preview-page:last-child {
        page-break-after: auto;
    }

  .page-footer { 
        page-break-inside: avoid;
    }

  .digital-signature {
        page-break-inside: avoid;
    }

  @page {
        margin: 10mm 15mm;
        @bottom-center {
            content: element(footer);
        }
    }

  .page-content {
        padding: 0;
        margin: 0;
    }

  .platform-footer {
        position: running(footer);
        padding: 8px 0;
        margin: 0;
        border-top: none;
    }

}

/* ================================================================
   OFFER FORM — Стили формы создания/редактирования оферты
   ================================================================ */

/* ── Тип-бар вверху формы ────────────────────────────────────── */

.offer-form-type-bar {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 20px; background: var(--page);
    border: 1.5px solid var(--border); border-radius: 14px;
    margin-bottom: 20px; flex-wrap: wrap;
}

.offer-form-type-pill {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 6px 16px; border-radius: 100px;
    color: #fff; font-size: .875rem; font-weight: 700;
}

.offer-form-type-org { font-size: .875rem; color: var(--txt2); }

.offer-form-type-change { font-size: .8rem; color: var(--sky-h); text-decoration: none; margin-left: auto; }

.offer-form-type-change:hover { text-decoration: underline; }

/* ── Вкладки ──────────────────────────────────────────────────── */

.offer-tabs-wrap {
    background: var(--card); 
    border: 1.5px solid var(--border);
    border-radius: var(--r1); 
    overflow: visible;
    margin-bottom: 20px;
    position: relative;
}

.offer-tab-panel { 
    display: none; 
    padding: 28px;
    min-height: 400px;
}

.offer-tab-panel.active { display: block; }

/* ── Form helpers ──────────────────────────────────────────────── */

.form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.form-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }

.form-grid-4 { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; }

.form-group--full { grid-column: 1 / -1; }

.form-section__title { font-size: .875rem; font-weight: 800; color: var(--txt); margin: 0 0 16px; display: flex; align-items: center; gap: 8px; }

.form-section__hint { font-size: .8125rem; color: var(--txt3); margin: -10px 0 12px; }

.form-label--required::after { content: ' *'; color: var(--rose); }

.form-hint-inline { font-weight: 400; color: var(--txt3); font-size: .8rem; }

.form-hint i { margin-right: 4px; }

.form-check-row { display: flex; gap: 16px; }

.form-radio { display: flex; align-items: center; gap: 6px; font-size: .875rem; color: var(--txt2); cursor: pointer; }

.form-radio input { accent-color: var(--sky); }

.input-with-suffix { display: flex; gap: 8px; }

.input-with-prefix { display: flex; align-items: center; }

.input-prefix { padding: 10px 12px; background: var(--page); border: 1.5px solid var(--border); border-right: none; border-radius: var(--r2) 0 0 10px; font-size: .8125rem; color: var(--txt3); white-space: nowrap; }

.input-prefix + .form-control { border-radius: 0 10px 10px 0; }

.extra-attr-row { display: flex; gap: 10px; margin-bottom: 8px; align-items: center; }

.extra-attr-row .form-control:first-child { flex: 0 0 40%; }

.extra-attr-row .form-control:nth-child(2) { flex: 1; }

.extra-attr-remove { flex-shrink: 0; }

.contacts-from-org { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--page); }

.contacts-from-org__list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }

.contact-pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 14px; border-radius: 100px;
    border: 1.5px solid var(--border); background: var(--card);
    font-size: .8rem; color: var(--sky-h); cursor: pointer;
    transition: all .15s;
}

.contact-pill:hover { background: var(--sky-ll); border-color: var(--sky); }

/* ── Загрузка фото ─────────────────────────────────────────────── */

.image-drop-zone {
    border: 2px dashed var(--border); border-radius: 14px;
    text-align: center; padding: 32px 20px;
    background: var(--page); transition: all .2s; cursor: pointer;
    position: relative;
}

.image-drop-zone.drag-over { border-color: var(--sky); background: var(--sky-ll); }

.image-drop-zone__inner i { font-size: 2.5rem; color: var(--border); margin-bottom: 12px; display: block; }

.image-drop-zone__inner p { color: var(--txt2); margin: 0 0 6px; font-size: .9rem; }

.drop-link { color: var(--sky-h); text-decoration: underline; cursor: pointer; }

.image-previews {
    display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px;
}

.image-preview-item {
    position: relative; width: 120px; height: 90px;
    border-radius: var(--r2); overflow: hidden;
    border: 2px solid var(--border); cursor: grab;
}

.image-preview-item.is-main { border-color: var(--sky); }

.image-preview-item img { width: 100%; height: 100%; object-fit: cover; }

.img-preview-actions {
    position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,.5); display: flex;
    align-items: center; justify-content: center; gap: 8px;
    opacity: 0; transition: opacity .2s;
}

.image-preview-item:hover .img-preview-actions { opacity: 1; }

.btn-img-main, .btn-img-delete {
    width: 32px; height: 32px; border-radius: 50%;
    border: none; cursor: pointer; display: flex;
    align-items: center; justify-content: center;
    font-size: .875rem; transition: all .15s;
}

.btn-img-main   { background: var(--am); color: #fff; }

.btn-img-delete { background: var(--rose); color: #fff; }

.main-badge {
    position: absolute; bottom: 4px; left: 4px;
    background: var(--sky); color: #fff;
    font-size: .65rem; font-weight: 700; padding: 2px 7px; border-radius: 100px;
}

/* ── Загрузка документов ───────────────────────────────────────── */

.doc-drop-zone {
    border: 2px dashed var(--border); border-radius: 14px;
    text-align: center; padding: 24px 20px;
    background: var(--page); transition: all .2s; cursor: pointer; margin-top: 16px;
}

.doc-drop-zone.drag-over { border-color: var(--sky); background: var(--sky-ll); }

.doc-drop-zone__inner i { font-size: 2rem; color: var(--border); display: block; margin-bottom: 8px; }

.doc-drop-zone__inner p { color: var(--txt2); margin: 0; font-size: .875rem; }

.docs-list { display: flex; flex-direction: column; gap: 8px; }

.doc-item {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 14px;
    background: var(--card); border: 1.5px solid var(--border); border-radius: var(--r1);
}

.doc-item__icon {
    width: 40px; height: 40px; border-radius: var(--r2); flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.1rem;
    background: linear-gradient(135deg, var(--sky), var(--teal)); color: #fff;
}

.doc-item__info { flex: 1; min-width: 0; }

.doc-item__info strong { display: block; font-size: .875rem; color: var(--txt); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.doc-item__info span  { font-size: .75rem; color: var(--txt3); }

.doc-item__actions { display: flex; gap: 4px; }

.doc-upload-form { background: var(--page); border: 1.5px solid var(--border); border-radius: 14px; padding: 16px; }

/* ── SEO-превью ───────────────────────────────────────────────── */

.seo-preview__label { font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; color: var(--txt3); font-weight: 700; margin: 0 0 12px; }

.seo-preview__url   { font-size: .8rem; color: var(--em); margin-bottom: 4px; word-break: break-all; }

.seo-preview__title { font-size: 1.125rem; color: var(--ind); font-weight: 400; margin-bottom: 4px; }

.seo-preview__desc  { font-size: .875rem; color: var(--txt2); line-height: 1.5; }

/* ── Кнопки формы ──────────────────────────────────────────────── */

.offer-form-actions__right { display: flex; gap: 10px; }

.ml-2 { margin-left: 8px; }

/* ── Адаптив ──────────────────────────────────────────────────── */

@media (max-width: 820px) {

  .form-grid-2, .form-grid-3, .form-grid-4 { grid-template-columns: 1fr; }

  .offer-tab span  { display: none; }

  .offer-tab       { padding: 12px 16px; }

  .offer-tab-panel { padding: 16px; }

  .offer-form-actions { flex-direction: column; }

  .offer-form-actions__right { width: 100%; }

  .offer-form-actions__right .btn { flex: 1; }

  .image-preview-item { width: 90px; height: 70px; }

}

/* ── Валидация полей ───────────────────────────────────────────── */

.form-control.is-invalid {
    border-color: var(--rose) !important;
    background-color: var(--card)5f5;
    box-shadow: 0 0 0 3px rgba(239,68,68,.12);
}

.form-control.is-invalid:focus {
    border-color: var(--rose) !important;
    box-shadow: 0 0 0 3px rgba(239,68,68,.2);
}

.field-error-msg {
    font-size: .73rem;
    color: var(--rose);
    margin-top: 4px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.field-error-msg::before {
    content: '\26A0';
    font-size: .8em;
}

.offer-tab.has-error {
    color: var(--rose) !important;
    border-bottom-color: var(--rose) !important;
}

.offer-tab.has-error::after {
    content: '';
    display: inline-block;
    width: 7px; height: 7px;
    background: var(--rose);
    border-radius: 50%;
    margin-left: 5px;
    vertical-align: middle;
}

.validation-summary {
    background: var(--status-error-light);
    border: 1.5px solid var(--rose);
    border-radius: var(--r2);
    padding: 12px 16px;
    margin-bottom: 16px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: .83rem;
    color: var(--rose);
}

.validation-summary i { color: var(--rose); margin-top: 1px; flex-shrink: 0; }

.validation-summary ul { margin: 4px 0 0 0; padding-left: 16px; }

.validation-summary ul li { margin-bottom: 2px; }

/* ================================================================
   OFFERS MODULE — v2.0 «Wow» redesign
   Palette: тёмный var(--txt) | белый var(--card) | бирюзовый var(--sky)
   ================================================================ */

/* ── Список в ЛК ───────────────────────────────────────────── */

.offer-thumb-sm { width: 48px; height: 48px; object-fit: cover; border-radius: var(--r2); border: 1px solid var(--border); }

.offer-thumb-sm--placeholder { display: flex; align-items: center; justify-content: center; background: var(--page); color: var(--txt3); font-size: 1.2rem; }

.table-link-ext { margin-left: 6px; color: var(--txt3); font-size: .75rem; }

.table-link-ext:hover { color: var(--sky); }

.sidebar-badge--teal { background: var(--sky) !important; color: #fff !important; }
.sidebar-badge--rose { background: var(--rose) !important; color: #fff !important; }
.sidebar-badge--points { background: linear-gradient(135deg, var(--am), #b45309) !important; color: #fff !important; font-weight: 700; }

/* Глазик — уникальные посетители сегодня */
.sidebar-badge--eye {
    background: linear-gradient(135deg, #7c3aed, #a855f7) !important;
    color: #fff !important; font-weight: 700;
    display: inline-flex; align-items: center; gap: 4px;
}
.sidebar-badge--eye i { font-size: 9px; color: #fff !important; }

/* % заполненности компании */
.sidebar-badge--percent { font-weight: 700; }
.sidebar-badge--percent.percent-high { background: var(--em) !important; color: #fff !important; }
.sidebar-badge--percent.percent-mid  { background: var(--am) !important; color: #fff !important; }
.sidebar-badge--percent.percent-low  { background: var(--rose) !important; color: #fff !important; }

.offers-filters { display: flex; flex-direction: column; gap: 12px; padding: 16px; }

.offers-filter-tabs { display: flex; flex-wrap: wrap; gap: 6px; }

.offers-filter-tab { padding: 6px 14px; border-radius: 100px; border: 1.5px solid var(--border); background: var(--card); font-size: .8125rem; font-weight: 700; color: var(--txt2); text-decoration: none; transition: all .18s; }

.offers-filter-tab:hover  { border-color: var(--sky); color: var(--sky-h); }

.offers-filter-tab.active { background: var(--sky); border-color: var(--sky); color: #fff; }

.tab-count { background: rgba(255,255,255,.25); padding: 1px 7px; border-radius: 100px; font-size: .7rem; margin-left: 4px; }

.offers-filter-tab:not(.active) .tab-count { background: var(--page); color: var(--txt3); }

.offers-filter-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

.search-inline { display: flex; }

.search-inline .form-control { border-radius: var(--r2) 0 0 8px; }

.search-inline .btn { border-radius: 0 8px 8px 0; padding: 8px 14px; }

/* ================================================================
   PUBLIC CATALOG — Full redesign
   ================================================================ */

/* ─── Hero ──────────────────────────────────────────────────── */

/* offers-hero legacy — section replaced by page-hero */

.offers-hero-placeholder { display: none; }

.offers-hero::before {
    content: ''; position: absolute; inset: 0;
    background:
        radial-gradient(ellipse 800px 500px at 70% 50%, rgba(20,184,166,.18) 0%, transparent 60%),
        radial-gradient(ellipse 600px 400px at 20% 80%, rgba(8,145,178,.12) 0%, transparent 60%);
    pointer-events: none;
}

/* Bottom block inside page-hero: stats + type tabs, both centered */

.offers-hero-bottom {
    display: flex; flex-direction: column; align-items: center;
    gap: 16px; margin-top: 20px; position: relative; z-index: 1;
}

.offers-hero__stats { display: flex; gap: 32px; justify-content: center; flex-wrap: wrap; }

.hero-stat { display: flex; flex-direction: column; align-items: center; gap: 2px; }

.hero-stat__num {
    font-size: 1.875rem; font-weight: 900; line-height: 1;
    background: linear-gradient(135deg,var(--sky),var(--teal));
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}

.hero-stat__lbl { font-size: .75rem; color: var(--txt2); text-transform: uppercase; letter-spacing: .07em; font-weight: 700; }

.offers-type-tabs { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }

.offers-type-tab {
    display: inline-flex; align-items: center; gap: 8px; padding: 8px 18px; border-radius: 100px;
    background: var(--card); border: 1.5px solid var(--sky-l);
    color: var(--txt2); font-size: .875rem; font-weight: 700; text-decoration: none; transition: all .2s;
}

.offers-type-tab:hover { background: var(--sky-ll); color: var(--sky-h); border-color: var(--em); }

.offers-type-tab.active { background: linear-gradient(135deg,var(--sky),var(--teal)); border-color: transparent; color: #fff; box-shadow: 0 4px 20px rgba(20,184,166,.4); }

.offers-type-tab--product.active { background: linear-gradient(135deg,var(--sky),var(--sky-h)); box-shadow: 0 4px 20px rgba(59,130,246,.4); }

.offers-type-tab--work.active    { background: linear-gradient(135deg,var(--am),var(--am)); box-shadow: 0 4px 20px rgba(249,115,22,.4); }

.offers-type-tab--service.active { background: linear-gradient(135deg,var(--em),var(--em)); box-shadow: 0 4px 20px rgba(16,185,129,.4); }

/* ─── Search bar ─────────────────────────────────────────────── */

.offers-searchbar { background: var(--card); box-shadow: 0 4px 24px rgba(0,0,0,.08); border-bottom: 3px solid rgba(20,184,166,.15); }

.offers-searchbar__inner { max-width: 1200px; margin: 0 auto; padding: 16px 20px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

.offers-searchbar__wrap { flex: 1; min-width: 260px; position: relative; display: flex; }

/* ── Единая высота всех элементов строки = 42px ── */

.offers-searchbar__input {
    flex: 1; height: 42px; padding: 0 46px 0 16px;
    border: 1.5px solid var(--border); border-radius: var(--r2) 0 0 10px;
    font-size: .9rem; color: var(--txt); background: var(--card); transition: border-color .2s; outline: none;
}

.offers-searchbar__input:focus { border-color: var(--sky); box-shadow: 0 0 0 3px rgba(20,184,166,.12); }

.offers-searchbar__clear { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: var(--txt3); cursor: pointer; font-size: .875rem; display: none; border: none; background: none; padding: 0; }

.offers-searchbar__btn {
    height: 42px; padding: 0 22px; flex-shrink: 0;
    background: linear-gradient(135deg, var(--sky), var(--teal));
    color: #fff; border: none; border-radius: 0 10px 10px 0;
    font-weight: 800; font-size: .875rem; cursor: pointer; transition: all .2s;
    display: flex; align-items: center; gap: 8px; white-space: nowrap;
}

.offers-searchbar__btn:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(20,184,166,.4); }

.search-suggestions {
    position: absolute; top: calc(100% + 4px); left: 0; right: 0;
    background: var(--card); border: 1.5px solid var(--border); border-radius: var(--r1);
    box-shadow: 0 8px 32px rgba(0,0,0,.12); z-index: 999; overflow: hidden; display: none;
}

.search-suggestions.active { display: block; }

.suggestion-item { display: flex; align-items: center; gap: 12px; padding: 10px 16px; cursor: pointer; transition: background .12s; border-bottom: 1px solid var(--page); }

.suggestion-item:last-child { border-bottom: none; }

.suggestion-item:hover { background: var(--sky-ll); }

.suggestion-item i { width: 18px; color: var(--sky); font-size: .875rem; text-align: center; flex-shrink: 0; }

.suggestion-item__text { flex: 1; font-size: .875rem; color: var(--txt); }

.suggestion-item__meta { font-size: .72rem; color: var(--txt3); white-space: nowrap; }

.suggestion-item mark { background: none; color: var(--sky-h); font-weight: 800; }

.suggestion-sep { padding: 5px 16px; font-size: .68rem; font-weight: 900; text-transform: uppercase; letter-spacing: .1em; color: var(--txt3); background: var(--page); border-bottom: 1px solid var(--page); }

.suggestion-item--company { align-items: flex-start; }

.suggestion-item__inn { display: block; font-size: .72rem; color: var(--txt3); font-weight: 600; margin-top: 1px; }

.suggestion-item__inn mark { background: none; color: var(--sky); font-weight: 800; }

.fsb-hint { font-size: .72rem; color: var(--txt3); margin-top: 6px; line-height: 1.4; }

.fsb-section__head i.fa-building       { color: var(--sky); }

.fsb-section__head i.fa-fingerprint    { color: var(--ind); }

.fsb-section__head i.fa-star           { color: var(--am); }

.fsb-section__head i.fa-calendar-alt   { color: var(--teal); }

.fsb-section__head i.fa-tags           { color: var(--ind); }

.fsb-section__head i.fa-code-branch    { color: var(--vio); }

.fsb-section__head i.fa-info-circle    { color: var(--teal); }

.fsb-section__head i.fa-sliders-h      { color: var(--sky); }

.fsb-section__head i.fa-chart-line     { color: var(--em); }

.fsb-section__head i.fa-clock          { color: var(--am); }

.fsb-section__head i.fa-industry       { color: var(--sky); }

.fsb-section__head i.fa-laptop-house   { color: var(--ind); }

.fsb-section__head i.fa-briefcase      { color: var(--sky); }

.fsb-section__head i.fa-graduation-cap { color: var(--vio); }

.fsb-section__head i.fa-user-tie       { color: var(--teal); }

.fsb-section__head i.fa-newspaper      { color: var(--sky); }

.fsb-section__head i.fa-hourglass-half { color: var(--am); }

.offers-quickfilters { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex: 1; }

.qs-perpage { margin-left: auto; width: 66px; }

.quick-filter-sep { width: 1px; height: 26px; background: var(--border); flex-shrink: 0; }

.qs-select {
    height: 42px; padding: 0 30px 0 12px; border: 1.5px solid var(--border); border-radius: var(--r2);
    font-size: .8125rem; font-weight: 600; color: var(--txt2); background: var(--card);
    cursor: pointer; outline: none; transition: border-color .2s;
    -webkit-appearance: none; appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24'%3E%3Cpath fill='%2394a3b8' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 10px center;
}

.qs-select:focus { border-color: var(--sky); outline: none; box-shadow: 0 0 0 3px rgba(20,184,166,.1); }

.qs-total { display: flex; align-items: center; gap: 6px; background: linear-gradient(135deg,var(--sky),var(--teal)); color: #fff; padding: 0 14px; height: 42px; border-radius: var(--r2); font-size: .8125rem; font-weight: 800; white-space: nowrap; }

/* ─── Page layout ─────────────────────────────────────────────── */

.offers-page-body {
    max-width: 1200px; margin: 0 auto; padding: 28px 20px 60px;
    display: grid; grid-template-columns: 272px 1fr; gap: 28px; align-items: start;
}

/* ═══════════════════════════════════════════════
   FILTER SIDEBAR  (fsb-*)
   ═══════════════════════════════════════════════ */

.offers-sidebar {
    position: sticky; top: 88px;
    border-radius: 18px; overflow: hidden;
    box-shadow: 0 4px 24px rgba(0,0,0,.07);
    max-height: calc(100vh - 108px); overflow-y: auto;
    background: var(--card); border: 1.5px solid var(--border);
}

.offers-sidebar::-webkit-scrollbar { width: 4px; }

.offers-sidebar::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }

.fsb-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 16px; background: linear-gradient(135deg,var(--sky-ll),var(--sky-ll));
    border-bottom: 1.5px solid var(--sky-l); position: sticky; top: 0; z-index: 2;
}

.fsb-header__left { display: flex; align-items: center; gap: 8px; font-size: .875rem; font-weight: 900; color: var(--txt); }

.fsb-header__left i { color: var(--sky); font-size: .9rem; }

.fsb-badge { background: var(--sky); color: #fff; font-size: .65rem; font-weight: 900; padding: 2px 7px; border-radius: 100px; min-width: 20px; text-align: center; }

.fsb-reset { font-size: .75rem; font-weight: 700; color: var(--txt3); text-decoration: none; display: flex; align-items: center; gap: 4px; transition: color .15s; padding: 4px 8px; border-radius: var(--r3); }

.fsb-reset:hover { color: var(--rose); background: var(--status-error-light); }

.fsb-section { border-bottom: 1px solid var(--page); }

.fsb-section:last-child { border-bottom: none; }

.fsb-section__head {
    width: 100%; display: flex; align-items: center; gap: 8px;
    padding: 11px 16px; background: none; border: none; cursor: pointer;
    font-size: .8125rem; font-weight: 800; color: var(--txt); text-align: left;
    transition: background .12s;
}

.fsb-section__head:hover { background: var(--page); }

.fsb-section__head span:first-child { flex: 1; display: flex; align-items: center; gap: 7px; }

.fsb-section__head i.fa-layer-group { color: var(--vio); }

.fsb-section__head i.fa-map-marker-alt { color: var(--am); }

.fsb-section__head i.fa-ruble-sign { color: var(--em); }

.fsb-section__head i.fa-check-circle { color: var(--teal); }

.fsb-section__head i.fa-box { color: var(--sky); }

.fsb-section__head i.fa-tools { color: var(--am); }

.fsb-section__head i.fa-concierge-bell { color: var(--rose); }

.fsb-sec-badge { background: var(--status-warning-light); color: var(--am); font-size: .65rem; font-weight: 900; padding: 2px 6px; border-radius: 100px; }

.fsb-chevron { font-size: .65rem; color: var(--border); transition: transform .2s; margin-left: auto; }

.fsb-section--collapsed .fsb-chevron { transform: rotate(-90deg); }

.fsb-section__body { display: none; padding: 4px 16px 14px; }

.fsb-section__body--open { display: block; }

.fsb-cat-search-wrap { position: relative; margin-bottom: 8px; }

.fsb-cat-search-icon { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--txt3); font-size: .75rem; pointer-events: none; }

.fsb-cat-search { width: 100%; height: 34px; padding: 0 10px 0 30px; border: 1.5px solid var(--border); border-radius: var(--r2); font-size: .8rem; color: var(--txt2); outline: none; transition: border-color .2s; }

.fsb-cat-search:focus { border-color: var(--sky); box-shadow: 0 0 0 3px rgba(20,184,166,.1); }

.fsb-cats { display: flex; flex-direction: column; gap: 1px; max-height: 260px; overflow-y: auto; }

.fsb-cats::-webkit-scrollbar { width: 3px; }

.fsb-cats::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

.fsb-cat-group-label { font-size: .65rem; font-weight: 900; text-transform: uppercase; letter-spacing: .1em; color: var(--txt3); padding: 8px 6px 4px; }

.fsb-cat {
    display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: var(--r2);
    cursor: pointer; font-size: .8125rem; color: var(--txt2); transition: all .12s; user-select: none;
}

.fsb-cat input { display: none; }

.fsb-cat__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--border); flex-shrink: 0; transition: all .12s; border: 1.5px solid var(--border); }

.fsb-cat:hover { background: var(--sky-ll); color: var(--sky-h); }

.fsb-cat:hover .fsb-cat__dot { border-color: var(--em); background: var(--status-success-light); }

.fsb-cat--active { background: var(--sky-ll); color: var(--sky-h); font-weight: 700; }

.fsb-cat--active .fsb-cat__dot { background: var(--sky); border-color: var(--sky); box-shadow: 0 0 0 3px rgba(20,184,166,.2); }

.fsb-cat--sub { padding-left: 22px; font-size: .775rem; }

.fsb-cat--sub .fsb-cat__dot { width: 5px; height: 5px; }

.fsb-cat--hidden { display: none; }

.fsb-input-wrap { position: relative; display: flex; align-items: center; }

.fsb-input-icon { position: absolute; left: 10px; color: var(--txt3); font-size: .75rem; pointer-events: none; z-index: 1; }

.fsb-input {
    width: 100%; height: 36px; padding: 0 32px 0 30px;
    border: 1.5px solid var(--border); border-radius: var(--r2);
    font-size: .8125rem; color: var(--txt2); outline: none; transition: border-color .2s; background: var(--card);
}

.fsb-input:focus { border-color: var(--sky); box-shadow: 0 0 0 3px rgba(20,184,166,.1); }

.fsb-input-clear { position: absolute; right: 8px; background: none; border: none; color: var(--txt3); cursor: pointer; font-size: .75rem; padding: 4px; line-height: 1; }

.fsb-input-clear:hover { color: var(--rose); }

.fsb-price-row { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; }

.fsb-price-input { flex: 1; min-width: 0; height: 36px; padding: 0 10px; border: 1.5px solid var(--border); border-radius: var(--r2); font-size: .8125rem; color: var(--txt2); outline: none; transition: border-color .2s; }

.fsb-price-input:focus { border-color: var(--sky); }

.fsb-price-sep { color: var(--txt3); font-weight: 700; flex-shrink: 0; }

.fsb-select {
    width: 100%; height: 36px; padding: 0 28px 0 10px; border: 1.5px solid var(--border); border-radius: var(--r2);
    font-size: .8125rem; color: var(--txt2); background: var(--card); outline: none; cursor: pointer; transition: border-color .2s;
    -webkit-appearance: none; appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%2394a3b8' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 8px center; background-size: 18px;
}

.fsb-select:focus { border-color: var(--sky); box-shadow: 0 0 0 3px rgba(20,184,166,.1); }

.fsb-check { display: flex; align-items: center; gap: 9px; padding: 5px 0; cursor: pointer; font-size: .8125rem; color: var(--txt2); user-select: none; }

.fsb-check input { display: none; }

.fsb-check__box { width: 17px; height: 17px; border-radius: 5px; border: 1.5px solid var(--border); background: #fff; flex-shrink: 0; display: flex; align-items: center; justify-content: center; transition: all .15s; }

.fsb-check__box::after { content: ''; width: 5px; height: 9px; border: 2px solid transparent; border-top: none; border-left: none; transform: rotate(45deg) translate(-1px,0); }

.fsb-check:hover .fsb-check__box { border-color: var(--sky); }

.fsb-check input:checked + .fsb-check__box { background: var(--sky); border-color: var(--sky); }

.fsb-check input:checked + .fsb-check__box::after { border-color: var(--card); }

.fsb-pills { display: flex; flex-wrap: wrap; gap: 5px; }

.fsb-pill { padding: 4px 10px; border-radius: 100px; border: 1.5px solid var(--border); font-size: .75rem; font-weight: 700; color: var(--txt2); text-decoration: none; transition: all .12s; }

.fsb-pill:hover { border-color: var(--sky); color: var(--sky-h); background: var(--sky-ll); }

.fsb-pill--active { background: var(--sky); border-color: var(--sky); color: #fff; }

.fsb-field-label { font-size: .68rem; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; color: var(--txt3); margin-bottom: 6px; }

.fsb-apply-btn {
    width: 100%; height: 36px; border-radius: 9px; border: none; cursor: pointer; transition: all .15s;
    background: linear-gradient(135deg,var(--sky),var(--teal)); color: #fff; font-size: .8125rem; font-weight: 800;
    display: flex; align-items: center; justify-content: center; gap: 6px;
}

.fsb-apply-btn:hover { box-shadow: 0 4px 14px rgba(20,184,166,.4); transform: translateY(-1px); }

.fsb-section--product .fsb-section__head { border-left: 3px solid var(--sky); }

.fsb-section--work    .fsb-section__head { border-left: 3px solid var(--am); }

.fsb-section--service .fsb-section__head { border-left: 3px solid var(--rose); }

/* ─── Main results ───────────────────────────────────────────── */

.offers-main { min-width: 0; }

.offers-result-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; flex-wrap: wrap; gap: 12px; }

.offers-result-title { font-size: 1.1rem; font-weight: 800; color: var(--txt); }

.offers-result-title span { color: var(--sky); }

.active-filters { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }

.filter-tag { display: inline-flex; align-items: center; gap: 6px; background: var(--sky-ll); border: 1px solid var(--status-success-light); color: var(--sky-h); padding: 4px 10px; border-radius: 100px; font-size: .78rem; font-weight: 700; text-decoration: none; }

.filter-tag:hover { background: var(--status-error-light); border-color: var(--rose); color: var(--rose); }

.offers-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }

.offers-grid--list { grid-template-columns: 1fr !important; }

.offer-card {
    background: var(--card); border: 1.5px solid var(--border); border-radius: 18px;
    text-decoration: none; color: inherit; overflow: hidden;
    display: flex; flex-direction: column; position: relative;
    transition: transform .2s, box-shadow .2s, border-color .2s;
}

.offer-card:hover { transform: translateY(-5px); box-shadow: 0 16px 48px rgba(0,0,0,.1); border-color: var(--status-success-light); }

.offer-card__img { position: relative; height: 210px; overflow: hidden; background: var(--page); }

.offer-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s; }

.offer-card:hover .offer-card__img img { transform: scale(1.05); }

.offer-card__img-placeholder {
    width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
    font-size: 3rem; color: var(--border); background: linear-gradient(135deg, var(--page), var(--page));
}

.offer-card__type-badge { position: absolute; top: 10px; left: 10px; font-size: .68rem; font-weight: 800; padding: 4px 10px; border-radius: 100px; }

.offer-card__org-badge {
    position: absolute; bottom: 8px; right: 8px; background: rgba(255,255,255,.9);
    border-radius: var(--r2); padding: 3px 8px 3px 4px;
    display: flex; align-items: center; gap: 5px;
    font-size: .7rem; font-weight: 700; color: var(--txt2); max-width: 120px; overflow: hidden;
}

.offer-card__body { padding: 18px 20px; flex: 1; display: flex; flex-direction: column; gap: 8px; }

.offer-card__cat { font-size: .7rem; color: var(--sky); text-transform: uppercase; letter-spacing: .07em; font-weight: 800; }

.offer-card__title { font-size: 1rem; font-weight: 800; color: var(--txt); line-height: 1.4; }

.offer-card__desc { font-size: .8125rem; color: var(--txt2); line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

.offer-card__price { font-size: 1.2rem; font-weight: 900; color: var(--sky-h); letter-spacing: -.5px; }

.offer-card__price--negotiable { font-size: .8rem; font-weight: 700; color: var(--txt3); letter-spacing: 0; }

.offer-card__footer { display: flex; justify-content: space-between; align-items: center; padding-top: 10px; border-top: 1px solid var(--page); margin-top: auto; flex-wrap: wrap; gap: 4px; }

.offer-card__org-name { font-size: .75rem; color: var(--txt2); display: flex; align-items: center; gap: 5px; max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.offer-card__org-name img { width: 16px; height: 16px; object-fit: contain; border-radius: 3px; }

.offer-card__city { font-size: .72rem; color: var(--txt3); }

.offers-grid--list .offer-card { flex-direction: row; border-radius: 14px; min-height: 160px; height: auto; }

.offers-grid--list .offer-card__img { width: 220px; min-height: 160px; flex-shrink: 0; }

.offers-grid--list .offer-card__img img { border-radius: 0; }

.offers-grid--list .offer-card__img-placeholder { min-height: 160px; }

.offers-grid--list .offer-card__body { padding: 14px 16px; }

.offers-grid--list .offer-card__title { font-size: 1.1rem; }

.offers-empty { grid-column: 1/-1; text-align: center; padding: 80px 20px; background: var(--card); border: 1.5px dashed var(--border); border-radius: var(--r1); }

.offers-empty i { font-size: 3.5rem; color: var(--border); margin-bottom: 20px; display: block; }

.offers-empty h3 { font-size: 1.25rem; font-weight: 900; color: var(--txt); margin: 0 0 8px; }

.offers-empty p { color: var(--txt2); margin: 0 0 24px; }

.pagination-bar { padding: 28px 0 12px; display: flex; flex-direction: column; align-items: center; gap: 14px; }

.pagination-info { font-size: .8125rem; color: var(--txt3); font-weight: 600; }

.pagination-info strong { color: var(--txt2); }

.pagination-wrap { display: flex; align-items: center; justify-content: center; gap: 4px; flex-wrap: wrap; }

.pagination-btn:hover { border-color: var(--sky); color: var(--sky-h); background: var(--sky-ll); }

.pagination-btn.active { background: linear-gradient(135deg, var(--sky), var(--teal)); border-color: transparent; color: #fff; box-shadow: 0 4px 12px rgba(20,184,166,.3); pointer-events: none; }

.pagination-btn--edge { color: var(--txt3); }

.pagination-btn--edge:hover { color: var(--sky-h); }

/* ================================================================
   OFFER DETAIL (/offer/slug)
   ================================================================ */

.breadcrumbs { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: .8125rem; color: var(--txt2); }

.breadcrumbs a { color: var(--sky-h); text-decoration: none; }

.breadcrumbs a:hover { text-decoration: underline; }

.bc-sep { color: var(--border); }

.bc-current { color: var(--txt2); font-weight: 600; }

.offer-detail { padding: 32px 0 60px; }

.offer-gallery__type-badge { position: absolute; top: 12px; left: 12px; font-size: .75rem; font-weight: 800; padding: 5px 13px; border-radius: 100px; }

.offer-gallery__thumb:hover, .offer-gallery__thumb.active { border-color: var(--sky); }

.offer-detail__title { font-size: 1.875rem; font-weight: 900; color: var(--txt); letter-spacing: -.8px; margin: 0 0 12px; }

.offer-detail__meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; }

.offer-detail__cat { font-size: .8rem; background: var(--sky-ll); color: var(--sky-h); padding: 4px 12px; border-radius: 100px; text-decoration: none; font-weight: 700; }

.offer-detail__views, .offer-detail__date { font-size: .8rem; color: var(--txt3); }

.offer-detail__short-desc { font-size: 1.05rem; color: var(--txt2); line-height: 1.75; margin-bottom: 28px; border-left: 3px solid var(--sky); padding-left: 18px; }

.offer-detail__desc { font-size: .9375rem; color: var(--txt2); line-height: 1.8; }

.offer-detail__desc h2,.offer-detail__desc h3,.offer-detail__desc h4 { color: var(--txt); font-weight: 800; margin: 24px 0 10px; }

.offer-detail__desc h2 { font-size: 1.25rem; }

.offer-detail__desc h3 { font-size: 1.1rem; padding-left: 12px; border-left: 3px solid var(--sky); }

.offer-detail__desc h4 { font-size: 1rem; color: var(--sky-h); }

.offer-detail__desc ul,.offer-detail__desc ol { padding-left: 22px; margin: 10px 0 16px; }

.offer-detail__desc li { margin-bottom: 6px; }

.offer-detail__desc p { margin: 0 0 14px; }

.offer-detail__desc strong { color: var(--txt); font-weight: 700; }

.offer-detail__desc a { color: var(--sky-h); text-decoration: underline; }

.offer-attrs-table { width: 100%; border-collapse: collapse; font-size: .9rem; }

.offer-attrs-table tr { border-bottom: 1px solid var(--page); }

.offer-attrs-table tr:last-child { border-bottom: none; }

.offer-attrs-table td { padding: 10px 12px; vertical-align: top; }

.attr-label { color: var(--txt2); font-weight: 600; width: 42%; }

.offer-attrs-table td:last-child { color: var(--txt); font-weight: 700; }

.offer-docs-list { display: flex; flex-direction: column; gap: 10px; }

.offer-doc-item { display: flex; align-items: center; gap: 14px; padding: 14px 16px; background: var(--page); border: 1.5px solid var(--border); border-radius: 14px; text-decoration: none; color: inherit; transition: all .15s; }

.offer-doc-item:hover { background: var(--sky-ll); border-color: var(--status-success-light); }

.offer-doc-item__icon { width: 44px; height: 44px; border-radius: var(--r2); flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--sky), var(--teal)); color: #fff; font-size: 1.25rem; }

.offer-doc-item__info { flex: 1; min-width: 0; }

.offer-doc-item__info strong { display: block; font-size: .875rem; color: var(--txt); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.offer-doc-item__info span { font-size: .75rem; color: var(--txt3); }

.offer-price-card__min { font-size: .8rem; color: var(--txt2); margin-top: 6px; }

.offer-price-card__delivery { font-size: .8rem; color: var(--txt3); margin-top: 6px; display: flex; align-items: center; gap: 6px; }

.offer-price-card__delivery i { color: var(--sky); }

.offer-company-card { background: var(--card); border: 1.5px solid var(--border); border-radius: 18px; padding: 20px; margin-bottom: 12px; transition: border-color .15s; }

.offer-company-card:hover { border-color: var(--status-success-light); }

.offer-company-card__header { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 14px; }

.offer-company-card__logo { width: 52px; height: 52px; object-fit: contain; border-radius: var(--r1); border: 1.5px solid var(--border); flex-shrink: 0; }

.offer-company-card__logo-placeholder { width: 52px; height: 52px; border-radius: var(--r1); background: linear-gradient(135deg, var(--sky), var(--teal)); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1.25rem; flex-shrink: 0; }

.offer-company-card__name { font-weight: 800; color: var(--sky-h); text-decoration: none; font-size: .9375rem; display: block; margin-bottom: 4px; line-height: 1.3; }

.offer-company-card__name:hover { text-decoration: underline; }

.verified-badge-sm { display: inline-flex; align-items: center; gap: 4px; font-size: .68rem; background: var(--sky-l); color: var(--em); padding: 2px 8px; border-radius: 100px; font-weight: 800; }

.offer-company-card__city, .offer-company-card__area, .offer-company-card__schedule { font-size: .8125rem; color: var(--txt2); margin-bottom: 6px; display: flex; align-items: flex-start; gap: 7px; }

.offer-company-card__city i, .offer-company-card__area i, .offer-company-card__schedule i { color: var(--sky); flex-shrink: 0; margin-top: 1px; }

.offer-cta .btn { display: block; text-align: center; margin-bottom: 8px; }

.offer-similar { margin-top: 52px; }

.section-title-sm { font-size: 1.375rem; font-weight: 900; color: var(--txt); margin: 0 0 22px; }

.offer-card--sm .offer-card__img { height: 140px; }

.offer-card--sm .offer-card__title { font-size: .8125rem; }

.offer-card--sm .offer-card__price { font-size: .9rem; }

.offer-type-selector { text-align: center; padding: 48px 0; }

.offer-type-selector__title { font-size: 2rem; font-weight: 900; color: var(--txt); margin: 0 0 10px; }

.offer-type-selector__sub { color: var(--txt2); margin: 0 0 36px; font-size: 1rem; }

.offer-type-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; max-width: 840px; margin: 0 auto; }

.offer-type-card { background: var(--card); border: 2px solid var(--border); border-radius: 22px; padding: 36px 24px; text-decoration: none; color: inherit; transition: all .22s; position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 14px; }

.offer-type-card:hover { transform: translateY(-8px); box-shadow: 0 24px 64px rgba(0,0,0,.13); }

.offer-type-card--product:hover { border-color: var(--sky); background: var(--sky-ll); }

.offer-type-card--work:hover { border-color: var(--am); background: var(--card)7ed; }

.offer-type-card--service:hover { border-color: var(--em); background: var(--status-success-light); }

.otc-icon { font-size: 2.75rem; }

.offer-type-card--product .otc-icon { color: var(--sky); }

.offer-type-card--work    .otc-icon { color: var(--am); }

.offer-type-card--service .otc-icon { color: var(--em); }

.offer-type-card h3 { font-size: 1.5rem; font-weight: 900; color: var(--txt); margin: 0; }

.offer-type-card p { font-size: .9rem; color: var(--txt2); margin: 0; line-height: 1.65; flex: 1; }

.otc-arrow { position: absolute; bottom: 20px; right: 20px; color: var(--border); font-size: 1.1rem; transition: color .2s; }

.offer-type-card:hover .otc-arrow { color: var(--sky); }

/* ── Utility classes ─────────────────────────────────────── */

.badge-gray   { background: rgba(107,114,128,.12); color: var(--txt3); padding: 4px 10px; border-radius: var(--r3); font-size: .75rem; font-weight: 700; display: inline-block; white-space: nowrap; }

.badge-green  { background: rgba(16,185,129,.12);  color: var(--em); padding: 4px 10px; border-radius: var(--r3); font-size: .75rem; font-weight: 700; display: inline-block; white-space: nowrap; }

.badge-orange { background: rgba(245,158,11,.12);  color: var(--am); padding: 4px 10px; border-radius: var(--r3); font-size: .75rem; font-weight: 700; display: inline-block; white-space: nowrap; }

.badge-blue   { background: rgba(6,182,212,.12);   color: var(--teal); padding: 4px 10px; border-radius: var(--r3); font-size: .75rem; font-weight: 700; display: inline-block; white-space: nowrap; }

.badge-red    { background: rgba(239,68,68,.12);   color: var(--rose); padding: 4px 10px; border-radius: var(--r3); font-size: .75rem; font-weight: 700; display: inline-block; white-space: nowrap; }

.dashboard-title    { font-size: 1.5rem; font-weight: 900; color: var(--txt); margin: 0 0 4px; }

.dashboard-subtitle { font-size: .9rem; color: var(--txt2); margin: 0; }

.mt-2       { margin-top: 8px; }

.text-sm    { font-size: .8125rem !important; }

.text-nowrap{ white-space: nowrap; }

.btn--sm    { padding: 6px 14px; font-size: .8125rem; }

.btn-ghost  { background: transparent; border: 1.5px solid var(--border); color: var(--txt2); padding: 6px 14px; border-radius: var(--r2); text-decoration: none; font-size: .8125rem; display: inline-flex; align-items: center; gap: 6px; transition: all .15s; cursor: pointer; }

.btn-ghost:hover { background: var(--page); color: var(--sky-h); border-color: var(--sky); }

.form-control--sm { padding: 7px 12px !important; font-size: .8125rem !important; height: auto !important; }

.table-actions { display: flex; gap: 4px; align-items: center; }

.header-actions-group { display: flex; gap: 10px; align-items: center; }

.empty-state-icon { font-size: 3rem; color: var(--border); margin-bottom: 12px; }

/* ================================================================
   RESPONSIVE
   ================================================================ */

@media (max-width: 360px) {

  .page-hero, .pr-hero, .ab-hero, .ct-hero { padding: 32px 0 24px !important; }

  .page-hero-inner h1, .pr-hero-inner h1, .ab-hero-inner h1 { font-size: 1.6rem !important; letter-spacing: -1px !important; }

  .hero-pills span { font-size: .72rem !important; padding: 4px 10px !important; }

  .offers-type-tab { padding: 5px 8px; font-size: .72rem; }

  .offers-searchbar__btn { padding: 0 12px; }

  .qs-sort { font-size: .75rem; }

  .offer-card__img { height: 160px; }

}

/* ── btn-icon variants (success, warning) ──────────────────── */

.btn-icon.btn-success,
.btn-icon--success {
    background: rgba(16,185,129,.12); color: var(--em) !important;
    border: 1.5px solid rgba(16,185,129,.3);
}

.btn-icon.btn-success:hover,
.btn-icon--success:hover {
    background: rgba(16,185,129,.22); border-color: rgba(16,185,129,.5);
}

.btn-icon.btn-warning,
.btn-icon--warning {
    background: rgba(245,158,11,.12); color: var(--am) !important;
    border: 1.5px solid rgba(245,158,11,.3);
}

.btn-icon.btn-warning:hover,
.btn-icon--warning:hover {
    background: rgba(245,158,11,.22); border-color: rgba(245,158,11,.5);
}

.btn-icon--danger {
    background: rgba(239,68,68,.12); color: var(--rose) !important;
    border: 1.5px solid rgba(239,68,68,.3);
}

.btn-icon--danger:hover {
    background: rgba(239,68,68,.22); border-color: rgba(239,68,68,.5);
}

/* Sidebar mobile toggle — скрыт на десктопе, виден только через media query */

.sidebar-filters-toggle { display: none; }

@media (min-width: 901px) {

  .sidebar-filters-body { display: block !important; }

}

/* ── City autocomplete ── */

.city-ac-wrap { position: relative; }

.city-ac-list { position: absolute; top: 100%; left: 0; right: 0; background: var(--card); border: 1.5px solid var(--border); border-radius: var(--r2); box-shadow: 0 8px 24px rgba(0,0,0,.1); z-index: 200; margin-top: 4px; overflow: hidden; }

.city-ac-item { padding: 10px 14px; font-size: .875rem; color: var(--txt2); cursor: pointer; transition: background .12s; }

.city-ac-item:hover { background: var(--sky-ll); color: var(--sky-h); }

/* ── Card badges strip ── */

.offer-card__badges { display: flex; flex-wrap: wrap; gap: 5px; padding: 0 0 6px; }

.offer-card__badge { font-size: .75rem; font-weight: 600; padding: 4px 10px; border-radius: 100px; display: inline-flex; align-items: center; gap: 4px; }

.offer-card__badge--delivery  { background: var(--sky-ll); color: var(--sky-h); }

.offer-card__badge--vat       { background: var(--status-success-light); color: var(--em); }

.offer-card__badge--verified  { background: var(--sky-l); color: var(--em); }

.offer-card__badge--stock     { background: var(--status-success-light); color: var(--em); }

.offer-card__badge--order     { background: var(--status-warning-light); color: var(--am); }

.offer-card__badge--warranty  { background: var(--sky-ll); color: var(--vio); }

.offer-card__badge--sro       { background: var(--card)7ed; color: var(--am); }

.offer-card__badge--travel    { background: var(--status-success-light); color: var(--em); }

.offer-card__badge--equip     { background: var(--card)7ed; color: var(--am); }

.offer-card__badge--remote    { background: var(--sky-ll); color: var(--sky-h); }

.offer-card__badge--format    { background: var(--sky-ll); color: var(--vio); }

.offer-card__badge--level     { background: var(--sky-ll); color: var(--sky-h); }

.offer-card__brand   { font-size: .72rem; color: var(--txt2); font-weight: 700; display: flex; align-items: center; gap: 4px; }

.offer-card__brand i { color: var(--txt3); font-size: .65rem; }

.offer-card__article { font-size: .7rem; color: var(--txt3); font-weight: 600; font-family: monospace; }

.offer-card__minqty  { font-size: .7rem; color: var(--txt3); display: flex; align-items: center; gap: 4px; }

.offer-card__minqty i { color: var(--border); font-size: .65rem; }

/* ── attr-label (если не было) ── */

.offer-attrs-table .attr-label { width: 200px; min-width: 140px; color: var(--txt3); font-weight: 600; padding-right: 16px; vertical-align: top; }

/* ── offer detail sidebar info ── */

.offer-company-card__city,.offer-company-card__area,.offer-company-card__schedule { font-size: .8rem; color: var(--txt3); padding: 6px 0; display: flex; align-items: flex-start; gap: 8px; border-top: 1px solid var(--page); margin-top: 4px; line-height: 1.5; }

.offer-company-card__city i,.offer-company-card__area i,.offer-company-card__schedule i { color: var(--sky); margin-top: 2px; flex-shrink: 0; width: 14px; text-align: center; }

.offer-contact-link { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: var(--r2); background: var(--page); border: 1px solid var(--page); text-decoration: none; color: var(--txt); font-size: .875rem; font-weight: 600; margin-bottom: 8px; transition: all .15s; }

.offer-contact-link:last-child { margin-bottom: 0; }

.offer-contact-link:hover { background: var(--sky-ll); border-color: var(--status-success-light); color: var(--sky-h); }

.offer-contact-link i { color: var(--sky); width: 16px; text-align: center; font-size: 1rem; flex-shrink: 0; }

.offer-contacts-card { background: var(--card); border: 1.5px solid var(--border); border-radius: 18px; padding: 20px; margin-bottom: 12px; }

.offer-contacts-card h4 { margin: 0 0 14px; font-size: .875rem; font-weight: 800; color: var(--txt); display: flex; align-items: center; gap: 8px; }

.offer-contacts-card h4 i { color: var(--sky); }

.offer-cta { margin-top: 4px; }

.btn--full { display: flex; width: 100%; align-items: center; justify-content: center; gap: 8px; box-sizing: border-box; }

/* ══════════════════════════════════════════════════════
   OFFER DETAIL PAGE — FULL REDESIGN
   ══════════════════════════════════════════════════════ */

.offer-detail-page { padding: 0 0 60px; background: var(--page); }

.offer-detail__layout { display: grid; grid-template-columns: 1fr 320px; gap: 28px; align-items: start; padding-top: 24px; }

.offer-gallery { margin-bottom: 24px; }

.offer-gallery__main { position: relative; border-radius: var(--r1); overflow: hidden; height: 380px; border: 1.5px solid var(--border); background: var(--page); box-shadow: 0 4px 20px rgba(0,0,0,.07); display: flex; align-items: center; justify-content: center; }

.offer-gallery__main-img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; display: block; }

.offer-gallery__count { position: absolute; bottom: 12px; right: 12px; background: rgba(15,23,42,.65); color: #fff; font-size: .75rem; font-weight: 700; padding: 5px 10px; border-radius: 100px; backdrop-filter: blur(6px); }

.offer-gallery__placeholder { border-radius: var(--r1); border: 1.5px solid var(--border); height: 380px; background: var(--page); display: flex; align-items: center; justify-content: center; font-size: 6rem; color: var(--border); }

.offer-gallery__thumbs { display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap; }

.offer-gallery__thumb { width: 72px; height: 52px; border-radius: var(--r2); overflow: hidden; cursor: pointer; border: 2px solid transparent; transition: border-color .15s; }

.offer-gallery__thumb img { width: 100%; height: 100%; object-fit: cover; }

.offer-gallery__thumb--active { border-color: var(--sky); }

.offer-title-block { margin-bottom: 20px; }

.offer-badge--product { background: var(--sky-ll); color: var(--sky-h); }

.offer-badge--work    { background: var(--card)7ed; color: var(--am); }

.offer-badge--service { background: var(--status-success-light); color: var(--em); }

.offer-cat-link { font-size: .8rem; color: var(--sky-h); font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: 5px; transition: color .15s; }

.offer-cat-link:hover { color: var(--txt); }

.offer-meta-item { font-size: .78rem; color: var(--txt3); display: inline-flex; align-items: center; gap: 5px; }

/* ─── Meta pills ─────────────────────────────────────────────── */

.offer-meta-pill--cat i {color:var(--sky-h)}

.offer-meta-pill--subcat   {background:var(--sky-ll);color:var(--vio);border-color:var(--vio)}

.offer-meta-pill--subcat i {color:var(--vio)}

/* type badge — одинаковый размер с пилюлями */

.offer-desc__content { font-size: .9375rem; line-height: 1.8; color: var(--txt2); }

.offer-desc__content h3 { font-size: 1.1rem; font-weight: 800; color: var(--txt); margin: 20px 0 10px; padding-left: 12px; border-left: 3px solid var(--sky); }

.offer-desc__content h4 { font-size: 1rem; font-weight: 700; color: var(--txt); margin: 16px 0 8px; }

.offer-desc__content ul { padding-left: 0; list-style: none; }

.offer-desc__content ul li { padding: 4px 0 4px 22px; position: relative; }

.offer-desc__content ul li::before { content: "✓"; position: absolute; left: 0; color: var(--sky); font-weight: 900; }

.offer-desc__content p { margin: 12px 0; }

.offer-desc__content strong { color: var(--txt); font-weight: 800; }

.offer-facts-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin-bottom: 24px; }

.offer-fact { background: var(--page); border: 1.5px solid var(--page); border-radius: 14px; padding: 16px; text-align: center; transition: border-color .15s; }

.offer-fact:hover { border-color: var(--status-success-light); }

.offer-fact__icon { font-size: 1.5rem; color: var(--sky); margin-bottom: 8px; }

.offer-fact__label { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--txt3); margin-bottom: 4px; }

.offer-fact__val { font-size: .875rem; font-weight: 800; color: var(--txt); line-height: 1.3; }

.offer-includes, .offer-excludes { border-radius: 14px; padding: 18px 20px; margin-bottom: 16px; }

.offer-includes { background: var(--status-success-light); border: 1.5px solid var(--status-success-light); }

.offer-excludes { background: var(--card)1f2; border: 1.5px solid var(--status-error-light); }

.offer-includes__title, .offer-excludes__title { font-size: .875rem; font-weight: 800; margin-bottom: 12px; display: flex; align-items: center; gap: 7px; }

.offer-includes__title { color: var(--em); }

.offer-excludes__title { color: var(--rose); }

.offer-includes__list, .offer-excludes__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 7px; }

.offer-includes__list li, .offer-excludes__list li { font-size: .875rem; display: flex; align-items: flex-start; gap: 9px; line-height: 1.5; }

.offer-includes__list li i { color: var(--em); margin-top: 2px; flex-shrink: 0; }

.offer-excludes__list li i { color: var(--rose); margin-top: 2px; flex-shrink: 0; }

.offer-details-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 8px; }

.offer-detail-card { display: flex; align-items: flex-start; gap: 14px; background: var(--page); border: 1.5px solid var(--page); border-radius: 14px; padding: 16px; }

.offer-detail-card__icon { width: 38px; height: 38px; border-radius: var(--r2); background: linear-gradient(135deg,var(--sky),var(--teal)); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1rem; flex-shrink: 0; }

.offer-detail-card__label { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--txt3); margin-bottom: 4px; }

.offer-detail-card__val { font-size: .875rem; font-weight: 600; color: var(--txt); line-height: 1.4; }

.offer-attrs-modern { display: flex; flex-direction: column; gap: 2px; }

.offer-attr-row { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--page); }

.offer-attr-row:last-child { border-bottom: none; }

.offer-attr-row__icon { color: var(--sky); width: 18px; text-align: center; flex-shrink: 0; }

.offer-attr-row__label { font-size: .825rem; color: var(--txt3); font-weight: 600; width: 200px; flex-shrink: 0; }

.offer-attr-row__val { font-size: .875rem; color: var(--txt); font-weight: 500; flex: 1; }

.offer-org-full__header { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 20px; }

.offer-org-full__avatar { width: 56px; height: 56px; border-radius: 14px; flex-shrink: 0; background: linear-gradient(135deg,var(--sky),var(--teal)); color: #fff; font-size: 1.25rem; font-weight: 900; display: flex; align-items: center; justify-content: center; }

.org-verified-badge { display: inline-flex; align-items: center; gap: 5px; font-size: .72rem; font-weight: 700; background: var(--sky-l); color: var(--em); padding: 5px 11px; border-radius: 4px; margin-left: 0; text-transform: uppercase; letter-spacing: .05em; line-height: 1; }

.offer-org-full__director { font-size: .825rem; color: var(--txt3); margin-bottom: 4px; display: flex; align-items: center; gap: 7px; }

.offer-org-rekvizit--full { grid-column: 1/-1; }

.offer-price-card { background: var(--card); border: 2px solid var(--sky-l); border-radius: var(--r1); padding: 24px; box-shadow: 0 4px 20px rgba(20,184,166,.1); position: relative; overflow: hidden; }

.offer-price-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg,var(--sky),var(--teal)); }

.offer-price-card__label { font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: var(--txt3); margin-bottom: 8px; }

.offer-price-card__unit { font-size: .825rem; color: var(--txt3); margin-bottom: 12px; }

.offer-price-card__vat { font-size: .78rem; color: var(--em); display: flex; align-items: center; gap: 6px; margin-bottom: 8px; background: var(--status-success-light); padding: 5px 10px; border-radius: var(--r2); }

.offer-price-card__prepay { font-size: .825rem; color: var(--am); background: var(--status-warning-light); padding: 6px 10px; border-radius: var(--r2); display: flex; align-items: center; gap: 7px; margin-bottom: 6px; }

.offer-price-card__payterms { font-size: .78rem; color: var(--txt3); line-height: 1.5; display: flex; align-items: flex-start; gap: 6px; margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--page); }

.offer-sidebar-card--contacts { margin-top: 12px; }

.offer-sidebar-card--contacts ~ .offer-sidebar-card { margin-top: 12px; }

.offer-quickfacts { display: flex; flex-direction: column; gap: 12px; }

.offer-company-mini { display: flex; gap: 12px; align-items: flex-start; }

.offer-company-mini__logo { width: 48px; height: 48px; border-radius: var(--r1); object-fit: contain; border: 1.5px solid var(--border); flex-shrink: 0; }

.offer-company-mini__avatar { width: 48px; height: 48px; border-radius: var(--r1); background: linear-gradient(135deg,var(--sky),var(--teal)); color: #fff; font-size: 1.1rem; font-weight: 900; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }

.offer-company-mini__name { font-size: .875rem; font-weight: 800; color: var(--txt); text-decoration: none; display: block; margin-bottom: 4px; line-height: 1.3; }

.offer-company-mini__name:hover { color: var(--sky-h); }

.offer-company-mini__verified { font-size: .7rem; font-weight: 700; color: var(--em); display: flex; align-items: center; gap: 4px; margin-bottom: 4px; }

.offer-company-mini__unverified { font-size: .7rem; font-weight: 700; color: var(--am); display: flex; align-items: center; gap: 4px; margin-bottom: 4px; }

.offer-company-mini__city, .offer-company-mini__inn { font-size: .75rem; color: var(--txt3); display: flex; align-items: center; gap: 5px; margin-top: 2px; }

.offer-company-mini__inn span { color: var(--txt3); }

.offer-contact-btn { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-radius: var(--r1); text-decoration: none; transition: all .15s; border: 1.5px solid var(--page); margin-bottom: 8px; width: 100%; box-sizing: border-box; }

.offer-contact-btn:last-child { margin-bottom: 0; }

.offer-contact-btn--phone { background: var(--status-success-light); border-color: var(--status-success-light); }

.offer-contact-btn--phone:hover { background: var(--status-success-light); border-color: var(--em); }

.offer-contact-btn--phone > i { color: var(--em); }

.offer-contact-btn--email { background: var(--sky-ll); border-color: var(--sky-l); }

.offer-contact-btn--email:hover { background: var(--sky-l); }

.offer-contact-btn--email > i { color: var(--sky); }

.offer-contact-btn--web { background: var(--sky-ll); border-color: var(--border)6fe; }

.offer-contact-btn--web:hover { background: var(--sky-ll); }

.offer-contact-btn--web > i { color: var(--vio); }

.offer-contact-btn--msg { background: #f5f3ff; border-color: #ddd6fe; cursor: pointer; }
.offer-contact-btn--msg:hover { background: #ede9fe; border-color: #c4b5fd; }
.offer-contact-btn--msg > i { color: #7c3aed; }

.offer-contact-btn > i { font-size: 1.25rem; width: 20px; text-align: center; flex-shrink: 0; }

.offer-contact-btn__label { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--txt3); display: block; }

.offer-contact-btn__val { font-size: .875rem; font-weight: 700; color: var(--txt); display: block; }

.offer-cta-btn { justify-content: center; padding: 14px; font-size: .9rem; margin-top: 14px; }

.breadcrumbs-bar i.fa-chevron-right { color: var(--border); font-size: .65rem; }

.breadcrumbs-bar span { color: var(--txt); font-weight: 600; }

.breadcrumb-title { display: inline; }

.text-green { color: var(--em) !important; }

.similar-offers-section { background: var(--page); border-top: 1.5px solid var(--page); padding: 40px 0 48px; }

.similar-offers__title { font-size: 1.25rem; font-weight: 900; color: var(--txt); margin: 0 0 24px; display: flex; align-items: center; gap: 10px; }

.similar-offers__title i { color: var(--sky); }

.similar-offers__grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; }

.similar-offer-card { background: var(--card); border: 1.5px solid var(--border); border-radius: 14px; overflow: hidden; text-decoration: none; transition: box-shadow .15s, border-color .15s; }

.similar-offer-card:hover { box-shadow: 0 6px 24px rgba(0,0,0,.1); border-color: var(--status-success-light); }

.similar-offer-card__img { height: 140px; overflow: hidden; background: var(--page); }

.similar-offer-card__img img { width: 100%; height: 100%; object-fit: cover; }

.similar-offer-card__img-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 2.5rem; color: var(--border); }

.similar-offer-card__body { padding: 12px 14px; }

.similar-offer-card__title { font-size: .875rem; font-weight: 700; color: var(--txt); margin: 8px 0 6px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.similar-offer-card__price { font-size: .9rem; font-weight: 800; color: var(--sky-h); margin-bottom: 4px; }

.similar-offer-card__city { font-size: .75rem; color: var(--txt3); display: flex; align-items: center; gap: 5px; }

@media (max-width:900px) {

  .similar-offers__grid { grid-template-columns: repeat(2,1fr); }

}

@media (max-width:540px) {

  .similar-offers__grid { grid-template-columns: 1fr; }

  .offer-detail__layout { grid-template-columns: 1fr; }

}

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; }

.form-grid.full { grid-template-columns: 1fr; }

.form-group input, .form-group select, .form-group textarea { padding: 10px; border: 1px solid var(--border); border-radius: var(--r3); }

.section-divider { border-top: 2px solid var(--border); margin: 30px 0; padding-top: 20px; }

.section-title { font-size: 1.2rem; font-weight: 700; margin-bottom: 15px; color: var(--txt); }

.checkbox-item { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }

.checkbox-item input { width: auto; }

/* ═══════════════════════════════════════════════════
   ФОРМА ПРЕСС-РЕЛИЗА
   ═══════════════════════════════════════════════════ */

.dprf-container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 32px;
}

.dprf-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 32px;
    padding-bottom: 24px;
    border-bottom: 2px solid var(--page);
}

.dprf-title {
    font-size: 32px;
    font-weight: 900;
    color: var(--txt);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 12px;
}

.dprf-title i {
    color: var(--sky-h);
}

.dprf-errors {
    background: var(--status-error-light);
    border: 2px solid var(--rose);
    border-radius: var(--r1);
    padding: 20px;
    margin-bottom: 24px;
}

.dprf-error {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--rose);
    font-size: 14px;
    margin-bottom: 8px;
}

.dprf-error:last-child {
    margin-bottom: 0;
}

.dprf-error i {
    color: var(--rose);
}

.dprf-form {
    background: var(--card);
    border-radius: var(--r1);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    padding: 32px;
}

.dprf-section {
    margin-bottom: 40px;
}

.dprf-section:last-of-type {
    margin-bottom: 0;
}

.dprf-section-title {
    font-size: 22px;
    font-weight: 800;
    color: var(--txt);
    margin: 0 0 24px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--page);
}

.dprf-field {
    margin-bottom: 24px;
}

.dprf-label {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: var(--txt2);
    margin-bottom: 8px;
}

.dprf-required {
    color: var(--rose);
}

.dprf-hint {
    font-size: 12px;
    font-weight: 400;
    color: var(--txt3);
    display: block;
    margin-top: 4px;
}

.dprf-input,
.dprf-textarea,
.dprf-select {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid var(--border);
    border-radius: var(--r2);
    font-size: 15px;
    font-family: inherit;
    transition: all 0.2s;
}

.dprf-input:focus,
.dprf-textarea:focus,
.dprf-select:focus {
    outline: none;
    border-color: var(--sky-h);
    box-shadow: 0 0 0 4px rgba(13, 148, 136, 0.1);
}

.dprf-textarea {
    resize: vertical;
}

.dprf-file {
    display: block;
    width: 100%;
    padding: 12px;
    border: 2px dashed var(--border);
    border-radius: var(--r2);
    cursor: pointer;
    transition: all 0.2s;
}

.dprf-file:hover {
    border-color: var(--sky-h);
    background: var(--sky-ll);
}

.dprf-checkbox {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: var(--sky-ll);
    border: 2px solid var(--sky-l);
    border-radius: var(--r2);
}

.dprf-checkbox input[type="checkbox"] {
    width: 20px;
    height: 20px;
    cursor: pointer;
}

.dprf-checkbox label {
    font-size: 15px;
    font-weight: 700;
    color: var(--sky-h);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
}

.dprf-actions {
    display: flex;
    gap: 16px;
    margin-top: 32px;
    padding-top: 32px;
    border-top: 2px solid var(--page);
}

.ql-toolbar {
    border: none !important;
    border-bottom: 2px solid var(--page) !important;
    border-radius: var(--r2) 10px 0 0;
}

.ql-container {
    border: none !important;
    font-size: 15px;
    font-family: inherit;
}

.btn--large {
    padding: 14px 32px;
    font-size: 16px;
}

.btn--primary {
    background: linear-gradient(135deg, var(--sky-h), var(--teal));
    color: #fff;
    box-shadow: 0 4px 18px rgba(13, 148, 136, 0.35);
}

.btn--primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(13, 148, 136, 0.5);
}

.btn--secondary {
    background: var(--page);
    color: var(--txt2);
    border: 2px solid var(--border);
}

.btn--secondary:hover {
    background: var(--border);
    color: var(--txt2);
}

/* ═══════════════════════════════════════════════════
   QUILL EDITOR + ФОРМА ПРЕСС-РЕЛИЗА (create / edit)
   ═══════════════════════════════════════════════════ */

.pr-img-preview { display: none; margin-top: 8px; }

.pr-img-preview img,
.pr-current-img img { max-width: 180px; max-height: 110px; border-radius: var(--r2); border: 2px solid var(--border); }

.pr-current-img { margin-bottom: 10px; }

.dt-container {
    padding: 20px;
}

.dt-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
}

.dt-title {
    font-size: 28px;
    font-weight: 700;
    color: var(--txt);
    margin: 0 0 5px 0;
}

.dt-subtitle {
    color: var(--txt2);
    margin: 0;
}

.dt-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: var(--r3);
    font-weight: 500;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: all 0.3s;
}

.dt-btn--primary {
    background: linear-gradient(135deg, var(--ind) 0%, var(--vio) 100%);
    color: white;
}

.dt-btn--primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.dt-btn--view {
    padding: 6px 10px;
    background: var(--sky-l);
    color: var(--sky);
    font-size: 14px;
}

.dt-btn--view:hover {
    background: var(--sky-l);
}

.dt-btn--edit {
    padding: 6px 10px;
    background: var(--card)3e0;
    color: var(--am);
    font-size: 14px;
}

.dt-btn--edit:hover {
    background: var(--status-warning-light);
}

.dt-btn--delete {
    padding: 6px 10px;
    background: var(--status-error-light);
    color: var(--rose);
    font-size: 14px;
}

.dt-btn--delete:hover {
    background: var(--status-error-light);
}

.dt-alert {
    padding: 15px 20px;
    border-radius: var(--r2);
    margin-bottom: 25px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.dt-alert--success {
    background: var(--status-success-light);
    color: var(--em);
    border-left: 4px solid var(--em);
}

.dt-empty {
    text-align: center;
    padding: 60px 20px;
    background: var(--page);
    border-radius: var(--r1);
    border: 2px dashed var(--border);
}

.dt-empty i {
    font-size: 48px;
    color: var(--txt3);
    margin-bottom: 20px;
}

.dt-empty h3 {
    font-size: 24px;
    margin-bottom: 10px;
    color: var(--txt);
}

.dt-empty p {
    color: var(--txt2);
    margin-bottom: 25px;
}

.dt-table-wrapper {
    background: var(--card);
    border-radius: var(--r1);
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    overflow-x: auto;
}

.dt-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.dt-table thead {
    background: var(--page);
}

.dt-table th {
    padding: 15px 12px;
    text-align: left;
    font-weight: 600;
    color: var(--txt2);
    border-bottom: 2px solid var(--border);
    white-space: nowrap;
}

.dt-table td {
    padding: 15px 12px;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}

.dt-table tbody tr:hover {
    background: var(--page);
}

.dt-tender-title {
    font-weight: 500;
    color: var(--txt);
    margin-bottom: 4px;
}

.dt-platform {
    display: block;
    color: var(--txt2);
    font-size: 12px;
}

.dt-platform i {
    font-size: 10px;
}

.dt-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: var(--r1);
    font-size: 12px;
    font-weight: 500;
}

.dt-badge--primary {
    background: var(--sky-l);
    color: var(--sky);
}

.dt-badge--info {
    background: var(--sky-l);
    color: var(--sky-h);
}

.dt-badge--secondary {
    background: var(--sky-ll);
    color: var(--vio);
}

.dt-muted {
    color: var(--txt3);
}

.dt-days-left {
    display: inline-block;
    margin-top: 4px;
    color: var(--am);
    font-weight: 500;
}

.dt-expired {
    display: inline-block;
    margin-top: 4px;
    color: var(--rose);
    font-weight: 500;
}

.dt-status {
    display: inline-block;
    padding: 5px 12px;
    border-radius: var(--r1);
    font-size: 12px;
    font-weight: 500;
}

.dt-status--draft {
    background: var(--page);
    color: var(--txt2);
}

.dt-status--moderation {
    background: var(--card)3e0;
    color: var(--am);
}

.dt-status--published {
    background: var(--status-success-light);
    color: var(--em);
}

.dt-status--completed {
    background: var(--sky-l);
    color: var(--sky);
}

.dt-status--cancelled {
    background: var(--status-error-light);
    color: var(--rose);
}

.dt-views {
    color: var(--txt2);
}

.dt-views i {
    margin-right: 4px;
}

.dt-files {
    color: var(--sky);
}

.dt-files i {
    margin-right: 4px;
}

.dt-actions {
    display: flex;
    gap: 5px;
}

.dt-form {
    background: var(--card);
    border-radius: var(--r1);
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    padding: 30px;
}

.dt-form-section {
    margin-bottom: 35px;
}

.dt-form-section-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--txt);
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--page);
}

.dt-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
}

.dt-form-group {
    margin-bottom: 20px;
}

.dt-form-group--full {
    grid-column: 1 / -1;
}

.dt-form-label {
    display: block;
    font-weight: 500;
    color: var(--txt);
    margin-bottom: 8px;
}

.dt-form-label--required::after {
    content: '*';
    color: var(--rose);
    margin-left: 4px;
}

.dt-form-input,
.dt-form-select,

.dt-form-input:focus,
.dt-form-select:focus,
.dt-form-textarea:focus {
    outline: none;
    border-color: var(--ind);
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.dt-form-textarea {
    min-height: 120px;
    resize: vertical;
}

.dt-form-hint {
    font-size: 12px;
    color: var(--txt2);
    margin-top: 5px;
    display: block;
}

.dt-form-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.dt-form-checkbox input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.dt-file-upload {
    border: 2px dashed var(--border);
    border-radius: var(--r2);
    padding: 30px;
    text-align: center;
    background: var(--page);
    cursor: pointer;
    transition: all 0.3s;
}

.dt-file-upload:hover {
    border-color: var(--ind);
    background: var(--sky-ll);
}

.dt-file-upload i {
    font-size: 36px;
    color: var(--txt3);
    margin-bottom: 10px;
}

.dt-file-upload input[type="file"] {
    display: none;
}

.dt-file-list {
    margin-top: 15px;
}

.dt-file-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 15px;
    background: var(--page);
    border-radius: var(--r3);
    margin-bottom: 8px;
}

.dt-file-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

.dt-file-name {
    font-weight: 500;
}

.dt-file-size {
    color: var(--txt2);
    font-size: 12px;
}

.dt-file-remove {
    background: var(--rose);
    color: white;
    border: none;
    padding: 5px 10px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
}

.dt-form-actions {
    display: flex;
    gap: 15px;
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid var(--border);
}

.dt-btn--success {
    background: var(--em);
    color: white;
}

.dt-btn--success:hover {
    background: var(--em);
}

.dt-btn--secondary {
    background: var(--txt2);
    color: white;
}

.dt-btn--secondary:hover {
    background: var(--txt2);
}

.dt-categories-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 10px;
    margin-top: 10px;
}

.dt-category-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--page);
    border-radius: var(--r3);
}

.dt-category-item input[type="checkbox"] {
    width: 16px;
    height: 16px;
}

.dt-category-item label {
    cursor: pointer;
    font-size: 14px;
}

.dt-tags-input {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px;
    border: 1px solid var(--border);
    border-radius: var(--r3);
    min-height: 45px;
    background: var(--card);
}

.dt-tag-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    background: var(--sky-l);
    color: var(--sky);
    border-radius: var(--r1);
    font-size: 14px;
}

.dt-tag-remove {
    background: none;
    border: none;
    color: var(--sky);
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    padding: 0;
}

.dt-tag-input-field {
    flex: 1;
    border: none;
    outline: none;
    min-width: 150px;
    padding: 5px;
}

/* ═══════════════════════════════════════════════════
   QUILL EDITOR + ФОРМА ТЕНДЕРА (create / edit)
   ═══════════════════════════════════════════════════ */

#quill-editor, #quill-description { height: 300px; }

.ql-toolbar.ql-snow { border: 2px solid rgba(20,184,166,.2) !important; border-radius: var(--r2) 10px 0 0; }

.ql-container.ql-snow { border: 2px solid rgba(20,184,166,.2) !important; border-top: none !important; border-radius: 0 0 10px 10px; font-size: 14px; }

.categories-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(180px,1fr)); gap: 8px; padding: 10px 0; }

.cat-item { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1.5px solid var(--border); border-radius: var(--r2); cursor: pointer; transition: all .2s; }

.cat-item:has(input:checked) { border-color: var(--sky); background: var(--sky-ll); }

.cat-item input { width: 16px; height: 16px; accent-color: var(--sky); cursor: pointer; flex-shrink: 0; }

.cat-item label { font-size: 13px; cursor: pointer; line-height: 1.3; }

.file-drop { border: 2px dashed var(--border); border-radius: var(--r2); padding: 30px; text-align: center; cursor: pointer; transition: all .2s; background: var(--page); }

.file-drop:hover { border-color: var(--sky); background: var(--sky-ll); }

.file-drop i { font-size: 40px; color: var(--txt3); margin-bottom: 10px; }

.file-drop p { margin: 0 0 4px; font-weight: 600; color: var(--txt2); }

.file-drop small { color: var(--txt3); font-size: 12px; }

.file-list-item { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: var(--page); border-radius: var(--r2); margin-top: 6px; font-size: 13px; }

.file-list-item i { color: var(--sky); }

.existing-file { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; background: var(--page); border-radius: var(--r2); border: 1px solid var(--border); margin-bottom: 6px; font-size: 13px; }

.offer-form-actions { display: flex; justify-content: space-between; align-items: center; margin-top: 30px; padding-top: 20px; border-top: 2px solid var(--page); }

.security-amount { margin-top: 10px; display: none; }

.pr-meta-info { background: var(--page); border-radius: var(--r2); padding: 12px 16px; font-size: 13px; color: var(--txt2); display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }

.pr-meta-info strong { color: var(--txt2); }

/* ===============================================
   REQUEST QUESTIONS — LIGHT + TEAL
   =============================================== */

/* ── Layout ── */

.dashboard-header    { margin-bottom: 16px; }

.dashboard-content   { padding: 0; }

/* ── Главная карточка ── */

.dashboard-card {
    padding: 0;
    background: var(--card);
    border-radius: var(--r1);
    border: 1px solid var(--border);
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
    overflow: hidden;
}

.activity-section .dashboard-card {
    border: none;
    box-shadow: none;
}

.dashboard-card:hover { transform: none; box-shadow: none; }

.qcard-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
    background: var(--card);
    border-bottom: 1px solid var(--sky-ll);
}

.qcard-head h2 {
    margin: 0 0 2px;
    font-size: 18px;
    font-weight: 700;
    color: var(--txt);
}

.qcard-head p {
    margin: 0;
    font-size: 13px;
    color: var(--txt3);
}

.qcard-head p strong { color: var(--sky-h); }

.qcard-head-icon {
    width: 42px;
    height: 42px;
    border-radius: var(--r2);
    background: rgba(20,184,166,.1);
    color: var(--sky);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

.qcard-body {
    padding: 20px 24px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

/* ── Пустое состояние ── */

.questions-empty {
    text-align: center;
    padding: 60px 20px;
    color: var(--txt3);
}

.questions-empty i  { font-size: 56px; color: var(--border); display: block; margin-bottom: 16px; }

.questions-empty h3 { margin: 0 0 8px; font-size: 17px; color: var(--txt2); }

.questions-empty p  { margin: 0; font-size: 14px; color: var(--txt3); }

/* ── Карточка вопроса ── */

.question-card { margin-bottom: 0; }

.question-card:hover {
    border-color: var(--sky-l);
    border-left-color: var(--sky-h);
    box-shadow: 0 2px 12px rgba(20,184,166,.1);
}

.question-card.is-answered { border-left-color: var(--em); }

.question-avatar-logo {
    width: 64px;
    height: 64px;
    border-radius: var(--r2);
    border: 1px solid var(--border);
    background: var(--card);
    object-fit: contain;
    padding: 5px;
    display: block;
    flex-shrink: 0;
}

.question-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--page);
    border-bottom: 1px solid var(--page);
}

.question-avatar {
    width: 64px;
    height: 64px;
    border-radius: var(--r2);
    background: rgba(20,184,166,.12);
    color: var(--sky);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    flex-shrink: 0;
}

.question-author { font-size: 13px; font-weight: 700; color: var(--txt); }

.question-meta   { font-size: 12px; color: var(--txt3); display: flex; flex-wrap: wrap; gap: 0 12px; margin-top: 1px; }

.question-meta i { color: var(--sky); margin-right: 3px; }

.question-body { padding: 14px 16px; }

.question-text {
    background: var(--page);
    border: 1px solid var(--border);
    border-radius: 7px;
    padding: 10px 14px;
    font-size: 13px;
    line-height: 1.6;
    color: var(--txt2);
    margin-bottom: 0;
}

.question-text-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--sky);
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: 5px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.answered,

.answered {
    background: var(--status-success-light);
    border: 1px solid var(--status-success-light);
    border-left: 3px solid var(--em);
    border-radius: 7px;
    padding: 10px 14px;
}

.answered-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--em);
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: 5px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.answered-text  { font-size: 13px; line-height: 1.6; color: var(--txt2); margin-bottom: 6px; }

.answered-date  { font-size: 11px; color: var(--txt3); }

.answered-date i { color: var(--em); margin-right: 3px; }

.answer-form { margin-top: 4px; }

.answer-form label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    color: var(--txt3);
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: 6px;
}

.answer-form label i { color: var(--sky); margin-right: 4px; }

.answer-form textarea {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--border);
    border-radius: var(--r2);
    font-size: 13px;
    line-height: 1.55;
    resize: vertical;
    transition: border-color .2s, box-shadow .2s;
    font-family: inherit;
    color: var(--txt2);
    background: var(--card);
    box-sizing: border-box;
}

.answer-form textarea:focus {
    outline: none;
    border-color: var(--sky);
    box-shadow: 0 0 0 3px rgba(20,184,166,.1);
}

.answer-form .btn-submit {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 10px;
    padding: 8px 20px;
    background: var(--sky);
    color: #fff;
    border: none;
    border-radius: var(--r2);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: background .2s, transform .15s;
}

.answer-form .btn-submit:hover { background: var(--sky-h); transform: translateY(-1px); }

/* ── Alerts ── */

.alert i { font-size: 15px; }

/* ── Responsive ── */

#editor {
    height: 400px;
    background: var(--card);
}

.preview-section {
    margin-top: 30px;
    padding: 30px;
    background: var(--page);
    border-radius: var(--r2);
}

.preview-controls {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
    align-items: center;
}

.template-selector {
    flex: 1;
}

.template-selector select {
    width: 100%;
    padding: 10px;
    border: 2px solid var(--border);
    border-radius: var(--r3);
    font-size: 14px;
}

@media screen and (max-width: 1400px) {

  .preview-page {
        width: 180mm;
        min-height: 254mm;
        padding: 15mm;
    }

  .page-content {
        min-height: calc(254mm - 30mm - 60px);
    }

  .page-footer {
        bottom: 12mm;
        left: 15mm;
        right: 15mm;
    }

}

.preview-wrapper {
    background: var(--page);
    padding: 50px;
    border-radius: var(--r1);
    display: flex;
    justify-content: center;
    min-height: 800px;
}

#previewContainer {
    width: 100%;
    max-width: 210mm;
    background: var(--card);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    border-radius: 4px;
}

.preview-page:last-child {
    page-break-after: auto;
}

.page-footer {
    position: absolute;
    bottom: 15mm;
    left: 20mm;
    right: 20mm;
}

.period-filters {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}

.period-filters .btn-sm {
    white-space: nowrap;
    padding: 10px 16px;
    font-size: 13px;
    font-weight: 600;
}

.crm-filter-tabs {
    margin-top: 20px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.crm-filter-tab {
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.stats-grid-small {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
    margin-bottom: 20px;
}

.chart-container {
    margin-top: 30px;
    background: var(--card);
    border-radius: var(--r1);
    padding: 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    border: 1px solid var(--border);
    overflow: hidden;
}

.chart-container h3 {
    font-size: 18px;
    font-weight: 600;
    color: var(--txt);
    margin: 0;
    padding: 20px 30px;
    display: flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(135deg, var(--page) 0%, var(--page) 100%);
    border-bottom: 2px solid var(--border);
}

.chart-container h3 i {
    color: var(--sky);
    font-size: 18px;
}

/* chart-canvas removed - using inline styles */

.table-section {
    margin-top: 30px;
    background: var(--card);
    border-radius: var(--r1);
    padding: 25px 30px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    border: 1px solid var(--border);
}

.table-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 15px;
}

.table-section-header h3 {
    font-size: 18px;
    font-weight: 600;
    color: var(--txt);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.table-section-header h3 i {
    color: var(--sky);
    font-size: 18px;
}

.table-controls label {
    margin: 0;
    font-weight: 500;
    font-size: 13px;
    color: var(--txt3);
}

.table-controls select:focus {
    outline: none;
    border-color: var(--sky);
    box-shadow: 0 0 0 2px rgba(2, 132, 199, 0.1);
}

.table-controls select {
    width: auto;
}

.top-section {
    margin-top: 30px;
    background: var(--card);
    border-radius: var(--r1);
    padding: 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    border: 1px solid var(--border);
    overflow: hidden;
}

.top-section h3 {
    font-size: 18px;
    font-weight: 600;
    color: var(--txt);
    margin: 0;
    padding: 20px 30px;
    display: flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(135deg, var(--page) 0%, var(--page) 100%);
    border-bottom: 2px solid var(--border);
}

.top-section h3 i {
    color: var(--sky);
    font-size: 18px;
}

.top-section .responsive-table {
    padding: 0;
    margin: 0;
}

.pagination-nav {
    margin-top: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
}

.pagination-nav a,
.pagination-nav span {
    padding: 8px 12px;
    border: 1px solid var(--border);
    background: var(--card);
    border-radius: var(--r3);
    font-size: 13px;
    font-weight: 500;
    color: var(--txt);
    text-decoration: none;
    transition: all 0.2s ease;
    min-width: 38px;
    text-align: center;
}

.pagination-nav a:hover {
    background: var(--page);
    border-color: var(--sky);
    color: var(--sky);
}

.pagination-nav .active {
    background: var(--sky);
    border-color: var(--sky);
    color: white;
}

.pagination-nav .disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

.user-agent-cell {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pending-row {
    background-color: var(--card)3cd;
}

.no-data-cell {
    text-align: center;
}

.commission-amount {
    color: var(--success-color, var(--em));
}

.responsive-table {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.crm-table thead th {
    padding: 12px 16px;
    text-align: left;
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: var(--txt3);
}

.crm-table tbody td {
    padding: 12px 16px;
    color: var(--txt);
    vertical-align: middle;
}

.crm-table tbody td:first-child {
    font-weight: 500;
    color: var(--sky);
}

.content-card {
    background: var(--card);
    border-radius: var(--r1);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    margin-bottom: 25px;
    overflow: hidden;
}

.card-header-custom {
    padding: 20px 25px;
    background: linear-gradient(135deg, var(--page) 0%, var(--page) 100%);
    border-bottom: 1px solid var(--border);
}

.card-header-custom h3 {
    font-size: 18px;
    font-weight: 700;
    color: var(--txt);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.card-header-custom h3 i {
    color: var(--sky);
    font-size: 20px;
}

.card-body-custom {
    padding: 25px;
}

.card-body-custom p {
    margin: 0 0 15px 0;
    line-height: 1.6;
    color: var(--txt2);
}

.withdrawal-block {
    margin-bottom: 25px;
}

.withdrawal-balance {
    margin-bottom: 20px;
    font-size: 16px;
    color: var(--txt2);
    line-height: 1.6;
}

.withdrawal-balance-amount {
    color: var(--em);
    font-size: 22px;
    font-weight: 700;
}

.btn-withdrawal {
    padding: 14px 28px;
    font-size: 16px;
    font-weight: 600;
    background: linear-gradient(135deg, var(--em) 0%, var(--em) 100%);
    color: white;
    border: none;
    border-radius: var(--r2);
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.btn-withdrawal:hover {
    background: linear-gradient(135deg, var(--em) 0%, var(--em) 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

.btn-withdrawal i {
    font-size: 18px;
}

.alert.alert-info {
    background: var(--sky-l);
    border-color: var(--sky);
    color: var(--sky-h);
}

.alert.alert-success {
    background: var(--sky-l);
    border-color: var(--em);
    color: var(--em);
}

.alert.alert-error {
    background: var(--status-error-light);
    border-color: var(--rose);
    color: var(--rose);
}

.alert.alert-warning {
    background: var(--status-warning-light);
    border-color: var(--am);
    color: var(--am);
}

.alert.alert-warning strong {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
}

.alert.alert-warning p {
    margin: 0;
}

.alert.alert-warning a {
    color: var(--am);
    text-decoration: underline;
    font-weight: 500;
}

.alert.alert-warning a:hover {
    color: var(--am);
}

.alert h4 {
    font-size: 16px;
    font-weight: 700;
    margin: 0 0 15px 0;
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--sky-h);
}

.alert h4 i {
    color: var(--sky);
    font-size: 18px;
}

.alert p {
    margin: 0 0 12px 0;
    line-height: 1.6;
}

.referral-link-section {
    margin-top: 20px;
}

.referral-info-list {
    margin: 0 0 0 20px;
    padding: 0;
    list-style: disc;
    color: var(--sky-h);
}

.referral-info-list li {
    margin-bottom: 10px;
    line-height: 1.7;
    font-size: 15px;
}

.referral-info-list strong {
    color: var(--em);
    font-weight: 700;
}

/* ── Referral link bar (compact) ── */
.referral-link-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--card);
    border: 1.5px solid var(--border);
    border-radius: var(--r1);
    padding: 10px 16px;
}
.referral-link-bar .referral-link-input-group {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
    margin: 0;
}
.referral-link-label {
    font-size: 13px;
    font-weight: 700;
    color: var(--txt2);
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 6px;
}
.referral-link-label i { color: var(--sky); }
.referral-link-input {
    flex: 1;
    min-width: 0;
    padding: 8px 12px;
    border: 1.5px solid var(--border);
    border-radius: 6px;
    font-family: 'Courier New', monospace;
    font-size: 13px;
    background: var(--page);
    color: var(--txt);
    transition: border-color .2s;
}
.referral-link-input:focus {
    outline: none;
    border-color: var(--sky);
}
.btn-copy-link {
    padding: 8px 16px;
    background: var(--sky);
    color: #fff;
    border: none;
    border-radius: 6px;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    transition: all .2s;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 6px;
}
.btn-copy-link:hover {
    background: var(--sky-h);
    box-shadow: 0 2px 8px rgba(2,132,199,.25);
}
.btn-copy-link.copied { background: var(--em); }

.referral-link-bar .social-share-buttons {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}
.btn-social {
    width: 36px;
    height: 36px;
    border: 1.5px solid var(--border);
    border-radius: 6px;
    text-decoration: none;
    color: var(--txt3);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all .2s;
    background: var(--card);
    font-size: 15px;
    padding: 0;
}
.btn-social:hover { transform: translateY(-1px); text-decoration: none; }
.btn-social.vk { color: #4680C2; border-color: #4680C2; }
.btn-social.vk:hover { background: #4680C2; color: #fff; }
.btn-social.telegram { color: #0088cc; border-color: #0088cc; }
.btn-social.telegram:hover { background: #0088cc; color: #fff; }
.btn-social.whatsapp { color: #25D366; border-color: #25D366; }
.btn-social.whatsapp:hover { background: #25D366; color: #fff; }

/* ── Referral nav: tabs + period filter in one row ── */
.referral-nav {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 12px;
}
.referral-nav .crm-filter-tabs {
    align-self: center;
}
.referral-nav .referral-tabs {
    margin: 0;
    flex: 1;
}
.referral-period-form {
    display: flex;
    gap: 8px;
    align-items: center;
    margin: 0;
    flex-shrink: 0;
}
.referral-period-form select {
    height: 42px;
    padding: 0 14px;
    border: 1.5px solid var(--border);
    border-radius: var(--r2);
    font-size: 13px;
    font-weight: 600;
    background: var(--card);
    color: var(--txt);
    cursor: pointer;
    transition: border-color .2s;
    box-sizing: border-box;
}
.referral-period-form select:focus {
    outline: none;
    border-color: var(--sky);
    box-shadow: 0 0 0 3px rgba(2,132,199,.1);
}

/* ── Referral conditions (compact info line) ── */
.referral-conditions {
    background: var(--sky-ll);
    border: 1px solid rgba(2,132,199,.15);
    border-radius: var(--r2);
    padding: 10px 16px;
    margin-bottom: 16px;
}
.referral-conditions p {
    margin: 0;
    font-size: 13px;
    color: var(--txt2);
    line-height: 1.5;
}
.referral-conditions i { color: var(--sky); margin-right: 4px; }

/* ── badge-error ── */
.badge-error {
    background: linear-gradient(135deg, rgba(239,68,68,.15) 0%, rgba(239,68,68,.25) 100%);
    color: var(--rose);
}

/* ── Earnings grid ── */
.earnings-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 16px;
}
.earnings-progress-bar { margin-bottom: 0; }
.earnings-progress-bar h4 {
    font-size: 13px;
    color: var(--txt2);
    margin: 0 0 8px 0;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .5px;
}
.earnings-progress-bar > div {
    background: var(--page);
    height: 42px;
    border-radius: var(--r2);
    overflow: hidden;
    box-shadow: inset 0 2px 4px rgba(0,0,0,.06);
}
.progress-bar-fill {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    border-radius: var(--r2);
    transition: width .8s cubic-bezier(.4,0,.2,1);
    min-width: 100px;
    box-shadow: 0 2px 6px rgba(0,0,0,.12);
}
.progress-bar-fill.level1 { background: linear-gradient(135deg, var(--ind), var(--vio)); }
.progress-bar-fill.level2 { background: linear-gradient(135deg, var(--vio), var(--rose)); }

/* ── Referral responsive ── */
@media (max-width: 768px) {
    .referral-link-bar { flex-direction: column; align-items: stretch; }
    .referral-link-bar .referral-link-input-group { flex-direction: column; }
    .referral-link-bar .social-share-buttons { justify-content: center; }
    .referral-nav { flex-direction: column; align-items: stretch; }
    .referral-period-form { justify-content: center; }
    .earnings-grid { grid-template-columns: 1fr; }
}

.modal-header i {
    color: #fff;
    font-size: 24px;
}

/* ── Statistics page ── */

/* 6-col stat-cards: компактные, белый фон, тонкий border */
.stats-grid-6 .stat-card {
    border-color: var(--border);
    padding: 12px 14px;
}
.stats-grid-6 .stat-value { font-size: 22px; }
.stats-grid-6 .stat-label { font-size: 11px; word-break: break-word; overflow-wrap: break-word; hyphens: auto; line-height: 1.2; }
.stats-grid-6 .stat-icon { width: 34px; height: 34px; font-size: 14px; }

/* Легенда чарта в section-header */
.main-chart-legend { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.chart-leg-badge {
    display: inline-flex; align-items: center;
    padding: 3px 10px; border-radius: var(--r1);
    font-size: 11px; font-weight: 600; white-space: nowrap;
}

/* ── Популярный контент — горизонтальная строка-ряд ── */
.top-content-grid { display: flex; flex-direction: column; gap: 0; }
.top-content-card {
    display: flex; justify-content: space-between; align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid var(--bord2);
    background: none; border-radius: 0;
}
.top-content-card:last-child { border-bottom: none; }
.top-content-card:hover { background: var(--sky-ll); margin: 0 -12px; padding: 10px 12px; border-radius: var(--r1); }
.top-content-card-title { min-width: 0; }
.top-content-card-title a {
    color: var(--txt); text-decoration: none;
    font-size: 13px; font-weight: 600; line-height: 1.35;
    display: flex; align-items: center; gap: 6px;
}
.top-content-card-title a:hover { color: var(--sky); }
.top-content-card-type { font-size: 11px; color: var(--txt3); margin-top: 1px; }
.top-content-card-stats { display: flex; gap: 20px; flex-shrink: 0; margin-left: 16px; }
.top-content-stat { text-align: center; min-width: 56px; }
.top-content-stat-value { font-size: 15px; font-weight: 700; color: var(--txt); }
.top-content-stat-value.blue { color: var(--sky); }
.top-content-stat-label { font-size: 10px; color: var(--txt3); text-transform: uppercase; letter-spacing: .3px; }

/* ── Города — компактный список ── */
.city-stats { display: flex; flex-direction: column; gap: 0; }
.activity-section .city-stats { padding: 0; }
.city-item {
    display: flex; justify-content: space-between; align-items: center;
    padding: 7px 0; border-bottom: 1px solid var(--bord2); font-size: 13px;
}
.city-item:last-child { border-bottom: none; }
.city-item:hover { background: var(--sky-ll); margin: 0 -8px; padding: 7px 8px; border-radius: var(--r1); }
.city-name { color: var(--txt); display: flex; align-items: center; gap: 6px; }
.city-name i { color: var(--sky); font-size: 11px; }
.city-count { font-weight: 700; color: var(--txt); font-size: 13px; }

/* ── Журнал просмотров — компактная таблица ── */
.viewer-log-table { table-layout: fixed; }
.viewer-log-table th { padding: 9px 14px; font-size: 10.5px; }
.viewer-log-table td { padding: 9px 14px; font-size: 12.5px; vertical-align: top; }
.viewer-log-table td a { font-weight: 500; }
.viewed-item {
    display: block; font-size: 12px; line-height: 1.5; color: var(--txt2);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.viewed-item i { font-size: 11px; margin-right: 4px; }
.viewed-item a { color: var(--sky) !important; font-weight: 500; }
.viewed-item a:hover { text-decoration: underline; }
.viewed-more { font-size: 11px; color: var(--txt3); font-weight: 600; }
.viewed-empty { color: var(--txt3); }

/* ── Пагинация ── */
.pagination-bar {
    display: flex; align-items: center; justify-content: center;
    padding: 14px 0 0; border-top: 1px solid var(--bord2); margin-top: 8px;
}

/* ── Empty-state ── */
.activity-section .empty-state { text-align: center; padding: 40px 24px; }
.activity-section .empty-state i { font-size: 42px; color: var(--border); margin-bottom: 14px; display: block; }
.activity-section .empty-state h3 { font-size: 16px; color: var(--txt2); margin: 0 0 6px; font-weight: 600; }
.activity-section .empty-state p { font-size: 13px; color: var(--txt3); margin: 0; }

/* ── Responsive ── */
@media (max-width: 900px) {
    .top-modules-grid { grid-template-columns: 1fr; }
    .analytics-row { grid-template-columns: 1fr; }
    .stats-grid-6 { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (max-width: 600px) {
    .stats-grid-6 { grid-template-columns: repeat(2, 1fr) !important; }
    .top-content-card { flex-direction: column; align-items: flex-start; }
    .top-content-card-stats { margin-left: 0; margin-top: 6px; }
}

/* ── Dashboard tables: first col narrow, rest auto ── */
.dashboard-container .data-table th:first-child,
.dashboard-container .data-table td:first-child {
    width: 1%; white-space: nowrap;
}

/* ── Profile & Notifications pages ── */

/* Readonly inputs */
.input-readonly {
    background: var(--page) !important;
    color: var(--txt2) !important;
    cursor: default;
}

/* Form hint */
.form-hint { display: block; font-size: 12px; color: var(--txt3); margin-top: 4px; }

/* Compact button */
.btn-sm { padding: 8px 16px !important; font-size: 13px !important; }

/* Forms inside activity-section: tighter spacing */
.activity-section .form-group { margin-bottom: 16px; }
.activity-section .form-row { gap: 16px; }
.activity-section form .btn { margin-top: 4px; }

/* Empty table cell */
.empty-table-cell {
    text-align: center !important; padding: 32px 16px !important;
    color: var(--txt3) !important; font-size: 13px;
}
.empty-table-cell i { font-size: 36px; margin-bottom: 8px; display: block; color: var(--border); }

/* IP code */
.ip-code { font-size: 12px; background: var(--page); padding: 2px 6px; border-radius: 4px; color: var(--txt2); }

/* Browser cell */
.browser-cell { font-size: 12px; color: var(--txt3); }
.browser-cell i { margin-right: 4px; }

/* Notification counter in section header */
.notif-counter {
    margin-left: auto; font-size: 13px; color: var(--txt3); font-weight: 600;
}

/* Notification category description */
.notif-cat-desc {
    margin: 2px 0 0 48px; font-size: 12px; color: var(--txt3);
}

/* Activity-section as notification section */
.activity-section.notification-section { padding: 0; overflow: hidden; }
.activity-section.notification-section .notification-section-header {
    padding: 16px 24px 12px; flex-direction: column; align-items: stretch;
}
.activity-section.notification-section .notification-section-header h2 {
    font-size: 16px; gap: 10px; width: 100%;
}
.activity-section.notification-section .notification-item {
    border: none; border-bottom: 1px solid var(--border);
    border-radius: 0; background: transparent;
    margin: 0; padding: 12px 24px;
}
.activity-section.notification-section .notification-item:last-child {
    border-bottom: none;
}
.activity-section.notification-section .notification-item:hover {
    background: var(--page); box-shadow: none;
}

/* ── Withdrawal modal ── */
.withdrawal-modal { max-width: 460px; }
.withdrawal-modal .modal-body { padding: 20px 24px 24px; }
.withdrawal-modal .form-group { margin-bottom: 16px; }
.withdrawal-modal .form-group:last-of-type { margin-bottom: 20px; }
.withdrawal-modal .modal-actions { gap: 10px; }
.withdrawal-modal .btn-cancel,
.withdrawal-modal .btn-submit {
    padding: 8px 16px;
    font-size: 13px;
}

.form-label {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: var(--txt);
    margin-bottom: 6px;
}
.form-input,
.form-select {
    width: 100%;
    padding: 10px 14px;
    border: 1.5px solid var(--border);
    border-radius: var(--r2);
    font-size: 14px;
    font-weight: 500;
    color: var(--txt);
    background: var(--card);
    transition: border-color .2s, box-shadow .2s;
    box-sizing: border-box;
}
.form-input:focus,
.form-select:focus {
    outline: none;
    border-color: var(--sky);
    box-shadow: 0 0 0 3px rgba(2,132,199,.1);
}
.form-input[type="number"] {
    font-weight: 600;
}
.form-hint {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    color: var(--txt3);
}

.btn-sm {
    padding: 6px 12px;
    font-size: 12px;
    border: none;
    border-radius: var(--r3);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    transition: all 0.2s ease;
}

.btn-sm:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.btn-success {
    background: linear-gradient(135deg, var(--em) 0%, var(--em) 100%);
    color: white;
}

.btn-success:hover {
    background: linear-gradient(135deg, var(--em) 0%, var(--em) 100%);
}

.btn-danger {
    background: linear-gradient(135deg, var(--rose) 0%, var(--rose) 100%);
    color: white;
}

.btn-danger:hover {
    background: linear-gradient(135deg, var(--rose) 0%, var(--rose) 100%);
}

.user-comment-row {
    background: var(--page);
    border-left: 4px solid var(--em);
}

.user-comment-cell {
    padding: 15px 20px;
    font-size: 13px;
    color: var(--txt2);
    line-height: 1.6;
}

.user-comment-cell strong {
    color: var(--txt);
    font-weight: 600;
}

.processing-info {
    font-size: 12px;
    color: var(--txt2);
    line-height: 1.5;
}

.processing-info strong {
    color: var(--txt2);
}

.payment-details {
    font-family: 'Courier New', monospace;
    font-size: 12px;
    color: var(--txt);
    background: var(--page);
    padding: 4px 8px;
    border-radius: 4px;
    display: inline-block;
}

/* Фильтр периодов статистики - инлайн внутри карточки */

.period-filter-inline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 16px 20px;
    background: var(--page);
    border-radius: var(--r2);
    margin-top: 40px;
    margin-bottom: 20px;
    border: 1px solid var(--border);
}

.period-stats-label {
    font-size: 15px;
    font-weight: 600;
    color: var(--txt2);
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--border);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.period-filter-wrapper {
    margin-bottom: 30px;
}

.period-filter {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.period-btn {
    padding: 10px 18px;
    border: 2px solid var(--border);
    background: var(--card);
    color: var(--txt2);
    border-radius: var(--r2);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.period-btn i {
    font-size: 14px;
}

.period-btn:hover {
    border-color: var(--sky);
    color: var(--sky);
    background: var(--sky-ll);
}

.period-btn.active {
    border-color: var(--sky);
    background: var(--sky);
    color: white;
}

.period-btn.active:hover {
    background: var(--sky);
    border-color: var(--sky);
}

.year-selector {
    display: flex;
    align-items: center;
    gap: 15px;
    background: var(--page);
    padding: 8px 16px;
    border-radius: var(--r2);
    border: 1px solid var(--border);
}

.year-btn {
    width: 32px;
    height: 32px;
    border: 1px solid var(--border);
    background: var(--card);
    color: var(--txt2);
    border-radius: var(--r3);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.year-btn:hover:not(:disabled) {
    background: var(--sky);
    color: white;
    border-color: var(--sky);
}

.year-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.current-year {
    font-size: 16px;
    font-weight: 600;
    color: var(--txt);
    min-width: 60px;
    text-align: center;
}

.modal-overlay.active {
    display: flex;
}

.modal-info {
    background: var(--sky-l);
    border-left: 4px solid var(--sky);
    padding: 12px 16px;
    border-radius: var(--r2);
    margin-bottom: 20px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 14px;
    color: var(--sky-h);
    line-height: 1.6;
}

.modal-info i {
    color: var(--sky);
    font-size: 16px;
    margin-top: 2px;
    flex-shrink: 0;
}

.btn-cancel {
    flex: 1;
    padding: 12px 20px;
    border: 2px solid var(--border);
    background: var(--card);
    color: var(--txt2);
    border-radius: var(--r2);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-cancel:hover {
    background: var(--page);
    border-color: var(--border);
}

.btn-submit {
    flex: 1;
    padding: 12px 20px;
    border: 2px solid var(--sky);
    background: var(--sky);
    color: white;
    border-radius: var(--r2);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-submit:hover {
    background: var(--sky);
    border-color: var(--sky);
}

/* Стили элементов управления таблицей */

.table-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding: 15px;
    background: var(--surface-color, var(--page));
    border-radius: var(--r2);
    gap: 15px;
    flex-wrap: wrap;
}

.table-info {
    font-size: 14px;
    color: var(--text-secondary, var(--txt2));
    font-weight: 500;
}

.per-page-selector {
    display: flex;
    align-items: center;
    gap: 10px;
}

.per-page-selector label {
    font-size: 14px;
    color: var(--text-secondary, var(--txt2));
    font-weight: 500;
    margin: 0;
}

.per-page-select {
    padding: 8px 35px 8px 12px;
    border: 1px solid var(--border-color, var(--border));
    border-radius: var(--r3);
    background: var(--card);
    font-size: 14px;
    color: var(--text-primary, var(--txt));
    cursor: pointer;
    transition: all 0.2s;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23333' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
}

.per-page-select:hover {
    border-color: var(--primary-color, var(--sky));
}

.per-page-select:focus {
    outline: none;
    border-color: var(--primary-color, var(--sky));
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
}

.table-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-top: 25px;
    padding-top: 20px;
    border-top: 1px solid var(--border-color, var(--border));
    flex-wrap: wrap;
}

.pagination-pages {
    display: flex;
    gap: 5px;
    align-items: center;
}

.pagination-page {
    min-width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    border: 1px solid var(--border-color, var(--border));
    border-radius: var(--r3);
    background: var(--card);
    color: var(--text-primary, var(--txt));
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s;
}

.pagination-page:hover {
    background: var(--primary-color, var(--sky));
    border-color: var(--primary-color, var(--sky));
    color: white;
}

.pagination-page.active {
    background: var(--primary-color, var(--sky));
    border-color: var(--primary-color, var(--sky));
    color: white;
    cursor: default;
}

.pagination-ellipsis {
    padding: 0 5px;
    color: var(--text-secondary, var(--txt2));
    font-size: 14px;
}

.pagination-btn i {
    font-size: 12px;
}

.crm-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--card);
    font-size: 14px;
}

.crm-table thead {
    background: var(--surface-color, var(--page));
}

.crm-table th {
    padding: 14px 12px;
    text-align: left;
    font-weight: 600;
    color: var(--text-primary, var(--txt));
    border-bottom: 2px solid var(--border-color, var(--border));
    white-space: nowrap;
}

.crm-table tbody tr {
    border-bottom: 1px solid var(--border-light, var(--page));
    transition: background-color 0.2s;
}

.crm-table tbody tr:hover {
    background: var(--hover-bg, var(--page));
}

.crm-table td {
    padding: 14px 12px;
    color: var(--text-primary, var(--txt));
    vertical-align: middle;
}

.deposit-amount {
    font-weight: 600;
}

.deposit-amount.positive {
    color: var(--success-color, var(--em));
}

.deposit-amount.zero {
    color: var(--text-secondary, var(--txt2));
}

.earned-amount {
    color: var(--success-color, var(--em));
    font-weight: 600;
}

.company-verified-icon {
    color: var(--success-color, var(--em));
    margin-left: 5px;
    font-size: 14px;
}

.company-not-specified {
    color: var(--text-secondary, var(--txt2));
    font-style: italic;
    font-size: 13px;
}

.status-warning {
    background: rgba(245, 158, 11, 0.1);
    color: var(--am);
}

.status-cancelled {
    background: rgba(239, 68, 68, 0.1);
    color: var(--rose);
}

.referral-email-link,
.referral-company-link,
.referral-link {
    color: var(--primary-color, var(--sky));
    text-decoration: none;
    font-weight: 500;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.referral-email-link:hover,
.referral-company-link:hover,
.referral-link:hover {
    color: var(--primary-hover, var(--sky-h));
    text-decoration: underline;
}

.company-not-specified-link {
    color: var(--text-secondary, var(--txt2));
    text-decoration: none;
    font-style: italic;
    font-size: 13px;
    transition: all 0.2s;
}

.company-not-specified-link:hover {
    color: var(--primary-color, var(--sky));
    text-decoration: underline;
}

/* Стили для чартов и баннеров dashboard */

/* ── Большой сводный чарт ── */

.adm-chart-card {
    background: var(--card);
    border: 1.5px solid var(--border);
    border-radius: var(--r1);
    padding: 28px 28px 24px;
    margin-bottom: 24px;
    display: flex;
    flex-direction: column;
}

.adm-chart-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 20px;
}

.adm-chart-title {
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--txt);
    margin-bottom: 4px;
}

.adm-chart-sub {
    font-size: .8125rem;
    color: var(--txt3);
}

.adm-chart-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    align-items: center;
    justify-content: flex-end;
}

.adm-leg-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .78rem;
    font-weight: 600;
    color: var(--txt2);
    white-space: nowrap;
}

.adm-leg-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.adm-chart-wrap {
    flex: 1;
    min-height: 300px;
    position: relative;
}

@media (max-width: 700px) {

  .adm-chart-header { flex-direction: column; }

  .adm-chart-legend { justify-content: flex-start; }

  .adm-chart-wrap   { min-height: 220px; }

}

/* ── Баннер модерации ── */

.alert-moderation {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    background: linear-gradient(135deg, var(--status-warning-light) 0%, var(--status-warning-light) 100%);
    border: 1.5px solid var(--am);
    border-radius: 14px;
    padding: 18px 24px;
    margin-bottom: 24px;
}

.alert-moderation-icon {
    font-size: 1.6rem;
    color: var(--am);
    flex-shrink: 0;
    margin-top: 2px;
}

.alert-moderation-body strong {
    display: block;
    color: var(--am);
    font-size: 1rem;
    margin-bottom: 10px;
}

.alert-moderation-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.mod-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 14px;
    background: var(--card);
    border: 1.5px solid var(--am);
    border-radius: var(--r1);
    color: var(--am);
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    transition: all .2s;
}

.mod-pill:hover {
    background: var(--am);
    color: #fff;
}

/* Стили для модального окна организаций */

.modal {
    display: none;
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(15, 22, 36, 0.5);
    backdrop-filter: blur(4px);
    font-family: 'Inter', -apple-system, system-ui, sans-serif;
    align-items: flex-start;
    justify-content: center;
    padding: 40px 16px;
}

.modal .modal-content {
    position: relative;
    margin: auto;
    max-width: 600px;
    width: 100%;
}

.modal-header h2 {
    margin: 0;
    font-size: 22px;
    font-weight: 600;
}

.modal-header .close {
    font-size: 32px;
    font-weight: 300;
    color: white;
    opacity: 0.8;
    cursor: pointer;
    transition: opacity 0.2s;
    background: none;
    border: none;
    padding: 0;
    width: 32px;
    height: 32px;
}

.modal-header .close:hover {
    opacity: 1;
}

.form-group.full-width {
    grid-column: 1 / -1;
}

.form-group label i {
    color: var(--primary-color);
    margin-right: 6px;
    font-size: 13px;
}

.required {
    color: var(--danger-color);
    margin-left: 3px;
    font-weight: 700;
    font-size: 16px;
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="tel"],
.form-group input[type="url"],
.form-group input[type="date"],
.form-group input[type="number"],
.form-group input[type="file"],
.form-group select,
#user_search,
input[name*="okved_code"],
input[name*="okved_desc"],
input[name*="bank_name"],
input[name*="bank_bik"],
input[name*="bank_corr"],
input[name*="bank_check"],
input[name*="contact_dept"],
input[name*="contact_person"],
input[name*="contact_position"],
input[name*="contact_phone"],
input[name*="contact_email"] {
    width: 100% !important;
    height: var(--field-height) !important;
    padding: 0 var(--padding-x) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--border-radius) !important;
    font-size: var(--font-size) !important;
    color: var(--text-dark) !important;
    transition: all 0.2s ease !important;
    background: var(--card) !important;
    box-sizing: border-box !important;
    font-family: inherit !important;
    line-height: var(--field-height) !important;
    flex: 1 !important;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus,
#user_search:focus,
input[name*="okved_"]:focus,
input[name*="bank_"]:focus,
input[name*="contact_"]:focus {
    outline: none !important;
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 2px rgba(2, 132, 199, 0.15) !important;
}

.form-group input:disabled,
.form-group select:disabled {
    background: var(--page) !important;
    cursor: not-allowed !important;
    opacity: 0.6 !important;
}

.form-group input[type="file"] {
    padding: 8px var(--padding-x) !important;
    cursor: pointer !important;
    line-height: normal !important;
}

#user_search_results {
    margin-top: 4px;
    border: var(--border-width) solid var(--border-color);
    border-radius: var(--border-radius);
    background: var(--card);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

#selected_user_info {
    margin-top: 12px;
    padding: 14px 16px;
    background: linear-gradient(135deg, var(--sky-ll) 0%, var(--sky-l) 100%);
    border-left: 4px solid var(--primary-color);
    border-radius: var(--border-radius);
    font-size: var(--font-size);
    line-height: 1.6;
}

#selected_user_info button {
    background: var(--card);
    border: 1px solid var(--border-color);
    color: var(--danger-color);
    padding: 6px 12px;
    border-radius: var(--r3);
    cursor: pointer;
    font-size: 13px;
    transition: all 0.2s;
    height: 32px;
}

#selected_user_info button:hover {
    background: var(--status-error-light);
    border-color: var(--danger-color);
}

#orgModal .btn,
#orgModal .btn-primary,
#orgModal .btn-secondary,
#orgModal button[type="submit"],
#orgModal button[type="button"] {
    height: var(--button-height) !important;
    padding: 0 24px !important;
    border-radius: var(--border-radius) !important;
    font-weight: 500 !important;
    font-size: var(--font-size) !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    border: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    font-family: inherit !important;
    line-height: 1 !important;
    box-sizing: border-box !important;
}

#orgModal .btn-primary,
#orgModal button[type="submit"]:not(.btn-secondary):not(.btn-remove-row):not(.btn-add-row) {
    background: linear-gradient(135deg, var(--sky) 0%, var(--teal) 100%) !important;
    color: white !important;
    box-shadow: 0 2px 4px rgba(2, 132, 199, 0.3) !important;
}

#orgModal .btn-primary:hover,
#orgModal button[type="submit"]:not(.btn-secondary):not(.btn-remove-row):not(.btn-add-row):hover {
    background: linear-gradient(135deg, var(--sky-h) 0%, var(--teal) 100%) !important;
    box-shadow: 0 4px 8px rgba(2, 132, 199, 0.4) !important;
    transform: translateY(-1px) !important;
}

#orgModal .btn-secondary {
    background: var(--page) !important;
    color: var(--secondary-color) !important;
    border: 1px solid var(--border-color) !important;
}

#orgModal .btn-secondary:hover {
    background: var(--border) !important;
    border-color: var(--border) !important;
}

#orgModal .btn-add-row {
    height: var(--button-height) !important;
    background: rgba(2, 132, 199, 0.08) !important;
    border: 1px dashed var(--border-color) !important;
    color: var(--primary-color) !important;
    padding: 0 20px !important;
    border-radius: var(--border-radius) !important;
    cursor: pointer !important;
    font-size: var(--font-size) !important;
    font-weight: 500 !important;
    transition: all 0.2s !important;
    margin-top: 10px !important;
}

#orgModal .btn-add-row:hover {
    border-color: var(--primary-color) !important;
    background: rgba(2, 132, 199, 0.15) !important;
    border-style: solid !important;
}

#orgModal .btn-add-row i {
    font-size: 12px;
}

#orgModal .btn-remove-row {
    height: 36px !important;
    background: var(--status-error-light) !important;
    color: var(--danger-color) !important;
    padding: 0 14px !important;
    border-radius: var(--r3) !important;
    border: none !important;
    cursor: pointer !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    transition: all 0.2s !important;
}

#orgModal .btn-remove-row:hover {
    background: var(--status-error-light) !important;
}

.form-section {
    background: var(--card);
    padding: 24px;
    border-radius: var(--r2);
    margin-bottom: 20px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.form-section h4 {
    margin: 0 0 18px 0;
    color: var(--text-dark);
    font-size: 16px;
    font-weight: 600;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--primary-light);
}

.form-section h4 i {
    color: var(--primary-color);
    font-size: 18px;
    margin-right: 10px;
}

.form-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

div[style*="display: flex"] {
    display: flex !important;
    gap: 10px !important;
    align-items: center !important;
    margin-bottom: 10px !important;
}

.image-preview {
    margin-top: 12px;
    max-width: 200px;
    border-radius: var(--border-radius);
    overflow: hidden;
    border: var(--border-width) solid var(--border-color);
    background: var(--card);
}

.image-preview img {
    width: 100%;
    height: auto;
    display: block;
}

.modal-footer {
    background: var(--card);
    padding: 20px 30px;
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
    border-radius: 0 0 12px 12px;
    margin-top: 20px;
}

.modal-footer.full-width {
    grid-column: 1 / -1;
}

::placeholder {
    color: var(--txt3) !important;
    opacity: 1 !important;
}

.modal-content::-webkit-scrollbar {
    width: 8px;
}

.modal-content::-webkit-scrollbar-track {
    background: var(--page);
}

.modal-content::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 4px;
}

.modal-content::-webkit-scrollbar-thumb:hover {
    background: var(--txt3);
}

.form-group input[type="checkbox"] {
    width: auto !important;
    height: 20px !important;
    margin-right: 8px !important;
    cursor: pointer !important;
    vertical-align: middle !important;
}

.form-group label input[type="checkbox"] {
    margin-right: 8px;
    vertical-align: middle;
}

.checkbox-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
}

.checkbox-wrapper input[type="checkbox"] {
    width: 20px !important;
    height: 20px !important;
    cursor: pointer;
}

.checkbox-wrapper label {
    margin-bottom: 0 !important;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ═══════════════════════════════════════════════════════════
   Карточка "Государственная компания"
   ═══════════════════════════════════════════════════════════ */

.government-checkbox-card {
    background: linear-gradient(135deg, var(--sky-l) 0%, var(--sky-l) 100%);
    border: 1.5px solid var(--sky);
    border-radius: var(--r1);
    padding: 16px 20px;
    transition: all 0.3s ease;
}

.government-checkbox-card:hover {
    background: linear-gradient(135deg, var(--sky-l) 0%, var(--sky-l) 100%);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2);
}

.government-label {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    cursor: pointer !important;
    margin-bottom: 0 !important;
    user-select: none;
}

.government-checkbox {
    width: 24px !important;
    height: 24px !important;
    cursor: pointer !important;
    flex-shrink: 0;
    accent-color: var(--sky);
}

.checkbox-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: var(--card);
    border-radius: 50%;
    color: var(--sky);
    font-size: 18px;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(59, 130, 246, 0.15);
}

.checkbox-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}

.checkbox-text strong {
    font-size: 15px;
    font-weight: 600;
    color: var(--sky-h);
}

.checkbox-text small {
    font-size: 13px;
    color: var(--sky);
    font-weight: 400;
    line-height: 1.4;
}

.government-checkbox:checked + .checkbox-icon {
    animation: pulse 0.4s ease;
}

.news-image-preview {
    width: 60px;
    height: 60px;
    max-width: 60px;
    max-height: 60px;
    object-fit: cover;
    border-radius: var(--r2);
    display: block;
    margin: 0 auto;
}

#newsModal.modal {
    display: none;
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    animation: fadeIn 0.2s ease;
}

#newsModal .modal-content {
    background-color: var(--card);
    margin: 2% auto;
    padding: 0;
    border-radius: var(--r1);
    width: 92%;
    max-width: 950px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
    max-height: 92vh;
    overflow: hidden;
    animation: slideDown 0.3s ease;
    border: 1px solid rgba(2, 132, 199, 0.1);
}

#newsModal .modal-header {
    padding: 28px 35px;
    background: linear-gradient(135deg, var(--sky) 0%, var(--sky-h) 100%);
    color: white;
    border-radius: var(--r1) 16px 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 4px 12px rgba(2, 132, 199, 0.15);
}

#newsModal .modal-header h2 {
    margin: 0;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -0.3px;
}

#newsModal .close {
    color: white;
    font-size: 36px;
    font-weight: bold;
    cursor: pointer;
    line-height: 1;
    transition: all 0.2s ease;
    padding: 0 8px;
    margin: -8px;
}

#newsModal .close:hover {
    opacity: 0.7;
    transform: rotate(90deg);
}

#newsModal .modal-body {
    padding: 35px;
    max-height: calc(92vh - 180px);
    overflow-y: auto;
    background: var(--page);
}

#newsModal .modal-body::-webkit-scrollbar {
    width: 8px;
}

#newsModal .modal-body::-webkit-scrollbar-track {
    background: var(--page);
    border-radius: var(--r2);
}

#newsModal .modal-body::-webkit-scrollbar-thumb {
    background: var(--sky);
    border-radius: var(--r2);
}

#newsModal .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-bottom: 20px;
}

#newsModal .form-group {
    margin-bottom: 24px;
}

#newsModal .form-group label {
    display: block;
    margin-bottom: 10px;
    font-weight: 600;
    color: var(--txt);
    font-size: 14px;
    letter-spacing: 0.2px;
}

#newsModal .form-group small {
    color: var(--txt3);
    font-weight: 400;
    font-size: 12px;
}

#newsModal .form-group input[type="text"],
#newsModal .form-group input[type="datetime-local"],
#newsModal .form-group textarea,
#newsModal .form-group select {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid var(--border);
    border-radius: var(--r2);
    font-size: 14px;
    transition: all 0.3s ease;
    background: var(--card);
    font-family: inherit;
    box-sizing: border-box;
}

#newsModal .form-group input[type="file"] {
    width: 100%;
    padding: 10px 14px;
    border: 2px dashed var(--border);
    border-radius: var(--r2);
    font-size: 14px;
    transition: all 0.3s ease;
    background: var(--card);
    cursor: pointer;
}

#newsModal .form-group input[type="file"]:hover {
    border-color: var(--sky);
    background: rgba(2, 132, 199, 0.02);
}

#newsModal .form-group input:focus,
#newsModal .form-group textarea:focus,
#newsModal .form-group select:focus {
    outline: none;
    border-color: var(--sky);
    box-shadow: 0 0 0 4px rgba(2, 132, 199, 0.08);
}

#newsModal .form-group textarea {
    min-height: 100px;
    resize: vertical;
    font-family: inherit;
    line-height: 1.6;
}

#newsModal .form-group input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--sky);
}

#newsModal .modal-footer {
    padding: 20px 35px;
    background: var(--card);
    border-radius: 0 0 16px 16px;
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    border-top: 2px solid var(--border);
}

#newsModal .btn {
    padding: 11px 24px;
    border-radius: var(--r2);
    font-size: 14px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: all 0.25s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    letter-spacing: 0.3px;
}

#newsModal .btn-primary {
    background: linear-gradient(135deg, var(--sky) 0%, var(--sky-h) 100%);
    color: white;
    border: 1px solid rgba(2, 132, 199, 0.2);
}

#newsModal .btn-primary:hover {
    background: linear-gradient(135deg, var(--sky-h) 0%, var(--sky-h) 100%);
    box-shadow: 0 6px 16px rgba(2, 132, 199, 0.35);
    transform: translateY(-2px);
}

#newsModal .btn-primary:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(2, 132, 199, 0.3);
}

#newsModal .btn-secondary {
    background: var(--card);
    color: var(--txt2);
    border: 2px solid var(--border);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

#newsModal .btn-secondary:hover {
    background: var(--page);
    border-color: var(--txt3);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

#newsModal .btn-secondary:active {
    background: var(--page);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

#newsModal .ql-toolbar {
    border: 2px solid var(--sky) !important;
    border-bottom: 1px solid var(--sky) !important;
    border-radius: var(--r2) 8px 0 0;
    background: var(--page);
}

#newsModal .ql-container {
    border: 2px solid var(--sky) !important;
    border-top: none !important;
    border-radius: 0 0 8px 8px;
    font-size: 14px;
    font-family: inherit;
}

#newsModal .ql-editor {
    min-height: 250px;
}

#newsModal .ql-editor:focus {
    outline: none;
}

#newsModal hr {
    margin: 25px 0;
    border: none;
    border-top: 2px solid var(--border);
}

#newsModal h3 {
    margin: 0 0 20px 0;
    color: var(--sky);
    font-size: 16px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 10px;
}

#newsModal h3::before {
    content: '🔍';
    font-size: 18px;
}

.seo-form {
background: var(--card);
border-radius: var(--r1);
padding: 32px;
box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.form-group label {
display: block;
font-weight: 600;
margin-bottom: 8px;
color: var(--txt);
font-size: 14px;
}

.form-group label .hint {
font-weight: 400;
color: var(--txt3);
font-size: 13px;
}

.form-group input[type="text"],

.form-group input[type="text"]:focus,
.form-group textarea:focus {
outline: none;
border-color: var(--sky);
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.form-group textarea {
min-height: 100px;
resize: vertical;
}

.char-counter {
font-size: 12px;
color: var(--txt3);
margin-top: 4px;
text-align: right;
}

.char-counter.warning {
color: var(--am);
}

.char-counter.error {
color: var(--rose);
}

.seo-preview {
background: var(--page);
border: 1px solid var(--border);
border-radius: var(--r2);
padding: 20px;
margin-top: 32px;
}

.seo-preview h3 {
font-size: 16px;
margin-bottom: 16px;
color: var(--txt2);
}

.preview-title {
color: var(--ind);
font-size: 20px;
font-weight: 400;
margin-bottom: 4px;
cursor: pointer;
}

.preview-url {
color: var(--em);
font-size: 14px;
margin-bottom: 4px;
}

.preview-description {
color: var(--txt2);
font-size: 14px;
line-height: 1.58;
}

.btn-save {
background: var(--sky);
color: white;
padding: 12px 24px;
border: none;
border-radius: var(--r2);
font-size: 15px;
font-weight: 600;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 8px;
transition: background 0.2s;
}

.btn-save:hover {
background: var(--sky);
}

.page-section {
margin-top: 32px;
padding-top: 32px;
border-top: 2px solid var(--border);
}

.page-section:first-of-type {
margin-top: 0;
padding-top: 0;
border-top: none;
}

.page-section h3 {
margin: 0 0 20px;
font-size: 18px;
font-weight: 700;
color: var(--txt);
display: flex;
align-items: center;
gap: 10px;
}

.page-section h3 i {
color: var(--primary-teal);
}

/* ═══════════════════════════════════════════════
   SEO Settings — Tab Navigation
   ═══════════════════════════════════════════════ */

.seo-tabs-nav {
    display: flex;
    gap: 4px;
    background: var(--page);
    border: 1px solid var(--border);
    border-radius: var(--r1);
    padding: 5px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.seo-tab-btn {
    flex: 1;
    min-width: 160px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 18px;
    background: transparent;
    border: none;
    border-radius: var(--r2);
    font-size: .875rem;
    font-weight: 600;
    color: var(--txt2);
    cursor: pointer;
    transition: background .18s, color .18s, box-shadow .18s;
    white-space: nowrap;
}

.seo-tab-btn:hover {
    background: var(--card);
    color: var(--txt);
}

.seo-tab-btn.active {
    background: var(--card);
    color: var(--sky-h);
    box-shadow: 0 1px 6px rgba(0,0,0,.08);
}

.seo-tab-btn i { font-size: 13px; }

.seo-tab-panel {
    display: none;
}

.seo-tab-panel.active {
    display: block;
}

/* Отступ сверху для первого блока внутри таб-панели */

.seo-tab-panel > .page-section:first-of-type {
    padding-top: 24px;
}

.security-card {
background: var(--card);
padding: 24px;
border-radius: var(--r1);
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
margin-bottom: 24px;
}

.security-header {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 20px;
}

.security-header i {
font-size: 24px;
color: var(--primary-teal);
}

.security-header h2 {
margin: 0;
font-size: 20px;
color: var(--txt);
}

.snapshot-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 16px;
margin-top: 20px;
}

.snapshot-item {
background: var(--page);
padding: 16px;
border-radius: var(--r2);
border: 1px solid var(--border);
transition: all 0.3s;
}

.snapshot-item:hover {
border-color: var(--primary-teal);
box-shadow: 0 4px 12px rgba(2, 132, 199, 0.1);
}

.snapshot-meta {
display: flex;
flex-direction: column;
gap: 8px;
font-size: 14px;
color: var(--txt3);
}

.snapshot-meta strong {
color: var(--txt);
}

.snapshot-actions {
display: flex;
gap: 8px;
margin-top: 12px;
}

.btn-small {
padding: 8px 16px;
font-size: 13px;
border-radius: var(--r3);
border: none;
cursor: pointer;
transition: all 0.3s;
text-decoration: none;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
height: 36px;
line-height: 1;
font-weight: 500;
white-space: nowrap;
box-sizing: border-box;
}

.btn-view {
background: linear-gradient(135deg, var(--sky) 0%, var(--sky) 100%);
color: white;
}

.btn-view:hover {
background: linear-gradient(135deg, var(--sky) 0%, var(--sky-h) 100%);
transform: translateY(-2px);
}

.btn-delete {
background: linear-gradient(135deg, var(--rose) 0%, var(--rose) 100%);
color: white;
}

.btn-delete:hover {
background: linear-gradient(135deg, var(--rose) 0%, var(--rose) 100%);
transform: translateY(-2px);
}

.changes-table {
width: 100%;
border-collapse: collapse;
margin-top: 16px;
}

.changes-table th {
background: var(--page);
padding: 12px;
text-align: left;
font-weight: 600;
color: var(--txt2);
border-bottom: 2px solid var(--border);
}

.changes-table td {
padding: 12px;
border-bottom: 1px solid var(--border);
color: var(--txt3);
}

.changes-table tr:hover {
background: var(--page);
}

.create-snapshot-form {
background: linear-gradient(135deg, var(--sky) 0%, var(--sky-h) 100%);
padding: 24px;
border-radius: var(--r1);
margin-bottom: 24px;
}

.create-snapshot-form h3 {
color: white;
margin: 0 0 16px 0;
display: flex;
align-items: center;
gap: 10px;
}

.form-group-inline {
display: flex;
gap: 12px;
align-items: flex-end;
}

.form-group-inline input {
flex: 1;
padding: 12px;
border: none;
border-radius: var(--r2);
font-size: 14px;
}

.btn-create {
background: var(--card);
color: var(--primary-teal);
padding: 12px 24px;
border: none;
border-radius: var(--r2);
font-weight: 600;
cursor: pointer;
display: flex;
align-items: center;
gap: 8px;
transition: all 0.3s;
}

.btn-create:hover {
background: var(--sky-ll);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(255, 255, 255, 0.3);
}

.status-badge {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 12px;
border-radius: var(--r1);
font-size: 12px;
font-weight: 600;
}

.status-completed {
background: var(--sky-l);
color: var(--em);
}

.status-scanning {
background: var(--status-warning-light);
color: var(--am);
}

.status-error {
background: var(--status-error-light);
color: var(--rose);
}

.empty-state {
text-align: center;
padding: 40px;
color: var(--txt3);
}

.empty-state i {
font-size: 48px;
margin-bottom: 16px;
opacity: 0.5;
}

.description-box {
background: linear-gradient(135deg, var(--sky-ll) 0%, var(--sky-ll) 100%);
border-left: 4px solid var(--primary-teal);
padding: 16px 20px;
border-radius: var(--r2);
color: var(--txt);
display: flex;
align-items: center;
gap: 12px;
}

.description-box i {
color: var(--primary-teal);
font-size: 18px;
}

.description-box strong {
color: var(--primary-teal);
margin-right: 6px;
}

.file-table {
width: 100%;
border-collapse: collapse;
}

.file-table thead {
background: rgba(59, 130, 246, 0.05);
border-bottom: 2px solid var(--border);
}

.file-table th {
padding: 12px 16px;
text-align: left;
font-weight: 600;
font-size: 12px;
color: var(--txt3);
text-transform: uppercase;
letter-spacing: 0.05em;
}

.file-table td {
padding: 12px 16px;
border-bottom: 1px solid var(--border);
font-size: 14px;
color: var(--txt);
}

.file-table tbody tr {
transition: background-color 0.15s ease;
}

.file-table tbody tr:hover {
background: rgba(2, 132, 199, 0.03);
}

.file-path {
font-family: 'Courier New', monospace;
font-size: 13px;
color: var(--txt2);
}

.hash-value {
font-family: 'Courier New', monospace;
font-size: 12px;
color: var(--txt3);
}

.badge-change {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 10px;
border-radius: var(--r3);
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
}

.badge-new {
background: var(--status-success-light);
color: var(--em);
}

.badge-modified {
background: var(--status-warning-light);
color: var(--am);
}

.badge-deleted {
background: var(--status-error-light);
color: var(--rose);
}

.change-row.new {
background: rgba(16, 185, 129, 0.02);
}

.change-row.modified {
background: rgba(245, 158, 11, 0.02);
}

.change-row.deleted {
background: rgba(239, 68, 68, 0.02);
}

.stat-box {
background: linear-gradient(135deg, var(--primary-teal) 0%, var(--sky-h) 100%);
color: white;
padding: 16px;
border-radius: var(--r2);
text-align: center;
}

.stat-box.warning {
background: linear-gradient(135deg, var(--am) 0%, var(--am) 100%);
}

.stat-box.danger {
background: linear-gradient(135deg, var(--rose) 0%, var(--rose) 100%);
}

.stat-box .number {
font-size: 32px;
font-weight: 700;
margin-bottom: 4px;
}

.stat-box .label {
font-size: 13px;
opacity: 0.9;
}

.directory-group {
margin-bottom: 30px;
}

.directory-header {
padding: 12px 16px;
background: linear-gradient(135deg, var(--sky) 0%, var(--sky-h) 100%);
color: white;
border-radius: var(--r2) 8px 0 0;
font-weight: 600;
display: flex;
align-items: center;
gap: 10px;
}

.btn-back {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 20px;
background: var(--border);
color: var(--txt2);
text-decoration: none;
border-radius: var(--r2);
font-weight: 500;
transition: all 0.3s;
}

.btn-back:hover {
background: var(--border);
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
    width: 100%;
    box-sizing: border-box;
}

.stat-card {
    background: var(--card);
    padding: 20px;
    border-radius: var(--r1);
    border: 1.5px solid var(--border);
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
    box-sizing: border-box;
    width: 100%;
}

.stat-value {
    font-size: 32px;
    font-weight: 700;
    color: var(--txt);
    margin-bottom: 4px;
}

.stat-label {
    font-size: 14px;
    color: var(--txt3);
}

.error-type-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: var(--r3);
    font-size: 12px;
    font-weight: 600;
}

.error-type-E_ERROR,
.error-type-E_PARSE,
.error-type-Exception { background: var(--status-error-light); color: var(--rose); }

.error-type-E_WARNING { background: var(--status-warning-light); color: var(--am); }

.error-type-E_NOTICE,
.error-type-E_DEPRECATED { background: var(--sky-l); color: var(--sky); }

.error-details {
    background: var(--page);
    padding: 12px;
    border-radius: var(--r3);
    margin-top: 8px;
    font-size: 13px;
    font-family: 'Courier New', monospace;
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 300px;
    overflow-y: auto;
}

.filter-bar {
    background: var(--card);
    padding: 20px;
    border-radius: var(--r1);
    margin-bottom: 20px;
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: flex-end;
}

.filter-group {
    flex: 1;
    min-width: 200px;
}

.filter-group label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--txt2);
    margin-bottom: 8px;
}

.filter-group select,
.filter-group input {
    width: 100%;
    height: 44px;
    padding: 10px 14px;
    border: 2px solid var(--border);
    border-radius: var(--r2);
    font-size: 14px;
    background: var(--card);
    transition: all 0.2s;
    box-shadow: none;
    color: var(--txt2);
    font-family: inherit;
}

.filter-group select:focus,
.filter-group input:focus {
    outline: none;
    border-color: var(--sky);
    box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.1);
}

.filter-group select:hover,
.filter-group input:hover {
    border-color: var(--txt3);
}

/* Button group inside filters — match input height, align bottom */
.filter-group .btn {
    height: 44px;
    padding: 0 20px;
    box-sizing: border-box;
    font-size: 14px;
}
.filter-group:last-child:has(.btn) {
    display: flex;
    gap: 8px;
    align-items: flex-end;
}

.filter-group input[type="date"] {
    cursor: pointer;
    padding-right: 10px;
}

.filter-group input[type="date"]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: 0.7;
    padding: 5px;
    border-radius: 4px;
}

.filter-group input[type="date"]::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
    background-color: rgba(2, 132, 199, 0.1);
}

.filter-group input::placeholder {
    color: var(--txt3);
}

.tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
    border-bottom: 2px solid var(--border);
}

.tab {
    padding: 12px 24px;
    background: var(--card);
    border: none;
    border-radius: var(--r2) 8px 0 0;
    cursor: pointer;
    font-size: 15px;
    font-weight: 600;
    color: var(--txt3);
    position: relative;
    transition: all 0.2s;
}

.tab:hover {
    background: var(--page);
}

.tab.active {
    color: var(--sky);
    background: var(--card);
}

.tab.active::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--sky);
}

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}

.apache-log {
    background: var(--txt);
    color: var(--page);
    padding: 16px;
    border-radius: var(--r2);
    font-family: 'Courier New', monospace;
    font-size: 12px;
    max-height: 600px;
    overflow-y: auto;
    line-height: 1.6;
}

.apache-log-line {
    padding: 2px 0;
    border-bottom: 1px solid var(--txt2);
}

.expand-btn {
    background: none;
    border: none;
    color: var(--sky);
    cursor: pointer;
    font-size: 12px;
    padding: 4px 8px;
    margin-top: 4px;
}

.expand-btn:hover {
    text-decoration: underline;
}

.dashboard-container {
    padding: 24px;
}

.alert-danger {
    background: rgba(239, 68, 68, 0.1);
    color: var(--rose);
    border-left: 4px solid var(--rose);
    padding: 16px 20px;
    border-radius: var(--r1);
    margin-bottom: 20px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
}

.row {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -12px;
}

.col-md-6 {
    flex: 0 0 50%;
    max-width: 50%;
    padding: 0 12px;
}

.mb-3 {
    margin-bottom: 1rem;
}

.mb-4 {
    margin-bottom: 1.5rem;
}

.mt-4 {
    margin-top: 1.5rem;
}

.py-5 {
    padding-top: 3rem;
    padding-bottom: 3rem;
}

.text-center {
    text-align: center;
}

.form-check {
    display: flex;
    align-items: center;
    gap: 8px;
}

.form-check-input {
    width: 20px;
    height: 20px;
    cursor: pointer;
    border: 2px solid var(--sky);
    border-radius: 4px;
}

.form-check-label {
    cursor: pointer;
    font-weight: 600;
    color: var(--txt2);
    font-size: 14px;
}

.table {
    width: 100%;
    border-collapse: collapse;
}

.table thead {
    background: linear-gradient(135deg, rgba(2, 132, 199, 0.05) 0%, rgba(2, 132, 199, 0.1) 100%);
}

.table th {
    padding: 16px;
    text-align: left;
    font-weight: 700;
    color: var(--txt);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 2px solid rgba(2, 132, 199, 0.2);
}

.table td {
    padding: 16px;
    border-bottom: 1px solid var(--border);
    color: var(--txt);
    font-size: 14px;
}

.table tbody tr:hover {
    background: rgba(2, 132, 199, 0.03);
}

.table-hover tbody tr {
    transition: background 0.2s ease;
}

.api-key-display {
    font-family: 'Courier New', monospace;
    background: var(--page);
    padding: 6px 10px;
    border-radius: var(--r3);
    font-size: 13px;
    color: var(--txt);
}

.toggle-key {
    margin-left: 8px;
    padding: 4px 10px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--r3);
    cursor: pointer;
    font-size: 11px;
    transition: all 0.2s;
    color: var(--txt3);
}

.toggle-key:hover {
    background: var(--page);
    border-color: var(--sky);
    color: var(--sky);
}

.badge-success {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.15) 0%, rgba(16, 185, 129, 0.25) 100%);
    color: var(--em);
}

.badge-danger {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.15) 0%, rgba(239, 68, 68, 0.25) 100%);
    color: var(--rose);
}

.form-control, .form-select {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid var(--border);
    border-radius: var(--r2);
    font-size: 14px;
    font-family: var(--font-body);
    transition: all 0.3s ease;
    background: var(--card);
    color: var(--txt);
    box-sizing: border-box;
}

.form-control:focus, .form-select:focus {
    outline: none;
    border-color: var(--sky);
    box-shadow: 0 0 0 4px rgba(2, 132, 199, 0.1);
}

.form-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2314b8a6' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 36px;
    appearance: none;
}

/* ==========================================
   TARIFF PAGE STYLES - Стили для страницы тарифов
   ========================================== */

.card {
    background: var(--card);
    border-radius: var(--r1);
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    overflow: hidden;
    margin-bottom: 24px;
}

.card-header {
    padding: 24px 30px;
    background: linear-gradient(135deg, var(--sky) 0%, var(--sky-h) 100%);
    border-bottom: 2px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.card-header h2 {
    margin: 0 0 6px 0;
    font-size: 20px;
    font-weight: 700;
    color: white;
}

.card-header p {
    margin: 0;
    font-size: 14px;
    color: var(--txt3);
}

.card-body {
    padding: 30px;
}

/* Стили для input с баллами - переопределение inline стилей */

.data-table input[type="number"],
input[name*="points_cost"] {
    color: var(--txt) !important;
    background: var(--card) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
}

.data-table input[type="number"]:focus,
input[name*="points_cost"]:focus {
    outline: none !important;
    border-color: var(--sky) !important;
    box-shadow: 0 0 0 3px rgba(20,184,166,0.1) !important;
}

.text-muted { color: var(--txt3); }
.text-danger { color: var(--rose); font-weight: 500; }
.text-success { color: var(--em); font-weight: 500; }
.text-teal { color: var(--teal); }
.text-info { color: #3b82f6; }

.table-container {
    background: var(--card);
    border-radius: var(--r1);
    overflow-x: auto;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

/* ── Data table — desktop ── */
.data-table { width: 100%; border-collapse: collapse; }

.data-table thead th {
    background: var(--page);
    padding: 12px 14px;
    font-size: 12px;
    font-weight: 700;
    color: var(--txt2);
    text-transform: uppercase;
    letter-spacing: .4px;
    border-bottom: 2px solid var(--border);
    white-space: nowrap;
}

.data-table tbody tr {
    border-bottom: 1px solid var(--border);
    transition: background .15s;
}

.data-table tbody tr:last-child { border-bottom: none; }

.data-table tbody tr:hover { background: var(--sky-ll); }

.data-table tbody td {
    padding: 14px 14px;
    font-size: 14px;
    color: var(--txt);
    vertical-align: middle;
    line-height: 1.5;
}

.data-table .table-link {
    color: var(--sky);
    font-weight: 600;
    text-decoration: none;
}
.data-table .table-link:hover { color: var(--sky-h); text-decoration: underline; }

.data-table .company-link {
    color: var(--sky);
    font-weight: 600;
    text-decoration: none;
}
.data-table .company-link:hover { color: var(--sky-h); }

.data-table .badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    border-radius: var(--r3);
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}
.data-table .badge-primary   { background: rgba(99,102,241,.12); color: var(--ind); }
.data-table .badge-info      { background: rgba(6,182,212,.12);  color: var(--teal); }
.data-table .badge-success   { background: rgba(16,185,129,.12); color: var(--em); }
.data-table .badge-danger    { background: rgba(239,68,68,.12);  color: var(--rose); }
.data-table .badge-warning   { background: rgba(245,158,11,.12); color: var(--am); }
.data-table .badge-secondary { background: rgba(107,114,128,.12); color: var(--txt3); }

.data-table .action-buttons {
    display: flex;
    gap: 6px;
    justify-content: center;
}

.data-table .btn-icon {
    width: 34px; height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    border: 1.5px solid var(--border);
    background: var(--card);
    color: var(--txt2);
    font-size: 14px;
    cursor: pointer;
    transition: all .15s;
}
.data-table .btn-icon:hover {
    background: var(--sky);
    color: #fff;
    border-color: var(--sky);
}
.data-table .btn-icon.btn-danger {
    color: var(--rose);
    border-color: rgba(239,68,68,.25);
}
.data-table .btn-icon.btn-danger:hover {
    background: var(--rose);
    color: #fff;
    border-color: var(--rose);
}

/* Frozen row */
.data-table tr.row-frozen {
    background: rgba(245,158,11,.06);
    border-left: 3px solid var(--am);
}
.data-table tr.row-frozen:hover { background: rgba(245,158,11,.10); }

/* Compact admin/frozen notes inside table */
.data-table .table-note {
    margin-top: 8px;
    padding: 8px 10px;
    border-radius: 6px;
    font-size: 12px;
    line-height: 1.45;
}
.data-table .table-note--frozen {
    background: rgba(245,158,11,.08);
    border-left: 3px solid var(--am);
}
.data-table .table-note--frozen strong { color: var(--am); }
.data-table .table-note--frozen div { color: #92400e; }
.data-table .table-note--admin {
    background: rgba(245,158,11,.06);
    border-left: 3px solid var(--am);
}
.data-table .table-note--admin strong { color: var(--am); font-size: 11px; text-transform: uppercase; letter-spacing: .3px; }
.data-table .table-note--admin div { color: #92400e; margin-top: 2px; }

/* Frozen badge (small inline) */
.data-table .badge-frozen {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: var(--r3);
    font-size: 11px;
    font-weight: 700;
    background: var(--am);
    color: #fff;
    margin-top: 4px;
}

/* ── Table column alignment ── */
.data-table thead th:nth-child(1),
.data-table tbody td:nth-child(1) { text-align: center; width: 50px; }

.data-table thead th:nth-child(n+4),
.data-table tbody td:nth-child(n+4) { text-align: center; }

.data-table tbody td:nth-child(5) strong { color: var(--em); font-weight: 700; }

/* ── Table column sizing ── */
.data-table .th-wide { min-width: 260px; }
.data-table .th-budget { min-width: 140px; }

.data-table .td-icons {
    white-space: nowrap;
}

.td-icons span {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-right: 10px;
    font-size: 13px;
    font-weight: 600;
    color: var(--txt2);
    cursor: default;
}

.td-icons span:last-child { margin-right: 0; }

.td-icons i {
    font-size: 12px;
}

/* ── Listing page shared utility classes ── */

.section-header {
    padding: 20px 30px;
    background: var(--card);
    border-bottom: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.section-header h2 {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
}
.section-count {
    margin: 5px 0 0;
    color: var(--txt3);
    font-size: 14px;
}

.filter-label {
    display: block;
    margin-bottom: 10px;
    font-size: 13px;
    font-weight: 600;
    color: var(--txt);
}
.filter-buttons {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.filter-buttons .btn {
    padding: 7px 16px; font-size: 13px; gap: 6px;
}

.empty-state {
    text-align: center;
    padding: 60px 20px;
    background: var(--card);
}
.empty-state i {
    font-size: 64px;
    color: var(--border);
    margin-bottom: 20px;
    display: block;
}
.empty-state h3 {
    color: var(--txt3);
    margin-bottom: 10px;
}
.empty-state p {
    color: var(--txt3);
    margin-bottom: 30px;
}

.table-thumb {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: 6px;
}
.table-thumb-placeholder {
    width: 48px;
    height: 48px;
    border-radius: 6px;
    background: var(--page);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--txt3);
}
.table-external-link {
    margin-left: 6px;
    color: var(--teal);
    font-size: 11px;
}
.table-title-row {
    display: flex;
    align-items: center;
    gap: 6px;
}
.table-meta {
    font-size: 11px;
    color: var(--txt3);
}
.table-meta i {
    font-size: 10px;
}
.table-date {
    font-size: 12px;
}

.text-warning { color: #f59e0b; }
.text-danger  { color: var(--rose); }
.text-muted   { color: var(--txt3); font-size: 13px; }

.inline-form { display: inline; }

.tariff-plans-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
}

.tariff-plan-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--r1);
    padding: 24px;
    position: relative;
    transition: all 0.3s;
}

.tariff-plan-card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    transform: translateY(-2px);
}

.tariff-plan-card.inactive {
    opacity: 0.6;
}

.tariff-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    padding: 4px 12px;
    border-radius: var(--r1);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
}

.tariff-badge.active {
    background: var(--sky-l);
    color: var(--em);
}

.tariff-badge.inactive {
    background: var(--status-error-light);
    color: var(--rose);
}

.tariff-name {
    font-size: 20px;
    font-weight: 700;
    color: var(--txt);
    margin-bottom: 12px;
}

.tariff-points {
    font-size: 32px;
    font-weight: 800;
    color: var(--sky);
    margin-bottom: 8px;
}

.tariff-points span {
    font-size: 14px;
    color: var(--txt3);
    font-weight: 500;
}

.tariff-price {
    font-size: 24px;
    font-weight: 700;
    color: var(--txt2);
    margin-bottom: 12px;
}

.tariff-discount {
    display: inline-block;
    background: linear-gradient(135deg, var(--am) 0%, var(--am) 100%);
    color: white;
    padding: 4px 10px;
    border-radius: var(--r3);
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 12px;
}

.tariff-description {
    color: var(--txt3);
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 16px;
    min-height: 40px;
}

.tariff-actions {
    display: flex;
    gap: 8px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}

.tariff-actions .btn {
    flex: 1;
}

.section-header {
    margin-bottom: 20px;
}

.section-header h2 {
    font-size: 22px;
    margin-bottom: 6px;
}

.section-description {
    color: var(--txt3);
    font-size: 14px;
    margin: 0;
}

.toggle-switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 26px;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--border);
    transition: .3s;
    border-radius: 26px;
}

.toggle-slider:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 3px;
    bottom: 3px;
    background-color: var(--card);
    transition: .3s;
    border-radius: 50%;
}

input:checked + .toggle-slider {
    background-color: var(--sky);
}

input:checked + .toggle-slider:before {
    transform: translateX(24px);
}

/* ==========================================
   TARIFF MODALS STYLES - Уникальные стили для модальных окон тарифов
   ========================================== */

#tariffModal.modal,
#deleteModal.modal {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(0, 0, 0, 0.6) !important;
    backdrop-filter: blur(4px) !important;
    z-index: 10000 !important;
    align-items: center !important;
    justify-content: center !important;
    animation: fadeIn 0.3s ease !important;
    display: none !important;
}

#tariffModal.modal.active,
#deleteModal.modal.active {
    display: flex !important;
}

/* Модальное окно создания/редактирования тарифа */

#tariffModal.modal .modal-content {
    background: var(--card) !important;
    border-radius: var(--r1) !important;
    max-width: 750px !important;
    width: 95% !important;
    max-height: 92vh !important;
    display: flex !important;
    flex-direction: column !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
    overflow: hidden !important;
    animation: slideUp 0.3s ease !important;
}

#tariffModal.modal .modal-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 32px 40px !important;
    background: linear-gradient(135deg, var(--sky) 0%, var(--sky-h) 100%) !important;
    border-bottom: none !important;
    border-radius: var(--r1) 20px 0 0 !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1) !important;
}

#tariffModal.modal .modal-header h2 {
    font-size: 24px !important;
    font-weight: 700 !important;
    color: white !important;
    margin: 0 !important;
    letter-spacing: -0.5px !important;
    font-family: 'Inter', -apple-system, system-ui, sans-serif !important;
}

#tariffModal.modal .modal-close {
    background: rgba(255, 255, 255, 0.25) !important;
    border: none !important;
    font-size: 32px !important;
    color: white !important;
    cursor: pointer !important;
    padding: 0 !important;
    width: 42px !important;
    height: 42px !important;
    border-radius: var(--r1) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    transition: all 0.2s ease !important;
}

#tariffModal.modal .modal-close:hover {
    background: rgba(255, 255, 255, 0.35) !important;
    transform: rotate(90deg) !important;
}

#tariffModal.modal #tariffForm {
    display: block !important;
    padding: 40px 40px 36px 40px !important;
    overflow-y: auto !important;
    max-height: calc(92vh - 110px) !important;
    background: var(--card) !important;
    grid-template-columns: none !important;
    gap: 0 !important;
}

#tariffModal.modal #tariffForm .form-group {
    margin-bottom: 28px !important;
}

#tariffModal.modal #tariffForm .form-row .form-group {
    margin-bottom: 0 !important;
}

#tariffModal.modal #tariffForm label {
    display: block !important;
    margin-bottom: 12px !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    color: var(--txt) !important;
    line-height: 1.5 !important;
    font-family: 'Inter', -apple-system, system-ui, sans-serif !important;
}

#tariffModal.modal #tariffForm input[type="text"],
#tariffModal.modal #tariffForm input[type="number"] {
    width: 100% !important;
    padding: 16px 20px !important;
    border: 2px solid var(--border) !important;
    border-radius: var(--r1) !important;
    font-size: 16px !important;
    color: var(--txt) !important;
    background: var(--card) !important;
    box-sizing: border-box !important;
    outline: none !important;
    height: 56px !important;
    font-family: 'Inter', -apple-system, system-ui, sans-serif !important;
    transition: all 0.2s ease !important;
}

#tariffModal.modal #tariffForm input:focus {
    border-color: var(--sky) !important;
    box-shadow: 0 0 0 4px rgba(2, 132, 199, 0.1) !important;
}

#tariffModal.modal #tariffForm input:hover {
    border-color: var(--txt3) !important;
}

#tariffModal.modal #tariffForm textarea {
    width: 100% !important;
    padding: 16px 20px !important;
    border: 2px solid var(--border) !important;
    border-radius: var(--r1) !important;
    font-size: 16px !important;
    color: var(--txt) !important;
    background: var(--card) !important;
    min-height: 120px !important;
    resize: vertical !important;
    font-family: 'Inter', -apple-system, system-ui, sans-serif !important;
    line-height: 1.6 !important;
    box-sizing: border-box !important;
    outline: none !important;
    transition: all 0.2s ease !important;
}

#tariffModal.modal #tariffForm textarea:focus {
    border-color: var(--sky) !important;
    box-shadow: 0 0 0 4px rgba(2, 132, 199, 0.1) !important;
}

#tariffModal.modal #tariffForm textarea:hover {
    border-color: var(--txt3) !important;
}

#tariffModal.modal #tariffForm .form-row {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 24px !important;
    margin-bottom: 28px !important;
}

#tariffModal.modal #tariffForm .checkbox-label {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    cursor: pointer !important;
    padding: 18px 24px !important;
    background: var(--page) !important;
    border: 2px solid var(--border) !important;
    border-radius: var(--r1) !important;
    transition: all 0.2s ease !important;
}

#tariffModal.modal #tariffForm .checkbox-label:hover {
    background: var(--page) !important;
    border-color: var(--border) !important;
}

#tariffModal.modal #tariffForm .checkbox-label input[type="checkbox"] {
    width: 24px !important;
    height: 24px !important;
    cursor: pointer !important;
    accent-color: var(--sky) !important;
}

#tariffModal.modal #tariffForm .checkbox-label span {
    font-size: 16px !important;
    font-weight: 600 !important;
    color: var(--txt) !important;
    font-family: 'Inter', -apple-system, system-ui, sans-serif !important;
}

#tariffModal.modal #tariffForm .modal-actions {
    display: flex !important;
    gap: 16px !important;
    justify-content: flex-end !important;
    padding-top: 28px !important;
    margin-top: 8px !important;
    border-top: 2px solid var(--border) !important;
}

#tariffModal.modal #tariffForm .btn-secondary {
    padding: 16px 36px !important;
    border: 2px solid var(--border) !important;
    background: var(--card) !important;
    border-radius: var(--r1) !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    color: var(--txt3) !important;
    cursor: pointer !important;
    height: 56px !important;
    min-width: 140px !important;
    font-family: 'Inter', -apple-system, system-ui, sans-serif !important;
    transition: all 0.2s ease !important;
}

#tariffModal.modal #tariffForm .btn-secondary:hover {
    background: var(--page) !important;
    border-color: var(--txt3) !important;
    color: var(--txt2) !important;
}

#tariffModal.modal #tariffForm .btn-primary {
    padding: 16px 36px !important;
    background: linear-gradient(135deg, var(--sky) 0%, var(--sky-h) 100%) !important;
    border: none !important;
    border-radius: var(--r1) !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    color: white !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    box-shadow: 0 4px 8px rgba(2, 132, 199, 0.25) !important;
    height: 56px !important;
    min-width: 160px !important;
    justify-content: center !important;
    font-family: 'Inter', -apple-system, system-ui, sans-serif !important;
    transition: all 0.2s ease !important;
}

#tariffModal.modal #tariffForm .btn-primary:hover {
    background: linear-gradient(135deg, var(--sky-h) 0%, var(--sky-h) 100%) !important;
    box-shadow: 0 6px 12px rgba(2, 132, 199, 0.35) !important;
    transform: translateY(-1px) !important;
}

#deleteModal.modal .modal-content {
    background: var(--card) !important;
    border-radius: var(--r1) !important;
    max-width: 520px !important;
    width: 95% !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
    overflow: hidden !important;
    animation: slideUp 0.3s ease !important;
}

#deleteModal.modal .modal-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 32px 40px !important;
    background: linear-gradient(135deg, var(--sky) 0%, var(--sky-h) 100%) !important;
    border-bottom: none !important;
    border-radius: var(--r1) 20px 0 0 !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1) !important;
}

#deleteModal.modal .modal-header h2 {
    font-size: 24px !important;
    font-weight: 700 !important;
    color: white !important;
    margin: 0 !important;
    letter-spacing: -0.5px !important;
    font-family: 'Inter', -apple-system, system-ui, sans-serif !important;
}

#deleteModal.modal .modal-close {
    background: rgba(255, 255, 255, 0.25) !important;
    border: none !important;
    font-size: 32px !important;
    color: white !important;
    cursor: pointer !important;
    padding: 0 !important;
    width: 42px !important;
    height: 42px !important;
    border-radius: var(--r1) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    transition: all 0.2s ease !important;
}

#deleteModal.modal .modal-close:hover {
    background: rgba(255, 255, 255, 0.35) !important;
    transform: rotate(90deg) !important;
}

#deleteModal.modal .btn-secondary {
    padding: 16px 36px !important;
    border: 2px solid var(--border) !important;
    background: var(--card) !important;
    border-radius: var(--r1) !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    color: var(--txt3) !important;
    cursor: pointer !important;
    height: 56px !important;
    min-width: 140px !important;
    font-family: 'Inter', -apple-system, system-ui, sans-serif !important;
    transition: all 0.2s ease !important;
}

#deleteModal.modal .btn-secondary:hover {
    background: var(--page) !important;
    border-color: var(--txt3) !important;
    color: var(--txt2) !important;
}

#deleteModal.modal .btn-danger {
    padding: 16px 36px !important;
    background: linear-gradient(135deg, var(--rose) 0%, var(--rose) 100%) !important;
    border: none !important;
    border-radius: var(--r1) !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    color: white !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    box-shadow: 0 4px 8px rgba(239, 68, 68, 0.25) !important;
    height: 56px !important;
    min-width: 160px !important;
    justify-content: center !important;
    font-family: 'Inter', -apple-system, system-ui, sans-serif !important;
    transition: all 0.2s ease !important;
}

#deleteModal.modal .btn-danger:hover {
    background: linear-gradient(135deg, var(--rose) 0%, var(--rose) 100%) !important;
    box-shadow: 0 6px 12px rgba(239, 68, 68, 0.35) !important;
    transform: translateY(-1px) !important;
}

#deleteModal.modal > div:nth-child(2) {
    padding: 40px 40px 36px 40px !important;
    background: var(--card) !important;
}

#deleteModal.modal > div:nth-child(2) p {
    margin: 0 0 32px 0 !important;
    color: var(--txt2) !important;
    font-size: 17px !important;
    line-height: 1.7 !important;
    font-family: 'Inter', -apple-system, system-ui, sans-serif !important;
}

#deleteModal.modal > div:nth-child(2) p span {
    font-weight: 700 !important;
    color: var(--txt) !important;
}

#deleteModal.modal .modal-actions {
    display: flex !important;
    gap: 16px !important;
    justify-content: flex-end !important;
    padding-top: 28px !important;
    border-top: 2px solid var(--border) !important;
}

#tariffModal.modal #tariffForm .form-group:last-of-type {
    margin-bottom: 32px !important;
}

/* ═══════════════════════════════════════════════════════════════
   PORTAL AUTH — Login / Register в стиле Portal 3.0
   ═══════════════════════════════════════════════════════════════ */

.auth-wrap {
  max-width: 460px; margin: 30px auto; padding: 0 16px;
  min-height: calc(100vh - 220px);
  display: flex; flex-direction: column; justify-content: center;
}

.auth-wrap--wide { max-width: 560px; }

.auth-card {
  background: var(--card); border-radius: 14px;
  border: 1px solid var(--border);
  box-shadow: 0 4px 24px rgba(15,22,36,.08);
  overflow: hidden;
}

/* ─── Шапка карточки с градиентом ───────────────────────────── */

.auth-hd {
  background: linear-gradient(135deg, var(--sky-h) 0%, var(--sky-h) 55%, var(--sky) 100%);
  padding: 28px 32px 24px; text-align: center;
}

.auth-hd h1 {
  font-size: 20px; font-weight: 800; color: #fff; margin: 0 0 4px;
  font-family: 'Inter', sans-serif;
}

.auth-hd p {
  font-size: 13px; color: rgba(255,255,255,.7); margin: 0;
  font-family: 'Inter', sans-serif;
}

/* ─── Тело формы ────────────────────────────────────────────── */

.auth-body { padding: 24px 28px 28px; }

/* ─── Алерты ────────────────────────────────────────────────── */

.auth-alert {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 11px 14px; border-radius: var(--r2);
  font-size: 12.5px; line-height: 1.5; margin-bottom: 16px;
  font-family: 'Inter', sans-serif;
}

.auth-alert i { margin-top: 2px; flex-shrink: 0; }

.auth-alert--err { background: var(--status-error-light); color: var(--rose); border: 1px solid var(--status-error-light); }

.auth-alert--warn { background: var(--card)beb; color: var(--am); border: 1px solid var(--status-warning-light); }

.auth-alert--ok { background: var(--status-success-light); color: var(--em); border: 1px solid var(--status-success-light); }

/* ─── Поля формы ────────────────────────────────────────────── */

.auth-body .form-group { margin-bottom: 14px; }

.auth-body label {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600; color: var(--txt2);
  margin-bottom: 5px; font-family: 'Inter', sans-serif;
}

.auth-body label i { font-size: 11px; color: var(--txt2); }

.auth-body input[type="text"],
.auth-body input[type="email"],
.auth-body input[type="password"],
.auth-body input[type="tel"],
.auth-body select {
  width: 100%; padding: 9px 12px;
  border: 1.5px solid var(--border); border-radius: var(--r2);
  font-size: 13px; color: var(--txt);
  font-family: 'Inter', sans-serif;
  background: var(--page); transition: border-color .15s, box-shadow .15s;
  outline: none;
}

.auth-body input:focus,
.auth-body select:focus {
  border-color: var(--sky); box-shadow: 0 0 0 3px rgba(37,99,235,.12);
  background: var(--card);
}

.auth-body input::placeholder { color: var(--txt3); }

.form-row-2col {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}

@media(max-width:520px) {

  .form-row-2col { grid-template-columns: 1fr; }

}

.password-input-wrapper {
  position: relative;
}

.password-input-wrapper input { padding-right: 40px; }

.toggle-password {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  background: none; border: none; cursor: pointer; color: var(--txt3);
  font-size: 14px; padding: 4px;
}

.toggle-password:hover { color: var(--txt2); }

.captcha-wrapper {
  background: var(--sky-ll); border: 1.5px solid var(--sky-l); border-radius: var(--r2);
  padding: 10px 12px; margin-bottom: 6px;
}

.captcha-question {
  font-size: 12px; color: var(--txt2); margin-bottom: 6px;
  font-family: 'Inter', sans-serif;
}

.captcha-question strong {
  font-size: 15px; color: var(--sky-h); margin-left: 4px;
}

.captcha-wrapper input {
  border-color: var(--sky) !important;
}

.form-options {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 16px; font-size: 12px;
  font-family: 'Inter', sans-serif;
}

.checkbox-label {
  display: flex; align-items: center; gap: 6px; color: var(--txt2); cursor: pointer;
}

.checkbox-label input[type="checkbox"] {
  width: 15px; height: 15px; accent-color: var(--sky);
}

.forgot-password { color: var(--sky); font-weight: 600; }

.forgot-password:hover { color: var(--sky-h); text-decoration: underline; }

.auth-btn {
  width: 100%; padding: 11px;
  background: linear-gradient(135deg, var(--sky-h), var(--sky));
  color: #fff; border: none; border-radius: var(--r2);
  font-size: 13.5px; font-weight: 700; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  transition: background .15s, box-shadow .15s;
  font-family: 'Inter', sans-serif;
}

.auth-btn:hover {
  background: linear-gradient(135deg, var(--sky-h), var(--sky-h));
  box-shadow: 0 4px 14px rgba(37,99,235,.3);
}

.auth-divider {
  text-align: center; margin: 18px 0; position: relative;
}

.auth-divider::before {
  content: ''; position: absolute; left: 0; right: 0; top: 50%;
  border-top: 1px solid var(--border);
}

.auth-divider span {
  background: var(--card); padding: 0 14px; position: relative;
  font-size: 11.5px; color: var(--txt3); font-family: 'Inter', sans-serif;
}

.auth-alt {
  text-align: center; font-size: 12.5px; color: var(--txt2);
  font-family: 'Inter', sans-serif;
}

.auth-alt a { color: var(--sky); font-weight: 700; }

.auth-alt a:hover { text-decoration: underline; }

.field-status {
  font-size: 11px; margin-top: 3px; font-family: 'Inter', sans-serif;
}

.field-status.error { color: var(--rose); }

.field-status.success { color: var(--em); }

.modal-overlay {
  position: fixed; inset: 0; background: rgba(15,22,36,.5);
  z-index: 9999; display: none; align-items: center; justify-content: center;
  backdrop-filter: blur(4px);
}

.modal-content {
  background: var(--card); border-radius: 14px; width: 100%; max-width: 440px;
  box-shadow: 0 20px 60px rgba(15,22,36,.2); margin: 16px;
  overflow: hidden;
}

.modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px;
  background: linear-gradient(135deg, var(--sky-h), var(--sky-h));
}

.modal-header h3 {
  font-size: 15px; font-weight: 700; color: #fff; margin: 0;
  display: flex; align-items: center; gap: 8px;
  font-family: 'Inter', sans-serif;
}

.modal-header h3 i { color: var(--sky); }

.modal-close {
  background: rgba(255,255,255,.15); border: none; border-radius: var(--r3);
  width: 30px; height: 30px; color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; transition: background .15s;
}

.modal-close:hover { background: rgba(255,255,255,.25); }

.modal-body { padding: 20px; }

.modal-description {
  font-size: 12.5px; color: var(--txt2); line-height: 1.6; margin-bottom: 16px;
  font-family: 'Inter', sans-serif;
}

.modal-actions {
  display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px;
}

.modal-actions .btn {
  padding: 8px 16px; border-radius: 7px; font-size: 12px; font-weight: 600;
  cursor: pointer; border: none; display: inline-flex; align-items: center; gap: 6px;
  font-family: 'Inter', sans-serif;
}

.modal-actions .btn-secondary { background: var(--page); color: var(--txt2); }

.modal-actions .btn-secondary:hover { background: var(--border); }

.modal-actions .btn-primary { background: var(--sky); color: #fff; }

.modal-actions .btn-primary:hover { background: var(--sky-h); }

.reset-message { padding: 10px 12px; border-radius: 7px; font-size: 12px; margin-top: 12px; font-family: 'Inter', sans-serif; }

.reset-message.success { background: var(--status-success-light); color: var(--em); border: 1px solid var(--status-success-light); }

.reset-message.error { background: var(--status-error-light); color: var(--rose); border: 1px solid var(--status-error-light); }

.login-attempts-warning {
  display: flex; align-items: flex-start; gap: 8px;
  background: var(--card)beb; border: 1px solid var(--status-warning-light); border-radius: var(--r2);
  padding: 10px 12px; margin-bottom: 14px;
  font-size: 12px; color: var(--am); font-family: 'Inter', sans-serif;
}

.login-attempts-warning i { color: var(--am); margin-top: 1px; }

.auth-agree {
  font-size: 11px; color: var(--txt3); line-height: 1.5; margin-top: 14px;
  text-align: center; font-family: 'Inter', sans-serif;
}

.auth-agree a { color: var(--sky); }

#reg-success-overlay {
  position: fixed; inset: 0; background: rgba(15,22,36,.6);
  z-index: 9999; display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(6px);
}

.reg-success-card {
  background: var(--card); border-radius: var(--r1); padding: 40px 36px;
  text-align: center; max-width: 400px; width: 100%; margin: 16px;
  box-shadow: 0 20px 60px rgba(15,22,36,.2);
  font-family: 'Inter', sans-serif;
}

.reg-success-icon {
  width: 64px; height: 64px; border-radius: 50%;
  background: linear-gradient(135deg, var(--em), var(--em));
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 16px; color: #fff; font-size: 28px;
}

.reg-success-card h2 { font-size: 20px; color: var(--txt); margin-bottom: 8px; }

.reg-success-card p { font-size: 13px; color: var(--txt2); margin-bottom: 16px; }

.reg-success-timer { font-size: 12px; color: var(--txt3); }

.reg-success-timer span { font-weight: 700; color: var(--sky); }

/* ── Auth pages — mobile responsive ─────────────────────────── */

@media (max-width: 600px) {
  .auth-wrap { max-width: 100%; margin: 16px auto; padding: 0 10px; min-height: calc(100vh - 160px); }
  .auth-wrap--wide { max-width: 100%; }
  .auth-card { border-radius: 10px; }
  .auth-hd { padding: 20px 18px 16px; }
  .auth-hd h1 { font-size: 17px; }
  .auth-hd p { font-size: 12px; }
  .auth-body { padding: 16px 16px 20px; }
  .auth-body .form-group { margin-bottom: 10px; }
  .auth-body label { font-size: 11px; gap: 5px; margin-bottom: 4px; }
  .auth-body label i { font-size: 10px; }
  .auth-body input[type="text"],
  .auth-body input[type="email"],
  .auth-body input[type="password"],
  .auth-body input[type="tel"],
  .auth-body select { padding: 8px 10px; font-size: 13px; border-radius: 6px; }
  .form-row-2col { grid-template-columns: 1fr; gap: 0; }
  .password-input-wrapper .toggle-password { font-size: 13px; right: 8px; }
  .captcha-wrapper { padding: 8px 10px; }
  .captcha-question { font-size: 11px; }
  .captcha-question strong { font-size: 14px; }
  .form-options { font-size: 11px; margin-bottom: 12px; }
  .checkbox-label input[type="checkbox"] { width: 14px; height: 14px; }
  .auth-btn { padding: 10px; font-size: 13px; border-radius: 7px; }
  .auth-divider { margin: 14px 0; }
  .auth-divider span { font-size: 11px; }
  .auth-alt { font-size: 12px; }
  .auth-agree { font-size: 10px; margin-top: 10px; }
  .auth-alert { padding: 9px 12px; font-size: 11.5px; }
  .login-attempts-warning { padding: 8px 10px; font-size: 11px; }
  .field-status { font-size: 10px; }
  /* Modal */
  .modal-content { max-width: calc(100vw - 24px); margin: 12px; border-radius: 10px; }
  .modal-header { padding: 12px 14px; }
  .modal-header h3 { font-size: 14px; }
  .modal-body { padding: 14px; }
  .modal-description { font-size: 12px; }
  .modal-actions { flex-direction: column; gap: 6px; }
  .modal-actions .btn { width: 100%; justify-content: center; padding: 9px 14px; }
  .reset-message { font-size: 11px; padding: 8px 10px; }
  /* Reg success */
  .reg-success-card { padding: 28px 20px; margin: 12px; }
  .reg-success-icon { width: 52px; height: 52px; font-size: 22px; }
  .reg-success-card h2 { font-size: 17px; }
  .reg-success-card p { font-size: 12px; }
}

@media (max-width: 380px) {
  .auth-wrap { padding: 0 6px; margin: 10px auto; }
  .auth-hd { padding: 16px 14px 14px; }
  .auth-hd h1 { font-size: 15px; }
  .auth-body { padding: 14px 12px 16px; }
  .auth-body input[type="text"],
  .auth-body input[type="email"],
  .auth-body input[type="password"],
  .auth-body input[type="tel"],
  .auth-body select { padding: 7px 9px; font-size: 12px; }
  .auth-btn { padding: 9px; font-size: 12px; }
  .form-options { flex-direction: column; gap: 8px; align-items: flex-start; }
}

/* ── Логотип компании: hover-увеличение ── */

.procedure-logo:hover { transform: scale(1.05); }

.offer-card:hover .procedure-logo { transform: scale(1.1); }

/* ── Зелёная обводка карточек компаний ── */

.offers-main .offer-card { border-color: var(--sky-l); }

.offers-main .offer-card:hover { border-color: var(--sky); box-shadow: 0 16px 48px rgba(20,184,166,.12); }

.companies-hero {
    text-align: center;
    margin-bottom: 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

.companies-hero > div {
    flex: 1;
}

.companies-hero h1 {
    font-size: 3.25rem;
    font-weight: 800;
    background: linear-gradient(135deg, var(--sky) 0%, var(--teal) 50%, var(--vio) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 16px;
    font-family: 'Inter', sans-serif;
    letter-spacing: -1.5px;
    position: relative;
    display: inline-block;
    line-height: 1.2;
}

.companies-hero h1::after {
    content: '';
    position: absolute;
    bottom: -12px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 5px;
    background: linear-gradient(90deg, var(--sky), var(--teal), var(--vio));
    border-radius: 50px;
    box-shadow: 0 4px 15px rgba(2, 132, 199, 0.3);
}

.companies-hero p {
    font-size: 1.125rem;
    color: var(--txt2);
    line-height: 1.8;
    max-width: 700px;
    margin: 0 auto;
    margin-top: 24px;
}

.companies-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 20px;
}

.companies-controls {
    background: var(--card);
    padding: 20px;
    border-radius: var(--r1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

.search-form {
    display: flex;
    gap: 10px;
    flex: 1;
    flex-wrap: wrap;
}

.search-form input[type="text"],

.search-form input[type="text"]:focus,
.search-form select:focus {
    outline: none;
    border-color: var(--sky);
    box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.1);
}

.search-form input[type="text"] {
    flex: 2;
    min-width: 0;
}

.search-form input[type="text"]:nth-child(2),
.search-form input[type="text"]:nth-child(3) {
    flex: 1;
    min-width: 120px;
}

.search-form select {
    flex: 1;
    min-width: 180px;
    max-width: 250px;
}

.search-form button {
    padding: 10px 20px;
    background: linear-gradient(135deg, var(--sky) 0%, var(--teal) 100%);
    color: #fff;
    border: none;
    border-radius: var(--r2);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    height: 42px;
}

.search-form button:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(2, 132, 199, 0.3);
}

.reset-btn {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--status-error-light);
    color: var(--rose);
    border-radius: var(--r2);
    text-decoration: none;
    transition: all 0.3s ease;
}

.reset-btn:hover {
    background: var(--status-error-light);
}

.controls-right {
    display: flex;
    align-items: center;
    gap: 15px;
}

.stat-compact {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: linear-gradient(135deg, var(--sky) 0%, var(--teal) 100%);
    border-radius: var(--r2);
    color: #fff;
    cursor: help;
    transition: all 0.3s ease;
    height: 42px;
}

.stat-compact:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(2, 132, 199, 0.3);
}

.stat-compact i {
    font-size: 16px;
}

.stat-compact span {
    font-size: 16px;
    font-weight: 700;
}

.controls-right select {
    padding: 0 32px 0 12px;
    border: 2px solid var(--sky);
    border-radius: var(--r2);
    font-size: 14px;
    font-weight: 600;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'%3E%3Cpath fill='%2394a3b8' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E") no-repeat right 10px center;
    color: var(--txt2);
    cursor: pointer;
    transition: all 0.3s ease;
    height: 42px;
    box-sizing: border-box;
    appearance: none;
    -webkit-appearance: none;
}

.controls-right select:focus {
    outline: none;
    border-color: var(--sky);
    box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.1);
}

.companies-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 35px;
}

.company-item {
    background: var(--card);
    padding: 24px;
    border-radius: var(--r1);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    transition: all 0.2s ease;
    text-decoration: none;
    color: inherit;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 24px;
    align-items: flex-start;
    position: relative;
    border: 1px solid var(--border);
}

.company-item:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
    border-color: var(--border);
}

.company-commercial .company-item-name {
    color: var(--txt);
}

.company-government .company-item-name {
    color: var(--txt);
}

.company-item-logo {
    width: 160px;
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--r2);
    overflow: hidden;
    transition: all 0.2s ease;
    padding: 20px;
    flex-shrink: 0;
    background: var(--card);
    border: 1px solid var(--border);
}

.company-item:hover .company-item-logo {
    border-color: var(--border);
}

.company-item-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.company-item-logo-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 90px;
    color: var(--txt3);
}

.company-item-content {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.company-item-header {
    margin-bottom: 8px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.company-item-name {
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 6px 0;
    line-height: 1.3;
    color: var(--txt);
}

.company-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    margin-bottom: 12px;
}

.badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    white-space: nowrap;
    transition: all 0.2s ease;
}

.badge i {
    font-size: 9px;
    margin-right: 4px;
}

.badge-premium {
    background: var(--card)beb;
    color: var(--am);
    border: 1px solid var(--am);
}

.badge-government {
    background: var(--sky-ll);
    color: var(--sky-h);
    border: 1px solid var(--sky);
}

.badge-commercial {
    background: var(--status-success-light);
    color: var(--em);
    border: 1px solid var(--em);
}

.badge-category {
    background: var(--sky-ll);
    color: var(--vio);
    border: 1px solid var(--vio);
}

.badge-status-confirmed {
    background: var(--status-success-light);
    color: var(--em);
    border: 1px solid var(--em);
}

.badge-status-active {
    background: var(--status-success-light);
    color: var(--em);
    border: 1px solid var(--em);
}

.badge-status-unconfirmed {
    background: var(--card)beb;
    color: var(--am);
    border: 1px solid var(--am);
}

.badge-status-pending {
    background: var(--card)7ed;
    color: var(--am);
    border: 1px solid var(--am);
}

.badge-status-blocked {
    background: var(--status-error-light);
    color: var(--rose);
    border: 1px solid var(--rose);
}

.company-item-fullname {
    font-size: 10px;
    color: var(--txt);
    font-weight: 700;
    margin: 0 0 12px 0;
    line-height: 1.3;
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

.company-item-description {
    font-size: 14px;
    color: var(--txt);
    line-height: 1.6;
    margin: 0 0 14px 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-weight: 400;
}

.company-item-metadata {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 12px;
    color: var(--txt);
    font-weight: 400;
}

.metadata-item {
    display: inline-flex;
    align-items: flex-start;
    gap: 6px;
}

.metadata-item span {
    white-space: normal;
    word-wrap: break-word;
    word-break: break-word;
    line-height: 1.4;
}

.metadata-item i {
    margin-top: 2px;
    flex-shrink: 0;
    color: var(--txt);
    font-size: 13px;
}

.company-item-right {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    justify-content: center;
}

.company-item-status {
    padding: 6px 14px;
    border-radius: var(--r1);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: all 0.3s ease;
}

.company-item-status i {
    font-size: 10px;
}

.company-item:hover .company-item-status {
    transform: scale(1.05);
}

.status-active {
    background: linear-gradient(135deg, var(--em) 0%, var(--em) 100%);
    color: #fff;
    border: 1px solid var(--em);
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.25);
}

.status-confirmed {
    background: linear-gradient(135deg, var(--em) 0%, var(--em) 100%);
    color: #fff;
    border: 1px solid var(--em);
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.25);
}

.status-unconfirmed {
    background: linear-gradient(135deg, var(--am) 0%, var(--am) 100%);
    color: var(--am);
    border: 1px solid var(--am);
    box-shadow: 0 2px 8px rgba(252, 211, 77, 0.25);
}

.status-pending {
    background: linear-gradient(135deg, var(--am) 0%, var(--am) 100%);
    color: #fff;
    border: 1px solid var(--am);
    box-shadow: 0 2px 8px rgba(251, 146, 60, 0.25);
}

.status-blocked {
    background: linear-gradient(135deg, var(--rose) 0%, var(--rose) 100%);
    color: #fff;
    border: 1px solid var(--rose);
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.25);
}

.company-item-arrow {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--sky) 0%, var(--teal) 100%);
    border-radius: 50%;
    color: #fff;
    font-size: 14px;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(2, 132, 199, 0.2);
}

.company-item:hover .company-item-arrow {
    transform: translateX(4px) scale(1.1);
    box-shadow: 0 4px 12px rgba(2, 132, 199, 0.35);
}

.companies-empty {
    background: var(--card);
    padding: 60px 30px;
    border-radius: 15px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    text-align: center;
}

.companies-empty i {
    font-size: 64px;
    color: var(--border);
    margin-bottom: 15px;
}

.companies-empty h3 {
    font-size: 24px;
    font-weight: 700;
    color: var(--txt);
    margin: 0 0 8px 0;
}

.companies-empty p {
    font-size: 15px;
    color: var(--txt2);
    margin: 0;
}

.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    margin: 35px 0;
    flex-wrap: wrap;
}

.pagination-btn {
    padding: 12px 24px;
    background: var(--card);
    color: var(--sky);
    border: 2px solid var(--sky);
    border-radius: var(--r2);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.pagination-btn:hover:not(.disabled) {
    background: var(--sky);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(2, 132, 199, 0.3);
}

.pagination-btn.disabled {
    opacity: 0.4;
    cursor: not-allowed;
    border-color: var(--border);
    color: var(--txt3);
}

.pagination-numbers {
    display: flex;
    gap: 5px;
    align-items: center;
}

.pagination-link {
    min-width: 42px;
    height: 42px;
    padding: 0 12px;
    background: var(--card);
    color: var(--sky);
    border: 2px solid var(--border);
    border-radius: var(--r2);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pagination-link:hover {
    border-color: var(--sky);
    background: var(--sky);
    color: #fff;
    transform: translateY(-1px);
}

.pagination-link.active {
    background: linear-gradient(135deg, var(--sky) 0%, var(--teal) 100%);
    color: #fff;
    border-color: var(--sky);
    box-shadow: 0 3px 10px rgba(2, 132, 199, 0.3);
}

.pagination-dots {
    padding: 0 8px;
    color: var(--txt3);
    font-weight: 700;
}

.pagination-goto {
    display: flex;
    gap: 8px;
    align-items: center;
    background: var(--card);
    padding: 6px;
    border-radius: var(--r2);
    border: 2px solid var(--border);
}

.pagination-goto input {
    width: 70px;
    padding: 8px 12px;
    border: 2px solid var(--border);
    border-radius: var(--r3);
    font-size: 14px;
    font-weight: 700;
    text-align: center;
    color: var(--sky);
}

.pagination-goto input:focus {
    outline: none;
    border-color: var(--sky);
}

.pagination-goto button {
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, var(--sky) 0%, var(--teal) 100%);
    border: none;
    border-radius: var(--r3);
    color: #fff;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pagination-goto button:hover {
    transform: scale(1.1);
    box-shadow: 0 3px 10px rgba(2, 132, 199, 0.3);
}

/* ─── View Toggle Buttons ──────────────────────────────────────────────── */

.view-toggle {
    display: flex;
    align-items: center;
    gap: 4px;
    background: var(--page);
    border: 2px solid var(--border);
    border-radius: var(--r2);
    padding: 3px;
    height: 42px;
    box-sizing: border-box;
}

.view-btn {
    width: 32px; height: 32px;
    border: none; background: transparent;
    border-radius: var(--r3);
    color: var(--txt3);
    font-size: 14px;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all .18s ease;
}

.view-btn:hover { background: var(--sky-l); color: var(--teal); }

.view-btn.active {
    background: linear-gradient(135deg, var(--sky), var(--teal));
    color: #fff;
    box-shadow: 0 1px 4px rgba(20,184,166,.3);
}

/* ─── Grid View Container ──────────────────────────────────────────────── */

.companies-list.view-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 18px;
}

/* ─── Grid Card Overrides ──────────────────────────────────────────────── */

.companies-list.view-grid .company-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 24px 18px 20px;
    gap: 0;
    border-radius: var(--r1);
    border: 1.5px solid var(--border);
    box-shadow: 0 2px 12px rgba(0,0,0,.05);
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
    position: relative;
    overflow: hidden;
}

.companies-list.view-grid .company-item::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--sky), var(--teal));
    opacity: 0;
    transition: opacity .22s;
}

.companies-list.view-grid .company-item:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 40px rgba(20,184,166,.14);
    border-color: var(--sky-l);
}

.companies-list.view-grid .company-item:hover::before { opacity: 1; }

.companies-list.view-grid .company-item-logo {
    width: 84px; height: 84px;
    border-radius: 14px;
    padding: 10px;
    margin-bottom: 14px;
    border: 1.5px solid var(--border);
    background: var(--page);
    flex-shrink: 0;
}

.companies-list.view-grid .company-item-logo-placeholder {
    font-size: 40px;
}

.companies-list.view-grid .company-item-fullname { display: none; }

.companies-list.view-grid .company-item-content {
    flex-direction: column;
    align-items: center;
    width: 100%;
    flex: 1;
    gap: 0;
}

.companies-list.view-grid .company-item-header {
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 100%;
    margin-bottom: 0;
}

.companies-list.view-grid .company-item-name {
    font-size: .9375rem;
    font-weight: 700;
    line-height: 1.35;
    margin-bottom: 8px;
}

.companies-list.view-grid .company-badges {
    justify-content: center;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 10px;
}

/* Limit badges in grid — hide category badge (too wide) */

.companies-list.view-grid .badge-category { display: none; }

.companies-list.view-grid .company-item-description {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: .8125rem;
    color: var(--txt3);
    text-align: center;
    margin: 8px 0 10px;
    line-height: 1.5;
}

.companies-list.view-grid .company-item-metadata {
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 16px;
    font-size: .8rem;
}

.companies-list.view-grid .metadata-item-address,
.companies-list.view-grid .metadata-item:has(.fa-fingerprint) { display: none; }

.companies-list.view-grid .company-item-right {
    width: 100%;
    margin-top: auto;
}

.companies-list.view-grid .company-item-arrow {
    width: 100%;
    height: 38px;
    border-radius: var(--r2);
    background: linear-gradient(135deg, var(--sky-ll) 0%, var(--sky-ll) 100%);
    border: 1.5px solid rgba(20,184,166,.3);
    color: var(--sky-h);
    font-size: 13px;
    font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    gap: 6px;
    transition: all .2s ease;
}

.companies-list.view-grid .company-item-arrow::after {
    content: 'Открыть';
    font-size: 13px;
    font-weight: 700;
    font-family: inherit;
}

.companies-list.view-grid .company-item-arrow i { font-size: 13px; }

.companies-list.view-grid .company-item:hover .company-item-arrow {
    background: linear-gradient(135deg, var(--sky) 0%, var(--teal) 100%);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 4px 16px rgba(20,184,166,.35);
}

/* ================================================================
   NEWS DETAIL — v2 redesign
   ================================================================ */

.breadcrumbs-bar {
    background: var(--card);
    border-bottom: 1.5px solid var(--page);
    padding: 11px 0;
    font-size: .8rem;
}

.breadcrumbs-bar .container {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.breadcrumbs-bar a {
    color: var(--txt2);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: color .15s;
}

.breadcrumbs-bar a:hover { color: var(--sky-h); }

.breadcrumbs-bar .fa-chevron-right { font-size: .65rem; color: var(--border); }

.breadcrumbs-bar .breadcrumb-title { color: var(--txt); font-weight: 600; }

.news-detail-section {
    padding: 48px 0 80px;
    background: var(--page);
    min-height: 70vh;
}

.news-detail-container {
    max-width: 1200px;
    margin: 0 auto;
}

.breadcrumb {
    margin-bottom: 32px;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.breadcrumb a {
    color: var(--sky);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s;
}

.breadcrumb a:hover {
    color: var(--sky-h);
}

.breadcrumb span {
    color: var(--txt3);
}

.news-detail-card {
    background: var(--card);
    border-radius: var(--r1);
    overflow: hidden;
    box-shadow: 0 4px 24px rgba(2, 132, 199, 0.08);
    border: 1px solid rgba(2, 132, 199, 0.1);
}

.news-detail-header {
    padding: 48px 56px 24px;
    background: linear-gradient(135deg, rgba(240, 253, 250, 0.5) 0%, rgba(236, 254, 255, 0.5) 100%);
}

.news-detail-title {
    font-size: 42px;
    color: var(--txt);
    margin-bottom: 24px;
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: -0.5px;
}

.news-detail-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 32px;
    padding: 20px 0;
    border-bottom: 2px solid rgba(2, 132, 199, 0.15);
    color: var(--txt2);
    font-size: 15px;
}

.news-detail-meta i {
    margin-right: 8px;
    color: var(--sky);
    font-size: 16px;
}

.news-detail-image-wrapper {
    width: 100%;
    max-width: 800px;
    margin: 32px auto;
    overflow: hidden;
    border-radius: var(--r1);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.news-detail-image {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
}

.news-detail-content {
    padding: 32px 56px 56px;
    font-size: 17px;
    line-height: 1.9;
    color: var(--txt2);
}

.news-detail-content p {
    margin-bottom: 20px;
}

.news-detail-content h2 {
    font-size: 28px;
    color: var(--txt);
    margin: 40px 0 20px;
    font-weight: 700;
    position: relative;
    padding-left: 20px;
}

.news-detail-content h2::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 5px;
    height: 28px;
    background: linear-gradient(135deg, var(--sky) 0%, var(--sky-h) 100%);
    border-radius: 3px;
}

.news-detail-content h3 {
    font-size: 22px;
    color: var(--txt);
    margin: 32px 0 16px;
    font-weight: 600;
}

.news-detail-content ul,
.news-detail-content ol {
    margin: 20px 0;
    padding-left: 28px;
}

.news-detail-content li {
    margin-bottom: 12px;
    color: var(--txt2);
}

.news-detail-content strong {
    color: var(--sky);
    font-weight: 600;
}

.back-button {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 24px;
    background: var(--sky);
    color: white !important;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    transition: all 0.3s;
    margin-bottom: 20px;
    box-shadow: 0 2px 8px rgba(2, 132, 199, 0.25);
}

.back-button:hover {
    background: var(--sky-h);
    transform: translateX(-4px);
    box-shadow: 0 6px 20px rgba(2, 132, 199, 0.4);
    color: white !important;
}

.related-news {
    margin-top: 80px;
    margin-bottom: 80px;
    padding: 60px;
    background: var(--card);
    border-radius: var(--r1);
    box-shadow: 0 4px 24px rgba(2, 132, 199, 0.08);
    border: 1px solid rgba(2, 132, 199, 0.1);
}

.related-news h2 {
    font-size: 32px;
    color: var(--txt);
    margin-bottom: 40px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 12px;
}

.related-news h2::before {
    content: '';
    width: 6px;
    height: 36px;
    background: linear-gradient(135deg, var(--sky) 0%, var(--sky-h) 100%);
    border-radius: 3px;
}

.related-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
}

.related-card {
    background: var(--card);
    border-radius: var(--r1);
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(2, 132, 199, 0.08);
    transition: all 0.3s ease;
    text-decoration: none;
    display: block;
    border: 1px solid rgba(2, 132, 199, 0.1);
}

.related-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 40px rgba(2, 132, 199, 0.15);
    border-color: var(--sky);
}

.related-image {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.related-image-placeholder {
    width: 100%;
    height: 200px;
    background: linear-gradient(135deg, var(--sky) 0%, var(--sky-h) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 52px;
}

.related-content {
    padding: 24px;
}

.related-title {
    font-size: 17px;
    font-weight: 600;
    color: var(--txt);
    margin-bottom: 10px;
    line-height: 1.4;
}

.related-meta {
    font-size: 14px;
    color: var(--txt2);
    display: flex;
    align-items: center;
    gap: 6px;
}

.related-meta i {
    color: var(--sky);
    font-size: 13px;
}

/* ── Layout: 2-column ──────────────────────────────────────── */

.nd-layout {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 32px;
    align-items: start;
}

/* ── Main article ──────────────────────────────────────────── */

.nd-main {
    background: var(--card);
    border-radius: var(--r1);
    overflow: hidden;
    box-shadow: 0 2px 20px rgba(15,23,42,.06);
    border: 1.5px solid var(--page);
}

.nd-hero-img {
    width: 100%;
    aspect-ratio: 16 / 7;
    overflow: hidden;
    background: var(--txt);
}

.nd-hero-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .4s;
}

.nd-hero-img:hover img { transform: scale(1.02); }

.nd-header {
    padding: 36px 48px 28px;
    border-bottom: 1.5px solid var(--page);
}

.nd-category {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg,var(--sky-ll),var(--sky-ll));
    color: var(--sky-h);
    font-size: .75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
    padding: 5px 14px;
    border-radius: 100px;
    margin-bottom: 16px;
    border: 1px solid rgba(20,184,166,.2);
}

.nd-title {
    font-size: 2rem;
    font-weight: 900;
    color: var(--txt);
    line-height: 1.25;
    letter-spacing: -.5px;
    margin: 0 0 20px;
}

.nd-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 20px;
    color: var(--txt2);
    font-size: .8125rem;
    margin-bottom: 20px;
}

.nd-meta span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.nd-meta i { color: var(--sky); font-size: .85rem; }

.nd-lead {
    font-size: 1.05rem;
    color: var(--txt2);
    line-height: 1.75;
    padding: 16px 20px;
    background: linear-gradient(135deg,var(--sky-ll),var(--sky-ll));
    border-left: 3px solid var(--sky);
    border-radius: 0 10px 10px 0;
    margin: 0;
}

.nd-content {
    padding: 36px 48px 40px;
    font-size: 1rem;
    line-height: 1.85;
    color: var(--txt2);
}

.nd-content p { margin-bottom: 18px; }

.nd-content h2 {
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--txt);
    margin: 36px 0 14px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.nd-content h2 > span[style*="border-radius"] { flex-shrink: 0; }

.nd-content h3 { font-size: 1.1rem; font-weight: 700; color: var(--txt); margin: 24px 0 10px; }

.nd-content ul, .nd-content ol { margin: 16px 0; padding-left: 24px; }

.nd-content li { margin-bottom: 8px; color: var(--txt2); }

.nd-content strong { color: var(--sky-h); font-weight: 700; }

.nd-content a { color: var(--sky); text-decoration: underline; }

.nd-content a:hover { color: var(--sky-h); }

/* Reset padding-left for icon-lists already styled inline */

.nd-content ul[style*="padding-left:0"] { padding-left: 0; }

.nd-share {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 20px 48px 28px;
    border-top: 1.5px solid var(--page);
}

.nd-share-label {
    font-size: .8125rem;
    font-weight: 700;
    color: var(--txt2);
    display: flex;
    align-items: center;
    gap: 6px;
    margin-right: 4px;
}

.nd-share-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 16px;
    border-radius: 100px;
    font-size: .8125rem;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    border: none;
    transition: all .18s;
}

.nd-share-vk  { background: var(--sky-l); color: var(--sky); }

.nd-share-vk:hover  { background: var(--sky); color: #fff; }

.nd-share-tg  { background: var(--sky-l); color: var(--sky); }

.nd-share-tg:hover  { background: var(--sky); color: #fff; }

.nd-share-copy { background: var(--page); color: var(--txt2); }

.nd-share-copy:hover { background: var(--border); color: var(--txt); }

/* ── Sidebar ───────────────────────────────────────────────── */

.nd-sidebar {
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: sticky;
    top: 20px;
}

.nd-back-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    background: var(--card);
    border: 1.5px solid var(--border);
    border-radius: var(--r1);
    color: var(--txt2);
    font-size: .875rem;
    font-weight: 700;
    text-decoration: none;
    transition: all .18s;
}

.nd-back-btn:hover { border-color: var(--sky); color: var(--sky-h); background: var(--sky-ll); }

.nd-back-btn i { font-size: .8rem; }

.nd-sb-card {
    background: var(--card);
    border: 1.5px solid var(--page);
    border-radius: var(--r1);
    padding: 20px;
    box-shadow: 0 2px 12px rgba(15,23,42,.04);
}

.nd-sb-card-title {
    font-size: .75rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--txt3);
    margin-bottom: 14px;
}

.nd-sb-info-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid var(--page);
    font-size: .8125rem;
    color: var(--txt2);
}

.nd-sb-info-row:last-child { border-bottom: none; }

.nd-sb-info-row i { width: 16px; color: var(--sky); font-size: .875rem; text-align: center; flex-shrink: 0; }

.nd-related-item {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 10px 0;
    border-bottom: 1px solid var(--page);
    text-decoration: none;
    transition: opacity .15s;
}

.nd-related-item:last-child { border-bottom: none; padding-bottom: 0; }

.nd-related-item:hover { opacity: .8; }

.nd-rel-img {
    width: 60px;
    height: 48px;
    object-fit: cover;
    border-radius: var(--r2);
    flex-shrink: 0;
    background: var(--page);
}

.nd-rel-placeholder {
    width: 60px;
    height: 48px;
    border-radius: var(--r2);
    background: linear-gradient(135deg,var(--sky),var(--teal));
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.nd-rel-body { flex: 1; min-width: 0; }

.nd-rel-title {
    font-size: .8125rem;
    font-weight: 700;
    color: var(--txt);
    line-height: 1.4;
    margin-bottom: 4px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.nd-rel-date { font-size: .72rem; color: var(--txt3); display: flex; align-items: center; gap: 5px; }

.nd-sb-cta {
    background: linear-gradient(145deg,var(--txt),var(--txt)) !important;
    border-color: transparent !important;
    text-align: center;
}

.nd-sb-cta-icon {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg,var(--sky),var(--teal));
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    color: #fff;
    margin: 0 auto 12px;
}

.nd-sb-cta-title { font-size: 1rem; font-weight: 800; color: #fff; margin-bottom: 8px; }

.nd-sb-cta p { font-size: .8125rem; color: var(--txt3); line-height: 1.6; margin-bottom: 16px; }

.nd-sb-cta-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    background: linear-gradient(135deg,var(--sky),var(--teal));
    color: #fff;
    padding: 11px 20px;
    border-radius: 100px;
    font-weight: 800;
    font-size: .875rem;
    text-decoration: none;
    transition: all .2s;
    box-shadow: 0 4px 16px rgba(20,184,166,.35);
}

.nd-sb-cta-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(20,184,166,.45); color: #fff; }

/* ── Responsive ────────────────────────────────────────────── */

.org-page-wrapper {
    background: linear-gradient(135deg, var(--bord2) 0%, var(--border) 100%);
    min-height: calc(100vh - 200px);
    position: relative;
    overflow: hidden;
}

.org-page-wrapper::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 400px;
    background: linear-gradient(135deg, rgba(2, 132, 199, 0.1) 0%, rgba(14, 165, 233, 0.1) 100%);
    z-index: 0;
    animation: gradientShift 8s ease infinite;
}

@keyframes gradientShift {
    0%, 100% { opacity: 1; transform: translateY(0); }
    50% { opacity: 0.8; transform: translateY(-10px); }
}

.org-page-wrapper::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-image: 
        radial-gradient(circle at 20% 50%, rgba(2, 132, 199, 0.05) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(14, 165, 233, 0.05) 0%, transparent 50%);
    animation: particles 15s ease-in-out infinite;
    z-index: 0;
}

@keyframes particles {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-20px) scale(1.05); }
}

.org-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 50px 20px;
    position: relative;
    z-index: 1;
}

.org-card-header {
    display: flex;
    align-items: center;
    gap: 40px;
    padding: 45px;
    background: linear-gradient(135deg, rgba(255,255,255,0.98) 0%, rgba(255,255,255,1) 100%);
    border-radius: var(--r1);
    margin-bottom: 40px;
    box-shadow: 0 15px 60px rgba(0,0,0,0.12), 0 5px 25px rgba(2, 132, 199, 0.1);
    border: 1px solid rgba(255,255,255,0.8);
    backdrop-filter: blur(20px);
    position: relative;
    overflow: hidden;
    animation: slideUp 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.org-card-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 5px;
    background: linear-gradient(90deg, transparent, var(--sky), var(--sky), transparent);
    animation: shine 3s ease-in-out infinite;
}

@keyframes shine {
    0% { left: -100%; }
    50%, 100% { left: 100%; }
}

.org-card-header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 5px;
    background: linear-gradient(90deg, var(--sky) 0%, var(--sky) 100%);
}

.org-card-logo {
    flex-shrink: 0;
    position: relative;
    animation: floating 4s ease-in-out infinite;
}

@keyframes floating {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-10px) rotate(2deg); }
}

.org-card-logo::after {
    content: '';
    position: absolute;
    inset: -10px;
    background: linear-gradient(135deg, rgba(2, 132, 199, 0.2) 0%, rgba(14, 165, 233, 0.2) 100%);
    border-radius: 15px;
    z-index: -1;
    filter: blur(20px);
    animation: pulse 3s ease-in-out infinite;
}

.org-card-logo img {
    width: 140px;
    height: 140px;
    object-fit: contain;
    border-radius: var(--r1);
    background: var(--card);
    padding: 20px;
    border: 3px solid rgba(2, 132, 199, 0.2);
    box-shadow: 0 8px 30px rgba(0,0,0,0.1);
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.org-card-logo img:hover {
    transform: scale(1.1) rotate(-5deg);
    box-shadow: 0 15px 50px rgba(2, 132, 199, 0.4);
    border-color: var(--sky);
}

.org-logo-placeholder {
    width: 140px;
    height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--r1);
    background: linear-gradient(135deg, var(--sky-ll) 0%, var(--sky-l) 100%);
    border: 3px solid rgba(2, 132, 199, 0.2);
    box-shadow: 0 8px 30px rgba(0,0,0,0.1);
    font-size: 64px;
    color: var(--sky);
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.org-logo-placeholder:hover {
    transform: scale(1.1) rotate(-5deg);
    box-shadow: 0 15px 50px rgba(2, 132, 199, 0.4);
    border-color: var(--sky);
}

.org-card-title h1 {
    font-size: 42px;
    font-weight: 800;
    color: var(--txt);
    margin: 0 0 12px 0;
    background: linear-gradient(135deg, var(--sky) 0%, var(--sky) 50%, var(--sky) 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: -0.5px;
    line-height: 1.2;
    animation: gradientMove 4s ease infinite;
    position: relative;
}

@keyframes gradientMove {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

.org-card-title h1::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--sky) 0%, var(--sky) 100%);
    transition: width 0.5s ease;
}

.org-card-header:hover .org-card-title h1::after {
    width: 100%;
}

.org-card-full-name {
    font-size: 17px;
    color: var(--txt2);
    margin: 0;
    line-height: 1.6;
    font-weight: 500;
    letter-spacing: 0.2px;
}

.org-card-lead {
    font-size: 18px;
    line-height: 1.9;
    color: var(--txt);
    margin-bottom: 40px;
    padding: 30px 35px;
    background: linear-gradient(135deg, rgba(2, 132, 199, 0.08) 0%, rgba(14, 165, 233, 0.08) 100%);
    border-left: 5px solid;
    border-image: linear-gradient(135deg, var(--sky) 0%, var(--sky) 100%) 1;
    border-radius: var(--r1);
    box-shadow: 0 4px 20px rgba(0,0,0,0.06);
    position: relative;
    animation: fadeIn 0.8s ease-out 0.3s both;
}

.org-card-lead::before {
    content: '"';
    font-size: 60px;
    color: rgba(2, 132, 199, 0.15);
    position: absolute;
    top: 10px;
    left: 15px;
    font-family: Georgia, serif;
}

.org-card-grid {
    display: grid;
    grid-template-columns: 1fr 450px;
    gap: 35px;
    margin-bottom: 50px;
}

.org-card-main {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.org-card-sidebar {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.org-card-section {
    background: rgba(255,255,255,0.98);
    padding: 35px;
    border-radius: var(--r1);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(255,255,255,0.8);
    backdrop-filter: blur(20px);
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
    overflow: hidden;
    animation: fadeInScale 0.6s ease-out both;
}

@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.org-card-section:nth-child(1) { animation-delay: 0.1s; }

.org-card-section:nth-child(2) { animation-delay: 0.2s; }

.org-card-section:nth-child(3) { animation-delay: 0.3s; }

.org-card-section:nth-child(4) { animation-delay: 0.4s; }

.org-card-section:nth-child(5) { animation-delay: 0.5s; }

/* Отступ для секции с кратким описанием перед grid */

.org-card-header + .org-card-section {
    margin-bottom: 35px;
}

.org-card-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(2, 132, 199, 0.1), transparent);
    transition: left 0.5s ease;
}

.org-card-section:hover::before {
    left: 100%;
}

.org-card-section:hover {
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15), 0 8px 30px rgba(2, 132, 199, 0.2);
    transform: translateY(-8px) scale(1.02);
}

.org-section-title {
    font-size: 26px;
    font-weight: 800;
    color: var(--txt);
    margin: 0 0 25px 0;
    padding-bottom: 18px;
    border-bottom: 4px solid transparent;
    border-image: linear-gradient(90deg, var(--sky) 0%, var(--sky) 100%) 1;
    display: flex;
    align-items: center;
    gap: 12px;
    letter-spacing: -0.5px;
}

.org-section-title i {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--sky) 0%, var(--sky) 100%);
    color: #fff;
    border-radius: var(--r2);
    font-size: 20px;
    box-shadow: 0 4px 15px rgba(2, 132, 199, 0.3);
    animation: iconPulse 2s ease-in-out infinite;
}

@keyframes iconPulse {
    0%, 100% { transform: scale(1); box-shadow: 0 4px 15px rgba(2, 132, 199, 0.3); }
    50% { transform: scale(1.1); box-shadow: 0 6px 25px rgba(2, 132, 199, 0.5); }
}

.org-section-content {
    font-size: 16px;
    line-height: 1.9;
    color: var(--txt);
    font-weight: 400;
}

.org-section-content p {
    margin: 0 0 16px 0;
}

.org-section-content p:last-child {
    margin-bottom: 0;
}

.org-list {
    display: grid;
    gap: 12px;
}

.org-list-item {
    padding: 16px 20px;
    background: linear-gradient(135deg, rgba(248, 250, 252, 0.9) 0%, rgba(241, 245, 249, 0.9) 100%);
    border-radius: var(--r2);
    font-size: 15px;
    color: var(--txt);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    border: 2px solid rgba(2, 132, 199, 0.1);
    position: relative;
    overflow: hidden;
}

.org-list-item::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(2, 132, 199, 0.2);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

.org-list-item:hover::before {
    width: 400px;
    height: 400px;
}

.org-list-item:hover {
    background: linear-gradient(135deg, rgba(2, 132, 199, 0.08) 0%, rgba(14, 165, 233, 0.08) 100%);
    border-color: rgba(2, 132, 199, 0.3);
    box-shadow: 0 4px 15px rgba(2, 132, 199, 0.15);
    transform: translateX(5px) scale(1.02);
}

.org-list-item strong {
    display: block;
    color: var(--txt);
    font-weight: 700;
    font-size: 16px;
    margin-bottom: 4px;
    position: relative;
    z-index: 1;
}

.okved-code {
    display: inline-block;
    padding: 4px 10px;
    background: linear-gradient(135deg, var(--sky) 0%, var(--sky) 100%);
    color: white;
    border-radius: var(--r3);
    font-weight: 700;
    font-size: 13px;
    margin-right: 10px;
}

.okved-desc {
    color: var(--txt);
    font-size: 14px;
    line-height: 1.6;
}

.okved-item.main {
    padding: 16px 20px;
    background: linear-gradient(135deg, rgba(2, 132, 199, 0.12) 0%, rgba(14, 165, 233, 0.12) 100%);
    border-radius: var(--r2);
    margin-bottom: 12px;
    border: 2px solid rgba(2, 132, 199, 0.3);
    font-size: 15px;
    font-weight: 600;
}

.org-info-grid {
    display: grid;
    gap: 14px;
}

.org-info-item {
    display: flex;
    justify-content: space-between;
    padding: 16px 20px;
    background: linear-gradient(135deg, rgba(248, 250, 252, 0.9) 0%, rgba(241, 245, 249, 0.9) 100%);
    border-radius: var(--r2);
    font-size: 15px;
    gap: 20px;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    border: 2px solid rgba(2, 132, 199, 0.1);
}

.org-info-item:hover {
    background: linear-gradient(135deg, rgba(2, 132, 199, 0.08) 0%, rgba(14, 165, 233, 0.08) 100%);
    border-color: rgba(2, 132, 199, 0.3);
    transform: translateX(8px) scale(1.03);
    box-shadow: 0 6px 20px rgba(2, 132, 199, 0.2);
}

.org-info-label {
    font-weight: 700;
    color: var(--txt2);
    min-width: 120px;
    font-size: 15px;
}

.org-info-value {
    color: var(--txt);
    font-weight: 700;
    text-align: right;
    word-break: break-word;
    font-size: 15px;
}

.org-contacts-grid {
    display: grid;
    gap: 14px;
}

.org-contact-item {
    padding: 16px 20px;
    background: linear-gradient(135deg, rgba(248, 250, 252, 0.9) 0%, rgba(241, 245, 249, 0.9) 100%);
    border-radius: var(--r2);
    font-size: 15px;
    display: flex;
    align-items: center;
    gap: 14px;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    border: 2px solid rgba(2, 132, 199, 0.1);
}

.org-contact-item:hover {
    background: linear-gradient(135deg, rgba(2, 132, 199, 0.08) 0%, rgba(14, 165, 233, 0.08) 100%);
    border-color: rgba(2, 132, 199, 0.3);
    transform: translateX(8px) scale(1.03);
    box-shadow: 0 6px 20px rgba(2, 132, 199, 0.2);
}

.org-contact-item i {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--sky) 0%, var(--sky) 100%);
    color: #fff;
    border-radius: var(--r2);
    font-size: 16px;
    box-shadow: 0 3px 12px rgba(2, 132, 199, 0.3);
    transition: all 0.3s ease;
}

.org-contact-item:hover i {
    transform: rotate(360deg) scale(1.2);
    box-shadow: 0 5px 20px rgba(2, 132, 199, 0.5);
}

.org-contact-item a {
    color: var(--sky);
    text-decoration: none;
    font-weight: 600;
    transition: all 0.2s;
}

.org-contact-item a:hover {
    color: var(--sky);
    text-decoration: underline;
}

.org-bank-list {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.bank-info {
    padding: 18px;
    background: linear-gradient(135deg, rgba(248, 250, 252, 0.9) 0%, rgba(241, 245, 249, 0.9) 100%);
    border-radius: var(--r2);
    margin-bottom: 14px;
    border: 2px solid rgba(2, 132, 199, 0.1);
    transition: all 0.3s ease;
}

.bank-info:hover {
    background: linear-gradient(135deg, rgba(2, 132, 199, 0.08) 0%, rgba(14, 165, 233, 0.08) 100%);
    border-color: rgba(2, 132, 199, 0.3);
    transform: translateX(5px);
    box-shadow: 0 4px 15px rgba(2, 132, 199, 0.15);
}

.bank-info p strong {
    display: block;
    font-size: 15px;
    font-weight: 700;
    color: var(--txt);
    margin-bottom: 10px;
}

.org-bank-info {
    display: grid;
    gap: 10px;
    font-size: 15px;
}

.org-bank-row span:first-child {
    color: var(--txt2);
    font-weight: 600;
}

.org-bank-row span:last-child {
    color: var(--txt);
    font-weight: 700;
    text-align: right;
}

.contacts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}

.org-dept-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.org-dept-card {
    padding: 18px;
    background: linear-gradient(135deg, rgba(248, 250, 252, 0.9) 0%, rgba(241, 245, 249, 0.9) 100%);
    border-radius: var(--r2);
    font-size: 15px;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    border: 2px solid rgba(2, 132, 199, 0.1);
}

.org-dept-card:hover {
    background: linear-gradient(135deg, rgba(2, 132, 199, 0.08) 0%, rgba(14, 165, 233, 0.08) 100%);
    border-color: rgba(2, 132, 199, 0.3);
    transform: translateX(8px) scale(1.03);
    box-shadow: 0 6px 20px rgba(2, 132, 199, 0.2);
}

.org-dept-card h3 {
    font-weight: 800;
    color: var(--txt);
    margin: 0 0 10px 0;
    font-size: 16px;
}

.org-dept-card .contact-person {
    font-weight: 600;
    color: var(--txt);
    margin: 0 0 6px 0;
    font-size: 14px;
}

.org-dept-card .contact-position {
    font-size: 13px;
    color: var(--txt2);
    margin: 0 0 10px 0;
    font-style: italic;
}

.org-dept-name {
    font-weight: 800;
    color: var(--txt);
    margin-bottom: 10px;
    font-size: 16px;
}

.org-dept-info {
    display: grid;
    gap: 8px;
    color: var(--txt);
    font-size: 14px;
}

.org-footer {
    margin-top: 50px;
    text-align: center;
    animation: fadeIn 0.8s ease-out 0.6s both;
}

.org-btn-back {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 18px 40px;
    background: linear-gradient(135deg, var(--sky) 0%, var(--sky) 100%);
    color: #fff;
    text-decoration: none;
    border-radius: var(--r1);
    font-weight: 700;
    font-size: 16px;
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 6px 25px rgba(2, 132, 199, 0.35);
    position: relative;
    overflow: hidden;
}

.org-btn-back::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.org-btn-back::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

.org-btn-back:hover::after {
    width: 300px;
    height: 300px;
}

.org-btn-back:hover::before {
    opacity: 1;
}

.org-btn-back:hover {
    transform: translateY(-8px) scale(1.05);
    box-shadow: 0 15px 45px rgba(2, 132, 199, 0.6);
}

.org-btn-back i {
    font-size: 16px;
    transition: transform 0.3s ease;
    position: relative;
    z-index: 1;
}

.org-btn-back:hover i {
    transform: translateX(-5px);
}

.requests-compact-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.request-compact-item {
    padding: 14px 18px;
    background: linear-gradient(135deg, rgba(248, 250, 252, 0.9) 0%, rgba(241, 245, 249, 0.9) 100%);
    border-radius: var(--r2);
    border: 2px solid rgba(2, 132, 199, 0.1);
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.request-compact-item:hover {
    background: linear-gradient(135deg, rgba(2, 132, 199, 0.08) 0%, rgba(14, 165, 233, 0.08) 100%);
    border-color: rgba(2, 132, 199, 0.3);
    transform: translateX(5px);
    box-shadow: 0 4px 15px rgba(2, 132, 199, 0.15);
}

.request-compact-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}

.request-compact-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--txt);
    text-decoration: none;
    flex: 1;
    transition: color 0.2s;
}

.request-compact-title:hover {
    color: var(--sky);
}

.request-compact-type {
    padding: 4px 10px;
    border-radius: var(--r3);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.request-type-goods {
    background: linear-gradient(135deg, var(--em) 0%, var(--em) 100%);
    color: white;
}

.request-type-services {
    background: linear-gradient(135deg, var(--sky) 0%, var(--sky) 100%);
    color: white;
}

.request-type-works {
    background: linear-gradient(135deg, var(--am) 0%, var(--am) 100%);
    color: white;
}

.request-compact-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 13px;
    color: var(--txt2);
}

.request-compact-meta span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.request-compact-meta i {
    font-size: 12px;
}

.request-compact-category {
    color: var(--ind);
}

.request-compact-budget {
    color: var(--em);
    font-weight: 600;
}

.request-compact-date {
    color: var(--txt2);
}

.request-compact-deadline {
    color: var(--sky);
    font-weight: 600;
}

.request-compact-deadline.deadline-urgent {
    color: var(--rose);
}

.org-btn-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: linear-gradient(135deg, var(--sky) 0%, var(--sky) 100%);
    color: #fff;
    text-decoration: none;
    border-radius: var(--r2);
    font-weight: 600;
    font-size: 14px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(2, 132, 199, 0.3);
}

.org-btn-link:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(2, 132, 199, 0.5);
}

.org-title{margin:0;font-size:1.65rem;font-weight:800;color:var(--txt)}

.org-link-center{margin-top:16px;text-align:center}

/* ── Org detail page — offer-style ── */

.org-identity-card{text-align:center;padding:24px 20px}

.org-identity-logo{width:80px;height:80px;object-fit:contain;border-radius:12px;border:1.5px solid var(--border);background:var(--card);padding:6px;margin:0 auto 12px;display:block}

.org-identity-avatar{width:72px;height:72px;border-radius:16px;background:linear-gradient(135deg,var(--sky),var(--teal));color:#fff;font-size:1.5rem;font-weight:900;display:flex;align-items:center;justify-content:center;margin:0 auto 12px}

.org-identity-name{font-size:.9375rem;font-weight:800;color:var(--txt);line-height:1.3;margin-bottom:8px}

.org-identity-status{font-size:.75rem;font-weight:700;color:var(--txt3);display:flex;align-items:center;justify-content:center;gap:5px;margin-bottom:4px}

.org-identity-status--ok{color:var(--em)}

.org-identity-city{font-size:.8rem;color:var(--txt2);display:flex;align-items:center;justify-content:center;gap:5px;margin-top:4px}

.org-lead{font-size:1rem;line-height:1.7;color:var(--txt2);background:var(--sky-ll);border-left:3px solid var(--sky);border-radius:0 8px 8px 0;padding:14px 18px;margin-bottom:4px}

.org-okved-main{background:var(--sky-ll);border:1px solid var(--sky-l);border-radius:8px;padding:10px 14px;margin-bottom:12px;font-size:.875rem;color:var(--sky-h);display:flex;align-items:flex-start;gap:8px}

.org-okved-list{display:flex;flex-direction:column;gap:6px}

.org-okved-item{display:flex;align-items:baseline;gap:10px;padding:8px 12px;background:var(--page);border-radius:8px;font-size:.875rem}

.org-okved-code{font-weight:700;color:var(--sky-h);white-space:nowrap;flex-shrink:0}

.org-okved-desc{color:var(--txt2)}

.org-requests-list{display:flex;flex-direction:column;gap:10px}

.org-request-card__meta span{display:flex;align-items:center;gap:4px}

.org-dept-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}

.org-dept-card2{background:var(--card);border:1.5px solid var(--border);border-radius:12px;padding:0;overflow:hidden}

.org-dept-card2__name{font-weight:800;color: #fff;font-size:.875rem;padding:10px 16px;background:linear-gradient(135deg,var(--txt),var(--txt));display:flex;align-items:center;gap:8px}

.org-dept-card2__name::before{content:'\f2b9';font-family:"Font Awesome 5 Free";font-weight:900;font-size:.75rem;opacity:.7}

.org-dept-card2__body{padding:12px 16px;display:flex;flex-direction:column;gap:6px}

.org-dept-card2__person{font-size:.875rem;font-weight:700;color:var(--txt);display:flex;align-items:center;gap:7px}

.org-dept-card2__person i{color:var(--txt2);font-size:.75rem;flex-shrink:0}

.org-dept-card2__pos{font-size:.75rem;color:var(--txt2);padding-left:22px;margin-top:-2px}

.org-dept-card2__contact{display:flex;align-items:center;gap:7px;font-size:.8rem;color:var(--sky-h);text-decoration:none;padding:4px 0;border-top:1px dashed var(--page)}

.org-dept-card2__contact:first-of-type{margin-top:4px}

.org-dept-card2__contact i{width:14px;text-align:center;flex-shrink:0}

.org-dept-card2__contact:hover{color:var(--txt)}

/* ── bank card reset — перебиваем старые стили ── */

.org-bank-card{padding:12px 0 !important;background:none !important;border:none !important;border-left:none !important;border-radius:0 !important;overflow:visible !important;transform:none !important;box-shadow:none !important;position:static !important;transition:none !important}

.org-bank-card::before{display:none !important;content:none !important}

.org-bank-card:hover{transform:none !important;box-shadow:none !important;background:none !important}

.org-bank-card--sep{padding-top:14px !important;margin-top:6px;border-top:1px solid var(--border) !important}

.org-bank-name{font-size:.825rem !important;font-weight:700 !important;color:var(--txt) !important;margin-bottom:10px !important;display:flex !important;align-items:center !important;gap:7px !important}

.org-bank-name i{color:var(--txt2);font-size:.75rem}

.org-bank-rows{display:flex;flex-direction:column;background:var(--page);border:1.5px solid var(--border);border-radius:10px;overflow:hidden}

.org-bank-row{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:8px 12px;border-bottom:1px solid var(--border)}

.org-bank-row:last-child{border-bottom:none}

.org-bank-row__k{font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--txt2);white-space:nowrap;flex-shrink:0}

.org-bank-row__v{font-size:.75rem;font-weight:600;color:var(--txt);word-break:break-all;text-align:right;flex:1;min-width:0}

.org-request-card__desc{font-size:.8rem;color:var(--txt2);line-height:1.5;margin-bottom:8px}

.org-vac-card--urgent{border-color:var(--rose)}

.org-vac-card--top{border-color:var(--am)}

.org-offer-card{display:flex;flex-direction:row;gap:12px;padding:12px 14px;overflow:hidden;align-items:center}

.org-offer-card__img{width:72px;height:72px;object-fit:cover;flex-shrink:0;border-radius:8px;border:1px solid var(--border);align-self:center}

.org-offer-card__body{flex:1;min-width:0}

.org-press-card{display:flex;flex-direction:row;gap:12px;padding:12px 14px;overflow:hidden;align-items:center}

.org-press-card__img{width:88px;height:72px;object-fit:cover;flex-shrink:0;border-radius:8px;border:1px solid var(--border);align-self:center}

.org-vac-badge{display:inline-flex;align-items:center;gap:4px;font-size:.65rem;font-weight:700;padding:3px 8px;border-radius:4px}

.org-vac-badge--urgent{background:var(--status-error-light);color:var(--rose)}

.org-vac-badge--top{background:var(--status-warning-light);color:var(--am)}

/* ═══ Tender detail page ═══════════════════════════════════════════ */

/* ── Page wrapper ──────────────────────────────────────────────── */

.tender-page-wrap { max-width: 1180px; margin: 0 auto; padding: 0 16px; }

/* ── Breadcrumbs ───────────────────────────────────────────────── */

.offer-breadcrumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; padding: 14px 0 10px; font-size: .8rem; color: var(--txt3); }

.offer-breadcrumbs a { color: var(--txt2); text-decoration: none; }

.offer-breadcrumbs a:hover { color: var(--sky-h); }

.offer-breadcrumbs i { font-size: .55rem; color: var(--border); }

.offer-breadcrumbs span { color: var(--txt); font-weight: 600; }

/* ── Sidebar sticky + spacing ──────────────────────────────────── */

.offer-detail__sidebar { position: sticky; top: 84px; align-self: start; display: flex; flex-direction: column; gap: 14px; }

.offer-sidebar-card { background: var(--card); border: 1.5px solid var(--border); border-radius: 18px; padding: 20px 22px; box-shadow: 0 2px 10px rgba(0,0,0,.04); }

.offer-sidebar-card__title { font-size: .72rem; font-weight: 800; color: var(--txt); margin: 0 0 14px; text-transform: uppercase; letter-spacing: .07em; display: flex; align-items: center; gap: 7px; }

.offer-sidebar-card__title i { color: var(--sky); font-size: .85rem; }

/* ── Sidebar price card ─────────────────────────────────────────── */

.offer-sidebar-card--price { background: var(--card); border: 2px solid rgba(20,184,166,.2); border-radius: var(--r1); box-shadow: 0 4px 20px rgba(20,184,166,.08); position: relative; overflow: hidden; }

.offer-sidebar-card--price::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg,var(--sky),var(--teal)); }

.tender-sb-price-label { font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: var(--txt2); margin-bottom: 8px; }

.tender-sb-price { font-size: 2rem; font-weight: 900; color: var(--sky-h); line-height: 1.15; margin-bottom: 18px; letter-spacing: -1px; }

.tender-sb-price__cur { font-size: .95rem; font-weight: 600; color: var(--txt2); margin-left: 4px; }

.tender-sb-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 13px 16px; background: linear-gradient(135deg,var(--sky),var(--teal)); color: #fff; border-radius: var(--r1); font-size: .9rem; font-weight: 700; text-decoration: none; transition: opacity .15s, transform .15s; margin-bottom: 10px; box-sizing: border-box; }

.tender-sb-btn:hover { opacity: .92; transform: translateY(-1px); }

.tender-sb-platform { text-align: center; font-size: .75rem; color: var(--txt2); display: flex; align-items: center; justify-content: center; gap: 5px; }

.tender-sb-platform i { color: var(--txt3); }

.tender-sb-platform-link { color: var(--sky-h); text-decoration: none; font-size: .775rem; font-weight: 600; display: inline-flex; align-items: center; gap: 5px; }

.tender-sb-platform-link:hover { text-decoration: underline; }

/* ── Timeline ───────────────────────────────────────────────────── */

.tender-timeline { display: flex; flex-direction: column; }

.tender-tl-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px dashed var(--page); }

.tender-tl-row:last-child { border-bottom: none; }

.tender-tl-row--hi { background: var(--status-warning-light); border-radius: var(--r2); margin: 4px -8px; padding: 8px 8px; border-bottom: none; }

.tender-tl-row__k { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--txt3); flex-shrink: 0; }

.tender-tl-row__v { font-size: .825rem; font-weight: 800; color: var(--txt); text-align: right; }

.tender-days { display: inline-flex; align-items: center; gap: 6px; font-size: .8125rem; font-weight: 700; padding: 7px 10px; border-radius: var(--r2); margin: 6px 0 2px; width: 100%; box-sizing: border-box; }

.tender-days--ok  { background: var(--status-success-light); color: var(--em); }

.tender-days--warn{ background: var(--status-warning-light); color: var(--am); }

.tender-days--exp { background: var(--status-error-light); color: var(--rose); }

/* ── Contact buttons ────────────────────────────────────────────── */

.rq-org-contact-btn { display: flex; align-items: center; gap: 7px; padding: 9px 14px; background: var(--page); border: 1.5px solid var(--border); border-radius: var(--r2); color: var(--sky-h); font-size: .825rem; font-weight: 600; text-decoration: none; transition: background .15s, border-color .15s; margin-bottom: 6px; }

.rq-org-contact-btn:last-child { margin-bottom: 0; }

.rq-org-contact-btn:hover { background: var(--sky-ll); border-color: var(--sky-l); }

.rq-org-contact-btn i { color: var(--sky); font-size: .8rem; flex-shrink: 0; }

/* ── Category pills sidebar ─────────────────────────────────────── */

.tender-cat-pill { display: flex; align-items: center; gap: 8px; font-size: .8125rem; color: var(--txt2); padding: 6px 0; border-bottom: 1px solid var(--page); font-weight: 500; }

.tender-cat-pill:last-child { border-bottom: none; padding-bottom: 0; }

.tender-cat-pill i { color: var(--sky); font-size: .6rem; }

/* ── Org block in sidebar ───────────────────────────────────────── */

.offer-org-full { display: flex; flex-direction: column; gap: 4px; }

.offer-org-full__logo { width: 48px; height: 48px; object-fit: contain; border-radius: var(--r2); border: 1.5px solid var(--border); margin-bottom: 8px; }

.offer-org-full__name { font-size: .9375rem; font-weight: 800; color: var(--txt); line-height: 1.3; }

.offer-org-full__name a { color: var(--txt); text-decoration: none; }

.offer-org-full__name a:hover { color: var(--sky-h); }

.offer-org-full__city { font-size: .775rem; color: var(--txt2); margin-top: 2px; }

/* ── Title block ────────────────────────────────────────────────── */

.offer-title-block__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; }

.tender-title-row { display: flex; align-items: center; gap: 16px; margin: 8px 0 14px; }

.tender-title-logo { width: 80px; height: 80px; object-fit: contain; border-radius: var(--r1); border: 1.5px solid var(--border); background: var(--card); flex-shrink: 0; padding: 4px; box-shadow: 0 1px 4px rgba(0,0,0,.06); }

.offer-title { font-size: 1.625rem; font-weight: 900; color: var(--txt) !important; margin: 0; line-height: 1.25; letter-spacing: -.3px; }

/* ── Badges ─────────────────────────────────────────────────────── */

.offer-type-badge { display: inline-flex; align-items: center; gap: 4px; font-size: .7rem; font-weight: 700; padding: 4px 8px; border-radius: 6px; text-transform: uppercase; letter-spacing: .04em; line-height: 1; white-space: nowrap; }

.offer-type--work    { background: var(--sky-l); color: var(--sky-h); }

.offer-type--product { background: var(--status-success-light); color: var(--em); }

.offer-type--service { background: var(--status-warning-light); color: var(--am); }

.tender-badge--num { background: var(--txt); color: var(--border); border: 1.5px solid var(--txt2); }

/* ── Специальные бейджи тендера ─────────────────────────────────── */

.tender-badge--gov   { background: var(--sky-ll); color: var(--vio); border: 1.5px solid var(--vio); }

.tender-badge--com   { background: var(--card)7ed; color: var(--am); border: 1.5px solid var(--status-warning-light); }

.tender-badge--method{ background: var(--sky-ll); color: var(--sky-h); border: 1.5px solid var(--sky-l); }

.tender-badge--smp   { background: var(--status-success-light); color: var(--em); border: 1.5px solid var(--em); }

.tender-badge--top   { background: var(--status-warning-light); color: var(--am); border: 1.5px solid var(--status-warning-light); }

.tender-status-badge { display: inline-flex; align-items: center; gap: 5px; font-size: .72rem; font-weight: 700; padding: 5px 11px; border-radius: 4px; text-transform: uppercase; letter-spacing: .05em; line-height: 1; }

.tender-st--pub    { background: var(--status-success-light); color: var(--em); border: 1.5px solid var(--em); }

.tender-st--done   { background: var(--page); color: var(--txt2); border: 1.5px solid var(--border); }

.tender-st--cancel { background: var(--status-error-light); color: var(--rose); border: 1.5px solid var(--rose); }

.tender-st--mod    { background: var(--status-warning-light); color: var(--am); border: 1.5px solid var(--status-warning-light); }

.tender-st--draft  { background: var(--page); color: var(--txt3); border: 1.5px solid var(--border); }

/* ── Meta pills ─────────────────────────────────────────────────── */

.offer-meta-pill--cat     { background: var(--sky-ll); color: var(--sky-h); border-color: var(--sky-l); }

.offer-meta-pill--created { background: var(--page); color: var(--txt2); border-color: var(--border); }

/* ── Tabs ───────────────────────────────────────────────────────── */

.offer-tabs { display: flex; gap: 2px; border-bottom: 2px solid var(--border); padding-top: 4px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }

.offer-tabs::-webkit-scrollbar { display: none; }

.offer-tab { display: inline-flex; align-items: center; gap: 5px; padding: 8px 13px; font-size: .8rem; font-weight: 700; color: var(--txt2); text-decoration: none; border-bottom: 3px solid transparent; margin-bottom: -2px; border-radius: var(--r2) 8px 0 0; transition: all .15s; white-space: nowrap; }

.offer-tab:hover { color: var(--sky-h); background: var(--sky-ll); }

.offer-tab.active { color: var(--sky-h); border-bottom-color: var(--sky); background: var(--card); }

.rq-tab-count { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; background: var(--sky); color: #fff; font-size: .65rem; font-weight: 800; border-radius: 9px; }

/* ── Sections ───────────────────────────────────────────────────── */

.offer-section { background: var(--card); border: 1.5px solid var(--border); border-radius: var(--r1); padding: 26px 28px; margin-bottom: 16px; box-shadow: 0 2px 8px rgba(0,0,0,.035); scroll-margin-top: 120px; }

.offer-section__title { font-size: 1rem; font-weight: 900; color: var(--txt); margin: 0 0 20px; display: flex; align-items: center; gap: 9px; padding-bottom: 14px; border-bottom: 2px solid var(--page); }

.offer-section__title i { color: var(--sky); font-size: .95rem; }

.offer-section__subtitle { font-size: .72rem; font-weight: 800; color: var(--txt2); text-transform: uppercase; letter-spacing: .07em; display: flex; align-items: center; gap: 7px; margin-bottom: 10px; }

.offer-section__subtitle i { color: var(--sky); }

/* ── Quote block ────────────────────────────────────────────────── */

.offer-short-desc__icon { color: var(--sky); font-size: 1rem; opacity: .7; flex-shrink: 0; margin-top: 2px; }

/* ── Body text (full_description) ──────────────────────────────── */

.tender-body-text { font-size: .9375rem; line-height: 1.75; color: var(--txt2); }

.tender-body-text h1,.tender-body-text h2 { font-size: 1.0625rem; font-weight: 800; color: var(--txt); margin: 22px 0 10px; padding-bottom: 8px; border-bottom: 1.5px solid var(--page); }

.tender-body-text h3 { font-size: .9375rem; font-weight: 700; color: var(--txt); margin: 18px 0 8px; }

.tender-body-text h4,.tender-body-text h5,.tender-body-text h6 { font-size: .875rem; font-weight: 700; color: var(--txt2); margin: 14px 0 6px; }

.tender-body-text p { margin: 0 0 12px; }

.tender-body-text ul,.tender-body-text ol { padding-left: 22px; margin: 0 0 14px; }

.tender-body-text li { margin-bottom: 5px; }

.tender-body-text strong { color: var(--txt); }

.tender-body-text a { color: var(--sky-h); }

/* ── Condition fields (offer-qf) ────────────────────────────────── */

.offer-qf { display: flex; align-items: flex-start; gap: 14px; background: var(--page); border: 1.5px solid var(--page); border-radius: var(--r1); padding: 14px 16px; }

.offer-qf > i { width: 34px; height: 34px; border-radius: 9px; background: linear-gradient(135deg,var(--sky-ll),var(--sky-l)); color: var(--sky-h); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: .875rem; }

.offer-qf__l { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--txt3); margin-bottom: 3px; }

.offer-qf__v { font-size: .9rem; font-weight: 700; color: var(--txt); }

/* ── SME badge ──────────────────────────────────────────────────── */

.tender-smp-badge { display: inline-flex; align-items: center; gap: 8px; background: var(--status-success-light); color: var(--em); border: 1.5px solid var(--em); border-radius: var(--r2); padding: 8px 14px; font-size: .8125rem; font-weight: 700; margin-top: 14px; }

.tender-smp-badge i { color: var(--em); }

/* ── Обеспечение grid ───────────────────────────────────────────── */

.offer-org-full__rekvizity { display: grid; gap: 12px; background: var(--page); border-radius: 14px; padding: 16px; border: 1.5px solid var(--page); }

.offer-org-rekvizit { display: flex; flex-direction: column; gap: 3px; }

.offer-org-rekvizit__label { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--txt3); }

.offer-org-rekvizit__val { font-size: .9375rem; font-weight: 700; color: var(--txt); }

/* ── Files ──────────────────────────────────────────────────────── */

.tender-files-list { display: flex; flex-direction: column; gap: 8px; }

.tender-file-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--page); border: 1.5px solid var(--border); border-radius: var(--r2); padding: 12px 16px; }

.tender-file-row:hover { border-color: var(--status-success-light); background: var(--sky-ll); }

.tender-file-row__info { display: flex; align-items: center; gap: 10px; min-width: 0; }

.tender-file-row__icon { color: var(--rose); font-size: 1.25rem; flex-shrink: 0; }

.tender-file-row__name { font-size: .875rem; font-weight: 600; color: var(--txt); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.tender-file-row__desc { font-size: .75rem; color: var(--txt2); margin-top: 2px; }

.tender-file-row__btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; background: var(--sky); color: #fff; border-radius: var(--r2); font-size: .8rem; font-weight: 700; text-decoration: none; white-space: nowrap; flex-shrink: 0; transition: background .15s; }

.tender-file-row__btn:hover { background: var(--sky-h); }

/* ── Tags ───────────────────────────────────────────────────────── */

.tender-tags-wrap { display: flex; flex-wrap: wrap; gap: 8px; }

.tender-tag-pill { padding: 5px 13px; background: var(--sky-l); color: var(--sky-h); border: 1.5px solid var(--sky-l); border-radius: var(--r3); font-size: .8rem; font-weight: 600; }

/* ── Related tender cards (reuse org-request-card pattern) ──────── */

.org-request-card { display: block; background: var(--card); border: 1.5px solid var(--border); border-radius: var(--r1); padding: 14px 16px; text-decoration: none; transition: border-color .15s, box-shadow .15s; margin-bottom: 10px; }

.org-request-card:last-child { margin-bottom: 0; }

.org-request-card:hover { border-color: var(--status-success-light); box-shadow: 0 4px 14px rgba(20,184,166,.1); }

.org-request-card__top { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; flex-wrap: wrap; }

.org-request-budget { font-size: .8rem; font-weight: 700; color: var(--sky-h); margin-left: auto; }

.org-request-card__title { font-size: .9rem; font-weight: 700; color: var(--txt); line-height: 1.4; margin-bottom: 8px; }

.org-request-card__meta { display: flex; flex-wrap: wrap; gap: 12px; font-size: .75rem; color: var(--txt2); }

.org-request-card__meta i { color: var(--sky); margin-right: 3px; }

/* ── Responsive ─────────────────────────────────────────────────── */

/* ═══════════════════════════════════════════════════
   СТРАНИЦА ПРЕСС-РЕЛИЗА — layout по образцу organization
   ═══════════════════════════════════════════════════ */

/* ── Основное изображение статьи ─────────────────── */

.pr-main-image-wrap { padding: 0; overflow: hidden; }

.pr-main-image {
    width: 100%;
    height: auto;
    max-height: 480px;
    object-fit: cover;
    display: block;
    border-radius: var(--r1);
}

/* ── Контент (Quill) ──────────────────────────────── */

.pr-article__content {
    font-size: 15px;
    line-height: 1.85;
    color: var(--txt);
}

.pr-article__content h2 { font-size: 1.4rem; font-weight: 800; color: var(--txt); margin: 32px 0 14px; }

.pr-article__content h3 { font-size: 1.15rem; font-weight: 700; color: var(--txt); margin: 24px 0 10px; }

.pr-article__content p  { margin: 0 0 16px; }

.pr-article__content ul,
.pr-article__content ol { margin: 0 0 16px; padding-left: 26px; }

.pr-article__content li { margin-bottom: 8px; }

.pr-article__content img { max-width: 100%; height: auto; border-radius: var(--r2); margin: 20px 0; }

.pr-article__content blockquote {
    border-left: 4px solid var(--sky);
    padding: 12px 20px;
    margin: 20px 0;
    background: var(--sky-ll);
    border-radius: 0 8px 8px 0;
    font-style: italic;
    color: var(--txt2);
}

/* ── Сайдбар: ссылка на страницу компании ─────────── */

.pr-co-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
    padding: 8px 16px;
    background: linear-gradient(135deg, var(--sky-ll), var(--sky-l));
    border: 1.5px solid var(--sky-l);
    border-radius: var(--r2);
    font-size: .8rem;
    font-weight: 700;
    color: var(--sky-h);
    text-decoration: none;
    transition: all .18s;
}

.pr-co-link:hover { background: var(--sky-h); border-color: var(--sky-h); color: #fff; }

/* ── Сайдбар: отступ между карточками ─────────────── */

/* ── Сайдбар: теги ────────────────────────────────── */

.pr-tags-wrap { display: flex; flex-wrap: wrap; gap: 8px; }

.pr-tag-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    background: var(--sky-ll);
    border: 1.5px solid var(--sky-l);
    border-radius: 100px;
    font-size: .78rem;
    font-weight: 700;
    color: var(--sky-h);
    text-decoration: none;
    transition: all .18s;
}

.pr-tag-pill:hover { background: var(--sky-h); border-color: var(--sky-h); color: #fff; }

/* ── Логотип в карточке похожей публикации ────────── */

.pr-co-logo-xs {
    width: 18px;
    height: 18px;
    border-radius: 4px;
    object-fit: cover;
    flex-shrink: 0;
}

/* ── Ссылка «Все N публикаций» в заголовке секции ── */

.pr-all-link {
    margin-left: auto;
    font-size: .75rem;
    font-weight: 700;
    color: var(--sky-h);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px;
    border-radius: var(--r3);
    background: var(--sky-ll);
    border: 1px solid var(--sky-l);
    transition: all .15s;
}

.pr-all-link:hover { background: var(--sky-h); border-color: var(--sky-h); color: #fff; }

/* ── Адаптивность ─────────────────────────────────── */

.vd-wrap{max-width:1060px;margin:36px auto;padding:0 20px;display:grid;grid-template-columns:1fr 300px;gap:24px;align-items:start}

.vd-hero{background:var(--card);border-radius:16px;padding:32px;box-shadow:0 4px 20px rgba(0,0,0,.07);margin-bottom:20px}

.vd-hero-top{display:flex;gap:20px;align-items:flex-start;margin-bottom:24px}

.vd-logo{width:110px;height:110px;flex-shrink:0;background:var(--page);border-radius:12px;border:1px solid var(--border);display:flex;align-items:center;justify-content:center;overflow:hidden}

.vd-logo img{max-width:96px;max-height:96px;object-fit:contain}

.vd-title{font-size:1.65rem;font-weight:800;color:var(--txt);margin:0 0 8px;line-height:1.3}

.vd-company{display:flex;align-items:center;gap:8px;font-size:1rem;color:var(--txt2);margin-bottom:10px;font-weight:500}

.vd-salary{font-size:1.5rem;font-weight:700;color:var(--sky);margin-bottom:14px}

.vd-badges{display:flex;flex-wrap:wrap;gap:7px}

.vd-badge{padding:5px 11px;border-radius:6px;font-size:12px;font-weight:600;display:inline-flex;align-items:center;gap:5px}

.vd-meta-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px;margin-top:22px;padding-top:22px;border-top:1px solid var(--border)}

.vd-meta-item{display:flex;align-items:center;gap:10px;padding:11px 14px;background:var(--page);border-radius:10px}

.vd-meta-item i{width:18px;text-align:center;color:var(--sky);font-size:.95rem;flex-shrink:0}

.vd-meta-label{font-size:10px;color:var(--txt3);text-transform:uppercase;font-weight:600;margin-bottom:2px}

.vd-meta-value{font-size:13px;color:var(--txt);font-weight:600}

.vd-section{background:var(--card);border-radius:16px;padding:24px 32px;box-shadow:0 4px 20px rgba(0,0,0,.07);margin-bottom:16px}

.vd-section-title{font-size:1.05rem;font-weight:700;color:var(--txt);margin:0 0 16px;padding-left:12px;border-left:4px solid var(--sky);display:flex;align-items:center;gap:8px}

.vd-section-title i{color:var(--sky)}

.vd-text{color:var(--txt2);line-height:1.85;white-space:pre-wrap;font-size:.93rem}

.vd-skills{display:flex;flex-wrap:wrap;gap:8px}

.vd-skill{background:var(--sky-ll);color:var(--sky-h);padding:6px 14px;border-radius:20px;font-size:13px;font-weight:600;border:1.5px solid var(--sky-l)}

.vd-benefits{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:9px}

.vd-benefit{display:flex;align-items:center;gap:9px;padding:11px 14px;background:var(--sky-ll);border-radius:10px;color:var(--sky-h);font-weight:600;font-size:13px}

.vd-benefit i{color:var(--sky);width:16px;text-align:center}

.vd-aside{position:sticky;top:80px}

.vd-sidebar-card{background:var(--card);border-radius:16px;padding:20px;box-shadow:0 4px 20px rgba(0,0,0,.07);margin-bottom:16px}

.vd-sidebar-title{font-size:11px;font-weight:700;color:var(--txt3);text-transform:uppercase;letter-spacing:.06em;margin-bottom:14px}

.vd-btn-apply{display:block;width:100%;padding:14px;background:linear-gradient(135deg,var(--sky),var(--sky-h));color: #fff;border:none;border-radius:10px;font-size:.95rem;font-weight:700;text-align:center;text-decoration:none;cursor:pointer;transition:all .3s;box-shadow:0 4px 14px rgba(20,184,166,.3);margin-bottom:10px}

.vd-btn-apply:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(20,184,166,.4)}

.vd-btn-back{display:block;padding:11px;background:var(--page);color:var(--txt2);border-radius:9px;font-size:13px;font-weight:600;text-align:center;text-decoration:none;transition:background .2s}

.offer-title-block__badges{display:flex;flex-wrap:wrap;gap:7px;margin-top:14px}

/* vacancy-specific badge colours using offer-type-badge base */

.offer-badge--demo    {background:rgba(239,68,68,.12);color:var(--rose);border:1px solid rgba(239,68,68,.25)}

.offer-badge--premium {background:linear-gradient(135deg,var(--am),var(--am));color:var(--am)}

.offer-badge--gov     {background:rgba(59,130,246,.12);color:var(--sky-h);border:1px solid rgba(59,130,246,.25)}

.offer-badge--verified{background:rgba(16,185,129,.12);color:var(--em);border:1px solid rgba(16,185,129,.25)}

.offer-badge--agency  {background:rgba(236,72,153,.12);color:var(--rose);border:1px solid rgba(236,72,153,.25)}

.offer-badge--urgent  {background:rgba(239,68,68,.12);color:var(--rose);border:1px solid rgba(239,68,68,.25)}

.offer-contact-name{display:flex;align-items:center;gap:8px;font-size:.875rem;color:var(--txt2);margin-top:10px;padding-top:10px;border-top:1px solid var(--page)}

.offer-contact-name i{color:var(--sky)}

.text-red{color:var(--rose)}

/* salary price — smaller so long ranges don't wrap */

.offer-price-card__price{font-size:1.45rem;letter-spacing:-.3px}

.offer-short-desc{
  border:2px solid var(--sky) !important;
  border-radius:12px !important;
  padding:14px 18px !important;
}

.offer-sidebar-card--mt{margin-top:12px}

.offer-sidebar-btn-mt{margin-top:10px;display:flex;align-items:center;justify-content:center;gap:7px}

/* ─── Логотип + текст в заголовке ───────────────────────────── */

.vac-hero-layout{display:flex;gap:20px;align-items:flex-start;margin-top:14px}

.vac-hero-logo{flex-shrink:0}

.vac-hero-logo__img{
  width:80px;height:80px;
  object-fit:contain;
  border-radius:14px;
  border:1.5px solid var(--border);
  background:var(--page);
  display:block;
}

.vac-hero-logo__avatar{
  width:80px;height:80px;
  border-radius:14px;
  background:linear-gradient(135deg,var(--sky),var(--teal));
  color: #fff;font-size:1.5rem;font-weight:900;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}

.vac-hero-content{flex:1;min-width:0}

/* ─── Мета-пилюли — цветные ─────────────────────────────────── */

.offer-meta-pill{
  display:inline-flex;align-items:center;gap:5px;
  padding:5px 11px;border-radius:4px;
  font-size:.72rem;font-weight:700;line-height:1;
  text-decoration:none;white-space:nowrap;
  text-transform:uppercase;
  letter-spacing:.05em;
  border:1px solid transparent;
  transition:opacity .15s;
}

.offer-meta-pill:hover{opacity:.85}

.offer-meta-pill--company{background:var(--sky-ll);color:var(--sky-h);border-color:var(--sky-l)}

.offer-meta-pill--company i{color:var(--sky-h)}

.offer-meta-pill--city{background:var(--sky-l);color:var(--sky-h);border-color:var(--sky)}

.offer-meta-pill--city i{color:var(--sky)}

.offer-meta-pill--views{background:var(--sky-ll);color:var(--vio);border-color:var(--vio)}

.offer-meta-pill--views i{color:var(--vio)}

.offer-meta-pill--date{background:var(--status-warning-light);color:var(--am);border-color:var(--am)}

.offer-meta-pill--date i{color:var(--am)}

.offer-meta-pill--demo{background:var(--status-error-light);color:var(--rose);border-color:var(--rose);font-weight:700}

.offer-meta-pill--demo i{color:var(--rose)}

.offer-meta-pill--gov{background:var(--sky-l);color:var(--sky-h);border-color:var(--sky);font-weight:700}

.offer-meta-pill--gov i{color:var(--sky)}

.offer-meta-pill--private{background:var(--status-success-light);color:var(--em);border-color:var(--em);font-weight:700}

.offer-meta-pill--private i{color:var(--em)}

.offer-detail-page .offer-type-badge{border-radius:4px;}

.vd-breadcrumb{max-width:1060px;margin:20px auto 0;padding:0 20px;font-size:.8rem}

.vd-breadcrumb a{color:var(--txt2);text-decoration:none;display:inline-flex;align-items:center;gap:6px;transition:color .2s}

.vd-breadcrumb a:hover{color:var(--sky)}

.vd-meta-value--urgent{color:var(--rose)}

.vd-lang-row{display:flex;align-items:center;gap:10px;padding:9px 14px;background:var(--page);border-radius:8px;margin-bottom:7px;font-size:.875rem}

.vd-lang-row i{color:var(--sky)}

.vd-contact-link{color:var(--sky);text-decoration:none;word-break:break-all}

.vd-contact-link:hover{color:var(--sky-h);text-decoration:underline}

.vd-stat-icon--purple{color:var(--vio);margin-right:5px}

.vd-stat-icon--amber{color:var(--am);margin-right:5px}

.vd-stat-icon--sky{color:var(--sky);margin-right:5px}

.vd-stat-icon--red{color:var(--rose);margin-right:5px}

.vd-sidebar-cta{background:linear-gradient(135deg,var(--sky-ll),var(--sky-ll));border:1px solid var(--sky-l)}

.vd-sidebar-cta__head{text-align:center;margin-bottom:14px}

.vd-sidebar-cta__title{font-size:1rem;font-weight:700;color:var(--txt);margin-bottom:4px}

.vd-sidebar-cta__sub{font-size:.75rem;color:var(--txt2)}

.vd-benefits-other{margin-top:12px}

.vd-company-icon{width:38px;height:38px;background:var(--page);border-radius:6px;display:flex;align-items:center;justify-content:center;flex-shrink:0}

.vd-btn-back:hover{background:var(--border);color:var(--txt2)}

.vd-stat-row{display:flex;justify-content:space-between;align-items:center;padding:7px 0;border-bottom:1px solid var(--page);font-size:13px}

.vd-stat-row:last-child{border-bottom:none}

.vd-stat-row .lbl{color:var(--txt3)}

.vd-stat-row .val{color:var(--txt2);font-weight:600}

.vd-contact-item{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--page);font-size:13px}

.vd-contact-item:last-child{border-bottom:none}

.vd-contact-item i{width:18px;text-align:center;color:var(--sky)}

.respond-container { max-width: 700px; margin: 40px auto; padding: 0 20px; }

.respond-card { background: var(--card); border-radius: var(--r1); padding: 40px; box-shadow: 0 4px 16px rgba(0,0,0,0.1); }

.respond-header { border-bottom: 2px solid var(--border); padding-bottom: 20px; margin-bottom: 30px; text-align: center; }

.respond-header h1 { font-size: 1.8rem; color: var(--txt); margin-bottom: 10px; }

.vacancy-info { background: var(--page); padding: 16px; border-radius: var(--r2); margin-bottom: 10px; text-align: center; }

.vacancy-info-title { font-size: 1.2rem; font-weight: 700; color: var(--txt); margin-bottom: 4px; }

.vacancy-info-company { color: var(--txt2); }

.form-group { margin-bottom: 24px; }

.form-label { display: block; font-weight: 600; color: var(--txt2); margin-bottom: 8px; }

.form-label.required::after { content: ' *'; color: var(--rose); }

.form-input, .form-textarea { width: 100%; padding: 12px 16px; border: 1.5px solid var(--border); border-radius: var(--r2); font-size: 1rem; transition: all 0.3s; }

.form-input:focus, .form-textarea:focus { outline: none; border-color: var(--sky); box-shadow: 0 0 0 3px rgba(20,184,166,0.1); }

.form-textarea { resize: vertical; min-height: 120px; }

.file-upload { border: 2px dashed var(--border); border-radius: var(--r2); padding: 24px; text-align: center; cursor: pointer; transition: all 0.3s; position: relative; }

.file-upload:hover { border-color: var(--sky); background: var(--sky-ll); }

.file-upload input[type="file"] { position: absolute; opacity: 0; width: 100%; height: 100%; cursor: pointer; top: 0; left: 0; }

.file-upload-icon { font-size: 2.5rem; color: var(--sky); margin-bottom: 8px; }

.file-upload-text { color: var(--txt2); font-size: 0.9rem; }

.btn { display: inline-flex; align-items: center; gap: 8px; padding: 14px 32px; border-radius: var(--r2); font-weight: 600; font-size: 1rem; cursor: pointer; transition: all 0.3s; border: none; text-decoration: none; }

.btn-primary { background: var(--sky); color: #fff !important; }

.btn-primary:hover { background: var(--sky-h); color: #fff !important; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(20,184,166,0.3); }

.alert { padding: 16px 20px; border-radius: var(--r2); margin-bottom: 20px; }

.alert-success { background: var(--sky-l); border-left: 4px solid var(--em); color: var(--em); }

.alert-error { background: var(--status-error-light); border-left: 4px solid var(--rose); color: var(--rose); }

.success-icon { font-size: 3rem; color: var(--em); text-align: center; margin-bottom: 16px; }

.honeypot { position: absolute; left: -9999px; }

.respond-center { text-align: center; }

.respond-success-title { text-align: center; color: var(--em); margin-bottom: 12px; font-size: 1.5rem; }

.respond-success-text { text-align: center; color: var(--txt2); margin-bottom: 24px; }

.alert-list { margin: 8px 0 0 20px; }

* {
    box-sizing: border-box;
}

body {
    font-family: 'Inter', -apple-system, system-ui, sans-serif;
}

.preview-page {
    background: var(--card);
}

.page-content {
    background: var(--card);
    padding: 20mm 25mm;
}

.proposal-logo {
    width: 70px;
    height: 70px;
    min-width: 70px;
    border-radius: var(--r3);
    background: var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    font-weight: 700;
    color: var(--txt3);
    flex-shrink: 0;
    overflow: hidden;
}

.proposal-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 4px;
}

.platform-footer {
    clear: both;
    text-align: center;
    font-size: 9px;
    color: var(--txt3);
    font-family: 'Inter', -apple-system, system-ui, sans-serif;
    margin-top: 20px;
    padding-top: 15px;
    padding-bottom: 30px;
    border-top: 1px solid var(--border);
}

.platform-footer a {
    color: var(--sky);
    text-decoration: none;
    font-weight: 500;
}

.platform-footer a:hover {
    text-decoration: underline;
}

.digital-signature {
    float: right;
    margin-bottom: 30px;
    margin-right: 40px;
    width: 180px;
    border: 2px solid var(--sky);
    border-radius: 4px;
    padding: 12px;
    background: var(--sky-ll);
    font-family: var(--font-mono);
    font-size: 8px;
    color: var(--sky-h);
    line-height: 1.4;
}

.digital-signature .ds-header {
    font-weight: 700;
    text-align: center;
    margin-bottom: 8px;
    font-size: 9px;
    text-transform: uppercase;
    border-bottom: 1px solid var(--sky);
    padding-bottom: 5px;
}

.digital-signature .ds-body {
    font-size: 7px;
}

.digital-signature .ds-row {
    margin-bottom: 3px;
}

.digital-signature .ds-label {
    font-weight: 600;
    color: var(--sky-h);
}

.digital-signature .ds-value {
    color: var(--sky-h);
}

.digital-signature .ds-footer {
    margin-top: 8px;
    padding-top: 6px;
    border-top: 1px solid var(--sky);
    text-align: center;
    font-size: 6px;
    color: var(--sky);
    font-style: italic;
}

.detail-item {
    margin-bottom: 3px;
}

.detail-item strong {
    font-weight: 600;
}

.template-1 {
    font-family: 'Inter', -apple-system, system-ui, sans-serif;
}

.template-1 table {
    width: 100%;
    border-collapse: collapse;
}

.template-1 .header-table {
    margin-bottom: 25px;
    border-bottom: 2px solid var(--txt);
    padding-bottom: 20px;
}

.template-1 .header-table td {
    vertical-align: top;
    padding: 5px;
}

.template-1 .logo-cell {
    width: 80px;
    text-align: center;
}

.template-1 .company-info-cell {
    padding-left: 15px;
}

.template-1 .bank-info-cell {
    width: 35%;
    text-align: right;
    font-size: 8px;
    line-height: 1.6;
    color: var(--txt2);
}

.template-1 .company-name {
    font-size: 22px;
    font-weight: 700;
    color: var(--txt);
    margin-bottom: 10px;
    font-family: 'Inter', -apple-system, system-ui, sans-serif;
    line-height: 1.3;
}

.template-1 .company-details {
    font-size: 9px;
    line-height: 1.7;
    color: var(--txt2);
}

.template-1 .recipient-block {
    margin-bottom: 30px;
    font-size: 11px;
    padding: 18px 22px;
    background: var(--page);
    border-radius: var(--r3);
}

.template-1 .recipient-block .label {
    font-weight: 600;
    color: var(--txt3);
    margin-bottom: 6px;
    text-transform: uppercase;
    font-size: 9px;
    letter-spacing: 0.5px;
}

.template-1 .recipient-block .value {
    color: var(--txt);
    font-size: 12px;
    font-weight: 500;
}

.template-1 .proposal-title {
    text-align: center;
    font-size: 20px;
    font-weight: 700;
    color: var(--txt);
    margin: 35px 0;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-family: 'PT Serif', serif;
}

.template-1 .date-block {
    text-align: right;
    color: var(--txt3);
    margin-bottom: 25px;
    font-size: 11px;
    font-weight: 500;
}

.template-1 .content {
    margin: 30px 0;
    line-height: 1.8;
    color: var(--txt);
    text-align: justify;
    font-size: 12px;
}

.template-1 .content p {
    margin-bottom: 14px;
}

.template-1 .signature-table {
    margin-top: 50px;
}

.template-1 .signature-table td {
    vertical-align: bottom;
    padding: 5px;
}

.template-1 .signature-left {
    font-size: 11px;
    color: var(--txt3);
    width: 50%;
}

.template-1 .signature-right {
    text-align: right;
    width: 50%;
}

.template-1 .signature-line {
    margin-bottom: 25px;
    color: var(--txt2);
    font-size: 18px;
}

.template-1 .signature-name {
    font-weight: 600;
    color: var(--txt);
    font-size: 13px;
}

.template-2 {
    font-family: 'Inter', -apple-system, system-ui, sans-serif;
}

.template-2 table {
    width: 100%;
    border-collapse: collapse;
}

.template-2 .header-table {
    margin-bottom: 25px;
    border-bottom: 3px solid var(--sky);
    padding-bottom: 20px;
}

.template-2 .header-table td {
    vertical-align: top;
    padding: 5px;
}

.template-2 .logo-cell {
    width: 80px;
    text-align: center;
}

.template-2 .company-info-cell {
    padding-left: 15px;
}

.template-2 .bank-info-cell {
    width: 35%;
    text-align: right;
    font-size: 8px;
    line-height: 1.6;
    color: var(--txt2);
}

.template-2 .company-name {
    font-size: 24px;
    font-weight: 700;
    color: var(--sky);
    margin-bottom: 10px;
    font-family: 'Inter', -apple-system, system-ui, sans-serif;
    line-height: 1.3;
}

.template-2 .company-details {
    font-size: 9px;
    line-height: 1.7;
    color: var(--txt2);
}

.template-2 .recipient-block {
    margin-bottom: 30px;
    padding: 20px 25px;
    background: var(--sky-ll);
    border-left: 4px solid var(--sky);
    font-size: 11px;
}

.template-2 .recipient-block .label {
    font-weight: 600;
    color: var(--sky-h);
    margin-bottom: 6px;
    text-transform: uppercase;
    font-size: 9px;
    letter-spacing: 0.5px;
}

.template-2 .recipient-block .value {
    color: var(--txt);
    font-size: 12px;
    font-weight: 500;
}

.template-2 .proposal-title {
    text-align: center;
    font-size: 22px;
    font-weight: 700;
    color: var(--sky);
    margin: 35px 0;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-family: 'PT Serif', serif;
}

.template-2 .date-block {
    text-align: right;
    color: var(--txt3);
    margin-bottom: 25px;
    font-size: 11px;
    font-weight: 500;
}

.template-2 .content {
    margin: 30px 0;
    line-height: 1.8;
    color: var(--txt);
    text-align: justify;
    font-size: 12px;
}

.template-2 .content p {
    margin-bottom: 14px;
}

.template-2 .signature-block {
    margin-top: 50px;
    text-align: right;
}

.template-2 .signature-line {
    margin-bottom: 25px;
    color: var(--txt2);
    font-size: 18px;
}

.template-2 .signature-name {
    font-weight: 600;
    color: var(--sky);
    font-size: 13px;
}

.template-2 .signature-position {
    font-size: 11px;
    color: var(--txt3);
    margin-top: 5px;
}

.template-3 {
    font-family: 'Inter', -apple-system, system-ui, sans-serif;
}

.template-3 table {
    width: 100%;
    border-collapse: collapse;
}

.template-3 .header {
    background: var(--txt);
    color: white;
    padding: 30px;
    margin: -20mm -20mm 35px -20mm;
}

.template-3 .header-table {
    width: 100%;
}

.template-3 .header-table td {
    vertical-align: top;
    padding: 5px;
}

.template-3 .logo-cell {
    width: 80px;
    text-align: center;
}

.template-3 .company-info-cell {
    padding-left: 15px;
}

.template-3 .date-cell {
    text-align: right;
    font-size: 10px;
    opacity: 0.9;
    width: 120px;
}

.template-3 .company-name {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 10px;
    font-family: 'Inter', -apple-system, system-ui, sans-serif;
    line-height: 1.3;
}

.template-3 .company-details {
    font-size: 8px;
    line-height: 1.6;
    opacity: 0.9;
}

.template-3 .recipient-table {
    width: 100%;
    margin-bottom: 30px;
    background: var(--page);
    border-radius: var(--r3);
    padding: 20px;
}

.template-3 .recipient-table td {
    vertical-align: top;
    padding: 8px 12px;
    width: 50%;
}

.template-3 .recipient-item .label {
    font-weight: 600;
    color: var(--txt3);
    margin-bottom: 6px;
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.template-3 .recipient-item .value {
    color: var(--txt);
    font-size: 12px;
    font-weight: 500;
}

.template-3 .proposal-title {
    text-align: center;
    font-size: 22px;
    font-weight: 700;
    color: var(--txt);
    margin: 35px 0;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-family: 'PT Serif', serif;
}

.template-3 .content {
    margin: 30px 0;
    line-height: 1.8;
    color: var(--txt);
    text-align: justify;
    font-size: 12px;
}

.template-3 .content p {
    margin-bottom: 14px;
}

.template-3 .signature-block {
    margin-top: 50px;
    padding: 25px;
    background: var(--page);
    border-radius: var(--r3);
}

.template-3 .signature-table {
    width: 100%;
}

.template-3 .signature-table td {
    vertical-align: bottom;
    padding: 5px;
}

.template-3 .signature-info {
    font-size: 11px;
    width: 50%;
}

.template-3 .signature-position {
    font-weight: 600;
    color: var(--txt);
    margin-bottom: 5px;
    font-size: 12px;
}

.template-3 .signature-line {
    text-align: right;
    width: 50%;
}

.template-3 .signature-underline {
    margin-bottom: 25px;
    color: var(--txt2);
    font-size: 18px;
}

.template-3 .signature-name {
    font-weight: 600;
    color: var(--txt);
    font-size: 13px;
}

.template-4 {
    font-family: 'Inter', -apple-system, system-ui, sans-serif;
}

.template-4 table {
    width: 100%;
    border-collapse: collapse;
}

.template-4 .header {
    background: linear-gradient(135deg, var(--sky-h) 0%, var(--sky) 100%);
    color: white;
    padding: 35px;
    margin: -20mm -20mm 35px -20mm;
}

.template-4 .header-top-table {
    width: 100%;
    margin-bottom: 20px;
}

.template-4 .header-top-table td {
    vertical-align: top;
    padding: 5px;
}

.template-4 .logo-cell {
    width: 80px;
    text-align: center;
}

.template-4 .company-name-cell {
    padding-left: 15px;
}

.template-4 .date-cell {
    text-align: right;
    font-size: 11px;
    opacity: 0.95;
    width: 140px;
}

.template-4 .company-name {
    font-size: 26px;
    font-weight: 700;
    font-family: 'Inter', -apple-system, system-ui, sans-serif;
    line-height: 1.3;
}

.template-4 .details-table {
    width: 100%;
}

.template-4 .details-table td {
    vertical-align: top;
    padding: 4px 8px;
    font-size: 8px;
    line-height: 1.6;
    opacity: 0.95;
    width: 33.33%;
}

.template-4 .recipient-table {
    width: 100%;
    margin-bottom: 30px;
    background: var(--sky-ll);
    border-radius: var(--r3);
    border: 1px solid var(--sky-l);
    padding: 22px;
}

.template-4 .recipient-table td {
    vertical-align: top;
    padding: 8px 12px;
    width: 50%;
}

.template-4 .recipient-item .label {
    font-weight: 600;
    color: var(--sky-h);
    margin-bottom: 6px;
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.template-4 .recipient-item .value {
    color: var(--txt);
    font-size: 12px;
    font-weight: 500;
}

.template-4 .proposal-title {
    text-align: center;
    font-size: 24px;
    font-weight: 700;
    color: var(--sky);
    margin: 35px 0;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-family: 'PT Serif', serif;
}

.template-4 .content {
    margin: 30px 0;
    line-height: 1.8;
    color: var(--txt);
    text-align: justify;
    font-size: 12px;
}

.template-4 .content p {
    margin-bottom: 14px;
}

.template-4 .signature-block {
    margin-top: 50px;
    text-align: center;
}

.template-4 .signature-greeting {
    font-size: 12px;
    color: var(--txt3);
    margin-bottom: 35px;
    font-style: italic;
}

.template-4 .signature-line {
    display: inline-block;
    border-bottom: 2px solid var(--txt);
    width: 220px;
    margin-bottom: 10px;
}

.template-4 .signature-name {
    font-weight: 700;
    color: var(--txt);
    font-size: 14px;
}

.template-4 .signature-position {
    font-size: 11px;
    color: var(--txt3);
    margin-top: 5px;
}

/* ═══════════════════════════════════════════════════════
   MOBILE BURGER + SIDEBAR DRAWER
   ═══════════════════════════════════════════════════════ */

.mob-burger {
  display: none;
  position: fixed;
  top: 10px; left: 10px;
  z-index: 1100;
  width: 42px; height: 42px;
  border-radius: var(--r2);
  border: none;
  background: var(--sky);
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0,0,0,.25);
  align-items: center;
  justify-content: center;
  transition: background .2s;
}

.mob-burger:hover { background: var(--sky-h); }

.mob-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 1000;
  opacity: 0;
  transition: opacity .25s;
}

.mob-overlay--vis {
  display: block;
  opacity: 1;
}

body.mob-no-scroll { overflow: hidden; }

/* ── Dashboard Alerts ── */
.dash-alert {
  display: flex; gap: 16px; align-items: flex-start;
  padding: 20px; border-radius: 8px; margin-bottom: 24px;
  border-left: 4px solid; word-break: break-word;
}
.dash-alert-warn {
  background: linear-gradient(135deg, #fff7ed, #ffedd5);
  border-color: #fb923c;
  box-shadow: 0 2px 8px rgba(251,146,60,.1);
}
.dash-alert-info {
  background: linear-gradient(135deg, #eff6ff, #dbeafe);
  border-color: #3b82f6;
  box-shadow: 0 2px 8px rgba(59,130,246,.1);
}
.dash-alert-ico { font-size: 24px; margin-top: 4px; flex-shrink: 0; }
.dash-alert-warn .dash-alert-ico { color: #fb923c; }
.dash-alert-info .dash-alert-ico { color: #3b82f6; }
.dash-alert-body { flex: 1; min-width: 0; }
.dash-alert-body h4 { margin: 0 0 8px; font-size: 16px; font-weight: 700; }
.dash-alert-warn .dash-alert-body h4 { color: #9a3412; }
.dash-alert-info .dash-alert-body h4 { color: #1e40af; }
.dash-alert-body p { margin: 0 0 16px; line-height: 1.6; }
.dash-alert-btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 24px; text-decoration: none;
}
@media (max-width: 480px) {
  .dash-alert { flex-direction: column; gap: 10px; padding: 14px; }
  .dash-alert-ico { font-size: 20px; margin-top: 0; }
  .dash-alert-body h4 { font-size: 14px; }
  .dash-alert-body p { font-size: 13px; }
  .dash-alert-btn { width: 100%; justify-content: center; padding: 10px 16px; font-size: 13px; }
}

/* ═══════════════════════════════════════════════════════
   DASHBOARD RESPONSIVE — Tablet / Mobile
   ═══════════════════════════════════════════════════════ */

/* ── Планшет ≤1024px ── */
@media (max-width: 1024px) {

  .dashboard-container { padding: 20px; }

  .dashboard-header { padding: 32px 36px; min-height: 120px; }
  .dashboard-header h1 { font-size: 22px; }

  .db-kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .db-chart-canvas { height: 240px; }

  .activity-section { padding: 16px 18px; }
  .activity-section .section-header h2 { font-size: 15px; }

  .welcome-card { padding: 18px 20px !important; }
  .welcome-card-info h2 { font-size: 16px !important; }

  .action-cards > a { min-width: 140px; }

  .data-table th,
  .data-table td { padding: 10px 12px; font-size: 13px; }
}

/* ── ≤860px — sidebar drawer ── */
@media (max-width: 860px) {

  .mob-burger { display: flex; }

  .dashboard-sidebar {
    position: fixed;
    top: 0; left: 0;
    width: 270px; min-width: 270px;
    height: 100vh;
    transform: translateX(-100%);
    transition: transform .28s cubic-bezier(.4,0,.2,1);
    z-index: 1050;
    border-right: none;
    overflow-y: auto;
  }

  .dashboard-sidebar.sb-open {
    transform: translateX(0);
  }

  .sidebar-nav {
    flex-direction: column;
    flex-wrap: nowrap;
    padding: 8px;
    gap: 2px;
  }

  .sidebar-link {
    padding: 10px 14px;
    font-size: 14px;
    gap: 10px;
    flex: none;
  }

  .sidebar-footer { display: flex; flex-direction: column; }

  .dashboard-main { width: 100%; }

  .dashboard-container { padding: 16px 14px; padding-top: 58px; }

  .dashboard-header {
    flex-direction: column;
    gap: 12px;
    text-align: center;
    padding: 18px 16px;
  }

  .dashboard-header .header-left { text-align: center; max-width: 100%; }
  .dashboard-header h1 { font-size: 20px; word-break: break-word; }
  .dashboard-header .header-left p { font-size: 13px; }
  .dashboard-header .header-right { width: 100%; }
  .dashboard-header .btn { width: 100%; justify-content: center; }

  .section-header { flex-wrap: wrap; gap: 8px; }
  .section-header h2 { word-break: break-word; min-width: 0; }
  .welcome-card-info h2 { word-break: break-word; }

  .db-kpi-strip { padding: 14px 12px 10px; }
  .db-kpi-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .kpi-row { padding: 10px; }
  .kpi-num { font-size: 18px; }

  .db-chart-wrap { margin-bottom: 16px; }
  .db-chart-head { padding: 12px 14px 0; }
  .db-chart-canvas { height: 200px; padding: 10px 12px 14px; }
  .db-chart-legend { display: none; }

  .welcome-card { padding: 14px 16px !important; margin-bottom: 16px; }
  .welcome-card-content { gap: 12px; }
  .welcome-card-icon { width: 44px; height: 44px; }
  .welcome-card-icon i { font-size: 18px; }
  .welcome-card-info h2 { font-size: 15px !important; margin-bottom: 8px !important; }
  .welcome-card-details .wc-badge { padding: 4px 10px; font-size: 11px; height: 26px; }

  .activity-section { padding: 14px; margin-bottom: 16px; }
  .activity-section .section-header { margin-bottom: 12px; }
  .activity-section .section-header h2 { font-size: 14px; }
  .view-all-link { font-size: 12px; }

  .action-cards { gap: 10px; }
  .action-cards > a { min-width: 120px; }
  .action-card { padding: 14px 10px; }
  .action-icon { width: 38px; height: 38px; margin-bottom: 8px; }
  .action-icon i { font-size: 16px; }
  .action-card h3 { font-size: 12px; }
  .action-card p { font-size: 10px; }

  .table-container { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .data-table { min-width: 520px; }

  .op-free-tier { flex-direction: column; }
  .op-free-left {
    border-right: none;
    border-bottom: 1px solid var(--border);
    min-width: unset;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
  }
  .op-free-items { flex-direction: column; }
  .op-free-item { border-right: none; border-bottom: 1px solid var(--page); }
  .op-free-item:last-child { border-bottom: none; }

  .nd-layout { grid-template-columns: 1fr; }
  .nd-sidebar { position: static; order: -1; flex-direction: row; flex-wrap: wrap; }
  .nd-sb-card { flex: 1 1 260px; }
  .nd-back-btn { width: 100%; }
}

/* ── Телефон ≤480px ── */
@media (max-width: 480px) {

  .dashboard-container { padding: 10px; padding-top: 56px; }

  .dashboard-header {
    padding: 14px;
    border-radius: var(--r2);
    margin-bottom: 12px;
  }
  .dashboard-header h1 { font-size: 17px; }
  .dashboard-header .header-left p { font-size: 12px; }

  .db-kpi-strip { padding: 10px; margin-bottom: 14px; }
  .db-kpi-title { font-size: 13px; margin-bottom: 10px; }
  .db-kpi-grid { grid-template-columns: 1fr; gap: 8px; }
  .kpi-row { padding: 10px; gap: 8px; }
  .kpi-dot { width: 28px; height: 28px; }
  .kpi-dot i { font-size: 12px; }
  .kpi-num { font-size: 16px; }
  .kpi-label { font-size: 12px; }
  .kpi-tags { gap: 4px; }
  .kpi-tag { font-size: 10px; padding: 2px 6px; }

  .db-chart-canvas { height: 170px; padding: 8px 10px 12px; }
  .db-chart-title { font-size: 13px; }

  .welcome-card { padding: 12px !important; margin-bottom: 12px; }
  .welcome-card-content { flex-direction: column; text-align: center; gap: 10px; }
  .welcome-card-icon { width: 40px; height: 40px; }
  .welcome-card-icon i { font-size: 16px; }
  .welcome-card-info h2 { font-size: 14px !important; }
  .welcome-card-details { justify-content: center; }
  .welcome-card-details .wc-badge { padding: 3px 8px; font-size: 10px; height: 24px; }

  .activity-section { padding: 12px; margin-bottom: 12px; border-radius: var(--r2); }
  .activity-section .section-header { margin-bottom: 10px; flex-wrap: wrap; gap: 6px; }
  .activity-section .section-header h2 { font-size: 13px; }
  .view-all-link { font-size: 11px; }

  .action-cards { gap: 8px; }
  .action-cards > a { flex: 1 1 calc(50% - 8px); min-width: 0; }
  .action-card { padding: 12px 8px; }
  .action-icon { width: 34px; height: 34px; margin-bottom: 6px; }
  .action-icon i { font-size: 14px; }
  .action-card h3 { font-size: 11px; }
  .action-card p { font-size: 10px; }

  /* Таблицы — карточный вид */
  .table-container { overflow-x: visible; }
  .data-table { min-width: unset; }
  .data-table thead { display: none; }

  .data-table tbody tr {
    display: block;
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
  }

  .data-table td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 12px;
    border-bottom: none;
    font-size: 12px;
  }

  .data-table td::before {
    content: attr(data-label);
    font-weight: 600;
    color: var(--txt3);
    font-size: 11px;
    text-transform: uppercase;
    flex-shrink: 0;
    margin-right: 8px;
  }

  .activity-section .dashboard-card { border: none; }

  .op-free-tier { padding: 12px; }
  .op-free-price { font-size: 20px; }
  .op-free-item { padding: 10px; }

  .dashboard-sidebar { width: 260px; min-width: 260px; }
}

/* ═══════════════════════════════════════════════════════
   MY COMPANY — Progress Bar + Mobile
   ═══════════════════════════════════════════════════════ */

.mc-progress {
  display: flex;
  align-items: center;
  gap: 15px;
}

.mc-progress-bar {
  flex: 1;
  background: var(--border);
  height: 30px;
  border-radius: 15px;
  overflow: hidden;
}

.mc-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--rose) 0%, var(--am) 50%, var(--em) 100%);
  width: 0%;
  transition: width .3s;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: 14px;
}

.mc-progress-num {
  font-size: 24px;
  font-weight: 700;
  min-width: 60px;
  text-align: right;
  color: var(--txt);
}

.mc-progress-hint {
  margin: 10px 0 0;
  font-size: 14px;
  color: var(--txt3);
}

/* ── Logo preview ── */
.mc-logo-preview img {
  max-width: 200px;
  max-height: 100px;
  border-radius: 8px;
  display: block;
}

/* ── Form sections on my_company ── */
.activity-section .form-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.activity-section .form-row .form-group {
  margin-bottom: 0;
}

.activity-section .form-group.full-width {
  grid-column: 1 / -1;
}

.activity-section .form-group label {
  display: block;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--txt);
  font-size: 14px;
}

.activity-section .form-group input[type="text"],
.activity-section .form-group input[type="email"],
.activity-section .form-group input[type="tel"],
.activity-section .form-group input[type="url"],
.activity-section .form-group input[type="date"],
.activity-section .form-group input[type="number"],
.activity-section .form-group select {
  width: 100%;
  height: 44px;
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: var(--r2);
  font-size: 14px;
  color: var(--txt);
  background: var(--card);
  box-sizing: border-box;
  font-family: inherit;
  transition: border-color .2s, box-shadow .2s;
}

.activity-section .form-group textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--r2);
  font-size: 14px;
  color: var(--txt);
  background: var(--card);
  box-sizing: border-box;
  font-family: inherit;
  resize: vertical;
  min-height: 80px;
  transition: border-color .2s, box-shadow .2s;
}

.activity-section .form-group input:focus,
.activity-section .form-group textarea:focus,
.activity-section .form-group select:focus {
  outline: none;
  border-color: var(--sky);
  box-shadow: 0 0 0 3px rgba(2, 132, 199, .12);
}

.activity-section .form-group input[readonly],
.activity-section .form-group textarea[readonly] {
  background: var(--page);
  color: var(--txt2);
  cursor: default;
}

.activity-section .form-group input[type="file"] {
  height: auto;
  padding: 10px 14px;
  cursor: pointer;
  line-height: normal;
}

.activity-section .form-group small {
  display: block;
  margin-top: 5px;
  font-size: 13px;
  color: var(--txt3);
}

.activity-section .btn-add-row {
  margin-top: 12px;
}

/* ── My Company responsive ── */
@media (max-width: 860px) {

  .mc-progress { gap: 10px; }
  .mc-progress-bar { height: 24px; }
  .mc-progress-fill { font-size: 12px; }
  .mc-progress-num { font-size: 20px; min-width: 50px; }

  .activity-section .form-row {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .okved-row,
  .bank-row,
  .contact-row {
    padding: 14px;
  }

  .okved-row .form-row,
  .bank-row .form-row,
  .contact-row .form-row {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .okved-row > .btn-remove-row,
  .bank-row > .btn-remove-row,
  .contact-row > .btn-remove-row {
    align-self: stretch;
    text-align: center;
    justify-content: center;
  }

  .save-button-container {
    padding: 20px 14px !important;
    margin-top: 24px;
  }

  .save-button-container button {
    width: 100%;
    max-width: 100%;
    min-width: auto;
    padding: 14px 20px;
    font-size: 15px;
  }
}

@media (max-width: 480px) {

  .mc-progress { flex-direction: column; gap: 6px; }
  .mc-progress-bar { width: 100%; height: 22px; }
  .mc-progress-fill { font-size: 11px; }
  .mc-progress-num { font-size: 18px; text-align: center; min-width: auto; }
  .mc-progress-hint { font-size: 13px; }

  .activity-section .form-row { gap: 12px; }

  .activity-section .form-group label { font-size: 13px; }

  .activity-section .form-group input,
  .activity-section .form-group textarea,
  .activity-section .form-group select {
    font-size: 15px;
    padding: 11px 12px;
  }

  .activity-section .form-group small { font-size: 12px; }

  .okved-row,
  .bank-row,
  .contact-row {
    padding: 12px;
  }

  .okved-row .form-row,
  .bank-row .form-row,
  .contact-row .form-row {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .btn-add-row {
    width: 100%;
    justify-content: center;
    padding: 12px 16px;
    font-size: 14px;
  }

  .btn-remove-row {
    width: 100%;
    justify-content: center;
  }

  .save-button-container {
    padding: 16px 12px !important;
    margin-top: 16px;
  }
}

/* ═══════════════════════════════════════════════════
   MOBILE: form-grid, form pages, vacancy/tender/press forms
   ═══════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .form-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .section-title {
    font-size: 1rem;
  }
  .section-divider {
    margin: 20px 0;
    padding-top: 14px;
  }
  .offer-form-actions {
    flex-direction: column;
    gap: 10px;
  }
  .offer-form-actions__left,
  .offer-form-actions__right {
    width: 100%;
  }
  .offer-form-actions .btn {
    flex: 1;
    text-align: center;
  }
  .save-button-container {
    flex-direction: column;
  }
  .save-button-container .btn {
    width: 100%;
    text-align: center;
  }
  .categories-grid {
    grid-template-columns: 1fr 1fr;
  }
  .pr-meta-info {
    grid-template-columns: 1fr;
  }
  .dashboard-card > form {
    padding: 16px !important;
  }
}

@media (max-width: 480px) {
  .categories-grid {
    grid-template-columns: 1fr;
  }
}

/* ================================================================
   КП шаблон — ГОСТ Р 7.0.97-2016
   ================================================================ */

/* --- Страница А4 --- */
.kp-page {
    position: relative;
    min-height: 297mm;
    box-sizing: border-box;
}
.kp-content {
    font-family: 'Times New Roman', 'PT Serif', serif;
    color: #000;
    font-size: 11pt;
    line-height: 1.4;
}

/* --- Шапка: лого | компания | контакты --- */
.kp-header-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 12px;
}
.kp-header-logo {
    width: 70px;
    vertical-align: top;
    padding-right: 15px;
}
.kp-logo-img {
    max-width: 60px;
    max-height: 60px;
    object-fit: contain;
    display: block;
}
.kp-logo-placeholder {
    width: 54px;
    height: 54px;
    border-radius: 6px;
    background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
    color: #fff;
    font-family: 'Inter', Arial, sans-serif;
    font-size: 26px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
}
.kp-header-company {
    vertical-align: top;
    padding-right: 20px;
}
.kp-company-name {
    font-weight: bold;
    font-size: 13pt;
    margin-bottom: 6px;
}
.kp-company-addr {
    margin-bottom: 6px;
    font-size: 10pt;
    color: #333;
}
.kp-company-reqs {
    font-size: 9.5pt;
    color: #444;
    line-height: 1.5;
}
.kp-header-contacts {
    width: 35%;
    vertical-align: top;
    text-align: right;
    font-size: 10pt;
    color: #333;
    line-height: 1.6;
}
.kp-bank-block {
    margin-top: 10px;
    font-size: 9pt;
    color: #555;
    line-height: 1.5;
}

/* --- Разделитель --- */
.kp-divider {
    border-top: 2px solid #000;
    margin: 16px 0;
}

/* --- Блок адресации --- */
.kp-addr-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
}
.kp-addr-from {
    width: 50%;
    vertical-align: top;
    font-size: 11pt;
}
.kp-date {
    font-weight: 500;
}
.kp-number {
    margin-top: 4px;
    color: #333;
}
.kp-addr-to {
    width: 50%;
    vertical-align: top;
    text-align: right;
}
.kp-to-label {
    font-style: italic;
    margin-bottom: 4px;
    font-size: 10pt;
    color: #555;
}
.kp-to-name {
    font-weight: bold;
    font-size: 12pt;
}
.kp-to-info {
    margin-top: 3px;
    font-size: 10pt;
    color: #333;
}

/* --- Заголовок предложения --- */
.kp-subject {
    text-align: center;
    font-weight: bold;
    font-size: 14pt;
    margin: 28px 0 24px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

/* --- Текст предложения --- */
.kp-body {
    text-align: justify;
    font-size: 11pt;
    line-height: 1.6;
    margin-bottom: 40px;
}
.kp-body p { margin-bottom: 8px; }
.kp-placeholder { color: #999; font-style: italic; }

/* --- Блок подписи --- */
.kp-sign-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 50px;
    margin-bottom: 30px;
}
.kp-sign-spacer { width: 50%; }
.kp-sign-block {
    width: 50%;
    text-align: right;
    vertical-align: bottom;
    padding-left: 40px;
}
.kp-sign-position {
    font-size: 11pt;
    font-weight: bold;
    text-transform: uppercase;
    margin-bottom: 10px;
}
.kp-sign-line {
    border-bottom: 1px solid #000;
    width: 200px;
    display: inline-block;
    margin-bottom: 8px;
}
.kp-sign-name {
    font-size: 11pt;
}

/* --- Footer ЭЦП --- */
.kp-footer {
    clear: both;
    padding-top: 10px;
}
.kp-footer .digital-signature {
    float: right;
    margin: 0 0 15px 0;
}
.kp-footer .platform-footer {
    clear: both;
}

/* --- Mobile: масштабируем A4 под экран через zoom --- */
@media screen and (max-width: 860px) {
    .preview-wrapper {
        padding: 10px;
        min-height: auto;
    }
    #previewContainer {
        max-width: 100%;
    }
    .kp-page {
        min-height: auto;
        zoom: 0.85;
    }
    .kp-footer {
        position: relative !important;
        bottom: auto !important;
        left: auto !important;
        right: auto !important;
    }
}

@media screen and (max-width: 768px) {
    .kp-page { zoom: 0.65; }
    .preview-wrapper { padding: 8px; }
}

@media screen and (max-width: 520px) {
    .kp-page { zoom: 0.5; }
    .preview-wrapper { padding: 4px; }
}

@media screen and (max-width: 400px) {
    .kp-page { zoom: 0.42; }
}

/* --- PRINT overrides для КП --- */
@media print {
    .kp-page {
        min-height: auto;
        width: 100%;
    }
    .kp-content {
        padding: 0 !important;
    }
    .kp-footer {
        position: relative !important;
        bottom: auto !important;
        left: auto !important;
        right: auto !important;
        padding: 10px 0 0;
    }
    .kp-footer .digital-signature {
        float: right;
        margin-right: 0;
    }
    .kp-logo-placeholder {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}

/* ================================================================
   Универсальные модальные окна — sky-палитра
   ================================================================ */
.modal-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,.45);
    z-index: 9999;
    justify-content: center;
    align-items: center;
}
.modal-container {
    background: var(--card);
    border: 1.5px solid rgba(2,132,199,.2);
    border-radius: 18px;
    max-width: 700px;
    width: 92%;
    max-height: 82vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(2,132,199,.12), 0 4px 20px rgba(0,0,0,.08);
    color: var(--txt);
}

/* Шапка */
.modal-header {
    padding: 20px 24px 18px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: none;
}
.modal-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -.01em;
    display: flex;
    align-items: center;
    gap: 10px;
}
.modal-header h3 i {
    font-size: 18px;
}
.modal-header-sky {
    background: var(--sky);
    border-radius: 18px 18px 0 0;
}
.modal-header-sky h3,
.modal-header-sky h3 i {
    color: #fff;
    text-shadow: 0 1px 3px rgba(0,0,0,.15);
}
/* Обратная совместимость: teal = sky */
.modal-header-teal {
    background: var(--sky);
    border-radius: 18px 18px 0 0;
}
.modal-header-teal h3,
.modal-header-teal h3 i {
    color: #fff;
    text-shadow: 0 1px 3px rgba(0,0,0,.15);
}

/* Кнопка закрытия */
.modal-close-btn {
    background: rgba(255,255,255,.2);
    border: 1px solid rgba(255,255,255,.3);
    color: #fff;
    width: 34px; height: 34px;
    border-radius: var(--r2, 8px);
    cursor: pointer;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .2s;
}
.modal-close-btn:hover {
    background: rgba(255,255,255,.35);
    border-color: rgba(255,255,255,.5);
    transform: rotate(90deg);
}

/* Тело */
.modal-body {
    padding: 22px 24px 12px;
    background: var(--card);
}

/* Секции */
.modal-section {
    margin-bottom: 20px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--sky-ll);
}
.modal-section:last-of-type {
    border-bottom: none;
    padding-bottom: 0;
}
.modal-section-label {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}
.modal-section-label i {
    font-size: 18px;
}
.modal-section-label h4 {
    margin: 0;
    font-size: 14px;
    color: var(--sky);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
}

/* Блок-ссылка на запрос */
.modal-link-block {
    display: block;
    padding: 14px 16px;
    background: var(--sky-ll);
    border: 1.5px solid var(--sky-l);
    border-radius: var(--r2, 8px);
    border-left: 4px solid var(--sky);
    color: var(--sky-h);
    font-weight: 700;
    font-size: 15px;
    text-decoration: none;
    transition: all .2s;
}
.modal-link-block:hover {
    background: var(--sky-l);
    border-color: var(--sky);
    color: var(--sky-h);
    transform: translateX(3px);
}

/* Информационные блоки */
.modal-block {
    padding: 16px 18px;
    border-radius: var(--r2, 8px);
    line-height: 1.65;
    font-size: 14px;
}
.modal-block-question {
    background: var(--sky-ll);
    border: 1.5px solid var(--sky-l);
    border-left: 4px solid var(--sky);
    color: var(--sky-h);
}
.modal-block-warning {
    background: #fffbeb;
    border: 1.5px solid #fde68a;
    border-left: 4px solid var(--am);
    color: #92400e;
}
.modal-block-success {
    background: #ecfdf5;
    border: 1.5px solid #a7f3d0;
    border-left: 4px solid var(--em);
    color: #065f46;
}
.modal-block-danger {
    background: #fef2f2;
    border: 1.5px solid #fecaca;
    border-left: 4px solid var(--rose);
    color: #7f1d1d;
}

/* Мета-дата */
.modal-meta {
    margin: 10px 0 0;
    font-size: 12px;
    color: var(--txt3);
    font-weight: 500;
}
.modal-meta i {
    margin-right: 4px;
    color: var(--sky-l);
}

/* Ожидание ответа */
.modal-empty-answer {
    padding: 28px;
    background: var(--sky-ll);
    border-radius: var(--r2, 8px);
    text-align: center;
    border: 2px dashed var(--sky-l);
}
.modal-empty-answer i {
    font-size: 36px;
    color: var(--sky);
    margin-bottom: 10px;
    display: block;
}
.modal-empty-answer p {
    margin: 0;
    color: var(--sky-h);
    font-weight: 700;
    font-size: 15px;
}

/* Подвал модалки */
.modal-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    padding: 16px 0 4px;
    margin-top: 20px;
    border-top: 1.5px solid var(--sky-ll);
}

/* Спиннер загрузки */
.modal-loading {
    text-align: center;
    padding: 48px 20px;
}
.modal-loading i {
    font-size: 42px;
    color: var(--sky);
}
.modal-loading p {
    margin-top: 16px;
    color: var(--txt3);
    font-weight: 500;
}

/* Ошибка */
.modal-error {
    text-align: center;
    padding: 48px 20px;
}
.modal-error i {
    font-size: 42px;
    color: var(--rose);
}
.modal-error p {
    margin-top: 16px;
    color: var(--rose);
    font-weight: 600;
}

/* ================================================================
   Модалки — мобильная адаптация
   ================================================================ */
@media screen and (max-width: 768px) {
    .modal-overlay {
        align-items: flex-end;
        padding: 0;
    }
    .modal-container,
    .modal-content {
        max-width: 100% !important;
        width: 100% !important;
        border-radius: 18px 18px 0 0 !important;
        max-height: 90vh;
    }
    .modal-header-sky,
    .modal-header-teal {
        border-radius: 18px 18px 0 0 !important;
    }
    .modal-header {
        padding: 16px 18px;
    }
    .modal-header h3 {
        font-size: 16px;
    }
    .modal-body {
        padding: 18px 16px;
    }
    .modal-section {
        margin-bottom: 16px;
        padding-bottom: 14px;
    }
    .modal-link-block {
        font-size: 14px;
        padding: 12px 14px;
    }
    .modal-block {
        font-size: 13px;
        padding: 14px 14px;
    }
    .modal-section-label h4 {
        font-size: 12px;
    }
    .modal-actions {
        padding-top: 14px;
        margin-top: 16px;
        flex-direction: column;
    }
    .modal-actions .btn {
        width: 100%;
        justify-content: center;
    }
    .modal-footer {
        flex-direction: column;
        gap: 8px;
        padding: 14px 16px;
    }
    .modal-footer .btn-modal {
        width: 100%;
        justify-content: center;
    }
    .modal-empty-answer {
        padding: 20px 16px;
    }
    .modal-empty-answer i {
        font-size: 28px;
    }

    /* viewResponseModal mobile */
    #viewResponseModal .modal-content {
        max-width: 100% !important;
        width: 100% !important;
        border-radius: 18px 18px 0 0 !important;
        max-height: 90vh;
    }
    #viewResponseModal .modal-header {
        padding: 16px 18px;
    }
    #viewResponseModal .modal-body {
        padding: 16px;
    }
    #viewResponseModal .modal-body > div {
        padding-bottom: 12px;
    }
    #viewResponseModal .modal-body [style*="display:flex"][style*="gap:16px"] {
        flex-direction: column !important;
        gap: 10px !important;
    }
    #viewResponseModal .modal-footer {
        flex-direction: column;
        gap: 8px;
        padding: 14px 16px;
    }
    #viewResponseModal .modal-footer .btn-modal,
    #viewResponseModal #vrm_request_link {
        width: 100%;
        text-align: center;
        justify-content: center;
    }

    /* cancelModal mobile */
    #cancelModal .modal-content {
        max-width: 100% !important;
        width: 100% !important;
        border-radius: 18px 18px 0 0 !important;
    }

    /* tariffModal mobile */
    #tariffModal .modal-content {
        max-width: 100% !important;
        width: 100% !important;
        border-radius: 18px 18px 0 0 !important;
        max-height: 90vh;
        overflow-y: auto;
    }
}

@media screen and (max-width: 480px) {
    .modal-container,
    .modal-content {
        max-height: 95vh;
    }
    .modal-header {
        padding: 14px 14px;
    }
    .modal-header h3 {
        font-size: 15px;
        gap: 8px;
    }
    .modal-body {
        padding: 14px 12px;
    }
    .modal-close-btn,
    .modal-close {
        width: 30px;
        height: 30px;
        font-size: 16px;
    }
    .modal-section-label h4 {
        font-size: 11px;
    }
    .modal-block {
        font-size: 12px;
        padding: 12px;
    }
    .modal-link-block {
        font-size: 13px;
        padding: 10px 12px;
    }
}

/* ================================================================
   MY POINTS & ORDER POINTS — Единые стили блоков + мобильные
   ================================================================ */

/* ── Баланс: обводка + выделение ── */
.points-balance {
    background: linear-gradient(135deg, var(--sky) 0%, var(--sky-h) 100%);
    color: #fff;
    padding: 28px 32px;
    border-radius: var(--r1);
    margin-bottom: 24px;
    box-shadow: 0 4px 20px rgba(2,132,199,.25);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.points-balance-main { flex: 0 0 auto; }
.points-balance-label { font-size: 13px; opacity: .85; margin-bottom: 8px; }
.points-balance-label i { margin-right: 6px; }
.points-balance-value { font-size: 44px; font-weight: 900; letter-spacing: -1px; line-height: 1; }
.points-balance-details { display: flex; gap: 28px; align-items: center; }
.points-detail-item { display: flex; align-items: center; gap: 10px; font-size: 15px; }
.points-detail-item i { opacity: .75; font-size: 16px; }

/* ── Bonus Banner: каждый айтем — карточка с обводкой ── */
.bonus-banner {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}
.bonus-divider { display: none; }
.bonus-item {
    padding: 20px 22px;
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--card);
    border: 1.5px solid var(--border);
    border-radius: var(--r1);
    transition: border-color .2s, box-shadow .2s, background .2s;
}
.bonus-item:hover {
    background: var(--sky-ll);
    border-color: var(--sky-l);
    box-shadow: 0 2px 10px rgba(2,132,199,.08);
}
.bonus-icon {
    width: 48px; height: 48px;
    border-radius: var(--r2);
    background: var(--sky-ll);
    color: var(--sky);
    display: flex; align-items: center; justify-content: center;
    font-size: 20px; flex-shrink: 0;
    border: 1px solid var(--sky-l);
}
.bonus-content { flex: 1; min-width: 0; }
.bonus-title {
    font-size: 11px; font-weight: 700; color: var(--sky);
    text-transform: uppercase; letter-spacing: .06em;
    margin: 0 0 4px;
}
.bonus-value {
    font-size: 22px; font-weight: 800; color: var(--txt);
    line-height: 1.1; margin: 0 0 3px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bonus-description { font-size: 12px; color: var(--txt3); margin: 0; line-height: 1.4; }

/* ── Section Header Custom: как section-heading-bar ── */
.section-header-custom {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 20px;
    margin-top: 28px;
    padding: 16px 22px;
    background: var(--card);
    border: 1.5px solid var(--border);
    border-radius: var(--r1);
}
.section-header-custom:first-of-type { margin-top: 0; }
.section-header-custom h2 {
    margin: 0; font-size: 17px; font-weight: 700; color: var(--txt);
    display: flex; align-items: center; gap: 8px;
}
.section-header-custom h2 i { color: var(--sky); font-size: 17px; }
.section-header-custom p {
    margin: 0; font-size: 13px; color: var(--txt3);
}

/* ── Section Heading Bar: обводка уже есть, доп. стили ── */
.section-heading-bar {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--card);
    border: 1.5px solid var(--border);
    border-radius: var(--r1);
    padding: 16px 22px;
    margin-bottom: 20px;
}
.section-heading-bar > .fas,
.section-heading-bar > .fa-coins,
.section-heading-bar > .fa-crown {
    font-size: 1.5rem;
    color: var(--sky);
    flex-shrink: 0;
}
.section-heading-bar > div strong {
    display: block;
    font-size: .9375rem;
    font-weight: 700;
    color: var(--txt);
}
.section-heading-bar > div span {
    font-size: .8125rem;
    color: var(--txt3);
}

/* ── Tariff Cards: 100% ширины ── */
.tariff-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 28px;
}
.premium-cards {
    grid-template-columns: repeat(4, 1fr);
}
.tariff-card {
    background: var(--card);
    border-radius: var(--r1);
    padding: 24px 20px;
    border: 1.5px solid var(--border);
    border-top: 3px solid var(--border);
    transition: border-color .2s, box-shadow .2s, transform .2s;
    position: relative;
    display: flex;
    flex-direction: column;
}
.tariff-card:hover {
    border-color: var(--sky-l);
    border-top-color: var(--sky);
    box-shadow: 0 6px 24px rgba(2,132,199,.12);
    transform: translateY(-3px);
}
.tariff-card.recommended {
    border-top-color: var(--sky);
    border-color: var(--sky-l);
    box-shadow: 0 4px 20px rgba(2,132,199,.1);
}

/* Badge */
.tariff-badge {
    position: absolute;
    top: -1px; right: 16px;
    padding: 5px 12px;
    border-radius: 0 0 var(--r2) var(--r2);
    font-size: 11px; font-weight: 700;
    color: #fff;
    display: flex; align-items: center; gap: 5px;
    letter-spacing: .04em;
}
.tariff-badge.discount-badge { background: var(--am); }
.tariff-badge.popular-badge  { background: var(--sky); }
.tariff-badge.base-badge     { background: var(--txt3); }
.tariff-name {
    font-size: 16px; font-weight: 700; color: var(--txt);
    margin: 20px 0 4px;
}
.tariff-description {
    font-size: 12px; color: var(--txt3); margin: 0 0 14px;
    line-height: 1.5; flex: 1;
}
.tariff-points-box { margin-bottom: 12px; text-align: center; }
.tariff-points {
    font-size: 38px; font-weight: 900; color: var(--sky);
    line-height: 1;
}
.tariff-points-label {
    font-size: 12px; color: var(--txt3); margin-top: 2px;
    text-transform: uppercase; letter-spacing: .05em; font-weight: 600;
}
.tariff-price-box { margin-bottom: 18px; text-align: center; }
.tariff-price-old {
    font-size: 13px; color: var(--txt3); text-decoration: line-through; margin-bottom: 2px;
}
.tariff-price-main { font-size: 26px; font-weight: 800; color: var(--txt); }
.btn-select-tariff {
    width: 100%; padding: 11px 20px;
    background: var(--sky); color: #fff;
    border: none; border-radius: var(--r2);
    font-size: 14px; font-weight: 700;
    cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 7px;
    transition: background .2s, transform .15s, box-shadow .2s;
    margin-top: auto;
}
.btn-select-tariff:hover {
    background: var(--sky-h); transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(2,132,199,.3);
}

/* ── Premium Cards: amber обводка ── */
.premium-cards .tariff-card,
.tariff-card.premium-card {
    border: 2px solid #fde68a;
    background: linear-gradient(160deg, #fffbeb 0%, var(--card) 70%);
}
.premium-cards .tariff-card:hover,
.tariff-card.premium-card:hover {
    border-color: var(--am);
    box-shadow: 0 6px 24px rgba(217,119,6,.15);
    transform: translateY(-3px);
}
.premium-cards .tariff-card.recommended,
.tariff-card.premium-card.recommended {
    border-color: var(--am);
    box-shadow: 0 4px 20px rgba(217,119,6,.15);
}

/* ── Premium heading + badge + name + points + btn ── */
.premium-heading-bar {
    background: linear-gradient(135deg, #fffbeb, #fef3c7) !important;
    border-color: #fde68a !important;
}
.premium-heading-bar > .fas { color: var(--am) !important; }
.premium-heading-bar > div strong { color: #92400e !important; }
.premium-badge {
    background: linear-gradient(135deg, var(--am), #b45309) !important;
}
.premium-name { color: #92400e !important; }
.premium-points { color: var(--am) !important; }
.premium-btn {
    background: linear-gradient(135deg, var(--am), #b45309) !important;
}
.premium-btn:hover {
    background: linear-gradient(135deg, #b45309, #92400e) !important;
    box-shadow: 0 4px 12px rgba(217,119,6,.35) !important;
}

/* ── Action Costs Card ── */
.action-costs-card {
    background: var(--card);
    border: 1.5px solid var(--border);
    border-radius: var(--r1);
    padding: 22px 28px;
    margin-bottom: 28px;
}

/* ── Op-Free Tier ── */
.op-free-tier {
    display: flex;
    align-items: stretch;
    background: var(--card);
    border: 1.5px solid var(--border);
    border-radius: var(--r1);
    margin-bottom: 24px;
    overflow: hidden;
}

/* ================================================================
   MY POINTS & ORDER POINTS — Мобильная адаптация
   ================================================================ */

/* ── 1024px: планшет ── */
@media (max-width: 1024px) {
    .bonus-banner { grid-template-columns: 1fr 1fr 1fr; }
    .tariff-cards { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
}

/* ── 860px: планшет портрет ── */
@media (max-width: 860px) {
    .points-balance {
        flex-direction: column;
        gap: 16px;
        padding: 22px 24px;
        text-align: center;
    }
    .points-balance-details {
        flex-direction: column;
        gap: 8px;
        align-items: center;
    }
    .points-balance-value { font-size: 38px; }

    .bonus-banner { grid-template-columns: 1fr; gap: 12px; }
    .bonus-item { padding: 16px 20px; }
    .bonus-value { font-size: 18px; }

    .section-header-custom {
        flex-direction: column;
        align-items: flex-start;
        padding: 14px 18px;
    }
    .section-header-custom h2 { font-size: 15px; }
    .section-header-custom p { font-size: 12px; }

    .section-heading-bar {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        padding: 14px 18px;
    }
    .section-heading-bar > .fas,
    .section-heading-bar > .fa-coins,
    .section-heading-bar > .fa-crown { font-size: 1.2rem; }

    .tariff-cards,
    .premium-cards { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .tariff-card { padding: 20px 16px; }
    .tariff-points { font-size: 30px; }
    .tariff-price-main { font-size: 22px; }

    .action-costs-card { padding: 18px 16px; }
    .action-costs-header { gap: 10px; }
    .action-costs-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .action-cost-item { padding: 12px; gap: 10px; }
    .action-cost-value { font-size: 1rem; padding: 3px 8px; }

    .op-free-tier { flex-direction: column; }
    .op-free-left {
        border-right: none;
        border-bottom: 1px solid var(--border);
        padding: 18px 20px;
        text-align: center;
        align-items: center;
    }
    .op-free-items { flex-direction: column; }
    .op-free-item { border-right: none; border-bottom: 1px solid var(--page); padding: 16px 20px; }
    .op-free-item:last-child { border-bottom: none; }
}

/* ── 600px: мобильный ── */
@media (max-width: 600px) {
    .points-balance {
        padding: 16px 18px;
    }
    .points-balance-label { font-size: 11px; margin-bottom: 6px; }
    .points-balance-value { font-size: 32px; }
    .points-detail-item { font-size: 13px; }
    .points-detail-item i { font-size: 14px; }

    .bonus-banner { border-radius: var(--r2); }
    .bonus-item { padding: 14px 16px; gap: 12px; }
    .bonus-icon { width: 40px; height: 40px; font-size: 17px; }
    .bonus-value { font-size: 16px; }
    .bonus-title { font-size: 10px; }
    .bonus-description { font-size: 11px; }

    .section-header-custom { padding: 12px 14px; margin-top: 20px; margin-bottom: 14px; }
    .section-header-custom h2 { font-size: 14px; }

    .section-heading-bar { padding: 12px 14px; margin-bottom: 14px; }
    .section-heading-bar > div strong { font-size: .8125rem; }
    .section-heading-bar > div span { font-size: .75rem; }

    .tariff-cards,
    .premium-cards { grid-template-columns: 1fr 1fr; gap: 10px; }
    .tariff-card { padding: 16px 14px; }
    .tariff-name { font-size: 14px; margin: 16px 0 4px; }
    .tariff-description { font-size: 11px; margin-bottom: 10px; }
    .tariff-points { font-size: 26px; }
    .tariff-points-label { font-size: 10px; }
    .tariff-price-main { font-size: 20px; }
    .tariff-price-old { font-size: 11px; }
    .btn-select-tariff { padding: 9px 14px; font-size: 12px; gap: 5px; }
    .tariff-badge { font-size: 9px; padding: 4px 8px; right: 10px; }

    .action-costs-card { padding: 14px; margin-bottom: 20px; }
    .action-costs-header > .fa-coins { font-size: 1.2rem; }
    .action-costs-header > div strong { font-size: .8125rem; }
    .action-costs-header > div span { font-size: .75rem; }
    .action-costs-gov-badge { font-size: .75rem; padding: 4px 10px; margin-left: 0; width: 100%; justify-content: center; }
    .action-costs-grid { grid-template-columns: 1fr; gap: 8px; }
    .action-cost-item { padding: 10px 12px; }
    .action-cost-icon { width: 32px; height: 32px; font-size: 13px; }
    .action-cost-info strong { font-size: .8125rem; }
    .action-cost-info small { font-size: .6875rem; }
    .action-cost-value { font-size: .9rem; padding: 3px 7px; min-width: 50px; }

    .op-free-tier { border-radius: var(--r2); }
    .op-free-left { padding: 14px 16px; }
    .op-free-price { font-size: 1.6rem; margin: 2px 0 10px; }
    .op-free-title { font-size: 1.1rem; }
    .op-free-btn { font-size: .75rem; padding: 6px 12px; }
    .op-free-item { padding: 12px 16px; gap: 10px; }
    .op-free-ico { width: 34px; height: 34px; font-size: 15px; }
    .op-free-val { font-size: .9rem; }
    .op-free-desc { font-size: .6rem; }
}

/* ── 420px: маленький экран ── */
@media (max-width: 420px) {
    .points-balance { padding: 14px; }
    .points-balance-value { font-size: 28px; }
    .points-balance-label { font-size: 10px; }

    .bonus-item { padding: 12px; gap: 10px; }
    .bonus-icon { width: 36px; height: 36px; font-size: 15px; }
    .bonus-value { font-size: 15px; }

    .tariff-cards,
    .premium-cards { grid-template-columns: 1fr; }
    .tariff-card { padding: 18px 16px; }
    .tariff-points { font-size: 30px; }
    .tariff-price-main { font-size: 22px; }
    .btn-select-tariff { padding: 10px 16px; font-size: 13px; }

    .op-free-left { padding: 12px 14px; }
    .op-free-price { font-size: 1.4rem; }
    .op-free-item { padding: 10px 14px; }
}

/* ================================================================
   SUPPORT TICKETS + CREATE TICKET — доп. стили
   ================================================================ */

/* ── Form body inside activity-section ── */
.form-body {
    padding: 24px 28px;
    background: var(--card);
}
.form-body .form-group { margin-bottom: 20px; }
.form-body .form-group label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 600;
    color: var(--txt);
    margin-bottom: 8px;
}
.form-body .form-group label i { color: var(--sky); font-size: 13px; }
.form-body .form-group label .required { color: var(--rose); font-weight: 700; }
.form-body .form-group input[type="text"],
.form-body .form-group select,
.form-body .form-group textarea {
    width: 100%;
    padding: 10px 14px;
    border: 1.5px solid var(--border);
    border-radius: var(--r2);
    font-size: 14px;
    font-family: inherit;
    color: var(--txt);
    background: var(--card);
    transition: border-color .2s, box-shadow .2s;
}
.form-body .form-group input:focus,
.form-body .form-group select:focus,
.form-body .form-group textarea:focus {
    border-color: var(--sky);
    box-shadow: 0 0 0 3px rgba(2,132,199,.1);
    outline: none;
}
.form-body .form-group textarea {
    min-height: 160px;
    resize: vertical;
}
.form-body .form-hint {
    display: block;
    font-size: 12px;
    color: var(--txt3);
    margin-top: 6px;
}
.form-body .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.form-body .form-actions {
    display: flex;
    gap: 12px;
    padding-top: 8px;
    border-top: 1px solid var(--border);
    margin-top: 24px;
}

/* ── Badge outline (category label) ── */
.badge-outline {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: var(--r3);
    font-size: 12px;
    font-weight: 600;
    background: transparent;
    border: 1.5px solid var(--border);
    color: var(--txt3);
}

/* ── Table link ── */
.table-link {
    color: var(--sky);
    text-decoration: none;
    font-weight: 600;
    transition: color .15s;
}
.table-link:hover { color: var(--sky-h); text-decoration: underline; }

/* ── Unread row highlight ── */
.data-table tr.unread {
    background: var(--sky-ll);
}
.data-table tr.unread td:first-child {
    box-shadow: inset 3px 0 0 var(--sky);
}

/* ── Support tickets mobile ── */
@media (max-width: 860px) {
    .form-body { padding: 20px; }
    .form-body .form-row { grid-template-columns: 1fr; gap: 0; }
}
@media (max-width: 600px) {
    .form-body { padding: 16px; }
    .form-body .form-group label { font-size: 13px; }
    .form-body .form-group input[type="text"],
    .form-body .form-group select,
    .form-body .form-group textarea { font-size: 13px; padding: 9px 12px; }
    .form-body .form-actions { flex-direction: column; }
    .form-body .form-actions .btn { width: 100%; justify-content: center; }
}

/* ================================================================
   VIEW TICKET — мета-грид + сообщения
   ================================================================ */

/* ── Ticket meta grid (4 cols) ── */
.ticket-meta-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}
.ticket-meta-item {
    background: var(--card);
    border: 1.5px solid var(--border);
    border-radius: var(--r1);
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.ticket-meta-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--txt3);
    text-transform: uppercase;
    letter-spacing: .04em;
}
.ticket-meta-item > span:not(.badge) {
    font-size: 14px;
    font-weight: 600;
    color: var(--txt);
}

/* ── Ticket messages inside activity-section ── */
.ticket-messages {
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-height: 700px;
    overflow-y: auto;
}
.ticket-messages::-webkit-scrollbar { width: 6px; }
.ticket-messages::-webkit-scrollbar-track { background: var(--page); border-radius: 3px; }
.ticket-messages::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
.ticket-messages::-webkit-scrollbar-thumb:hover { background: var(--txt3); }

.tmsg {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}
.tmsg-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}
.tmsg-user .tmsg-avatar {
    background: linear-gradient(135deg, var(--sky) 0%, var(--sky-h) 100%);
    color: #fff;
}
.tmsg-admin .tmsg-avatar {
    background: linear-gradient(135deg, var(--am) 0%, #b45309 100%);
    color: #fff;
}
.tmsg-body {
    flex: 1;
    min-width: 0;
    background: var(--page);
    border: 1px solid var(--border);
    border-radius: var(--r1);
    padding: 14px 18px;
}
.tmsg-admin .tmsg-body {
    background: var(--sky-ll);
    border-color: var(--sky-l);
}
.tmsg-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    gap: 10px;
}
.tmsg-author {
    font-weight: 700;
    font-size: 14px;
    color: var(--txt);
}
.tmsg-admin .tmsg-author { color: var(--am); }
.tmsg-time {
    font-size: 12px;
    color: var(--txt3);
    white-space: nowrap;
}
.tmsg-text {
    font-size: 14px;
    line-height: 1.65;
    color: var(--txt2);
    word-break: break-word;
}
.tmsg-file {
    margin-top: 10px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: var(--card);
    border: 1.5px solid var(--sky-l);
    border-radius: var(--r2);
    font-size: 13px;
    transition: border-color .2s, box-shadow .2s;
}
.tmsg-file:hover {
    border-color: var(--sky);
    box-shadow: 0 2px 8px rgba(2,132,199,.1);
}
.tmsg-file i { color: var(--sky); font-size: 14px; }
.tmsg-file a {
    color: var(--sky);
    text-decoration: none;
    font-weight: 600;
}
.tmsg-file a:hover { color: var(--sky-h); text-decoration: underline; }

/* ── View ticket mobile ── */
@media (max-width: 860px) {
    .ticket-meta-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .ticket-messages { padding: 16px 18px; max-height: 500px; }
    .tmsg { gap: 10px; }
    .tmsg-avatar { width: 38px; height: 38px; font-size: 16px; }
    .tmsg-body { padding: 12px 14px; }
    .tmsg-author { font-size: 13px; }
    .tmsg-text { font-size: 13px; }
}
@media (max-width: 600px) {
    .ticket-meta-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
    .ticket-meta-item { padding: 12px 14px; }
    .ticket-meta-label { font-size: 11px; }
    .ticket-messages { padding: 14px; max-height: 400px; gap: 12px; }
    .tmsg-avatar { width: 34px; height: 34px; font-size: 14px; }
    .tmsg-body { padding: 10px 12px; }
    .tmsg-head { flex-direction: column; align-items: flex-start; gap: 2px; margin-bottom: 6px; }
    .tmsg-text { font-size: 13px; line-height: 1.55; }
    .tmsg-file { font-size: 12px; padding: 6px 10px; }
}
@media (max-width: 420px) {
    .ticket-meta-grid { grid-template-columns: 1fr; }
}

/* ================================================================
   DROPZONE — загрузка файлов
   ================================================================ */
.dropzone {
    position: relative;
    border: 2px dashed var(--border);
    border-radius: var(--r1);
    background: var(--page);
    padding: 28px 20px;
    text-align: center;
    cursor: pointer;
    transition: border-color .2s, background .2s, box-shadow .2s;
}
.dropzone:hover,
.dropzone.drag-over {
    border-color: var(--sky);
    background: var(--sky-ll);
    box-shadow: 0 0 0 3px rgba(2,132,199,.08);
}
.dropzone input[type="file"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    z-index: 2;
}

/* Prompt (по умолчанию виден) */
.dropzone-prompt {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    pointer-events: none;
}
.dropzone-prompt > i {
    font-size: 28px;
    color: var(--sky);
    opacity: .6;
}
.dropzone-prompt > span {
    font-size: 14px;
    font-weight: 600;
    color: var(--txt3);
}
.dropzone-prompt > small {
    font-size: 12px;
    color: var(--txt3);
    opacity: .7;
}

/* File info (скрыт по умолчанию) */
.dropzone-file {
    display: none;
    align-items: center;
    gap: 10px;
    justify-content: center;
    pointer-events: none;
}
.dropzone-file > i {
    font-size: 20px;
    color: var(--sky);
}
.dropzone-file > span {
    font-size: 14px;
    font-weight: 600;
    color: var(--txt);
}
.dropzone-remove {
    pointer-events: auto;
    position: relative;
    z-index: 3;
    background: none;
    border: 1px solid var(--border);
    border-radius: var(--r3);
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--rose);
    font-size: 12px;
    transition: background .15s, border-color .15s;
}
.dropzone-remove:hover {
    background: rgba(239,68,68,.08);
    border-color: var(--rose);
}

/* Состояние: файл выбран */
.dropzone.has-file {
    border-style: solid;
    border-color: var(--sky-l);
    background: var(--sky-ll);
}
.dropzone.has-file .dropzone-prompt { display: none; }
.dropzone.has-file .dropzone-file   { display: flex; }

/* ── Dropzone mobile ── */
@media (max-width: 600px) {
    .dropzone { padding: 20px 16px; }
    .dropzone-prompt > i { font-size: 22px; }
    .dropzone-prompt > span { font-size: 13px; }
    .dropzone-file > span { font-size: 13px; }
}

/* ================================================================
   MY CRM — PROFESSIONAL OVERHAUL  (overrides + new)
   ================================================================ */

/* ── CRM Stats unified block ── */
.crm-stats-unified {
    background: var(--card);
    border: 1.5px solid var(--border);
    border-radius: var(--r1);
    padding: 20px 24px 24px;
    margin-bottom: 24px;
}
.crm-stats-unified .stats-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
}
.crm-stats-unified .stats-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--txt);
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}
.crm-stats-unified .stats-title i {
    color: var(--sky);
}
.crm-stats-unified .stats-progress-compact {
    display: flex;
    align-items: center;
    gap: 8px;
}
.crm-stats-unified .progress-label {
    font-size: 12px;
    color: var(--txt3);
    font-weight: 600;
}
.crm-stats-unified .progress-value {
    font-size: 16px;
    font-weight: 800;
    color: var(--sky);
}
.crm-stats-unified .stats-progress-bar {
    height: 6px;
    background: var(--page);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 18px;
}
.crm-stats-unified .progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--sky), var(--em));
    border-radius: 3px;
    transition: width .5s ease;
}

/* ── CRM Stats grid — 7 cards ── */
.crm-stats-unified .stats-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 10px;
}
.crm-stats-unified .stat-card {
    background: var(--card);
    border: 1.5px solid var(--border);
    border-radius: var(--r2);
    padding: 14px 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    transition: border-color .2s, box-shadow .2s, transform .15s;
    overflow: hidden;
}
.crm-stats-unified .stat-card::before { display: none; }
.crm-stats-unified .stat-card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,.08);
    transform: translateY(-1px);
}
.crm-stats-unified .stat-card.active-filter {
    border-color: var(--sky);
    background: var(--sky-ll);
    box-shadow: 0 0 0 2px rgba(2,132,199,.12);
}
.crm-stats-unified .stat-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
}
.crm-stats-unified .stat-content { min-width: 0; }
.crm-stats-unified .stat-value {
    font-size: 20px;
    font-weight: 800;
    line-height: 1.1;
    color: var(--txt);
}
.crm-stats-unified .stat-label {
    font-size: 11px;
    color: var(--txt3);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Card color accents — border only, no stripes */
.crm-stats-unified .stat-pending   { border-color: var(--sky); }
.crm-stats-unified .stat-pending .stat-icon   { background: rgba(2,132,199,.12);  color: var(--sky); }
.crm-stats-unified .stat-completed { border-color: var(--em); }
.crm-stats-unified .stat-completed .stat-icon { background: rgba(5,150,105,.12);  color: var(--em); }
.crm-stats-unified .stat-cancelled { border-color: var(--txt3); }
.crm-stats-unified .stat-cancelled .stat-icon { background: rgba(107,114,128,.12); color: var(--txt3); }
.crm-stats-unified .stat-today     { border-color: var(--sky); }
.crm-stats-unified .stat-today .stat-icon     { background: rgba(2,132,199,.12);  color: var(--sky); }
.crm-stats-unified .stat-overdue   { border-color: var(--rose); }
.crm-stats-unified .stat-overdue .stat-icon   { background: rgba(225,29,72,.12);  color: var(--rose); }
.crm-stats-unified .stat-high-priority { border-color: var(--am); }
.crm-stats-unified .stat-high-priority .stat-icon { background: rgba(217,119,6,.12); color: var(--am); }
.crm-stats-unified .stat-total     { border-color: var(--ind); }
.crm-stats-unified .stat-total .stat-icon     { background: rgba(67,56,202,.12);  color: var(--ind); }

/* ── Compact section: Calendar + New Task ── */
.crm-compact-section {
    display: grid;
    grid-template-columns: 400px 1fr;
    gap: 20px;
    margin-bottom: 24px;
}

/* Calendar card */

/* ── New task form ── */
.quick-actions-compact {
    display: flex;
    gap: 6px;
    padding: 12px 18px 0;
}
.quick-btn {
    flex: 1;
    padding: 7px 10px;
    border: 1.5px solid var(--border);
    background: var(--card);
    border-radius: var(--r2);
    font-size: 12px;
    font-weight: 600;
    color: var(--txt3);
    cursor: pointer;
    transition: all .15s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}
.quick-btn:hover {
    border-color: var(--sky);
    color: var(--sky);
    background: var(--sky-ll);
}
.quick-btn i { font-size: 11px; }

#add-task-form {
    padding: 12px 18px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.form-control-compact {
    width: 100%;
    padding: 8px 12px;
    border: 1.5px solid var(--border);
    border-radius: var(--r2);
    font-size: 13px;
    font-family: inherit;
    color: var(--txt);
    background: var(--card);
    transition: border-color .2s, box-shadow .2s;
    box-sizing: border-box;
}
.form-control-compact:focus {
    border-color: var(--sky);
    box-shadow: 0 0 0 3px rgba(2,132,199,.08);
    outline: none;
}
.form-control-compact::placeholder { color: var(--txt3); opacity: .7; }
textarea.form-control-compact {
    resize: vertical;
    min-height: 44px;
    line-height: 1.5;
}
.form-row-compact {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.btn-add-task {
    width: 100%;
    padding: 9px;
    background: var(--sky);
    color: #fff;
    border: none;
    border-radius: var(--r2);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: background .15s, box-shadow .15s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.btn-add-task:hover {
    background: var(--sky-h);
    box-shadow: 0 3px 10px rgba(2,132,199,.2);
}

/* Contact autocomplete */
.contact-autocomplete-wrapper { position: relative; }
.contact-search-input { padding-left: 12px !important; }
.contact-autocomplete-results {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--card);
    border: 1.5px solid var(--sky-l);
    border-radius: 0 0 var(--r2) var(--r2);
    max-height: 200px;
    overflow-y: auto;
    z-index: 100;
    box-shadow: 0 8px 24px rgba(0,0,0,.12);
}
.contact-autocomplete-results.active { display: block; }
.contact-result-item {
    padding: 8px 12px;
    cursor: pointer;
    font-size: 12px;
    border-bottom: 1px solid var(--page);
    transition: background .1s;
}
.contact-result-item:hover { background: var(--sky-ll); }
.contact-result-item:last-child { border-bottom: none; }
.selected-contact-preview {
    display: none;
    margin-top: 6px;
    padding: 8px 12px;
    background: var(--sky-ll);
    border: 1px solid var(--sky-l);
    border-radius: var(--r2);
    font-size: 12px;
    color: var(--txt);
}
.selected-contact-preview.active { display: flex; align-items: center; gap: 8px; }

/* ── CRM Filter bar ── */
.crm-filters-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}
.crm-filter-tabs {
    display: flex;
    gap: 4px;
    background: var(--card);
    border: 1.5px solid var(--border);
    border-radius: var(--r2);
    padding: 4px;
}
.crm-filter-tab {
    padding: 8px 14px;
    border: none;
    background: transparent;
    color: var(--txt3);
    font-size: 13px;
    font-weight: 600;
    border-radius: 6px;
    cursor: pointer;
    transition: all .15s;
    display: flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}
.crm-filter-tab i { font-size: 12px; }
.crm-filter-tab:hover { background: var(--page); color: var(--txt); }
.crm-filter-tab.active {
    background: var(--sky);
    color: #fff;
    box-shadow: 0 2px 6px rgba(2,132,199,.2);
}

/* Filters row */
.crm-filters-row {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 16px;
}
.crm-search-container { position: relative; flex: 1; min-width: 200px; }
.crm-search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--txt3);
    pointer-events: none;
    font-size: 13px;
}
.crm-search-input {
    width: 100%;
    padding: 9px 12px 9px 36px;
    border: 1.5px solid var(--border);
    border-radius: var(--r2);
    font-size: 13px;
    color: var(--txt);
    background: var(--card);
    transition: border-color .2s, box-shadow .2s;
}
.crm-search-input:focus {
    border-color: var(--sky);
    box-shadow: 0 0 0 3px rgba(2,132,199,.08);
    outline: none;
}
.crm-filter-select {
    padding: 9px 32px 9px 12px;
    border: 1.5px solid var(--border);
    border-radius: var(--r2);
    font-size: 13px;
    background: var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3E%3C/svg%3E") right 8px center/14px no-repeat;
    color: var(--txt2);
    cursor: pointer;
    transition: border-color .2s;
    -webkit-appearance: none;
    appearance: none;
}
.crm-filter-select:focus {
    border-color: var(--sky);
    box-shadow: 0 0 0 3px rgba(2,132,199,.08);
    outline: none;
}

/* ── Tasks list container ── */
.crm-tasks-list {
    background: var(--card);
    border: 1.5px solid var(--border);
    border-radius: var(--r1);
    overflow: hidden;
}
.crm-tasks-title {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--border);
    font-size: 14px;
    font-weight: 700;
    color: var(--txt);
}
.crm-tasks-title i { color: var(--sky); }

/* Empty state */
.crm-empty {
    text-align: center;
    padding: 48px 20px;
    color: var(--txt3);
}
.crm-empty i { font-size: 40px; margin-bottom: 12px; display: block; }
.crm-empty p { margin: 0; font-size: 14px; }

/* ── Tasks table ── */

/* Pagination inside CRM */
#pagination {
    display: flex;
    justify-content: center;
    gap: 4px;
    padding: 16px 20px;
    border-top: 1px solid var(--border);
    flex-wrap: wrap;
}
#pagination button,
#pagination .pagination-btn {
    padding: 6px 12px;
    border: 1px solid var(--border);
    background: var(--card);
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--txt3);
    cursor: pointer;
    transition: all .15s;
}
#pagination button:hover,
#pagination .pagination-btn:hover {
    border-color: var(--sky);
    color: var(--sky);
}
#pagination button.active,
#pagination .pagination-btn.active {
    background: var(--sky);
    color: #fff;
    border-color: var(--sky);
}
#pagination button:disabled {
    opacity: .4;
    cursor: not-allowed;
}

/* ── Kanban board ── */
.kanban-board {
    display: none !important;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-top: 16px;
}
.kanban-board.active { display: grid !important; }
#list-view.hidden    { display: none !important; }

.kanban-column {
    background: var(--card);
    border: 1.5px solid var(--border);
    border-radius: var(--r1);
    padding: 0;
    min-height: 300px;
    max-height: 65vh;
    overflow-y: auto;
    position: relative;
}
.kanban-column::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    border-radius: var(--r1) var(--r1) 0 0;
}
.kanban-column:nth-child(1)::before { background: #3b82f6; }
.kanban-column:nth-child(2)::before { background: #10b981; }
.kanban-column:nth-child(3)::before { background: #6b7280; }

.kanban-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px 10px;
    position: sticky;
    top: 0;
    background: var(--card);
    z-index: 5;
    border-bottom: 1px solid var(--border);
}
.kanban-title {
    font-size: 12px;
    font-weight: 700;
    color: var(--txt);
    text-transform: uppercase;
    letter-spacing: .04em;
}
.kanban-count {
    background: var(--page);
    color: var(--txt3);
    padding: 2px 8px;
    border-radius: var(--r3);
    font-size: 11px;
    font-weight: 700;
    border: 1px solid var(--border);
    min-width: 22px;
    text-align: center;
}
.kanban-tasks {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    min-height: 80px;
}
.kanban-task {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--r2);
    padding: 10px 12px;
    cursor: grab;
    transition: box-shadow .15s, border-color .15s;
    position: relative;
}
.kanban-task:hover {
    border-color: var(--sky-l);
    box-shadow: 0 2px 8px rgba(2,132,199,.1);
}
.kanban-task.dragging {
    opacity: .6;
    box-shadow: 0 8px 24px rgba(0,0,0,.15);
}
.bulk-actions-count {
    font-size: 13px;
    font-weight: 600;
    color: var(--txt2);
}
.bulk-actions-buttons { display: flex; gap: 8px; }

/* ── Alert container ── */
#alert-container {
    position: fixed;
    top: 80px;
    right: 20px;
    z-index: 10001;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: 360px;
}
.alert-float {
    padding: 12px 18px;
    border-radius: var(--r2);
    font-size: 13px;
    font-weight: 600;
    box-shadow: 0 4px 16px rgba(0,0,0,.12);
    animation: slideInRight .3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid transparent;
}
.alert-float.success { background: #ecfdf5; color: #065f46; border-color: #a7f3d0; }
.alert-float.error   { background: #fef2f2; color: #991b1b; border-color: #fecaca; }
.alert-float.info    { background: #eff6ff; color: #1e40af; border-color: #bfdbfe; }
@keyframes slideInRight {
    from { opacity: 0; transform: translateX(40px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* ── CRM header buttons ── */
.btn-crm-settings {
    padding: 8px 14px;
    border: 1.5px solid var(--border);
    background: var(--card);
    border-radius: var(--r2);
    font-size: 12px;
    font-weight: 600;
    color: var(--txt3);
    cursor: pointer;
    transition: all .15s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.btn-crm-settings:hover {
    border-color: var(--sky);
    color: var(--sky);
    background: var(--sky-ll);
}

/* ── CRM View switcher (override) ── */
.crm-view-switcher {
    display: flex;
    gap: 4px;
    background: var(--card);
    border: 1.5px solid var(--border);
    padding: 3px;
    border-radius: var(--r2);
}
.crm-view-btn {
    padding: 7px 14px;
    border: none;
    background: transparent;
    color: var(--txt3);
    font-size: 12px;
    font-weight: 600;
    border-radius: 5px;
    cursor: pointer;
    transition: all .15s;
    display: flex;
    align-items: center;
    gap: 5px;
}
.crm-view-btn:hover { background: var(--page); color: var(--txt); }
.crm-view-btn.active {
    background: var(--sky);
    color: #fff;
}

/* ── CRM modals (override) ── */
.crm-modal-content {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--r1);
    max-width: 600px;
    width: 92%;
    max-height: 85vh;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,.2);
    display: flex;
    flex-direction: column;
}
.crm-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 24px;
    background: var(--page);
    border-bottom: 1px solid var(--border);
}
.crm-modal-header h3 {
    font-size: 16px;
    font-weight: 700;
    color: var(--txt);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}
.crm-modal-header h3 i { color: var(--sky); }
.crm-modal-close {
    width: 32px;
    height: 32px;
    border: 1px solid var(--border);
    background: var(--card);
    border-radius: 6px;
    cursor: pointer;
    color: var(--txt3);
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .15s;
}
.crm-modal-close:hover { background: rgba(239,68,68,.1); color: var(--rose); border-color: var(--rose); }
.crm-modal-body {
    padding: 20px 24px;
    overflow-y: auto;
    flex: 1;
}
.crm-modal-footer {
    padding: 14px 24px;
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    background: var(--page);
}

/* ── CRM Responsive ── */
@media (max-width: 1200px) {
    .crm-stats-unified .stats-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 1000px) {
    .crm-compact-section { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
    .crm-stats-unified .stats-grid { grid-template-columns: repeat(3, 1fr); }
    .crm-filters-bar { flex-direction: column; align-items: stretch; }
    .crm-filter-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .crm-filters-row { flex-direction: column; }
    .crm-search-container { min-width: 0; }
    .kanban-board.active { grid-template-columns: 1fr !important; }
    .kanban-column { max-height: 50vh; min-height: 200px; }
    .btn-crm-settings span { display: none; }
}
@media (max-width: 600px) {
    .crm-stats-unified { padding: 14px 16px 18px; }
    .crm-stats-unified .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .crm-stats-unified .stat-card { padding: 10px; gap: 8px; }
    .crm-stats-unified .stat-icon { width: 32px; height: 32px; font-size: 13px; }
    .crm-stats-unified .stat-value { font-size: 17px; }
    .crm-stats-unified .stat-label { font-size: 10px; }
    .crm-compact-section { gap: 14px; }
    .quick-actions-compact { padding: 10px 12px 0; }
    #add-task-form { padding: 10px 12px 14px; }
    .form-row-compact { grid-template-columns: 1fr; }
    .crm-filter-tab { padding: 6px 10px; font-size: 12px; }
    .crm-tasks-title { padding: 12px 14px; font-size: 13px; }
    #alert-container { right: 10px; left: 10px; max-width: none; }
}
@media (max-width: 420px) {
    .crm-stats-unified .stats-grid { grid-template-columns: 1fr 1fr; }
    .crm-stats-unified .stat-total { grid-column: 1 / -1; }
}

/* ================================================================
   CRM FINAL POLISH — таблица, канбан-карты, модалки, card view
   ================================================================ */

/* ── Kanban card inner elements (kt-*) ── */
.kt-head {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    margin-bottom: 6px;
}
.kt-pri {
    font-size: 11px;
    flex-shrink: 0;
    margin-top: 1px;
}
.kt-text {
    flex: 1;
    font-size: 12px;
    font-weight: 600;
    color: var(--txt);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.kt-notes {
    font-size: 10px;
    color: var(--txt3);
    line-height: 1.35;
    margin-bottom: 5px;
    padding: 5px 8px;
    background: #f8fafc;
    border: 1px solid var(--sky);
    border-radius: 6px;
}
.kt-notes i { font-size: 9px; margin-right: 3px; color: var(--sky); }
.kt-meta {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}
.kt-meta:empty { display: none; }
.kt-cat, .kt-contact {
    font-size: 10px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 6px;
    border-radius: 4px;
    white-space: nowrap;
}
.kt-cat {
    background: var(--sky-ll);
    color: var(--sky-h);
}
.kt-cat i { font-size: 8px; }
.kt-contact {
    background: rgba(139,92,246,.08);
    color: #7c3aed;
}
.kt-contact i { font-size: 8px; }
.kt-foot {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-top: 6px;
    border-top: 1px solid var(--page);
    flex-wrap: wrap;
}
.kt-date, .kt-time {
    font-size: 10px;
    font-weight: 600;
    color: var(--txt3);
    display: inline-flex;
    align-items: center;
    gap: 3px;
}
.kt-date i, .kt-time i { font-size: 9px; color: var(--sky); }
.kt-overdue {
    font-size: 9px;
    font-weight: 700;
    color: var(--rose);
    background: rgba(239,68,68,.08);
    padding: 1px 6px;
    border-radius: 3px;
    border: 1px solid rgba(239,68,68,.2);
    margin-left: auto;
    text-transform: uppercase;
    letter-spacing: .03em;
}

/* Kanban task priority — no left stripes */

/* Kanban drag-over column */
.kanban-column.drag-over {
    background: var(--sky-ll);
    border-color: var(--sky-l);
}

/* ── Card view (.crm-task-item) ── */
.crm-task-item {
    background: var(--card);
    border: 1.5px solid var(--border);
    border-radius: var(--r1);
    padding: 16px 18px;
    margin-bottom: 12px;
    transition: border-color .15s, box-shadow .15s;
}
.crm-task-item:hover {
    border-color: var(--sky-l);
    box-shadow: 0 2px 10px rgba(2,132,199,.06);
}
.crm-task-item.high-priority { box-shadow: inset 3px 0 0 var(--rose); }
.crm-task-item.overdue { background: #fff5f5; border-color: rgba(239,68,68,.2); }
.crm-task-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}
.crm-task-date {
    font-size: 12px;
    font-weight: 600;
    color: var(--txt3);
    margin-left: auto;
}
.crm-task-actions { display: flex; gap: 4px; }
.crm-task-actions .btn-icon {
    width: 28px; height: 28px;
    border: 1px solid var(--border);
    background: var(--card);
    border-radius: 5px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    font-size: 11px;
    color: var(--txt3);
    transition: all .15s;
}
.crm-task-actions .btn-icon:hover { border-color: var(--sky); color: var(--sky); }
.crm-task-content { margin-bottom: 10px; }
.crm-task-text { font-size: 14px; font-weight: 600; color: var(--txt); line-height: 1.5; margin-bottom: 4px; }
.crm-task-notes {
    font-size: 12px; color: var(--txt3); line-height: 1.4;
    padding: 6px 10px; background: #f8fafc;
    border: 1px solid var(--sky);
    border-radius: 6px; margin-top: 6px;
}
.crm-task-footer {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    padding-top: 10px; border-top: 1px solid var(--border);
}
.task-category-badge {
    font-size: 10px; font-weight: 600; padding: 3px 8px;
    background: var(--sky-ll); color: var(--sky-h); border: 1px solid var(--sky-l);
    border-radius: var(--r3);
}
.priority-badge.priority-high   { background: rgba(239,68,68,.08); color: var(--rose); border: 1px solid rgba(239,68,68,.2); }
.priority-badge.priority-medium { background: rgba(245,158,11,.08); color: var(--am);   border: 1px solid rgba(245,158,11,.2); }
.priority-badge.priority-low    { background: rgba(59,130,246,.08); color: #3b82f6;    border: 1px solid rgba(59,130,246,.2); }
.crm-task-status { margin-left: auto; display: flex; gap: 4px; }
.crm-status-btn {
    width: 28px; height: 28px; border: 1.5px solid var(--border);
    background: var(--card); border-radius: 6px; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; color: var(--txt3); transition: all .15s;
}
.crm-status-btn.complete:hover { background: #10b981; color: #fff; border-color: #10b981; }
.crm-status-btn.cancel:hover   { background: #6b7280; color: #fff; border-color: #6b7280; }
.crm-status-btn.reopen:hover   { background: #3b82f6; color: #fff; border-color: #3b82f6; }

/* ── Modal polish ── */
.crm-modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(15,22,35,.55);
    backdrop-filter: blur(4px);
    z-index: 10000;
    justify-content: center;
    align-items: center;
}
.crm-modal.active { display: flex; }
.crm-modal-content {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--r1);
    max-width: 600px;
    width: 92%;
    max-height: 85vh;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,.18), 0 0 0 1px rgba(255,255,255,.05);
    animation: modalSlideUp .25s ease-out;
    display: flex;
    flex-direction: column;
}
.crm-modal-content.crm-modal-wide { max-width: 780px; }
.crm-modal-content.crm-modal-narrow { max-width: 480px; }
@keyframes modalSlideUp {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}
.crm-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 24px;
    background: var(--page);
    border-bottom: 1px solid var(--border);
}
.crm-modal-header h3,
.crm-modal-header .crm-modal-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--txt);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}
.crm-modal-header h3 i { color: var(--sky); }
.crm-modal-close {
    width: 32px; height: 32px;
    border: 1px solid var(--border);
    background: var(--card);
    border-radius: 6px;
    cursor: pointer;
    color: var(--txt3);
    font-size: 14px;
    display: flex; align-items: center; justify-content: center;
    transition: all .15s;
    line-height: 1;
}
.crm-modal-close:hover { background: rgba(239,68,68,.08); color: var(--rose); border-color: var(--rose); }
.crm-modal-body {
    padding: 22px 24px;
    overflow-y: auto;
    flex: 1;
}
.crm-modal-footer {
    padding: 14px 24px;
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    background: var(--page);
}

/* Modal form elements */
.crm-form-group { margin-bottom: 16px; }
.crm-form-label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: var(--txt2);
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: .03em;
}
.crm-form-input,
.crm-form-textarea,
.crm-form-select {
    width: 100%;
    padding: 10px 14px;
    border: 1.5px solid var(--border);
    border-radius: var(--r2);
    font-size: 13px;
    font-family: inherit;
    color: var(--txt);
    background: var(--card);
    transition: border-color .2s, box-shadow .2s;
    box-sizing: border-box;
}
.crm-form-input:focus,
.crm-form-textarea:focus,
.crm-form-select:focus {
    border-color: var(--sky);
    box-shadow: 0 0 0 3px rgba(2,132,199,.08);
    outline: none;
}
.crm-form-textarea { min-height: 80px; resize: vertical; line-height: 1.5; }
.crm-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

/* Modal buttons */
.crm-btn {
    padding: 9px 18px;
    border: 1.5px solid transparent;
    border-radius: var(--r2);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all .15s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.crm-btn-primary {
    background: var(--sky);
    color: #fff;
    border-color: var(--sky);
}
.crm-btn-primary:hover {
    background: var(--sky-h);
    border-color: var(--sky-h);
    box-shadow: 0 2px 8px rgba(2,132,199,.2);
}
.crm-btn-secondary {
    background: var(--card);
    color: var(--txt3);
    border-color: var(--border);
}
.crm-btn-secondary:hover {
    background: var(--page);
    color: var(--txt);
    border-color: var(--txt3);
}
.crm-btn-danger {
    background: rgba(239,68,68,.08);
    color: var(--rose);
    border-color: rgba(239,68,68,.2);
}
.crm-btn-danger:hover {
    background: var(--rose);
    color: #fff;
    border-color: var(--rose);
}

/* Company / category list items in modals */
.company-link-form {
    padding: 16px;
    background: var(--page);
    border: 1px solid var(--border);
    border-radius: var(--r2);
    margin-bottom: 20px;
}
.company-link-form h4,
.linked-companies-list h4,
.categories-list h4 {
    font-size: 13px;
    font-weight: 700;
    color: var(--txt);
    margin: 0 0 12px;
}
.company-link-form .form-row-compact { margin-bottom: 10px; }
.company-link-form .btn-inline {
    white-space: nowrap;
    padding: 9px 16px;
}

.linked-companies-list .list-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    gap: 12px;
}
.linked-companies-list .search-box {
    position: relative;
    flex: 1;
    max-width: 260px;
}
.linked-companies-list .search-box i {
    position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
    color: var(--txt3); font-size: 12px; pointer-events: none;
}
.linked-companies-list .search-input {
    width: 100%;
    padding: 8px 10px 8px 30px;
    border: 1.5px solid var(--border);
    border-radius: var(--r2);
    font-size: 12px;
    background: var(--card);
}
.linked-companies-list .search-input:focus { border-color: var(--sky); outline: none; }

.company-item,
.category-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--r2);
    margin-bottom: 8px;
    transition: border-color .15s;
}
.company-item:hover,
.category-item:hover { border-color: var(--sky-l); }

/* ── Overdue indicator improvements ── */
.task-overdue-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    background: rgba(239,68,68,.08);
    color: var(--rose);
    border: 1px solid rgba(239,68,68,.2);
    border-radius: var(--r3);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    animation: none;
}

/* Reminder & recurring indicators */
.reminder-indicator {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px; height: 22px;
    background: rgba(245,158,11,.1);
    border: 1.5px solid rgba(245,158,11,.3);
    border-radius: 50%;
    font-size: 11px;
    animation: none;
}
.recurring-indicator {
    color: var(--vio);
    font-size: 12px;
    animation: none;
}

/* ── CRM responsive table mobile ── */
@media (max-width: 860px) {
    .crm-form-row { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
    .kanban-task { padding: 8px 10px; }
    .kt-text { font-size: 11px; }
    .kt-notes { font-size: 9px; }
    .kt-foot { font-size: 9px; }
    .crm-modal-content { width: 96%; }
    .crm-modal-header { padding: 14px 18px; }
    .crm-modal-body { padding: 16px 18px; }
    .crm-modal-footer { padding: 12px 18px; }
    .crm-btn { padding: 8px 14px; font-size: 12px; }
}

/* ================================================================
   CALENDAR — compact-calendar-card
   ================================================================ */
.compact-calendar-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.calendar-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
}
.calendar-card-header h3 {
    font-size: 15px;
    font-weight: 700;
    color: var(--txt);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}
.calendar-card-header h3 i { color: var(--sky); font-size: 14px; }
.calendar-nav { display: flex; gap: 4px; }
.calendar-nav-btn {
    width: 30px; height: 30px;
    border: 1px solid var(--border);
    background: var(--card);
    border-radius: 6px;
    cursor: pointer;
    color: var(--txt3);
    font-size: 12px;
    display: flex; align-items: center; justify-content: center;
    transition: all .15s;
}
.calendar-nav-btn:hover { background: var(--sky); color: #fff; border-color: var(--sky); }
.calendar-title {
    text-align: center;
    font-size: 14px;
    font-weight: 700;
    color: var(--txt);
    padding: 10px 0 6px;
}
.calendar-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    padding: 0 12px;
    border-bottom: 1px solid var(--border);
}
.calendar-weekday {
    text-align: center;
    font-size: 10px;
    font-weight: 700;
    color: var(--txt3);
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: 6px 0;
}
.calendar-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0;
    padding: 0 12px 12px;
}
.calendar-day {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    min-height: 44px;
    border: 1px solid var(--border);
    margin: -0.5px;
    border-radius: 0;
    cursor: pointer;
    transition: background .15s, box-shadow .15s;
    background: var(--card);
    gap: 2px;
}
.calendar-day:hover { background: var(--sky-ll); z-index: 1; box-shadow: inset 0 0 0 1.5px var(--sky); }
.calendar-day.empty { cursor: default; background: var(--page); opacity: .4; }
.calendar-day.empty:hover { background: var(--page); box-shadow: none; }
.calendar-day.other-month { opacity: .35; }
.day-number { font-size: 13px; font-weight: 500; color: var(--txt); line-height: 1; }
.calendar-day.today {
    background: var(--sky);
    border-color: var(--sky);
    z-index: 2;
    box-shadow: inset 0 0 0 1.5px var(--sky);
}
.calendar-day.today .day-number { color: #fff; font-weight: 700; }
.calendar-day.today .task-badge { background: #fff; color: var(--sky); }
.calendar-day.has-tasks::after {
    content: '';
    width: 4px; height: 4px;
    border-radius: 50%;
    background: var(--sky);
    position: absolute;
    bottom: 3px;
}
.calendar-day.today.has-tasks::after { background: #fff; }
.calendar-day.selected {
    background: var(--sky-ll);
    border-color: var(--sky);
    z-index: 1;
    box-shadow: inset 0 0 0 1.5px var(--sky);
}
.task-badge {
    position: absolute;
    top: 1px; right: 1px;
    min-width: 16px; height: 16px;
    background: var(--am);
    color: #fff;
    border-radius: 8px;
    font-size: 9px;
    font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    padding: 0 3px;
    line-height: 1;
}

/* ================================================================
   TASKS TABLE — tasks-table + task-row
   ================================================================ */
.tasks-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--card);
    border-radius: var(--r2);
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.tasks-table thead { border-bottom: 2px solid var(--border); }
.tasks-table th {
    padding: 10px 14px;
    font-size: 11px;
    font-weight: 700;
    color: var(--txt3);
    text-transform: uppercase;
    letter-spacing: .05em;
    text-align: left;
    white-space: nowrap;
    background: var(--page);
}
.tasks-table .th-checkbox { width: 36px; text-align: center; }
.tasks-table .th-priority { width: 40px; text-align: center; }
.tasks-table .th-text { width: auto; }
.tasks-table .th-category { width: 120px; }
.tasks-table .th-date { width: 110px; }
.tasks-table .th-actions { width: 180px; text-align: center; }

/* Rows */
.task-row {
    background: var(--card);
    border-bottom: 1px solid var(--border);
    transition: background .12s;
}
.task-row:last-child { border-bottom: none; }
.task-row:hover { background: #f0f6ff; }
.task-row.overdue { }
.task-row.high-priority { }
.task-row.overdue.high-priority { }
.task-row td {
    padding: 12px 14px;
    font-size: 13px;
    vertical-align: middle;
    color: var(--txt);
}
.task-row.selected-row { background: rgba(2,132,199,.06); outline: 1px solid rgba(2,132,199,.15); outline-offset: -1px; }
.task-row.selected-row:hover { background: rgba(2,132,199,.1); }

/* Cells */
.task-cell-checkbox { text-align: center; width: 36px; }
.task-cell-priority { text-align: center; font-size: 14px; width: 40px; }
.task-cell-text { max-width: 440px; }
.task-cell-actions { text-align: center; white-space: nowrap; }

/* Text & notes */
.task-text-compact {
    font-weight: 600;
    color: var(--txt);
    line-height: 1.45;
    margin-bottom: 2px;
}
.task-notes-compact {
    font-size: 11px;
    color: var(--txt3);
    padding: 6px 10px;
    margin-top: 5px;
    background: #f8fafc;
    border: 1px solid var(--sky);
    border-radius: 6px;
    line-height: 1.5;
}

/* Contact info */
.task-contact-info {
    font-size: 11px;
    color: var(--txt3);
    margin-top: 4px;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.task-contact-info i { font-size: 10px; color: var(--sky); }
.task-contact-info a { color: var(--sky); text-decoration: none; }
.task-contact-info a:hover { text-decoration: underline; }
.task-contact-mobile { font-size: 11px; color: var(--txt3); margin-top: 3px; display: flex; align-items: center; gap: 5px; }
.task-contact-mobile i { color: var(--sky); font-size: 10px; }

/* Category badge */
.cat-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    background: var(--sky-ll);
    color: var(--sky-h);
    border: 1px solid rgba(2,132,199,.15);
    border-radius: var(--r3);
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

/* Date */
.date-compact { font-weight: 600; color: var(--txt); font-size: 12px; white-space: nowrap; }
.time-compact { font-size: 11px; color: var(--txt3); margin-top: 1px; }

/* Action buttons */
.actions-inline { display: inline-flex; gap: 4px; align-items: center; }
.task-btn-mini {
    width: 28px; height: 28px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 5px;
    cursor: pointer;
    transition: all .15s;
    font-size: 11px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--card);
    color: var(--txt3);
}
.task-btn-mini:hover { transform: translateY(-1px); box-shadow: 0 2px 4px rgba(0,0,0,.08); }
.task-btn-mini.edit:hover     { background: #3b82f6; color: #fff; border-color: #3b82f6; }
.task-btn-mini.complete:hover { background: #10b981; color: #fff; border-color: #10b981; }
.task-btn-mini.postpone:hover { background: #f59e0b; color: #fff; border-color: #f59e0b; }
.task-btn-mini.cancel:hover   { background: #6b7280; color: #fff; border-color: #6b7280; }
.task-btn-mini.delete:hover   { background: #ef4444; color: #fff; border-color: #ef4444; }
.task-btn-mini.reopen:hover   { background: #3b82f6; color: #fff; border-color: #3b82f6; }

/* Checkbox */
.task-checkbox { width: 16px; height: 16px; cursor: pointer; accent-color: var(--sky); }
.task-checkbox-styled { accent-color: var(--sky); width: 16px; height: 16px; cursor: pointer; }

/* Bulk actions */
.bulk-actions-bar {
    position: fixed;
    bottom: 24px; left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: var(--card);
    border: 1.5px solid var(--sky);
    border-radius: 12px;
    padding: 12px 20px;
    display: flex; align-items: center; gap: 14px;
    box-shadow: 0 6px 20px rgba(2,132,199,.18);
    z-index: 100;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s, transform .2s;
}
.bulk-actions-bar.active {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}
.bulk-action-btn {
    padding: 6px 12px;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: var(--card);
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
    transition: all .15s;
    display: inline-flex; align-items: center; gap: 5px;
}
.bulk-action-btn:hover { background: var(--sky); color: #fff; border-color: var(--sky); }

/* ── Responsive: calendar + table ── */
@media (max-width: 1200px) {
    .compact-calendar-card { max-width: 360px; }
}
@media (max-width: 768px) {
    .compact-calendar-card { max-width: 100%; }
    .tasks-table thead { display: none; }
    .task-row { display: flex; flex-wrap: wrap; padding: 10px; gap: 6px; }
    .task-row td { padding: 4px 6px; border: none; }
    .task-cell-checkbox { order: 0; }
    .task-cell-text { max-width: 100%; flex: 1 1 100%; }
    .calendar-day { min-height: 34px; }
    .calendar-nav-btn { width: 26px; height: 26px; font-size: 10px; }
    .day-number { font-size: 11px; }
    .task-badge { min-width: 14px; height: 14px; font-size: 8px; }
    .bulk-actions-bar { padding: 10px 16px; gap: 10px; bottom: 16px; left: 10px; right: 10px; transform: none; }
    .bulk-action-btn { padding: 6px 10px; font-size: 11px; }
}

/* ═══════════════════════════════════════════════════════════════
   PORTAL NAVBAR + FOOTER — MOBILE
   ═══════════════════════════════════════════════════════════════ */

/* ── Hamburger button (hidden on desktop) ── */
.pnav-burger {
  display: none; background: none; border: none; cursor: pointer;
  width: 36px; height: 36px; flex-direction: column; align-items: center;
  justify-content: center; gap: 5px; padding: 6px; margin-left: auto; flex-shrink: 0;
}
.pnav-burger span {
  display: block; width: 20px; height: 2px; background: #e2e8f0;
  border-radius: 2px; transition: transform .25s, opacity .25s;
}
.mob-menu-open .pnav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.mob-menu-open .pnav-burger span:nth-child(2) { opacity: 0; }
.mob-menu-open .pnav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── Mobile drawer (hidden on desktop) ── */
.pnav-drawer {
  display: none; position: fixed; inset: 0; z-index: 10000;
  background: rgba(15,22,36,.6); backdrop-filter: blur(4px);
}
.pnav-drawer-inner {
  position: absolute; top: 0; right: 0; width: 280px; max-width: 85vw; height: 100%;
  background: #0f1623; overflow-y: auto; display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform .3s ease;
}
.mob-menu-open .pnav-drawer { display: block; }
.mob-menu-open .pnav-drawer-inner { transform: translateX(0); }
.mob-menu-open { overflow: hidden; }

.pnav-drawer-hd {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; border-bottom: 1px solid rgba(255,255,255,.08);
}
.pnav-drawer-hd .pnav-logo { gap: 8px; }
.pnav-drawer-hd .pnav-logo-mark { width: 28px; height: 28px; font-size: 10px; }
.pnav-drawer-hd .pnav-logo-name { font-size: 13px; }
.pnav-drawer-close {
  background: none; border: none; color: #94a3b8; font-size: 18px;
  cursor: pointer; padding: 6px; width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
}
.pnav-drawer-close:hover { color: #fff; }

.pnav-drawer-links {
  display: flex; flex-direction: column; padding: 12px 0;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.pnav-drawer-links a {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 20px; font-size: 14px; color: #cbd5e1;
  text-decoration: none; transition: background .15s, color .15s;
}
.pnav-drawer-links a:hover { background: rgba(255,255,255,.06); color: #fff; }
.pnav-drawer-links a i { width: 18px; text-align: center; font-size: 13px; color: #64748b; }

.pnav-drawer-contacts {
  display: flex; flex-direction: column; padding: 12px 20px; gap: 8px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.pnav-drawer-contacts a {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; color: #94a3b8; text-decoration: none;
}
.pnav-drawer-contacts a:hover { color: #e2e8f0; }
.pnav-drawer-contacts a i { width: 16px; text-align: center; font-size: 11px; }

.pnav-drawer-auth {
  display: flex; flex-direction: column; gap: 8px; padding: 16px 20px; margin-top: auto;
}
.pnav-drawer-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 16px; border-radius: 8px; font-size: 13px; font-weight: 600;
  text-decoration: none; transition: background .15s;
  background: rgba(255,255,255,.08); color: #cbd5e1; border: 1px solid rgba(255,255,255,.12);
}
.pnav-drawer-btn:hover { background: rgba(255,255,255,.14); color: #fff; }
.pnav-drawer-btn-fill {
  background: #0284c7; color: #fff; border-color: #0284c7;
}
.pnav-drawer-btn-fill:hover { background: #0369a1; }

/* ── Mobile breakpoints ── */

@media (max-width: 860px) {
  .pnav-burger { display: flex; }
  .pnav-right { display: none !important; }
  .pnav-inner { padding: 0 12px; }
  .pnav-logo-sub { display: none; }
}

@media (max-width: 560px) {
  :root { --nb-h-px: 46px; }
  .pnav { height: 46px; }
  .pnav-inner { height: 46px; }
  .pnav-logo-mark { width: 28px; height: 28px; font-size: 10px; }
  .pnav-logo-name { font-size: 12px; }
}

/* ── Footer mobile ── */

@media (max-width: 860px) {
  .pfooter-strip { padding: 8px 12px; }
  .pfooter-strip-in { gap: 4px 0; }
  .pfs-item { padding: 3px 8px; font-size: 11px; }
  .pfs-dot { display: none; }
  .pfooter-main {
    grid-template-columns: 1fr 1fr; gap: 20px 16px;
    padding: 24px 16px 20px;
  }
  .pf-col-brand { grid-column: 1 / -1; }
  .pf-trust { flex-direction: row; flex-wrap: wrap; gap: 4px 14px; }
  .pf-social { margin-top: 10px; }
  .pfooter-bot { padding: 12px 16px; flex-direction: column; align-items: flex-start; gap: 6px; }
}

@media (max-width: 560px) {
  .pfooter-strip { display: none; }
  .pfooter-main {
    grid-template-columns: 1fr; gap: 16px;
    padding: 18px 14px 14px;
  }
  /* Hide nav columns, keep brand + contacts */
  .pfooter-main > .pf-col:not(.pf-col-brand):not(:last-child) { display: none; }
  .pf-logo-row { margin-bottom: 6px; }
  .pf-desc { font-size: 11px; margin-bottom: 4px; }
  .pf-trust { flex-direction: row; flex-wrap: wrap; gap: 2px 10px; }
  .pf-trust-item { font-size: 10px; }
  .pf-social { margin-top: 8px; }
  .pf-social-icons { gap: 6px; }
  .pf-si { width: 30px; height: 30px; font-size: 13px; }
  .pf-col-h { font-size: 10px; margin-bottom: 6px; }
  .pf-col-h-mt { margin-top: 0; }
  .pf-nav a { font-size: 12px; padding: 3px 0; }
  .pf-cc { padding: 6px 8px; gap: 8px; }
  .pf-cc-ic { width: 26px; height: 26px; font-size: 11px; }
  .pf-cc-body span { font-size: 9px; }
  .pf-cc-body strong { font-size: 11px; }
  .pfooter-bot { padding: 10px 14px; flex-direction: column; align-items: flex-start; gap: 4px; }
  .pf-copy { font-size: 10px; }
  .pf-req { font-size: 9.5px; }
  .pfooter-bot-right { flex-wrap: wrap; }
  .pf-pay-lbl { font-size: 10px; }
}

/* ═══════════════════════════════════════════════════════════════
   STATIC PAGES  — user-agreement, privacy-policy, public-offer
   ═══════════════════════════════════════════════════════════════ */

/* ── Hero ── */
.sp-hero {
    background: linear-gradient(135deg, #0f1623 0%, #162035 40%, #1a2744 100%);
    padding: 56px 0 48px;
    position: relative;
    overflow: hidden;
}
.sp-hero::before {
    content: '';
    position: absolute; inset: 0;
    background:
        radial-gradient(ellipse 600px 400px at 15% 80%, rgba(2,132,199,.18), transparent),
        radial-gradient(ellipse 500px 350px at 85% 20%, rgba(124,58,237,.12), transparent);
    pointer-events: none;
}
.sp-hero-inner {
    position: relative; z-index: 1;
    max-width: 760px;
}
.sp-hero-badge {
    display: inline-flex; align-items: center; gap: 8px;
    background: rgba(2,132,199,.15);
    border: 1px solid rgba(2,132,199,.25);
    color: #7dd3fc;
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 12px; font-weight: 600;
    text-transform: uppercase; letter-spacing: .5px;
    margin-bottom: 20px;
}
.sp-hero-badge i { font-size: 13px; }
.sp-hero h1 {
    color: #f1f5f9;
    font-size: 32px; font-weight: 800;
    line-height: 1.25;
    margin: 0 0 16px;
}
.sp-hero-meta {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
    color: #64748b; font-size: 13px;
}
.sp-hero-meta i { font-size: 12px; margin-right: 2px; }
.sp-hero-sep { color: #334155; }

/* ── Content card ── */
.sp-section {
    padding: 40px 0 60px;
    background: var(--page, #eef2f7);
}
.sp-card {
    background: #fff;
    border: 1px solid var(--border, #dee4ed);
    border-radius: 16px;
    box-shadow: 0 1px 4px rgba(15,22,36,.06), 0 8px 30px rgba(15,22,36,.04);
    overflow: hidden;
}
.sp-body {
    padding: 48px 56px;
}

/* ── Typography inside sp-body & legal-page ── */
.sp-body p,
.sp-body .legal-page p {
    font-size: 15px;
    line-height: 1.75;
    color: #334155;
    margin-bottom: 18px;
}
.sp-body h2,
.sp-body .legal-page h2 {
    font-size: 20px;
    font-weight: 700;
    color: #0f172a;
    margin: 40px 0 16px;
    padding-bottom: 10px;
    border-bottom: 2px solid #e0f2fe;
    display: flex; align-items: center; gap: 10px;
}
.sp-body h2::before {
    content: '';
    width: 4px; height: 22px;
    background: linear-gradient(180deg, #0284c7, #7c3aed);
    border-radius: 2px;
    flex-shrink: 0;
}
.sp-body h3,
.sp-body .legal-page h3 {
    font-size: 17px;
    font-weight: 600;
    color: #1e293b;
    margin: 28px 0 12px;
}

/* Lists */
.sp-body ol,
.sp-body .legal-page ol {
    counter-reset: sp-ol;
    list-style: none;
    padding-left: 0;
    margin-bottom: 20px;
}
.sp-body ol > li {
    counter-increment: sp-ol;
    position: relative;
    padding-left: 36px;
    margin-bottom: 12px;
    font-size: 15px; line-height: 1.7;
    color: #334155;
}
.sp-body ol > li::before {
    content: counter(sp-ol) '.';
    position: absolute; left: 0; top: 0;
    font-weight: 700; font-size: 14px;
    color: #0284c7;
    width: 26px; text-align: right;
}
.sp-body ul,
.sp-body .legal-page ul {
    list-style: none;
    padding-left: 0;
    margin-bottom: 20px;
}
.sp-body ul > li {
    position: relative;
    padding-left: 24px;
    margin-bottom: 10px;
    font-size: 15px; line-height: 1.7;
    color: #334155;
}
.sp-body ul > li::before {
    content: '';
    position: absolute; left: 2px; top: 10px;
    width: 8px; height: 8px;
    background: linear-gradient(135deg, #0284c7, #7c3aed);
    border-radius: 50%;
}

/* Nested lists */
.sp-body ol ol,
.sp-body ul ul,
.sp-body ol ul,
.sp-body ul ol { margin-top: 8px; margin-bottom: 8px; }

/* Strong & em */
.sp-body strong { color: #0f172a; font-weight: 600; }
.sp-body em { color: #4b5978; font-style: italic; }

/* First paragraph — intro accent */
.sp-body > p:first-child,
.sp-body > .legal-page > .container > p:first-child {
    font-size: 16px;
    color: #1e293b;
    line-height: 1.8;
    border-left: 3px solid #0284c7;
    padding-left: 20px;
    margin-bottom: 28px;
}

/* ── Responsive ── */
@media (max-width: 768px) {
    .sp-hero { padding: 36px 0 32px; }
    .sp-hero h1 { font-size: 24px; }
    .sp-hero-meta { font-size: 12px; }
    .sp-body { padding: 28px 20px; }
    .sp-body h2 { font-size: 17px; margin: 28px 0 12px; }
    .sp-body p, .sp-body ol > li, .sp-body ul > li { font-size: 14px; }
}
@media (max-width: 480px) {
    .sp-hero { padding: 28px 0 24px; }
    .sp-hero h1 { font-size: 20px; }
    .sp-hero-badge { font-size: 11px; padding: 5px 12px; }
    .sp-body { padding: 20px 16px; }
    .sp-card { border-radius: 10px; }
}


/* ══════════════════════════════════════════════════════════════════
   ORGANIZATION DETAIL PAGE — Portal 3.0 Full Redesign
   Все селекторы .org-detail-page — самодостаточный блок
   ══════════════════════════════════════════════════════════════════ */

/* ── Page wrapper ──────────────────────────────────────────────── */
.org-detail-page { padding: 0 0 64px; background: var(--page); }
.org-detail-page > .container { max-width: 1260px; }

/* ── Breadcrumbs ───────────────────────────────────────────────── */
.org-detail-page ~ .breadcrumbs-bar,
body.portal-body .breadcrumbs-bar {
  background: var(--card);
  border-bottom: 1.5px solid var(--border);
  margin-top: var(--nb-h-px);
  position: sticky;
  top: var(--nb-h-px);
  z-index: 90;
  padding: 0;
  box-shadow: 0 1px 6px rgba(15,22,36,.045);
}
body.portal-body .breadcrumbs-bar .container {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 11px;
  padding-bottom: 11px;
  font-size: .8rem;
  color: var(--txt3);
  flex-wrap: nowrap;
  overflow: hidden;
}
body.portal-body .breadcrumbs-bar a {
  color: var(--txt2);
  text-decoration: none;
  font-weight: 500;
  white-space: nowrap;
  transition: color .15s;
}
body.portal-body .breadcrumbs-bar a:hover { color: var(--sky); }
body.portal-body .breadcrumbs-bar a i.fa-home { color: var(--sky); font-size: .72rem; }
body.portal-body .breadcrumbs-bar i.fa-chevron-right { font-size: .5rem; color: var(--border); flex-shrink: 0; }
body.portal-body .breadcrumbs-bar .breadcrumb-title {
  color: var(--txt);
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 420px;
}

/* ── Grid layout ───────────────────────────────────────────────── */
.org-detail-page .offer-detail__layout {
  display: grid;
  grid-template-columns: 1fr 330px;
  gap: 24px;
  align-items: start;
  padding-top: 24px;
}
.org-detail-page .offer-detail__main { min-width: 0; }

/* ── Title block (hero card) ───────────────────────────────────── */
.org-detail-page .offer-title-block {
  background: var(--card);
  border: 1.5px solid var(--border);
  border-radius: 16px;
  padding: 26px 28px 24px;
  margin-bottom: 0;
  box-shadow: 0 2px 12px rgba(15,22,36,.04);
  position: relative;
  overflow: hidden;
}
.org-detail-page .offer-title-block::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--sky), var(--teal), var(--em));
  border-radius: 16px 16px 0 0;
}
.org-detail-page .offer-title-block__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  margin-bottom: 14px;
}

/* ── Title ─────────────────────────────────────────────────────── */
.org-detail-page .offer-title {
  font-size: 1.55rem;
  font-weight: 900;
  color: var(--txt);
  margin: 0;
  line-height: 1.3;
  letter-spacing: -.4px;
}

/* ── Full name subtitle ────────────────────────────────────────── */
.org-detail-page .offer-short-desc {
  font-size: .9rem;
  color: var(--txt2);
  line-height: 1.5;
  margin-top: 10px;
  padding: 10px 14px !important;
  border: 1.5px solid var(--border) !important;
  border-radius: 10px !important;
  background: var(--page) !important;
  font-style: normal !important;
}

/* ── Badges (type, verified, premium, gov, demo) ───────────────── */
.org-detail-page .offer-type-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: .66rem;
  font-weight: 700;
  padding: 5px 10px;
  border-radius: 6px;
  text-transform: uppercase;
  letter-spacing: .04em;
  line-height: 1;
  white-space: nowrap;
}
.org-detail-page .offer-type--work    { background: var(--sky-l); color: var(--sky-h); }
.org-detail-page .offer-type--service { background: var(--status-warning-light); color: var(--am); }
.org-detail-page .offer-type--product { background: var(--status-success-light); color: var(--em); }

.org-detail-page .org-verified-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: .66rem;
  font-weight: 700;
  padding: 5px 10px;
  border-radius: 6px;
  text-transform: uppercase;
  letter-spacing: .04em;
  line-height: 1;
  background: #ecfdf5;
  color: var(--em);
  border: 1px solid #a7f3d0;
  margin-left: 0;
}

.org-detail-page .offer-meta-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: 6px;
  font-size: .66rem;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: .04em;
  border: 1px solid transparent;
  text-decoration: none;
  white-space: nowrap;
}
.org-detail-page .offer-meta-pill--cat { background: var(--sky-ll); color: var(--sky-h); border-color: var(--sky-l); }
.org-detail-page .offer-meta-pill--cat i { color: var(--sky-h); }
.org-detail-page .offer-meta-pill--date { background: var(--status-warning-light); color: var(--am); border-color: #fde68a; }
.org-detail-page .offer-meta-pill--date i { color: var(--am); }

/* ── Tabs ──────────────────────────────────────────────────────── */
.org-detail-page .offer-tabs {
  display: flex;
  gap: 0;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  background: var(--card);
  border: 1.5px solid var(--border);
  border-bottom: 2.5px solid var(--border);
  border-radius: 16px 16px 0 0;
  margin-top: 18px;
  margin-bottom: 0;
  padding: 0 6px;
}
.org-detail-page .offer-tabs::-webkit-scrollbar { display: none; }
.org-detail-page .offer-tab {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 10px 7px;
  font-size: .66rem;
  font-weight: 700;
  color: var(--txt2);
  text-decoration: none;
  border-bottom: 2.5px solid transparent;
  margin-bottom: -2.5px;
  border-radius: 0;
  transition: all .15s;
  white-space: nowrap;
  position: relative;
}
.org-detail-page .offer-tab i { font-size: .58rem; opacity: .65; }
.org-detail-page .offer-tab:hover {
  color: var(--sky-h);
  background: var(--sky-ll);
}
.org-detail-page .offer-tab.active {
  color: var(--sky-h);
  background: rgba(2,132,199,.06);
  border-bottom-color: var(--sky);
}
.org-detail-page .offer-tab.active i { opacity: 1; }
.org-detail-page .rq-tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  background: var(--sky);
  color: #fff;
  font-size: .55rem;
  font-weight: 800;
  border-radius: 8px;
  line-height: 1;
}

/* ── Sections (content cards) ──────────────────────────────────── */
.org-detail-page .offer-section {
  background: var(--card);
  border: 1.5px solid var(--border);
  border-radius: 0 0 16px 16px;
  padding: 28px 28px;
  margin-bottom: 18px;
  box-shadow: 0 2px 10px rgba(15,22,36,.035);
  scroll-margin-top: calc(var(--nb-h-px) + 60px);
  border-top: none;
}
.org-detail-page .offer-section:not(:first-of-type) {
  border-radius: 16px;
  border-top: 1.5px solid var(--border);
}
.org-detail-page .offer-section__title {
  font-size: 1.05rem;
  font-weight: 900;
  color: var(--txt);
  margin: 0 0 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--page);
  line-height: 1.3;
}
.org-detail-page .offer-section__title i {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  background: linear-gradient(135deg, var(--sky-ll), var(--sky-l));
  color: var(--sky-h);
  font-size: .85rem;
  flex-shrink: 0;
}

/* ── About: lead & description ─────────────────────────────────── */
.org-detail-page .org-lead {
  font-size: .95rem;
  line-height: 1.75;
  color: var(--txt2);
  background: linear-gradient(135deg, var(--sky-ll) 0%, #f0fdf4 100%);
  border-left: 4px solid var(--sky);
  border-radius: 0 12px 12px 0;
  padding: 16px 20px;
  margin-bottom: 8px;
}
.org-detail-page .offer-desc__content,
.org-detail-page .rq-desc-plain {
  white-space: pre-line;
  font-size: .9375rem;
  line-height: 1.8;
  color: var(--txt2);
}

/* ── OKVED ─────────────────────────────────────────────────────── */
.org-detail-page .org-okved-main {
  background: linear-gradient(135deg, var(--sky-ll), #eff6ff);
  border: 1.5px solid var(--sky-l);
  border-radius: 12px;
  padding: 14px 18px;
  margin-bottom: 14px;
  font-size: .875rem;
  color: var(--sky-h);
  font-weight: 600;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  line-height: 1.5;
}
.org-detail-page .org-okved-main i { color: #fbbf24; font-size: .9rem; margin-top: 3px; flex-shrink: 0; }
.org-detail-page .org-okved-list { display: flex; flex-direction: column; gap: 6px; }
.org-detail-page .org-okved-item {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 10px 14px;
  background: var(--page);
  border-radius: 10px;
  font-size: .875rem;
  transition: background .12s, border-color .12s;
  border: 1.5px solid transparent;
}
.org-detail-page .org-okved-item:hover {
  background: var(--sky-ll);
  border-color: var(--sky-l);
}
.org-detail-page .org-okved-code {
  font-weight: 800;
  color: var(--sky-h);
  white-space: nowrap;
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: .78rem;
  background: var(--card);
  padding: 3px 9px;
  border-radius: 5px;
  border: 1px solid var(--border);
}
.org-detail-page .org-okved-desc { color: var(--txt2); line-height: 1.45; }

/* ── Card items (requests, offers, vacancies, tenders, press) ─── */
.org-detail-page .org-request-card {
  display: block;
  background: var(--card);
  border: 1.5px solid var(--border);
  border-radius: 14px;
  padding: 16px 18px;
  text-decoration: none;
  transition: border-color .18s, box-shadow .18s, transform .18s;
  margin-bottom: 10px;
}
.org-detail-page .org-request-card:last-child { margin-bottom: 0; }
.org-detail-page .org-request-card:hover {
  border-color: var(--sky-l);
  box-shadow: 0 6px 22px rgba(2,132,199,.1);
  transform: translateY(-2px);
}
.org-detail-page .org-request-card__top {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.org-detail-page .org-request-budget {
  font-size: .85rem;
  font-weight: 800;
  color: var(--sky-h);
  margin-left: auto;
  letter-spacing: -.2px;
  white-space: nowrap;
}
.org-detail-page .org-request-card__title {
  font-size: .925rem;
  font-weight: 700;
  color: var(--txt);
  line-height: 1.45;
  margin-bottom: 8px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.org-detail-page .org-request-card__desc {
  font-size: .8rem;
  color: var(--txt2);
  line-height: 1.55;
  margin-bottom: 8px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.org-detail-page .org-request-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  font-size: .75rem;
  color: var(--txt3);
  font-weight: 500;
}
.org-detail-page .org-request-card__meta span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.org-detail-page .org-request-card__meta i {
  color: var(--sky);
  font-size: .62rem;
}

/* ── Offer card with image ─────────────────────────────────────── */
.org-detail-page .org-offer-card {
  display: flex;
  flex-direction: row;
  gap: 14px;
  padding: 14px 16px;
  align-items: center;
}
.org-detail-page .org-offer-card__img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  flex-shrink: 0;
  border-radius: 12px;
  border: 1.5px solid var(--border);
  background: var(--page);
}
.org-detail-page .org-offer-card__body { flex: 1; min-width: 0; }

/* ── Press card with image ─────────────────────────────────────── */
.org-detail-page .org-press-card {
  display: flex;
  flex-direction: row;
  gap: 14px;
  padding: 14px 16px;
  align-items: center;
}
.org-detail-page .org-press-card__img {
  width: 96px;
  height: 76px;
  object-fit: cover;
  flex-shrink: 0;
  border-radius: 10px;
  border: 1.5px solid var(--border);
  background: var(--page);
}

/* ── Vacancy badges ────────────────────────────────────────────── */
.org-detail-page .org-vac-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: .6rem;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 5px;
  text-transform: uppercase;
  letter-spacing: .03em;
}
.org-detail-page .org-vac-badge--urgent { background: var(--status-error-light); color: var(--rose); }
.org-detail-page .org-vac-badge--top    { background: var(--status-warning-light); color: var(--am); }

/* ── Contacts departments grid ─────────────────────────────────── */
.org-detail-page .org-dept-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
}
.org-detail-page .org-dept-card2 {
  background: var(--card);
  border: 1.5px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  transition: border-color .15s, box-shadow .15s;
}
.org-detail-page .org-dept-card2:hover {
  border-color: var(--sky-l);
  box-shadow: 0 4px 16px rgba(2,132,199,.08);
}
.org-detail-page .org-dept-card2__name {
  font-weight: 800;
  color: #fff;
  font-size: .825rem;
  padding: 11px 16px;
  background: linear-gradient(135deg, var(--sky-h), var(--teal));
  display: flex;
  align-items: center;
  gap: 8px;
  letter-spacing: .01em;
}
.org-detail-page .org-dept-card2__name::before {
  content: '\f2b9';
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: .7rem;
  opacity: .8;
}
.org-detail-page .org-dept-card2__body {
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.org-detail-page .org-dept-card2__person {
  font-size: .875rem;
  font-weight: 700;
  color: var(--txt);
  display: flex;
  align-items: center;
  gap: 7px;
}
.org-detail-page .org-dept-card2__person i { color: var(--txt3); font-size: .7rem; flex-shrink: 0; }
.org-detail-page .org-dept-card2__pos {
  font-size: .75rem;
  color: var(--txt2);
  padding-left: 22px;
  margin-top: -2px;
}
.org-detail-page .org-dept-card2__contact {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: .8rem;
  color: var(--sky-h);
  text-decoration: none;
  padding: 5px 0;
  border-top: 1px dashed var(--page);
  transition: color .12s;
}
.org-detail-page .org-dept-card2__contact:first-of-type { margin-top: 4px; }
.org-detail-page .org-dept-card2__contact i { width: 14px; text-align: center; flex-shrink: 0; font-size: .72rem; }
.org-detail-page .org-dept-card2__contact:hover { color: var(--sky); }

/* ══════════════════════════════════════════════════════════════════
   SIDEBAR
   ══════════════════════════════════════════════════════════════════ */
.org-detail-page .offer-detail__sidebar {
  position: sticky;
  top: calc(var(--nb-h-px) + 16px);
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* ── Identity card ─────────────────────────────────────────────── */
.org-detail-page .offer-price-card.org-identity-card {
  background: var(--card);
  border: 1.5px solid var(--border);
  border-radius: 16px;
  padding: 28px 22px 24px;
  box-shadow: 0 4px 20px rgba(2,132,199,.06);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.org-detail-page .offer-price-card.org-identity-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--sky), var(--teal));
}
.org-detail-page .org-identity-logo {
  width: 88px;
  height: 88px;
  object-fit: contain;
  border-radius: 16px;
  border: 2px solid var(--border);
  background: var(--card);
  padding: 6px;
  margin: 0 auto 14px;
  display: block;
  box-shadow: 0 3px 12px rgba(0,0,0,.06);
}
.org-detail-page .org-identity-avatar {
  width: 80px;
  height: 80px;
  border-radius: 20px;
  background: linear-gradient(135deg, var(--sky), var(--teal));
  color: #fff;
  font-size: 1.6rem;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 14px;
  box-shadow: 0 6px 20px rgba(2,132,199,.25);
  letter-spacing: 1px;
}
.org-detail-page .org-identity-name {
  font-size: .95rem;
  font-weight: 800;
  color: var(--txt);
  line-height: 1.35;
  margin-bottom: 10px;
}
.org-detail-page .org-identity-status {
  font-size: .72rem;
  font-weight: 700;
  color: var(--txt3);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin-bottom: 4px;
  padding: 5px 12px;
  border-radius: 100px;
  background: var(--page);
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}
.org-detail-page .org-identity-status--ok {
  color: var(--em);
  background: #ecfdf5;
}
.org-detail-page .org-identity-city {
  font-size: .8rem;
  color: var(--txt2);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin-top: 8px;
}
.org-detail-page .org-identity-city i { color: var(--sky); font-size: .7rem; }

/* ── Sidebar cards ─────────────────────────────────────────────── */
.org-detail-page .offer-sidebar-card {
  background: var(--card);
  border: 1.5px solid var(--border);
  border-radius: 16px;
  padding: 20px 22px;
  box-shadow: 0 2px 10px rgba(15,22,36,.035);
}
.org-detail-page .offer-sidebar-card--mt { margin-top: 14px; }
.org-detail-page .offer-sidebar-card__title {
  font-size: .7rem;
  font-weight: 800;
  color: var(--txt);
  margin: 0 0 14px;
  text-transform: uppercase;
  letter-spacing: .08em;
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 10px;
  border-bottom: 1.5px solid var(--page);
}
.org-detail-page .offer-sidebar-card__title i {
  color: var(--sky);
  font-size: .8rem;
}

/* ── Quick facts (contacts in sidebar) ─────────────────────────── */
.org-detail-page .offer-quickfacts {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.org-detail-page .offer-qf {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: var(--page);
  border: 1.5px solid transparent;
  border-radius: 12px;
  padding: 13px 14px;
  transition: border-color .15s;
}
.org-detail-page .offer-qf:hover { border-color: var(--sky-l); }
.org-detail-page .offer-qf > i {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: linear-gradient(135deg, var(--sky-ll), var(--sky-l));
  color: var(--sky-h);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: .8rem;
}
.org-detail-page .offer-qf__l {
  font-size: .62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--txt3);
  margin-bottom: 3px;
}
.org-detail-page .offer-qf__v {
  font-size: .85rem;
  font-weight: 700;
  color: var(--txt);
  line-height: 1.35;
  word-break: break-word;
}
.org-detail-page .offer-qf__v a {
  color: var(--sky-h);
  text-decoration: none;
  transition: color .12s;
}
.org-detail-page .offer-qf__v a:hover { color: var(--sky); text-decoration: underline; }

/* ── Email protection ──────────────────────────────────────────── */
.org-detail-page .org-email-protected {
  cursor: pointer;
  color: var(--sky) !important;
  font-size: .85rem !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  transition: color .12s;
  font-weight: 600;
}
.org-detail-page .org-email-protected:hover { color: var(--sky-h) !important; }

/* ── Rekvizity grid ────────────────────────────────────────────── */
.org-detail-page .offer-org-full__rekvizity {
  display: grid;
  gap: 10px;
  background: var(--page);
  border-radius: 14px;
  padding: 14px;
  border: 1.5px solid transparent;
}
.org-detail-page .offer-org-rekvizit {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.org-detail-page .offer-org-rekvizit--full { grid-column: 1/-1; }
.org-detail-page .offer-org-rekvizit__label {
  font-size: .6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--txt3);
}
.org-detail-page .offer-org-rekvizit__val {
  font-size: .875rem;
  font-weight: 700;
  color: var(--txt);
  word-break: break-word;
  line-height: 1.35;
}

/* ── Bank info ─────────────────────────────────────────────────── */
.org-detail-page .org-bank-card {
  padding: 12px 0 !important;
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  position: static !important;
  overflow: visible !important;
  transform: none !important;
  transition: none !important;
}
.org-detail-page .org-bank-card::before { display: none !important; content: none !important; }
.org-detail-page .org-bank-card:hover { transform: none !important; box-shadow: none !important; }
.org-detail-page .org-bank-card--sep {
  padding-top: 14px !important;
  margin-top: 6px;
  border-top: 1.5px solid var(--border) !important;
}
.org-detail-page .org-bank-name {
  font-size: .825rem !important;
  font-weight: 700 !important;
  color: var(--txt) !important;
  margin-bottom: 10px !important;
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
}
.org-detail-page .org-bank-name i { color: var(--sky); font-size: .72rem; }
.org-detail-page .org-bank-rows {
  display: flex;
  flex-direction: column;
  background: var(--page);
  border: 1.5px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}
.org-detail-page .org-bank-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border-bottom: 1px solid var(--border);
  transition: background .1s;
}
.org-detail-page .org-bank-row:last-child { border-bottom: none; }
.org-detail-page .org-bank-row:hover { background: var(--sky-ll); }
.org-detail-page .org-bank-row__k {
  font-size: .62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--txt2);
  white-space: nowrap;
  flex-shrink: 0;
}
.org-detail-page .org-bank-row__v {
  font-size: .78rem;
  font-weight: 600;
  color: var(--txt);
  word-break: break-all;
  text-align: right;
  flex: 1;
  min-width: 0;
  font-family: var(--font-mono);
  letter-spacing: .02em;
}

/* ══════════════════════════════════════════════════════════════════
   RESPONSIVE — Organization Detail
   ══════════════════════════════════════════════════════════════════ */

/* ── Tablet ────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .org-detail-page .offer-detail__layout {
    grid-template-columns: 1fr 290px;
    gap: 20px;
  }
}

/* ── Small tablet ──────────────────────────────────────────────── */
@media (max-width: 860px) {
  .org-detail-page .offer-detail__layout {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .org-detail-page .offer-detail__sidebar {
    position: static;
    order: -1;
    margin-bottom: 20px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  .org-detail-page .offer-sidebar-card--mt { margin-top: 0; }
  .org-detail-page .offer-price-card.org-identity-card {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 16px;
    text-align: left;
    padding: 18px 20px;
  }
  .org-detail-page .offer-price-card.org-identity-card::before { height: 3px; }
  .org-detail-page .org-identity-avatar,
  .org-detail-page .org-identity-logo {
    width: 56px;
    height: 56px;
    margin: 0;
    flex-shrink: 0;
    border-radius: 14px;
    font-size: 1.2rem;
  }
  .org-detail-page .org-identity-name { margin-bottom: 4px; font-size: .9rem; }
  .org-detail-page .org-identity-status { margin: 0 0 2px; }
  .org-detail-page .org-identity-city { justify-content: flex-start; margin-top: 2px; }
  .org-detail-page .offer-title { font-size: 1.35rem; }
  .org-detail-page .offer-section { padding: 20px 20px; }
  .org-detail-page .offer-title-block { padding: 20px 20px; }
}

/* ── Phone ─────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .org-detail-page .offer-detail__sidebar {
    grid-template-columns: 1fr;
  }
  .org-detail-page .offer-price-card.org-identity-card {
    flex-direction: column;
    text-align: center;
    padding: 20px 16px;
  }
  .org-detail-page .org-identity-avatar,
  .org-detail-page .org-identity-logo {
    width: 64px;
    height: 64px;
    margin: 0 auto;
  }
  .org-detail-page .org-identity-status { margin-left: auto; margin-right: auto; }
  .org-detail-page .org-identity-city { justify-content: center; }
  .org-detail-page .offer-title { font-size: 1.2rem; letter-spacing: -.2px; }
  .org-detail-page .offer-title-block { padding: 16px 14px; border-radius: 12px; }
  .org-detail-page .offer-title-block__meta { gap: 5px; }
  .org-detail-page .offer-type-badge,
  .org-detail-page .org-verified-badge,
  .org-detail-page .offer-meta-pill { font-size: .6rem; padding: 4px 8px; }
  .org-detail-page .offer-tabs { margin-top: 14px; border-radius: 12px 12px 0 0; padding: 0 2px; }
  .org-detail-page .offer-tab { padding: 10px 12px; font-size: .75rem; gap: 4px; }
  .org-detail-page .offer-tab i { display: none; }
  .org-detail-page .rq-tab-count { min-width: 16px; height: 16px; font-size: .55rem; }
  .org-detail-page .offer-section { padding: 18px 14px; border-radius: 0 0 12px 12px; }
  .org-detail-page .offer-section:not(:first-of-type) { border-radius: 12px; }
  .org-detail-page .offer-section__title { font-size: .95rem; gap: 8px; margin-bottom: 16px; padding-bottom: 12px; }
  .org-detail-page .offer-section__title i { width: 28px; height: 28px; font-size: .75rem; border-radius: 7px; }
  .org-detail-page .org-lead { padding: 12px 14px; font-size: .9rem; border-radius: 0 10px 10px 0; }
  .org-detail-page .org-okved-main { padding: 12px 14px; border-radius: 10px; }
  .org-detail-page .org-okved-item { padding: 8px 10px; gap: 8px; font-size: .825rem; }
  .org-detail-page .org-okved-code { font-size: .72rem; padding: 2px 7px; }
  .org-detail-page .org-request-card { padding: 14px; border-radius: 12px; }
  .org-detail-page .org-request-card__title { font-size: .875rem; }
  .org-detail-page .org-dept-grid { grid-template-columns: 1fr; gap: 10px; }
  .org-detail-page .org-dept-card2 { border-radius: 12px; }
  .org-detail-page .offer-sidebar-card { border-radius: 12px; padding: 16px; }
  .org-detail-page .offer-price-card.org-identity-card { border-radius: 12px; }
  .org-detail-page .offer-qf { padding: 10px 12px; border-radius: 10px; gap: 10px; }
  .org-detail-page .offer-qf > i { width: 30px; height: 30px; font-size: .72rem; border-radius: 8px; }
  .org-detail-page .offer-org-full__rekvizity { padding: 12px; border-radius: 12px; }
  .org-detail-page .org-bank-rows { border-radius: 10px; }
  .org-detail-page .org-bank-row { padding: 8px 12px; }
  body.portal-body .breadcrumbs-bar .container { font-size: .72rem; padding-top: 8px; padding-bottom: 8px; }
  body.portal-body .breadcrumbs-bar .breadcrumb-title { max-width: 180px; font-size: .72rem; }
  .org-detail-page .offer-short-desc { font-size: .82rem; padding: 8px 12px !important; border-radius: 8px !important; }
  .org-detail-page .org-offer-card__img { width: 64px; height: 64px; border-radius: 10px; }
  .org-detail-page .org-press-card__img { width: 72px; height: 60px; border-radius: 8px; }
}

/* ── Extra small ───────────────────────────────────────────────── */
@media (max-width: 380px) {
  .org-detail-page .offer-title { font-size: 1.05rem; }
  .org-detail-page .offer-tab { padding: 8px 9px; font-size: .7rem; }
  .org-detail-page .offer-section { padding: 14px 12px; }
  .org-detail-page .offer-section__title { font-size: .88rem; }
  .org-detail-page .org-request-card { padding: 12px 10px; }
  .org-detail-page .org-request-card__meta { gap: 8px; font-size: .7rem; }
  .org-detail-page .offer-sidebar-card { padding: 14px 12px; }
  .org-detail-page .offer-qf { padding: 8px 10px; }
  .org-detail-page .offer-qf > i { width: 26px; height: 26px; font-size: .65rem; }
  .org-detail-page .offer-qf__v { font-size: .8rem; }
  .org-detail-page .org-dept-card2__body { padding: 10px 12px; }
}

/* ══════════════════════════════════════════════════════════════════
   REQUEST DETAIL PAGE — Portal 3.0 Full Redesign
   Все селекторы .request-detail-page — самодостаточный блок
   ══════════════════════════════════════════════════════════════════ */

/* ── Page wrapper ──────────────────────────────────────────────── */
.request-detail-page { padding: 0 0 64px; background: var(--page); }
.request-detail-page > .container { max-width: 1260px; }

/* ── Expired banner ────────────────────────────────────────────── */
.rq-expired-banner {
  background: linear-gradient(135deg, #fef2f2, #fff1f2);
  border-bottom: 2px solid #fecaca;
  padding: 14px 0;
  font-size: .875rem;
  margin-top: var(--nb-h-px);
}
.rq-expired-banner .container {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--rose);
}
.rq-expired-banner i { font-size: 1.2rem; flex-shrink: 0; }
.rq-expired-banner strong { font-weight: 800; }
.rq-expired-banner a { color: var(--rose); font-weight: 700; margin-left: 8px; text-decoration: underline; }
.rq-expired-banner a:hover { text-decoration: none; }
.rq-expired-banner + .request-detail-page .breadcrumbs-bar { margin-top: 0; }

/* ── Grid layout ───────────────────────────────────────────────── */
.request-detail-page .offer-detail__layout {
  display: grid;
  grid-template-columns: 1fr 330px;
  gap: 24px;
  align-items: start;
  padding-top: 24px;
}
.request-detail-page .offer-detail__main { min-width: 0; }

/* ── Title block ───────────────────────────────────────────────── */
.request-detail-page .offer-title-block {
  background: var(--card);
  border: 1.5px solid var(--border);
  border-radius: 16px;
  padding: 26px 28px 24px;
  margin-bottom: 0;
  box-shadow: 0 2px 12px rgba(15,22,36,.04);
  position: relative;
  overflow: hidden;
}
.request-detail-page .offer-title-block::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--sky), var(--em), var(--am));
  border-radius: 16px 16px 0 0;
}
.request-detail-page .offer-title-block__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  margin-bottom: 14px;
}
.request-detail-page .offer-title {
  font-size: 1.55rem;
  font-weight: 900;
  color: var(--txt);
  margin: 0;
  line-height: 1.3;
  letter-spacing: -.4px;
}
.request-detail-page .offer-short-desc {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .875rem;
  color: var(--txt2);
  line-height: 1.5;
  margin-top: 12px;
  padding: 10px 14px !important;
  border: 1.5px solid var(--border) !important;
  border-radius: 10px !important;
  background: var(--page) !important;
  font-style: normal !important;
}
.request-detail-page .offer-short-desc__icon {
  color: var(--sky);
  font-size: .9rem;
  flex-shrink: 0;
}

/* ── Badges ────────────────────────────────────────────────────── */
.request-detail-page .offer-type-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: .66rem;
  font-weight: 700;
  padding: 5px 10px;
  border-radius: 6px;
  text-transform: uppercase;
  letter-spacing: .04em;
  line-height: 1;
  white-space: nowrap;
}
.request-detail-page .offer-meta-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: 6px;
  font-size: .66rem;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: .04em;
  border: 1px solid transparent;
  white-space: nowrap;
}
.request-detail-page .rq-pill--active { background: #ecfdf5; color: var(--em); border-color: #a7f3d0; }
.request-detail-page .rq-pill--expired { background: #fef2f2; color: var(--rose); border-color: #fecaca; }
.request-detail-page .rq-pill--withdrawn { background: var(--status-warning-light); color: var(--am); border-color: #fde68a; }
.request-detail-page .rq-pill--completed { background: #ecfdf5; color: var(--em); border-color: #a7f3d0; }

/* ── Tabs ──────────────────────────────────────────────────────── */
.request-detail-page .offer-tabs {
  display: flex;
  gap: 0;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  background: var(--card);
  border: 1.5px solid var(--border);
  border-bottom: 2.5px solid var(--border);
  border-radius: 16px 16px 0 0;
  margin-top: 18px;
  margin-bottom: 0;
  padding: 0 6px;
}
.request-detail-page .offer-tabs::-webkit-scrollbar { display: none; }
.request-detail-page .offer-tab {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 11px 12px;
  font-size: .72rem;
  font-weight: 700;
  color: var(--txt2);
  text-decoration: none;
  border-bottom: 2.5px solid transparent;
  margin-bottom: -2.5px;
  border-radius: 0;
  transition: all .15s;
  white-space: nowrap;
}
.request-detail-page .offer-tab i { font-size: .62rem; opacity: .65; }
.request-detail-page .offer-tab:hover { color: var(--sky-h); background: var(--sky-ll); }
.request-detail-page .offer-tab.active { color: var(--sky-h); background: rgba(2,132,199,.06); border-bottom-color: var(--sky); }
.request-detail-page .offer-tab.active i { opacity: 1; }
.request-detail-page .rq-tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  background: var(--sky);
  color: #fff;
  font-size: .55rem;
  font-weight: 800;
  border-radius: 8px;
}

/* ── Sections ──────────────────────────────────────────────────── */
.request-detail-page .offer-section {
  background: var(--card);
  border: 1.5px solid var(--border);
  border-radius: 0 0 16px 16px;
  padding: 28px 28px;
  margin-bottom: 18px;
  box-shadow: 0 2px 10px rgba(15,22,36,.035);
  scroll-margin-top: calc(var(--nb-h-px) + 60px);
  border-top: none;
}
.request-detail-page .offer-section:not(:first-of-type) {
  border-radius: 16px;
  border-top: 1.5px solid var(--border);
}
.request-detail-page .offer-section__title {
  font-size: 1.05rem;
  font-weight: 900;
  color: var(--txt);
  margin: 0 0 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--page);
}
.request-detail-page .offer-section__title i {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  background: linear-gradient(135deg, var(--sky-ll), var(--sky-l));
  color: var(--sky-h);
  font-size: .85rem;
  flex-shrink: 0;
}

/* ── Description ───────────────────────────────────────────────── */
.request-detail-page .rq-desc-plain {
  white-space: pre-line;
  font-size: .9375rem;
  line-height: 1.8;
  color: var(--txt2);
}
.request-detail-page .rq-withdrawal-notice {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: linear-gradient(135deg, #fef2f2, #fff1f2);
  border: 1.5px solid #fecaca;
  border-radius: 12px;
  padding: 16px 18px;
  margin-top: 18px;
  color: var(--rose);
  font-size: .875rem;
  line-height: 1.55;
}
.request-detail-page .rq-withdrawal-notice i { flex-shrink: 0; margin-top: 2px; font-size: 1rem; }
.request-detail-page .rq-withdrawal-notice strong { display: block; margin-bottom: 3px; font-weight: 800; }

/* ── Organization section ──────────────────────────────────────── */
.request-detail-page .offer-org-full { display: flex; flex-direction: column; gap: 4px; }
.request-detail-page .offer-org-full__header {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 18px;
}
.request-detail-page .offer-org-full__avatar {
  width: 60px;
  height: 60px;
  border-radius: 16px;
  flex-shrink: 0;
  background: linear-gradient(135deg, var(--sky), var(--teal));
  color: #fff;
  font-size: 1.3rem;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(2,132,199,.2);
}
.request-detail-page .rq-org-logo {
  width: 60px;
  height: 60px;
  object-fit: contain;
  border-radius: 16px;
  border: 1.5px solid var(--border);
  background: var(--card);
  padding: 4px;
}
.request-detail-page .offer-org-full__name {
  font-size: .95rem;
  font-weight: 800;
  color: var(--txt);
  line-height: 1.35;
  margin-bottom: 4px;
}
.request-detail-page .offer-org-full__name a { color: var(--txt); text-decoration: none; }
.request-detail-page .offer-org-full__name a:hover { color: var(--sky-h); }
.request-detail-page .org-verified-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: .62rem;
  font-weight: 700;
  padding: 4px 9px;
  border-radius: 5px;
  text-transform: uppercase;
  letter-spacing: .04em;
  background: #ecfdf5;
  color: var(--em);
  border: 1px solid #a7f3d0;
  margin-left: 4px;
  vertical-align: middle;
}
.request-detail-page .offer-org-full__director {
  font-size: .825rem;
  color: var(--txt3);
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 7px;
}
.request-detail-page .offer-org-full__director strong { color: var(--txt); }
.request-detail-page .offer-org-full__city {
  font-size: .8rem;
  color: var(--txt2);
  margin-top: 2px;
  display: flex;
  align-items: center;
  gap: 5px;
}
.request-detail-page .offer-org-full__city i { color: var(--sky); font-size: .7rem; }
.request-detail-page .offer-org-full__rekvizity {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  background: var(--page);
  border-radius: 14px;
  padding: 14px;
  border: 1.5px solid transparent;
}
.request-detail-page .offer-org-rekvizit { display: flex; flex-direction: column; gap: 3px; }
.request-detail-page .offer-org-rekvizit--full { grid-column: 1/-1; }
.request-detail-page .offer-org-rekvizit__label {
  font-size: .6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--txt3);
}
.request-detail-page .offer-org-rekvizit__val {
  font-size: .875rem;
  font-weight: 700;
  color: var(--txt);
  word-break: break-word;
}
.request-detail-page .rq-org-contacts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1.5px solid var(--page);
}
.request-detail-page .rq-org-contact-btn {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 9px 14px;
  background: var(--page);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  color: var(--sky-h);
  font-size: .8rem;
  font-weight: 600;
  text-decoration: none;
  transition: all .15s;
}
.request-detail-page .rq-org-contact-btn:hover { background: var(--sky-ll); border-color: var(--sky-l); }
.request-detail-page .rq-org-contact-btn i { color: var(--sky); font-size: .75rem; flex-shrink: 0; }

/* ── Contacts section — facts grid ─────────────────────────────── */
.request-detail-page .offer-facts-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.request-detail-page .offer-fact {
  text-align: center;
  padding: 18px 14px;
  background: var(--page);
  border-radius: 14px;
  border: 1.5px solid transparent;
  transition: border-color .15s;
}
.request-detail-page .offer-fact:hover { border-color: var(--sky-l); }
.request-detail-page .offer-fact__icon { font-size: 1.4rem; color: var(--sky); margin-bottom: 8px; }
.request-detail-page .offer-fact__label {
  font-size: .62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--txt3);
  margin-bottom: 5px;
}
.request-detail-page .offer-fact__val { font-size: .875rem; font-weight: 800; color: var(--txt); line-height: 1.35; }
.request-detail-page .offer-fact__val a { color: var(--sky-h); text-decoration: none; }
.request-detail-page .offer-fact__val a:hover { text-decoration: underline; }
.request-detail-page .rq-contacts-hidden {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: var(--page);
  border: 1.5px solid var(--border);
  border-radius: 14px;
  padding: 20px;
  color: var(--txt2);
}
.request-detail-page .rq-contacts-hidden i { font-size: 1.5rem; color: var(--txt3); margin-top: 2px; flex-shrink: 0; }
.request-detail-page .rq-contacts-hidden strong { color: var(--txt); display: block; margin-bottom: 4px; font-weight: 800; }
.request-detail-page .rq-contacts-hidden p { margin: 0; font-size: .875rem; line-height: 1.5; }

/* ── Files cards ───────────────────────────────────────────────── */
.request-detail-page .offer-details-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.request-detail-page .offer-detail-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: var(--page);
  border: 1.5px solid transparent;
  border-radius: 14px;
  padding: 16px;
  transition: border-color .15s, box-shadow .15s;
}
.request-detail-page .offer-detail-card:hover {
  border-color: var(--sky-l);
  box-shadow: 0 4px 14px rgba(2,132,199,.08);
}
.request-detail-page .offer-detail-card__icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--sky), var(--teal));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
}
.request-detail-page .offer-detail-card__body { min-width: 0; }
.request-detail-page .offer-detail-card__label {
  font-size: .65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--txt3);
  margin-bottom: 3px;
}
.request-detail-page .offer-detail-card__val {
  font-size: .85rem;
  font-weight: 600;
  color: var(--txt);
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Q&A ───────────────────────────────────────────────────────── */
.request-detail-page .rq-qa-form {
  background: linear-gradient(135deg, var(--sky-ll), #f0fdf4);
  border: 1.5px solid var(--sky-l);
  border-radius: 14px;
  padding: 20px;
  margin-bottom: 20px;
}
.request-detail-page .rq-qa-form .form-label {
  display: block;
  font-weight: 700;
  color: var(--txt);
  margin-bottom: 8px;
  font-size: .875rem;
}
.request-detail-page .rq-qa-form .form-input {
  width: 100%;
  padding: 10px 14px;
  border: 1.5px solid var(--sky-l);
  border-radius: 10px;
  font-size: .9375rem;
  resize: vertical;
  min-height: 80px;
  box-sizing: border-box;
  font-family: inherit;
  transition: border-color .2s;
}
.request-detail-page .rq-qa-form .form-input:focus { outline: none; border-color: var(--sky); box-shadow: 0 0 0 3px rgba(2,132,199,.1); }
.request-detail-page .rq-qa-list { display: flex; flex-direction: column; gap: 14px; }
.request-detail-page .rq-qa-item {
  border: 1.5px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  transition: border-color .15s;
}
.request-detail-page .rq-qa-item:hover { border-color: var(--sky-l); }
.request-detail-page .rq-qa-q { padding: 16px 18px; background: var(--card); }
.request-detail-page .rq-qa-q__head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.request-detail-page .rq-qa-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  background: var(--sky);
  color: #fff;
  border-radius: 50%;
  font-size: .72rem;
  font-weight: 800;
  flex-shrink: 0;
}
.request-detail-page .rq-qa-company { font-weight: 700; color: var(--txt); font-size: .875rem; text-decoration: none; }
.request-detail-page .rq-qa-company:hover { color: var(--sky); }
.request-detail-page .rq-qa-date { font-size: .72rem; color: var(--txt3); margin-left: auto; display: flex; align-items: center; gap: 4px; }
.request-detail-page .rq-qa-q__text { color: var(--txt2); font-size: .9375rem; line-height: 1.65; }
.request-detail-page .rq-qa-a {
  padding: 14px 18px;
  background: linear-gradient(135deg, var(--sky-ll), #f0fdf4);
  border-top: 1.5px solid var(--sky-l);
}
.request-detail-page .rq-qa-a__head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: .8rem; color: var(--sky-h); font-weight: 700; }
.request-detail-page .rq-qa-a__text { color: var(--txt2); font-size: .9375rem; line-height: 1.65; }
.request-detail-page .rq-qa-pending {
  padding: 12px 18px;
  background: var(--status-warning-light);
  border-top: 1.5px solid #fde68a;
  color: var(--am);
  font-size: .8rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}
.request-detail-page .rq-qa-empty {
  text-align: center;
  padding: 36px;
  color: var(--txt3);
}
.request-detail-page .rq-qa-empty i { font-size: 2rem; display: block; margin-bottom: 10px; opacity: .5; }

/* ── History ───────────────────────────────────────────────────── */
.request-detail-page .offer-attrs-modern { display: flex; flex-direction: column; gap: 2px; }
.request-detail-page .offer-attr-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--page);
  border-radius: 8px;
  transition: background .1s;
}
.request-detail-page .offer-attr-row:hover { background: var(--page); }
.request-detail-page .offer-attr-row:last-child { border-bottom: none; }
.request-detail-page .offer-attr-row__icon { color: var(--sky); width: 18px; text-align: center; flex-shrink: 0; }
.request-detail-page .offer-attr-row__label { font-size: .8rem; color: var(--txt3); font-weight: 600; width: 130px; flex-shrink: 0; }
.request-detail-page .offer-attr-row__val { font-size: .875rem; color: var(--txt); font-weight: 500; flex: 1; line-height: 1.4; }

/* ══════════════════════════════════════════════════════════════════
   SIDEBAR — Request Detail
   ══════════════════════════════════════════════════════════════════ */
.request-detail-page .offer-detail__sidebar {
  position: sticky;
  top: calc(var(--nb-h-px) + 16px);
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* ── Price card (budget) ───────────────────────────────────────── */
.request-detail-page .offer-price-card {
  background: var(--card);
  border: 2px solid rgba(2,132,199,.15);
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 4px 20px rgba(2,132,199,.06);
  position: relative;
  overflow: hidden;
  text-align: center;
}
.request-detail-page .offer-price-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--sky), var(--teal));
}
.request-detail-page .offer-price-card__label {
  font-size: .65rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--txt3);
  margin-bottom: 8px;
}
.request-detail-page .offer-price-card__price {
  font-size: 1.85rem;
  font-weight: 900;
  color: var(--sky-h);
  line-height: 1.15;
  margin-bottom: 12px;
  letter-spacing: -.5px;
}
.request-detail-page .rq-budget-undef {
  font-size: 1.2rem !important;
  color: var(--txt3) !important;
  font-weight: 700 !important;
}
.request-detail-page .offer-price-card__vat {
  font-size: .78rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: 8px;
  font-weight: 700;
  background: #ecfdf5;
}

/* ── CTA button ────────────────────────────────────────────────── */
.request-detail-page .offer-cta-btn {
  margin-top: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  box-sizing: border-box;
  padding: 13px 16px;
  font-size: .875rem;
  font-weight: 700;
  border-radius: 12px;
  text-decoration: none;
  transition: opacity .15s, transform .15s;
}
.request-detail-page .offer-cta-btn:hover { opacity: .92; transform: translateY(-1px); }

/* ── Sidebar cards ─────────────────────────────────────────────── */
.request-detail-page .offer-sidebar-card {
  background: var(--card);
  border: 1.5px solid var(--border);
  border-radius: 16px;
  padding: 20px 22px;
  box-shadow: 0 2px 10px rgba(15,22,36,.035);
}
.request-detail-page .offer-sidebar-card--mt { margin-top: 14px; }
.request-detail-page .offer-sidebar-card__title {
  font-size: .7rem;
  font-weight: 800;
  color: var(--txt);
  margin: 0 0 14px;
  text-transform: uppercase;
  letter-spacing: .08em;
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 10px;
  border-bottom: 1.5px solid var(--page);
}
.request-detail-page .offer-sidebar-card__title i { color: var(--sky); font-size: .8rem; }

/* ── Quick facts ───────────────────────────────────────────────── */
.request-detail-page .offer-quickfacts { display: flex; flex-direction: column; gap: 10px; }
.request-detail-page .offer-qf {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: var(--page);
  border: 1.5px solid transparent;
  border-radius: 12px;
  padding: 13px 14px;
  transition: border-color .15s;
}
.request-detail-page .offer-qf:hover { border-color: var(--sky-l); }
.request-detail-page .offer-qf > i {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: linear-gradient(135deg, var(--sky-ll), var(--sky-l));
  color: var(--sky-h);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: .8rem;
}
.request-detail-page .offer-qf__l {
  font-size: .62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--txt3);
  margin-bottom: 3px;
}
.request-detail-page .offer-qf__v {
  font-size: .85rem;
  font-weight: 700;
  color: var(--txt);
  line-height: 1.35;
}
.request-detail-page .text-red { color: var(--rose) !important; }

/* ── Company mini card ─────────────────────────────────────────── */
.request-detail-page .offer-company-mini {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.request-detail-page .offer-company-mini__logo {
  width: 50px;
  height: 50px;
  border-radius: 14px;
  object-fit: contain;
  border: 1.5px solid var(--border);
  flex-shrink: 0;
}
.request-detail-page .offer-company-mini__avatar {
  width: 50px;
  height: 50px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--sky), var(--teal));
  color: #fff;
  font-size: 1.1rem;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 3px 10px rgba(2,132,199,.2);
}
.request-detail-page .offer-company-mini__name {
  font-size: .875rem;
  font-weight: 800;
  color: var(--txt);
  text-decoration: none;
  display: block;
  margin-bottom: 4px;
  line-height: 1.35;
}
.request-detail-page .offer-company-mini__name:hover { color: var(--sky-h); }
.request-detail-page .offer-company-mini__verified {
  font-size: .68rem;
  font-weight: 700;
  color: var(--em);
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 3px;
}
.request-detail-page .offer-company-mini__unverified {
  font-size: .68rem;
  font-weight: 700;
  color: var(--am);
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 3px;
}
.request-detail-page .offer-company-mini__inn {
  font-size: .72rem;
  color: var(--txt3);
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 2px;
}
.request-detail-page .offer-company-mini__inn span { color: var(--txt3); }

/* ══════════════════════════════════════════════════════════════════
   RESPONSIVE — Request Detail
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 1100px) {
  .request-detail-page .offer-detail__layout { grid-template-columns: 1fr 290px; gap: 20px; }
}
@media (max-width: 860px) {
  .request-detail-page .offer-detail__layout { grid-template-columns: 1fr; gap: 0; }
  .request-detail-page .offer-detail__sidebar {
    position: static;
    order: -1;
    margin-bottom: 20px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  .request-detail-page .offer-price-card { grid-column: 1/-1; }
  .request-detail-page .offer-sidebar-card--mt { margin-top: 0; }
  .request-detail-page .offer-cta-btn { grid-column: 1/-1; margin-top: 0; }
  .request-detail-page .offer-title { font-size: 1.35rem; }
  .request-detail-page .offer-section { padding: 20px 20px; }
  .request-detail-page .offer-title-block { padding: 20px 20px; }
  .request-detail-page .offer-facts-grid { grid-template-columns: repeat(3, 1fr); }
  .request-detail-page .offer-org-full__rekvizity { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .request-detail-page .offer-detail__sidebar { grid-template-columns: 1fr; }
  .request-detail-page .offer-title { font-size: 1.2rem; letter-spacing: -.2px; }
  .request-detail-page .offer-title-block { padding: 16px 14px; border-radius: 12px; }
  .request-detail-page .offer-title-block__meta { gap: 5px; }
  .request-detail-page .offer-type-badge,
  .request-detail-page .offer-meta-pill { font-size: .6rem; padding: 4px 8px; }
  .request-detail-page .offer-tabs { margin-top: 14px; border-radius: 12px 12px 0 0; padding: 0 2px; }
  .request-detail-page .offer-tab { padding: 10px 10px; font-size: .68rem; }
  .request-detail-page .offer-tab i { display: none; }
  .request-detail-page .offer-section { padding: 18px 14px; border-radius: 0 0 12px 12px; }
  .request-detail-page .offer-section:not(:first-of-type) { border-radius: 12px; }
  .request-detail-page .offer-section__title { font-size: .95rem; gap: 8px; }
  .request-detail-page .offer-section__title i { width: 28px; height: 28px; font-size: .75rem; }
  .request-detail-page .offer-facts-grid { grid-template-columns: 1fr; gap: 10px; }
  .request-detail-page .offer-details-cards { grid-template-columns: 1fr; }
  .request-detail-page .offer-org-full__header { flex-direction: column; gap: 12px; }
  .request-detail-page .offer-org-full__rekvizity { grid-template-columns: 1fr 1fr; }
  .request-detail-page .offer-sidebar-card { border-radius: 12px; padding: 16px; }
  .request-detail-page .offer-price-card { border-radius: 12px; padding: 20px; }
  .request-detail-page .offer-price-card__price { font-size: 1.5rem; }
  .request-detail-page .offer-qf { padding: 10px 12px; border-radius: 10px; gap: 10px; }
  .request-detail-page .offer-qf > i { width: 30px; height: 30px; font-size: .72rem; }
  .request-detail-page .rq-qa-item { border-radius: 12px; }
  .request-detail-page .rq-qa-q { padding: 14px; }
  .request-detail-page .rq-qa-a { padding: 12px 14px; }
  .request-detail-page .offer-short-desc { font-size: .8rem; padding: 8px 12px !important; border-radius: 8px !important; }
  .request-detail-page .offer-attr-row__label { width: 100px; font-size: .72rem; }
  .request-detail-page .rq-expired-banner { font-size: .8rem; }
}
@media (max-width: 380px) {
  .request-detail-page .offer-title { font-size: 1.05rem; }
  .request-detail-page .offer-tab { padding: 8px 8px; font-size: .65rem; }
  .request-detail-page .offer-section { padding: 14px 12px; }
  .request-detail-page .offer-sidebar-card { padding: 14px 12px; }
  .request-detail-page .offer-org-full__rekvizity { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════════════
   OFFER DETAIL PAGE — Portal 3.0 Full Redesign
   Все селекторы .ofr-detail-page — самодостаточный блок
   ══════════════════════════════════════════════════════════════════ */

/* ── Page wrapper ──────────────────────────────────────────────── */
.ofr-detail-page { padding: 0 0 0; background: var(--page); }
.ofr-detail-page > .container { max-width: 1260px; }

/* ── Grid layout ───────────────────────────────────────────────── */
.ofr-detail-page .offer-detail__layout {
  display: grid;
  grid-template-columns: 1fr 330px;
  gap: 24px;
  align-items: start;
  padding-top: 24px;
}
.ofr-detail-page .offer-detail__main { min-width: 0; }

/* ── Gallery ───────────────────────────────────────────────────── */
.ofr-detail-page .offer-gallery { margin-bottom: 20px; }
.ofr-detail-page .offer-gallery__main {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  height: 400px;
  border: 1.5px solid var(--border);
  background: var(--card);
  box-shadow: 0 4px 20px rgba(0,0,0,.06);
  display: flex;
  align-items: center;
  justify-content: center;
}
.ofr-detail-page .offer-gallery__main-img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; display: block; }
.ofr-detail-page .offer-gallery__count {
  position: absolute;
  bottom: 12px; right: 12px;
  background: rgba(15,23,42,.65);
  color: #fff;
  font-size: .72rem;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 100px;
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  gap: 5px;
}
.ofr-detail-page .offer-gallery__placeholder {
  border-radius: 16px;
  border: 1.5px solid var(--border);
  height: 320px;
  background: var(--page);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5rem;
  color: var(--border);
}
.ofr-detail-page .offer-gallery__thumbs { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.ofr-detail-page .offer-gallery__thumb {
  width: 68px;
  height: 50px;
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  border: 2px solid transparent;
  transition: border-color .15s, box-shadow .15s;
}
.ofr-detail-page .offer-gallery__thumb img { width: 100%; height: 100%; object-fit: cover; }
.ofr-detail-page .offer-gallery__thumb:hover { border-color: var(--sky-l); box-shadow: 0 2px 8px rgba(2,132,199,.12); }
.ofr-detail-page .offer-gallery__thumb--active { border-color: var(--sky); box-shadow: 0 2px 10px rgba(2,132,199,.2); }

/* ── Title block ───────────────────────────────────────────────── */
.ofr-detail-page .offer-title-block {
  background: var(--card);
  border: 1.5px solid var(--border);
  border-radius: 16px;
  padding: 26px 28px 24px;
  margin-bottom: 0;
  box-shadow: 0 2px 12px rgba(15,22,36,.04);
  position: relative;
  overflow: hidden;
}
.ofr-detail-page .offer-title-block::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--sky), var(--teal), var(--vio));
  border-radius: 16px 16px 0 0;
}
.ofr-detail-page .offer-title-block__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-bottom: 14px; }
.ofr-detail-page .offer-title { font-size: 1.55rem; font-weight: 900; color: var(--txt); margin: 0; line-height: 1.3; letter-spacing: -.4px; }
.ofr-detail-page .offer-short-desc {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: .9rem;
  color: var(--txt2);
  line-height: 1.6;
  margin-top: 12px;
  padding: 12px 16px !important;
  border: 1.5px solid var(--border) !important;
  border-radius: 12px !important;
  background: var(--page) !important;
}
.ofr-detail-page .offer-short-desc__icon { color: var(--sky); font-size: .85rem; flex-shrink: 0; margin-top: 3px; opacity: .7; }

/* ── Badges ────────────────────────────────────────────────────── */
.ofr-detail-page .offer-type-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: .66rem; font-weight: 700; padding: 5px 10px;
  border-radius: 6px; text-transform: uppercase; letter-spacing: .04em;
  line-height: 1; white-space: nowrap;
}
.ofr-detail-page .offer-meta-pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 10px; border-radius: 6px; font-size: .66rem;
  font-weight: 700; line-height: 1; text-transform: uppercase;
  letter-spacing: .04em; border: 1px solid transparent;
  white-space: nowrap; text-decoration: none;
}
.ofr-detail-page .offer-meta-pill--cat { background: var(--sky-ll); color: var(--sky-h); border-color: var(--sky-l); }
.ofr-detail-page .offer-meta-pill--subcat { background: var(--sky-ll); color: var(--vio); border-color: rgba(124,58,237,.2); }
.ofr-detail-page .offer-meta-pill--views { background: var(--sky-ll); color: var(--vio); border-color: rgba(124,58,237,.2); }
.ofr-detail-page .offer-meta-pill--date { background: var(--status-warning-light); color: var(--am); border-color: #fde68a; }

/* ── Tabs ──────────────────────────────────────────────────────── */
.ofr-detail-page .offer-tabs {
  display: flex; gap: 0; flex-wrap: nowrap; overflow-x: auto;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
  background: var(--card); border: 1.5px solid var(--border);
  border-bottom: 2.5px solid var(--border);
  border-radius: 16px 16px 0 0; margin-top: 18px; margin-bottom: 0; padding: 0 6px;
}
.ofr-detail-page .offer-tabs::-webkit-scrollbar { display: none; }
.ofr-detail-page .offer-tab {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 11px 14px; font-size: .75rem; font-weight: 700;
  color: var(--txt2); text-decoration: none;
  border-bottom: 2.5px solid transparent; margin-bottom: -2.5px;
  transition: all .15s; white-space: nowrap;
}
.ofr-detail-page .offer-tab i { font-size: .65rem; opacity: .65; }
.ofr-detail-page .offer-tab:hover { color: var(--sky-h); background: var(--sky-ll); }
.ofr-detail-page .offer-tab.active { color: var(--sky-h); background: rgba(2,132,199,.06); border-bottom-color: var(--sky); }
.ofr-detail-page .offer-tab.active i { opacity: 1; }

/* ── Sections ──────────────────────────────────────────────────── */
.ofr-detail-page .offer-section {
  background: var(--card); border: 1.5px solid var(--border);
  border-radius: 0 0 16px 16px; padding: 28px;
  margin-bottom: 18px; box-shadow: 0 2px 10px rgba(15,22,36,.035);
  scroll-margin-top: calc(var(--nb-h-px) + 60px); border-top: none;
}
.ofr-detail-page .offer-section:not(:first-of-type) { border-radius: 16px; border-top: 1.5px solid var(--border); }
.ofr-detail-page .offer-section__title {
  font-size: 1.05rem; font-weight: 900; color: var(--txt);
  margin: 0 0 20px; display: flex; align-items: center; gap: 10px;
  padding-bottom: 14px; border-bottom: 2px solid var(--page);
}
.ofr-detail-page .offer-section__title i {
  width: 34px; height: 34px; display: flex; align-items: center;
  justify-content: center; border-radius: 9px;
  background: linear-gradient(135deg, var(--sky-ll), var(--sky-l));
  color: var(--sky-h); font-size: .85rem; flex-shrink: 0;
}

/* ── Description content ───────────────────────────────────────── */
.ofr-detail-page .offer-desc__content { font-size: .9375rem; color: var(--txt2); line-height: 1.8; }
.ofr-detail-page .offer-desc__content h2,.ofr-detail-page .offer-desc__content h3 { color: var(--txt); font-weight: 800; margin: 22px 0 10px; }
.ofr-detail-page .offer-desc__content h3 { padding-left: 12px; border-left: 3px solid var(--sky); }
.ofr-detail-page .offer-desc__content ul { padding-left: 0; list-style: none; }
.ofr-detail-page .offer-desc__content ul li { padding: 4px 0 4px 22px; position: relative; }
.ofr-detail-page .offer-desc__content ul li::before { content: "✓"; position: absolute; left: 0; color: var(--sky); font-weight: 900; }
.ofr-detail-page .offer-desc__content p { margin: 12px 0; }
.ofr-detail-page .offer-desc__content strong { color: var(--txt); font-weight: 800; }
.ofr-detail-page .offer-desc__content a { color: var(--sky-h); text-decoration: underline; }

/* ── Facts grid ────────────────────────────────────────────────── */
.ofr-detail-page .offer-facts-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; margin-bottom: 24px; }
.ofr-detail-page .offer-fact {
  text-align: center; padding: 18px 14px; background: var(--page);
  border-radius: 14px; border: 1.5px solid transparent; transition: border-color .15s;
}
.ofr-detail-page .offer-fact:hover { border-color: var(--sky-l); }
.ofr-detail-page .offer-fact__icon { font-size: 1.4rem; color: var(--sky); margin-bottom: 8px; }
.ofr-detail-page .offer-fact__label { font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--txt3); margin-bottom: 5px; }
.ofr-detail-page .offer-fact__val { font-size: .875rem; font-weight: 800; color: var(--txt); line-height: 1.35; }

/* ── Attrs rows ────────────────────────────────────────────────── */
.ofr-detail-page .offer-attrs-modern { display: flex; flex-direction: column; gap: 2px; }
.ofr-detail-page .offer-attr-row {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 14px; border-bottom: 1px solid var(--page);
  border-radius: 8px; transition: background .1s;
}
.ofr-detail-page .offer-attr-row:hover { background: var(--page); }
.ofr-detail-page .offer-attr-row:last-child { border-bottom: none; }
.ofr-detail-page .offer-attr-row__icon { color: var(--sky); width: 18px; text-align: center; flex-shrink: 0; }
.ofr-detail-page .offer-attr-row__label { font-size: .825rem; color: var(--txt3); font-weight: 600; width: 180px; flex-shrink: 0; }
.ofr-detail-page .offer-attr-row__val { font-size: .875rem; color: var(--txt); font-weight: 500; flex: 1; }

/* ── Details cards (files etc) ─────────────────────────────────── */
.ofr-detail-page .offer-details-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 8px; }
.ofr-detail-page .offer-detail-card {
  display: flex; align-items: flex-start; gap: 14px;
  background: var(--page); border: 1.5px solid transparent;
  border-radius: 14px; padding: 16px; transition: border-color .15s, box-shadow .15s;
}
.ofr-detail-page .offer-detail-card:hover { border-color: var(--sky-l); box-shadow: 0 4px 14px rgba(2,132,199,.08); }
.ofr-detail-page .offer-detail-card__icon {
  width: 40px; height: 40px; border-radius: 10px;
  background: linear-gradient(135deg, var(--sky), var(--teal));
  color: #fff; display: flex; align-items: center;
  justify-content: center; font-size: 1rem; flex-shrink: 0;
}
.ofr-detail-page .offer-detail-card__label { font-size: .65rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--txt3); margin-bottom: 3px; }
.ofr-detail-page .offer-detail-card__val { font-size: .85rem; font-weight: 600; color: var(--txt); line-height: 1.4; }

/* ── Includes / Excludes ───────────────────────────────────────── */
.ofr-detail-page .offer-includes, .ofr-detail-page .offer-excludes {
  border-radius: 14px; padding: 18px 20px; margin-bottom: 16px;
}
.ofr-detail-page .offer-includes { background: #ecfdf5; border: 1.5px solid #a7f3d0; }
.ofr-detail-page .offer-excludes { background: #fef2f2; border: 1.5px solid #fecaca; }
.ofr-detail-page .offer-includes__title, .ofr-detail-page .offer-excludes__title {
  font-size: .875rem; font-weight: 800; margin-bottom: 12px;
  display: flex; align-items: center; gap: 7px;
}
.ofr-detail-page .offer-includes__title { color: var(--em); }
.ofr-detail-page .offer-excludes__title { color: var(--rose); }
.ofr-detail-page .offer-includes__list, .ofr-detail-page .offer-excludes__list {
  list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 7px;
}
.ofr-detail-page .offer-includes__list li, .ofr-detail-page .offer-excludes__list li {
  font-size: .875rem; display: flex; align-items: flex-start; gap: 9px; line-height: 1.5;
}
.ofr-detail-page .offer-includes__list li i { color: var(--em); margin-top: 2px; flex-shrink: 0; }
.ofr-detail-page .offer-excludes__list li i { color: var(--rose); margin-top: 2px; flex-shrink: 0; }

/* ── Organization full section ─────────────────────────────────── */
.ofr-detail-page .offer-org-full { display: flex; flex-direction: column; gap: 4px; }
.ofr-detail-page .offer-org-full__header { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 18px; }
.ofr-detail-page .offer-org-full__avatar {
  width: 60px; height: 60px; border-radius: 16px; flex-shrink: 0;
  background: linear-gradient(135deg, var(--sky), var(--teal));
  color: #fff; font-size: 1.3rem; font-weight: 900;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 14px rgba(2,132,199,.2);
}
.ofr-detail-page .offer-org-full__name { font-size: .95rem; font-weight: 800; color: var(--txt); line-height: 1.35; margin-bottom: 4px; }
.ofr-detail-page .offer-org-full__name a { color: var(--txt); text-decoration: none; }
.ofr-detail-page .offer-org-full__name a:hover { color: var(--sky-h); }
.ofr-detail-page .offer-org-full__director { font-size: .825rem; color: var(--txt3); margin-bottom: 4px; display: flex; align-items: center; gap: 7px; }
.ofr-detail-page .offer-org-full__director strong { color: var(--txt); }
.ofr-detail-page .offer-org-full__city { font-size: .8rem; color: var(--txt2); margin-top: 2px; display: flex; align-items: center; gap: 5px; }
.ofr-detail-page .offer-org-full__city i { color: var(--sky); font-size: .7rem; }
.ofr-detail-page .offer-org-full__rekvizity { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; background: var(--page); border-radius: 14px; padding: 14px; }
.ofr-detail-page .offer-org-rekvizit { display: flex; flex-direction: column; gap: 3px; }
.ofr-detail-page .offer-org-rekvizit--full { grid-column: 1/-1; }
.ofr-detail-page .offer-org-rekvizit__label { font-size: .6rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--txt3); }
.ofr-detail-page .offer-org-rekvizit__val { font-size: .875rem; font-weight: 700; color: var(--txt); word-break: break-word; }

/* ══════════════════════════════════════════════════════════════════
   SIDEBAR — Offer Detail
   ══════════════════════════════════════════════════════════════════ */
.ofr-detail-page .offer-detail__sidebar {
  position: sticky; top: calc(var(--nb-h-px) + 16px);
  align-self: start; display: flex; flex-direction: column; gap: 14px;
}

/* ── Price card ────────────────────────────────────────────────── */
.ofr-detail-page .offer-price-card {
  background: var(--card); border: 2px solid rgba(2,132,199,.15);
  border-radius: 16px; padding: 24px;
  box-shadow: 0 4px 20px rgba(2,132,199,.06);
  position: relative; overflow: hidden;
}
.ofr-detail-page .offer-price-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, var(--sky), var(--teal));
}
.ofr-detail-page .offer-price-card__label { font-size: .65rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: var(--txt3); margin-bottom: 8px; }
.ofr-detail-page .offer-price-card__price { font-size: 1.85rem; font-weight: 900; color: var(--sky-h); line-height: 1.15; margin-bottom: 6px; letter-spacing: -.5px; }
.ofr-detail-page .offer-price-card__unit { font-size: .8rem; color: var(--txt3); margin-bottom: 12px; }
.ofr-detail-page .offer-price-card__vat { font-size: .78rem; color: var(--em); display: flex; align-items: center; gap: 6px; margin-bottom: 8px; background: #ecfdf5; padding: 6px 10px; border-radius: 8px; font-weight: 700; }
.ofr-detail-page .offer-price-card__prepay { font-size: .78rem; color: var(--am); background: var(--status-warning-light); padding: 6px 10px; border-radius: 8px; display: flex; align-items: center; gap: 7px; margin-bottom: 6px; font-weight: 600; }
.ofr-detail-page .offer-price-card__payterms { font-size: .75rem; color: var(--txt3); line-height: 1.5; display: flex; align-items: flex-start; gap: 6px; margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--page); }

/* ── Contact buttons ───────────────────────────────────────────── */
.ofr-detail-page .offer-sidebar-card--contacts { margin-top: 0; }
.ofr-detail-page .offer-contact-btn {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 16px; border-radius: 14px;
  text-decoration: none; transition: all .15s;
  border: 1.5px solid var(--page); margin-bottom: 8px;
}
.ofr-detail-page .offer-contact-btn:last-child { margin-bottom: 0; }
.ofr-detail-page .offer-contact-btn--phone { background: #ecfdf5; border-color: #a7f3d0; }
.ofr-detail-page .offer-contact-btn--phone:hover { border-color: var(--em); }
.ofr-detail-page .offer-contact-btn--phone > i { color: var(--em); font-size: 1rem; }
.ofr-detail-page .offer-contact-btn--email { background: var(--sky-ll); border-color: var(--sky-l); }
.ofr-detail-page .offer-contact-btn--email:hover { border-color: var(--sky); }
.ofr-detail-page .offer-contact-btn--email > i { color: var(--sky); font-size: 1rem; }
.ofr-detail-page .offer-contact-btn--web { background: var(--sky-ll); border-color: rgba(124,58,237,.15); }
.ofr-detail-page .offer-contact-btn--web:hover { border-color: var(--vio); }
.ofr-detail-page .offer-contact-btn--web > i { color: var(--vio); font-size: 1rem; }
.ofr-detail-page .offer-contact-btn__label { font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--txt3); display: block; }
.ofr-detail-page .offer-contact-btn__val { font-size: .85rem; font-weight: 700; color: var(--txt); display: block; }

/* ── Sidebar cards ─────────────────────────────────────────────── */
.ofr-detail-page .offer-sidebar-card {
  background: var(--card); border: 1.5px solid var(--border);
  border-radius: 16px; padding: 20px 22px;
  box-shadow: 0 2px 10px rgba(15,22,36,.035);
}
.ofr-detail-page .offer-sidebar-card__title {
  font-size: .7rem; font-weight: 800; color: var(--txt);
  margin: 0 0 14px; text-transform: uppercase; letter-spacing: .08em;
  display: flex; align-items: center; gap: 8px;
  padding-bottom: 10px; border-bottom: 1.5px solid var(--page);
}
.ofr-detail-page .offer-sidebar-card__title i { color: var(--sky); font-size: .8rem; }

/* ── Quick facts ───────────────────────────────────────────────── */
.ofr-detail-page .offer-quickfacts { display: flex; flex-direction: column; gap: 10px; }
.ofr-detail-page .offer-qf {
  display: flex; align-items: flex-start; gap: 12px;
  background: var(--page); border: 1.5px solid transparent;
  border-radius: 12px; padding: 13px 14px; transition: border-color .15s;
}
.ofr-detail-page .offer-qf:hover { border-color: var(--sky-l); }
.ofr-detail-page .offer-qf > i {
  width: 34px; height: 34px; border-radius: 9px;
  background: linear-gradient(135deg, var(--sky-ll), var(--sky-l));
  color: var(--sky-h); display: flex; align-items: center;
  justify-content: center; flex-shrink: 0; font-size: .8rem;
}
.ofr-detail-page .offer-qf__l { font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--txt3); margin-bottom: 3px; }
.ofr-detail-page .offer-qf__v { font-size: .85rem; font-weight: 700; color: var(--txt); line-height: 1.35; }

/* ── Company mini card ─────────────────────────────────────────── */
.ofr-detail-page .offer-company-mini { display: flex; gap: 14px; align-items: flex-start; }
.ofr-detail-page .offer-company-mini__logo { width: 50px; height: 50px; border-radius: 14px; object-fit: contain; border: 1.5px solid var(--border); flex-shrink: 0; }
.ofr-detail-page .offer-company-mini__avatar {
  width: 50px; height: 50px; border-radius: 14px;
  background: linear-gradient(135deg, var(--sky), var(--teal));
  color: #fff; font-size: 1.1rem; font-weight: 900;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; box-shadow: 0 3px 10px rgba(2,132,199,.2);
}
.ofr-detail-page .offer-company-mini__name { font-size: .875rem; font-weight: 800; color: var(--txt); text-decoration: none; display: block; margin-bottom: 4px; line-height: 1.35; }
.ofr-detail-page .offer-company-mini__name:hover { color: var(--sky-h); }
.ofr-detail-page .offer-company-mini__verified { font-size: .68rem; font-weight: 700; color: var(--em); display: flex; align-items: center; gap: 4px; margin-bottom: 3px; }
.ofr-detail-page .offer-company-mini__unverified { font-size: .68rem; font-weight: 700; color: var(--am); display: flex; align-items: center; gap: 4px; margin-bottom: 3px; }
.ofr-detail-page .offer-company-mini__city { font-size: .72rem; color: var(--txt3); display: flex; align-items: center; gap: 5px; margin-top: 2px; }
.ofr-detail-page .offer-company-mini__inn { font-size: .72rem; color: var(--txt3); display: flex; align-items: center; gap: 5px; margin-top: 2px; }

/* ── CTA button ────────────────────────────────────────────────── */
.ofr-detail-page .offer-cta-btn {
  margin-top: 0; display: flex; align-items: center; justify-content: center;
  gap: 8px; width: 100%; box-sizing: border-box;
  padding: 13px 16px; font-size: .875rem; font-weight: 700;
  border-radius: 12px; text-decoration: none;
  transition: opacity .15s, transform .15s;
}
.ofr-detail-page .offer-cta-btn:hover { opacity: .92; transform: translateY(-1px); }

/* ── Similar offers section ────────────────────────────────────── */
.similar-offers-section {
  background: var(--page); border-top: 1.5px solid var(--border);
  padding: 40px 0 56px;
}
.similar-offers__title {
  font-size: 1.2rem; font-weight: 900; color: var(--txt);
  margin: 0 0 22px; display: flex; align-items: center; gap: 10px;
}
.similar-offers__title i { color: var(--sky); font-size: 1rem; }
.similar-offers__grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; }
.similar-offer-card {
  background: var(--card); border: 1.5px solid var(--border);
  border-radius: 16px; overflow: hidden; text-decoration: none;
  transition: box-shadow .18s, border-color .18s, transform .18s;
}
.similar-offer-card:hover { box-shadow: 0 6px 24px rgba(2,132,199,.1); border-color: var(--sky-l); transform: translateY(-2px); }
.similar-offer-card__img { height: 140px; overflow: hidden; background: var(--page); }
.similar-offer-card__img img { width: 100%; height: 100%; object-fit: cover; }
.similar-offer-card__img-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 2.5rem; color: var(--border); }
.similar-offer-card__body { padding: 14px 16px; }
.similar-offer-card__title { font-size: .875rem; font-weight: 700; color: var(--txt); margin: 8px 0 6px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.similar-offer-card__price { font-size: .9rem; font-weight: 800; color: var(--sky-h); margin-bottom: 4px; }
.similar-offer-card__city { font-size: .72rem; color: var(--txt3); display: flex; align-items: center; gap: 5px; }

/* ── Verified badge ────────────────────────────────────────────── */
.ofr-detail-page .org-verified-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: .62rem; font-weight: 700; padding: 4px 9px;
  border-radius: 5px; text-transform: uppercase; letter-spacing: .04em;
  background: #ecfdf5; color: var(--em); border: 1px solid #a7f3d0;
  margin-left: 4px; vertical-align: middle;
}

/* ══════════════════════════════════════════════════════════════════
   RESPONSIVE — Offer Detail
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 1100px) {
  .ofr-detail-page .offer-detail__layout { grid-template-columns: 1fr 290px; gap: 20px; }
}
@media (max-width: 860px) {
  .ofr-detail-page .offer-detail__layout { grid-template-columns: 1fr; gap: 0; }
  .ofr-detail-page .offer-detail__sidebar {
    position: static; order: -1; margin-bottom: 20px;
    display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
  }
  .ofr-detail-page .offer-price-card { grid-column: 1/-1; }
  .ofr-detail-page .offer-cta-btn { grid-column: 1/-1; }
  .ofr-detail-page .offer-gallery__main { height: 300px; }
  .ofr-detail-page .offer-title { font-size: 1.35rem; }
  .ofr-detail-page .offer-section { padding: 20px; }
  .ofr-detail-page .offer-title-block { padding: 20px; }
  .ofr-detail-page .offer-facts-grid { grid-template-columns: repeat(3,1fr); }
  .ofr-detail-page .offer-org-full__rekvizity { grid-template-columns: repeat(2,1fr); }
  .similar-offers__grid { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 600px) {
  .ofr-detail-page .offer-detail__sidebar { grid-template-columns: 1fr; }
  .ofr-detail-page .offer-gallery__main { height: 240px; border-radius: 12px; }
  .ofr-detail-page .offer-gallery__placeholder { height: 200px; border-radius: 12px; font-size: 3.5rem; }
  .ofr-detail-page .offer-gallery__thumb { width: 56px; height: 42px; border-radius: 8px; }
  .ofr-detail-page .offer-title { font-size: 1.2rem; letter-spacing: -.2px; }
  .ofr-detail-page .offer-title-block { padding: 16px 14px; border-radius: 12px; }
  .ofr-detail-page .offer-title-block__meta { gap: 5px; }
  .ofr-detail-page .offer-type-badge, .ofr-detail-page .offer-meta-pill { font-size: .6rem; padding: 4px 8px; }
  .ofr-detail-page .offer-tabs { margin-top: 14px; border-radius: 12px 12px 0 0; padding: 0 2px; }
  .ofr-detail-page .offer-tab { padding: 10px 10px; font-size: .68rem; }
  .ofr-detail-page .offer-tab i { display: none; }
  .ofr-detail-page .offer-section { padding: 18px 14px; border-radius: 0 0 12px 12px; }
  .ofr-detail-page .offer-section:not(:first-of-type) { border-radius: 12px; }
  .ofr-detail-page .offer-section__title { font-size: .95rem; gap: 8px; }
  .ofr-detail-page .offer-section__title i { width: 28px; height: 28px; font-size: .75rem; }
  .ofr-detail-page .offer-facts-grid { grid-template-columns: 1fr; gap: 10px; }
  .ofr-detail-page .offer-details-cards { grid-template-columns: 1fr; }
  .ofr-detail-page .offer-org-full__header { flex-direction: column; gap: 12px; }
  .ofr-detail-page .offer-org-full__rekvizity { grid-template-columns: 1fr 1fr; }
  .ofr-detail-page .offer-sidebar-card { border-radius: 12px; padding: 16px; }
  .ofr-detail-page .offer-price-card { border-radius: 12px; padding: 20px; }
  .ofr-detail-page .offer-price-card__price { font-size: 1.5rem; }
  .ofr-detail-page .offer-qf { padding: 10px 12px; border-radius: 10px; gap: 10px; }
  .ofr-detail-page .offer-qf > i { width: 30px; height: 30px; font-size: .72rem; }
  .ofr-detail-page .offer-short-desc { font-size: .82rem; padding: 10px 12px !important; border-radius: 10px !important; }
  .ofr-detail-page .offer-contact-btn { padding: 10px 14px; border-radius: 12px; gap: 10px; }
  .ofr-detail-page .offer-attr-row__label { width: 120px; font-size: .75rem; }
  .similar-offers__grid { grid-template-columns: 1fr; }
  .similar-offer-card { border-radius: 12px; }
}
@media (max-width: 380px) {
  .ofr-detail-page .offer-title { font-size: 1.05rem; }
  .ofr-detail-page .offer-tab { padding: 8px 8px; font-size: .65rem; }
  .ofr-detail-page .offer-section { padding: 14px 12px; }
  .ofr-detail-page .offer-sidebar-card { padding: 14px 12px; }
  .ofr-detail-page .offer-org-full__rekvizity { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════════════
   TENDER DETAIL PAGE — Portal 3.0 Full Redesign
   Все селекторы .tnd-detail-page — самодостаточный блок
   ══════════════════════════════════════════════════════════════════ */

.tnd-detail-page { padding: 0 0 64px; background: var(--page); }
.tnd-detail-page > .container { max-width: 1260px; }

/* ── Grid ──────────────────────────────────────────────────────── */
.tnd-detail-page .offer-detail__layout { display: grid; grid-template-columns: 1fr 330px; gap: 24px; align-items: start; padding-top: 24px; }
.tnd-detail-page .offer-detail__main { min-width: 0; }

/* ── Title block ───────────────────────────────────────────────── */
.tnd-detail-page .offer-title-block {
  background: var(--card); border: 1.5px solid var(--border); border-radius: 16px;
  padding: 26px 28px 24px; margin-bottom: 0;
  box-shadow: 0 2px 12px rgba(15,22,36,.04);
  position: relative; overflow: hidden;
}
.tnd-detail-page .offer-title-block::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--ind), var(--sky), var(--teal));
  border-radius: 16px 16px 0 0;
}
.tnd-detail-page .offer-title-block__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-bottom: 14px; }
.tnd-detail-page .offer-title { font-size: 1.5rem; font-weight: 900; color: var(--txt); margin: 0; line-height: 1.3; letter-spacing: -.4px; }
.tnd-detail-page .tender-title-row { display: flex; align-items: center; gap: 16px; margin: 8px 0 14px; }
.tnd-detail-page .tender-title-logo {
  width: 72px; height: 72px; object-fit: contain; border-radius: 14px;
  border: 1.5px solid var(--border); background: var(--card);
  flex-shrink: 0; padding: 4px; box-shadow: 0 2px 8px rgba(0,0,0,.05);
}

/* ── Badges ────────────────────────────────────────────────────── */
.tnd-detail-page .offer-type-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: .64rem; font-weight: 700; padding: 5px 10px;
  border-radius: 6px; text-transform: uppercase; letter-spacing: .04em;
  line-height: 1; white-space: nowrap;
}
.tnd-detail-page .tender-badge--gov   { background: #eef2ff; color: var(--vio); border: 1px solid rgba(124,58,237,.2); }
.tnd-detail-page .tender-badge--com   { background: var(--status-warning-light); color: var(--am); border: 1px solid #fde68a; }
.tnd-detail-page .tender-badge--method{ background: var(--sky-ll); color: var(--sky-h); border: 1px solid var(--sky-l); }
.tnd-detail-page .tender-badge--smp   { background: #ecfdf5; color: var(--em); border: 1px solid #a7f3d0; }
.tnd-detail-page .tender-badge--top   { background: var(--status-warning-light); color: var(--am); border: 1px solid #fde68a; }
.tnd-detail-page .tender-badge--num   { background: var(--page); color: var(--txt2); border: 1px solid var(--border); font-family: var(--font-mono); font-size: .6rem; }
.tnd-detail-page .tender-status-badge { display: inline-flex; align-items: center; gap: 5px; font-size: .64rem; font-weight: 700; padding: 5px 10px; border-radius: 6px; text-transform: uppercase; letter-spacing: .04em; }
.tnd-detail-page .offer-meta-pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 10px; border-radius: 6px; font-size: .64rem;
  font-weight: 700; line-height: 1; text-transform: uppercase;
  letter-spacing: .04em; border: 1px solid transparent; white-space: nowrap;
}
.tnd-detail-page .offer-meta-pill--cat { background: var(--sky-ll); color: var(--sky-h); border-color: var(--sky-l); }
.tnd-detail-page .offer-meta-pill--views { background: var(--sky-ll); color: var(--vio); border-color: rgba(124,58,237,.2); }
.tnd-detail-page .offer-meta-pill--date { background: var(--status-warning-light); color: var(--am); border-color: #fde68a; }
.tnd-detail-page .offer-meta-pill--created { background: var(--page); color: var(--txt2); border-color: var(--border); }

/* ── Tabs ──────────────────────────────────────────────────────── */
.tnd-detail-page .offer-tabs {
  display: flex; gap: 0; flex-wrap: nowrap; overflow-x: auto;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
  background: var(--card); border: 1.5px solid var(--border);
  border-bottom: 2.5px solid var(--border);
  border-radius: 16px 16px 0 0; margin-top: 18px; margin-bottom: 0; padding: 0 6px;
}
.tnd-detail-page .offer-tabs::-webkit-scrollbar { display: none; }
.tnd-detail-page .offer-tab {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 11px 12px; font-size: .72rem; font-weight: 700;
  color: var(--txt2); text-decoration: none;
  border-bottom: 2.5px solid transparent; margin-bottom: -2.5px;
  transition: all .15s; white-space: nowrap;
}
.tnd-detail-page .offer-tab i { font-size: .62rem; opacity: .65; }
.tnd-detail-page .offer-tab:hover { color: var(--sky-h); background: var(--sky-ll); }
.tnd-detail-page .offer-tab.active { color: var(--sky-h); background: rgba(2,132,199,.06); border-bottom-color: var(--sky); }
.tnd-detail-page .offer-tab.active i { opacity: 1; }
.tnd-detail-page .rq-tab-count { display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; padding: 0 4px; background: var(--sky); color: #fff; font-size: .55rem; font-weight: 800; border-radius: 8px; }

/* ── Sections ──────────────────────────────────────────────────── */
.tnd-detail-page .offer-section {
  background: var(--card); border: 1.5px solid var(--border);
  border-radius: 0 0 16px 16px; padding: 28px;
  margin-bottom: 18px; box-shadow: 0 2px 10px rgba(15,22,36,.035);
  scroll-margin-top: calc(var(--nb-h-px) + 60px); border-top: none;
}
.tnd-detail-page .offer-section:not(:first-of-type) { border-radius: 16px; border-top: 1.5px solid var(--border); }
.tnd-detail-page .offer-section__title {
  font-size: 1.05rem; font-weight: 900; color: var(--txt);
  margin: 0 0 20px; display: flex; align-items: center; gap: 10px;
  padding-bottom: 14px; border-bottom: 2px solid var(--page);
}
.tnd-detail-page .offer-section__title i {
  width: 34px; height: 34px; display: flex; align-items: center; justify-content: center;
  border-radius: 9px; background: linear-gradient(135deg, var(--sky-ll), var(--sky-l));
  color: var(--sky-h); font-size: .85rem; flex-shrink: 0;
}
.tnd-detail-page .offer-section__subtitle {
  font-size: .72rem; font-weight: 800; color: var(--txt2);
  text-transform: uppercase; letter-spacing: .07em;
  display: flex; align-items: center; gap: 7px; margin-bottom: 10px;
}
.tnd-detail-page .offer-section__subtitle i { color: var(--sky); }

/* ── Short desc & body ─────────────────────────────────────────── */
.tnd-detail-page .offer-short-desc {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: .9rem; color: var(--txt2); line-height: 1.65;
  padding: 12px 16px !important; border: 1.5px solid var(--border) !important;
  border-radius: 12px !important; background: var(--page) !important;
}
.tnd-detail-page .offer-short-desc__icon { color: var(--sky); font-size: .85rem; flex-shrink: 0; margin-top: 3px; }
.tnd-detail-page .tender-body-text { font-size: .9375rem; line-height: 1.75; color: var(--txt2); }
.tnd-detail-page .tender-body-text strong { color: var(--txt); }
.tnd-detail-page .tender-body-text a { color: var(--sky-h); }

/* ── SME badge ─────────────────────────────────────────────────── */
.tnd-detail-page .tender-smp-badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: #ecfdf5; color: var(--em); border: 1.5px solid #a7f3d0;
  border-radius: 10px; padding: 10px 16px; font-size: .8125rem; font-weight: 700; margin-top: 16px;
}

/* ── Quick facts ───────────────────────────────────────────────── */
.tnd-detail-page .offer-qf {
  display: flex; align-items: flex-start; gap: 12px;
  background: var(--page); border: 1.5px solid transparent;
  border-radius: 12px; padding: 13px 14px; transition: border-color .15s;
}
.tnd-detail-page .offer-qf:hover { border-color: var(--sky-l); }
.tnd-detail-page .offer-qf > i {
  width: 34px; height: 34px; border-radius: 9px;
  background: linear-gradient(135deg, var(--sky-ll), var(--sky-l));
  color: var(--sky-h); display: flex; align-items: center;
  justify-content: center; flex-shrink: 0; font-size: .8rem;
}
.tnd-detail-page .offer-qf__l { font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--txt3); margin-bottom: 3px; }
.tnd-detail-page .offer-qf__v { font-size: .85rem; font-weight: 700; color: var(--txt); line-height: 1.35; }

/* ── Rekvizity (security) ──────────────────────────────────────── */
.tnd-detail-page .offer-org-full__rekvizity { display: grid; gap: 10px; background: var(--page); border-radius: 14px; padding: 14px; }
.tnd-detail-page .offer-org-rekvizit { display: flex; flex-direction: column; gap: 3px; }
.tnd-detail-page .offer-org-rekvizit__label { font-size: .6rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--txt3); }
.tnd-detail-page .offer-org-rekvizit__val { font-size: .875rem; font-weight: 700; color: var(--txt); }

/* ── Files ──────────────────────────────────────────────────────── */
.tnd-detail-page .tender-files-list { display: flex; flex-direction: column; gap: 8px; }
.tnd-detail-page .tender-file-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--page); border: 1.5px solid transparent; border-radius: 12px; padding: 14px 16px;
  transition: border-color .15s;
}
.tnd-detail-page .tender-file-row:hover { border-color: var(--sky-l); background: var(--sky-ll); }
.tnd-detail-page .tender-file-row__info { display: flex; align-items: center; gap: 10px; min-width: 0; }
.tnd-detail-page .tender-file-row__icon { color: var(--rose); font-size: 1.25rem; flex-shrink: 0; }
.tnd-detail-page .tender-file-row__name { font-size: .875rem; font-weight: 600; color: var(--txt); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tnd-detail-page .tender-file-row__desc { font-size: .75rem; color: var(--txt2); margin-top: 2px; }
.tnd-detail-page .tender-file-row__btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; background: var(--sky); color: #fff;
  border-radius: 8px; font-size: .78rem; font-weight: 700;
  text-decoration: none; white-space: nowrap; flex-shrink: 0; transition: background .15s;
}
.tnd-detail-page .tender-file-row__btn:hover { background: var(--sky-h); }

/* ── Tags ──────────────────────────────────────────────────────── */
.tnd-detail-page .tender-tags-wrap { display: flex; flex-wrap: wrap; gap: 8px; }
.tnd-detail-page .tender-tag-pill {
  padding: 6px 14px; background: var(--sky-ll); color: var(--sky-h);
  border: 1.5px solid var(--sky-l); border-radius: 100px;
  font-size: .78rem; font-weight: 600; transition: background .12s;
}
.tnd-detail-page .tender-tag-pill:hover { background: var(--sky-l); }

/* ── Related cards ─────────────────────────────────────────────── */
.tnd-detail-page .org-request-card {
  display: block; background: var(--card); border: 1.5px solid var(--border);
  border-radius: 14px; padding: 16px 18px; text-decoration: none;
  transition: border-color .18s, box-shadow .18s, transform .18s; margin-bottom: 10px;
}
.tnd-detail-page .org-request-card:last-child { margin-bottom: 0; }
.tnd-detail-page .org-request-card:hover { border-color: var(--sky-l); box-shadow: 0 6px 22px rgba(2,132,199,.1); transform: translateY(-2px); }
.tnd-detail-page .org-request-card__top { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.tnd-detail-page .org-request-budget { font-size: .85rem; font-weight: 800; color: var(--sky-h); margin-left: auto; }
.tnd-detail-page .org-request-card__title { font-size: .925rem; font-weight: 700; color: var(--txt); line-height: 1.45; margin-bottom: 8px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tnd-detail-page .org-request-card__meta { display: flex; flex-wrap: wrap; gap: 14px; font-size: .75rem; color: var(--txt3); }
.tnd-detail-page .org-request-card__meta span { display: inline-flex; align-items: center; gap: 5px; }
.tnd-detail-page .org-request-card__meta i { color: var(--sky); font-size: .62rem; }

/* ══════════════════════════════════════════════════════════════════
   SIDEBAR — Tender Detail
   ══════════════════════════════════════════════════════════════════ */
.tnd-detail-page .offer-detail__sidebar { position: sticky; top: calc(var(--nb-h-px) + 16px); align-self: start; display: flex; flex-direction: column; gap: 0; }

/* Price card */
.tnd-detail-page .offer-sidebar-card--price {
  background: var(--card); border: 2px solid rgba(2,132,199,.15);
  border-radius: 16px; padding: 24px; box-shadow: 0 4px 20px rgba(2,132,199,.06);
  position: relative; overflow: hidden;
}
.tnd-detail-page .offer-sidebar-card--price::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--ind), var(--sky), var(--teal)); }
.tnd-detail-page .tender-sb-price-label { font-size: .65rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: var(--txt2); margin-bottom: 8px; }
.tnd-detail-page .tender-sb-price { font-size: 1.85rem; font-weight: 900; color: var(--sky-h); line-height: 1.15; margin-bottom: 14px; letter-spacing: -.5px; }
.tnd-detail-page .tender-sb-price__cur { font-size: .9rem; font-weight: 600; color: var(--txt2); margin-left: 4px; }
.tnd-detail-page .tender-sb-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 13px 16px; background: linear-gradient(135deg, var(--sky), var(--teal));
  color: #fff; border-radius: 12px; font-size: .875rem; font-weight: 700;
  text-decoration: none; transition: opacity .15s, transform .15s;
  margin-bottom: 10px; box-sizing: border-box;
}
.tnd-detail-page .tender-sb-btn:hover { opacity: .92; transform: translateY(-1px); }
.tnd-detail-page .tender-sb-platform { text-align: center; font-size: .75rem; color: var(--txt2); display: flex; align-items: center; justify-content: center; gap: 5px; margin-top: 4px; }
.tnd-detail-page .tender-sb-platform-link { color: var(--sky-h); text-decoration: none; font-size: .775rem; font-weight: 600; display: inline-flex; align-items: center; gap: 5px; }
.tnd-detail-page .tender-sb-platform-link:hover { text-decoration: underline; }

/* Sidebar cards */
.tnd-detail-page .offer-sidebar-card {
  background: var(--card); border: 1.5px solid var(--border);
  border-radius: 16px; padding: 20px 22px; box-shadow: 0 2px 10px rgba(15,22,36,.035);
}
.tnd-detail-page .offer-sidebar-card--mt { margin-top: 14px; }
.tnd-detail-page .offer-sidebar-card__title {
  font-size: .7rem; font-weight: 800; color: var(--txt);
  margin: 0 0 14px; text-transform: uppercase; letter-spacing: .08em;
  display: flex; align-items: center; gap: 8px;
  padding-bottom: 10px; border-bottom: 1.5px solid var(--page);
}
.tnd-detail-page .offer-sidebar-card__title i { color: var(--sky); font-size: .8rem; }

/* Timeline */
.tnd-detail-page .tender-timeline { display: flex; flex-direction: column; }
.tnd-detail-page .tender-tl-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 9px 0; border-bottom: 1px dashed var(--page); }
.tnd-detail-page .tender-tl-row:last-child { border-bottom: none; }
.tnd-detail-page .tender-tl-row--hi { background: var(--status-warning-light); border-radius: 8px; margin: 4px -8px; padding: 9px 10px; border-bottom: none; }
.tnd-detail-page .tender-tl-row__k { font-size: .65rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--txt3); flex-shrink: 0; }
.tnd-detail-page .tender-tl-row__v { font-size: .825rem; font-weight: 800; color: var(--txt); text-align: right; }
.tnd-detail-page .tender-days {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .8rem; font-weight: 700; padding: 8px 12px;
  border-radius: 8px; margin: 6px 0 2px; width: 100%; box-sizing: border-box;
}
.tnd-detail-page .tender-days--ok   { background: #ecfdf5; color: var(--em); }
.tnd-detail-page .tender-days--warn { background: var(--status-warning-light); color: var(--am); }
.tnd-detail-page .tender-days--exp  { background: #fef2f2; color: var(--rose); }

/* Contact person */
.tnd-detail-page .rq-org-contact-btn {
  display: flex; align-items: center; gap: 7px;
  padding: 9px 14px; background: var(--page); border: 1.5px solid var(--border);
  border-radius: 10px; color: var(--sky-h); font-size: .8rem; font-weight: 600;
  text-decoration: none; transition: all .15s;
}
.tnd-detail-page .rq-org-contact-btn:hover { background: var(--sky-ll); border-color: var(--sky-l); }
.tnd-detail-page .rq-org-contact-btn i { color: var(--sky); font-size: .75rem; flex-shrink: 0; }

/* Category pills */
.tnd-detail-page .tender-cat-pill {
  display: flex; align-items: center; gap: 8px;
  font-size: .8rem; color: var(--txt2); padding: 7px 0;
  border-bottom: 1px solid var(--page); font-weight: 500;
}
.tnd-detail-page .tender-cat-pill:last-child { border-bottom: none; }
.tnd-detail-page .tender-cat-pill i { color: var(--sky); font-size: .55rem; }

/* Organizer */
.tnd-detail-page .offer-org-full { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; }
.tnd-detail-page .offer-org-full__logo { width: 48px; height: 48px; object-fit: contain; border-radius: 10px; border: 1.5px solid var(--border); margin-bottom: 6px; }
.tnd-detail-page .offer-org-full__name { font-size: .9rem; font-weight: 800; color: var(--txt); line-height: 1.35; }
.tnd-detail-page .offer-org-full__name a { color: var(--txt); text-decoration: none; }
.tnd-detail-page .offer-org-full__name a:hover { color: var(--sky-h); }
.tnd-detail-page .offer-org-full__city { font-size: .775rem; color: var(--txt2); margin-top: 2px; }

/* ══════════════════════════════════════════════════════════════════
   RESPONSIVE — Tender Detail
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 1100px) {
  .tnd-detail-page .offer-detail__layout { grid-template-columns: 1fr 290px; gap: 20px; }
}
@media (max-width: 860px) {
  .tnd-detail-page .offer-detail__layout { grid-template-columns: 1fr; gap: 0; }
  .tnd-detail-page .offer-detail__sidebar {
    position: static; order: -1; margin-bottom: 20px;
    display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
  }
  .tnd-detail-page .offer-sidebar-card--price { grid-column: 1/-1; }
  .tnd-detail-page .offer-sidebar-card--mt { margin-top: 0; }
  .tnd-detail-page .tender-sb-btn { grid-column: 1/-1; margin-top: 0; }
  .tnd-detail-page .offer-title { font-size: 1.3rem; }
  .tnd-detail-page .tender-title-logo { width: 56px; height: 56px; }
  .tnd-detail-page .offer-section { padding: 20px; }
  .tnd-detail-page .offer-title-block { padding: 20px; }
}
@media (max-width: 600px) {
  .tnd-detail-page .offer-detail__sidebar { grid-template-columns: 1fr; }
  .tnd-detail-page .offer-title { font-size: 1.15rem; letter-spacing: -.2px; }
  .tnd-detail-page .offer-title-block { padding: 16px 14px; border-radius: 12px; }
  .tnd-detail-page .offer-title-block__meta { gap: 5px; }
  .tnd-detail-page .offer-type-badge, .tnd-detail-page .offer-meta-pill, .tnd-detail-page .tender-status-badge { font-size: .58rem; padding: 4px 8px; }
  .tnd-detail-page .tender-title-row { gap: 10px; margin: 6px 0 10px; }
  .tnd-detail-page .tender-title-logo { width: 44px; height: 44px; border-radius: 10px; }
  .tnd-detail-page .offer-tabs { margin-top: 14px; border-radius: 12px 12px 0 0; padding: 0 2px; }
  .tnd-detail-page .offer-tab { padding: 10px 10px; font-size: .68rem; }
  .tnd-detail-page .offer-tab i { display: none; }
  .tnd-detail-page .offer-section { padding: 18px 14px; border-radius: 0 0 12px 12px; }
  .tnd-detail-page .offer-section:not(:first-of-type) { border-radius: 12px; }
  .tnd-detail-page .offer-section__title { font-size: .95rem; gap: 8px; }
  .tnd-detail-page .offer-section__title i { width: 28px; height: 28px; font-size: .75rem; }
  .tnd-detail-page .offer-sidebar-card { border-radius: 12px; padding: 16px; }
  .tnd-detail-page .offer-sidebar-card--price { border-radius: 12px; padding: 20px; }
  .tnd-detail-page .tender-sb-price { font-size: 1.5rem; }
  .tnd-detail-page .offer-qf { padding: 10px 12px; border-radius: 10px; gap: 10px; }
  .tnd-detail-page .offer-qf > i { width: 30px; height: 30px; font-size: .72rem; }
  .tnd-detail-page .tender-file-row { padding: 12px 14px; border-radius: 10px; }
  .tnd-detail-page .org-request-card { padding: 14px; border-radius: 12px; }
  .tnd-detail-page .offer-short-desc { font-size: .82rem; padding: 10px 12px !important; border-radius: 10px !important; }
}
@media (max-width: 380px) {
  .tnd-detail-page .offer-title { font-size: 1.05rem; }
  .tnd-detail-page .offer-tab { padding: 8px 8px; font-size: .65rem; }
  .tnd-detail-page .offer-section { padding: 14px 12px; }
  .tnd-detail-page .offer-sidebar-card { padding: 14px 12px; }
}

/* ══════════════════════════════════════════════════════════════════
   VACANCY DETAIL PAGE — Portal 3.0
   ══════════════════════════════════════════════════════════════════ */
.vac-detail-page { padding: 0 0 64px; background: var(--page); }
.vac-detail-page > .container { max-width: 1260px; }
.vac-detail-page .offer-detail__layout { display: grid; grid-template-columns: 1fr 330px; gap: 24px; align-items: start; padding-top: 24px; }
.vac-detail-page .offer-detail__main { min-width: 0; }

/* Title block */
.vac-detail-page .offer-title-block { background: var(--card); border: 1.5px solid var(--border); border-radius: 16px; padding: 26px 28px 24px; margin-bottom: 0; box-shadow: 0 2px 12px rgba(15,22,36,.04); position: relative; overflow: hidden; }
.vac-detail-page .offer-title-block::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--vio), var(--sky), var(--em)); border-radius: 16px 16px 0 0; }
.vac-detail-page .offer-title-block__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-bottom: 14px; }
.vac-detail-page .offer-title { font-size: 1.5rem; font-weight: 900; color: var(--txt); margin: 0; line-height: 1.3; letter-spacing: -.4px; }

/* Hero layout: logo + title */
.vac-detail-page .vac-hero-layout { display: flex; gap: 20px; align-items: flex-start; }
.vac-detail-page .vac-hero-logo__img { width: 72px; height: 72px; object-fit: contain; border-radius: 16px; border: 1.5px solid var(--border); background: var(--card); flex-shrink: 0; box-shadow: 0 2px 8px rgba(0,0,0,.05); }
.vac-detail-page .vac-hero-logo__avatar { width: 72px; height: 72px; border-radius: 16px; background: linear-gradient(135deg, var(--vio), var(--sky)); color: #fff; font-size: 1.3rem; font-weight: 900; display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 4px 14px rgba(124,58,237,.2); }
.vac-detail-page .vac-hero-content { min-width: 0; flex: 1; }

/* Badges */
.vac-detail-page .offer-type-badge { display: inline-flex; align-items: center; gap: 5px; font-size: .64rem; font-weight: 700; padding: 5px 10px; border-radius: 6px; text-transform: uppercase; letter-spacing: .04em; line-height: 1; white-space: nowrap; }
.vac-detail-page .offer-meta-pill { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 6px; font-size: .64rem; font-weight: 700; line-height: 1; text-transform: uppercase; letter-spacing: .04em; border: 1px solid transparent; white-space: nowrap; text-decoration: none; }
.vac-detail-page .offer-meta-pill--demo { background: rgba(239,68,68,.12); color: #dc2626; border-color: rgba(239,68,68,.3); }
.vac-detail-page .offer-meta-pill--gov { background: #eef2ff; color: var(--vio); border-color: rgba(124,58,237,.2); }
.vac-detail-page .offer-meta-pill--private { background: var(--sky-ll); color: var(--sky-h); border-color: var(--sky-l); }
.vac-detail-page .offer-meta-pill--company { background: var(--sky-ll); color: var(--sky-h); border-color: var(--sky-l); }
.vac-detail-page .offer-meta-pill--city { background: #ecfdf5; color: var(--em); border-color: #a7f3d0; }
.vac-detail-page .offer-meta-pill--views { background: var(--sky-ll); color: var(--vio); border-color: rgba(124,58,237,.2); }
.vac-detail-page .offer-meta-pill--date { background: var(--status-warning-light); color: var(--am); border-color: #fde68a; }

/* Short desc (salary) */
.vac-detail-page .offer-short-desc { display: flex; align-items: center; gap: 8px; font-size: 1.1rem; font-weight: 800; color: var(--sky-h); line-height: 1.4; margin-top: 10px; padding: 10px 16px !important; border: 1.5px solid rgba(2,132,199,.15) !important; border-radius: 10px !important; background: var(--sky-ll) !important; }
.vac-detail-page .offer-short-desc__icon { color: var(--sky); font-size: .9rem; flex-shrink: 0; }

/* Tabs */
.vac-detail-page .offer-tabs { display: flex; gap: 0; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; background: var(--card); border: 1.5px solid var(--border); border-bottom: 2.5px solid var(--border); border-radius: 16px 16px 0 0; margin-top: 18px; margin-bottom: 0; padding: 0 6px; }
.vac-detail-page .offer-tabs::-webkit-scrollbar { display: none; }
.vac-detail-page .offer-tab { display: inline-flex; align-items: center; gap: 4px; padding: 11px 12px; font-size: .72rem; font-weight: 700; color: var(--txt2); text-decoration: none; border-bottom: 2.5px solid transparent; margin-bottom: -2.5px; transition: all .15s; white-space: nowrap; }
.vac-detail-page .offer-tab i { font-size: .62rem; opacity: .65; }
.vac-detail-page .offer-tab:hover { color: var(--sky-h); background: var(--sky-ll); }
.vac-detail-page .offer-tab.active { color: var(--sky-h); background: rgba(2,132,199,.06); border-bottom-color: var(--sky); }
.vac-detail-page .offer-tab.active i { opacity: 1; }

/* Sections */
.vac-detail-page .offer-section { background: var(--card); border: 1.5px solid var(--border); border-radius: 0 0 16px 16px; padding: 28px; margin-bottom: 18px; box-shadow: 0 2px 10px rgba(15,22,36,.035); scroll-margin-top: calc(var(--nb-h-px) + 60px); border-top: none; }
.vac-detail-page .offer-section:not(:first-of-type) { border-radius: 16px; border-top: 1.5px solid var(--border); }
.vac-detail-page .offer-section__title { font-size: 1.05rem; font-weight: 900; color: var(--txt); margin: 0 0 20px; display: flex; align-items: center; gap: 10px; padding-bottom: 14px; border-bottom: 2px solid var(--page); }
.vac-detail-page .offer-section__title i { width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; border-radius: 9px; background: linear-gradient(135deg, var(--sky-ll), var(--sky-l)); color: var(--sky-h); font-size: .85rem; flex-shrink: 0; }
.vac-detail-page .offer-desc__content { font-size: .9375rem; color: var(--txt2); line-height: 1.8; white-space: pre-line; }

/* Facts grid */
.vac-detail-page .offer-facts-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; }
.vac-detail-page .offer-fact { text-align: center; padding: 18px 14px; background: var(--page); border-radius: 14px; border: 1.5px solid transparent; transition: border-color .15s; }
.vac-detail-page .offer-fact:hover { border-color: var(--sky-l); }
.vac-detail-page .offer-fact__icon { font-size: 1.4rem; color: var(--sky); margin-bottom: 8px; }
.vac-detail-page .offer-fact__label { font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--txt3); margin-bottom: 5px; }
.vac-detail-page .offer-fact__val { font-size: .875rem; font-weight: 800; color: var(--txt); line-height: 1.35; }
.vac-detail-page .text-red { color: var(--rose) !important; }

/* Skills & benefits */
.vac-detail-page .vd-skills { display: flex; flex-wrap: wrap; gap: 8px; }
.vac-detail-page .vd-skill { padding: 6px 14px; background: var(--sky-ll); color: var(--sky-h); border: 1.5px solid var(--sky-l); border-radius: 100px; font-size: .8rem; font-weight: 600; }
.vac-detail-page .vd-benefits { display: grid; grid-template-columns: repeat(2,1fr); gap: 10px; }
.vac-detail-page .vd-benefit { display: flex; align-items: center; gap: 10px; padding: 14px 16px; background: #ecfdf5; border: 1.5px solid #a7f3d0; border-radius: 12px; font-size: .875rem; font-weight: 700; color: var(--em); }
.vac-detail-page .vd-benefit i { font-size: 1rem; }

/* Attr rows (languages) */
.vac-detail-page .offer-attr-row { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-bottom: 1px solid var(--page); border-radius: 8px; transition: background .1s; }
.vac-detail-page .offer-attr-row:hover { background: var(--page); }
.vac-detail-page .offer-attr-row:last-child { border-bottom: none; }
.vac-detail-page .offer-attr-row__icon { color: var(--sky); width: 18px; text-align: center; flex-shrink: 0; }
.vac-detail-page .offer-attr-row__label { font-size: .825rem; color: var(--txt3); font-weight: 600; width: 140px; flex-shrink: 0; }
.vac-detail-page .offer-attr-row__val { font-size: .875rem; color: var(--txt); font-weight: 500; flex: 1; }

/* ── Sidebar ── */
.vac-detail-page .offer-detail__sidebar { position: sticky; top: calc(var(--nb-h-px) + 16px); align-self: start; display: flex; flex-direction: column; gap: 0; }
.vac-detail-page .offer-price-card { background: var(--card); border: 2px solid rgba(2,132,199,.15); border-radius: 16px; padding: 24px; box-shadow: 0 4px 20px rgba(2,132,199,.06); position: relative; overflow: hidden; text-align: center; }
.vac-detail-page .offer-price-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--vio), var(--sky)); }
.vac-detail-page .offer-price-card__label { font-size: .65rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: var(--txt3); margin-bottom: 8px; }
.vac-detail-page .offer-price-card__price { font-size: 1.6rem; font-weight: 900; color: var(--sky-h); line-height: 1.2; margin-bottom: 6px; letter-spacing: -.4px; }
.vac-detail-page .offer-price-card__unit { font-size: .8rem; color: var(--txt3); margin-bottom: 10px; }
.vac-detail-page .offer-price-card__payterms { font-size: .78rem; color: var(--txt3); line-height: 1.5; display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 6px; }
.vac-detail-page .offer-cta-btn { margin-top: 14px; display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; box-sizing: border-box; padding: 13px 16px; font-size: .875rem; font-weight: 700; border-radius: 12px; text-decoration: none; transition: opacity .15s, transform .15s; }
.vac-detail-page .offer-cta-btn:hover { opacity: .92; transform: translateY(-1px); }

/* Contact buttons */
.vac-detail-page .offer-sidebar-card--contacts { margin-top: 14px; }
.vac-detail-page .offer-contact-btn { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-radius: 14px; text-decoration: none; transition: all .15s; border: 1.5px solid var(--page); margin-bottom: 8px; }
.vac-detail-page .offer-contact-btn:last-child { margin-bottom: 0; }
.vac-detail-page .offer-contact-btn--phone { background: #ecfdf5; border-color: #a7f3d0; }
.vac-detail-page .offer-contact-btn--phone:hover { border-color: var(--em); }
.vac-detail-page .offer-contact-btn--phone > i { color: var(--em); font-size: 1rem; }
.vac-detail-page .offer-contact-btn--email { background: var(--sky-ll); border-color: var(--sky-l); }
.vac-detail-page .offer-contact-btn--email:hover { border-color: var(--sky); }
.vac-detail-page .offer-contact-btn--email > i { color: var(--sky); font-size: 1rem; }
.vac-detail-page .offer-contact-btn__label { font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--txt3); display: block; }
.vac-detail-page .offer-contact-btn__val { font-size: .85rem; font-weight: 700; color: var(--txt); display: block; }
.vac-detail-page .offer-contact-name { font-size: .825rem; color: var(--txt2); display: flex; align-items: center; gap: 6px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--page); }
.vac-detail-page .offer-contact-name i { color: var(--sky); }

/* Sidebar cards */
.vac-detail-page .offer-sidebar-card { background: var(--card); border: 1.5px solid var(--border); border-radius: 16px; padding: 20px 22px; box-shadow: 0 2px 10px rgba(15,22,36,.035); }
.vac-detail-page .offer-sidebar-card--mt { margin-top: 14px; }
.vac-detail-page .offer-sidebar-card__title { font-size: .7rem; font-weight: 800; color: var(--txt); margin: 0 0 14px; text-transform: uppercase; letter-spacing: .08em; display: flex; align-items: center; gap: 8px; padding-bottom: 10px; border-bottom: 1.5px solid var(--page); }
.vac-detail-page .offer-sidebar-card__title i { color: var(--sky); font-size: .8rem; }

/* Quick facts */
.vac-detail-page .offer-quickfacts { display: flex; flex-direction: column; gap: 10px; }
.vac-detail-page .offer-qf { display: flex; align-items: flex-start; gap: 12px; background: var(--page); border: 1.5px solid transparent; border-radius: 12px; padding: 13px 14px; transition: border-color .15s; }
.vac-detail-page .offer-qf:hover { border-color: var(--sky-l); }
.vac-detail-page .offer-qf > i { width: 34px; height: 34px; border-radius: 9px; background: linear-gradient(135deg, var(--sky-ll), var(--sky-l)); color: var(--sky-h); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: .8rem; }
.vac-detail-page .offer-qf__l { font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--txt3); margin-bottom: 3px; }
.vac-detail-page .offer-qf__v { font-size: .85rem; font-weight: 700; color: var(--txt); line-height: 1.35; }

/* Company mini */
.vac-detail-page .offer-company-mini { display: flex; gap: 14px; align-items: flex-start; }
.vac-detail-page .offer-company-mini__logo { width: 50px; height: 50px; border-radius: 14px; object-fit: contain; border: 1.5px solid var(--border); flex-shrink: 0; }
.vac-detail-page .offer-company-mini__avatar { width: 50px; height: 50px; border-radius: 14px; background: linear-gradient(135deg, var(--vio), var(--sky)); color: #fff; font-size: 1.1rem; font-weight: 900; display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 3px 10px rgba(124,58,237,.2); }
.vac-detail-page .offer-company-mini__name { font-size: .875rem; font-weight: 800; color: var(--txt); text-decoration: none; display: block; margin-bottom: 4px; line-height: 1.35; }
.vac-detail-page .offer-company-mini__name:hover { color: var(--sky-h); }
.vac-detail-page .offer-company-mini__verified { font-size: .68rem; font-weight: 700; color: var(--em); display: flex; align-items: center; gap: 4px; margin-bottom: 3px; }
.vac-detail-page .offer-company-mini__unverified { font-size: .68rem; font-weight: 700; color: var(--am); display: flex; align-items: center; gap: 4px; margin-bottom: 3px; }
.vac-detail-page .offer-company-mini__city,.vac-detail-page .offer-company-mini__inn { font-size: .72rem; color: var(--txt3); display: flex; align-items: center; gap: 5px; margin-top: 2px; }
.vac-detail-page .offer-sidebar-btn-mt { margin-top: 14px; display: flex; align-items: center; justify-content: center; gap: 8px; font-size: .8rem; font-weight: 700; border-radius: 12px; text-decoration: none; }

/* Responsive */
@media(max-width:1100px){ .vac-detail-page .offer-detail__layout { grid-template-columns: 1fr 290px; gap: 20px; } }
@media(max-width:860px){
  .vac-detail-page .offer-detail__layout { grid-template-columns: 1fr; gap: 0; }
  .vac-detail-page .offer-detail__sidebar { position: static; order: -1; margin-bottom: 20px; }
  .vac-detail-page .offer-price-card { grid-column: 1/-1; }
  .vac-detail-page .offer-title { font-size: 1.3rem; }
  .vac-detail-page .offer-section { padding: 20px; }
  .vac-detail-page .offer-title-block { padding: 20px; }
  .vac-detail-page .offer-facts-grid { grid-template-columns: repeat(2,1fr); }
  .vac-detail-page .vd-benefits { grid-template-columns: 1fr; }
}
@media(max-width:600px){
  .vac-detail-page .offer-title { font-size: 1.15rem; }
  .vac-detail-page .offer-title-block { padding: 16px 14px; border-radius: 12px; }
  .vac-detail-page .vac-hero-layout { flex-direction: column; gap: 12px; }
  .vac-detail-page .vac-hero-logo__img,.vac-detail-page .vac-hero-logo__avatar { width: 56px; height: 56px; }
  .vac-detail-page .offer-tabs { margin-top: 14px; border-radius: 12px 12px 0 0; padding: 0 2px; }
  .vac-detail-page .offer-tab { padding: 10px 10px; font-size: .68rem; }
  .vac-detail-page .offer-tab i { display: none; }
  .vac-detail-page .offer-section { padding: 18px 14px; border-radius: 0 0 12px 12px; }
  .vac-detail-page .offer-section:not(:first-of-type) { border-radius: 12px; }
  .vac-detail-page .offer-section__title { font-size: .95rem; gap: 8px; }
  .vac-detail-page .offer-section__title i { width: 28px; height: 28px; font-size: .75rem; }
  .vac-detail-page .offer-facts-grid { grid-template-columns: 1fr; }
  .vac-detail-page .offer-sidebar-card { border-radius: 12px; padding: 16px; }
  .vac-detail-page .offer-price-card { border-radius: 12px; padding: 20px; }
  .vac-detail-page .offer-price-card__price { font-size: 1.3rem; }
  .vac-detail-page .offer-qf { padding: 10px 12px; border-radius: 10px; gap: 10px; }
  .vac-detail-page .offer-qf > i { width: 30px; height: 30px; font-size: .72rem; }
  .vac-detail-page .offer-short-desc { font-size: .95rem !important; padding: 8px 12px !important; }
}
@media(max-width:380px){
  .vac-detail-page .offer-title { font-size: 1.05rem; }
  .vac-detail-page .offer-section { padding: 14px 12px; }
  .vac-detail-page .offer-sidebar-card { padding: 14px 12px; }
}

/* ══════════════════════════════════════════════════════════════════
   NEWS DETAIL PAGE — Portal 3.0
   ══════════════════════════════════════════════════════════════════ */
.nws-detail-page { background: var(--page); padding: 0 0 64px; }
.nws-detail-page > .container { max-width: 1260px; }
.nws-detail-page .nd-layout { display: grid; grid-template-columns: 1fr 320px; gap: 28px; align-items: start; padding-top: 24px; }

/* Hero image */
.nws-detail-page .nd-hero-img { border-radius: 16px; overflow: hidden; border: 1.5px solid var(--border); margin-bottom: 24px; box-shadow: 0 4px 20px rgba(0,0,0,.06); }
.nws-detail-page .nd-hero-img img { width: 100%; height: auto; display: block; }

/* Header */
.nws-detail-page .nd-header { margin-bottom: 28px; }
.nws-detail-page .nd-category { font-size: .68rem; font-weight: 700; color: var(--sky-h); text-transform: uppercase; letter-spacing: .06em; display: inline-flex; align-items: center; gap: 6px; background: var(--sky-ll); border: 1px solid var(--sky-l); padding: 5px 12px; border-radius: 6px; margin-bottom: 14px; }
.nws-detail-page .nd-title { font-size: 1.65rem; font-weight: 900; color: var(--txt); line-height: 1.3; letter-spacing: -.5px; margin: 0 0 16px; }
.nws-detail-page .nd-meta { display: flex; flex-wrap: wrap; gap: 16px; font-size: .78rem; color: var(--txt3); margin-bottom: 16px; }
.nws-detail-page .nd-meta span { display: inline-flex; align-items: center; gap: 5px; }
.nws-detail-page .nd-meta i { color: var(--sky); font-size: .68rem; }
.nws-detail-page .nd-lead { font-size: 1.05rem; color: var(--txt2); line-height: 1.65; font-weight: 500; margin: 0; padding: 16px 20px; background: var(--page); border-left: 3px solid var(--sky); border-radius: 0 12px 12px 0; }

/* Content */
.nws-detail-page .nd-content { font-size: .9375rem; color: var(--txt2); line-height: 1.8; }
.nws-detail-page .nd-content h2,.nws-detail-page .nd-content h3 { color: var(--txt); font-weight: 800; margin: 24px 0 12px; }
.nws-detail-page .nd-content h3 { padding-left: 12px; border-left: 3px solid var(--sky); }
.nws-detail-page .nd-content p { margin: 14px 0; }
.nws-detail-page .nd-content strong { color: var(--txt); }
.nws-detail-page .nd-content a { color: var(--sky-h); text-decoration: underline; }
.nws-detail-page .nd-content ul { padding-left: 0; list-style: none; }
.nws-detail-page .nd-content ul li { padding: 4px 0 4px 22px; position: relative; }
.nws-detail-page .nd-content ul li::before { content: "✓"; position: absolute; left: 0; color: var(--sky); font-weight: 900; }
.nws-detail-page .nd-content img { max-width: 100%; border-radius: 12px; margin: 16px 0; }

/* Share */
.nws-detail-page .nd-share { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 32px; padding-top: 20px; border-top: 2px solid var(--page); }
.nws-detail-page .nd-share-label { font-size: .78rem; font-weight: 700; color: var(--txt3); display: flex; align-items: center; gap: 6px; }
.nws-detail-page .nd-share-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 8px; font-size: .78rem; font-weight: 600; text-decoration: none; border: none; cursor: pointer; transition: opacity .15s; }
.nws-detail-page .nd-share-vk { background: #4C75A3; color: #fff; }
.nws-detail-page .nd-share-tg { background: #2AABEE; color: #fff; }
.nws-detail-page .nd-share-copy { background: var(--page); color: var(--txt2); border: 1.5px solid var(--border); }
.nws-detail-page .nd-share-btn:hover { opacity: .85; }

/* Sidebar */
.nws-detail-page .nd-sidebar { position: sticky; top: calc(var(--nb-h-px) + 16px); display: flex; flex-direction: column; gap: 14px; }
.nws-detail-page .nd-back-btn { display: flex; align-items: center; gap: 8px; padding: 12px 16px; background: var(--card); border: 1.5px solid var(--border); border-radius: 12px; font-size: .8rem; font-weight: 700; color: var(--sky-h); text-decoration: none; transition: border-color .15s; }
.nws-detail-page .nd-back-btn:hover { border-color: var(--sky-l); background: var(--sky-ll); }
.nws-detail-page .nd-sb-card { background: var(--card); border: 1.5px solid var(--border); border-radius: 16px; padding: 20px; box-shadow: 0 2px 10px rgba(15,22,36,.035); }
.nws-detail-page .nd-sb-card-title { font-size: .7rem; font-weight: 800; color: var(--txt); text-transform: uppercase; letter-spacing: .08em; margin: 0 0 14px; padding-bottom: 10px; border-bottom: 1.5px solid var(--page); }
.nws-detail-page .nd-sb-info-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; font-size: .8rem; color: var(--txt2); border-bottom: 1px solid var(--page); }
.nws-detail-page .nd-sb-info-row:last-child { border-bottom: none; }
.nws-detail-page .nd-sb-info-row i { color: var(--sky); width: 16px; text-align: center; font-size: .72rem; }

/* Related items */
.nws-detail-page .nd-related-item { display: flex; gap: 12px; align-items: flex-start; text-decoration: none; padding: 10px 0; border-bottom: 1px solid var(--page); transition: background .1s; }
.nws-detail-page .nd-related-item:last-child { border-bottom: none; }
.nws-detail-page .nd-rel-img { width: 64px; height: 48px; object-fit: cover; border-radius: 8px; flex-shrink: 0; border: 1px solid var(--border); }
.nws-detail-page .nd-rel-placeholder { width: 64px; height: 48px; border-radius: 8px; background: var(--page); display: flex; align-items: center; justify-content: center; font-size: 1.2rem; color: var(--border); flex-shrink: 0; }
.nws-detail-page .nd-rel-title { font-size: .8rem; font-weight: 700; color: var(--txt); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 4px; }
.nws-detail-page .nd-related-item:hover .nd-rel-title { color: var(--sky-h); }
.nws-detail-page .nd-rel-date { font-size: .68rem; color: var(--txt3); display: flex; align-items: center; gap: 4px; }
.nws-detail-page .nd-rel-date i { font-size: .6rem; }

/* CTA card */
.nws-detail-page .nd-sb-cta { text-align: center; background: linear-gradient(135deg, var(--sky-ll), #ecfdf5); border: 1.5px solid var(--sky-l); }
.nws-detail-page .nd-sb-cta-icon { font-size: 2rem; color: var(--sky); margin-bottom: 10px; }
.nws-detail-page .nd-sb-cta-title { font-size: 1rem; font-weight: 900; color: var(--txt); margin-bottom: 8px; }
.nws-detail-page .nd-sb-cta p { font-size: .8rem; color: var(--txt2); line-height: 1.5; margin: 0 0 14px; }
.nws-detail-page .nd-sb-cta-btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; background: linear-gradient(135deg, var(--sky), var(--teal)); color: #fff; border-radius: 10px; font-size: .8rem; font-weight: 700; text-decoration: none; transition: opacity .15s; }
.nws-detail-page .nd-sb-cta-btn:hover { opacity: .9; }

/* Responsive */
@media(max-width:1000px){ .nws-detail-page .nd-layout { grid-template-columns: 1fr 280px; gap: 20px; } }
@media(max-width:768px){
  .nws-detail-page .nd-layout { grid-template-columns: 1fr; }
  .nws-detail-page .nd-sidebar { position: static; order: 1; }
  .nws-detail-page .nd-title { font-size: 1.35rem; }
  .nws-detail-page .nd-hero-img { border-radius: 12px; }
}
@media(max-width:480px){
  .nws-detail-page .nd-title { font-size: 1.15rem; }
  .nws-detail-page .nd-meta { gap: 10px; font-size: .72rem; }
  .nws-detail-page .nd-lead { font-size: .9rem; padding: 12px 14px; }
  .nws-detail-page .nd-sb-card { border-radius: 12px; padding: 16px; }
  .nws-detail-page .nd-share-btn { font-size: .72rem; padding: 6px 10px; }
}

/* ══════════════════════════════════════════════════════════════════
   PRESS-RELEASE DETAIL PAGE — Portal 3.0
   ══════════════════════════════════════════════════════════════════ */
.prs-detail-page { padding: 0 0 64px; background: var(--page); }
.prs-detail-page > .container { max-width: 1260px; }
.prs-detail-page .offer-detail__layout { display: grid; grid-template-columns: 1fr 330px; gap: 24px; align-items: start; padding-top: 24px; }
.prs-detail-page .offer-detail__main { min-width: 0; }

/* Title block */
.prs-detail-page .offer-title-block { background: var(--card); border: 1.5px solid var(--border); border-radius: 16px; padding: 26px 28px 24px; margin-bottom: 0; box-shadow: 0 2px 12px rgba(15,22,36,.04); position: relative; overflow: hidden; }
.prs-detail-page .offer-title-block::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--rose), var(--am), var(--sky)); border-radius: 16px 16px 0 0; }
.prs-detail-page .offer-title-block__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-bottom: 14px; }
.prs-detail-page .offer-title { font-size: 1.5rem; font-weight: 900; color: var(--txt); margin: 0; line-height: 1.3; letter-spacing: -.4px; }
.prs-detail-page .offer-short-desc { font-size: .9rem; color: var(--txt2); line-height: 1.65; margin-top: 12px; padding: 12px 16px; border: 1.5px solid var(--border); border-radius: 12px; background: var(--page); }

/* Badges */
.prs-detail-page .offer-type-badge { display: inline-flex; align-items: center; gap: 5px; font-size: .64rem; font-weight: 700; padding: 5px 10px; border-radius: 6px; text-transform: uppercase; letter-spacing: .04em; line-height: 1; white-space: nowrap; }
.prs-detail-page .offer-meta-pill { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 6px; font-size: .64rem; font-weight: 700; line-height: 1; text-transform: uppercase; letter-spacing: .04em; border: 1px solid transparent; white-space: nowrap; }
.prs-detail-page .offer-meta-pill--cat { background: var(--sky-ll); color: var(--sky-h); border-color: var(--sky-l); }
.prs-detail-page .offer-meta-pill--date { background: var(--status-warning-light); color: var(--am); border-color: #fde68a; }
.prs-detail-page .org-verified-badge { display: inline-flex; align-items: center; gap: 5px; font-size: .62rem; font-weight: 700; padding: 4px 9px; border-radius: 5px; text-transform: uppercase; letter-spacing: .04em; background: #ecfdf5; color: var(--em); border: 1px solid #a7f3d0; }

/* Main image */
.prs-detail-page .pr-main-image-wrap { border-radius: 16px; overflow: hidden; padding: 0; margin-bottom: 18px; border: 1.5px solid var(--border); }
.prs-detail-page .pr-main-image { width: 100%; height: auto; display: block; }

/* Sections */
.prs-detail-page .offer-section { background: var(--card); border: 1.5px solid var(--border); border-radius: 16px; padding: 28px; margin-bottom: 18px; box-shadow: 0 2px 10px rgba(15,22,36,.035); scroll-margin-top: calc(var(--nb-h-px) + 60px); }
.prs-detail-page .offer-section__title { font-size: 1.05rem; font-weight: 900; color: var(--txt); margin: 0 0 20px; display: flex; align-items: center; gap: 10px; padding-bottom: 14px; border-bottom: 2px solid var(--page); }
.prs-detail-page .offer-section__title i { width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; border-radius: 9px; background: linear-gradient(135deg, var(--sky-ll), var(--sky-l)); color: var(--sky-h); font-size: .85rem; flex-shrink: 0; }
.prs-detail-page .pr-all-link { margin-left: auto; font-size: .72rem; font-weight: 700; color: var(--sky-h); text-decoration: none; display: flex; align-items: center; gap: 4px; }
.prs-detail-page .pr-all-link:hover { text-decoration: underline; }

/* Article content */
.prs-detail-page .pr-article__content { font-size: .9375rem; color: var(--txt2); line-height: 1.8; }
.prs-detail-page .pr-article__content h2,.prs-detail-page .pr-article__content h3 { color: var(--txt); font-weight: 800; margin: 22px 0 10px; }
.prs-detail-page .pr-article__content p { margin: 12px 0; }
.prs-detail-page .pr-article__content strong { color: var(--txt); }
.prs-detail-page .pr-article__content a { color: var(--sky-h); }
.prs-detail-page .pr-article__content img { max-width: 100%; border-radius: 12px; margin: 12px 0; }

/* Tags */
.prs-detail-page .pr-tags-wrap { display: flex; flex-wrap: wrap; gap: 8px; }
.prs-detail-page .pr-tag-pill { display: inline-flex; align-items: center; gap: 5px; padding: 6px 14px; background: var(--sky-ll); color: var(--sky-h); border: 1.5px solid var(--sky-l); border-radius: 100px; font-size: .78rem; font-weight: 600; text-decoration: none; transition: background .12s; }
.prs-detail-page .pr-tag-pill:hover { background: var(--sky-l); }
.prs-detail-page .pr-tag-pill i { font-size: .6rem; }

/* Related cards */
.prs-detail-page .org-request-card { display: flex; gap: 14px; background: var(--card); border: 1.5px solid var(--border); border-radius: 14px; padding: 14px 16px; text-decoration: none; transition: border-color .18s, box-shadow .18s, transform .18s; margin-bottom: 10px; }
.prs-detail-page .org-request-card:last-child { margin-bottom: 0; }
.prs-detail-page .org-request-card:hover { border-color: var(--sky-l); box-shadow: 0 6px 22px rgba(2,132,199,.1); transform: translateY(-2px); }
.prs-detail-page .org-press-card__img { width: 80px; height: 60px; object-fit: cover; border-radius: 10px; flex-shrink: 0; }
.prs-detail-page .org-request-card__top { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; flex-wrap: wrap; }
.prs-detail-page .org-request-budget { font-size: .85rem; font-weight: 800; color: var(--sky-h); margin-left: auto; }
.prs-detail-page .org-request-card__title { font-size: .875rem; font-weight: 700; color: var(--txt); line-height: 1.4; margin-bottom: 6px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.prs-detail-page .org-request-card__desc { font-size: .78rem; color: var(--txt3); line-height: 1.4; margin-bottom: 6px; }
.prs-detail-page .org-request-card__meta { display: flex; flex-wrap: wrap; gap: 12px; font-size: .72rem; color: var(--txt3); }
.prs-detail-page .org-request-card__meta span { display: inline-flex; align-items: center; gap: 4px; }
.prs-detail-page .org-request-card__meta i { color: var(--sky); font-size: .6rem; }
.prs-detail-page .pr-co-logo-xs { width: 18px; height: 18px; object-fit: contain; border-radius: 4px; border: 1px solid var(--border); }

/* ── Sidebar ── */
.prs-detail-page .offer-detail__sidebar { position: sticky; top: calc(var(--nb-h-px) + 16px); align-self: start; display: flex; flex-direction: column; gap: 0; }

/* Identity card */
.prs-detail-page .org-identity-card { background: var(--card); border: 2px solid rgba(2,132,199,.15); border-radius: 16px; padding: 24px; box-shadow: 0 4px 20px rgba(2,132,199,.06); position: relative; overflow: hidden; text-align: center; }
.prs-detail-page .org-identity-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--rose), var(--am), var(--sky)); }
.prs-detail-page .org-identity-logo { width: 64px; height: 64px; object-fit: contain; border-radius: 16px; border: 1.5px solid var(--border); margin: 0 auto 12px; display: block; }
.prs-detail-page .org-identity-avatar { width: 64px; height: 64px; border-radius: 16px; background: linear-gradient(135deg, var(--sky), var(--teal)); color: #fff; font-size: 1.3rem; font-weight: 900; display: flex; align-items: center; justify-content: center; margin: 0 auto 12px; box-shadow: 0 4px 14px rgba(2,132,199,.2); }
.prs-detail-page .org-identity-name { font-size: .95rem; font-weight: 800; color: var(--txt); margin-bottom: 6px; }
.prs-detail-page .org-identity-status { font-size: .68rem; font-weight: 700; color: var(--am); display: flex; align-items: center; justify-content: center; gap: 4px; margin-bottom: 4px; }
.prs-detail-page .org-identity-status--ok { color: var(--em); }
.prs-detail-page .org-identity-city { font-size: .75rem; color: var(--txt3); display: flex; align-items: center; justify-content: center; gap: 5px; }

/* Sidebar cards */
.prs-detail-page .offer-sidebar-card { background: var(--card); border: 1.5px solid var(--border); border-radius: 16px; padding: 20px 22px; box-shadow: 0 2px 10px rgba(15,22,36,.035); }
.prs-detail-page .offer-sidebar-card--mt { margin-top: 14px; }
.prs-detail-page .offer-sidebar-card__title { font-size: .7rem; font-weight: 800; color: var(--txt); margin: 0 0 14px; text-transform: uppercase; letter-spacing: .08em; display: flex; align-items: center; gap: 8px; padding-bottom: 10px; border-bottom: 1.5px solid var(--page); }
.prs-detail-page .offer-sidebar-card__title i { color: var(--sky); font-size: .8rem; }

/* Quick facts */
.prs-detail-page .offer-quickfacts { display: flex; flex-direction: column; gap: 10px; }
.prs-detail-page .offer-qf { display: flex; align-items: flex-start; gap: 12px; background: var(--page); border: 1.5px solid transparent; border-radius: 12px; padding: 13px 14px; transition: border-color .15s; }
.prs-detail-page .offer-qf:hover { border-color: var(--sky-l); }
.prs-detail-page .offer-qf > i { width: 34px; height: 34px; border-radius: 9px; background: linear-gradient(135deg, var(--sky-ll), var(--sky-l)); color: var(--sky-h); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: .8rem; }
.prs-detail-page .offer-qf__l { font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--txt3); margin-bottom: 3px; }
.prs-detail-page .offer-qf__v { font-size: .85rem; font-weight: 700; color: var(--txt); line-height: 1.35; }

/* CTA button */
.prs-detail-page .tender-sb-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 13px 16px; background: linear-gradient(135deg, var(--sky), var(--teal)); color: #fff; border-radius: 12px; font-size: .875rem; font-weight: 700; text-decoration: none; transition: opacity .15s, transform .15s; margin-top: 14px; box-sizing: border-box; }
.prs-detail-page .tender-sb-btn:hover { opacity: .92; transform: translateY(-1px); }

/* Responsive */
@media(max-width:1100px){ .prs-detail-page .offer-detail__layout { grid-template-columns: 1fr 290px; gap: 20px; } }
@media(max-width:860px){
  .prs-detail-page .offer-detail__layout { grid-template-columns: 1fr; gap: 0; }
  .prs-detail-page .offer-detail__sidebar { position: static; order: -1; margin-bottom: 20px; }
  .prs-detail-page .offer-title { font-size: 1.3rem; }
  .prs-detail-page .offer-section { padding: 20px; }
  .prs-detail-page .offer-title-block { padding: 20px; }
  .prs-detail-page .org-request-card { flex-direction: column; }
  .prs-detail-page .org-press-card__img { width: 100%; height: 120px; }
}
@media(max-width:600px){
  .prs-detail-page .offer-title { font-size: 1.15rem; }
  .prs-detail-page .offer-title-block { padding: 16px 14px; border-radius: 12px; }
  .prs-detail-page .offer-type-badge,.prs-detail-page .offer-meta-pill { font-size: .58rem; padding: 4px 8px; }
  .prs-detail-page .offer-section { padding: 18px 14px; border-radius: 12px; }
  .prs-detail-page .offer-section__title { font-size: .95rem; gap: 8px; }
  .prs-detail-page .offer-section__title i { width: 28px; height: 28px; font-size: .75rem; }
  .prs-detail-page .offer-sidebar-card { border-radius: 12px; padding: 16px; }
  .prs-detail-page .org-identity-card { border-radius: 12px; padding: 20px; }
  .prs-detail-page .offer-qf { padding: 10px 12px; border-radius: 10px; gap: 10px; }
  .prs-detail-page .offer-qf > i { width: 30px; height: 30px; font-size: .72rem; }
  .prs-detail-page .offer-short-desc { font-size: .82rem; padding: 10px 12px; border-radius: 10px; }
  .prs-detail-page .pr-main-image-wrap { border-radius: 12px; }
}
@media(max-width:380px){
  .prs-detail-page .offer-title { font-size: 1.05rem; }
  .prs-detail-page .offer-section { padding: 14px 12px; }
  .prs-detail-page .offer-sidebar-card { padding: 14px 12px; }
}

/* ── Message Modal ── */
.msg-modal-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(15, 22, 36, 0.7);
  backdrop-filter: blur(4px);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s, visibility .25s;
}
.msg-modal-overlay.open {
  opacity: 1;
  visibility: visible;
}
.msg-modal {
  background: var(--card);
  border-radius: var(--r4);
  width: 90%;
  max-width: 520px;
  box-shadow: 0 12px 48px rgba(0,0,0,.2);
  transform: scale(0.95);
  transition: transform .25s;
}
.msg-modal-overlay.open .msg-modal {
  transform: scale(1);
}
.msg-modal-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--border);
}
.msg-modal-hd h3 {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--txt);
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
}
.msg-modal-hd h3 i {
  color: var(--sky);
}
.msg-modal-close {
  background: none;
  border: none;
  color: var(--txt2);
  font-size: 1.25rem;
  cursor: pointer;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r2);
  transition: all .2s;
}
.msg-modal-close:hover {
  background: var(--page);
  color: var(--txt);
}
.msg-modal-body {
  padding: 24px;
}
.msg-modal-to {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  font-size: .875rem;
  color: var(--txt2);
}
.msg-modal-to i {
  color: var(--sky);
}
.msg-modal-to strong {
  color: var(--txt);
  font-weight: 600;
}
.msg-modal-body textarea {
  width: 100%;
  min-height: 120px;
  padding: 12px 16px;
  border: 1.5px solid var(--border);
  border-radius: var(--r2);
  font-family: 'Inter', sans-serif;
  font-size: .875rem;
  color: var(--txt);
  background: var(--page);
  resize: vertical;
  transition: border-color .2s;
  box-sizing: border-box;
}
.msg-modal-body textarea:focus {
  outline: none;
  border-color: var(--sky);
}
.msg-modal-chars {
  text-align: right;
  font-size: .75rem;
  color: var(--txt2);
  margin-top: 6px;
}
.msg-modal-ft {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  padding: 16px 24px;
  border-top: 1px solid var(--border);
}
.msg-modal-ft .btn-cancel {
  padding: 9px 18px;
  background: var(--page);
  color: var(--txt);
  border: 1.5px solid var(--border);
  border-radius: var(--r2);
  font-size: .875rem;
  font-weight: 600;
  cursor: pointer;
  transition: all .2s;
}
.msg-modal-ft .btn-cancel:hover {
  background: var(--border);
}
.msg-modal-ft .btn-send {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  background: linear-gradient(135deg, var(--sky), var(--teal));
  color: #fff;
  font-size: .875rem;
  font-weight: 600;
  border: none;
  border-radius: var(--r2);
  cursor: pointer;
  transition: opacity .2s, transform .15s;
}
.msg-modal-ft .btn-send:hover {
  opacity: .88;
  transform: translateY(-1px);
}
.msg-modal-ft .btn-send:disabled {
  opacity: .5;
  cursor: not-allowed;
  transform: none;
}

/* ── Detail Actions (Favorite + Message buttons) ── */
.detail-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 20px 0;
  padding: 16px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.detail-act-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border: 1.5px solid var(--border);
  border-radius: var(--r2);
  background: var(--card);
  color: var(--txt);
  font-size: .875rem;
  font-weight: 600;
  cursor: pointer;
  transition: all .2s;
  text-decoration: none;
}
.detail-act-btn:hover {
  border-color: var(--sky);
  color: var(--sky);
  background: #f0f9ff;
  transform: translateY(-1px);
}
.detail-act-btn i {
  font-size: 1rem;
  color: var(--txt2);
  transition: color .2s;
}
.detail-act-btn:hover i {
  color: var(--sky);
}
.detail-fav-btn.fav-active {
  border-color: var(--rose);
  color: var(--rose);
  background: #fef2f2;
}
.detail-fav-btn.fav-active i {
  color: var(--rose);
}
.detail-fav-btn.fav-active:hover {
  background: #fee2e2;
  border-color: var(--rose);
}
.msg-btn {
  background: linear-gradient(135deg, var(--sky), var(--teal));
  color: #fff;
  border: none;
}
.msg-btn i {
  color: #fff;
}
.msg-btn:hover {
  opacity: .88;
  color: #fff;
  background: linear-gradient(135deg, var(--teal), var(--sky));
}
.msg-btn:hover i {
  color: #fff;
}
@media(max-width:768px){
  .detail-actions { gap: 8px; flex-wrap: wrap; }
  .detail-act-btn { padding: 8px 14px; font-size: .8125rem; }
}

/* ── Company 2026 (stub pages) ────────────────────────── */

/* Notice banner */
.stub26-notice {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 18px 22px; margin-bottom: 0; margin-top: 18px;
  background: linear-gradient(135deg, #f0fdfa 0%, #ccfbf1 100%);
  border: 1.5px solid #99f6e4; border-left: 4px solid #14b8a6;
  border-radius: 14px; font-size: .875rem; color: #115e59; line-height: 1.7;
}
.stub26-notice > i { color: #14b8a6; font-size: 1.15rem; margin-top: 2px; flex-shrink: 0; }
.stub26-notice a { color: #0d9488; font-weight: 700; border-bottom: 1px dashed #0d9488; text-decoration: none; }
.stub26-notice a:hover { color: #0f766e; border-bottom-style: solid; }

/* Activity block */
.stub26-activity {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 16px 20px;
  background: linear-gradient(135deg, var(--sky-ll), #eff6ff);
  border: 1.5px solid var(--sky-l); border-radius: 12px;
  font-size: .9rem; color: var(--sky-h); font-weight: 600; line-height: 1.6;
}
.stub26-activity i { color: #fbbf24; font-size: .9rem; margin-top: 4px; flex-shrink: 0; }

/* Address block */
.stub26-address {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 16px 20px;
  background: var(--page); border: 1.5px solid var(--border); border-radius: 12px;
  font-size: .9rem; color: var(--txt); line-height: 1.6;
}
.stub26-address i { color: var(--sky); font-size: .85rem; margin-top: 4px; flex-shrink: 0; }

/* CTA banner */
.stub26-cta {
  margin-top: 18px;
  background: linear-gradient(135deg, var(--sky) 0%, #0369a1 100%);
  border-radius: 16px; overflow: hidden; position: relative;
}
.stub26-cta::before {
  content: ''; position: absolute; inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='30' cy='30' r='1.5' fill='rgba(255,255,255,.06)'/%3E%3C/svg%3E");
}
.stub26-cta-inner {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: space-between;
  gap: 28px; padding: 32px 36px; flex-wrap: wrap;
}
.stub26-cta-text h3 { margin: 0 0 8px; font-size: 1.2rem; font-weight: 800; color: #fff; }
.stub26-cta-text h3 i { color: #fbbf24; margin-right: 8px; }
.stub26-cta-text p { margin: 0; font-size: .875rem; color: rgba(255,255,255,.88); line-height: 1.6; max-width: 520px; }
.stub26-cta .btn-primary {
  background: #fff !important; color: var(--sky) !important;
  font-weight: 700; white-space: nowrap; flex-shrink: 0;
  box-shadow: 0 4px 20px rgba(0,0,0,.18); border-radius: 12px;
}
.stub26-cta .btn-primary:hover {
  background: #f0f9ff !important; transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(0,0,0,.22);
}
.stub26-cta .btn-primary i { color: var(--sky) !important; }

/* Similar companies grid */
.stub26-similar {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px;
}
.stub26-sim-card {
  display: flex; flex-direction: column; gap: 4px;
  padding: 14px 16px; background: var(--page);
  border: 1.5px solid var(--border); border-radius: 12px;
  text-decoration: none; transition: all .2s;
}
.stub26-sim-card:hover {
  border-color: var(--sky-l); background: var(--sky-ll);
  transform: translateY(-2px); box-shadow: 0 4px 16px rgba(2,132,199,.1);
}
.stub26-sim-name { font-size: .8125rem; font-weight: 700; color: var(--txt); line-height: 1.35; }
.stub26-sim-act { font-size: .75rem; color: var(--txt2); line-height: 1.4; }
.stub26-sim-inn { font-size: .7rem; color: var(--txt3); font-weight: 600; margin-top: 2px; }

/* FAQ section */
.stub26-faq { margin-top: 18px; }
.stub26-faq-list { display: flex; flex-direction: column; gap: 8px; }
.stub26-faq-item {
  background: var(--page); border: 1.5px solid var(--border);
  border-radius: 12px; overflow: hidden; transition: border-color .2s;
}
.stub26-faq-item[open] { border-color: var(--sky-l); }
.stub26-faq-item summary {
  padding: 14px 18px; font-size: .875rem; font-weight: 700;
  color: var(--txt); cursor: pointer; list-style: none;
  display: flex; align-items: center; gap: 10px;
  transition: background .15s, color .15s;
}
.stub26-faq-item summary::-webkit-details-marker { display: none; }
.stub26-faq-item summary::before {
  content: '+'; font-size: 1.1rem; font-weight: 800; color: var(--sky);
  width: 26px; height: 26px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--sky-ll); border-radius: 8px; transition: all .2s;
}
.stub26-faq-item[open] summary::before { content: '−'; background: var(--sky); color: #fff; }
.stub26-faq-item summary:hover { background: var(--sky-ll); color: var(--sky-h); }
.stub26-faq-answer {
  padding: 0 18px 16px 54px;
  font-size: .8125rem; color: var(--txt2); line-height: 1.7;
}

/* Sidebar button */
.stub26-side-btn { width: 100%; justify-content: center; padding: 12px 16px; font-size: .875rem; border-radius: 12px; }

/* Sidebar features list */
.stub26-side-features {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 10px;
}
.stub26-side-features li {
  display: flex; align-items: center; gap: 10px;
  font-size: .8125rem; color: var(--txt); line-height: 1.45;
}
.stub26-side-features li i {
  color: #059669; font-size: .75rem; flex-shrink: 0; width: 16px; text-align: center;
}

@media(max-width:860px){
  .stub26-cta-inner { flex-direction: column; text-align: center; padding: 24px 20px; }
  .stub26-cta .btn-primary { width: 100%; justify-content: center; }
  .stub26-similar { grid-template-columns: 1fr; }
}

/* ══ Cross-links «Стоит посмотреть» ══ */
.xlinks { background: #f8fafc; border-top: 1px solid #e2e8f0; padding: 44px 0 52px; }
.xlinks-hd {
  font-size: 22px; font-weight: 800; color: #0f172a;
  margin-bottom: 24px; display: flex; align-items: center; gap: 10px;
  font-family: 'Inter', -apple-system, system-ui, sans-serif;
}
.xlinks-hd i { color: #0284c7; font-size: 20px; }
.xlinks-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
}
.xlinks-card {
  display: flex; flex-direction: column;
  background: #fff; border-radius: 12px;
  border: 1px solid #e2e8f0; overflow: hidden;
  text-decoration: none; color: inherit;
  transition: box-shadow .2s, border-color .2s, transform .2s;
  font-family: 'Inter', -apple-system, system-ui, sans-serif;
}
.xlinks-card:hover {
  box-shadow: 0 8px 28px rgba(15,23,42,.12);
  border-color: #cbd5e1; transform: translateY(-3px);
}
.xlinks-card-img {
  height: 110px; display: flex; align-items: center;
  justify-content: center; overflow: hidden; background: #f1f5f9;
  flex-shrink: 0;
}
.xlinks-card-img img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.xlinks-card-img i { font-size: 30px; opacity: .6; }
.xlinks-card-body {
  padding: 12px 14px 16px; flex: 1;
  display: flex; flex-direction: column; gap: 6px;
  min-height: 0;
}
.xlinks-badge {
  display: inline-block; font-size: 10px; font-weight: 700;
  padding: 3px 9px; border-radius: 5px; width: fit-content;
  letter-spacing: .03em; text-transform: uppercase; line-height: 1;
}
.xlinks-card-title {
  font-size: 13.5px; font-weight: 700; color: #1e293b; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden;
}
.xlinks-card-desc {
  font-size: 11.5px; color: #64748b; line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden;
  margin-top: auto;
}
@media (max-width: 1100px) { .xlinks-grid { grid-template-columns: repeat(4, 1fr); gap: 14px; } }
@media (max-width: 960px)  { .xlinks-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px)  {
  .xlinks-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .xlinks-card-img { height: 90px; }
  .xlinks { padding: 28px 0 36px; }
  .xlinks-hd { font-size: 18px; }
}
@media (max-width: 440px) {
  .xlinks-grid { grid-template-columns: 1fr; }
  .xlinks-card { flex-direction: row; }
  .xlinks-card-img { width: 100px; height: auto; min-height: 90px; }
  .xlinks-card-body { padding: 10px 12px; }
}


/* ═══════════════════════════════════════════════════════════════
   MAINTENANCE PAGE — Теннисная анимация
   ═══════════════════════════════════════════════════════════════ */
.mnt-body { margin: 0; background: #eef2f7; font-family: 'Inter', sans-serif; min-height: 100vh; display: flex; align-items: center; justify-content: center; }
.mnt-wrap { padding: 40px 20px; width: 100%; max-width: 720px; margin: 0 auto; }
.mnt-card { background: rgba(255,255,255,.9); backdrop-filter: blur(16px); border-radius: 24px; border: 1px solid rgba(222,228,237,.7); box-shadow: 0 12px 48px rgba(15,22,36,.08), 0 4px 16px rgba(15,22,36,.04); overflow: hidden; animation: mntFadeIn .6s ease-out; }
@keyframes mntFadeIn { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
.mnt-header { background: linear-gradient(135deg, #0284c7 0%, #075985 100%); padding: 28px 32px; text-align: center; position: relative; overflow: hidden; }
.mnt-header-text { position: relative; z-index: 1; color: #fff; font-size: 16px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; display: flex; align-items: center; justify-content: center; gap: 10px; }
.mnt-header-text i { font-size: 20px; }
.mnt-gear { position: absolute; color: rgba(255,255,255,.1); z-index: 0; }
.mnt-gear-1 { top: -12px; right: -12px; font-size: 80px; animation: mntSpin 8s linear infinite; }
.mnt-gear-2 { bottom: -8px; left: -8px; font-size: 56px; animation: mntSpin 6s linear infinite reverse; }
@keyframes mntSpin { to { transform: rotate(360deg); } }
.mnt-body-inner { padding: 48px 40px; text-align: center; }
.mnt-title { font-size: 30px; font-weight: 900; color: #0f172a; margin: 0 0 10px; letter-spacing: -.5px; }
.mnt-subtitle { font-size: 16px; font-weight: 500; color: #64748b; margin: 0 0 24px; }
.mnt-desc { font-size: 15px; color: #475569; line-height: 1.7; margin-bottom: 32px; max-width: 520px; margin-left: auto; margin-right: auto; }
.mnt-desc p { margin: 0 0 8px; }

/* Tennis court */
.mnt-tennis { position: relative; width: 360px; height: 180px; margin: 0 auto 40px; }
.mnt-court { position: absolute; bottom: 0; left: 30px; right: 30px; height: 6px; background: linear-gradient(90deg, #059669, #10b981, #059669); border-radius: 3px; box-shadow: 0 2px 8px rgba(5,150,105,.3); }
.mnt-net { position: absolute; left: 50%; bottom: 0; width: 3px; height: 52px; background: linear-gradient(to top, #94a3b8, #cbd5e1); transform: translateX(-50%); border-radius: 2px; }
.mnt-net::after { content: ''; position: absolute; top: 0; left: -6px; width: 15px; height: 3px; background: #94a3b8; border-radius: 2px; }
.mnt-ball { position: absolute; width: 14px; height: 14px; background: radial-gradient(circle at 35% 35%, #fde047, #eab308); border-radius: 50%; box-shadow: 0 2px 6px rgba(234,179,8,.5); animation: mntBallFly 1.6s ease-in-out infinite; bottom: 6px; left: 50px; z-index: 5; }
@keyframes mntBallFly {
  0%   { left: 50px;  bottom: 6px;   transform: scale(1); }
  15%  { left: 80px;  bottom: 90px;  transform: scale(.9); }
  30%  { left: 120px; bottom: 120px; transform: scale(.85); }
  50%  { left: 175px; bottom: 130px; transform: scale(.8); }
  70%  { left: 230px; bottom: 100px; transform: scale(.85); }
  85%  { left: 270px; bottom: 50px;  transform: scale(.9); }
  100% { left: 300px; bottom: 6px;   transform: scale(1); }
}
.mnt-shadow { position: absolute; width: 12px; height: 4px; background: rgba(0,0,0,.15); border-radius: 50%; bottom: -1px; animation: mntShadowMove 1.6s ease-in-out infinite; z-index: 1; }
@keyframes mntShadowMove {
  0%   { left: 53px;  opacity: .6; transform: scaleX(1); }
  30%  { left: 123px; opacity: .3; transform: scaleX(.7); }
  50%  { left: 178px; opacity: .25; transform: scaleX(.6); }
  70%  { left: 233px; opacity: .3; transform: scaleX(.7); }
  100% { left: 303px; opacity: .6; transform: scaleX(1); }
}

/* Players */
.mnt-player { position: absolute; bottom: 10px; width: 60px; height: 120px; }
.mnt-player-l { left: 10px; animation: mntPlayerL 1.6s ease-in-out infinite; }
.mnt-player-r { right: 10px; animation: mntPlayerR 1.6s ease-in-out infinite; }
@keyframes mntPlayerL { 0%, 20% { transform: translateY(0); } 10% { transform: translateY(-12px); } }
@keyframes mntPlayerR { 80%, 100% { transform: translateY(0); } 90% { transform: translateY(-12px); } }
.mnt-p-head { width: 32px; height: 32px; border-radius: 50%; margin: 0 auto; position: relative; }
.mnt-player-l .mnt-p-head { background: linear-gradient(135deg, #fbbf24, #f59e0b); box-shadow: 0 3px 8px rgba(251,191,36,.4); }
.mnt-player-r .mnt-p-head { background: linear-gradient(135deg, #f472b6, #ec4899); box-shadow: 0 3px 8px rgba(244,114,182,.4); }
.mnt-p-eyes { position: absolute; top: 11px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; }
.mnt-p-eye { width: 5px; height: 5px; background: #1e293b; border-radius: 50%; animation: mntBlink 3s ease-in-out infinite; }
@keyframes mntBlink { 0%, 90%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }
.mnt-p-mouth { position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); width: 10px; height: 5px; border: 2px solid #1e293b; border-top: none; border-radius: 0 0 10px 10px; }
.mnt-p-body { width: 28px; height: 36px; margin: -3px auto 0; border-radius: 14px 14px 10px 10px; position: relative; z-index: 1; }
.mnt-player-l .mnt-p-body { background: linear-gradient(135deg, #0284c7, #0369a1); box-shadow: 0 3px 8px rgba(2,132,199,.4); }
.mnt-player-r .mnt-p-body { background: linear-gradient(135deg, #7c3aed, #6d28d9); box-shadow: 0 3px 8px rgba(124,58,237,.4); }
.mnt-p-arm { position: absolute; width: 6px; height: 24px; border-radius: 3px; top: 38px; }
.mnt-player-l .mnt-p-arm { background: linear-gradient(135deg, #fbbf24, #f59e0b); }
.mnt-player-r .mnt-p-arm { background: linear-gradient(135deg, #f472b6, #ec4899); }
.mnt-p-arm-l { right: 2px; transform-origin: top center; animation: mntSwingL 1.6s ease-in-out infinite; }
.mnt-p-arm-r { left: 2px; transform-origin: top center; animation: mntSwingR 1.6s ease-in-out infinite; }
@keyframes mntSwingL { 0% { transform: rotate(-30deg); } 8% { transform: rotate(50deg); } 20% { transform: rotate(10deg); } 100% { transform: rotate(-30deg); } }
@keyframes mntSwingR { 0% { transform: rotate(30deg); } 80% { transform: rotate(30deg); } 88% { transform: rotate(-50deg); } 100% { transform: rotate(30deg); } }
.mnt-p-racket { position: absolute; top: 36px; z-index: 3; }
.mnt-p-racket-l { right: -14px; animation: mntRacketL 1.6s ease-in-out infinite; }
.mnt-p-racket-r { left: -14px; animation: mntRacketR 1.6s ease-in-out infinite; }
.mnt-p-racket::before { content: ''; display: block; width: 3px; height: 16px; background: #78716c; margin: 0 auto; border-radius: 2px; }
.mnt-p-racket::after { content: ''; display: block; width: 18px; height: 22px; border: 3px solid #78716c; border-radius: 50%; margin: -2px auto 0; background: rgba(120,113,108,.08); }
@keyframes mntRacketL { 0% { transform: rotate(-40deg) translateY(0); } 8% { transform: rotate(60deg) translateY(-8px); } 20% { transform: rotate(15deg) translateY(0); } 100% { transform: rotate(-40deg) translateY(0); } }
@keyframes mntRacketR { 0% { transform: rotate(40deg) translateY(0); } 80% { transform: rotate(40deg) translateY(0); } 88% { transform: rotate(-60deg) translateY(-8px); } 100% { transform: rotate(40deg) translateY(0); } }
.mnt-p-legs { display: flex; gap: 6px; justify-content: center; margin-top: -2px; }
.mnt-p-leg { width: 7px; height: 22px; border-radius: 4px 4px 5px 5px; }
.mnt-player-l .mnt-p-leg { background: linear-gradient(135deg, #0284c7, #0369a1); }
.mnt-player-r .mnt-p-leg { background: linear-gradient(135deg, #7c3aed, #6d28d9); }
.mnt-p-legs .mnt-p-leg:first-child { animation: mntLegA .8s ease-in-out infinite; }
.mnt-p-legs .mnt-p-leg:last-child { animation: mntLegB .8s ease-in-out infinite; }
@keyframes mntLegA { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }
@keyframes mntLegB { 0%, 100% { transform: rotate(4deg); } 50% { transform: rotate(-4deg); } }

/* Countdown */
.mnt-countdown { display: flex; align-items: flex-start; justify-content: center; gap: 6px; margin-bottom: 36px; }
.mnt-cd-item { text-align: center; }
.mnt-cd-num { display: block; font-size: 42px; font-weight: 900; color: #0f172a; line-height: 1; background: linear-gradient(135deg, #f8fafc, #e2e8f0); border-radius: 14px; padding: 14px 18px; min-width: 56px; border: 1.5px solid #e2e8f0; box-shadow: 0 2px 8px rgba(0,0,0,.06); }
.mnt-cd-lbl { display: block; font-size: 11px; font-weight: 600; color: #94a3b8; text-transform: uppercase; letter-spacing: .5px; margin-top: 6px; }
.mnt-cd-sep { font-size: 36px; font-weight: 900; color: #cbd5e1; margin-top: 14px; }
.mnt-cd-done { font-size: 18px; font-weight: 700; color: #059669; }
.mnt-cd-done i { margin-right: 6px; }

/* Contacts */
.mnt-contacts { padding-top: 32px; border-top: 2px solid #f1f5f9; }
.mnt-contacts-title { font-size: 13px; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 16px; }
.mnt-contacts-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.mnt-contact-btn { display: flex; align-items: center; gap: 12px; padding: 14px 20px; border-radius: 14px; text-decoration: none; transition: all .2s; border: 1.5px solid; width: 100%; max-width: 260px; box-sizing: border-box; }
.mnt-contact-btn i { font-size: 18px; flex-shrink: 0; }
.mnt-contact-lbl { display: block; font-size: .65rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: #64748b; }
.mnt-contact-val { display: block; font-size: .875rem; font-weight: 700; color: #0f172a; }
.mnt-contact-phone { background: #ecfdf5; border-color: #a7f3d0; }
.mnt-contact-phone i { color: #059669; }
.mnt-contact-phone:hover { border-color: #059669; box-shadow: 0 4px 16px rgba(5,150,105,.15); transform: translateY(-2px); }
.mnt-contact-email { background: #eff6ff; border-color: #bfdbfe; }
.mnt-contact-email i { color: #0284c7; }
.mnt-contact-email:hover { border-color: #0284c7; box-shadow: 0 4px 16px rgba(2,132,199,.15); transform: translateY(-2px); }
.mnt-contact-vk { background: #f5f3ff; border-color: #ddd6fe; }
.mnt-contact-vk i { color: #7c3aed; }
.mnt-contact-vk:hover { border-color: #7c3aed; box-shadow: 0 4px 16px rgba(124,58,237,.15); transform: translateY(-2px); }

/* Responsive */
@media (max-width: 640px) {
  .mnt-wrap { padding: 20px 12px; }
  .mnt-body-inner { padding: 32px 20px; }
  .mnt-title { font-size: 24px; }
  .mnt-tennis { width: 280px; height: 150px; }
  .mnt-player-l { left: 0; }
  .mnt-player-r { right: 0; }
  .mnt-cd-num { font-size: 32px; padding: 10px 14px; min-width: 44px; }
  .mnt-cd-sep { font-size: 28px; margin-top: 10px; }
  .mnt-contacts-row { flex-direction: column; align-items: center; }
}
@media (max-width: 400px) {
  .mnt-tennis { width: 240px; height: 130px; }
  .mnt-header { padding: 20px 16px; }
  .mnt-header-text { font-size: 13px; letter-spacing: 1px; }
  .mnt-title { font-size: 20px; }
  .mnt-subtitle { font-size: 14px; }
  .mnt-cd-num { font-size: 26px; padding: 8px 10px; min-width: 36px; border-radius: 10px; }
}

/* ── Organization Social Links ── */
.org-socials {
  margin: 18px 0 22px;
}
.org-socials-title {
  font-size: 15px;
  font-weight: 700;
  color: #334155;
  margin-bottom: 10px;
}
.org-socials-title i {
  color: #0284c7;
  margin-right: 4px;
}
.org-socials-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.org-social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 150px;
  height: 34px;
  padding: 0 14px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: transform .15s, box-shadow .15s, filter .15s;
  color: #fff;
  box-sizing: border-box;
}
.org-social-link:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(0,0,0,.18);
  filter: brightness(1.08);
  text-decoration: none;
  color: #fff;
}
.org-social-link i { font-size: 17px; }
.org-social-link img { width: 17px; height: 17px; }

.soc-vk  { background: linear-gradient(135deg, #0077ff, #0055d4); }
.soc-ok  { background: linear-gradient(135deg, #ee8208, #d4710a); }
.soc-tg  { background: linear-gradient(135deg, #2aabee, #1e96d1); }
.soc-x   { background: linear-gradient(135deg, #1d1d1d, #333);   }
.soc-max { background: linear-gradient(135deg, #8b5cf6, #6d28d9); }

@media(max-width:480px) {
  .org-socials-list { gap: 8px; }
  .org-social-link { min-width: 130px; height: 32px; padding: 0 12px; font-size: 13px; }
}