:root {
    /* Backgrounds — three levels of depth */
    --bg: linear-gradient(to bottom, #F4F6F9, #EEF1F5);
    --surface: #FFFFFF;
    --surface2: #E8ECF2;
    --sidebar-bg: linear-gradient(to bottom, #DFE5EF, #D4DCE8);
    /* Borders */
    --border: #0A1F44;
    --border2: #B8C4D4;
    /* Text */
    --text: #0A1F44;
    --muted: #4A5568;
    --muted2: #8A94A6;
    /* Brand */
    --primary: #0A1F44;
    --ink-deep: #071530;
    --accent: #0A1F44;
    --accent-soft: rgba(10,31,68,0.08);
    /* Guld — se _private/handoff/BRAND.md §2/§4. Endast accent (CTA, aktivt
       läge, logotyp) — aldrig stor bakgrundsyta. Samma i båda lägena. */
    --gold-500: #F59E0B;
    --gold-300: #FBBF24;
    --gold-200: #FDE68A;
    --logo-gold: linear-gradient(135deg, #F59E0B 0%, #FDE68A 55%, #F59E0B 100%);
    /* Chain colors */
    --coop-color: #00AB46;
    --ica-color: #E3000B;
    --dagab-color: #0D4F35;
    /* Buttons */
    --btn-bg: #0A1F44;
    --btn-text: #FFFFFF;
    --btn-hover-bg: #0F2A5A;
    /* Navigation */
    --nav-text: #4A5568;
    --nav-hover-bg: #EEF2FF;
    --nav-active-bg: #EEF2FF;
    --nav-active-text: #0A1F44;
    --nav-active-border: #0A1F44;
    /* Inputs */
    --input-bg: #FFFFFF;
    --input-focus: #0A1F44;
    /* Tables */
    --table-hover: #F5F7FA;
    /* Shadows */
    --shadow-sm: 0 2px 8px rgba(10,31,68,0.10), 0 1px 3px rgba(10,31,68,0.08);
    --shadow-md: 0 4px 12px rgba(10,31,68,0.10);
    --shadow-lg: 0 8px 32px rgba(10,31,68,0.14);
    /* Horisontell scroll-hint (mobil) — mörk skugga mot ljus yta */
    --scroll-shadow-color: rgba(10,31,68,0.30);
    --font: 'Inter', 'Barlow', sans-serif;
    --display: 'Inter', 'Barlow Condensed', sans-serif;
  }
  body.dark {
    /* Backgrounds — three clear levels */
    --bg: linear-gradient(to bottom, #071530, #050F20);
    --surface: #0A1F44;
    --surface2: #0F2A5A;
    --sidebar-bg: linear-gradient(to bottom, #0A1F44, #071530);
    /* Borders */
    --border: #F0F4F8;
    --border2: #244880;
    /* Text */
    --text: #F0F4F8;
    --muted: #A0AEC0;
    --muted2: #6B7A8D;
    /* Brand */
    --primary: #F0F4F8;
    /* Mörkt läges accent = guld, inte lila — se BRAND.md §4 regel 2. */
    --accent: #FDE68A;
    --accent-soft: rgba(253,230,138,0.12);
    /* Chain colors */
    --coop-color: #00AB46;
    --ica-color: #E3000B;
    --dagab-color: #0D4F35;
    /* Buttons */
    --btn-bg: #2455A4;
    --btn-text: #FFFFFF;
    --btn-hover-bg: #2D63BC;
    /* Navigation */
    --nav-text: #A0AEC0;
    --nav-hover-bg: #0F2A5A;
    --nav-active-bg: #0F2A5A;
    --nav-active-text: #F0F4F8;
    --nav-active-border: #4A90D9;
    /* Inputs */
    --input-bg: #0F2A5A;
    --input-focus: #4A90D9;
    /* Tables */
    --table-hover: #0F2A5A;
    /* Shadows */
    --shadow-sm: 0 2px 8px rgba(0,0,0,0.3), 0 1px 3px rgba(0,0,0,0.2);
    --shadow-md: 0 4px 16px rgba(0,0,0,0.4);
    --shadow-lg: 0 8px 32px rgba(0,0,0,0.5);
    /* Ljus skugga mot mörk yta i mörkt läge */
    --scroll-shadow-color: rgba(240,244,248,0.26);
  }
  * { box-sizing: border-box; margin: 0; padding: 0; }

  body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--font);
    font-size: 13px;
    min-height: 100vh;
  }

  /* ── LAYOUT ── */
  .app { display: flex; min-height: 100vh; }

  /* SIDEBAR */
  .sidebar {
    width: 240px;
    min-width: 240px;
    background: var(--sidebar-bg);
    border-right: 1px solid var(--border);
    padding: 20px 0;
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
  }

  .logo {
    font-family: 'Barlow Condensed', sans-serif;
    padding: 0 16px 20px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 20px;
    line-height: 1;
    container-type: inline-size;
  }
  .logo-wordmark {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 100%;
    margin-bottom: 8px;
  }
  /* Horisontell logga — se _private/handoff/BRAND.md §2. Ljust/mörkt läge
     växlas med två <img>-taggar som togglas via body.dark, inte JS. */
  .logo-h { height: 32px; width: auto; max-width: 100%; object-fit: contain; }
  .logo-h-dark { display: none; }
  body.dark .logo-h-light { display: none; }
  body.dark .logo-h-dark { display: inline-block; }
  /* Symbol — visas bara i kollapsad sidebar, ersätter horisontella loggan. */
  .logo-symbol-wrap { display: none; text-align: center; }
  .logo-symbol-img { height: 28px; width: 28px; object-fit: contain; }
  .logo-symbol-dark { display: none; }
  body.dark .logo-symbol-light { display: none; }
  body.dark .logo-symbol-dark { display: inline-block; }
  .sidebar.sidebar-collapsed .logo-symbol-wrap { display: block; }
  .logo-for {
    font-size: 19px;
    color: var(--text);
    margin-bottom: 10px;
    text-align: center;
    line-height: 1;
  }
  .logo-company-drop {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    overflow: hidden;
    position: relative;
    padding: 4px 0;
  }
  .logo-company-drop img { max-height: 44px; max-width: 100%; object-fit: contain; }
  .logo-company-remove {
    position: absolute; top: 0; right: 0;
    font-size: 10px; color: var(--text); opacity: 0; cursor: pointer;
    background: var(--surface2); border-radius: 3px; padding: 0 4px;
    transition: opacity 0.15s;
  }
  .logo-company-drop:hover .logo-company-remove { opacity: 0.6; }
  .logo-company-drop:hover .logo-company-remove:hover { opacity: 1; }

  .sidebar-section {
    padding: 0 14px;
    margin-bottom: 8px;
  }
  .sidebar-divider {
    height: 1px;
    background: var(--border);
    margin: 6px 14px 10px;
  }
  .sidebar-label {
    font-size: 9px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--muted);
    padding: 0 6px;
    margin-bottom: 6px;
  }
  .nav-btn {
    color: var(--nav-text);
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    border-left: 3px solid transparent;
    padding: 8px 10px 8px 7px;
    border-radius: 4px;
    cursor: pointer;
    font-family: var(--font);
    font-size: 12px;
    margin-bottom: 2px;
    transition: all 0.12s;
  }
  .nav-btn:hover { background: var(--nav-hover-bg); color: var(--nav-text); border-left-color: transparent; }
  .nav-btn.active {
    background: var(--nav-active-bg);
    color: var(--nav-active-text);
    border-left-color: var(--nav-active-border);
    font-weight: 500;
  }
  .nav-btn .icon { margin-right: 8px; opacity: 0.7; font-size: 16px; vertical-align: middle; line-height: 1; }
  .nav-btn i.icon { font-style: normal; }

  /* ── SIDEBAR COLLAPSE ── */
  .sidebar { transition: width 0.22s ease, min-width 0.22s ease; }
  .sidebar.sidebar-collapsed { width: 60px; min-width: 60px; overflow-x: hidden; }
  .sidebar.sidebar-collapsed > * { max-width: 60px; overflow: hidden; }
  .sidebar.sidebar-collapsed .logo { padding: 8px 0; }
  .sidebar.sidebar-collapsed .logo-wordmark,
  .sidebar.sidebar-collapsed .logo-for,
  .sidebar.sidebar-collapsed .logo-company-drop { display: none; }
  .sidebar.sidebar-collapsed .sidebar-user-info { display: none; }
  .sidebar.sidebar-collapsed .sidebar-label { display: none; }
  .sidebar.sidebar-collapsed .sidebar-section { padding: 0 6px; }
  .sidebar.sidebar-collapsed .sidebar-divider { margin: 4px 8px 6px; }
  .sidebar.sidebar-collapsed .nav-btn { padding: 9px 4px; display: flex; justify-content: center; align-items: center; border-left: none; border-radius: 6px; }
  .sidebar.sidebar-collapsed .nav-label { display: none; }
  .sidebar.sidebar-collapsed .nav-icon { display: inline-block !important; font-size: 18px; margin: 0; }
  .sidebar:not(.sidebar-collapsed) .nav-icon { display: none; }

  /* Sidebar collapse-tab: fäst vid höger kant, alltid synlig */
  .sidebar-toggle-btn {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    left: 240px;
    z-index: 110;
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: none;
    border-radius: 0 8px 8px 0;
    box-shadow: 3px 0 10px rgba(0,0,0,0.10);
    width: 18px;
    height: 48px;
    cursor: pointer;
    color: var(--muted2);
    font-size: 11px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: left 0.22s ease, color 0.12s, background 0.12s;
    line-height: 1;
  }
  .sidebar-toggle-btn:hover { color: var(--text); background: var(--surface2); }
  .sidebar.sidebar-collapsed .sidebar-toggle-btn { left: 60px; }
  .sidebar-collapse-icon { display: inline-block; transition: transform 0.22s ease; }
  .sidebar.sidebar-collapsed .sidebar-collapse-icon { transform: rotate(180deg); }
  @media (max-width: 768px) { .sidebar-toggle-btn { display: none; } }

  /* ── SIDEBAR TOOLTIPS (collapsed mode only) ── */
  .sidebar.sidebar-collapsed .nav-btn { position: relative; overflow: visible; }
  .sidebar.sidebar-collapsed .nav-btn[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    left: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%);
    background: var(--surface);
    border: 1px solid var(--border2);
    border-radius: 7px;
    padding: 5px 10px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text);
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(0,0,0,0.10);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.12s;
    transition-delay: 0s;
    z-index: 200;
  }
  .sidebar.sidebar-collapsed .nav-btn[data-tooltip]:hover::after {
    opacity: 1;
    transition-delay: 0.2s;
  }

  /* MAIN */
  .main {
    flex: 1;
    padding: 28px 32px;
    overflow-x: hidden;
  }

  /* Stor skärm/TV: begränsa innehållets bredd och centrera */
  @media (min-width: 1600px) {
    .main {
      max-width: 1440px;
      margin: 0 auto;
    }
  }

  /* TOPBAR */
  .topbar {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    background: #E8ECF2;
    border-bottom: 1px solid #C8D0DC;
    margin: -28px -32px 28px;
    padding: 20px 32px;
  }
  body.dark .topbar {
    background: #0A1F44;
    border-bottom-color: #1A3A6E;
  }
  .page-title {
    font-family: var(--display);
    font-weight: 700;
    font-size: 20px;
    flex: 1;
  }
  .week-badge {
    background: var(--surface);
    border: 1px solid var(--border);
    padding: 5px 12px;
    border-radius: 6px;
    font-size: 11px;
    color: var(--muted);
    letter-spacing: 0.5px;
    box-shadow: var(--shadow-sm);
  }

  /* HERO BANNER — #hero-area är bara en spacer. Själva hero-korten renderas i
     den DELADE .lp-hero-visual-inner-behållaren (identisk med landningssidan)
     som renderHero() lägger in, så Hem och landningssidan får EXAKT samma
     layout (bredd, gap, centrering) och kan aldrig drifta isär. Ingen egen
     grid/storlek här — allt styrs av .lp-hero-visual-inner + .lp-nextcard. */
  .hero {
    margin-bottom: 28px;
  }

  /* ── TIMELINE TREE ── */
  .tl-new-wrap { max-width: 960px; }
  .tl-header-row { display: flex; align-items: center; border-bottom: 1px solid var(--border); margin-bottom: 0; }
  .tl-cust-tabs--inline { border-bottom: none; flex: 1; }
  .tl-coop-sub-toggle { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
  .tl-year-row { display: flex; align-items: center; gap: 4px; flex-shrink: 0; margin-left: 8px; }
  .tl-year-row--end { margin-left: auto; }
  .cat-chain-tabs { margin-bottom: 16px; }
  .tl-cust-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--border); margin-bottom: 20px; }
  .tl-cust-tab {
    background: none; border: none; border-bottom: 2px solid transparent;
    padding: 8px 20px; cursor: pointer; transition: all 0.15s;
    display: flex; align-items: center;
  }
  .tl-cust-tab:hover { background: var(--table-hover); }
  .tl-cust-tab.active { background: var(--surface2); }
  .tl-window-bar { display: flex; align-items: center; gap: 12px; margin-bottom: 28px; }
  .tl-window-label { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; white-space: nowrap; }
  .tl-window-select {
    background: var(--input-bg); border: 1px solid var(--border); color: var(--text);
    padding: 7px 12px; border-radius: 7px; font-family: var(--font); font-size: 13px;
    cursor: pointer; outline: none; flex: 1; max-width: 320px;
  }
  .tl-tree { display: flex; flex-direction: column; }
  .tl-tree-row { display: flex; align-items: flex-start; gap: 0; min-height: 52px; }
  .tl-tree-left { display: flex; flex-direction: column; align-items: center; width: 72px; flex-shrink: 0; }
  .tl-tree-week { font-size: 11px; font-weight: 600; letter-spacing: 0.5px; padding-top: 2px; width: 100%; text-align: center; white-space: nowrap; }
  .tl-tree-line-wrap { display: flex; flex-direction: column; align-items: center; flex: 1; }
  .tl-tree-dot {
    width: 12px; height: 12px; border-radius: 50%; border: 2px solid;
    margin-top: 6px; flex-shrink: 0; z-index: 1; position: relative;
  }
  .tl-tree-connector { width: 2px; flex: 1; min-height: 24px; margin-top: 2px; }
  .tl-tree-label {
    flex: 1; padding: 4px 0 20px 16px; font-size: 13px; line-height: 1.5;
    display: flex; align-items: center; flex-wrap: wrap; gap: 4px;
  }
  .tl-step-num {
    font-size: 10px; font-weight: 700; min-width: 18px; height: 18px;
    border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
    margin-right: 6px; flex-shrink: 0; opacity: 0.8;
  }
  .tl-detail-wrap { display: flex; gap: 0; align-items: flex-start; }
  .tl-detail-wrap .tl-tree { flex: 0 0 auto; }
  .tl-week-cats {
    flex: 1; padding-left: 32px; margin-left: 32px;
    border-left: 1px solid var(--border2); min-width: 200px;
  }
  .tl-week-cats-title {
    font-size: 11px; font-weight: 600; text-transform: uppercase;
    letter-spacing: 1px; color: var(--muted); margin-bottom: 12px;
  }
  .tl-week-cat-row {
    font-size: 13px; padding: 6px 0; border-bottom: 1px solid var(--border2); color: var(--text);
  }
  .tl-week-cat-row:last-child { border-bottom: none; }

  /* ── EXPANDERBARA AVSNITT (delas av Marknaden och Hjälp/FAQ) ── */
  .bk-wrap { max-width: 760px; }
  .bk-section { margin-bottom: 36px; }
  .bk-section-title {
    font-family: var(--display);
    font-weight: 700;
    font-size: 15px;
    color: var(--primary);
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border2);
    letter-spacing: -0.2px;
  }
  .bk-item {
    background: var(--surface);
    border: 1px solid var(--border2);
    border-radius: 9px;
    margin-bottom: 6px;
    box-shadow: var(--shadow-sm);
    overflow: hidden;
  }
  .bk-item-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    cursor: pointer;
    user-select: none;
  }
  .bk-item-header:hover { background: var(--table-hover); }
  .bk-headline {
    font-size: 13px;
    font-weight: 500;
    color: var(--text);
    flex: 1;
    line-height: 1.45;
  }
  .bk-chevron {
    font-size: 16px;
    color: var(--muted);
    transition: transform 0.25s ease;
    flex-shrink: 0;
  }
  .bk-item.open .bk-chevron { transform: rotate(180deg); }
  .bk-item-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
  }
  .bk-item.open .bk-item-body { max-height: 400px; }
  .bk-item-body-inner {
    padding: 14px 16px 16px;
    border-top: 1px solid var(--border2);
  }
  .bk-body-text {
    font-size: 13px;
    color: var(--muted);
    line-height: 1.72;
  }
  /* ── MARKNADEN ── */
  .mk-wrap { max-width: 960px; }
  .mk-section {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: var(--shadow-sm);
    padding: 24px 28px;
    margin-bottom: 24px;
    transition: box-shadow 0.2s ease;
  }
  .mk-section:hover { box-shadow: var(--shadow-md); }
  .mk-section-title {
    font-family: var(--display);
    font-weight: 700;
    font-size: 15px;
    color: var(--primary);
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border2);
    letter-spacing: -0.2px;
  }
  .mk-hero-stat {
    font-family: var(--display);
    font-weight: 800;
    font-size: 56px;
    background: linear-gradient(135deg, var(--primary) 0%, #16a34a 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    line-height: 1;
    letter-spacing: -2px;
    margin-bottom: 10px;
  }
  .mk-hero-sub { font-size: 14px; color: var(--muted); margin-bottom: 28px; line-height: 1.5; }

  /* Marknadsandelar — cirkeldiagram (donut) + logotyp-legend bredvid */
  .mk-donut-layout { display: flex; align-items: center; gap: 32px; flex-wrap: wrap; }
  .mk-donut-wrap { flex: 0 0 200px; height: 200px; position: relative; }
  .mk-donut-wrap canvas { filter: drop-shadow(0 8px 16px rgba(0,0,0,0.18)); }
  .mk-donut-legend { flex: 1; min-width: 200px; display: flex; flex-direction: column; gap: 14px; }
  .mk-share-legend-item { display: flex; align-items: center; gap: 8px; }
  .mk-share-logo { height: 20px; max-width: 56px; object-fit: contain; }
  .mk-share-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
  .mk-share-legend-name { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; }
  .mk-share-legend-pct { font-family: var(--display); font-weight: 800; font-size: 16px; letter-spacing: -0.3px; color: var(--text); margin-left: auto; }

  /* Kedjornas struktur */
  .mk-chain-struct {
    background: var(--surface2);
    border: 1px solid var(--border2);
    border-radius: 10px;
    margin-bottom: 10px;
    overflow: hidden;
    transition: border-color 0.15s ease;
  }
  .mk-chain-struct:hover { border-color: var(--border); }
  .mk-struct-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 20px;
    cursor: pointer;
    user-select: none;
  }
  .mk-struct-header:hover { background: var(--table-hover); }
  .mk-struct-logo { height: 28px; max-width: 68px; object-fit: contain; flex-shrink: 0; }
  .mk-struct-chain-name { font-weight: 700; font-size: 14px; margin-bottom: 2px; }
  .mk-struct-total { font-size: 12px; color: var(--muted); }
  .mk-struct-chevron { font-size: 16px; color: var(--muted); transition: transform 0.25s ease; flex-shrink: 0; }
  .mk-chain-struct.open .mk-struct-chevron { transform: rotate(180deg); }
  .mk-struct-body { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; }
  .mk-chain-struct.open .mk-struct-body { max-height: 360px; }
  .mk-struct-body-inner { padding: 14px 20px 18px; border-top: 1px solid var(--border2); }
  .mk-format-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 7px 0;
    border-bottom: 1px solid var(--border2);
    font-size: 13px;
    color: var(--text);
  }
  .mk-format-row:last-of-type { border-bottom: none; }
  .mk-format-count { font-weight: 600; }
  .mk-struct-note { font-size: 12px; color: var(--muted); margin-top: 12px; line-height: 1.6; }

  /* Sverige-karta + regional tabell, sida vid sida */
  .mk-map-layout { display: flex; gap: 28px; align-items: flex-start; }
  .mk-map-wrap { flex: 0 0 240px; }
  .mk-map-svg { width: 100%; height: auto; }
  .mk-landskap { stroke: var(--border2); stroke-width: 0.5; stroke-linejoin: round; transition: filter 0.15s ease; cursor: default; }
  .mk-landskap-region:hover .mk-landskap { filter: brightness(1.12); }
  .mk-map-table-wrap { flex: 1; min-width: 0; }
  .mk-region-table { width: 100%; border-collapse: collapse; font-size: 13px; }
  .mk-region-table th {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--muted);
    padding: 8px 12px;
    border-bottom: 1px solid var(--border);
    text-align: right;
    font-weight: 600;
  }
  .mk-region-table th:first-child { text-align: left; }
  .mk-table-logo { height: 16px; max-width: 48px; object-fit: contain; vertical-align: middle; }
  .mk-region-table td { padding: 10px 12px; border-bottom: 1px solid var(--border2); color: var(--text); }
  .mk-region-table td:not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
  .mk-region-table tr:hover td { background: var(--table-hover); }
  .mk-region-table tr:last-child td { border-bottom: none; }
  .mk-region-table .col-total { font-weight: 700; color: var(--text) !important; }
  .mk-region-note { font-size: 12px; color: var(--muted); margin-top: 14px; line-height: 1.6; }

  .mk-conclusion-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .mk-conclusion-card {
    background: var(--surface2);
    border: 1px solid var(--border2);
    border-radius: 10px;
    padding: 20px 22px;
    transition: transform 0.15s ease, border-color 0.15s ease;
  }
  .mk-conclusion-card:hover { transform: translateY(-2px); border-color: var(--border); }
  .mk-conclusion-title { font-weight: 700; font-size: 14px; color: var(--primary); margin-bottom: 10px; line-height: 1.35; }
  .mk-conclusion-body { font-size: 13px; color: var(--muted); line-height: 1.68; }

  /* TABS */
  .tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--border);
    margin-bottom: 24px;
  }
  .tab {
    padding: 9px 18px;
    font-family: var(--font);
    font-size: 12px;
    color: var(--muted);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: all 0.12s;
    letter-spacing: 0.3px;
  }
  .tab:hover { color: var(--text); }
  .tab.active { color: var(--text); border-bottom-color: var(--coop-color); }

  /* SECTION */
  .section-title {
    font-size: 10px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--muted);
    font-weight: 500;
  }
  /* ROUND CARD */
  .round-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    margin-bottom: 8px;
    overflow: hidden;
    transition: border-color 0.15s, box-shadow 0.15s;
    box-shadow: var(--shadow-sm);
  }
  .round-card:hover { border-color: var(--border2); }
  .round-card.open { border-color: var(--border2); }

  .customer-tag {
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 4px;
    min-width: 52px;
    text-align: center;
    flex-shrink: 0;
  }
  .round-info { flex: 1; min-width: 0; }
  .round-launch { font-family: var(--display); font-weight: 600; font-size: 14px; }
  .chevron { color: var(--muted); font-size: 10px; transition: transform 0.2s; flex-shrink: 0; }
  .round-card.open .chevron { transform: rotate(180deg); }

  /* STEPS */
  .round-steps { display: none; border-top: 1px solid var(--border); }
  .round-card.open .round-steps { display: block; }

  .step-row {
    display: grid;
    grid-template-columns: 26px 1fr auto auto;
    gap: 10px 16px;
    padding: 10px 16px;
    align-items: center;
    border-bottom: 1px solid var(--border);
    transition: background 0.1s;
  }
  .step-row:last-child { border-bottom: none; }
  .step-row:hover { background: var(--table-hover); }
  .step-row.is-launch { background: rgba(250,204,21,0.03); }

  .step-num {
    width: 20px; height: 20px;
    border-radius: 50%;
    background: var(--surface2);
    border: 1px solid var(--border2);
    display: flex; align-items: center; justify-content: center;
    font-size: 9px;
    color: var(--muted);
    flex-shrink: 0;
  }
  .step-num.done { background: var(--border); border-color: var(--border); }
  .step-num.is-next { background: rgba(250,204,21,0.15); border-color: #facc15; color: #facc15; }
  .step-num.launch-num { background: rgba(250,204,21,0.1); border-color: rgba(250,204,21,0.4); color: #facc15; }

  .step-label { font-size: 12px; color: var(--text); }
  .step-label.done { color: var(--muted); text-decoration: line-through; }
  .step-label.launch-label { color: #facc15; font-weight: 500; }

  .step-week-col {
    font-family: var(--display);
    font-weight: 700;
    font-size: 16px;
    text-align: right;
    min-width: 48px;
  }
  .step-week-col.done { color: var(--muted); font-size: 13px; font-family: var(--font); font-weight: 400; }
  .step-week-col.launch-week { color: #facc15; }

  .step-status-col { min-width: 72px; text-align: right; }
  .pill {
    display: inline-block;
    padding: 2px 7px;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.3px;
    white-space: nowrap;
  }
  .pill-done { background: var(--surface2); color: var(--muted); border: 1px solid var(--border2); }
  .pill-ok { background: rgba(74,222,128,0.12); color: var(--coop-color); }
  .pill-soon { background: rgba(250,204,21,0.12); color: #facc15; }
  .pill-urgent { background: rgba(248,113,113,0.15); color: var(--ica-color); }
  .pill-launch { background: rgba(250,204,21,0.08); color: #facc15; border: 1px solid rgba(250,204,21,0.2); }

  /* CATEGORY TABLE */
  .cat-table-wrap { width: 100%; }
  @media (max-width: 768px) {
    .cat-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .cat-table { min-width: 480px; }
  }
  .cat-table { width: 100%; border-collapse: collapse; }
  .cat-table th {
    text-align: left;
    font-size: 9px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--muted);
    padding: 0 12px 10px;
    border-bottom: 1px solid var(--border);
    font-weight: 400;
  }
  .cat-table tr.cat-row { cursor: pointer; }
  .cat-table tr.cat-row:hover td { background: var(--table-hover); }
  .cat-table tr.cat-row.expanded td { background: var(--surface2); border-left: 2px solid var(--coop-color); }
  .cat-table td {
    padding: 9px 12px;
    border-bottom: 1px solid var(--border);
    font-size: 12px;
    vertical-align: middle;
  }
  .cat-table td:first-child { color: var(--muted); font-size: 11px; }
  .cat-name-cell { color: var(--text); }

  /* Expanderad fönsterpanel (accordion) under en kategorirad */
  tr.cat-expand-tr td { padding: 0 !important; border-bottom: 1px solid var(--border) !important; }
  .cat-expand-panel {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 12px 16px;
    background: var(--surface2);
  }
  .cat-window-item {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 8px 12px;
    min-width: 180px;
  }
  .cat-window-week { font-size: 13px; font-weight: 700; color: var(--text); }
  .cat-window-sub { font-size: 11px; color: var(--muted); margin-top: 2px; }
  .cat-window-passed {
    font-size: 9px;
    font-weight: 600;
    color: var(--muted);
    background: var(--border2);
    border-radius: 4px;
    padding: 1px 6px;
    margin-left: 6px;
    vertical-align: middle;
  }

  .window-chips { display: flex; gap: 4px; flex-wrap: wrap; }
  .wchip {
    font-size: 10px;
    padding: 2px 7px;
    border-radius: 4px;
    border: 1px solid var(--border2);
    color: var(--muted2);
    white-space: nowrap;
  }
  .wchip-pair { font-variant-numeric: tabular-nums; letter-spacing: 0.01em; }

  /* Tom sida-tillstånd med ikon, rubrik och CTA */
  .empty-state { color: var(--muted); font-size: 13px; padding: 32px; text-align: center; }
  .empty-state-card { border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-sm); padding: 48px 32px; text-align: center; max-width: 480px; margin: 40px auto; background: var(--surface); }
  .empty-state-card .empty-icon { font-size: 36px; color: var(--muted2); margin-bottom: 16px; }
  .empty-state-card .empty-title { font-family: var(--display); font-size: 17px; font-weight: 700; color: var(--text); margin-bottom: 8px; }
  .empty-state-card .empty-desc { font-size: 13px; color: var(--muted); line-height: 1.6; margin-bottom: 24px; max-width: 320px; margin-left: auto; margin-right: auto; }
  /* Kontextuellt tips-banner */
  .contextual-tip { display: flex; align-items: flex-start; gap: 10px; padding: 12px 16px; background: rgba(59,130,246,0.08); border: 1px solid rgba(59,130,246,0.2); border-radius: 8px; color: var(--text); font-size: 12px; line-height: 1.55; margin-bottom: 16px; animation: tipFadeIn 0.2s ease; }
  .dark .contextual-tip { background: rgba(59,130,246,0.12); border-color: rgba(59,130,246,0.25); }
  .contextual-tip i { color: #3b82f6; margin-top: 1px; }
  @keyframes tipFadeIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
  /* Kom-igång-checklista på dashboarden */
  /* KOM IGÅNG-CHECKLISTA (Hem) — guld/navy-accent via var(--accent) */
  .onboarding-card { border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: 12px; padding: 20px 22px; margin: 0 auto 20px; max-width: 640px; background: var(--surface); }
  .onboarding-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
  .onboarding-card-title { font-family: var(--display); font-size: 16px; font-weight: 700; }
  .onboarding-card-sub { font-size: 12px; color: var(--muted); margin-top: 3px; }
  .onboarding-hide-btn { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 12px; padding: 4px 6px; flex-shrink: 0; border-radius: 6px; }
  .onboarding-hide-btn:hover { color: var(--text); background: var(--table-hover); }
  .onboarding-progress { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
  .onboarding-progress-bar { flex: 1; height: 8px; background: var(--surface2); border-radius: 999px; overflow: hidden; }
  .onboarding-progress-fill { height: 100%; background: var(--accent); border-radius: 999px; transition: width 0.35s ease; }
  .onboarding-progress-label { font-size: 12px; font-weight: 600; color: var(--muted); white-space: nowrap; }
  .onboarding-steps { display: flex; flex-direction: column; gap: 2px; }
  .onboarding-step { display: flex; align-items: center; gap: 12px; padding: 10px 8px; border-radius: 8px; cursor: pointer; transition: background 0.12s; }
  .onboarding-step:hover { background: var(--table-hover); }
  .onboarding-step-check { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--border2); flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: var(--muted); }
  .onboarding-step.done .onboarding-step-check { background: var(--accent); border-color: var(--accent); color: var(--surface); }
  .onboarding-step-label { font-size: 13px; flex: 1; }
  .onboarding-step.done .onboarding-step-label { color: var(--muted); text-decoration: line-through; }
  .onboarding-step-arrow { color: var(--border2); font-size: 14px; }
  .onboarding-card.onboarding-done { position: relative; text-align: center; padding: 26px 22px; }
  .onboarding-dismiss { position: absolute; top: 12px; right: 12px; background: none; border: none; color: var(--muted); cursor: pointer; font-size: 14px; line-height: 1; }
  .onboarding-dismiss:hover { color: var(--text); }
  .onboarding-done-emoji { font-size: 34px; margin-bottom: 4px; }
  .onboarding-done-btn { margin-top: 16px; }
  @media (max-width: 600px) {
    .onboarding-card { padding: 16px; }
    .onboarding-progress { flex-wrap: wrap; }
  }

  /* GUIDER-SIDAN — sök + numrerade steg + videoplatshållare (återanvänder .bk-*) */
  .guides-search-wrap { position: relative; margin-bottom: 18px; max-width: 420px; }
  .guides-search-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--muted); font-size: 15px; }
  .guides-search-input { width: 100%; background: var(--input-bg); border: 1px solid var(--border); border-radius: 8px; padding: 9px 12px 9px 34px; color: var(--text); font-family: var(--font); font-size: 13px; outline: none; }
  .guides-search-input:focus { border-color: var(--accent); }
  .guide-steps { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 7px; }
  .guide-steps li { font-size: 13px; line-height: 1.55; color: var(--text); padding-left: 4px; }
  .guide-video-placeholder { margin-top: 14px; display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); background: var(--surface2); border: 1px dashed var(--border2); border-radius: 8px; padding: 10px 12px; }
  .guide-video-link { margin-top: 14px; display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--accent); text-decoration: none; }
  .guide-video-link:hover { text-decoration: underline; }
  /* Aktiv-lansering-badge i kategoritabellen */
  .active-lans-badge { font-size: 9px; font-weight: 700; background: rgba(245,158,11,0.15); color: #f59e0b; border: 1px solid rgba(245,158,11,0.3); border-radius: 4px; padding: 1px 5px; margin-left: 6px; vertical-align: middle; white-space: nowrap; }


  @media (max-width: 768px) {
    .sidebar {
      display: none;
      position: fixed;
      inset: 0;
      z-index: 500;
      width: 100%;
      height: 100vh;
    }
    .sidebar.mobile-open { display: flex; }
    .main { padding: 12px 14px; }
    .topbar { gap: 8px; }
    .page-title { font-size: 16px; }
    .tl-new-wrap { max-width: 100%; }
    /* Kedjeflikar (Coop/ICA/Dagab) på en egen rad, Food/Hemma- och årsväljare
       radbryts ner istället för att klämma ihop/dölja kedjeflikarna. */
    .tl-header-row { flex-wrap: wrap; row-gap: 8px; }
    .tl-cust-tabs--inline { flex: 1 1 100%; }
    .tl-year-row--end { margin-left: 0; }
    .tl-detail-wrap { flex-direction: column; }
    .tl-week-cats {
      border-left: none; border-top: 1px solid var(--border2);
      padding-left: 0; margin-left: 0; padding-top: 24px; margin-top: 24px;
    }
    .mk-conclusion-grid { grid-template-columns: 1fr; }
    .mk-map-layout { flex-direction: column; }
    .mk-map-wrap { flex: none; width: 180px; margin: 0 auto; }
    .mk-donut-layout { flex-direction: column; align-items: stretch; }
    .mk-donut-wrap { flex: none; width: 170px; height: 170px; margin: 0 auto; }
    .mk-section { padding: 18px 16px; }
  }

  /* ── LÄSLÄGE-BANNER (Mina varumärken / Arkiv på mobil) ── */
  .mobile-readonly-banner {
    display: none;
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 12px;
    color: var(--muted);
    text-align: center;
    margin-bottom: 12px;
  }
  @media (max-width: 768px) {
    .mobile-readonly-banner { display: block; }
  }

  /* ── GENERELL MOBILOPTIMERING: touchytor, inputstorlek, klippning ── */
  @media (max-width: 768px) {
    /* Minst 16px för att undvika auto-zoom på iOS */
    input, select, textarea { font-size: 16px; }
    /* Minst 44px klickyta på knappar */
    .inline-btn,
    .btn-primary,
    .lansering-action-btn,
    .lansering-add-btn,
    .detail-tab-btn,
    .nav-btn {
      min-height: 44px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      box-sizing: border-box;
    }
    .nav-btn { justify-content: flex-start; }
    /* Förhindra att innehåll klipps av skärmkanten */
    .main, .lansering-detail, .pam-card, .lansering-modal-box {
      max-width: 100%;
      box-sizing: border-box;
    }
    img { max-width: 100%; }
  }

  /* HAMBURGERMENY */
  .hamburger-btn {
    display: none;
    position: fixed;
    top: 14px;
    left: 14px;
    z-index: 600;
    background: var(--surface);
    border: 1px solid var(--border2);
    border-radius: 8px;
    width: 38px;
    height: 38px;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-direction: column;
    gap: 5px;
    padding: 8px;
  }
  .hamburger-btn span {
    display: block;
    width: 18px;
    height: 2px;
    background: var(--text);
    border-radius: 2px;
    transition: all 0.2s;
  }
  .mobile-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 490;
  }
  @media (max-width: 768px) {
    .hamburger-btn { display: flex; }
    .main { padding-top: 56px; }
    .mobile-overlay.active { display: block; }
  }


  /* ── PRIMARY ROW (collapsed view) ── */
  .round-primary-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    cursor: pointer;
    transition: background 0.1s;
    border-radius: 8px 8px 0 0;
  }
  .round-primary-row:hover { background: var(--table-hover); }
  .round-card:not(.open) .round-primary-row { border-radius: 8px; }
  .round-card:not(.open) .round-steps { display: none; }
  .round-card.open .round-primary-row { border-radius: 8px 8px 0 0; border-bottom: 1px solid var(--border); }
  .round-card.open .chevron { transform: rotate(180deg); }
  .is-primary-step { background: var(--surface2); }
  .is-primary-step .step-num { border-color: var(--coop-color); color: var(--text); }

  /* ── LOGO UPLOAD ── */
  .logo-drop-zone {
    border: 2px dashed var(--border);
    border-radius: 8px;
    padding: 16px;
    text-align: center;
    cursor: pointer;
    transition: all 0.15s;
    position: relative;
    min-height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 6px;
  }
  .logo-drop-zone:hover, .logo-drop-zone.drag-over {
    border-color: var(--accent);
    background: var(--accent-soft);
  }
  .logo-drop-zone input[type=file] {
    position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%;
  }
  .logo-drop-zone .drop-label {
    font-size: 11px; color: var(--muted); pointer-events: none;
  }
  .logo-drop-zone .drop-icon { font-size: 22px; pointer-events: none; }
  .logo-preview-wrap {
    display: flex; align-items: center; gap: 10px; margin-top: 6px;
  }
  .logo-preview-wrap img {
    max-height: 36px; max-width: 120px; object-fit: contain;
    border-radius: 4px; padding:4px;
  }
  .logo-preview-wrap .remove-logo {
    font-size: 11px; color: var(--muted); cursor: pointer; text-decoration: underline;
  }
  .logo-preview-wrap .remove-logo:hover { color: #f87171; }

  /* ── BRANDS ── */
  .brand-color-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }

  /* ── VARUMÄRKES-CHIP ──
     Konsekvent färgad platta bakom varumärkesnamnet (navigeringshjälpmedel).
     Byggs alltid via brandChipHtml() i shared.js. Bakgrunden är en LJUS TON av
     varumärkesfärgen (--brand sätts inline per chip) så mörk text (var(--text))
     alltid blir läsbar för alla 10 palettfärger — samma princip som .lp-nextcard.
     En logga visas liten INUTI chippen; den färgade plattan syns alltid. */
  .brand-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    min-width: 0;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--text);
    background: color-mix(in srgb, var(--brand, var(--muted2)) 14%, var(--surface));
    border: 1px solid color-mix(in srgb, var(--brand, var(--muted2)) 32%, transparent);
    vertical-align: middle;
  }
  .brand-chip-logo {
    height: 15px;
    width: auto;
    max-width: 34px;
    object-fit: contain;
    flex-shrink: 0;
    display: block;
  }
  .brand-chip-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Varumärkesregister */
  .brand-register { display: flex; flex-direction: column; gap: 14px; }
  .brand-register-card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; box-shadow: var(--shadow-sm); }
  .brand-register-header { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--border); }
  .brand-register-name { font-family: var(--display); font-weight: 700; font-size: 15px; }
  .brand-register-body { padding: 14px 18px; }
  .brand-register-section-title { font-size: 10px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
  .brand-group-list { display: flex; flex-direction: column; gap: 2px; }
  .brand-group-expandable { border-radius: 6px; overflow: hidden; }
  .brand-group-header { display: flex; align-items: center; gap: 6px; padding: 5px 6px; cursor: pointer; border-radius: 6px; transition: background 0.12s; user-select: none; }
  .brand-group-header:hover { background: var(--bg); }
  .brand-group-chevron { font-size: 11px; color: var(--muted2); flex-shrink: 0; width: 12px; }
  .brand-group-name-label { font-size: 13px; font-weight: 500; flex: 1; min-width: 0; }
  .brand-group-edit-btn { background: none; border: none; cursor: pointer; color: var(--muted2); font-size: 11px; padding: 2px 4px; line-height: 1; border-radius: 4px; flex-shrink: 0; transition: color 0.12s; }
  .brand-group-edit-btn:hover { color: var(--text); }
  .brand-group-meta { font-size: 11px; color: var(--muted); flex-shrink: 0; }
  .brand-group-articles { padding: 4px 4px 4px 22px; display: flex; flex-direction: column; gap: 2px; }
  .brand-article-empty { font-size: 11px; color: var(--muted); padding: 4px 0; }
  .brand-article-table-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: 8px; }
  .brand-article-table { width: 100%; border-collapse: collapse; font-size: 12px; table-layout: fixed; }
  .brand-article-table thead th { text-align: left; padding: 4px 6px; font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); white-space: nowrap; }
  .brand-article-table td { padding: 3px 4px; vertical-align: middle; }
  .brand-article-table td input.article-price-input { width: 100%; }
  .brand-article-table-delete { text-align: center; }
  .brand-article-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
  @media (max-width: 700px) { .brand-article-table { min-width: 780px; } }
  .brand-inline-cta { padding: 8px 0; }

  /* Artikel-import (Excel) — Mina varumärken */
  .import-articles-box { width: 720px; max-width: 95vw; }
  .import-articles-file-row { margin-bottom: 12px; }
  .import-articles-file-row input[type=file] { font-size: 12px; color: var(--text); }
  .import-articles-summary { font-size: 12px; color: var(--muted); margin-bottom: 10px; }
  .import-articles-table-wrap { max-height: 360px; overflow-y: auto; border: 1px solid var(--border); border-radius: 8px; }
  .import-articles-table { width: 100%; border-collapse: collapse; font-size: 12px; }
  .import-articles-table thead th { position: sticky; top: 0; text-align: left; padding: 7px 10px; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); background: var(--bg); border-bottom: 1px solid var(--border); }
  .import-articles-table td { padding: 6px 10px; border-bottom: 1px solid var(--border); }
  .import-articles-table tr:last-child td { border-bottom: none; }
  .import-row-invalid { background: rgba(227,0,11,0.06); }
  .import-row-status { font-size: 11px; font-weight: 500; white-space: nowrap; }
  .import-row-status.ok { color: #4ade80; }
  .import-row-status.warning { color: #E3000B; }
  .import-row-status.duplicate { color: #f59e0b; }
  .inline-input { background: var(--input-bg); border: 1px solid var(--border); color: var(--text); padding: 7px 12px; border-radius: 6px; font-family: var(--font); font-size: 12px; outline: none; flex: 1; }
  .inline-input:focus { border-color: var(--input-focus); }
  .inline-input::placeholder { color: var(--muted2); }
  .settings-toggle {
    width: 40px; height: 22px; border-radius: 11px; cursor: pointer;
    position: relative; transition: background 0.2s; flex-shrink: 0;
  }
  .settings-toggle.on { background: var(--accent) !important; }
  .settings-toggle-knob {
    width: 16px; height: 16px; border-radius: 50%; background: #fff;
    position: absolute; top: 3px; left: 3px; transition: left 0.2s;
  }
  .settings-toggle.on .settings-toggle-knob { left: 21px; }
  .inline-btn { background: var(--btn-bg); border: none; color: var(--btn-text); padding: 7px 14px; border-radius: 8px; cursor: pointer; font-family: var(--font); font-size: 12px; font-weight: 500; transition: background 0.15s, transform 0.12s; }
  .inline-btn:hover { background: var(--btn-hover-bg); transform: translateY(-1px); }
  .inline-btn.secondary { background: transparent; border: 1px solid var(--border); color: var(--text); }
  .inline-btn.secondary:hover { background: var(--table-hover); border-color: var(--input-focus); transform: translateY(-1px); }

  /* TEAM-PANEL (Inställningar → Team) */
  .team-member-list { display: flex; flex-direction: column; }
  .team-member-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
  .team-member-info { min-width: 0; flex: 1; }
  .team-member-name { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .team-member-email { font-size: 11px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .team-member-controls { display: flex; align-items: center; gap: 6px; flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; }
  .team-role-select { font-size: 11px; background: var(--surface2); border: 1px solid var(--border2); border-radius: 6px; padding: 3px 6px; color: var(--text); font-family: var(--font); cursor: pointer; }
  .team-role-badge { font-size: 10px; opacity: 0.6; text-transform: uppercase; letter-spacing: 1px; padding: 2px 8px; border-radius: 20px; background: var(--surface2); border: 1px solid var(--border2); white-space: nowrap; }
  .team-team-btn { font-size: 10px; padding: 3px 8px; white-space: nowrap; }
  .team-subhead { font-size: 11px; letter-spacing: 1px; text-transform: uppercase; opacity: 0.5; margin-bottom: 8px; }
  .team-invite-input { flex: 1; min-width: 140px; background: var(--surface2); border: 1px solid var(--border2); border-radius: 8px; padding: 8px 12px; color: var(--text); font-family: var(--font); font-size: 13px; outline: none; }
  .team-invite-input:focus { border-color: var(--accent); }

  /* Licensantal-stepper (Abonnemang → Ändra-dialogen) */
  .license-stepper { display: inline-flex; align-items: stretch; border: 1px solid var(--border2); border-radius: 8px; overflow: hidden; width: fit-content; }
  .license-step-btn { background: var(--surface2); border: none; color: var(--text); font-size: 18px; width: 40px; cursor: pointer; line-height: 1; }
  .license-step-btn:hover { background: var(--table-hover); }
  .license-stepper input { width: 72px; text-align: center; border: none; border-left: 1px solid var(--border2); border-right: 1px solid var(--border2); background: var(--input-bg); color: var(--text); font-family: var(--font); font-size: 15px; font-weight: 600; padding: 9px 4px; outline: none; -moz-appearance: textfield; }
  .license-stepper input::-webkit-outer-spin-button, .license-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

  /* INSTÄLLNINGAR — flikrad (återanvänder .detail-tabs/.detail-tab-btn) + profil */
  /* overflow-y: hidden är NÖDVÄNDIG: .detail-tab-btn:s margin-bottom:-1px ger ett
     1px vertikalt överflöd, och så fort overflow-x är auto (här eller via
     .detail-tabs egen @media-regel på smala skärmar) befordras overflow-y från
     visible till auto → en vertikal scrollbar vars upp/ner-pilar syns bredvid
     flikarna (på Windows). Med overflow-y: hidden klipps de 1px:en (påverkar inte
     den aktiva understrykningen) och inga upp/ner-pilar visas. Horisontell scroll
     (vänster/höger) på smala skärmar behålls. */
  .settings-tabs { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; }
  .settings-tabs .detail-tab-btn { padding: 8px 12px; }
  .profile-row { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; padding: 7px 0; border-bottom: 1px solid var(--border); }
  .profile-row:last-child { border-bottom: none; }
  .profile-key { color: var(--muted); flex-shrink: 0; }
  .profile-val { color: var(--text); font-weight: 500; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  /* Knapp-hierarki: primär (fylld), sekundär (outline) och destruktiv (röd outline) */
  .btn-primary { background: var(--btn-bg); border: none; color: var(--btn-text); padding: 7px 14px; border-radius: 8px; cursor: pointer; font-family: var(--font); font-size: 12px; font-weight: 500; transition: background 0.15s, transform 0.12s; }
  .btn-primary:hover { background: var(--btn-hover-bg); transform: translateY(-1px); }
  .btn-secondary { background: transparent; border: 1px solid var(--border2); color: var(--text); padding: 6px 12px; border-radius: 6px; cursor: pointer; font-family: var(--font); font-size: 11px; transition: all 0.12s; }
  .btn-secondary:hover { border-color: var(--input-focus); color: var(--text); }
  .btn-destructive { background: transparent; border: 1px solid rgba(248,113,113,0.4); color: #f87171; padding: 6px 12px; border-radius: 6px; cursor: pointer; font-family: var(--font); font-size: 11px; transition: all 0.12s; margin-left: 16px; }
  .btn-destructive:hover { background: rgba(248,113,113,0.1); border-color: #f87171; }
  .btn-destructive:disabled { opacity: 0.38; cursor: not-allowed; }
  /* Årsväljare i sidebaren */
  .year-toggle { display: flex; background: var(--surface2); border-radius: 6px; padding: 2px; gap: 2px; margin-bottom: 8px; }
  .year-btn { flex: 1; background: none; border: none; padding: 4px 8px; border-radius: 4px; font-size: 11px; font-family: var(--font); color: var(--muted); cursor: pointer; transition: all 0.15s; }
  .year-btn.active { background: var(--surface); color: var(--text); font-weight: 600; box-shadow: 0 1px 2px rgba(0,0,0,0.1); }
  .year-btn:hover:not(.active) { color: var(--text); }
  .modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.7); z-index: 100; align-items: center; justify-content: center; }
  .modal-overlay.open { display: flex; }
  .modal { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 24px; width: 540px; max-width: 95vw; max-height: 80vh; overflow-y: auto; box-shadow: var(--shadow-lg); }
  .modal-title { font-family: var(--display); font-weight: 700; font-size: 16px; margin-bottom: 4px; }
  .modal-sub { font-size: 11px; color: var(--muted2); margin-bottom: 16px; }
  .modal-search { background: var(--input-bg); border: 1px solid var(--border); color: var(--text); padding: 7px 12px; border-radius: 6px; font-family: var(--font); font-size: 12px; outline: none; width: 100%; margin-bottom: 12px; }
  .modal-search:focus { border-color: var(--input-focus); }
  .modal-search::placeholder { color: var(--muted2); }
  .modal-cat-group { margin-bottom: 12px; }
  .modal-cat-group-label { font-size: 9px; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
  .modal-cat-row { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 6px; cursor: pointer; transition: background 0.1s; }
  .modal-cat-row:hover { background: var(--table-hover); }
  .modal-cat-row.checked { background: var(--accent-soft); }
  .modal-checkbox { width: 14px; height: 14px; border-radius: 3px; border: 1px solid var(--border2); display: flex; align-items: center; justify-content: center; font-size: 9px; flex-shrink: 0; }
  .modal-cat-row.checked .modal-checkbox { background: var(--btn-bg); border-color: var(--btn-bg); color: var(--btn-text); }
  .modal-cat-name { font-size: 12px; flex: 1; }
  .modal-cat-windows { font-size: 10px; color: var(--muted); }
  .modal-footer { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); }
  .form-row { margin-bottom: 14px; }
  .form-label { font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); margin-bottom: 5px; }
  /* (Färgväljaren .color-picker-row/.color-swatch är borttagen — varumärkesfärg
     tilldelas automatiskt, se leastUsedBrandColor i brands.js.) */

  /* ── LANSERING ── */
  .lansering-layout { display: grid; grid-template-columns: 280px 1fr; gap: 20px; padding: 20px; }
  @media (max-width: 900px) { .lansering-layout { grid-template-columns: 1fr; } }
  /* min-width:0 på grid-cellerna förhindrar att brett innehåll (t.ex. tabeller i detaljvyn)
     trycker ut lanseringskorten ur synfältet på mobil */
  @media (max-width: 768px) {
    .lansering-layout > * { min-width: 0; }
  }

  .lansering-card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; cursor: pointer; transition: border-color 0.12s, box-shadow 0.12s; box-shadow: var(--shadow-sm); }
  .lansering-card:hover { box-shadow: var(--shadow-md); }
  .lansering-card:hover { border-color: var(--border2); }
  .lansering-card.selected { border-color: #f59e0b; background: rgba(245,158,11,0.05); }
  .lansering-card-name { font-family: var(--display); font-weight: 600; font-size: 14px; margin-bottom: 4px; }
  .lansering-card-meta { font-size: 10px; color: var(--muted); display: flex; gap: 10px; align-items: center; }
  .lansering-add-btn { background: none; border: 1px dashed var(--border2); color: var(--muted2); padding: 10px 14px; border-radius: 8px; cursor: pointer; font-family: var(--font); font-size: 12px; width: 100%; text-align: left; transition: all 0.12s; margin-top: 4px; }
  .lansering-add-btn:hover { border-color: #f59e0b; color: #f59e0b; }

  .lansering-detail { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 24px; box-shadow: var(--shadow-sm); }
  @media (max-width: 768px) {
    .lansering-detail { padding: 14px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  }
  .lansering-detail-header { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid var(--border); }
  .lansering-detail-name { font-family: var(--display); font-weight: 700; font-size: 22px; flex: 1; }

  .lansering-archived-banner { display: flex; align-items: center; gap: 8px; background: var(--surface2); border: 1px solid var(--border2); color: var(--muted); font-size: 12px; font-weight: 600; padding: 8px 14px; border-radius: 8px; margin-bottom: 16px; }
  .lansering-detail-readonly { opacity: 0.85; }
  .lansering-detail-readonly input:disabled, .lansering-detail-readonly select:disabled, .lansering-detail-readonly textarea:disabled { cursor: not-allowed; }
  .lansering-action-btn { background: var(--surface2); border: 1px solid var(--border2); color: var(--text); padding: 6px 12px; border-radius: 6px; cursor: pointer; font-family: var(--font); font-size: 11px; }
  .lansering-action-btn:hover { border-color: #f59e0b; color: #f59e0b; }
  .lansering-action-btn.danger:hover { border-color: rgba(248,113,113,0.4); color: #f87171; }

  /* Collapsable left panel */
  .lansering-list-panel { display: flex; flex-direction: column; min-width: 0; }
  .lansering-list-content { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
  @media (max-width: 768px) {
    .lansering-list-content { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  }
  .panel-toggle-btn { background: none; border: 1px solid var(--border2); color: var(--muted); cursor: pointer; font-size: 13px; border-radius: 6px; padding: 4px 9px; align-self: flex-end; margin-bottom: 6px; transition: all 0.12s; line-height: 1; }
  .panel-toggle-btn:hover { color: var(--text); border-color: var(--border); }
  .lansering-layout.panel-collapsed { grid-template-columns: 36px 1fr; }
  .lansering-layout.panel-collapsed .lansering-list-content { display: none; }
  .lansering-layout.panel-collapsed .panel-toggle-btn { writing-mode: vertical-lr; padding: 10px 5px; align-self: flex-start; font-size: 11px; }

  /* Snabbinfo header */
  .lansering-snabbinfo { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 16px; padding: 10px 14px; background: var(--surface2); border: 1px solid var(--border); border-radius: 8px; }
  .snabbinfo-group { display: flex; align-items: center; gap: 6px; }
  .snabbinfo-chain-badge { font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 8px; }
  .snabbinfo-cat { font-size: 11px; color: var(--text); }
  .snabbinfo-week { font-size: 10px; color: var(--muted); padding: 1px 5px; background: var(--surface); border-radius: 5px; }
  .snabbinfo-days { font-size: 10px; font-weight: 600; padding: 1px 6px; border-radius: 8px; background: rgba(245,158,11,0.15); color: #f59e0b; }

  /* Artiklar & priser block */
  .article-prices-list { display: flex; flex-direction: column; gap: 4px; }
  .article-price-row { background: var(--surface2); border: 1px solid var(--border); border-radius: 7px; overflow: hidden; }
  .article-price-row-header { display: flex; align-items: center; gap: 10px; padding: 10px 14px; cursor: pointer; user-select: none; transition: background 0.1s; }
  .article-price-row-header:hover { background: rgba(255,255,255,0.04); }
  .article-price-row-toggle { font-size: 9px; color: var(--muted); flex-shrink: 0; width: 12px; }
  .article-price-row-name { font-size: 13px; font-weight: 500; flex: 1; }
  .article-price-row-summary { font-size: 11px; color: var(--muted); }
  .article-price-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; padding: 12px 14px 14px; border-top: 1px solid var(--border); }
  .article-price-field { display: flex; flex-direction: column; gap: 3px; }
  .article-price-field label { font-size: 10px; color: var(--muted); font-weight: 600; }
  .article-price-input { background: var(--input-bg); border: 1px solid var(--border); color: var(--text); font-family: var(--font); font-size: 12px; border-radius: 5px; padding: 5px 8px; width: 100%; box-sizing: border-box; }
  .article-price-input:focus { outline: none; border-color: var(--input-focus); }
  .article-calc-value { font-size: 12px; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: 5px; padding: 5px 8px; display: block; opacity: 0.65; }

  .section-block { margin-bottom: 28px; }
  .section-block-title { font-family: var(--display); font-size: 11px; font-weight: 700; letter-spacing: 1px; color: var(--muted); text-transform: uppercase; margin-bottom: 10px; }

  /* Checklista */
  .checklist { display: flex; flex-direction: column; gap: 6px; }

  /* Projektledardelen */
  .task-owner-input { background: transparent; border: none; color: var(--text); font-family: var(--font); font-size: 12px; width: 100%; outline: none; }
  .task-owner-input::placeholder { color: var(--muted2); }

  /* Kedjekontakt-logg */
  .contact-input { background: var(--input-bg); border: 1px solid var(--border); color: var(--text); font-family: var(--font); font-size: 12px; border-radius: 6px; padding: 6px 10px; flex: 1; min-width: 120px; }
  .contact-input::placeholder { color: var(--muted2); }

  /* Progress bar */
  .progress-bar-wrap { background: var(--surface2); border-radius: 10px; height: 6px; margin-top: 6px; overflow: hidden; }
  .progress-bar-fill { height: 100%; background: #f59e0b; border-radius: 10px; transition: width 0.3s; }

  /* Lansering modal */
  .lansering-modal { position: fixed; inset: 0; background: rgba(0,0,0,0.6); display: flex; align-items: center; justify-content: center; z-index: 200; }
  /* Dialoger som kan öppnas OVANPÅ inställningsmodalen (#settings-overlay ligger
     på z-index 1000) måste ligga över den — licensändring, radera konto och den
     delade bekräftelsedialogen (ta bort medlem / lämna workspacet). .lansering-
     modal:s bas-z-index (200) räcker inte där, så dessa tre höjs. Egen backdrop
     (inset:0, rgba 0.6) tonar ner inställningsmodalen och gör dialogen klickbar.
     Ägaröverföring använder native confirm() och ligger alltid överst ändå. */
  #license-count-modal,
  #delete-account-modal,
  #delete-confirm-overlay { z-index: 1100; }
  /* max-height + overflow: modalen blir aldrig högre än fönstret; högt innehåll
     scrollar inuti boxen så knappraden alltid går att nå (påverkar inte utseendet
     när innehållet får plats). Lanseringsguiden (.wz-box) förfinar detta med en
     fast knapprad, se nedan. */
  .lansering-modal-box { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 28px; width: 400px; max-width: 95vw; max-height: 90vh; overflow-y: auto; }
  .lansering-modal-title { font-family: var(--display); font-size: 18px; font-weight: 700; margin-bottom: 18px; }
  .lansering-form-group { margin-bottom: 14px; }
  .lansering-form-label { font-size: 11px; color: var(--muted); margin-bottom: 4px; display: block; }
  .lansering-form-input { width: 100%; background: var(--input-bg); border: 1px solid var(--border); color: var(--text); font-family: var(--font); font-size: 13px; border-radius: 6px; padding: 8px 10px; }
  .lansering-form-input::placeholder { color: var(--muted2); }
  .lansering-modal-btns { display: flex; gap: 10px; justify-content: flex-end; margin-top: 20px; }

  /* Artikel-val modal (Tab 2 + lanseringsguidens steg 5) */
  .article-select-box { width: 560px; max-width: 95vw; }
  .article-select-filters { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
  .article-select-list { display: flex; flex-direction: column; gap: 4px; max-height: 360px; overflow-y: auto; }
  .article-select-row { display: flex; align-items: center; gap: 10px; background: var(--surface2); border: 1px solid var(--border); border-radius: 7px; padding: 8px 12px; cursor: pointer; transition: border-color 0.12s; }
  .article-select-row:hover { border-color: var(--border2); }
  .article-select-row.disabled { opacity: 0.45; cursor: not-allowed; }
  .article-select-row input[type=checkbox] { width: 15px; height: 15px; cursor: pointer; accent-color: #4ade80; flex-shrink: 0; }
  .article-select-name { font-size: 13px; font-weight: 500; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .article-select-meta { font-size: 11px; color: var(--muted); flex-shrink: 0; }
  .article-select-group { font-size: 10px; color: var(--muted); background: var(--surface); border: 1px solid var(--border); border-radius: 4px; padding: 2px 6px; flex-shrink: 0; }
  .article-select-added { font-size: 10px; color: #4ade80; flex-shrink: 0; font-weight: 600; }


  .article-delete-btn { background: none; border: none; color: var(--muted2); cursor: pointer; font-size: 13px; }
  .article-delete-btn:hover { color: #f87171; }
  .group-add-row { display: flex; gap: 8px; margin-top: 8px; }

  /* ── LANSERING DETAIL REDESIGN ── */
  .chain-selector-row { display: flex; align-items: center; gap: 8px; padding: 12px 0 8px; }
  .chain-select { background: var(--surface2); border: 1px solid var(--border); color: var(--text); font-family: var(--font); font-size: 13px; font-weight: 600; border-radius: 7px; padding: 7px 12px; cursor: pointer; min-width: 120px; }
  .detail-tabs { display: flex; border-bottom: 1px solid var(--border); gap: 0; }
  @media (max-width: 768px) {
    .detail-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; flex-wrap: nowrap; }
  }
  .detail-tab-btn { background: none; border: none; border-bottom: 2px solid transparent; color: var(--muted); cursor: pointer; font-family: var(--font); font-size: 12px; font-weight: 500; padding: 8px 16px; transition: all 0.12s; white-space: nowrap; margin-bottom: -1px; flex-shrink: 0; }
  .detail-tab-btn:hover { color: var(--text); }
  .detail-tab-btn.active { color: var(--text); border-bottom-color: var(--accent); font-weight: 600; }
  .detail-tab-area { padding-top: 16px; }

  .task-info-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; padding: 10px 14px; background: var(--surface2); border: 1px solid var(--border); border-radius: 8px; margin-bottom: 16px; font-size: 12px; }
  .task-info-cat { font-weight: 700; font-size: 11px; letter-spacing: 0.5px; }
  .task-info-sep { color: var(--border2); }
  .task-info-item { color: var(--muted); }
  .task-info-days { font-weight: 700; }
  .task-info-bar-empty { color: var(--muted2); font-size: 12px; }

  .hybrid-task-header { display: grid; grid-template-columns: 20px 1fr 130px 140px; gap: 8px; padding: 5px 12px 5px; font-size: 10px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; border: 1px solid var(--border); border-bottom: none; border-radius: 8px 8px 0 0; background: var(--surface2); }
  .hybrid-task-list { display: flex; flex-direction: column; border: 1px solid var(--border); border-top: none; border-radius: 0 0 8px 8px; overflow: hidden; }
  .hybrid-task-row { display: grid; grid-template-columns: 20px 1fr 130px 140px; gap: 8px; align-items: center; padding: 8px 12px; border-bottom: 1px solid var(--border); transition: background 0.1s; }
  .hybrid-task-row:last-child { border-bottom: none; }
  .hybrid-task-row:hover { background: rgba(255,255,255,0.025); }
  .hybrid-task-row.custom-task-row { grid-template-columns: 20px 1fr 130px 140px 22px; }
  .hybrid-task-row.mote-task-row { grid-template-columns: 20px 1fr 150px 130px 140px 22px; }
  .hybrid-task-row.done { opacity: 0.5; }
  /* Lanseringsnivå-uppgift — delad status/text på alla kedjeflikar */
  .hybrid-task-row.lansering-task-row { border-left: 3px solid var(--accent); }
  /* Autogenererat processteg (från processchemat) — egen box under de egna
     uppgifterna (se process-step-section nedan), tydlig guld/amber-bakgrund
     på hela raden så de går att skilja från egna uppgifter på ett ögonkast. */
  .hybrid-task-row.process-step-row { background: rgba(245,158,11,0.1); border-left: 3px solid #f59e0b; }
  .dark .hybrid-task-row.process-step-row { background: rgba(245,158,11,0.14); }
  .hybrid-task-row.process-step-row.done { background: rgba(245,158,11,0.04); }
  .process-step-icon-badge {
    flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%;
    background: #f59e0b; color: #fff; font-size: 11px;
    display: inline-flex; align-items: center; justify-content: center;
  }
  .hybrid-task-date-locked { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
  .process-step-section {
    margin-top: 20px; padding-top: 16px; border-top: 1px dashed var(--border);
  }
  .process-step-section-title {
    display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600;
    color: #f59e0b; margin-bottom: 10px;
  }

  /* ── UTFALL (Tab 5 i lanseringsdetaljen) ── */
  .outcome-chain-card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 16px 18px; box-shadow: var(--shadow-sm); margin-bottom: 16px; }
  .outcome-chain-card:last-child { margin-bottom: 0; }
  .outcome-chain-header { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
  .outcome-chain-logo { height: 20px; width: auto; object-fit: contain; max-width: 50px; flex-shrink: 0; }
  .outcome-chain-name { font-size: 14px; font-weight: 700; }
  .outcome-summary-badge { margin-left: auto; font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: 20px; white-space: nowrap; }
  .outcome-summary-listed { background: rgba(74,222,128,0.15); color: #16a34a; }
  .outcome-summary-not-listed { background: rgba(227,0,11,0.12); color: #E3000B; }
  .outcome-summary-pending { background: var(--surface2); color: var(--muted); }
  .outcome-summary-partial { background: rgba(245,158,11,0.15); color: #f59e0b; }
  .outcome-empty { font-size: 12px; color: var(--muted); padding: 4px 0; }
  .outcome-table-scroll { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
  .outcome-table { width: 100%; border-collapse: collapse; font-size: 12px; }
  .outcome-table thead th { text-align: left; padding: 7px 12px; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: var(--muted); border-bottom: 1px solid var(--border); background: var(--bg); }
  .outcome-table td { padding: 7px 12px; border-bottom: 1px solid var(--border); vertical-align: middle; }
  .outcome-row:last-child td { border-bottom: none; }
  .outcome-row-listed { background: rgba(74,222,128,0.06); }
  .outcome-row-not-listed { background: rgba(227,0,11,0.05); }
  .outcome-article-cell { font-weight: 500; }
  .outcome-artikelnr { color: var(--muted); font-weight: 400; }
  .outcome-status-select, .outcome-reason-select {
    background: var(--input-bg); border: 1px solid var(--border); color: var(--text);
    font-family: var(--font); font-size: 11px; border-radius: 5px; padding: 4px 6px; width: 100%;
  }
  .outcome-reason-empty { color: var(--muted2); font-size: 12px; }
  .outcome-details-input {
    background: var(--input-bg); border: 1px solid var(--border); color: var(--text);
    font-family: var(--font); font-size: 12px; border-radius: 5px; padding: 5px 8px; width: 100%; box-sizing: border-box;
  }
  .outcome-mote-summary { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border); }
  .outcome-mote-summary-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--muted); margin-bottom: 10px; }
  @media (max-width: 768px) {
    .outcome-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .outcome-table { table-layout: auto; width: auto; min-width: 100%; }
    .outcome-chain-header { gap: 8px; }
    .outcome-summary-badge { margin-left: 0; flex-basis: 100%; }
  }

  /* ── PROGNOS (Tab 6 i lanseringsdetaljen) ── */
  .forecast-box { margin-bottom: 28px; }
  .forecast-box:last-child { margin-bottom: 0; }
  .forecast-box-title { font-size: 13px; font-weight: 700; color: var(--text); margin-bottom: 12px; padding-bottom: 8px; border-bottom: 2px solid var(--accent); }
  .forecast-chain-card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 16px 18px; box-shadow: var(--shadow-sm); margin-bottom: 16px; }
  .forecast-chain-card:last-child { margin-bottom: 0; }
  .forecast-chain-title { font-size: 14px; font-weight: 700; margin-bottom: 4px; }
  .forecast-subtitle { font-size: 11px; color: var(--muted); margin-bottom: 12px; }
  .forecast-customer-header { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 12px; }
  .forecast-launch-label { font-size: 12px; color: var(--muted); }
  .forecast-weeks-label { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); flex-shrink: 0; }
  .forecast-weeks-input { width: 64px; flex: none; }
  .forecast-table-scroll { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
  .forecast-table { width: 100%; border-collapse: collapse; font-size: 12px; }
  .forecast-table thead th { text-align: left; padding: 7px 12px; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: var(--muted); border-bottom: 1px solid var(--border); background: var(--bg); }
  .forecast-table td { padding: 7px 12px; border-bottom: 1px solid var(--border); vertical-align: middle; }
  .forecast-table tbody tr:last-child td { border-bottom: none; }
  .forecast-article-cell { font-weight: 500; }
  .forecast-calc-cell { color: var(--muted); font-variant-numeric: tabular-nums; }
  .forecast-input {
    background: var(--input-bg); border: 1px solid var(--border); color: var(--text);
    font-family: var(--font); font-size: 12px; border-radius: 5px; padding: 5px 8px; width: 100%; box-sizing: border-box;
  }
  .forecast-summary-row { font-weight: 700; background: var(--surface2); }
  .forecast-summary-row td { border-bottom: none; }
  .forecast-summary-table { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 16px 18px; box-shadow: var(--shadow-sm); }
  @media (max-width: 768px) {
    .forecast-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .forecast-table { table-layout: auto; width: auto; min-width: 100%; }
    .forecast-customer-header { gap: 8px; }
    .forecast-weeks-label { flex-basis: 100%; }
  }
  .task-level-badge {
    flex-shrink: 0;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 2px 7px;
    border-radius: 4px;
    background: var(--accent-soft);
    color: var(--accent);
    white-space: nowrap;
  }
  .hybrid-task-check { width: 14px; height: 14px; cursor: pointer; accent-color: #4ade80; flex-shrink: 0; }
  .hybrid-task-name { font-size: 12px; }
  .hybrid-task-name.done-text { text-decoration: line-through; }
  .hybrid-task-name-input { background: transparent; border: none; color: var(--text); font-family: var(--font); font-size: 12px; width: 100%; outline: none; }
  .hybrid-task-name-input::placeholder { color: var(--muted2); }
  .hybrid-task-date { background: var(--input-bg); border: 1px solid var(--border); color: var(--text); font-family: var(--font); font-size: 11px; border-radius: 5px; padding: 3px 6px; width: 100%; box-sizing: border-box; }
  .task-owner-select { background: var(--input-bg); border: 1px solid var(--border); color: var(--text); font-family: var(--font); font-size: 11px; border-radius: 5px; padding: 3px 6px; width: 100%; }
  .task-owner-wrap { width: 100%; min-width: 0; display: flex; align-items: center; }
  .owner-free-part { display: flex; align-items: center; gap: 3px; width: 100%; }
  .task-owner-input { background: var(--input-bg); border: 1px solid var(--border2); color: var(--text); font-family: var(--font); font-size: 11px; border-radius: 5px; padding: 3px 6px; flex: 1; min-width: 0; width: 100%; }
  .owner-reset-btn { background: none; border: none; color: var(--muted2); cursor: pointer; font-size: 13px; padding: 0 2px; line-height: 1; flex-shrink: 0; }

  .activity-entry { background: var(--surface2); border: 1px solid var(--border); border-radius: 7px; padding: 10px 14px; }
  .activity-entry-editing { border-color: var(--accent); }
  .activity-entry-header { display: flex; gap: 8px; align-items: center; margin-bottom: 4px; flex-wrap: wrap; }
  .activity-entry-date { font-size: 10px; color: var(--muted); }
  .activity-entry-contact { font-size: 11px; font-weight: 600; }
  .activity-entry-intern { font-size: 11px; font-weight: 500; color: var(--muted); }
  .activity-entry-text { font-size: 12px; }
  .activity-entry-actions { display: flex; gap: 4px; margin-left: auto; }
  .activity-entry-btn { background: none; border: none; color: var(--muted2); cursor: pointer; font-family: var(--font); font-size: 11px; padding: 2px 6px; border-radius: 4px; transition: color 0.12s, background 0.12s; line-height: 1; }
  .activity-entry-btn:hover { color: var(--text); background: var(--surface); }
  .activity-entry-btn-delete:hover { color: #f87171; }
  .activity-edit-textarea { width: 100%; background: var(--input-bg); border: 1px solid var(--border); color: var(--text); font-family: var(--font); font-size: 12px; border-radius: 6px; padding: 8px 10px; resize: vertical; box-sizing: border-box; margin-top: 6px; outline: none; }

  /* ── KALKYL ── */
  .kalkyl-page { padding: 20px; max-width: 960px; }
  .kalkyl-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
  @media (max-width: 800px) { .kalkyl-grid { grid-template-columns: 1fr; } }
  .kalkyl-card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 22px; box-shadow: var(--shadow-sm); }
  .kalkyl-card-title { font-family: var(--display); font-weight: 700; font-size: 16px; margin-bottom: 4px; }
  .kalkyl-card-sub { font-size: 11px; color: var(--muted); margin-bottom: 18px; }
  .kalkyl-field { margin-bottom: 14px; }
  .kalkyl-label { font-size: 11px; color: var(--muted); margin-bottom: 4px; display: flex; justify-content: space-between; }
  .kalkyl-input { width: 100%; background: var(--input-bg); border: 1px solid var(--border); color: var(--text); font-family: var(--font); font-size: 13px; border-radius: 6px; padding: 8px 10px; }
  .kalkyl-input:focus { outline: none; border-color: #f59e0b; }
  .kalkyl-result-box { background: var(--surface2); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; margin-top: 16px; }
  .kalkyl-result-row { display: flex; justify-content: space-between; align-items: center; padding: 5px 0; border-bottom: 1px solid var(--border); font-size: 12px; }
  .kalkyl-result-row:last-child { border-bottom: none; }
  .kalkyl-result-label { color: var(--muted); }
  .kalkyl-result-value { font-weight: 600; font-family: var(--display); font-size: 14px; }
  .kalkyl-result-value.highlight { color: #f59e0b; font-size: 18px; }
  .kalkyl-result-value.green { color: #4ade80; }
  /* Värdekedja waterfall */
  .kalkyl-waterfall { display: flex; flex-direction: column; gap: 1px; margin-top: 4px; }
  .kalkyl-wf-row { display: flex; justify-content: space-between; align-items: center; padding: 9px 10px; border-radius: 7px; gap: 12px; border-bottom: 1px solid var(--border); }
  .kalkyl-wf-row:last-child { border-bottom: none; }
  .kalkyl-wf-calc { background: var(--surface2); border-color: transparent !important; }
  .kalkyl-wf-label { font-size: 12px; color: var(--muted); flex: 1; }
  .kalkyl-wf-val { font-weight: 600; font-family: var(--display); font-size: 14px; text-align: right; min-width: 110px; color: var(--text); }
  .kalkyl-wf-input { width: 130px !important; text-align: right; }
  .kalkyl-wf-calc { transition: opacity 0.25s ease, max-height 0.25s ease, padding-top 0.25s ease, padding-bottom 0.25s ease; overflow: hidden; max-height: 60px; }
  .kalkyl-wf-hidden { max-height: 0 !important; opacity: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; border-color: transparent !important; }

  /* ── PÅMINNELSER ── */
  .pam-page { padding: 20px; max-width: 700px; }
  .pam-card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 18px 20px; margin-bottom: 16px; box-shadow: var(--shadow-sm); }
  .pam-card-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
  .pam-card-title { font-family: var(--display); font-size: 14px; font-weight: 700; letter-spacing: 0.5px; }
  .pam-card-info { display: flex; align-items: flex-start; gap: 8px; font-size: 12px; color: var(--muted); line-height: 1.6; margin-bottom: 14px; }
  .pam-card-info i { flex-shrink: 0; margin-top: 2px; }


  /* ══════════════════════════════════════════
     NYA FUNKTIONER — BLOCK 4
  ══════════════════════════════════════════ */

  /* NÄTVERKSSTATUS-BANNER — se initNetworkStatusBanner() i src/ui.js.
     position:fixed så den aldrig stör sidebarens sticky-layout eller
     .app:s flex-rad (se _private/ARCHITECTURE.md-diskussionen om Årsplans
     sticky-fallgropar för varför en normal-flow-lösning här hade varit
     riskabelt). z-index lägre än hamburger-btn (600) så mobilmenyns
     öppna-knapp alltid går att klicka även när bannern visas. */
  .network-offline-banner {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 550;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 9px 16px;
    background: #f59e0b;
    color: #1a1200;
    font-family: var(--font);
    font-weight: 600;
    font-size: 13px;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  }
  .network-offline-banner.visible { display: flex; }
  @media (max-width: 768px) { .network-offline-banner { font-size: 12px; padding: 8px 44px; } }

  /* SPARFEL-TOAST — icke-blockerande "Försök igen" vid misslyckad sparning
     (se showSaveErrorToast() i src/ui.js). Fast position i nedre högra
     hörnet — täcker aldrig sidans innehåll, bara sitt eget begränsade kort. */
  .save-error-toast {
    position: fixed;
    right: 20px; bottom: 20px;
    z-index: 550;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    max-width: 340px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 3px solid #f59e0b;
    border-radius: 10px;
    box-shadow: var(--shadow-lg);
    padding: 12px 14px;
  }
  .save-error-toast-icon { color: #f59e0b; font-size: 18px; flex-shrink: 0; margin-top: 1px; }
  .save-error-toast-body { flex: 1; min-width: 0; }
  .save-error-toast-msg { font-size: 12px; color: var(--text); line-height: 1.5; margin-bottom: 8px; }
  .save-error-toast-actions { display: flex; align-items: center; gap: 10px; }
  .save-error-toast-close { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 13px; padding: 2px; margin-left: auto; }
  .save-error-toast-close:hover { color: var(--text); }
  @media (max-width: 480px) { .save-error-toast { left: 12px; right: 12px; max-width: none; } }

  /* ÅNGRA-TOAST (mjuk borttagning, Kategori A) — nere till vänster, undviker
     sparfel-toasten som ligger nere till höger */
  .undo-toast {
    position: fixed;
    left: 20px; bottom: 20px;
    z-index: 550;
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: 380px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    border-radius: 10px;
    box-shadow: var(--shadow-lg);
    padding: 12px 14px 14px;
    overflow: hidden;
  }
  .undo-toast-icon { color: var(--muted); font-size: 16px; flex-shrink: 0; }
  .undo-toast-body { flex: 1; min-width: 0; }
  .undo-toast-msg { font-size: 12px; color: var(--text); line-height: 1.4; }
  .undo-toast-btn { background: none; border: 1px solid var(--border2); color: var(--accent); font-weight: 700; cursor: pointer; font-size: 12px; padding: 5px 12px; border-radius: 6px; flex-shrink: 0; font-family: var(--font); white-space: nowrap; }
  .undo-toast-btn:hover { background: var(--surface2); }
  .undo-toast-secs { color: var(--muted); font-weight: 400; font-size: 11px; }
  .undo-toast-progress { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; }
  .undo-toast-progress-bar { height: 100%; background: var(--accent); transition: width 0.1s linear; }
  @media (max-width: 480px) { .undo-toast { left: 12px; right: 12px; max-width: none; } }

  /* NOTIFIKATIONS-BADGE */
  .notif-bell-wrap { position: relative; cursor: pointer; padding: 6px 8px; border-radius: 6px; transition: background 0.15s; }
  .notif-bell-wrap:hover { background: var(--surface2); }
  .notif-badge { position: absolute; top: 2px; right: 2px; background: #f87171; color: #fff; font-size: 9px; font-weight: 700; border-radius: 10px; min-width: 16px; height: 16px; display: flex; align-items: center; justify-content: center; padding: 0 3px; }
  .notif-panel { position: absolute; top: 48px; right: 16px; width: 360px; max-width: 95vw; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-lg); z-index: 300; overflow: hidden; }
  .notif-panel-header { padding: 14px 16px 10px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; }
  .notif-panel-title { font-family: var(--display); font-weight: 700; font-size: 14px; }
  .notif-list { max-height: 60vh; overflow-y: auto; }
  .notif-empty { padding: 28px 24px; text-align: center; color: var(--muted); font-size: 13px; }
  /* Rader i notisklockans "denna veckans att-göra"-dropdown */
  .todo-bell-item { display: flex; gap: 10px; align-items: flex-start; padding: 10px 16px; border-bottom: 1px solid var(--border); }
  .todo-bell-item:last-child { border-bottom: none; }
  .todo-bell-check { width: 16px; height: 16px; margin-top: 2px; flex-shrink: 0; cursor: pointer; accent-color: var(--accent); }
  .todo-bell-body { flex: 1; min-width: 0; cursor: pointer; }
  .todo-bell-name { font-size: 13px; font-weight: 500; color: var(--text); line-height: 1.35; margin-bottom: 5px; }
  .todo-bell-body:hover .todo-bell-name { text-decoration: underline; }
  .todo-bell-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
  .todo-bell-deadline { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
  .todo-bell-deadline.overdue { color: #E3000B; font-weight: 600; }
  .todo-bell-owner { font-size: 11px; color: var(--muted); }
  .todo-bell-footer { padding: 11px 16px; text-align: center; font-size: 12px; font-weight: 600; color: var(--primary); cursor: pointer; border-top: 1px solid var(--border); }
  .todo-bell-footer:hover { background: var(--surface2); }

  /* Generisk toast för addNotif() (UI-feedback: sparat/fel/validering). Matar
     INTE längre notisklockan — visas som en kort auto-släckt toast nedtill i
     mitten (över sparfel-/ångra-toasterna i z-index). */
  .app-toast-stack { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 600; display: flex; flex-direction: column-reverse; gap: 8px; align-items: center; width: max-content; max-width: 92vw; pointer-events: none; }
  .app-toast { pointer-events: auto; background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--muted2); border-radius: 10px; box-shadow: var(--shadow-lg); padding: 10px 14px; font-size: 13px; line-height: 1.45; color: var(--text); max-width: 92vw; opacity: 1; transform: translateY(0); transition: opacity .25s ease, transform .25s ease; }
  .app-toast--out { opacity: 0; transform: translateY(8px); }
  .app-toast--error { border-left-color: #E3000B; }
  .app-toast--success { border-left-color: #16a34a; }
  .app-toast--info { border-left-color: var(--primary); }

  /* GLOBAL SÖKNING */

  /* Sparad-indikator */
  @keyframes savedFade {
    0%   { opacity: 0; transform: translateY(-2px); }
    15%  { opacity: 1; transform: translateY(0); }
    75%  { opacity: 1; }
    100% { opacity: 0; }
  }
  .saved-indicator { display: inline-flex; align-items: center; gap: 3px; color: #4ade80; font-size: 11px; font-weight: 500; animation: savedFade 2.1s ease forwards; pointer-events: none; }

  /* Info-ikoner och tooltip */
  .info-icon-btn { background: none; border: none; cursor: pointer; color: var(--muted); font-size: 13px; padding: 0 2px; line-height: 1; vertical-align: middle; display: inline-flex; align-items: center; transition: color 0.15s; }
  .info-icon-btn:hover { color: var(--text); }
  .info-tooltip-popup { position: fixed; z-index: 9100; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 12px 15px; max-width: 280px; font-size: 12px; line-height: 1.65; color: var(--text); box-shadow: var(--shadow-lg); }
  /* (Popup-onboardingens .onboard-* stilar är borttagna — popupen ersatt av
     "Kom igång"-checklistan .onboarding-* nedan.) */

  /* ── NY DASHBOARD ── */
  .db-main { display: flex; flex-direction: column; gap: 24px; }
  .db-section { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 18px 20px; box-shadow: var(--shadow-sm); }
  .db-section-header { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; position: relative; }
  .db-section-title { font-family: var(--display); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--muted); }
  .db-info-btn { background: none; border: none; cursor: pointer; color: var(--muted); font-size: 14px; padding: 0; line-height: 1; display: flex; align-items: center; transition: color 0.15s; }
  .db-info-btn:hover { color: var(--text); }
  .db-mote-info-popup { position: absolute; top: calc(100% + 6px); left: 0; z-index: 50; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; font-size: 12px; color: var(--text); line-height: 1.6; max-width: 320px; box-shadow: var(--shadow-md); }
  /* Varumärkeskort */
  .db-brand-header { display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: var(--bg); border-bottom: 1px solid var(--border); }
  .db-brand-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; display: inline-block; }
  .db-brand-name { font-size: 13px; font-weight: 600; }

  /* ── Kedjeboxar (Hem-sidan, ovanför tågtabellen) ── */
  /* flex (inte grid) + min-width:0/flex:1 1 0 så boxarna krymper med innehållet, t.ex. när sidebar är öppen */
  .db-chain-boxes { display: flex; gap: 12px; margin-bottom: 16px; min-width: 0; }
  @media (max-width: 768px) { .db-chain-boxes { flex-direction: column; } }
  /* Surfplatta: kedjeboxarna i en rad med lite mindre padding */
  @media (min-width: 768px) and (max-width: 1023px) {
    .db-chain-box { padding: 10px 12px; gap: 8px; }
  }
  .db-chain-box { display: flex; align-items: center; gap: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; box-shadow: var(--shadow-sm); flex: 1 1 0; min-width: 0; }
  .db-chain-logo { height: 26px; width: auto; object-fit: contain; max-width: 56px; flex-shrink: 0; }
  .db-chain-info { flex: 1; min-width: 0; }
  .db-chain-label { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .db-chain-week { font-family: var(--display); font-size: 18px; font-weight: 700; line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .db-chain-days { font-size: 12px; font-weight: 600; white-space: nowrap; }
  .db-chain-none { font-size: 11px; color: var(--muted); font-style: italic; }

  /* ── Tågtabell (Hem-sidan) ── */
  /* Lanseringsöversikt: varumärkesboxar staplade i fullbredd */
  .db-lansoverview { display: flex; flex-direction: column; }
  .db-train-brand { width: 100%; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; margin-bottom: 16px; box-sizing: border-box; }
  .db-train-brand:last-child { margin-bottom: 0; }
  /* Fasta kolumnbredder via table-layout: fixed — alla varumärkesboxars tabeller i linje */
  .db-train-table { width: 100%; border-collapse: collapse; font-size: 12px; table-layout: fixed; }
  .db-train-table col:nth-child(1) { width: 25%; } /* Produktgrupp */
  .db-train-table col:nth-child(2) { width: 15%; } /* Kund */
  .db-train-table col:nth-child(3) { width: 25%; } /* Avisering */
  .db-train-table col:nth-child(4) { width: 15%; } /* Lansering */
  .db-train-table col:nth-child(5) { width: 20%; } /* Möte bokat */
  .db-train-table thead th { padding: 6px 10px; text-align: left; font-size: 10px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; border-bottom: 1px solid var(--border); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .db-train-table th, .db-train-table td { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .db-train-row { cursor: pointer; transition: background 0.12s; }
  .db-train-row:hover td:not(.db-train-mote-cell) { background: var(--bg); }
  .db-train-row td { padding: 8px 10px; vertical-align: middle; border-bottom: 1px solid var(--border); }
  .db-train-row:last-child td { border-bottom: none; }
  .db-train-group { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .db-train-week { font-family: var(--display); font-weight: 700; font-size: 12px; white-space: nowrap; }
  .db-train-mote-cell { text-align: center; width: 72px; transition: background 0.15s; }

  /* ── ATT GÖRA ── */
  .ag-filter-bar { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
  .ag-filter-bar .ov-search-wrap { flex: 1 1 220px; min-width: 180px; }
  .ag-filter-bar .ov-filter-chips { flex-wrap: nowrap; }
  .ag-passed-toggle { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); white-space: nowrap; cursor: pointer; flex-shrink: 0; }
  .ag-passed-toggle input { cursor: pointer; }
  @media (max-width: 768px) {
    .ag-filter-bar { flex-direction: column; align-items: stretch; }
    .ag-filter-bar .ov-search-wrap, .ag-filter-bar .ov-filter-chips, .ag-passed-toggle { width: 100%; }
    .ag-filter-bar .ov-filter-chips { flex-wrap: wrap; }
  }
  .ag-weeks { display: flex; flex-direction: column; gap: 16px; }
  .ag-week { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 16px 18px; box-shadow: var(--shadow-sm); }
  .ag-week-current { border-color: rgba(250,204,21,0.4); }
  .ag-week-header { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
  .ag-week-title { font-family: var(--display); font-size: 15px; font-weight: 700; color: var(--text); }
  .ag-week-now-badge { font-size: 10px; font-weight: 600; letter-spacing: 1px; background: rgba(250,204,21,0.15); color: #facc15; padding: 2px 9px; border-radius: 8px; }
  .ag-week-empty { font-size: 12px; color: var(--muted); padding: 2px 0; }
  .ag-brand-group { margin-bottom: 16px; }
  .ag-brand-group:last-child { margin-bottom: 0; }
  .ag-brand-header { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
  .ag-brand-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
  .ag-brand-name { font-size: 13px; font-weight: 600; }
  .ag-lansering-group { margin-bottom: 10px; margin-left: 17px; }
  .ag-lansering-group:last-child { margin-bottom: 0; }
  .ag-lansering-header { font-size: 11px; font-weight: 600; color: var(--muted); margin-bottom: 4px; }
  .ag-task-table-scroll { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
  .ag-task-table { width: 100%; border-collapse: collapse; font-size: 12px; }
  .ag-task-table thead th { text-align: left; padding: 7px 12px; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: var(--muted); border-bottom: 1px solid var(--border); background: var(--bg); }
  .ag-task-row td { padding: 8px 12px; border-bottom: 1px solid var(--border); vertical-align: middle; }
  .ag-task-row:last-child td { border-bottom: none; }
  .ag-task-name-cell { width: 36%; }
  .ag-task-deadline { font-variant-numeric: tabular-nums; color: var(--muted); white-space: nowrap; }
  .ag-task-check-label { display: flex; align-items: center; gap: 6px; cursor: pointer; }
  .ag-task-check-label input[type="checkbox"] { flex-shrink: 0; width: 16px; height: 16px; cursor: pointer; }
  .ag-task-launch { font-family: var(--display); font-weight: 700; white-space: nowrap; }
  .ag-task-row.ag-task-done .ag-task-check-label span { text-decoration: line-through; color: var(--muted); }
  .ag-task-row.ag-task-missed .ag-task-check-label span { color: var(--ica-color); font-weight: 600; }
  .ag-task-row.ag-task-missed { background: rgba(227,0,11,0.06); }
  .ag-task-row.ag-task-process { background: rgba(245,158,11,0.1); box-shadow: inset 3px 0 0 #f59e0b; }
  .dark .ag-task-row.ag-task-process { background: rgba(245,158,11,0.14); }
  .ag-task-row.ag-task-process.ag-task-done { background: rgba(245,158,11,0.04); }
  .ag-process-icon-badge {
    flex-shrink: 0; width: 18px; height: 18px; border-radius: 50%;
    background: #f59e0b; color: #fff; font-size: 10px;
    display: inline-flex; align-items: center; justify-content: center;
  }
  .ag-passed-section { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--border); opacity: 0.75; }
  .ag-passed-title { font-family: var(--display); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); margin-bottom: 14px; }
  .ag-footnote { font-size: 11px; color: var(--muted); margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--border); }
  @media (max-width: 768px) {
    .ag-task-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .ag-task-table { table-layout: auto; width: auto; min-width: 100%; }
    .ag-week { padding: 14px; }
    .ag-lansering-group { margin-left: 10px; }
  }

  /* OVERVIEW — SÖKRUTA OCH KEDJEFILTER */
  .ov-search-wrap { position: relative; display: flex; align-items: center; margin-bottom: 10px; }
  .ov-search-input { width: 100%; padding: 8px 32px 8px 12px; font-size: 13px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); color: var(--text); outline: none; transition: border-color 0.15s; box-sizing: border-box; }
  .ov-search-input:focus { border-color: var(--accent); }
  .ov-search-clear { position: absolute; right: 8px; background: none; border: none; cursor: pointer; color: var(--muted); font-size: 13px; padding: 2px 4px; line-height: 1; transition: color 0.15s; }
  .ov-search-clear:hover { color: var(--text); }
  .ov-filter-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
  .ov-chip { padding: 5px 12px; font-size: 12px; font-weight: 500; border: 1px solid var(--border); border-radius: 20px; background: var(--bg); color: var(--muted); cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s; white-space: nowrap; }
  .ov-chip:hover { background: var(--surface2); color: var(--text); }
  .ov-chip.active { background: var(--accent); color: #fff; border-color: var(--accent); }
  .ov-empty-state { text-align: center; color: var(--muted); font-size: 13px; padding: 32px 0; }
  @media (max-width: 390px) {
    .ov-filter-chips { gap: 4px; }
    .ov-chip { padding: 4px 10px; font-size: 11px; }
  }

  /* Mobil: tabellen behåller sin naturliga bredd (ingen kolumn döljs/krymps)
     och en dedikerad scroll-container tillåter sidoscroll istället. */
  @media (max-width: 1023px) {
    .db-train-table-scroll { position: relative; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .db-train-table { table-layout: auto; width: auto; min-width: 100%; }
    .db-train-table col { width: auto; }
    .db-train-table th, .db-train-table td { overflow: visible; text-overflow: clip; }
    .db-train-table-scroll::after {
      content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 20px;
      background: linear-gradient(to right, transparent, var(--surface));
      pointer-events: none;
    }
  }

  /* DEADLINE-TIDSLINJE PER LANSERING */
  .deadline-timeline { display: flex; flex-direction: column; gap: 0; position: relative; margin: 8px 0 4px 8px; }
  .deadline-timeline::before { content:''; position: absolute; left: 6px; top: 0; bottom: 0; width: 1px; background: var(--border); }
  .dl-step { display: flex; gap: 14px; align-items: flex-start; padding: 6px 0; position: relative; }
  .dl-dot { width: 13px; height: 13px; border-radius: 50%; flex-shrink: 0; margin-top: 2px; z-index: 1; border: 2px solid var(--surface); }
  .dl-dot.done { background: #4ade80; }
  .dl-dot.due { background: #f59e0b; }
  .dl-dot.late { background: #f87171; }
  .dl-dot.future { background: var(--surface2); border-color: var(--border2); }
  .dl-step-body { flex: 1; }
  .dl-step-name { font-size: 12px; font-weight: 500; }
  .dl-step-date { font-size: 10px; color: var(--muted); margin-top: 1px; }
  .dl-step-name.done-text { text-decoration: line-through; opacity: 0.45; }
  .dl-step.past { opacity: 0.45; }
  .dl-step.past .dl-step-name { text-decoration: line-through; }

  /* Statisk info-not under Coop-steglistan (streckkodsdeadline) — se
     timeline.js och calendar.js (renderDeadlineTimeline). Inget avbockbart
     steg, bara diskret informationstext. */
  .coop-static-note {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-style: italic;
    color: var(--muted);
    margin-top: 8px;
    padding: 0 4px;
  }
  .coop-static-note i { font-size: 12px; flex-shrink: 0; }

  /* MÖTES-KALENDER */
  /* NOTERINGAR PER FÖNSTER */
  .window-note-btn { font-size: 10px; background: none; border: 1px dashed var(--border2); color: var(--muted); border-radius: 4px; padding: 2px 7px; cursor: pointer; transition: all 0.12s; }
  .window-note-btn:hover { border-color: #f59e0b; color: #f59e0b; }
  .window-note-panel { background: var(--surface2); border: 1px solid var(--border); border-radius: 6px; padding: 10px 12px; margin-top: 6px; }
  .window-note-textarea { width: 100%; background: transparent; border: none; color: var(--text); font-family: var(--font); font-size: 12px; resize: vertical; min-height: 60px; outline: none; }
  .window-note-textarea::placeholder { color: var(--muted2); }

  /* AKTIVITETSLOGG */
  .activity-feed { display: flex; flex-direction: column; gap: 0; }
  .activity-item { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 12px; }
  .activity-item:last-child { border-bottom: none; }
  .activity-icon { font-size: 14px; width: 24px; text-align: center; flex-shrink: 0; }
  .activity-body { flex: 1; line-height: 1.4; }
  .activity-time { font-size: 10px; color: var(--muted); flex-shrink: 0; }

  /* KOMMENTARER */
  .comments-section { margin-top: 16px; }
  .comment-item { display: flex; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--border); }
  .comment-avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--surface2); border: 1px solid var(--border2); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: var(--muted); flex-shrink: 0; }
  .comment-body { flex: 1; }
  .comment-meta { font-size: 10px; color: var(--muted); margin-bottom: 3px; }
  .comment-text { font-size: 12px; line-height: 1.5; }
  .comment-input-row { display: flex; gap: 8px; margin-top: 10px; align-items: flex-end; }
  .comment-textarea { flex: 1; background: var(--input-bg); border: 1px solid var(--border); color: var(--text); font-family: var(--font); font-size: 12px; border-radius: 6px; padding: 8px 10px; resize: none; min-height: 38px; }
  .comment-textarea:focus { outline: none; border-color: var(--input-focus); }

  /* ═══════════════════════════════════════════════
     LANSERING WIZARD
     ═══════════════════════════════════════════════ */

  .wz-box {
    max-width: 580px;
    width: 100%;
    /* Sticky footer-layout: boxen är kapad till 90vh (från .lansering-modal-box).
       Header/steg/summering ligger fast överst, wz-nav (Nästa/Tillbaka) fast
       nederst, och wz-content scrollar däremellan — så navigeringsknapparna
       ALLTID syns oavsett hur högt steget är. Utseendet är oförändrat när
       innehållet får plats (boxen är då innehållshög, inget scrollar). */
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .wz-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    flex-shrink: 0;
  }

  .wz-close-btn {
    background: none;
    border: none;
    color: var(--muted);
    font-size: 16px;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 4px;
    opacity: 0.6;
    transition: opacity 0.15s;
  }
  .wz-close-btn:hover { opacity: 1; }

  /* Steg-indikatorer */
  .wz-steps {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin-bottom: 24px;
    flex-shrink: 0;
  }

  .wz-step-dot {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--surface2);
    border: 2px solid var(--border);
    color: var(--muted);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    flex-shrink: 0;
    transition: background 0.2s, border-color 0.2s;
  }
  .wz-step-dot.active {
    background: #f59e0b;
    border-color: #f59e0b;
    color: #000;
  }
  .wz-step-dot.done {
    background: #4ade80;
    border-color: #4ade80;
    color: #000;
  }

  .wz-step-line {
    height: 2px;
    width: 52px;
    background: var(--border);
    flex-shrink: 0;
    transition: background 0.2s;
  }
  .wz-step-line.done { background: #4ade80; }

  /* Sammanfattningsrad */
  .wz-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    padding: 8px 12px;
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 6px;
    margin-bottom: 20px;
    font-size: 12px;
    flex-shrink: 0;
  }
  .wz-summary-item { opacity: 0.85; }

  /* Step-innehåll — det enda som scrollar när steget är högre än fönstret.
     flex:1 1 auto + basis auto → tar sin naturliga höjd (med 160px-golvet) när
     det får plats, växer/scrollar när boxen kapats till 90vh. */
  .wz-content { flex: 1 1 auto; min-height: 160px; overflow-y: auto; }
  /* På låga fönster tas 160px-golvet bort så innehållet kan krympa och wz-nav
     garanterat får plats (aldrig avklippt) — utan att förminska webbläsaren. */
  @media (max-height: 720px) { .wz-content { min-height: 0; } }

  .wz-step-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 16px;
    font-family: var(--display);
    letter-spacing: 0.02em;
  }

  .wz-step-sub {
    font-size: 12px;
    color: var(--muted);
    opacity: 0.7;
    margin-top: -10px;
    margin-bottom: 14px;
  }

  /* Navigering — fast knapprad nederst (scrollar aldrig bort). */
  .wz-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 16px;
    margin-top: 20px;
    border-top: 1px solid var(--border);
    flex-shrink: 0;
  }

  /* Kedjeknappar */
  .wz-chain-btns {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
  }

  .wz-chain-btn {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 9px 18px;
    border: 2px solid var(--border);
    border-radius: 8px;
    background: var(--surface2);
    color: var(--text);
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    font-family: var(--font);
    transition: border-color 0.15s, background 0.15s;
  }
  .wz-chain-btn.active {
    border-color: var(--chain-col);
    background: color-mix(in srgb, var(--chain-col) 12%, transparent);
    color: var(--chain-col);
  }

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

  /* Kedjesektion i steg 3 */
  .wz-chain-section {
    padding: 12px 14px;
    margin-bottom: 12px;
    border-left: 3px solid var(--border);
    border-radius: 0 6px 6px 0;
    background: var(--surface2);
  }

  .wz-chain-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 8px;
  }

  /* Fönstervals-lista i steg 4 — alla lanseringsveckor för vald kategori */
  .wz-window-label {
    font-size: 11px;
    color: var(--muted);
    opacity: 0.7;
    margin-top: 10px;
    margin-bottom: 6px;
  }

  .wz-window-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .wz-window-opt {
    padding: 8px 12px;
    border: 1px solid var(--border2);
    border-radius: 6px;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
  }
  .wz-window-opt:hover { border-color: #f59e0b; }
  .wz-window-opt.active {
    border-color: #f59e0b;
    background: rgba(245,158,11,0.1);
  }

  .wz-window-week {
    font-size: 13px;
    font-weight: 700;
  }
  .wz-window-opt.active .wz-window-week { color: #fbbf24; }

  .wz-window-sub {
    font-size: 11px;
    color: var(--muted);
    margin-top: 2px;
  }

  /* Artikelrader */
  .wz-article-row {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 6px;
  }
  .wz-article-row .lansering-form-input { flex: 1; }

  .wz-remove-btn {
    background: none;
    border: 1px solid var(--border2);
    color: var(--muted);
    border-radius: 4px;
    width: 26px;
    height: 26px;
    cursor: pointer;
    font-size: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: border-color 0.15s, color 0.15s;
  }
  .wz-remove-btn:hover { border-color: #f87171; color: #f87171; }

  .wz-add-article-btn {
    background: none;
    border: 1px dashed var(--border2);
    color: var(--muted);
    border-radius: 6px;
    padding: 7px 14px;
    font-size: 12px;
    font-family: var(--font);
    cursor: pointer;
    margin-top: 4px;
    width: 100%;
    transition: border-color 0.15s, color 0.15s;
  }
  .wz-add-article-btn:hover { border-color: #f59e0b; color: #f59e0b; }

  /* Kategori-dropdown i steg 3 */
  .wz-cat-dropdown {
    position: relative;
    margin-bottom: 8px;
  }
  .wz-cat-dropdown .lansering-form-input {
    width: 100%;
    padding-right: 28px;
    cursor: pointer;
  }
  .wz-cat-trigger {
    display: flex;
    align-items: center;
    cursor: pointer;
    box-sizing: border-box;
    min-height: 36px;
    overflow: hidden;
    white-space: nowrap;
    width: 100%;
    padding-right: 28px;
  }
  .wz-cat-placeholder {
    color: var(--muted2);
  }
  .wz-cat-search-wrap {
    padding: 6px 8px;
    border-bottom: 1px solid var(--border2);
    position: sticky;
    top: 0;
    background: var(--surface);
    z-index: 1;
  }
  .wz-cat-search-input {
    width: 100%;
    background: transparent;
    border: none;
    outline: none;
    color: var(--text);
    font-family: var(--font);
    font-size: 12px;
    padding: 4px;
    box-sizing: border-box;
  }
  .wz-cat-arrow {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--muted);
    font-size: 13px;
    pointer-events: none;
    user-select: none;
  }
  .wz-cat-list-float {
    display: none;
    position: absolute;
    top: calc(100% + 2px);
    left: 0;
    right: 0;
    max-height: 220px;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--surface);
    z-index: 200;
    box-shadow: var(--shadow-md);
  }
  .wz-cat-item {
    padding: 7px 10px;
    font-size: 12px;
    cursor: pointer;
    border-bottom: 1px solid var(--border);
    transition: background 0.1s;
    user-select: none;
  }
  .wz-cat-item:last-child { border-bottom: none; }
  .wz-cat-item:hover { background: var(--surface2); }
  .wz-cat-item.active { background: rgba(245,158,11,0.12); color: #fbbf24; font-weight: 600; }
  .wz-cat-empty {
    padding: 14px 10px;
    font-size: 12px;
    color: var(--muted);
    opacity: 0.6;
    text-align: center;
  }
  .wz-selected-cat {
    font-size: 12px;
    font-weight: 600;
    color: #fbbf24;
    margin-bottom: 6px;
  }

  /* ══════════════════════════════════════════
     LANDNINGSSIDA
  ══════════════════════════════════════════ */

  #landing-page {
    font-family: var(--font);
    color: var(--text);
    background: var(--bg);
  }
  #landing-page * { box-sizing: border-box; }

  /* NAV */
  .lp-nav {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(240,242,245,0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border);
    padding: 0 40px;
    height: 64px;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
  }
  body.dark .lp-nav {
    background: rgba(7,21,48,0.92);
  }
  .lp-nav-logo {
    display: flex;
    align-items: center;
    gap: 0;
    text-decoration: none;
  }
  .lp-nav-logo .logo-h { height: 26px; }
  .lp-nav-center {
    display: flex;
    align-items: center;
    gap: 32px;
    justify-content: center;
  }
  .lp-nav-actions { display: flex; align-items: center; gap: 12px; justify-content: flex-end; }
  .lp-nav-link {
    color: var(--muted);
    font-size: 14px;
    text-decoration: none;
    transition: color 0.15s;
    cursor: pointer;
  }
  .lp-nav-link:hover { color: var(--text); }
  @media (max-width: 768px) {
    .lp-nav { grid-template-columns: 1fr auto; }
    .lp-nav-center { display: none; }
  }
  .lp-btn-primary {
    background: var(--btn-bg);
    color: var(--btn-text);
    border: none;
    padding: 10px 22px;
    border-radius: 8px;
    font-family: var(--font);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: opacity 0.15s, transform 0.15s;
    text-decoration: none;
    display: inline-block;
  }
  .lp-btn-primary:hover { background: var(--btn-hover-bg); transform: translateY(-1px); }
  .lp-btn-secondary {
    background: transparent;
    color: var(--text);
    border: 1px solid var(--border2);
    padding: 10px 22px;
    border-radius: 8px;
    font-family: var(--font);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: border-color 0.15s, transform 0.15s;
    text-decoration: none;
    display: inline-block;
  }
  .lp-btn-secondary:hover { border-color: var(--primary); transform: translateY(-1px); }

  /* HERO */
  .lp-hero {
    padding: 60px 40px 40px;
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 40px;
  }
  @media (max-width: 768px) {
    .lp-hero { padding: 40px 24px 32px; gap: 32px; }
  }
  .lp-hero-center {
    max-width: 680px;
    width: 100%;
  }
  /* Staplad logga — hero + auth-modal (se _private/handoff/BRAND.md §2). */
  .logo-stacked { height: 120px; width: auto; max-width: 100%; object-fit: contain; display: inline-block; }
  .logo-stacked-dark { display: none; }
  body.dark .logo-stacked-light { display: none; }
  body.dark .logo-stacked-dark { display: inline-block; }
  .lp-hero h1 {
    font-size: 32px;
    font-weight: 300;
    line-height: 1.1;
    letter-spacing: -0.03em;
    color: var(--primary);
    margin-bottom: 20px;
    white-space: nowrap;
  }
  body.dark .lp-hero h1 { color: var(--text); }
  @media (max-width: 600px) { .lp-hero h1 { font-size: 36px; } }
  .lp-hero-sub {
    font-size: 18px;
    color: var(--muted);
    line-height: 1.65;
    margin-bottom: 36px;
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
  }
  .lp-hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
  .lp-hero-visual-wide {
    width: 100%;
    max-width: 920px;
  }
  .lp-hero-visual-inner {
    display: flex;
    gap: 16px;
    align-items: stretch;
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
  }
  @media (max-width: 600px) {
    .lp-hero-visual-inner { flex-direction: column; }
  }

  /* "Nästa avisering"-korten — delas av landningssidans hero-visual OCH
     Hem-sidans hero-kort (#hero-area, renderHero) så de inte kan drifta isär.
     Kedjefärgen sätts per kort i --chain och driver ton, topp-accent,
     avdelare och etikettfärg — så att allt linjerar och den vita ytan bryts upp. */
  .lp-nextcard {
    flex: 1;
    min-width: 0;
    position: relative;
    overflow: hidden;
    padding: 22px 22px 20px;
    border-radius: 16px;
    background: color-mix(in srgb, var(--chain) 6%, var(--surface));
    border: 1px solid color-mix(in srgb, var(--chain) 24%, transparent);
    box-shadow: var(--shadow-md);
  }
  /* Tunn topp-accent i kedjefärgen — samma på alla tre för visuell enhet. */
  .lp-nextcard::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--chain);
  }
  .lp-nextcard--coop  { --chain: var(--coop-color); }
  .lp-nextcard--ica   { --chain: var(--ica-color); }
  .lp-nextcard--dagab { --chain: var(--dagab-color); }

  /* Topprad: etikett vänster, logga höger — fast höjd så logotyperna
     centreras vertikalt och linjerar trots olika bredd/proportion. */
  .lp-nextcard-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 28px;
    margin-bottom: 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid color-mix(in srgb, var(--chain) 18%, transparent);
  }
  .lp-nextcard-eyebrow {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--chain);
  }
  .lp-nextcard-logo {
    display: flex;
    align-items: center;
    height: 26px;
    flex-shrink: 0;
  }
  .lp-nextcard-logo img {
    max-height: 24px;
    max-width: 92px;
    width: auto;
    object-fit: contain;
    display: block;
  }
  .lp-nextcard-week {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 44px;
    font-weight: 800;
    line-height: 0.9;
    color: var(--text);
    margin-bottom: 12px;
  }
  /* Underrad (endast Hem-korten): lanseringsveckan som en diskret rad UNDER det
     identiska kortet. Ligger i cell-wrappern (renderHero), ALDRIG inne i
     .lp-nextcard — så själva kortet förblir pixelidentiskt med landningssidan
     (den får inte ändra kortets storlek, ton eller struktur). */
  .lp-nextcard-sub {
    font-size: 12px;
    font-weight: 500;
    color: var(--muted);
    margin: 8px 0 0;
    padding: 0 4px;
  }
  /* Statuspill — fylld färgruta med prick, ger färg och signalerar hur
     bråttom det är (grönt = gott om tid, gult = agera snart). */
  .lp-nextcard-days {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1;
    padding: 5px 11px;
    border-radius: 999px;
  }
  .lp-nextcard-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
  }
  .lp-nextcard-days--ok   { color: #16a34a; background: rgba(22,163,74,0.13); }
  .lp-nextcard-days--soon { color: #d97706; background: rgba(217,119,6,0.15); }
  /* I mörkt läge sitter hero-kortens logotyper på en ljus chip så att även
     mörka märken (t.ex. Dagabs mörkgröna ordbild) förblir läsbara. Chippen
     ligger på behållaren så alla tre kedjor får samma ram och linjerar. */
  body.dark .lp-nextcard-logo {
    height: auto;
    padding: 5px 9px;
    border-radius: 8px;
    background: rgba(255,255,255,0.94);
  }
  /* Hero-kortens logga chippas via behållaren ovan — nolla därför den
     generella Dagab-chippen (nedan) inuti korten så loggan varken
     dubbel-chippas eller får avvikande storlek som bryter linjeringen. */
  body.dark .lp-nextcard .lp-nextcard-logo img {
    background: none;
    padding: 0;
    border-radius: 0;
  }

  /* ── Dagab-logga i mörkt läge (app-övergripande) ──
     Dagabs mörkgröna ordbild är oläsbar mot mörka ytor. Ge den en ljus chip
     ENBART i mörkt läge, överallt den renderas (attributselektorn fångar alla
     ställen: Hem-boxar, kategorisidan, processchema, KPI/utfall, Marknaden m.m.).
     Coop/ICA (klargrön/röd) och Lidl (egen blå platta) är läsbara och lämnas orörda.
     Ljust läge påverkas aldrig. */
  body.dark img[src$="Dagab.png"] {
    background: rgba(255,255,255,0.94);
    border-radius: 3px;
    padding: 1px 3px;
    box-sizing: content-box;
  }

  /* SOCIAL PROOF */
  .lp-proof {
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    padding: 14px 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 48px;
    flex-wrap: wrap;
  }
  .lp-proof-item {
    display: flex;
    align-items: flex-start;   /* pricken vid textens FÖRSTA rad, inte centrerad över flera rader */
    gap: 10px;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.4;
  }
  .lp-proof-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--accent);  /* neutral brand-accent (BRAND.md) — aldrig kedje-/statusfärg */
    flex-shrink: 0;
    margin-top: calc((1.4em - 6px) / 2);  /* centrera pricken på första radens mitt */
  }
  /* Mobil: stapla punkterna med IDENTISK vänsterkant. I radläge centreras varje
     rad var för sig (justify-content:center), så den kortaste punkten ser
     indragen ut — kolumnläge med flex-start ger alla tre samma vänsterkant. */
  @media (max-width: 600px) {
    .lp-proof { flex-direction: column; align-items: flex-start; gap: 12px; padding: 14px 24px; }
  }

  /* FEATURES */
  .lp-features { max-width: 1200px; margin: 0 auto; padding: 64px 40px; display: flex; flex-direction: column; gap: 64px; }
  @media (max-width: 600px) { .lp-features { padding: 40px 24px; gap: 40px; } }

  .lp-feature {
    display: flex;
    flex-direction: column;
    gap: 24px;
    max-width: 900px;
    margin: 0 auto 32px;
    padding: 0 16px;
  }
  @media (max-width: 600px) {
    .lp-feature { gap: 16px; margin-bottom: 24px; }
  }
  .lp-feature-eyebrow {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--coop-color);
    margin-bottom: 14px;
  }
  .lp-feature h2 {
    font-size: 32px;
    font-weight: 400;
    letter-spacing: -0.01em;
    color: var(--primary);
    line-height: 1.25;
    margin-bottom: 16px;
  }
  body.dark .lp-feature h2 { color: var(--text); }
  @media (max-width: 600px) { .lp-feature h2 { font-size: 24px; } }
  .lp-feature-desc {
    font-size: 16px;
    color: var(--muted);
    line-height: 1.65;
  }
  .lp-feature-visual {
    width: 100%;
  }
  .lp-feature-visual img {
    width: 100%;
    max-width: 900px;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.12);
    display: block;
  }
  @media (max-width: 600px) {
    .lp-feature-visual img { border-radius: 8px; }
  }

  /* PRICING */
  .lp-pricing {
    max-width: 900px;
    margin: 0 auto;
    padding: 48px 40px;
  }
  @media (max-width: 600px) { .lp-pricing { padding: 32px 24px; } }
  .lp-pricing-header { text-align: center; margin-bottom: 48px; }
  .lp-pricing-eyebrow {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 14px;
  }
  .lp-pricing h2 {
    font-size: 36px;
    font-weight: 400;
    color: var(--primary);
    letter-spacing: -0.02em;
  }
  body.dark .lp-pricing h2 { color: var(--text); }
  .lp-pricing-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
  @media (max-width: 600px) { .lp-pricing-cards { grid-template-columns: 1fr; } }
  .lp-pricing-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 32px;
    box-shadow: var(--shadow-sm);
  }
  .lp-pricing-name { font-size: 15px; font-weight: 600; margin-bottom: 8px; }
  .lp-pricing-price { font-size: 40px; font-weight: 300; letter-spacing: -0.02em; color: var(--primary); line-height: 1; margin-bottom: 4px; }
  body.dark .lp-pricing-price { color: var(--text); }
  .lp-pricing-price span { font-size: 16px; font-weight: 400; color: var(--muted); }
  .lp-pricing-sub { font-size: 13px; color: var(--muted); margin-bottom: 28px; }
  .lp-pricing-features { list-style: none; padding: 0; margin: 0 0 28px; display: flex; flex-direction: column; gap: 10px; }
  .lp-pricing-features li { font-size: 14px; color: var(--text); display: flex; align-items: flex-start; gap: 10px; line-height: 1.4; }
  .lp-pricing-features li::before { content: ''; width: 16px; height: 16px; border-radius: 50%; background: var(--accent); flex-shrink: 0; display: flex; align-items: center; justify-content: center; margin-top: calc((1.4em - 16px) / 2); }
  .lp-stepper-btn { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface2); cursor: pointer; font-size: 22px; display: flex; align-items: center; justify-content: center; color: var(--text); transition: background 0.15s; flex-shrink: 0; line-height: 1; }
  .lp-stepper-btn:hover { background: var(--border); }

  /* CTA SECTION */
  .lp-cta {
    background: var(--surface2);
    border-top: 1px solid var(--border);
    padding: 48px 40px;
  }
  .lp-cta-inner {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 48px;
    flex-wrap: wrap;
  }
  .lp-cta-text { flex: 1; min-width: 240px; }
  .lp-cta h2 {
    font-size: 36px;
    font-weight: 300;
    letter-spacing: -0.02em;
    margin-bottom: 10px;
    color: var(--primary);
  }
  body.dark .lp-cta h2 { color: var(--text); }
  .lp-cta-sub { font-size: 16px; color: var(--muted); line-height: 1.6; }
  .lp-cta-btns { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
  .lp-cta-btn-main { padding: 13px 28px; font-size: 15px; }
  .lp-cta-btn-sub { padding: 13px 28px; font-size: 15px; }
  @media (max-width: 700px) {
    .lp-cta { padding: 32px 24px; }
    .lp-cta-inner { flex-direction: column; align-items: flex-start; }
  }
  /* FOOTER */
  .lp-footer {
    background: var(--surface);
    border-top: 1px solid var(--border);
    padding: 32px 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
  }
  .lp-footer-copy { font-size: 13px; color: var(--muted); }
  .lp-footer-links { display: flex; gap: 24px; }
  .lp-footer-link { font-size: 13px; color: var(--muted); text-decoration: none; cursor: pointer; transition: color 0.15s; }
  .lp-footer-link:hover { color: var(--text); }

  /* COOKIE-BANNER */
  .cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    background: var(--btn-bg);
    color: var(--btn-text);
    padding: 16px 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    box-shadow: 0 -2px 12px rgba(0,0,0,0.15);
  }
  .cookie-banner-text { font-size: 13px; line-height: 1.5; flex: 1; min-width: 240px; }
  .cookie-banner-text a { color: var(--btn-text); text-decoration: underline; }
  .cookie-banner-actions { display: flex; gap: 12px; flex-wrap: wrap; }
  .cookie-banner-actions button {
    font-family: var(--font);
    font-size: 13px;
    font-weight: 500;
    padding: 8px 18px;
    border-radius: 8px;
    cursor: pointer;
    transition: opacity 0.15s, transform 0.12s;
  }
  .cookie-banner-actions button:hover { transform: translateY(-1px); }
  .cookie-banner-btn-accept { background: var(--btn-text); color: var(--btn-bg); border: none; }
  .cookie-banner-btn-necessary { background: transparent; color: var(--btn-text); border: 1px solid var(--btn-text); }
  @media (max-width: 700px) {
    .cookie-banner { padding: 16px 20px; flex-direction: column; align-items: stretch; text-align: center; }
    .cookie-banner-actions { justify-content: center; }
  }

  /* Feature icon list in feature section */
  .lp-feature-checklist { list-style: none; padding: 0; margin: 20px 0 0; display: flex; flex-direction: column; gap: 8px; }
  .lp-feature-checklist li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.4; color: var(--muted); }
  .lp-feature-checklist li::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex-shrink: 0; margin-top: calc((1.4em - 6px) / 2); }

/* ═══════════════════════════════════════════
   CONTACTS PAGE
═══════════════════════════════════════════ */
.contacts-page { max-width: 960px; }
.contacts-search-bar {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 16px;
}
.contacts-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}
.contacts-table {
  width: 100%;
  border-collapse: collapse;
}
.contacts-table th {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 8px 10px;
  text-align: left;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.contacts-table td {
  font-size: 12px;
  padding: 10px;
  border-bottom: 1px solid var(--border2);
  vertical-align: middle;
}
.contacts-table tr:hover td { background: var(--surface2); }
.contact-chain-badge {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

/* ═══════════════════════════════════════════
   LANSERING CONTACTS SECTION
═══════════════════════════════════════════ */
.lansering-contacts-section {
  margin-bottom: 14px;
  padding: 14px 16px;
  background: var(--surface2);
  border-radius: 10px;
  border: 1px solid var(--border);
}
.lansering-contacts-title {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
}
.lansering-contacts-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: 10px;
}
.lansering-contact-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid var(--border2);
}
.lansering-contact-row:last-child { border-bottom: none; }
.lansering-contact-name { font-size: 12px; font-weight: 600; }
.lansering-contact-meta { font-size: 11px; color: var(--muted); }
.lansering-contacts-add {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

/* ── ADMIN-SIDA (/admin) ── */
.admin-header {
  background: var(--primary);
  color: #fff;
  padding: 18px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.admin-header-title {
  font-family: var(--display);
  font-weight: 800;
  font-size: 18px;
  letter-spacing: 0.12em;
}
.admin-header-meta {
  display: flex;
  align-items: center;
  gap: 20px;
  font-size: 13px;
  opacity: 0.85;
}
.admin-header-link {
  color: #fff;
  text-decoration: underline;
}
.admin-content {
  max-width: 1300px;
  margin: 0 auto;
  padding: 24px 32px 64px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.admin-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
@media (max-width: 900px) {
  .admin-kpi-grid { grid-template-columns: repeat(2, 1fr); }
}
.admin-kpi-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px;
  box-shadow: var(--shadow-sm);
}
.admin-kpi-value {
  font-family: var(--display);
  font-size: 32px;
  font-weight: 800;
  color: var(--primary);
}
body.dark .admin-kpi-value { color: var(--text); }
.admin-kpi-label {
  font-size: 12px;
  color: var(--muted);
  margin-top: 4px;
}
.admin-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px;
  box-shadow: var(--shadow-sm);
  overflow-x: auto;
}
.admin-section-title {
  font-family: var(--display);
  font-weight: 700;
  font-size: 15px;
  margin-bottom: 14px;
  color: var(--text);
}
.admin-table {
  width: 100%;
  border-collapse: collapse;
}
.admin-table th {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 8px 10px;
  text-align: left;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.admin-table td {
  font-size: 12px;
  padding: 10px;
  border-bottom: 1px solid var(--border2);
  vertical-align: middle;
}
.admin-row-clickable { cursor: pointer; }
.admin-row-clickable:hover td { background: var(--surface2); }
.admin-table-nested { margin: 8px 0; }
.admin-expand-content { padding: 8px 0; }
.admin-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  margin-right: 8px;
  vertical-align: middle;
}
.admin-dot-green { background: #16a34a; }
.admin-dot-yellow { background: #f59e0b; }
.admin-dot-red { background: #dc2626; }
.admin-funnel {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.admin-funnel-step {
  display: grid;
  grid-template-columns: 220px 1fr 140px;
  align-items: center;
  gap: 12px;
}
@media (max-width: 700px) {
  .admin-funnel-step { grid-template-columns: 140px 1fr 100px; }
}
.admin-funnel-label { font-size: 13px; color: var(--text); }
.admin-funnel-bar-track {
  background: var(--surface2);
  border-radius: 6px;
  height: 10px;
  overflow: hidden;
}
.admin-funnel-bar {
  background: var(--coop-color);
  height: 100%;
  border-radius: 6px;
}
.admin-funnel-value { font-size: 13px; font-weight: 600; text-align: right; }
.admin-funnel-pct { color: var(--muted); font-weight: 400; }
.admin-health-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
@media (max-width: 700px) {
  .admin-health-grid { grid-template-columns: 1fr; }
}
.admin-health-card {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px;
}
.admin-health-name { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin-bottom: 6px; }
.admin-health-status { font-size: 14px; color: var(--text); }
.admin-health-status a { color: var(--coop-color); }

/* ═══════════════════════════════════════════════
   PIPELINE / PROSPEKT-CRM (admin, /admin) — additivt, rör inga andra regler
   ═══════════════════════════════════════════════ */
.pipeline-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.pipeline-toolbar-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.pipeline-view-switch { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.pipeline-view-btn { background: var(--surface); border: none; color: var(--muted); font-family: var(--font); font-size: 13px; font-weight: 600; padding: 7px 16px; cursor: pointer; }
.pipeline-view-btn.active { background: var(--primary); color: var(--surface); }
body.dark .pipeline-view-btn.active { background: var(--surface2); color: var(--text); }
.pipeline-filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.pipeline-filters .pipeline-search { flex: 1; min-width: 180px; }
.pipeline-filters input, .pipeline-filters select { background: var(--input-bg); border: 1px solid var(--border); color: var(--text); font-family: var(--font); font-size: 13px; border-radius: 6px; padding: 7px 10px; }
.pipeline-sortable { cursor: pointer; user-select: none; white-space: nowrap; }

/* Badges (status + prioritet) */
.pipeline-badge { display: inline-block; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.pipeline-badge.st-ny        { background: rgba(148,163,184,0.18); color: #475569; }
.pipeline-badge.st-kontaktad { background: rgba(56,189,248,0.16);  color: #0369a1; }
.pipeline-badge.st-svar      { background: rgba(245,158,11,0.18);  color: #92400e; }
.pipeline-badge.st-demobokad { background: rgba(167,139,250,0.20); color: #6d28d9; }
.pipeline-badge.st-demogjord { background: rgba(99,102,241,0.18);  color: #3730a3; }
.pipeline-badge.st-kund      { background: rgba(22,163,74,0.18);   color: #15803d; }
.pipeline-badge.st-nej       { background: rgba(227,0,11,0.12);    color: #b91c1c; }
.pipeline-badge.prio-a { background: rgba(227,0,11,0.14); color: #b91c1c; }
.pipeline-badge.prio-b { background: rgba(245,158,11,0.18); color: #92400e; }
.pipeline-badge.prio-c { background: rgba(148,163,184,0.18); color: #475569; }

/* Kanban — align-items:flex-start så en kollapsad kolumn blir kort (inte utsträckt) */
.pipeline-kanban { display: flex; align-items: flex-start; gap: 12px; overflow-x: auto; padding-bottom: 8px; }
.pipeline-column { flex: 0 0 240px; background: var(--surface2); border: 1px solid var(--border); border-radius: 10px; padding: 10px; }
.pipeline-column-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.pipeline-column-body { display: flex; flex-direction: column; gap: 6px; min-height: 40px; margin-top: 10px; }
.pipeline-column-toggle { cursor: pointer; user-select: none; }
.pipeline-col-count { font-size: 12px; font-weight: 700; color: var(--muted); white-space: nowrap; }
.pipeline-col-chevron { color: var(--muted2); }
.pipeline-column.collapsed .pipeline-column-head { margin: 0; }
/* Kompakt kort (~40–45px): två rader, ellips, mindre padding/radie */
.pipeline-card { background: var(--surface); border: 1px solid var(--border); border-radius: 6px; padding: 5px 8px; cursor: pointer; box-shadow: var(--shadow-sm); }
.pipeline-card:hover { border-color: var(--border2); }
.pipeline-card-row1 { display: flex; align-items: center; gap: 6px; }
.pipeline-card-row1 .pipeline-badge { flex-shrink: 0; }
.pipeline-card-name { font-size: 12.5px; font-weight: 600; color: var(--text); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pipeline-card-brands { font-size: 10.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 1px; }
.pipeline-contact-badge { background: var(--surface2); color: var(--muted); font-size: 10px; padding: 1px 6px; }

/* Bolagsmodal */
.pipeline-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
@media (max-width: 640px) { .pipeline-form-grid { grid-template-columns: 1fr; } }
.pipeline-field { display: flex; flex-direction: column; gap: 4px; font-size: 12px; }
.pipeline-field > span { color: var(--muted); }
.pipeline-contacts-block { margin-top: 16px; border-top: 1px solid var(--border); padding-top: 12px; }
.pipeline-contact-row { display: grid; grid-template-columns: 1.2fr 1fr 1.4fr 1fr auto auto; gap: 6px; align-items: center; margin-bottom: 6px; }
@media (max-width: 640px) { .pipeline-contact-row { grid-template-columns: 1fr 1fr; } }

/* Import-förhandsgranskning */
.pipeline-imp-tablewrap { max-height: 360px; overflow-y: auto; border: 1px solid var(--border); border-radius: 8px; }
.pipeline-imp-flag { font-size: 11px; font-weight: 600; white-space: nowrap; }
.pipeline-imp-flag.ok   { color: #15803d; }
.pipeline-imp-flag.near { color: #92400e; }
.pipeline-imp-flag.dup  { color: var(--muted); }
.pipeline-imp-flag.empty{ color: #b91c1c; }
.pipeline-imp-tablewrap tr.imp-near { background: rgba(245,158,11,0.07); }
.pipeline-imp-tablewrap tr.imp-duplicate, .pipeline-imp-tablewrap tr.imp-empty { opacity: 0.6; }
.pipeline-imp-summary { font-size: 13px; color: var(--text); margin-top: 12px; }

/* ═══════════════════════════════════════════════
   KPI-SIDAN
   ═══════════════════════════════════════════════ */
.kpi-filter-bar { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.kpi-daterange { display: flex; align-items: center; gap: 8px; }

.kpi-stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 24px; }
@media (max-width: 900px) { .kpi-stat-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .kpi-stat-grid { grid-template-columns: 1fr; } }
.kpi-stat-card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 20px; box-shadow: var(--shadow-sm); }
.kpi-stat-card.kpi-sample { opacity: 0.6; border-style: dashed; }
.kpi-stat-value { font-family: var(--display); font-size: 32px; font-weight: 800; color: var(--primary); }
body.dark .kpi-stat-value { color: var(--text); }
.kpi-stat-label { font-size: 12px; color: var(--muted); margin-top: 4px; }

.kpi-chart-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
@media (max-width: 900px) { .kpi-chart-grid { grid-template-columns: 1fr; } }
.kpi-chart-card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 20px; box-shadow: var(--shadow-sm); }
.kpi-chart-card-title { font-family: var(--display); font-weight: 700; font-size: 14px; color: var(--text); margin-bottom: 14px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.kpi-chart-canvas-wrap { position: relative; height: 260px; }
@media (max-width: 480px) { .kpi-chart-canvas-wrap { height: 220px; } }
.kpi-chart-empty { color: var(--muted); font-size: 12px; padding: 40px 0; text-align: center; }
.kpi-sample-badge { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); background: var(--surface2); border: 1px solid var(--border2); border-radius: 20px; padding: 2px 8px; }

/* ═══════════════════════════════════════════════
   ÅRSPLAN-SIDAN
   ═══════════════════════════════════════════════ */
.ap-filter-bar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.ap-filter-select { width: auto; min-width: 160px; }
.ap-layer-toggle { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--text); cursor: pointer; user-select: none; }
.ap-layer-toggle input[type=checkbox] { width: 14px; height: 14px; cursor: pointer; accent-color: var(--accent); }

/* Onboarding-hint — visas bara tills minst en aktivitet finns tillagd inom
   aktuellt filter (databeroende, se renderArsplan), till skillnad från den
   vanliga tipHtml()-bannern som är avfärdningsbar/engångs. */
.ap-onboarding-hint {
  display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted);
  background: var(--accent-soft); border: 1px dashed var(--accent); border-radius: 8px;
  padding: 8px 12px; margin-bottom: 14px;
}
.ap-onboarding-hint i { color: var(--accent); flex-shrink: 0; }

.ap-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.ap-grid-wrap { display: flex; flex-direction: column; min-width: max-content; position: relative; }
/* Vertikal linje vid innevarande vecka — absolut positionerad eftersom
   .ap-grid-wrap är en flex-kolumn av separata per-rad-grids, inte EN
   sammanhållen grid som ett item kan spänna över (se buildCurrentWeekLineHtml
   i arsplan.js). z-index under header-raderna (3) så den försvinner bakom dem
   vid scroll, men över vanligt radinnehåll. pointer-events:none så den inte
   blockerar klick på veckoceller/staplar under. */
.ap-current-week-line { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--accent); z-index: 2; pointer-events: none; }

.ap-row { display: grid; align-items: center; column-gap: 1px; min-height: 26px; }
.ap-header-row { position: sticky; z-index: 3; background: var(--bg); height: 22px; }
.ap-header-row-month { top: 0; }
.ap-header-row-week { top: 22px; }

.ap-row-label {
  position: sticky; left: 0; z-index: 1; background: var(--surface);
  display: flex; align-items: center; gap: 6px; padding: 0 10px; font-size: 11px; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-right: 1px solid var(--border);
  height: 100%;
}
.ap-corner { z-index: 4; background: var(--bg); }
.ap-row-label-cat { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.ap-row-label-text { overflow: hidden; text-overflow: ellipsis; flex: 1; }
.ap-row-remove { background: none; border: none; color: var(--muted2); cursor: pointer; font-size: 13px; flex-shrink: 0; opacity: 0; transition: opacity 0.12s; }
.ap-row-label:hover .ap-row-remove { opacity: 1; }
.ap-row-remove:hover { color: #f87171; }

.ap-month-cell { text-align: center; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); border-left: 1px solid var(--border2); padding: 3px 0; }
.ap-week-num { text-align: center; font-size: 9px; color: var(--muted2); font-variant-numeric: tabular-nums; }
.ap-week-current { background: var(--accent-soft); color: var(--accent); font-weight: 700; border-radius: 3px; }

.ap-section-label { background: var(--surface2); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); padding: 6px 0; }
.ap-brand-label { font-size: 12px; font-weight: 600; color: var(--text); padding: 5px 0; background: var(--bg); }

/* En CSS Grid-item som spänner grid-column:1/-1 är redan lika brett som HELA
   raden — dess egen "sticky-slack" är därför noll och position:sticky;left:0
   på ELEMENTET SJÄLVT blir en no-op (bekräftat med en fristående
   headless-Chrome-repro, se _private/CLAUDE.md → "Årsplan-sidan"). Lösningen
   är att sticky-positionera en SMAL inre wrapper (bara så bred som texten/
   knappen) istället för den breda grid-cellen — den inre wrappern har gott
   om "slack" inom sin (breda) förälder att glida till vänster kant. Används
   av sectionLabelHtml/brandLabelHtml/productGroupLabelHtml/emptyRowHtml samt
   "+ Lägg till aktiviteter"-knappen.
   VIKTIGT: horisontell padding får INTE ligga på föräldern (det breda
   grid-elementet) utan måste ligga PÅ själva .ap-sticky-inner — annars
   startar wrapperns naturliga (o-sticky) position 10–22px in i stället för
   vid x:0, vilket gör att den synligt "glider ikapp" till vänsterkanten
   under de första pixlarna av scroll innan den låser fast (samma princip
   som redan gällde för .ap-row-label, vars padding alltid legat på
   elementet självt).*/
.ap-sticky-inner { display: inline-block; position: sticky; left: 0; z-index: 1; padding-left: 10px; }
.ap-group-label .ap-sticky-inner { padding-left: 22px; }

.ap-bar { position: relative; height: 14px; border-radius: 4px; margin: 0 1px; }
.ap-bar-progress { position: absolute; top: -3px; bottom: -3px; width: 2px; background: #facc15; }
.ap-bar-continue {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  font-size: 9px; font-weight: 600; white-space: nowrap; color: var(--text);
  background: var(--surface); border: 1px solid var(--border2); border-radius: 3px;
  padding: 1px 4px; pointer-events: none;
}
.ap-bar-continue-before { left: 2px; }
.ap-bar-continue-after { right: 2px; }

/* Aktiviteters markerade veckor — sammanhängande staplar ovanpå de osynliga
   veckocellerna (samma .ap-bar-geometri som lanseringarna: höjd/rundning/
   marginal), i en neutral accentfärg i stället för kedjefärg, för visuell
   konsekvens mellan de två radtyperna. pointer-events:none så klick/drag
   alltid går till veckocellerna under (se apActivityDragStart i arsplan.js).
   color-mix() med --accent ger automatiskt rätt ton i båda teman (navy i
   ljust läge, guld i mörkt) utan att hårdkoda en hexfärg. */
.ap-activity-bar {
  background: color-mix(in srgb, var(--accent) 35%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 70%, transparent);
  pointer-events: none;
}
.ap-activity-bar-preview { border-style: dashed; }
.ap-row-dragging .ap-row-label { background: var(--table-hover); }

.ap-group-label { font-size: 11px; font-weight: 500; color: var(--muted); padding: 4px 0; background: var(--surface); }
.ap-empty-row { font-size: 12px; color: var(--muted); padding: 10px 0; background: var(--surface); }

.ap-week-cell { height: 100%; min-height: 22px; border-left: 1px solid var(--border); cursor: pointer; transition: background 0.1s; user-select: none; }
.ap-week-cell:hover { background: var(--table-hover); }

.ap-row-budget { padding: 0 8px; font-size: 11px; color: var(--muted); text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap-budget-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.ap-budget-input { width: 100%; background: var(--input-bg); border: 1px solid var(--border); color: var(--text); font-family: var(--font); font-size: 11px; border-radius: 5px; padding: 2px 6px; text-align: right; }
.ap-budget-input:focus { outline: none; border-color: var(--input-focus); }

.ap-add-activity-cell { padding: 5px 0; background: var(--surface); }
.ap-summary-row .ap-row-label { background: transparent; border-right: none; font-weight: 500; color: var(--muted); }
.ap-summary-row .ap-row-budget { font-weight: 600; }
.ap-summary-total .ap-row-label,
.ap-summary-total .ap-row-budget { color: var(--text); font-weight: 700; border-top: 1px solid var(--border); }

/* Lägg till aktiviteter-modalen */
.ap-activities-box { width: 640px; max-width: 95vw; }
.ap-export-box { width: 460px; max-width: 95vw; }
.ap-modal-group-select { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.ap-modal-group-select label { font-size: 11px; font-weight: 600; color: var(--muted); flex-shrink: 0; }
.ap-modal-group-select select { flex: 1; }
.ap-modal-list { max-height: 380px; overflow-y: auto; margin-bottom: 14px; padding-right: 4px; }
.ap-modal-category { margin-bottom: 12px; }
.ap-modal-category-title { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin-bottom: 6px; }
.ap-modal-check-row { display: flex; align-items: center; gap: 8px; padding: 4px 2px; font-size: 12px; color: var(--text); cursor: pointer; }
.ap-modal-check-row.disabled { opacity: 0.5; cursor: not-allowed; }
.ap-modal-check-row input[type=checkbox] { width: 14px; height: 14px; cursor: pointer; accent-color: var(--accent); flex-shrink: 0; }
.ap-modal-custom-badge { font-size: 9px; font-weight: 600; text-transform: uppercase; color: var(--accent); background: var(--accent-soft); border-radius: 10px; padding: 1px 6px; }
.ap-modal-already { font-size: 10px; color: var(--muted); margin-left: auto; }
.ap-modal-custom-form { border-top: 1px solid var(--border); padding-top: 12px; }

@media (max-width: 700px) {
  .ap-filter-bar { gap: 8px; }
}

/* ═══════════════════════════════════════════════
   MOBILFÖRBÄTTRINGAR (granskning 3, LÅG-nits M-1/M-2/M-3)
   Ligger sist i filen så reglerna vinner över tidigare bas-/mobilregler.
   Rör ENDAST mobil/smala skärmar — desktop-vyn är oförändrad.
   ═══════════════════════════════════════════════ */

/* ── M-1: Touchytor minst 44px på mobil (Apple/Google HIG) ──
   min-height (inte height) så innehållet aldrig klipps. Kryssrutor/radio/range/
   file undantas — deras tappyta förstoras via raden/etiketten nedan istället. */
@media (max-width: 768px) {
  select,
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),
  textarea {
    min-height: 44px;
  }
  /* Undantag: den täta Gantt-tidslinjens budgetfält skulle annars spränga
     radhöjden och rubba stapel-/etikettinjusteringen i årsplanen. */
  .ap-budget-input { min-height: 0; }
  /* Kryssrutors tappyta via de klickbara raderna/etiketterna (inte själva rutan) */
  .ap-layer-toggle,
  .ap-modal-check-row { min-height: 44px; }
  /* Små ikon-/textknappar som annars hamnar under 44px */
  .hamburger-btn { width: 44px; height: 44px; }
  .onboarding-hide-btn,
  .panel-toggle-btn { min-height: 44px; }
  /* Modalernas primära åtgärdsknappar (Avbryt/Radera m.fl.) — samma 44px som
     .btn-primary redan får (se den generella mobilregeln ovan). */
  .btn-secondary,
  .btn-destructive {
    min-height: 44px;
    display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box;
  }
}

/* ── M-2: Teammedlemsrader stackar vertikalt på smal skärm ──
   Vid ≤600px läggs namn + e-post på egen rad och roll/kontroller under, i stället
   för att pressas ihop på en rad (namn/e-post trunkerades hårt vid 375px). Desktop
   (och den 420px breda inställningsmodalen på stora skärmar) är oförändrad. */
@media (max-width: 600px) {
  .team-member-row {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .team-member-controls {
    justify-content: flex-start;
    flex-wrap: wrap;
  }
  /* Namn/e-post får hela bredden och slutar klippas mitt i */
  .team-member-name,
  .team-member-email { white-space: normal; overflow: visible; }
}

/* ── M-3: Scroll-hint på horisontellt scrollbara ytor ──
   Ren CSS (rör inte scroll-logiken): en mjuk skugga i högerkanten som visas när
   mer innehåll finns till höger och FÖRSVINNER när man scrollat till slutet.
   Tekniken: en "cover"-gradient i ytans egen bakgrundsfärg med
   background-attachment:local (följer med innehållet och maskerar skuggan vid
   slutet) ovanpå en fast skugg-gradient (background-attachment:scroll). Enbart
   mobil (≤768). Skuggfärgen är temamedveten via --scroll-shadow-color. */
@media (max-width: 768px) {
  /* Ytor utan egen bakgrund (kortet/modalen bakom är --surface) */
  .brand-article-table-wrap,
  .detail-tabs,
  .settings-tabs {
    background:
      linear-gradient(to left, var(--surface) 45%, rgba(255,255,255,0)) right center / 40px 100% no-repeat local,
      linear-gradient(to left, var(--scroll-shadow-color), rgba(255,255,255,0)) right center / 24px 100% no-repeat scroll;
  }
  /* Årsplanens veckorutnät har en egen --surface-bakgrund som måste behållas
     (sista lagret), med cover + skugga ovanpå. */
  .ap-scroll {
    background:
      linear-gradient(to left, var(--surface) 45%, rgba(255,255,255,0)) right center / 44px 100% no-repeat local,
      linear-gradient(to left, var(--scroll-shadow-color), rgba(255,255,255,0)) right center / 24px 100% no-repeat scroll,
      var(--surface);
  }
}