/**
 * ============================================================================
 * KlipServis — v4 SYSTEM DESIGN LAYER
 * ----------------------------------------------------------------------------
 * Implements the approved v4 mockup set:
 *   v4-sys-01  přihlášení / registrace
 *   v4-sys-02  domů / příspěvky / zprávy / profil
 *   v4-sys-03  skupiny / účet
 *   v4-sys-04  servis / admin
 *   v4-extra-01..08  GPS, fórum, pronájem+prodej, nastavení, upozornění,
 *                    systémová okna, patička, cookies+toasty+overlay
 *
 * Loaded AFTER assets/styles.css. Visual layer only — no layout rewrites of
 * PHP-rendered structures, no changes to JS behaviour.
 * Landing-specific rules live in assets/ks-v4-landing.css.
 * ============================================================================
 */

/* ==========================================================================
   1. TOKENS
   ========================================================================== */
:root {
  --accent: #ff1a1a;
  --accent-hi: #ff3b3b;
  --accent-lo: #c40f0f;
  --accent-soft: rgba(255, 26, 26, 0.16);
  --accent-line: rgba(255, 26, 26, 0.55);

  --ok: #2ecc8f;
  --ok-soft: rgba(46, 204, 143, 0.12);
  --ok-line: rgba(46, 204, 143, 0.42);
  --warn: #f5a524;
  --warn-soft: rgba(245, 165, 36, 0.12);
  --warn-line: rgba(245, 165, 36, 0.45);

  --bg: #07070a;
  --bg-2: #0a0a0e;
  --panel: rgba(15, 15, 19, 0.94);
  --panel-2: rgba(21, 21, 26, 0.9);
  --inset: rgba(0, 0, 0, 0.34);

  --surface: rgba(255, 255, 255, 0.04);
  --surface-2: rgba(255, 255, 255, 0.07);
  --glass: rgba(15, 15, 19, 0.9);

  --border: rgba(255, 255, 255, 0.08);
  --border-2: rgba(255, 255, 255, 0.14);

  --text: rgba(255, 255, 255, 0.96);
  --muted: rgba(255, 255, 255, 0.72);
  --muted-2: rgba(255, 255, 255, 0.5);

  --shadow: 0 22px 60px rgba(0, 0, 0, 0.55);
  --shadow-soft: 0 12px 34px rgba(0, 0, 0, 0.38);
  --glow: none;

  --radius: 14px;
  --radius-sm: 10px;
  --radius-lg: 18px;
  --ring: 0 0 0 3px rgba(255, 42, 42, 0.18);

  --font-ui: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Exo 2", "Inter", system-ui, sans-serif;

  /* --- Type scale (pass 2) -------------------------------------------------
     One scale for the whole app. UI text sits at 15px, long-form prose at
     16px, headings are clamped so they never inflate on wide screens. */
  --fs-xs: 0.75rem;   /* 12px — chips, meta, table heads */
  --fs-sm: 0.84rem;   /* 13.5px — secondary UI, helper text */
  --fs-ui: 0.94rem;   /* 15px — default UI text, inputs, buttons */
  --fs-body: 1rem;    /* 16px — document / long-form prose */
  --fs-h4: clamp(0.94rem, 1.1vw, 1rem);
  --fs-h3: clamp(1rem, 1.35vw, 1.1rem);
  --fs-h2: clamp(1.14rem, 1.8vw, 1.36rem);
  --fs-h1: clamp(1.45rem, 2.5vw, 1.95rem);
  --lh-prose: 1.68;
  --lh-ui: 1.45;

  /* --- Spacing / controls / containers ------------------------------------ */
  --sp-1: 6px;
  --sp-2: 10px;
  --sp-3: 14px;
  --sp-4: 18px;
  --sp-5: 24px;
  --sp-6: 32px;
  --control-h: 42px;
  --control-h-sm: 34px;
  --icon-sm: 16px;
  --icon: 18px;
  --icon-lg: 22px;
  --w-doc: 1180px;   /* document shell (TOC rail + prose) */
  --w-prose: 860px;  /* readable measure for long-form text */
  --w-app: 1200px;   /* dashboard content shell */
}

/* ==========================================================================
   2. BASE
   ========================================================================== */
html,
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
}

/* Native controls (checkboxes, selects, scrollbars) follow the dark theme. */
html:not([data-theme="light"]) {
  color-scheme: dark;
}

.wrap {
  width: 100%;
  max-width: min(1120px, 100%) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box;
}

.dash-shell,
.dash-shell--full {
  max-width: min(1280px, 100%);
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

h1,
h2,
h3,
h4,
.brand-title,
.brand-subtitle,
.auth-title,
.dash-section-title,
.dash-page__title,
.section-rail__brand,
.home-main-toolbar__title,
.ui-modal__title {
  font-family: var(--font-display);
}

/* Tame every neon text glow the previous passes introduced. */
h1,
h2,
h3,
h4,
h5,
.logo-text-anim,
.accent-text,
.brand-title,
.brand-subtitle,
.auth-title,
.dash-page__title,
.home-main-toolbar__title {
  text-shadow: none !important;
}

.muted {
  color: var(--muted);
}

/* ==========================================================================
   3. SITE HEADER + NAVIGATION  (v4-sys-02 / v4-sys-03)
   ========================================================================== */
.site-header {
  background: rgba(8, 8, 11, 0.92) !important;
  border-bottom: 1px solid var(--border) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.42);
  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
}

/* Boxed logo mark, as in every v4 mockup header. */
.logo-container {
  gap: 10px;
}
.nav-logo {
  height: 34px;
  width: auto;
  padding: 5px 6px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-right: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.35);
  filter: invert(1) brightness(1.6);
  box-sizing: content-box;
}
.brand-text {
  line-height: 0.86;
}
.brand-title,
.brand-subtitle {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 800;
}
.brand-title {
  font-size: 1.05rem;
  letter-spacing: 0.04em;
  color: #fff;
}
.brand-subtitle {
  font-size: 0.98rem;
  letter-spacing: 0.04em;
  color: var(--accent);
}

/* Nav row: flex so bell / online pill / logout align on the baseline. */
.nav {
  display: flex;
  align-items: center;
  gap: clamp(8px, 1.5vw, 20px);
  flex-wrap: wrap;
  justify-content: flex-end;
}
/* Below the tablet breakpoint the drawer takes over (styles.css hides .nav;
   repeated here because this file loads later and would otherwise re-show it). */
@media (max-width: 950px) {
  .nav {
    display: none;
  }
  .nav-toggle {
    display: inline-flex;
  }
}
.nav a {
  position: relative;
  margin-left: 0;
  padding: 6px 2px;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.68);
  transition: color 0.15s ease;
}
.nav a:hover {
  color: #fff;
}
.nav--system .nav-link.is-active {
  color: #fff;
}
.nav--system .nav-link.is-active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -3px;
  height: 2px;
  border-radius: 2px;
  background: var(--accent);
}
.nav a.is-accent {
  color: var(--accent);
  font-weight: 700;
}
.nav-sep {
  opacity: 0.18;
  margin: 0 2px;
}

/* Public header CTA — solid red rectangle in the mockup, not a pill. */
.nav a.btn-accent--compact,
.site-header .btn-accent {
  padding: 8px 18px !important;
  border-radius: 8px !important;
  border: 0 !important;
  background: var(--accent) !important;
  color: #fff !important;
  font-size: 0.8rem !important;
  font-weight: 700;
  letter-spacing: 0.01em;
  box-shadow: none !important;
}
.nav a.btn-accent--compact:hover,
.site-header .btn-accent:hover {
  background: var(--accent-hi) !important;
  transform: none;
}
.nav-auth-link {
  margin-left: 2px;
}

/* ONLINE pill with green dot (v4-sys-02 header right). */
.nav-online {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-left: 4px;
  padding: 5px 11px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.72) !important;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}
.nav-online__dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--ok);
  box-shadow: 0 0 0 3px rgba(46, 204, 143, 0.16);
}

.ks-inline-logout {
  margin-left: 4px;
}
.ks-inline-logout__btn {
  font-size: 0.82rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.68);
}
.ks-inline-logout__btn:hover,
.ks-inline-logout__btn:focus-visible {
  color: var(--accent);
}

/* Mobile drawer — same language, calmer borders. */
.mobile-nav {
  background: rgba(10, 10, 13, 0.98) !important;
  border-left: 1px solid var(--border);
}
.mobile-nav__head {
  border-bottom: 1px solid var(--border);
  background: rgba(255, 42, 42, 0.06);
}
.mobile-nav__links a,
.mobile-nav__notif {
  border-radius: var(--radius-sm) !important;
  border: 1px solid var(--border) !important;
  background: rgba(255, 255, 255, 0.03) !important;
  font-weight: 600 !important;
}
.mobile-nav__links a:hover {
  border-color: var(--accent-line) !important;
  background: var(--accent-soft) !important;
}
.mobile-nav__links a.is-accent {
  border-color: var(--accent-line) !important;
  background: var(--accent-soft) !important;
  color: #fff !important;
}
.nav-toggle {
  border-radius: var(--radius-sm);
  border-color: var(--border-2);
  background: rgba(255, 255, 255, 0.04);
}

/* ==========================================================================
   4. CARDS / PANELS
   ========================================================================== */
.card.glass,
.glass {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.012)), var(--panel);
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.card.glass:hover {
  border-color: rgba(255, 255, 255, 0.12);
}

.orders-card,
.home-card,
.home-panel,
.forum-card,
.group-card,
.ks-logo-card,
.admin-panel .card.glass,
.settings-body .orders-card {
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.012)), var(--panel) !important;
  box-shadow: var(--shadow-soft);
}

/* Nested inset surface (list rows, stat tiles, kv rows). */
.home-stack > .group-item,
.home-group-item,
.home-quick-link,
.home-support-btn,
.home-announcement-item,
.settings-check,
.ks-account-panel,
.stats > div {
  border-radius: var(--radius-sm) !important;
  border: 1px solid var(--border) !important;
  background: var(--inset) !important;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.home-quick-link:hover,
.home-support-btn:hover,
.home-group-item:hover,
.ks-account-panel:hover {
  border-color: var(--accent-line) !important;
  background: rgba(255, 42, 42, 0.07) !important;
}

/* ==========================================================================
   5. BUTTONS / PILLS / TABS
   ========================================================================== */
.btn-accent,
button.btn-accent,
a.btn-accent {
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: #fff !important;
  font-weight: 700;
  letter-spacing: 0.01em;
  box-shadow: none;
  transition: background 0.15s ease, filter 0.15s ease;
}
.btn-accent:hover,
a.btn-accent:hover,
button.btn-accent:hover {
  background: var(--accent-hi);
  transform: none;
  box-shadow: none;
}
.btn-accent:active {
  background: var(--accent-lo);
}

.btn-large {
  width: 100%;
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: #fff;
  font-weight: 700;
  letter-spacing: 0.02em;
  box-shadow: none;
}
.btn-large:hover {
  background: var(--accent-hi);
}

/* Neutral / ghost button = outlined dark (mockup "Ne", "Zrušit"). */
.btn:not(.btn-accent),
button.btn:not(.btn-accent),
.btn-ghost,
.ui-btn:not(.ui-btn--primary):not(.ui-btn--danger):not(.ui-btn--accent) {
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-2);
  background: rgba(255, 255, 255, 0.035);
  color: rgba(255, 255, 255, 0.86);
  font-weight: 600;
}
.btn:not(.btn-accent):hover,
.btn-ghost:hover {
  border-color: rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.06);
}

.icon-btn {
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.78);
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.icon-btn:hover {
  border-color: var(--accent-line);
  background: var(--accent-soft);
  color: #fff;
}

/* Pills / badges */
.pill,
.pill--admin,
.badge,
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  border: 1px solid var(--accent-line);
  background: var(--accent-soft);
  color: rgba(255, 255, 255, 0.92);
  font-weight: 700;
  letter-spacing: 0.02em;
}
.pill--ok,
.pill--done,
.pill.is-done {
  border-color: var(--ok-line);
  background: var(--ok-soft);
}
.pill--warn,
.pill.is-progress {
  border-color: var(--warn-line);
  background: var(--warn-soft);
}

/* Tabs — mockup uses red-tinted rounded rects, active is filled */
.tab-btn {
  border-radius: 8px !important;
  border: 1px solid var(--border) !important;
  background: rgba(255, 255, 255, 0.035) !important;
  color: rgba(255, 255, 255, 0.72) !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
  padding: 7px 14px !important;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.tab-btn:hover {
  border-color: rgba(255, 255, 255, 0.18) !important;
  color: #fff !important;
}
.tab-btn.is-active {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #fff !important;
}

/* ==========================================================================
   6. FORMS
   ========================================================================== */
.field {
  gap: 6px;
}
.field__label,
.field-label,
label > small.label-hint {
  font-size: 0.76rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.66);
  letter-spacing: 0;
}
.field__input,
input.field__input,
select.field__input,
textarea.field__input,
.ui-input,
.field-input,
.booking-form input,
.booking-form select,
.booking-form textarea,
.landing-form input,
.landing-form select,
.landing-form textarea,
.settings-body input:not([type="checkbox"]):not([type="radio"]),
.settings-body select,
.settings-body textarea,
.manual-order-form input,
.manual-order-form select,
.manual-order-form textarea {
  border-radius: 8px !important;
  border: 1px solid var(--border) !important;
  background: rgba(0, 0, 0, 0.42) !important;
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.86rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.field__input::placeholder,
input::placeholder,
textarea::placeholder {
  color: rgba(255, 255, 255, 0.32);
}
.field__input:focus,
.ui-input:focus,
.booking-form input:focus,
.booking-form select:focus,
.booking-form textarea:focus,
.landing-form input:focus,
.landing-form select:focus,
.landing-form textarea:focus,
.settings-body input:focus,
.settings-body select:focus,
.settings-body textarea:focus {
  outline: none;
  border-color: var(--accent-line) !important;
  box-shadow: var(--ring);
}
input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--accent);
}
/* Native unchecked boxes render pale on the dark theme, so draw them ourselves.
   Toggle-switch inputs keep their own styling. */
input[type="checkbox"]:not(.ks-toggle):not(.ks-switch__input):not(.switch__input):not(.ks-switch-field__input) {
  appearance: none;
  -webkit-appearance: none;
  display: inline-block;
  box-sizing: border-box;
  width: 17px !important;
  height: 17px !important;
  min-width: 17px !important;
  flex: 0 0 auto;
  border: 1px solid var(--border-2);
  border-radius: 5px;
  background: var(--inset);
  cursor: pointer;
  position: relative;
  transition: background 0.15s ease, border-color 0.15s ease;
}
input[type="checkbox"]:not(.ks-toggle):not(.ks-switch__input):not(.switch__input):not(.ks-switch-field__input):hover {
  border-color: var(--accent-line);
}
input[type="checkbox"]:not(.ks-toggle):not(.ks-switch__input):not(.switch__input):not(.ks-switch-field__input):checked {
  border-color: var(--accent);
  background: var(--accent);
}
input[type="checkbox"]:not(.ks-toggle):not(.ks-switch__input):not(.switch__input):not(.ks-switch-field__input):checked::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 2px;
  width: 5px;
  height: 9px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(42deg);
}
input[type="checkbox"]:not(.ks-toggle):not(.ks-switch__input):not(.switch__input):not(.ks-switch-field__input):focus-visible {
  outline: none;
  box-shadow: var(--ring);
}
/* Pill switches: the legacy mint-green "on" state becomes the v4 red accent. */
.ks-switch-field__input:checked + .ks-switch-field__ui {
  border-color: var(--accent-line) !important;
  background: rgba(255, 42, 42, 0.1) !important;
}
.ks-switch-field__input:checked + .ks-switch-field__ui .ks-switch__thumb {
  background: var(--accent) !important;
}
.ks-switch-field__input:checked + .ks-switch-field__ui .ks-switch__thumb::after {
  background: #fff !important;
}
.ks-switch-field__ui {
  border-radius: 999px;
  border-color: var(--border-2) !important;
  background: var(--inset) !important;
  color: var(--text) !important;
}
.ks-switch-field__input:focus-visible + .ks-switch-field__ui,
.ks-file-upload__btn:focus-visible {
  outline: 2px solid var(--accent-line) !important;
}
select:not([multiple]):focus-visible,
select.ui-input:focus-visible,
select.field__input:focus-visible {
  border-color: var(--accent-line) !important;
  box-shadow: var(--ring) !important;
}
.ks-switch.is-on {
  border-color: var(--accent-line) !important;
  background: rgba(255, 42, 42, 0.1) !important;
}
.ks-switch.is-on .ks-switch__thumb {
  background: var(--accent) !important;
}
.ks-switch.is-on .ks-switch__thumb::after {
  background: #fff !important;
}
.gcm-react-btn.is-active {
  border-color: var(--accent-line) !important;
  background: rgba(255, 42, 42, 0.12) !important;
}

.alert {
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  font-size: 0.86rem;
  line-height: 1.5;
}
.alert--danger {
  border-color: var(--accent-line);
  background: rgba(255, 42, 42, 0.09);
}
.alert--success {
  border-color: var(--ok-line);
  background: var(--ok-soft);
}

/* ==========================================================================
   7. AUTH — v4-sys-01
   ========================================================================== */
html:has(body.ks-auth-body),
body.ks-auth-body {
  background: #07070a !important;
  color: #f2f2f4 !important;
}
.auth-page {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100svh;
  min-height: 100dvh;
  padding: calc(88px + env(safe-area-inset-top, 0px)) 16px 48px;
  isolation: isolate;
  background-color: #07070a;
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
.auth-page::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: url("hero-workshop-v4.jpg") center 45% / cover no-repeat;
  filter: brightness(0.62) contrast(1.02) saturate(0.92);
  opacity: 1;
  pointer-events: none;
}
.auth-page::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 65% 60% at 50% 45%, rgba(4, 4, 6, 0.18), rgba(4, 4, 6, 0.6) 80%),
    linear-gradient(180deg, rgba(7, 7, 10, 0.55) 0%, rgba(7, 7, 10, 0.32) 42%, rgba(7, 7, 10, 0.8) 100%);
}
.auth-shell {
  position: relative;
  z-index: 1;
  width: min(430px, 100%);
  max-width: 100%;
  box-sizing: border-box;
}
.auth-card,
.auth-card.glass {
  width: 100%;
  max-width: 430px;
  margin: 0 auto;
  padding: 28px 26px 24px !important;
  border: 1px solid rgba(255, 42, 42, 0.45) !important;
  border-radius: var(--radius-lg) !important;
  background: rgba(14, 14, 20, 0.94) !important;
  box-shadow:
    0 0 0 1px rgba(255, 42, 42, 0.12),
    0 0 32px rgba(255, 26, 26, 0.22),
    0 28px 70px rgba(0, 0, 0, 0.6) !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  box-sizing: border-box;
}
.auth-head {
  margin-bottom: 20px;
}

/* Boxed logo + wordmark above the title (mockup). */
.auth-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}
.auth-brand__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 62px;
  height: 62px;
  padding: 8px;
  border: 2px solid rgba(255, 255, 255, 0.9);
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.35);
  box-sizing: border-box;
}
.auth-brand__mark img {
  width: 100%;
  height: auto;
  filter: invert(1) brightness(1.7);
}
.auth-brand__word {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 0.86;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 800;
}
.auth-brand__word span:first-child {
  font-size: 1.5rem;
  letter-spacing: 0.03em;
  color: #fff;
}
.auth-brand__word span:last-child {
  font-size: 1.42rem;
  letter-spacing: 0.03em;
  color: var(--accent);
}
/* The old text kicker is replaced by the logo block. */
.auth-card .auth-brand + .auth-kicker,
.auth-card .auth-brand ~ .auth-kicker {
  display: none;
}
.auth-kicker {
  border-color: var(--accent-line);
  background: var(--accent-soft);
  font-weight: 700;
  letter-spacing: 0.16em;
}
.auth-title {
  margin: 4px 0 6px;
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.25;
  max-width: 100%;
}
.auth-subtitle {
  font-size: 0.86rem;
  color: var(--muted);
}
.auth-card .field__input {
  padding: 11px 12px;
}
/* Icon-prefixed inputs (mockup shows a leading glyph in every field). */
.field__control {
  position: relative;
  display: block;
}
.field__control .field__input {
  width: 100%;
  box-sizing: border-box;
}
.auth-card .field--ico .field__input {
  padding-left: 38px;
}
.auth-card .field__ico {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: rgba(255, 255, 255, 0.4);
  pointer-events: none;
}
.auth-card .field__ico svg {
  width: 100%;
  height: 100%;
  display: block;
}
.auth-card .field--pw .field__input {
  padding-right: 42px;
}
.auth-pw-toggle {
  position: absolute;
  right: 5px;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: rgba(255, 255, 255, 0.45);
  cursor: pointer;
}
.auth-pw-toggle:hover {
  color: rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.05);
}
.auth-pw-toggle svg {
  width: 17px;
  height: 17px;
}
.auth-pw-toggle.is-on {
  color: var(--accent);
}
.auth-card .field__hint {
  font-size: 0.74rem;
  line-height: 1.45;
  color: var(--muted-2);
}

.auth-inline-links {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin: 2px 0 6px;
}
.auth-inline-links__btn,
.link-accent {
  color: var(--accent) !important;
  font-size: 0.8rem;
  font-weight: 600;
  border-bottom: 0 !important;
  text-decoration: none;
}
/* These are <button> elements — strip all native chrome. */
.auth-inline-links__btn {
  appearance: none;
  -webkit-appearance: none;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
  font-family: inherit;
  line-height: 1.3;
  cursor: pointer;
  min-height: 0 !important;
}
.auth-inline-links__btn:hover,
.link-accent:hover {
  color: var(--accent-hi) !important;
  text-decoration: underline;
}
.auth-remember,
.auth-card .field.auth-remember {
  display: flex !important;
  align-items: center;
  gap: 9px;
  margin: 2px 0 2px;
}
.auth-remember input[type="checkbox"] {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--accent);
}
.auth-remember .field__label {
  font-size: 0.82rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.78);
}
.auth-submit {
  margin-top: 6px;
  padding: 13px 16px;
  border-radius: var(--radius-sm);
  background: var(--accent);
  font-family: var(--font-ui);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-transform: none;
}
.auth-foot {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  font-size: 0.85rem;
  color: var(--muted);
}

.ks-reg-consents,
.auth-card .ks-reg-consents {
  border-radius: var(--radius-sm) !important;
  border: 1px solid var(--border) !important;
  background: var(--inset) !important;
  box-shadow: none !important;
}
.ks-reg-consents__extlink {
  color: var(--accent);
}

.ks-reg-gender-field {
  border: 0;
  padding: 0;
  margin: 0;
}
.ks-reg-gender-field .field__label,
.ks-reg-gender-field legend.field__label {
  margin-bottom: 8px;
}
.ks-reg-gender {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.ks-reg-gender__input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.ks-reg-gender__opt {
  cursor: pointer;
}
.ks-reg-gender__card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--inset);
  font-weight: 700;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.ks-reg-gender__preview {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 auto;
}
.ks-reg-gender__input:checked + .ks-reg-gender__card {
  border-color: rgba(255, 26, 26, 0.55);
  background: rgba(255, 26, 26, 0.08);
  box-shadow: 0 0 0 1px rgba(255, 26, 26, 0.2);
}
.ks-reg-gender__opt:hover .ks-reg-gender__card {
  border-color: rgba(255, 255, 255, 0.22);
}

/* ==========================================================================
   8. DASHBOARD SHELL
   ========================================================================== */
.dash,
.dash--simple {
  background:
    radial-gradient(900px 420px at 8% 0%, rgba(255, 42, 42, 0.055), transparent 58%),
    var(--bg) !important;
}
.dash-shell,
.dash-shell--full {
  gap: 16px;
}
.dash-sidebar,
.dash-nav {
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  background: var(--panel) !important;
  box-shadow: var(--shadow-soft);
}
.dash-link {
  border-radius: var(--radius-sm) !important;
  border-color: var(--border) !important;
  background: var(--inset) !important;
  font-weight: 600 !important;
}
.dash-link:hover {
  border-color: rgba(255, 255, 255, 0.16) !important;
}
.dash-link.is-active {
  border-color: var(--accent-line) !important;
  background: var(--accent-soft) !important;
  color: #fff !important;
}
.dash-topbar {
  border-radius: var(--radius) !important;
  border: 1px solid var(--border) !important;
  background: rgba(10, 10, 13, 0.9) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* Page headings — "Domů", "Příspěvky", "Zprávy", "Můj profil" */
.dash-page__head {
  padding: 16px 20px !important;
}
/* Align the page header with the single-column content it introduces. */
.dash-page--profil > .dash-page__head {
  max-width: var(--ks-column-max, min(720px, 100%));
  margin-left: auto;
  margin-right: auto;
}
.dash-page--prispevky > .dash-page__head,
.dash-page--prispevky > .home-main-toolbar {
  max-width: var(--ks-feed-max, min(520px, 100%));
  margin-left: auto;
  margin-right: auto;
}
.dash-page__title {
  font-family: var(--font-display) !important;
  font-size: clamp(1.2rem, 2.1vw, 1.5rem) !important;
  font-weight: 700 !important;
  letter-spacing: 0.005em;
  color: #fff;
}
.dash-page__lead {
  color: var(--muted);
}
.dash-section-title {
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
}
.dash-section-title--accent {
  color: #fff;
  border-left: 2px solid var(--accent);
  padding-left: 10px;
}
.home-section-title {
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.66);
}

