/* =========================================================

   CAREERGAP DESIGN SYSTEM

========================================================= */

:root {

    /* Dashboard navigation reference palette.

       Scoped to the navigation shell so existing tokens keep their
       current values and unrelated components are not recoloured. */

    --ref-page: #F8F4E2;

    --ref-green-dark: #315D3B;

    --ref-green-primary: #2E6038;

    --ref-green-pale: #EDF0E5;

    --ref-green-border: #D7DCCB;

    --butter: #FFF8E1;

    --butter-deep: #F8F0D4;

    --pistachio: #C6D8A7;

    --pistachio-light: #E8EFD9;

    --pistachio-soft: #F1F4E7;

    --olive: #4B6043;

    --olive-dark: #354832;

    --olive-soft: #65775D;

    --cream: #FFFCF2;

    --white: #FFFFFF;

    --border: rgba(75, 96, 67, 0.14);

    --shadow-soft:

        0 12px 30px rgba(75, 96, 67, 0.08);

    --shadow-pop:

        0 18px 45px rgba(75, 96, 67, 0.12);

    --navbar-bg: rgba(255, 248, 225, 0.92);

    /* Floating frosted bar + the active-tab lift. Both are redefined in
       the dark theme so the navbar never depends on a light-only shadow. */
    --navbar-shadow:
        0 8px 24px rgba(75, 96, 67, 0.07);

    --nav-pill-shadow:
        0 6px 16px rgba(46, 96, 56, 0.28);

    /* Hero accent glow and call-to-action lift. Both are redefined in
       the dark theme so the glow never washes out the dark canvas and
       the CTA keeps a visible shadow on it. */
    --hero-glow: rgba(198, 216, 167, 0.28);

    --hero-cta-shadow:
        0 14px 30px rgba(46, 96, 56, 0.18);

    --hero-cta-shadow-hover:
        0 20px 38px rgba(46, 96, 56, 0.26);

    /* Softer than the headline but dark enough for AA body text on the
       page background. Redefined in dark mode where --olive-soft is
       already well above the threshold. */
    --hero-description: #62735A;

    --btn-danger-bg: var(--error-red);

    /* Constant solid-accent surface for components that pair a deep-olive
       fill with warm text in BOTH themes (primary buttons, active tabs,
       result panels). The text tokens below keep those pairings intact. */
    --accent-solid: #4B6043;
    --on-accent: #FFFFFF;
    --on-accent-muted: rgba(255, 255, 255, 0.78);
    --on-accent-icon-bg: rgba(255, 248, 225, 0.14);
    --on-accent-track: rgba(255, 255, 255, 0.18);

    /* Error/danger token (was referenced but never defined) */
    --error-red: #A45747;
    --danger-soft: #fdeae8;

    /* Analyze form fields. The placeholder and ring are redefined in
       the dark theme so the tinted field surface keeps AA text and a
       visible focus ring in both modes. */
    --field-focus-ring: 0 0 0 4px rgba(46, 96, 56, 0.16);
    --field-placeholder: #5F7158;
    --resume-placeholder: var(--olive-soft);

    /* Native widgets (scrollbars, checkboxes, date pickers) follow the theme */
    color-scheme: light;

    --radius-lg: 28px;

    --radius-md: 20px;

    /* Sticky offsets. Defaults match the desktop header; script.js
       re-measures them on load and resize so wrapped rows on narrow
       screens cannot cause overlap. */

    --navbar-offset: 76px;

    --subnav-offset: 156px;

    --radius-sm: 14px;

    /* Theme toggle transition */
    --theme-transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

/* Dark theme overrides - redefines semantic color tokens while preserving component styles.
   Surface hierarchy: page #1A1F18 < cards/inputs #23281E < panels #2A3226 < hover tints,
   so cards and raised panels stay visible against the background (reference-site pattern
   of distinct bg/card/input layers), all built from the same olive/cream/sage hues. */
[data-theme="dark"] {
    --ref-page: #1A1F18;
    --ref-green-dark: #C6D8A7;
    --ref-green-primary: #A8C488;
    --ref-green-pale: #2A3222;
    --ref-green-border: #3E4A36;
    --butter: #262D22;
    --butter-deep: #1F251B;
    --pistachio: #A8C488;
    --pistachio-light: #303A28;
    --pistachio-soft: #2E362A;
    --olive: #C6D8A7;
    --olive-dark: #F8F4E2;
    --olive-soft: #A8C488;
    --cream: #2A3226;
    --white: #23281E;
    --border: rgba(198, 216, 167, 0.18);
    --shadow-soft: 0 12px 30px rgba(0, 0, 0, 0.35);
    --shadow-pop: 0 18px 45px rgba(0, 0, 0, 0.45);
    --navbar-bg: rgba(26, 31, 24, 0.92);
    --navbar-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    --nav-pill-shadow: 0 6px 14px rgba(0, 0, 0, 0.45);
    --hero-glow: rgba(168, 196, 136, 0.10);
    --hero-cta-shadow: 0 14px 30px rgba(0, 0, 0, 0.45);
    --hero-cta-shadow-hover: 0 20px 38px rgba(0, 0, 0, 0.55);
    --hero-description: var(--olive-soft);
    /* Lifted deep olive: solid accent fills stay dark and keep warm-white
       text at AA contrast while remaining clearly visible on the page. */
    --accent-solid: #5A7650;
    --on-accent: #F8F4E2;
    --on-accent-muted: rgba(248, 244, 226, 0.86);
    --on-accent-icon-bg: rgba(255, 248, 225, 0.16);
    --on-accent-track: rgba(255, 255, 255, 0.22);
    --error-red: #D98B7A;
    --danger-soft: rgba(217, 139, 122, 0.14);
    --field-focus-ring: 0 0 0 4px rgba(168, 196, 136, 0.22);
    --field-placeholder: var(--olive-soft);
    --resume-placeholder: #8A9A7C;
    --btn-danger-bg: var(--error-red);
    /* Native widgets (scrollbars, checkboxes, date pickers) follow the theme */
    color-scheme: dark;
}

/* Sage chips: the light sage + dark-olive-text pairing inverts on dark
   surfaces. Re-surface chips on the sage-dark tile; their text tokens
   (--olive-dark / --olive) then keep full contrast automatically. */
[data-theme="dark"] .profile-menu-avatar,
[data-theme="dark"] .profile-page-avatar,
[data-theme="dark"] .skill-pill,
[data-theme="dark"] .compatibility.already,
[data-theme="dark"] .next-number,
[data-theme="dark"] .resource-group-icon,
[data-theme="dark"] .resources-section .resource-skill,
[data-theme="dark"] .ats-badge--preferred,
[data-theme="dark"] .ats-job-badge,
[data-theme="dark"] .resume-list-item-badge.updated,
[data-theme="dark"] .resume-preview-skill {
    background: var(--pistachio-light);
}





/* =========================================================

   RESET

========================================================= */

* {

    box-sizing: border-box;

    margin: 0;

    padding: 0;

}





html {

    scroll-behavior: smooth;

}

/* Site-wide reduced-motion fallback. The component-scoped blocks below
   strip individual hover lifts and transitions; this guard covers
   everything else once (spinners, menus, theme switch, smooth
   scrolling), so no animated control is missed. */
@media (prefers-reduced-motion: reduce) {

    html {

        scroll-behavior: auto !important;

    }

    * {

        animation-duration: 0.01ms !important;

        animation-iteration-count: 1 !important;

        transition-duration: 0.01ms !important;

        scroll-behavior: auto !important;

    }

}





body {

    font-family:

        Inter,

        ui-sans-serif,

        system-ui,

        -apple-system,

        BlinkMacSystemFont,

        "Segoe UI",

        sans-serif;

    background: var(--ref-page);

    color: var(--olive-dark);

    line-height: 1.6;

    /* Smooth page-level theme switch (matches the toggle icons' timing) */
    transition: var(--theme-transition);

}





button,

textarea,

input {

    font: inherit;

}





button {

    cursor: pointer;

}





a {

    color: inherit;

    text-decoration: none;

}





/* =========================================================

   UTILITY

========================================================= */

.hidden {

    display: none !important;

}





.eyebrow {

    font-size: 0.75rem;

    font-weight: 700;

    letter-spacing: 0.22em;

    color: var(--olive);

}





/* =========================================================

   NAVBAR

========================================================= */

.navbar {

    position: sticky;

    top: 0;

    z-index: 100;

    background:
        var(--navbar-bg);

    backdrop-filter: blur(14px);

    border-bottom:

        1px solid var(--border);

}





.nav-inner {

    width: min(1180px, 90%);

    margin: auto;

    height: 76px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 12px;

}





.brand {

    display: flex;

    align-items: center;

    gap: 10px;

    flex-shrink: 0;

    font-size: 1.55rem;

    font-weight: 800;

    color: var(--olive-dark);

}





.brand-logo {

    width: 30px;

    height: 30px;

    flex-shrink: 0;

    overflow: visible;

    transition: transform 0.25s ease;

}

.brand-logo-ring {

    fill: none;

    stroke: var(--olive-dark);

    stroke-width: 7;

    stroke-linecap: round;

}

.brand-logo-bar {

    fill: var(--pistachio);

    stroke: var(--olive);

    stroke-width: 1.8;

}





.brand:hover .brand-logo {

    transform: rotate(-8deg) translateY(-2px);

}





.nav-links {

    display: flex;

    gap: 36px;

    font-size: 0.95rem;

    color: var(--olive-dark);

}





.nav-links a {

    transition:

        color 0.2s ease,

        transform 0.2s ease;

}





.nav-links a:hover {

    color: var(--olive);

    transform: translateY(-1px);

}


/* =========================================================
   THEME TOGGLE
   Compact rounded-square button with a centered sun/moon
   icon. Icons are cross-faded and rotated for a smooth,
   polished switch (reference-site toggle pattern).
========================================================= */

.theme-toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    margin-left: auto;

    border: 1px solid var(--border);
    border-radius: 12px;

    background: var(--cream);
    color: var(--olive-dark);

    transition: var(--theme-transition);
}

.theme-toggle:hover {
    background: var(--pistachio-soft);
    border-color: var(--pistachio);
    color: var(--olive);
    transform: translateY(-1px);
}

.theme-toggle:focus-visible {
    outline: 3px solid var(--ref-green-primary);
    outline-offset: 2px;
}

.theme-icon {
    position: absolute;
    display: flex;
    width: 20px;
    height: 20px;
    color: currentColor;
    flex-shrink: 0;

    opacity: 0;
    transform: rotate(-90deg) scale(0.4);
    transition:
        opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.theme-icon-sun {
    view-transition-name: theme-sun;
}

.theme-halo {
    position: absolute;
    inset: -5px;

    border: 2px solid var(--pistachio);
    border-radius: 16px;

    opacity: 0;
    pointer-events: none;

    view-transition-name: theme-halo;
}

/* Action-style iconography: the icon shows the mode you will switch TO.
   Light mode shows the moon (click switches to dark); dark mode shows
   the sun (click switches to light). */
.theme-icon-moon {
    opacity: 1;
    transform: rotate(0deg) scale(1);

    view-transition-name: theme-moon;
}

[data-theme="dark"] .theme-icon-moon {
    opacity: 0;
    transform: rotate(90deg) scale(0.4);
}

[data-theme="dark"] .theme-icon-sun {
    opacity: 1;
    transform: rotate(0deg) scale(1);
}

/* The theme sweep: the new page is revealed by a circle growing from the
   toggle instead of the default crossfade. Named icon groups keep the sun
   and moon above the snapshots so their spin stays visible. */
::view-transition-old(root),
::view-transition-new(root) {
    animation: none;
    mix-blend-mode: normal;
}

::view-transition-old(root) {
    z-index: 1;
}

::view-transition-new(root) {
    z-index: 2;
}

::view-transition-group(theme-sun),
::view-transition-group(theme-moon),
::view-transition-group(theme-halo) {
    animation: none;
    z-index: 3;
}

::view-transition-group(theme-halo) {
    transform-origin: center;
}

::view-transition-old(theme-halo) {
    animation: none;
    opacity: 0;
}

html.theme-sweeping .theme-halo {
    opacity: 1;
}

html.theme-sweeping::view-transition-new(theme-halo) {
    animation: theme-halo-pulse 0.6s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

html.theme-to-dark::view-transition-old(theme-moon),
html.theme-to-light::view-transition-old(theme-sun) {
    animation: theme-icon-out 0.42s ease-in both;
}

html.theme-to-dark::view-transition-new(theme-sun),
html.theme-to-light::view-transition-new(theme-moon) {
    animation: theme-icon-in 0.52s cubic-bezier(0.34, 1.4, 0.64, 1) both;
}

html.theme-to-dark::view-transition-old(theme-sun),
html.theme-to-dark::view-transition-new(theme-moon),
html.theme-to-light::view-transition-old(theme-moon),
html.theme-to-light::view-transition-new(theme-sun) {
    animation: none;
    opacity: 0;
}

@keyframes theme-halo-pulse {
    from {
        opacity: 0.55;
        transform: scale(0.7);
    }

    to {
        opacity: 0;
        transform: scale(1.9);
    }
}

@keyframes theme-icon-out {
    from {
        opacity: 1;
        transform: rotate(0deg) scale(1);
    }

    to {
        opacity: 0;
        transform: rotate(-90deg) scale(0.4);
    }
}

@keyframes theme-icon-in {
    0% {
        opacity: 0;
        transform: rotate(90deg) scale(0.4);
    }

    70% {
        opacity: 1;
        transform: rotate(-6deg) scale(1.08);
    }

    100% {
        opacity: 1;
        transform: rotate(0deg) scale(1);
    }
}

/* Suppress the usual color transitions while the sweep runs so the new
   snapshot is captured at its final colors and does not fade twice. */
html.theme-sweeping,
html.theme-sweeping *,
html.theme-sweeping *::before,
html.theme-sweeping *::after {
    transition: none !important;
}

@media (prefers-reduced-motion: reduce) {
    .theme-toggle,
    .theme-icon {
        transition: none;
    }
}


/* =========================================================
   DARK MODE PLACEHOLDER REMINDER
   Component rules (.interview-answer-input::placeholder etc.)
   already use var(--olive-soft), which remaps automatically in
   dark mode. This catch-all covers any input lacking a specific
   rule so its placeholder never blends with real text.
========================================================= */

[data-theme="dark"] ::placeholder {
    color: var(--olive-soft);
}


/* =========================================================
   PROFILE DROPDOWN
========================================================= */

.account-area {
    position: relative;
}

.profile-trigger {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 40px;
    height: 40px;
    padding: 0 10px;

    border: 1px solid var(--border);
    border-radius: 10px;

    background: var(--cream);
    color: var(--olive-dark);

    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease;
}

.profile-trigger:hover {
    background: var(--pistachio-soft);
    border-color: var(--pistachio);
    color: var(--olive);
    transform: translateY(-1px);
}

.profile-trigger:focus-visible {
    outline: 3px solid var(--ref-green-primary);
    outline-offset: 2px;
}

.profile-trigger[aria-expanded="true"] {
    background: var(--pistachio-soft);
    border-color: var(--pistachio);
    color: var(--olive);
}

.profile-caret {
    width: 14px;
    height: 14px;
    color: currentColor;
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.profile-trigger[aria-expanded="true"] .profile-caret {
    transform: rotate(180deg);
}

.profile-icon {
    width: 20px;
    height: 20px;
    color: currentColor;
    flex-shrink: 0;
}

.profile-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 200;

    min-width: 248px;
    max-width: 300px;

    padding: 6px;

    border: 1px solid var(--border);
    border-radius: 16px;

    background: var(--cream);
    box-shadow: var(--shadow-pop);

    overflow: hidden;

    transform-origin: top right;
    animation: profile-menu-in 0.18s ease-out;
}

@keyframes profile-menu-in {
    from {
        opacity: 0;
        transform: translateY(-6px) scale(0.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.profile-menu.hidden {
    display: none;
}

.profile-menu-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    margin-bottom: 4px;

    border-radius: 11px;
    background: var(--pistachio-soft);
}

.profile-menu-header > div {
    min-width: 0;
}

.profile-menu-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--pistachio);
    color: var(--olive);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 700;
    flex-shrink: 0;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    box-shadow: 0 0 0 2px var(--pistachio);
}

.profile-menu-name {
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--olive-dark);
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-menu-email {
    font-size: 0.72rem;
    color: var(--olive-soft);
    margin: 2px 0 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-menu-divider {
    height: 1px;
    background: var(--border);
    margin: 4px 8px;
}

.profile-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px;

    border: none;
    border-radius: 10px;
    background: transparent;
    color: var(--olive-dark);

    font: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    text-align: left;

    transition: background 0.15s ease;
}

.profile-menu-item:hover {
    background: var(--pistachio-soft);
}

.profile-menu-item:active {
    background: var(--pistachio-light);
}

.profile-menu-item:focus-visible {
    outline: 3px solid var(--ref-green-primary);
    outline-offset: -2px;
    border-radius: 8px;
}

.profile-menu-item--danger {
    color: var(--error-red);
}

.profile-menu-item--danger:hover {
    background: var(--danger-soft);
}

.menu-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: var(--olive-soft);
}

.profile-menu-item:hover .menu-icon {
    color: var(--olive);
}

.profile-menu-item--danger .menu-icon {
    color: var(--error-red);
}

.profile-menu-item--danger:hover .menu-icon {
    color: var(--error-red);
}

/* =========================================================

   HERO

========================================================= */

.hero {

    position: relative;

    min-height: 670px;

    display: flex;

    align-items: center;

    width: min(1180px, 90%);

    margin: auto;

}

/* Soft green glow behind the artwork. It is painted inside the hero
   box, sits under the copy and the chart, and disappears with the
   illustration at 1100px. */

.hero::before {

    content: "";

    position: absolute;

    top: 50%;
    right: -40px;
    width: 560px;
    height: 560px;
    transform: translateY(-50%);

    background: radial-gradient(
        circle,
        var(--hero-glow),
        transparent 70%
    );

    pointer-events: none;

    z-index: 0;

}





.hero-content {

    position: relative;

    z-index: 1;

    max-width: 720px;

}

/* Badge treatment for the hero eyebrow only. The other four section
   eyebrows inherit the shared .eyebrow rule above unchanged. */

.hero .eyebrow {

    display: inline-block;

    padding: 7px 14px;

    border: 1px solid var(--border);

    border-radius: 999px;

    background: var(--pistachio-soft);

    color: var(--olive);

}





.hero h1 {

    margin-top: 18px;

    font-size:

        clamp(3.2rem, 7vw, 6rem);

    line-height: 0.94;

    letter-spacing: -0.06em;

    font-weight: 800;

    color: var(--olive-dark);

}





.hero-description {

    max-width: 560px;

    margin-top: 28px;

    font-size: 1.18rem;

    line-height: 1.7;

    color: var(--hero-description);

}





.hero-button {

    display: inline-flex;

    align-items: center;

    gap: 22px;

    margin-top: 38px;

    padding: 17px 25px;

    border-radius: 999px;

    background: var(--accent-solid);

    color: var(--on-accent);

    font-weight: 700;

    box-shadow: var(--hero-cta-shadow);

    transition:

        transform 0.18s ease,

        box-shadow 0.18s ease;

}





.hero-button:hover {

    transform: translateY(-3px);

    box-shadow: var(--hero-cta-shadow-hover);

}

.hero-button:focus-visible {

    outline: 3px solid var(--ref-green-primary);

    outline-offset: 2px;

}





.hero-button span {

    font-size: 1.25rem;

}





.hero-illustration {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 420px;
    height: 520px;
    max-width: 45%;
    pointer-events: none;
    z-index: 1;
}

.hero-illustration svg {
    width: 100%;
    height: 100%;
}


/* The chart needs a wide column: below this width it sits on top of
   the headline. It is decorative, so hide it rather than reflow it.
   The glow is tied to the artwork, so it goes with it. */
@media (max-width: 1100px) {

    .hero-illustration {

        display: none;

    }

    .hero::before {

        display: none;

    }

}

@media (prefers-reduced-motion: reduce) {

    .hero-button {

        transition: none;

    }

    .hero-button:hover {

        transform: none;

    }

}





/* =========================================================

   PILLARS

========================================================= */

.pillars {

    width: min(1180px, 90%);

    margin: 24px auto 40px;

}





.section-heading {

    margin-bottom: 16px;

}





.section-heading h2 {

    margin-top: 12px;

    font-size: 3rem;

    line-height: 1.05;

    letter-spacing: -0.04em;

}

/* The pillar grid needs more air under its heading than the shared
   default, which is tuned for tighter sections. */

.pillars .section-heading {

    margin-bottom: 28px;

}





.pillar-grid {

    display: grid;

    grid-template-columns:

        repeat(3, 1fr);

    gap: 20px;

}





.pillar-card {

    padding: 26px;

    border-radius: var(--radius-lg);

    background: var(--white);

    border: 1px solid var(--border);

    box-shadow: var(--shadow-soft);

    transition:

        transform 0.18s ease,

        box-shadow 0.18s ease;

}





.pillar-card:hover {

    transform: translateY(-4px);

    box-shadow: var(--shadow-pop);

}





.pillar-number {

    display: inline-flex;

    width: 42px;

    height: 42px;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: var(--accent-solid);

    color: var(--on-accent);

    font-size: 0.8rem;

    font-weight: 700;

}





.pillar-card h3 {

    margin-top: 14px;

    font-size: 1.25rem;

    letter-spacing: -0.01em;

}





.pillar-card p {

    margin-top: 8px;

    color: var(--olive-soft);

    font-size: 0.92rem;

    line-height: 1.6;

}

/* The cards are presentation only, but the lift is motion all the same. */

@media (prefers-reduced-motion: reduce) {

    .pillar-card {

        transition: none;

    }

    .pillar-card:hover {

        transform: none;

    }

}





/* =========================================================

   ANALYSIS

========================================================= */

.analysis-section {

    width: min(1180px, 90%);

    margin: 0 auto 120px;

    display: grid;

    grid-template-columns:

        0.8fr 1.2fr;

    gap: 70px;

    align-items: start;

}





.analysis-intro {

    position: sticky;

    top: calc(
        var(--navbar-offset) +
        var(--subnav-offset)
    );

}





.analysis-intro h2 {

    margin-top: 16px;

    font-size: 3.6rem;

    line-height: 1;

    letter-spacing: -0.05em;

}





.analysis-intro p:last-child {

    margin-top: 22px;

    color: var(--olive);

}





.analysis-card {

    padding: 38px;

    border-radius: 32px;

    background: var(--white);

    border: 1px solid var(--border);

    box-shadow: var(--shadow-pop);

}





.input-group + .input-group {

    margin-top: 38px;

}





.input-heading {

    display: flex;

    align-items: center;

    gap: 14px;

    margin-bottom: 15px;

}





.input-number {

    width: 42px;

    height: 42px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: var(--accent-solid);

    color: var(--on-accent);

    font-size: 0.8rem;

    font-weight: 700;

}





.input-heading h3 {

    font-size: 1.25rem;

    letter-spacing: -0.01em;

}





.input-heading span {

    display: block;

    font-size: 0.82rem;

    color: var(--olive-soft);

}





textarea,

.project-name {

    width: 100%;

    border: 1px solid var(--border);

    border-radius: var(--radius-md);

    background: var(--white);

    color: var(--olive-dark);

    outline: none;

    transition:

        border 0.2s ease,

        box-shadow 0.2s ease;

}





textarea {

    min-height: 80px;

    padding: 18px;

    resize: none;

    overflow-y: hidden;

}





.project-name {

    padding: 15px 17px;

}





textarea:focus,

.project-name:focus {

    border-color: var(--pistachio);

    box-shadow:

        0 0 0 4px rgba(198, 216, 167, 0.25);

}

/* Analyze form fields (Part 2, section 4). The card is white, so the
   fields sit on a very light green surface and take a green border plus
   a soft ring when focused. Scoped so no other form changes. */

.analysis-card textarea,

.analysis-card .project-name {

    background: var(--pistachio-soft);

}

.analysis-card textarea::placeholder,

.analysis-card .project-name::placeholder {

    color: var(--field-placeholder);

}

.analysis-card textarea:focus,

.analysis-card .project-name:focus {

    border-color: var(--ref-green-primary);

    box-shadow: var(--field-focus-ring);

}





.project-description {

    margin-top: 10px;

}





/* =========================================================

   FILE UPLOAD

========================================================= */

.upload-row {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 10px;

    margin-top: 12px;

}





.file-input {

    display: none;

}





.upload-button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    padding: 9px 14px;

    border: 1px solid var(--border);

    border-radius: 12px;

    background: var(--pistachio-soft);

    color: var(--olive);

    font: inherit;

    font-size: 0.78rem;

    font-weight: 750;

    transition:

        background 0.2s ease,

        border-color 0.2s ease,

        color 0.2s ease,

        transform 0.2s ease,

        opacity 0.2s ease;

}





