/* ============================================================================
   SOMNIUM WORKSPACE - MAIN DESIGN SYSTEM
   ============================================================================
   This is the master stylesheet that defines the complete design system.
   All other stylesheets inherit colors, typography, spacing, and styles from here.

   Palette: Warm, professional, with sand/cream backgrounds and terracotta accents
   ============================================================================ */

/* Убираем белый flash при навигации */
html { background-color: #f8f8f4; }

/* ──────────────────────────────────────────────────────────────────────────
   AI badge — тёмная "пилюля" рядом с названием продукта в крупных заголовках.
   Размер задан в em, поэтому бадж масштабируется под любой заголовок.
   Использование: <h1>Somnium Workspace <span class="ai-badge">AI</span></h1>
   ────────────────────────────────────────────────────────────────────────── */
.ai-badge {
    display: inline-block;
    vertical-align: middle;
    margin-left: 0.4em;
    padding: 0.16em 0.5em;
    font-size: 0.42em;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #fff;
    background: #1a1a1a;
    border-radius: 0.4em;
    position: relative;
    top: -0.12em;
    white-space: nowrap;
}

:root {
  /* ========================================================================
     COLOR PALETTE - Warm & Professional
     ======================================================================== */

  /* Primary Colors - Sand & Cream — палитра new_all (design-система.md) */
  --sand:             #f1f2ed;
  --sand-deep:        #e4e8df;
  --cream:            #f8f8f4;

  /* Accent Colors - Warm Terracotta — палитра new_all */
  --warm:             #b9654d;
  --warm-soft:        #d38f76;
  --warm-pale:        #f0dcd2;
  --warm-bg:          #fbf0eb;
  --warm-dark:        #8f4f3d;   /* hover/active for warm buttons */

  /* Text Colors - Dark Ink — палитра new_all */
  --ink:              #252321;
  --ink-mid:          #4d4a45;
  --ink-soft:         #7d7972;
  --ink-faint:        #aaa69d;
  --muted:            #6b7a8d;   /* cool-gray secondary used in call/dark UI — НЕ из new_all, держим для звонкового/тёмного UI */
  --white:            #ffffff;

  /* Calm neutrals new_all — мягкий sage / blue-gray как вторичные акценты */
  --sage:             #718a78;
  --sage-bg:          #eaf1e9;
  --sky-muted:        #7890a6;
  --sky-bg:           #edf3f7;

  /* Status Colors */
  --success:          #10b981;
  --success-bg:       #d1fae5;
  --success-text:     #065f46;
  --success-dark:     #059669;
  --success-strong:   #38a169;   /* used by call UI/online indicators */

  --danger:           #ef4444;
  --danger-bg:        #fee2e2;
  --danger-text:      #991b1b;
  --danger-dark:      #c0392b;   /* hover for danger buttons + warm-themed close */
  --danger-strong:    #dc2626;
  --danger-alt:       #e53e3e;   /* call decline, alt danger */

  --warning:          #f59e0b;
  --warning-bg:       #fef3c7;
  --warning-text:     #92400e;

  --info:             #3b82f6;
  --info-bg:          #dbeafe;
  --info-text:        #1e40af;

  /* File-group palette — shared by Drive lists, picker, editor sidebar */
  --file-word:        #2b5fad;
  --file-excel:       #1e7145;
  --file-impress:     #c05020;
  --file-draw:        #7b3fa0;
  --file-pdf:         #c0392b;
  --file-word-bg:     #dce8f8;
  --file-excel-bg:    #d6f0e0;
  --file-impress-bg: #fde8df;
  --file-draw-bg:     #efe0f8;
  --file-pdf-bg:      #fdecea;

  /* Call / dark-UI accents (independent of warm palette) */
  --call-blue:        #5b8dee;
  --call-purple:      #7c6be0;
  /* RGB-каналы тех же акцентов — единый источник для полупрозрачных вариантов
     rgba(var(--call-blue-rgb), α); раньше 91,141,238 / 124,107,224 копировались
     сырыми rgba по call-UI (DRY-дефект). Значения тождественны хексам выше. */
  --call-blue-rgb:    91, 141, 238;
  --call-purple-rgb:  124, 107, 224;
  --call-accent-grad: linear-gradient(135deg, var(--call-blue) 0%, var(--call-purple) 100%);
  /* Avatar gradient used across call UI (hero, dialing, history, invite,
     group member, audio-card) — terracotta → purple. */
  --avatar-grad:      linear-gradient(135deg, var(--warm) 0%, var(--call-purple) 100%);

  /* Legacy aliases — referenced by older selectors via var(--x, fallback).
     --accent stays its own beige to match historical render in mpw-input/btn. */
  --bg:               var(--white);
  --primary:          var(--warm);
  --accent:           #c0975f;
  --accent-dark:      #a87c4a;
  --text-secondary:   var(--ink-mid);
  --border-color:     var(--border);

  /* Borders & Effects */
  --border:           rgba(26, 22, 19, 0.08);
  --border-s:         rgba(26, 22, 19, 0.14);
  --shadow-sm:        0 1px 3px rgba(26, 22, 19, 0.04);
  --shadow-md:        0 4px 20px rgba(26, 22, 19, 0.06);
  --shadow-lg:        0 12px 40px rgba(26, 22, 19, 0.08);
  --shadow-xl:        0 24px 64px rgba(26, 22, 19, 0.16);

  /* Focus ring + interactive elevations — used by inputs, buttons, modals */
  --ring-warm:        0 0 0 3px var(--warm-pale);
  --ring-danger:      0 0 0 3px rgba(239, 68, 68, 0.18);
  --ring-success:     0 0 0 3px rgba(16, 185, 129, 0.18);
  --shadow-warm-soft: 0 4px 14px rgba(193, 95, 60, 0.22);
  --shadow-warm-strong: 0 8px 24px rgba(193, 95, 60, 0.3);

  /* Backdrop / overlay tint shared by all modals */
  --backdrop:         rgba(26, 22, 19, 0.55);

  /* ========================================================================
     NEW DESIGN SYSTEM (new_all) — мостовые токены
     Семантические алиасы поверхностей и линий, тёмный active-state и
     meet-палитра. Потребляются новыми primitives при помодульном переносе
     (см. dependencies/new_design_system/дизайн-система.md).
     ======================================================================== */
  --surface:          var(--white);
  --surface-2:        var(--sand);
  --faint:            var(--ink-faint);
  --line:             var(--border);
  --line-strong:      var(--border-s);
  --warm-2:           var(--warm-pale);

  --active:           #35312e;   /* тёмный active-state (sidebar selected) */
  --active-soft:      #e9ede7;

  --meet-bg:          #343b38;   /* специальный dark UI: Meet */
  --meet-surface:     #4b5752;

  --shadow:           0 18px 46px rgba(48, 53, 49, .09);
  --sidebar:          264px;     /* ширина sidebar в new_all-оболочке */

  /* ========================================================================
     RADIUS & SPACING
     ======================================================================== */

  --radius-xs:        6px;
  --radius-sm:        10px;
  --radius:           16px;
  --radius-md:        18px;
  --radius-lg:        24px;
  --radius-full:      100px;

  --spacing-xs:       4px;
  --spacing-sm:       8px;
  --spacing-md:       16px;
  --spacing-lg:       24px;
  --spacing-xl:       32px;
  --spacing-2xl:      48px;

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

  --font-family-sans:     'Bricolage Grotesque', system-ui, -apple-system, sans-serif;
  --font-family-serif:    'Newsreader', Georgia, serif;
  --font-family-mono:     'IBM Plex Mono', 'Courier New', monospace;

  /* somnium-workspace font aliases — короткие имена дизайн-системы.
     Указывают на те же 3 шрифта, что и --font-family-* выше. */
  --sans:                 var(--font-family-sans);
  --mono:                 var(--font-family-mono);
  --serif:                var(--font-family-serif);

  --font-size-xs:         11.5px;
  --font-size-sm:         13.5px;
  --font-size-base:       14px;
  --font-size-md:         15px;
  --font-size-lg:         17px;
  --font-size-xl:         21px;
  --font-size-2xl:        30px;
  --font-size-3xl:        42px;
  --font-size-4xl:        76px;

  --font-weight-light:    300;
  --font-weight-normal:   400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;
  --font-weight-black:    800;

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

  --sidebar-width:        320px;
  --sidebar-width-mini:   80px;
  --header-height:        70px;
  --max-content-width:    1400px;

  /* ========================================================================
     TRANSITIONS & ANIMATIONS
     ======================================================================== */

  --transition-fast:      all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  --transition:           all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow:      all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================================================
   GLOBAL RESET & BASE STYLES
   ============================================================================ */

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

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-family-sans);
  font-size: var(--font-size-base);
  line-height: 1.6;
  /* Тёплый рабочий фон new_all: мягкий песочный градиент в крем. */
  background-color: var(--cream);
  background-image: linear-gradient(180deg, rgba(241, 242, 237, .68), rgba(248, 248, 244, .96) 34%);
  color: var(--ink);
  overflow-x: hidden;
}

