@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Slackside+One&display=swap');

:root {
    --font-default: 'Playfair Display', Georgia, 'Times New Roman', serif;
    --font-student-name: 'Slackside One', cursive;
    --student-gold: #f3c969;
    --student-gold-soft: rgba(243, 201, 105, 0.12);
    --bg-main: #0f1117;
    --bg-card: #161b26;
    --bg-glass: rgba(22, 27, 38, 0.85);
    --surface-muted: #1a202c;
    --border-color: rgba(148, 163, 184, 0.28);
    --border-glow: rgba(100, 116, 139, 0.3);
    
    --primary: #475569;
    --primary-hover: #334155;
    --primary-light: rgba(71, 85, 105, 0.2);
    --accent: #64748b;
    --accent-glow: rgba(100, 116, 139, 0.25);

    --text-heading: #f8fafc;
    --text-body: #cbd5e1;
    --text-muted: #94a3b8;
    --text-secondary: #a8b4c5;

    --success: #10b981;
    --warning: #f59e0b;
    --danger: #ef4444;
    --info: #64748b;

    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 18px;
    --radius-full: 9999px;

    --shadow-subtle: 0 10px 30px -10px rgba(0, 0, 0, 0.5);
    --shadow-glow: none;
    --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-smooth: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;
    --space-3xl: 4rem;
}

:root,
:root[data-theme="light"] { --text-secondary: #526173; }

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: var(--font-default);
}

body {
    background-color: var(--bg-main);
    background-image: none;
    background-attachment: fixed;
    color: var(--text-body);
    min-height: 100vh;
    line-height: 1.6;
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-default);
    color: var(--text-heading);
    font-weight: 700;
    letter-spacing: -0.02em;
}

#studentName {
    font-family: var(--font-student-name);
    font-weight: 400;
    color: var(--student-gold);
    text-shadow: 0 1px 12px rgba(243, 201, 105, 0.16);
}

/* Glass Card Component */
.glass-card {
    background: var(--bg-card);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-subtle);
    transition: transform var(--transition-smooth), border-color var(--transition-smooth), box-shadow var(--transition-smooth);
}

.glass-card:hover {
    border-color: rgba(100, 116, 139, 0.3);
}

/* Container */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    font-size: 0.95rem;
    font-weight: 600;
    border-radius: var(--radius-md);
    border: 1px solid transparent;
    cursor: pointer;
    transition: all var(--transition-fast);
    text-decoration: none;
    outline: none;
}

.btn-primary {
    background: var(--primary);
    color: #ffffff;
    box-shadow: none;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: none;
    background: var(--primary-hover);
}

.btn-secondary {
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--border-color);
    color: var(--text-heading);
}

.btn-secondary:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
}

.btn-danger {
    background: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.3);
    color: #fca5a5;
}

.btn-danger:hover {
    background: rgba(239, 68, 68, 0.3);
    color: #ffffff;
}

.btn-sm {
    padding: 0.4rem 0.85rem;
    font-size: 0.85rem;
    border-radius: var(--radius-sm);
}

/* Form Controls */
.form-group {
    margin-bottom: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.form-label {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-heading);
}

.form-input, .form-select, .form-textarea {
    width: 100%;
    padding: 0.75rem 1rem;
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-heading);
    font-size: 0.95rem;
    transition: all var(--transition-fast);
    outline: none;
}

.form-input:focus, .form-select:focus, .form-textarea:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-light);
    background: rgba(15, 23, 42, 0.9);
}

.form-input::placeholder {
    color: var(--text-muted);
}

.form-hint {
    font-size: 0.775rem;
    color: var(--text-muted);
}

/* Navbar */
.navbar {
    padding: 1.25rem 0;
    border-bottom: 1px solid var(--border-color);
    background: rgba(11, 15, 25, 0.7);
    backdrop-filter: blur(20px);
    position: sticky;
    top: 0;
    z-index: 100;
}

.navbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
}

.brand-icon {
    width: 40px;
    height: 40px;
    background: var(--primary);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 800;
    font-size: 1.2rem;
    box-shadow: var(--shadow-glow);
}

.brand-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-heading);
    letter-spacing: -0.01em;
}

.brand-subtitle {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-weight: 400;
}

/* Badges */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.65rem;
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.badge-online {
    background: rgba(16, 185, 129, 0.15);
    color: #34d399;
    border: 1px solid rgba(16, 185, 129, 0.35);
}

.badge-offline {
    background: rgba(100, 116, 139, 0.18);
    color: #cbd5e1;
    border: 1px solid rgba(148, 163, 184, 0.3);
}

.badge-info {
    background: rgba(71, 85, 105, 0.2);
    color: #e2e8f0;
    border: 1px solid rgba(148, 163, 184, 0.3);
}

/* Auth Layout */
.auth-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 90px);
    padding: 2rem 1rem;
}

.auth-card {
    width: 100%;
    max-width: 440px;
    padding: 2.5rem 2rem;
}

.auth-header {
    text-align: center;
    margin-bottom: 2rem;
}

.auth-header h2 {
    font-size: 1.75rem;
    margin-bottom: 0.5rem;
}

.auth-header p {
    color: var(--text-muted);
    font-size: 0.9rem;
}

/* Dashboard Layout */
.dashboard-wrapper {
    padding: 2rem 0 4rem;
}

.header-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 2rem;
    margin-bottom: 2rem;
    position: relative;
    overflow: hidden;
}

.header-banner::after {
    content: '';
    position: absolute;
    right: -50px;
    bottom: -50px;
    width: 250px;
    height: 250px;
    background: radial-gradient(circle, var(--accent-glow) 0%, transparent 70%);
    pointer-events: none;
}

.student-meta {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.student-avatar {
    width: 64px;
    height: 64px;
    border-radius: var(--radius-md);
    background: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    font-weight: 700;
    color: #ffffff;
    box-shadow: var(--shadow-glow);
}

.student-info h2 {
    font-size: 1.6rem;
    line-height: 1.2;
}

.student-info p {
    color: var(--text-muted);
    font-size: 0.9rem;
    display: flex;
    gap: 1rem;
    margin-top: 0.25rem;
}

/* Tabs */
.tabs-nav {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 0.5rem;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 2rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Hide scrollbar for cleaner look */
}
.tabs-nav::-webkit-scrollbar {
    display: none;
}

.tab-btn {
    flex: 1 0 auto;
    text-align: center;
    padding: 0.85rem 1.4rem;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--text-muted);
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all var(--transition-fast);
    white-space: nowrap;
}

.tab-btn:hover {
    color: var(--text-heading);
}

.tab-btn.active {
    color: var(--primary);
    border-bottom-color: var(--primary);
}

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
    animation: fadeIn 0.3s ease;
}

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

/* Grid Layouts */
.grid-2 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1.5rem;
}

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

.grid-semesters {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
}