.upload-button:hover {

    background: var(--pistachio-light);

    border-color: var(--pistachio);

    transform: translateY(-1px);

}





.upload-button:focus-visible {

    outline: 3px solid var(--ref-green-primary);

    outline-offset: 2px;

}





.upload-button span {

    font-size: 1rem;

    line-height: 1;

}





.upload-button:disabled {

    cursor: wait;

    opacity: 0.6;

}





.upload-button.uploading {

    cursor: wait;

}





.upload-status {

    min-height: 20px;

    font-size: 0.74rem;

    color: var(--olive-soft);

}





.upload-status.success {

    color: var(--olive);

    font-weight: 650;

}





.upload-status.error {

    color: var(--error-red);

    font-weight: 650;

}





.upload-hint {

    margin-top: 6px;

    font-size: 0.72rem;

    color: var(--olive-soft);

}





/* =========================================================

   PROJECT INPUTS

========================================================= */

.project-input {

    position: relative;

    margin-top: 18px;

    padding: 18px;

    border: 1px solid var(--border);

    border-radius: var(--radius-md);

    background: rgba(198, 216, 167, 0.12);

}





.project-input-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;

    margin-bottom: 12px;

}





.project-input-label {

    color: var(--olive-dark);

    font-size: 0.82rem;

    font-weight: 800;

    letter-spacing: 0.02em;

}





.remove-project-button {

    padding: 7px 11px;

    border: 1px solid var(--border);

    border-radius: 10px;

    background: var(--cream);

    color: var(--olive-soft);

    font: inherit;

    font-size: 0.76rem;

    font-weight: 700;

    cursor: pointer;

    transition:

        background 0.2s ease,

        color 0.2s ease,

        transform 0.2s ease;

}





.remove-project-button:hover {

    background: var(--white);

    color: var(--olive-dark);

    transform: translateY(-1px);

}





.add-project-button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    margin-top: 16px;

    padding: 11px 16px;

    border: 1px solid var(--border);

    border-radius: 12px;

    background: var(--pistachio-soft);

    color: var(--olive);

    font: inherit;

    font-weight: 750;

    cursor: pointer;

    box-shadow: 0 4px 12px rgba(75, 96, 67, 0.06);

    transition:

        background 0.2s ease,

        border-color 0.2s ease,

        transform 0.2s ease,

        box-shadow 0.2s ease;

}





.add-project-button:hover {

    background: var(--pistachio-light);

    border-color: var(--pistachio);

    transform: translateY(-1px);

    box-shadow: 0 7px 16px rgba(75, 96, 67, 0.09);

}





.add-project-button:focus-visible,

.remove-project-button:focus-visible {

    outline: 3px solid var(--ref-green-primary);

    outline-offset: 2px;

}





/* =========================================================

   ANALYZE BUTTON

========================================================= */

.analyze-button {

    width: 100%;

    margin-top: 34px;

    padding: 18px;

    border: none;

    border-radius: 999px;

    background: var(--accent-solid);

    color: var(--on-accent);

    font-weight: 800;

    font-size: 1rem;

    box-shadow: var(--hero-cta-shadow);

    transition:

        transform 0.18s ease,

        box-shadow 0.18s ease,

        opacity 0.2s ease;

}





.analyze-button span {

    margin-left: 15px;

    font-size: 1.2rem;

}





.analyze-button:hover {

    transform: translateY(-3px);

    box-shadow: var(--hero-cta-shadow-hover);

}

.analyze-button:focus-visible {

    outline: 3px solid var(--ref-green-primary);

    outline-offset: 2px;

}





.analyze-button:disabled {

    cursor: wait;

    opacity: 0.65;

}





.input-note {

    margin-top: 18px;

    text-align: center;

    font-size: 0.75rem;

    line-height: 1.6;

    color: var(--olive-soft);

}

/* The form controls animate only their lift, so reduced-motion users
   keep every state change except the movement. */

@media (prefers-reduced-motion: reduce) {

    .upload-button,

    .add-project-button,

    .remove-project-button,

    .analyze-button {

        transition: none;

    }

    .upload-button:hover,

    .add-project-button:hover,

    .remove-project-button:hover,

    .analyze-button:hover {

        transform: none;

    }

}





/* =========================================================

   LOADING

========================================================= */

.loading-section {

    min-height: 350px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    gap: 20px;

}





.loading-orbit {

    width: 46px;

    height: 46px;

    border-radius: 50%;

    border:

        4px solid var(--pistachio-light);

    border-top-color: var(--olive);

    animation:

        spin 0.9s linear infinite;

}





@keyframes spin {

    to {

        transform: rotate(360deg);

    }

}





/* =========================================================

   RESULTS

========================================================= */

.results {

    padding: 95px 0 80px;

    /* Starts at the page colour so the panel grows out of the page
       instead of appearing as a lighter block. */

    background:

        linear-gradient(

            180deg,

            var(--ref-page) 0%,

            var(--butter-deep) 100%

        );

}





.results-container {

    width: min(1180px, 90%);

    margin: auto;

}





.results-header {

    display: flex;

    justify-content: space-between;

    align-items: flex-end;

    gap: 40px;

    margin-bottom: 45px;

}





.results-header h2 {

    margin-top: 13px;

    font-size: clamp(3rem, 6vw, 4.8rem);

    line-height: 1;

    letter-spacing: -0.055em;

}





.results-header > div:first-child > p:last-child {

    margin-top: 18px;

    color: var(--olive-soft);

}





.results-quote {

    width: 230px;

    position: relative;

    text-align: center;

    padding: 18px;

}





.quote-mark {

    font-size: 3rem;

    line-height: 0.5;

    color: var(--pistachio);

}





.results-quote p {

    font-size: 1.2rem;

    font-style: italic;

    font-weight: 600;

}





.results-quote small {

    display: block;

    margin-top: 9px;

    color: var(--olive-soft);

}





.quote-leaf {

    position: absolute;

    right: 8px;

    bottom: -8px;

    font-size: 3rem;

    color: var(--olive);

}





/* =========================================================

   DASHBOARD TOP GRID

========================================================= */

.dashboard-top {

    display: grid;

    grid-template-columns:

        1.35fr 1fr 0.8fr;

    gap: 18px;

    margin-bottom: 20px;

}





.dashboard-card {

    background: var(--cream);

    border: 1px solid var(--border);

    border-radius: var(--radius-lg);

    box-shadow: var(--shadow-soft);

}





.dashboard-card:hover {

    box-shadow: var(--shadow-pop);

}





.score-card {

    min-height: 285px;

    padding: 30px;

    display: flex;

    align-items: center;

    gap: 35px;

    background:

        linear-gradient(

            135deg,

            var(--pistachio-light),

            var(--cream)

        );

}





.score-ring {

    position: relative;

    width: 190px;

    height: 190px;

    flex-shrink: 0;

}





.score-ring svg {

    width: 100%;

    height: 100%;

    transform: rotate(-90deg);

}





.score-ring-track {

    fill: none;

    stroke: rgba(75, 96, 67, 0.13);

    stroke-width: 10;

}





.score-ring-progress {

    fill: none;

    stroke: var(--olive);

    stroke-width: 10;

    stroke-linecap: round;

    transition:

        stroke-dashoffset 0.9s ease;

}





.score-ring-content {

    position: absolute;

    inset: 0;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

}





.score-number {

    font-size: 2.35rem;

    font-weight: 800;

}





.score-label {

    font-size: 0.85rem;

    color: var(--olive-soft);

}





.score-copy h3 {

    font-size: 1.35rem;

}





.score-copy p {

    margin-top: 9px;

    color: var(--olive-soft);

}





.skill-card {

    padding: 30px;

}





.card-title {

    display: flex;

    align-items: center;

    gap: 11px;

    font-size: 1.15rem;

    font-weight: 800;

}





.card-icon {

    width: 34px;

    height: 34px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 11px;

    background: var(--pistachio-light);

}





.skill-list {

    margin-top: 22px;

    display: flex;

    flex-direction: column;

    gap: 10px;

}





.skill-row {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 10px;

}





.skill-row-left {

    display: flex;

    align-items: center;

    gap: 9px;

}





.skill-status {

    width: 21px;

    height: 21px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    font-size: 0.7rem;

    font-weight: 800;

}





.skill-status.matched {

    background: #DCE9CC;

    color: var(--olive);

}





.skill-status.missing {

    background: #F1D8D1;

    color: var(--error-red);

}





.skill-count {

    padding: 5px 9px;

    border-radius: 9px;

    background: var(--pistachio-light);

    font-size: 0.7rem;

    color: var(--olive);

}





.role-card {

    padding: 30px;

}





.role-stat {

    padding: 17px 0;

    border-bottom:

        1px solid var(--border);

}





.role-stat:last-child {

    border-bottom: none;

}





.role-stat-label {

    font-size: 0.76rem;

    color: var(--olive-soft);

}





.role-stat-value {

    margin-top: 3px;

    font-weight: 800;

}





/* =========================================================

   SECTION CARDS

========================================================= */

.dashboard-section {

    margin-top: 20px;

    padding: 30px;

    border-radius: var(--radius-lg);

    background: var(--cream);

    border: 1px solid var(--border);

    box-shadow: var(--shadow-soft);

}





.dashboard-section-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    margin-bottom: 23px;

}





.dashboard-section-header h3 {

    font-size: 1.25rem;

}





.section-action {

    padding: 8px 14px;

    border-radius: 20px;

    background: var(--pistachio-light);

    color: var(--olive);

    font-size: 0.75rem;

    font-weight: 700;

}





/* =========================================================

   PROJECT CARDS

========================================================= */

.project-results-grid {

    display: grid;

    grid-template-columns:

        repeat(2, 1fr);

    gap: 18px;

}





.project-result-card {

    padding: 24px;

    border-radius: var(--radius-md);

    background: var(--pistachio-soft);

    border: 1px solid var(--border);

}





.project-result-card h4 {

    font-size: 1.1rem;

}





.project-skills {

    display: flex;

    flex-wrap: wrap;

    gap: 7px;

    margin-top: 15px;

}





.skill-pill {

    padding: 5px 10px;

    border-radius: 20px;

    background: var(--pistachio);

    color: var(--olive-dark);

    font-size: 0.7rem;

    font-weight: 700;

}





.project-upgrades {

    margin-top: 20px;

    display: flex;

    flex-direction: column;

    gap: 9px;

}





.upgrade-item {

    padding: 12px 14px;

    border-radius: 13px;

    background: var(--white);

    border: 1px solid var(--border);

}





.upgrade-item-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 10px;

}





.compatibility {

    padding: 4px 8px;

    border-radius: 10px;

    font-size: 0.62rem;

    font-weight: 800;

    letter-spacing: 0.05em;

}





.compatibility.high {

    background: #DCE9CC;

    color: var(--olive);

}





.compatibility.already {

    background: var(--pistachio);

    color: var(--olive-dark);

}





.compatibility.unknown {

    background: #ECE9DD;

    color: #756F61;

}