/* Selection Styling */
::selection {
  background: var(--warm-pale);
  color: var(--ink);
}

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--ink-faint);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--ink-soft);
}

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

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-family-sans);
  font-weight: var(--font-weight-black);
  line-height: 1.08;
  color: var(--ink);
  margin: 0;
}

h1 { font-size: clamp(42px, 5.8vw, 76px); letter-spacing: -0.025em; }
h2 { font-size: clamp(30px, 3.5vw, 50px); letter-spacing: -0.02em; }
h3 { font-size: 21px; }
h4 { font-size: 17px; font-weight: var(--font-weight-semibold); }
h5 { font-size: 15px; font-weight: var(--font-weight-semibold); }
h6 { font-size: 13.5px; font-weight: var(--font-weight-semibold); }

p {
  margin: 0 0 var(--spacing-md) 0;
  line-height: 1.7;
}

a {
  color: var(--warm);
  text-decoration: none;
  transition: var(--transition);
}

a:hover {
  color: var(--warm-soft);
}

em {
  font-style: italic;
  font-family: var(--font-family-serif);
  font-weight: var(--font-weight-light);
  color: var(--warm);
}

strong { font-weight: var(--font-weight-bold); }
small { font-size: 0.875em; color: var(--ink-soft); }

/* ============================================================================
   BUTTON STYLES
   ============================================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  padding: 15px 32px;
  font-family: var(--font-family-sans);
  font-size: 14px;
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.01em;
  border-radius: var(--radius-full);
  border: none;
  cursor: pointer;
  transition: var(--transition);
  white-space: nowrap;
  text-decoration: none;
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Primary Button */
.btn-primary { background: var(--ink); color: var(--cream); }
.btn-primary:hover:not(:disabled) {
  background: var(--warm);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(193, 95, 60, 0.2);
}