@media (max-width: 640px) {
    .grid-semesters {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Section Header */
.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
}

/* Items List Card */
.item-card {
    padding: 1.25rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.item-details h4 {
    font-size: 1.1rem;
    margin-bottom: 0.2rem;
}

.item-details p {
    font-size: 0.875rem;
    color: var(--text-muted);
}

.item-actions {
    display: flex;
    gap: 0.5rem;
}

/* Modal */
.modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(8px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 1rem;
}

.modal-backdrop.active {
    display: flex;
    animation: fadeIn 0.2s ease;
}

.modal-card {
    width: 100%;
    max-width: 520px;
    padding: 2rem;
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
}

.close-btn {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 1.5rem;
    cursor: pointer;
    line-height: 1;
}

.close-btn:hover {
    color: var(--text-heading);
}

/* Toast Notification */
.toast-container {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.toast {
    padding: 1rem 1.25rem;
    border-radius: var(--radius-md);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--text-heading);
    font-size: 0.9rem;
    animation: slideIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.toast-success {
    border-left: 4px solid var(--success);
}

.toast-error {
    border-left: 4px solid var(--danger);
}

@keyframes slideIn {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

.responsive-two-column { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; }
.stack-list { display: grid; gap: 0.75rem; margin-top: 1rem; }
.table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

@media (max-width: 768px) {
    .responsive-two-column { grid-template-columns: 1fr; }
    .navbar-inner { gap: 0.75rem; }
    .tabs { overflow-x: auto; flex-wrap: nowrap; }
    .tab-btn { white-space: nowrap; }
    .item-card { align-items: flex-start; gap: 1rem; }
    .toast-container { left: 1rem; right: 1rem; bottom: 1rem; }
    .toast { width: 100%; }
}

@media (max-width: 420px) {
    .container { padding-left: 0.75rem; padding-right: 0.75rem; }
    .glass-card, .modal-card { padding: 1rem; }
    .item-card { flex-direction: column; }
    .item-actions { width: 100%; flex-wrap: wrap; }
}

/* Institutional design system: warm, restrained, accessible. */
:root,
:root[data-theme="light"] {
    --bg-main: #f3f0e8;
    --bg-card: #fffdf8;
    --bg-glass: #ece8dd;
    --surface-muted: #f0ece2;
    --border-color: #d6d0c3;
    --border-glow: #1f5b49;
    --primary: #1f5b49;
    --primary-hover: #174638;
    --primary-light: rgba(31, 91, 73, 0.14);
    --accent: #a8612a;
    --accent-glow: rgba(168, 97, 42, 0.14);
    --text-heading: #202722;
    --text-body: #3f4942;
    --text-muted: #687069;
    --success: #2e7359;
    --warning: #9a5b24;
    --danger: #a33b32;
    --student-gold: #8a5a00;
    --student-gold-soft: rgba(138, 90, 0, 0.1);
    --shadow-subtle: 0 12px 34px rgba(55, 48, 38, 0.08);
    --shadow-glow: none;
    color-scheme: light;
}

:root[data-theme="dark"] {
    --bg-main: #0f1117;
    --bg-card: #161b26;
    --bg-glass: rgba(22, 27, 38, 0.85);
    --surface-muted: #1a202c;
    --border-color: rgba(148, 163, 184, 0.28);
    --border-glow: #64748b;
    --primary: #475569;
    --primary-hover: #334155;
    --primary-light: rgba(71, 85, 105, 0.2);
    --accent: #64748b;
    --accent-glow: rgba(100, 116, 139, 0.25);
    --text-heading: #f8fafc;
    --text-body: #cbd5e1;
    --text-muted: #94a3b8;
    --text-secondary: #a8b4c5;
    --success: #10b981;
    --warning: #f59e0b;
    --danger: #ef4444;
    --student-gold: #f3c969;
    --student-gold-soft: rgba(243, 201, 105, 0.12);
    --shadow-subtle: 0 10px 28px rgba(0, 0, 0, 0.4);
    --shadow-glow: none;
    color-scheme: dark;
}

html { font-size: 16px; }

body {
    background: var(--bg-main);
    color: var(--text-body);
    font-family: var(--font-default);
    line-height: 1.55;
}

*, h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-default);
}

h1, h2, h3, h4, h5, h6 { letter-spacing: -0.015em; }

.container { max-width: 1280px; padding-inline: clamp(1rem, 3vw, 2rem); }

.navbar {
    min-height: 72px;
    padding: 0.8rem 0;
    background: color-mix(in srgb, var(--bg-card) 94%, transparent);
    border-bottom-color: var(--border-color);
    backdrop-filter: blur(10px);
}

.navbar-inner { min-height: 46px; gap: 1rem; }
.brand { min-width: 0; }
.brand-icon {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    background: var(--primary) !important;
    border: 1px solid color-mix(in srgb, var(--primary) 72%, var(--border-color));
    border-radius: 10px;
    box-shadow: none;
    font-size: 0.95rem;
    letter-spacing: 0.04em;
}
.brand-title { font-size: clamp(1rem, 2vw, 1.2rem); line-height: 1.25; }
.brand-subtitle { font-size: 0.8rem; }

.theme-toggle {
    min-height: 40px;
    padding: 0.55rem 0.85rem;
    margin-left: auto;
    border: 1px solid var(--border-color);
    border-radius: 9px;
    background: var(--bg-card);
    color: var(--text-heading);
    font-size: 0.875rem;
    font-weight: 650;
    cursor: pointer;
}
.theme-toggle:hover { border-color: var(--primary); background: var(--surface-muted); }

.glass-card {
    background: var(--bg-card);
    border-color: var(--border-color);
    border-radius: 14px;
    box-shadow: var(--shadow-subtle);
    backdrop-filter: none;
}
.glass-card:hover { border-color: var(--border-color); }

.auth-wrapper { min-height: calc(100vh - 72px); padding: clamp(1.5rem, 5vw, 4rem) 1rem; }
.auth-card { max-width: 480px; padding: clamp(1.5rem, 5vw, 2.5rem); }
.auth-header { margin-bottom: 1.75rem; }
.auth-header h2 { font-size: clamp(1.5rem, 4vw, 1.9rem); }
.auth-header p { max-width: 36rem; margin-inline: auto; font-size: 0.95rem; }

.form-group { gap: 0.5rem; margin-bottom: 1.2rem; }
.form-label { font-size: 0.9rem; font-weight: 650; }
.form-input, .form-select, .form-textarea {
    min-height: 46px;
    padding: 0.72rem 0.85rem;
    background: var(--bg-card);
    border-color: var(--border-color);
    border-radius: 9px;
    color: var(--text-heading);
    font-size: 1rem;
}
.form-textarea { min-height: 112px; }
.form-input:focus, .form-select:focus, .form-textarea:focus {
    background: var(--bg-card);
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-light);
}
.form-hint { font-size: 0.82rem; line-height: 1.45; }
.form-alert {
    margin-bottom: 1rem;
    padding: 0.75rem 0.9rem;
    border: 1px solid color-mix(in srgb, var(--danger) 55%, var(--border-color));
    border-radius: 9px;
    background: color-mix(in srgb, var(--danger) 9%, var(--bg-card));
    color: var(--danger);
    font-size: 0.9rem;
    line-height: 1.45;
}

.btn {
    min-height: 42px;
    padding: 0.65rem 1rem;
    border-radius: 9px;
    font-size: 0.93rem;
    font-weight: 650;
    box-shadow: none;
    transform: none;
}
.btn-primary, .btn-primary:hover {
    background: var(--primary) !important;
    border-color: var(--primary);
    color: var(--bg-card);
    box-shadow: none;
    transform: none;
}
:root[data-theme="dark"] .btn-primary { color: #142019; }
.btn-secondary { background: var(--bg-card); border-color: var(--border-color); color: var(--text-heading); }
.btn-secondary:hover { background: var(--surface-muted); border-color: var(--primary); }
.btn-danger { background: transparent; border-color: var(--danger); color: var(--danger); }
.btn-danger:hover { background: var(--danger); color: var(--bg-card); }
.btn-sm { min-height: 36px; padding: 0.5rem 0.75rem; font-size: 0.85rem; }

.badge {
    padding: 0.38rem 0.68rem;
    border-radius: 8px;
    font-size: 0.76rem;
    letter-spacing: 0.025em;
}
.badge-info, .badge-online, .badge-offline {
    background: var(--surface-muted) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-heading) !important;
}

.dashboard-wrapper { padding: clamp(1.25rem, 3vw, 2.25rem) 0 3rem; }
.header-banner { padding: clamp(1.25rem, 3vw, 2rem); margin-bottom: 1.5rem; gap: 1.25rem; }
.header-banner::after { display: none; }
.student-meta { min-width: 0; gap: 1rem; }
.student-avatar {
    width: 58px;
    height: 58px;
    flex: 0 0 58px;
    background: var(--primary);
    border-radius: 12px;
    box-shadow: none;
    font-size: 1.4rem;
}
.student-info h2 { font-size: clamp(1.3rem, 3vw, 1.65rem); }
.student-info p { flex-wrap: wrap; gap: 0.45rem 0.8rem; }

.tabs-nav { gap: 0; margin-bottom: 1.5rem; scrollbar-width: thin; }
.tab-btn { min-height: 46px; padding: 0.75rem 1rem; font-size: 0.9rem; }
.tab-btn.active { color: var(--primary); border-bottom-color: var(--primary); }

.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.9rem; }
.grid-semesters { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.section-header { gap: 1rem; }
.item-card { gap: 1rem; padding: 1.1rem 1.2rem; }

.data-table { font-size: 0.9rem; }
.data-table th, .data-table td { padding: 0.85rem 1rem; }
.data-table td, .observer-table td { font-family: var(--font-default); }
.data-table th { background: var(--surface-muted) !important; }
.data-table tr:hover { background: var(--surface-muted) !important; }
.filter-bar { gap: 1rem; padding: 1.1rem !important; }
.upload-dropzone { padding: clamp(1.5rem, 5vw, 2.5rem) !important; background: var(--surface-muted) !important; }

.glass-card [style*="background: rgba("],
.glass-card [style*="background:rgba("] {
    background: var(--surface-muted) !important;
}

.modal-backdrop { background: rgba(8, 10, 8, 0.72); }
.modal-card { max-height: min(88vh, 760px); overflow-y: auto; }
.toast { background: var(--bg-card); box-shadow: var(--shadow-subtle); }

@media (max-width: 900px) {
    .grid-2 { grid-template-columns: 1fr; }
    .header-banner { align-items: flex-start; flex-direction: column; }
    .header-banner > div:last-child { width: 100%; display: flex; flex-wrap: wrap; }
}

@media (max-width: 640px) {
    .navbar-inner { align-items: center; flex-wrap: wrap; }
    .brand { flex: 1 1 220px; }
    .navbar-inner > div:last-of-type { flex-wrap: wrap; gap: 0.5rem !important; }
    .theme-toggle { margin-left: 0; }
    .auth-wrapper { align-items: flex-start; }
    .grid-semesters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .section-header { align-items: flex-start; flex-direction: column; }
    .section-header .btn { width: 100%; }
    .item-card { flex-direction: column; align-items: stretch; }
    .item-actions { width: 100%; }
    .item-actions .btn { flex: 1; }
}

@media (max-width: 380px) {
    html { font-size: 15px; }
    .brand-subtitle { display: none; }
    .auth-card { padding: 1.25rem; }
}

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

/* Observer workspace */
.observer-shell { background-image: radial-gradient(circle at 8% 0%, rgba(71, 85, 105, .15), transparent 27rem), radial-gradient(circle at 92% 12%, rgba(100, 116, 139, .12), transparent 30rem); }
.observer-nav { border-bottom-color: rgba(148, 163, 184, .2); }
.observer-identity { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; justify-content: flex-end; }
.readonly-pill { display: inline-flex; align-items: center; gap: .4rem; border: 1px solid rgba(148, 163, 184, .3); color: #cbd5e1; background: rgba(71, 85, 105, .2); border-radius: 999px; padding: .38rem .72rem; font-size: .76rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.readonly-pill::before { content: ""; width: .42rem; height: .42rem; border-radius: 50%; background: #94a3b8; box-shadow: 0 0 0 4px rgba(148,163,184,.15); }
.eyebrow { display: block; color: #94a3b8; font-size: .72rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; margin-bottom: .45rem; }
.observer-hero { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(240px, .7fr); gap: 2rem; align-items: end; padding: 2.4rem; border: 1px solid rgba(148, 163, 184, .18); border-radius: var(--radius-lg); background: linear-gradient(135deg, rgba(30, 41, 59, .5), rgba(15, 17, 23, .8)); box-shadow: inset 0 1px 0 rgba(255,255,255,.05); }
.observer-hero h1 { max-width: 740px; font-size: clamp(2rem, 4vw, 3.25rem); line-height: 1.04; letter-spacing: -.045em; margin-bottom: .9rem; }
.observer-hero p { max-width: 720px; color: var(--text-muted); font-size: 1rem; line-height: 1.7; }
.hero-signal { display: flex; gap: .85rem; align-items: center; padding: 1rem; background: rgba(15, 23, 42, .6); border: 1px solid rgba(148, 163, 184, .18); border-radius: 14px; }
.hero-signal strong, .hero-signal small { display: block; } .hero-signal small { color: var(--text-muted); margin-top: .2rem; }
.signal-dot { width: .72rem; height: .72rem; border-radius: 50%; background: #34d399; box-shadow: 0 0 0 6px rgba(52,211,153,.12), 0 0 24px rgba(52,211,153,.45); }
.metric-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: .85rem; margin: 1rem 0 2rem; }
.metric-card { padding: 1.15rem; border: 1px solid var(--border-color); border-radius: 14px; background: rgba(15, 23, 42, .72); }
.metric-card span, .metric-card small { display: block; color: var(--text-muted); font-size: .75rem; } .metric-card strong { display: block; color: var(--text-heading); font-size: 1.75rem; margin: .4rem 0 .18rem; }
.observer-section { margin: 2rem 0; }
.section-note { color: var(--text-muted); font-size: .82rem; border: 1px solid var(--border-color); border-radius: 999px; padding: .45rem .75rem; }
.branch-grid { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:.7rem; }
.branch-card { min-width:0; padding:1rem; border:1px solid var(--border-color); border-radius:12px; background:linear-gradient(150deg,rgba(22,27,38,.95),rgba(30,41,59,.4)); }
.branch-card-head, .branch-facts, .drive-title-row, .drive-facts, .modal-actions { display: flex; align-items: center; justify-content: space-between; gap: .7rem; }
.branch-card-head { color: var(--text-muted); font-size: .72rem; } .branch-code, .branch-chip { display: inline-flex; color: #f1f5f9; background: rgba(71, 85, 105, .25); border: 1px solid rgba(148, 163, 184, .3); border-radius: 999px; padding: .28rem .58rem; font-weight: 800; font-size: .75rem; }
.branch-card h3 { font-size:.88rem; min-height:3.7rem; margin:.7rem 0; line-height:1.35; }
.progress-track { height: .38rem; background: rgba(148, 163, 184, .14); overflow: hidden; border-radius: 99px; }.progress-track span { display:block;height:100%;background:linear-gradient(90deg,#475569,#94a3b8);border-radius:inherit; }
.branch-facts { margin-top: .9rem; align-items: flex-start; }.branch-facts span { color:var(--text-muted);font-size:.67rem; }.branch-facts strong { display:block;color:var(--text-heading);font-size:.92rem; }
.observer-tabs { margin-top: 2.25rem; }
.observer-toolbar { display: grid; grid-template-columns: minmax(150px, .5fr) minmax(260px, 1.5fr) auto; gap: 1rem; align-items: end; padding: 1rem; margin-bottom: 1rem; }.observer-toolbar .btn { margin-bottom: .02rem; }
.table-shell { padding: 0; overflow-x: auto; }.observer-table { width: 100%; border-collapse: collapse; min-width: 780px; }.observer-table th { color: var(--text-muted); background: rgba(15,23,42,.78); font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; }.observer-table th,.observer-table td { text-align:left;padding: .92rem 1rem;border-bottom:1px solid var(--border-color); }.observer-table td { font-size:.86rem; }.observer-table td small { display:block;color:var(--text-muted);margin-top:.26rem; }.observer-table tbody tr:hover { background:rgba(148,163,184,.05); }
.status-ready,.status-pending { display:inline-flex;border-radius:999px;padding:.28rem .58rem;font-size:.72rem;font-weight:700; }.status-ready { color:#6ee7b7;background:rgba(16,185,129,.12); }.status-pending { color:#fcd34d;background:rgba(245,158,11,.12); }
.empty-cell,.empty-state { text-align:center!important;color:var(--text-muted);padding:2.5rem!important; }.pagination-bar { display:flex;align-items:center;justify-content:flex-end;gap:1rem;margin-top:1rem;color:var(--text-muted);font-size:.82rem; }
.drive-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem; }.drive-observer-card { padding:1.3rem; }.drive-title-row { align-items:flex-start; }.drive-title-row p,.drive-description,.criteria-line { color:var(--text-muted); }.drive-description { margin:1rem 0;line-height:1.55;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden; }.drive-facts { justify-content:flex-start;border-top:1px solid var(--border-color);border-bottom:1px solid var(--border-color);padding:.8rem 0; }.drive-facts span { font-size:.76rem;color:var(--text-muted); }.drive-facts strong { color:var(--text-heading);font-size:1rem; }.criteria-line { margin-top:.8rem;font-size:.76rem; }
.observer-modal { max-width:780px;max-height:90vh;overflow:auto; }.profile-summary-grid { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.7rem; }.profile-summary-grid div { padding:.9rem;background:rgba(15,23,42,.58);border:1px solid var(--border-color);border-radius:12px; }.profile-summary-grid span,.profile-summary-grid strong { display:block; }.profile-summary-grid span { color:var(--text-muted);font-size:.72rem; }.profile-summary-grid strong { margin-top:.3rem; }.record-section { margin-top:1.25rem; }.record-section h4 { margin-bottom:.65rem; }.record-section p { color:var(--text-muted);white-space:pre-wrap; }.chip-list { display:flex;flex-wrap:wrap;gap:.45rem; }.chip-list span { padding:.33rem .6rem;border-radius:99px;background:rgba(71,85,105,.2);color:#e2e8f0;font-size:.77rem; }.record-line { display:flex;justify-content:space-between;gap:1rem;padding:.65rem 0;border-bottom:1px solid var(--border-color); }.record-line span { color:var(--text-muted); }.modal-actions { margin-top:1.5rem;justify-content:flex-start; }
.auth-brand { margin-bottom:1.75rem; }.auth-heading { margin-bottom:1.5rem; }.auth-heading p,.auth-switch { color:var(--text-muted); }.auth-switch { text-align:center;font-size:.82rem;margin-top:1.25rem; }

.student-contact-actions { display:flex; flex-wrap:wrap; gap:.45rem; margin:.65rem 0; }
.student-contact-link { display:flex; flex-direction:column; gap:.12rem; min-width:180px; padding:.55rem .7rem; color:var(--text-heading); background:var(--surface-muted); border:1px solid var(--border-color); border-radius:8px; text-decoration:none; }
.student-contact-link span { color:var(--text-muted); font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; }
.student-contact-link strong { overflow-wrap:anywhere; font-size:.8rem; }
.student-contact-link:hover { border-color:var(--primary); background:var(--primary-light); }
.notice-audience { padding:.85rem; border:1px solid var(--border-color); border-radius:99px; }
.notice-all-branches { display:flex; align-items:center; gap:.5rem; margin-bottom:.65rem; color:var(--text-heading); font-weight:700; }
.notice-audience .branch-option-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
.notification-audience { margin-top:.6rem; color:var(--text-muted); font-size:.78rem; font-weight:700; }
.correction-review { padding-top:1rem; border-top:1px solid var(--border-color); }
.correction-check-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.45rem; margin:.75rem 0 1rem; }
.correction-check-grid label { display:flex; align-items:center; gap:.45rem; min-height:42px; padding:.5rem .6rem; border:1px solid var(--border-color); border-radius:7px; color:var(--text-body); background:var(--surface-muted); font-size:.76rem; cursor:pointer; }
.correction-check-grid input { width:1rem; height:1rem; accent-color:var(--primary); }

/* Candidate Profile Modal Redesign */
.candidate-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 1.25rem;
}

.candidate-modal-title {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--text-heading);
    margin-bottom: 0.35rem;
}

.candidate-meta-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    align-items: center;
}

.candidate-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.85rem;
    margin-bottom: 1.5rem;
}

.candidate-stat-card {
    padding: 1rem;
    background: var(--surface-muted);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.candidate-stat-card .label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
}

.candidate-stat-card .value {
    font-size: 1.5rem;
    font-weight: 800;
}

.candidate-stat-card .value.stat-emerald {
    color: #34d399;
}

.candidate-stat-card .value.stat-amber {
    color: #fbbf24;
}

.candidate-stat-card .value.stat-rose {
    color: #f87171;
}

.semester-progress-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.65rem;
    margin-bottom: 1.5rem;
}

.sem-box {
    padding: 0.65rem 0.5rem;
    border-radius: 10px;
    text-align: center;
    border: 1px solid var(--border-color);
    background: var(--surface-muted);
    transition: all 0.2s ease;
}

.sem-box.completed {
    border-color: rgba(16, 185, 129, 0.4);
    background: rgba(16, 185, 129, 0.08);
}

.sem-box.completed .sem-score {
    color: #34d399;
    font-weight: 800;
}

.sem-box.pending {
    opacity: 0.65;
    border-style: dashed;
}

.sem-box.pending .sem-score {
    color: var(--text-muted);
}

.sem-box .sem-label {
    font-size: 0.7rem;
    color: var(--text-muted);
    text-transform: uppercase;
    font-weight: 700;
    display: block;
}

.sem-box .sem-score {
    font-size: 1.05rem;
    margin-top: 0.15rem;
}

.sem-status-tag {
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    margin-top: 0.2rem;
    display: inline-block;
    padding: 1px 5px;
    border-radius: 4px;
}

.sem-box.completed .sem-status-tag {
    background: rgba(16, 185, 129, 0.2);
    color: #6ee7b7;
}

.sem-box.pending .sem-status-tag {
    background: rgba(148, 163, 184, 0.15);
    color: var(--text-muted);
}
@media(max-width:640px){.correction-check-grid{grid-template-columns:1fr 1fr}}
@media (max-width: 1100px) { .metric-grid{grid-template-columns:repeat(auto-fit,minmax(180px,1fr));} }
@media (max-width: 900px) { .branch-grid{grid-template-columns:repeat(3,minmax(0,1fr));} }
@media (max-width: 760px) { .observer-hero{grid-template-columns:1fr;padding:1.4rem}.metric-grid{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}.branch-grid,.drive-grid{grid-template-columns:1fr}.observer-toolbar{grid-template-columns:1fr}.observer-toolbar .btn{width:100%}.profile-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.observer-identity .badge{display:none} }

/* Unified role gateway */
.unified-auth-shell { min-height:100vh; background:var(--bg-main); }
.unified-auth-layout { width:min(1180px,calc(100% - 2rem)); min-height:calc(100vh - 3rem); margin:1.5rem auto; display:grid; grid-template-columns:minmax(0,1.15fr) minmax(420px,.85fr); overflow:hidden; border:1px solid var(--border-color); border-radius:26px; background:var(--bg-card); box-shadow:0 28px 90px rgba(0,0,0,.35); }
.portal-story { display:flex; flex-direction:column; justify-content:space-between; gap:2rem; padding:clamp(2rem,5vw,4.5rem); background:var(--bg-card); }
.portal-story-copy h1 { max-width:650px; font-size:clamp(2.7rem,6vw,5rem); line-height:.96; letter-spacing:-.055em; margin-bottom:1.25rem; }.portal-story-copy p { max-width:580px; color:var(--text-muted); line-height:1.75; font-size:1.03rem; }
.portal-role-summary { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.75rem; }.portal-role-summary div { padding:1rem; border:1px solid rgba(94,234,212,.14); border-radius:14px; background:rgba(2,6,23,.3); }.portal-role-summary span,.portal-role-summary strong,.portal-role-summary small { display:block; }.portal-role-summary span { color:#5eead4; font-size:.7rem; font-weight:800; }.portal-role-summary strong { margin:.4rem 0 .2rem; }.portal-role-summary small { color:var(--text-muted); line-height:1.35; }
.portal-trust { display:flex; align-items:center; gap:.65rem; color:var(--text-muted); font-size:.78rem; }
.unified-login-panel { align-self:center; padding:clamp(1.5rem,4vw,3.5rem); }.login-panel-heading { margin-bottom:1.4rem; }.login-panel-heading h2 { font-size:clamp(1.7rem,3vw,2.3rem); }.login-panel-heading p { color:var(--text-muted); margin-top:.35rem; }
.role-toggle { display:grid; grid-template-columns:repeat(3,1fr); gap:.45rem; padding:.4rem; margin-bottom:1.4rem; border:1px solid var(--border-color); border-radius:14px; background:rgba(2,6,23,.42); }.role-toggle-btn { display:flex; align-items:center; justify-content:center; gap:.45rem; padding:.7rem .5rem; border:0; border-radius:10px; color:var(--text-muted); background:transparent; cursor:pointer; font:inherit; font-size:.82rem; font-weight:700; transition:all var(--transition-fast); }.role-toggle-btn span { display:grid; place-items:center; width:1.45rem; height:1.45rem; border-radius:50%; background:rgba(148,163,184,.12); font-size:.68rem; }.role-toggle-btn.active { color:#ecfeff; background:linear-gradient(135deg,rgba(13,148,136,.45),rgba(8,145,178,.35)); box-shadow:0 6px 20px rgba(8,145,178,.12); }.role-toggle-btn.active span { background:rgba(255,255,255,.14); }
.unified-role-form { display:none; }.unified-role-form.active { display:block; animation:portalFormIn .22s ease-out; }.role-context { display:flex; flex-direction:column; padding:.8rem 1rem; margin-bottom:1rem; border-left:3px solid #2dd4bf; border-radius:0 10px 10px 0; background:rgba(20,184,166,.07); }.role-context span { color:var(--text-muted); font-size:.76rem; margin-top:.2rem; }.unified-submit { width:100%; margin-top:.45rem; }.portal-help { text-align:center; color:var(--text-muted); font-size:.76rem; margin-top:1.25rem; }
@keyframes portalFormIn { from { opacity:0; transform:translateY(5px) } to { opacity:1; transform:none } }

/* Self-managed profile pictures */
.profile-picture-button { position:relative; width:46px; height:46px; flex:0 0 46px; padding:0; overflow:hidden; border:2px solid rgba(94,234,212,.35); border-radius:50%; background:linear-gradient(145deg,#0f766e,#0369a1); color:white; cursor:pointer; font-weight:800; }.profile-picture-button img { width:100%; height:100%; object-fit:cover; display:none; }.profile-picture-button.has-image img { display:block; }.profile-picture-button.has-image span { display:none; }.profile-picture-button::after { content:"+"; position:absolute; right:-1px; bottom:-1px; display:grid; place-items:center; width:17px; height:17px; border-radius:50%; color:#052e2b; background:#5eead4; border:2px solid #0f172a; font-size:.7rem; }
.student-avatar.has-image { background-size:cover; background-position:center; color:transparent; image-rendering: -webkit-optimize-contrast; image-rendering: crisp-edges; }.avatar-editor { display:flex; align-items:center; gap:1rem; padding:1rem; border:1px solid var(--border-color); border-radius:14px; background:rgba(15,23,42,.42); }.avatar-editor-preview { width:72px; height:72px; flex:0 0 72px; border-radius:50%; object-fit:cover; border:2px solid rgba(94,234,212,.3); background:linear-gradient(145deg,#0f766e,#0369a1); image-rendering: -webkit-optimize-contrast; image-rendering: crisp-edges; }.avatar-editor-copy { flex:1; }.avatar-editor-copy p { color:var(--text-muted); font-size:.78rem; margin:.25rem 0 .65rem; }.avatar-editor-actions { display:flex; gap:.5rem; flex-wrap:wrap; }

@media (max-width:900px) { .unified-auth-layout{grid-template-columns:1fr}.portal-story{min-height:auto}.portal-story-copy h1{font-size:clamp(2.5rem,9vw,4.2rem)} }
@media (max-width:560px) { .unified-auth-layout{width:100%;min-height:100vh;margin:0;border:0;border-radius:0}.portal-story{padding:1.5rem;gap:1.4rem}.portal-role-summary{grid-template-columns:1fr}.portal-role-summary div{display:grid;grid-template-columns:auto 1fr;column-gap:.6rem}.portal-role-summary small{grid-column:2}.unified-login-panel{padding:1.5rem}.role-toggle-btn{font-size:.74rem}.role-toggle-btn span{display:none}.avatar-editor{align-items:flex-start;flex-wrap:wrap} }

/* AIT institutional interface */
:root,
:root[data-theme="light"] {
    --bg-main: #f8fafc;
    --bg-card: #ffffff;
    --bg-glass: #ffffff;
    --surface-muted: #f1f5f9;
    --border-color: #e2e8f0;
    --border-glow: #64748b;
    --primary: #334155;
    --primary-hover: #1e293b;
    --primary-light: rgba(51, 65, 85, .11);
    --accent: #475569;
    --accent-glow: rgba(71, 85, 105, .12);
    --text-heading: #0f172a;
    --text-body: #334155;
    --text-muted: #64748b;
    --success: #10b981;
    --warning: #f59e0b;
    --danger: #ef4444;
    --shadow-subtle: 0 8px 24px rgba(15, 23, 42, .07);
}

:root[data-theme="dark"] {
    --bg-main: #0f1117;
    --bg-card: #161b26;
    --bg-glass: rgba(22, 27, 38, 0.85);
    --surface-muted: #1a202c;
    --border-color: rgba(148, 163, 184, 0.28);
    --border-glow: #64748b;
    --primary: #475569;
    --primary-hover: #334155;
    --primary-light: rgba(71, 85, 105, 0.2);
    --accent: #64748b;
    --accent-glow: rgba(100, 116, 139, 0.25);
    --text-heading: #f8fafc;
    --text-body: #cbd5e1;
    --text-muted: #94a3b8;
    --text-secondary: #a8b4c5;
    --success: #10b981;
    --warning: #f59e0b;
    --danger: #ef4444;
    --shadow-subtle: 0 10px 28px rgba(0, 0, 0, .4);
}

html { scroll-behavior: smooth; }
body { min-width: 320px; background: var(--bg-main); color: var(--text-body); }
body, input, select, textarea, button { font-family: var(--font-default); }
[hidden] { display: none !important; }
h1, h2, h3, h4, h5, h6, th, .tab-btn, .section-title, .card-title { color: var(--text-heading); letter-spacing: -.022em; }
.brand-title { color: var(--text-heading); letter-spacing: -.022em; font-weight: 700; }
.container { width: min(100%, 1340px); }
.glass-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 12px; box-shadow: var(--shadow-subtle); }
.glass-card:hover { border-color: var(--border-color); transform: none; }
.btn { min-height: 44px; border-radius: 8px; }
.btn-sm { min-height: 40px; }
.btn-primary, .btn-primary:hover { background: var(--primary) !important; border-color: var(--primary); color: #fff; }
:root[data-theme="dark"] .btn-primary { color: #ffffff; }
.form-input, .form-select, .form-textarea { min-height: 46px; border-radius: 8px; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* Unified gateway */
.unified-auth-shell { min-height: 100vh; padding-block: 1rem; background: var(--bg-main); }
.unified-auth-layout {
    width: min(1120px, calc(100% - 2rem));
    min-height: min(760px, calc(100vh - 2rem));
    margin: 0 auto;
    grid-template-columns: minmax(0, 1.08fr) minmax(410px, .92fr);
    border: 1px solid var(--border-color);
    border-radius: 18px;
    background: var(--bg-card);
    box-shadow: 0 16px 48px rgba(0, 0, 0, .4);
}
.portal-story {
    padding: clamp(2rem, 5vw, 4rem);
    gap: 1.75rem;
    background: var(--bg-card);
    background-image: none;
}
.portal-story .brand-title, .portal-story h1, .portal-story .portal-role-summary strong { color: var(--text-heading); }
.portal-story .brand-subtitle, .portal-story-copy p, .portal-role-summary small, .portal-trust { color: var(--text-muted); }
.portal-story .eyebrow, .portal-role-summary span { color: var(--accent); }
.portal-story .brand-icon { background: var(--primary) !important; border-color: var(--primary); color: #ffffff; }
.portal-story-copy h1 { max-width: 600px; font-size: clamp(2.6rem, 5vw, 4.25rem); line-height: 1.02; letter-spacing: -.045em; }
.portal-story-copy p { line-height: 1.65; font-size: 1rem; }
.portal-role-summary div { padding: .9rem; border-color: var(--border-color); border-radius: 10px; background: var(--surface-muted); }
.portal-trust { font-size: .8rem; flex-wrap: wrap; }
.portal-trust .signal-dot { background: #34d399; box-shadow: none; }
.unified-login-panel { width: 100%; align-self: center; padding: clamp(2rem, 4vw, 3.25rem); }
.login-panel-heading h2 { font-size: clamp(1.8rem, 3vw, 2.3rem); }
.login-panel-heading .eyebrow { color: var(--primary); }
.role-toggle { gap: .35rem; padding: .35rem; border-radius: 10px; background: var(--surface-muted); }
.role-toggle-btn { min-height: 44px; border-radius: 7px; color: var(--text-muted); }
.role-toggle-btn.active { color: #fff; background: var(--primary); box-shadow: none; }
:root[data-theme="dark"] .role-toggle-btn.active { color: #101923; }
.role-toggle-btn span, .role-toggle-btn.active span { background: rgba(255,255,255,.16); }
.role-context { border-left-color: var(--primary); border-radius: 0 8px 8px 0; background: var(--surface-muted); }
.alert { border-radius: 8px; }

/* Login workspace identity: same role language continues into each dashboard. */
.unified-auth-shell {
    --login-role-accent:#8a5a00;
    --login-role-on-accent:#ffffff;
    --login-role-soft:rgba(138,90,0,.1);
}
.unified-auth-shell[data-active-role="admin"] {
    --login-role-accent:#0f766e;
    --login-role-on-accent:#ffffff;
    --login-role-soft:rgba(15,118,110,.1);
}
.unified-auth-shell[data-active-role="observer"] {
    --login-role-accent:#1d5fa7;
    --login-role-on-accent:#ffffff;
    --login-role-soft:rgba(29,95,167,.1);
}
:root[data-theme="dark"] .unified-auth-shell {
    --login-role-accent:#f3c969;
    --login-role-on-accent:#241a05;
    --login-role-soft:rgba(243,201,105,.12);
}
:root[data-theme="dark"] .unified-auth-shell[data-active-role="admin"] {
    --login-role-accent:#67dcc8;
    --login-role-on-accent:#062a25;
    --login-role-soft:rgba(103,220,200,.12);
}
:root[data-theme="dark"] .unified-auth-shell[data-active-role="observer"] {
    --login-role-accent:#7cbff5;
    --login-role-on-accent:#071d33;
    --login-role-soft:rgba(124,191,245,.12);
}
.unified-auth-shell .login-panel-heading .eyebrow { color:var(--login-role-accent); }
.unified-auth-shell .role-toggle-btn.active {
    color:var(--login-role-on-accent);
    background:var(--login-role-accent);
    box-shadow:0 6px 20px color-mix(in srgb,var(--login-role-accent) 18%,transparent);
}
.unified-auth-shell .role-toggle-btn.active span { background:color-mix(in srgb,var(--login-role-on-accent) 16%,transparent); }
.unified-auth-shell .role-context {
    border-left-color:var(--login-role-accent);
    background:color-mix(in srgb,var(--login-role-soft) 72%,var(--surface-muted));
}
.unified-auth-shell .unified-submit,
.unified-auth-shell .unified-submit:hover {
    color:var(--login-role-on-accent) !important;
    background:var(--login-role-accent) !important;
    border-color:var(--login-role-accent);
}
.unified-auth-shell :focus-visible { outline-color:var(--login-role-accent); }
.unified-auth-shell .form-input:focus {
    border-color:var(--login-role-accent);
    box-shadow:0 0 0 3px color-mix(in srgb,var(--login-role-accent) 20%,transparent);
}

/* Unified dashboard chrome */
.navbar { position: sticky; min-height: 68px; padding: .65rem 0; background: color-mix(in srgb, var(--bg-card) 96%, transparent); }
.navbar-inner { min-height: 46px; }
.brand-icon { width: 40px; height: 40px; flex-basis: 40px; border-radius: 8px; }
.brand-title { font-size: 1.05rem; }
.brand-subtitle { font-size: .76rem; }
.theme-toggle { min-height: 40px; min-width: 58px; padding: .5rem .7rem; border-radius: 8px; }
.dashboard-wrapper { padding: 1.5rem 0 3rem; }
.header-banner { margin-bottom: 1rem !important; padding: 1.35rem 1.5rem; }
.header-banner p { color: var(--text-muted); }
.tabs-nav {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
    gap: .35rem;
    margin-bottom: 1.25rem;
    padding: .35rem;
    overflow: visible;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--surface-muted);
}
.tab-btn { min-height: 44px; padding: .65rem .75rem; border: 0; border-radius: 7px; text-align: center; }
.tab-btn.active { border: 0; background: var(--bg-card); color: var(--primary); box-shadow: 0 1px 4px rgba(25,42,58,.08); }
.tab-content { min-width: 0; }
.filter-bar { display:grid !important; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1rem; align-items:start !important; padding:1.25rem !important; }
.filter-field { min-width:0; }
.filter-field-search { grid-column:span 2; }
.filter-bar .form-label { margin-bottom:.4rem; font-size:.78rem; letter-spacing:.01em; }
.filter-bar .form-input,.filter-bar .form-select { width:100%; min-height:44px; }
.filter-bar .form-hint { min-height:1rem; margin-top:.3rem; font-size:.72rem; }
.filter-actions { grid-column:1 / -1; display:flex; align-items:center; gap:.55rem; padding-top:1rem; border-top:1px solid var(--border-color); }
.filter-actions .btn { min-width:82px; min-height:42px; white-space:nowrap; }
.filter-actions .btn:first-child { min-width:132px; }
.filter-action-divider { width:1px; height:28px; margin:0 .15rem; background:var(--border-color); }
.upload-file-mark { display: inline-grid; place-items: center; min-width: 54px; min-height: 42px; margin-bottom: .6rem; border: 1px solid var(--border-color); border-radius: 7px; background: var(--bg-card); color: var(--primary); font-size: .78rem; font-weight: 800; letter-spacing: .08em; }
.table-responsive, .table-shell, .tab-content > .glass-card[style*="overflow-x"] { max-width: 100%; overflow-x: auto !important; overscroll-behavior-inline: contain; }
.data-table, .observer-table { min-width: 780px; }

/* Observer workspace uses same institutional system. */
.observer-shell { background: var(--bg-main); background-image: none; }
.observer-nav { border-bottom-color: var(--border-color); }
.readonly-pill { color: var(--success); background: color-mix(in srgb, var(--success) 10%, var(--bg-card)); border-color: color-mix(in srgb, var(--success) 38%, var(--border-color)); }
.readonly-pill::before { background: var(--success); box-shadow: none; }
.eyebrow { color: var(--primary); }
.observer-hero { grid-template-columns: minmax(0,1.5fr) minmax(230px,.5fr); gap: 1.25rem; padding: 1.6rem; border-color: var(--border-color); border-radius: 12px; background: var(--bg-card); box-shadow: var(--shadow-subtle); }
.observer-hero h1 { font-size: clamp(1.8rem, 3vw, 2.6rem); line-height: 1.08; letter-spacing: -.03em; }
.observer-hero p { color: var(--text-muted); }
.hero-signal { padding: .9rem; background: var(--surface-muted); border-color: var(--border-color); border-radius: 9px; }
.hero-signal small { color: var(--text-muted); }
.signal-dot { background: var(--success); box-shadow: none; }
.metric-grid { gap: .7rem; margin: .85rem 0 1.5rem; }
.metric-card { padding: 1rem; border-color: var(--border-color); border-radius: 10px; background: var(--bg-card); }
.metric-card span, .metric-card small { color: var(--text-muted); }
.metric-card strong { color: var(--text-heading); font-size: 1.55rem; }
.observer-section { margin: 1.5rem 0; }
.branch-card { background: var(--bg-card); border-color: var(--border-color); border-radius: 10px; }
.branch-code, .branch-chip { color: var(--primary); background: var(--surface-muted); border-color: var(--border-color); }
.progress-track { background: var(--surface-muted); }
.progress-track span { background: var(--primary); }
.observer-tabs { margin-top: 1.5rem; }
.observer-table th { color: var(--text-muted); background: var(--surface-muted); }
.observer-table tbody tr:hover { background: var(--surface-muted); }
.status-ready { color: var(--success); background: color-mix(in srgb,var(--success) 12%,transparent); }
.status-pending { color: var(--warning); background: color-mix(in srgb,var(--warning) 12%,transparent); }
.badge-info, .badge-online, .badge-offline { color: var(--text-heading); background: var(--surface-muted); border-color: var(--border-color); }
.count-badge { display:inline-flex; align-items:center; white-space:nowrap; min-width:max-content; }
.profile-pending-note { display:block; margin-top:.25rem; color:var(--text-muted); font-size:.7rem; }
.student-table-shell { width:100%; overflow:hidden; }
.student-table { width:100%; min-width:0 !important; table-layout:fixed; }
.student-table th,.student-table td { padding:.75rem .6rem; overflow-wrap:anywhere; }
.student-table th:nth-child(1){width:13%}.student-table th:nth-child(2){width:17%}.student-table th:nth-child(3){width:11%}.student-table th:nth-child(4){width:9%}.student-table th:nth-child(5){width:11%}.student-table th:nth-child(6){width:14%}.student-table th:nth-child(7){width:17%}.student-table th:nth-child(8){width:8%}
.compact-table-cell { display:flex; align-items:flex-start; flex-direction:column; gap:.28rem; min-width:0; font-size:.78rem; }
.compact-table-cell small { color:var(--text-muted); font-size:.7rem; }
.compact-table-cell .badge { white-space:normal; }
.compact-table-cell .btn { max-width:100%; padding:.4rem .55rem; white-space:normal; }
.student-pagination { justify-content:space-between; padding:.8rem 1rem; margin-top:.65rem; border:1px solid var(--border-color); border-radius:9px; background:var(--bg-card); }
.student-pagination > div { display:flex; gap:.5rem; }
@media(max-width:640px){.student-pagination{align-items:stretch;flex-direction:column}.student-pagination>div{display:grid;grid-template-columns:1fr 1fr}.student-pagination .btn{width:100%}}
.btn-secondary { color: var(--text-heading); background: var(--bg-card); border-color: var(--border-color); }
.btn-secondary:hover { color: var(--text-heading); background: var(--surface-muted); border-color: var(--primary); }
.btn:disabled { color: var(--text-muted); background: var(--surface-muted); border-color: var(--border-color); opacity: .72; }
.form-input, .form-select, .form-textarea { color: var(--text-heading); background: var(--bg-card); border-color: var(--border-color); }
.form-input::placeholder, .form-textarea::placeholder { color: var(--text-muted); opacity: 1; }
.data-table th, .data-table td, .observer-table th, .observer-table td { color: var(--text-body); border-color: var(--border-color); }
.data-table th { color: var(--text-muted); background: var(--surface-muted); }
.data-table tr:hover { background: var(--surface-muted) !important; }
.modal-content, .modal { color: var(--text-body); background: var(--bg-card); border-color: var(--border-color); }
.profile-summary-grid > div, .record-line, .avatar-editor, #selectedFileInfo, #uploadSummaryBox,
#modalContent [style*="background: rgba"] { color: var(--text-body); background: var(--surface-muted) !important; border-color: var(--border-color) !important; }
.profile-summary-grid span, .record-line span, .section-note { color: var(--text-muted); }
.chip-list span { color: var(--text-heading); background: var(--surface-muted); border-color: var(--border-color); }
.upload-heading-row { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:.75rem; }
.upload-heading-row h3 { margin:0 0 .2rem; }
.upload-heading-row p { color:var(--text-muted); font-size:.82rem; }
.resume-open-link { white-space:nowrap; text-decoration:none; }
.feature-panel { padding:1.25rem; }
.feature-panel h3 { margin-bottom:.85rem; }
.feature-panel form > .form-input,.feature-panel form > .form-select,.feature-panel > .form-input,.feature-panel > .form-textarea,.feature-panel > .btn { margin-bottom:.7rem; }
.notification-unread { border-left:4px solid var(--primary); background:color-mix(in srgb,var(--primary) 6%,var(--bg-card)); }
.record-stack { display:grid; gap:.7rem; }
.workflow-card { padding:1rem; border:1px solid var(--border-color); border-radius:9px; background:var(--bg-card); }
.workflow-card-head { display:flex; align-items:flex-start; justify-content:space-between; gap:.75rem; margin-bottom:.5rem; }
.workflow-card p { color:var(--text-muted); font-size:.85rem; line-height:1.45; }
.workflow-actions { display:flex; gap:.5rem; flex-wrap:wrap; margin-top:.75rem; }
.workflow-subhead { margin:1.35rem 0 .75rem; }
.missing-list { display:flex; gap:.3rem; flex-wrap:wrap; }
.missing-list span { padding:.25rem .45rem; border-radius:5px; color:var(--warning); background:color-mix(in srgb,var(--warning) 10%,var(--bg-card)); font-size:.72rem; font-weight:700; }
.eligibility-pass { color:var(--success); font-weight:800; }
.eligibility-fail { color:var(--danger); font-weight:800; }
.advanced-search-grid { display:grid; grid-template-columns:1.2fr repeat(3,minmax(120px,.7fr)) auto auto; gap:.6rem; margin-bottom:.75rem; }
.advanced-results { margin-top:1rem; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); }
.advanced-forms { margin:1rem 0; }
.advanced-forms form { display:grid; gap:.65rem; }
.profile-completion-panel { margin-bottom:1rem; }
.completion-row { display:flex; justify-content:space-between; gap:1rem; align-items:center; }
.completion-score { font-size:2rem; color:var(--primary); }
.advanced-student-sections { margin-top:1.5rem; }
@media(max-width:900px){.advanced-search-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.advanced-search-grid .btn{width:100%}}
@media(max-width:520px){.advanced-search-grid{grid-template-columns:1fr}.advanced-results{grid-template-columns:1fr}}
.upload-dropzone { color: var(--text-body); background: var(--surface-muted) !important; border-color: var(--border-color) !important; }
.upload-dropzone:hover { background: var(--primary-light) !important; border-color: var(--primary) !important; }

@media (max-width: 980px) {
    .filter-bar { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .filter-actions { grid-column:1 / -1; }
    .metric-grid { grid-template-columns: repeat(auto-fit,minmax(160px,1fr)); }
}

@media (max-width: 900px) {
    .unified-auth-layout { min-height: 0; grid-template-columns: 1fr; }
    .portal-story { order: 0; min-height: 0; padding: 1rem 1.5rem; }
    .portal-story-copy, .portal-role-summary, .portal-trust { display: none; }
    .unified-login-panel { order: 1; max-width: 620px; margin: 0 auto; padding: 2rem; }
}

@media (max-width: 640px) {
    .container { padding-inline: 1rem; }
    .navbar { position: static; min-height: 0; padding: .65rem 0; }
    .navbar-inner { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: .65rem; }
    .brand { flex-basis: auto; }
    .brand-icon { width: 36px; height: 36px; flex-basis: 36px; }
    .brand-title { font-size: .95rem; }
    .brand-subtitle { display: none; }
    .navbar-inner > div:last-of-type, .observer-identity { grid-column: 1 / -1; justify-content: flex-start; flex-wrap: nowrap; gap: .45rem !important; }
    .profile-picture-button { width: 40px; height: 40px; flex-basis: 40px; }
    .navbar .badge { min-height: 40px; display: inline-flex; align-items: center; }
    .theme-toggle { grid-column: 2; grid-row: 1; margin: 0; }
    .dashboard-wrapper { padding-top: .75rem; padding-bottom: 1.5rem; }
    .header-banner { padding: .9rem; gap: .7rem; }
    .student-avatar { width: 54px; height: 54px; flex-basis: 54px; }
    .student-info h2 { font-size: 1.2rem; }
    .tabs-nav { grid-template-columns: repeat(3, minmax(0,1fr)); gap: .25rem; margin-bottom: .8rem; padding: .25rem; }
    .tab-btn { min-height: 40px; padding: .5rem .3rem; white-space: normal; line-height: 1.15; font-size: .78rem; }
    .grid-2 { gap: 1rem; }
    .glass-card { border-radius: 10px; }
    .filter-bar { grid-template-columns: 1fr; }
    .filter-field-search { grid-column:auto; }
    .filter-actions { display:grid; grid-template-columns:1fr 1fr 1fr; width:100%; }
    .filter-actions .btn:first-child { grid-column:span 2; }
    .filter-action-divider { display:none; }
    .observer-hero { display: block; grid-template-columns: none; padding: 1rem; }
    .observer-hero h1 { max-width: none; margin-bottom: .55rem; font-size: 1.55rem; line-height: 1.08; }
    .observer-hero p { max-width: none; font-size: .88rem; line-height: 1.5; }
    .observer-hero .hero-signal { width: 100%; margin-top: .85rem; padding: .7rem .8rem; }
    .metric-grid { grid-template-columns: repeat(auto-fit,minmax(140px,1fr)); }
    .metric-card { min-height: 88px; padding: .75rem; }
    .metric-card strong { margin: .2rem 0 .05rem; font-size: 1.3rem; }
    .metric-card span, .metric-card small { font-size: .69rem; }
    .branch-grid, .drive-grid { gap: .75rem; }
    .observer-toolbar { gap: .8rem; padding: .9rem; }
    .section-note { align-self: flex-start; }
    .upload-heading-row { align-items:stretch; flex-direction:column; }
    .upload-heading-row .btn { width:100%; }
    .upload-dropzone { padding:1.5rem 1rem !important; }
}

@media (max-width: 420px) {
    .unified-auth-shell { padding-block: 0; }
    .unified-auth-layout { width: 100%; margin: 0; border: 0; border-radius: 0; }
    .portal-story { padding: .9rem 1rem; }
    .unified-login-panel { padding: 1.25rem 1rem 1.75rem; }
    .login-panel-heading { margin-bottom: 1rem; }
    .login-panel-heading h2 { font-size: 1.65rem; }
    .role-toggle-btn { min-height: 46px; font-size: .78rem; }
    .role-toggle-btn span { display: none; }
    .unified-submit { min-height: 48px; }
    .navbar-inner > div:last-of-type .badge:not(#navStudentPrn), .observer-identity .badge { display: none; }
    .tabs-nav { grid-template-columns: repeat(3,minmax(0,1fr)); }
    .tabs-nav .tab-btn:last-child:nth-child(odd) { grid-column: auto; }
    .grid-semesters { gap: .6rem; }
    .avatar-editor { align-items: flex-start; }
    .observer-shell .dashboard-wrapper { padding-inline: .65rem; }
    .observer-shell .navbar .container { padding-inline: .65rem; }
    .observer-identity { overflow: hidden; }
    .observer-identity .readonly-pill { padding: .3rem .5rem; font-size: .65rem; }
    .observer-identity .btn { min-height: 38px; padding: .45rem .65rem; font-size: .75rem; }
    .observer-hero .eyebrow { margin-bottom: .35rem; font-size: .63rem; line-height: 1.35; }
    .metric-grid { grid-template-columns: repeat(auto-fit,minmax(120px,1fr)); gap: .4rem; margin: .55rem 0 1rem; }
    .metric-card { min-height: 72px; padding: .6rem; }
    .metric-card small { display: none; }
    .metric-card span { min-height: 2em; line-height: 1.15; }
    .observer-section { margin: 1rem 0; }
    .observer-section .section-header { margin-bottom: .75rem; }
    .branch-card { padding: .8rem; }
    .branch-card h3 { min-height: 0; margin: .5rem 0; }
    .observer-tabs { margin-top: 1rem; }
    .observer-toolbar { padding: .75rem; }
    .student-meta { width: 100%; gap: .7rem; }
    .student-info p { font-size: .78rem; }
    .header-banner > div:last-child { width: auto; }
    #overallCgpaBadge { padding: .4rem .65rem !important; font-size: .82rem !important; }
}

@media (max-width: 350px) {
    .brand-title { font-size: .85rem; }
    .navbar-inner { gap: .4rem; }
    .navbar-inner > div:last-of-type, .observer-identity { gap: .3rem !important; }
    #navStudentPrn { display: none; }
    .tabs-nav { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
.branch-selector { border: 0; padding: 0; margin-inline: 0; }
.branch-option-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; margin-top: .65rem; }
.branch-option-grid label { display: flex; align-items: center; gap: .5rem; padding: .65rem .75rem; border: 1px solid var(--border-color); border-radius: 8px; cursor: pointer; }
.branch-option-grid input { width: 1rem; height: 1rem; accent-color: var(--primary); }
.drive-admin-card { align-items: flex-start; gap: .8rem; }
.drive-admin-summary { min-width: 0; flex: 1; }
.drive-admin-summary small { display: block; margin-top: .35rem; color: var(--text-muted); line-height: 1.45; }
.field-help { display:block; margin-top:.35rem; color:var(--text-muted); font-size:.75rem; line-height:1.4; }
.form-error { min-height:1.25rem; margin-top:.65rem; color:var(--danger); font-size:.82rem; font-weight:700; }
.notice-important { display:flex; align-items:center; gap:.5rem; min-height:44px; }

/* Dense, full-width dashboard system */
.student-profile-editor { width:min(100%,1120px); margin-inline:auto; padding:1.25rem; }
.profile-editor-heading { display:flex; align-items:end; justify-content:space-between; gap:1rem; margin-bottom:1rem; }
.profile-editor-heading h3 { margin:.15rem 0 .25rem; font-size:1.25rem; }
.profile-editor-heading p { margin:0; color:var(--text-muted); font-size:.84rem; }
.profile-avatar-editor { min-height:92px; margin-bottom:1rem; padding:.9rem 1rem; border-radius:10px; }
.profile-avatar-editor .avatar-editor-preview { width:64px; height:64px; flex-basis:64px; }
.profile-avatar-editor .avatar-editor-copy { display:grid; grid-template-columns:minmax(180px,1fr) auto; align-items:center; column-gap:1rem; width:100%; }
.profile-avatar-editor .avatar-editor-copy > strong,
.profile-avatar-editor .avatar-editor-copy > p { grid-column:1; }
.profile-avatar-editor .avatar-editor-copy > p { margin:.15rem 0 0; }
.profile-avatar-editor .avatar-editor-actions { grid-column:2; grid-row:1 / span 2; margin:0; }
.profile-editor-form { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:0 1rem; }
.profile-editor-form > .grid-2,
.profile-editor-form > .profile-form-section-title,
.profile-editor-form > .profile-semester-block,
.profile-editor-form > .profile-readiness-block,
.profile-editor-form > .profile-save-bar { grid-column:1 / -1; }
.profile-editor-form .form-group { margin-bottom:.85rem; }
.profile-form-section-title { display:flex; align-items:center; gap:.65rem; margin:.35rem 0 .8rem; padding-top:.9rem; border-top:1px solid var(--border-color); }
.profile-form-section-title > span { display:grid; place-items:center; width:30px; height:30px; border-radius:8px; background:var(--primary-light); color:var(--primary); font-size:.72rem; font-weight:800; }
.profile-form-section-title strong,
.profile-form-section-title small { display:block; }
.profile-form-section-title small { margin-top:.1rem; color:var(--text-muted); font-size:.72rem; }
.profile-semester-block .grid-semesters,
.profile-readiness-block .grid-semesters { grid-template-columns:repeat(8,minmax(0,1fr)); gap:.55rem; }
.profile-semester-block .form-input,
.profile-readiness-block .grid-semesters .form-input { padding-inline:.55rem; text-align:center; }
.profile-save-bar { position:sticky; bottom:.75rem; z-index:4; display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-top:.25rem; padding:.75rem; border:1px solid var(--border-color); border-radius:10px; background:color-mix(in srgb,var(--bg-card) 94%,transparent); box-shadow:var(--shadow-subtle); backdrop-filter:blur(12px); }
.profile-save-bar span { color:var(--text-muted); font-size:.78rem; }

/* Shared student, admin, and TPC dashboard polish */
.tab-content > .section-header:first-child { margin-bottom:.85rem; }
.feature-panel { padding:1.1rem; }
.feature-panel > h3:first-child { margin-bottom:.75rem; }
.record-stack { gap:.6rem; }
.notification-admin-layout,
.responsive-two-column,
.advanced-forms,
.launch-operations-grid { gap:.85rem; }
.observer-section { margin:1.25rem 0; }
.observer-section .section-header { margin-bottom:.85rem; }
.observer-toolbar { padding:1rem; }
.branch-card,
.drive-card { padding:1rem; }
.modal-card { width:min(94vw,780px); }

@media (max-width:900px) {
    .profile-semester-block .grid-semesters,
    .profile-readiness-block .grid-semesters { grid-template-columns:repeat(4,minmax(0,1fr)); }
}

@media (max-width:640px) {
    .student-profile-editor { padding:.9rem; }
    .profile-editor-heading p { font-size:.78rem; }
    .profile-avatar-editor { align-items:center; }
    .profile-avatar-editor .avatar-editor-preview { width:56px; height:56px; flex-basis:56px; }
    .profile-avatar-editor .avatar-editor-copy { display:block; }
    .profile-avatar-editor .avatar-editor-actions { margin-top:.6rem; }
    .profile-editor-form { display:block; }
    .profile-form-section-title { margin-top:.5rem; }
    .profile-semester-block .grid-semesters,
    .profile-readiness-block .grid-semesters { grid-template-columns:repeat(4,minmax(0,1fr)); }
    .profile-save-bar { bottom:.35rem; }
    .profile-save-bar span { display:none; }
    .profile-save-bar .btn { width:100%; }
    .feature-panel { padding:.9rem; }
}

/* Security and intelligence control center */
.intelligence-header { align-items:flex-end; margin-bottom:1rem; }
.intelligence-header .section-note { margin-top:.25rem; }
.intelligence-header .workflow-actions { justify-content:flex-end; }
.health-metric-grid { grid-template-columns:repeat(6,minmax(0,1fr)); margin:.75rem 0 1.25rem; }
.health-metric-grid > * { min-width:0; }
.health-metric-grid > :nth-child(n+7) { grid-column:span 2; }
.health-metric-grid .metric-card,
.health-metric-grid .health-note { min-height:112px; padding:1rem; }
.health-metric-grid .metric-card strong { overflow-wrap:anywhere; font-size:clamp(1.25rem,2vw,1.7rem); line-height:1.18; }
.health-metric-grid .health-note { display:flex; justify-content:center; flex-direction:column; border:1px solid var(--border-color); border-radius:10px; background:var(--bg-card); }
.health-metric-grid .health-note p { margin:.25rem 0; color:var(--text-body); }
.health-metric-grid .health-note small { color:var(--text-muted); }
.intelligence-section-heading { display:flex; align-items:end; justify-content:space-between; margin:1.25rem 0 .7rem; }
.intelligence-section-heading h3 { margin-top:.15rem; font-size:1.05rem; }
.launch-operations-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.85rem; align-items:start; margin:0; }
.intelligence-control-card { min-width:0; padding:1rem; }
.intelligence-control-card .section-header { align-items:flex-start; margin-bottom:.75rem; }
.intelligence-control-card .record-stack { max-height:420px; overflow-y:auto; padding-right:.2rem; }
.intelligence-tool-columns { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.85rem; align-items:start; }
.intelligence-tool-column { display:grid; min-width:0; gap:.85rem; align-content:start; }
.intelligence-tool-card { min-width:0; padding:1rem; }
.tool-card-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; margin-bottom:.8rem; }
.tool-card-heading h3 { margin-bottom:.15rem; }
.tool-number { display:grid; place-items:center; width:32px; height:32px; flex:0 0 32px; border:1px solid var(--border-color); border-radius:8px; color:var(--primary); background:var(--surface-muted); font-size:.7rem; font-weight:800; }
.intelligence-tool-card > .form-textarea { min-height:155px; }
.intelligence-tool-card > .btn { margin-top:.65rem; }
.ranking-action-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:.65rem; }
.ranking-action-row .btn { white-space:nowrap; }
.staff-management-card #staffCreateForm { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.65rem; }
.staff-management-card #staffCreateForm > input[name="password"],
.staff-management-card #staffCreateForm > .grid-2,
.staff-management-card #staffCreateForm > .btn { grid-column:1 / -1; }
.staff-management-card #staffCreateForm .grid-2 { gap:.65rem; }
.staff-management-card #staffList { margin-top:.85rem; }

@media (max-width:1100px) {
    .health-metric-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
    .health-metric-grid > :nth-child(n+7) { grid-column:span 1; }
    .launch-operations-grid { grid-template-columns:1fr; }
}

@media (max-width:760px) {
    .intelligence-header { align-items:stretch; flex-direction:column; }
    .intelligence-header .workflow-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); width:100%; }
    .intelligence-header .workflow-actions .btn { width:100%; }
    .health-metric-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .intelligence-tool-columns { grid-template-columns:1fr; }
    .ranking-action-row { grid-template-columns:1fr; }
}

@media (max-width:460px) {
    .intelligence-header .workflow-actions { grid-template-columns:1fr; }
    .health-metric-grid { grid-template-columns:1fr; }
    .health-metric-grid .metric-card,
    .health-metric-grid .health-note { min-height:88px; }
    .staff-management-card #staffCreateForm { grid-template-columns:1fr; }
    .staff-management-card #staffCreateForm > * { grid-column:1 !important; }
}

@media (max-width:390px) {
    .profile-semester-block .grid-semesters,
    .profile-readiness-block .grid-semesters { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

/* Workspace-fit pass: operational surfaces use available screen width. */
.container { width:min(100%,1600px); padding-inline:clamp(1rem,2vw,2rem); }
.dashboard-wrapper { width:100%; }
.dashboard-wrapper > .tab-content,
.tab-content > .glass-card,
.tab-content > section { min-width:0; max-width:none; }
.roster-workspace-panel,
.diploma-workspace-panel { width:100%; margin:0; padding:1.25rem; }
.roster-workspace-panel > p { max-width:95ch; margin-bottom:1rem !important; }
.roster-input-grid { display:grid; grid-template-columns:minmax(0,1.08fr) minmax(360px,.92fr); gap:1rem; align-items:stretch; }
.roster-file-column { display:flex; min-width:0; flex-direction:column; }
.roster-file-column .upload-dropzone { display:grid; min-height:100%; place-content:center; padding:1.5rem !important; }
.roster-paste-column { display:flex; min-width:0; flex-direction:column; margin:0 !important; }
.roster-paste-column .form-textarea { min-height:100%; flex:1; resize:vertical; }
.launch-operations-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
.launch-operations-grid > * { min-width:0; }
.upload-heading-row { margin-bottom:.85rem; }
.upload-heading-row .workflow-actions { justify-content:flex-end; }
.diploma-workspace-panel > p { max-width:85ch; }

@media (max-width:980px) {
    .roster-input-grid { grid-template-columns:1fr; }
    .roster-file-column .upload-dropzone { min-height:190px; }
    .roster-paste-column .form-textarea { min-height:150px; }
    .launch-operations-grid { grid-template-columns:1fr; }
}

@media (max-width:640px) {
    .container { padding-inline:.8rem; }
    .roster-workspace-panel,
    .diploma-workspace-panel { padding:.9rem; }
    .upload-heading-row .workflow-actions { display:grid; grid-template-columns:1fr; width:100%; }
}
.notification-bell { position:relative; display:grid; place-items:center; width:44px; height:44px; flex:0 0 44px; border:1px solid var(--border-color); border-radius:50%; color:var(--text-heading); background:var(--bg-card); cursor:pointer; font-size:1.05rem; }
.notification-bell:hover { border-color:var(--primary); background:var(--surface-muted); }
.notification-bell-count { position:absolute; top:-5px; right:-5px; display:grid; place-items:center; min-width:20px; height:20px; padding:0 5px; border:2px solid var(--bg-card); border-radius:999px; color:#fff; background:var(--danger); font-size:.65rem; font-weight:800; }
.notification-center-modal { align-items:center; }
.mandatory-notification-gate { position:fixed; inset:0; z-index:3000; display:flex; align-items:center; justify-content:center; padding:1rem; background:rgba(3,10,20,.92); backdrop-filter:blur(10px); }
.mandatory-notification-gate[hidden] { display:none; }
.mandatory-notification-card { width:min(100%,560px); padding:2rem; text-align:center; border:1px solid var(--accent); }
.mandatory-notification-card h2 { margin:.55rem 0 .8rem; }
.mandatory-notification-card .btn { width:100%; margin:1rem 0 .3rem; }
body.notifications-blocked { overflow:hidden; }
.notification-center-card { width:min(680px,calc(100vw - 2rem)); max-width:680px; max-height:min(760px,calc(100vh - 2rem)); overflow:hidden; padding:0; }
.notification-center-card .modal-header { padding:1.4rem 1.5rem 1rem; border-bottom:1px solid var(--border-color); }
.notification-center-toolbar { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.75rem 1.5rem; background:var(--surface-muted); border-bottom:1px solid var(--border-color); font-size:.8rem; font-weight:800; }
.notification-center-list { display:grid; gap:.75rem; max-height:560px; padding:1rem 1.5rem 1.5rem; overflow-y:auto; }
.notification-item { padding:1rem; border:1px solid var(--border-color); border-radius:10px; background:var(--bg-card); }
.notification-item.notification-unread { border-left:4px solid var(--primary); }
.notification-item-head { display:flex; justify-content:space-between; gap:1rem; margin-bottom:.65rem; }
.notification-item-head h4 { margin-top:.3rem; }
.notification-item-head time { flex:0 0 auto; color:var(--text-muted); font-size:.7rem; }
.notification-item p { color:var(--text-body); line-height:1.55; }
.notification-priority { display:inline-flex; padding:.2rem .4rem; border-radius:5px; color:var(--primary); background:var(--surface-muted); font-size:.64rem; font-weight:800; text-transform:uppercase; letter-spacing:.06em; }
.notification-priority.important { color:var(--danger); background:color-mix(in srgb,var(--danger) 10%,var(--bg-card)); }
.notification-empty { padding:2rem; border:1px dashed var(--border-color); border-radius:10px; text-align:center; color:var(--text-muted); }
.notification-empty strong { display:block; margin-bottom:.35rem; color:var(--text-heading); }
.opportunity-hero { display:flex; align-items:flex-end; justify-content:space-between; gap:2rem; margin-bottom:1rem; padding:1.5rem; border-radius:12px; color:#fff; background:#17324d; }
.opportunity-hero h2 { margin:.3rem 0; color:#fff; font-size:clamp(1.5rem,3vw,2.2rem); }
.opportunity-hero p { max-width:680px; color:#d6e0e8; }
.opportunity-hero .eyebrow { color:#b8d0e0; }
.opportunity-hero-actions { display:flex; gap:.6rem; flex-wrap:wrap; }
.opportunity-hero-actions .btn-secondary { color:#fff; background:transparent; border-color:rgba(255,255,255,.35); }
.readiness-card { padding:1.15rem 1.3rem; }
.opportunity-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.85rem; margin-top:1rem; align-items:stretch; }
.opportunity-panel { min-height:210px; padding:1.1rem; border-radius:12px; }
.opportunity-drives { grid-row:auto; }
.panel-title { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; margin-bottom:.85rem; padding-bottom:.7rem; border-bottom:1px solid var(--border-color); }
.panel-title h3 { margin-top:.18rem; font-size:1.05rem; }
.panel-icon { display:grid; place-items:center; width:34px; height:34px; flex:0 0 34px; color:var(--primary); background:var(--surface-muted); border:1px solid var(--border-color); border-radius:8px; font-size:.78rem; font-weight:800; opacity:1; }
.opportunity-panel .record-stack { gap:.55rem; }
.opportunity-panel .workflow-card { padding:.85rem; background:var(--surface-muted); }
.opportunity-record:hover { border-color:var(--primary); }
.status-pill { padding:.28rem .5rem; border-radius:999px; font-size:.7rem; font-weight:800; }
.status-positive { color:var(--success); background:color-mix(in srgb,var(--success) 12%,transparent); }
.status-negative { color:var(--danger); background:color-mix(in srgb,var(--danger) 10%,transparent); }
.drive-match-line { display:flex; justify-content:space-between; gap:1rem; margin:.7rem 0 .35rem; color:var(--text-muted); font-size:.76rem; }
.drive-match-line strong { color:var(--text-heading); }
.record-reason,.record-muted { color:var(--text-muted); font-size:.75rem; }
.record-kicker { display:block; margin-bottom:.3rem; color:var(--primary); font-size:.65rem; font-weight:800; letter-spacing:.07em; text-transform:uppercase; }
.panel-empty { display:flex; justify-content:center; flex-direction:column; min-height:108px; padding:1rem; border:1px dashed var(--border-color); border-radius:9px; background:var(--surface-muted); }
.panel-empty strong { color:var(--text-heading); }
.panel-empty p { margin-top:.25rem; color:var(--text-muted); font-size:.78rem; }
.panel-empty-success { border-style:solid; border-color:color-mix(in srgb,var(--success) 28%,var(--border-color)); }
.notification-admin-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:1rem; }
.sent-notification-panel { margin-top:1rem; }
.sent-notification-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.8rem; }
.sent-notification-card { padding:1rem; border:1px solid var(--border-color); border-radius:10px; background:var(--bg-card); }
.sent-notification-card h4 { margin-top:.35rem; }
.sent-notification-card > p { margin:.65rem 0; color:var(--text-body); line-height:1.5; }
.sent-notification-card > small { display:block; margin-top:.6rem; color:var(--text-muted); overflow-wrap:anywhere; }
.sent-notification-meta { display:flex; gap:.45rem; flex-wrap:wrap; }
.sent-notification-meta span { padding:.25rem .45rem; border-radius:5px; color:var(--text-muted); background:var(--surface-muted); font-size:.7rem; }
.notification-delivery-warning { margin:.65rem 0; padding:.6rem .7rem; border-left:3px solid var(--danger); border-radius:6px; color:var(--danger); background:color-mix(in srgb,var(--danger) 8%,var(--bg-card)); font-size:.78rem; font-weight:700; }
.import-progress{margin-top:1rem;padding:1rem;border:1px solid var(--border-color);border-radius:10px;background:var(--surface-muted)}
.import-progress>div{display:flex;justify-content:space-between;gap:1rem;margin-bottom:.5rem}.import-progress progress{width:100%;height:12px;accent-color:var(--primary)}
.launch-subsection{margin-top:1.5rem;padding-top:1.5rem;border-top:1px solid var(--border-color)}
.launch-operations-grid{margin:1rem 0}.checklist-row.complete{border-left:4px solid var(--success)}
.portal-help a{color:var(--primary);font-weight:800;text-decoration:underline;text-underline-offset:3px}
.portal-copyright{margin-top:.55rem;color:var(--text-muted);font-size:.75rem;text-align:center}.portal-copyright a{color:var(--primary);font-weight:800;text-decoration:underline;text-underline-offset:3px}
.admin-tabs { grid-template-columns:repeat(8,minmax(0,1fr)); }
.admin-tabs .tab-btn { min-width:0; padding:.6rem .35rem; white-space:nowrap; font-size:.72rem; letter-spacing:0; }
@media (max-width:1100px) { .admin-tabs{grid-template-columns:repeat(4,minmax(0,1fr))}.admin-tabs .tab-btn{white-space:normal;font-size:.78rem} }
@media (max-width: 640px) {
    .admin-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .admin-tabs .tab-btn { min-height: 48px; padding-inline: .5rem; }
    .drive-admin-card { display: block; }
    .drive-admin-card .workflow-actions { width: 100%; }
    .drive-admin-card .workflow-actions .btn { flex: 1 1 auto; }
    .branch-option-grid label { min-height: 44px; }
    .opportunity-hero { align-items:stretch; flex-direction:column; gap:1rem; padding:1.1rem; }
    .opportunity-hero-actions { display:grid; grid-template-columns:1fr; }
    .opportunity-grid,.notification-admin-layout,.sent-notification-grid { grid-template-columns:1fr; }
    .opportunity-drives { grid-row:auto; }
    .notification-center-card { width:100%; max-height:calc(100vh - 1rem); }
    .notification-center-card .modal-header,.notification-center-list { padding-inline:1rem; }
    .notification-center-toolbar { padding-inline:1rem; }
    .notification-item-head { flex-direction:column; gap:.35rem; }
}

/* Keep intelligence layout authoritative after shared responsive rules. */
@media (max-width:1100px) {
    #tab-intelligence .launch-operations-grid { grid-template-columns:1fr; }
}
@media (max-width:760px) {
    #tab-intelligence .health-metric-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:460px) {
    #tab-intelligence .health-metric-grid { grid-template-columns:1fr; }
}

/* Compact aligned health strip. */
#tab-intelligence .health-metric-grid {
    grid-template-columns:repeat(8,minmax(86px,1fr)) minmax(230px,1.65fr);
    gap:.55rem;
    align-items:stretch;
    margin:.65rem 0 1rem;
}
#tab-intelligence .health-metric-grid > :nth-child(n+7),
#tab-intelligence .health-metric-grid > .health-note { grid-column:span 1; }
#tab-intelligence .health-metric-grid .metric-card,
#tab-intelligence .health-metric-grid .health-note {
    min-height:82px;
    height:82px;
    padding:.7rem .8rem;
    border-radius:9px;
}
#tab-intelligence .health-metric-grid .metric-card {
    display:flex;
    justify-content:center;
    flex-direction:column;
}
#tab-intelligence .health-metric-grid .metric-card span { font-size:.68rem; white-space:nowrap; }
#tab-intelligence .health-metric-grid .metric-card strong {
    margin:.2rem 0 0;
    font-size:clamp(1rem,1.45vw,1.3rem);
    line-height:1.08;
}
#tab-intelligence .health-metric-grid .health-note strong { font-size:.8rem; }
#tab-intelligence .health-metric-grid .health-note p,
#tab-intelligence .health-metric-grid .health-note small {
    margin:.1rem 0 0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:.67rem;
}

@media (max-width:1180px) {
    #tab-intelligence .health-metric-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
    #tab-intelligence .health-metric-grid > .health-note { grid-column:1 / -1; }
    #tab-intelligence .health-metric-grid .health-note { height:auto; min-height:70px; }
}
@media (max-width:640px) {
    #tab-intelligence .health-metric-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:380px) {
    #tab-intelligence .health-metric-grid { grid-template-columns:1fr; }
}

/* Student workspace: clear hierarchy, progressive loading, and project portfolio. */
[hidden] { display:none !important; }
.student-dashboard-page .dashboard-wrapper { padding-block:1.25rem 2.5rem; }
.student-dashboard-page .header-banner { border-top:3px solid var(--accent); }
.student-dashboard-page .header-banner { border-top-color:var(--student-gold); }
.student-dashboard-page .tabs-nav .tab-btn.active {
    color:var(--student-gold);
    background:color-mix(in srgb,var(--student-gold-soft) 70%,var(--bg-card));
    box-shadow:inset 0 3px 0 var(--student-gold),0 0 0 1px color-mix(in srgb,var(--student-gold) 28%,transparent);
}

/* Staff workspace identity: role-specific accents, isolated from student UI. */
.admin-dashboard-page {
    --workspace-accent:#0f766e;
    --workspace-accent-soft:rgba(15,118,110,.1);
}
.observer-shell {
    --workspace-accent:#1d5fa7;
    --workspace-accent-soft:rgba(29,95,167,.1);
}
:root[data-theme="dark"] .admin-dashboard-page {
    --workspace-accent:#67dcc8;
    --workspace-accent-soft:rgba(103,220,200,.12);
}
:root[data-theme="dark"] .observer-shell {
    --workspace-accent:#7cbff5;
    --workspace-accent-soft:rgba(124,191,245,.12);
}
.admin-dashboard-page .header-banner,
.observer-shell .observer-hero { border-top:3px solid var(--workspace-accent); }
.admin-dashboard-page .tabs-nav .tab-btn.active,
.observer-shell .tabs-nav .tab-btn.active {
    color:var(--workspace-accent);
    background:color-mix(in srgb,var(--workspace-accent-soft) 70%,var(--bg-card));
    box-shadow:inset 0 3px 0 var(--workspace-accent),0 0 0 1px color-mix(in srgb,var(--workspace-accent) 28%,transparent);
}
.student-dashboard-page .eyebrow {
    display:block; margin-bottom:.3rem; color:var(--accent); font-size:.72rem;
    font-weight:800; letter-spacing:.1em; line-height:1.2; text-transform:uppercase;
}
.student-dashboard-page .section-header h2 { font-size:clamp(1.3rem,2.2vw,1.65rem); line-height:1.2; }
.student-dashboard-page .section-note { max-width:68ch; margin-top:.3rem; color:var(--text-muted); line-height:1.45; }
.student-dashboard-page .tab-content { content-visibility:auto; contain-intrinsic-size:700px; }

.dashboard-skeleton { display:grid; gap:1rem; padding-block:.5rem; }
.skeleton-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; }
.skeleton-block,
.skeleton-line {
    position:relative; overflow:hidden; border:1px solid var(--border-color);
    border-radius:12px; background:var(--surface-muted);
}
.skeleton-block::after,
.skeleton-line::after {
    position:absolute; inset:0; content:"";
    background:linear-gradient(100deg,transparent 20%,rgba(255,255,255,.45) 45%,transparent 70%);
    transform:translateX(-100%); animation:skeleton-sweep 1.2s ease-in-out infinite;
}
:root[data-theme="dark"] .skeleton-block::after,
:root[data-theme="dark"] .skeleton-line::after { background:linear-gradient(100deg,transparent 20%,rgba(255,255,255,.08) 45%,transparent 70%); }
.skeleton-hero { min-height:150px; }
.skeleton-tabs { min-height:58px; }
.skeleton-panel { min-height:280px; }
.skeleton-stack { display:grid; gap:.65rem; }
.skeleton-stack .skeleton-line { min-height:76px; }
@keyframes skeleton-sweep { to { transform:translateX(100%); } }

.project-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(270px,1fr)); gap:1rem; }
.project-card { display:flex; min-width:0; flex-direction:column; gap:.9rem; padding:1.15rem; }
.project-card-head { display:flex; align-items:flex-start; justify-content:space-between; gap:.75rem; }
.project-card h3 { font-size:1.05rem; line-height:1.3; overflow-wrap:anywhere; }
.project-card p { color:var(--text-body); line-height:1.55; overflow-wrap:anywhere; }
.project-tags { display:flex; flex-wrap:wrap; gap:.4rem; }
.project-tag { padding:.25rem .55rem; border:1px solid var(--border-color); border-radius:999px; background:var(--surface-muted); color:var(--text-muted); font-size:.76rem; font-weight:700; }
.project-links { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:auto; }
.project-links a { min-height:40px; }
.research-card .research-publication { padding:.7rem .8rem; border-left:3px solid var(--accent); background:var(--surface-muted); color:var(--text-muted); }
.research-card .research-publication strong { color:var(--text-heading); }
.profile-stat-grid { grid-template-columns:repeat(auto-fit,minmax(105px,1fr)); }
.empty-state { padding:2rem 1rem; border:1px dashed var(--border-color); border-radius:12px; background:var(--surface-muted); text-align:center; }
.empty-state h3 { margin-bottom:.35rem; font-size:1.05rem; }
.empty-state p { max-width:52ch; margin-inline:auto; color:var(--text-muted); }

.btn.is-loading { pointer-events:none; opacity:.75; }
.btn.is-loading::before { width:.9rem; height:.9rem; border:2px solid currentColor; border-right-color:transparent; border-radius:50%; content:""; animation:button-spin .7s linear infinite; }
@keyframes button-spin { to { transform:rotate(360deg); } }
.sr-only { 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; }
:focus-visible { outline:3px solid var(--accent); outline-offset:3px; }

@media (max-width:700px) {
    .skeleton-grid { grid-template-columns:1fr; }
    .student-dashboard-page .section-header .btn { width:100%; }
    .project-grid { grid-template-columns:1fr; }
}
@media (prefers-reduced-motion:reduce) {
    .skeleton-block::after, .skeleton-line::after, .btn.is-loading::before { animation:none; }
}
.locked-field[readonly] { cursor:not-allowed; background:var(--surface-muted); color:var(--text-muted); opacity:.9; }
.upload-status { margin-top:.45rem; color:var(--text-muted); font-size:.82rem; line-height:1.4; }
.current-resume-card { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:.75rem; padding:.8rem; border:1px solid color-mix(in srgb,var(--success) 35%,var(--border-color)); border-radius:10px; background:color-mix(in srgb,var(--success) 7%,var(--bg-card)); }
.current-resume-card[hidden] { display:none; }
.current-resume-card strong,.current-resume-card span { display:block; }
.current-resume-card span { margin-top:.2rem; color:var(--text-muted); font-size:.78rem; }
.upload-status.is-working { color:var(--primary); }
.upload-status.is-success { color:var(--success); }
.upload-status.is-error { color:var(--danger); font-weight:600; }
.resume-tools { display:flex; align-items:center; gap:.75rem; margin-top:.65rem; }
.resume-tools span { color:var(--text-muted); font-size:.8rem; }
.skill-suggestion-panel { margin-top:.75rem; padding:.9rem; border:1px solid var(--border-color); border-radius:10px; background:var(--surface-muted); }
.skill-suggestion-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; margin-bottom:.75rem; }
.skill-suggestion-heading p { margin-top:.2rem; color:var(--text-muted); font-size:.82rem; }
.skill-suggestion-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:.45rem; max-height:250px; overflow:auto; scrollbar-gutter:stable; }
.skill-suggestion-grid label { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:.5rem; min-height:44px; padding:.5rem .6rem; border:1px solid var(--border-color); border-radius:8px; background:var(--bg-card); cursor:pointer; }
.skill-suggestion-grid input { width:1rem; height:1rem; accent-color:var(--primary); }
.skill-suggestion-grid small { color:var(--text-muted); font-size:.68rem; text-transform:uppercase; }
@media (max-width:560px) { .resume-tools, .skill-suggestion-heading { align-items:stretch; flex-direction:column; } .resume-tools .btn, .skill-suggestion-heading .btn { width:100%; } }
@media (max-width:560px) { .current-resume-card { align-items:stretch; flex-direction:column; } .current-resume-card .btn { width:100%; } }

/* Student overview: recruiter-first hierarchy with progressive disclosure. */
.overview-layout { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:1rem; align-items:stretch; }
.overview-panel { min-width:0; height:100%; padding:1.35rem; }
.overview-panel-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; margin-bottom:1rem; }
.overview-panel-heading h2 { font-size:1.2rem; line-height:1.25; }
.overview-panel-heading p { margin-top:.25rem; color:var(--text-muted); font-size:.88rem; }
.overview-score-row { display:grid; grid-template-columns:minmax(150px,.72fr) minmax(0,1.28fr); gap:.75rem; margin-bottom:1.25rem; }
.overview-primary-score,
.overview-mini-stats > div,
.profile-stat-grid > div,
.semester-score { border:1px solid var(--border-color); background:var(--surface-muted); border-radius:9px; }
.overview-primary-score { display:grid; align-content:center; min-height:112px; padding:1rem; }
.overview-primary-score span,
.overview-primary-score small,
.overview-mini-stats span,
.profile-stat-grid span,
.semester-score span,
.overview-label { color:var(--text-muted); font-size:.76rem; font-weight:600; }
.overview-primary-score strong { color:var(--accent); font-size:2rem; line-height:1.1; font-variant-numeric:tabular-nums; }
.overview-mini-stats { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.75rem; }
.overview-mini-stats > div { display:grid; align-content:center; gap:.25rem; min-height:112px; padding:.9rem; }
.overview-mini-stats strong { font-size:1.3rem; font-variant-numeric:tabular-nums; }
.overview-subheading { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:.65rem; }
.overview-subheading h3 { font-size:.92rem; }
.overview-subheading span { color:var(--text-muted); font-size:.72rem; font-weight:700; letter-spacing:.08em; }
.overview-semester-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.55rem; }
.semester-score { display:grid; gap:.15rem; min-height:66px; padding:.7rem; text-align:left; }
.semester-score strong { font-size:1.05rem; font-variant-numeric:tabular-nums; }
.semester-score.is-pending { opacity:.6; }
.semester-score.is-credited { border-color:color-mix(in srgb,var(--student-gold) 45%,var(--border-color)); background:var(--student-gold-soft); }
.semester-score.is-credited strong { color:var(--student-gold); font-size:.9rem; }
.semester-score.is-credited small { color:var(--text-muted); font-size:.68rem; line-height:1.2; }
.profile-stat-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.5rem; margin-bottom:1rem; }
.profile-stat-grid > div { display:grid; gap:.1rem; padding:.7rem; text-align:center; }
.profile-stat-grid strong { color:var(--text-heading); font-size:1.2rem; font-variant-numeric:tabular-nums; }
.overview-highlights-text { position:relative; color:var(--text-body); font-size:.92rem; line-height:1.65; overflow:hidden; }
.overview-highlights-text.is-collapsed { max-height:9.9em; }
.overview-highlights-text.is-collapsed::after { position:absolute; right:0; bottom:0; left:0; height:3.2em; content:""; background:linear-gradient(transparent,var(--bg-card)); pointer-events:none; }
.overview-highlights-text.is-expanded { max-height:none; }
.text-action { min-height:40px; margin-top:.35rem; padding:.35rem 0; border:0; background:transparent; color:var(--primary); cursor:pointer; font:inherit; font-size:.86rem; font-weight:800; }
.text-action:hover { text-decoration:underline; }
.overview-profile-links { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.65rem; }
.overview-diploma-section { margin-top:1rem; padding-top:.85rem; border-top:1px solid var(--border-color); }
.overview-diploma-section .overview-label { display:block; margin-bottom:.45rem; text-transform:uppercase; letter-spacing:.08em; }
.overview-diploma-section #overviewDiplomaBadge > div { padding:.75rem !important; border-radius:8px !important; }

@media (max-width:900px) { .overview-layout { grid-template-columns:1fr; } }
@media (max-width:560px) {
    .overview-panel { padding:1rem; }
    .overview-panel-heading, .overview-score-row { grid-template-columns:1fr; flex-direction:column; }
    .overview-mini-stats { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .overview-primary-score, .overview-mini-stats > div { min-height:88px; }
    .overview-semester-grid, .profile-stat-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

/* Portal-wide UI audit: bounded histories, stable controls, scalable media. */
html { -webkit-text-size-adjust:100%; text-size-adjust:100%; }
img, svg { max-width:100%; }
button, .btn, a, input, select, textarea { touch-action:manipulation; }
.notification-bell svg { display:block; }
.bounded-history-list,
.bounded-card-grid {
    max-height:420px;
    overflow-y:auto;
    overscroll-behavior:contain;
    scrollbar-gutter:stable;
    padding-right:.35rem;
}
.bounded-card-grid { align-content:start; }
@media (max-width:640px) {
    .bounded-history-list,
    .bounded-card-grid { max-height:360px; }
    .btn-sm { min-height:44px; }
}

/* Portal-wide anti-gap and anti-clipping safeguards. */
.section-note {
    display:block;
    max-width:75ch;
    margin:.2rem 0 0;
    padding:0;
    border:0;
    border-radius:0;
    background:transparent;
    color:var(--text-muted);
    line-height:1.45;
}
.grid-2,
.grid-4,
.responsive-two-column,
.notification-admin-layout,
.sent-notification-grid,
.opportunity-grid,
.advanced-forms,
.drive-grid { align-items:start; }
.grid-2 > *,
.grid-4 > *,
.responsive-two-column > *,
.notification-admin-layout > *,
.sent-notification-grid > *,
.opportunity-grid > *,
.advanced-forms > *,
.drive-grid > * { min-width:0; height:auto; }
.opportunity-panel,
.panel-empty { min-height:0; }
#overviewActivities { min-height:0 !important; }
.workflow-card,
.record-card,
.feature-panel { overflow-wrap:anywhere; }
.workflow-card p,
.record-card p,
.feature-panel p { max-width:100%; }
#tab-intelligence .staff-management-card #staffList {
    max-height:none;
    overflow:visible;
    padding-right:0;
}

/* Portal workspace rebuild: one rhythm, no mismatched split panels. */
.panel-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; margin-bottom:1rem; }
.panel-heading h3 { margin-top:.15rem; font-size:1.15rem; }
.form-actions-end { display:flex; justify-content:flex-end; }
.bounded-workspace-list { max-height:560px; overflow-y:auto; overscroll-behavior:contain; scrollbar-gutter:stable; padding-right:.35rem; }
.drive-workspace { display:grid; grid-template-columns:1fr; gap:1rem; }
.drive-create-panel { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.85rem 1rem; padding:1.25rem; }
.drive-create-panel > .panel-heading,.drive-create-panel > .grid-2,.drive-create-panel > .drive-wide { grid-column:1/-1; }
.drive-create-panel .form-group { margin:0; }
.drive-create-panel .grid-2 { gap:1rem; }
.drive-list-panel { min-width:0; padding:1.25rem; }
.workflow-workspace { align-items:start; grid-template-columns:minmax(0,1.18fr) minmax(340px,.82fr); }
.notification-compose-form,#notificationForm { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.85rem 1rem; }
.notification-compose-form > .form-group,.notification-compose-form > .notice-audience,.notification-compose-form > .notification-timing-grid,.notification-compose-form > .notification-form-actions,.notification-compose-form > .form-error,#notificationForm > .form-group,#notificationForm > .grid-2,#notificationForm > .notice-important,#notificationForm > .btn,#notificationForm > .form-error { grid-column:1/-1; margin:0; }
.notification-timing-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; }
.notification-form-actions { display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.notification-important { min-height:44px; display:flex; align-items:center; gap:.5rem; margin:0; }
.pipeline-panel { min-width:0; }
.workflow-workspace > .feature-panel:nth-child(2) { min-width:0; }
.workflow-workspace #applicationPipeline { max-height:560px; overflow-y:auto; overscroll-behavior:contain; scrollbar-gutter:stable; padding-right:.35rem; }
.pipeline-panel .bounded-workspace-list:empty::before { display:block; padding:1.5rem; border:1px dashed var(--border-color); border-radius:9px; color:var(--text-muted); content:"No applications yet. Candidates appear after students apply."; }
.table-shell,.student-table-shell,.table-responsive { border-radius:12px; }
.data-table th,.observer-table th { position:sticky; top:0; z-index:1; }
.data-table td,.observer-table td { vertical-align:middle; }
.tabs-nav .tab-btn { min-height:44px; }
@media (max-width:900px) { .workflow-workspace { grid-template-columns:1fr; } .bounded-workspace-list { max-height:440px; } }
@media (max-width:640px) {
    .drive-create-panel,.notification-compose-form,#notificationForm,.notification-timing-grid { grid-template-columns:1fr; }
    .drive-create-panel > * { grid-column:1!important; }
    .notification-form-actions { align-items:stretch; flex-direction:column; }
    .notification-form-actions .btn { width:100%; }
    .bounded-workspace-list { max-height:380px; }
}

/* Long launch lists stay paired; short alerts use full row. */
#tab-intelligence .launch-operations-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
    align-items:start;
}
#tab-intelligence .intelligence-control-card { height:auto; }
#tab-intelligence .launch-operations-grid > :last-child { grid-column:1 / -1; }
#tab-intelligence #securityAlerts { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:.6rem; }

@media (max-width:760px) {
    #tab-intelligence .launch-operations-grid { grid-template-columns:1fr; }
    #tab-intelligence .launch-operations-grid > :last-child { grid-column:auto; }
}

/* Aligned intelligence rows: no masonry-like vertical shifts. */
#tab-intelligence .intelligence-tool-columns {
    grid-template-areas:
        "parser staff"
        "fraud staff"
        "ranking staff";
    align-items:start;
}
#tab-intelligence .intelligence-tool-column { display:contents; }
#tab-intelligence .intelligence-tool-column:first-child > :first-child { grid-area:parser; }
#tab-intelligence .intelligence-tool-column:first-child > :last-child { grid-area:fraud; }
#tab-intelligence .intelligence-tool-column:last-child > :first-child { grid-area:ranking; }
#tab-intelligence .intelligence-tool-column:last-child > :last-child { grid-area:staff; }
#tab-intelligence .staff-management-card #staffList { max-height:300px; overflow-y:auto; padding-right:.2rem; }