/* ==========================================================================
   9. SECTION RAILS  (Servis / Admin / Účet / Fórum / Skupiny) — v4-sys-04
   ========================================================================== */
.section-rail {
  padding: 14px 12px !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  background: var(--panel) !important;
  box-shadow: var(--shadow-soft);
}
.section-rail__brand {
  position: relative;
  margin-bottom: 12px;
  padding: 0 4px 10px 4px;
  border-bottom: 1px solid var(--border);
  font-family: var(--font-display);
  font-size: 1.05rem !important;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-transform: none;
  color: #fff !important;
}
.section-rail__brand::after {
  content: "";
  position: absolute;
  left: 4px;
  bottom: -1px;
  width: 34px;
  height: 2px;
  border-radius: 2px;
  background: var(--accent);
}
.section-rail__links {
  gap: 4px;
}
.section-rail__link {
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  background: transparent;
  color: rgba(255, 255, 255, 0.68);
  font-size: 0.84rem;
  font-weight: 500;
  transition: background 0.14s ease, border-color 0.14s ease, color 0.14s ease;
}
a.section-rail__link:hover,
.section-rail__link:hover {
  border-color: var(--border);
  background: rgba(255, 255, 255, 0.045);
  color: #fff;
}
.section-rail__link.is-active {
  border-color: transparent !important;
  background: linear-gradient(90deg, #ff1a1a 0%, #a10f0f 100%) !important;
  color: #fff !important;
  font-weight: 700;
  box-shadow: 0 8px 22px rgba(255, 26, 26, 0.28);
}
.section-rail__caption {
  color: var(--muted-2);
}

/* Settings rail: no green/red split-border noise, single accent language. */
.settings-body .section-rail__link.ks-settings-tab.is-active {
  border-left: 1px solid var(--accent-line) !important;
  background: rgba(255, 42, 42, 0.14) !important;
  color: #fff !important;
}
.settings-body .section-rail__link.ks-settings-tab:not(.is-active) {
  border-left: 1px solid transparent !important;
  color: rgba(255, 255, 255, 0.68) !important;
}

/* ==========================================================================
   10. HOME DASHBOARD — v4-sys-02 (top-left)
   ========================================================================== */
/* Welcome header: workshop photo bleeding in from the right, as in v4-sys-02. */
.home-main-toolbar {
  position: relative;
  padding: 18px 20px !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  background:
    linear-gradient(100deg, rgba(255, 42, 42, 0.12) 0%, rgba(18, 18, 22, 0.9) 46%, rgba(12, 12, 15, 0.94) 100%) !important;
  box-shadow: var(--shadow-soft) !important;
  overflow: visible;
  isolation: isolate;
}
.home-main-toolbar__search {
  position: relative;
  z-index: 40;
  overflow: visible;
}
.home-main-content--overview .home-main-toolbar::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 0 0 42%;
  background: url("hero-workshop-v4.jpg") center 42% / cover no-repeat;
  opacity: 0.42;
  filter: saturate(0.82) contrast(1.02);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.45) 40%, #000 100%);
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.45) 40%, #000 100%);
  pointer-events: none;
}
@media (max-width: 720px) {
  .home-main-content--overview .home-main-toolbar::after {
    display: none;
  }
}
.home-main-toolbar__title {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  font-weight: 700;
  color: #fff;
}
.home-main-toolbar__eyebrow {
  display: block;
  margin-bottom: 4px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}
.home-main-toolbar__greet {
  color: var(--muted);
  font-size: 0.86rem;
}
.home-main-toolbar__user {
  color: #fff;
  font-weight: 600;
}

.home-admin-banner {
  border: 1px solid var(--accent-line) !important;
  border-left: 3px solid var(--accent) !important;
  background: linear-gradient(90deg, rgba(255, 42, 42, 0.1), rgba(15, 15, 19, 0.92)) !important;
}
.home-admin-banner__title {
  color: var(--accent);
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.home-hub__title {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
}
.home-hub__tile {
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--inset);
  transition: border-color 0.15s ease, background 0.15s ease;
}
.home-hub__tile:hover {
  border-color: var(--accent-line);
  background: rgba(255, 42, 42, 0.07);
}
.home-hub__tile-icon {
  filter: none;
}
.home-hub__tile-label {
  font-weight: 600;
}
.home-hub__tile-hint {
  color: var(--muted-2);
}
.home-quick-link__label,
.home-support-btn__label {
  font-weight: 600;
}
.home-quick-link__hint,
.home-support-btn__hint {
  color: var(--muted-2);
}
/* Sidebar panels — the legacy mint-green accent is replaced by neutral glass. */
.online-title,
.home-following-panel .home-section-title {
  font-family: var(--font-display);
  color: var(--muted) !important;
  letter-spacing: 0.12em;
  border-bottom-color: var(--border) !important;
}
.online-user {
  border-radius: var(--radius-sm) !important;
  border: 1px solid var(--border) !important;
  background: var(--inset) !important;
}
a.online-user:hover,
.online-user:hover {
  border-color: var(--accent-line) !important;
  background: rgba(255, 42, 42, 0.07) !important;
  transform: none !important;
}
.online-avatar {
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: none;
}
.online-name {
  font-weight: 600;
}
.home-empty-state {
  color: var(--muted-2);
}

/* ==========================================================================
   11. FEED / PŘÍSPĚVKY — v4-sys-02 (top-right)
   ========================================================================== */
.feed-stage,
.prispevky-feed {
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  background: var(--panel) !important;
}
.prispevky-feed__list .card.glass,
.post-card,
.feed-card {
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  background: rgba(19, 19, 24, 0.92) !important;
  box-shadow: none !important;
}
.post-card:hover {
  border-color: rgba(255, 255, 255, 0.14) !important;
}
.post-card__actions .like-btn.is-liked,
.post-card__like.is-active,
.post-card .is-liked {
  color: var(--accent) !important;
}
.feed-fab {
  border: 0 !important;
  background: var(--accent) !important;
  color: #fff !important;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.45) !important;
}
.feed-fab:hover {
  background: var(--accent-hi) !important;
}

/* --- Hlavička sekce Příspěvky: název, přepínač zobrazení, nový příspěvek --- */
.ks-feed-head {
  padding: clamp(14px, 1.6vw, 20px) clamp(16px, 1.8vw, 22px);
  margin-bottom: var(--sp-3);
}
.ks-feed-head__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  flex-wrap: wrap;
}
.ks-feed-head__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--text);
}
.ks-feed-head__actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.ks-viewtoggle {
  display: inline-flex;
  padding: 3px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: rgba(0, 0, 0, 0.35);
}
.ks-viewtoggle__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 30px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.ks-viewtoggle__btn svg {
  width: var(--icon-sm);
  height: var(--icon-sm);
  display: block;
}
.ks-viewtoggle__btn:hover {
  color: #fff;
}
.ks-viewtoggle__btn.is-active {
  background: var(--accent);
  color: #fff;
}
.ks-feed-head__new {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: var(--control-h);
  padding: 0 16px;
  font-size: var(--fs-sm);
}
.ks-feed-head__new svg {
  width: var(--icon-sm);
  height: var(--icon-sm);
  display: block;
}
.ks-feed-head__filters {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  flex-wrap: wrap;
  margin-top: var(--sp-3);
}
.ks-feed-tabs {
  display: inline-flex;
  gap: var(--sp-3);
}
.ks-feed-tab {
  position: relative;
  padding: 6px 2px 9px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
}
.ks-feed-tab::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  border-radius: 2px;
  background: transparent;
}
.ks-feed-tab:hover {
  color: rgba(255, 255, 255, 0.86);
}
.ks-feed-tab.is-active {
  color: #fff;
}
.ks-feed-tab.is-active::after {
  background: var(--accent);
}
.ks-feed-pills {
  display: inline-flex;
  gap: 8px;
}
.ks-feed-pill {
  height: var(--control-h-sm);
  padding: 0 15px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--muted);
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.ks-feed-pill:hover {
  color: #fff;
  border-color: var(--border-2);
}
.ks-feed-pill.is-active {
  border-color: transparent;
  background: var(--accent);
  color: #fff;
}

/* --- Mřížka příspěvků (v4-sys-02) ---------------------------------------- */
.dash-page--prispevky.is-grid-view .prispevky-feed {
  max-width: none !important;
  width: 100%;
  border: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  min-height: 0 !important;
}
.prispevky-feed__list.is-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 255px), 1fr));
  gap: clamp(12px, 1.2vw, 18px);
  align-items: start;
  overflow: visible !important;
  min-height: 0 !important;
}
.prispevky-feed__list.is-grid .post-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0 !important;
}
.prispevky-feed__list.is-grid .post-card__header {
  padding: 11px 13px !important;
}
.prispevky-feed__list.is-grid .post-card__avatar {
  width: 32px !important;
  height: 32px !important;
}
.prispevky-feed__list.is-grid .post-card__name {
  font-size: var(--fs-xs) !important;
}
.prispevky-feed__list.is-grid .post-card__time {
  font-size: 0.68rem !important;
}
.prispevky-feed__list.is-grid .post-card__body {
  padding: 0 !important;
  display: flex;
  flex-direction: column;
}
.prispevky-feed__list.is-grid .post-card__text {
  order: 2;
  margin: 0 !important;
  padding: 11px 13px 0 !important;
  font-size: var(--fs-sm) !important;
  line-height: 1.45 !important;
  color: rgba(255, 255, 255, 0.82);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.prispevky-feed__list.is-grid .post-card__media {
  order: 1;
  aspect-ratio: 4 / 3 !important;
  height: auto !important;
  max-height: none !important;
  border-radius: 0 !important;
  overflow: hidden !important;
}
.prispevky-feed__list.is-grid .post-card__media--reel-wrap {
  aspect-ratio: 3 / 4 !important;
}
.prispevky-feed__list.is-grid .post-card__image,
.prispevky-feed__list.is-grid .post-card__video {
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  object-fit: cover !important;
}
.prispevky-feed__list.is-grid .post-card__toolbar {
  margin-top: auto;
  padding: 9px 11px !important;
  gap: 6px !important;
}
.prispevky-feed__list.is-grid .post-toolbar__btn {
  padding: 5px 8px !important;
  font-size: var(--fs-xs) !important;
}
.prispevky-feed__list.is-grid .post-reactions {
  padding: 0 11px 10px !important;
}
.prispevky-feed__list.is-grid .post-card__comments {
  padding: 0 11px 11px !important;
}
.prispevky-feed__list.is-grid .post-card__header-actions .icon-btn {
  width: 26px !important;
  height: 26px !important;
  border-color: transparent !important;
  background: transparent !important;
  color: var(--muted-2) !important;
  font-size: 0.95rem !important;
}
.prispevky-feed__list.is-grid .post-card__header-actions .icon-btn:hover {
  color: #fff !important;
  background: rgba(255, 255, 255, 0.07) !important;
}
.prispevky-feed__list.is-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

/* Prázdný stav feedu — ikona + text + akce (žádný šedý blok). */
.posts-empty {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin: 0 !important;
  padding: clamp(30px, 5vw, 54px) 20px !important;
  border: 1px dashed var(--border-2);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.02);
  color: var(--muted) !important;
  font-size: var(--fs-sm) !important;
  text-align: center;
}
.posts-empty::before {
  content: '';
  width: 54px;
  height: 54px;
  border-radius: 999px;
  border: 1px solid var(--border-2);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.3)' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.6' y='5' width='16.8' height='14' rx='2.4'/%3E%3Cpath d='m5.4 16.2 4-4.2 3.2 3.2 2.6-2.6 3.4 3.6'/%3E%3Ccircle cx='9.2' cy='9.4' r='1.2'/%3E%3C/svg%3E")
      center / 26px 26px no-repeat,
    rgba(255, 255, 255, 0.03);
}

/* ==========================================================================
   12. MESSAGES / CHAT — v4-sys-02 (bottom-left)
   ========================================================================== */
.messenger,
.messenger.ig-dm,
.ig-dm,
.dash-page--chat .dash-page__messenger {
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  background: var(--panel) !important;
  box-shadow: var(--shadow-soft);
}
.messenger__sidebar,
.ig-dm__sidebar {
  border-right: 1px solid var(--border) !important;
  background: rgba(11, 11, 14, 0.6);
}
.messenger__head,
.ig-dm__head {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border) !important;
  background: transparent !important;
  font-family: var(--font-display);
  font-size: 0.74rem !important;
  font-weight: 700;
  letter-spacing: 0.08em !important;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55) !important;
}
.ig-dm__titlebar {
  border-bottom: 1px solid var(--border);
  background: rgba(11, 11, 14, 0.55);
}
.ig-dm__peer {
  font-weight: 600;
}
.messenger__messages,
.ig-dm__thread {
  background: rgba(0, 0, 0, 0.18);
}

/* --- Conversation search (filters server-side via fetch_conversations.php?q=) */
.ig-dm__search {
  position: relative;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
}
.ig-dm__search-ico {
  position: absolute;
  left: 24px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  color: var(--muted-2);
  pointer-events: none;
}
.ig-dm__search-ico svg {
  width: var(--icon-sm);
  height: var(--icon-sm);
  display: block;
}
.ig-dm__search-input {
  width: 100%;
  height: var(--control-h-sm);
  padding: 0 12px 0 34px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.4);
  color: var(--text);
  font: inherit;
  font-size: var(--fs-sm);
  outline: none;
}
.ig-dm__search-input:focus {
  border-color: var(--accent-line);
  box-shadow: var(--ring);
}
.ig-dm__search-input::-webkit-search-cancel-button {
  filter: invert(1) opacity(0.5);
}

/* --- Conversation rows: avatar + name + snippet + time + unread badge ------ */
.messenger .ig-dm-row,
.ig-dm .ig-dm-row,
.ig-dm-row.ig-dm-row__open-chat {
  display: flex !important;
  align-items: center;
  gap: 11px;
  width: 100% !important;
  height: auto !important;
  padding: 11px 13px !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease;
}
.messenger .ig-dm-row:hover,
.ig-dm .ig-dm-row:hover {
  background: rgba(255, 255, 255, 0.045) !important;
}
.messenger .ig-dm-row.is-active,
.ig-dm .ig-dm-row.is-active {
  background: rgba(255, 42, 42, 0.11) !important;
  box-shadow: inset 2px 0 0 var(--accent);
}
.ig-dm-row__avatar {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 1px solid var(--border-2);
  object-fit: cover;
}
.ig-dm-row__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1 1 auto;
  min-width: 0;
}
.ig-dm-row__name {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0.005em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ig-dm-row__snippet {
  color: var(--muted-2);
  font-size: var(--fs-xs);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ig-dm-row.is-unread .ig-dm-row__snippet {
  color: rgba(255, 255, 255, 0.78);
  font-weight: 500;
}
.ig-dm-row__meta {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
}
.ig-dm-row__time {
  color: var(--muted-2);
  font-size: var(--fs-xs);
  white-space: nowrap;
}
.ig-dm-row__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1;
}

/* --- "Nová zpráva" (opens user picker wired to actions/search_mentions.php) */
.ig-dm__sidebar-foot {
  flex: 0 0 auto;
  padding: 11px 12px;
  border-top: 1px solid var(--border);
  background: rgba(0, 0, 0, 0.3);
}
.ig-dm__new {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: var(--control-h);
  border: 1px solid var(--accent-line);
  border-radius: var(--radius-sm);
  background: rgba(255, 42, 42, 0.1);
  color: #fff;
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.ig-dm__new:hover {
  border-color: var(--accent);
  background: var(--accent);
}
.ig-dm__new svg {
  width: var(--icon-sm);
  height: var(--icon-sm);
  display: block;
}
.ks-dm-new__list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 12px;
  max-height: 300px;
  overflow-y: auto;
}
.ks-dm-new__item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.03);
  color: var(--text);
  font: inherit;
  font-size: var(--fs-sm);
  text-align: left;
  cursor: pointer;
}
.ks-dm-new__item:hover {
  border-color: var(--accent-line);
  background: rgba(255, 42, 42, 0.1);
}
.ks-dm-new__item img {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  object-fit: cover;
  border: 1px solid var(--border-2);
}
.ks-dm-new__hint {
  margin: 12px 0 0;
  color: var(--muted-2);
  font-size: var(--fs-sm);
}

/* Messenger vyplní dostupnou výšku — seznam vlevo, vlákno vpravo, bez malého okna. */
@media (min-width: 721px) {
  .dash-page--chat {
    min-height: calc(100dvh - 88px);
    height: calc(100dvh - 88px);
    max-height: calc(100dvh - 88px);
  }
  .dash-page--chat .messenger.ig-dm {
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
  }
}

/* --- Thread: bubbles with time, empty state ------------------------------- */
.ig-dm__thread .ig-msg__who {
  display: none;
}
.ig-msg {
  position: relative;
  font-size: var(--fs-sm) !important;
  line-height: 1.5 !important;
}
.ig-msg__time {
  display: block;
  margin-top: 4px;
  font-size: 0.66rem;
  letter-spacing: 0.02em;
  text-align: right;
  opacity: 0.62;
}
.ig-msg--them .ig-msg__time {
  text-align: left;
}
.ig-msg__seen {
  display: block;
  margin-top: 2px;
  font-size: 0.62rem;
  letter-spacing: 0.02em;
  text-align: right;
  opacity: 0.55;
}
.ig-dm__empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: auto;
  padding: 20px;
  text-align: center;
}
.ig-dm__empty-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border: 1px solid var(--border-2);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.03);
  color: rgba(255, 255, 255, 0.28);
}
.ig-dm__empty-ico svg {
  width: 26px;
  height: 26px;
}
.ig-dm__empty-state .ig-dm__empty {
  margin: 0 !important;
  font-size: var(--fs-sm) !important;
}
.ig-dm__attach-btn svg,
.emoji-btn svg,
.ig-dm__send svg {
  width: var(--icon);
  height: var(--icon);
  display: block;
}
.ig-dm__attach-btn,
.emoji-btn {
  color: var(--muted);
}
.ig-dm__attach:hover .ig-dm__attach-btn,
.emoji-btn:hover {
  color: #fff;
}
/* Own bubble = solid red, peer bubble = dark grey (mockup). */
.messenger__bubble--me,
.ig-dm__bubble--me,
.ig-dm__msg--me .ig-dm__bubble,
.msg--me .msg__bubble {
  border: 0 !important;
  background: var(--accent) !important;
  color: #fff !important;
}
.messenger__bubble,
.ig-dm__bubble {
  border: 1px solid var(--border);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.05);
}
.messenger__composer,
.ig-dm__composer {
  border-top: 1px solid var(--border);
  background: rgba(11, 11, 14, 0.6);
}
.messenger__input,
.ig-dm__input {
  border-radius: var(--radius-sm) !important;
  border: 1px solid var(--border) !important;
  background: rgba(0, 0, 0, 0.42) !important;
}
.ig-dm__send {
  border: 0 !important;
  border-radius: 999px !important;
  background: var(--accent) !important;
  color: #fff !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}
.ig-dm__send:hover {
  background: var(--accent-hi) !important;
}
.emoji-btn {
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.04);
}
/* Unread counter on the conversation list (red circle in mockup). */
.ig-dm-row__badge,
.ig-dm__unread,
.conv-unread {
  background: var(--accent) !important;
  color: #fff !important;
  border: 0 !important;
}

/* Floating internal mini chat */
.mini-chat__panel {
  border: 1px solid var(--border) !important;
  border-bottom: 0 !important;
  border-radius: var(--radius) var(--radius) 0 0 !important;
  background: rgba(12, 12, 15, 0.96) !important;
  box-shadow: 0 -14px 44px rgba(0, 0, 0, 0.55) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.mini-chat__head {
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}
.mini-chat__head strong {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.02em;
}
.mini-chat__input {
  border-radius: var(--radius-sm);
  border-color: var(--border);
  background: rgba(0, 0, 0, 0.42);
}
.mini-chat__input:focus {
  outline: none;
  border-color: var(--accent-line);
  box-shadow: var(--ring);
}
.mini-chat__send {
  border-radius: var(--radius-sm);
  font-weight: 700;
}
.mini-chat__messages,
.notif-panel__list,
.ig-dm__thread,
.ig-dm__list {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 42, 42, 0.3) transparent;
}
.mini-chat__messages::-webkit-scrollbar,
.notif-panel__list::-webkit-scrollbar,
.ig-dm__thread::-webkit-scrollbar,
.ig-dm__list::-webkit-scrollbar {
  width: 8px;
}
.mini-chat__messages::-webkit-scrollbar-thumb,
.notif-panel__list::-webkit-scrollbar-thumb,
.ig-dm__thread::-webkit-scrollbar-thumb,
.ig-dm__list::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(255, 42, 42, 0.28);
}

/* ==========================================================================
   13. PROFILE — v4-sys-02 (bottom-right)
   ========================================================================== */
.ig-profile-header,
.profile-hero,
.profile-public-card,
.dashboard-user-header {
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  background:
    radial-gradient(700px 240px at 100% 0%, rgba(255, 42, 42, 0.1), transparent 60%),
    var(--panel) !important;
}
.ig-profile-header__avatar,
.profile-avatar,
.settings-avatar,
.profile-hero__avatar {
  border: 2px solid var(--accent) !important;
  box-shadow: none !important;
}
.ig-profile-header__name,
.profile-hero__name {
  font-family: var(--font-display) !important;
  font-size: 1.25rem;
  font-weight: 700 !important;
  color: #fff;
}
.ig-profile-header__handle {
  color: var(--muted);
  font-size: 0.84rem;
}
.ig-profile-header__actions .btn-accent,
.profile-hero__btn {
  border: 0 !important;
  border-radius: 8px !important;
  background: var(--accent) !important;
  color: #fff !important;
  font-weight: 600 !important;
}
.ig-profile-header__actions .btn-accent:hover,
.profile-hero__btn:hover {
  background: var(--accent-hi) !important;
}
.ig-profile-header__actions .btn-ghost,
.ig-profile-header__actions .btn:not(.btn-accent) {
  background: rgba(255, 255, 255, 0.04) !important;
  color: rgba(255, 255, 255, 0.9) !important;
  border: 1px solid var(--border) !important;
}
.ig-profile-header__actions #follow-btn.follow-btn--following,
.ig-profile-header__actions #follow-btn.btn-ghost {
  background: rgba(255, 255, 255, 0.04) !important;
  color: #fff !important;
  border: 1px solid var(--border) !important;
}
.ig-profile-header__actions .btn-ghost:hover,
.ig-profile-header__actions .btn:not(.btn-accent):hover,
.ig-profile-header__actions #follow-btn.follow-btn--following:hover {
  background: rgba(255, 62, 62, 0.12) !important;
  border-color: rgba(255, 62, 62, 0.45) !important;
}
.profile-kv__row {
  border-color: rgba(255, 255, 255, 0.06) !important;
}
.profile-kv dt {
  color: var(--muted-2);
  font-size: 0.76rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.profile-kv dd {
  color: rgba(255, 255, 255, 0.9);
}
.ig-profile-hint,
.ks-profile-privacy-lead {
  border: 1px solid var(--border) !important;
  border-left: 2px solid var(--accent-line) !important;
  background: var(--inset) !important;
  color: var(--muted);
  font-size: 0.82rem;
}
.profile-posts-list,
.ks-profile-posts-feed {
  min-width: 0;
}

/* --- Dvousloupcový profil: obsah + pravý panel (v4-sys-02) --------------- */
.ks-profile-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  flex-wrap: wrap;
}
.dash-page--profil > .dash-page__head.ks-profile-head {
  max-width: none;
}
.ks-profile-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(280px, 26vw, 340px);
  gap: clamp(14px, 1.4vw, 20px);
  align-items: start;
  max-width: none !important;
}
.ks-profile-main {
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 1.2vw, 18px);
  min-width: 0;
}
.ks-profile-rail {
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 1.2vw, 18px);
  min-width: 0;
}
.ks-profile-card {
  gap: clamp(16px, 1.8vw, 24px) !important;
  padding: clamp(18px, 1.8vw, 24px) !important;
}
.ks-profile-card .ig-profile-header__avatar {
  width: clamp(72px, 7vw, 96px) !important;
  height: clamp(72px, 7vw, 96px) !important;
}
.ks-profile-bio {
  margin: 8px 0 0;
  max-width: 62ch;
  color: rgba(255, 255, 255, 0.78);
  font-size: var(--fs-sm);
  line-height: 1.55;
}
.ks-profile-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}
.ks-profile-meta li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--muted);
  font-size: var(--fs-xs);
}
.ks-profile-meta__ico svg {
  width: var(--icon-sm);
  height: var(--icon-sm);
  display: block;
  color: var(--muted-2);
}
.ks-profile-stats {
  display: flex;
  gap: clamp(20px, 3vw, 44px);
  margin-top: clamp(14px, 1.6vw, 20px);
  padding-top: clamp(12px, 1.4vw, 16px);
  border-top: 1px solid var(--border);
}
.ks-profile-stats--pills {
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.dash-page--profil .stat-pill {
  appearance: none;
  font: inherit;
  color: inherit;
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.dash-page--profil .stat-pill strong {
  font-weight: 800;
  letter-spacing: 0.3px;
  color: #fff;
}
.dash-page--profil .stat-pill span {
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.85rem;
  font-weight: 700;
}
.dash-page--profil .stat-pill--clickable:hover {
  background: rgba(255, 62, 62, 0.16);
  border-color: rgba(255, 62, 62, 0.45);
  transform: translateY(-1px);
}
.ks-profile-head__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.ks-profile-stat--btn {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
}
.ks-profile-stat--btn:hover .ks-profile-stat__num {
  color: var(--accent);
}
.ks-profile-card .ig-profile-header__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}
.dash-page--profil .ks-profile-card .ig-profile-header__actions .btn,
.dash-page--profil .ks-profile-card .ig-profile-header__actions .btn-accent {
  border-radius: 8px !important;
  min-height: 38px;
  padding: 8px 14px !important;
}
.ks-profile-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ks-profile-stat__num {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 1.6vw, 1.35rem);
  font-weight: 800;
  color: #fff;
  line-height: 1.1;
}
.ks-profile-stat__lbl {
  color: var(--muted-2);
  font-size: var(--fs-xs);
}

