/* Inter (OFL), self-hosted subsets: cyrillic, cyrillic-ext, latin, latin-ext. */
/* cyrillic-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/static/fonts/inter/UcCo3FwrK3iLTcvvYwYL8g.204df2585b74.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/static/fonts/inter/UcCo3FwrK3iLTcvmYwYL8g.7af197bf2ea6.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/static/fonts/inter/UcCo3FwrK3iLTcvsYwYL8g.084b211fc382.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/static/fonts/inter/UcCo3FwrK3iLTcviYwY.4b73e2ff3024.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    /* Palette mapped into Tailwind (tailwind.config.js) — theme-aware. */
    --ui-white: #ffffff;
    --ui-neutral-50: #fafafa;
    --ui-neutral-100: #f5f5f5;
    --ui-neutral-200: #e5e5e5;
    --ui-neutral-300: #d4d4d4;
    --ui-neutral-400: #a3a3a3;
    --ui-neutral-500: #737373;
    --ui-neutral-600: #525252;
    --ui-neutral-700: #404040;
    --ui-neutral-800: #262626;
    --ui-neutral-900: #171717;
    --ui-primary-50: #fef3c7;
    --ui-primary-100: #fde68a;
    --ui-primary-200: #fcd34d;
    --ui-primary-300: #fbbf24;
    --ui-primary-400: #f59e0b;
    --ui-primary-500: #d97706;
    --ui-primary-600: #b45309;
    --ui-primary-700: #92400e;

    /* Semantic design tokens (J106/J139). Values mirror the Tailwind palette. */
    --ui-color-primary: #b45309;
    --ui-color-primary-hover: #92400e;
    --ui-color-primary-soft: #fef3c7;
    --ui-color-text-strong: #171717;
    --ui-color-text: #262626;
    --ui-color-muted: #737373;
    --ui-color-border: #e5e5e5;
    --ui-color-surface: #ffffff;
    --ui-color-surface-muted: #f5f5f5;
    --ui-color-bg: #fafafa;
    --ui-color-success: #047857;
    --ui-color-success-bg: #f0fdf4;
    --ui-color-success-border: #a7f3d0;
    --ui-color-warning: #92400e;
    --ui-color-warning-bg: #fef3c7;
    --ui-color-warning-border: #fde68a;
    --ui-color-danger: #b91c1c;
    --ui-color-danger-bg: #fef2f2;
    --ui-color-danger-border: #fecaca;
    --ui-color-info: #1d4ed8;
    --ui-color-info-bg: #eff6ff;
    --ui-color-info-border: #bfdbfe;
    --ui-control-sm: 2.25rem;
    --ui-control-md: 2.5rem;
    --ui-control-lg: 2.75rem;
    --ui-focus-ring: 0 0 0 3px rgba(180, 83, 9, 0.25);
    --ui-radius-control: 0.75rem;
    --ui-radius-card: 1rem;
    --ui-radius-sheet: 1.25rem;
    --ui-radius-menu: 0.875rem;
    --ui-radius-pill: 9999px;
    --ui-shadow-card: 0 1px 3px rgb(0 0 0 / 0.06), 0 1px 2px rgb(0 0 0 / 0.04);
    --ui-shadow-popover: 0 12px 32px rgba(0, 0, 0, 0.14);
    --ui-shadow-suggest: 0 12px 32px rgba(0, 0, 0, 0.16);
    --ui-shadow-elevated: 0 4px 12px rgb(0 0 0 / 0.08);
    --ui-duration-fast: 150ms;
    --ui-duration-base: 200ms;
    --ui-duration-sheet: 220ms;
    --ui-duration-slow: 300ms;
    --ui-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
    --ui-ease-out: cubic-bezier(0, 0, 0.58, 1);
}