.upgrade-item p {

    margin-top: 7px;

    font-size: 0.82rem;

    color: var(--olive-soft);

}





.upgrade-action {

    margin-top: 7px;

    font-size: 0.78rem;

    font-weight: 700;

    color: var(--olive);

}





/* =========================================================

   BOTTOM GRID

========================================================= */

.dashboard-bottom {

    display: grid;

    grid-template-columns:

        1.7fr 0.8fr;

    gap: 20px;

}

/* Allow grid items to shrink so inner carousels scroll
   instead of stretching the page */

.dashboard-bottom > * {

    min-width: 0;

}





/* =========================================================

   RESOURCE CARDS

========================================================= */

.resource-groups {

    display: flex;

    flex-direction: column;

    gap: 24px;

    min-width: 0;

}

.resource-group {

    min-width: 0;

}

.resource-group-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 14px;

    margin-bottom: 12px;

}

.resource-group-heading {

    display: flex;

    align-items: center;

    gap: 10px;

    min-width: 0;

    flex: 1 1 auto;

}
.resource-group-heading > div {

    min-width: 0;

}

.resource-group-icon {


    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 32px;

    height: 32px;

    flex: 0 0 auto;

    border-radius: 11px;

    background: var(--pistachio);

}

.resource-group-title {

    font-size: 0.95rem;

    font-weight: 800;

    color: var(--olive-dark);

}

.resource-group-subtitle {

    font-size: 0.7rem;

    color: var(--olive-soft);

}

.resource-group-controls {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    flex: 0 0 auto;

}

.resource-carousel-button {

    width: 34px;

    height: 34px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 0;

    border: 1px solid var(--border);

    border-radius: 50%;

    background: var(--cream);

    color: var(--olive-dark);

    font-size: 0.8rem;

    line-height: 1;

    cursor: pointer;

    transition:

        background 0.2s ease,

        opacity 0.2s ease;

}

.resource-carousel-button:hover:not(:disabled) {

    background: var(--white);

}

.resource-carousel-button:disabled {

    opacity: 0.35;

    cursor: default;

}

.resource-carousel-button:focus-visible {

    outline: 2px solid var(--olive);

    outline-offset: 2px;

}

.resource-group.has-no-overflow .resource-group-controls {

    visibility: hidden;

}

.resource-carousel {

    display: flex;

    gap: 13px;

    overflow-x: auto;

    overflow-y: hidden;

    scroll-snap-type: x proximity;

    scroll-behavior: smooth;

    -webkit-overflow-scrolling: touch;

    overscroll-behavior-x: contain;

    /* Never wider than the section that contains it */

    max-width: 100%;

    min-width: 0;

    /* Room for the card hover lift and its shadow */

    padding-top: 6px;

    padding-bottom: 10px;

    scrollbar-width: thin;

    scrollbar-color:
        var(--pistachio)
        transparent;

}

.resource-carousel::-webkit-scrollbar {

    height: 8px;

}

.resource-carousel::-webkit-scrollbar-track {

    background: transparent;

}

.resource-carousel::-webkit-scrollbar-thumb {

    background: var(--pistachio);

    border-radius: 999px;

}

.resource-carousel:focus-visible {

    outline: 2px solid var(--olive);

    outline-offset: 4px;

    border-radius: 18px;

}

.resource-carousel > .resource-card {

    flex: 0 0 286px;

    scroll-snap-align: start;

}





.resource-card {

    padding: 20px;

    border-radius: 17px;

    background: var(--pistachio-soft);

    border: 1px solid var(--border);

    display: flex;

    flex-direction: column;

    min-height: 190px;

}





.resource-skill {

    font-size: 0.72rem;

    font-weight: 800;

    color: var(--olive);

}





.resource-card h4 {

    margin-top: 8px;

    font-size: 0.95rem;

    line-height: 1.35;

}





.resource-description {

    margin-top: 7px;

    font-size: 0.75rem;

    color: var(--olive-soft);

    flex: 1;

}





.resource-meta {

    margin-top: 14px;

    display: flex;

    justify-content: space-between;

    font-size: 0.7rem;

    color: var(--olive-soft);

}





.resource-link {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    margin-top: 12px;

    padding: 8px;

    border-radius: 11px;

    background: var(--white);

    color: var(--olive);

    font-size: 0.72rem;

    font-weight: 800;

}





/* =========================================================

   NEXT STEPS

========================================================= */

.next-steps {

    display: flex;

    flex-direction: column;

    gap: 18px;

}





.next-step {

    display: grid;

    grid-template-columns:

        34px 1fr;

    gap: 12px;

}





.next-number {

    width: 34px;

    height: 34px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: var(--pistachio);

    color: var(--olive);

    font-size: 0.78rem;

    font-weight: 800;

}





.next-step h4 {

    font-size: 0.85rem;

}





.next-step p {

    margin-top: 2px;

    font-size: 0.72rem;

    color: var(--olive-soft);

}





/* =========================================================

   EMPTY / ERROR

========================================================= */

.empty-state {

    padding: 30px;

    text-align: center;

    color: var(--olive-soft);

}





.result-error {

    padding: 30px;

    border-radius: var(--radius-md);

    background: #F4E0D9;

    color: #7D4338;

}





/* =========================================================

   RESULTS FOOTER

========================================================= */

.results-footer {

    margin-top: 55px;

    padding-top: 20px;

    border-top:

        1px solid var(--border);

    display: flex;

    justify-content: space-between;

    color: var(--olive-soft);

    font-size: 0.82rem;

}





.results-footer strong {

    color: var(--olive);

}





/* =========================================================

   SITE FOOTER

========================================================= */

.site-footer {

    width: 100%;

    margin: 0;

    padding: 36px max(5%, calc((100% - 1180px) / 2)) 40px;

    display: flex;

    flex-wrap: wrap;

    align-items: center;

    justify-content: space-between;

    gap: 16px 28px;

    background: var(--accent-solid);

    color: var(--on-accent);

    font-size: 0.82rem;

    border-top: 1px solid var(--on-accent-track);

    border-radius: 32px 32px 0 0;

}





.site-footer div {

    display: flex;

    align-items: center;

    gap: 14px;

}





.site-footer strong {

    color: var(--on-accent);

    font-size: 1.05rem;

    font-weight: 800;

    letter-spacing: -0.01em;

}




.site-footer > span {

    font-size: 0.78rem;

    letter-spacing: 0.01em;

}

.footer-links {
    display: flex;
    align-items: center;
}

.github-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    color: var(--on-accent);
    background: var(--on-accent-icon-bg);
    border: 1px solid var(--on-accent-track);
    transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.github-link:hover {
    background: var(--on-accent);
    border-color: var(--on-accent);
    color: var(--accent-solid);
    transform: translateY(-1px);
}

.github-link:active {
    transform: translateY(0);
}

.github-link:focus-visible {
    outline: 3px solid var(--on-accent);
    outline-offset: 3px;
}

.github-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

/* The footer link is the only moving part down here, so reduced-motion
   users keep the colour change but lose the lift and transitions. */

@media (prefers-reduced-motion: reduce) {

    .github-link {

        transition: none;

    }

    .github-link:hover,
    .github-link:active {

        transform: none;

    }

}





/* =========================================================

   ACCOUNT PAGES
   Profile and Settings. Same tokens, radii and border as the rest
   of the application, so these read as part of the existing product
   rather than as a separate area.

========================================================= */

.account-page {

    min-height: 100vh;

}

.account-main {

    width: min(760px, 90%);

    margin: 0 auto;

    padding: 64px 0 80px;

    display: flex;

    flex-direction: column;

    gap: 18px;

}

.account-card {

    padding: 34px;

    border: 1px solid var(--border);

    border-radius: var(--radius-lg);

    background: var(--cream);

    box-shadow: var(--shadow-soft);

}

.account-card-header {

    margin-bottom: 26px;

}

.account-card-header h1,
.account-card-header h2 {

    margin-top: 10px;

    font-size: 2.4rem;

    line-height: 1.05;

    letter-spacing: -0.04em;

    color: var(--olive-dark);

}

.account-back-link {

    align-self: flex-start;

    font-size: 0.82rem;

    font-weight: 700;

    color: var(--olive-soft);

    transition: color 0.2s ease;

}

.account-back-link:hover {

    color: var(--olive);

}



/* ---- Identity summary ---- */

.profile-summary {

    display: flex;

    align-items: center;

    gap: 16px;

    margin-bottom: 28px;

    padding: 18px;

    border-radius: var(--radius-md);

    background: var(--pistachio-soft);

}

.profile-page-avatar {

    width: 54px;

    height: 54px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

    background-color: var(--pistachio);
    background-size: cover;
    background-position: center;

    color: var(--olive);

    font-size: 1.05rem;

    font-weight: 800;

}

.profile-page-name {

    font-size: 1.05rem;

    font-weight: 750;

    color: var(--olive-dark);

}

.profile-page-email {

    font-size: 0.82rem;

    color: var(--olive-soft);

}



/* ---- Forms ---- */

.account-form {

    display: flex;

    flex-direction: column;

    gap: 20px;

}

.account-field {

    display: flex;

    flex-direction: column;

    gap: 7px;

}

.account-field label {

    font-size: 0.8rem;

    font-weight: 750;

    color: var(--olive-dark);

}

.account-field input,

.account-field select {

    width: 100%;

    padding: 12px 14px;

    border: 1px solid var(--border);

    border-radius: 12px;

    background: var(--white);

    color: var(--olive-dark);

    font: inherit;

    font-size: 0.9rem;

    outline: none;

    transition:

        border-color 0.2s ease,

        box-shadow 0.2s ease;

}

.account-field input:focus,

.account-field select:focus {

    border-color: var(--pistachio);

    box-shadow:

        0 0 0 4px rgba(198, 216, 167, 0.25);

}


/* ---- Password visibility toggle ---- */

.password-input-wrap {

    position: relative;

    width: 100%;

}

.password-input-wrap input {

    width: 100%;

    padding-right: 52px;

}

.password-toggle {

    position: absolute;

    top: 50%;

    right: 8px;

    width: 40px;

    height: 40px;

    display: flex;

    align-items: center;

    justify-content: center;

    transform: translateY(-50%);

    border: none;

    border-radius: 10px;

    background: transparent;

    color: var(--olive-soft);

    padding: 0;

    cursor: pointer;

    transition:
        background 0.2s ease,
        color 0.2s ease;

}

.password-toggle:hover {

    background: var(--pistachio-soft);

    color: var(--olive);

}

.password-toggle:focus-visible {

    outline: 3px solid var(--ref-green-primary);

    outline-offset: 2px;

}

.password-eye {

    width: 20px;

    height: 20px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.8;

    stroke-linecap: round;

    stroke-linejoin: round;

}

.password-eye.hidden {

    display: none;

}

.account-actions {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 14px;

    margin-top: 4px;

}

.account-primary-button,
.account-secondary-button,
.account-danger-button {

    padding: 11px 18px;

    border-radius: 12px;

    font: inherit;

    font-size: 0.82rem;

    font-weight: 750;

    transition:

        background 0.2s ease,

        border-color 0.2s ease,

        color 0.2s ease,

        transform 0.2s ease;

}

.account-primary-button {

    border: none;

    background: var(--accent-solid);

    color: var(--on-accent);

}

.account-primary-button:hover:not(:disabled) {

    transform: translateY(-1px);

}

.account-secondary-button {

    border: 1px solid var(--border);

    background: var(--pistachio-soft);

    color: var(--olive-dark);

}

.account-secondary-button:hover:not(:disabled) {

    background: var(--pistachio-light);

    border-color: var(--pistachio);

    color: var(--olive);

    transform: translateY(-1px);

}

.account-danger-button {

    border: 1px solid rgba(164, 87, 71, 0.35);

    background: transparent;

    color: var(--error-red);

}

.account-danger-button:hover:not(:disabled) {

    background: var(--danger-soft);

    border-color: var(--error-red);

    transform: translateY(-1px);

}

.account-primary-button:disabled,
.account-secondary-button:disabled,
.account-danger-button:disabled {

    cursor: wait;

    opacity: 0.6;

}

.account-primary-button:focus-visible,
.account-secondary-button:focus-visible,
.account-danger-button:focus-visible {

    outline: 3px solid var(--ref-green-primary);

    outline-offset: 2px;

}

.account-status {

    min-height: 20px;

    font-size: 0.78rem;

    color: var(--olive-soft);

}

.account-status.success {

    color: var(--olive);

    font-weight: 700;

}

.account-status.error {

    color: var(--error-red);

    font-weight: 700;

}



/* ---- Settings rows ---- */

.account-row {

    display: flex;

    align-items: center;

    justify-content: space-between;

    flex-wrap: wrap;

    gap: 16px;

    padding: 18px 0;

    border-top: 1px solid var(--border);

}

.account-row:first-of-type {

    border-top: none;

    padding-top: 0;

}

.account-row-label {

    font-size: 0.88rem;

    font-weight: 750;

    color: var(--olive-dark);

}

.account-row-value {

    font-size: 0.85rem;

    color: var(--olive-soft);

    word-break: break-word;

}

.account-row-hint {

    margin-top: 3px;

    font-size: 0.78rem;

    color: var(--olive-soft);

}



/* ---- Delete confirmation ---- */

.account-modal {

    position: fixed;

    inset: 0;

    z-index: 500;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 20px;

    background: rgba(53, 72, 50, 0.32);

}

.account-modal.hidden {

    display: none;

}

.account-modal-card {

    width: min(400px, 100%);

    padding: 28px;

    border-radius: var(--radius-lg);

    background: var(--cream);

    box-shadow: var(--shadow-pop);

}

.account-modal-card h2 {

    font-size: 1.25rem;

    color: var(--olive-dark);

}

.account-modal-card p {

    margin-top: 10px;

    font-size: 0.85rem;

    color: var(--olive-soft);

}

.account-modal-actions {

    display: flex;

    justify-content: flex-end;

    gap: 10px;

    margin-top: 22px;

}




/* =========================================================

   RESPONSIVE

========================================================= */

@media (max-width: 950px) {

    .analysis-section {

        grid-template-columns: 1fr;

        gap: 35px;

    }





    .analysis-intro {

        position: static;

    }





    .dashboard-top {

        grid-template-columns: 1fr 1fr;

    }





    .score-card {

        grid-column: 1 / -1;

    }





    .dashboard-bottom {

        grid-template-columns: 1fr;

    }

}




@media (max-width: 700px) {

    .analysis-tabs {
    flex-wrap: wrap;
}

.analysis-tab {
    flex: 1 1 140px;
}

    .result-view-bar {
    align-items: flex-start;
    flex-direction: column;
}

.back-to-current-button {
    width: 100%;
}

    .analysis-history-item {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
}

.analysis-history-item .analysis-history-side {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.analysis-history-item .analysis-history-actions {
    flex-direction: row;
    gap: 10px;
}

.analysis-history-item .history-view-button {
    flex: 1;
    justify-content: center;
}

.nav-links {
        display: none;
    }

    .account-area {
        gap: 8px;
    }

    .user-email {
        max-width: 128px;
        font-size: 0.74rem;
    }

}





@media (max-width: 700px) {

    .hero {

        min-height: 0;

        padding: 40px 0 48px;

    }





    .hero h1 {

        font-size: 3.4rem;

    }





    .pillar-grid {

        grid-template-columns: 1fr;

    }





    .section-heading h2,

    .analysis-intro h2 {

        font-size: 2.7rem;

    }





    .analysis-card {

        padding: 23px;

    }





    .results-header {

        flex-direction: column;

        align-items: flex-start;

    }





    .results-quote {

        display: none;

    }





    .dashboard-top {

        grid-template-columns: 1fr;

    }





    .score-card {

        grid-column: auto;

        flex-direction: column;

        text-align: center;

    }





    .project-results-grid {

        grid-template-columns: 1fr;

    }

    .resource-carousel > .resource-card {

        flex-basis: 236px;

    }

    .resource-group-header {

        gap: 10px;

    }





    .dashboard-section {

        padding: 22px;

    }





    .results-footer {

        flex-direction: column;

        gap: 12px;

    }




    .site-footer {

        flex-direction: column;

        align-items: flex-start;

        gap: 16px;

        padding: 30px 5% 34px;

        border-radius: 26px 26px 0 0;

    }





    .upload-row {

        align-items: flex-start;

        flex-direction: column;

    }





    .upload-status {

        min-height: 0;

    }

}







/* =========================================================

   FINAL CAREERGAP RESULTS POLISH

========================================================= */



/* =========================================================

   SCORE CARD

========================================================= */

.score-card {

    background: var(--accent-solid) !important;

    border-color: var(--accent-solid);

    color: var(--on-accent);

}

.score-card .score-copy h3,

.score-card .score-number {

    color: var(--on-accent);

}

.score-card .score-copy p,

.score-card .score-label {

    color: var(--on-accent-muted);

}





/* =========================================================

   SCORE METER

The ring always sits on the accent-painted score card, so its colors
are defined once with the rest of the results-card overrides below.

========================================================= */





/* =========================================================

   YOUR PROJECTS ANALYSIS

========================================================= */

.project-analysis-section {

    background: var(--accent-solid) !important;

    border: 1px solid var(--accent-solid) !important;

    box-shadow: var(--shadow-pop);

}





/* Heading */

.project-analysis-section .card-title {

    color: var(--on-accent);

}





/* Heading icon */

.project-analysis-section .card-icon {

    background: var(--on-accent-icon-bg);

    color: var(--on-accent);

}





/* How to improve */

.project-analysis-section .section-action {

    background: var(--cream);

    color: var(--olive-dark);

}





/* Keep INNER project cards unchanged */

.project-analysis-section .project-result-card {

    background: var(--pistachio-soft);

    border: 1px solid var(--border);

}





/* =========================================================

   RECOMMENDED LEARNING RESOURCES

========================================================= */

.resources-section {

    background: var(--accent-solid) !important;

    border: 1px solid var(--accent-solid) !important;

    box-shadow: var(--shadow-pop);

}





/* Heading */

.resources-section .card-title {

    color: var(--on-accent);

}





/* Heading icon */

.resources-section .card-icon {

    background: var(--on-accent-icon-bg);

    color: var(--on-accent);

}





/* GitHub button */

.resources-section .section-action {

    background: var(--cream);

    color: var(--olive-dark);

}





/* Resource group headers on the dark section */

.resources-section .resource-group-title {

    color: var(--on-accent);

}

.resources-section .resource-group-subtitle {

    color: var(--on-accent-muted);

}

.resources-section .resource-group-icon {

    background: var(--on-accent-icon-bg);

    color: var(--on-accent);

}

.resources-section .resource-carousel-button {

    background: var(--cream);

    color: var(--olive-dark);

}

.resources-section .resource-carousel-button:hover:not(:disabled) {

    background: var(--white);

}

/* Keep INNER resource cards unchanged */

.resources-section .resource-card {

    background: var(--pistachio-soft);

    border: 1px solid var(--border);

    transition:

        transform 0.2s ease,

        box-shadow 0.2s ease;

}





/* Subtle hover */

.resources-section .resource-card:hover {

    transform: translateY(-3px);

    box-shadow:

        0 14px 28px rgba(35, 48, 31, 0.16);

}





/* Resource badges */

.resources-section .resource-card-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 8px;

    margin-bottom: 2px;

}

