:root {
    --paper: #f5f2eb;
    --paper-deep: #e9e5dc;
    --surface: #fffdf8;
    --ink: #173733;
    --muted: #62746f;
    --teal: #0f766e;
    --teal-dark: #0c514d;
    --teal-soft: #dcece8;
    --burgundy: #8d304d;
    --burgundy-soft: #f3e2e7;
    --line: rgba(23, 55, 51, 0.14);
    --shadow: 0 24px 70px rgba(17, 56, 51, 0.11);
    --radius-lg: 28px;
    --radius-md: 18px;
    --shell: min(1180px, calc(100% - 48px));
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    color: var(--ink);
    background: var(--paper);
    font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

a { color: inherit; }
button, input, select { font: inherit; }

.skip-link {
    position: fixed;
    z-index: 100;
    top: 12px;
    left: 12px;
    padding: 10px 14px;
    color: white;
    background: var(--burgundy);
    border-radius: 8px;
    transform: translateY(-150%);
}
.skip-link:focus { transform: translateY(0); }

.shell { width: var(--shell); margin-inline: auto; }

.site-header {
    min-height: 82px;
    padding: 14px max(24px, calc((100% - 1180px) / 2));
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    background: rgba(245, 242, 235, 0.92);
    border-bottom: 1px solid var(--line);
    backdrop-filter: blur(18px);
    position: sticky;
    top: 0;
    z-index: 20;
}

.brand { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; }
.brand-mark {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    color: white;
    background: var(--teal);
    border-radius: 13px 13px 13px 4px;
    font-family: Georgia, serif;
    font-size: 1.3rem;
    font-weight: 700;
    box-shadow: 0 8px 20px rgba(15, 118, 110, 0.22);
}
.brand-mark.large { width: 56px; height: 56px; font-size: 1.7rem; margin-bottom: 26px; }
.brand-copy { display: flex; flex-direction: column; line-height: 1.05; }
.brand-copy strong { font-size: 1.02rem; letter-spacing: 0.02em; }
.brand-copy small { color: var(--burgundy); font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; }

.account-nav { display: flex; align-items: center; gap: 20px; color: var(--muted); font-size: 0.88rem; }
.account-nav form { margin: 0; }
.account-identity { display: flex; align-items: center; gap: 8px; }
.account-dot { width: 8px; height: 8px; border-radius: 50%; background: #3a9f75; box-shadow: 0 0 0 4px rgba(58, 159, 117, 0.13); }
.text-link, .text-button { color: var(--teal-dark); font-weight: 700; text-decoration: none; }
.text-button { padding: 0; border: 0; background: transparent; cursor: pointer; }
.text-link:hover, .text-button:hover { color: var(--burgundy); }

.message-stack { width: var(--shell); margin: 20px auto 0; }
.message { margin: 0; padding: 12px 16px; background: var(--teal-soft); border-left: 3px solid var(--teal); border-radius: 8px; }
.message.error { background: var(--burgundy-soft); border-left-color: var(--burgundy); }

/* Bin Collections */
.bin-shell { padding-bottom: 72px; }
.bin-hero { margin: 34px 0 28px; padding: 44px; display: grid; grid-template-columns: 1.4fr .6fr; gap: 36px; align-items: center; color: white; background: linear-gradient(135deg, #123f3b, #0f766e); border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.bin-hero h1 { margin: 6px 0 14px; font: 500 clamp(2.7rem, 7vw, 5.4rem)/.92 Georgia, serif; }
.bin-hero h1 em { color: #d5e9a7; font-weight: 400; }
.bin-hero p { max-width: 660px; margin: 0; }
.bin-hero aside { padding: 24px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2); border-radius: 20px; }
.bin-hero aside span, .bin-hero aside small { display: block; }
.bin-hero aside strong { display: block; margin: 5px 0; font: 500 2.2rem Georgia, serif; }
.bin-panel { margin: 22px 0; padding: 28px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: 0 10px 35px rgba(17,56,51,.05); }
.bin-panel-heading { display: flex; justify-content: space-between; gap: 20px; align-items: start; margin-bottom: 20px; }
.bin-panel-heading h2 { margin: 2px 0 0; font-family: Georgia, serif; font-size: 1.8rem; }
.bin-form, .bin-override-form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: end; }
.bin-form label, .bin-override-form label { display: grid; gap: 6px; font-weight: 700; }
.bin-form label small { color: var(--muted); font-weight: 400; }
.bin-form .birthday-check-label { align-self: center; }
.bin-colour-input { width: 100%; height: 46px; padding: 4px; border: 1px solid var(--line); border-radius: 9px; background: white; cursor: pointer; }
.inline-field { display: flex; align-items: center; gap: 8px; }
.bin-list { display: grid; gap: 10px; }
.bin-list article { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto auto; gap: 16px; align-items: center; padding: 18px; background: #f8f7f2; border-radius: 13px; }
.bin-list h3, .bin-list p { margin: 0; }
.bin-list small { color: var(--muted); }
.bin-swatch { width: 16px; height: 52px; display: block; background: var(--bin-colour); border-radius: 99px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); }
.bin-swatch.small { width: 12px; height: 32px; }
.bin-next { min-width: 120px; text-align: right; }
.bin-next span, .bin-next small { display: block; color: var(--muted); }
.bin-override-list { margin-top: 22px; display: grid; gap: 8px; }
.bin-override-list article { padding: 13px 15px; display: grid; grid-template-columns: auto 1fr auto; gap: 13px; align-items: center; background: #f8f7f2; border-radius: 11px; }
.bin-override-list p { margin: 2px 0 0; color: var(--muted); }
.quiet-copy { color: var(--muted); }

@media (max-width: 760px) {
    .bin-hero { grid-template-columns: 1fr; padding: 30px 24px; }
    .bin-form, .bin-override-form { grid-template-columns: 1fr; }
    .bin-list article { grid-template-columns: 14px 1fr; }
    .bin-next, .bin-list .birthday-actions { grid-column: 2; text-align: left; }
}

.hero {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(280px, 0.6fr);
    gap: 72px;
    align-items: end;
    padding-block: 88px 78px;
}
.eyebrow { margin: 0 0 16px; color: var(--teal); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; }
.eyebrow.burgundy { color: var(--burgundy); }
.hero h1, .login-story h1, .state-page h1 {
    margin: 0;
    max-width: 780px;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(3.4rem, 7vw, 6.8rem);
    font-weight: 500;
    line-height: 0.92;
    letter-spacing: -0.055em;
}
.hero h1 em, .login-story h1 em { color: var(--burgundy); font-weight: 400; }
.hero-intro { max-width: 640px; margin: 34px 0 0; color: var(--muted); font-size: clamp(1.05rem, 2vw, 1.25rem); }

.welcome-card {
    padding: 30px;
    color: white;
    background: var(--teal-dark);
    border-radius: var(--radius-lg) var(--radius-lg) var(--radius-lg) 8px;
    box-shadow: var(--shadow);
    position: relative;
    overflow: hidden;
}
.welcome-card::after { content: ""; position: absolute; width: 150px; height: 150px; right: -72px; top: -70px; border: 1px solid rgba(255,255,255,.25); border-radius: 50%; }
.welcome-kicker { display: block; margin-bottom: 26px; color: #add8d0; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.16em; }
.welcome-card strong { display: block; overflow: hidden; text-overflow: ellipsis; font-family: Georgia, serif; font-size: 1.45rem; font-weight: 500; }
.welcome-card p { margin: 8px 0 0; color: #c7dfda; font-size: 0.85rem; }

.experience-shell { padding-bottom: 90px; }
.section-heading { display: flex; justify-content: space-between; align-items: end; gap: 40px; padding-bottom: 28px; border-bottom: 1px solid var(--line); }
.section-heading h2 { margin: 0; font-family: Georgia, serif; font-size: clamp(2.2rem, 5vw, 4rem); font-weight: 500; letter-spacing: -0.035em; }
.section-heading > p { max-width: 300px; margin: 0 0 8px; color: var(--muted); font-size: 0.9rem; }

.category-block { display: grid; grid-template-columns: 240px 1fr; gap: 48px; padding-block: 48px; border-bottom: 1px solid var(--line); }
.category-heading { display: flex; gap: 18px; }
.category-number { color: var(--burgundy); font-size: 0.7rem; font-weight: 800; letter-spacing: 0.12em; padding-top: 8px; }
.category-heading h3 { margin: 0 0 8px; font-family: Georgia, serif; font-size: 2rem; font-weight: 500; }
.category-heading p { margin: 0; color: var(--muted); font-size: 0.88rem; }
.tile-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.app-tile, .empty-tile {
    min-height: 292px;
    padding: 26px;
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    box-shadow: 0 10px 32px rgba(17, 56, 51, 0.055);
    transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
    position: relative;
}
.app-tile.is-live:hover { transform: translateY(-4px); border-color: rgba(15,118,110,.35); box-shadow: var(--shadow); }
.tile-topline { display: flex; align-items: center; justify-content: space-between; }
.tile-icon { width: 48px; height: 48px; display: grid; place-items: center; color: var(--teal-dark); background: var(--teal-soft); border-radius: 15px; font-size: 1.2rem; }
.status-pill { padding: 6px 9px; border-radius: 999px; color: var(--muted); background: var(--paper-deep); font-size: 0.64rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.status-pill.live { color: var(--teal-dark); background: var(--teal-soft); }
.tile-copy { margin-block: 28px auto; }
.tile-copy h4 { margin: 0 0 9px; font-family: Georgia, serif; font-size: 1.6rem; font-weight: 500; }
.tile-copy p { margin: 0; color: var(--muted); font-size: 0.9rem; }
.tile-action { margin-top: 28px; display: inline-flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--teal-dark); font-size: 0.84rem; font-weight: 800; text-decoration: none; }
.app-tile.is-live .tile-action::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.tile-action:hover { color: var(--burgundy); }
.tile-action.disabled { color: #8b9894; }
.empty-tile { justify-content: center; align-items: flex-start; border-style: dashed; box-shadow: none; color: var(--muted); }
.empty-tile span { color: var(--burgundy); font-size: 1.8rem; }
.empty-tile p { max-width: 330px; margin: 16px 0 0; }

.login-shell { min-height: calc(100vh - 82px); display: grid; grid-template-columns: 1.15fr .85fr; }
.login-story { padding: clamp(54px, 8vw, 120px); color: white; background: var(--teal-dark); position: relative; overflow: hidden; }
.login-story::after { content: ""; position: absolute; width: 52vw; height: 52vw; left: -28vw; bottom: -35vw; border: 1px solid rgba(255,255,255,.15); border-radius: 50%; }
.login-story .eyebrow { color: #add8d0; }
.login-story h1 { font-size: clamp(3.5rem, 7vw, 6.5rem); }
.login-story > p:not(.eyebrow) { max-width: 540px; margin-top: 34px; color: #c7dfda; font-size: 1.1rem; }
.login-panel { padding: 56px; display: grid; place-items: center; background: var(--paper); }
.login-card { width: min(440px, 100%); padding: 46px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.login-card h2 { margin: 0 0 14px; font-family: Georgia, serif; font-size: 2.4rem; font-weight: 500; letter-spacing: -.03em; }
.login-card > p:not(.eyebrow) { margin: 0 0 28px; color: var(--muted); }
.login-card small { display: block; margin-top: 20px; color: var(--muted); font-size: .75rem; }
.google-button, .primary-action {
    width: 100%;
    min-height: 52px;
    padding: 13px 17px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    color: white;
    background: var(--teal);
    border: 0;
    border-radius: 12px;
    font-weight: 800;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 10px 24px rgba(15,118,110,.2);
}
.google-button:hover, .primary-action:hover { background: var(--teal-dark); }
.google-g { width: 25px; height: 25px; display: grid; place-items: center; color: #305fbd; background: white; border-radius: 50%; font-family: Arial, sans-serif; font-weight: 800; }
.setup-notice { padding: 15px; color: var(--burgundy); background: var(--burgundy-soft); border-radius: 12px; font-size: .88rem; }

.birthday-shell { padding-block: 34px 90px; }
.birthday-hero { padding-block: 54px 50px; display: grid; grid-template-columns: minmax(0, 1fr) 250px; align-items: end; gap: 60px; }
.birthday-hero h1 { margin: 0; font: 500 clamp(3rem, 6vw, 5.7rem)/.94 Georgia, "Times New Roman", serif; letter-spacing: -.052em; }
.birthday-hero h1 em { color: var(--burgundy); font-weight: 400; }
.birthday-hero > div > p:last-child { max-width: 650px; margin: 28px 0 0; color: var(--muted); font-size: 1.08rem; }
.birthday-hero aside { padding: 24px; color: white; background: var(--burgundy); border-radius: 20px 20px 20px 6px; }
.birthday-hero aside span, .birthday-hero aside small { display: block; color: #f2dbe3; font-size: .7rem; }
.birthday-hero aside span { letter-spacing: .13em; text-transform: uppercase; }
.birthday-hero aside strong { display: block; margin: 9px 0 2px; font: 500 2.5rem Georgia, serif; }
.birthday-settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.birthday-panel { padding: 28px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: 0 10px 32px rgba(17,56,51,.045); }
.birthday-editor, .birthday-list-panel { margin-top: 20px; }
.birthday-panel-heading { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 22px; }
.birthday-panel-heading .eyebrow { margin-bottom: 5px; }
.birthday-panel-heading h2 { margin: 0; font: 500 clamp(1.7rem, 3vw, 2.3rem) Georgia, serif; letter-spacing: -.025em; }
.birthday-count { display: grid; width: 42px; height: 42px; place-items: center; color: white; background: var(--teal-dark); border-radius: 50%; font-weight: 900; }
.birthday-settings-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; align-items: end; }
.birthday-settings-form > label, .birthday-recipient-form label, .birthday-form > label { color: var(--muted); font-size: .68rem; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; }
.birthday-settings-form label small { display: block; min-height: 34px; margin: 4px 0; color: var(--muted); font-size: .62rem; font-weight: 400; letter-spacing: 0; text-transform: none; }
.birthday-settings-form .field-input, .birthday-recipient-form .field-input, .birthday-form .field-input { display: block; width: 100%; margin-top: 5px; }
.birthday-check-label { display: flex; align-items: center; gap: 8px; color: var(--ink) !important; text-transform: none !important; }
.birthday-settings-form > .birthday-check-label { grid-column: 1 / -1; }
.birthday-checkbox { width: 18px; height: 18px; accent-color: var(--burgundy); }
.birthday-recipient-list { display: grid; gap: 7px; }
.birthday-recipient-list > div { display: flex; justify-content: space-between; gap: 15px; padding: 10px 12px; background: var(--paper); border-radius: 9px; }
.birthday-recipient-list p { margin: 0; color: var(--muted); font-size: .76rem; }
.birthday-recipient-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 9px; align-items: end; margin-top: 14px; }
.birthday-form { display: grid; grid-template-columns: 1.1fr 190px auto 1.2fr auto; gap: 11px; align-items: end; }
.birthday-list { display: grid; gap: 9px; }
.birthday-list article { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto auto; gap: 16px; align-items: center; padding: 14px 16px; background: var(--paper); border: 1px solid transparent; border-radius: 12px; }
.birthday-list article.is-today { background: var(--teal-soft); border-color: var(--teal); }
.birthday-list time { display: grid; place-items: center; padding: 8px; color: white; background: var(--teal-dark); border-radius: 10px; text-align: center; }
.birthday-list time strong { font: 500 1.45rem Georgia, serif; line-height: 1; }
.birthday-list time span { margin-top: 2px; font-size: .58rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.birthday-person > span { color: var(--burgundy); font-size: .6rem; font-weight: 900; letter-spacing: .07em; text-transform: uppercase; }
.birthday-person h3 { margin: 2px 0 0; font: 500 1.3rem Georgia, serif; }
.birthday-person small { color: var(--muted); font-size: .68rem; }
.birthday-card-status { padding: 6px 9px; color: var(--muted); background: var(--paper-deep); border-radius: 999px; font-size: .64rem; font-weight: 800; }
.birthday-card-status.needs-card { color: var(--burgundy); background: var(--burgundy-soft); }
.birthday-actions { display: flex; gap: 10px; }
.birthday-actions form { margin: 0; }

.state-page { min-height: calc(100vh - 180px); padding-block: 100px; }
.state-page h1 { max-width: 850px; font-size: clamp(3rem, 6vw, 5.5rem); }
.state-page > p:not(.eyebrow) { max-width: 650px; margin: 30px 0; color: var(--muted); font-size: 1.05rem; }
.state-page .primary-action { width: auto; margin-top: 14px; }

.fpl-shell { padding-block: 34px 90px; }
.breadcrumb { display: flex; gap: 10px; color: var(--muted); font-size: .78rem; }
.breadcrumb a { color: var(--teal-dark); font-weight: 800; text-decoration: none; }
.fpl-hero {
    padding-block: 54px 50px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 260px;
    align-items: end;
    gap: 60px;
}
.fpl-hero h1 {
    margin: 0;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(3rem, 6vw, 5.7rem);
    font-weight: 500;
    line-height: .94;
    letter-spacing: -.052em;
}
.fpl-hero h1 em { color: var(--burgundy); font-weight: 400; }
.fpl-hero > div > p:last-child { max-width: 650px; margin: 28px 0 0; color: var(--muted); font-size: 1.08rem; }
.model-stamp { padding: 24px; color: white; background: var(--teal-dark); border-radius: 20px 20px 20px 6px; }
.model-stamp span, .model-stamp small { display: block; color: #bddbd5; font-size: .7rem; }
.model-stamp span { margin-bottom: 14px; letter-spacing: .13em; text-transform: uppercase; }
.model-stamp strong { display: block; margin-bottom: 6px; font-family: Georgia, serif; font-size: 1.25rem; font-weight: 500; }
.fpl-reminder-preferences { scroll-margin-top: 102px; display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 20px; padding: 18px 22px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; }
.fpl-reminder-preferences span, .fpl-reminder-preferences strong, .fpl-reminder-preferences small { display: block; }
.fpl-reminder-preferences span { color: var(--burgundy); font-size: .63rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.fpl-reminder-preferences strong { margin-top: 3px; font-family: Georgia, serif; font-size: 1.25rem; font-weight: 500; }
.fpl-reminder-preferences small { margin-top: 3px; color: var(--muted); font-size: .7rem; }
.fpl-reminder-preferences form, .fpl-reminder-preferences label { display: flex; align-items: center; gap: 10px; }
.fpl-reminder-preferences label { color: var(--ink); font-size: .75rem; font-weight: 700; }
.fpl-reminder-preferences .reminder-checkbox { width: 18px; height: 18px; accent-color: var(--teal); }
.fpl-metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin-bottom: 20px; overflow: hidden; background: var(--line); border: 1px solid var(--line); border-radius: 18px; }
.fpl-metrics article { padding: 21px 23px; background: var(--surface); }
.fpl-metrics span { display: block; margin-bottom: 8px; color: var(--muted); font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.fpl-metrics strong { font-family: Georgia, serif; font-size: 1.45rem; font-weight: 500; }
.workflow-tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 0 0 20px; }
.workflow-tab { position: relative; display: grid; grid-template-columns: 34px 1fr; column-gap: 11px; padding: 16px; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 14px; text-decoration: none; }
.workflow-tab > span { grid-row: 1 / 3; display: grid; width: 34px; height: 34px; place-items: center; color: var(--teal-dark); background: var(--teal-soft); border-radius: 50%; font-size: .74rem; font-weight: 900; }
.workflow-tab strong, .workflow-tab small { display: block; }
.workflow-tab strong { font-size: .82rem; }
.workflow-tab small { margin-top: 3px; color: var(--muted); font-size: .67rem; }
.workflow-tab:hover { border-color: var(--teal); }
.workflow-tab.is-active { color: white; background: var(--teal-dark); border-color: var(--teal-dark); box-shadow: 0 10px 24px rgba(17, 56, 51, .12); }
.workflow-tab.is-active > span { color: white; background: var(--burgundy); }
.workflow-tab.is-active small { color: #bddbd5; }
.fpl-panel { margin-top: 20px; padding: 30px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: 0 10px 32px rgba(17,56,51,.045); }
#initial-squad { scroll-margin-top: 102px; }
.panel-heading { display: flex; justify-content: space-between; align-items: end; gap: 30px; margin-bottom: 26px; }
.panel-heading .eyebrow { margin-bottom: 7px; }
.panel-heading h2 { margin: 0; font-family: Georgia, serif; font-size: clamp(1.8rem, 3vw, 2.6rem); font-weight: 500; letter-spacing: -.025em; }
.panel-note { display: block; max-width: 520px; margin-top: 7px; color: var(--muted); font-size: .7rem; }
.team-meta { display: flex; gap: 10px; flex-wrap: wrap; }
.team-meta span { padding: 7px 10px; color: var(--teal-dark); background: var(--teal-soft); border-radius: 999px; font-size: .7rem; font-weight: 800; }
.connect-form { display: grid; grid-template-columns: minmax(220px, 1fr) auto; gap: 18px; align-items: end; }
.field-group label { display: block; margin-bottom: 7px; color: var(--ink); font-size: .82rem; font-weight: 800; }
.field-group small { display: block; margin-top: 7px; color: var(--muted); font-size: .72rem; }
.field-group .field-error { color: var(--burgundy); }
.field-input, .planning-controls select { min-height: 48px; width: 100%; padding: 10px 13px; color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: 10px; }
.field-input:focus, .planning-controls select:focus { border-color: var(--teal); outline: 3px solid rgba(15,118,110,.13); }
.compact-action { width: auto; min-width: 155px; box-shadow: none; }
.planning-heading { align-items: center; }
.planning-controls { display: flex; align-items: end; gap: 10px; }
.planning-controls label { color: var(--muted); font-size: .68rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.planning-controls select { display: block; min-width: 105px; min-height: 42px; margin-top: 5px; padding: 8px 10px; text-transform: none; }
.initial-controls, .comparison-controls { display: flex; align-items: end; gap: 10px; flex-wrap: wrap; }
.initial-controls label, .comparison-controls label { color: var(--muted); font-size: .68rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.initial-controls .field-input, .comparison-controls .field-input { display: block; min-height: 42px; margin-top: 5px; text-transform: none; }
.initial-controls .field-input { min-width: 125px; }
.lineup-model-choices { margin: 0; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; }
.lineup-model-choices legend { color: var(--muted); font-size: .62rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.lineup-model-choices ul { margin: 0; padding: 0; display: flex; gap: 8px; list-style: none; }
.lineup-model-choices label { display: flex; align-items: center; gap: 4px; color: var(--ink); font-size: .68rem; letter-spacing: 0; text-transform: none; }
.lineup-model-choices input { accent-color: var(--burgundy); }
.player-filter-controls { margin: 18px 0; padding: 16px; background: var(--paper); border-radius: 12px; }
.player-filter-controls input[type="range"] { display: block; min-width: 180px; margin-top: 12px; accent-color: var(--teal-dark); }
.goalkeeper-audit-summary { display: grid; grid-template-columns: auto auto; gap: 2px 9px; align-items: baseline; }
.goalkeeper-audit-summary strong { color: var(--teal-dark); font: 500 1.35rem Georgia, serif; text-align: right; }
.goalkeeper-audit-summary span { color: var(--muted); font-size: .62rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.goalkeeper-preseason-note { margin: -8px 0 22px; padding: 14px 16px; font-size: .75rem; }
.goalkeeper-source-note { max-width: none; margin: -12px 0 22px; }
.goalkeeper-source-note a { color: var(--teal-dark); font-weight: 800; }
.goalkeeper-audit-table .goalkeeper-likelihood-column { min-width: 180px; }
.goalkeeper-audit-table th:last-child, .goalkeeper-audit-table td:last-child { min-width: 230px; }
.goalkeeper-audit-table tr.is-review { background: var(--burgundy-soft); }
.goalkeeper-likelihood { display: grid; grid-template-columns: minmax(90px, 1fr) 38px; gap: 9px; align-items: center; }
.goalkeeper-likelihood-track { height: 8px; overflow: hidden; background: var(--paper-deep); border-radius: 999px; }
.goalkeeper-likelihood-track > span { display: block; height: 100%; background: var(--teal); border-radius: inherit; }
.goalkeeper-audit-table tr.is-review .goalkeeper-likelihood-track > span { background: var(--burgundy); }
.goalkeeper-likelihood > strong { color: var(--teal-dark); font-size: .72rem; }
.goalkeeper-audit-table tr.is-review .goalkeeper-likelihood > strong { color: var(--burgundy); }
.goalkeeper-audit-table td:last-child .status-pill { display: inline-flex; margin-bottom: 4px; }
.goalkeeper-audit-table td:last-child small { max-width: 300px; margin-left: auto; }
.comparison-heading { margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--line); }
.initial-option-switcher { display: flex; justify-content: space-between; gap: 18px; margin: 0 0 22px; padding: 15px 17px; background: var(--paper); border-radius: 12px; }
.initial-option-switcher > div { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.initial-option-switcher span { margin-right: 3px; color: var(--muted); font-size: .65rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.option-pill { padding: 7px 10px; color: var(--teal-dark); background: var(--surface); border: 1px solid var(--line); border-radius: 999px; font-size: .69rem; font-weight: 800; text-decoration: none; }
.option-pill:hover { border-color: var(--teal); }
.option-pill.is-active { color: white; background: var(--burgundy); border-color: var(--burgundy); }
.initial-summary-grid { grid-template-columns: repeat(7, 1fr); }
.inline-error { margin: 12px 0; padding: 11px 13px; color: var(--burgundy); background: var(--burgundy-soft); border-radius: 10px; font-size: .8rem; }
.comparison-controls > label:nth-of-type(1), .comparison-controls > label:nth-of-type(2) { flex: 1 1 320px; }
.comparison-controls > label:nth-of-type(n+3) { flex: 0 1 135px; }
.comparison-arrow { align-self: center; padding-top: 18px; color: var(--burgundy); font-size: 1.5rem; }
.comparison-result { margin-top: 26px; padding: 22px; display: flex; justify-content: space-between; gap: 24px; color: white; background: var(--teal-dark); border-radius: 15px; }
.comparison-verdict span { color: #b9d9d3; font-size: .66rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.comparison-verdict strong { display: block; margin-top: 5px; font-family: Georgia, serif; font-size: 1.55rem; font-weight: 500; }
.comparison-verdict p { margin: 5px 0 0; color: #d4e6e2; font-size: .8rem; }
.comparison-status { display: flex; align-items: flex-start; gap: 7px; flex-wrap: wrap; }
.comparison-table { margin-top: 18px; }
.comparison-table tr.is-focus td { color: var(--teal-dark); background: var(--teal-soft); font-weight: 800; }
.personal-plan-result { margin-top: 0; }
.personal-transfer-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 16px; }
.personal-transfer-list article { padding: 15px; background: var(--paper); border: 1px solid var(--line); border-radius: 11px; }
.personal-transfer-list span, .personal-transfer-list small { display: block; color: var(--muted); font-size: .65rem; }
.personal-transfer-list span { font-weight: 800; text-transform: uppercase; }
.personal-transfer-list strong { display: block; margin: 5px 0; font-family: Georgia, serif; font-size: 1rem; font-weight: 500; }
.personal-transfer-list b { color: var(--burgundy); }
.scenario-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 16px; }
.scenario-strip article { padding: 13px; background: var(--paper); border: 1px solid var(--line); border-radius: 10px; }
.scenario-strip article.is-recommended { background: var(--teal-soft); border-color: var(--teal); }
.scenario-strip span, .scenario-strip small { display: block; color: var(--muted); font-size: .62rem; }
.scenario-strip strong { display: block; margin: 4px 0; font-family: Georgia, serif; font-size: 1.25rem; }
.lineup-details { margin-top: 18px; padding: 15px; background: var(--paper); border-radius: 11px; }
.lineup-details summary { color: var(--teal-dark); font-size: .78rem; font-weight: 800; cursor: pointer; }
.lineup-details .table-wrap { margin-top: 16px; }
.reason-list { margin: 18px 0 0; padding-left: 20px; color: var(--muted); font-size: .8rem; }
.reason-list li + li { margin-top: 5px; }
.inline-action { display: inline-flex; margin-top: 14px; color: var(--teal-dark); font-size: .72rem; font-weight: 800; text-decoration: none; }
.inline-action:hover { color: var(--burgundy); }
.secondary-action { min-height: 42px; padding: 9px 14px; color: var(--teal-dark); background: var(--teal-soft); border: 0; border-radius: 10px; font-weight: 800; cursor: pointer; }
.secondary-action:hover { color: white; background: var(--teal-dark); }
.transfer-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.transfer-card { padding: 22px; background: var(--paper); border: 1px solid var(--line); border-radius: 15px; }
.transfer-verdict { display: inline-flex; padding: 5px 8px; color: var(--teal-dark); background: var(--teal-soft); border-radius: 999px; font-size: .62rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.transfer-verdict.consider { color: var(--burgundy); background: var(--burgundy-soft); }
.transfer-verdict.roll { color: var(--muted); background: var(--paper-deep); }
.transfer-players { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 12px; align-items: center; margin-top: 21px; }
.transfer-players div > span { display: block; color: var(--muted); font-size: .65rem; font-weight: 800; text-transform: uppercase; }
.transfer-players strong, .transfer-players small { display: block; }
.transfer-players strong { margin-top: 4px; font-family: Georgia, serif; font-size: 1.15rem; font-weight: 500; }
.transfer-players small { margin-top: 2px; color: var(--muted); font-size: .7rem; }
.transfer-arrow { color: var(--burgundy); font-size: 1.2rem; }
.transfer-gain { display: flex; align-items: baseline; gap: 8px; margin-top: 22px; }
.transfer-gain strong { color: var(--teal-dark); font-family: Georgia, serif; font-size: 2rem; font-weight: 500; }
.transfer-gain span { color: var(--muted); font-size: .72rem; }
.transfer-card > p { margin: 2px 0 0; color: var(--muted); font-size: .68rem; }
.fpl-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.squad-panel { grid-column: 1 / -1; }
.squad-summary-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 14px; }
.squad-summary-grid article { padding: 15px; background: var(--paper); border-radius: 11px; }
.squad-summary-grid span { display: block; color: var(--muted); font-size: .61rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.squad-summary-grid strong { display: block; margin-top: 5px; font-family: Georgia, serif; font-size: 1.25rem; font-weight: 500; }
.squad-note { max-width: none; margin-bottom: 18px; }
.table-wrap { overflow-x: auto; }
.fpl-table { width: 100%; border-collapse: collapse; font-size: .82rem; }
.fpl-table th { padding: 0 10px 10px; color: var(--muted); border-bottom: 1px solid var(--line); font-size: .64rem; letter-spacing: .08em; text-align: right; text-transform: uppercase; }
.fpl-table th:first-child { text-align: left; }
.fpl-table td { padding: 11px 10px; border-bottom: 1px solid var(--line); text-align: right; }
.fpl-table td:first-child { text-align: left; }
.fpl-table tbody tr:last-child td { border-bottom: 0; }
.fpl-table td strong, .fpl-table td small { display: block; }
.fpl-table td strong { font-weight: 800; }
.fpl-table td small { color: var(--muted); font-size: .67rem; }
.quiet-state { padding: 30px; color: var(--muted); background: var(--paper); border: 1px dashed var(--line); border-radius: 14px; }
.quiet-state strong { color: var(--ink); font-family: Georgia, serif; font-size: 1.35rem; font-weight: 500; }
.quiet-state p { margin: 7px 0 0; }
.standalone-state { margin-top: 20px; }
.chip-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.chip-row article { padding: 20px; background: var(--teal-soft); border-radius: 14px; }
.chip-row span, .chip-row strong { display: block; }
.chip-row span { color: var(--muted); font-size: .68rem; font-weight: 800; text-transform: uppercase; }
.chip-row strong { margin-top: 8px; font-family: Georgia, serif; font-size: 1.25rem; font-weight: 500; }
.chip-row p { margin: 6px 0 0; color: var(--teal-dark); font-size: .78rem; }
.chip-row small { display: block; margin-top: 9px; color: var(--burgundy); font-size: .64rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.chip-table-wrap { margin-top: 24px; }
.chip-state-form { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; padding: 17px; background: var(--paper); border-radius: 12px; }
.chip-state-form > div { margin-right: auto; }
.chip-state-form strong, .chip-state-form small { display: block; }
.chip-state-form small { color: var(--muted); font-size: .67rem; }
.chip-state-form label { color: var(--ink); font-size: .72rem; font-weight: 700; }
.chip-state-form input { accent-color: var(--teal); }
.personal-analysis-stamp { display: inline-flex; margin: 0 0 15px; padding: 6px 9px; color: var(--teal-dark); background: var(--teal-soft); border-radius: 999px; font-size: .66rem; font-weight: 800; }
.notice-card { margin-top: 20px; padding: 24px; background: var(--teal-soft); border-left: 4px solid var(--teal); border-radius: 12px; }
.notice-card p { margin: 6px 0 0; }
.error-card { background: var(--burgundy-soft); border-left-color: var(--burgundy); }
.refresh-alert { margin: 0 0 20px; }

.site-footer { width: var(--shell); margin-inline: auto; padding: 28px 0 38px; display: flex; justify-content: space-between; gap: 24px; color: var(--muted); border-top: 1px solid var(--line); font-size: .78rem; }
.site-footer p { margin: 0; }
.site-footer span { color: var(--burgundy); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }

.api-shell { padding-block: 34px 90px; }
.api-hero { min-height: 360px; padding-block: 58px 48px; display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 48px; }
.api-hero h1 { margin: 0; font: 500 clamp(4rem, 8vw, 7rem)/.86 Georgia, serif; letter-spacing: -.06em; }
.api-hero h1 em { color: var(--burgundy); font-weight: 400; }
.api-hero p:last-child { max-width: 650px; margin: 28px 0 0; color: var(--muted); font-size: 1.08rem; }
.api-hero-mark { width: 130px; height: 130px; display: grid; place-items: center; color: white; background: var(--teal-dark); border-radius: 50% 50% 14px 50%; font: 500 2rem Georgia, serif; box-shadow: 0 18px 45px rgba(17,56,51,.16); }
.key-reveal { margin-bottom: 28px; padding: 30px; color: white; background: var(--teal-dark); border-radius: 20px 20px 20px 6px; box-shadow: var(--shadow); }
.key-reveal h2 { margin: 7px 0 10px; font: 500 2rem Georgia, serif; }
.key-reveal > p:not(.eyebrow) { max-width: 720px; color: #c7dfda; }
.key-reveal code { display: block; margin-top: 22px; padding: 16px; overflow-wrap: anywhere; color: var(--teal-dark); background: white; border-radius: 10px; user-select: all; }
.key-reveal .key-reveal-meta { margin: 10px 0 0; color: #bddbd5; font-size: .72rem; }
.api-products { padding-top: 22px; }
.api-product-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.api-product-card { padding: 28px; background: var(--surface); border: 1px solid var(--line); border-radius: 20px; box-shadow: 0 12px 38px rgba(17,56,51,.05); }
.api-product-topline { display: flex; justify-content: space-between; align-items: center; gap: 14px; }
.api-glyph { display: grid; width: 50px; height: 50px; place-items: center; color: white; background: var(--teal-dark); border-radius: 14px 14px 14px 4px; font-size: .68rem; font-weight: 900; letter-spacing: .08em; }
.api-status { display: inline-flex; padding: 6px 9px; color: var(--muted); background: var(--paper-deep); border-radius: 999px; font-size: .62rem; font-weight: 900; letter-spacing: .07em; text-transform: uppercase; }
.api-status.approved, .api-status.available { color: var(--teal-dark); background: var(--teal-soft); }
.api-status.rejected { color: var(--burgundy); background: var(--burgundy-soft); }
.api-status.pending { color: #73510b; background: #fbefc7; }
.api-product-card h3, .api-key-list h3 { margin: 22px 0 7px; font: 500 1.55rem Georgia, serif; }
.api-product-card > p { min-height: 44px; margin: 0; color: var(--muted); }
.api-policy { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 22px 0; }
.api-policy div { padding: 12px; background: var(--paper); border-radius: 10px; }
.api-policy dt, .api-key-list dt { color: var(--muted); font-size: .62rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.api-policy dd, .api-key-list dd { margin: 4px 0 0; font-size: .78rem; font-weight: 800; }
.api-endpoints { display: grid; gap: 7px; margin-bottom: 22px; }
.api-endpoints strong { color: var(--muted); font-size: .65rem; letter-spacing: .06em; text-transform: uppercase; }
.api-endpoints code { padding: 9px 11px; overflow-wrap: anywhere; color: var(--teal-dark); background: var(--teal-soft); border-radius: 8px; font-size: .75rem; }
.api-request-form label, .api-key-form label { display: block; margin-bottom: 7px; font-size: .78rem; font-weight: 800; }
.api-request-form label span { color: var(--muted); font-weight: 500; }
.api-request-form textarea { width: 100%; margin-bottom: 10px; padding: 12px; resize: vertical; color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: 10px; font: inherit; }
.api-request-form textarea:focus { border-color: var(--teal); outline: 3px solid rgba(15,118,110,.13); }
.api-key-form > div { display: grid; grid-template-columns: 1fr auto; gap: 10px; }
.api-state-note { margin: 0; padding: 14px; color: #73510b; background: #fbefc7; border-radius: 10px; font-size: .8rem; }
.api-state-note.approved { color: var(--teal-dark); background: var(--teal-soft); }
.api-keys { padding-top: 72px; }
.api-key-list { display: grid; gap: 12px; }
.api-key-list > article { display: grid; grid-template-columns: minmax(220px, 1.25fr) 2fr auto; gap: 24px; align-items: center; padding: 22px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; }
.api-key-list h3 { margin: 10px 0 5px; font-size: 1.2rem; }
.api-key-list code { color: var(--muted); font-size: .75rem; }
.api-key-list dl { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 0; }
.danger-action { min-height: 40px; padding: 9px 13px; color: var(--burgundy); background: var(--burgundy-soft); border: 0; border-radius: 9px; font-weight: 800; cursor: pointer; }
.danger-action:hover { color: white; background: var(--burgundy); }

:focus-visible { outline: 3px solid rgba(141, 48, 77, .38); outline-offset: 4px; }

@media (max-width: 900px) {
    .hero { grid-template-columns: 1fr; gap: 42px; padding-block: 62px; }
    .welcome-card { max-width: 440px; }
    .birthday-hero { grid-template-columns: 1fr; gap: 30px; }
    .birthday-hero aside { max-width: 360px; }
    .birthday-settings-grid { grid-template-columns: 1fr; }
    .birthday-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .category-block { grid-template-columns: 1fr; gap: 28px; }
    .login-shell { grid-template-columns: 1fr; }
    .login-story { min-height: 520px; }
    .fpl-hero { grid-template-columns: 1fr; gap: 30px; }
    .model-stamp { max-width: 360px; }
    .fpl-metrics { grid-template-columns: repeat(2, 1fr); }
    .fpl-columns { grid-template-columns: 1fr; }
    .squad-summary-grid { grid-template-columns: repeat(2, 1fr); }
    .planning-heading { align-items: flex-start; flex-direction: column; }
    .initial-summary-grid { grid-template-columns: repeat(3, 1fr); }
    .initial-option-switcher { align-items: flex-start; flex-direction: column; }
    .personal-transfer-list { grid-template-columns: 1fr; }
    .scenario-strip { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
    :root { --shell: min(100% - 30px, 1180px); }
    .site-header { min-height: 72px; padding: 12px 15px; }
    .account-identity { display: none; }
    .account-nav { gap: 14px; }
    .brand-copy { display: none; }
    .hero { padding-block: 48px; }
    .hero h1 { font-size: clamp(3rem, 15vw, 4.4rem); }
    .birthday-shell { padding-top: 24px; }
    .birthday-hero { padding-block: 38px; }
    .birthday-hero h1 { font-size: clamp(2.8rem, 15vw, 4.3rem); }
    .birthday-panel { padding: 22px 18px; }
    .birthday-settings-form, .birthday-recipient-form, .birthday-form { grid-template-columns: 1fr; }
    .birthday-list article { grid-template-columns: 54px minmax(0, 1fr); }
    .birthday-card-status, .birthday-actions { grid-column: 2; justify-self: start; }
    .section-heading { align-items: flex-start; flex-direction: column; gap: 14px; }
    .tile-grid { grid-template-columns: 1fr; }
    .category-block { padding-block: 38px; }
    .login-story { min-height: 460px; padding: 52px 24px; }
    .login-panel { padding: 24px 15px; }
    .login-card { padding: 30px 24px; }
    .site-footer { flex-direction: column; }
    .fpl-shell { padding-top: 24px; }
    .fpl-hero { padding-block: 38px; }
    .fpl-hero h1 { font-size: clamp(2.8rem, 15vw, 4.3rem); }
    .fpl-metrics { grid-template-columns: 1fr; }
    .fpl-reminder-preferences, .fpl-reminder-preferences form { align-items: stretch; flex-direction: column; }
    .fpl-reminder-preferences .secondary-action { width: 100%; }
    .workflow-tabs { grid-template-columns: 1fr; }
    .fpl-panel { padding: 22px 18px; }
    .connect-form { grid-template-columns: 1fr; }
    .api-product-grid { grid-template-columns: 1fr; }
    .api-key-list > article { grid-template-columns: 1fr; }
    .api-key-list dl { grid-template-columns: repeat(2, 1fr); }
    .compact-action { width: 100%; }
    .planning-controls { width: 100%; display: grid; grid-template-columns: 1fr 1fr; }
    .planning-controls .secondary-action { grid-column: 1 / -1; }
    .initial-controls, .comparison-controls { width: 100%; align-items: stretch; flex-direction: column; }
    .initial-controls label, .comparison-controls label { width: 100%; }
    .comparison-controls > label:nth-of-type(1), .comparison-controls > label:nth-of-type(2), .comparison-controls > label:nth-of-type(n+3) { flex: auto; }
    .comparison-arrow { display: none; }
    .comparison-result { flex-direction: column; }
    .initial-summary-grid { grid-template-columns: 1fr; }
    .transfer-grid { grid-template-columns: 1fr; }
    .chip-row { grid-template-columns: 1fr; }
    .squad-summary-grid { grid-template-columns: 1fr; }
    .scenario-strip { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
    .api-hero { min-height: auto; grid-template-columns: 1fr; padding-block: 42px; }
    .api-hero-mark { display: none; }
    .api-key-form > div { grid-template-columns: 1fr; }
    .api-key-list dl { grid-template-columns: 1fr 1fr; }
}

/* Your Next Holiday */
.holiday-shell { padding-block: 34px 90px; }
.holiday-hero { min-height: 390px; padding-block: 60px 52px; display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 50px; }
.holiday-hero h1 { margin: 0; font: 500 clamp(4rem, 8vw, 7rem)/.86 Georgia, serif; letter-spacing: -.06em; }
.holiday-hero h1 em { color: var(--burgundy); font-weight: 400; }
.holiday-hero p:last-child { max-width: 650px; margin: 28px 0 0; color: var(--muted); font-size: 1.08rem; }
.holiday-hero-mark { width: 130px; height: 130px; display: grid; place-items: center; background: linear-gradient(145deg, #f9e9b9, var(--burgundy-soft)); border-radius: 50% 50% 50% 14px; font-size: 3.3rem; box-shadow: 0 18px 45px rgba(141,48,77,.12); }
.holiday-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 22px; align-items: start; }
.holiday-panel, .holiday-history { padding: 30px; background: var(--surface); border: 1px solid var(--line); border-radius: 22px; box-shadow: 0 12px 38px rgba(17,56,51,.055); }
.holiday-panel-heading h2, .holiday-history h2, .holiday-results-heading h2 { margin: 0; font: 500 clamp(2rem,4vw,3.2rem) Georgia, serif; letter-spacing: -.04em; }
.holiday-panel-heading > p:last-child { max-width: 650px; margin: 9px 0 0; color: var(--muted); }
.holiday-form { margin-top: 28px; display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.holiday-form fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.holiday-form legend { width: 100%; margin-bottom: 10px; font-weight: 800; }
.holiday-types-fieldset, .holiday-cost-fieldset, .holiday-regions-fieldset { grid-column: 1 / -1; }
.holiday-form .primary-action { grid-column: 1 / -1; width: auto; justify-self: start; min-width: 230px; }
.holiday-choice-grid { display: grid; gap: 8px; }
.temperature-choices { grid-template-columns: repeat(2, 1fr); }
.type-choices { grid-template-columns: repeat(3, 1fr); }
.cost-choices { grid-template-columns: repeat(4, 1fr); }
.region-choices { grid-template-columns: repeat(4, 1fr); }
.field-help { margin: -4px 0 10px; color: var(--muted); font-size: .72rem; }
.holiday-choice-grid label { min-height: 48px; padding: 10px 12px; display: flex; align-items: center; gap: 9px; background: var(--paper); border: 1px solid var(--line); border-radius: 10px; cursor: pointer; font-size: .83rem; font-weight: 700; }
.holiday-choice-grid label:has(input:checked) { color: var(--teal-dark); background: var(--teal-soft); border-color: rgba(15,118,110,.45); }
.holiday-choice-grid input { accent-color: var(--teal); }
.holiday-form .errorlist { margin: 7px 0 0; padding: 0; color: var(--burgundy); list-style: none; font-size: .78rem; }
.holiday-history { max-height: calc(100vh - 122px); position: sticky; top: 102px; overflow-y: auto; }
.holiday-history h2 { margin-bottom: 18px; font-size: 2rem; }
.holiday-history-heading { display: flex; justify-content: space-between; align-items: start; gap: 12px; }
.holiday-history-heading h2 { margin-bottom: 18px; }
.holiday-history-heading form { margin-top: 3px; }
.danger-text-button { padding: 0; color: var(--burgundy); background: transparent; border: 0; font-size: .67rem; font-weight: 800; cursor: pointer; white-space: nowrap; }
.danger-text-button:hover { color: #651c34; text-decoration: underline; }
.holiday-history-item { display: grid; grid-template-columns: 1fr auto; gap: 4px; align-items: stretch; }
.holiday-history-item form { display: grid; }
.holiday-history-item form button { width: 30px; margin-top: 8px; color: var(--burgundy); background: var(--burgundy-soft); border: 0; border-radius: 8px; font-size: 1rem; cursor: pointer; }
.holiday-history-item form button:hover { color: white; background: var(--burgundy); }
.holiday-history-row { margin-top: 8px; padding: 13px; display: block; color: var(--ink); background: var(--paper); border: 1px solid transparent; border-radius: 10px; text-decoration: none; }
.holiday-history-row:hover, .holiday-history-row.is-active { border-color: rgba(15,118,110,.35); background: var(--teal-soft); }
.holiday-history-row strong, .holiday-history-row span, .holiday-history-row small { display: block; }
.holiday-history-row strong { font-size: .84rem; }
.holiday-history-row span, .holiday-history-row small { margin-top: 2px; color: var(--muted); font-size: .68rem; }
.holiday-history-empty { padding: 17px; color: var(--muted); background: var(--paper); border-radius: 10px; font-size: .8rem; }
.holiday-results { padding-top: 70px; }
.holiday-results-heading { display: flex; justify-content: space-between; align-items: end; gap: 30px; padding-bottom: 25px; border-bottom: 1px solid var(--line); }
.holiday-results-heading p:last-child { margin: 9px 0 0; color: var(--muted); }
.holiday-results-heading .secondary-action { width: auto; text-decoration: none; }
.holiday-results-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.destination-search { margin-top: 22px; padding: 24px; display: grid; grid-template-columns: 1fr minmax(320px,.75fr); gap: 30px; align-items: end; background: var(--teal-soft); border-radius: 16px; }
.destination-search h3 { margin: 0; font: 500 1.7rem Georgia, serif; letter-spacing: -.03em; }
.destination-search > div > p:last-child { max-width: 590px; margin: 7px 0 0; color: var(--muted); font-size: .8rem; }
.browse-locations-link { margin-top: 10px; display: inline-flex; gap: 6px; color: var(--teal-dark); font-size: .74rem; font-weight: 800; text-decoration: none; }
.browse-locations-link:hover { color: var(--burgundy); }
.destination-search-form label { display: block; margin-bottom: 5px; color: var(--muted); font-size: .68rem; font-weight: 800; text-transform: uppercase; }
.destination-search-form > div { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.destination-search-form .secondary-action { white-space: nowrap; }
.destination-search-results { margin-top: 18px; padding: 22px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; }
.destination-search-results > h3 { margin: 0 0 13px; font: 500 1.5rem Georgia, serif; }
.destination-check-card { padding: 15px; background: var(--paper); border-radius: 11px; }
.destination-check-card + .destination-check-card { margin-top: 8px; }
.destination-check-title { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; }
.destination-check-title h4 { margin: 0; font: 500 1.25rem Georgia, serif; }
.destination-check-title p { margin: 1px 0 0; color: var(--muted); font-size: .7rem; }
.destination-check-title > strong { color: var(--teal-dark); font: 500 1.35rem Georgia, serif; text-align: right; }
.destination-check-title > strong small { display: block; color: var(--muted); font: 700 .55rem Inter, sans-serif; text-transform: uppercase; }
.destination-check-facts { margin: 11px 0; display: flex; flex-wrap: wrap; gap: 6px; }
.destination-check-facts span { padding: 5px 8px; background: white; border-radius: 999px; color: var(--muted); font-size: .65rem; font-weight: 700; }
.destination-check-status { font-size: .7rem; font-weight: 800; }
.check-pass { color: var(--teal-dark); }
.check-fail { color: var(--burgundy); }
.holiday-search-empty { padding: 16px; color: var(--muted); background: var(--paper); border-radius: 10px; }
.holiday-search-empty p { margin: 3px 0 0; font-size: .78rem; }
.destination-grid { margin-top: 22px; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 18px; }
.destination-card { padding: 26px; background: var(--surface); border: 1px solid var(--line); border-radius: 20px; box-shadow: 0 10px 32px rgba(17,56,51,.05); }
.destination-card:first-child { grid-column: 1 / -1; background: linear-gradient(145deg, var(--surface), #edf5f1); border-color: rgba(15,118,110,.3); }
.destination-rank { display: flex; justify-content: space-between; align-items: center; color: var(--burgundy); font-size: .72rem; font-weight: 900; letter-spacing: .12em; }
.destination-rank > div { display: flex; align-items: center; gap: 8px; }
.cost-pill { padding: 5px 8px; color: var(--teal-dark); background: var(--teal-soft); border-radius: 999px; font-size: .58rem; letter-spacing: .03em; text-transform: uppercase; }
.region-pill { padding: 5px 8px; color: var(--muted); background: var(--paper-deep); border-radius: 999px; font-size: .58rem; letter-spacing: .02em; text-transform: uppercase; }
.cost-pill.premium { color: var(--burgundy); background: var(--burgundy-soft); }
.cost-pill.budget { color: #536331; background: #e7edda; }
.destination-icon { width: 44px; height: 44px; display: grid; place-items: center; background: var(--paper); border-radius: 13px; font-size: 1.3rem; }
.destination-title { margin-top: 16px; display: flex; justify-content: space-between; align-items: start; gap: 20px; }
.destination-title h3 { margin: 0; font: 500 2rem Georgia, serif; letter-spacing: -.035em; }
.destination-title p { margin: 2px 0 0; color: var(--muted); font-size: .76rem; }
.destination-title > strong { color: var(--teal-dark); font: 500 1.8rem Georgia, serif; text-align: right; white-space: nowrap; }
.destination-title > strong small { display: block; color: var(--muted); font: 700 .58rem Inter, sans-serif; letter-spacing: .06em; text-transform: uppercase; }
.destination-summary { min-height: 48px; margin: 18px 0; color: var(--muted); font-size: .88rem; }
.climate-strip { display: grid; grid-template-columns: repeat(4, 1fr); overflow: hidden; background: var(--line); border: 1px solid var(--line); border-radius: 11px; gap: 1px; }
.climate-strip > div { padding: 11px 8px; background: var(--paper); text-align: center; }
.climate-strip span, .climate-strip strong, .climate-strip small { display: block; }
.climate-strip strong { margin-top: 3px; font-size: .83rem; }
.climate-strip small { color: var(--muted); font-size: .57rem; }
.destination-reasons { margin: 18px 0; padding-left: 19px; color: var(--muted); font-size: .76rem; }
.destination-reasons li + li { margin-top: 4px; }
.destination-highlights { display: flex; flex-wrap: wrap; gap: 6px; }
.destination-highlights span { padding: 5px 8px; color: var(--burgundy); background: var(--burgundy-soft); border-radius: 999px; font-size: .62rem; font-weight: 800; }
.destination-advice { margin-top: 20px; display: inline-flex; gap: 5px; color: var(--teal-dark); font-size: .73rem; font-weight: 800; text-decoration: none; }
.destination-advice:hover { color: var(--burgundy); }
.holiday-caveat { margin-top: 22px; padding: 20px 22px; background: var(--paper-deep); border-radius: 14px; }
.holiday-caveat strong { color: var(--burgundy); }
.holiday-caveat p { margin: 5px 0 0; color: var(--muted); font-size: .8rem; }
.locations-hero { padding-block: 64px 50px; display: flex; justify-content: space-between; align-items: end; gap: 40px; }
.locations-hero h1 { margin: 0; font: 500 clamp(3.5rem,7vw,6.5rem)/.88 Georgia, serif; letter-spacing: -.055em; }
.locations-hero h1 em { color: var(--burgundy); font-weight: 400; }
.locations-hero > div:first-child > p:last-child { max-width: 650px; margin: 24px 0 0; color: var(--muted); }
.locations-count { min-width: 160px; padding: 22px; color: white; background: var(--teal-dark); border-radius: 20px 20px 20px 6px; text-align: center; }
.locations-count strong, .locations-count span { display: block; }
.locations-count strong { font: 500 2.8rem Georgia, serif; }
.locations-count span { color: #c7dfda; font-size: .67rem; font-weight: 800; text-transform: uppercase; }
.locations-filters { padding: 20px; display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr auto auto; gap: 10px; align-items: end; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; }
.locations-filters label { color: var(--muted); font-size: .67rem; font-weight: 800; text-transform: uppercase; }
.locations-filters .field-input { display: block; margin-top: 4px; }
.locations-filters .primary-action { width: auto; white-space: nowrap; }
.locations-filters > .text-link { min-height: 48px; display: inline-flex; align-items: center; }
.locations-summary { margin: 24px 0 12px; color: var(--muted); font-size: .78rem; }
.locations-summary strong { color: var(--ink); }
.locations-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; }
.location-card { padding: 22px; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; }
.location-card header { display: flex; justify-content: space-between; align-items: center; }
.location-card header > div { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 5px; }
.location-card h2 { margin: 16px 0 0; font: 500 1.6rem Georgia, serif; letter-spacing: -.03em; }
.location-card .location-country { min-height: auto; margin: 1px 0 14px; color: var(--burgundy); font-size: .68rem; font-weight: 800; }
.location-card > p:not(.location-country) { min-height: 66px; margin: 0; color: var(--muted); font-size: .8rem; }
.location-flight { margin: 15px 0 10px; color: var(--teal-dark); font-size: .7rem; font-weight: 800; }
.location-card .destination-advice { margin-top: auto; padding-top: 18px; }
.locations-empty { grid-column: 1 / -1; padding: 40px; background: var(--surface); border-radius: 16px; text-align: center; }
.locations-empty p { margin: 5px 0 0; color: var(--muted); }

@media (max-width: 900px) {
    .holiday-layout { grid-template-columns: 1fr; }
    .holiday-history { max-height: none; position: static; overflow: visible; }
    .type-choices, .cost-choices, .region-choices { grid-template-columns: repeat(2, 1fr); }
    .destination-search { grid-template-columns: 1fr; }
    .locations-filters { grid-template-columns: 1fr 1fr; }
    .locations-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (max-width: 640px) {
    .holiday-shell { padding-top: 24px; }
    .holiday-hero { min-height: 0; grid-template-columns: 1fr; padding-block: 40px; }
    .holiday-hero-mark { display: none; }
    .holiday-panel, .holiday-history { padding: 22px 17px; }
    .holiday-form { grid-template-columns: 1fr; }
    .holiday-types-fieldset, .holiday-cost-fieldset, .holiday-regions-fieldset, .holiday-form .primary-action { grid-column: auto; }
    .temperature-choices, .type-choices { grid-template-columns: 1fr 1fr; }
    .holiday-results-heading { align-items: flex-start; flex-direction: column; }
    .destination-grid { grid-template-columns: 1fr; }
    .destination-card:first-child { grid-column: auto; }
    .climate-strip { grid-template-columns: 1fr 1fr; }
    .destination-search-form > div { grid-template-columns: 1fr; }
    .holiday-results-actions { justify-content: flex-start; }
    .locations-hero { align-items: flex-start; flex-direction: column; }
    .locations-filters, .locations-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}

/* Gym Buddy */
.gym-shell { padding-block: 34px 90px; }
.gym-hero { padding-block: 50px 42px; display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 50px; }
.gym-hero h1 { margin: 0; font: 500 clamp(3rem, 6vw, 5.7rem)/.94 Georgia, serif; letter-spacing: -.05em; }
.gym-hero h1 em { color: var(--burgundy); font-weight: 400; }
.gym-hero p:last-child { max-width: 600px; margin: 25px 0 0; color: var(--muted); font-size: 1.04rem; }
.gym-hero-mark { width: 108px; height: 108px; display: grid; place-items: center; background: var(--teal-soft); border-radius: 34px 34px 34px 10px; font-size: 2.8rem; transform: rotate(2deg); }
.gym-metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin-bottom: 24px; overflow: hidden; background: var(--line); border: 1px solid var(--line); border-radius: 16px; }
.gym-metrics article { padding: 20px 22px; background: var(--surface); }
.gym-metrics span, .gym-metrics strong { display: block; }
.gym-metrics span { color: var(--muted); font-size: .67rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.gym-metrics strong { margin-top: 4px; font: 500 1.8rem Georgia, serif; }
.gym-tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 20px; }
.gym-tabs a { padding: 16px 18px; color: var(--muted); background: rgba(255,253,248,.55); border: 1px solid var(--line); border-radius: 13px; text-decoration: none; }
.gym-tabs a:hover, .gym-tabs a.is-active { color: var(--teal-dark); background: var(--surface); border-color: rgba(15,118,110,.45); }
.gym-tabs a.is-active { box-shadow: inset 0 -3px var(--teal); }
.gym-tabs strong, .gym-tabs small { display: block; }
.gym-tabs small { margin-top: 2px; font-size: .67rem; }
.gym-panel { margin-top: 18px; padding: 30px; background: var(--surface); border: 1px solid var(--line); border-radius: 22px; box-shadow: 0 12px 38px rgba(17,56,51,.055); }
.gym-panel-heading { display: flex; justify-content: space-between; align-items: end; gap: 30px; margin-bottom: 25px; }
.gym-panel-heading h2 { margin: 0; font: 500 clamp(2rem,4vw,3.2rem) Georgia, serif; letter-spacing: -.035em; }
.gym-panel-heading p:not(.eyebrow), .gym-panel-heading small { margin: 8px 0 0; color: var(--muted); }
.gym-panel-heading .primary-action { width: auto; min-width: 160px; }
.session-header-actions { display: flex; align-items: center; gap: 12px; }
.session-header-actions form { display: grid; gap: 8px; }
.session-timing-fields { display: flex; align-items: end; gap: 8px; }
.session-timing-fields label, .history-timing-form label { color: var(--muted); font-size: .62rem; font-weight: 800; text-transform: uppercase; }
.session-timing-fields .field-input, .history-timing-form .field-input { display: block; width: 138px; margin-top: 3px; padding: 7px 8px; }
.session-save-actions { display: flex; align-items: center; gap: 9px; }
.text-export-action { min-height: 38px; padding: 8px 12px; display: inline-flex; align-items: center; justify-content: center; color: var(--burgundy); background: var(--burgundy-soft); border-radius: 9px; font-size: .72rem; font-weight: 800; text-decoration: none; white-space: nowrap; }
.text-export-action:hover { color: white; background: var(--burgundy); }
.gym-exercise-stack { display: grid; gap: 16px; }
.gym-circuit-card { overflow: hidden; background: var(--paper); border: 1px solid rgba(128,38,67,.25); border-radius: 16px; }
.gym-circuit-card .circuit-banner { margin: 0; border-radius: 0; }
.circuit-exercise-summary { padding: 14px 18px; display: grid; gap: 8px; border-bottom: 1px solid var(--line); }
.circuit-exercise-summary > div { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.circuit-exercise-summary strong, .circuit-exercise-summary small { display: block; }
.circuit-exercise-summary small { margin-top: 2px; color: var(--muted); font-size: .72rem; }
.circuit-round-list { padding: 18px; display: grid; gap: 14px; }
.circuit-round { padding: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 13px; }
.circuit-round > h3 { margin: 0 0 12px; color: var(--burgundy); font: 500 1.35rem Georgia, serif; }
.circuit-round-exercise + .circuit-round-exercise { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--line); }
.circuit-round-exercise h4 { margin: 0 0 7px; font-size: .78rem; }
.circuit-round-exercise .gym-set-row { margin-top: 0; }
.circuit-banner { margin: 5px 0 -9px; padding: 15px 18px; display: flex; justify-content: space-between; align-items: center; gap: 20px; color: white; background: var(--burgundy); border-radius: 14px 14px 5px 5px; }
.circuit-banner span, .circuit-banner strong { display: block; }
.circuit-banner span { font-size: .59rem; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; opacity: .75; }
.circuit-banner strong { margin-top: 2px; font: 500 1.25rem Georgia, serif; }
.circuit-banner p { margin: 0; font-size: .75rem; opacity: .9; }
.gym-exercise-card { padding: 24px; background: var(--paper); border: 1px solid var(--line); border-radius: 16px; }
.gym-exercise-card.is-circuit { border-left: 4px solid var(--burgundy); }
.gym-exercise-card.is-complete { background: #edf5f1; border-color: rgba(15,118,110,.35); }
.gym-exercise-card > header { display: flex; justify-content: space-between; gap: 24px; }
.gym-exercise-card h3, .routine-card h3, .gym-start-grid h3, .history-detail h3, .pb-grid h3 { margin: 3px 0 5px; font: 500 1.5rem Georgia, serif; }
.gym-exercise-card header p { max-width: 700px; margin: 0; color: var(--muted); font-size: .82rem; }
.gym-group { color: var(--burgundy); font-size: .62rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.circuit-member-label { display: block; margin: -1px 0 5px; color: var(--burgundy); font-size: .62rem; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; }
.completion-toggle, .small-action, .secondary-action { padding: 9px 13px; color: var(--teal-dark); background: var(--teal-soft); border: 0; border-radius: 9px; font-weight: 800; cursor: pointer; }
.completion-toggle { white-space: nowrap; cursor: default; }
.completion-toggle.is-complete { color: white; background: var(--teal); }
.exercise-card-actions { display: flex; align-items: flex-end; flex-direction: column; gap: 10px; }
.exercise-order-actions { display: inline-flex; align-items: center; gap: 5px; }
.exercise-order-actions button { min-width: 32px; height: 32px; padding: 0 8px; color: var(--teal-dark); background: var(--teal-soft); border: 0; border-radius: 7px; font-weight: 900; cursor: pointer; }
.exercise-order-actions button:hover { color: white; background: var(--teal); }
.exercise-order-actions button.remove { color: var(--burgundy); background: var(--burgundy-soft); }
.exercise-order-actions button.remove:hover { color: white; background: var(--burgundy); }
.exercise-order-actions button:disabled { color: #8b9894; background: var(--paper-deep); cursor: not-allowed; opacity: .55; }
.secondary-action { min-height: 42px; }
.gym-reference-row { display: grid; grid-template-columns: 2fr 1fr; gap: 10px; margin: 18px 0; }
.gym-reference-row > div { padding: 12px; background: var(--surface); border-radius: 10px; }
.gym-reference-row strong, .gym-reference-row span { display: block; }
.gym-reference-row strong { color: var(--muted); font-size: .62rem; text-transform: uppercase; }
.gym-reference-row span { margin-top: 3px; font-size: .76rem; }
.gym-set-list { display: grid; gap: 7px; }
.gym-set-row { display: grid; grid-template-columns: 92px repeat(3,minmax(80px,110px)) minmax(120px,1fr) auto; gap: 9px; align-items: end; padding: 10px; background: var(--surface); border-radius: 10px; }
.gym-set-row.mixed-set-row { grid-template-columns: 92px repeat(4,minmax(70px,95px)) minmax(110px,1fr) auto; }
.gym-set-row.compact-set-row { grid-template-columns: 92px minmax(90px,130px) minmax(160px,1fr) auto; }
.gym-set-row.is-complete { box-shadow: inset 3px 0 var(--teal); }
.gym-set-row label { color: var(--muted); font-size: .59rem; font-weight: 800; text-transform: uppercase; }
.gym-set-row input:not([type="checkbox"]) { width: 100%; margin-top: 3px; padding: 7px 8px; color: var(--ink); background: white; border: 1px solid var(--line); border-radius: 7px; }
.set-actions { align-self: center; display: flex; gap: 5px; }
.set-actions button { min-height: 34px; padding: 7px 9px; border: 0; border-radius: 7px; font-size: .65rem; font-weight: 800; white-space: nowrap; cursor: pointer; }
.set-done { color: white; background: var(--teal); }
.set-done:hover { background: var(--teal-dark); }
.set-delete { color: var(--burgundy); background: var(--burgundy-soft); }
.set-delete:hover { color: white; background: var(--burgundy); }
.set-number { align-self: center; font-size: .78rem; }
.set-identity { align-self: center; }
.set-identity .set-number, .set-identity .set-warmup { display: block; }
.set-identity .set-warmup { margin-top: 3px; color: var(--burgundy); font-size: .56rem; }
.inline-action { margin-top: 12px; }
.burgundy-text { color: var(--burgundy); }
.session-save-footer { margin-top: 20px; padding: 16px; display: flex; justify-content: flex-end; align-items: center; gap: 18px; background: var(--teal-soft); border-radius: 12px; }
.session-save-footer span { margin-right: auto; color: var(--teal-dark); font-size: .75rem; font-weight: 700; }
.session-save-footer .primary-action { width: auto; min-width: 150px; }
.gym-add-exercise { margin-top: 25px; padding-top: 22px; border-top: 1px solid var(--line); }
.gym-add-exercise h3 { margin: 0 0 12px; }
.quick-circuit-add { margin-top: 16px; padding: 14px 16px; background: var(--burgundy-soft); border-radius: 11px; }
.quick-circuit-add summary { color: var(--burgundy); font-weight: 800; cursor: pointer; }
.quick-circuit-add form { margin-top: 13px; }
.quick-circuit-add label, .quick-circuit-add .field-input { display: block; }
.quick-circuit-add .field-input { width: 100%; margin-top: 3px; }
.compact-form { display: flex; align-items: end; gap: 12px; flex-wrap: wrap; }
.compact-form label, .stacked-form label, .routine-exercise-form label { color: var(--muted); font-size: .66rem; font-weight: 800; text-transform: uppercase; }
.field-input { padding: 10px 11px; color: var(--ink); background: white; border: 1px solid var(--line); border-radius: 8px; }
.exercise-picker { display: grid; grid-template-columns: minmax(180px,1fr) minmax(210px,1.2fr); gap: 8px; align-items: end; }
.exercise-picker label, .exercise-picker .field-input { display: block; width: 100%; }
.exercise-picker .field-input { margin-top: 3px; }
.exercise-picker > small { grid-column: 1 / -1; color: var(--burgundy); font-size: .68rem; }
.gym-start-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; }
.gym-start-grid article { padding: 22px; background: var(--paper); border-radius: 14px; }
.gym-start-grid article > span, .routine-card header span { color: var(--burgundy); font-size: .62rem; font-weight: 900; text-transform: uppercase; }
.gym-start-grid article > p { min-height: 45px; color: var(--muted); font-size: .8rem; }
.gym-start-grid .primary-action { margin-top: 15px; }
.stacked-form { display: grid; gap: 10px; }
.stacked-form label, .stacked-form .field-input { display: block; width: 100%; }
.gym-create-box { margin-bottom: 18px; padding: 14px 17px; background: var(--teal-soft); border-radius: 12px; }
.gym-create-box summary, .routine-add summary { color: var(--teal-dark); font-weight: 800; cursor: pointer; }
.gym-create-box form, .routine-add form { margin-top: 14px; }
.gym-create-box textarea { resize: vertical; }
.routine-grid { display: grid; gap: 17px; }
.routine-card { padding: 23px; background: var(--paper); border: 1px solid var(--line); border-radius: 15px; }
.routine-card.is-archived { opacity: .7; }
.routine-card > header { display: flex; justify-content: space-between; gap: 20px; }
.routine-card header p { margin: 0; color: var(--muted); }
.routine-exercises { display: grid; gap: 7px; padding: 0; margin: 19px 0; list-style: none; }
.routine-circuits { display: grid; gap: 7px; margin-top: 16px; }
.routine-circuits section { padding: 12px 14px; display: flex; justify-content: space-between; align-items: center; gap: 15px; color: var(--burgundy); background: var(--burgundy-soft); border-radius: 10px; }
.routine-circuits span, .routine-circuits strong, .routine-circuits small { display: block; }
.routine-circuits span { font-size: .57rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.routine-circuits small { color: var(--muted); }
.routine-circuit-member { box-shadow: inset 3px 0 var(--burgundy); }
.circuit-create { margin-bottom: 9px; padding: 12px 14px; background: var(--burgundy-soft); border-radius: 10px; }
.circuit-create summary { color: var(--burgundy); }
.routine-exercises li { display: flex; justify-content: space-between; gap: 16px; padding: 12px; background: var(--surface); border-radius: 9px; }
.routine-exercises strong, .routine-exercises small { display: block; }
.routine-exercises small { color: var(--burgundy); font-size: .68rem; }
.routine-exercises p { margin: 4px 0 0; color: var(--muted); font-size: .72rem; }
.icon-button { color: var(--burgundy); background: transparent; border: 0; font-size: 1.3rem; cursor: pointer; }
.routine-exercise-form { display: grid; grid-template-columns: 2fr repeat(5,1fr); gap: 8px; align-items: end; }
.routine-exercise-form .exercise-picker { grid-column: span 3; }
.routine-exercise-form .wide { grid-column: span 2; }
.routine-exercise-form .field-input { display: block; width: 100%; margin-top: 3px; }
.routine-start { margin-top: 14px; }
.routine-start .primary-action { width: auto; }
.exercise-library { margin-top: 20px; }
.exercise-group + .exercise-group { margin-top: 28px; }
.exercise-group > h3 { color: var(--burgundy); font: 500 1.4rem Georgia,serif; }
.exercise-library-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }
.exercise-library-grid article { padding: 16px; background: var(--paper); border-radius: 11px; }
.exercise-library-grid strong, .exercise-library-grid span { display: block; }
.exercise-library-grid span { color: var(--teal); font-size: .62rem; font-weight: 800; text-transform: uppercase; }
.exercise-library-grid p { margin: 8px 0 0; color: var(--muted); font-size: .74rem; }
.history-layout { display: grid; grid-template-columns: minmax(220px,.5fr) minmax(0,1.5fr); gap: 18px; }
.history-list { max-height: 75vh; position: sticky; top: 82px; display: grid; align-content: start; gap: 7px; overflow-y: auto; padding-right: 4px; }
.history-row { padding: 13px; background: var(--paper); border: 1px solid transparent; border-radius: 10px; text-decoration: none; }
.history-row:hover, .history-row.is-active { border-color: var(--teal); }
.history-row span, .history-row strong, .history-row small { display: block; }
.history-row span { color: var(--burgundy); font-size: .63rem; font-weight: 800; text-transform: uppercase; }
.history-row small { color: var(--muted); font-size: .68rem; }
.history-detail { min-height: 260px; padding: 22px; background: var(--paper); border-radius: 13px; }
.history-detail > article > span { color: var(--burgundy); font-size: .68rem; font-weight: 800; }
.history-detail-heading { display: flex; justify-content: space-between; align-items: start; gap: 18px; }
.history-detail-heading span { color: var(--burgundy); font-size: .68rem; font-weight: 800; }
.history-heading-actions { display: flex; align-items: center; gap: 8px; }
.history-heading-actions .primary-action { width: auto; min-height: 38px; padding: 8px 13px; }
.history-delete-form { margin: 0; }
.history-delete-action { border: 0; font: inherit; cursor: pointer; }
.history-session-notes { margin: 14px 0; padding: 11px 13px; color: var(--muted); background: var(--surface); border-radius: 9px; }
.history-timing-form { display: flex; align-items: end; gap: 9px; margin: 14px 0 18px; padding: 12px; background: var(--surface); border-radius: 10px; }
.history-timing-form .errorlist, .session-header-actions .errorlist { margin: 0; padding: 0; color: var(--burgundy); font-size: .7rem; list-style: none; }
.history-exercise { display: grid; grid-template-columns: minmax(120px,.7fr) 1.3fr; gap: 15px; padding: 11px 0; border-top: 1px solid var(--line); }
.history-exercise div span { display: block; color: var(--muted); font-size: .75rem; }
.history-exercise > strong small { display: block; color: var(--burgundy); font-size: .58rem; text-transform: uppercase; }
.history-edit-form { margin-top: 16px; }
.history-circuit-editor { margin-top: 16px; padding: 16px; background: var(--burgundy-soft); border-radius: 12px; }
.history-circuit-editor > div:first-child > span { color: var(--burgundy); font-size: .6rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.history-circuit-editor h4 { margin: 3px 0 0; font: 500 1.35rem Georgia, serif; }
.history-circuit-editor > div:first-child > small { display: block; margin-top: 4px; color: var(--muted); font-size: .68rem; }
.history-circuit-editor-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 13px; }
.history-circuit-editor-grid article { display: grid; grid-template-columns: minmax(0, 1fr) 110px; gap: 8px; padding: 13px; background: var(--surface); border-radius: 10px; }
.history-circuit-editor-grid label { color: var(--muted); font-size: .62rem; font-weight: 800; text-transform: uppercase; }
.history-circuit-editor-grid .field-input { display: block; width: 100%; min-height: 40px; margin-top: 3px; }
.history-circuit-editor-grid article > small { grid-column: 1 / -1; color: var(--burgundy); font-size: .66rem; }
.history-metadata-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 9px; padding: 15px; background: var(--surface); border-radius: 11px; }
.history-metadata-grid label, .history-add-exercise-fields > label { color: var(--muted); font-size: .62rem; font-weight: 800; text-transform: uppercase; }
.history-metadata-grid .field-input, .history-add-exercise-fields .field-input { display: block; width: 100%; margin-top: 3px; }
.history-metadata-grid .wide { grid-column: span 2; }
.history-metadata-grid .full { grid-column: 1 / -1; }
.history-metadata-grid textarea { resize: vertical; }
.history-edit-exercises { display: grid; gap: 13px; margin-top: 16px; }
.history-edit-exercise { padding: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
.history-edit-exercise > header { display: flex; justify-content: space-between; align-items: start; gap: 18px; margin-bottom: 12px; }
.history-edit-exercise > header span { color: var(--burgundy); font-size: .6rem; font-weight: 900; text-transform: uppercase; }
.history-edit-exercise h4, .history-add-exercise h4 { margin: 2px 0 0; font: 500 1.3rem Georgia,serif; }
.history-combo-round-note { display: block; margin-top: 10px; color: var(--burgundy); font-size: .68rem; font-weight: 700; }
.history-edit-set-row { background: white; }
.history-add-exercise { margin-top: 17px; padding: 16px; background: var(--teal-soft); border-radius: 11px; }
.history-add-exercise-fields { display: flex; align-items: end; gap: 10px; margin-top: 11px; }
.history-add-exercise-fields .exercise-picker { flex: 1; }
.history-save-footer { margin-top: 16px; display: flex; justify-content: space-between; align-items: center; gap: 15px; }
.history-save-footer span { color: var(--muted); font-size: .72rem; }
.history-save-footer .primary-action { width: auto; }
.history-import { display: flex; justify-content: space-between; gap: 30px; align-items: end; }
.history-import h2 { margin: 0; font: 500 2rem Georgia,serif; }
.history-import p:last-child { max-width: 650px; color: var(--muted); }
.history-import form { display: flex; align-items: center; gap: 10px; }
.pb-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; }
.pb-progression { margin-bottom: 24px; padding: 20px; background: var(--paper); border: 1px solid var(--line); border-radius: 15px; }
.pb-progression-picker { display: flex; align-items: end; gap: 10px; }
.pb-progression-picker label { color: var(--muted); font-size: .68rem; font-weight: 800; text-transform: uppercase; }
.pb-progression-picker .field-input { display: block; min-width: 280px; margin-top: 4px; }
.pb-progression-picker > small { align-self: center; color: var(--burgundy); font-size: .68rem; }
.progression-heading { display: flex; justify-content: space-between; align-items: end; gap: 20px; margin: 22px 0 14px; padding-top: 18px; border-top: 1px solid var(--line); }
.progression-heading span { color: var(--burgundy); font-size: .65rem; font-weight: 900; text-transform: uppercase; }
.progression-heading h3 { margin: 3px 0 0; font: 500 1.8rem Georgia, serif; }
.progression-heading small { max-width: 260px; color: var(--muted); text-align: right; }
.progression-bars { min-height: 250px; display: flex; align-items: stretch; gap: 9px; overflow-x: auto; padding: 8px 2px 2px; }
.progression-point { min-width: 74px; flex: 1 0 74px; display: grid; grid-template-rows: auto 17px 155px auto auto; text-align: center; }
.progression-point > strong { grid-row: 1; align-self: end; color: var(--teal-dark); font-size: .72rem; }
.progression-point > span { grid-row: 2; color: var(--muted); font-size: .58rem; }
.progression-bar-track { grid-row: 3; width: 34px; height: 145px; align-self: end; justify-self: center; display: flex; align-items: end; overflow: hidden; background: var(--teal-soft); border-radius: 8px 8px 3px 3px; }
.progression-bar-track i { width: 100%; display: block; background: linear-gradient(180deg,var(--teal),var(--teal-dark)); border-radius: inherit; }
.progression-point time { grid-row: 4; margin-top: 7px; color: var(--burgundy); font-size: .63rem; font-weight: 800; }
.progression-point > small { grid-row: 5; max-width: 90px; justify-self: center; overflow: hidden; color: var(--muted); font-size: .57rem; text-overflow: ellipsis; white-space: nowrap; }
.pb-grid article { padding: 20px; background: var(--paper); border-radius: 13px; }
.pb-grid article > span { color: var(--burgundy); font-size: .62rem; font-weight: 900; text-transform: uppercase; }
.pb-grid article > div { margin: 16px 0; padding: 13px; color: white; background: var(--teal-dark); border-radius: 10px; }
.pb-grid article > div small, .pb-grid article > div strong { display: block; }
.pb-grid article > div strong { font: 500 1.55rem Georgia,serif; }
.pb-grid dl { display: grid; grid-template-columns: 1fr auto; gap: 5px; margin: 0; font-size: .72rem; }
.pb-grid dt { color: var(--muted); }
.pb-grid dd { margin: 0; font-weight: 800; }
.empty-state { padding: 28px; color: var(--muted); background: var(--paper); border: 1px dashed var(--line); border-radius: 12px; }
.empty-state h3 { margin: 0; color: var(--ink); font: 500 1.4rem Georgia,serif; }
.empty-state p { margin: 6px 0 0; }

/* Snag List */
.snag-shell { padding-bottom: 70px; }
.snag-hero { margin: 18px 0 24px; padding: 36px; color: white; background: var(--teal-dark); border-radius: 18px; }
.snag-hero h1 { margin: 3px 0 9px; font: 500 clamp(2.4rem, 5vw, 4.3rem) Georgia, serif; }
.snag-hero p { max-width: 750px; margin: 8px 0; line-height: 1.55; }
.snag-hero a { display: inline-block; margin-top: 12px; color: white; text-decoration: underline; }
.snag-layout { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(270px, .85fr); gap: 18px; align-items: start; }
.snag-panel { min-width: 0; padding: 24px; background: var(--paper); border: 1px solid var(--line); border-radius: 15px; }
.snag-panel h2 { margin: 0 0 17px; font: 500 1.65rem Georgia, serif; }
.snag-row { display: flex; justify-content: space-between; gap: 16px; padding: 15px 0; border-top: 1px solid var(--line); }
.snag-row:first-of-type { border-top: 0; }
.snag-row h3 { margin: 3px 0; font: 500 1.25rem Georgia, serif; }
.snag-row h3 a { color: var(--teal-dark); }
.snag-row p, .snag-muted { margin: 4px 0; color: var(--muted); font-size: .79rem; line-height: 1.45; }
.snag-actions { display: flex; align-items: flex-start; gap: 11px; flex: 0 0 auto; }
.snag-actions form { margin: 0; }
.snag-actions a, .snag-actions button { padding: 0; border: 0; color: var(--burgundy); background: transparent; cursor: pointer; font-family: inherit; font-size: .72rem; font-weight: 700; text-decoration: underline; }
.snag-form { display: grid; gap: 14px; }
.snag-form label { display: grid; gap: 5px; color: var(--ink); font-size: .75rem; font-weight: 700; }
.snag-form label small { color: var(--muted); font-size: .7rem; font-weight: 400; }
.snag-form .field-input { width: 100%; }
.snag-form .snag-check { display: flex; align-items: center; }
.snag-form .errorlist { margin: 0; color: var(--burgundy); }
.snag-status { color: var(--burgundy); font-size: .65rem; font-weight: 800; text-transform: uppercase; }
.snag-steps { padding-left: 22px; }
.snag-steps li { padding: 12px 0; border-top: 1px solid var(--line); }
.snag-steps li > div:first-child { margin-bottom: 7px; }
.snag-steps p { margin: 5px 0; line-height: 1.5; }
.snag-import { margin-top: 18px; }
.snag-import p { color: var(--muted); line-height: 1.5; }
.snag-job-list { margin-bottom: 18px; }
.snag-section-heading { display: flex; justify-content: space-between; align-items: start; gap: 18px; }
.snag-section-heading h2 { margin-bottom: 3px; }
.snag-section-heading p { margin: 0 0 17px; color: var(--muted); font-size: .78rem; }
.snag-section-heading > a { color: var(--teal-dark); font-size: .78rem; font-weight: 800; white-space: nowrap; }
.snag-create-job { max-width: 650px; }
.snag-job { border-top: 1px solid var(--line); }
.snag-job > summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 17px 4px; cursor: pointer; list-style: none; }
.snag-job > summary::-webkit-details-marker { display: none; }
.snag-job > summary::after { content: "+"; color: var(--burgundy); font-size: 1.4rem; font-weight: 400; }
.snag-job[open] > summary::after { content: "−"; }
.snag-job-title { display: grid; gap: 4px; min-width: 0; flex: 1; }
.snag-job-title strong { color: var(--teal-dark); font: 500 1.26rem Georgia, serif; }
.snag-job-title small { color: var(--muted); font-size: .7rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.snag-job-count { color: var(--muted); font-size: .68rem; white-space: nowrap; }
.snag-job-body { padding: 4px 4px 22px; }
.snag-job-description { max-width: 850px; line-height: 1.55; }
.snag-review-note { padding: 11px 13px; color: var(--burgundy); background: var(--burgundy-soft); border-radius: 8px; line-height: 1.45; }
.snag-job-toolbar, .snag-status-form { display: flex; align-items: end; gap: 12px; }
.snag-job-toolbar { justify-content: space-between; margin: 20px 0; }
.snag-status-form label { display: grid; gap: 4px; font-size: .68rem; font-weight: 800; }
.snag-status-form .field-input { min-width: 150px; }
.snag-job-columns { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 22px; }
.snag-job-columns > section { min-width: 0; padding: 18px; background: var(--surface); border-radius: 12px; }
.snag-job-columns h3 { margin: 0 0 12px; font: 500 1.28rem Georgia, serif; }
.snag-inline-list { display: grid; gap: 10px; margin: 0; padding-left: 23px; }
.snag-inline-list li { padding: 8px 0; line-height: 1.45; }
.snag-inline-list li p { margin: 4px 0; color: var(--muted); font-size: .7rem; }
.snag-inline-list li strong { display: block; font-size: .84rem; }
.snag-inline-list li.is-complete > .snag-inline-row > span { color: var(--muted); text-decoration: line-through; }
.snag-inline-row { display: flex; align-items: start; gap: 8px; }
.snag-inline-row form { margin: 0; }
.snag-step-toggle { padding: 0; border: 0; color: var(--teal-dark); background: transparent; cursor: pointer; font-size: 1.35rem; line-height: 1; }
.snag-inline-edit, .snag-add-details, .snag-edit-job { margin-top: 8px; }
.snag-inline-edit > summary, .snag-add-details > summary, .snag-edit-job > summary { color: var(--burgundy); cursor: pointer; font-size: .72rem; font-weight: 800; }
.snag-inline-edit form, .snag-add-details form, .snag-edit-job form { margin-top: 12px; }
.snag-edit-job { max-width: 650px; margin-top: 22px; padding-top: 14px; border-top: 1px solid var(--line); }
@media (max-width: 760px) { .snag-layout { grid-template-columns: 1fr; } .snag-hero { padding: 26px; } .snag-row { flex-wrap: wrap; } }
@media (max-width: 760px) { .snag-job-columns { grid-template-columns: 1fr; } .snag-job-count { display: none; } .snag-job-toolbar { align-items: stretch; flex-direction: column; } }

@media (max-width: 900px) {
    .gym-start-grid, .exercise-library-grid, .pb-grid { grid-template-columns: repeat(2,1fr); }
    .gym-set-row { grid-template-columns: 92px repeat(2,1fr); }
    .gym-set-row.mixed-set-row { grid-template-columns: 92px repeat(2,1fr); }
    .gym-set-row.compact-set-row { grid-template-columns: 92px 1fr 1fr; }
    .gym-set-row .set-note { grid-column: span 2; }
    .routine-exercise-form { grid-template-columns: repeat(3,1fr); }
    .routine-exercise-form .exercise-picker { grid-column: 1 / -1; }
    .history-import { align-items: flex-start; flex-direction: column; }
    .history-metadata-grid { grid-template-columns: 1fr 1fr; }
    .history-add-exercise-fields { align-items: stretch; flex-direction: column; }
}
@media (max-width: 640px) {
    .gym-shell { padding-top: 24px; }
    .gym-hero { grid-template-columns: 1fr; padding-block: 38px; }
    .gym-hero-mark { display: none; }
    .gym-metrics { grid-template-columns: repeat(2,1fr); }
    .gym-tabs { grid-template-columns: repeat(2,1fr); }
    .gym-panel { padding: 20px 16px; }
    .gym-panel-heading, .gym-exercise-card > header { align-items: flex-start; flex-direction: column; }
    .circuit-banner, .circuit-exercise-summary > div { align-items: flex-start; flex-direction: column; gap: 7px; }
    .exercise-card-actions { width: 100%; align-items: flex-start; }
    .session-save-actions { align-items: stretch; flex-direction: column; }
    .session-header-actions { width: 100%; align-items: stretch; flex-direction: column; }
    .session-timing-fields, .history-timing-form { align-items: stretch; flex-direction: column; }
    .session-timing-fields .field-input, .history-timing-form .field-input { width: 100%; }
    .gym-reference-row, .gym-start-grid, .exercise-library-grid, .history-layout, .pb-grid { grid-template-columns: 1fr; }
    .gym-set-row { grid-template-columns: 1fr 1fr; }
    .gym-set-row.mixed-set-row { grid-template-columns: 1fr 1fr; }
    .gym-set-row.compact-set-row { grid-template-columns: 1fr 1fr; }
    .gym-set-row .set-identity { grid-column: 1 / -1; }
    .gym-set-row .set-note { grid-column: 1 / -1; }
    .gym-set-row .set-actions { grid-column: 1 / -1; justify-self: end; }
    .routine-exercise-form { grid-template-columns: 1fr 1fr; }
    .exercise-picker { grid-template-columns: 1fr; width: 100%; }
    .exercise-picker > small { grid-column: auto; }
    .history-import form { width: 100%; align-items: stretch; flex-direction: column; }
    .history-detail-heading { flex-direction: column; }
    .history-list { max-height: 420px; position: static; }
    .history-heading-actions { width: 100%; align-items: stretch; flex-direction: column; }
    .history-metadata-grid { grid-template-columns: 1fr; }
    .history-circuit-editor-grid { grid-template-columns: 1fr; }
    .history-metadata-grid .wide, .history-metadata-grid .full { grid-column: auto; }
    .history-edit-exercise > header, .history-save-footer { align-items: stretch; flex-direction: column; }
    .history-save-footer .primary-action { width: 100%; }
    .pb-progression-picker, .progression-heading { align-items: stretch; flex-direction: column; }
    .pb-progression-picker .field-input { min-width: 0; width: 100%; }
    .progression-heading small { max-width: none; text-align: left; }
    .session-save-footer { align-items: stretch; flex-direction: column; }
    .session-save-footer .primary-action { width: 100%; }
}