/* --- Pravý panel: karty se seznamy -------------------------------------- */
.ks-rail-card {
  padding: clamp(14px, 1.4vw, 18px) !important;
}
.ks-rail-card .home-section-title {
  display: block;
  margin: 0 0 12px;
}
.ks-rail-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ks-rail-list__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.86);
  font-size: var(--fs-sm);
  line-height: 1.4;
}
.ks-rail-list__item:last-child {
  border-bottom: 0;
}
.ks-rail-list__text {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
}
.ks-rail-link {
  color: rgba(255, 255, 255, 0.88);
  text-decoration: none;
}
.ks-rail-link:hover {
  color: var(--accent);
}
.ks-rail-ico {
  flex: 0 0 auto;
  display: inline-flex;
  color: var(--accent);
}
.ks-rail-ico svg {
  width: var(--icon-sm);
  height: var(--icon-sm);
  display: block;
}
.ks-rail-avatar {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  object-fit: cover;
  border: 1px solid var(--border-2);
}
.ks-rail-tag {
  flex: 0 0 auto;
  color: var(--muted-2);
  font-size: var(--fs-xs);
}
.ks-rail-dot {
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--accent);
}
.ks-rail-time {
  flex: 0 0 auto;
  color: var(--muted-2);
  font-size: 0.68rem;
  white-space: nowrap;
}
.ks-rail-list--activity .ks-rail-list__text {
  font-size: var(--fs-xs);
  color: rgba(255, 255, 255, 0.78);
}
.ks-rail-empty {
  margin: 0;
  color: var(--muted-2);
  font-size: var(--fs-sm);
  line-height: 1.5;
}
.ks-rail-cta {
  display: block;
  margin-top: 12px;
  text-align: center;
}

/* --- Příspěvky na profilu — stejné zobrazení jako sekce Příspěvky -------- */
.dash-page--profil .profile-posts-stage.prispevky-feed {
  max-width: none !important;
  width: 100%;
  border: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  min-height: 0 !important;
  margin-top: clamp(6px, 1vw, 12px);
}
.ks-profile-posts__head {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin-bottom: var(--sp-3);
}
.ks-profile-posts__head .home-section-title {
  margin: 0;
  flex: 0 0 auto;
}
.ks-profile-posts__head .ks-viewtoggle {
  margin-left: auto;
}
.ks-profile-posts__new {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.ks-profile-posts__new svg {
  width: var(--icon-sm);
  height: var(--icon-sm);
  display: block;
}
.ks-profile-posts-feed.is-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 255px), 1fr));
  gap: clamp(12px, 1.2vw, 18px);
  align-items: start;
  max-width: none !important;
  width: 100%;
}
.ks-profile-posts-feed.is-grid .profile-post-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0 !important;
}
.ks-profile-posts-feed.is-grid .profile-post-card__head {
  padding: 11px 13px !important;
}
.ks-profile-posts-feed.is-grid .profile-post-card__body {
  display: flex;
  flex-direction: column;
  padding: 0 !important;
}
.ks-profile-posts-feed.is-grid .profile-post-card__body > p {
  order: 2;
  margin: 0 !important;
  padding: 11px 13px 0 !important;
  font-size: var(--fs-sm) !important;
  line-height: 1.45 !important;
  color: rgba(255, 255, 255, 0.82);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ks-profile-posts-feed.is-grid .profile-post-card__media {
  order: 1;
  aspect-ratio: 4 / 3 !important;
  height: auto !important;
  max-height: none !important;
  overflow: hidden !important;
  border-radius: 0 !important;
}
.ks-profile-posts-feed.is-grid .profile-post-card__media.ks-post-media--reel {
  aspect-ratio: 3 / 4 !important;
}
.ks-profile-posts-feed.is-grid .profile-post-card__media img,
.ks-profile-posts-feed.is-grid .profile-post-card__media video {
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  object-fit: cover !important;
}
.ks-profile-posts-feed.is-grid .post-card__toolbar {
  margin-top: auto;
  padding: 9px 11px !important;
  gap: 6px !important;
}
.ks-profile-posts-feed.is-grid .post-reactions {
  padding: 0 11px 10px !important;
}
.ks-profile-posts-feed.is-list {
  display: flex !important;
  flex-direction: column;
  gap: var(--sp-3);
  max-width: var(--ks-feed-max, min(620px, 100%));
  margin-left: auto;
  margin-right: auto;
}
.ks-profile-posts-feed.is-list .profile-post-card {
  overflow: hidden;
}
.ks-profile-posts-feed.is-list .profile-post-card__media {
  aspect-ratio: auto !important;
  max-height: min(72vh, 640px);
}
.ks-profile-posts-feed.is-list .profile-post-card__media img,
.ks-profile-posts-feed.is-list .profile-post-card__media video {
  width: 100%;
  height: auto;
  max-height: min(72vh, 640px);
  object-fit: contain;
}
@media (max-width: 1080px) {
  .ks-profile-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ==========================================================================
   14. GROUPS — v4-sys-03
   ========================================================================== */
.groups-tabs-bar {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--panel);
}
.groups-tabs-bar__link {
  border-radius: 8px;
  border: 1px solid transparent;
  color: rgba(255, 255, 255, 0.65);
  font-weight: 500;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.groups-tabs-bar__link:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.04);
}
.groups-tabs-bar__link.is-active {
  color: #fff !important;
  border-color: transparent !important;
  background: transparent !important;
  border-bottom: 2px solid var(--accent) !important;
  border-radius: 2px;
  font-weight: 600;
}
.groups-tabs-bar__label {
  color: var(--muted-2);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.groups-browse-card,
.groups-my-card {
  overflow: hidden;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  background: rgba(19, 19, 24, 0.92) !important;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.groups-browse-card:hover,
.groups-my-card:hover {
  border-color: var(--accent-line) !important;
  transform: translateY(-2px);
}
.groups-browse-card__name,
.groups-my-card__name {
  font-family: var(--font-display);
  font-weight: 700;
}

/* --- Moje skupiny: hlavička s hledáním, kartová mřížka (v4-sys-03) ------- */
.ks-groups-mine__head {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.ks-groups-mine__head .dash-section-title {
  margin: 0;
  flex: 0 0 auto;
}
.ks-groups-search {
  position: relative;
  flex: 1 1 200px;
  max-width: 300px;
}
.ks-groups-search__ico {
  position: absolute;
  left: 11px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  color: var(--muted-2);
  pointer-events: none;
}
.ks-groups-search__ico svg {
  width: var(--icon-sm);
  height: var(--icon-sm);
  display: block;
}
.ks-groups-search__input {
  width: 100%;
  height: var(--control-h-sm);
  padding: 0 12px 0 34px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.38);
  color: var(--text);
  font: inherit;
  font-size: var(--fs-sm);
  outline: none;
}
.ks-groups-search__input:focus {
  border-color: var(--accent-line);
  box-shadow: var(--ring);
}
.ks-groups-mine__new {
  margin-left: auto;
}
.ks-groups-mine__lead {
  margin: 0 0 var(--sp-4) !important;
  font-size: var(--fs-sm);
  color: var(--muted) !important;
}
.groups-my-cards {
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)) !important;
  gap: clamp(12px, 1.2vw, 16px) !important;
}
.groups-my-cards .groups-my-card {
  display: flex !important;
  flex-direction: column;
  gap: 0 !important;
  padding: 0 !important;
  overflow: hidden;
}
.groups-card__cover {
  display: block;
  position: relative;
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, rgba(255, 42, 42, 0.18), rgba(30, 30, 38, 0.9));
  overflow: hidden;
}
.groups-my-cards .groups-card__avatar {
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
  border-radius: 0 !important;
  object-fit: cover;
}
.groups-my-cards .groups-card__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 13px 14px 14px;
}
.groups-my-cards .groups-card__title {
  margin: 0 !important;
  font-family: var(--font-display);
  font-size: var(--fs-base) !important;
  font-weight: 700;
  color: #fff;
}
.groups-card__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 !important;
  color: var(--muted-2);
  font-size: var(--fs-xs);
}
.groups-card__members {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.groups-card__members svg {
  width: 14px;
  height: 14px;
  display: block;
}
.groups-my-cards .groups-card__bio {
  margin: 2px 0 0 !important;
  font-size: var(--fs-xs) !important;
  line-height: 1.45 !important;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.groups-card__cta {
  margin-top: 10px;
  width: 100%;
  text-align: center;
}
.ks-groups-none {
  margin: var(--sp-3) 0 0;
  font-size: var(--fs-sm);
}

/* Univerzální prázdný stav (ikona + titulek + text + akce). */
.ks-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: clamp(28px, 4vw, 46px) 20px;
  border: 1px dashed var(--border-2);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.02);
  text-align: center;
}
.ks-empty-state__ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  margin-bottom: 4px;
  border: 1px solid var(--border-2);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.03);
  color: rgba(255, 255, 255, 0.3);
}
.ks-empty-state__ico svg {
  width: 26px;
  height: 26px;
  display: block;
}
.ks-empty-state__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-base);
  font-weight: 700;
  color: rgba(255, 255, 255, 0.9);
}
.ks-empty-state__text {
  margin: 0 0 6px;
  max-width: 46ch;
  color: var(--muted);
  font-size: var(--fs-sm);
  line-height: 1.55;
}
.groups-browse-card__meta,
.groups-my-card__meta {
  color: var(--muted-2);
  font-size: 0.76rem;
}
.groups-quick-card {
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  background: rgba(19, 19, 24, 0.92) !important;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.groups-quick-card:hover {
  border-color: var(--accent-line) !important;
  transform: translateY(-2px);
}
.groups-quick-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 1px solid var(--accent-line);
  background: var(--accent-soft);
  font-size: 0.95rem;
}
.groups-quick-card__label {
  font-family: var(--font-display);
  font-weight: 700;
}
.groups-quick-card__hint {
  color: var(--muted-2);
  font-size: 0.74rem;
}
.group-manage-panel,
.group-location-panel,
details.card.glass {
  border-radius: var(--radius);
  overflow: hidden;
}
.group-manage-panel[open],
.group-location-panel[open],
details.card.glass[open] {
  border-color: var(--accent-line) !important;
}
.group-manage-panel__summary,
.group-location-panel__summary,
.projekt-wish-cat__summary,
.group-posts-compose__summary,
.group-ann-compose__summary,
details.card.glass > summary {
  cursor: pointer;
  list-style: none;
  border-radius: var(--radius-sm);
  font-weight: 600;
  letter-spacing: 0;
  transition: background 0.15s ease, color 0.15s ease;
}
details.card.glass > summary::-webkit-details-marker,
.group-manage-panel__summary::-webkit-details-marker,
.projekt-wish-cat__summary::-webkit-details-marker {
  display: none;
}
.group-manage-panel__summary:hover,
.group-location-panel__summary:hover,
.projekt-wish-cat__summary:hover,
.group-posts-compose__summary:hover,
.group-ann-compose__summary:hover {
  background: rgba(255, 42, 42, 0.07);
  color: #fff;
}
.group-manage-panel__summary:focus-visible,
.group-location-panel__summary:focus-visible,
details.card.glass > summary:focus-visible {
  outline: none;
  box-shadow: var(--ring);
}
/* Section accordions get the same red-bar section header as static cards */
.group-manage-panel > .group-manage-panel__summary,
.group-location-panel > .group-location-panel__summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 15px 18px !important;
  font-family: var(--font-display);
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em;
  color: #fff;
}
.group-manage-panel > .group-manage-panel__summary::before,
.group-location-panel > .group-location-panel__summary::before {
  content: "" !important;
  width: 3px;
  height: 15px;
  margin: 0 !important;
  border-radius: 2px;
  background: var(--accent);
  opacity: 1 !important;
  transform: none !important;
}
.group-manage-panel > .group-manage-panel__summary::after,
.group-location-panel > .group-location-panel__summary::after {
  content: "";
  flex: 0 0 auto;
  margin-left: auto;
  width: 7px;
  height: 7px;
  border-right: 2px solid var(--muted-2);
  border-bottom: 2px solid var(--muted-2);
  transform: rotate(45deg) translateY(-1px);
  transition: transform 0.18s ease, border-color 0.18s ease;
}
.group-manage-panel[open] > .group-manage-panel__summary::after,
.group-location-panel[open] > .group-location-panel__summary::after {
  transform: rotate(-135deg) translateY(-1px);
  border-color: var(--accent);
}
.group-manage-panel[open] > .group-manage-panel__summary,
.group-location-panel[open] > .group-location-panel__summary {
  border-bottom: 1px solid var(--border) !important;
}

/* ==========================================================================
   15. FORUM — v4-extra-02
   ========================================================================== */
.forum-page h1,
.forum-page h2 {
  font-family: var(--font-display);
  font-weight: 700;
}
.forum-cat-grid {
  gap: 10px;
}
.forum-cat-tile {
  position: relative;
  padding: 15px 16px !important;
  border-radius: var(--radius) !important;
  border: 1px solid var(--border) !important;
  background: rgba(19, 19, 24, 0.92) !important;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}
.forum-cat-tile:hover {
  border-color: var(--accent-line) !important;
  background: rgba(255, 42, 42, 0.05) !important;
  transform: translateY(-1px);
}
.forum-cat-tile__name {
  font-family: var(--font-display);
  font-size: 0.98rem !important;
  font-weight: 700;
}
.forum-cat-tile__count {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted-2);
  font-size: 0.74rem;
}
.forum-cat-tile__count::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: var(--accent);
}
.forum-topic-list__item {
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.forum-topic-list__link {
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
}
.forum-topic-list__link:hover {
  color: var(--accent);
}
.forum-topic-list__meta {
  color: var(--muted-2);
  font-size: 0.74rem;
}
.forum-post {
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  background: rgba(19, 19, 24, 0.92) !important;
}
.forum-post__meta {
  color: var(--muted-2);
}
.forum-breadcrumb {
  color: var(--muted-2);
  font-size: 0.78rem;
}
.forum-breadcrumb a {
  color: var(--accent);
}
.forum-pager a,
.forum-pager span {
  border-radius: 8px;
  border: 1px solid var(--border);
}
.forum-pager .is-active,
.forum-pager a[aria-current="page"] {
  border-color: var(--accent) !important;
  background: var(--accent-soft) !important;
  color: #fff !important;
}

/* ==========================================================================
   16. SETTINGS / ACCOUNT — v4-extra-04
   ========================================================================== */
.section-body.settings-body > .card.glass,
.settings-body .card.glass {
  padding: 20px;
}
.settings-hint {
  color: var(--muted-2);
  font-size: 0.8rem;
  line-height: 1.5;
}
.settings-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
}
.settings-check:hover {
  border-color: rgba(255, 255, 255, 0.16) !important;
}
.settings-avatar-row {
  gap: 14px;
  align-items: center !important;
  min-height: 92px;
}
.settings-avatar-row > .settings-avatar {
  flex: 0 0 auto;
  align-self: center;
}
.ks-account-panel__title {
  font-family: var(--font-display);
  font-weight: 700;
}

/* --- Můj účet / Nastavení — v4-extra-04 ---------------------------------- */
.section-rail__link {
  display: flex !important;
  align-items: center;
  gap: 10px;
}
.section-rail__ico {
  flex: 0 0 auto;
  display: inline-flex;
  color: currentColor;
  opacity: 0.85;
}
.section-rail__ico svg {
  width: var(--icon-sm);
  height: var(--icon-sm);
  display: block;
}
.section-rail__link.is-active .section-rail__ico {
  color: var(--accent);
  opacity: 1;
}
.ks-settings-lead {
  margin: 4px 0 14px !important;
  max-width: 68ch;
  font-size: var(--fs-sm) !important;
  line-height: 1.55 !important;
  color: var(--muted) !important;
}
.ks-account-panels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
  margin: 0 0 var(--sp-4) !important;
}
.ks-account-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 12px !important;
  text-align: center;
  text-decoration: none;
}
.ks-account-panel__ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  margin-bottom: 2px;
  border: 1px solid var(--border-2);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.03);
  color: rgba(255, 255, 255, 0.72);
}
.ks-account-panel:hover .ks-account-panel__ico {
  border-color: var(--accent-line);
  color: var(--accent);
}
.ks-account-panel__ico svg {
  width: var(--icon);
  height: var(--icon);
  display: block;
}
.ks-account-panel__title {
  margin: 0 !important;
  font-size: var(--fs-sm);
  color: rgba(255, 255, 255, 0.9);
}
.settings-body .field__label {
  font-size: var(--fs-xs) !important;
  color: rgba(255, 255, 255, 0.7) !important;
  letter-spacing: 0.01em;
}
.ks-account-panel__desc {
  margin: 0 !important;
  color: var(--muted-2);
  font-size: var(--fs-xs);
  line-height: 1.4;
}
/* Formuláře v nastavení: čitelná šířka řádku, ne roztažené inputy. */
.settings-body .form.stack {
  max-width: 760px;
}
.settings-body .form-grid-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}
.settings-body .field__input {
  height: auto;
  min-height: var(--control-h);
}
.settings-body textarea.field__input {
  min-height: 92px;
}
/* Visibility rows: on = red accent (single design language), off = neutral. */
.ks-settings-vis-row {
  border-radius: var(--radius-sm) !important;
  border: 1px solid var(--border) !important;
  background: var(--inset);
}
.ks-settings-vis-row--on {
  border-color: var(--accent-line) !important;
  background: rgba(255, 42, 42, 0.07) !important;
}
/* Toggle switches (mockup: red when on, grey when off). */
.ks-switch input:checked + .ks-switch__track,
.switch input:checked + .switch__track,
input[type="checkbox"].ks-toggle:checked {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
}
.ks-file-upload,
.ks-doc-upload,
.upload-drop {
  border: 1px dashed var(--border-2) !important;
  border-radius: var(--radius-sm) !important;
  background: var(--inset) !important;
  transition: border-color 0.15s ease, background 0.15s ease;
  padding: 12px 14px;
}
.ks-file-upload {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ks-file-upload__bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 14px;
}
.ks-file-upload__btn {
  flex-shrink: 0;
  border-radius: 999px;
  padding: 8px 16px;
  font-weight: 700;
  font-size: 0.88rem;
  border: 1px solid var(--border-2);
  background: rgba(0, 0, 0, 0.35);
  color: rgba(255, 255, 255, 0.92);
}
.ks-file-upload__text {
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.72);
  word-break: break-word;
}
html[data-theme="light"] .ks-file-upload {
  background: rgba(255, 255, 255, 0.92) !important;
  border-color: var(--border) !important;
}
html[data-theme="light"] .ks-file-upload__btn {
  background: rgba(255, 255, 255, 0.95);
  color: var(--text);
  border-color: var(--border);
}
html[data-theme="light"] .ks-file-upload__text {
  color: var(--muted) !important;
}
/* Fallback: přímý file input (kde ještě není ks-file-upload) */
input[type="file"].field__input:not(.sr-only),
.field__input[type="file"]:not(.sr-only) {
  padding: 10px 12px !important;
  color: rgba(255, 255, 255, 0.88) !important;
  cursor: pointer;
}
input[type="file"].field__input:not(.sr-only)::file-selector-button,
.field__input[type="file"]:not(.sr-only)::file-selector-button {
  border: 1px solid var(--border-2);
  border-radius: 999px;
  padding: 6px 14px;
  margin-right: 12px;
  background: rgba(0, 0, 0, 0.45);
  color: rgba(255, 255, 255, 0.92);
  font-weight: 600;
  font-size: 0.84rem;
  cursor: pointer;
}
html[data-theme="light"] input[type="file"].field__input:not(.sr-only)::file-selector-button,
html[data-theme="light"] .field__input[type="file"]:not(.sr-only)::file-selector-button {
  background: rgba(255, 255, 255, 0.95);
  color: var(--text);
  border-color: var(--border);
}
.ks-file-upload:hover,
.ks-doc-upload:hover,
.upload-drop:hover {
  border-color: var(--accent-line) !important;
  background: rgba(255, 42, 42, 0.05) !important;
}

/* ==========================================================================
   17. ORDERS / SERVIS / ADMIN — v4-sys-04
   ========================================================================== */
/* KPI tiles — the legacy #00ff00 / #ffcc00 are replaced by v4 status tokens. */
.stat-card {
  position: relative;
  padding: 18px 20px !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  background: var(--panel) !important;
  box-shadow: none !important;
  overflow: hidden;
}
.stat-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--accent);
}
.stat-card--warn::before {
  background: var(--warn);
}
.stat-card--ok::before {
  background: var(--ok);
}
.stat-label {
  color: var(--muted-2);
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  opacity: 1 !important;
}
/* v4-sys-04 keeps the KPI numbers white; only the tile stripe carries status colour. */
.stat-kpi,
.stat-kpi--warn,
.stat-kpi--ok {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.4vw, 1.9rem) !important;
  font-weight: 700 !important;
  color: #fff !important;
}

.orders-table,
.admin-table,
.table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
}
.orders-table th,
.admin-table th,
.table th {
  padding-top: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.025);
  color: var(--muted-2) !important;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.orders-table td,
.admin-table td,
.table td {
  border-color: rgba(255, 255, 255, 0.05) !important;
  font-size: 0.86rem;
}
.orders-table tr:hover td,
.admin-table tr:hover td {
  background: rgba(255, 42, 42, 0.05);
}
.customer-name {
  font-weight: 600;
  color: rgba(255, 255, 255, 0.94);
}
.customer-phone,
.car-sub {
  color: var(--muted-2);
  font-size: 0.76rem;
}
.service-pill {
  display: inline-flex;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.045);
  font-size: 0.74rem;
  font-weight: 600;
}
.status-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.status-select {
  border-radius: 999px !important;
  border: 1px solid var(--border) !important;
  background: rgba(255, 255, 255, 0.045) !important;
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.76rem;
  font-weight: 600;
  padding: 5px 10px !important;
}
.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  flex-shrink: 0;
}
.status-dot--nova {
  background: var(--accent);
  box-shadow: 0 0 0 3px rgba(255, 42, 42, 0.16);
}
.status-dot--prijata {
  background: var(--warn);
  box-shadow: 0 0 0 3px rgba(245, 165, 36, 0.16);
}
.status-dot--vyrizena {
  background: var(--ok);
  box-shadow: 0 0 0 3px rgba(46, 204, 143, 0.16);
}
.order-toggle-btn {
  border-radius: 8px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.7);
}
.order-toggle-btn:hover {
  border-color: var(--accent-line);
  color: #fff;
}
.order-inline-detail {
  border: 1px solid var(--border) !important;
  border-left: 2px solid var(--accent-line) !important;
  background: rgba(0, 0, 0, 0.28) !important;
}
.orders-list > li,
.orders-list__item,
.home-my-orders-list > li {
  list-style: none;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--inset);
  transition: border-color 0.15s ease, background 0.15s ease;
}
.orders-list > li:hover,
.orders-list__item:hover,
.home-my-orders-list > li:hover {
  border-color: var(--accent-line);
  background: rgba(255, 42, 42, 0.05);
}
.orders-list,
.home-my-orders-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-left: 0;
  margin: 0;
}
.orders-list-mount {
  min-width: 0;
}