.resources-section .resource-skill {

    display: inline-flex;

    align-self: flex-start;

    padding: 5px 9px;

    border-radius: 999px;

    background: var(--pistachio);

    color: var(--olive-dark);

}

.resources-section .resource-type-badge {

    display: inline-flex;

    align-items: center;

    padding: 4px 8px;

    border-radius: 999px;

    font-size: 0.68rem;

    font-weight: 700;

    background: rgba(46, 64, 46, 0.08);

    color: var(--olive-dark);

    letter-spacing: 0.02em;

}





/* Resource text */

.resources-section .resource-card h4 {

    color: var(--olive-dark);

}

.resources-section .resource-description {

    color: var(--olive-soft);

}

.resources-section .resource-meta {

    color: var(--olive-soft);

}





/* GitHub links */

.resources-section .resource-link {

    background: var(--cream);

    color: var(--olive-dark);

    transition:

        background 0.2s ease,

        transform 0.2s ease;

}

.resources-section .resource-link:hover {

    background: var(--white);

    color: var(--olive-dark);

    transform: translateY(-1px);

}





/* =========================================================

   FINAL RESULTS CARD COLORS

========================================================= */

/* Score card */

.score-card {

    background: var(--accent-solid) !important;

    border-color: var(--accent-solid) !important;

    color: var(--on-accent);

}

.score-card .score-copy h3,

.score-card .score-number {

    color: var(--on-accent);

}

.score-card .score-copy p,

.score-card .score-label {

    color: var(--on-accent-muted);

}





/* Score meter */

.score-ring-track {

    stroke: var(--on-accent-track);

}

.score-ring-progress {

    stroke: #C6E8B5;

}





/* Your Projects Analysis — outer card only */

.project-analysis-section {

    background: var(--accent-solid) !important;

    border-color: var(--accent-solid) !important;

    box-shadow: var(--shadow-pop);

}

.project-analysis-section .card-title {

    color: var(--on-accent);

}

.project-analysis-section .card-icon {

    background: var(--on-accent-icon-bg);

    color: var(--on-accent);

}

.project-analysis-section .section-action {

    background: var(--cream);

    color: var(--olive-dark);

}





/* Inner project cards stay pistachio */

.project-analysis-section .project-result-card {

    background: var(--pistachio-soft);

    border-color: var(--border);

}





/* Recommended Learning Resources — outer card only */

.resources-section {

    background: var(--accent-solid) !important;

    border-color: var(--accent-solid) !important;

    box-shadow: var(--shadow-pop);

}

.resources-section .card-title {

    color: var(--on-accent);

}

.resources-section .card-icon {

    background: var(--on-accent-icon-bg);

    color: var(--on-accent);

}

.resources-section .section-action {

    background: var(--cream);

    color: var(--olive-dark);

}





/* Inner resource cards stay pistachio */

.resources-section .resource-card {

    background: var(--pistachio-soft);

    border-color: var(--border);

}

.resources-section .resource-skill {

    background: var(--pistachio);

    color: var(--olive-dark);

}

.resources-section .resource-card h4 {

    color: var(--olive-dark);

}

.resources-section .resource-description,

.resources-section .resource-meta {

    color: var(--olive-soft);

}

.resources-section .resource-link {

    background: var(--white);

    color: var(--olive);

}

/* =================================================

   AI CAREER ADVICE

   ================================================= */

.ai-advice-section {

    margin-top: 24px;

}

.ai-advice-content {

    margin-top: 22px;

    line-height: 1.7;

}

.ai-advice-content h4 {

    margin: 24px 0 10px;

    font-size: 18px;

    font-weight: 600;

}

.ai-advice-content h4:first-child {

    margin-top: 0;

}

.ai-advice-content p {

    margin: 0 0 14px;

}

.ai-advice-content ul {

    margin: 8px 0 18px 22px;

    padding: 0;

}

.ai-advice-content li {

    margin-bottom: 8px;

}

.advice-step {

    margin: 8px 0;

}

.advice-spacer {

    height: 6px;

}

/* =========================================================
   ANALYSIS HISTORY
========================================================= */

.analysis-history {
    padding: 95px 0 80px;

    /* Matches .results: the panel starts at the page colour. */

    background:
        linear-gradient(
            180deg,
            var(--ref-page) 0%,
            var(--butter-deep) 100%
        );
}

.analysis-history-list {
    display: grid;
    gap: 12px;
}

.analysis-history-item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    padding: 18px 20px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--cream);
    box-shadow: var(--shadow-soft);
}

.analysis-history-item .analysis-history-content {
    flex: 1;
    min-width: 0;
}

.analysis-history-item .analysis-history-title {
    color: var(--olive-dark);
    font-size: 1rem;
    font-weight: 700;
    margin: 0 0 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.analysis-history-item .analysis-history-preview {
    display: -webkit-box;
    line-clamp: 2;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0 0 8px;
    color: var(--olive-soft);
    font-size: 0.82rem;
    line-height: 1.5;
}

.analysis-history-item .analysis-history-date {
    display: block;
    color: var(--olive-soft);
    font-size: 0.7rem;
}

.analysis-history-item .analysis-history-side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
    flex-shrink: 0;
}

.analysis-history-item .analysis-history-score {
    color: var(--olive-dark);
    font-size: 1.1rem;
    font-weight: 700;
    white-space: nowrap;
}

.analysis-history-item .analysis-history-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-end;
}

.analysis-history-item .history-view-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 9px 15px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--accent-solid);
    color: var(--on-accent);
    font: inherit;
    font-size: 0.76rem;
    font-weight: 750;
    cursor: pointer;
    box-shadow: 0 5px 14px rgba(75, 96, 67, 0.10);
    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.analysis-history-item .history-view-button:hover {
    background: var(--olive-dark);
    border-color: var(--olive-dark);
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(75, 96, 67, 0.14);
}

.analysis-history-item .history-view-button:focus-visible {
    outline: 3px solid var(--ref-green-primary);
    outline-offset: 2px;
}

.analysis-history-item .history-delete-button {
    width: 30px;
    height: 30px;

    padding: 0;

    border: 1px solid var(--border);
    border-radius: 50%;

    background: transparent;
    color: var(--olive-soft);

    font: inherit;
    font-size: 1rem;
    font-weight: 700;

    line-height: 1;

    cursor: pointer;

    transition:
        background 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease;
}

.analysis-history-item .history-delete-button:hover {
    background: rgba(164, 87, 71, 0.08);
    border-color: rgba(164, 87, 71, 0.25);
    color: var(--error-red);

    transform: translateY(-1px);
}

.analysis-history-item .history-delete-button:disabled {
    opacity: 0.5;
    cursor: wait;
}

.analysis-history-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: 20px;
}

/* =========================================================
   INTERVIEW STUDIO — SETUP FORM
========================================================= */

.interview-studio-layout {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: min(1180px, 90%);
    margin: 0 auto;
}

.interview-setup-panel {
    background: var(--cream);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 24px;
    box-shadow: var(--shadow-soft);
}

.interview-setup-header {
    margin-bottom: 20px;
    text-align: center;
}

.interview-setup-header h2 {
    color: var(--olive-dark);
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 0 8px;
}

.interview-setup-description {
    color: var(--olive-soft);
    font-size: 0.9rem;
    margin: 0;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

.interview-setup-form {
    display: flex;
    flex-direction: column;
    gap: 18px;
    max-width: 480px;
    margin: 0 auto;
}

.interview-field-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.interview-field-group label {
    font-size: 0.78rem;
    font-weight: 650;
    color: var(--ref-green-dark);
}

.custom-select {
    position: relative;
    width: 100%;
}

.custom-select-trigger {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 40px 12px 14px;
    border: 1px solid var(--ref-green-border);
    border-radius: 10px;
    background: var(--white);
    color: var(--olive-dark);
    font: inherit;
    font-size: 0.88rem;
    cursor: pointer;
    text-align: left;
    transition: border 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.custom-select-trigger:hover {
    border-color: var(--pistachio);
    background-color: var(--cream);
}

.custom-select-trigger:focus {
    outline: none;
    border-color: var(--pistachio);
    box-shadow: 0 0 0 4px rgba(198, 216, 167, 0.25);
}

.custom-select-trigger:focus-visible {
    outline: 3px solid var(--ref-green-primary);
    outline-offset: 2px;
}

.custom-select-trigger[aria-expanded="true"] {
    border-color: var(--pistachio);
    background-color: var(--cream);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.custom-select-value {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.custom-select-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    color: var(--ref-green-dark);
    transition: transform 0.2s ease;
}

.custom-select-trigger[aria-expanded="true"] .custom-select-arrow {
    transform: rotate(180deg);
}

.custom-select-options {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: -1px;
    padding: 8px 0;
    border: 1px solid var(--ref-green-border);
    border-top: none;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    background: var(--cream);
    box-shadow: var(--shadow-pop);
    list-style: none;
    margin: 0;
    padding: 8px 0;
    z-index: 100;
    max-height: 280px;
    overflow-y: auto;
    display: none;
}

.custom-select-options[hidden] {
    display: none;
}

.custom-select-options:not([hidden]) {
    display: block;
}

.custom-select-option {
    padding: 10px 14px;
    cursor: pointer;
    font-size: 0.88rem;
    color: var(--olive-dark);
    transition: background 0.15s ease, color 0.15s ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.custom-select-option:hover,
.custom-select-option[aria-selected="true"] {
    background: var(--pistachio-soft);
    color: var(--ref-green-dark);
}

.custom-select-option[aria-selected="true"] {
    font-weight: 600;
}

.custom-select-option:focus {
    outline: none;
    background: var(--pistachio-soft);
    color: var(--ref-green-dark);
}

.custom-select-option:focus-visible {
    outline: 2px solid var(--pistachio);
    outline-offset: -2px;
}

.interview-field-group input {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--ref-green-border);
    border-radius: 10px;
    background: var(--white);
    color: var(--olive-dark);
    font: inherit;
    font-size: 0.88rem;
    outline: none;
    transition: border 0.2s ease, box-shadow 0.2s ease;
}

.interview-field-group input:hover {
    border-color: var(--pistachio);
    background-color: var(--white);
}

.interview-field-group input:focus {
    outline: none;
    border-color: var(--pistachio);
    box-shadow: 0 0 0 4px rgba(198, 216, 167, 0.25);
}

.interview-field-group input:invalid {
    color: var(--olive-soft);
}

.interview-generate-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 24px;
    border: 1px solid var(--ref-green-border);
    border-radius: 10px;
    background: var(--ref-green-primary);
    color: var(--white);
    font: inherit;
    font-size: 0.9rem;
    font-weight: 650;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
    margin-top: 8px;
}

.interview-generate-btn:hover:not(:disabled) {
    background: var(--ref-green-dark);
    border-color: var(--ref-green-dark);
    transform: translateY(-1px);
}

.interview-generate-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.interview-generate-btn:focus-visible {
    outline: 3px solid var(--ref-green-primary);
    outline-offset: 2px;
}

.interview-generate-btn .btn-loading {
    display: none;
}

.interview-generate-btn:disabled .btn-text {
    display: none;
}

.interview-generate-btn:disabled .btn-loading {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.interview-generate-btn .spinner {
    width: 18px;
    height: 18px;
    border: 2px solid var(--white);
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.interview-error {
    padding: 12px 16px;
    border-radius: 10px;
    background: #F4E0D9;
    color: #7D4338;
    font-size: 0.85rem;
    border: 1px solid #E8C8C0;
    margin-top: 12px;
    text-align: center;
}

/* =========================================================
   INTERVIEW STUDIO — QUESTION AREA
========================================================= */

.interview-questions-panel {
    background: var(--cream);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-soft);
    overflow: hidden;
}

.interview-questions-header {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 20px 24px;
    border-bottom: 1px solid var(--border);
    background: var(--white);
}

.interview-progress {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.interview-progress-text {
    font-size: 0.85rem;
    font-weight: 650;
    color: var(--ref-green-dark);
}

.interview-progress-bar {
    height: 6px;
    background: var(--pistachio-light);
    border-radius: 3px;
    overflow: hidden;
}

.interview-progress-fill {
    height: 100%;
    width: 0%;
    background: var(--pistachio);
    border-radius: 3px;
    transition: width 0.3s ease;
}

.interview-restart-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border: 1px solid var(--ref-green-border);
    border-radius: 10px;
    background: var(--white);
    color: var(--ref-green-dark);
    font: inherit;
    font-size: 0.8rem;
    font-weight: 650;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    align-self: flex-start;
}

.interview-restart-btn:hover {
    background: var(--ref-green-pale);
    border-color: var(--ref-green-dark);
    color: var(--olive-dark);
}

.interview-restart-btn:focus-visible {
    outline: 3px solid var(--ref-green-primary);
    outline-offset: 2px;
}

.interview-form {
    padding: 16px;
}

.interview-question-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.interview-question-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 16px;
    box-shadow: var(--shadow-soft);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.interview-question-card:hover {
    border-color: var(--pistachio);
    box-shadow: var(--shadow-pop);
}

.interview-question-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    margin-bottom: 10px;
}

.interview-question-type {
    display: inline-flex;
    align-items: center;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.interview-question-type.technical {
    background: var(--pistachio-soft);
    color: var(--olive);
}

.interview-question-type.behavioral {
    background: #E8E0F4;
    color: #4A3B6E;
}

.interview-question-type.project {
    background: #FFF0D8;
    color: #8B6B2E;
}

.interview-question-number {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--olive-soft);
}

.interview-question-text {
    font-size: 0.9rem;
    line-height: 1.55;
    color: var(--olive-dark);
    margin: 0 0 12px;
    font-weight: 500;
}

.interview-answer-input {
    width: 100%;
    min-height: 80px;
    padding: 12px 14px;
    border: 1px solid var(--ref-green-border);
    border-radius: 10px;
    background: var(--white);
    color: var(--olive-dark);
    font: inherit;
    font-size: 0.9rem;
    line-height: 1.55;
    outline: none;
    transition: border 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.interview-answer-input::placeholder {
    color: var(--olive-soft);
}

.interview-answer-input:hover {
    border-color: var(--pistachio);
    background: var(--white);
}

.interview-answer-input:focus {
    border-color: var(--pistachio);
    box-shadow: 0 0 0 4px rgba(198, 216, 167, 0.25);
    background: var(--white);
}

.interview-answer-input:invalid {
    border-color: #E8C8C0;
}

.interview-form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--border);
}

.interview-save-draft-btn,
.interview-submit-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 22px;
    border-radius: 10px;
    font: inherit;
    font-size: 0.88rem;
    font-weight: 650;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.interview-save-draft-btn {
    border: 1px solid var(--ref-green-border);
    background: var(--white);
    color: var(--ref-green-dark);
}

.interview-save-draft-btn:hover:not(:disabled) {
    background: var(--ref-green-pale);
    border-color: var(--ref-green-dark);
    transform: translateY(-1px);
}

.interview-save-draft-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.interview-save-draft-btn:focus-visible {
    outline: 3px solid var(--ref-green-primary);
    outline-offset: 2px;
}

.interview-submit-btn {
    border: 1px solid var(--ref-green-border);
    background: var(--ref-green-primary);
    color: var(--white);
    flex: 1;
    min-width: 180px;
}

.interview-submit-btn:hover:not(:disabled) {
    background: var(--ref-green-dark);
    border-color: var(--ref-green-dark);
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(46, 96, 56, 0.2);
}

.interview-submit-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.interview-submit-btn:focus-visible {
    outline: 3px solid var(--ref-green-primary);
    outline-offset: 2px;
}

.interview-submit-btn .btn-loading,
.interview-save-draft-btn .btn-loading {
    display: none;
}

.interview-submit-btn:disabled .btn-text,
.interview-save-draft-btn:disabled .btn-text {
    display: none;
}

.interview-submit-btn:disabled .btn-loading,
.interview-save-draft-btn:disabled .btn-loading {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.interview-submit-btn .spinner,
.interview-save-draft-btn .spinner {
    width: 18px;
    height: 18px;
    border: 2px solid var(--white);
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@media (max-width: 640px) {
    .interview-questions-header {
        padding: 16px;
    }

    .interview-form {
        padding: 16px;
    }

    .interview-question-card {
        padding: 16px;
    }

    .interview-question-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .interview-question-text {
        font-size: 0.9rem;
    }

    .interview-answer-input {
        min-height: 90px;
        font-size: 0.88rem;
        padding: 12px 14px;
    }

    .interview-form-actions {
        flex-direction: column;
    }

    .interview-save-draft-btn,
    .interview-submit-btn {
        width: 100%;
    }
}

/* =========================================================
   INTERVIEW STUDIO — FEEDBACK MODAL
========================================================= */

.interview-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.interview-modal.hidden {
    display: none;
}

.interview-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(4px);
    animation: interview-modal-fade-in 0.2s ease-out;
}

@keyframes interview-modal-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

.interview-modal-content {
    position: relative;
    width: 100%;
    max-width: 640px;
    max-height: 85vh;
    background: var(--white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-pop);
    overflow: hidden;
    animation: interview-modal-slide-in 0.25s ease-out;
}

@keyframes interview-modal-slide-in {
    from {
        opacity: 0;
        transform: translateY(-20px) scale(0.96);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.interview-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid var(--border);
    background: var(--cream);
}

.interview-modal-header h3 {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--olive-dark);
}

.interview-modal-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: none;
    background: transparent;
    color: var(--olive-soft);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}

.interview-modal-close:hover {
    background: var(--pistachio-soft);
    color: var(--olive-dark);
}

.interview-modal-close:focus-visible {
    outline: 3px solid var(--ref-green-primary);
    outline-offset: 2px;
}

.interview-modal-close svg {
    width: 20px;
    height: 20px;
    stroke-width: 2;
}

.interview-feedback-body {
    padding: 24px;
    max-height: calc(85vh - 80px);
    overflow-y: auto;
}

.interview-feedback-overall {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 28px 20px;
    margin: 0 -24px 24px;
    background: linear-gradient(135deg, var(--pistachio-soft) 0%, var(--pistachio-light) 100%);
    border-bottom: 1px solid var(--pistachio);
    text-align: center;
}

.interview-feedback-score {
    font-size: 3.5rem;
    font-weight: 800;
    line-height: 1;
    color: var(--ref-green-dark);
}

.interview-feedback-label {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--olive-soft);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.interview-feedback-categories {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin-bottom: 24px;
}

.interview-feedback-category {
    background: var(--cream);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 20px;
}

.interview-feedback-category header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
}