@media (max-width:760px) {
    #tab-intelligence .intelligence-tool-columns {
        grid-template-areas:"parser" "ranking" "fraud" "staff";
    }
}

/* Corrected health grid: balanced rows, readable values, no clipping. */
#tab-intelligence .health-metric-grid {
    grid-template-columns:repeat(6,minmax(0,1fr));
    gap:.6rem;
}
#tab-intelligence .health-metric-grid > * { grid-column:span 1; }
#tab-intelligence .health-metric-grid > :nth-child(4) { grid-column:span 2; }
#tab-intelligence .health-metric-grid > .health-note { grid-column:span 3; }
#tab-intelligence .health-metric-grid .metric-card,
#tab-intelligence .health-metric-grid .health-note {
    width:100%;
    height:auto;
    min-height:76px;
    padding:.7rem .85rem;
}
#tab-intelligence .health-metric-grid .metric-card span { white-space:normal; }
#tab-intelligence .health-metric-grid .metric-card strong {
    overflow:visible;
    overflow-wrap:anywhere;
    font-size:1.12rem;
    line-height:1.15;
}
#tab-intelligence .health-metric-grid .health-note p,
#tab-intelligence .health-metric-grid .health-note small {
    overflow:visible;
    text-overflow:clip;
    white-space:normal;
    line-height:1.3;
}
#tab-intelligence .intelligence-header .section-note,
#tab-intelligence .intelligence-control-card .section-note,
#tab-intelligence .intelligence-tool-card .section-note {
    display:block;
    margin:.18rem 0 0;
    padding:0;
    border:0;
    border-radius:0;
    background:transparent;
    line-height:1.4;
}
#tab-intelligence .launch-operations-grid { align-items:start; }
#tab-intelligence .intelligence-control-card { height:auto; }
#tab-intelligence .intelligence-control-card .record-stack {
    max-height:none;
    overflow:visible;
    padding-right:0;
}
#tab-intelligence .intelligence-control-card .backup-history-list {
    max-height:360px;
    overflow-y:auto;
    overscroll-behavior:contain;
    scrollbar-gutter:stable;
    padding-right:.35rem;
}
#tab-intelligence .backup-history-list .workflow-card {
    padding:.75rem .85rem;
}
#tab-intelligence .backup-history-item {
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    align-items:center;
    gap:.75rem;
}
#tab-intelligence .backup-history-item p { margin:.15rem 0 0; }