/* Outline Button */
.btn-outline { border: 1.5px solid var(--border-s); color: var(--ink-mid); background: transparent; }
.btn-outline:hover:not(:disabled) { border-color: var(--warm-soft); color: var(--warm); background: var(--warm-bg); }

/* Warm Button */
.btn-warm { background: var(--warm); color: var(--white); }
.btn-warm:hover:not(:disabled) {
  background: var(--warm-soft);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(193, 95, 60, 0.3);
}

/* Success Button */
.btn-success { background: var(--success); color: var(--white); }
.btn-success:hover:not(:disabled) { background: #059669; transform: translateY(-2px); }

/* Danger Button */
.btn-danger { background: var(--danger); color: var(--white); }
.btn-danger:hover:not(:disabled) { background: #dc2626; transform: translateY(-2px); }

/* Size Variants */
.btn-sm { padding: 10px 20px; font-size: 13px; }
.btn-lg { padding: 18px 40px; font-size: 16px; }

/* ============================================================================
   FORM ELEMENTS
   ============================================================================ */

.form-group { margin-bottom: var(--spacing-lg); }

.form-label {
  display: block;
  margin-bottom: var(--spacing-sm);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-sm);
  color: var(--ink);
}

.form-control, .form-input, .search-input,
input[type="text"], input[type="email"], input[type="password"], input[type="search"], textarea {
  width: 100%;
  padding: 12px 16px;
  font-family: var(--font-family-sans);
  font-size: var(--font-size-base);
  border: 1px solid var(--border-s);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--ink);
  transition: var(--transition);
}

.form-control:focus, .form-input:focus, .search-input:focus, input:focus, textarea:focus {
  outline: none;
  border-color: var(--warm);
  box-shadow: var(--ring-warm);
}

.form-control::placeholder, input::placeholder, textarea::placeholder {
  color: var(--ink-faint);
}

textarea { resize: vertical; min-height: 100px; font-family: var(--font-family-sans); }

select {
  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='%234a3f36' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 40px;
}

/* ============================================================================
   CARDS & CONTAINERS
   ============================================================================ */