/* Servis panels / warehouse / docs / invoices */
.servis-warehouse,
.servis-docs,
.servis-docs-saved,
.servis-doc-page,
.servis-panel,
.admin-system,
.gps-panel {
  border-radius: var(--radius);
}
.servis-warehouse__head,
.servis-docs__head,
.servis-docs-saved .dash-section-title {
  border-left: 2px solid var(--accent);
  padding-left: 10px;
}
.servis-docs__card,
.servis-docs__wizard,
.servis-warehouse .card.glass {
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.servis-docs__card:hover,
.servis-warehouse .card.glass:hover {
  border-color: var(--accent-line);
  transform: translateY(-1px);
}

/* Admin role / status chips (v4-sys-04 right column) */
.admin-table .role-admin,
.admin-table .is-admin,
.pill--role-admin {
  border-color: var(--accent) !important;
  background: rgba(255, 42, 42, 0.18) !important;
  color: #fff !important;
}
.admin-table .role-service,
.pill--role-service {
  border-color: var(--accent-line) !important;
  background: rgba(255, 42, 42, 0.08) !important;
}
.is-online,
.status-online {
  color: var(--ok) !important;
}
.is-offline,
.status-offline {
  color: var(--muted-2) !important;
}

/* ==========================================================================
   18. GPS — v4-extra-01
   ========================================================================== */
.gps-map-card,
.groups-map,
.gps-fleet,
.gps-detail {
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  background: var(--panel) !important;
}
.groups-map__search-row,
.gps-map-card .groups-map__head {
  gap: 8px;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.groups-map__search-row .field__input,
#gps-search-q {
  background: rgba(0, 0, 0, 0.5) !important;
  border-color: var(--border) !important;
}
.groups-map__float-bar {
  gap: 8px;
}
/* GPS map: keep the two overlay buttons side by side (they overlapped). */
.gps-map-area,
.gps-map-area.groups-map__map-area {
  position: relative;
  min-height: min(58vh, 640px);
}
.gps-map-area > .groups-map__float-bar {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 500;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  max-width: calc(100% - 20px);
  pointer-events: none;
}
@media (max-width: 720px) {
  .gps-map-area > .groups-map__float-bar {
    top: auto !important;
    bottom: max(10px, env(safe-area-inset-bottom)) !important;
    left: 8px !important;
    right: 8px !important;
    justify-content: center !important;
    max-width: none !important;
  }
  .gps-map-area,
  .gps-map-area.groups-map__map-area,
  .gps-map-card .gps-map-canvas {
    min-height: min(52vh, 520px) !important;
  }
}
.gps-map-area > .groups-map__float-bar > .groups-map__float-btn {
  pointer-events: auto;
}
.groups-map__float-btn {
  border-radius: 8px !important;
  border: 1px solid var(--border-2) !important;
  background: rgba(7, 7, 10, 0.92) !important;
  color: #fff !important;
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.groups-map__float-btn.btn-accent,
#gps-map-fullscreen {
  border: 1px solid var(--accent) !important;
  background: var(--accent) !important;
  box-shadow: none !important;
}
/* PROJEKT / garage visuals: the legacy teal (#00ffc8) accents become v4 red. */
.garage-hero {
  border-color: var(--accent-line) !important;
  box-shadow: inset 0 0 80px rgba(0, 0, 0, 0.65) !important;
}
.garage-hero__glow {
  background:
    radial-gradient(circle at 22% 40%, rgba(255, 42, 42, 0.16) 0%, transparent 42%),
    radial-gradient(circle at 78% 35%, rgba(255, 42, 42, 0.1) 0%, transparent 40%) !important;
}
.garage-hero__hex {
  opacity: 0.16 !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cpath fill='none' stroke='%23ff3e3e' stroke-width='0.8' d='M28 0 L52 14 L52 36 L28 50 L4 36 L4 14 Z'/%3E%3Cpath fill='none' stroke='%23ffffff' stroke-opacity='0.35' stroke-width='0.5' d='M28 50 L52 64 L52 86 L28 100 L4 86 L4 64 Z'/%3E%3C/svg%3E") !important;
}

/* Promo / "AKCE" cards: mint-green and blue rails become the v4 red accent. */
.home-promo-banner,
.ks-promo-card,
.ks-promo-card--web {
  border-left: 3px solid var(--accent) !important;
}
.ks-promo-card__eyebrow,
.ks-promo-card--web .ks-promo-card__eyebrow {
  color: var(--accent) !important;
}

.garage-hero__neon--l {
  background: linear-gradient(180deg, transparent, var(--accent), transparent) !important;
  box-shadow: 0 0 18px rgba(255, 42, 42, 0.7) !important;
}
.garage-hero__neon--r {
  background: linear-gradient(180deg, transparent, var(--accent), transparent) !important;
  box-shadow: 0 0 18px rgba(255, 42, 42, 0.7) !important;
}
.garage-hero__tag {
  color: rgba(255, 255, 255, 0.5) !important;
  text-shadow: none !important;
}
.garage-scene {
  border-color: rgba(255, 42, 42, 0.2) !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5) !important;
}

/* PROJEKT showroom frame: the legacy red→teal gradient becomes a red-only rim. */
.garage-scene-shell {
  padding: 2px !important;
  background: linear-gradient(145deg, rgba(255, 42, 42, 0.5) 0%, rgba(18, 18, 22, 0.95) 42%, rgba(255, 42, 42, 0.22) 100%) !important;
  box-shadow: 0 20px 56px rgba(0, 0, 0, 0.5) !important;
}
.garage-scene-shell__hex {
  background:
    radial-gradient(ellipse 90% 55% at 50% 42%, rgba(255, 42, 42, 0.14) 0%, transparent 55%) !important;
}
.garage-scene-shell__rim {
  background: linear-gradient(90deg, transparent, rgba(255, 42, 42, 0.7), transparent) !important;
  box-shadow: 0 0 18px rgba(255, 42, 42, 0.3) !important;
}

.gps-fleet__title,
.gps-detail__title {
  font-family: var(--font-display);
  font-weight: 700;
}
.gps-fleet__row,
.gps-vehicle-row {
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  transition: border-color 0.15s ease, background 0.15s ease;
}
.gps-fleet__row:hover,
.gps-vehicle-row:hover {
  border-color: var(--border-2);
  background: rgba(255, 255, 255, 0.04);
}
.gps-fleet__row.is-active,
.gps-vehicle-row.is-active {
  border-color: var(--accent) !important;
  background: rgba(255, 42, 42, 0.09) !important;
}
.gps-tab {
  border-radius: 0;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: rgba(255, 255, 255, 0.6);
  font-weight: 500;
}
.gps-tab.is-active {
  border-bottom-color: var(--accent) !important;
  background: transparent !important;
  color: #fff !important;
  font-weight: 600;
}
.leaflet-container {
  border-radius: var(--radius-sm);
  background: #0b0b0e;
}
.leaflet-bar a,
.leaflet-control-zoom a {
  border-color: var(--border) !important;
  background: rgba(12, 12, 15, 0.92) !important;
  color: rgba(255, 255, 255, 0.85) !important;
}

/* ==========================================================================
   19. RENTALS / SALES — v4-extra-03
   Public offer pages: hero band with photo, USP strip, working filter row,
   rental rows (list) / sale cards (grid), designed empty state.
   ========================================================================== */
.ks-offer {
  display: block;
  /* top offset clears the fixed .site-header */
  padding: clamp(86px, 10vh, 116px) 0 clamp(44px, 6vw, 72px);
  background:
    radial-gradient(1000px 460px at 12% -6%, rgba(255, 42, 42, 0.09), transparent 62%),
    var(--bg);
}
.ks-offer__wrap {
  width: 100%;
  max-width: var(--w-app);
  margin: 0 auto;
  padding: 0 clamp(14px, 2.4vw, 26px);
  box-sizing: border-box;
}
.ks-offer__hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin-bottom: clamp(14px, 1.8vw, 20px);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--panel);
}
.ks-offer__hero-media {
  position: absolute;
  inset: 0 0 0 38%;
  z-index: 0;
  background: url("hero-workshop-v4.jpg") center 42% / cover no-repeat;
  opacity: 0.5;
  filter: saturate(0.8) contrast(1.02);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.65) 34%, #000 100%);
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.65) 34%, #000 100%);
}
.ks-offer__hero-body {
  position: relative;
  z-index: 1;
  max-width: 620px;
  padding: clamp(24px, 3.4vw, 42px) clamp(18px, 2.6vw, 34px);
}
.ks-offer__eyebrow {
  display: inline-block;
  margin-bottom: 8px;
  color: var(--accent);
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.ks-offer__title {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  font-weight: 800;
  line-height: 1.14;
  color: #fff;
  text-shadow: none;
}
.ks-offer__lead {
  margin: 0 0 8px;
  max-width: 46ch;
  color: rgba(255, 255, 255, 0.82);
  font-size: var(--fs-ui);
  line-height: 1.6;
}
.ks-offer__note {
  margin: 0;
  max-width: 52ch;
  color: var(--muted-2);
  font-size: var(--fs-sm);
  line-height: 1.55;
}
.ks-offer__hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}
.ks-offer__ghost.btn,
.btn.ks-offer__ghost {
  border: 1px solid var(--border-2) !important;
  background: rgba(255, 255, 255, 0.04) !important;
  color: var(--text) !important;
}
.ks-offer__ghost.btn:hover,
.btn.ks-offer__ghost:hover {
  border-color: var(--accent-line) !important;
  background: rgba(255, 42, 42, 0.1) !important;
  color: #fff !important;
}

/* USP strip */
.ks-offer__usp {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 clamp(16px, 2vw, 22px);
  padding: 0;
  list-style: none;
}
.ks-offer__usp--foot {
  margin: clamp(20px, 2.6vw, 30px) 0 0;
}
.ks-offer__usp-item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 13px 15px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--panel-2);
}
.ks-offer__usp-ico {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--accent-line);
  border-radius: 999px;
  background: rgba(255, 42, 42, 0.1);
  color: var(--accent);
}
.ks-offer__usp-ico svg {
  width: var(--icon);
  height: var(--icon);
  display: block;
}
.ks-offer__usp-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.ks-offer__usp-text strong {
  color: var(--text);
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.3;
}
.ks-offer__usp-text span {
  color: var(--muted-2);
  font-size: var(--fs-xs);
  line-height: 1.35;
}

/* Filter / sort row */
.ks-offer__filters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  align-items: end;
  gap: 10px;
  margin-bottom: 14px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--panel);
}
.ks-offer__filter {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}
.ks-offer__filter-label,
.ks-offer__sort-label {
  color: var(--muted-2);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.ks-offer__filters select.field__input,
.ks-offer__sort select.field__input {
  height: var(--control-h);
  padding: 0 12px;
  font-size: var(--fs-sm);
}
.ks-offer__filter-actions {
  display: flex;
  gap: 8px;
  align-items: end;
}
.ks-offer__filter-actions .btn {
  height: var(--control-h);
  display: inline-flex;
  align-items: center;
}
.ks-offer__toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  padding: 11px 15px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--panel-2);
}
.ks-offer__toolbar--plain {
  border: 0;
  background: none;
  padding: 0 4px;
}
.ks-offer__count {
  color: var(--muted);
  font-size: var(--fs-sm);
}
.ks-offer__count strong {
  color: #fff;
  font-family: var(--font-display);
  font-size: var(--fs-ui);
}
.ks-offer__filter-flag {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 10px;
  border: 1px solid var(--accent-line);
  border-radius: 999px;
  background: rgba(255, 42, 42, 0.1);
  color: #fff;
  font-size: var(--fs-xs);
  font-weight: 600;
}
.ks-offer__sort {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

/* Rental rows (photo left, booking right) */
.ks-offer__rows {
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 1.6vw, 18px);
}
.ks-rental-row {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(300px, 0.95fr);
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--panel);
  transition: border-color 0.15s ease;
}
.ks-rental-row:hover {
  border-color: var(--border-2);
}
.ks-rental-row__media {
  position: relative;
  min-height: 230px;
  background: #0c0c10;
}
.ks-rental-row__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ks-rental-row__media-empty {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.16);
}
.ks-rental-row__media-empty svg {
  width: 74px;
  height: 74px;
}
.ks-rental-row__chips {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.ks-chip {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 9px;
  border: 1px solid var(--border-2);
  border-radius: 6px;
  background: rgba(8, 8, 11, 0.78);
  color: rgba(255, 255, 255, 0.8);
  font-size: var(--fs-xs);
  font-weight: 500;
  white-space: nowrap;
}
.ks-rental-row__body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: clamp(16px, 2vw, 22px);
  border-left: 1px solid var(--border);
}
.ks-rental-row__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 800;
  color: #fff;
  text-shadow: none;
}
.ks-rental-row__sub {
  margin-top: 3px;
  color: var(--muted-2);
  font-size: var(--fs-sm);
}
.ks-rental-row__price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.ks-rental-row__price-sep {
  opacity: 0.45;
  margin: 0 2px;
}
.ks-rental-row__price strong {
  color: var(--accent);
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: 0.01em;
}
.ks-rental-row__price span {
  color: var(--muted-2);
  font-size: var(--fs-sm);
}
.ks-rental-row__desc {
  margin: 0;
  color: var(--muted);
  font-size: var(--fs-sm);
  line-height: 1.55;
  white-space: pre-line;
}
.ks-rental-row__form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: auto;
}
.ks-rental-row__dates {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.ks-rental-row__dates .field__input {
  height: var(--control-h);
  font-size: var(--fs-sm);
}
.ks-rental-row__calc {
  color: var(--muted);
  font-size: var(--fs-sm);
}
.ks-rental-row__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.ks-rental-row__actions .btn {
  height: var(--control-h-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ks-rental-row__book {
  flex: 1 1 100%;
}
.ks-rental-row__guest {
  margin: 0;
  color: var(--muted-2);
  font-size: var(--fs-sm);
  line-height: 1.5;
}

/* Sale grid */
.ks-offer__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 296px), 1fr));
  gap: clamp(12px, 1.6vw, 18px);
}
.ks-sale-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--panel);
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.ks-sale-card:hover {
  border-color: var(--accent-line);
  transform: translateY(-2px);
}
.ks-sale-card__media {
  position: relative;
  aspect-ratio: 16 / 10;
  background: #0c0c10;
}
.ks-sale-card__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ks-sale-card__media-empty {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.16);
}
.ks-sale-card__media-empty svg {
  width: 58px;
  height: 58px;
}
.ks-sale-card__flag {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 4;
  padding: 4px 9px;
  border-radius: 6px;
  background: var(--accent);
  color: #fff;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.02em;
}
.ks-sale-card__body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
  padding: 14px 15px 15px;
}
.ks-sale-card__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.ks-sale-card__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: 700;
  line-height: 1.3;
  color: #fff;
  text-shadow: none;
}
.ks-sale-card__price {
  flex: 0 0 auto;
  color: var(--accent);
  font-family: var(--font-display);
  font-size: var(--fs-ui);
  font-weight: 800;
  white-space: nowrap;
}
.ks-sale-card__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.ks-sale-card__cta {
  margin-top: auto;
  height: var(--control-h-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

/* Sale detail modal */
.ks-sale-detail__gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}
.ks-sale-detail__gallery img {
  width: 100%;
  height: 132px;
  object-fit: cover;
  display: block;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.ks-sale-detail__price strong {
  color: var(--accent);
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 800;
}
.ks-sale-detail__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 10px 0;
}
.ks-sale-detail__meta,
.ks-sale-detail__desc,
.ks-sale-detail__contact {
  margin: 0 0 8px;
  color: var(--muted);
  font-size: var(--fs-sm);
  line-height: 1.6;
}
.ks-sale-detail__desc {
  white-space: pre-line;
}
.ks-sale-detail__contact a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Designed empty state */
.ks-offer__empty {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: clamp(32px, 5vw, 54px) clamp(18px, 3vw, 40px);
  border: 1px dashed var(--border-2);
  border-radius: var(--radius);
  background:
    radial-gradient(520px 220px at 50% 0%, rgba(255, 42, 42, 0.07), transparent 70%),
    var(--panel-2);
  text-align: center;
}
.ks-offer__empty-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 62px;
  height: 62px;
  margin-bottom: 4px;
  border: 1px solid var(--accent-line);
  border-radius: 999px;
  background: rgba(255, 42, 42, 0.08);
  color: var(--accent);
}
.ks-offer__empty-ico svg {
  width: 30px;
  height: 30px;
}
.ks-offer__empty-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 700;
  color: #fff;
  text-shadow: none;
}
.ks-offer__empty-text {
  margin: 0;
  max-width: 46ch;
  color: var(--muted);
  font-size: var(--fs-sm);
  line-height: 1.6;
}
.ks-offer__empty-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 6px;
}

@media (max-width: 1000px) {
  .ks-offer__usp {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .ks-rental-row {
    grid-template-columns: minmax(0, 1fr);
  }
  .ks-rental-row__media {
    min-height: 200px;
    aspect-ratio: 16 / 9;
  }
  .ks-rental-row__body {
    border-left: 0;
    border-top: 1px solid var(--border);
  }
}
@media (max-width: 700px) {
  .ks-offer__hero-media {
    inset: 0;
    opacity: 0.28;
    -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.9), transparent 92%);
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.9), transparent 92%);
  }
  .ks-offer__usp {
    grid-template-columns: minmax(0, 1fr);
  }
  .ks-offer__filters {
    grid-template-columns: minmax(0, 1fr);
  }
  .ks-offer__sort {
    margin-left: 0;
    width: 100%;
  }
  .ks-offer__sort select.field__input {
    width: 100%;
  }
}
html[data-theme="light"] .ks-offer {
  background: #f5f6f8;
}
html[data-theme="light"] .ks-offer__hero,
html[data-theme="light"] .ks-rental-row,
html[data-theme="light"] .ks-sale-card,
html[data-theme="light"] .ks-offer__filters,
html[data-theme="light"] .ks-offer__usp-item {
  background: #fff;
  border-color: rgba(10, 14, 26, 0.12);
}
html[data-theme="light"] .ks-offer__title,
html[data-theme="light"] .ks-rental-row__title,
html[data-theme="light"] .ks-sale-card__title,
html[data-theme="light"] .ks-offer__empty-title {
  color: #0d1220;
}
.rental-features,
.sale-features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}
.rental-vehicle-card,
.sale-vehicle-card {
  overflow: hidden;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  background: rgba(19, 19, 24, 0.92) !important;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.rental-vehicle-card:hover,
.sale-vehicle-card:hover {
  border-color: var(--accent-line) !important;
  transform: translateY(-2px);
}
.rental-vehicle-card__photo img,
.sale-vehicle-card__photo img {
  width: 100%;
  display: block;
  object-fit: cover;
}
.rental-vehicle-card__title,
.sale-vehicle-card__head h4 {
  font-family: var(--font-display);
  font-weight: 700;
}
.rental-vehicle-card__price,
.sale-vehicle-card__price {
  color: var(--accent);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1rem;
}
.sale-vehicle-card__head .pill,
.pill--admin {
  border-color: var(--accent-line);
  background: var(--accent-soft);
  color: #fff;
}
.rental-spec,
.sale-spec {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: rgba(0, 0, 0, 0.3);
  color: var(--muted);
  font-size: 0.7rem;
}
.services-rental-bar,
.services-sale-bar {
  border: 1px solid var(--border) !important;
  background: rgba(19, 19, 24, 0.9) !important;
  box-shadow: none !important;
}
/* Rental availability calendar legend colours (mockup) */
.rental-cal__day--free {
  background: rgba(46, 204, 143, 0.22) !important;
  border-color: var(--ok-line) !important;
}
.rental-cal__day--busy {
  background: rgba(255, 42, 42, 0.24) !important;
  border-color: var(--accent-line) !important;
}
.rental-cal__day--selected {
  background: rgba(255, 255, 255, 0.14) !important;
}

/* ==========================================================================
   20. NOTIFICATIONS — v4-extra-05
   ========================================================================== */
.notif-bell:not(.notif-bell--mobile) {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin: 0 2px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255, 204, 0, 0.35);
  background: rgba(255, 204, 0, 0.1);
  color: #ffcc00;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
  filter: drop-shadow(0 0 5px rgba(255, 204, 0, 0.28));
}
/* The mobile bell stays hidden above the 950px breakpoint (styles.css). */
.notif-bell--mobile {
  border-radius: var(--radius-sm);
  border-color: rgba(255, 204, 0, 0.35);
  background: rgba(255, 204, 0, 0.1);
  color: #ffcc00;
  filter: drop-shadow(0 0 5px rgba(255, 204, 0, 0.28));
}
.notif-bell:hover,
.notif-bell:focus-visible {
  border-color: rgba(255, 204, 0, 0.65);
  background: rgba(255, 204, 0, 0.18);
  color: #ffe566;
  box-shadow: 0 0 14px rgba(255, 204, 0, 0.22);
}
.notif-bell__icon--svg {
  display: inline-flex;
  width: 19px;
  height: 19px;
}
.notif-bell__icon--svg svg {
  width: 100%;
  height: 100%;
  display: block;
}
.notif-badge {
  position: absolute;
  top: -4px;
  right: -5px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 0.64rem;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 0 0 2px rgba(8, 8, 11, 0.95);
}

.notif-panel {
  width: min(420px, calc(100vw - 24px));
  max-height: min(76vh, 620px);
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  background: rgba(12, 12, 15, 0.98) !important;
  box-shadow: 0 26px 70px rgba(0, 0, 0, 0.62) !important;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  overflow: hidden;
}
.notif-panel__head {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 15px 16px 12px !important;
  border-bottom: 1px solid var(--border) !important;
  background: rgba(14, 14, 18, 0.98) !important;
}
.notif-panel__head-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.notif-panel__heading {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  min-width: 0;
}
.notif-panel__title {
  font-family: var(--font-display);
  font-size: 1.1rem !important;
  font-weight: 700;
  letter-spacing: 0.01em;
}
.notif-panel__count {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid var(--accent-line);
  background: var(--accent-soft);
  color: #fff;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.notif-panel__count--zero {
  border-color: var(--border);
  background: rgba(255, 255, 255, 0.04);
  color: var(--muted-2);
}
.notif-panel__clear {
  flex-shrink: 0;
  padding: 7px 12px;
  border-radius: 8px;
  border: 1px solid var(--border-2);
  background: rgba(255, 255, 255, 0.035);
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.74rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.notif-panel__clear:hover,
.notif-panel__clear:focus-visible {
  border-color: var(--accent-line);
  background: var(--accent-soft);
  color: #fff;
}
.notif-panel__subtitle {
  margin: 10px 0 0 !important;
  color: var(--muted-2);
  font-size: 0.74rem;
  line-height: 1.4;
}
.notif-panel__list {
  padding: 8px 0;
}
.notif-card {
  position: relative;
  margin: 8px 12px;
  padding: 12px 14px 12px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.03);
  box-shadow: none;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.notif-card--unread {
  border-color: var(--border) !important;
  border-left: 3px solid var(--accent) !important;
  background: rgba(255, 42, 42, 0.06) !important;
  box-shadow: none !important;
}
/* Red dot marker on unread rows, as in the mockup. */
.notif-card--unread::before {
  content: "";
  position: absolute;
  left: -1px;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 0 3px rgba(12, 12, 15, 0.98);
}
.notif-card--click:hover,
.notif-card--click:focus-visible {
  border-color: var(--accent-line);
  background: rgba(255, 42, 42, 0.08);
  transform: none;
}
.notif-card__badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid var(--accent-line);
  background: var(--accent-soft);
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.notif-card__time {
  color: var(--muted-2);
  font-size: 0.7rem;
  white-space: nowrap;
}
.notif-card__title {
  font-weight: 600;
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.95);
  margin-bottom: 2px;
}
.notif-card__text,
.notif-card__sub {
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.45;
}
.notif-card__hint {
  color: var(--muted-2) !important;
  font-size: 0.7rem;
}
.notif-card__x {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted-2);
}
.notif-card__x:hover {
  border-color: var(--border);
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
}
.notif-card__btn {
  border-radius: 8px;
  border: 1px solid var(--border-2);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.86);
  font-size: 0.76rem;
  font-weight: 600;
}
.notif-card__btn--primary {
  border-color: var(--accent) !important;
  background: var(--accent) !important;
  color: #fff !important;
}
.notif-card--dismissed {
  filter: grayscale(0.5);
}
.notif-panel__empty {
  margin: 12px !important;
  padding: 26px 16px;
  border: 1px dashed var(--border-2);
  border-radius: var(--radius-sm);
  color: var(--muted-2);
  text-align: center;
  font-size: 0.84rem;
}

/* ==========================================================================
   21. MODALS + TOASTS — v4-extra-06 / v4-extra-08
   ========================================================================== */
/* Plain scrim: a backdrop-filter here made Chromium paint a visible halo
   around the dialog's shadow. */
.ui-backdrop {
  background: rgba(3, 3, 5, 0.72) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
/* No backdrop-filter here: nested backdrop roots produced a visible halo
   around the dialog in Chromium, and the panel is opaque anyway. */
.ui-modal,
.ui-dialog {
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: var(--radius-lg) !important;
  background: #111115 !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.ui-modal__header {
  padding: 14px 16px 10px !important;
  border-bottom: 1px solid var(--border) !important;
}
.ui-modal__title {
  font-family: var(--font-display) !important;
  font-size: 1.02rem;
  font-weight: 700 !important;
  letter-spacing: 0.01em;
}
.ui-modal__x {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted-2);
  font-size: 20px;
}
.ui-modal__x:hover {
  border-color: var(--border);
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
  transform: none;
}
.ui-modal__body {
  padding: 16px !important;
  color: rgba(255, 255, 255, 0.86);
  font-size: 0.9rem;
  line-height: 1.55;
  white-space: pre-line;
}
.ui-modal__footer {
  padding: 14px 16px !important;
  border-top: 1px solid var(--border) !important;
  gap: 10px;
  flex-wrap: wrap;
}
.ui-btn {
  min-width: 100px;
  padding: 11px 18px;
  border-radius: var(--radius-sm);
  font-weight: 600;
  justify-content: center;
  text-align: center;
}
.ui-btn:hover {
  transform: none;
}
.ui-btn--ghost {
  border-color: var(--border-2);
  background: rgba(255, 255, 255, 0.035);
  color: rgba(255, 255, 255, 0.86);
}
.ui-btn--ghost:hover {
  background: rgba(255, 255, 255, 0.07);
}
.ui-btn--primary,
.ui-btn--accent,
.ui-btn[data-variant="primary"],
.ui-btn[data-variant="accent"] {
  border-color: var(--accent) !important;
  background: var(--accent) !important;
  color: #fff !important;
}
.ui-btn--primary:hover,
.ui-btn--accent:hover {
  background: var(--accent-hi) !important;
}
.ui-btn--danger {
  border-color: var(--accent) !important;
  background: var(--accent) !important;
  color: #fff !important;
}
.ui-btn--danger:hover {
  background: var(--accent-hi) !important;
}
/* Tone accents on the modal frame (destructive / success / lock). */
.ui-modal--danger,
.ui-modal--warning {
  border-color: rgba(255, 42, 42, 0.28) !important;
}
.ui-modal--success {
  border-color: rgba(46, 204, 143, 0.26) !important;
}

