/*
# ============================ #
#                              #
#   SSSSSSSS      K       K    #
#  S              K      K     #
#  S              K     K      #
#   SSSSSSSS      KKKKKK       #
#           S     K     K      #
#           S     K      K     #
#  SSSSSSSS       K       K    #
#                              #
# ============================ #
*/

/* ==========================================================
   MODERN STYLE

   Everything down to "Additions for the remaining pages" is
   taken from B3_Moas_Adapted_Layout_Cleaned/styles.css. The only
   changes: the page styles are nested inside
   html[data-style="modern"] (so they only apply when the modern
   style is selected, see style_switcher.js), and ":root" / "html"
   became "&" (= the <html> element itself).
   The @font-face rules stay outside, as they can't be nested.

   The file has three parts:
     1. The landing page (nav, hero, steps, why section, footer)
     2. "Additions for the remaining pages" (style switcher, login,
        registration, dashboard, support)
     3. "Modern counterparts of the app pages": the modern look of
        every class of styles.css that the Django templates use
========================================================== */

/* ==== Web fonts: Inter, Playfair Display ====
   Self-hosted in static/fonts/ (originally from Google Fonts, SIL Open
   Font License, see static/fonts/*-OFL.txt), so that visitors' browsers
   never contact Google's servers (GDPR). The fonts are variable fonts:
   one file per character set covers all font weights. */