.interview-feedback-category h4 {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--olive-dark);
}

.interview-category-score {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--ref-green-dark);
}

.interview-feedback-strengths,
.interview-feedback-gaps {
    margin-bottom: 14px;
}

.interview-feedback-strengths:last-child,
.interview-feedback-gaps:last-child {
    margin-bottom: 0;
}

.interview-feedback-strengths strong,
.interview-feedback-gaps strong {
    display: block;
    font-size: 0.78rem;
    font-weight: 650;
    color: var(--ref-green-dark);
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.interview-feedback-strengths ul,
.interview-feedback-gaps ul {
    margin: 0;
    padding-left: 20px;
    list-style: disc;
}

.interview-feedback-strengths li,
.interview-feedback-gaps li {
    font-size: 0.88rem;
    line-height: 1.55;
    color: var(--olive-dark);
    margin-bottom: 6px;
}

.interview-feedback-strengths li:last-child,
.interview-feedback-gaps li:last-child {
    margin-bottom: 0;
}

.interview-feedback-strengths li:only-child,
.interview-feedback-gaps li:only-child {
    color: var(--olive-soft);
    font-style: italic;
}

.interview-feedback-weak-areas {
    margin-bottom: 24px;
    padding: 20px;
    background: #FFF8E8;
    border: 1px solid #F0D8A0;
    border-radius: var(--radius-md);
}

.interview-feedback-weak-areas h4 {
    margin: 0 0 12px;
    font-size: 0.95rem;
    font-weight: 700;
    color: #8B6B2E;
}

.interview-feedback-weak-areas ul {
    margin: 0;
    padding-left: 20px;
    list-style: disc;
}

.interview-feedback-weak-areas li {
    font-size: 0.88rem;
    line-height: 1.55;
    color: #5C4D28;
    margin-bottom: 6px;
}

.interview-feedback-weak-areas li:last-child {
    margin-bottom: 0;
}

.interview-feedback-recommendations {
    margin-bottom: 0;
}

.interview-feedback-recommendations h4 {
    margin: 0 0 16px;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--olive-dark);
}

.interview-feedback-recommendations ul {
    margin: 0;
    padding-left: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.interview-feedback-recommendations li {
    padding: 16px;
    background: var(--cream);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    line-height: 1.6;
}

.interview-feedback-recommendations li strong {
    color: var(--olive-dark);
    font-weight: 600;
}

.interview-feedback-recommendations .interview-feedback-resources {
    margin: 10px 0 0 0;
    padding-left: 20px;
    list-style: disc;
}

.interview-feedback-recommendations .interview-feedback-resources li {
    margin-bottom: 4px;
}

.interview-feedback-recommendations .interview-feedback-resources li:last-child {
    margin-bottom: 0;
}

.interview-feedback-resources a {
    color: var(--ref-green-dark);
    font-size: 0.82rem;
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color 0.2s;
}

.interview-feedback-resources a:hover {
    color: var(--ref-green-primary);
}

@media (max-width: 640px) {
    .interview-modal {
        padding: 12px;
    }

    .interview-modal-content {
        max-height: 90vh;
        border-radius: var(--radius-md);
    }

    .interview-modal-header {
        padding: 16px 20px;
    }

    .interview-modal-header h3 {
        font-size: 1.05rem;
    }

    .interview-feedback-body {
        padding: 20px 16px;
        max-height: calc(90vh - 70px);
    }

    .interview-feedback-overall {
        margin: 0 -16px 20px;
        padding: 24px 16px;
    }

    .interview-feedback-score {
        font-size: 2.75rem;
    }

    .interview-feedback-category {
        padding: 16px;
    }

    .interview-feedback-category header {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

    .interview-feedback-weak-areas,
    .interview-feedback-recommendations li {
        padding: 14px;
    }

    .interview-feedback-recommendations ul {
        gap: 10px;
    }
}

/* =========================================================
   INTERVIEW STUDIO — HISTORY
========================================================= */

.interview-history-panel {
    background: var(--cream);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-soft);
    overflow: hidden;
}

.interview-history-header {
    padding: 20px 24px;
    border-bottom: 1px solid var(--border);
    background: var(--white);
}

.interview-history-header h3 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--olive-dark);
}

.interview-history-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 20px 24px;
}

.interview-history-card {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 16px 20px;
    align-items: start;
    padding: 18px 20px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--white);
    box-shadow: var(--shadow-soft);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.interview-history-card:hover {
    border-color: var(--pistachio);
    box-shadow: var(--shadow-pop);
}

.interview-history-card header {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.interview-history-mode {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--ref-green-dark);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.interview-history-date {
    font-size: 0.72rem;
    color: var(--olive-soft);
}

.interview-history-main {
    min-width: 0;
}

.interview-history-main h4 {
    margin: 0 0 4px;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--olive-dark);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.interview-history-score {
    display: inline-block;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--ref-green-dark);
    background: var(--pistachio-soft);
    border: 1px solid var(--pistachio);
    border-radius: 999px;
    padding: 2px 10px;
}

.interview-history-card footer {
    grid-column: 1 / -1;
    margin-top: 4px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}

.interview-history-delete {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--white);
    color: var(--olive-soft);
    font: inherit;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.interview-history-delete:hover {
    background: var(--danger-soft);
    border-color: #E8C8C0;
    color: var(--error-red);
}

.interview-history-delete:focus-visible {
    outline: 3px solid var(--ref-green-primary);
    outline-offset: 2px;
}

.interview-empty,
.interview-loading,
.interview-error {
    padding: 32px 24px;
    text-align: center;
}

.interview-empty p,
.interview-loading p {
    margin: 0;
    font-size: 0.9rem;
    color: var(--olive-soft);
}

.interview-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.interview-error {
    margin: 20px 24px;
    padding: 12px 16px;
    border-radius: 10px;
    background: #F4E0D9;
    color: #7D4338;
    font-size: 0.85rem;
    border: 1px solid #E8C8C0;
}

@media (max-width: 640px) {
    .interview-history-header {
        padding: 16px 20px;
    }

    .interview-history-list {
        padding: 16px 20px;
    }

    .interview-history-card {
        grid-template-columns: 1fr;
        gap: 12px;
        padding: 16px;
    }

    .interview-history-card header {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 8px 12px;
    }

    .interview-history-card footer {
        grid-column: 1;
        margin-top: 0;
        padding-top: 8px;
    }

    .interview-history-main h4 {
        font-size: 0.9rem;
    }

    .interview-empty,
    .interview-loading,
    .interview-error {
        padding: 24px 20px;
    }
}

/* =========================================================
   INTERVIEW STUDIO — REVIEW PANEL
========================================================= */

.interview-review-panel {
    background: var(--cream);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-soft);
    overflow: hidden;
}

.interview-review-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
    background: var(--white);
    flex-wrap: wrap;
}

.interview-review-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border: 1px solid var(--ref-green-border);
    border-radius: 10px;
    background: var(--white);
    color: var(--ref-green-dark);
    font: inherit;
    font-size: 0.8rem;
    font-weight: 650;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.interview-review-back:hover {
    background: var(--ref-green-pale);
    border-color: var(--ref-green-dark);
    color: var(--olive-dark);
}

.interview-review-back:focus-visible {
    outline: 3px solid var(--ref-green-primary);
    outline-offset: 2px;
}

.interview-review-header h3 {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--olive-dark);
}

.interview-review-body {
    padding: 20px;
    max-height: 70vh;
    overflow-y: auto;
}

.interview-review-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 16px;
    margin-bottom: 20px;
    padding: 16px;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}

.interview-review-meta-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.interview-review-meta-label {
    font-size: 0.68rem;
    font-weight: 650;
    color: var(--olive-soft);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.interview-review-meta-value {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--olive-dark);
}

.interview-review-score {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: var(--pistachio-soft);
    border: 1px solid var(--pistachio);
    border-radius: 999px;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--ref-green-dark);
}

.interview-review-section {
    margin-bottom: 20px;
}

.interview-review-section-title {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--olive-dark);
    margin-bottom: 12px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border);
}

.interview-review-qa {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.interview-review-qa-item {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 16px;
}

.interview-review-qa-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    margin-bottom: 8px;
}

.interview-review-qa-type {
    display: inline-flex;
    align-items: center;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.interview-review-qa-type.technical {
    background: var(--pistachio-soft);
    color: var(--olive);
}

.interview-review-qa-type.behavioral {
    background: #E8E0F4;
    color: #4A3B6E;
}

.interview-review-qa-type.project {
    background: #FFF0D8;
    color: #8B6B2E;
}

.interview-review-qa-number {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--olive-soft);
}

.interview-review-qa-question {
    font-size: 0.9rem;
    line-height: 1.55;
    color: var(--olive-dark);
    margin: 0 0 10px;
    font-weight: 500;
}

.interview-review-qa-answer {
    font-size: 0.88rem;
    line-height: 1.55;
    color: var(--olive-dark);
    padding: 12px;
    background: var(--cream);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    margin: 0;
}

.interview-review-qa-answer.empty {
    color: var(--olive-soft);
    font-style: italic;
}

.interview-review-feedback-categories {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.interview-review-feedback-category {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 14px;
}

.interview-review-feedback-category-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.interview-review-feedback-category-name {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--olive-dark);
    text-transform: capitalize;
}

.interview-review-feedback-category-score {
    font-size: 1rem;
    font-weight: 700;
    color: var(--ref-green-dark);
}

.interview-review-feedback-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.interview-review-feedback-label {
    font-size: 0.7rem;
    font-weight: 650;
    color: var(--ref-green-dark);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 6px;
}

.interview-review-feedback-list ul {
    margin: 0;
    padding-left: 18px;
    list-style: disc;
}

.interview-review-feedback-list li {
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--olive-dark);
}

.interview-review-weak-areas {
    background: #FFF8E8;
    border: 1px solid #F0D8A0;
    border-radius: var(--radius-sm);
    padding: 14px;
}

.interview-review-weak-areas ul {
    margin: 0;
    padding-left: 18px;
    list-style: disc;
}

.interview-review-weak-areas li {
    font-size: 0.85rem;
    line-height: 1.5;
    color: #5C4D28;
}

.interview-review-recommendations {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.interview-review-recommendation {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 14px;
}

.interview-review-recommendation-header {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 8px;
}

.interview-review-recommendation-area {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--olive-dark);
}

.interview-review-recommendation-action {
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--olive-dark);
}

.interview-review-recommendation-resources {
    margin: 8px 0 0 0;
    padding-left: 18px;
    list-style: disc;
}

.interview-review-recommendation-resources li {
    font-size: 0.78rem;
    line-height: 1.5;
    color: var(--olive-soft);
}

.interview-review-recommendation-resources a {
    color: var(--ref-green-dark);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.interview-review-recommendation-resources a:hover {
    color: var(--ref-green-primary);
}

@media (max-width: 640px) {
    .interview-review-header {
        padding: 14px 16px;
    }

    .interview-review-header h3 {
        font-size: 1rem;
    }

    .interview-review-body {
        padding: 16px;
    }

    .interview-review-meta {
        padding: 14px;
        gap: 10px 14px;
    }

    .interview-review-qa-item,
    .interview-review-feedback-category,
    .interview-review-recommendation {
        padding: 12px;
    }
}

/* History card clickable style */
.interview-history-card {
    cursor: pointer;
}

.interview-history-card:focus-visible {
    outline: 3px solid var(--ref-green-primary);
    outline-offset: 2px;
}

.interview-history-card:hover {
    border-color: var(--pistachio);
    box-shadow: var(--shadow-pop);
}

.interview-history-card:active {
    transform: scale(0.99);
}

/* Ensure delete button doesn't trigger card click */
.interview-history-delete {
    cursor: pointer;
}

/* =========================================================
   RESULT VIEW MODE
========================================================= */

.result-view-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 22px;
    padding: 16px 18px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--cream);
    box-shadow: var(--shadow-soft);
}

.result-view-label {
    display: block;
    color: var(--olive-dark);
    font-size: 0.86rem;
    font-weight: 800;
}

.result-view-description {
    display: block;
    margin-top: 4px;
    color: var(--olive-soft);
    font-size: 0.76rem;
}

.back-to-current-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 9px 15px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--accent-solid);
    color: var(--on-accent);
    font: inherit;
    font-size: 0.76rem;
    font-weight: 750;
    cursor: pointer;
    transition:
        background 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.back-to-current-button:hover {
    background: var(--olive-dark);
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(75, 96, 67, 0.14);
}

.back-to-current-button:focus-visible {
    outline: 3px solid var(--ref-green-primary);
    outline-offset: 2px;
}

/* =========================================================
   ANALYSIS TABS
========================================================= */

.analysis-tabs {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin: 0 auto;
    padding: 16px 20px 0;
}

/* Leave room before the footer only when no workspace follows the tabs. */
.analysis-tabs:not(.hidden):not(:has(~ section:not(.hidden))) {
    padding-bottom: 32px;
}

.analysis-tab {
    padding: 10px 18px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--cream);
    color: var(--olive-soft);
    font: inherit;
    font-size: 0.78rem;
    font-weight: 750;
    cursor: pointer;
    transition:
        background 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease;
}

.analysis-tab:hover:not(:disabled) {
    transform: translateY(-1px);
    border-color: var(--olive);
}

.analysis-tab.active {
    background: var(--accent-solid);
    border-color: var(--accent-solid);
    color: var(--on-accent);
}

.analysis-tab:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

/* Keyboard parity with the pointer states above; the ring token is
   bright enough on both the tab fill and the page behind it. */
.analysis-tab:focus-visible {
    outline: 3px solid var(--ref-green-primary);
    outline-offset: 2px;
}

.saved-analysis-header {
    margin-bottom: 24px;
}

.saved-analysis-header h2 {
    margin-top: 4px;
}

.saved-analysis-header p {
    margin-top: 6px;
    color: var(--olive-soft);
    font-size: 0.86rem;
}

/* =========================================================

   ATS JOB DESCRIPTION KEYWORDS

========================================================= */

.ats-card {

    padding: 30px;

}

.ats-note {

    margin: 0 0 18px;

    color: var(--olive-soft);

    font-size: 0.9rem;

    line-height: 1.5;

}

.ats-list {

    display: flex;

    flex-direction: column;

    gap: 8px;

    margin: 0;

    padding: 0;

    list-style: none;

}

.ats-keyword {

    display: flex;

    align-items: center;

    gap: 12px;

    padding: 10px 14px;

    background: var(--pistachio-soft);

    border: 1px solid var(--border);

    border-radius: var(--radius-sm);

}

.ats-term {

    flex: 1;

    font-weight: 600;

    color: var(--olive-dark);

    overflow-wrap: anywhere;

}

.ats-badge {

    flex-shrink: 0;

    padding: 3px 10px;

    border-radius: 999px;

    background: var(--butter-deep);

    color: var(--olive-dark);

    font-size: 0.75rem;

    font-weight: 700;

    letter-spacing: 0.04em;

    text-transform: uppercase;

}

.ats-badge--required {

    background: var(--accent-solid);

    color: var(--on-accent);

}

.ats-badge--preferred {

    background: var(--pistachio);

    color: var(--olive-dark);

}

.ats-frequency {

    flex-shrink: 0;

    min-width: 2.5em;

    color: var(--olive-soft);

    font-size: 0.8rem;

    font-variant-numeric: tabular-nums;

    text-align: right;

}


/* =========================================================
   ATS RESUME SCORECARD
   ========================================================= */

.ats-score-card {
    padding: 32px;
}

.ats-score-card .card-title {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.ats-title-group {
    flex: 1;
    min-width: 180px;
}

.ats-title-group h3 {
    margin: 0 0 4px;
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--olive-dark);
}

.ats-subtitle {
    margin: 0;
    font-size: 0.85rem;
    color: var(--olive-soft);
    font-weight: 500;
}