/* --------------------------------------------------------------------------
   Confirm / alert dialogs: centred icon + title + text, buttons on one row
   (v4-extra-06). Multi-step "flow" dialogs keep the plain header layout.
   -------------------------------------------------------------------------- */
.ui-modal:not(.ui-modal--flow):not(.ui-modal--compose) > .ui-modal__header {
  position: relative;
  display: block !important;
  padding: 26px 46px 0 !important;
  border-bottom: 0 !important;
  text-align: center;
}
.ui-modal:not(.ui-modal--flow):not(.ui-modal--compose) > .ui-modal__header::before {
  content: "";
  display: block;
  width: 56px;
  height: 56px;
  margin: 0 auto 14px;
  border-radius: 50%;
  border: 2px solid var(--accent);
  background: rgba(255, 42, 42, 0.09);
  -webkit-mask: none;
  mask: none;
}
.ui-modal:not(.ui-modal--flow):not(.ui-modal--compose) > .ui-modal__header::after {
  content: "";
  position: absolute;
  top: 42px;
  left: 50%;
  width: 24px;
  height: 24px;
  transform: translateX(-50%);
  background: var(--accent);
  -webkit-mask: var(--ks-dialog-glyph, none) center / contain no-repeat;
  mask: var(--ks-dialog-glyph, none) center / contain no-repeat;
}
.ui-modal:not(.ui-modal--flow):not(.ui-modal--compose) {
  /* Default glyph: question mark in a plain style (info / confirm). */
  --ks-dialog-glyph: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M9.2 9.2a2.9 2.9 0 1 1 4.4 2.5c-.9.6-1.6 1.1-1.6 2.1v.4'/><circle cx='12' cy='17.6' r='1.05' fill='%23000' stroke='none'/></svg>");
}
.ui-modal--danger:not(.ui-modal--flow):not(.ui-modal--compose) {
  /* Trash can, as in the mockup's destructive dialog. */
  --ks-dialog-glyph: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'><path d='M4 7h16'/><path d='M9.5 7V5.4A1.4 1.4 0 0 1 10.9 4h2.2a1.4 1.4 0 0 1 1.4 1.4V7'/><path d='M6.4 7l.8 11.4A1.6 1.6 0 0 0 8.8 20h6.4a1.6 1.6 0 0 0 1.6-1.6L17.6 7'/><path d='M10.4 10.6v6M13.6 10.6v6'/></svg>");
}
.ui-modal--success:not(.ui-modal--flow):not(.ui-modal--compose) {
  --ks-dialog-glyph: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12.8l4.4 4.2L19 7.6'/></svg>");
}
.ui-modal--success:not(.ui-modal--flow):not(.ui-modal--compose) > .ui-modal__header::before {
  border-color: var(--ok);
  background: rgba(46, 204, 143, 0.1);
}
.ui-modal--success:not(.ui-modal--flow):not(.ui-modal--compose) > .ui-modal__header::after {
  background: var(--ok);
}
.ui-modal:not(.ui-modal--flow):not(.ui-modal--compose) > .ui-modal__header .ui-modal__title {
  display: block;
  font-size: 1.22rem !important;
}
.ui-modal:not(.ui-modal--flow):not(.ui-modal--compose) > .ui-modal__header .ui-modal__x {
  position: absolute;
  top: 12px;
  right: 12px;
}
.ui-modal:not(.ui-modal--flow):not(.ui-modal--compose) > .ui-modal__body {
  padding: 8px 30px 4px !important;
  color: var(--muted);
  text-align: center;
}
.ui-modal:not(.ui-modal--flow):not(.ui-modal--compose) > .ui-modal__footer {
  padding: 20px 22px 22px !important;
  border-top: 0 !important;
  display: flex;
  justify-content: stretch;
}
.ui-modal:not(.ui-modal--flow):not(.ui-modal--compose) > .ui-modal__footer > .ui-btn {
  flex: 1 1 0;
  min-width: 0;
  padding: 13px 18px;
}
.ui-modal--support .ui-modal__header {
  border-bottom-color: var(--accent-line) !important;
  background: linear-gradient(180deg, rgba(255, 42, 42, 0.09), transparent) !important;
}

/* Toasts: dark card, coloured status ring, close × (v4-extra-06 right side). */
.ui-toasts {
  z-index: 20050;
  gap: 10px;
}
/* Lift the toast stack above the cookie bar while it is still shown. */
body:has(#ks-consent[style*="block"]) .ui-toasts {
  bottom: 136px;
}
@media (max-width: 720px) {
  body:has(#ks-consent[style*="block"]) .ui-toasts {
    bottom: 190px;
  }
}
.ui-toast {
  width: min(340px, 92vw);
  padding: 13px 14px !important;
  border-radius: var(--radius-sm) !important;
  border: 1px solid var(--border) !important;
  background: #14141a !important;
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.5) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  grid-template-columns: auto 1fr auto;
  align-items: center;
}
/* Status disc with a glyph inside (mask keeps a single element per v4-extra-06). */
.ui-toast::before {
  content: "";
  width: 22px;
  height: 22px;
  border-radius: 999px;
  border: 1.5px solid var(--muted-2);
  background: rgba(255, 255, 255, 0.05);
  flex-shrink: 0;
  position: relative;
}
.ui-toast::after {
  content: "";
  position: absolute;
  left: 19px;
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
  height: 12px;
  background: var(--muted-2);
  -webkit-mask: var(--ks-toast-glyph, none) center / contain no-repeat;
  mask: var(--ks-toast-glyph, none) center / contain no-repeat;
  pointer-events: none;
}
.ui-toast {
  position: relative;
  --ks-toast-glyph: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round'><path d='M12 8.4v.1'/><path d='M12 11.6v4.4'/></svg>");
}
.ui-toast__text {
  font-size: 0.86rem;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.92);
}
.ui-toast__close {
  color: var(--muted-2);
  border-radius: 8px;
}
.ui-toast--success {
  border-color: var(--ok-line) !important;
}
.ui-toast--success::before {
  border-color: var(--ok);
  background: var(--ok-soft);
}
.ui-toast--success {
  --ks-toast-glyph: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12.6l4.6 4.4L19 7.4'/></svg>");
}
.ui-toast--success::after {
  background: var(--ok);
}
.ui-toast--danger {
  border-color: var(--accent-line) !important;
}
.ui-toast--danger::before {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.ui-toast--danger {
  --ks-toast-glyph: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.8' stroke-linecap='round'><path d='M7.2 7.2l9.6 9.6M16.8 7.2l-9.6 9.6'/></svg>");
}
.ui-toast--danger::after {
  background: var(--accent);
}
.ui-toast--warning {
  border-color: var(--warn-line) !important;
}
.ui-toast--warning::before {
  border-color: var(--warn);
  background: var(--warn-soft);
}
.ui-toast--warning {
  --ks-toast-glyph: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M12 4.4L21 19.6H3z'/><path d='M12 10v3.6'/><path d='M12 16.6v.1'/></svg>");
}
.ui-toast--warning::after {
  background: var(--warn);
}
.ui-toast--info::before {
  border-color: rgba(120, 180, 255, 0.7);
  background: rgba(120, 180, 255, 0.1);
}
.ui-toast--info::after {
  background: rgba(140, 190, 255, 0.9);
}

/* Native <dialog> auth modals share the modal language. */
dialog.ks-auth-dialog:not([open]) {
  display: none !important;
}
.ks-auth-dialog,
dialog.ks-auth-dialog {
  width: min(420px, calc(100vw - 24px));
  max-width: min(420px, calc(100vw - 24px));
  padding: 0 !important;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: var(--radius-lg) !important;
  background: #14141a !important;
  color: var(--text) !important;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.66) !important;
  color-scheme: dark;
}
.ks-auth-dialog--wide {
  width: min(480px, 92vw);
  max-width: min(480px, 92vw);
}
.ks-auth-dialog::backdrop {
  background: rgba(0, 0, 0, 0.66);
  backdrop-filter: blur(5px);
}
.ks-auth-dialog__form {
  padding: 22px;
  margin: 0;
}
.ks-auth-dialog__title {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
}
.ks-auth-dialog__lead {
  margin: 0 0 14px;
  font-size: 0.86rem;
  line-height: 1.55;
  color: var(--muted);
}
.ks-auth-dialog__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 12px;
}

/* ==========================================================================
   22. COOKIE BAR — v4-extra-08
   ========================================================================== */
.ks-consent {
  left: 14px;
  right: 14px;
  bottom: 14px;
}
.ks-consent__card {
  max-width: 1180px;
  margin: 0 auto;
  padding: 15px 18px !important;
  border-radius: var(--radius) !important;
  border: 1px solid var(--border) !important;
  background: rgba(14, 14, 18, 0.97) !important;
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.55) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.ks-consent__row {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.ks-consent__ico {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 1px solid var(--border-2);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.75);
}
.ks-consent__ico svg {
  width: 22px;
  height: 22px;
}
.ks-consent__text {
  flex: 1 1 340px;
  min-width: 0;
  color: var(--muted-2);
  font-size: 0.74rem;
  line-height: 1.5;
}
.ks-consent__title {
  display: block;
  margin-bottom: 3px;
  color: rgba(255, 255, 255, 0.94);
  font-size: 0.92rem;
  font-weight: 600;
}
.ks-consent__text a {
  color: var(--accent);
}
.ks-consent__actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.ks-consent__btn {
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 0.84rem;
  font-weight: 600;
  cursor: pointer;
}
.ks-consent__btn--ghost {
  border: 1px solid var(--border-2);
  background: rgba(255, 255, 255, 0.035);
  color: rgba(255, 255, 255, 0.88);
}
.ks-consent__btn--ghost:hover {
  background: rgba(255, 255, 255, 0.07);
}
.ks-consent__btn--accept {
  border: 0;
  background: var(--accent);
  color: #fff;
  min-width: 130px;
}
.ks-consent__btn--accept:hover {
  background: var(--accent-hi);
}
.ks-consent__detail-link {
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.8rem;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.ks-consent__detail-link:hover {
  color: #fff;
}
/* Keep the bar clear of the floating chat button. */
body:not(.ks-app-mode) .ks-consent__card {
  padding-right: clamp(18px, 3vw, 26px) !important;
}
@media (max-width: 900px) {
  .ks-consent__row {
    align-items: flex-start;
  }
  .ks-consent__actions {
    width: 100%;
    justify-content: flex-start;
  }
}

/* ==========================================================================
   23. FOOTER — v4-extra-07
   ========================================================================== */
.site-footer {
  margin-top: 26px;
  padding: 0 0 20px;
  color: var(--muted-2);
}
.site-footer__card {
  padding: 22px clamp(18px, 3vw, 30px) 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0.008)), rgba(13, 13, 17, 0.92);
}
.site-footer__top {
  display: grid;
  grid-template-columns: minmax(200px, 0.9fr) minmax(0, 1.1fr);
  gap: 20px clamp(20px, 5vw, 60px);
  align-items: start;
}
.site-footer__brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}
.site-footer__brand-row {
  display: flex;
  align-items: center;
  gap: 14px;
}
.site-footer__brand-glow {
  width: 100%;
  max-width: 280px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, rgba(255, 42, 42, 0.85) 50%, transparent);
  box-shadow: 0 0 14px rgba(255, 42, 42, 0.45);
}
.site-footer__logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 68px;
  height: 68px;
  padding: 9px;
  border: 2px solid rgba(255, 255, 255, 0.85);
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.3);
  box-sizing: border-box;
  flex-shrink: 0;
}
.site-footer__logo img {
  width: 100%;
  height: auto;
  filter: invert(1) brightness(1.7);
}
.site-footer__wordmark {
  display: flex;
  flex-direction: column;
  line-height: 0.85;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 800;
}
.site-footer__wordmark-1 {
  font-size: clamp(1.3rem, 2.6vw, 1.75rem);
  letter-spacing: 0.03em;
  color: #fff;
}
.site-footer__wordmark-2 {
  font-size: clamp(1.25rem, 2.5vw, 1.68rem);
  letter-spacing: 0.03em;
  color: var(--accent);
}
.site-footer__links-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.site-footer__links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px clamp(16px, 4vw, 40px);
  align-items: start;
  position: relative;
}
/* Continuous divider between the two legal columns (as in v4-extra-07). */
.site-footer__links::before {
  content: "";
  position: absolute;
  top: 2px;
  bottom: 2px;
  left: 50%;
  width: 1px;
  transform: translateX(calc(clamp(16px, 4vw, 40px) / -2));
  background: rgba(255, 255, 255, 0.08);
}
.footer-legal-link {
  position: relative;
  display: block;
  padding-left: 18px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.82rem;
  font-weight: 500;
  opacity: 1;
  text-decoration: none;
  transition: color 0.15s ease;
}
.footer-legal-link::before {
  content: "\203A";
  position: absolute;
  left: 2px;
  top: -1px;
  color: var(--accent);
  font-size: 0.95rem;
  font-weight: 700;
}
.footer-legal-link:hover {
  color: #fff;
}
/* Mockup shows the glowing hairline only under the brand block, not full width. */
.site-footer__hair {
  height: 1px;
  width: min(330px, 60%);
  margin: 20px 0 16px;
  background: linear-gradient(90deg, rgba(255, 42, 42, 0.55) 0%, #ff6b6b 45%, rgba(255, 42, 42, 0.45) 58%, rgba(255, 255, 255, 0.06) 100%);
}
.site-footer__legal {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.site-footer__copy {
  margin: 0;
  color: rgba(255, 255, 255, 0.86);
  font-size: 0.84rem;
  font-weight: 500;
}
.site-footer__meta {
  margin: 0;
  color: var(--muted-2);
  font-size: 0.74rem;
  line-height: 1.6;
}
.site-footer__sep {
  margin: 0 0.4em;
  opacity: 0.4;
}
.site-footer__apps {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.site-footer__apps-title {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.84rem;
  font-weight: 500;
}
.site-footer__apps-ico {
  display: inline-flex;
  width: 20px;
  height: 20px;
  color: var(--accent);
}
.site-footer__apps-ico svg {
  width: 100%;
  height: 100%;
}
.site-footer__apps-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.site-footer__app-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  border: 1px solid var(--border-2);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.4);
  color: rgba(255, 255, 255, 0.82);
  cursor: default;
}
.site-footer__app-badge-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  color: #fff;
}
.site-footer__app-badge-ico--play svg {
  width: 19px;
  height: 21px;
  display: block;
}
.site-footer__app-badge-ico--apple svg {
  width: 21px;
  height: 21px;
  display: block;
}
.site-footer__app-badge-txt {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}
.site-footer__app-badge-txt em {
  font-style: normal;
  font-size: 0.6rem;
  letter-spacing: 0.04em;
  color: var(--muted-2);
}
.site-footer__app-badge-txt strong {
  font-size: 0.88rem;
  font-weight: 600;
}
/* Leave room for the floating support chat button. */
body:not(.ks-app-mode):not(.ks-support-popup-mode) .site-footer {
  padding-right: clamp(0px, 2vw, 16px) !important;
}
body:not(.ks-app-mode):not(.ks-support-popup-mode) .site-footer__apps {
  padding-right: clamp(150px, 20vw, 200px);
}
@media (max-width: 820px) {
  .site-footer__top {
    grid-template-columns: 1fr;
  }
  .site-footer__apps {
    flex-direction: column;
    align-items: flex-start;
  }
  body:not(.ks-app-mode):not(.ks-support-popup-mode) .site-footer__apps {
    padding-right: 0;
    padding-bottom: 64px;
  }
}

/* ==========================================================================
   24. SUPPORT CHAT WIDGET (offline dot colour stays JS-driven)
   ========================================================================== */
#ks-support-btn {
  border-radius: 999px !important;
  border: 1px solid var(--border-2) !important;
  background: rgba(14, 14, 18, 0.94) !important;
  color: rgba(255, 255, 255, 0.9) !important;
  font-size: 0.84rem;
  font-weight: 600;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45) !important;
  backdrop-filter: blur(12px);
}
#ks-support-btn:hover {
  border-color: rgba(255, 255, 255, 0.24) !important;
}
#ks-support-pop {
  border-radius: var(--radius) !important;
  border: 1px solid var(--border) !important;
  background: rgba(14, 14, 18, 0.98) !important;
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.55) !important;
}
/* Dot colour is set inline by setDot() — do not override with !important. */

/* ==========================================================================
   25. EMPTY / DENIED STATES
   ========================================================================== */
.access-denied,
.empty-panel {
  border: 1px dashed var(--border-2) !important;
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(255, 42, 42, 0.04), rgba(0, 0, 0, 0.24)) !important;
  text-align: center;
}
.access-denied {
  border-color: var(--accent-line) !important;
}
.access-denied h3,
.empty-panel h3 {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-weight: 700;
}
.access-denied h3 {
  color: var(--accent);
}
.access-denied p,
.empty-panel p {
  margin: 0 auto;
  max-width: 48ch;
  color: var(--muted);
  line-height: 1.55;
}
.access-denied .btn-accent,
.empty-panel .btn-accent {
  margin-top: 16px;
}
.empty-emoji {
  opacity: 0.6;
}

/* ==========================================================================
   26. PUBLIC SECONDARY PAGES / LEGAL
   ========================================================================== */
.ks-legal,
.legal-page,
.podminky-page,
.pravidla-page {
  max-width: 900px;
  margin: 0 auto;
  padding: 110px 20px 56px;
}
.ks-legal h1,
.ks-legal h2,
.podminky-page h1,
.pravidla-page h1 {
  font-family: var(--font-display);
  font-weight: 700;
}
.ks-legal a,
.podminky-page a,
.pravidla-page a {
  color: var(--accent);
}
.ks-legal section,
.ks-legal .legal-intro,
.ks-legal .legal-toc,
.ks-legal .contact-info {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.012)), var(--panel);
  box-shadow: var(--shadow-soft);
  padding: 26px;
  margin-bottom: 20px;
  scroll-margin-top: 90px;
}
.ks-legal h2 {
  border-left: 2px solid var(--accent);
  padding-left: 13px;
}
.ks-legal h3 {
  color: var(--accent);
}
.ks-legal-shell {
  max-width: 720px;
  margin: 0 auto;
}
.ks-legal-card {
  width: min(720px, 100%);
}
.ks-legal-body {
  line-height: 1.6;
}
.ks-legal-body p {
  margin: 0 0 10px;
}
.ks-legal-back {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--accent-line);
}
.ks-pravidla-embed {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
}
.ks-pravidla-embed .auth-page {
  padding: 16px 12px;
  min-height: 100vh;
  box-sizing: border-box;
}
.ks-pravidla-embed .auth-page::before,
.ks-pravidla-embed .auth-page::after {
  display: none;
}
.ks-reg-rules-frame {
  border-radius: var(--radius-sm);
  width: 100%;
  min-height: 52vh;
  border: 1px solid var(--border);
  background: #fff;
}

/* ==========================================================================
   27. DESKTOP APP MODE (Electron / app=1)
   ========================================================================== */
body.ks-app-mode {
  background: var(--bg);
}
body.ks-app-mode .ks-app-topbar {
  border-bottom: 1px solid var(--border) !important;
  background: rgba(8, 8, 11, 0.96) !important;
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.42);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
body.ks-app-mode .ks-app-topbar__brand {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 800;
  letter-spacing: 0.03em;
}
.ks-app-topbar__brand .accent,
body.ks-app-mode .ks-app-topbar__brand span {
  color: var(--accent);
}
body.ks-app-mode .ks-app-btn {
  border-radius: 8px;
  border-color: var(--border) !important;
  background: rgba(255, 255, 255, 0.045) !important;
  font-weight: 600;
}
body.ks-app-mode .ks-app-btn:hover {
  border-color: var(--accent-line) !important;
  background: var(--accent-soft) !important;
}
body.ks-app-mode .ks-app-btn--primary,
body.ks-app-mode .ks-app-btn--danger {
  border-color: var(--accent) !important;
  background: var(--accent) !important;
  color: #fff !important;
}
body.ks-app-mode .ks-app-notif {
  border-radius: 8px;
  border-color: rgba(255, 204, 0, 0.4) !important;
  background: rgba(255, 204, 0, 0.12) !important;
  color: #ffcc00;
  filter: drop-shadow(0 0 6px rgba(255, 204, 0, 0.3));
}
body.ks-app-mode .ks-app-notif:hover {
  border-color: rgba(255, 204, 0, 0.7) !important;
  background: rgba(255, 204, 0, 0.2) !important;
  color: #ffe566;
}

/* ==========================================================================
   28. LIGHT / PAPER THEME GUARDS
   ========================================================================== */
html[data-theme="light"] .auth-page::before,
html[data-theme="light"] .auth-page::after {
  display: none;
}
html[data-theme="light"] .auth-card,
html[data-theme="light"] .auth-card.glass,
html[data-theme="light"] .ui-modal,
html[data-theme="light"] .ks-auth-dialog {
  background: #fff !important;
  color: var(--text) !important;
  border-color: rgba(10, 14, 26, 0.12) !important;
}
html[data-theme="light"] .site-footer__card,
html[data-theme="light"] .notif-panel,
html[data-theme="light"] .ks-consent__card {
  background: #fff !important;
  border-color: rgba(10, 14, 26, 0.12) !important;
}
html[data-theme="light"] .footer-legal-link,
html[data-theme="light"] .site-footer__copy,
html[data-theme="light"] .site-footer__wordmark-1 {
  color: rgba(10, 14, 26, 0.86) !important;
}
html[data-theme="light"] .access-denied,
html[data-theme="light"] .empty-panel {
  background: rgba(10, 14, 26, 0.03) !important;
}
html[data-theme="light"] .orders-list > li,
html[data-theme="light"] .home-my-orders-list > li {
  background: rgba(10, 14, 26, 0.03);
}

/* ==========================================================================
   30. DOCUMENTS — právní dokumentace, pravidla, utility stránky
   Layout: full-width head card, sticky TOC rail (desktop) + prose column.
   Prose measure is capped at --w-prose so lines stay readable.
   ========================================================================== */