/* cyrillic-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/inter-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/inter-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/inter-greek-ext.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/inter-greek.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/inter-vietnamese.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/inter-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/inter-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/inter-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/inter-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/inter-greek-ext.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/inter-greek.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/inter-vietnamese.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/inter-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/inter-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/inter-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/inter-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/inter-greek-ext.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/inter-greek.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/inter-vietnamese.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/inter-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/inter-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/playfair-display-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/playfair-display-vietnamese.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/playfair-display-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/playfair-display-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/playfair-display-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/playfair-display-vietnamese.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/playfair-display-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/playfair-display-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

html[data-style="modern"] {

  /* ==== Page styles ==== */
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

  & {
    --bg: #f5f3ef;
    --surface: #ffffff;
    --dark: #1c1c1a;
    --olive: #2e3328;
    --olive-btn: #2a3124;
    --text: #1c1c1a;
    --muted: #6b6960;
    --border: rgba(0,0,0,0.10);
    --radius: 8px;
  }

  & { scroll-behavior: smooth; }

  body {
    font-family: 'Inter', sans-serif;
    background: var(--bg);
    color: var(--text);
    font-size: 16px;
    line-height: 1.6;
  }

  /* NAV */
  nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 2.5rem;
    height: 60px;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 100;
  }

  .nav-logo {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 17px;
    letter-spacing: -0.3px;
    color: var(--dark);
    text-decoration: none;
  }

  .nav-links {
    display: flex;
    gap: 2rem;
    list-style: none;
  }

  .nav-links a {
    font-size: 14px;
    color: var(--muted);
    text-decoration: none;
    transition: color 0.2s;
  }
  .nav-links a:hover { color: var(--dark); }

  .nav-actions {
    display: flex;
    gap: 0.75rem;
    align-items: center;
  }

  .btn-ghost {
    font-size: 14px;
    color: var(--dark);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.4rem 0.75rem;
    border-radius: var(--radius);
    transition: background 0.2s;
  }
  .btn-ghost:hover { background: rgba(0,0,0,0.06); }

  .btn-primary {
    font-size: 14px;
    font-weight: 500;
    color: #fff;
    background: var(--olive-btn);
    border: none;
    padding: 0.45rem 1.1rem;
    border-radius: var(--radius);
    cursor: pointer;
    transition: background 0.2s;
  }
  .btn-primary:hover { background: #1e2319; }

  /* HERO */
  .hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 5rem 2.5rem 4rem;
  }

  .hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 12px;
    font-weight: 500;
    color: var(--muted);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 0.25rem 0.75rem;
    margin-bottom: 1.5rem;
    background: var(--surface);
  }

  .hero-eyebrow::before {
    content: '✦';
    font-size: 10px;
    color: var(--olive);
  }

  h1 {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 3.2rem;
    font-weight: 500;
    line-height: 1.12;
    letter-spacing: -0.5px;
    color: var(--dark);
    margin-bottom: 1.25rem;
  }

  .hero-sub {
    font-size: 15px;
    color: var(--muted);
    line-height: 1.7;
    max-width: 440px;
    margin-bottom: 2rem;
  }

  .hero-ctas {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    flex-wrap: wrap;
  }

  .btn-cta-primary {
    font-size: 15px;
    font-weight: 500;
    color: #fff;
    background: var(--olive-btn);
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: var(--radius);
    cursor: pointer;
    transition: background 0.2s;
  }
  .btn-cta-primary:hover { background: #1e2319; }

  .btn-cta-secondary {
    font-size: 15px;
    font-weight: 400;
    color: var(--dark);
    background: none;
    border: 1px solid rgba(0,0,0,0.18);
    padding: 0.75rem 1.5rem;
    border-radius: var(--radius);
    cursor: pointer;
    transition: background 0.2s;
  }
  .btn-cta-secondary:hover { background: rgba(0,0,0,0.04); }

  .hero-note {
    margin-top: 0.75rem;
    font-size: 13px;
    color: var(--muted);
    display: flex;
    align-items: center;
    gap: 0.35rem;
  }
  .hero-note::before { content: '✓'; color: var(--olive); }

  /* TUTORIAL VIDEO (YouTube embed). aspect-ratio keeps the player in 16:9
     as it shrinks; the iframe fills the wrapper, and overflow: hidden lets
     the rounded corners also clip the iframe. */
  .video-embed {
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 14px;
    overflow: hidden;
    background: #000;
  }
  .video-embed iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
  }

  /* "Click to load" preview of the tutorial video (_tutorial_video.html):
     our own preview image with a play button; the YouTube player only
     replaces it after a click */
  .video-consent {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
  }

  .video-consent img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: filter 0.2s;
  }

  .video-consent-play {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 68px;
    height: 68px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: var(--olive-btn);
    box-shadow: 0 8px 24px rgba(0,0,0,0.25);
    transition: transform 0.2s;
  }

  /* The play triangle, drawn with borders */
  .video-consent-play::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 54%;
    transform: translate(-50%, -50%);
    border-style: solid;
    border-width: 12px 0 12px 20px;
    border-color: transparent transparent transparent #ffffff;
  }

  .video-consent:hover img,
  .video-consent:focus-visible img {
    filter: brightness(0.9);
  }

  .video-consent:hover .video-consent-play,
  .video-consent:focus-visible .video-consent-play {
    transform: translate(-50%, -50%) scale(1.06);
  }

  /* "Plays via YouTube" label in the bottom left corner of the preview
     (the thumbnail has its own badge in the bottom right corner) */
  .video-consent-label {
    position: absolute;
    left: 12px;
    bottom: 12px;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    background: rgba(28,28,26,0.85);
    color: rgba(255,255,255,0.9);
    font-size: 11px;
    font-weight: 500;
    line-height: 1.4;
  }

  /* YOUR DATA: reuses the "How it works" look; three columns instead of four */
  .section-data {
    padding-top: 0;
  }

  .steps-grid.steps-grid-3 {
    grid-template-columns: repeat(3, 1fr);
  }

  .data-more {
    margin-top: 2.5rem;
    font-size: 13px;
    color: var(--muted);
  }

  .data-more a {
    color: var(--dark);
  }

  /* HOW IT WORKS */
  .section-how {
    max-width: 1100px;
    margin: 0 auto;
    padding: 5rem 2.5rem;
    text-align: center;
  }

  .section-label {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 0.75rem;
  }

  h2 {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 2.2rem;
    font-weight: 500;
    color: var(--dark);
    margin-bottom: 3rem;
    line-height: 1.2;
  }

  .steps-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    text-align: left;
  }

  .step-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(0,0,0,0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
  }

  .step-icon svg {
    width: 20px;
    height: 20px;
    stroke: var(--olive);
    stroke-width: 1.5;
    fill: none;
  }

  .step-num {
    font-size: 13px;
    font-weight: 500;
    color: var(--muted);
    margin-bottom: 0.4rem;
  }

  .step-title {
    font-size: 15px;
    font-weight: 500;
    color: var(--dark);
    margin-bottom: 0.5rem;
  }

  .step-desc {
    font-size: 13px;
    color: var(--muted);
    line-height: 1.65;
  }

  /* WHY SECTION */
  .section-why {
    background: var(--olive);
    color: #e8e5de;
    padding: 5rem 2.5rem;
  }

  .section-why-inner {
    max-width: 760px;
    margin: 0 auto;
  }

  .section-why .section-label {
    color: rgba(232,229,222,0.55);
  }

  .section-why h2 {
    color: #e8e5de;
    margin-bottom: 1.5rem;
  }

  .why-body {
    font-size: 15px;
    color: rgba(232,229,222,0.78);
    line-height: 1.8;
  }

  .why-body p + p { margin-top: 1.25rem; }

  .why-body strong {
    color: #e8e5de;
    font-weight: 500;
  }

  .why-note {
    margin-top: 2rem;
    padding: 1.25rem 1.5rem;
    background: rgba(255,255,255,0.07);
    border-radius: var(--radius);
    border-left: 3px solid rgba(232,229,222,0.3);
    font-size: 14px;
    color: rgba(232,229,222,0.85);
    font-style: italic;
  }

  /* CTA SECTION */
  .section-cta {
    max-width: 680px;
    margin: 0 auto;
    padding: 5rem 2.5rem;
    text-align: center;
  }

  .section-cta h2 { margin-bottom: 1rem; }
  .section-cta p { color: var(--muted); font-size: 15px; margin-bottom: 2rem; }

  .cta-actions {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    flex-wrap: wrap;
  }

  /* LOGOS */
  .logos-bar {
    border-top: 1px solid var(--border);
    padding: 2rem 2.5rem;
    text-align: center;
  }

  .logos-bar p { font-size: 13px; color: var(--muted); margin-bottom: 1.25rem; }

  .logos-row {
    display: flex;
    gap: 2.5rem;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
  }

  .logo-name {
    font-size: 16px;
    font-weight: 500;
    color: rgba(0,0,0,0.28);
    letter-spacing: -0.3px;
  }

  /* FOOTER */
  footer {
    border-top: 1px solid var(--border);
    padding: 1.5rem 2.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    color: var(--muted);
  }

  footer a { color: var(--muted); text-decoration: none; }
  footer a:hover { color: var(--dark); }

  .footer-links {
    display: flex;
    gap: 1.5rem;
  }

  @media (max-width: 900px) {
    .hero { grid-template-columns: 1fr; gap: 2rem; padding: 3rem 1.5rem; }
    h1 { font-size: 2.4rem; }
    .steps-grid { grid-template-columns: repeat(2, 1fr); }
    /* Three "Your data" cards would leave one card alone in a 2-column grid */
    .steps-grid.steps-grid-3 { grid-template-columns: 1fr; }
    nav { padding: 0 1.5rem; }
    .nav-links { display: none; }
  }

  @media (max-width: 600px) {
    .steps-grid { grid-template-columns: 1fr; }
    h1 { font-size: 2rem; }
    h2 { font-size: 1.7rem; }
  }


  /* ==========================================================
     Additions for the remaining pages
     (style switcher, login, registration, dashboard, support)
  ========================================================== */

  /* Markup that only belongs to the classic style (styled by
     styles.css) is hidden in the modern style */
  .layout-classic,
  .classic-only { display: none !important; }

  /* Page shell: keeps the footer at the bottom on short pages */
  .layout-modern {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
  }

  button, input, select { font-family: inherit; }

  a.btn-ghost,
  a.btn-primary,
  a.btn-cta-primary {
    display: inline-block;
    line-height: normal;
    text-decoration: none;
  }

  .btn-ghost.is-active { background: rgba(0,0,0,0.06); }

  button:focus-visible,
  a:focus-visible {
    outline: 2px solid var(--olive);
    outline-offset: 2px;
  }

  /* STYLE TOGGLE */
  .style-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 13px;
    color: var(--muted);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 0.35rem 0.8rem;
    margin-left: 0.25rem;
    cursor: pointer;
    transition: color 0.2s, border-color 0.2s;
  }
  .style-toggle:hover { color: var(--dark); border-color: rgba(0,0,0,0.22); }
  .style-toggle svg { width: 14px; height: 14px; flex: none; }

  /* NAV (logged in) */
  .nav-placeholder {
    font-size: 14px;
    color: var(--muted);
    cursor: default;
  }

  /* INNER PAGES */
  .page-main {
    flex: 1;
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 4rem 2.5rem 5rem;
  }

  .page-main--narrow { max-width: 860px; }

  .page-header { margin-bottom: 2.5rem; }
  .page-header--center { text-align: center; }

  .page-header h1 {
    font-size: 2.6rem;
    margin-bottom: 0.75rem;
  }

  .page-sub {
    font-size: 15px;
    color: var(--muted);
    line-height: 1.7;
    max-width: 560px;
  }
  .page-header--center .page-sub { margin: 0 auto; }

  /* AUTH CARD (login / registration) */
  .auth-card {
    max-width: 460px;
    margin: 0 auto;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 2.5rem;
  }

  .auth-card--wide { max-width: 760px; }

  .auth-card h2 {
    font-size: 2rem;
    margin-bottom: 0.5rem;
  }

  .auth-intro {
    font-size: 15px;
    color: var(--muted);
    margin-bottom: 1.75rem;
  }

  .form-remark {
    font-size: 13px;
    color: var(--muted);
    line-height: 1.6;
    background: var(--bg);
    border-left: 3px solid rgba(46,51,40,0.25);
    border-radius: var(--radius);
    padding: 0.75rem 1rem;
    margin: -0.75rem 0 1.75rem;
  }

  .auth-form {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
  }

  .auth-form--grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.1rem 1.25rem;
  }

  .field {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
  }

  .field-full { grid-column: 1 / -1; }

  .field label,
  .field-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--dark);
  }

  .field input,
  .field select {
    width: 100%;
    font-size: 14px;
    color: var(--text);
    background-color: var(--surface);
    border: 1px solid rgba(0,0,0,0.16);
    border-radius: var(--radius);
    padding: 0.65rem 0.8rem;
    transition: border-color 0.2s, box-shadow 0.2s;
  }

  .field input::placeholder { color: #a5a298; }

  .field select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 2rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%236b6960' stroke-width='1.4'%3E%3Cpath d='M3 4.5l3 3 3-3'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    cursor: pointer;
  }

  .field input:hover,
  .field select:hover { border-color: rgba(0,0,0,0.28); }

  .field input:focus,
  .field select:focus {
    outline: none;
    border-color: var(--olive);
    box-shadow: 0 0 0 3px rgba(46,51,40,0.12);
  }

  .field-row {
    display: grid;
    grid-template-columns: 140px minmax(0, 1fr);
    gap: 0.5rem;
  }

  .field-row--thirds { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .checkbox-field {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    font-size: 14px;
    color: var(--muted);
  }

  .checkbox-field input {
    width: 16px;
    height: 16px;
    margin-top: 0.25rem;
    accent-color: var(--olive-btn);
    flex: none;
  }

  .text-link,
  .checkbox-field a {
    color: var(--dark);
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-color: rgba(0,0,0,0.25);
    transition: text-decoration-color 0.2s;
  }
  .text-link:hover,
  .checkbox-field a:hover { text-decoration-color: currentColor; }

  .auth-actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.9rem;
    margin-top: 0.5rem;
  }

  .auth-actions .text-link {
    font-size: 13px;
    color: var(--muted);
    text-align: center;
  }

  .btn-block { width: 100%; }

  .auth-switch {
    margin-top: 1.75rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--border);
    font-size: 14px;
    color: var(--muted);
    text-align: center;
  }

  /* DASHBOARD (logged in home page) */
  .action-card {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    width: 100%;
    text-align: left;
    background: var(--olive);
    color: #e8e5de;
    border: none;
    border-radius: 14px;
    padding: 2rem 2.25rem;
    cursor: pointer;
    transition: background 0.2s, transform 0.2s;
  }
  .action-card:hover { background: #262a21; transform: translateY(-1px); }

  .action-card-icon {
    flex: none;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(255,255,255,0.08);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .action-card-icon svg {
    width: 24px;
    height: 24px;
    stroke: #e8e5de;
    stroke-width: 1.5;
    fill: none;
  }

  .action-card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
  }

  .action-card-eyebrow {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(232,229,222,0.55);
  }

  .action-card-title {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 1.6rem;
    font-weight: 500;
    line-height: 1.25;
    color: #e8e5de;
  }

  .action-card-desc {
    font-size: 14px;
    line-height: 1.6;
    color: rgba(232,229,222,0.78);
  }

  .action-card-arrow {
    flex: none;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #e8e5de;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s;
  }
  .action-card:hover .action-card-arrow { transform: translateX(3px); }

  .action-card-arrow svg {
    width: 18px;
    height: 18px;
    stroke: var(--olive);
    stroke-width: 1.8;
    fill: none;
  }

  .dashboard-steps {
    margin-top: 4rem;
    padding-top: 3rem;
    border-top: 1px solid var(--border);
  }

  .dashboard-steps h2 {
    font-size: 1.8rem;
    margin-bottom: 2.25rem;
  }

  .step.is-current .step-icon { background: var(--olive-btn); }
  .step.is-current .step-icon svg { stroke: #e8e5de; }
  .step.is-current .step-num { color: var(--dark); }

  /* SUPPORT */
  .info-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
  }

  .info-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 1.75rem;
  }

  .info-card-title {
    font-size: 15px;
    font-weight: 500;
    color: var(--dark);
    margin-bottom: 0.4rem;
  }

  .info-card-desc {
    font-size: 14px;
    color: var(--muted);
    line-height: 1.7;
  }

  .contact-card {
    margin-top: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
    background: var(--olive);
    border-radius: 14px;
    padding: 2rem 2.25rem;
  }

  .contact-card .section-label {
    color: rgba(232,229,222,0.55);
    margin-bottom: 0.25rem;
  }

  .contact-card-title {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 1.5rem;
    font-weight: 500;
    color: #e8e5de;
  }

  .btn-light {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 15px;
    font-weight: 500;
    color: var(--olive);
    background: #e8e5de;
    padding: 0.75rem 1.5rem;
    border-radius: var(--radius);
    text-decoration: none;
    transition: background 0.2s;
  }
  .btn-light:hover { background: #ffffff; }

  .btn-light svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    stroke-width: 1.5;
    fill: none;
  }

  @media (max-width: 900px) {
    /* Logged-in navigation: links move into a scrollable second row */
    nav.nav-app {
      flex-wrap: wrap;
      height: auto;
      padding-top: 0.75rem;
      row-gap: 0.25rem;
    }

    .nav-app .nav-links {
      display: flex;
      order: 3;
      width: 100%;
      gap: 1.5rem;
      overflow-x: auto;
      white-space: nowrap;
      padding: 0.5rem 0 0.75rem;
      scrollbar-width: none;
    }
    .nav-app .nav-links::-webkit-scrollbar { display: none; }

    .page-main { padding: 3rem 1.5rem 4rem; }
  }

  @media (max-width: 600px) {
    .style-toggle { padding: 0.4rem; margin-left: 0; }
    .style-toggle-label { display: none; }
    .auth-card { padding: 1.75rem 1.25rem; }
    .auth-form--grid { grid-template-columns: 1fr; }
    .page-header h1 { font-size: 2rem; }
    .action-card { flex-wrap: wrap; padding: 1.5rem; gap: 1rem; }
    .action-card-arrow { display: none; }
    .info-grid { grid-template-columns: 1fr; }
    .contact-card { padding: 1.5rem; }
    footer { flex-direction: column; gap: 0.75rem; }
  }


  /* ==========================================================
     Modern counterparts of the app pages
     (My Personal Info, My Bulk-CV, My Applications, Application
     detail, password reset, Terms of Service, ...)

     These pages share ONE markup with the classic style (so forms,
     element ids and the page scripts exist only once). This part
     therefore restyles the class names of styles.css. Since none of
     the classic rules apply in the modern style, it also has to
     re-implement their functional rules, e.g. ".hidden",
     ".cv-stage.active" or the loading overlays.

     Generic element rules are wrapped in :where(...) so that they
     have a low specificity and every class-based rule below wins.
  ========================================================== */

  & {
    --light: #e8e5de;
    --surface-muted: #efede8;
    --input-border: rgba(0,0,0,0.16);
    --radius-lg: 14px;
    --danger: #8a2525;
    --danger-bg: #fbeeee;
    --success: #2f6b3a;
    --success-bg: #eef5ef;
    --warning: #7a5c00;
    --warning-bg: #fbf3dc;
  }


  /* ---------- Functional rules ---------- */

  /* Toggled by the page scripts (class "hidden" / attribute "hidden"):
     must always win over any "display" set below */
  .hidden,
  [hidden] { display: none !important; }

  textarea { font-family: inherit; }

  [role="button"]:focus-visible {
    outline: 2px solid var(--olive);
    outline-offset: 2px;
  }


  /* ---------- Page shell ---------- */

  /* Keeps the footer at the bottom on short pages */
  body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
  }

  /* The classic title box and sidebar are replaced by the modern
     navigation bar (_modern_nav.html) */
  .top-title-box,
  .sidebar { display: none; }

  .container,
  .main,
  .content { display: block; }

  .container {
    flex: 1 0 auto;
    width: 100%;
  }

  /* The content column: same measure as ".page-main" */
  .entry-column,
  .home-status-section {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 4rem 2.5rem 5rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    font-size: 15px;
    line-height: 1.7;
  }

  :where(.entry-column, .home-status-section) h2 { margin-bottom: 0; }

  :where(.entry-column, .home-status-section) > .page-header { margin-bottom: 0.5rem; }

  /* Panel titles (e.g. "My Bulk-CV") are the page titles */
  .profile-panel > h2,
  .cv-information-panel > h2,
  .applications-panel > h2 {
    font-size: 2.6rem;
    line-height: 1.15;
  }

  /* Short description below a page title (modern style only) */
  .profile-panel > .page-sub,
  .cv-information-panel > .page-sub,
  .applications-panel > .page-sub { margin-top: -0.75rem; }

  /* On the app pages the subtitle may be as wide as the content column
     (i.e. as wide as the boxes below it), instead of the 560px of
     ".page-sub" above; it still wraps when the window gets narrower */
  :where(.entry-column, .home-status-section) .page-sub { max-width: none; }

  /* The navigation link of the current page (set in _modern_nav.html) */
  .nav-links a.is-active {
    color: var(--dark);
    font-weight: 500;
  }

  .back-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    justify-self: start;
    align-self: flex-start;
    font-size: 14px;
    color: var(--muted);
    text-decoration: none;
    transition: color 0.2s;
  }
  .back-link:hover { color: var(--dark); }


  /* ---------- Buttons ---------- */

  .main-action,
  .secondary-action,
  .entry-option {
    display: inline-block;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    text-align: center;
    text-decoration: none;
    padding: 0.65rem 1.25rem;
    border-radius: var(--radius);
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.2s;
  }

  .main-action {
    color: #fff;
    background: var(--olive-btn);
    border: 1px solid var(--olive-btn);
  }
  .main-action:hover {
    background: #1e2319;
    border-color: #1e2319;
  }

  .secondary-action,
  .entry-option {
    color: var(--dark);
    background: var(--surface);
    border: 1px solid rgba(0,0,0,0.18);
  }
  .secondary-action:hover,
  .entry-option:hover {
    background: #f0eee9;
    border-color: rgba(0,0,0,0.28);
  }

  .main-action:disabled,
  .main-action:disabled:hover,
  .secondary-action:disabled,
  .secondary-action:disabled:hover {
    color: #9a978e;
    background: var(--surface-muted);
    border-color: rgba(0,0,0,0.08);
    cursor: not-allowed;
    transform: none;
  }

  /* Big call-to-action buttons ("Getting Started", "Upload CV", ...)
     are shown as action cards (see ".action-card" above) */
  .cv-start-action {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    width: 100%;
    text-align: left;
    padding: 2rem 2.25rem;
    border-radius: var(--radius-lg);
  }

  .main-action.cv-start-action {
    color: var(--light);
    background: var(--olive);
    border-color: var(--olive);
  }
  .main-action.cv-start-action:hover {
    background: #262a21;
    border-color: #262a21;
  }

  .cv-start-action:hover { transform: translateY(-1px); }
  .cv-start-action:hover .action-card-arrow { transform: translateX(3px); }

  /* Light variant (e.g. "Skip upload, fill in manually instead") */
  .secondary-action.cv-start-action .action-card-icon { background: rgba(0,0,0,0.06); }
  .secondary-action.cv-start-action .action-card-icon svg { stroke: var(--olive); }
  .secondary-action.cv-start-action .action-card-eyebrow { color: var(--muted); }
  .secondary-action.cv-start-action .action-card-title { color: var(--dark); }
  .secondary-action.cv-start-action .action-card-desc { color: var(--muted); }
  .secondary-action.cv-start-action .action-card-arrow { background: var(--olive-btn); }
  .secondary-action.cv-start-action .action-card-arrow svg { stroke: #fff; }


  /* ---------- Form controls ---------- */

  :where(input[type="text"], input[type="email"], input[type="password"],
         input[type="tel"], input[type="url"], input[type="number"],
         input[type="search"], input:not([type]), select, textarea) {
    width: 100%;
    font-family: inherit;
    font-size: 14px;
    line-height: 1.5;
    color: var(--text);
    background-color: var(--surface);
    border: 1px solid var(--input-border);
    border-radius: var(--radius);
    padding: 0.65rem 0.8rem;
    transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s;
  }

  :where(textarea) {
    min-height: 110px;
    line-height: 1.6;
    resize: vertical;
  }

  :where(select) {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 2rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%236b6960' stroke-width='1.4'%3E%3Cpath d='M3 4.5l3 3 3-3'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    text-overflow: ellipsis;
    cursor: pointer;
  }

  :where(input, textarea)::placeholder { color: #a5a298; }

  :where(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), select, textarea):hover {
    border-color: rgba(0,0,0,0.28);
  }

  :where(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), select, textarea):focus {
    outline: none;
    border-color: var(--olive);
    box-shadow: 0 0 0 3px rgba(46,51,40,0.12);
  }

  /* Disabled fields are also the "read mode" of the Bulk-CV, so their
     text stays well readable */
  :where(input, select, textarea):disabled,
  :where(input, select, textarea):disabled:hover {
    color: #4a4843;
    -webkit-text-fill-color: #4a4843;
    background-color: #faf9f6;
    border-color: rgba(0,0,0,0.08);
    opacity: 1;
    cursor: not-allowed;
  }

  :where(input[type="checkbox"], input[type="radio"]) {
    width: 16px;
    height: 16px;
    accent-color: var(--olive-btn);
    cursor: pointer;
  }

  :where(input[type="file"]) {
    font-size: 14px;
    color: var(--muted);
  }

  :where(input[type="file"])::file-selector-button {
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    color: var(--dark);
    background: var(--surface);
    border: 1px solid rgba(0,0,0,0.18);
    border-radius: var(--radius);
    padding: 0.55rem 1rem;
    margin-right: 0.75rem;
    cursor: pointer;
    transition: background 0.2s;
  }
  :where(input[type="file"])::file-selector-button:hover { background: #f0eee9; }

  .form-field label,
  .login-form label,
  .cv-information-form label,
  .application-template-form label,
  .application-template-batch-form label,
  .cover-letter-edit-form label {
    font-size: 13px;
    font-weight: 500;
    line-height: 1.5;
    color: var(--dark);
  }

  .form-error {
    width: 100%;
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: var(--danger);
    background: var(--danger-bg);
    border: 1px solid rgba(138,37,37,0.18);
    border-radius: var(--radius);
    padding: 0.75rem 1rem;
  }

  .form-error ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .terms-consent a,
  .legal-document a,
  .application-detail-url {
    color: var(--dark);
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-color: rgba(0,0,0,0.25);
    transition: text-decoration-color 0.2s;
  }
  .terms-consent a:hover,
  .legal-document a:hover,
  .application-detail-url:hover { text-decoration-color: currentColor; }


  /* ---------- Login / Registration / Password reset ---------- */

  /* The panels are shown as the auth card of the modern style */
  .login-panel,
  .registration-panel {
    width: 100%;
    max-width: 460px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 2.5rem;
  }

  .registration-panel { max-width: 760px; }
  .password-reset-panel { max-width: 520px; }

  .login-panel > h2,
  .registration-panel > h2 {
    font-size: 2rem;
    line-height: 1.2;
    margin-bottom: 0.5rem;
  }

  .login-panel > p:not([class]),
  .registration-panel > p:not([class]) {
    color: var(--muted);
    margin-bottom: 1rem;
  }

  .login-panel strong { color: var(--dark); font-weight: 600; }

  .login-panel > .form-error { margin-bottom: 1rem; }
  .registration-panel > .form-remark { margin: -0.75rem 0 1.75rem; }
  .login-panel > .auth-switch,
  .registration-panel > .auth-switch { margin: 1.75rem 0 0; }

  .login-form {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
  }

  .login-form > label:not(:first-of-type) { margin-top: 0.75rem; }

  .login-actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.9rem;
    margin-top: 0.5rem;
  }

  .login-form .login-actions { margin-top: 1.25rem; }

  .login-form .login-actions .main-action {
    width: 100%;
    font-size: 15px;
    padding: 0.75rem 1.5rem;
  }

  /* Inside a form, the secondary action (e.g. "I don't know my
     password") is a quiet text link */
  .login-form .login-actions .secondary-action,
  .login-form .login-actions .secondary-action:hover {
    align-self: center;
    font-size: 13px;
    font-weight: 400;
    color: var(--muted);
    background: none;
    border: none;
    padding: 0;
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-color: rgba(0,0,0,0.25);
  }
  .login-form .login-actions .secondary-action:hover {
    color: var(--dark);
    text-decoration-color: currentColor;
  }

  .registration-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.1rem 1.25rem;
    width: 100%;
  }

  .form-field {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    min-width: 0;
  }

  /* Password label with an info button that shows the password rules
     on hover, tap or keyboard focus (Home_Register.html) */
  .password-label-row {
    /* The rules box is positioned relative to this row, so it starts at the
       field's left edge and never sticks out past it on narrow screens. */
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.4rem;
  }

  .password-rules {
    display: inline-flex;
  }

  .password-rules-button {
    width: 18px;
    height: 18px;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: var(--surface);
    color: var(--muted);
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    cursor: help;
    transition: background 0.2s, color 0.2s;
  }

  .password-rules-button:hover,
  .password-rules-button:focus-visible {
    background: var(--olive-btn);
    color: #ffffff;
  }

  .password-rules-tooltip {
    /* Hidden until the button is hovered or focused, see below */
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 10;
    width: min(300px, 100%);
    padding: 0.75rem 1rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
    font-size: 13px;
    line-height: 1.5;
    color: var(--text);
  }

  .password-rules-tooltip p {
    font-weight: 500;
  }

  .password-rules-tooltip ul {
    margin: 0.35rem 0 0 1.1rem;
  }

  .password-rules-tooltip .password-rules-note {
    margin-top: 0.5rem;
    font-weight: 400;
    color: var(--muted);
  }

  .password-rules:hover .password-rules-tooltip,
  .password-rules:focus-within .password-rules-tooltip {
    display: block;
  }

  .full-width { grid-column: 1 / -1; }

  .phone-number-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
    gap: 0.5rem;
  }

  .birth-date-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem;
  }

  .terms-consent {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    font-size: 14px;
    line-height: 1.5;
    color: var(--muted);
  }

  .terms-consent input {
    flex: none;
    margin-top: 0.2rem;
  }

  .form-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
  }

  .registration-panel .form-actions { margin-top: 0.5rem; }

  .registration-panel .form-actions .main-action {
    width: 100%;
    font-size: 15px;
    padding: 0.75rem 1.5rem;
  }


  /* ---------- My Personal Info ---------- */

  .profile-panel {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    width: 100%;
  }

  .profile-details {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 2rem;
  }

  /* Premium cards (logged-in home page and profile page) */
  .subscription-panel,
  .subscription-management {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    text-align: center;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 2rem;
  }

  .subscription-panel h2,
  .subscription-management h3 {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 1.6rem;
    font-weight: 500;
    line-height: 1.25;
    color: var(--dark);
    margin: 0;
  }

  .subscription-panel p,
  .subscription-management p {
    color: var(--muted);
    margin: 0;
  }

  .subscription-panel strong,
  .subscription-management strong { color: var(--dark); font-weight: 600; }

  .subscription-panel form,
  .subscription-management form {
    width: 100%;
    max-width: 360px;
    margin-top: 0.5rem;
  }

  .subscription-panel .main-action,
  .subscription-management .main-action { width: 100%; }

  /* "Delete Account" card at the bottom of the profile page. Same frame as
     the Premium card above, with red accents, so it is clearly a
     destructive action. */
  .account-deletion {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    text-align: center;
    background: var(--surface);
    border: 1px solid rgba(138,37,37,0.25);
    border-radius: var(--radius-lg);
    padding: 2rem;
  }

  .account-deletion h3 {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 1.6rem;
    font-weight: 500;
    line-height: 1.25;
    color: var(--danger);
    margin: 0;
  }

  .account-deletion > p:not(.form-error) {
    color: var(--muted);
    margin: 0;
  }

  /* Links in an error message (e.g. to the support page) keep its colour */
  .account-deletion .form-error a {
    color: inherit;
    text-decoration: underline;
  }

  .account-deletion-confirm {
    width: 100%;
    max-width: 360px;
    margin-top: 0.5rem;
  }

  /* The <summary> works as the "Delete account" button: hide the arrow */
  .account-deletion-confirm summary {
    display: block;
    list-style: none;
    cursor: pointer;
  }

  .account-deletion-confirm summary::-webkit-details-marker {
    display: none;
  }

  /* Once opened, the "Delete account" button is replaced by the form */
  .account-deletion-confirm[open] summary {
    display: none;
  }

  .account-deletion-confirm form {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    text-align: left;
  }

  .account-deletion-confirm label {
    font-size: 13px;
    font-weight: 500;
    color: var(--dark);
  }

  .account-deletion-confirm input {
    width: 100%;
    padding: 0.7rem 0.9rem;
    border: 1px solid var(--input-border);
    border-radius: var(--radius);
    background: var(--surface);
    font-family: 'Inter', sans-serif;
    font-size: 15px;
  }

  .main-action.danger-action {
    width: 100%;
    text-align: center;
    color: #fff;
    background: var(--danger);
    border-color: var(--danger);
  }

  .main-action.danger-action:hover,
  .main-action.danger-action:focus-visible {
    background: #6e1d1d;
    border-color: #6e1d1d;
  }

  /* Document-language preference card (profile page) */
  .document-language-settings {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 2rem;
  }

  .document-language-settings h3 {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 1.6rem;
    font-weight: 500;
    line-height: 1.25;
    color: var(--dark);
    margin: 0;
  }

  .document-language-option {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    color: var(--dark);
    cursor: pointer;
  }

  .document-language-option input {
    flex: none;
    margin-top: 0.25rem;
  }

  .document-language-hint {
    font-size: 14px;
    color: var(--muted);
    margin: 0;
  }


  /* ---------- Logged-in home page ---------- */

  .home-status-panel {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
  }

  .home-status-actions {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
  }

  .job-ad-search {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
  }

  .job-ad-search textarea { min-height: 160px; }
  .job-ad-search .job-ad-search-results { min-height: 360px; }
  .job-ad-search .main-action { width: 100%; }

  /* The "How it works" steps below the action card */
  .home-status-section > .dashboard-steps { margin-top: 2.5rem; }


  /* ---------- My Bulk-CV ---------- */

  .cv-information-panel {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    width: 100%;
  }

  /* Template selection */
  .cv-template-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.25rem;
  }

  .cv-template-card {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    transition: border-color 0.2s, box-shadow 0.2s;
  }
  .cv-template-card:hover {
    border-color: rgba(0,0,0,0.2);
    box-shadow: 0 6px 20px rgba(0,0,0,0.05);
  }

  .cv-template-card h3 {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 1.35rem;
    font-weight: 500;
    line-height: 1.25;
    color: var(--dark);
  }

  .cv-template-card p {
    font-size: 14px;
    line-height: 1.65;
    color: var(--muted);
  }

  /* Keeps the buttons of all cards on one line */
  .cv-template-card form {
    margin-top: auto;
    padding-top: 0.5rem;
  }

  .cv-template-card form .main-action { width: 100%; }

  .cv-template-preview-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .cv-template-preview-links .secondary-action {
    flex: 1 1 0;
    font-size: 13px;
    padding: 0.45rem 0.6rem;
    white-space: nowrap;
  }

  /* Upload step / placeholder */
  .cv-placeholder-panel {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    width: 100%;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 2rem;
  }

  .cv-placeholder-panel > h3 {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 1.6rem;
    font-weight: 500;
    line-height: 1.25;
    color: var(--dark);
  }

  .cv-placeholder-panel > p {
    max-width: 640px;
    color: var(--muted);
  }

  .cv-empty-actions,
  .cv-upload-slot {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
  }

  .cv-upload-box {
    width: 100%;
    background: var(--bg);
    border: 1.5px dashed rgba(0,0,0,0.18);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
  }

  /* Highlight while a file is dragged over the upload box (set by JS). */
  .cv-upload-box.is-dragover {
    border-color: var(--olive);
    background: var(--surface-muted);
  }

  .output-upload-form { width: 100%; }

  .output-upload-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
  }

  .cv-upload-box input[type="file"] {
    flex: 1;
    min-width: 0;
  }

  .cv-upload-box .main-action { white-space: nowrap; }

  .cv-upload-box .cv-upload-hint {
    margin-top: 0.75rem;
    font-size: 13px;
    line-height: 1.6;
    color: var(--muted);
  }

  .cv-upload-file-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.75rem;
  }

  .cv-upload-file-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.55rem 0.75rem;
  }

  .cv-upload-file-name {
    font-size: 14px;
    overflow-wrap: anywhere;
  }

  .cv-upload-file-remove {
    flex: none;
    width: 26px;
    height: 26px;
    font-family: inherit;
    font-size: 15px;
    line-height: 1;
    color: var(--dark);
    background: rgba(0,0,0,0.06);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.2s;
  }
  .cv-upload-file-remove:hover { background: rgba(0,0,0,0.12); }

  .back-to-template-form { width: 100%; }

  /* Wizard: progress bar and section tabs */
  .cv-information-form {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    width: 100%;
  }

  .cv-progress {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
  }

  .cv-progress-track {
    width: 100%;
    height: 4px;
    background: rgba(0,0,0,0.08);
    border-radius: 999px;
    overflow: hidden;
  }

  /* The width is set by the page script */
  .cv-progress-fill {
    width: 0;
    height: 100%;
    background: var(--olive);
    border-radius: inherit;
    transition: width 0.3s ease;
  }

  .cv-progress-steps {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 0.5rem;
  }

  .cv-progress-step {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    width: 100%;
    height: 100%;
    min-height: 44px;
    text-align: left;
    font-family: inherit;
    font-size: 13px;
    line-height: 1.3;
    color: var(--muted);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
  }
  .cv-progress-step:hover {
    color: var(--dark);
    border-color: rgba(0,0,0,0.22);
  }

  .cv-progress-step.completed {
    color: var(--dark);
    background: #ebe9e3;
  }
  .cv-progress-step.completed::before {
    content: '✓';
    font-size: 12px;
    color: var(--olive);
  }

  .cv-progress-step.active {
    font-weight: 500;
    color: #fff;
    background: var(--olive-btn);
    border-color: var(--olive-btn);
  }

  /* Wizard: one section ("stage") is shown at a time */
  .cv-stage {
    display: none;
    flex-direction: column;
    gap: 1.1rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 2rem;
  }

  .cv-stage.active { display: flex; }

  .cv-stage h3 {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 1.6rem;
    font-weight: 500;
    line-height: 1.25;
    color: var(--dark);
  }

  .cv-stage-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
  }

  .cv-stage-header h3 { margin: 0; }

  .cv-none-toggle {
    flex-shrink: 0;
    font-size: 13px;
    padding: 0.4rem 0.9rem;
  }

  /* Shown only once a section has been folded away via "None" */
  .cv-section-none-message {
    display: none;
    font-size: 14px;
    font-style: italic;
    color: var(--muted);
    background: var(--bg);
    border-radius: var(--radius);
    padding: 0.75rem 1rem;
  }

  .cv-section-none .cv-entry-list,
  .cv-section-none .cv-entry-controls,
  .cv-section-none .cv-link-fields { display: none; }

  .cv-section-none .cv-section-none-message { display: block; }

  /* Entries of a section */
  .cv-entry-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  .cv-entry {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
  }

  /* Entries with several fields (education, experience, publications) */
  .cv-entry:has(.education-entry-fields) {
    gap: 0.9rem;
    background: var(--bg);
    border-radius: 10px;
    padding: 1.25rem;
  }

  .cv-entry h4 {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
  }

  .education-entry-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem 1.25rem;
    width: 100%;
  }

  .education-entry-fields label {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    min-width: 0;
  }

  .education-entry-fields label:has(textarea) { grid-column: 1 / -1; }

  /* Online links */
  .cv-link-fields {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
  }

  .cv-link-fields > label {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
  }

  .other-links-field {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: 100%;
  }

  #other-url-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    width: 100%;
  }

  /* "-" / "+" buttons */
  .cv-entry-controls {
    display: flex;
    gap: 0.5rem;
  }

  .cv-entry-control {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    font-family: inherit;
    font-size: 18px;
    line-height: 1;
    color: var(--dark);
    background: var(--surface);
    border: 1px solid rgba(0,0,0,0.18);
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.2s;
  }
  .cv-entry-control:hover { background: #f0eee9; }

  .cv-entry-control:disabled,
  .cv-entry-control:disabled:hover {
    opacity: 0.45;
    background: var(--surface);
    cursor: default;
  }

  /* Read mode: all "-" / "+" buttons are hidden, so is their row */
  .cv-entry-controls:not(:has(> :not(.hidden))) { display: none; }

  .cv-entry-message {
    min-height: 20px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--danger);
  }

  .cv-entry-message:empty { min-height: 0; }

  /* Back / Edit / Save row */
  .cv-stage-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
  }

  .cv-bottom-action { min-width: 190px; }

  .cv-constant-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 40px;
    font-size: 13px;
    font-weight: 500;
    color: var(--dark);
    background: var(--surface);
    border: 1px solid rgba(0,0,0,0.18);
    border-radius: var(--radius);
    padding: 0.5rem 0.9rem;
    cursor: pointer;
  }

  .cv-constant-checkbox input { margin: 0; }

  .cv-constant-checkbox:has(input:disabled) {
    color: var(--muted);
    background: var(--surface-muted);
    border-color: rgba(0,0,0,0.08);
    cursor: not-allowed;
  }

  /* "Clear CV" / "Switch CV-Template" */
  .cv-danger-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0.75rem;
    width: 100%;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border);
  }

  .clear-cv-form {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    width: 100%;
  }

  .cv-danger-actions .clear-cv-form {
    width: auto;
    flex: 0 1 auto;
  }

  /* Confirmation boxes ("Are you certain ...?") */
  .clear-cv-confirmation {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    max-width: 560px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: 0 10px 30px rgba(0,0,0,0.06);
    padding: 1.25rem 1.4rem;
  }

  .clear-cv-confirmation p {
    font-size: 14px;
    line-height: 1.6;
    color: var(--dark);
  }

  .clear-cv-confirmation-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
  }


  /* ---------- My Applications ---------- */

  .applications-panel {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    width: 100%;
  }

  .application-template-options {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
  }

  /* "No applications created yet." */
  .application-template-options > p {
    flex-basis: 100%;
    text-align: center;
    color: var(--muted);
    border: 1.5px dashed rgba(0,0,0,0.16);
    border-radius: var(--radius-lg);
    padding: 2rem;
  }

  .applications-selection-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding-bottom: 2rem;
  }

  /* The list: details | applied | compatibility. The columns of the
     header line up with the columns of the cards below it. */
  .applications-list {
    --application-card-padding: 1.25rem;
    --application-applied-column-width: 90px;
    --application-rating-column-width: 120px;
    --application-rating-visible-width: calc(var(--application-rating-column-width) + var(--application-card-padding));
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }

  .applications-list-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--application-applied-column-width) var(--application-rating-visible-width);
    align-items: end;
    gap: 1.25rem;
  }

  .applications-list-applied-heading,
  .applications-list-rating-heading {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1.3;
    text-align: center;
    color: var(--muted);
  }

  .applications-list-applied-heading { grid-column: 2; }
  .applications-list-rating-heading { grid-column: 3; }

  .application-card {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--application-card-padding);
  }

  .application-card-button {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--application-applied-column-width) var(--application-rating-column-width);
    align-items: stretch;
    gap: 1.25rem;
    width: 100%;
    text-align: left;
    color: inherit;
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
  }
  .application-card-button:hover {
    border-color: rgba(0,0,0,0.2);
    box-shadow: 0 6px 20px rgba(0,0,0,0.05);
  }

  .application-card-button.is-selected {
    background: #fbfaf7;
    border-color: var(--olive);
    box-shadow: 0 0 0 1px var(--olive);
  }

  .application-card-details {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    min-width: 0;
  }

  .application-card h3 {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--dark);
    overflow-wrap: anywhere;
  }

  .application-card p,
  .application-card a {
    font-size: 14px;
    line-height: 1.5;
    color: var(--muted);
    overflow-wrap: anywhere;
  }

  /* Queued / running / failed background generation */
  .application-card .application-generation-status {
    align-self: flex-start;
    font-size: 12px;
    font-weight: 500;
    color: var(--warning);
    background: var(--warning-bg);
    border-radius: 999px;
    padding: 0.15rem 0.65rem;
  }

  .application-card .application-generation-status-error {
    color: var(--danger);
    background: var(--danger-bg);
  }

  .application-card-applied {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: calc(var(--application-card-padding) * -1) 0;
    padding: var(--application-card-padding) 0;
    border-left: 1px solid var(--border);
  }

  .application-applied-checkbox {
    width: 20px;
    height: 20px;
    margin: 0;
  }

  .application-card-rating {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    margin: calc(var(--application-card-padding) * -1) calc(var(--application-card-padding) * -1) calc(var(--application-card-padding) * -1) 0;
    padding: var(--application-card-padding);
    border-left: 1px solid var(--border);
    text-align: center;
  }

  .application-card-rating-value {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 1.6rem;
    font-weight: 500;
    line-height: 1;
    color: var(--dark);
  }

  .application-card-rating-empty .application-card-rating-value { color: #a5a298; }

  /* "Detailed view" / "Delete": floats at the bottom of the window
     while the list is scrolled */
  .application-selection-actions {
    position: sticky;
    bottom: 1.25rem;
    z-index: 50;
    align-self: flex-start;
    gap: 0.5rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: 0 12px 32px rgba(0,0,0,0.12);
    padding: 0.6rem;
  }

  /* Forms to create one / a batch of application-templates */
  .application-template-form,
  .application-template-batch-form {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    width: 100%;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 2rem;
  }

  .application-template-form textarea,
  .application-template-batch-form textarea { min-height: 180px; }

  #job-advertisement-text,
  .application-template-batch-form textarea[name="batch_job_advertisement_text"] { min-height: 320px; }

  .url-input-row {
    display: flex;
    align-items: stretch;
    gap: 0.5rem;
  }

  .url-input-row input {
    flex: 1;
    min-width: 0;
  }

  .url-input-row.is-disabled input,
  .url-input-row.is-disabled button {
    color: #9a978e;
    background-color: var(--surface-muted);
    border-color: rgba(0,0,0,0.08);
    cursor: not-allowed;
  }

  .job-advertisement-url-input::placeholder { font-size: 13px; }

  .manual-metadata-button { align-self: flex-start; }

  .manual-metadata-fields {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
  }

  /* A field with its "Looks good" button next to it */
  .application-metadata-field {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 0.75rem;
  }

  .metadata-confirm-button.is-confirmed,
  .batch-metadata-confirm-button.is-confirmed,
  .metadata-confirm-button.is-confirmed:hover,
  .batch-metadata-confirm-button.is-confirmed:hover {
    color: var(--success);
    background: var(--success-bg);
    border-color: rgba(47,107,58,0.3);
  }

  .metadata-confirm-button.is-confirmed::before,
  .batch-metadata-confirm-button.is-confirmed::before { content: '✓ '; }

  .batch-url-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  .batch-url-row { display: block; }

  .batch-url-actions {
    display: flex;
    gap: 0.5rem;
    align-self: flex-start;
  }

  .batch-url-actions button {
    width: 40px;
    height: 40px;
    padding: 0;
    font-size: 18px;
    line-height: 1;
    border-radius: 50%;
  }

  .batch-metadata-review-list {
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
  }

  .batch-metadata-review-item {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border);
  }

  .batch-metadata-review-item:first-child {
    padding-top: 0;
    border-top: 0;
  }

  .batch-metadata-review-item h3 {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 1.4rem;
    font-weight: 500;
    color: var(--dark);
  }

  /* "Generate ..." button next to "Everything looks good" */
  .review-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
  }

  .review-actions .main-action {
    justify-self: stretch;
    min-width: 0;
    white-space: normal;
  }

  .review-actions .approve-all-metadata-button { justify-self: end; }


  /* ---------- Loading overlays ---------- */

  .scrape-loading-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: grid;
    place-items: center;
    padding: 1.5rem;
    /* No "backdrop-filter: blur(...)" here on purpose: without GPU
       acceleration, blurring the whole window drops the spinner
       animation to ~14 FPS (measured at 1920x1080) */
    background: rgba(245,243,239,0.9);
  }

  .scrape-loading-box {
    display: flex;
    align-items: center;
    gap: 1rem;
    width: min(100%, 480px);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: 0 24px 60px rgba(0,0,0,0.14);
    padding: 1.4rem 1.6rem;
  }

  .scrape-loading-copy {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 0.75rem;
    min-width: 0;
  }

  .scrape-loading-box p {
    font-size: 15px;
    line-height: 1.5;
    color: var(--dark);
  }

  .scrape-loading-progress {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
  }

  .scrape-loading-progress-track {
    width: 100%;
    height: 6px;
    background: rgba(0,0,0,0.08);
    border-radius: 999px;
    overflow: hidden;
  }

  /* The width is set by the page script */
  .scrape-loading-progress-fill {
    width: 0;
    height: 100%;
    background: var(--olive);
    border-radius: inherit;
    transition: width 0.3s ease;
  }

  .scrape-loading-progress p {
    font-size: 13px;
    color: var(--muted);
  }

  .scrape-loading-spinner {
    flex: none;
    width: 28px;
    height: 28px;
    border: 3px solid rgba(0,0,0,0.1);
    border-top-color: var(--olive);
    border-radius: 50%;
    animation: modern-spin 0.8s linear infinite;
  }


  /* ---------- Application detail ---------- */

  /* Job-Title | Company Name | Application Status in one row,
     everything else across the full width */
  .application-detail-panel {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
    width: 100%;
    padding-bottom: 2rem;
  }

  .application-detail-panel > * { grid-column: 1 / -1; }
  .application-detail-panel > .application-detail-field { grid-column: auto; }
  .application-detail-panel > .application-detail-field--wide { grid-column: 1 / -1; }

  .application-detail-field,
  .application-detail-description {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0;
  }

  .application-detail-heading {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1.4;
    color: var(--muted);
  }

  .application-detail-box {
    flex: 1;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.6;
    color: var(--dark);
    overflow-wrap: anywhere;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1rem 1.25rem;
  }

  /* Long job descriptions scroll inside their box */
  .application-detail-box.application-description-text {
    max-height: 480px;
    overflow-y: auto;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.75;
    color: #3d3b36;
    white-space: normal;
  }

  .application-detail-box label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
  }

  .application-detail-applied-checkbox {
    width: 18px;
    height: 18px;
    margin: 0;
  }

  .application-detail-url { font-weight: 400; }

  /* Action buttons (left) and role-fit evaluation (right) */
  .application-tailored-section {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    margin-top: 0.75rem;
  }

  /* Always side by side (except on phone-sized screens): the button
     column narrows down to 200px before the evaluation would move below
     it. "stretch" gives both columns the height of the row. */
  .application-tailored-dashboard {
    display: grid;
    grid-template-columns: clamp(200px, 30%, 300px) minmax(0, 1fr);
    align-items: stretch;
    gap: 1.25rem;
    width: 100%;
  }

  .application-detail-actions {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    width: 100%;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
  }

  .tailored-action-row {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    width: 100%;
  }

  /* e.g. the download row, before any document has been generated */
  .tailored-action-row:not(:has(*)) { display: none; }

  /* A divider after each group of buttons, but only if something follows */
  .tailored-action-group-end + .tailored-action-row:has(*) {
    margin-top: 0.4rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
  }

  .tailored-action-row form { width: 100%; }

  .tailored-action-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 44px;
    text-align: center;
  }

  .tailored-document-toggle { align-self: stretch; }

  /* "contain: size" keeps the evaluation's own length out of the row
     height, so the row is exactly as tall as the button card; the
     evaluation fills that height and scrolls inside if it is longer. */
  .role-fit-column {
    min-width: 0;
    contain: size;
  }

  .role-fit-column > * {
    height: 100%;
    overflow-y: auto;
  }

  .role-fit-availability {
    margin: 0;
    font-size: 14px;
    color: var(--muted);
  }

  .application-tailored-section .role-fit-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1.7;
    border: 1.5px dashed rgba(0,0,0,0.16);
    border-radius: var(--radius-lg);
    padding: 2rem;
  }

  .role-fit-result {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
    width: 100%;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.75rem;
  }

  .role-fit-score {
    display: flex;
    align-items: baseline;
    justify-content: center;
    flex: none;
    min-width: 96px;
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 2.4rem;
    font-weight: 500;
    line-height: 1;
    color: var(--light);
    background: var(--olive);
    border-radius: 12px;
    padding: 1rem 0.9rem;
  }

  .role-fit-score span {
    margin-left: 0.15rem;
    font-family: 'Inter', sans-serif;
    font-size: 0.95rem;
    color: rgba(232,229,222,0.6);
  }

  .role-fit-copy {
    flex: 1;
    min-width: 0;
  }

  .role-fit-copy h3 {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 1.3;
    color: var(--dark);
    margin: 0 0 1rem;
  }

  .role-fit-lists {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
  }

  .role-fit-list h4 {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
  }

  .role-fit-strengths h4 { color: var(--success); }
  .role-fit-concerns h4 { color: var(--danger); }

  .role-fit-list ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  .role-fit-list li {
    position: relative;
    padding-left: 1.4rem;
    font-size: 14px;
    line-height: 1.65;
    color: #3d3b36;
  }

  .role-fit-list li::before {
    position: absolute;
    left: 0;
    font-weight: 500;
  }

  .role-fit-strengths li::before { content: '✓'; color: var(--success); }
  .role-fit-concerns li::before { content: '–'; color: var(--danger); }

  /* Tailored CV / cover letter (opened with the buttons on the left) */
  .application-tailored-fields {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
  }

  .tailored-cv-panel,
  .tailored-cover-letter-panel {
    margin-top: 0.5rem;
    padding-top: 2rem;
    border-top: 1px solid var(--border);
  }

  .tailored-cv-panel > h2,
  .tailored-cover-letter-panel > h2 { font-size: 1.8rem; }

  .tailored-cv-panel .cv-progress-steps { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); }

  /* The cover letter is shown as a sheet of paper */
  .cover-letter-preview {
    width: min(100%, 780px);
    margin: 0 auto;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 16px;
    line-height: 1.7;
    color: #26251f;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    box-shadow: 0 18px 40px rgba(0,0,0,0.07);
    padding: 3rem 3.25rem;
  }

  .cover-letter-preview p { margin: 0 0 1.15em; }

  .cover-letter-header {
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
    margin-bottom: 2rem;
  }

  .cover-letter-sender {
    align-self: flex-end;
    font-style: normal;
    text-align: right;
  }

  .cover-letter-recipient { min-height: 2.5em; }

  .cover-letter-body p:last-child { margin-bottom: 0; }

  .cover-letter-preview .cover-letter-signoff {
    margin-top: 2.5em;
    margin-bottom: 0;
  }

  .cover-letter-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
  }

  .cover-letter-edit-form {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }

  .cover-letter-edit-form .cover-letter-actions { justify-content: flex-start; }

  .cover-letter-edit-form textarea {
    min-height: 520px;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 16px;
    line-height: 1.65;
    padding: 1.25rem;
  }

  .cover-letter-empty-state {
    font-size: 14px;
    text-align: center;
    color: var(--muted);
    border: 1.5px dashed rgba(0,0,0,0.16);
    border-radius: var(--radius-lg);
    padding: 2rem;
  }

  /* Confirmation pop-over (e.g. "Are you sure ... override ...?") */
  .tailored-cv-confirmation {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 0.75rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: 0 12px 32px rgba(0,0,0,0.1);
    padding: 1.1rem 1.25rem;
  }

  .tailored-cv-confirmation p {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: var(--dark);
  }

  .tailored-cv-confirmation-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .tailored-cv-confirmation-actions button { flex: 1 1 0; }

  /* Questions to the AI */
  .application-chat-section {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    margin-top: 1.5rem;
    padding-top: 2.5rem;
    border-top: 1px solid var(--border);
  }

  .application-chat-section h2 {
    font-size: 1.8rem;
    margin: 0;
  }

  .application-chat-history {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  .application-chat-exchange,
  .application-chat-question-row {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
  }

  .application-chat-exchange { position: relative; }

  .application-chat-exchange label,
  .application-chat-question-row label {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
  }

  .application-chat-question-text {
    margin: 0 2rem 0 0;
    white-space: pre-wrap;
    font-size: 15px;
    line-height: 1.6;
    color: var(--dark);
    background: var(--bg);
    border-radius: var(--radius);
    padding: 0.75rem 1rem;
  }

  .application-chat-answer,
  .application-chat-question-input { min-height: 110px; }

  .application-chat-answer { min-height: 180px; }

  .application-chat-exchange .main-action { align-self: flex-start; }

  /* Small "x" in the upper right corner of a saved question */
  .application-chat-delete-button {
    position: absolute;
    top: 0.9rem;
    right: 0.9rem;
    width: 28px;
    height: 28px;
    padding: 0;
    font-family: inherit;
    font-size: 17px;
    line-height: 1;
    color: var(--muted);
    background: rgba(0,0,0,0.05);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
  }
  .application-chat-delete-button:hover {
    color: var(--dark);
    background: rgba(0,0,0,0.1);
  }

  /* Its confirmation opens right below the "x" */
  .application-chat-delete-confirmation.tailored-cv-confirmation {
    position: absolute;
    top: 3.1rem;
    right: 0.9rem;
    z-index: 1;
    width: 220px;
    margin-top: 0;
    gap: 0.6rem;
    padding: 0.9rem;
  }

  .application-chat-delete-confirmation.tailored-cv-confirmation p { font-size: 13px; }

  .application-chat-delete-confirmation .tailored-cv-confirmation-actions { flex-direction: column; }

  .application-chat-delete-confirmation .tailored-cv-confirmation-actions button { width: 100%; }

  .application-chat-question-controls {
    display: flex;
    gap: 0.5rem;
  }

  .application-chat-question-controls .application-chat-ask-question { flex: 1; }

  .application-chat-section form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  .application-chat-section small {
    font-size: 12px;
    color: var(--muted);
  }


  /* ---------- Support (modern-only content) ---------- */

  .support-modern {
    width: 100%;
    max-width: 860px;
    margin: 0 auto;
  }


  /* ---------- Terms of Service ---------- */

  .legal-document {
    width: 100%;
    max-width: 760px;
    margin: 0 auto;
    line-height: 1.75;
  }

  .legal-document h1 {
    font-size: 2.6rem;
    margin-bottom: 0.75rem;
  }

  .legal-document h2 {
    font-size: 1.35rem;
    line-height: 1.3;
    margin: 2.25rem 0 0.6rem;
  }

  .legal-document p,
  .legal-document li {
    font-size: 15px;
    color: #3d3b36;
  }

  .legal-document p + p { margin-top: 0.75rem; }

  .legal-document ul {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-top: 0.5rem;
    padding-left: 1.25rem;
  }

  .legal-document strong {
    color: var(--dark);
    font-weight: 600;
  }


  /* ---------- Responsive ---------- */

  @media (max-width: 1250px) {
    .cv-template-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }

  @media (max-width: 900px) {
    .entry-column,
    .home-status-section { padding: 3rem 1.5rem 4rem; }

    .application-detail-panel { grid-template-columns: 1fr; }
  }

  @media (max-width: 600px) {
    .profile-panel > h2,
    .cv-information-panel > h2,
    .applications-panel > h2 { font-size: 2rem; }

    .login-panel,
    .registration-panel { padding: 1.75rem 1.25rem; }

    .registration-form,
    .education-entry-fields,
    .cv-template-grid { grid-template-columns: 1fr; }

    .profile-details,
    .cv-placeholder-panel,
    .cv-stage,
    .application-template-form,
    .application-template-batch-form,
    .subscription-panel,
    .subscription-management,
    .document-language-settings { padding: 1.25rem; }

    .cv-progress-steps,
    .tailored-cv-panel .cv-progress-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .cv-start-action {
      flex-wrap: wrap;
      gap: 1rem;
      padding: 1.5rem;
    }
    .cv-start-action .action-card-arrow { display: none; }

    .applications-list {
      --application-card-padding: 0.9rem;
      --application-applied-column-width: 52px;
      --application-rating-column-width: 84px;
    }

    .applications-list-header,
    .application-card-button { gap: 0.75rem; }

    .applications-list-applied-heading,
    .applications-list-rating-heading {
      font-size: 10px;
      letter-spacing: 0.04em;
    }

    .application-card-rating-value { font-size: 1.25rem; }

    .application-metadata-field,
    .review-actions { grid-template-columns: 1fr; }

    .review-actions .approve-all-metadata-button { justify-self: stretch; }

    .role-fit-result {
      flex-direction: column;
      padding: 1.25rem;
    }

    /* The evaluation moves below the buttons and takes the height it
       needs again */
    .application-tailored-dashboard { grid-template-columns: 1fr; }
    .role-fit-column { contain: none; }
    .role-fit-column > * { height: auto; }

    .cover-letter-preview { padding: 1.75rem 1.25rem; }
  }

}


/* Keyframes can't be nested, so they stay outside
   (spinner of the loading overlays) */
@keyframes modern-spin {
  to { transform: rotate(360deg); }
}