.card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--spacing-lg);
  box-shadow: var(--shadow-md);
  transition: var(--transition);
}

.card:hover {
  border-color: var(--warm-soft);
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
}

.card-header {
  padding: var(--spacing-lg) var(--spacing-lg) var(--spacing-md);
  border-bottom: 1px solid var(--border);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-lg);
  margin: 0;
}

.card-body { padding: var(--spacing-lg); }

.card-footer {
  padding: var(--spacing-md) var(--spacing-lg);
  border-top: 1px solid var(--border);
  background: var(--sand);
}

/* ============================================================================
   BADGES & LABELS
   ============================================================================ */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: 6px 14px;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  border-radius: var(--radius-full);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-family: var(--font-family-mono);
}

.badge-primary { background: var(--warm-pale); color: var(--warm); }
.badge-success { background: var(--success-bg); color: var(--success); }
.badge-danger { background: var(--danger-bg); color: var(--danger); }
.badge-warning { background: var(--warning-bg); color: var(--warning); }
.badge-info { background: var(--info-bg); color: var(--info); }

/* ============================================================================
   ALERTS & NOTIFICATIONS
   ============================================================================ */

.alert {
  padding: var(--spacing-md) var(--spacing-lg);
  border-radius: var(--radius);
  margin-bottom: var(--spacing-lg);
  border-left: 4px solid;
}

.alert-success { background: var(--success-bg); border-color: var(--success); color: var(--success-text); }
.alert-danger { background: var(--danger-bg); border-color: var(--danger); color: var(--danger-text); }
.alert-warning { background: var(--warning-bg); border-color: var(--warning); color: var(--warning-text); }
.alert-info { background: var(--info-bg); border-color: var(--info); color: var(--info-text); }

/* ============================================================================
   BOOTSTRAP DATA SURFACES → warm system (new_all)
   Ре-скин Bootstrap-компонентов, которые иначе остаются дефолтными
   (синие/серые) и выбиваются из тёплой палитры: таблицы, вкладки, пагинация,
   селекты. Применяется в admin (HR-справочники, история входов), audit и
   compliance. Чисто косметика — поведение Bootstrap-JS не затрагивается.
   Модульные CSS грузятся после main.css и при необходимости переопределяют.
   ============================================================================ */

/* Таблицы — заголовок как в .data-table new_all: mono / uppercase / muted. */
.table { color: var(--ink); vertical-align: middle; border-color: var(--line); }
.table > thead th,
.table th {
  font-family: var(--font-family-mono);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--ink-soft);
  border-bottom: 1px solid var(--line-strong);
}
.table td { color: var(--ink-mid); border-color: var(--line); }
.table-hover > tbody > tr:hover > * { background-color: var(--sand); color: var(--ink); }

/* Вкладки — лёгкое подчёркивание-акцент вместо тяжёлых рамок. */
.nav-tabs { border-bottom: 1px solid var(--line-strong); gap: 2px; }
.nav-tabs .nav-link {
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  margin-bottom: -1px;
  background: transparent;
  color: var(--ink-soft);
  font-weight: var(--font-weight-semibold);
}
.nav-tabs .nav-link:hover { color: var(--ink); border-bottom-color: var(--warm-pale); }
.nav-tabs .nav-link.active {
  color: var(--warm);
  background: transparent;
  border-bottom-color: var(--warm);
}

/* Пагинация — тёмный active как у sidebar, песочный hover. */
.page-link { color: var(--ink-mid); }
.page-link:hover { background: var(--sand); color: var(--ink); }
.page-item.active .page-link {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--cream);
}
.page-item.disabled .page-link { color: var(--ink-faint); }

/* Селекты Bootstrap — выравниваем рамку/фокус под .form-control. */
.form-select {
  border: 1px solid var(--border-s);
  border-radius: var(--radius);
  color: var(--ink);
}
.form-select:focus { border-color: var(--warm); box-shadow: var(--ring-warm); }

/* ============================================================================
   BOOTSTRAP КОНТЕКСТНЫЕ ЦВЕТА → тёплая система (new_all)
   Модуль Meet (conference dashboard/participant_list) и часть админ/комплаенс
   собраны на голом Bootstrap: .badge.bg-*, .btn-outline-*, .btn-warning/-info.
   Их дефолтные брайт-цвета (особенно синий primary/info) выбиваются из тёплой
   палитры → «не наследует систему». Маппим на токены. Семантику сохраняем
   (success=зелёный, danger=красный, warning=янтарь), primary/info уводим в тёплый.
   ============================================================================ */