/* Dark theme (J142): explicit choice or system preference. */
[data-theme="dark"] {
    color-scheme: dark;
    --ui-white: #171717;
    --ui-neutral-50: #0b0b0b;
    --ui-neutral-100: #1a1a1a;
    --ui-neutral-200: #333333;
    --ui-neutral-300: #4d4d4d;
    --ui-neutral-400: #a3a3a3;
    --ui-neutral-500: #a3a3a3;
    --ui-neutral-600: #c4c4c4;
    --ui-neutral-700: #d4d4d4;
    --ui-neutral-800: #e5e5e5;
    --ui-neutral-900: #fafafa;
    --ui-primary-50: #3a2a12;
    --ui-primary-100: #4a3517;
    --ui-primary-200: #6b4a18;
    --ui-primary-300: #8a5a1f;
    --ui-primary-400: #d97706;
    --ui-primary-500: #f59e0b;
    --ui-primary-600: #b45309;
    --ui-primary-700: #fcd34d;
    --ui-color-primary: #b45309;
    --ui-color-primary-hover: #92400e;
    --ui-color-primary-soft: #3a2a12;
    --ui-color-text-strong: #fafafa;
    --ui-color-text: #e5e5e5;
    --ui-color-muted: #a3a3a3;
    --ui-color-border: #333333;
    --ui-color-surface: #171717;
    --ui-color-surface-muted: #262626;
    --ui-color-bg: #0b0b0b;
    --ui-color-success: #6ee7b7;
    --ui-color-success-bg: #0f2a1f;
    --ui-color-success-border: #166534;
    --ui-color-warning: #fcd34d;
    --ui-color-warning-bg: #33260d;
    --ui-color-warning-border: #78350f;
    --ui-color-danger: #fca5a5;
    --ui-color-danger-bg: #3b1515;
    --ui-color-danger-border: #7f1d1d;
    --ui-color-info: #93c5fd;
    --ui-color-info-bg: #172033;
    --ui-color-info-border: #1e3a8a;
    --ui-focus-ring: 0 0 0 3px rgba(245, 158, 11, 0.3);
    --ui-shadow-card: 0 1px 3px rgb(0 0 0 / 0.5), 0 1px 2px rgb(0 0 0 / 0.4);
    --ui-shadow-elevated: 0 4px 12px rgb(0 0 0 / 0.5);
    --ui-shadow-popover: 0 12px 32px rgba(0, 0, 0, 0.6);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;
        --ui-white: #171717;
        --ui-neutral-50: #0b0b0b;
        --ui-neutral-100: #1a1a1a;
        --ui-neutral-200: #333333;
        --ui-neutral-300: #4d4d4d;
        --ui-neutral-400: #a3a3a3;
        --ui-neutral-500: #a3a3a3;
        --ui-neutral-600: #c4c4c4;
        --ui-neutral-700: #d4d4d4;
        --ui-neutral-800: #e5e5e5;
        --ui-neutral-900: #fafafa;
        --ui-primary-50: #3a2a12;
        --ui-primary-100: #4a3517;
        --ui-primary-200: #6b4a18;
        --ui-primary-300: #8a5a1f;
        --ui-primary-400: #d97706;
        --ui-primary-500: #f59e0b;
        --ui-primary-600: #b45309;
        --ui-primary-700: #fcd34d;
        --ui-color-primary: #b45309;
        --ui-color-primary-hover: #92400e;
        --ui-color-primary-soft: #3a2a12;
        --ui-color-text-strong: #fafafa;
        --ui-color-text: #e5e5e5;
        --ui-color-muted: #a3a3a3;
        --ui-color-border: #333333;
        --ui-color-surface: #171717;
        --ui-color-surface-muted: #262626;
        --ui-color-bg: #0b0b0b;
        --ui-color-success: #6ee7b7;
        --ui-color-success-bg: #0f2a1f;
        --ui-color-success-border: #166534;
        --ui-color-warning: #fcd34d;
        --ui-color-warning-bg: #33260d;
        --ui-color-warning-border: #78350f;
        --ui-color-danger: #fca5a5;
        --ui-color-danger-bg: #3b1515;
        --ui-color-danger-border: #7f1d1d;
        --ui-color-info: #93c5fd;
        --ui-color-info-bg: #172033;
        --ui-color-info-border: #1e3a8a;
        --ui-focus-ring: 0 0 0 3px rgba(245, 158, 11, 0.3);
        --ui-shadow-card: 0 1px 3px rgb(0 0 0 / 0.5), 0 1px 2px rgb(0 0 0 / 0.4);
        --ui-shadow-elevated: 0 4px 12px rgb(0 0 0 / 0.5);
        --ui-shadow-popover: 0 12px 32px rgba(0, 0, 0, 0.6);
    }
}

/* Text on colored surfaces stays white even though bg-white is themed. */
.text-white,
.hover\:text-white:hover {
    color: #ffffff !important;
}
.bg-white\/90 { background-color: rgba(255, 255, 255, 0.9); }
.bg-white\/95 { background-color: rgba(255, 255, 255, 0.95); }

