/* =============================================================================
 * ПоКурсу — main.css
 * Современная дизайн-система поверх Framework7 v8 (CSS-only).
 * F7 используется как базовый разметочный слой (.page / .list / .block), но
 * весь визуал — цвета, типографика, тени, радиусы — наш собственный.
 * ============================================================================= */

/* ===== 1. Design tokens ================================================== */
:root {
    /* Brand — indigo → violet */
    --pk-primary-50:  #eef2ff;
    --pk-primary-100: #e0e7ff;
    --pk-primary-200: #c7d2fe;
    --pk-primary-300: #a5b4fc;
    --pk-primary-400: #818cf8;
    --pk-primary-500: #6366f1;
    --pk-primary-600: #4f46e5;
    --pk-primary-700: #4338ca;
    --pk-primary-800: #3730a3;

    --pk-accent-500:  #f59e0b;
    --pk-accent-600:  #d97706;

    --pk-success-50:  #ecfdf5;
    --pk-success-500: #10b981;
    --pk-success-600: #059669;
    --pk-success-700: #047857;

    --pk-danger-50:   #fef2f2;
    --pk-danger-500:  #ef4444;
    --pk-danger-600:  #dc2626;
    --pk-danger-700:  #b91c1c;

    --pk-warning-50:  #fffbeb;
    --pk-warning-500: #f59e0b;
    --pk-warning-700: #b45309;

    /* Neutral (slate) */
    --pk-gray-50:  #f8fafc;
    --pk-gray-100: #f1f5f9;
    --pk-gray-150: #ebeff5;
    --pk-gray-200: #e2e8f0;
    --pk-gray-300: #cbd5e1;
    --pk-gray-400: #94a3b8;
    --pk-gray-500: #64748b;
    --pk-gray-600: #475569;
    --pk-gray-700: #334155;
    --pk-gray-800: #1e293b;
    --pk-gray-900: #0f172a;

    /* Neutral — алиасы на gray-шкалу. Исторически встречаются в нескольких
     * местах вместо --pk-gray-* и, если не определить, fall-back в transparent. */
    --pk-neutral-50:  var(--pk-gray-50);
    --pk-neutral-100: var(--pk-gray-100);
    --pk-neutral-200: var(--pk-gray-200);
    --pk-neutral-300: var(--pk-gray-300);
    --pk-neutral-400: var(--pk-gray-400);
    --pk-neutral-500: var(--pk-gray-500);
    --pk-neutral-600: var(--pk-gray-600);
    --pk-neutral-700: var(--pk-gray-700);
    --pk-neutral-800: var(--pk-gray-800);
    --pk-neutral-900: var(--pk-gray-900);

    /* Semantic */
    --pk-primary:      var(--pk-primary-500);
    --pk-primary-dark: var(--pk-primary-600);
    --pk-bg:           #f4f5fb;
    --pk-bg-page:      #f4f5fb;
    --pk-bg-elevated:  #ffffff;
    --pk-bg-subtle:    var(--pk-gray-100);
    --pk-text:         var(--pk-gray-900);
    --pk-text-strong:  var(--pk-gray-900);
    --pk-text-muted:   var(--pk-gray-500);
    --pk-text-faint:   var(--pk-gray-400);
    --pk-border:       var(--pk-gray-200);
    --pk-border-strong:var(--pk-gray-300);
    --pk-muted:        var(--pk-gray-500);  /* legacy alias */

    /* Gradients */
    --pk-grad-primary: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #a855f7 100%);
    --pk-grad-primary-soft: linear-gradient(135deg, rgba(99,102,241,0.12) 0%, rgba(168,85,247,0.12) 100%);
    --pk-grad-hero:    linear-gradient(135deg, #4f46e5 0%, #7c3aed 50%, #c026d3 100%);
    --pk-grad-accent:  linear-gradient(135deg, #f59e0b 0%, #f97316 100%);

    /* Shadows */
    --pk-shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
    --pk-shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
    --pk-shadow-md: 0 4px 10px -2px rgba(15, 23, 42, 0.08), 0 2px 4px -2px rgba(15, 23, 42, 0.04);
    --pk-shadow-lg: 0 12px 24px -6px rgba(15, 23, 42, 0.12), 0 4px 8px -4px rgba(15, 23, 42, 0.06);
    --pk-shadow-xl: 0 24px 40px -12px rgba(15, 23, 42, 0.16), 0 8px 16px -8px rgba(15, 23, 42, 0.08);
    --pk-shadow-primary: 0 10px 24px -6px rgba(99, 102, 241, 0.45), 0 4px 10px -4px rgba(99, 102, 241, 0.28);
    --pk-shadow-primary-sm: 0 4px 10px -2px rgba(99, 102, 241, 0.35);
    --pk-shadow-ring: 0 0 0 4px rgba(99, 102, 241, 0.18);

    /* Radii */
    --pk-r-xs: 6px;
    --pk-r-sm: 10px;
    --pk-r-md: 14px;
    --pk-r-lg: 18px;
    --pk-r-xl: 22px;
    --pk-r-2xl: 28px;
    --pk-r-pill: 999px;

    /* Spacing */
    --pk-s-1: 4px;
    --pk-s-2: 8px;
    --pk-s-3: 12px;
    --pk-s-4: 16px;
    --pk-s-5: 20px;
    --pk-s-6: 24px;
    --pk-s-8: 32px;
    --pk-s-10: 40px;

    /* Layout */
    --pk-navbar-height: 58px;
    --pk-tabbar-height: 68px;
    --pk-tabbar-bottom-gap: 12px;
    --pk-content-max-width: 720px;

    /* Motion */
    --pk-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --pk-t-fast: 120ms var(--pk-ease);
    --pk-t-base: 220ms var(--pk-ease);

    /* Typography */
    --pk-font: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI',
               system-ui, 'Helvetica Neue', sans-serif;

    /* Surfaces — реиспользуемые «стёкла» и градиенты. Переопределяются в dark. */
    --pk-surface-glass: rgba(255, 255, 255, 0.88);
    --pk-surface-glass-strong: rgba(255, 255, 255, 0.95);
    --pk-surface-glass-soft: rgba(255, 255, 255, 0.72);
    --pk-surface-card: #ffffff;
    --pk-surface-card-alt: #ffffff;
    --pk-surface-form-head: linear-gradient(180deg, #fcfcff 0%, #ffffff 100%);
    --pk-border-soft: var(--pk-gray-100);

    /* Default color-scheme — влияет на scrollbars и нативные контролы. */
    color-scheme: light;
}

/* =============================================================================
 * Dark theme.
 * Активируется: (1) при явном выборе `<html data-theme="dark">`; (2) при
 * «auto» + системной тёмной — см. inline-скрипт в base.html, который ставит
 * `data-theme` по matchMedia. Поэтому тут — один селектор, без @media.
 * ============================================================================= */
:root[data-theme="dark"] {
    color-scheme: dark;

    /* Инвертированная gray-шкала. Многие компоненты используют
     * var(--pk-gray-700) для текста, var(--pk-gray-200) для границ и т.д. —
     * без переопределения они остаются «светло-темными» на тёмном фоне
     * и становятся нечитаемыми. Берём ту же палитру slate, но разворачиваем. */
    --pk-gray-50:  #0b1220;
    --pk-gray-100: #141c2d;
    --pk-gray-150: #1a2236;
    --pk-gray-200: #263249;
    --pk-gray-300: #334155;
    --pk-gray-400: #475569;
    --pk-gray-500: #94a3b8;
    --pk-gray-600: #cbd5e1;
    --pk-gray-700: #e2e8f0;
    --pk-gray-800: #f1f5f9;
    --pk-gray-900: #f8fafc;

    /* Semantic overrides (сами token'ы цветов-шкал — остаются). */
    --pk-bg:           #0b1220;
    --pk-bg-page:      #0b1220;
    --pk-bg-elevated:  #141c2d;
    --pk-bg-subtle:    #1b2437;
    --pk-text:         #e6ebf5;
    --pk-text-strong:  #f8fafc;
    --pk-text-muted:   #94a3b8;
    --pk-text-faint:   #64748b;
    --pk-border:       #263249;
    --pk-border-strong:#334155;
    --pk-border-soft:  #1c2638;

    /* Surfaces */
    --pk-surface-glass:        rgba(20, 28, 45, 0.78);
    --pk-surface-glass-strong: rgba(20, 28, 45, 0.88);
    --pk-surface-glass-soft:   rgba(11, 18, 32, 0.55);
    --pk-surface-card:         #141c2d;
    --pk-surface-card-alt:     #1b2437;
    --pk-surface-form-head:    linear-gradient(180deg, #1b2437 0%, #141c2d 100%);

    /* Tinted *-50 слои (используются как подложки чипов, success/danger банеров). */
    --pk-primary-50: rgba(99, 102, 241, 0.14);
    --pk-success-50: rgba(16, 185, 129, 0.14);
    --pk-danger-50:  rgba(239, 68, 68, 0.14);
    --pk-warning-50: rgba(245, 158, 11, 0.14);

    /* Тени: в тёмном — глубже чёрный. */
    --pk-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.35);
    --pk-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.3);
    --pk-shadow-md: 0 4px 10px -2px rgba(0, 0, 0, 0.55), 0 2px 4px -2px rgba(0, 0, 0, 0.35);
    --pk-shadow-lg: 0 12px 24px -6px rgba(0, 0, 0, 0.6), 0 4px 8px -4px rgba(0, 0, 0, 0.4);
    --pk-shadow-xl: 0 24px 40px -12px rgba(0, 0, 0, 0.7), 0 8px 16px -8px rgba(0, 0, 0, 0.5);
    --pk-shadow-primary: 0 10px 24px -6px rgba(99, 102, 241, 0.55), 0 4px 10px -4px rgba(99, 102, 241, 0.35);
    --pk-shadow-primary-sm: 0 4px 10px -2px rgba(99, 102, 241, 0.45);
    --pk-shadow-ring: 0 0 0 4px rgba(99, 102, 241, 0.3);
}

/* ===== 2. Base =========================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }

body {
    font-family: var(--pk-font);
    font-size: 15px;
    line-height: 1.5;
    color: var(--pk-text);
    background: var(--pk-bg);
    margin: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    letter-spacing: -0.01em;
}

h1, h2, h3, h4, h5 {
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--pk-text-strong);
    margin: 0 0 var(--pk-s-2);
    line-height: 1.25;
}
h1 { font-size: 28px; }
h2 { font-size: 22px; }
h3 { font-size: 18px; }
h4 { font-size: 16px; }

p { margin: 0 0 var(--pk-s-3); }
p:last-child { margin-bottom: 0; }

a { color: var(--pk-primary-600); text-decoration: none; transition: color var(--pk-t-fast); }
a:hover { color: var(--pk-primary-700); }

strong, b { font-weight: 600; color: var(--pk-text-strong); }
small { font-size: 12px; color: var(--pk-text-muted); }

/* ===== 3. F7 layout overrides ============================================ */
/* Phase 68: используем `100dvh` (dynamic viewport height) вместо `100vh`.
   `100vh` = ВСЕГДА полная высота viewport'а ВКЛЮЧАЯ скрытую под browser-
   chrome'ом часть → контент уходит под URL bar. `100dvh` адаптируется
   автоматически. Fallback на `100vh` для старых браузеров (< 2023). */
#app, .views, .view, .page, .page-content {
    min-height: 100vh;
    min-height: 100dvh;
    background: var(--pk-bg);
}
.view, .page { overflow: visible; }

.page-content {
    padding-top: calc(var(--pk-navbar-height) + var(--pk-s-3));
    /* Phase 68: добавили var(--pk-vv-bottom) — высота browser-chrome'a
       внизу (например URL bar Chrome Android). Без этого контент мог уходить
       под tabbar когда tabbar был lifted up из-за browser-chrome. */
    padding-bottom: calc(var(--pk-tabbar-height)
                        + var(--pk-tabbar-bottom-gap) * 2
                        + env(safe-area-inset-bottom, 0px)
                        + var(--pk-vv-bottom, 0px)
                        + var(--pk-s-4));
    max-width: var(--pk-content-max-width);
    margin: 0 auto;
}
.page-content > *:first-child { margin-top: 0; }

/* ===== 4. Navbar — glass ================================================ */
.navbar {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: var(--pk-navbar-height);
    z-index: 600;
    background: var(--pk-surface-glass-soft);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 1px solid var(--pk-border-soft);
    color: var(--pk-text);
}
.navbar-bg { display: none; }

.navbar-inner {
    display: flex;
    align-items: center;
    height: 100%;
    padding: 0 var(--pk-s-4);
    max-width: var(--pk-content-max-width);
    margin: 0 auto;
}
.navbar-inner .left,
.navbar-inner .right {
    flex: 0 0 auto;
    min-width: 44px;
    display: flex;
    align-items: center;
}
.navbar-inner .right { justify-content: flex-end; }

.navbar-inner .title {
    flex: 1 1 auto;
    min-width: 0;  /* allow brand to shrink without overflow ellipsis trick */
    text-align: center;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--pk-text-strong);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--pk-s-2);
}

.navbar .pk-brand {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: var(--pk-text-strong);
}
.navbar .pk-brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px; height: 30px;
    border-radius: 10px;
    background: var(--pk-grad-primary);
    color: #fff;
    box-shadow: var(--pk-shadow-primary-sm);
    font-size: 16px;
}
.navbar .pk-brand-name {
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.02em;
    white-space: nowrap;
}

/* На узких mobile-экранах сжимаем правый блок navbar'а, чтобы бренд
   («ПоКурсу») не обрезался. Sign-in кнопка СКРЫТА в navbar (она
   уже есть в bottom-tab bar — дублирование). Skрываем chevron на
   lang-кнопке, ужимаем gap'ы и оставляем компактные иконки. */
@media (max-width: 480px) {
    .navbar-inner { padding: 0 var(--pk-s-3); }
    .pk-navbar-right { gap: 4px; }
    .pk-lang-btn { padding: 4px 6px; gap: 3px; }
    .pk-lang-btn-chev { display: none; }
    .navbar .icon-only { padding: 4px; }
    .navbar .icon-only .icon { font-size: 22px; }
    .pk-theme-btn { width: 32px; height: 32px; }
    .navbar .pk-brand-mark { width: 26px; height: 26px; font-size: 14px; }
    .navbar .pk-brand-name { font-size: 16px; }
    .navbar .pk-brand { gap: 6px; }
    /* Sign-in (link-primary) скрываем — он есть в bottom-tab bar.
       Освобождаем ~80px для бренда «ПоКурсу».
       `!important` нужен из-за порядка cascades — `.navbar .link` блок
       идёт позже в файле и имеет ту же specificity. */
    .navbar .link-primary { display: none !important; }
    .navbar-inner .right { min-width: 0; }
    .navbar-inner .left { min-width: 0; }
}
@media (max-width: 360px) {
    /* Ультра-узкие экраны: бренд оставляем только иконку, имя скрываем. */
    .navbar .pk-brand-name { display: none; }
}

.navbar .link {
    color: var(--pk-text-strong);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 15px;
    font-weight: 500;
    padding: 6px 4px;
    border-radius: var(--pk-r-sm);
    transition: background var(--pk-t-fast), color var(--pk-t-fast);
}
.navbar .link:hover,
.navbar .link:active { background: var(--pk-gray-100); color: var(--pk-primary-600); }
.navbar .link .icon { font-size: 20px; color: var(--pk-gray-700); }

.navbar .link-primary {
    background: var(--pk-primary-50);
    color: var(--pk-primary-700);
    padding: 6px 12px;
    font-weight: 600;
}
.navbar .link-primary:hover { background: var(--pk-primary-100); }

.navbar .icon-only { padding: 6px; }
.navbar .icon-only .icon { font-size: 24px; color: var(--pk-gray-700); }

.navbar .back-link { color: var(--pk-gray-700); }
.navbar .back-link .icon { font-size: 22px; }

/* ===== 5. Bottom tabbar — floating pill =================================
 * Phase 68: cross-browser bottom-bar visibility.
 * Проблема: на Chrome Android / Yandex Browser нижняя URL-bar встроена в
 * нижнюю часть экрана и **перекрывает** наш .pk-bottom-bar. iOS Safari при
 * адресной строке внизу — то же самое. `env(safe-area-inset-bottom)`
 * покрывает только OS-уровень (iPhone notch / home-indicator), но не
 * browser-chrome.
 *
 * Решение в два слоя:
 * 1. CSS: использовать `100dvh` (dynamic viewport height) — современная
 *    единица, которая АВТОМАТИЧЕСКИ исключает динамический browser-chrome.
 *    Для bottom-offset берём max(env safe-area, базовый 12px) + JS-fix.
 * 2. JS (PkBottomBarSafe в main.js): отслеживаем `visualViewport.height` vs
 *    `window.innerHeight`. Разница = высота browser-chrome'a внизу. Пишем
 *    её в `--pk-vv-bottom`, который входит в `bottom: calc(...)`.
 */
.pk-bottom-bar {
    position: fixed;
    left: 0; right: 0;
    /* var(--pk-vv-bottom) обновляется из JS при изменении visualViewport. */
    bottom: calc(
        env(safe-area-inset-bottom, 0px)
      + var(--pk-vv-bottom, 0px)
      + var(--pk-tabbar-bottom-gap)
    );
    z-index: 600;
    padding: 0 var(--pk-s-3);
    pointer-events: none;
    /* Framework7 задаёт .toolbar { background: #eaeef9; }, из-за чего
     * на широком экране за pill'ом видна светлая полоса. Мы хотим, чтобы
     * сам «бар» был прозрачным — visible-элементом служит внутренний pill
     * (.toolbar-inner). */
    background: transparent;
    /* smooth transition when browser chrome appears/disappears (URL bar
       hide-on-scroll). */
    transition: bottom 0.18s ease-out;
}

.pk-bottom-bar .toolbar-inner {
    pointer-events: auto;
    display: flex;
    height: var(--pk-tabbar-height);
    max-width: 480px;
    margin: 0 auto;
    padding: 6px;
    background: var(--pk-surface-glass);
    backdrop-filter: saturate(180%) blur(24px);
    -webkit-backdrop-filter: saturate(180%) blur(24px);
    border: 1px solid var(--pk-border-soft);
    border-radius: var(--pk-r-xl);
    box-shadow: var(--pk-shadow-lg);
    align-items: stretch;
    gap: 2px;
    position: relative;
}

.pk-tab-link {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 6px 4px;
    text-decoration: none;
    color: var(--pk-gray-500);
    font-size: 11px;
    font-weight: 500;
    line-height: 1.2;
    background: transparent;
    border-radius: var(--pk-r-md);
    transition: color var(--pk-t-fast), background var(--pk-t-fast), transform var(--pk-t-fast);
}
.pk-tab-link .icon { font-size: 22px; transition: transform var(--pk-t-fast); }
.pk-tab-link:hover { color: var(--pk-primary-600); background: var(--pk-primary-50); }
.pk-tab-link:active { transform: scale(0.96); }

/* Badge-bearing icon wrapper (chat/notifications counters in bottom nav). */
.pk-tab-icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.pk-nav-badge {
    position: absolute;
    top: -6px;
    right: -10px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, #f43f5e 0%, #e11d48 100%);
    border: 2px solid var(--pk-surface);
    border-radius: 999px;
    line-height: 1;
    letter-spacing: -.02em;
    box-shadow: 0 2px 4px -1px rgba(225, 29, 72, .45);
    pointer-events: none;
}

.pk-tab-link.is-active {
    color: var(--pk-primary-700);
    font-weight: 600;
    background: var(--pk-primary-50);
}
.pk-tab-link.is-active .icon { color: var(--pk-primary-600); }

/* FAB — по центру таббара */
.pk-tab-link-primary {
    flex: 0 0 auto;
    width: 58px;
    margin: -22px 2px 0;
    padding: 0;
    border-radius: var(--pk-r-pill);
    background: var(--pk-grad-primary);
    color: #fff !important;
    box-shadow: var(--pk-shadow-primary);
}
.pk-tab-link-primary:hover {
    background: var(--pk-grad-primary);
    color: #fff !important;
    transform: translateY(-2px);
    box-shadow: 0 16px 32px -8px rgba(99,102,241,0.55);
}
.pk-tab-link-primary:active { transform: scale(0.96); }
.pk-tab-link-primary .icon { font-size: 30px; color: #fff; }
.pk-tab-link-primary .tabbar-label { display: none; }

/* ===== 6. Blocks & titles ================================================ */
.block-title {
    font-size: 12px;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--pk-text-muted);
    margin: var(--pk-s-6) var(--pk-s-4) var(--pk-s-2);
}
.block-title:first-child { margin-top: var(--pk-s-3); }

.block { padding: var(--pk-s-3) var(--pk-s-4); }
.block p { margin: 0 0 var(--pk-s-2); }

.block.inset,
.block-strong.inset,
.list.inset {
    margin: 0 var(--pk-s-4) var(--pk-s-4);
    border-radius: var(--pk-r-lg);
    background: var(--pk-bg-elevated);
    overflow: hidden;
}
.block-strong.inset {
    padding: var(--pk-s-4);
    border: 1px solid var(--pk-border);
    box-shadow: var(--pk-shadow-sm);
}
.list.inset {
    border: 1px solid var(--pk-border);
    box-shadow: var(--pk-shadow-sm);
}

/* ===== 7. List / rows ==================================================== */
.list ul { list-style: none; margin: 0; padding: 0; background: transparent; }
.list > ul > li + li { border-top: 1px solid var(--pk-border); }

.item-link,
.item-content {
    display: flex;
    padding: 14px 16px;
    color: var(--pk-text);
    text-decoration: none;
    gap: 12px;
    align-items: center;
    transition: background var(--pk-t-fast);
}
.item-link:hover,
.item-link:active { background: var(--pk-gray-100); color: var(--pk-text); }

.item-media {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px; height: 40px;
    border-radius: var(--pk-r-md);
    background: var(--pk-primary-50);
    color: var(--pk-primary-600);
}
.item-media .icon { font-size: 22px; }

.item-inner {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.item-title-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
}

.item-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--pk-text-strong);
    min-width: 0;
}

.item-after {
    flex: 0 0 auto;
    color: var(--pk-text-muted);
    font-size: 13px;
    font-weight: 500;
}

.item-subtitle { color: var(--pk-gray-700); font-size: 13px; }
.item-text {
    color: var(--pk-text-muted);
    font-size: 13px;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.item-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--pk-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 4px;
}

/* ===== 8. Hero =========================================================== */
.pk-hero {
    position: relative;
    margin: var(--pk-s-3) var(--pk-s-4) var(--pk-s-5);
    padding: 28px 24px 32px;
    border-radius: var(--pk-r-xl);
    background: var(--pk-grad-hero);
    color: #fff;
    overflow: hidden;
    box-shadow: var(--pk-shadow-xl);
}
.pk-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 15% 15%, rgba(255,255,255,0.18) 0, transparent 45%),
        radial-gradient(circle at 90% 85%, rgba(255,255,255,0.12) 0, transparent 50%);
    pointer-events: none;
}
.pk-hero::after {
    content: '';
    position: absolute;
    right: -40px; bottom: -40px;
    width: 220px; height: 220px;
    background: radial-gradient(circle, rgba(255,255,255,0.12) 0, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}
.pk-hero-eyebrow {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: var(--pk-r-pill);
    background: rgba(255, 255, 255, 0.18);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 12px;
}
.pk-hero-title {
    position: relative;
    font-size: 26px;
    line-height: 1.15;
    font-weight: 800;
    letter-spacing: -0.02em;
    margin: 0 0 10px;
    color: #fff;
}
.pk-hero-subtitle {
    position: relative;
    font-size: 14px;
    line-height: 1.5;
    margin: 0 0 20px;
    color: rgba(255, 255, 255, 0.88);
    max-width: 440px;
}
.pk-hero-actions {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.pk-hero .button { font-weight: 600; }
.pk-hero .button.button-fill {
    background: #fff;
    color: var(--pk-primary-700);
    box-shadow: 0 8px 20px -6px rgba(15, 23, 42, 0.25);
}
.pk-hero .button.button-fill:hover {
    background: #fff;
    color: var(--pk-primary-800);
    transform: translateY(-1px);
    box-shadow: 0 12px 24px -8px rgba(15, 23, 42, 0.35);
}
.pk-hero .button-outline {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(8px);
}
.pk-hero .button-outline:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.6);
    color: #fff;
}

/* Stats row */
.pk-stats {
    display: grid;
    /* Phase 84: 3 плитки на home (0% commission / active parcels / active trips).
       minmax(120px, 1fr) — позволяет всем 3 уместиться в один ряд даже на
       mobile 375px. Gap уменьшен до 10px чтобы влезли с запасом. */
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    /* На desktop центрируем колоду; на mobile занимает доступную ширину
       минус edge-padding. */
    max-width: 680px;
    margin: var(--pk-s-2) auto var(--pk-s-5);
    padding: 0 var(--pk-s-4);
    box-sizing: border-box;
}
.pk-stat {
    background: var(--pk-bg-elevated);
    border: 1px solid var(--pk-border);
    border-radius: var(--pk-r-lg);
    padding: 20px 12px;
    text-align: center;
    box-shadow: var(--pk-shadow-xs);
}
/* Phase 86: typography overhaul. Раньше 20px 700 + label 11px смотрелось
   слабо — value «теряется» среди подписи uppercase. Сейчас: контрастный
   крупный value (24px 800, tight tracking, gradient в дарке) и label
   compact uppercase с более явным letter-spacing. */
.pk-stat-value {
    font-size: 24px;
    font-weight: 800;
    color: var(--pk-text-strong);
    letter-spacing: -0.025em;
    line-height: 1.1;
    font-feature-settings: 'tnum' 1, 'lnum' 1;  /* tabular numerals — цифры одинаковой ширины */
    font-variant-numeric: tabular-nums;
}
.pk-stat-label {
    font-size: 10.5px;
    font-weight: 600;
    color: var(--pk-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-top: 6px;
    line-height: 1.25;
}
/* Кликабельная stat-плитка (посылки / поездки → на список). */
.pk-stat-link {
    display: block;
    text-decoration: none;
    color: inherit;
    /* Phase 86: breathing — анимируем ТОЛЬКО border-color + box-shadow.
       Никаких transform/scale — текст внутри плитки оставался субпиксельно
       сдвинут на каждом кадре, читался «дёргано». Теперь обводка плавно
       пульсирует, а текст стоит ровно. */
    animation: pk-stat-breathe 3.6s ease-in-out infinite;
    transition: border-color var(--pk-t-fast), box-shadow var(--pk-t-fast),
                background var(--pk-t-fast);
}
.pk-stat-link:nth-child(3) {
    /* Сдвигаем фазу второй плитки на половину цикла —
       мигают не в унисон, эффект «дыхания» а не «мигалки». */
    animation-delay: -1.8s;
}
.pk-stat-link:hover,
.pk-stat-link:focus-visible {
    /* На hover/focus останавливаем breathing и закрепляем accent-стейт. */
    animation-play-state: paused;
    border-color: var(--pk-primary-400, #818cf8);
    box-shadow: 0 8px 22px -10px rgba(99, 102, 241, .55);
    background: linear-gradient(180deg,
        var(--pk-bg-elevated) 0%,
        color-mix(in srgb, var(--pk-bg-elevated) 92%, var(--pk-primary-500) 8%) 100%);
}

/* Дыхание: ТОЛЬКО border-color + box-shadow. Текст плитки полностью
   неподвижен, цифры не «прыгают». Минимум-максимум — почти неощутимо. */
@keyframes pk-stat-breathe {
    0%, 100% {
        border-color: var(--pk-border);
        box-shadow: var(--pk-shadow-xs);
    }
    50% {
        border-color: var(--pk-primary-300, #a5b4fc);
        box-shadow: 0 4px 18px -10px rgba(99, 102, 241, .40),
                    0 0 0 1px rgba(99, 102, 241, .08);
    }
}

/* Уважаем prefers-reduced-motion. */
@media (prefers-reduced-motion: reduce) {
    .pk-stat-link { animation: none; }
}

/* Dark mode: тёплый-голубой glow читается лучше на тёмном фоне. */
:root[data-theme="dark"] .pk-stat-link {
    animation-name: pk-stat-breathe-dark;
}
@keyframes pk-stat-breathe-dark {
    0%, 100% {
        border-color: var(--pk-border);
        box-shadow: var(--pk-shadow-xs);
    }
    50% {
        border-color: rgba(165, 180, 252, .55);
        box-shadow: 0 4px 18px -10px rgba(165, 180, 252, .45),
                    0 0 0 1px rgba(165, 180, 252, .12);
    }
}

/* ===== 9. Category cards ================================================= */
.cat-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 14px 8px;
    background: var(--pk-bg-elevated);
    border: 1px solid var(--pk-border);
    border-radius: var(--pk-r-lg);
    color: var(--pk-text-strong);
    text-decoration: none;
    gap: 8px;
    min-height: 100px;
    transition: transform var(--pk-t-fast), box-shadow var(--pk-t-fast), border-color var(--pk-t-fast);
    box-shadow: var(--pk-shadow-xs);
}
.cat-card:hover {
    transform: translateY(-2px);
    border-color: var(--pk-primary-200);
    box-shadow: var(--pk-shadow-md);
    color: var(--pk-primary-700);
}
.cat-card .icon {
    font-size: 24px;
    color: var(--pk-primary-600);
    width: 42px; height: 42px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--pk-primary-50);
    border-radius: 12px;
    transition: transform var(--pk-t-fast), background var(--pk-t-fast);
}
.cat-card:hover .icon {
    background: var(--pk-primary-100);
    transform: scale(1.05);
}
.cat-card span {
    font-size: 12px;
    font-weight: 500;
    line-height: 1.25;
    color: var(--pk-text);
}

/* ===== 10. Parcel card =================================================== */
.parcel-card {
    position: relative;
    display: flex;
    gap: 14px;
    padding: 14px;
    background: var(--pk-bg-elevated);
    border: 1px solid var(--pk-border);
    border-radius: var(--pk-r-lg);
    text-decoration: none;
    color: var(--pk-text);
    box-shadow: var(--pk-shadow-xs);
    transition: transform var(--pk-t-fast), box-shadow var(--pk-t-fast), border-color var(--pk-t-fast);
}
.parcel-card:hover {
    transform: translateY(-2px);
    border-color: var(--pk-primary-200);
    box-shadow: var(--pk-shadow-md);
    color: var(--pk-text);
}
.parcel-card-media {
    flex: 0 0 auto;
    width: 68px; height: 68px;
    border-radius: var(--pk-r-md);
    background: var(--pk-grad-primary-soft);
    display: flex; align-items: center; justify-content: center;
    color: var(--pk-primary-600);
    overflow: hidden;
}
.parcel-card-media .icon { font-size: 28px; }
.parcel-card-media { position: relative; }
.parcel-card-status {
    position: absolute;
    left: 4px;
    right: 4px;
    bottom: 4px;
    padding: 2px 6px;
    font-size: 9.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-align: center;
    border-radius: 6px;
    color: #fff;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.parcel-card-status.is-done { background: rgba(34, 197, 94, 0.92); }
.parcel-card-status.is-cancelled { background: rgba(100, 116, 139, 0.92); }

.parcel-card-body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex; flex-direction: column;
    gap: 4px;
}
.parcel-card-head {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    justify-content: space-between;
}
.parcel-card-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--pk-text-strong);
    line-height: 1.3;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    flex: 1;
}
.parcel-card-route {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--pk-gray-700);
    margin-top: 2px;
}
.parcel-card-route .icon { font-size: 14px; color: var(--pk-primary-500); }

.parcel-card-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    flex-wrap: wrap;
}

.parcel-card-desc {
    font-size: 13px;
    color: var(--pk-text-muted);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-top: 2px;
}

/* Chips */
.pk-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: var(--pk-r-pill);
    font-size: 11px;
    font-weight: 600;
    background: var(--pk-gray-100);
    color: var(--pk-gray-700);
    letter-spacing: 0.01em;
    white-space: nowrap;
}
.pk-chip .icon { font-size: 13px; }
.pk-chip-primary { background: var(--pk-primary-50); color: var(--pk-primary-700); }
.pk-chip-accent  { background: var(--pk-warning-50); color: var(--pk-warning-700); }
.pk-chip-warning { background: var(--pk-warning-50); color: var(--pk-warning-700); }
.pk-chip-success { background: var(--pk-success-50); color: var(--pk-success-700); }
.pk-chip-danger  { background: var(--pk-danger-50);  color: var(--pk-danger-700); }

.parcel-card-reward {
    flex: 0 0 auto;
    align-self: flex-start;
    padding: 4px 10px;
    border-radius: var(--pk-r-pill);
    background: var(--pk-grad-accent);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    box-shadow: 0 4px 10px -4px rgba(245, 158, 11, 0.5);
    white-space: nowrap;
}

.parcel-card-fav {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
}

/* Reserve space on the right so the title/reward row doesn't slide under
   the favorite button and get clipped. */
.parcel-row:has(.parcel-card-fav) .parcel-card-body { padding-right: 40px; }

/* ===== 11. Parcel detail ================================================= */
.pk-parcel-hero {
    position: relative;
    margin: 0 var(--pk-s-4) var(--pk-s-4);
    border-radius: var(--pk-r-xl);
    overflow: hidden;
    background: var(--pk-grad-primary-soft);
    min-height: 150px;
    display: flex;
    align-items: flex-end;
    padding: 20px;
    box-shadow: var(--pk-shadow-sm);
}
.pk-parcel-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 85% 15%, rgba(139, 92, 246, 0.25) 0, transparent 50%),
        radial-gradient(circle at 15% 85%, rgba(99, 102, 241, 0.22) 0, transparent 50%);
}
/* Flex-column для предсказуемого ритма между badge / head / route / more
   (раньше каждый элемент имел свой margin, что давало неравномерные отступы). */
.pk-parcel-hero-content {
    position: relative;
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.pk-parcel-hero-content > .pk-type-badge { align-self: flex-start; }
/* Phase 53: title + reward — одна flex-строка, reward не наезжает на route. */
.pk-parcel-hero-head {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0;
}
.pk-parcel-hero-title {
    font-size: 22px;
    font-weight: 800;
    color: var(--pk-gray-900);
    margin: 0;
    line-height: 1.2;
    letter-spacing: -0.02em;
    flex: 1 1 auto;
    min-width: 0;          /* позволяет тексту переноситься а не вытолкнуть reward */
    word-wrap: break-word;
}
.pk-parcel-hero-route {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--pk-gray-800);
    font-weight: 500;
    flex-wrap: wrap;
}
.pk-parcel-hero-route .arrow { color: var(--pk-primary-600); font-weight: 700; }
.pk-parcel-hero-fav { position: absolute; top: 14px; right: 14px; z-index: 2; }
.pk-parcel-hero-reward {
    /* Phase 53: убрал position:absolute — теперь reward — обычный inline-chip
       в .pk-parcel-hero-head рядом с title; маршрут снизу никогда не накроет. */
    flex-shrink: 0;
    align-self: flex-start;
    padding: 6px 12px;
    border-radius: var(--pk-r-pill);
    background: var(--pk-grad-accent);
    color: #fff;
    font-weight: 700;
    font-size: 13px;
    white-space: nowrap;
    box-shadow: 0 8px 20px -6px rgba(245,158,11,0.5);
}

.pk-info-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--pk-s-2);
    margin: 0 var(--pk-s-4) var(--pk-s-4);
}
.pk-info-item {
    background: var(--pk-bg-elevated);
    border: 1px solid var(--pk-border);
    border-radius: var(--pk-r-md);
    padding: 10px 12px;
    box-shadow: var(--pk-shadow-xs);
}
.pk-info-item-label {
    font-size: 11px;
    color: var(--pk-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
    margin-bottom: 2px;
}
.pk-info-item-value {
    font-size: 14px;
    font-weight: 600;
    color: var(--pk-text-strong);
}

.pk-description {
    margin: 0 var(--pk-s-4) var(--pk-s-4);
    padding: 16px 18px;
    background: var(--pk-bg-elevated);
    border: 1px solid var(--pk-border);
    border-radius: var(--pk-r-lg);
    box-shadow: var(--pk-shadow-xs);
    font-size: 14px;
    line-height: 1.6;
    color: var(--pk-gray-800);
}
.pk-description p { margin: 0 0 8px; }
.pk-description p:last-child { margin-bottom: 0; }

/* Status banner — used on parcel detail when the listing isn't active
 * (cancelled/done). Tells the owner why action buttons changed. */
.pk-status-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    margin: 0 var(--pk-s-4);
    border-radius: var(--pk-r-lg);
    font-size: 13px;
    line-height: 1.4;
}
.pk-status-banner .icon { font-size: 20px; flex: 0 0 auto; }
.pk-status-banner--cancelled {
    background: rgba(156, 163, 175, .12);
    color: var(--pk-text-muted);
    border: 1px solid var(--pk-border);
}
.pk-status-banner--done {
    background: var(--pk-primary-50);
    color: var(--pk-primary-700);
    border: 1px solid var(--pk-primary-200);
}
.pk-status-banner--info {
    /* зелёный для «уже подтвердили» — позитив, не финал. */
    background: rgba(34, 197, 94, .10);
    color: #15803d;
    border: 1px solid rgba(34, 197, 94, .25);
}
:root[data-theme="dark"] .pk-status-banner--info {
    background: rgba(34, 197, 94, .14);
    color: #4ade80;
    border-color: rgba(34, 197, 94, .35);
}

/* Автор-плашка */
.pk-author-card {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 var(--pk-s-4) var(--pk-s-4);
    padding: 12px 14px;
    background: var(--pk-bg-elevated);
    border: 1px solid var(--pk-border);
    border-radius: var(--pk-r-lg);
    box-shadow: var(--pk-shadow-xs);
}
.pk-avatar {
    flex: 0 0 auto;
    width: 40px; height: 40px;
    border-radius: 50%;
    background: var(--pk-grad-primary);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 16px; font-weight: 700;
    text-transform: uppercase;
    box-shadow: var(--pk-shadow-primary-sm);
}
.pk-avatar-lg { width: 64px; height: 64px; font-size: 24px; }
.pk-avatar-sm { width: 32px; height: 32px; font-size: 13px; }
.pk-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }

.pk-author-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--pk-text-strong);
}
.pk-author-hint {
    font-size: 12px;
    color: var(--pk-text-muted);
}

.parcel-photo {
    width: 100%;
    height: 120px;
    object-fit: cover;
    border-radius: var(--pk-r-md);
    border: 1px solid var(--pk-border);
}

/* ===== 12. Buttons ======================================================= */
.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 44px;
    padding: 0 18px;
    border-radius: var(--pk-r-md);
    background: var(--pk-bg-elevated);
    color: var(--pk-primary-700);
    border: 1px solid var(--pk-border);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -0.01em;
    text-decoration: none;
    cursor: pointer;
    transition: transform var(--pk-t-fast), background var(--pk-t-fast),
                border-color var(--pk-t-fast), color var(--pk-t-fast),
                box-shadow var(--pk-t-fast);
    white-space: nowrap;
}
.button:hover {
    background: var(--pk-primary-50);
    border-color: var(--pk-primary-200);
    color: var(--pk-primary-700);
}
.button:active { transform: scale(0.98); }
.button:focus-visible { outline: none; box-shadow: var(--pk-shadow-ring); }

.button.button-fill {
    background: var(--pk-grad-primary);
    color: #fff;
    border: 1px solid transparent;
    box-shadow: var(--pk-shadow-primary-sm);
}
.button.button-fill:hover {
    background: var(--pk-grad-primary);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: var(--pk-shadow-primary);
}

.button.button-large { height: 52px; padding: 0 24px; font-size: 15px; }
.button.button-small { height: 32px; padding: 0 12px; font-size: 12px; border-radius: var(--pk-r-sm); }

.button.color-red,
.button.button-danger {
    background: var(--pk-danger-500);
    color: #fff;
    border-color: transparent;
}
.button.color-red:hover,
.button.button-danger:hover {
    background: var(--pk-danger-600);
    color: #fff;
    transform: translateY(-1px);
}

.button.button-ghost { background: transparent; border-color: transparent; }
.button.button-ghost:hover { background: var(--pk-primary-50); border-color: transparent; }
.button-block { display: flex; width: 100%; }

/* Sticky bottom bar */
.pk-sticky-bar {
    position: sticky;
    bottom: calc(var(--pk-tabbar-height) + var(--pk-tabbar-bottom-gap) + env(safe-area-inset-bottom, 0px));
    margin: var(--pk-s-4);
    padding: 12px;
    background: var(--pk-surface-glass-strong);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid var(--pk-border);
    border-radius: var(--pk-r-lg);
    box-shadow: var(--pk-shadow-lg);
    display: flex;
    gap: 8px;
    z-index: 100;
}
.pk-sticky-bar .button { flex: 1; }

/* ===== 13. Forms / inputs ================================================ */
textarea, input[type=text], input[type=email], input[type=number],
input[type=search], input[type=password], input[type=datetime-local],
input[type=date], input[type=tel], input[type=url], select {
    width: 100%;
    border: 1.5px solid var(--pk-border);
    border-radius: var(--pk-r-md);
    padding: 11px 14px;
    font-family: inherit;
    font-size: 15px;
    color: var(--pk-text);
    background: var(--pk-surface-card);
    box-sizing: border-box;
    transition: border-color var(--pk-t-fast), box-shadow var(--pk-t-fast), background var(--pk-t-fast);
    -webkit-appearance: none;
    appearance: none;
}
textarea { resize: vertical; min-height: 84px; line-height: 1.5; }

textarea:focus, input:focus, select:focus {
    outline: none;
    border-color: var(--pk-primary-400);
    box-shadow: var(--pk-shadow-ring);
    /* Используем background-color, а не shorthand background:, иначе
     * сбрасываются background-image / -repeat / -position и SVG-стрелка
     * <select> начинает тайлиться по всей ширине (зигзаг-волна). */
    background-color: var(--pk-surface-card);
}
input::placeholder, textarea::placeholder { color: var(--pk-gray-400); }

select {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'><path d='M1 1.5L6 6.5L11 1.5' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat: no-repeat;
    background-position: calc(100% - 14px) center;
    padding-right: 36px;
}

input[type=file] {
    width: 100%;
    padding: 14px 12px;
    background: var(--pk-primary-50);
    border: 1.5px dashed var(--pk-primary-300);
    border-radius: var(--pk-r-md);
    color: var(--pk-primary-700);
    font-size: 14px;
    cursor: pointer;
    transition: background var(--pk-t-fast), border-color var(--pk-t-fast);
}
input[type=file]:hover {
    background: var(--pk-primary-100);
    border-color: var(--pk-primary-400);
}
input[type=file]::-webkit-file-upload-button,
input[type=file]::file-selector-button {
    margin-right: 12px;
    padding: 6px 12px;
    border: 0;
    border-radius: var(--pk-r-sm);
    background: var(--pk-bg-elevated);
    color: var(--pk-primary-700);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: var(--pk-shadow-xs);
}

.list.inset .item-input { padding: 12px 16px; }
.list.inset .item-input + .item-input { border-top: 1px solid var(--pk-border); }
.item-input .item-inner { display: flex; flex-direction: column; gap: 6px; }
.item-input-wrap { width: 100%; }
.item-input-error-message {
    color: var(--pk-danger-600);
    font-size: 12px;
    margin-top: 4px;
}

/* ===== 13b. Premium form cards ========================================== */
.pk-form {
    display: flex;
    flex-direction: column;
    gap: var(--pk-s-4);
    margin: 0 var(--pk-s-4);
}
.pk-form-section {
    background: var(--pk-bg-elevated);
    border: 1px solid var(--pk-border);
    border-radius: var(--pk-r-xl);
    box-shadow: var(--pk-shadow-sm);
    /* НЕ ставим `overflow: hidden` — иначе обрезается абсолютно-позиционированный
     * dropdown autocomplete'а адресов (.pk-address-suggest), который выходит за
     * границы секции. Скруглённые углы у внутренних элементов обеспечиваем
     * через `border-radius: inherit` на .pk-form-section-head и -body. */
}
.pk-form-section-head {
    padding: 14px 18px 10px;
    border-bottom: 1px solid var(--pk-border-soft);
    background: var(--pk-surface-form-head);
    /* Скругляем верхние углы — иначе серый bg head вылезет за карточку. */
    border-top-left-radius: var(--pk-r-xl);
    border-top-right-radius: var(--pk-r-xl);
}
.pk-form-section-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    font-weight: 700;
    color: var(--pk-text-strong);
    letter-spacing: -0.01em;
}
.pk-form-section-title .icon {
    width: 28px;
    height: 28px;
    border-radius: var(--pk-r-sm);
    background: var(--pk-primary-50);
    color: var(--pk-primary-600);
    display: grid;
    place-items: center;
    font-size: 16px;
}
.pk-form-section-sub {
    margin: 4px 0 0 38px;
    font-size: 12.5px;
    color: var(--pk-text-muted);
    line-height: 1.45;
}
.pk-form-section-body {
    padding: 14px 18px 18px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.pk-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
@media (max-width: 420px) {
    .pk-form-row { grid-template-columns: 1fr; }
}

.pk-field { display: flex; flex-direction: column; gap: 6px; }
.pk-field-label {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--pk-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    display: flex;
    align-items: center;
    gap: 6px;
}
.pk-field-label .pk-required {
    color: var(--pk-danger-500);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0;
    text-transform: none;
}
.pk-field-hint {
    font-size: 12px;
    color: var(--pk-text-muted);
    line-height: 1.4;
}
.pk-field-error {
    font-size: 12px;
    color: var(--pk-danger-600);
    display: flex;
    align-items: center;
    gap: 4px;
}
.pk-field-error::before {
    content: '';
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--pk-danger-500);
}
.pk-field.has-error input,
.pk-field.has-error textarea,
.pk-field.has-error select {
    border-color: var(--pk-danger-300);
    background: var(--pk-danger-50);
}
.pk-field.has-error input:focus,
.pk-field.has-error textarea:focus,
.pk-field.has-error select:focus {
    border-color: var(--pk-danger-500);
    box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.14);
}

.pk-input-icon {
    position: relative;
}
.pk-input-icon > .icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--pk-gray-400);
    font-size: 18px;
    pointer-events: none;
}
.pk-input-icon input,
.pk-input-icon select {
    padding-left: 42px;
}
.pk-input-suffix {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--pk-text-muted);
    font-size: 13px;
    font-weight: 600;
    pointer-events: none;
}
.pk-input-icon input.has-suffix,
.pk-input-icon.has-suffix input {
    padding-right: 44px;
}

/* Form helper card above the form */
.pk-form-hint {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    margin: 0 var(--pk-s-4) var(--pk-s-4);
    background: var(--pk-primary-50);
    border: 1px solid var(--pk-primary-100);
    border-radius: var(--pk-r-md);
}
.pk-form-hint-icon {
    width: 32px;
    height: 32px;
    border-radius: var(--pk-r-sm);
    background: var(--pk-grad-primary);
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 16px;
    flex-shrink: 0;
}
.pk-form-hint-body {
    font-size: 13px;
    color: var(--pk-text);
    line-height: 1.5;
}
.pk-form-hint-body strong {
    color: var(--pk-text-strong);
}

/* Profile header card */
.pk-profile-header {
    position: relative;
    margin: 0 var(--pk-s-4) var(--pk-s-4);
    padding: 28px 20px 22px;
    background: var(--pk-grad-hero);
    border-radius: var(--pk-r-xl);
    box-shadow: var(--pk-shadow-primary);
    color: #fff;
    overflow: hidden;
}
.pk-profile-header::before,
.pk-profile-header::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}
.pk-profile-header::before {
    width: 180px;
    height: 180px;
    background: rgba(255, 255, 255, 0.14);
    top: -60px;
    right: -50px;
    filter: blur(30px);
}
.pk-profile-header::after {
    width: 140px;
    height: 140px;
    background: rgba(255, 255, 255, 0.1);
    bottom: -40px;
    left: -30px;
}
.pk-profile-header-inner {
    position: relative;
    display: flex;
    align-items: center;
    gap: 16px;
}
.pk-profile-avatar {
    width: 76px;
    height: 76px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.22);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 2px solid rgba(255, 255, 255, 0.4);
    display: grid;
    place-items: center;
    color: #fff;
    font-size: 30px;
    font-weight: 700;
    letter-spacing: -0.02em;
    flex-shrink: 0;
    overflow: hidden;
}
.pk-profile-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.pk-profile-name {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.15;
}
.pk-profile-email {
    margin-top: 4px;
    font-size: 13.5px;
    color: rgba(255, 255, 255, 0.85);
    word-break: break-all;
}
.pk-profile-city {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 10px;
    padding: 4px 10px;
    background: rgba(255, 255, 255, 0.22);
    backdrop-filter: blur(10px);
    border-radius: var(--pk-r-pill);
    font-size: 12px;
    font-weight: 600;
}
.pk-profile-city .icon { font-size: 13px; }

/* Menu list for profile */
.pk-menu {
    margin: 0 var(--pk-s-4);
    background: var(--pk-bg-elevated);
    border: 1px solid var(--pk-border);
    border-radius: var(--pk-r-xl);
    box-shadow: var(--pk-shadow-sm);
    overflow: hidden;
}
.pk-menu a.pk-menu-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    color: var(--pk-text);
    text-decoration: none;
    border-bottom: 1px solid var(--pk-gray-100);
    transition: background var(--pk-t-fast);
}
.pk-menu a.pk-menu-item:last-child { border-bottom: 0; }
.pk-menu a.pk-menu-item:active { background: var(--pk-gray-50); }
.pk-menu-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--pk-r-md);
    display: grid;
    place-items: center;
    font-size: 18px;
    flex-shrink: 0;
    background: var(--pk-primary-50);
    color: var(--pk-primary-600);
}
.pk-menu-icon.is-danger { background: var(--pk-danger-50); color: var(--pk-danger-500); }
.pk-menu-icon.is-warning { background: var(--pk-warning-50); color: var(--pk-warning-700); }
.pk-menu-icon.is-success { background: var(--pk-success-50); color: var(--pk-success-700); }
.pk-menu-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.pk-menu-title {
    font-size: 14.5px;
    font-weight: 600;
    color: var(--pk-text-strong);
}
.pk-menu-sub {
    font-size: 12.5px;
    color: var(--pk-text-muted);
    line-height: 1.35;
}
.pk-menu-chevron { color: var(--pk-gray-400); font-size: 18px; flex-shrink: 0; }

/* Search (posts list) */
.pk-search {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 var(--pk-s-4) var(--pk-s-4);
    padding: 10px 14px;
    background: var(--pk-bg-elevated);
    border: 1.5px solid var(--pk-border);
    border-radius: var(--pk-r-pill);
    box-shadow: var(--pk-shadow-xs);
    transition: border-color var(--pk-t-fast), box-shadow var(--pk-t-fast);
}
.pk-search:focus-within {
    border-color: var(--pk-primary-400);
    box-shadow: var(--pk-shadow-ring);
}
.pk-search .icon { color: var(--pk-gray-400); font-size: 20px; }
.pk-search input {
    flex: 1;
    border: 0;
    padding: 0;
    background: transparent;
    font-size: 15px;
    color: var(--pk-text);
}
.pk-search input:focus { box-shadow: none; border: 0; background: transparent; }

/* Filter toolbar (chips bar) — горизонтальный scroller с категориями.
 * • Mobile: touch-swipe «из коробки» через overflow-x: auto.
 * • Desktop: mouse-drag + wheel-to-scroll реализованы JS'ом
 *   (см. main.js → «Horizontal scroller»). cursor: grab даёт визуальный
 *   сигнал что элемент перетаскивается.
 * • Тонкий scrollbar (6px) показываем на desktop'е (hover-устройствах) —
 *   ещё одна affordance того, что можно скроллить. */
.pk-toolbar {
    display: flex;
    gap: 8px;
    padding: 0 var(--pk-s-4) var(--pk-s-3);
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    /* По умолчанию (mobile) — скрываем scrollbar, swipe работает touch'ем. */
    scrollbar-width: none;
    /* Drag-to-scroll: указываем что можно «схватить». */
    cursor: grab;
    user-select: none;
    /* Чтобы при drag не выделялся текст и картинки не «таскались» как DnD. */
    -webkit-user-drag: none;
    overscroll-behavior-x: contain;
}
.pk-toolbar.is-dragging { cursor: grabbing; }
.pk-toolbar.is-dragging * { pointer-events: none; }
.pk-toolbar::-webkit-scrollbar { display: none; }

/* Desktop с мышкой — показываем тонкий scrollbar (на mobile-touch не сработает
 * media query, останется скрытый). */
@media (hover: hover) and (pointer: fine) {
    .pk-toolbar {
        scrollbar-width: thin;
        scrollbar-color: var(--pk-border) transparent;
        padding-bottom: calc(var(--pk-s-3) - 4px);
    }
    .pk-toolbar::-webkit-scrollbar {
        display: block;
        height: 6px;
    }
    .pk-toolbar::-webkit-scrollbar-track { background: transparent; }
    .pk-toolbar::-webkit-scrollbar-thumb {
        background: var(--pk-border);
        border-radius: 3px;
    }
    .pk-toolbar::-webkit-scrollbar-thumb:hover {
        background: var(--pk-primary-300);
    }
}

.pk-toolbar-btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: var(--pk-r-pill);
    background: var(--pk-bg-elevated);
    color: var(--pk-text);
    border: 1px solid var(--pk-border);
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    box-shadow: var(--pk-shadow-xs);
    transition: background var(--pk-t-fast), border-color var(--pk-t-fast), color var(--pk-t-fast);
}
.pk-toolbar-btn:hover {
    background: var(--pk-primary-50);
    border-color: var(--pk-primary-200);
    color: var(--pk-primary-700);
}
.pk-toolbar-btn .icon { font-size: 16px; }
.pk-toolbar-btn.is-active {
    background: var(--pk-primary-600);
    color: #fff;
    border-color: var(--pk-primary-600);
    box-shadow: var(--pk-shadow-primary-sm);
}

/* Profile avatar drop zone (user.photo only — parcels no longer have photos).
   Phase 67 fix: при загруженной фотке Django ClearableFileInput рендерил
   нативную «Currently: <a>...</a> Change: <input>» строку РЯДОМ с label,
   и она ломалась во flex-row (обтекание текста + перекрытие label-блока).
   Скрываем нативный markup (`.pk-photo-drop input[type=file]` уже было) и
   принудительно сжимаем — JS опционально показывает имя файла. */
.pk-photo-drop {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border: 1px dashed var(--pk-border);
    border-radius: var(--pk-r-lg);
    background: var(--pk-bg-elevated);
    cursor: pointer;
    transition: border-color var(--pk-t-fast), background var(--pk-t-fast);
    /* В Django ClearableFileInput добавляются <a> + текст «Currently:» +
       checkbox «clear» рядом с input — гасим их visually inside label. */
    overflow: hidden;
    min-width: 0;
}
.pk-photo-drop:hover {
    border-color: var(--pk-primary-300);
    background: var(--pk-primary-50);
}
.pk-photo-drop input[type="file"] {
    position: absolute;
    width: 1px; height: 1px; opacity: 0; pointer-events: none;
}
/* Скрываем Django-генерированные `Currently:` / `Change:` / clear-checkbox  */
.pk-photo-drop > a,
.pk-photo-drop > p,
.pk-photo-drop input[type="checkbox"],
.pk-photo-drop label[for$="-clear_id"] {
    display: none !important;
}
.pk-photo-drop-icon {
    flex: 0 0 56px;
    width: 56px; height: 56px;
    border-radius: var(--pk-r-md);
    background: linear-gradient(135deg, #fdf2f8 0%, #fce7f3 100%);
    color: #be185d;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.pk-photo-drop-icon img {
    width: 100%; height: 100%;
    object-fit: cover;
    border-radius: inherit;
    display: block;
}
.pk-photo-drop-icon .icon { font-size: 24px; }
.pk-photo-drop-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1 1 auto;
}
.pk-photo-drop-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--pk-text-strong);
}
.pk-photo-drop-sub {
    font-size: 12px;
    color: var(--pk-text-muted);
    white-space: normal;
    word-wrap: break-word;
}

/* ===== 14. Status chips ================================================== */
.status-pending, .status-accepted, .status-rejected, .status-cancelled {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: var(--pk-r-pill);
    font-size: 11px;
    font-weight: 600;
    text-transform: lowercase;
    letter-spacing: 0.01em;
    flex-shrink: 0;
}
.status-pending { background: var(--pk-warning-50); color: var(--pk-warning-700); }
.status-accepted { background: var(--pk-success-50); color: var(--pk-success-700); }
.status-rejected { background: var(--pk-danger-50); color: var(--pk-danger-700); }
.status-cancelled { background: var(--pk-gray-100); color: var(--pk-gray-600); }
.status-pending::before { content: '●'; color: var(--pk-warning-500); font-size: 10px; }
.status-accepted::before { content: '●'; color: var(--pk-success-500); font-size: 10px; }
.status-rejected::before { content: '●'; color: var(--pk-danger-500); font-size: 10px; }
.status-cancelled::before { content: '●'; color: var(--pk-gray-400); font-size: 10px; }

.response-actions {
    margin-top: 10px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* Response cards */
.pk-response-card {
    padding: 14px 16px;
    border-bottom: 1px solid var(--pk-border);
}
.pk-response-card:last-child { border-bottom: 0; }
.pk-response-head {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 8px;
}
.pk-response-head-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.pk-response-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--pk-text-strong);
    line-height: 1.35;
}
.pk-response-title a { color: var(--pk-primary-700); }
.pk-response-meta { font-size: 12px; color: var(--pk-text-muted); }
.pk-response-message {
    font-size: 13px;
    color: var(--pk-gray-700);
    line-height: 1.5;
    background: var(--pk-gray-50);
    border: 1px solid var(--pk-gray-150);
    border-radius: var(--pk-r-md);
    padding: 10px 12px;
    margin-top: 4px;
    white-space: pre-wrap;
    word-wrap: break-word;
}

/* ===== 15. Favorites heart =============================================== */
.fav-form { margin: 0; padding: 0; display: inline-flex; }
.fav-btn {
    background: var(--pk-bg-elevated);
    border: 1px solid var(--pk-border);
    padding: 7px;
    cursor: pointer;
    color: var(--pk-gray-400);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    border-radius: var(--pk-r-pill);
    width: 36px; height: 36px;
    box-shadow: var(--pk-shadow-xs);
    transition: color var(--pk-t-fast), background var(--pk-t-fast),
                border-color var(--pk-t-fast), transform var(--pk-t-fast);
}
.fav-btn .icon { font-size: 20px; }
.fav-btn:hover {
    color: var(--pk-danger-500);
    border-color: var(--pk-danger-500);
    background: var(--pk-danger-50);
}
.fav-btn.is-favorite {
    color: var(--pk-danger-500);
    background: var(--pk-danger-50);
    border-color: var(--pk-danger-500);
}
.fav-btn:active { transform: scale(0.92); }

.parcel-row { position: relative; }
.parcel-row-fav { position: absolute; top: 10px; right: 10px; }

/* ===== 16. Flash messages ================================================ */
.messages-block {
    margin: var(--pk-s-3) var(--pk-s-4) var(--pk-s-4) !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
}
.messages-block .msg {
    margin: 0 0 8px;
    padding: 12px 16px;
    border-radius: var(--pk-r-md);
    background: var(--pk-primary-50);
    color: var(--pk-primary-700);
    font-size: 14px;
    border: 1px solid var(--pk-primary-100);
    box-shadow: var(--pk-shadow-xs);
}
.messages-block .msg-error {
    background: var(--pk-danger-50);
    color: var(--pk-danger-700);
    border-color: #fecaca;
}
.messages-block .msg-success {
    background: var(--pk-success-50);
    color: var(--pk-success-700);
    border-color: #a7f3d0;
}
.messages-block .msg-warning {
    background: var(--pk-warning-50);
    color: var(--pk-warning-700);
    border-color: #fde68a;
}

/* ===== 17. Chat ========================================================== */
#chat-window.messages-content {
    padding: 4px var(--pk-s-4) 120px;
    min-height: 300px;
    background: transparent;
}

.message {
    display: flex;
    margin: 6px 0;
    align-items: flex-end;
    gap: 8px;
}
.message-received { justify-content: flex-start; }
.message-sent { justify-content: flex-end; }

.message-bubble {
    max-width: 78%;
    padding: 10px 14px;
    border-radius: 20px;
    position: relative;
    font-size: 14px;
    line-height: 1.5;
    box-shadow: var(--pk-shadow-sm);
}
.message-received .message-bubble {
    background: var(--pk-bg-elevated);
    color: var(--pk-text);
    border-top-left-radius: 6px;
    border: 1px solid var(--pk-border);
}
.message-sent .message-bubble {
    background: var(--pk-grad-primary);
    color: #fff;
    border-top-right-radius: 6px;
    box-shadow: var(--pk-shadow-primary-sm);
}

.message-name {
    font-size: 11px;
    font-weight: 600;
    opacity: 0.9;
    margin-bottom: 2px;
}
.message-sent .message-name { color: rgba(255, 255, 255, 0.88); }
.message-received .message-name { color: var(--pk-primary-600); }

.message-text {
    font-size: 14px;
    line-height: 1.45;
    white-space: pre-wrap;
    word-wrap: break-word;
}

.message-meta {
    font-size: 10px;
    opacity: 0.7;
    margin-top: 4px;
    text-align: right;
}
.message-sent .message-meta { color: rgba(255, 255, 255, 0.85); }
.message-received .message-meta { color: var(--pk-text-muted); }

/* Chat header */
.pk-chat-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 var(--pk-s-4) var(--pk-s-3);
    padding: 12px 14px;
    background: var(--pk-bg-elevated);
    border: 1px solid var(--pk-border);
    border-radius: var(--pk-r-lg);
    box-shadow: var(--pk-shadow-xs);
}
.pk-chat-header-info { flex: 1; min-width: 0; }
.pk-chat-header-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--pk-text-strong);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pk-chat-header-sub {
    font-size: 12px;
    color: var(--pk-text-muted);
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pk-chat-back {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin: 0 var(--pk-s-4) var(--pk-s-2);
    font-size: 13px;
    font-weight: 500;
    color: var(--pk-primary-600);
}
.pk-chat-back .icon { font-size: 16px; }

/* legacy #chat-status rules replaced by .pk-chat-status (see Chat list items). */

/* Chat form (input bar) */
.chat-form {
    position: fixed;
    left: 12px; right: 12px;
    bottom: calc(var(--pk-tabbar-height) + var(--pk-tabbar-bottom-gap) * 2
                  + env(safe-area-inset-bottom, 0px));
    padding: 8px 10px;
    background: var(--pk-surface-glass-strong);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--pk-border);
    border-radius: var(--pk-r-pill);
    box-shadow: var(--pk-shadow-lg);
    display: flex;
    gap: 8px;
    align-items: center;
    z-index: 500;
    max-width: 480px;
    margin: 0 auto;
}
.chat-form input {
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
    padding: 8px 14px;
    border-radius: var(--pk-r-pill);
    border: 0;
    background: transparent;
    font-size: 14px;
}
.chat-form input:focus { box-shadow: none; border: 0; background: transparent; outline: none; }
.chat-form button {
    flex: 0 0 auto;
    width: 40px; height: 40px;
    padding: 0;
    border-radius: 50%;
    border: 0;
    background: var(--pk-grad-primary);
    color: #fff;
    cursor: pointer;
    box-shadow: var(--pk-shadow-primary-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0;
    transition: transform var(--pk-t-fast);
    font-weight: 700;
}
.chat-form button::before {
    content: '\2191';  /* ↑ */
    font-family: inherit;
    font-size: 20px;
    line-height: 1;
    font-weight: 700;
}
.chat-form button:hover { transform: translateY(-1px); box-shadow: var(--pk-shadow-primary); }
.chat-form button:active { transform: scale(0.94); }

/* Paperclip / attach button — lives inside .chat-form, same pill row */
.chat-form .chat-attach {
    flex: 0 0 auto;
    width: 38px; height: 38px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--pk-text-muted);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background var(--pk-t-fast), color var(--pk-t-fast), transform var(--pk-t-fast);
}
.chat-form .chat-attach:hover { background: var(--pk-primary-50); color: var(--pk-primary-600); }
.chat-form .chat-attach:active { transform: scale(0.92); }
.chat-form .chat-attach:disabled { opacity: 0.5; cursor: default; }
.chat-form .chat-attach .icon { font-size: 20px; }

/* Inline error banner above the chat-form (too-large, upload failed) */
.pk-chat-upload-error {
    position: fixed;
    left: 12px; right: 12px;
    bottom: calc(var(--pk-tabbar-height) + var(--pk-tabbar-bottom-gap) * 2
                  + env(safe-area-inset-bottom, 0px) + 64px);
    max-width: 480px;
    margin: 0 auto;
    padding: 8px 14px;
    background: var(--pk-danger-50, #fef2f2);
    color: var(--pk-danger-600);
    border: 1px solid var(--pk-danger-300, #fca5a5);
    border-radius: var(--pk-r-pill);
    box-shadow: var(--pk-shadow-sm);
    font-size: 13px;
    font-weight: 500;
    text-align: center;
    z-index: 501;
}

/* Attachment rendering inside message bubbles */
.chat-attachment {
    display: block;
    margin-top: 6px;
    border-radius: var(--pk-r-md);
    overflow: hidden;
    text-decoration: none;
}
.chat-attachment-image {
    max-width: 240px;
}
.chat-attachment-image img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 280px;
    object-fit: cover;
    border-radius: var(--pk-r-md);
}
.chat-attachment-file {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: rgba(0, 0, 0, 0.04);
    color: inherit;
    max-width: 260px;
}
.message-sent .chat-attachment-file {
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
}
.chat-attachment-file .icon { font-size: 18px; flex: 0 0 auto; }
.chat-attachment-name {
    font-size: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

/* ===== 18. Grid helpers ================================================== */
.grid { display: grid; }
.grid.grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid.grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid.grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
.grid.grid-cols-6,
.grid.medium-grid-cols-6 { grid-template-columns: repeat(3, 1fr); }
.grid.grid-gap { gap: var(--pk-s-3); }

@media (min-width: 768px) {
    .grid.medium-grid-cols-6 { grid-template-columns: repeat(6, 1fr); }
}

/* ===== 19. Utility classes =============================================== */
.pk-stack { display: flex; flex-direction: column; gap: var(--pk-s-3); }
.pk-row { display: flex; align-items: center; gap: var(--pk-s-2); }
.pk-spacer-sm { height: var(--pk-s-3); }
.pk-spacer-md { height: var(--pk-s-5); }
.pk-center-text { text-align: center; }
.pk-text-muted { color: var(--pk-text-muted) !important; font-size: 13px; }
.text-color-red { color: var(--pk-danger-600); }

.link-inline {
    color: var(--pk-primary-600);
    font-weight: 500;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color var(--pk-t-fast);
}
.link-inline:hover { border-bottom-color: var(--pk-primary-400); }

/* ===== 20. Auth screens ================================================== */
.pk-auth-card {
    max-width: 420px;
    margin: var(--pk-s-5) auto;
    padding: 32px 24px;
    background: var(--pk-bg-elevated);
    border: 1px solid var(--pk-border);
    border-radius: var(--pk-r-xl);
    box-shadow: var(--pk-shadow-lg);
    text-align: center;
}
.pk-auth-card-body { text-align: left; margin-top: 20px; }
.pk-auth-logo {
    width: 64px; height: 64px;
    border-radius: var(--pk-r-lg);
    background: var(--pk-grad-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    box-shadow: var(--pk-shadow-primary);
    margin-bottom: 16px;
}
.pk-auth-logo .icon { font-size: 32px; color: #fff; }
.pk-auth-title {
    font-size: 22px;
    font-weight: 700;
    color: var(--pk-text-strong);
    margin: 0 0 6px;
    letter-spacing: -0.02em;
}
.pk-auth-sub {
    color: var(--pk-text-muted);
    font-size: 14px;
    margin: 0 0 8px;
    line-height: 1.55;
}

.pk-auth-email {
    display: inline-block;
    margin: 6px auto 4px;
    padding: 6px 14px;
    background: var(--pk-primary-50);
    color: var(--pk-primary-700);
    border-radius: var(--pk-r-pill);
    font-size: 14px;
    font-weight: 600;
    word-break: break-all;
}
.pk-auth-meta {
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex-wrap: wrap;
    font-size: 12.5px;
    color: var(--pk-text-muted);
}
.pk-auth-meta-dot { color: var(--pk-gray-300); }

.pk-auth-hints {
    max-width: 420px;
    margin: var(--pk-s-4) auto 0;
    padding: 0 var(--pk-s-4);
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.pk-auth-hint {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px;
    background: var(--pk-bg-elevated);
    border: 1px solid var(--pk-border);
    border-radius: var(--pk-r-md);
}
.pk-auth-hint-icon {
    width: 32px;
    height: 32px;
    border-radius: var(--pk-r-sm);
    background: var(--pk-primary-50);
    color: var(--pk-primary-600);
    display: grid;
    place-items: center;
    font-size: 16px;
    flex-shrink: 0;
}
.pk-auth-hint-icon.is-success { background: var(--pk-success-50); color: var(--pk-success-700); }
.pk-auth-hint-title {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--pk-text-strong);
    line-height: 1.3;
}
.pk-auth-hint-text {
    font-size: 12.5px;
    color: var(--pk-text-muted);
    line-height: 1.4;
    margin-top: 2px;
}

.pk-otp-input {
    text-align: center;
    font-size: 24px !important;
    font-weight: 700;
    letter-spacing: 0.5em;
    padding: 14px 16px !important;
    font-feature-settings: 'tnum';
}

/* ===== 21. Empty state =================================================== */
.pk-empty {
    padding: 40px 24px;
    text-align: center;
    color: var(--pk-text-muted);
}
.pk-empty-icon {
    width: 72px; height: 72px;
    border-radius: 20px;
    background: var(--pk-gray-100);
    color: var(--pk-gray-500);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 14px;
    transition: transform 0.18s ease;
}
.pk-empty-icon .icon { font-size: 34px; }

/* Phase 90: per-domain gradient avatars (consistent with Phase 75 mine-pages).
   parcels = purple→pink, trips = teal→emerald. Glow shadow в соответствующий
   accent. White icon glyph для контраста. */
.pk-empty-icon--parcels {
    background: linear-gradient(135deg, #8b5cf6, #ec4899);
    color: #fff;
    box-shadow: 0 10px 24px -10px rgba(139, 92, 246, .55);
}
.pk-empty-icon--trips {
    background: linear-gradient(135deg, #10b981, #14b8a6);
    color: #fff;
    box-shadow: 0 10px 24px -10px rgba(16, 185, 129, .55);
}

.pk-empty-title {
    font-size: 17px;
    font-weight: 700;
    color: var(--pk-text-strong);
    margin-bottom: 6px;
    letter-spacing: -0.01em;
}
.pk-empty-text {
    font-size: 13.5px;
    color: var(--pk-text-muted);
    line-height: 1.45;
    max-width: 360px;
    margin: 0 auto;
}

/* ===== 22. Chat list items ============================================== */
.pk-chat-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    text-decoration: none;
    color: var(--pk-text);
    transition: background var(--pk-t-fast);
}
.pk-chat-row:hover { background: var(--pk-gray-100); color: var(--pk-text); }

.pk-chat-row-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.pk-chat-row-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
}
.pk-chat-row-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--pk-text-strong);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
}
.pk-chat-row-time {
    font-size: 12px;
    color: var(--pk-text-muted);
    flex-shrink: 0;
}
.pk-chat-row-sub {
    font-size: 13px;
    color: var(--pk-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ===== 22b. Chat cards (new polished list — Phase 75 v2) ================
   Mirrors the unified card design: stronger border, real shadow, indigo
   accent strip on the left edge. Unread cards get a more saturated strip. */
.pk-chat-stack {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.pk-chat-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 14px 14px 20px; /* room for the 4px strip */
    background: var(--pk-surface-card, #fff);
    border: 1px solid var(--pk-border-strong, #d1d5db);
    border-radius: 18px;
    box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 4px 18px -10px rgba(15,23,42,.12);
    text-decoration: none;
    color: var(--pk-text);
    transition: transform .15s, box-shadow .15s, border-color .15s;
    overflow: hidden;
}
.pk-chat-card::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, #6366f1, #8b5cf6);
    pointer-events: none;
}
.pk-chat-card:hover {
    transform: translateY(-2px);
    border-color: var(--pk-primary-300, #a5b4fc);
    box-shadow: 0 4px 8px rgba(15,23,42,.06), 0 12px 28px -12px rgba(99,102,241,.35);
}
.pk-chat-card:active { transform: translateY(0); }
/* Unread chat — vivid violet→pink strip + slight tint to draw the eye.
   Template uses `.is-unread` (Phase 75 v2: alias to has-unread). */
.pk-chat-card.is-unread::before,
.pk-chat-card.has-unread::before {
    background: linear-gradient(180deg, #8b5cf6, #ec4899);
    width: 5px;
}
.pk-chat-card.is-unread,
.pk-chat-card.has-unread {
    background: linear-gradient(135deg, rgba(139,92,246,.04), transparent 40%), var(--pk-surface-card, #fff);
}
:root[data-theme="dark"] .pk-chat-card {
    border-color: var(--pk-border-strong, #334155);
    box-shadow: 0 1px 2px rgba(0,0,0,.18), 0 4px 18px -10px rgba(0,0,0,.50);
}
:root[data-theme="dark"] .pk-chat-card.is-unread,
:root[data-theme="dark"] .pk-chat-card.has-unread {
    background: linear-gradient(135deg, rgba(139,92,246,.10), transparent 40%), var(--pk-surface-card);
}

.pk-chat-card-body {
    flex: 1; min-width: 0;
    display: flex; flex-direction: column; gap: 3px;
    position: relative;
}
.pk-chat-card-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
}
.pk-chat-card-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--pk-text-strong);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    letter-spacing: -0.01em;
}
.pk-chat-card-time {
    font-size: 11px;
    color: var(--pk-text-muted);
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}
.pk-chat-card-people {
    font-size: 12px;
    color: var(--pk-primary-600);
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pk-chat-card-preview {
    font-size: 13px;
    color: var(--pk-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: flex; gap: 4px;
    margin-top: 2px;
}
.pk-chat-card-preview-prefix {
    color: var(--pk-text-muted);
    font-weight: 500;
    flex-shrink: 0;
}
.pk-chat-card-preview-text {
    color: var(--pk-text);
    overflow: hidden;
    text-overflow: ellipsis;
}
.pk-chat-card-preview-muted {
    color: var(--pk-text-muted);
    font-style: italic;
}
.pk-chat-card-chevron {
    color: var(--pk-gray-400);
    font-size: 18px;
    flex-shrink: 0;
    transition: transform var(--pk-t-fast), color var(--pk-t-fast);
}
.pk-chat-card:hover .pk-chat-card-chevron {
    color: var(--pk-primary-500);
    transform: translateX(2px);
}

/* Unread badge overlaid on avatar + stronger card styling when unread. */
.pk-chat-card .pk-avatar {
    position: relative;
}
.pk-chat-card-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, #f43f5e 0%, #e11d48 100%);
    border: 2px solid var(--pk-surface);
    border-radius: 999px;
    box-shadow: 0 2px 6px -1px rgba(225, 29, 72, .5);
    letter-spacing: -.02em;
    line-height: 1;
    z-index: 2;
}
.pk-chat-card.is-unread {
    border-color: var(--pk-primary-200);
    background: linear-gradient(135deg, rgba(99, 102, 241, .04) 0%, rgba(139, 92, 246, .02) 100%);
}
.pk-chat-card.is-unread .pk-chat-card-title {
    color: var(--pk-text-strong);
    font-weight: 700;
}
.pk-chat-card.is-unread .pk-chat-card-preview-text {
    color: var(--pk-text-strong);
    font-weight: 600;
}
.pk-chat-card.is-unread .pk-chat-card-time {
    color: var(--pk-primary-600);
    font-weight: 700;
}

/* Chat status variants for room */
.pk-chat-status {
    text-align: center;
    padding: 6px 14px;
    margin: 0 auto var(--pk-s-3);
    background: var(--pk-gray-100);
    border-radius: var(--pk-r-pill);
    font-size: 12px;
    color: var(--pk-text-muted);
    max-width: fit-content;
    transition: background var(--pk-t-fast), color var(--pk-t-fast);
}
.pk-chat-status.is-ok { background: #dcfce7; color: #047857; }
.pk-chat-status.is-warning { background: #fef3c7; color: #b45309; }
.pk-chat-status.is-danger { background: #fee2e2; color: #b91c1c; }

/* Chat empty inside room */
.pk-chat-empty {
    text-align: center;
    padding: 40px 20px;
    color: var(--pk-text-muted);
}
.pk-chat-empty-icon {
    font-size: 48px;
    color: var(--pk-gray-300);
    margin-bottom: 10px;
}
.pk-chat-empty-icon .icon { font-size: 48px; }
.pk-chat-empty-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--pk-text);
    margin-bottom: 4px;
}
.pk-chat-empty-text {
    font-size: 13px;
    color: var(--pk-text-muted);
}

/* Chat header link icon */
.pk-chat-header-link {
    flex-shrink: 0;
    width: 36px; height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--pk-primary-50);
    color: var(--pk-primary-600);
    transition: transform var(--pk-t-fast), background var(--pk-t-fast);
}
.pk-chat-header-link:hover { background: var(--pk-primary-100); transform: scale(1.05); }
.pk-chat-header-link .icon { font-size: 18px; }

/* ===== 23. Icons helpers ================================================ */
.icon.icon-danger { color: var(--pk-danger-500); }
.icon.icon-success { color: var(--pk-success-500); }

/* ===== 24. Parcels list premium head ==================================== */
.pk-list-head {
    padding: 18px var(--pk-s-4) 4px;
}
.pk-list-head-top {
    /* Title-блок ВНЕ sticky-бара (новая структура после Phase 13 hotfix).
       Поэтому ему нужны собственные horizontal padding'и — sticky-bar
       больше не оборачивает его. Vertical padding/margin компенсирует
       removed-padding на .page-content (см. правило в секции 59). */
    padding: 0 var(--pk-s-4);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 14px;
}
.pk-list-title {
    margin: 0 0 4px;
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--pk-text-strong);
    line-height: 1.1;
}
.pk-list-subtitle {
    margin: 0;
    font-size: 13.5px;
    color: var(--pk-text-muted);
    line-height: 1.4;
}
.pk-list-head-btn {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: var(--pk-grad-primary);
    color: #fff;
    display: grid;
    place-items: center;
    box-shadow: var(--pk-shadow-primary-sm);
    text-decoration: none;
    transition: transform var(--pk-t-fast), box-shadow var(--pk-t-fast);
}
.pk-list-head-btn:hover {
    transform: translateY(-1px);
    box-shadow: var(--pk-shadow-primary);
    color: #fff;
}
.pk-list-head-btn .icon { font-size: 22px; }

.pk-search { margin-bottom: 12px; position: relative; }
.pk-search-clear {
    flex: 0 0 auto;
    color: var(--pk-gray-400);
    display: grid;
    place-items: center;
    transition: color var(--pk-t-fast);
}
.pk-search-clear:hover { color: var(--pk-danger-500); }
.pk-search-clear .icon { font-size: 20px; }

.pk-toolbar-secondary {
    padding-top: 0;
    padding-bottom: var(--pk-s-3);
}
.pk-toolbar-btn-ghost {
    background: transparent;
    border: 1px dashed var(--pk-gray-300);
    color: var(--pk-text-muted);
    box-shadow: none;
}
.pk-toolbar-btn-ghost:hover {
    background: var(--pk-gray-50);
    border-color: var(--pk-primary-300);
    color: var(--pk-primary-700);
}

.pk-list-count {
    padding: 4px var(--pk-s-4) 10px;
    font-size: 12.5px;
    color: var(--pk-text-muted);
    letter-spacing: 0.02em;
}
.pk-list-count strong { color: var(--pk-text-strong); font-weight: 700; }

/* ===== Segmented tabs (notifications, etc.) ============================= */
.pk-segment {
    display: flex;
    gap: 6px;
    margin: 0 var(--pk-s-4) var(--pk-s-4);
    padding: 5px;
    background: var(--pk-bg-elevated);
    border: 1px solid var(--pk-border);
    border-radius: var(--pk-r-pill);
    box-shadow: var(--pk-shadow-xs);
}
.pk-segment-btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 9px 12px;
    border-radius: var(--pk-r-pill);
    color: var(--pk-text-muted);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: background var(--pk-t-fast), color var(--pk-t-fast), box-shadow var(--pk-t-fast);
    white-space: nowrap;
}
.pk-segment-btn .icon { font-size: 16px; }
.pk-segment-btn:hover { color: var(--pk-text-strong); }
.pk-segment-btn.is-active {
    background: var(--pk-grad-primary);
    color: #fff;
    box-shadow: var(--pk-shadow-primary-sm);
}
.pk-segment-badge {
    padding: 0 7px;
    min-width: 18px;
    height: 18px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 700;
    background: var(--pk-gray-100);
    color: var(--pk-text-strong);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.pk-segment-btn.is-active .pk-segment-badge {
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
}

.pk-segment-pane { display: none; }
.pk-segment-pane.is-active { display: block; }

.pk-stack-sm { gap: 10px !important; }

/* ===== Response cards v2 (notifications page) =========================== */
.pk-resp-card {
    background: var(--pk-bg-elevated);
    border: 1px solid var(--pk-border);
    border-radius: var(--pk-r-lg);
    padding: 14px 16px;
    box-shadow: var(--pk-shadow-xs);
    transition: box-shadow var(--pk-t-fast), transform var(--pk-t-fast);
}
.pk-resp-card:hover {
    box-shadow: var(--pk-shadow-sm);
    transform: translateY(-1px);
}
.pk-resp-card-head {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}
.pk-resp-card-head-body {
    flex: 1;
    min-width: 0;
}
.pk-resp-card-title {
    display: block;
    font-size: 14.5px;
    font-weight: 700;
    color: var(--pk-text-strong);
    line-height: 1.3;
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pk-resp-card-title:hover { color: var(--pk-primary-600); }
.pk-resp-card-meta {
    margin-top: 2px;
    font-size: 12.5px;
    color: var(--pk-text-muted);
    line-height: 1.35;
}
.pk-resp-card-meta strong { color: var(--pk-text); font-weight: 600; }
.pk-resp-card-dot {
    display: inline-block;
    margin: 0 4px;
    color: var(--pk-gray-400);
}
.pk-resp-card-message {
    margin-top: 10px;
    padding: 10px 12px;
    background: var(--pk-gray-50);
    border-radius: var(--pk-r-md);
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--pk-text);
    white-space: pre-wrap;
}
.pk-resp-card-actions {
    margin-top: 12px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.pk-resp-card-hint {
    margin-top: 10px;
    padding: 9px 12px;
    background: var(--pk-gray-50);
    border-radius: var(--pk-r-md);
    font-size: 12.5px;
    color: var(--pk-text-muted);
    display: flex;
    align-items: center;
    gap: 8px;
    line-height: 1.35;
}

/* ===== Language switcher (navbar) ======================================= */
.pk-navbar-right {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.pk-lang-switcher {
    position: relative;
    display: inline-flex;
}
.pk-lang-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 9px;
    background: rgba(99, 102, 241, 0.08);
    border: 1px solid rgba(99, 102, 241, 0.22);
    color: var(--pk-primary-700);
    border-radius: var(--pk-r-pill);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    cursor: pointer;
    line-height: 1;
    transition: background var(--pk-t-fast), border-color var(--pk-t-fast);
}
.pk-lang-btn:hover {
    background: rgba(99, 102, 241, 0.14);
    border-color: rgba(99, 102, 241, 0.35);
}
.pk-lang-btn-flag {
    font-size: 16px;
    line-height: 1;
}
.pk-lang-btn-chev {
    font-size: 13px !important;
    color: var(--pk-primary-600);
    transition: transform var(--pk-t-fast);
}
.pk-lang-switcher.is-open .pk-lang-btn-chev {
    transform: rotate(180deg);
}
/* Framework7 обёртывает навбар в .navbar-inner с overflow:hidden + transform —
 * это обрезает наш dropdown. Так как мы не используем F7-routing со
 * sliding-анимацией, безопасно отключить это обрезание. */
.navbar .navbar-inner.sliding {
    overflow: visible;
    transform: none;
}

.pk-lang-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 180px;
    padding: 6px;
    background: #fff;
    border: 1px solid var(--pk-border);
    border-radius: var(--pk-r-md);
    box-shadow: var(--pk-shadow-lg, 0 20px 50px -20px rgba(15, 23, 42, 0.35));
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-4px) scale(0.98);
    transform-origin: top right;
    transition: opacity var(--pk-t-fast), transform var(--pk-t-fast), visibility var(--pk-t-fast);
}
.pk-lang-switcher.is-open .pk-lang-menu {
    pointer-events: auto;
}
.pk-lang-switcher.is-open .pk-lang-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}
.pk-lang-form { margin: 0; }
.pk-lang-item {
    width: 100%;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    background: transparent;
    border: 0;
    color: var(--pk-text);
    font-size: 14px;
    font-weight: 500;
    text-align: left;
    border-radius: var(--pk-r-sm);
    cursor: pointer;
    transition: background var(--pk-t-fast), color var(--pk-t-fast);
}
.pk-lang-item:hover {
    background: var(--pk-primary-50);
    color: var(--pk-primary-700);
}
.pk-lang-item.is-current {
    background: var(--pk-primary-50);
    color: var(--pk-primary-700);
    font-weight: 700;
}
.pk-lang-item-flag {
    font-size: 18px;
    line-height: 1;
    flex: 0 0 auto;
}
.pk-lang-item-name {
    flex: 1;
    min-width: 0;
}
.pk-lang-item-check {
    font-size: 16px;
    color: var(--pk-primary-600);
}

/* ===== 24b. Parcels list: filters =======================================
 * «Filters» button + badge, sort select, collapsible panel, active pills.
 */
.pk-filter-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin: 6px var(--pk-s-4) 0;
}
.pk-filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    background: var(--pk-bg-elevated);
    border: 1px solid var(--pk-border);
    border-radius: var(--pk-r-pill);
    font-size: 13px;
    font-weight: 600;
    color: var(--pk-text);
    cursor: pointer;
    transition: border-color var(--pk-t-fast), background var(--pk-t-fast), transform var(--pk-t-fast);
    position: relative;
}
.pk-filter-btn:hover { border-color: var(--pk-primary-300); background: var(--pk-primary-50); }
.pk-filter-btn.is-open {
    border-color: var(--pk-primary-400);
    background: var(--pk-primary-50);
    color: var(--pk-primary-700);
}
.pk-filter-btn .icon { font-size: 15px; color: var(--pk-primary-600); }
.pk-filter-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px; height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    background: var(--pk-grad-primary);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    margin-left: 2px;
    box-shadow: var(--pk-shadow-primary-sm);
}
.pk-filter-reset {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--pk-text-muted);
    text-decoration: none;
    border-radius: var(--pk-r-pill);
}
.pk-filter-reset:hover { color: var(--pk-danger-600); background: var(--pk-danger-50); }

.pk-filter-sort {
    margin-left: auto;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    white-space: nowrap;
}
.pk-filter-sort-form {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}
.pk-filter-sort-label {
    font-size: 13.5px;
    color: var(--pk-text-muted);
    font-weight: 500;
    white-space: nowrap;
}
.pk-filter-sort-select {
    appearance: none;
    -webkit-appearance: none;
    padding: 8px 32px 8px 12px;
    border-radius: var(--pk-r-pill);
    border: 1px solid var(--pk-border);
    background: var(--pk-bg-elevated)
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='none' stroke='%236b7280' stroke-width='1.6' stroke-linecap='round' d='M1 1l4 4 4-4'/%3E%3C/svg%3E")
        no-repeat right 12px center;
    font-size: 14px;
    color: var(--pk-text-strong);
    font-weight: 600;
    cursor: pointer;
    transition: border-color var(--pk-t-fast);
    white-space: nowrap;
}
.pk-filter-sort-select:hover { border-color: var(--pk-primary-300); }

/* =========================================================================
   §93  CUSTOM SELECT (PkSelect, Phase 55d)
   Подменяем нативный <select> своим попапом — нативный на macOS Chrome/
   Safari игнорирует CSS попап-окна и показывает OS-стиль (тёмный мелкий
   при OS dark). Наш popup читается всегда одинаково.
   После enhance: .pk-select обёртка содержит scрытый <select>, кнопку
   .pk-select-trigger (наследует pill-style .pk-filter-sort-select) и
   <ul.pk-select-popup>. JS синхронизирует значения и triggerит change.
   ========================================================================= */
.pk-select { position: relative; display: inline-block; }
/* Скрываем нативный select когда его подменил кастомный (data-pkSelectEnhanced).*/
.pk-select select.pk-filter-sort-select[data-pk-select-enhanced="1"] {
    position: absolute;
    width: 1px; height: 1px;
    opacity: 0;
    pointer-events: none;
    clip: rect(0 0 0 0);
}
/* Trigger визуально совпадает с pill-стилем — наследует .pk-filter-sort-select
   классы (включая appearance, padding, border, background-image chevron).     */
.pk-select-trigger {
    display: inline-flex;
    align-items: center;
    background-repeat: no-repeat;
    background-position: right 12px center;
}
.pk-select-popup {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 100%;
    max-width: 90vw;
    margin: 0;
    padding: 6px;
    list-style: none;
    background: var(--pk-bg-elevated, #fff);
    border: 1px solid var(--pk-border, #e2e8f0);
    border-radius: 12px;
    box-shadow: 0 12px 30px -8px rgba(15, 23, 42, .25);
    z-index: 100;
    animation: pk-select-in .15s ease-out;
}
.pk-select-popup[hidden] { display: none; }
.pk-select-option {
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--pk-text, #0f172a);
    cursor: pointer;
    transition: background .12s;
    outline: none;
    white-space: nowrap;
}
.pk-select-option:hover,
.pk-select-option:focus {
    background: var(--pk-primary-50, #eef2ff);
    color: var(--pk-primary-700, #4338ca);
}
.pk-select-option[data-selected="true"] {
    background: var(--pk-primary-100, #e0e7ff);
    color: var(--pk-primary-700, #4338ca);
}
.pk-select-option[data-selected="true"]::before {
    content: '✓';
    margin-right: 8px;
    font-weight: 800;
}
@keyframes pk-select-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    .pk-select-popup { animation: none; }
}
:root[data-theme="dark"] .pk-select-popup {
    background: #1e293b;
    border-color: rgba(148, 163, 184, .25);
    box-shadow: 0 12px 30px -8px rgba(0, 0, 0, .60);
}
:root[data-theme="dark"] .pk-select-option {
    color: #f1f5f9;
}
:root[data-theme="dark"] .pk-select-option:hover,
:root[data-theme="dark"] .pk-select-option:focus {
    background: rgba(99, 102, 241, .20);
    color: #a5b4fc;
}
:root[data-theme="dark"] .pk-select-option[data-selected="true"] {
    background: rgba(99, 102, 241, .30);
    color: #c7d2fe;
}

/* =========================================================================
   §94  CLICKABLE CATEGORY CHIPS / LINKS (Phase 56)
   `.pk-cat-chip-link`  — общий ресет для <a>-обёрток поверх chip-стилей
                          (trip-cat-chip, etc): убирает дефолтный underline,
                          добавляет lift + soft glow на hover.
   `.pk-info-item-link` — компактный indigo-link в parcel info-grid
                          (категория посылки → фильтр).
   ========================================================================= */
.pk-cat-chip-link {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: transform .12s ease, box-shadow .15s ease, background-color .15s;
}
.pk-cat-chip-link:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px -4px rgba(99, 102, 241, .35);
}
.pk-info-item-link {
    color: var(--pk-primary-700, #4338ca);
    text-decoration: none;
    border-bottom: 1px dashed transparent;
    transition: color .15s, border-color .15s;
    font-weight: 600;
}
.pk-info-item-link:hover {
    color: var(--pk-primary-800, #3730a3);
    border-bottom-color: var(--pk-primary-400, #818cf8);
}
:root[data-theme="dark"] .pk-info-item-link { color: #a5b4fc; }
:root[data-theme="dark"] .pk-info-item-link:hover {
    color: #c7d2fe;
    border-bottom-color: #818cf8;
}

/* `.pk-mention-link` — @nickname-ссылка (отзывы, сообщения чата). Subtle:
   наследует цвет родительского элемента (.pk-review-author уже indigo-700,
   .message-name — нейтральный bold) — только убираем underline и добавляем
   подсветку на hover, чтобы клик-аффорданс был, но визуально не кричал. */
.pk-mention-link {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px dashed transparent;
    transition: color .15s, border-color .15s, opacity .15s;
}
.pk-mention-link:hover {
    border-bottom-color: currentColor;
    opacity: .85;
}

/* =========================================================================
   §95  QUICK-DATE CHIPS (Phase 58)
   Ряд chip-кнопок над любым `input.pk-date-quick`. Заполняют value в 1
   клик — экономия 3-4 тапов через native date-picker. Активная подсветка
   когда value совпадает.
   ========================================================================= */
.pk-date-quick-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 8px;
}
.pk-date-quick-chip {
    /* Override Framework7 button defaults (display:block, width:100%) */
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: auto !important;
    flex: 0 0 auto;
    padding: 6px 14px;
    line-height: 1.2;
    border-radius: 999px;
    background: var(--pk-surface-2, #f1f5f9);
    color: var(--pk-text, #0f172a);
    border: 1px solid var(--pk-border, #e2e8f0);
    font: inherit;
    font-size: 12.5px;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
}
.pk-date-quick-chip:hover {
    background: var(--pk-primary-50, #eef2ff);
    color: var(--pk-primary-700, #4338ca);
    border-color: var(--pk-primary-200, #c7d2fe);
}
.pk-date-quick-chip.is-active {
    background: var(--pk-primary-100, #e0e7ff);
    color: var(--pk-primary-700, #4338ca);
    border-color: var(--pk-primary-400, #818cf8);
}
:root[data-theme="dark"] .pk-date-quick-chip {
    background: rgba(148, 163, 184, .12);
    color: #cbd5e1;
    border-color: rgba(148, 163, 184, .22);
}
:root[data-theme="dark"] .pk-date-quick-chip:hover {
    background: rgba(99, 102, 241, .20);
    color: #a5b4fc;
    border-color: rgba(99, 102, 241, .40);
}
:root[data-theme="dark"] .pk-date-quick-chip.is-active {
    background: rgba(99, 102, 241, .28);
    color: #c7d2fe;
    border-color: #818cf8;
}

.pk-filter-panel {
    margin: 10px var(--pk-s-4) 0;
    padding: 14px;
    background: var(--pk-bg-elevated);
    border: 1px solid var(--pk-border);
    border-radius: var(--pk-r-lg);
    box-shadow: var(--pk-shadow-sm);
    animation: pk-filter-in 200ms ease;
}
@keyframes pk-filter-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}
.pk-filter-form { display: flex; flex-direction: column; gap: 12px; }
.pk-filter-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.pk-filter-field { display: flex; flex-direction: column; gap: 4px; }
.pk-filter-field label {
    font-size: 12px;
    font-weight: 600;
    color: var(--pk-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.pk-filter-select,
.pk-filter-input {
    width: 100%;
    padding: 9px 12px;
    /* background-color, не shorthand — иначе у <select> сбрасывается
     * background-image / -repeat / -position, заданные глобальным правилом
     * `select { ... }` в секции 13, и SVG-стрелка тайлится в волну. */
    background-color: var(--pk-gray-50);
    border: 1px solid var(--pk-border);
    border-radius: var(--pk-r-md);
    font-size: 14px;
    color: var(--pk-text-strong);
    font-weight: 500;
    transition: border-color var(--pk-t-fast), background-color var(--pk-t-fast);
}
.pk-filter-select:focus,
.pk-filter-input:focus {
    outline: none;
    border-color: var(--pk-primary-400);
    /* background-color, не shorthand — иначе теряется SVG-стрелка <select>
     * и она тайлится в волну (см. секцию 13). */
    background-color: #fff;
}
.pk-filter-group { display: flex; flex-direction: column; gap: 6px; }
.pk-filter-group-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--pk-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.pk-filter-range {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 8px;
    align-items: center;
}
.pk-filter-range-sep {
    font-weight: 600;
    color: var(--pk-text-muted);
}
.pk-filter-actions {
    display: flex;
    gap: 8px;
    margin-top: 6px;
    padding-top: 10px;
    border-top: 1px solid var(--pk-border);
}
.pk-filter-actions .button { flex: 1; }
.pk-filter-clear { flex: 0 0 auto; min-width: 100px; }

.pk-filter-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 10px var(--pk-s-4) 4px;
}
.pk-filter-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 8px 5px 10px;
    background: var(--pk-primary-50);
    color: var(--pk-primary-700);
    border: 1px solid var(--pk-primary-100);
    border-radius: var(--pk-r-pill);
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none;
    transition: background var(--pk-t-fast), border-color var(--pk-t-fast);
}
.pk-filter-pill:hover {
    background: var(--pk-danger-50);
    color: var(--pk-danger-700);
    border-color: var(--pk-danger-200);
}
.pk-filter-pill-x {
    font-size: 12px;
    opacity: 0.7;
}
.pk-filter-pill:hover .pk-filter-pill-x { opacity: 1; }

/* ===== 25. Responsive polish ============================================ */
@media (max-width: 360px) {
    .pk-stats { gap: 8px; padding: 0 var(--pk-s-3); }
    .pk-stat { padding: 14px 8px; }
    .pk-hero { padding: 22px 18px 26px; }
    .pk-hero-title { font-size: 24px; }
    .parcel-card-media { width: 56px; height: 56px; }
    .pk-list-title { font-size: 22px; }
    .pk-lang-btn { padding: 4px 7px; gap: 4px; }
    .pk-lang-btn-code { display: none; }
}

@media (max-width: 520px) {
    /* На узких mobile: label «Сортировка:» скрываем чтобы select влез   */
    /* в одну строку с кнопкой Filter. Select остаётся достаточно крупным */
    /* (14px) чтобы был читаем. Reset-кнопку делаем icon-only, чтобы     */
    /* освободить место для sort'а в одну строку. */
    .pk-filter-bar {
        gap: 6px;
        flex-wrap: nowrap;
    }
    .pk-filter-sort-label { display: none; }
    .pk-filter-reset {
        padding: 6px 8px;
        font-size: 0;  /* hide text node */
    }
    .pk-filter-reset .icon {
        font-size: 16px !important;
    }
    .pk-filter-btn { padding: 7px 10px; }
    /* Phase 55b: НЕ ужимаем sort-select на mobile — текст должен оставаться */
    /* читаемым. Лейбл «Sort:» скрыт выше, dropdown уже компактный сам по    */
    /* себе (короткие лейблы «Свежие / Ближайшие»). Padding/font оставляем   */
    /* как в базовом правиле — крупно, заметно.                             */
}
@media (max-width: 420px) {
    .pk-filter-grid { grid-template-columns: 1fr; }
}

/* =========================================================================
   25. My Parcels: status tabs + mine card
   ========================================================================= */
.pk-head-action {
    display: inline-flex !important;
    align-items: center;
    gap: 4px;
    height: 36px !important;
    padding: 0 14px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    border-radius: 10px !important;
    flex-shrink: 0;
}
.pk-head-action .icon { font-size: 18px !important; }
.pk-head-action-text { white-space: nowrap; }

/* Status-filter tab bar (horizontal scroll on small screens). */
.pk-tabs {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 4px var(--pk-s-4) 12px;
    scrollbar-width: none;
}
.pk-tabs::-webkit-scrollbar { display: none; }
.pk-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    font-size: 14px;
    font-weight: 600;
    color: var(--pk-text);
    background: var(--pk-surface-soft);
    border: 1px solid var(--pk-border);
    border-radius: 999px;
    text-decoration: none;
    white-space: nowrap;
    transition: background .15s, color .15s, border-color .15s, box-shadow .15s;
}
.pk-tab:hover {
    background: var(--pk-surface-hover);
    color: var(--pk-text-strong);
}
.pk-tab.is-active {
    background: var(--pk-primary-600);
    color: #fff;
    border-color: var(--pk-primary-600);
    box-shadow: 0 4px 10px -4px rgba(99, 102, 241, .5);
}
.pk-tab-label { display: inline-block; }
.pk-tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    font-size: 12px;
    font-weight: 700;
    background: #fff;
    color: var(--pk-primary-700);
    border-radius: 999px;
    box-shadow: inset 0 0 0 1px var(--pk-border);
}
.pk-tab.is-active .pk-tab-badge {
    background: rgba(255, 255, 255, .24);
    color: #fff;
    box-shadow: none;
}
.pk-tab-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.is-active-dot    { background: var(--pk-success-500); }
.is-done-dot      { background: var(--pk-primary-500); }
.is-cancelled-dot { background: var(--pk-text-dim, #9ca3af); }
.pk-tab.is-active .pk-tab-dot { background: #fff; }

/* Card stack for My Parcels. */
.pk-mine-stack {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 0 var(--pk-s-4) var(--pk-s-4);
}
/* Phase 75 polish: cards раньше выглядели "архивно" на bluish-page background —
   border был слишком бледный, shadow отсутствовал, icon — pale-on-pale.
   Теперь: чёткая граница, реальная elevation, status-цветная полоса слева. */
.pk-mine-card {
    position: relative;
    background: var(--pk-surface-card, #fff);
    border: 1px solid var(--pk-border-strong, #d1d5db);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 4px 18px -10px rgba(15,23,42,.12);
    transition: border-color .15s, box-shadow .15s, transform .15s;
}
.pk-mine-card::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
    background: var(--pk-primary-500, #6366f1);
}
.pk-mine-card.is-active::before { background: linear-gradient(180deg, #6366f1, #8b5cf6); }
.pk-mine-card.is-draft::before { background: linear-gradient(180deg, #94a3b8, #64748b); }
.pk-mine-card.is-done::before { background: linear-gradient(180deg, #10b981, #059669); }
.pk-mine-card.is-cancelled::before { background: linear-gradient(180deg, #ef4444, #b91c1c); }
.pk-mine-card:hover {
    border-color: var(--pk-primary-300, #a5b4fc);
    box-shadow: 0 4px 8px rgba(15,23,42,.06), 0 12px 28px -12px rgba(99, 102, 241, .35);
    transform: translateY(-2px);
}
.pk-mine-card.is-cancelled { opacity: .82; }
:root[data-theme="dark"] .pk-mine-card {
    border-color: var(--pk-border-strong, #334155);
    box-shadow: 0 1px 2px rgba(0,0,0,.18), 0 4px 18px -10px rgba(0,0,0,.50);
}
.pk-mine-card-link {
    display: flex;
    gap: 14px;
    padding: 14px;
    padding-left: 18px; /* sit right of the status accent strip */
    text-decoration: none;
    color: inherit;
}
.pk-mine-card-media {
    position: relative;
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    color: #fff;
    background: linear-gradient(135deg, #818cf8, #6366f1);
    box-shadow: 0 6px 14px -6px rgba(99,102,241,.45);
}
.pk-mine-card.is-active .pk-mine-card-media {
    background: linear-gradient(135deg, #6366f1, #8b5cf6 60%, #ec4899);
    box-shadow: 0 6px 14px -6px rgba(139,92,246,.50);
}
.pk-mine-card.is-draft .pk-mine-card-media {
    background: linear-gradient(135deg, #cbd5e1, #94a3b8);
    color: #475569;
    box-shadow: 0 6px 14px -6px rgba(100,116,139,.40);
}
.pk-mine-card.is-done .pk-mine-card-media {
    background: linear-gradient(135deg, #10b981, #059669);
    box-shadow: 0 6px 14px -6px rgba(16,185,129,.45);
}
.pk-mine-card.is-cancelled .pk-mine-card-media {
    background: linear-gradient(135deg, #f87171, #ef4444);
    box-shadow: 0 6px 14px -6px rgba(239,68,68,.40);
}
.pk-mine-card-media .icon {
    font-size: 26px;
    color: inherit;
}
/* Status pill moved out of the media block into the card body */
.pk-mine-card-status {
    display: inline-flex;
    align-items: center;
    padding: 2px 9px;
    font-size: 10.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-radius: 999px;
    line-height: 1.5;
    align-self: flex-start;
}
/* Per-status chip colours (also reusable on list). Phase 75: stronger tints. */
.pk-chip-active,
.pk-chip-done,
.pk-chip-cancelled,
.pk-chip-draft { display: inline-block; }
.pk-chip-active {
    background: rgba(16,185,129,.16);
    color: #047857;
}
.pk-chip-done {
    background: rgba(99,102,241,.16);
    color: var(--pk-primary-700);
}
.pk-chip-cancelled {
    background: rgba(239,68,68,.14);
    color: #b91c1c;
}
.pk-chip-draft {
    background: rgba(148,163,184,.20);
    color: #475569;
}
:root[data-theme="dark"] .pk-chip-active { background: rgba(16,185,129,.24); color: #6ee7b7; }
:root[data-theme="dark"] .pk-chip-done { background: rgba(99,102,241,.26); color: #a5b4fc; }
:root[data-theme="dark"] .pk-chip-cancelled { background: rgba(239,68,68,.22); color: #fca5a5; }
:root[data-theme="dark"] .pk-chip-draft { background: rgba(148,163,184,.26); color: #cbd5e1; }

.pk-mine-card-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.pk-mine-card-body .pk-mine-card-status {
    margin-bottom: 2px;
}
.pk-mine-card-title {
    margin: 0;
    font-size: 15.5px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--pk-text-strong);
    letter-spacing: -0.005em;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.pk-mine-card-route {
    font-size: 13px;
    color: var(--pk-text-dim, #6b7280);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.pk-mine-card-route .icon { font-size: 14px; color: var(--pk-primary-500); }

.pk-mine-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
    margin-top: 2px;
    font-size: 12px;
    color: var(--pk-text-dim, #6b7280);
}
.pk-mine-card-reward {
    font-weight: 700;
    color: var(--pk-warning-600, #b45309);
    background: var(--pk-warning-50);
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 12px;
}
.pk-mine-card-deadline,
.pk-mine-card-responses {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}
.pk-mine-card-deadline .icon,
.pk-mine-card-responses .icon { font-size: 13px; }

.pk-mine-card-actions {
    display: flex;
    gap: 8px;
    padding: 0 12px 12px;
    border-top: 1px dashed var(--pk-border);
    padding-top: 10px;
    margin-top: 2px;
}
.pk-mine-card-actions .button {
    flex: 1;
    height: 34px;
    font-size: 13px;
    font-weight: 600;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

@media (max-width: 420px) {
    .pk-head-action-text { display: none; }
    .pk-head-action { width: 36px; padding: 0 !important; justify-content: center; }
    .pk-mine-card-media { width: 72px; height: 72px; }
}

/* =========================================================================
   26. Auth verify — polished OTP input (big monospace digits)
   ========================================================================= */
.pk-otp-field { position: relative; }

.pk-otp-label {
    text-align: center;
    justify-content: center;
    color: var(--pk-neutral-500);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    margin-bottom: var(--pk-s-2);
}

.pk-otp-input {
    text-align: center;
    font-size: 30px !important;
    font-weight: 700;
    letter-spacing: 0.45em;
    padding: 18px 12px !important;
    font-feature-settings: 'tnum';
    font-variant-numeric: tabular-nums;
    color: var(--pk-neutral-900);
    background: linear-gradient(135deg, #ffffff 0%, var(--pk-primary-50) 140%);
    border: 2px solid var(--pk-primary-100) !important;
    border-radius: 16px !important;
    box-shadow: 0 2px 10px rgba(99, 102, 241, 0.08);
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
    caret-color: var(--pk-primary-600);
}

.pk-otp-input::placeholder {
    color: var(--pk-neutral-300);
    letter-spacing: 0.45em;
    font-weight: 600;
}

.pk-otp-input:focus {
    outline: none;
    border-color: var(--pk-primary-500) !important;
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.18);
}

.pk-otp-input.is-filled {
    border-color: var(--pk-success-500, #22c55e) !important;
    background: linear-gradient(135deg, #ffffff 0%, var(--pk-success-50, #f0fdf4) 140%);
    box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.18);
}

.pk-otp-field.has-error .pk-otp-input {
    border-color: var(--pk-danger-500, #ef4444) !important;
    background: linear-gradient(135deg, #ffffff 0%, #fef2f2 140%);
    box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.12);
}

.pk-otp-error {
    justify-content: center;
    text-align: center;
}

/* =========================================================================
   27. Auth — single-identifier input + prefilled-field chip + alt link
   ========================================================================= */
.pk-auth-identifier {
    font-size: 18px !important;
    font-weight: 600;
    padding: 16px 14px !important;
    border-radius: 14px !important;
    border: 2px solid var(--pk-primary-100) !important;
    background: linear-gradient(135deg, #ffffff 0%, var(--pk-primary-50) 160%);
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.06);
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
    letter-spacing: 0.01em;
}
.pk-auth-identifier::placeholder {
    color: var(--pk-neutral-300);
    font-weight: 500;
    letter-spacing: 0;
}
.pk-auth-identifier:focus {
    outline: none;
    border-color: var(--pk-primary-500) !important;
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.16);
}

.pk-auth-input {
    font-size: 16px !important;
    padding: 13px 14px !important;
    border-radius: 12px !important;
    border: 2px solid var(--pk-neutral-200) !important;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.pk-auth-input:focus {
    outline: none;
    border-color: var(--pk-primary-500) !important;
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.16);
}
.pk-field.is-prefilled .pk-auth-input {
    border-color: var(--pk-success-400, #4ade80) !important;
    background: var(--pk-success-50, #f0fdf4);
}

.pk-field-label-hint {
    margin-left: 8px;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--pk-success-100, #dcfce7);
    color: var(--pk-success-700, #15803d);
    font-size: 10.5px;
    font-weight: 600;
    text-transform: lowercase;
    letter-spacing: 0.02em;
}

.pk-auth-alt {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    margin-top: 20px;
    font-size: 13.5px;
    color: var(--pk-text-muted);
}
.pk-auth-alt-text { color: var(--pk-neutral-500); }
.pk-auth-alt-link {
    color: var(--pk-primary-600);
    font-weight: 600;
    text-decoration: none;
}
.pk-auth-alt-link:hover { text-decoration: underline; }

.pk-chip-success {
    background: var(--pk-success-100, #dcfce7) !important;
    color: var(--pk-success-700, #15803d) !important;
    font-weight: 700 !important;
    text-transform: lowercase;
    letter-spacing: 0.02em;
}

/* Inline code snippets used as hints on the login form. */
.pk-field-hint code {
    padding: 1px 6px;
    border-radius: 5px;
    background: var(--pk-neutral-100);
    color: var(--pk-neutral-700);
    font-family: var(--pk-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    font-size: 11.5px;
}

/* ===== 28. Theme switcher + dark-theme point-overrides ================== */

/* Кнопка переключения темы в навбаре. */
.pk-theme-btn {
    position: relative;
    width: 34px; height: 34px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--pk-text-muted);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background var(--pk-t-fast), color var(--pk-t-fast), transform var(--pk-t-fast);
    flex: 0 0 auto;
}
.pk-theme-btn:hover {
    background: var(--pk-primary-50);
    color: var(--pk-primary-600);
}
.pk-theme-btn:active { transform: scale(0.93); }
.pk-theme-btn .icon { font-size: 19px; }

/* Framework7 задаёт .icon { display: ... } с такой же specificity,
 * поэтому здесь усиливаем селектор и используем !important, чтобы гарантировать,
 * что неактивные иконки внутри кнопки темы точно скрыты. */
.pk-theme-btn .pk-theme-btn-icon { display: none !important; }

:root[data-theme-mode="auto"]  .pk-theme-btn .pk-theme-btn-auto,
:root[data-theme-mode="light"] .pk-theme-btn .pk-theme-btn-light,
:root[data-theme-mode="dark"]  .pk-theme-btn .pk-theme-btn-dark {
    display: inline-flex !important;
}

/* Dark-only точечные фиксы (на случаи, которые нельзя выразить через token'ы). */
:root[data-theme="dark"] {
    /* Стрелка select'а — SVG с hardcoded stroke. Переопределяем на более светлый. */
}
:root[data-theme="dark"] select {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'><path d='M1 1.5L6 6.5L11 1.5' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}

/* Меню языка — явный тёмный фон и светлый текст для «текущего» элемента. */
:root[data-theme="dark"] .pk-lang-menu {
    background: var(--pk-surface-card);
}
:root[data-theme="dark"] .pk-lang-item.is-current {
    /* В светлой теме текст тёмно-фиолетовый (primary-700) — на тёмной это
     * нечитаемо, подсвечиваем светлее (primary-300). */
    color: var(--pk-primary-300);
}

/* Framework7 жёстко выставляет тёмный цвет текста на .block/.block-strong
 * и в таббаре (--f7-text-color и подобные). В тёмной теме эти классы
 * становятся нечитаемыми — переопределяем их нашим text-token'ом. */
:root[data-theme="dark"] .block,
:root[data-theme="dark"] .block-strong,
:root[data-theme="dark"] .block-header,
:root[data-theme="dark"] .block-footer,
:root[data-theme="dark"] .list,
:root[data-theme="dark"] .list .item-title,
:root[data-theme="dark"] .list .item-text,
:root[data-theme="dark"] .pk-tab-link,
:root[data-theme="dark"] .pk-tab-link .tabbar-label,
:root[data-theme="dark"] .pk-tab-link .icon {
    color: var(--pk-text);
}
:root[data-theme="dark"] .pk-tab-link:not(.is-active) {
    color: var(--pk-text-muted);
}
:root[data-theme="dark"] .pk-tab-link.is-active,
:root[data-theme="dark"] .pk-tab-link.is-active .icon {
    color: var(--pk-primary-300);
}

/* Outline-кнопки (.button без .button-fill) используют primary-700 для
 * текста — на тёмном фоне карточки (bg-elevated #141c2d) это почти не видно.
 * Осветляем в primary-300. */
:root[data-theme="dark"] .button:not(.button-fill):not(.button-danger):not(.color-red) {
    color: var(--pk-primary-300);
}
:root[data-theme="dark"] .button:not(.button-fill):not(.button-danger):not(.color-red):hover {
    color: var(--pk-primary-200);
    background: var(--pk-primary-50);
    border-color: var(--pk-primary-400);
}

/* Таб-бейдж (количество посылок) — белый фон. */
:root[data-theme="dark"] .pk-tab-badge {
    background: var(--pk-bg-subtle);
    color: var(--pk-text-strong);
}

/* Филтр-инпут в панели парцелов на :focus — тёмный фон карточки.
 * background-color, не shorthand — иначе SVG-стрелка <select> сбрасывается
 * и тайлится в волну. */
:root[data-theme="dark"] .pk-filter-select:focus,
:root[data-theme="dark"] .pk-filter-input:focus {
    background-color: var(--pk-surface-card);
}

/* OTP и auth-identifier — светлые градиенты. В тёмной теме — свой вариант. */
:root[data-theme="dark"] .pk-otp-input {
    background: linear-gradient(135deg, var(--pk-surface-card) 0%, rgba(99, 102, 241, 0.14) 140%);
    color: var(--pk-text-strong);
    border-color: rgba(99, 102, 241, 0.4) !important;
}
:root[data-theme="dark"] .pk-otp-input.is-filled {
    background: linear-gradient(135deg, var(--pk-surface-card) 0%, rgba(16, 185, 129, 0.14) 140%);
}
:root[data-theme="dark"] .pk-otp-field.has-error .pk-otp-input {
    background: linear-gradient(135deg, var(--pk-surface-card) 0%, rgba(239, 68, 68, 0.14) 140%);
}
:root[data-theme="dark"] .pk-auth-identifier {
    background: linear-gradient(135deg, var(--pk-surface-card) 0%, rgba(99, 102, 241, 0.14) 160%);
    color: var(--pk-text-strong);
    border-color: rgba(99, 102, 241, 0.4) !important;
}
:root[data-theme="dark"] .pk-field.is-prefilled .pk-auth-input {
    background: rgba(16, 185, 129, 0.14);
}
:root[data-theme="dark"] .pk-field-label-hint {
    background: rgba(16, 185, 129, 0.2);
    color: #6ee7b7;
}
:root[data-theme="dark"] .pk-chip-success {
    background: rgba(16, 185, 129, 0.2) !important;
    color: #6ee7b7 !important;
}

/* Flash-сообщения — светлые жёлто/красные фоны в секции 16. */
:root[data-theme="dark"] .pk-chat-status.is-warning {
    background: rgba(245, 158, 11, 0.18);
    color: #fbbf24;
}
:root[data-theme="dark"] .pk-chat-status.is-danger {
    background: rgba(239, 68, 68, 0.18);
    color: #f87171;
}

/* Category/stat cards, gradient-based — заливка светлым → тёмным. */
:root[data-theme="dark"] .cat-card,
:root[data-theme="dark"] .pk-chat-card,
:root[data-theme="dark"] .pk-response-card {
    background: var(--pk-surface-card);
}

/* hero button-fill — белый на градиенте, остаётся. Но button-outline снова
   читаемый за счёт того, что hero сам градиентный → правила оставляем. */

/* ===== 29. Error pages (404 / 403 / 400) ================================ */
/* 500 — отдельный standalone-шаблон с inline-стилями (templates/500.html),
 * чтобы рендериться даже когда упал base.html / БД / cache. */
.pk-error-page {
    max-width: 460px;
    margin: 56px auto 32px;
    padding: 0 var(--pk-s-4);
    text-align: center;
}
.pk-error-illustration {
    position: relative;
    width: 112px;
    height: 112px;
    margin: 0 auto 22px;
    border-radius: var(--pk-r-xl);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--pk-shadow-md);
}
.pk-error-illustration .icon { font-size: 46px; }
.pk-error-illustration--info {
    background: var(--pk-primary-50);
    color: var(--pk-primary-600);
}
.pk-error-illustration--warn {
    background: rgba(234, 179, 8, 0.14);   /* amber-400 @ 14% */
    color: #b45309;                         /* amber-700 */
}
.pk-error-illustration--danger {
    background: rgba(239, 68, 68, 0.12);    /* red-500 @ 12% */
    color: #b91c1c;                         /* red-700 */
}
.pk-error-code {
    position: absolute;
    bottom: -10px; right: -10px;
    background: var(--pk-grad-primary);
    color: #fff;
    padding: 4px 12px;
    border-radius: var(--pk-r-pill);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    box-shadow: var(--pk-shadow-glow);
}
.pk-error-title {
    margin: 0 0 10px;
    font-size: 24px;
    font-weight: 700;
    color: var(--pk-text-strong);
}
.pk-error-text {
    margin: 0 0 24px;
    color: var(--pk-text-muted);
    font-size: 14.5px;
    line-height: 1.55;
}
.pk-error-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 18px;
}
.pk-error-actions .button { width: 100%; }
.pk-error-meta {
    margin-top: 12px;
    padding: 10px 12px;
    background: var(--pk-bg-elevated);
    border: 1px solid var(--pk-border);
    border-radius: var(--pk-r-md);
    font-size: 12.5px;
    color: var(--pk-text-muted);
    word-break: break-all;
}
.pk-error-meta code {
    background: rgba(99, 102, 241, 0.10);
    padding: 1px 6px;
    border-radius: 4px;
    font-family: ui-monospace, "SF Mono", "Menlo", monospace;
    font-size: 12px;
    color: var(--pk-primary-700);
}

/* Dark-theme: подсветить варианты иллюстраций (warn/danger используют
 * жёсткие цвета — токены не помогут, в темной их читаемость надо помочь). */
:root[data-theme="dark"] .pk-error-illustration--warn {
    background: rgba(234, 179, 8, 0.18);
    color: #fbbf24;
}
:root[data-theme="dark"] .pk-error-illustration--danger {
    background: rgba(239, 68, 68, 0.20);
    color: #fca5a5;
}
:root[data-theme="dark"] .pk-error-meta code {
    background: rgba(165, 180, 252, 0.14);
    color: var(--pk-primary-300);
}

@media (min-width: 720px) {
    .pk-error-actions {
        flex-direction: row;
        justify-content: center;
    }
    .pk-error-actions .button { width: auto; min-width: 180px; }
}


/* ===== 30. Address autocomplete (.pk-address-input) ====================== */
.pk-address-input {
    position: relative;
}
/* Inner wrapper: position-relative anchor только для input + status badge.
 * Корень `.pk-address-input` тоже relative — но он растёт за счёт dropdown'а
 * (position: absolute, но с реальным top: 100% выпадает за wrapper) и hint'а
 * (in-flow). Если status был бы absolute от корня — он бы уплывал вниз
 * каждый раз когда внизу появляется hint. */
.pk-address-search-wrap {
    position: relative;
}
.pk-address-search {
    /* наследует общие стили input — секция 13. Просто visual hint что это
     * autocomplete: иконка лупы слева через background-image.
     * Справа резервируем место под status-индикатор (.pk-address-status). */
    background-image: url("data:image/svg+xml;utf8,<svg xmlns=%27http://www.w3.org/2000/svg%27 width=%2716%27 height=%2716%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%2364748b%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27><circle cx=%2711%27 cy=%2711%27 r=%278%27/><line x1=%2721%27 y1=%2721%27 x2=%2716.65%27 y2=%2716.65%27/></svg>");
    background-repeat: no-repeat;
    background-position: 12px center;
    padding-left: 38px;
    padding-right: 36px;
}

/* Status badge in the right corner: ✓ / пусто. Цвет красится от состояния.
 * Anchor — `.pk-address-search-wrap`, а не корень — иначе при появлении
 * hint'а / dropdown'а badge уплывает вниз. */
.pk-address-status {
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    color: var(--pk-success-700, #15803d);
    pointer-events: none;
    border-radius: 50%;
    transition: background var(--pk-t-fast);
}
.pk-address-input.is-confirmed .pk-address-status {
    background: rgba(34, 197, 94, .15);
}
:root[data-theme="dark"] .pk-address-input.is-confirmed .pk-address-status {
    background: rgba(34, 197, 94, .22);
    color: #4ade80;
}

/* Dirty state — input не совпадает с подтверждённым выбором.
 * Подсвечиваем border мягким жёлтым, чтобы юзер видел: «надо выбрать». */
.pk-address-input.is-dirty .pk-address-search {
    border-color: #f59e0b;            /* amber-500 */
    box-shadow: 0 0 0 3px rgba(245, 158, 11, .14);
}
:root[data-theme="dark"] .pk-address-input.is-dirty .pk-address-search {
    border-color: #fbbf24;
    box-shadow: 0 0 0 3px rgba(251, 191, 36, .18);
}

/* Inline hint (под input) — показывается на blur при «грязном» состоянии,
 * объясняет почему текст откатился или что нужно выбрать. */
.pk-address-hint {
    margin-top: 6px;
    padding: 6px 10px;
    background: rgba(245, 158, 11, .10);
    border-radius: var(--pk-r-sm);
    font-size: 12.5px;
    color: #92400e;                    /* amber-800 */
    line-height: 1.4;
}
:root[data-theme="dark"] .pk-address-hint {
    background: rgba(251, 191, 36, .14);
    color: #fcd34d;                    /* amber-300 */
}
.pk-address-hint[hidden] { display: none; }

/* No-results placeholder — отдельный стиль чтобы не выглядел кликабельным. */
.pk-address-suggest-item.is-no-results {
    cursor: default;
    opacity: 0.7;
}
.pk-address-suggest-item.is-no-results:hover {
    background: transparent;
}
.pk-address-suggest {
    list-style: none;
    margin: 4px 0 0;
    padding: 4px;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    /* Над всем: tabbar = 600, modal/sheet = 1000+. Подбираем 700, чтобы быть
     * над таббаром, но ниже системных модалок. */
    z-index: 700;
    /* Phase 92: больше высоты для browsing'а — лимит API поднят до 50,
       max-height 360px = ~9 рядов до начала scroll'а. На очень коротких
       viewport'ах (<480px height) clamp'имся в 60vh. Smooth scroll +
       overscroll-contain — не «выбрасывает» страницу при прокрутке
       до края dropdown'а. */
    max-height: min(360px, 60vh);
    overflow-y: auto;
    overscroll-behavior: contain;
    scroll-behavior: smooth;
    background: var(--pk-surface-card);
    border: 1px solid var(--pk-border);
    border-radius: var(--pk-r-md);
    box-shadow: var(--pk-shadow-lg);
}
.pk-address-suggest[hidden] { display: none; }
.pk-address-suggest-item {
    padding: 9px 12px;
    border-radius: var(--pk-r-sm);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 2px;
    transition: background var(--pk-t-fast);
}
.pk-address-suggest-item:hover,
.pk-address-suggest-item.is-active {
    background: var(--pk-primary-50);
}
.pk-address-suggest-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--pk-text-strong);
    line-height: 1.3;
}
.pk-address-suggest-name mark {
    background: var(--pk-primary-100);
    color: var(--pk-primary-700);
    padding: 0 2px;
    border-radius: 3px;
}
.pk-address-suggest-path {
    font-size: 12px;
    color: var(--pk-text-muted);
    line-height: 1.2;
}

/* Dark theme overrides — primary-50 на тёмном фоне светится — приглушим. */
:root[data-theme="dark"] .pk-address-suggest-item:hover,
:root[data-theme="dark"] .pk-address-suggest-item.is-active {
    background: rgba(99, 102, 241, 0.16);
}
:root[data-theme="dark"] .pk-address-suggest-name mark {
    background: rgba(165, 180, 252, 0.18);
    color: var(--pk-primary-300);
}


/* Toggle-line внутри pk-filter-group: чекбокс + подпись + hint */
.pk-filter-toggle-line {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 10px;
    row-gap: 2px;
    align-items: center;
    cursor: pointer;
    font-size: 14px;
    color: var(--pk-text-strong);
    user-select: none;
}
.pk-filter-toggle-line input[type=checkbox] {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--pk-primary-600);
}
.pk-filter-toggle-line > span:nth-child(2) { font-weight: 600; }
.pk-filter-toggle-hint {
    grid-column: 2 / 3;
    font-size: 12px;
    color: var(--pk-text-muted);
    font-weight: 400;
}

/* === 31. Form auto-save banner =========================================== */
.pk-autosave-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    margin: 0 var(--pk-s-4) var(--pk-s-3);
    background: var(--pk-primary-50);
    border: 1px solid var(--pk-primary-200);
    border-radius: var(--pk-r-md);
    font-size: 13.5px;
    color: var(--pk-text-strong);
    flex-wrap: wrap;
}
.pk-autosave-banner-text { flex: 1; min-width: 200px; }
.pk-autosave-banner-actions { display: flex; gap: 6px; flex-shrink: 0; }
.pk-autosave-banner button {
    padding: 6px 12px;
    border-radius: var(--pk-r-sm);
    border: 1px solid var(--pk-border);
    background: var(--pk-bg-elevated);
    color: var(--pk-text-strong);
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--pk-t-fast);
}
.pk-autosave-banner button:hover { background: var(--pk-primary-100); }
.pk-autosave-banner .pk-autosave-restore {
    background: var(--pk-grad-primary);
    color: #fff;
    border-color: transparent;
}
.pk-autosave-banner .pk-autosave-restore:hover {
    filter: brightness(1.05);
}
:root[data-theme="dark"] .pk-autosave-banner {
    background: rgba(99, 102, 241, 0.16);
    border-color: rgba(99, 102, 241, 0.4);
}
:root[data-theme="dark"] .pk-autosave-banner button:hover {
    background: rgba(99, 102, 241, 0.22);
}

/* === 32. Reviews & reputation =========================================== */
.pk-rep-chip {
    display: inline-block;
    background: rgba(245, 158, 11, .14);   /* amber-500 @ 14% */
    color: #b45309;                         /* amber-700 */
    padding: 1px 6px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
}
:root[data-theme="dark"] .pk-rep-chip {
    background: rgba(251, 191, 36, .18);
    color: #fbbf24;
}

.pk-reviews {
    margin: 0 var(--pk-s-4);
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.pk-review-item {
    background: var(--pk-bg-elevated);
    border: 1px solid var(--pk-border);
    border-radius: var(--pk-r-lg);
    padding: 12px 14px;
}
.pk-review-head {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 6px;
    font-size: 13px;
}
.pk-review-stars {
    color: #f59e0b;        /* amber-500 — звёзды всегда жёлтые в обоих темах */
    font-size: 14px;
    letter-spacing: 1px;
}
.pk-review-author {
    font-weight: 600;
    color: var(--pk-text-strong);
}
.pk-review-text {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: var(--pk-text);
    white-space: pre-wrap;
}

/* Форма «оставить отзыв» — карточка-выделение через primary-50 background. */
.pk-review-form {
    background: var(--pk-primary-50);
    border: 1px solid var(--pk-primary-200);
    border-radius: var(--pk-r-lg);
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
:root[data-theme="dark"] .pk-review-form {
    background: rgba(99, 102, 241, .12);
    border-color: rgba(99, 102, 241, .35);
}
.pk-review-form-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--pk-text-strong);
}

/* Звёздные radio: 5 штук, click ставит rating, hover/активные выделяются. */
.pk-rating-radios {
    display: flex;
    gap: 6px;
    justify-content: center;
}
.pk-rating-radio {
    cursor: pointer;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    width: 48px;
    padding: 8px 4px;
    border-radius: var(--pk-r-md);
    background: var(--pk-bg-elevated);
    border: 1px solid var(--pk-border);
    color: var(--pk-text-muted);
    font-size: 22px;
    transition: background var(--pk-t-fast), color var(--pk-t-fast),
                border-color var(--pk-t-fast);
}
.pk-rating-radio input[type=radio] {
    /* visually hidden, но accessible */
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.pk-rating-radio:hover,
.pk-rating-radio:has(input[type=radio]:checked) {
    background: rgba(245, 158, 11, .14);
    color: #f59e0b;
    border-color: #f59e0b;
}
.pk-rating-radio-num {
    font-size: 11px;
    font-weight: 600;
    margin-top: 2px;
    color: var(--pk-text-muted);
}
.pk-rating-radio:has(input[type=radio]:checked) .pk-rating-radio-num {
    color: #b45309;
}
:root[data-theme="dark"] .pk-rating-radio:hover,
:root[data-theme="dark"] .pk-rating-radio:has(input[type=radio]:checked) {
    background: rgba(251, 191, 36, .18);
    color: #fbbf24;
    border-color: #fbbf24;
}

/* Textarea внутри review-form — подкрашена под форму. */
.pk-review-form textarea {
    width: 100%;
    border: 1px solid var(--pk-border);
    border-radius: var(--pk-r-md);
    padding: 10px 12px;
    font-family: inherit;
    font-size: 14px;
    background: var(--pk-surface-card);
    color: var(--pk-text);
    resize: vertical;
    min-height: 70px;
}

/* === 33. Notifications feed (in-app) ==================================== */
.pk-feed {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0 var(--pk-s-4);
}
.pk-feed-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: var(--pk-bg-elevated);
    border: 1px solid var(--pk-border);
    border-radius: var(--pk-r-lg);
    text-decoration: none;
    color: var(--pk-text);
    transition: background var(--pk-t-fast), border-color var(--pk-t-fast);
    position: relative;
}
.pk-feed-item:hover {
    background: var(--pk-surface-card);
    border-color: var(--pk-primary-300);
}
.pk-feed-item.is-fresh {
    background: var(--pk-primary-50);
    border-color: var(--pk-primary-200);
}
:root[data-theme="dark"] .pk-feed-item.is-fresh {
    background: rgba(99, 102, 241, .14);
    border-color: rgba(99, 102, 241, .35);
}
.pk-feed-icon {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--pk-primary-50);
    color: var(--pk-primary-600);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.pk-feed-icon .icon { font-size: 20px; }
:root[data-theme="dark"] .pk-feed-icon {
    background: rgba(99, 102, 241, .18);
    color: var(--pk-primary-300);
}
/* Per-kind colors. */
.pk-feed-item--response_accepted .pk-feed-icon,
.pk-feed-item--delivery_done .pk-feed-icon {
    background: rgba(34, 197, 94, .14);
    color: #15803d;
}
.pk-feed-item--response_rejected .pk-feed-icon {
    background: rgba(239, 68, 68, .14);
    color: #b91c1c;
}
.pk-feed-item--review_received .pk-feed-icon {
    background: rgba(245, 158, 11, .14);
    color: #b45309;
}
:root[data-theme="dark"] .pk-feed-item--response_accepted .pk-feed-icon,
:root[data-theme="dark"] .pk-feed-item--delivery_done .pk-feed-icon {
    background: rgba(34, 197, 94, .20);
    color: #4ade80;
}
:root[data-theme="dark"] .pk-feed-item--response_rejected .pk-feed-icon {
    background: rgba(239, 68, 68, .22);
    color: #fca5a5;
}
:root[data-theme="dark"] .pk-feed-item--review_received .pk-feed-icon {
    background: rgba(251, 191, 36, .18);
    color: #fbbf24;
}
/* Phase 17 — smart-match notifications: indigo/teal accents. */
.pk-feed-item--parcel_for_trip .pk-feed-icon {
    background: rgba(99, 102, 241, .14);
    color: var(--pk-primary-600);
}
.pk-feed-item--trip_for_parcel .pk-feed-icon {
    background: rgba(20, 184, 166, .14);
    color: #0d9488;
}
:root[data-theme="dark"] .pk-feed-item--parcel_for_trip .pk-feed-icon {
    background: rgba(99, 102, 241, .20);
    color: var(--pk-primary-300);
}
:root[data-theme="dark"] .pk-feed-item--trip_for_parcel .pk-feed-icon {
    background: rgba(20, 184, 166, .20);
    color: #2dd4bf;
}
.pk-feed-item--parcel_offered .pk-feed-icon {
    background: rgba(245, 158, 11, .14);
    color: #b45309;
}
:root[data-theme="dark"] .pk-feed-item--parcel_offered .pk-feed-icon {
    background: rgba(245, 158, 11, .20);
    color: #fbbf24;
}

.pk-feed-body { flex: 1; min-width: 0; }
.pk-feed-title {
    font-size: 14px;
    font-weight: 500;
    color: var(--pk-text-strong);
    line-height: 1.35;
}
.pk-feed-time {
    margin-top: 2px;
    font-size: 12px;
    color: var(--pk-text-muted);
}

/* Маленькая красная точка для непрочитанных. */
.pk-feed-dot {
    width: 8px;
    height: 8px;
    background: var(--pk-danger-500, #ef4444);
    border-radius: 50%;
    flex-shrink: 0;
}

/* Bell icon в навбаре с badge непрочитанных. */
.pk-bell-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    color: var(--pk-text-strong);
    transition: background var(--pk-t-fast);
}
.pk-bell-link:hover {
    background: var(--pk-primary-50);
}
:root[data-theme="dark"] .pk-bell-link:hover {
    background: rgba(99, 102, 241, .14);
}
.pk-bell-link .icon { font-size: 22px; }
.pk-bell-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    background: #ef4444;
    color: #fff;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
    box-shadow: 0 0 0 2px var(--pk-bg);
}

/* Verified-email badge — синяя галочка рядом с nickname'ом. */
.pk-verified-badge {
    color: #3b82f6;        /* blue-500 */
    font-size: 16px !important;
    margin-left: 4px;
    vertical-align: -2px;
}
:root[data-theme="dark"] .pk-verified-badge {
    color: #60a5fa;        /* blue-400 (светлее на тёмном фоне) */
}

/* Draft dot in mine.html tabs (рядом с другими статусными dot'ами). */
.pk-tab-dot.is-draft-dot {
    background: var(--pk-text-muted);
}

/* Form actions: 2 кнопки stacked с маленьким gap'ом. */
.pk-form-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* === 34. Public user profile (`/u/<nickname>/`) ========================= */
.pk-user-hero {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin: 0 var(--pk-s-4) var(--pk-s-4);
    padding: 18px;
    background: var(--pk-bg-elevated);
    border: 1px solid var(--pk-border);
    border-radius: var(--pk-r-xl);
    box-shadow: var(--pk-shadow-sm);
    flex-wrap: wrap;
}
.pk-user-hero-avatar {
    width: 76px;
    height: 76px;
    flex-shrink: 0;
    border-radius: 50%;
    overflow: hidden;
    background: var(--pk-grad-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    font-weight: 700;
    text-transform: uppercase;
}
.pk-user-hero-avatar img { width: 100%; height: 100%; object-fit: cover; }
.pk-user-hero-avatar-letter { line-height: 1; }
.pk-user-hero-body { flex: 1; min-width: 200px; }
.pk-user-hero-name {
    display: flex; align-items: center; gap: 6px;
    font-size: 22px; font-weight: 700;
    color: var(--pk-text-strong);
    line-height: 1.2;
    flex-wrap: wrap;
}
/* Legacy: ранее тут был inline checkmark_seal_fill в имени.
   Заменён на .pk-verified-chip в .pk-user-hero-meta для ясности. */
.pk-user-hero-verified { display: none; }
.pk-user-hero-fullname {
    margin-top: 2px;
    font-size: 14px;
    color: var(--pk-text-muted);
}
.pk-user-hero-meta {
    margin-top: 8px;
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
    font-size: 13px;
}
.pk-user-hero-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--pk-text-muted);
}
.pk-user-hero-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
    flex-wrap: wrap;
    align-items: center;
}
.pk-user-hero-actions .button,
.pk-user-hero-actions .pk-share-btn {
    /* Не растягиваемся на всю ширину родителя — F7 .button по умолчанию
       стремится к block. Сжимаемся по контенту. */
    width: auto;
    flex: 0 0 auto;
    white-space: nowrap;
}
@media (max-width: 480px) {
    .pk-user-hero-actions {
        width: 100%;
        justify-content: flex-start;
        margin-top: 4px;
    }
}

.pk-user-about {
    margin: 0 var(--pk-s-4) var(--pk-s-4);
    padding: 12px 14px;
    background: var(--pk-bg-elevated);
    border: 1px solid var(--pk-border);
    border-radius: var(--pk-r-md);
    font-size: 14px;
    color: var(--pk-text);
    line-height: 1.55;
}

.pk-review-parcel-link {
    color: var(--pk-primary-600);
    text-decoration: none;
    font-size: 12.5px;
}
.pk-review-parcel-link:hover { text-decoration: underline; }

/* === Share button + toast =============================================== */
.pk-share-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 1px solid var(--pk-border);
    background: var(--pk-bg-elevated);
    color: var(--pk-text-strong);
    border-radius: var(--pk-r-pill);
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--pk-t-fast), border-color var(--pk-t-fast);
}
.pk-share-btn:hover {
    background: var(--pk-primary-50);
    border-color: var(--pk-primary-300);
}
:root[data-theme="dark"] .pk-share-btn:hover {
    background: rgba(99, 102, 241, .14);
    border-color: rgba(99, 102, 241, .35);
}
.pk-share-btn .icon { font-size: 18px; }
.pk-share-btn--icon {
    width: 38px;
    height: 38px;
    padding: 0;
    border-radius: 50%;
}
.pk-share-btn--icon .pk-share-btn-text { display: none; }

/* В user-hero — share-btn рендерится в --inline и должен совпадать с
   соседними «Edit profile» / «Report». Эти кнопки — F7 `.button.button-outline`,
   высота ~36px, скруглённые углы. Подгоняем pk-share-btn под этот стиль,
   чтобы визуально была консистентна. */
.pk-user-hero-actions .pk-share-btn--inline {
    padding: 6px 14px;
    border-radius: 8px;
    font-size: 13px;
    height: 36px;
    line-height: 1;
}
.pk-user-hero-actions .pk-share-btn--inline .icon {
    font-size: 16px;
}

/* Verified chip (на месте бывшего checkmark_seal_fill icon)
   — ясный label «Verified» с галочкой в кружочке. Цвет — мягкий зелёный,
   ассоциируется с «проверено», без мистики iOS-печати. */
.pk-verified-chip {
    background: var(--pk-success-50, #ecfdf5);
    color: var(--pk-success-700, #047857);
    border-radius: 999px;
    padding: 2px 10px;
    font-size: 12px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
:root[data-theme="dark"] .pk-verified-chip {
    background: rgba(16, 185, 129, .14);
    color: #34d399;
}

/* В hero парсели — убираем border, делаем «полупрозрачный glass». */
.pk-parcel-hero-actions {
    position: absolute;
    top: 12px; right: 12px;
    display: flex; gap: 8px;
    z-index: 2;
}
.pk-parcel-hero-actions .pk-share-btn,
.pk-parcel-hero-actions .pk-copy-btn,
.pk-parcel-hero-actions .fav-btn {
    background: rgba(255, 255, 255, .92);
    /* Glass-effect фон всегда светлый — иконки тоже всегда тёмные,
       не зависят от темы. Иначе в dark light-цвет иконки сольётся с фоном. */
    color: #1f2937;
    border-color: transparent;
    box-shadow: var(--pk-shadow-sm);
}
.pk-parcel-hero-actions .pk-share-btn:hover,
.pk-parcel-hero-actions .pk-copy-btn:hover,
.pk-parcel-hero-actions .fav-btn:hover {
    background: #fff;
    color: #111827;
}
.pk-parcel-hero-actions .pk-share-btn .icon,
.pk-parcel-hero-actions .pk-copy-btn .icon,
.pk-parcel-hero-actions .fav-btn .icon {
    color: inherit;
}

/* Phase 66: trip-hero-actions mirror of parcel-hero-actions (share + copy
   in top-right corner of hero, glass-style icon buttons). */
.pk-trip-hero-actions {
    position: absolute;
    top: 12px; right: 12px;
    display: flex; gap: 8px;
    z-index: 2;
}
.pk-trip-hero { position: relative; }  /* ensure absolute children anchor here */
.pk-trip-hero-actions .pk-share-btn,
.pk-trip-hero-actions .pk-copy-btn {
    background: rgba(255, 255, 255, .92);
    color: #1f2937;
    border-color: transparent;
    box-shadow: var(--pk-shadow-sm);
}
.pk-trip-hero-actions .pk-share-btn:hover,
.pk-trip-hero-actions .pk-copy-btn:hover {
    background: #fff;
    color: #111827;
}
.pk-trip-hero-actions .pk-share-btn .icon,
.pk-trip-hero-actions .pk-copy-btn .icon { color: inherit; }

/* Author-card теперь ссылка — добавим chev справа */
.pk-author-card {
    text-decoration: none;
    color: inherit;
}
.pk-author-card:hover {
    background: var(--pk-primary-50);
    border-color: var(--pk-primary-300);
}
:root[data-theme="dark"] .pk-author-card:hover {
    background: rgba(99, 102, 241, .14);
    border-color: rgba(99, 102, 241, .35);
}
.pk-author-card-chev {
    color: var(--pk-text-muted);
    font-size: 18px;
    flex-shrink: 0;
}

/* Toast — стиль F7 уже хороший, добавим маленький твик для нашего class. */
.pk-toast-share {
    /* F7 кладёт свой стиль; наш class — лишь точка для потенциальных override'ов. */
}
.pk-toast-error .toast-content { color: #b91c1c; }

/* === 35. Online presence indicator ===================================== */
.pk-online-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #22c55e;            /* green-500 — «жив» */
    box-shadow: 0 0 0 2px var(--pk-bg-elevated);
}
/* Большой вариант — белая рамка для видимости поверх аватара. */
.pk-online-dot--lg {
    width: 16px;
    height: 16px;
    position: absolute;
    bottom: 2px;
    right: 2px;
    box-shadow: 0 0 0 3px var(--pk-bg-elevated);
}
.pk-user-hero-avatar { position: relative; }

.pk-online-text {
    color: #15803d;                 /* green-700 для контраста */
    font-weight: 600;
}
:root[data-theme="dark"] .pk-online-text {
    color: #4ade80;
}

/* === 36. Report-user dialog (B4) ====================================== */
/* Кнопка-флаг в hero-actions: outline-стиль, но красноватый при hover. */
.pk-report-btn-trigger {
    color: var(--pk-text-muted);
    transition: color var(--pk-t-fast), border-color var(--pk-t-fast);
}
.pk-report-btn-trigger:hover {
    color: #b91c1c;                /* red-700 */
    border-color: #ef4444;
}
:root[data-theme="dark"] .pk-report-btn-trigger:hover {
    color: #fca5a5;
    border-color: rgba(239, 68, 68, .5);
}

/* Полноэкранная подложка + центрированная карточка с формой. */
.pk-report-dialog {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(15, 23, 42, .55);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 150ms ease;
}
.pk-report-dialog.is-open {
    opacity: 1;
    pointer-events: auto;
}
.pk-report-dialog[hidden] { display: none !important; }
.pk-report-dialog-card {
    width: 100%;
    max-width: 420px;
    background: var(--pk-bg);
    border-radius: var(--pk-r-xl);
    box-shadow: 0 16px 48px rgba(0, 0, 0, .35);
    padding: 18px;
}
.pk-report-dialog-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}
.pk-report-dialog-head h2 {
    margin: 0;
    font-size: 17px;
    color: var(--pk-text-strong);
}
.pk-report-dialog-close {
    width: 32px; height: 32px;
    border: none; background: transparent;
    color: var(--pk-text-muted);
    cursor: pointer;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
}
.pk-report-dialog-close:hover { background: var(--pk-bg-elevated); }
.pk-report-reasons {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 12px;
}
.pk-report-reason {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border: 1px solid var(--pk-border);
    border-radius: var(--pk-r-md);
    cursor: pointer;
    font-size: 14px;
    color: var(--pk-text);
    transition: background var(--pk-t-fast), border-color var(--pk-t-fast);
}
.pk-report-reason:has(input:checked) {
    background: rgba(239, 68, 68, .08);
    border-color: rgba(239, 68, 68, .35);
}
:root[data-theme="dark"] .pk-report-reason:has(input:checked) {
    background: rgba(239, 68, 68, .14);
    border-color: rgba(239, 68, 68, .50);
}
.pk-report-reason input[type=radio] {
    accent-color: #ef4444;
}
.pk-report-dialog textarea {
    width: 100%;
    border: 1px solid var(--pk-border);
    border-radius: var(--pk-r-md);
    padding: 10px 12px;
    font-family: inherit;
    font-size: 14px;
    background: var(--pk-surface-card);
    color: var(--pk-text);
    resize: vertical;
    min-height: 70px;
    margin-bottom: 12px;
}

/* === 37. Contact form (kind radio chips, Phase 84 redesign) ============= */
/*
 * Каждый chip — icon-card с цветной аватаркой иконки слева, label справа,
 * скрытый radio. На hover — lift + accent border. На :has(input:checked) —
 * полноценный «выбран» state: gradient border, accent background, и
 * галочка-индикатор справа сверху.
 *
 * Per-kind цвета через `[data-kind="..."]`:
 *   question    → indigo (primary)
 *   partnership → emerald (success)
 *   bug         → amber  (warning)
 *   feedback    → violet
 *   other       → slate  (neutral)
 */
.pk-contact-kinds {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 10px;
    margin-bottom: 8px;
}
.pk-contact-kind {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: var(--pk-surface-card, #fff);
    border: 1.5px solid var(--pk-border, #e5e7eb);
    border-radius: 14px;
    cursor: pointer;
    font-size: 14px;
    line-height: 1.3;
    color: var(--pk-text);
    transition: border-color 0.18s ease, background 0.18s ease,
                box-shadow 0.18s ease, transform 0.12s ease;
    user-select: none;
}
.pk-contact-kind:hover {
    border-color: var(--pk-primary-300, #a5b4fc);
    background: var(--pk-primary-50, #eef2ff);
    transform: translateY(-1px);
    box-shadow: 0 4px 14px -8px rgba(99, 102, 241, .35);
}
/* Hidden radio — accessibility preserved (still focusable + keyboard nav). */
.pk-contact-kind input[type=radio] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}
.pk-contact-kind input[type=radio]:focus-visible + .pk-contact-kind-icon {
    box-shadow: 0 0 0 3px rgba(99, 102, 241, .35);
}
.pk-contact-kind-icon {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: linear-gradient(135deg, var(--pk-primary-500, #6366f1), var(--pk-primary-600, #4f46e5));
    box-shadow: 0 4px 10px -4px rgba(99, 102, 241, .45);
    transition: transform 0.18s ease;
}
.pk-contact-kind-icon .icon { font-size: 19px; }
.pk-contact-kind-label {
    font-weight: 600;
    color: var(--pk-text);
}
.pk-contact-kind-check {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--pk-primary-500, #6366f1);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: scale(0.6);
    transition: opacity 0.18s ease, transform 0.18s ease;
}
.pk-contact-kind-check .icon { font-size: 13px; }

/* Per-kind accent palette — applied to icon background and (when checked)
   border + check-indicator. */
.pk-contact-kind[data-kind="question"] .pk-contact-kind-icon {
    background: linear-gradient(135deg, #6366f1, #4f46e5);
    box-shadow: 0 4px 10px -4px rgba(99, 102, 241, .45);
}
.pk-contact-kind[data-kind="partnership"] .pk-contact-kind-icon {
    background: linear-gradient(135deg, #10b981, #059669);
    box-shadow: 0 4px 10px -4px rgba(16, 185, 129, .45);
}
.pk-contact-kind[data-kind="bug"] .pk-contact-kind-icon {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    box-shadow: 0 4px 10px -4px rgba(245, 158, 11, .45);
}
.pk-contact-kind[data-kind="feedback"] .pk-contact-kind-icon {
    background: linear-gradient(135deg, #8b5cf6, #7c3aed);
    box-shadow: 0 4px 10px -4px rgba(139, 92, 246, .45);
}
.pk-contact-kind[data-kind="other"] .pk-contact-kind-icon {
    background: linear-gradient(135deg, #64748b, #475569);
    box-shadow: 0 4px 10px -4px rgba(100, 116, 139, .45);
}

/* Checked state — strong, обвiously selected. */
.pk-contact-kind:has(input:checked) {
    border-color: var(--pk-primary-500, #6366f1);
    background: linear-gradient(135deg, #eef2ff 0%, #faf5ff 100%);
    box-shadow: 0 8px 20px -10px rgba(99, 102, 241, .50);
}
.pk-contact-kind:has(input:checked) .pk-contact-kind-icon {
    transform: scale(1.06);
}
.pk-contact-kind:has(input:checked) .pk-contact-kind-check {
    opacity: 1;
    transform: scale(1);
}

/* Per-kind checked-border colors — match icon accent. */
.pk-contact-kind[data-kind="partnership"]:has(input:checked) {
    border-color: #10b981;
    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
    box-shadow: 0 8px 20px -10px rgba(16, 185, 129, .50);
}
.pk-contact-kind[data-kind="partnership"]:has(input:checked) .pk-contact-kind-check {
    background: #10b981;
}
.pk-contact-kind[data-kind="bug"]:has(input:checked) {
    border-color: #f59e0b;
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
    box-shadow: 0 8px 20px -10px rgba(245, 158, 11, .50);
}
.pk-contact-kind[data-kind="bug"]:has(input:checked) .pk-contact-kind-check {
    background: #f59e0b;
}
.pk-contact-kind[data-kind="feedback"]:has(input:checked) {
    border-color: #8b5cf6;
    background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 100%);
    box-shadow: 0 8px 20px -10px rgba(139, 92, 246, .50);
}
.pk-contact-kind[data-kind="feedback"]:has(input:checked) .pk-contact-kind-check {
    background: #8b5cf6;
}
.pk-contact-kind[data-kind="other"]:has(input:checked) {
    border-color: #64748b;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    box-shadow: 0 8px 20px -10px rgba(100, 116, 139, .50);
}
.pk-contact-kind[data-kind="other"]:has(input:checked) .pk-contact-kind-check {
    background: #64748b;
}

/* Dark mode adjustments. */
:root[data-theme="dark"] .pk-contact-kind {
    background: var(--pk-surface-card);
    border-color: rgba(165, 180, 252, .18);
    color: #e5e7eb;
}
:root[data-theme="dark"] .pk-contact-kind:hover {
    border-color: rgba(165, 180, 252, .55);
    background: rgba(99, 102, 241, .12);
}
:root[data-theme="dark"] .pk-contact-kind:has(input:checked) {
    background: linear-gradient(135deg, rgba(99, 102, 241, .18) 0%, rgba(139, 92, 246, .14) 100%);
    border-color: rgba(165, 180, 252, .65);
    box-shadow: 0 8px 20px -10px rgba(99, 102, 241, .55);
}
:root[data-theme="dark"] .pk-contact-kind-label { color: #f3f4f6; }

/* === 38. Saved searches (A2) =========================================== */
/* Появляется на /parcels/ когда юзер применил хотя бы один фильтр.
   На /parcels/saved/ повторно используются цвета bookmark + bell для UX.   */
.pk-savesearch-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 12px;
    margin: 8px 0 0;
    flex-wrap: wrap;
}
.pk-savesearch-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--pk-primary-50);
    color: var(--pk-primary-700);
    border: 1px solid var(--pk-primary-200);
    border-radius: 999px;
    padding: 6px 12px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--pk-t-fast), border-color var(--pk-t-fast);
}
.pk-savesearch-btn:hover {
    background: var(--pk-primary-100);
}
:root[data-theme="dark"] .pk-savesearch-btn {
    background: rgba(99, 102, 241, .14);
    color: var(--pk-primary-300);
    border-color: rgba(99, 102, 241, .35);
}
:root[data-theme="dark"] .pk-savesearch-btn:hover {
    background: rgba(99, 102, 241, .22);
}
.pk-savesearch-state {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--pk-success-700, #15803d);
    font-size: 13px;
    font-weight: 600;
}
:root[data-theme="dark"] .pk-savesearch-state {
    color: var(--pk-success-400, #4ade80);
}
.pk-savesearch-link {
    color: var(--pk-primary-600);
    font-size: 13px;
    text-decoration: none;
    margin-left: auto;
}
.pk-savesearch-link:hover { text-decoration: underline; }

.pk-savesearch-form {
    margin: 8px 12px 0;
    padding: 12px;
    border: 1px solid var(--pk-border);
    border-radius: var(--pk-r-md);
    background: var(--pk-surface-card);
}
.pk-savesearch-row {
    display: flex;
    gap: 8px;
    align-items: center;
}
.pk-savesearch-input {
    flex: 1 1 auto;
    min-width: 0;  /* flex items default to min-content; reset to 0 */
    border: 1px solid var(--pk-border);
    border-radius: var(--pk-r-md);
    padding: 9px 12px;
    font-size: 14px;
    background: var(--pk-surface);
    color: var(--pk-text);
}
.pk-savesearch-input:focus {
    outline: none;
    border-color: var(--pk-primary-400);
    box-shadow: 0 0 0 3px var(--pk-primary-50);
}
.pk-savesearch-submit {
    /* Framework7 `.button.button-fill` дефолтно ставит `width: 100%` —
       это рушило flex-layout (button съедал всю строку, input
       коллапсил до 30px). Принудительно auto-width + flex-shrink:0. */
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
    width: auto !important;
    padding: 0 16px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}
.pk-savesearch-submit .icon { font-size: 14px; }
.pk-savesearch-alerts {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    font-size: 13px;
    color: var(--pk-text-muted);
    cursor: pointer;
}
.pk-savesearch-alerts input[type=checkbox] {
    accent-color: var(--pk-primary-500);
}

/* Saved searches list page */
.pk-savedsearch-row {
    display: flex;
    align-items: stretch;
    gap: 8px;
    background: var(--pk-surface-card);
    border: 1px solid var(--pk-border);
    border-radius: var(--pk-r-lg);
    overflow: hidden;
}
.pk-savedsearch-card {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    text-decoration: none;
    color: var(--pk-text);
    transition: background var(--pk-t-fast);
}
.pk-savedsearch-card:hover {
    background: var(--pk-surface-hover, var(--pk-primary-50));
}
.pk-savedsearch-icon {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: var(--pk-primary-50);
    color: var(--pk-primary-600);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
}
:root[data-theme="dark"] .pk-savedsearch-icon {
    background: rgba(99, 102, 241, .14);
    color: var(--pk-primary-300);
}
.pk-savedsearch-body {
    flex: 1;
    min-width: 0;
}
.pk-savedsearch-name {
    font-weight: 600;
    font-size: 15px;
    color: var(--pk-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pk-savedsearch-summary {
    font-size: 13px;
    color: var(--pk-text-muted);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pk-savedsearch-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    flex-wrap: wrap;
}
.pk-savedsearch-date {
    color: var(--pk-text-muted);
    font-size: 12px;
}
.pk-savedsearch-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    padding-right: 8px;
}
.pk-savedsearch-form-inline { margin: 0; }
.pk-savedsearch-iconbtn {
    width: 36px;
    height: 36px;
    border: none;
    background: transparent;
    color: var(--pk-text-muted);
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--pk-t-fast), color var(--pk-t-fast);
}
.pk-savedsearch-iconbtn:hover {
    background: var(--pk-surface-hover, var(--pk-primary-50));
    color: var(--pk-text);
}
.pk-savedsearch-iconbtn.is-on {
    color: var(--pk-success-600, #16a34a);
}
.pk-savedsearch-iconbtn.is-danger:hover {
    color: var(--pk-danger-500);
    background: var(--pk-danger-50, rgba(239, 68, 68, .08));
}

/* === 39. Smart-deadline urgency chip (A7) ============================== */
/* Курьер на скролле списка должен сразу видеть «эту посылку нужно
   доставить через 3 часа» — поэтому 5 цветовых веток с понятными
   иконками. Все варианты — pill-chip 11-12px, не агрессивные.            */
.pk-urgency {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
    border: 1px solid transparent;
}
.pk-urgency-label { display: inline; }

/* Просрочено / меньше 2 часов — красный */
.pk-urgency-overdue,
.pk-urgency-urgent {
    background: var(--pk-danger-50, #fef2f2);
    color: var(--pk-danger-700, #b91c1c);
    border-color: rgba(239, 68, 68, .25);
    /* Лёгкая пульсация для urgent — привлечь внимание, не раздражая. */
    animation: pk-urgency-pulse 2.4s ease-in-out infinite;
}
:root[data-theme="dark"] .pk-urgency-overdue,
:root[data-theme="dark"] .pk-urgency-urgent {
    background: rgba(239, 68, 68, .18);
    color: #fca5a5;
    border-color: rgba(239, 68, 68, .35);
}
@keyframes pk-urgency-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: .65; }
}

/* Сегодня — оранжевый, без анимации */
.pk-urgency-today {
    background: #fff7ed;
    color: #c2410c;
    border-color: rgba(249, 115, 22, .25);
}
:root[data-theme="dark"] .pk-urgency-today {
    background: rgba(249, 115, 22, .14);
    color: #fdba74;
    border-color: rgba(249, 115, 22, .35);
}

/* Скоро — жёлтый */
.pk-urgency-soon {
    background: #fefce8;
    color: #a16207;
    border-color: rgba(234, 179, 8, .25);
}
:root[data-theme="dark"] .pk-urgency-soon {
    background: rgba(234, 179, 8, .14);
    color: #fde68a;
    border-color: rgba(234, 179, 8, .35);
}

/* Обычный (>72ч) — нейтральный серый */
.pk-urgency-normal {
    background: var(--pk-gray-50, #f9fafb);
    color: var(--pk-text-muted);
    border-color: var(--pk-border);
}
:root[data-theme="dark"] .pk-urgency-normal {
    background: rgba(148, 163, 184, .10);
    color: var(--pk-text-muted);
}

/* === 40. Bulk actions on /parcels/mine/ (A6) =========================== */
/* Toolbar over the parcel list — «Select» toggle + hint.
   Phase 75 polish: button bumped to gradient pill so it doesn't disappear
   between the colorful hero and cards.                                    */
.pk-mine-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px var(--pk-s-4) 6px;
    flex-wrap: wrap;
}
.pk-mine-toolbar-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--pk-surface-card, #fff);
    border: 1px solid var(--pk-primary-200, #c7d2fe);
    border-radius: 999px;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 700;
    color: var(--pk-primary-700, #4338ca);
    cursor: pointer;
    box-shadow: 0 2px 8px -4px rgba(99,102,241,.25);
    transition: background .15s, border-color .15s, transform .15s, box-shadow .15s;
}
.pk-mine-toolbar-btn:hover {
    background: var(--pk-primary-50, #eef2ff);
    border-color: var(--pk-primary-400, #818cf8);
    transform: translateY(-1px);
    box-shadow: 0 4px 14px -4px rgba(99,102,241,.40);
}
.pk-mine-toolbar-btn .icon { color: var(--pk-primary-600, #4f46e5); }
.pk-mine-toolbar-btn[aria-pressed="true"] {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 6px 16px -6px rgba(99,102,241,.55);
}
.pk-mine-toolbar-btn[aria-pressed="true"] .icon { color: #fff; }
.pk-mine-toolbar-hint {
    font-size: 12.5px;
    color: var(--pk-text-muted);
    font-weight: 500;
}
:root[data-theme="dark"] .pk-mine-toolbar-btn {
    background: var(--pk-surface-card);
    border-color: rgba(165,180,252,.30);
    color: #a5b4fc;
    box-shadow: 0 2px 8px -4px rgba(0,0,0,.40);
}
:root[data-theme="dark"] .pk-mine-toolbar-btn:hover {
    background: rgba(99,102,241,.16);
    border-color: rgba(165,180,252,.55);
}
:root[data-theme="dark"] .pk-mine-toolbar-btn .icon { color: #a5b4fc; }
:root[data-theme="dark"] .pk-mine-toolbar-btn[aria-pressed="true"] .icon { color: #fff; }

/* Card в bulk-mode: появляется чекбокс слева. Phase 75: положение сдвинуто
   так чтобы не наезжать на цветной accent-strip (4px) на левом краю карточки. */
.pk-mine-card-check {
    position: absolute;
    top: 12px;
    left: 12px;
    width: 26px;
    height: 26px;
    z-index: 2;
    cursor: pointer;
    user-select: none;
}
.pk-mine-card-check input[type=checkbox] {
    appearance: none;
    -webkit-appearance: none;
    margin: 0;
    width: 100%;
    height: 100%;
    background: var(--pk-bg-elevated);
    border: 2px solid var(--pk-border);
    border-radius: 6px;
    cursor: pointer;
    transition: background var(--pk-t-fast), border-color var(--pk-t-fast);
}
.pk-mine-card-check input[type=checkbox]:checked {
    background: var(--pk-primary-500);
    border-color: var(--pk-primary-500);
}
.pk-mine-card-check input[type=checkbox]:checked + .pk-mine-card-check-mark::after {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-weight: bold;
    font-size: 16px;
    line-height: 1;
    pointer-events: none;
}
.pk-mine-card { position: relative; }

/* В bulk-mode карточки сжимаются влево, чтобы чекбокс не наезжал. */
body.pk-bulk-mode .pk-mine-card {
    padding-left: 44px;
    transition: padding var(--pk-t-fast);
}
body.pk-bulk-mode .pk-mine-card-link {
    cursor: pointer; /* визуально показываем что click — это checkbox-toggle */
}
body.pk-bulk-mode .pk-mine-card-actions {
    display: none; /* per-card actions прячем — они через bottom bar */
}

/* Floating bottom action bar — поднимается при выборе ≥1.
   КЛЮЧЕВОЕ: `[hidden]` должен победить — поэтому все display-правила
   только для `:not([hidden])`. Иначе HTML hidden-атрибут не работает.   */
.pk-mine-bulk-bar[hidden] { display: none !important; }

.pk-mine-bulk-bar {
    position: fixed;
    left: 50%;
    bottom: calc(var(--pk-tabbar-height, 60px) + 14px);
    z-index: 100;
    /* Solid card вместо glass — лучше читаемость на любом фоне. */
    background: var(--pk-bg-elevated);
    border: 1px solid var(--pk-border);
    border-radius: 14px;
    padding: 8px 8px 8px 14px;
    box-shadow: 0 16px 40px -8px rgba(0, 0, 0, .35),
                0 6px 16px -4px rgba(0, 0, 0, .18);
    display: flex;
    align-items: center;
    gap: 12px;
    width: max-content;
    max-width: calc(100vw - 24px);
    transform: translateX(-50%);
    animation: pk-bulk-bar-in .22s cubic-bezier(.2, .8, .3, 1);
}
@keyframes pk-bulk-bar-in {
    from { transform: translate(-50%, 16px); opacity: 0; }
    to   { transform: translate(-50%, 0);    opacity: 1; }
}
:root[data-theme="dark"] .pk-mine-bulk-bar {
    background: #1e1f2c;
    border-color: rgba(255, 255, 255, .08);
    box-shadow: 0 18px 48px -8px rgba(0, 0, 0, .65),
                0 6px 16px -4px rgba(0, 0, 0, .4);
}

/* Count + label — единый блок слева, не разваливается на wrap. */
.pk-mine-bulk-summary {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    line-height: 1;
    white-space: nowrap;
    padding-right: 4px;
    border-right: 1px solid var(--pk-border);
}
:root[data-theme="dark"] .pk-mine-bulk-summary {
    border-right-color: rgba(255, 255, 255, .08);
}
.pk-mine-bulk-count {
    font-weight: 700;
    color: var(--pk-primary-500);
    font-size: 17px;
}
.pk-mine-bulk-label {
    color: var(--pk-text-muted);
    font-size: 12.5px;
}

/* Actions: горизонтальный ряд, никаких wrap. Если кнопок > 1 — рядом. */
.pk-mine-bulk-actions {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.pk-mine-bulk-actions .button {
    height: 36px;
    padding: 0 14px;
    font-size: 13px;
    font-weight: 600;
    border-radius: 10px;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    /* Скрытые (по контексту неприменимые) — display:none, не disabled. */
}
.pk-mine-bulk-actions .button[hidden] { display: none !important; }
.pk-mine-bulk-actions .button .icon { font-size: 13px; }

/* Cancel button — на красном фоне всегда читаемый. */
.pk-mine-bulk-btn-cancel {
    background: var(--pk-danger-50, #fef2f2);
    color: var(--pk-danger-700, #b91c1c);
    border: 1px solid var(--pk-danger-200, rgba(239, 68, 68, .25));
}
.pk-mine-bulk-btn-cancel:hover {
    background: #fee2e2;
    border-color: var(--pk-danger-300, rgba(239, 68, 68, .35));
}
:root[data-theme="dark"] .pk-mine-bulk-btn-cancel {
    background: rgba(239, 68, 68, .18);
    color: #fca5a5;
    border-color: rgba(239, 68, 68, .35);
}

/* «Close» (отменить выбор) — нейтральная X-кнопка. */
.pk-mine-bulk-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    background: transparent;
    border: 1px solid var(--pk-border);
    border-radius: 10px;
    color: var(--pk-text-muted);
    cursor: pointer;
    transition: background var(--pk-t-fast), color var(--pk-t-fast),
                border-color var(--pk-t-fast);
    margin-left: 2px;
}
.pk-mine-bulk-close:hover {
    background: var(--pk-surface, var(--pk-primary-50));
    color: var(--pk-text);
}
.pk-mine-bulk-close .icon { font-size: 15px; }

/* На очень узких экранах — двухстрочная компоновка через wrap. */
@media (max-width: 420px) {
    .pk-mine-bulk-bar {
        flex-wrap: wrap;
        justify-content: center;
        padding: 10px 12px;
        gap: 8px;
    }
    .pk-mine-bulk-summary {
        border-right: none;
        padding-right: 0;
        width: 100%;
        justify-content: center;
        padding-bottom: 4px;
        border-bottom: 1px solid var(--pk-border);
    }
    :root[data-theme="dark"] .pk-mine-bulk-summary {
        border-bottom-color: rgba(255, 255, 255, .08);
    }
    .pk-mine-bulk-actions .button {
        padding: 0 10px;
        font-size: 12px;
    }
}

/* === 41. Home «Match my city» shortcut ================================ */
.pk-mycity-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    background: linear-gradient(135deg, var(--pk-primary-50) 0%, #fff 100%);
    border: 1px solid var(--pk-primary-200, rgba(99, 102, 241, .25));
    border-radius: var(--pk-r-lg);
    text-decoration: none;
    color: var(--pk-text-strong);
    transition: transform var(--pk-t-fast), box-shadow var(--pk-t-fast);
}
.pk-mycity-card:hover {
    transform: translateY(-1px);
    box-shadow: var(--pk-shadow-md, 0 8px 24px rgba(99, 102, 241, .12));
}
:root[data-theme="dark"] .pk-mycity-card {
    background: linear-gradient(135deg, rgba(99, 102, 241, .12) 0%, var(--pk-bg-elevated) 100%);
    border-color: rgba(99, 102, 241, .3);
}
.pk-mycity-icon {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--pk-primary-500);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
}
.pk-mycity-body { flex: 1; min-width: 0; }
.pk-mycity-title {
    font-weight: 600;
    font-size: 15px;
    color: var(--pk-text-strong);
}
.pk-mycity-sub {
    font-size: 13px;
    color: var(--pk-text-muted);
    margin-top: 2px;
}
.pk-mycity-chev {
    color: var(--pk-text-muted);
    font-size: 18px;
    flex-shrink: 0;
}

/* === 42. Urgency filter chips на /parcels/ ============================ */
/* Горизонтальный ряд цветных chip'ов «Любой срок / Сегодня / Скоро /
   Эта неделя». Visual-affinity с `.pk-urgency-*` чипами на карточках:
   today=оранжевый, soon=жёлтый, week=серый. Активный — fill, неактивные —
   outline. На скролле выглядят как вкладки, но семантически — фильтры. */
.pk-urgency-filter {
    overflow-x: auto;
    padding: 6px var(--pk-s-4) 4px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.pk-urgency-filter::-webkit-scrollbar { display: none; }
.pk-urgency-filter-btn {
    border: 1px solid var(--pk-border);
    background: var(--pk-bg-elevated);
    color: var(--pk-text-muted);
    transition: background var(--pk-t-fast), color var(--pk-t-fast),
                border-color var(--pk-t-fast);
}
.pk-urgency-filter-btn.is-active.pk-urgency-filter-any {
    background: var(--pk-primary-500);
    color: #fff;
    border-color: var(--pk-primary-500);
}
.pk-urgency-filter-btn.is-active.pk-urgency-filter-today {
    background: #fed7aa;
    color: #c2410c;
    border-color: #fb923c;
}
:root[data-theme="dark"] .pk-urgency-filter-btn.is-active.pk-urgency-filter-today {
    background: rgba(249, 115, 22, .35);
    color: #fdba74;
    border-color: rgba(249, 115, 22, .55);
}
.pk-urgency-filter-btn.is-active.pk-urgency-filter-soon {
    background: #fef08a;
    color: #a16207;
    border-color: #facc15;
}
:root[data-theme="dark"] .pk-urgency-filter-btn.is-active.pk-urgency-filter-soon {
    background: rgba(234, 179, 8, .35);
    color: #fde68a;
    border-color: rgba(234, 179, 8, .55);
}
.pk-urgency-filter-btn.is-active.pk-urgency-filter-week {
    background: var(--pk-gray-100, #f1f5f9);
    color: var(--pk-text-strong);
    border-color: var(--pk-border);
}
:root[data-theme="dark"] .pk-urgency-filter-btn.is-active.pk-urgency-filter-week {
    background: rgba(148, 163, 184, .25);
}

/* === 43. Recently viewed parcels (home widget) ======================== */
.pk-recent-title { display: flex; align-items: center; }
.pk-recent-scroll {
    display: flex;
    gap: 10px;
    padding: 4px var(--pk-s-4) 16px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    /* На мобильном scrollbar не нужен (touch-swipe и так работает).
       На десктопе — `data-pk-hscroll` JS даёт drag + wheel→horizontal,
       и мы показываем тонкий scrollbar только при hover'е, чтобы юзер
       понял что виджет скроллится. */
    scrollbar-width: none;
}
.pk-recent-scroll::-webkit-scrollbar { display: none; }
@media (hover: hover) {
    .pk-recent-scroll { cursor: grab; }
    .pk-recent-scroll.is-dragging { cursor: grabbing; }
    /* Брендированный scrollbar (индиго) определён глобально в секции 51. */
}
.pk-recent-card {
    flex: 0 0 auto;
    width: 180px;
    background: var(--pk-bg-elevated);
    border: 1px solid var(--pk-border);
    border-radius: var(--pk-r-md);
    padding: 12px;
    text-decoration: none;
    color: var(--pk-text);
    transition: transform var(--pk-t-fast), border-color var(--pk-t-fast);
}
.pk-recent-card:hover {
    transform: translateY(-1px);
    border-color: var(--pk-primary-300);
}
.pk-recent-card-media {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: var(--pk-primary-50);
    color: var(--pk-primary-600);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    margin-bottom: 8px;
}
:root[data-theme="dark"] .pk-recent-card-media {
    background: rgba(99, 102, 241, .14);
    color: var(--pk-primary-300);
}
.pk-recent-card-title {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--pk-text-strong);
    line-height: 1.3;
    margin-bottom: 4px;
}
.pk-recent-card-route {
    font-size: 11.5px;
    color: var(--pk-text-muted);
    line-height: 1.3;
}
.pk-recent-card-reward {
    margin-top: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--pk-success-600, #16a34a);
}

/* === 44. Parcel report link (footer of parcel detail) ================= */
.pk-parcel-footer {
    padding: 24px var(--pk-s-4) 16px;
    text-align: center;
}
.pk-parcel-report-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: none;
    color: var(--pk-text-muted);
    font-size: 12.5px;
    cursor: pointer;
    padding: 6px 12px;
    border-radius: 8px;
    transition: background var(--pk-t-fast), color var(--pk-t-fast);
}
.pk-parcel-report-link:hover {
    background: var(--pk-danger-50, #fef2f2);
    color: var(--pk-danger-600, #dc2626);
}
:root[data-theme="dark"] .pk-parcel-report-link:hover {
    background: rgba(239, 68, 68, .14);
    color: #fca5a5;
}

/* === 45. Parcel views chip on /parcels/mine/ ========================== */
.pk-mine-card-views {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--pk-text-muted);
    font-size: 12.5px;
    font-weight: 500;
}
.pk-mine-card-views .icon {
    font-size: 12px;
    color: var(--pk-text-muted);
}

/* === 46. Search-match highlight (`<mark>` from pk_highlight filter) ==== */
mark {
    background: #fef9c3;            /* мягкий жёлтый */
    color: var(--pk-text-strong);
    padding: 0 2px;
    border-radius: 3px;
    font-weight: 600;
}
:root[data-theme="dark"] mark {
    background: rgba(234, 179, 8, .35);
    color: #fde68a;
}

/* === 47. /parcels/mine/ author stats banner ============================ */
.pk-mine-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin: 0 var(--pk-s-4) 12px;
    padding: 12px;
    background: var(--pk-bg-elevated);
    border: 1px solid var(--pk-border);
    border-radius: var(--pk-r-md);
}
.pk-mine-stat {
    text-align: center;
    padding: 4px;
}
.pk-mine-stat-value {
    font-size: 20px;
    font-weight: 700;
    color: var(--pk-text-strong);
    line-height: 1.1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.pk-mine-stat-label {
    font-size: 11.5px;
    color: var(--pk-text-muted);
    margin-top: 4px;
    line-height: 1.3;
}
@media (max-width: 360px) {
    .pk-mine-stat-value { font-size: 17px; }
    .pk-mine-stat-label { font-size: 10.5px; }
}
/* Phase 74: «Full analytics» link under the stats banner. */
.pk-mine-stats-more {
    margin: -6px var(--pk-s-4) 12px;
    text-align: right;
}
.pk-mine-stats-more-link {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: 13px;
    font-weight: 600;
    color: var(--pk-primary-600);
    text-decoration: none;
    padding: 6px 10px;
    border-radius: 999px;
    transition: background-color .15s;
}
.pk-mine-stats-more-link:hover,
.pk-mine-stats-more-link:focus-visible {
    background: rgba(99, 102, 241, .08);
    color: var(--pk-primary-700);
}
[data-theme="dark"] .pk-mine-stats-more-link:hover,
[data-theme="dark"] .pk-mine-stats-more-link:focus-visible {
    background: rgba(165, 180, 252, .12);
}

/* =========================================================================
   Phase 75  /parcels/mine/ + /trips/mine/ hero banner & empty state
   Mirrors the /analytics/ visual language (gradient panel, glass period chip,
   inline stats with subtle dividers; gradient icon avatars in empty states).
   ========================================================================= */
.pk-mine-hero {
    position: relative;
    overflow: hidden;
    margin: 0 var(--pk-s-4) 14px;
    padding: 22px 18px 20px;
    color: #fff;
    border-radius: var(--pk-r-2xl, 20px);
    box-shadow: 0 12px 32px -16px rgba(99,102,241,.55);
}
.pk-mine-hero--parcels {
    background:
        radial-gradient(120% 140% at 0% 0%, rgba(165,180,252,.55) 0%, transparent 55%),
        radial-gradient(120% 140% at 100% 100%, rgba(244,114,182,.45) 0%, transparent 55%),
        linear-gradient(135deg, #6366f1 0%, #8b5cf6 55%, #ec4899 100%);
}
.pk-mine-hero--trips {
    background:
        radial-gradient(120% 140% at 0% 0%, rgba(125,211,252,.55) 0%, transparent 55%),
        radial-gradient(120% 140% at 100% 100%, rgba(94,234,212,.45) 0%, transparent 55%),
        linear-gradient(135deg, #0ea5e9 0%, #14b8a6 55%, #10b981 100%);
    box-shadow: 0 12px 32px -16px rgba(14,165,233,.55);
}
.pk-mine-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(60% 80% at 50% 0%, rgba(255,255,255,.18) 0%, transparent 70%);
    pointer-events: none;
}
.pk-mine-hero-period {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    background: rgba(255,255,255,.18);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 14px;
}
.pk-mine-hero-period .icon { font-size: 13px; }
.pk-mine-hero-link {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 2;
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: rgba(255,255,255,.18);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: #fff;
    text-decoration: none;
    transition: background .15s, transform .15s;
}
.pk-mine-hero-link:hover,
.pk-mine-hero-link:focus-visible {
    background: rgba(255,255,255,.30);
    transform: translateY(-1px);
    color: #fff;
}
.pk-mine-hero-link .icon { font-size: 17px; }
.pk-mine-hero-grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    align-items: end;
}
.pk-mine-hero-stat {
    text-align: center;
    padding: 4px 8px;
    min-width: 0;
    position: relative;
}
.pk-mine-hero-stat + .pk-mine-hero-stat::before {
    content: '';
    position: absolute;
    left: 0;
    top: 10%;
    height: 80%;
    width: 1px;
    background: linear-gradient(180deg, transparent, rgba(255,255,255,.30), transparent);
}
.pk-mine-hero-value {
    font-size: 32px;
    font-weight: 800;
    line-height: 1;
    color: #fff;
    letter-spacing: -0.02em;
    text-shadow: 0 1px 12px rgba(0,0,0,.20);
}
.pk-mine-hero-label {
    margin-top: 8px;
    font-size: 10.5px;
    color: rgba(255,255,255,.85);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 700;
    overflow-wrap: anywhere;
    line-height: 1.25;
}
@media (max-width: 400px) {
    .pk-mine-hero { padding: 18px 12px 16px; }
    .pk-mine-hero-value { font-size: 26px; }
    .pk-mine-hero-label { font-size: 9.5px; letter-spacing: 0.04em; }
    .pk-mine-hero-period { font-size: 10.5px; padding: 4px 10px; margin-bottom: 12px; }
    .pk-mine-hero-link { width: 30px; height: 30px; top: 12px; right: 12px; }
    .pk-mine-hero-link .icon { font-size: 15px; }
}

/* --- EMPTY-STATE (mirrors analytics empty-state style) -------------- */
.pk-mine-empty {
    text-align: center;
    margin: 32px var(--pk-s-4) 24px;
    padding: 36px 22px 32px;
    background: var(--pk-surface-card);
    border: 1px solid var(--pk-border);
    border-radius: var(--pk-r-2xl, 20px);
    box-shadow: 0 2px 12px -8px rgba(15,23,42,.10);
}
:root[data-theme="dark"] .pk-mine-empty {
    box-shadow: 0 2px 12px -8px rgba(0,0,0,.40);
}
.pk-mine-empty-icon {
    width: 72px;
    height: 72px;
    border-radius: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    color: #fff;
    box-shadow: 0 10px 24px -10px rgba(99,102,241,.40);
}
.pk-mine-empty-icon .icon { font-size: 34px; }
.pk-mine-empty-icon--parcels {
    background: linear-gradient(135deg, #6366f1, #8b5cf6 60%, #ec4899);
}
.pk-mine-empty-icon--trips {
    background: linear-gradient(135deg, #0ea5e9, #14b8a6 60%, #10b981);
    box-shadow: 0 10px 24px -10px rgba(14,165,233,.40);
}
.pk-mine-empty-title {
    margin: 0 0 6px;
    font-size: 17px;
    font-weight: 700;
    color: var(--pk-text-strong);
    letter-spacing: -0.01em;
}
.pk-mine-empty-text {
    margin: 0 auto 18px;
    max-width: 320px;
    font-size: 13.5px;
    color: var(--pk-text-muted);
    line-height: 1.5;
}
.pk-mine-empty-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
}
.pk-mine-empty-actions .button {
    min-width: 160px;
}

/* === 48. Pagination on /parcels/ ====================================== */
.pk-paginate {
    padding: 12px var(--pk-s-4) 4px;
}
.pk-paginate-more {
    border-radius: 999px;
    height: 44px;
}
.pk-paginate-end {
    text-align: center;
    color: var(--pk-text-muted);
    font-size: 13px;
    padding: 16px var(--pk-s-4);
}

/* === 49. Response templates chips (courier-side) ====================== */
.pk-resp-templates {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 8px;
}
.pk-resp-tpl-chip,
.pk-resp-tpl-add {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border: 1px dashed var(--pk-border);
    background: transparent;
    border-radius: 999px;
    padding: 4px 10px;
    font-size: 12px;
    color: var(--pk-text-muted);
    cursor: pointer;
    transition: background var(--pk-t-fast), color var(--pk-t-fast),
                border-color var(--pk-t-fast);
    max-width: 220px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pk-resp-tpl-chip {
    background: var(--pk-primary-50);
    border: 1px solid var(--pk-primary-200, rgba(99, 102, 241, .25));
    color: var(--pk-primary-700);
}
.pk-resp-tpl-chip:hover {
    background: var(--pk-primary-100, rgba(99, 102, 241, .18));
}
:root[data-theme="dark"] .pk-resp-tpl-chip {
    background: rgba(99, 102, 241, .14);
    color: var(--pk-primary-300);
    border-color: rgba(99, 102, 241, .35);
}
.pk-resp-tpl-add:hover {
    background: var(--pk-primary-50);
    color: var(--pk-primary-600);
    border-color: var(--pk-primary-300);
}
.pk-resp-tpl-del {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 999px;
    background: rgba(0, 0, 0, .08);
    color: inherit;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    margin-left: 2px;
}
.pk-resp-tpl-del:hover {
    background: var(--pk-danger-500);
    color: #fff;
}
:root[data-theme="dark"] .pk-resp-tpl-del {
    background: rgba(255, 255, 255, .12);
}

/* === 50. Hidden parcels (UserBlock) ==================================== */
/* Bar над списком — клик переключает show_hidden между 0 и 1. */
.pk-hidden-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    margin: 0 var(--pk-s-4) 8px;
    background: var(--pk-bg-elevated);
    border: 1px dashed var(--pk-border);
    border-radius: var(--pk-r-md);
    font-size: 13px;
    flex-wrap: wrap;
}
.pk-hidden-bar-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--pk-text-muted);
    flex: 1;
    min-width: 0;
}
.pk-hidden-bar-action {
    color: var(--pk-primary-600);
    font-weight: 600;
    text-decoration: none;
    flex-shrink: 0;
}
.pk-hidden-bar-action:hover { text-decoration: underline; }

/* Hidden parcel-card visual: dim + overlay с кнопкой Unblock.
   Карточка остаётся кликабельной — клик ведёт на detail; unblock-кнопка
   в overlay перехватывает event благодаря z-index выше card-link.        */
.parcel-row.is-hidden-row {
    position: relative;
    opacity: 0.65;
    transition: opacity var(--pk-t-fast);
}
.parcel-row.is-hidden-row:hover { opacity: 0.85; }
.pk-hidden-overlay {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(15, 23, 42, .82);   /* solid темный плашка для читаемости */
    color: #fff;
    border-radius: 999px;
    padding: 4px 4px 4px 10px;
    font-size: 11.5px;
    font-weight: 500;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.pk-hidden-overlay-form { margin: 0; }
.pk-hidden-overlay-btn {
    background: var(--pk-primary-500);
    color: #fff;
    border: none;
    border-radius: 999px;
    padding: 3px 10px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--pk-t-fast);
}
.pk-hidden-overlay-btn:hover {
    background: var(--pk-primary-600);
}

/* === 51. Branded scrollbar (global) ==================================== */
/* Прозрачный track, brand-color (индиго) thumb с opacity → не доминирует    */
/* над контентом, но всегда виден. Работает для page-scroll и для всех       */
/* внутренних scrollable элементов. На WebKit/Blink — через ::-webkit-*;     */
/* на Firefox — через `scrollbar-color`.                                    */

/* Firefox / новых браузеров — `scrollbar-color: thumb track` */
html {
    scrollbar-color: rgba(99, 102, 241, .55) transparent;
    scrollbar-width: thin;
}
:root[data-theme="dark"] html {
    scrollbar-color: rgba(129, 140, 248, .55) transparent;
}

/* WebKit: глобально для всех scrollable элементов. */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
    background: transparent;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: rgba(99, 102, 241, .50);  /* индиго с opacity, не давит */
    border-radius: 999px;
    border: 2px solid transparent;        /* «inset»-эффект: thumb тоньше track */
    background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
    background-color: rgba(99, 102, 241, .80);
    background-clip: padding-box;
}
::-webkit-scrollbar-thumb:active {
    background-color: rgba(99, 102, 241, 1);
    background-clip: padding-box;
}
::-webkit-scrollbar-corner { background: transparent; }

/* Dark mode — светлее thumb для лучшей видимости на тёмном фоне. */
:root[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: rgba(129, 140, 248, .55);
    background-clip: padding-box;
}
:root[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background-color: rgba(165, 180, 252, .75);
    background-clip: padding-box;
}
:root[data-theme="dark"] ::-webkit-scrollbar-thumb:active {
    background-color: rgba(165, 180, 252, .95);
    background-clip: padding-box;
}

/* Локальные toolbar / urgency-filter / tabs — там было `display: none`.
   Меняем на «overlay»: показываем тонкую дорожку только на hover,
   чтобы не ломать compact-визуал чипов на мобиле.                      */
.pk-toolbar:hover::-webkit-scrollbar,
.pk-urgency-filter:hover::-webkit-scrollbar,
.pk-tabs:hover::-webkit-scrollbar,
.pk-recent-scroll:hover::-webkit-scrollbar {
    display: block;
    height: 6px;
}
.pk-toolbar:hover,
.pk-urgency-filter:hover,
.pk-tabs:hover,
.pk-recent-scroll:hover {
    scrollbar-width: thin;
    scrollbar-color: rgba(99, 102, 241, .55) transparent;
}
:root[data-theme="dark"] .pk-toolbar:hover,
:root[data-theme="dark"] .pk-urgency-filter:hover,
:root[data-theme="dark"] .pk-tabs:hover,
:root[data-theme="dark"] .pk-recent-scroll:hover {
    scrollbar-color: rgba(129, 140, 248, .55) transparent;
}

/* === 52. Premium /parcels/ list polish ================================ */
/* Цель: подтянуть визуал страницы списка посылок — тише гэпы между
   секциями, ярче карточки, чище search + filter bar.                    */

/* Header: компактнее, title чуть меньше, чтобы освободить место.
   После Phase 13 hotfix `.pk-list-head` = sticky-bar (search + filters),
   поэтому top padding 20px давал лишнее «пустое пространство» под title.
   Уменьшено до 4px (есть margin от title); search и filter-bar дают
   достаточный visual rhythm. */
.pk-list-head { padding: 4px var(--pk-s-4) 6px; }
.pk-list-head-top { margin-bottom: 6px; }
.pk-list-title { font-size: 24px; letter-spacing: -0.02em; }
.pk-list-subtitle { font-size: 13px; opacity: .88; }

/* Search: чуть выше, более app-like. Subtle gradient вместо плоского fill. */
.pk-search {
    margin: 0 var(--pk-s-4) 8px;
    padding: 11px 16px;
    background: linear-gradient(180deg,
        var(--pk-bg-elevated) 0%,
        color-mix(in srgb, var(--pk-bg-elevated) 92%, var(--pk-primary-50) 8%) 100%);
    border-width: 1px;
    box-shadow: 0 1px 0 rgba(0, 0, 0, .02), 0 2px 6px -2px rgba(0, 0, 0, .04);
}
:root[data-theme="dark"] .pk-search {
    background: linear-gradient(180deg,
        var(--pk-bg-elevated) 0%,
        color-mix(in srgb, var(--pk-bg-elevated) 88%, var(--pk-primary-500) 12%) 100%);
    box-shadow: 0 1px 0 rgba(0, 0, 0, .25), 0 2px 8px -2px rgba(0, 0, 0, .35);
}
.pk-search .icon { color: var(--pk-primary-400); }
.pk-search input { font-size: 14.5px; }

/* Filter bar: запретить wrap для двух элементов (Фильтры + Сортировка) —
   они всегда должны быть в одну строку (Filters chip slева, Sort справа). */
.pk-filter-bar { flex-wrap: nowrap; gap: 10px; }
.pk-filter-btn {
    /* `display: inline-flex` + `width: auto` — даём кнопке размер контента,
       не растягиваясь на всю строку.  flex-shrink: 0 — не сжимаемся когда
       рядом Sort. !important нужен потому что что-то выше в каскаде
       форсит display: flex (вероятно Framework7 button reset).         */
    display: inline-flex !important;
    width: auto !important;
    flex: 0 0 auto;
    padding: 8px 14px;
    font-weight: 600;
    border-radius: 12px;
    border-width: 1px;
}
.pk-filter-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 10px -4px rgba(99, 102, 241, .25);
}
.pk-filter-sort {
    flex-shrink: 0;
}
.pk-filter-sort-select {
    max-width: 180px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    border-radius: 12px;
    padding-top: 7px;
    padding-bottom: 7px;
}
/* На узких mobile-экранах: НЕ разрешаем wrap, иначе sort переезжает
   на отдельную строку и filter-bar занимает два rowа. Вместо этого
   делаем filter-btn и reset-btn компактнее (icon-only где можно),
   sort оставляем читаемым 13.5px. Всё помещается в одну строку. */
@media (max-width: 480px) {
    .pk-filter-bar {
        flex-wrap: nowrap;
        gap: 6px;
    }
    .pk-filter-btn {
        /* Скрываем текст «Фильтры» — оставляем только иконку + badge. */
        font-size: 0;
        padding: 7px 10px;
    }
    .pk-filter-btn .icon { font-size: 16px !important; }
    .pk-filter-btn .pk-filter-badge {
        font-size: 11px;
        margin-left: 4px;
    }
    .pk-filter-reset {
        /* Reset тоже icon-only (правило из @media 520 уже задаёт это). */
    }
    .pk-filter-sort-select {
        max-width: 175px;
    }
}

/* Toolbar (categories): чуть меньше gap, больше воздуха для chip'ов. */
.pk-toolbar {
    gap: 8px;
    padding: 6px var(--pk-s-4) 10px;
}
.pk-toolbar-btn {
    border-radius: 12px;
}
.pk-toolbar-secondary { padding-top: 0; }

/* Found counter — справа, в виде маленького чипа, а не на отдельной строке.
   Margin tight чтобы не было «пустоты» между категориями и первой карточкой. */
.pk-list-count {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    margin: 2px var(--pk-s-4) 8px;
    background: var(--pk-bg-elevated);
    border: 1px solid var(--pk-border);
    border-radius: 999px;
    font-size: 12px;
    color: var(--pk-text-muted);
    width: max-content;
}
.pk-list-count strong {
    color: var(--pk-primary-600);
    font-weight: 700;
}
:root[data-theme="dark"] .pk-list-count strong { color: var(--pk-primary-300); }

/* Parcel card polish (Phase 75 v2) — same visual treatment as the cards on
   /parcels/mine/: stronger border + real elevation + status-coloured accent
   strip on the left + gradient media-avatar with white glyph. */
.parcel-card {
    position: relative;
    gap: 14px;
    padding: 14px;
    padding-left: 20px; /* room for the 4px status strip */
    border-radius: 18px;
    background: var(--pk-surface-card, #fff);
    border: 1px solid var(--pk-border-strong, #d1d5db);
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 4px 18px -10px rgba(15,23,42,.12);
    transition: transform .15s, box-shadow .15s, border-color .15s;
}
.parcel-card::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, #6366f1, #8b5cf6);
}
.parcel-card:hover {
    transform: translateY(-2px);
    border-color: var(--pk-primary-300, #a5b4fc);
    box-shadow:
        0 4px 8px rgba(15,23,42,.06),
        0 12px 28px -12px rgba(99, 102, 241, .35);
}
:root[data-theme="dark"] .parcel-card {
    border-color: var(--pk-border-strong, #334155);
    box-shadow: 0 1px 2px rgba(0,0,0,.18), 0 4px 18px -10px rgba(0,0,0,.50);
}
:root[data-theme="dark"] .parcel-card:hover {
    box-shadow:
        0 4px 8px rgba(0,0,0,.30),
        0 12px 28px -12px rgba(99, 102, 241, .45);
}
/* Hidden/blocked rows (Phase 8 show_hidden=1 toggle) keep their subdued look */
.parcel-row.is-hidden-row .parcel-card::before {
    background: linear-gradient(180deg, #cbd5e1, #94a3b8);
}

/* Media (category icon container) — gradient avatar with white icon, glow. */
.parcel-card-media {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: linear-gradient(135deg, #6366f1, #8b5cf6 60%, #ec4899);
    color: #fff;
    box-shadow: 0 6px 14px -6px rgba(139,92,246,.50);
}
:root[data-theme="dark"] .parcel-card-media {
    box-shadow: 0 6px 14px -6px rgba(139,92,246,.60);
}
.parcel-card-media .icon { font-size: 24px; color: inherit; }

/* Done/cancelled overlays — recoloured strip + recoloured avatar. */
.parcel-card:has(.parcel-card-status.is-done)::before {
    background: linear-gradient(180deg, #10b981, #059669);
}
.parcel-card:has(.parcel-card-status.is-done) .parcel-card-media {
    background: linear-gradient(135deg, #10b981, #059669);
    box-shadow: 0 6px 14px -6px rgba(16,185,129,.45);
}
.parcel-card:has(.parcel-card-status.is-cancelled)::before {
    background: linear-gradient(180deg, #cbd5e1, #94a3b8);
}
.parcel-card:has(.parcel-card-status.is-cancelled) .parcel-card-media {
    background: linear-gradient(135deg, #cbd5e1, #94a3b8);
    box-shadow: 0 6px 14px -6px rgba(100,116,139,.40);
}

/* Title — чуть крупнее и выразительнее. */
.parcel-card-title {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.005em;
    line-height: 1.28;
}

/* Route — arrow заметнее, цвет route чуть темнее. */
.parcel-card-route {
    font-size: 13px;
    color: var(--pk-text);
    font-weight: 500;
    gap: 5px;
}
:root[data-theme="dark"] .parcel-card-route { color: var(--pk-text); }
.parcel-card-route .icon { font-size: 13px; color: var(--pk-primary-500); }

/* Meta-chips — слегка увеличить tap target. */
.parcel-card-meta { margin-top: 8px; gap: 6px; }
.pk-chip { padding: 4px 10px; font-size: 11px; }

/* Description — чуть больше line-height, более легко читается. */
.parcel-card-desc {
    font-size: 13px;
    line-height: 1.5;
    margin-top: 6px;
    opacity: .88;
}

/* Reward — чуть крупнее, более выразительная тень. */
.parcel-card-reward {
    padding: 5px 12px;
    font-size: 12.5px;
    box-shadow: 0 6px 14px -6px rgba(245, 158, 11, .55);
}

/* Stack of cards: чуть больше воздуха между ними. */
.pk-stack { gap: 10px; }

/* Favorites / My parcels secondary toolbar — компактнее. */
.pk-toolbar-secondary {
    padding: 0 var(--pk-s-4) 12px;
    gap: 6px;
}

/* Urgency filter — тоже round corners, как у других */
.pk-urgency-filter { padding: 4px var(--pk-s-4) 8px; gap: 6px; }
.pk-urgency-filter-btn { border-radius: 999px; }

/* Reduce filter-pills row top padding so it sits closer to filter bar. */
.pk-filter-pills { padding-top: 4px; padding-bottom: 8px; }

/* Framework7 `.block` имеет дефолтный margin: 32px 0 — слишком воздушно
   для нашего mobile content density. На всех страницах внутри
   `.page-content` уменьшаем margins до tight rhythm: 8px между
   секциями. Это убирает «лишнее пустое пространство» которое user
   воспринимал как «здесь что-то должно быть». */
.page-content > .block {
    margin-top: 8px;
    margin-bottom: 12px;
}
.page-content > .block + .block,
.page-content > .block + .block-title {
    margin-top: 4px;
}
/* На страницах со sticky list-head (/parcels/) — ещё плотнее, потому что
   filter-stack уже даёт визуальный break перед списком. */
.page-content:has(> .pk-list-head[data-pk-sticky-head]) > .block {
    margin-top: 4px;
    margin-bottom: 12px;
}

/* `.block-title` (section labels: «ПОХОЖИЕ ПОСЫЛКИ», «КАТЕГОРИИ») —
   F7 дефолт margin-top 24px тоже слишком воздушный. Делаем 16px. */
.page-content > .block-title {
    margin-top: 16px;
    margin-bottom: 8px;
}

/* === 53. Loader overlay + toast + fade-in (Phase 10 AJAX) ============== */
/* Спиннер появляется автоматически когда у элемента есть
   `data-pk-loading="1"`. Простой CSS-spinner без картинок. */
[data-pk-loading="1"] {
    position: relative;
    pointer-events: none;
}
[data-pk-loading="1"]::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, .55);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    border-radius: inherit;
    z-index: 5;
}
:root[data-theme="dark"] [data-pk-loading="1"]::before {
    background: rgba(15, 23, 42, .55);
}
[data-pk-loading="1"]::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 22px;
    height: 22px;
    margin: -11px 0 0 -11px;
    border: 2.5px solid rgba(99, 102, 241, .25);
    border-top-color: var(--pk-primary-500);
    border-radius: 50%;
    animation: pk-spin .8s linear infinite;
    z-index: 6;
}
[data-pk-loading="1"] [aria-disabled="true"] {
    opacity: .55;
    cursor: not-allowed;
}
@keyframes pk-spin {
    to { transform: rotate(360deg); }
}

/* Toast stack — bottom-center, не перекрывает tabbar. */
.pk-toast-stack {
    position: fixed;
    left: 50%;
    bottom: calc(var(--pk-tabbar-height, 60px) + 18px);
    transform: translateX(-50%);
    z-index: 1000;
    display: flex;
    flex-direction: column-reverse;  /* новые сверху над старыми */
    gap: 8px;
    pointer-events: none;
    width: 90%;
    max-width: 380px;
    align-items: center;
}
.pk-toast {
    pointer-events: auto;
    background: #1e1f2c;
    color: #fff;
    padding: 10px 16px;
    border-radius: 12px;
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.4;
    box-shadow:
        0 14px 32px -10px rgba(0, 0, 0, .45),
        0 4px 12px -4px rgba(0, 0, 0, .25);
    transform: translateY(16px);
    opacity: 0;
    transition: transform .22s var(--pk-ease, ease-out),
                opacity .22s var(--pk-ease, ease-out);
    max-width: 100%;
    text-align: center;
}
.pk-toast.is-shown {
    transform: translateY(0);
    opacity: 1;
}
.pk-toast.is-leaving {
    transform: translateY(-8px);
    opacity: 0;
}
.pk-toast-success {
    background: linear-gradient(180deg, #16a34a 0%, #15803d 100%);
}
.pk-toast-error {
    background: linear-gradient(180deg, #dc2626 0%, #b91c1c 100%);
}
.pk-toast-info {
    background: linear-gradient(180deg, var(--pk-primary-500) 0%, var(--pk-primary-600) 100%);
}

/* Fade-in для новых карточек при load-more append. */
.pk-fade-in {
    animation: pk-fade-in .35s var(--pk-ease, ease-out) both;
}
@keyframes pk-fade-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Heart-button: micro-bounce при toggle (CSS-only animation triggered
   через `transition` на background-color/scale). */
.fav-btn { transition: transform .15s ease, color .15s ease; }
.fav-btn.is-favorite { color: var(--pk-danger-500); }
.fav-btn:active { transform: scale(0.85); }

/* === 54. Skeleton loaders (Phase 11) =================================== */
/* Используются при initial-load и при load-more pagination, пока fetch
   идёт. Показываем 3 ghost-карточки с shimmer-анимацией — даёт ощущение
   что контент уже почти тут, а не «пустой экран → пуф». */
.pk-skeleton-card {
    display: flex;
    gap: 14px;
    padding: 16px;
    background: var(--pk-bg-elevated);
    border: 1px solid var(--pk-border);
    border-radius: 16px;
    margin-bottom: 10px;
}
.pk-skeleton-media {
    flex: 0 0 auto;
    width: 64px;
    height: 64px;
    border-radius: 14px;
    background: var(--pk-gray-100, #f1f5f9);
    position: relative;
    overflow: hidden;
}
.pk-skeleton-body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 4px;
}
.pk-skeleton-line {
    height: 14px;
    border-radius: 6px;
    background: var(--pk-gray-100, #f1f5f9);
    position: relative;
    overflow: hidden;
}
.pk-skeleton-line.short { width: 40%; }
.pk-skeleton-line.medium { width: 60%; }
.pk-skeleton-line.long { width: 90%; }

/* Shimmer-анимация: бегущий gradient справа налево по skeleton-плоскости. */
.pk-skeleton-media::after,
.pk-skeleton-line::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(99, 102, 241, .12) 50%,
        transparent 100%);
    animation: pk-shimmer 1.4s linear infinite;
}
@keyframes pk-shimmer {
    from { transform: translateX(-100%); }
    to   { transform: translateX(100%); }
}

:root[data-theme="dark"] .pk-skeleton-media,
:root[data-theme="dark"] .pk-skeleton-line {
    background: rgba(255, 255, 255, .06);
}
:root[data-theme="dark"] .pk-skeleton-media::after,
:root[data-theme="dark"] .pk-skeleton-line::after {
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(165, 180, 252, .18) 50%,
        transparent 100%);
}

/* === 55. Pull-to-refresh indicator (Phase 11) ========================== */
.pk-ptr-indicator {
    position: fixed;
    top: -50px;
    left: 50%;
    transform: translateX(-50%) translateY(-50px);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--pk-bg-elevated);
    border: 1px solid var(--pk-border);
    box-shadow: 0 6px 18px -4px rgba(0, 0, 0, .15);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 200;
    transition: none; /* при touchmove двигаем напрямую через transform */
}
.pk-ptr-spinner {
    width: 18px;
    height: 18px;
    border: 2px solid var(--pk-border);
    border-top-color: var(--pk-primary-500);
    border-radius: 50%;
    transition: transform .15s ease;
}
.pk-ptr-indicator.is-ready .pk-ptr-spinner {
    border-top-color: var(--pk-success-500, #16a34a);
    transform: rotate(180deg);
}
.pk-ptr-indicator.is-refreshing .pk-ptr-spinner {
    animation: pk-spin .8s linear infinite;
    border-top-color: var(--pk-primary-500);
    transform: none;
}

/* === 56. Live new-parcel banner (Phase 11 R1) ========================== */
.pk-live-banner {
    position: fixed;
    top: 76px;     /* below navbar */
    left: 50%;
    transform: translateX(-50%) translateY(-12px);
    z-index: 60;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 999px;
    background: var(--pk-primary-500);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    box-shadow:
        0 12px 28px -8px rgba(99, 102, 241, .55),
        0 4px 8px -2px rgba(0, 0, 0, .15);
    opacity: 0;
    transition: opacity .25s ease, transform .25s ease;
}
.pk-live-banner.is-shown {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
.pk-live-banner:hover {
    background: var(--pk-primary-600);
}
.pk-live-banner strong { font-weight: 800; }

/* === 57. Trusted-user chip (Phase 12 T1) ============================== */
/* Появляется когда `User.is_trusted == True` (5+ deliveries, 3+ reviews,
   ★4.5+). Golden gradient — отличается от других chip'ов, сигнализирует
   повышенное доверие. Inline-вариант — компактнее для author-card.    */
.pk-trusted-chip {
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
    color: #78350f;
    border-radius: 999px;
    padding: 2px 10px;
    font-size: 12px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    box-shadow: 0 1px 3px rgba(245, 158, 11, .35);
    border: 1px solid rgba(180, 83, 9, .15);
}
.pk-trusted-chip .icon { color: #92400e; }
:root[data-theme="dark"] .pk-trusted-chip {
    background: linear-gradient(135deg, #fde68a 0%, #fbbf24 100%);
    color: #422006;
    box-shadow:
        0 1px 4px rgba(251, 191, 36, .45),
        0 0 14px rgba(251, 191, 36, .25);
    border-color: rgba(180, 83, 9, .25);
}
/* Inline вариант — для compact мест (author-card в parcel detail). */
.pk-trusted-chip--inline {
    padding: 1px 7px;
    font-size: 10.5px;
    margin-left: 4px;
    vertical-align: 1px;
}
.pk-trusted-chip--inline .icon { font-size: 10px !important; }

/* === 58. Trending routes home section (Phase 12 D1) =================== */
.pk-trending-title { display: flex; align-items: center; }
.pk-trending-title .icon { color: #f59e0b; }
.pk-trending-scroll {
    display: flex;
    gap: 10px;
    padding: 4px var(--pk-s-4) 16px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.pk-trending-scroll::-webkit-scrollbar { display: none; }
.pk-trending-card {
    flex: 0 0 auto;
    width: 200px;
    padding: 14px;
    background: linear-gradient(135deg,
        rgba(251, 191, 36, .08) 0%,
        var(--pk-bg-elevated) 70%);
    border: 1px solid var(--pk-border);
    border-radius: var(--pk-r-md);
    text-decoration: none;
    color: var(--pk-text);
    transition: transform var(--pk-t-fast), border-color var(--pk-t-fast),
                box-shadow var(--pk-t-fast);
}
.pk-trending-card:hover {
    transform: translateY(-2px);
    border-color: #f59e0b;
    box-shadow: 0 10px 24px -10px rgba(245, 158, 11, .35);
}
:root[data-theme="dark"] .pk-trending-card {
    background: linear-gradient(135deg,
        rgba(251, 191, 36, .12) 0%,
        var(--pk-bg-elevated) 70%);
}
.pk-trending-card-route {
    font-size: 14px;
    font-weight: 600;
    color: var(--pk-text-strong);
    line-height: 1.3;
}
.pk-trending-from,
.pk-trending-to {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pk-trending-arrow {
    font-size: 12px !important;
    color: var(--pk-text-muted);
    margin: 2px 0;
}
.pk-trending-count {
    margin-top: 8px;
    font-size: 12px;
    color: #c2410c;
    font-weight: 600;
}
:root[data-theme="dark"] .pk-trending-count {
    color: #fdba74;
}

/* === 59. Sticky list-head (Phase 12 S3 + Phase 13 polish) ============= */
/* `.pk-list-head` на /parcels/ содержит actionable controls: search,
   filters, sort. Title-блок (`.pk-list-head-top`) вынесен ИЗ sticky-бара
   и скроллится наверх как обычный контент.
   Sticky-бар при скролле остаётся под navbar — без `max-height`-анимаций
   и без `backdrop-filter`, который на мобиле сильно дропает FPS. */

/* На страницах со sticky filter bar убираем breathing-room padding
   между navbar и контентом (var(--pk-s-3) = 12px), чтобы sticky-бар
   при stuck-состоянии прилипал ровно под navbar без gap'а, через
   который проглядывают карточки. На остальных страницах padding
   остаётся для дыхания. */
.page-content:has(> .pk-list-head[data-pk-sticky-head]) {
    padding-top: var(--pk-navbar-height);
}

/* Sticky head — компактный padding-top чтобы title не «висел» далеко
   от search-input. Убираем «лишнее пространство», которое user
   воспринимает как «здесь что-то должно быть». */
.pk-list-head[data-pk-sticky-head] {
    padding-top: 4px !important;
    padding-bottom: 6px !important;
}

.pk-list-head {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--pk-bg, #fff);
    /* Только background + shadow меняются при stuck — обе non-layout
       свойства, безопасны для GPU compositing. */
    transition: box-shadow .2s ease;
}
.pk-list-head.is-stuck {
    box-shadow: 0 4px 12px -6px rgba(0, 0, 0, .12);
    border-bottom: 1px solid var(--pk-border, rgba(0, 0, 0, .06));
}
:root[data-theme="dark"] .pk-list-head {
    background: var(--pk-bg, #0f172a);
}
:root[data-theme="dark"] .pk-list-head.is-stuck {
    box-shadow: 0 4px 16px -6px rgba(0, 0, 0, .4);
    border-bottom-color: rgba(255, 255, 255, .08);
}

/* На desktop с GPU acceleration можно позволить backdrop-filter blur — там
   60fps легко. На мобиле — НЕТ (используем solid bg выше). */
@media (min-width: 768px) and (hover: hover) {
    .pk-list-head.is-stuck {
        background: rgba(255, 255, 255, .9);
        backdrop-filter: blur(10px) saturate(140%);
        -webkit-backdrop-filter: blur(10px) saturate(140%);
    }
    :root[data-theme="dark"] .pk-list-head.is-stuck {
        background: rgba(15, 23, 42, .9);
    }
}

/* Title block (`.pk-list-head-top`) теперь обычный контент в потоке.
   Нет анимаций при скролле → нет reflow → плавный native scroll.
   `padding-top: 10px` — мягкое дыхание от navbar (s-3 / s-4 = 12-16
   считалось бы «лишним местом» по фидбеку user'а).
   `margin-bottom: 6px` — title плотно прилегает к sticky-бару без
   ощущения «здесь что-то должно быть». */
.page-content:has(> .pk-list-head[data-pk-sticky-head]) .pk-list-head-top {
    padding-top: 10px;
    margin-bottom: 6px;
}

/* Sentinel — 1px invisible элемент между title и sticky-bar.
   IntersectionObserver следит за ним: visible → bar в покое, hidden → stuck. */
.pk-sticky-sentinel {
    width: 100%;
    height: 1px;
    pointer-events: none;
}

/* === 60. Parcel-card refinement (Phase 13) ============================ */
/* Visual polish: больше дыхания, refined typography, color-rich hover.   */
.parcel-card {
    padding: 16px;
    gap: 16px;
    border-radius: 18px;
    transition:
        transform .18s cubic-bezier(.2, .8, .3, 1),
        box-shadow .22s ease,
        border-color .18s ease,
        background .18s ease;
}
.parcel-card:hover {
    transform: translateY(-3px);
    border-color: var(--pk-primary-300, rgba(99, 102, 241, .35));
    box-shadow:
        0 18px 36px -16px rgba(99, 102, 241, .35),
        0 6px 14px -6px rgba(0, 0, 0, .1);
}
:root[data-theme="dark"] .parcel-card:hover {
    box-shadow:
        0 24px 44px -18px rgba(99, 102, 241, .50),
        0 8px 18px -8px rgba(0, 0, 0, .35);
    border-color: rgba(129, 140, 248, .45);
}

/* Media icon: vivid gradient avatar with white glyph (Phase 75 unified style). */
.parcel-card .parcel-card-media {
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, #6366f1, #8b5cf6 60%, #ec4899);
    color: #fff;
    border: none;
    box-shadow: 0 6px 14px -6px rgba(139,92,246,.50);
    transition: transform .25s var(--pk-ease, ease-out), box-shadow .2s ease;
}
.parcel-card:hover .parcel-card-media {
    transform: scale(1.05) rotate(-1deg);
    box-shadow: 0 10px 18px -6px rgba(139,92,246,.55);
}
.parcel-card .parcel-card-media .icon { font-size: 24px; color: inherit; }
:root[data-theme="dark"] .parcel-card .parcel-card-media {
    box-shadow: 0 6px 14px -6px rgba(139,92,246,.65);
}

/* Title: чуть крупнее + tighter tracking. */
.parcel-card .parcel-card-title {
    font-size: 15.5px;
    font-weight: 650;
    letter-spacing: -0.01em;
    line-height: 1.35;
}

/* Route: подчёркивается primary-color при hover на карточку. */
.parcel-card .parcel-card-route {
    font-size: 13px;
    color: var(--pk-text-strong);
    font-weight: 500;
    transition: color .2s ease;
}
.parcel-card:hover .parcel-card-route {
    color: var(--pk-primary-700);
}
:root[data-theme="dark"] .parcel-card:hover .parcel-card-route {
    color: var(--pk-primary-300);
}

/* Reward chip: pill с subtle border + gradient. */
.parcel-card .parcel-card-reward {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    color: #78350f;
    border: 1px solid rgba(217, 119, 6, .25);
    border-radius: 999px;
    padding: 3px 10px;
    font-size: 12.5px;
    font-weight: 700;
    white-space: nowrap;
    box-shadow: 0 1px 2px rgba(217, 119, 6, .15);
}
:root[data-theme="dark"] .parcel-card .parcel-card-reward {
    background: linear-gradient(135deg,
        rgba(251, 191, 36, .20) 0%,
        rgba(251, 191, 36, .10) 100%);
    color: #fde68a;
    border-color: rgba(251, 191, 36, .35);
}

/* Meta-row: больше воздуха */
.parcel-card .parcel-card-meta {
    margin-top: 8px;
    gap: 6px;
}

/* Description: легче по тону, italic ощущение через letter-spacing */
.parcel-card .parcel-card-desc {
    margin-top: 6px;
    color: var(--pk-text-muted);
    line-height: 1.5;
}

/* Stack-spacing: больше расстояние между карточками для воздуха */
.pk-stack > .parcel-row + .parcel-row {
    margin-top: 12px;
}

/* Focus-visible state: для keyboard navigation. */
.parcel-card:focus-visible {
    outline: 2px solid var(--pk-primary-500);
    outline-offset: 2px;
}

/* === 62. PWA install banner (Phase 14 G1) ============================== */
/* Floating bottom-anchored banner. Появляется через JS-класс
   `PkInstallPrompt` для engaged юзеров (visits >= 2). Скрыт пока
   `beforeinstallprompt` не выстрелил или на iOS — instruction-version.

   Дизайн: компактная floating card, не блокирует контент. Slide-in
   снизу когда добавляется класс `.is-visible`. На большом экране
   sticks к bottom-right (corner-toast), на mobile — полная ширина
   с side margins. Z-index 200 — поверх sticky-bar (50), но НИЖЕ
   модалок (1000). */
.pk-install-banner {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: calc(var(--pk-tabbar-height, 64px) + env(safe-area-inset-bottom, 0px) + 16px);
    z-index: 200;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: var(--pk-bg-elevated, #fff);
    border: 1px solid var(--pk-border, rgba(0,0,0,.08));
    border-radius: 16px;
    box-shadow:
        0 10px 30px -10px rgba(99, 102, 241, .35),
        0 4px 12px -4px rgba(0, 0, 0, .12);
    transform: translateY(calc(100% + 80px));
    opacity: 0;
    transition: transform .4s cubic-bezier(.2,.8,.3,1), opacity .3s ease;
    pointer-events: none;
}
.pk-install-banner.is-visible {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}
.pk-install-banner-icon {
    flex-shrink: 0;
    width: 40px; height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--pk-grad-primary, linear-gradient(135deg, #6366f1, #8b5cf6));
    border-radius: 12px;
    color: #fff;
    box-shadow: 0 4px 12px -4px rgba(99, 102, 241, .5);
}
.pk-install-banner-icon .icon { font-size: 22px; }
.pk-install-banner-text {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    line-height: 1.3;
}
.pk-install-banner-text strong {
    font-size: 14px;
    font-weight: 700;
    color: var(--pk-text-strong);
}
.pk-install-banner-text span {
    font-size: 12.5px;
    color: var(--pk-text-muted);
}
.pk-install-banner-text b {
    font-weight: 600;
    color: var(--pk-text);
}
.pk-install-banner-btn {
    flex-shrink: 0;
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    background: var(--pk-grad-primary, linear-gradient(135deg, #6366f1, #8b5cf6));
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: transform var(--pk-t-fast, .15s ease);
    box-shadow: 0 4px 10px -4px rgba(99, 102, 241, .4);
}
.pk-install-banner-btn:hover { transform: translateY(-1px); }
.pk-install-banner-btn:active { transform: scale(0.96); }
.pk-install-banner-close {
    flex-shrink: 0;
    width: 28px; height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 50%;
    color: var(--pk-text-muted);
    cursor: pointer;
    transition: background var(--pk-t-fast, .15s ease);
}
.pk-install-banner-close:hover {
    background: var(--pk-gray-100, rgba(0,0,0,.05));
    color: var(--pk-text);
}
.pk-install-banner-close .icon { font-size: 16px; }

/* iOS instruction version: no install button, just instructions. */
.pk-install-banner-ios .pk-install-banner-text span {
    font-size: 12px;
    line-height: 1.4;
}

:root[data-theme="dark"] .pk-install-banner {
    background: var(--pk-bg-elevated);
    border-color: rgba(255, 255, 255, .08);
    box-shadow:
        0 10px 30px -10px rgba(99, 102, 241, .45),
        0 4px 12px -4px rgba(0, 0, 0, .5);
}

/* На очень узких экранах — компактнее */
@media (max-width: 380px) {
    .pk-install-banner {
        padding: 10px 12px;
        gap: 10px;
    }
    .pk-install-banner-icon { width: 36px; height: 36px; }
    .pk-install-banner-btn {
        padding: 7px 11px;
        font-size: 12.5px;
    }
}

/* === 63. Profile completion meter (Phase 14 G2) ======================= */
/* Banner на /profile/ с progress bar и action chips для незаполненных
   полей. Цель: trust signal + nudge юзера на completion = больше responses.
   Скрывается когда completion >= 80%. */
.pk-completion-card {
    margin: 12px var(--pk-s-4) 16px;
    padding: 16px 18px;
    background: linear-gradient(135deg,
        var(--pk-primary-50, #eef2ff) 0%,
        rgba(139, 92, 246, .08) 100%);
    border: 1px solid var(--pk-primary-200, rgba(99, 102, 241, .25));
    border-radius: 16px;
    box-shadow: 0 4px 14px -8px rgba(99, 102, 241, .3);
}
:root[data-theme="dark"] .pk-completion-card {
    background: linear-gradient(135deg,
        rgba(99, 102, 241, .12) 0%,
        rgba(139, 92, 246, .08) 100%);
    border-color: rgba(129, 140, 248, .25);
}
.pk-completion-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}
.pk-completion-title {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14.5px;
    font-weight: 700;
    color: var(--pk-text-strong);
}
.pk-completion-title .icon {
    color: var(--pk-primary-600);
}
.pk-completion-percent {
    font-size: 17px;
    font-weight: 800;
    color: var(--pk-primary-600);
    letter-spacing: -0.02em;
}
:root[data-theme="dark"] .pk-completion-percent {
    color: var(--pk-primary-300);
}
.pk-completion-bar {
    width: 100%;
    height: 6px;
    background: rgba(99, 102, 241, .15);
    border-radius: 999px;
    overflow: hidden;
    margin-bottom: 10px;
}
.pk-completion-bar-fill {
    height: 100%;
    background: var(--pk-grad-primary, linear-gradient(90deg, #6366f1, #8b5cf6));
    border-radius: inherit;
    transition: width .6s cubic-bezier(.2,.8,.3,1);
}
.pk-completion-hint {
    font-size: 12.5px;
    color: var(--pk-text-muted);
    line-height: 1.4;
    margin-bottom: 12px;
}
.pk-completion-steps {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.pk-completion-step {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 12px;
    background: var(--pk-bg-elevated, #fff);
    border: 1px solid var(--pk-primary-200, rgba(99, 102, 241, .25));
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--pk-primary-700);
    text-decoration: none;
    transition: all var(--pk-t-fast, .15s ease);
}
.pk-completion-step:hover {
    background: var(--pk-primary-50);
    border-color: var(--pk-primary-400);
    transform: translateY(-1px);
    box-shadow: 0 4px 10px -4px rgba(99, 102, 241, .3);
}
.pk-completion-step .icon {
    font-size: 14px;
    color: var(--pk-primary-600);
}
:root[data-theme="dark"] .pk-completion-step {
    background: var(--pk-bg-elevated);
    color: var(--pk-primary-300);
    border-color: rgba(129, 140, 248, .25);
}

/* === 64. About / How-it-works conversion page (Phase 14 G3) =========== */

.pk-about-hero {
    margin: 12px var(--pk-s-4) 24px;
    padding: 28px 22px 26px;
    background: linear-gradient(135deg,
        var(--pk-primary-50, #eef2ff) 0%,
        rgba(139, 92, 246, .12) 100%);
    border: 1px solid var(--pk-primary-200, rgba(99, 102, 241, .2));
    border-radius: 24px;
    text-align: center;
    position: relative;
    overflow: hidden;
}
:root[data-theme="dark"] .pk-about-hero {
    background: linear-gradient(135deg,
        rgba(99, 102, 241, .15) 0%,
        rgba(139, 92, 246, .1) 100%);
    border-color: rgba(129, 140, 248, .2);
}
.pk-about-hero::before {
    content: '';
    position: absolute;
    top: -40px; right: -40px;
    width: 180px; height: 180px;
    background: radial-gradient(circle, rgba(99, 102, 241, .15) 0%, transparent 70%);
    pointer-events: none;
}
.pk-about-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    background: var(--pk-bg-elevated, #fff);
    border: 1px solid var(--pk-primary-200);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    color: var(--pk-primary-700);
    margin-bottom: 16px;
}
.pk-about-hero-badge .icon { color: #f59e0b; }
.pk-about-hero-title {
    margin: 0 0 12px;
    font-size: 28px;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--pk-text-strong);
}
.pk-about-hero-text {
    margin: 0 0 22px;
    font-size: 14.5px;
    line-height: 1.5;
    color: var(--pk-text-muted);
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
}
.pk-about-hero-cta {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
}
.pk-about-cta-primary {
    width: 100%;
    max-width: 280px;
    background: var(--pk-grad-primary, linear-gradient(135deg, #6366f1, #8b5cf6)) !important;
    color: #fff !important;
    border: none !important;
    font-weight: 700 !important;
    box-shadow: 0 8px 20px -8px rgba(99, 102, 241, .55);
    height: 46px !important;
}
.pk-about-cta-secondary {
    background: transparent;
    color: var(--pk-primary-700);
    font-weight: 600;
    text-decoration: none;
}

.pk-about-section-title {
    margin-top: 24px !important;
    text-transform: uppercase;
    font-size: 11px !important;
    letter-spacing: 0.08em;
    color: var(--pk-text-muted) !important;
}

/* Role-track label above each set of steps (Phase 32 — two-sided). */
.pk-about-track-label {
    margin: 4px var(--pk-s-4) 10px;
}
.pk-about-track-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: -0.01em;
}
.pk-about-track-chip-send {
    background: var(--pk-primary-50, #eef2ff);
    color: var(--pk-primary-700, #4338ca);
}
.pk-about-track-chip-trip {
    background: var(--pk-success-50, #ecfdf5);
    color: var(--pk-success-700, #047857);
}
:root[data-theme="dark"] .pk-about-track-chip-send {
    background: rgba(99, 102, 241, .16);
    color: #a5b4fc;
}
:root[data-theme="dark"] .pk-about-track-chip-trip {
    background: rgba(16, 185, 129, .16);
    color: #6ee7b7;
}

/* Steps: 3-column on desktop, single column on mobile */
.pk-about-steps {
    margin: 0 var(--pk-s-4) 24px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}
@media (min-width: 720px) {
    .pk-about-steps {
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
    }
}
.pk-about-step {
    position: relative;
    padding: 20px 18px 18px;
    background: var(--pk-bg-elevated, #fff);
    border: 1px solid var(--pk-border, rgba(0,0,0,.08));
    border-radius: 18px;
    transition: transform var(--pk-t-fast, .15s ease), box-shadow var(--pk-t-fast);
}
.pk-about-step:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px -10px rgba(99, 102, 241, .25);
}
.pk-about-step-num {
    position: absolute;
    top: -10px; left: 18px;
    width: 26px; height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--pk-grad-primary);
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    border-radius: 50%;
    box-shadow: 0 4px 10px -4px rgba(99, 102, 241, .5);
}
.pk-about-step-icon {
    width: 48px; height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    margin-bottom: 12px;
}
.pk-about-step-icon .icon { font-size: 24px; color: #fff; }
.pk-about-step-icon-1 { background: linear-gradient(135deg, #6366f1, #8b5cf6); }
.pk-about-step-icon-2 { background: linear-gradient(135deg, #10b981, #14b8a6); }
.pk-about-step-icon-3 { background: linear-gradient(135deg, #f59e0b, #f97316); }
.pk-about-step-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--pk-text-strong);
    margin-bottom: 4px;
}
.pk-about-step-desc {
    font-size: 13.5px;
    color: var(--pk-text-muted);
    line-height: 1.5;
}

/* Stats: 3-column row */
.pk-about-stats {
    margin: 0 var(--pk-s-4) 24px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    padding: 18px 14px;
    background: var(--pk-bg-elevated, #fff);
    border: 1px solid var(--pk-border);
    border-radius: 18px;
}
.pk-about-stat {
    text-align: center;
}
.pk-about-stat-value {
    font-size: 24px;
    font-weight: 800;
    color: var(--pk-primary-600);
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin-bottom: 2px;
}
:root[data-theme="dark"] .pk-about-stat-value {
    color: var(--pk-primary-300);
}
.pk-about-stat-label {
    font-size: 11.5px;
    color: var(--pk-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}

/* Features list */
.pk-about-features {
    margin: 0 var(--pk-s-4) 24px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}
@media (min-width: 720px) {
    .pk-about-features { grid-template-columns: repeat(2, 1fr); }
}
.pk-about-feature {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    background: var(--pk-bg-elevated, #fff);
    border: 1px solid var(--pk-border);
    border-radius: 14px;
}
.pk-about-feature > .icon {
    flex-shrink: 0;
    font-size: 22px !important;
    color: var(--pk-primary-600);
    margin-top: 2px;
}
.pk-about-feature strong {
    display: block;
    font-size: 14.5px;
    font-weight: 700;
    color: var(--pk-text-strong);
    margin-bottom: 4px;
}
.pk-about-feature p {
    margin: 0;
    font-size: 13px;
    color: var(--pk-text-muted);
    line-height: 1.45;
}

/* FAQ accordion */
.pk-about-faq {
    margin: 0 var(--pk-s-4) 24px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.pk-about-faq-item {
    background: var(--pk-bg-elevated, #fff);
    border: 1px solid var(--pk-border);
    border-radius: 14px;
    overflow: hidden;
    transition: border-color var(--pk-t-fast);
}
.pk-about-faq-item[open] {
    border-color: var(--pk-primary-300);
}
.pk-about-faq-item summary {
    padding: 14px 18px;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--pk-text-strong);
    cursor: pointer;
    list-style: none;
    position: relative;
    padding-right: 44px;
    transition: background var(--pk-t-fast);
}
.pk-about-faq-item summary::-webkit-details-marker { display: none; }
.pk-about-faq-item summary::after {
    content: '+';
    position: absolute;
    right: 18px; top: 50%;
    transform: translateY(-50%);
    font-size: 22px;
    font-weight: 300;
    color: var(--pk-primary-600);
    transition: transform var(--pk-t-fast);
    line-height: 1;
}
.pk-about-faq-item[open] summary::after {
    content: '×';
    font-size: 24px;
}
.pk-about-faq-item summary:hover {
    background: var(--pk-primary-50);
}
:root[data-theme="dark"] .pk-about-faq-item summary:hover {
    background: rgba(99, 102, 241, .08);
}
.pk-about-faq-item p {
    margin: 0;
    padding: 0 18px 16px;
    font-size: 13.5px;
    color: var(--pk-text-muted);
    line-height: 1.55;
}

/* Final CTA section */
.pk-about-cta-final {
    margin: 24px var(--pk-s-4) 32px;
    padding: 28px 22px;
    background: linear-gradient(135deg, var(--pk-primary-600), #8b5cf6);
    border-radius: 24px;
    text-align: center;
    color: #fff;
    box-shadow: 0 20px 40px -20px rgba(99, 102, 241, .55);
}
.pk-about-cta-final h2 {
    margin: 0 0 8px;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.02em;
    /* Контейнер `.pk-about-cta-final` имеет gradient bg (indigo→violet),
       поэтому заголовок ВСЕГДА должен быть белым — независимо от текущей
       темы. По умолчанию `h2` наследует `color: var(--pk-text)` (тёмный
       в светлой теме) — переопределяем явно. */
    color: #fff;
}
.pk-about-cta-final p {
    margin: 0 0 20px;
    font-size: 14px;
    opacity: .9;
    line-height: 1.45;
}
.pk-about-cta-final .pk-about-cta-primary {
    background: #fff !important;
    color: var(--pk-primary-700) !important;
    box-shadow: 0 8px 20px -8px rgba(0, 0, 0, .25);
}
.pk-about-cta-final-links {
    margin-top: 14px;
    font-size: 13px;
    opacity: .8;
}
.pk-about-cta-final-links a {
    color: #fff;
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, .4);
    padding-bottom: 1px;
}
.pk-about-cta-final-links span { margin: 0 8px; opacity: .5; }

/* === 67. City landing page (Phase 15 S1) ============================== */
/* SEO long-tail страница для каждого города. URL: /parcels/c/<slug>-<id>/.
   Hero с location icon + 2 stats (from / to), then sections of parcels. */

.pk-city-hero {
    margin: 8px var(--pk-s-4) 16px;
    padding: 24px 22px;
    background: linear-gradient(135deg,
        var(--pk-primary-50, #eef2ff) 0%,
        rgba(99, 102, 241, .12) 100%);
    border: 1px solid var(--pk-primary-200);
    border-radius: 20px;
    text-align: center;
    position: relative;
    overflow: hidden;
}
:root[data-theme="dark"] .pk-city-hero {
    background: linear-gradient(135deg,
        rgba(99, 102, 241, .15) 0%,
        rgba(139, 92, 246, .1) 100%);
    border-color: rgba(129, 140, 248, .2);
}
.pk-city-hero-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 60px; height: 60px;
    background: var(--pk-grad-primary);
    border-radius: 18px;
    margin-bottom: 12px;
    box-shadow: 0 8px 20px -8px rgba(99, 102, 241, .5);
}
.pk-city-hero-icon .icon {
    font-size: 30px;
    color: #fff;
}
.pk-city-hero-title {
    margin: 0 0 6px;
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--pk-text-strong);
    line-height: 1.15;
}
.pk-city-hero-subtitle {
    font-size: 13px;
    color: var(--pk-text-muted);
    margin-bottom: 16px;
}
.pk-city-hero-stats {
    display: flex;
    justify-content: center;
    gap: 24px;
    margin-bottom: 18px;
}
.pk-city-hero-stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
    align-items: center;
}
.pk-city-hero-stat strong {
    font-size: 22px;
    font-weight: 800;
    color: var(--pk-primary-600);
    letter-spacing: -0.02em;
}
:root[data-theme="dark"] .pk-city-hero-stat strong {
    color: var(--pk-primary-300);
}
.pk-city-hero-stat span {
    font-size: 11.5px;
    color: var(--pk-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
}
.pk-city-hero-cta {
    background: var(--pk-grad-primary) !important;
    color: #fff !important;
    border: none !important;
    font-weight: 700 !important;
    /* Phase 67 mobile fix: F7 button была `height: 42px` (фиксированная) +
       nowrap, и «Опубликовать посылку из Санкт-Петербург» убегало за экран
       на 375px. Делаем wrap + auto-height. */
    min-height: 42px !important;
    height: auto !important;
    padding: 10px 16px !important;
    white-space: normal !important;
    line-height: 1.25 !important;
    text-align: center;
    word-wrap: break-word;
    overflow-wrap: break-word;
    box-shadow: 0 8px 18px -8px rgba(99, 102, 241, .5);
}
.pk-city-hero-cta .icon { flex-shrink: 0; }

.pk-city-section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    text-transform: uppercase;
    font-size: 11px !important;
    letter-spacing: 0.08em;
    color: var(--pk-text-muted) !important;
    margin: 16px var(--pk-s-4) 6px !important;
}
.pk-city-section-title .icon {
    color: var(--pk-primary-600);
}
.pk-city-see-all {
    text-transform: none;
    font-size: 12px;
    color: var(--pk-primary-600);
    text-decoration: none;
    font-weight: 600;
    letter-spacing: 0;
}
.pk-city-see-all:hover { text-decoration: underline; }

.pk-city-stack {
    margin: 0 var(--pk-s-4) 8px;
}

.pk-city-empty {
    text-align: center;
    margin: 32px var(--pk-s-4) 24px;
    padding: 32px 20px;
    background: var(--pk-bg-elevated);
    border: 1px solid var(--pk-border);
    border-radius: 18px;
}
.pk-city-empty .icon {
    color: var(--pk-text-muted);
    opacity: .6;
    margin-bottom: 12px;
}
.pk-city-empty h3 {
    margin: 0 0 8px;
    font-size: 16px;
    font-weight: 700;
    color: var(--pk-text-strong);
}
.pk-city-empty p {
    margin: 0 0 16px;
    font-size: 13.5px;
    color: var(--pk-text-muted);
    line-height: 1.5;
}

.pk-city-info {
    margin: 0 var(--pk-s-4) 24px;
    padding: 16px 18px;
    background: var(--pk-bg-elevated);
    border: 1px solid var(--pk-border);
    border-radius: 14px;
}
.pk-city-info p {
    margin: 0 0 10px;
    font-size: 13.5px;
    color: var(--pk-text-muted);
    line-height: 1.55;
}
.pk-city-info p:last-child { margin-bottom: 0; }
.pk-city-info a {
    color: var(--pk-primary-600);
    text-decoration: none;
    font-weight: 600;
}
.pk-city-info a:hover { text-decoration: underline; }

/* === 68. SEO Footer (Phase 15 S2) ===================================== */
/* Cross-links на каждой странице — boost SEO + nav helpers.
   Виден внутри scrollable .page-content (не fixed). */
.pk-footer {
    margin: 32px var(--pk-s-4) 16px;
    padding: 20px 0 16px;
    border-top: 1px solid var(--pk-border, rgba(0, 0, 0, .08));
    color: var(--pk-text-muted);
}
:root[data-theme="dark"] .pk-footer {
    border-top-color: rgba(255, 255, 255, .08);
}
.pk-footer-section + .pk-footer-section {
    margin-top: 16px;
}
.pk-footer-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--pk-text-muted);
    margin-bottom: 8px;
}
.pk-footer-cities {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.pk-footer-city {
    display: inline-flex;
    padding: 5px 11px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--pk-primary-700);
    background: var(--pk-primary-50, #eef2ff);
    border: 1px solid var(--pk-primary-200, rgba(99, 102, 241, .2));
    border-radius: 999px;
    text-decoration: none;
    transition: all var(--pk-t-fast, .15s ease);
}
.pk-footer-city:hover {
    background: var(--pk-primary-100);
    border-color: var(--pk-primary-400);
    transform: translateY(-1px);
    box-shadow: 0 4px 10px -4px rgba(99, 102, 241, .25);
}
:root[data-theme="dark"] .pk-footer-city {
    background: rgba(99, 102, 241, .12);
    color: var(--pk-primary-300);
    border-color: rgba(129, 140, 248, .2);
}
.pk-footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
}
.pk-footer-links a {
    font-size: 13px;
    color: var(--pk-text);
    text-decoration: none;
    transition: color var(--pk-t-fast);
}
.pk-footer-links a:hover {
    color: var(--pk-primary-600);
}
.pk-footer-bottom {
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px dashed var(--pk-border);
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: flex-start;
}
.pk-footer-brand {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--pk-text-strong);
}
.pk-footer-tagline {
    font-size: 11.5px;
    color: var(--pk-text-muted);
}
.pk-footer-attr {
    margin-top: 6px;
    font-size: 10.5px;
    color: var(--pk-text-muted);
    opacity: .75;
}
.pk-footer-attr a {
    color: inherit;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

/* === 69. Activity feed on home (Phase 15 S3) ========================== */
/* Social proof: показываем последние events (new posts, done deliveries).
   Сразу под trending routes, перед recently-viewed. Cached 2 min. */
.pk-activity-title {
    display: flex;
    align-items: center;
    gap: 6px;
    text-transform: uppercase;
    font-size: 11px !important;
    letter-spacing: 0.06em;
    color: var(--pk-text-muted) !important;
}
.pk-activity-title .icon {
    color: #f59e0b;  /* orange flame */
}

.pk-activity-feed {
    list-style: none;
    margin: 0 var(--pk-s-4) 8px;
    padding: 0;
    background: var(--pk-bg-elevated, #fff);
    border: 1px solid var(--pk-border);
    border-radius: 16px;
    overflow: hidden;
}
.pk-activity-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--pk-border, rgba(0, 0, 0, .06));
    transition: background var(--pk-t-fast, .15s ease);
    /* Phase 53 fix: всю строку делаем кликабельной — раньше можно было
       тапнуть только по стрелке. Stretched-link: невидимый overlay от
       `.pk-activity-link::before` ловит клик по ВСЕЙ карточке. */
    position: relative;
    cursor: pointer;
}
.pk-activity-item:last-child { border-bottom: none; }
.pk-activity-item:hover {
    background: var(--pk-primary-50, rgba(99, 102, 241, .04));
}
:root[data-theme="dark"] .pk-activity-item:hover {
    background: rgba(99, 102, 241, .08);
}

.pk-activity-icon {
    flex-shrink: 0;
    width: 34px; height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
}
.pk-activity-icon .icon { font-size: 18px; color: #fff; }
.pk-activity-item-new .pk-activity-icon {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
}
.pk-activity-item-done .pk-activity-icon {
    background: linear-gradient(135deg, #10b981, #14b8a6);
}

.pk-activity-body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.pk-activity-text {
    font-size: 13.5px;
    color: var(--pk-text);
    line-height: 1.35;
    word-wrap: break-word;
}
.pk-activity-text strong {
    color: var(--pk-primary-700);
    font-weight: 700;
}
:root[data-theme="dark"] .pk-activity-text strong {
    color: var(--pk-primary-300);
}
.pk-activity-time {
    font-size: 11.5px;
    color: var(--pk-text-muted);
}

.pk-activity-link {
    flex-shrink: 0;
    color: var(--pk-text-muted);
    padding: 4px;
    text-decoration: none;
}
.pk-activity-link .icon { font-size: 18px; }
.pk-activity-link:hover { color: var(--pk-primary-600); }
/* Stretched-link overlay: ловит клик по ВСЕЙ строке. Спан icon-chevron
   остаётся видимым (z-index выше overlay, но overlay прозрачен). */
.pk-activity-link::before {
    content: '';
    position: absolute;
    inset: 0;
}

/* === 70. Courier Trips (Phase 16) ===================================== */
/* Trip = анонс поездки курьера. Двусторонний marketplace.
   Карточки с date-блоком слева (день+месяц), route в центре. */

/* Intro line на /trips/ */
.pk-trips-intro {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 var(--pk-s-4) 12px;
    padding: 10px 14px;
    background: var(--pk-success-50, #ecfdf5);
    border: 1px solid var(--pk-success-200, rgba(16, 185, 129, .2));
    border-radius: 12px;
    font-size: 12.5px;
    color: var(--pk-text-muted);
    line-height: 1.4;
}
.pk-trips-intro .icon {
    flex-shrink: 0;
    font-size: 18px;
    color: var(--pk-success-600, #059669);
}
:root[data-theme="dark"] .pk-trips-intro {
    background: rgba(16, 185, 129, .1);
    border-color: rgba(16, 185, 129, .2);
}

.pk-trips-filter-note {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin: 0 var(--pk-s-4) 10px;
    font-size: 13px;
    font-weight: 600;
    color: var(--pk-text);
}
.pk-trips-filter-note a {
    font-size: 12px;
    color: var(--pk-primary-600);
    text-decoration: none;
    font-weight: 600;
}

/* Trip stack + card */
.pk-trip-stack {
    margin: 0 var(--pk-s-4) 8px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.pk-trip-stack-detail { margin-top: 4px; }

/* Phase 75 polish (trip cards): same visual treatment as parcel-mine cards —
   stronger border, real shadow, status-coloured accent strip on the left. */
.pk-trip-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    padding-left: 20px; /* room for the 4px status strip */
    background: var(--pk-surface-card, #fff);
    border: 1px solid var(--pk-border-strong, #d1d5db);
    border-radius: 18px;
    overflow: hidden;
    text-decoration: none;
    box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 4px 18px -10px rgba(15,23,42,.12);
    transition: transform .15s, box-shadow .15s, border-color .15s;
}
.pk-trip-card::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
    /* default: upcoming/active — indigo gradient */
    background: linear-gradient(180deg, #6366f1, #8b5cf6);
}
.pk-trip-card:hover {
    transform: translateY(-2px);
    border-color: var(--pk-primary-300);
    box-shadow: 0 4px 8px rgba(15,23,42,.06), 0 12px 28px -12px rgba(99, 102, 241, .35);
}
:root[data-theme="dark"] .pk-trip-card {
    border-color: var(--pk-border-strong, #334155);
    box-shadow: 0 1px 2px rgba(0,0,0,.18), 0 4px 18px -10px rgba(0,0,0,.50);
}
/* Archive cards — muted teal/slate strip, lower opacity but still readable */
.pk-trip-card-archived { opacity: .82; }
.pk-trip-card-archived::before {
    background: linear-gradient(180deg, #94a3b8, #64748b);
}
/* Cancelled cards (detected via the .is-cancelled status pill in body) get
   red strip; we can't reliably parent-select that, so handle via :has() with
   a graceful fallback for older browsers (still readable with grey strip). */
.pk-trip-card:has(.pk-trip-card-status.is-cancelled)::before {
    background: linear-gradient(180deg, #ef4444, #b91c1c);
}
.pk-trip-card:has(.pk-trip-card-status.is-expired)::before {
    background: linear-gradient(180deg, #cbd5e1, #94a3b8);
}

/* Date block — calendar-leaf style. Phase 75: gradient + glow shadow. */
.pk-trip-card-date {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 6px 0;
    background: linear-gradient(135deg, #6366f1, #8b5cf6 60%, #ec4899);
    border-radius: 14px;
    color: #fff;
    box-shadow: 0 6px 14px -6px rgba(139,92,246,.50);
}
.pk-trip-card-archived .pk-trip-card-date {
    background: linear-gradient(135deg, #cbd5e1, #94a3b8);
    color: #475569;
    box-shadow: 0 6px 14px -6px rgba(100,116,139,.40);
}
.pk-trip-card:has(.pk-trip-card-status.is-cancelled) .pk-trip-card-date {
    background: linear-gradient(135deg, #f87171, #ef4444);
    color: #fff;
    box-shadow: 0 6px 14px -6px rgba(239,68,68,.40);
}
.pk-trip-card-day {
    font-size: 20px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.02em;
}
.pk-trip-card-month {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: .9;
    margin-top: 2px;
}

.pk-trip-card-body {
    flex: 1 1 auto;
    min-width: 0;
}
.pk-trip-card-route {
    font-size: 14.5px;
    font-weight: 700;
    color: var(--pk-text-strong);
    line-height: 1.3;
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
}
.pk-trip-card-arrow {
    font-size: 13px !important;
    color: var(--pk-primary-500);
}
.pk-trip-card-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    flex-wrap: wrap;
}
.pk-trip-card-author {
    font-size: 12px;
    font-weight: 600;
    color: var(--pk-primary-600);
}
.pk-trip-card-trusted .icon {
    font-size: 13px;
    color: #f59e0b;
}
.pk-trip-card-soon,
.pk-trip-card-exact {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 2px 7px;
    border-radius: 999px;
    background: var(--pk-primary-50);
    color: var(--pk-primary-700);
}
.pk-trip-card-exact {
    background: var(--pk-success-50, #ecfdf5);
    color: var(--pk-success-700, #047857);
}
.pk-trip-card-capacity {
    font-size: 12px;
    color: var(--pk-text-muted);
    margin-top: 4px;
    display: flex;
    align-items: center;
    gap: 4px;
}
.pk-trip-card-capacity .icon { font-size: 13px; }
.pk-trip-card-status {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 2px 7px;
    border-radius: 999px;
}
.pk-trip-card-status.is-cancelled {
    background: var(--pk-danger-50, #fef2f2);
    color: var(--pk-danger-600, #dc2626);
}
.pk-trip-card-status.is-expired {
    background: var(--pk-gray-100, #f1f5f9);
    color: var(--pk-text-muted);
}
.pk-trip-card-chevron {
    flex-shrink: 0;
    font-size: 18px !important;
    color: var(--pk-text-muted);
}

/* Trip row (mine.html — card + cancel button). Phase 75 polish: icon buttons
   now match the card elevation and have clear hover affordance. */
.pk-trip-row {
    display: flex;
    align-items: stretch;
    gap: 8px;
}
.pk-trip-row .pk-trip-card { flex: 1 1 auto; }
.pk-trip-row-action { display: flex; }
/* Default (neutral) — for Duplicate. Phase 75: matches card elevation. */
.pk-trip-row-btn {
    width: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--pk-surface-card, #fff);
    border: 1px solid var(--pk-border-strong, #d1d5db);
    border-radius: 16px;
    color: var(--pk-text-muted);
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 4px 14px -10px rgba(15,23,42,.20);
    transition: background .15s, border-color .15s, transform .15s, box-shadow .15s, color .15s;
}
.pk-trip-row-btn:hover {
    background: var(--pk-primary-50, #eef2ff);
    border-color: var(--pk-primary-300, #a5b4fc);
    color: var(--pk-primary-700, #4338ca);
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(15,23,42,.10);
}
.pk-trip-row-btn .icon { font-size: 18px; }

/* Danger (Cancel ✕) — red icon + red glow */
.pk-trip-row-btn--danger {
    color: #dc2626;
    border-color: rgba(239,68,68,.30);
    box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 4px 14px -8px rgba(239,68,68,.30);
}
.pk-trip-row-btn--danger:hover {
    background: rgba(239,68,68,.10);
    border-color: rgba(239,68,68,.55);
    color: #b91c1c;
    box-shadow: 0 4px 10px rgba(239,68,68,.25);
}

/* Phase 73: green Reactivate variant — visually distinct from red Cancel. */
.pk-trip-row-btn--success {
    color: #047857;
    border-color: rgba(16,185,129,.32);
    box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 4px 14px -8px rgba(16,185,129,.32);
}
.pk-trip-row-btn--success:hover {
    background: rgba(16,185,129,.10);
    border-color: rgba(16,185,129,.55);
    color: #047857;
    box-shadow: 0 4px 10px rgba(16,185,129,.25);
}
:root[data-theme="dark"] .pk-trip-row-btn {
    background: var(--pk-surface-card);
    color: var(--pk-text-muted);
    border-color: var(--pk-border-strong);
}
:root[data-theme="dark"] .pk-trip-row-btn:hover {
    background: rgba(99,102,241,.16);
    border-color: rgba(165,180,252,.45);
    color: #a5b4fc;
}
:root[data-theme="dark"] .pk-trip-row-btn--danger { color: #fca5a5; border-color: rgba(239,68,68,.40); }
:root[data-theme="dark"] .pk-trip-row-btn--danger:hover { color: #fca5a5; }
:root[data-theme="dark"] .pk-trip-row-btn--success { color: #6ee7b7; border-color: rgba(16,185,129,.42); }
:root[data-theme="dark"] .pk-trip-row-btn--success:hover { color: #6ee7b7; }

/* Trip detail hero — flex-column с равномерным gap для предсказуемого ритма.
   Каждый дочерний блок (badge, route, date, capacity, cats, comment, more-link)
   автоматически получает 14px сверху от предыдущего; per-element margin не нужен. */
.pk-trip-hero {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 12px var(--pk-s-4) 16px;
    padding: 22px 20px;
    background: linear-gradient(135deg,
        var(--pk-primary-50, #eef2ff) 0%,
        rgba(139, 92, 246, .1) 100%);
    border: 1px solid var(--pk-primary-200);
    border-radius: 20px;
}
:root[data-theme="dark"] .pk-trip-hero {
    background: linear-gradient(135deg,
        rgba(99, 102, 241, .14) 0%, rgba(139, 92, 246, .1) 100%);
    border-color: rgba(129, 140, 248, .2);
}
.pk-trip-hero.is-cancelled,
.pk-trip-hero.is-expired {
    background: var(--pk-gray-100, #f1f5f9);
    border-color: var(--pk-border);
}
:root[data-theme="dark"] .pk-trip-hero.is-cancelled,
:root[data-theme="dark"] .pk-trip-hero.is-expired {
    background: rgba(255,255,255,.04);
}
/* Badge не растягиваем на всю ширину flex-column */
.pk-trip-hero > .pk-type-badge { align-self: flex-start; }

.pk-trip-hero-route {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    /* небольшой негативный gap-trim чтобы маршрут не казался оторванным от badge */
    margin-top: -2px;
}
.pk-trip-hero-city {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.15;
    color: var(--pk-text-strong);
}
.pk-trip-hero-arrow {
    font-size: 18px !important;
    color: var(--pk-primary-500);
}
.pk-trip-hero-date {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    align-self: flex-start;
    padding: 7px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .55);
    border: 1px solid var(--pk-primary-200, #c7d2fe);
    font-size: 13.5px;
    font-weight: 600;
    color: var(--pk-text);
}
:root[data-theme="dark"] .pk-trip-hero-date {
    background: rgba(15, 23, 42, .35);
    border-color: rgba(129, 140, 248, .3);
}
.pk-trip-hero-date .icon { color: var(--pk-primary-600); }
:root[data-theme="dark"] .pk-trip-hero-date .icon { color: #a5b4fc; }
.pk-trip-hero-date-text { white-space: nowrap; }

.pk-trip-hero-badge {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--pk-primary-100, #e0e7ff);
    color: var(--pk-primary-700);
}
.pk-trip-hero-badge.is-soon {
    background: #fef3c7;
    color: #b45309;
}
.pk-trip-hero-badge.is-cancelled {
    background: var(--pk-danger-50, #fef2f2);
    color: var(--pk-danger-600, #dc2626);
}
.pk-trip-hero-badge.is-expired {
    background: var(--pk-gray-200, #e2e8f0);
    color: var(--pk-text-muted);
}
.pk-trip-hero-capacity {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    color: var(--pk-text);
}
.pk-trip-hero-capacity .icon { color: var(--pk-primary-600); }
.pk-trip-hero-comment {
    padding-top: 12px;
    border-top: 1px dashed var(--pk-border);
    font-size: 13.5px;
    color: var(--pk-text-muted);
    line-height: 1.55;
}
/* «See more on route» в подвале hero — мягкий tertiary-action */
.pk-trip-hero > .pk-route-more {
    align-self: flex-start;
    margin-top: 2px; /* небольшой акцент-отступ от основного контента */
}

.pk-trip-owner-actions {
    padding: 0 var(--pk-s-4);
    margin-top: 4px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.pk-trip-owner-actions form { margin: 0; }

.pk-trip-match-title {
    display: flex;
    align-items: center;
    gap: 6px;
    text-transform: uppercase;
    font-size: 11px !important;
    letter-spacing: 0.06em;
}
.pk-trip-match-title .icon { color: var(--pk-primary-600); }

.pk-trip-nomatch {
    text-align: center;
    margin: 20px var(--pk-s-4);
    padding: 28px 20px;
    background: var(--pk-bg-elevated);
    border: 1px solid var(--pk-border);
    border-radius: 16px;
}
.pk-trip-nomatch .icon { color: var(--pk-text-muted); opacity: .55; }
.pk-trip-nomatch p {
    margin: 10px 0;
    font-size: 13.5px;
    color: var(--pk-text-muted);
}
.pk-trip-nomatch a {
    font-size: 13px;
    color: var(--pk-primary-600);
    text-decoration: none;
    font-weight: 600;
}

.pk-trip-detail-cta {
    text-align: center;
    margin: 4px var(--pk-s-4) 8px;
}
.pk-trip-detail-cta a {
    font-size: 13px;
    color: var(--pk-primary-600);
    text-decoration: none;
    font-weight: 600;
}
.pk-trip-detail-cta a:hover { text-decoration: underline; }

/* === 71. Courier trips on home (Phase 18) ============================= */
.pk-trips-home-title {
    display: flex;
    align-items: center;
}
.pk-trips-home-all {
    margin-left: auto;
    font-size: 12px;
    font-weight: 600;
    color: var(--pk-primary-600);
    text-decoration: none;
    text-transform: none;
    letter-spacing: 0;
}
.pk-trips-home-all:hover { text-decoration: underline; }
.pk-trip-stack-home { margin-bottom: 4px; }

/* === 72. Trip favorites (Phase 19) ==================================== */
/* ♥-кнопка в trip-card-строке + крупная кнопка на trip detail. */

/* Маленькая ♥ рядом с trip-card (в `.pk-trip-row` flex-строке). */
.pk-trip-fav {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}
.pk-trip-fav .fav-btn {
    width: 40px;
    height: 40px;
}

/* Крупная fav-кнопка на trip detail — full-width pill с иконкой+текстом. */
.pk-trip-fav-bar {
    padding: 0 var(--pk-s-4);
    margin-top: 4px;
}
.pk-trip-fav-btn {
    /* ВАЖНО: эта кнопка несёт и класс `.fav-btn` (для JS-хука AJAX-toggle),
       который задаёт width:36px;height:36px (icon-only вариант из карточек).
       Без явного width здесь кнопка схлопывалась до 36px и обрезала
       подпись «В избранное» → «избр». Принудительно делаем full-width pill. */
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 44px;
    padding: 0 16px;
    background: var(--pk-bg-elevated, #fff);
    border: 1px solid var(--pk-border);
    border-radius: 14px;
    color: var(--pk-text);
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all var(--pk-t-fast, .15s ease);
}
.pk-trip-fav-btn .icon { color: var(--pk-gray-400); font-size: 18px; }
.pk-trip-fav-btn .fav-label { line-height: 1; }
.pk-trip-fav-btn:hover {
    border-color: var(--pk-danger-400, #f87171);
    background: var(--pk-danger-50, #fef2f2);
}
.pk-trip-fav-btn.is-favorite {
    border-color: var(--pk-danger-400, #f87171);
    background: var(--pk-danger-50, #fef2f2);
    color: var(--pk-danger-600, #dc2626);
}
.pk-trip-fav-btn.is-favorite .icon { color: var(--pk-danger-500, #ef4444); }
:root[data-theme="dark"] .pk-trip-fav-btn.is-favorite {
    background: rgba(239, 68, 68, .14);
    color: #fca5a5;
}

/* === 73. Trip parcel-offer (Phase 21) ================================= */
/* «Предложить посылку курьеру» — кнопка + picker-диалог на trip detail. */
.pk-trip-actions {
    padding: 0 var(--pk-s-4);
    margin-top: 4px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.pk-trip-offer-btn {
    background: var(--pk-grad-primary, linear-gradient(135deg, #6366f1, #8b5cf6)) !important;
    color: #fff !important;
    border: none !important;
    font-weight: 700 !important;
    box-shadow: 0 8px 18px -8px rgba(99, 102, 241, .5);
}

/* Picker-диалог: список радио-посылок. */
.pk-offer-hint {
    margin: 0 0 12px;
    font-size: 13px;
    color: var(--pk-text-muted);
    line-height: 1.45;
}
.pk-offer-parcels {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 14px;
    max-height: 320px;
    overflow-y: auto;
}
.pk-offer-parcel {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 12px;
    border: 1px solid var(--pk-border);
    border-radius: 12px;
    cursor: pointer;
    transition: border-color var(--pk-t-fast, .15s ease),
                background var(--pk-t-fast);
}
.pk-offer-parcel:hover {
    border-color: var(--pk-primary-400);
    background: var(--pk-primary-50);
}
:root[data-theme="dark"] .pk-offer-parcel:hover {
    background: rgba(99, 102, 241, .08);
}
.pk-offer-parcel input[type="radio"] {
    flex-shrink: 0;
    accent-color: var(--pk-primary-500);
    width: 18px; height: 18px;
}
.pk-offer-parcel.is-offered {
    opacity: .55;
    cursor: default;
}
.pk-offer-parcel.is-offered:hover {
    border-color: var(--pk-border);
    background: transparent;
}
.pk-offer-parcel-body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.pk-offer-parcel-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--pk-text-strong);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pk-offer-parcel-route {
    font-size: 12px;
    color: var(--pk-text-muted);
}
.pk-offer-parcel-exact,
.pk-offer-parcel-done {
    flex-shrink: 0;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: 3px 7px;
    border-radius: 999px;
}
.pk-offer-parcel-exact {
    background: var(--pk-success-50, #ecfdf5);
    color: var(--pk-success-700, #047857);
}
.pk-offer-parcel-done {
    background: var(--pk-gray-100, #f1f5f9);
    color: var(--pk-text-muted);
}

/* === 74. Personalized home matches (Phase 22) ========================= */
/* Секции «Посылки для ваших поездок» / «Курьеры для ваших посылок» —
   персональный dashboard для return-юзеров. */
.pk-match-title {
    display: flex;
    align-items: center;
    gap: 6px;
}
.pk-match-title .icon {
    color: var(--pk-primary-600);
}
.pk-match-stack {
    margin: 0 var(--pk-s-4) 8px;
}

/* === 75. Referral / invite (Phase 23) ================================= */
/* Invite-friends карточка на /profile/ + referral-chip + feed-icon. */
.pk-invite-card {
    margin: 12px var(--pk-s-4) 16px;
    padding: 16px 18px;
    background: linear-gradient(135deg,
        rgba(245, 158, 11, .12) 0%,
        rgba(99, 102, 241, .10) 100%);
    border: 1px solid var(--pk-primary-200, rgba(99, 102, 241, .22));
    border-radius: 16px;
}
:root[data-theme="dark"] .pk-invite-card {
    background: linear-gradient(135deg,
        rgba(245, 158, 11, .14) 0%,
        rgba(99, 102, 241, .12) 100%);
    border-color: rgba(129, 140, 248, .22);
}
.pk-invite-head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 12px;
}
.pk-invite-icon {
    flex-shrink: 0;
    width: 40px; height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: linear-gradient(135deg, #f59e0b, #f97316);
    color: #fff;
    box-shadow: 0 4px 12px -4px rgba(245, 158, 11, .5);
}
.pk-invite-icon .icon { font-size: 21px; }
.pk-invite-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--pk-text-strong);
}
.pk-invite-sub {
    font-size: 12.5px;
    color: var(--pk-text-muted);
    line-height: 1.4;
    margin-top: 2px;
}
.pk-invite-count {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 10px;
    padding: 4px 10px;
    background: var(--pk-bg-elevated, #fff);
    border: 1px solid var(--pk-border);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    color: var(--pk-primary-700);
}
:root[data-theme="dark"] .pk-invite-count {
    color: var(--pk-primary-300);
}
.pk-invite-link-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.pk-invite-link-input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 9px 12px;
    font-size: 12.5px;
    background: var(--pk-bg-elevated, #fff);
    border: 1px solid var(--pk-border);
    border-radius: 10px;
    color: var(--pk-text-muted);
    cursor: pointer;  /* tap to select-all (onclick) */
}

/* Action-row под referral-input: [Copy] [Share] равной ширины. */
.pk-invite-actions {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}
.pk-invite-actions .pk-invite-action-btn {
    flex: 1 1 0;
    min-width: 0;
    justify-content: center;
    white-space: nowrap;
}

/* Copy-button — визуально как share-btn (консистентность). База для всех
   контекстов; .is-copied = success-состояние после копирования. */
.pk-copy-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 1px solid var(--pk-border);
    background: var(--pk-bg-elevated);
    color: var(--pk-text-strong);
    border-radius: var(--pk-r-pill);
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--pk-t-fast), border-color var(--pk-t-fast),
                color var(--pk-t-fast);
}
.pk-copy-btn:hover {
    background: var(--pk-primary-50);
    border-color: var(--pk-primary-300);
}
:root[data-theme="dark"] .pk-copy-btn:hover {
    background: rgba(99, 102, 241, .14);
    border-color: rgba(99, 102, 241, .35);
}
.pk-copy-btn .icon { font-size: 18px; }
.pk-copy-btn--icon {
    width: 38px;
    height: 38px;
    padding: 0;
    border-radius: 50%;
}
.pk-copy-btn--icon .pk-copy-btn-text { display: none; }

/* Success-состояние: зелёная подсветка + галочка вместо иконки копирования. */
.pk-copy-btn.is-copied {
    background: var(--pk-success-50, #ecfdf5);
    border-color: var(--pk-success-300, #6ee7b7);
    color: var(--pk-success-700, #047857);
}
:root[data-theme="dark"] .pk-copy-btn.is-copied {
    background: rgba(16, 185, 129, .16);
    border-color: rgba(16, 185, 129, .4);
    color: #6ee7b7;
}

/* Referral-chip на публичном профиле. */
.pk-referral-chip {
    color: #b45309 !important;
}
:root[data-theme="dark"] .pk-referral-chip {
    color: #fbbf24 !important;
}
.pk-referral-chip .icon { color: #f59e0b; }

/* Feed-icon для referral_joined. */
.pk-feed-item--referral_joined .pk-feed-icon {
    background: rgba(245, 158, 11, .14);
    color: #b45309;
}
:root[data-theme="dark"] .pk-feed-item--referral_joined .pk-feed-icon {
    background: rgba(245, 158, 11, .20);
    color: #fbbf24;
}

/* === 76. Favorites everywhere (Phase 23 hotfix) ======================= */
/* ♥-кнопка на mini-карточках (recently-viewed, similar) + на pk-mine-card
   чужого профиля. Маленький вариант `.fav-btn-sm`. */

/* Wrapper для mini-card — relative-якорь для absolute ♥. */
.pk-recent-card-wrap {
    position: relative;
    flex: 0 0 auto;
    width: 180px;
}
/* `.pk-recent-card` (<a>) раньше был flex-item у `.pk-recent-scroll` —
   и потому block-level. После оборачивания в `.pk-recent-card-wrap`
   он стал обычным inline-<a> → width/padding/block-дети ломались.
   Возвращаем block-контекст явно. */
.pk-recent-card-wrap .pk-recent-card {
    display: block;
    width: 100%;
    box-sizing: border-box;
}
.pk-recent-card-fav {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 2;
}

/* ♥ на pk-mine-card (parcels чужого профиля). */
.pk-mine-card-fav {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
}

/* Маленький вариант fav-btn — для mini-карточек. */
.fav-btn-sm {
    width: 30px;
    height: 30px;
    padding: 5px;
}
.fav-btn-sm .icon {
    font-size: 16px;
}

/* На home «New parcels» стопка карточек должна иметь горизонтальные
   отступы (раньше их давал родительский `.block`). */
.pk-home-stack {
    margin-left: var(--pk-s-4);
    margin-right: var(--pk-s-4);
}

/* === 77. Notification preferences (Phase 27) ========================== */
/* /profile/notifications/ — per-kind × in-app/email toggle grid.
   Mobile-first: каждая строка stacks vertically. На desktop (≥720px) —
   real 3-column grid (event | in-app | email). */

.pk-notif-intro {
    color: var(--pk-text-muted);
    font-size: 14px;
    line-height: 1.55;
    margin: 0 0 var(--pk-s-4);
}

.pk-notif-form {
    margin: 0;
}

.pk-notif-grid {
    display: flex;
    flex-direction: column;
    gap: var(--pk-s-3);
    background: var(--pk-card-bg);
    border: 1px solid var(--pk-border);
    border-radius: var(--pk-radius-card, 16px);
    padding: var(--pk-s-3);
}

.pk-notif-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--pk-s-2);
    padding: var(--pk-s-3);
    border-radius: 12px;
    background: var(--pk-card-elevated-bg, var(--pk-card-bg));
    border: 1px solid var(--pk-border-soft, var(--pk-border));
}

/* Header-row на mobile прячем — на mobile каждый toggle подписан inline. */
.pk-notif-row-head {
    display: none;
}

.pk-notif-cell-name {
    min-width: 0;
}

.pk-notif-kind-label {
    font-weight: 600;
    color: var(--pk-text);
    line-height: 1.3;
    margin-bottom: 2px;
}

.pk-notif-kind-help {
    font-size: 13px;
    color: var(--pk-text-muted);
    line-height: 1.4;
}

.pk-notif-cell-channel {
    display: flex;
    align-items: center;
}

/* Toggle — простой checkbox + label с custom-slider'ом. */
.pk-notif-toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--pk-s-2);
    cursor: pointer;
    user-select: none;
    color: var(--pk-text);
    font-size: 14px;
}

.pk-notif-toggle input {
    /* Скрываем native — но оставляем focusable для accessibility. */
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

.pk-notif-toggle-slider {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 26px;
    border-radius: 999px;
    background: var(--pk-border);
    transition: background 0.18s ease;
    flex: 0 0 auto;
}

.pk-notif-toggle-slider::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
    transition: transform 0.18s ease;
}

.pk-notif-toggle input:checked ~ .pk-notif-toggle-slider {
    background: var(--pk-primary, #4f46e5);
}

.pk-notif-toggle input:checked ~ .pk-notif-toggle-slider::after {
    transform: translateX(18px);
}

.pk-notif-toggle input:focus-visible ~ .pk-notif-toggle-slider {
    outline: 2px solid var(--pk-primary, #4f46e5);
    outline-offset: 2px;
}

.pk-notif-toggle-label {
    font-weight: 500;
}

.pk-notif-actions {
    margin-top: var(--pk-s-5);
}

.pk-notif-save {
    display: inline-flex;
    align-items: center;
    gap: var(--pk-s-2);
    width: auto !important;
    min-width: 240px;
}

.pk-notif-save .icon {
    font-size: 22px;
}

.pk-notif-footnote {
    margin-top: var(--pk-s-3);
    color: var(--pk-text-muted);
    font-size: 12px;
    line-height: 1.5;
}

/* Desktop layout — real 3-column grid + sticky header. */
@media (min-width: 720px) {
    .pk-notif-row {
        grid-template-columns: 1fr 130px 130px;
        align-items: center;
        gap: var(--pk-s-4);
    }
    .pk-notif-row-head {
        display: grid;
        padding-top: var(--pk-s-2);
        padding-bottom: var(--pk-s-2);
        background: transparent;
        border: 0;
        font-weight: 600;
        font-size: 12px;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        color: var(--pk-text-muted);
    }
    /* На desktop в обычной строке каждый toggle показывает только slider
       (без дублирующего «In-app»/«Email» текста — он уже в header'е). */
    .pk-notif-row:not(.pk-notif-row-head) .pk-notif-toggle-label {
        display: none;
    }
}

[data-theme="dark"] .pk-notif-toggle-slider {
    background: rgba(255, 255, 255, 0.18);
}

[data-theme="dark"] .pk-notif-toggle input:checked ~ .pk-notif-toggle-slider {
    background: var(--pk-primary, #818cf8);
}

/* === 78. Notification feed UX (Phase 29) ============================== */
/* Date-bucket headers + kind filter chips на /notifications/feed/. */

/* Контейнер для head-actions (Settings + Mark all read). */
.pk-feed-head-actions {
    display: flex;
    gap: var(--pk-s-2);
    align-items: center;
    flex-wrap: wrap;
}

/* Filter chips. Reuse тех же variables что и `.pk-urgency-filter`,
   но визуально немного отличаются (icon-aware, scrolls on mobile). */
.pk-feed-filters {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--pk-s-2);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    padding: var(--pk-s-2) 0;
    margin-top: var(--pk-s-2);
}
.pk-feed-filters::-webkit-scrollbar {
    height: 4px;
}
.pk-feed-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid var(--pk-border);
    background: var(--pk-card-bg);
    color: var(--pk-text-muted);
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    flex: 0 0 auto;
}
.pk-feed-chip:hover {
    border-color: var(--pk-primary, #4f46e5);
    color: var(--pk-text);
}
.pk-feed-chip .icon {
    font-size: 14px;
}
.pk-feed-chip.is-active {
    background: var(--pk-primary, #4f46e5);
    border-color: var(--pk-primary, #4f46e5);
    color: #fff;
}
.pk-feed-chip.is-active:hover {
    color: #fff;
}

/* Date-bucket headers. */
.pk-feed-bucket-head {
    display: flex;
    align-items: center;
    gap: var(--pk-s-2);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--pk-text-muted);
    margin: var(--pk-s-4) 0 var(--pk-s-2);
    padding: 0 var(--pk-s-2);
}
.pk-feed-bucket-head:first-child {
    margin-top: var(--pk-s-2);
}
.pk-feed-bucket-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 18px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--pk-border);
    color: var(--pk-text-muted);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
}

/* Bucket "today" — accent (свежие, юзер должен заметить). */
.pk-feed-bucket-head[data-bucket="today"] {
    color: var(--pk-primary, #4f46e5);
}
.pk-feed-bucket-head[data-bucket="today"] .pk-feed-bucket-count {
    background: rgba(79, 70, 229, 0.15);
    color: var(--pk-primary, #4f46e5);
}

[data-theme="dark"] .pk-feed-chip.is-active {
    background: var(--pk-primary, #818cf8);
    border-color: var(--pk-primary, #818cf8);
    color: #0f172a;
}
[data-theme="dark"] .pk-feed-bucket-head[data-bucket="today"] {
    color: #a5b4fc;
}
[data-theme="dark"] .pk-feed-bucket-head[data-bucket="today"] .pk-feed-bucket-count {
    background: rgba(165, 180, 252, 0.18);
    color: #a5b4fc;
}

/* === 79. Getting-started onboarding card (Phase 34) =================== */
/* Чек-лист first-actions для новых юзеров на home. Gradient-карточка с
   progress-баром и кликабельными шагами (done = зачёркнут + галочка). */

.pk-onboarding-card {
    position: relative;
    border-radius: 18px;
    padding: 18px 16px 14px;
    background: linear-gradient(135deg,
        var(--pk-primary-50, #eef2ff), var(--pk-card-bg, #fff));
    border: 1px solid var(--pk-primary-100, #e0e7ff);
    overflow: hidden;
}
[data-theme="dark"] .pk-onboarding-card {
    background: linear-gradient(135deg, rgba(99,102,241,.14), rgba(255,255,255,.02));
    border-color: rgba(99,102,241,.28);
}

.pk-onboarding-dismiss {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: var(--pk-text-muted);
    cursor: pointer;
    border-radius: 50%;
    transition: background var(--pk-t-fast), color var(--pk-t-fast);
}
.pk-onboarding-dismiss:hover {
    background: rgba(0,0,0,.06);
    color: var(--pk-text);
}
[data-theme="dark"] .pk-onboarding-dismiss:hover {
    background: rgba(255,255,255,.08);
}
.pk-onboarding-dismiss .icon { font-size: 17px; }

.pk-onboarding-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding-right: 28px;  /* место под dismiss-крестик */
}
.pk-onboarding-title {
    font-size: 17px;
    font-weight: 750;
    letter-spacing: -0.01em;
    color: var(--pk-text-strong, #111827);
}
.pk-onboarding-progress {
    font-size: 13px;
    font-weight: 700;
    color: var(--pk-primary-600, #4f46e5);
    flex: 0 0 auto;
}
[data-theme="dark"] .pk-onboarding-progress { color: #a5b4fc; }

.pk-onboarding-sub {
    margin: 4px 0 12px;
    font-size: 13px;
    color: var(--pk-text-muted);
    line-height: 1.45;
}

.pk-onboarding-bar {
    height: 6px;
    border-radius: 999px;
    background: var(--pk-border, rgba(0,0,0,.1));
    overflow: hidden;
    margin-bottom: 14px;
}
.pk-onboarding-bar-fill {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #6366f1, #8b5cf6);
    transition: width 0.4s ease;
}

.pk-onboarding-steps {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.pk-onboarding-step {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 12px;
    background: var(--pk-card-bg, #fff);
    border: 1px solid var(--pk-border-soft, var(--pk-border));
    text-decoration: none;
    color: inherit;
    transition: transform var(--pk-t-fast), box-shadow var(--pk-t-fast),
                border-color var(--pk-t-fast);
}
.pk-onboarding-step:not(.is-done):hover {
    transform: translateY(-1px);
    border-color: var(--pk-primary-300, #a5b4fc);
    box-shadow: 0 6px 16px -10px rgba(99,102,241,.5);
}
[data-theme="dark"] .pk-onboarding-step {
    background: rgba(255,255,255,.03);
}

.pk-onboarding-step-check {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--pk-primary-50, #eef2ff);
    color: var(--pk-primary-600, #4f46e5);
}
.pk-onboarding-step-check .icon { font-size: 17px; }
[data-theme="dark"] .pk-onboarding-step-check {
    background: rgba(99,102,241,.18);
    color: #a5b4fc;
}

.pk-onboarding-step.is-done .pk-onboarding-step-check {
    background: var(--pk-success-50, #ecfdf5);
    color: var(--pk-success-600, #059669);
}
[data-theme="dark"] .pk-onboarding-step.is-done .pk-onboarding-step-check {
    background: rgba(16,185,129,.18);
    color: #6ee7b7;
}

.pk-onboarding-step-body {
    flex: 1 1 auto;
    min-width: 0;
}
.pk-onboarding-step-label {
    display: block;
    font-weight: 600;
    font-size: 14px;
    color: var(--pk-text, #1f2937);
    line-height: 1.3;
}
.pk-onboarding-step-desc {
    display: block;
    font-size: 12px;
    color: var(--pk-text-muted);
    line-height: 1.35;
    margin-top: 1px;
}
.pk-onboarding-step.is-done .pk-onboarding-step-label {
    color: var(--pk-text-muted);
    text-decoration: line-through;
    text-decoration-color: var(--pk-border);
}
.pk-onboarding-step.is-done .pk-onboarding-step-desc { display: none; }

.pk-onboarding-step-chevron {
    flex: 0 0 auto;
    font-size: 16px;
    color: var(--pk-text-muted);
}

/* === 80. Profile section headers (Phase 36 — trips on /u/<nick>/) ===== */
/* Лёгкие подзаголовки внутри вкладки «Поездки»: «Активные · N» / «Архив · N».
   Плоско, без вложенных табов — просто две подписанные секции. */
.pk-user-section-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: var(--pk-s-3) var(--pk-s-4) var(--pk-s-2);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--pk-text-muted);
}
.pk-user-section-head:first-child { margin-top: 0; }
.pk-user-section-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 18px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--pk-surface-soft, rgba(0,0,0,.05));
    color: var(--pk-text-muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0;
}

/* === 81. Classic pagination (Phase 40 — personal pages) ============== */
/* Серверная пагинация (prev / page N of M / next) на личных страницах,
   где AJAX-load-more избыточен. Гарантирует, что страница не грузит
   тысячи записей разом. */
.pk-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin: var(--pk-s-4);
    flex-wrap: wrap;
}
.pk-pagination-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 8px 16px;
    border-radius: 12px;
    border: 1px solid var(--pk-border);
    background: var(--pk-card-bg, #fff);
    color: var(--pk-text);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: background var(--pk-t-fast), border-color var(--pk-t-fast);
}
.pk-pagination-btn:hover {
    border-color: var(--pk-primary-300, #a5b4fc);
    background: var(--pk-primary-50, #eef2ff);
}
[data-theme="dark"] .pk-pagination-btn:hover {
    background: rgba(99, 102, 241, .14);
}
.pk-pagination-info {
    font-size: 13px;
    color: var(--pk-text-muted);
    font-weight: 500;
}

/* === 82. Home blocks polish (Phase 42) =============================== */
/* Делаем блоки главной «посимпатичнее»: gradient-иконки категорий,
   живее hover, акценты на заголовках секций и stat-числах. */

/* --- Category cards: gradient icon-tiles + lift --- */
.cat-card {
    border-radius: 16px;
}
.cat-card .icon {
    width: 46px; height: 46px;
    border-radius: 14px;
    background: var(--pk-grad-primary, linear-gradient(135deg, #6366f1, #8b5cf6));
    color: #fff;
    box-shadow: 0 6px 14px -6px rgba(99, 102, 241, .55);
}
.cat-card:hover {
    transform: translateY(-3px);
    border-color: var(--pk-primary-300, #a5b4fc);
    box-shadow: 0 12px 26px -14px rgba(99, 102, 241, .5);
    color: var(--pk-text-strong);
}
.cat-card:hover .icon {
    background: var(--pk-grad-primary, linear-gradient(135deg, #6366f1, #8b5cf6));
    transform: scale(1.1) rotate(-4deg);
}
.cat-card span { font-weight: 600; }

/* --- Stat tiles: gradient numbers + soft tint --- */
.pk-stat-value {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
:root[data-theme="dark"] .pk-stat-value {
    background: linear-gradient(135deg, #a5b4fc, #c4b5fd);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* --- Section titles: маленькая акцент-полоска слева --- */
.block-title.pk-match-title,
.block-title.pk-trending-title,
.block-title.pk-trips-home-title,
.block-title.pk-activity-title,
.block-title.pk-recent-title {
    display: flex;
    align-items: center;
    gap: 8px;
}
.block-title.pk-match-title .icon,
.block-title.pk-trending-title .icon,
.block-title.pk-trips-home-title .icon,
.block-title.pk-activity-title .icon,
.block-title.pk-recent-title .icon {
    color: var(--pk-primary-500, #6366f1);
}
.block-title.pk-trending-title .icon,
.block-title.pk-activity-title .icon {
    color: #f97316;  /* «горячее» — оранжевый flame */
}

/* --- Match-my-city card: gradient icon + glow --- */
.pk-mycity-icon {
    background: var(--pk-grad-primary, linear-gradient(135deg, #6366f1, #8b5cf6)) !important;
    color: #fff !important;
    box-shadow: 0 6px 14px -6px rgba(99, 102, 241, .55);
}
.pk-mycity-card {
    transition: transform var(--pk-t-fast), border-color var(--pk-t-fast),
                box-shadow var(--pk-t-fast);
}
.pk-mycity-card:hover {
    transform: translateY(-2px);
    border-color: var(--pk-primary-300, #a5b4fc);
    box-shadow: 0 12px 26px -14px rgba(99, 102, 241, .45);
}

/* --- Trending cards: warm «hot» accent on hover --- */
.pk-trending-card {
    transition: transform var(--pk-t-fast), border-color var(--pk-t-fast),
                box-shadow var(--pk-t-fast);
}
.pk-trending-card:hover {
    transform: translateY(-3px);
    border-color: rgba(249, 115, 22, .45);
    box-shadow: 0 12px 26px -14px rgba(249, 115, 22, .4);
}
.pk-trending-count {
    color: #ea580c;
    font-weight: 700;
}
:root[data-theme="dark"] .pk-trending-count { color: #fdba74; }

/* === 83. Type badge on detail pages (Phase 43) ====================== */
/* «Посылка» / «Поездка» сверху детальной — посылки и поездки похожи по
   виду, бейдж сразу говорит что это. Цветовой код: посылка indigo,
   поездка cyan (как точки на вкладках профиля). */
.pk-type-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    margin-bottom: 10px;
}
.pk-type-badge .icon { font-size: 14px; }
.pk-type-badge-parcel {
    background: var(--pk-primary-50, #eef2ff);
    color: var(--pk-primary-700, #4338ca);
}
.pk-type-badge-trip {
    background: rgba(14, 165, 233, .12);
    color: #0369a1;
}
:root[data-theme="dark"] .pk-type-badge-parcel {
    background: rgba(99, 102, 241, .2);
    color: #a5b4fc;
}
:root[data-theme="dark"] .pk-type-badge-trip {
    background: rgba(14, 165, 233, .2);
    color: #7dd3fc;
}

/* === 84. Trip categories — picker + chips (Phase 43) ================= */
/* Чекбокс-чипы выбора категорий в форме поездки (что курьер готов везти). */
.pk-cat-checks {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.pk-cat-check { cursor: pointer; }
.pk-cat-check input {
    position: absolute;
    opacity: 0;
    width: 1px; height: 1px;
}
.pk-cat-check-box {
    display: inline-flex;
    align-items: center;
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid var(--pk-border);
    background: var(--pk-bg-elevated, #fff);
    color: var(--pk-text);
    font-size: 13px;
    font-weight: 500;
    transition: background var(--pk-t-fast), border-color var(--pk-t-fast),
                color var(--pk-t-fast);
}
.pk-cat-check input:checked + .pk-cat-check-box {
    background: var(--pk-grad-primary, linear-gradient(135deg, #6366f1, #8b5cf6));
    border-color: transparent;
    color: #fff;
    font-weight: 600;
}
.pk-cat-check input:focus-visible + .pk-cat-check-box {
    outline: 2px solid var(--pk-primary-400, #818cf8);
    outline-offset: 2px;
}

/* Category-chips на детальной поездки. */
.pk-trip-hero-cats {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
}
.pk-trip-hero-cats-label {
    font-size: 12px;
    color: var(--pk-text-muted);
    margin-right: 2px;
}
.pk-trip-cat-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--pk-primary-50, #eef2ff);
    color: var(--pk-primary-700, #4338ca);
    font-size: 12px;
    font-weight: 600;
}
.pk-trip-cat-chip .icon { font-size: 13px; }
:root[data-theme="dark"] .pk-trip-cat-chip {
    background: rgba(99, 102, 241, .18);
    color: #a5b4fc;
}

/* =========================================================================
   §85  MULTI-SELECT CATEGORY CHIPS (parcels + trips list)
   Категории-чипы стали multi-select: каждый можно включить/выключить.
   Активный чип переиспользует `.pk-toolbar-btn.is-active`; добавляем лишь
   маленькую галочку-индикатор, чтобы было видно «выбрано несколько».
   ========================================================================= */
.pk-cat-toolbar-check {
    font-size: 14px !important;
    margin-left: 3px;
    opacity: .9;
}
.pk-cat-toolbar-btn.is-active { font-weight: 650; }

/* =========================================================================
   §86  TRIP-CARD CATEGORY CHIPS (Phase 46)
   Что курьер готов везти — компактные пилюли на карточке поездки (списки,
   профиль, matching-секции). До 3 + «+N». Приглушённые, не перетягивают
   внимание с маршрута/даты.
   ========================================================================= */
.pk-trip-card-cats {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 6px;
}
.pk-trip-card-cat {
    display: inline-flex;
    align-items: center;
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--pk-primary-50, #eef2ff);
    color: var(--pk-primary-700, #4338ca);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.6;
    white-space: nowrap;
}
.pk-trip-card-cat-more {
    background: var(--pk-surface-2, #f1f5f9);
    color: var(--pk-text-muted, #64748b);
}
:root[data-theme="dark"] .pk-trip-card-cat {
    background: rgba(99, 102, 241, .18);
    color: #a5b4fc;
}
:root[data-theme="dark"] .pk-trip-card-cat-more {
    background: rgba(148, 163, 184, .15);
    color: #94a3b8;
}

/* =========================================================================
   §87  CHAT DEAL PANEL (Phase 48)
   Маршрут/награда + подтверждение доставки прямо в чат-комнате — закрываем
   сделку там, где договариваются, без ухода на детальную посылки.
   ========================================================================= */
.pk-chat-deal {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0 0 10px;
    padding: 10px 14px;
    border-radius: 14px;
    background: var(--pk-surface-2, #f1f5f9);
    border: 1px solid var(--pk-border, #e2e8f0);
}
.pk-chat-deal-route {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--pk-text, #0f172a);
}
.pk-chat-deal-route .icon { font-size: 15px; color: var(--pk-primary-600, #4f46e5); }
.pk-chat-deal-reward {
    margin-left: auto;
    padding: 2px 10px;
    border-radius: 999px;
    background: var(--pk-warning-50, #fffbeb);
    color: var(--pk-warning-700, #b45309);
    font-size: 12.5px;
    font-weight: 700;
    border: 1px solid var(--pk-warning-200, #fde68a);
}
.pk-chat-deal-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
}
.pk-chat-deal-status .icon { font-size: 16px; }
.pk-chat-deal-status.is-done { color: var(--pk-success-700, #15803d); }
.pk-chat-deal-status.is-waiting { color: var(--pk-text-muted, #64748b); }
.pk-chat-deal-hint {
    font-size: 12.5px;
    color: var(--pk-success-700, #15803d);
    font-weight: 600;
}
.pk-chat-deal-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    width: 100%;
}
:root[data-theme="dark"] .pk-chat-deal {
    background: rgba(148, 163, 184, .10);
    border-color: rgba(148, 163, 184, .18);
}
:root[data-theme="dark"] .pk-chat-deal-reward {
    background: rgba(245, 158, 11, .15);
    color: #fcd34d;
    border-color: rgba(245, 158, 11, .3);
}

/* =========================================================================
   §88  IN-PAGE SCROLL HIGHLIGHT (Phase 49)
   `.pk-flash` — короткая подсветка поля/секции, к которому проскроллили
   (кнопки заполнения профиля «Добавить аватар» и т.п.). Помогает глазу
   сразу найти нужное поле после прокрутки.
   ========================================================================= */
@keyframes pk-flash-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0); }
    20%  { box-shadow: 0 0 0 3px rgba(99, 102, 241, .35); }
    100% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0); }
}
.pk-flash {
    animation: pk-flash-pulse 1.6s ease-out;
    border-radius: 12px;
}
@media (prefers-reduced-motion: reduce) {
    .pk-flash { animation: none; }
}

/* =========================================================================
   §89  ROUND TRIP (Phase 51)
   - .pk-roundtrip          : секция «вернусь обратно» в форме создания
   - .pk-trip-paired        : карточка-ссылка на парную поездку на детальной
   ========================================================================= */
.pk-roundtrip-toggle {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 0;
    cursor: pointer;
}
.pk-roundtrip-toggle input[type="checkbox"] {
    width: 20px; height: 20px; margin-top: 2px; flex-shrink: 0;
    accent-color: var(--pk-primary-600, #4f46e5);
}
.pk-roundtrip-toggle span { display: block; line-height: 1.45; }
.pk-roundtrip-body {
    margin-top: 12px;
    padding: 14px;
    border-radius: 12px;
    background: var(--pk-primary-50, #eef2ff);
    border: 1px dashed var(--pk-primary-200, #c7d2fe);
    display: flex; flex-direction: column; gap: 12px;
}
/* HTML [hidden] ≡ display:none, но `.pk-roundtrip-body { display:flex }`   */
/* перебивает его по специфичности → тело показывалось всегда. Селектор    */
/* `[hidden]` поднимает специфичность и гарантирует скрытие до клика.      */
.pk-roundtrip-body[hidden] { display: none; }
:root[data-theme="dark"] .pk-roundtrip-body {
    background: rgba(99, 102, 241, .10);
    border-color: rgba(99, 102, 241, .30);
}

.pk-trip-paired {
    display: block;
    margin: 0 var(--pk-s-4) 14px;
    padding: 12px 14px;
    border-radius: 14px;
    background: linear-gradient(135deg,
        var(--pk-primary-50, #eef2ff),
        var(--pk-info-50, #ecfeff));
    border: 1px solid var(--pk-primary-200, #c7d2fe);
    color: var(--pk-text, #0f172a);
    text-decoration: none;
    transition: transform .15s ease, box-shadow .15s ease;
}
.pk-trip-paired:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(99, 102, 241, .18);
}
.pk-trip-paired-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 700;
    color: var(--pk-primary-700, #4338ca);
    text-transform: uppercase;
    letter-spacing: .03em;
}
.pk-trip-paired-badge .icon { font-size: 14px; }
.pk-trip-paired-route {
    display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
    margin-top: 6px;
    font-size: 14.5px; font-weight: 600;
}
.pk-trip-paired-route .icon { font-size: 14px; color: var(--pk-primary-600, #4f46e5); }
.pk-trip-paired-date {
    margin-left: auto;
    padding: 2px 10px;
    border-radius: 999px;
    background: var(--pk-surface, #fff);
    color: var(--pk-primary-700, #4338ca);
    font-size: 12.5px; font-weight: 700;
    border: 1px solid var(--pk-primary-200, #c7d2fe);
}
.pk-trip-paired-hint {
    margin-top: 6px;
    font-size: 12.5px;
    color: var(--pk-text-muted, #64748b);
    line-height: 1.4;
}
:root[data-theme="dark"] .pk-trip-paired {
    background: linear-gradient(135deg,
        rgba(99, 102, 241, .14),
        rgba(6, 182, 212, .10));
    border-color: rgba(99, 102, 241, .30);
}
:root[data-theme="dark"] .pk-trip-paired-badge { color: #a5b4fc; }
:root[data-theme="dark"] .pk-trip-paired-date {
    background: rgba(15, 23, 42, .60); color: #a5b4fc;
    border-color: rgba(99, 102, 241, .35);
}

/* =========================================================================
   §90  RECENT-CITIES CHIPS (Phase 52)
   1-клик заполнение автокомплита недавно использованным городом — над
   полем «Откуда»/«Куда» в формах создания посылки и поездки.
   ========================================================================= */
.pk-recent-cities {
    display: flex; flex-wrap: wrap; align-items: center;
    gap: 6px;
    margin: 0 0 8px;
    font-size: 12.5px;
}
.pk-recent-cities-label {
    color: var(--pk-text-muted, #64748b);
    font-weight: 600;
    margin-right: 2px;
}
.pk-recent-city-chip {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--pk-surface-2, #f1f5f9);
    color: var(--pk-text, #0f172a);
    border: 1px solid var(--pk-border, #e2e8f0);
    font: inherit; font-size: 12.5px; font-weight: 600;
    cursor: pointer;
    transition: background .15s, color .15s, transform .1s, border-color .15s;
}
.pk-recent-city-chip:hover {
    background: var(--pk-primary-50, #eef2ff);
    color: var(--pk-primary-700, #4338ca);
    border-color: var(--pk-primary-200, #c7d2fe);
    transform: translateY(-1px);
}
:root[data-theme="dark"] .pk-recent-city-chip {
    background: rgba(148, 163, 184, .12);
    color: #cbd5e1;
    border-color: rgba(148, 163, 184, .22);
}
:root[data-theme="dark"] .pk-recent-city-chip:hover {
    background: rgba(99, 102, 241, .20);
    color: #a5b4fc;
    border-color: rgba(99, 102, 241, .40);
}

/* =========================================================================
   §91  CREATE CHOOSER SHEET (Phase 53)
   Клик по «+» в bottom-bar показывает мини-окно с выбором: посылка или
   поездка. Стиль — нативная bottom-sheet с backdrop.
   ========================================================================= */
.pk-create-sheet[hidden] { display: none; }
.pk-create-sheet {
    position: fixed; inset: 0;
    z-index: 9000;
    display: flex; align-items: flex-end; justify-content: center;
}
.pk-create-sheet-backdrop {
    position: absolute; inset: 0;
    background: rgba(15, 23, 42, .55);
    animation: pk-fade-in .15s ease-out;
}
.pk-create-sheet-body {
    position: relative;
    width: 100%; max-width: 480px;
    background: var(--pk-bg-elevated, #fff);
    border-radius: 18px 18px 0 0;
    padding: 14px 14px calc(20px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -10px 30px -10px rgba(15, 23, 42, .35);
    animation: pk-slide-up .22s cubic-bezier(.2, .8, .2, 1);
}
.pk-create-sheet-title {
    text-align: center;
    font-size: 13.5px; font-weight: 600;
    color: var(--pk-text-muted, #64748b);
    margin: 4px 0 10px;
}
.pk-create-sheet-item {
    display: flex; align-items: center;
    gap: 14px;
    padding: 14px;
    border-radius: 14px;
    background: var(--pk-surface-2, #f1f5f9);
    text-decoration: none; color: var(--pk-text, #0f172a);
    margin-bottom: 8px;
    transition: background .15s, transform .1s;
}
.pk-create-sheet-item:hover,
.pk-create-sheet-item:focus-visible {
    background: var(--pk-primary-50, #eef2ff);
    outline: none;
}
.pk-create-sheet-item:active { transform: scale(.98); }
.pk-create-sheet-icon {
    width: 48px; height: 48px;
    border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.pk-create-sheet-icon .icon { font-size: 24px; }
.pk-create-sheet-icon-parcel {
    background: var(--pk-primary-100, #e0e7ff);
    color: var(--pk-primary-700, #4338ca);
}
.pk-create-sheet-icon-trip {
    background: #ccfbf1;
    color: #0f766e;
}
.pk-create-sheet-text { flex: 1; min-width: 0; }
.pk-create-sheet-text strong {
    display: block;
    font-size: 15px; font-weight: 700;
    color: var(--pk-text-strong, #0f172a);
    margin-bottom: 2px;
}
.pk-create-sheet-text span {
    display: block;
    font-size: 12.5px;
    color: var(--pk-text-muted, #64748b);
    line-height: 1.35;
}
.pk-create-sheet-chev {
    font-size: 18px;
    color: var(--pk-text-muted, #64748b);
    flex-shrink: 0;
}
.pk-create-sheet-cancel {
    display: block; width: 100%;
    margin-top: 6px; padding: 12px;
    background: transparent;
    border: 0;
    font: inherit; font-weight: 600;
    color: var(--pk-text-muted, #64748b);
    cursor: pointer;
    border-radius: 12px;
}
.pk-create-sheet-cancel:hover { background: var(--pk-surface-2, #f1f5f9); }

@keyframes pk-slide-up {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
}
@keyframes pk-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .pk-create-sheet-body,
    .pk-create-sheet-backdrop { animation: none; }
}

:root[data-theme="dark"] .pk-create-sheet-body {
    background: #1e293b;
}
:root[data-theme="dark"] .pk-create-sheet-item {
    background: rgba(148, 163, 184, .08);
}
:root[data-theme="dark"] .pk-create-sheet-item:hover,
:root[data-theme="dark"] .pk-create-sheet-item:focus-visible {
    background: rgba(99, 102, 241, .15);
}
:root[data-theme="dark"] .pk-create-sheet-icon-parcel {
    background: rgba(99, 102, 241, .25);
    color: #a5b4fc;
}
:root[data-theme="dark"] .pk-create-sheet-icon-trip {
    background: rgba(20, 184, 166, .25);
    color: #5eead4;
}
:root[data-theme="dark"] .pk-create-sheet-text strong { color: #f1f5f9; }
:root[data-theme="dark"] .pk-create-sheet-cancel:hover {
    background: rgba(148, 163, 184, .12);
}

/* «Looking for a courier? Browse trips» — alt-путь под категориями посылок. */
.pk-cat-trips-link {
    display: flex; align-items: center;
    gap: 8px;
    margin-top: 12px;
    padding: 10px 14px;
    border-radius: 12px;
    background: var(--pk-surface-2, #f1f5f9);
    color: var(--pk-text, #0f172a);
    text-decoration: none;
    font-size: 13.5px; font-weight: 600;
    transition: background .15s;
}
.pk-cat-trips-link:hover {
    background: var(--pk-success-50, #ecfdf5);
    color: var(--pk-success-700, #047857);
}
.pk-cat-trips-link .icon:first-child {
    font-size: 16px;
    color: #0d9488;
}
.pk-cat-trips-chev {
    margin-left: auto;
    font-size: 14px;
    color: var(--pk-text-muted, #64748b);
}
:root[data-theme="dark"] .pk-cat-trips-link {
    background: rgba(148, 163, 184, .10);
    color: #cbd5e1;
}
:root[data-theme="dark"] .pk-cat-trips-link:hover {
    background: rgba(20, 184, 166, .15);
    color: #5eead4;
}

/* =========================================================================
   §92  CLICKABLE ROUTE CITIES + "more on route" CTA (Phase 54)
   На детальных posylki/poezdki города в маршруте — ссылки на отфильтрованный
   список (?from_address=X / ?to_address=Y). Под маршрутом — CTA «Ещё на
   этом маршруте» с обоими параметрами. Экономит ручную настройку фильтра.
   ========================================================================= */
.pk-route-link {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px dashed transparent;
    transition: color .15s, border-color .15s, background .15s;
    padding: 1px 2px;
    border-radius: 4px;
}
.pk-route-link:hover {
    color: var(--pk-primary-700, #4338ca);
    border-bottom-color: var(--pk-primary-400, #818cf8);
    background: rgba(99, 102, 241, .06);
}
:root[data-theme="dark"] .pk-route-link:hover {
    color: #a5b4fc;
    border-bottom-color: #818cf8;
    background: rgba(99, 102, 241, .14);
}

.pk-route-more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    padding: 7px 13px;
    border-radius: 999px;
    background: rgba(99, 102, 241, .10);
    color: var(--pk-primary-700, #4338ca);
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none;
    border: 1px dashed var(--pk-primary-300, #a5b4fc);
    transition: background .15s, transform .1s;
}
/* Когда .pk-route-more внутри flex-column hero — gap уже даёт отступ, отменяем margin */
.pk-trip-hero > .pk-route-more,
.pk-parcel-hero > .pk-route-more { margin-top: 0; }
.pk-route-more:hover {
    background: var(--pk-primary-100, #e0e7ff);
    transform: translateX(2px);
}
.pk-route-more .icon { font-size: 15px; }
:root[data-theme="dark"] .pk-route-more {
    background: rgba(99, 102, 241, .14);
    color: #a5b4fc;
    border-color: rgba(99, 102, 241, .40);
}
:root[data-theme="dark"] .pk-route-more:hover {
    background: rgba(99, 102, 241, .24);
}

/* =========================================================================
   §96  SAVED-SEARCH KIND TABS + KIND BADGE (Phase 59)
   На /parcels/saved/ — chip-табы «All / Parcels / Trips» сверху списка +
   маленький badge на каждой карточке (parcel — indigo, trip — teal).
   ========================================================================= */
.pk-savsearch-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}
.pk-savsearch-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: 999px;
    background: var(--pk-surface-2, #f1f5f9);
    color: var(--pk-text);
    border: 1px solid var(--pk-border);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: background .15s, color .15s, border-color .15s;
}
.pk-savsearch-tab .icon { font-size: 14px; }
.pk-savsearch-tab:hover {
    background: var(--pk-primary-50, #eef2ff);
    color: var(--pk-primary-700, #4338ca);
    border-color: var(--pk-primary-200, #c7d2fe);
}
.pk-savsearch-tab.is-active {
    background: var(--pk-primary-100, #e0e7ff);
    color: var(--pk-primary-700, #4338ca);
    border-color: var(--pk-primary-400, #818cf8);
}
.pk-savsearch-tab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 18px;
    padding: 0 6px;
    border-radius: 9px;
    background: rgba(99, 102, 241, .14);
    color: var(--pk-primary-700, #4338ca);
    font-size: 11px;
    font-weight: 700;
}
.pk-savsearch-tab.is-active .pk-savsearch-tab-count {
    background: rgba(255, 255, 255, .35);
}
:root[data-theme="dark"] .pk-savsearch-tab {
    background: rgba(148, 163, 184, .12);
    color: #cbd5e1;
    border-color: rgba(148, 163, 184, .22);
}
:root[data-theme="dark"] .pk-savsearch-tab:hover {
    background: rgba(99, 102, 241, .20);
    color: #a5b4fc;
    border-color: rgba(99, 102, 241, .40);
}
:root[data-theme="dark"] .pk-savsearch-tab.is-active {
    background: rgba(99, 102, 241, .28);
    color: #c7d2fe;
    border-color: #818cf8;
}
:root[data-theme="dark"] .pk-savsearch-tab-count {
    background: rgba(99, 102, 241, .25);
    color: #c7d2fe;
}

/* Kind-icon variant: trip — teal (как pk-type-badge-trip), parcel — indigo. */
.pk-savedsearch-icon--trip {
    background: rgba(20, 184, 166, .15);
    color: #0d9488;
}
:root[data-theme="dark"] .pk-savedsearch-icon--trip {
    background: rgba(45, 212, 191, .18);
    color: #5eead4;
}

/* Маленький badge «Trip» / «Parcel» рядом с именем поиска — чтобы пользователь
   с миксованным списком сразу видел тип одной взглядом. */
.pk-savedsearch-kind {
    display: inline-block;
    margin-left: 6px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    vertical-align: 1px;
}
.pk-savedsearch-kind--parcel {
    background: rgba(99, 102, 241, .14);
    color: var(--pk-primary-700, #4338ca);
}
.pk-savedsearch-kind--trip {
    background: rgba(20, 184, 166, .15);
    color: #0d9488;
}
:root[data-theme="dark"] .pk-savedsearch-kind--parcel {
    background: rgba(99, 102, 241, .25);
    color: #c7d2fe;
}
:root[data-theme="dark"] .pk-savedsearch-kind--trip {
    background: rgba(45, 212, 191, .22);
    color: #5eead4;
}
.pk-savedsearch-name { white-space: normal; } /* allow kind chip to wrap on tight screens */

/* =========================================================================
   §97  QUICK-NAV ROW (Phase 60)
   Уплотнённый chip-ряд secondary-навигации на /parcels/ и /trips/ —
   «Favorites / My / Saved searches / Trips» в едином стиле.
   - icon-only-friendly: фиксированная min-height, иконка не уезжает
   - горизонтальный скролл на mobile (если 4 chip'а не лезут)
   - solid card-background вместо dashed (читается чище)
   ========================================================================= */
.pk-trips-quicknav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0 var(--pk-s-4) 12px;
}
.pk-quicknav-btn {
    /* Override .pk-toolbar-btn-ghost defaults (dashed/muted) — мы хотим solid card. */
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 14px !important;
    background: var(--pk-surface-card, #fff) !important;
    border: 1px solid var(--pk-border, #e2e8f0) !important;
    border-radius: 999px;
    color: var(--pk-text, #0f172a) !important;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
    transition: transform .12s ease, box-shadow .15s ease, border-color .15s;
    white-space: nowrap;
}
.pk-quicknav-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(15, 23, 42, .08);
    border-color: var(--pk-primary-300, #a5b4fc) !important;
    color: var(--pk-primary-700, #4338ca) !important;
}
.pk-quicknav-btn .icon { font-size: 16px; flex-shrink: 0; }
:root[data-theme="dark"] .pk-quicknav-btn {
    background: rgba(255, 255, 255, .04) !important;
    border-color: rgba(148, 163, 184, .22) !important;
    color: #cbd5e1 !important;
}
:root[data-theme="dark"] .pk-quicknav-btn:hover {
    background: rgba(99, 102, 241, .12) !important;
    border-color: rgba(99, 102, 241, .40) !important;
    color: #a5b4fc !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .25);
}

/* На очень узких экранах (375px) chip-ы переносятся в 2 ряда — это ОК.
   Альтернатива (horizontal scroll) скрывала бы часть из них, а тут все важны. */

/* =========================================================================
   §98  Chat-list route line (Phase 63)
   На карточке комнаты в /chats/ — маленькая строка с маршрутом из посылки
   («📍 Москва → Минск»), чтобы юзер видел контекст без перехода.
   ========================================================================= */
.pk-chat-card-route {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 3px;
    font-size: 12.5px;
    color: var(--pk-text-muted);
    font-weight: 500;
}
.pk-chat-card-route .icon { color: var(--pk-primary-500, #6366f1); }

/* =========================================================================
   §99  REFERRALS PAGE (Phase 66)
   /referrals/ — invitee stats + aggregate counts + future-monetization
   placeholder. Чистый dashboard-стиль: stats grid сверху, share-card,
   список приглашённых с per-row counters.
   ========================================================================= */

/* Top aggregate stats — 3 числа крупно. */
.pk-ref-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    padding: 0 var(--pk-s-4);
}
.pk-ref-stat {
    background: var(--pk-surface-card);
    border: 1px solid var(--pk-border);
    border-radius: var(--pk-r-lg);
    padding: 16px 12px;
    text-align: center;
}
.pk-ref-stat-value {
    font-size: 28px;
    font-weight: 800;
    line-height: 1;
    background: linear-gradient(135deg, var(--pk-primary-600, #4f46e5),
                                        var(--pk-primary-400, #818cf8));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--pk-primary-600);
}
.pk-ref-stat-label {
    margin-top: 6px;
    font-size: 12px;
    color: var(--pk-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Share card */
.pk-ref-share-card {
    margin: 0 var(--pk-s-4);
    padding: 18px;
    border-radius: var(--pk-r-xl);
    background: linear-gradient(135deg,
        rgba(99, 102, 241, .08) 0%, rgba(139, 92, 246, .06) 100%);
    border: 1px solid var(--pk-primary-200, #c7d2fe);
}
:root[data-theme="dark"] .pk-ref-share-card {
    background: linear-gradient(135deg,
        rgba(99, 102, 241, .14) 0%, rgba(139, 92, 246, .10) 100%);
    border-color: rgba(129, 140, 248, .25);
}
.pk-ref-share-label {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--pk-text-muted);
    margin-bottom: 8px;
}
.pk-ref-share-hint {
    margin: 12px 0 0;
    font-size: 12.5px;
    color: var(--pk-text-muted);
    line-height: 1.5;
}

/* Invitee row */
.pk-ref-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: var(--pk-surface-card);
    border: 1px solid var(--pk-border);
    border-radius: var(--pk-r-lg);
    text-decoration: none;
    color: var(--pk-text);
    transition: background .15s, border-color .15s;
}
.pk-ref-row:hover {
    background: var(--pk-surface-hover, var(--pk-primary-50));
    border-color: var(--pk-primary-300, #a5b4fc);
}
.pk-ref-row-body { flex: 1; min-width: 0; }
.pk-ref-row-name {
    font-weight: 700;
    font-size: 15px;
}
.pk-ref-row-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px;
}
.pk-ref-row-meta-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(99, 102, 241, .10);
    color: var(--pk-primary-700, #4338ca);
    font-size: 11.5px;
    font-weight: 600;
}
:root[data-theme="dark"] .pk-ref-row-meta-chip {
    background: rgba(99, 102, 241, .22);
    color: #c7d2fe;
}
.pk-ref-row-date {
    margin-left: auto;
    font-size: 11.5px;
    color: var(--pk-text-muted);
}
.pk-ref-row-chev { color: var(--pk-text-muted); font-size: 18px; flex-shrink: 0; }

/* Future-monetization placeholder */
.pk-ref-future {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 0 var(--pk-s-4);
    padding: 14px;
    border-radius: var(--pk-r-lg);
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border: 1px dashed #f59e0b;
}
:root[data-theme="dark"] .pk-ref-future {
    background: linear-gradient(135deg,
        rgba(251, 191, 36, .15) 0%, rgba(245, 158, 11, .10) 100%);
    border-color: rgba(245, 158, 11, .4);
}
.pk-ref-future-icon {
    flex-shrink: 0;
    width: 36px; height: 36px;
    border-radius: 10px;
    background: rgba(245, 158, 11, .25);
    color: #92400e;
    display: flex; align-items: center; justify-content: center;
    font-size: 18px;
}
:root[data-theme="dark"] .pk-ref-future-icon {
    background: rgba(245, 158, 11, .25);
    color: #fcd34d;
}
.pk-ref-future-title {
    font-weight: 700;
    font-size: 14px;
    color: #78350f;
    margin-bottom: 4px;
}
:root[data-theme="dark"] .pk-ref-future-title { color: #fcd34d; }
.pk-ref-future-text {
    font-size: 13px;
    line-height: 1.5;
    color: #78350f;
}
:root[data-theme="dark"] .pk-ref-future-text { color: #fde68a; }

/* Profile invite-card: link to /referrals/ */
.pk-invite-stats-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 12px;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .55);
    color: var(--pk-primary-700, #4338ca);
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none;
    border: 1px solid var(--pk-primary-200, #c7d2fe);
    transition: background .15s;
}
.pk-invite-stats-link:hover {
    background: var(--pk-primary-100, #e0e7ff);
}
:root[data-theme="dark"] .pk-invite-stats-link {
    background: rgba(15, 23, 42, .35);
    color: #a5b4fc;
    border-color: rgba(129, 140, 248, .35);
}
:root[data-theme="dark"] .pk-invite-stats-link:hover {
    background: rgba(99, 102, 241, .22);
}

/* =========================================================================
   §100  SHARE SHEET (Phase 67)
   Fallback popup для desktop'ов без navigator.share — раньше .pk-share-btn
   на desktop'е просто copy'ил в clipboard, что совпадало с .pk-copy-btn и
   юзеру казалось «обе кнопки делают одно и то же». Теперь Share открывает
   выбор: Telegram / WhatsApp / VK / Email / Copy link.
   ========================================================================= */
.pk-share-sheet {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: pkShareSheetIn .2s ease;
}
@keyframes pkShareSheetIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.pk-share-sheet-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, .55);
    backdrop-filter: blur(2px);
    cursor: pointer;
}
.pk-share-sheet-card {
    position: relative;
    background: var(--pk-surface-card, #fff);
    border-radius: 16px;
    padding: 18px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .25);
    min-width: 320px;
    max-width: 92vw;
    animation: pkShareCardIn .25s ease;
}
@keyframes pkShareCardIn {
    from { transform: translateY(20px); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
}
:root[data-theme="dark"] .pk-share-sheet-card {
    background: #1e293b;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .55);
}
.pk-share-sheet-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 13px;
    font-weight: 600;
    color: var(--pk-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 14px;
}
.pk-share-sheet-close {
    background: transparent;
    border: none;
    color: var(--pk-text-muted);
    cursor: pointer;
    padding: 4px;
    border-radius: 6px;
}
.pk-share-sheet-close:hover { background: var(--pk-surface-hover, rgba(99,102,241,.08)); }
.pk-share-sheet-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
}
@media (max-width: 480px) {
    .pk-share-sheet-grid { grid-template-columns: repeat(3, 1fr); }
}
.pk-share-sheet-target {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 10px 8px;
    border: none;
    background: transparent;
    border-radius: 12px;
    cursor: pointer;
    text-decoration: none;
    color: var(--pk-text);
    transition: background .15s, transform .1s;
}
.pk-share-sheet-target:hover {
    background: var(--pk-surface-hover, rgba(99, 102, 241, .08));
    transform: translateY(-1px);
}
.pk-share-sheet-target-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px; height: 44px;
    border-radius: 50%;
    background: var(--ic, #4f46e5);
    color: #fff;
}
.pk-share-sheet-target-icon .icon { font-size: 20px; }
.pk-share-sheet-target-label {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--pk-text);
}

/* =========================================================================
   §101  /parcels/mine/ ↔ /trips/mine/ cross-link + trip-card analytics
   (Phase 72)
   ========================================================================= */

/* Cross-link card between «Мои посылки» и «Мои поездки». Полноширинный
   pill-link, делает переключение между двумя сторонами marketplace one-tap. */
.pk-mine-crosslink {
    margin: 0 var(--pk-s-4) 12px;
}
.pk-mine-crosslink-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: var(--pk-surface-card);
    border: 1px solid var(--pk-border);
    border-radius: 999px;
    color: var(--pk-text);
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
    transition: transform .12s ease, box-shadow .15s, border-color .15s;
}
.pk-mine-crosslink-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(15, 23, 42, .08);
    border-color: var(--pk-primary-300, #a5b4fc);
    color: var(--pk-primary-700, #4338ca);
}
.pk-mine-crosslink-btn > .icon:first-child {
    width: 32px; height: 32px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(135deg,
        var(--pk-primary-500, #6366f1),
        var(--pk-primary-700, #4338ca));
    color: #fff;
    font-size: 16px;
}
.pk-mine-crosslink-btn > span { flex: 1; }
.pk-mine-crosslink-chev {
    color: var(--pk-text-muted);
    font-size: 18px;
}
:root[data-theme="dark"] .pk-mine-crosslink-btn {
    background: rgba(255, 255, 255, .04);
    border-color: rgba(148, 163, 184, .22);
    color: #cbd5e1;
}
:root[data-theme="dark"] .pk-mine-crosslink-btn:hover {
    background: rgba(99, 102, 241, .12);
    border-color: rgba(99, 102, 241, .40);
    color: #a5b4fc;
}

/* Per-trip card analytics chips (views, offers) — mirror parcel-mine card. */
.pk-trip-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}
.pk-trip-card-meta-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(148, 163, 184, .14);
    color: var(--pk-text-muted);
    font-size: 11.5px;
    font-weight: 600;
}
.pk-trip-card-meta-chip .icon { font-size: 11px; }
.pk-trip-card-meta-chip--offers {
    background: rgba(16, 185, 129, .14);
    color: #047857;
}
:root[data-theme="dark"] .pk-trip-card-meta-chip {
    background: rgba(148, 163, 184, .20);
    color: #cbd5e1;
}
:root[data-theme="dark"] .pk-trip-card-meta-chip--offers {
    background: rgba(16, 185, 129, .22);
    color: #6ee7b7;
}

/* =========================================================================
   §102  ANALYTICS DASHBOARD (Phase 74 / polished v2)
   /analytics/ — combined parcels + trips overview.

   Visual model:
     1. HERO — single cohesive gradient panel with 3 stats inline, period chip.
     2. SECTION CARD — wraps each kind (Posylki / Trips) into a card with a
        rich header (icon avatar + title + open-link) and an inner tile grid.
     3. TILE — icon-led row: gradient round icon on the left,
        number + label stacked on the right (premium look, не плоская).
     4. FUNNEL — proportional bars showing conversion. Color flows
        amber → emerald based on stage. Conversion % chip on each step.
     5. TOP — gold/silver/bronze rank with a "share of leader" progress bar.
   ========================================================================= */

/* --- HERO ------------------------------------------------------------- */
.pk-analytics-hero {
    margin: 0 var(--pk-s-4);
    padding: 22px 18px 20px;
    position: relative;
    overflow: hidden;
    border-radius: var(--pk-r-2xl, 20px);
    background:
        radial-gradient(120% 140% at 0% 0%, rgba(165,180,252,.55) 0%, transparent 55%),
        radial-gradient(120% 140% at 100% 100%, rgba(244,114,182,.45) 0%, transparent 55%),
        linear-gradient(135deg, #6366f1 0%, #8b5cf6 55%, #ec4899 100%);
    color: #fff;
    box-shadow: 0 12px 32px -16px rgba(99,102,241,.55);
}
.pk-analytics-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(60% 80% at 50% 0%, rgba(255,255,255,.18) 0%, transparent 70%);
    pointer-events: none;
}
.pk-analytics-hero-period {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    background: rgba(255,255,255,.18);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 14px;
}
.pk-analytics-hero-period .icon { font-size: 13px; }
.pk-analytics-hero-grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    align-items: end;
}
.pk-analytics-hero-stat {
    text-align: center;
    padding: 4px 8px;
    min-width: 0;
    position: relative;
}
.pk-analytics-hero-stat + .pk-analytics-hero-stat::before {
    content: '';
    position: absolute;
    left: 0;
    top: 10%;
    height: 80%;
    width: 1px;
    background: linear-gradient(180deg, transparent, rgba(255,255,255,.30), transparent);
}
.pk-analytics-hero-value {
    font-size: 36px;
    font-weight: 800;
    line-height: 1;
    color: #fff;
    letter-spacing: -0.02em;
    text-shadow: 0 1px 12px rgba(0,0,0,.20);
}
.pk-analytics-hero-label {
    margin-top: 8px;
    font-size: 10.5px;
    color: rgba(255,255,255,.85);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 700;
    overflow-wrap: anywhere;
    line-height: 1.25;
}
@media (max-width: 400px) {
    .pk-analytics-hero { padding: 18px 12px 16px; }
    .pk-analytics-hero-value { font-size: 28px; }
    .pk-analytics-hero-label { font-size: 9.5px; letter-spacing: 0.04em; }
    .pk-analytics-hero-period { font-size: 10.5px; padding: 4px 10px; margin-bottom: 12px; }
}

/* --- SECTION CARD (Posylki / Trips wrapper) ------------------------- */
.pk-analytics-section {
    margin: 14px var(--pk-s-4) 0;
    background: var(--pk-surface-card);
    border: 1px solid var(--pk-border);
    border-radius: var(--pk-r-2xl, 20px);
    padding: 0;
    overflow: hidden;
    box-shadow: 0 2px 12px -8px rgba(15,23,42,.10);
}
:root[data-theme="dark"] .pk-analytics-section {
    box-shadow: 0 2px 12px -8px rgba(0,0,0,.40);
}
.pk-analytics-section-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 16px 14px;
    border-bottom: 1px solid var(--pk-border);
}
.pk-analytics-section-icon {
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 20px;
    box-shadow: 0 4px 14px -6px rgba(15,23,42,.30);
}
.pk-analytics-section-icon--parcels {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
}
.pk-analytics-section-icon--trips {
    background: linear-gradient(135deg, #0ea5e9, #14b8a6);
}
.pk-analytics-section-title {
    flex: 1;
    min-width: 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--pk-text-strong);
    letter-spacing: -0.01em;
}
.pk-analytics-section-link {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--pk-primary-50, #eef2ff);
    color: var(--pk-primary-700, #4338ca);
    font-size: 12.5px;
    font-weight: 700;
    text-decoration: none;
    transition: background .15s;
}
.pk-analytics-section-link:hover {
    background: var(--pk-primary-100, #e0e7ff);
}
:root[data-theme="dark"] .pk-analytics-section-link {
    background: rgba(99,102,241,.16);
    color: #a5b4fc;
}
:root[data-theme="dark"] .pk-analytics-section-link:hover {
    background: rgba(99,102,241,.24);
}
.pk-analytics-section-body {
    padding: 14px;
}

/* Legacy floating block-title link kept for backward compat */
.pk-block-title-link {
    float: right;
    text-transform: none;
    letter-spacing: 0;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--pk-primary-700, #4338ca);
    text-decoration: none;
}
.pk-block-title-link:hover { text-decoration: underline; }

/* --- TILE GRID (icon-led) ------------------------------------------- */
.pk-analytics-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}
@media (max-width: 480px) {
    .pk-analytics-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.pk-analytics-tile {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--pk-surface-2, #f8fafc);
    border: 1px solid transparent;
    border-radius: var(--pk-r-lg, 14px);
    padding: 12px 12px;
    min-width: 0;
    transition: transform .15s, box-shadow .15s;
}
.pk-analytics-tile:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px -8px rgba(15,23,42,.16);
}
:root[data-theme="dark"] .pk-analytics-tile {
    background: rgba(148,163,184,.06);
    border-color: rgba(148,163,184,.15);
}
.pk-analytics-tile-icon {
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 18px;
    background: linear-gradient(135deg, #94a3b8, #64748b);
}
.pk-analytics-tile-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}
.pk-analytics-tile-value {
    font-size: 22px;
    font-weight: 800;
    line-height: 1.05;
    color: var(--pk-text-strong);
    letter-spacing: -0.01em;
    display: flex;
    align-items: baseline;
    gap: 6px;
    flex-wrap: wrap;
}
.pk-analytics-tile-label {
    margin-top: 3px;
    font-size: 11px;
    color: var(--pk-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
    overflow-wrap: anywhere;
    line-height: 1.3;
}

/* Tile color variants — controls icon background + subtle bg tint */
.pk-analytics-tile--active {
    background: linear-gradient(180deg, #eef2ff 0%, #f5f6ff 100%);
    border-color: rgba(165,180,252,.55);
}
.pk-analytics-tile--active .pk-analytics-tile-icon {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
}
.pk-analytics-tile--active .pk-analytics-tile-value { color: #4338ca; }
.pk-analytics-tile--success {
    background: linear-gradient(180deg, rgba(16,185,129,.10) 0%, rgba(16,185,129,.04) 100%);
    border-color: rgba(16,185,129,.30);
}
.pk-analytics-tile--success .pk-analytics-tile-icon {
    background: linear-gradient(135deg, #10b981, #059669);
}
.pk-analytics-tile--success .pk-analytics-tile-value { color: #047857; }
.pk-analytics-tile--info {
    background: linear-gradient(180deg, rgba(14,165,233,.10) 0%, rgba(14,165,233,.04) 100%);
    border-color: rgba(14,165,233,.30);
}
.pk-analytics-tile--info .pk-analytics-tile-icon {
    background: linear-gradient(135deg, #0ea5e9, #0284c7);
}
.pk-analytics-tile--info .pk-analytics-tile-value { color: #0369a1; }
.pk-analytics-tile--engagement {
    background: linear-gradient(180deg, rgba(245,158,11,.10) 0%, rgba(245,158,11,.04) 100%);
    border-color: rgba(245,158,11,.30);
}
.pk-analytics-tile--engagement .pk-analytics-tile-icon {
    background: linear-gradient(135deg, #f59e0b, #d97706);
}
.pk-analytics-tile--engagement .pk-analytics-tile-value { color: #b45309; }

:root[data-theme="dark"] .pk-analytics-tile--active {
    background: linear-gradient(180deg, rgba(99,102,241,.18) 0%, rgba(99,102,241,.08) 100%);
    border-color: rgba(99,102,241,.35);
}
:root[data-theme="dark"] .pk-analytics-tile--active .pk-analytics-tile-value { color: #a5b4fc; }
:root[data-theme="dark"] .pk-analytics-tile--success {
    background: linear-gradient(180deg, rgba(16,185,129,.18) 0%, rgba(16,185,129,.08) 100%);
    border-color: rgba(16,185,129,.35);
}
:root[data-theme="dark"] .pk-analytics-tile--success .pk-analytics-tile-value { color: #6ee7b7; }
:root[data-theme="dark"] .pk-analytics-tile--info {
    background: linear-gradient(180deg, rgba(14,165,233,.18) 0%, rgba(14,165,233,.08) 100%);
    border-color: rgba(14,165,233,.35);
}
:root[data-theme="dark"] .pk-analytics-tile--info .pk-analytics-tile-value { color: #7dd3fc; }
:root[data-theme="dark"] .pk-analytics-tile--engagement {
    background: linear-gradient(180deg, rgba(245,158,11,.18) 0%, rgba(245,158,11,.08) 100%);
    border-color: rgba(245,158,11,.35);
}
:root[data-theme="dark"] .pk-analytics-tile--engagement .pk-analytics-tile-value { color: #fcd34d; }

/* Delta chip (+12%, −5%) inside tile-value */
.pk-analytics-delta {
    display: inline-flex;
    align-items: center;
    gap: 1px;
    padding: 2px 7px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 800;
    line-height: 1;
}
.pk-analytics-delta.is-up { background: rgba(16,185,129,.18); color: #047857; }
.pk-analytics-delta.is-down { background: rgba(239,68,68,.18); color: #b91c1c; }
:root[data-theme="dark"] .pk-analytics-delta.is-up { background: rgba(16,185,129,.30); color: #6ee7b7; }
:root[data-theme="dark"] .pk-analytics-delta.is-down { background: rgba(239,68,68,.28); color: #fca5a5; }

/* --- FUNNEL (full-width colored pills with internal progress meter) -- */
.pk-funnel {
    margin: 0 var(--pk-s-4);
    padding: 16px;
    background: var(--pk-surface-card);
    border: 1px solid var(--pk-border);
    border-radius: var(--pk-r-2xl, 20px);
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.pk-funnel-step {
    display: block;
    padding: 12px 16px;
    border-radius: 14px;
    color: #fff;
    box-shadow: 0 6px 16px -10px rgba(15,23,42,.30);
    transition: transform .15s, filter .15s;
}
.pk-funnel-step:hover { transform: translateY(-1px); filter: brightness(1.03); }
.pk-funnel-step-content {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}
.pk-funnel-step-label {
    font-size: 12.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(255,255,255,.95);
}
.pk-funnel-step-numbers {
    display: flex;
    align-items: baseline;
    gap: 8px;
    color: #fff;
    flex-shrink: 0;
}
.pk-funnel-step-value {
    font-size: 22px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.02em;
}
.pk-funnel-step-pct {
    display: inline-flex;
    align-items: center;
    padding: 2px 7px;
    border-radius: 999px;
    background: rgba(255,255,255,.22);
    font-size: 11px;
    font-weight: 800;
    color: #fff;
    line-height: 1.4;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
/* Internal progress meter showing the conversion width */
.pk-funnel-step-meter {
    height: 4px;
    background: rgba(255,255,255,.22);
    border-radius: 999px;
    overflow: hidden;
}
.pk-funnel-step-meter-fill {
    display: block;
    height: 100%;
    background: #fff;
    border-radius: 999px;
    transition: width .4s ease;
    box-shadow: 0 0 8px rgba(255,255,255,.6);
}
/* Per-stage colors (funnel flows amber → green) */
.pk-funnel-step--s1 { background: linear-gradient(135deg, #fbbf24, #f59e0b); }
.pk-funnel-step--s2 { background: linear-gradient(135deg, #fb923c, #ea580c); }
.pk-funnel-step--s3 { background: linear-gradient(135deg, #818cf8, #6366f1); }
.pk-funnel-step--s4 { background: linear-gradient(135deg, #34d399, #059669); }

@media (max-width: 480px) {
    .pk-funnel { padding: 12px; gap: 8px; }
    .pk-funnel-step { padding: 10px 14px; border-radius: 12px; }
    .pk-funnel-step-label { font-size: 11px; letter-spacing: 0.04em; }
    .pk-funnel-step-value { font-size: 18px; }
    .pk-funnel-step-pct { font-size: 10px; padding: 2px 6px; }
}
.pk-funnel-extra {
    margin: 10px var(--pk-s-4) 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(245,158,11,.12);
    color: #b45309;
    font-size: 13px;
    font-weight: 600;
}
:root[data-theme="dark"] .pk-funnel-extra {
    background: rgba(245,158,11,.18);
    color: #fcd34d;
}

/* --- TOP PERFORMERS ------------------------------------------------- */
.pk-top-perf-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    background: var(--pk-surface-card);
    border: 1px solid var(--pk-border);
    border-radius: var(--pk-r-xl, 16px);
    text-decoration: none;
    color: var(--pk-text);
    transition: transform .15s, box-shadow .15s, border-color .15s;
}
.pk-top-perf-row:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 22px -10px rgba(99,102,241,.30);
    border-color: var(--pk-primary-300, #a5b4fc);
}
.pk-top-perf-rank {
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 15px;
    box-shadow: 0 4px 10px -4px rgba(15,23,42,.30);
}
/* Gold / silver / bronze rank colors */
.pk-top-perf-row:nth-child(1) .pk-top-perf-rank {
    background: linear-gradient(135deg, #fde047, #f59e0b);
}
.pk-top-perf-row:nth-child(2) .pk-top-perf-rank {
    background: linear-gradient(135deg, #e5e7eb, #9ca3af);
    color: #1f2937;
}
.pk-top-perf-row:nth-child(3) .pk-top-perf-rank {
    background: linear-gradient(135deg, #fbbf24, #b45309);
}
.pk-top-perf-row:nth-child(n+4) .pk-top-perf-rank {
    background: linear-gradient(135deg, #a5b4fc, #818cf8);
}
.pk-top-perf-body { flex: 1; min-width: 0; }
.pk-top-perf-title {
    font-weight: 700;
    font-size: 14.5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--pk-text-strong);
    letter-spacing: -0.005em;
}
.pk-top-perf-route {
    margin-top: 3px;
    font-size: 12px;
    color: var(--pk-text-muted);
    display: flex;
    align-items: center;
    gap: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pk-top-perf-route .icon { font-size: 12px; flex-shrink: 0; }
.pk-top-perf-bar {
    margin-top: 8px;
    height: 4px;
    background: var(--pk-surface-2, #eef2ff);
    border-radius: 999px;
    overflow: hidden;
}
.pk-top-perf-bar-fill {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #818cf8, #6366f1);
    border-radius: 999px;
    transition: width .4s ease;
}
:root[data-theme="dark"] .pk-top-perf-bar {
    background: rgba(148,163,184,.16);
}
.pk-top-perf-stats {
    flex: 0 0 auto;
    display: flex;
    gap: 6px;
    align-items: center;
    flex-direction: column;
}
.pk-top-perf-stat {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 9px;
    border-radius: 999px;
    background: rgba(99,102,241,.10);
    color: var(--pk-primary-700, #4338ca);
    font-size: 12.5px;
    font-weight: 700;
}
.pk-top-perf-stat .icon { font-size: 12px; }
.pk-top-perf-stat--engagement {
    background: rgba(245,158,11,.15);
    color: #b45309;
}
.pk-top-perf-stat--engagement .icon { color: #b45309; }
:root[data-theme="dark"] .pk-top-perf-stat {
    background: rgba(99,102,241,.20);
    color: #a5b4fc;
}
:root[data-theme="dark"] .pk-top-perf-stat--engagement {
    background: rgba(245,158,11,.22);
    color: #fcd34d;
}
:root[data-theme="dark"] .pk-top-perf-stat--engagement .icon { color: #fcd34d; }