.ks-doc {
  display: block;
  /* top offset clears the fixed .site-header */
  padding: clamp(86px, 10vh, 116px) 0 clamp(40px, 5vw, 64px);
  background:
    radial-gradient(900px 420px at 10% -6%, rgba(255, 42, 42, 0.08), transparent 60%),
    var(--bg);
}
.ks-doc__wrap {
  width: 100%;
  max-width: var(--w-doc);
  margin: 0 auto;
  padding: 0 clamp(14px, 2.4vw, 26px);
  box-sizing: border-box;
}
.ks-doc__head {
  position: relative;
  display: grid;
  gap: var(--sp-3);
  margin-bottom: clamp(16px, 2vw, 24px);
  padding: clamp(20px, 2.6vw, 30px) clamp(18px, 2.6vw, 32px) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  background: linear-gradient(120deg, rgba(255, 42, 42, 0.1) 0%, rgba(18, 18, 22, 0.94) 44%, rgba(12, 12, 15, 0.96) 100%) !important;
  box-shadow: var(--shadow-soft) !important;
}
.ks-doc__back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: start;
  justify-self: start;
  width: auto;
  height: var(--control-h-sm);
  padding: 0 14px 0 10px;
  border: 1px solid var(--border-2);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  font-size: var(--fs-sm);
  font-weight: 600;
  text-decoration: none;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.ks-doc__back:hover {
  border-color: var(--accent-line);
  background: rgba(255, 42, 42, 0.1);
  color: #fff;
}
.ks-doc__back-ico svg {
  width: var(--icon-sm);
  height: var(--icon-sm);
  display: block;
}
.ks-doc__eyebrow {
  display: inline-block;
  margin-bottom: 8px;
  color: var(--accent);
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.ks-doc__title {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: 0.005em;
  color: #fff;
  text-shadow: none;
}
.ks-doc__lead {
  max-width: var(--w-prose);
  margin: 0;
  color: var(--muted);
  font-size: var(--fs-ui);
  line-height: var(--lh-prose);
}
.ks-doc__lead strong {
  color: var(--text);
}
.ks-doc__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.ks-doc__chip {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 10px;
  border: 1px solid var(--border-2);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--muted);
  font-size: var(--fs-xs);
  font-weight: 600;
}
.ks-doc__print {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 30px;
  margin-left: auto;
  padding: 0 13px;
  border: 1px solid var(--accent-line);
  border-radius: 999px;
  background: rgba(255, 42, 42, 0.1);
  color: #fff;
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.ks-doc__print:hover {
  border-color: var(--accent);
  background: var(--accent);
}
.ks-doc__print svg {
  width: var(--icon-sm);
  height: var(--icon-sm);
  display: block;
}
.ks-doc__grid {
  display: grid;
  grid-template-columns: 246px minmax(0, 1fr);
  align-items: start;
  gap: clamp(16px, 2vw, 26px);
}
.ks-doc__toc {
  position: sticky;
  top: 88px;
  padding: 16px 14px !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  background: var(--panel) !important;
}
.ks-doc__toc-title {
  margin-bottom: 10px;
  padding: 0 6px 9px;
  border-bottom: 1px solid var(--border);
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.ks-doc__toc-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ks-doc__toc-link {
  display: block;
  padding: 8px 10px;
  border-left: 2px solid transparent;
  border-radius: 0 8px 8px 0;
  color: var(--muted);
  font-size: var(--fs-sm);
  line-height: 1.35;
  text-decoration: none;
  transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
.ks-doc__toc-link:hover {
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
}
.ks-doc__toc-link.is-active {
  border-left-color: var(--accent);
  background: rgba(255, 42, 42, 0.1);
  color: #fff;
  font-weight: 600;
}
.ks-doc__toc-foot {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}
.ks-doc__toc-side {
  display: block;
  padding: 0 10px;
  color: var(--accent);
  font-size: var(--fs-sm);
  text-decoration: none;
}
.ks-doc__toc-side:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.ks-doc__body {
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 1.6vw, 20px);
  max-width: var(--w-prose);
  min-width: 0;
}
.ks-doc__section {
  padding: clamp(20px, 2.4vw, 30px) clamp(18px, 2.4vw, 30px) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  background: var(--panel) !important;
  box-shadow: none !important;
  scroll-margin-top: 96px;
}
.ks-doc__section > h2 {
  margin: 0 0 var(--sp-4);
  padding-left: 12px;
  border-left: 3px solid var(--accent);
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: 0.01em;
  color: #fff;
  text-transform: none;
  text-shadow: none;
}
.ks-doc__section > h3 {
  margin: var(--sp-5) 0 var(--sp-2);
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 700;
  letter-spacing: 0.005em;
  color: #fff;
  text-transform: none;
  text-shadow: none;
}
.ks-doc__section > h3:first-of-type {
  margin-top: 0;
}
.ks-doc__section p,
.ks-doc__section li {
  color: var(--muted);
  font-size: var(--fs-body);
  line-height: var(--lh-prose);
}
.ks-doc__section p {
  margin: 0 0 var(--sp-2);
}
.ks-doc__section p:last-child {
  margin-bottom: 0;
}
.ks-doc__section ul {
  margin: 0 0 var(--sp-2);
  padding-left: 20px;
}
.ks-doc__section li {
  margin-bottom: 7px;
}
.ks-doc__section li::marker {
  color: rgba(255, 42, 42, 0.7);
}
.ks-doc__section strong {
  color: var(--text);
  font-weight: 600;
}
.ks-doc__section a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.ks-doc__section a:hover {
  color: var(--accent-hi);
}
.ks-doc__kv {
  display: grid;
  gap: 0;
  margin: var(--sp-3) 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--inset);
  overflow: hidden;
}
.ks-doc__kv-row {
  display: grid;
  grid-template-columns: minmax(140px, 33%) minmax(0, 1fr);
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
}
.ks-doc__kv-row:last-child {
  border-bottom: 0;
}
.ks-doc__kv dt {
  margin: 0;
  color: var(--muted-2);
  font-size: var(--fs-sm);
  font-weight: 600;
}
.ks-doc__kv dd {
  margin: 0;
  color: var(--text);
  font-size: var(--fs-sm);
  line-height: 1.5;
}
.ks-doc__copy {
  margin: var(--sp-2) 0 0;
  padding-top: var(--sp-4);
  border-top: 1px solid var(--border);
  color: var(--muted-2);
  font-size: var(--fs-sm);
  text-align: center;
}
/* Embedded (iframe/modal) variant: no chrome, no rail. */
.ks-doc--embed {
  padding: 18px 0 26px !important;
}
.ks-doc--embed .ks-doc__body {
  max-width: none;
}
/* Utility/auth documents (pravidla, ověření e-mailu, obnova hesla). */
.ks-doc--narrow .ks-doc__wrap {
  max-width: 760px;
}
.ks-doc--narrow .ks-doc__grid {
  grid-template-columns: minmax(0, 1fr);
}
.ks-doc--narrow .ks-doc__body {
  max-width: none;
}
.ks-doc__list {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: ksdoc;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.ks-doc__list li {
  position: relative;
  counter-increment: ksdoc;
  padding: 12px 14px 12px 46px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.03);
  color: var(--muted);
  font-size: var(--fs-ui);
  line-height: var(--lh-prose);
}
.ks-doc__list li::before {
  content: counter(ksdoc);
  position: absolute;
  left: 12px;
  top: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: 1px solid var(--accent-line);
  border-radius: 999px;
  background: rgba(255, 42, 42, 0.12);
  color: var(--accent);
  font-size: var(--fs-xs);
  font-weight: 700;
}
@media (max-width: 900px) {
  .ks-doc__grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .ks-doc__toc {
    position: static;
    top: auto;
  }
  .ks-doc__toc-nav {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 6px;
  }
  .ks-doc__toc-link {
    border-left: 0;
    border-radius: 999px;
    border: 1px solid var(--border);
    padding: 7px 12px;
  }
  .ks-doc__toc-link.is-active {
    border-color: var(--accent-line);
  }
  .ks-doc__body {
    max-width: none;
  }
}
@media (max-width: 560px) {
  .ks-doc__print {
    margin-left: 0;
  }
  .ks-doc__kv-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
  }
}
@media print {
  .site-header,
  .site-footer,
  .ks-doc__toc,
  .ks-doc__back,
  .ks-doc__print,
  #ks-consent,
  .ks-support-widget,
  .ui-toasts {
    display: none !important;
  }
  .ks-doc,
  .ks-doc__section,
  .ks-doc__head {
    background: #fff !important;
    box-shadow: none !important;
  }
  .ks-doc__grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .ks-doc__title,
  .ks-doc__section > h2,
  .ks-doc__section > h3,
  .ks-doc__section strong {
    color: #000 !important;
  }
  .ks-doc__section p,
  .ks-doc__section li,
  .ks-doc__lead {
    color: #1a1a1a !important;
  }
}
html[data-theme="light"] .ks-doc {
  background: #f5f6f8;
}
html[data-theme="light"] .ks-doc__section,
html[data-theme="light"] .ks-doc__toc,
html[data-theme="light"] .ks-doc__head {
  background: #fff !important;
  border-color: rgba(10, 14, 26, 0.12) !important;
}

/* ==========================================================================
   31. OVERLAP GUARDS — fixed bars must never cover page content
   ========================================================================== */
body.ks-consent-open .dash,
body.ks-consent-open .ks-doc,
body.ks-consent-open .ks-offer,
body.ks-consent-open .auth-page {
  padding-bottom: clamp(140px, 18vh, 210px);
}
body.ks-consent-open .ui-toasts {
  bottom: clamp(150px, 19vh, 220px);
}
/* Toast stack sits above the support widget / mobile nav bar. */
.ui-toasts {
  z-index: 900;
}
@media (max-width: 720px) {
  body.ks-consent-open .dash,
  body.ks-consent-open .ks-doc,
  body.ks-consent-open .ks-offer {
    padding-bottom: 260px;
  }
}

/* ==========================================================================
   29. MOTION / RESPONSIVE
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .groups-quick-card:hover,
  .groups-my-card:hover,
  .sale-vehicle-card:hover,
  .rental-vehicle-card:hover,
  .forum-cat-tile:hover,
  .servis-docs__card:hover,
  .home-hub__tile:hover {
    transform: none;
  }
}

@media (max-width: 900px) {
  .notif-panel {
    right: 12px;
    left: 12px;
    width: auto;
  }
}

@media (max-width: 720px) {
  .auth-card,
  .auth-card.glass {
    padding: 22px 18px !important;
  }
  .auth-inline-links {
    flex-direction: column;
    gap: 6px;
  }
  .notif-panel__head-row {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .notif-panel__clear {
    width: 100%;
  }
  .access-denied,
  .empty-panel {
    padding: 30px 16px;
  }
  .stats {
    grid-template-columns: 1fr;
  }
  .site-footer__links {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   v4 pass — fotky vozidel, rezervace, mapy, skupiny, zprávy, WhatsApp
   ========================================================================== */

.ks-veh-gallery {
  position: relative;
}
.ks-veh-gallery__thumbs {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 10px;
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-height: 84px;
  overflow: auto;
  pointer-events: none;
}
.ks-rental-row__media .ks-veh-gallery__thumbs {
  bottom: 46px;
}
.ks-veh-gallery__thumb {
  pointer-events: auto;
  position: relative;
  flex: 0 0 auto;
  width: 48px;
  height: 36px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 5px;
  overflow: hidden;
  background: #0a0a0c;
  cursor: pointer;
  opacity: 0.78;
}
.ks-veh-gallery__thumb.is-active,
.ks-veh-gallery__thumb:hover {
  opacity: 1;
  border-color: var(--accent);
}
.ks-veh-gallery__thumb img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block;
}
.rental-card__gallery {
  position: relative;
  margin: -6px -6px 12px;
  border-radius: 14px;
  overflow: hidden;
}
.rental-card__gallery .ks-veh-gallery__thumbs {
  bottom: 8px;
}

.ks-rental-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 6px;
  background: var(--accent);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}
.ks-rental-row.is-reserved,
.rental-card.is-reserved {
  border-color: rgba(255, 42, 42, 0.35) !important;
}
.ks-rental-reserved-note {
  margin: 0;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid rgba(255, 42, 42, 0.28);
  background: rgba(255, 42, 42, 0.08);
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.82rem;
  line-height: 1.45;
}
button[data-rental-book]:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  filter: grayscale(0.2);
}

.ks-photo-mgr__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 10px;
}
.ks-photo-mgr__item {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.25);
}
.ks-photo-mgr__item img {
  width: 100%;
  height: 88px;
  object-fit: cover;
  border-radius: 6px;
  display: block;
}

.rental-cal-fold {
  margin-bottom: 16px;
  padding: 0 !important;
  overflow: hidden;
}
.rental-cal-fold__summary {
  cursor: pointer;
  list-style: none;
  padding: 14px 16px;
  font-weight: 700;
  font-family: var(--font-display);
}
.rental-cal-fold__summary::-webkit-details-marker {
  display: none;
}
.rental-cal-fold[open] .rental-cal-fold__summary {
  border-bottom: 1px solid var(--border);
}
.rental-cal-fold__body {
  padding: 0 8px 12px;
}
.rental-cal-fold .rental-cal-card {
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  margin: 0;
}

.section-rail__cal {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.section-rail__cal-title {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
  margin-bottom: 10px;
}
.rental-rail-cal__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 8px;
}
.rental-rail-cal__month {
  font-weight: 700;
  font-size: 0.88rem;
}
.rental-rail-cal__nav-btn {
  display: inline-flex;
  width: 28px;
  height: 28px;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.04);
  color: inherit;
  text-decoration: none;
  font-size: 1.1rem;
  line-height: 1;
}
.rental-rail-cal__weekdays,
.rental-rail-cal__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
}
.rental-rail-cal__weekdays {
  margin-bottom: 4px;
  color: rgba(255, 255, 255, 0.38);
  font-size: 0.62rem;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.rental-rail-cal__day {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  border-radius: 5px;
  font-size: 0.72rem;
  font-weight: 600;
  color: inherit;
  text-decoration: none;
  background: rgba(255, 255, 255, 0.03);
  position: relative;
}
.rental-rail-cal__day.is-empty {
  background: transparent;
}
.rental-rail-cal__day.is-busy::after {
  content: "";
  position: absolute;
  bottom: 3px;
  width: 4px;
  height: 4px;
  border-radius: 99px;
  background: var(--accent);
}
.rental-rail-cal__day.is-today {
  border: 1px solid rgba(255, 255, 255, 0.28);
}
.rental-rail-cal__day.is-focus,
.rental-rail-cal__day:hover {
  background: rgba(255, 42, 42, 0.18);
}
.rental-rail-cal__hint {
  margin: 8px 0 0;
  font-size: 0.68rem;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.42);
}

.ks-map-brand-mask,
.map-embed,
.groups-map__map-area,
.gps-map-area {
  position: relative;
  overflow: hidden;
}
.ks-map-brand-mask::after,
.map-embed::after,
.groups-map__map-area::after,
.gps-map-area::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 28px;
  background: #0a0a0c;
  z-index: 640;
  pointer-events: none;
}
.leaflet-bottom.leaflet-left {
  bottom: 82px !important;
  z-index: 700 !important;
}
.ks-map-layers {
  z-index: 700 !important;
}
.gl-panel-section {
  gap: 10px;
  padding: 14px 14px 16px;
  margin: 0 0 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.035);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.gl-panel-section:last-of-type {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.gl-panel-hint {
  margin: 0 0 4px !important;
  font-size: 0.78rem;
  line-height: 1.45;
}
.gl-panel-section--view .ks-switch-field {
  margin: 0;
}
.gl-map-user-label__dot {
  display: block;
  width: 14px;
  height: 14px;
  border-radius: 999px;
  border: 2px solid #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}
.leaflet-control-attribution,
.leaflet-bottom.leaflet-right .leaflet-control-attribution {
  display: none !important;
}

.groups-map-split--open .groups-map-sidepanel {
  flex: 0 0 min(400px, 48vw) !important;
  width: min(400px, 48vw) !important;
  max-width: min(400px, 48vw) !important;
}
/* Desktop-only side dock in native fullscreen — mobile uses bottom sheet (see end of file). */
@media (min-width: 721px) {
  .groups-map-split:fullscreen.groups-map-split--open .groups-map-sidepanel,
  .groups-map-split:-webkit-full-screen.groups-map-split--open .groups-map-sidepanel {
    flex: 0 0 min(440px, 36vw) !important;
    width: min(440px, 36vw) !important;
    max-width: min(440px, 36vw) !important;
  }
}
.groups-map-sidepanel__head {
  padding: 16px 18px !important;
}
.groups-map-sidepanel__title {
  font-family: var(--font-display);
  font-size: 1.02rem !important;
  font-weight: 700;
}
.groups-map-sidepanel__scroll {
  padding: 8px 18px 28px !important;
}
.gl-panel-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 14px 16px;
  margin: 0 0 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
}
.gl-panel-section:last-of-type {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.gl-panel-section__title {
  margin: 0;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.42);
}
.gl-panel-kv {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.gl-panel-kv__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  font-size: 0.86rem;
}
.gl-panel-kv__row dt {
  color: rgba(255, 255, 255, 0.45);
  font-weight: 500;
}
.gl-panel-kv__row dd {
  margin: 0;
  font-weight: 600;
  text-align: right;
  color: #fff;
}
.groups-map-sidepanel .groups-map__actions {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 8px !important;
}
.groups-map-sidepanel .groups-map__actions .btn-accent,
.groups-map-sidepanel .groups-map__actions .btn {
  width: 100%;
  justify-content: center;
}
.groups-map-sidepanel .groups-map__meet {
  margin: 0;
  padding: 14px !important;
}
.groups-map-sidepanel .group-location-note {
  margin: 0 !important;
}
.groups-map-sidepanel .group-location-credits {
  margin: 14px 0 8px !important;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.groups-map-sidepanel .ks-switch-field__ui {
  width: 100%;
  box-sizing: border-box;
}
.groups-map-sidepanel .field {
  margin: 0;
}
.group-location-routes .gr-route-builder,
.group-location-routes .gr-route-viewer {
  margin-bottom: 14px;
  padding: 14px !important;
}

.v4-whatsapp {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 12px 0 4px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(37, 211, 102, 0.35);
  background: rgba(37, 211, 102, 0.1);
  color: #fff !important;
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.v4-whatsapp:hover {
  background: rgba(37, 211, 102, 0.18);
  border-color: rgba(37, 211, 102, 0.55);
}
.v4-whatsapp__logo {
  display: inline-flex;
  width: 36px;
  height: 36px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #25d366;
  color: #052e16;
  flex-shrink: 0;
}
.v4-whatsapp__text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.v4-whatsapp__text strong {
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.v4-whatsapp__text span {
  font-size: 0.92rem;
  font-weight: 600;
}
.v4-whatsapp--home {
  margin: 0;
  border-color: rgba(37, 211, 102, 0.28) !important;
  background: rgba(37, 211, 102, 0.08) !important;
}
.home-main-toolbar__role {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--accent-line);
  background: rgba(255, 42, 42, 0.12);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.dash.dash--simple .dash-shell--full:has(.dash-page--chat) {
  max-width: none !important;
  width: 100%;
  padding: 0 12px 12px !important;
}
.dash-content--full:has(.dash-page--chat) {
  min-height: calc(100dvh - 88px);
}
.dash-page--chat {
  max-width: none !important;
  width: 100%;
  padding-bottom: 0 !important;
}
.dash-page--chat .dash-page__messenger,
.dash-page--chat .messenger.ig-dm {
  border-radius: 14px !important;
}
@media (min-width: 901px) {
  .dash-page--chat .ig-dm__sidebar,
  .dash-page--chat .messenger__sidebar {
    width: clamp(280px, 32vw, 440px) !important;
    min-width: 260px !important;
    max-width: 440px !important;
  }
}
.dash-page--chat .ig-dm__head {
  font-size: 0.82rem !important;
  padding: 16px 18px !important;
}
.dash-page--chat .ig-dm-row {
  padding: 14px 16px !important;
}
.dash-page--chat .ig-dm-row__name {
  font-size: 0.95rem !important;
}
.dash-page--chat .ig-dm-row__snippet {
  font-size: 0.82rem !important;
}
.dash-page--chat .ig-msg {
  font-size: 0.95rem !important;
  line-height: 1.55 !important;
  max-width: min(72%, 640px);
}
.dash-page--chat .ig-dm__input,
.dash-page--chat .messenger__input {
  min-height: 52px !important;
  font-size: 0.95rem !important;
}
.dash-page--chat .ig-dm__thread,
.dash-page--chat .messenger__messages {
  padding: 18px 20px !important;
}
.dash-page--chat .ig-dm__composer,
.dash-page--chat .messenger__composer {
  padding: 12px 14px !important;
}
@media (max-width: 900px) {
  .groups-map-split--open .groups-map-sidepanel {
    width: 100% !important;
    max-width: 100% !important;
    max-height: min(56vh, 520px) !important;
  }
  .dash-page--chat .ig-dm__sidebar,
  .dash-page--chat .messenger__sidebar {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
  }
}

/* ==========================================================================
   42. PASS — ostrost, GPS web, fórum, otevřená skupina, domov
   ========================================================================== */
.btn-accent,
.btn-hero,
button.btn-accent {
  background: var(--accent) !important;
  color: #fff !important;
  border-color: transparent !important;
  font-weight: 700;
}
.btn-accent:hover,
.btn-hero:hover {
  background: var(--accent-hi) !important;
}

.gps-web-settings {
  margin: 0 0 16px;
  padding: 14px 14px 12px;
  border: 1px solid var(--accent-line);
  border-radius: var(--radius);
  background: var(--accent-soft);
}
.gps-web-settings__label {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.72rem;
  color: #fff;
}
.gps-web-sheet {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(0, 0, 0, 0.62);
  backdrop-filter: blur(8px);
}
.gps-web-sheet[hidden] {
  display: none !important;
}
.gps-web-sheet__card {
  width: min(520px, 100%);
  padding: 18px 18px 16px !important;
  border: 1px solid var(--accent-line) !important;
  box-shadow: var(--shadow);
}
.gps-web-sheet__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
.gps-web-sheet__head h3 {
  margin: 0;
  font-size: 1.05rem;
}
.gps-web-sheet__name {
  margin: 0 0 12px;
  font-weight: 700;
  color: #fff;
}
.gps-web-sheet .mono,
.gps-kv dd.mono {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  color: #fff;
}

body.gps-web-page {
  min-height: 100dvh;
  background: #07070a;
  margin: 0;
}
.gps-web-page__wrap {
  width: min(920px, calc(100% - 28px));
  margin: 0 auto;
  padding: 28px 0 40px;
  display: grid;
  gap: 14px;
}
.gps-web-page__brand {
  font-family: var(--font-display);
  font-weight: 800;
  font-style: italic;
  letter-spacing: 0.04em;
  color: #fff;
  text-decoration: none;
}
.gps-web-page__brand span {
  color: var(--accent);
}
.gps-web-page__kicker {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.gps-web-page__card {
  padding: 18px !important;
}
.gps-web-page__card h1 {
  margin: 0 0 4px;
  font-size: 1.35rem;
}
.gps-web-page__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.gps-web-page__map {
  min-height: 420px;
  overflow: hidden;
  padding: 0 !important;
}
.gps-web-page__map #gw-map {
  height: 420px;
  width: 100%;
  background: #111;
}

.forum-rail-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.forum-rail-stats__item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 8px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  text-align: center;
}
.forum-rail-stats__item strong {
  color: var(--accent);
  font-size: 1.15rem;
  font-family: var(--font-display);
}
.forum-rail-stats__item span {
  color: var(--muted);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.forum-lead {
  margin: 8px 0 16px !important;
  line-height: 1.55;
}
.forum-search {
  max-width: 420px;
  margin-bottom: 16px;
}
.forum-cat-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
.forum-cat-tile {
  display: grid !important;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  color: inherit;
}
.forum-cat-tile__mark {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  box-shadow: 0 0 0 1px rgba(255, 42, 42, 0.08), 0 8px 18px rgba(255, 42, 42, 0.12);
}
.forum-cat-tile__mark::after {
  content: "";
  display: block;
  width: 14px;
  height: 14px;
  margin: 14px auto;
  border-radius: 3px;
  background: var(--accent);
}
.forum-cat-tile__body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.forum-cat-tile__desc {
  color: var(--muted);
  font-size: 0.8rem;
}
.forum-cat-tile__nums {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: right;
  font-size: 0.74rem;
  color: var(--muted);
  white-space: nowrap;
}
.forum-cat-tile__nums strong {
  color: var(--accent);
  font-weight: 800;
}
.forum-cat-tile:hover .forum-cat-tile__mark {
  box-shadow: 0 0 16px rgba(255, 42, 42, 0.35);
}
.forum-post--v4 {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 16px;
  margin-bottom: 12px;
  padding: 16px !important;
}
.forum-post__author {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
  padding-right: 12px;
  border-right: 1px solid var(--border);
}
.forum-post__avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--border-2);
  background: #111;
}
.forum-post__author strong {
  font-size: 0.8rem;
  word-break: break-word;
}
.forum-post__body {
  line-height: 1.6;
  white-space: pre-wrap;
  color: var(--text);
}
.forum-post__main .btn {
  margin-top: 10px;
}
@media (max-width: 720px) {
  .forum-post--v4 {
    grid-template-columns: 1fr;
  }
  .forum-post__author {
    flex-direction: row;
    justify-content: flex-start;
    border-right: 0;
    border-bottom: 1px solid var(--border);
    padding: 0 0 10px;
  }
  .forum-cat-tile {
    grid-template-columns: 36px minmax(0, 1fr);
  }
  .forum-cat-tile__nums {
    grid-column: 2;
    flex-direction: row;
    gap: 12px;
    text-align: left;
  }
}

.groups-hub--open {
  overflow: hidden;
  padding: 0 !important;
  border: 1px solid var(--border) !important;
}
.groups-hub__cover {
  height: 128px;
  background-color: #101014;
  background-position: center center;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  position: relative;
}
.groups-hub--open .groups-hub__cover {
  height: 210px;
  background-size: cover !important;
  background-position: center center !important;
  filter: saturate(1.2) contrast(1.08);
}
.groups-hub--open .groups-hub__avatar,
.groups-hub__avatar {
  display: block;
  object-fit: cover !important;
  object-position: center center !important;
  background-color: #1a1a22;
}
.group-settings-avatar-preview__img {
  width: 96px !important;
  height: 96px !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block;
}
.groups-hub__cover::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.15), rgba(7, 7, 10, 0.88));
}
.groups-hub__cover--empty {
  background:
    radial-gradient(80% 120% at 10% 0%, rgba(255, 42, 42, 0.28), transparent 55%),
    linear-gradient(135deg, #141418, #07070a);
}
.groups-hub--open .groups-hub__head {
  position: relative;
  padding: 0 18px 14px;
  margin: -36px 0 0;
  grid-template-columns: auto 1fr;
  align-items: end;
}
.groups-hub--open .groups-hub__back {
  position: absolute;
  top: -78px;
  left: 14px;
  z-index: 2;
  color: #fff;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.7);
}
.groups-hub--open .groups-hub__avatar {
  width: 72px;
  height: 72px;
  border-radius: 16px;
  border: 3px solid #0d0d12;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}
.groups-hub--open .groups-tabs-bar {
  margin: 0 12px 12px;
  border: 0;
  background: transparent;
}
.groups-hub--open .groups-tabs-bar__link.is-active {
  color: #fff !important;
  border-bottom-color: var(--accent) !important;
}
.groups-layout--in-group .groups-body {
  max-width: min(1120px, 100%);
}
.groups-quick-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px !important;
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--border) !important;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.groups-quick-card:hover {
  border-color: var(--accent-line) !important;
  transform: translateY(-1px);
}
.groups-quick-card__label {
  font-family: var(--font-display);
  font-weight: 800;
}
.groups-quick-card__cta {
  margin-top: 8px;
  color: var(--accent);
  font-size: 0.78rem;
  font-weight: 700;
}
.group-open-stage .group-chat-panel,
.group-open-stage .group-posts-compose {
  border: 1px solid var(--border) !important;
  background: rgba(16, 16, 21, 0.94) !important;
}
.group-chat-thread {
  min-height: 0;
  overflow: auto;
  padding: 8px 10px;
}
.group-chat-composer {
  display: flex !important;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: end;
  padding: 8px 10px;
  border-top: 1px solid var(--border);
}

.home-welcome {
  position: relative;
  overflow: visible;
  border: 1px solid var(--accent-line) !important;
  background:
    radial-gradient(90% 140% at 0% 0%, rgba(255, 42, 42, 0.16), transparent 50%),
    rgba(14, 14, 18, 0.96) !important;
}
.home-welcome__glow {
  position: absolute;
  inset: auto -20% -40% auto;
  width: 280px;
  height: 180px;
  background: radial-gradient(circle, rgba(255, 42, 42, 0.18), transparent 70%);
  pointer-events: none;
}
.home-welcome .home-main-toolbar__title {
  font-size: clamp(1.4rem, 2.4vw, 1.85rem);
  letter-spacing: 0.02em;
}
.home-welcome .home-main-toolbar__user {
  color: #fff;
  font-weight: 800;
}

.projekt-layout .projekt-card,
.projekt-layout .garage-scene {
  border-color: var(--border-2) !important;
}
.garage-scene-shell__rim {
  box-shadow: 0 0 0 1px var(--accent-line);
}

.ig-profile-header {
  border-bottom: 1px solid var(--border);
}
.ks-profile-card {
  border-color: var(--border-2) !important;
}

@media (max-width: 720px) {
  .gps-web-page__map #gw-map {
    height: 280px;
  }
  .groups-hub__cover {
    height: 96px;
  }
}

