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

  /* Dekorativa kurvor får sträcka sig utanför sina sektioner och löpa ut ur
     bild. Klippningen sker här, på sidnivå, så att inget ger vågrät rullning.

     `clip` och inte `hidden`: hidden på html/body tvingar fram overflow-y:
     auto, vilket tyst bryter position: sticky i hela dokumentet. */
  html, body { overflow-x: clip; }

  /* ════════════════════════════════════════════════════════════════════════
     KOPPLING TILL DESIGNSYSTEMET

     Appens egna variabelnamn (--red, --text, --bg …) pekas här om till
     Dragsters tokens i tokens.css. Därför räcker det att ändra en färg där
     för att den ska slå igenom i hela appen — de gamla namnen behålls så att
     de 84 ställen som redan använder dem fortsätter fungera.

     --red hette så när accentfärgen var röd. Den är numera Dragster-blå;
     namnet står kvar för att undvika en omskrivning av hela filen.
     ════════════════════════════════════════════════════════════════════════ */
  :root {
    --red: var(--dragster-blue);       /* accentfärg: knappar, siffror, markeringar */
    --red-dark: #2A38E8;               /* mörkare blå för hover */
    --dark: var(--bg-dark);
    --text: var(--text-title);
    --gray: var(--text-body);
    --light-gray: var(--text-muted);
    --bg: var(--bg-primary);
    --white: var(--bg-white);
    --border: rgba(28,16,36,0.10);
    --shadow-sm: 0 2px 8px rgba(28,16,36,0.06);
    --shadow-md: 0 8px 32px rgba(28,16,36,0.10);
    --shadow-lg: 0 24px 64px rgba(28,16,36,0.14);
    --radius: var(--radius-image);
    --radius-sm: 10px;
    /* --font sätts av tokens.css (DM Sans) — definiera den inte om här. */
  }

  body {
    font-family: var(--font);
    background: var(--bg);
    color: var(--text);
    -webkit-font-smoothing: antialiased;
    line-height: 1.5;
  }

  /* ─── VIEWS ─── */
  .view { display: none; }
  .view.active { display: block; }

  /* ════════════════════════════════════════
     LANDING PAGE
  ════════════════════════════════════════ */
  .container{
    padding-inline: var(--margin-primary);
  }

  /* NAV */
  .land-nav {
    position: fixed; top: 0; left: 0; right: 0; z-index: 100;
    display: flex; align-items: center; justify-content: space-between;
    /* --margin-primary: 50px på desktop, 16px på mobil. Samma token som
       sidinnehållet, så toppraden följer med om måttet ändras. */
    padding: 0 var(--margin-primary); height: 68px;
    background: rgba(255,255,255,0.82);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-bottom: 1px solid var(--border);
  }
  .land-nav-logo {
    display: flex; align-items: center; gap: 12px;
  }
  .land-nav-wordmark {
    font-size: var(--body-sm); font-weight: 400; letter-spacing: 0.06em;
    text-transform: uppercase; color: var(--text);
  }
  .land-nav-sep { width: 1px; height: 18px; background: var(--border); }
  .land-nav-product { font-size: var(--body-xs); color: var(--gray); font-weight: 500; }
  .land-nav-cta {
    background: var(--red); color: white;
    border: none; border-radius: var(--radius-btn); padding: 9px 22px;
    font-size: var(--body-xs); font-weight: 500; cursor: pointer;
    font-family: var(--font); transition: background 0.15s, transform 0.1s;
    letter-spacing: -0.01em;
  }
  .land-nav-cta:hover { background: var(--red-dark); transform: translateY(-1px); }

  /* HERO */
  .land-hero {
    min-height: calc(100vh / var(--zoom, 1));
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center;
    padding: 120px 32px 80px;
    /* background: linear-gradient(180deg, var(--bg-white) 0%, var(--bg) 100%); */
    position: relative; overflow: hidden;
  }
  .land-hero::before {
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(ellipse 900px 600px at 50% 30%, rgba(54,69,253,0.06) 0%, transparent 70%);
    pointer-events: none;
  }
  .hero-badge {
    display: inline-flex; align-items: center; gap: 8px;
    background: rgba(54,69,253,0.08); border: 1px solid rgba(54,69,253,0.18);
    border-radius: var(--radius-btn); padding: 6px 14px; margin-bottom: 32px;
    font-size: var(--body-xxs); font-weight: 500; letter-spacing: 0.06em;
    text-transform: uppercase; color: var(--red);
  }
  .hero-badge-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--red); }
  /* Storlekarna kommer från designsystemet (tokens.css) och skalar därmed
     automatiskt: 80px desktop → 64px surfplatta → 40px mobil.
     margin-inline: auto centrerar rubriken även när max-width slår till. */
  /* Storleken kommer från designsystemet (tokens.css): 80px desktop →
     64px surfplatta → 40px mobil.

     min(…, 11vw) är en säkerhetsspärr för smala skärmar: svenska
     sammansättningar som "framgångskommunikation" är 23 tecken och skulle
     annars sticka ut utanför skärmkanten. hyphens + lang="sv" på <html>
     låter webbläsaren avstava dem korrekt när det ändå behövs. */
  /* Motsvarar temats .text-grid--featured .tw-heading .title-lg:
     XL-storleken med XL:s radhöjd, men LG:s teckenavstånd och vikt 400.

     min(…, 12vw) är en säkerhetsspärr för smala skärmar — svenska
     sammansättningar som "framgångskommunikation" är 23 tecken långa.
     hyphens + lang="sv" på <html> låter webbläsaren avstava dem korrekt. */
  .hero-h1 {
    font-size: min(var(--title-xl), 12vw);
    /* 1.1 är samma förhållande som tokens anger (110px / 100px), men uttryckt
       som ratio — så att radhöjden följer med när min() klampar ner storleken
       på mellanbreda skärmar. Ett fast px-värde skulle bli för luftigt då. */
    line-height: 1.1;
    letter-spacing: var(--title-lg-ls);
    font-weight: 400;
    color: var(--text-title);
    max-width: 1100px;
    margin-inline: auto;
    margin-bottom: 24px;
    text-wrap: balance;      /* jämnar ut radlängderna */
    hyphens: auto;
    overflow-wrap: break-word;
  }
  .hero-h1 span { color: var(--red); }
  .hero-sub {
    font-size: var(--body-md); color: var(--gray); max-width: 520px;
    line-height: 1.6; margin-bottom: 44px; font-weight: 400;
  }
  .hero-actions { display: flex; gap: 14px; align-items: center; }

  /* MOCKUP */
  .hero-mockup {
    margin-top: 72px; position: relative; width: 100%; max-width: 940px;
  }
  .mockup-window {
    background: white; border-radius: var(--radius-image);
    box-shadow: var(--shadow-lg), 0 0 0 1px rgba(0,0,0,0.06);
    overflow: hidden;
  }
  .mockup-bar {
    background: #F0F0F0; padding: 12px 20px;
    display: flex; align-items: center; gap: 8px;
    border-bottom: 1px solid var(--border);
  }
  .mockup-dot { width: 12px; height: 12px; border-radius: 50%; }
  .mockup-dot-r { background: #FF5F57; }
  .mockup-dot-y { background: #FEBC2E; }
  .mockup-dot-g { background: #28C840; }
  .mockup-bar-url {
    flex: 1; background: white; border-radius: 6px;
    padding: 5px 12px; font-size: var(--body-xxs); color: var(--gray);
    margin: 0 12px; text-align: center; border: 1px solid var(--border);
  }
  .mockup-body {
    display: flex; height: 420px;
  }
  .mockup-sidebar {
    width: 240px; border-right: 1px solid var(--border);
    background: var(--bg-white); padding: 20px 16px; flex-shrink: 0;
  }
  .mockup-sidebar-title {
    font-size: var(--body-xxs); font-weight: 400; letter-spacing: 0.06em;
    text-transform: uppercase; color: var(--light-gray); margin-bottom: 14px; padding: 0 4px;
  }
  .mockup-customer {
    padding: 10px 12px; border-radius: 8px; cursor: default;
    display: flex; align-items: center; gap: 10px; margin-bottom: 4px;
  }
  .mockup-customer.active { background: rgba(54,69,253,0.08); }
  .mockup-avatar {
    width: 32px; height: 32px; border-radius: 8px;
    background: var(--red); color: white;
    display: flex; align-items: center; justify-content: center;
    font-size: var(--body-xxs); font-weight: 400; flex-shrink: 0;
  }
  .mockup-avatar.b { background: var(--dragster-blue); }
  .mockup-avatar.c { background: var(--purple-mid); }
  .mockup-avatar.d { background: var(--purple-light); }
  .mockup-customer-name { font-size: var(--body-xs); font-weight: 500; color: var(--text); }
  .mockup-customer-industry { font-size: var(--body-xxs); color: var(--light-gray); }
  .mockup-main {
    flex: 1; padding: 24px 28px; overflow: hidden;
  }
  .mockup-main-header {
    font-size: var(--body-md); font-weight: 400; color: var(--dark); margin-bottom: 6px;
    letter-spacing: -0.02em;
  }
  .mockup-main-sub { font-size: var(--body-xxs); color: var(--gray); margin-bottom: 24px; }
  .mockup-cards {
    display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; margin-bottom: 20px;
  }
  .mockup-card {
    border-radius: 12px; padding: 16px; cursor: default;
    border: 1.5px solid var(--border);
  }
  .mockup-card.brand { border-color: rgba(54,69,253,0.2); background: rgba(54,69,253,0.04); }
  .mockup-card.web { border-color: rgba(0,113,227,0.2); background: rgba(0,113,227,0.04); }
  .mockup-card.digital { border-color: rgba(52,199,89,0.2); background: rgba(52,199,89,0.04); }
  .mockup-card-icon { font-size: var(--body-md); margin-bottom: 8px; }
  .mockup-card-label { font-size: var(--body-xxs); font-weight: 400; color: var(--gray); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 2px; }
  .mockup-card-name { font-size: var(--body-xs); font-weight: 500; color: var(--dark); }
  .mockup-result {
    background: linear-gradient(135deg, rgba(54,69,253,0.06) 0%, rgba(54,69,253,0.02) 100%);
    border: 1px solid rgba(54,69,253,0.15); border-radius: 12px; padding: 16px;
  }
  .mockup-result-label { font-size: var(--body-xxs); font-weight: 400; text-transform: uppercase; letter-spacing: 0.06em; color: var(--red); margin-bottom: 6px; }
  .mockup-result-text { font-size: var(--body-xs); color: var(--text); line-height: 1.5; font-weight: 500; }

  /* STATS */
  /* Fyra jämnstora kolumner med tunna avdelare. Värdet ligger i en yta med
     fast höjd så att alla etiketter hamnar på samma rad — tidigare hoppade
     de upp och ner beroende på om värdet var en siffra eller en ikon. */

  .land-stats {
    background: var(--white);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    padding: 56px 32px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    max-width: calc(var(--content-max) - 64px);
    margin-inline: auto;
  }
  .stat-item {
    text-align: center;
    padding: 0 28px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .stat-item + .stat-item { border-left: 1px solid var(--border); }

  .stat-num {
    height: 56px;                 /* fast höjd → etiketterna linjerar */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--title-sm);
    line-height: 1;
    font-weight: 400;
    letter-spacing: -0.03em;
    color: var(--dark);
    margin-bottom: 14px;
  }
  .stat-num span { color: var(--red); }
  .stat-num svg { color: var(--purple-dark); }

  .stat-label {
    font-size: var(--body-xs);
    color: var(--gray);
    line-height: 1.45;
    max-width: 190px;
    text-wrap: balance;
  }

  @media (max-width: 767px) {
    .land-stats { grid-template-columns: repeat(2, 1fr); gap: 36px 0; padding: 40px 16px; }
    .stat-item:nth-child(odd) { border-left: none; }
    .stat-item { padding: 0 14px; }
  }

  /* HOW IT WORKS */
  /* Alla sektioner delar --content-max (se tokens.css), så att rubriker,
     kort och statistikband linjerar mot varandra hela vägen ner. */
  .land-section {
    max-width: var(--content-max); margin: 0 auto; padding: 96px 32px;
  }
  .section-eyebrow {
    font-size: var(--body-xxs); font-weight: 400; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--red); margin-bottom: 16px;
  }
  .section-title {
    font-size: var(--title-md);
    line-height: var(--title-md-lh);
    letter-spacing: -0.03em;
    font-weight: 400;
    color: var(--dark);
    max-width: 640px;
    margin-bottom: 16px;
    text-wrap: balance;
    hyphens: auto;
  }

  /* Centrerar rubriken mitt på skärmen. Enbart text-align: center räcker
     inte — max-width gör rutan smalare än sektionen, så den måste också
     centreras med automatiska marginaler. */
  .section-title.is-centered,
  .section-eyebrow.is-centered {
    text-align: center;
    margin-inline: auto;
  }
  .section-sub {
    font-size: var(--body-md); color: var(--gray); max-width: 480px;
    line-height: 1.6; margin-bottom: 64px;
  }
  .steps-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
    /* Luft mot rubriken ovanför. Marginalerna kollapsar med rubrikens
       16px, så det synliga avståndet blir 48px — mot tidigare 16px. */
    margin-top: 48px;
  }
  .step-card {
    background: white; border-radius: var(--radius);
    padding: 32px 28px; border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
  }
  .step-icon-wrap {
    width: 52px; height: 52px; border-radius: var(--radius-image);
    background: var(--purple-light); display: flex; align-items: center; justify-content: center;
    margin-bottom: 14px; flex-shrink: 0;
  }
  /* Ikonlinjerna ärver färgen härifrån (svg:erna använder currentColor) */
  .step-icon-wrap svg { color: var(--purple-dark); }
  /* OBS: scopat till .step-card (landningssidans kort). Ett oscopat
     .step-num här läckte in i workshopparnas "Steg 1 av 7"-etikett och
     klämde in texten i en 40px blå ruta. */
  .step-card .step-num {
    width: 40px; height: 40px; border-radius: 12px;
    background: var(--red); color: white;
    display: flex; align-items: center; justify-content: center;
    font-size: var(--body-sm); font-weight: 400; margin-bottom: 20px;
  }
  .step-card .step-title {
    hyphens: auto;
    overflow-wrap: break-word; font-size: var(--body-md); font-weight: 400; color: var(--dark); margin-bottom: 8px; letter-spacing: -0.02em; }
  .step-card .step-desc { font-size: var(--body-xs); color: var(--gray); line-height: 1.6; }

  /* SERVICES */
  .services-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
  }

  /* Korten smalnar av i två steg. Bara det som faktiskt ändras står här —
     display och services-gapet ärvs från grundreglerna ovan. */
  @media (max-width: 1199px) {
    .services-grid { grid-template-columns: repeat(2, 1fr); }
    .steps-grid    { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  }
  @media (max-width: 767px) {
    .services-grid { grid-template-columns: 1fr; }
    .steps-grid    { grid-template-columns: 1fr; gap: 14px; }
  }
  .service-card {
    background: white; border-radius: var(--radius);
    padding: 40px 32px; border: 1px solid var(--border);
    box-shadow: var(--shadow-sm); position: relative; overflow: hidden;
    /* Klickbart kort med lyft vid hover. Flexkolumnen håller ihop
       ikon, rubrik, text och taggar i en spalt. */
    display: flex; flex-direction: column;
    cursor: pointer;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
  }
  .service-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
  @media (prefers-reduced-motion: reduce) {
    .service-card:hover { transform: none; }
  }
  /* Dragsters egna ikoner (assets/icons/ssm-*.svg, exporterade från Figma
     med färgen bakad i filen) — fasta mått så att korten inte hoppar
     medan bilderna laddas. */
  .service-icon { font-size: var(--title-xs); margin-bottom: 20px; }
  .service-icon img { width: 58px; height: 58px; display: block; }
  .service-name { font-size: var(--body-xxs); font-weight: 400; letter-spacing: 0.08em; text-transform: uppercase; color: var(--light-gray); margin-bottom: 8px; }
  .service-title { font-size: var(--title-xs); line-height: var(--title-xs-lh); font-weight: 400; letter-spacing: var(--title-xs-ls); color: var(--dark); margin-bottom: 12px; position: relative; }
  /* Titelpilen — samma mekanik och spann-klasser som kundöversiktens kort */
  .service-card:hover .launcher-pil { opacity: 1; transform: none; }
  .service-card:hover .launcher-name-text { transform: translateX(1.16em); }
  .service-desc { font-size: var(--body-sm); color: var(--gray); line-height: 1.65; margin-bottom: 24px; }
  .service-tags { display: flex; flex-wrap: wrap; gap: 8px; }
  .service-tag {
    font-size: var(--body-xxs); font-weight: 500; padding: 5px 12px;
    border-radius: var(--radius-btn); background: var(--bg); color: var(--gray);
    border: 1px solid var(--border);
  }

  /* QUOTE */
  .land-quote {
    /* Plommon i stället för den neutrala mörka — citatet får en egen ton
       mot de ljusa sektionerna runt omkring. Bara här: --dark styr 14
       andra ytor och ska inte flyttas globalt. */
    background: var(--purple-dark); padding: 96px 32px; text-align: center;
  }
  .quote-mark { font-size: var(--title-lg); color: var(--red); line-height: 0.8; margin-bottom: 24px; font-weight: 400; }
  .quote-text {
    font-size: clamp(22px, 3vw, 32px); font-weight: 400;
    color: white; max-width: 720px; margin: 0 auto 24px;
    letter-spacing: -0.03em; line-height: 1.3;
  }
  .quote-author { font-size: var(--body-xs); color: rgba(255,255,255,0.4); }

  /* CTA SECTION */
  .land-cta-section {
    background: white; padding: 96px 32px; text-align: center;
  }
  .land-cta-title {
    font-size: clamp(36px, 4vw, 56px); font-weight: 400;
    letter-spacing: -0.04em; color: var(--dark); margin-bottom: 16px;
  }
  .land-cta-sub { font-size: var(--body-md); color: var(--gray); margin-bottom: 40px; }

  /* FOOTER */
  .land-footer {
    background: var(--dark); padding: 48px 64px;
    display: flex; justify-content: space-between; align-items: center;
  }
  .footer-left { display: flex; flex-direction: column; gap: 6px; }
  .footer-wordmark { font-size: var(--body-xs); font-weight: 400; letter-spacing: 0.06em; text-transform: uppercase; color: white; }
  .footer-copy { font-size: var(--body-xxs); color: rgba(255,255,255,0.3); }
  .footer-right { font-size: var(--body-xxs); color: rgba(255,255,255,0.3); }

  /* ════════════════════════════════════════
     LOGIN PAGE
  ════════════════════════════════════════ */
  .login-view {
    min-height: calc(100vh / var(--zoom, 1)); display: flex;
    background: linear-gradient(135deg, var(--bg-white) 0%, var(--bg) 100%);
  }
  .login-left {
    flex: 1; display: flex; flex-direction: column;
    justify-content: center; align-items: center;
    padding: 64px; position: relative;
  }
  .login-left::after {
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(ellipse 600px 500px at 50% 60%, rgba(54,69,253,0.07) 0%, transparent 70%);
    pointer-events: none;
  }
  .login-right {
    width: 480px; background: white;
    border-left: 1px solid var(--border);
    display: flex; flex-direction: column;
    justify-content: center; padding: 64px;
  }
  .login-brand {
    display: flex; flex-direction: column; align-items: center;
    gap: 16px; text-align: center; position: relative; z-index: 1;
  }
  .login-brand-name {
    font-size: var(--body-xs); font-weight: 400; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--gray);
  }
  .login-tagline {
    font-size: clamp(36px, 5vw, 54px); font-weight: 400;
    letter-spacing: -0.04em; color: var(--dark); line-height: 1.1;
  }
  .login-tagline span { color: var(--red); }
  .login-sub { font-size: var(--body-sm); color: var(--gray); max-width: 360px; line-height: 1.6; margin-top: 8px; }
  .login-dots {
    display: flex; gap: 10px; margin-top: 40px;
  }
  .login-dot {
    width: 10px; height: 10px; border-radius: 50%; background: var(--border);
  }
  .login-dot.filled { background: var(--red); }

  .login-form-title {
    font-size: var(--body-lg); font-weight: 400; letter-spacing: -0.03em;
    color: var(--dark); margin-bottom: 6px;
  }
  .login-form-sub { font-size: var(--body-xs); color: var(--gray); margin-bottom: 36px; }
  .login-label {
    display: block; font-size: var(--body-xxs); font-weight: 500;
    color: var(--gray); margin-bottom: 8px; letter-spacing: 0.02em;
  }
  .login-input {
    width: 100%; padding: 14px 16px;
    border: 1.5px solid var(--border); border-radius: var(--radius-sm);
    font-size: var(--body-sm); font-family: var(--font); color: var(--text);
    background: var(--bg); outline: none; transition: border-color 0.15s;
    margin-bottom: 24px; letter-spacing: 0.08em;
  }
  .login-input:focus { border-color: var(--red); background: white; }
  /* Knappen är en Dragster-knapp (.btn .btn--blue) och ska vara innehålls-
     bred som alla andra — INTE width:100%, som sträckte pillret över hela
     formuläret. components.css laddas efter och äger padding/radie/höjd. */
  .login-btn {
    background: var(--red); color: white;
    border: none;
    font-size: var(--body-sm); font-weight: 500; cursor: pointer;
    font-family: var(--font); transition: all 0.15s;
    letter-spacing: -0.01em;
  }
  .login-btn:hover { background: var(--red-dark); transform: translateY(-1px); }
  /* Till höger i formuläret. display:flex (blocknivå) krävs för att
     margin-left:auto ska verka, och button.login-btn slår .btn:s
     inline-flex i components.css (högre specificitet). */
  button.login-btn { display: flex; margin-left: auto; }
  .login-error {
    font-size: var(--body-xs); color: var(--red); margin-top: 12px;
    display: none; text-align: center;
  }
  .login-back {
    margin-top: 24px; text-align: center;
    font-size: var(--body-xs); color: var(--gray); cursor: pointer;
  }
  .login-back span { color: var(--red); text-decoration: underline; cursor: pointer; }

  /* ════════════════════════════════════════
     APP / DASHBOARD
  ════════════════════════════════════════ */
  .app-view {
    display: none; flex-direction: column; min-height: calc(100vh / var(--zoom, 1));
    background: var(--bg);
  }
  .app-view.active { display: flex; }

  /* APP NAV */
  .app-nav {
    background: rgba(255,255,255,0.9);
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border);
    padding: 0 var(--margin-primary); height: 60px;
    display: flex; align-items: center; justify-content: space-between;
    position: sticky; top: 0; z-index: 100; flex-shrink: 0;
  }

  /* ── Kundmenyn ──
     Kundlistan ligger bakom knappen i toppraden på ALLA skärmbredder.
     Tidigare stod sidofältet framme på desktop och gömdes bara under
     "kundläget" — ett eget presentationsläge som nu är borttaget, just
     för att menyn gör samma sak överallt och alltid. */
  .sidebar-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: none;
    border: none;
    border-bottom: 1px solid var(--border);
    padding: 20px 2px;
    font-family: var(--font);
    font-size: var(--body-md);
    font-weight: 400;
    letter-spacing: -.02em;
    color: var(--text);
    cursor: pointer;
    text-align: left;
  }
  /* Plusset är ett riktigt plustecken i markupen och roterar ett halvt
     varv när posten öppnas — samma grepp som nav-drawer__expand i
     Dragster 2.0. */
  .sidebar-toggle-tecken {
    width: 20px; height: 20px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    font-size: 24px; font-weight: 300; line-height: 1;
    color: var(--text-title);
    transition: transform .25s ease, color .15s;
  }
  body.kundlista-oppen .sidebar-toggle-tecken { transform: rotate(45deg); }

  /* Menyposter som navigerar bort i stället för att fälla ut något —
     pil åt höger i stället för plus, och den glider vid hover. */
  .sidebar-toggle-pil {
    width: 20px; height: 20px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    font-size: 17px; line-height: 1;
    color: var(--text-title);
    transition: transform .22s ease;
  }
  .sidebar-toggle--lank:hover .sidebar-toggle-pil { transform: translateX(4px); }

  /* Måtten kommer ur Figma (Dragster 2.0, menu+close): 46px rund knapp
     i Dragster-blått med 4px luft runt en 24px-ikon. */
  .app-nav-meny {
    /* Grid, inte flex: strecken och krysset läggs i samma ruta (1/1) och
       tonas mot varandra, utan absolut positionering. */
    display: inline-grid;
    place-items: center;
    width: 46px; height: 46px;
    border: none; border-radius: 100px;
    background: var(--dragster-blue);
    color: #fff;                 /* ikonernas currentColor */
    cursor: pointer;
    flex-shrink: 0;
    padding: 4px;
  }
  /* Ingen hover-färg — knappen är alltid Dragster-blå. */
  .app-nav-meny:focus-visible { outline: 2px solid var(--btn-dark); outline-offset: 3px; }
  .meny-ikon { grid-area: 1 / 1; transition: opacity .18s ease; }
  .meny-ikon--stang { opacity: 0; }
  body.kundmeny-oppen .meny-ikon--oppna { opacity: 0; }
  body.kundmeny-oppen .meny-ikon--stang { opacity: 1; }
  @media (prefers-reduced-motion: reduce) {
    .meny-ikon, .app-sidebar, .app-nav-meny,
    .sidebar-toggle-tecken::before,
    .sidebar-toggle-tecken::after { transition: none; }
  }
  .app-nav-logo {
    display: flex; align-items: center; gap: 10px;
    font-size: var(--body-xs); font-weight: 400; letter-spacing: 0.06em;
    text-transform: uppercase; color: var(--text);
  }
  .app-nav-logo-mark {
    width: 28px; height: 28px; background: var(--red); border-radius: 7px;
    display: flex; align-items: center; justify-content: center;
    font-size: var(--body-xxs); font-weight: 400; color: white; letter-spacing: 0;
  }
  /* Molnlagring, namn, "Logga ut" och menyknappen — allt i en grupp till
     höger, så att de två knapparna hamnar bredvid varandra. */
  .app-nav-right { display: flex; align-items: center; gap: 16px; }
  /* ── Kontoraden längst ner i kundmenyn ──
     Vem som är inloggad och var arbetet sparas. margin-top:auto skjuter
     den till botten av panelen (som är en flexkolumn), så den sitter
     still oavsett hur lång kundlistan är. */
  .sidebar-konto {
    margin-top: auto;
    padding-top: 20px;
    border-top: 1px solid var(--border);
    display: flex; flex-direction: column; gap: 8px;
  }
  #server-status {
    display: flex; align-items: center; gap: 7px;
    font-size: var(--body-xxs); color: var(--gray); font-weight: 500;
  }
  /* Färgen sätts av setStorageStatus(): grön för moln, orange för offline.
     Grått tills databasen svarat första gången. */
  #server-status-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: #AEAEB2; display: inline-block; flex-shrink: 0;
  }
  .app-nav-user { font-size: var(--body-xs); color: var(--gray); font-weight: 500; display: flex; align-items: center; }
  /* Rollmärket efter namnet — "Admin"/"Säljare", sätts av enterApp() */
  .app-nav-role {
    margin-left: 8px; padding: 2px 9px; border-radius: 20px;
    background: rgba(54,69,253,0.09); color: var(--red);
    font-size: var(--body-xxs); font-weight: 600;
    letter-spacing: .07em; text-transform: uppercase;
  }
  .app-nav-role:empty { display: none; }
  /* Toppraden bär numera bara loggan, "Logga ut" (en vanlig .btn--dark)
     och kundmenyns knapp. Adminpanelen flyttade in i menyn. */

  /* ── Kundpanelen ──
     Glider in från höger över innehållet, på alla bredder. På telefon
     fyller den skärmen; på bredare skärmar räcker en spalt — en
     kundlista utspridd över 1440px är mest tomrum. */
  .app-sidebar {
    position: fixed;
    top: 60px;                        /* toppradens höjd */
    right: 0; bottom: 0;
    width: min(420px, 100%);
    z-index: 90;
    display: flex; flex-direction: column;
    border-right: none;
    border-left: 1px solid var(--border);
    background: var(--bg);
    padding: 10px var(--margin-primary) 32px;
    overflow-y: auto;
    /* Stängd: skjuten åt sidan och bortkopplad från både mus och
       skärmläsare. visibility (inte display) så att utglidningen syns. */
    transform: translateX(100%);
    visibility: hidden;
    transition: transform .26s ease, visibility .26s;
  }
  body.kundmeny-oppen .app-sidebar { transform: translateX(0); visibility: visible; }
  body.kundmeny-oppen { overflow: hidden; }

  /* Sök, "Ny kund" och listan sitter i ett omslag som fälls ut av
     menyposten. Ett element att dölja i stället för två, och det som
     aria-controls pekar på. */
  .sidebar-utfallt { display: none; }
  body.kundlista-oppen .sidebar-utfallt { display: block; }

  /* APP LAYOUT */
  .app-body { display: flex; flex: 1; overflow: hidden; height: calc(100vh / var(--zoom, 1) - 60px); }

  /* SIDEBAR — se "Kundpanelen" ovan för position och storlek.
     Ingen egen rubrik här: "Kunder" står på menyposten ovanför. */
  .sidebar-header {
    padding: 18px 0 8px;
  }
  .sidebar-search {
    width: 100%; padding: 9px 12px;
    border: 1.5px solid var(--border); border-radius: 8px;
    font-size: var(--body-xs); font-family: var(--font); color: var(--text);
    background: var(--bg); outline: none; transition: border-color 0.15s;
  }
  .sidebar-search:focus { border-color: var(--red); background: white; }
  .sidebar-new-btn {
    width: 100%; margin-top: 10px; padding: 9px;
    background: var(--red); color: white; border: none;
    border-radius: 8px; font-size: var(--body-xs); font-weight: 500;
    cursor: pointer; font-family: var(--font); transition: background 0.15s;
    display: flex; align-items: center; justify-content: center; gap: 6px;
  }
  .sidebar-new-btn:hover { background: var(--red-dark); }
  .sidebar-list { flex: 1; overflow-y: auto; padding: 8px; }
  /* Kundmappen — riktiga kunder i utfällbar grupp, demokunden utanför */
  .sidebar-mapp {
    width: 100%; display: flex; align-items: center; gap: 8px;
    padding: 10px 12px; margin: 6px 0 2px; border: none; background: transparent;
    font-family: var(--font); font-size: var(--body-xxs); font-weight: 400;
    letter-spacing: .07em; text-transform: uppercase; color: var(--light-gray);
    cursor: pointer; border-radius: 8px; text-align: left;
    transition: background .1s, color .1s;
  }
  .sidebar-mapp:hover { background: var(--bg); color: var(--gray); }
  .sidebar-mapp-pil { display: inline-block; font-size: 10px; transition: transform .18s; }
  .sidebar-mapp-pil.open { transform: rotate(90deg); }
  .sidebar-mapp-antal {
    margin-left: auto; background: var(--bg); border-radius: 20px;
    padding: 1px 8px; font-size: var(--body-xxs); color: var(--gray); letter-spacing: 0;
  }
  .sidebar-customer {
    padding: 12px 12px; border-radius: 10px; cursor: pointer;
    display: flex; align-items: center; gap: 12px; margin-bottom: 2px;
    transition: background 0.1s; border: 1.5px solid transparent;
  }
  .sidebar-customer:hover { background: var(--bg); }
  .sidebar-customer.active { background: rgba(54,69,253,0.07); border-color: rgba(54,69,253,0.15); }
  .customer-avatar {
    width: 38px; height: 38px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: var(--body-xs); font-weight: 400; color: white; flex-shrink: 0;
  }
  .customer-info-name { font-size: var(--body-xs); font-weight: 500; color: var(--text); }
  .customer-info-sub { font-size: var(--body-xxs); color: var(--light-gray); margin-top: 1px; }

  /* MAIN */
  .app-main { flex: 1; overflow-y: auto; padding: 36px 40px; }
  /* Innehållet centrerat på bredden: tre kort à 375px + mellanrummen
     sätter taket, och på bredare skärmar fördelas luften lika åt båda
     håll i stället för att samlas till höger. */
  #customer-view { width: 100%; max-width: 1160px; margin-inline: auto; }
  .app-empty {
    display: flex; flex-direction: column; align-items: center;
    justify-content: center; height: 100%; text-align: center; color: var(--gray);
    gap: 12px;
  }
  .app-empty-icon { font-size: var(--title-md); opacity: 0.3; }
  .app-empty-title { font-size: var(--body-md); font-weight: 500; color: var(--text); }
  .app-empty-sub { font-size: var(--body-xs); max-width: 280px; line-height: 1.6; }

  .customer-header { margin-bottom: 32px; }
  .customer-header-top {
    display: flex; align-items: center; gap: 16px; margin-bottom: 4px;
  }
  .customer-header-avatar {
    width: 52px; height: 52px; border-radius: var(--radius-image);
    display: flex; align-items: center; justify-content: center;
    font-size: var(--body-md); font-weight: 400; color: white;
  }
  .customer-header-name {
    font-size: var(--body-lg); font-weight: 400; letter-spacing: -0.03em; color: var(--dark);
  }
  .customer-header-meta { font-size: var(--body-xs); color: var(--gray); margin-top: 2px; }

  /* SERVICE CARDS */
  .service-launcher-title {
    font-size: var(--body-xxs); font-weight: 400; letter-spacing: 0.07em;
    text-transform: uppercase; color: var(--light-gray); margin-bottom: 16px;
  }
  .service-launcher {
    /* Korten toppar på Figmas 375px bredd och krymper därunder med
       bibehållen proportion (se aspect-ratio nedan). auto-fit + maxtak
       i stället för fasta pixlar: tre kort à fast 375 hade krävt ~1200px
       yta och gått sönder på laptoppar. */
    display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 375px)); gap: 16px;
    margin-bottom: 40px;
  }
  .launcher-card {
    background: white; border: 1.5px solid var(--border);
    border-radius: var(--radius); padding: 28px 24px;
    cursor: pointer; transition: all 0.15s; position: relative; overflow: hidden;
    box-shadow: var(--shadow-sm);
    /* Höjden styrs av innehållet. Flexkolumnen behålls: ikonen ligger
       centrerad i sin egen zon med luft, texten samlad under. */
    display: flex; flex-direction: column;
  }
  .launcher-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
  /* Statusmärke — visar om workshopen är påbörjad eller analyserad.
     Tomt märke tar ingen plats, så orörda kort ser ut som förut. */
  .launcher-status {
    position: absolute; top: 14px; right: 14px;
    font-size: var(--body-xxs); font-weight: 500; letter-spacing: 0;
    padding: 3px 9px; border-radius: 980px; line-height: 1.5;
  }
  .launcher-status:empty { display: none; }
  .launcher-status.pagaende { background: var(--purple-soft); color: var(--purple-mid); }
  .launcher-status.klar     { background: #D1F2DC; color: #1A7A2A; }
  .launcher-card.brand:hover { border-color: rgba(54,69,253,0.25); }
  .launcher-card.web:hover { border-color: rgba(0,113,227,0.25); }
  .launcher-card.digital:hover { border-color: rgba(52,199,89,0.25); }
  .launcher-card.kampanj:hover { border-color: rgba(255,159,10,0.25); }

  /* Ikonen centrerad i kortets flexibla övre yta: flex:1 låter den ta all
     ledig höjd (och trycker ner rubrik + text mot botten), padding
     garanterar topp- och bottenluft även när kortet är som grundast. */
  .launcher-icon {
    font-size: var(--title-xs);
    /* Vänsterställd i linje med rubriken och texten — mitt-centrerad ikon
       över vänsterställd text drog isär kortets komposition. Behåller
       den luftiga zonen (flex:1 + padding) som trycker ner textblocket. */
    flex: 1; display: flex; align-items: center; justify-content: flex-start;
    padding: 32px 0;
  }
  .launcher-icon img { width: 58px; height: 58px; display: block; }
  .launcher-label {
    font-size: var(--body-xxs); font-weight: 400; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--light-gray); margin-bottom: 6px;
  }
  .launcher-name {
    font-size: var(--title-xs); line-height: var(--title-xs-lh); font-weight: 400;
    letter-spacing: var(--title-xs-ls); color: var(--dark); margin-bottom: 10px;
    position: relative;
  }
  /* Pil framför titeln vid hover (Figma 1277:404, officiella pilen) —
     vertikalt centrerad mot rubriken, 23px vid 32px-rubrik och 14px gap
     till texten (Figmas mått). Allt i em så att proportionerna följer med
     när --title-xs krymper på smala skärmar. */
  .launcher-pil {
    position: absolute; left: 0; top: 0; bottom: 0;
    display: flex; align-items: center;
    opacity: 0; transform: translateX(-0.3em);
    transition: opacity 0.2s ease, transform 0.2s ease;
  }
  .launcher-pil svg { width: 0.72em; height: 0.72em; display: block; }
  .launcher-name-text {
    display: inline-block;
    transition: transform 0.2s ease;
  }
  .launcher-card:hover .launcher-pil { opacity: 1; transform: none; }
  /* 1.16em = pilens 0.72em + Figmas 14px gap (0.44em vid 32px) */
  .launcher-card:hover .launcher-name-text { transform: translateX(1.16em); }
  .launcher-desc { font-size: var(--body-sm); color: var(--gray); line-height: 1.6; }

  /* CUSTOMER HISTORY */
  .history-title {
    font-size: var(--body-xxs); font-weight: 400; letter-spacing: 0.07em;
    text-transform: uppercase; color: var(--light-gray); margin-bottom: 16px;
  }
  .history-empty {
    background: white; border: 1px solid var(--border); border-radius: var(--radius);
    padding: 32px; text-align: center; color: var(--light-gray);
    font-size: var(--body-xs);
  }
  .history-item {
    display: flex; align-items: center; gap: 16px;
    background: white; border: 1px solid var(--border); border-radius: var(--radius);
    padding: 18px 20px; margin-top: 10px; cursor: pointer;
    transition: box-shadow 0.18s, border-color 0.18s;
  }
  .history-item:hover {
    box-shadow: var(--shadow-md); border-color: var(--red);
  }
  .history-item-icon {
    width: 36px; height: 36px; background: var(--red); color: var(--bg-white);
    border-radius: 10px; display: flex; align-items: center; justify-content: center;
    font-size: var(--body-sm); flex-shrink: 0;
  }
  .history-item-body { flex: 1; min-width: 0; }
  .history-item-title { font-size: var(--body-xs); font-weight: 400; color: var(--text); margin-bottom: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .history-item-sub { font-size: var(--body-xxs); color: var(--gray); }
  .history-item-arrow { font-size: var(--body-md); color: var(--light-gray); flex-shrink: 0; }

  /* NEW CUSTOMER MODAL */
  .modal-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,0.4);
    display: none; align-items: center; justify-content: center;
    z-index: 1000; backdrop-filter: blur(4px);
  }
  .modal-overlay.open { display: flex; }
  .modal-box {
    background: white; border-radius: var(--radius-image); padding: 40px;
    width: 480px; box-shadow: var(--shadow-lg);
  }
  .modal-title { font-size: var(--body-md); font-weight: 400; letter-spacing: -0.03em; color: var(--dark); margin-bottom: 6px; }
  .modal-sub { font-size: var(--body-xs); color: var(--gray); margin-bottom: 28px; }
  .modal-label { font-size: var(--body-xxs); font-weight: 500; color: var(--gray); margin-bottom: 6px; display: block; }
  .modal-input {
    width: 100%; padding: 12px 14px; border: 1.5px solid var(--border);
    border-radius: 8px; font-size: var(--body-xs); font-family: var(--font);
    color: var(--text); background: var(--bg); outline: none;
    transition: border-color 0.15s; margin-bottom: 16px;
  }
  .modal-input:focus { border-color: var(--red); background: white; }
  .modal-actions { display: flex; gap: 10px; margin-top: 8px; }
  .modal-btn-primary {
    flex: 1; padding: 13px; background: var(--red); color: white;
    border: none; border-radius: 8px; font-size: var(--body-xs); font-weight: 500;
    cursor: pointer; font-family: var(--font); transition: background 0.15s;
  }
  .modal-btn-primary:hover { background: var(--red-dark); }
  .modal-btn-cancel {
    padding: 13px 20px; background: transparent; color: var(--gray);
    border: 1.5px solid var(--border); border-radius: 8px; font-size: var(--body-xs);
    cursor: pointer; font-family: var(--font); transition: all 0.15s;
  }
  .modal-btn-cancel:hover { border-color: var(--text-muted); color: var(--text); background: var(--bg); }


  /* ════ VIEW ROUTING ════ */
  .view { display: none; }
  .view.active { display: block; }
  #view-app.active { display: flex; flex-direction: column; min-height: calc(100vh / var(--zoom, 1)); }


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

  /* Workshopvyernas palett — kompletterar blocket överst i filen.
     Alla värden pekar på designsystemets tokens (se tokens.css). */
  :root {
    --card:      var(--bg-white);
    --card2:     #F7F7FC;
    --red-light: rgba(54,69,253,0.08);   /* Dragster-blå, 8 % */
    --red-dim:   #2A38E8;
    --light:     #3A3A3C;
    --shadow:    0 2px 12px rgba(28,16,36,0.08), 0 1px 3px rgba(28,16,36,0.05);
  }

  body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--font);
    min-height: calc(100vh / var(--zoom, 1));
    font-size: var(--body-sm);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
  }

  /* ── HEADER ── */
  header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 48px;
    border-bottom: 1px solid rgba(0,0,0,0.08);
    position: sticky;
    top: 0;
    background: rgba(245,245,247,0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    z-index: 100;
    gap: 24px;
  }
  .logo-img {
    height: 28px;
    width: auto;
    display: block;
  }
  .logo-wrap {
    display: flex;
    align-items: center;
    gap: 14px;
  }
  .ssm-title {
    font-size: var(--body-xs);
    font-weight: 400;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text);
  }
  .tool-name {
    font-size: var(--body-xs);
    color: var(--gray);
    letter-spacing: -0.01em;
    font-weight: 500;
  }

  /* ── MAIN WRAPPER ── */
  .main-wrap {
    max-width: 860px;
    margin: 0 auto;
    padding: 0 24px;
  }

  /* ── PROGRESS ── */
  .progress-wrap {
    padding: 40px 0 0;
  }
  .progress-bar {
    display: flex;
    gap: 5px;
    margin-bottom: 32px;
  }
  .step-dot {
    height: 4px;
    flex: 1;
    background: var(--border);
    border-radius: 2px;
    transition: background 0.3s;
  }
  .step-dot.active { background: var(--red); }
  .step-dot.done   { background: rgba(255,0,0,0.35); }

  /* ── STEP LABEL ── */
  /* Stegrubriken, komponerad i tre nivåer:

       STEG 1 AV 7                ← egen rad: avdelare mot menyn
       [ikon]  Kunden             ← ikonen linjerar med rubrik…
               Grundfakta, affärs…  ← …och beskrivning

     Grid-areas gör om ordningen utan att markupen behöver röras —
     etiketten ligger först i HTML men renderas ovanför ikonen. */
  .step-label {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas:
      'eyebrow eyebrow'
      'icon    title'
      'icon    desc';
    column-gap: 16px;
    align-items: center;
    margin-bottom: 32px;
  }
  .step-label .step-num       { grid-area: eyebrow; }
  .step-label .step-icon-wrap { grid-area: icon; align-self: center; }
  .step-label .step-title     { grid-area: title; align-self: end; }
  .step-label .step-desc      { grid-area: desc; align-self: start; }

  /* Etiketten som avdelare: mer teckenluft och avstånd ner till rubriken */
  .step-label .step-num {
    letter-spacing: 0.08em;
    margin-bottom: 18px;
  }

  /* Ikonen i Dragster-blått på lavendelplattan — något mindre än
     landningssidans (44 mot 52) så att rubriken behåller övertaget */
  .step-label .step-icon-wrap {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    margin-bottom: 0;
  }
  .step-label .step-icon-wrap svg {
    color: var(--dragster-blue);
    width: 24px;
    height: 24px;
  }
  .step-label .step-num {
    font-size: var(--body-xxs);
    color: var(--red);
    letter-spacing: 0.01em;
    font-weight: 500;
    margin-bottom: 6px;
    text-transform: uppercase;
  }
  .step-label .step-title {
    hyphens: auto;
    overflow-wrap: break-word;
    font-size: var(--title-xs);
    font-weight: 400;
    letter-spacing: -0.03em;
    color: var(--text);
    line-height: 1.1;
  }
  .step-label .step-desc {
    font-size: var(--body-sm);
    color: var(--gray);
    margin-top: 8px;
    letter-spacing: -0.01em;
  }

  /* ── CARD ── */
  .form-card {
    background: var(--card);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 32px;
    margin-bottom: 16px;
  }
  .card-section-label {
    font-size: var(--body-xxs);
    font-weight: 400;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--red);
    margin-bottom: 20px;
  }

  /* ── FORM ── */
  /* minmax(0, 1fr) och inte bara 1fr: en 1fr-kolumn får autominimum
     min-content, så ett brett barn (en rad svarsknappar, en lång URL)
     tvingar ut kolumnen och spränger kortet i sidled. Med 0 som minimum
     håller kolumnen sig innanför och innehållet får bryta i stället. */
  .field-group {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 18px;
    margin-bottom: 18px;
  }
  .field-group.full { grid-template-columns: minmax(0, 1fr); }
  .field-group.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .field {
    display: flex;
    flex-direction: column;
    gap: 7px;
  }

  label {
    font-size: var(--body-xxs);
    font-weight: 500;
    letter-spacing: 0.01em;
    color: var(--gray);
  }

  /* Alla textliknande fält — styla genom att UNDANTA specialtyperna i
     stället för att räkna upp de vanliga. Den gamla uppräkningen missade
     type="url", så Hemsida-fältet föll igenom och fick webbläsarens råa
     standardutseende. Med undantagslistan kan ett nytt fält med ovanlig
     typ inte längre hamna utanför. */
  input:not([type="range"]):not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]):not([type="color"]),
  textarea, select {
    background: var(--card2);
    border: 1px solid var(--border);
    color: var(--text);
    font-family: var(--font);
    font-size: var(--body-sm);
    padding: 11px 14px;
    border-radius: var(--radius-sm);
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
    resize: vertical;
    -webkit-font-smoothing: antialiased;
  }
  input:not([type="range"]):not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]):not([type="color"]):focus,
  textarea:focus, select:focus {
    border-color: var(--red);
    box-shadow: 0 0 0 3px rgba(54,69,253,0.08);
  }
  input::placeholder, textarea::placeholder { color: #B0B0B5; }
  select option { background: var(--bg-white); color: var(--text); }

  /* Dropdown-pilen — webbläsarens standardpil ersätts med en egen ▾ i
     textfärgen, med luft mellan pilen och fältets högerkant (samma 14px
     som fältets övriga padding). Pilen ligger som bakgrundsbild eftersom
     en <select> inte kan bära ::after; padding-right hindrar att långa
     alternativ skriver över den. */
  select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M1.5 3.2h7L5 7.4z' fill='%234F4F4F'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 38px;
  }
  textarea { min-height: 88px; }
  textarea.tall { min-height: 120px; }

  /* ── COMPETITOR CARD ── */
  .comp-card {
    background: var(--card2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 18px;
    margin-bottom: 12px;
  }
  .comp-card-title {
    font-size: var(--body-xxs);
    font-weight: 400;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--red);
    margin-bottom: 12px;
  }

  /* ── TAGS ── */
  .tags-group { display: flex; flex-wrap: wrap; gap: 8px; }
  .tag {
    padding: 7px 16px;
    border-radius: var(--radius-btn);
    border: 1px solid var(--border);
    font-size: var(--body-xs);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
    user-select: none;
    color: var(--gray);
    background: var(--card);
    letter-spacing: -0.01em;
  }
  .tag:hover { border-color: var(--text-muted); color: var(--light); background: var(--bg-white); }
  .tag.selected {
    border-color: var(--red);
    color: var(--red);
    background: var(--red-light);
  }

  /* ── INFO BOX ── */
  .info-box {
    background: var(--card2);
    border-radius: var(--radius-sm);
    border-left: 3px solid var(--red);
    padding: 16px 18px;
    margin-top: 20px;
  }
  .info-box-title {
    font-size: var(--body-xxs);
    font-weight: 400;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--red);
    margin-bottom: 6px;
  }
  .info-box-body {
    font-size: var(--body-xs);
    color: var(--gray);
    line-height: 1.65;
  }

  /* ── NAV BUTTONS ── */
  .nav-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 28px 0 60px;
  }
  .btn {
    padding: 13px 26px;
    border-radius: var(--radius-btn);
    border: none;
    font-family: var(--font);
    font-size: var(--body-sm);
    font-weight: 500;
    cursor: pointer;
    letter-spacing: -0.01em;
    transition: all 0.18s;
    -webkit-font-smoothing: antialiased;
  }
  .btn-primary {
    background: var(--red);
    color: var(--bg-white);
    box-shadow: 0 2px 8px rgba(54,69,253,0.25);
  }
  .btn-primary:hover { background: var(--red-dim); box-shadow: 0 4px 14px rgba(54,69,253,0.30); transform: translateY(-1px); }
  .btn-primary:active { transform: translateY(0); }
  .btn-ghost {
    background: var(--card);
    color: var(--gray);
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
  }
  .btn-ghost:hover { color: var(--text); border-color: var(--text-muted); }

  /* ── RESULT PAGE ── */
  #result-page { display: none; }

  .result-hero {
    padding: 52px 0 36px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 32px;
  }
  .result-eyebrow {
    font-size: var(--body-xxs);
    color: var(--red);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    font-weight: 400;
    margin-bottom: 10px;
  }
  .result-client-name {
    font-size: var(--title-md);
    font-weight: 400;
    letter-spacing: -0.04em;
    color: var(--text);
    line-height: 1.0;
    margin-bottom: 8px;
  }
  .result-subtitle {
    font-size: var(--body-sm);
    color: var(--gray);
    letter-spacing: -0.01em;
  }

  /* Analysens hjärta — sweet spot-formuleringen ligger på Dragsters
     diamantgradient (designsystemets mest karaktäristiska yta) med mörk
     text, i stället för den gamla svarta plattan. */
  .sweetspot-zone {
    /* Diamantgradienten i dämpad form: en halvgenomskinlig vit slöja
       ovanpå tonar ner den — på ett stort kort blir full styrka för
       mycket, men karaktären ska anas. Höj/sänk sista siffran i rgba
       för att justera (lägre = mer färg). */
    background:
      linear-gradient(rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0.62)),
      var(--bg-diamond-gradient);
    background-color: #F6F6F6;
    border-radius: var(--radius-image);
    padding: 40px 44px;
    margin-bottom: 24px;
    box-shadow: var(--shadow-lg);
  }
  .sweetspot-zone-title {
    font-size: var(--body-xxs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--red);
    font-weight: 400;
    margin-bottom: 14px;
  }
  .sweetspot-statement {
    font-size: var(--body-lg);
    line-height: var(--body-lg-lh);
    letter-spacing: var(--body-lg-ls);
    font-weight: 400;
    color: var(--text-title);
    margin-bottom: 22px;
  }
  .sweetspot-tags { display: flex; flex-wrap: wrap; gap: 8px; }
  /* Taggpiller enligt dragsterGPT-sajten: tunn kontur som standard,
     fylls mörk vid hover. Mått ur Figma: radie 100px, padding 8/12. */
  .s-tag {
    background: transparent;
    border: 1px solid var(--btn-dark);
    color: var(--btn-dark);
    padding: 8px 12px;
    border-radius: 100px;
    font-size: var(--body-xxs);
    font-weight: 400;
    letter-spacing: 0.02em;
    line-height: 1;
    transition: background 0.2s ease-out, color 0.2s ease-out;
    cursor: default;
  }
  .s-tag:hover {
    background: var(--btn-dark);
    color: var(--text-light);
  }

  .result-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
  }
  .result-card {
    background: var(--card);
    border-radius: var(--radius);
    padding: 28px;
    box-shadow: var(--shadow);
  }
  .result-card.full-width { grid-column: 1 / -1; }
  .rc-title {
    font-size: var(--body-xxs);
    font-weight: 400;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--red);
    margin-bottom: 16px;
  }
  .rc-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 10px;
    font-size: var(--body-xs);
    line-height: 1.55;
    color: var(--light);
  }
  .rc-item::before {
    content: '→';
    color: var(--red);
    flex-shrink: 0;
    margin-top: 1px;
    font-weight: 500;
  }
  .rc-item:last-child { margin-bottom: 0; }

  .match-row {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 14px;
    align-items: start;
    margin-bottom: 12px;
  }
  .match-left { text-align: right; }
  .match-arrow { color: var(--red); font-size: var(--body-md); padding-top: 6px; font-weight: 400; }
  .match-label {
    font-size: var(--body-xxs);
    font-weight: 400;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--gray);
    margin-bottom: 10px;
  }
  .match-point {
    font-size: var(--body-xs);
    line-height: 1.55;
    color: var(--light);
    margin-bottom: 6px;
    padding: 8px 12px;
    background: var(--card2);
    border-radius: 8px;
  }

  .keyword-chips { display: flex; flex-wrap: wrap; gap: 8px; }
  .kw-chip {
    background: var(--card2);
    border: 1px solid var(--border);
    color: var(--light);
    padding: 5px 14px;
    border-radius: var(--radius-btn);
    font-size: var(--body-xxs);
    font-weight: 500;
  }
  .kw-chip.trending { border-color: var(--text-muted); color: var(--text); font-weight: 500; }

  .copy-section { margin-bottom: 24px; }
  .copy-box {
    background: var(--text);
    border-radius: var(--radius);
    padding: 28px 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    box-shadow: var(--shadow-lg);
  }
  .copy-box-text h3 {
    font-size: var(--body-sm);
    font-weight: 400;
    margin-bottom: 4px;
    color: var(--bg-white);
    letter-spacing: -0.02em;
  }
  .copy-box-text p {
    font-size: var(--body-xs);
    color: rgba(255,255,255,0.55);
    line-height: 1.55;
  }
  .btn-copy {
    background: var(--red);
    border: none;
    color: var(--bg-white);
    padding: 13px 24px;
    border-radius: var(--radius-btn);
    font-family: var(--font);
    font-size: var(--body-xs);
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.18s;
    box-shadow: 0 2px 8px rgba(54,69,253,0.3);
    letter-spacing: -0.01em;
  }
  .btn-copy:hover { background: var(--red-dim); transform: translateY(-1px); }
  .btn-copy.copied { background: #22883A; box-shadow: 0 2px 8px rgba(34,136,58,0.3); }

  .btn-restart {
    display: inline-block;
    margin-bottom: 60px;
    background: var(--card);
    border: 1px solid var(--border);
    color: var(--gray);
    padding: 11px 22px;
    border-radius: var(--radius-btn);
    font-family: var(--font);
    font-size: var(--body-xs);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
    box-shadow: var(--shadow);
    letter-spacing: -0.01em;
  }
  .btn-restart:hover { color: var(--text); border-color: var(--text-muted); }

  /* insider card */
  #r-insider-card.result-card {
    border: 1px solid rgba(255,0,0,0.2);
    background: var(--red-light);
  }
  #r-insider-card .rc-title { color: var(--red); }

  /* ── HIDDEN STEP ── */
  .step { display: none; }
  .step.active { display: block; }

  .divider {
    margin: 28px 0;
    border: none;
    border-top: 1px solid var(--border);
  }

  .hint { font-size: var(--body-xxs); color: var(--gray); margin-top: 5px; letter-spacing: -0.01em; }

  /* ── VISUAL UPLOAD ── */
  .visual-dropzone {
    border: 2px dashed var(--border);
    border-radius: 12px;
    padding: 32px 20px;
    text-align: center;
    cursor: pointer;
    transition: border-color .2s, background .2s;
    background: var(--bg);
  }
  .visual-dropzone:hover, .visual-dropzone.drag-over {
    border-color: var(--red);
    background: rgba(54,69,253,.04);
  }
  .visual-dropzone-icon { font-size: var(--body-lg); margin-bottom: 8px; }
  .visual-dropzone-label {
    font-size: var(--body-xs); font-weight: 500; color: var(--text); margin-bottom: 4px;
  }
  .visual-dropzone-sub { font-size: var(--body-xxs); color: var(--gray); }
  .visual-thumb-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 12px;
    margin-top: 16px;
  }
  .visual-thumb {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--border);
    background: var(--bg);
  }
  .visual-thumb img {
    width: 100%; height: 90px; object-fit: cover; display: block;
  }
  .visual-thumb-label {
    font-size: var(--body-xxs); font-weight: 500; color: var(--text);
    padding: 5px 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    background: var(--card);
  }
  .visual-thumb-remove {
    position: absolute; top: 4px; right: 4px;
    background: rgba(0,0,0,.55); color: var(--bg-white); border: none;
    border-radius: 50%; width: 20px; height: 20px; font-size: var(--body-xxs);
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    line-height: 1;
  }
  .visual-thumb-remove:hover { background: var(--red); }
  .visual-badge {
    display: inline-flex; align-items: center; gap: 6px;
    background: rgba(54,69,253,.1); color: var(--red);
    font-size: var(--body-xxs); font-weight: 400; letter-spacing: .06em;
    text-transform: uppercase; border-radius: var(--radius-image);
    padding: 4px 10px; margin-bottom: 14px;
  }

  /* ── TAB NAVIGATION ── */
  .tool-tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--border);
    background: var(--card);
    padding: 0 48px;
  }
  .tool-tab {
    padding: 14px 24px;
    font-size: var(--body-xs);
    font-weight: 500;
    color: var(--gray);
    cursor: pointer;
    border-bottom: 3px solid transparent;
    transition: all 0.2s;
    letter-spacing: -0.01em;
  }
  .tool-tab.active {
    color: var(--red);
    border-bottom-color: var(--red);
  }
  .tool-tab:hover:not(.active) {
    color: var(--text);
  }

  /* ── TAB CONTENT ── */
  .tab-content { display: none; }
  .tab-content.active { display: block; }

  /* ── RATING WIDGET ── */
  .rating-widget {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 200;
  }
  .rating-toggle {
    background: var(--red);
    color: var(--bg-white);
    border: none;
    border-radius: var(--radius-image);
    padding: 8px 16px;
    font-size: var(--body-xs);
    font-weight: 500;
    cursor: pointer;
    box-shadow: var(--shadow-lg);
    font-family: var(--font);
  }
  .rating-toggle:hover { opacity: 0.9; }
  .rating-panel {
    background: var(--card);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    padding: 20px;
    width: 260px;
    margin-bottom: 8px;
    display: none;
  }
  .rating-panel.open {
    display: block;
  }
  .rating-panel h3 {
    font-size: var(--body-xs);
    font-weight: 500;
    margin-bottom: 12px;
    color: var(--text);
  }
  .stars {
    display: flex;
    gap: 6px;
    font-size: var(--body-lg);
    margin: 10px 0;
  }
  .star {
    cursor: pointer;
    color: var(--border);
    transition: color 0.15s;
  }
  .star.selected, .star:hover {
    color: var(--red);
  }
  .rating-panel textarea {
    width: 100%;
    margin-top: 12px;
    margin-bottom: 12px;
  }
  .rating-panel .btn {
    width: 100%;
    margin: 0;
  }

  /* ── CUSTOMER MODAL ── */
  .modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 300;
  }
  .modal-overlay.open {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .modal-content {
    background: var(--card);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    padding: 32px;
    max-width: 500px;
    width: 90%;
  }
  .modal-content h2 {
    font-size: var(--body-lg);
    font-weight: 400;
    margin-bottom: 24px;
    color: var(--text);
  }
  .modal-buttons {
    display: flex;
    gap: 12px;
    margin-top: 24px;
  }
  .modal-buttons .btn {
    flex: 1;
  }

  /* ── REGISTER CUSTOMER BTN ── */
  .register-customer-btn {
    background: transparent;
    color: var(--red);
    border: 1px solid var(--border);
    padding: 8px 14px;
    border-radius: var(--radius-btn);
    font-size: var(--body-xxs);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
    font-family: var(--font);
  }
  .register-customer-btn:hover {
    border-color: var(--red);
    background: var(--red-light);
  }

  /* ── SLIDER ── */
  .slider-wrap { display: flex; flex-direction: column; gap: 10px; }
  .slider-labels { display: flex; justify-content: space-between; }
  .slider-label-item { font-size: var(--body-xxs); font-weight: 500; color: var(--gray); letter-spacing: 0.03em; text-transform: uppercase; }
  input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 4px;
    border-radius: 2px;
    background: linear-gradient(to right, var(--red) var(--val, 50%), var(--border) var(--val, 50%));
    outline: none;
    padding: 0;
    cursor: pointer;
    border: none;
  }
  input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--red);
    cursor: pointer;
    border: 2.5px solid var(--bg-white);
    box-shadow: 0 1px 6px rgba(255,0,0,0.25), 0 1px 3px rgba(0,0,0,0.12);
    transition: transform 0.15s;
  }
  input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.12); }
  input[type="range"]::-moz-range-thumb {
    width: 22px; height: 22px;
    border-radius: 50%;
    background: var(--red);
    cursor: pointer;
    border: 2.5px solid var(--bg-white);
    box-shadow: 0 1px 6px rgba(255,0,0,0.25);
  }

  /* ── OPTION BUTTONS (single-select) ── */
  /* wrap är inte kosmetik: utan den radas svarsalternativen på EN rad och
     krymper aldrig under sin textbredd, så de sista knapparna hamnade
     utanför skärmkanten på mobil — osynliga och omöjliga att trycka på.
     Frågan gick alltså inte att besvara i telefon. */
  .option-group { display: flex; flex-wrap: wrap; gap: 10px; }
  .option-btn {
    /* flex-basis 0 (inte auto): knapparna delar raden lika och krymper
       tillsammans, precis som förut på desktop. Wrap slår in först när
       texten inte längre får plats — alltså i praktiken bara på mobil. */
    flex: 1 1 0;
    padding: 11px 8px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    font-size: var(--body-xs);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
    text-align: center;
    color: var(--gray);
    background: var(--card);
    letter-spacing: -0.01em;
    font-family: var(--font);
    -webkit-font-smoothing: antialiased;
  }
  .option-btn:hover { border-color: var(--text-muted); color: var(--light); background: var(--bg-white); }
  .option-btn.selected { border-color: var(--red); color: var(--red); background: var(--red-light); }

  /* ── RANK BUTTONS ── */
  .rank-group { display: flex; flex-direction: column; gap: 8px; }
  .rank-btn {
    position: relative;
    padding: 12px 16px 12px 44px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    background: white;
    cursor: pointer;
    font-size: var(--body-xs);
    font-family: var(--font);
    color: var(--text);
    text-align: left;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
    -webkit-font-smoothing: antialiased;
  }
  .rank-btn:hover { border-color: var(--text-muted); background: var(--bg-white); }
  .rank-btn.ranked { border-color: var(--red); background: var(--red-light); color: var(--red); }
  .rank-badge {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--border);
    color: var(--text-muted);
    font-size: var(--body-xxs);
    font-weight: 400;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, color 0.15s;
  }
  .rank-btn.ranked .rank-badge { background: var(--red); color: white; }
  .rank-hint { font-size: var(--body-xxs); color: var(--gray); margin-bottom: 12px; }

  /* ── ARGUMENT ROWS ── */
  .arg-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
  .arg-num { font-size: var(--body-xs); font-weight: 400; color: var(--red); flex-shrink: 0; width: 18px; text-align: right; }
  .arg-row input[type="text"] { flex: 1; }
  .arg-row:last-child { margin-bottom: 0; }

  /* 767px och inte 700px: tokens.css skalar typografin till mobilstorlek
     redan vid 767, så mellan 700 och 767 fick sidan mobiltext i en
     desktoplayout. Samma gräns överallt nu. */
  @media (max-width: 767px) {
    header { padding: 14px var(--margin-primary); }
    .main-wrap { padding-inline: var(--margin-primary); }
    .form-card { padding: 22px 20px; }
    .field-group { grid-template-columns: minmax(0, 1fr); }
    .field-group.three { grid-template-columns: minmax(0, 1fr); }
    .result-grid { grid-template-columns: 1fr; }
    .result-client-name { font-size: var(--title-xs); }
    .match-row { grid-template-columns: 1fr; }
    .match-arrow { display: none; }
    .copy-box { flex-direction: column; gap: 16px; }
    .tool-tabs { padding: 0 20px; }
    .tool-tab { padding: 12px 16px; font-size: var(--body-xxs); }
    .rating-panel { width: 240px; bottom: 80px; }
  }



  /* ════ WORKSHOP VIEWS ════ */
  .ws-nav {
    position: sticky; top: 0; z-index: 100;
    background: rgba(255,255,255,0.92);
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border);
    padding: 0 var(--margin-primary); height: 56px;
    display: flex; align-items: center; gap: 20px;
  }
  .ws-back-btn {
    font-size: var(--body-xs); color: var(--gray); cursor: pointer;
    border: none; background: none; font-family: var(--font);
    padding: 8px 0; transition: color 0.15s; flex-shrink: 0;
  }
  .ws-back-btn:hover { color: var(--text); }
  .ws-breadcrumb {
    display: flex; align-items: center; gap: 8px;
    font-size: var(--body-xs); font-weight: 500; color: var(--text);
  }
  .ws-breadcrumb-sep { color: var(--light-gray); font-weight: 400; }
  .ws-breadcrumb-tool { color: var(--gray); font-weight: 500; }
  /* Menyn ligger nästlad INUTI .ws-wrap, som redan står för mittfåran
     (860px + 24px sidor). Ingen egen bredd eller sidopadding här — det
     gav dubbel indragning och menyn hamnade 24px snett mot formuläret. */
  .ws-progress-wrap {
    padding: 16px 0 0;
  }
  /* Ingen genomgående linje — varje steg bär sitt eget understrecks-segment
     (se .ws-dot), med luft emellan så att stegen läses som just steg. */
  .ws-progress-bar {
    display: flex; gap: 10px;
    overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .ws-progress-bar::-webkit-scrollbar { display: none; }
  .ws-dot {
    flex: 1; min-width: 68px; text-align: center; padding: 7px 6px 9px;
    font-size: 10.5px; font-weight: 400; color: var(--light-gray);
    cursor: pointer; white-space: nowrap; letter-spacing: .02em;
    /* Grått segment under varje steg — ej genomgånget = grått,
       aktivt = blått, klart = tonat blått */
    border-bottom: 2.5px solid var(--border);
    user-select: none; transition: color .2s, border-color .2s;
  }
  .ws-dot.active { color: var(--red); border-bottom-color: var(--red); }
  .ws-dot.done { color: var(--gray); border-bottom-color: rgba(54,69,253,.3); }
  .ws-dot:hover:not(.active) { color: var(--text); }

  /* Workshop nav left group */
  .ws-nav-left { display: flex; align-items: center; gap: 14px; }
  .ws-home-logo {
    width: 26px; height: 26px; background: var(--red); border-radius: 6px;
    display: flex; align-items: center; justify-content: center;
    font-size: var(--body-xxs); font-weight: 400; color: white; cursor: pointer;
    letter-spacing: 0; flex-shrink: 0; transition: opacity .15s;
    font-family: var(--font);
  }
  .ws-home-logo:hover { opacity: .75; }

  /* Kampanj nav buttons */
  .ws-nav-btns {
    display: flex; justify-content: space-between; align-items: center;
    padding: 28px 0 60px;
  }
  .ws-btn-back {
    background: transparent; color: var(--text);
    border: 1.5px solid var(--border); border-radius: var(--radius-btn);
    padding: 10px 22px; font-size: var(--body-xs); font-weight: 500;
    cursor: pointer; font-family: var(--font); letter-spacing: -.01em;
    transition: all .15s;
  }
  .ws-btn-back:hover { border-color: var(--text-muted); background: white; }
  .ws-btn-next {
    background: var(--red); color: white; border: none;
    border-radius: var(--radius-btn); padding: 11px 26px;
    font-size: var(--body-xs); font-weight: 500; cursor: pointer;
    font-family: var(--font); letter-spacing: -.01em;
    box-shadow: 0 2px 12px rgba(54,69,253,.3); transition: all .15s;
  }
  .ws-btn-next:hover { background: var(--red-dark); transform: translateY(-1px); }
  .ws-wrap { max-width: 860px; margin: 0 auto; padding: 0 24px; }
  .ws-step { display: none; }
  /* Luften mellan formulärmenyn och stegrubriken — menyn är navigering,
     steget är innehåll, och avståndet ska markera det bytet. */
  .ws-step.active { display: block; padding-top: 56px; }
  @media (max-width: 767px) {
    .ws-step.active { padding-top: 36px; }
  }
  .ws-nav-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 28px 0 60px;
  }

  /* Override: workshop views don't need the header/tab navigation */
  #view-brand, #view-web, #view-digital, #view-kampanj,
  #view-brand-result, #view-web-result, #view-dig-result, #view-kampanj-result,
  #view-discussion {
    background: var(--bg); min-height: calc(100vh / var(--zoom, 1));
  }

  /* ── DISCUSSION VIEW ── */
  .disc-header {
    background: var(--text-title); color: var(--bg-white); padding: 48px 0 44px;
    background-image: radial-gradient(ellipse at 60% 0%, rgba(54,69,253,.12) 0%, transparent 65%);
  }
  .disc-header-inner {
    max-width: 860px; margin: 0 auto; padding: 0 24px;
  }
  .disc-badge {
    font-size: var(--body-xxs); font-weight: 400; letter-spacing: .12em;
    color: var(--red); text-transform: uppercase; margin-bottom: 14px;
  }
  .disc-title {
    font-size: var(--title-sm); font-weight: 400; letter-spacing: -.04em;
    line-height: 1.1; margin-bottom: 12px;
  }
  .disc-subtitle {
    font-size: var(--body-sm); color: rgba(255,255,255,.6); line-height: 1.6; max-width: 560px;
  }
  .disc-body {
    max-width: 860px; margin: 0 auto; padding: 40px 24px 80px;
  }
  /* API key bar */
  .apikey-bar {
    background: var(--card); border: 1.5px solid var(--border);
    border-radius: var(--radius-image); padding: 20px 24px; margin-bottom: 28px;
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  }
  .apikey-bar input {
    flex: 1; min-width: 220px; background: var(--bg);
    border: 1px solid var(--border); border-radius: 8px;
    padding: 9px 14px; font-size: var(--body-xs); font-family: var(--font);
    color: var(--text); outline: none;
  }
  .apikey-bar input:focus { border-color: var(--red); }
  .apikey-label {
    font-size: var(--body-xs); font-weight: 500; color: var(--gray);
    white-space: nowrap;
  }
  .apikey-saved {
    font-size: var(--body-xxs); color: var(--purple-mid); font-weight: 500; margin-left: 4px;
  }
  /* Generate button */
  .disc-generate-btn {
    width: 100%; padding: 18px; border-radius: var(--radius-image);
    background: var(--red); color: var(--bg-white); border: none;
    font-family: var(--font); font-size: var(--body-sm); font-weight: 400;
    cursor: pointer; margin-bottom: 32px; letter-spacing: -.01em;
    transition: background .15s; display: flex; align-items: center;
    justify-content: center; gap: 10px;
  }
  .disc-generate-btn:hover { background: var(--red-dark); }
  .disc-generate-btn:disabled { background: var(--text-muted); cursor: default; }
  /* Loading — glödlampa */
  .disc-loading {
    display: none; text-align: center; padding: 72px 24px 80px;
  }
  .disc-loading.active { display: block; }

  /* Glödlamps-scen */
  .disc-bulb-scene {
    position: relative; display: inline-block; margin-bottom: 32px;
  }
  .disc-bulb-ring {
    position: absolute; inset: -20px; border-radius: 50%;
    background: radial-gradient(circle, rgba(245,166,35,.18) 0%, transparent 70%);
    animation: discRingPulse 1.8s ease-in-out infinite;
  }
  .disc-bulb-ring2 {
    position: absolute; inset: -40px; border-radius: 50%;
    background: radial-gradient(circle, rgba(245,166,35,.07) 0%, transparent 70%);
    animation: discRingPulse 1.8s ease-in-out infinite .4s;
  }
  .disc-bulb-emoji {
    font-size: var(--title-lg); line-height: 1; display: block; position: relative; z-index: 1;
    animation: discBulbDance 2.4s ease-in-out infinite;
    filter: drop-shadow(0 0 6px rgba(245,166,35,.5));
  }
  @keyframes discBulbDance {
    0%   { transform: translateY(0) rotate(-3deg); filter: drop-shadow(0 0 4px rgba(245,166,35,.4)) brightness(.85); }
    20%  { transform: translateY(-8px) rotate(2deg); filter: drop-shadow(0 0 22px rgba(245,166,35,.8)) brightness(1.1); }
    40%  { transform: translateY(-14px) rotate(-1deg); filter: drop-shadow(0 0 40px rgba(245,166,35,1)) brightness(1.25); }
    60%  { transform: translateY(-8px) rotate(3deg); filter: drop-shadow(0 0 28px rgba(245,166,35,.9)) brightness(1.1); }
    80%  { transform: translateY(-2px) rotate(-2deg); filter: drop-shadow(0 0 10px rgba(245,166,35,.5)) brightness(.9); }
    100% { transform: translateY(0) rotate(-3deg); filter: drop-shadow(0 0 4px rgba(245,166,35,.4)) brightness(.85); }
  }
  @keyframes discRingPulse {
    0%, 100% { transform: scale(.85); opacity: .4; }
    40%       { transform: scale(1.15); opacity: 1; }
  }

  /* Rays — strålar som lyser ut */
  .disc-rays {
    position: absolute; inset: -24px; z-index: 0; pointer-events: none;
    animation: discBulbDance 2.4s ease-in-out infinite;
  }
  .disc-ray {
    position: absolute; top: 50%; left: 50%;
    width: 2px; height: 18px; background: linear-gradient(to top, rgba(245,166,35,.7), transparent);
    border-radius: 2px; transform-origin: 50% 100%;
    animation: rayPulse 2.4s ease-in-out infinite;
  }
  @keyframes rayPulse {
    0%, 100% { opacity: .2; height: 12px; }
    40%       { opacity: .9; height: 22px; }
  }

  .disc-loading-title {
    font-size: var(--body-md); font-weight: 400; letter-spacing: -.02em; margin-bottom: 10px; color: var(--text-title);
  }
  .disc-loading-sub {
    font-size: var(--body-sm); color: var(--gray); max-width: 380px; margin: 0 auto 20px; line-height: 1.65;
  }
  .disc-loading-dots span {
    display: inline-block; width: 6px; height: 6px; border-radius: 50%;
    background: #F5A623; margin: 0 3px; vertical-align: middle;
    animation: discDotBounce 1.4s ease-in-out infinite;
  }
  .disc-loading-dots span:nth-child(2) { animation-delay: .2s; }
  .disc-loading-dots span:nth-child(3) { animation-delay: .4s; }
  @keyframes discDotBounce {
    0%, 80%, 100% { transform: translateY(0); opacity: .4; }
    40%            { transform: translateY(-6px); opacity: 1; }
  }
  .disc-progress-log {
    font-size: var(--body-xxs); color: var(--gray); margin-top: 16px;
    font-family: monospace; opacity: 0.6; min-height: 20px;
  }
  /* Glödlampa laddningsoverlay */
  .bulb-overlay {
    display: none; position: fixed; inset: 0; background: rgba(10,10,10,.88);
    z-index: 9999; flex-direction: column; align-items: center;
    justify-content: center; backdrop-filter: blur(6px);
  }
  .bulb-overlay.active { display: flex; }
  .bulb-icon {
    font-size: var(--title-lg); line-height: 1;
    animation: bulbGlow 1.4s ease-in-out infinite alternate;
    filter: drop-shadow(0 0 0px #F5A623);
  }
  @keyframes bulbGlow {
    0%   { filter: drop-shadow(0 0 4px #F5A62388) brightness(0.7); transform: scale(0.95); }
    50%  { filter: drop-shadow(0 0 28px #F5A623cc) brightness(1.1); transform: scale(1.02); }
    100% { filter: drop-shadow(0 0 52px #F5A623ff) drop-shadow(0 0 80px var(--bg-white)4); transform: scale(1.06); }
  }
  .bulb-title {
    color: var(--bg-white); font-size: var(--body-md); font-weight: 400; letter-spacing: -.03em;
    margin-top: 28px; margin-bottom: 10px;
  }
  .bulb-sub {
    color: rgba(255,255,255,.5); font-size: var(--body-xs); max-width: 340px;
    text-align: center; line-height: 1.6;
  }
  .bulb-log {
    color: rgba(255,255,255,.3); font-size: var(--body-xxs); font-family: monospace;
    margin-top: 24px; min-height: 16px; letter-spacing: .02em;
  }
  .bulb-dots::after {
    content: ''; animation: dots 1.5s steps(4,end) infinite;
  }
  @keyframes dots {
    0%  { content: ''; }
    25% { content: '.'; }
    50% { content: '..'; }
    75% { content: '...'; }
  }
  /* ══ WORKSHOP INTRO MODAL ══ */
  .intro-slide {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    opacity: 0; pointer-events: none;
    transition: opacity .5s ease, transform .5s ease;
    transform: translateX(40px);
    padding: 60px 24px;
    overflow-y: auto;
  }
  .intro-slide.active {
    opacity: 1; pointer-events: all; transform: translateX(0);
  }
  .intro-slide.exit {
    opacity: 0; transform: translateX(-40px);
  }
  .intro-content {
    text-align: center; max-width: 600px; width: 100%; margin: 0 auto;
  }
  .intro-big-title {
    font-size: clamp(44px, 8vw, 80px); font-weight: 400;
    letter-spacing: -.05em; line-height: 1; color: var(--bg-white);
    margin: 0 0 20px;
  }
  .intro-bullet {
    display: flex; align-items: flex-start; gap: 20px;
    background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08);
    border-radius: var(--radius-image); padding: 18px 20px;
  }
  .intro-bullet-icon {
    flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%;
    background: var(--red); color: var(--bg-white); font-size: var(--body-xxs); font-weight: 400;
    display: flex; align-items: center; justify-content: center; letter-spacing: .04em;
    margin-top: 1px;
  }
  .intro-next-btn {
    background: rgba(255,255,255,.1); color: var(--bg-white);
    border: 1.5px solid rgba(255,255,255,.2); border-radius: var(--radius-btn);
    padding: 14px 36px; font-size: var(--body-sm); font-weight: 400;
    cursor: pointer; font-family: var(--font); letter-spacing: -.01em;
    transition: background .2s, border-color .2s;
  }
  .intro-next-btn:hover { background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.4); }

  /* Illusion slides */
  .intro-illusion-content { max-width: 520px; }
  .intro-illusion-q {
    font-size: clamp(22px,4vw,34px); font-weight: 400; letter-spacing: -.03em;
    color: var(--bg-white); margin-bottom: 28px; line-height: 1.2;
  }
  .intro-illusion-frame {
    background: var(--bg-white); border-radius: var(--radius-image); padding: 16px;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 20px; overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,.5);
    /* Ramen har EGEN storlek och frågar aldrig bilden hur stor den är.
       Tidigare krympte den runt innehållet (fit-content), vilket gjorde
       att den kollapsade till en vit prick så fort bilden saknades,
       inte hunnit ladda, eller mättes till noll. Nu är den lika stor
       oavsett vad som händer med bilden. */
    width: min(460px, calc(100vw - 48px));
    height: 340px;
  }
  .intro-illusion-img {
    max-width: 100%; max-height: 100%; object-fit: contain;
    display: block; border-radius: 8px;
  }
  /* Visas i stället för bilden om ingen av dem gick att ladda */
  .intro-illusion-fallback {
    color: var(--gray); font-size: var(--body-xs); text-align: center;
    max-width: 260px; line-height: 1.6;
  }
  .intro-illusion-reveal {
    display: flex; align-items: center; justify-content: center; gap: 12px;
    opacity: 0; transition: opacity .5s; pointer-events: none;
    font-size: var(--body-sm); font-weight: 400; color: var(--bg-white); min-height: 28px;
    flex-wrap: wrap;
  }
  .intro-illusion-reveal.visible { opacity: 1; }
  .intro-reveal-btn {
    background: transparent; color: rgba(255,255,255,.5);
    border: 1px solid rgba(255,255,255,.2); border-radius: var(--radius-btn);
    padding: 10px 22px; font-size: var(--body-xs); font-weight: 500;
    cursor: pointer; font-family: var(--font);
    transition: all .2s;
  }
  .intro-reveal-btn:hover { color: var(--bg-white); border-color: rgba(255,255,255,.5); }

  /* Progress dots */
  .intro-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: rgba(255,255,255,.2); transition: background .3s, transform .3s;
  }
  .intro-dot.active { background: var(--red); transform: scale(1.3); }

  /* Discussion cards */
  .disc-cards { display: none; }
  .disc-cards.active { display: block; }

  /* Sammanfattningen "Det här har vi pratat om idag" — referatet av
     workshopen som ligger före korten. Samma kortspråk som .disc-card
     men utan betygsrad; markupen byggs i discussion.js. */
  .disc-summary {
    background: var(--card); border-radius: var(--radius-image);
    box-shadow: var(--shadow); padding: 32px 36px 28px; margin-bottom: 28px;
  }
  .disc-summary-rubrik {
    font-size: clamp(22px, 3.5vw, 30px); font-weight: 400;
    letter-spacing: -.03em; line-height: 1.2; color: #111; margin-bottom: 22px;
  }
  .disc-summary-sub {
    font-size: var(--title-xs); font-weight: 400; letter-spacing: -.02em;
    line-height: 1.3; color: #111; margin: 26px 0 10px;
  }
  .disc-summary-sub:first-of-type { margin-top: 0; }
  .disc-summary p {
    font-size: var(--body-sm); line-height: 1.65; color: var(--text);
    margin: 0 0 10px;
  }
  .disc-summary p strong { font-weight: 600; color: #111; }
  .disc-summary-fakta {
    display: grid; grid-template-columns: max-content 1fr; gap: 6px 28px;
    margin: 0 0 16px;
  }
  .disc-summary-faktarad { display: contents; }
  .disc-summary-faktarad span:first-child {
    font-size: var(--body-xs); color: var(--gray);
  }
  .disc-summary-faktarad span:last-child {
    font-size: var(--body-xs); color: #111;
  }
  .disc-summary-datanot {
    font-size: var(--body-xxs); color: var(--gray); line-height: 1.6;
    border-top: 1px solid var(--border); margin-top: 16px; padding-top: 12px;
  }
  .disc-summary-datanot strong { font-weight: 600; }

  .disc-card {
    background: var(--card); border-radius: var(--radius-image);
    box-shadow: var(--shadow); margin-bottom: 20px; overflow: hidden;
  }
  .disc-card-head {
    padding: 20px 24px 16px;
    border-bottom: 1px solid var(--border);
  }
  .disc-card-num {
    font-size: var(--body-xxs); font-weight: 400; letter-spacing: .1em;
    color: var(--red); text-transform: uppercase; margin-bottom: 4px;
  }
  .disc-card-title {
    font-size: var(--body-md); font-weight: 400; letter-spacing: -.01em;
  }
  .disc-card-body { padding: 20px 24px; }
  .disc-card-content {
    font-size: var(--body-sm); line-height: 1.65; margin-bottom: 8px; color: var(--text);
  }
  .disc-card-content p { margin-bottom: 10px; }
  .disc-card-content ul { padding-left: 20px; margin: 8px 0; }
  .disc-card-content li { margin-bottom: 5px; }
  /* Mörka ratingknappar (för dramatiska kort) */
  .disc-rate-dark {
    background: rgba(255,255,255,.1) !important;
    color: rgba(255,255,255,.85) !important;
    border-color: rgba(255,255,255,.2) !important;
  }
  /* Spara-knappen ligger sist i betygsraden men är inget betyg —
     därför diskretare, med en linje som skiljer den från valen. */
  .disc-insight-dl {
    margin-left: auto; background: transparent; color: var(--gray);
    border: 1px solid var(--border); border-radius: var(--radius-btn);
    padding: 8px 14px; font-size: var(--body-xxs); font-weight: 500;
    font-family: var(--font); cursor: pointer; transition: all .15s; white-space: nowrap;
  }
  .disc-insight-dl:hover { color: var(--text); border-color: var(--text-muted); }
  .disc-insight-dl.dark {
    color: rgba(255,255,255,.55); border-color: rgba(255,255,255,.2);
  }
  .disc-insight-dl.dark:hover { color: #fff; border-color: rgba(255,255,255,.5); }

  .disc-rate-dark:hover { background: rgba(255,255,255,.18) !important; }
  /* Vald-tillstånd på mörka kort. Måste ha !important — grundregeln ovan
     har det, och utan matchning här "händer inget" när man klickar
     (betyget registrerades men syntes aldrig). JS sätter yes/part/no. */
  .disc-rate-dark.yes  { background: #1E9E3E !important; border-color: #1E9E3E !important; color: #fff !important; }
  .disc-rate-dark.part { background: #B8740A !important; border-color: #B8740A !important; color: #fff !important; }
  .disc-rate-dark.no   { background: var(--red) !important; border-color: var(--red) !important; color: #fff !important; }

  /* Kort-animation */
  @keyframes cardSlideIn {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .disc-card { animation: cardSlideIn .35s ease both; }

  .disc-card-rec {
    font-size: var(--body-xs); color: var(--gray); font-style: italic;
    border-top: 1px solid var(--border); padding-top: 12px; margin-top: 12px;
  }
  /* Stjärnbetyg */
  .star-row { display:flex; gap:6px; margin:10px 0 4px; }
  .star-btn {
    background:none; border:none; font-size: var(--body-lg); cursor:pointer;
    color:var(--border); transition:color .1s; padding:0; line-height:1;
  }
  .star-btn.lit { color:#F5A623; }
  .star-btn:hover, .star-btn:hover ~ .star-btn { color:var(--border); }
  .star-row:hover .star-btn { color:#F5A623; }
  .star-row .star-btn:hover ~ .star-btn { color:var(--border) !important; }
  /* Skicka-knapp för workshoprapport */
  .send-report-btn {
    width:100%; padding:15px; border-radius: var(--radius-image); background:var(--text-title);
    color:var(--bg-white); border:none; font-family:var(--font); font-size: var(--body-sm);
    font-weight: 400; cursor:pointer; margin-top:20px; letter-spacing:-.01em;
    transition:background .15s; display:flex; align-items:center;
    justify-content:center; gap:8px;
  }
  .send-report-btn:hover { background:#333; }
  .send-report-btn.sent { background:var(--purple-mid); }
  /* Kompletterande insikter */
  .disc-extra-section {
    margin-top: 40px; padding-top: 32px; border-top: 2px dashed var(--border);
  }
  .disc-extra-header {
    display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px;
  }
  .disc-extra-title {
    font-size: var(--body-sm); font-weight: 400; color: var(--gray); letter-spacing: -.01em;
  }
  .disc-add-btn {
    display: flex; align-items: center; gap: 6px;
    background: var(--red); color: var(--bg-white); border: none; border-radius: var(--radius-btn);
    padding: 9px 18px; font-family: var(--font); font-size: var(--body-xs); font-weight: 400;
    cursor: pointer; letter-spacing: -.01em; transition: background .15s;
  }
  .disc-add-btn:hover { background: var(--red-dark); }
  .disc-custom-card {
    background: var(--bg-white); border-radius: var(--radius-image); border: 1.5px dashed var(--border);
    margin-bottom: 20px; overflow: hidden; transition: border-color .2s;
  }
  .disc-custom-card:focus-within { border-color: var(--red); border-style: solid; }
  .disc-custom-card-inner { padding: 20px 24px; }
  .disc-custom-card input[type="text"] {
    width: 100%; border: none; outline: none; font-family: var(--font);
    font-size: var(--body-sm); font-weight: 400; color: var(--text-title); background: transparent;
    letter-spacing: -.01em; margin-bottom: 10px;
  }
  .disc-custom-card input[type="text"]::placeholder { color: var(--text-muted); font-weight: 500; }
  .disc-custom-card textarea {
    width: 100%; border: none; outline: none; font-family: var(--font);
    font-size: var(--body-sm); color: var(--text); line-height: 1.6; background: transparent;
    resize: none; min-height: 64px;
  }
  .disc-custom-card textarea::placeholder { color: var(--text-muted); }
  .disc-custom-card-footer {
    display: flex; align-items: center; justify-content: flex-end;
    padding: 10px 24px 14px; border-top: 1px solid var(--border);
  }
  .disc-custom-delete {
    background: none; border: none; font-size: var(--body-xs); color: #bbb;
    cursor: pointer; font-family: var(--font); padding: 4px 8px; border-radius: 6px;
    transition: color .15s;
  }
  .disc-custom-delete:hover { color: var(--red); }
  /* Rating row */
  .disc-rating-row {
    display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; align-items: center;
  }
  .disc-rating-label {
    font-size: var(--body-xxs); font-weight: 500; color: var(--gray);
    text-transform: uppercase; letter-spacing: .06em; margin-right: 4px;
  }
  .disc-rate-btn {
    padding: 7px 16px; border-radius: var(--radius-btn); border: 1.5px solid var(--border);
    background: var(--card); font-family: var(--font); font-size: var(--body-xs);
    font-weight: 500; cursor: pointer; color: var(--gray); transition: all .15s;
  }
  .disc-rate-btn:hover { border-color: var(--red); color: var(--red); }
  .disc-rate-btn.yes  { background: #D1F2DC; border-color: var(--purple-mid); color: #1A7A2A; }
  .disc-rate-btn.part { background: var(--purple-soft); border-color: var(--purple-light); color: var(--purple-mid); }
  .disc-rate-btn.no   { background: var(--purple-light); border-color: var(--red); color: var(--red); }
  .disc-comment-wrap { margin-top: 12px; display: none; }
  .disc-comment-wrap.open { display: block; }
  .disc-comment-wrap textarea {
    width: 100%; border: 1px solid var(--border); border-radius: 10px;
    padding: 10px 14px; font-size: var(--body-xs); font-family: var(--font);
    color: var(--text); background: var(--bg); resize: vertical;
    min-height: 60px; outline: none;
  }
  .disc-comment-wrap textarea:focus { border-color: var(--red); }
  /* Proceed button */
  .disc-proceed-btn {
    width: 100%; padding: 18px; border-radius: var(--radius-image);
    background: var(--red); color: var(--bg-white); border: none;
    font-family: var(--font); font-size: var(--body-sm); font-weight: 400;
    cursor: pointer; margin-top: 32px; letter-spacing: -.01em;
    display: none; transition: background .15s;
  }
  .disc-proceed-btn:hover { background: var(--red-dark); }
  .disc-proceed-btn.visible { display: block; }
  #disc-generate-btn {
    background: var(--text-title); margin-top: 32px;
  }
  #disc-generate-btn:hover { background: #2c2c2e; }
  /* Error */
  .disc-error {
    background: var(--purple-light); border: 1px solid var(--red); border-radius: 12px;
    padding: 16px 20px; color: var(--red); font-size: var(--body-xs);
    display: none; margin-bottom: 20px;
  }
  .disc-error.active { display: block; }

  /* Result view back button */
  .result-back-btn {
    display: inline-block; margin: 32px 0 0;
    background: var(--card); border: 1px solid var(--border);
    color: var(--gray); padding: 11px 22px;
    border-radius: var(--radius-btn); font-family: var(--font);
    font-size: var(--body-xs); font-weight: 500; cursor: pointer;
    transition: all 0.15s; box-shadow: var(--shadow);
  }
  .result-back-btn:hover { color: var(--text); border-color: var(--text-muted); }


  @media print {
    /* Bara vyn man står i ska med. Tidigare tvingades ALLA vyer till
       display:block, vilket gav en utskrift med hela appen staplad på
       varandra — inloggning, alla workshops och resultatet i en enda röra. */
    .view { display: none !important; }
    .view.active { display: block !important; }

    /* Skärmens kontroller hör inte hemma på papper */
    .ws-nav, .rating-widget, .result-back-btn, button,
    .app-nav, .app-sidebar, .bulb-overlay { display: none !important; }

    body { background: white; }
    .app-body { display: block; }

    /* ── Dokumenthuvud ──
       På skärmen får rubriken luft ovanför sig. På papper hamnade den
       långt ner på första sidan, med ett tomrum där webbläsarens egen
       sidhuvudsrad står. Den dras ihop och får en tydlig avslutande linje
       så att den läses som ett dokumenthuvud och inte som en sektion. */
    .main-wrap { padding-top: 0 !important; }
    .result-hero {
      padding: 0 0 14px;
      margin-bottom: 22px;
      border-bottom: 2px solid var(--dragster-blue);
      break-after: avoid;
    }
    .result-client-name { font-size: 26pt; line-height: 1.05; }
    .result-eyebrow, .result-subtitle { font-size: 9pt; }
    .result-hero-lead {
      margin-top: 10px !important; font-size: 9.5pt !important; max-width: none !important;
    }

    /* Sweetspoten är dokumentets viktigaste rad — håll den samlad */
    .sweetspot-zone { break-inside: avoid; }

    /* Webbläsare utelämnar bakgrunder vid utskrift om man inte kryssar i
       "Bakgrundsgrafik". Analysen går till kund, så de färgade blocken
       måste med — annars blir sweetspoten en vit ruta bland andra vita.
       Sidan i övrigt förblir vit, så det går att skriva ut på papper. */
    .sweetspot-zone, .result-card, .s-tag, .arg-num, .kw-chip,
    #r-celebrate-banner, #r-unique-callout, #r-sales-card {
      -webkit-print-color-adjust: exact;
      print-color-adjust: exact;
    }

    /* Håll ihop korten — ett kort som bryts mitt itu blir svårläst */
    .result-card, .rc-item, .match-row, .arg-step { break-inside: avoid; }

    /* Sidbrytning före djupanalysen, den är ett eget dokument i dokumentet */
    #r-deep-analysis-section { break-before: page; }

    /* Länkar syns inte som länkar på papper — låt dem se ut som text */
    a { text-decoration: none; color: inherit; }

    @page { margin: 16mm; }
  }

  /* ── DESKTOP MOCKUP ── */
  /* Skärmillustrationen ska ligga ovanpå den dekorativa kurvan.
     Kurvan sträcker sig utanför sin egen sektion (den ska löpa ur bild), så
     utan ett eget staplingslager hamnar den över den här ritningen.
     position: relative krävs för att z-index ska ha någon verkan. */
  .desktop-mockup {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 820px;
    position: relative;
    z-index: 2;
  }
  .desktop-screen {
    width: 100%;
    background: var(--text-title);
    border-radius: 12px 12px 0 0;
    padding: 10px;
    box-shadow: 0 24px 80px rgba(0,0,0,0.22), 0 0 0 1px rgba(0,0,0,0.12);
  }
  .desktop-screen-inner {
    background: var(--bg-primary);
    border-radius: 6px;
    overflow: hidden;
    height: 380px;
    display: flex;
    flex-direction: column;
  }
  .desktop-stand-neck {
    width: 80px;
    height: 36px;
    background: linear-gradient(to bottom, var(--text-muted), #b0b0b0);
    clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%);
  }
  .desktop-stand-base {
    width: 220px;
    height: 14px;
    background: linear-gradient(to bottom, #c0c0c0, #a8a8a8);
    border-radius: 0 0 8px 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  }

  /* Knapparna vid kundrubriken. Egna klasser — inte .btn, som
     byggs om av buttons.js och skulle sluka innehållet. */
  .customer-header-actions {
    margin-left: auto; display: flex; align-items: center; gap: 10px;
  }
  /* Radering är destruktiv — röd hover. OBS: var(--red) är Dragster-BLÅ,
     därför literal röd här. */
  .customer-delete-btn {
    font-size: var(--body-xxs); color: var(--light-gray); background: transparent;
    border: none; cursor: pointer; padding: 8px 6px;
    font-family: var(--font); transition: color 0.15s; white-space: nowrap;
  }
  .customer-delete-btn:hover { color: #FF3B30; }


  /* ═══════════════════════════════════════════════════════════
     ADMINPANELEN — konton & roller, AI-förbrukning (views/admin.html)
     ═══════════════════════════════════════════════════════════ */
  #view-admin { background: var(--bg); min-height: calc(100vh / var(--zoom, 1)); }
  .admin-wrap { max-width: 1160px; margin: 0 auto; padding: 40px 32px 80px; }
  .admin-back {
    background: none; border: none; cursor: pointer; font-family: var(--font);
    font-size: var(--body-xs); color: var(--gray); padding: 6px 0;
    margin-bottom: 24px; transition: color .15s;
  }
  .admin-back:hover { color: var(--text); }
  .admin-eyebrow {
    font-size: var(--body-xxs); font-weight: 500; letter-spacing: .16em;
    text-transform: uppercase; color: var(--red); margin-bottom: 12px;
  }
  .admin-title {
    font-size: clamp(28px, 4vw, 40px); font-weight: 400;
    letter-spacing: -.03em; line-height: 1.1; margin: 0 0 12px; color: #111;
  }
  .admin-sub { font-size: var(--body-sm); color: var(--gray); line-height: 1.6; max-width: 640px; margin: 0 0 36px; }
  .admin-loading { font-size: var(--body-sm); color: var(--gray); padding: 24px 0; }
  .admin-error {
    font-size: var(--body-sm); color: #D70015; padding: 16px 20px;
    background: rgba(255,59,48,.07); border-radius: 12px;
  }
  .admin-stats {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 16px; margin-bottom: 24px;
  }
  .admin-stat { background: var(--card); border-radius: var(--radius-image); box-shadow: var(--shadow); padding: 20px 24px; }
  .admin-stat-varde { font-size: clamp(24px, 3vw, 32px); font-weight: 400; letter-spacing: -.03em; color: #111; }
  .admin-stat-etikett { font-size: var(--body-xxs); letter-spacing: .07em; text-transform: uppercase; color: var(--gray); margin-top: 4px; }
  .admin-card {
    background: var(--card); border-radius: var(--radius-image); box-shadow: var(--shadow);
    padding: 28px 32px; margin-bottom: 24px; overflow-x: auto;
  }
  .admin-card-title { font-size: var(--title-xs); font-weight: 400; letter-spacing: -.02em; margin: 0 0 16px; color: #111; }
  .admin-card-subtitle { font-size: var(--body-sm); font-weight: 600; margin: 24px 0 10px; color: #111; }
  .admin-tabell { width: 100%; border-collapse: collapse; font-size: var(--body-xs); }
  .admin-tabell th {
    text-align: left; font-size: var(--body-xxs); font-weight: 400;
    letter-spacing: .07em; text-transform: uppercase; color: var(--light-gray);
    padding: 0 12px 10px 0; border-bottom: 1px solid var(--border);
  }
  .admin-tabell td { padding: 10px 12px 10px 0; border-bottom: 1px solid var(--border); color: var(--text); vertical-align: middle; }
  .admin-tabell tr:last-child td { border-bottom: none; }
  .admin-dampad { color: var(--gray); }
  .admin-hoger { text-align: right; }
  .admin-roll {
    display: inline-block; padding: 2px 10px; border-radius: 20px;
    background: var(--bg); color: var(--gray); font-size: var(--body-xxs);
    font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  }
  .admin-roll--admin { background: rgba(54,69,253,0.09); color: var(--red); }
  .admin-roll-btn {
    font-size: var(--body-xxs); color: var(--gray); cursor: pointer;
    padding: 5px 12px; border: 1px solid var(--border); border-radius: var(--radius-btn);
    background: transparent; font-family: var(--font); transition: all .15s; white-space: nowrap;
  }
  .admin-roll-btn:hover { border-color: var(--red); color: var(--red); background: white; }
  .admin-du { font-size: var(--body-xxs); color: var(--light-gray); font-style: italic; }
  .admin-tomt { font-size: var(--body-xs); color: var(--gray); margin: 0; }

  /* ═══════════════════════════════════════════════════════════
     STORA SKÄRMAR & TV — hela gränssnittet växer med zoom

     Layouten är byggd i pixlar kring en ~1100px-spalt: perfekt på
     laptop, frimärke på en 4K-tv. zoom multiplicerar varje beräknad
     CSS-pixel — sektioner, text, ikoner, luft — så alla proportioner
     behålls exakt. Webbläsare utan stöd ignorerar regeln (= dagens
     utseende). OBS: vw-mått och media queries mäter fortfarande det
     riktiga fönstret — ormens brytpunkter i glass.css är trimmade
     med zoomen inräknad.

     --zoom speglar zoomfaktorn så att fullhöjdsytor kan kompensera:
     100vh zoomas också, så en "helskärmssida" (login, hero, appen)
     blir annars zoomfaktorn högre än skärmen och börjar rulla.
     calc(100vh / var(--zoom, 1)) landar på exakt skärmhöjd igen.
     Nya helskärmsytor ska använda samma uttryck, aldrig rå 100vh.
     ═══════════════════════════════════════════════════════════ */
  @media (min-width: 1920px) { html { zoom: 1.1; --zoom: 1.1; } }
  @media (min-width: 2560px) { html { zoom: 1.3; --zoom: 1.3; } }
  @media (min-width: 3600px) { html { zoom: 1.6; --zoom: 1.6; } }

  /* ═══════════════════════════════════════════════════════════
     MOBIL — telefonbredd (≤767px)

     Samlat sist så att reglerna vinner över desktopvarianterna utan
     !important. Brytpunkten är densamma som typografins i tokens.css.

     Sajten scrollade aldrig i sidled ens före det här blocket — allt
     som stack ut klipptes av en förälder. Det var värre än sidscroll:
     innehållet fanns, men gick varken att se eller trycka på.
     ═══════════════════════════════════════════════════════════ */
  @media (max-width: 767px) {

    /* ── Inloggningen ──
       .login-right låg fast på 480px bredvid en flexande vänsterspalt.
       På en 375px-skärm sköts formuläret halvvägs utanför kanten, så
       fälten gick inte att fylla i. Spalterna staplas i stället. */
    .login-view { flex-direction: column; }
    .login-left {
      padding: 56px 24px 24px;
      flex: 0 0 auto;
    }
    .login-right {
      width: 100%;
      border-left: none;
      border-top: 1px solid var(--border);
      padding: 32px 24px 56px;
    }
    /* Prickarna markerar steg i en berättelse som inte får plats på
       telefon — de blir en rad meningslösa punkter. */
    .login-dots { display: none; }
    .login-sub { max-width: none; }

    /* Topprraderna behöver ingen egen mobilregel: de tar
       --margin-primary i sin grundregel, och tokenet är 16px här. */

    /* Toppradens "Logga ut" bröt mitt itu till två rader. */
    .app-nav-logout { white-space: nowrap; min-height: 40px; display: inline-flex; align-items: center; }
    .app-nav-logo { font-size: var(--body-xxs); }

    /* Kundpanelen fyller skärmen på telefon; grundregeln ger den en
       spalt på bredare skärmar. */
    .app-body {
      flex-direction: column;
      height: auto;
      min-height: calc(100vh / var(--zoom, 1) - 60px);
      overflow: visible;
    }
    .app-main { padding: 28px var(--margin-primary); overflow-y: visible; }
    .app-sidebar { width: 100%; border-left: none; }

    /* Anslutningsprick, namn och roll bor numera i kundmenyn — de behöver
       ingen egen mobilregel och syns nu på alla skärmbredder. */

    /* ── Workshopens stegmeny ──
       Raden scrollar i sidled (overflow-x på .ws-progress-bar), men på
       telefon syns ingen scrollbar och inget antyder att det går. Smalare
       steg får fler att synas, och en tonad kant till höger visar att
       raden fortsätter. */
    .ws-progress-wrap { position: relative; }
    .ws-progress-wrap::after {
      content: '';
      position: absolute; top: 0; right: 0; bottom: 0; width: 28px;
      background: linear-gradient(to right, transparent, var(--bg));
      pointer-events: none;
    }
    .ws-dot { min-width: 54px; font-size: 10px; padding: 7px 4px 9px; }
    .ws-progress-bar { gap: 6px; }

    /* ── Tryckytor ──
       Under ~44px blir knappen svår att träffa med tummen. De här låg
       på 20–37px. */
    .ws-back-btn, .admin-back, .sidebar-new-btn {
      min-height: 44px; display: inline-flex; align-items: center;
    }
    .star-btn { min-width: 34px; min-height: 34px; font-size: 20px; }

    /* ── Workshopens navigationsrad ──
       Tillbaka och Nästa sida vid sida blir två klämda knappar; under
       varandra får de full bredd och hela tumytan. */
    .ws-nav-row { flex-direction: column-reverse; gap: 12px; padding: 20px 0 40px; }
    .ws-nav-row .btn { width: 100%; justify-content: center; }

    /* ── Innehållets sidmarginal ──
       Allt innehåll under toppraden tar samma --margin-primary som
       toppraden själv, så att rubriker och kort börjar i exakt samma
       kant som logotypen ovanför. Förut låg .ws-wrap på 24px och
       .disc-body på 18px mot toppradens 16px, och kanten hoppade
       mellan vyerna.

       Gäller bara mobil: på desktop är spalterna centrerade med
       max-width, och då bestämmer inte paddingen var kanten hamnar. */
    .ws-wrap, .disc-body, .disc-header-inner, .land-section {
      padding-inline: var(--margin-primary);
    }
    #r-deep-analysis-section { padding-inline: var(--margin-primary); }

    /* ── Resultatvyn ── */
    .result-grid { grid-template-columns: minmax(0, 1fr); }
    .sweetspot-zone { padding: 28px 22px; }

    /* ── Landningssidan ──
       Tjänstetaggarna radade sig utanför kanten. */
    .service-tags { flex-wrap: wrap; }
  }