.ats-job-badge {
    flex-shrink: 0;
    padding: 4px 12px;
    border-radius: 999px;
    background: var(--pistachio);
    color: var(--olive-dark);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.ats-score-row {
    display: flex;
    gap: 24px;
    align-items: flex-start;
    margin-bottom: 28px;
    flex-wrap: wrap;
}

.ats-gauge {
    flex-shrink: 0;
    width: 160px;
    height: 160px;
    position: relative;
    --gauge-color: var(--ref-green-dark);
    --score: 0;
}

.ats-gauge svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.ats-gauge-track {
    fill: none;
    stroke: var(--border);
    stroke-width: 10;
}

.ats-gauge-progress {
    fill: none;
    stroke: var(--gauge-color);
    stroke-width: 10;
    stroke-linecap: round;
    transition: stroke-dashoffset 0.8s ease-out;
}

.ats-gauge-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    pointer-events: none;
}

.ats-score-number {
    display: block;
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--olive-dark);
    line-height: 1.1;
}

.ats-score-denominator {
    display: block;
    font-size: 1rem;
    color: var(--olive-soft);
    font-weight: 500;
    margin-top: 2px;
}

.ats-score-label {
    display: block;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--olive-soft);
    margin-top: 4px;
}

.ats-keyword-metric {
    flex: 1;
    min-width: 180px;
    padding: 16px 20px;
    background: var(--pistachio-soft);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    text-align: center;
}

.ats-metric-value {
    display: block;
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--olive-dark);
    line-height: 1.1;
}

.ats-metric-label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--olive);
    margin-top: 4px;
}

.ats-metric-note {
    margin: 6px 0 0;
    font-size: 0.75rem;
    color: var(--olive-soft);
}

.ats-weaknesses,
.ats-improvements {
    margin-top: 20px;
    padding: 16px 20px;
    background: var(--pistachio-soft);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
}

.ats-weaknesses h4,
.ats-improvements h4 {
    margin: 0 0 12px;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--olive-dark);
    display: flex;
    align-items: center;
    gap: 8px;
}

.ats-weakness-icon,
.ats-improve-icon {
    font-size: 1rem;
}

.ats-weakness-list,
.ats-improvement-list {
    margin: 0;
    padding: 0 0 0 20px;
    list-style: none;
}

.ats-weakness-list li,
.ats-improvement-list li {
    margin-bottom: 8px;
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--olive);
    position: relative;
    padding-left: 4px;
}

.ats-weakness-list li strong {
    color: var(--olive-dark);
}

.improvement-number {
    display: inline-flex;
    width: 22px;
    height: 22px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--accent-solid);
    color: var(--on-accent);
    font-size: 0.7rem;
    font-weight: 800;
    margin-right: 8px;
    flex-shrink: 0;
}

.ats-breakdown {
    margin-top: 20px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--cream);
}

.ats-breakdown summary {
    padding: 14px 20px;
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--olive-dark);
    cursor: pointer;
    list-style: none;
    background: var(--pistachio-soft);
    border-bottom: 1px solid var(--border);
}

.ats-breakdown summary::-webkit-details-marker {
    display: none;
}

.ats-breakdown summary::before {
    content: "▸ ";
    display: inline-block;
    transition: transform 0.2s ease;
    font-size: 0.7rem;
}

.ats-breakdown[open] summary::before {
    transform: rotate(90deg);
}

.ats-breakdown-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
}

.ats-breakdown-table th,
.ats-breakdown-table td {
    padding: 10px 14px;
    text-align: left;
    border-bottom: 1px solid var(--border);
}

.ats-breakdown-table th {
    background: var(--pistachio-soft);
    font-weight: 700;
    color: var(--olive-dark);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.ats-breakdown-table td {
    color: var(--olive);
}

.ats-breakdown-table tr:last-child td {
    border-bottom: none;
}

.ats-points-awarded {
    font-weight: 800;
    color: var(--ref-green-dark);
}

.ats-points-max {
    color: var(--olive-soft);
    font-size: 0.75rem;
}

.ats-disclaimer {
    margin: 16px 20px 0;
    padding-top: 16px;
    border-top: 1px solid var(--border);
    font-size: 0.75rem;
    color: var(--olive-soft);
    line-height: 1.5;
}

.ats-job-badge {
    flex-shrink: 0;
    padding: 4px 12px;
    border-radius: 999px;
    background: var(--pistachio);
    color: var(--olive-dark);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.ats-job-badge.general {
    background: var(--butter);
    color: var(--olive-dark);
}

/* =========================================================
   ATS CHECK REPORT (Resume Builder)
   ========================================================= */

.ats-check-report {
    padding: 24px;
}

.ats-check-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
    flex-wrap: wrap;
    gap: 12px;
}

.ats-check-header h3 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--olive-dark);
}

.ats-dimensions {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 24px;
}

.ats-dimension-card {
    padding: 20px;
    background: var(--cream);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
}

.ats-dimension-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
    flex-wrap: wrap;
    gap: 8px;
}

.ats-dimension-header strong {
    font-size: 1rem;
    font-weight: 700;
    color: var(--olive-dark);
}

.ats-dimension-score {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--ref-green-dark);
    background: var(--pistachio);
    padding: 4px 12px;
    border-radius: 999px;
}

.ats-dimension-desc {
    margin: 0 0 12px;
    font-size: 0.85rem;
    color: var(--olive-soft);
    line-height: 1.5;
}

.ats-dimension-strengths,
.ats-dimension-weaknesses {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
    font-size: 0.85rem;
    line-height: 1.6;
}

.ats-dimension-strengths strong {
    color: var(--ref-green-dark);
}

.ats-dimension-weaknesses strong {
    color: var(--error-red);
}

.ats-dimension-strengths ul,
.ats-dimension-weaknesses ul {
    margin: 8px 0 0 18px;
    padding: 0;
}

.ats-dimension-strengths li,
.ats-dimension-weaknesses li {
    margin: 4px 0;
}

.ats-improvements {
    margin-top: 24px;
    padding: 20px;
    background: var(--pistachio-soft);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
}

.ats-improvements h4 {
    margin: 0 0 12px;
    font-size: 1rem;
    font-weight: 700;
    color: var(--olive-dark);
    display: flex;
    align-items: center;
    gap: 8px;
}

.ats-improve-icon {
    font-size: 1.1em;
}

.ats-improvement-list {
    margin: 0;
    padding-left: 20px;
}

.ats-improvement-list li {
    margin: 8px 0;
    line-height: 1.5;
    font-size: 0.9rem;
    color: var(--olive);
}

.improvement-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    margin-right: 8px;
    background: var(--ref-green-dark);
    color: var(--white);
    border-radius: 50%;
    font-size: 0.7rem;
    font-weight: 700;
    flex-shrink: 0;
}

.ats-disclaimer {
    margin-top: 24px;
}

.ats-disclaimer summary {
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--olive-soft);
    padding: 8px 0;
}

.ats-disclaimer p {
    margin-top: 8px;
    font-size: 0.8rem;
    color: var(--olive-soft);
    line-height: 1.5;
}

.ats-check-error {
    padding: 20px;
    background: var(--error-red);
    color: var(--white);
    border-radius: var(--radius-md);
    font-weight: 500;
}

.ats-retry-btn {
    margin-top: 12px;
    padding: 8px 16px;
    background: var(--white);
    color: var(--error-red);
    border: 1px solid var(--error-red);
    border-radius: var(--radius-sm);
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}

.ats-retry-btn:hover {
    background: var(--error-red);
    color: var(--white);
}

/* =========================================================
   ATS CHECK MODAL
   ========================================================= */

.ats-check-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.ats-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
}

.ats-modal-content {
    position: relative;
    width: 100%;
    max-width: 560px;
    background: var(--white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-pop);
    overflow: hidden;
    animation: ats-modal-slide-in 0.2s ease-out;
}

@keyframes ats-modal-slide-in {
    from {
        opacity: 0;
        transform: translateY(-20px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.ats-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid var(--border);
}

.ats-modal-header h3 {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--olive-dark);
}

.ats-modal-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: none;
    background: transparent;
    color: var(--olive-soft);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}

.ats-modal-close:hover {
    background: var(--butter);
    color: var(--olive-dark);
}

.ats-modal-body {
    padding: 24px;
    max-height: 60vh;
    overflow-y: auto;
}

.ats-modal-resume-info {
    margin: 0 0 20px;
    padding: 12px 16px;
    background: var(--pistachio-soft);
    border: 1px solid var(--pistachio);
    border-radius: var(--radius-md);
    font-size: 0.9rem;
    color: var(--olive-dark);
}

.ats-mode-fieldset,
.ats-source-fieldset {
    margin-bottom: 20px;
    padding: 0;
    border: none;
}

.ats-mode-fieldset legend,
.ats-source-fieldset legend {
    margin-bottom: 12px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--olive);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.ats-mode-options,
.ats-source-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ats-mode-option,
.ats-source-option {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border: 2px solid var(--border);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
}

.ats-mode-option:hover,
.ats-source-option:hover {
    border-color: var(--pistachio);
    background: var(--pistachio-soft);
}

.ats-mode-option input,
.ats-source-option input {
    margin-top: 2px;
    accent-color: var(--ref-green-dark);
}

.ats-mode-label,
.ats-source-label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}

.ats-mode-label strong,
.ats-source-label strong {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--olive-dark);
}

.ats-mode-desc,
.ats-source-desc {
    font-size: 0.78rem;
    color: var(--olive-soft);
    line-height: 1.4;
}

.ats-job-description-field,
.ats-upload-field {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
    animation: ats-fade-in 0.2s ease-out;
}

@keyframes ats-fade-in {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.ats-job-description-field label,
.ats-upload-field label {
    display: block;
    margin-bottom: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--olive);
}

.ats-job-description-field textarea {
    width: 100%;
    min-height: 110px;
    max-height: 300px;
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    font-family: inherit;
    font-size: 0.9rem;
    line-height: 1.6;
    resize: none;
    background: var(--cream);
    transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}

.ats-job-description-field textarea:hover {
    background: var(--white);
    border-color: var(--pistachio);
}

.ats-job-description-field textarea:focus {
    outline: none;
    border-color: var(--ref-green-dark);
    box-shadow: 0 0 0 3px rgba(49, 93, 59, 0.15);
    background: var(--white);
}

.ats-file-upload-wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ats-file-upload-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    z-index: 2;
}

.ats-file-upload-label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 24px 20px;
    border: 2px dashed var(--border);
    border-radius: var(--radius-md);
    background: var(--pistachio-soft);
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
}

.ats-file-upload-label:hover {
    border-color: var(--pistachio);
    background: var(--pistachio-light);
}

.ats-file-upload-input:focus + .ats-file-upload-label {
    outline: none;
    border-color: var(--ref-green-dark);
    box-shadow: 0 0 0 3px rgba(49, 93, 59, 0.15);
}

.ats-file-upload-icon {
    font-size: 1.5rem;
    color: var(--ref-green-dark);
}

.ats-file-upload-text {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--olive-dark);
}

.ats-file-upload-hint {
    font-size: 0.8rem;
    color: var(--olive-soft);
}

.ats-file-selected {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    border: 1px solid var(--pistachio);
    border-radius: var(--radius-md);
    background: var(--pistachio-soft);
    animation: ats-fade-in 0.2s ease-out;
}

.ats-file-name {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--olive-dark);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

.ats-file-remove {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    background: var(--border);
    color: var(--olive);
    border-radius: var(--radius-sm);
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
    flex-shrink: 0;
}

.ats-file-remove:hover {
    background: var(--error-red);
    color: var(--white);
}

.ats-file-remove:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(200, 50, 50, 0.3);
}

.ats-file-upload-input:disabled + .ats-file-upload-label {
    opacity: 0.5;
    cursor: not-allowed;
}

.ats-field-hint {
    margin-top: 6px;
    font-size: 0.75rem;
    color: var(--olive-soft);
    text-align: right;
}

.ats-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 24px;
    border-top: 1px solid var(--border);
    background: var(--pistachio-soft);
}

.ats-modal-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: var(--radius-md);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.ats-modal-btn.secondary {
    border: 1px solid var(--border);
    background: var(--white);
    color: var(--olive);
}

.ats-modal-btn.secondary:hover:not(:disabled) {
    border-color: var(--pistachio);
    background: var(--pistachio-soft);
    color: var(--olive-dark);
}

.ats-modal-btn.primary {
    border: none;
    background: var(--ref-green-dark);
    color: var(--white);
}

.ats-modal-btn.primary:hover:not(:disabled) {
    background: var(--olive-dark);
}

.ats-modal-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.ats-btn-loading {
    display: flex;
    align-items: center;
    gap: 8px;
}

.loading-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid var(--white);
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.ats-hidden {
    display: none !important;
}

.ats-dimension-not-assessed {
    color: var(--olive-soft);
    font-style: italic;
    font-weight: 500;
}

.ats-dimension-not-assessed-card {
    opacity: 0.7;
    background: var(--butter-deep);
}

@media (max-width: 768px) {
    .ats-score-row {
        flex-direction: column;
        align-items: center;
    }

    .ats-gauge {
        width: 140px;
        height: 140px;
    }

    .ats-keyword-metric {
        width: 100%;
    }

    .ats-breakdown-table th,
    .ats-breakdown-table td {
        padding: 8px 10px;
        font-size: 0.75rem;
    }
}


/* =========================================================
   DASHBOARD NAVIGATION SHELL
========================================================= */

/* The phone capsule nav wraps the tabs in a scroll viewport (see
   the 700px block below). Outside that layout the wrapper is
   transparent to layout and the glider stays hidden, so wider
   screens keep the desktop pill exactly as it is. */
.primary-nav-scroll {

    display: contents;

}

.primary-nav-icon {

    display: none;

}

.primary-nav-glider {

    display: none;

}

.primary-nav {

    display: flex;

    align-items: center;

    gap: 10px;

}

.primary-nav-btn {

    padding: 9px 16px;

    border: 1px solid var(--ref-green-border);

    border-radius: 12px;

    background: var(--ref-page);

    color: var(--ref-green-dark);

    font: inherit;
    font-size: 0.85rem;
    font-weight: 650;

    cursor: pointer;

    transition:
        background 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease;

    white-space: nowrap;

}

.primary-nav-btn:hover {

    border-color: var(--ref-green-primary);

}

.primary-nav-btn.active {

    background: var(--ref-green-primary);
    border-color: var(--ref-green-primary);

    color: var(--white);

}

/* Homepage tab pill (Part 2, section 1).

   Scoped to bodies without .account-page so the single "Back to
   CareerGap" nav on profile.html and settings.html keeps its current
   look, including the flat bar. The pill surface is reset again in the
   700px scroll row below, where the right-edge fade would otherwise
   clip its background. */

body:not(.account-page) .navbar {

    box-shadow: var(--navbar-shadow);

}

body:not(.account-page) .primary-nav {

    gap: 2px;

    padding: 4px;

    border: 1px solid var(--border);

    border-radius: 999px;

    background: var(--cream);

}

body:not(.account-page) .primary-nav .primary-nav-btn {

    border-color: transparent;

    border-radius: 999px;

    background: transparent;

    color: var(--ref-green-dark);

    transition:
        background 0.18s ease,
        color 0.18s ease,
        box-shadow 0.18s ease;

}

body:not(.account-page) .primary-nav .primary-nav-btn:hover {

    border-color: transparent;

    background: var(--pistachio-soft);

}

body:not(.account-page) .primary-nav .primary-nav-btn.active {

    border-color: var(--ref-green-primary);

    background: var(--ref-green-primary);

    color: var(--white);

    box-shadow: var(--nav-pill-shadow);

}

body:not(.account-page) .primary-nav .primary-nav-btn:focus-visible {

    outline: 3px solid var(--ref-green-primary);

    outline-offset: 2px;

}

.dashboard-concept-badge {

    padding: 5px 11px;

    border: 1px solid var(--ref-green-border);
    border-radius: 999px;

    background: var(--ref-green-pale);

    color: var(--ref-green-dark);

    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;

    white-space: nowrap;

}

.nav-divider {

    height: 1px;

    background: var(--border);

}

.page-intro {

    /* Generous but consistent with the 24-40px scale the sections above
        use; the analyzer's eyebrow sat only ~4px under this intro text
        before, reading as one jumbled block. */
    padding: 28px 0 20px;

}

.page-intro-inner {

    width: min(1180px, 90%);

    margin: auto;

}

.page-intro-heading {

    margin: 0;

    color: var(--ref-green-dark);

    font-size: 1.6rem;
    font-weight: 700;

}

.page-intro-text {

    margin: 8px 0 0;

    color: var(--olive-soft);

    font-size: 0.92rem;

}

.analysis-subnav {

    position: sticky;

    top: var(--navbar-offset);

    z-index: 50;

    margin: 0 0 24px;

}

.analysis-subnav-inner {

    width: min(1180px, 90%);

    margin: auto;

    padding: 20px 24px;

    background: var(--white);

    border: 1px solid var(--ref-green-border);
    border-radius: var(--radius-lg);

}

.analysis-subnav-heading {

    margin: 0 0 14px;

    color: var(--ref-green-dark);

    font-size: 1rem;
    font-weight: 700;

}

.analysis-subnav-tabs {

    display: flex;

    flex-wrap: wrap;

    gap: 8px;

}

.analysis-subnav-tab {

    padding: 8px 14px;

    border: 1px solid var(--ref-green-border);
    border-radius: 10px;

    background: var(--ref-green-pale);

    color: var(--ref-green-dark);

    font: inherit;
    font-size: 0.8rem;
    font-weight: 650;

    cursor: pointer;

    transition:
        background 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease;

}

.analysis-subnav-tab:hover:not(:disabled) {

    border-color: var(--ref-green-primary);

}

.analysis-subnav-tab.active {

    background: var(--ref-green-primary);
    border-color: var(--ref-green-primary);

    color: var(--white);

}

.analysis-subnav-tab:disabled {

    opacity: 0.5;

    cursor: not-allowed;

}

/* Keyboard parity with the pointer and active states above. The ring
   keeps working when the active (filled) tab is focused, because the
   outline sits 2px outside the tab on the darker strip. */
.analysis-subnav-tab:focus-visible {

    outline: 3px solid var(--ref-green-primary);

    outline-offset: 2px;

}

.analysis-subnav-hint {

    margin: 14px 0 0;

    color: var(--olive-soft);

    font-size: 0.8rem;

}