/* ==========================================================================
   43. V4 PUNCH — skupiny, domov, plné barvy
   ========================================================================== */
.section-layout:has(.ks-groups-mine) .section-rail {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(10, 10, 14, 0.82) 0%, rgba(10, 10, 14, 0.55) 48%, rgba(10, 10, 14, 0.88) 100%),
    url("hero-workshop-v4.jpg") center 70% / cover no-repeat !important;
}
.groups-my-cards {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)) !important;
  gap: 16px !important;
}
.groups-browse-cards.groups-my-cards .groups-browse-card,
.groups-my-card {
  background: #121216 !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 12px !important;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.35);
}
.groups-my-card:hover,
.groups-browse-card:hover {
  border-color: #ff1a1a !important;
  box-shadow: 0 0 0 1px rgba(255, 26, 26, 0.45), 0 18px 40px rgba(255, 26, 26, 0.22) !important;
  transform: translateY(-3px);
}
.groups-card__cover {
  display: block;
  height: 158px;
  aspect-ratio: auto !important;
  background-size: cover;
  background-position: center;
  background-color: #101014;
}
.groups-card__cover--empty,
.groups-card__cover:has(.groups-card__avatar--ph) {
  background:
    radial-gradient(80% 120% at 20% 0%, rgba(255, 26, 26, 0.45), transparent 55%),
    linear-gradient(135deg, #1a1a22, #08080c);
}
.groups-my-cards .groups-card__avatar,
.groups-browse-card .groups-card__avatar {
  width: 100% !important;
  height: 158px !important;
  object-fit: cover;
  border: 0 !important;
  border-radius: 0 !important;
}
.groups-card__body {
  padding: 14px 16px 16px !important;
}
.groups-my-cards .groups-card__title,
.groups-browse-card .groups-card__title {
  font-size: 1.05rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.01em;
}
.groups-card__cta,
.groups-card__actions .btn-accent {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: 10px;
  min-height: 40px;
  border-radius: 8px !important;
  background: #ff1a1a !important;
  color: #fff !important;
  font-weight: 800 !important;
  letter-spacing: 0.04em;
  box-shadow: 0 8px 20px rgba(255, 26, 26, 0.32);
}

.groups-hub--open {
  background: #101014 !important;
  border: 1px solid rgba(255, 26, 26, 0.22) !important;
  box-shadow: 0 22px 50px rgba(0, 0, 0, 0.45);
}
.groups-hub--open .groups-hub__cover {
  height: 210px;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  filter: saturate(1.2) contrast(1.08);
}
.groups-hub--open .groups-hub__cover::after {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.05) 20%, rgba(8, 8, 12, 0.92) 100%);
}
.groups-hub--open .groups-hub__head {
  margin-top: -52px;
  padding: 0 22px 8px;
  align-items: end;
}
.groups-hub--open .groups-hub__back {
  top: -148px;
  left: 18px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-weight: 700;
}
.groups-hub--open .groups-hub__avatar {
  width: 92px;
  height: 92px;
  border-radius: 18px;
  border: 3px solid #ff1a1a !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.5), 0 0 0 4px #101014;
  object-fit: cover;
}
.groups-hub--open .groups-hub__title {
  font-size: clamp(1.35rem, 2.4vw, 1.75rem);
  font-weight: 800;
  letter-spacing: 0.01em;
}
.groups-hub__sub {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: center;
  margin: 8px 0 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.86rem;
}
.groups-hub__badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 26, 26, 0.45);
  background: rgba(255, 26, 26, 0.16);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.groups-hub--open .groups-tabs-bar {
  margin: 4px 12px 14px;
  padding: 4px 8px 10px;
  background: transparent;
}
.groups-hub--open .groups-tabs-bar__row {
  gap: 2px;
}
.groups-hub--open .groups-tabs-bar__link {
  padding: 10px 14px;
  font-size: 0.9rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.62);
}
.groups-hub--open .groups-tabs-bar__link.is-active {
  color: #fff !important;
  border-bottom: 3px solid #ff1a1a !important;
  background: transparent !important;
}

.groups-overview {
  gap: 18px;
}
.groups-quick-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 14px !important;
}
.groups-quick-card {
  min-height: 132px;
  padding: 18px 18px 16px !important;
  background: #16161c !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 14px !important;
}
.groups-quick-card:hover {
  border-color: #ff1a1a !important;
  background: rgba(255, 26, 26, 0.08) !important;
  box-shadow: 0 12px 28px rgba(255, 26, 26, 0.16);
}
.groups-quick-card__icon {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
  border-radius: 12px;
  background: #ff1a1a;
  font-size: 1.25rem;
  box-shadow: 0 8px 18px rgba(255, 26, 26, 0.35);
}
.groups-quick-card__label {
  font-size: 1.05rem !important;
}
.groups-quick-card__cta {
  display: inline-flex;
  margin-top: auto;
  padding-top: 10px;
  color: #ff1a1a;
  font-weight: 800;
}
.group-open-stage .group-chat-panel,
.group-open-stage .group-posts-compose {
  background: #141418 !important;
  border-color: rgba(255, 26, 26, 0.18) !important;
}
.group-chat-composer__send,
.group-open-stage .btn-accent {
  background: #ff1a1a !important;
  box-shadow: 0 8px 20px rgba(255, 26, 26, 0.3);
}

.home-welcome--cinema {
  min-height: 188px;
  padding: 28px 26px 22px !important;
  border: 1px solid rgba(255, 26, 26, 0.35) !important;
  background: #0c0c10 !important;
}
.home-welcome__photo {
  position: absolute;
  inset: 0 0 0 28%;
  background: url("hero-workshop-v4.jpg") center 40% / cover no-repeat;
  opacity: 0.72;
  filter: saturate(1.25) contrast(1.1);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 28%);
  mask-image: linear-gradient(90deg, transparent, #000 28%);
  pointer-events: none;
  border-radius: inherit;
  overflow: hidden;
}
.home-welcome--cinema .home-welcome__glow {
  width: 360px;
  height: 220px;
  background: radial-gradient(circle, rgba(255, 26, 26, 0.32), transparent 70%);
}
.home-welcome--cinema .home-main-toolbar__title {
  font-size: clamp(1.7rem, 3vw, 2.25rem) !important;
  font-style: italic;
  font-weight: 800;
}
.home-welcome--cinema .home-main-toolbar__eyebrow {
  color: #ff1a1a;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
}
.home-welcome--cinema .home-main-toolbar__greet {
  font-size: 1.05rem;
  color: rgba(255, 255, 255, 0.88);
}
.home-main-content--overview .home-main-toolbar::after {
  display: none;
}
.home-quick-link--accent {
  background: #ff1a1a !important;
  border-color: #ff1a1a !important;
  color: #fff !important;
  box-shadow: 0 10px 24px rgba(255, 26, 26, 0.32);
}
.home-quick-link--accent .home-quick-link__label,
.home-quick-link--accent .home-quick-link__hint {
  color: #fff !important;
}
.home-services-panel,
.home-support-panel {
  background: #141418 !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  min-height: 260px;
}
.home-section-title {
  font-family: var(--font-display);
  font-size: 1.12rem !important;
  letter-spacing: 0.04em;
}
.home-quick-link {
  padding: 12px 14px !important;
  border-radius: 10px !important;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
}
.home-group-announcements {
  border: 1px solid rgba(255, 26, 26, 0.45) !important;
  background:
    radial-gradient(80% 120% at 100% 0%, rgba(255, 26, 26, 0.12), transparent 50%),
    #141418 !important;
}
.home-hub {
  background: #141418 !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}
.home-hub__tile {
  min-height: 108px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
}
.home-hub__tile:hover {
  border-color: #ff1a1a;
  box-shadow: 0 10px 24px rgba(255, 26, 26, 0.16);
}
.home-hub__tile-icon {
  color: #ff1a1a;
  font-size: 1.45rem;
}

@media (max-width: 720px) {
  .groups-quick-grid {
    grid-template-columns: 1fr !important;
  }
  .groups-hub--open .groups-hub__cover {
    height: 140px;
  }
  .home-welcome__photo {
    inset: 0;
    opacity: 0.28;
    -webkit-mask-image: none;
    mask-image: none;
  }
}

.groups-layout--in-group .groups-body {
  max-width: min(1100px, 100%) !important;
  width: 100%;
}
.group-section-page {
  width: 100%;
}
.group-section-page.dash-page--prispevky,
.group-posts-stage.group-section-page,
.group-ann-stage.group-section-page {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: none !important;
  margin: 0;
}
.group-section-page .ks-feed-head {
  margin: 0;
}
.group-section-page .ks-feed-head__title {
  margin: 0;
  font-size: 1.2rem;
}
.group-ann-stage .group-ann-hint {
  margin: 10px 0 0;
  max-width: 62ch;
}
.group-posts-compose,
.group-ann-compose {
  padding: 16px 18px !important;
}
.group-feed-avatar {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 36px !important;
  height: 36px !important;
  border-radius: 50%;
  background: #1c1c24;
  border: 1px solid rgba(255, 255, 255, 0.12);
  font-weight: 800;
  font-size: 0.86rem;
  color: #f3f3f6;
  flex-shrink: 0;
}
.group-section-page .prispevky-feed {
  padding: 12px;
}
.group-section-page .prispevky-feed__list.is-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.groups-layout--in-group:has(.group-chat-stage) .groups-body,
.groups-page--in-group.groups-page--chat-open .groups-body {
  display: flex;
  flex-direction: column;
  min-height: calc(100dvh - 96px);
  gap: 10px;
}
.groups-layout--in-group:has(.group-chat-stage) .groups-hub--open,
.groups-page--chat-open .groups-hub--open {
  flex: 0 0 auto;
}
.groups-page--chat-open .groups-hub--open {
  display: none !important;
}
.groups-page--chat-open .groups-body {
  min-height: calc(100dvh - 72px);
  padding: 0;
}
.groups-page--chat-open #group-chat-root {
  position: fixed;
  inset: 0;
  z-index: 1200;
  padding: 0;
  margin: 0;
  width: 100%;
  max-width: none;
  background: var(--bg, #0a0a0c);
}
.groups-page--chat-open #group-chat-root .group-chat-messenger {
  min-height: 100dvh !important;
  height: 100dvh !important;
  border-radius: 0 !important;
  border: 0 !important;
}
.groups-body .group-section-page.dash-page--chat.group-chat-stage {
  display: flex !important;
  flex: 1 1 auto;
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  max-width: none !important;
  overflow: hidden;
}
.group-chat-messenger.dash-page__messenger,
.group-chat-stage .group-chat-messenger.messenger.ig-dm {
  flex: 1 1 auto;
  width: 100% !important;
  max-width: none !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  display: flex !important;
  flex-direction: column;
  overflow: hidden;
}
.group-chat-messenger .ig-dm__main {
  width: 100% !important;
  flex: 1 1 auto;
  display: flex !important;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}
.group-chat-stage .ig-dm__titlebar {
  flex-shrink: 0;
  padding: 8px 12px !important;
  min-height: 0;
}
.group-chat-stage .ig-dm__peer {
  font-size: 0.92rem;
}
.group-chat-titlebar-sub {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.45);
  text-transform: none;
  letter-spacing: 0;
}
.group-chat-messenger .group-chat-thread {
  flex: 1 1 auto;
  min-height: 0 !important;
  max-height: none !important;
  height: auto;
  overflow-y: auto;
  padding: 8px 10px !important;
  gap: 5px !important;
}
.group-chat-stage .ig-dm__thread .ig-msg__who,
.group-chat-thread .ig-msg__who {
  display: inline !important;
}
.group-chat-stage .ig-msg {
  max-width: min(92%, 820px) !important;
  font-size: 0.8rem !important;
  line-height: 1.32 !important;
  padding: 5px 9px !important;
  border-radius: 12px !important;
}
.gcm-msg__meta {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 2px;
}
.group-chat-stage .ig-msg__who {
  font-size: 0.64rem;
  margin-bottom: 0;
  opacity: 0.7;
}
.group-chat-stage .gcm-msg__time {
  font-size: 0.62rem;
  opacity: 0.4;
}
.gcm-msg__del {
  margin-left: auto;
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.35);
  cursor: pointer;
  font-size: 0.9rem;
  line-height: 1;
  padding: 0 2px;
}
.group-chat-stage .ig-dm__empty,
.group-chat-stage .ig-dm__empty-state {
  margin-top: 16px !important;
  padding: 18px 8px;
}
.group-chat-thread .gcm-react {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  margin-top: 3px;
}
.group-chat-stage .gcm-react-btn {
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  color: inherit;
  border-radius: 999px;
  padding: 0 6px;
  min-height: 20px;
  font-size: 0.7rem;
  line-height: 1.3;
  cursor: pointer;
}
.group-chat-stage .group-chat-composer,
.group-chat-stage .ig-dm__composer,
.group-chat-stage .messenger__composer {
  display: flex !important;
  visibility: visible !important;
  align-items: flex-end;
  gap: 8px;
  padding: 8px 10px !important;
  flex-shrink: 0 !important;
  position: relative;
  z-index: 6;
}
.group-chat-stage .ig-dm__input,
.group-chat-stage .messenger__input {
  min-height: 36px !important;
  max-height: 88px !important;
  font-size: 0.86rem !important;
  padding: 7px 12px !important;
}
.group-chat-stage .ig-dm__send {
  width: 36px;
  height: 36px;
}
@media (max-width: 720px) {
  .group-chat-stage .ig-dm__main,
  .group-chat-messenger.ig-dm:not(.ig-dm--open) .ig-dm__main {
    display: flex !important;
  }
  .group-chat-stage .group-chat-messenger.messenger.ig-dm {
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
  }
}
.group-location-stage.group-section-page {
  min-height: min(72vh, calc(100dvh - 210px));
}
.group-location-stage .group-location-map,
.group-location-stage .groups-map-split {
  min-height: min(70vh, calc(100dvh - 230px)) !important;
}
.group-location-map .groups-map__map-area {
  min-height: min(56vh, 620px) !important;
  z-index: 1;
}
.group-location-map .groups-map__float-bar {
  z-index: 820 !important;
}
.group-location-map .groups-map__float-btn {
  pointer-events: auto !important;
  cursor: pointer;
}

/* ==========================================================================
   44. MOBILE UI — telefón a úzke okno (navigácia, profil, feed, chat, skupiny)
   ========================================================================== */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
.site-header {
  padding-top: max(10px, env(safe-area-inset-top, 0px));
  padding-bottom: 10px;
}
.header-flex {
  min-width: 0;
  gap: 8px;
}
.brand,
.brand-link,
.logo-container {
  min-width: 0;
}

@media (max-width: 950px) {
  /* Hamburger musí byť vždy vidět — v4 by jinak znovu ukázal desktop .nav. */
  .nav {
    display: none !important;
  }
  .nav-toggle {
    display: inline-flex !important;
    flex-shrink: 0;
  }
  .notif-bell--mobile {
    display: inline-flex !important;
    flex-shrink: 0;
  }
  /* Na úvodní stránce je hlavička schovaná do scrollu — na mobilu musí zůstat. */
  body.ks-home-hero .site-header {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: none !important;
  }
}

@media (max-width: 900px) {
  .dash {
    padding-top: calc(78px + env(safe-area-inset-top, 0px));
  }
  .dash.dash--simple .dash-shell--full {
    padding-left: 12px !important;
    padding-right: 12px !important;
    padding-bottom: 48px !important;
  }
  .dash-page,
  .dash-content--full,
  .section-body,
  .ks-profile-grid,
  .ks-profile-main,
  .ig-profile-root,
  .groups-hub,
  .groups-body,
  .card,
  .feed-stage,
  .prispevky-feed,
  .ks-profile-posts-feed {
    min-width: 0;
    max-width: 100%;
  }

  /* Chat: seznam NEBO vlákno, ne dva sloupce vedle sebe. */
  .dash-page--chat:not(.group-chat-stage) {
    min-height: calc(100dvh - 88px - env(safe-area-inset-top, 0px)) !important;
    height: auto !important;
    max-height: none !important;
  }
  .dash-page--chat:not(.group-chat-stage) .dash-page__messenger,
  .dash-page--chat:not(.group-chat-stage) .messenger.ig-dm {
    flex-direction: column !important;
    width: 100% !important;
    min-height: calc(100dvh - 120px - env(safe-area-inset-top, 0px)) !important;
    max-height: calc(100dvh - 100px - env(safe-area-inset-top, 0px)) !important;
    height: calc(100dvh - 120px - env(safe-area-inset-top, 0px)) !important;
    border-radius: 12px !important;
  }
  .dash-page--chat .messenger.ig-dm:not(.ig-dm--open) .ig-dm__main,
  .dash-page--chat .messenger.ig-dm:not(.ig-dm--open) .messenger__main {
    display: none !important;
  }
  .dash-page--chat .messenger.ig-dm.ig-dm--open .ig-dm__sidebar,
  .dash-page--chat .messenger.ig-dm.ig-dm--open .messenger__sidebar {
    display: none !important;
  }
  .dash-page--chat .messenger.ig-dm.ig-dm--open .ig-dm__main,
  .dash-page--chat .messenger.ig-dm.ig-dm--open .messenger__main {
    display: flex !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: 100% !important;
  }
  .dash-page--chat .ig-dm__back {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
  }
  .dash-page--chat .ig-msg {
    max-width: min(88%, 100%) !important;
  }
  .dash-page--chat .ig-dm__composer,
  .dash-page--chat .messenger__composer {
    padding-bottom: max(12px, env(safe-area-inset-bottom, 0px)) !important;
  }

  /* Skupinový chat nemá seznam konverzací — vždy jen vlákno. */
  .group-chat-stage .group-chat-messenger.messenger.ig-dm,
  .group-chat-stage .ig-dm__main {
    display: flex !important;
    flex-direction: column;
    width: 100% !important;
  }
  .group-chat-stage .group-chat-messenger.messenger.ig-dm {
    min-height: min(58vh, calc(100dvh - 220px)) !important;
    height: auto !important;
  }
  .group-chat-fs-btn {
    display: none !important;
  }

  /* Profil: akce a statistiky se vejdou pod sebe. */
  .ks-profile-head {
    align-items: stretch;
  }
  .ks-profile-head__actions {
    width: 100%;
  }
  .ks-profile-head__actions .btn {
    flex: 1 1 auto;
    justify-content: center;
    text-align: center;
  }
  .ig-profile-header,
  .ks-profile-card {
    flex-direction: column;
    align-items: flex-start !important;
  }
  .ks-profile-stats--pills {
    width: 100%;
  }
  .ks-profile-card .ig-profile-header__actions {
    width: 100%;
  }
  .ks-profile-card .ig-profile-header__actions .btn,
  .ks-profile-card .ig-profile-header__actions .btn-accent {
    flex: 1 1 calc(50% - 8px);
    justify-content: center;
    text-align: center;
    min-height: 42px;
  }
  .ks-profile-posts__head {
    align-items: stretch;
  }
  .ks-profile-posts__head .ks-viewtoggle {
    margin-left: 0;
  }
  .ks-profile-posts-feed.is-list {
    max-width: none;
  }

  /* Příspěvky — hlavička se skládá, tlačítka na celou šířku. */
  .ks-feed-head__row,
  .ks-feed-head__actions,
  .ks-feed-head__filters {
    width: 100%;
  }
  .ks-feed-head__actions {
    flex-wrap: wrap;
  }
  .ks-feed-head__new,
  .ks-profile-posts__new {
    flex: 1 1 auto;
    justify-content: center;
  }

  /* Skupiny: záložky posuvné do strany místo rozpadlé mřížky. */
  .groups-tabs-bar__row {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
  }
  .groups-tabs-bar__row::-webkit-scrollbar {
    display: none;
  }
  .groups-tabs-bar__link {
    flex: 0 0 auto;
    white-space: nowrap;
  }
  .groups-hub--open .groups-hub__head {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }
  .groups-hub--open .groups-hub__back {
    position: static;
    margin: 0 0 8px;
    text-shadow: none;
  }
  .groups-quick-grid {
    grid-template-columns: 1fr !important;
  }

  /* Formuláře: 16px, ať iOS nezoomuje při focusu. */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]),
  select,
  textarea,
  .field__input,
  .ui-input,
  .ig-dm__input,
  .ig-dm__search-input,
  .messenger__input {
    font-size: 16px !important;
  }

  .ui-modal {
    width: min(100vw - 16px, 560px) !important;
    max-height: min(88dvh, 860px);
  }

  .home-hub__grid {
    grid-template-columns: 1fr;
  }
  .home-main-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .auth-page {
    align-items: flex-start;
    padding-top: calc(84px + env(safe-area-inset-top, 0px));
    padding-left: 12px;
    padding-right: 12px;
  }
  .auth-card,
  .auth-card.glass {
    padding: 20px 16px 18px !important;
    background: #14141a !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  .auth-title {
    font-size: 1.3rem !important;
  }
  .auth-brand__word span:first-child,
  .auth-brand__word span:last-child {
    font-size: 1.2rem !important;
  }
  .auth-submit {
    width: 100%;
    min-height: 46px;
  }
}

@media (max-width: 720px) {
  .ks-feed-pills,
  .ks-feed-tabs {
    width: 100%;
    justify-content: flex-start;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
  }
  .ks-feed-tab,
  .ks-feed-pill {
    flex: 0 0 auto;
    white-space: nowrap;
  }
  .dash-page--prispevky.is-grid-view .prispevky-feed,
  .dash-page--profil .profile-posts-stage.prispevky-feed {
    padding: 0 !important;
  }
  .group-location-stage .group-location-map,
  .group-location-stage .groups-map-split {
    min-height: min(62vh, calc(100dvh - 180px)) !important;
  }
  .group-location-map .groups-map__map-area {
    min-height: min(48vh, 420px) !important;
  }
}

/* ==========================================================================
   45. APP SHELL — bez pätičky (příspěvky / zprávy / profil / skupiny)
   ========================================================================== */
body.ks-app-shell .dash.dash--simple .dash-shell--full {
  padding-bottom: 12px !important;
}

/* Zprávy: stránka je pevná, skroluje sa len zoznam / vlákno. */
html:has(body.ks-app-shell .dash-page--chat:not(.group-chat-stage)),
body.ks-app-shell:has(.dash-page--chat:not(.group-chat-stage)) {
  height: 100%;
  overflow: hidden;
}
body.ks-app-shell .dash:has(.dash-page--chat:not(.group-chat-stage)) {
  height: 100dvh;
  max-height: 100dvh;
  min-height: 0;
  overflow: hidden;
  padding-bottom: 0 !important;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}
body.ks-app-shell .dash:has(.dash-page--chat:not(.group-chat-stage)) .dash-shell--full,
body.ks-app-shell .dash:has(.dash-page--chat:not(.group-chat-stage)) .dash-content--full {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  max-width: none !important;
  width: 100%;
  padding-bottom: 10px !important;
}
body.ks-app-shell .dash-page--chat:not(.group-chat-stage) {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: 100% !important;
  max-height: none !important;
  display: flex !important;
  flex-direction: column;
  overflow: hidden;
}
body.ks-app-shell .dash-page--chat:not(.group-chat-stage) .dash-page__messenger,
body.ks-app-shell .dash-page--chat:not(.group-chat-stage) .messenger.ig-dm {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: 100% !important;
  max-height: none !important;
  overflow: hidden !important;
}
body.ks-app-shell .dash-page--chat:not(.group-chat-stage) .ig-dm__list,
body.ks-app-shell .dash-page--chat:not(.group-chat-stage) .messenger__messages,
body.ks-app-shell .dash-page--chat:not(.group-chat-stage) .ig-dm__thread {
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
body.ks-app-shell .dash-page--chat:not(.group-chat-stage) .ig-dm__composer,
body.ks-app-shell .dash-page--chat:not(.group-chat-stage) .messenger__composer {
  flex-shrink: 0;
}

@media (max-width: 900px) {
  body.ks-app-shell .dash:has(.dash-page--chat:not(.group-chat-stage)) .dash-shell--full {
    padding-left: 8px !important;
    padding-right: 8px !important;
    padding-bottom: 8px !important;
  }
  body.ks-app-shell .dash-page--chat:not(.group-chat-stage) .dash-page__messenger,
  body.ks-app-shell .dash-page--chat:not(.group-chat-stage) .messenger.ig-dm {
    min-height: 0 !important;
    max-height: none !important;
    height: 100% !important;
  }
}

/* ==========================================================================
   46. SERVIS MOBILE — overflow + containment
   ========================================================================== */
#ks-servis-shell,
.section-layout,
.section-body.orders-body,
.orders-card,
.orders-list-mount,
.orders-container-block,
.servis-dilna-tablewrap,
.table-wrap,
.admin-table-wrap,
.order-inline-detail,
.order-detail,
.gps-stage,
.gps-layout {
  max-width: 100%;
  min-width: 0;
}
.servis-cards-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)) !important;
}