/* Final alignment authority: paired panels share row geometry. */
.workflow-workspace { align-items:stretch; }
.workflow-workspace > .feature-panel { height:100%; }
.workflow-workspace > .feature-panel:first-child,
.workflow-workspace > .feature-panel:nth-child(2) { display:flex; flex-direction:column; }
.workflow-workspace > .feature-panel:first-child #notificationForm { flex:1; align-content:start; }
.workflow-workspace > .feature-panel:nth-child(2) #applicationPipeline { flex:1; max-height:none; min-height:0; }

#tab-intelligence .launch-operations-grid { align-items:stretch; }
#tab-intelligence .launch-operations-grid > .intelligence-control-card { display:flex; flex-direction:column; height:100%; }
#tab-intelligence .launch-operations-grid > .intelligence-control-card > .record-stack { flex:1; min-height:0; }
#tab-intelligence .launch-operations-grid > .intelligence-control-card .backup-history-list { max-height:none; overflow-y:auto; }
.launch-operations-grid { align-items:stretch; }
.launch-operations-grid > .intelligence-control-card { display:flex; flex-direction:column; height:100%; }

.drive-create-panel > h3.drive-wide { margin:0 0 .15rem; grid-column:1/-1; }
.drive-create-panel > button[type="submit"] { align-self:end; min-height:46px; }