.workspace-section {

    /* 40px matches the pillars' bottom margin, so signed-in panels no
       longer end just 8px above the footer band. */
    padding: 24px 0 40px;

}

.workspace-panel {

    width: min(1180px, 90%);

    margin: auto;

    padding: 34px;

    background: var(--white);

    border: 1px solid var(--ref-green-border);
    border-radius: var(--radius-lg);

}

.workspace-panel h2 {

    margin: 4px 0 0;

    color: var(--ref-green-dark);

    font-size: 1.5rem;

}

.workspace-note {

    margin: 12px 0 0;

    color: var(--olive-soft);

    font-size: 0.92rem;

    line-height: 1.6;

    max-width: 62ch;

}

/* Secondary-nav targets sit below the sticky stack (navbar 76px plus the
   analysis subnav), otherwise scrollIntoView tucks them underneath it. */

#analyze,
#results,
#saved-analysis,
#overview-section,
#skills-section,
#projects-section,
#keywords-section,
#resources-section,
#ai-advice-section {

    scroll-margin-top: calc(
        var(--navbar-offset) +
        var(--subnav-offset) +
        16px
    );

}

/* Workspaces whose analysis subnav is hidden sit
   below the sticky navbar only. */

#resume-builder,
#analysis-history {

    scroll-margin-top: calc(
        var(--navbar-offset) +
        16px
    );

}

/* Desktop-first reference layout. Below 900px the navbar becomes a
   two-row shell: brand plus controls first, then a horizontally
   scrollable tab row. DOM order is also the focus order, so the
   markup already lists the tabs last - no visual reordering. */

@media (max-width: 900px) {

    .nav-inner {

        height: auto;

        padding: 14px 0;

        flex-wrap: wrap;

    }

}

@media (max-width: 700px) {

    .primary-nav {

        width: 100%;

        /* A flex scroll container must be allowed to shrink below
           its content width. */
        min-width: 0;

        overflow-x: auto;

        padding-bottom: 4px;

        /* Touch-scrollable tab row: hide the native scrollbar and
           fade the right edge. The mask is painted after scrolling,
           so the fade stays pinned to the viewport in both themes. */
        scrollbar-width: none;

        -webkit-mask-image: linear-gradient(
            to right,
            #000 calc(100% - 24px),
            transparent
        );

        mask-image: linear-gradient(
            to right,
            #000 calc(100% - 24px),
            transparent
        );

    }

    /* Phone capsule nav: the wrapper below scrolls and carries the
       edge fades, so the homepage tabs keep the desktop pill
       surface while they move inside it. */
    .primary-nav-scroll {

        display: block;

        width: 100%;

        /* A flex scroll container must be allowed to shrink below
           its content width. */
        min-width: 0;

        overflow-x: auto;

        /* Touch-scrollable capsule: hide the native scrollbar and
           fade the right edge while more tabs sit off-screen. The
           mask is painted after scrolling, so the fade stays
           pinned to the viewport in both themes. */
        scrollbar-width: none;

        -webkit-mask-image: linear-gradient(
            to right,
            #000 calc(100% - 24px),
            transparent
        );

        mask-image: linear-gradient(
            to right,
            #000 calc(100% - 24px),
            transparent
        );

    }

    .primary-nav-scroll::-webkit-scrollbar {

        display: none;

    }

    /* Once the capsule has been scrolled, tabs also disappear off
       the left edge, so that side fades too. */
    .primary-nav-scroll.nav-scrolled {

        -webkit-mask-image: linear-gradient(
            to right,
            transparent,
            #000 24px,
            #000 calc(100% - 24px),
            transparent
        );

        mask-image: linear-gradient(
            to right,
            transparent,
            #000 24px,
            #000 calc(100% - 24px),
            transparent
        );

    }

    /* At the end of the capsule only the left fade remains. */
    .primary-nav-scroll.nav-scroll-end {

        -webkit-mask-image: linear-gradient(
            to right,
            transparent,
            #000 24px
        );

        mask-image: linear-gradient(
            to right,
            transparent,
            #000 24px
        );

    }

    .primary-nav-scroll.nav-no-overflow {
        -webkit-mask-image: none;
        mask-image: none;
    }

    body:not(.account-page) .primary-nav {

        width: max-content;

        min-width: 100%;

        /* Anchors the glider pill behind the active tab. */
        position: relative;

        gap: 2px;

        padding: 4px;

        border: 1px solid var(--border);

        border-radius: 999px;

        background: var(--cream);

        /* Scrolling lives on the wrapper, not the capsule. */
        overflow-x: visible;

        -webkit-mask-image: none;

        mask-image: none;

    }

    body:not(.account-page) .primary-nav .primary-nav-btn {

        /* Sit above the glider and let it carry the active fill. */
        position: relative;

        z-index: 1;

        background: transparent;

        border-color: transparent;

        box-shadow: none;

    }

    body:not(.account-page) .primary-nav .primary-nav-btn.active {

        background: transparent;

        border-color: transparent;

        box-shadow: none;

        color: var(--white);

    }

    /* The sliding pill behind the active tab; script.js moves it
       with translateX + width so it glides between tabs. */
    .primary-nav-glider {

        display: block;

        position: absolute;

        top: 4px;

        left: 0;

        height: calc(100% - 8px);

        border-radius: 999px;

        background: var(--ref-green-primary);

        box-shadow: var(--nav-pill-shadow);

        transition:
            transform 0.45s cubic-bezier(0.4, 0, 0.2, 1),
            width 0.45s cubic-bezier(0.4, 0, 0.2, 1);

        will-change: transform, width;

    }

    body:not(.account-page) .primary-nav .primary-nav-btn {
        display: inline-flex;
        align-items: center;
        gap: 7px;
    }

    .primary-nav-icon {
        display: block;
        width: 14px;
        height: 14px;
        flex-shrink: 0;
    }

    .primary-nav-glider.no-transition {

        transition: none;

    }

    @media (prefers-reduced-motion: reduce) {

        .primary-nav-glider {

            transition: none;

        }

    }

    .primary-nav::-webkit-scrollbar {

        display: none;

    }

.analysis-subnav {

        z-index: 50;

    }

    .analysis-subnav-inner {

        padding: 16px;

    }

    .analysis-subnav-tabs {

        flex-wrap: nowrap;

        overflow-x: auto;

        -webkit-overflow-scrolling: touch;

    }

.analysis-subnav-tab {

        flex-shrink: 0;

        padding: 12px 16px;

        min-height: 44px;

    }

    .ats-file-remove {

        width: 44px;

        height: 44px;

    }

    #overview-section,
    #skills-section,
    #projects-section,
    #keywords-section,
    #resources-section,
    #ai-advice-section {

        scroll-margin-top: calc(
            var(--navbar-offset) +
            var(--subnav-offset) +
            12px
        );

    }

    .page-intro-heading {

        font-size: 1.35rem;

    }

}

/* =========================================================
   RESUME BUILDER
========================================================= */

.resume-builder-layout {
    display: grid;
    grid-template-columns: minmax(280px, 320px) 1fr;
    gap: 28px;
    width: min(1280px, 92%);
    margin: auto;
    align-items: start;
}

.resume-list-panel {
    background: var(--white);
    border: 1px solid var(--ref-green-border);
    border-radius: var(--radius-lg);
    padding: 22px;
    height: fit-content;
    max-height: calc(100vh - var(--navbar-offset) - 48px);
    overflow-y: auto;
    position: sticky;
    top: calc(var(--navbar-offset) + 20px);
    flex-shrink: 0;
}

.resume-list-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--ref-green-border);
    flex-wrap: wrap;
}

.resume-list-header h2 {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--ref-green-dark);
    margin: 0;
}

.resume-create-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border: 1px solid var(--ref-green-border);
    border-radius: 10px;
    background: var(--ref-green-primary);
    color: var(--white);
    font: inherit;
    font-size: 0.82rem;
    font-weight: 650;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
    white-space: nowrap;
}

.resume-create-btn:hover {
    background: var(--ref-green-dark);
    border-color: var(--ref-green-dark);
    transform: translateY(-1px);
}

.resume-create-btn.inline {
    margin-top: 12px;
    width: 100%;
    justify-content: center;
}

.resume-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.resume-list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid var(--ref-green-border);
    border-radius: 12px;
    background: var(--ref-page);
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.resume-list-item:hover {
    background: var(--white);
    border-color: var(--ref-green-primary);
    box-shadow: var(--shadow-soft);
}

.resume-list-item.active {
    background: var(--white);
    border-color: var(--ref-green-primary);
    box-shadow: var(--shadow-soft);
}

.resume-list-item-main {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
    flex: 1;
}

.resume-list-item-title {
    font-weight: 650;
    color: var(--ref-green-dark);
    font-size: 0.92rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.resume-list-item-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.72rem;
    color: var(--olive-soft);
}

.resume-list-item-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.resume-list-item-badge.default {
    background: var(--ref-green-primary);
    color: var(--white);
}

.resume-list-item-badge.updated {
    background: var(--pistachio);
    color: var(--olive-dark);
}

.resume-empty {
    text-align: center;
    padding: 40px 20px;
    color: var(--olive-soft);
}

.resume-empty p {
    margin-bottom: 16px;
}

.resume-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px;
    gap: 12px;
    color: var(--olive-soft);
    font-size: 0.85rem;
}

.loading-orbit-small {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 3px solid var(--pistachio-light);
    border-top-color: var(--ref-green-primary);
    animation: spin 0.9s linear infinite;
}

.resume-error {
    padding: 12px 14px;
    border-radius: 10px;
    background: #F4E0D9;
    color: #7D4338;
    font-size: 0.8rem;
    border: 1px solid #E8C8C0;
}

.resume-editor-panel {
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 0;
}

.resume-view {
    background: var(--white);
    border: 1px solid var(--ref-green-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-soft);
}

.resume-view-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 24px;
    border-bottom: 1px solid var(--ref-green-border);
    background: var(--ref-green-pale);
    flex-wrap: wrap;
}

.resume-view-header h3 {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--ref-green-dark);
    margin: 0;
}

.resume-view-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.resume-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 16px;
    border: 1px solid var(--ref-green-border);
    border-radius: 10px;
    font: inherit;
    font-size: 0.8rem;
    font-weight: 650;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.resume-action-btn.primary {
    background: var(--ref-green-primary);
    border-color: var(--ref-green-primary);
    color: var(--white);
}

.resume-action-btn.primary:hover {
    background: var(--ref-green-dark);
    border-color: var(--ref-green-dark);
    transform: translateY(-1px);
}

.resume-action-btn.secondary {
    background: var(--white);
    color: var(--ref-green-dark);
}

.resume-action-btn.secondary:hover {
    background: var(--ref-green-pale);
    border-color: var(--ref-green-primary);
}

.resume-action-btn.danger {
    background: transparent;
    color: var(--btn-danger-bg);
    border-color: rgba(164, 87, 71, 0.25);
}

.resume-action-btn.danger:hover {
    background: rgba(164, 87, 71, 0.08);
    border-color: rgba(164, 87, 71, 0.4);
    color: var(--btn-danger-bg);
}

.resume-action-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.resume-action-btn:focus-visible {
    outline: 3px solid var(--ref-green-primary);
    outline-offset: 2px;
}

.resume-action-btn[aria-pressed="true"] {
    background: var(--ref-green-dark);
    border-color: var(--ref-green-dark);
    color: var(--white);
}

.resume-preview {
    padding: 28px 32px;
    max-height: 70vh;
    overflow-y: auto;
    contain: layout style;
}

.resume-preview-section {
    margin-bottom: 20px;
}

.resume-preview-section:last-child {
    margin-bottom: 0;
}

.resume-preview-section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--ref-green-dark);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--ref-green-border);
}

.resume-preview-section-title::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--pistachio);
    border: 2px solid var(--ref-green-primary);
}

.resume-preview-contact {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    color: var(--olive-dark);
    font-size: 0.9rem;
}

.resume-preview-contact-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.resume-preview-contact-label {
    color: var(--olive-soft);
    font-size: 0.75rem;
    font-weight: 600;
}

.resume-preview-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

.resume-preview-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid var(--ref-green-border);
    border-radius: 8px;
    background: var(--ref-green-pale);
    color: var(--ref-green-dark);
    font-size: 0.75rem;
    text-decoration: none;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.resume-preview-link:hover {
    background: var(--pistachio-light);
    border-color: var(--pistachio);
}

.resume-preview-summary {
    color: var(--olive-dark);
    line-height: 1.7;
    white-space: pre-wrap;
}

.resume-preview-section-content {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.resume-preview-item {
    padding: 14px 16px;
    border: 1px solid var(--ref-green-border);
    border-radius: var(--radius-sm);
    background: var(--ref-page);
}

.resume-preview-item-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}

.resume-preview-item-title {
    font-weight: 700;
    color: var(--ref-green-dark);
    font-size: 0.95rem;
}

.resume-preview-item-subtitle {
    color: var(--olive-soft);
    font-size: 0.8rem;
}

.resume-preview-item-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 12px;
    font-size: 0.78rem;
    color: var(--olive-soft);
}

.resume-preview-item-bullets {
    margin-top: 10px;
    padding-left: 20px;
}

.resume-preview-item-bullets li {
    margin-bottom: 6px;
    line-height: 1.5;
    color: var(--olive-dark);
}

.resume-preview-item-bullets li:last-child {
    margin-bottom: 0;
}

.resume-preview-skills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.resume-preview-skill-group {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    margin-bottom: 6px;
}

.resume-preview-skill-category {
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--olive-soft);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-right: 4px;
}

.resume-preview-skill {
    display: inline-flex;
    align-items: center;
    padding: 5px 12px;
    border-radius: 999px;
    background: var(--pistachio);
    color: var(--olive-dark);
    font-size: 0.75rem;
    font-weight: 600;
}

.resume-editor {
    background: var(--white);
    border: 1px solid var(--ref-green-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-soft);
}

.resume-editor-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 24px;
    border-bottom: 1px solid var(--ref-green-border);
    background: var(--ref-green-pale);
    flex-wrap: wrap;
}

.resume-editor-header h3 {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--ref-green-dark);
    margin: 0;
}

.resume-editor-actions {
    display: flex;
    gap: 8px;
}

.resume-form {
    padding: 28px 32px;
}

.resume-section {
    margin-bottom: 28px;
    padding-bottom: 28px;
    border-bottom: 1px solid var(--ref-green-border);
}

.resume-section:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.resume-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.resume-section-header h4 {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--ref-green-dark);
    margin: 0;
}

.resume-section-hint {
    font-size: 0.75rem;
    color: var(--olive-soft);
    margin: 0;
}

.resume-field-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}

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

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

.resume-field label {
    font-size: 0.78rem;
    font-weight: 650;
    color: var(--ref-green-dark);
}

.resume-field input,
.resume-field select,
.resume-field textarea {
    padding: 11px 14px;
    border: 1px solid var(--ref-green-border);
    border-radius: 10px;
    background: var(--white);
    color: var(--olive-dark);
    font: inherit;
    font-size: 0.88rem;
    outline: none;
    transition: border 0.2s ease, box-shadow 0.2s ease;
}

/* Professional Summary textarea: auto-grows with content up to
   the shared TEXTAREA_MAX_HEIGHT cap, then scrolls internally. */
#resume-summary {
    min-height: 120px;
    max-height: 360px;
    overflow-y: auto;
    line-height: 1.6;
}

.resume-field input:focus,
.resume-field select:focus,
.resume-field textarea:focus {
    border-color: var(--pistachio);
    box-shadow: 0 0 0 4px rgba(198, 216, 167, 0.25);
}

.resume-field input::placeholder,
.resume-field textarea::placeholder {
    color: var(--resume-placeholder);
    font-style: italic;
}

.resume-field-hint {
    font-size: 0.7rem;
    color: var(--olive-soft);
    text-align: right;
}

.resume-links {
    border: none;
    padding: 0;
    margin: 0;
}

.resume-links legend {
    font-size: 0.78rem;
    font-weight: 650;
    color: var(--ref-green-dark);
    margin-bottom: 10px;
}

.resume-link-row {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 10px;
    margin-bottom: 8px;
    align-items: start;
}

.resume-link-row .resume-field {
    margin: 0;
}

.resume-link-row .resume-field label {
    display: none;
}

.resume-link-row .resume-field input {
    width: 100%;
}

.resume-add-link-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border: 1px solid var(--ref-green-border);
    border-radius: 10px;
    background: var(--white);
    color: var(--ref-green-dark);
    font: inherit;
    font-size: 0.78rem;
    font-weight: 650;
    cursor: pointer;
    margin-top: 8px;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.resume-add-link-btn:hover {
    background: var(--ref-green-pale);
    border-color: var(--ref-green-primary);
}

.resume-add-link-btn:focus-visible {
    outline: 3px solid var(--ref-green-primary);
    outline-offset: 2px;
}

/* =========================================================
   RESUME BUILDER — UI CONTROL SYSTEM
   Reusable button/icon styles for the resume editor.
   ========================================================= */

/* ---- Icon button base ---- */
.rb-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--ref-green-border);
    border-radius: 50%;
    background: var(--white);
    color: var(--ref-green-dark);
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease,
                color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
    flex-shrink: 0;
}

.rb-icon-btn:hover:not(:disabled) {
    background: var(--ref-green-pale);
    border-color: var(--ref-green-primary);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(75, 96, 67, 0.10);
}

.rb-icon-btn:focus-visible {
    outline: 3px solid var(--ref-green-primary);
    outline-offset: 2px;
}

.rb-icon-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none;
}

.rb-icon-btn svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ---- Remove/Danger variant ---- */
.rb-icon-btn.danger {
    background: rgba(164, 87, 71, 0.05);
    border-color: rgba(164, 87, 71, 0.22);
    color: var(--error-red);
}

.rb-icon-btn.danger:hover:not(:disabled) {
    background: rgba(164, 87, 71, 0.08);
    border-color: rgba(164, 87, 71, 0.4);
    color: var(--error-red);
}