@media (max-width: 900px) {
  #ks-servis-shell .section-rail__links {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 8px;
    scrollbar-width: none;
  }
  #ks-servis-shell .section-rail__links::-webkit-scrollbar {
    display: none;
  }
  #ks-servis-shell .section-rail__link {
    flex: 0 0 auto !important;
    min-width: 0 !important;
    white-space: nowrap;
  }

  .orders-table td,
  .customer-name,
  .customer-phone,
  .service-pill__text,
  .car-sub {
    overflow-wrap: anywhere;
    word-break: break-word;
    min-width: 0;
  }
  .orders-table--expandable.orders-table--rw .status-row,
  .orders-table--expandable.orders-table--rw .actions-row {
    flex-wrap: wrap;
    width: 100%;
  }
  .orders-table--expandable.orders-table--rw .status-select {
    width: 100%;
    max-width: 100%;
  }

  .servis-dilna-tablewrap,
  .orders-container-block,
  .admin-table-wrap,
  .table-wrap {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .calendar-card,
  .calendar-scroll {
    max-width: 100%;
    min-width: 0;
  }
  .calendar-scroll {
    margin-inline: 0 !important;
    overflow-x: auto;
  }
}

@media (max-width: 720px) {
  .servis-field--minw {
    min-width: 0 !important;
    width: 100% !important;
  }
  .orders-filter__input,
  .orders-filter__select {
    min-width: 0 !important;
    width: 100%;
  }
  .orders-card {
    padding: 14px 12px !important;
  }
  .gps-stage .gps-map-card {
    padding: 0 !important;
  }
  .group-location-map .groups-map__map-area.gps-map-area {
    margin: 8px 8px 0 !important;
  }
}

/* Honeypot / bot-guard — neviditelné pro lidi, boti často vyplní */
.ks-bot-guard,
.ks-hp-wrap {
  position: absolute !important;
  left: -10000px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  clip: rect(0, 0, 0, 0) !important;
}
.ks-hp-field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
  overflow: hidden !important;
}
.ks-hp-label {
  display: none !important;
}

/* ==========================================================================
   49. V4 PASS 2 — mockup alignment (all sections)
   Preserves body.ks-app-mode, mobile breakpoints, and light theme guards.
   ========================================================================== */

/* --- v4-extra-03: Pronájem / Prodej ------------------------------------- */
.ks-offer--rental .ks-offer__hero-media {
  background-image: url("hero-workshop-v4.jpg");
  opacity: 0.55;
  filter: brightness(0.5) saturate(0.85);
}
.ks-offer--sale .ks-offer__hero-media {
  background-image: url("hero-workshop-v4.jpg");
  opacity: 0.48;
  filter: brightness(0.42) saturate(0.8);
}
.ks-rental-row.is-reserved {
  opacity: 0.72;
}
.ks-rental-row__deposit {
  margin-top: 4px;
  font-size: var(--fs-sm);
}
.ks-rental-row__deposit strong {
  color: rgba(255, 255, 255, 0.9);
}
.ks-rental-row__book.btn-accent {
  width: 100%;
  min-height: var(--control-h);
  font-weight: 700;
  border-radius: var(--radius-sm);
}
.ks-sale-card__price {
  font-size: 1.05rem;
}
.ks-sale-card__cta.btn-accent {
  border-radius: var(--radius-sm);
  font-weight: 700;
}
@media (max-width: 860px) {
  .ks-rental-row {
    grid-template-columns: 1fr;
  }
  .ks-rental-row__body {
    border-left: 0;
    border-top: 1px solid var(--border);
  }
  .ks-offer__usp {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 520px) {
  .ks-offer__usp {
    grid-template-columns: 1fr;
  }
  .ks-offer__grid {
    grid-template-columns: 1fr;
  }
}

/* --- v4-sys-02: Domů — rychlé akce + doporučené skupiny ---------------- */
.home-v4-quick-actions {
  margin-bottom: var(--sp-4);
  position: relative;
  z-index: 1;
}
.home-main-content--overview > header.home-main-toolbar {
  z-index: 120;
}
.home-v4-quick-actions__title,
.home-v4-rec-groups__title {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 700;
  color: #fff;
}
.home-v4-quick-actions__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.home-v4-action-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--panel);
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.home-v4-action-card--link {
  text-decoration: none;
}
.home-v4-action-card:hover {
  border-color: var(--accent-line);
  box-shadow: 0 0 22px rgba(255, 42, 42, 0.14);
  transform: translateY(-1px);
}
.home-v4-action-card__icon {
  font-size: 1.35rem;
  line-height: 1;
}
.home-v4-action-card__label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-ui);
  color: #fff;
}
.home-v4-action-card__hint {
  font-size: var(--fs-sm);
  color: var(--muted-2);
  line-height: 1.45;
}
.home-v4-action-card__btn {
  margin-top: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: #fff;
  font-size: var(--fs-sm);
  font-weight: 700;
}
.home-v4-rec-groups {
  margin-bottom: var(--sp-4);
  padding: 16px 18px !important;
  border: 1px solid var(--border) !important;
}
.home-v4-rec-groups__row {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 4px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.home-v4-rec-group {
  flex: 0 0 min(220px, 78vw);
  scroll-snap-align: start;
  display: grid;
  grid-template-columns: 48px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: rgba(0, 0, 0, 0.22);
}
.home-v4-rec-group__avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--border-2);
}
.home-v4-rec-group__avatar--empty {
  display: block;
  background: linear-gradient(135deg, rgba(255, 42, 42, 0.2), rgba(30, 30, 38, 0.9));
}
.home-v4-rec-group__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.home-v4-rec-group__body strong {
  font-size: var(--fs-sm);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 640px) {
  .home-v4-quick-actions__grid {
    grid-template-columns: 1fr;
  }
}

/* --- v4-sys-03: Skupiny — aktivní záložka s glow ----------------------- */
.groups-tabs-bar__link.is-active {
  color: #fff !important;
  border: 1px solid var(--accent-line) !important;
  border-bottom: 1px solid var(--accent-line) !important;
  border-radius: 8px !important;
  background: rgba(255, 42, 42, 0.14) !important;
  box-shadow: 0 0 18px rgba(255, 42, 42, 0.22);
  font-weight: 700;
}
.groups-my-card.is-selected,
.groups-browse-card.is-selected {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 1px rgba(255, 42, 42, 0.35), 0 0 24px rgba(255, 42, 42, 0.12);
}

/* --- v4-extra-04: Nastavení účtu — statistiky nahoře ------------------- */
.settings-quick-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  margin-bottom: var(--sp-4);
}
.settings-quick-stat {
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--panel);
}
.settings-quick-stat strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: #fff;
}
.settings-quick-stat span {
  font-size: var(--fs-xs);
  color: var(--muted-2);
}

/* --- v4-sys-04: Servis / Admin — rail + karty -------------------------- */
.section-rail__link.is-active,
.section-rail__links a.is-active {
  border-left-color: var(--accent) !important;
  background: rgba(255, 42, 42, 0.1) !important;
  color: #fff !important;
  font-weight: 600;
}
.orders-card,
.admin-table-wrap,
.servis-dilna-tablewrap {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--panel);
}

/* --- v4-extra-01: GPS --------------------------------------------------- */
.gps-stage .dash-page__head,
#ks-servis-shell .gps-map-card {
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  background: var(--panel) !important;
}

/* --- v4-extra-02: Fórum — zvýrazněná kategorie ------------------------- */
.forum-cat-tile.is-active,
.forum-cat-tile:focus-within {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 1px rgba(255, 42, 42, 0.35), 0 0 22px rgba(255, 42, 42, 0.12);
}

/* --- v4-extra-05: Oznámení — panel ------------------------------------- */
.notif-panel {
  border: 1px solid var(--border-2) !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55) !important;
}
.notif-card:not(.notif-card--read) {
  border-left: 3px solid var(--accent);
}

/* Plynulý vstup obsahu po přechodu mezi sekcemi */
@keyframes ks-dash-enter {
  from {
    opacity: 0.88;
    transform: translateY(5px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.dash-content,
.section-body {
  animation: ks-dash-enter 0.22s ease-out;
}
@media (prefers-reduced-motion: reduce) {
  .dash-content,
  .section-body {
    animation: none;
  }
}

/* --- v4-extra-06/08: Modály — ikony podle tónu ------------------------- */
.ui-modal--warning:not(.ui-modal--flow):not(.ui-modal--compose) {
  --ks-dialog-glyph: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'><path d='M9 21h6'/><path d='M10 17h4'/><path d='M12 3 3 19h18L12 3z'/><path d='M12 9v4'/></svg>");
}
.ui-modal--warning:not(.ui-modal--flow):not(.ui-modal--compose) > .ui-modal__header::before {
  border-color: var(--warn);
  background: rgba(245, 165, 36, 0.12);
}
.ui-modal--warning:not(.ui-modal--flow):not(.ui-modal--compose) > .ui-modal__header::after {
  background: var(--warn);
}
.ui-modal--info:not(.ui-modal--flow):not(.ui-modal--compose) {
  --ks-dialog-glyph: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'><rect x='5' y='10.5' width='14' height='10' rx='2.2'/><path d='M8.3 10.5V7.8a3.7 3.7 0 0 1 7.4 0v2.7'/></svg>");
}
.ui-modal--info:not(.ui-modal--flow):not(.ui-modal--compose) > .ui-modal__header::before {
  border-color: var(--accent);
  background: rgba(255, 42, 42, 0.1);
}
.ui-modal--info:not(.ui-modal--flow):not(.ui-modal--compose) > .ui-modal__header::after {
  background: var(--accent);
}
.ui-modal:not(.ui-modal--flow):not(.ui-modal--compose) > .ui-modal__footer {
  justify-content: center;
}
.ui-modal:not(.ui-modal--flow):not(.ui-modal--compose) > .ui-modal__footer > .ui-btn {
  flex: 1 1 0;
  max-width: 160px;
}

/* --- v4-sys-01: Auth — červený glow (mockup) ---------------------------- */
body.ks-auth-body .auth-card,
body.ks-auth-body .auth-card.glass {
  border-color: rgba(255, 42, 42, 0.42) !important;
  box-shadow:
    0 0 0 1px rgba(255, 42, 42, 0.1),
    0 0 36px rgba(255, 26, 26, 0.2),
    0 28px 70px rgba(0, 0, 0, 0.6) !important;
}

/* --- Public landing nav — Rezervace CTA (v4-cela-hlavni-stranka) -------- */
.nav--public .btn-accent.btn-accent--compact {
  min-height: 36px;
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  font-weight: 700;
  box-shadow: 0 0 18px rgba(255, 42, 42, 0.25);
}
.nav--public .nav-auth-link {
  color: rgba(255, 255, 255, 0.88);
  font-weight: 600;
}
.nav--public .nav-auth-link:hover {
  color: var(--accent-hi);
}

/* --- PC app + mobil: zachovat kompaktní layout --------------------------- */
body.ks-app-mode .home-v4-quick-actions__grid {
  grid-template-columns: 1fr;
}
body.ks-app-mode .ks-offer {
  padding-top: 72px;
}
@media (max-width: 950px) {
  .notif-panel {
    width: min(100vw - 24px, 380px) !important;
    max-height: min(78vh, 560px) !important;
  }
}

/* --- v4-sys-02: Příspěvky / Zprávy / Profil ---------------------------- */
.dash-page--prispevky .ks-feed-head,
.dash-page--chat .ig-dm__head,
.dash-page--profil .profile-hero {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--panel);
}
.dash-page--prispevky .ks-feed-tab.is-active,
.dash-page--prispevky .ks-feed-pill.is-active {
  border-color: var(--accent-line) !important;
  background: rgba(255, 42, 42, 0.14) !important;
  color: #fff !important;
  box-shadow: 0 0 14px rgba(255, 42, 42, 0.18);
}
.dash-page--chat .ig-dm__sidebar,
.dash-page--chat .ig-dm__main {
  border-color: var(--border);
}
.dash-page--chat .ig-dm__list-item.is-active,
.dash-page--chat .ig-dm__list-item:focus-within {
  border-left: 3px solid var(--accent);
  background: rgba(255, 42, 42, 0.08);
}
.dash-page--profil .profile-stat strong {
  color: #fff;
  font-family: var(--font-display);
}
.dash-page--profil .profile-stat {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: rgba(0, 0, 0, 0.2);
}

/* --- v4-extra-08: Cookies lišta ----------------------------------------- */
.ks-consent__card {
  border: 1px solid var(--border-2) !important;
  box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.45), 0 0 24px rgba(255, 42, 42, 0.08) !important;
}
.ks-consent__btn--accept {
  box-shadow: 0 0 16px rgba(255, 42, 42, 0.28);
}

@media (max-width: 640px) {
  .dash-page--chat .messenger.ig-dm {
    min-height: calc(100dvh - var(--nav-h, 56px) - 24px);
  }
  body.ks-app-mode .dash-page--chat .messenger.ig-dm {
    min-height: calc(100vh - 88px);
  }
}

/* --- Typing indicators (chat / support / skupiny) ------------------------ */
.ks-typing-indicator {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 22px;
  padding: 4px 2px 6px;
  font-size: 0.72rem;
  color: var(--muted-2, rgba(255, 255, 255, 0.62));
}
.ks-typing-indicator[hidden] {
  display: none !important;
}
.ks-typing-indicator--group {
  flex-wrap: wrap;
  gap: 6px;
}
.ks-typing-user-inline {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-right: 8px;
}
.ks-typing-user {
  font-weight: 700;
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.72rem;
}
.ks-typing-label {
  font-weight: 600;
}
.ks-typing-dots {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  height: 10px;
}
.ks-typing-dots i {
  display: block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent-hi, #ff1a1a);
  opacity: 0.35;
  animation: ks-typing-bounce 1.1s ease-in-out infinite;
}
.ks-typing-dots i:nth-child(2) { animation-delay: 0.15s; }
.ks-typing-dots i:nth-child(3) { animation-delay: 0.3s; }
@keyframes ks-typing-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.35; }
  30% { transform: translateY(-3px); opacity: 1; }
}
#ks-sc-typing,
#ks-dm-typing,
#gcm-typing {
  margin-top: 2px;
}

/* --- Groups hub tabs (bez úzkého sidebaru) --- */
.groups-page--hub .groups-body {
  max-width: none;
  width: 100%;
}
.groups-hub-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 12px;
  margin-bottom: 14px;
}
.groups-hub-tabs__link {
  display: inline-flex;
  align-items: center;
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--inset);
  color: var(--text);
  font-weight: 700;
  text-decoration: none;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.groups-hub-tabs__link:hover {
  border-color: rgba(255, 26, 26, 0.35);
}
.groups-hub-tabs__link.is-active {
  border-color: rgba(255, 26, 26, 0.55);
  background: rgba(255, 26, 26, 0.1);
  color: #fff;
}
.groups-page--in-group .groups-body {
  max-width: min(1280px, 100%);
}

/* --- Group chat fullscreen --- */
#group-chat-root:fullscreen,
#group-chat-root:-webkit-full-screen {
  display: flex;
  flex-direction: column;
  background: var(--bg, #0a0a0c);
  padding: 12px;
}
#group-chat-root:fullscreen .group-chat-messenger,
#group-chat-root:-webkit-full-screen .group-chat-messenger {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
#group-chat-root:fullscreen .group-chat-thread,
#group-chat-root:-webkit-full-screen .group-chat-thread {
  flex: 1;
  max-height: none !important;
  min-height: 0;
}

/* --- My orders / Forum hub (no left rail) --- */
.my-orders-page,
.forum-page-wrap {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
  max-width: min(1180px, 100%);
}
.my-orders-body,
.forum-body--full {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
}
.my-orders-page .projekt-hub-tabs__link .ks-my-orders-tabs__count,
.projekt-hub-tabs__link .ks-my-orders-tabs__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.4em;
  margin-left: 4px;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 800;
  background: rgba(255,255,255,0.1);
}
.projekt-hub-tabs__link.is-active .ks-my-orders-tabs__count {
  background: rgba(255, 26, 26, 0.25);
}
.forum-page-wrap .forum-page {
  width: 100%;
  max-width: none;
}
.projekt-body--full { width: 100%; max-width: min(1180px, 100%); }
.projekt-hub-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 12px;
}
.projekt-hub-tabs__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--inset);
  color: var(--text);
  font-weight: 700;
  text-decoration: none;
}
.projekt-hub-tabs__link.is-active {
  border-color: rgba(255, 26, 26, 0.55);
  background: rgba(255, 26, 26, 0.1);
}
.projekt-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  padding: 14px 16px;
  margin-bottom: 4px;
}
.projekt-stats__label {
  display: block;
  font-size: 0.72rem;
  color: var(--muted-2, rgba(255,255,255,0.62));
  margin-bottom: 4px;
}
.projekt-stats__val {
  font-size: 1rem;
  color: #fff;
}
.projekt-journal { display: flex; flex-direction: column; gap: 10px; }
.projekt-journal__row {
  padding: 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.03);
}
.projekt-journal__fields {
  display: grid;
  grid-template-columns: minmax(130px, 1fr) minmax(110px, 0.8fr) minmax(0, 2fr) auto;
  gap: 10px;
  align-items: end;
}
.projekt-journal__fields--servis { grid-template-columns: minmax(130px, 1fr) minmax(100px, 0.7fr) minmax(0, 2.2fr) auto; }
.projekt-journal__field--grow { min-width: 0; }
.projekt-journal__row--goal {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}
.projekt-journal__remove {
  align-self: end;
  min-width: 36px;
  padding: 6px 10px;
}
.projekt-journal__add { align-self: flex-start; }
.projekt-journal__badge {
  display: inline-block;
  margin-bottom: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  background: rgba(62,207,142,0.15);
  color: #7dffb8;
}
.projekt-journal__meta {
  margin-top: 8px;
  font-size: 0.82rem;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
}
.projekt-journal__link { color: var(--accent-hi, #ff6b6b); font-weight: 600; }
.projekt-journal-tools { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 4px; }
.projekt-orders-picker { padding: 14px; margin-bottom: 8px; }
.projekt-orders-pick { display: flex; flex-direction: column; gap: 10px; }
.projekt-orders-pick__item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.08);
}
@media (max-width: 720px) {
  .projekt-journal__fields,
  .projekt-journal__fields--servis {
    grid-template-columns: 1fr 1fr;
  }
  .projekt-journal__field--grow { grid-column: 1 / -1; }
  .projekt-journal__remove { grid-column: 2; justify-self: end; }
  .projekt-orders-pick__item { flex-direction: column; align-items: stretch; }
}
.groups-page--chat-open .group-chat-stage {
  flex: 1 1 auto;
  min-height: 100dvh !important;
}
html:has(.groups-page--chat-open) .dash-shell__main,
html:has(.groups-page--chat-open) .section-body {
  overflow: hidden;
}

/* --- ks-expand long text --- */
.ks-expand--clamp {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--ks-expand-lines, 4);
  overflow: hidden;
}
.ks-expand--open {
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
}
.ks-expand__btn {
  margin: 4px 0 10px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent-hi, #ff1a1a);
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
}
html[data-theme="light"] .customer-name,
html[data-theme="light"] .post-card__text,
html[data-theme="light"] .groups-overview__bio-text {
  color: var(--text, #111) !important;
}
html[data-theme="light"] .car-sub {
  color: var(--muted, #444) !important;
  opacity: 1 !important;
}

/* ==========================================================================
   MAP FULLSCREEN — loads last; beats earlier dock/width rules (Android + iOS)
   ========================================================================== */
html.ks-map-fs-lock,
body.ks-map-fs-lock {
  overflow: hidden !important;
  overscroll-behavior: none;
  height: 100% !important;
}

.ks-map-fs-active,
.groups-map-split:fullscreen,
.groups-map-split:-webkit-full-screen,
.gps-map-stage:fullscreen,
.gps-map-stage:-webkit-full-screen {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  margin: 0 !important;
  border-radius: 0 !important;
  border: none !important;
  overflow: hidden !important;
  background: #07070a !important;
  padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px) !important;
  box-sizing: border-box !important;
}

.ks-map-fs-active {
  position: fixed !important;
  inset: 0 !important;
  z-index: 2147483646 !important;
  width: 100dvw !important;
  height: 100dvh !important;
  min-height: 100dvh !important;
}

.ks-map-fs-active .groups-map-main,
.groups-map-split:fullscreen .groups-map-main,
.groups-map-split:-webkit-full-screen .groups-map-main,
.gps-map-stage:fullscreen .groups-map-main,
.gps-map-stage:-webkit-full-screen .groups-map-main {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
}

.ks-map-fs-active .groups-map__map-area,
.ks-map-fs-active .gps-map-area,
.groups-map-split:fullscreen .groups-map__map-area,
.groups-map-split:-webkit-full-screen .groups-map__map-area,
.gps-map-stage:fullscreen .groups-map__map-area,
.gps-map-stage:-webkit-full-screen .groups-map__map-area {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  border-radius: 0 !important;
  border: none !important;
}

.ks-map-fs-active .groups-map__canvas,
.ks-map-fs-active .gps-map-canvas,
.groups-map-split:fullscreen .groups-map__canvas,
.groups-map-split:-webkit-full-screen .groups-map__canvas,
.gps-map-stage:fullscreen .groups-map__canvas,
.gps-map-stage:-webkit-full-screen .groups-map__canvas {
  min-height: 100% !important;
  height: 100% !important;
}

.ks-map-fs-active .groups-map__caption-static,
.ks-map-fs-active .gps-map-caption,
.groups-map-split:fullscreen .groups-map__caption-static,
.groups-map-split:-webkit-full-screen .groups-map__caption-static,
.gps-map-stage:fullscreen .gps-map-caption,
.gps-map-stage:-webkit-full-screen .gps-map-caption {
  display: none !important;
}

.ks-map-fs-active:not(.groups-map-split--open) > .groups-map-sidepanel,
.groups-map-split:fullscreen:not(.groups-map-split--open) > .groups-map-sidepanel,
.groups-map-split:-webkit-full-screen:not(.groups-map-split--open) > .groups-map-sidepanel {
  display: none !important;
}

/* Bottom sheet above map — must win over dock widths / display:none */
.ks-map-fs-active.groups-map-split--open > .groups-map-sidepanel,
.groups-map-split:fullscreen.groups-map-split--open > .groups-map-sidepanel,
.groups-map-split:-webkit-full-screen.groups-map-split--open > .groups-map-sidepanel {
  display: flex !important;
  flex-direction: column !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  top: auto !important;
  width: 100% !important;
  max-width: 100% !important;
  height: min(62vh, 520px) !important;
  max-height: min(62vh, 520px) !important;
  flex: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  z-index: 10050 !important;
  border: none !important;
  border-radius: 16px 16px 0 0 !important;
  box-shadow: 0 -14px 40px rgba(0, 0, 0, 0.55) !important;
  overflow: hidden !important;
  background: rgba(8, 10, 16, 0.98) !important;
}

.ks-map-fs-active .groups-map__float-bar,
.groups-map-split:fullscreen .groups-map__float-bar,
.groups-map-split:-webkit-full-screen .groups-map__float-bar,
.gps-map-stage:fullscreen .groups-map__float-bar,
.gps-map-stage:-webkit-full-screen .groups-map__float-bar {
  top: auto !important;
  bottom: max(10px, env(safe-area-inset-bottom, 0px)) !important;
  left: 8px !important;
  right: 8px !important;
  justify-content: center !important;
  max-width: none !important;
  z-index: 10060 !important;
  pointer-events: none !important;
}

.ks-map-fs-active.groups-map-split--open .groups-map__float-bar,
.groups-map-split:fullscreen.groups-map-split--open .groups-map__float-bar,
.groups-map-split:-webkit-full-screen.groups-map-split--open .groups-map__float-bar {
  bottom: calc(min(62vh, 520px) + 10px) !important;
}

.ks-map-fs-active .groups-map__float-btn,
.groups-map-split:fullscreen .groups-map__float-btn,
.groups-map-split:-webkit-full-screen .groups-map__float-btn,
.gps-map-stage:fullscreen .groups-map__float-btn,
.gps-map-stage:-webkit-full-screen .groups-map__float-btn {
  pointer-events: auto !important;
}

@media (max-width: 720px) {
  .groups-map-split:fullscreen.groups-map-split--open > .groups-map-sidepanel,
  .groups-map-split:-webkit-full-screen.groups-map-split--open > .groups-map-sidepanel,
  .ks-map-fs-active.groups-map-split--open > .groups-map-sidepanel {
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
  }
}