[data-theme="dark"] .text-primary-400,
[data-theme="dark"] .text-primary-600 { color: #fbbf24; }
[data-theme="dark"] .bg-neutral-800.text-white {
    background-color: #f5f5f5;
    color: #171717 !important;
}
[data-theme="dark"] .bg-white\/90 { background-color: rgba(23, 23, 23, 0.9); }
[data-theme="dark"] .bg-white\/95 { background-color: rgba(23, 23, 23, 0.95); }
[data-theme="dark"] .bottom-nav { background-color: rgba(23, 23, 23, 0.92); }
[data-theme="dark"] .bg-red-50 { background-color: #3b1515; }
[data-theme="dark"] .bg-red-100 { background-color: #4a1a1a; }
[data-theme="dark"] .bg-green-50 { background-color: #0f2a1f; }
[data-theme="dark"] .bg-green-100 { background-color: #143526; }
[data-theme="dark"] .bg-amber-50 { background-color: #33260d; }
[data-theme="dark"] .bg-blue-50 { background-color: #172033; }
[data-theme="dark"] .bg-purple-50 { background-color: #261a3a; }
[data-theme="dark"] .text-red-600,
[data-theme="dark"] .text-red-700,
[data-theme="dark"] .text-red-800,
[data-theme="dark"] .text-danger { color: #fca5a5; }
[data-theme="dark"] .text-green-700,
[data-theme="dark"] .text-green-800 { color: #6ee7b7; }
[data-theme="dark"] .text-amber-600,
[data-theme="dark"] .text-amber-700,
[data-theme="dark"] .text-amber-800,
[data-theme="dark"] .text-amber-900,
[data-theme="dark"] .text-warning { color: #fcd34d; }
[data-theme="dark"] .text-blue-600,
[data-theme="dark"] .text-blue-700 { color: #93c5fd; }
[data-theme="dark"] .text-purple-600,
[data-theme="dark"] .text-purple-700 { color: #c4b5fd; }
[data-theme="dark"] .text-gray-500 { color: #a3a3a3; }
[data-theme="dark"] .text-gray-600 { color: #c4c4c4; }
[data-theme="dark"] .border-red-200 { border-color: #7f1d1d; }
[data-theme="dark"] .border-green-200 { border-color: #166534; }
[data-theme="dark"] .border-amber-200 { border-color: #78350f; }
[data-theme="dark"] .border-blue-200 { border-color: #1e3a8a; }
[data-theme="dark"] .border-gray-200 { border-color: #333333; }
[data-theme="dark"] .bg-gray-900 { background-color: #0a0a0a; }

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .text-primary-400,
    :root:not([data-theme="light"]) .text-primary-600 { color: #fbbf24; }
    :root:not([data-theme="light"]) .bg-neutral-800.text-white {
        background-color: #f5f5f5;
        color: #171717 !important;
    }
    :root:not([data-theme="light"]) .bg-white\/90 { background-color: rgba(23, 23, 23, 0.9); }
    :root:not([data-theme="light"]) .bg-white\/95 { background-color: rgba(23, 23, 23, 0.95); }
    :root:not([data-theme="light"]) .bottom-nav { background-color: rgba(23, 23, 23, 0.92); }
    :root:not([data-theme="light"]) .bg-red-50 { background-color: #3b1515; }
    :root:not([data-theme="light"]) .bg-red-100 { background-color: #4a1a1a; }
    :root:not([data-theme="light"]) .bg-green-50 { background-color: #0f2a1f; }
    :root:not([data-theme="light"]) .bg-green-100 { background-color: #143526; }
    :root:not([data-theme="light"]) .bg-amber-50 { background-color: #33260d; }
    :root:not([data-theme="light"]) .bg-blue-50 { background-color: #172033; }
    :root:not([data-theme="light"]) .bg-purple-50 { background-color: #261a3a; }
    :root:not([data-theme="light"]) .text-red-600,
    :root:not([data-theme="light"]) .text-red-700,
    :root:not([data-theme="light"]) .text-red-800,
    :root:not([data-theme="light"]) .text-danger { color: #fca5a5; }
    :root:not([data-theme="light"]) .text-green-700,
    :root:not([data-theme="light"]) .text-green-800 { color: #6ee7b7; }
    :root:not([data-theme="light"]) .text-amber-600,
    :root:not([data-theme="light"]) .text-amber-700,
    :root:not([data-theme="light"]) .text-amber-800,
    :root:not([data-theme="light"]) .text-amber-900,
    :root:not([data-theme="light"]) .text-warning { color: #fcd34d; }
    :root:not([data-theme="light"]) .text-blue-600,
    :root:not([data-theme="light"]) .text-blue-700 { color: #93c5fd; }
    :root:not([data-theme="light"]) .text-purple-600,
    :root:not([data-theme="light"]) .text-purple-700 { color: #c4b5fd; }
    :root:not([data-theme="light"]) .text-gray-500 { color: #a3a3a3; }
    :root:not([data-theme="light"]) .text-gray-600 { color: #c4c4c4; }
    :root:not([data-theme="light"]) .border-red-200 { border-color: #7f1d1d; }
    :root:not([data-theme="light"]) .border-green-200 { border-color: #166534; }
    :root:not([data-theme="light"]) .border-amber-200 { border-color: #78350f; }
    :root:not([data-theme="light"]) .border-blue-200 { border-color: #1e3a8a; }
    :root:not([data-theme="light"]) .border-gray-200 { border-color: #333333; }
    :root:not([data-theme="light"]) .bg-gray-900 { background-color: #0a0a0a; }
}

html {
    scrollbar-gutter: stable;
    overflow-x: hidden;
}
body {
    font-family: 'Inter', system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: 1.6;
}

/* ============================= */
/* Typography (компонентный слой) */
/* Дефолты для заголовков без утилит;  */
/* tailwind-классы на элементе всегда  */
/* переопределяют эти значения.        */
/* ============================= */
h1 {
    font-size: 1.875rem;
    line-height: 2.25rem;
    font-weight: 700;
    color: #171717; /* neutral-900 */
    letter-spacing: -0.02em;
}
h2 {
    font-size: 1.5rem;
    line-height: 2rem;
    font-weight: 700;
    color: #171717; /* neutral-900 */
    letter-spacing: -0.01em;
}
h3 {
    font-size: 1.25rem;
    line-height: 1.75rem;
    font-weight: 600;
    color: #262626; /* neutral-800 */
}
/* Мелкий служебный текст (дата, мета-информация) */
.text-meta {
    font-size: 0.8125rem;
    line-height: 1.25rem;
    color: var(--ui-color-muted);
}

/* ============================= */
/* Line clamp                     */
/* ============================= */
.line-clamp-2 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
.line-clamp-1 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
}

/* ============================= */
/* Transitions & micro-animations */
/* ============================= */
.nav-item, .card, .action-icon-btn {
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Компонентный класс карточки (визуальный рефреш):
   bg/border/radius/shadow в одном классе. Значения зеркалируют
   токены tailwind shadow-card / shadow-elevated (tailwind.config.js).
   Утилиты на элементе (shadow-md и т.п.) проигрывают этому классу,
   т.к. app.css подключён после tailwind.min.css — это intended. */
.card {
    background: var(--ui-color-surface);
    border: 1px solid var(--ui-color-border);
    border-radius: var(--ui-radius-card);
    box-shadow: var(--ui-shadow-card);
    transition: box-shadow var(--ui-duration-base) var(--ui-ease-standard);
}
.card:hover {
    box-shadow: var(--ui-shadow-elevated);
}
.action-icon-btn:active {
    transform: scale(0.95);
}
.hover-lift:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
}

/* ============================= */
/* Design system components (J139) */
/* Tokens above; partials in      */
/* templates/core/_ui_*.html      */
/* ============================= */
.ui-card {
    background: var(--ui-color-surface);
    border: 1px solid var(--ui-color-border);
    border-radius: var(--ui-radius-card);
    box-shadow: var(--ui-shadow-card);
    transition: box-shadow var(--ui-duration-base) var(--ui-ease-standard);
}
.ui-card:hover {
    box-shadow: var(--ui-shadow-elevated);
}

.ui-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    height: var(--ui-control-md);
    padding: 0 1.25rem;
    border: 1px solid transparent;
    border-radius: var(--ui-radius-control);
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition:
        background-color var(--ui-duration-fast) var(--ui-ease-standard),
        border-color var(--ui-duration-fast) var(--ui-ease-standard),
        color var(--ui-duration-fast) var(--ui-ease-standard),
        box-shadow var(--ui-duration-fast) var(--ui-ease-standard);
}
.ui-btn:focus-visible {
    outline: 2px solid var(--ui-color-primary);
    outline-offset: 2px;
}
.ui-btn:disabled,
.ui-btn[aria-disabled="true"] {
    opacity: 0.55;
    cursor: not-allowed;
    pointer-events: none;
}
.ui-btn--primary {
    background: var(--ui-color-primary);
    color: #ffffff;
    box-shadow: var(--ui-shadow-card);
}
.ui-btn--primary:hover {
    background: var(--ui-color-primary-hover);
}
.ui-btn--secondary {
    background: var(--ui-color-surface);
    border-color: var(--ui-color-border);
    color: var(--ui-color-text);
}
.ui-btn--secondary:hover {
    background: var(--ui-color-surface-muted);
}
.ui-btn--danger {
    background: var(--ui-color-danger);
    color: #ffffff;
}
.ui-btn--danger:hover {
    background: #991b1b;
}
.ui-btn--ghost {
    background: transparent;
    color: var(--ui-color-muted);
}
.ui-btn--ghost:hover {
    background: var(--ui-color-surface-muted);
    color: var(--ui-color-text);
}
.ui-btn--sm {
    height: var(--ui-control-sm);
    padding: 0 0.875rem;
    font-size: 0.8125rem;
}
.ui-btn--lg {
    height: var(--ui-control-lg);
    padding: 0 1.5rem;
    font-size: 0.9375rem;
}
.ui-btn--block {
    width: 100%;
}
.ui-btn__icon {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
}

.ui-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.125rem 0.625rem;
    border: 1px solid transparent;
    border-radius: var(--ui-radius-pill);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.25rem;
    white-space: nowrap;
}
.ui-badge--neutral {
    background: var(--ui-color-surface-muted);
    color: var(--ui-color-muted);
}
.ui-badge--primary {
    background: var(--ui-color-primary-soft);
    border-color: var(--ui-color-warning-border);
    color: var(--ui-color-warning);
}
.ui-badge--success {
    background: var(--ui-color-success-bg);
    border-color: var(--ui-color-success-border);
    color: var(--ui-color-success);
}
.ui-badge--warning {
    background: var(--ui-color-warning-bg);
    border-color: var(--ui-color-warning-border);
    color: var(--ui-color-warning);
}
.ui-badge--danger {
    background: var(--ui-color-danger-bg);
    border-color: var(--ui-color-danger-border);
    color: var(--ui-color-danger);
}
.ui-badge--info {
    background: var(--ui-color-info-bg);
    border-color: var(--ui-color-info-border);
    color: var(--ui-color-info);
}

.ui-field {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}
.ui-field__label {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--ui-color-text);
}
.ui-field__required {
    color: var(--ui-color-danger);
}
.ui-field__hint {
    font-size: 0.75rem;
    line-height: 1rem;
    color: var(--ui-color-muted);
}
.ui-field__error {
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: var(--ui-color-danger);
}
.ui-field .form-input,
.ui-field input,
.ui-field textarea,
.ui-field select {
    width: 100%;
}

.ui-modal {
    width: min(28rem, calc(100vw - 2rem));
    padding: 0;
    border: 1px solid var(--ui-color-border);
    border-radius: var(--ui-radius-card);
    background: var(--ui-color-surface);
    box-shadow: var(--ui-shadow-popover);
}
.ui-modal::backdrop {
    background: rgba(0, 0, 0, 0.45);
}
.ui-sheet {
    width: 100%;
    padding: 1rem;
    border-radius: var(--ui-radius-sheet) var(--ui-radius-sheet) 0 0;
    background: var(--ui-color-surface);
    box-shadow: var(--ui-shadow-popover);
}

/* ============================= */
/* Input focus styles             */
/* ============================= */
input:focus, textarea:focus, select:focus {
    outline: none;
    border-color: var(--ui-color-primary);
    box-shadow: var(--ui-focus-ring);
}
/* WCAG 2.1: forced-colors (Windows High Contrast) — box-shadow невидим,
   возвращаем стандартный outline (B7) */
@media (forced-colors: active) {
    input:focus, textarea:focus, select:focus,
    a:focus, button:focus, [tabindex]:focus {
        outline: 2px solid CanvasText;
        outline-offset: 2px;
        box-shadow: none;
    }
}

/* ============================= */
/* Bottom navigation              */
/* ============================= */
.bottom-nav {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    background-color: rgba(255, 255, 255, 0.92);
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.06);
    padding-bottom: max(env(safe-area-inset-bottom, 0px), 0.25rem);
}
.bottom-nav a.active {
    color: #d97706;
}
.bottom-nav a.active svg {
    stroke: #d97706;
}

/* ============================= */
/* Action icon buttons (apps)     */
/* ============================= */
.action-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 44px;
    min-height: 44px;
    padding: 8px 12px;
    border-radius: 12px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.2s ease;
    background: var(--ui-color-surface);
    white-space: nowrap;
    font-size: 0.875rem;
    font-weight: 500;
}
.action-icon-btn:hover {
    transform: scale(1.05);
}
.action-icon-btn:active {
    transform: scale(0.95);
}
.action-icon-btn:focus-visible {
    outline: 2px solid #d97706;
    outline-offset: 2px;
}

/* Accept button */
.accept-btn {
    color: #047857;
    border-color: #a7f3d0;
    background: #f0fdf4;
}
.accept-btn:hover {
    background: #047857;
    color: white;
    border-color: #047857;
}

/* Reject button */
.reject-btn {
    color: #b91c1c;
    border-color: #fecaca;
    background: #fef2f2;
}
.reject-btn:hover {
    background: #b91c1c;
    color: white;
    border-color: #b91c1c;
}

/* Reopen button */
.reopen-btn {
    color: #b45309;
    border-color: #bfdbfe;
    background: #eff6ff;
}
.reopen-btn:hover {
    background: #b45309;
    color: white;
    border-color: #b45309;
}

/* Chat button */
.chat-btn {
    color: #b45309;
    border-color: #bfdbfe;
    background: #eff6ff;
}
.chat-btn:hover {
    background: #b45309;
    color: white;
    border-color: #b45309;
}

/* Action button (purple) */
.act-btn {
    color: #6d28d9;
    border-color: #ddd6fe;
    background: #f5f3ff;
}
.act-btn:hover {
    background: #6d28d9;
    color: white;
    border-color: #6d28d9;
}

/* Accepted badge */
.accepted-badge {
    color: #047857;
    border-color: #a7f3d0;
    background: #f0fdf4;
    cursor: default;
}
.accepted-badge:hover { transform: none; }

/* Rejected badge */
.rejected-badge {
    color: #b91c1c;
    border-color: #fecaca;
    background: #fef2f2;
    cursor: default;
}
.rejected-badge:hover { transform: none; }

/* Contact button */
.contact-btn {
    color: #b45309;
    border-color: #fde68a;
    background: #fffbeb;
}
.contact-btn:hover {
    background: #b45309;
    color: white;
    border-color: #b45309;
}

/* ============================= */
/* Toast notifications            */
/* ============================= */
#toast-container {
    position: fixed;
    top: 1rem;
    right: 1rem;
    left: 1rem;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    pointer-events: none;
}
@media (min-width: 768px) {
    #toast-container {
        left: auto;
        right: 1rem;
        width: 360px;
    }
}
.toast {
    pointer-events: auto;
    opacity: 1;
    transform: translateX(0);
    transition: all 0.3s ease;
    border-radius: 16px; /* rounded-2xl */
    padding: 12px 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.875rem;
    font-weight: 500;
}
@keyframes slideIn {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}
@keyframes slideInMobile {
    from { transform: translateY(-100%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}
.animate-slide-in {
    animation: slideIn 0.3s ease forwards;
}
@media (max-width: 767px) {
    .animate-slide-in {
        animation: slideInMobile 0.3s ease forwards;
    }
}

/* ============================= */
/* Status badge                   */
/* ============================= */
.status-badge {
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
    user-select: none;
}
/* Статусы заданий */
.status-open {
    background: #dbeafe;
    color: #1d4ed8;
    border: 1px solid #bfdbfe;
}
.status-in-progress {
    background: #fef3c7;
    color: #92400e;
    border: 1px solid #fde68a;
}
.status-active {
    background: #d1fae5;
    color: #047857;
    border: 1px solid #a7f3d0;
}
.status-completed {
    background: #f3f4f6;
    color: #6b7280;
    border: 1px solid #e5e7eb;
}
.status-cancelled {
    background: #fee2e2;
    color: #dc2626;
    border: 1px solid #fecaca;
}
/* Статусы откликов */
.status-pending {
    background: #fef3c7;
    color: #92400e;
    border: 1px solid #fde68a;
}
.status-accepted {
    background: #d1fae5;
    color: #047857;
    border: 1px solid #a7f3d0;
}
.status-rejected {
    background: #fee2e2;
    color: #dc2626;
    border: 1px solid #fecaca;
}
.status-withdrawn {
    background: #f3f4f6;
    color: #9ca3af;
    border: 1px solid #e5e7eb;
}
.app-card {
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.app-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
}

/* ============================= */
/* Mass actions bar               */
/* ============================= */
#mass-actions-bar {
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    background-color: rgba(255, 255, 255, 0.97);
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.08);
}

/* ============================= */
/* Floating label forms           */
/* ============================= */
.floating-label-group {
    position: relative;
    margin-bottom: 1.25rem;
}
.floating-label-group input,
.floating-label-group textarea,
.floating-label-group select {
    width: 100%;
    padding: 1.25rem 1rem 0.5rem;
    background: #fafafa;
    border: 1px solid #e5e5e5;
    border-radius: 12px;
    font-size: 0.9375rem;
    transition: all 0.2s ease;
}
.floating-label-group input:focus,
.floating-label-group textarea:focus,
.floating-label-group select:focus {
    border-color: var(--ui-color-primary);
    box-shadow: var(--ui-focus-ring);
    background: var(--ui-color-surface);
}
.floating-label-group label {
    position: absolute;
    left: 1rem;
    top: 0.75rem;
    font-size: 0.9375rem;
    color: var(--ui-color-muted);
    transition: all 0.2s ease;
    pointer-events: none;
}
.floating-label-group input:focus ~ label,
.floating-label-group input:not(:placeholder-shown) ~ label,
.floating-label-group textarea:focus ~ label,
.floating-label-group textarea:not(:placeholder-shown) ~ label,
.floating-label-group select:focus ~ label,
.floating-label-group select[data-has-value] ~ label {
    top: 0.35rem;
    font-size: 0.7rem;
    color: #d97706;
}
.floating-label-group .error-text {
    display: none;
    font-size: 0.75rem;
    color: #ef4444;
    margin-top: 0.25rem;
    padding-left: 0.25rem;
}
.floating-label-group.error input,
.floating-label-group.error textarea,
.floating-label-group.error select {
    border-color: #ef4444;
}
.floating-label-group.error .error-text {
    display: flex;
    align-items: center;
    gap: 4px;
}
.floating-label-group.success input,
.floating-label-group.success textarea,
.floating-label-group.success select {
    border-color: #10b981;
}

/* ============================= */
/* Form controls (единый стиль)   */
/* .form-label + .form-input +    */
/* .form-hint / .form-error;      */
/* ошибка поля — .form-input-error */
/* на инпуте + .form-error под ним */
/* ============================= */
.form-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--ui-color-text);
    margin-bottom: 0.375rem;
}
.form-input {
    width: 100%;
    padding: 0.75rem 1rem; /* px-4 py-3 */
    background: var(--ui-color-surface);
    border: 1px solid var(--ui-color-border);
    border-radius: 0.75rem; /* rounded-xl */
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--ui-color-text);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}
.form-input::placeholder {
    color: var(--ui-color-muted);
}
.form-input:focus {
    outline: none;
    border-color: var(--ui-color-primary);
    box-shadow: var(--ui-focus-ring);
    background: var(--ui-color-surface);
}
.form-input:disabled {
    background: var(--ui-color-surface-muted);
    cursor: not-allowed;
    opacity: 0.7;
}
.form-input-error,
.form-input.form-input-error {
    border-color: #ef4444; /* danger */
}
.form-input-error:focus,
.form-input.form-input-error:focus {
    border-color: #ef4444;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2);
}
.form-hint {
    font-size: 0.75rem;
    line-height: 1rem;
    color: var(--ui-color-muted);
    margin-top: 0.375rem;
}
.form-error {
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: var(--ui-color-danger);
    margin-top: 0.375rem;
}

/* ============================= */
/* Global select styling          */
/* ============================= */
select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23737373'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 20px;
    padding-right: 40px;
}

/* ============================= */
/* Skeleton loader                */
/* ============================= */
@keyframes shimmer {
    0% { background-position: -200px 0; }
    100% { background-position: 200px 0; }
}
.skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 400px 100%;
    animation: shimmer 1.5s ease-in-out infinite;
    border-radius: 8px;
}
/* Явный fallback: при reduced-motion — статичный блок без shimmer
   (глобальное F19-правило тоже глушит анимацию, это страховка) */
@media (prefers-reduced-motion: reduce) {
    .skeleton {
        animation: none;
        background: #f0f0f0;
    }
}

/* ============================= */
/* Heart animation                */
/* ============================= */
@keyframes heartBeat {
    0% { transform: scale(1); }
    25% { transform: scale(1.3); }
    50% { transform: scale(1); }
    75% { transform: scale(1.2); }
    100% { transform: scale(1); }
}
.heart-animate {
    animation: heartBeat 0.4s ease-in-out;
}

/* ============================= */
/* Fade in page                   */
/* ============================= */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}
.fade-in {
    /* No `forwards`: a retained transform makes the main element a containing
       block for position:fixed, which broke the mobile filter bottom-sheet. */
    animation: fadeIn 0.3s ease;
}

/* ============================= */
/* Scale in modal                 */
/* ============================= */
@keyframes scaleIn {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}
.animate-scale-in {
    animation: scaleIn 0.2s ease forwards;
}

/* ============================= */
/* Slide up (bottom drawer)       */
/* ============================= */
@keyframes slideUp {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}
.animate-slide-up {
    animation: slideUp 0.3s cubic-bezier(0.32, 0.72, 0, 1) forwards;
}

/* ============================= */
/* Filter drawer (right-side)      */
/* ============================= */
.filter-drawer {
    position: fixed;
    top: 0;
    right: 0;
    height: 100%;
    width: 320px;
    max-width: 85vw;
    z-index: 50;
    background: var(--ui-color-surface);
    box-shadow: -8px 0 32px rgba(0, 0, 0, 0.12);
    transform: translateX(100%);
    transition: transform 0.3s ease;
    overflow-y: auto;
}
.filter-drawer.open {
    transform: translateX(0);
}

/* ============================= */
/* Payment modal                  */
/* ============================= */
.modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 70;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
.modal-content {
    background: var(--ui-color-surface);
    border-radius: 20px;
    padding: 1.5rem;
    max-width: 440px;
    width: 100%;
    animation: scaleIn 0.2s ease forwards;
}

/* ============================= */
/* Touch-friendly                 */
/* ============================= */
.touch-target {
    min-width: 44px;
    min-height: 44px;
}

/* ============================= */
/* Loading overlay spinner        */
/* ============================= */
@keyframes spin { to { transform: rotate(360deg); } }

/* ============================= */
/* F4: Button loading state       */
/* ============================= */
.btn-loading {
    position: relative;
    pointer-events: none;
    opacity: 0.7;
}
.btn-loading::after {
    content: '';
    position: absolute;
    width: 1em;
    height: 1em;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
    right: 0.5em;
    top: 50%;
    transform: translateY(-50%);
}

/* ============================= */
/* F19: Reduced motion support    */
/* ============================= */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ============================= */
/* Color scheme: приложение ТОЛЬКО светлое.
   Принудительно color-scheme: light, чтобы нативные виджеты форм
   (пикер datetime-local, его текст-значение, календарь) рендерились в светлой
   схеме (тёмный текст на белом поле) независимо от темы ОС.
   Раньше декларация color-scheme: dark без реальной тёмной темы делала значение
   даты/времени белым-на-белом для пользователей с тёмной темой ОС. */
/* ============================= */
:root {
    color-scheme: light;
}

/* ============================= */
/* Progress bar (мастера форм)    */
/* ============================= */
progress {
    accent-color: #d97706;
    border: none;
    border-radius: 9999px;
    background: #e5e5e5;
    overflow: hidden;
}
progress::-webkit-progress-bar {
    background: #e5e5e5;
    border-radius: 9999px;
}
progress::-webkit-progress-value {
    background: #d97706;
    border-radius: 9999px;
    transition: width 0.3s ease;
}
progress::-moz-progress-bar {
    background: #d97706;
    border-radius: 9999px;
}

/* Utilities missing from the purged Tailwind build (newer templates use them). */
.w-36 { width: 9rem; }
.w-44 { width: 11rem; }
.hover\:bg-green-50:hover { background-color: #f0fdf4; }
.hover\:bg-red-50:hover { background-color: #fef2f2; }
.-mb-px { margin-bottom: -1px; }
.min-w-\[180px\] { min-width: 180px; }
.border-amber-200 { border-color: #fde68a; }
@media (min-width: 640px) {
    .sm\:w-64 { width: 16rem; }
}
/* Native report dialog (J056) */
.report-dialog::backdrop {
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(2px);
}

/* Accessible focus ring for keyboard users (J059) */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 3px solid rgba(217, 119, 6, 0.55);
    outline-offset: 2px;
    border-radius: 6px;
}

/* Metadata contrast (J064): neutral-400 (#a3a3a3) is ~2.5:1 on white and fails
   WCAG AA for the timestamps, counters, hints and secondary labels that use it.
   neutral-500 (#737373) is 4.74:1. Decorative icons also become slightly
   clearer, which is safe: they are aria-hidden and not the only signal. */
.text-neutral-400 {
    color: var(--ui-color-muted);
}

/* Secondary card actions (J064): native details/summary keeps the menu usable
   without JS. The panel is anchored to the summary and stays above cards. */
.action-menu > summary {
    list-style: none;
    cursor: pointer;
}
.action-menu > summary::-webkit-details-marker {
    display: none;
}
.action-menu[open] > summary {
    background-color: #f5f5f5;
}
.action-menu-panel {
    position: absolute;
    right: 0;
    top: calc(100% + 0.25rem);
    z-index: 40;
    min-width: 11rem;
    padding: 0.375rem;
    border: 1px solid var(--ui-color-border);
    border-radius: var(--ui-radius-menu);
    background: var(--ui-color-surface);
    box-shadow: var(--ui-shadow-popover);
}
.action-menu-item {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 0.75rem;
    border-radius: 0.5rem;
    color: #404040;
    font-size: 0.875rem;
    text-align: left;
    white-space: nowrap;
}
.action-menu-item:hover,
.action-menu-item:focus-visible {
    background: #f5f5f5;
}
.action-menu-item.is-danger {
    color: #b91c1c;
}
.action-menu-item.is-danger:hover {
    background: #fef2f2;
}

/* Mobile filters bottom-sheet (J065). The same form is reused, so filters,
   CSRF-free GET semantics and desktop layout stay identical. */
.filters-backdrop {
    position: fixed;
    inset: 0;
    z-index: 60;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}
@media (max-width: 639px) {
    /* JS adds .filters-collapsed only after it binds the sheet controls.
       Without JS the form stays in flow, so filters never disappear. */
    #filters-form.filters-collapsed:not(.filters-sheet) {
        display: none;
    }
    #filters-form.filters-sheet {
        display: flex;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 70;
        width: auto;
        max-height: 85vh;
        margin: 0;
        padding: 1rem 1rem 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
        overflow-y: auto;
        overscroll-behavior: contain;
        border-radius: var(--ui-radius-sheet) var(--ui-radius-sheet) 0 0;
        background: var(--ui-color-surface);
        box-shadow: 0 -16px 40px rgba(0, 0, 0, 0.18);
        animation: filter-sheet-in var(--ui-duration-sheet) var(--ui-ease-out);
    }
    #filters-form.filters-sheet > label {
        width: 100%;
    }
    #filters-form.filters-sheet input[type="number"],
    #filters-form.filters-sheet select {
        width: 100%;
    }
    #filters-form.filters-sheet details > div {
        position: static;
        width: 100%;
        max-height: 14rem;
        margin-top: 0.25rem;
        box-shadow: none;
    }
    #filters-form.filters-sheet .filter-sheet-actions {
        position: sticky;
        bottom: 0;
        z-index: 1;
    }
}
@keyframes filter-sheet-in {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

/* Address suggestions and explicit confirmation (J067). */
.geo-suggest {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 0.25rem);
    z-index: 40;
    max-height: 14rem;
    overflow-y: auto;
    padding: 0.25rem;
    border: 1px solid var(--ui-color-border);
    border-radius: var(--ui-radius-control);
    background: var(--ui-color-surface);
    box-shadow: var(--ui-shadow-suggest);
}
.geo-suggest[hidden] {
    display: none;
}
.geo-suggest-item {
    display: block;
    width: 100%;
    padding: 0.55rem 0.65rem;
    border-radius: 0.5rem;
    color: #404040;
    font-size: 0.875rem;
    line-height: 1.35;
    text-align: left;
}
.geo-suggest-item:hover,
.geo-suggest-item.is-active,
.geo-suggest-item:focus-visible {
    background: #f5f5f5;
}
.geo-confirm-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}
.geo-confirm-box.hidden {
    display: none;
}


.hover\:bg-amber-700:hover { background-color: #b45309; }

/* PWA install help dialog (J075) */
#install-help::backdrop {
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(2px);
}

/* Mobile bulk actions stay visible above the bottom nav (J081). */
@media (max-width: 639px) {
    .bulk-toolbar {
        position: sticky;
        top: 3.5rem;
        z-index: 20;
        background: #fafafa;
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
    }
}

/* Mobile job action menu as a bottom sheet (J090). */
@media (max-width: 639px) {
    .action-menu-sheet {
        position: fixed;
        left: 0.75rem;
        right: 0.75rem;
        bottom: 4.5rem;
        top: auto;
        width: auto;
        max-height: 60vh;
        overflow-y: auto;
        z-index: 60;
    }
}

/* Jobs map (J161): collapsible block below filters, lazy Yandex Maps. */
.jobs-map-block {
    position: relative;
    margin-bottom: 1rem;
}
.jobs-map-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}
.jobs-map-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--ui-color-text);
}
.jobs-map-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5rem;
    height: 1.25rem;
    padding: 0 0.4rem;
    border-radius: var(--ui-radius-pill);
    background: var(--ui-color-surface-muted);
    color: var(--ui-color-text);
    font-size: 0.7rem;
    font-weight: 700;
}
.jobs-map-actions {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}
.jobs-map-btn,
.jobs-map-icon-btn,
.jobs-map-toggle {
    border: 1px solid var(--ui-color-border);
    background: var(--ui-color-surface);
    color: var(--ui-color-text);
    transition: background 160ms ease, border-color 160ms ease;
}
.jobs-map-btn {
    display: inline-flex;
    align-items: center;
    height: 2.25rem;
    padding: 0 0.75rem;
    border-radius: var(--ui-radius-control);
    font-size: 0.75rem;
    font-weight: 600;
}
.jobs-map-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--ui-radius-control);
}
.jobs-map-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    height: 2.25rem;
    padding: 0 0.75rem;
    border-radius: var(--ui-radius-pill);
    font-size: 0.75rem;
    font-weight: 600;
}
.jobs-map-toggle.is-active {
    background: var(--ui-color-primary-soft);
    border-color: var(--ui-color-primary);
    color: var(--ui-color-primary);
}
.jobs-map-btn:hover,
.jobs-map-icon-btn:hover,
.jobs-map-toggle:hover {
    background: var(--ui-color-surface-muted);
}
.jobs-map-canvas {
    width: 100%;
    height: 320px;
    overflow: hidden;
    border: 1px solid var(--ui-color-border);
    border-radius: var(--ui-radius-card);
    background: var(--ui-color-surface-muted);
}
.jobs-map-note {
    margin-top: 0.5rem;
    font-size: 0.75rem;
    color: var(--ui-color-text);
    opacity: 0.65;
}
.jobs-map-preview {
    position: absolute;
    left: 0.75rem;
    right: 0.75rem;
    bottom: 0.75rem;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.65rem 0.75rem;
    border: 1px solid var(--ui-color-border);
    border-radius: var(--ui-radius-control);
    background: var(--ui-color-surface);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
}
.jobs-map-preview.hidden {
    display: none;
}
.jobs-map-preview-body {
    min-width: 0;
    flex: 1;
}
.jobs-map-preview-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--ui-color-text-strong);
}
.jobs-map-preview-meta {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-top: 0.15rem;
    font-size: 0.75rem;
    color: var(--ui-color-text);
    opacity: 0.7;
}
.jobs-map-preview-link {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    height: 2.25rem;
    padding: 0 0.85rem;
    border-radius: var(--ui-radius-control);
    background: var(--ui-color-primary);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    text-decoration: none;
}
.jobs-map-preview-link:hover {
    background: var(--ui-color-primary-hover);
}
.jobs-map-preview-close {
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    border-radius: var(--ui-radius-control);
    color: var(--ui-color-text);
    font-size: 1.25rem;
    line-height: 1;
}
.jobs-map-preview-close:hover {
    background: var(--ui-color-surface-muted);
}
.jobs-map-block.is-fullscreen {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: calc(0.75rem + env(safe-area-inset-top)) calc(0.75rem + env(safe-area-inset-right)) calc(0.75rem + env(safe-area-inset-bottom)) calc(0.75rem + env(safe-area-inset-left));
    background: var(--ui-color-surface);
}
.jobs-map-block.is-fullscreen .jobs-map-canvas {
    flex: 1;
    height: auto;
    min-height: 0;
    border-radius: 0;
}
.jobs-map-block.is-fullscreen .jobs-map-note {
    display: none;
}
.jobs-map-block.is-fullscreen .jobs-map-icon-expand {
    display: none;
}
.jobs-map-block.is-fullscreen .jobs-map-icon-compress {
    display: inline;
}
body.jobs-map-lock {
    overflow: hidden;
}
@media (max-width: 767px) {
    .jobs-map-canvas {
        height: 300px;
    }
    .jobs-map-toolbar {
        align-items: flex-start;
    }
    .jobs-map-btn {
        padding: 0 0.6rem;
    }
}


/* Header on narrow phones: keep every action visible; the logo mark remains. */
@media (max-width: 420px) {
    .header-brand-name {
        display: none;
    }
}