@media (max-width:900px) {
    .workflow-workspace > .feature-panel { height:auto; }
}

@media (max-width:1180px) {
    #tab-intelligence .health-metric-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
    #tab-intelligence .health-metric-grid > :nth-child(4) { grid-column:span 1; }
    #tab-intelligence .health-metric-grid > .health-note { grid-column:1 / -1; }
}
@media (max-width:640px) {
    #tab-intelligence .health-metric-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
    #tab-intelligence .health-metric-grid > .health-note { grid-column:1 / -1; }
}
@media (max-width:380px) {
    #tab-intelligence .health-metric-grid { grid-template-columns:1fr; }
}

/* Full screen override */
.container {
    width: 100% !important;
    max-width: none !important;
}

.analytics-charts-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 1rem;
    margin-top: 1.5rem;
}
.analytics-charts-grid > .glass-card {
    min-width: 0;
    width: 100%;
}

/* Mobile launch polish: safe navigation, touch targets, and zero page overflow. */
.skip-link { position:fixed; top:.5rem; left:.5rem; z-index:9999; padding:.7rem 1rem; border-radius:8px; background:var(--primary); color:#fff; font-weight:800; transform:translateY(-150%); }
.skip-link:focus { transform:translateY(0); }
.dob-correction-modal { position:fixed; inset:0; z-index:1000; display:flex; align-items:center; justify-content:center; padding:1rem; background:rgba(0,0,0,.68); }
.dob-correction-modal[hidden] { display:none; }
.dob-correction-dialog { position:relative; width:min(100%,420px); max-height:calc(100dvh - 2rem); overflow-y:auto; padding:1.5rem; border:1px solid var(--border-color); border-radius:12px; background:var(--bg-card); color:var(--text-heading); box-shadow:0 20px 55px rgba(0,0,0,.4); }
.modal-close-button { position:absolute; top:.45rem; right:.45rem; display:grid; place-items:center; width:44px; height:44px; padding:0; border:0; border-radius:8px; background:transparent; color:var(--text-muted); cursor:pointer; font-size:1.6rem; }
.modal-close-button:hover { color:var(--text-heading); background:var(--surface-muted); }
.modal-open { overflow:hidden; }

@media (max-width:760px) {
    html { font-size:16px; }
    body { width:100%; min-width:0; overflow-x:hidden; }
    a, button, .btn, [role="button"] { min-height:44px; }
    .portal-help a, .portal-copyright a, #dobCorrectionLink { display:inline-flex !important; align-items:center; justify-content:center; padding:.55rem .2rem; }
    .navbar-inner { align-items:flex-start; flex-wrap:wrap; gap:.75rem; padding-block:.75rem; }
    .navbar-inner > :last-child { width:100%; justify-content:space-between !important; gap:.5rem !important; }
    .navbar .brand { min-width:0; }
    .navbar .brand-title, .navbar .brand-subtitle { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .header-banner { align-items:stretch; flex-direction:column; gap:1rem; }
    .header-banner > :last-child { width:100%; flex-wrap:wrap; }
    .header-banner > :last-child > * { min-width:0 !important; flex:1 1 145px; }
    #impersonatePrn { width:100%; min-width:0 !important; }
    #btnImpersonate { width:100%; height:auto !important; min-height:44px; }
    .tabs-nav { position:static; width:100%; overflow:visible; }
    .tabs-nav .tab-btn { min-width:0; padding:.72rem .45rem; white-space:normal; overflow-wrap:anywhere; line-height:1.25; }
    .analytics-charts-grid { grid-template-columns:1fr; }
    .upload-dropzone { padding:1.5rem 1rem; }
    .glass-card { max-width:100%; }
}

@media (max-width:420px) {
    .navbar .brand-icon { width:40px; height:40px; }
    .navbar .brand-subtitle, #adminRoleBadge, .readonly-pill { display:none; }
    .dashboard-wrapper { padding-inline:.5rem; }
    .glass-card, .feature-panel, .overview-panel { border-radius:10px; }
    .dob-correction-dialog { padding:1.25rem 1rem; }
}
.turnstile-recovery { margin:-8px 0 16px; padding:.7rem; border:1px solid color-mix(in srgb,var(--warning,#f59e0b) 45%,var(--border-color)); border-radius:10px; background:color-mix(in srgb,var(--warning,#f59e0b) 8%,transparent); color:var(--text-secondary); font-size:.78rem; text-align:center; }
.turnstile-recovery span { display:block; margin-bottom:.55rem; }

/* Lightweight motion system: compositor-only, short, and role-aware. */
@keyframes portal-enter {
    from { opacity:0; transform:translate3d(0,8px,0); }
    to { opacity:1; transform:translate3d(0,0,0); }
}
@keyframes portal-modal-enter {
    from { opacity:0; transform:translate3d(0,6px,0) scale(.985); }
    to { opacity:1; transform:translate3d(0,0,0) scale(1); }
}

.unified-login-panel,
.dashboard-wrapper > .header-banner,
.observer-shell .observer-hero {
    animation:portal-enter 280ms cubic-bezier(.2,.7,.2,1) both;
}
.dashboard-wrapper > .tabs-nav {
    animation:portal-enter 300ms 45ms cubic-bezier(.2,.7,.2,1) both;
}
.tab-content.active,
.unified-role-form.active {
    animation:portal-enter 220ms cubic-bezier(.2,.7,.2,1);
}
.modal-backdrop.active .modal-card,
.modal-backdrop.active .modal-content,
.dob-correction-modal:not([hidden]) .dob-correction-dialog {
    animation:portal-modal-enter 200ms cubic-bezier(.2,.7,.2,1) both;
}
.tab-btn,
.role-toggle-btn,
.btn,
.theme-toggle,
.notification-bell,
.glass-card,
.feature-panel,
.workflow-card,
.metric-card,
.project-card {
    transition-property:transform,opacity,color,background-color,border-color,box-shadow;
    transition-duration:180ms;
    transition-timing-function:cubic-bezier(.2,.7,.2,1);
}
.btn:active,
.role-toggle-btn:active,
.tab-btn:active,
.theme-toggle:active,
.notification-bell:active { transform:scale(.98); }

@media (hover:hover) and (pointer:fine) {
    .btn:not(:disabled):hover { transform:translate3d(0,-1px,0); }
    .glass-card:hover,
    .feature-panel:hover,
    .workflow-card:hover,
    .metric-card:hover,
    .project-card:hover { transform:translate3d(0,-2px,0); }
}

@media (max-width:700px) {
    .unified-login-panel,
    .dashboard-wrapper > .header-banner,
    .observer-shell .observer-hero { animation-duration:220ms; }
    .dashboard-wrapper > .tabs-nav { animation-duration:240ms; animation-delay:25ms; }
    .tab-content.active,
    .unified-role-form.active { animation-duration:180ms; }
    .toast { animation-name:portal-enter; animation-duration:220ms; }
}

@media (prefers-reduced-motion:reduce) {
    .unified-login-panel,
    .dashboard-wrapper > .header-banner,
    .observer-shell .observer-hero,
    .dashboard-wrapper > .tabs-nav,
    .tab-content.active,
    .unified-role-form.active,
    .modal-backdrop.active .modal-card,
    .modal-backdrop.active .modal-content,
    .dob-correction-modal:not([hidden]) .dob-correction-dialog,
    .toast { animation:none !important; }
    .btn:active,
    .role-toggle-btn:active,
    .tab-btn:active,
    .theme-toggle:active,
    .notification-bell:active { transform:none !important; }
}