/* Repository BDK Jakarta design system: tokens, components, and responsive layout. */
:root,
[data-theme="light"] {
    color-scheme: light;
    --app-bg: #f8faff;
    --app-bg-subtle: #f1f5fb;
    --surface: #ffffff;
    --surface-elevated: #ffffff;
    --surface-glass: rgba(255, 255, 255, 0.78);
    --surface-glass-hover: rgba(255, 255, 255, 0.92);
    --text-primary: #14213a;
    --text-secondary: #334155;
    --text-muted: #596a82;
    --border-subtle: rgba(223, 230, 240, 0.85);
    --border-strong: #cbd5e1;
    --accent: #1556b0;
    --accent-hover: #10468f;
    --focus-ring: 0 0 0 3px rgba(21, 86, 176, 0.3);
    --shadow-soft: 0 12px 32px rgba(30, 56, 96, 0.07);
    --shadow-elevated: 0 16px 44px rgba(30, 56, 96, 0.12);
    --input-bg: #ffffff;
    --input-border: #dfe6f0;
    --glass-highlight: rgba(255, 255, 255, 0.92);
    --glass-blur: 24px;

    /* Legacy compatibility variables */
    --color-bg: var(--app-bg);
    --color-bg-subtle: var(--app-bg-subtle);
    --color-blue: var(--accent);
    --color-blue-hover: var(--accent-hover);
    --color-blue-soft: #e7effc;
    --color-text: var(--text-primary);
    --color-muted: var(--text-muted);
    --color-border: var(--border-subtle);
    --color-success: #176b45;
    --color-warning: #815500;
    --color-danger: #b42318;
    --font-body: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --text-xs: .75rem;
    --text-sm: .875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.375rem;
    --text-2xl: 1.875rem;
    --text-display: clamp(2.75rem, 5.4vw, 4.8rem);
    --space-1: .25rem;
    --space-2: .5rem;
    --space-3: .75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --radius-sm: .625rem;
    --radius-md: 1rem;
    --radius-lg: 1.5rem;
    --radius-pill: 999px;
    --shadow-glass: 0 16px 44px rgba(30, 56, 96, 0.12);
    --transition: 160ms ease;
    --glass-bg: var(--surface-glass);
    --glass-border: var(--glass-highlight);
    --liquid-surface: rgba(255, 255, 255, 0.66);
    --liquid-tint: rgba(226, 237, 254, 0.36);
    --liquid-edge: rgba(255, 255, 255, 0.86);
    --liquid-highlight: rgba(255, 255, 255, 0.92);
    --liquid-shadow: 0 10px 30px rgba(32, 57, 94, 0.08);
    --liquid-blur: 20px;
    --ease-liquid: cubic-bezier(.2, .75, .25, 1);
    --duration-liquid: 190ms;
}

[data-theme="dark"] {
    color-scheme: dark;
    --app-bg: #0b1018;
    --app-bg-subtle: #0f1726;
    --surface: #111a27;
    --surface-elevated: #172233;
    --surface-glass: rgba(17, 26, 39, 0.78);
    --surface-glass-hover: rgba(23, 34, 51, 0.9);
    --text-primary: #f8fafc;
    --text-secondary: #cbd5e1;
    --text-muted: #94a3b8;
    --border-subtle: rgba(255, 255, 255, 0.09);
    --border-strong: rgba(255, 255, 255, 0.18);
    --accent: #3b82f6;
    --accent-hover: #60a5fa;
    --focus-ring: 0 0 0 3px rgba(59, 130, 246, 0.35);
    --shadow-soft: 0 12px 32px rgba(0, 0, 0, 0.45);
    --shadow-elevated: 0 20px 48px rgba(0, 0, 0, 0.6);
    --input-bg: rgba(23, 34, 51, 0.85);
    --input-border: rgba(255, 255, 255, 0.12);
    --glass-highlight: rgba(255, 255, 255, 0.12);
    --glass-blur: 24px;

    /* Legacy compatibility variables in dark mode */
    --color-bg: var(--app-bg);
    --color-bg-subtle: var(--app-bg-subtle);
    --color-blue: var(--accent);
    --color-blue-hover: var(--accent-hover);
    --color-blue-soft: rgba(59, 130, 246, 0.18);
    --color-text: var(--text-primary);
    --color-muted: var(--text-muted);
    --color-border: var(--border-subtle);
    --color-success: #34d399;
    --color-warning: #fbbf24;
    --color-danger: #f87171;
    --glass-bg: var(--surface-glass);
    --glass-border: var(--border-subtle);
    --liquid-surface: rgba(17, 26, 39, 0.75);
    --liquid-tint: rgba(59, 130, 246, 0.15);
    --liquid-edge: rgba(255, 255, 255, 0.12);
    --liquid-highlight: rgba(255, 255, 255, 0.16);
    --liquid-shadow: 0 14px 38px rgba(0, 0, 0, 0.5);
}

/* Theme Toggle Button Component (Header & In-App) */
.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border-radius: var(--radius-pill);
    border: 1px solid var(--border-subtle);
    background: var(--surface-glass);
    color: var(--text-primary);
    cursor: pointer;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: var(--shadow-soft);
    transition: background var(--transition), color var(--transition), border-color var(--transition), transform var(--transition), box-shadow var(--transition);
    flex-shrink: 0;
}
.theme-toggle:hover {
    background: var(--surface-glass-hover);
    border-color: var(--border-strong);
    transform: translateY(-1px);
}
.theme-toggle:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}
.theme-toggle-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    pointer-events: none;
}
.theme-toggle-icon svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    transition: transform 220ms ease;
}
.theme-toggle:hover .theme-toggle-icon svg {
    transform: rotate(15deg);
}

/* Reader-specific theme toggle button */
.reader-action-btn.theme-toggle {
    width: auto;
    height: 34px;
    padding: 0 0.75rem;
    border-radius: 8px;
    gap: 0.4rem;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #c8d8ec;
    font-size: 0.8rem;
    box-shadow: none;
}
.reader-action-btn.theme-toggle:hover {
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
    transform: none;
}
[data-theme="light"] .reader-action-btn.theme-toggle {
    background: rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.1);
    color: #334155;
}
[data-theme="light"] .reader-action-btn.theme-toggle:hover {
    background: rgba(0, 0, 0, 0.09);
    color: #0f172a;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 6rem; }
body { margin: 0; background: var(--color-bg); color: var(--color-text); font-family: var(--font-body); font-size: var(--text-base); line-height: 1.6; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; }
button, a, input, select { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; z-index: 20; top: var(--space-4); left: var(--space-4); padding: var(--space-3) var(--space-4); transform: translateY(-160%); border-radius: var(--radius-sm); background: var(--color-blue); color: white; }
.skip-link:focus { transform: translateY(0); }
.glass { background: var(--glass-bg); border: 1px solid var(--glass-border); box-shadow: var(--shadow-glass); -webkit-backdrop-filter: blur(var(--glass-blur)); backdrop-filter: blur(var(--glass-blur)); }
.site-header { position: absolute; z-index: 5; top: 1.25rem; left: 0; width: 100%; padding: 0 5vw; }
.nav-shell { display: flex; width: min(1120px, 100%); min-height: 68px; align-items: center; justify-content: space-between; margin: 0 auto; padding: .65rem .9rem .65rem 1rem; border-radius: var(--radius-pill); }
.brand { display: inline-flex; align-items: center; gap: .7rem; }
.brand-mark { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 13px; background: var(--color-blue); color: white; font-family: Georgia, serif; font-size: 1.35rem; font-weight: 700; }
.brand-copy { display: grid; line-height: 1.2; }
.brand-copy strong { font-size: .9rem; letter-spacing: -.02em; }
.brand-copy span { margin-top: .2rem; color: var(--color-muted); font-size: .7rem; }
.nav-links { display: flex; gap: 2.2rem; margin-left: 2rem; color: var(--color-muted); font-size: var(--text-sm); }
.nav-links a { transition: color var(--transition); }
.nav-links a:hover, .nav-links [aria-current="page"] { color: var(--color-blue); }
.nav-cta { display: inline-flex; align-items: center; gap: .5rem; padding: .63rem 1rem; border-radius: var(--radius-pill); background: var(--color-blue); color: white; font-size: var(--text-sm); font-weight: 600; transition: background var(--transition), transform var(--transition); }
.nav-cta:hover { transform: translateY(-1px); background: var(--color-blue-hover); }
.hero { position: relative; overflow: hidden; background: linear-gradient(112deg, #f4f7fc 0%, #eef3fa 52%, #e4edf9 100%); }
.hero-inner { display: grid; width: min(1120px, 90%); min-height: 640px; grid-template-columns: 1.05fr .95fr; align-items: center; gap: 2rem; margin: 0 auto; padding: 9.5rem 0 5.8rem; }
.hero-copy { position: relative; z-index: 1; padding-bottom: .5rem; }
.eyebrow { display: flex; align-items: center; gap: .55rem; margin: 0 0 1.35rem; color: var(--color-blue); font-size: var(--text-xs); font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.eyebrow-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--color-blue); box-shadow: 0 0 0 4px rgb(23 78 166 / 10%); }
.hero h1 { max-width: 650px; margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: var(--text-display); font-weight: 400; letter-spacing: -.065em; line-height: 1.04; }
.hero h1 span { color: var(--color-blue); font-style: italic; }
.hero-description { max-width: 430px; margin: 1.4rem 0 1.5rem; color: var(--color-muted); font-size: 1.05rem; line-height: 1.75; }
.text-link { display: inline-flex; align-items: center; gap: .6rem; color: var(--color-blue); font-size: var(--text-sm); font-weight: 700; }
.text-link span { transition: transform var(--transition); }
.text-link:hover span { transform: translateY(3px); }
.hero-art { position: relative; display: grid; min-height: 370px; place-items: center; }
.art-orbit { position: absolute; width: 350px; height: 350px; border: 1px solid rgb(23 78 166 / 12%); border-radius: 50%; }
.orbit-one { transform: scaleX(1.23) rotate(-26deg); }
.orbit-two { width: 280px; height: 280px; transform: scaleX(1.22) rotate(32deg); }
.art-sun { position: absolute; width: 216px; height: 216px; border-radius: 50%; background: radial-gradient(circle at 36% 34%, #fff 0, #e5eefb 60%, #d2e1f6 100%); box-shadow: inset 0 1px 12px rgb(255 255 255 / 95%), 0 28px 65px rgb(31 63 109 / 13%); }
.art-book { position: relative; z-index: 1; display: flex; width: 164px; height: 205px; transform: rotate(-9deg); filter: drop-shadow(10px 18px 14px rgb(24 52 91 / 20%)); }
.book-page { width: 79px; border: 1px solid #d3deec; border-radius: 5px 0 0 6px; background: linear-gradient(90deg, #fff 0, #f3f6fb 100%); }
.book-page::after { display: block; width: 39px; height: 83px; margin: 40px auto; border-top: 2px solid #7994bb; border-bottom: 1px solid #b7c7dc; content: ""; }
.book-spine { width: 7px; background: var(--color-blue); }
.book-spine + * { width: 79px; }
.art-book::after { width: 79px; border: 1px solid #c8d6e8; border-radius: 0 5px 6px 0; background: linear-gradient(90deg, #edf2f9, #fff); content: ""; }
.art-label { position: absolute; z-index: 1; color: #607795; font-size: .61rem; font-weight: 700; letter-spacing: .18em; }
.label-top { top: 18%; right: 2%; }
.label-bottom { bottom: 14%; left: 8%; }
.art-spark { position: absolute; color: #7695bd; font-size: 1.2rem; }
.spark-one { top: 22%; left: 13%; }.spark-two { right: 14%; bottom: 22%; font-size: .8rem; }
.hero-meta { display: flex; width: min(1120px, 90%); justify-content: space-between; margin: -2.3rem auto 0; padding-bottom: 1.4rem; color: #718096; font-size: var(--text-xs); }
.catalog-section { width: min(1120px, 90%); margin: 0 auto; padding: 6rem 0 6.4rem; }
.section-heading { display: flex; align-items: end; justify-content: space-between; margin-bottom: 2rem; }
.muted-eyebrow { margin-bottom: .55rem; color: #74839a; }
.section-heading h2 { margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: clamp(2rem, 3.5vw, 2.8rem); font-weight: 400; letter-spacing: -.045em; line-height: 1.2; }
.section-description { margin: .55rem 0 0; color: var(--color-muted); font-size: var(--text-sm); }
.result-count { padding-bottom: .35rem; color: var(--color-muted); font-size: var(--text-sm); }.result-count span { margin-left: .4rem; color: var(--color-blue); }
.search-panel { display: flex; min-height: 80px; align-items: center; gap: .65rem; padding: .75rem; border-color: #edf0f5; border-radius: var(--radius-md); box-shadow: var(--shadow-soft); }
.search-field { display: flex; min-width: 180px; flex: 1; align-items: center; gap: .7rem; padding: 0 .8rem; }
.search-icon { color: #77869a; font-size: 1.7rem; line-height: 1; transform: rotate(-20deg); }
.search-field input { width: 100%; min-height: 46px; border: 0; outline: 0; background: transparent; color: var(--color-text); font-size: var(--text-sm); }
.search-field input::placeholder { color: #8995a5; }
.search-field:focus-within { border-radius: var(--radius-sm); box-shadow: var(--focus-ring); }
.filter-field select { min-width: 140px; min-height: 46px; padding: 0 2rem 0 .8rem; border: 1px solid var(--color-border); border-radius: var(--radius-sm); appearance: none; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='m2 4 4 4 4-4' fill='none' stroke='%235f6b7a' stroke-width='1.4'/%3E%3C/svg%3E") no-repeat right .7rem center; color: var(--color-text); font-size: var(--text-sm); }
.filter-field select:focus-visible { box-shadow: var(--focus-ring); }
.button { display: inline-flex; min-height: 46px; align-items: center; justify-content: center; gap: .65rem; padding: 0 1.15rem; border: 1px solid transparent; border-radius: var(--radius-sm); cursor: pointer; font-size: var(--text-sm); font-weight: 650; transition: background var(--transition), border-color var(--transition), color var(--transition), transform var(--transition); }
.button-primary { background: var(--color-blue); color: #fff; }.button-primary:hover { transform: translateY(-1px); background: var(--color-blue-hover); }
.button-secondary { border-color: var(--color-border); background: #fff; color: var(--color-text); }.button-secondary:hover { border-color: #b8c8dc; background: var(--color-bg-subtle); }
.button-destructive { background: var(--color-danger); color: #fff; }.button-destructive:hover { background: #912018; }
.catalog-toolbar { display: flex; justify-content: space-between; margin: 1.8rem 0 1rem; color: var(--color-muted); font-size: var(--text-xs); }
.catalog-toolbar p { margin: 0; }.catalog-toolbar strong { color: var(--color-text); font-weight: 600; }
.work-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--color-border); border-left: 1px solid var(--color-border); }
.work-card { display: flex; min-height: 258px; flex-direction: column; padding: 1.35rem 1.4rem 1.25rem; border-right: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); transition: background var(--transition); }
.work-card:hover { background: #fbfcfe; }
.work-card-top { display: flex; align-items: center; justify-content: space-between; }
.badge { display: inline-flex; min-height: 26px; align-items: center; padding: .15rem .6rem; border: 1px solid #d7e3f4; border-radius: var(--radius-pill); background: #f2f6fc; color: #174889; font-size: .68rem; font-weight: 700; }
.work-year { color: #758195; font-size: var(--text-xs); }
.work-card h3 { margin: 1.05rem 0 .55rem; font-family: Georgia, "Times New Roman", serif; font-size: 1.24rem; font-weight: 400; letter-spacing: -.025em; line-height: 1.35; }
.work-card h3 a { transition: color var(--transition); }.work-card h3 a:hover { color: var(--color-blue); }
.work-author { margin: 0; color: #37445a; font-size: var(--text-sm); font-weight: 600; }
.work-unit { margin: .2rem 0 1rem; color: var(--color-muted); font-size: var(--text-xs); }
.card-link { display: inline-flex; width: fit-content; align-items: center; gap: .5rem; margin-top: auto; color: var(--color-blue); font-size: var(--text-xs); font-weight: 700; }.card-link span { transition: transform var(--transition); }.card-link:hover span { transform: translateX(3px); }
.empty-state { display: grid; min-height: 300px; justify-items: center; align-content: center; padding: 2rem; border: 1px dashed #cbd5e1; border-radius: var(--radius-md); background: var(--color-bg-subtle); text-align: center; }
.empty-icon { display: grid; width: 48px; height: 48px; place-items: center; border-radius: 50%; background: var(--color-blue-soft); color: var(--color-blue); font-size: 1.6rem; }.empty-state h3 { margin: 1rem 0 .2rem; font-family: Georgia, serif; font-size: 1.45rem; font-weight: 400; }.empty-state p { margin: 0 0 1.1rem; color: var(--color-muted); font-size: var(--text-sm); }
.catalog-note { display: flex; align-items: center; gap: .65rem; margin-top: 1.3rem; color: var(--color-muted); font-size: var(--text-xs); }.catalog-note p { margin: 0; }.catalog-note strong { color: #3d4b60; }.note-icon { display: grid; width: 17px; height: 17px; flex: 0 0 auto; place-items: center; border: 1px solid #aab8ca; border-radius: 50%; font-size: .65rem; font-weight: 700; }
.site-footer { border-top: 1px solid var(--color-border); background: #fafbfd; }.footer-inner { display: flex; width: min(1120px, 90%); min-height: 145px; align-items: center; justify-content: space-between; gap: 2rem; margin: 0 auto; }.footer-inner > p { margin: 0; color: var(--color-muted); font-size: var(--text-xs); line-height: 1.8; }.footer-note { color: #8190a3; font-size: var(--text-xs); }.footer-brand .brand-mark { width: 34px; height: 34px; border-radius: 11px; font-size: 1.2rem; }
.detail-main { width: min(900px, 90%); min-height: 72vh; margin: 0 auto; padding: 8rem 0 5.5rem; }.breadcrumbs { display: flex; align-items: center; gap: .7rem; color: var(--color-muted); font-size: var(--text-xs); }.breadcrumbs a { color: var(--color-blue); }.breadcrumbs span[aria-current] { color: #69778a; }
.detail-article { max-width: 760px; margin: 3.6rem auto 0; }.detail-kicker { display: flex; align-items: center; gap: .7rem; color: #778498; font-size: var(--text-xs); }.detail-article h1 { margin: 1rem 0 1.1rem; font-family: var(--font-body); font-size: clamp(1.875rem, 1.35rem + 1vw, 2.25rem); font-weight: 700; letter-spacing: -.02em; line-height: 1.18; overflow-wrap: break-word; word-break: break-word; }.detail-lead { max-width: 680px; margin: 0; color: var(--color-muted); font-size: 1.15rem; line-height: 1.75; }.detail-rule { height: 1px; margin: 2.2rem 0; background: var(--color-border); }.detail-article h2 { margin: 0 0 .7rem; font-family: Georgia, serif; font-size: 1.55rem; font-weight: 400; }.detail-body { max-width: 690px; margin: 0; color: #4e5c70; line-height: 1.85; }.metadata-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.4rem 2.5rem; margin: 2.4rem 0; padding: 1.6rem 0; border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); }.metadata-grid div { min-width: 0; }.metadata-grid dt { color: #7a8798; font-size: var(--text-xs); }.metadata-grid dd { margin: .25rem 0 0; color: var(--color-text); font-size: var(--text-sm); font-weight: 600; }.sample-notice { display: flex; align-items: center; gap: .6rem; margin: 0 0 1.5rem; color: var(--color-warning); font-size: var(--text-xs); }.sample-notice span { display: grid; width: 17px; height: 17px; place-items: center; border: 1px solid currentColor; border-radius: 50%; font-weight: 700; }.back-button { min-height: 42px; }
@media (max-width: 760px) {
    .site-header { top: .75rem; padding: 0 4%; }.nav-shell { min-height: 60px; }.nav-links { gap: 1rem; margin-left: 0; font-size: var(--text-xs); }.nav-cta { padding: .55rem .75rem; font-size: var(--text-xs); }.brand { gap: .5rem; }.brand-mark { width: 34px; height: 34px; border-radius: 11px; }.brand-copy strong { font-size: .8rem; }.brand-copy span { font-size: .65rem; }
    .hero-inner { width: 88%; min-height: 0; grid-template-columns: 1fr; gap: 0; padding: 8.5rem 0 1rem; }.hero-copy { padding: 1rem 0 0; }.hero h1 { font-size: clamp(2.7rem, 10vw, 4.4rem); }.hero-description { max-width: 480px; font-size: .98rem; }.hero-art { min-height: 270px; margin-top: .5rem; }.art-orbit { width: 240px; height: 240px; }.orbit-two { width: 190px; height: 190px; }.art-sun { width: 150px; height: 150px; }.art-book { width: 124px; height: 157px; }.book-page, .art-book::after { width: 60px; }.book-spine { width: 5px; }.book-page::after { height: 64px; margin: 30px auto; }.hero-meta { width: 88%; margin: 0 auto; padding: .5rem 0 1.2rem; font-size: .65rem; }
    .catalog-section { width: 88%; padding: 4.2rem 0 4.5rem; }.section-heading { align-items: start; gap: 1rem; }.section-heading h2 { font-size: 2.1rem; }.section-description { max-width: 380px; }.result-count { padding-top: 1rem; white-space: nowrap; }.search-panel { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; padding: .75rem; }.search-field { grid-column: 1 / -1; padding: 0 .4rem; }.filter-field select { width: 100%; min-width: 0; }.button-primary { width: 100%; }.catalog-toolbar { align-items: start; gap: .8rem; }.catalog-toolbar span { white-space: nowrap; }.work-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.work-card { min-height: 250px; padding: 1.1rem; }.work-card h3 { font-size: 1.12rem; }
    .footer-inner { min-height: 0; flex-wrap: wrap; gap: 1rem; padding: 1.6rem 0; }.footer-inner > p { margin-left: auto; }.footer-note { width: 100%; }.detail-main { padding-top: 7rem; }.detail-article { margin-top: 2.7rem; }
}
@media (max-width: 480px) {
    .nav-links { display: none; }.nav-cta { margin-left: auto; }.hero-meta span:first-child { max-width: 60%; }.section-heading { display: block; }.result-count { display: inline-block; padding-top: .7rem; }.work-grid { grid-template-columns: 1fr; }.work-card { min-height: 220px; }.catalog-toolbar { display: block; }.catalog-toolbar span { display: inline-block; margin-top: .4rem; }.footer-inner > p { width: 100%; margin: 0; }.metadata-grid { grid-template-columns: 1fr 1fr; gap: 1.2rem 1rem; }.detail-article h1 { font-size: clamp(1.5rem, 4.5vw, 1.8rem); line-height: 1.16; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .glass { background: #fff; } }
@media (prefers-reduced-transparency: reduce) { .glass { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }

/* Product navigation and dynamic work type administration */
.admin-main { width: min(920px, 90%); min-height: 72vh; margin: 0 auto; padding: 8.5rem 0 5rem; }
.admin-heading { display: flex; align-items: end; justify-content: space-between; gap: 1.5rem; margin-bottom: 1.5rem; }
.admin-heading h1 { margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: clamp(2.2rem, 5vw, 3.2rem); font-weight: 400; letter-spacing: -.05em; }
.admin-notice { margin: 1.4rem 0; padding: 1rem 1.15rem; border: 1px solid #e8cf9b; border-radius: var(--radius-sm); background: #fff9e9; color: #694c12; font-size: var(--text-sm); line-height: 1.6; }
.admin-flash { margin: 1rem 0; padding: .8rem 1rem; border: 1px solid #b8dec9; border-radius: var(--radius-sm); background: #effaf3; color: #21613b; font-size: var(--text-sm); }
.type-list { border-top: 1px solid var(--color-border); }
.type-row { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 1.1rem 0; border-bottom: 1px solid var(--color-border); }
.type-name-line { display: flex; flex-wrap: wrap; align-items: center; gap: .7rem; }
.type-name-line h2 { margin: 0; font-size: 1rem; font-weight: 650; }
.type-summary > p { display: flex; flex-wrap: wrap; gap: .85rem; margin: .45rem 0 0; color: var(--color-muted); font-size: var(--text-xs); }
.type-summary code { color: #435168; }
.status-pill { padding: .2rem .55rem; border-radius: var(--radius-pill); font-size: .68rem; font-weight: 700; }
.status-pill.is-active { background: #eaf6ee; color: #28633e; }
.status-pill.is-inactive { background: #f1f2f4; color: #626d7a; }
.type-actions { display: flex; flex: 0 0 auto; gap: .5rem; }
.type-actions .button { min-height: 38px; padding: 0 .8rem; }
.admin-form { display: grid; gap: 1.1rem; max-width: 640px; margin-top: 1.6rem; padding: 1.4rem; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: #fff; box-shadow: var(--shadow-soft); }
.admin-field { display: grid; gap: .4rem; color: var(--color-text); font-size: var(--text-sm); font-weight: 600; }
.admin-field input, .admin-field select { width: 100%; min-height: 46px; padding: 0 .8rem; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: #fff; color: var(--color-text); font: inherit; }
.admin-field input:focus-visible, .admin-field select:focus-visible { outline: 0; box-shadow: var(--focus-ring); }
.admin-field small { color: var(--color-muted); font-size: var(--text-xs); font-weight: 400; line-height: 1.5; }
.admin-readonly { display: grid; gap: .4rem; margin: 0; color: var(--color-muted); font-size: var(--text-xs); }.admin-readonly strong { color: var(--color-text); font-size: var(--text-sm); }
.admin-errors { padding: .85rem 1rem; border: 1px solid #e6b5ae; border-radius: var(--radius-sm); background: #fff3f1; color: #8b2c23; font-size: var(--text-sm); }.admin-errors ul { margin: .45rem 0 0; padding-left: 1.25rem; }
.admin-form-actions { display: flex; flex-wrap: wrap; gap: .6rem; padding-top: .3rem; }
@media (max-width: 760px) { .admin-main { padding-top: 7.5rem; }.admin-heading { align-items: start; flex-direction: column; }.type-row { align-items: start; flex-direction: column; gap: .85rem; }.type-actions { width: 100%; }.type-actions form { flex: 1; }.type-actions .button { width: 100%; }.admin-form { padding: 1rem; } }

/* iOS 26-inspired refresh: restrained glass, soft surfaces, and stronger content hierarchy. */
:root {
    --color-bg: #f8faff;
    --color-bg-subtle: #f1f5fb;
    --color-blue: #1556b0;
    --color-blue-hover: #10468f;
    --color-blue-soft: #e7effc;
    --color-text: #14213a;
    --color-muted: #596a82;
    --color-border: #dfe6f0;
    --glass-bg: rgb(255 255 255 / 78%);
    --glass-border: rgb(255 255 255 / 92%);
    --glass-blur: 24px;
    --shadow-soft: 0 12px 32px rgb(30 56 96 / 7%);
    --shadow-glass: 0 16px 44px rgb(30 56 96 / 12%);
    --focus-ring: 0 0 0 3px rgb(21 86 176 / 30%);
}
body { background: linear-gradient(180deg, #f7f9fd 0, #fff 34rem); }
.site-header { position: fixed; top: .85rem; padding: 0 4vw; }
.nav-shell { width: min(1180px, 100%); min-height: 66px; gap: 1rem; padding: .55rem .65rem .55rem .85rem; border: 1px solid rgb(255 255 255 / 90%); border-radius: 22px; background: rgb(255 255 255 / 76%); box-shadow: 0 14px 38px rgb(27 49 82 / 12%); }
.brand-mark { border-radius: 14px; background: linear-gradient(145deg, #2267c4, #124b9d); box-shadow: inset 0 1px 1px rgb(255 255 255 / 35%), 0 5px 12px rgb(21 86 176 / 22%); }
.nav-links { gap: .35rem; margin: 0; color: #586a83; }
.nav-links a { padding: .55rem .85rem; border-radius: var(--radius-pill); }
.nav-links a:hover, .nav-links [aria-current="page"] { background: #edf3fc; color: var(--color-blue); }
.nav-cta { padding: .7rem 1.1rem; border: 1px solid rgb(255 255 255 / 24%); border-radius: var(--radius-pill); background: linear-gradient(145deg, #2165bf, #154e9d); box-shadow: 0 6px 15px rgb(21 86 176 / 20%); }
.hero { isolation: isolate; border-radius: 0 0 34px 34px; background: radial-gradient(ellipse at 83% 30%, rgb(213 229 252 / 86%) 0, transparent 34%), radial-gradient(ellipse at 5% 90%, rgb(229 237 250 / 74%) 0, transparent 38%), linear-gradient(120deg, #f9fbff 0%, #edf3fc 54%, #f6f9fe 100%); }
.hero::after { position: absolute; z-index: -1; right: -8rem; bottom: -17rem; width: 38rem; height: 38rem; border: 1px solid rgb(255 255 255 / 72%); border-radius: 50%; background: rgb(255 255 255 / 16%); content: ""; }
.hero-inner { width: min(1160px, 90%); min-height: 585px; grid-template-columns: 1.08fr .92fr; gap: clamp(2rem, 6vw, 6rem); padding: 9.5rem 0 4.3rem; }
.hero-copy { max-width: 650px; }
.hero h1 { max-width: 680px; font-size: clamp(3.2rem, 6vw, 5.7rem); letter-spacing: -.075em; line-height: 1.01; }
.hero h1 span { color: #1957a8; }
.hero-description { max-width: 475px; margin: 1.25rem 0 1.65rem; font-size: 1.05rem; line-height: 1.75; }
.text-link { min-height: 44px; padding: .45rem .85rem; border: 1px solid rgb(255 255 255 / 88%); border-radius: var(--radius-pill); background: rgb(255 255 255 / 68%); box-shadow: 0 5px 16px rgb(29 55 91 / 7%); }
.text-link:hover { background: #fff; }
.hero-art { min-height: 360px; border: 1px solid rgb(255 255 255 / 68%); border-radius: 48% 52% 45% 55% / 50% 45% 55% 50%; background: radial-gradient(circle at 50% 50%, rgb(255 255 255 / 52%), rgb(255 255 255 / 8%) 68%); }
.art-orbit { border-color: rgb(21 86 176 / 17%); }
.art-sun { background: radial-gradient(circle at 35% 28%, #fff 0, #edf4ff 65%, #dce9fb 100%); box-shadow: inset 0 1px 12px #fff, 0 30px 75px rgb(31 63 109 / 15%); }
.art-book { filter: drop-shadow(12px 24px 17px rgb(24 52 91 / 22%)); }
.hero-meta { width: min(1160px, 90%); margin-top: -1.7rem; padding-bottom: 1.25rem; color: #687992; }
.catalog-section { width: min(1160px, 90%); padding: 5.3rem 0 6rem; }
.section-heading { margin-bottom: 1.55rem; }
.section-heading h2 { font-size: clamp(2rem, 3.7vw, 3rem); letter-spacing: -.055em; }
.result-count { padding: .55rem .8rem; border: 1px solid #e4eaf3; border-radius: var(--radius-pill); background: #fff; color: #485b75; box-shadow: 0 4px 12px rgb(30 56 96 / 4%); }
.search-panel { position: relative; gap: .55rem; min-height: 76px; padding: .65rem; border: 1px solid rgb(255 255 255 / 94%); border-radius: 22px; background: rgb(255 255 255 / 74%); box-shadow: 0 14px 34px rgb(30 56 96 / 8%); }
.search-field { min-height: 52px; border: 1px solid transparent; border-radius: 15px; background: rgb(248 250 254 / 86%); transition: border-color var(--transition), background var(--transition), box-shadow var(--transition); }
.search-field:focus-within { border-color: #b9cbea; background: #fff; box-shadow: var(--focus-ring); }
.search-field input { min-height: 50px; }
.filter-field select { min-height: 50px; border-color: #e0e7f0; border-radius: 14px; background-color: rgb(255 255 255 / 94%); transition: border-color var(--transition), box-shadow var(--transition); }
.filter-field select:hover { border-color: #b5c6dd; }
.button { min-height: 48px; border-radius: 14px; }
.button-primary { background: linear-gradient(145deg, #2165bf, #154e9d); box-shadow: 0 6px 14px rgb(21 86 176 / 17%); }
.work-grid { gap: 1rem; border: 0; }
.work-card { min-height: 270px; padding: 1.4rem 1.45rem 1.3rem; overflow: hidden; border: 1px solid #e7ecf3; border-radius: 20px; background: #fff; box-shadow: 0 8px 22px rgb(30 56 96 / 5%); transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease; }
.work-card:hover { transform: translateY(-4px); border-color: #d2deee; background: #fff; box-shadow: 0 17px 34px rgb(30 56 96 / 10%); }
.work-card h3 { font-size: 1.3rem; line-height: 1.32; }
.badge { border-color: #d6e3f6; background: #f0f5fc; color: #174c92; }
.catalog-toolbar { margin-top: 1.4rem; }
.empty-state { border-radius: 22px; background: linear-gradient(145deg, #f7f9fd, #f0f4fa); }
.site-footer { border-top: 1px solid #e9edf4; background: linear-gradient(180deg, #f7f9fd, #f3f6fb); }
.footer-inner { width: min(1160px, 90%); }
.detail-main { width: min(1060px, 92%); padding-top: 8.5rem; }
.detail-article { width: min(1060px, 92%); max-width: 1060px; margin: 2.2rem auto 0; padding: clamp(1.6rem, 3.8vw, 2.8rem); border: 1px solid #e7ecf3; border-radius: 26px; background: #fff; box-shadow: 0 18px 48px rgb(30 56 96 / 7%); box-sizing: border-box; }

/* Task 17J: Document Access Card (Locked / Unlocked / Unavailable) */
.document-access-card {
    position: relative;
    margin: 2.2rem 0 1.8rem;
    padding: clamp(1.2rem, 2.8vw, 1.6rem);
    border-radius: 20px;
    transition: border-color var(--duration-liquid) ease, background var(--duration-liquid) ease;
}
.document-access-header {
    display: flex;
    align-items: flex-start;
    gap: 1.1rem;
}
.document-access-icon-badge {
    display: grid;
    flex: 0 0 46px;
    width: 46px;
    height: 46px;
    place-items: center;
    border-radius: 14px;
}
.document-access-copy {
    flex: 1 1 auto;
    min-width: 0;
}
.document-access-heading {
    margin: 0 0 0.35rem;
    font-family: inherit;
    font-size: 1.12rem;
    font-weight: 700;
    line-height: 1.25;
}
.document-access-lead {
    margin: 0;
    font-size: 0.92rem;
    line-height: 1.55;
}
.document-access-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem 0.55rem;
    margin: 0.55rem 0 0;
    font-size: 0.82rem;
}
.document-format-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.5rem;
    border-radius: 6px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.document-meta-sep {
    opacity: 0.5;
}
.document-filename {
    word-break: break-all;
}
.document-access-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1.25rem;
}
.document-action-btn,
.document-login-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 42px;
    padding: 0.55rem 1.15rem;
    border-radius: 999px;
    font-size: 0.88rem;
    font-weight: 650;
    text-decoration: none;
    cursor: pointer;
    transition: all var(--duration-liquid) ease;
}
.document-unavailable-card {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 1.8rem 0 1.6rem;
    padding: 0.95rem 1.25rem;
    border-radius: 14px;
}
.document-unavailable-icon {
    flex: 0 0 20px;
    display: grid;
    place-items: center;
}
.document-unavailable-text {
    margin: 0;
    font-size: 0.88rem;
    line-height: 1.5;
}

/* Task 17L & 17M: Cinematic Editorial Detail Redesign (Two-column Netflix / iOS 26 Liquid Glass) */
.detail-cinema-main {
    position: relative;
    width: 100%;
    max-width: 100%;
    padding-top: 8.5rem;
    box-sizing: border-box;
    overflow-x: clip;
}
.detail-cinema-main::before {
    display: none !important;
}
.detail-cinema-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 640px;
    pointer-events: none;
    overflow: hidden;
    z-index: 0;
    mask-image: linear-gradient(180deg, #000 0%, #000 45%, transparent 100%);
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 45%, transparent 100%);
}
.detail-cinema-backdrop .backdrop-image {
    position: absolute;
    inset: -40px;
    background-image: var(--cover-backdrop);
    background-size: cover;
    background-position: center 20%;
    filter: blur(56px) saturate(135%);
    opacity: 0.22;
    transform: scale(1.08);
}
.detail-cinema-backdrop .backdrop-gradient {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 15%, transparent 20%, rgba(248, 250, 255, 0.65) 65%, var(--app-bg, #f8faff) 100%),
                linear-gradient(180deg, transparent 0%, rgba(248, 250, 255, 0.5) 45%, var(--app-bg, #f8faff) 100%);
}
@media (prefers-reduced-motion: reduce), (prefers-reduced-transparency: reduce) {
    .detail-cinema-backdrop {
        display: none !important;
    }
}
.detail-cinema-card {
    position: relative;
    z-index: 1;
    backdrop-filter: blur(28px);
    -webkit-backdrop-filter: blur(28px);
}
.detail-cinema-grid.has-cover {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: clamp(2rem, 3.8vw, 3.2rem);
    align-items: start;
    min-width: 0;
}
.detail-cinema-grid.no-cover {
    display: block;
    min-width: 0;
}
.detail-cover-column {
    position: sticky;
    top: 6.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}
.detail-cover-frame {
    width: 100%;
    max-width: 260px;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    border-radius: 18px;
    box-shadow: 0 20px 44px -10px rgba(15, 23, 42, 0.22), 0 2px 8px rgba(15, 23, 42, 0.06);
    border: 1px solid rgba(226, 232, 240, 0.9);
    background: #f8fafc;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}
.detail-cover-frame:hover {
    transform: translateY(-3px);
    box-shadow: 0 24px 50px -10px rgba(15, 23, 42, 0.28), 0 4px 12px rgba(15, 23, 42, 0.08);
}
.detail-cover-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    display: block;
    border-radius: 17px;
    filter: none !important;
    -webkit-filter: none !important;
}
.detail-info-column {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
}
.detail-info-column .breadcrumbs {
    margin: 0 0 0.85rem;
}
.detail-info-column .detail-kicker {
    margin-bottom: 0.55rem;
}
.detail-info-column h1 {
    margin: 0.35rem 0 1.1rem;
}
.detail-byline {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 1.6rem;
    margin: 1.2rem 0 1.4rem;
    padding: 0.95rem 1.3rem;
    border-radius: 14px;
    background: rgba(241, 245, 249, 0.7);
    border: 1px solid rgba(226, 232, 240, 0.9);
}
.byline-item {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 110px;
}
.detail-byline dt {
    color: #64748b;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0;
}
.detail-byline dd {
    margin: 0;
    color: #1e293b;
    font-size: 0.92rem;
    font-weight: 600;
}
.detail-section {
    margin: 1.8rem 0;
}
.detail-section-title {
    margin: 0 0 0.8rem;
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

/* Task 17M: Keyword Section & Interactive Pills */
.detail-keywords-section {
    margin: 1.6rem 0 1.8rem;
}
.detail-keywords-section .detail-section-title {
    margin: 0 0 0.75rem;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}
.keyword-pills {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.55rem 0.65rem;
}
.keyword-pill {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0.32rem 0.95rem;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1.35;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    box-sizing: border-box;
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
    border: 1px solid rgba(210, 224, 245, 0.9);
    background: #f1f5fb;
    color: #154586;
}
.keyword-pill:hover {
    background: #e3effc;
    border-color: #1a73e8;
    color: #0f3468;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(21, 86, 176, 0.14);
}
.keyword-pill:focus-visible {
    outline: 2px solid #1a73e8;
    outline-offset: 2px;
}
.detail-actions {
    margin-top: 2.2rem;
    padding-top: 0.5rem;
}
@media (max-width: 880px) {
    .detail-cinema-grid.has-cover {
        grid-template-columns: 230px minmax(0, 1fr);
        gap: 1.8rem;
    }
    .detail-cover-frame {
        max-width: 230px;
    }
}
@media (max-width: 680px) {
    .detail-cinema-grid.has-cover {
        grid-template-columns: 1fr;
        gap: 1.6rem;
    }
    .detail-cover-column {
        position: static;
        width: 100%;
        margin-bottom: 0.5rem;
    }
    .detail-cover-frame {
        max-width: 220px;
        margin: 0 auto;
    }
}

/* Kolase is a horizontal digital bookcase; no sample covers or records are fabricated. */
.kolase-main { min-height: 72vh; padding-bottom: 5rem; }
.kolase-hero { position: relative; display: grid; min-height: 380px; grid-template-columns: 1fr 320px; align-items: center; gap: 3rem; overflow: hidden; padding: 8.8rem max(5vw, calc((100vw - 1160px) / 2)) 3rem; border-radius: 0 0 34px 34px; background: radial-gradient(ellipse at 80% 45%, rgb(218 232 252 / 82%) 0, transparent 33%), linear-gradient(120deg, #fbfcff 0%, #edf3fc 57%, #f7f9fd 100%); }
.kolase-hero::after { position: absolute; right: -8rem; bottom: -13rem; width: 30rem; height: 30rem; border: 1px solid rgb(255 255 255 / 80%); border-radius: 50%; content: ""; }
.kolase-hero-copy { position: relative; z-index: 1; max-width: 680px; }
.kolase-hero h1 { margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: clamp(3rem, 6vw, 5.1rem); font-weight: 400; letter-spacing: -.075em; line-height: 1.02; }
.kolase-hero h1 span { color: #1957a8; font-style: italic; }
.kolase-hero-copy > p:not(.eyebrow) { max-width: 500px; margin: 1.15rem 0 1.4rem; color: var(--color-muted); font-size: 1.05rem; line-height: 1.7; }
.kolase-hero-mark { position: relative; display: flex; height: 240px; align-items: end; justify-content: center; gap: 8px; padding-bottom: 25px; }
.mark-ring { position: absolute; top: 0; width: 220px; height: 220px; border: 1px solid rgb(21 86 176 / 13%); border-radius: 50%; background: radial-gradient(circle, rgb(255 255 255 / 72%), rgb(255 255 255 / 4%) 70%); }
.mark-book { position: relative; z-index: 1; width: 48px; height: 150px; border: 1px solid #d7e1ef; border-radius: 7px 7px 2px 2px; background: linear-gradient(110deg, #fff, #edf3fb); box-shadow: 4px 12px 20px rgb(29 54 91 / 14%); }
.mark-book-one { height: 126px; transform: rotate(-9deg); border-left: 6px solid #2764ae; }
.mark-book-two { height: 170px; border-left: 6px solid #7a94b8; background: linear-gradient(110deg, #f8fbff, #e6eef9); }
.mark-book-three { height: 140px; transform: rotate(8deg); border-left: 6px solid #4f78af; }
.mark-spark { position: absolute; z-index: 2; top: 22px; right: 20px; color: #4b78b5; font-size: 1.25rem; }
.kolase-content { width: min(1480px, 92%); margin: 0 auto; padding: 4.2rem 0 0; }
.kolase-section-heading { display: flex; align-items: end; justify-content: space-between; gap: 1.5rem; margin-bottom: 1.4rem; }
.kolase-section-heading h2 { margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: clamp(2rem, 3.5vw, 2.8rem); font-weight: 400; letter-spacing: -.05em; }
.kolase-search { margin-bottom: 2.2rem; }

/* Spotify/Netflix-Inspired Cover Gallery Container (Light Refinement) */
.kolase-gallery, .bookcase {
    position: relative;
    width: 100%;
    min-height: 0;
    padding: 0.5rem 0 1.2rem;
    margin: 0;
    background: transparent;
    border: none;
    box-shadow: none;
}

/* Explicitly disable all physical shelf elements */
.bookcase-wall, .shelf-board, .bookcase-base, .empty-shelf, .bookcase-shelf {
    display: none !important;
}

/* Responsive Artwork Grid */
.gallery-grid, .bookcase-row {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(195px, 1fr));
    gap: 1.75rem 1.4rem;
    align-items: start;
    justify-items: start;
    padding: 0.4rem 0 0.8rem;
}

@media (min-width: 1440px) {
    .gallery-grid, .bookcase-row {
        grid-template-columns: repeat(6, minmax(0, 1fr));
        gap: 1.8rem 1.4rem;
    }
}

@media (min-width: 1140px) and (max-width: 1439px) {
    .gallery-grid, .bookcase-row {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 1.6rem 1.25rem;
    }
}

@media (min-width: 900px) and (max-width: 1139px) {
    .gallery-grid, .bookcase-row {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 1.4rem 1.15rem;
    }
}

@media (min-width: 641px) and (max-width: 899px) {
    .gallery-grid, .bookcase-row {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 1.25rem 1rem;
    }
}

@media (max-width: 640px) {
    .gallery-grid, .bookcase-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1rem 0.75rem;
        padding: 0.2rem 0;
    }
}

/* Light Liquid Glass Album Card */
.kolase-book, .album-card {
    display: flex;
    width: 100%;
    min-width: 0;
    max-width: 250px;
    flex-direction: column;
    color: var(--color-text, #172033);
    text-decoration: none;
    border-radius: 18px;
    padding: 0.75rem;
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(220, 230, 244, 0.85);
    box-shadow: 0 4px 18px rgba(27, 49, 82, 0.05);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    transition: transform 220ms cubic-bezier(0.2, 0, 0, 1), box-shadow 220ms ease, background 220ms ease, border-color 220ms ease;
    cursor: pointer;
    position: relative;
}

.kolase-book:hover, .kolase-book:focus-visible, .album-card:hover, .album-card:focus-visible {
    z-index: 4;
    transform: translateY(-6px);
    box-shadow: 0 16px 36px rgba(23, 55, 96, 0.12);
    background: #ffffff;
    border-color: rgba(23, 78, 166, 0.28);
    outline: none;
}

.kolase-book:focus-visible, .album-card:focus-visible {
    outline: 2px solid #174ea6;
    outline-offset: 3px;
}

/* Square Artwork Frame (1:1 Spotify Ratio with Top-Crop Priority) */
.book-cover, .album-artwork {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 13px;
    background: linear-gradient(145deg, #f2f6fc 0%, #e6effa 100%);
    box-shadow: 0 4px 14px rgba(27, 49, 82, 0.06);
    border: 1px solid rgba(210, 224, 240, 0.8);
}

.book-cover img, .album-artwork img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    border-radius: 12px;
    transition: transform 260ms cubic-bezier(0.2, 0, 0, 1);
}

.kolase-book:hover .book-cover img,
.album-card:hover .album-artwork img,
.kolase-book:focus-visible .book-cover img,
.album-card:focus-visible .album-artwork img {
    transform: scale(1.03);
}

/* Play Affordance Button Badge */
.album-play-affordance {
    position: absolute;
    right: 0.65rem;
    bottom: 0.65rem;
    height: 36px;
    padding: 0 0.9rem 0 0.8rem;
    border-radius: 999px;
    background: #174ea6;
    color: #ffffff;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.78rem;
    font-weight: 600;
    box-shadow: 0 6px 16px rgba(23, 78, 166, 0.35);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 180ms ease, transform 200ms cubic-bezier(0.2, 0, 0, 1), background 150ms ease, box-shadow 150ms ease;
    pointer-events: none;
    z-index: 5;
}

.album-play-affordance .play-icon { font-size: 0.65rem; line-height: 1; }

.kolase-book:hover .album-play-affordance,
.kolase-book:focus-visible .album-play-affordance,
.album-card:hover .album-play-affordance,
.album-card:focus-visible .album-play-affordance {
    opacity: 1;
    transform: translateY(0);
}

/* Placeholder for Missing Cover (Light Theme) */
.cover-placeholder {
    display: flex;
    width: 100%;
    height: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: 1rem;
    color: #5f6b7a;
    font-size: 0.74rem;
    text-align: center;
    background: linear-gradient(145deg, #f2f6fc 0%, #e6effa 100%);
}

.cover-placeholder-mark {
    display: grid;
    width: 44px;
    height: 44px;
    place-items: center;
    border: 1px solid rgba(23, 78, 166, 0.16);
    border-radius: 14px;
    background: #ffffff;
    color: #174ea6;
    font-family: Georgia, serif;
    font-size: 1.25rem;
    box-shadow: 0 4px 12px rgba(23, 78, 166, 0.1);
}

/* Card Caption: Title and Participant Name ONLY */
.book-caption, .album-caption {
    display: flex;
    width: 100%;
    min-width: 0;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.75rem 0.15rem 0.15rem;
    text-align: left;
}

.book-caption strong, .album-caption strong, .album-title {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-size: 0.88rem;
    font-weight: 600;
    line-height: 1.35;
    color: #172033;
}

.book-author, .album-author {
    overflow: hidden;
    color: #5f6b7a;
    font-size: 0.76rem;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin: 0;
}

/* Clean Light Theme Empty State */
.gallery-empty, .bookcase-empty {
    position: relative;
    min-height: 260px;
    display: grid;
    align-items: center;
    justify-items: center;
    padding: 2.5rem 1.5rem;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.75);
    border: 1px dashed rgba(185, 205, 230, 0.8);
    box-shadow: 0 4px 20px rgba(27, 50, 84, 0.04);
}

.gallery-empty-message, .shelf-empty-message {
    display: grid;
    justify-items: center;
    text-align: center;
    max-width: 440px;
}

.gallery-empty-message .empty-icon, .shelf-empty-message .empty-icon {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 16px;
    margin-bottom: 0.75rem;
    background: #ffffff;
    border: 1px solid #dce6f2;
    color: #174ea6;
    font-size: 1.35rem;
    box-shadow: 0 4px 14px rgba(23, 78, 166, 0.08);
}

.gallery-empty-message h3, .shelf-empty-message h3 {
    margin: 0.35rem 0 0.4rem;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.45rem;
    font-weight: 400;
    color: #172033;
}

.gallery-empty-message p:not(.eyebrow), .shelf-empty-message p:not(.eyebrow) {
    margin: 0 0 1rem;
    color: #5f6b7a;
    font-size: 0.88rem;
    line-height: 1.5;
}

.gallery-note, .bookcase-note {
    margin: 1.2rem 0 0;
    color: #5f6b7a;
    font-size: 0.75rem;
    text-align: right;
}

/* ==========================================================================
   TASK 17G: Dark Liquid Glass Visual Refinement untuk Galeri Kolase
   Khusus untuk halaman katalog Kolase (body.kolase-page)
   ========================================================================== */

/* 1. Dark Theme Body & Canvas Khusus Kolase */
body.kolase-page {
    background: #0b1018 radial-gradient(ellipse 80% 60% at 50% -10%, rgba(26, 68, 128, 0.18) 0%, rgba(11, 16, 24, 0) 70%);
    background-color: #0b1018;
    color: #f1f5f9;
    min-height: 100vh;
}

/* 2. Header & Navigasi Dark Liquid Glass */
.kolase-page .site-header {
    z-index: 20;
}

.kolase-page .nav-shell {
    background: rgba(13, 20, 32, 0.78);
    border: 1px solid rgba(255, 255, 255, 0.09);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
}

/* Menghilangkan efek glossy chrome 55% dari .nav-shell::before pada dark theme */
.kolase-page .nav-shell::before {
    display: none !important;
    content: none !important;
}

.kolase-page .brand-mark {
    background: #1a73e8;
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(26, 115, 232, 0.35);
}

.kolase-page .brand-copy strong {
    color: #f8fafc;
}

.kolase-page .brand-copy span {
    color: #94a3b8;
}

/* Segmented Control Repository / Kolase (Dark Theme Default / Fallback) */
[data-theme="dark"] .kolase-page .product-segmented,
[data-theme="dark"] .product-segmented {
    background: rgba(16, 24, 39, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.09);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 2px 8px rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

[data-theme="dark"] .kolase-page .product-segmented-indicator,
[data-theme="dark"] .product-segmented-indicator {
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.16);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

[data-theme="dark"] .kolase-page .product-segmented-link,
[data-theme="dark"] .product-segmented-link {
    color: #94a3b8;
}

[data-theme="dark"] .kolase-page .product-segmented-link:hover,
[data-theme="dark"] .product-segmented-link:hover {
    color: #f1f5f9;
}

[data-theme="dark"] .kolase-page .product-segmented-link[aria-current="page"],
[data-theme="dark"] .product-segmented-link[aria-current="page"] {
    color: #ffffff;
    font-weight: 650;
}

/* Tombol Masuk Google */
.kolase-page .nav-cta {
    background: #1a73e8;
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 4px 14px rgba(26, 115, 232, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.kolase-page .nav-cta:hover {
    background: #2563eb;
    box-shadow: 0 6px 18px rgba(37, 99, 235, 0.45);
}

/* Tombol Login Pengelola (Menggantikan tampilan chrome/metalic dengan dark translucent glass) */
.kolase-page .nav-staff-login {
    background: rgba(255, 255, 255, 0.07) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: #cbd5e1 !important;
    box-shadow: none !important;
    transition: background 180ms ease, color 180ms ease, border-color 180ms ease;
}

.kolase-page .nav-staff-login:hover,
.kolase-page .nav-staff-login:focus-visible {
    background: rgba(255, 255, 255, 0.14) !important;
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.22) !important;
}

.kolase-page .nav-account-admin {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #e2e8f0;
}

.kolase-page .nav-account-name {
    color: #e2e8f0;
}

.kolase-page .nav-account-logout {
    color: #94a3b8;
}

.kolase-page .nav-account-logout:hover {
    color: #f87171;
}

/* 3. Hero Kolase Dark Mode: Reduksi Dekorasi & Hilangkan Noda Spotlight */
.kolase-page .kolase-hero {
    background: transparent;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    min-height: 250px;
    padding: 5.2rem max(5vw, calc((100vw - 1160px) / 2)) 0.8rem;
    position: relative;
}

/* Hilangkan spotlight putih 25rem dari .kolase-hero::before */
.kolase-page .kolase-hero::before {
    position: absolute;
    top: -6rem;
    right: 5%;
    width: 20rem;
    height: 20rem;
    border: none !important;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(26, 115, 232, 0.09) 0%, transparent 70%) !important;
    filter: blur(40px) !important;
    content: "" !important;
    pointer-events: none;
}

/* Hilangkan wireframe lingkaran 30rem dari .kolase-hero::after */
.kolase-page .kolase-hero::after {
    display: none !important;
    content: none !important;
}

.kolase-page .kolase-hero-copy h1 {
    color: #f8fafc;
}

.kolase-page .kolase-hero-copy h1 span {
    color: #60a5fa;
}

.kolase-page .kolase-hero-copy p:not(.eyebrow) {
    color: #94a3b8;
}

.kolase-page .kolase-hero .eyebrow {
    color: #60a5fa;
}

.kolase-page .kolase-hero .eyebrow-dot {
    background: #3b82f6;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.2);
}

.kolase-page .kolase-hero .text-link {
    color: #60a5fa;
}

/* Perkecil dan turunkan intensitas ilustrasi presentasi hero */
.kolase-page .kolase-hero-mark {
    height: 160px;
    transform: scale(0.74);
    opacity: 0.85;
}

.kolase-page .kolase-hero-mark .mark-ring {
    border-color: rgba(59, 130, 246, 0.16);
    background: radial-gradient(circle, rgba(26, 115, 232, 0.08) 0%, rgba(11, 16, 24, 0) 70%);
}

.kolase-page .kolase-hero-mark .mark-book {
    background: linear-gradient(110deg, #1e293b, #0f172a);
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: 4px 10px 20px rgba(0, 0, 0, 0.45);
}

.kolase-page .kolase-hero-mark .mark-book-one {
    border-left-color: #2563eb;
}

.kolase-page .kolase-hero-mark .mark-book-two {
    border-left-color: #60a5fa;
    background: linear-gradient(110deg, #1e293b, #152238);
}

.kolase-page .kolase-hero-mark .mark-book-three {
    border-left-color: #3b82f6;
}

.kolase-page .kolase-hero-mark .mark-spark {
    color: #60a5fa;
    opacity: 0.8;
}

/* 4. Heading & Result Count */
.kolase-page .kolase-content {
    padding-top: 1.8rem;
}

.kolase-page .kolase-section-heading h2 {
    color: #f8fafc;
}

.kolase-page .kolase-section-heading .section-description {
    color: #94a3b8;
}

.kolase-page .kolase-section-heading .muted-eyebrow {
    color: #60a5fa;
}

.kolase-page .result-count {
    background: rgba(23, 34, 51, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #cbd5e1;
}

/* 5. Dark Liquid Glass Filter & Search Panel */
.kolase-page .kolase-search,
.kolase-page .search-panel {
    background: rgba(17, 26, 39, 0.78);
    border: 1px solid rgba(255, 255, 255, 0.09);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    border-radius: var(--radius-md, 16px);
    padding: 1rem 1.15rem;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

/* Layout Desktop Seimbang:
   Row 1: Search field membentang penuh (1 / -1)
   Row 2: 4 Filter Dropdown + Tombol Cari berjejer horizontal rapi */
.kolase-page .kolase-search {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) auto !important;
    align-items: center;
}

.kolase-page .kolase-search .search-field {
    grid-column: 1 / -1 !important;
}

.kolase-page .kolase-search .button-primary {
    grid-column: auto !important;
}

/* Input Pencarian Gelap Serasi (Mengeliminasi kotak abu-abu terang) */
.kolase-page .search-field {
    background: rgba(23, 34, 51, 0.82) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: var(--radius-sm, 10px) !important;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25) !important;
    min-height: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    padding: 0 0.85rem;
    gap: 0.6rem;
    transition: border-color 160ms ease, box-shadow 160ms ease;
}

.kolase-page .search-icon {
    color: #94a3b8;
    font-size: 1rem;
}

.kolase-page .search-field input {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: #f8fafc !important;
    font-size: 0.88rem;
    width: 100%;
    outline: none;
}

.kolase-page .search-field input::placeholder {
    color: #64748b !important;
}

.kolase-page .search-field:focus-within {
    border-color: rgba(66, 133, 244, 0.65) !important;
    box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.28) !important;
}

/* Dropdown Filter Gelap Serasi */
.kolase-page .filter-field {
    min-width: 0;
}

.kolase-page .filter-field select {
    background-color: rgba(23, 34, 51, 0.82) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='m2 4 4 4 4-4' fill='none' stroke='%2394a3b8' stroke-width='1.4'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 0.75rem center !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: var(--radius-sm, 10px) !important;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25) !important;
    color: #f1f5f9 !important;
    min-height: 42px;
    height: 42px;
    padding: 0 2rem 0 0.85rem;
    font-size: 0.84rem;
    width: 100%;
    transition: border-color 160ms ease, box-shadow 160ms ease;
}

.kolase-page .filter-field select:focus-visible {
    border-color: rgba(66, 133, 244, 0.65) !important;
    box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.28) !important;
    outline: none;
}

.kolase-page .filter-field select option {
    background: #111a27;
    color: #f1f5f9;
}

/* Tombol Cari */
.kolase-page .kolase-search .button-primary {
    background: #1a73e8;
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: var(--radius-sm, 10px);
    box-shadow: 0 4px 14px rgba(26, 115, 232, 0.32);
    min-height: 42px;
    height: 42px;
    padding: 0 1.25rem;
    font-size: 0.84rem;
    font-weight: 600;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    transition: background 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.kolase-page .kolase-search .button-primary:hover {
    background: #2563eb;
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(37, 99, 235, 0.42);
}

/* Tablet: Susun filter 2 kolom */
@media (max-width: 1024px) and (min-width: 641px) {
    .kolase-page .kolase-search {
        grid-template-columns: 1fr 1fr !important;
    }
    .kolase-page .kolase-search .search-field {
        grid-column: 1 / -1 !important;
    }
    .kolase-page .kolase-search .button-primary {
        grid-column: 1 / -1 !important;
    }
}

/* Mobile: Susun 1 kolom vertikal */
@media (max-width: 640px) {
    .kolase-page .kolase-search {
        grid-template-columns: 1fr !important;
        gap: 0.65rem !important;
        padding: 0.85rem !important;
    }
    .kolase-page .kolase-search .search-field,
    .kolase-page .kolase-search .button-primary {
        grid-column: auto !important;
        width: 100% !important;
    }
}

/* 6. Galeri Kolase Bebas dari Panel Hitam Raksasa */
.kolase-page .kolase-gallery,
.kolase-page .bookcase {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0.5rem 0 1.2rem !important;
    margin: 0 !important;
    min-height: 0 !important;
}

/* 7. Kartu Album Dark Liquid Glass & Gradasi Cover ke Metadata */
.kolase-page .kolase-book,
.kolase-page .album-card {
    display: flex;
    width: 100%;
    min-width: 0;
    max-width: 250px;
    flex-direction: column;
    color: #f1f5f9;
    text-decoration: none;
    border-radius: 18px;
    overflow: hidden;
    padding: 0;
    background: rgba(17, 26, 39, 0.82);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    transition: transform 220ms cubic-bezier(0.2, 0, 0, 1), box-shadow 220ms ease, background 220ms ease, border-color 220ms ease;
    cursor: pointer;
    position: relative;
}

.kolase-page .kolase-book:hover,
.kolase-page .kolase-book:focus-visible,
.kolase-page .album-card:hover,
.kolase-page .album-card:focus-visible {
    z-index: 4;
    transform: translateY(-5px);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.48), 0 0 20px rgba(26, 115, 232, 0.15);
    background: rgba(23, 34, 51, 0.92);
    border-color: rgba(66, 133, 244, 0.4);
    outline: none;
}

.kolase-page .kolase-book:focus-visible,
.kolase-page .album-card:focus-visible {
    outline: 2px solid #1a73e8;
    outline-offset: 3px;
}

/* Frame Artwork Persegi 1:1 & Crop Atas */
.kolase-page .book-cover,
.kolase-page .album-artwork {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 17px 17px 0 0;
    background: #0d1420;
    border: none;
    box-shadow: none;
}

.kolase-page .book-cover img,
.kolase-page .album-artwork img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    border-radius: 0;
    transition: transform 260ms cubic-bezier(0.2, 0, 0, 1);
}

.kolase-page .kolase-book:hover .book-cover img,
.kolase-page .album-card:hover .album-artwork img,
.kolase-page .kolase-book:focus-visible .book-cover img,
.kolase-page .album-card:focus-visible .album-artwork img {
    transform: scale(1.03);
}

/* GRADASI DARI COVER MENUJU METADATA (Refined Task 17G)
   Sebagian besar cover (0% - 68%) tetap mempertahankan warna aslinya.
   Gradasi baru mulai terasa secara halus di 70-80% dan memudar lembut ke #111a27 pada 100% */
.kolase-page .album-artwork::after,
.kolase-page .book-cover::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(
        to bottom,
        transparent 0%,
        transparent 65%,
        rgba(17, 26, 39, 0.12) 74%,
        rgba(17, 26, 39, 0.48) 84%,
        rgba(17, 26, 39, 0.85) 94%,
        #111a27 100%
    );
    z-index: 2;
    transition: background 220ms ease;
}

.kolase-page .album-card:hover .album-artwork::after,
.kolase-page .kolase-book:hover .book-cover::after {
    background: linear-gradient(
        to bottom,
        transparent 0%,
        transparent 65%,
        rgba(23, 34, 51, 0.12) 74%,
        rgba(23, 34, 51, 0.48) 84%,
        rgba(23, 34, 51, 0.85) 94%,
        #172233 100%
    );
}

/* Metadata Caption: Hanya Judul dan Nama Penulis, Menyatu Sempurna dengan Warna Dasar Kartu */
.kolase-page .book-caption,
.kolase-page .album-caption {
    display: flex;
    width: 100%;
    min-width: 0;
    flex-direction: column;
    gap: 0.3rem;
    padding: 0.75rem 0.95rem 1rem;
    margin-top: 0;
    text-align: left;
    position: relative;
    z-index: 3;
    background: #111a27;
    border: none;
    border-radius: 0 0 17px 17px;
    transition: background 220ms ease;
}

.kolase-page .kolase-book:hover .album-caption,
.kolase-page .album-card:hover .album-caption {
    background: #172233;
}

.kolase-page .book-caption strong,
.kolase-page .album-caption strong,
.kolase-page .album-title {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-size: 0.92rem;
    font-weight: 600;
    line-height: 1.35;
    color: #f1f5f9;
    letter-spacing: -0.01em;
    transition: color 180ms ease;
}

.kolase-page .kolase-book:hover .album-title,
.kolase-page .album-card:hover .album-title {
    color: #60a5fa;
}

.kolase-page .book-author,
.kolase-page .album-author {
    overflow: hidden;
    color: #94a3b8;
    font-size: 0.78rem;
    font-weight: 400;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin: 0;
    line-height: 1.25;
}

/* Play Affordance Button Badge */
.kolase-page .album-play-affordance {
    position: absolute;
    right: 0.75rem;
    bottom: 0.75rem;
    height: 36px;
    padding: 0 0.95rem 0 0.85rem;
    border-radius: 999px;
    background: #1a73e8;
    color: #ffffff;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.78rem;
    font-weight: 600;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4), 0 0 10px rgba(26, 115, 232, 0.35);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 180ms ease, transform 200ms cubic-bezier(0.2, 0, 0, 1), background 150ms ease, box-shadow 150ms ease;
    pointer-events: none;
    z-index: 5;
}

.kolase-page .kolase-book:hover .album-play-affordance,
.kolase-page .album-card:hover .album-play-affordance,
.kolase-page .kolase-book:focus-visible .album-play-affordance,
.kolase-page .album-card:focus-visible .album-play-affordance {
    opacity: 1;
    transform: translateY(0);
}

@media (max-width: 640px) {
    .kolase-page .album-play-affordance {
        opacity: 0.95;
        transform: translateY(0);
        height: 30px;
        padding: 0 0.75rem;
        font-size: 0.72rem;
        right: 0.5rem;
        bottom: 0.5rem;
    }
}

/* Placeholder for Missing Cover on Dark Theme */
.kolase-page .cover-placeholder {
    display: flex;
    width: 100%;
    height: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: 1rem;
    color: #94a3b8;
    font-size: 0.74rem;
    text-align: center;
    background: linear-gradient(145deg, #111a27 0%, #172233 100%);
}

.kolase-page .cover-placeholder-mark {
    display: grid;
    width: 44px;
    height: 44px;
    place-items: center;
    border: 1px solid rgba(59, 130, 246, 0.3);
    border-radius: 14px;
    background: rgba(26, 115, 232, 0.15);
    color: #60a5fa;
    font-family: Georgia, serif;
    font-size: 1.25rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* Empty State on Dark Theme */
.kolase-page .gallery-empty,
.kolase-page .bookcase-empty {
    position: relative;
    min-height: 260px;
    display: grid;
    align-items: center;
    justify-items: center;
    padding: 2.5rem 1.5rem;
    border-radius: 20px;
    background: rgba(17, 26, 39, 0.6);
    border: 1px dashed rgba(255, 255, 255, 0.12);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(14px);
}

.kolase-page .gallery-empty-message h3 {
    color: #f1f5f9;
}

.kolase-page .gallery-empty-message p:not(.eyebrow) {
    color: #94a3b8;
}

.kolase-page .gallery-empty-message .empty-icon {
    background: rgba(23, 34, 51, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: #60a5fa;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

.kolase-page .gallery-empty .button-secondary {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.14);
    color: #f1f5f9;
}

.kolase-page .gallery-empty .button-secondary:hover {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.22);
}

/* Note & Pagination on Dark Theme */
.kolase-page .gallery-note,
.kolase-page .bookcase-note {
    color: #64748b;
}

.kolase-page .pagination a,
.kolase-page .pagination span {
    background: rgba(23, 34, 51, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #e2e8f0;
}

.kolase-page .pagination a:hover {
    background: #174ea6;
    color: #ffffff;
    border-color: #174ea6;
}

.kolase-page .pagination [aria-current="page"] {
    background: #1a73e8;
    color: #ffffff;
    border-color: #1a73e8;
}

/* Dark Footer on Kolase Page (Dark Theme Scoped) */
[data-theme="dark"] .kolase-page .site-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    color: #94a3b8;
    background: #090e17;
}

[data-theme="dark"] .kolase-page .footer-brand strong {
    color: #f8fafc;
}

[data-theme="dark"] .kolase-page .footer-brand span {
    color: #94a3b8;
}

[data-theme="dark"] .kolase-page .footer-inner > p {
    color: #cbd5e1;
}

[data-theme="dark"] .kolase-page .footer-note {
    color: #94a3b8;
}
.access-denied { margin-top: 1rem; padding: 3rem 1.5rem; }
.access-denied h1 { max-width: 620px; margin: .2rem 0 .5rem; font-family: Georgia, "Times New Roman", serif; font-size: clamp(2rem, 4vw, 3rem); font-weight: 400; letter-spacing: -.05em; }
.access-denied p:not(.eyebrow) { max-width: 540px; margin: 0 0 1.3rem; color: var(--color-muted); font-size: var(--text-sm); }
@media (max-width: 760px) {
    .site-header { top: .55rem; padding: 0 3%; }.nav-shell { min-height: 58px; gap: .35rem; padding: .45rem .5rem .45rem .65rem; border-radius: 19px; }.brand { gap: .4rem; }.brand-mark { width: 32px; height: 32px; border-radius: 12px; }.nav-links { gap: .15rem; }.nav-links a { padding: .45rem .6rem; }.nav-cta { padding: .58rem .75rem; }
    .hero { border-radius: 0 0 26px 26px; }.hero-inner { width: 88%; min-height: 0; grid-template-columns: 1fr .72fr; gap: 1rem; padding: 8rem 0 3.5rem; }.hero h1 { font-size: clamp(2.9rem, 7vw, 4rem); }.hero-art { min-height: 270px; }.hero-meta { margin-top: -1rem; }.art-orbit { width: 240px; height: 240px; }.orbit-two { width: 195px; height: 195px; }.art-sun { width: 150px; height: 150px; }.art-book { width: 124px; height: 157px; }.book-page, .art-book::after { width: 60px; }.book-spine { width: 5px; }.book-page::after { height: 64px; margin: 30px auto; }
    .catalog-section { padding: 4.4rem 0 4.7rem; }.search-panel { display: grid; grid-template-columns: 1fr 1fr; }.search-field { grid-column: 1 / -1; }.search-panel > .button { grid-column: 1 / -1; }.work-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.work-card { min-height: 250px; padding: 1.1rem; }.detail-main { padding-top: 7.3rem; }
    .kolase-hero { min-height: 330px; grid-template-columns: 1fr 210px; gap: 1rem; padding: 7.5rem 6% 2rem; }.kolase-hero h1 { font-size: clamp(2.7rem, 7vw, 4rem); }.kolase-hero-mark { height: 190px; transform: scale(.8); }.kolase-content { width: 88%; padding-top: 3.4rem; }.kolase-search { display: grid; }.bookcase { min-height: 330px; padding: 1.2rem 1.2rem 0; border-radius: 23px; }.bookcase-row { gap: 1rem; padding-right: .5rem; padding-left: .5rem; }.bookcase-empty { min-height: 260px; }
}
@media (max-width: 480px) {
    .nav-links { display: flex; }.nav-links a { padding: .4rem .45rem; font-size: .68rem; }.brand-copy strong { font-size: .72rem; }.brand-copy span { font-size: .58rem; }.brand-mark { width: 29px; height: 29px; }.nav-cta { padding: .5rem .58rem; font-size: .68rem; white-space: nowrap; }
    .hero-inner { grid-template-columns: 1fr; gap: 0; padding: 7.7rem 0 1rem; }.hero-copy { padding-top: 1rem; }.hero h1 { font-size: clamp(2.8rem, 12vw, 4.2rem); }.hero-description { font-size: .96rem; }.hero-art { min-height: 245px; margin: -.2rem auto 0; width: min(340px, 100%); }.hero-meta { gap: .6rem; font-size: .63rem; }.hero-meta span:last-child { white-space: nowrap; }
    .catalog-section { padding-top: 3.5rem; }.section-heading { display: block; }.section-heading h2 { font-size: 2.15rem; }.result-count { display: inline-block; margin-top: .6rem; }.search-panel { grid-template-columns: 1fr 1fr; }.search-panel > .button { grid-column: 1 / -1; }.catalog-toolbar { display: block; }.catalog-toolbar span { display: inline-block; margin-top: .35rem; }.work-grid { grid-template-columns: 1fr; gap: .8rem; }.work-card { min-height: 220px; }.footer-inner { gap: 1rem; padding: 1.5rem 0; }.footer-inner > p { width: 100%; margin: 0; }.footer-note { width: 100%; }.detail-article { margin-top: 1.6rem; padding: 1.25rem; border-radius: 20px; }.metadata-grid { grid-template-columns: 1fr 1fr; gap: 1.1rem .8rem; }
    .kolase-hero { min-height: 0; grid-template-columns: 1fr; gap: 0; padding: 7rem 6% 1rem; border-radius: 0 0 26px 26px; }.kolase-hero h1 { font-size: clamp(2.7rem, 12vw, 4rem); }.kolase-hero-copy > p:not(.eyebrow) { font-size: .95rem; }.kolase-hero-mark { width: 210px; height: 170px; justify-self: center; margin-top: .2rem; transform: scale(.82); transform-origin: top center; }.kolase-content { padding-top: 2.5rem; }.kolase-section-heading { display: block; }.kolase-section-heading h2 { font-size: 2rem; }.kolase-section-heading .result-count { margin-top: .55rem; }.kolase-search { grid-template-columns: 1fr 1fr; margin-bottom: 1.5rem; }.bookcase { min-height: 315px; padding: .75rem .7rem 0; border-radius: 20px; }.bookcase-row { min-height: 245px; gap: .85rem; }.bookcase-empty { min-height: 250px; padding-right: .35rem; padding-left: .35rem; }.shelf-empty-message h3 { font-size: 1.35rem; }.shelf-board { right: -.7rem; left: -.7rem; }.kolase-book { width: 136px; }.bookcase-note { font-size: .68rem; text-align: left; }
}
@media (prefers-reduced-motion: reduce) { .work-card, .kolase-book, .nav-cta, .text-link span { transition: none !important; }.work-card:hover, .kolase-book:hover, .kolase-book:focus-visible { transform: none; } }
@media (prefers-reduced-transparency: reduce) { .nav-shell, .search-panel, .search-field { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; } }

/* Task 08C: visible Liquid Glass over layered color, with readable paper content. */
:root {
    --glass-bg: rgb(255 255 255 / 42%);
    --glass-border: rgb(255 255 255 / 78%);
    --glass-blur: 28px;
    --shadow-glass: 0 18px 48px rgb(20 43 79 / 13%);
}

body { background: radial-gradient(ellipse at 7% 44%, rgb(219 231 250 / 50%), transparent 32rem), #f8faff; }
.nav-shell {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border: 1px solid rgb(255 255 255 / 82%);
    background: linear-gradient(125deg, rgb(255 255 255 / 52%), rgb(255 255 255 / 24%) 52%, rgb(225 237 255 / 32%));
    box-shadow: 0 18px 42px rgb(24 50 88 / 14%), inset 0 1px 0 rgb(255 255 255 / 94%), inset 0 -1px 0 rgb(255 255 255 / 40%);
    -webkit-backdrop-filter: blur(30px) saturate(185%);
    backdrop-filter: blur(30px) saturate(185%);
}
.nav-shell::before { position: absolute; z-index: -1; inset: 0 0 auto; height: 72%; border-radius: inherit; background: linear-gradient(180deg, rgb(255 255 255 / 55%), transparent); content: ""; pointer-events: none; }
.nav-cta { box-shadow: inset 0 1px 0 rgb(255 255 255 / 32%), 0 6px 16px rgb(20 69 143 / 22%); }
.hero {
    background:
        radial-gradient(ellipse at 82% 18%, rgb(155 195 255 / 66%) 0, rgb(195 218 252 / 32%) 19%, transparent 42%),
        radial-gradient(ellipse at 9% 78%, rgb(211 226 249 / 82%) 0, transparent 38%),
        linear-gradient(118deg, #f8fbff 0%, #edf4ff 43%, #e4eefc 72%, #f7faff 100%);
}
.hero::before { position: absolute; z-index: -1; top: -8rem; right: 4%; width: min(62vw, 760px); height: 34rem; border-radius: 50%; background: radial-gradient(ellipse, rgb(255 255 255 / 72%), rgb(176 207 253 / 24%) 46%, transparent 72%); filter: blur(22px); content: ""; }
.hero::after { border-color: rgb(255 255 255 / 82%); background: linear-gradient(145deg, rgb(255 255 255 / 25%), rgb(156 190 239 / 10%)); box-shadow: inset 0 1px 0 rgb(255 255 255 / 65%); }
.art-sun { background: radial-gradient(circle at 34% 28%, rgb(255 255 255 / 98%) 0, rgb(225 238 255 / 83%) 57%, rgb(174 201 240 / 55%) 100%); }

.catalog-section { position: relative; isolation: isolate; }
.catalog-section::before {
    position: absolute;
    z-index: -1;
    top: 8.8rem;
    right: 0;
    left: 0;
    height: 205px;
    background: radial-gradient(ellipse at 24% 50%, rgb(132 174 237 / 34%), transparent 36%), radial-gradient(ellipse at 77% 54%, rgb(197 219 251 / 78%), transparent 42%);
    filter: blur(24px);
    content: "";
    pointer-events: none;
}
.search-panel {
    border: 1px solid rgb(255 255 255 / 88%);
    background: linear-gradient(135deg, rgb(255 255 255 / 55%), rgb(255 255 255 / 34%) 55%, rgb(225 237 255 / 42%));
    box-shadow: 0 19px 46px rgb(28 52 89 / 12%), inset 0 1px 0 rgb(255 255 255 / 96%), inset 0 -1px 0 rgb(255 255 255 / 54%);
    -webkit-backdrop-filter: blur(28px) saturate(185%);
    backdrop-filter: blur(28px) saturate(185%);
}
.search-field { background: rgb(255 255 255 / 32%); }
.filter-field select {
    border-color: rgb(255 255 255 / 82%);
    background-color: rgb(255 255 255 / 46%);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 80%), 0 3px 10px rgb(27 51 85 / 5%);
    -webkit-backdrop-filter: blur(14px) saturate(165%);
    backdrop-filter: blur(14px) saturate(165%);
}
.filter-field select:hover { border-color: rgb(255 255 255 / 100%); background-color: rgb(255 255 255 / 66%); }
.search-field input:focus-visible, .filter-field select:focus-visible { outline: 2px solid #356ebd; outline-offset: 2px; box-shadow: var(--focus-ring); }
.work-card { position: relative; border-color: #dfe7f2; background: linear-gradient(150deg, #fff 0%, #fcfdff 100%); box-shadow: 0 9px 25px rgb(28 52 89 / 6%); }
.work-card:hover { border-color: #c9d9ee; background: #fff; box-shadow: 0 18px 38px rgb(28 52 89 / 11%); }

.detail-main { position: relative; isolation: isolate; }
.detail-main::before {
    position: absolute;
    z-index: -1;
    inset: 9rem 0 2rem;
    background: radial-gradient(ellipse at 18% 12%, rgb(174 203 246 / 55%), transparent 39%), radial-gradient(ellipse at 86% 42%, rgb(208 226 252 / 78%), transparent 44%);
    filter: blur(28px);
    content: "";
    pointer-events: none;
}
.breadcrumbs a { padding: .35rem .72rem; border: 1px solid rgb(255 255 255 / 78%); border-radius: 999px; background: rgb(255 255 255 / 52%); box-shadow: inset 0 1px 0 #fff; }
.detail-article {
    border-color: rgb(255 255 255 / 88%);
    background: linear-gradient(140deg, rgb(255 255 255 / 88%), rgb(255 255 255 / 74%) 58%, rgb(240 246 255 / 76%));
    box-shadow: 0 26px 64px rgb(28 52 89 / 12%), inset 0 1px 0 rgb(255 255 255 / 98%);
    -webkit-backdrop-filter: blur(26px) saturate(155%);
    backdrop-filter: blur(26px) saturate(155%);
}
.metadata-grid { border-color: rgb(168 190 222 / 55%); }
.metadata-grid div { padding: .8rem 1rem; border: 1px solid rgb(255 255 255 / 85%); border-radius: 15px; background: rgb(255 255 255 / 45%); box-shadow: inset 0 1px 0 rgb(255 255 255 / 80%); }

.kolase-hero {
    background:
        radial-gradient(ellipse at 81% 36%, rgb(153 192 249 / 58%) 0, rgb(213 230 255 / 40%) 23%, transparent 47%),
        radial-gradient(ellipse at 6% 78%, rgb(210 226 250 / 84%) 0, transparent 42%),
        linear-gradient(120deg, #f9fbff 0%, #edf4ff 55%, #e6effc 78%, #f8faff 100%);
}
.kolase-hero::before { position: absolute; top: -8rem; right: 8%; width: 25rem; height: 25rem; border: 1px solid rgb(255 255 255 / 70%); border-radius: 50%; background: radial-gradient(circle, rgb(255 255 255 / 55%), transparent 70%); filter: blur(10px); content: ""; }
.kolase-search { display: grid; grid-template-columns: minmax(190px, 1fr) auto auto auto; }
.kolase-search .search-field { min-width: 0; }

@media (max-width: 760px) {
    .hero-inner { grid-template-columns: 1fr .72fr; }
    .catalog-section::before { top: 8rem; height: 250px; }
    .kolase-search { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
    .nav-shell { gap: .3rem; padding-right: .55rem; padding-left: .65rem; background: linear-gradient(125deg, rgb(255 255 255 / 68%), rgb(255 255 255 / 45%)); }
    .nav-links { gap: 0; }
    .nav-links a { padding-right: .32rem; padding-left: .32rem; font-size: .64rem; }
    .nav-cta { display: none; }
    .hero-inner { grid-template-columns: 1fr; }
    .detail-main::before { inset: 8rem 0 2rem; }
    .detail-article { background: linear-gradient(145deg, rgb(255 255 255 / 94%), rgb(255 255 255 / 86%)); }
    .kolase-search { grid-template-columns: 1fr 1fr; }
    .bookcase { padding: 1rem .85rem 0; }
    .bookcase-empty { min-height: 420px; }
}
@media (prefers-reduced-motion: reduce) {
    .nav-shell, .search-panel, .filter-field select, .detail-article { scroll-behavior: auto; transition: none !important; }
}
@media (prefers-reduced-transparency: reduce) {
    .nav-shell, .search-panel, .filter-field select, .detail-article, .shelf-empty-message, .breadcrumbs a {
        background: #fff;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .nav-shell, .search-panel, .filter-field select, .detail-article, .shelf-empty-message, .breadcrumbs a { background: #f8faff; }
}

/* Tahap 3: Kolase keeps its shared editorial system while giving the empty catalogue a compact, honest layout. */
.kolase-page .kolase-main { padding-bottom: 4rem; }
.kolase-page .kolase-hero {
    min-height: 250px;
    grid-template-columns: minmax(0, 1fr) 240px;
    gap: 1.5rem;
    padding: 5.2rem max(5vw, calc((100vw - 1160px) / 2)) 0.8rem;
}
.kolase-page .kolase-hero-copy { max-width: 640px; }
.kolase-page .kolase-hero h1 { font-size: clamp(2.8rem, 5vw, 4.25rem); }
.kolase-page .kolase-hero-copy > p:not(.eyebrow) { max-width: 460px; margin: .8rem 0 1rem; font-size: 1rem; }
.kolase-page .kolase-hero-mark { height: 160px; transform: scale(.74); }
.kolase-page .kolase-content { padding-top: 1.8rem; }
.kolase-page .kolase-section-heading { margin-bottom: 1rem; }
.kolase-page .kolase-search { margin-bottom: 1.25rem; }
.kolase-page .kolase-gallery, .kolase-page .bookcase { min-height: 0; }

@media (max-width: 760px) {
    .kolase-page .kolase-hero {
        min-height: 220px;
        grid-template-columns: minmax(0, 1fr) 160px;
        gap: .5rem;
        padding: 5rem 6% 1rem;
    }
    .kolase-page .kolase-hero h1 { font-size: clamp(2.45rem, 6.8vw, 3.5rem); }
    .kolase-page .kolase-hero-mark { height: 140px; transform: scale(.65); }
    .kolase-page .kolase-content { width: 92%; padding-top: 1.5rem; }
    .kolase-page .kolase-gallery, .kolase-page .bookcase { padding-right: 1.2rem; padding-left: 1.2rem; }
}

@media (max-width: 480px) {
    .kolase-page .kolase-hero {
        min-height: 0;
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
        padding: 5.2rem 6% 1rem;
    }
    .kolase-page .kolase-hero h1 { font-size: clamp(2.45rem, 11vw, 3.15rem); }
    .kolase-page .kolase-hero-copy > p:not(.eyebrow) { max-width: 34ch; font-size: .93rem; }
    .kolase-page .kolase-hero-mark { display: none; }
    .kolase-page .kolase-content { width: 94%; padding-top: 1.5rem; }
    .kolase-page .kolase-section-heading h2 { font-size: 1.9rem; }
    .kolase-page .kolase-search { grid-template-columns: minmax(0, 1fr) !important; gap: .65rem; padding: .8rem; }
    .kolase-page .kolase-search > * { min-width: 0; }
    .kolase-page .kolase-search .search-field,
    .kolase-page .kolase-search > .button { grid-column: auto !important; }
    .kolase-page .kolase-gallery, .kolase-page .bookcase { padding: 1rem 0.85rem; }
}

@media (prefers-reduced-transparency: reduce) {
    .kolase-page .shelf-empty-message { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* Task 08D: shared, route-rendered Liquid Glass product selector. */
.product-segmented {
    position: relative;
    isolation: isolate;
    display: grid;
    flex: 0 1 330px;
    width: clamp(250px, 29vw, 330px);
    min-width: 0;
    min-height: 52px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    gap: 3px;
    padding: 4px;
    overflow: hidden;
    border: 1px solid var(--liquid-edge);
    border-radius: 999px;
    background: linear-gradient(145deg, var(--liquid-surface), var(--liquid-tint));
    box-shadow: inset 0 1px 0 var(--liquid-highlight), inset 0 -1px 0 rgb(255 255 255 / 38%), var(--liquid-shadow);
    -webkit-backdrop-filter: blur(var(--liquid-blur)) saturate(165%);
    backdrop-filter: blur(var(--liquid-blur)) saturate(165%);
}
.product-segmented-indicator {
    position: absolute;
    z-index: 0;
    top: 4px;
    bottom: 4px;
    left: 4px;
    width: calc((100% - 8px - 3px) / 2);
    transform: translateX(0);
    border: 1px solid var(--liquid-highlight);
    border-radius: 999px;
    background: linear-gradient(145deg, rgb(255 255 255 / 96%), rgb(239 246 255 / 84%));
    box-shadow: inset 0 1px 0 #fff, 0 2px 7px rgb(31 58 98 / 9%);
    transition: transform 260ms var(--ease-liquid);
    pointer-events: none;
    view-transition-name: product-segmented-indicator;
}
.product-segmented[data-active="kolase"] .product-segmented-indicator { transform: translateX(calc(100% + 3px)); }
.product-segmented-link {
    position: relative;
    z-index: 1;
    display: inline-flex;
    min-width: 0;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    gap: .48rem;
    padding: .5rem .65rem;
    border-radius: 999px;
    color: #465a77;
    font-size: .82rem;
    font-weight: 600;
    line-height: 1.15;
    white-space: nowrap;
    transition: color var(--duration-liquid) ease;
}
.product-segmented-link svg { flex: 0 0 19px; width: 19px; height: 19px; }
.product-segmented-link:hover { color: #174b96; }
.product-segmented-link[aria-current="page"] { color: #123f88; }
.product-segmented-link:focus-visible { outline: 2px solid #1556b0; outline-offset: -3px; box-shadow: 0 0 0 2px rgb(255 255 255 / 90%); }
@media (max-width: 760px) {
    .product-segmented { flex-basis: 270px; width: 270px; min-height: 48px; }
    .product-segmented-link { min-height: 44px; }
}
@media (max-width: 480px) {
    .nav-shell { justify-content: flex-start; }
    .product-segmented { flex: 0 1 220px; width: min(220px, 58vw); min-height: 46px; margin-left: auto; }
    .product-segmented-link { gap: .3rem; padding: .4rem .28rem; font-size: .72rem; }
    .product-segmented-link svg { flex-basis: 17px; width: 17px; height: 17px; }
}
@media (prefers-reduced-motion: reduce) {
    .product-segmented-indicator, .product-segmented-link { transition: none; }
}
@media (prefers-reduced-transparency: reduce) {
    .product-segmented { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; }
    .product-segmented-indicator { background: #eaf1fb; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .product-segmented { background: #f8faff; }
}
::view-transition-group(product-segmented-indicator) {
    animation-duration: 260ms;
    animation-timing-function: var(--ease-liquid);
}
@media (prefers-reduced-motion: reduce) {
    ::view-transition-group(product-segmented-indicator) { animation-duration: .01ms; }
}

/* Task 09: Google OAuth entry and role-aware account controls. */
.nav-login-link { min-height: 44px; justify-content: center; white-space: nowrap; }
.login-label-short { display: none; }
.nav-account { display: flex; align-items: center; gap: .55rem; }
.nav-account-name { max-width: 150px; overflow: hidden; color: #40526d; font-size: .76rem; text-overflow: ellipsis; white-space: nowrap; }
.nav-account-admin, .nav-account-logout { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; padding: .4rem .65rem; border: 1px solid rgb(255 255 255 / 85%); border-radius: 999px; background: rgb(255 255 255 / 52%); color: #174b96; font-size: .76rem; font-weight: 650; }
.nav-account form { margin: 0; }
.nav-account-logout { cursor: pointer; }
.nav-account-admin:focus-visible, .nav-account-logout:focus-visible { outline: 2px solid #1556b0; outline-offset: 2px; }

/* TAHAP 2: Repository editorial layout, scoped away from Kolase and member pages. */
.repository-page .site-header { position: absolute; top: .75rem; }
.repository-page .nav-shell { width: min(1160px, 100%); min-height: 66px; }
.repository-page .hero-inner { width: min(1160px, 90%); min-height: 0; padding: 5.3rem 0 .7rem; }
.repository-page .hero-copy { max-width: 660px; }
.repository-page .hero-copy .eyebrow { margin-bottom: .85rem; }
.repository-page .hero h1 { max-width: 660px; font-size: clamp(3rem, 4.2vw, 3.65rem); line-height: 1.03; }
.repository-page .hero-description { max-width: 460px; margin: .75rem 0 .85rem; }
.repository-page .hero-art { min-height: 185px; }
.repository-page .art-orbit { width: 205px; height: 205px; }
.repository-page .orbit-two { width: 160px; height: 160px; }
.repository-page .art-sun { width: 128px; height: 128px; }
.repository-page .art-book { width: 104px; height: 132px; }
.repository-page .book-page, .repository-page .art-book::after { width: 50px; }
.repository-page .book-spine { width: 5px; }
.repository-page .book-page::after { height: 54px; margin: 25px auto; }
.repository-page .hero-meta { display: none; }
.repository-page .catalog-section { padding: 2.4rem 0 5rem; scroll-margin-top: 1.5rem; }
.repository-page .section-heading { margin-bottom: 1.1rem; }
.repository-page .section-heading h2 { font-size: clamp(2rem, 3.4vw, 2.7rem); }
.repository-page .section-description { margin-top: .35rem; }
.repository-page .catalog-note { margin: 0 0 1rem; padding: .65rem .8rem; border: 1px solid #e4eaf3; border-radius: 14px; background: rgb(255 255 255 / 58%); }
.repository-page .search-panel { display: grid; grid-template-columns: minmax(260px, 1fr) minmax(170px, 200px) minmax(130px, 145px) 142px; gap: .6rem; min-height: 0; padding: .65rem; }
.repository-page .search-field { min-width: 0; min-height: 50px; padding: 0 .7rem; border: 1px solid transparent; border-radius: 14px; }
.repository-page .search-field input { min-height: 48px; }
.repository-page .filter-field { min-width: 0; }
.repository-page .filter-field select { width: 100%; min-width: 0; min-height: 50px; }
.repository-page .search-panel > .button { min-height: 50px; }
.repository-page .catalog-toolbar { align-items: center; margin: 1rem 0 .8rem; }
.repository-page .catalog-toolbar-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .75rem; }
.repository-page .catalog-reset { display: inline-flex; min-height: 36px; align-items: center; padding: .35rem .7rem; border: 1px solid #dce5f1; border-radius: 999px; background: rgb(255 255 255 / 72%); color: #174b96; font-weight: 650; }
.repository-page .catalog-reset:focus-visible, .repository-page .work-card h3 a:focus-visible, .repository-page .text-link:focus-visible { outline: 2px solid #1556b0; outline-offset: 3px; border-radius: 5px; }
.repository-page .work-grid { gap: 1rem; border: 0; }
.repository-page .work-card { min-height: 0; padding: 0; overflow: hidden; border: 1px solid #e3eaf4; border-radius: 18px; background: linear-gradient(150deg, #fff, #fcfdff); box-shadow: 0 8px 22px rgb(30 56 96 / 5%); }
.repository-page .work-card:hover { transform: translateY(-2px); border-color: #c9d9ee; background: #fff; box-shadow: 0 14px 30px rgb(28 52 89 / 9%); }
.repository-page .work-card-cover { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; background: #edf3fb; }
.repository-page .work-card-cover-fallback { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .7rem; color: #48617f; background: radial-gradient(circle at 50% 35%, #fff 0, #e7eef8 72%); font-size: .82rem; text-align: center; }
.repository-page .work-card-fallback-mark { display: grid; width: 52px; height: 52px; place-items: center; border: 1px solid #d5e0ee; border-radius: 17px; background: #fff; color: #174b96; font-family: Georgia, serif; font-weight: 700; box-shadow: 0 6px 16px rgb(30 56 96 / 7%); }
.repository-page .work-card-content { display: flex; min-height: 165px; flex-direction: column; padding: 1rem 1.1rem 1.1rem; }
.repository-page .work-card h3 { margin: .8rem 0 .5rem; }
.repository-page .work-card .work-unit { margin-top: auto; padding-top: .65rem; }
.repository-page .work-card h3 a { color: inherit; text-decoration: none; }
.repository-page .work-card h3 a:hover { color: var(--color-blue); }
.repository-page .empty-state { min-height: 220px; }
.repository-page .detail-main { width: min(1060px, 92%); padding-top: 8.5rem; }
.repository-page .detail-cinema-main { width: 100%; max-width: 100%; }
.repository-page .detail-article { margin: 2.2rem auto 0; width: min(1060px, 92%); max-width: 1060px; }
.repository-page .detail-kicker { gap: .75rem; }
.repository-page .detail-year { color: #526680; font-size: .82rem; font-weight: 700; }
.repository-page .detail-article h1 { margin: 0.35rem 0 1.1rem; font-family: var(--font-body); font-size: clamp(1.875rem, 1.35rem + 1vw, 2.25rem); font-weight: 700; line-height: 1.18; letter-spacing: -0.02em; }
.repository-page .detail-byline { display: flex; flex-wrap: wrap; gap: 1rem 1.6rem; margin: 1.2rem 0 1.4rem; }
.repository-page .detail-byline div { min-width: 110px; }
.repository-page .detail-byline dt { color: #64748b; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }
.repository-page .detail-byline dd { margin: 0; color: #1e293b; font-size: .92rem; font-weight: 600; overflow-wrap: anywhere; }
.repository-page .detail-article .sample-notice { margin-bottom: 0; }
.repository-page .detail-rule { margin: 1.5rem 0; }
.repository-page .detail-description h2 { font-family: Georgia, "Times New Roman", serif; font-size: 1.5rem; font-weight: 400; }
.repository-page .detail-body { white-space: pre-line; }
.repository-page .back-button { margin-top: 1.6rem; }
@media (max-width: 1020px) {
    .repository-page .hero-inner { min-height: 0; grid-template-columns: 1.15fr .85fr; gap: 1.5rem; padding-top: 5.3rem; }
    .repository-page .hero h1 { font-size: clamp(2.8rem, 5vw, 3.4rem); }
    .repository-page .search-panel { grid-template-columns: minmax(0, 1fr) minmax(145px, 185px); }
    .repository-page .search-field { grid-column: 1 / -1; }
    .repository-page .search-panel > .button { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
    .repository-page .hero-inner { width: 88%; min-height: 0; grid-template-columns: 1fr .55fr; gap: .7rem; padding: 5.8rem 0 1.1rem; }
    .repository-page .hero h1 { font-size: clamp(2.55rem, 6.4vw, 3.2rem); }
    .repository-page .hero-art { min-height: 200px; }
    .repository-page .art-orbit { width: 195px; height: 195px; }
    .repository-page .orbit-two { width: 150px; height: 150px; }
    .repository-page .art-sun { width: 122px; height: 122px; }
    .repository-page .art-book { width: 102px; height: 130px; }
    .repository-page .book-page, .repository-page .art-book::after { width: 49px; }
    .repository-page .book-page::after { height: 52px; margin: 25px auto; }
    .repository-page .catalog-section { width: 88%; padding-top: 1.8rem; }
    .repository-page .work-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
    .repository-page .site-header,
    .kolase-page .site-header {
        top: .55rem;
        padding: 0 4vw;
    }
    .repository-page .nav-shell,
    .kolase-page .nav-shell {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas: "brand account" "products products";
        gap: .5rem .6rem;
        min-height: 0;
        padding: .55rem;
        border-radius: 20px;
    }
    .repository-page .brand,
    .kolase-page .brand {
        grid-area: brand;
        min-width: 0;
    }
    .repository-page .brand-copy,
    .kolase-page .brand-copy {
        display: grid;
    }
    .repository-page .brand-copy strong,
    .kolase-page .brand-copy strong {
        font-size: .76rem;
    }
    .repository-page .brand-copy span,
    .kolase-page .brand-copy span {
        font-size: .61rem;
    }
    .repository-page .product-segmented,
    .kolase-page .product-segmented {
        grid-area: products;
        justify-self: center;
        width: min(100%, 340px);
        max-width: 100%;
        margin: 0;
    }
    .repository-page .nav-login-actions,
    .kolase-page .nav-login-actions,
    .repository-page .nav-login-link,
    .kolase-page .nav-login-link,
    .repository-page .nav-account,
    .kolase-page .nav-account {
        grid-area: account;
        justify-self: end;
        margin: 0;
    }
    .repository-page .nav-login-actions,
    .kolase-page .nav-login-actions {
        display: flex;
        align-items: center;
        gap: .3rem;
    }
    .repository-page .nav-login-link,
    .kolase-page .nav-login-link {
        display: inline-flex;
        min-height: 38px;
        padding: .35rem .65rem;
        font-size: .72rem;
    }
    .repository-page .nav-staff-login,
    .kolase-page .nav-staff-login {
        min-height: 38px;
        padding: .35rem .55rem;
        font-size: .68rem;
    }
    .repository-page .nav-account,
    .kolase-page .nav-account {
        gap: .25rem;
    }
    .repository-page .nav-account-admin,
    .kolase-page .nav-account-admin,
    .repository-page .nav-account-logout,
    .kolase-page .nav-account-logout {
        min-height: 38px;
        padding: .35rem .5rem;
    }
    .repository-page .hero-inner { width: calc(100% - 2rem); grid-template-columns: 1fr; padding: 8.3rem 0 1.1rem; }
    .repository-page .hero-copy { padding: 0; }
    .repository-page .hero-copy .eyebrow { margin-bottom: .8rem; }
    .repository-page .hero h1 { font-size: clamp(2.25rem, 8.5vw, 2.65rem); line-height: 1.04; }
    .repository-page .hero-description { margin: .65rem 0 .55rem; font-size: .92rem; line-height: 1.55; }
    .repository-page .hero-art { display: none; }
    .repository-page .catalog-section { width: calc(100% - 2rem); padding: 1.35rem 0 3rem; }
    .repository-page .section-heading { display: flex; align-items: end; gap: .5rem; }
    .repository-page .section-heading { margin-bottom: .8rem; }
    .repository-page .section-heading h2 { font-size: 2rem; }
    .repository-page .section-description { max-width: 280px; font-size: .82rem; }
    .repository-page .result-count { flex: 0 0 auto; margin: 0; padding: .45rem .6rem; font-size: .75rem; }
    .repository-page .catalog-note { align-items: flex-start; margin-bottom: .75rem; padding: .6rem; line-height: 1.45; }
    .repository-page .search-panel { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .5rem; padding: .55rem; border-radius: 18px; }
    .repository-page .search-field { grid-column: 1 / -1; padding: 0 .5rem; }
    .repository-page .filter-field select { padding-right: 1.6rem; padding-left: .6rem; font-size: .78rem; }
    .repository-page .search-panel > .button { grid-column: 1 / -1; }
    .repository-page .catalog-toolbar { display: block; margin-top: .8rem; }
    .repository-page .catalog-toolbar p { margin-bottom: .35rem; }
    .repository-page .catalog-toolbar-actions { justify-content: space-between; gap: .4rem; }
    .repository-page .catalog-toolbar-actions > span { white-space: normal; }
    .repository-page .work-grid { grid-template-columns: minmax(0, 1fr); gap: .7rem; }
    .repository-page .work-card-content { min-height: 155px; padding: .85rem; }
    .repository-page .work-card h3 { font-size: 1.16rem; }
    .repository-page .detail-main { width: calc(100% - 2rem); padding-top: 8rem; }
    .repository-page .detail-article { margin-top: 1rem; padding: 1.1rem; }
    .repository-page .detail-article h1 { font-size: clamp(1.5rem, 4.5vw, 1.8rem); line-height: 1.16; }
    .repository-page .detail-byline { gap: .75rem 1rem; }
}
@media (prefers-reduced-motion: reduce) {
    .repository-page .work-card, .repository-page .button { transition: none; }
    .repository-page .work-card:hover { transform: none; }
}
@media (prefers-reduced-transparency: reduce) {
    .repository-page .catalog-note, .repository-page .catalog-reset { background: #fff; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .repository-page .catalog-note, .repository-page .catalog-reset { background: #f8faff; }
}
.auth-main { display: grid; min-height: 74vh; place-items: center; padding: 8rem 1.25rem 4rem; }
.auth-card { width: min(480px, 100%); padding: clamp(1.5rem, 5vw, 2.4rem); border-radius: 28px; background: linear-gradient(145deg, rgb(255 255 255 / 78%), rgb(255 255 255 / 58%) 56%, rgb(232 241 255 / 56%)); box-shadow: 0 24px 58px rgb(28 52 89 / 12%), inset 0 1px 0 #fff; }
.member-main { display: block; width: 100%; min-height: 74vh; padding: 7.6rem 1.25rem 4rem; }
.member-main .auth-card, .member-card { width: min(1040px, 100%); margin-inline: auto; padding: clamp(1.5rem, 3.5vw, 2.75rem); }
.auth-card h1 { margin: .7rem 0 .55rem; font-family: Georgia, "Times New Roman", serif; font-size: clamp(2.5rem, 8vw, 3.5rem); font-weight: 400; letter-spacing: -.05em; line-height: 1.1; }
.auth-description { margin: 0; color: #596a82; line-height: 1.75; }
.google-login-button { display: flex; width: 100%; min-height: 52px; align-items: center; justify-content: center; gap: .8rem; margin-top: 1.65rem; padding: .7rem 1rem; border: 1px solid rgb(255 255 255 / 95%); border-radius: 16px; background: linear-gradient(145deg, #fff, #f2f6fc); box-shadow: 0 9px 24px rgb(28 52 89 / 10%), inset 0 1px 0 #fff; color: #213654; font: inherit; font-weight: 650; text-align: center; transition: transform 160ms ease, box-shadow 160ms ease; }
a.google-login-button:hover { transform: translateY(-1px); box-shadow: 0 13px 28px rgb(28 52 89 / 14%), inset 0 1px 0 #fff; }
.google-login-button:focus-visible { outline: 3px solid rgb(21 86 176 / 50%); outline-offset: 3px; }
.google-login-button.is-disabled { color: #68778d; cursor: not-allowed; }
.google-login-button.is-loading { opacity: .75; }
.google-mark { width: 22px; height: 22px; flex: 0 0 22px; }
.auth-footnote { margin: .85rem 0 0; color: #68778d; font-size: .78rem; text-align: center; }
.auth-back-link { display: inline-block; margin-top: 1.5rem; color: #174b96; font-size: .86rem; font-weight: 650; }
.auth-alert, .auth-status, .member-profile-note { margin: 1rem 0 0; padding: .8rem .9rem; border: 1px solid #e7c2ad; border-radius: 13px; background: rgb(255 247 240 / 82%); color: #75401f; font-size: .86rem; line-height: 1.6; }
.auth-status { border-color: #b8dec9; background: rgb(239 250 243 / 85%); color: #21613b; }
.member-profile-note { border-color: #c9d7ea; background: rgb(243 247 253 / 84%); color: #4d607a; }
@media (max-width: 760px) {
    .nav-account { gap: .3rem; }
    .nav-account-name { max-width: 90px; }
    .auth-main { min-height: 70vh; padding-top: 7rem; }
    .member-main { padding: 7rem .75rem 3rem; }
}
@media (max-width: 480px) {
    .brand-copy { display: none; }
    .nav-login-link { min-height: 44px; padding: .45rem .62rem; font-size: .7rem; }
    .login-label-full { display: none; }
    .login-label-short { display: inline; }
    .nav-account { gap: .15rem; }
    .nav-account-name { display: none; }
    .nav-account-admin, .nav-account-logout { min-height: 44px; padding: .35rem .48rem; font-size: .67rem; }
    .auth-card { border-radius: 22px; }
}
@media (prefers-reduced-motion: reduce) {
    .google-login-button { transition: none; }
    .google-login-button:hover { transform: none; }
}
@media (prefers-reduced-transparency: reduce) {
    .auth-card { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .auth-card { background: #f8faff; }
}

/* Task 10: member profiles and configurable training administration. */
.admin-page-shell { width: 100%; }
.admin-nav-shell { width: min(1120px, calc(100% - 2.5rem)); margin: 8rem auto 0; }
.admin-page .admin-main { width: min(1120px, calc(100% - 2.5rem)); min-height: 72vh; margin: 0 auto; padding: 0 0 4rem; }
.admin-page .auth-main { min-height: 0; padding: 0 1.25rem 4rem; }
.admin-section-nav { position: sticky; z-index: 8; top: 5.6rem; isolation: isolate; display: flex; flex-wrap: wrap; gap: .25rem; width: fit-content; max-width: 100%; margin: 0 0 1.25rem; padding: .32rem; border: 1px solid rgb(255 255 255 / 82%); border-radius: var(--radius-pill); background: rgb(246 249 255 / 72%); box-shadow: inset 0 1px 0 #fff, 0 7px 20px rgb(34 61 101 / 6%); -webkit-backdrop-filter: blur(16px) saturate(155%); backdrop-filter: blur(16px) saturate(155%); }
.admin-section-nav a { position: relative; z-index: 1; display: inline-flex; flex: 0 0 auto; min-height: 40px; align-items: center; padding: .45rem .75rem; border: 1px solid transparent; border-radius: var(--radius-pill); color: #4c607c; font-size: .78rem; font-weight: 650; text-decoration: none; white-space: nowrap; }
.admin-section-nav a::before { position: absolute; z-index: 0; inset: 0; border: 1px solid transparent; border-radius: inherit; background: transparent; content: ""; transition: background 180ms var(--ease-liquid), border-color 180ms var(--ease-liquid); }
.admin-section-nav a > span { position: relative; z-index: 1; }
.admin-section-nav a[aria-current="page"] { color: #123f88; font-weight: 720; }
.admin-section-nav a[aria-current="page"]::before { border-color: rgb(255 255 255 / 94%); background: linear-gradient(145deg, #fff, #edf4ff); box-shadow: inset 0 1px 0 #fff, 0 2px 7px rgb(35 65 110 / 9%); view-transition-name: admin-active-pill; }
.admin-section-nav a:not([aria-current="page"]):hover { color: #174ea6; }
.admin-section-nav a:not([aria-current="page"]):hover::before { border-color: rgb(255 255 255 / 86%); background: rgb(255 255 255 / 48%); }
.admin-section-nav a:focus-visible { outline: 2px solid #1556b0; outline-offset: 2px; }
.nav-login-actions { display: flex; align-items: center; gap: .45rem; }
.nav-staff-login { display: inline-flex; min-height: 42px; align-items: center; padding: .35rem .65rem; border: 1px solid rgb(255 255 255 / 85%); border-radius: 999px; background: rgb(255 255 255 / 48%); color: #174b96; font-size: .72rem; font-weight: 650; text-decoration: none; white-space: nowrap; }
.nav-staff-login:hover, .nav-staff-login:focus-visible { background: #fff; color: #123f88; }
.nav-staff-login:focus-visible { outline: 2px solid #1556b0; outline-offset: 2px; }
.staff-login-form { display: grid; gap: 1rem; margin-top: 1.5rem; }
.staff-login-form .google-login-button { width: 100%; border: 0; cursor: pointer; font: inherit; }
.staff-logout-form { margin-top: 1rem; text-align: center; }
.staff-logout-form button { background: none; border: 0; cursor: pointer; font: inherit; }
.staff-dashboard-links { display: flex; flex-wrap: wrap; gap: .75rem; }
.user-admin-list { display: grid; gap: 1rem; margin: 1.25rem 0; }
.user-admin-card { margin: 0; }
.user-admin-heading { display: flex; align-items: start; justify-content: space-between; gap: .75rem; }
.user-admin-heading h2 { margin: 0 0 .25rem; font-size: 1.05rem; }
.user-admin-heading p { margin: 0; color: #66768d; overflow-wrap: anywhere; font-size: .83rem; }
.user-role-form { display: grid; grid-template-columns: minmax(140px, 1fr) minmax(170px, 1fr) minmax(130px, .7fr) auto; align-items: end; gap: .7rem; margin-top: 1rem; }
.user-role-form .admin-field { min-width: 0; }
.reset-password-form { display: flex; align-items: center; gap: .65rem; margin-top: .8rem; }
.reset-password-form span { color: #66768d; font-size: .75rem; }
.temporary-password { margin: 1rem 0; padding: 1rem 1.2rem; border: 1px solid #a8c6ed; border-radius: 16px; background: #edf5ff; color: #20334e; }
.temporary-password p { margin: .55rem 0 0; overflow-wrap: anywhere; }
.temporary-password code { padding: .12rem .35rem; border-radius: 5px; background: #fff; user-select: all; }
@media (max-width: 760px) { .user-role-form { grid-template-columns: 1fr; }.user-role-form .button { width: 100%; }.nav-login-actions { gap: .2rem; }.nav-staff-login { min-height: 38px; padding-inline: .45rem; font-size: .66rem; } }

.form-card { width: min(720px, 100%); margin: 1.25rem 0 2rem; padding: clamp(1.15rem, 4vw, 1.75rem); border-radius: 22px; background: linear-gradient(145deg, rgb(255 255 255 / 83%), rgb(245 249 255 / 76%)); box-shadow: 0 18px 42px rgb(28 52 89 / 9%), inset 0 1px 0 #fff; }
.admin-field { display: grid; gap: .4rem; color: #334863; font-size: .84rem; font-weight: 650; }
.admin-field input, .admin-field select, .admin-field textarea { width: 100%; min-height: 46px; padding: .7rem .8rem; border: 1px solid #d5dfed; border-radius: 12px; background: rgb(255 255 255 / 88%); color: #20334e; font: inherit; font-weight: 450; }
.admin-field textarea { min-height: 92px; resize: vertical; }
.admin-field input:focus-visible, .admin-field select:focus-visible, .admin-field textarea:focus-visible { outline: 3px solid rgb(21 86 176 / 22%); border-color: #4e7fc2; }
.admin-field small { color: #66768d; font-size: .76rem; font-weight: 450; line-height: 1.5; }
.form-card .admin-field { margin: 0 0 1rem; }
.form-card .admin-errors { margin-bottom: 1rem; }
.admin-errors { padding: .85rem 1rem; border: 1px solid #e9c3b2; border-radius: 14px; background: #fff7f1; color: #783f21; }
.admin-errors ul { margin: .35rem 0 0; padding-left: 1.25rem; }
.admin-flash { margin: 1rem 0; padding: .85rem 1rem; border: 1px solid #b9dec9; border-radius: 14px; background: #f0faf4; color: #225e3c; }
.profile-completion { width: fit-content; max-width: 100%; margin: 1rem 0; padding: .75rem 1rem; border: 1px solid #edcfb5; border-radius: 14px; background: #fff8f1; color: #784a27; }
.profile-completion.is-complete { border-color: #b9dec9; background: #f0faf4; color: #225e3c; }
.member-profile-action { display: inline-flex; margin-top: 1rem; text-decoration: none; }
.member-history { margin-top: 1.5rem; padding-top: 1.1rem; border-top: 1px solid rgb(92 116 148 / 18%); }
.member-history h2, .admin-panel h2 { margin: 0 0 .8rem; font-size: 1.15rem; }
.member-history-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: .7rem; align-items: center; padding: .75rem 0; border-bottom: 1px solid rgb(92 116 148 / 14%); color: #415571; font-size: .85rem; }
.member-history-row strong { color: #213c61; }
.member-empty-history { color: #64748b; font-size: .88rem; }
.member-submissions { display: grid; gap: 1rem; margin-top: 1.5rem; padding-top: 1.3rem; border-top: 1px solid rgb(92 116 148 / 14%); }
.member-submissions h2 { margin: 0; color: #213c61; font-size: 1.1rem; font-weight: 700; letter-spacing: -.01em; }
.member-submission-group { display: flex; flex-direction: column; gap: 1.15rem; padding: clamp(1rem, 2.5vw, 1.4rem); border: 1px solid rgb(92 116 148 / 18%); border-radius: 20px; background: linear-gradient(165deg, rgb(255 255 255 / 88%), rgb(248 251 255 / 82%)); box-shadow: 0 10px 30px rgb(35 57 87 / 6%); }
.member-submission-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; padding-bottom: .85rem; border-bottom: 1px solid rgb(92 116 148 / 12%); }
.member-submission-heading h3 { margin: 0; color: #1a3354; font-size: 1.05rem; font-weight: 700; }
.member-submission-heading p { margin: .25rem 0 0; color: #5a6e88; font-size: .82rem; }
.member-summary-panel { display: flex; flex-direction: column; gap: .55rem; padding: .85rem 1rem; background: rgb(244 248 254 / 85%); border: 1px solid rgb(185 208 238 / 50%); border-radius: 14px; }
.member-summary-meta { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .4rem .75rem; font-size: .84rem; color: #334e6f; }
.member-summary-stat strong { color: #1556b0; font-weight: 700; }
.member-summary-pending { color: #855b14; font-size: .8rem; font-weight: 600; }
.member-progress-track { height: 6px; width: 100%; background: rgb(215 228 245 / 75%); border-radius: 999px; overflow: hidden; }
.member-progress-bar { height: 100%; background: linear-gradient(90deg, #1556b0, #2563eb); border-radius: 999px; transition: width .3s ease; }
.member-section-group { display: flex; flex-direction: column; gap: .65rem; }
.member-section-header { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem .65rem; }
.member-section-kicker { font-size: .78rem; font-weight: 750; text-transform: uppercase; letter-spacing: .04em; color: #1e3a5f; margin: 0; }
.member-section-hint { font-size: .76rem; color: #64748b; }
.member-submission-outputs { display: flex; flex-direction: column; gap: .6rem; }
.member-submission-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .85rem; align-items: flex-start; padding: .85rem 1rem; border: 1px solid rgb(92 116 148 / 14%); border-radius: 14px; background: rgb(255 255 255 / 78%); transition: border-color .2s ease, box-shadow .2s ease; }
.member-submission-row:hover { border-color: rgb(21 86 176 / 25%); box-shadow: 0 4px 14px rgb(35 57 87 / 4%); }
.member-submission-row.is-fulfilled { background: linear-gradient(160deg, rgb(255 255 255 / 92%), rgb(247 253 249 / 80%)); }
.member-item-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; font-size: .95rem; flex-shrink: 0; background: #eef4fc; color: #1d4ed8; border: 1px solid rgb(180 205 240 / 60%); }
.member-item-icon.is-kolase { background: #f4eefd; color: #7c3aed; border-color: rgb(215 195 248 / 60%); }
.member-item-icon.is-supporting { background: #f1f5f9; color: #475569; border-color: rgb(203 213 225 / 60%); }
.member-item-content { display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
.member-item-header { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .6rem; }
.member-item-header strong { font-size: .92rem; color: #1a2d45; font-weight: 650; word-break: break-word; }
.member-output-product { display: inline-flex; align-items: center; padding: .15rem .5rem; border-radius: 6px; background: #edf3fc; color: #23528b; font-size: .72rem; font-weight: 600; letter-spacing: .01em; }
.member-output-desc { margin: 0; font-size: .79rem; color: #536782; line-height: 1.45; }
.member-item-instruction { font-size: .74rem; color: #64748b; font-style: italic; margin-top: .15rem; }
.member-template-link { display: inline-flex; align-items: center; gap: .3rem; font-size: .76rem; color: #1556b0; font-weight: 600; text-decoration: none; margin-top: .2rem; }
.member-template-link:hover { text-decoration: underline; color: #0d3a78; }
.member-item-status-wrap { display: flex; align-items: center; justify-content: flex-end; flex-shrink: 0; margin-top: .15rem; }
.member-item-badge { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .65rem; border-radius: 999px; font-size: .75rem; font-weight: 600; letter-spacing: .01em; line-height: 1; white-space: nowrap; }
.member-item-badge.is-complete { background: #eefaf2; color: #126335; border: 1px solid #c2ecd0; }
.member-item-badge.is-pending { background: #f8fafc; color: #64748b; border: 1px solid #e2e8f0; }
.member-item-badge.is-invalid { background: #fef8ee; color: #92400e; border: 1px solid #fde68a; }
.member-item-badge-icon { font-size: .78rem; font-weight: 700; }
.member-submission-action { display: flex; justify-content: flex-end; margin-top: .4rem; padding-top: .85rem; border-top: 1px solid rgb(92 116 148 / 12%); }
.member-submission-action .button { min-height: 44px; padding-inline: 1.4rem; font-size: .88rem; }
/* Task 17P: Member Work Metadata Card */
.member-work-metadata-card { display: flex; flex-direction: column; gap: 0.9rem; padding: 1.1rem 1.25rem; border: 1px solid rgb(92 116 148 / 16%); border-radius: 16px; background: rgb(255 255 255 / 85%); box-shadow: 0 4px 18px rgb(35 57 87 / 5%); transition: border-color 0.2s ease, box-shadow 0.2s ease; }
.member-work-header { display: flex; flex-direction: column; gap: 0.45rem; }
.member-work-kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem 0.65rem; }
.member-work-pub-status { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.2rem 0.65rem; border-radius: 999px; font-size: 0.72rem; font-weight: 650; line-height: 1; }
.member-work-pub-status.is-published { background: #eefaf2; color: #126335; border: 1px solid #c2ecd0; }
.member-work-pub-status.is-draft { background: #fef8ee; color: #92400e; border: 1px solid #fde68a; }
.member-work-title { margin: 0; font-size: 1.05rem; font-weight: 700; color: #1a2d45; line-height: 1.35; letter-spacing: -0.01em; }
.member-work-title-link { color: #1556b0; text-decoration: none; transition: color 0.15s ease; }
.member-work-title-link:hover { color: #0d3a78; text-decoration: underline; }
.member-work-meta-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0.65rem 1rem; margin: 0; padding: 0.75rem 0.9rem; border-radius: 12px; background: rgb(244 248 254 / 70%); border: 1px solid rgb(185 208 238 / 45%); }
.member-meta-item { display: flex; flex-direction: column; gap: 0.15rem; }
.member-meta-item dt { font-size: 0.72rem; font-weight: 650; text-transform: uppercase; letter-spacing: 0.04em; color: #5a6e88; }
.member-meta-item dd { margin: 0; font-size: 0.86rem; font-weight: 600; color: #1e3a5f; word-break: break-word; }
.member-work-description { display: flex; flex-direction: column; gap: 0.3rem; }
.member-work-subhead { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: #475569; }
.member-work-description p { margin: 0; font-size: 0.86rem; line-height: 1.55; color: #334e6f; white-space: pre-line; }
.member-work-keywords-block { display: flex; flex-direction: column; gap: 0.35rem; }
.member-keyword-pills .keyword-pill { min-height: 28px; padding: 0.22rem 0.75rem; font-size: 0.8rem; }
.member-keyword-empty { font-size: 0.82rem; color: #64748b; font-style: italic; }
.member-work-empty-card { padding: 1rem 1.15rem; border: 1px dashed rgb(92 116 148 / 22%); border-radius: 14px; background: rgb(248 250 252 / 65%); }
.member-no-work-notice { margin: 0; font-size: 0.84rem; color: #64748b; line-height: 1.5; }
@media (min-width: 768px) {
    .member-submission-outputs.is-grid-2 {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .85rem;
    }
    .member-submission-outputs.is-grid-2 .member-submission-row {
        grid-template-columns: auto minmax(0, 1fr);
        grid-template-rows: minmax(0, 1fr) auto;
        grid-template-areas:
            "icon content"
            ".    status";
        gap: .5rem .85rem;
    }
    .member-submission-outputs.is-grid-2 .member-item-icon {
        grid-area: icon;
    }
    .member-submission-outputs.is-grid-2 .member-item-content {
        grid-area: content;
    }
    .member-submission-outputs.is-grid-2 .member-item-status-wrap {
        grid-area: status;
        justify-content: flex-end;
    }
}
.work-submission-main { max-width: 900px; margin-inline: auto; }
.work-submission-main.admin-main { width: min(100% - 2.5rem, 1020px); padding: 7.4rem 0 4rem; }
.work-submission-form { display: grid; gap: 0; width: 100%; max-width: none; margin: 1rem 0 3rem; padding: clamp(1.1rem, 3.2vw, 2rem); border: 1px solid rgb(255 255 255 / 88%); border-radius: 28px; background: linear-gradient(145deg, rgb(255 255 255 / 91%), rgb(247 250 255 / 95%) 58%, rgb(240 246 255 / 92%)); box-shadow: 0 18px 46px rgb(32 57 91 / 8%), inset 0 1px 0 #fff; }
.submission-breadcrumb { display: flex; align-items: center; gap: .55rem; margin-bottom: 1rem; color: #718098; font-size: .82rem; }
.submission-breadcrumb a { color: #315b8b; font-weight: 650; text-decoration: none; }
.submission-breadcrumb a:hover { text-decoration: underline; }
.submission-breadcrumb a:focus-visible { outline: 3px solid rgb(36 102 205 / 32%); outline-offset: 3px; border-radius: 3px; }
.submission-hero { margin-bottom: .75rem; }
.submission-context { display: flex; align-items: center; gap: .4rem; margin: 0 0 .55rem; color: #385b88; font-size: .78rem; font-weight: 720; letter-spacing: .025em; }
.submission-context-mark { display: grid; width: 24px; height: 24px; place-items: center; border-radius: 8px; background: linear-gradient(145deg, #fff, #e8f0fc); box-shadow: inset 0 1px 0 #fff, 0 3px 8px rgb(34 70 120 / 12%); }
.submission-hero h1 { margin: 0; color: #183657; font-family: Georgia, "Times New Roman", serif; font-size: clamp(2rem, 4.6vw, 3rem); font-weight: 450; letter-spacing: -.045em; line-height: 1.08; }
.submission-hero-description { margin: .55rem 0 1rem; color: #65758d; font-size: .94rem; line-height: 1.55; }
.submission-enrollment { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; }
.submission-enrollment > span { display: inline-flex; min-height: 30px; align-items: center; padding: .3rem .65rem; border: 1px solid rgb(87 119 165 / 15%); border-radius: 999px; background: rgb(255 255 255 / 64%); color: #4f6480; font-size: .73rem; font-weight: 650; }
.work-submission-intro { display: flex; align-items: center; gap: .75rem; margin: 0 0 .35rem; padding: .8rem .9rem; border: 1px solid rgb(65 106 164 / 12%); border-radius: 16px; background: rgb(231 240 253 / 54%); }
.work-submission-intro p { margin: 0; color: #536a86; font-size: .8rem; line-height: 1.5; }
.work-submission-intro .badge { flex: 0 0 auto; }
.submission-section { min-width: 0; display: grid; gap: 1rem; margin: 0; padding: 1.3rem 0; border: 0; border-top: 1px solid rgb(80 107 145 / 12%); }
.submission-section-heading, .submission-completion-copy { display: flex; align-items: flex-start; gap: .75rem; }
.submission-section-heading > div { min-width: 0; }
.submission-step { display: grid; flex: 0 0 30px; width: 30px; height: 30px; place-items: center; border: 1px solid rgb(255 255 255 / 90%); border-radius: 11px; background: linear-gradient(145deg, #fff, #e9f1fc); box-shadow: 0 3px 9px rgb(34 70 120 / 8%); color: #315b8b; font-size: .69rem; font-weight: 750; }
.submission-section-heading h2, .submission-completion h2 { margin: 0; color: #213c61; font-size: 1rem; letter-spacing: -.015em; }
.submission-section-heading p { margin: .25rem 0 0; color: #75839a; font-size: .77rem; line-height: 1.5; }
.submission-metadata-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem 1rem; }
.submission-metadata-grid > * { min-width: 0; }
.submission-metadata-grid .admin-field, .submission-support-grid .admin-field { gap: .38rem; margin: 0; color: #334863; font-size: .78rem; font-weight: 680; }
.submission-metadata-grid .admin-field > span, .submission-support-grid .admin-field > span { display: flex; align-items: center; gap: .35rem; }
.submission-metadata-grid .admin-field b, .submission-upload-copy b { color: #b43939; font-size: .75rem; }
.submission-metadata-grid .admin-field input, .submission-metadata-grid .admin-field select, .submission-metadata-grid .admin-field textarea { box-sizing: border-box; width: 100%; min-width: 0; min-height: 48px; padding: .72rem .8rem; border: 1px solid #d8e1ee; border-radius: 13px; background: rgb(255 255 255 / 92%); color: #243a57; font: inherit; font-size: .88rem; font-weight: 450; transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease; }
.submission-metadata-grid .admin-field textarea { min-height: 112px; line-height: 1.55; resize: vertical; }
.submission-metadata-grid .admin-field input::placeholder { color: #8794a8; opacity: 1; }
.submission-metadata-grid .admin-field input:hover:not([readonly]), .submission-metadata-grid .admin-field select:hover, .submission-metadata-grid .admin-field textarea:hover { border-color: #b3c5df; }
.submission-metadata-grid .admin-field input:focus-visible, .submission-metadata-grid .admin-field select:focus-visible, .submission-metadata-grid .admin-field textarea:focus-visible, .submission-support-grid input:focus-visible { outline: 0; border-color: #4e7fc2; box-shadow: 0 0 0 3px rgb(21 86 176 / 20%); }
.submission-metadata-grid .admin-field input[readonly], .submission-metadata-grid .admin-field textarea[readonly] { background: #eef3fa; color: #63738a; }
.submission-metadata-grid .admin-field small, .submission-support-grid .admin-field > small { color: #74839a; font-size: .72rem; font-weight: 450; line-height: 1.5; }
.submission-field-wide { grid-column: 1 / -1; }
.submission-classification-grid { display: grid; grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: .9rem 1rem; min-width: 0; }
.submission-classification-grid.is-single { grid-template-columns: minmax(0, 1fr); }
.submission-classification-grid > * { min-width: 0; }
.submission-classification-grid .admin-field input, .submission-classification-grid .admin-field select { height: 48px; min-height: 48px; }
.submission-classification-grid .admin-field small { min-height: 2.1em; }
.submission-template-link { display: inline-flex; width: fit-content; max-width: 100%; align-items: center; gap: .3rem; color: #285b96; font-size: .72rem; font-weight: 700; line-height: 1.4; text-decoration: none; text-underline-offset: 3px; }
.submission-template-link:hover { color: #173f73; text-decoration: underline; }
.submission-template-link:focus-visible { outline: 3px solid rgb(21 86 176 / 24%); outline-offset: 3px; border-radius: 3px; }
.submission-template-link span { flex: 0 0 auto; }
.submission-enrollment-field { display: grid; align-content: center; gap: .22rem; min-height: 66px; padding: .65rem .8rem; border: 1px solid rgb(87 119 165 / 16%); border-radius: 13px; background: rgb(237 243 252 / 72%); }
.submission-enrollment-field.submission-field-wide { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .85rem; min-height: 48px; padding: .65rem .9rem; }
.submission-enrollment-field.submission-field-wide small { margin-left: auto; }
.submission-enrollment-field > span { color: #65758d; font-size: .72rem; font-weight: 650; }
.submission-enrollment-field strong { color: #2b496f; font-size: .84rem; }
.submission-enrollment-field small { color: #75839a; font-size: .68rem; }
.submission-upload { position: relative; display: block; min-width: 0; padding: .85rem; border: 1px dashed #b9c9df; border-radius: 17px; background: linear-gradient(145deg, rgb(255 255 255 / 92%), rgb(245 249 255 / 84%)); cursor: pointer; transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease; }
.submission-upload:hover, .submission-upload.has-file { border-color: #6f94c5; background: #f6f9ff; box-shadow: 0 5px 16px rgb(41 79 132 / 6%); }
.submission-upload:focus-within { outline: 3px solid rgb(21 86 176 / 19%); outline-offset: 2px; }
.submission-upload-visual { display: flex; align-items: center; gap: .9rem; min-width: 0; }
.submission-cover-preview { display: grid; flex: 0 0 78px; width: 78px; height: 92px; overflow: hidden; place-items: center; border: 1px solid #dbe4f0; border-radius: 13px; background: linear-gradient(145deg, #edf3fc, #e1ebf9); color: #6080a8; font-size: 1.6rem; }
.submission-cover-preview img { width: 100%; height: 100%; object-fit: cover; }
.submission-upload-copy { display: grid; min-width: 0; justify-items: start; gap: .3rem; color: #344c6b; }
.submission-upload-copy > strong { font-size: .82rem; }
.submission-upload-copy > small { color: #718098; font-size: .71rem; line-height: 1.45; }
.submission-file-name { max-width: 100%; overflow: hidden; color: #56708f; font-size: .72rem; text-overflow: ellipsis; white-space: nowrap; }
.submission-upload-button { display: inline-flex; min-height: 36px; align-items: center; justify-content: center; margin-top: .15rem; padding: .35rem .75rem; border: 1px solid rgb(69 107 160 / 20%); border-radius: 999px; background: linear-gradient(145deg, #fff, #edf3fc); box-shadow: inset 0 1px 0 #fff, 0 3px 9px rgb(35 69 117 / 8%); color: #285487; font-size: .73rem; font-weight: 700; }
.submission-file-input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; }
.submission-field-feedback { display: block; min-height: 0; margin-top: .35rem; color: #a52f35; font-size: .72rem; }
.submission-field-feedback:not(:empty) { min-height: 1rem; }
.submission-output-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem; }
.submission-output-card { display: grid; align-content: start; gap: .85rem; min-width: 0; padding: .95rem; border: 1px solid rgb(82 112 155 / 17%); border-radius: 18px; background: rgb(255 255 255 / 76%); box-shadow: 0 6px 18px rgb(35 61 98 / 4%); }
.submission-output-card.is-optional { background: rgb(247 249 253 / 72%); }
.submission-output-heading { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: start; gap: .6rem; }
.submission-output-heading > div { min-width: 0; }
.submission-output-heading h3 { margin: 0; color: #273f5e; font-size: .82rem; line-height: 1.4; }
.submission-output-heading h3 span { display: block; color: #5074a1; font-size: .71rem; font-weight: 650; }
.submission-output-heading p { margin: .28rem 0 0; color: #75839a; font-size: .7rem; line-height: 1.45; }
.submission-icon { display: grid; width: 38px; height: 38px; place-items: center; border: 1px solid rgb(255 255 255 / 95%); border-radius: 13px; background: linear-gradient(145deg, #edf4ff, #dfeafa); box-shadow: inset 0 1px 0 #fff, 0 3px 9px rgb(43 76 122 / 8%); color: #386393; font-size: 1.1rem; }
.submission-icon-kolase { background: linear-gradient(145deg, #eef3ff, #e7e9fb); color: #59629c; }
.submission-icon-image { background: linear-gradient(145deg, #fff3e7, #f8e6d7); color: #a56735; }
.submission-requirement-tag, .submission-inline-requirement { display: inline-flex; align-items: center; min-height: 23px; padding: .2rem .48rem; border-radius: 999px; background: #eef3fa; color: #65758d; font-size: .62rem; font-style: normal; font-weight: 700; white-space: nowrap; }
.is-required .submission-requirement-tag { background: #e8f1ff; color: #315f9a; }
.submission-file-saved { display: grid; grid-template-columns: 38px minmax(0, 1fr) 20px; align-items: center; gap: .6rem; padding: .7rem; border: 1px solid #c9e2d2; border-radius: 14px; background: #f2faf4; }
.submission-file-saved > span:nth-child(2) { display: grid; min-width: 0; gap: .15rem; }
.submission-file-saved strong { color: #315c42; font-size: .75rem; }
.submission-file-saved small { color: #62806b; font-size: .68rem; line-height: 1.4; }
.submission-file-saved > b { color: #348352; }
.submission-support-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem; }
.submission-support-field { min-width: 0; padding: .8rem; border-radius: 14px; background: rgb(255 255 255 / 62%); }
.submission-support-field input[type="file"] { box-sizing: border-box; width: 100%; max-width: 100%; min-height: 42px; padding: .4rem; border: 1px solid #d9e2ee; border-radius: 11px; background: #fff; color: #405572; font: inherit; font-size: .7rem; }
.submission-support-field input[type="file"]::file-selector-button { min-height: 30px; margin-right: .55rem; padding: .3rem .6rem; border: 1px solid #d8e3f2; border-radius: 8px; background: #edf3fc; color: #315b8b; font: inherit; font-weight: 700; cursor: pointer; }
.submission-support-field input[type="file"]::file-selector-button:hover { background: #e2edfc; }
.submission-inline-requirement { margin-left: .15rem; }
.submission-completion { display: flex; align-items: center; justify-content: space-between; gap: 1.1rem; margin: .35rem -.1rem 0; padding: 1rem; border: 1px solid rgb(80 107 145 / 14%); border-radius: 17px; background: linear-gradient(145deg, rgb(236 244 255 / 78%), rgb(255 255 255 / 82%)); }
.submission-completion-copy { min-width: 0; }
.submission-completion h2 { font-size: .88rem; }
.submission-completion p { max-width: 500px; margin: .28rem 0 0; color: #687991; font-size: .72rem; line-height: 1.5; }
.submission-completion .admin-form-actions { flex: 0 0 auto; display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; }
.submission-submit { gap: .45rem; }
.submission-submit span { font-size: 1rem; transition: transform 150ms ease; }
.submission-submit:hover span { transform: translateX(2px); }
.work-submission-errors { margin: .8rem 0; padding: .85rem 1rem; border: 1px solid #e6b2b2; border-radius: 14px; background: #fff5f5; color: #842c33; }
.work-submission-errors p { margin: 0 0 .35rem; font-weight: 700; }.work-submission-errors ul { margin: 0; padding-left: 1.3rem; }
.work-submission-errors { padding: .75rem 1rem; border: 1px solid #e5a5a5; border-radius: 12px; background: #fff4f4; color: #7f2424; }
.work-submission-errors p { margin: 0 0 .35rem; font-weight: 700; }.work-submission-errors ul { margin: 0; padding-left: 1.3rem; }
.work-submission-result { padding: 1.5rem; border: 1px solid var(--color-border); border-radius: var(--radius-md); }.work-submission-result h2 { margin-top: 0; }
.admin-record-list { display: grid; gap: .8rem; margin-top: 1rem; }
.admin-record { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: .8rem; align-items: center; padding: 1rem 1.1rem; border: 1px solid rgb(255 255 255 / 88%); border-radius: 18px; background: linear-gradient(145deg, rgb(255 255 255 / 82%), rgb(246 249 254 / 75%)); box-shadow: 0 8px 24px rgb(31 58 98 / 6%), inset 0 1px 0 #fff; }
.admin-record h2 { margin: 0 0 .3rem; color: #213c61; font-size: 1rem; }
.admin-record p { margin: 0; color: #64748b; font-size: .8rem; line-height: 1.5; overflow-wrap: anywhere; }
.record-actions { display: flex; flex-wrap: wrap; gap: .4rem; grid-column: 1 / -1; }
.record-actions form, .admin-record > form { margin: 0; }
.admin-record .button, .record-actions .button { min-height: 40px; }
.inline-search { display: flex; flex-wrap: wrap; gap: .75rem; align-items: end; width: min(760px, 100%); padding: 1rem; border: 1px solid rgb(255 255 255 / 82%); border-radius: 18px; background: rgb(255 255 255 / 58%); }
.inline-search .admin-field { flex: 1 1 250px; }
.inline-search .button { min-height: 46px; }
.admin-panel { margin-top: 1.5rem; padding: 1.25rem; border: 1px solid rgb(255 255 255 / 84%); border-radius: 20px; background: rgb(255 255 255 / 62%); }
/* Task 17Q: Admin Work Keywords Management */
.work-keyword-record { display: flex; flex-direction: column; align-items: stretch; gap: 0.85rem; padding: 1.15rem 1.35rem; }
@media (min-width: 768px) {
    .work-keyword-record { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 1.25rem; }
}
.work-keyword-meta-line { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem 0.65rem; margin-bottom: 0.35rem; }
.work-keyword-badge { display: inline-flex; align-items: center; padding: 0.18rem 0.55rem; border-radius: 999px; font-size: 0.72rem; font-weight: 650; line-height: 1; }
.work-keyword-badge.has-keywords { background: #eef4fc; color: #1556b0; border: 1px solid #bfdbfe; }
.work-keyword-badge.no-keywords { background: #f8fafc; color: #64748b; border: 1px solid #e2e8f0; }
.work-keyword-title { margin: 0 0 0.35rem; color: #183657; font-size: 1.05rem; font-weight: 700; line-height: 1.35; letter-spacing: -0.01em; }
.work-keyword-byline { margin: 0 0 0.5rem; color: #5a6e88; font-size: 0.82rem; line-height: 1.5; }
.work-keyword-byline strong { color: #334e6f; }
.work-keyword-preview { margin-top: 0.25rem; }
.keyword-mini-list { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.5rem; }
.keyword-mini-pill { display: inline-flex; align-items: center; padding: 0.18rem 0.55rem; border-radius: 999px; font-size: 0.75rem; font-weight: 550; background: #f1f5fb; color: #1e3a5f; border: 1px solid rgba(210, 224, 245, 0.9); }
.keyword-mini-more { font-size: 0.75rem; color: #64748b; font-weight: 600; }
.keyword-empty-hint { font-size: 0.8rem; color: #94a3b8; font-style: italic; }
.admin-work-id-card { margin-bottom: 1.25rem; display: flex; flex-direction: column; gap: 0.85rem; }
.admin-work-card-header { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem 0.65rem; }
.work-product-tag { display: inline-flex; align-items: center; padding: 0.15rem 0.5rem; border-radius: 6px; background: #eef2f6; color: #475569; font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; }
.admin-work-card-title { margin: 0; color: #183657; font-size: 1.25rem; font-weight: 750; line-height: 1.3; }
.admin-work-card-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0.65rem 1rem; margin: 0; padding: 0.75rem 0.9rem; border-radius: 12px; background: rgb(244 248 254 / 70%); border: 1px solid rgb(185 208 238 / 45%); }
.admin-work-card-meta dt { font-size: 0.72rem; font-weight: 650; text-transform: uppercase; letter-spacing: 0.04em; color: #5a6e88; }
.admin-work-card-meta dd { margin: 0.15rem 0 0; font-size: 0.86rem; font-weight: 600; color: #1e3a5f; word-break: break-word; }
.admin-work-card-meta dd code { font-size: 0.8rem; padding: 0.1rem 0.35rem; border-radius: 4px; background: rgba(0,0,0,0.05); }
.admin-work-current-keywords { display: flex; flex-direction: column; gap: 0.4rem; padding-top: 0.4rem; border-top: 1px solid rgb(92 116 148 / 12%); }
.admin-work-subhead { font-size: 0.76rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: #475569; }
.admin-keyword-form { margin-top: 1rem; }
.admin-instruction-highlight { display: inline-block; margin-left: 0.4rem; font-size: 0.76rem; color: #1556b0; font-weight: 700; }
.admin-field-hint { margin: 0 0 0.45rem; font-size: 0.8rem; color: #64748b; line-height: 1.5; }
.admin-textarea { box-sizing: border-box; width: 100%; min-height: 160px; padding: 0.75rem 0.85rem; border: 1px solid rgb(92 116 148 / 25%); border-radius: 10px; background: #fff; color: #1e293b; font-family: monospace, sans-serif; font-size: 0.88rem; line-height: 1.6; resize: vertical; }
.admin-textarea:focus { outline: 2px solid #2563eb; outline-offset: -1px; border-color: #2563eb; }
.admin-field-counter { display: block; margin-top: 0.35rem; font-size: 0.75rem; color: #64748b; }
.admin-confirm-clear-box { margin: 0.85rem 0; padding: 0.85rem 1rem; border: 1px solid #fde68a; border-radius: 12px; background: #fffbeb; }
.admin-checkbox-label { display: flex; align-items: flex-start; gap: 0.65rem; cursor: pointer; color: #92400e; font-size: 0.84rem; line-height: 1.4; }
.admin-checkbox-label input[type="checkbox"] { margin-top: 0.2rem; }
.admin-danger-zone { margin-top: 2rem; padding: 1.15rem 1.35rem; border: 1px solid #fecaca; border-radius: 16px; background: #fef2f2; display: flex; flex-direction: column; gap: 0.75rem; }
@media (min-width: 768px) {
    .admin-danger-zone { display: flex; flex-direction: row; justify-content: space-between; align-items: center; gap: 1.5rem; }
}
.admin-danger-copy h3 { margin: 0 0 0.25rem; font-size: 0.95rem; font-weight: 700; color: #991b1b; }
.admin-danger-copy p { margin: 0; font-size: 0.8rem; color: #b91c1c; line-height: 1.45; }
.button-danger { background: #dc2626; color: #fff; border: 1px solid #b91c1c; font-weight: 600; cursor: pointer; border-radius: 10px; padding: 0.5rem 1rem; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; transition: background 0.2s ease; }
.button-danger:hover { background: #b91c1c; color: #fff; }
.audit-row { padding: .9rem 0; border-top: 1px solid rgb(92 116 148 / 16%); color: #40536f; font-size: .85rem; }
.audit-row p { margin: .4rem 0; }
.audit-row summary { cursor: pointer; color: #174b96; font-weight: 650; }
.audit-values { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; margin-top: .7rem; }
.audit-values h3 { margin: .25rem 0; font-size: .82rem; }
.audit-values pre { overflow: auto; padding: .7rem; border-radius: 10px; background: #f3f6fb; color: #334863; font-size: .72rem; }
.compact-form { width: min(860px, 100%); }
.compact-form h2 { margin: 0 0 .9rem; color: #213c61; font-size: 1.1rem; }
.training-page-heading { align-items: center; margin-bottom: 1.35rem; }
.training-page-heading h1 { max-width: 850px; font-size: clamp(2rem, 4.2vw, 3rem); line-height: 1.08; }
.training-page-heading .section-description { max-width: 720px; margin: .55rem 0 0; color: #62748c; line-height: 1.55; }
.program-form { width: 100%; max-width: none; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.program-form > .admin-errors, .program-description-field, .program-form > .admin-form-actions { grid-column: 1 / -1; }
.program-form textarea { box-sizing: border-box; width: 100%; min-height: 100px; padding: .7rem .8rem; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: #fff; color: var(--color-text); font: inherit; resize: vertical; }
.admin-program-record { grid-template-columns: minmax(0, 1fr) auto; gap: .75rem 1rem; padding: 1.25rem 1.35rem; }
.admin-program-summary { min-width: 0; }
.admin-program-summary .eyebrow { margin: 0 0 .35rem; font-size: .62rem; letter-spacing: .13em; }
.admin-program-summary h2 { font-size: 1.12rem; }
.admin-program-record .record-actions { align-items: center; padding-top: .75rem; border-top: 1px solid rgb(213 223 237 / 68%); }
.admin-program-record .record-actions form { margin: 0; }
.cohort-create-form { width: 100%; max-width: none; margin: 1.1rem 0 1.6rem; padding: clamp(1rem, 2.4vw, 1.5rem); }
.cohort-form-heading { display: flex; align-items: end; justify-content: space-between; gap: 1.25rem; }
.cohort-form-heading .eyebrow { margin: 0 0 .2rem; color: #6a7f9b; font-size: .63rem; letter-spacing: .14em; }
.cohort-form-heading h2 { margin: 0; color: #213c61; font-size: 1.15rem; }
.cohort-form-heading > p { max-width: 510px; margin: 0; color: #6a7b92; font-size: .78rem; line-height: 1.5; text-align: right; }
.cohort-create-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(180px, .7fr); gap: .9rem 1rem; }
.cohort-create-grid .admin-field, .cohort-edit-form .admin-field { min-width: 0; }
.cohort-description-field { grid-column: 1 / -1; }
.cohort-create-grid textarea { box-sizing: border-box; width: 100%; min-height: 72px; padding: .7rem .8rem; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: #fff; color: var(--color-text); font: inherit; resize: vertical; }
.cohort-create-form .admin-form-actions { padding-top: 0; }
.cohort-record { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; padding: clamp(1rem, 2vw, 1.35rem); }
.cohort-record-heading { display: flex; min-width: 0; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.cohort-record-heading > div:first-child { min-width: 0; }
.cohort-record-heading .eyebrow { margin: 0 0 .32rem; color: #6a7f9b; font-size: .62rem; letter-spacing: .13em; }
.cohort-record-heading h2 { margin: 0 0 .3rem; color: #203958; font-family: Georgia, "Times New Roman", serif; font-size: 1.25rem; font-weight: 500; }
.cohort-record-heading p:last-child { margin: 0; color: #6a7b92; font-size: .78rem; }
.cohort-record-status { display: flex; flex: 0 0 auto; align-items: center; gap: .65rem; }
.cohort-page-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .5rem; }
.cohort-record-status form { margin: 0; }
.cohort-record-description { margin: -.25rem 0 0; color: #586d89; font-size: .84rem; line-height: 1.55; }
.cohort-committee-assignments { grid-column: 1 / -1; width: 100%; padding-top: .85rem; border-top: 1px solid rgb(213 223 237 / 78%); }
.cohort-assignment-heading { display: flex; justify-content: space-between; align-items: start; gap: 1rem; margin-bottom: .75rem; }
.cohort-committee-assignments h3 { margin: 0; color: #213c61; font-size: .95rem; }
.cohort-assignment-heading p { margin: .25rem 0 0; color: #6a7b92; font-size: .75rem; line-height: 1.5; }
.cohort-assignment-count { flex: 0 0 auto; padding: .25rem .55rem; border: 1px solid #dce6f3; border-radius: var(--radius-pill); background: #f6f9fe; color: #526983; font-size: .68rem; font-weight: 700; }
.cohort-committee-assignments > ul { display: grid; gap: .5rem; margin: 0 0 .8rem; padding: 0; list-style: none; }
.cohort-committee-assignments > ul > li { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem; padding: .55rem .65rem; border: 1px solid rgb(214 225 240 / 80%); border-radius: 13px; background: rgb(255 255 255 / 60%); }
.cohort-committee-name { min-width: 0; flex: 1 1 220px; color: #334b6b; font-size: .82rem; font-weight: 650; overflow-wrap: anywhere; }
.cohort-committee-name small { margin-left: .35rem; color: #728198; font-size: .72rem; font-weight: 450; }
.cohort-assignment-empty, .cohort-assignment-hint { margin: 0 0 .75rem; color: #697a91; font-size: .78rem; line-height: 1.5; }
.cohort-committee-assignments > ul form { margin: 0; }
.cohort-committee-assignments .inline-search { width: 100%; }
.cohort-assignment-form { max-width: none; padding: .85rem; }
.cohort-assignment-form .admin-field { flex: 1 1 320px; }
.cohort-edit-form { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(130px, .55fr) minmax(0, 1.3fr) auto; gap: .7rem; align-items: end; width: 100%; padding: .85rem; border: 1px solid rgb(214 225 240 / 78%); border-radius: 15px; background: rgb(255 255 255 / 58%); }
.cohort-edit-form .admin-field { min-width: 0; }
.cohort-edit-form input { min-width: 0; }
.cohort-edit-form .button { white-space: nowrap; }
.candidate-search-panel { display: grid; gap: 1rem; margin: 1rem 0 1.25rem; padding: clamp(1rem, 2.5vw, 1.5rem); border: 1px solid rgb(255 255 255 / 88%); border-radius: 22px; background: linear-gradient(145deg, rgb(255 255 255 / 80%), rgb(240 246 255 / 70%)); box-shadow: inset 0 1px 0 #fff, 0 12px 30px rgb(34 59 97 / 6%); -webkit-backdrop-filter: blur(16px) saturate(145%); backdrop-filter: blur(16px) saturate(145%); }
.candidate-search-panel .eyebrow { margin: 0 0 .3rem; color: #6681a2; font-size: .62rem; letter-spacing: .14em; }
.candidate-search-panel h2 { margin: 0; color: #1a3151; font-family: Georgia, "Times New Roman", serif; font-size: 1.45rem; font-weight: 450; }
.candidate-search-panel p:last-child { max-width: 720px; margin: .35rem 0 0; color: #66788f; font-size: .82rem; line-height: 1.55; }
.candidate-search-form { width: 100%; max-width: none; }
.candidate-search-form .admin-field { flex: 1 1 340px; }
.candidate-results-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin: 1.5rem 0 .65rem; }
.candidate-results-heading h2 { margin: 0; color: #203958; font-size: 1.02rem; }
.candidate-results-heading span { color: #6a7b92; font-size: .76rem; }
.candidate-list { display: grid; gap: .65rem; }
.candidate-row { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: center; gap: 1rem; padding: 1rem 1.1rem; border: 1px solid rgb(255 255 255 / 88%); border-radius: 18px; background: linear-gradient(145deg, rgb(255 255 255 / 82%), rgb(246 249 254 / 75%)); box-shadow: 0 8px 24px rgb(31 58 98 / 6%), inset 0 1px 0 #fff; }
.candidate-identity { display: flex; min-width: 0; align-items: center; gap: .75rem; }
.candidate-avatar { display: grid; width: 42px; height: 42px; flex: 0 0 42px; place-items: center; border: 1px solid #dce8f7; border-radius: 14px; background: linear-gradient(145deg, #fff, #eaf2ff); color: #24579c; font-size: 1rem; font-weight: 700; }
.candidate-identity h3 { margin: 0 0 .2rem; color: #213c61; font-size: .9rem; overflow-wrap: anywhere; }
.candidate-identity p { margin: 0; color: #718198; font-size: .74rem; }
.candidate-enroll-form { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .65rem .85rem; margin: 0; }
.candidate-enroll-form label { display: flex; min-width: 0; flex: 1 1 250px; align-items: flex-start; gap: .45rem; color: #5d6e85; font-size: .73rem; line-height: 1.45; }
.candidate-enroll-form input[type="checkbox"] { width: 18px; height: 18px; flex: 0 0 18px; margin: 0; accent-color: #1756a8; }
.candidate-empty-state { margin: 1rem 0; padding: 1.25rem; border: 1px dashed #c9d7e9; border-radius: 18px; background: rgb(255 255 255 / 55%); }
.candidate-empty-state h2 { margin: 0 0 .3rem; color: #274469; font-size: 1rem; }
.candidate-empty-state p { margin: 0; color: #6a7b92; font-size: .8rem; line-height: 1.55; }
.selected-enrollment-context { display: grid; gap: .25rem; padding: .85rem 1rem; border: 1px solid #d8e5f5; border-radius: 14px; background: #f5f9ff; color: #29476d; }
.selected-enrollment-context .eyebrow { margin: 0; color: #6681a2; font-size: .62rem; letter-spacing: .13em; }
.selected-enrollment-context strong { font-size: .9rem; }
.selected-enrollment-context small { color: #6b7e97; font-size: .73rem; }
/* Document Types Configuration Layout (iOS 26 Liquid Glass) */
.document-type-create-form {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
    margin: 1.25rem 0 1.5rem;
    padding: 1.4rem 1.6rem;
    border-radius: 20px;
}

.document-type-create-form h2 {
    margin: 0 0 1rem;
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #1e3a5f;
}

.document-type-create-grid {
    display: grid;
    grid-template-columns: 160px 1.5fr 1fr auto;
    gap: 0.85rem;
    align-items: end;
}

.document-type-create-grid .admin-field {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin: 0;
    min-width: 0;
}

.document-type-create-action {
    display: flex;
    align-items: flex-end;
    margin: 0;
}

.document-type-record {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    gap: 0.85rem;
    padding: 1.15rem 1.4rem;
    box-sizing: border-box;
    width: 100%;
}

.record-type-label {
    flex: 0 0 150px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.4rem;
    align-self: center;
    min-width: 150px;
    color: #40536f;
    font-size: 0.82rem;
}

.record-type-label small {
    color: #68778d;
    line-height: 1.35;
}

.document-type-edit {
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: 140px 1.5fr 1fr auto;
    gap: 0.75rem;
    align-items: end;
    margin: 0;
    min-width: 0;
}

.document-type-edit .admin-field {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin: 0;
    min-width: 0;
}

.document-type-toggle {
    flex: 0 0 auto;
    display: flex;
    align-items: flex-end;
    margin: 0;
}

/* Enforce exact 46px height on all inputs, selects, and buttons for perfect horizontal alignment */
.document-type-create-grid .admin-field input,
.document-type-create-grid .admin-field select,
.document-type-create-action .button,
.document-type-edit .admin-field input,
.document-type-edit .admin-field select,
.document-type-edit .button,
.document-type-toggle .button {
    height: 46px;
    min-height: 46px;
    max-height: 46px;
    box-sizing: border-box;
    border-radius: 12px;
    font-size: 0.88rem;
}

.document-type-create-action .button,
.document-type-edit .button,
.document-type-toggle .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    white-space: nowrap;
    margin: 0;
}

.document-type-create-action .button {
    padding: 0 1.5rem;
}

.document-type-edit .button,
.document-type-toggle .button {
    padding: 0 1.25rem;
}

@media (max-width: 960px) {
    .document-type-create-grid {
        grid-template-columns: 1fr 1fr;
    }
    .document-type-create-action {
        grid-column: 1 / -1;
    }
    .document-type-create-action .button {
        width: 100%;
    }
    .document-type-record {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
    }
    .record-type-label {
        flex: none;
        width: 100%;
        align-self: flex-start;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
    .document-type-edit {
        grid-template-columns: 1fr 1fr;
    }
    .document-type-edit .button {
        grid-column: 1 / -1;
        width: 100%;
    }
    .document-type-toggle {
        width: 100%;
    }
    .document-type-toggle .button {
        width: 100%;
    }
}

@media (max-width: 600px) {
    .document-type-create-grid {
        grid-template-columns: 1fr;
    }
    .document-type-edit {
        grid-template-columns: 1fr;
    }
}
.confirm-enrollment { display: flex; gap: .7rem; align-items: flex-start; margin: 1rem 0; color: #3e536f; font-size: .86rem; line-height: 1.55; }
.confirm-enrollment input, .requirement-option input { width: 20px; height: 20px; flex: 0 0 auto; accent-color: #1756a8; }
.requirement-form { width: min(840px, 100%); }
.requirement-group { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .65rem; margin: 0 0 1.1rem; padding: .85rem; border: 1px solid #d8e2ef; border-radius: 16px; }
.requirement-group legend { padding: 0 .35rem; color: #28466f; font-weight: 700; }
.requirement-option { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: .2rem .6rem; align-items: center; padding: .65rem; border-radius: 12px; background: rgb(255 255 255 / 73%); color: #354b69; }
.requirement-option small { grid-column: 2; color: #6c7b91; font-size: .72rem; }
.requirement-option.is-disabled { opacity: .58; }
.profile-main { width: min(960px, calc(100% - 2.5rem)); scroll-margin-top: 1.5rem; }
.profile-page .site-header { position: absolute; }
.profile-main .admin-heading { align-items: center; }
.profile-main .form-card { width: 100%; max-width: none; min-width: 0; margin: 1rem 0 0; padding: clamp(1rem, 3vw, 2rem); border-color: rgb(255 255 255 / 88%); background: linear-gradient(145deg, rgb(255 255 255 / 82%), rgb(241 247 255 / 72%) 58%, rgb(232 241 255 / 70%)); -webkit-backdrop-filter: blur(22px) saturate(150%); backdrop-filter: blur(22px) saturate(150%); box-shadow: 0 24px 60px rgb(28 52 89 / 11%), inset 0 1px 0 #fff; }
.profile-form-section { padding: clamp(.9rem, 2.5vw, 1.35rem); border: 1px solid rgb(255 255 255 / 82%); border-radius: 20px; background: linear-gradient(145deg, rgb(255 255 255 / 66%), rgb(249 251 255 / 56%)); box-shadow: inset 0 1px 0 rgb(255 255 255 / 88%), 0 8px 20px rgb(31 58 98 / 4%); }
.profile-section-heading { display: flex; gap: .8rem; align-items: flex-start; margin-bottom: 1rem; }
.profile-section-icon { display: grid; width: 38px; height: 38px; flex: 0 0 38px; place-items: center; border: 1px solid rgb(255 255 255 / 90%); border-radius: 13px; background: linear-gradient(145deg, #fff, #e8f1ff); box-shadow: inset 0 1px 0 #fff, 0 5px 14px rgb(39 77 131 / 10%); color: #24579c; font-size: .69rem; font-weight: 750; }
.profile-section-heading h2 { margin: 0; color: #213c61; font-size: 1rem; letter-spacing: -.01em; }
.profile-section-heading p { margin: .25rem 0 0; color: #65758d; font-size: .79rem; line-height: 1.5; }
.profile-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 1rem; }
.profile-grid > * { min-width: 0; }
.profile-grid [hidden] { display: none !important; }
.profile-status-grid.is-non-asn { grid-template-columns: minmax(0, 1fr); }
.profile-status-grid.is-non-asn > .admin-field { max-width: 460px; }
.profile-main .admin-field input:not([type="checkbox"]), .profile-main .admin-field select { box-sizing: border-box; width: 100%; min-width: 0; height: 46px; min-height: 46px; padding: 0 .8rem; border-radius: 12px; font-size: .9rem; line-height: 1.35; }
.profile-main .admin-field input::placeholder { color: #8492a7; opacity: 1; }
.profile-main .admin-field input:focus-visible, .profile-main .admin-field select:focus-visible { outline: 0; border-color: #4e7fc2; box-shadow: 0 0 0 3px rgb(21 86 176 / 22%); }
.profile-main .admin-field textarea { box-sizing: border-box; min-height: 112px; padding: .7rem .8rem; border-radius: 12px; line-height: 1.5; }
.profile-main .admin-field input[readonly] { border-color: #dce5f0; background: rgb(230 237 247 / 70%); color: #596b83; cursor: not-allowed; }
.profile-main .admin-field input:hover:not([readonly]), .profile-main .admin-field select:hover, .profile-main .admin-field textarea:hover { border-color: #a9bfde; }
.profile-main .admin-field input:disabled, .profile-main .admin-field select:disabled { background: #edf1f7; color: #748198; cursor: not-allowed; }
.profile-nip-field { align-content: start; }
.profile-nip-field > label { color: #334863; font-size: .84rem; font-weight: 650; }
.profile-reason-section .admin-field { max-width: none; }
.profile-main .admin-form-actions { padding-top: .25rem; }
@media (max-width: 620px) {
    .profile-main { width: min(100% - 1.5rem, 1040px); }
    .profile-grid { grid-template-columns: 1fr; gap: .9rem; }
    .profile-form-section { border-radius: 17px; }
    .profile-main .form-card { border-radius: 21px; }
}
@media (prefers-reduced-transparency: reduce) {
    .profile-main .form-card, .profile-form-section { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .profile-main .form-card, .profile-form-section { background: #f8faff; }
}
@media (max-width: 760px) {
    .admin-nav-shell, .admin-main { width: min(100% - 1.5rem, 1120px); }
    .admin-nav-shell { margin-top: 7.2rem; }
    .admin-main { padding-top: 0; }
    .work-submission-main.admin-main { width: min(100% - 1.5rem, 1020px); padding: 7.2rem 0 3rem; }
    .submission-output-grid, .submission-support-grid { grid-template-columns: 1fr; }
    .submission-completion { align-items: stretch; flex-direction: column; }
    .submission-completion .admin-form-actions { justify-content: flex-start; }
    .admin-record { grid-template-columns: minmax(0, 1fr) auto; }
    .admin-record > .button, .admin-record > form { grid-column: 1 / -1; }
    .cohort-edit-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cohort-edit-description { grid-column: 1 / -1; }
    .document-type-record { grid-template-columns: 1fr; }
    .work-submission-main.admin-main { padding-top: 7.5rem; }
    .submission-completion { align-items: stretch; flex-direction: column; }
    .submission-completion .admin-form-actions { flex-wrap: wrap; }
}
@media (max-width: 520px) {
    .admin-section-nav { justify-content: center; gap: .25rem; padding: .32rem; }
    .admin-section-nav a { min-height: 42px; padding-inline: .55rem; font-size: .74rem; }
    .member-history-row { grid-template-columns: minmax(0, 1fr) auto; }
    .member-history-row span:nth-child(2) { grid-column: 1; }
    .member-submission-row { grid-template-columns: auto minmax(0, 1fr); gap: .75rem; }
    .member-item-status-wrap { grid-column: 1 / -1; justify-content: flex-start; }
    .member-submission-heading { align-items: flex-start; flex-direction: column; gap: .5rem; }
    .member-submission-heading .status-pill { align-self: flex-start; }
    .member-submission-action { justify-content: stretch; }
    .member-submission-action .button { width: 100%; justify-content: center; }
    .work-submission-main.admin-main { padding-top: 7.35rem; }
    .submission-hero h1 { font-size: clamp(1.95rem, 9vw, 2.35rem); }
    .submission-hero-description { max-width: 34ch; font-size: .86rem; }
    .submission-enrollment { gap: .35rem; }
    .submission-enrollment > span { min-height: 28px; font-size: .68rem; }
    .work-submission-form { padding: 1rem; border-radius: 22px; }
    .work-submission-intro { align-items: flex-start; flex-direction: column; gap: .4rem; }
    .submission-section { gap: .8rem; padding: 1rem 0; }
    .submission-metadata-grid, .submission-support-grid { grid-template-columns: minmax(0, 1fr); gap: .8rem; }
    .submission-classification-grid { grid-template-columns: minmax(0, 1fr); gap: .8rem; }
    .submission-field-wide { grid-column: auto; }
    .submission-enrollment-field.submission-field-wide small { margin-left: 0; }
    .submission-upload-visual { align-items: flex-start; gap: .7rem; }
    .submission-cover-preview { flex-basis: 68px; width: 68px; height: 82px; }
    .submission-upload-copy > small { overflow-wrap: anywhere; }
    .submission-output-grid { grid-template-columns: minmax(0, 1fr); }
    .submission-completion .admin-form-actions { display: grid; grid-template-columns: 1fr; }
    .submission-completion .button { width: 100%; }
    .submission-completion { margin-bottom: .4rem; padding: .85rem; }
    .submission-step { flex-basis: 28px; width: 28px; height: 28px; border-radius: 10px; }
    .audit-values, .document-type-edit, .cohort-edit-form, .cohort-create-grid, .program-form { grid-template-columns: 1fr; }
    .cohort-description-field, .cohort-edit-description { grid-column: auto; }
    .program-description-field, .program-form > .admin-errors, .program-form > .admin-form-actions { grid-column: auto; }
    .training-page-heading { align-items: stretch; }
    .admin-program-record { grid-template-columns: minmax(0, 1fr); }
    .admin-program-record > .status-pill { justify-self: start; }
    .cohort-form-heading, .cohort-record-heading { align-items: flex-start; flex-direction: column; }
    .cohort-form-heading > p { text-align: left; }
    .cohort-record-status { width: 100%; justify-content: space-between; }
    .cohort-page-actions { width: 100%; justify-content: flex-start; }
    .candidate-row { grid-template-columns: minmax(0, 1fr); }
    .candidate-enroll-form { justify-content: flex-start; }
    .inline-search { align-items: stretch; }
    .inline-search .button { flex: 1 1 auto; }
}
@media (prefers-reduced-motion: reduce) {
    .admin-section-nav a, .admin-record, .form-card { scroll-behavior: auto; transition: none; }
    .work-submission-form *, .submission-upload, .submission-submit span { transition: none !important; }
    .submission-submit:hover span { transform: none; }
}
@media (prefers-reduced-transparency: reduce) {
    .admin-section-nav, .admin-record, .form-card, .admin-panel, .inline-search { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; }
    .work-submission-form { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .admin-section-nav, .admin-record, .form-card, .admin-panel, .inline-search { background: #f7faff; }
    .work-submission-form { background: #f7faff; }
}

/* Task 14B: Liquid Glass staff shell and editorial dashboard. */
body.staff-dashboard-page { background: radial-gradient(ellipse at 50% -20%, #eaf2ff 0, transparent 50%), #f7f9fd; }
.admin-page .site-header { position: fixed; z-index: 12; top: .8rem; padding-inline: 4vw; }
.admin-page .nav-shell { width: min(1200px, 100%); min-height: 66px; padding: .45rem .8rem .45rem .9rem; border: 1px solid var(--liquid-edge); background: linear-gradient(145deg, rgb(255 255 255 / 77%), rgb(241 247 255 / 65%)); box-shadow: inset 0 1px 0 #fff, 0 12px 32px rgb(33 58 96 / 8%); -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%); }
.admin-page .brand { flex: 0 0 auto; gap: .6rem; }
.admin-page .brand-mark { width: 36px; height: 36px; border: 1px solid rgb(255 255 255 / 52%); border-radius: 12px; background: linear-gradient(145deg, #2869bd, #174a96); box-shadow: inset 0 1px 0 rgb(255 255 255 / 38%), 0 4px 9px rgb(25 74 145 / 16%); }
.admin-page .product-segmented { flex: 0 1 330px; }
.admin-page .product-segmented-link[aria-current="page"] { color: #123f88; font-weight: 700; }
.admin-page .product-segmented-link:focus-visible { outline-offset: -2px; }
.admin-page .nav-account { gap: .25rem; padding: .22rem; border: 1px solid rgb(255 255 255 / 76%); border-radius: var(--radius-pill); background: rgb(255 255 255 / 42%); box-shadow: inset 0 1px 0 rgb(255 255 255 / 80%); }
.admin-page .nav-account-name { max-width: 135px; padding-inline: .4rem; color: #314b6b; font-size: .75rem; }
.admin-page .nav-account-admin, .admin-page .nav-account-logout { min-height: 40px; padding-inline: .75rem; border-color: transparent; background: transparent; color: #3e5675; transition: color var(--duration-liquid) ease, background var(--duration-liquid) ease; }
.admin-page .nav-account-admin { color: #174ea6; font-weight: 700; }
.admin-page .nav-account-admin:hover, .admin-page .nav-account-logout:hover { background: rgb(255 255 255 / 78%); color: #123f88; }
.admin-page .nav-account-admin:focus-visible, .admin-page .nav-account-logout:focus-visible { outline: 2px solid #1556b0; outline-offset: 1px; }
.member-page .site-header { position: fixed; z-index: 12; top: .8rem; padding-inline: 4vw; }
.member-page .nav-shell { width: min(1200px, 100%); min-height: 66px; padding: .45rem .8rem .45rem .9rem; border: 1px solid var(--liquid-edge); background: linear-gradient(145deg, rgb(255 255 255 / 80%), rgb(241 247 255 / 73%)); box-shadow: inset 0 1px 0 #fff, 0 12px 32px rgb(33 58 96 / 8%); -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%); }
.member-page .nav-shell { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 330px) auto; grid-template-areas: "brand products account"; gap: 1rem; }
.member-page .brand { grid-area: brand; }
.member-page .product-segmented { grid-area: products; justify-self: center; }
.member-page .nav-account { grid-area: account; }
.member-page .brand { flex: 0 0 auto; gap: .6rem; }
.member-page .brand-mark { width: 36px; height: 36px; border: 1px solid rgb(255 255 255 / 52%); border-radius: 12px; background: linear-gradient(145deg, #2869bd, #174a96); box-shadow: inset 0 1px 0 rgb(255 255 255 / 38%), 0 4px 9px rgb(25 74 145 / 16%); }
.member-page .product-segmented { flex: 0 1 330px; }
.member-page .product-segmented-link[aria-current="page"] { color: #123f88; font-weight: 700; }
.member-page .nav-account { gap: .25rem; padding: .22rem; border: 1px solid rgb(255 255 255 / 76%); border-radius: var(--radius-pill); background: rgb(255 255 255 / 42%); box-shadow: inset 0 1px 0 rgb(255 255 255 / 80%); }
.member-page .nav-account-name { max-width: 135px; padding-inline: .4rem; color: #314b6b; font-size: .75rem; }
.member-page .nav-account-admin, .member-page .nav-account-logout { min-height: 40px; padding-inline: .75rem; border-color: transparent; background: transparent; color: #3e5675; }
.member-page .nav-account-admin { color: #174ea6; font-weight: 700; }
.member-page .nav-account-admin:hover, .member-page .nav-account-logout:hover { background: rgb(255 255 255 / 78%); color: #123f88; }
.member-page .nav-account-admin:focus-visible, .member-page .nav-account-logout:focus-visible, .member-page .product-segmented-link:focus-visible { outline: 2px solid #1556b0; outline-offset: 1px; }
.member-page .product-segmented { position: relative; isolation: isolate; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; min-height: 44px; padding: 3px; border: 1px solid rgb(255 255 255 / 85%); border-radius: 999px; background: rgb(220 231 247 / 56%); box-shadow: inset 0 1px 2px rgb(30 55 91 / 8%); }
.member-page .product-segmented-indicator { position: absolute; z-index: -1; top: 3px; bottom: 3px; left: 3px; width: calc(50% - 3px); border: 1px solid rgb(255 255 255 / 96%); border-radius: 999px; background: linear-gradient(145deg, #fff, #f0f5fd); box-shadow: inset 0 1px 0 #fff, 0 3px 9px rgb(36 63 102 / 11%); transform: translateX(0); transition: transform 240ms var(--ease-liquid); view-transition-name: member-product-pill; }
.member-page .product-segmented[data-active="kolase"] .product-segmented-indicator { transform: translateX(100%); }
.member-page .product-segmented-link { position: relative; z-index: 1; display: flex; min-height: 38px; align-items: center; justify-content: center; gap: .45rem; padding: .4rem .7rem; border-radius: 999px; color: #526781; font-size: .76rem; font-weight: 650; text-decoration: none; white-space: nowrap; }
.member-page .product-segmented-link svg { width: 17px; height: 17px; flex: 0 0 17px; }
.admin-nav-shell .admin-section-nav:focus-within { scroll-margin-top: 5.6rem; }
.staff-dashboard-intro { max-width: 900px; margin: 0 0 2.15rem; }
.staff-dashboard-intro .eyebrow { margin: 0 0 .55rem; color: #58759b; font-size: .66rem; letter-spacing: .16em; }
.staff-dashboard-intro h1 { margin: 0; color: #14213a; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Inter", "Segoe UI", Roboto, sans-serif; font-size: clamp(2.35rem, 4.5vw, 3.55rem); font-weight: 700; letter-spacing: -.035em; line-height: 1.05; }
.staff-dashboard-intro > p:last-child { max-width: 680px; margin: .8rem 0 0; color: #596a82; font-size: .98rem; line-height: 1.65; }
.staff-dashboard-flash { margin: -0.65rem 0 1.35rem; border-color: rgb(122 186 149 / 36%); background: rgb(240 250 244 / 76%); box-shadow: inset 0 1px 0 rgb(255 255 255 / 88%), 0 7px 18px rgb(45 105 71 / 5%); }
.staff-dashboard-section { margin: 2rem 0 2.6rem; }
.staff-dashboard-section-heading { display: flex; align-items: end; justify-content: space-between; gap: 1.4rem; margin-bottom: .95rem; }
.staff-dashboard-section-heading .eyebrow { margin: 0 0 .3rem; color: #6681a2; font-size: .63rem; letter-spacing: .15em; }
.staff-dashboard-section-heading h2 { margin: 0; color: #1a3151; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Inter", "Segoe UI", Roboto, sans-serif; font-size: clamp(1.6rem, 2.7vw, 2rem); font-weight: 650; letter-spacing: -.025em; line-height: 1.2; }
.staff-dashboard-section-heading > p { max-width: 410px; margin: 0; color: #6a7b92; font-size: .78rem; line-height: 1.5; text-align: right; }
.liquid-surface { border: 1px solid rgb(255 255 255 / 88%); background: linear-gradient(135deg, rgb(255 255 255 / 76%), rgb(241 247 255 / 64%)); box-shadow: inset 0 1px 0 #fff, 0 12px 30px rgb(34 59 97 / 6%); -webkit-backdrop-filter: blur(16px) saturate(145%); backdrop-filter: blur(16px) saturate(145%); }
.staff-dashboard-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: hidden; border-radius: 22px; }
.committee-dashboard-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.staff-stat { display: grid; min-width: 0; align-content: start; gap: .42rem; padding: 1.15rem 1.3rem 1.25rem; }
.staff-stat + .staff-stat { border-left: 1px solid rgb(112 137 171 / 15%); }
.staff-stat-label { color: #52657f; font-size: .77rem; font-weight: 650; }
.staff-stat-value { color: #174a91; font-size: clamp(2.3rem, 4vw, 3.05rem); font-variant-numeric: tabular-nums; font-weight: 560; letter-spacing: -.075em; line-height: .98; }
.staff-stat-note { color: #697b92; font-size: .72rem; line-height: 1.45; }
.staff-dashboard-actions { overflow: hidden; border-radius: 23px; }
.staff-action-row { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: .95rem; min-width: 0; padding: .95rem 1.1rem; transition: background var(--duration-liquid) ease; }
.staff-action-row + .staff-action-row { border-top: 1px solid rgb(112 137 171 / 14%); }
.staff-action-row:hover { background: rgb(255 255 255 / 38%); }
.staff-action-primary { background: linear-gradient(100deg, rgb(227 239 255 / 48%), transparent 58%); }
.staff-action-access { background: rgb(247 250 255 / 42%); }
.staff-action-icon { display: grid; width: 42px; height: 42px; place-items: center; border: 1px solid rgb(255 255 255 / 94%); border-radius: 14px; background: linear-gradient(145deg, #fff, #edf4ff); box-shadow: inset 0 1px 0 #fff, 0 4px 11px rgb(39 77 131 / 8%); color: #2e5d9d; }
.staff-action-icon svg { width: 21px; height: 21px; }
.staff-action-copy { min-width: 0; }
.staff-action-index { color: #6c82a0; font-size: .61rem; font-weight: 750; letter-spacing: .13em; }
.staff-action-copy h3 { margin: .15rem 0 .12rem; color: #203958; font-size: .98rem; font-weight: 660; letter-spacing: -.015em; line-height: 1.35; }
.staff-action-copy p { margin: 0; color: #64758c; font-size: .77rem; line-height: 1.5; }
.staff-action-row > a { display: inline-flex; min-height: 44px; align-items: center; justify-content: flex-end; gap: .55rem; padding: .35rem .25rem .35rem .8rem; border-radius: var(--radius-pill); color: #174ea6; font-size: .78rem; font-weight: 700; white-space: nowrap; transition: color var(--duration-liquid) ease, background var(--duration-liquid) ease; }
.staff-action-row > a:hover { background: rgb(255 255 255 / 72%); color: #103f80; }
.staff-action-arrow { display: grid; width: 28px; height: 28px; place-items: center; border: 1px solid rgb(23 78 166 / 13%); border-radius: 50%; background: rgb(255 255 255 / 70%); font-size: 1rem; }
.staff-action-row > a:focus-visible { outline: 3px solid rgb(21 86 176 / 30%); outline-offset: 2px; }
.committee-cohort-row { grid-template-columns: 44px minmax(0, 1fr) auto; }
.committee-cohort-empty { display: flex; align-items: center; gap: .9rem; padding: 1.1rem 1.2rem; }
.committee-cohort-empty h3 { margin: 0 0 .2rem; color: #203958; font-size: .95rem; }
.committee-cohort-empty p { margin: 0; color: #64758c; font-size: .78rem; line-height: 1.5; }
@media (max-width: 900px) {
    .staff-dashboard-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .committee-dashboard-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .committee-dashboard-stats .staff-stat:nth-child(3) { grid-column: 1 / -1; }
    .staff-stat:nth-child(3) { border-left: 0; border-top: 1px solid rgb(112 137 171 / 15%); }
    .staff-stat:nth-child(4) { border-top: 1px solid rgb(112 137 171 / 15%); }
}
@media (max-width: 760px) {
    .member-page .site-header { top: .5rem; padding-inline: .75rem; }
    .member-page .nav-shell { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "brand account" "products products"; gap: .45rem .55rem; min-height: 0; padding: .48rem .55rem .52rem; border-radius: 21px; }
    .member-page .brand { grid-area: brand; }
    .member-page .product-segmented { grid-area: products; justify-self: stretch; width: 100%; }
    .member-page .product-segmented-link { min-height: 40px; font-size: .76rem; }
    .member-page .nav-account { grid-area: account; max-width: 100%; }
    .member-page .nav-account-name { max-width: 78px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .member-page .nav-account-admin, .member-page .nav-account-logout { min-height: 36px; padding-inline: .55rem; font-size: .68rem; }
    .member-page .brand-copy strong { font-size: .76rem; }
    .member-page .brand-copy span { font-size: .62rem; }
    .member-page .brand-mark { width: 32px; height: 32px; }
    .member-page .product-segmented-link { min-height: 38px; }
    .admin-page .nav-account { gap: .15rem; }
    .admin-page .nav-account-name { max-width: 90px; }
    .admin-section-nav { top: 5.35rem; }
    .staff-dashboard-section-heading { align-items: start; }
}
@media (max-width: 600px) {
    .member-page .site-header { top: .5rem; padding-inline: .75rem; }
    .admin-page .site-header { top: .5rem; padding-inline: 4vw; }
    .admin-page .nav-shell { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "brand account" "products products"; gap: .45rem .55rem; min-height: 0; padding: .48rem .55rem .52rem; border-radius: 21px; }
    .admin-page .brand { grid-area: brand; min-width: 0; }
    .admin-page .brand-copy strong { font-size: .78rem; }
    .admin-page .brand-copy span { font-size: .62rem; }
    .admin-page .product-segmented { grid-area: products; justify-self: center; width: min(100%, 340px); min-height: 46px; margin: 0; }
    .admin-page .product-segmented-link { min-height: 40px; font-size: .76rem; }
    .admin-page .nav-account { grid-area: account; justify-self: end; max-width: 100%; }
    .admin-page .nav-account-admin, .admin-page .nav-account-logout { min-height: 38px; padding-inline: .55rem; font-size: .68rem; }
    .admin-nav-shell { margin-top: 8.75rem; }
    .admin-section-nav { top: 8.25rem; margin-bottom: 1.35rem; }
    .staff-dashboard-intro { margin-bottom: 1.7rem; }
    .staff-dashboard-intro .eyebrow { font-size: .59rem; }
    .staff-dashboard-intro h1 { font-size: clamp(2.15rem, 9vw, 2.8rem); }
    .staff-dashboard-intro > p:last-child { margin-top: .6rem; font-size: .9rem; }
    .staff-dashboard-section { margin: 1.7rem 0 2.1rem; }
    .staff-dashboard-section-heading { display: block; margin-bottom: .75rem; }
    .staff-dashboard-section-heading > p { margin-top: .4rem; text-align: left; }
    .staff-stat { gap: .35rem; padding: .95rem .9rem 1rem; }
    .staff-stat:nth-child(3) { border-left: 0; }
    .staff-stat-value { font-size: clamp(2rem, 10vw, 2.65rem); }
    .staff-stat-label { font-size: .72rem; }
    .staff-stat-note { font-size: .68rem; }
    .staff-action-row { grid-template-columns: 38px minmax(0, 1fr); gap: .65rem .75rem; padding: .85rem .8rem; }
    .committee-dashboard-stats { grid-template-columns: minmax(0, 1fr); }
    .committee-dashboard-stats .staff-stat:nth-child(3) { grid-column: auto; }
    .committee-dashboard-stats .staff-stat + .staff-stat { border-top: 1px solid rgb(112 137 171 / 15%); border-left: 0; }
    .committee-cohort-row { grid-template-columns: 38px minmax(0, 1fr); }
    .committee-cohort-row > a { grid-column: 2; justify-content: flex-start; min-height: 40px; margin-top: -.35rem; padding-left: 0; }
    .committee-cohort-empty { align-items: flex-start; padding: .95rem .8rem; }
    .staff-action-icon { width: 36px; height: 36px; border-radius: 12px; }
    .staff-action-icon svg { width: 19px; height: 19px; }
    .staff-action-row > a { grid-column: 2; justify-content: flex-start; min-height: 40px; margin-top: -.35rem; padding-left: 0; font-size: .75rem; }
    .staff-action-arrow { width: 25px; height: 25px; }
    .staff-action-copy h3 { font-size: .92rem; }
    .staff-action-copy p { font-size: .74rem; }
}
::view-transition-group(admin-active-pill) { animation-duration: 260ms; animation-timing-function: var(--ease-liquid); }
@media (prefers-reduced-motion: reduce) {
    .product-segmented-indicator, .product-segmented-link, .admin-page .nav-account-admin, .admin-page .nav-account-logout, .admin-section-nav a, .staff-action-row, .staff-action-row > a { transition: none; }
    ::view-transition-group(product-segmented-indicator) { animation-duration: .01ms; }
    ::view-transition-group(admin-active-pill) { animation-duration: .01ms; }
}
@media (prefers-reduced-transparency: reduce) {
    .admin-page .nav-shell, .admin-page .nav-account, .admin-section-nav, .liquid-surface { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; }
    .admin-section-nav { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; }
    .admin-section-nav a[aria-current="page"]::before { background: #eaf1fb; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .admin-page .nav-shell, .admin-section-nav, .liquid-surface { background: #f7faff; }
    .admin-section-nav { background: #f7faff; }
}
/* Per-cohort task requirements and submission monitoring */
.cohort-task-configuration,
.cohort-task-summary {
    margin: 1.25rem 0;
    padding: clamp(1rem, 2vw, 1.5rem);
    border: 1px solid rgba(210, 222, 240, .9);
    border-radius: 1.25rem;
    background: rgba(255, 255, 255, .76);
    box-shadow: 0 12px 32px rgba(35, 62, 104, .08);
}
.cohort-task-heading,
.cohort-task-summary,
.cohort-task-summary > div:first-child {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}
.cohort-task-heading h3,
.cohort-task-summary h2 { margin: .15rem 0 .4rem; }
.cohort-task-heading p,
.cohort-task-summary p { margin: 0; color: var(--text-muted, #596a82); }
.cohort-task-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 1rem; }
.cohort-task-option { min-width: 0; margin: 0; padding: 1rem; border: 1px solid #dfe6f0; border-radius: 1rem; background: rgba(255,255,255,.84); }
.cohort-task-option legend { width: 100%; padding: 0; }
.cohort-task-choice { display: flex; align-items: flex-start; gap: .7rem; cursor: pointer; }
.cohort-task-choice input { width: 1.15rem; height: 1.15rem; margin: .2rem 0 0; accent-color: #1556b0; }
.cohort-task-choice span { display: grid; gap: .2rem; }
.cohort-task-choice small { color: var(--text-muted, #596a82); }
.cohort-task-option .admin-field { margin-top: .8rem; }
.cohort-task-option textarea { resize: vertical; }
.cohort-task-summary { align-items: center; }
.cohort-progress-counts { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: flex-end; }
.cohort-progress-counts span { display: grid; min-width: 105px; gap: .15rem; padding: .7rem .85rem; border: 1px solid #dfe6f0; border-radius: .9rem; background: rgba(255,255,255,.78); color: #33445e; font-size: .8rem; }
.cohort-progress-counts strong { color: #14213a; font-size: 1.2rem; }
.cohort-roster-card { align-items: flex-start; }
.cohort-roster-progress { display: grid; flex: 1; min-width: 0; gap: .55rem; }
.cohort-roster-progress > .status-pill { justify-self: start; }
.cohort-requirement-status { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .3rem .7rem; padding: .55rem .7rem; border: 1px solid #e1e8f1; border-radius: .8rem; background: rgba(255,255,255,.65); }
.cohort-requirement-status > span { min-width: 0; overflow-wrap: anywhere; color: #34445d; font-size: .88rem; }
.cohort-requirement-status > a,
.cohort-requirement-status > small { grid-column: 1 / -1; }
.cohort-requirement-status > a { color: #1556b0; font-size: .82rem; font-weight: 650; }
.cohort-requirement-status > small { color: #6a4b16; }
@media (max-width: 760px) {
    .cohort-task-options { grid-template-columns: minmax(0, 1fr); }
    .cohort-task-summary { align-items: stretch; flex-direction: column; }
    .cohort-progress-counts { justify-content: stretch; }
    .cohort-progress-counts span { flex: 1 1 125px; }
    .cohort-roster-card { display: grid; grid-template-columns: minmax(0, 1fr); }
    .cohort-roster-card > form { justify-self: start; }
}
@media (max-width: 420px) {
    .cohort-task-heading { flex-direction: column; }
    .cohort-requirement-status { grid-template-columns: minmax(0, 1fr); }
    .cohort-requirement-status > .status-pill { justify-self: start; }
}
@media (prefers-reduced-transparency: reduce) {
    .cohort-task-configuration, .cohort-task-summary, .cohort-task-option,
    .cohort-progress-counts span, .cohort-requirement-status { background: #fff; }
}


/* Task 17B: Immersive Fullscreen Flipbook Reader & Presentation Viewer */
.kolase-reader-immersive, .kolase-viewer-page {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    background: #0a0f16;
    background: radial-gradient(circle at 50% 35%, #151d29 0%, #0a0f16 100%);
    color: #e4ecf7;
    z-index: 99999;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Top Header Bar */
.reader-top-bar, .viewer-header {
    height: 58px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1.25rem;
    background: rgba(10, 15, 22, 0.92);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    z-index: 100;
}
.reader-top-left {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    min-width: 0;
}
.reader-back-btn, .back-button {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: #a8bcd4;
    text-decoration: none;
    font-size: 0.84rem;
    font-weight: 500;
    padding: 0.35rem 0.75rem;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: background 160ms ease, color 160ms ease;
    white-space: nowrap;
}
.reader-back-btn:hover, .back-button:hover {
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
}
.reader-bar-divider {
    width: 1px;
    height: 24px;
    background: rgba(255, 255, 255, 0.12);
}
.reader-meta-group {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.reader-title, .viewer-title {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 520px;
    line-height: 1.25;
}
.reader-subtitle, .viewer-byline {
    margin: 0.1rem 0 0;
    font-size: 0.76rem;
    color: #8da4be;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.reader-subtitle .sep { opacity: 0.45; }
.reader-badge {
    display: inline-flex;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 600;
    background: rgba(43, 112, 201, 0.25);
    color: #7ab2f3;
    border: 1px solid rgba(43, 112, 201, 0.35);
}
.reader-badge.badge-sample {
    background: rgba(217, 119, 6, 0.2);
    color: #fbbd23;
    border-color: rgba(217, 119, 6, 0.35);
}
.reader-top-right {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}
.reader-action-btn, .toolbar-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    height: 34px;
    padding: 0 0.7rem;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #c8d8ec;
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 150ms ease, color 150ms ease;
}
.reader-action-btn:hover, .toolbar-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
}
.reader-close-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #c8d8ec;
    text-decoration: none;
    font-size: 1rem;
    transition: background 150ms ease, color 150ms ease;
}
.reader-close-btn:hover {
    background: rgba(239, 68, 68, 0.25);
    border-color: rgba(239, 68, 68, 0.4);
    color: #ff9494;
}

/* Center Stage Area */
.reader-stage-container, .flipbook-container, .reader-center-stage {
    flex: 1;
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    outline: none;
}
.reader-nav-zone {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 16%;
    border: none;
    background: transparent;
    cursor: pointer;
    z-index: 10;
}
.reader-nav-zone.zone-prev { left: 0; }
.reader-nav-zone.zone-next { right: 0; }

.reader-status-box, .flipbook-state-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 2.5rem 1.5rem;
    color: #dbe6f5;
    z-index: 5;
}
.reader-spinner {
    width: 44px;
    height: 44px;
    border: 3px solid rgba(255, 255, 255, 0.15);
    border-top-color: #4d93e8;
    border-radius: 50%;
    animation: spin 0.75s linear infinite;
    margin-bottom: 1rem;
}
.status-title { margin: 0 0 0.3rem; font-size: 1.05rem; font-weight: 500; }
.status-sub { margin: 0; font-size: 0.8rem; color: #7f99b7; }
.reader-error .error-mark { font-size: 2.4rem; color: #f87171; margin-bottom: 0.6rem; }
.reader-error h3 { margin: 0 0 0.4rem; font-size: 1.25rem; color: #fca5a5; }
.reader-error p { margin: 0 0 1.2rem; max-width: 400px; font-size: 0.88rem; color: #dbe6f5; }

/* 3D Paper Flipbook Canvas Stage */
.reader-paper-stage, .flipbook-stage {
    display: flex;
    align-items: center;
    justify-content: center;
    perspective: 2600px;
    width: 100%;
    height: 100%;
    padding: 1rem 3rem 4rem;
    box-sizing: border-box;
}
.paper-book, .flipbook-book {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    transform-style: preserve-3d;
    filter: drop-shadow(0 25px 50px rgba(0, 0, 0, 0.75));
    transition: transform 200ms ease;
}
.paper-crease-shadow {
    position: absolute;
    top: 0;
    bottom: 0;
    left: -6px;
    width: 12px;
    background: linear-gradient(90deg, rgba(0,0,0,0.45) 0%, transparent 100%);
    pointer-events: none;
    z-index: 6;
}
.paper-sheet, .flipbook-page {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 4px 22px rgba(0, 0, 0, 0.45);
}
.sheet-base, .page-base {
    z-index: 1;
}
.slide-canvas {
    display: block;
    max-width: 100%;
    height: auto;
}
.sheet-lighting {
    position: absolute;
    inset: 0;
    pointer-events: none;
    box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.08);
}

/* Flipping Leaf 3D Animations */
.sheet-flipping, .page-flipping {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 5;
    pointer-events: none;
    transform-origin: 0% 50%;
    transform-style: preserve-3d;
    opacity: 0;
    visibility: hidden;
}
.flipping-prep-next {
    opacity: 1;
    visibility: visible;
    transform: rotateY(0deg);
    transition: none;
}
.flipping-turn-next {
    opacity: 1;
    visibility: visible;
    transform: rotateY(-180deg);
    transition: transform 380ms cubic-bezier(0.25, 1, 0.5, 1);
}
.flipping-prep-prev {
    opacity: 1;
    visibility: visible;
    transform: rotateY(-180deg);
    transition: none;
}
.flipping-turn-prev {
    opacity: 1;
    visibility: visible;
    transform: rotateY(0deg);
    transition: transform 380ms cubic-bezier(0.25, 1, 0.5, 1);
}
.leaf-face, .flip-face {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border-radius: 4px;
    overflow: hidden;
}
.face-front { z-index: 2; }
.face-back { transform: rotateY(180deg); z-index: 1; }
.leaf-shadow { position: absolute; inset: 0; pointer-events: none; }
.shadow-front {
    background: linear-gradient(90deg, rgba(0,0,0,0.28) 0%, rgba(0,0,0,0.02) 65%, transparent 100%);
}
.shadow-back {
    background: linear-gradient(270deg, rgba(0,0,0,0.28) 0%, rgba(0,0,0,0.02) 65%, transparent 100%);
}

/* Floating Stage Chevrons */
.reader-chevron, .stage-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(15, 22, 32, 0.7);
    color: #fff;
    font-size: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 15;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: background 180ms ease, transform 180ms ease, opacity 180ms ease;
    line-height: 1;
}
.reader-chevron:hover:not(:disabled), .stage-arrow:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.22);
    transform: translateY(-50%) scale(1.08);
}
.reader-chevron:disabled, .stage-arrow:disabled {
    opacity: 0.15;
    cursor: not-allowed;
}
.chevron-prev, .stage-arrow-prev { left: 1.25rem; }
.chevron-next, .stage-arrow-next { right: 1.25rem; }

/* Floating Bottom Toolbar Pill */
.reader-floating-toolbar {
    position: absolute;
    bottom: 1.25rem;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    pointer-events: none;
    z-index: 25;
}
.toolbar-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.85rem;
    border-radius: 999px;
    background: rgba(14, 21, 31, 0.88);
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    pointer-events: auto;
}
.pill-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    min-width: 32px;
    height: 32px;
    padding: 0 0.55rem;
    border-radius: 999px;
    border: none;
    background: transparent;
    color: #c9d8eb;
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 150ms ease, color 150ms ease;
}
.pill-btn:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
}
.pill-btn:disabled {
    opacity: 0.25;
    cursor: not-allowed;
}
.pill-btn.active {
    background: rgba(43, 112, 201, 0.4);
    color: #8ac0f8;
}
.pill-counter {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0 0.45rem;
    font-size: 0.82rem;
    color: #c9d8eb;
    white-space: nowrap;
}
.pill-counter strong { color: #fff; }
.pill-sep {
    width: 1px;
    height: 18px;
    background: rgba(255, 255, 255, 0.14);
    margin: 0 0.2rem;
}
.pill-zoom-text {
    font-size: 0.76rem;
    font-weight: 600;
    color: #8da4be;
    min-width: 32px;
    text-align: center;
}

/* Slide Thumbnails Drawer */
.reader-thumbnails-drawer {
    position: absolute;
    bottom: 4.8rem;
    left: 50%;
    transform: translateX(-50%);
    width: min(880px, 92vw);
    max-height: 200px;
    border-radius: 18px;
    background: rgba(14, 21, 31, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    z-index: 30;
    padding: 0.9rem 1.1rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
.drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.drawer-title-wrap {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.86rem;
    color: #fff;
}
.drawer-title-wrap span { font-size: 0.76rem; color: #8da4be; }
.drawer-close {
    border: none;
    background: transparent;
    color: #8da4be;
    font-size: 1.1rem;
    cursor: pointer;
    padding: 0.2rem;
    border-radius: 6px;
    transition: color 150ms ease;
}
.drawer-close:hover { color: #fff; }
.drawer-track {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    padding: 0.2rem 0 0.6rem;
    scrollbar-width: thin;
}
.drawer-thumb-item {
    flex: 0 0 auto;
    min-width: 72px;
    height: 48px;
    border-radius: 8px;
    border: 2px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: border-color 150ms ease, transform 150ms ease;
}
.drawer-thumb-item:hover {
    border-color: #4d93e8;
    transform: translateY(-2px);
}
.drawer-thumb-item.active {
    border-color: #3b82f6;
    background: rgba(59, 130, 246, 0.2);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.35);
}
.thumb-page-label {
    font-size: 0.74rem;
    font-weight: 600;
    color: #c9d8eb;
}

/* Info Slide-Out Panel */
.reader-info-panel {
    position: absolute;
    top: 58px;
    right: 0;
    bottom: 0;
    width: min(420px, 92vw);
    background: rgba(13, 19, 28, 0.96);
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    z-index: 45;
    padding: 1.5rem;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 1.4rem;
}
.info-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding-bottom: 0.8rem;
}
.info-panel-header h3 {
    margin: 0;
    font-size: 1.05rem;
    color: #fff;
    font-weight: 600;
}
.info-block h4 {
    margin: 0 0 0.5rem;
    font-size: 0.85rem;
    color: #8da4be;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.info-desc {
    margin: 0;
    color: #dbe6f5;
    font-size: 0.88rem;
    line-height: 1.6;
}
.info-keywords-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}
.info-keyword-pill {
    display: inline-block;
    padding: 0.25rem 0.65rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #8ac0f8;
    font-size: 0.75rem;
    text-decoration: none;
}
.info-details-list {
    display: grid;
    gap: 0.75rem;
    margin: 0;
}
.info-details-list dt {
    font-size: 0.72rem;
    color: #7f99b7;
    text-transform: uppercase;
}
.info-details-list dd {
    margin: 0.1rem 0 0;
    font-size: 0.88rem;
    font-weight: 500;
    color: #fff;
}

/* Fallback Cards inside Immersive Viewport */
.presentation-fallback-card, .sample-fallback-card {
    display: flex;
    gap: 1.8rem;
    align-items: center;
    max-width: 680px;
    width: 90%;
    margin: 0 auto;
    padding: 2.2rem 2.4rem;
    border-radius: 20px;
    background: rgba(18, 25, 36, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(20px);
}
.fallback-icon-wrap, .sample-icon-wrap {
    flex-shrink: 0;
    width: 76px;
    height: 76px;
    border-radius: 18px;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    font-size: 2.5rem;
}
.fallback-content, .sample-content {
    flex: 1;
}
.fallback-content h2, .sample-content h2 {
    margin: 0.4rem 0 0.5rem;
    font-family: Georgia, serif;
    font-size: 1.5rem;
    color: #fff;
    font-weight: 400;
}
.fallback-desc, .sample-desc {
    margin: 0 0 1.2rem;
    color: #a8bcd4;
    font-size: 0.86rem;
    line-height: 1.55;
}
.fallback-btn-group, .sample-btn-group {
    display: flex;
    gap: 0.8rem;
    flex-wrap: wrap;
}

/* Responsive Overrides */
@media (max-width: 768px) {
    .reader-top-bar { height: 52px; padding: 0 0.85rem; }
    .reader-title { max-width: 220px; font-size: 0.88rem; }
    .reader-subtitle { display: none; }
    .btn-text { display: none; }
    .reader-paper-stage { padding: 0.5rem 0.5rem 3.6rem; }
    .reader-chevron { width: 38px; height: 38px; font-size: 1.6rem; }
    .chevron-prev { left: 0.4rem; }
    .chevron-next { right: 0.4rem; }
    .pill-btn-label { display: none; }
    .presentation-fallback-card, .sample-fallback-card { flex-direction: column; text-align: center; padding: 1.6rem; }
    .fallback-btn-group, .sample-btn-group { justify-content: center; }
}

@media (max-width: 440px) {
    .reader-top-bar { padding: 0 0.6rem; }
    .back-label { display: none; }
    .reader-back-btn { padding: 0.35rem 0.5rem; }
    .reader-title { max-width: 170px; }
    .toolbar-pill { padding: 0.35rem 0.6rem; gap: 0.2rem; }
    .pill-btn { min-width: 28px; height: 28px; padding: 0 0.4rem; font-size: 0.74rem; }
    .pill-counter { font-size: 0.74rem; }
}

@media (prefers-reduced-motion: reduce) {
    .sheet-flipping, .page-flipping { transition: none !important; }
    .kolase-book, .album-card { transition: none !important; }
    .album-play-affordance { transition: none !important; }
    .reader-chevron { transition: none !important; }
}

/* ==========================================================================
   TASK 17H: Global Light & Dark Theme System (iOS 26 Liquid Glass)
   ========================================================================== */

/* 1. Global Dark Mode Overrides ([data-theme="dark"]) */
[data-theme="dark"] body {
    background: #0b1018 radial-gradient(ellipse 80% 60% at 50% -10%, rgba(26, 68, 128, 0.16) 0%, rgba(11, 16, 24, 0) 70%) !important;
    background-color: #0b1018 !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .glass {
    background: var(--surface-glass);
    border-color: var(--border-subtle);
    box-shadow: var(--shadow-soft);
}

/* Header & Navigation in Dark Mode */
[data-theme="dark"] .site-header .nav-shell {
    background: rgba(13, 20, 32, 0.82) !important;
    border: 1px solid rgba(255, 255, 255, 0.09) !important;
    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] .site-header .nav-shell::before {
    display: none !important;
}

[data-theme="dark"] .brand-mark {
    background: linear-gradient(145deg, #1d68d8, #104baa) !important;
    box-shadow: 0 2px 10px rgba(29, 104, 216, 0.35) !important;
}

[data-theme="dark"] .brand-copy strong {
    color: #f8fafc !important;
}

[data-theme="dark"] .brand-copy span {
    color: #94a3b8 !important;
}

[data-theme="dark"] .nav-links {
    color: #94a3b8 !important;
}

[data-theme="dark"] .nav-links a:hover,
[data-theme="dark"] .nav-links [aria-current="page"] {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #60a5fa !important;
}

[data-theme="dark"] .product-segmented {
    background: rgba(16, 24, 39, 0.72) !important;
    border-color: rgba(255, 255, 255, 0.09) !important;
}

[data-theme="dark"] .product-segmented-indicator {
    background: rgba(255, 255, 255, 0.12) !important;
    border-color: rgba(255, 255, 255, 0.16) !important;
}

[data-theme="dark"] .product-segmented-link {
    color: #94a3b8 !important;
}

[data-theme="dark"] .product-segmented-link[aria-current="page"] {
    color: #ffffff !important;
}

[data-theme="dark"] .nav-staff-login {
    background: rgba(255, 255, 255, 0.07) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: #cbd5e1 !important;
}

[data-theme="dark"] .nav-staff-login:hover {
    background: rgba(255, 255, 255, 0.14) !important;
    color: #ffffff !important;
}

[data-theme="dark"] .nav-account-admin,
[data-theme="dark"] .nav-account-logout {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: #e2e8f0 !important;
}

[data-theme="dark"] .nav-account-name {
    color: #cbd5e1 !important;
}

/* Repository Hero in Dark Mode */
[data-theme="dark"] .hero {
    background: radial-gradient(ellipse at 83% 30%, rgba(26, 68, 128, 0.22) 0, transparent 40%),
                radial-gradient(ellipse at 5% 90%, rgba(21, 86, 176, 0.18) 0, transparent 40%),
                linear-gradient(120deg, #0b1018 0%, #0e1524 54%, #0b1018 100%) !important;
}

[data-theme="dark"] .hero::after {
    border-color: rgba(255, 255, 255, 0.08) !important;
    background: rgba(255, 255, 255, 0.02) !important;
}

[data-theme="dark"] .hero h1 {
    color: #f8fafc !important;
}

[data-theme="dark"] .hero h1 span {
    color: #60a5fa !important;
}

[data-theme="dark"] .hero-description {
    color: #94a3b8 !important;
}

[data-theme="dark"] .text-link {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: #60a5fa !important;
}

[data-theme="dark"] .text-link:hover {
    background: rgba(255, 255, 255, 0.12) !important;
}

[data-theme="dark"] .hero-art {
    border-color: rgba(255, 255, 255, 0.08) !important;
    background: radial-gradient(circle at 50% 50%, rgba(26, 68, 128, 0.15), rgba(11, 16, 24, 0) 70%) !important;
}

[data-theme="dark"] .art-sun {
    background: radial-gradient(circle at 35% 28%, #1e293b 0, #0f172a 65%, #090e17 100%) !important;
    box-shadow: inset 0 1px 12px rgba(255, 255, 255, 0.1), 0 30px 75px rgba(0, 0, 0, 0.5) !important;
}

[data-theme="dark"] .art-orbit {
    border-color: rgba(59, 130, 246, 0.18) !important;
}

[data-theme="dark"] .book-page {
    background: linear-gradient(90deg, #1e293b 0, #0f172a 100%) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
}

[data-theme="dark"] .art-book::after {
    background: linear-gradient(90deg, #0f172a, #1e293b) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
}

[data-theme="dark"] .art-spark {
    color: #60a5fa !important;
}

[data-theme="dark"] .art-label,
[data-theme="dark"] .hero-meta {
    color: #94a3b8 !important;
}

/* Search Panel & Catalog Controls in Dark Mode */
[data-theme="dark"] .section-heading h2 {
    color: #f8fafc !important;
}

[data-theme="dark"] .section-description,
[data-theme="dark"] .muted-eyebrow {
    color: #94a3b8 !important;
}

[data-theme="dark"] .result-count {
    background: rgba(23, 34, 51, 0.75) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #cbd5e1 !important;
}

[data-theme="dark"] .search-panel {
    background: rgba(17, 26, 39, 0.78) !important;
    border-color: rgba(255, 255, 255, 0.09) !important;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.35) !important;
}

[data-theme="dark"] .search-field {
    background: rgba(23, 34, 51, 0.82) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

[data-theme="dark"] .search-field input {
    color: #f8fafc !important;
}

[data-theme="dark"] .search-field input::placeholder {
    color: #64748b !important;
}

[data-theme="dark"] .filter-field select {
    background-color: rgba(23, 34, 51, 0.82) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: #f1f5f9 !important;
}

[data-theme="dark"] .filter-field select option {
    background: #111a27 !important;
    color: #f1f5f9 !important;
}

[data-theme="dark"] .button-secondary {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: #f1f5f9 !important;
}

[data-theme="dark"] .button-secondary:hover {
    background: rgba(255, 255, 255, 0.12) !important;
    border-color: rgba(255, 255, 255, 0.18) !important;
}

/* Repository Work Cards in Dark Mode */
[data-theme="dark"] .work-card {
    background: rgba(17, 26, 39, 0.82) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35) !important;
}

[data-theme="dark"] .work-card:hover {
    background: rgba(23, 34, 51, 0.92) !important;
    border-color: rgba(66, 133, 244, 0.4) !important;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.48) !important;
}

[data-theme="dark"] .work-card h3 {
    color: #f8fafc !important;
}

[data-theme="dark"] .work-card h3 a {
    color: #f8fafc !important;
}

[data-theme="dark"] .work-card h3 a:hover {
    color: #60a5fa !important;
}

[data-theme="dark"] .work-author {
    color: #cbd5e1 !important;
}

[data-theme="dark"] .work-unit,
[data-theme="dark"] .work-year {
    color: #94a3b8 !important;
}

[data-theme="dark"] .badge {
    background: rgba(59, 130, 246, 0.15) !important;
    border-color: rgba(59, 130, 246, 0.3) !important;
    color: #93c5fd !important;
}

[data-theme="dark"] .card-link {
    color: #60a5fa !important;
}

[data-theme="dark"] .empty-state {
    background: rgba(17, 26, 39, 0.6) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

[data-theme="dark"] .empty-state h3 {
    color: #f8fafc !important;
}

[data-theme="dark"] .empty-state p {
    color: #94a3b8 !important;
}

[data-theme="dark"] .catalog-note strong {
    color: #cbd5e1 !important;
}

[data-theme="dark"] .site-footer,
[data-theme="dark"] .kolase-page .site-footer {
    background: #090e17 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: #94a3b8 !important;
}

[data-theme="dark"] .site-footer .footer-brand strong,
[data-theme="dark"] .kolase-page .footer-brand strong {
    color: #f8fafc !important;
}

[data-theme="dark"] .site-footer .footer-brand span,
[data-theme="dark"] .kolase-page .footer-brand span {
    color: #94a3b8 !important;
}

[data-theme="dark"] .site-footer .footer-inner > p,
[data-theme="dark"] .site-footer p,
[data-theme="dark"] .kolase-page .footer-inner > p {
    color: #cbd5e1 !important;
}

[data-theme="dark"] .site-footer .footer-note,
[data-theme="dark"] .footer-note,
[data-theme="dark"] .kolase-page .footer-note {
    color: #94a3b8 !important;
}

/* Detail Work Page in Dark Mode */
[data-theme="dark"] .detail-main::before {
    background: radial-gradient(ellipse at 18% 12%, rgba(26, 115, 232, 0.12), transparent 45%), radial-gradient(ellipse at 86% 42%, rgba(30, 58, 138, 0.1), transparent 50%) !important;
}

[data-theme="dark"] .detail-article {
    background: linear-gradient(145deg, rgba(17, 26, 39, 0.92), rgba(23, 34, 51, 0.84)) !important;
    border: 1px solid rgba(255, 255, 255, 0.09) !important;
    box-shadow: 0 24px 58px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
    backdrop-filter: blur(24px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(24px) saturate(160%) !important;
    color: #f8fafc !important;
}

[data-theme="dark"] .detail-article h1,
[data-theme="dark"] .repository-page .detail-article h1 {
    color: #f8fafc !important;
}

[data-theme="dark"] .detail-description h2,
[data-theme="dark"] .detail-article h2,
[data-theme="dark"] .repository-page .detail-description h2 {
    color: #f1f5f9 !important;
}

[data-theme="dark"] .detail-lead {
    color: #cbd5e1 !important;
}

[data-theme="dark"] .detail-body,
[data-theme="dark"] .repository-page .detail-body {
    color: #cbd5e1 !important;
}

[data-theme="dark"] .detail-body.detail-unavailable {
    color: #94a3b8 !important;
}

[data-theme="dark"] .detail-kicker,
[data-theme="dark"] .repository-page .detail-kicker {
    color: #94a3b8 !important;
}

[data-theme="dark"] .detail-kicker .badge {
    background: rgba(59, 130, 246, 0.2) !important;
    border: 1px solid rgba(59, 130, 246, 0.35) !important;
    color: #93c5fd !important;
}

[data-theme="dark"] .detail-year,
[data-theme="dark"] .repository-page .detail-year {
    color: #94a3b8 !important;
}

[data-theme="dark"] .detail-byline dt,
[data-theme="dark"] .repository-page .detail-byline dt {
    color: #94a3b8 !important;
}

[data-theme="dark"] .detail-byline dd,
[data-theme="dark"] .repository-page .detail-byline dd {
    color: #f8fafc !important;
}

[data-theme="dark"] .work-keywords {
    color: #94a3b8 !important;
}

[data-theme="dark"] .work-keywords a {
    color: #60a5fa !important;
}

[data-theme="dark"] .work-keywords a:hover {
    color: #93c5fd !important;
}

[data-theme="dark"] .sample-notice {
    background: rgba(217, 119, 6, 0.15) !important;
    border: 1px solid rgba(217, 119, 6, 0.35) !important;
    border-radius: 12px !important;
    padding: 0.6rem 0.9rem !important;
    color: #fbbf24 !important;
}

[data-theme="dark"] .sample-notice span {
    border-color: #fbbf24 !important;
}

[data-theme="dark"] .detail-rule,
[data-theme="dark"] .repository-page .detail-rule {
    background: rgba(255, 255, 255, 0.1) !important;
}

[data-theme="dark"] .metadata-grid {
    border-color: rgba(255, 255, 255, 0.1) !important;
}

[data-theme="dark"] .metadata-grid div {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] .metadata-grid dt {
    color: #94a3b8 !important;
}

[data-theme="dark"] .metadata-grid dd {
    color: #f8fafc !important;
}

[data-theme="dark"] .breadcrumbs {
    color: #94a3b8 !important;
}

[data-theme="dark"] .breadcrumbs a {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.14) !important;
    box-shadow: none !important;
    color: #60a5fa !important;
}

[data-theme="dark"] .breadcrumbs a:hover {
    background: rgba(255, 255, 255, 0.14) !important;
    color: #93c5fd !important;
}

[data-theme="dark"] .breadcrumbs span[aria-current] {
    color: #cbd5e1 !important;
}

[data-theme="dark"] .detail-article .button-secondary,
[data-theme="dark"] .detail-article .back-button,
[data-theme="dark"] .repository-page .back-button {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.14) !important;
    color: #f8fafc !important;
}

[data-theme="dark"] .detail-article .button-secondary:hover,
[data-theme="dark"] .detail-article .back-button:hover,
[data-theme="dark"] .repository-page .back-button:hover {
    background: rgba(255, 255, 255, 0.14) !important;
    border-color: rgba(255, 255, 255, 0.22) !important;
    color: #ffffff !important;
}

/* Task 17J: Document Access Card in Dark Mode */
[data-theme="dark"] .document-locked-card {
    background: linear-gradient(145deg, rgba(23, 34, 51, 0.85), rgba(17, 26, 39, 0.92)) !important;
    border: 1px solid rgba(255, 255, 255, 0.11) !important;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}
[data-theme="dark"] .document-unlocked-card {
    background: linear-gradient(145deg, rgba(16, 36, 28, 0.82), rgba(17, 26, 39, 0.92)) !important;
    border: 1px solid rgba(34, 197, 94, 0.22) !important;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}
[data-theme="dark"] .document-locked-badge {
    background: rgba(59, 130, 246, 0.16) !important;
    border: 1px solid rgba(59, 130, 246, 0.3) !important;
    color: #60a5fa !important;
}
[data-theme="dark"] .document-unlocked-badge {
    background: rgba(34, 197, 94, 0.16) !important;
    border: 1px solid rgba(34, 197, 94, 0.3) !important;
    color: #4ade80 !important;
}
[data-theme="dark"] .document-access-heading {
    color: #f8fafc !important;
}
[data-theme="dark"] .document-access-lead {
    color: #cbd5e1 !important;
}
[data-theme="dark"] .document-access-meta {
    color: #94a3b8 !important;
}
[data-theme="dark"] .document-format-badge {
    background: rgba(59, 130, 246, 0.2) !important;
    color: #93c5fd !important;
}
[data-theme="dark"] .document-login-cta {
    background: #1a73e8 !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    box-shadow: 0 4px 16px rgba(26, 115, 232, 0.4) !important;
}
[data-theme="dark"] .document-login-cta:hover {
    background: #2563eb !important;
    color: #ffffff !important;
}
[data-theme="dark"] .document-unavailable-card {
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px dashed rgba(255, 255, 255, 0.12) !important;
    color: #94a3b8 !important;
}

/* Task 17K: Editorial Detail in Dark Mode */
[data-theme="dark"] .detail-byline {
    background: rgba(255, 255, 255, 0.04) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}
[data-theme="dark"] .detail-byline dt {
    color: #94a3b8 !important;
}
[data-theme="dark"] .detail-byline dd {
    color: #f8fafc !important;
}
[data-theme="dark"] .detail-cover-frame {
    border-color: rgba(255, 255, 255, 0.15) !important;
    background: #0f172a !important;
    box-shadow: 0 20px 48px -10px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.06) !important;
}
[data-theme="dark"] .detail-cover-frame:hover {
    box-shadow: 0 24px 56px -10px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(255, 255, 255, 0.12) !important;
}
[data-theme="dark"] .detail-cover-image {
    filter: none !important;
    -webkit-filter: none !important;
}
[data-theme="dark"] .detail-section-title {
    color: #f8fafc !important;
}

/* Task 17M: Dark Mode Cinematic Backdrop & Keyword Pills */
[data-theme="dark"] .detail-cinema-backdrop .backdrop-image {
    opacity: 0.22;
    filter: blur(60px) saturate(140%);
}
[data-theme="dark"] .detail-cinema-backdrop .backdrop-gradient {
    background: radial-gradient(ellipse at 50% 15%, transparent 20%, rgba(11, 16, 24, 0.7) 65%, #0b1018 100%),
                linear-gradient(180deg, transparent 0%, rgba(11, 16, 24, 0.55) 45%, #0b1018 100%);
}
[data-theme="dark"] .keyword-pill {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    color: #e2e8f0 !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}
[data-theme="dark"] .keyword-pill:hover {
    background: rgba(255, 255, 255, 0.12) !important;
    border-color: rgba(96, 165, 250, 0.6) !important;
    color: #ffffff !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4), 0 0 12px rgba(96, 165, 250, 0.2) !important;
}
[data-theme="dark"] .keyword-pill:focus-visible {
    outline: 2px solid #60a5fa !important;
    outline-offset: 2px !important;
}

/* Member, Forms & Admin Pages in Dark Mode */
[data-theme="dark"] .auth-card {
    background: linear-gradient(145deg, rgba(17, 26, 39, 0.88), rgba(23, 34, 51, 0.78)) !important;
    border: 1px solid rgba(255, 255, 255, 0.09) !important;
    box-shadow: 0 24px 58px rgba(0, 0, 0, 0.45) !important;
    color: #f8fafc !important;
}

/* Task 17O: Member Dashboard in Dark Mode */
[data-theme="dark"] .member-card {
    background: linear-gradient(145deg, rgba(17, 26, 39, 0.92), rgba(23, 34, 51, 0.84)) !important;
    border: 1px solid rgba(255, 255, 255, 0.09) !important;
    box-shadow: 0 24px 58px rgba(0, 0, 0, 0.45) !important;
    color: #f8fafc !important;
}

[data-theme="dark"] .member-profile-note {
    background: rgba(245, 158, 11, 0.12) !important;
    color: #fbbf24 !important;
    border: 1px solid rgba(245, 158, 11, 0.28) !important;
}

[data-theme="dark"] .member-profile-note.auth-status {
    background: rgba(34, 197, 94, 0.12) !important;
    color: #4ade80 !important;
    border-color: rgba(34, 197, 94, 0.28) !important;
}

[data-theme="dark"] .member-history {
    border-top-color: rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] .member-history h2,
[data-theme="dark"] .member-submissions h2 {
    color: #f8fafc !important;
}

[data-theme="dark"] .member-history-row {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: #cbd5e1 !important;
}

[data-theme="dark"] .member-history-row strong {
    color: #f8fafc !important;
}

[data-theme="dark"] .member-empty-history {
    color: #94a3b8 !important;
}

[data-theme="dark"] .member-submissions {
    border-top-color: rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] .member-submission-group {
    background: linear-gradient(165deg, rgba(23, 34, 51, 0.85), rgba(17, 26, 39, 0.92)) !important;
    border-color: rgba(255, 255, 255, 0.09) !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4) !important;
}

[data-theme="dark"] .member-submission-heading {
    border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] .member-submission-heading h3 {
    color: #f8fafc !important;
}

[data-theme="dark"] .member-submission-heading p {
    color: #94a3b8 !important;
}

[data-theme="dark"] .member-summary-panel {
    background: rgba(15, 23, 42, 0.7) !important;
    border: 1px solid rgba(59, 130, 246, 0.25) !important;
}

[data-theme="dark"] .member-summary-meta {
    color: #cbd5e1 !important;
}

[data-theme="dark"] .member-summary-stat strong {
    color: #60a5fa !important;
}

[data-theme="dark"] .member-summary-pending {
    color: #f59e0b !important;
}

[data-theme="dark"] .member-progress-track {
    background: rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] .member-progress-bar {
    background: linear-gradient(90deg, #3b82f6, #60a5fa) !important;
}

[data-theme="dark"] .member-section-header .member-section-kicker {
    color: #cbd5e1 !important;
}

[data-theme="dark"] .member-section-header .member-section-hint {
    color: #94a3b8 !important;
}

[data-theme="dark"] .member-submission-row {
    background: rgba(17, 26, 39, 0.78) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] .member-submission-row:hover {
    border-color: rgba(59, 130, 246, 0.35) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35) !important;
}

[data-theme="dark"] .member-submission-row.is-fulfilled {
    background: linear-gradient(160deg, rgba(16, 36, 28, 0.7), rgba(17, 26, 39, 0.85)) !important;
    border-color: rgba(34, 197, 94, 0.22) !important;
}

[data-theme="dark"] .member-item-icon {
    background: rgba(59, 130, 246, 0.16) !important;
    color: #60a5fa !important;
    border-color: rgba(59, 130, 246, 0.3) !important;
}

[data-theme="dark"] .member-item-icon.is-kolase {
    background: rgba(147, 51, 234, 0.16) !important;
    color: #c084fc !important;
    border-color: rgba(147, 51, 234, 0.3) !important;
}

[data-theme="dark"] .member-item-icon.is-supporting {
    background: rgba(255, 255, 255, 0.06) !important;
    color: #cbd5e1 !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
}

[data-theme="dark"] .member-item-header strong {
    color: #f8fafc !important;
}

[data-theme="dark"] .member-output-product {
    background: rgba(59, 130, 246, 0.18) !important;
    color: #93c5fd !important;
}

[data-theme="dark"] .member-output-desc {
    color: #94a3b8 !important;
}

[data-theme="dark"] .member-item-instruction {
    color: #64748b !important;
}

[data-theme="dark"] .member-template-link {
    color: #60a5fa !important;
}

[data-theme="dark"] .member-template-link:hover {
    color: #93c5fd !important;
}

[data-theme="dark"] .member-item-badge.is-complete {
    background: rgba(34, 197, 94, 0.16) !important;
    color: #4ade80 !important;
    border: 1px solid rgba(34, 197, 94, 0.3) !important;
}

[data-theme="dark"] .member-item-badge.is-pending {
    background: rgba(255, 255, 255, 0.06) !important;
    color: #94a3b8 !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
}

[data-theme="dark"] .member-item-badge.is-invalid {
    background: rgba(245, 158, 11, 0.16) !important;
    color: #fbbf24 !important;
    border: 1px solid rgba(245, 158, 11, 0.3) !important;
}

[data-theme="dark"] .member-submission-action {
    border-top-color: rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] .member-work-metadata-card {
    background: rgba(17, 26, 39, 0.78) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35) !important;
}

[data-theme="dark"] .member-work-title {
    color: #f8fafc !important;
}

[data-theme="dark"] .member-work-title-link {
    color: #60a5fa !important;
}

[data-theme="dark"] .member-work-title-link:hover {
    color: #93c5fd !important;
}

[data-theme="dark"] .member-work-meta-grid {
    background: rgba(255, 255, 255, 0.04) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] .member-meta-item dt {
    color: #94a3b8 !important;
}

[data-theme="dark"] .member-meta-item dd {
    color: #e2e8f0 !important;
}

[data-theme="dark"] .member-work-subhead {
    color: #94a3b8 !important;
}

[data-theme="dark"] .member-work-description p {
    color: #cbd5e1 !important;
}

[data-theme="dark"] .member-keyword-empty {
    color: #64748b !important;
}

[data-theme="dark"] .member-work-empty-card {
    background: rgba(255, 255, 255, 0.03) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] .member-no-work-notice {
    color: #94a3b8 !important;
}

[data-theme="dark"] .member-work-pub-status.is-published {
    background: rgba(34, 197, 94, 0.16) !important;
    color: #4ade80 !important;
    border-color: rgba(34, 197, 94, 0.3) !important;
}

[data-theme="dark"] .member-work-pub-status.is-draft {
    background: rgba(245, 158, 11, 0.16) !important;
    color: #fbbf24 !important;
    border-color: rgba(245, 158, 11, 0.3) !important;
}

[data-theme="dark"] .auth-card h1,
[data-theme="dark"] .auth-card h2,
[data-theme="dark"] .auth-card h3 {
    color: #f8fafc !important;
}

[data-theme="dark"] .auth-card p {
    color: #cbd5e1 !important;
}

[data-theme="dark"] .form-group label,
[data-theme="dark"] .field-label,
[data-theme="dark"] .admin-field {
    color: #e2e8f0 !important;
}

[data-theme="dark"] .field-input,
[data-theme="dark"] .form-input,
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="password"],
[data-theme="dark"] textarea,
[data-theme="dark"] .admin-field input,
[data-theme="dark"] .admin-field select {
    background: rgba(23, 34, 51, 0.82) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: #f8fafc !important;
}

[data-theme="dark"] .field-input:focus,
[data-theme="dark"] .form-input:focus,
[data-theme="dark"] input:focus,
[data-theme="dark"] select:focus,
[data-theme="dark"] textarea:focus {
    border-color: rgba(66, 133, 244, 0.65) !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.28) !important;
}

[data-theme="dark"] .admin-form {
    background: rgba(17, 26, 39, 0.85) !important;
    border-color: rgba(255, 255, 255, 0.09) !important;
}

[data-theme="dark"] .type-list,
[data-theme="dark"] .type-row {
    border-color: rgba(255, 255, 255, 0.09) !important;
}

[data-theme="dark"] .type-name-line h2 {
    color: #f8fafc !important;
}

[data-theme="dark"] .type-summary code {
    color: #93c5fd !important;
    background: rgba(255, 255, 255, 0.06) !important;
}

[data-theme="dark"] .table-card,
[data-theme="dark"] .admin-table,
[data-theme="dark"] .data-table {
    background: rgba(17, 26, 39, 0.82) !important;
    border-color: rgba(255, 255, 255, 0.09) !important;
    color: #e2e8f0 !important;
}

[data-theme="dark"] th {
    background: rgba(23, 34, 51, 0.9) !important;
    color: #cbd5e1 !important;
    border-color: rgba(255, 255, 255, 0.09) !important;
}

[data-theme="dark"] td {
    border-color: rgba(255, 255, 255, 0.06) !important;
    color: #e2e8f0 !important;
}

[data-theme="dark"] tr:hover td {
    background: rgba(255, 255, 255, 0.03) !important;
}

[data-theme="dark"] .stat-card {
    background: rgba(17, 26, 39, 0.82) !important;
    border-color: rgba(255, 255, 255, 0.09) !important;
}

[data-theme="dark"] .stat-card .stat-value {
    color: #f8fafc !important;
}

[data-theme="dark"] .stat-card .stat-label {
    color: #94a3b8 !important;
}

/* Dark Mode: Admin Work Keywords */
[data-theme="dark"] .work-keyword-title { color: #f8fafc !important; }
[data-theme="dark"] .work-keyword-byline { color: #94a3b8 !important; }
[data-theme="dark"] .work-keyword-byline strong { color: #cbd5e1 !important; }
[data-theme="dark"] .work-keyword-badge.has-keywords { background: rgba(59, 130, 246, 0.16) !important; color: #60a5fa !important; border-color: rgba(59, 130, 246, 0.3) !important; }
[data-theme="dark"] .work-keyword-badge.no-keywords { background: rgba(255, 255, 255, 0.06) !important; color: #94a3b8 !important; border-color: rgba(255, 255, 255, 0.12) !important; }
[data-theme="dark"] .keyword-mini-pill { background: rgba(255, 255, 255, 0.06) !important; color: #e2e8f0 !important; border-color: rgba(255, 255, 255, 0.14) !important; }
[data-theme="dark"] .keyword-mini-more { color: #94a3b8 !important; }
[data-theme="dark"] .keyword-empty-hint { color: #64748b !important; }
[data-theme="dark"] .work-product-tag { background: rgba(255, 255, 255, 0.08) !important; color: #cbd5e1 !important; }
[data-theme="dark"] .admin-work-card-title { color: #f8fafc !important; }
[data-theme="dark"] .admin-work-card-meta { background: rgba(255, 255, 255, 0.04) !important; border-color: rgba(255, 255, 255, 0.08) !important; }
[data-theme="dark"] .admin-work-card-meta dt { color: #94a3b8 !important; }
[data-theme="dark"] .admin-work-card-meta dd { color: #e2e8f0 !important; }
[data-theme="dark"] .admin-work-card-meta dd code { background: rgba(255, 255, 255, 0.1) !important; color: #93c5fd !important; }
[data-theme="dark"] .admin-work-current-keywords { border-top-color: rgba(255, 255, 255, 0.08) !important; }
[data-theme="dark"] .admin-work-subhead { color: #94a3b8 !important; }
[data-theme="dark"] .admin-instruction-highlight { color: #60a5fa !important; }
[data-theme="dark"] .admin-field-hint { color: #94a3b8 !important; }
[data-theme="dark"] .admin-textarea { background: rgba(23, 34, 51, 0.85) !important; border-color: rgba(255, 255, 255, 0.12) !important; color: #f8fafc !important; }
[data-theme="dark"] .admin-textarea:focus { outline-color: #60a5fa !important; border-color: #60a5fa !important; }
[data-theme="dark"] .admin-field-counter { color: #64748b !important; }
[data-theme="dark"] .admin-confirm-clear-box { background: rgba(245, 158, 11, 0.1) !important; border-color: rgba(245, 158, 11, 0.3) !important; }
[data-theme="dark"] .admin-checkbox-label { color: #fbbf24 !important; }
[data-theme="dark"] .admin-danger-zone { background: rgba(239, 68, 68, 0.1) !important; border-color: rgba(239, 68, 68, 0.25) !important; }
[data-theme="dark"] .admin-danger-copy h3 { color: #f87171 !important; }
[data-theme="dark"] .admin-danger-copy p { color: #fca5a5 !important; }
[data-theme="dark"] .button-danger { background: #b91c1c !important; border-color: #991b1b !important; color: #fff !important; }
[data-theme="dark"] .button-danger:hover { background: #991b1b !important; }

/* 2. Kolase Light Mode Overrides (html[data-theme="light"] body.kolase-page) */
html[data-theme="light"] body.kolase-page {
    background: #f8faff radial-gradient(ellipse 80% 60% at 50% -10%, rgba(21, 86, 176, 0.08) 0%, rgba(248, 250, 255, 0) 70%) !important;
    background-color: #f8faff !important;
    color: #14213a !important;
}

html[data-theme="light"] .kolase-page .site-header .nav-shell {
    background: rgba(255, 255, 255, 0.76) !important;
    border: 1px solid rgba(255, 255, 255, 0.9) !important;
    box-shadow: 0 14px 38px rgba(27, 49, 82, 0.12) !important;
}

html[data-theme="light"] .kolase-page .brand-copy strong {
    color: #14213a !important;
}

html[data-theme="light"] .kolase-page .brand-copy span {
    color: #596a82 !important;
}

html[data-theme="light"] .kolase-page .kolase-hero {
    border-bottom-color: rgba(0, 0, 0, 0.06) !important;
}

html[data-theme="light"] .kolase-page .kolase-hero-copy h1 {
    color: #14213a !important;
}

html[data-theme="light"] .kolase-page .kolase-hero-copy h1 span {
    color: #1556b0 !important;
}

html[data-theme="light"] .kolase-page .kolase-hero-copy p:not(.eyebrow) {
    color: #596a82 !important;
}

html[data-theme="light"] .kolase-page .kolase-section-heading h2 {
    color: #14213a !important;
}

html[data-theme="light"] .kolase-page .kolase-section-heading .section-description {
    color: #596a82 !important;
}

html[data-theme="light"] .kolase-page .result-count {
    background: #fff !important;
    border: 1px solid #e4eaf3 !important;
    color: #485b75 !important;
}

html[data-theme="light"] .kolase-page .kolase-search {
    background: rgba(255, 255, 255, 0.74) !important;
    border: 1px solid rgba(255, 255, 255, 0.94) !important;
    box-shadow: 0 14px 34px rgba(30, 56, 96, 0.08) !important;
}

html[data-theme="light"] .kolase-page .search-field {
    background: #ffffff !important;
    border: 1px solid #dfe6f0 !important;
    box-shadow: none !important;
}

html[data-theme="light"] .kolase-page .search-field input {
    color: #14213a !important;
}

html[data-theme="light"] .kolase-page .search-field input::placeholder {
    color: #8995a5 !important;
}

html[data-theme="light"] .kolase-page .filter-field select {
    background-color: #ffffff !important;
    border: 1px solid #dfe6f0 !important;
    color: #14213a !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='m2 4 4 4 4-4' fill='none' stroke='%235f6b7a' stroke-width='1.4'/%3E%3C/svg%3E") !important;
}

html[data-theme="light"] .kolase-page .filter-field select option {
    background: #ffffff !important;
    color: #14213a !important;
}

html[data-theme="light"] .kolase-page .nav-staff-login {
    background: rgba(0, 0, 0, 0.04) !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    color: #334155 !important;
}

html[data-theme="light"] .kolase-page .nav-staff-login:hover {
    background: rgba(0, 0, 0, 0.08) !important;
    color: #0f172a !important;
}

html[data-theme="light"] .kolase-page .nav-account-admin,
html[data-theme="light"] .kolase-page .nav-account-logout {
    background: rgba(0, 0, 0, 0.04) !important;
    border-color: rgba(0, 0, 0, 0.1) !important;
    color: #174b96 !important;
}

html[data-theme="light"] .kolase-page .nav-account-name {
    color: #40526d !important;
}

/* Kolase Light Cards: White background, soft gradient feathering into #ffffff */
html[data-theme="light"] .kolase-page .kolase-book,
html[data-theme="light"] .kolase-page .album-card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 8px 22px rgba(30, 56, 96, 0.07) !important;
    color: #14213a !important;
}

html[data-theme="light"] .kolase-page .kolase-book:hover,
html[data-theme="light"] .kolase-page .kolase-book:focus-visible,
html[data-theme="light"] .kolase-page .album-card:hover,
html[data-theme="light"] .kolase-page .album-card:focus-visible {
    background: #ffffff !important;
    border-color: #cbd5e1 !important;
    box-shadow: 0 16px 36px rgba(30, 56, 96, 0.14) !important;
}

html[data-theme="light"] .kolase-page .album-artwork::after,
html[data-theme="light"] .kolase-page .book-cover::after {
    background: linear-gradient(
        to bottom,
        transparent 0%,
        transparent 65%,
        rgba(255, 255, 255, 0.12) 74%,
        rgba(255, 255, 255, 0.5) 84%,
        rgba(255, 255, 255, 0.88) 94%,
        #ffffff 100%
    ) !important;
}

html[data-theme="light"] .kolase-page .album-card:hover .album-artwork::after,
html[data-theme="light"] .kolase-page .kolase-book:hover .book-cover::after {
    background: linear-gradient(
        to bottom,
        transparent 0%,
        transparent 65%,
        rgba(255, 255, 255, 0.15) 74%,
        rgba(255, 255, 255, 0.55) 84%,
        rgba(255, 255, 255, 0.92) 94%,
        #ffffff 100%
    ) !important;
}

html[data-theme="light"] .kolase-page .book-caption,
html[data-theme="light"] .kolase-page .album-caption {
    background: #ffffff !important;
}

html[data-theme="light"] .kolase-page .kolase-book:hover .album-caption,
html[data-theme="light"] .kolase-page .album-card:hover .album-caption {
    background: #ffffff !important;
}

html[data-theme="light"] .kolase-page .book-caption strong,
html[data-theme="light"] .kolase-page .album-caption strong,
html[data-theme="light"] .kolase-page .album-title {
    color: #14213a !important;
}

html[data-theme="light"] .kolase-page .kolase-book:hover .album-title,
html[data-theme="light"] .kolase-page .album-card:hover .album-title {
    color: #1556b0 !important;
}

html[data-theme="light"] .kolase-page .book-author,
html[data-theme="light"] .kolase-page .album-author {
    color: #596a82 !important;
}

/* Light Mode Segmented Navigation Consistency across all pages */
html[data-theme="light"] .kolase-page .product-segmented,
html[data-theme="light"] .product-segmented {
    background: rgba(220, 231, 247, 0.52) !important;
    border: 1px solid rgba(223, 230, 240, 0.9) !important;
    box-shadow: inset 0 1px 2px rgba(30, 55, 91, 0.06), 0 2px 8px rgba(30, 56, 96, 0.04) !important;
    backdrop-filter: blur(16px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(16px) saturate(160%) !important;
}

html[data-theme="light"] .kolase-page .product-segmented-indicator,
html[data-theme="light"] .product-segmented-indicator {
    background: linear-gradient(145deg, #ffffff, #f0f5fd) !important;
    border: 1px solid rgba(255, 255, 255, 0.96) !important;
    box-shadow: inset 0 1px 0 #ffffff, 0 2px 7px rgba(31, 58, 98, 0.12) !important;
}

html[data-theme="light"] .kolase-page .product-segmented-link,
html[data-theme="light"] .product-segmented-link {
    color: #526781 !important;
}

html[data-theme="light"] .kolase-page .product-segmented-link:hover,
html[data-theme="light"] .product-segmented-link:hover {
    color: #174b96 !important;
}

html[data-theme="light"] .kolase-page .product-segmented-link[aria-current="page"],
html[data-theme="light"] .product-segmented-link[aria-current="page"] {
    color: #123f88 !important;
    font-weight: 700 !important;
}

/* Light Mode Global Footer Consistency */
html[data-theme="light"] .site-footer,
html[data-theme="light"] .kolase-page .site-footer {
    background: linear-gradient(180deg, #f8faff 0%, #f1f5fb 100%) !important;
    border-top: 1px solid rgba(223, 230, 240, 0.9) !important;
    color: #596a82 !important;
}

html[data-theme="light"] .site-footer .footer-brand strong,
html[data-theme="light"] .kolase-page .footer-brand strong {
    color: #14213a !important;
}

html[data-theme="light"] .site-footer .footer-brand span,
html[data-theme="light"] .kolase-page .footer-brand span {
    color: #596a82 !important;
}

html[data-theme="light"] .site-footer .footer-inner > p,
html[data-theme="light"] .kolase-page .footer-inner > p {
    color: #596a82 !important;
}

html[data-theme="light"] .site-footer .footer-note,
html[data-theme="light"] .kolase-page .footer-note {
    color: #718096 !important;
}

/* Detail Work Page in Light Mode */
html[data-theme="light"] .detail-article {
    background: linear-gradient(140deg, rgba(255, 255, 255, 0.94), rgba(255, 255, 255, 0.82) 58%, rgba(240, 246, 255, 0.82)) !important;
    border: 1px solid rgba(223, 230, 240, 0.9) !important;
    box-shadow: 0 24px 58px rgba(28, 52, 89, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.98) !important;
    backdrop-filter: blur(26px) saturate(155%) !important;
    -webkit-backdrop-filter: blur(26px) saturate(155%) !important;
    color: #14213a !important;
}

html[data-theme="light"] .detail-article h1,
html[data-theme="light"] .repository-page .detail-article h1 {
    color: #14213a !important;
}

html[data-theme="light"] .detail-description h2,
html[data-theme="light"] .detail-article h2,
html[data-theme="light"] .repository-page .detail-description h2 {
    color: #14213a !important;
}

html[data-theme="light"] .detail-lead {
    color: #4e5c70 !important;
}

html[data-theme="light"] .detail-body,
html[data-theme="light"] .repository-page .detail-body {
    color: #334155 !important;
}

html[data-theme="light"] .detail-body.detail-unavailable {
    color: #778498 !important;
}

html[data-theme="light"] .detail-kicker,
html[data-theme="light"] .repository-page .detail-kicker {
    color: #778498 !important;
}

html[data-theme="light"] .detail-year,
html[data-theme="light"] .repository-page .detail-year {
    color: #778498 !important;
}

html[data-theme="light"] .detail-byline dt,
html[data-theme="light"] .repository-page .detail-byline dt {
    color: #596a82 !important;
}

html[data-theme="light"] .detail-byline dd,
html[data-theme="light"] .repository-page .detail-byline dd {
    color: #14213a !important;
}

html[data-theme="light"] .metadata-grid dt {
    color: #7a8798 !important;
}

html[data-theme="light"] .metadata-grid dd {
    color: #14213a !important;
}

html[data-theme="light"] .breadcrumbs {
    color: #778498 !important;
}

html[data-theme="light"] .breadcrumbs a {
    background: rgba(255, 255, 255, 0.75) !important;
    border: 1px solid rgba(223, 230, 240, 0.9) !important;
    color: #174ea6 !important;
}

html[data-theme="light"] .breadcrumbs a:hover {
    color: #123f88 !important;
}

html[data-theme="light"] .breadcrumbs span[aria-current] {
    color: #485b75 !important;
}

html[data-theme="light"] .detail-article .button-secondary,
html[data-theme="light"] .detail-article .back-button,
html[data-theme="light"] .repository-page .back-button {
    background: rgba(255, 255, 255, 0.8) !important;
    border: 1px solid rgba(223, 230, 240, 0.9) !important;
    color: #174ea6 !important;
}

html[data-theme="light"] .detail-article .button-secondary:hover,
html[data-theme="light"] .detail-article .back-button:hover,
html[data-theme="light"] .repository-page .back-button:hover {
    background: #ffffff !important;
    border-color: #1a73e8 !important;
    color: #123f88 !important;
}

/* Task 17J: Document Access Card in Light Mode */
html[data-theme="light"] .document-locked-card {
    background: linear-gradient(145deg, rgba(239, 246, 255, 0.88), rgba(255, 255, 255, 0.95)) !important;
    border: 1px solid rgba(191, 219, 254, 0.85) !important;
    box-shadow: 0 10px 28px rgba(30, 56, 96, 0.06), inset 0 1px 0 #ffffff !important;
}
html[data-theme="light"] .document-unlocked-card {
    background: linear-gradient(145deg, rgba(240, 253, 244, 0.82), rgba(255, 255, 255, 0.95)) !important;
    border: 1px solid rgba(187, 247, 208, 0.85) !important;
    box-shadow: 0 10px 28px rgba(22, 101, 52, 0.05), inset 0 1px 0 #ffffff !important;
}
html[data-theme="light"] .document-locked-badge {
    background: rgba(26, 115, 232, 0.1) !important;
    border: 1px solid rgba(26, 115, 232, 0.22) !important;
    color: #1556b0 !important;
}
html[data-theme="light"] .document-unlocked-badge {
    background: rgba(22, 163, 74, 0.1) !important;
    border: 1px solid rgba(22, 163, 74, 0.22) !important;
    color: #15803d !important;
}
html[data-theme="light"] .document-access-heading {
    color: #14213a !important;
}
html[data-theme="light"] .document-access-lead {
    color: #475569 !important;
}
html[data-theme="light"] .document-access-meta {
    color: #596a82 !important;
}
html[data-theme="light"] .document-format-badge {
    background: rgba(21, 86, 176, 0.1) !important;
    color: #123f88 !important;
}
html[data-theme="light"] .document-login-cta {
    background: #1a73e8 !important;
    color: #ffffff !important;
    border: 1px solid rgba(26, 115, 232, 0.2) !important;
    box-shadow: 0 4px 14px rgba(26, 115, 232, 0.3) !important;
}
html[data-theme="light"] .document-login-cta:hover {
    background: #1557b0 !important;
    color: #ffffff !important;
}
html[data-theme="light"] .document-unavailable-card {
    background: rgba(241, 245, 249, 0.7) !important;
    border: 1px dashed rgba(203, 213, 225, 0.9) !important;
    color: #64748b !important;
}

/* Task 17K: Editorial Detail in Light Mode */
html[data-theme="light"] .detail-byline {
    background: rgba(241, 245, 249, 0.75) !important;
    border: 1px solid rgba(223, 230, 240, 0.9) !important;
}
html[data-theme="light"] .detail-byline dt {
    color: #64748b !important;
}
html[data-theme="light"] .detail-byline dd {
    color: #0f172a !important;
}
html[data-theme="light"] .detail-cover-frame {
    border-color: rgba(210, 224, 245, 0.9) !important;
    background: #f8fafc !important;
    box-shadow: 0 20px 44px -10px rgba(28, 52, 89, 0.14), 0 2px 8px rgba(15, 23, 42, 0.04) !important;
}
html[data-theme="light"] .detail-cover-frame:hover {
    box-shadow: 0 24px 50px -10px rgba(15, 23, 42, 0.22), 0 4px 12px rgba(15, 23, 42, 0.08) !important;
}
html[data-theme="light"] .detail-section-title {
    color: #0f172a !important;
}

/* Task 17M: Light Mode Keyword Pills */
html[data-theme="light"] .keyword-pill {
    background: #f1f5fb !important;
    border: 1px solid rgba(210, 224, 245, 0.9) !important;
    color: #154586 !important;
}
html[data-theme="light"] .keyword-pill:hover {
    background: #e3effc !important;
    border-color: #1a73e8 !important;
    color: #0f3468 !important;
    box-shadow: 0 4px 12px rgba(21, 86, 176, 0.14) !important;
}

/* 3. Flipbook Reader Theme Adaptability */
[data-theme="light"] .kolase-reader-immersive {
    background: #f1f5f9 !important;
}

[data-theme="light"] .reader-top-bar {
    background: rgba(255, 255, 255, 0.88) !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.06) !important;
}

[data-theme="light"] .reader-title {
    color: #0f172a !important;
}

[data-theme="light"] .reader-subtitle {
    color: #64748b !important;
}

[data-theme="light"] .reader-back-btn {
    color: #334155 !important;
}

[data-theme="light"] .reader-back-btn:hover {
    color: #0f172a !important;
}

[data-theme="light"] .reader-action-btn,
[data-theme="light"] .toolbar-btn {
    background: rgba(0, 0, 0, 0.05) !important;
    border-color: rgba(0, 0, 0, 0.1) !important;
    color: #334155 !important;
}

[data-theme="light"] .reader-action-btn:hover,
[data-theme="light"] .toolbar-btn:hover {
    background: rgba(0, 0, 0, 0.09) !important;
    color: #0f172a !important;
}

[data-theme="light"] .reader-close-btn {
    background: rgba(0, 0, 0, 0.05) !important;
    border-color: rgba(0, 0, 0, 0.1) !important;
    color: #334155 !important;
}

[data-theme="light"] .reader-bottom-bar .toolbar-pill {
    background: rgba(255, 255, 255, 0.9) !important;
    border-color: rgba(0, 0, 0, 0.1) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1) !important;
    color: #1e293b !important;
}

[data-theme="light"] .page-counter {
    color: #334155 !important;
}

[data-theme="light"] .zoom-badge {
    color: #64748b !important;
}

[data-theme="light"] .reader-stage-container {
    background: #e2e8f0 !important;
}

[data-theme="light"] .reader-info-panel {
    background: rgba(255, 255, 255, 0.95) !important;
    border-left-color: #e2e8f0 !important;
    color: #1e293b !important;
}

[data-theme="light"] .reader-thumbnails-drawer {
    background: rgba(255, 255, 255, 0.95) !important;
    border-top-color: #e2e8f0 !important;
}

[data-theme="light"] .reader-chevron {
    background: rgba(255, 255, 255, 0.85) !important;
    border-color: rgba(0, 0, 0, 0.1) !important;
    color: #1e293b !important;
}

[data-theme="light"] .reader-chevron:hover {
    background: #ffffff !important;
    color: #0f172a !important;
}

/* ==========================================================================
   TASK 18C: Staff Dashboard & Admin Shell (iOS 26 Liquid Glass Dark Mode)
   ========================================================================== */

/* 1. Page Background for Staff Dashboard in Dark Mode */
[data-theme="dark"] body.staff-dashboard-page,
[data-theme="dark"] body.admin-page {
    background: #0b1018 radial-gradient(ellipse 80% 60% at 50% -10%, rgba(26, 68, 128, 0.22) 0%, rgba(11, 16, 24, 0) 70%) !important;
    background-color: #0b1018 !important;
    color: var(--text-primary) !important;
}

/* 2. Admin Header & Nav Account Capsule in Dark Mode */
[data-theme="dark"] .admin-page .nav-shell {
    background: rgba(13, 20, 32, 0.82) !important;
    border: 1px solid rgba(255, 255, 255, 0.09) !important;
    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] .admin-page .nav-account {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] .admin-page .nav-account-name {
    color: #cbd5e1 !important;
}

[data-theme="dark"] .admin-page .nav-account-admin {
    color: #60a5fa !important;
    background: transparent !important;
}

[data-theme="dark"] .admin-page .nav-account-admin:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #93c5fd !important;
}

[data-theme="dark"] .admin-page .nav-account-logout {
    color: #94a3b8 !important;
    background: transparent !important;
}

[data-theme="dark"] .admin-page .nav-account-logout:hover {
    background: rgba(239, 68, 68, 0.12) !important;
    color: #f87171 !important;
}

/* 3. Sub-Nav Menu Pill Bar (.admin-section-nav) in Dark Mode */
[data-theme="dark"] .admin-section-nav {
    background: rgba(15, 23, 42, 0.72) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
    -webkit-backdrop-filter: blur(20px) saturate(160%) !important;
    backdrop-filter: blur(20px) saturate(160%) !important;
}

[data-theme="dark"] .admin-section-nav a {
    color: #94a3b8 !important;
}

[data-theme="dark"] .admin-section-nav a:not([aria-current="page"]):hover {
    color: #f8fafc !important;
}

[data-theme="dark"] .admin-section-nav a:not([aria-current="page"]):hover::before {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
}

[data-theme="dark"] .admin-section-nav a[aria-current="page"] {
    color: #ffffff !important;
}

[data-theme="dark"] .admin-section-nav a[aria-current="page"]::before {
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.55) 0%, rgba(29, 78, 216, 0.75) 100%) !important;
    border: 1px solid rgba(96, 165, 250, 0.45) !important;
    box-shadow: 0 2px 10px rgba(37, 99, 235, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
}

/* 4. Staff Dashboard Intro & Headings in Dark Mode */
[data-theme="dark"] .staff-dashboard-intro h1 {
    color: #f8fafc !important;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Inter", "Segoe UI", Roboto, sans-serif !important;
    font-weight: 700 !important;
    letter-spacing: -0.035em !important;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .staff-dashboard-intro .eyebrow {
    color: #60a5fa !important;
    font-weight: 700 !important;
    letter-spacing: 0.16em !important;
}

[data-theme="dark"] .staff-dashboard-intro > p:last-child {
    color: #94a3b8 !important;
}

[data-theme="dark"] .staff-dashboard-section-heading h2 {
    color: #f8fafc !important;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Inter", "Segoe UI", Roboto, sans-serif !important;
    font-weight: 650 !important;
    letter-spacing: -0.025em !important;
}

[data-theme="dark"] .staff-dashboard-section-heading .eyebrow {
    color: #60a5fa !important;
    font-weight: 700 !important;
    letter-spacing: 0.15em !important;
}

[data-theme="dark"] .staff-dashboard-section-heading > p {
    color: #94a3b8 !important;
}

/* 5. Flash Alert in Dark Mode */
[data-theme="dark"] .staff-dashboard-flash,
[data-theme="dark"] .admin-flash {
    background: rgba(16, 185, 129, 0.12) !important;
    border: 1px solid rgba(52, 211, 153, 0.3) !important;
    color: #6ee7b7 !important;
    box-shadow: 0 4px 16px rgba(16, 185, 129, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
    -webkit-backdrop-filter: blur(14px) saturate(140%) !important;
    backdrop-filter: blur(14px) saturate(140%) !important;
    border-radius: 14px !important;
}

/* 6. Liquid Glass Containers for Stats & Actions in Dark Mode */
[data-theme="dark"] .liquid-surface,
[data-theme="dark"] .staff-dashboard-stats,
[data-theme="dark"] .staff-dashboard-actions,
[data-theme="dark"] .committee-dashboard-stats {
    background: rgba(15, 23, 42, 0.65) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
    -webkit-backdrop-filter: blur(24px) saturate(160%) !important;
    backdrop-filter: blur(24px) saturate(160%) !important;
}

/* 7. Stats Items in Dark Mode */
[data-theme="dark"] .staff-stat + .staff-stat {
    border-left: 1px solid rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] .staff-stat-label {
    color: #94a3b8 !important;
    font-weight: 600 !important;
    font-size: 0.78rem !important;
    letter-spacing: 0.01em !important;
}

[data-theme="dark"] .staff-stat-value {
    color: #38bdf8 !important;
    text-shadow: 0 0 20px rgba(56, 189, 248, 0.35) !important;
    font-weight: 650 !important;
    letter-spacing: -0.05em !important;
}

[data-theme="dark"] .staff-stat-note {
    color: #64748b !important;
    font-size: 0.72rem !important;
}

/* 8. Action Rows in Dark Mode */
[data-theme="dark"] .staff-action-row + .staff-action-row {
    border-top: 1px solid rgba(255, 255, 255, 0.07) !important;
}

[data-theme="dark"] .staff-action-row:hover {
    background: rgba(255, 255, 255, 0.04) !important;
}

[data-theme="dark"] .staff-action-primary {
    background: linear-gradient(100deg, rgba(59, 130, 246, 0.08), transparent 60%) !important;
}

[data-theme="dark"] .staff-action-access {
    background: linear-gradient(100deg, rgba(168, 85, 247, 0.06), transparent 60%) !important;
}

[data-theme="dark"] .staff-action-icon {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
    color: #60a5fa !important;
}

[data-theme="dark"] .staff-action-index {
    color: #60a5fa !important;
    font-weight: 700 !important;
    font-size: 0.65rem !important;
    letter-spacing: 0.12em !important;
}

[data-theme="dark"] .staff-action-copy h3 {
    color: #f8fafc !important;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Inter", "Segoe UI", Roboto, sans-serif !important;
    font-weight: 650 !important;
}

[data-theme="dark"] .staff-action-copy p {
    color: #94a3b8 !important;
}

[data-theme="dark"] .staff-action-row > a {
    color: #93c5fd !important;
    background: rgba(59, 130, 246, 0.12) !important;
    border: 1px solid rgba(59, 130, 246, 0.28) !important;
    padding: 0.42rem 0.95rem !important;
    border-radius: var(--radius-pill) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
    transition: all 180ms ease !important;
}

[data-theme="dark"] .staff-action-row > a:hover {
    background: rgba(59, 130, 246, 0.24) !important;
    border-color: rgba(96, 165, 250, 0.45) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(59, 130, 246, 0.3) !important;
}

[data-theme="dark"] .staff-action-arrow {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    color: #93c5fd !important;
}

/* 9. General Admin Heading, Cards, Records & Panels in Dark Mode */
[data-theme="dark"] .admin-heading h1 {
    color: #f8fafc !important;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Inter", "Segoe UI", Roboto, sans-serif !important;
    font-weight: 700 !important;
    letter-spacing: -0.035em !important;
}

[data-theme="dark"] .admin-heading p,
[data-theme="dark"] .admin-heading .section-description {
    color: #94a3b8 !important;
}

[data-theme="dark"] .admin-heading .eyebrow {
    color: #60a5fa !important;
}

[data-theme="dark"] .admin-record {
    background: rgba(15, 23, 42, 0.65) !important;
    border: 1px solid rgba(255, 255, 255, 0.09) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    backdrop-filter: blur(16px) !important;
}

[data-theme="dark"] .admin-record h2 {
    color: #f8fafc !important;
}

[data-theme="dark"] .admin-record p {
    color: #94a3b8 !important;
}

[data-theme="dark"] .admin-panel,
[data-theme="dark"] .form-card {
    background: rgba(15, 23, 42, 0.72) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    backdrop-filter: blur(20px) !important;
}

[data-theme="dark"] .status-pill.is-active {
    background: rgba(16, 185, 129, 0.15) !important;
    color: #34d399 !important;
    border: 1px solid rgba(52, 211, 153, 0.3) !important;
}

[data-theme="dark"] .status-pill.is-inactive {
    background: rgba(245, 158, 11, 0.12) !important;
    color: #fbbf24 !important;
    border: 1px solid rgba(251, 191, 36, 0.28) !important;
}

[data-theme="dark"] .inline-search {
    background: rgba(15, 23, 42, 0.65) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3) !important;
}

[data-theme="dark"] .empty-state h2,
[data-theme="dark"] .empty-state h3 {
    color: #f8fafc !important;
}

[data-theme="dark"] .empty-state p {
    color: #94a3b8 !important;
}

[data-theme="dark"] .user-admin-card {
    background: rgba(15, 23, 42, 0.65) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3) !important;
}

[data-theme="dark"] .user-admin-heading h2 {
    color: #f8fafc !important;
}

[data-theme="dark"] .user-admin-heading p {
    color: #94a3b8 !important;
}

[data-theme="dark"] .temporary-password {
    background: rgba(30, 58, 138, 0.2) !important;
    border: 1px solid rgba(59, 130, 246, 0.35) !important;
    color: #93c5fd !important;
}

[data-theme="dark"] .temporary-password code {
    background: rgba(15, 23, 42, 0.8) !important;
    color: #60a5fa !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
}

[data-theme="dark"] .button-primary {
    background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;
    border: 1px solid rgba(96, 165, 250, 0.4) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
}

[data-theme="dark"] .button-primary:hover {
    background: linear-gradient(135deg, #3b82f6, #2563eb) !important;
    border-color: rgba(147, 197, 253, 0.5) !important;
    box-shadow: 0 6px 20px rgba(37, 99, 235, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
}

[data-theme="dark"] .admin-errors {
    background: rgba(239, 68, 68, 0.12) !important;
    border: 1px solid rgba(239, 68, 68, 0.3) !important;
    color: #fca5a5 !important;
}

[data-theme="dark"] .committee-cohort-empty h3 {
    color: #f8fafc !important;
}

[data-theme="dark"] .committee-cohort-empty p {
    color: #94a3b8 !important;
}

[data-theme="dark"] .committee-cohort-row > a {
    color: #93c5fd !important;
}

/* iOS 26 Liquid Glass Dark Mode: Admin Fields, Inputs, Form Cards & Document Types */
[data-theme="dark"] .admin-form h2,
[data-theme="dark"] .form-card h2 {
    color: #f8fafc !important;
}

[data-theme="dark"] .admin-field {
    color: #cbd5e1 !important;
}

[data-theme="dark"] .admin-field > span {
    color: #e2e8f0 !important;
}

[data-theme="dark"] .admin-field small {
    color: #94a3b8 !important;
}

[data-theme="dark"] .admin-field input,
[data-theme="dark"] .admin-field select,
[data-theme="dark"] .admin-field textarea {
    background: rgba(23, 34, 51, 0.75) !important;
    color: #f8fafc !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    backdrop-filter: blur(14px) !important;
}

[data-theme="dark"] .admin-field input::placeholder,
[data-theme="dark"] .admin-field textarea::placeholder {
    color: #64748b !important;
}

[data-theme="dark"] .admin-field input:hover:not([readonly]):not(:disabled),
[data-theme="dark"] .admin-field select:hover:not(:disabled),
[data-theme="dark"] .admin-field textarea:hover:not(:disabled) {
    border-color: rgba(96, 165, 250, 0.45) !important;
}

[data-theme="dark"] .admin-field input:focus-visible,
[data-theme="dark"] .admin-field select:focus-visible,
[data-theme="dark"] .admin-field textarea:focus-visible {
    outline: 0 !important;
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.35) !important;
}

[data-theme="dark"] .admin-field select option {
    background: #111a27 !important;
    color: #f8fafc !important;
}

[data-theme="dark"] .admin-field input[readonly],
[data-theme="dark"] .admin-field select:disabled,
[data-theme="dark"] .admin-field input:disabled {
    background: rgba(15, 23, 42, 0.5) !important;
    color: #64748b !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] .record-type-label {
    color: #cbd5e1 !important;
}

[data-theme="dark"] .record-type-label small {
    color: #94a3b8 !important;
}

[data-theme="dark"] .document-type-create-form {
    background: rgba(15, 23, 42, 0.72) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] .document-type-create-form h2 {
    color: #f8fafc !important;
}

[data-theme="dark"] .document-type-record {
    background: rgba(15, 23, 42, 0.65) !important;
    border: 1px solid rgba(255, 255, 255, 0.09) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}

@media (max-width: 900px) {
    [data-theme="dark"] .staff-stat:nth-child(3) {
        border-left: 0 !important;
        border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    }
    [data-theme="dark"] .staff-stat:nth-child(4) {
        border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    }
}

/* Task 19A: Unified Work Management (Manajemen Karya) */
.work-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 0.85rem;
    margin: 1.25rem 0;
}

.work-stat-card {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 0.95rem 1.15rem;
    border: 1px solid rgba(255, 255, 255, 0.85);
    border-radius: 16px;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.85), rgba(245, 249, 255, 0.72));
    box-shadow: 0 4px 16px rgba(31, 58, 98, 0.05);
}

.work-stat-card .stat-value {
    font-size: 1.5rem;
    font-weight: 750;
    line-height: 1.1;
    color: #1a365d;
}

.work-stat-card .stat-label {
    font-size: 0.76rem;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.work-stat-card.stat-warning {
    border-color: rgba(245, 158, 11, 0.35);
    background: linear-gradient(145deg, rgba(254, 243, 199, 0.45), rgba(255, 251, 235, 0.65));
}

.text-success { color: #059669 !important; }
.text-warning { color: #d97706 !important; }

/* Filter Form */
.work-filter-form {
    padding: 1.15rem 1.35rem;
    border: 1px solid rgba(255, 255, 255, 0.88);
    border-radius: 18px;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.82), rgba(246, 249, 254, 0.75));
    box-shadow: 0 8px 24px rgba(31, 58, 98, 0.06);
    margin-bottom: 1.25rem;
}

.work-filter-grid {
    display: grid;
    grid-template-columns: 2fr 1.2fr 1fr 1.3fr auto;
    gap: 0.75rem;
    align-items: end;
}

.work-filter-grid .admin-field {
    margin: 0;
}

.filter-actions {
    display: flex;
    gap: 0.5rem;
    align-items: flex-end;
}

.filter-actions .button {
    height: 46px;
    min-height: 46px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

@media (max-width: 1024px) {
    .work-filter-grid {
        grid-template-columns: 1fr 1fr;
    }
    .filter-actions {
        grid-column: 1 / -1;
    }
}

@media (max-width: 640px) {
    .work-filter-grid {
        grid-template-columns: 1fr;
    }
}

/* Work Management Record Cards */
.work-management-record {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    padding: 1.25rem 1.45rem;
}

@media (min-width: 860px) {
    .work-management-record {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 1.35rem;
    }
}

.work-meta-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem 0.65rem;
    margin-bottom: 0.35rem;
}

.enrollment-source-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.5rem;
    border-radius: 6px;
    background: #e0f2fe;
    color: #0369a1;
    font-size: 0.72rem;
    font-weight: 600;
}

.work-record-title {
    margin: 0 0 0.35rem;
    font-size: 1.15rem;
    font-weight: 750;
    line-height: 1.35;
    letter-spacing: -0.015em;
}

.work-record-title a {
    color: #183657;
    text-decoration: none;
    transition: color 150ms ease;
}

.work-record-title a:hover {
    color: #2563eb;
}

.work-record-byline {
    margin: 0 0 0.55rem;
    color: #5a6e88;
    font-size: 0.82rem;
    line-height: 1.5;
}

.work-record-byline strong {
    color: #334e6f;
}

.work-files-presence {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.6rem;
    margin: 0.45rem 0;
}

.presence-indicator {
    display: inline-flex;
    align-items: center;
    padding: 0.18rem 0.55rem;
    border-radius: 8px;
    font-size: 0.73rem;
    font-weight: 650;
    line-height: 1;
}

.presence-indicator.is-present {
    background: #ecfdf5;
    color: #047857;
    border: 1px solid #a7f3d0;
}

.presence-indicator.is-missing {
    background: #fef2f2;
    color: #b91c1c;
    border: 1px solid #fecaca;
}

.work-record-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem;
}

.text-xs {
    font-size: 0.75rem !important;
    padding: 0.4rem 0.65rem !important;
    min-height: 36px !important;
}

/* Work Form Styling (Create & Edit) */
.work-form-card {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
    padding: clamp(1.2rem, 3.5vw, 2.2rem);
    border-radius: 22px;
}

.work-form-section {
    border: 1px solid rgba(210, 224, 245, 0.8);
    border-radius: 18px;
    padding: 1.25rem 1.45rem;
    margin: 0 0 1.5rem;
    background: rgba(255, 255, 255, 0.45);
}

.work-section-legend {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0 0.5rem;
    font-weight: 750;
    color: #1e3a5f;
}

.work-section-legend .section-number {
    display: inline-grid;
    width: 24px;
    height: 24px;
    place-items: center;
    border-radius: 999px;
    background: #2563eb;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 750;
}

.work-section-legend .section-title {
    font-size: 1.05rem;
    letter-spacing: -0.01em;
}

.section-note {
    margin: 0.25rem 0 1rem;
    font-size: 0.82rem;
    color: #64748b;
    line-height: 1.45;
}

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

@media (max-width: 768px) {
    .work-form-grid {
        grid-template-columns: 1fr;
    }
}

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

.field-half {
    grid-column: span 1;
}

.work-form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.5rem;
}

.work-form-actions .button {
    height: 48px;
    min-height: 48px;
    padding: 0 1.85rem;
    font-size: 0.95rem;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* File Manager Cards Grid (Edit Page) */
.work-files-manager-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
}

.file-manager-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 1rem 1.15rem;
    border: 1px solid rgba(210, 224, 245, 0.9);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.75);
}

.file-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    border-bottom: 1px solid rgba(210, 224, 245, 0.6);
    padding-bottom: 0.45rem;
}

.file-card-header h4 {
    margin: 0;
    font-size: 0.88rem;
    font-weight: 700;
    color: #1e3a5f;
}

.file-current-info {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.5rem 0.65rem;
    border-radius: 10px;
    background: rgba(240, 245, 252, 0.7);
}

.cover-thumbnail-preview {
    width: 60px;
    height: 75px;
    flex: 0 0 60px;
    border-radius: 8px;
    overflow: hidden;
    background: #e2e8f0;
    border: 1px solid rgba(0, 0, 0, 0.08);
}

.cover-thumbnail-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.file-icon-pdf {
    width: 48px;
    height: 58px;
    flex: 0 0 48px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: #fee2e2;
    color: #b91c1c;
    font-size: 0.72rem;
    font-weight: 800;
    border: 1px solid #fca5a5;
    letter-spacing: 0.05em;
}

.file-icon-pdf.icon-kolase {
    background: #ede9fe;
    color: #6d28d9;
    border-color: #c4b5fd;
}

.file-details {
    min-width: 0;
    flex: 1 1 auto;
}

.file-name {
    margin: 0 0 0.15rem;
    font-size: 0.82rem;
    color: #1e293b;
    word-break: break-all;
    line-height: 1.35;
}

.file-meta {
    margin: 0 0 0.35rem;
    font-size: 0.72rem;
    color: #64748b;
}

.file-replace-field {
    margin: 0 !important;
}

.enrollment-context-box {
    padding: 0.75rem 0.95rem;
    border-radius: 12px;
    background: rgba(240, 246, 254, 0.75);
    border: 1px solid rgba(185, 208, 238, 0.5);
    font-size: 0.82rem;
    line-height: 1.5;
}

.enrollment-context-box p {
    margin: 0 0 0.25rem;
}

.enrollment-context-box p:last-child {
    margin: 0;
}

.input-readonly {
    background: #f1f5f9 !important;
    color: #64748b !important;
    cursor: not-allowed;
}

.current-keywords-list {
    margin-bottom: 0.5rem;
}

/* Dark Mode: Work Management (Manajemen Karya) */
[data-theme="dark"] .work-stat-card {
    background: rgba(15, 23, 42, 0.65) !important;
    border: 1px solid rgba(255, 255, 255, 0.09) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
}

[data-theme="dark"] .work-stat-card .stat-value {
    color: #f8fafc !important;
}

[data-theme="dark"] .work-stat-card .stat-label {
    color: #94a3b8 !important;
}

[data-theme="dark"] .work-stat-card.stat-warning {
    border-color: rgba(245, 158, 11, 0.35) !important;
    background: rgba(120, 53, 15, 0.15) !important;
}

[data-theme="dark"] .work-filter-form {
    background: rgba(15, 23, 42, 0.7) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35) !important;
}

[data-theme="dark"] .work-management-record {
    background: rgba(15, 23, 42, 0.65) !important;
    border: 1px solid rgba(255, 255, 255, 0.09) !important;
}

[data-theme="dark"] .work-record-title a {
    color: #f8fafc !important;
}

[data-theme="dark"] .work-record-title a:hover {
    color: #60a5fa !important;
}

[data-theme="dark"] .work-record-byline {
    color: #94a3b8 !important;
}

[data-theme="dark"] .work-record-byline strong {
    color: #cbd5e1 !important;
}

[data-theme="dark"] .presence-indicator.is-present {
    background: rgba(16, 185, 129, 0.15) !important;
    color: #34d399 !important;
    border-color: rgba(52, 211, 153, 0.3) !important;
}

[data-theme="dark"] .presence-indicator.is-missing {
    background: rgba(239, 68, 68, 0.15) !important;
    color: #fca5a5 !important;
    border-color: rgba(239, 68, 68, 0.3) !important;
}

[data-theme="dark"] .enrollment-source-badge {
    background: rgba(14, 165, 233, 0.18) !important;
    color: #7dd3fc !important;
}

[data-theme="dark"] .work-form-section {
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    background: rgba(15, 23, 42, 0.5) !important;
}

[data-theme="dark"] .work-section-legend {
    color: #f8fafc !important;
}

[data-theme="dark"] .section-note {
    color: #94a3b8 !important;
}

[data-theme="dark"] .file-manager-card {
    background: rgba(23, 34, 51, 0.65) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

[data-theme="dark"] .file-card-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] .file-card-header h4 {
    color: #f8fafc !important;
}

[data-theme="dark"] .file-current-info {
    background: rgba(15, 23, 42, 0.8) !important;
}

[data-theme="dark"] .file-name {
    color: #f1f5f9 !important;
}

[data-theme="dark"] .file-meta {
    color: #94a3b8 !important;
}

[data-theme="dark"] .enrollment-context-box {
    background: rgba(15, 23, 42, 0.8) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #cbd5e1 !important;
}

[data-theme="dark"] .input-readonly {
    background: rgba(15, 23, 42, 0.5) !important;
    color: #64748b !important;
}

/* ==========================================================================
   Task 19C — Program & Separated Cohort Requirements Styles
   ========================================================================== */

.button-sm {
    padding: 0.38rem 0.75rem;
    font-size: 0.78rem;
    border-radius: var(--radius-sm, 8px);
}

.button-subtle {
    background: rgba(240, 246, 255, 0.75);
    border: 1px solid rgba(200, 215, 235, 0.85);
    color: #2b4970;
}

.button-subtle:hover {
    background: rgba(230, 240, 255, 0.95);
    border-color: #24579c;
    color: #174ea6;
}

.cohort-create-accordion {
    margin: 1.1rem 0 1.6rem;
    border: 1px solid rgba(213, 223, 237, 0.85);
    border-radius: 18px;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.85), rgba(244, 248, 255, 0.75));
    box-shadow: 0 4px 18px rgba(34, 59, 97, 0.05);
    overflow: hidden;
    transition: all 0.25s ease;
}

.cohort-create-accordion summary.cohort-create-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.95rem 1.25rem;
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.cohort-create-accordion summary::-webkit-details-marker {
    display: none;
}

.cohort-create-summary-info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.cohort-create-icon {
    display: inline-grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #1a73e8;
    color: #fff;
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1;
}

.cohort-create-summary-info strong {
    display: block;
    color: #1e3a5f;
    font-size: 0.95rem;
}

.cohort-create-summary-info small {
    color: #64748b;
    font-size: 0.78rem;
}

.cohort-create-accordion .cohort-create-form {
    padding: 1.2rem 1.25rem 1.4rem;
    border-top: 1px solid rgba(213, 223, 237, 0.75);
    margin: 0;
}

.cohort-summary-bar {
    display: grid;
    grid-template-columns: minmax(130px, 1fr) minmax(260px, 2fr) minmax(130px, 1fr);
    gap: 0.85rem;
    padding: 0.85rem 1rem;
    margin: 0.25rem 0 0.5rem;
    border-radius: 14px;
    background: rgba(240, 246, 255, 0.6);
    border: 1px solid rgba(218, 228, 242, 0.75);
}

.cohort-summary-item {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.cohort-summary-label {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #627d98;
}

.cohort-summary-value {
    font-size: 0.82rem;
    color: #1e3a5f;
    font-weight: 600;
}

.cohort-req-tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.2rem;
}

.cohort-req-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.2rem 0.5rem;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(200, 215, 235, 0.8);
    font-size: 0.72rem;
    color: #2b4970;
}

.cohort-req-tag strong {
    color: #1556b0;
    font-size: 0.68rem;
}

.cohort-req-empty {
    font-size: 0.78rem;
    color: #8295ac;
    font-style: italic;
}

.cohort-manage-accordion {
    margin-top: 0.5rem;
    border-top: 1px dashed rgba(210, 222, 238, 0.9);
    padding-top: 0.65rem;
}

.cohort-manage-summary {
    cursor: pointer;
    list-style: none;
    user-select: none;
    width: fit-content;
}

.cohort-manage-summary::-webkit-details-marker {
    display: none;
}

.cohort-manage-body {
    margin-top: 0.85rem;
    display: grid;
    gap: 1.25rem;
}

.cohort-section-title {
    font-size: 0.92rem;
    font-weight: 600;
    color: #1e3a5f;
    margin: 0 0 0.5rem;
}

.cohort-context-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1.25rem;
    margin-top: 0.65rem;
    padding: 0.65rem 0.95rem;
    border-radius: 10px;
    background: rgba(240, 246, 255, 0.6);
    border: 1px solid rgba(215, 228, 245, 0.75);
    font-size: 0.82rem;
    color: #334e68;
}

.cohort-context-meta strong {
    color: #102a43;
}

@media (max-width: 768px) {
    .cohort-summary-bar {
        grid-template-columns: minmax(0, 1fr);
    }
    .cohort-record-status {
        flex-wrap: wrap;
    }
}

/* Dark Mode: Task 19C Cohorts & Requirements */
[data-theme="dark"] .button-subtle {
    background: rgba(30, 45, 68, 0.6) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: #cbd5e1 !important;
}

[data-theme="dark"] .button-subtle:hover {
    background: rgba(40, 60, 90, 0.8) !important;
    border-color: rgba(96, 165, 250, 0.4) !important;
    color: #93c5fd !important;
}

[data-theme="dark"] .cohort-create-accordion {
    background: linear-gradient(145deg, rgba(23, 34, 51, 0.85), rgba(15, 23, 42, 0.8)) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

[data-theme="dark"] .cohort-create-summary-info strong {
    color: #f8fafc !important;
}

[data-theme="dark"] .cohort-create-summary-info small {
    color: #94a3b8 !important;
}

[data-theme="dark"] .cohort-summary-bar {
    background: rgba(15, 23, 42, 0.65) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] .cohort-summary-label {
    color: #94a3b8 !important;
}

[data-theme="dark"] .cohort-summary-value {
    color: #e2e8f0 !important;
}

[data-theme="dark"] .cohort-req-tag {
    background: rgba(30, 45, 68, 0.7) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: #cbd5e1 !important;
}

[data-theme="dark"] .cohort-req-tag strong {
    color: #93c5fd !important;
}

[data-theme="dark"] .cohort-context-meta {
    background: rgba(15, 23, 42, 0.7) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: #cbd5e1 !important;
}

[data-theme="dark"] .cohort-context-meta strong {
    color: #f8fafc !important;
}

[data-theme="dark"] .cohort-section-title {
    color: #f1f5f9 !important;
}

[data-theme="dark"] .cohort-manage-accordion {
    border-top-color: rgba(255, 255, 255, 0.1) !important;
}

/* iOS 26 Liquid Glass Dark Mode: Cohort Task Configuration, Monitoring, Roster & Candidates */
[data-theme="dark"] .cohort-task-configuration,
[data-theme="dark"] .cohort-task-summary {
    background: rgba(15, 23, 42, 0.72) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    backdrop-filter: blur(20px) !important;
}

[data-theme="dark"] .cohort-task-heading h3,
[data-theme="dark"] .cohort-task-summary h2 {
    color: #f8fafc !important;
}

[data-theme="dark"] .cohort-task-heading p,
[data-theme="dark"] .cohort-task-summary p {
    color: #94a3b8 !important;
}

[data-theme="dark"] .cohort-task-heading .eyebrow,
[data-theme="dark"] .cohort-task-summary .eyebrow {
    color: #60a5fa !important;
}

[data-theme="dark"] .cohort-assignment-count {
    background: rgba(30, 58, 138, 0.3) !important;
    border: 1px solid rgba(96, 165, 250, 0.35) !important;
    color: #93c5fd !important;
}

[data-theme="dark"] .cohort-progress-counts span {
    background: rgba(23, 34, 51, 0.75) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #cbd5e1 !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    backdrop-filter: blur(12px) !important;
}

[data-theme="dark"] .cohort-progress-counts strong {
    color: #38bdf8 !important;
}

[data-theme="dark"] .cohort-task-option {
    background: rgba(17, 26, 42, 0.75) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    backdrop-filter: blur(16px) !important;
}

[data-theme="dark"] .cohort-task-choice span strong {
    color: #f8fafc !important;
}

[data-theme="dark"] .cohort-task-choice small {
    color: #94a3b8 !important;
}

[data-theme="dark"] .cohort-task-choice input[type="checkbox"] {
    accent-color: #3b82f6 !important;
}

[data-theme="dark"] .cohort-task-option .admin-field > span {
    color: #e2e8f0 !important;
}

[data-theme="dark"] .cohort-task-option .admin-field small {
    color: #94a3b8 !important;
}

[data-theme="dark"] .cohort-task-option input,
[data-theme="dark"] .cohort-task-option select,
[data-theme="dark"] .cohort-task-option textarea {
    background-color: rgba(15, 23, 42, 0.8) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: #f8fafc !important;
}

.cohort-task-template-box {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-top: 0.65rem;
    padding: 0.65rem 0.85rem;
    border-radius: 12px;
    background: rgba(235, 243, 255, 0.65);
    border: 1px solid rgba(190, 212, 242, 0.85);
}

.cohort-template-link {
    display: inline-flex;
    width: fit-content;
    max-width: 100%;
    align-items: center;
    gap: 0.35rem;
    color: #1556b0;
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1.4;
    text-decoration: none;
    text-underline-offset: 3px;
}

.cohort-template-link:hover {
    color: #0d3a78;
    text-decoration: underline;
}

.cohort-template-link:focus-visible {
    outline: 3px solid rgba(21, 86, 176, 0.24);
    outline-offset: 3px;
    border-radius: 4px;
}

.cohort-template-hint {
    color: #536782;
    font-size: 0.74rem;
    line-height: 1.45;
}

[data-theme="dark"] .cohort-task-template-box {
    background: rgba(30, 58, 138, 0.22) !important;
    border: 1px solid rgba(96, 165, 250, 0.28) !important;
}

[data-theme="dark"] .cohort-template-link {
    color: #60a5fa !important;
}

[data-theme="dark"] .cohort-template-link:hover {
    color: #93c5fd !important;
}

[data-theme="dark"] .cohort-template-hint {
    color: #94a3b8 !important;
}

[data-theme="dark"] .cohort-roster-card h2 {
    color: #f8fafc !important;
}

[data-theme="dark"] .cohort-roster-card p {
    color: #94a3b8 !important;
}

[data-theme="dark"] .cohort-requirement-status {
    background: rgba(23, 34, 51, 0.65) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    backdrop-filter: blur(12px) !important;
}

[data-theme="dark"] .cohort-requirement-status > span {
    color: #e2e8f0 !important;
}

[data-theme="dark"] .cohort-requirement-status > a {
    color: #60a5fa !important;
}

[data-theme="dark"] .cohort-requirement-status > a:hover {
    color: #93c5fd !important;
    text-decoration: underline;
}

[data-theme="dark"] .cohort-requirement-status > small {
    color: #fbbf24 !important;
}

[data-theme="dark"] .cohort-create-form {
    background: rgba(15, 23, 42, 0.72) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    backdrop-filter: blur(20px) !important;
}

[data-theme="dark"] .cohort-form-heading h2 {
    color: #f8fafc !important;
}

[data-theme="dark"] .cohort-form-heading > p,
[data-theme="dark"] .cohort-form-heading .eyebrow {
    color: #94a3b8 !important;
}

[data-theme="dark"] .cohort-record-heading h2 {
    color: #f8fafc !important;
}

[data-theme="dark"] .cohort-record-heading p:last-child {
    color: #94a3b8 !important;
}

[data-theme="dark"] .cohort-record-heading .eyebrow {
    color: #60a5fa !important;
}

[data-theme="dark"] .cohort-record-description {
    color: #cbd5e1 !important;
}

[data-theme="dark"] .cohort-committee-assignments {
    border-top-color: rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] .cohort-committee-assignments h3 {
    color: #f8fafc !important;
}

[data-theme="dark"] .cohort-assignment-heading p,
[data-theme="dark"] .cohort-assignment-empty,
[data-theme="dark"] .cohort-assignment-hint {
    color: #94a3b8 !important;
}

[data-theme="dark"] .cohort-committee-name {
    color: #e2e8f0 !important;
}

[data-theme="dark"] .cohort-committee-name small {
    color: #94a3b8 !important;
}

[data-theme="dark"] .cohort-edit-form {
    border-top-color: rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] .candidate-search-panel {
    background: rgba(15, 23, 42, 0.72) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    backdrop-filter: blur(20px) !important;
}

[data-theme="dark"] .candidate-search-panel h2 {
    color: #f8fafc !important;
}

[data-theme="dark"] .candidate-search-panel p:last-child {
    color: #94a3b8 !important;
}

[data-theme="dark"] .candidate-search-panel .eyebrow {
    color: #60a5fa !important;
}

[data-theme="dark"] .candidate-empty-state {
    background: rgba(15, 23, 42, 0.5) !important;
    border: 1px dashed rgba(255, 255, 255, 0.15) !important;
}

[data-theme="dark"] .candidate-empty-state h2 {
    color: #f8fafc !important;
}

[data-theme="dark"] .candidate-empty-state p {
    color: #94a3b8 !important;
}

[data-theme="dark"] .candidate-results-heading h2 {
    color: #f8fafc !important;
}

[data-theme="dark"] .candidate-results-heading span {
    color: #94a3b8 !important;
}

[data-theme="dark"] .candidate-row {
    background: rgba(23, 34, 51, 0.7) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    backdrop-filter: blur(14px) !important;
}

[data-theme="dark"] .candidate-identity h3,
[data-theme="dark"] .candidate-name {
    color: #f8fafc !important;
}

[data-theme="dark"] .candidate-identity p,
[data-theme="dark"] .candidate-nip {
    color: #94a3b8 !important;
}

[data-theme="dark"] .candidate-avatar {
    background: rgba(30, 58, 138, 0.4) !important;
    border: 1px solid rgba(96, 165, 250, 0.3) !important;
    color: #93c5fd !important;
}

[data-theme="dark"] .candidate-enroll-form label {
    color: #cbd5e1 !important;
}

[data-theme="dark"] .selected-enrollment-context {
    background: rgba(23, 34, 51, 0.75) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #e2e8f0 !important;
}

[data-theme="dark"] .selected-enrollment-context strong {
    color: #f8fafc !important;
}

[data-theme="dark"] .selected-enrollment-context small {
    color: #94a3b8 !important;
}

/* Task 19I: Compact Participant Roster, Upload Progress Summary & Expandable Details */
.cohort-roster-section {
    margin: 1.5rem 0 2rem;
    display: grid;
    gap: 1rem;
}

.cohort-roster-top {
    padding: clamp(1rem, 2vw, 1.35rem);
    border-radius: 1.25rem;
    border: 1px solid rgba(210, 222, 240, 0.9);
    background: rgba(255, 255, 255, 0.78);
    box-shadow: 0 12px 32px rgba(35, 62, 104, 0.08);
    display: grid;
    gap: 1rem;
}

.cohort-roster-title-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.85rem 1.25rem;
}

.cohort-roster-title-row h2 {
    margin: 0.15rem 0 0;
    font-size: 1.2rem;
    color: #14213a;
}

.cohort-roster-stats-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.55rem;
}

.cohort-roster-stat-chip {
    display: inline-flex;
    align-items: baseline;
    gap: 0.4rem;
    padding: 0.45rem 0.8rem;
    border-radius: 999px;
    border: 1px solid rgba(205, 219, 238, 0.9);
    background: rgba(246, 250, 255, 0.9);
    color: #2c4363;
    font-size: 0.78rem;
}

.cohort-roster-stat-chip strong {
    font-size: 0.95rem;
    font-weight: 750;
    color: #1556b0;
}

.cohort-roster-stat-chip.is-complete strong {
    color: #15803d;
}

.cohort-roster-stat-chip.is-incomplete strong {
    color: #b45309;
}

.cohort-roster-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1.8fr) minmax(170px, 0.8fr) auto;
    align-items: end;
    gap: 0.75rem;
}

.cohort-roster-toolbar .admin-field {
    margin: 0;
}

.cohort-roster-toolbar-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.cohort-roster-toolbar-actions .button {
    min-height: 46px;
}

.cohort-roster-meta-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    padding-top: 0.65rem;
    border-top: 1px solid rgba(210, 222, 240, 0.65);
    font-size: 0.8rem;
    color: #52657f;
}

.cohort-roster-active-filter strong {
    color: #1556b0;
}

.cohort-roster-table-shell {
    border-radius: 1.25rem;
    border: 1px solid rgba(210, 222, 240, 0.9);
    background: rgba(255, 255, 255, 0.82);
    box-shadow: 0 12px 32px rgba(35, 62, 104, 0.07);
    overflow: hidden;
}

.cohort-roster-table-head {
    display: grid;
    grid-template-columns: minmax(200px, 1.45fr) minmax(240px, 1.75fr) minmax(135px, 0.85fr) auto;
    align-items: center;
    gap: 1rem;
    padding: 0.7rem 1.15rem;
    background: rgba(238, 244, 253, 0.85);
    border-bottom: 1px solid rgba(210, 222, 240, 0.9);
    font-size: 0.72rem;
    font-weight: 750;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #4f6480;
}

.cohort-roster-list {
    display: grid;
}

.cohort-roster-row {
    display: grid;
    grid-template-columns: minmax(200px, 1.45fr) minmax(240px, 1.75fr) minmax(135px, 0.85fr) auto;
    align-items: start;
    gap: 0.85rem 1rem;
    padding: 0.78rem 1.15rem;
    border-bottom: 1px solid rgba(215, 226, 242, 0.75);
    background: transparent;
    transition: background 160ms ease;
}

.cohort-roster-row:last-child {
    border-bottom: 0;
}

.cohort-roster-row:hover {
    background: rgba(240, 246, 255, 0.55);
}

.cohort-roster-identity {
    min-width: 0;
    display: grid;
    gap: 0.18rem;
}

.cohort-roster-name {
    margin: 0;
    font-size: 0.94rem;
    font-weight: 700;
    color: #162a47;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.cohort-roster-email {
    margin: 0;
    font-size: 0.77rem;
    color: #5e718d;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.cohort-roster-progress {
    min-width: 0;
    display: grid;
    gap: 0.38rem;
}

.cohort-roster-progress-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.35rem 0.6rem;
}

.cohort-roster-progress-ratio {
    font-size: 0.82rem;
    font-weight: 700;
    color: #1e3a5f;
    font-variant-numeric: tabular-nums;
}

.cohort-mini-progress-track {
    width: 100%;
    height: 6px;
    border-radius: 999px;
    background: rgba(208, 221, 239, 0.85);
    overflow: hidden;
}

.cohort-mini-progress-fill {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #1556b0, #3b82f6);
    transition: width 240ms ease;
}

.cohort-mini-progress-fill.is-complete {
    background: linear-gradient(90deg, #15803d, #22c55e);
}

.cohort-mini-progress-fill.is-empty {
    width: 0 !important;
}

.cohort-progress-details {
    margin-top: 0.1rem;
}

.cohort-progress-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    cursor: pointer;
    list-style: none;
    user-select: none;
    color: #1556b0;
    font-size: 0.76rem;
    font-weight: 680;
    padding: 0.15rem 0;
}

.cohort-progress-toggle::-webkit-details-marker {
    display: none;
}

.cohort-progress-toggle:hover {
    color: #0d3a78;
    text-decoration: underline;
}

.cohort-progress-chevron {
    display: inline-block;
    transition: transform 180ms ease;
    font-size: 0.75rem;
}

.cohort-progress-details[open] .cohort-progress-chevron {
    transform: rotate(180deg);
}

.cohort-progress-drawer {
    margin-top: 0.45rem;
    display: grid;
    gap: 0.45rem;
}

.cohort-progress-drawer .cohort-requirement-status {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.35rem;
    padding: 0.55rem 0.7rem;
    border-radius: 0.75rem;
    border: 1px solid rgba(208, 221, 239, 0.9);
    background: rgba(248, 251, 255, 0.92);
}

.cohort-req-item-main {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.3rem 0.5rem;
}

.cohort-req-item-title {
    font-size: 0.81rem;
    font-weight: 650;
    color: #1e3554;
}

.cohort-req-item-product {
    display: inline-flex;
    align-items: center;
    padding: 0.12rem 0.45rem;
    border-radius: 6px;
    background: rgba(226, 236, 251, 0.85);
    color: #274c82;
    font-size: 0.68rem;
    font-weight: 650;
}

.cohort-req-item-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.65rem;
}

.cohort-req-item-link {
    font-size: 0.75rem;
    font-weight: 650;
    color: #1556b0;
    text-decoration: none;
}

.cohort-req-item-link:hover {
    text-decoration: underline;
    color: #0d3a78;
}

.cohort-req-item-warning {
    color: #92400e;
    font-size: 0.73rem;
}

.cohort-progress-empty {
    margin: 0;
    font-size: 0.78rem;
    color: #64748b;
}

.cohort-roster-enrollment-state {
    display: flex;
    align-items: center;
}

.cohort-roster-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.cohort-roster-actions form {
    margin: 0;
}

.button-compact {
    min-height: 36px !important;
    padding: 0.35rem 0.75rem !important;
    font-size: 0.77rem !important;
    border-radius: 10px !important;
    white-space: nowrap;
}

@media (max-width: 900px) {
    .cohort-roster-toolbar {
        grid-template-columns: 1fr 1fr;
    }
    .cohort-roster-toolbar-actions {
        grid-column: 1 / -1;
    }
    .cohort-roster-table-head {
        display: none;
    }
    .cohort-roster-row {
        grid-template-columns: 1fr;
        gap: 0.65rem;
        padding: 0.9rem 1rem;
    }
    .cohort-roster-actions {
        justify-content: flex-start;
    }
}

@media (max-width: 560px) {
    .cohort-roster-toolbar {
        grid-template-columns: 1fr;
    }
}

/* Dark Mode: Task 19I Compact Participant Roster */
[data-theme="dark"] .cohort-roster-top,
[data-theme="dark"] .cohort-roster-table-shell {
    background: rgba(15, 23, 42, 0.74) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    backdrop-filter: blur(20px) !important;
}

[data-theme="dark"] .cohort-roster-title-row h2 {
    color: #f8fafc !important;
}

[data-theme="dark"] .cohort-roster-stat-chip {
    background: rgba(23, 34, 51, 0.78) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: #cbd5e1 !important;
}

[data-theme="dark"] .cohort-roster-stat-chip strong {
    color: #38bdf8 !important;
}

[data-theme="dark"] .cohort-roster-stat-chip.is-complete strong {
    color: #4ade80 !important;
}

[data-theme="dark"] .cohort-roster-stat-chip.is-incomplete strong {
    color: #fbbf24 !important;
}

[data-theme="dark"] .cohort-roster-meta-bar {
    border-top-color: rgba(255, 255, 255, 0.08) !important;
    color: #94a3b8 !important;
}

[data-theme="dark"] .cohort-roster-active-filter strong {
    color: #60a5fa !important;
}

[data-theme="dark"] .cohort-roster-table-head {
    background: rgba(23, 34, 51, 0.85) !important;
    border-bottom-color: rgba(255, 255, 255, 0.09) !important;
    color: #94a3b8 !important;
}

[data-theme="dark"] .cohort-roster-row {
    border-bottom-color: rgba(255, 255, 255, 0.07) !important;
}

[data-theme="dark"] .cohort-roster-row:hover {
    background: rgba(30, 45, 68, 0.45) !important;
}

[data-theme="dark"] .cohort-roster-name {
    color: #f8fafc !important;
}

[data-theme="dark"] .cohort-roster-email {
    color: #94a3b8 !important;
}

[data-theme="dark"] .cohort-roster-progress-ratio {
    color: #e2e8f0 !important;
}

[data-theme="dark"] .cohort-mini-progress-track {
    background: rgba(30, 45, 68, 0.9) !important;
}

[data-theme="dark"] .cohort-progress-toggle {
    color: #60a5fa !important;
}

[data-theme="dark"] .cohort-progress-toggle:hover {
    color: #93c5fd !important;
}

[data-theme="dark"] .cohort-progress-drawer .cohort-requirement-status {
    background: rgba(23, 34, 51, 0.82) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

[data-theme="dark"] .cohort-req-item-title {
    color: #f1f5f9 !important;
}

[data-theme="dark"] .cohort-req-item-product {
    background: rgba(30, 58, 138, 0.35) !important;
    color: #93c5fd !important;
}

[data-theme="dark"] .cohort-req-item-link {
    color: #60a5fa !important;
}

[data-theme="dark"] .cohort-req-item-link:hover {
    color: #93c5fd !important;
}

[data-theme="dark"] .cohort-req-item-warning {
    color: #fbbf24 !important;
}

@media (prefers-reduced-transparency: reduce) {
    [data-theme="dark"] .cohort-task-configuration,
    [data-theme="dark"] .cohort-task-summary,
    [data-theme="dark"] .cohort-task-option,
    [data-theme="dark"] .cohort-progress-counts span,
    [data-theme="dark"] .cohort-requirement-status,
    [data-theme="dark"] .cohort-create-form,
    [data-theme="dark"] .candidate-search-panel,
    [data-theme="dark"] .candidate-row,
    [data-theme="dark"] .participant-autocomplete-dropdown {
        background: #0f172a !important;
    }
}

/* Task 19J & Task 19K: Participant & Work Search Autocomplete & Typo-Tolerant Suggestions (iOS 26 Liquid Glass) */
.cohort-roster-top,
.cohort-roster-toolbar,
.candidate-search-panel,
.candidate-search-form,
.work-filter-form,
.work-filter-grid,
.search-panel,
.kolase-search {
    position: relative;
    overflow: visible !important;
}

.cohort-roster-top,
.candidate-search-panel,
.work-filter-form,
.search-panel,
.kolase-search {
    z-index: 25;
}

.search-field.participant-autocomplete-wrapper > label.sr-only {
    margin: 0;
}

.participant-autocomplete-wrapper {
    position: relative;
    min-width: 0;
}

.participant-autocomplete-wrapper > label {
    display: block;
    margin-bottom: 0.35rem;
}

.participant-autocomplete-control {
    position: relative;
    width: 100%;
}

.participant-autocomplete-control > input {
    width: 100%;
    box-sizing: border-box;
}

.participant-autocomplete-dropdown {
    position: absolute;
    top: calc(100% + 0.45rem);
    left: 0;
    right: 0;
    z-index: 90;
    border-radius: 1rem;
    border: 1px solid rgba(196, 212, 236, 0.92);
    background: linear-gradient(155deg, rgba(255, 255, 255, 0.96), rgba(244, 248, 255, 0.94));
    box-shadow: 0 18px 42px rgba(20, 43, 79, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.95);
    -webkit-backdrop-filter: blur(22px) saturate(165%);
    backdrop-filter: blur(22px) saturate(165%);
    overflow: hidden;
}

.participant-autocomplete-dropdown[hidden] {
    display: none !important;
}

.participant-autocomplete-header {
    padding: 0.55rem 0.9rem;
    border-bottom: 1px solid rgba(210, 222, 240, 0.85);
    background: rgba(236, 243, 253, 0.72);
    font-size: 0.69rem;
    font-weight: 750;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #4b617e;
}

.participant-autocomplete-list {
    max-height: 320px;
    overflow-y: auto;
    display: grid;
}

.participant-autocomplete-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.68rem 0.9rem;
    border-bottom: 1px solid rgba(215, 226, 242, 0.7);
    cursor: pointer;
    transition: background 140ms ease;
}

.participant-autocomplete-item:last-child {
    border-bottom: 0;
}

.participant-autocomplete-item:hover,
.participant-autocomplete-item.is-active {
    background: rgba(226, 238, 255, 0.85);
}

.participant-autocomplete-main {
    min-width: 0;
    display: grid;
    gap: 0.18rem;
}

.participant-autocomplete-name-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
}

.participant-autocomplete-name {
    font-size: 0.88rem;
    font-weight: 700;
    color: #152946;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.participant-autocomplete-mark {
    padding: 0.04rem 0.2rem;
    border-radius: 4px;
    background: rgba(37, 99, 235, 0.15);
    color: #123e85;
    font-weight: 750;
}

.participant-autocomplete-tier.is-fuzzy {
    display: inline-flex;
    align-items: center;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    background: rgba(245, 158, 11, 0.15);
    border: 1px solid rgba(217, 119, 6, 0.3);
    color: #92400e;
    font-size: 0.66rem;
    font-weight: 680;
}

.participant-autocomplete-status {
    display: inline-flex;
    align-items: center;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    font-size: 0.65rem;
    font-weight: 700;
}

.participant-autocomplete-status.is-published {
    background: rgba(22, 163, 74, 0.14);
    border: 1px solid rgba(22, 163, 74, 0.28);
    color: #166534;
}

.participant-autocomplete-status.is-draft {
    background: rgba(100, 116, 139, 0.14);
    border: 1px solid rgba(100, 116, 139, 0.28);
    color: #475569;
}

.participant-autocomplete-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.75rem;
    color: #5b6f8a;
    line-height: 1.3;
}

.participant-autocomplete-email {
    overflow-wrap: anywhere;
}

.participant-autocomplete-nip {
    font-variant-numeric: tabular-nums;
    color: #4f6480;
}

.participant-autocomplete-action {
    flex: 0 0 auto;
    font-size: 0.74rem;
    font-weight: 680;
    color: #1556b0;
    white-space: nowrap;
}

.participant-autocomplete-item.is-active .participant-autocomplete-action {
    color: #0d3a78;
    text-decoration: underline;
}

.participant-autocomplete-state {
    display: grid;
    gap: 0.2rem;
    padding: 0.85rem 0.95rem;
    font-size: 0.8rem;
    color: #334b6b;
}

.participant-autocomplete-state strong {
    font-size: 0.83rem;
    font-weight: 700;
    color: #182f4f;
}

.participant-autocomplete-state span {
    font-size: 0.75rem;
    color: #5d708b;
    line-height: 1.4;
}

.participant-autocomplete-state.is-error strong {
    color: #b91c1c;
}

.candidate-meta-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem;
    margin: 0;
    color: #6b7d96;
    font-size: 0.75rem;
}

/* Dark Mode: Task 19J Participant Search Autocomplete */
[data-theme="dark"] .participant-autocomplete-dropdown {
    background: linear-gradient(155deg, rgba(15, 23, 42, 0.95), rgba(23, 34, 54, 0.94)) !important;
    border-color: rgba(148, 163, 184, 0.22) !important;
    box-shadow: 0 20px 46px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
    -webkit-backdrop-filter: blur(22px) saturate(165%) !important;
    backdrop-filter: blur(22px) saturate(165%) !important;
}

[data-theme="dark"] .participant-autocomplete-header {
    background: rgba(30, 41, 59, 0.85) !important;
    border-bottom-color: rgba(255, 255, 255, 0.09) !important;
    color: #94a3b8 !important;
}

[data-theme="dark"] .participant-autocomplete-item {
    border-bottom-color: rgba(255, 255, 255, 0.07) !important;
}

[data-theme="dark"] .participant-autocomplete-item:hover,
[data-theme="dark"] .participant-autocomplete-item.is-active {
    background: rgba(30, 58, 138, 0.42) !important;
}

[data-theme="dark"] .participant-autocomplete-name {
    color: #f8fafc !important;
}

[data-theme="dark"] .participant-autocomplete-mark {
    background: rgba(56, 189, 248, 0.22) !important;
    color: #bae6fd !important;
}

[data-theme="dark"] .participant-autocomplete-tier.is-fuzzy {
    background: rgba(245, 158, 11, 0.18) !important;
    border-color: rgba(251, 191, 36, 0.35) !important;
    color: #fcd34d !important;
}

[data-theme="dark"] .participant-autocomplete-status.is-published {
    background: rgba(34, 197, 94, 0.18) !important;
    border-color: rgba(74, 222, 128, 0.32) !important;
    color: #86efac !important;
}

[data-theme="dark"] .participant-autocomplete-status.is-draft {
    background: rgba(148, 163, 184, 0.16) !important;
    border-color: rgba(148, 163, 184, 0.3) !important;
    color: #cbd5e1 !important;
}

[data-theme="dark"] .participant-autocomplete-meta,
[data-theme="dark"] .participant-autocomplete-nip {
    color: #94a3b8 !important;
}

[data-theme="dark"] .participant-autocomplete-action {
    color: #60a5fa !important;
}

[data-theme="dark"] .participant-autocomplete-item.is-active .participant-autocomplete-action {
    color: #93c5fd !important;
}

[data-theme="dark"] .participant-autocomplete-state {
    color: #cbd5e1 !important;
}

[data-theme="dark"] .participant-autocomplete-state strong {
    color: #f8fafc !important;
}

[data-theme="dark"] .participant-autocomplete-state span {
    color: #94a3b8 !important;
}

[data-theme="dark"] .participant-autocomplete-state.is-error strong {
    color: #f87171 !important;
}

/* 4. Canvas & Artwork Color Integrity Protection
   Ensures that document content and book covers are NEVER inverted, tinted, or filtered */
.paper-book,
.paper-sheet,
canvas,
.slide-canvas,
.canvas-page,
.book-cover img,
.album-artwork img,
.detail-cover-image {
    filter: none !important;
    -webkit-filter: none !important;
}

/* ==========================================================================
   TASK 19L — REPOSITORY FRONT PAGE REDESIGN: iOS 26 LIQUID GLASS × APPLE MUSIC
   - Replaces legacy book & planetary orbit Hero with Featured Spotlight Showcase
   - Compact 5-column Desktop / 2-column Mobile Poster Grid
   - Adaptive Dark/Light Glass Poster Covers for works without uploaded covers
   ========================================================================== */

.repository-page .hero.repo-ios26-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border-radius: 0 0 32px 32px;
    background:
        radial-gradient(circle at 16% 12%, rgba(56, 189, 248, 0.16) 0%, transparent 42%),
        radial-gradient(circle at 86% 24%, rgba(99, 102, 241, 0.12) 0%, transparent 44%),
        linear-gradient(135deg, #f4f8ff 0%, #eaf1fc 54%, #f7faff 100%);
    border-bottom: 1px solid rgba(20, 33, 58, 0.08);
}

/* Remove legacy giant white circle on the right edge */
.repository-page .hero.repo-ios26-hero::after {
    display: none !important;
    content: none !important;
}

.repository-page .hero-inner.repo-hero-grid {
    width: min(1160px, 92%);
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1.18fr) minmax(320px, 0.82fr);
    align-items: center;
    gap: clamp(1.5rem, 3.2vw, 2.75rem);
    padding: 6.4rem 0 2.6rem;
}

.repository-page .repo-hero-copy {
    max-width: 680px;
    padding: 0;
}

.repository-page .repo-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.48rem;
    margin: 0 0 0.85rem;
    padding: 0.34rem 0.78rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    background: rgba(37, 99, 235, 0.1);
    color: #1d4ed8;
    border: 1px solid rgba(37, 99, 235, 0.22);
}

.repository-page .repo-ios26-hero h1 {
    max-width: 640px;
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Segoe UI", Roboto, sans-serif;
    font-size: clamp(2rem, 3.5vw, 3.05rem);
    font-weight: 780;
    letter-spacing: -0.035em;
    line-height: 1.1;
    color: #0f172a;
}

.repository-page .repo-ios26-hero h1 span {
    font-style: normal;
    background: linear-gradient(92deg, #2563eb 0%, #0ea5e9 52%, #6366f1 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.repository-page .repo-ios26-hero .hero-description {
    max-width: 560px;
    margin: 0.85rem 0 1.15rem;
    font-size: 0.96rem;
    line-height: 1.62;
    color: #475569;
}

/* Quick Category Pills (Apple Music / Spotify style) */
.repository-page .repo-quick-pills-wrap {
    display: flex;
    flex-direction: column;
    gap: 0.48rem;
}

.repository-page .repo-quick-pills-label {
    font-size: 0.74rem;
    font-weight: 600;
    color: #64748b;
}

.repository-page .repo-quick-pills {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem;
}

.repository-page .repo-quick-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.42rem 0.88rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    color: #1e293b;
    background: rgba(255, 255, 255, 0.76);
    border: 1px solid rgba(15, 23, 42, 0.1);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
    transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.repository-page .repo-quick-pill:hover {
    transform: translateY(-1px);
    background: #ffffff;
    border-color: rgba(37, 99, 235, 0.32);
    color: #1d4ed8;
}

.repository-page .repo-quick-pill.is-active {
    background: linear-gradient(135deg, #2563eb 0%, #0284c7 100%);
    border-color: rgba(255, 255, 255, 0.22);
    color: #ffffff;
    box-shadow: 0 6px 18px rgba(37, 99, 235, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

/* Right Column: Featured Spotlight Showcase Card */
.repository-page .repo-spotlight-col {
    min-width: 0;
}

.repository-page .repo-spotlight-card {
    position: relative;
    overflow: hidden;
    padding: 1.15rem 1.25rem;
    border-radius: 22px;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.88), rgba(241, 245, 249, 0.94));
    border: 1px solid rgba(15, 23, 42, 0.1);
    backdrop-filter: blur(28px) saturate(165%);
    -webkit-backdrop-filter: blur(28px) saturate(165%);
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.09), inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

.repository-page .repo-spotlight-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.8rem;
}

.repository-page .repo-spotlight-kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: #0284c7;
}

.repository-page .repo-spotlight-year {
    font-size: 0.74rem;
    font-weight: 600;
    color: #64748b;
}

.repository-page .repo-spotlight-body {
    display: flex;
    align-items: center;
    gap: 0.95rem;
}

.repository-page .repo-spotlight-thumb {
    flex: 0 0 84px;
    width: 84px;
    aspect-ratio: 3 / 4;
    border-radius: 13px;
    overflow: hidden;
    display: block;
    text-decoration: none;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.16);
    border: 1px solid rgba(15, 23, 42, 0.1);
}

.repository-page .repo-spotlight-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.repository-page .repo-spotlight-thumb-poster {
    width: 100%;
    height: 100%;
    padding: 0.6rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: linear-gradient(160deg, #0f766e 0%, #115e59 52%, #0f172a 100%);
    color: #ffffff;
}

.repository-page .repo-spotlight-thumb-tag {
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    color: #99f6e4;
}

.repository-page .repo-spotlight-thumb-bar {
    display: block;
    width: 28px;
    height: 3px;
    border-radius: 999px;
    background: #5eead4;
}

.repository-page .repo-spotlight-thumb-type {
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1.2;
    color: #f0fdfa;
}

.repository-page .repo-spotlight-info {
    min-width: 0;
    flex: 1;
}

.repository-page .repo-spotlight-badge {
    display: inline-block;
    margin-bottom: 0.35rem;
    padding: 0.18rem 0.55rem;
    border-radius: 7px;
    font-size: 0.7rem;
    font-weight: 700;
    background: rgba(13, 148, 136, 0.12);
    color: #0f766e;
    border: 1px solid rgba(13, 148, 136, 0.25);
}

.repository-page .repo-spotlight-title {
    margin: 0 0 0.3rem;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", sans-serif;
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.32;
    color: #0f172a;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.repository-page .repo-spotlight-title a {
    color: inherit;
    text-decoration: none;
}

.repository-page .repo-spotlight-title a:hover {
    color: #2563eb;
}

.repository-page .repo-spotlight-author {
    margin: 0;
    font-size: 0.78rem;
    font-weight: 600;
    color: #334155;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.repository-page .repo-spotlight-unit {
    margin: 0.12rem 0 0;
    font-size: 0.74rem;
    color: #64748b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.repository-page .repo-spotlight-footer {
    margin-top: 0.85rem;
    padding-top: 0.7rem;
    border-top: 1px solid rgba(15, 23, 42, 0.08);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    font-size: 0.74rem;
}

.repository-page .repo-spotlight-next {
    min-width: 0;
    color: #475569;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.repository-page .repo-spotlight-next strong {
    color: #0284c7;
}

.repository-page .repo-spotlight-cta {
    flex-shrink: 0;
    font-weight: 700;
    color: #2563eb;
    text-decoration: none;
}

.repository-page .repo-spotlight-cta:hover {
    text-decoration: underline;
}

/* Catalog Section Container & Unified Glass Search Bar */
.repository-page .catalog-section {
    width: min(1160px, 92%);
    margin-inline: auto;
    padding: 1.8rem 0 4.2rem;
}

.repository-page .section-heading {
    margin-bottom: 0.85rem;
}

.repository-page .section-heading h2 {
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", sans-serif;
    font-size: clamp(1.45rem, 2.3vw, 1.85rem);
    font-weight: 760;
    letter-spacing: -0.025em;
}

.repository-page .search-panel {
    display: grid;
    grid-template-columns: minmax(220px, 1.8fr) repeat(4, minmax(120px, 1fr)) auto;
    gap: 0.5rem;
    padding: 0.55rem;
    border-radius: 18px;
}

.repository-page .search-field {
    min-height: 42px;
    padding: 0 0.65rem;
    border-radius: 12px;
}

.repository-page .search-field input {
    min-height: 40px;
    font-size: 0.84rem;
}

.repository-page .filter-field select {
    min-height: 42px;
    padding: 0 1.8rem 0 0.7rem;
    border-radius: 12px;
    font-size: 0.8rem;
}

.repository-page .search-panel > .button {
    min-height: 42px;
    padding: 0 1rem;
    border-radius: 12px;
    font-size: 0.82rem;
    white-space: nowrap;
}

/* ==========================================================================
   APPLE MUSIC / APPLE BOOKS COMPACT POSTER GRID (5 Cols Desktop / 2 Cols Mobile)
   ========================================================================== */

.repository-page .work-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 1rem;
    border: 0;
}

.repository-page .work-card.work-card-poster {
    min-height: 0;
    padding: 0.6rem;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.88);
    border: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.05);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.22s ease, border-color 0.22s ease;
}

.repository-page .work-card.work-card-poster:hover {
    transform: translateY(-4px);
    border-color: rgba(37, 99, 235, 0.28);
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.1);
}

.repository-page .work-card-poster-link {
    display: block;
    text-decoration: none;
    color: inherit;
    margin-bottom: 0.55rem;
}

.repository-page .work-card-cover-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 5;
    border-radius: 12px;
    overflow: hidden;
    background: #e2e8f0;
    border: 1px solid rgba(15, 23, 42, 0.08);
}

.repository-page .work-card-cover-frame .work-card-cover {
    width: 100%;
    height: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    display: block;
}

/* Adaptive Glass Poster Cover (Replaces Glaring White Demo Cover Boxes) */
.repository-page .work-card-adaptive-poster {
    width: 100%;
    aspect-ratio: 4 / 5;
    border-radius: 12px;
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(15, 23, 42, 0.08);
}

/* Light Mode Adaptive Poster Palettes */
.repository-page .work-card-adaptive-poster.variant-0 {
    background: linear-gradient(155deg, #ccfbf1 0%, #e0f2fe 65%, #f8fafc 100%);
    --poster-accent: #0d9488;
}
.repository-page .work-card-adaptive-poster.variant-1 {
    background: linear-gradient(155deg, #dbeafe 0%, #eff6ff 65%, #f8fafc 100%);
    --poster-accent: #2563eb;
}
.repository-page .work-card-adaptive-poster.variant-2 {
    background: linear-gradient(155deg, #e0e7ff 0%, #eef2ff 65%, #f8fafc 100%);
    --poster-accent: #4f46e5;
}
.repository-page .work-card-adaptive-poster.variant-3 {
    background: linear-gradient(155deg, #fef3c7 0%, #fffbeb 65%, #f8fafc 100%);
    --poster-accent: #d97706;
}
.repository-page .work-card-adaptive-poster.variant-4 {
    background: linear-gradient(155deg, #fce7f3 0%, #fdf2f8 65%, #f8fafc 100%);
    --poster-accent: #db2777;
}

.repository-page .adaptive-poster-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.35rem;
}

.repository-page .adaptive-poster-brand {
    padding: 0.16rem 0.46rem;
    border-radius: 6px;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    background: rgba(255, 255, 255, 0.85);
    color: var(--poster-accent, #2563eb);
    border: 1px solid rgba(15, 23, 42, 0.08);
}

.repository-page .adaptive-poster-year {
    font-size: 0.72rem;
    font-weight: 700;
    color: #334155;
}

.repository-page .adaptive-poster-center {
    margin: auto 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.4rem;
}

.repository-page .adaptive-poster-icon {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    color: var(--poster-accent, #2563eb);
    background: rgba(255, 255, 255, 0.75);
    border: 1px solid rgba(15, 23, 42, 0.08);
}

.repository-page .adaptive-poster-bar {
    display: block;
    width: 36px;
    height: 4px;
    border-radius: 999px;
    background: var(--poster-accent, #2563eb);
}

.repository-page .adaptive-poster-bottom {
    min-width: 0;
}

.repository-page .adaptive-poster-type {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    color: #334155;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Compact Metadata Content Inside Poster Card */
.repository-page .work-card.work-card-poster .work-card-content {
    min-height: 0;
    padding: 0.1rem 0.15rem 0.05rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.repository-page .work-card.work-card-poster .work-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.35rem;
    margin-bottom: 0.3rem;
}

.repository-page .work-card.work-card-poster .badge {
    padding: 0.16rem 0.48rem;
    border-radius: 6px;
    font-size: 0.68rem;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 76%;
}

.repository-page .work-card.work-card-poster .work-year {
    font-size: 0.72rem;
    font-weight: 600;
    flex-shrink: 0;
}

.repository-page .work-card.work-card-poster h3 {
    margin: 0 0 0.45rem;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", sans-serif;
    font-size: 0.88rem;
    font-weight: 680;
    letter-spacing: -0.012em;
    line-height: 1.34;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.repository-page .work-card.work-card-poster .work-card-meta-footer {
    margin-top: auto;
    padding-top: 0.42rem;
    border-top: 1px solid rgba(15, 23, 42, 0.07);
}

.repository-page .work-card.work-card-poster .work-author {
    margin: 0;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.repository-page .work-card.work-card-poster .work-unit {
    margin: 0.1rem 0 0;
    padding-top: 0;
    font-size: 0.71rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ==========================================================================
   DARK MODE: iOS 26 LIQUID GLASS REPOSITORY HERO & COMPACT POSTER GRID
   ========================================================================== */

[data-theme="dark"] .repository-page .hero.repo-ios26-hero {
    background:
        radial-gradient(circle at 18% 10%, rgba(56, 189, 248, 0.16) 0%, transparent 42%),
        radial-gradient(circle at 85% 20%, rgba(99, 102, 241, 0.14) 0%, transparent 45%),
        linear-gradient(135deg, #091120 0%, #070d19 56%, #050912 100%) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] .repository-page .repo-hero-eyebrow {
    background: rgba(56, 189, 248, 0.14) !important;
    color: #38bdf8 !important;
    border-color: rgba(56, 189, 248, 0.28) !important;
}

[data-theme="dark"] .repository-page .repo-ios26-hero h1 {
    color: #f8fafc !important;
}

[data-theme="dark"] .repository-page .repo-ios26-hero h1 span {
    background: linear-gradient(92deg, #38bdf8 0%, #818cf8 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
}

[data-theme="dark"] .repository-page .repo-ios26-hero .hero-description {
    color: #94a3b8 !important;
}

[data-theme="dark"] .repository-page .repo-quick-pills-label {
    color: #94a3b8 !important;
}

[data-theme="dark"] .repository-page .repo-quick-pill {
    background: rgba(30, 41, 59, 0.66) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: #e2e8f0 !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

[data-theme="dark"] .repository-page .repo-quick-pill:hover {
    background: rgba(51, 65, 85, 0.82) !important;
    border-color: rgba(56, 189, 248, 0.4) !important;
    color: #ffffff !important;
}

[data-theme="dark"] .repository-page .repo-quick-pill.is-active {
    background: linear-gradient(135deg, #2563eb 0%, #0284c7 100%) !important;
    border-color: rgba(255, 255, 255, 0.26) !important;
    color: #ffffff !important;
}

[data-theme="dark"] .repository-page .repo-spotlight-card {
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.74), rgba(15, 23, 42, 0.9)) !important;
    border-color: rgba(255, 255, 255, 0.14) !important;
    box-shadow: 0 18px 42px rgba(2, 6, 23, 0.52), inset 0 1px 0 rgba(255, 255, 255, 0.16) !important;
}

[data-theme="dark"] .repository-page .repo-spotlight-kicker {
    color: #38bdf8 !important;
}

[data-theme="dark"] .repository-page .repo-spotlight-year {
    color: #94a3b8 !important;
}

[data-theme="dark"] .repository-page .repo-spotlight-thumb {
    border-color: rgba(255, 255, 255, 0.18) !important;
}

[data-theme="dark"] .repository-page .repo-spotlight-badge {
    background: rgba(20, 184, 166, 0.18) !important;
    color: #5eead4 !important;
    border-color: rgba(20, 184, 166, 0.32) !important;
}

[data-theme="dark"] .repository-page .repo-spotlight-title,
[data-theme="dark"] .repository-page .repo-spotlight-title a {
    color: #f8fafc !important;
}

[data-theme="dark"] .repository-page .repo-spotlight-title a:hover {
    color: #38bdf8 !important;
}

[data-theme="dark"] .repository-page .repo-spotlight-author {
    color: #cbd5e1 !important;
}

[data-theme="dark"] .repository-page .repo-spotlight-unit {
    color: #94a3b8 !important;
}

[data-theme="dark"] .repository-page .repo-spotlight-footer {
    border-top-color: rgba(255, 255, 255, 0.1) !important;
}

[data-theme="dark"] .repository-page .repo-spotlight-next {
    color: #94a3b8 !important;
}

[data-theme="dark"] .repository-page .repo-spotlight-next strong {
    color: #7dd3fc !important;
}

[data-theme="dark"] .repository-page .repo-spotlight-cta {
    color: #38bdf8 !important;
}

/* Dark Mode Poster Cards & Adaptive Dark Glass Covers */
[data-theme="dark"] .repository-page .work-card.work-card-poster {
    background: rgba(15, 23, 42, 0.68) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 10px 24px rgba(2, 6, 23, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] .repository-page .work-card.work-card-poster:hover {
    background: rgba(23, 34, 54, 0.85) !important;
    border-color: rgba(56, 189, 248, 0.38) !important;
    box-shadow: 0 16px 34px rgba(2, 6, 23, 0.58) !important;
}

[data-theme="dark"] .repository-page .work-card-cover-frame {
    background: #0f172a !important;
    border-color: rgba(255, 255, 255, 0.14) !important;
}

[data-theme="dark"] .repository-page .work-card-adaptive-poster {
    border-color: rgba(255, 255, 255, 0.12) !important;
}

[data-theme="dark"] .repository-page .work-card-adaptive-poster.variant-0 {
    background: linear-gradient(155deg, #134e4a 0%, #0f172a 66%, #1e293b 100%) !important;
    --poster-accent: #2dd4bf;
}
[data-theme="dark"] .repository-page .work-card-adaptive-poster.variant-1 {
    background: linear-gradient(155deg, #1e3a8a 0%, #0f172a 66%, #172554 100%) !important;
    --poster-accent: #60a5fa;
}
[data-theme="dark"] .repository-page .work-card-adaptive-poster.variant-2 {
    background: linear-gradient(155deg, #312e81 0%, #0f172a 66%, #1e1b4b 100%) !important;
    --poster-accent: #a5b4fc;
}
[data-theme="dark"] .repository-page .work-card-adaptive-poster.variant-3 {
    background: linear-gradient(155deg, #78350f 0%, #0f172a 68%, #1e293b 100%) !important;
    --poster-accent: #fbbf24;
}
[data-theme="dark"] .repository-page .work-card-adaptive-poster.variant-4 {
    background: linear-gradient(155deg, #831843 0%, #0f172a 68%, #1e293b 100%) !important;
    --poster-accent: #f472b6;
}

[data-theme="dark"] .repository-page .adaptive-poster-brand {
    background: rgba(15, 23, 42, 0.68) !important;
    color: var(--poster-accent, #38bdf8) !important;
    border-color: rgba(255, 255, 255, 0.14) !important;
}

[data-theme="dark"] .repository-page .adaptive-poster-year {
    color: rgba(248, 250, 252, 0.78) !important;
}

[data-theme="dark"] .repository-page .adaptive-poster-icon {
    background: rgba(255, 255, 255, 0.08) !important;
    color: var(--poster-accent, #38bdf8) !important;
    border-color: rgba(255, 255, 255, 0.14) !important;
}

[data-theme="dark"] .repository-page .adaptive-poster-type {
    color: rgba(241, 245, 249, 0.85) !important;
}

[data-theme="dark"] .repository-page .work-card.work-card-poster .work-card-meta-footer {
    border-top-color: rgba(255, 255, 255, 0.09) !important;
}

/* ==========================================================================
   RESPONSIVE BREAKPOINTS FOR POSTER GRID & HERO
   ========================================================================== */

@media (max-width: 1180px) {
    .repository-page .work-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
    .repository-page .search-panel {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
    .repository-page .search-field {
        grid-column: 1 / -1;
    }
    .repository-page .search-panel > .button {
        grid-column: 1 / -1;
    }
}

@media (max-width: 920px) {
    .repository-page .hero-inner.repo-hero-grid {
        grid-template-columns: 1fr;
        gap: 1.25rem;
        padding: 6rem 0 2rem;
    }
    .repository-page .work-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .repository-page .hero-inner.repo-hero-grid {
        width: calc(100% - 1.75rem);
        padding: 8.2rem 0 1.4rem;
        gap: 1rem;
    }
    .repository-page .repo-ios26-hero h1 {
        font-size: clamp(1.65rem, 6.8vw, 2.1rem);
    }
    .repository-page .repo-ios26-hero .hero-description {
        font-size: 0.86rem;
        margin: 0.6rem 0 0.85rem;
    }
    .repository-page .repo-quick-pill {
        padding: 0.35rem 0.72rem;
        font-size: 0.73rem;
    }
    .repository-page .repo-spotlight-card {
        padding: 0.9rem 1rem;
        border-radius: 18px;
    }
    .repository-page .repo-spotlight-thumb {
        flex: 0 0 68px;
        width: 68px;
    }
    .repository-page .catalog-section {
        width: calc(100% - 1.75rem);
        padding: 1.25rem 0 3rem;
    }
    .repository-page .search-panel {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.45rem;
        padding: 0.5rem;
    }
    /* 2 Columns Side-by-Side on Mobile (Pixel 9 Pro 427px, etc.) */
    .repository-page .work-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 0.7rem !important;
    }
    .repository-page .work-card.work-card-poster {
        padding: 0.48rem;
        border-radius: 15px;
    }
    .repository-page .work-card.work-card-poster h3 {
        font-size: 0.8rem;
        margin-bottom: 0.35rem;
    }
    .repository-page .work-card.work-card-poster .work-author {
        font-size: 0.7rem;
    }
    .repository-page .work-card.work-card-poster .work-unit {
        font-size: 0.66rem;
    }
}

/* ==========================================================================
   TASK 19M — KOLASE FRONT PAGE REDESIGN: iOS 26 LIQUID GLASS × KEYNOTE / APPLE MUSIC
   - Replaces legacy 3-book + ring Hero with Featured Presentation Spotlight
   - Harmonized with Repository Hero & 5-column Desktop / 2-column Mobile Grid
   - Adaptive Dark/Light Glass Slide Covers with iconic ▶ Buka affordance
   ========================================================================== */

.kolase-page .kolase-hero.kolase-ios26-hero {
    display: block;
    min-height: 0;
    padding: 0;
    border-radius: 0 0 32px 32px;
    background:
        radial-gradient(circle at 82% 14%, rgba(99, 102, 241, 0.2) 0%, transparent 44%),
        radial-gradient(circle at 14% 22%, rgba(56, 189, 248, 0.14) 0%, transparent 42%),
        linear-gradient(135deg, #09101f 0%, #070d19 56%, #050912 100%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.kolase-page .kolase-hero-grid {
    width: min(1240px, 92%);
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1.18fr) minmax(320px, 0.82fr);
    align-items: center;
    gap: clamp(1.5rem, 3.2vw, 2.75rem);
    padding: 6.4rem 0 2.6rem;
}

.kolase-page .kolase-ios26-hero .kolase-hero-copy {
    max-width: 680px;
}

.kolase-page .kolase-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.48rem;
    margin: 0 0 0.85rem;
    padding: 0.34rem 0.78rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    background: rgba(129, 140, 248, 0.16);
    color: #a5b4fc;
    border: 1px solid rgba(129, 140, 248, 0.3);
}

.kolase-page .kolase-ios26-hero .kolase-hero-copy h1 {
    max-width: 640px;
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Segoe UI", Roboto, sans-serif;
    font-size: clamp(2rem, 3.5vw, 3.05rem);
    font-weight: 780;
    letter-spacing: -0.035em;
    line-height: 1.1;
    color: #f8fafc;
}

.kolase-page .kolase-ios26-hero .kolase-hero-copy h1 span {
    font-style: normal;
    background: linear-gradient(92deg, #60a5fa 0%, #a78bfa 52%, #38bdf8 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent !important;
}

.kolase-page .kolase-ios26-hero .kolase-hero-desc {
    max-width: 560px;
    margin: 0.85rem 0 1.15rem !important;
    font-size: 0.96rem !important;
    line-height: 1.62 !important;
    color: #94a3b8;
}

/* Quick Presentation Filter Pills */
.kolase-page .kolase-quick-pills-wrap {
    display: flex;
    flex-direction: column;
    gap: 0.48rem;
}

.kolase-page .kolase-quick-pills-label {
    font-size: 0.74rem;
    font-weight: 600;
    color: #94a3b8;
}

.kolase-page .kolase-quick-pills {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem;
}

.kolase-page .kolase-quick-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.42rem 0.88rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    color: #e2e8f0;
    background: rgba(30, 41, 59, 0.66);
    border: 1px solid rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
    transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.kolase-page .kolase-quick-pill:hover {
    transform: translateY(-1px);
    background: rgba(51, 65, 85, 0.84);
    border-color: rgba(129, 140, 248, 0.45);
    color: #ffffff;
}

.kolase-page .kolase-quick-pill.is-active {
    background: linear-gradient(135deg, #4f46e5 0%, #0284c7 100%);
    border-color: rgba(255, 255, 255, 0.25);
    color: #ffffff;
    box-shadow: 0 6px 18px rgba(79, 70, 229, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

/* Right Column: Featured Presentation Spotlight Card */
.kolase-page .kolase-spotlight-col {
    min-width: 0;
}

.kolase-page .kolase-spotlight-card {
    position: relative;
    overflow: hidden;
    padding: 1.15rem 1.25rem;
    border-radius: 22px;
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.76), rgba(15, 23, 42, 0.92));
    border: 1px solid rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(28px) saturate(165%);
    -webkit-backdrop-filter: blur(28px) saturate(165%);
    box-shadow: 0 18px 42px rgba(2, 6, 23, 0.52), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.kolase-page .kolase-spotlight-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.8rem;
}

.kolase-page .kolase-spotlight-kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: #a5b4fc;
}

.kolase-page .kolase-spotlight-year {
    font-size: 0.74rem;
    font-weight: 600;
    color: #94a3b8;
}

.kolase-page .kolase-spotlight-body {
    display: flex;
    align-items: center;
    gap: 0.95rem;
}

.kolase-page .kolase-spotlight-thumb {
    flex: 0 0 84px;
    width: 84px;
    aspect-ratio: 3 / 4;
    border-radius: 13px;
    overflow: hidden;
    display: block;
    text-decoration: none;
    box-shadow: 0 10px 24px rgba(2, 6, 23, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.18);
}

.kolase-page .kolase-spotlight-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.kolase-page .kolase-spotlight-thumb-poster {
    width: 100%;
    height: 100%;
    padding: 0.6rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: linear-gradient(160deg, #312e81 0%, #1e3a8a 54%, #0f172a 100%);
    color: #ffffff;
}

.kolase-page .kolase-spotlight-thumb-tag {
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    color: #c7d2fe;
}

.kolase-page .kolase-spotlight-thumb-bar {
    display: block;
    width: 28px;
    height: 3px;
    border-radius: 999px;
    background: #818cf8;
}

.kolase-page .kolase-spotlight-thumb-type {
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1.2;
    color: #eef2ff;
}

.kolase-page .kolase-spotlight-info {
    min-width: 0;
    flex: 1;
}

.kolase-page .kolase-spotlight-badge {
    display: inline-block;
    margin-bottom: 0.35rem;
    padding: 0.18rem 0.55rem;
    border-radius: 7px;
    font-size: 0.7rem;
    font-weight: 700;
    background: rgba(99, 102, 241, 0.2);
    color: #c7d2fe;
    border: 1px solid rgba(99, 102, 241, 0.35);
}

.kolase-page .kolase-spotlight-title {
    margin: 0 0 0.3rem;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", sans-serif;
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.32;
    color: #f8fafc;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.kolase-page .kolase-spotlight-title a {
    color: inherit;
    text-decoration: none;
}

.kolase-page .kolase-spotlight-title a:hover {
    color: #818cf8;
}

.kolase-page .kolase-spotlight-author {
    margin: 0;
    font-size: 0.78rem;
    font-weight: 600;
    color: #cbd5e1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.kolase-page .kolase-spotlight-unit {
    margin: 0.12rem 0 0;
    font-size: 0.74rem;
    color: #94a3b8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.kolase-page .kolase-spotlight-footer {
    margin-top: 0.85rem;
    padding-top: 0.7rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    font-size: 0.74rem;
}

.kolase-page .kolase-spotlight-next {
    min-width: 0;
    color: #94a3b8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.kolase-page .kolase-spotlight-next strong {
    color: #a5b4fc;
}

.kolase-page .kolase-spotlight-cta {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.28rem 0.75rem;
    border-radius: 999px;
    font-size: 0.73rem;
    font-weight: 700;
    color: #ffffff;
    background: linear-gradient(135deg, #2563eb 0%, #4f46e5 100%);
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.35);
}

.kolase-page .kolase-spotlight-cta:hover {
    filter: brightness(1.08);
}

/* Kolase Content Container & Section Heading Typography */
.kolase-page .kolase-content {
    width: min(1240px, 92%);
    padding-top: 1.8rem;
}

.kolase-page .kolase-section-heading h2 {
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", sans-serif;
    font-size: clamp(1.45rem, 2.3vw, 1.85rem);
    font-weight: 760;
    letter-spacing: -0.025em;
}

/* Kolase 5-Column Desktop / 2-Column Mobile Grid & Adaptive Slide Covers */
.kolase-page .gallery-grid.bookcase-row {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 1rem;
    padding: 0;
}

.kolase-page .kolase-book.kolase-poster-card {
    max-width: none;
    border-radius: 18px;
}

.kolase-page .kolase-adaptive-slide {
    width: 100%;
    height: 100%;
    padding: 0.85rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-align: left;
    align-items: stretch;
}

.kolase-page .kolase-adaptive-slide.variant-0 {
    background: linear-gradient(155deg, #312e81 0%, #0f172a 66%, #1e1b4b 100%);
    --slide-accent: #818cf8;
}
.kolase-page .kolase-adaptive-slide.variant-1 {
    background: linear-gradient(155deg, #134e4a 0%, #0f172a 66%, #1e293b 100%);
    --slide-accent: #2dd4bf;
}
.kolase-page .kolase-adaptive-slide.variant-2 {
    background: linear-gradient(155deg, #1e3a8a 0%, #0f172a 66%, #172554 100%);
    --slide-accent: #60a5fa;
}
.kolase-page .kolase-adaptive-slide.variant-3 {
    background: linear-gradient(155deg, #78350f 0%, #0f172a 68%, #1e293b 100%);
    --slide-accent: #fbbf24;
}
.kolase-page .kolase-adaptive-slide.variant-4 {
    background: linear-gradient(155deg, #831843 0%, #0f172a 68%, #1e293b 100%);
    --slide-accent: #f472b6;
}

.kolase-page .kolase-slide-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.35rem;
}

.kolase-page .kolase-slide-brand {
    padding: 0.16rem 0.48rem;
    border-radius: 6px;
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    background: rgba(15, 23, 42, 0.68);
    color: var(--slide-accent, #818cf8);
    border: 1px solid rgba(255, 255, 255, 0.14);
}

.kolase-page .kolase-slide-year {
    font-size: 0.72rem;
    font-weight: 700;
    color: rgba(248, 250, 252, 0.78);
}

.kolase-page .kolase-slide-center {
    margin: auto 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.42rem;
}

.kolase-page .kolase-slide-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    color: var(--slide-accent, #818cf8);
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.14);
}

.kolase-page .kolase-slide-bar {
    display: block;
    width: 38px;
    height: 4px;
    border-radius: 999px;
    background: var(--slide-accent, #818cf8);
}

.kolase-page .kolase-slide-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 3;
}

.kolase-page .kolase-slide-type {
    font-size: 0.72rem;
    font-weight: 600;
    color: rgba(241, 245, 249, 0.82);
}

/* Metadata Row Under Kolase Cover */
.kolase-page .kolase-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.35rem;
    margin-bottom: 0.15rem;
}

.kolase-page .kolase-card-badge {
    padding: 0.14rem 0.46rem;
    border-radius: 6px;
    font-size: 0.67rem;
    font-weight: 700;
    background: rgba(99, 102, 241, 0.16);
    color: #a5b4fc;
    border: 1px solid rgba(99, 102, 241, 0.3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 76%;
}

.kolase-page .kolase-card-year {
    font-size: 0.71rem;
    font-weight: 600;
    color: #94a3b8;
    flex-shrink: 0;
}

.kolase-page .kolase-card-meta-footer {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    margin-top: 0.25rem;
    padding-top: 0.38rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.kolase-page .kolase-card-unit {
    font-size: 0.7rem;
    color: #64748b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ==========================================================================
   LIGHT MODE OVERRIDES FOR KOLASE iOS 26 HERO & ADAPTIVE SLIDE COVERS
   ========================================================================== */

html[data-theme="light"] .kolase-page .kolase-hero.kolase-ios26-hero {
    background:
        radial-gradient(circle at 82% 14%, rgba(99, 102, 241, 0.14) 0%, transparent 44%),
        radial-gradient(circle at 14% 22%, rgba(56, 189, 248, 0.14) 0%, transparent 42%),
        linear-gradient(135deg, #f5f7ff 0%, #eaf0fc 54%, #f8faff 100%) !important;
    border-bottom-color: rgba(15, 23, 42, 0.08) !important;
}

html[data-theme="light"] .kolase-page .kolase-hero-eyebrow {
    background: rgba(79, 70, 229, 0.1) !important;
    color: #4338ca !important;
    border-color: rgba(79, 70, 229, 0.22) !important;
}

html[data-theme="light"] .kolase-page .kolase-ios26-hero .kolase-hero-copy h1 span {
    background: linear-gradient(92deg, #2563eb 0%, #4f46e5 52%, #0284c7 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
}

html[data-theme="light"] .kolase-page .kolase-quick-pills-label {
    color: #64748b !important;
}

html[data-theme="light"] .kolase-page .kolase-quick-pill {
    background: rgba(255, 255, 255, 0.8) !important;
    border-color: rgba(15, 23, 42, 0.1) !important;
    color: #1e293b !important;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04) !important;
}

html[data-theme="light"] .kolase-page .kolase-quick-pill:hover {
    background: #ffffff !important;
    border-color: rgba(79, 70, 229, 0.35) !important;
    color: #4338ca !important;
}

html[data-theme="light"] .kolase-page .kolase-quick-pill.is-active {
    background: linear-gradient(135deg, #4f46e5 0%, #0284c7 100%) !important;
    color: #ffffff !important;
}

html[data-theme="light"] .kolase-page .kolase-spotlight-card {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.9), rgba(241, 245, 249, 0.95)) !important;
    border-color: rgba(15, 23, 42, 0.1) !important;
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.09), inset 0 1px 0 rgba(255, 255, 255, 0.92) !important;
}

html[data-theme="light"] .kolase-page .kolase-spotlight-kicker {
    color: #4338ca !important;
}

html[data-theme="light"] .kolase-page .kolase-spotlight-year {
    color: #64748b !important;
}

html[data-theme="light"] .kolase-page .kolase-spotlight-badge {
    background: rgba(79, 70, 229, 0.1) !important;
    color: #4338ca !important;
    border-color: rgba(79, 70, 229, 0.24) !important;
}

html[data-theme="light"] .kolase-page .kolase-spotlight-title,
html[data-theme="light"] .kolase-page .kolase-spotlight-title a {
    color: #0f172a !important;
}

html[data-theme="light"] .kolase-page .kolase-spotlight-author {
    color: #334155 !important;
}

html[data-theme="light"] .kolase-page .kolase-spotlight-unit {
    color: #64748b !important;
}

html[data-theme="light"] .kolase-page .kolase-spotlight-footer {
    border-top-color: rgba(15, 23, 42, 0.08) !important;
}

html[data-theme="light"] .kolase-page .kolase-spotlight-next {
    color: #475569 !important;
}

html[data-theme="light"] .kolase-page .kolase-spotlight-next strong {
    color: #4338ca !important;
}

html[data-theme="light"] .kolase-page .kolase-adaptive-slide.variant-0 {
    background: linear-gradient(155deg, #e0e7ff 0%, #eef2ff 65%, #f8fafc 100%) !important;
    --slide-accent: #4f46e5;
}
html[data-theme="light"] .kolase-page .kolase-adaptive-slide.variant-1 {
    background: linear-gradient(155deg, #ccfbf1 0%, #e0f2fe 65%, #f8fafc 100%) !important;
    --slide-accent: #0d9488;
}
html[data-theme="light"] .kolase-page .kolase-adaptive-slide.variant-2 {
    background: linear-gradient(155deg, #dbeafe 0%, #eff6ff 65%, #f8fafc 100%) !important;
    --slide-accent: #2563eb;
}
html[data-theme="light"] .kolase-page .kolase-adaptive-slide.variant-3 {
    background: linear-gradient(155deg, #fef3c7 0%, #fffbeb 65%, #f8fafc 100%) !important;
    --slide-accent: #d97706;
}
html[data-theme="light"] .kolase-page .kolase-adaptive-slide.variant-4 {
    background: linear-gradient(155deg, #fce7f3 0%, #fdf2f8 65%, #f8fafc 100%) !important;
    --slide-accent: #db2777;
}

html[data-theme="light"] .kolase-page .kolase-slide-brand {
    background: rgba(255, 255, 255, 0.88) !important;
    color: var(--slide-accent, #4f46e5) !important;
    border-color: rgba(15, 23, 42, 0.08) !important;
}

html[data-theme="light"] .kolase-page .kolase-slide-year,
html[data-theme="light"] .kolase-page .kolase-slide-type {
    color: #334155 !important;
}

html[data-theme="light"] .kolase-page .kolase-slide-icon {
    background: rgba(255, 255, 255, 0.78) !important;
    color: var(--slide-accent, #4f46e5) !important;
    border-color: rgba(15, 23, 42, 0.08) !important;
}

html[data-theme="light"] .kolase-page .kolase-card-badge {
    background: rgba(79, 70, 229, 0.1) !important;
    color: #4338ca !important;
    border-color: rgba(79, 70, 229, 0.22) !important;
}

html[data-theme="light"] .kolase-page .kolase-card-year {
    color: #64748b !important;
}

html[data-theme="light"] .kolase-page .kolase-card-meta-footer {
    border-top-color: rgba(15, 23, 42, 0.07) !important;
}

html[data-theme="light"] .kolase-page .kolase-card-unit {
    color: #64748b !important;
}

/* Responsive Breakpoints for Kolase Hero & 5-Col Desktop / 2-Col Mobile Grid */
@media (max-width: 1180px) {
    .kolase-page .gallery-grid.bookcase-row {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 920px) {
    .kolase-page .kolase-hero-grid {
        grid-template-columns: 1fr;
        gap: 1.25rem;
        padding: 6rem 0 2rem;
    }
    .kolase-page .gallery-grid.bookcase-row {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .kolase-page .kolase-hero-grid {
        width: calc(100% - 1.75rem);
        padding: 8.2rem 0 1.4rem;
        gap: 1rem;
    }
    .kolase-page .kolase-ios26-hero .kolase-hero-copy h1 {
        font-size: clamp(1.65rem, 6.8vw, 2.1rem);
    }
    .kolase-page .kolase-ios26-hero .kolase-hero-desc {
        font-size: 0.86rem !important;
        margin: 0.6rem 0 0.85rem !important;
    }
    .kolase-page .kolase-quick-pill {
        padding: 0.35rem 0.72rem;
        font-size: 0.73rem;
    }
    .kolase-page .kolase-spotlight-card {
        padding: 0.9rem 1rem;
        border-radius: 18px;
    }
    .kolase-page .kolase-spotlight-thumb {
        flex: 0 0 68px;
        width: 68px;
    }
    .kolase-page .kolase-content {
        width: calc(100% - 1.75rem);
    }
    .kolase-page .gallery-grid.bookcase-row {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 0.7rem !important;
    }
}

/* ==========================================================================
   TASK 19N — KOLASE SLIDE VIEWER: iOS 26 KEYNOTE CINEMA STAGE,
   MULTI-MODE TRANSITIONS (KEYNOTE PUSH / 3D CENTER FLIP / DISSOLVE)
   & SMART MOBILE AUTO-ROTATE LANDSCAPE (90°)
   ========================================================================== */

/* 1. Ambient Stage Background & Top Bar Glass Refinement */
.kolase-reader-immersive {
    background:
        radial-gradient(circle at 50% 34%, rgba(56, 189, 248, 0.14) 0%, rgba(15, 23, 42, 0.96) 62%, #060b16 100%);
}

[data-theme="light"] .kolase-reader-immersive {
    background:
        radial-gradient(circle at 50% 34%, rgba(14, 165, 233, 0.12) 0%, #eef3f9 64%, #e2e8f0 100%);
    color: #0f172a;
}

/* 2. Transition Mode Segmented Pill in Top Header Bar */
.reader-transition-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    padding: 0.2rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.transition-mode-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.28rem;
    height: 28px;
    padding: 0 0.65rem;
    border-radius: 999px;
    border: 1px solid transparent;
    background: transparent;
    color: #cbd5e1;
    font-size: 0.75rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 160ms ease;
    white-space: nowrap;
}

.transition-mode-btn:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.08);
}

.transition-mode-btn.active {
    background: rgba(56, 189, 248, 0.2);
    border-color: rgba(56, 189, 248, 0.5);
    color: #38bdf8;
    font-weight: 600;
    box-shadow: 0 2px 10px rgba(56, 189, 248, 0.18);
}

[data-theme="light"] .reader-transition-pill {
    background: rgba(15, 23, 42, 0.05);
    border-color: rgba(15, 23, 42, 0.1);
}

[data-theme="light"] .transition-mode-btn {
    color: #475569;
}

[data-theme="light"] .transition-mode-btn:hover {
    color: #0f172a;
    background: rgba(15, 23, 42, 0.06);
}

[data-theme="light"] .transition-mode-btn.active {
    background: rgba(2, 132, 199, 0.14);
    border-color: rgba(2, 132, 199, 0.4);
    color: #0284c7;
}

/* Mobile Orientation Toggle Button */
.reader-rotate-btn {
    border-radius: 999px;
}

.reader-rotate-btn.active {
    background: rgba(56, 189, 248, 0.18);
    border-color: rgba(56, 189, 248, 0.45);
    color: #38bdf8;
}

[data-theme="light"] .reader-rotate-btn.active {
    background: rgba(2, 132, 199, 0.14);
    border-color: rgba(2, 132, 199, 0.4);
    color: #0284c7;
}

/* 3. iOS 26 Keynote Cinema Stage Bezel & Centered Proportions */
.kolase-reader-immersive .reader-paper-stage {
    padding: 0.75rem 4.25rem 4.65rem;
    perspective: 2200px;
}

.kolase-reader-immersive .paper-book {
    padding: 10px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.055);
    border: 1px solid rgba(255, 255, 255, 0.16);
    box-shadow:
        0 30px 70px -15px rgba(0, 0, 0, 0.78),
        0 0 0 1px rgba(255, 255, 255, 0.08) inset,
        0 0 55px -12px rgba(56, 189, 248, 0.18);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    overflow: hidden;
    transform-style: preserve-3d;
}

[data-theme="light"] .kolase-reader-immersive .paper-book {
    background: rgba(255, 255, 255, 0.82);
    border-color: rgba(15, 23, 42, 0.12);
    box-shadow:
        0 26px 60px -15px rgba(15, 23, 42, 0.18),
        0 0 0 1px rgba(255, 255, 255, 0.92) inset;
}

/* Hide fake left book-spine shadow on single widescreen slides while preserving DOM node */
.kolase-reader-immersive .paper-crease-shadow {
    opacity: 0;
    pointer-events: none;
}

.kolase-reader-immersive .paper-sheet {
    border-radius: 11px;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.28);
}

.kolase-reader-immersive .sheet-flipping,
.kolase-reader-immersive .page-flipping {
    top: 10px;
    left: 10px;
    width: calc(100% - 20px);
    height: calc(100% - 20px);
    border-radius: 11px;
    transform-origin: 50% 50%;
    overflow: hidden;
}

.kolase-reader-immersive .leaf-face {
    border-radius: 11px;
}

.kolase-reader-immersive .face-back,
.kolase-reader-immersive .leaf-shadow {
    display: none;
}

/* 4. Multi-Mode Slide Transition Keyframes (Keynote Push / 3D Center Flip / Cross-Dissolve) */

/* Mode A: Apple Keynote Push + Depth (Default) */
@keyframes kolaseKeynoteOutNext {
    0%   { transform: translate3d(0, 0, 0) scale(1); opacity: 1; }
    100% { transform: translate3d(-24%, 0, 0) scale(0.92); opacity: 0; }
}
@keyframes kolaseKeynoteInNext {
    0%   { transform: translate3d(100%, 0, 0) scale(0.96); opacity: 0.35; box-shadow: -24px 0 48px rgba(0, 0, 0, 0.45); }
    100% { transform: translate3d(0, 0, 0) scale(1); opacity: 1; box-shadow: 0 4px 18px rgba(0, 0, 0, 0.28); }
}
@keyframes kolaseKeynoteOutPrev {
    0%   { transform: translate3d(0, 0, 0) scale(1); opacity: 1; }
    100% { transform: translate3d(24%, 0, 0) scale(0.92); opacity: 0; }
}
@keyframes kolaseKeynoteInPrev {
    0%   { transform: translate3d(-100%, 0, 0) scale(0.96); opacity: 0.35; box-shadow: 24px 0 48px rgba(0, 0, 0, 0.45); }
    100% { transform: translate3d(0, 0, 0) scale(1); opacity: 1; box-shadow: 0 4px 18px rgba(0, 0, 0, 0.28); }
}

.paper-book.is-transitioning.mode-keynote.dir-next .sheet-flipping.is-active-leaf {
    opacity: 1;
    visibility: visible;
    z-index: 4;
    animation: kolaseKeynoteOutNext 480ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.paper-book.is-transitioning.mode-keynote.dir-next .sheet-base {
    z-index: 6;
    animation: kolaseKeynoteInNext 480ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.paper-book.is-transitioning.mode-keynote.dir-prev .sheet-flipping.is-active-leaf {
    opacity: 1;
    visibility: visible;
    z-index: 4;
    animation: kolaseKeynoteOutPrev 480ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.paper-book.is-transitioning.mode-keynote.dir-prev .sheet-base {
    z-index: 6;
    animation: kolaseKeynoteInPrev 480ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* Mode B: 3D Center Stage Flip (Poros 50% 50% di dalam panggung) */
.paper-book[data-transition-mode="flip3d"] {
    overflow: visible;
}
@keyframes kolaseFlip3dOutNext {
    0%   { transform: perspective(1800px) rotateY(0deg) scale(1); opacity: 1; }
    50%  { transform: perspective(1800px) rotateY(-90deg) scale(0.92); opacity: 0.45; }
    100% { transform: perspective(1800px) rotateY(-180deg) scale(0.95); opacity: 0; }
}
@keyframes kolaseFlip3dInNext {
    0%   { transform: perspective(1800px) rotateY(180deg) scale(0.95); opacity: 0; }
    50%  { transform: perspective(1800px) rotateY(90deg) scale(0.92); opacity: 0.55; }
    100% { transform: perspective(1800px) rotateY(0deg) scale(1); opacity: 1; }
}
@keyframes kolaseFlip3dOutPrev {
    0%   { transform: perspective(1800px) rotateY(0deg) scale(1); opacity: 1; }
    50%  { transform: perspective(1800px) rotateY(90deg) scale(0.92); opacity: 0.45; }
    100% { transform: perspective(1800px) rotateY(180deg) scale(0.95); opacity: 0; }
}
@keyframes kolaseFlip3dInPrev {
    0%   { transform: perspective(1800px) rotateY(-180deg) scale(0.95); opacity: 0; }
    50%  { transform: perspective(1800px) rotateY(-90deg) scale(0.92); opacity: 0.55; }
    100% { transform: perspective(1800px) rotateY(0deg) scale(1); opacity: 1; }
}

.paper-book.is-transitioning.mode-flip3d.dir-next .sheet-flipping.is-active-leaf {
    opacity: 1;
    visibility: visible;
    z-index: 6;
    transform-origin: 50% 50%;
    animation: kolaseFlip3dOutNext 520ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.paper-book.is-transitioning.mode-flip3d.dir-next .sheet-base {
    z-index: 5;
    transform-origin: 50% 50%;
    animation: kolaseFlip3dInNext 520ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.paper-book.is-transitioning.mode-flip3d.dir-prev .sheet-flipping.is-active-leaf {
    opacity: 1;
    visibility: visible;
    z-index: 6;
    transform-origin: 50% 50%;
    animation: kolaseFlip3dOutPrev 520ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.paper-book.is-transitioning.mode-flip3d.dir-prev .sheet-base {
    z-index: 5;
    transform-origin: 50% 50%;
    animation: kolaseFlip3dInPrev 520ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* Mode C: Smooth Cross-Dissolve */
@keyframes kolaseDissolveOut {
    0%   { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(1.018); }
}
@keyframes kolaseDissolveIn {
    0%   { opacity: 0; transform: scale(0.985); }
    100% { opacity: 1; transform: scale(1); }
}

.paper-book.is-transitioning.mode-dissolve .sheet-flipping.is-active-leaf {
    opacity: 1;
    visibility: visible;
    z-index: 5;
    animation: kolaseDissolveOut 390ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.paper-book.is-transitioning.mode-dissolve .sheet-base {
    z-index: 6;
    animation: kolaseDissolveIn 390ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* 5. Bottom Floating Toolbar + Interactive Progress Bar Scrubber */
.kolase-reader-immersive .reader-floating-toolbar {
    flex-direction: column;
    align-items: center;
    gap: 0.45rem;
    bottom: 1rem;
}

.reader-progress-scrubber {
    width: min(360px, 78vw);
    height: 6px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.16);
    overflow: hidden;
    cursor: pointer;
    pointer-events: auto;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
    transition: height 150ms ease, background 150ms ease;
}

.reader-progress-scrubber:hover {
    height: 8px;
    background: rgba(255, 255, 255, 0.24);
}

.reader-progress-fill {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #38bdf8 0%, #6366f1 100%);
    transition: width 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

[data-theme="light"] .reader-progress-scrubber {
    background: rgba(15, 23, 42, 0.14);
}

/* 6. Visual Slide Thumbnails inside Drawer */
.kolase-reader-immersive .reader-thumbnails-drawer {
    max-height: 230px;
}

.kolase-reader-immersive .drawer-thumb-item {
    flex-direction: column;
    min-width: 112px;
    height: auto;
    padding: 0.35rem;
    gap: 0.3rem;
    border-radius: 11px;
}

.thumb-canvas-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100px;
    height: 58px;
    border-radius: 7px;
    overflow: hidden;
    background: rgba(15, 23, 42, 0.45);
}

.thumb-preview-canvas {
    display: block;
    max-width: 100%;
    max-height: 100%;
    border-radius: 5px;
}

/* 7. Smart Mobile Auto-Rotate Landscape Stage (90° Viewport Rotation on < 768px) */
.kolase-reader-immersive.mobile-rotated-landscape {
    position: fixed;
    inset: auto !important;
    top: 50% !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    width: 100vh;
    width: 100dvh;
    height: 100vw;
    height: 100dvw;
    transform: translate(-50%, -50%) rotate(90deg);
    transform-origin: center center;
}

.kolase-reader-immersive.mobile-rotated-landscape .reader-top-bar {
    height: 44px;
    padding: 0 0.85rem;
}

.kolase-reader-immersive.mobile-rotated-landscape .back-label {
    display: none;
}

.kolase-reader-immersive.mobile-rotated-landscape .reader-back-btn {
    padding: 0.3rem 0.55rem;
}

.kolase-reader-immersive.mobile-rotated-landscape .reader-title {
    max-width: 240px;
    font-size: 0.82rem;
}

.kolase-reader-immersive.mobile-rotated-landscape .reader-subtitle {
    display: none;
}

.kolase-reader-immersive.mobile-rotated-landscape .reader-paper-stage {
    padding: 0.35rem 2.75rem 3.35rem;
}

.kolase-reader-immersive.mobile-rotated-landscape .paper-book {
    padding: 6px;
    border-radius: 14px;
}

.kolase-reader-immersive.mobile-rotated-landscape .sheet-flipping,
.kolase-reader-immersive.mobile-rotated-landscape .page-flipping {
    top: 6px;
    left: 6px;
    width: calc(100% - 12px);
    height: calc(100% - 12px);
}

.kolase-reader-immersive.mobile-rotated-landscape .reader-floating-toolbar {
    bottom: 0.45rem;
    gap: 0.28rem;
}

.kolase-reader-immersive.mobile-rotated-landscape .reader-progress-scrubber {
    width: min(260px, 55vh);
    height: 4px;
}

.kolase-reader-immersive.mobile-rotated-landscape .toolbar-pill {
    padding: 0.25rem 0.65rem;
}

/* Keep secondary top-bar buttons compact icons; only show text on Portrait/Landscape toggle */
.kolase-reader-immersive.mobile-rotated-landscape .btn-text {
    display: none;
}

.kolase-reader-immersive.mobile-rotated-landscape .reader-rotate-btn .btn-text {
    display: inline !important;
    font-size: 0.72rem;
}

.kolase-reader-immersive.mobile-rotated-landscape .reader-transition-pill .mode-text {
    display: none;
}

.kolase-reader-immersive.mobile-rotated-landscape .transition-mode-btn {
    padding: 0 0.42rem;
    height: 26px;
}

.kolase-reader-immersive.mobile-rotated-landscape .reader-action-btn {
    padding: 0 0.5rem;
    height: 30px;
}

.kolase-reader-immersive.mobile-rotated-landscape .reader-rotate-btn {
    padding: 0 0.65rem;
}

@media (max-width: 768px) {
    .reader-transition-pill .mode-text {
        display: none;
    }
    .transition-mode-btn {
        padding: 0 0.45rem;
        height: 26px;
    }
    .reader-rotate-btn .btn-text {
        display: inline !important;
        font-size: 0.73rem;
    }

    /* Task 19N: Mobile Portrait Stage & Slide Frame Optimization */
    .kolase-reader-immersive:not(.mobile-rotated-landscape) .reader-paper-stage {
        padding: 0.5rem 0.65rem 3.8rem !important;
    }

    .kolase-reader-immersive:not(.mobile-rotated-landscape) .paper-book {
        padding: 5px;
        border-radius: 12px;
        border: 1px solid rgba(255, 255, 255, 0.14);
        box-shadow:
            0 12px 28px -6px rgba(0, 0, 0, 0.45),
            0 0 0 1px rgba(255, 255, 255, 0.08) inset;
    }

    [data-theme="light"] .kolase-reader-immersive:not(.mobile-rotated-landscape) .paper-book {
        background: rgba(255, 255, 255, 0.9);
        border-color: rgba(15, 23, 42, 0.1);
        box-shadow:
            0 10px 24px -6px rgba(15, 23, 42, 0.12),
            0 0 0 1px rgba(255, 255, 255, 0.95) inset;
    }

    .kolase-reader-immersive:not(.mobile-rotated-landscape) .paper-sheet {
        border-radius: 8px;
    }

    .kolase-reader-immersive:not(.mobile-rotated-landscape) .sheet-flipping,
    .kolase-reader-immersive:not(.mobile-rotated-landscape) .page-flipping {
        top: 5px;
        left: 5px;
        width: calc(100% - 10px);
        height: calc(100% - 10px);
        border-radius: 8px;
    }

    /* Task 19N: Hide floating side chevrons on mobile portrait (touch swipe & bottom bar used instead) */
    .kolase-reader-immersive:not(.mobile-rotated-landscape) .reader-chevron {
        display: none !important;
    }
}

/* Task 19N: Ultra-compact toolbars for narrow mobile portrait viewports (<= 400px e.g. Galaxy A55 360px, iPhone SE 375px) */
@media (max-width: 400px) {
    .reader-top-bar {
        padding: 0 0.5rem;
        gap: 0.35rem;
    }

    .reader-header-right {
        gap: 0.25rem;
    }

    .reader-title {
        max-width: 115px;
        font-size: 0.78rem;
    }

    .reader-rotate-btn {
        padding: 0 0.45rem;
        height: 28px;
    }

    .reader-rotate-btn .btn-text {
        display: none !important;
    }

    .reader-action-btn,
    .reader-close-btn {
        min-width: 28px;
        height: 28px;
        padding: 0 0.4rem;
        font-size: 0.75rem;
    }

    .toolbar-pill {
        padding: 0.25rem 0.45rem;
        gap: 0.15rem;
    }

    .pill-counter {
        font-size: 0.72rem;
        gap: 0.15rem;
    }

    .pill-counter span:first-child {
        display: none;
    }

    .pill-zoom-text {
        display: none;
    }

    .pill-btn {
        min-width: 24px;
        height: 26px;
        padding: 0 0.35rem;
        font-size: 0.72rem;
    }

    .pill-sep {
        margin: 0 0.12rem;
        height: 14px;
    }

    .reader-progress-scrubber {
        width: min(240px, 80vw);
    }
}

/* 8. Complete Light Mode Typography & Surface Contrast for Reader Info Panel,
      Bottom Floating Toolbar Pill, Thumbnails Drawer & Status Cards */
[data-theme="light"] .reader-bar-divider {
    background: rgba(15, 23, 42, 0.12) !important;
}

[data-theme="light"] .reader-badge {
    background: rgba(2, 132, 199, 0.12) !important;
    color: #0369a1 !important;
    border-color: rgba(2, 132, 199, 0.28) !important;
}

[data-theme="light"] .reader-badge.badge-sample {
    background: rgba(217, 119, 6, 0.14) !important;
    color: #b45309 !important;
    border-color: rgba(217, 119, 6, 0.3) !important;
}

/* Panel Ringkasan (.reader-info-panel) in Light Mode */
[data-theme="light"] .reader-info-panel {
    background: rgba(255, 255, 255, 0.96) !important;
    border-left: 1px solid rgba(15, 23, 42, 0.1) !important;
    box-shadow: -14px 0 40px rgba(15, 23, 42, 0.1) !important;
    color: #1e293b !important;
}

[data-theme="light"] .reader-info-panel .info-panel-header {
    border-bottom-color: rgba(15, 23, 42, 0.1) !important;
}

[data-theme="light"] .reader-info-panel .info-panel-header h3 {
    color: #0f172a !important;
    font-weight: 700 !important;
}

[data-theme="light"] .reader-info-panel .info-block h4 {
    color: #475569 !important;
    font-weight: 700 !important;
}

[data-theme="light"] .reader-info-panel .info-desc {
    color: #1e293b !important;
}

[data-theme="light"] .reader-info-panel .info-desc.meta-empty {
    color: #64748b !important;
}

[data-theme="light"] .reader-info-panel .info-keyword-pill {
    background: #eff6ff !important;
    border-color: rgba(37, 99, 235, 0.24) !important;
    color: #1d4ed8 !important;
    font-weight: 600 !important;
}

[data-theme="light"] .reader-info-panel .info-keyword-pill:hover {
    background: #dbeafe !important;
    border-color: rgba(37, 99, 235, 0.4) !important;
    color: #1e40af !important;
}

[data-theme="light"] .reader-info-panel .info-details-list dt {
    color: #64748b !important;
    font-weight: 600 !important;
}

[data-theme="light"] .reader-info-panel .info-details-list dd {
    color: #0f172a !important;
    font-weight: 600 !important;
}

[data-theme="light"] .reader-info-panel .drawer-close,
[data-theme="light"] .reader-thumbnails-drawer .drawer-close {
    color: #475569 !important;
}

[data-theme="light"] .reader-info-panel .drawer-close:hover,
[data-theme="light"] .reader-thumbnails-drawer .drawer-close:hover {
    color: #0f172a !important;
    background: rgba(15, 23, 42, 0.06) !important;
}

/* Bottom Floating Toolbar Pill (.toolbar-pill) in Light Mode */
[data-theme="light"] .reader-floating-toolbar .toolbar-pill {
    background: rgba(255, 255, 255, 0.92) !important;
    border-color: rgba(15, 23, 42, 0.12) !important;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.12), 0 0 0 1px rgba(255, 255, 255, 0.8) inset !important;
}

[data-theme="light"] .reader-floating-toolbar .pill-btn {
    color: #1e293b !important;
}

[data-theme="light"] .reader-floating-toolbar .pill-btn:hover:not(:disabled) {
    background: rgba(15, 23, 42, 0.08) !important;
    color: #0f172a !important;
}

[data-theme="light"] .reader-floating-toolbar .pill-btn.active {
    background: rgba(2, 132, 199, 0.14) !important;
    color: #0284c7 !important;
}

[data-theme="light"] .reader-floating-toolbar .pill-counter {
    color: #475569 !important;
}

[data-theme="light"] .reader-floating-toolbar .pill-counter strong {
    color: #0f172a !important;
}

[data-theme="light"] .reader-floating-toolbar .pill-zoom-text {
    color: #334155 !important;
}

[data-theme="light"] .reader-floating-toolbar .pill-sep {
    background: rgba(15, 23, 42, 0.12) !important;
}

/* Slide Thumbnails Drawer (.reader-thumbnails-drawer) in Light Mode */
[data-theme="light"] .reader-thumbnails-drawer {
    background: rgba(255, 255, 255, 0.95) !important;
    border: 1px solid rgba(15, 23, 42, 0.12) !important;
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.15) !important;
}

[data-theme="light"] .reader-thumbnails-drawer .drawer-title-wrap {
    color: #0f172a !important;
}

[data-theme="light"] .reader-thumbnails-drawer .drawer-title-wrap span {
    color: #64748b !important;
}

[data-theme="light"] .reader-thumbnails-drawer .drawer-thumb-item {
    background: #f8fafc !important;
    border-color: rgba(15, 23, 42, 0.12) !important;
}

[data-theme="light"] .reader-thumbnails-drawer .drawer-thumb-item:hover {
    border-color: #0284c7 !important;
}

[data-theme="light"] .reader-thumbnails-drawer .drawer-thumb-item.active {
    background: rgba(2, 132, 199, 0.12) !important;
    border-color: #0284c7 !important;
    box-shadow: 0 0 0 2px rgba(2, 132, 199, 0.25) !important;
}

[data-theme="light"] .reader-thumbnails-drawer .thumb-page-label {
    color: #1e293b !important;
}

[data-theme="light"] .reader-thumbnails-drawer .thumb-canvas-wrap {
    background: #e2e8f0 !important;
}

/* Status & Fallback Cards inside Reader in Light Mode */
[data-theme="light"] .reader-status-box {
    color: #1e293b !important;
}

[data-theme="light"] .reader-status-box .status-sub {
    color: #64748b !important;
}

[data-theme="light"] .presentation-fallback-card,
[data-theme="light"] .sample-fallback-card {
    background: rgba(255, 255, 255, 0.94) !important;
    border-color: rgba(15, 23, 42, 0.12) !important;
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.12) !important;
}

[data-theme="light"] .fallback-content h2,
[data-theme="light"] .sample-content h2 {
    color: #0f172a !important;
}

[data-theme="light"] .fallback-desc,
[data-theme="light"] .sample-desc {
    color: #334155 !important;
}


/* ==========================================================================
   Admin Pagination Component (Task 38.1 - Scoped Fix for Admin Works & Keywords)
   ========================================================================== */

.admin-pagination {
    margin: 2.25rem 0 1.5rem;
    padding: 1.15rem 1.45rem;
    background: var(--surface-glass, rgba(255, 255, 255, 0.78));
    border: 1px solid var(--border-subtle, rgba(223, 230, 240, 0.85));
    border-radius: 18px;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.03);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}

/* Hide duplicate mobile text-only bar */
.admin-pagination nav > div:first-child {
    display: none !important;
}

/* Main horizontal pagination bar */
.admin-pagination nav {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

.admin-pagination nav > div:last-child {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 1.15rem !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

@media (min-width: 860px) {
    .admin-pagination nav > div:last-child {
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 1.5rem !important;
    }
}

/* Summary text styling ("Showing 1 to 15 of 1031 results") */
.admin-pagination p {
    margin: 0 !important;
    font-size: 0.86rem !important;
    line-height: 1.4 !important;
    color: var(--text-muted, #5a6e88) !important;
    text-align: center !important;
    white-space: nowrap !important;
}

@media (min-width: 860px) {
    .admin-pagination p {
        text-align: left !important;
    }
}

.admin-pagination p span,
.admin-pagination p .font-medium {
    font-weight: 700 !important;
    color: var(--text-primary, #183657) !important;
}

/* Pagination buttons container */
.admin-pagination nav > div:last-child > div:last-child {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

@media (min-width: 860px) {
    .admin-pagination nav > div:last-child > div:last-child {
        width: auto !important;
        justify-content: flex-end !important;
    }
}

.admin-pagination nav > div:last-child > div:last-child > span {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.35rem !important;
    width: 100% !important;
    max-width: 100% !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    box-sizing: border-box !important;
}

@media (min-width: 860px) {
    .admin-pagination nav > div:last-child > div:last-child > span {
        display: inline-flex !important;
        width: auto !important;
        justify-content: flex-end !important;
    }
}

/* Individual pagination buttons: links and spans */
.admin-pagination a,
.admin-pagination span[aria-disabled="true"] > span,
.admin-pagination span[aria-current="page"] > span,
.admin-pagination span:not([aria-disabled]):not([aria-current]) > span {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 36px !important;
    height: 36px !important;
    padding: 0 0.65rem !important;
    margin: 0 !important;
    border-radius: 10px !important;
    font-size: 0.86rem !important;
    font-weight: 650 !important;
    line-height: 1 !important;
    text-decoration: none !important;
    border: 1px solid var(--border-subtle, rgba(210, 224, 245, 0.85)) !important;
    background: var(--surface, #ffffff) !important;
    color: var(--text-secondary, #334155) !important;
    transition: all 160ms ease !important;
    box-sizing: border-box !important;
    user-select: none !important;
}

/* Compact sizing on mobile / narrow screens */
@media (max-width: 640px) {
    .admin-pagination {
        padding: 1rem 0.75rem !important;
        margin: 1.5rem 0 1rem !important;
    }

    .admin-pagination nav > div:last-child > div:last-child > span {
        gap: 0.25rem !important;
    }

    .admin-pagination a,
    .admin-pagination span[aria-disabled="true"] > span,
    .admin-pagination span[aria-current="page"] > span,
    .admin-pagination span:not([aria-disabled]):not([aria-current]) > span {
        min-width: 32px !important;
        height: 32px !important;
        padding: 0 0.45rem !important;
        font-size: 0.8rem !important;
        border-radius: 8px !important;
    }
}

/* Ellipsis (...) item */
.admin-pagination span:not([aria-disabled]):not([aria-current]) > span {
    border-color: transparent !important;
    background: transparent !important;
    color: var(--text-muted, #94a3b8) !important;
    cursor: default !important;
    pointer-events: none !important;
}

/* Hover state for clickable links */
.admin-pagination a:hover {
    background: var(--app-bg-subtle, #f1f5fb) !important;
    color: var(--primary, #1a73e8) !important;
    border-color: rgba(26, 115, 232, 0.4) !important;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(26, 115, 232, 0.12);
}

.admin-pagination a:active {
    transform: translateY(0);
}

/* Active current page item */
.admin-pagination span[aria-current="page"] > span {
    background: var(--primary, #1a73e8) !important;
    color: #ffffff !important;
    border-color: var(--primary, #1a73e8) !important;
    box-shadow: 0 3px 10px rgba(26, 115, 232, 0.35) !important;
    cursor: default !important;
}

/* Disabled navigation buttons (Previous on page 1, Next on last page) */
.admin-pagination span[aria-disabled="true"] > span {
    opacity: 0.42 !important;
    cursor: not-allowed !important;
    background: var(--app-bg-subtle, #f8faff) !important;
    color: var(--text-muted, #94a3b8) !important;
    border-color: rgba(210, 224, 245, 0.5) !important;
    box-shadow: none !important;
}

/* CRITICAL SVG ICON FIX: Strictly scoped to .admin-pagination */
.admin-pagination svg {
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    min-height: 18px !important;
    max-width: 18px !important;
    max-height: 18px !important;
    display: block !important;
    flex-shrink: 0 !important;
    fill: currentColor !important;
    margin: auto !important;
}

@media (max-width: 640px) {
    .admin-pagination svg {
        width: 15px !important;
        height: 15px !important;
        min-width: 15px !important;
        min-height: 15px !important;
        max-width: 15px !important;
        max-height: 15px !important;
    }
}

/* Dark mode compatibility */
[data-theme="dark"] .admin-pagination {
    background: rgba(18, 26, 41, 0.78) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.25) !important;
}

[data-theme="dark"] .admin-pagination p {
    color: #94a3b8 !important;
}

[data-theme="dark"] .admin-pagination p span,
[data-theme="dark"] .admin-pagination p .font-medium {
    color: #f1f5f9 !important;
}

[data-theme="dark"] .admin-pagination a,
[data-theme="dark"] .admin-pagination span[aria-disabled="true"] > span {
    background: rgba(23, 34, 51, 0.8) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: #cbd5e1 !important;
}

[data-theme="dark"] .admin-pagination a:hover {
    background: #174ea6 !important;
    color: #ffffff !important;
    border-color: #174ea6 !important;
}

[data-theme="dark"] .admin-pagination span[aria-current="page"] > span {
    background: #1a73e8 !important;
    color: #ffffff !important;
    border-color: #1a73e8 !important;
    box-shadow: 0 3px 10px rgba(26, 115, 232, 0.45) !important;
}

[data-theme="dark"] .admin-pagination span[aria-disabled="true"] > span {
    background: rgba(15, 23, 42, 0.5) !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
    color: #64748b !important;
}


/* ==========================================================================
   TAHAP 1: HOMEPAGE DISCOVERY, REPOSITORY ANALYTICS & ACTIVITY LOG (iOS 26)
   ========================================================================== */

/* 1. Repository Stats Strip */
.repo-stats-strip-wrap {
    width: min(1160px, 92%);
    margin: -1.75rem auto 2.5rem auto;
    position: relative;
    z-index: 4;
}

.repo-stats-strip {
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 1.1rem 1.8rem;
    border-radius: 20px;
    gap: 1.5rem;
    flex-wrap: wrap;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.85);
    box-shadow: 0 12px 36px rgba(15, 23, 42, 0.06), 0 2px 6px rgba(15, 23, 42, 0.03);
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
}

.repo-stat-item {
    display: flex;
    align-items: center;
    gap: 0.95rem;
    flex: 1;
    min-width: 200px;
}

.repo-stat-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(26, 115, 232, 0.09);
    color: #1a73e8;
    flex-shrink: 0;
}

.repo-stat-text {
    display: flex;
    flex-direction: column;
}

.repo-stat-num {
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: #0f172a;
}

.repo-stat-label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #475569;
    margin-top: 0.15rem;
}

.repo-stat-sub {
    font-size: 0.72rem;
    color: #64748b;
}

.repo-stat-divider {
    width: 1px;
    height: 38px;
    background: rgba(15, 23, 42, 0.08);
}

/* 2. Discovery Section Base (Apple Music / Netflix Horizontal Content Rails) */
.repo-discovery-section {
    padding: 1.35rem 0;
    position: relative;
}

.repo-discovery-inner {
    width: min(1160px, 92%);
    margin: 0 auto;
}

.discovery-section-header {
    margin-bottom: 0.85rem;
}

.discovery-split-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 0.85rem;
}

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

.eyebrow-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.22rem 0.65rem;
    border-radius: 9999px;
    background: rgba(26, 115, 232, 0.1);
    color: #1a73e8;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-bottom: 0.4rem;
}

.eyebrow-chip-gold {
    background: rgba(245, 158, 11, 0.12);
    color: #d97706;
}

.eyebrow-chip-emerald {
    background: rgba(16, 185, 129, 0.12);
    color: #059669;
}

.discovery-section-title {
    font-size: clamp(1.25rem, 2vw, 1.6rem);
    font-weight: 700;
    letter-spacing: -0.025em;
    color: #0f172a;
    margin: 0 0 0.25rem 0;
    line-height: 1.22;
}

.discovery-section-sub {
    font-size: 0.86rem;
    color: #64748b;
    margin: 0;
    max-width: 600px;
    line-height: 1.45;
}

.discovery-link-more {
    font-size: 0.82rem;
    font-weight: 600;
    color: #1a73e8;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    transition: transform 0.2s ease, color 0.2s ease;
}

.discovery-link-more:hover {
    color: #1557b0;
    transform: translateX(3px);
}

/* 3. Horizontal Content Rail / Shelf System */
.shelf-scroll-wrap {
    position: relative;
    width: 100%;
}

.shelf-track {
    display: flex;
    gap: 1.1rem;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    padding: 0.35rem 0.25rem 1rem 0.25rem;
    margin: 0;
    list-style: none;
    scrollbar-width: thin;
    scrollbar-color: rgba(148, 163, 184, 0.35) transparent;
}

.shelf-track::-webkit-scrollbar {
    height: 6px;
}

.shelf-track::-webkit-scrollbar-track {
    background: transparent;
}

.shelf-track::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.3);
    border-radius: 9999px;
}

.shelf-track::-webkit-scrollbar-thumb:hover {
    background: rgba(148, 163, 184, 0.55);
}

/* 4. Shelf Card Sizing: Apple Music Sizing (Desktop 178px, Tablet 160px, Mobile 142px) */
.shelf-card {
    flex: 0 0 178px;
    width: 178px;
    max-width: 178px;
    min-width: 0;
    scroll-snap-align: start;
    border-radius: 18px;
    padding: 0.6rem;
    background: rgba(255, 255, 255, 0.78);
    border: 1px solid rgba(255, 255, 255, 0.85);
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.04);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.22s ease, border-color 0.22s ease;
    box-sizing: border-box;
    position: relative;
}

.shelf-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.09);
    border-color: rgba(37, 99, 235, 0.28);
}

@media (max-width: 768px) {
    .shelf-card {
        flex: 0 0 160px;
        width: 160px;
        max-width: 160px;
        padding: 0.48rem;
        border-radius: 14px;
    }
}

@media (max-width: 480px) {
    .shelf-card {
        flex: 0 0 142px;
        width: 142px;
        max-width: 142px;
        padding: 0.40rem;
        border-radius: 13px;
    }
}

/* Artwork / Cover Frame & Image (object-fit: contain so text on cover is never cut off!) */
.shelf-card-poster-link {
    display: block;
    text-decoration: none;
    color: inherit;
    margin-bottom: 0.5rem;
}

.shelf-card-cover-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 5;
    border-radius: 13px;
    overflow: hidden;
    background: #e9eef6;
    border: 1px solid rgba(15, 23, 42, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
}

.shelf-card-cover-frame .shelf-card-cover {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.shelf-card:hover .shelf-card-cover-frame .shelf-card-cover {
    transform: scale(1.03);
}

/* Badges on Artwork */
.shelf-curated-badge {
    position: absolute;
    top: 7px;
    left: 7px;
    z-index: 2;
    padding: 0.16rem 0.5rem;
    border-radius: 9999px;
    font-size: 0.63rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    background: rgba(245, 158, 11, 0.94);
    color: #ffffff;
    box-shadow: 0 2px 6px rgba(245, 158, 11, 0.35);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.shelf-rank-badge {
    position: absolute;
    top: 7px;
    left: 7px;
    z-index: 2;
    width: 27px;
    height: 27px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.74rem;
    font-weight: 800;
    color: #ffffff;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.22);
}

.shelf-rank-badge.rank-gold {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    box-shadow: 0 3px 10px rgba(245, 158, 11, 0.45);
}

.shelf-rank-badge.rank-silver {
    background: linear-gradient(135deg, #94a3b8, #64748b);
    box-shadow: 0 3px 8px rgba(100, 116, 139, 0.35);
}

.shelf-rank-badge.rank-bronze {
    background: linear-gradient(135deg, #d97706, #b45309);
    box-shadow: 0 3px 8px rgba(217, 119, 6, 0.35);
}

.shelf-rank-badge.rank-standard {
    background: rgba(15, 23, 42, 0.78);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* Shelf Card Content */
.shelf-card-content {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.shelf-card-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.35rem;
    margin-bottom: 0.28rem;
}

.shelf-card-meta .badge {
    padding: 0.14rem 0.45rem;
    border-radius: 6px;
    font-size: 0.65rem;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 72%;
}

.shelf-year {
    font-size: 0.7rem;
    font-weight: 600;
    color: #64748b;
    flex-shrink: 0;
}

.shelf-card-title {
    margin: 0 0 0.3rem 0;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", sans-serif;
    font-size: 0.86rem;
    font-weight: 680;
    letter-spacing: -0.012em;
    line-height: 1.32;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.shelf-card-title a {
    color: #0f172a;
    transition: color 0.15s ease;
}

.shelf-card-title a:hover {
    color: #1a73e8;
}

.shelf-card-author {
    margin: 0;
    font-size: 0.74rem;
    font-weight: 500;
    color: #64748b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.shelf-card-unit {
    margin: 0.08rem 0 0 0;
    font-size: 0.69rem;
    color: #94a3b8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.shelf-curated-notes {
    margin: 0.3rem 0 0 0;
    font-size: 0.71rem;
    font-style: italic;
    color: #475569;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.32;
    background: rgba(241, 245, 249, 0.65);
    padding: 0.22rem 0.42rem;
    border-radius: 6px;
    border-left: 2px solid #f59e0b;
}

.shelf-stats-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.22rem;
    padding: 0.12rem 0.42rem;
    border-radius: 9999px;
    font-size: 0.67rem;
    font-weight: 600;
    background: rgba(16, 185, 129, 0.1);
    color: #059669;
    flex-shrink: 0;
}

/* 5. Trending Controls & Compact Empty State */
.trending-period-segmented {
    display: inline-flex;
    padding: 3px;
    border-radius: 9999px;
    background: rgba(15, 23, 42, 0.05);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(15, 23, 42, 0.06);
    gap: 2px;
}

.trending-period-btn {
    padding: 0.3rem 0.85rem;
    border-radius: 9999px;
    font-size: 0.76rem;
    font-weight: 600;
    color: #64748b;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    text-decoration: none;
}

.trending-period-btn:hover {
    color: #0f172a;
}

.trending-period-btn.active,
.trending-period-btn.is-active {
    background: #ffffff;
    color: #0f172a;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.08);
}

.trending-empty-compact {
    padding: 1rem 1.35rem;
    border-radius: 16px;
    display: flex;
    align-items: center;
    gap: 1.1rem;
    background: rgba(255, 255, 255, 0.68);
    border: 1px solid rgba(255, 255, 255, 0.85);
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.03);
}

.trending-empty-icon {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(16, 185, 129, 0.1);
    color: #059669;
    flex-shrink: 0;
}

.trending-empty-text strong {
    display: block;
    font-size: 0.86rem;
    font-weight: 680;
    color: #0f172a;
    margin-bottom: 0.15rem;
}

.trending-empty-text p {
    margin: 0;
    font-size: 0.78rem;
    color: #64748b;
    line-height: 1.4;
}

/* Carousel Scroll Navigation Chevrons */
.shelf-nav-controls {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.shelf-nav-btn {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.05);
    color: #334155;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 0;
}

.shelf-nav-btn:hover {
    background: #ffffff;
    color: #1a73e8;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.1);
    transform: scale(1.06);
}

.shelf-nav-btn:active {
    transform: scale(0.96);
}

.spotlight-play-pause-btn {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.05);
    color: #334155;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 0;
}

.spotlight-play-pause-btn:hover {
    background: #ffffff;
    color: #1a73e8;
    transform: scale(1.06);
}

.spotlight-play-pause-btn.is-paused {
    background: rgba(245, 158, 11, 0.12);
    color: #d97706;
    border-color: rgba(245, 158, 11, 0.3);
}

.shelf-footnote {
    font-size: 0.73rem;
    color: #64748b;
    font-style: italic;
    margin: 0.45rem 0 0 0.25rem;
}

.shelf-downloads-pill {
    background: rgba(16, 185, 129, 0.1);
    color: #059669;
}

@media (max-width: 640px) {
    .shelf-nav-controls .shelf-prev,
    .shelf-nav-controls .shelf-next {
        display: none !important;
    }
    .shelf-nav-controls .spotlight-play-pause-btn {
        display: inline-flex !important;
    }
}

/* 6. Collection Explorer Shelf */
.collections-shelf-track .collection-category-card {
    flex: 0 0 270px;
    width: 270px;
    max-width: 270px;
    scroll-snap-align: start;
    border-radius: 18px;
    padding: 1.2rem;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.85);
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.04);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.22s ease;
    box-sizing: border-box;
}

.collections-shelf-track .collection-category-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.08);
}

@media (max-width: 768px) {
    .collections-shelf-track .collection-category-card {
        flex: 0 0 230px;
        width: 230px;
        max-width: 230px;
        padding: 0.95rem;
    }
}

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

.collection-count {
    font-size: 0.74rem;
    font-weight: 700;
    color: #1a73e8;
    background: rgba(26, 115, 232, 0.08);
    padding: 0.2rem 0.6rem;
    border-radius: 9999px;
}

.collection-card-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 0.4rem 0;
}

.collection-card-desc {
    font-size: 0.8rem;
    color: #64748b;
    line-height: 1.45;
    margin: 0 0 1.25rem 0;
}

.collection-card-link {
    font-size: 0.82rem;
    font-weight: 600;
    color: #1a73e8;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: auto;
    transition: transform 0.15s ease;
}

.collection-card-link:hover {
    transform: translateX(3px);
}

/* 6. Work Detail Stats Capsule & Related Works */
.detail-stats-capsule {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.76rem;
    font-weight: 600;
    color: #475569;
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.75);
    vertical-align: middle;
    margin-left: 0.5rem;
}

.detail-stats-item {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.detail-stats-sep {
    opacity: 0.4;
}

.related-works-section {
    margin-top: 3.5rem;
    border-radius: 24px;
    padding: 2.2rem;
    border: 1px solid rgba(255, 255, 255, 0.7);
    background: rgba(255, 255, 255, 0.6);
}

.related-works-header {
    margin-bottom: 1.75rem;
}

.related-works-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 1.5rem;
}

/* 7. Admin Analytics Dashboard UI */
.filter-pills-group {
    display: flex;
    gap: 0.35rem;
    padding: 3px;
    background: rgba(15, 23, 42, 0.05);
    border-radius: 12px;
    border: 1px solid rgba(15, 23, 42, 0.06);
    flex-wrap: wrap;
}

.filter-pill-btn {
    padding: 0.35rem 0.85rem;
    border-radius: 8px;
    font-size: 0.78rem;
    font-weight: 600;
    color: #475569;
    background: transparent;
    text-decoration: none;
    transition: all 0.15s ease;
}

.filter-pill-btn:hover {
    color: #0f172a;
    background: rgba(255, 255, 255, 0.6);
}

.filter-pill-btn.active {
    background: #ffffff;
    color: #1a73e8;
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.08);
}

.stat-metric-card {
    border-radius: 20px;
    padding: 1.4rem;
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.8);
    display: flex;
    align-items: center;
    gap: 1.1rem;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04);
}

.stat-metric-icon {
    width: 50px;
    height: 50px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.stat-metric-info {
    display: flex;
    flex-direction: column;
}

.stat-metric-value {
    font-size: 1.65rem;
    font-weight: 700;
    line-height: 1.1;
    color: #0f172a;
    letter-spacing: -0.02em;
}

.stat-metric-label {
    font-size: 0.76rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #64748b;
    margin-top: 0.2rem;
}

.stat-metric-sub {
    font-size: 0.72rem;
    color: #94a3b8;
}

.analytics-chart-container {
    width: 100%;
    overflow-x: auto;
    padding: 1rem 0;
}

.dropdown-export {
    position: relative;
    display: inline-block;
}

.dropdown-menu {
    position: absolute;
    right: 0;
    top: 100%;
    margin-top: 0.4rem;
    min-width: 160px;
    border-radius: 12px;
    padding: 0.35rem;
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.12);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    z-index: 20;
    display: none;
}

.dropdown-export:hover .dropdown-menu,
.dropdown-export:focus-within .dropdown-menu {
    display: block;
}

.dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    font-size: 0.82rem;
    font-weight: 500;
    color: #334155;
    text-decoration: none;
    transition: background 0.15s ease;
}

.dropdown-item:hover {
    background: rgba(26, 115, 232, 0.08);
    color: #1a73e8;
}

/* 8. Dark Mode Overrides for Discovery & Analytics */
[data-theme="dark"] .repo-stats-strip {
    background: rgba(15, 23, 42, 0.65);
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.35);
}

[data-theme="dark"] .repo-stat-num {
    color: #f8fafc;
}

[data-theme="dark"] .repo-stat-label {
    color: #94a3b8;
}

[data-theme="dark"] .repo-stat-divider {
    background: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .discovery-section-title {
    color: #f8fafc;
}

[data-theme="dark"] .discovery-section-sub {
    color: #94a3b8;
}

[data-theme="dark"] .curated-card,
[data-theme="dark"] .trending-card,
[data-theme="dark"] .shelf-card,
[data-theme="dark"] .collection-category-card,
[data-theme="dark"] .related-works-section,
[data-theme="dark"] .stat-metric-card,
[data-theme="dark"] .trending-empty-compact {
    background: rgba(15, 23, 42, 0.65);
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

[data-theme="dark"] .shelf-card:hover {
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.45);
    border-color: rgba(96, 165, 250, 0.35);
}

[data-theme="dark"] .shelf-card-cover-frame {
    background: #0f172a;
    border-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .curated-card-title a,
[data-theme="dark"] .trending-card-title a,
[data-theme="dark"] .shelf-card-title a,
[data-theme="dark"] .collection-card-title,
[data-theme="dark"] .stat-metric-value,
[data-theme="dark"] .trending-empty-text strong {
    color: #f8fafc;
}

[data-theme="dark"] .shelf-card-author {
    color: #94a3b8;
}

[data-theme="dark"] .shelf-card-unit {
    color: #64748b;
}

[data-theme="dark"] .shelf-year {
    color: #94a3b8;
}

[data-theme="dark"] .shelf-curated-notes {
    background: rgba(30, 41, 59, 0.6);
    color: #cbd5e1;
    border-left-color: #f59e0b;
}

[data-theme="dark"] .curated-card-notes {
    background: rgba(30, 41, 59, 0.55);
}

[data-theme="dark"] .curated-notes-text {
    color: #cbd5e1;
}

[data-theme="dark"] .trending-period-segmented,
[data-theme="dark"] .filter-pills-group {
    background: rgba(0, 0, 0, 0.3);
    border-color: rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] .trending-period-btn.active,
[data-theme="dark"] .filter-pill-btn.active {
    background: rgba(30, 41, 59, 0.85);
    color: #f8fafc;
}

[data-theme="dark"] .shelf-nav-btn,
[data-theme="dark"] .spotlight-play-pause-btn {
    background: rgba(30, 41, 59, 0.85);
    border-color: rgba(255, 255, 255, 0.1);
    color: #cbd5e1;
}

[data-theme="dark"] .spotlight-play-pause-btn.is-paused {
    background: rgba(245, 158, 11, 0.2);
    color: #fbbf24;
    border-color: rgba(245, 158, 11, 0.4);
}

[data-theme="dark"] .shelf-footnote {
    color: #94a3b8;
}

[data-theme="dark"] .shelf-downloads-pill {
    background: rgba(16, 185, 129, 0.2);
    color: #34d399;
}

[data-theme="dark"] .shelf-nav-btn:hover {
    background: #1e293b;
    color: #60a5fa;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}

[data-theme="dark"] .shelf-track::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.18);
}

[data-theme="dark"] .shelf-track::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.32);
}

[data-theme="dark"] .trending-empty-text p {
    color: #94a3b8;
}

[data-theme="dark"] .detail-stats-capsule {
    background: rgba(15, 23, 42, 0.6);
    border-color: rgba(255, 255, 255, 0.08);
    color: #cbd5e1;
}

[data-theme="dark"] .dropdown-menu {
    background: rgba(15, 23, 42, 0.95);
    border-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .dropdown-item {
    color: #e2e8f0;
}

[data-theme="dark"] .dropdown-item:hover {
    background: rgba(26, 115, 232, 0.2);
    color: #60a5fa;
}

/* ==========================================================================
   GLOBAL DROPDOWN SYSTEM — iOS 26 / LIQUID GLASS
   Unified accessible custom select & popover component
   ========================================================================== */

/* 1. Off-screen accessible native select */
.liquid-select-native {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* 2. Container Wrapper */
.liquid-select-wrapper {
    position: relative;
    display: block;
    width: 100%;
    box-sizing: border-box;
    vertical-align: middle;
}

.liquid-select-wrapper.is-open {
    z-index: 105;
}

.liquid-select-wrapper.is-disabled {
    opacity: 0.55;
    pointer-events: none;
    cursor: not-allowed;
}

/* 3. Trigger Button */
.liquid-select-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 46px;
    height: 46px;
    padding: 0 0.85rem;
    gap: 0.5rem;
    box-sizing: border-box;
    font-family: inherit;
    font-size: 0.88rem;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    border-radius: var(--radius-sm, 12px);
    border: 1px solid rgba(210, 222, 238, 0.95);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(246, 250, 255, 0.9));
    color: var(--text-primary, #14213a);
    box-shadow: 0 2px 6px rgba(30, 56, 96, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.95);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    backdrop-filter: blur(16px) saturate(160%);
    transition: background var(--duration-liquid, 190ms) var(--ease-liquid, ease),
                border-color var(--duration-liquid, 190ms) var(--ease-liquid, ease),
                box-shadow var(--duration-liquid, 190ms) var(--ease-liquid, ease),
                color var(--duration-liquid, 190ms) var(--ease-liquid, ease);
}

.liquid-select-trigger:hover:not(:disabled) {
    border-color: #9cb5db;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 4px 12px rgba(30, 56, 96, 0.08);
}

.liquid-select-trigger:focus-visible,
.liquid-select-trigger.is-active {
    outline: none;
    border-color: var(--accent, #1556b0);
    box-shadow: var(--focus-ring, 0 0 0 3px rgba(21, 86, 176, 0.3));
}

.liquid-select-wrapper.is-invalid .liquid-select-trigger {
    border-color: var(--color-danger, #b42318) !important;
    box-shadow: 0 0 0 3px rgba(180, 35, 24, 0.25) !important;
}

/* 4. Trigger Label & Chevron */
.liquid-select-label {
    flex: 1 1 auto;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: inherit;
}

.liquid-select-chevron {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: var(--text-muted, #71849d);
    transition: transform 200ms cubic-bezier(0.2, 0.75, 0.25, 1), color 160ms ease;
}

.liquid-select-trigger.is-active .liquid-select-chevron {
    transform: rotate(180deg);
    color: var(--accent, #1556b0);
}

/* 5. Dropdown Panel (Popover) */
.liquid-select-panel {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    width: max-content;
    min-width: 100%;
    max-width: min(320px, calc(100vw - 24px));
    max-height: 280px;
    border-radius: 14px;
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 1000;
    box-sizing: border-box;
    padding: 6px;
    -webkit-overflow-scrolling: touch;
    border: 1px solid rgba(196, 212, 236, 0.92);
    background: linear-gradient(155deg, rgba(255, 255, 255, 0.96), rgba(244, 248, 255, 0.94));
    box-shadow: 0 18px 42px rgba(20, 43, 79, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.95);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    backdrop-filter: blur(24px) saturate(180%);
    pointer-events: none;
    opacity: 0;
    transform: translateY(-6px) scale(0.98);
    transform-origin: top center;
    transition: opacity 160ms cubic-bezier(0.16, 1, 0.3, 1), transform 160ms cubic-bezier(0.16, 1, 0.3, 1);
}

.liquid-select-panel.is-align-right {
    left: auto;
    right: 0;
}

@media (max-width: 640px) {
    .liquid-select-panel {
        width: 100%;
        min-width: 100%;
        max-width: 100%;
    }
}

.liquid-select-panel.is-open {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.liquid-select-panel.is-upward {
    top: auto;
    bottom: calc(100% + 6px);
    transform-origin: bottom center;
    transform: translateY(6px) scale(0.98);
}

.liquid-select-panel.is-upward.is-open {
    transform: translateY(0) scale(1);
}

.liquid-select-options-container {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.liquid-select-empty {
    padding: 0.75rem 0.85rem;
    font-size: 0.82rem;
    color: var(--text-muted, #64748b);
    text-align: center;
    font-style: italic;
}

/* 6. Option Items */
.liquid-select-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.55rem 0.85rem;
    border-radius: 8px;
    font-size: 0.86rem;
    color: var(--text-primary, #14213a);
    cursor: pointer;
    user-select: none;
    gap: 0.65rem;
    min-height: 38px;
    box-sizing: border-box;
    transition: background 120ms ease, color 120ms ease;
}

.liquid-select-option-text {
    flex: 1 1 auto;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.liquid-select-option:hover:not(.is-disabled),
.liquid-select-option.is-highlighted:not(.is-disabled) {
    background: rgba(226, 237, 254, 0.7);
    color: #0f172a;
}

.liquid-select-option.is-selected {
    background: rgba(37, 99, 235, 0.1);
    color: #1d4ed8;
    font-weight: 650;
}

.liquid-select-option.is-disabled {
    opacity: 0.42;
    cursor: not-allowed;
}

.liquid-select-checkmark {
    display: none;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: currentColor;
}

.liquid-select-option.is-selected .liquid-select-checkmark {
    display: inline-flex;
}

/* 7. Groups */
.liquid-select-group {
    padding-top: 4px;
    margin-top: 4px;
    border-top: 1px solid rgba(210, 222, 240, 0.7);
}

.liquid-select-group:first-child {
    padding-top: 0;
    margin-top: 0;
    border-top: none;
}

.liquid-select-group-label {
    padding: 0.35rem 0.85rem;
    font-size: 0.69rem;
    font-weight: 750;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-muted, #64748b);
}

/* 8. Slim Glass Scrollbar */
.liquid-select-panel::-webkit-scrollbar {
    width: 6px;
}
.liquid-select-panel::-webkit-scrollbar-track {
    background: transparent;
}
.liquid-select-panel::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.4);
    border-radius: 999px;
}

/* 9. Dark Mode Overrides */
[data-theme="dark"] .liquid-select-trigger {
    border-color: rgba(255, 255, 255, 0.12);
    background: linear-gradient(135deg, rgba(23, 34, 51, 0.88), rgba(15, 23, 42, 0.85));
    color: var(--text-primary, #f8fafc);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .liquid-select-trigger:hover:not(:disabled) {
    border-color: rgba(255, 255, 255, 0.25);
    background: rgba(30, 41, 59, 0.92);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}

[data-theme="dark"] .liquid-select-trigger:focus-visible,
[data-theme="dark"] .liquid-select-trigger.is-active {
    border-color: rgba(96, 165, 250, 0.7);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.35);
}

[data-theme="dark"] .liquid-select-trigger.is-active .liquid-select-chevron {
    color: #60a5fa;
}

[data-theme="dark"] .liquid-select-panel {
    border-color: rgba(148, 163, 184, 0.22);
    background: linear-gradient(155deg, rgba(15, 23, 42, 0.96), rgba(23, 34, 54, 0.95));
    box-shadow: 0 22px 50px rgba(0, 0, 0, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .liquid-select-option {
    color: var(--text-primary, #f8fafc);
}

[data-theme="dark"] .liquid-select-option:hover:not(.is-disabled),
[data-theme="dark"] .liquid-select-option.is-highlighted:not(.is-disabled) {
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
}

[data-theme="dark"] .liquid-select-option.is-selected {
    background: rgba(59, 130, 246, 0.22);
    color: #60a5fa;
    font-weight: 650;
}

[data-theme="dark"] .liquid-select-group {
    border-top-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .liquid-select-panel::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.22);
}

/* 10. Context Specific Refinements */

/* Kolase Page Filters */
.kolase-page .filter-field .liquid-select-trigger {
    min-height: 42px;
    height: 42px;
    border-radius: var(--radius-sm, 10px);
    font-size: 0.84rem;
}

/* Repository Page Filters */
.repository-page .filter-field .liquid-select-trigger {
    min-height: 50px;
    height: 50px;
    border-radius: 14px;
    font-size: 0.84rem;
}

/* Admin Field */
.admin-field .liquid-select-trigger {
    min-height: 46px;
    height: 46px;
    border-radius: 8px;
}

/* Analytics Filter Grid */
.analytics-filter-grid .liquid-select-trigger {
    min-height: 42px;
    height: 42px;
    border-radius: 8px;
}

/* Export Dropdown Menu (Analytics & Admin) */
.dropdown-menu {
    border-radius: 14px !important;
    border: 1px solid rgba(196, 212, 236, 0.92) !important;
    background: linear-gradient(155deg, rgba(255, 255, 255, 0.96), rgba(244, 248, 255, 0.94)) !important;
    box-shadow: 0 18px 42px rgba(20, 43, 79, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
    -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
    backdrop-filter: blur(24px) saturate(180%) !important;
    padding: 6px !important;
}

.dropdown-menu.show {
    display: block !important;
    animation: liquidMenuFadeIn 160ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes liquidMenuFadeIn {
    from {
        opacity: 0;
        transform: translateY(-6px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.dropdown-item {
    display: block;
    padding: 0.55rem 0.85rem;
    border-radius: 8px;
    font-size: 0.86rem;
    color: var(--text-primary, #14213a) !important;
    text-decoration: none;
    transition: background 120ms ease, color 120ms ease;
}

.dropdown-item:hover {
    background: rgba(226, 237, 254, 0.7) !important;
    color: #0f172a !important;
}

[data-theme="dark"] .dropdown-menu {
    border-color: rgba(148, 163, 184, 0.22) !important;
    background: linear-gradient(155deg, rgba(15, 23, 42, 0.96), rgba(23, 34, 54, 0.95)) !important;
    box-shadow: 0 22px 50px rgba(0, 0, 0, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] .dropdown-item {
    color: var(--text-primary, #f8fafc) !important;
}

[data-theme="dark"] .dropdown-item:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #60a5fa !important;
}

/* Autocomplete Combobox Harmonization (Pearl Glass Light & Obsidian Glass Dark) */
.participant-autocomplete-wrapper.is-open {
    z-index: 95;
}

.participant-autocomplete-dropdown {
    top: calc(100% + 6px);
    max-width: calc(100vw - 24px);
    z-index: 1000;
    border-radius: 14px;
    border: 1px solid rgba(196, 212, 236, 0.92);
    background: linear-gradient(155deg, rgba(255, 255, 255, 0.96), rgba(244, 248, 255, 0.94));
    box-shadow: 0 18px 42px rgba(20, 43, 79, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.95);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    backdrop-filter: blur(24px) saturate(180%);
    transform-origin: top center;
}

.participant-autocomplete-dropdown:not([hidden]) {
    animation: liquidMenuFadeIn 160ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.participant-autocomplete-dropdown.is-upward {
    top: auto;
    bottom: calc(100% + 6px);
    transform-origin: bottom center;
}

.participant-autocomplete-list {
    -webkit-overflow-scrolling: touch;
}

.participant-autocomplete-list::-webkit-scrollbar {
    width: 6px;
}

.participant-autocomplete-list::-webkit-scrollbar-track {
    background: transparent;
}

.participant-autocomplete-list::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.4);
    border-radius: 999px;
}

.participant-autocomplete-state.is-loading strong::before {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: 0.45rem;
    border-radius: 999px;
    background: #2563eb;
    vertical-align: middle;
}

[data-theme="dark"] .participant-autocomplete-dropdown {
    border-color: rgba(148, 163, 184, 0.22) !important;
    background: linear-gradient(155deg, rgba(15, 23, 42, 0.96), rgba(23, 34, 54, 0.95)) !important;
    box-shadow: 0 22px 50px rgba(0, 0, 0, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
    -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
    backdrop-filter: blur(24px) saturate(180%) !important;
}

[data-theme="dark"] .participant-autocomplete-list::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.22);
}

[data-theme="dark"] .participant-autocomplete-state.is-loading strong::before {
    background: #60a5fa;
}

@media (min-width: 641px) {
    .participant-autocomplete-dropdown {
        min-width: min(520px, calc(100vw - 48px));
    }
}

@media (max-width: 640px) {
    .participant-autocomplete-list {
        max-height: min(280px, 52vh);
    }

    .participant-autocomplete-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.35rem;
        padding: 0.65rem 0.8rem;
    }

    .participant-autocomplete-action {
        align-self: flex-end;
        font-size: 0.72rem;
    }
}

/* 9. Print View (@media print) */
@media print {
    .site-header,
    .site-footer,
    .admin-nav,
    .filter-pills-group,
    .btn-export,
    .btn-print,
    .detail-actions,
    .breadcrumbs,
    .skip-link {
        display: none !important;
    }

    body {
        background: #ffffff !important;
        color: #000000 !important;
        font-size: 10pt;
    }

    .admin-shell, .detail-main {
        padding: 0 !important;
        margin: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .glass, .stat-metric-card, .curated-card, .trending-card {
        background: #ffffff !important;
        border: 1px solid #cccccc !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    .analytics-printable-page {
        page-break-after: always;
    }
}