:root {
    --navy: #102E5B;
    --navy-dark: #081A34;
    --navy-light: #1E4B84;
    --teal: #C79A2C;
    --teal-light: #E2B54B;
    --teal-pale: #F9EBC7;
    --teal-deep: #9D7421;
    --gold: #C79A2C;
    --gold-light: #E2B54B;
    --gold-soft: #F7E7BE;
    --white: #ffffff;
    --gray-50: #f8f9fa;
    --gray-100: #f1f3f4;
    --gray-200: #e8eaed;
    --gray-500: #9aa0a6;
    --gray-700: #3c4043;
    --gray-900: #202124;
    --green: #1e7e34;
    --green-light: #d4edda;
    --amber: #856404;
    --amber-light: #fff3cd;
    --red: #721c24;
    --red-light: #f8d7da;
    --font-body: "Plus Jakarta Sans", sans-serif;
    --font-heading: "DM Serif Display", serif;
    --font-display: "Space Grotesk", sans-serif;
    --sidebar-width: 260px;
    --topbar-height: 60px;
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.10);
    --shadow-lg: 0 18px 38px rgba(20, 36, 56, 0.12);
    --radius: 8px;
    --radius-sm: 4px;
    --transition: all 0.2s ease;
    --surface-base: rgba(255, 255, 255, 0.94);
    --surface-soft: rgba(248, 249, 250, 0.92);
    --surface-strong: rgba(255, 255, 255, 0.82);
    --border-subtle: rgba(31, 58, 95, 0.08);
    --chart-text: #1F3A5F;
    --chart-muted: #6c757d;
    --chart-grid: rgba(0, 0, 0, 0.05);
    --chart-tooltip-bg: #ffffff;
    --chart-tooltip-border: rgba(31, 58, 95, 0.12);
    --chart-tooltip-text: #1F3A5F;
    --chart-centre-primary: #1F3A5F;
    --chart-centre-secondary: #6c757d;
}

/* ===========================================================================
   WORKING GROUP PROGRESS WORKSPACE
   A focused queue and full-page quarterly reporting flow.
   ========================================================================== */
.wg-progress-hero {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    overflow: hidden;
    padding: clamp(1.4rem, 3vw, 2.4rem);
    border-radius: 22px;
    color: #fff;
    background:
        radial-gradient(circle at 82% 18%, rgba(83, 190, 211, 0.24), transparent 32%),
        linear-gradient(135deg, #102e52 0%, #17476c 58%, #1d7087 100%);
    box-shadow: 0 24px 60px rgba(16, 46, 82, 0.2);
}

.wg-progress-hero::after {
    content: "";
    position: absolute;
    width: 260px;
    height: 260px;
    right: -105px;
    bottom: -165px;
    border: 42px solid rgba(255, 255, 255, 0.05);
    border-radius: 50%;
}

.wg-progress-hero-copy,
.wg-progress-compliance {
    position: relative;
    z-index: 1;
}

.wg-progress-kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin-bottom: 0.8rem;
    color: #ffd56f;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.wg-progress-hero h2 {
    margin: 0 0 0.55rem;
    color: #fff;
    font-family: var(--font-heading);
    font-size: clamp(1.7rem, 3vw, 2.65rem);
    line-height: 1.08;
}

.wg-progress-hero p {
    max-width: 720px;
    margin: 0;
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.95rem;
    line-height: 1.65;
}

.wg-progress-compliance {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex: 0 0 auto;
    min-width: 260px;
    padding: 0.8rem 1rem;
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 18px;
    background: rgba(5, 26, 47, 0.24);
    backdrop-filter: blur(12px);
}

.wg-progress-ring {
    display: grid;
    place-content: center;
    width: 84px;
    height: 84px;
    border-radius: 50%;
    text-align: center;
    background:
        radial-gradient(circle, #143c60 57%, transparent 59%),
        conic-gradient(#6dd49a var(--compliance), rgba(255, 255, 255, 0.13) 0);
}

.wg-progress-ring strong {
    font-size: 1.15rem;
    line-height: 1;
}

.wg-progress-ring span,
.wg-progress-compliance-copy span {
    color: rgba(255, 255, 255, 0.58);
    font-size: 0.69rem;
}

.wg-progress-compliance-copy {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.wg-progress-compliance-copy strong {
    font-size: 1rem;
}

.wg-progress-deadline,
.progress-entry-deadline {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    margin-bottom: 1.25rem;
    padding: 0.9rem 1.1rem;
    border: 1px solid #b9d9ec;
    border-radius: 12px;
    color: #174b70;
    background: #edf7fc;
}

.wg-progress-deadline > i,
.progress-entry-deadline > i {
    font-size: 1.3rem;
}

.wg-progress-deadline div,
.progress-entry-deadline div {
    display: flex;
    flex-direction: column;
    gap: 0.12rem;
}

.wg-progress-deadline span,
.progress-entry-deadline span {
    color: #527188;
    font-size: 0.78rem;
}

.wg-progress-deadline.is-urgent,
.progress-entry-deadline.is-urgent {
    border-color: #f0d28a;
    color: #805c00;
    background: #fff9e8;
}

.wg-progress-deadline.is-closed,
.progress-entry-deadline.is-closed {
    border-color: #efb5b5;
    color: #9c2d2d;
    background: #fff3f3;
}

.wg-progress-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.wg-progress-search {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    flex: 1 1 480px;
    max-width: 650px;
    min-height: 44px;
    padding: 0 0.9rem;
    border: 1px solid var(--gray-200);
    border-radius: 12px;
    background: var(--white);
}

.wg-progress-search input {
    width: 100%;
    border: 0;
    outline: 0;
    color: var(--gray-800);
    background: transparent;
    font-size: 0.86rem;
}

.wg-progress-search > i,
.wg-progress-search a {
    color: var(--gray-400);
}

.wg-progress-filters {
    display: inline-flex;
    gap: 0.25rem;
    padding: 0.25rem;
    border: 1px solid var(--gray-200);
    border-radius: 11px;
    background: var(--gray-50);
}

.wg-progress-filters button {
    min-height: 34px;
    padding: 0.35rem 0.75rem;
    border: 0;
    border-radius: 8px;
    color: var(--gray-500);
    background: transparent;
    font-size: 0.75rem;
    font-weight: 700;
}

.wg-progress-filters button.is-active {
    color: #17476c;
    background: #fff;
    box-shadow: 0 3px 10px rgba(16, 46, 82, 0.09);
}

.wg-progress-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.wg-progress-row {
    display: grid;
    grid-template-columns: 38px minmax(260px, 1.5fr) minmax(135px, 0.5fr) minmax(155px, 0.58fr) auto;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.1rem;
    border: 1px solid var(--gray-200);
    border-radius: 15px;
    background: var(--white);
    box-shadow: 0 8px 24px rgba(16, 46, 82, 0.045);
    transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.wg-progress-row:hover {
    border-color: rgba(46, 134, 171, 0.35);
    box-shadow: 0 14px 32px rgba(16, 46, 82, 0.08);
    transform: translateY(-1px);
}

.wg-progress-state {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    font-size: 0.9rem;
}

.wg-progress-state.is-pending {
    color: #9a6700;
    background: #fff3cd;
}

.wg-progress-state.is-submitted {
    color: #1a7a4a;
    background: #dff3e7;
}

.wg-progress-meta,
.wg-progress-facts {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.45rem 0.8rem;
}

.wg-progress-meta > span:not(.badge) {
    color: var(--gray-500);
    font-size: 0.69rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.wg-progress-main h3 {
    margin: 0.35rem 0 0.4rem;
    font-size: 0.94rem;
    line-height: 1.4;
}

.wg-progress-main h3 a {
    color: var(--navy);
    text-decoration: none;
}

.wg-progress-facts span {
    color: var(--gray-500);
    font-size: 0.72rem;
}

.wg-progress-facts .is-alert {
    color: #b74b18;
}

.wg-progress-measure,
.wg-progress-submission {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.wg-progress-value {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
}

.wg-progress-value strong {
    color: var(--navy);
    font-size: 1.1rem;
}

.wg-progress-value span,
.wg-progress-submission span {
    color: var(--gray-500);
    font-size: 0.68rem;
}

.wg-progress-submission strong {
    color: var(--gray-700);
    font-size: 0.77rem;
}

.wg-progress-actions {
    justify-self: end;
}

.wg-progress-locked {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--gray-400);
    font-size: 0.76rem;
    font-weight: 700;
}

.wg-progress-empty {
    padding: 4rem 1rem;
    border: 1px dashed var(--gray-200);
    border-radius: 16px;
    color: var(--gray-500);
    text-align: center;
}

.wg-progress-empty > i {
    font-size: 2rem;
}

.wg-progress-empty h3 {
    margin: 0.7rem 0 0.3rem;
    color: var(--navy);
    font-size: 1rem;
}

/* Full-page progress entry */
.progress-entry-shell {
    max-width: 1180px;
    margin: 0 auto;
}

.progress-entry-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem;
    margin-bottom: 1rem;
    padding: clamp(1.25rem, 3vw, 2rem);
    border: 1px solid rgba(31, 78, 121, 0.1);
    border-radius: 20px;
    background:
        radial-gradient(circle at 88% 14%, rgba(46, 134, 171, 0.12), transparent 34%),
        linear-gradient(145deg, #fff, #f2f7fb);
}

.progress-entry-period {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.65rem;
    color: #1d718e;
    font-size: 0.73rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.progress-entry-header h2 {
    margin: 0 0 0.3rem;
    color: var(--navy);
    font-family: var(--font-heading);
    font-size: clamp(1.55rem, 3vw, 2.25rem);
}

.progress-entry-header p {
    max-width: 750px;
    margin: 0;
    color: var(--gray-600);
    line-height: 1.5;
}

.progress-entry-header-score {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    flex: 0 0 auto;
}

.progress-entry-header-score span,
.progress-entry-header-score small {
    color: var(--gray-500);
    font-size: 0.72rem;
}

.progress-entry-header-score strong {
    color: var(--navy);
    font-size: 2rem;
    line-height: 1.1;
}

.progress-entry-layout {
    display: grid;
    grid-template-columns: minmax(230px, 285px) minmax(0, 1fr);
    align-items: start;
    gap: 1rem;
}

.progress-entry-context {
    position: sticky;
    top: calc(var(--top-nav-height, 78px) + 1rem);
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 0.8rem;
}

.progress-entry-context-card,
.progress-entry-guide,
.progress-entry-section {
    border: 1px solid var(--gray-200);
    border-radius: 16px;
    background: var(--white);
    box-shadow: 0 10px 30px rgba(16, 46, 82, 0.045);
}

.progress-entry-context-card {
    padding: 1.15rem;
}

.progress-entry-context-label,
.progress-entry-step {
    color: #1d718e;
    font-size: 0.67rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.progress-entry-context-card h3 {
    margin: 0.55rem 0 1rem;
    color: var(--navy);
    font-size: 0.92rem;
    line-height: 1.45;
}

.progress-entry-context-card dl {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin: 0;
}

.progress-entry-context-card dl div {
    padding-top: 0.7rem;
    border-top: 1px solid var(--gray-100);
}

.progress-entry-context-card dt {
    color: var(--gray-400);
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
}

.progress-entry-context-card dd {
    margin: 0.2rem 0 0;
    color: var(--gray-700);
    font-size: 0.79rem;
    line-height: 1.4;
}

.progress-entry-guide {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    padding: 1rem;
    color: #735a13;
    background: #fffaf0;
    border-color: #f0dc9c;
}

.progress-entry-guide > i {
    color: #d39b16;
    font-size: 1.1rem;
}

.progress-entry-guide div {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.progress-entry-guide strong {
    font-size: 0.77rem;
}

.progress-entry-guide span {
    font-size: 0.72rem;
    line-height: 1.5;
}

.progress-entry-fields {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 1rem;
}

.progress-entry-section {
    min-width: 0;
    padding: clamp(1.1rem, 2vw, 1.5rem);
}

.progress-entry-context-card h3,
.progress-entry-context-card dd,
.progress-entry-upload-copy strong {
    overflow-wrap: anywhere;
}

.progress-entry-section-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.1rem;
}

.progress-entry-section-head h3 {
    margin: 0.25rem 0;
    color: var(--navy);
    font-size: 1.05rem;
}

.progress-entry-section-head p {
    margin: 0;
    color: var(--gray-500);
    font-size: 0.78rem;
    line-height: 1.5;
}

.progress-entry-locked {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    flex: 0 0 auto;
    padding: 0.3rem 0.55rem;
    border-radius: 999px;
    color: #42657e;
    background: #eef5f8;
    font-size: 0.66rem;
    font-weight: 800;
}

.progress-entry-progress-grid {
    display: grid;
    grid-template-columns: 120px minmax(220px, 1fr) minmax(150px, 0.62fr);
    align-items: center;
    gap: 1.35rem;
}

.progress-entry-dial {
    display: grid;
    place-items: center;
}

.progress-entry-dial svg {
    width: 112px;
    height: 112px;
    color: var(--gray-700);
}

.progress-entry-dial text:first-of-type {
    fill: currentColor;
    font-size: 15px;
    font-weight: 800;
}

.progress-entry-dial text:last-of-type {
    fill: currentColor;
    font-size: 6px;
    opacity: 0.5;
}

.progress-entry-control > label,
.progress-entry-label {
    display: block;
    margin-bottom: 0.45rem;
    color: var(--gray-700);
    font-size: 0.75rem;
    font-weight: 800;
}

.progress-entry-number-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.6rem;
}

.progress-entry-number-row .qu-progress-number-input {
    width: 100px;
    min-height: 48px;
    background: var(--white);
}

.progress-entry-number-row > span {
    color: var(--gray-500);
    font-weight: 800;
}

.progress-entry-control input[type="range"] {
    width: 100%;
    accent-color: #2e86ab;
}

.progress-entry-quick-values {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.35rem;
    margin-top: 0.55rem;
}

.progress-entry-quick-values button {
    min-height: 32px;
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    color: var(--gray-600);
    background: var(--gray-50);
    font-size: 0.7rem;
    font-weight: 800;
}

.progress-entry-quick-values button:hover {
    border-color: #2e86ab;
    color: #1f4e79;
    background: #edf7fb;
}

.progress-entry-impact {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 0.9rem;
    border-radius: 12px;
    background: var(--gray-50);
}

.progress-entry-impact > span,
.progress-entry-impact small {
    color: var(--gray-500);
    font-size: 0.68rem;
}

.progress-entry-impact strong {
    width: fit-content;
    padding: 0.28rem 0.6rem;
    border-radius: 999px;
    font-size: 0.74rem;
}

.progress-entry-section .qu-textarea {
    min-height: 142px;
}

.progress-entry-field-foot {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 0.45rem;
    color: var(--gray-400);
    font-size: 0.68rem;
}

.progress-entry-field-error {
    margin-top: 0.4rem;
    color: #c0392b;
    font-size: 0.72rem;
    font-weight: 700;
}

.progress-entry-errors {
    display: flex;
    gap: 0.7rem;
    margin-bottom: 1rem;
    padding: 0.85rem 1rem;
    border: 1px solid #efb5b5;
    border-radius: 12px;
    color: #9c2d2d;
    background: #fff3f3;
    font-size: 0.8rem;
}

.progress-entry-optional .accordion {
    overflow: hidden;
    border: 1px solid var(--gray-200);
    border-radius: 12px;
}

.progress-entry-optional .accordion-item,
.progress-entry-optional .accordion-button {
    color: var(--gray-700);
    background: var(--white);
}

.progress-entry-optional .accordion-item {
    border-color: var(--gray-100);
}

.progress-entry-optional .accordion-button {
    padding: 0.9rem 1rem;
    font-size: 0.78rem;
    font-weight: 700;
    box-shadow: none;
}

.progress-entry-optional .accordion-button:not(.collapsed) {
    color: #1f4e79;
    background: #f1f7fa;
}

.progress-entry-optional .accordion-body {
    padding: 0.8rem 1rem 1rem;
    background: var(--white);
}

.progress-entry-optional .accordion-body .qu-textarea {
    min-height: 100px;
}

.progress-entry-file-limit {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    padding: 0.3rem 0.6rem;
    border: 1px solid #cfe2ea;
    border-radius: 999px;
    color: #42657e;
    background: #f1f7fa;
    font-size: 0.67rem;
    font-weight: 800;
}

.progress-entry-upload-card {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.9rem;
    padding: 1rem;
    border: 1.5px dashed #b9ced9;
    border-radius: 13px;
    background: #f8fbfc;
    transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}

.progress-entry-upload-card:hover,
.progress-entry-upload-card.has-file {
    border-color: #2e86ab;
    background: #f1f8fb;
    box-shadow: 0 0 0 3px rgba(46, 134, 171, 0.08);
}

.progress-entry-upload-icon {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 11px;
    color: #1f6e8f;
    background: #dceef5;
    font-size: 1.15rem;
}

.progress-entry-upload-copy {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 0.18rem;
}

.progress-entry-upload-copy strong {
    overflow: hidden;
    color: var(--navy);
    font-size: 0.8rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.progress-entry-upload-copy span {
    color: var(--gray-500);
    font-size: 0.7rem;
}

.progress-entry-file-input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

.progress-entry-current-file {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 0.75rem;
    padding: 0.75rem 0.9rem;
    border: 1px solid var(--gray-200);
    border-radius: 11px;
    background: var(--white);
}

.progress-entry-current-file > div,
.progress-entry-current-file > div > span,
.progress-entry-remove-file {
    display: flex;
    align-items: center;
}

.progress-entry-current-file > div {
    min-width: 0;
    gap: 0.65rem;
    color: #2e86ab;
}

.progress-entry-current-file > div > span {
    min-width: 0;
    flex-wrap: wrap;
    gap: 0.35rem;
    font-size: 0.73rem;
}

.progress-entry-current-file a {
    overflow: hidden;
    max-width: 320px;
    color: #1d718e;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.progress-entry-current-file small {
    color: var(--gray-400);
}

.progress-entry-remove-file {
    flex: 0 0 auto;
    gap: 0.42rem;
    color: var(--gray-600);
    font-size: 0.7rem;
    font-weight: 700;
    cursor: pointer;
}

.qu-attachment-link {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    gap: 0.45rem;
    margin-top: 0.85rem;
    padding: 0.45rem 0.7rem;
    border: 1px solid #cfe2ea;
    border-radius: 9px;
    color: #1d718e;
    background: #f3f8fa;
    font-size: 0.73rem;
    font-weight: 700;
    text-decoration: none;
}

.qu-attachment-link span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.qu-attachment-link small {
    flex: 0 0 auto;
    color: var(--gray-400);
    font-weight: 500;
}

.qu-attachment-link:hover {
    border-color: #2e86ab;
    color: #155a74;
    background: #eaf5f9;
}

.progress-entry-actions {
    position: sticky;
    z-index: 20;
    bottom: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1rem;
    padding: 0.9rem 1rem;
    border: 1px solid rgba(31, 78, 121, 0.12);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 16px 40px rgba(16, 46, 82, 0.14);
    backdrop-filter: blur(12px);
}

.progress-entry-actions > div:first-child {
    display: flex;
    flex-direction: column;
    gap: 0.12rem;
}

.progress-entry-actions strong {
    color: var(--navy);
    font-size: 0.78rem;
}

.progress-entry-actions span {
    color: var(--gray-500);
    font-size: 0.7rem;
}

.progress-entry-actions > div:last-child {
    display: flex;
    gap: 0.55rem;
}

.progress-entry-closed {
    padding: clamp(2.5rem, 7vw, 5rem) 1rem;
    border: 1px solid var(--gray-200);
    border-radius: 18px;
    background: var(--white);
    text-align: center;
}

.progress-entry-closed > i {
    color: var(--gray-300);
    font-size: 2.5rem;
}

.progress-entry-closed h3 {
    margin: 0.8rem 0 0.35rem;
    color: var(--navy);
}

.progress-entry-closed p {
    max-width: 580px;
    margin: 0 auto 1.2rem;
    color: var(--gray-500);
}

html[data-theme="dark"] .wg-progress-row,
html[data-theme="dark"] .wg-progress-search,
html[data-theme="dark"] .progress-entry-context-card,
html[data-theme="dark"] .progress-entry-section,
html[data-theme="dark"] .progress-entry-closed,
body.dark-mode .wg-progress-row,
body.dark-mode .wg-progress-search,
body.dark-mode .progress-entry-context-card,
body.dark-mode .progress-entry-section,
body.dark-mode .progress-entry-closed {
    border-color: #29384b;
    background: #161e2a;
}

html[data-theme="dark"] .progress-entry-header,
body.dark-mode .progress-entry-header {
    border-color: #29384b;
    background:
        radial-gradient(circle at 88% 14%, rgba(46, 134, 171, 0.18), transparent 34%),
        linear-gradient(145deg, #182434, #121a25);
}

html[data-theme="dark"] .wg-progress-search input,
html[data-theme="dark"] .wg-progress-main h3 a,
html[data-theme="dark"] .wg-progress-value strong,
html[data-theme="dark"] .progress-entry-header h2,
html[data-theme="dark"] .progress-entry-header-score strong,
html[data-theme="dark"] .progress-entry-context-card h3,
html[data-theme="dark"] .progress-entry-section-head h3,
html[data-theme="dark"] .progress-entry-actions strong,
body.dark-mode .wg-progress-search input,
body.dark-mode .wg-progress-main h3 a,
body.dark-mode .wg-progress-value strong,
body.dark-mode .progress-entry-header h2,
body.dark-mode .progress-entry-header-score strong,
body.dark-mode .progress-entry-context-card h3,
body.dark-mode .progress-entry-section-head h3,
body.dark-mode .progress-entry-actions strong {
    color: #d9e7f3;
}

html[data-theme="dark"] .wg-progress-filters,
html[data-theme="dark"] .progress-entry-impact,
body.dark-mode .wg-progress-filters,
body.dark-mode .progress-entry-impact {
    border-color: #29384b;
    background: #101722;
}

html[data-theme="dark"] .wg-progress-filters button.is-active,
body.dark-mode .wg-progress-filters button.is-active {
    color: #8ed4e7;
    background: #223044;
}

html[data-theme="dark"] .progress-entry-guide,
body.dark-mode .progress-entry-guide {
    border-color: #5b481c;
    color: #e7c96d;
    background: #2b2414;
}

html[data-theme="dark"] .progress-entry-number-row .qu-progress-number-input,
html[data-theme="dark"] .progress-entry-optional .accordion-item,
html[data-theme="dark"] .progress-entry-optional .accordion-button,
html[data-theme="dark"] .progress-entry-optional .accordion-body,
body.dark-mode .progress-entry-number-row .qu-progress-number-input,
body.dark-mode .progress-entry-optional .accordion-item,
body.dark-mode .progress-entry-optional .accordion-button,
body.dark-mode .progress-entry-optional .accordion-body {
    border-color: #29384b;
    color: #c7d5e3;
    background: #121a25;
}

html[data-theme="dark"] .progress-entry-upload-card,
body.dark-mode .progress-entry-upload-card {
    border-color: #3b5369;
    background: #101722;
}

html[data-theme="dark"] .progress-entry-upload-card:hover,
html[data-theme="dark"] .progress-entry-upload-card.has-file,
body.dark-mode .progress-entry-upload-card:hover,
body.dark-mode .progress-entry-upload-card.has-file {
    border-color: #4ba3c4;
    background: #122332;
}

html[data-theme="dark"] .progress-entry-upload-icon,
body.dark-mode .progress-entry-upload-icon {
    color: #8ed4e7;
    background: #183449;
}

html[data-theme="dark"] .progress-entry-upload-copy strong,
body.dark-mode .progress-entry-upload-copy strong {
    color: #d9e7f3;
}

html[data-theme="dark"] .progress-entry-file-limit,
body.dark-mode .progress-entry-file-limit {
    border-color: #31556c;
    color: #8ed4e7;
    background: #102536;
}

html[data-theme="dark"] .progress-entry-current-file,
body.dark-mode .progress-entry-current-file {
    border-color: #29384b;
    background: #121a25;
}

html[data-theme="dark"] .progress-entry-current-file a,
body.dark-mode .progress-entry-current-file a,
html[data-theme="dark"] .qu-attachment-link,
body.dark-mode .qu-attachment-link {
    color: #8ed4e7;
}

html[data-theme="dark"] .qu-attachment-link,
body.dark-mode .qu-attachment-link {
    border-color: #31556c;
    background: #102536;
}

html[data-theme="dark"] .qu-attachment-link:hover,
body.dark-mode .qu-attachment-link:hover {
    border-color: #4ba3c4;
    color: #b8e8f5;
    background: #153148;
}

html[data-theme="dark"] .progress-entry-actions,
body.dark-mode .progress-entry-actions {
    border-color: #304158;
    background: rgba(18, 26, 37, 0.94);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
}

html[data-theme="dark"] .wg-progress-deadline,
html[data-theme="dark"] .progress-entry-deadline,
body.dark-mode .wg-progress-deadline,
body.dark-mode .progress-entry-deadline {
    border-color: #285875;
    color: #8ed4e7;
    background: #102536;
}

html[data-theme="dark"] .wg-progress-deadline.is-urgent,
html[data-theme="dark"] .progress-entry-deadline.is-urgent,
body.dark-mode .wg-progress-deadline.is-urgent,
body.dark-mode .progress-entry-deadline.is-urgent {
    border-color: #66531d;
    color: #f0cf67;
    background: #2b2413;
}

html[data-theme="dark"] .wg-progress-deadline.is-closed,
html[data-theme="dark"] .progress-entry-deadline.is-closed,
body.dark-mode .wg-progress-deadline.is-closed,
body.dark-mode .progress-entry-deadline.is-closed {
    border-color: #6f3338;
    color: #f18b91;
    background: #2b161a;
}

@media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]) .wg-progress-row,
    html:not([data-theme="light"]) .wg-progress-search,
    html:not([data-theme="light"]) .progress-entry-context-card,
    html:not([data-theme="light"]) .progress-entry-section,
    html:not([data-theme="light"]) .progress-entry-closed {
        border-color: #29384b;
        background: #161e2a;
    }
}

@media (max-width: 1100px) {
    .wg-progress-row {
        grid-template-columns: 38px minmax(250px, 1fr) minmax(130px, 0.5fr) auto;
    }

    .wg-progress-submission {
        display: none;
    }

    .progress-entry-progress-grid {
        grid-template-columns: 105px minmax(210px, 1fr);
    }

    .progress-entry-impact {
        grid-column: 1 / -1;
        flex-direction: row;
        align-items: center;
        flex-wrap: wrap;
    }
}

@media (max-width: 820px) {
    .wg-progress-hero,
    .wg-progress-toolbar,
    .progress-entry-header,
    .progress-entry-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .wg-progress-compliance,
    .wg-progress-search {
        width: 100%;
        max-width: none;
    }

    .wg-progress-filters {
        width: 100%;
    }

    .wg-progress-filters button {
        flex: 1;
    }

    .wg-progress-row {
        grid-template-columns: 38px minmax(0, 1fr) auto;
    }

    .wg-progress-main {
        grid-column: 2 / -1;
    }

    .wg-progress-measure {
        grid-column: 2;
    }

    .wg-progress-actions {
        grid-column: 3;
        grid-row: 2;
    }

    .progress-entry-header-score {
        align-items: flex-start;
    }

    .progress-entry-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .progress-entry-context {
        position: static;
        display: grid;
        width: 100%;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .progress-entry-actions > div:last-child {
        justify-content: flex-end;
    }
}

@media (max-width: 600px) {
    .progress-entry-upload-card {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .progress-entry-upload-button {
        grid-column: 1 / -1;
        width: 100%;
    }

    .progress-entry-current-file {
        align-items: flex-start;
        flex-direction: column;
    }

    .progress-entry-current-file a {
        max-width: min(64vw, 320px);
    }
}

@media (max-width: 575.98px) {
    .wg-progress-hero {
        padding: 1.25rem;
        border-radius: 16px;
    }

    .wg-progress-compliance {
        min-width: 0;
    }

    .wg-progress-row {
        grid-template-columns: 34px minmax(0, 1fr);
        padding: 0.9rem;
    }

    .wg-progress-main,
    .wg-progress-measure,
    .wg-progress-actions {
        grid-column: 1 / -1;
    }

    .wg-progress-state {
        grid-column: 1;
    }

    .wg-progress-main {
        grid-column: 2;
    }

    .wg-progress-actions {
        grid-row: auto;
        justify-self: stretch;
    }

    .wg-progress-actions .btn {
        width: 100%;
    }

    .progress-entry-header {
        padding: 1.1rem;
        border-radius: 16px;
    }

    .progress-entry-context {
        grid-template-columns: minmax(0, 1fr);
    }

    .progress-entry-progress-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .progress-entry-control,
    .progress-entry-number-row {
        justify-content: center;
    }

    .progress-entry-section-head {
        flex-direction: column;
    }

    .progress-entry-field-foot {
        flex-direction: column;
        gap: 0.2rem;
    }

    .progress-entry-actions > div:last-child {
        display: grid;
        grid-template-columns: 1fr;
    }

    .progress-entry-actions .btn {
        width: 100%;
    }
}

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

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: var(--font-body);
    background:
        radial-gradient(circle at top right, rgba(199, 154, 44, 0.16), transparent 28%),
        radial-gradient(circle at bottom left, rgba(16, 46, 91, 0.14), transparent 24%),
        linear-gradient(180deg, #fbf8f1 0%, #f3efe3 100%);
    color: var(--gray-900);
    min-height: 100vh;
    letter-spacing: -0.01em;
}

body.sidebar-open {
    overflow: hidden;
}

a {
    color: inherit;
    text-decoration: none;
}

img {
    max-width: 100%;
    display: block;
}

button,
input,
select,
textarea {
    font: inherit;
}

h1,
h2,
h3,
h4,
h5,
h6,
.brand-title,
.page-title,
.section-title,
.detail-title,
.auth-brand-title,
.auth-title {
    font-family: var(--font-heading);
}

::selection {
    background: rgba(199, 154, 44, 0.26);
}

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: var(--gray-100);
}

::-webkit-scrollbar-thumb {
    background: rgba(31, 58, 95, 0.28);
    border-radius: 999px;
}

.sidebar::-webkit-scrollbar {
    width: 8px;
}

.sidebar::-webkit-scrollbar-track {
    background: var(--navy-dark);
}

.sidebar::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.18);
}

.fade-in-page {
    animation: fadeInPage 0.25s ease;
}

@keyframes fadeInPage {
    from {
        opacity: 0;
        transform: translateY(4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.app-shell {
    min-height: 100vh;
}

.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: var(--sidebar-width);
    height: 100vh;
    background:
        radial-gradient(circle at top right, rgba(226, 181, 75, 0.26), transparent 28%),
        linear-gradient(180deg, var(--navy), var(--navy-dark));
    color: var(--white);
    display: flex;
    flex-direction: column;
    z-index: 1000;
    box-shadow: var(--shadow-md);
    transition: transform 0.3s ease;
}

.sidebar::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
    background-size: 24px 24px;
    opacity: 0.35;
    pointer-events: none;
}

.sidebar-brand {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 1.4rem 1.35rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.brand-mark {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(247, 231, 190, 0.9), rgba(199, 154, 44, 0.95));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.14rem;
    box-shadow: 0 10px 24px rgba(6, 19, 41, 0.22);
}

.brand-logo-img,
.auth-brand-logo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    display: block;
}

.brand-title {
    font-size: 1.45rem;
    letter-spacing: 0.03em;
}

.brand-subtitle {
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.72);
}

.sidebar-nav {
    padding: 1rem 0.9rem;
    overflow-y: auto;
    position: relative;
    z-index: 1;
}

.nav-section-label {
    padding: 0.6rem 0.8rem 0.35rem;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: rgba(255, 255, 255, 0.56);
}

.nav-link {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.8rem 0.95rem;
    color: rgba(255, 255, 255, 0.9);
    border-left: 3px solid transparent;
    border-radius: var(--radius);
    margin-bottom: 0.2rem;
    transition: var(--transition);
    position: relative;
    overflow: hidden;
}

.nav-link::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, rgba(255, 255, 255, 0.10), transparent 55%);
    opacity: 0;
    transition: opacity 0.22s ease;
}

.nav-link:hover,
.nav-link.active {
    color: var(--white);
    background: rgba(255, 255, 255, 0.08);
    border-left-color: var(--teal);
    transform: translateX(2px);
}

.nav-link:hover::after,
.nav-link.active::after {
    opacity: 1;
}

.nav-icon {
    font-size: 1rem;
}

.sidebar-footer {
    margin-top: auto;
    padding: 1rem;
    display: flex;
    align-items: center;
    gap: 0.8rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    position: relative;
    z-index: 1;
}

.sidebar-profile-link {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1;
    padding: 0.4rem;
    border-radius: var(--radius);
    transition: var(--transition);
}

.sidebar-profile-link:hover {
    background: rgba(255, 255, 255, 0.06);
}

/* ── Sidebar layout fix ──────────────────────────────────────── */
.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: var(--sidebar-width, 260px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    z-index: 1000;
}

.sidebar-brand {
    flex-shrink: 0;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.sidebar-brand-link {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
}

.sidebar-brand-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: #ffffff;
    flex-shrink: 0;
}

.sidebar-brand-title {
    font-size: 14px;
    font-weight: 700;
    color: #ffffff;
    line-height: 1.2;
}

.sidebar-brand-sub {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.45);
    letter-spacing: 0.5px;
}

.sidebar-nav-wrap {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 12px 0 16px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
}

.sidebar-nav-wrap::-webkit-scrollbar {
    width: 4px;
}

.sidebar-nav-wrap::-webkit-scrollbar-track {
    background: transparent;
}

.sidebar-nav-wrap::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 2px;
}

.sidebar-nav {
    padding: 0;
    overflow: visible;
    position: relative;
    z-index: 1;
}

.sidebar-search-wrap {
    flex-shrink: 0;
    padding: 10px 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    background: var(--navy-dark, #162d4a);
    position: relative;
    z-index: 1;
}

.sidebar-search-inner {
    position: relative;
}

.sidebar-search-icon {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 13px;
    color: rgba(255, 255, 255, 0.4);
    pointer-events: none;
}

.sidebar-search-input {
    width: 100%;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 6px;
    padding: 7px 10px 7px 30px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.8);
    outline: none;
    transition: background 0.15s, border-color 0.15s;
}

.sidebar-search-input::placeholder {
    color: rgba(255, 255, 255, 0.3);
}

.sidebar-search-input:focus {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(46, 134, 171, 0.6);
}

.sidebar-footer {
    flex-shrink: 0;
    padding: 12px 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    background: var(--navy-dark, #162d4a);
    margin-top: 0;
    position: relative;
    z-index: 1;
}

.sidebar-nav .nav-link {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 9px 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 0;
    border-radius: 0;
}

.sidebar-nav .nav-section-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: rgba(255, 255, 255, 0.3);
    padding: 12px 20px 4px;
    display: block;
}

.sidebar-user {
    display: flex;
    align-items: center;
    gap: 10px;
}

.sidebar-user-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}

.sidebar-user-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sidebar-user-info {
    flex: 1;
    min-width: 0;
    text-decoration: none;
}

.sidebar-user-name {
    font-size: 12px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-user-role {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.4);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.sidebar-logout {
    color: rgba(255, 255, 255, 0.4);
    font-size: 16px;
    text-decoration: none;
    flex-shrink: 0;
    transition: color 0.1s;
    background: none;
    border: 0;
    padding: 0;
}

.sidebar-logout:hover {
    color: rgba(255, 255, 255, 0.85);
}

.user-avatar,
.audit-avatar,
.profile-avatar {
    width: 2.7rem;
    height: 2.7rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--teal);
    color: var(--white);
    font-weight: 700;
    flex-shrink: 0;
}

.user-info {
    min-width: 0;
}

.user-name {
    display: block;
    font-weight: 700;
    font-size: 0.92rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-meta {
    display: block;
    margin-top: 0.25rem;
}

.logout-form {
    margin: 0;
}

.logout-btn {
    width: 2.5rem;
    height: 2.5rem;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    color: var(--white);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
}

.logout-btn:hover {
    background: rgba(255, 255, 255, 0.22);
}

.sidebar-overlay {
    display: none;
}

.main-wrapper {
    margin-left: var(--sidebar-width);
    min-height: 100vh;
    background: var(--gray-50);
}

.topbar {
    position: sticky;
    top: 0;
    z-index: 900;
    height: var(--topbar-height);
    background: rgba(255, 255, 255, 0.84);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--gray-200);
    box-shadow: var(--shadow-sm);
    padding: 0 1.75rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.topbar-left {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.page-kicker {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--gray-500);
    font-weight: 700;
}

.page-title {
    margin: 0;
    font-size: 1.55rem;
    color: var(--navy);
    letter-spacing: -0.03em;
}

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

.topbar-search {
    flex: 1;
    display: flex;
    justify-content: center;
}

.hamburger {
    display: none;
    border: 1px solid var(--gray-200);
    background: var(--white);
    color: var(--navy);
    width: 2.6rem;
    height: 2.6rem;
    border-radius: var(--radius);
    align-items: center;
    justify-content: center;
}

.hamburger:hover {
    border-color: var(--teal);
    color: var(--teal);
}

.content-area {
    padding: 1.75rem;
    position: relative;
}

.section-title {
    font-size: 1.7rem;
    color: var(--navy);
}

.card-panel,
.form-card,
.detail-hero,
.profile-card,
.error-card,
.card-metric {
    background: var(--white);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--gray-200);
}

.card-panel:hover,
.card-metric:hover,
.form-card:hover {
    transform: translateY(-2px);
}

.card-panel,
.card-metric,
.form-card {
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.card-panel-header,
.form-header {
    padding: 1.25rem 1.5rem 0;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
}

.card-panel-body {
    padding: 1.5rem;
}

.panel-title {
    font-size: 1.15rem;
    margin: 0;
    color: var(--navy);
}

.panel-subtitle {
    color: var(--gray-500);
}

.card-metric {
    padding: 1.25rem;
}

.metric-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
}

.two-column-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.metric-label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--gray-500);
}

.metric-value {
    margin-top: 0.55rem;
    font-size: 2rem;
    font-weight: 700;
    color: var(--navy);
}

.metric-detail {
    margin-top: 0.3rem;
    color: var(--gray-700);
}

.lead-copy {
    color: var(--gray-700);
    margin-top: 0.35rem;
    max-width: 52rem;
    line-height: 1.7;
}

.btn-primary-tracker {
    background: linear-gradient(135deg, var(--teal), var(--teal-light));
    border-color: transparent;
    color: var(--white);
    box-shadow: 0 12px 20px rgba(46, 134, 171, 0.18);
}

.btn-primary-tracker:hover,
.btn-primary-tracker:focus {
    background: linear-gradient(135deg, var(--teal-light), #53afd0);
    border-color: transparent;
    color: var(--white);
    transform: translateY(-1px);
    box-shadow: 0 16px 28px rgba(46, 134, 171, 0.24);
}

.btn-ghost {
    background: transparent;
    border: 0;
    color: var(--navy);
}

.btn-ghost:hover {
    background: var(--gray-100);
    color: var(--navy);
}

.btn-ghost:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 0.22rem rgba(46, 134, 171, 0.18);
}

.badge-rag-green,
.badge-heat-low,
.badge-role-admin {
    background: var(--green-light);
    color: var(--green);
    font-weight: 700;
}

.badge-rag-amber,
.badge-heat-medium,
.badge-role-editor {
    background: var(--amber-light);
    color: var(--amber);
    font-weight: 700;
}

.badge-rag-red,
.badge-heat-high {
    background: var(--red-light);
    color: var(--red);
    font-weight: 700;
}

.badge-role-viewer {
    background: var(--teal-pale);
    color: var(--teal);
    font-weight: 700;
}

.badge-role-admin,
.badge-role-editor,
.badge-role-viewer {
    border-radius: 999px;
    padding: 0.45rem 0.8rem;
    letter-spacing: 0.04em;
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    border-radius: 999px;
    padding: 0.38rem 0.8rem;
    font-size: 0.8rem;
    font-weight: 700;
}

.chip-navy {
    background: rgba(31, 58, 95, 0.1);
    color: var(--navy);
}

.detail-hero {
    padding: 1.6rem;
}

.detail-title {
    margin: 0 0 1rem;
    font-size: clamp(1.8rem, 2.8vw, 2.4rem);
    color: var(--navy);
}

.detail-meta-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
}

.detail-meta-grid div {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.detail-meta-label {
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gray-500);
}

.detail-section h3 {
    font-size: 1rem;
    margin-bottom: 0.5rem;
    color: var(--navy);
}

.detail-section p {
    margin: 0;
    color: var(--gray-700);
}

.tracker-tabs {
    border-bottom: 1px solid var(--gray-200);
    padding: 0 1.5rem;
}

.tracker-tabs .nav-link {
    color: var(--gray-700);
    border: 0;
    border-bottom: 3px solid transparent;
    border-radius: 0;
    margin: 0;
    padding: 1rem 0.8rem;
}

.tracker-tabs .nav-link.active,
.tracker-tabs .nav-link:hover {
    color: var(--teal);
    background: transparent;
    border-bottom-color: var(--teal);
}

.detail-tab-content {
    padding: 1.5rem;
}

.tab-section-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1rem;
}

.progress-inline {
    display: flex;
    align-items: center;
    gap: 0.7rem;
}

.progress-inline-label {
    font-size: 0.86rem;
    font-weight: 700;
    color: var(--navy);
}

.tracker-progress {
    height: 10px;
    background: var(--gray-200);
    border-radius: 999px;
    overflow: hidden;
    min-width: 110px;
}

.tracker-progress .progress-bar {
    background: var(--teal);
}

.stat-list {
    display: grid;
    gap: 0.8rem;
}

.stat-list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    padding: 0.85rem 0.95rem;
}

.stat-count {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--navy);
}

.dual-progress-wrap {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.2rem;
}

.dual-progress-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.45rem;
    font-size: 0.95rem;
    color: var(--gray-700);
}

.reported-progress .progress-bar {
    background: var(--teal);
}

.milestone-progress .progress-bar {
    background: var(--navy);
}

.progress-slider-value {
    color: var(--gray-700);
}

.rag-preview {
    min-height: 1.4rem;
}

.rag-preview .badge {
    font-size: 0.8rem;
}

.escalation-banner {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem 1.2rem;
    border: 1px solid #f5b8bc;
    border-top: 4px solid var(--red);
    background: linear-gradient(180deg, rgba(248, 215, 218, 0.34), rgba(255, 255, 255, 0.96));
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    color: var(--red);
}

.escalation-icon {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(114, 28, 36, 0.08);
    font-size: 1.1rem;
}

.table-scroll-wrap {
    position: relative;
}

.table-scroll-wrap.has-scroll::after {
    content: "scroll →";
    position: absolute;
    right: 1rem;
    top: 0.45rem;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--gray-500);
    background: rgba(248, 249, 250, 0.92);
    padding: 0.2rem 0.45rem;
    border-radius: 999px;
}

.table-tracker {
    width: 100%;
    margin: 0;
}

.table-tracker thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--gray-100);
    color: var(--gray-700);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.72rem;
    padding: 0.95rem 1rem;
    border-bottom: 1px solid var(--gray-200);
}

.table-tracker tbody td {
    padding: 0.95rem 1rem;
    vertical-align: middle;
    border-bottom: 1px solid var(--gray-200);
}

.table-tracker tbody tr:hover {
    background: rgba(46, 134, 171, 0.05);
}

.table-tracker tbody tr[data-href] {
    cursor: pointer;
}

.form-shell {
    max-width: 1160px;
    margin: 0 auto;
    display: grid;
    gap: 1.25rem;
}

.form-shell.form-shell-narrow {
    max-width: 860px;
}

.form-card {
    position: relative;
    overflow: hidden;
    padding: 1.8rem;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(249, 251, 254, 0.96));
    border: 1px solid rgba(31, 58, 95, 0.08);
    border-radius: 22px;
    box-shadow: var(--shadow-lg);
}

.form-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 4px;
    background: linear-gradient(90deg, var(--navy), var(--teal), rgba(46, 134, 171, 0.3));
}

.form-card-wide {
    max-width: 1080px;
    margin: 0 auto;
}

.form-card-narrow {
    max-width: 820px;
    margin: 0 auto;
}

.form-hero {
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1.5rem;
    padding: 1.45rem 1.55rem;
    border-radius: 22px;
    background:
        radial-gradient(circle at top right, rgba(255, 255, 255, 0.22), transparent 28%),
        linear-gradient(135deg, var(--navy) 0%, #28507f 48%, var(--teal) 100%);
    color: var(--white);
    box-shadow: var(--shadow-lg);
}

.form-hero::after {
    content: "";
    position: absolute;
    right: -36px;
    bottom: -42px;
    width: 160px;
    height: 160px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.1);
}

.form-hero-content,
.form-hero-aside {
    position: relative;
    z-index: 1;
}

.form-hero-kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.78);
}

.form-hero-title {
    margin: 0.55rem 0 0.45rem;
    font-size: clamp(1.9rem, 3vw, 2.45rem);
    color: var(--white);
}

.form-hero-copy {
    margin: 0;
    max-width: 42rem;
    color: rgba(255, 255, 255, 0.8);
}

.form-hero-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    margin-top: 1rem;
}

.form-hero-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.48rem 0.78rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: rgba(255, 255, 255, 0.92);
    font-size: 0.85rem;
    font-weight: 600;
}

.form-hero-stat {
    min-width: 168px;
    padding: 1rem 1.05rem;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(10px);
}

.form-hero-stat-label {
    display: block;
    margin-bottom: 0.3rem;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.74);
}

.form-hero-stat-value {
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
}

.form-grid {
    display: grid;
    gap: 1.1rem;
}

.field-grid {
    display: grid;
    gap: 1rem;
}

.field-grid.two-col {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

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

.field-grid.four-col {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.form-section {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 253, 0.94));
    border: 1px solid rgba(31, 58, 95, 0.08);
    border-radius: 20px;
    padding: 1.35rem;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
}

.form-section-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1rem;
}

.form-section-title {
    margin: 0 0 0.2rem;
    font-size: 1.16rem;
    color: var(--navy);
}

.form-section-copy {
    margin: 0;
    color: var(--gray-700);
    font-size: 0.93rem;
}

.field-shell,
.auth-input-shell {
    position: relative;
    padding: 0.95rem 1rem 1rem;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(31, 58, 95, 0.09);
    border-radius: 16px;
    transition:
        transform 0.18s ease,
        border-color 0.18s ease,
        box-shadow 0.18s ease,
        background 0.18s ease;
}

.field-shell.is-focused,
.field-shell.has-value,
.auth-input-shell.is-focused,
.auth-input-shell.has-value {
    border-color: rgba(46, 134, 171, 0.42);
    box-shadow: 0 0 0 4px rgba(46, 134, 171, 0.08);
    transform: translateY(-1px);
    background: rgba(255, 255, 255, 0.98);
}

.field-shell.field-shell-alert {
    background: linear-gradient(180deg, rgba(248, 215, 218, 0.18), rgba(255, 255, 255, 0.98));
    border-color: rgba(114, 28, 36, 0.16);
}

.form-label {
    display: block;
    margin-bottom: 0.3rem;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--gray-900);
}

.field-caption {
    display: block;
    margin-bottom: 0.7rem;
    font-size: 0.84rem;
    color: var(--gray-500);
    line-height: 1.45;
}

.form-control,
.form-select {
    min-height: 52px;
    border-radius: 12px;
    border: 1px solid rgba(31, 58, 95, 0.12);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(249, 251, 254, 0.98));
    color: var(--gray-900);
    padding: 0.82rem 1rem;
    transition:
        border-color 0.18s ease,
        box-shadow 0.18s ease,
        background 0.18s ease;
}

.form-control::placeholder {
    color: #aeb7c2;
}

textarea.form-control {
    min-height: 132px;
    resize: none;
    line-height: 1.55;
}

.form-select {
    background-position: right 0.9rem center;
    padding-right: 2.8rem;
}

.form-control:focus,
.form-select:focus,
.form-range:focus,
.form-check-input:focus {
    border-color: rgba(46, 134, 171, 0.55);
    background: var(--white);
    box-shadow: 0 0 0 0.22rem rgba(46, 134, 171, 0.14);
}

.form-control.is-invalid,
.form-select.is-invalid {
    border-color: rgba(114, 28, 36, 0.55);
    box-shadow: none;
}

.invalid-feedback {
    margin-top: 0.5rem;
    font-size: 0.84rem;
    font-weight: 600;
}

.input-support {
    display: block;
    margin-top: 0.55rem;
    font-size: 0.8rem;
    color: var(--gray-500);
}

.calendar-input-group {
    position: relative;
}

.calendar-input-group .form-control {
    padding-right: 3.8rem;
}

.calendar-input-group input[type="date"] {
    font-family: var(--font-display);
    font-size: 0.98rem;
    letter-spacing: -0.02em;
    color: var(--navy);
    color-scheme: light;
}

.calendar-input-group input[type="date"]::-webkit-datetime-edit {
    color: var(--navy);
}

.calendar-input-group input[type="date"]::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
}

.calendar-input-group input[type="date"]::-webkit-date-and-time-value {
    text-align: left;
}

.calendar-input-group input[type="date"]::-webkit-calendar-picker-indicator {
    opacity: 0;
}

.calendar-trigger {
    position: absolute;
    top: 50%;
    right: 0.6rem;
    transform: translateY(-50%);
    width: 2.55rem;
    height: 2.55rem;
    border: 1px solid rgba(31, 58, 95, 0.12);
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(46, 134, 171, 0.12), rgba(31, 58, 95, 0.06));
    color: var(--navy);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition:
        transform 0.18s ease,
        border-color 0.18s ease,
        background 0.18s ease,
        color 0.18s ease;
}

.calendar-trigger:hover,
.calendar-trigger:focus {
    transform: translateY(-50%) scale(1.03);
    border-color: rgba(46, 134, 171, 0.35);
    background: linear-gradient(180deg, rgba(46, 134, 171, 0.18), rgba(31, 58, 95, 0.12));
    color: var(--teal);
}

.form-range {
    width: 100%;
    accent-color: var(--teal);
}

.progress-callout {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.1rem;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(46, 134, 171, 0.12), rgba(31, 58, 95, 0.07));
    border: 1px solid rgba(46, 134, 171, 0.14);
}

.progress-callout-label {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gray-500);
}

.progress-callout-value {
    display: block;
    margin-top: 0.3rem;
    font-family: var(--font-display);
    font-size: 2rem;
    line-height: 1;
    color: var(--navy);
}

.form-check-card {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    padding: 1rem 1.1rem;
    border-radius: 16px;
    border: 1px dashed rgba(31, 58, 95, 0.18);
    background: linear-gradient(135deg, rgba(46, 134, 171, 0.08), rgba(255, 255, 255, 0.92));
}

.form-check-card.form-check-card-alert {
    background: linear-gradient(135deg, rgba(248, 215, 218, 0.2), rgba(255, 255, 255, 0.94));
    border-color: rgba(114, 28, 36, 0.22);
}

.form-check-card .form-check-input {
    width: 1.1rem;
    height: 1.1rem;
    margin-top: 0.18rem;
}

.form-check-card-label {
    display: block;
    font-weight: 700;
    color: var(--gray-900);
}

.form-check-card-copy {
    display: block;
    margin-top: 0.18rem;
    font-size: 0.85rem;
    color: var(--gray-500);
}

.form-action-bar {
    position: sticky;
    bottom: 0.85rem;
    z-index: 3;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.1rem;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(14px);
    border: 1px solid rgba(31, 58, 95, 0.1);
    border-radius: 18px;
    box-shadow: var(--shadow-lg);
}

.action-note {
    margin: 0;
    color: var(--gray-700);
    font-size: 0.9rem;
}

.action-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
}

.section-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.38rem 0.7rem;
    border-radius: 999px;
    background: rgba(31, 58, 95, 0.08);
    color: var(--navy);
    font-size: 0.8rem;
    font-weight: 700;
}

.breadcrumb-tracker {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    padding: 0.65rem 0.9rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.86);
    border: 1px solid rgba(31, 58, 95, 0.08);
    color: var(--gray-500);
    font-size: 0.9rem;
    box-shadow: var(--shadow-sm);
}

.breadcrumb-tracker a {
    color: var(--teal);
    font-weight: 700;
}

.empty-state {
    text-align: center;
    padding: 2.5rem 1.5rem;
}

.empty-state-icon {
    width: 4rem;
    height: 4rem;
    border-radius: 999px;
    margin: 0 auto 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--teal-pale);
    color: var(--teal);
    font-size: 1.4rem;
}

.empty-state-title {
    margin-bottom: 0.5rem;
    color: var(--navy);
}

.empty-state-copy {
    margin: 0 auto;
    max-width: 36rem;
    color: var(--gray-700);
}

.tracker-accordion .accordion-item {
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    overflow: hidden;
    margin-bottom: 0.9rem;
}

.tracker-accordion .accordion-button {
    background: var(--gray-50);
}

.tracker-accordion .accordion-button:not(.collapsed) {
    color: var(--navy);
    background: rgba(46, 134, 171, 0.08);
    box-shadow: none;
}

.decision-summary {
    text-align: left;
}

.decision-title {
    font-weight: 700;
}

.decision-meta {
    font-size: 0.86rem;
    color: var(--gray-500);
    margin-top: 0.15rem;
}

.risk-live-score {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: linear-gradient(135deg, rgba(46, 134, 171, 0.12), rgba(31, 58, 95, 0.08));
    border: 1px solid rgba(46, 134, 171, 0.15);
    border-radius: 18px;
}

.risk-score-circle {
    width: 3.6rem;
    height: 3.6rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--green-light);
    color: var(--green);
    font-size: 1.25rem;
    font-weight: 700;
    font-family: var(--font-display);
    box-shadow: 0 10px 20px rgba(31, 58, 95, 0.12);
}

.risk-score-circle.score-medium {
    background: var(--amber-light);
    color: var(--amber);
}

.risk-score-circle.score-high {
    background: var(--red-light);
    color: var(--red);
}

.risk-score-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--gray-500);
    font-weight: 700;
}

.risk-score-text {
    margin-top: 0.2rem;
    color: var(--navy);
}

.risk-choice-group {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.risk-choice-pill {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.78rem 0.95rem;
    border-radius: 999px;
    border: 1px solid rgba(31, 58, 95, 0.1);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 253, 0.96));
    cursor: pointer;
    transition:
        transform 0.18s ease,
        border-color 0.18s ease,
        box-shadow 0.18s ease,
        background 0.18s ease;
}

.risk-choice-pill:hover {
    transform: translateY(-1px);
    border-color: rgba(46, 134, 171, 0.35);
    background: linear-gradient(180deg, rgba(232, 244, 248, 0.88), rgba(255, 255, 255, 0.96));
}

.risk-choice-pill.is-selected {
    border-color: rgba(46, 134, 171, 0.42);
    background: linear-gradient(180deg, rgba(232, 244, 248, 0.96), rgba(255, 255, 255, 0.98));
    box-shadow: 0 10px 18px rgba(46, 134, 171, 0.12);
    transform: translateY(-1px);
}

.risk-choice-pill input {
    accent-color: var(--teal);
    margin: 0;
}

.audit-timeline {
    position: relative;
    margin-left: 0.75rem;
}

.audit-timeline::before {
    content: "";
    position: absolute;
    left: 1rem;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--gray-200);
}

.audit-item {
    position: relative;
    display: flex;
    gap: 1rem;
    padding: 0 0 1.25rem;
}

.audit-avatar {
    position: relative;
    z-index: 1;
    width: 2.2rem;
    height: 2.2rem;
    font-size: 0.8rem;
    box-shadow: var(--shadow-sm);
}

.audit-content {
    padding-top: 0.1rem;
}

.audit-header {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    align-items: center;
    margin-bottom: 0.35rem;
}

.audit-body {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    align-items: center;
    color: var(--gray-700);
}

.audit-field {
    font-weight: 700;
    color: var(--navy);
}

.audit-diff {
    word-break: break-word;
}

.messages-container {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    display: grid;
    gap: 0.75rem;
    z-index: 1200;
}

.tracker-toast {
    display: flex;
    align-items: flex-start;
    gap: 0.8rem;
    width: min(420px, calc(100vw - 2rem));
    background: var(--white);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    padding: 0.95rem 1rem;
    border-left: 4px solid var(--teal);
}

.tracker-toast.toast-success {
    border-left-color: var(--green);
}

.tracker-toast.toast-warning {
    border-left-color: var(--amber);
}

.tracker-toast.toast-error,
.tracker-toast.toast-danger {
    border-left-color: var(--red);
}

.tracker-toast-icon {
    color: var(--navy);
    padding-top: 0.1rem;
}

.tracker-toast-body {
    flex: 1;
    color: var(--gray-900);
}

.toast-close {
    border: 0;
    background: transparent;
    color: var(--gray-500);
}

.toast-hiding {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.profile-card {
    padding: 1.8rem;
}

.profile-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.profile-avatar {
    width: 5rem;
    height: 5rem;
    font-size: 1.45rem;
}

.profile-meta-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
}

.profile-name {
    margin: 0;
    color: var(--navy);
}

.profile-email {
    color: var(--gray-700);
    margin-top: 0.25rem;
}

.profile-meta-item {
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    padding: 1rem;
}

.profile-meta-label {
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gray-500);
    font-weight: 700;
}

.profile-meta-value {
    margin-top: 0.35rem;
    color: var(--gray-900);
    font-weight: 700;
}

.auth-page {
    background:
        radial-gradient(circle at top right, rgba(199, 154, 44, 0.12), transparent 24%),
        linear-gradient(180deg, #f9f6ee 0%, #f1ecdf 100%);
}

.auth-shell {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 40% 60%;
}

.auth-brand-panel {
    position: relative;
    overflow: hidden;
    padding: 3rem;
    color: var(--white);
    background:
        radial-gradient(circle at top right, rgba(226, 181, 75, 0.2), transparent 24%),
        linear-gradient(180deg, var(--navy), var(--navy-dark));
    display: flex;
    align-items: center;
}

.auth-brand-panel::before,
.auth-brand-panel::after {
    content: "";
    position: absolute;
    border-radius: 999px;
    background: rgba(247, 231, 190, 0.08);
}

.auth-brand-panel::before {
    width: 260px;
    height: 260px;
    top: -60px;
    right: -90px;
}

.auth-brand-panel::after {
    width: 200px;
    height: 200px;
    left: -60px;
    bottom: -60px;
}

.auth-brand-inner {
    position: relative;
    z-index: 1;
    max-width: 28rem;
}

.auth-brand-mark {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    margin-bottom: 1.5rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.85rem;
    font-weight: 700;
}

.auth-brand-icon {
    width: 3rem;
    height: 3rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.18rem;
    background: rgba(247, 231, 190, 0.14);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.18);
}

.auth-brand-title {
    font-size: clamp(2.3rem, 4vw, 3.5rem);
    line-height: 1.08;
    margin: 0;
}

.auth-brand-copy {
    margin: 1rem 0 1.8rem;
    color: rgba(255, 255, 255, 0.78);
}

.auth-quote {
    border-left: 3px solid var(--teal);
    padding-left: 1rem;
    color: rgba(255, 255, 255, 0.9);
}

.auth-decor-grid {
    position: absolute;
    right: 2rem;
    bottom: 2rem;
    display: grid;
    grid-template-columns: repeat(3, 18px);
    gap: 0.45rem;
}

.auth-decor-grid span {
    width: 18px;
    height: 18px;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.15);
}

.auth-form-panel {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    background:
        radial-gradient(circle at top left, rgba(46, 134, 171, 0.08), transparent 26%),
        linear-gradient(180deg, rgba(255, 253, 248, 0.98), rgba(246, 240, 228, 0.94));
}

.auth-form-shell {
    width: min(100%, 500px);
}

.auth-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.auth-toolbar-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.45rem 0.9rem;
    border-radius: 999px;
    border: 1px solid rgba(31, 58, 95, 0.10);
    background: rgba(255, 255, 255, 0.8);
    color: var(--navy);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.auth-theme-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.auth-card {
    padding: 1.75rem;
    border-radius: 24px;
    border: 1px solid rgba(31, 58, 95, 0.08);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 251, 254, 0.96));
    box-shadow: var(--shadow-lg);
}

.auth-login-brand {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin-bottom: 1rem;
    padding-bottom: 0.9rem;
    border-bottom: 1px solid rgba(31, 58, 95, 0.08);
}

.auth-login-brand-badge {
    width: 3rem;
    height: 3rem;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.34rem;
    background: linear-gradient(145deg, rgba(199, 154, 44, 0.14), rgba(46, 134, 171, 0.08));
    border: 1px solid rgba(46, 134, 171, 0.1);
    box-shadow: 0 10px 22px rgba(17, 37, 64, 0.08);
}

.auth-login-brand-logo {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.auth-login-brand-copy {
    min-width: 0;
}

.auth-login-brand-title {
    color: var(--navy);
    font-size: 0.94rem;
    font-weight: 800;
    line-height: 1.2;
}

.auth-login-brand-sub {
    margin-top: 0.12rem;
    color: var(--gray-500);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.auth-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.1rem;
}

.auth-overline {
    color: var(--teal);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.auth-title {
    margin: 0.55rem 0 0.75rem;
    font-size: 2.15rem;
    color: var(--navy);
}

.auth-signal {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.4rem 0.75rem;
    border-radius: 999px;
    background: rgba(26, 122, 74, 0.10);
    border: 1px solid rgba(26, 122, 74, 0.16);
    color: #1A7A4A;
    font-size: 0.76rem;
    font-weight: 700;
    white-space: nowrap;
}

.auth-signal-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 0 4px rgba(26, 122, 74, 0.12);
}

.auth-subtitle {
    color: var(--gray-700);
    margin-bottom: 1.35rem;
}

.auth-field {
    margin-bottom: 1rem;
}

.auth-input-shell label {
    display: block;
    margin-bottom: 0.35rem;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gray-500);
}

.auth-input-row,
.auth-password-wrap {
    display: flex;
    align-items: center;
    gap: 0.7rem;
}

.auth-input-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    flex-shrink: 0;
    color: var(--teal);
    font-size: 0.95rem;
}

.auth-input-shell .form-control {
    min-height: 40px;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    color: var(--navy);
    font-size: 1rem;
    font-weight: 600;
}

.auth-input-shell .form-control::placeholder {
    color: #90A0B3;
    font-weight: 500;
}

.auth-input-shell .form-control:focus {
    box-shadow: none;
}

.password-toggle {
    margin-left: auto;
    border: 1px solid rgba(46, 134, 171, 0.16);
    border-radius: 999px;
    background: rgba(46, 134, 171, 0.08);
    color: var(--teal);
    font-size: 0.78rem;
    font-weight: 700;
    padding: 0.28rem 0.62rem;
}

.auth-error,
.field-error {
    margin-top: 0.4rem;
    color: var(--red);
    font-size: 0.88rem;
}

.auth-field-hint {
    margin-top: 0.45rem;
    color: var(--gray-500);
    font-size: 0.82rem;
}

.auth-submit {
    width: 100%;
    min-height: 52px;
    border: 0;
    border-radius: 14px;
    font-weight: 700;
    box-shadow: 0 16px 32px rgba(46, 134, 171, 0.18);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
}

.auth-footer-note {
    margin-top: 1.25rem;
    color: var(--gray-500);
    text-align: center;
    font-size: 0.92rem;
}

.btn-outline-tracker {
    border-color: var(--teal);
    color: var(--teal);
    background: transparent;
}

.btn-outline-tracker:hover,
.btn-outline-tracker:focus {
    background: var(--teal-pale);
    color: var(--teal);
    border-color: var(--teal);
}

.error-card {
    padding: 2rem;
}

.error-kicker {
    font-size: 0.74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--teal);
}

.error-title {
    margin: 0.6rem 0 0.8rem;
    color: var(--navy);
}

.error-copy {
    color: var(--gray-700);
    max-width: 42rem;
}

.standalone-error-shell {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    background: linear-gradient(180deg, rgba(31, 58, 95, 0.06), rgba(46, 134, 171, 0.08));
}

.standalone-error-card {
    width: min(100%, 540px);
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    padding: 2rem;
    text-align: center;
}

/* Dashboard header */
.dashboard-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.55rem 1.65rem;
    background:
        radial-gradient(circle at top right, rgba(46, 134, 171, 0.18), transparent 34%),
        linear-gradient(135deg, rgba(31, 58, 95, 0.08), rgba(46, 134, 171, 0.08));
    border: 1px solid rgba(31, 58, 95, 0.08);
    border-radius: 22px;
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    position: relative;
}

.dashboard-header::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(rgba(255, 255, 255, 0.18) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.18) 1px, transparent 1px);
    background-size: 28px 28px;
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.45), transparent);
    pointer-events: none;
}

.dashboard-header::after {
    content: "";
    position: absolute;
    top: -18%;
    right: -10%;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0) 68%);
    pointer-events: none;
    opacity: 0.52;
    animation: dashboardHaloDrift 12s ease-in-out infinite alternate;
}

.dashboard-hero-surface > * {
    position: relative;
    z-index: 1;
}

.dashboard-hero-copy {
    max-width: 48rem;
}

.dashboard-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
}

.dashboard-hero-action {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.85rem 1rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.74);
    border: 1px solid rgba(31, 58, 95, 0.08);
    color: var(--navy);
    font-weight: 700;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.dashboard-hero-action:hover {
    color: var(--navy);
    background: rgba(255, 255, 255, 0.92);
    border-color: rgba(46, 134, 171, 0.24);
    transform: translateY(-2px);
    box-shadow: 0 12px 24px rgba(17, 38, 63, 0.08);
}

.js-enhanced .dashboard-header .dashboard-hero-action,
.js-enhanced .dashboard-header .hero-orb-card,
.js-enhanced .dashboard-header .dashboard-hero-mini-stat {
    opacity: 0;
    transform: translateY(16px) scale(0.985);
}

.js-enhanced .dashboard-header.is-motion-ready .dashboard-hero-action,
.js-enhanced .dashboard-header.is-motion-ready .hero-orb-card,
.js-enhanced .dashboard-header.is-motion-ready .dashboard-hero-mini-stat {
    animation: dashboardLiftIn 0.62s cubic-bezier(0.2, 0.9, 0.2, 1) forwards;
}

.js-enhanced .dashboard-header.is-motion-ready .dashboard-hero-action:nth-child(1) { animation-delay: 0.08s; }
.js-enhanced .dashboard-header.is-motion-ready .dashboard-hero-action:nth-child(2) { animation-delay: 0.15s; }
.js-enhanced .dashboard-header.is-motion-ready .dashboard-hero-action:nth-child(3) { animation-delay: 0.22s; }
.js-enhanced .dashboard-header.is-motion-ready .hero-orb-card:nth-child(1) { animation-delay: 0.18s; }
.js-enhanced .dashboard-header.is-motion-ready .hero-orb-card:nth-child(2) { animation-delay: 0.26s; }
.js-enhanced .dashboard-header.is-motion-ready .hero-orb-card:nth-child(3) { animation-delay: 0.34s; }
.js-enhanced .dashboard-header.is-motion-ready .dashboard-hero-mini-stat:nth-child(1) { animation-delay: 0.26s; }
.js-enhanced .dashboard-header.is-motion-ready .dashboard-hero-mini-stat:nth-child(2) { animation-delay: 0.34s; }
.js-enhanced .dashboard-header.is-motion-ready .dashboard-hero-mini-stat:nth-child(3) { animation-delay: 0.42s; }

.hero-spectrum {
    padding: 1rem 1.05rem;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(31, 58, 95, 0.08);
}

.hero-spectrum-head,
.hero-spectrum-legend {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.hero-spectrum-title {
    font-size: 0.8rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--gray-600);
}

.hero-spectrum-subtitle {
    color: var(--gray-600);
    font-size: 0.88rem;
}

.hero-spectrum-track {
    display: flex;
    width: 100%;
    height: 12px;
    margin: 0.9rem 0 0.75rem;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(31, 58, 95, 0.08);
}

.hero-spectrum-segment {
    height: 100%;
}

.js-enhanced .dashboard-header .hero-spectrum-segment {
    transform-origin: left center;
    transform: scaleX(0.001);
}

.js-enhanced .dashboard-header.is-motion-ready .hero-spectrum-segment {
    animation: dashboardGrowX 0.9s cubic-bezier(0.2, 0.9, 0.2, 1) forwards;
}

.js-enhanced .dashboard-header.is-motion-ready .hero-spectrum-segment:nth-child(1) { animation-delay: 0.18s; }
.js-enhanced .dashboard-header.is-motion-ready .hero-spectrum-segment:nth-child(2) { animation-delay: 0.26s; }
.js-enhanced .dashboard-header.is-motion-ready .hero-spectrum-segment:nth-child(3) { animation-delay: 0.34s; }
.js-enhanced .dashboard-header.is-motion-ready .hero-spectrum-segment:nth-child(4) { animation-delay: 0.42s; }
.js-enhanced .dashboard-header.is-motion-ready .hero-spectrum-segment:nth-child(5) { animation-delay: 0.5s; }

.hero-spectrum-green {
    background: linear-gradient(90deg, #198754, #39ad73);
}

.hero-spectrum-amber {
    background: linear-gradient(90deg, #ffc107, #ffcd39);
}

.hero-spectrum-red {
    background: linear-gradient(90deg, #dc3545, #ef6673);
}

.hero-spectrum-empty {
    background: linear-gradient(90deg, rgba(31, 58, 95, 0.12), rgba(46, 134, 171, 0.12));
}

.hero-spectrum-legend span {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: var(--gray-700);
    font-size: 0.88rem;
    font-weight: 600;
}

.dashboard-hero-side {
    display: grid;
    gap: 1rem;
    justify-items: end;
}

.dashboard-header-meta {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.dashboard-timestamp {
    color: var(--gray-700);
    font-size: 0.92rem;
    padding: 0.55rem 0.8rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(31, 58, 95, 0.08);
}

.dashboard-hero-orbs {
    display: grid;
    grid-template-columns: repeat(3, minmax(130px, 1fr));
    gap: 0.75rem;
}

.hero-orb-card {
    min-width: 140px;
    padding: 0.95rem 1rem;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid rgba(31, 58, 95, 0.08);
    box-shadow: 0 10px 20px rgba(17, 38, 63, 0.08);
}

.hero-orb-label {
    display: block;
    font-size: 0.73rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--gray-500);
}

.hero-orb-value {
    display: block;
    margin-top: 0.45rem;
    font-family: var(--font-display);
    font-size: 1.65rem;
    color: var(--navy);
}

.dashboard-hero-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
    width: 100%;
}

.dashboard-hero-mini-stat {
    padding: 0.9rem 1rem;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(31, 58, 95, 0.08);
}

.dashboard-hero-mini-stat span {
    display: block;
    color: var(--gray-500);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-weight: 700;
}

.dashboard-hero-mini-stat strong {
    display: block;
    margin-top: 0.45rem;
    color: var(--navy);
    font-family: var(--font-display);
    font-size: 1.35rem;
}

.dashboard-pulse-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.9rem;
}

.dashboard-pulse-pill {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 1rem 1.1rem;
    background: rgba(255, 255, 255, 0.88);
    border: 1px solid rgba(31, 58, 95, 0.08);
    border-radius: 18px;
    box-shadow: var(--shadow-sm);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.dashboard-pulse-icon {
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(46, 134, 171, 0.10);
    color: var(--teal);
    font-size: 1rem;
    margin-bottom: 0.15rem;
}

.dashboard-pulse-pill::after {
    content: "";
    position: absolute;
    inset: auto -20% -50% auto;
    width: 120px;
    height: 120px;
    background: radial-gradient(circle, rgba(46, 134, 171, 0.16), transparent 65%);
    pointer-events: none;
}

.dashboard-pulse-pill:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
    border-color: rgba(46, 134, 171, 0.22);
}

.dashboard-pulse-label {
    font-size: 0.76rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--gray-500);
}

.dashboard-pulse-value {
    font-family: var(--font-display);
    font-size: 1.35rem;
    color: var(--navy);
}

.dashboard-section-nav {
    position: sticky;
    top: calc(var(--topbar-height, 72px) + 0.75rem);
    z-index: 20;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding: 0.8rem;
    border-radius: 20px;
    border: 1px solid rgba(31, 58, 95, 0.08);
    background: rgba(255, 255, 255, 0.78);
    backdrop-filter: blur(12px);
    box-shadow: var(--shadow-sm);
}

.dashboard-section-link {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.75rem 0.95rem;
    border-radius: 999px;
    color: var(--gray-700);
    font-weight: 700;
    transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.dashboard-section-link:hover {
    color: var(--navy);
    background: rgba(46, 134, 171, 0.10);
    transform: translateY(-1px);
}

.dashboard-section-link.is-active {
    background: linear-gradient(135deg, var(--navy), var(--teal));
    color: var(--white);
    box-shadow: 0 10px 22px rgba(31, 58, 95, 0.18);
}

.dashboard-workspace {
    overflow: hidden;
}

.dashboard-workspace-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    border-bottom: 1px solid var(--gray-200);
    padding: 0 0 1rem;
}

.dashboard-workspace-tabs .nav-link {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.78rem 1rem;
    border-radius: 999px;
    border: 1px solid rgba(31, 58, 95, 0.10);
    background: rgba(248, 250, 252, 0.96);
    color: var(--gray-700);
    font-weight: 700;
    box-shadow: var(--shadow-sm);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease, color 0.18s ease;
}

.dashboard-workspace-tabs .nav-link:hover {
    transform: translateY(-1px);
    border-color: rgba(46, 134, 171, 0.22);
    color: var(--navy);
    background: rgba(46, 134, 171, 0.08);
}

.dashboard-workspace-tabs .nav-link.active {
    background: linear-gradient(135deg, var(--navy), var(--teal));
    color: var(--white);
    border-color: transparent;
    box-shadow: 0 14px 28px rgba(31, 58, 95, 0.18);
}

.dashboard-workspace-tabs .nav-link.has-alerts:not(.active) {
    color: var(--red);
}

.dashboard-workspace-tabs .nav-link .badge {
    margin-left: 0.15rem;
}

.dashboard-tab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.7rem;
    height: 1.7rem;
    padding: 0 0.5rem;
    border-radius: 999px;
    background: rgba(31, 58, 95, 0.08);
    color: currentColor;
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1;
}

.dashboard-tab-count.is-alert {
    background: rgba(192, 57, 43, 0.12);
    color: #b42332;
}

.dashboard-workspace-tabs .nav-link.active .dashboard-tab-count {
    background: rgba(255, 255, 255, 0.16);
    color: var(--white);
}

.dashboard-inline-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.1rem;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    border: 1px solid rgba(31, 58, 95, 0.10);
    background: rgba(248, 250, 252, 0.96);
    color: var(--navy);
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1;
}

.dashboard-workspace-content > .tab-pane {
    transform-origin: top center;
}

@keyframes dashboardPaneFade {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.dashboard-workspace-content > .tab-pane.show.active,
.dashboard-workspace-content > .tab-pane.dashboard-pane-animate {
    animation: dashboardPaneFade 0.28s cubic-bezier(0.2, 0.9, 0.2, 1);
}

@keyframes dashboardLiftIn {
    from {
        opacity: 0;
        transform: translateY(16px) scale(0.985);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes dashboardGrowX {
    from {
        transform: scaleX(0.001);
    }
    to {
        transform: scaleX(1);
    }
}

@keyframes dashboardHaloDrift {
    from {
        transform: translate3d(0, 0, 0) scale(1);
    }
    to {
        transform: translate3d(-18px, 12px, 0) scale(1.06);
    }
}

.dashboard-summary-stack {
    display: grid;
    gap: 0.9rem;
}

.dashboard-summary-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.05rem;
    border-radius: 16px;
    border: 1px solid rgba(31, 58, 95, 0.08);
    background: linear-gradient(180deg, rgba(248, 249, 250, 0.94), rgba(255, 255, 255, 0.98));
}

.dashboard-summary-label {
    color: var(--gray-500);
    font-size: 0.76rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-weight: 700;
}

.dashboard-summary-value {
    color: var(--navy);
    font-family: var(--font-display);
    font-size: 1.55rem;
    line-height: 1;
}

.dashboard-spotlight-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.dashboard-spotlight-card {
    position: relative;
    overflow: hidden;
    padding: 1.3rem 1.35rem;
    border-radius: 22px;
    border: 1px solid rgba(31, 58, 95, 0.08);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(245, 249, 252, 0.96));
    box-shadow: var(--shadow-sm);
}

.dashboard-spotlight-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.dashboard-spotlight-kicker {
    color: var(--gray-500);
    font-size: 0.76rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-weight: 800;
}

.dashboard-spotlight-head i {
    font-size: 1.15rem;
}

.dashboard-spotlight-value {
    margin: 0.85rem 0 0.55rem;
    font-family: var(--font-display);
    font-size: 2.2rem;
    line-height: 1;
    color: var(--navy);
}

.dashboard-spotlight-copy {
    color: var(--gray-700);
    max-width: 40ch;
}

.spotlight-danger {
    background:
        radial-gradient(circle at top right, rgba(220, 53, 69, 0.16), transparent 32%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(252, 245, 246, 0.98));
}

.spotlight-danger .dashboard-spotlight-head i,
.spotlight-danger .dashboard-spotlight-value {
    color: #b42332;
}

.spotlight-warning {
    background:
        radial-gradient(circle at top right, rgba(255, 193, 7, 0.16), transparent 32%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(255, 250, 240, 0.98));
}

.spotlight-warning .dashboard-spotlight-head i,
.spotlight-warning .dashboard-spotlight-value {
    color: #b56d00;
}

.spotlight-calm {
    background:
        radial-gradient(circle at top right, rgba(46, 134, 171, 0.16), transparent 32%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(243, 249, 252, 0.98));
}

.spotlight-calm .dashboard-spotlight-head i,
.spotlight-calm .dashboard-spotlight-value {
    color: var(--teal);
}

.reveal-up {
    opacity: 1;
    transform: translateY(0);
}

.js-enhanced .reveal-up {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.55s ease, transform 0.55s ease;
}

.js-enhanced .reveal-up.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Dashboard metric cards */
.metric-card {
    width: 100%;
    background:
        radial-gradient(circle at top right, rgba(46, 134, 171, 0.12), transparent 30%),
        rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(31, 58, 95, 0.08);
    border-radius: 20px;
    box-shadow: var(--shadow-sm);
    padding: 1.5rem;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

[data-interactive-panel]::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(
        240px circle at var(--spot-x, 50%) var(--spot-y, 50%),
        rgba(46, 134, 171, 0.14),
        transparent 60%
    );
    opacity: 0;
    transition: opacity 0.22s ease;
    pointer-events: none;
    z-index: 0;
}

[data-interactive-panel]:hover::before {
    opacity: 1;
}

[data-interactive-panel] > * {
    position: relative;
    z-index: 1;
}

.metric-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: rgba(46, 134, 171, 0.2);
}

.metric-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.metric-card .metric-value {
    font-family: var(--font-display);
    font-size: 2.5rem;
    font-weight: 600;
    line-height: 1;
    margin-top: 0.45rem;
    letter-spacing: -0.05em;
}

.metric-card .metric-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--gray-500);
    font-weight: 700;
}

.metric-card .metric-detail {
    margin-top: 0.55rem;
    color: var(--gray-700);
    font-size: 0.82rem;
}

.metric-card .metric-icon {
    width: 3.2rem;
    height: 3.2rem;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    opacity: 1;
    background: rgba(255, 255, 255, 0.75);
    border: 1px solid rgba(31, 58, 95, 0.08);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
}

.metric-card-foot {
    margin-top: 1rem;
}

.metric-spark {
    display: flex;
    width: 100%;
    height: 8px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(31, 58, 95, 0.08);
}

.metric-spark-segment {
    height: 100%;
}

.js-enhanced .dashboard-workspace .metric-spark-segment {
    transform-origin: left center;
    transform: scaleX(0.001);
}

.js-enhanced .dashboard-workspace.is-motion-ready .metric-spark-segment {
    animation: dashboardGrowX 0.85s cubic-bezier(0.2, 0.9, 0.2, 1) forwards;
}

.js-enhanced .dashboard-workspace.is-motion-ready .metric-spark-segment:nth-child(1) { animation-delay: 0.1s; }
.js-enhanced .dashboard-workspace.is-motion-ready .metric-spark-segment:nth-child(2) { animation-delay: 0.18s; }
.js-enhanced .dashboard-workspace.is-motion-ready .metric-spark-segment:nth-child(3) { animation-delay: 0.26s; }

@media (prefers-reduced-motion: reduce) {
    .dashboard-header::after,
    .dashboard-workspace-content > .tab-pane.show.active,
    .dashboard-workspace-content > .tab-pane.dashboard-pane-animate,
    .dashboard-header.is-motion-ready .dashboard-hero-action,
    .dashboard-header.is-motion-ready .hero-orb-card,
    .dashboard-header.is-motion-ready .dashboard-hero-mini-stat,
    .dashboard-header.is-motion-ready .hero-spectrum-segment,
    .dashboard-workspace.is-motion-ready .metric-spark-segment {
        animation: none !important;
        transition: none !important;
        transform: none !important;
        opacity: 1 !important;
    }
}

.spark-success {
    background: linear-gradient(90deg, #198754, #35b774);
}

.spark-primary {
    background: linear-gradient(90deg, var(--navy), var(--teal));
}

.spark-danger {
    background: linear-gradient(90deg, #dc3545, #ef6673);
}

.spark-warning {
    background: linear-gradient(90deg, #ffc107, #ffd451);
}

.spark-muted {
    background: linear-gradient(90deg, rgba(31, 58, 95, 0.12), rgba(46, 134, 171, 0.12));
}

.metric-inline-note,
.metric-emphasis {
    margin-top: 0.8rem;
    color: var(--gray-700);
    font-size: 0.84rem;
}

.metric-emphasis {
    padding: 0.7rem 0.8rem;
    border-radius: 14px;
    background: rgba(31, 58, 95, 0.05);
    border: 1px solid rgba(31, 58, 95, 0.06);
}

.metric-emphasis-success {
    background: rgba(25, 135, 84, 0.08);
    border-color: rgba(25, 135, 84, 0.10);
}

.metric-emphasis-danger {
    background: rgba(220, 53, 69, 0.08);
    border-color: rgba(220, 53, 69, 0.10);
}

.metric-card.danger {
    border-left: 4px solid rgba(220, 53, 69, 0.55);
}

.metric-card.success {
    border-left: 4px solid rgba(25, 135, 84, 0.5);
}

.text-teal {
    color: var(--teal) !important;
}

.text-navy {
    color: var(--navy) !important;
}

/* Chart cards */
.chart-card {
    height: 100%;
    background:
        radial-gradient(circle at top right, rgba(46, 134, 171, 0.10), transparent 28%),
        rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(31, 58, 95, 0.08);
    border-radius: 22px;
    box-shadow: var(--shadow-sm);
    padding: 1.4rem 1.4rem 1.2rem;
    position: relative;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.chart-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: rgba(46, 134, 171, 0.18);
}

.chart-card.is-refreshed {
    animation: chartCardFlash 0.55s ease;
}

@keyframes chartCardFlash {
    0% {
        box-shadow: 0 0 0 rgba(46, 134, 171, 0);
    }
    40% {
        box-shadow: 0 0 0 5px rgba(46, 134, 171, 0.12);
    }
    100% {
        box-shadow: var(--shadow-sm);
    }
}

.chart-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1rem;
}

.chart-kicker {
    margin-bottom: 0.35rem;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--teal);
    font-weight: 800;
}

.chart-card .chart-title {
    margin: 0;
    font-family: var(--font-heading);
    font-size: 1.1rem;
    color: var(--navy);
}

.chart-refresh-btn {
    width: 2.55rem;
    height: 2.55rem;
    border-radius: 14px;
    border: 1px solid rgba(31, 58, 95, 0.10);
    background: rgba(255, 255, 255, 0.82);
    color: var(--navy);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.chart-refresh-btn:hover,
.chart-refresh-btn:focus {
    color: var(--teal);
    border-color: rgba(46, 134, 171, 0.3);
    transform: rotate(18deg);
    box-shadow: 0 10px 18px rgba(31, 58, 95, 0.10);
}

.chart-refresh-btn.is-loading {
    color: var(--teal);
    pointer-events: none;
    animation: spinRefresh 0.9s linear infinite;
}

@keyframes spinRefresh {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.chart-card-body {
    position: relative;
    min-height: 260px;
}

.chart-card canvas {
    width: 100% !important;
    max-height: 260px;
}

.chart-error {
    display: grid;
    place-items: center;
    min-height: 240px;
    text-align: center;
    border: 1px dashed var(--gray-200);
    border-radius: var(--radius);
    background: var(--gray-50);
    padding: 1.25rem;
}

.chart-error-message {
    color: var(--gray-700);
    margin-bottom: 0.85rem;
}

.chart-retry {
    min-width: 110px;
}

/* Skeleton loader */
.skeleton {
    position: relative;
    overflow: hidden;
    background: linear-gradient(90deg, var(--gray-100) 25%, var(--gray-200) 50%, var(--gray-100) 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.4s ease-in-out infinite;
}

.skeleton-bar {
    height: 240px;
    border-radius: var(--radius);
}

@keyframes skeleton-shimmer {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* Attention panel */
.attention-panel {
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(31, 58, 95, 0.08);
    border-radius: 22px;
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.attention-tabs {
    border-bottom: 1px solid var(--gray-200);
}

.attention-tabs .nav-link {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    border: 0;
    border-bottom: 3px solid transparent;
    color: var(--gray-700);
    background: transparent;
    padding: 1rem 1rem 0.9rem;
    border-radius: 0;
}

.attention-tabs .nav-link.active,
.attention-tabs .nav-link:hover {
    color: var(--navy);
    border-bottom-color: var(--teal);
}

.attention-panel .nav-tabs .nav-link.has-alerts {
    color: var(--red);
}

.attention-indicator {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: var(--red);
    box-shadow: 0 0 0 6px rgba(220, 53, 69, 0.12);
}

.attention-footer-link {
    padding-top: 0.9rem;
    text-align: right;
}

.attention-footer-link a,
.table-link {
    color: var(--teal);
    font-weight: 600;
}

.overdue-row-critical td:first-child {
    border-left: 4px solid rgba(220, 53, 69, 0.5);
}

.overdue-row-moderate td:first-child {
    border-left: 4px solid rgba(255, 193, 7, 0.65);
}

/* WG performance table */
.wg-table .progress {
    height: 6px;
    border-radius: 999px;
}

.wg-table .mini-progress {
    min-width: 150px;
}

.mini-progress {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.mini-progress .progress {
    flex: 1;
    min-width: 90px;
}

.mini-progress span {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--navy);
}

/* Stale reforms list */
.stale-list {
    display: grid;
    gap: 0.9rem;
}

.stale-item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem;
    border: 1px solid rgba(31, 58, 95, 0.08);
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(248, 249, 250, 0.92), rgba(255, 255, 255, 0.96));
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.stale-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 28px rgba(20, 36, 56, 0.08);
    border-color: rgba(46, 134, 171, 0.18);
}

.stale-item-main {
    min-width: 0;
}

.stale-badge-amber,
.stale-badge-red {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 86px;
    padding: 0.45rem 0.7rem;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 700;
    white-space: nowrap;
}

.stale-badge-amber {
    background: var(--amber-light);
    color: var(--amber);
}

.stale-badge-red {
    background: var(--red-light);
    color: var(--red);
}

.reform-area-hero {
    overflow: hidden;
}

.reform-area-hero-header {
    align-items: center;
}

.area-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.9rem;
}

.area-summary-tile {
    padding: 1rem 1.1rem;
    border-radius: 18px;
    border: 1px solid rgba(31, 58, 95, 0.08);
    background:
        radial-gradient(circle at top right, rgba(46, 134, 171, 0.10), transparent 32%),
        rgba(255, 255, 255, 0.88);
    box-shadow: var(--shadow-sm);
}

.area-summary-label {
    display: block;
    color: var(--gray-500);
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-weight: 700;
}

.area-summary-value {
    display: block;
    margin-top: 0.45rem;
    color: var(--navy);
    font-family: var(--font-display);
    font-size: 1.9rem;
    line-height: 1;
}

.area-summary-note {
    display: block;
    margin-top: 0.45rem;
    color: var(--gray-500);
    font-size: 0.82rem;
}

.area-view-tabs {
    gap: 0.75rem;
}

.area-view-tabs .nav-link {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.75rem 1rem;
    border-radius: 999px;
    border: 1px solid rgba(31, 58, 95, 0.10);
    background: rgba(248, 250, 252, 0.96);
    color: var(--gray-700);
    font-weight: 700;
}

.area-view-tabs .nav-link:hover {
    color: var(--navy);
    background: rgba(46, 134, 171, 0.08);
    border-color: rgba(46, 134, 171, 0.22);
}

.area-view-tabs .nav-link.active {
    background: linear-gradient(135deg, var(--navy), var(--teal));
    color: var(--white);
    border-color: transparent;
    box-shadow: 0 14px 28px rgba(31, 58, 95, 0.18);
}

.area-layout-content > .tab-pane {
    animation: dashboardPaneFade 0.18s ease;
}

.area-card-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.area-performance-card {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.25rem;
    border-radius: 22px;
    border: 1px solid rgba(31, 58, 95, 0.08);
    background:
        radial-gradient(circle at top right, rgba(46, 134, 171, 0.08), transparent 30%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 251, 254, 0.96));
    box-shadow: var(--shadow-sm);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.area-performance-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
    border-color: rgba(46, 134, 171, 0.16);
}

.area-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.area-card-title {
    display: inline-block;
    color: var(--navy);
    font-size: 1.08rem;
    font-weight: 700;
    margin-bottom: 0.35rem;
}

.area-card-copy {
    color: var(--gray-700);
    max-width: 58ch;
}

.area-card-grouping {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.area-card-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
}

.area-stat-tile {
    padding: 0.85rem 0.9rem;
    border-radius: 16px;
    border: 1px solid rgba(31, 58, 95, 0.08);
    background: rgba(255, 255, 255, 0.78);
}

.area-stat-label {
    display: block;
    color: var(--gray-500);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-weight: 700;
}

.area-stat-value {
    display: block;
    margin-top: 0.35rem;
    color: var(--navy);
    font-size: 1.1rem;
    font-weight: 700;
}

.area-card-score-mix,
.area-card-progress {
    padding: 0.95rem 1rem;
    border-radius: 18px;
    border: 1px solid rgba(31, 58, 95, 0.08);
    background: rgba(248, 250, 252, 0.88);
}

.area-progress-value {
    color: var(--navy);
    font-weight: 700;
}

.area-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.9rem;
    margin-top: auto;
}

.area-table-copy {
    color: var(--gray-500);
    font-size: 0.83rem;
    max-width: 34ch;
}

/* RAG doughnut centre text */
.doughnut-centre {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    pointer-events: none;
}

.rag-legend {
    display: grid;
    gap: 0.65rem;
}

.rag-legend-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.7rem 0.9rem;
    border: 1px solid rgba(31, 58, 95, 0.08);
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(248, 249, 250, 0.92), rgba(255, 255, 255, 0.98));
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.rag-legend-item:hover {
    transform: translateX(3px);
    box-shadow: 0 10px 20px rgba(20, 36, 56, 0.06);
}

.rag-legend-label {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    font-weight: 700;
}

.rag-legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 999px;
}

.rag-legend-value {
    color: var(--gray-700);
    font-size: 0.88rem;
    font-family: var(--font-display);
}

/* Dashboard empty states */
.empty-state {
    text-align: center;
    color: var(--gray-700);
}

.empty-state .empty-icon {
    width: 3.75rem;
    height: 3.75rem;
    border-radius: 999px;
    margin: 0 auto 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--gray-100);
    color: var(--gray-500);
    font-size: 1.5rem;
}

.working-group-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Reports page */
.export-card {
    height: 100%;
    background:
        radial-gradient(circle at top right, rgba(46, 134, 171, 0.1), transparent 24%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 251, 254, 0.96));
    border: 1px solid rgba(31, 58, 95, 0.08);
    border-top: 4px solid rgba(46, 134, 171, 0.9);
    border-radius: 22px;
    box-shadow: var(--shadow-sm);
    padding: 1.45rem;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.export-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: rgba(46, 134, 171, 0.18);
}

.export-card .export-icon {
    width: 3.4rem;
    height: 3.4rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
    font-size: 1.7rem;
    color: var(--navy);
    background: rgba(31, 58, 95, 0.08);
    margin-bottom: 1rem;
}

.scope-metric-tile {
    height: 100%;
    border: 1px solid rgba(31, 58, 95, 0.08);
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(244, 248, 252, 0.95));
    padding: 1.15rem 1.2rem;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.scope-metric-tile .count {
    font-size: 32px;
    line-height: 1;
    font-weight: 700;
    font-family: var(--font-display);
    color: var(--navy);
    margin-bottom: 0.45rem;
}

.scope-metric-tile .label {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--gray-500);
    font-weight: 700;
}

.wg-export-btn {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.btn-download.loading {
    opacity: 0.72;
    cursor: not-allowed;
    pointer-events: none;
    filter: saturate(0.85);
}

.btn-download.loading .spinner-border {
    animation: spinner-border 0.6s linear infinite;
}

#exportPreviewSpinner {
    color: var(--teal);
}

.export-builder-panel {
    margin-top: 0.75rem;
    padding: 1.25rem;
    border: 1px solid rgba(31, 58, 95, 0.08);
    border-radius: 20px;
    background:
        radial-gradient(circle at top right, rgba(46, 134, 171, 0.12), transparent 22%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(246, 250, 253, 0.95));
}

.export-builder-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.builder-title {
    font-family: var(--font-heading);
    color: var(--navy);
}

.export-builder-summary {
    display: inline-flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
}

.preset-chip-row {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.preset-chip {
    border: 1px solid rgba(31, 58, 95, 0.12);
    background: rgba(255, 255, 255, 0.85);
    color: var(--navy);
    border-radius: 999px;
    padding: 0.45rem 0.9rem;
    font-size: 0.82rem;
    font-weight: 700;
    transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.preset-chip:hover {
    transform: translateY(-1px);
    border-color: rgba(46, 134, 171, 0.35);
    box-shadow: 0 8px 18px rgba(31, 58, 95, 0.08);
}

.builder-section {
    height: 100%;
    border: 1px solid rgba(31, 58, 95, 0.08);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.72);
    padding: 1rem;
}

.builder-section-title {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--gray-500);
    font-weight: 800;
    margin-bottom: 0.85rem;
}

.field-picker-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 0.65rem;
}

.field-picker-card,
.sheet-choice-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.8rem 0.9rem;
    border: 1px solid rgba(31, 58, 95, 0.1);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.84);
    cursor: pointer;
    transition: transform 0.14s ease, border-color 0.14s ease, box-shadow 0.14s ease;
}

.field-picker-card:hover,
.sheet-choice-card:hover {
    transform: translateY(-1px);
    border-color: rgba(46, 134, 171, 0.36);
    box-shadow: 0 10px 24px rgba(31, 58, 95, 0.08);
}

.field-picker-card input[type="checkbox"],
.sheet-choice-card input[type="checkbox"] {
    width: 1rem;
    height: 1rem;
    accent-color: var(--teal);
    margin: 0;
}

.field-picker-content {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.field-picker-title,
.sheet-choice-title {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--navy);
    line-height: 1.25;
}

.sheet-choice-list {
    display: grid;
    gap: 0.65rem;
}

.sheet-choice-fixed {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.8rem 0.9rem;
    border-radius: 14px;
    border: 1px dashed rgba(31, 58, 95, 0.18);
    background: rgba(46, 134, 171, 0.05);
}

.sheet-choice-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.45rem 0.7rem;
    border-radius: 999px;
    background: rgba(31, 58, 95, 0.08);
    color: var(--navy);
    font-weight: 700;
    font-size: 0.82rem;
}

.sheet-choice-badge.is-fixed {
    background: rgba(46, 134, 171, 0.14);
    color: var(--teal-deep);
}

html[data-theme="dark"] .export-builder-panel,
body.dark-mode .export-builder-panel {
    background:
        radial-gradient(circle at top right, rgba(91, 184, 212, 0.12), transparent 24%),
        linear-gradient(180deg, rgba(22, 27, 37, 0.98), rgba(26, 34, 54, 0.95));
    border-color: #1E2D3D;
}

html[data-theme="dark"] .builder-section,
body.dark-mode .builder-section,
html[data-theme="dark"] .field-picker-card,
body.dark-mode .field-picker-card,
html[data-theme="dark"] .sheet-choice-card,
body.dark-mode .sheet-choice-card,
html[data-theme="dark"] .sheet-choice-fixed,
body.dark-mode .sheet-choice-fixed,
html[data-theme="dark"] .preset-chip,
body.dark-mode .preset-chip {
    background: #1A2236;
    border-color: #1E2D3D;
    color: #E2E4E9;
}

html[data-theme="dark"] .field-picker-title,
body.dark-mode .field-picker-title,
html[data-theme="dark"] .sheet-choice-title,
body.dark-mode .sheet-choice-title,
html[data-theme="dark"] .builder-title,
body.dark-mode .builder-title {
    color: #E2E4E9;
}

html[data-theme="dark"] .preset-chip:hover,
body.dark-mode .preset-chip:hover,
html[data-theme="dark"] .field-picker-card:hover,
body.dark-mode .field-picker-card:hover,
html[data-theme="dark"] .sheet-choice-card:hover,
body.dark-mode .sheet-choice-card:hover {
    border-color: rgba(91, 184, 212, 0.36);
    background: #1E2A3D;
}

/* Search bar in navbar */
.search-bar-wrap {
    width: min(100%, 320px);
}

.search-input-wrap {
    position: relative;
}

.search-input {
    min-height: 44px;
    border-radius: 999px;
    padding-left: 2.7rem;
    border: 1px solid rgba(31, 58, 95, 0.12);
    background: rgba(255, 255, 255, 0.92);
}

.search-input:focus {
    border-color: var(--teal);
    box-shadow: 0 0 0 0.2rem rgba(46, 134, 171, 0.14);
}

.search-icon {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--gray-500);
    pointer-events: none;
}

.search-results-dropdown {
    position: absolute;
    top: calc(100% + 0.5rem);
    left: 0;
    right: 0;
    background: var(--white);
    border: 1px solid rgba(31, 58, 95, 0.10);
    border-radius: 18px;
    box-shadow: var(--shadow-lg);
    padding: 0.45rem;
    z-index: 1000;
    display: none;
}

.search-results-dropdown.is-visible {
    display: block;
}

.search-result-item,
.search-result-empty {
    width: 100%;
    border: 0;
    background: transparent;
    text-align: left;
    border-radius: 14px;
    padding: 0.8rem 0.9rem;
}

.search-result-item:hover,
.search-result-item.is-active {
    background: rgba(46, 134, 171, 0.08);
}

.search-result-title {
    font-weight: 700;
    color: var(--navy);
}

.search-result-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-top: 0.35rem;
}

.search-result-empty {
    color: var(--gray-500);
}

/* Active filter chips */
.filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.5rem 0.8rem;
    border-radius: 999px;
    border: 1px solid rgba(31, 58, 95, 0.12);
    background: rgba(31, 58, 95, 0.06);
    color: var(--navy);
    font-size: 0.86rem;
    font-weight: 600;
    transition: var(--transition);
}

.filter-chip:hover {
    border-color: rgba(46, 134, 171, 0.4);
    background: rgba(46, 134, 171, 0.10);
}

.filter-chip-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.2rem;
    height: 1.2rem;
    border-radius: 999px;
    background: rgba(31, 58, 95, 0.10);
    font-size: 0.65rem;
}

/* Reform list card view */
.reform-view-section[hidden] { display: none !important; }

.reform-card {
    /* Keep the stretched title link inside its own card, not over page controls. */
    position: relative;
    isolation: isolate;
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-top: 3px solid transparent;
    border-radius: 20px;
    padding: 1.2rem;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition: box-shadow 200ms ease, border-top-color 200ms ease, transform 200ms ease;
}

.reform-card:hover {
    box-shadow: var(--shadow-lg);
    border-top-color: var(--navy);
    transform: translateY(-4px);
}

.reform-card-title {
    margin: 0;
    color: var(--navy);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.reform-card-subtitle {
    margin: 0.4rem 0 0;
    color: var(--gray-500);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.reform-card-meta {
    margin-top: 1rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    align-items: center;
}

.reform-card .rag-dot {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    display: inline-block;
}

.rag-dot.rag-green {
    background: var(--green);
}

.rag-dot.rag-amber {
    background: var(--amber);
}

.rag-dot.rag-red {
    background: var(--red);
}

.view-toggle .btn.active {
    background: var(--navy);
    border-color: var(--navy);
    color: var(--white);
}

.row-action-links {
    opacity: 0.2;
    transition: opacity 0.2s ease;
}

.reform-table-row:hover .row-action-links {
    opacity: 1;
}

/* Sidebar active state refinement */
.sidebar-nav .nav-item.active .nav-link {
    border-left-color: var(--teal);
    background: rgba(46, 134, 171, 0.16);
    color: var(--white);
    font-weight: 700;
}

/* Import page drop zone */
.file-drop-zone {
    border: 2px dashed rgba(46, 134, 171, 0.55);
    border-radius: 24px;
    padding: 3rem 1.5rem;
    text-align: center;
    cursor: pointer;
    transition: var(--transition);
    background: rgba(255, 255, 255, 0.8);
}

.file-drop-zone:hover {
    border-style: solid;
    background: rgba(46, 134, 171, 0.06);
}

.file-drop-zone.is-dragover {
    transform: scale(0.98);
    background: rgba(46, 134, 171, 0.12);
}

.file-drop-zone.has-file {
    border-style: solid;
    border-color: var(--teal);
    background: rgba(212, 237, 218, 0.45);
}

.file-drop-zone-icon {
    width: 4rem;
    height: 4rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(46, 134, 171, 0.10);
    color: var(--teal);
    font-size: 1.6rem;
    margin-bottom: 1rem;
}

.import-instructions-card {
    border-left: 5px solid var(--teal);
}

.import-checkbox-wrap {
    background: rgba(31, 58, 95, 0.04);
    border: 1px solid rgba(31, 58, 95, 0.08);
    border-radius: 16px;
    padding: 1rem 1.1rem;
}

.import-loading-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 27, 43, 0.68);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}

.import-loading-card {
    background: rgba(31, 58, 95, 0.95);
    color: var(--white);
    border-radius: 22px;
    padding: 2rem;
    text-align: center;
    width: min(100%, 420px);
    box-shadow: var(--shadow-lg);
}

/* Table improvements */
.table-hover tbody tr:hover td {
    background: rgba(46, 134, 171, 0.06);
    cursor: pointer;
}

thead.sticky-top th {
    background: var(--navy);
    color: var(--white);
    position: sticky;
    top: 0;
    z-index: 10;
}

.table-success-subtle td {
    background: rgba(212, 237, 218, 0.35);
}

@media (max-width: 991.98px) {
    .content-area {
        padding: 1.25rem;
    }

    .topbar {
        flex-wrap: wrap;
        height: auto;
        padding-top: 0.9rem;
        padding-bottom: 0.9rem;
    }

    .topbar-search {
        order: 3;
        width: 100%;
        justify-content: stretch;
    }

    .search-bar-wrap {
        width: 100%;
    }

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

    .field-grid.two-col,
    .field-grid.three-col,
    .field-grid.four-col {
        grid-template-columns: 1fr 1fr;
    }

    .form-hero {
        flex-direction: column;
    }

    .form-hero-stat,
    .progress-callout {
        width: 100%;
    }

    .dashboard-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .dashboard-hero-side,
    .dashboard-hero-orbs {
        width: 100%;
        justify-items: stretch;
    }

    .dashboard-hero-grid,
    .dashboard-spotlight-grid,
    .area-summary-grid,
    .area-card-stats {
        grid-template-columns: 1fr;
    }

    .dashboard-pulse-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dashboard-section-nav {
        position: static;
    }

    .dashboard-workspace-tabs {
        gap: 0.65rem;
    }

    .area-card-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767.98px) {
    .sidebar {
        transform: translateX(-100%);
    }

    .sidebar.open {
        transform: translateX(0);
    }

    .sidebar-overlay {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 950;
        background: rgba(0, 0, 0, 0.35);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s ease;
    }

    body.sidebar-open .sidebar-overlay {
        opacity: 1;
        pointer-events: auto;
    }

    .main-wrapper {
        margin-left: 0;
    }

    .hamburger {
        display: inline-flex;
    }

    .topbar {
        padding: 0 1rem;
    }

    .content-area {
        padding: 1rem;
    }

    .detail-meta-grid,
    .dual-progress-wrap,
    .field-grid.two-col,
    .field-grid.three-col,
    .field-grid.four-col,
    .metric-grid,
    .profile-meta-grid,
    .two-column-grid,
    .working-group-card-grid {
        grid-template-columns: 1fr;
    }

    .dashboard-pulse-strip,
    .dashboard-hero-orbs,
    .dashboard-hero-grid,
    .dashboard-spotlight-grid {
        grid-template-columns: 1fr;
    }

    .messages-container {
        right: 0.75rem;
        left: 0.75rem;
        bottom: 0.75rem;
    }

    .tracker-toast {
        width: 100%;
    }

    .auth-shell {
        grid-template-columns: 1fr;
    }

    .auth-brand-panel {
        display: none;
    }

    .auth-form-panel {
        padding: 1.5rem 1rem;
    }

    .form-card {
        padding: 1.2rem;
        border-radius: 18px;
    }

    .form-hero,
    .form-section,
    .form-action-bar {
        border-radius: 18px;
    }

    .tab-section-header,
    .profile-header,
    .form-action-bar {
        flex-direction: column;
        align-items: flex-start;
    }

    .progress-callout {
        align-items: flex-start;
    }

    .stale-item,
    .metric-card-head,
    .dashboard-header-meta {
        flex-direction: column;
        align-items: flex-start;
    }

    .dashboard-hero-actions,
    .hero-spectrum-head,
    .hero-spectrum-legend,
    .dashboard-section-nav,
    .dashboard-workspace-tabs,
    .area-view-tabs,
    .area-card-head,
    .area-card-footer,
    .reform-area-hero-header {
        flex-direction: column;
        align-items: stretch;
    }

    .dashboard-timestamp {
        width: 100%;
    }

    .chart-card-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .area-summary-grid,
    .area-card-stats {
        grid-template-columns: 1fr;
    }
}

/* Top Navigation Layout */
.app-shell {
    background:
        radial-gradient(circle at top left, rgba(46, 134, 171, 0.08), transparent 24%),
        linear-gradient(180deg, rgba(31, 58, 95, 0.03), transparent 30%);
}

.app-header {
    position: sticky;
    top: 0;
    z-index: 1100;
    background:
        linear-gradient(180deg, rgba(255, 252, 246, 0.94), rgba(255, 250, 240, 0.88));
    backdrop-filter: blur(18px);
    border-bottom: 1px solid rgba(199, 154, 44, 0.2);
    box-shadow: 0 18px 40px rgba(17, 37, 64, 0.08);
}

.app-header-main {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) minmax(220px, 300px) auto;
    grid-template-areas: "brand nav search tools";
    align-items: center;
    gap: 0.85rem;
    padding: 0.95rem 1.5rem;
}

.app-brand {
    grid-area: brand;
    display: flex;
    align-items: center;
    gap: 0.9rem;
    min-width: max-content;
    color: var(--navy);
    text-decoration: none;
}

.app-brand:hover {
    color: var(--navy);
}

.app-brand .brand-mark {
    background: linear-gradient(135deg, var(--gold-light), var(--gold));
    box-shadow: 0 12px 28px rgba(16, 46, 91, 0.18);
}

.app-brand .brand-title {
    color: var(--navy);
    font-size: 1.35rem;
}

.app-brand .brand-subtitle {
    color: var(--gray-500);
}

.app-header-search {
    grid-area: search;
    display: flex;
    justify-content: flex-end;
    min-width: 0;
}

.app-header-tools {
    grid-area: tools;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-left: 0;
}

.theme-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    min-height: 42px;
    padding: 0.55rem 0.9rem;
    border-radius: 999px;
    border: 1px solid rgba(31, 58, 95, 0.08);
    background: rgba(255, 255, 255, 0.88);
    color: var(--navy);
    box-shadow: 0 8px 18px rgba(17, 37, 64, 0.06);
    transition: var(--transition);
}

.theme-toggle-btn:hover {
    background: rgba(199, 154, 44, 0.1);
    color: var(--teal);
    border-color: rgba(199, 154, 44, 0.32);
    transform: translateY(-1px);
}

.theme-toggle-icon {
    font-size: 1rem;
}

.theme-toggle-label {
    font-weight: 700;
    white-space: nowrap;
}

.app-user-chip {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
    max-width: 320px;
    padding: 0.45rem 0.6rem;
    border-radius: 999px;
    border: 1px solid rgba(31, 58, 95, 0.08);
    background: rgba(255, 255, 255, 0.88);
    color: var(--gray-900);
    text-decoration: none;
    box-shadow: 0 8px 18px rgba(17, 37, 64, 0.06);
    transition: var(--transition);
}

.app-user-chip:hover {
    color: var(--navy);
    border-color: rgba(46, 134, 171, 0.28);
    background: rgba(46, 134, 171, 0.06);
    transform: translateY(-1px);
}

.app-user-chip .user-avatar {
    width: 2.4rem;
    height: 2.4rem;
    background: linear-gradient(135deg, var(--teal), var(--navy));
    box-shadow: 0 10px 20px rgba(46, 134, 171, 0.22);
}

.app-header .logout-btn {
    background: rgba(31, 58, 95, 0.08);
    color: var(--navy);
    border: 1px solid transparent;
}

.app-header .logout-btn:hover {
    background: rgba(46, 134, 171, 0.14);
    color: var(--teal);
}

.app-header-nav {
    grid-area: nav;
    min-width: 0;
}

.app-nav {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.55rem;
    flex-wrap: nowrap;
    overflow: visible;
}

.app-nav .nav-item {
    display: flex;
    flex: 0 0 auto;
    position: relative;
}

.app-nav .nav-link {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.68rem 0.9rem;
    margin: 0;
    border: 1px solid transparent;
    border-radius: 999px;
    background: rgba(31, 58, 95, 0.05);
    color: var(--navy);
    overflow: visible;
    transform: none;
    box-shadow: none;
    white-space: nowrap;
}

.app-nav .nav-link::after {
    display: none;
}

.app-nav .nav-link:hover,
.app-nav .nav-link.active,
.sidebar-nav .nav-item.active .nav-link {
    color: var(--navy);
    background: linear-gradient(135deg, rgba(46, 134, 171, 0.16), rgba(31, 58, 95, 0.08));
    border-color: rgba(46, 134, 171, 0.22);
    box-shadow: 0 10px 20px rgba(17, 37, 64, 0.08);
    transform: translateY(-1px);
}

.app-nav .nav-icon {
    color: var(--teal);
}

.nav-link-dropdown {
    justify-content: space-between;
    min-width: 154px;
}

.nav-link-dropdown.dropdown-toggle::after {
    display: inline-block;
    margin-left: 0.75rem;
    vertical-align: 0.05em;
    border-top-color: rgba(31, 58, 95, 0.6);
}

.app-nav-dropdown {
    min-width: 240px;
    margin-top: 0.6rem;
    padding: 0.35rem;
    border: 1px solid rgba(31, 58, 95, 0.1);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 14px 28px rgba(17, 37, 64, 0.12);
}

.app-nav-dropdown-admin {
    min-width: 260px;
}

.app-nav-subitem {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.72rem 0.82rem;
    border-radius: 10px;
    color: var(--navy);
    transition: background 0.18s ease, color 0.18s ease;
}

.app-nav-subitem:hover,
.app-nav-subitem:focus,
.app-nav-subitem.active {
    color: var(--navy);
    background: rgba(46, 134, 171, 0.1);
}

.app-nav-subitem .nav-icon {
    margin-top: 0;
}

.app-nav-subtitle {
    font-weight: 700;
    color: var(--navy);
    font-size: 0.88rem;
}

.app-nav-subitem small {
    display: block;
    margin-top: 0.14rem;
    color: var(--gray-500);
    white-space: normal;
    font-size: 0.74rem;
    line-height: 1.4;
}

.main-wrapper {
    margin-left: 0;
    min-height: calc(100vh - 90px);
}

.topbar {
    position: relative;
    top: auto;
    height: auto;
    padding: 1.35rem 1.75rem 0.6rem;
    background: transparent;
    backdrop-filter: none;
    border-bottom: 0;
    box-shadow: none;
}

.topbar-left {
    min-width: 0;
}

.topbar-actions {
    margin-left: auto;
}

.content-area {
    padding-top: 0.9rem;
}

.search-bar-wrap {
    width: min(100%, 300px);
}

@media (max-width: 1420px) {
    .app-brand .brand-subtitle {
        display: none;
    }

    .app-user-chip {
        max-width: 240px;
    }

    .search-bar-wrap {
        width: min(100%, 260px);
    }
}

@media (max-width: 1480px) {
    .app-header-main {
        grid-template-columns: auto minmax(0, 1fr) auto;
        grid-template-areas:
            "brand nav tools"
            "search search search";
        align-items: start;
        row-gap: 0.75rem;
    }

    .app-header-nav {
        align-self: stretch;
    }

    .app-nav {
        flex-wrap: wrap;
        row-gap: 0.5rem;
    }

    .app-nav .nav-link {
        padding: 0.62rem 0.82rem;
    }

    .nav-link-dropdown {
        min-width: 144px;
    }

    .app-header-search {
        justify-content: flex-start;
    }

    .app-header-search .search-bar-wrap {
        width: min(100%, 460px);
    }
}

@media (max-width: 1199.98px) {
    .app-header-main {
        display: flex;
        flex-wrap: wrap;
    }

    .app-header-search {
        order: 3;
        width: 100%;
        justify-content: stretch;
    }

    .app-header-search .search-bar-wrap {
        width: 100%;
    }

    .app-header-nav {
        display: none;
        position: absolute;
        left: 1.25rem;
        right: 1.25rem;
        top: calc(100% + 0.35rem);
        padding: 0.9rem;
        border-radius: 22px;
        border: 1px solid rgba(31, 58, 95, 0.10);
        background: rgba(255, 255, 255, 0.98);
        box-shadow: 0 22px 44px rgba(17, 37, 64, 0.14);
        z-index: 1200;
    }

    .app-header-nav.open {
        display: block;
    }

    .app-nav {
        flex-direction: column;
        gap: 0.85rem;
        overflow: visible;
    }

    .app-nav .nav-item,
    .app-nav .nav-item.dropdown {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: stretch;
    }

    .app-nav .nav-link,
    .nav-link-dropdown {
        width: 100%;
        justify-content: space-between;
        border-radius: 18px;
        flex: 0 0 auto;
    }

    .app-nav-dropdown,
    .app-nav-dropdown-admin {
        position: static !important;
        inset: auto !important;
        transform: none !important;
        width: 100%;
        min-width: 0;
        margin-top: 0.55rem;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65);
        border-radius: 18px;
        background: rgba(255, 255, 255, 0.92);
    }
}

@media (max-width: 767.98px) {
    .app-header-main {
        padding: 0.9rem 1rem 0.8rem;
    }

    .app-brand {
        min-width: 0;
    }

    .app-brand .brand-subtitle {
        display: none;
    }

    .app-header-tools {
        gap: 0.5rem;
    }

    .app-user-chip {
        padding: 0.35rem;
        max-width: none;
    }

    .app-user-chip .user-info {
        display: none;
    }

    .theme-toggle-btn {
        min-width: 42px;
        justify-content: center;
        padding-inline: 0.7rem;
    }

    .theme-toggle-label {
        display: none;
    }

    .hamburger {
        display: inline-flex;
    }

    .app-header-nav {
        left: 1rem;
        right: 1rem;
    }

    .sidebar-overlay {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 1050;
        background: rgba(16, 27, 42, 0.32);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.22s ease;
    }

    body.sidebar-open .sidebar-overlay {
        opacity: 1;
        pointer-events: auto;
    }

    .topbar {
        padding: 1rem 1rem 0.45rem;
    }

    .topbar-actions {
        width: 100%;
        margin-left: 0;
    }
}

/* Due date awareness */
.due-date-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.38rem 0.65rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    border: 1px solid transparent;
}

.due-date-overdue,
.due-date-due_today {
    background: #f8d7da;
    color: #721c24;
    border-color: #f5b8bc;
}

.due-date-urgent {
    background: #ffe5d0;
    color: #c45000;
    border-color: #ffcba4;
}

.due-date-warning,
.due-date-approaching {
    background: #fff3cd;
    color: #9a6700;
    border-color: #ffeaa0;
}

.due-date-on_schedule,
.due-date-completed {
    background: #d4edda;
    color: #1a7a4a;
    border-color: #a3d9b5;
}

.due-date-no_date {
    background: #e2e3e5;
    color: #495057;
    border-color: #d6d8db;
}

.due-pulse-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 999px;
    background: currentColor;
    display: inline-block;
    animation: duePulse 1.4s ease-in-out infinite;
}

@keyframes duePulse {
    0% { transform: scale(0.8); opacity: 0.7; }
    50% { transform: scale(1.2); opacity: 1; }
    100% { transform: scale(0.8); opacity: 0.7; }
}

.due-date-alert-banner {
    border: 1px solid transparent;
    border-radius: var(--radius);
    padding: 0.9rem 1rem;
}

.due-date-alert-icon {
    font-size: 16px;
}

.due-date-alert-title {
    color: currentColor;
}

.due-date-alert-copy {
    color: currentColor;
    opacity: 0.85;
    margin-left: 8px;
}

.due-date-alert-owner {
    color: currentColor;
    opacity: 0.75;
    font-size: 12px;
}

.due-date-banner-overdue,
.due-date-banner-due_today {
    background: #fff5f5;
    color: #721c24;
    border-color: #f5b8bc;
}

.due-date-banner-urgent {
    background: #fff6ef;
    color: #c45000;
    border-color: #ffcba4;
}

.due-date-banner-warning,
.due-date-banner-approaching {
    background: #fffdf0;
    color: #9a6700;
    border-color: #ffeaa0;
}

.milestone-due-summary {
    margin-top: 0.25rem;
}

.due-summary-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.7rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 700;
    border: 1px solid transparent;
}

.chip-overdue,
.chip-due-today {
    background: #f8d7da;
    color: #721c24;
    border-color: #f5b8bc;
}

.chip-urgent {
    background: #ffe5d0;
    color: #c45000;
    border-color: #ffcba4;
}

.chip-warning,
.chip-approaching {
    background: #fff3cd;
    color: #9a6700;
    border-color: #ffeaa0;
}

.chip-on-track {
    background: #d4edda;
    color: #1a7a4a;
    border-color: #a3d9b5;
}

.milestone-row-overdue td {
    background: rgba(220, 53, 69, 0.07);
}

.milestone-row-urgent td {
    background: rgba(255, 193, 7, 0.08);
}

.milestone-row-warning td {
    background: rgba(255, 243, 205, 0.8);
}

.milestone-row-approaching td {
    background: rgba(255, 248, 227, 0.85);
}

/* Notification dropdown */
.notification-badge-count {
    position: absolute;
    top: -0.2rem;
    right: -0.2rem;
    min-width: 1.15rem;
    height: 1.15rem;
    border-radius: 999px;
    background: var(--red);
    color: var(--white);
    font-size: 0.68rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--white);
}

.notification-dropdown {
    width: min(420px, calc(100vw - 2rem));
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    overflow: hidden;
}

.notification-dropdown-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.9rem 1rem;
    border-bottom: 1px solid var(--gray-200);
    background: var(--gray-50);
}

.notification-dropdown-list {
    max-height: 420px;
    overflow-y: auto;
}

.notification-item {
    display: block;
    padding: 0.9rem 1rem;
    border-bottom: 1px solid var(--gray-100);
    white-space: normal;
}

.notification-item:hover,
.notification-item:focus {
    background: rgba(46, 134, 171, 0.06);
}

.notification-item-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.25rem;
}

.notification-empty-state {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    color: var(--gray-500);
    padding: 1.2rem 1rem;
}

html[data-theme="dark"] {
    color-scheme: dark;
    --gray-50: #0e1624;
    --gray-100: #152033;
    --gray-200: #23324a;
    --gray-500: #94a3b8;
    --gray-700: #d8e1ee;
    --gray-900: #f5f7fb;
    --shadow-sm: 0 1px 3px rgba(2, 6, 23, 0.35);
    --shadow-md: 0 10px 24px rgba(2, 6, 23, 0.34);
    --shadow-lg: 0 22px 44px rgba(2, 6, 23, 0.42);
    --surface-base: rgba(19, 32, 51, 0.96);
    --surface-soft: rgba(14, 24, 39, 0.95);
    --surface-strong: rgba(24, 38, 59, 0.92);
    --border-subtle: rgba(148, 163, 184, 0.16);
    --chart-text: #e6edf7;
    --chart-muted: #94a3b8;
    --chart-grid: rgba(148, 163, 184, 0.14);
    --chart-tooltip-bg: #101a2a;
    --chart-tooltip-border: rgba(148, 163, 184, 0.18);
    --chart-tooltip-text: #f5f7fb;
    --chart-centre-primary: #f5f7fb;
    --chart-centre-secondary: #94a3b8;
}

html[data-theme="dark"] body {
    background:
        radial-gradient(circle at top right, rgba(46, 134, 171, 0.18), transparent 28%),
        radial-gradient(circle at bottom left, rgba(31, 58, 95, 0.22), transparent 26%),
        linear-gradient(180deg, #08111d 0%, #0d1726 100%);
    color: var(--gray-900);
}

html[data-theme="dark"] ::selection {
    background: rgba(58, 158, 196, 0.28);
}

html[data-theme="dark"] ::-webkit-scrollbar-track {
    background: #0f1828;
}

html[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.28);
}

html[data-theme="dark"] .app-shell {
    background:
        radial-gradient(circle at top left, rgba(46, 134, 171, 0.14), transparent 24%),
        linear-gradient(180deg, rgba(31, 58, 95, 0.08), transparent 30%);
}

html[data-theme="dark"] .app-header {
    background: rgba(9, 16, 27, 0.88);
    border-bottom-color: var(--border-subtle);
    box-shadow: 0 18px 40px rgba(2, 6, 23, 0.35);
}

html[data-theme="dark"] .app-brand,
html[data-theme="dark"] .app-brand:hover,
html[data-theme="dark"] .brand-title,
html[data-theme="dark"] .page-title,
html[data-theme="dark"] .section-title,
html[data-theme="dark"] .panel-title,
html[data-theme="dark"] .chart-title,
html[data-theme="dark"] .detail-title,
html[data-theme="dark"] .profile-name,
html[data-theme="dark"] .auth-title,
html[data-theme="dark"] .auth-brand-title,
html[data-theme="dark"] .reform-card-title,
html[data-theme="dark"] .app-nav-subtitle,
html[data-theme="dark"] .metric-value,
html[data-theme="dark"] .hero-orb-value,
html[data-theme="dark"] .dashboard-pulse-value,
html[data-theme="dark"] .dashboard-spotlight-value {
    color: var(--gray-900);
}

html[data-theme="dark"] .brand-subtitle,
html[data-theme="dark"] .page-kicker,
html[data-theme="dark"] .metric-label,
html[data-theme="dark"] .chart-kicker,
html[data-theme="dark"] .panel-subtitle,
html[data-theme="dark"] .metric-detail,
html[data-theme="dark"] .lead-copy,
html[data-theme="dark"] .text-muted,
html[data-theme="dark"] .search-icon,
html[data-theme="dark"] .profile-email,
html[data-theme="dark"] .detail-meta-label,
html[data-theme="dark"] .profile-meta-label,
html[data-theme="dark"] .metric-inline-note,
html[data-theme="dark"] .dashboard-pulse-label,
html[data-theme="dark"] .hero-orb-label,
html[data-theme="dark"] .hero-spectrum-subtitle,
html[data-theme="dark"] .hero-spectrum-title,
html[data-theme="dark"] .dashboard-spotlight-kicker,
html[data-theme="dark"] .app-nav-subitem small,
html[data-theme="dark"] .reform-card-subtitle,
html[data-theme="dark"] .dashboard-timestamp,
html[data-theme="dark"] .notification-dropdown-header .text-muted {
    color: var(--gray-500) !important;
}

html[data-theme="dark"] .app-user-chip,
html[data-theme="dark"] .theme-toggle-btn,
html[data-theme="dark"] .app-header .logout-btn,
html[data-theme="dark"] .search-input,
html[data-theme="dark"] .search-results-dropdown,
html[data-theme="dark"] .dropdown-menu,
html[data-theme="dark"] .app-nav-dropdown,
html[data-theme="dark"] .notification-dropdown,
html[data-theme="dark"] .dashboard-header,
html[data-theme="dark"] .hero-spectrum,
html[data-theme="dark"] .hero-orb-card,
html[data-theme="dark"] .dashboard-hero-mini-stat,
html[data-theme="dark"] .dashboard-pulse-pill,
html[data-theme="dark"] .dashboard-section-nav,
html[data-theme="dark"] .dashboard-spotlight-card,
html[data-theme="dark"] .metric-card,
html[data-theme="dark"] .chart-card,
html[data-theme="dark"] .card-panel,
html[data-theme="dark"] .attention-panel,
html[data-theme="dark"] .export-card,
html[data-theme="dark"] .scope-metric-tile,
html[data-theme="dark"] .stale-item,
html[data-theme="dark"] .rag-legend-item,
html[data-theme="dark"] .reform-card,
html[data-theme="dark"] .form-card,
html[data-theme="dark"] .detail-hero,
html[data-theme="dark"] .profile-card,
html[data-theme="dark"] .error-card,
html[data-theme="dark"] .card-metric,
html[data-theme="dark"] .form-section,
html[data-theme="dark"] .tracker-toast,
html[data-theme="dark"] .modal-content,
html[data-theme="dark"] .profile-meta-item,
html[data-theme="dark"] .risk-live-score,
html[data-theme="dark"] .risk-choice-pill,
html[data-theme="dark"] .stat-list-item,
html[data-theme="dark"] .import-checkbox-wrap,
html[data-theme="dark"] .file-drop-zone,
html[data-theme="dark"] .chart-error,
html[data-theme="dark"] .auth-form-panel,
html[data-theme="dark"] .standalone-error-card,
html[data-theme="dark"] .field-shell,
html[data-theme="dark"] .auth-input-shell {
    background: linear-gradient(180deg, rgba(19, 32, 51, 0.98), rgba(13, 23, 38, 0.96)) !important;
    border-color: var(--border-subtle) !important;
    color: var(--gray-900);
}

html[data-theme="dark"] .dashboard-header {
    background:
        radial-gradient(circle at top right, rgba(46, 134, 171, 0.20), transparent 34%),
        linear-gradient(135deg, rgba(31, 58, 95, 0.28), rgba(46, 134, 171, 0.12));
}

html[data-theme="dark"] .dashboard-workspace-tabs {
    border-bottom-color: var(--border-subtle);
}

html[data-theme="dark"] .dashboard-workspace-tabs .nav-link {
    background: rgba(19, 32, 51, 0.92);
    border-color: var(--border-subtle);
    color: #c7d3df;
}

html[data-theme="dark"] .dashboard-workspace-tabs .nav-link:hover {
    background: rgba(46, 134, 171, 0.14);
    border-color: rgba(91, 184, 212, 0.30);
    color: #eef5fb;
}

html[data-theme="dark"] .dashboard-workspace-tabs .nav-link.active {
    color: var(--white);
    box-shadow: 0 16px 30px rgba(3, 10, 18, 0.35);
}

html[data-theme="dark"] .dashboard-tab-count {
    background: rgba(255, 255, 255, 0.08);
    color: currentColor;
}

html[data-theme="dark"] .dashboard-tab-count.is-alert {
    background: rgba(192, 57, 43, 0.18);
    color: #ffb7b1;
}

html[data-theme="dark"] .dashboard-workspace-tabs .nav-link.active .dashboard-tab-count {
    background: rgba(255, 255, 255, 0.18);
    color: var(--white);
}

html[data-theme="dark"] .dashboard-inline-count {
    background: rgba(19, 32, 51, 0.92);
    border-color: var(--border-subtle);
    color: #eef5fb;
}

html[data-theme="dark"] .dashboard-summary-item {
    background: linear-gradient(180deg, rgba(19, 32, 51, 0.98), rgba(13, 23, 38, 0.96));
    border-color: var(--border-subtle);
}

html[data-theme="dark"] .dashboard-summary-label {
    color: var(--gray-500);
}

html[data-theme="dark"] .dashboard-summary-value {
    color: #f4f7fb;
}

html[data-theme="dark"] .area-summary-tile,
html[data-theme="dark"] .area-performance-card,
html[data-theme="dark"] .area-stat-tile,
html[data-theme="dark"] .area-card-score-mix,
html[data-theme="dark"] .area-card-progress {
    background: linear-gradient(180deg, rgba(19, 32, 51, 0.98), rgba(13, 23, 38, 0.96));
    border-color: var(--border-subtle);
}

html[data-theme="dark"] .area-view-tabs .nav-link {
    background: rgba(19, 32, 51, 0.92);
    border-color: var(--border-subtle);
    color: #c7d3df;
}

html[data-theme="dark"] .area-view-tabs .nav-link:hover {
    background: rgba(46, 134, 171, 0.14);
    border-color: rgba(91, 184, 212, 0.30);
    color: #eef5fb;
}

html[data-theme="dark"] .area-view-tabs .nav-link.active {
    color: var(--white);
    box-shadow: 0 16px 30px rgba(3, 10, 18, 0.35);
}

html[data-theme="dark"] .area-summary-label,
html[data-theme="dark"] .area-summary-note,
html[data-theme="dark"] .area-stat-label,
html[data-theme="dark"] .area-table-copy {
    color: var(--gray-500);
}

html[data-theme="dark"] .area-summary-value,
html[data-theme="dark"] .area-stat-value,
html[data-theme="dark"] .area-progress-value,
html[data-theme="dark"] .area-card-title {
    color: #f4f7fb;
}

html[data-theme="dark"] .area-card-copy {
    color: #c7d3df;
}

html[data-theme="dark"] .dashboard-header::before {
    opacity: 0.18;
}

html[data-theme="dark"] .metric-card .metric-icon,
html[data-theme="dark"] .dashboard-pulse-icon {
    background: rgba(255, 255, 255, 0.04);
    border-color: var(--border-subtle);
}

html[data-theme="dark"] .dashboard-timestamp,
html[data-theme="dark"] .dashboard-hero-action {
    background: rgba(16, 26, 42, 0.72);
    border-color: var(--border-subtle);
    color: var(--gray-900);
}

html[data-theme="dark"] .dashboard-hero-action:hover,
html[data-theme="dark"] .theme-toggle-btn:hover,
html[data-theme="dark"] .app-user-chip:hover,
html[data-theme="dark"] .app-header .logout-btn:hover {
    background: rgba(46, 134, 171, 0.14);
}

html[data-theme="dark"] .escalation-banner {
    background: linear-gradient(180deg, rgba(45, 16, 16, 0.98), rgba(32, 12, 12, 0.96));
    border-color: #7A1F1F;
    color: #FFB3B3;
    box-shadow: 0 16px 34px rgba(18, 5, 5, 0.24);
}

html[data-theme="dark"] .escalation-icon {
    background: rgba(255, 155, 155, 0.14);
    color: #FFB3B3;
}

html[data-theme="dark"] .due-date-overdue,
html[data-theme="dark"] .due-date-due_today {
    background: #2D1010;
    color: #F6A2A2;
    border-color: #7A1F1F;
}

html[data-theme="dark"] .due-date-urgent {
    background: #2D1A0A;
    color: #F4A261;
    border-color: #7A3D0A;
}

html[data-theme="dark"] .due-date-warning,
html[data-theme="dark"] .due-date-approaching {
    background: #2D2210;
    color: #F4C842;
    border-color: #5C440F;
}

html[data-theme="dark"] .due-date-on_schedule,
html[data-theme="dark"] .due-date-completed {
    background: #1A3D28;
    color: #6DD49A;
    border-color: #2D6B43;
}

html[data-theme="dark"] .due-date-no_date {
    background: #1E2A3D;
    color: #B0C4D8;
    border-color: #2E3D52;
}

html[data-theme="dark"] .due-date-banner-overdue,
html[data-theme="dark"] .due-date-banner-due_today {
    background: #2D1010;
    color: #F6A2A2;
    border-color: #7A1F1F;
}

html[data-theme="dark"] .due-date-banner-urgent {
    background: #2D1A0A;
    color: #F4A261;
    border-color: #7A3D0A;
}

html[data-theme="dark"] .due-date-banner-warning,
html[data-theme="dark"] .due-date-banner-approaching {
    background: #2D2210;
    color: #F4C842;
    border-color: #5C440F;
}

html[data-theme="dark"] .chip-overdue,
html[data-theme="dark"] .chip-due-today {
    background: #2D1010;
    color: #F6A2A2;
    border-color: #7A1F1F;
}

html[data-theme="dark"] .chip-urgent {
    background: #2D1A0A;
    color: #F4A261;
    border-color: #7A3D0A;
}

html[data-theme="dark"] .chip-warning,
html[data-theme="dark"] .chip-approaching {
    background: #2D2210;
    color: #F4C842;
    border-color: #5C440F;
}

html[data-theme="dark"] .chip-on-track {
    background: #1A3D28;
    color: #6DD49A;
    border-color: #2D6B43;
}

html[data-theme="dark"] .app-nav .nav-link {
    background: rgba(255, 255, 255, 0.04);
    color: var(--gray-900);
}

html[data-theme="dark"] .app-nav .nav-link:hover,
html[data-theme="dark"] .app-nav .nav-link.active,
html[data-theme="dark"] .sidebar-nav .nav-item.active .nav-link {
    color: var(--gray-900);
    background: linear-gradient(135deg, rgba(46, 134, 171, 0.22), rgba(31, 58, 95, 0.18));
    border-color: rgba(46, 134, 171, 0.28);
}

html[data-theme="dark"] .btn-outline-primary,
html[data-theme="dark"] .btn-outline-secondary,
html[data-theme="dark"] .btn-outline-danger,
html[data-theme="dark"] .btn-ghost {
    background: rgba(255, 255, 255, 0.03);
}

html[data-theme="dark"] .btn-outline-primary {
    color: #9BDCF0;
    border-color: rgba(91, 184, 212, 0.38);
}

html[data-theme="dark"] .btn-outline-primary:hover,
html[data-theme="dark"] .btn-outline-primary:focus {
    background: rgba(46, 134, 171, 0.16);
    border-color: rgba(91, 184, 212, 0.52);
    color: #EEF8FC;
}

html[data-theme="dark"] .btn-outline-secondary {
    color: #D7E4F0;
    border-color: rgba(176, 196, 216, 0.24);
}

html[data-theme="dark"] .btn-outline-secondary:hover,
html[data-theme="dark"] .btn-outline-secondary:focus {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(176, 196, 216, 0.38);
    color: #F4F8FC;
}

html[data-theme="dark"] .btn-outline-danger {
    color: #FFB9B4;
    border-color: rgba(255, 155, 155, 0.32);
}

html[data-theme="dark"] .btn-outline-danger:hover,
html[data-theme="dark"] .btn-outline-danger:focus {
    background: rgba(192, 57, 43, 0.18);
    border-color: rgba(255, 155, 155, 0.44);
    color: #FFE4E1;
}

html[data-theme="dark"] .btn-ghost {
    color: #D7E4F0;
}

html[data-theme="dark"] .btn-ghost:hover,
html[data-theme="dark"] .btn-ghost:focus {
    background: rgba(255, 255, 255, 0.08);
    color: #F4F8FC;
}

html[data-theme="dark"] .search-input,
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select,
html[data-theme="dark"] .form-control:disabled,
html[data-theme="dark"] .form-select:disabled {
    background: rgba(11, 19, 32, 0.92);
    color: var(--gray-900);
    border-color: var(--border-subtle);
}

html[data-theme="dark"] .form-control::placeholder,
html[data-theme="dark"] textarea::placeholder,
html[data-theme="dark"] .search-input::placeholder {
    color: #7f90a8;
}

html[data-theme="dark"] .table-tracker thead th,
html[data-theme="dark"] thead.sticky-top th {
    background: #152033;
    color: var(--gray-900);
    border-bottom-color: var(--border-subtle);
}

html[data-theme="dark"] .table-tracker tbody td {
    border-bottom-color: rgba(148, 163, 184, 0.10);
    color: var(--gray-700);
}

html[data-theme="dark"] .table-tracker tbody tr:hover,
html[data-theme="dark"] .table-hover tbody tr:hover td {
    background: rgba(46, 134, 171, 0.10);
}

html[data-theme="dark"] .dropdown-item,
html[data-theme="dark"] .notification-item {
    color: var(--gray-700);
}

html[data-theme="dark"] .dropdown-item:hover,
html[data-theme="dark"] .dropdown-item:focus,
html[data-theme="dark"] .notification-item:hover,
html[data-theme="dark"] .notification-item:focus,
html[data-theme="dark"] .search-result-item:hover,
html[data-theme="dark"] .search-result-item.is-active {
    background: rgba(46, 134, 171, 0.12);
    color: var(--gray-900);
}

html[data-theme="dark"] .empty-state .empty-icon,
html[data-theme="dark"] .notification-empty-state,
html[data-theme="dark"] .search-result-empty {
    background: rgba(255, 255, 255, 0.04);
    color: var(--gray-500);
}

html[data-theme="dark"] .tracker-progress,
html[data-theme="dark"] .progress,
html[data-theme="dark"] .metric-spark,
html[data-theme="dark"] .hero-spectrum-track {
    background: rgba(255, 255, 255, 0.08);
}

html[data-theme="dark"] .btn-light {
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--border-subtle);
    color: var(--gray-900);
}

html[data-theme="dark"] .btn-light:hover {
    background: rgba(46, 134, 171, 0.12);
    border-color: rgba(46, 134, 171, 0.28);
    color: var(--gray-900);
}

html[data-theme="dark"] .btn-close {
    filter: invert(1) grayscale(1);
}

html[data-theme="dark"] .modal-header,
html[data-theme="dark"] .modal-footer,
html[data-theme="dark"] .accordion-item,
html[data-theme="dark"] .accordion-button,
html[data-theme="dark"] .tracker-accordion .accordion-button,
html[data-theme="dark"] .tracker-accordion .accordion-item,
html[data-theme="dark"] .tracker-tabs,
html[data-theme="dark"] .nav-tabs,
html[data-theme="dark"] .breadcrumb-tracker,
html[data-theme="dark"] hr {
    border-color: var(--border-subtle) !important;
}

html[data-theme="dark"] .accordion-button,
html[data-theme="dark"] .tracker-accordion .accordion-button,
html[data-theme="dark"] .tracker-tabs .nav-link,
html[data-theme="dark"] .attention-tabs .nav-link {
    background: transparent;
    color: var(--gray-700);
}

html[data-theme="dark"] .accordion-button:not(.collapsed),
html[data-theme="dark"] .tracker-accordion .accordion-button:not(.collapsed),
html[data-theme="dark"] .tracker-tabs .nav-link.active,
html[data-theme="dark"] .tracker-tabs .nav-link:hover,
html[data-theme="dark"] .attention-tabs .nav-link.active,
html[data-theme="dark"] .attention-tabs .nav-link:hover {
    color: #7dcbe6;
    background: rgba(46, 134, 171, 0.10);
}

html[data-theme="dark"] .auth-page {
    background: linear-gradient(180deg, #08111d, #0d1726);
}

html[data-theme="dark"] .auth-form-panel {
    background:
        radial-gradient(circle at top left, rgba(46, 134, 171, 0.14), transparent 28%),
        linear-gradient(180deg, rgba(11, 19, 32, 0.96), rgba(8, 17, 29, 0.98));
}

html[data-theme="dark"] .auth-toolbar-pill,
html[data-theme="dark"] .auth-theme-toggle {
    background: rgba(19, 32, 51, 0.92);
    border-color: var(--border-subtle);
    color: #DCE6F2;
}

html[data-theme="dark"] .auth-card {
    background: linear-gradient(180deg, rgba(19, 32, 51, 0.98), rgba(13, 23, 38, 0.96));
    border-color: var(--border-subtle);
    box-shadow: 0 22px 48px rgba(2, 6, 23, 0.45);
}

html[data-theme="dark"] .auth-login-brand,
body.dark-mode .auth-login-brand {
    border-bottom-color: rgba(168, 212, 245, 0.1);
}

html[data-theme="dark"] .auth-login-brand-badge,
body.dark-mode .auth-login-brand-badge {
    background: linear-gradient(145deg, rgba(199, 154, 44, 0.12), rgba(91, 184, 212, 0.08));
    border-color: rgba(168, 212, 245, 0.1);
}

html[data-theme="dark"] .auth-login-brand-title,
body.dark-mode .auth-login-brand-title {
    color: #F4F7FB;
}

html[data-theme="dark"] .auth-login-brand-sub,
body.dark-mode .auth-login-brand-sub {
    color: #8FA1B6;
}

html[data-theme="dark"] .auth-signal {
    background: rgba(26, 122, 74, 0.18);
    border-color: rgba(109, 212, 154, 0.18);
    color: #6DD49A;
}

html[data-theme="dark"] .auth-signal-dot {
    box-shadow: 0 0 0 4px rgba(109, 212, 154, 0.10);
}

html[data-theme="dark"] .auth-input-icon {
    color: #7DCBE6;
}

html[data-theme="dark"] .auth-input-shell .form-control {
    color: #F4F7FB;
}

html[data-theme="dark"] .auth-input-shell .form-control::placeholder {
    color: #7F90A8;
}

html[data-theme="dark"] .password-toggle {
    background: rgba(46, 134, 171, 0.14);
    border-color: rgba(91, 184, 212, 0.20);
    color: #7DCBE6;
}

html[data-theme="dark"] .auth-footer-note,
html[data-theme="dark"] .auth-subtitle,
html[data-theme="dark"] .auth-error,
html[data-theme="dark"] .field-error,
html[data-theme="dark"] .error-copy,
html[data-theme="dark"] .auth-field-hint {
    color: var(--gray-500);
}

/* ── Status Score badge ──────────────────────────────────────────── */
.status-score-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    text-decoration: none;
}

.score-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}

.status-score-pill {
    display: inline-flex;
    align-items: center;
    gap: 0;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-decoration: none;
}

.score-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    font-size: 12px;
    font-weight: 700;
    color: white;
    flex-shrink: 0;
    margin: 2px;
}

.score-label {
    padding: 0 8px 0 4px;
    font-size: 12px;
}

.score-distribution-bar {
    display: flex;
    height: 10px;
    border-radius: 5px;
    overflow: hidden;
    gap: 2px;
    width: 100%;
}

.score-bar-segment {
    min-width: 4px;
    transition: opacity 0.2s;
    cursor: pointer;
}

.score-bar-segment:hover {
    opacity: 0.8;
}

.score-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.score-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    white-space: nowrap;
}

.score-card-stack {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.score-summary-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    border-radius: 8px;
    border-left: 4px solid;
    background: var(--white);
    border-top: 0.5px solid var(--gray-200);
    border-right: 0.5px solid var(--gray-200);
    border-bottom: 0.5px solid var(--gray-200);
    text-decoration: none;
    color: inherit;
    transition: background 0.15s, transform 0.1s;
    cursor: pointer;
}

.score-summary-card:hover {
    background: var(--gray-50);
    transform: translateX(2px);
    color: inherit;
    text-decoration: none;
}

.score-card-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.score-card-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    color: white;
    font-size: 14px;
    font-weight: 700;
    flex-shrink: 0;
}

.score-card-label {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
}

.score-card-desc {
    font-size: 11px;
    color: var(--gray-500);
    margin-top: 1px;
}

.score-card-count {
    font-size: 22px;
    font-weight: 700;
    min-width: 32px;
    text-align: right;
}

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

.chart-centre-number {
    font-size: 28px;
    font-weight: 700;
    color: var(--navy);
    line-height: 1;
    font-family: var(--font-heading);
}

.chart-centre-text {
    font-size: 11px;
    color: var(--gray-500);
    margin-top: 2px;
}

.score-auto-note {
    font-style: italic;
    font-size: 12px;
}

tr.score-row-1 { border-left: 3px solid #C0392B; }
tr.score-row-2 { border-left: 3px solid #E8600A; }
tr.score-row-3 { border-left: 3px solid #F4A61D; }
tr.score-row-4 { border-left: 3px solid #2E86AB; }
tr.score-row-5 { border-left: 3px solid #1A7A4A; }

/* ── Interactive score distribution bar ─────────────────────────── */
.score-distribution-bar {
    display: flex;
    height: 14px;
    border-radius: 7px;
    overflow: visible;
    gap: 2px;
    width: 100%;
    position: relative;
}

.score-seg {
    position: relative;
    min-width: 4%;
    height: 14px;
    border-radius: 4px;
    cursor: pointer;
    transition: filter 0.15s, transform 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
}

.score-seg:first-child { border-radius: 7px 4px 4px 7px; }
.score-seg:last-child { border-radius: 4px 7px 7px 4px; }
.score-seg:only-child { border-radius: 7px; }

.score-seg-count {
    font-size: 10px;
    font-weight: 700;
    color: #fff;
    opacity: 0;
    transition: opacity 0.15s;
    pointer-events: none;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
    white-space: nowrap;
    position: relative;
    z-index: 2;
}

.score-seg-tooltip {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: rgba(15, 17, 23, 0.92);
    color: #E2E4E9;
    font-size: 11px;
    font-weight: 500;
    padding: 5px 10px;
    border-radius: 6px;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s;
    z-index: 100;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.score-seg-tooltip::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: rgba(15, 17, 23, 0.92);
}

.score-seg:hover {
    filter: brightness(1.15);
    transform: scaleY(1.3);
    z-index: 10;
    border-radius: 4px;
}

.score-seg:hover .score-seg-count {
    opacity: 1;
}

.score-seg:hover .score-seg-tooltip {
    opacity: 1;
}

.score-bar-empty {
    display: inline-flex;
    align-items: center;
    min-height: 14px;
}

@media (prefers-reduced-motion: reduce) {
    .score-seg,
    .score-seg-count,
    .score-seg-tooltip {
        transition: none;
    }
}

/* ── Score mix pills ─────────────────────────────────────────────── */
.score-mix-pills {
    display: flex;
    gap: 4px;
    align-items: center;
    flex-wrap: nowrap;
}

.score-mix-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 26px;
    padding: 0 7px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 700;
    cursor: default;
    transition: transform 0.1s, filter 0.1s;
    position: relative;
}

.score-mix-pill:hover {
    transform: translateY(-2px);
    filter: brightness(0.95);
}

.score-mix-pill[data-count="0"] {
    opacity: 0.35;
    font-weight: 400;
}

body.dark-mode {}

/* ══════════════════════════════════════════════════════════════════
   DARK MODE — Full table and component overrides
   ══════════════════════════════════════════════════════════════════ */

@media (prefers-color-scheme: dark) {
    html:not(.light-mode) body {
        background-color: #0F1117;
        color: #E2E4E9;
    }

    html:not(.light-mode) .sidebar,
    html:not(.light-mode) .app-header-nav {
        background-color: #0D1B2A !important;
        border-right: 1px solid #1E2D3D;
    }

    html:not(.light-mode) .sidebar .nav-link,
    html:not(.light-mode) .app-nav .nav-link,
    html:not(.light-mode) .app-nav-subitem {
        color: #A8B8C8 !important;
    }

    html:not(.light-mode) .sidebar .nav-link:hover,
    html:not(.light-mode) .sidebar .nav-item.active .nav-link,
    html:not(.light-mode) .app-nav .nav-link:hover,
    html:not(.light-mode) .app-nav .nav-item.active .nav-link {
        background: rgba(46, 134, 171, 0.15) !important;
        color: #5BB8D4 !important;
        border-left-color: #2E86AB !important;
    }

    html:not(.light-mode) .topbar,
    html:not(.light-mode) .app-header {
        background-color: #161B25 !important;
        border-bottom: 1px solid #1E2D3D !important;
    }

    html:not(.light-mode) .topbar .page-title,
    html:not(.light-mode) .page-title {
        color: #E2E4E9 !important;
    }

    html:not(.light-mode) .card,
    html:not(.light-mode) .card-panel,
    html:not(.light-mode) .chart-card,
    html:not(.light-mode) .metric-card,
    html:not(.light-mode) .summary-metric-card {
        background-color: #161B25 !important;
        border-color: #1E2D3D !important;
        color: #E2E4E9 !important;
    }

    html:not(.light-mode) .card-header,
    html:not(.light-mode) .chart-card-header,
    html:not(.light-mode) .card-panel-header {
        background-color: #1A2236 !important;
        border-bottom-color: #1E2D3D !important;
        color: #E2E4E9 !important;
    }

    html:not(.light-mode) .card-header h6,
    html:not(.light-mode) .card-header h5,
    html:not(.light-mode) .card-header h4,
    html:not(.light-mode) .chart-title,
    html:not(.light-mode) .panel-title {
        color: #E2E4E9 !important;
    }

    html:not(.light-mode) .table,
    html:not(.light-mode) .table-tracker {
        color: #D4D8E2 !important;
        border-color: #1E2D3D !important;
        --bs-table-bg: #161B25 !important;
        --bs-table-striped-bg: #1A2236 !important;
        --bs-table-hover-bg: #1E2A3D !important;
        --bs-table-border-color: #1E2D3D !important;
        --bs-table-color: #D4D8E2 !important;
    }

    html:not(.light-mode) .table > :not(caption) > * > *,
    html:not(.light-mode) .table-tracker > :not(caption) > * > * {
        background-color: transparent !important;
        color: #D4D8E2 !important;
        border-bottom-color: #1E2D3D !important;
    }

    html:not(.light-mode) .table thead th,
    html:not(.light-mode) .table > thead > tr > th,
    html:not(.light-mode) .table-tracker thead th,
    html:not(.light-mode) thead.sticky-top th {
        background-color: #1F4E79 !important;
        color: #E8F4FD !important;
        border-bottom: 2px solid #2E86AB !important;
        font-weight: 600 !important;
    }

    html:not(.light-mode) .table-dark {
        --bs-table-bg: #1F3A5F !important;
        --bs-table-color: #E8F4FD !important;
        --bs-table-border-color: #2E5C8A !important;
    }

    html:not(.light-mode) .table-dark th,
    html:not(.light-mode) .table-dark td {
        background-color: #1F3A5F !important;
        color: #E8F4FD !important;
        border-color: #2E5C8A !important;
    }

    html:not(.light-mode) .table-hover > tbody > tr:hover > *,
    html:not(.light-mode) .table-tracker tbody tr:hover,
    html:not(.light-mode) .table-hover tbody tr:hover td {
        background-color: #1E2A3D !important;
        color: #E2E4E9 !important;
    }

    html:not(.light-mode) .milestone-row-overdue {
        background-color: #2D1515 !important;
        border-left-color: #C0392B !important;
    }

    html:not(.light-mode) .milestone-row-overdue:hover {
        background-color: #3D1A1A !important;
    }

    html:not(.light-mode) .milestone-row-urgent {
        background-color: #2D1E0F !important;
        border-left-color: #E8600A !important;
    }

    html:not(.light-mode) .milestone-row-warning {
        background-color: #2D2510 !important;
        border-left-color: #F4A61D !important;
    }

    html:not(.light-mode) .milestone-row-approaching {
        background-color: #1E2D1A !important;
        border-left-color: #F4A61D !important;
    }

    html:not(.light-mode) .form-control,
    html:not(.light-mode) .form-select,
    html:not(.light-mode) .search-input {
        background-color: #1A2236 !important;
        border-color: #2E3D52 !important;
        color: #D4D8E2 !important;
    }

    html:not(.light-mode) .form-control:focus,
    html:not(.light-mode) .form-select:focus {
        background-color: #1E2A40 !important;
        border-color: #2E86AB !important;
        color: #E2E4E9 !important;
        box-shadow: 0 0 0 3px rgba(46, 134, 171, 0.25) !important;
    }

    html:not(.light-mode) .form-control::placeholder,
    html:not(.light-mode) .search-input::placeholder {
        color: #6B7A90 !important;
    }

    html:not(.light-mode) .form-label { color: #B0BAC9 !important; }
    html:not(.light-mode) .form-text,
    html:not(.light-mode) .text-muted,
    html:not(.light-mode) .score-card-desc,
    html:not(.light-mode) .chart-centre-text { color: #6B7A90 !important; }

    html:not(.light-mode) .dropdown-menu,
    html:not(.light-mode) .search-results-dropdown,
    html:not(.light-mode) .notification-dropdown {
        background-color: #161B25 !important;
        border-color: #1E2D3D !important;
    }

    html:not(.light-mode) .dropdown-item {
        color: #D4D8E2 !important;
    }

    html:not(.light-mode) .dropdown-item:hover {
        background-color: #1E2A3D !important;
        color: #E2E4E9 !important;
    }

    html:not(.light-mode) .modal-content {
        background-color: #161B25 !important;
        border-color: #1E2D3D !important;
        color: #E2E4E9 !important;
    }

    html:not(.light-mode) .modal-header,
    html:not(.light-mode) .modal-footer {
        border-color: #1E2D3D !important;
    }

    html:not(.light-mode) .page-link {
        background-color: #161B25 !important;
        border-color: #1E2D3D !important;
        color: #5BB8D4 !important;
    }

    html:not(.light-mode) .page-link:hover {
        background-color: #1E2A3D !important;
        color: #E2E4E9 !important;
    }

    html:not(.light-mode) .page-item.active .page-link {
        background-color: #1F4E79 !important;
        border-color: #2E86AB !important;
        color: #E8F4FD !important;
    }

    html:not(.light-mode) .nav-tabs {
        border-bottom-color: #1E2D3D !important;
    }

    html:not(.light-mode) .nav-tabs .nav-link {
        color: #7A8799 !important;
    }

    html:not(.light-mode) .nav-tabs .nav-link.active {
        background-color: #161B25 !important;
        border-color: #1E2D3D #1E2D3D #161B25 !important;
        color: #5BB8D4 !important;
    }

    html:not(.light-mode) .status-score-badge.status-score-5 {
        background: #1A3D28 !important;
        border-color: #2D6B43 !important;
    }

    html:not(.light-mode) .status-score-badge.status-score-4 {
        background: #0D2E3D !important;
        border-color: #1A5270 !important;
    }

    html:not(.light-mode) .status-score-badge.status-score-3 {
        background: #2D2210 !important;
        border-color: #5C440F !important;
    }

    html:not(.light-mode) .status-score-badge.status-score-2 {
        background: #2D1E0A !important;
        border-color: #7A3D0A !important;
    }

    html:not(.light-mode) .status-score-badge.status-score-1 {
        background: #2D1010 !important;
        border-color: #7A1F1F !important;
    }

    html:not(.light-mode) .score-mix-pill[data-score="5"] {
        background: #1A3D28 !important;
        border-color: #2D6B43 !important;
        color: #6DD49A !important;
    }

    html:not(.light-mode) .score-mix-pill[data-score="4"] {
        background: #0D2E3D !important;
        border-color: #1A5270 !important;
        color: #5BB8D4 !important;
    }

    html:not(.light-mode) .score-mix-pill[data-score="3"] {
        background: #2D2210 !important;
        border-color: #5C440F !important;
        color: #F4C842 !important;
    }

    html:not(.light-mode) .score-mix-pill[data-score="2"] {
        background: #2D1E0A !important;
        border-color: #7A3D0A !important;
        color: #F4A261 !important;
    }

    html:not(.light-mode) .score-mix-pill[data-score="1"] {
        background: #2D1010 !important;
        border-color: #7A1F1F !important;
        color: #F07070 !important;
    }

    html:not(.light-mode) .score-summary-card {
        background-color: #161B25 !important;
        border-top-color: #1E2D3D !important;
        border-right-color: #1E2D3D !important;
        border-bottom-color: #1E2D3D !important;
        color: #E2E4E9 !important;
    }

    html:not(.light-mode) .score-summary-card:hover {
        background-color: #1A2236 !important;
    }

    html:not(.light-mode) .chart-centre-number,
    html:not(.light-mode) h1,
    html:not(.light-mode) h2,
    html:not(.light-mode) h3,
    html:not(.light-mode) h4,
    html:not(.light-mode) h5,
    html:not(.light-mode) h6,
    html:not(.light-mode) .fw-500,
    html:not(.light-mode) strong,
    html:not(.light-mode) b {
        color: #E2E4E9 !important;
    }
}

/* Duplicate dark mode rules under .dark-mode class for manual toggle. */
body.dark-mode .sidebar,
body.dark-mode .app-header-nav { background-color: #0D1B2A !important; border-right: 1px solid #1E2D3D; }
body.dark-mode .topbar,
body.dark-mode .app-header { background-color: #161B25 !important; border-bottom: 1px solid #1E2D3D !important; }
body.dark-mode .card,
body.dark-mode .card-panel,
body.dark-mode .chart-card,
body.dark-mode .metric-card,
body.dark-mode .summary-metric-card { background-color: #161B25 !important; border-color: #1E2D3D !important; color: #E2E4E9 !important; }
body.dark-mode .card-header,
body.dark-mode .chart-card-header,
body.dark-mode .card-panel-header { background-color: #1A2236 !important; border-bottom-color: #1E2D3D !important; color: #E2E4E9 !important; }
body.dark-mode .table,
body.dark-mode .table-tracker { color: #D4D8E2 !important; --bs-table-bg: #161B25 !important; --bs-table-striped-bg: #1A2236 !important; --bs-table-hover-bg: #1E2A3D !important; --bs-table-border-color: #1E2D3D !important; --bs-table-color: #D4D8E2 !important; }
body.dark-mode .table-dark { --bs-table-bg: #1F3A5F !important; --bs-table-color: #E8F4FD !important; --bs-table-border-color: #2E5C8A !important; }
body.dark-mode .table > :not(caption) > * > *,
body.dark-mode .table-tracker > :not(caption) > * > * { background-color: transparent !important; color: #D4D8E2 !important; border-bottom-color: #1E2D3D !important; }
body.dark-mode .table thead th,
body.dark-mode .table-tracker thead th,
body.dark-mode thead.sticky-top th { background-color: #1F4E79 !important; color: #E8F4FD !important; border-bottom: 2px solid #2E86AB !important; }
body.dark-mode .table-dark th,
body.dark-mode .table-dark td { background-color: #1F3A5F !important; color: #E8F4FD !important; border-color: #2E5C8A !important; }
body.dark-mode .table-hover > tbody > tr:hover > *,
body.dark-mode .table-hover tbody tr:hover td,
body.dark-mode .table-tracker tbody tr:hover { background-color: #1E2A3D !important; }
body.dark-mode .btn-outline-primary,
body.dark-mode .btn-outline-secondary,
body.dark-mode .btn-outline-danger,
body.dark-mode .btn-ghost { background: rgba(255, 255, 255, 0.03); }
body.dark-mode .btn-outline-primary { color: #9BDCF0; border-color: rgba(91, 184, 212, 0.38); }
body.dark-mode .btn-outline-primary:hover,
body.dark-mode .btn-outline-primary:focus { background: rgba(46, 134, 171, 0.16); border-color: rgba(91, 184, 212, 0.52); color: #EEF8FC; }
body.dark-mode .btn-outline-secondary { color: #D7E4F0; border-color: rgba(176, 196, 216, 0.24); }
body.dark-mode .btn-outline-secondary:hover,
body.dark-mode .btn-outline-secondary:focus { background: rgba(255, 255, 255, 0.08); border-color: rgba(176, 196, 216, 0.38); color: #F4F8FC; }
body.dark-mode .btn-outline-danger { color: #FFB9B4; border-color: rgba(255, 155, 155, 0.32); }
body.dark-mode .btn-outline-danger:hover,
body.dark-mode .btn-outline-danger:focus { background: rgba(192, 57, 43, 0.18); border-color: rgba(255, 155, 155, 0.44); color: #FFE4E1; }
body.dark-mode .btn-ghost { color: #D7E4F0; }
body.dark-mode .btn-ghost:hover,
body.dark-mode .btn-ghost:focus { background: rgba(255, 255, 255, 0.08); color: #F4F8FC; }
body.dark-mode .form-control,
body.dark-mode .form-select,
body.dark-mode .search-input { background-color: #1A2236 !important; border-color: #2E3D52 !important; color: #D4D8E2 !important; }
body.dark-mode .dropdown-menu,
body.dark-mode .search-results-dropdown,
body.dark-mode .notification-dropdown { background-color: #161B25 !important; border-color: #1E2D3D !important; }
body.dark-mode .dropdown-item { color: #D4D8E2 !important; }
body.dark-mode .dropdown-item:hover { background-color: #1E2A3D !important; }
body.dark-mode .modal-content { background-color: #161B25 !important; border-color: #1E2D3D !important; color: #E2E4E9 !important; }
body.dark-mode .nav-tabs .nav-link.active { background-color: #161B25 !important; color: #5BB8D4 !important; }
body.dark-mode .dashboard-workspace-tabs { border-bottom-color: #1E2D3D !important; }
body.dark-mode .dashboard-workspace-tabs .nav-link { background: rgba(19, 32, 51, 0.92) !important; border-color: #1E2D3D !important; color: #C7D3DF !important; }
body.dark-mode .dashboard-workspace-tabs .nav-link:hover { background: rgba(46, 134, 171, 0.14) !important; border-color: rgba(91, 184, 212, 0.30) !important; color: #EEF5FB !important; }
body.dark-mode .dashboard-workspace-tabs .nav-link.active { background: linear-gradient(135deg, var(--navy), var(--teal)) !important; color: var(--white) !important; box-shadow: 0 16px 30px rgba(3, 10, 18, 0.35) !important; }
body.dark-mode .dashboard-tab-count { background: rgba(255, 255, 255, 0.08) !important; color: currentColor !important; }
body.dark-mode .dashboard-tab-count.is-alert { background: rgba(192, 57, 43, 0.18) !important; color: #FFB7B1 !important; }
body.dark-mode .dashboard-workspace-tabs .nav-link.active .dashboard-tab-count { background: rgba(255, 255, 255, 0.18) !important; color: var(--white) !important; }
body.dark-mode .dashboard-inline-count { background: rgba(19, 32, 51, 0.92) !important; border-color: #1E2D3D !important; color: #EEF5FB !important; }
body.dark-mode .dashboard-summary-item { background: linear-gradient(180deg, rgba(19, 32, 51, 0.98), rgba(13, 23, 38, 0.96)) !important; border-color: #1E2D3D !important; }
body.dark-mode .dashboard-summary-label { color: #6B7A90 !important; }
body.dark-mode .dashboard-summary-value { color: #F4F7FB !important; }
body.dark-mode .escalation-banner {
    background: linear-gradient(180deg, rgba(45, 16, 16, 0.98), rgba(32, 12, 12, 0.96));
    border-color: #7A1F1F;
    color: #FFB3B3;
    box-shadow: 0 16px 34px rgba(18, 5, 5, 0.24);
}
body.dark-mode .escalation-icon { background: rgba(255, 155, 155, 0.14); color: #FFB3B3; }
body.dark-mode .due-date-overdue,
body.dark-mode .due-date-due_today { background: #2D1010; color: #F6A2A2; border-color: #7A1F1F; }
body.dark-mode .due-date-urgent { background: #2D1A0A; color: #F4A261; border-color: #7A3D0A; }
body.dark-mode .due-date-warning,
body.dark-mode .due-date-approaching { background: #2D2210; color: #F4C842; border-color: #5C440F; }
body.dark-mode .due-date-on_schedule,
body.dark-mode .due-date-completed { background: #1A3D28; color: #6DD49A; border-color: #2D6B43; }
body.dark-mode .due-date-no_date { background: #1E2A3D; color: #B0C4D8; border-color: #2E3D52; }
body.dark-mode .due-date-banner-overdue,
body.dark-mode .due-date-banner-due_today { background: #2D1010; color: #F6A2A2; border-color: #7A1F1F; }
body.dark-mode .due-date-banner-urgent { background: #2D1A0A; color: #F4A261; border-color: #7A3D0A; }
body.dark-mode .due-date-banner-warning,
body.dark-mode .due-date-banner-approaching { background: #2D2210; color: #F4C842; border-color: #5C440F; }
body.dark-mode .chip-overdue,
body.dark-mode .chip-due-today { background: #2D1010; color: #F6A2A2; border-color: #7A1F1F; }
body.dark-mode .chip-urgent { background: #2D1A0A; color: #F4A261; border-color: #7A3D0A; }
body.dark-mode .chip-warning,
body.dark-mode .chip-approaching { background: #2D2210; color: #F4C842; border-color: #5C440F; }
body.dark-mode .chip-on-track { background: #1A3D28; color: #6DD49A; border-color: #2D6B43; }
body.dark-mode .area-summary-tile,
body.dark-mode .area-performance-card,
body.dark-mode .area-stat-tile,
body.dark-mode .area-card-score-mix,
body.dark-mode .area-card-progress { background: linear-gradient(180deg, rgba(19, 32, 51, 0.98), rgba(13, 23, 38, 0.96)) !important; border-color: #1E2D3D !important; }
body.dark-mode .area-view-tabs .nav-link { background: rgba(19, 32, 51, 0.92) !important; border-color: #1E2D3D !important; color: #C7D3DF !important; }
body.dark-mode .area-view-tabs .nav-link:hover { background: rgba(46, 134, 171, 0.14) !important; border-color: rgba(91, 184, 212, 0.30) !important; color: #EEF5FB !important; }
body.dark-mode .area-view-tabs .nav-link.active { background: linear-gradient(135deg, var(--navy), var(--teal)) !important; color: var(--white) !important; box-shadow: 0 16px 30px rgba(3, 10, 18, 0.35) !important; }
body.dark-mode .area-summary-label,
body.dark-mode .area-summary-note,
body.dark-mode .area-stat-label,
body.dark-mode .area-table-copy { color: #6B7A90 !important; }
body.dark-mode .area-summary-value,
body.dark-mode .area-stat-value,
body.dark-mode .area-progress-value,
body.dark-mode .area-card-title { color: #F4F7FB !important; }
body.dark-mode .area-card-copy { color: #C7D3DF !important; }
body.dark-mode.auth-page { background: linear-gradient(180deg, #08111d, #0d1726) !important; }
body.dark-mode .auth-form-panel { background: radial-gradient(circle at top left, rgba(46, 134, 171, 0.14), transparent 28%), linear-gradient(180deg, rgba(11, 19, 32, 0.96), rgba(8, 17, 29, 0.98)) !important; }
body.dark-mode .auth-toolbar-pill,
body.dark-mode .auth-theme-toggle { background: rgba(19, 32, 51, 0.92) !important; border-color: #1E2D3D !important; color: #DCE6F2 !important; }
body.dark-mode .auth-card { background: linear-gradient(180deg, rgba(19, 32, 51, 0.98), rgba(13, 23, 38, 0.96)) !important; border-color: #1E2D3D !important; box-shadow: 0 22px 48px rgba(2, 6, 23, 0.45) !important; }
body.dark-mode .auth-signal { background: rgba(26, 122, 74, 0.18) !important; border-color: rgba(109, 212, 154, 0.18) !important; color: #6DD49A !important; }
body.dark-mode .auth-input-icon { color: #7DCBE6 !important; }
body.dark-mode .auth-input-shell .form-control { color: #F4F7FB !important; }
body.dark-mode .auth-input-shell .form-control::placeholder { color: #7F90A8 !important; }
body.dark-mode .password-toggle { background: rgba(46, 134, 171, 0.14) !important; border-color: rgba(91, 184, 212, 0.20) !important; color: #7DCBE6 !important; }
body.dark-mode .auth-footer-note,
body.dark-mode .auth-subtitle,
body.dark-mode .auth-error,
body.dark-mode .field-error,
body.dark-mode .auth-field-hint { color: #94A3B8 !important; }
body.dark-mode .text-muted,
body.dark-mode .score-card-desc,
body.dark-mode .chart-centre-text { color: #6B7A90 !important; }
body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5,
body.dark-mode h6,
body.dark-mode .chart-centre-number { color: #E2E4E9 !important; }
body.dark-mode .score-summary-card { background-color: #161B25 !important; border-top-color: #1E2D3D !important; border-right-color: #1E2D3D !important; border-bottom-color: #1E2D3D !important; }
body.dark-mode .page-link { background-color: #161B25 !important; border-color: #1E2D3D !important; color: #5BB8D4 !important; }
body.dark-mode .page-item.active .page-link { background-color: #1F4E79 !important; border-color: #2E86AB !important; }
body.dark-mode .milestone-row-overdue { background-color: #2D1515 !important; }
body.dark-mode .milestone-row-urgent { background-color: #2D1E0F !important; }
body.dark-mode .milestone-row-warning { background-color: #2D2510 !important; }
body.dark-mode .score-mix-pill[data-score="5"] { background: #1A3D28 !important; border-color: #2D6B43 !important; color: #6DD49A !important; }
body.dark-mode .score-mix-pill[data-score="4"] { background: #0D2E3D !important; border-color: #1A5270 !important; color: #5BB8D4 !important; }
body.dark-mode .score-mix-pill[data-score="3"] { background: #2D2210 !important; border-color: #5C440F !important; color: #F4C842 !important; }
body.dark-mode .score-mix-pill[data-score="2"] { background: #2D1E0A !important; border-color: #7A3D0A !important; color: #F4A261 !important; }
body.dark-mode .score-mix-pill[data-score="1"] { background: #2D1010 !important; border-color: #7A1F1F !important; color: #F07070 !important; }

/* ── Indicator yearly values ────────────────────────────────────── */
.form-section-divider {
    height: 1px;
    background: linear-gradient(90deg, rgba(16, 46, 91, 0.14), rgba(199, 154, 44, 0.22), rgba(16, 46, 91, 0.04));
}

.indicator-history-summary {
    border-top: 1px solid rgba(16, 46, 91, 0.08);
    padding-top: 1rem;
}

.indicator-year-chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.indicator-year-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.7rem;
    border-radius: 999px;
    background: rgba(199, 154, 44, 0.12);
    border: 1px solid rgba(199, 154, 44, 0.28);
    color: var(--navy);
    font-size: 0.8rem;
    line-height: 1;
    white-space: nowrap;
}

.indicator-year-chip strong {
    font-size: 0.78rem;
}

.indicator-year-chip-compact {
    padding: 0.28rem 0.55rem;
    font-size: 0.72rem;
}

.indicator-year-chip-more {
    background: rgba(16, 46, 91, 0.06);
    border-color: rgba(16, 46, 91, 0.12);
}

.indicator-year-values-builder {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.indicator-year-values-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.indicator-year-value-row {
    padding: 1rem 1rem 0.35rem;
    border-radius: 1rem;
    border: 1px solid rgba(16, 46, 91, 0.08);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 252, 0.96));
    box-shadow: 0 16px 40px -32px rgba(8, 26, 52, 0.4);
}

.indicator-year-value-row.is-marked-for-delete {
    display: none;
}

.indicator-update-intro .panel-title {
    font-size: 1rem;
}

html:not(.light-mode) .form-section-divider,
body.dark-mode .form-section-divider {
    background: linear-gradient(90deg, rgba(91, 184, 212, 0.1), rgba(199, 154, 44, 0.24), rgba(91, 184, 212, 0.04));
}

html:not(.light-mode) .indicator-history-summary,
body.dark-mode .indicator-history-summary {
    border-top-color: #1E2D3D;
}

html:not(.light-mode) .indicator-year-chip,
body.dark-mode .indicator-year-chip {
    background: rgba(199, 154, 44, 0.14);
    border-color: rgba(199, 154, 44, 0.32);
    color: #E2E4E9;
}

html:not(.light-mode) .indicator-year-chip-more,
body.dark-mode .indicator-year-chip-more {
    background: rgba(91, 184, 212, 0.08);
    border-color: rgba(91, 184, 212, 0.18);
}

html:not(.light-mode) .indicator-year-value-row,
body.dark-mode .indicator-year-value-row {
    background: linear-gradient(180deg, rgba(22, 27, 37, 0.98), rgba(26, 34, 54, 0.98));
    border-color: #1E2D3D;
    box-shadow: none;
}

/* ── Dark mode text and utility cleanup ─────────────────────────── */
html:not(.light-mode) .text-dark,
html:not(.light-mode) .text-body,
html:not(.light-mode) .text-body-emphasis,
html:not(.light-mode) .text-body-secondary,
html:not(.light-mode) .text-secondary,
html:not(.light-mode) .text-black,
html:not(.light-mode) .panel-subtitle,
html:not(.light-mode) .lead-copy,
html:not(.light-mode) .empty-state-copy,
html:not(.light-mode) .metric-label,
html:not(.light-mode) .accordion-body,
html:not(.light-mode) .btn-link,
body.dark-mode .text-dark,
body.dark-mode .text-body,
body.dark-mode .text-body-emphasis,
body.dark-mode .text-body-secondary,
body.dark-mode .text-secondary,
body.dark-mode .text-black,
body.dark-mode .panel-subtitle,
body.dark-mode .lead-copy,
body.dark-mode .empty-state-copy,
body.dark-mode .metric-label,
body.dark-mode .accordion-body,
body.dark-mode .btn-link {
    color: #D4D8E2 !important;
}

html:not(.light-mode) .text-primary-emphasis,
body.dark-mode .text-primary-emphasis {
    color: #7FD5EC !important;
}

html:not(.light-mode) .text-success-emphasis,
body.dark-mode .text-success-emphasis {
    color: #7AE0A8 !important;
}

html:not(.light-mode) .text-danger-emphasis,
body.dark-mode .text-danger-emphasis {
    color: #FF9B9B !important;
}

html:not(.light-mode) .text-warning-emphasis,
body.dark-mode .text-warning-emphasis {
    color: #FFD46B !important;
}

html:not(.light-mode) .text-info-emphasis,
body.dark-mode .text-info-emphasis {
    color: #8DDBF5 !important;
}

html:not(.light-mode) .text-secondary-emphasis,
body.dark-mode .text-secondary-emphasis {
    color: #C4CCD8 !important;
}

html:not(.light-mode) .bg-light,
html:not(.light-mode) .bg-white,
html:not(.light-mode) .bg-body,
body.dark-mode .bg-light,
body.dark-mode .bg-white,
body.dark-mode .bg-body {
    background-color: #1A2236 !important;
    color: #E2E4E9 !important;
}

html:not(.light-mode) .bg-primary-subtle,
body.dark-mode .bg-primary-subtle {
    background-color: rgba(46, 134, 171, 0.18) !important;
}

html:not(.light-mode) .bg-success-subtle,
body.dark-mode .bg-success-subtle {
    background-color: rgba(26, 122, 74, 0.2) !important;
}

html:not(.light-mode) .bg-danger-subtle,
body.dark-mode .bg-danger-subtle {
    background-color: rgba(192, 57, 43, 0.2) !important;
}

html:not(.light-mode) .bg-warning-subtle,
body.dark-mode .bg-warning-subtle {
    background-color: rgba(244, 166, 29, 0.18) !important;
}

html:not(.light-mode) .bg-info-subtle,
body.dark-mode .bg-info-subtle {
    background-color: rgba(91, 184, 212, 0.18) !important;
}

html:not(.light-mode) .bg-secondary-subtle,
body.dark-mode .bg-secondary-subtle {
    background-color: rgba(122, 135, 153, 0.2) !important;
}

html:not(.light-mode) .badge.bg-light.text-dark,
body.dark-mode .badge.bg-light.text-dark {
    background-color: #243148 !important;
    color: #E2E4E9 !important;
    border: 1px solid #33435E;
}

html:not(.light-mode) .accordion-button,
html:not(.light-mode) .tracker-accordion .accordion-button,
body.dark-mode .accordion-button,
body.dark-mode .tracker-accordion .accordion-button {
    color: #E2E4E9 !important;
    background-color: #1A2236 !important;
}

html:not(.light-mode) .accordion-button:not(.collapsed),
html:not(.light-mode) .tracker-accordion .accordion-button:not(.collapsed),
body.dark-mode .accordion-button:not(.collapsed),
body.dark-mode .tracker-accordion .accordion-button:not(.collapsed) {
    color: #F7E7BE !important;
    background-color: #1E2940 !important;
}

html:not(.light-mode) .btn-link:hover,
body.dark-mode .btn-link:hover {
    color: #F7E7BE !important;
}

html:not(.light-mode) .text-navy,
body.dark-mode .text-navy {
    color: #C8D8F2 !important;
}

html:not(.light-mode) .text-teal,
body.dark-mode .text-teal {
    color: #7FD5EC !important;
}

html:not(.light-mode) .chip-navy,
body.dark-mode .chip-navy {
    background: rgba(91, 184, 212, 0.12) !important;
    color: #DCEBFF !important;
    border: 1px solid rgba(91, 184, 212, 0.2);
}

html:not(.light-mode) .table-link,
html:not(.light-mode) .attention-footer-link a,
body.dark-mode .table-link,
body.dark-mode .attention-footer-link a {
    color: #7FD5EC !important;
}

html:not(.light-mode) .table-link:hover,
html:not(.light-mode) .attention-footer-link a:hover,
body.dark-mode .table-link:hover,
body.dark-mode .attention-footer-link a:hover {
    color: #F7E7BE !important;
}

html:not(.light-mode) .detail-title,
html:not(.light-mode) .detail-section h3,
html:not(.light-mode) .progress-inline-label,
html:not(.light-mode) .stat-count,
html:not(.light-mode) .mini-progress span,
html:not(.light-mode) .metric-value,
html:not(.light-mode) .theme-toggle-btn,
html:not(.light-mode) .theme-toggle-icon,
body.dark-mode .detail-title,
body.dark-mode .detail-section h3,
body.dark-mode .progress-inline-label,
body.dark-mode .stat-count,
body.dark-mode .mini-progress span,
body.dark-mode .metric-value,
body.dark-mode .theme-toggle-btn,
body.dark-mode .theme-toggle-icon {
    color: #E2E4E9 !important;
}

html:not(.light-mode) .metric-value.text-teal,
body.dark-mode .metric-value.text-teal {
    color: #7FD5EC !important;
}

html:not(.light-mode) .metric-value.text-success,
body.dark-mode .metric-value.text-success {
    color: #7AE0A8 !important;
}

html:not(.light-mode) .metric-value.text-danger,
body.dark-mode .metric-value.text-danger {
    color: #FF9B9B !important;
}

html:not(.light-mode) .metric-icon.text-navy,
body.dark-mode .metric-icon.text-navy {
    color: #C8D8F2 !important;
}

html:not(.light-mode) .metric-icon.text-teal,
body.dark-mode .metric-icon.text-teal {
    color: #7FD5EC !important;
}

html:not(.light-mode) .metric-icon.text-success,
body.dark-mode .metric-icon.text-success {
    color: #7AE0A8 !important;
}

html:not(.light-mode) .metric-icon.text-danger,
body.dark-mode .metric-icon.text-danger {
    color: #FF9B9B !important;
}

html:not(.light-mode) .stale-badge-amber,
body.dark-mode .stale-badge-amber {
    background: rgba(244, 166, 29, 0.18) !important;
    color: #FFD46B !important;
    border: 1px solid rgba(244, 166, 29, 0.28);
}

html:not(.light-mode) .stale-badge-red,
body.dark-mode .stale-badge-red {
    background: rgba(192, 57, 43, 0.18) !important;
    color: #FF9B9B !important;
    border: 1px solid rgba(192, 57, 43, 0.28);
}

html:not(.light-mode) .spinner-border.text-teal,
body.dark-mode .spinner-border.text-teal {
    color: #7FD5EC !important;
}

/* ══════════════════════════════════════════════════════════════
   INDICATOR INTERFACE — Full light + dark mode
   ══════════════════════════════════════════════════════════════ */

.indicator-card {
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    background: var(--white);
    overflow: hidden;
    margin-bottom: 16px;
    transition: box-shadow 0.15s;
}

.indicator-card:hover {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.07);
}

.ind-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px 10px;
    border-bottom: 1px solid var(--gray-100);
    background: var(--gray-50);
}

.ind-header-left {
    flex: 1;
    min-width: 0;
}

.ind-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--navy);
    line-height: 1.3;
    margin-bottom: 6px;
}

.ind-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    align-items: center;
}

.ind-chip {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 8px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 500;
    white-space: nowrap;
}

.ind-chip-code {
    background: #E8F4FD;
    color: #0D547A;
    border: 1px solid #B5D4F0;
}

.ind-chip-unit {
    background: #F1F3F4;
    color: #595959;
    border: 1px solid #D3D6D9;
}

.ind-chip-freq {
    background: #E8F5E9;
    color: #1A5C28;
    border: 1px solid #A5D6A7;
}

.ind-chip-owner {
    background: #EDE7FF;
    color: #4B1C82;
    border: 1px solid #C5B3F5;
}

.ind-header-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.ind-btn-add-year {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    border: 1.5px solid #2E86AB;
    background: transparent;
    color: #2E86AB;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
}

.ind-btn-add-year:hover {
    background: #2E86AB;
    color: var(--white);
}

.ind-btn-remove {
    display: inline-flex;
    align-items: center;
    padding: 5px 8px;
    border-radius: 6px;
    font-size: 13px;
    border: 1px solid var(--gray-200);
    background: transparent;
    color: var(--gray-500);
    cursor: pointer;
    transition: border-color 0.1s, color 0.1s;
}

.ind-btn-remove:hover {
    border-color: #C0392B;
    color: #C0392B;
}

.ind-table-scroll-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.ind-table {
    width: 100%;
    min-width: max-content;
    border-collapse: collapse;
    font-size: 13px;
    table-layout: auto;
}

.ind-col-label {
    width: 90px;
    min-width: 80px;
}

.ind-col-year {
    min-width: 110px;
}

.ind-col-current {
    min-width: 120px;
}

.ind-col-actions {
    width: 48px;
}

.ind-th-label {
    padding: 0;
    width: 90px;
    background: var(--gray-50);
    border-bottom: 2px solid var(--gray-200);
    position: sticky;
    left: 0;
    z-index: 2;
}

.ind-th-year {
    text-align: center;
    padding: 10px 8px;
    font-size: 13px;
    font-weight: 700;
    color: var(--gray-700);
    border-bottom: 2px solid var(--gray-200);
    border-left: 1px solid var(--gray-100);
}

.ind-th-current {
    background: rgba(46, 134, 171, 0.08);
    border-bottom: 2px solid #2E86AB !important;
}

.ind-th-actions {
    width: 48px;
    padding: 8px 6px;
    border-bottom: 2px solid var(--gray-200);
}

.ind-year-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
}

.ind-current-badge {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #2E86AB;
    background: rgba(46, 134, 171, 0.12);
    padding: 1px 6px;
    border-radius: 10px;
}

.ind-row {
    transition: background 0.1s;
}

.ind-row:hover .ind-td-value {
    background: rgba(0, 0, 0, 0.02);
}

.ind-td-label {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--gray-50);
    border-right: 2px solid var(--gray-200);
    border-bottom: 1px solid var(--gray-100);
    padding: 9px 12px;
    white-space: nowrap;
    vertical-align: middle;
}

.ind-row-baseline .ind-td-label {
    border-top: 1px solid var(--gray-100);
}

.ind-row-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--gray-500);
}

.ind-row-label-target {
    color: #2E86AB;
}

.ind-row-label-actual {
    color: var(--navy);
}

.ind-row-label-notes {
    color: var(--gray-500);
}

.ind-row-label-edit {
    color: var(--gray-500);
}

.ind-td-value {
    text-align: center;
    padding: 9px 8px;
    border-bottom: 1px solid var(--gray-100);
    border-left: 1px solid var(--gray-100);
    vertical-align: middle;
    transition: background 0.1s;
}

.ind-td-current {
    background: rgba(46, 134, 171, 0.05) !important;
}

.ind-col-being-edited {
    background: rgba(46, 134, 171, 0.10) !important;
    outline: 2px solid rgba(46, 134, 171, 0.3);
    outline-offset: -2px;
}

.ind-val {
    font-size: 13px;
    font-weight: 500;
    color: var(--gray-900);
}

.ind-val-baseline {
    color: var(--gray-700);
    font-weight: 400;
}

.indicator-baseline-note {
    display: inline-block;
    margin-left: 4px;
    font-size: 10px;
    color: var(--gray-500);
}

.ind-val-target {
    color: #2E86AB;
    font-weight: 600;
}

.ind-val-actual {
    color: var(--navy);
    font-weight: 700;
}

.ind-val-empty {
    color: #C9CED4;
    font-size: 14px;
    user-select: none;
}

.ind-val-empty-actual {
    color: #D8DEE4;
}

.ind-notes-icon {
    color: var(--gray-500);
    cursor: help;
    font-size: 14px;
}

.ind-notes-icon:hover {
    color: #2E86AB;
}

.ind-row-baseline {
    background: transparent;
}

.ind-row-target {
    background: rgba(46, 134, 171, 0.03);
}

.ind-row-actual {
    background: rgba(16, 46, 91, 0.04);
}

.ind-row-notes {
    background: transparent;
}

.ind-row-edit .ind-td-label {
    background: var(--gray-100);
}

.ind-td-edit {
    background: var(--gray-50);
    padding: 5px 4px !important;
}

.ind-edit-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
}

.ind-edit-btn,
.ind-delete-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 5px;
    border: 1px solid transparent;
    background: transparent;
    cursor: pointer;
    font-size: 12px;
    transition: background 0.1s, border-color 0.1s, color 0.1s;
}

.ind-edit-btn {
    color: var(--gray-500);
}

.ind-delete-btn {
    color: var(--gray-500);
}

.ind-edit-btn:hover {
    background: rgba(46, 134, 171, 0.10);
    border-color: #2E86AB;
    color: var(--navy);
}

.ind-delete-btn:hover {
    background: #FDEDEC;
    border-color: #C0392B;
    color: #C0392B;
}

.ind-td-add-col {
    text-align: center;
    padding: 5px 4px !important;
    background: var(--gray-50);
}

.ind-add-col-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 5px;
    border: 1.5px dashed var(--gray-500);
    background: transparent;
    color: var(--gray-500);
    cursor: pointer;
    font-size: 14px;
    font-weight: 700;
    transition: border-color 0.1s, color 0.1s, background 0.1s;
}

.ind-add-col-btn:hover {
    border-color: #2E86AB;
    color: #2E86AB;
    background: rgba(46, 134, 171, 0.08);
}

.ind-edit-panel,
.ind-add-year-panel {
    border-top: 2px solid #2E86AB;
    background: var(--gray-50);
}

.ind-edit-panel-inner {
    padding: 14px 16px;
}

.ind-edit-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.ind-edit-panel-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--navy);
    display: flex;
    align-items: center;
    gap: 6px;
}

.ind-panel-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: none;
    background: transparent;
    color: var(--gray-500);
    cursor: pointer;
    font-size: 14px;
    transition: background 0.1s, color 0.1s;
}

.ind-panel-close:hover {
    background: var(--gray-200);
    color: var(--gray-900);
}

.ind-panel-fields {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 12px;
}

.ind-panel-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    min-width: 120px;
}

.ind-panel-field-notes {
    flex: 2;
    min-width: 200px;
}

.ind-panel-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--gray-500);
}

.ind-panel-label-target {
    color: #2E86AB;
}

.ind-panel-label-actual {
    color: var(--navy);
}

.ind-panel-input {
    padding: 6px 10px;
    border: 1.5px solid var(--gray-200);
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    color: var(--gray-900);
    background: var(--white);
    transition: border-color 0.15s, box-shadow 0.15s;
    width: 100%;
}

.ind-panel-input:focus {
    outline: none;
    border-color: #2E86AB;
    box-shadow: 0 0 0 3px rgba(46, 134, 171, 0.15);
}

.ind-panel-input-target:focus {
    border-color: #2E86AB;
}

.ind-panel-input-actual:focus {
    border-color: var(--navy);
}

.ind-panel-footer {
    display: flex;
    gap: 8px;
    align-items: center;
}

.ind-panel-save {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 18px;
    border-radius: 6px;
    border: none;
    background: var(--navy);
    color: var(--white);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}

.ind-panel-save:hover {
    background: var(--navy-dark);
}

.ind-panel-cancel {
    display: inline-flex;
    align-items: center;
    padding: 7px 14px;
    border-radius: 6px;
    border: 1px solid var(--gray-200);
    background: transparent;
    color: var(--gray-700);
    font-size: 13px;
    cursor: pointer;
    transition: background 0.1s;
}

.ind-panel-cancel:hover {
    background: var(--gray-100);
}

.ind-add-year-hint {
    display: flex;
    align-items: center;
}

.ind-existing-year-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 12px;
    background: var(--gray-100);
    border: 1px solid var(--gray-200);
    font-size: 11px;
    font-weight: 600;
    color: var(--gray-700);
    margin-left: 4px;
}

.ind-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px 20px;
    gap: 10px;
    text-align: center;
}

.ind-empty-icon {
    font-size: 32px;
    color: var(--gray-500);
    line-height: 1;
}

.ind-empty-text {
    font-size: 13px;
    color: var(--gray-700);
}

.ind-btn-add-year-empty {
    margin-top: 4px;
}

.indicators-tab-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

.indicators-tab-header h6 {
    font-size: 14px;
    font-weight: 600;
    color: var(--navy);
    margin: 0;
}

@media (max-width: 767.98px) {
    .ind-header {
        flex-direction: column;
        align-items: stretch;
    }

    .ind-header-actions {
        justify-content: flex-start;
    }

    .indicators-tab-header {
        flex-direction: column;
        align-items: stretch;
    }

    .ind-panel-fields {
        flex-direction: column;
    }

    .ind-panel-field,
    .ind-panel-field-notes {
        min-width: 100%;
    }
}

@media (prefers-color-scheme: dark) {
    :where(html:not([data-theme="light"]):not(.light-mode)) .indicator-card {
        background: #161B25;
        border-color: #1E2D3D;
    }

    :where(html:not([data-theme="light"]):not(.light-mode)) .ind-header {
        background: #1A2236;
        border-bottom-color: #1E2D3D;
    }

    :where(html:not([data-theme="light"]):not(.light-mode)) .ind-name {
        color: #A8D4F5;
    }

    :where(html:not([data-theme="light"]):not(.light-mode)) .ind-chip-code {
        background: #0D2E3D;
        color: #5BB8D4;
        border-color: #1A5270;
    }

    :where(html:not([data-theme="light"]):not(.light-mode)) .ind-chip-unit {
        background: #1A2236;
        color: #8899AA;
        border-color: #2E3D52;
    }

    :where(html:not([data-theme="light"]):not(.light-mode)) .ind-chip-freq {
        background: #1A3D28;
        color: #6DD49A;
        border-color: #2D6B43;
    }

    :where(html:not([data-theme="light"]):not(.light-mode)) .ind-chip-owner {
        background: #2D1A4D;
        color: #C5A8F5;
        border-color: #5C3A9A;
    }

    :where(html:not([data-theme="light"]):not(.light-mode)) .ind-th-label {
        background: #1A2236;
        border-bottom-color: #2E3D52;
    }

    :where(html:not([data-theme="light"]):not(.light-mode)) .ind-th-year {
        color: #B0C4D8;
        border-bottom-color: #2E3D52;
        border-left-color: #1E2D3D;
    }

    :where(html:not([data-theme="light"]):not(.light-mode)) .ind-th-current {
        background: rgba(46, 134, 171, 0.15) !important;
        border-bottom-color: #2E86AB !important;
    }

    :where(html:not([data-theme="light"]):not(.light-mode)) .ind-current-badge {
        color: #5BB8D4;
        background: rgba(46, 134, 171, 0.2);
    }

    :where(html:not([data-theme="light"]):not(.light-mode)) .ind-th-actions {
        border-bottom-color: #2E3D52;
    }

    :where(html:not([data-theme="light"]):not(.light-mode)) .ind-td-label {
        background: #1A2236;
        border-right-color: #2E3D52;
        border-bottom-color: #1E2D3D;
    }

    :where(html:not([data-theme="light"]):not(.light-mode)) .ind-row-label {
        color: #6B7A90;
    }

    :where(html:not([data-theme="light"]):not(.light-mode)) .ind-row-label-target {
        color: #5BB8D4;
    }

    :where(html:not([data-theme="light"]):not(.light-mode)) .ind-row-label-actual {
        color: #A8D4F5;
    }

    :where(html:not([data-theme="light"]):not(.light-mode)) .ind-td-value {
        border-bottom-color: #1E2D3D;
        border-left-color: #1E2D3D;
    }

    :where(html:not([data-theme="light"]):not(.light-mode)) .ind-td-current {
        background: rgba(46, 134, 171, 0.10) !important;
    }

    :where(html:not([data-theme="light"]):not(.light-mode)) .ind-col-being-edited {
        background: rgba(46, 134, 171, 0.18) !important;
        outline-color: rgba(46, 134, 171, 0.5);
    }

    :where(html:not([data-theme="light"]):not(.light-mode)) .ind-val {
        color: #D4D8E2;
    }

    :where(html:not([data-theme="light"]):not(.light-mode)) .ind-val-baseline {
        color: #8899AA;
    }

    :where(html:not([data-theme="light"]):not(.light-mode)) .indicator-baseline-note {
        color: #7A8799;
    }

    :where(html:not([data-theme="light"]):not(.light-mode)) .ind-val-target {
        color: #5BB8D4;
    }

    :where(html:not([data-theme="light"]):not(.light-mode)) .ind-val-actual {
        color: #A8D4F5;
        font-weight: 700;
    }

    :where(html:not([data-theme="light"]):not(.light-mode)) .ind-val-empty {
        color: #2E3D52;
    }

    :where(html:not([data-theme="light"]):not(.light-mode)) .ind-val-empty-actual {
        color: #1E2D3D;
    }

    :where(html:not([data-theme="light"]):not(.light-mode)) .ind-notes-icon {
        color: #6B7A90;
    }

    :where(html:not([data-theme="light"]):not(.light-mode)) .ind-notes-icon:hover {
        color: #5BB8D4;
    }

    :where(html:not([data-theme="light"]):not(.light-mode)) .ind-row:hover .ind-td-value {
        background: rgba(255, 255, 255, 0.02);
    }

    :where(html:not([data-theme="light"]):not(.light-mode)) .ind-row-target {
        background: rgba(46, 134, 171, 0.05);
    }

    :where(html:not([data-theme="light"]):not(.light-mode)) .ind-row-actual {
        background: rgba(16, 46, 91, 0.12);
    }

    :where(html:not([data-theme="light"]):not(.light-mode)) .ind-row-edit .ind-td-label {
        background: #1E2A3D;
    }

    :where(html:not([data-theme="light"]):not(.light-mode)) .ind-td-edit,
    :where(html:not([data-theme="light"]):not(.light-mode)) .ind-td-add-col {
        background: #1A2236;
    }

    :where(html:not([data-theme="light"]):not(.light-mode)) .ind-edit-btn,
    :where(html:not([data-theme="light"]):not(.light-mode)) .ind-delete-btn {
        color: #6B7A90;
    }

    :where(html:not([data-theme="light"]):not(.light-mode)) .ind-edit-btn:hover {
        background: #0D2E3D;
        border-color: #2E86AB;
        color: #5BB8D4;
    }

    :where(html:not([data-theme="light"]):not(.light-mode)) .ind-delete-btn:hover {
        background: #2D1010;
        border-color: #C0392B;
        color: #F07070;
    }

    :where(html:not([data-theme="light"]):not(.light-mode)) .ind-add-col-btn {
        border-color: #2E3D52;
        color: #6B7A90;
    }

    :where(html:not([data-theme="light"]):not(.light-mode)) .ind-add-col-btn:hover {
        border-color: #2E86AB;
        color: #5BB8D4;
        background: rgba(46, 134, 171, 0.15);
    }

    :where(html:not([data-theme="light"]):not(.light-mode)) .ind-edit-panel,
    :where(html:not([data-theme="light"]):not(.light-mode)) .ind-add-year-panel {
        background: #1A2236;
        border-top-color: #2E86AB;
    }

    :where(html:not([data-theme="light"]):not(.light-mode)) .ind-edit-panel-title,
    :where(html:not([data-theme="light"]):not(.light-mode)) .indicators-tab-header h6 {
        color: #A8D4F5;
    }

    :where(html:not([data-theme="light"]):not(.light-mode)) .ind-panel-close {
        color: #6B7A90;
    }

    :where(html:not([data-theme="light"]):not(.light-mode)) .ind-panel-close:hover {
        background: #2E3D52;
        color: #D4D8E2;
    }

    :where(html:not([data-theme="light"]):not(.light-mode)) .ind-panel-label {
        color: #6B7A90;
    }

    :where(html:not([data-theme="light"]):not(.light-mode)) .ind-panel-label-target {
        color: #5BB8D4;
    }

    :where(html:not([data-theme="light"]):not(.light-mode)) .ind-panel-label-actual {
        color: #A8D4F5;
    }

    :where(html:not([data-theme="light"]):not(.light-mode)) .ind-panel-input {
        background: #0F1117;
        border-color: #2E3D52;
        color: #D4D8E2;
    }

    :where(html:not([data-theme="light"]):not(.light-mode)) .ind-panel-input:focus {
        border-color: #2E86AB;
        box-shadow: 0 0 0 3px rgba(46, 134, 171, 0.2);
    }

    :where(html:not([data-theme="light"]):not(.light-mode)) .ind-panel-save {
        background: #1F4E79;
    }

    :where(html:not([data-theme="light"]):not(.light-mode)) .ind-panel-save:hover {
        background: #163A5C;
    }

    :where(html:not([data-theme="light"]):not(.light-mode)) .ind-panel-cancel {
        border-color: #2E3D52;
        color: #8899AA;
    }

    :where(html:not([data-theme="light"]):not(.light-mode)) .ind-panel-cancel:hover {
        background: #1E2A3D;
    }

    :where(html:not([data-theme="light"]):not(.light-mode)) .ind-existing-year-badge {
        background: #1E2A3D;
        border-color: #2E3D52;
        color: #8899AA;
    }

    :where(html:not([data-theme="light"]):not(.light-mode)) .ind-empty-icon {
        color: #2E3D52;
    }

    :where(html:not([data-theme="light"]):not(.light-mode)) .ind-empty-text {
        color: #6B7A90;
    }

    :where(html:not([data-theme="light"]):not(.light-mode)) .ind-empty-state {
        border-color: #2E3D52 !important;
    }

    :where(html:not([data-theme="light"]):not(.light-mode)) .ind-btn-add-year {
        border-color: #2E86AB;
        color: #5BB8D4;
    }

    :where(html:not([data-theme="light"]):not(.light-mode)) .ind-btn-add-year:hover {
        background: #2E86AB;
        color: var(--white);
    }

    :where(html:not([data-theme="light"]):not(.light-mode)) .ind-btn-remove {
        border-color: #2E3D52;
        color: #6B7A90;
    }

    :where(html:not([data-theme="light"]):not(.light-mode)) .ind-btn-remove:hover {
        border-color: #C0392B;
        color: #F07070;
    }
}

body.dark-mode .indicator-card {
    background: #161B25;
    border-color: #1E2D3D;
}

body.dark-mode .ind-header {
    background: #1A2236;
    border-bottom-color: #1E2D3D;
}

body.dark-mode .ind-name {
    color: #A8D4F5;
}

body.dark-mode .ind-chip-code {
    background: #0D2E3D;
    color: #5BB8D4;
    border-color: #1A5270;
}

body.dark-mode .ind-chip-unit {
    background: #1A2236;
    color: #8899AA;
    border-color: #2E3D52;
}

body.dark-mode .ind-chip-freq {
    background: #1A3D28;
    color: #6DD49A;
    border-color: #2D6B43;
}

body.dark-mode .ind-chip-owner {
    background: #2D1A4D;
    color: #C5A8F5;
    border-color: #5C3A9A;
}

body.dark-mode .ind-th-label {
    background: #1A2236;
    border-bottom-color: #2E3D52;
}

body.dark-mode .ind-th-year {
    color: #B0C4D8;
    border-bottom-color: #2E3D52;
    border-left-color: #1E2D3D;
}

body.dark-mode .ind-th-current {
    background: rgba(46, 134, 171, 0.15) !important;
    border-bottom-color: #2E86AB !important;
}

body.dark-mode .ind-current-badge {
    color: #5BB8D4;
    background: rgba(46, 134, 171, 0.2);
}

body.dark-mode .ind-th-actions {
    border-bottom-color: #2E3D52;
}

body.dark-mode .ind-td-label {
    background: #1A2236;
    border-right-color: #2E3D52;
    border-bottom-color: #1E2D3D;
}

body.dark-mode .ind-row-label {
    color: #6B7A90;
}

body.dark-mode .ind-row-label-target {
    color: #5BB8D4;
}

body.dark-mode .ind-row-label-actual {
    color: #A8D4F5;
}

body.dark-mode .ind-td-value {
    border-bottom-color: #1E2D3D;
    border-left-color: #1E2D3D;
}

body.dark-mode .ind-td-current {
    background: rgba(46, 134, 171, 0.10) !important;
}

body.dark-mode .ind-col-being-edited {
    background: rgba(46, 134, 171, 0.18) !important;
    outline-color: rgba(46, 134, 171, 0.5);
}

body.dark-mode .ind-val {
    color: #D4D8E2;
}

body.dark-mode .ind-val-baseline {
    color: #8899AA;
}

body.dark-mode .indicator-baseline-note {
    color: #7A8799;
}

body.dark-mode .ind-val-target {
    color: #5BB8D4;
}

body.dark-mode .ind-val-actual {
    color: #A8D4F5;
}

body.dark-mode .ind-val-empty {
    color: #2E3D52;
}

body.dark-mode .ind-val-empty-actual {
    color: #1E2D3D;
}

body.dark-mode .ind-notes-icon {
    color: #6B7A90;
}

body.dark-mode .ind-notes-icon:hover {
    color: #5BB8D4;
}

body.dark-mode .ind-row:hover .ind-td-value {
    background: rgba(255, 255, 255, 0.02);
}

body.dark-mode .ind-row-target {
    background: rgba(46, 134, 171, 0.05);
}

body.dark-mode .ind-row-actual {
    background: rgba(16, 46, 91, 0.12);
}

body.dark-mode .ind-row-edit .ind-td-label {
    background: #1E2A3D;
}

body.dark-mode .ind-td-edit,
body.dark-mode .ind-td-add-col {
    background: #1A2236;
}

body.dark-mode .ind-edit-btn,
body.dark-mode .ind-delete-btn {
    color: #6B7A90;
}

body.dark-mode .ind-edit-btn:hover {
    background: #0D2E3D;
    border-color: #2E86AB;
    color: #5BB8D4;
}

body.dark-mode .ind-delete-btn:hover {
    background: #2D1010;
    border-color: #C0392B;
    color: #F07070;
}

body.dark-mode .ind-add-col-btn {
    border-color: #2E3D52;
    color: #6B7A90;
}

body.dark-mode .ind-add-col-btn:hover {
    border-color: #2E86AB;
    color: #5BB8D4;
    background: rgba(46, 134, 171, 0.15);
}

body.dark-mode .ind-edit-panel,
body.dark-mode .ind-add-year-panel {
    background: #1A2236;
    border-top-color: #2E86AB;
}

body.dark-mode .ind-edit-panel-title,
body.dark-mode .indicators-tab-header h6 {
    color: #A8D4F5;
}

body.dark-mode .ind-panel-close {
    color: #6B7A90;
}

body.dark-mode .ind-panel-close:hover {
    background: #2E3D52;
    color: #D4D8E2;
}

body.dark-mode .ind-panel-label {
    color: #6B7A90;
}

body.dark-mode .ind-panel-label-target {
    color: #5BB8D4;
}

body.dark-mode .ind-panel-label-actual {
    color: #A8D4F5;
}

body.dark-mode .ind-panel-input {
    background: #0F1117;
    border-color: #2E3D52;
    color: #D4D8E2;
}

body.dark-mode .ind-panel-input:focus {
    border-color: #2E86AB;
    box-shadow: 0 0 0 3px rgba(46, 134, 171, 0.2);
}

body.dark-mode .ind-panel-save {
    background: #1F4E79;
}

body.dark-mode .ind-panel-save:hover {
    background: #163A5C;
}

body.dark-mode .ind-panel-cancel {
    border-color: #2E3D52;
    color: #8899AA;
}

body.dark-mode .ind-panel-cancel:hover {
    background: #1E2A3D;
}

body.dark-mode .ind-existing-year-badge {
    background: #1E2A3D;
    border-color: #2E3D52;
    color: #8899AA;
}

body.dark-mode .ind-empty-icon {
    color: #2E3D52;
}

body.dark-mode .ind-empty-text {
    color: #6B7A90;
}

body.dark-mode .ind-empty-state {
    border-color: #2E3D52 !important;
}

body.dark-mode .ind-btn-add-year {
    border-color: #2E86AB;
    color: #5BB8D4;
}

body.dark-mode .ind-btn-add-year:hover {
    background: #2E86AB;
    color: var(--white);
}

body.dark-mode .ind-btn-remove {
    border-color: #2E3D52;
    color: #6B7A90;
}

body.dark-mode .ind-btn-remove:hover {
    border-color: #C0392B;
    color: #F07070;
}

/* ── Indicator support surfaces outside the inline table ───────── */
.indicator-meta-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 24px;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    color: var(--gray-700);
    font-size: 11px;
    font-weight: 600;
}

.indicator-meta-code {
    background: #E8F4FD;
    border-color: #B5D4F0;
    color: #0D547A;
}

.indicator-form-note,
.indicator-years-hint,
.indicator-link-context,
.indicator-library-summary {
    border: 1px solid var(--gray-200);
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(255, 252, 246, 0.92), rgba(255, 255, 255, 0.98));
}

.indicator-form-note {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.8rem 0.95rem;
    font-size: 12px;
    color: var(--gray-700);
}

.indicator-form-note i {
    color: #2E86AB;
}

.indicator-years-hint {
    padding: 0.8rem 0.95rem;
}

.indicator-link-context {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    padding: 0.8rem 0.95rem;
}

.indicator-library-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0.8rem;
    padding: 0.9rem 1rem;
}

.indicator-library-stat {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.indicator-library-stat-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--gray-500);
    font-weight: 700;
}

.indicator-library-stat-value {
    font-size: 1rem;
    color: var(--navy);
    font-weight: 700;
}

@media (prefers-color-scheme: dark) {
    :where(html:not([data-theme="light"]):not(.light-mode)) .indicator-meta-pill,
    :where(html:not([data-theme="light"]):not(.light-mode)) .indicator-form-note,
    :where(html:not([data-theme="light"]):not(.light-mode)) .indicator-years-hint,
    :where(html:not([data-theme="light"]):not(.light-mode)) .indicator-link-context,
    :where(html:not([data-theme="light"]):not(.light-mode)) .indicator-library-summary {
        background: #1A2236;
        border-color: #2E3D52;
        color: #B9C7D8;
    }

    :where(html:not([data-theme="light"]):not(.light-mode)) .indicator-meta-code {
        background: #0D2E3D;
        border-color: #1A5270;
        color: #5BB8D4;
    }

    :where(html:not([data-theme="light"]):not(.light-mode)) .indicator-library-stat-value {
        color: #E2E4E9;
    }
}

body.dark-mode .indicator-meta-pill,
body.dark-mode .indicator-form-note,
body.dark-mode .indicator-years-hint,
body.dark-mode .indicator-link-context,
body.dark-mode .indicator-library-summary {
    background: #1A2236;
    border-color: #2E3D52;
    color: #B9C7D8;
}

body.dark-mode .indicator-meta-code {
    background: #0D2E3D;
    border-color: #1A5270;
    color: #5BB8D4;
}

body.dark-mode .indicator-library-stat-value {
    color: #E2E4E9;
}

body.light-mode .indicator-card {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(250, 252, 255, 0.97));
    border-color: rgba(16, 46, 91, 0.12);
    box-shadow: 0 8px 24px rgba(16, 46, 91, 0.05);
}

body.light-mode .indicator-card:hover {
    box-shadow: 0 12px 28px rgba(16, 46, 91, 0.09);
}

body.light-mode .ind-header {
    background: linear-gradient(180deg, rgba(249, 235, 199, 0.42), rgba(255, 255, 255, 0.98));
    border-bottom-color: rgba(16, 46, 91, 0.08);
}

body.light-mode .ind-name,
body.light-mode .indicators-tab-header h6 {
    color: var(--gray-900);
}

body.light-mode .ind-chip-code {
    background: #ECF6FD;
    color: var(--gray-900);
    border-color: #C5DDF2;
}

body.light-mode .ind-chip-unit {
    background: #F7F7F8;
    color: var(--gray-900);
    border-color: #E2E5E8;
}

body.light-mode .ind-chip-freq {
    background: #EEF9F1;
    color: var(--gray-900);
    border-color: #B8DEC1;
}

body.light-mode .ind-chip-owner {
    background: #F3EEFF;
    color: var(--gray-900);
    border-color: #D4C4F7;
}

body.light-mode .ind-th-label,
body.light-mode .ind-td-label {
    background: #FAFBFD;
    border-right-color: rgba(16, 46, 91, 0.10);
}

body.light-mode .ind-th-year {
    color: #39516C;
    border-bottom-color: rgba(16, 46, 91, 0.12);
    border-left-color: rgba(16, 46, 91, 0.06);
}

body.light-mode .ind-th-actions {
    border-bottom-color: rgba(16, 46, 91, 0.12);
}

body.light-mode .ind-th-current,
body.light-mode .ind-td-current {
    background: rgba(46, 134, 171, 0.08) !important;
}

body.light-mode .ind-current-badge {
    color: #1C7596;
    background: rgba(46, 134, 171, 0.14);
}

body.light-mode .ind-row-label {
    color: #7A8590;
}

body.light-mode .ind-row-label-target {
    color: #2E86AB;
}

body.light-mode .ind-row-label-actual {
    color: var(--navy);
}

body.light-mode .ind-td-value {
    border-bottom-color: rgba(16, 46, 91, 0.07);
    border-left-color: rgba(16, 46, 91, 0.05);
}

body.light-mode .ind-row:hover .ind-td-value {
    background: rgba(16, 46, 91, 0.018);
}

body.light-mode .ind-col-being-edited {
    background: rgba(46, 134, 171, 0.12) !important;
    outline-color: rgba(46, 134, 171, 0.35);
}

body.light-mode .ind-val {
    color: #273341;
}

body.light-mode .ind-val-baseline {
    color: #647181;
}

body.light-mode .indicator-baseline-note {
    color: #54606C;
}

body.light-mode .ind-val-target {
    color: #2E86AB;
}

body.light-mode .ind-val-actual {
    color: #1D4A76;
}

body.light-mode .ind-val-empty {
    color: #C8CFD6;
}

body.light-mode .ind-notes-icon {
    color: #7D8894;
}

body.light-mode .ind-notes-icon:hover {
    color: #2E86AB;
}

body.light-mode .ind-row-target {
    background: rgba(46, 134, 171, 0.035);
}

body.light-mode .ind-row-actual {
    background: rgba(16, 46, 91, 0.03);
}

body.light-mode .ind-row-edit .ind-td-label,
body.light-mode .ind-td-edit,
body.light-mode .ind-td-add-col {
    background: #F6F8FB;
}

body.light-mode .ind-edit-btn {
    color: #6C7885;
}

body.light-mode .ind-delete-btn {
    color: #8C98A4;
}

body.light-mode .ind-edit-btn:hover {
    background: #EAF4FA;
    border-color: #2E86AB;
    color: #1D4A76;
}

body.light-mode .ind-delete-btn:hover {
    background: #FDEDEC;
    border-color: #C0392B;
    color: #C0392B;
}

body.light-mode .ind-add-col-btn {
    border-color: #C7D0DA;
    color: #7D8894;
}

body.light-mode .ind-add-col-btn:hover {
    border-color: #2E86AB;
    color: #2E86AB;
    background: rgba(46, 134, 171, 0.08);
}

body.light-mode .ind-edit-panel,
body.light-mode .ind-add-year-panel {
    background: linear-gradient(180deg, rgba(249, 251, 253, 0.98), rgba(255, 255, 255, 0.99));
    border-top-color: #2E86AB;
}

body.light-mode .ind-edit-panel-title {
    color: var(--navy);
}

body.light-mode .ind-panel-close {
    color: #6B7784;
}

body.light-mode .ind-panel-close:hover {
    background: #E9EDF2;
    color: #213040;
}

body.light-mode .ind-panel-label {
    color: #7A8590;
}

body.light-mode .ind-panel-label-target {
    color: #2E86AB;
}

body.light-mode .ind-panel-label-actual {
    color: var(--navy);
}

body.light-mode .ind-panel-input {
    background: #FFFFFF;
    border-color: #D9E0E7;
    color: #273341;
}

body.light-mode .ind-panel-input:focus {
    border-color: #2E86AB;
    box-shadow: 0 0 0 3px rgba(46, 134, 171, 0.14);
}

body.light-mode .ind-panel-save {
    background: var(--navy);
}

body.light-mode .ind-panel-save:hover {
    background: var(--navy-dark);
}

body.light-mode .ind-panel-cancel {
    border-color: #D9E0E7;
    color: #5F6872;
}

body.light-mode .ind-panel-cancel:hover {
    background: #F4F7FA;
}

body.light-mode .ind-existing-year-badge {
    background: #F4F6F8;
    border-color: #DCE3E9;
    color: #5F6872;
}

body.light-mode .ind-empty-state {
    background: linear-gradient(180deg, rgba(249, 235, 199, 0.12), rgba(255, 255, 255, 0.92));
}

body.light-mode .ind-empty-icon {
    color: #A7B0B9;
}

body.light-mode .ind-empty-text {
    color: #627080;
}

body.light-mode .ind-btn-add-year {
    border-color: #2E86AB;
    color: #2E86AB;
}

body.light-mode .ind-btn-add-year:hover {
    background: #2E86AB;
    color: var(--white);
}

body.light-mode .ind-btn-remove {
    border-color: #D8E0E7;
    color: #7A8590;
}

body.light-mode .ind-btn-remove:hover {
    border-color: #C0392B;
    color: #C0392B;
}

body.light-mode .indicator-meta-pill,
body.light-mode .indicator-form-note,
body.light-mode .indicator-years-hint,
body.light-mode .indicator-link-context,
body.light-mode .indicator-library-summary {
    background: linear-gradient(180deg, rgba(255, 252, 246, 0.96), rgba(255, 255, 255, 0.99));
    border-color: rgba(16, 46, 91, 0.10);
    color: #55616F;
}

body.light-mode .indicator-meta-code {
    background: #ECF6FD;
    border-color: #C5DDF2;
    color: var(--gray-900);
}

body.light-mode .indicator-library-stat-value {
    color: var(--gray-900);
}

/* ── Indicator master table view ───────────────────────────────── */
.ind-master-wrap {
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--white);
}

.ind-master-table {
    margin: 0;
    min-width: 1080px;
    --bs-table-bg: transparent;
}

.ind-master-table thead th {
    background: linear-gradient(180deg, rgba(249, 235, 199, 0.38), rgba(255, 255, 255, 0.98));
    color: var(--navy);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    border-bottom: 1px solid rgba(16, 46, 91, 0.12);
    white-space: nowrap;
}

.ind-master-group + .ind-master-group {
    border-top: 2px solid rgba(16, 46, 91, 0.08);
}

.ind-master-row > td {
    border-bottom: 1px solid rgba(16, 46, 91, 0.06);
    vertical-align: middle;
}

.ind-master-current-row > td {
    background: rgba(46, 134, 171, 0.05);
}

.ind-master-indicator-cell {
    min-width: 240px;
    background: rgba(249, 251, 253, 0.95);
}

.ind-master-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--navy);
    margin-bottom: 8px;
    line-height: 1.35;
}

.ind-master-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.ind-master-mini-btn,
.ind-master-action-btn,
.ind-master-note-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    border-radius: 8px;
    border: 1px solid var(--gray-200);
    background: transparent;
    color: var(--gray-700);
    transition: background 0.12s, border-color 0.12s, color 0.12s;
}

.ind-master-mini-btn {
    padding: 4px 9px;
    font-size: 11px;
    font-weight: 600;
}

.ind-master-action-btn,
.ind-master-note-btn {
    width: 30px;
    height: 30px;
    font-size: 13px;
}

.ind-master-mini-btn:hover,
.ind-master-mini-btn.is-open,
.ind-master-action-btn:hover,
.ind-master-action-btn.is-open,
.ind-master-note-btn:hover {
    background: rgba(46, 134, 171, 0.10);
    border-color: #2E86AB;
    color: #1D4A76;
}

.ind-master-mini-btn-danger:hover,
.ind-master-action-btn.danger:hover {
    background: #FDEDEC;
    border-color: #C0392B;
    color: #C0392B;
}

.ind-master-attr-cell {
    color: var(--gray-700);
    white-space: nowrap;
}

.ind-master-year-cell {
    white-space: nowrap;
}

.ind-master-year-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 58px;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid var(--gray-200);
    background: var(--gray-50);
    color: var(--gray-700);
    font-size: 12px;
    font-weight: 700;
}

.ind-master-year-pill.is-current {
    background: rgba(46, 134, 171, 0.14);
    border-color: rgba(46, 134, 171, 0.28);
    color: #1D4A76;
}

.ind-master-value {
    font-size: 13px;
    font-weight: 500;
}

.ind-master-value-baseline {
    color: var(--gray-700);
}

.ind-master-baseline-note {
    margin-top: 3px;
    font-size: 10px;
    color: var(--gray-500);
}

.ind-master-value-target {
    color: #2E86AB;
    font-weight: 600;
}

.ind-master-value-actual {
    color: var(--navy);
    font-weight: 700;
}

.ind-master-empty {
    color: #C9CED4;
}

.ind-master-actions-cell {
    white-space: nowrap;
}

.ind-master-editor-row > td {
    background: #F8FAFC;
    padding: 0;
    border-bottom: 1px solid rgba(16, 46, 91, 0.08);
}

.ind-inline-panel {
    padding: 14px 16px;
    border-top: 2px solid #2E86AB;
}

.ind-inline-baseline-note {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 10px 12px;
    margin-bottom: 12px;
    border-radius: 10px;
    background: rgba(16, 46, 91, 0.04);
    border: 1px solid rgba(16, 46, 91, 0.08);
    color: var(--gray-900);
    font-size: 12px;
    font-weight: 500;
}

.ind-inline-baseline-value {
    font-weight: 700;
}

.ind-inline-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.ind-inline-panel-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--navy);
    display: flex;
    align-items: center;
    gap: 6px;
}

.ind-inline-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--gray-700);
}

.ind-inline-close:hover {
    background: var(--gray-100);
}

.ind-inline-fields {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 12px;
}

.ind-inline-field label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--gray-500);
    margin-bottom: 4px;
}

.ind-inline-panel .form-control {
    background: #FFFFFF;
    border-color: #D4DCE5;
    color: #111111;
    font-weight: 500;
}

.ind-inline-panel .form-control::placeholder {
    color: #7A8792;
}

.ind-inline-panel .form-control:focus {
    background: #FFFFFF;
    border-color: #2E86AB;
    color: #111111;
    box-shadow: 0 0 0 3px rgba(46, 134, 171, 0.14);
}

.ind-inline-field-notes {
    grid-column: span 2;
}

.ind-inline-field-year {
    max-width: 150px;
}

.ind-inline-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

@media (max-width: 991.98px) {
    .ind-master-table {
        min-width: 980px;
    }
}

@media (prefers-color-scheme: dark) {
    :where(html:not([data-theme="light"]):not(.light-mode)) .ind-master-wrap {
        background: #161B25;
        border-color: #1E2D3D;
    }

    :where(html:not([data-theme="light"]):not(.light-mode)) .ind-master-table thead th {
        background: #1F3A5F;
        color: #E8F4FD;
        border-bottom-color: #2E5C8A;
    }

    :where(html:not([data-theme="light"]):not(.light-mode)) .ind-master-group + .ind-master-group {
        border-top-color: #1E2D3D;
    }

    :where(html:not([data-theme="light"]):not(.light-mode)) .ind-master-row > td {
        border-bottom-color: #1E2D3D;
        color: #D4D8E2;
    }

    :where(html:not([data-theme="light"]):not(.light-mode)) .ind-master-current-row > td {
        background: rgba(46, 134, 171, 0.10);
    }

    :where(html:not([data-theme="light"]):not(.light-mode)) .ind-master-indicator-cell {
        background: #1A2236;
    }

    :where(html:not([data-theme="light"]):not(.light-mode)) .ind-master-title,
    :where(html:not([data-theme="light"]):not(.light-mode)) .ind-inline-panel-title {
        color: #A8D4F5;
    }

    :where(html:not([data-theme="light"]):not(.light-mode)) .ind-master-mini-btn,
    :where(html:not([data-theme="light"]):not(.light-mode)) .ind-master-action-btn,
    :where(html:not([data-theme="light"]):not(.light-mode)) .ind-master-note-btn {
        border-color: #2E3D52;
        color: #B0C4D8;
    }

    :where(html:not([data-theme="light"]):not(.light-mode)) .ind-master-mini-btn:hover,
    :where(html:not([data-theme="light"]):not(.light-mode)) .ind-master-mini-btn.is-open,
    :where(html:not([data-theme="light"]):not(.light-mode)) .ind-master-action-btn:hover,
    :where(html:not([data-theme="light"]):not(.light-mode)) .ind-master-action-btn.is-open,
    :where(html:not([data-theme="light"]):not(.light-mode)) .ind-master-note-btn:hover {
        background: #0D2E3D;
        border-color: #2E86AB;
        color: #5BB8D4;
    }

    :where(html:not([data-theme="light"]):not(.light-mode)) .ind-master-mini-btn-danger:hover,
    :where(html:not([data-theme="light"]):not(.light-mode)) .ind-master-action-btn.danger:hover {
        background: #2D1010;
        border-color: #C0392B;
        color: #F07070;
    }

    :where(html:not([data-theme="light"]):not(.light-mode)) .ind-master-attr-cell {
        color: #B9C7D8;
    }

    :where(html:not([data-theme="light"]):not(.light-mode)) .ind-master-year-pill {
        background: #1A2236;
        border-color: #2E3D52;
        color: #B0C4D8;
    }

    :where(html:not([data-theme="light"]):not(.light-mode)) .ind-master-year-pill.is-current {
        background: rgba(46, 134, 171, 0.18);
        border-color: rgba(46, 134, 171, 0.36);
        color: #5BB8D4;
    }

:where(html:not([data-theme="light"]):not(.light-mode)) .ind-master-value-baseline {
    color: #B0C4D8;
}

:where(html:not([data-theme="light"]):not(.light-mode)) .ind-master-baseline-note {
    color: #7A8799;
}

    :where(html:not([data-theme="light"]):not(.light-mode)) .ind-master-value-target {
        color: #5BB8D4;
    }

    :where(html:not([data-theme="light"]):not(.light-mode)) .ind-master-value-actual {
        color: #A8D4F5;
    }

    :where(html:not([data-theme="light"]):not(.light-mode)) .ind-master-empty {
        color: #3A4A5A;
    }

    :where(html:not([data-theme="light"]):not(.light-mode)) .ind-master-editor-row > td {
        background: #1A2236;
        border-bottom-color: #1E2D3D;
    }

    :where(html:not([data-theme="light"]):not(.light-mode)) .ind-inline-baseline-note {
        background: #0D2233;
        border-color: #1A5270;
        color: #D4D8E2;
    }

    :where(html:not([data-theme="light"]):not(.light-mode)) .ind-inline-panel {
        border-top-color: #2E86AB;
    }

    :where(html:not([data-theme="light"]):not(.light-mode)) .ind-inline-close {
        color: #B0C4D8;
    }

    :where(html:not([data-theme="light"]):not(.light-mode)) .ind-inline-close:hover {
        background: #2E3D52;
    }

    :where(html:not([data-theme="light"]):not(.light-mode)) .ind-inline-field label {
        color: #7A8799;
    }

    :where(html:not([data-theme="light"]):not(.light-mode)) .ind-inline-panel .form-control {
        background: #0F1117;
        border-color: #2E3D52;
        color: #E2E4E9;
    }

    :where(html:not([data-theme="light"]):not(.light-mode)) .ind-inline-panel .form-control::placeholder {
        color: #6B7A90;
    }

    :where(html:not([data-theme="light"]):not(.light-mode)) .ind-inline-panel .form-control:focus {
        background: #0F1117;
        border-color: #2E86AB;
        color: #E2E4E9;
        box-shadow: 0 0 0 3px rgba(46, 134, 171, 0.22);
    }
}

body.dark-mode .ind-master-wrap {
    background: #161B25;
    border-color: #1E2D3D;
}

body.dark-mode .ind-master-table thead th {
    background: #1F3A5F;
    color: #E8F4FD;
    border-bottom-color: #2E5C8A;
}

body.dark-mode .ind-master-group + .ind-master-group {
    border-top-color: #1E2D3D;
}

body.dark-mode .ind-master-row > td {
    border-bottom-color: #1E2D3D;
    color: #D4D8E2;
}

body.dark-mode .ind-master-current-row > td {
    background: rgba(46, 134, 171, 0.10);
}

body.dark-mode .ind-master-indicator-cell {
    background: #1A2236;
}

body.dark-mode .ind-master-title,
body.dark-mode .ind-inline-panel-title {
    color: #A8D4F5;
}

body.dark-mode .ind-master-mini-btn,
body.dark-mode .ind-master-action-btn,
body.dark-mode .ind-master-note-btn {
    border-color: #2E3D52;
    color: #B0C4D8;
}

body.dark-mode .ind-master-mini-btn:hover,
body.dark-mode .ind-master-mini-btn.is-open,
body.dark-mode .ind-master-action-btn:hover,
body.dark-mode .ind-master-action-btn.is-open,
body.dark-mode .ind-master-note-btn:hover {
    background: #0D2E3D;
    border-color: #2E86AB;
    color: #5BB8D4;
}

body.dark-mode .ind-master-mini-btn-danger:hover,
body.dark-mode .ind-master-action-btn.danger:hover {
    background: #2D1010;
    border-color: #C0392B;
    color: #F07070;
}

body.dark-mode .ind-master-attr-cell {
    color: #B9C7D8;
}

body.dark-mode .ind-master-year-pill {
    background: #1A2236;
    border-color: #2E3D52;
    color: #B0C4D8;
}

body.dark-mode .ind-master-year-pill.is-current {
    background: rgba(46, 134, 171, 0.18);
    border-color: rgba(46, 134, 171, 0.36);
    color: #5BB8D4;
}

body.dark-mode .ind-master-value-baseline {
    color: #B0C4D8;
}

body.dark-mode .ind-master-baseline-note {
    color: #7A8799;
}

body.dark-mode .ind-master-value-target {
    color: #5BB8D4;
}

body.dark-mode .ind-master-value-actual {
    color: #A8D4F5;
}

body.dark-mode .ind-master-empty {
    color: #3A4A5A;
}

body.dark-mode .ind-master-editor-row > td {
    background: #1A2236;
    border-bottom-color: #1E2D3D;
}

body.dark-mode .ind-inline-baseline-note {
    background: #0D2233;
    border-color: #1A5270;
    color: #D4D8E2;
}

body.dark-mode .ind-inline-close {
    color: #B0C4D8;
}

body.dark-mode .ind-inline-close:hover {
    background: #2E3D52;
}

body.dark-mode .ind-inline-field label {
    color: #7A8799;
}

body.dark-mode .ind-inline-panel .form-control {
    background: #0F1117;
    border-color: #2E3D52;
    color: #E2E4E9;
}

body.dark-mode .ind-inline-panel .form-control::placeholder {
    color: #6B7A90;
}

body.dark-mode .ind-inline-panel .form-control:focus {
    background: #0F1117;
    border-color: #2E86AB;
    color: #E2E4E9;
    box-shadow: 0 0 0 3px rgba(46, 134, 171, 0.22);
}

body.light-mode .ind-master-wrap {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(250, 252, 255, 0.97));
    border-color: rgba(16, 46, 91, 0.12);
}

body.light-mode .ind-master-table thead th {
    background: linear-gradient(180deg, rgba(249, 235, 199, 0.38), rgba(255, 255, 255, 0.98));
    color: var(--gray-900);
}

body.light-mode .ind-master-indicator-cell {
    background: rgba(249, 251, 253, 0.95);
}

body.light-mode .ind-inline-baseline-note {
    background: rgba(16, 46, 91, 0.05);
    border-color: rgba(16, 46, 91, 0.10);
    color: #111111;
}

body.light-mode .ind-master-year-cell {
    background: rgba(255, 255, 255, 0.96);
}

body.light-mode .ind-master-title,
body.light-mode .ind-master-attr-cell,
body.light-mode .ind-master-year-pill,
body.light-mode .ind-master-value,
body.light-mode .ind-master-baseline-note,
body.light-mode .ind-inline-panel-title,
body.light-mode .ind-inline-field label,
body.light-mode .indicator-meta-pill,
body.light-mode .indicator-form-note,
body.light-mode .indicator-years-hint,
body.light-mode .indicator-link-context,
body.light-mode .indicator-library-stat-label {
    color: var(--gray-900);
}

body.light-mode .ind-master-value-target,
body.light-mode .ind-master-value-actual,
body.light-mode .ind-val-target,
body.light-mode .ind-val-actual,
body.light-mode .ind-panel-label-target,
body.light-mode .ind-panel-label-actual {
    color: var(--gray-900);
}

body.light-mode .ind-master-year-pill {
    background: #FFFFFF;
    border-color: #B7C4D1;
    color: #111111;
    box-shadow: inset 0 0 0 1px rgba(16, 46, 91, 0.04);
}

body.light-mode .ind-master-year-pill.is-current {
    background: rgba(46, 134, 171, 0.16);
    border-color: rgba(46, 134, 171, 0.42);
    color: #111111;
}

body.light-mode .ind-inline-field label,
body.light-mode .ind-inline-panel-title,
body.light-mode .ind-inline-panel .form-control {
    color: #111111;
}

body.light-mode .ind-inline-panel .form-control {
    background: #FFFFFF;
    border-color: #C9D3DD;
}

body.light-mode .ind-inline-panel .form-control::placeholder {
    color: #73808B;
}

body.light-mode .ind-master-table {
    --bs-table-bg: transparent !important;
    --bs-table-striped-bg: transparent !important;
    --bs-table-hover-bg: rgba(16, 46, 91, 0.02) !important;
    --bs-table-border-color: rgba(16, 46, 91, 0.08) !important;
    --bs-table-color: #111111 !important;
    color: #111111 !important;
}

body.light-mode .ind-master-table > :not(caption) > * > * {
    background-color: transparent !important;
    color: #111111 !important;
    border-bottom-color: rgba(16, 46, 91, 0.08) !important;
}

body.light-mode .ind-master-table thead th {
    color: #111111 !important;
}

body.light-mode .ind-master-indicator-cell {
    background: rgba(249, 251, 253, 0.95) !important;
}

body.light-mode .ind-master-year-cell {
    background: rgba(255, 255, 255, 0.96) !important;
}

body.light-mode .ind-master-title,
body.light-mode .ind-master-attr-cell,
body.light-mode .ind-master-year-pill,
body.light-mode .ind-master-value,
body.light-mode .ind-master-baseline-note,
body.light-mode .ind-inline-panel-title,
body.light-mode .ind-inline-field label,
body.light-mode .ind-inline-baseline-note,
body.light-mode .indicator-meta-pill,
body.light-mode .indicator-form-note,
body.light-mode .indicator-years-hint,
body.light-mode .indicator-link-context,
body.light-mode .indicator-library-stat-label,
body.light-mode .indicator-library-stat-value {
    color: #111111 !important;
}

body.light-mode .ind-master-year-pill {
    background: #FFFFFF !important;
    border-color: #B7C4D1 !important;
    color: #111111 !important;
}

body.light-mode .ind-master-year-pill.is-current {
    background: rgba(46, 134, 171, 0.16) !important;
    border-color: rgba(46, 134, 171, 0.42) !important;
    color: #111111 !important;
}

body.light-mode .ind-master-editor-row > td {
    background: #F8FAFC !important;
    color: #111111 !important;
    border-bottom-color: rgba(16, 46, 91, 0.08) !important;
}

body.light-mode .ind-inline-panel {
    background: linear-gradient(180deg, rgba(249, 251, 253, 0.98), rgba(255, 255, 255, 0.99)) !important;
    color: #111111 !important;
}

body.light-mode .ind-inline-baseline-note {
    background: rgba(16, 46, 91, 0.05) !important;
    border-color: rgba(16, 46, 91, 0.10) !important;
}

body.light-mode .ind-inline-close {
    color: #213040 !important;
}

body.light-mode .ind-inline-close:hover {
    background: #E9EDF2 !important;
    color: #111111 !important;
}

body.light-mode .ind-inline-panel .form-control {
    background: #FFFFFF !important;
    border-color: #C9D3DD !important;
    color: #111111 !important;
}

body.light-mode .ind-inline-panel .form-control::placeholder {
    color: #73808B !important;
    opacity: 1;
}

body.light-mode .ind-inline-panel .form-control:focus {
    background: #FFFFFF !important;
    border-color: #2E86AB !important;
    color: #111111 !important;
    box-shadow: 0 0 0 3px rgba(46, 134, 171, 0.14) !important;
}

body.light-mode .ind-inline-actions .btn-outline-secondary {
    background: #FFFFFF !important;
    border-color: #C9D3DD !important;
    color: #213040 !important;
}

body.light-mode .ind-inline-actions .btn-outline-secondary:hover {
    background: #F4F7FA !important;
    color: #111111 !important;
}

body.light-mode .ind-inline-actions .btn-primary {
    background: var(--navy) !important;
    border-color: var(--navy) !important;
    color: #FFFFFF !important;
}

/* ══════════════════════════════════════════════════════════════
   PROFILE WORKSPACE
   ══════════════════════════════════════════════════════════════ */

.user-avatar,
.profile-avatar {
    overflow: hidden;
}

.user-avatar img,
.profile-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.profile-shell {
    display: grid;
    gap: 1.5rem;
}

.profile-overview-card,
.profile-section-card {
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: calc(var(--radius) + 4px);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    position: relative;
}

.profile-overview-cover {
    height: 100px;
    background:
        radial-gradient(circle at top right, rgba(199, 154, 44, 0.22), transparent 28%),
        linear-gradient(135deg, rgba(31, 58, 95, 0.12), rgba(46, 134, 171, 0.12));
}

.profile-overview-body {
    display: flex;
    gap: 1rem;
    align-items: flex-end;
    padding: 0 1.5rem 1.4rem;
    margin-top: -38px;
    position: relative;
    z-index: 2;
}

.profile-hero-art {
    position: absolute;
    right: 1rem;
    top: 0.55rem;
    width: 220px;
    height: 220px;
    pointer-events: none;
    z-index: 1;
    opacity: 0.95;
}

.profile-hero-ring {
    position: absolute;
    inset: 20px 0 auto auto;
    width: 160px;
    height: 160px;
    border-radius: 50%;
    background:
        radial-gradient(circle at center, rgba(255,255,255,0.82), rgba(255,255,255,0.08) 58%, transparent 70%),
        radial-gradient(circle at center, rgba(199, 154, 44, 0.22), transparent 72%);
    filter: blur(0.5px);
}

.profile-hero-emblem {
    position: absolute;
    right: 6px;
    top: 10px;
    width: 155px;
    height: 155px;
    object-fit: contain;
    opacity: 0.18;
    transform: rotate(-7deg);
}

.profile-avatar-large {
    width: 84px;
    height: 84px;
    border: 4px solid var(--white);
    box-shadow: var(--shadow-sm);
    font-size: 1.65rem;
}

.profile-avatar-medium {
    width: 68px;
    height: 68px;
    font-size: 1.35rem;
}

.profile-avatar-fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.profile-overview-main {
    min-width: 0;
    flex: 1;
}

.profile-overview-kicker,
.profile-section-kicker {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--gray-500);
    font-weight: 700;
}

.profile-role-line {
    margin-top: 0.35rem;
    color: var(--gray-700);
    font-weight: 600;
}

.profile-role-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.9rem;
    align-items: center;
}

.profile-inline-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.38rem 0.78rem;
    border-radius: 999px;
    background: rgba(46, 134, 171, 0.08);
    border: 1px solid rgba(46, 134, 171, 0.16);
    color: var(--navy);
    font-size: 0.82rem;
    font-weight: 700;
}

.profile-meta-grid-compact {
    padding: 0 1.5rem 1.5rem;
}

.profile-workspace-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(320px, 0.95fr);
    gap: 1.5rem;
}

.profile-section-head {
    padding: 1.35rem 1.45rem 1rem;
    border-bottom: 1px solid var(--gray-100);
    position: relative;
    overflow: hidden;
}

.profile-section-art {
    position: absolute;
    right: 0.9rem;
    top: 0.6rem;
    width: 118px;
    height: 118px;
    pointer-events: none;
    z-index: 0;
}

.profile-section-art-glow {
    position: absolute;
    right: 4px;
    top: 8px;
    width: 88px;
    height: 88px;
    border-radius: 50%;
    background:
        radial-gradient(circle at center, rgba(199, 154, 44, 0.12), transparent 68%),
        radial-gradient(circle at center, rgba(46, 134, 171, 0.08), transparent 72%);
}

.profile-section-art-image {
    position: absolute;
    right: 2px;
    top: 4px;
    width: 84px;
    height: 84px;
    object-fit: contain;
    opacity: 0.1;
    transform: rotate(-10deg);
}

.profile-section-art-security .profile-section-art-image {
    transform: rotate(8deg);
}

.profile-section-title {
    margin: 0.2rem 0 0;
    color: var(--navy);
    position: relative;
    z-index: 1;
}

.profile-section-copy {
    color: var(--gray-600);
    position: relative;
    z-index: 1;
}

.profile-section-kicker {
    position: relative;
    z-index: 1;
}

.profile-form {
    padding: 1.35rem 1.45rem 1.45rem;
}

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

.profile-form-field-wide {
    grid-column: 1 / -1;
}

.profile-form-field .form-label {
    font-weight: 700;
    color: var(--gray-700);
    margin-bottom: 0.4rem;
}

.profile-form-field .form-control {
    min-height: 46px;
    border-radius: 12px;
    border: 1px solid var(--gray-200);
    background: var(--white);
    color: var(--gray-900);
    box-shadow: none;
}

.profile-form-field .form-control:focus {
    border-color: rgba(46, 134, 171, 0.48);
    box-shadow: 0 0 0 4px rgba(46, 134, 171, 0.12);
}

.profile-field-hint {
    margin-top: 0.45rem;
    color: var(--gray-500);
    font-size: 0.82rem;
}

.profile-form .field-error {
    color: var(--red);
}

.profile-help-list ul {
    margin: 0.45rem 0 0;
    padding-left: 1rem;
}

.profile-help-list li {
    margin-bottom: 0.2rem;
}

.profile-upload-card {
    margin-top: 1.25rem;
    padding: 1rem 1.05rem;
    border: 1px dashed var(--gray-200);
    border-radius: var(--radius);
    background: linear-gradient(180deg, rgba(248, 250, 252, 0.96), rgba(255, 255, 255, 0.98));
}

.profile-upload-head {
    margin-bottom: 0.9rem;
}

.profile-upload-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--navy);
}

.profile-upload-copy {
    color: var(--gray-500);
    font-size: 0.84rem;
    margin-top: 0.2rem;
}

.profile-upload-body {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1rem;
    align-items: center;
}

.profile-upload-fields .form-control[type="file"] {
    padding: 0.7rem 0.9rem;
}

.profile-form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.25rem;
}

@media (max-width: 991.98px) {
    .profile-workspace-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767.98px) {
    .profile-overview-body {
        flex-direction: column;
        align-items: flex-start;
        margin-top: -28px;
    }

    .profile-form-grid,
    .profile-password-grid,
    .profile-meta-grid {
        grid-template-columns: 1fr;
    }

    .profile-upload-body {
        grid-template-columns: 1fr;
    }

    .profile-hero-art {
        width: 150px;
        height: 150px;
        right: 0.4rem;
        top: 0.4rem;
    }

    .profile-hero-ring {
        width: 110px;
        height: 110px;
    }

    .profile-hero-emblem {
        width: 105px;
        height: 105px;
    }

    .profile-section-art {
        width: 92px;
        height: 92px;
    }

    .profile-section-art-image {
        width: 64px;
        height: 64px;
    }
}

html[data-theme="dark"] .profile-overview-card,
html[data-theme="dark"] .profile-section-card,
html[data-theme="dark"] .profile-upload-card,
html[data-theme="dark"] .profile-meta-item,
body.dark-mode .profile-overview-card,
body.dark-mode .profile-section-card,
body.dark-mode .profile-upload-card,
body.dark-mode .profile-meta-item {
    background: linear-gradient(180deg, rgba(19, 32, 51, 0.98), rgba(13, 23, 38, 0.96)) !important;
    border-color: rgba(148, 163, 184, 0.16) !important;
}

html[data-theme="dark"] .profile-overview-cover,
body.dark-mode .profile-overview-cover {
    background:
        radial-gradient(circle at top right, rgba(199, 154, 44, 0.18), transparent 28%),
        linear-gradient(135deg, rgba(31, 58, 95, 0.34), rgba(46, 134, 171, 0.20));
}

html[data-theme="dark"] .profile-hero-ring,
body.dark-mode .profile-hero-ring {
    background:
        radial-gradient(circle at center, rgba(255,255,255,0.18), rgba(255,255,255,0.04) 58%, transparent 70%),
        radial-gradient(circle at center, rgba(199, 154, 44, 0.18), transparent 72%);
}

html[data-theme="dark"] .profile-hero-emblem,
body.dark-mode .profile-hero-emblem {
    opacity: 0.12;
}

html[data-theme="dark"] .profile-section-art-glow,
body.dark-mode .profile-section-art-glow {
    background:
        radial-gradient(circle at center, rgba(199, 154, 44, 0.10), transparent 68%),
        radial-gradient(circle at center, rgba(91, 184, 212, 0.08), transparent 72%);
}

html[data-theme="dark"] .profile-section-art-image,
body.dark-mode .profile-section-art-image {
    opacity: 0.08;
}

html[data-theme="dark"] .profile-avatar-large,
body.dark-mode .profile-avatar-large {
    border-color: rgba(19, 32, 51, 0.96);
}

html[data-theme="dark"] .profile-role-line,
html[data-theme="dark"] .profile-section-copy,
html[data-theme="dark"] .profile-field-hint,
html[data-theme="dark"] .profile-upload-copy,
body.dark-mode .profile-role-line,
body.dark-mode .profile-section-copy,
body.dark-mode .profile-field-hint,
body.dark-mode .profile-upload-copy {
    color: #94A3B8 !important;
}

html[data-theme="dark"] .profile-inline-chip,
body.dark-mode .profile-inline-chip {
    background: rgba(46, 134, 171, 0.16);
    border-color: rgba(91, 184, 212, 0.22);
    color: #DDEAF5;
}

html[data-theme="dark"] .profile-form-field .form-label,
body.dark-mode .profile-form-field .form-label {
    color: #D6E0EE;
}

html[data-theme="dark"] .profile-form-field .form-control,
body.dark-mode .profile-form-field .form-control {
    background: #0F1117 !important;
    border-color: #2E3D52 !important;
    color: #E2E4E9 !important;
}

html[data-theme="dark"] .profile-form-field .form-control::placeholder,
body.dark-mode .profile-form-field .form-control::placeholder {
    color: #7A8799 !important;
}

html[data-theme="dark"] .profile-form-field .form-control:focus,
body.dark-mode .profile-form-field .form-control:focus {
    border-color: #2E86AB !important;
    box-shadow: 0 0 0 4px rgba(46, 134, 171, 0.18);
}

html[data-theme="dark"] .profile-upload-title,
body.dark-mode .profile-upload-title {
    color: #E2E4E9;
}

html[data-theme="dark"] .profile-form .field-error,
body.dark-mode .profile-form .field-error {
    color: #F07070 !important;
}

/* ══════════════════════════════════════════════════════════════
   ABOUT PAGE — Three.js + editorial layout
   ══════════════════════════════════════════════════════════════ */

.about-page {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    padding-bottom: 1rem;
}

.about-hero {
    position: relative;
    overflow: hidden;
    min-height: 520px;
    border-radius: 28px;
    padding: clamp(2rem, 4vw, 4.25rem);
    background:
        radial-gradient(circle at 15% 20%, rgba(46, 134, 171, 0.12), transparent 24%),
        radial-gradient(circle at 82% 12%, rgba(199, 154, 44, 0.18), transparent 24%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(245, 248, 252, 0.95) 50%, rgba(232, 241, 248, 0.98));
    border: 1px solid rgba(16, 46, 91, 0.08);
    box-shadow: 0 28px 64px rgba(16, 46, 91, 0.10);
    isolation: isolate;
}

.about-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(115deg, rgba(255, 255, 255, 0.30), transparent 38%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.16), transparent 42%);
    pointer-events: none;
    z-index: 0;
}

.about-hero-inner {
    position: relative;
    z-index: 2;
    min-height: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1.18fr) minmax(300px, 0.82fr);
    gap: clamp(1.5rem, 3vw, 2.75rem);
    align-items: center;
}

.about-hero-text {
    max-width: 720px;
}

.about-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.85rem;
    border-radius: 999px;
    background: rgba(16, 46, 91, 0.08);
    border: 1px solid rgba(16, 46, 91, 0.10);
    color: var(--navy);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    width: fit-content;
}

.about-title {
    margin: 1.05rem 0 0;
    font-size: clamp(2.55rem, 4vw, 4.35rem);
    line-height: 0.98;
    letter-spacing: -0.04em;
    color: var(--navy-dark);
}

.about-subtitle {
    margin: 1.2rem 0 0;
    max-width: 690px;
    font-size: 1.03rem;
    line-height: 1.8;
    color: rgba(16, 46, 91, 0.80);
}

.about-hero-stats {
    margin-top: 1.75rem;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: stretch;
    padding: 1rem 1.15rem;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(16, 46, 91, 0.08);
    backdrop-filter: blur(12px);
    box-shadow: 0 18px 42px rgba(16, 46, 91, 0.08);
}

.about-stat {
    display: flex;
    flex-direction: column;
    min-width: 140px;
    gap: 0.25rem;
}

.about-stat-num {
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 3vw, 2.4rem);
    font-weight: 700;
    color: var(--navy-dark);
    letter-spacing: -0.05em;
}

.about-stat-label {
    color: var(--gray-700);
    font-size: 0.82rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.about-stat-divider {
    width: 1px;
    align-self: stretch;
    background: linear-gradient(180deg, rgba(16, 46, 91, 0), rgba(16, 46, 91, 0.12), rgba(16, 46, 91, 0));
}

.about-hero-visual {
    display: flex;
    justify-content: flex-end;
}

.about-score-preview {
    width: min(100%, 390px);
    padding: 1.35rem 1.2rem 1.2rem;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.80);
    border: 1px solid rgba(16, 46, 91, 0.10);
    backdrop-filter: blur(12px);
    box-shadow: 0 26px 48px rgba(16, 46, 91, 0.12);
}

.asp-label {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 1rem;
    color: var(--navy-dark);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.asp-bars {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.asp-bar-row {
    display: grid;
    grid-template-columns: 94px minmax(0, 1fr) 44px;
    gap: 0.7rem;
    align-items: center;
}

.asp-bar-label {
    font-size: 0.84rem;
    font-weight: 700;
}

.asp-bar-track {
    position: relative;
    height: 10px;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(16, 46, 91, 0.08);
}

.asp-bar-fill {
    height: 100%;
    border-radius: inherit;
    transition: width 0.85s cubic-bezier(.22, 1, .36, 1);
}

.asp-bar-pct {
    text-align: right;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--gray-700);
}

.score-5-color { color: #1A7A4A; }
.score-4-color { color: #2E86AB; }
.score-3-color { color: #B9770E; }
.score-2-color { color: #D96A0B; }
.score-1-color { color: #C0392B; }

.asp-fill-5 { background: linear-gradient(90deg, #6DD49A, #1A7A4A); }
.asp-fill-4 { background: linear-gradient(90deg, #8FD3E8, #2E86AB); }
.asp-fill-3 { background: linear-gradient(90deg, #F8DA7E, #D39B18); }
.asp-fill-2 { background: linear-gradient(90deg, #F7B267, #E8600A); }
.asp-fill-1 { background: linear-gradient(90deg, #F28B82, #C0392B); }

.about-section {
    position: relative;
    border-radius: 26px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.76);
    border: 1px solid rgba(16, 46, 91, 0.08);
    box-shadow: 0 20px 46px rgba(16, 46, 91, 0.08);
}

.about-section-inner {
    padding: clamp(1.75rem, 3vw, 3rem);
}

.about-section-dark {
    background:
        radial-gradient(circle at top left, rgba(91, 184, 212, 0.10), transparent 28%),
        radial-gradient(circle at top right, rgba(255, 213, 128, 0.10), transparent 24%),
        linear-gradient(145deg, #0D1727 0%, #12233A 52%, #10243D 100%);
    border-color: rgba(91, 184, 212, 0.12);
    box-shadow: 0 28px 64px rgba(7, 14, 24, 0.34);
}

.about-section-header {
    max-width: 760px;
}

.about-section-label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--navy);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.about-section-title {
    margin: 0.8rem 0 0;
    color: var(--navy-dark);
    font-size: clamp(2rem, 3vw, 3rem);
    line-height: 1.03;
}

.about-section-desc {
    margin: 0.95rem 0 0;
    color: rgba(16, 46, 91, 0.72);
    font-size: 1rem;
    line-height: 1.8;
}

.about-purpose-stage {
    position: relative;
    margin-top: 2rem;
    padding: 1.55rem;
    min-height: 340px;
    border-radius: 26px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 0.85fr) minmax(0, 1fr);
    gap: 1.2rem;
    align-items: center;
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 50%, rgba(46, 134, 171, 0.10), transparent 36%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(246, 249, 252, 0.88));
    border: 1px solid rgba(16, 46, 91, 0.08);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72), 0 18px 36px rgba(16, 46, 91, 0.06);
    isolation: isolate;
}

.about-purpose-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    opacity: 0.92;
    pointer-events: none;
    filter: saturate(1.06);
}

.about-purpose-stage::before {
    content: "";
    position: absolute;
    inset: -20% auto auto -8%;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: radial-gradient(circle at center, rgba(199, 154, 44, 0.10), transparent 72%);
    pointer-events: none;
    animation: about-purpose-atmosphere 11s ease-in-out infinite;
}

.about-purpose-stage::after {
    content: "";
    position: absolute;
    inset: auto -6% -26% auto;
    width: 240px;
    height: 240px;
    border-radius: 50%;
    background: radial-gradient(circle at center, rgba(46, 134, 171, 0.08), transparent 72%);
    pointer-events: none;
    animation: about-purpose-atmosphere-reverse 13s ease-in-out infinite;
}

.about-purpose-stage > *:not(.about-purpose-canvas) {
    position: relative;
    z-index: 2;
}

.aps-column {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

.aps-column-left {
    align-items: flex-start;
}

.aps-column-right {
    align-items: flex-end;
}

.aps-column-label {
    color: var(--navy);
    font-size: 0.76rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.16em;
}

.aps-token {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    width: fit-content;
    min-height: 44px;
    padding: 0.75rem 0.95rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.86);
    border: 1px solid rgba(16, 46, 91, 0.08);
    color: rgba(16, 46, 91, 0.78);
    font-size: 0.88rem;
    font-weight: 600;
    box-shadow: 0 10px 22px rgba(16, 46, 91, 0.05);
    animation: about-purpose-float 5.8s ease-in-out infinite;
}

.aps-column .aps-token:nth-child(2) { animation-delay: 0s; }
.aps-column .aps-token:nth-child(3) { animation-delay: 0.8s; }
.aps-column .aps-token:nth-child(4) { animation-delay: 1.6s; }

.aps-token-good {
    background: rgba(248, 252, 255, 0.92);
}

.aps-token-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: linear-gradient(135deg, #C79A2C, #2E86AB);
    flex-shrink: 0;
    box-shadow: 0 0 0 6px rgba(46, 134, 171, 0.08);
}

.aps-core {
    position: relative;
    z-index: 1;
    min-height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.aps-core-node {
    position: relative;
    z-index: 2;
    width: min(100%, 300px);
    padding: 1.35rem 1.2rem;
    border-radius: 28px;
    text-align: center;
    background:
        radial-gradient(circle at top, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.18) 120%),
        linear-gradient(155deg, rgba(16, 46, 91, 0.96), rgba(31, 78, 121, 0.96));
    color: var(--white);
    box-shadow: 0 24px 48px rgba(16, 46, 91, 0.18);
}

.aps-core-node::after {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    border: 1px solid rgba(255, 255, 255, 0.18);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    padding: 1px;
    opacity: 0.7;
    pointer-events: none;
}

.aps-scene-caption {
    position: absolute;
    left: 50%;
    bottom: 1rem;
    transform: translateX(-50%);
    z-index: 2;
    width: min(100%, 460px);
    text-align: center;
    color: rgba(16, 46, 91, 0.62);
    font-size: 0.77rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.aps-core-kicker {
    display: inline-flex;
    margin-bottom: 0.55rem;
    padding: 0.3rem 0.65rem;
    border-radius: 999px;
    background: rgba(255, 213, 128, 0.16);
    color: #FFD580;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
}

.aps-core-node strong {
    display: block;
    font-size: 1.12rem;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.aps-core-node small {
    display: block;
    margin-top: 0.6rem;
    color: rgba(226, 228, 233, 0.76);
    line-height: 1.65;
    font-size: 0.82rem;
}

.aps-orbit {
    position: absolute;
    inset: 50% auto auto 50%;
    border-radius: 50%;
    border: 1px dashed rgba(46, 134, 171, 0.22);
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.aps-orbit-one {
    width: 210px;
    height: 210px;
    animation: about-purpose-spin 18s linear infinite;
}

.aps-orbit-two {
    width: 270px;
    height: 270px;
    border-color: rgba(199, 154, 44, 0.16);
    animation: about-purpose-spin-reverse 24s linear infinite;
}

.aps-stream {
    position: absolute;
    top: 50%;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(46, 134, 171, 0.30), transparent);
    transform: translateY(-50%);
    overflow: hidden;
}

.aps-stream::after {
    content: "";
    position: absolute;
    top: -2px;
    left: -20%;
    width: 22%;
    height: 6px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(255, 213, 128, 0), rgba(255, 213, 128, 0.95), rgba(91, 184, 212, 0));
    filter: blur(0.4px);
    animation: about-purpose-flow 3s ease-in-out infinite;
}

.aps-stream-left {
    left: 22%;
    width: 16%;
}

.aps-stream-right {
    right: 22%;
    width: 16%;
}

.aps-three-ready .aps-orbit,
.aps-three-ready .aps-stream {
    opacity: 0;
}

@keyframes about-purpose-atmosphere {
    0%, 100% {
        transform: translate3d(0, 0, 0) scale(1);
        opacity: 0.9;
    }
    50% {
        transform: translate3d(18px, -12px, 0) scale(1.08);
        opacity: 1;
    }
}

@keyframes about-purpose-atmosphere-reverse {
    0%, 100% {
        transform: translate3d(0, 0, 0) scale(1);
        opacity: 0.85;
    }
    50% {
        transform: translate3d(-16px, 12px, 0) scale(1.1);
        opacity: 1;
    }
}

@keyframes about-purpose-spin {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes about-purpose-spin-reverse {
    from { transform: translate(-50%, -50%) rotate(360deg); }
    to { transform: translate(-50%, -50%) rotate(0deg); }
}

@keyframes about-purpose-flow {
    0% {
        left: -22%;
        opacity: 0;
    }
    20% {
        opacity: 1;
    }
    100% {
        left: 105%;
        opacity: 0;
    }
}

@keyframes about-purpose-float {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-4px);
    }
}

.about-feature-grid,
.about-detail-grid {
    margin-top: 2rem;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
}

.about-detail-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.about-feature-card,
.about-detail-card {
    position: relative;
    overflow: hidden;
    padding: 1.3rem 1.15rem 1.2rem;
    border-radius: 20px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(248, 249, 251, 0.86));
    border: 1px solid rgba(16, 46, 91, 0.08);
    box-shadow: 0 12px 30px rgba(16, 46, 91, 0.06);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.about-feature-card::after,
.about-detail-card::after {
    content: "";
    position: absolute;
    inset: auto -18% -38% auto;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background: radial-gradient(circle at center, rgba(46, 134, 171, 0.08), transparent 70%);
    pointer-events: none;
}

.about-feature-card:hover,
.about-detail-card:hover {
    transform: translateY(-4px);
    border-color: rgba(46, 134, 171, 0.16);
    box-shadow: 0 18px 34px rgba(16, 46, 91, 0.10);
}

.about-feature-icon {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(46, 134, 171, 0.14), rgba(199, 154, 44, 0.14));
    color: var(--navy);
    font-size: 1.2rem;
    margin-bottom: 1rem;
    animation: about-purpose-float 5.2s ease-in-out infinite;
}

.about-feature-card:nth-child(2) .about-feature-icon {
    animation-delay: 0.9s;
}

.about-feature-card:nth-child(3) .about-feature-icon {
    animation-delay: 1.4s;
}

.about-feature-card:nth-child(4) .about-feature-icon {
    animation-delay: 2s;
}

.about-feature-card h3,
.about-detail-card h3 {
    margin: 0;
    color: var(--navy-dark);
    font-size: 1.02rem;
    font-weight: 700;
}

.about-feature-card p,
.about-detail-card p {
    margin: 0.8rem 0 0;
    color: rgba(16, 46, 91, 0.72);
    line-height: 1.75;
    font-size: 0.92rem;
}

/* ── Three.js canvases ───────────────────────────────────────── */

.about-hero-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    opacity: 0.55;
}

.hierarchy-3d-wrap {
    position: relative;
    width: 100%;
    height: 520px;
    border-radius: var(--radius-lg, 12px);
    overflow: hidden;
    background: rgba(0, 0, 0, 0.15);
    margin-top: 32px;
    cursor: grab;
    border: 1px solid rgba(91, 184, 212, 0.14);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.hierarchy-3d-wrap:active {
    cursor: grabbing;
}

#hierarchy-canvas {
    display: block;
    width: 100%;
    height: 100%;
}

.h3d-tooltip {
    position: absolute;
    background: rgba(15, 23, 42, 0.92);
    border: 1px solid rgba(46, 134, 171, 0.4);
    border-radius: 8px;
    padding: 10px 14px;
    max-width: 220px;
    pointer-events: none;
    z-index: 10;
    backdrop-filter: blur(4px);
    animation: h3d-tooltip-in 0.2s ease forwards;
}

@keyframes h3d-tooltip-in {
    from {
        opacity: 0;
        transform: translateY(4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.h3d-tooltip-title {
    font-size: 13px;
    font-weight: 700;
    color: #5BB8D4;
    margin-bottom: 5px;
}

.h3d-tooltip-desc {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.65);
    line-height: 1.5;
}

.h3d-legend {
    position: absolute;
    bottom: 48px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    background: rgba(0, 0, 0, 0.35);
    border-radius: 20px;
    padding: 6px 14px;
    backdrop-filter: blur(4px);
}

.h3d-legend-item {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.6);
    white-space: nowrap;
}

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

.h3d-hint {
    position: absolute;
    bottom: 14px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 11px;
    color: rgba(255, 255, 255, 0.3);
    display: flex;
    align-items: center;
    gap: 5px;
    pointer-events: none;
}

.hier-fallback {
    margin-top: 2rem;
    padding: 1rem 1rem 0;
}

.hier-level {
    display: flex;
    justify-content: center;
}

.hier-link {
    width: 2px;
    height: 38px;
    margin: 0.7rem auto;
    background: linear-gradient(180deg, rgba(255, 213, 128, 0), rgba(255, 213, 128, 0.65), rgba(91, 184, 212, 0));
}

.hier-leaf-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.8rem;
}

.hier-node {
    padding: 1rem 1rem 0.95rem;
    border-radius: 18px;
    text-align: center;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.10);
    backdrop-filter: blur(6px);
}

.hier-node-top {
    max-width: 240px;
}

.hier-node-core {
    max-width: 260px;
    background: rgba(46, 134, 171, 0.10);
    border-color: rgba(91, 184, 212, 0.24);
}

.hier-node-icon {
    font-size: 1.4rem;
    color: #FFD580;
    margin-bottom: 0.6rem;
}

.hier-node-core .hier-node-icon {
    color: #5BB8D4;
}

.hier-node-title {
    color: #E2E4E9;
    font-size: 0.92rem;
    font-weight: 700;
}

.hier-node-copy {
    margin-top: 0.45rem;
    color: rgba(255, 255, 255, 0.62);
    font-size: 0.8rem;
    line-height: 1.6;
}

.anim-fade-up,
.anim-fade-left {
    opacity: 0;
    transition-duration: 0.7s;
    transition-timing-function: cubic-bezier(.22, 1, .36, 1);
    will-change: opacity, transform;
}

.anim-fade-up {
    transform: translateY(26px);
}

.anim-fade-left {
    transform: translateX(26px);
}

.anim-fade-up.is-visible,
.anim-fade-left.is-visible {
    opacity: 1;
    transform: translate(0, 0);
}

@media (max-width: 1199.98px) {
    .about-purpose-stage {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .aps-column-right {
        align-items: flex-start;
    }

    .aps-stream {
        display: none;
    }

    .about-feature-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .hier-leaf-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 991.98px) {
    .about-hero-inner {
        grid-template-columns: 1fr;
    }

    .about-hero-visual {
        justify-content: flex-start;
    }

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

@media (max-width: 767.98px) {
    .about-hero {
        border-radius: 22px;
        min-height: auto;
    }

    .about-hero-stats {
        flex-direction: column;
        align-items: flex-start;
    }

    .about-stat-divider {
        width: 100%;
        height: 1px;
    }

    .about-feature-grid,
    .hier-leaf-grid {
        grid-template-columns: 1fr;
    }

    .about-score-preview {
        width: 100%;
    }

    .aps-scene-caption {
        position: relative;
        left: auto;
        bottom: auto;
        transform: none;
        width: 100%;
        margin-top: 0.35rem;
    }

    .asp-bar-row {
        grid-template-columns: 86px minmax(0, 1fr) 40px;
    }
}

@media (max-width: 600px) {
    .hierarchy-3d-wrap {
        height: 380px;
    }

    .h3d-legend {
        gap: 6px;
        padding: 5px 10px;
    }

    .h3d-legend-item {
        font-size: 10px;
    }

    .about-hero {
        padding: 36px 24px;
    }

    .about-title {
        font-size: 26px;
    }
}

/* Respect reduced motion — hide canvas, show fallback */
@media (prefers-reduced-motion: reduce) {
    .about-hero-canvas {
        display: none;
    }

    .about-purpose-canvas {
        display: none;
    }

    .about-purpose-stage::before,
    .about-purpose-stage::after {
        animation: none;
    }

    .hierarchy-3d-wrap {
        display: none;
        height: auto;
        padding: 24px;
        cursor: default;
    }

    #hierarchy-canvas {
        display: none;
    }

    .hier-fallback {
        display: block !important;
    }

    .anim-fade-up,
    .anim-fade-left {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .aps-orbit,
    .aps-stream::after,
    .aps-token,
    .about-feature-icon {
        animation: none !important;
    }
}

@media (prefers-color-scheme: dark) {
    :where(html:not([data-theme="light"]):not(.light-mode)) .about-hero {
        background:
            radial-gradient(circle at 16% 18%, rgba(91, 184, 212, 0.16), transparent 24%),
            radial-gradient(circle at 82% 12%, rgba(255, 213, 128, 0.14), transparent 22%),
            linear-gradient(145deg, #0C1523 0%, #102337 48%, #17395A 100%);
        border-color: rgba(91, 184, 212, 0.12);
        box-shadow: 0 32px 72px rgba(6, 12, 22, 0.34);
    }

    :where(html:not([data-theme="light"]):not(.light-mode)) .about-eyebrow {
        background: rgba(91, 184, 212, 0.12);
        border-color: rgba(91, 184, 212, 0.18);
        color: #D9EDF8;
    }

    :where(html:not([data-theme="light"]):not(.light-mode)) .about-title {
        color: #F7FBFF;
    }

    :where(html:not([data-theme="light"]):not(.light-mode)) .about-subtitle {
        color: #B9CCDB;
    }

    :where(html:not([data-theme="light"]):not(.light-mode)) .about-hero-stats,
    :where(html:not([data-theme="light"]):not(.light-mode)) .about-score-preview,
    :where(html:not([data-theme="light"]):not(.light-mode)) .about-section:not(.about-section-dark),
    :where(html:not([data-theme="light"]):not(.light-mode)) .about-purpose-stage,
    :where(html:not([data-theme="light"]):not(.light-mode)) .about-feature-card,
    :where(html:not([data-theme="light"]):not(.light-mode)) .about-detail-card {
        background: rgba(13, 23, 38, 0.74);
        border-color: rgba(148, 163, 184, 0.14);
        box-shadow: 0 18px 42px rgba(5, 11, 19, 0.28);
    }

    :where(html:not([data-theme="light"]):not(.light-mode)) .about-stat-num,
    :where(html:not([data-theme="light"]):not(.light-mode)) .asp-label,
    :where(html:not([data-theme="light"]):not(.light-mode)) .about-feature-card h3,
    :where(html:not([data-theme="light"]):not(.light-mode)) .about-detail-card h3,
    :where(html:not([data-theme="light"]):not(.light-mode)) .about-section-title {
        color: #E9F3FB;
    }

    :where(html:not([data-theme="light"]):not(.light-mode)) .about-stat-label,
    :where(html:not([data-theme="light"]):not(.light-mode)) .asp-bar-pct,
    :where(html:not([data-theme="light"]):not(.light-mode)) .about-section-desc,
    :where(html:not([data-theme="light"]):not(.light-mode)) .aps-column-label,
    :where(html:not([data-theme="light"]):not(.light-mode)) .about-feature-card p,
    :where(html:not([data-theme="light"]):not(.light-mode)) .about-detail-card p {
        color: #9EB0C0;
    }

    :where(html:not([data-theme="light"]):not(.light-mode)) .about-stat-divider {
        background: linear-gradient(180deg, rgba(91, 184, 212, 0), rgba(91, 184, 212, 0.18), rgba(91, 184, 212, 0));
    }

    :where(html:not([data-theme="light"]):not(.light-mode)) .about-section-label {
        color: #BFD7E8;
    }

    :where(html:not([data-theme="light"]):not(.light-mode)) .about-feature-icon {
        background: linear-gradient(135deg, rgba(91, 184, 212, 0.16), rgba(255, 213, 128, 0.12));
        color: #D8EFFF;
    }

    :where(html:not([data-theme="light"]):not(.light-mode)) .aps-token {
        background: rgba(15, 23, 38, 0.84);
        border-color: rgba(148, 163, 184, 0.14);
        color: #E2E4E9;
        box-shadow: 0 12px 28px rgba(5, 11, 19, 0.20);
    }

    :where(html:not([data-theme="light"]):not(.light-mode)) .aps-token-good {
        background: rgba(18, 35, 55, 0.88);
    }

    :where(html:not([data-theme="light"]):not(.light-mode)) .aps-token-dot {
        box-shadow: 0 0 0 6px rgba(91, 184, 212, 0.08);
    }

    :where(html:not([data-theme="light"]):not(.light-mode)) .aps-scene-caption {
        color: rgba(226, 228, 233, 0.58);
    }

    :where(html:not([data-theme="light"]):not(.light-mode)) .aps-core-node {
        background:
            radial-gradient(circle at top, rgba(255, 255, 255, 0.10), transparent 62%),
            linear-gradient(155deg, rgba(15, 35, 59, 0.98), rgba(27, 67, 102, 0.96));
        box-shadow: 0 24px 50px rgba(5, 11, 19, 0.28);
    }

    :where(html:not([data-theme="light"]):not(.light-mode)) .aps-core-node small {
        color: rgba(226, 228, 233, 0.72);
    }

    :where(html:not([data-theme="light"]):not(.light-mode)) .aps-orbit-one {
        border-color: rgba(91, 184, 212, 0.22);
    }

    :where(html:not([data-theme="light"]):not(.light-mode)) .aps-orbit-two {
        border-color: rgba(255, 213, 128, 0.16);
    }

    :where(html:not([data-theme="light"]):not(.light-mode)) .aps-stream {
        background: linear-gradient(90deg, transparent, rgba(91, 184, 212, 0.26), transparent);
    }

    :where(html:not([data-theme="light"]):not(.light-mode)) .asp-bar-track {
        background: rgba(255, 255, 255, 0.08);
    }

    :where(html:not([data-theme="light"]):not(.light-mode)) .about-hero-canvas {
        opacity: 0.6;
    }
}

html[data-theme="dark"] .about-hero,
body.dark-mode .about-hero {
    background:
        radial-gradient(circle at 16% 18%, rgba(91, 184, 212, 0.16), transparent 24%),
        radial-gradient(circle at 82% 12%, rgba(255, 213, 128, 0.14), transparent 22%),
        linear-gradient(145deg, #0C1523 0%, #102337 48%, #17395A 100%);
    border-color: rgba(91, 184, 212, 0.12);
    box-shadow: 0 32px 72px rgba(6, 12, 22, 0.34);
}

html[data-theme="dark"] .about-eyebrow,
body.dark-mode .about-eyebrow {
    background: rgba(91, 184, 212, 0.12);
    border-color: rgba(91, 184, 212, 0.18);
    color: #D9EDF8;
}

html[data-theme="dark"] .about-title,
body.dark-mode .about-title {
    color: #F7FBFF;
}

html[data-theme="dark"] .about-subtitle,
body.dark-mode .about-subtitle {
    color: #B9CCDB;
}

html[data-theme="dark"] .about-hero-stats,
html[data-theme="dark"] .about-score-preview,
html[data-theme="dark"] .about-section:not(.about-section-dark),
html[data-theme="dark"] .about-purpose-stage,
html[data-theme="dark"] .about-feature-card,
html[data-theme="dark"] .about-detail-card,
body.dark-mode .about-hero-stats,
body.dark-mode .about-score-preview,
body.dark-mode .about-section:not(.about-section-dark),
body.dark-mode .about-purpose-stage,
body.dark-mode .about-feature-card,
body.dark-mode .about-detail-card {
    background: rgba(13, 23, 38, 0.74);
    border-color: rgba(148, 163, 184, 0.14);
    box-shadow: 0 18px 42px rgba(5, 11, 19, 0.28);
}

html[data-theme="dark"] .about-stat-num,
html[data-theme="dark"] .asp-label,
html[data-theme="dark"] .about-feature-card h3,
html[data-theme="dark"] .about-detail-card h3,
html[data-theme="dark"] .about-section-title,
body.dark-mode .about-stat-num,
body.dark-mode .asp-label,
body.dark-mode .about-feature-card h3,
body.dark-mode .about-detail-card h3,
body.dark-mode .about-section-title {
    color: #E9F3FB;
}

html[data-theme="dark"] .about-stat-label,
html[data-theme="dark"] .asp-bar-pct,
html[data-theme="dark"] .about-section-desc,
html[data-theme="dark"] .aps-column-label,
html[data-theme="dark"] .about-feature-card p,
html[data-theme="dark"] .about-detail-card p,
body.dark-mode .about-stat-label,
body.dark-mode .asp-bar-pct,
body.dark-mode .about-section-desc,
body.dark-mode .aps-column-label,
body.dark-mode .about-feature-card p,
body.dark-mode .about-detail-card p {
    color: #9EB0C0;
}

html[data-theme="dark"] .about-section-label,
body.dark-mode .about-section-label {
    color: #BFD7E8;
}

html[data-theme="dark"] .about-feature-icon,
body.dark-mode .about-feature-icon {
    background: linear-gradient(135deg, rgba(91, 184, 212, 0.16), rgba(255, 213, 128, 0.12));
    color: #D8EFFF;
}

html[data-theme="dark"] .aps-token,
body.dark-mode .aps-token {
    background: rgba(15, 23, 38, 0.84);
    border-color: rgba(148, 163, 184, 0.14);
    color: #E2E4E9;
    box-shadow: 0 12px 28px rgba(5, 11, 19, 0.20);
}

html[data-theme="dark"] .aps-token-good,
body.dark-mode .aps-token-good {
    background: rgba(18, 35, 55, 0.88);
}

html[data-theme="dark"] .aps-core-node,
body.dark-mode .aps-core-node {
    background:
        radial-gradient(circle at top, rgba(255, 255, 255, 0.10), transparent 62%),
        linear-gradient(155deg, rgba(15, 35, 59, 0.98), rgba(27, 67, 102, 0.96));
    box-shadow: 0 24px 50px rgba(5, 11, 19, 0.28);
}

html[data-theme="dark"] .aps-scene-caption,
body.dark-mode .aps-scene-caption {
    color: rgba(226, 228, 233, 0.58);
}

html[data-theme="dark"] .aps-core-node small,
body.dark-mode .aps-core-node small {
    color: rgba(226, 228, 233, 0.72);
}

html[data-theme="dark"] .aps-stream,
body.dark-mode .aps-stream {
    background: linear-gradient(90deg, transparent, rgba(91, 184, 212, 0.26), transparent);
}

html[data-theme="dark"] .asp-bar-track,
body.dark-mode .asp-bar-track {
    background: rgba(255, 255, 255, 0.08);
}

html[data-theme="dark"] .about-hero-canvas,
body.dark-mode .about-hero-canvas {
    opacity: 0.6;
}

html[data-theme="light"] .about-hero,
body.light-mode .about-hero {
    background:
        radial-gradient(circle at 15% 20%, rgba(46, 134, 171, 0.12), transparent 24%),
        radial-gradient(circle at 82% 12%, rgba(199, 154, 44, 0.18), transparent 24%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(245, 248, 252, 0.95) 50%, rgba(232, 241, 248, 0.98));
    border-color: rgba(16, 46, 91, 0.08);
    box-shadow: 0 28px 64px rgba(16, 46, 91, 0.10);
}

html[data-theme="light"] .about-eyebrow,
body.light-mode .about-eyebrow {
    background: rgba(16, 46, 91, 0.08);
    border-color: rgba(16, 46, 91, 0.10);
    color: var(--navy);
}

html[data-theme="light"] .about-title,
body.light-mode .about-title {
    color: var(--navy-dark);
}

html[data-theme="light"] .about-subtitle,
body.light-mode .about-subtitle {
    color: rgba(16, 46, 91, 0.80);
}

html[data-theme="light"] .about-hero-stats,
html[data-theme="light"] .about-score-preview,
html[data-theme="light"] .about-section:not(.about-section-dark),
html[data-theme="light"] .about-purpose-stage,
html[data-theme="light"] .about-feature-card,
html[data-theme="light"] .about-detail-card,
body.light-mode .about-hero-stats,
body.light-mode .about-score-preview,
body.light-mode .about-section:not(.about-section-dark),
body.light-mode .about-purpose-stage,
body.light-mode .about-feature-card,
body.light-mode .about-detail-card {
    background: rgba(255, 255, 255, 0.80);
    border-color: rgba(16, 46, 91, 0.10);
    box-shadow: 0 18px 42px rgba(16, 46, 91, 0.08);
}

html[data-theme="light"] .about-stat-num,
html[data-theme="light"] .asp-label,
html[data-theme="light"] .about-feature-card h3,
html[data-theme="light"] .about-detail-card h3,
html[data-theme="light"] .about-section-title,
body.light-mode .about-stat-num,
body.light-mode .asp-label,
body.light-mode .about-feature-card h3,
body.light-mode .about-detail-card h3,
body.light-mode .about-section-title {
    color: var(--navy-dark);
}

html[data-theme="light"] .about-stat-label,
html[data-theme="light"] .asp-bar-pct,
html[data-theme="light"] .about-section-desc,
html[data-theme="light"] .aps-column-label,
html[data-theme="light"] .about-feature-card p,
html[data-theme="light"] .about-detail-card p,
body.light-mode .about-stat-label,
body.light-mode .asp-bar-pct,
body.light-mode .about-section-desc,
body.light-mode .aps-column-label,
body.light-mode .about-feature-card p,
body.light-mode .about-detail-card p {
    color: rgba(16, 46, 91, 0.72);
}

html[data-theme="light"] .asp-bar-track,
body.light-mode .asp-bar-track {
    background: rgba(16, 46, 91, 0.08);
}

html[data-theme="light"] .aps-token,
body.light-mode .aps-token {
    background: rgba(255, 255, 255, 0.86);
    border-color: rgba(16, 46, 91, 0.08);
    color: rgba(16, 46, 91, 0.78);
}

html[data-theme="light"] .aps-scene-caption,
body.light-mode .aps-scene-caption {
    color: rgba(16, 46, 91, 0.62);
}

/* ══════════════════════════════════════════════════════════════
   QUARTERLY UPDATE — Status bar, timeline, modal
   ══════════════════════════════════════════════════════════════ */

.reform-card-actions {
    padding-top: 12px;
    border-top: 1px solid rgba(31, 58, 95, 0.08);
}

.metric-denom {
    font-size: 18px;
    font-weight: 600;
    color: var(--gray-500);
}

.metric-sub {
    min-height: 18px;
    margin-top: 4px;
}

.qu-status-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius, 8px);
    padding: 12px 16px;
}

.qu-status-period {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: var(--gray-700);
}

.qu-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}

.qu-status-done {
    background: #D4EDDA;
    color: #1A7A4A;
    border: 1px solid #A3D9B5;
}

.qu-status-pending {
    background: #FFF3CD;
    color: #9A6700;
    border: 1px solid #FFEAA0;
}

.qu-status-deadline {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid rgba(46, 134, 171, 0.24);
    background: rgba(46, 134, 171, 0.08);
    color: #1F4E79;
    font-size: 12px;
    font-weight: 700;
}

.qu-status-deadline span {
    font-weight: 500;
    opacity: 0.76;
}

.qu-status-deadline-urgent {
    border-color: #FFEAA0;
    background: #FFF9DF;
    color: #8A5A00;
}

.qu-status-deadline-closed {
    border-color: #F5B8BC;
    background: #FFF1F2;
    color: #A52D38;
}

.qu-status-deadline-unscheduled {
    border-color: var(--gray-200);
    background: var(--white);
    color: var(--gray-500);
}

.qu-submission-closed-note {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #A52D38;
    font-size: 12px;
    font-weight: 600;
}

.qu-timeline {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.qu-entry {
    border: 1px solid var(--gray-200);
    border-radius: var(--radius, 8px);
    overflow: hidden;
    background: var(--white);
    transition: box-shadow 0.15s;
}

.qu-entry:hover {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
}

.qu-entry-current {
    border-color: var(--teal, #2E86AB);
    border-left-width: 4px;
}

.qu-entry-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    background: var(--gray-50);
    border-bottom: 1px solid var(--gray-100);
    flex-wrap: wrap;
}

.qu-entry-period {
    display: flex;
    align-items: center;
    gap: 8px;
}

.qu-period-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: var(--navy, #1F4E79);
    color: var(--white);
    font-size: 12px;
    font-weight: 800;
    flex-shrink: 0;
}

.qu-period-year {
    font-size: 16px;
    font-weight: 700;
    color: var(--navy, #1F4E79);
}

.qu-period-months {
    font-size: 12px;
}

.qu-current-tag {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 2px 8px;
    border-radius: 10px;
    background: rgba(46, 134, 171, 0.12);
    color: var(--teal, #2E86AB);
}

.qu-entry-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.qu-progress-pill {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 700;
}

.qu-narrative {
    padding: 14px 16px;
}

.qu-narrative-text {
    font-size: 14px;
    color: var(--gray-700);
    line-height: 1.7;
    white-space: pre-line;
}

.qu-sections {
    display: flex;
    flex-direction: column;
    gap: 0;
    border-top: 1px solid var(--gray-100);
}

.qu-section {
    padding: 10px 16px;
    border-bottom: 1px solid var(--gray-100);
}

.qu-section:last-child {
    border-bottom: none;
}

.qu-section-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 700;
    color: var(--gray-600);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-bottom: 6px;
}

.qu-section-text {
    font-size: 13px;
    color: var(--gray-700);
    line-height: 1.6;
    white-space: pre-line;
    padding-left: 22px;
}

.qu-empty {
    text-align: center;
    padding: 48px 20px;
    border: 1px dashed var(--gray-200);
    border-radius: var(--radius, 8px);
}

.qu-empty-icon {
    font-size: 40px;
    color: var(--gray-300);
    margin-bottom: 12px;
}

.qu-empty-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--navy);
    margin-bottom: 6px;
}

.qu-empty-desc {
    font-size: 13px;
    color: var(--gray-500);
    max-width: 420px;
    margin: 0 auto;
    line-height: 1.6;
}

.qu-progress-preview-wrap {
    display: flex;
    align-items: center;
}

@media (prefers-color-scheme: dark) {
    :where(html:not([data-theme="light"]):not(.light-mode)) .reform-card-actions {
        border-top-color: #1E2D3D;
    }

    :where(html:not([data-theme="light"]):not(.light-mode)) .metric-denom {
        color: #8899AA;
    }

    :where(html:not([data-theme="light"]):not(.light-mode)) .qu-status-bar { background: #1A2236; border-color: #1E2D3D; }
    :where(html:not([data-theme="light"]):not(.light-mode)) .qu-status-period { color: #B0C4D8; }
    :where(html:not([data-theme="light"]):not(.light-mode)) .qu-status-done { background: #1A3D28; color: #6DD49A; border-color: #2D6B43; }
    :where(html:not([data-theme="light"]):not(.light-mode)) .qu-status-pending { background: #2D2210; color: #F4C842; border-color: #5C440F; }
    :where(html:not([data-theme="light"]):not(.light-mode)) .qu-status-deadline { background: #0D2233; color: #A8D4F5; border-color: #1A4A70; }
    :where(html:not([data-theme="light"]):not(.light-mode)) .qu-status-deadline-urgent { background: #2D2210; color: #F4C842; border-color: #5C440F; }
    :where(html:not([data-theme="light"]):not(.light-mode)) .qu-status-deadline-closed { background: #2D1010; color: #F07070; border-color: #7A1F1F; }
    :where(html:not([data-theme="light"]):not(.light-mode)) .qu-status-deadline-unscheduled { background: #161B25; color: #8899AA; border-color: #2E3D52; }
    :where(html:not([data-theme="light"]):not(.light-mode)) .qu-submission-closed-note { color: #F07070; }
    :where(html:not([data-theme="light"]):not(.light-mode)) .qu-entry { background: #161B25; border-color: #1E2D3D; }
    :where(html:not([data-theme="light"]):not(.light-mode)) .qu-entry-current { border-color: #2E86AB; }
    :where(html:not([data-theme="light"]):not(.light-mode)) .qu-entry-header { background: #1A2236; border-bottom-color: #1E2D3D; }
    :where(html:not([data-theme="light"]):not(.light-mode)) .qu-period-year { color: #A8D4F5; }
    :where(html:not([data-theme="light"]):not(.light-mode)) .qu-narrative-text { color: #C8D4E0; }
    :where(html:not([data-theme="light"]):not(.light-mode)) .qu-section { border-bottom-color: #1E2D3D; }
    :where(html:not([data-theme="light"]):not(.light-mode)) .qu-sections { border-top-color: #1E2D3D; }
    :where(html:not([data-theme="light"]):not(.light-mode)) .qu-section-label { color: #6B7A90; }
    :where(html:not([data-theme="light"]):not(.light-mode)) .qu-section-text { color: #B0C4D8; }
    :where(html:not([data-theme="light"]):not(.light-mode)) .qu-empty { border-color: #1E2D3D; }
    :where(html:not([data-theme="light"]):not(.light-mode)) .qu-empty-title { color: #A8D4F5; }
    :where(html:not([data-theme="light"]):not(.light-mode)) .qu-empty-desc { color: #6B7A90; }
    :where(html:not([data-theme="light"]):not(.light-mode)) .qu-empty-icon { color: #2E3D52; }
}

body.dark-mode .reform-card-actions {
    border-top-color: #1E2D3D;
}

body.dark-mode .metric-denom {
    color: #8899AA;
}

body.dark-mode .qu-status-bar { background: #1A2236; border-color: #1E2D3D; }
body.dark-mode .qu-status-period { color: #B0C4D8; }
body.dark-mode .qu-status-done { background: #1A3D28; color: #6DD49A; border-color: #2D6B43; }
body.dark-mode .qu-status-pending { background: #2D2210; color: #F4C842; border-color: #5C440F; }
body.dark-mode .qu-status-deadline { background: #0D2233; color: #A8D4F5; border-color: #1A4A70; }
body.dark-mode .qu-status-deadline-urgent { background: #2D2210; color: #F4C842; border-color: #5C440F; }
body.dark-mode .qu-status-deadline-closed { background: #2D1010; color: #F07070; border-color: #7A1F1F; }
body.dark-mode .qu-status-deadline-unscheduled { background: #161B25; color: #8899AA; border-color: #2E3D52; }
body.dark-mode .qu-submission-closed-note { color: #F07070; }
body.dark-mode .qu-entry { background: #161B25; border-color: #1E2D3D; }
body.dark-mode .qu-entry-current { border-color: #2E86AB; }
body.dark-mode .qu-entry-header { background: #1A2236; border-bottom-color: #1E2D3D; }
body.dark-mode .qu-period-year { color: #A8D4F5; }
body.dark-mode .qu-narrative-text { color: #C8D4E0; }
body.dark-mode .qu-section { border-bottom-color: #1E2D3D; }
body.dark-mode .qu-sections { border-top-color: #1E2D3D; }
body.dark-mode .qu-section-label { color: #6B7A90; }
body.dark-mode .qu-section-text { color: #B0C4D8; }
body.dark-mode .qu-empty { border-color: #1E2D3D; }
body.dark-mode .qu-empty-title { color: #A8D4F5; }
body.dark-mode .qu-empty-desc { color: #6B7A90; }
body.dark-mode .qu-empty-icon { color: #2E3D52; }

.sidebar-user-info {
    flex: 1;
    min-width: 0;
    text-decoration: none;
    color: inherit;
}

.sidebar-user-info:hover {
    text-decoration: none;
}

/* ── Deadline notification banner ───────────────────────────── */
.deadline-banner {
    border-radius: var(--radius, 8px);
    margin-bottom: 20px;
    border: 1px solid;
    overflow: hidden;
}

.deadline-banner-inner {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    flex-wrap: wrap;
}

.deadline-banner-icon {
    font-size: 22px;
    flex-shrink: 0;
}

.deadline-banner-content {
    flex: 1;
    min-width: 180px;
}

.deadline-banner-title {
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 3px;
}

.deadline-banner-desc {
    font-size: 13px;
    opacity: 0.85;
    line-height: 1.5;
}

.deadline-submitted-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 1px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 700;
    background: rgba(26, 122, 74, 0.15);
    color: #1A7A4A;
    margin-left: 6px;
}

.deadline-banner-action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 16px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    flex-shrink: 0;
    transition: opacity 0.15s;
}

.deadline-banner-action:hover {
    opacity: 0.85;
}

.deadline-banner-overdue {
    background: #FFF5F5;
    border-color: #F5B8BC;
}

.deadline-banner-overdue .deadline-banner-icon {
    color: #C0392B;
}

.deadline-banner-overdue .deadline-banner-title {
    color: #C0392B;
}

.deadline-banner-overdue .deadline-banner-desc {
    color: #721C24;
}

.deadline-banner-overdue .deadline-banner-action {
    background: #C0392B;
    color: #fff;
}

.deadline-banner-critical {
    background: #FFF5F5;
    border-color: #FFCBA4;
}

.deadline-banner-critical .deadline-banner-icon {
    color: #E8600A;
}

.deadline-banner-critical .deadline-banner-title {
    color: #C45000;
}

.deadline-banner-critical .deadline-banner-desc {
    color: #7F3000;
}

.deadline-banner-critical .deadline-banner-action {
    background: #E8600A;
    color: #fff;
}

.deadline-banner-urgent {
    background: #FFFDF0;
    border-color: #FFEAA0;
}

.deadline-banner-urgent .deadline-banner-icon {
    color: #F4A61D;
}

.deadline-banner-urgent .deadline-banner-title {
    color: #9A6700;
}

.deadline-banner-urgent .deadline-banner-desc {
    color: #7F4E00;
}

.deadline-banner-urgent .deadline-banner-action {
    background: #F4A61D;
    color: #fff;
}

.deadline-banner-approaching {
    background: #EBF3FA;
    border-color: #B5D4F0;
}

.deadline-banner-approaching .deadline-banner-icon {
    color: #2E86AB;
}

.deadline-banner-approaching .deadline-banner-title {
    color: #1F4E79;
}

.deadline-banner-approaching .deadline-banner-desc {
    color: #1F4E79;
}

.deadline-banner-approaching .deadline-banner-action {
    background: #2E86AB;
    color: #fff;
}

/* ══════════════════════════════════════════════════════════════
   QUARTERLY UPDATE MODAL — Creative redesign
   ══════════════════════════════════════════════════════════════ */

.qu-modal-dialog {
    max-width: 980px;
    width: min(980px, calc(100vw - 1.5rem));
    margin: 1rem auto;
    height: calc(100dvh - 2rem);
    min-height: calc(100dvh - 2rem);
    display: flex;
    align-items: center;
}

.qu-modal-content {
    display: flex;
    flex-direction: column;
    border: none;
    border-radius: 14px;
    overflow: hidden;
    background: var(--white);
    box-shadow: 0 28px 70px rgba(16, 46, 91, 0.18);
    max-height: calc(100vh - 2rem);
    max-height: calc(100dvh - 2rem);
    width: 100%;
}

.qu-modal-content > form {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
}

.qu-modal-hero {
    flex-shrink: 0;
    position: relative;
    background: linear-gradient(135deg, #1F4E79 0%, #2E86AB 100%);
    padding: 28px 28px 24px;
    overflow: hidden;
}

.qu-modal-hero-bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.08) 0%, transparent 50%),
        radial-gradient(circle at 20% 80%, rgba(255, 255, 255, 0.05) 0%, transparent 40%);
    pointer-events: none;
}

.qu-modal-hero-inner {
    position: relative;
    z-index: 1;
}

.qu-modal-period-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 10px;
}

.qu-modal-title {
    font-family: var(--font-heading, "DM Serif Display", serif);
    font-size: 22px;
    font-weight: 400;
    color: #ffffff;
    margin-bottom: 6px;
    line-height: 1.2;
}

.qu-modal-reform-name {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.75);
    margin-bottom: 3px;
    line-height: 1.4;
}

.qu-modal-wg-name {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
}

.qu-modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 2;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 14px;
    transition: background 0.15s;
}

.qu-modal-close:hover {
    background: rgba(255, 255, 255, 0.25);
    color: #fff;
}

.qu-modal-body {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    padding: 24px 28px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    background: var(--white);
    overflow: hidden;
    overscroll-behavior: contain;
}

.qu-tab-nav {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    padding: 4px;
    border-radius: 16px;
    background: rgba(245, 248, 252, 0.84);
    border: 1px solid rgba(16, 46, 91, 0.08);
}

.qu-tab-trigger {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    padding: 12px 14px;
    border: 1px solid transparent;
    border-radius: 12px;
    background: transparent;
    color: rgba(16, 46, 91, 0.66);
    text-align: left;
    transition:
        background 0.18s ease,
        border-color 0.18s ease,
        color 0.18s ease,
        transform 0.18s ease,
        box-shadow 0.18s ease;
}

.qu-tab-trigger:hover {
    background: rgba(255, 255, 255, 0.74);
    border-color: rgba(16, 46, 91, 0.08);
    color: rgba(16, 46, 91, 0.84);
}

.qu-tab-trigger.active {
    background: linear-gradient(135deg, rgba(31, 78, 121, 0.11), rgba(46, 134, 171, 0.08));
    border-color: rgba(46, 134, 171, 0.28);
    color: var(--navy-dark);
    box-shadow: 0 10px 22px rgba(16, 46, 91, 0.08);
}

.qu-tab-index {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: rgba(16, 46, 91, 0.07);
    color: inherit;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.12em;
    flex-shrink: 0;
}

.qu-tab-trigger.active .qu-tab-index {
    background: linear-gradient(135deg, #1F4E79, #2E86AB);
    color: #ffffff;
}

.qu-tab-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.qu-tab-title {
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
    color: currentColor;
}

.qu-tab-subtitle {
    font-size: 11px;
    line-height: 1.35;
    color: rgba(16, 46, 91, 0.52);
}

.qu-tab-trigger.active .qu-tab-subtitle {
    color: rgba(16, 46, 91, 0.64);
}

.qu-modal-tab-content {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.qu-modal-tab-content > .tab-pane {
    min-height: 0;
}

.qu-modal-tab-content > .tab-pane.show.active {
    display: flex;
    flex-direction: column;
    gap: 18px;
    min-height: 0;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 6px;
    overscroll-behavior: contain;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(46, 134, 171, 0.32) transparent;
}

.qu-modal-tab-content > .tab-pane.show.active > * {
    flex-shrink: 0;
}

.qu-modal-tab-content > .tab-pane.show.active::-webkit-scrollbar {
    width: 8px;
}

.qu-modal-tab-content > .tab-pane.show.active::-webkit-scrollbar-track {
    background: transparent;
}

.qu-modal-tab-content > .tab-pane.show.active::-webkit-scrollbar-thumb {
    background: rgba(46, 134, 171, 0.28);
    border-radius: 999px;
}

.qu-step-pane-copy {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0 0.2rem;
}

.qu-step-pane-title {
    font-size: 0.94rem;
    font-weight: 800;
    color: var(--navy-dark);
}

.qu-step-pane-desc {
    font-size: 0.82rem;
    line-height: 1.45;
    color: rgba(16, 46, 91, 0.56);
}

.qu-form-grid {
    display: grid;
    grid-template-columns: minmax(220px, 0.92fr) minmax(320px, 1.2fr);
    gap: 16px;
    align-items: stretch;
}

.qu-surface {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px 18px;
    border: 1px solid rgba(31, 58, 95, 0.10);
    border-radius: 14px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(247, 250, 253, 0.94));
    box-shadow: 0 10px 28px rgba(16, 46, 91, 0.06);
}

.qu-surface-period,
.qu-surface-progress {
    min-height: 196px;
}

.qu-surface-period {
    justify-content: center;
}

.qu-surface-progress {
    justify-content: space-between;
}

.qu-surface-narrative,
.qu-surface-optional {
    gap: 12px;
}

.qu-surface-optional {
    padding: 0;
    gap: 0;
}

.qu-already-submitted-notice {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: #FFF3CD;
    border: 1px solid #FFEAA0;
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 13px;
    color: #7F4E00;
}

.qu-already-submitted-notice i {
    font-size: 16px;
    color: #F4A61D;
    flex-shrink: 0;
    margin-top: 1px;
}

.qu-deadline-notice {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 11px 14px;
    border: 1px solid rgba(46, 134, 171, 0.22);
    border-radius: 10px;
    background: rgba(46, 134, 171, 0.07);
    color: #1F4E79;
}

.qu-deadline-notice-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    border-radius: 8px;
    background: rgba(46, 134, 171, 0.13);
}

.qu-deadline-notice div {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.qu-deadline-notice strong {
    font-size: 12px;
}

.qu-deadline-notice div span {
    font-size: 11px;
    line-height: 1.45;
    opacity: 0.76;
}

.qu-deadline-notice-urgent {
    border-color: #FFEAA0;
    background: #FFF9DF;
    color: #7F4E00;
}

.qu-deadline-notice-closed {
    border-color: #F5B8BC;
    background: #FFF1F2;
    color: #9A2632;
}

.qu-deadline-notice-unscheduled {
    border-color: var(--gray-200);
    background: var(--gray-50);
    color: var(--gray-600);
}

.qu-field-row {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    align-items: flex-start;
}

.qu-period-progress-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 110px minmax(260px, 1.35fr);
    align-items: stretch;
    gap: 16px;
}

.qu-field-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
    min-width: 100px;
}

.qu-full-width {
    flex: 0 0 100%;
}

.qu-field-group-year {
    max-width: 110px;
}

.qu-field-group-progress {
    min-width: 0;
}

.qu-period-lock-main {
    font-size: 1.12rem;
    font-weight: 800;
    color: var(--navy-dark);
    line-height: 1.2;
}

.qu-period-lock-sub {
    font-size: 0.8rem;
    line-height: 1.45;
    color: rgba(16, 46, 91, 0.62);
}

.qu-period-deadline {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    width: fit-content;
    max-width: 100%;
    padding: 0.38rem 0.72rem;
    border-radius: 999px;
    background: rgba(46, 134, 171, 0.10);
    color: #1F4E79;
    font-size: 0.76rem;
    font-weight: 700;
    line-height: 1.3;
    flex-wrap: wrap;
}

.qu-period-deadline-muted {
    background: var(--gray-100);
    color: var(--gray-500);
}

.qu-field-label {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    font-weight: 700;
    color: var(--gray-600, #595959);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.qu-field-icon {
    width: 22px;
    height: 22px;
    border-radius: 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    flex-shrink: 0;
}

.qu-required-star {
    color: #C0392B;
    margin-left: 2px;
}

.qu-field-hint {
    font-size: 11px;
    color: var(--gray-400, #9AA0A6);
    margin-top: 2px;
}

.qu-select,
.qu-input {
    width: 100%;
    min-height: 44px;
    padding: 8px 12px;
    border: 1.5px solid var(--gray-200, #E8EAED);
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    color: var(--gray-900);
    background: var(--white);
    transition: border-color 0.15s, box-shadow 0.15s;
    appearance: none;
    -webkit-appearance: none;
}

.qu-select:focus,
.qu-input:focus {
    outline: none;
    border-color: #2E86AB;
    box-shadow: 0 0 0 3px rgba(46, 134, 171, 0.15);
}

.qu-textarea {
    width: 100%;
    min-height: 132px;
    padding: 10px 14px;
    border: 1.5px solid var(--gray-200, #E8EAED);
    border-radius: 8px;
    font-size: 13px;
    color: var(--gray-900);
    background: var(--white);
    resize: vertical;
    font-family: var(--font-sans);
    line-height: 1.6;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.qu-textarea:focus {
    outline: none;
    border-color: #2E86AB;
    box-shadow: 0 0 0 3px rgba(46, 134, 171, 0.15);
}

.qu-textarea.is-invalid,
.qu-input.is-invalid,
.qu-select.is-invalid,
.qu-progress-number-input.is-invalid {
    border-color: #C0392B;
    box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.12);
}

.qu-textarea-sm {
    font-size: 13px;
}

.qu-progress-dial-group {
    flex: 1 1 auto;
    min-width: 0;
}

.qu-progress-dial-wrap {
    display: grid;
    grid-template-columns: 80px minmax(0, 1fr);
    align-items: center;
    gap: 14px;
    min-width: 0;
    height: 100%;
    padding: 6px 0 0;
}

.qu-dial-container {
    width: 80px;
    height: 80px;
    flex-shrink: 0;
}

.qu-dial-svg {
    width: 80px;
    height: 80px;
    color: var(--gray-900);
}

.qu-progress-input-wrap {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.qu-progress-number-row {
    display: inline-flex;
    align-items: flex-end;
    gap: 6px;
}

.qu-progress-number-input {
    width: 88px;
    padding: 6px 10px;
    border: 1.5px solid var(--gray-200);
    border-radius: 8px;
    font-size: 20px;
    font-weight: 800;
    color: var(--navy, #1F4E79);
    text-align: center;
    transition: border-color 0.15s;
}

.qu-progress-number-input:focus {
    outline: none;
    border-color: #2E86AB;
}

.qu-progress-pct-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--gray-400);
    margin-bottom: 8px;
}

.qu-progress-helper {
    font-size: 0.78rem;
    line-height: 1.45;
    color: rgba(16, 46, 91, 0.56);
}

.qu-quick-btns {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
    flex-wrap: wrap;
}

.qu-quick-btn {
    padding: 3px 6px;
    border-radius: 5px;
    border: 1px solid var(--gray-200);
    background: var(--gray-50);
    font-size: 11px;
    font-weight: 600;
    color: var(--gray-600);
    cursor: pointer;
    transition: background 0.1s, border-color 0.1s;
}

.qu-quick-btn:hover {
    background: #EBF3FA;
    border-color: #2E86AB;
    color: #1F4E79;
}

.qu-optional-panels {
    border: 1px solid var(--gray-200);
    border-radius: 10px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.82);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.qu-optional-header {
    padding: 10px 14px;
    background: var(--gray-50);
    border-bottom: 1px solid var(--gray-200);
}

.qu-optional-title {
    font-size: 12px;
    font-weight: 700;
    color: var(--gray-600);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.qu-optional-caption {
    color: var(--gray-500);
    font-size: 0.72rem;
    font-weight: 600;
    margin-left: 0.35rem;
    text-transform: none;
    letter-spacing: 0;
}

.qu-optional-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
}

.qu-detail-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px;
    border-right: 1px solid var(--gray-100);
}

.qu-detail-card:last-child {
    border-right: none;
}

.qu-detail-card-head {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.qu-detail-icon {
    width: 26px;
    height: 26px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    flex-shrink: 0;
}

.qu-detail-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--gray-700);
    line-height: 1.3;
}

.qu-detail-copy {
    font-size: 0.75rem;
    line-height: 1.45;
    color: var(--gray-500);
    margin-top: 2px;
}

.qu-detail-card .qu-textarea {
    min-height: 96px;
}

.qu-modal-footer {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 28px 20px;
    border-top: 1px solid var(--gray-100);
    background: var(--gray-50);
    flex-wrap: wrap;
}

.qu-footer-left {
    flex: 1;
    min-width: 0;
}

.qu-score-preview {
    display: flex;
    align-items: center;
    gap: 8px;
}

.qu-score-preview-label {
    font-size: 12px;
    color: var(--gray-500);
}

.qu-score-preview-badge {
    font-size: 12px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 20px;
}

.qu-footer-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.qu-btn-cancel {
    padding: 9px 18px;
    border-radius: 8px;
    border: 1.5px solid var(--gray-200);
    background: transparent;
    color: var(--gray-600);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.1s;
}

.qu-btn-cancel:hover {
    background: var(--gray-100);
}

.qu-step-btn[hidden] {
    display: none !important;
}

.qu-step-btn[disabled] {
    opacity: 0.46;
    cursor: not-allowed;
    pointer-events: none;
}

.qu-btn-submit {
    display: inline-flex;
    align-items: center;
    padding: 9px 22px;
    border-radius: 8px;
    border: none;
    background: linear-gradient(135deg, #1F4E79 0%, #2E86AB 100%);
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: opacity 0.15s, transform 0.1s;
    box-shadow: 0 2px 8px rgba(31, 78, 121, 0.25);
}

.qu-btn-submit:hover {
    opacity: 0.92;
    transform: translateY(-1px);
}

.qu-btn-submit:active {
    transform: translateY(0);
}

html[data-theme="light"] .qu-modal-content,
body.light-mode .qu-modal-content {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 250, 253, 0.98));
    border: 1px solid rgba(16, 46, 91, 0.08);
    box-shadow: 0 30px 72px rgba(16, 46, 91, 0.14);
}

html[data-theme="light"] .qu-modal-body,
body.light-mode .qu-modal-body {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 253, 0.98));
}

html[data-theme="light"] .qu-modal-footer,
body.light-mode .qu-modal-footer {
    background: rgba(245, 248, 252, 0.92);
    border-top-color: rgba(16, 46, 91, 0.08);
}

html[data-theme="light"] .qu-field-label,
body.light-mode .qu-field-label {
    color: rgba(16, 46, 91, 0.70);
}

html[data-theme="light"] .qu-tab-nav,
body.light-mode .qu-tab-nav {
    background: rgba(245, 248, 252, 0.84);
    border-color: rgba(16, 46, 91, 0.08);
}

html[data-theme="light"] .qu-tab-trigger,
body.light-mode .qu-tab-trigger {
    color: rgba(16, 46, 91, 0.66);
}

html[data-theme="light"] .qu-tab-trigger:hover,
body.light-mode .qu-tab-trigger:hover {
    background: rgba(255, 255, 255, 0.74);
    border-color: rgba(16, 46, 91, 0.08);
    color: rgba(16, 46, 91, 0.84);
}

html[data-theme="light"] .qu-tab-trigger.active,
body.light-mode .qu-tab-trigger.active {
    background: linear-gradient(135deg, rgba(31, 78, 121, 0.11), rgba(46, 134, 171, 0.08));
    border-color: rgba(46, 134, 171, 0.28);
    color: var(--navy-dark);
}

html[data-theme="light"] .qu-tab-index,
body.light-mode .qu-tab-index {
    background: rgba(16, 46, 91, 0.07);
}

html[data-theme="light"] .qu-tab-subtitle,
body.light-mode .qu-tab-subtitle,
html[data-theme="light"] .qu-step-pane-desc,
body.light-mode .qu-step-pane-desc {
    color: rgba(16, 46, 91, 0.52);
}

html[data-theme="light"] .qu-step-pane-title,
body.light-mode .qu-step-pane-title {
    color: var(--navy-dark);
}

html[data-theme="light"] .qu-field-hint,
body.light-mode .qu-field-hint {
    color: rgba(16, 46, 91, 0.52);
}

html[data-theme="light"] .qu-select,
html[data-theme="light"] .qu-input,
html[data-theme="light"] .qu-textarea,
html[data-theme="light"] .qu-progress-number-input,
body.light-mode .qu-select,
body.light-mode .qu-input,
body.light-mode .qu-textarea,
body.light-mode .qu-progress-number-input {
    background: #FFFFFF;
    border-color: rgba(16, 46, 91, 0.12);
    color: var(--navy-dark);
}

html[data-theme="light"] .qu-select:focus,
html[data-theme="light"] .qu-input:focus,
html[data-theme="light"] .qu-textarea:focus,
html[data-theme="light"] .qu-progress-number-input:focus,
body.light-mode .qu-select:focus,
body.light-mode .qu-input:focus,
body.light-mode .qu-textarea:focus,
body.light-mode .qu-progress-number-input:focus {
    border-color: #2E86AB;
    box-shadow: 0 0 0 3px rgba(46, 134, 171, 0.14);
}

html[data-theme="light"] .qu-progress-dial-wrap,
body.light-mode .qu-progress-dial-wrap {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(241, 246, 250, 0.95));
    border-color: rgba(16, 46, 91, 0.10);
}

html[data-theme="light"] .qu-dial-svg,
body.light-mode .qu-dial-svg {
    color: var(--navy-dark);
}

html[data-theme="light"] .qu-quick-btn,
body.light-mode .qu-quick-btn {
    background: rgba(255, 255, 255, 0.9);
    border-color: rgba(16, 46, 91, 0.10);
    color: rgba(16, 46, 91, 0.72);
}

html[data-theme="light"] .qu-quick-btn:hover,
body.light-mode .qu-quick-btn:hover {
    background: #EBF3FA;
    border-color: #2E86AB;
    color: #1F4E79;
}

html[data-theme="light"] .qu-optional-panels,
body.light-mode .qu-optional-panels {
    background: rgba(255, 255, 255, 0.85);
    border-color: rgba(16, 46, 91, 0.10);
}

html[data-theme="light"] .qu-optional-header,
body.light-mode .qu-optional-header {
    background: rgba(245, 248, 252, 0.88);
    border-bottom-color: rgba(16, 46, 91, 0.10);
}

html[data-theme="light"] .qu-optional-title,
body.light-mode .qu-optional-title {
    color: rgba(16, 46, 91, 0.64);
}

html[data-theme="light"] .qu-optional-caption,
body.light-mode .qu-optional-caption {
    color: rgba(16, 46, 91, 0.48);
}

html[data-theme="light"] .qu-detail-label,
body.light-mode .qu-detail-label {
    color: rgba(16, 46, 91, 0.84);
}

html[data-theme="light"] .qu-detail-copy,
body.light-mode .qu-detail-copy {
    color: rgba(16, 46, 91, 0.56);
}

html[data-theme="light"] .qu-detail-card,
body.light-mode .qu-detail-card {
    border-right-color: rgba(16, 46, 91, 0.08);
}

html[data-theme="light"] .qu-score-preview-label,
body.light-mode .qu-score-preview-label {
    color: rgba(16, 46, 91, 0.56);
}

html[data-theme="light"] .qu-btn-cancel,
body.light-mode .qu-btn-cancel {
    border-color: rgba(16, 46, 91, 0.12);
    color: rgba(16, 46, 91, 0.76);
}

html[data-theme="light"] .qu-btn-cancel:hover,
body.light-mode .qu-btn-cancel:hover {
    background: rgba(16, 46, 91, 0.06);
}

@media (prefers-color-scheme: dark) {
    :where(html:not([data-theme="light"]):not(.light-mode)) .deadline-banner-overdue { background: #2D1010; border-color: #7A1F1F; }
    :where(html:not([data-theme="light"]):not(.light-mode)) .deadline-banner-critical { background: #2D1A0A; border-color: #7A3D0A; }
    :where(html:not([data-theme="light"]):not(.light-mode)) .deadline-banner-urgent { background: #2D2210; border-color: #5C440F; }
    :where(html:not([data-theme="light"]):not(.light-mode)) .deadline-banner-approaching { background: #0D2233; border-color: #1A4A70; }
    :where(html:not([data-theme="light"]):not(.light-mode)) .deadline-banner-overdue .deadline-banner-desc { color: #F07070; }
    :where(html:not([data-theme="light"]):not(.light-mode)) .deadline-banner-critical .deadline-banner-desc { color: #F4A261; }
    :where(html:not([data-theme="light"]):not(.light-mode)) .deadline-banner-urgent .deadline-banner-desc { color: #F4C842; }
    :where(html:not([data-theme="light"]):not(.light-mode)) .deadline-banner-approaching .deadline-banner-desc { color: #5BB8D4; }
    :where(html:not([data-theme="light"]):not(.light-mode)) .deadline-submitted-badge { background: rgba(109, 212, 154, 0.15); color: #6DD49A; }

    :where(html:not([data-theme="light"]):not(.light-mode)) .qu-modal-content { background: #161B25; }
    :where(html:not([data-theme="light"]):not(.light-mode)) .qu-modal-body { background: #161B25; }
    :where(html:not([data-theme="light"]):not(.light-mode)) .qu-modal-footer { background: #1A2236; border-top-color: #1E2D3D; }
    :where(html:not([data-theme="light"]):not(.light-mode)) .qu-surface {
        background: linear-gradient(180deg, rgba(24, 34, 53, 0.98), rgba(18, 27, 42, 0.98));
        border-color: #1E2D3D;
        box-shadow: 0 16px 32px rgba(2, 6, 23, 0.24);
    }
    :where(html:not([data-theme="light"]):not(.light-mode)) .qu-period-lock-main { color: #E7F1FB; }
    :where(html:not([data-theme="light"]):not(.light-mode)) .qu-period-lock-sub { color: #8EA0B4; }
    :where(html:not([data-theme="light"]):not(.light-mode)) .qu-period-deadline {
        background: rgba(91, 184, 212, 0.14);
        color: #A8D4F5;
    }
    :where(html:not([data-theme="light"]):not(.light-mode)) .qu-period-deadline-muted { background: #1A2236; color: #7F93A9; }
    :where(html:not([data-theme="light"]):not(.light-mode)) .qu-deadline-notice { background: #0D2233; border-color: #1A4A70; color: #A8D4F5; }
    :where(html:not([data-theme="light"]):not(.light-mode)) .qu-deadline-notice-icon { background: rgba(91, 184, 212, 0.16); }
    :where(html:not([data-theme="light"]):not(.light-mode)) .qu-deadline-notice-urgent { background: #2D2210; border-color: #5C440F; color: #F4C842; }
    :where(html:not([data-theme="light"]):not(.light-mode)) .qu-deadline-notice-closed { background: #2D1010; border-color: #7A1F1F; color: #F07070; }
    :where(html:not([data-theme="light"]):not(.light-mode)) .qu-deadline-notice-unscheduled { background: #1A2236; border-color: #2E3D52; color: #8899AA; }
    :where(html:not([data-theme="light"]):not(.light-mode)) .qu-select,
    :where(html:not([data-theme="light"]):not(.light-mode)) .qu-input,
    :where(html:not([data-theme="light"]):not(.light-mode)) .qu-textarea,
    :where(html:not([data-theme="light"]):not(.light-mode)) .qu-progress-number-input {
        background: #0F1117;
        border-color: #2E3D52;
        color: #D4D8E2;
    }
    :where(html:not([data-theme="light"]):not(.light-mode)) .qu-select:focus,
    :where(html:not([data-theme="light"]):not(.light-mode)) .qu-input:focus,
    :where(html:not([data-theme="light"]):not(.light-mode)) .qu-textarea:focus,
    :where(html:not([data-theme="light"]):not(.light-mode)) .qu-progress-number-input:focus {
        border-color: #2E86AB;
        box-shadow: 0 0 0 3px rgba(46, 134, 171, 0.2);
    }
    :where(html:not([data-theme="light"]):not(.light-mode)) .qu-field-label { color: #8899AA; }
    :where(html:not([data-theme="light"]):not(.light-mode)) .qu-field-hint { color: #4A5A6A; }
    :where(html:not([data-theme="light"]):not(.light-mode)) .qu-progress-helper { color: #70849A; }
    :where(html:not([data-theme="light"]):not(.light-mode)) .qu-tab-nav { background: rgba(22, 33, 50, 0.88); border-color: #1E2D3D; }
    :where(html:not([data-theme="light"]):not(.light-mode)) .qu-tab-trigger { color: #90A2B6; }
    :where(html:not([data-theme="light"]):not(.light-mode)) .qu-tab-trigger:hover {
        background: rgba(30, 42, 61, 0.94);
        border-color: #1E2D3D;
        color: #D7E4F0;
    }
    :where(html:not([data-theme="light"]):not(.light-mode)) .qu-tab-trigger.active {
        background: linear-gradient(135deg, rgba(31, 78, 121, 0.34), rgba(46, 134, 171, 0.20));
        border-color: rgba(91, 184, 212, 0.34);
        color: #E8F4FD;
        box-shadow: 0 14px 28px rgba(2, 6, 23, 0.22);
    }
    :where(html:not([data-theme="light"]):not(.light-mode)) .qu-tab-index { background: rgba(255, 255, 255, 0.06); }
    :where(html:not([data-theme="light"]):not(.light-mode)) .qu-tab-subtitle { color: #6F8398; }
    :where(html:not([data-theme="light"]):not(.light-mode)) .qu-tab-trigger.active .qu-tab-subtitle { color: #A8D4F5; }
    :where(html:not([data-theme="light"]):not(.light-mode)) .qu-step-pane-title { color: #E7F1FB; }
    :where(html:not([data-theme="light"]):not(.light-mode)) .qu-step-pane-desc { color: #7F93A9; }
    :where(html:not([data-theme="light"]):not(.light-mode)) .qu-optional-panels { border-color: #1E2D3D; }
    :where(html:not([data-theme="light"]):not(.light-mode)) .qu-optional-header { background: #1A2236; border-bottom-color: #1E2D3D; }
    :where(html:not([data-theme="light"]):not(.light-mode)) .qu-optional-title { color: #6B7A90; }
    :where(html:not([data-theme="light"]):not(.light-mode)) .qu-optional-caption { color: #5E7188; }
    :where(html:not([data-theme="light"]):not(.light-mode)) .qu-detail-card { border-right-color: #1E2D3D; }
    :where(html:not([data-theme="light"]):not(.light-mode)) .qu-detail-label { color: #B0C4D8; }
    :where(html:not([data-theme="light"]):not(.light-mode)) .qu-detail-copy { color: #70849A; }
    :where(html:not([data-theme="light"]):not(.light-mode)) .qu-quick-btn {
        background: #1A2236;
        border-color: #2E3D52;
        color: #8899AA;
    }
    :where(html:not([data-theme="light"]):not(.light-mode)) .qu-quick-btn:hover {
        background: #0D2233;
        border-color: #2E86AB;
        color: #5BB8D4;
    }
    :where(html:not([data-theme="light"]):not(.light-mode)) .qu-score-preview-label { color: #6B7A90; }
    :where(html:not([data-theme="light"]):not(.light-mode)) .qu-btn-cancel {
        border-color: #2E3D52;
        color: #8899AA;
    }
    :where(html:not([data-theme="light"]):not(.light-mode)) .qu-btn-cancel:hover { background: #1E2A3D; }
    :where(html:not([data-theme="light"]):not(.light-mode)) .qu-already-submitted-notice {
        background: #2D2210;
        border-color: #5C440F;
        color: #F4C842;
    }
    :where(html:not([data-theme="light"]):not(.light-mode)) .qu-already-submitted-notice i { color: #F4A61D; }
    :where(html:not([data-theme="light"]):not(.light-mode)) .qu-dial-svg { color: #D4D8E2; }

    :where(html:not([data-theme="light"]):not(.light-mode)) .qu-timeline .qu-entry { background: #161B25; border-color: #1E2D3D; }
    :where(html:not([data-theme="light"]):not(.light-mode)) .qu-timeline .qu-entry-current { border-left-color: #2E86AB; }
    :where(html:not([data-theme="light"]):not(.light-mode)) .qu-timeline .qu-entry-header { background: #1A2236; border-bottom-color: #1E2D3D; }
    :where(html:not([data-theme="light"]):not(.light-mode)) .qu-timeline .qu-period-year { color: #A8D4F5; }
    :where(html:not([data-theme="light"]):not(.light-mode)) .qu-timeline .qu-period-months { color: #6B7A90; }
    :where(html:not([data-theme="light"]):not(.light-mode)) .qu-timeline .qu-current-tag { background: rgba(46, 134, 171, 0.2); color: #5BB8D4; }
    :where(html:not([data-theme="light"]):not(.light-mode)) .qu-timeline .qu-narrative-text { color: #C8D4E0; }
    :where(html:not([data-theme="light"]):not(.light-mode)) .qu-timeline .qu-sections { border-top-color: #1E2D3D; }
    :where(html:not([data-theme="light"]):not(.light-mode)) .qu-timeline .qu-section { border-bottom-color: #1E2D3D; }
    :where(html:not([data-theme="light"]):not(.light-mode)) .qu-timeline .qu-section-label { color: #6B7A90; }
    :where(html:not([data-theme="light"]):not(.light-mode)) .qu-timeline .qu-section-text { color: #B0C4D8; }
    :where(html:not([data-theme="light"]):not(.light-mode)) .qu-status-bar { background: #1A2236; border-color: #1E2D3D; }
    :where(html:not([data-theme="light"]):not(.light-mode)) .qu-status-period { color: #B0C4D8; }
    :where(html:not([data-theme="light"]):not(.light-mode)) .qu-status-done { background: #1A3D28; color: #6DD49A; border-color: #2D6B43; }
    :where(html:not([data-theme="light"]):not(.light-mode)) .qu-status-pending { background: #2D2210; color: #F4C842; border-color: #5C440F; }
    :where(html:not([data-theme="light"]):not(.light-mode)) .qu-empty { border-color: #1E2D3D; }
    :where(html:not([data-theme="light"]):not(.light-mode)) .qu-empty-title { color: #A8D4F5; }
    :where(html:not([data-theme="light"]):not(.light-mode)) .qu-empty-desc { color: #6B7A90; }
    :where(html:not([data-theme="light"]):not(.light-mode)) .qu-empty-icon { color: #2E3D52; }
}

body.dark-mode .deadline-banner-overdue { background: #2D1010; border-color: #7A1F1F; }
body.dark-mode .deadline-banner-critical { background: #2D1A0A; border-color: #7A3D0A; }
body.dark-mode .deadline-banner-urgent { background: #2D2210; border-color: #5C440F; }
body.dark-mode .deadline-banner-approaching { background: #0D2233; border-color: #1A4A70; }
body.dark-mode .deadline-banner-overdue .deadline-banner-desc { color: #F07070; }
body.dark-mode .deadline-banner-critical .deadline-banner-desc { color: #F4A261; }
body.dark-mode .deadline-banner-urgent .deadline-banner-desc { color: #F4C842; }
body.dark-mode .deadline-banner-approaching .deadline-banner-desc { color: #5BB8D4; }
body.dark-mode .deadline-submitted-badge { background: rgba(109, 212, 154, 0.15); color: #6DD49A; }
body.dark-mode .qu-modal-content { background: #161B25; }
body.dark-mode .qu-modal-body { background: #161B25; }
body.dark-mode .qu-modal-footer { background: #1A2236; border-top-color: #1E2D3D; }
body.dark-mode .qu-surface { background: linear-gradient(180deg, rgba(24, 34, 53, 0.98), rgba(18, 27, 42, 0.98)); border-color: #1E2D3D; box-shadow: 0 16px 32px rgba(2, 6, 23, 0.24); }
body.dark-mode .qu-period-lock-main { color: #E7F1FB; }
body.dark-mode .qu-period-lock-sub { color: #8EA0B4; }
body.dark-mode .qu-period-deadline { background: rgba(91, 184, 212, 0.14); color: #A8D4F5; }
body.dark-mode .qu-period-deadline-muted { background: #1A2236; color: #7F93A9; }
body.dark-mode .qu-deadline-notice { background: #0D2233; border-color: #1A4A70; color: #A8D4F5; }
body.dark-mode .qu-deadline-notice-icon { background: rgba(91, 184, 212, 0.16); }
body.dark-mode .qu-deadline-notice-urgent { background: #2D2210; border-color: #5C440F; color: #F4C842; }
body.dark-mode .qu-deadline-notice-closed { background: #2D1010; border-color: #7A1F1F; color: #F07070; }
body.dark-mode .qu-deadline-notice-unscheduled { background: #1A2236; border-color: #2E3D52; color: #8899AA; }
body.dark-mode .qu-select,
body.dark-mode .qu-input,
body.dark-mode .qu-textarea,
body.dark-mode .qu-progress-number-input {
    background: #0F1117;
    border-color: #2E3D52;
    color: #D4D8E2;
}
body.dark-mode .qu-field-label { color: #8899AA; }
body.dark-mode .qu-progress-helper { color: #70849A; }
body.dark-mode .qu-tab-nav { background: rgba(22, 33, 50, 0.88); border-color: #1E2D3D; }
body.dark-mode .qu-tab-trigger { color: #90A2B6; }
body.dark-mode .qu-tab-trigger:hover { background: rgba(30, 42, 61, 0.94); border-color: #1E2D3D; color: #D7E4F0; }
body.dark-mode .qu-tab-trigger.active {
    background: linear-gradient(135deg, rgba(31, 78, 121, 0.34), rgba(46, 134, 171, 0.20));
    border-color: rgba(91, 184, 212, 0.34);
    color: #E8F4FD;
    box-shadow: 0 14px 28px rgba(2, 6, 23, 0.22);
}
body.dark-mode .qu-tab-index { background: rgba(255, 255, 255, 0.06); }
body.dark-mode .qu-tab-subtitle { color: #6F8398; }
body.dark-mode .qu-tab-trigger.active .qu-tab-subtitle { color: #A8D4F5; }
body.dark-mode .qu-step-pane-title { color: #E7F1FB; }
body.dark-mode .qu-step-pane-desc { color: #7F93A9; }
body.dark-mode .qu-optional-panels { border-color: #1E2D3D; }
body.dark-mode .qu-optional-header { background: #1A2236; border-bottom-color: #1E2D3D; }
body.dark-mode .qu-optional-caption { color: #5E7188; }
body.dark-mode .qu-detail-card { border-right-color: #1E2D3D; }
body.dark-mode .qu-detail-label { color: #B0C4D8; }
body.dark-mode .qu-detail-copy { color: #70849A; }
body.dark-mode .qu-quick-btn { background: #1A2236; border-color: #2E3D52; color: #8899AA; }
body.dark-mode .qu-quick-btn:hover { background: #0D2233; border-color: #2E86AB; color: #5BB8D4; }
body.dark-mode .qu-btn-cancel { border-color: #2E3D52; color: #8899AA; }
body.dark-mode .qu-btn-cancel:hover { background: #1E2A3D; }
body.dark-mode .qu-already-submitted-notice { background: #2D2210; border-color: #5C440F; color: #F4C842; }
body.dark-mode .qu-dial-svg { color: #D4D8E2; }
body.dark-mode .qu-timeline .qu-entry { background: #161B25; border-color: #1E2D3D; }
body.dark-mode .qu-timeline .qu-entry-current { border-left-color: #2E86AB; }
body.dark-mode .qu-timeline .qu-entry-header { background: #1A2236; border-bottom-color: #1E2D3D; }
body.dark-mode .qu-timeline .qu-period-year { color: #A8D4F5; }
body.dark-mode .qu-timeline .qu-period-months { color: #6B7A90; }
body.dark-mode .qu-timeline .qu-current-tag { background: rgba(46, 134, 171, 0.2); color: #5BB8D4; }
body.dark-mode .qu-timeline .qu-narrative-text { color: #C8D4E0; }
body.dark-mode .qu-timeline .qu-sections { border-top-color: #1E2D3D; }
body.dark-mode .qu-timeline .qu-section { border-bottom-color: #1E2D3D; }
body.dark-mode .qu-timeline .qu-section-label { color: #6B7A90; }
body.dark-mode .qu-timeline .qu-section-text { color: #B0C4D8; }
body.dark-mode .qu-status-bar { background: #1A2236; border-color: #1E2D3D; }
body.dark-mode .qu-status-period { color: #B0C4D8; }
body.dark-mode .qu-status-done { background: #1A3D28; color: #6DD49A; border-color: #2D6B43; }
body.dark-mode .qu-status-pending { background: #2D2210; color: #F4C842; border-color: #5C440F; }
body.dark-mode .qu-empty { border-color: #1E2D3D; }
body.dark-mode .qu-empty-title { color: #A8D4F5; }
body.dark-mode .qu-empty-desc { color: #6B7A90; }
body.dark-mode .qu-empty-icon { color: #2E3D52; }

html[data-theme="light"] .qu-modal-content,
html[data-theme="light"] .qu-modal-body,
html[data-theme="light"] .qu-modal-footer,
html[data-theme="light"] .qu-surface,
html[data-theme="light"] .qu-optional-header,
body.light-mode .qu-modal-content,
body.light-mode .qu-modal-body,
body.light-mode .qu-modal-footer,
body.light-mode .qu-surface,
body.light-mode .qu-optional-header {
    color-scheme: light;
}

html[data-theme="light"] .qu-modal-content,
body.light-mode .qu-modal-content {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 250, 253, 0.98));
    border: 1px solid rgba(16, 46, 91, 0.08);
    box-shadow: 0 30px 72px rgba(16, 46, 91, 0.14);
}

html[data-theme="light"] .qu-modal-body,
body.light-mode .qu-modal-body {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 253, 0.98));
}

html[data-theme="light"] .qu-modal-footer,
body.light-mode .qu-modal-footer {
    background: rgba(245, 248, 252, 0.92);
    border-top-color: rgba(16, 46, 91, 0.08);
}

html[data-theme="light"] .qu-surface,
body.light-mode .qu-surface {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(247, 250, 253, 0.94));
    border-color: rgba(31, 58, 95, 0.10);
    box-shadow: 0 10px 28px rgba(16, 46, 91, 0.06);
}

html[data-theme="light"] .qu-optional-header,
body.light-mode .qu-optional-header {
    background: rgba(245, 248, 252, 0.88);
    border-bottom-color: rgba(16, 46, 91, 0.10);
}

@media (max-width: 991.98px) {
    .qu-modal-dialog {
        width: min(980px, calc(100vw - 1rem));
        margin: 0.75rem auto;
        height: calc(100dvh - 1.5rem);
        min-height: calc(100dvh - 1.5rem);
    }

    .qu-form-grid {
        grid-template-columns: 1fr;
    }

    .qu-tab-nav {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .qu-tab-trigger {
        gap: 8px;
        padding: 10px;
    }

    .qu-optional-grid {
        grid-template-columns: 1fr;
    }

    .qu-detail-card {
        border-right: none;
        border-bottom: 1px solid var(--gray-100);
    }

    .qu-detail-card:last-child {
        border-bottom: none;
    }

    .qu-progress-dial-wrap {
        grid-template-columns: 80px minmax(0, 1fr);
    }

    .qu-modal-footer {
        align-items: stretch;
    }

    .qu-footer-left,
    .qu-footer-actions {
        width: 100%;
    }

    .qu-footer-actions {
        justify-content: flex-end;
    }
}

@media (max-width: 767.98px) {
    .qu-modal-body,
    .qu-modal-footer {
        padding-left: 18px;
        padding-right: 18px;
    }

    .qu-modal-hero {
        padding: 22px 18px 20px;
    }

    .qu-modal-dialog {
        width: calc(100vw - 0.75rem);
        margin: 0.375rem auto;
        height: calc(100dvh - 0.75rem);
        min-height: calc(100dvh - 0.75rem);
    }

    .qu-modal-content {
        max-height: calc(100vh - 0.75rem);
        max-height: calc(100dvh - 0.75rem);
    }

    .qu-progress-dial-wrap {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
        gap: 12px;
        padding: 6px 0 0;
    }

    .qu-modal-tab-content > .tab-pane.show.active {
        padding-right: 0;
    }

    .qu-tab-trigger {
        justify-content: center;
        padding: 9px 6px;
        text-align: center;
    }

    .qu-tab-index {
        width: 28px;
        height: 28px;
        border-radius: 8px;
        font-size: 10px;
    }

    .qu-tab-subtitle {
        display: none;
    }

    .qu-progress-input-wrap {
        align-items: center;
        width: 100%;
    }

    .qu-progress-number-row {
        justify-content: center;
    }

    .qu-quick-btns {
        width: 100%;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .qu-detail-label {
        line-height: 1.35;
    }

    .qu-modal-footer {
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
    }

    .qu-score-preview {
        flex-wrap: wrap;
    }

    .qu-footer-actions {
        width: 100%;
        flex-direction: column-reverse;
    }

    .qu-btn-cancel,
    .qu-btn-submit {
        width: 100%;
        justify-content: center;
    }

    .qu-step-pane-title {
        font-size: 0.9rem;
    }

    .deadline-banner-inner {
        padding: 12px 14px;
    }

    .deadline-banner-action {
        width: 100%;
        justify-content: center;
    }
}

@media (max-height: 640px) {
    .qu-modal-hero {
        padding-top: 16px;
        padding-bottom: 14px;
    }

    .qu-modal-period-badge {
        margin-bottom: 6px;
    }

    .qu-modal-title {
        font-size: 19px;
        margin-bottom: 3px;
    }

    .qu-modal-body {
        gap: 12px;
        padding-top: 14px;
        padding-bottom: 14px;
    }

    .qu-modal-footer {
        padding-top: 10px;
        padding-bottom: 10px;
    }
}

/* ══════════════════════════════════════════════════════════════
   TOP NAV SHELL — responsive horizontal navigation
   Visual thesis: calm ministry command bar with restrained navy glass.
   Interaction thesis: desktop stays compact; tablet/mobile unfolds as a clean panel.
   ══════════════════════════════════════════════════════════════ */

:root {
    --top-nav-height: 78px;
}

.sidebar.top-nav {
    position: fixed;
    inset: 0 0 auto 0;
    width: auto;
    height: auto;
    min-height: var(--top-nav-height);
    display: block;
    overflow: visible;
    z-index: 1100;
    background:
        linear-gradient(135deg, rgba(16, 34, 56, 0.96), rgba(22, 45, 74, 0.94));
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 18px 40px rgba(10, 24, 40, 0.18);
    backdrop-filter: blur(16px);
}

.sidebar.top-nav::before {
    display: none;
}

.top-nav-bar {
    min-height: var(--top-nav-height);
    padding: 0 1.4rem;
    display: flex;
    align-items: center;
    gap: 1.1rem;
}

.sidebar.top-nav .sidebar-brand {
    padding: 0;
    border-bottom: 0;
    flex-shrink: 0;
}

.sidebar.top-nav .sidebar-brand-link {
    gap: 0.8rem;
}

.top-nav-hamburger {
    display: none;
    flex-shrink: 0;
    border-color: rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.92);
}

.top-nav-hamburger:hover {
    border-color: rgba(91, 184, 212, 0.55);
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
}

.top-nav-panel {
    min-width: 0;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.sidebar.top-nav .sidebar-nav-wrap {
    min-width: 0;
    flex: 1;
    overflow: visible;
    padding: 0;
}

.sidebar.top-nav .sidebar-nav {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: nowrap;
}

.sidebar.top-nav .sidebar-nav .nav-item {
    flex: 0 0 auto;
}

.sidebar.top-nav .sidebar-nav .nav-link {
    padding: 0.66rem 0.86rem;
    border-radius: 999px;
    border-left: 0;
    color: rgba(255, 255, 255, 0.86);
    background: transparent;
    transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.sidebar.top-nav .sidebar-nav .nav-link:hover,
.sidebar.top-nav .sidebar-nav .nav-link.active,
.sidebar.top-nav .sidebar-nav .nav-item.active .nav-link {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.12);
    border-left-color: transparent;
    transform: none;
}

.sidebar.top-nav .sidebar-nav .nav-link::after {
    display: none;
}

.sidebar.top-nav .nav-link-dropdown {
    min-width: 0;
}

.sidebar.top-nav .nav-link-dropdown.dropdown-toggle::after {
    border-top-color: rgba(255, 255, 255, 0.54);
}

.top-nav-tools {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    flex-shrink: 0;
}

.sidebar.top-nav .sidebar-search-wrap {
    width: min(300px, 22vw);
    padding: 0;
    border-top: 0;
    background: transparent;
}

.sidebar.top-nav .sidebar-search-inner {
    position: relative;
}

.sidebar.top-nav .sidebar-search-input {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.88);
}

.sidebar.top-nav .sidebar-search-input::placeholder {
    color: rgba(255, 255, 255, 0.32);
}

.sidebar.top-nav .sidebar-search-input:focus {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(91, 184, 212, 0.62);
}

.sidebar.top-nav .sidebar-footer {
    padding: 0;
    border-top: 0;
    background: transparent;
}

.sidebar.top-nav .sidebar-user {
    gap: 0.65rem;
    padding: 0.35rem 0.4rem 0.35rem 0.45rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.sidebar.top-nav .sidebar-user-name {
    max-width: 150px;
}

.sidebar.top-nav .sidebar-logout {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.sidebar.top-nav .app-nav-dropdown,
.sidebar.top-nav .app-nav-dropdown-admin {
    margin-top: 0.55rem;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 24px 44px rgba(10, 24, 40, 0.18);
}

.main-wrapper {
    margin-left: 0;
    min-height: 100vh;
    padding-top: var(--top-nav-height);
}

.topbar {
    top: var(--top-nav-height);
}

body.sidebar-open {
    overflow: hidden;
}

@media (max-width: 1399.98px) {
    .sidebar.top-nav .sidebar-search-wrap {
        width: min(240px, 26vw);
    }

    .top-nav-hamburger {
        display: inline-flex;
    }

    .top-nav-panel {
        position: absolute;
        top: calc(100% + 0.7rem);
        left: 1rem;
        right: 1rem;
        padding: 1rem;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
        background: rgba(14, 29, 47, 0.98);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 22px;
        box-shadow: 0 24px 48px rgba(10, 24, 40, 0.28);
        opacity: 0;
        visibility: hidden;
        transform: translateY(-10px);
        pointer-events: none;
        transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s ease;
    }

    .sidebar.top-nav.open .top-nav-panel {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        pointer-events: auto;
    }

    .sidebar.top-nav .sidebar-nav-wrap {
        width: 100%;
    }

    .sidebar.top-nav .sidebar-nav {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 0.45rem;
    }

    .sidebar.top-nav .sidebar-nav .nav-item,
    .sidebar.top-nav .sidebar-nav .nav-link {
        width: 100%;
    }

    .sidebar.top-nav .sidebar-nav .nav-link {
        justify-content: space-between;
        padding: 0.82rem 0.95rem;
        border-radius: 16px;
    }

    .sidebar.top-nav .app-nav-dropdown,
    .sidebar.top-nav .app-nav-dropdown-admin {
        position: static !important;
        transform: none !important;
        inset: auto !important;
        width: 100%;
        min-width: 0;
        margin-top: 0.55rem;
        background: rgba(255, 255, 255, 0.98);
    }

    .top-nav-tools {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
    }

    .sidebar.top-nav .sidebar-search-wrap,
    .sidebar.top-nav .sidebar-footer {
        width: 100%;
    }

    .sidebar.top-nav .sidebar-user {
        width: 100%;
        justify-content: space-between;
        border-radius: 18px;
        padding: 0.75rem 0.85rem;
    }

    .sidebar-overlay {
        display: block;
        position: fixed;
        inset: var(--top-nav-height) 0 0 0;
        z-index: 1050;
        background: rgba(4, 10, 18, 0.42);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.22s ease;
    }

    body.sidebar-open .sidebar-overlay {
        opacity: 1;
        pointer-events: auto;
    }
}

@media (max-width: 767.98px) {
    .top-nav-bar {
        padding: 0 0.9rem;
        gap: 0.8rem;
    }

    .sidebar.top-nav .sidebar-brand-title {
        font-size: 13px;
    }

    .sidebar.top-nav .sidebar-brand-sub {
        display: none;
    }

    .topbar {
        padding: 0 1rem;
    }

    .topbar-actions {
        gap: 0.5rem;
        flex-wrap: wrap;
        justify-content: flex-end;
    }

    .content-area {
        padding: 1rem;
    }
}

@media (prefers-color-scheme: dark) {
    :where(html:not([data-theme="light"]):not(.light-mode)) .sidebar.top-nav {
        background: linear-gradient(135deg, rgba(10, 18, 30, 0.96), rgba(14, 29, 47, 0.95));
        border-bottom-color: rgba(255, 255, 255, 0.06);
    }

    :where(html:not([data-theme="light"]):not(.light-mode)) .sidebar.top-nav .app-nav-dropdown,
    :where(html:not([data-theme="light"]):not(.light-mode)) .sidebar.top-nav .app-nav-dropdown-admin {
        background: rgba(22, 27, 37, 0.98);
        border-color: #1E2D3D;
    }
}

body.dark-mode .sidebar.top-nav {
    background: linear-gradient(135deg, rgba(10, 18, 30, 0.96), rgba(14, 29, 47, 0.95));
    border-bottom-color: rgba(255, 255, 255, 0.06);
}

body.dark-mode .sidebar.top-nav .app-nav-dropdown,
body.dark-mode .sidebar.top-nav .app-nav-dropdown-admin {
    background: rgba(22, 27, 37, 0.98);
    border-color: #1E2D3D;
}

/* ══════════════════════════════════════════════════════════════
   APP HEADER RESTORE — original horizontal nav with logo mark
   ══════════════════════════════════════════════════════════════ */

.app-brand .brand-mark {
    width: 3rem;
    height: 3rem;
    border-radius: 18px;
    padding: 0.32rem;
}

.app-brand .brand-logo-img {
    border-radius: 14px;
    object-fit: contain;
    background: rgba(255, 255, 255, 0.82);
}

.main-wrapper {
    padding-top: 0;
    min-height: calc(100vh - 90px);
}

.topbar {
    position: relative;
    top: auto;
    height: auto;
    padding: 1.35rem 1.75rem 0.6rem;
    background: transparent;
    backdrop-filter: none;
    border-bottom: 0;
    box-shadow: none;
}

.topbar-left {
    min-width: 0;
}

.topbar-actions {
    margin-left: auto;
}

.content-area {
    padding-top: 0.9rem;
}

@media (max-width: 1199.98px) {
    .sidebar-overlay {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 1050;
        background: rgba(16, 27, 42, 0.32);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.22s ease;
    }

    body.sidebar-open .sidebar-overlay {
        opacity: 1;
        pointer-events: auto;
    }
}

@media (max-width: 767.98px) {
    .topbar {
        padding: 0 1rem;
    }

    .content-area {
        padding: 1rem;
    }
}

/* Header stability refinements */
.app-header-main {
    gap: 0.65rem;
    row-gap: 0;
    grid-template-columns: auto minmax(0, 1fr) minmax(150px, 190px) auto;
    grid-template-areas: "brand nav search tools";
    align-items: center;
    padding: 0.85rem 1.15rem;
}

.app-brand {
    gap: 0.72rem;
}

.app-brand .brand-title {
    font-size: 1.16rem;
}

.app-brand .brand-subtitle {
    font-size: 0.68rem;
}

.app-header-nav {
    min-width: 0;
}

.app-nav {
    gap: 0.35rem;
    flex-wrap: nowrap;
}

.app-nav .nav-link {
    gap: 0.48rem;
    padding: 0.58rem 0.72rem;
    font-size: 0.93rem;
}

.app-nav .nav-icon {
    font-size: 0.94rem;
}

.nav-link-dropdown {
    min-width: 0;
}

.nav-link-dropdown.dropdown-toggle::after {
    margin-left: 0.45rem;
}

.app-nav-group {
    position: relative;
}

.app-nav-group-menu {
    overflow: hidden;
}

.app-header-search {
    justify-content: flex-end;
}

.search-bar-wrap {
    width: min(100%, 190px);
}

.app-header-tools {
    gap: 0.45rem;
}

.theme-toggle-btn,
.notification-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.55rem;
    height: 2.55rem;
    min-width: 2.55rem;
    padding: 0;
    border-radius: 999px;
}

.theme-toggle-label {
    display: none;
}

.notification-trigger {
    position: relative;
    border: 1px solid rgba(31, 58, 95, 0.08);
    background: rgba(255, 255, 255, 0.88);
    color: var(--navy);
    box-shadow: 0 8px 18px rgba(17, 37, 64, 0.06);
    transition: var(--transition);
    text-decoration: none;
}

.notification-trigger:hover {
    background: rgba(199, 154, 44, 0.1);
    color: var(--teal);
    border-color: rgba(199, 154, 44, 0.32);
    transform: translateY(-1px);
}

.notification-trigger::after {
    display: none;
}

.app-header-notifications {
    display: flex;
    align-items: center;
}

.app-header .notification-dropdown {
    margin-top: 0.7rem;
}

.app-user-chip {
    max-width: 180px;
    gap: 0.55rem;
    padding: 0.36rem 0.58rem 0.36rem 0.42rem;
}

.app-user-chip .user-avatar {
    width: 2.2rem;
    height: 2.2rem;
}

.app-user-chip .user-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.18rem;
    min-width: 0;
}

.app-user-chip .user-name {
    font-size: 0.8rem;
    line-height: 1.05;
}

.app-user-chip .user-meta {
    margin-top: 0;
}

.user-role-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.18rem 0.5rem;
    border-radius: 999px;
    background: rgba(46, 134, 171, 0.12);
    color: var(--teal);
    font-size: 0.64rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    line-height: 1;
    text-transform: uppercase;
}

@media (max-width: 1620px) {
    .app-brand .brand-subtitle {
        display: none;
    }

    .search-bar-wrap {
        width: min(100%, 176px);
    }

    .app-nav .nav-link {
        padding: 0.54rem 0.66rem;
        font-size: 0.9rem;
    }
}

@media (max-width: 1480px) {
    .app-header-main {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) minmax(140px, 170px) auto;
        grid-template-areas: "brand nav search tools";
        align-items: center;
        row-gap: 0;
    }

    .app-header-search {
        order: initial;
        width: auto;
        justify-content: flex-end;
    }

    .app-user-chip {
        max-width: 112px;
        padding-right: 0.45rem;
    }

    .app-user-chip .user-name {
        display: none;
    }

    .search-bar-wrap {
        width: min(100%, 160px);
    }
}

@media (max-width: 1279.98px) {
    .app-header-main {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.75rem;
        padding: 0.9rem 1rem 0.8rem;
    }

    .hamburger {
        display: inline-flex;
        margin-left: 0;
    }

    .app-header-tools {
        margin-left: 0;
        gap: 0.45rem;
        flex: 0 0 auto;
    }

    .app-header-search {
        order: 4;
        width: 100%;
        justify-content: stretch;
    }

    .app-header-search .search-bar-wrap {
        width: 100%;
    }

    .app-user-chip {
        max-width: 180px;
    }

    .app-user-chip .user-name {
        display: block;
    }

    .notification-trigger,
    .theme-toggle-btn,
    .app-header .logout-btn,
    .hamburger {
        width: 2.45rem;
        height: 2.45rem;
        min-width: 2.45rem;
    }

    .app-header-nav {
        display: none;
        position: absolute;
        left: 1rem;
        right: 1rem;
        top: calc(100% + 0.35rem);
        padding: 0.9rem;
        border-radius: 22px;
        border: 1px solid rgba(31, 58, 95, 0.10);
        background: rgba(255, 255, 255, 0.98);
        box-shadow: 0 22px 44px rgba(17, 37, 64, 0.14);
        z-index: 1200;
        max-height: min(calc(100dvh - 7.6rem), 36rem);
        overflow-y: auto;
        overscroll-behavior: contain;
        scrollbar-width: thin;
    }

    .app-header-nav.open {
        display: block;
    }

    .app-nav {
        flex-direction: column;
        gap: 0.85rem;
        overflow: visible;
    }

    .app-nav .nav-item,
    .app-nav .nav-item.dropdown {
        width: 100%;
    }

    .app-nav .nav-link,
    .nav-link-dropdown {
        width: 100%;
        justify-content: space-between;
        border-radius: 18px;
        transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease;
    }

    .app-nav-dropdown,
    .app-nav-dropdown-admin {
        position: static !important;
        inset: auto !important;
        transform: none !important;
        width: 100%;
        min-width: 0;
        margin-top: 0;
        padding: 0;
        border: 0;
        box-shadow: none;
        border-radius: 18px;
        background: transparent;
        display: none;
    }

    .app-nav-group.is-mobile-open > .app-nav-group-menu {
        display: block;
        margin-top: 0.18rem;
        width: 100%;
        padding: 0.12rem 0 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }

    .app-nav-group .nav-link-dropdown.dropdown-toggle::after {
        display: inline-block;
        margin-left: auto;
        transition: none;
    }

    .app-nav-group.is-mobile-open > .nav-link-dropdown.dropdown-toggle::after {
        transform: none;
    }

    .app-nav-subitem {
        padding: 0.56rem 0.78rem;
        border-radius: 12px;
        gap: 0.7rem;
        background: transparent;
        transition: background-color 0.12s ease, color 0.12s ease;
    }

    .app-nav-subtitle {
        font-size: 0.88rem;
    }

    .app-nav-subitem small {
        font-size: 0.72rem;
        line-height: 1.4;
    }

    .app-nav .nav-link:hover,
    .app-nav .nav-link.active,
    .sidebar-nav .nav-item.active .nav-link,
    .app-nav-subitem:hover,
    .app-nav-subitem:focus,
    .app-nav-subitem.active {
        transform: none;
        box-shadow: none;
    }

    .sidebar-overlay {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 1050;
        background: rgba(16, 27, 42, 0.32);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.22s ease;
    }

    body.sidebar-open .sidebar-overlay {
        opacity: 1;
        pointer-events: auto;
    }
}

@media (max-width: 767.98px) {
    .app-header {
        backdrop-filter: blur(14px);
    }

    .app-header-main {
        gap: 0.6rem;
        padding: 0.85rem 0.9rem 0.8rem;
    }

    .app-brand {
        flex: 1 1 auto;
        min-width: 0;
        max-width: calc(100% - 11.75rem);
    }

    .app-brand .brand-title {
        font-size: 1rem;
    }

    .app-brand .brand-subtitle {
        display: none;
    }

    .app-header-tools {
        gap: 0.35rem;
        margin-left: auto;
    }

    .app-user-chip {
        padding: 0.25rem;
        max-width: none;
        min-width: 0;
    }

    .app-user-chip .user-info {
        display: none;
    }

    .app-header-nav {
        left: 0.75rem;
        right: 0.75rem;
        top: calc(100% + 0.3rem);
        padding: 0.75rem;
        border-radius: 20px;
        max-height: min(calc(100dvh - 8.8rem), 32rem);
    }

    .app-nav {
        gap: 0.65rem;
    }

    .app-nav .nav-link,
    .nav-link-dropdown {
        padding: 0.78rem 0.9rem;
        font-size: 0.94rem;
    }

    .search-bar-wrap,
    .app-header-search .search-bar-wrap {
        width: 100%;
    }

    .search-input-wrap .search-input {
        min-height: 2.95rem;
    }

    .app-header .notification-dropdown {
        position: fixed !important;
        top: 4.65rem !important;
        right: 0.75rem !important;
        left: 0.75rem !important;
        width: auto !important;
        min-width: 0 !important;
        transform: none !important;
    }

    .topbar {
        padding: 1.1rem 1rem 0.55rem;
    }

    .topbar-left,
    .topbar-actions {
        width: 100%;
    }

    .topbar-actions {
        margin-left: 0;
        margin-top: 0.75rem;
    }
}

html[data-theme="dark"] .notification-trigger,
body.dark-mode .notification-trigger {
    background: rgba(15, 23, 42, 0.88);
    border-color: rgba(148, 163, 184, 0.16);
    color: var(--gray-900);
    box-shadow: 0 8px 18px rgba(2, 6, 23, 0.34);
}

html[data-theme="dark"] .notification-trigger:hover,
body.dark-mode .notification-trigger:hover {
    background: rgba(46, 134, 171, 0.14);
    border-color: rgba(91, 184, 212, 0.4);
    color: #5BB8D4;
}

html[data-theme="dark"] .user-role-pill,
body.dark-mode .user-role-pill {
    background: rgba(91, 184, 212, 0.14);
    color: #A8D4F5;
}

html[data-theme="dark"] .app-nav-group.is-mobile-open > .app-nav-group-menu,
body.dark-mode .app-nav-group.is-mobile-open > .app-nav-group-menu {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
}

html[data-theme="dark"] .notification-badge-count,
body.dark-mode .notification-badge-count {
    border-color: #162131;
}

/* Header polish */
@media (min-width: 1280px) {
    .app-header {
        position: sticky;
        overflow: visible;
    }

    .app-header::before {
        content: "";
        position: absolute;
        inset: auto 1.35rem 0;
        height: 1px;
        background: linear-gradient(90deg, transparent, rgba(46, 134, 171, 0.24), transparent);
        pointer-events: none;
    }

    .app-header-main {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        gap: 0.75rem;
        max-width: 1680px;
        margin: 0 auto;
        padding: 0.82rem 1.25rem;
    }

    .app-brand {
        flex: 0 0 auto;
        gap: 0.75rem;
        min-width: 0;
        max-width: 15rem;
    }

    .app-brand .brand-copy {
        display: flex;
        flex-direction: column;
        min-width: 0;
    }

    .app-brand .brand-mark {
        position: relative;
        overflow: hidden;
        background: linear-gradient(135deg, rgba(199, 154, 44, 0.98), rgba(244, 214, 128, 0.92));
    }

    .app-brand .brand-mark::after {
        content: "";
        position: absolute;
        inset: 2px;
        border-radius: inherit;
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.36), transparent 60%);
        pointer-events: none;
    }

    .app-brand .brand-title {
        font-size: 1.08rem;
        line-height: 1.1;
        white-space: nowrap;
    }

    .app-brand .brand-subtitle {
        font-size: 0.66rem;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        white-space: nowrap;
    }

    .app-header-nav {
        flex: 1 1 auto;
        min-width: 0;
        display: flex;
        justify-content: center;
    }

    .app-nav {
        width: 100%;
        justify-content: center;
        gap: 0.3rem;
    }

    .app-nav .nav-item {
        min-width: 0;
    }

    .app-nav .nav-link,
    .nav-link-dropdown {
        min-height: 2.55rem;
        padding: 0.56rem 0.7rem;
        font-size: 0.9rem;
        line-height: 1;
        backdrop-filter: blur(10px);
    }

    .nav-link-dropdown {
        min-width: auto;
        border: 1px solid transparent;
        cursor: pointer;
        font: inherit;
        text-align: left;
        appearance: none;
        -webkit-appearance: none;
    }

    .nav-link-dropdown.dropdown-toggle::after {
        margin-left: 0.45rem;
    }

    .app-nav .nav-icon {
        font-size: 0.9rem;
    }

    .app-nav-dropdown {
        margin-top: 0.9rem;
        animation: appNavDropdownIn 0.18s ease;
    }

    .app-header-search {
        flex: 0 0 11rem;
        min-width: 0;
        justify-content: flex-end;
    }

    .app-header-search .search-bar-wrap,
    .search-bar-wrap {
        width: 100%;
    }

    .search-input-wrap .search-input {
        min-height: 2.55rem;
        padding-inline: 2.2rem 0.85rem;
        font-size: 0.88rem;
    }

    .app-header-tools {
        flex: 0 0 auto;
        gap: 0.45rem;
    }

    .theme-toggle-btn,
    .notification-trigger,
    .app-header .logout-btn {
        width: 2.5rem;
        height: 2.5rem;
        min-width: 2.5rem;
        padding: 0;
    }

    .app-user-chip {
        max-width: 9.8rem;
        gap: 0.5rem;
        padding: 0.34rem 0.52rem 0.34rem 0.38rem;
    }

    .app-user-chip .user-avatar {
        width: 2.12rem;
        height: 2.12rem;
    }

    .app-user-chip .user-name {
        font-size: 0.76rem;
    }

    .user-role-pill {
        font-size: 0.6rem;
        padding: 0.16rem 0.44rem;
    }

    .theme-toggle-label {
        display: none !important;
    }
}

@media (min-width: 1280px) and (max-width: 1510px) {
    .app-brand .brand-subtitle {
        display: none;
    }

    .app-header-search {
        flex-basis: 9.75rem;
    }

    .app-nav .nav-link,
    .nav-link-dropdown {
        padding-inline: 0.62rem;
        font-size: 0.86rem;
    }

    .app-user-chip {
        max-width: 7.4rem;
    }

    .app-user-chip .user-name {
        display: none;
    }
}

@media (min-width: 1280px) and (max-width: 1380px) {
    .app-header-main {
        gap: 0.55rem;
    }

    .app-header-search {
        flex-basis: 8.8rem;
    }

    .app-nav {
        gap: 0.2rem;
    }

    .app-nav .nav-link,
    .nav-link-dropdown {
        padding-inline: 0.56rem;
        font-size: 0.82rem;
    }

    .app-nav .nav-icon {
        font-size: 0.84rem;
    }

    .user-role-pill {
        font-size: 0.56rem;
        letter-spacing: 0.04em;
    }
}

@keyframes appNavDropdownIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

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

/* Login experience refresh */
.auth-page {
    min-height: 100svh;
    overflow: hidden;
    background:
        radial-gradient(circle at top right, rgba(199, 154, 44, 0.08), transparent 24%),
        linear-gradient(180deg, #f8f4ea 0%, #f2ebde 100%);
}

.auth-shell {
    min-height: 100svh;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(24rem, 28rem);
}

.auth-brand-panel {
    position: relative;
    display: flex;
    align-items: center;
    padding: clamp(2.5rem, 4vw, 4.2rem);
    background:
        radial-gradient(circle at top right, rgba(244, 214, 128, 0.14), transparent 22%),
        linear-gradient(145deg, #102447 0%, #163458 100%);
}

.auth-brand-panel::before {
    content: "";
    position: absolute;
    inset: 1.5rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 30px;
    pointer-events: none;
}

.auth-brand-inner {
    position: relative;
    z-index: 1;
    max-width: 24rem;
}

.auth-brand-mark {
    margin-bottom: 1rem;
    font-size: 0.78rem;
}

.auth-brand-kicker {
    display: inline-flex;
    align-items: center;
    margin-bottom: 1rem;
    color: #f4d680;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.auth-brand-title {
    margin: 0;
    max-width: 9ch;
    font-size: clamp(2.35rem, 4vw, 3.4rem);
    line-height: 1.02;
    text-wrap: balance;
}

.auth-brand-copy {
    margin: 0.95rem 0 1.2rem;
    max-width: 26rem;
    color: rgba(255, 255, 255, 0.76);
    font-size: 0.96rem;
    line-height: 1.7;
}

.auth-brand-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.auth-brand-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.44rem 0.72rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.76rem;
    font-weight: 600;
}

.auth-brand-meta-item i {
    color: #f4d680;
}

.auth-form-panel {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background:
        radial-gradient(circle at top left, rgba(46, 134, 171, 0.06), transparent 22%),
        linear-gradient(180deg, rgba(255, 253, 248, 0.98), rgba(247, 241, 232, 0.95));
}

.auth-form-shell {
    width: min(100%, 27.5rem);
}

.auth-toolbar {
    margin-bottom: 0.9rem;
}

.auth-theme-toggle {
    width: 2.7rem;
    height: 2.7rem;
    min-width: 2.7rem;
    justify-content: center;
    padding: 0;
    gap: 0;
}

.auth-card {
    position: relative;
    padding: 1.55rem;
    border-radius: 24px;
    border: 1px solid rgba(31, 58, 95, 0.08);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(249, 251, 253, 0.96));
    box-shadow: 0 24px 52px rgba(22, 45, 74, 0.1);
}

.auth-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 4px;
    background: linear-gradient(90deg, #c79a2c, #2e86ab);
}

.auth-card-head {
    margin-bottom: 1rem;
}

.auth-title {
    margin: 0.28rem 0 0.45rem;
    font-size: 1.95rem;
}

.auth-subtitle {
    margin-bottom: 0;
    font-size: 0.95rem;
}

.auth-input-shell .form-control {
    min-height: 2.6rem;
}

.auth-submit {
    min-height: 3.2rem;
    border-radius: 14px;
}

.auth-footer-note {
    margin-top: 1rem;
    font-size: 0.82rem;
}

html[data-theme="dark"] .auth-page,
body.dark-mode.auth-page {
    background:
        radial-gradient(circle at top right, rgba(199, 154, 44, 0.05), transparent 24%),
        linear-gradient(180deg, #08111d 0%, #0d1726 100%);
}

html[data-theme="dark"] .auth-brand-panel,
body.dark-mode .auth-brand-panel {
    background:
        radial-gradient(circle at top right, rgba(244, 214, 128, 0.08), transparent 22%),
        linear-gradient(145deg, #0d1b2a 0%, #143252 100%);
}

html[data-theme="dark"] .auth-brand-panel::before,
body.dark-mode .auth-brand-panel::before {
    border-color: rgba(168, 212, 245, 0.08);
}

html[data-theme="dark"] .auth-brand-meta-item,
body.dark-mode .auth-brand-meta-item {
    background: rgba(14, 24, 38, 0.34);
    border-color: rgba(168, 212, 245, 0.1);
    color: rgba(220, 230, 242, 0.82);
}

html[data-theme="dark"] .auth-form-panel,
body.dark-mode .auth-form-panel {
    background:
        radial-gradient(circle at top left, rgba(46, 134, 171, 0.12), transparent 22%),
        linear-gradient(180deg, rgba(11, 19, 32, 0.96), rgba(8, 17, 29, 0.98));
}

html[data-theme="dark"] .auth-card,
body.dark-mode .auth-card {
    background: linear-gradient(180deg, rgba(19, 32, 51, 0.98), rgba(13, 23, 38, 0.96));
    border-color: rgba(168, 212, 245, 0.1);
    box-shadow: 0 24px 48px rgba(2, 6, 23, 0.42);
}

@media (max-width: 991.98px) {
    .auth-page {
        overflow-y: auto;
    }

    .auth-shell {
        grid-template-columns: 1fr;
        min-height: 100svh;
    }

    .auth-brand-panel {
        display: none;
    }

    .auth-form-panel {
        min-height: 100svh;
        padding: 1rem;
    }

    .auth-form-shell {
        width: min(100%, 28rem);
    }
}

@media (max-width: 639.98px) {
    .auth-toolbar-pill {
        font-size: 0.72rem;
        padding-inline: 0.72rem;
    }

    .auth-card {
        padding: 1.3rem;
        border-radius: 22px;
    }

    .auth-card-head {
        flex-direction: column;
        align-items: flex-start;
    }

    .auth-title {
        font-size: 1.72rem;
    }

    .auth-subtitle {
        font-size: 0.9rem;
    }
}

/* Auth proportion polish */
.auth-page {
    min-height: 100svh;
    overflow: hidden;
    background:
        radial-gradient(circle at top right, rgba(199, 154, 44, 0.08), transparent 22%),
        radial-gradient(circle at bottom left, rgba(46, 134, 171, 0.06), transparent 24%),
        linear-gradient(180deg, #f7f2e8 0%, #efe7da 100%);
}

.auth-shell {
    min-height: 100svh;
    grid-template-columns: minmax(0, 1.06fr) minmax(31rem, 0.94fr);
}

.auth-brand-panel {
    position: relative;
    justify-content: center;
    padding: clamp(2.2rem, 4vw, 3.9rem);
    background:
        radial-gradient(circle at top right, rgba(199, 154, 44, 0.12), transparent 20%),
        radial-gradient(circle at bottom left, rgba(31, 78, 121, 0.11), transparent 23%),
        linear-gradient(145deg, #f4ede2 0%, #e4d7c3 100%);
    color: #163250;
}

.auth-brand-panel::before {
    inset: 1.35rem;
    border-radius: 28px;
    border: 1px solid rgba(31, 58, 95, 0.08);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.04));
}

.auth-brand-watermark {
    position: absolute;
    right: 2.4rem;
    bottom: 2.2rem;
    width: min(38%, 13.5rem);
    opacity: 0.12;
    pointer-events: none;
}

.auth-brand-watermark-logo {
    width: 100%;
    height: auto;
    object-fit: contain;
    filter: sepia(0.25) saturate(0.75) hue-rotate(-8deg) brightness(0.96);
}

.auth-brand-inner {
    position: relative;
    z-index: 1;
    max-width: 31rem;
}

.auth-brand-mark {
    margin-bottom: 1rem;
    font-size: 0.8rem;
    color: #17365d;
}

.auth-brand-kicker {
    margin-bottom: 1rem;
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    color: #b17d18;
}

.auth-brand-title {
    max-width: 9.2ch;
    font-size: clamp(2.35rem, 4.2vw, 4rem);
    line-height: 0.98;
    color: #163250;
}

.auth-brand-copy {
    margin: 1rem 0 1.2rem;
    max-width: 25rem;
    font-size: 1rem;
    line-height: 1.68;
    color: rgba(22, 50, 80, 0.78);
}

.auth-brand-meta {
    gap: 0.55rem;
    max-width: 25rem;
}

.auth-brand-meta-item {
    padding: 0.48rem 0.78rem;
    font-size: 0.75rem;
    border-color: rgba(31, 58, 95, 0.1);
    background: rgba(255, 255, 255, 0.42);
    color: rgba(22, 50, 80, 0.82);
}

.auth-form-panel {
    padding: clamp(1.4rem, 2.2vw, 2.4rem);
    background:
        radial-gradient(circle at top left, rgba(46, 134, 171, 0.08), transparent 22%),
        linear-gradient(180deg, rgba(255, 252, 246, 0.98), rgba(245, 238, 228, 0.96));
}

.auth-form-shell {
    width: min(100%, 33rem);
}

.auth-toolbar {
    margin-bottom: 0.95rem;
}

.auth-toolbar-pill {
    padding: 0.46rem 0.82rem;
    font-size: 0.76rem;
}

.auth-theme-toggle {
    width: 2.8rem;
    height: 2.8rem;
    min-width: 2.8rem;
}

.auth-card {
    padding: 1.7rem;
    border-radius: 26px;
    border-color: rgba(31, 58, 95, 0.09);
    box-shadow: 0 24px 52px rgba(22, 45, 74, 0.12);
}

.auth-login-brand {
    margin-bottom: 1rem;
    padding-bottom: 0.9rem;
}

.auth-login-brand-badge {
    width: 3rem;
    height: 3rem;
}

.auth-login-brand-title {
    font-size: 0.98rem;
}

.auth-card-head {
    margin-bottom: 1rem;
}

.auth-title {
    margin: 0.22rem 0 0.4rem;
    font-size: clamp(2rem, 2.4vw, 2.35rem);
}

.auth-subtitle {
    margin-bottom: 0;
    font-size: 0.98rem;
    line-height: 1.62;
}

.auth-field {
    margin-bottom: 0.95rem;
}

.auth-input-shell .form-control {
    min-height: 2.72rem;
}

.auth-field-hint {
    margin-top: 0.35rem;
    font-size: 0.8rem;
}

.auth-submit {
    min-height: 3.2rem;
}

.auth-footer-note {
    margin-top: 1rem;
    font-size: 0.82rem;
}

html[data-theme="dark"] .auth-page,
body.dark-mode.auth-page {
    background:
        radial-gradient(circle at top right, rgba(199, 154, 44, 0.06), transparent 22%),
        radial-gradient(circle at bottom left, rgba(46, 134, 171, 0.08), transparent 24%),
        linear-gradient(180deg, #08111d 0%, #0d1726 100%);
}

html[data-theme="dark"] .auth-brand-panel,
body.dark-mode .auth-brand-panel {
    background:
        radial-gradient(circle at top right, rgba(244, 214, 128, 0.08), transparent 19%),
        radial-gradient(circle at bottom left, rgba(91, 184, 212, 0.08), transparent 24%),
        linear-gradient(145deg, #0c1c2f 0%, #153552 100%);
    color: #ecf3fb;
}

html[data-theme="dark"] .auth-brand-panel::before,
body.dark-mode .auth-brand-panel::before {
    border-color: rgba(168, 212, 245, 0.09);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.015));
}

html[data-theme="dark"] .auth-brand-watermark,
body.dark-mode .auth-brand-watermark {
    opacity: 0.07;
}

html[data-theme="dark"] .auth-brand-watermark-logo,
body.dark-mode .auth-brand-watermark-logo {
    filter: grayscale(1) brightness(1.05) opacity(0.95);
}

html[data-theme="dark"] .auth-brand-mark,
body.dark-mode .auth-brand-mark {
    color: #f3f7fb;
}

html[data-theme="dark"] .auth-brand-kicker,
body.dark-mode .auth-brand-kicker {
    color: #f2cf72;
}

html[data-theme="dark"] .auth-brand-title,
body.dark-mode .auth-brand-title {
    color: #f7fbff;
}

html[data-theme="dark"] .auth-brand-copy,
body.dark-mode .auth-brand-copy {
    color: rgba(220, 230, 242, 0.84);
}

html[data-theme="dark"] .auth-brand-meta-item,
body.dark-mode .auth-brand-meta-item {
    background: rgba(14, 24, 38, 0.3);
    border-color: rgba(168, 212, 245, 0.11);
    color: rgba(220, 230, 242, 0.82);
}

html[data-theme="dark"] .auth-form-panel,
body.dark-mode .auth-form-panel {
    background:
        radial-gradient(circle at top left, rgba(46, 134, 171, 0.13), transparent 22%),
        linear-gradient(180deg, rgba(11, 19, 32, 0.97), rgba(8, 17, 29, 0.985));
}

html[data-theme="dark"] .auth-card,
body.dark-mode .auth-card {
    border-color: rgba(168, 212, 245, 0.11);
    box-shadow: 0 28px 54px rgba(2, 6, 23, 0.46);
}

@media (max-width: 991.98px) {
    .auth-page {
        overflow-y: auto;
    }

    .auth-shell {
        min-height: 100svh;
        grid-template-columns: 1fr;
    }

    .auth-brand-panel {
        display: none;
    }

    .auth-form-panel {
        min-height: 100svh;
        padding: 1rem;
    }

    .auth-form-shell {
        width: min(100%, 28rem);
    }
}

@media (max-width: 639.98px) {
    .auth-card {
        padding: 1.25rem;
        border-radius: 20px;
    }

    .auth-login-brand {
        margin-bottom: 0.8rem;
        padding-bottom: 0.72rem;
    }

    .auth-login-brand-title {
        font-size: 0.86rem;
    }

    .auth-card-head {
        flex-direction: column;
        align-items: flex-start;
    }

    .auth-title {
        font-size: 1.64rem;
    }

    .auth-subtitle {
        font-size: 0.88rem;
    }
}

@media (max-height: 860px) and (min-width: 992px) {
    .auth-brand-panel {
        padding: 1.95rem 2.55rem;
    }

    .auth-brand-title {
        font-size: clamp(2.05rem, 3.2vw, 3rem);
    }

    .auth-brand-copy {
        margin-bottom: 0.9rem;
        font-size: 0.9rem;
    }

    .auth-brand-watermark {
        width: min(34%, 12rem);
    }

    .auth-form-panel {
        padding: 1rem;
    }

    .auth-card {
        padding: 1.25rem;
    }

    .auth-login-brand {
        margin-bottom: 0.78rem;
        padding-bottom: 0.72rem;
    }

    .auth-card-head {
        margin-bottom: 0.78rem;
    }

    .auth-title {
        font-size: 1.78rem;
    }

    .auth-field {
        margin-bottom: 0.75rem;
    }

    .auth-submit {
        min-height: 2.8rem;
    }

    .auth-footer-note {
        margin-top: 0.75rem;
    }
}