/* Labeled remove button: the trash icon alone read as removing the row above
   it, so entry/link removes get visible text naming their scope. */
.rb-remove-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: auto;
    height: 36px;
    padding: 0 14px;
    border: 1px solid rgba(164, 87, 71, 0.22);
    border-radius: 999px;
    background: rgba(164, 87, 71, 0.05);
    color: var(--error-red);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.rb-remove-btn svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.rb-remove-btn:hover:not(:disabled) {
    background: rgba(164, 87, 71, 0.08);
    border-color: rgba(164, 87, 71, 0.4);
}

.rb-remove-btn:focus-visible {
    outline: 3px solid var(--ref-green-primary);
    outline-offset: 2px;
}

/* ---- Navigation/Reorder (chevron) ---- */
.rb-icon-btn.nav {
    color: var(--ref-green-dark);
}

.rb-icon-btn.nav:hover:not(:disabled) {
    background: var(--ref-green-pale);
    border-color: var(--ref-green-primary);
    color: var(--ref-green-primary);
}

/* ---- Add action (plus) ---- */
.rb-add-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 2px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--ref-green-dark);
    font: inherit;
    font-size: 0.82rem;
    font-weight: 650;
    cursor: pointer;
    opacity: 0.85;
    transition: color 0.15s ease, opacity 0.15s ease;
}

.rb-add-btn:hover:not(:disabled) {
    color: var(--ref-green-primary);
    opacity: 1;
}

.rb-add-btn:focus-visible {
    outline: 3px solid var(--ref-green-primary);
    outline-offset: 2px;
}

.rb-add-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none;
}

.rb-add-btn svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
}

/* ---- Bullet/skill rows ---- */
.resume-bullet-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
    align-items: center;
}

.resume-bullet-row input {
    width: 100%;
    padding: 11px 14px;
    border: 1px solid var(--ref-green-border);
    border-radius: 10px;
    background: var(--white);
    color: var(--olive-dark);
    font: inherit;
    font-size: 0.88rem;
    outline: none;
    transition: border 0.2s ease, box-shadow 0.2s ease;
}

.resume-bullet-row input:focus {
    border-color: var(--pistachio);
    box-shadow: 0 0 0 4px rgba(198, 216, 167, 0.25);
}

.resume-bullet-row input::placeholder {
    color: var(--resume-placeholder);
    font-style: italic;
}

/* ---- Entry remove button ---- */
.resume-entry-remove {
    margin-left: auto;
}

/* ---- Link row ---- */
.resume-link-row {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 10px;
    margin-bottom: 8px;
    align-items: start;
}

.resume-link-row .resume-field {
    margin: 0;
}

.resume-link-row .resume-field label {
    display: none;
}

.resume-link-row .resume-field input {
    width: 100%;
}

/* ---- Bottom save bar ---- */
.resume-editor-bottom-bar {
    display: flex;
    justify-content: flex-end;
    margin: 0 32px 28px;
    padding: 20px 0 0;
    border-top: 1px solid var(--ref-green-border);
}

.resume-editor-bottom-bar .resume-action-btn.primary {
    min-width: 160px;
    justify-content: center;
}


/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
    .rb-icon-btn,
    .rb-add-btn,
    .resume-bullet-row input,
    .resume-field input,
    .resume-field select,
    .resume-field textarea {
        transition: none;
    }

    .rb-icon-btn:hover:not(:disabled),
    .rb-add-btn:hover:not(:disabled),
    .resume-action-btn.primary:hover {
        transform: none;
    }
}

.resume-section-select-label {
    display: block;
    font-size: 0.78rem;
    font-weight: 650;
    color: var(--ref-green-dark);
    margin-bottom: 10px;
}

.resume-add-section-row {
    display: flex;
    gap: 10px;
    align-items: stretch;
}

/* Custom section-type dropdown. The menu is position:fixed
   and placed by JavaScript so it is never clipped by the
   editor's overflow:hidden or the viewport edge. */
.resume-section-select {
    position: relative;
    flex: 1;
}

.resume-section-select-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    height: 100%;
    padding: 11px 14px;
    border: 1px solid var(--ref-green-border);
    border-radius: 10px;
    background: var(--white);
    color: var(--olive-dark);
    font: inherit;
    font-size: 0.88rem;
    text-align: left;
    cursor: pointer;
    transition: border 0.2s ease, box-shadow 0.2s ease;
}

.resume-section-select-trigger:hover {
    border-color: var(--pistachio);
}

.resume-section-select-trigger:focus-visible {
    outline: 3px solid var(--ref-green-primary);
    outline-offset: 2px;
}

.resume-section-select-trigger:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.resume-section-select-value {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.resume-section-select-value.is-placeholder {
    color: var(--olive-soft);
}

.resume-section-select-caret {
    flex: none;
    color: var(--olive-soft);
    font-size: 0.7rem;
    transition: transform 0.15s ease;
}

.resume-section-select-trigger[aria-expanded="true"]
.resume-section-select-caret {
    transform: rotate(180deg);
}

.resume-section-select-menu {
    position: fixed;
    z-index: 1000;
    margin: 0;
    padding: 6px;
    list-style: none;
    background: var(--white);
    border: 1px solid var(--ref-green-border);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(75, 96, 67, 0.14);
    max-height: min(320px, calc(100vh - 16px));
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity 0.15s ease, transform 0.15s ease,
        visibility 0s linear 0.15s;
    pointer-events: none;
}

.resume-section-select-menu.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity 0.15s ease, transform 0.15s ease,
        visibility 0s;
    pointer-events: auto;
}

.resume-section-select-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 9px 12px;
    border-radius: 8px;
    font-size: 0.88rem;
    color: var(--olive-dark);
    cursor: pointer;
}

.resume-section-select-option:hover,
.resume-section-select-option.is-active {
    background: var(--ref-green-pale);
}

.resume-section-select-option.is-selected {
    font-weight: 650;
    color: var(--ref-green-dark);
    background: var(--pistachio-light);
}

.resume-section-select-option.is-selected::after {
    content: "\2713";
    color: var(--ref-green-primary);
    font-size: 0.8rem;
}

.resume-editor-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 24px;
    text-align: center;
    background: var(--white);
    border: 1px solid var(--ref-green-border);
    border-radius: var(--radius-lg);
    min-height: 300px;
}

/* Signed-out prompt replaces the builder layout, so it takes the same
   width the layout would have occupied. */
.resume-signed-out {
    width: min(1280px, 92%);
    margin: 0 auto;
}

.resume-editor-empty-icon {
    font-size: 3.5rem;
    margin-bottom: 16px;
    opacity: 0.6;
}

.resume-editor-empty h3 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--ref-green-dark);
    margin-bottom: 8px;
}

.resume-editor-empty p {
    color: var(--olive-soft);
    margin-bottom: 20px;
    max-width: 400px;
}

.resume-editor-empty .resume-action-btn.primary {
    width: auto;
}

.resume-editor-error {
    padding: 12px 14px;
    margin: 16px 22px 0;
    border-radius: 10px;
    background: #F4E0D9;
    color: #7D4338;
    font-size: 0.8rem;
    border: 1px solid #E8C8C0;
}

.resume-section-item {
    padding: 0 0 4px;
    margin-bottom: 26px;
    position: relative;
}

/* Sections are separated by a hairline and whitespace instead of
   nested cards, so fields read as controls, not boxes-in-boxes. */
.resume-section-item + .resume-section-item {
    border-top: 1px solid var(--ref-green-border);
    padding-top: 22px;
}

.resume-section-item-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}

.resume-section-heading-input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 4px 8px 4px 0;
    border: none;
    border-bottom: 1px solid transparent;
    border-radius: 0;
    background: transparent;
    color: var(--olive-dark);
    font: inherit;
    font-size: 1rem;
    font-weight: 700;
    outline: none;
    transition: border-color 0.2s ease;
}

.resume-section-heading-input::placeholder {
    color: var(--olive-soft);
    font-style: normal;
}

.resume-section-heading-input:hover {
    border-bottom-color: var(--ref-green-border);
}

.resume-section-heading-input:focus {
    border-bottom-color: var(--pistachio);
}

.resume-section-item-actions {
    display: flex;
    gap: 6px;
}

.resume-section-item-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid var(--ref-green-border);
    border-radius: 10px;
    background: var(--white);
    color: var(--ref-green-dark);
    font-size: 0.9rem;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease,
        color 0.2s ease, transform 0.2s ease;
}

.resume-section-item-btn:hover {
    background: var(--ref-green-pale);
    border-color: var(--ref-green-primary);
    transform: translateY(-1px);
}

.resume-section-item-btn.danger {
    background: rgba(164, 87, 71, 0.05);
    border-color: rgba(164, 87, 71, 0.22);
    color: var(--olive-soft);
}

.resume-section-item-btn.danger:hover {
    background: rgba(164, 87, 71, 0.08);
    border-color: rgba(164, 87, 71, 0.4);
    color: var(--error-red);
    transform: translateY(-1px);
}

.resume-section-item-btn:focus-visible {
    outline: 3px solid var(--ref-green-primary);
    outline-offset: 2px;
}

.resume-section-fields {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.resume-section-fields .resume-field {
    margin: 0;
}

.resume-section-fields .resume-field label {
    display: block;
}

.resume-section-fields .resume-field input,
.resume-section-fields .resume-field textarea {
    width: 100%;
}

/* Entry descriptions start at a readable height and
   auto-grow from there as content is added. */
.resume-section-fields .resume-field textarea {
    min-height: 72px;
}

/* Inside de-nested sections, field outlines step back so labels and
   headings carry the structure. */
.resume-section-item .resume-field input,
.resume-section-item .resume-field textarea,
.resume-section-item .resume-bullet-row input {
    border-color: color-mix(in srgb, var(--ref-green-border) 55%, transparent);
}

.resume-section-item .resume-field input:focus,
.resume-section-item .resume-field textarea:focus,
.resume-section-item .resume-bullet-row input:focus {
    border-color: var(--pistachio);
}

/* Entry field layout: one column on narrow screens, two on desktop.
   Long text (textarea), bullets and the remove action always span
   the full width. */
.resume-section-fields-item .resume-field input,
.resume-section-fields-item .resume-field textarea {
    width: 100%;
}

@media (min-width: 900px) {
    .resume-section-fields-item {
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 14px;
        align-items: start;
    }

    .resume-section-fields-item .resume-field:has(textarea),
    .resume-section-fields-item .resume-bullets,
    .resume-section-fields-item .resume-entry-remove {
        grid-column: 1 / -1;
    }
}

/* ---- Responsive ---- */
@media (max-width: 700px) {
    .resume-section-item-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .resume-section-item-actions {
        width: 100%;
        justify-content: flex-end;
    }

    .resume-link-row {
        grid-template-columns: 1fr;
    }

    /* Ghost add actions stay left-aligned text buttons; the
       full-width treatment is reserved for the solid Save button. */
    .rb-add-btn {
        width: auto;
        justify-content: flex-start;
    }


    .resume-editor-bottom-bar .resume-action-btn.primary {
        width: 100%;
    }
}

.resume-bullets {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.resume-bullet-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
    align-items: center;
}

.resume-bullet-row input {
    width: 100%;
    padding: 11px 14px;
    border: 1px solid var(--ref-green-border);
    border-radius: 10px;
    background: var(--white);
    color: var(--olive-dark);
    font: inherit;
    font-size: 0.88rem;
    outline: none;
    transition: border 0.2s ease, box-shadow 0.2s ease;
}

.resume-bullet-row input:focus {
    border-color: var(--pistachio);
    box-shadow: 0 0 0 4px rgba(198, 216, 167, 0.25);
}

.resume-bullet-row input::placeholder {
    color: var(--resume-placeholder);
    font-style: italic;
}

.resume-bullet-add {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border: 1px dashed var(--ref-green-border);
    border-radius: 10px;
    background: transparent;
    color: var(--ref-green-dark);
    font: inherit;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    margin-top: 4px;
    transition: background 0.2s ease, border-color 0.2s ease,
        transform 0.2s ease;
}

.resume-bullet-add:hover {
    background: var(--ref-green-pale);
    border-color: var(--ref-green-primary);
    border-style: solid;
    transform: translateY(-1px);
}

.resume-bullet-add:focus-visible {
    outline: 3px solid var(--ref-green-primary);
    outline-offset: 2px;
}

@media (max-width: 950px) {
    .resume-builder-layout {
        grid-template-columns: 1fr;
    }

    .resume-list-panel {
        position: static;
        max-height: none;
    }

    .resume-field-grid {
        grid-template-columns: 1fr;
    }

    .resume-link-row {
        grid-template-columns: 1fr;
    }

    .resume-add-section-row {
        flex-direction: column;
        align-items: stretch;
    }
}

@media (max-width: 700px) {
    .resume-view-header,
    .resume-editor-header {
        flex-direction: column;
        align-items: stretch;
    }

    .resume-view-actions,
    .resume-editor-actions {
        display: flex;
        flex-direction: column;
    }

    .resume-action-btn {
        width: 100%;
        justify-content: center;
    }

    .resume-link-row {
        grid-template-columns: 1fr;
    }
}

/* Respect reduced-motion preferences: drop the subtle
   hover lift, control transitions and the loading spin
   so nothing in the builder keeps moving. */
@media (prefers-reduced-motion: reduce) {
    .resume-action-btn,
    .resume-section-item-btn,
    .resume-bullet-add,
    .resume-add-link-btn,
    .resume-bullet-row input,
    .resume-preview-link,
    .resume-field input,
    .resume-field select,
    .resume-field textarea,
    .resume-section-select-trigger,
    .resume-section-select-caret,
    .resume-section-select-menu {
        transition: none;
    }

    .resume-action-btn.primary:hover,
    .resume-section-item-btn:hover,
    .resume-section-item-btn.danger:hover,
    .resume-bullet-add:hover {
        transform: none;
    }

    .resume-section-select-trigger[aria-expanded="true"]
    .resume-section-select-caret {
        transform: none;
    }

    .loading-orbit-small {
        animation: none;
    }
}

/* The account menu and the account pages stay usable when the
   navbar wraps on a narrow screen: the trigger collapses to the
   avatar alone and the menu is allowed to use more of the
   viewport. */
@media (max-width: 700px) {
    .profile-name {
        display: none;
    }

    .profile-trigger {
        padding: 6px;
    }

    .profile-caret {
        display: none;
    }

    .profile-menu {
        min-width: 220px;
        max-width: min(280px, calc(100vw - 32px));
    }

    .account-main {
        padding: 36px 0 60px;
    }

    .account-card {
        padding: 24px 20px;
    }

    .account-card-header h1 {
        font-size: 1.9rem;
    }

    .profile-summary {
        gap: 12px;
        padding: 14px;
    }

    .account-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .account-row .account-secondary-button,
    .account-row .account-danger-button {
        width: 100%;
        justify-content: center;
        text-align: center;
    }

    .account-modal-card {
        padding: 22px 18px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .profile-menu {
        animation: none;
    }

    .profile-trigger,
    .profile-caret,
    .profile-menu-item,
    .account-primary-button,
    .account-secondary-button,
    .account-danger-button,
    .account-back-link,
    .account-field input,
    .account-field select {
        transition: none;
    }

    .profile-trigger:hover,
    .account-primary-button:hover:not(:disabled),
    .account-secondary-button:hover:not(:disabled),
    .account-danger-button:hover:not(:disabled) {
        transform: none;
    }

    .profile-trigger[aria-expanded="true"]
    .profile-caret {
        transform: none;
    }
}

/* Text-entry controls keep a 16px floor on touch devices so
   iOS Safari does not auto-zoom the page on focus (the zoom
   persists after blur). Desktop typography is unchanged. */
@media (pointer: coarse) {

    .account-field input,

    .account-field select,

    .interview-field-group input,

    .interview-answer-input,

    .ats-job-description-field textarea,

    .resume-field input,

    .resume-field textarea,

    .resume-bullet-row input {

        font-size: 16px;

    }
}

/* The existing hero badge opens a compact, text-only explanation.
   Shared across phones and desktop; no navbar rules are changed. */
#about-careergap-trigger {
    font-family: inherit;
    line-height: inherit;
    cursor: pointer;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.28),
        0 3px 0 var(--ref-green-border),
        0 6px 12px rgba(0, 0, 0, 0.12);
    transform: translateY(0);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

#about-careergap-trigger:active {
    transform: translateY(2px);
    box-shadow:
        inset 0 1px 3px rgba(0, 0, 0, 0.14),
        0 1px 0 var(--ref-green-border),
        0 2px 5px rgba(0, 0, 0, 0.1);
}

@media (prefers-reduced-motion: reduce) {
    #about-careergap-trigger {
        transition: none;
    }
    #about-careergap-trigger:active {
        transform: none;
    }
}

#about-careergap-trigger:focus-visible {
    outline: 3px solid var(--ref-green-primary);
    outline-offset: 4px;
}

#about-careergap-dialog {
    position: fixed;
    inset: 0;
    margin: auto;
    width: min(400px, calc(100vw - 40px));
    max-height: calc(100dvh - 40px);
    overflow-y: auto;
    padding: 24px;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: var(--cream);
    color: var(--olive-dark);
    box-shadow: 0 16px 60px rgba(0, 0, 0, 0.2);
    text-align: left;
    font-size: 0.94rem;
    line-height: 1.65;
}

#about-careergap-dialog p {
    margin: 0;
}

#about-careergap-dialog::backdrop {
    background: rgba(0, 0, 0, 0.35);
}

/* Compact phone analysis navigation; preserve placement and desktop layout. */
@media (max-width: 700px) {
    .analysis-subnav-inner {
        padding: 6px;
        border-radius: 16px;
    }
    .analysis-subnav-heading,
    .analysis-subnav-hint {
        display: none;
    }
    .analysis-subnav-tabs {
        gap: 4px;
    }
    .analysis-subnav-tab {
        min-height: 44px;
        padding: 10px 14px;
        white-space: nowrap;
    }
}