/* Контекстный текст и сплошная «вторичная» кнопка */
.text-primary { color: var(--warm) !important; }
.btn-secondary { background: var(--sand-deep); color: var(--ink); border-color: var(--border-s); }
.btn-secondary:hover:not(:disabled) { background: var(--sand); color: var(--ink); border-color: var(--border-s); }

/* Контекстные баджи */
.badge.bg-primary   { background-color: var(--warm) !important; color: #fff !important; }
.badge.bg-secondary { background-color: var(--ink-soft) !important; color: #fff !important; }
.badge.bg-info      { background-color: var(--sky-muted) !important; color: #fff !important; }
.badge.bg-success   { background-color: var(--success) !important; color: #fff !important; }
.badge.bg-danger    { background-color: var(--danger) !important; color: #fff !important; }
.badge.bg-warning   { background-color: var(--warning) !important; color: #fff !important; }

/* Сплошные семантические кнопки, не покрытые выше */
.btn-warning { background: var(--warning); color: #fff; border-color: var(--warning); }
.btn-warning:hover:not(:disabled) { background: var(--warning-text); border-color: var(--warning-text); }
.btn-info    { background: var(--sky-muted); color: #fff; border-color: var(--sky-muted); }
.btn-info:hover:not(:disabled) { background: var(--info-text); border-color: var(--info-text); }

/* Outline-кнопки Bootstrap (primary уводим в тёплый, остальные — семантика на токенах) */
.btn-outline-primary   { color: var(--warm); border: 1px solid var(--warm-soft); background: transparent; }
.btn-outline-primary:hover:not(:disabled)   { background: var(--warm); border-color: var(--warm); color: #fff; }
.btn-outline-secondary { color: var(--ink-mid); border: 1px solid var(--border-s); background: transparent; }
.btn-outline-secondary:hover:not(:disabled) { background: var(--sand); border-color: var(--border-s); color: var(--ink); }
.btn-outline-success   { color: var(--success-dark); border: 1px solid rgba(16,185,129,.4); background: transparent; }
.btn-outline-success:hover:not(:disabled)   { background: var(--success); border-color: var(--success); color: #fff; }
.btn-outline-danger    { color: var(--danger-dark); border: 1px solid rgba(192,57,43,.4); background: transparent; }
.btn-outline-danger:hover:not(:disabled)    { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn-outline-warning   { color: var(--warning-text); border: 1px solid rgba(245,158,11,.45); background: transparent; }
.btn-outline-warning:hover:not(:disabled)   { background: var(--warning); border-color: var(--warning); color: #fff; }
.btn-outline-info      { color: var(--sky-muted); border: 1px solid rgba(120,144,166,.45); background: transparent; }
.btn-outline-info:hover:not(:disabled)      { background: var(--sky-muted); border-color: var(--sky-muted); color: #fff; }

/* ============================================================================
   SECTIONS & SPACING
   ============================================================================ */


.section-label {
  font-family: var(--font-family-mono);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.14em;
  color: var(--warm);
  text-transform: uppercase;
  margin-bottom: var(--spacing-md);
  display: flex;
  align-items: center;
  gap: 10px;
}

.section-label::before {
  content: '';
  width: 28px;
  height: 2px;
  background: var(--warm);
  border-radius: 1px;
}

.section-title {
  font-size: clamp(30px, 3.5vw, 50px);
  font-weight: var(--font-weight-black);
  line-height: 1.08;
  margin-bottom: var(--spacing-md);
  letter-spacing: -0.02em;
}

.section-sub {
  font-family: var(--font-family-serif);
  font-size: var(--font-size-lg);
  color: var(--ink-soft);
  font-weight: var(--font-weight-light);
  max-width: 520px;
  line-height: 1.75;
}

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

.container {
  width: 100%;
  max-width: var(--max-content-width);
  margin: 0 auto;
  padding: 0 var(--spacing-md);
}

.grid { display: grid; gap: var(--spacing-lg); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, 1fr); gap: var(--spacing-lg); }
.grid-4 { grid-template-columns: repeat(4, 1fr); gap: var(--spacing-lg); }

@media (max-width: 768px) {
  .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

/* ============================================================================
   NAVIGATION STYLES
   ============================================================================ */

nav {
  position: fixed;
  top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--spacing-xl);
  height: var(--header-height);
  background: rgba(250, 248, 244, 0.85);
  backdrop-filter: blur(20px) saturate(1.2);
  border-bottom: 1px solid var(--border);
}

.nav-logo { display: flex; align-items: center; gap: var(--spacing-sm); }
.nav-logo img { width: 34px; height: 34px; object-fit: contain; }
.nav-logo-text {
  font-weight: var(--font-weight-black);
  font-size: 14px;
  letter-spacing: 0.14em;
  color: var(--ink);
  text-transform: uppercase;
}

.nav-links { display: flex; gap: var(--spacing-sm); list-style: none; align-items: center; }
.nav-links a {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-normal);
  color: var(--ink-soft);
  padding: 8px 16px;
  border-radius: var(--radius-full);
  transition: var(--transition);
}
.nav-links a:hover { color: var(--ink); background: rgba(26, 22, 19, 0.04); }

.nav-cta {
  background: var(--ink) !important;
  color: var(--cream) !important;
  font-weight: var(--font-weight-semibold) !important;
  transition: var(--transition) !important;
}
.nav-cta:hover { background: var(--warm) !important; transform: translateY(-1px); }

/* ============================================================================
   ANIMATIONS & TRANSITIONS
   ============================================================================ */

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

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

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

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.75); }
}

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

.fade-in { animation: fadeIn 0.3s ease-out; }
.fade-in-down { animation: fadeInDown 0.3s ease-out; }
.slide-in { animation: slideIn 0.3s ease-out; }

.fade-up {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.fade-up.visible { opacity: 1; transform: translateY(0); }

/* ============================================================================
   UTILITY CLASSES
   ============================================================================ */

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

.text-muted { color: var(--ink-soft); }
.text-secondary { color: var(--ink-mid); }
.text-success { color: var(--success); }
.text-danger { color: var(--danger); }
.text-warning { color: var(--warning); }

.font-light { font-weight: var(--font-weight-light); }
.font-normal { font-weight: var(--font-weight-normal); }
.font-medium { font-weight: var(--font-weight-medium); }
.font-semibold { font-weight: var(--font-weight-semibold); }
.font-bold { font-weight: var(--font-weight-bold); }
.font-black { font-weight: var(--font-weight-black); }

.mt-0 { margin-top: 0; }
.mt-sm { margin-top: var(--spacing-sm); }
.mt-md { margin-top: var(--spacing-md); }
.mt-lg { margin-top: var(--spacing-lg); }
.mt-xl { margin-top: var(--spacing-xl); }

.mb-0 { margin-bottom: 0; }
.mb-sm { margin-bottom: var(--spacing-sm); }
.mb-md { margin-bottom: var(--spacing-md); }
.mb-lg { margin-bottom: var(--spacing-lg); }
.mb-xl { margin-bottom: var(--spacing-xl); }

.p-sm { padding: var(--spacing-sm); }
.p-md { padding: var(--spacing-md); }
.p-lg { padding: var(--spacing-lg); }
.p-xl { padding: var(--spacing-xl); }

/* ============================================================================
   SUBTLE GRAIN TEXTURE
   ============================================================================ */

body::after {
  content: '';
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 9999;
  opacity: 0.4;
}

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

@media (max-width: 768px) {
  :root { --spacing-lg: 16px; --spacing-xl: 24px; --sidebar-width: 100%; }
  nav { padding: 0 var(--spacing-md); }
  section { padding: 60px var(--spacing-md); }
  .card { padding: var(--spacing-md); }
  .btn { width: 100%; }
  .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  h1 { font-size: 28px; }
  h2 { font-size: 20px; }
  section { padding: 40px var(--spacing-md); }
}

/* ============================================================================
   LAYOUT - APP WRAPPER & CONTENT AREAS
   ============================================================================ */

.app-layout {
  display: flex;
  height: 100vh;
  overflow: hidden;
  gap: 8px;
  padding: 8px 8px 8px 0;
  background: var(--sand-deep);
}

.main-wrapper {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  position: relative;
  min-width: 0;
  background: var(--cream);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

.content-scroll {
  flex-grow: 1;
  overflow-y: auto;
  /* Резервируем место под вертикальный скроллбар всегда: иначе при переключении
     вкладок (высокий контент ↔ низкий) ширина области прыгала на ~15px. */
  scrollbar-gutter: stable;
  display: flex;
  flex-direction: column;
}

/* Появление контента при переключении разделов/вкладок:
   0–50% прозрачность 0, затем плавно к 1 (итого 1s). Применяется spa-nav.js. */
@keyframes spa-fade-in { 0%, 50% { opacity: 0; } 100% { opacity: 1; } }
.spa-fade-in { animation: spa-fade-in 1s ease both; }

/* ============================================================================
   NOTIFICATION SYSTEM
   ============================================================================ */

#message-notification-container {
  position: fixed;
  top: 20px;
  right: 20px;
  width: 320px;
  max-width: calc(100vw - 40px);
  z-index: 2000;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}

.message-notification {
  background: var(--white);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.15), 0 0 0 1px rgba(0,0,0,0.05);
  padding: 16px;
  position: relative;
  pointer-events: auto;
  cursor: default;
  animation: notificationSlideIn 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
  border-left: 4px solid var(--warm);
  overflow: hidden;
}

@keyframes notificationSlideIn {
  from { opacity: 0; transform: translateX(50px) scale(0.95); }
  to { opacity: 1; transform: translateX(0) scale(1); }
}

@keyframes notificationSlideOut {
  to { opacity: 0; transform: translateX(50px); }
}

.notification-header { display: flex; align-items: center; margin-bottom: 8px; }

.notification-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--warm-pale);
  color: var(--warm);
  font-size: 0.7rem;
  font-weight: bold;
  display: flex; align-items: center; justify-content: center;
  margin-right: 10px;
  flex-shrink: 0;
}

.notification-sender { font-weight: 600; font-size: 0.9rem; color: var(--ink); flex: 1; }

.notification-message {
  font-size: 0.9rem;
  color: var(--ink-soft);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-right: 20px;
}

.notification-close {
  position: absolute;
  top: 8px; right: 8px;
  background: transparent;
  border: none;
  color: var(--ink-soft);
  cursor: pointer;
  padding: 4px;
  transition: color 0.2s;
  font-size: 1rem;
}

.notification-close:hover { color: var(--ink); }

@media (max-width: 768px) {
  #message-notification-container {
    top: 10px; right: 10px; width: calc(100vw - 20px); max-width: none;
  }
}

/* ============================================================================
   MOBILE RESPONSIVE LAYOUT
   ============================================================================ */

@media (max-width: 992px) {
  .app-layout { display: block; padding: 0; gap: 0; background: var(--cream); }
  .main-wrapper { height: 100vh; width: 100%; border-radius: 0; box-shadow: none; }
}

/* ============================================================================
   GLOBAL MOBILE MENU BUTTON
   Floating hamburger that opens the global app sidebar on mobile.
   Hidden on desktop and on pages that already provide their own toggle
   (messenger has one in its sidebar header).
   ============================================================================ */

.global-mobile-menu-btn {
  display: none;
  position: fixed;
  top: max(env(safe-area-inset-top, 0px), 12px);
  left: 12px;
  z-index: 95;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--white);
  color: var(--ink);
  font-size: 1.05rem;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--shadow-md);
  transition: background 0.15s ease, transform 0.18s ease, opacity 0.2s ease;
}
.global-mobile-menu-btn:hover { background: var(--cream); color: var(--warm); }
.global-mobile-menu-btn:active { transform: scale(0.92); }

@media (max-width: 992px) {
  .global-mobile-menu-btn { display: flex; }
  /* Hide when the sidebar is open (overlay would already eat clicks, but be tidy) */
  .app-layout:has(.sidebar.open) .global-mobile-menu-btn,
  /* Messenger has its own hamburger inside the sidebar header */
  body:has(.messenger-page) .global-mobile-menu-btn { display: none; }

  /* Reserve top space under the floating hamburger so it never overlaps page
     content. Messenger places its own hamburger inside the sidebar header, so
     this padding only applies to other pages. */
  body:not(:has(.messenger-page)) .main-wrapper { padding-top: 60px; }
  body:not(:has(.messenger-page)) .content-scroll { padding-top: 0; }
  /* Drive page has its own internal toolbar — shift it so the hamburger fits. */
  body:not(:has(.messenger-page)) .drive-page { padding-top: 4px; }
}