/* =====================================================================
   Faculty Portal 2.0 — Static Preview Stylesheet
   Bundles styles from all LWC components (sideNavigation, header, and
   the 8 facultyMyProfile components). In real LWC runtime each
   component's CSS is shadow-scoped; in this preview we serve one
   bundle so the classes work in a flat DOM.
   ===================================================================== */

:root {
    /* Brand — driven by OrganizationDefaultsApiController */
    --primary-color: #3061FF;
    --primary-alt:   #2f6bff;
    --primary-hover: #2552E5;
    --sidebar-navy:  #172E7D;
    --secondary-color: #EAEFFF;
    --tertiary-color:  #f6f8fb;

    /* Neutrals */
    --text-strong: #172E7D;
    --text-main:   #1A1A1A;
    --text-body:   #1f2937;
    --text-muted:  #6B7280;
    --text-subtle: #94A3B8;
    --line:        #E6E6E8;
    --surface:        #ffffff;
    --surface-muted:  #f6f8fb;
    --page-bg:        #f6f8fb;

    /* Semantic */
    --good:    #16a34a;
    --good-bg: #d1fae5;
    --mid:     #f59e0b;
    --low:     #ef4444;
    --success: #16a34a;
    --danger:  #dc2626;
    --status-green: #22c55e;

    /* Status pills */
    --approved-bg: #d1fae5;
    --approved-fg: #047857;
    --eligible-bg: #dbeafe;
    --eligible-fg: #1d4ed8;
    --badge-elective-bg:  #e7ffea;
    --badge-elective-fg:  #0f8a3f;
    --badge-mandatory-bg: #fff1e6;
    --badge-mandatory-fg: #c2410c;
}

/* GeneralSans web font (static-resource equivalent for preview) */
@font-face {
    font-family: 'GeneralSans';
    font-display: swap;
    src: local('General Sans'), local('GeneralSans'),
         local('-apple-system'), local('BlinkMacSystemFont');
}

* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    font-family: 'GeneralSans', 'General Sans', 'Salesforce Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, system-ui, sans-serif;
    background: var(--page-bg);
    color: var(--text-main);
}

/* ===== LAYOUT SHELL ================================================== */
.app-shell {
    display: grid;
    grid-template-columns: 280px 1fr;
    min-height: 100vh;
    gap: 16px;
    padding: 16px;
}

/* ===== SIDE NAVIGATION (Faculty role) ================================ */
.side-nav {
    display: flex;
    flex-direction: column;
    background: var(--sidebar-navy);
    border-radius: 16px;
    color: #E6EBFF;
    overflow: hidden;
    height: calc(100vh - 32px);
    position: sticky;
    top: 16px;
}

.profile-panel {
    flex-shrink: 0;
    padding: 32px 28px 22px;
    text-align: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}

.avatar-wrap-sidebar {
    width: 138px;
    height: 138px;
    border-radius: 50%;
    border: 5px solid #4F7BFF;
    margin: 0 auto 18px;
    padding: 4px;
    background: var(--sidebar-navy);
    position: relative;
}

.avatar-sidebar {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: linear-gradient(135deg, #d8b690, #b8895d);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 2.4rem;
    font-weight: 700;
}

.student-name {
    font-size: 18px;
    line-height: 1.1;
    margin: 0 0 4px;
    font-weight: 700;
    color: #FFFFFF;
}

.student-id {
    margin: 0;
    color: #A8B5E0;
    font-size: 13px;
}

.menu-section {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 20px 0;
}

.menu-list, .submenu-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.menu-item, .submenu-item {
    margin: 4px 0;
}

.menu-button {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 14px;
    border: 0;
    background: transparent;
    color: #C7D0EE;
    padding: 11px 30px;
    text-align: left;
    font-size: 14px;
    line-height: 1.2;
    cursor: pointer;
}

.menu-button .icon-stroke { stroke: #C7D0EE; }

.menu-button:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #FFFFFF;
}
.menu-button:hover .icon-stroke { stroke: #FFFFFF; }

.group-label {
    font-weight: 700;
    color: #FFFFFF;
}

.submenu-list {
    margin-top: 4px;
}

.submenu-button {
    margin-left: 18px;
    width: calc(100% - 18px);
    border-radius: 14px 0 0 14px;
}

.submenu-item.is-active .submenu-button,
.menu-item.is-active .menu-button {
    background: rgba(255, 255, 255, 0.10);
    color: #FFFFFF;
    font-weight: 600;
}

.submenu-item.is-active .icon-stroke,
.menu-item.is-active .icon-stroke {
    stroke: #FFFFFF;
}

/* Flat sidebar — every item identical, no nesting/indent */
.menu-button { border-radius: 0 14px 14px 0; margin-right: 0; }
.menu-item.is-active .menu-button { border-radius: 0 14px 14px 0; }

.menu-list-secondary {
    margin-top: 6px;
}

.footer-panel {
    flex-shrink: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.10);
    padding: 20px 24px 24px;
    background: transparent;
}

.powered-by {
    width: 100%;
    border: none;
    border-radius: 12px;
    padding: 14px;
    font-size: 14px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    background: #FFFFFF;
    color: var(--primary-color);
    position: relative;
    border: 0.5px solid rgba(255, 255, 255, 0.15);
}

.powered-by strong {
    font-size: 16px;
    line-height: 1;
}

.powered-by .ken42-logo {
    height: 46px;
    width: auto;
    display: block;
    object-fit: contain;
}

.logout-button {
    margin-top: 18px;
    padding-left: 2px;
    color: #E6EBFF;
}
.logout-button .icon-stroke { stroke: #E6EBFF; }
.logout-button:hover { background: rgba(255, 255, 255, 0.08); color: #FFFFFF; }
.logout-button:hover .icon-stroke { stroke: #FFFFFF; }

/* ===== HEADER ======================================================== */
.app-header {
    display: flex;
    align-items: center;
    padding: 12px 24px;
    background: #fff;
    border-radius: 12px;
    border: 1px solid var(--line);
    margin-bottom: 12px;
}

.hamburger-btn {
    display: none;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    color: var(--text-main);
    margin-right: 8px;
    border-radius: 8px;
}

.header-title {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-main);
}

.header-spacer {
    flex: 1;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.header-icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 9999px;
    border: 1px solid var(--line);
    background: #fff;
    cursor: pointer;
    color: var(--text-muted);
    transition: all 0.15s ease;
    position: relative;
}

.header-icon-btn:hover {
    background: var(--secondary-color);
    color: var(--primary-color);
    border-color: #DBE4FF;
}

.header-icon-btn.is-active {
    background: var(--secondary-color);
    color: var(--primary-color);
    border-color: #DBE4FF;
}

.notif-dot {
    position: absolute;
    top: 8px;
    right: 9px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--danger);
    border: 2px solid #fff;
}

.institution-logo {
    font-size: 13px;
    font-weight: 500;
    font-style: italic;
    color: var(--text-subtle);
    margin-left: 16px;
    padding-left: 16px;
    border-left: 1px solid #F1F5F9;
}

/* ===== MAIN PAGE ===================================================== */
.main-col {
    display: flex;
    flex-direction: column;
}

.profile-page {
    background: var(--page-bg);
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.page-bar {
    background: var(--surface);
    border-radius: 12px;
    padding: 18px 24px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.page-title {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--text-main);
}

/* ===== PROFILE HEADER CARD ========================================== */
.profile-header-card {
    display: grid;
    grid-template-columns: minmax(280px, 360px) 1fr;
    gap: 16px;
    align-items: center;
    background: var(--surface);
    border-radius: 12px;
    padding: 20px 24px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.left-block {
    display: flex;
    align-items: center;
    gap: 16px;
}

.profile-avatar-wrap {
    position: relative;
    width: 72px;
    height: 72px;
    flex-shrink: 0;
    border-radius: 50%;
    border: 3px solid var(--primary-color);
    padding: 3px;
    background: var(--surface);
}

.profile-avatar {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: linear-gradient(135deg, #d8b690, #b8895d);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: 1.3rem;
}

.status-dot {
    position: absolute;
    bottom: 4px;
    right: 4px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--status-green);
    border: 2px solid var(--surface);
}

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

.name {
    margin: 0;
    font-size: 18px;
    color: var(--text-main);
    display: flex;
    align-items: center;
    gap: 8px;
}

.name strong {
    font-weight: 700;
    color: var(--text-strong);
}

.divider {
    color: var(--text-muted);
    font-weight: 400;
}

.faculty-id {
    color: var(--text-muted);
    font-weight: 500;
}

.view-id-btn {
    align-self: flex-start;
    background: var(--primary-color);
    color: #ffffff;
    border: 0;
    border-radius: 8px;
    padding: 8px 18px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.view-id-btn:hover {
    filter: brightness(1.05);
}

.pills {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.pill {
    background: var(--secondary-color);
    border-radius: 10px;
    padding: 14px 16px;
    margin: 0;
}

.pill-title {
    margin: 0 0 4px;
    font-size: 14px;
    font-weight: 700;
    color: var(--text-strong);
}

.pill-label {
    margin: 0;
    font-size: 12px;
    color: var(--text-muted);
}

/* ===== TAB NAV ====================================================== */
.tab-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    background: var(--surface);
    border-radius: 12px;
    padding: 4px 16px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.tab-button {
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    padding: 14px 14px;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-muted);
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.tab-button:hover {
    color: var(--primary-color);
}

.tab-active {
    color: var(--primary-color);
    border-bottom-color: var(--primary-color);
    font-weight: 600;
}

.tab-panel {
    background: var(--surface);
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    flex: 1;
}

.hidden { display: none !important; }

/* ===== SECTION BAR (generic) ======================================== */
.section-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.section-title {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-main);
}

.add-btn {
    background: var(--primary-color);
    color: #fff;
    border: 0;
    border-radius: 8px;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.add-btn:hover { filter: brightness(1.05); }

.plus {
    font-size: 16px;
    line-height: 1;
}

/* ===== MY PATH — Course grid ======================================== */
.term-select, .year-select {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 8px 32px 8px 14px;
    font-size: 13px;
    color: var(--text-main);
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%236b7280'><path d='M4 6l4 4 4-4z'/></svg>");
    background-repeat: no-repeat;
    background-position: right 10px center;
}

.course-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
}

.course-card {
    background: var(--surface);
    border-radius: 12px;
    border: 1px solid var(--line);
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.course-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(48, 97, 255, 0.12);
}

.card-thumb {
    position: relative;
    height: 110px;
    background: linear-gradient(135deg, #c5cad3, #6b7280);
}

.thumb-1 { background: linear-gradient(135deg, #1e3a8a, #3b82f6); }
.thumb-2 { background: linear-gradient(135deg, #064e3b, #10b981); }
.thumb-3 { background: linear-gradient(135deg, #7f1d1d, #ef4444); }
.thumb-4 { background: linear-gradient(135deg, #4c1d95, #8b5cf6); }
.thumb-5 { background: linear-gradient(135deg, #78350f, #f59e0b); }

.thumb-overlay {
    position: absolute;
    top: 8px;
    left: 8px;
    right: 8px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 6px;
}

.badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    font-size: 11px;
    font-weight: 600;
    border-radius: 999px;
    background: var(--surface);
    color: var(--text-main);
}

.badge-mandatory {
    background: var(--badge-mandatory-bg);
    color: var(--badge-mandatory-fg);
}

.badge-elective {
    background: var(--badge-elective-bg);
    color: var(--badge-elective-fg);
}

.badge-students {
    background: rgba(255, 255, 255, 0.92);
    color: var(--text-main);
}

.badge-students .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--primary-color);
    display: inline-block;
}

.thumb-avatar {
    position: absolute;
    right: 10px;
    bottom: -14px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--primary-color);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    border: 2px solid var(--surface);
}

.card-body { padding: 16px 14px 14px; }

.course-name {
    margin: 0 0 4px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-main);
    line-height: 1.3;
}

.course-code {
    margin: 0 0 10px;
    font-size: 12px;
    color: var(--text-muted);
}

.tag-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.tag {
    background: var(--surface-muted);
    color: var(--text-muted);
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 11px;
}

/* ===== ACHIEVEMENTS ================================================= */
.achievement-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.achievement-card {
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 16px 18px;
    background: var(--surface);
}

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

.category-tag {
    font-size: 12px;
    color: var(--text-muted);
}

.date-badge {
    background: var(--secondary-color);
    color: var(--primary-color);
    border-radius: 999px;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.card-title {
    margin: 0 0 8px;
    font-size: 15px;
    font-weight: 700;
    color: var(--text-main);
}

.meta-list {
    list-style: none;
    margin: 0 0 8px;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
}

.meta-item {
    font-size: 12px;
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.meta-label {
    color: var(--text-strong);
    font-weight: 600;
}

.meta-sep { color: var(--text-muted); }
.meta-value { color: var(--text-main); }

.card-desc {
    margin: 0 0 10px;
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.5;
}

.outcome-block {
    background: var(--surface-muted);
    border-radius: 8px;
    padding: 10px 12px;
    margin: 0 0 10px;
}

.outcome-label {
    margin: 0 0 4px;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-main);
}

.outcome-text {
    margin: 0;
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.5;
}

.pub-link {
    margin: 0 0 10px;
    font-size: 12px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 4px;
}

.pub-link a {
    color: var(--primary-color);
    text-decoration: none;
}

.doc-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--surface-muted);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 6px 10px;
    font-size: 12px;
    color: var(--text-main);
    text-decoration: none;
}

.pdf-tag {
    background: #ef4444;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    border-radius: 4px;
    padding: 2px 5px;
    letter-spacing: 0.05em;
}

/* ===== MODALS (shared) ============================================== */
.modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    z-index: 9000;
    overflow-y: auto;
}

.modal {
    background: var(--surface);
    border-radius: 14px;
    max-width: 720px;
    width: 100%;
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    box-shadow: 0 24px 48px rgba(15, 23, 42, 0.25);
    display: flex;
    flex-direction: column;
}

.modal-header {
    padding: 20px 24px 12px;
    border-bottom: 1px solid var(--line);
    display: flex;
    align-items: center;
    gap: 10px;
}

.modal-title {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: var(--text-main);
}

.modal-body {
    padding: 16px 24px 8px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.form-row-full { grid-template-columns: 1fr; }

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

.field-label {
    font-size: 13px;
    color: var(--text-main);
    font-weight: 600;
}

.req { color: var(--danger); }

.field-input, .field-textarea {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 13px;
    color: var(--text-main);
    font-family: inherit;
}

.field-input:focus, .field-textarea:focus {
    outline: 2px solid var(--primary-color);
    outline-offset: 1px;
    border-color: var(--primary-color);
}

.field-textarea {
    min-height: 90px;
    resize: vertical;
}

.rich-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    background: var(--surface-muted);
    border: 1px solid var(--line);
    border-top: 0;
    border-radius: 0 0 8px 8px;
    margin-top: -8px;
    font-size: 13px;
    color: var(--text-muted);
}

.ai-assist {
    margin-left: auto;
    color: var(--primary-color);
    cursor: pointer;
    font-weight: 500;
}

.dropzone {
    border: 1.5px dashed var(--line);
    border-radius: 10px;
    padding: 16px;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.15s ease;
    background: var(--surface);
}

.dropzone:hover { border-color: var(--primary-color); }

.dropzone-text {
    margin: 0;
    font-size: 13px;
    color: var(--text-muted);
}

.dropzone-cta {
    color: var(--primary-color);
    font-weight: 600;
}

.dropzone-hint {
    margin: 4px 0 0;
    font-size: 12px;
    color: var(--text-muted);
}

.dropzone-file {
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 13px;
}

.remove-btn {
    background: transparent;
    border: 0;
    color: var(--danger);
    cursor: pointer;
    font-size: 12px;
}

.file-input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.modal-footer {
    padding: 14px 24px 18px;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    border-top: 1px solid var(--line);
}

.btn {
    border: 0;
    border-radius: 8px;
    padding: 10px 22px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.btn-secondary {
    background: var(--secondary-color);
    color: var(--primary-color);
}

.btn-primary {
    background: var(--primary-color);
    color: #fff;
}

.btn-primary:hover { filter: brightness(1.05); }

/* ===== TOASTS ======================================================= */
.toast-wrap {
    position: fixed;
    bottom: 32px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9100;
}

.toast {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 14px 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.18);
    min-width: 280px;
}

.toast-check {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--success);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    flex-shrink: 0;
}

.toast-title {
    margin: 0 0 2px;
    font-size: 14px;
    font-weight: 700;
    color: var(--text-main);
}

.toast-msg {
    margin: 0;
    font-size: 13px;
    color: var(--text-muted);
}

/* ===== EDUCATION TAB ================================================ */
.qualification-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.qualification-item {
    background: var(--surface-muted);
    border-radius: 10px;
    padding: 16px 18px;
}

.degree-line {
    margin: 0 0 6px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-main);
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.specialization {
    font-weight: 500;
    color: var(--text-muted);
}

.institution {
    margin: 0 0 4px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-strong);
}

.period {
    margin: 0;
    font-size: 12px;
    color: var(--text-muted);
}

/* ===== ACADEMIC RESEARCH ============================================ */
.research-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.research-item {
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 14px 18px;
    background: var(--surface);
}

.r-title {
    margin: 0 0 8px;
    font-size: 14px;
    font-weight: 700;
    color: var(--text-main);
}

/* ===== PERFORMANCE FEEDBACK ========================================= */
.perf-layout {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 24px;
    min-height: 100%;
    align-items: stretch;
}
.perf-layout > .content-panel { min-height: 100%; }
.tab-panel { display: flex; flex-direction: column; }
.tab-panel > [data-perf]:not(.hidden) { flex: 1; display: flex; flex-direction: column; }

.cat-panel {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 22px 18px;
    align-self: stretch;
}

.cat-heading {
    margin: 0 0 16px;
    padding: 0 4px;
    font-size: 16px;
    font-weight: 700;
    color: var(--text-main);
}

.cat-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cat-button {
    width: 100%;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 16px 18px;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-main);
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s;
}
.cat-button:hover { border-color: var(--primary-color); }

.cat-active {
    border-color: var(--primary-color);
    color: var(--primary-color);
    font-weight: 600;
    box-shadow: 0 0 0 1px var(--primary-color) inset;
}

.content-panel {
    display: flex;
    flex-direction: column;
    gap: 22px;
    flex: 1;
}
.content-panel > .dual-panel,
.content-panel > .appraisal-grid,
.content-panel > .milestone-list { flex: 1; }
.content-panel > .dual-panel > .panel-card,
.content-panel > .appraisal-grid > .ai-card,
.content-panel > .appraisal-grid > .focus-card { height: 100%; }
.milestone-list { align-content: flex-start; }
.milestone-row { min-height: 96px; }

.content-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.content-title {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-main);
}

/* Single white card holding all 4 overall metrics */
.overall-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 28px 32px;
    display: grid;
    grid-template-columns: auto auto 1fr 1fr 1fr;
    align-items: center;
    column-gap: 32px;
    row-gap: 0;
}

.overall-metric .metric-value {
    margin: 0;
    font-size: 28px;
    font-weight: 700;
    color: var(--text-main);
    letter-spacing: -0.5px;
    line-height: 1.1;
}
.overall-metric .metric-label {
    margin: 6px 0 0;
    font-size: 13px;
    color: var(--text-muted);
    font-weight: 500;
    line-height: 1.35;
    max-width: 160px;
}

.overall-trend {
    display: inline-flex;
    align-items: center;
    background: var(--good-bg);
    color: var(--good);
    font-size: 12.5px;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 8px;
    white-space: nowrap;
    justify-self: start;
}

.trend-pos {
    color: var(--good);
    background: var(--good-bg);
    padding: 2px 6px;
    border-radius: 999px;
    font-weight: 600;
}

.dual-panel {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.panel-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 26px 28px;
    min-height: 320px;
    display: flex;
    flex-direction: column;
}
.view-all { display: inline-flex; align-items: center; gap: 4px; }

.panel-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
}

.panel-title {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    color: var(--text-main);
}

.view-all {
    color: var(--primary-color);
    text-decoration: none;
    font-size: 12px;
    font-weight: 500;
}

.goal-progress {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 18px;
}

.progress-ring {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: conic-gradient(var(--primary-color) 0 80%, var(--secondary-color) 80% 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    flex-shrink: 0;
}

.progress-ring::after {
    content: '';
    position: absolute;
    inset: 8px;
    background: var(--surface);
    border-radius: 50%;
}

.progress-ring-text { display: none; }

.goal-sub {
    margin: 0;
    font-size: 14px;
    color: var(--text-main);
    font-weight: 500;
}
.goal-sub strong { font-weight: 700; font-size: 15px; }

.ms-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.ms-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13.5px;
    color: var(--text-main);
}
.ms-ico {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    flex-shrink: 0;
}
.ms-ico-check { background: var(--good-bg); color: var(--good); }
.ms-ico-warn  { background: #FFF1D6; color: #B07A00; font-size: 12px; }

.big-rating {
    margin: 0;
    font-size: 38px;
    font-weight: 700;
    color: var(--text-main);
    letter-spacing: -0.8px;
    line-height: 1.1;
}

.rating-sub {
    margin: 6px 0 4px;
    font-size: 14px;
    color: var(--good);
    font-weight: 600;
}

.rating-cycle {
    margin: 0 0 22px;
    font-size: 13px;
    color: var(--text-muted);
}

.rating-line {
    margin: 0;
    font-size: 12px;
    color: var(--text-muted);
}

.rating-meta {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: auto;
}

.rating-meta p {
    margin: 0;
    font-size: 13.5px;
    color: var(--text-main);
}
.rating-meta-label { color: var(--text-main); font-weight: 600; margin-right: 6px; }
.rating-meta-approved { color: var(--good); font-weight: 600; }
.rating-meta strong { font-weight: 700; }

/* Legacy aliases kept for the deeper Appraisal view */
.badge-approved {
    background: var(--approved-bg);
    color: var(--approved-fg);
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
}

.badge-eligible {
    background: var(--eligible-bg);
    color: var(--eligible-fg);
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
}

/* ===== Appraisal summary (white pill card at top) ===== */
.appraisal-summary {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 22px 28px;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 18px;
}

.appraisal-summary .big-rating { font-size: 30px; }
.appraisal-summary .rating-sub { margin: 4px 0 2px; }
.appraisal-summary .rating-cycle { margin: 0; }

.appraisal-meta {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
}
.appraisal-meta p { margin: 0; font-size: 13.5px; color: var(--text-main); }

/* ===== Appraisal split: AI Recommendations | Focus Goals ===== */
.appraisal-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

.ai-card {
    background: #F0F5FF;
    border: 1px solid #DCE6FF;
    border-radius: 14px;
    padding: 26px 28px;
    display: flex;
    flex-direction: column;
    min-height: 360px;
}

.ai-card-title {
    margin: 0 0 18px;
    font-size: 14px;
    font-weight: 700;
    color: var(--primary-color);
}

.ai-block { margin-bottom: 16px; }
.ai-block:last-of-type { margin-bottom: 8px; }

.ai-block-title {
    margin: 0 0 8px;
    font-size: 13.5px;
    font-weight: 700;
}
.ai-strengths { color: var(--good); }
.ai-areas { color: #D97706; }

.ai-list {
    list-style: none;
    margin: 0;
    padding: 0 0 0 22px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.ai-list li {
    font-size: 13px;
    color: var(--text-main);
    line-height: 1.5;
}

.ai-card-foot {
    margin-top: auto;
    display: flex;
    justify-content: flex-end;
    padding-top: 12px;
}
.ai-view-feedback {
    color: var(--good);
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
}

.focus-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 26px 28px;
    display: flex;
    flex-direction: column;
    min-height: 360px;
}

.focus-card-title {
    margin: 0 0 16px;
    font-size: 14px;
    font-weight: 700;
    color: var(--text-main);
}

.focus-list {
    list-style: disc;
    margin: 0;
    padding-left: 22px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.focus-list li {
    font-size: 13.5px;
    color: var(--text-main);
    line-height: 1.5;
}

.focus-card-foot {
    margin-top: auto;
    display: flex;
    justify-content: flex-end;
    padding-top: 18px;
}

.btn-outline {
    background: var(--surface);
    color: var(--primary-color);
    border: 1px solid var(--primary-color);
    padding: 10px 18px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
}
.btn-outline:hover { background: var(--secondary-color); }

.milestone-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.milestone-row {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 20px 24px;
    display: grid;
    grid-template-columns: 1.6fr 1.1fr 1fr 1fr 36px;
    gap: 24px;
    align-items: center;
}

.milestone-left {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.milestone-num {
    margin: 0;
    font-size: 12.5px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 500;
}

.milestone-title {
    margin: 0;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--text-main);
}

.ms-pill {
    background: var(--good-bg);
    color: var(--good);
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1;
}

.milestone-cell {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.cell-label {
    margin: 0;
    font-size: 12.5px;
    color: var(--text-muted);
    font-weight: 500;
}

.cell-value {
    margin: 0;
    font-size: 13.5px;
    color: var(--text-main);
    font-weight: 500;
}
.cell-pct {
    color: var(--good);
    font-weight: 600;
    font-size: 14px;
}

.row-menu {
    background: transparent;
    border: 0;
    cursor: pointer;
    color: var(--text-muted);
    font-size: 20px;
    line-height: 1;
}

.sub-tab-nav {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid var(--line);
}

.sub-button {
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    padding: 10px 14px;
    font-size: 13px;
    color: var(--text-muted);
    cursor: pointer;
}

.sub-active {
    color: var(--primary-color);
    border-bottom-color: var(--primary-color);
    font-weight: 600;
}

.feedback-table {
    width: 100%;
    border-collapse: collapse;
}

.feedback-table thead th {
    text-align: left;
    padding: 12px;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-strong);
    border-bottom: 1px solid var(--line);
}

.feedback-table .th-right, .feedback-table .td-right { text-align: right; }

.feedback-table tbody tr.fb-row {
    cursor: pointer;
    transition: background 0.15s ease;
}

.feedback-table tbody tr.fb-row:hover {
    background: var(--surface-muted);
}

.feedback-table tbody td {
    padding: 12px;
    font-size: 13px;
    color: var(--text-main);
    border-bottom: 1px solid var(--line);
}

.question-list {
    list-style: none;
    margin: 0;
    padding: 16px 24px 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.question-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.question-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.question-text {
    margin: 0;
    font-size: 13px;
    color: var(--text-main);
}

.question-score {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-main);
}

.bar-track {
    height: 8px;
    background: var(--surface-muted);
    border-radius: 999px;
    overflow: hidden;
}

.bar {
    display: block;
    height: 100%;
    border-radius: 999px;
}

.bar-good { background: var(--good); }
.bar-mid { background: var(--mid); }
.bar-low { background: var(--low); }

.back-btn {
    background: transparent;
    border: 0;
    font-size: 18px;
    cursor: pointer;
    color: var(--text-main);
}

/* ===== ALLOCATED ASSETS ============================================ */
.assets-table-wrap { overflow-x: auto; }

.assets-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 720px;
}

.assets-table thead th {
    text-align: left;
    padding: 12px 14px;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-strong);
    border-bottom: 1px solid var(--line);
    white-space: nowrap;
}

.assets-table tbody td {
    padding: 12px 14px;
    font-size: 13px;
    color: var(--text-main);
    border-bottom: 1px solid var(--line);
}

.col-sno { width: 60px; color: var(--text-muted); }
.col-cat { width: 150px; }
.col-cat-label { font-weight: 600; color: var(--text-strong); }
.col-qty { width: 90px; color: var(--text-muted); }
.col-date { width: 180px; color: var(--text-muted); }

.asset-row:hover { background: var(--surface-muted); }

/* ===== ICON helpers ================================================= */
.icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.icon-stroke {
    fill: none;
    stroke: #a8acb5;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ===== RESPONSIVE =================================================== */
@media (max-width: 1024px) {
    .app-shell {
        grid-template-columns: 1fr;
    }
    .side-nav {
        position: static;
        height: auto;
        max-width: 100%;
    }
    .perf-layout { grid-template-columns: 1fr; }
    .metric-grid { grid-template-columns: repeat(2, 1fr); }
    .dual-panel, .ai-panel, .appraisal-grid { grid-template-columns: 1fr; }
    .milestone-row { grid-template-columns: 1fr 1fr; }
    .pills { grid-template-columns: repeat(3, 1fr); }
    .profile-header-card { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
    .form-row { grid-template-columns: 1fr; }
    .pills { grid-template-columns: 1fr; }
    .course-grid { grid-template-columns: 1fr; }
}

/* =========================================================
   SETTINGS PAGE (facultySettings)
   ========================================================= */
.hidden { display: none !important; }

.settings-page {
    padding: 24px 32px 80px;
}

.settings-page .page-bar {
    margin-bottom: 20px;
    display: block;
}

.settings-page .breadcrumb {
    font-size: 13px;
    color: var(--text-muted, #6B7280);
    margin-top: 6px;
}

.settings-page .breadcrumb a {
    color: var(--text-muted, #6B7280);
    text-decoration: none;
}

.settings-page .breadcrumb a:hover { color: var(--primary, #3061FF); }
.settings-page .breadcrumb-sep { margin: 0 8px; color: #9CA3AF; }
.settings-page .breadcrumb-current { color: #1A1A1A; font-weight: 500; }

/* Edit Profile Card */
.edit-profile-card {
    background: #FFF;
    border: 1px solid #E6E6E8;
    border-radius: 12px;
    padding: 20px 24px;
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 16px;
}

.edit-photo-wrap {
    position: relative;
    width: 88px;
    height: 88px;
    flex-shrink: 0;
}

.edit-photo {
    width: 88px;
    height: 88px;
    border-radius: 12px;
    background: #EAEFFF;
    color: #3061FF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 28px;
    border: 2px solid #EAEFFF;
}

.edit-photo-btn {
    position: absolute;
    bottom: -4px;
    right: -4px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #3061FF;
    color: #FFF;
    border: 2px solid #FFF;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
}

.edit-info { flex: 1; min-width: 0; }

.edit-name-row {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 14px;
}

.edit-name { font-size: 22px; font-weight: 700; margin: 0; color: #1A1A1A; }
.edit-faculty-id { font-size: 14px; color: #6B7280; }

.edit-meta-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
}

.edit-meta-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.edit-meta-item .meta-label { font-size: 12px; color: #6B7280; }
.edit-meta-item .meta-value { font-size: 14px; color: #1A1A1A; font-weight: 500; }

.status-pill {
    align-self: flex-start;
    background: #DCFCE7;
    color: #166534;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 999px;
}

/* Form sections */
.settings-page .form-section {
    background: #FFF;
    border: 1px solid #E6E6E8;
    border-radius: 12px;
    padding: 20px 24px;
    margin-bottom: 16px;
}

.form-section-title { font-size: 16px; font-weight: 700; margin: 0 0 12px; color: #1A1A1A; }
.form-divider { border: none; border-top: 1px solid #E6E6E8; margin: 0 0 16px; }
.form-subsection-title { font-size: 14px; font-weight: 600; margin: 0 0 16px; color: #1A1A1A; }

.form-grid {
    display: grid;
    gap: 16px 20px;
    margin-bottom: 16px;
}

.form-grid:last-child { margin-bottom: 0; }
.form-grid.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form-grid.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.form-grid.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.form-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.form-field > label {
    font-size: 12px;
    color: #6B7280;
    font-weight: 500;
}

.form-field input[type="text"],
.form-field input[type="email"],
.form-field input[type="password"],
.form-field select {
    height: 38px;
    padding: 0 12px;
    border: 1px solid #E6E6E8;
    border-radius: 8px;
    background: #FFF;
    font-size: 14px;
    color: #1A1A1A;
    font-family: inherit;
    outline: none;
    transition: border-color .15s ease;
    width: 100%;
    box-sizing: border-box;
}

.form-field input:focus,
.form-field select:focus { border-color: #3061FF; }

.field-with-action {
    position: relative;
    display: flex;
    align-items: center;
}

.field-with-action input { padding-right: 60px; }

.inline-edit,
.eye-toggle {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: #3061FF;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    padding: 4px 8px;
    font-family: inherit;
}

.eye-toggle { font-size: 11px; color: #6B7280; }
.inline-edit:hover { text-decoration: underline; }

.form-field .checkbox-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: #6B7280;
    font-weight: 400;
    margin-top: 4px;
    cursor: pointer;
}

.form-field .checkbox-row input[type="checkbox"] {
    width: 14px;
    height: 14px;
    accent-color: #3061FF;
    margin: 0;
}

/* Footer */
.settings-page .footer-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 24px;
}

.settings-page .btn {
    height: 40px;
    padding: 0 22px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: filter .15s ease, background .15s ease;
}

.settings-page .btn-primary {
    background: #3061FF;
    color: #FFF;
    border: 1px solid #3061FF;
}

.settings-page .btn-primary:hover { filter: brightness(1.05); }

.settings-page .btn-outline {
    background: #FFF;
    color: #3061FF;
    border: 1px solid #3061FF;
}

.settings-page .btn-outline:hover { background: #EAEFFF; }

/* Settings modals */
.settings-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(17, 24, 39, .45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 20px;
}

.settings-modal {
    background: #FFF;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .2);
    position: relative;
}

.settings-modal.modal-narrow { width: 100%; max-width: 380px; }
.settings-modal.modal-wide   { width: 100%; max-width: 480px; }

.settings-modal-title {
    font-size: 17px;
    font-weight: 700;
    margin: 0 0 14px;
    color: #1A1A1A;
}

.settings-modal-sub { font-size: 13px; color: #6B7280; margin: 0 0 14px; }
.settings-modal-body { font-size: 14px; color: #1A1A1A; margin: 8px 0 20px; }

.settings-modal-input {
    width: 100%;
    height: 40px;
    padding: 0 12px;
    border: 1px solid #E6E6E8;
    border-radius: 8px;
    font-size: 14px;
    font-family: inherit;
    outline: none;
    margin-bottom: 16px;
    box-sizing: border-box;
}

.settings-modal-input:focus { border-color: #3061FF; }

.settings-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 8px;
}

.settings-modal-actions .btn {
    height: 38px;
    padding: 0 18px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
}

.settings-modal-actions .btn-primary { background: #3061FF; color: #FFF; border: 1px solid #3061FF; }
.settings-modal-actions .btn-outline { background: #FFF; color: #3061FF; border: 1px solid #3061FF; }

.settings-modal-close {
    position: absolute;
    top: 10px;
    right: 12px;
    background: transparent;
    border: none;
    font-size: 22px;
    color: #6B7280;
    cursor: pointer;
    line-height: 1;
}

/* OTP */
.otp-row {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin: 16px 0;
}

.otp-box {
    width: 48px;
    height: 52px;
    border: 1px solid #E6E6E8;
    border-radius: 8px;
    text-align: center;
    font-size: 20px;
    font-weight: 600;
    font-family: inherit;
    outline: none;
}

.otp-box:focus { border-color: #3061FF; }

.resend-row {
    font-size: 13px;
    color: #6B7280;
    text-align: center;
    margin: 8px 0 0;
}

.resend-row a {
    color: #3061FF;
    font-weight: 600;
    text-decoration: none;
}

.resend-row a:hover { text-decoration: underline; }

/* Success modal */
.modal-success { text-align: center; }

.success-check {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #16A34A;
    margin: 4px auto 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.success-title { margin-bottom: 6px; }

/* =============================================================
   ATTENDANCE MODULE
   ============================================================= */
.att-page { padding: 24px 32px 80px; }
.att-page-header { margin-bottom: 20px; }
.att-page-title { font-size: 24px; font-weight: 700; margin: 0 0 6px; color:#1A1A1A; }
.att-breadcrumb { font-size: 13px; color: #6B7280; }
.att-breadcrumb a { color: #6B7280; text-decoration: none; }
.att-breadcrumb a:hover { color: #3061FF; }
.att-sep { margin: 0 8px; color: #9CA3AF; }
.att-current { color: #1A1A1A; font-weight: 500; }

.att-card { background: #FFF; border: 1px solid #E6E6E8; border-radius: 12px; padding: 20px; }
.att-card-header { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.att-card-title { font-size: 16px; font-weight: 700; margin: 0; color:#1A1A1A; }
.att-card-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.att-select { height: 32px; padding: 0 28px 0 10px; border: 1px solid #E6E6E8; border-radius: 6px; font-size: 12px; background: #FFF; cursor: pointer; font-family: inherit; }
.att-btn { height: 34px; padding: 0 14px; border-radius: 6px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit; border: 1px solid transparent; }
.att-btn-primary { background: #3061FF; color: #FFF; border-color: #3061FF; }
.att-btn-outline { background: #FFF; color: #3061FF; border-color: #3061FF; }
.att-btn-danger { color: #EF4444; border-color: #EF4444; }
.att-btn-sm { height: 28px; padding: 0 12px; font-size: 11px; }
.att-btn-block { width: 100%; }
.att-btn:hover { filter: brightness(1.05); }
.att-pill { padding: 5px 12px; border-radius: 999px; font-size: 12px; font-weight: 600; background: #EAEFFF; color: #3061FF; }

.att-dashboard-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; }
.att-card-chart { grid-column: 1; }
.att-card-today { grid-row: 1 / span 2; grid-column: 2; }
.att-card-trend { grid-column: 1; }
.att-card-cta { grid-column: 1 / -1; }

.att-legend { font-size: 12px; color: #6B7280; display: inline-flex; align-items: center; gap: 6px; }
.att-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.att-dot-good { background: #16A34A; }
.att-dot-mid { background: #F59E0B; }
.att-dot-low { background: #EF4444; }

.att-bar-chart { display: flex; align-items: flex-end; gap: 18px; height: 240px; border-bottom: 1px solid #E6E6E8; padding: 30px 4px 4px; }
.att-bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; min-width: 0; }
.att-bar { width: 100%; max-width: 44px; background: #3061FF; border-radius: 4px 4px 0 0; position: relative; cursor: pointer; }
.att-bar-value { position: absolute; top: -22px; left: 50%; transform: translateX(-50%); font-size: 11px; font-weight: 600; color: #1A1A1A; }
.att-bar-label { font-size: 11px; color: #6B7280; margin-top: 8px; text-align: center; line-height: 1.2; }
.att-bar-sub { font-size: 10px; color: #9CA3AF; }
.att-tooltip { position: absolute; top: -42px; left: 50%; transform: translateX(-50%); background: #F59E0B; color: #FFF; padding: 4px 8px; border-radius: 4px; font-size: 10px; white-space: nowrap; }

.att-today-list { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.att-today-item { border: 1px solid #E6E6E8; border-radius: 10px; padding: 12px; display: flex; justify-content: space-between; align-items: center; cursor: pointer; transition: border-color 0.15s; }
.att-today-item:hover { border-color: #3061FF; }
.att-today-course { font-size: 14px; font-weight: 600; margin: 0; color:#1A1A1A; }
.att-today-code { font-size: 11px; color: #6B7280; margin: 2px 0 6px; }
.att-today-time { font-size: 12px; color: #6B7280; margin: 0; }
.att-today-meta { display: flex; align-items: center; gap: 8px; }
.att-chevron { color: #6B7280; font-size: 18px; }
.att-status-pending { border: 1px solid #E6E6E8; color: #6B7280; padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 500; background: #FFF; }
.att-status-marked { border: 1px solid #16A34A; color: #16A34A; padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 500; background: #DCFCE7; }

.att-trend-sub { font-size: 12px; color: #EF4444; margin: 4px 0 0; }
.att-trend-svg { width: 100%; height: 180px; display: block; margin-top: 8px; }
.att-trend-x-labels { display: flex; justify-content: space-between; padding: 8px 4px 0; font-size: 11px; color: #6B7280; }

.att-card-cta { background: linear-gradient(135deg, #3061FF 0%, #4F7FFF 100%); color: #FFF; display: flex; justify-content: space-between; align-items: center; padding: 24px; cursor: pointer; border: none; }
.att-card-cta:hover { filter: brightness(1.05); }
.att-cta-title { font-size: 18px; font-weight: 700; margin: 0 0 4px; color: #FFF; }
.att-cta-sub { font-size: 13px; opacity: 0.85; margin: 0; }
.att-cta-arrow { font-size: 28px; font-weight: 300; }

.att-help-fab { position: fixed; right: 24px; bottom: 24px; background: #3061FF; color: #FFF; border: none; border-radius: 999px; padding: 12px 22px; font-size: 13px; font-weight: 600; cursor: pointer; box-shadow: 0 6px 20px rgba(48, 97, 255, 0.4); z-index: 100; }

.att-course-meta { background: #FFF; border: 1px solid #E6E6E8; border-radius: 12px; padding: 20px; display: flex; justify-content: space-between; align-items: center; gap: 24px; margin-bottom: 16px; flex-wrap: wrap; }
.att-meta-left { min-width: 240px; }
.att-meta-title { font-size: 16px; font-weight: 700; margin: 0; color:#1A1A1A; }
.att-meta-sub { font-size: 12px; color: #6B7280; margin: 4px 0 0; }
.att-meta-cards { display: flex; gap: 12px; flex-wrap: wrap; }
.att-meta-card { border: 1px solid #E6E6E8; border-radius: 10px; padding: 10px 16px; background: #FAFBFC; min-width: 140px; display: flex; flex-direction: column; }
.att-meta-label { font-size: 11px; color: #6B7280; display: block; margin-bottom: 4px; }
.att-meta-value { font-size: 14px; font-weight: 600; color:#1A1A1A; }

.att-tabs-row { display: flex; align-items: center; border-bottom: 1px solid #E6E6E8; margin-bottom: 12px; gap: 4px; }
.att-tab-btn { background: transparent; border: none; padding: 12px 18px; font-size: 14px; font-weight: 600; color: #6B7280; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; font-family: inherit; }
.att-tab-active { color: #3061FF; border-bottom-color: #3061FF; }
.att-tab-spacer { flex: 1; }
.att-date-input { height: 32px; padding: 0 12px; border: 1px solid #E6E6E8; border-radius: 6px; font-size: 12px; min-width: 140px; font-family: inherit; }

.att-week-pager { display: flex; justify-content: center; align-items: center; gap: 16px; padding: 8px 0 16px; }
.att-pager-btn { background: transparent; border: 1px solid #E6E6E8; border-radius: 6px; width: 28px; height: 28px; cursor: pointer; }
.att-pager-label { font-size: 14px; font-weight: 600; color:#1A1A1A; }

.att-table-wrap { width: 100%; overflow-x: auto; }
.att-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.att-table thead th { text-align: left; padding: 12px 14px; background: #F9FAFB; color: #6B7280; font-size: 12px; font-weight: 600; border-bottom: 1px solid #E6E6E8; white-space: nowrap; }
.att-table tbody td { padding: 12px 14px; border-bottom: 1px solid #E6E6E8; color:#1A1A1A; }
.att-table tbody tr:last-child td { border-bottom: none; }
.att-table tbody tr:hover { background: #FAFBFC; }
.att-strong { font-weight: 600; }
.att-muted { color: #6B7280; }
.att-pct-good { color: #16A34A; font-weight: 600; }
.att-pct-low { color: #EF4444; font-weight: 600; }
.att-status-good { background: #DCFCE7; color: #16A34A; padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 600; }
.att-status-warn { background: #FEE2E2; color: #EF4444; padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 600; }
.att-status-present { background: #DCFCE7; color: #16A34A; padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 600; }
.att-status-absent { background: #FEE2E2; color: #EF4444; padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 600; }
.att-status-completed { background: #DCFCE7; color: #16A34A; padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 600; }
.att-status-pending-w { background: #FEF3C7; color: #F59E0B; padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 600; }

.att-mark-table th.att-col-check, .att-mark-table td.att-col-check { text-align: center; }
.att-mark-table th.att-col-check { display: table-cell; }
.att-mark-table th.att-col-check div { display: block; margin-bottom: 4px; }
.att-col-check input { accent-color: #3061FF; cursor: pointer; }
.att-reason-select { height: 30px; padding: 0 10px; border: 1px solid #E6E6E8; border-radius: 6px; font-size: 12px; min-width: 130px; font-family: inherit; cursor: pointer; }

.att-toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; gap: 16px; flex-wrap: wrap; }
.att-leave-tabs { display: flex; background: #FFF; border: 1px solid #E6E6E8; border-radius: 8px; padding: 4px; gap: 2px; }
.att-lt-btn { background: transparent; border: none; padding: 8px 18px; font-size: 13px; font-weight: 600; color: #6B7280; cursor: pointer; border-radius: 6px; font-family: inherit; }
.att-lt-active { background: #3061FF; color: #FFF; }
.att-toolbar-right { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

.att-request-card { background: #FFF; border: 1px solid #E6E6E8; border-radius: 12px; padding: 20px; margin-bottom: 14px; }
.att-request-grid { display: grid; grid-template-columns: 1.5fr 1fr 1.4fr 1fr 1fr; gap: 20px; margin-bottom: 14px; }
.att-cell { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.att-cell-label { font-size: 11px; color: #6B7280; font-weight: 500; }
.att-cell-value { font-size: 13px; color: #1A1A1A; font-weight: 500; }
.att-student-name { font-size: 15px; font-weight: 700; margin: 0; color: #1A1A1A; }
.att-student-meta { font-size: 12px; color: #6B7280; margin: 4px 0 0; }
.att-reason-row { border-top: 1px solid #E6E6E8; padding-top: 12px; display: flex; gap: 8px; align-items: flex-start; margin-bottom: 10px; }
.att-reason-text { font-size: 13px; flex: 1; }
.att-attachment { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid #3061FF; border-radius: 6px; color: #3061FF; font-size: 12px; font-weight: 500; margin-bottom: 12px; background: #FFF; }
.att-approved-on, .att-rejected-on { border-top: 1px solid #E6E6E8; padding-top: 10px; display: flex; gap: 8px; align-items: center; font-size: 13px; }
.att-rejected-meta { display: flex; gap: 24px; flex-wrap: wrap; }
.att-rejected-reason { background: #FEE2E2; border-left: 3px solid #EF4444; padding: 10px 14px; border-radius: 4px; flex: 1; min-width: 240px; margin-top: 8px; }
.att-rejected-text { font-size: 13px; margin: 4px 0 0; }
.att-card-actions-row { display: flex; justify-content: flex-end; gap: 10px; border-top: 1px solid #E6E6E8; padding-top: 14px; margin-top: 4px; }
.att-empty-state { background: #FFF; border: 1px solid #E6E6E8; border-radius: 12px; padding: 60px 20px; text-align: center; }
.att-empty-illus { font-size: 48px; margin-bottom: 12px; }
.att-empty-title { font-size: 16px; font-weight: 600; margin: 8px 0 4px; }
.att-empty-sub { font-size: 13px; color: #6B7280; margin: 0; }

/* Attendance modals */
.att-modal-overlay { position: fixed; inset: 0; background: rgba(17, 24, 39, 0.45); display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 20px; }
.att-modal { background: #FFF; border-radius: 12px; padding: 24px; width: 100%; max-width: 380px; max-height: 90vh; overflow-y: auto; box-shadow: 0 20px 60px rgba(0,0,0,0.2); }
.att-modal-wide { max-width: 560px; }
.att-modal-title { font-size: 17px; font-weight: 700; margin: 0 0 16px; color: #1A1A1A; }
.att-center { text-align: center; }
.att-modal-sub { font-size: 13px; color: #6B7280; margin: 4px 0 0; text-align: center; }
.att-field { margin-bottom: 14px; display: flex; flex-direction: column; gap: 6px; }
.att-field label { font-size: 12px; color: #6B7280; font-weight: 500; }
.att-field input, .att-field select, .att-field textarea { padding: 0 12px; height: 38px; border: 1px solid #E6E6E8; border-radius: 8px; font-size: 14px; font-family: inherit; outline: none; }
.att-field textarea { height: auto; min-height: 80px; padding: 10px 12px; resize: vertical; }
.att-field input:focus, .att-field select:focus, .att-field textarea:focus { border-color: #3061FF; }
.att-textarea-wrap { position: relative; }
.att-ai-chip { position: absolute; bottom: 8px; right: 8px; background: linear-gradient(90deg, #A855F7, #8B5CF6); color: #FFF; border: none; padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 600; cursor: pointer; }
.att-upload-zone { border: 2px dashed #E6E6E8; border-radius: 8px; padding: 20px; text-align: center; cursor: pointer; }
.att-upload-zone p { margin: 0; font-size: 13px; }
.att-upload-sub { color: #6B7280; font-size: 11px !important; margin-top: 4px !important; }
.att-modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 8px; }
.att-modal-actions.att-center { justify-content: center; }
.att-confirm-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 0 0 20px; }
.att-confirm-card { background: #F9FAFB; border: 1px solid #E6E6E8; border-radius: 8px; padding: 12px; display: flex; flex-direction: column; gap: 4px; text-align: center; }
.att-modal-success { text-align: center; max-width: 360px; }
.att-success-check { width: 64px; height: 64px; border-radius: 50%; background: #16A34A; margin: 4px auto 14px; display: flex; align-items: center; justify-content: center; }

.att-toast { position: fixed; top: 20px; right: 20px; background: #FFF; border: 1px solid #16A34A; color: #16A34A; padding: 12px 18px; border-radius: 8px; box-shadow: 0 6px 20px rgba(0,0,0,0.08); font-size: 13px; font-weight: 600; z-index: 2000; display: flex; align-items: center; gap: 10px; }
.att-toast-check { background: #16A34A; color: #FFF; border-radius: 50%; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; font-size: 12px; }

@media (max-width: 1024px) {
    .att-dashboard-grid { grid-template-columns: 1fr; }
    .att-card-chart, .att-card-today, .att-card-trend, .att-card-cta { grid-column: 1; grid-row: auto; }
    .att-request-grid { grid-template-columns: 1fr 1fr; }
    .att-confirm-cards { grid-template-columns: 1fr; }
}

/* =============================================================
   INTERVIEW MODULE
   ============================================================= */
.iv-page { padding: 24px 32px 80px; }
.iv-page-header { margin-bottom: 20px; }
.iv-page-title { font-size: 24px; font-weight: 700; margin: 0 0 6px; color: #1A1A1A; }
.iv-breadcrumb { font-size: 13px; color: #6B7280; }
.iv-breadcrumb a { color: #6B7280; text-decoration: none; }
.iv-breadcrumb a:hover { color: #3061FF; }
.iv-sep { margin: 0 8px; color: #9CA3AF; }
.iv-current { color: #1A1A1A; font-weight: 500; }

.iv-card { background: #FFF; border: 1px solid #E6E6E8; border-radius: 12px; padding: 20px; }

.iv-card-top { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #E6E6E8; gap: 16px; flex-wrap: wrap; }
.iv-tabs { display: flex; gap: 4px; }
.iv-tab-btn { background: transparent; border: none; padding: 12px 16px; font-size: 14px; font-weight: 600; color: #6B7280; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; font-family: inherit; }
.iv-tab-active { color: #3061FF; border-bottom-color: #3061FF; }
.iv-filter { height: 32px; padding: 0 28px 0 12px; border: 1px solid #E6E6E8; border-radius: 6px; font-size: 12px; background: #FFF; font-family: inherit; cursor: pointer; }

.iv-table-wrap { width: 100%; overflow-x: auto; padding-top: 12px; }
.iv-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.iv-table thead th { text-align: left; padding: 12px 14px; background: #F9FAFB; color: #6B7280; font-size: 12px; font-weight: 600; border-bottom: 1px solid #E6E6E8; white-space: nowrap; }
.iv-table tbody td { padding: 12px 14px; border-bottom: 1px solid #E6E6E8; color: #1A1A1A; }
.iv-table tbody tr:last-child td { border-bottom: none; }
.iv-table tbody tr:hover { background: #FAFBFC; }
.iv-strong { font-weight: 600; }

.iv-join-btn { display: inline-flex; align-items: center; gap: 6px; background: #3061FF; color: #FFF; border: none; padding: 6px 14px; border-radius: 6px; font-size: 12px; font-weight: 600; cursor: pointer; font-family: inherit; }
.iv-join-btn:hover { filter: brightness(1.05); }

.iv-icon-btn { background: transparent; border: 1px solid #E6E6E8; width: 30px; height: 30px; border-radius: 6px; cursor: pointer; color: #6B7280; display: inline-flex; align-items: center; justify-content: center; }
.iv-icon-btn:hover { color: #3061FF; border-color: #3061FF; }

.iv-presence { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; cursor: pointer; }
.iv-presence input { accent-color: #3061FF; }

.iv-empty { padding: 60px 20px; text-align: center; color: #6B7280; font-size: 13px; }

.iv-pagination { display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding-top: 16px; margin-top: 12px; border-top: 1px solid #E6E6E8; font-size: 12px; color: #6B7280; }
.iv-rpp-select { height: 28px; padding: 0 22px 0 8px; border: 1px solid #E6E6E8; border-radius: 4px; font-size: 12px; font-family: inherit; background: #FFF; cursor: pointer; }
.iv-page-info { margin: 0 8px; }
.iv-page-btn { width: 28px; height: 28px; background: #FFF; border: 1px solid #E6E6E8; border-radius: 4px; cursor: pointer; font-size: 14px; color: #1A1A1A; }
.iv-page-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* Scoresheet wizard */
.iv-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; }
.iv-scoresheet-card { display: flex; flex-direction: column; gap: 20px; padding: 24px; }

.iv-stepper { display: flex; align-items: center; gap: 0; padding: 4px 0 12px; }
.iv-step-node { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.iv-step-circle { width: 28px; height: 28px; border-radius: 50%; background: #FFF; border: 2px solid #E6E6E8; color: #6B7280; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; flex-shrink: 0; }
.iv-step-node.iv-done .iv-step-circle { background: #16A34A; border-color: #16A34A; color: #FFF; }
.iv-step-node.iv-active .iv-step-circle { background: #3061FF; border-color: #3061FF; color: #FFF; }
.iv-step-label { font-size: 12px; color: #6B7280; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.iv-step-node.iv-done .iv-step-label { color: #16A34A; }
.iv-step-node.iv-active .iv-step-label { color: #3061FF; font-weight: 600; }
.iv-step-connector { flex: 1; height: 2px; background: #E6E6E8; margin-left: 10px; }
.iv-step-node.iv-done + .iv-step-node .iv-step-connector { background: #16A34A; }

.iv-progress-row { display: flex; align-items: center; gap: 12px; }
.iv-progress-bar { flex: 1; height: 6px; background: #E6E6E8; border-radius: 999px; overflow: hidden; }
.iv-progress-fill { height: 100%; background: #16A34A; transition: width 0.3s; width: 0%; }
.iv-step-counter { background: #EAEFFF; color: #3061FF; font-size: 11px; font-weight: 600; padding: 4px 12px; border-radius: 999px; white-space: nowrap; }

.iv-step-body { display: flex; flex-direction: column; gap: 20px; }
.iv-question { border-bottom: 1px solid #E6E6E8; padding-bottom: 18px; }
.iv-question:last-child { border-bottom: none; padding-bottom: 0; }
.iv-q-text { font-size: 14px; font-weight: 500; margin: 0 0 12px; color: #1A1A1A; }

.iv-yesno-row { display: flex; gap: 12px; }
.iv-radio-pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border: 1px solid #E6E6E8; border-radius: 999px; cursor: pointer; font-size: 13px; }
.iv-radio-pill input { accent-color: #3061FF; }

.iv-scale-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.iv-scale-anchor { font-size: 12px; color: #6B7280; font-weight: 500; }
.iv-scale-cell { display: inline-flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer; }
.iv-scale-cell input { accent-color: #3061FF; }
.iv-scale-cell span { font-size: 11px; color: #6B7280; }

.iv-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.iv-field label { font-size: 13px; color: #1A1A1A; font-weight: 500; }
.iv-field textarea { min-height: 90px; padding: 10px 12px; border: 1px solid #E6E6E8; border-radius: 8px; font-size: 14px; font-family: inherit; outline: none; resize: vertical; }
.iv-field textarea:focus { border-color: #3061FF; }

.iv-footer-bar { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid #E6E6E8; padding-top: 16px; margin-top: 8px; }

.iv-btn { height: 38px; padding: 0 22px; border-radius: 8px; font-size: 14px; font-weight: 600; cursor: pointer; font-family: inherit; border: 1px solid transparent; }
.iv-btn-primary { background: #3061FF; color: #FFF; border-color: #3061FF; }
.iv-btn-outline { background: #FFF; color: #3061FF; border-color: #3061FF; }
.iv-btn-block { width: 100%; }
.iv-btn-sm { height: 28px; padding: 0 14px; font-size: 11px; }
.iv-btn:hover { filter: brightness(1.05); }
.iv-arrow { margin-left: 4px; }

.iv-profile-rail { min-width: 0; }
.iv-profile-card { background: #FFF; border: 1px solid #E6E6E8; border-radius: 12px; padding: 20px; display: flex; flex-direction: column; gap: 18px; position: sticky; top: 16px; }
.iv-profile-top { text-align: center; padding-bottom: 14px; border-bottom: 1px solid #E6E6E8; }
.iv-profile-avatar { width: 56px; height: 56px; border-radius: 50%; background: #EAEFFF; color: #3061FF; display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 700; margin: 0 auto 10px; }
.iv-profile-name { font-size: 16px; font-weight: 700; margin: 0; color: #1A1A1A; }
.iv-profile-program { font-size: 12px; color: #6B7280; margin: 4px 0 0; }
.iv-profile-section-title { font-size: 12px; font-weight: 700; color: #3061FF; margin: 0 0 8px; text-transform: uppercase; letter-spacing: 0.4px; }
.iv-profile-grid { display: flex; flex-direction: column; gap: 6px; font-size: 12px; }
.iv-profile-grid > div { display: flex; justify-content: space-between; gap: 8px; }
.iv-pl { color: #6B7280; }
.iv-pv { color: #1A1A1A; font-weight: 500; text-align: right; }
.iv-break { word-break: break-all; }

/* Profile modal */
.iv-profile-overlay { position: fixed; inset: 0; background: rgba(17,24,39,0.5); display: flex; align-items: center; justify-content: center; z-index: 1100; padding: 20px; }
.iv-profile-modal { background: #FFF; border-radius: 12px; width: 100%; max-width: 720px; max-height: 90vh; display: flex; flex-direction: column; box-shadow: 0 20px 60px rgba(0,0,0,0.2); overflow: hidden; }
.iv-profile-modal-header { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px 0; border-bottom: 1px solid #E6E6E8; }
.iv-close-btn { background: transparent; border: none; color: #6B7280; font-size: 22px; line-height: 1; cursor: pointer; padding: 4px 8px; }
.iv-profile-modal-body { overflow-y: auto; padding: 20px 24px 28px; flex: 1; }
.iv-section { margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid #E6E6E8; }
.iv-section:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.iv-section-title { font-size: 14px; font-weight: 700; color: #3061FF; margin: 0 0 12px; text-transform: uppercase; letter-spacing: 0.4px; }
.iv-prof-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 24px; }
.iv-prof-row { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; }
.iv-prof-row.iv-prof-full { grid-column: 1 / -1; }
.iv-prof-lbl { color: #6B7280; font-weight: 500; }
.iv-prof-val { color: #1A1A1A; font-weight: 500; text-align: right; }
.iv-doc-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.iv-doc-row { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; border: 1px solid #E6E6E8; border-radius: 8px; }
.iv-doc-name { font-size: 13px; color: #1A1A1A; font-weight: 500; }

/* Success */
.iv-success-overlay { position: fixed; inset: 0; background: rgba(17,24,39,0.45); display: flex; align-items: center; justify-content: center; z-index: 1200; padding: 20px; }
.iv-success-modal { background: #FFF; border-radius: 12px; padding: 28px; width: 100%; max-width: 380px; box-shadow: 0 20px 60px rgba(0,0,0,0.2); text-align: center; }
.iv-success-check { width: 64px; height: 64px; border-radius: 50%; background: #16A34A; margin: 4px auto 14px; display: flex; align-items: center; justify-content: center; }
.iv-success-title { font-size: 17px; font-weight: 700; margin: 0 0 6px; color: #1A1A1A; }
.iv-success-sub { font-size: 13px; color: #6B7280; margin: 0; }

@media (max-width: 1024px) {
    .iv-layout { grid-template-columns: 1fr; }
    .iv-profile-card { position: static; }
    .iv-prof-grid { grid-template-columns: 1fr; }
}

/* =============================================================
   MY STUDENTS MODULE
   ============================================================= */
.ms-page { padding: 24px 32px 80px; }
.ms-page-header { margin-bottom: 20px; }
.ms-page-title { font-size: 24px; font-weight: 700; margin: 0 0 6px; color: #1A1A1A; }
.ms-breadcrumb { font-size: 13px; color: #6B7280; }
.ms-breadcrumb a { color: #6B7280; text-decoration: none; cursor: pointer; }
.ms-breadcrumb a:hover { color: #3061FF; }
.ms-sep { margin: 0 8px; color: #9CA3AF; }
.ms-current { color: #1A1A1A; font-weight: 500; }

.ms-section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; gap: 12px; flex-wrap: wrap; }
.ms-section-title { font-size: 18px; font-weight: 700; margin: 0; }
.ms-sem-select { height: 36px; padding: 0 32px 0 14px; border: 1px solid #E6E6E8; border-radius: 8px; font-size: 13px; font-family: inherit; background: #FFF; cursor: pointer; }

.ms-course-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.ms-course-card { background: #FFF; border: 1px solid #E6E6E8; border-radius: 12px; overflow: hidden; cursor: pointer; transition: transform .15s, box-shadow .15s; display: flex; flex-direction: column; }
.ms-course-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.06); }
.ms-thumb {
    height: 140px; position: relative;
    background: linear-gradient(135deg, #d4d4d8 0%, #a1a1aa 100%);
    overflow: hidden;
}
.ms-thumb-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ms-thumb-overlay {
    position: absolute;
    top: 12px; left: 12px; right: 12px;
    display: flex; justify-content: space-between; align-items: flex-start; gap: 8px;
}
.ms-badge-mandatory {
    background: #FEF3C7; color: #B45309;
    padding: 4px 12px; border-radius: 999px;
    font-size: 11px; font-weight: 700;
    box-shadow: 0 1px 2px rgba(0,0,0,.06);
}
.ms-badge-elective {
    background: #DBEAFE; color: #1D4ED8;
    padding: 4px 12px; border-radius: 999px;
    font-size: 11px; font-weight: 700;
    box-shadow: 0 1px 2px rgba(0,0,0,.06);
}
.ms-badge-students {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 10px; border-radius: 999px;
    background: rgba(17, 24, 39, .85); color: #FFF;
    font-size: 11px; font-weight: 600;
}
.ms-stu-dot { width: 6px; height: 6px; border-radius: 50%; background: #FFF; }
.ms-dot { width: 6px; height: 6px; border-radius: 50%; background: #FFF; }
.ms-card-body { padding: 16px; display: flex; flex-direction: column; gap: 4px; }
.ms-course-name { font-size: 14px; font-weight: 700; margin: 0; color: #1A1A1A; }
.ms-course-code { font-size: 12px; color: #6B7280; margin: 0 0 8px; }
.ms-meta-row { font-size: 12px; color: #6B7280; }

/* Course roster */
.ms-course-meta { background: #FFF; border: 1px solid #E6E6E8; border-radius: 12px; padding: 20px; display: flex; justify-content: space-between; align-items: center; gap: 24px; margin-bottom: 16px; flex-wrap: wrap; }
.ms-course-info { min-width: 240px; }
.ms-course-title { font-size: 16px; font-weight: 700; margin: 0; color: #1A1A1A; }
.ms-course-sub { font-size: 12px; color: #6B7280; margin: 4px 0 0; }
.ms-kpi-row { display: flex; gap: 12px; flex-wrap: wrap; }
.ms-kpi { border: 1px solid #E6E6E8; border-radius: 10px; padding: 12px 18px; background: #FAFBFC; min-width: 140px; display: flex; flex-direction: column; gap: 4px; }
.ms-kpi-label { font-size: 11px; color: #6B7280; }
.ms-kpi-value { font-size: 22px; font-weight: 700; }
.ms-kpi-risk { background: #FEE2E2; border-color: #FCA5A5; }
.ms-kpi-risk .ms-kpi-value { color: #EF4444; }

.ms-card { background: #FFF; border: 1px solid #E6E6E8; border-radius: 12px; padding: 20px; }
.ms-card-header { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 16px; }
.ms-card-title { font-size: 16px; font-weight: 700; margin: 0; color: #1A1A1A; }

.ms-btn { height: 34px; padding: 0 16px; border-radius: 6px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit; border: 1px solid transparent; }
.ms-btn-primary { background: #3061FF; color: #FFF; border-color: #3061FF; }
.ms-btn-outline { background: #FFF; color: #3061FF; border-color: #3061FF; }
.ms-btn-sm { height: 28px; padding: 0 12px; font-size: 11px; }
.ms-btn:hover { filter: brightness(1.05); }

.ms-table-wrap { width: 100%; overflow-x: auto; }
.ms-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.ms-table thead th { text-align: left; padding: 10px 14px; background: #F9FAFB; color: #6B7280; font-size: 12px; font-weight: 600; border-bottom: 1px solid #E6E6E8; white-space: nowrap; }
.ms-marks-header { text-align: center !important; border-bottom: none !important; }
.ms-table tbody td { padding: 12px 14px; border-bottom: 1px solid #E6E6E8; }
.ms-table tbody tr:last-child td { border-bottom: none; }
.ms-table tbody tr:hover { background: #FAFBFC; }
.ms-link { color: #3061FF; text-decoration: none; font-weight: 500; cursor: pointer; }
.ms-link:hover { text-decoration: underline; }

.ms-pct { display: inline-block; padding: 4px 12px; border-radius: 999px; font-size: 12px; font-weight: 600; min-width: 44px; text-align: center; }
.ms-pct-good { background: #DCFCE7; color: #16A34A; }
.ms-pct-low  { background: #FEE2E2; color: #EF4444; }
.ms-status-good { background: #DCFCE7; color: #16A34A; padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 600; }
.ms-status-warn { background: #FEE2E2; color: #EF4444; padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
.ms-status-warn::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #EF4444; }
.ms-status-closed { background: #F3F4F6; color: #6B7280; padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 600; }
.ms-status-review { background: #FEF3C7; color: #F59E0B; padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 600; }

.ms-pagination { display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding-top: 16px; margin-top: 12px; border-top: 1px solid #E6E6E8; font-size: 12px; color: #6B7280; }
.ms-rpp { height: 28px; padding: 0 22px 0 8px; border: 1px solid #E6E6E8; border-radius: 4px; font-size: 12px; background: #FFF; font-family: inherit; cursor: pointer; }
.ms-page-info { margin: 0 8px; }
.ms-page-btn { width: 28px; height: 28px; background: #FFF; border: 1px solid #E6E6E8; border-radius: 4px; cursor: pointer; font-size: 14px; }
.ms-page-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* Student profile */
.ms-name-card { background: #FFF; border: 1px solid #E6E6E8; border-radius: 12px; padding: 20px; display: flex; justify-content: space-between; align-items: center; gap: 24px; margin-bottom: 16px; flex-wrap: wrap; }
.ms-left-block { display: flex; gap: 16px; align-items: center; min-width: 280px; }
.ms-avatar-wrap { position: relative; }
.ms-avatar { width: 56px; height: 56px; border-radius: 50%; background: #EAEFFF; color: #3061FF; display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 700; }
.ms-status-dot { position: absolute; bottom: 2px; right: 2px; width: 12px; height: 12px; border-radius: 50%; background: #16A34A; border: 2px solid #FFF; }
.ms-name-row { font-size: 18px; margin: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ms-divider { color: #E6E6E8; }
.ms-student-id { font-size: 13px; color: #6B7280; font-weight: normal; }
.ms-programs { font-size: 12px; color: #6B7280; margin: 4px 0 8px; }
.ms-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.ms-chip { padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 600; }
.ms-chip-blue   { background: #EAEFFF; color: #3061FF; }
.ms-chip-purple { background: #EDE9FE; color: #8B5CF6; }
.ms-chip-green  { background: #DCFCE7; color: #16A34A; }
.ms-chip-gray   { background: #F3F4F6; color: #6B7280; }
.ms-metric-row { display: flex; gap: 12px; flex-wrap: wrap; }
.ms-metric { border: 1px solid #E6E6E8; border-radius: 10px; padding: 10px 16px; min-width: 130px; display: flex; flex-direction: column; gap: 4px; background: #FAFBFC; }
.ms-metric-att { background: #DCFCE7; border-color: #BBF7D0; }
.ms-metric-label { font-size: 11px; color: #6B7280; }
.ms-metric-value { font-size: 20px; font-weight: 700; }

.ms-tab-nav { display: flex; gap: 4px; border-bottom: 1px solid #E6E6E8; margin-bottom: 16px; overflow-x: auto; }
.ms-tab-btn { background: transparent; border: none; padding: 12px 16px; font-size: 14px; font-weight: 600; color: #6B7280; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; font-family: inherit; white-space: nowrap; }
.ms-tab-btn.ms-tab-active { color: #3061FF; border-bottom-color: #3061FF; }

/* Academics layout */
.ms-academics-layout { display: grid; grid-template-columns: 240px 1fr; gap: 16px; }
.ms-semester-rail { background: #FFF; border: 1px solid #E6E6E8; border-radius: 12px; padding: 16px; display: flex; flex-direction: column; gap: 12px; position: sticky; top: 16px; height: fit-content; }
.ms-program-select { width: 100%; height: 36px; padding: 0 12px; border: 1px solid #E6E6E8; border-radius: 8px; font-size: 13px; font-family: inherit; cursor: pointer; }
.ms-semester-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.ms-sem-item { display: flex; align-items: center; gap: 10px; padding: 8px 6px; border-radius: 6px; cursor: pointer; }
.ms-sem-item:hover { background: #F9FAFB; }
.ms-sem-item.ms-active { background: #EAEFFF; }
.ms-sem-item.ms-active .ms-sem-circle { background: #3061FF; border-color: #3061FF; color: #FFF; }
.ms-sem-item.ms-done .ms-sem-circle { background: #16A34A; border-color: #16A34A; color: #FFF; }
.ms-sem-circle { width: 28px; height: 28px; border-radius: 50%; background: #FFF; border: 2px solid #E6E6E8; color: #6B7280; font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ms-sem-text { display: flex; flex-direction: column; min-width: 0; }
.ms-sem-label { font-size: 13px; font-weight: 600; }
.ms-sem-sub { font-size: 11px; color: #6B7280; }

.ms-academics-pane { background: #FFF; border: 1px solid #E6E6E8; border-radius: 12px; padding: 20px; }
.ms-group-title { font-size: 14px; font-weight: 700; margin: 0 0 12px; color: #1A1A1A; }
.ms-grade { display: inline-block; padding: 3px 10px; border-radius: 999px; background: #DCFCE7; color: #16A34A; font-weight: 700; font-size: 12px; }
.ms-marks-low { color: #EF4444; font-weight: 600; }
.ms-acad-footer { display: flex; justify-content: space-between; align-items: center; padding-top: 14px; border-top: 1px solid #E6E6E8; flex-wrap: wrap; gap: 12px; margin-top: 16px; }
.ms-summary { display: flex; gap: 24px; font-size: 13px; flex-wrap: wrap; }

/* Education list */
.ms-edu-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.ms-edu-row { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; border: 1px solid #E6E6E8; border-radius: 10px; gap: 16px; flex-wrap: wrap; }
.ms-edu-degree { font-size: 14px; font-weight: 600; margin: 0; }
.ms-edu-meta { font-size: 12px; color: #6B7280; margin: 4px 0 0; }
.ms-edu-actions { display: flex; gap: 10px; align-items: center; }

/* Clubs grid */
.ms-clubs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.ms-club-card { border: 1px solid #E6E6E8; border-radius: 12px; overflow: hidden; }
.ms-club-banner {
    height: 110px; position: relative;
    background: linear-gradient(135deg, #d4d4d8 0%, #a1a1aa 100%);
    overflow: hidden;
}
.ms-club-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ms-club-privacy { position: absolute; top: 8px; right: 8px; background: rgba(255,255,255,.92); padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 600; color: #6B7280; }
.ms-club-body { padding: 12px 14px; }
.ms-club-name { font-size: 14px; font-weight: 600; margin: 0; }
.ms-club-role { font-size: 12px; color: #6B7280; margin: 4px 0 0; }

/* Extra curriculars */
.ms-extra-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.ms-extra-row { display: flex; gap: 16px; padding: 14px 16px; border: 1px solid #E6E6E8; border-radius: 10px; align-items: center; }
.ms-extra-category { background: #EAEFFF; color: #3061FF; padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 600; min-width: 110px; text-align: center; }
.ms-extra-body { flex: 1; }
.ms-extra-title { font-size: 14px; font-weight: 600; margin: 0; }
.ms-extra-meta { font-size: 12px; color: #6B7280; margin: 4px 0 0; }

/* Conduct */
.ms-conduct-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.ms-conduct-row { padding: 16px; border: 1px solid #E6E6E8; border-radius: 10px; }
.ms-conduct-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.ms-case-id { font-size: 12px; color: #6B7280; font-weight: 600; }
.ms-conduct-title { font-size: 14px; font-weight: 600; margin: 0 0 4px; }
.ms-conduct-type { font-size: 12px; color: #6B7280; margin: 0 0 8px; }
.ms-conduct-summary { font-size: 13px; color: #1A1A1A; margin: 0 0 12px; }
.ms-conduct-footer { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.ms-due-date { font-size: 12px; color: #6B7280; }

/* Conduct detail */
.ms-case-header { background: #FFF; border: 1px solid #E6E6E8; border-radius: 12px; padding: 20px; margin-bottom: 16px; }
.ms-case-title-row { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.ms-case-title { font-size: 18px; font-weight: 700; margin: 0; }
.ms-case-meta { display: flex; gap: 32px; flex-wrap: wrap; padding-top: 12px; border-top: 1px solid #E6E6E8; }
.ms-meta-item { display: flex; flex-direction: column; gap: 4px; }
.ms-meta-label { font-size: 11px; color: #6B7280; }
.ms-meta-value { font-size: 13px; font-weight: 600; }

.ms-thread { background: #FFF; border: 1px solid #E6E6E8; border-radius: 12px; padding: 20px; display: flex; flex-direction: column; gap: 16px; }
.ms-msg-committee { background: #EDE9FE; border-radius: 12px; padding: 16px; align-self: flex-start; max-width: 75%; }
.ms-msg-you       { background: #EAEFFF; border-radius: 12px; padding: 16px; align-self: flex-end; max-width: 75%; }
.ms-msg-header { font-size: 12px; margin-bottom: 8px; }
.ms-msg-author { font-weight: 700; }
.ms-msg-meta   { color: #6B7280; margin-left: 4px; }
.ms-msg-body { font-size: 13px; line-height: 1.5; }
.ms-msg-body p { margin: 0 0 8px; }
.ms-msg-body ul { margin: 0 0 8px; padding-left: 20px; }
.ms-msg-body li { margin-bottom: 4px; }
.ms-attachments { margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(0,0,0,.08); }
.ms-att-label { font-size: 11px; color: #6B7280; font-weight: 600; margin: 0 0 8px; }
.ms-att-list { display: flex; flex-wrap: wrap; gap: 8px; }
.ms-att-chip { background: #FFF; border: 1px solid #E6E6E8; padding: 6px 12px; border-radius: 6px; font-size: 12px; font-weight: 500; color: #3061FF; cursor: pointer; }

/* Modals */
.ms-modal-overlay { position: fixed; inset: 0; background: rgba(17,24,39,.45); display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 20px; }
.ms-modal { background: #FFF; border-radius: 12px; padding: 24px; width: 100%; max-width: 480px; max-height: 90vh; overflow-y: auto; box-shadow: 0 20px 60px rgba(0,0,0,.2); }
.ms-modal-wide { max-width: 560px; }
.ms-modal-title { font-size: 18px; font-weight: 700; margin: 0 0 16px; }
.ms-field { margin-bottom: 14px; display: flex; flex-direction: column; gap: 6px; }
.ms-field label { font-size: 12px; color: #6B7280; font-weight: 500; }
.ms-field input, .ms-field select, .ms-field textarea { padding: 0 12px; height: 38px; border: 1px solid #E6E6E8; border-radius: 8px; font-size: 14px; font-family: inherit; outline: none; }
.ms-field textarea { height: auto; min-height: 90px; padding: 10px 12px; resize: vertical; }
.ms-field input:focus, .ms-field select:focus, .ms-field textarea:focus { border-color: #3061FF; }
.ms-checkbox-row { display: flex; align-items: center; gap: 8px; margin: 4px 0 14px; font-size: 13px; cursor: pointer; }
.ms-checkbox-row input { accent-color: #3061FF; }
.ms-textarea-wrap { position: relative; }
.ms-ai-chip { position: absolute; bottom: 8px; right: 8px; background: linear-gradient(90deg, #A855F7, #8B5CF6); color: #FFF; border: none; padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 600; cursor: pointer; }
.ms-upload-zone { border: 2px dashed #E6E6E8; border-radius: 8px; padding: 20px; text-align: center; cursor: pointer; }
.ms-upload-zone p { margin: 0; font-size: 13px; }
.ms-upload-sub { color: #6B7280; font-size: 11px !important; margin-top: 4px !important; }
.ms-modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 8px; }

.ms-toast { position: fixed; top: 20px; right: 20px; background: #FFF; border: 1px solid #16A34A; color: #16A34A; padding: 12px 18px; border-radius: 8px; box-shadow: 0 6px 20px rgba(0,0,0,.08); font-size: 13px; font-weight: 600; z-index: 2000; display: flex; align-items: center; gap: 10px; }
.ms-toast-check { background: #16A34A; color: #FFF; border-radius: 50%; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; font-size: 12px; }

@media (max-width: 1024px) {
    .ms-academics-layout { grid-template-columns: 1fr; }
    .ms-semester-rail { position: static; }
}

/* =============================================================
   ACADEMICS MODULE
   ============================================================= */
.ac-page { padding: 24px 32px 80px; }
.ac-page-header { margin-bottom: 20px; }
.ac-page-title { font-size: 24px; font-weight: 700; margin: 0 0 6px; color: #1A1A1A; }
.ac-breadcrumb { font-size: 13px; color: #6B7280; }
.ac-breadcrumb a { color: #6B7280; text-decoration: none; cursor: pointer; }
.ac-breadcrumb a:hover { color: #3061FF; }
.ac-sep { margin: 0 8px; color: #9CA3AF; }
.ac-current { color: #1A1A1A; font-weight: 500; }

.ac-card { background: #FFF; border: 1px solid #E6E6E8; border-radius: 12px; padding: 20px; }
.ac-card-header { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.ac-card-title { font-size: 16px; font-weight: 700; margin: 0; color: #1A1A1A; }

.ac-semester-wrap { display: inline-flex; align-items: center; gap: 10px; }
.ac-semester-select { height: 36px; padding: 0 32px 0 14px; border: 1px solid #E6E6E8; border-radius: 999px; font-size: 13px; font-family: inherit; background: #FFF; cursor: pointer; color: #1A1A1A; font-weight: 500; }
.ac-semester-select:focus { border-color: #6366F1; outline: none; }
.ac-current-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border: 1px solid #DC2626; border-radius: 999px; background: #FFF; color: #DC2626; font-size: 11px; font-weight: 600; }
.ac-current-dot { width: 6px; height: 6px; border-radius: 50%; background: #DC2626; }

.ac-course-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }

.ac-course-card { background: #FFF; border: 1px solid #E6E6E8; border-radius: 14px; overflow: hidden; cursor: pointer; transition: transform .15s, box-shadow .15s; display: flex; flex-direction: column; }
.ac-course-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.06); }

.ac-banner { height: 120px; display: flex; align-items: center; justify-content: center; gap: 14px; }
.ac-banner-theory    { background: linear-gradient(135deg, #bbf7d0 0%, #86efac 100%); }
.ac-banner-practical { background: linear-gradient(135deg, #ddd6fe 0%, #c4b5fd 100%); }
.ac-art-emoji { font-size: 38px; line-height: 1; }
.ac-art-emoji-sm { font-size: 22px; opacity: .85; }

.ac-card-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 6px; }
.ac-course-name { font-size: 15px; font-weight: 700; margin: 0; color: #1A1A1A; line-height: 1.3; }
.ac-course-sub { font-size: 12px; color: #6B7280; margin: 0 0 6px; }
.ac-meta-row { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #6B7280; margin: 0; }

.ac-badge-row { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.ac-badge-mandatory, .ac-badge-elective { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: #FFF; font-size: 11px; font-weight: 600; }
.ac-badge-mandatory { border: 1px solid #DC2626; color: #DC2626; }
.ac-badge-elective  { border: 1px solid #2563EB; color: #2563EB; }
.ac-dot-red  { width: 6px; height: 6px; border-radius: 50%; background: #DC2626; display: inline-block; }
.ac-dot-blue { width: 6px; height: 6px; border-radius: 50%; background: #2563EB; display: inline-block; }
.ac-badge-type { padding: 4px 10px; border-radius: 999px; background: #DBEAFE; color: #2563EB; font-size: 11px; font-weight: 600; }

/* =============================================================
   THESIS MANAGEMENT MODULE
   ============================================================= */
.th-page { padding: 24px 32px 80px; }
.th-page-header { margin-bottom: 20px; }
.th-page-title { font-size: 22px; font-weight: 700; margin: 0 0 4px; color: #1A1A1A; }
.th-page-sub { font-size: 13px; color: #6B7280; margin: 0; }
.th-breadcrumb { font-size: 13px; color: #6B7280; }
.th-breadcrumb a { color: #6B7280; text-decoration: none; cursor: pointer; }
.th-breadcrumb a:hover { color: #3061FF; }
.th-sep { margin: 0 8px; color: #9CA3AF; }
.th-current { color: #1A1A1A; font-weight: 500; }

.th-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.th-search-wrap { position: relative; flex: 1; max-width: 480px; min-width: 240px; }
.th-search-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: #6B7280; font-size: 14px; }
.th-search-input { width: 100%; height: 38px; padding: 0 40px 0 36px; border: 1px solid #E6E6E8; border-radius: 8px; background: #FFF; font-size: 14px; font-family: inherit; outline: none; }
.th-search-input:focus { border-color: #3061FF; }
.th-mic-btn { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); background: transparent; border: none; cursor: pointer; font-size: 16px; }
.th-toolbar-right { display: flex; gap: 10px; flex-wrap: wrap; }
.th-select { height: 38px; padding: 0 32px 0 14px; border: 1px solid #E6E6E8; border-radius: 8px; background: #FFF; font-size: 13px; font-family: inherit; cursor: pointer; }

.th-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
.th-thesis-card { background: #FFF; border: 1px solid #E6E6E8; border-radius: 12px; padding: 20px; cursor: pointer; transition: transform .15s, box-shadow .15s; display: flex; flex-direction: column; gap: 14px; }
.th-thesis-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.06); }
.th-card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.th-thesis-title { font-size: 16px; font-weight: 700; margin: 0; color: #1A1A1A; }
.th-domain { font-size: 12px; color: #6B7280; margin: 4px 0 0; }
.th-status-me { background: #FEF3C7; color: #B45309; padding: 4px 12px; border-radius: 999px; font-size: 11px; font-weight: 700; white-space: nowrap; flex-shrink: 0; }
.th-status-student { background: #DBEAFE; color: #1D4ED8; padding: 4px 12px; border-radius: 999px; font-size: 11px; font-weight: 700; white-space: nowrap; flex-shrink: 0; }
.th-student-row { display: flex; align-items: center; gap: 12px; }
.th-student-avatar { width: 36px; height: 36px; border-radius: 50%; background: #EAEFFF; color: #3061FF; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; flex-shrink: 0; }
.th-student-name { font-size: 14px; font-weight: 600; margin: 0; color: #1A1A1A; }
.th-student-meta { font-size: 11px; color: #6B7280; margin: 2px 0 0; }
.th-phase-row { display: flex; gap: 8px; align-items: center; padding-top: 12px; border-top: 1px solid #E6E6E8; font-size: 13px; }
.th-phase-label { color: #6B7280; }
.th-phase-value { color: #1A1A1A; font-weight: 600; }

/* Detail layout */
.th-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; }
.th-main-col { min-width: 0; }
.th-card { background: #FFF; border: 1px solid #E6E6E8; border-radius: 12px; padding: 20px; }
.th-card-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; }
.th-card-title { font-size: 16px; font-weight: 700; margin: 0; }
.th-card-sub { font-size: 12px; color: #6B7280; margin: 4px 0 0; }

.th-btn { height: 36px; padding: 0 16px; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit; border: 1px solid transparent; display: inline-flex; align-items: center; gap: 6px; }
.th-btn-primary { background: #3061FF; color: #FFF; border-color: #3061FF; }
.th-btn-outline { background: #FFF; color: #3061FF; border-color: #3061FF; }
.th-btn-success { background: #16A34A; color: #FFF; border-color: #16A34A; }
.th-btn-danger { background: #FFF; color: #EF4444; border-color: #EF4444; }
.th-btn-purple { background: #8B5CF6; color: #FFF; border-color: #8B5CF6; }
.th-btn-link { background: transparent; color: #3061FF; border: none; padding: 0 6px; }
.th-btn-block { width: 100%; justify-content: center; }
.th-btn-sm { height: 30px; padding: 0 12px; font-size: 12px; }
.th-btn:hover { filter: brightness(1.05); }
.th-btn:disabled { opacity: .5; cursor: not-allowed; }
.th-icon-btn { background: transparent; border: 1px solid #E6E6E8; width: 30px; height: 30px; border-radius: 6px; cursor: pointer; color: #6B7280; display: inline-flex; align-items: center; justify-content: center; }
.th-icon-btn:hover { color: #3061FF; border-color: #3061FF; }
.th-link { color: #3061FF; font-size: 13px; text-decoration: none; font-weight: 500; cursor: pointer; }

/* Stepper */
.th-stepper { display: flex; align-items: center; gap: 0; padding: 16px 0 24px; overflow-x: auto; }
.th-phase-node { display: flex; align-items: center; flex-shrink: 0; cursor: pointer; }
.th-phase-card { min-width: 180px; padding: 10px 14px; border-radius: 10px; border: 2px dashed #E6E6E8; background: #FFF; transition: border-color .15s; }
.th-phase-node:hover .th-phase-card { border-color: #3061FF; }
.th-phase-node.th-done .th-phase-card { border: 2px dashed #16A34A; }
.th-phase-node.th-active .th-phase-card { border: 2px solid #3061FF; background: #EAEFFF; }
.th-phase-node.th-locked .th-phase-card { border: 2px dashed #D1D5DB; opacity: .65; cursor: not-allowed; }
.th-phase-meta { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 4px; }
.th-phase-num { font-size: 11px; color: #6B7280; font-weight: 700; }
.th-phase-name { font-size: 13px; font-weight: 600; margin: 0; color: #1A1A1A; }
.th-phase-connector { width: 24px; height: 2px; background: #E6E6E8; }
.th-phase-node.th-done + .th-phase-node .th-phase-connector { background: #16A34A; }
.th-status-completed { background: #DCFCE7; color: #16A34A; padding: 2px 8px; border-radius: 999px; font-size: 10px; font-weight: 700; }
.th-status-notstarted { background: #DBEAFE; color: #2563EB; padding: 2px 8px; border-radius: 999px; font-size: 10px; font-weight: 700; }
.th-status-inprogress { background: #FEF3C7; color: #F59E0B; padding: 2px 8px; border-radius: 999px; font-size: 10px; font-weight: 700; }
.th-status-locked { background: #F3F4F6; color: #6B7280; padding: 2px 8px; border-radius: 999px; font-size: 10px; font-weight: 700; }

/* Section heads */
.th-section-title { font-size: 16px; font-weight: 700; margin: 0 0 6px; color: #1A1A1A; }
.th-section-sub { font-size: 13px; color: #6B7280; margin: 0 0 16px; }
.th-subsection-title { font-size: 14px; font-weight: 700; margin: 18px 0 12px; }

/* Phase content blocks */
.th-elig-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.th-elig-item { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; background: #DCFCE7; border: 1px solid #BBF7D0; border-radius: 10px; }
.th-elig-check { width: 22px; height: 22px; border-radius: 50%; background: #16A34A; color: #FFF; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; flex-shrink: 0; }
.th-elig-title { font-size: 14px; font-weight: 600; margin: 0; }
.th-elig-meta { font-size: 12px; color: #6B7280; margin: 4px 0 0; }

.th-block-card { background: #FFF; border: 1px solid #E6E6E8; border-radius: 10px; padding: 16px 18px; margin-bottom: 14px; }
.th-block-header { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.th-block-title { font-size: 14px; font-weight: 700; margin: 0; }
.th-block-sub { font-size: 12px; color: #6B7280; margin: 4px 0 12px; }
.th-block-meta { display: flex; flex-direction: column; gap: 8px; margin: 12px 0; }
.th-block-meta > div { display: flex; flex-direction: column; gap: 2px; }
.th-block-actions { display: flex; gap: 12px; align-items: center; }
.th-bm-label { font-size: 11px; color: #6B7280; }
.th-bm-val { font-size: 13px; font-weight: 500; }

.th-sig-status-row { display: flex; flex-direction: column; gap: 10px; }
.th-sig-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid #E6E6E8; font-size: 13px; }
.th-sig-row:last-child { border-bottom: none; }
.th-sig-pending { background: #FEF3C7; color: #F59E0B; padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 600; }
.th-sig-signed { background: #DCFCE7; color: #16A34A; padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 600; }
.th-sig-revision { background: #FED7AA; color: #C2410C; padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 600; }

.th-rd-row { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.th-rd-label { font-size: 11px; color: #6B7280; }
.th-rd-value { font-size: 13px; font-weight: 500; }
.th-kw-row { display: flex; gap: 6px; flex-wrap: wrap; }
.th-kw-chip { background: #EAEFFF; color: #3061FF; padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 600; }
.th-file-chip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border: 1px solid #E6E6E8; border-radius: 6px; font-size: 12px; }
.th-file-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid #E6E6E8; border-radius: 8px; margin-top: 8px; flex-wrap: wrap; font-size: 13px; }
.th-file-meta { color: #6B7280; font-size: 12px; }

.th-pill { padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 600; }
.th-pill-good { background: #DCFCE7; color: #16A34A; }
.th-pill-info { background: #DBEAFE; color: #1D4ED8; border: 1px solid #1D4ED8; }
.th-pill-warn { background: #FEF3C7; color: #F59E0B; }
.th-pill-sm { padding: 2px 8px; font-size: 10px; }

.th-banner { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-radius: 10px; margin-bottom: 14px; }
.th-banner-icon { font-size: 20px; flex-shrink: 0; }
.th-banner-title { font-size: 14px; font-weight: 700; margin: 0; }
.th-banner-text { font-size: 12px; color: #6B7280; margin: 4px 0 0; }
.th-banner-pending { background: #DBEAFE; border-left: 4px solid #2563EB; }
.th-banner-good { background: #DCFCE7; border-left: 4px solid #16A34A; }
.th-banner-warn { background: #FEF3C7; border-left: 4px solid #F59E0B; }
.th-banner > button { margin-left: auto; }

.th-callout-warn { background: #FEF3C7; border-left: 4px solid #F59E0B; border-radius: 8px; padding: 14px 18px; margin-bottom: 14px; }
.th-callout-title { font-size: 13px; font-weight: 700; color: #F59E0B; margin: 0 0 6px; }
.th-callout-text { font-size: 13px; margin: 0; }
.th-callout-list { margin: 8px 0 0; padding-left: 18px; font-size: 12px; color: #6B7280; }

.th-panel-title { font-size: 13px; font-weight: 700; margin: 14px 0 10px; }
.th-panel-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.th-panel-item { display: flex; align-items: center; gap: 10px; padding: 8px; border: 1px solid #E6E6E8; border-radius: 8px; }
.th-panel-avatar { width: 36px; height: 36px; border-radius: 50%; background: #EAEFFF; color: #3061FF; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; }
.th-panel-avatar-tbd { background: #F3F4F6; color: #6B7280; }
.th-panel-name { font-size: 13px; font-weight: 600; margin: 0; }
.th-panel-role { font-size: 11px; color: #6B7280; margin: 2px 0 0; }

.th-docs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; margin-top: 10px; }
.th-doc-card { border: 1px solid #E6E6E8; border-radius: 8px; padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; position: relative; }
.th-doc-name { font-size: 13px; font-weight: 600; margin: 0; padding-right: 36px; }
.th-doc-meta { font-size: 11px; color: #6B7280; margin: 0; }

/* Milestone setup */
.th-setup-header { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 16px; flex-wrap: wrap; }
.th-setup-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.th-empty-state { padding: 40px 20px; text-align: center; }
.th-empty-illus { font-size: 36px; margin-bottom: 12px; }
.th-empty-title { font-size: 14px; font-weight: 600; margin: 8px 0 4px; }
.th-empty-sub { font-size: 12px; color: #6B7280; margin: 0 0 16px; }
.th-empty-actions { display: inline-flex; gap: 10px; }

.th-draft-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.th-draft-card { display: flex; gap: 10px; padding: 14px 16px; border: 1px solid #E6E6E8; border-radius: 10px; align-items: flex-start; }
.th-drag-handle { color: #6B7280; font-size: 16px; cursor: grab; padding-top: 4px; }
.th-dm-body { flex: 1; display: flex; flex-direction: column; gap: 10px; }
.th-dm-field label { font-size: 11px; color: #6B7280; font-weight: 500; }
.th-dm-field input, .th-dm-field textarea { padding: 8px 12px; border: 1px solid #E6E6E8; border-radius: 6px; font-size: 13px; font-family: inherit; outline: none; width: 100%; box-sizing: border-box; }
.th-dm-field textarea { min-height: 60px; resize: vertical; }

.th-progress-counter { font-size: 12px; color: #6B7280; font-weight: 600; }
.th-progress-bar { background: #E6E6E8; border-radius: 999px; height: 8px; overflow: hidden; margin: 8px 0 16px; }
.th-progress-fill { background: #16A34A; height: 100%; transition: width .3s; }
.th-milestone-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.th-milestone-row { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; border: 1px solid #E6E6E8; border-radius: 10px; cursor: pointer; }
.th-milestone-row:hover { border-color: #3061FF; }
.th-ms-name { font-size: 14px; font-weight: 600; margin: 0; }
.th-ms-desc { font-size: 12px; color: #6B7280; margin: 4px 0 0; }
.th-ms-right { display: flex; align-items: center; gap: 12px; }
.th-chevron { color: #6B7280; font-size: 18px; }
.th-ms-not-start { background: #F3F4F6; color: #6B7280; padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 600; }
.th-ms-in-progress { background: #FEF3C7; color: #F59E0B; padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 600; }
.th-ms-approved { background: #DCFCE7; color: #16A34A; padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 600; }

/* Right rail */
.th-rail { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.th-rail-card { background: #FFF; border: 1px solid #E6E6E8; border-radius: 12px; padding: 18px; }
.th-rail-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.th-rail-title { font-size: 14px; font-weight: 700; margin: 0; }
.th-rail-student { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid #E6E6E8; }
.th-rail-avatar { width: 36px; height: 36px; border-radius: 50%; background: #EAEFFF; color: #3061FF; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; flex-shrink: 0; }
.th-rail-name { font-size: 13px; font-weight: 600; margin: 0; }
.th-rail-meta { font-size: 11px; color: #6B7280; margin: 2px 0 0; }
.th-rail-date-row { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; }
.th-rail-date { font-size: 13px; font-weight: 600; }
.th-rail-date-actions { display: flex; gap: 6px; }
.th-rail-agenda { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.th-agenda-item { display: flex; gap: 10px; padding: 10px 0; border-bottom: 1px solid #E6E6E8; }
.th-agenda-item:last-child { border-bottom: none; }
.th-agenda-time { font-size: 11px; color: #6B7280; width: 50px; flex-shrink: 0; padding-top: 2px; }
.th-agenda-body { flex: 1; min-width: 0; }
.th-agenda-title { font-size: 13px; font-weight: 600; margin: 0; }
.th-agenda-with { font-size: 11px; color: #6B7280; margin: 2px 0 0; }
.th-agenda-window { font-size: 11px; color: #6B7280; margin: 2px 0 0; }
.th-agenda-completed { background: #DCFCE7; color: #16A34A; padding: 3px 8px; border-radius: 999px; font-size: 10px; font-weight: 600; height: fit-content; white-space: nowrap; }
.th-agenda-now { background: #FEE2E2; color: #EF4444; padding: 3px 8px; border-radius: 999px; font-size: 10px; font-weight: 600; height: fit-content; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.th-agenda-now::before { content: ''; width: 4px; height: 4px; border-radius: 50%; background: #EF4444; }
.th-agenda-request { background: #DBEAFE; color: #2563EB; padding: 3px 8px; border-radius: 999px; font-size: 10px; font-weight: 600; height: fit-content; white-space: nowrap; }
.th-rail-empty { text-align: center; padding: 16px 0; }

/* Modals */
.th-modal-overlay { position: fixed; inset: 0; background: rgba(17,24,39,.45); display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 20px; }
.th-modal { background: #FFF; border-radius: 12px; padding: 24px; width: 100%; max-width: 480px; max-height: 90vh; overflow-y: auto; box-shadow: 0 20px 60px rgba(0,0,0,.2); }
.th-modal-xl { max-width: 1100px; padding: 20px; }
.th-modal-title { font-size: 17px; font-weight: 700; margin: 0 0 14px; }
.th-modal-title.th-center { text-align: center; }
.th-modal-sub { font-size: 13px; color: #6B7280; margin: 0 0 16px; }
.th-modal-sub.th-center { text-align: center; }
.th-field { margin-bottom: 14px; display: flex; flex-direction: column; gap: 6px; }
.th-field label { font-size: 12px; color: #6B7280; font-weight: 500; }
.th-field input, .th-field textarea, .th-field select { padding: 0 12px; height: 38px; border: 1px solid #E6E6E8; border-radius: 8px; font-size: 14px; font-family: inherit; outline: none; }
.th-field textarea { height: auto; min-height: 90px; padding: 10px 12px; resize: vertical; }
.th-modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 12px; }
.th-modal-actions.th-center { justify-content: center; }
.th-success-icon { width: 56px; height: 56px; border-radius: 50%; background: #16A34A; color: #FFF; display: flex; align-items: center; justify-content: center; font-size: 28px; margin: 4px auto 12px; }

.th-esign-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; max-height: 70vh; }
.th-pdf-pane { background: #F9FAFB; border-radius: 8px; padding: 12px; overflow-y: auto; }
.th-pdf-mock { height: 400px; background: repeating-linear-gradient(0deg, #fff, #fff 20px, #f3f4f6 20px, #f3f4f6 21px); border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 14px; color: #6B7280; }
.th-esign-side { display: flex; flex-direction: column; gap: 10px; }
.th-esign-side h4 { font-size: 14px; font-weight: 700; margin: 0 0 6px; }
.th-esign-cta { font-size: 13px; margin: 12px 0 0; }
.th-esign-actions { display: flex; gap: 10px; margin-top: auto; }
.th-esign-actions .th-btn { flex: 1; justify-content: center; }
.th-accepted-strip { background: #DCFCE7; color: #16A34A; padding: 8px 12px; border-radius: 6px; font-size: 12px; font-weight: 600; }
.th-esign-label { font-size: 13px; font-weight: 600; margin: 8px 0 4px; }
.th-esign-note { font-size: 11px; color: #6B7280; margin: 0 0 8px; }
.th-radio-row { display: flex; align-items: center; gap: 8px; font-size: 13px; padding: 6px 0; cursor: pointer; }
.th-font-radios { display: flex; flex-direction: column; gap: 6px; }
.th-sig-canvas { border: 1px dashed #E6E6E8; height: 100px; border-radius: 6px; background: #FAFBFC; }

/* Doc review overlay */
.th-doc-overlay { position: fixed; inset: 0; background: #F6F8FB; z-index: 1100; display: flex; flex-direction: column; }
.th-doc-header { display: flex; justify-content: space-between; align-items: center; padding: 14px 20px; background: #FFF; border-bottom: 1px solid #E6E6E8; }
.th-doc-crumb { font-size: 11px; color: #6B7280; margin: 0; }
.th-doc-title { font-size: 16px; font-weight: 700; margin: 4px 0 0; }
.th-doc-actions { display: flex; gap: 10px; align-items: center; }
.th-doc-body { display: grid; grid-template-columns: 100px minmax(0, 1fr) 320px; gap: 0; flex: 1; min-height: 0; }
.th-pdf-thumbs { background: #F9FAFB; border-right: 1px solid #E6E6E8; padding: 12px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; }
.th-pdf-thumb { width: 76px; height: 100px; background: #FFF; border: 1px solid #E6E6E8; border-radius: 4px; display: flex; align-items: center; justify-content: center; font-size: 11px; color: #6B7280; }
.th-pdf-viewer { display: flex; flex-direction: column; background: #FFF; min-width: 0; }
.th-pdf-toolbar { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; border-bottom: 1px solid #E6E6E8; font-size: 13px; }
.th-pdf-tools { display: flex; gap: 6px; align-items: center; }
.th-pdf-canvas { flex: 1; overflow-y: auto; padding: 20px; background: #E5E7EB; display: flex; justify-content: center; }
.th-pdf-page { width: 100%; max-width: 600px; background: #FFF; aspect-ratio: 1 / 1.414; box-shadow: 0 4px 20px rgba(0,0,0,.08); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 40px; }
.th-pdf-placeholder { font-size: 14px; color: #6B7280; margin: 0; }
.th-pdf-placeholder-sub { font-size: 12px; color: #6B7280; margin: 0; opacity: .7; text-align: center; }
.th-pdf-decision { display: flex; justify-content: space-between; align-items: center; padding: 14px 20px; border-top: 1px solid #E6E6E8; background: #FFF; }
.th-pdf-decision-label { font-size: 13px; font-weight: 600; }
.th-pdf-decision-actions { display: flex; gap: 10px; }
.th-comments-rail { background: #FFF; border-left: 1px solid #E6E6E8; padding: 16px; overflow-y: auto; }
.th-comments-rail h4 { font-size: 14px; font-weight: 700; margin: 0 0 12px; }
.th-comments-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.th-comment-item { padding: 12px; background: #F9FAFB; border-radius: 8px; }
.th-comment-author { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.th-comment-avatar { width: 24px; height: 24px; border-radius: 50%; background: #EAEFFF; color: #3061FF; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; }
.th-comment-name { font-size: 12px; font-weight: 600; }
.th-comment-time { font-size: 11px; color: #6B7280; margin-left: auto; }
.th-comment-text { font-size: 12px; margin: 6px 0; line-height: 1.5; }
.th-selection-pill { background: #EAEFFF; color: #3061FF; padding: 3px 8px; border-radius: 4px; font-size: 11px; display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.th-toast { position: fixed; top: 20px; right: 20px; background: #FFF; border: 1px solid #16A34A; color: #16A34A; padding: 12px 18px; border-radius: 8px; box-shadow: 0 6px 20px rgba(0,0,0,.08); font-size: 13px; font-weight: 600; z-index: 2000; display: flex; align-items: center; gap: 10px; }
.th-toast-check { background: #16A34A; color: #FFF; border-radius: 50%; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; font-size: 12px; }

@media (max-width: 1100px) {
    .th-layout { grid-template-columns: 1fr; }
    .th-esign-layout { grid-template-columns: 1fr; }
    .th-doc-body { grid-template-columns: 1fr; }
    .th-pdf-thumbs, .th-comments-rail { display: none; }
}

/* Thesis updates: eSign verify text + checkbox row, selection link */
.th-esign-verify-text { font-size: 12px; color: #6B7280; margin: 6px 0 8px; line-height: 1.5; }
.th-checkbox-row { display: flex; gap: 10px; align-items: flex-start; font-size: 11px; color: #6B7280; cursor: pointer; margin: 4px 0 12px; }
.th-checkbox-row input { accent-color: #3061FF; margin-top: 2px; }
.th-selection-link { display: inline-block; margin: 0 0 12px; font-weight: 600; }

/* ===========================================================
   EXAMS MODULE
   =========================================================== */
.ex-page { padding: 24px 32px 80px; }
.ex-page-header { margin-bottom: 20px; }
.ex-page-title { font-size: 24px; font-weight: 700; margin: 0 0 6px; color: #1A1A1A; }
.ex-breadcrumb { font-size: 13px; color: #6B7280; }
.ex-breadcrumb a { color: #6B7280; text-decoration: none; cursor: pointer; }
.ex-breadcrumb a:hover { color: #3061FF; }
.ex-sep { margin: 0 8px; color: #9CA3AF; }
.ex-current { color: #1A1A1A; font-weight: 500; }
.ex-placeholder { font-size: 13px; color: #6B7280; }
.ex-placeholder code { background: #F3F4F6; padding: 2px 6px; border-radius: 4px; font-family: ui-monospace, monospace; }

.ex-grid {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: 16px;
    align-items: stretch;
}
.ex-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; align-self: stretch; }
.ex-card-action { padding: 26px 28px; cursor: pointer; transition: transform .15s, filter .15s, box-shadow .15s; color: #FFF; border: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; flex: 1; min-height: 130px; box-shadow: 0 4px 14px rgba(48, 97, 255, .15); }
.ex-card-action:hover { transform: translateY(-2px); filter: brightness(1.05); box-shadow: 0 6px 22px rgba(48, 97, 255, .25); }
.ex-card.ex-card-paper { background: #3061FF; border: none; }
.ex-card.ex-card-invig { background: #172E7D; border: none; }
.ex-card.ex-card-eval  { background: #4F7FFF; border: none; }
.ex-card-action .ex-action-arrow { font-size: 28px; opacity: .9; }
.ex-card-action .ex-action-title { font-size: 17px; font-weight: 700; margin: 0 0 6px; color: #FFF; }
.ex-card-action .ex-action-sub { font-size: 12px; opacity: .85; margin: 0; line-height: 1.4; }
.ex-card-action .ex-action-count-inline { color: rgba(255,255,255,.95); font-weight: 500; }

.ex-card { background: #FFF; border: 1px solid #E6E6E8; border-radius: 12px; padding: 20px; }
.ex-card-header { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.ex-card-title { font-size: 16px; font-weight: 700; margin: 0; }
.ex-card-sub { font-size: 12px; color: #6B7280; margin: 2px 0 0; }
.ex-card-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.ex-count { color: #6B7280; font-weight: 600; }

.ex-card-action:hover { transform: translateY(-2px); filter: brightness(1.05); }
.ex-action-count { font-size: 24px; font-weight: 700; opacity: .9; display: block; margin-bottom: 4px; }
.ex-action-title { font-size: 15px; font-weight: 600; margin: 0 0 4px; color: #FFF; }
.ex-action-sub { font-size: 12px; opacity: .8; margin: 0; }
.ex-action-arrow { font-size: 24px; }

.ex-calendar { background: #F9FAFB; border-radius: 10px; padding: 14px 16px; margin-bottom: 16px; }
.ex-cal-month { text-align: center; font-size: 13px; font-weight: 600; margin: 0 0 8px; }
.ex-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.ex-cal-wd { font-size: 10px; color: #6B7280; font-weight: 600; text-align: center; }
.ex-cal-day { font-size: 12px; text-align: center; padding: 6px 0; border-radius: 6px; }
.ex-cal-day.ex-today { background: #3061FF; color: #FFF; font-weight: 700; }
.ex-cal-day.ex-busy { background: #EAEFFF; color: #3061FF; font-weight: 600; }
.ex-cal-day.ex-empty { color: transparent; }

.ex-sched-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ex-sched-item { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 14px 16px; border: 1px solid #E6E6E8; border-radius: 10px; }
.ex-sched-title { font-size: 14px; font-weight: 600; margin: 0; }
.ex-sched-meta, .ex-sched-time, .ex-sched-loc { font-size: 12px; color: #6B7280; margin: 4px 0 0; }

.ex-pill { padding: 4px 12px; border-radius: 999px; font-size: 11px; font-weight: 600; white-space: nowrap; }
.ex-pill-invig { background: #EDE9FE; color: #6D28D9; }
.ex-pill-paper { background: #FCE7F3; color: #BE185D; }
.ex-pill-eval  { background: #DCFCE7; color: #16A34A; }
.ex-pill-warn  { background: #FEF3C7; color: #F59E0B; }

.ex-filter, .ex-select { height: 30px; padding: 0 28px 0 10px; border: 1px solid #E6E6E8; border-radius: 6px; font-size: 12px; background: #FFF; cursor: pointer; font-family: inherit; }

.ex-att-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.ex-att-item { border: 1px solid #E6E6E8; border-radius: 10px; padding: 14px 16px; }
.ex-att-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 6px; }
.ex-att-title { font-size: 13px; font-weight: 600; margin: 0; }
.ex-att-meta, .ex-att-due { font-size: 11px; color: #6B7280; margin: 4px 0; }

.ex-btn { height: 32px; padding: 0 14px; border-radius: 6px; font-size: 12px; font-weight: 600; cursor: pointer; font-family: inherit; border: 1px solid transparent; }
.ex-btn-primary { background: #3061FF; color: #FFF; border-color: #3061FF; }
.ex-btn-outline { background: #FFF; color: #3061FF; border-color: #3061FF; }
.ex-btn-sm { height: 28px; padding: 0 12px; font-size: 11px; }
.ex-btn:hover { filter: brightness(1.05); }
.ex-btn-link { background: transparent; color: #3061FF; border: none; padding: 0; font-size: 12px; font-weight: 600; cursor: pointer; font-family: inherit; }

.ex-bar-chart { display: flex; align-items: flex-end; gap: 12px; height: 160px; padding: 16px 4px 4px; border-bottom: 1px solid #E6E6E8; }
.ex-card.ex-card-grades { display: flex; flex-direction: column; flex: 1; min-height: 280px; }
.ex-card.ex-card-grades .ex-bar-chart { flex: 1; height: auto; padding-top: 30px; }
.ex-bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; min-width: 0; }
.ex-bar { width: 100%; max-width: 28px; background: #3061FF; border-radius: 4px 4px 0 0; position: relative; }
.ex-bar-value { position: absolute; top: -18px; left: 50%; transform: translateX(-50%); font-size: 10px; font-weight: 600; }
.ex-bar-label { font-size: 10px; color: #6B7280; margin-top: 6px; }

.ex-up-date { font-size: 13px; font-weight: 600; margin: 0 0 12px; }
.ex-up-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ex-up-item { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 10px 12px; border: 1px solid #E6E6E8; border-radius: 8px; font-size: 12px; }
.ex-up-title { font-weight: 600; margin: 0; font-size: 13px; }
.ex-up-meta { color: #6B7280; margin: 2px 0 0; }
.ex-up-time { color: #6B7280; }
.ex-duration-pill { background: #EAEFFF; color: #3061FF; padding: 3px 8px; border-radius: 999px; font-size: 10px; font-weight: 600; }

@media (max-width: 1100px) {
    .ex-grid { grid-template-columns: 1fr; }
}

/* ===========================================================
   EXAMS MODULE — additional styles for full sub-views
   =========================================================== */

/* Dashboard calendar + schedule side-by-side */
.ex-cal-row { display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: 16px; align-items: start; }
.ex-cal-head { display: flex; justify-content: space-between; align-items: center; padding: 0 4px 8px; }
.ex-cal-nav { background: transparent; border: none; cursor: pointer; color: #6B7280; font-size: 14px; }

/* Inline count next to action title */
.ex-action-count-inline { color: rgba(255,255,255,.85); font-weight: 500; font-size: 13px; }
.ex-att-cta { width: 100%; margin-top: 8px; }

/* Filters row */
.ex-filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.ex-muted { color: #6B7280; }

/* Tables (shared) */
.ex-table-wrap { width: 100%; overflow-x: auto; padding-top: 8px; }
.ex-data-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.ex-data-table thead th { text-align: left; padding: 12px 14px; background: #F9FAFB; color: #6B7280; font-size: 12px; font-weight: 600; border-bottom: 1px solid #E6E6E8; white-space: nowrap; }
.ex-data-table tbody td { padding: 12px 14px; border-bottom: 1px solid #E6E6E8; }
.ex-data-table tbody tr:last-child td { border-bottom: none; }
.ex-data-table tbody tr:hover { background: #FAFBFC; }
.ex-strong { font-weight: 600; }

.ex-search-wrap { position: relative; }
.ex-search-icon { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); font-size: 12px; color: #6B7280; }
.ex-search-input { height: 32px; padding: 0 12px 0 30px; border: 1px solid #E6E6E8; border-radius: 6px; font-size: 12px; font-family: inherit; outline: none; min-width: 200px; }
.ex-search-input:focus { border-color: #3061FF; }

/* Status pills */
.ex-status-pending  { background: #FEF3C7; color: #B45309; padding: 4px 12px; border-radius: 999px; font-size: 11px; font-weight: 600; }
.ex-status-closed   { background: #F3F4F6; color: #6B7280; padding: 4px 12px; border-radius: 999px; font-size: 11px; font-weight: 600; }
.ex-status-completed{ background: #DCFCE7; color: #16A34A; padding: 4px 12px; border-radius: 999px; font-size: 11px; font-weight: 600; }
.ex-status-partial  { background: #F3F4F6; color: #6B7280; padding: 4px 12px; border-radius: 999px; font-size: 11px; font-weight: 600; }

/* Pagination */
.ex-pagination { display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding-top: 16px; margin-top: 12px; border-top: 1px solid #E6E6E8; font-size: 12px; color: #6B7280; }
.ex-rpp { height: 28px; padding: 0 22px 0 8px; border: 1px solid #E6E6E8; border-radius: 4px; font-size: 12px; font-family: inherit; background: #FFF; cursor: pointer; }
.ex-page-btn { width: 28px; height: 28px; background: #FFF; border: 1px solid #E6E6E8; border-radius: 4px; cursor: pointer; font-size: 14px; }

/* Invigilation detail */
.ex-meta-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.ex-meta-cell { display: flex; flex-direction: column; gap: 4px; }
.ex-meta-label { font-size: 11px; color: #6B7280; font-weight: 500; }
.ex-meta-value { font-size: 13px; font-weight: 600; }

.ex-subsection-title { font-size: 14px; font-weight: 700; margin: 20px 0 12px; }

.ex-form-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 12px; }
.ex-form-field { display: flex; flex-direction: column; gap: 6px; }
.ex-form-field label { font-size: 11px; color: #6B7280; font-weight: 500; }
.ex-form-field input, .ex-form-field select, .ex-form-field textarea { padding: 0 12px; height: 38px; border: 1px solid #E6E6E8; border-radius: 8px; font-size: 14px; font-family: inherit; outline: none; }
.ex-form-field textarea { height: auto; min-height: 80px; padding: 10px 12px; resize: vertical; }
.ex-form-field input:focus, .ex-form-field select:focus { border-color: #3061FF; }
.ex-form-field input:disabled, .ex-form-field select:disabled { background: #F9FAFB; color: #6B7280; }
.ex-form-field-wide { grid-column: span 2; }
.ex-upload-btn { height: 38px; padding: 0 14px; border: 1px dashed #E6E6E8; border-radius: 8px; background: #FFF; cursor: pointer; font-family: inherit; font-size: 13px; color: #6B7280; }
.ex-misconduct-row { display: grid; grid-template-columns: 1fr 1fr 2fr; gap: 14px; padding: 12px 0; border-bottom: 1px solid #E6E6E8; }
.ex-misconduct-row:last-of-type { border-bottom: none; }
.ex-form-footer { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; padding-top: 14px; border-top: 1px solid #E6E6E8; }

/* Question Paper list layout (main + rail) */
.ex-qp-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; }
.ex-qp-main { min-width: 0; }
.ex-qp-rail { min-width: 0; }

.ex-tabs { display: flex; gap: 4px; border-bottom: 1px solid #E6E6E8; margin-bottom: -1px; }
.ex-tab-btn { background: transparent; border: none; padding: 12px 16px; font-size: 13px; font-weight: 600; color: #6B7280; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; font-family: inherit; }
.ex-tab-active { color: #3061FF; border-bottom-color: #3061FF; }

.ex-qp-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; padding-top: 12px; }
.ex-qp-item { padding: 14px 16px; border: 1px solid #E6E6E8; border-radius: 10px; cursor: pointer; transition: border-color .15s; }
.ex-qp-item:hover { border-color: #3061FF; }
.ex-qp-title { font-size: 14px; font-weight: 600; margin: 0; color: #3061FF; }
.ex-qp-docs { color: #6B7280; font-weight: 400; font-size: 13px; }
.ex-qp-sub { font-size: 12px; color: #6B7280; margin: 4px 0 8px; }
.ex-qp-dates { display: flex; gap: 16px; font-size: 11px; color: #6B7280; }
.ex-rejection-row { margin-top: 10px; background: #FEE2E2; border-left: 3px solid #EF4444; border-radius: 4px; padding: 10px 14px; }
.ex-rejection-row strong { display: block; color: #EF4444; font-size: 12px; margin-bottom: 4px; }
.ex-rejection-row p { font-size: 12px; margin: 0; }

.ex-rail-card { background: #FFF; border: 1px solid #3061FF; border-radius: 12px; padding: 18px; }
.ex-rail-header { margin-bottom: 12px; }
.ex-rail-title { font-size: 14px; font-weight: 700; margin: 0; }
.ex-pending-item { padding: 12px 14px; border: 1px solid #E6E6E8; border-radius: 8px; margin-bottom: 10px; }
.ex-pending-item:last-child { margin-bottom: 0; }
.ex-pending-title { font-size: 13px; font-weight: 600; margin: 0; }
.ex-pending-meta { font-size: 11px; color: #6B7280; margin: 4px 0; }

/* Question paper detail */
.ex-meta-card { background: #FFF; border: 1px solid #E6E6E8; border-radius: 12px; padding: 20px; display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; margin-bottom: 16px; }
.ex-meta-left { min-width: 240px; }
.ex-meta-title { font-size: 14px; font-weight: 600; margin: 0; }
.ex-meta-sub { font-size: 12px; color: #6B7280; margin: 4px 0 0; }
.ex-meta-tiles { display: flex; gap: 12px; }
.ex-meta-tile { border: 1px solid #E6E6E8; border-radius: 10px; padding: 10px 16px; display: flex; flex-direction: column; gap: 4px; }
.ex-more { color: #3061FF; font-weight: 600; margin-left: 6px; }

.ex-rejection-banner { background: #FEE2E2; border-left: 3px solid #EF4444; border-radius: 8px; padding: 12px 16px; margin-bottom: 14px; }
.ex-rejection-banner strong { display: block; color: #EF4444; font-size: 12px; margin-bottom: 4px; }
.ex-rejection-banner p { font-size: 13px; margin: 0; }

.ex-status-pill { padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 600; margin-left: 6px; }
.ex-pill-inreview { background: #FEF3C7; color: #B45309; }
.ex-pill-approved { background: #DCFCE7; color: #16A34A; }
.ex-pill-rejected { background: #FEE2E2; color: #EF4444; }
.ex-pill-alteration { background: #FED7AA; color: #C2410C; }

.ex-qp-accordion { border: 1px solid #E6E6E8; border-radius: 10px; margin-bottom: 12px; overflow: hidden; }
.ex-qp-acc-header { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; cursor: pointer; background: #FAFBFC; }
.ex-qp-acc-name { font-size: 14px; font-weight: 700; color: #3061FF; }
.ex-qp-acc-docs { font-size: 12px; color: #6B7280; margin-left: 8px; }
.ex-qp-acc-body { padding: 16px; border-top: 1px solid #E6E6E8; }
.ex-qp-section { margin-bottom: 16px; }
.ex-qp-section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.ex-qp-section-title { font-size: 13px; font-weight: 600; margin: 0; }

.ex-file-row { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border: 1px solid #E6E6E8; border-radius: 8px; }
.ex-file-icon { font-size: 18px; color: #EF4444; }
.ex-file-info { flex: 1; min-width: 0; }
.ex-file-name { font-size: 13px; font-weight: 500; margin: 0; }
.ex-file-meta { font-size: 11px; color: #6B7280; margin: 2px 0 0; }
.ex-trash { background: transparent; border: 1px solid #FEE2E2; color: #EF4444; width: 30px; height: 30px; border-radius: 6px; cursor: pointer; }
.ex-upload-btn-block { width: 100%; padding: 14px; border: 2px dashed #E6E6E8; border-radius: 8px; background: #FFF; cursor: pointer; font-family: inherit; font-size: 13px; color: #3061FF; font-weight: 600; }

.ex-admin-feedback { background: #FEF3C7; border-left: 3px solid #F59E0B; border-radius: 8px; padding: 10px 14px; margin: 8px 0; }
.ex-admin-feedback strong { display: block; color: #B45309; font-size: 12px; margin-bottom: 4px; }
.ex-admin-feedback p { font-size: 13px; margin: 0; }

/* Evaluation Requests tables */
.ex-evaluate-btn { background: #3061FF; color: #FFF; border: none; padding: 6px 18px; border-radius: 6px; font-size: 12px; font-weight: 600; cursor: pointer; }
.ex-evaluate-btn:hover { filter: brightness(1.05); }

/* Bundle */
.ex-due-pill { padding: 6px 12px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.ex-due-ok { background: #F3F4F6; color: #1A1A1A; }
.ex-due-late { background: #FEE2E2; color: #EF4444; }
.ex-bundle-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 0; flex-wrap: wrap; }
.ex-bundle-section { font-size: 14px; font-weight: 700; margin: 0; }
.ex-bundle-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.ex-bundle-state-toggle { display: flex; gap: 10px; align-items: center; margin-top: 14px; padding-top: 14px; border-top: 1px dashed #E6E6E8; font-size: 12px; color: #6B7280; }
.ex-bundle-state-toggle select { padding: 4px 8px; border: 1px solid #E6E6E8; border-radius: 4px; font-size: 12px; font-family: inherit; }

.ex-barcode { font-family: monospace; letter-spacing: -1px; }

/* Workspace */
.ex-ws-header { display: flex; justify-content: space-between; align-items: center; padding: 12px 24px; background: #FFF; border-bottom: 1px solid #E6E6E8; gap: 16px; flex-wrap: wrap; }
.ex-ws-title { font-size: 16px; font-weight: 700; margin: 0; }
.ex-ws-sub { font-size: 12px; color: #6B7280; margin: 2px 0 0; }
.ex-ws-header-right { display: flex; align-items: center; gap: 12px; }
.ex-view-toggle { display: flex; background: #F6F8FB; border: 1px solid #E6E6E8; border-radius: 6px; padding: 2px; gap: 2px; }
.ex-tg-btn { background: transparent; border: none; padding: 6px 10px; font-size: 12px; font-weight: 600; cursor: pointer; color: #6B7280; border-radius: 4px; font-family: inherit; }
.ex-tg-btn.ex-tg-active { background: #3061FF; color: #FFF; }
.ex-total-marks { font-size: 13px; font-weight: 600; padding: 6px 14px; background: #EAEFFF; color: #3061FF; border-radius: 999px; }
.ex-icon-btn { background: transparent; border: 1px solid #E6E6E8; width: 30px; height: 30px; border-radius: 6px; cursor: pointer; color: #6B7280; display: inline-flex; align-items: center; justify-content: center; }

.ex-three-col { display: grid; grid-template-columns: 80px minmax(0, 1fr) 360px; gap: 0; min-height: 600px; background: #FFF; }
.ex-markers-panel { background: #FFF; border-right: 1px solid #E6E6E8; padding: 16px 8px; display: flex; flex-direction: column; gap: 12px; align-items: center; }
.ex-panel-label { font-size: 12px; font-weight: 600; color: #6B7280; margin: 0 0 4px; }
.ex-marker-tool { width: 44px; height: 44px; border-radius: 8px; background: #FFF; border: 1px solid #E6E6E8; cursor: pointer; font-size: 18px; font-weight: 700; }
.ex-marker-tick { color: #16A34A; }
.ex-marker-cross { color: #EF4444; }
.ex-marker-counts { font-size: 12px; color: #6B7280; display: flex; flex-direction: column; gap: 4px; margin-top: auto; }

.ex-pdf-pane { background: #FFF; display: flex; flex-direction: column; }
.ex-pdf-toolbar { display: flex; justify-content: space-between; align-items: center; padding: 8px 16px; border-bottom: 1px solid #E6E6E8; font-size: 13px; }
.ex-pdf-tools { display: flex; align-items: center; gap: 6px; font-size: 12px; }
.ex-zoom { color: #6B7280; }
.ex-page-info { color: #6B7280; }
.ex-pdf-canvas { flex: 1; padding: 20px; background: #F1F5F9; overflow-y: auto; display: flex; justify-content: center; }
.ex-pdf-page { width: 100%; max-width: 600px; background: #FFF; padding: 28px 36px; box-shadow: 0 4px 20px rgba(0,0,0,.08); border-radius: 4px; }
.ex-pdf-conf { font-size: 11px; color: #6B7280; font-style: italic; margin: 0 0 16px; text-align: right; }
.ex-pdf-q { font-size: 14px; font-weight: 700; margin: 0 0 12px; display: flex; align-items: center; gap: 8px; }
.ex-pdf-tick { color: #16A34A; }
.ex-pdf-body { font-size: 13px; line-height: 1.6; margin: 0 0 12px; }
.ex-pdf-list { font-size: 13px; line-height: 1.8; margin: 0 0 12px; padding-left: 20px; }

.ex-grades-panel { background: #FFF; border-left: 1px solid #E6E6E8; padding: 16px; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; }
.ex-grades-header { display: flex; justify-content: space-between; align-items: center; }
.ex-annotate-btn { background: transparent; border: 1px solid #E6E6E8; padding: 5px 10px; border-radius: 6px; font-size: 11px; font-weight: 600; cursor: pointer; color: #6B7280; font-family: inherit; }
.ex-section-block { padding: 12px; background: #F9FAFB; border-radius: 8px; }
.ex-section-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.ex-section-title { font-size: 13px; font-weight: 700; margin: 0; }
.ex-section-total { font-size: 12px; color: #6B7280; font-weight: 600; }
.ex-section-rule { font-size: 11px; color: #6B7280; margin: 0 0 10px; }
.ex-q-row { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; }
.ex-q-row label { font-size: 12px; }
.ex-q-input { display: flex; align-items: center; gap: 4px; }
.ex-q-input input { width: 50px; height: 32px; padding: 0 8px; border: 1px solid #E6E6E8; border-radius: 6px; font-size: 13px; font-family: inherit; text-align: center; outline: none; }
.ex-q-input input:focus { border-color: #3061FF; }
.ex-q-input span { font-size: 12px; color: #6B7280; }
.ex-q-over .ex-q-input input { border-color: #EF4444; background: #FEE2E2; color: #EF4444; }
.ex-alert-callout { background: #FEE2E2; border-left: 3px solid #EF4444; border-radius: 6px; padding: 8px 12px; font-size: 11px; margin-bottom: 10px; }
.ex-alert-callout strong { color: #EF4444; }

/* Marks Grid view */
.ex-marks-grid { padding: 24px; background: #F6F8FB; min-height: 600px; }
.ex-info-note { background: #DBEAFE; border-left: 3px solid #2563EB; border-radius: 6px; padding: 8px 12px; font-size: 12px; margin-bottom: 12px; }
.ex-info-note strong { color: #2563EB; }
.ex-grid-table-wrap { overflow-x: auto; background: #FFF; border: 1px solid #E6E6E8; border-radius: 10px; }
.ex-grid-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.ex-grid-table thead th { background: #F9FAFB; color: #6B7280; padding: 10px; text-align: center; font-size: 11px; font-weight: 600; border: 1px solid #E6E6E8; }
.ex-grid-section-cell { background: #EAEFFF; color: #3061FF; }
.ex-grid-rule { font-size: 9px; font-weight: 400; margin: 2px 0 0; color: #6B7280; }
.ex-grid-table tbody td { padding: 8px; border: 1px solid #E6E6E8; text-align: center; }
.ex-grid-cell-wrap { position: relative; display: inline-flex; align-items: center; }
.ex-grid-cell-wrap input { width: 50px; height: 28px; padding: 0 6px; border: 1px solid #E6E6E8; border-radius: 4px; font-size: 12px; font-family: inherit; text-align: center; outline: none; }
.ex-grid-cell-wrap input:focus { border-color: #3061FF; }
.ex-cell-over input { border-color: #EF4444; background: #FEE2E2; color: #EF4444; }
.ex-cell-auto-tick { position: absolute; top: -6px; right: -10px; color: #16A34A; font-size: 12px; }
.ex-row-total { font-weight: 600; color: #3061FF; }

/* Modals (shared for exams) */
.ex-modal-overlay { position: fixed; inset: 0; background: rgba(17,24,39,.45); display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 20px; }
.ex-modal { background: #FFF; border-radius: 12px; padding: 24px; width: 100%; max-width: 460px; box-shadow: 0 20px 60px rgba(0,0,0,.2); }
.ex-modal-icon { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 22px; margin: 0 0 12px; }
.ex-modal-icon-warn { background: #FEE2E2; color: #EF4444; }
.ex-modal-title { font-size: 17px; font-weight: 700; margin: 0 0 8px; }
.ex-modal-title.ex-center { text-align: center; }
.ex-modal-sub { font-size: 13px; color: #6B7280; margin: 0 0 8px; line-height: 1.5; }
.ex-modal-sub-text { font-size: 12px; color: #6B7280; margin: 0 0 12px; }
.ex-modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 14px; }
.ex-modal-actions.ex-center { justify-content: center; }
.ex-upload-zone { border: 2px dashed #E6E6E8; border-radius: 8px; padding: 30px; text-align: center; cursor: pointer; margin-bottom: 12px; }
.ex-upload-zone p { margin: 0; font-size: 13px; color: #3061FF; }
.ex-upload-sub { color: #6B7280; font-size: 11px !important; margin-top: 4px !important; }
.ex-bullet-list { margin: 4px 0 12px; padding-left: 20px; font-size: 13px; }
.ex-bullet-list li { margin-bottom: 4px; }

.ex-success-overlay { position: fixed; inset: 0; background: rgba(17,24,39,.45); display: flex; align-items: center; justify-content: center; z-index: 1100; padding: 20px; }
.ex-success-modal { background: #FFF; border-radius: 12px; padding: 28px; width: 100%; max-width: 360px; text-align: center; box-shadow: 0 20px 60px rgba(0,0,0,.2); }
.ex-success-check { width: 56px; height: 56px; border-radius: 50%; background: #16A34A; color: #FFF; font-size: 28px; display: flex; align-items: center; justify-content: center; margin: 4px auto 14px; }
.ex-success-title { font-size: 17px; font-weight: 700; margin: 0 0 6px; }
.ex-success-sub { font-size: 13px; color: #6B7280; margin: 0; }

@media (max-width: 1100px) {
    .ex-cal-row { grid-template-columns: 1fr; }
    .ex-qp-layout { grid-template-columns: 1fr; }
    .ex-three-col { grid-template-columns: 1fr; }
    .ex-markers-panel, .ex-grades-panel { border: none; border-top: 1px solid #E6E6E8; }
}

/* Demo state selector (shared) */
.ex-demo-toggle { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: #FFF; border: 1px dashed #3061FF; border-radius: 8px; margin-bottom: 14px; font-size: 12px; color: #6B7280; }
.ex-demo-label { font-weight: 600; color: #3061FF; }
.ex-demo-toggle select { padding: 4px 10px; border: 1px solid #E6E6E8; border-radius: 4px; font-size: 12px; font-family: inherit; min-width: 280px; }

/* ===========================================================
   SERVICE & SUPPORT MODULE
   =========================================================== */
.ss-page { padding: 24px 28px; font-family: 'GeneralSansFont','Salesforce Sans',system-ui,sans-serif; color: #1A1A1A; }
.ss-header { margin-bottom: 16px; }
.ss-title { font-size: 22px; font-weight: 700; margin: 0 0 6px; }
.ss-breadcrumb { font-size: 13px; color: #6B7280; }
.ss-breadcrumb a { color: #3061FF; cursor: pointer; text-decoration: none; }
.ss-sep { margin: 0 8px; color: #BDBDBD; }
.ss-hero { background: linear-gradient(135deg,#EAEFFF 0%,#F8FAFF 100%); border: 1px solid #E6E6E8; border-radius: 14px; padding: 32px 28px; margin-bottom: 18px; }
.ss-hero h2 { font-size: 22px; margin: 0 0 18px; text-align: center; color: #1A1A1A; }
.ss-search-wrap { position: relative; max-width: 720px; margin: 0 auto; }
.ss-search { width: 100%; padding: 14px 50px 14px 44px; border-radius: 999px; border: 1px solid #E6E6E8; background: #FFF; font-size: 14px; font-family: inherit; outline: none; box-sizing: border-box; }
.ss-search:focus { border-color: #3061FF; box-shadow: 0 0 0 3px rgba(48,97,255,0.12); }
.ss-search-icon { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); font-size: 14px; color: #6B7280; }
.ss-mic { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); border: none; background: #3061FF; color: #FFF; width: 36px; height: 36px; border-radius: 50%; cursor: pointer; font-size: 14px; }
.ss-cards-row { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 18px; margin-bottom: 18px; }
.ss-faq-card { background: #FFF; border: 1px solid #E6E6E8; border-radius: 14px; padding: 20px 22px; }
.ss-faq-head h3 { font-size: 15px; margin: 0 0 14px; font-weight: 600; }
.ss-faq-list { list-style: none; padding: 0; margin: 0 0 12px; }
.ss-faq-cat { border-bottom: 1px solid #F0F2F5; padding: 10px 0; }
.ss-faq-cat:last-child { border-bottom: none; }
.ss-faq-cat-btn { width: 100%; display: flex; justify-content: space-between; align-items: center; background: none; border: none; padding: 4px 0; cursor: pointer; font-size: 13px; font-weight: 600; color: #1A1A1A; font-family: inherit; }
.ss-faq-caret { color: #3061FF; font-size: 16px; font-weight: 700; }
.ss-faq-questions { list-style: none; padding: 8px 0 0; margin: 0; }
.ss-faq-q { font-size: 12.5px; color: #6B7280; padding: 6px 0; cursor: pointer; }
.ss-faq-q:hover { color: #3061FF; }
.ss-link-btn { background: none; border: none; color: #3061FF; font-weight: 600; font-size: 13px; cursor: pointer; padding: 0; font-family: inherit; }
.ss-cta-card { background: #FFF; border: 1px solid #E6E6E8; border-radius: 14px; padding: 22px; display: flex; flex-direction: column; justify-content: space-between; cursor: pointer; min-height: 170px; transition: transform 0.15s, box-shadow 0.15s; }
.ss-cta-card:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(48,97,255,0.10); }
.ss-cta-blue { background: linear-gradient(135deg,#3061FF 0%,#4F7AFF 100%); color: #FFF; border-color: transparent; }
.ss-cta-blue h3 { color: #FFF; margin: 0 0 6px; font-size: 17px; }
.ss-cta-blue p { color: rgba(255,255,255,0.85); margin: 0; font-size: 13px; }
.ss-cta-light { background: #FFF5EF; border-color: #FFE2D1; }
.ss-cta-light h3 { margin: 0 0 6px; font-size: 17px; color: #1A1A1A; }
.ss-cta-light p { margin: 0; font-size: 13px; color: #6B7280; }
.ss-cta-arrow { align-self: flex-end; font-size: 22px; color: inherit; }
.ss-recent { background: #FFF; border: 1px solid #E6E6E8; border-radius: 14px; padding: 18px 22px; }
.ss-recent-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.ss-tabs { display: flex; gap: 24px; border-bottom: 1px solid #E6E6E8; flex: 1; }
.ss-tab { background: none; border: none; padding: 10px 2px; font-size: 14px; font-weight: 600; color: #6B7280; cursor: pointer; border-bottom: 2px solid transparent; font-family: inherit; margin-bottom: -1px; }
.ss-tab.is-active { color: #3061FF; border-bottom-color: #3061FF; }
.ss-view-all { background: none; border: none; color: #3061FF; font-size: 13px; font-weight: 600; cursor: pointer; padding: 6px 0; font-family: inherit; }
.ss-ticket-list { list-style: none; padding: 0; margin: 0; }
.ss-ticket-row { display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid #F0F2F5; cursor: pointer; }
.ss-ticket-row:last-child { border-bottom: none; }
.ss-ticket-row:hover { background: #F8FAFF; }
.ss-ticket-main { flex: 1; }
.ss-ticket-id { font-size: 12px; color: #6B7280; font-weight: 600; }
.ss-ticket-title { font-size: 14px; font-weight: 600; margin: 4px 0 2px; }
.ss-ticket-type { font-size: 12px; color: #6B7280; margin-bottom: 4px; }
.ss-ticket-desc { font-size: 13px; color: #444; margin-bottom: 6px; line-height: 1.45; }
.ss-attach-chip { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; background: #EAEFFF; border-radius: 999px; font-size: 12px; color: #3061FF; font-weight: 500; }
.ss-ticket-side { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; min-width: 180px; }
.ss-ticket-date { font-size: 11.5px; color: #6B7280; }
.ss-pill { display: inline-block; padding: 4px 12px; border-radius: 999px; font-size: 11.5px; font-weight: 600; }
.ss-pill-review { background: #FFF4D6; color: #B07A00; }
.ss-pill-closed { background: #E3F8E8; color: #2E7D32; }
.ss-pill-cancelled { background: #ECECEE; color: #6B7280; }
.ss-pill-rejected { background: #FDE2E2; color: #C0392B; }
.ss-feedback-btn { background: #3061FF; color: #FFF; border: none; padding: 6px 14px; border-radius: 6px; font-size: 12px; font-weight: 600; cursor: pointer; font-family: inherit; }
.ss-feedback-done { font-size: 12px; color: #3061FF; font-weight: 600; background: #EAEFFF; padding: 5px 12px; border-radius: 999px; }
.ss-empty { padding: 24px; text-align: center; color: #6B7280; font-size: 13px; }

/* Category picker (scp) */
.scp-header { margin-bottom: 20px; }
.scp-title { font-size: 22px; font-weight: 700; margin: 0 0 6px; }
.scp-breadcrumb { font-size: 13px; color: #6B7280; }
.scp-breadcrumb a { color: #3061FF; cursor: pointer; text-decoration: none; }
.scp-sep { margin: 0 8px; color: #BDBDBD; }
.scp-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 18px; }
.scp-tile { background: #FFF; border: 1px solid #E6E6E8; border-radius: 12px; padding: 22px 20px; cursor: pointer; transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s; }
.scp-tile:hover { transform: translateY(-3px); border-color: #3061FF; box-shadow: 0 8px 22px rgba(48,97,255,0.10); }
.scp-icon { width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 22px; margin-bottom: 14px; }
.scp-name { font-size: 15px; font-weight: 600; color: #3061FF; margin: 0 0 6px; line-height: 1.3; }
.scp-desc { font-size: 12.5px; color: #6B7280; margin: 0; line-height: 1.45; }
@media (max-width: 1100px) { .scp-grid { grid-template-columns: repeat(3,1fr); } }

/* Request form (srf) */
.srf-header { margin-bottom: 18px; }
.srf-title { font-size: 22px; font-weight: 700; margin: 0 0 6px; }
.srf-breadcrumb { font-size: 13px; color: #6B7280; }
.srf-breadcrumb a { color: #3061FF; cursor: pointer; text-decoration: none; }
.srf-sep { margin: 0 8px; color: #BDBDBD; }
.srf-shell { display: grid; grid-template-columns: 280px 1fr; gap: 18px; }
.srf-sub-nav { background: #FFF; border: 1px solid #E6E6E8; border-radius: 12px; padding: 18px 0; height: fit-content; }
.srf-sub-title { font-size: 14px; font-weight: 700; padding: 0 18px 12px; margin: 0; border-bottom: 1px solid #E6E6E8; }
.srf-sub-list { list-style: none; padding: 8px 0; margin: 0; }
.srf-sub-item { display: flex; justify-content: space-between; align-items: center; padding: 12px 18px; cursor: pointer; font-size: 13.5px; color: #444; border-left: 3px solid transparent; transition: background 0.12s; }
.srf-sub-item:hover { background: #F8FAFF; }
.srf-sub-item.is-active { background: #EAEFFF; color: #3061FF; font-weight: 600; border-left-color: #3061FF; }
.srf-chev { font-size: 16px; color: #C0C4CC; }
.srf-sub-item.is-active .srf-chev { color: #3061FF; }
.srf-form-card { background: #FFF; border: 1px solid #E6E6E8; border-radius: 12px; padding: 24px 28px; }
.srf-form-title { font-size: 17px; font-weight: 700; margin: 0 0 4px; }
.srf-form-sub { font-size: 13px; color: #6B7280; margin: 0 0 18px; }
.srf-field { display: block; margin-bottom: 18px; }
.srf-label { display: block; font-size: 12.5px; font-weight: 600; margin-bottom: 6px; }
.srf-label em { font-style: normal; color: #6B7280; font-weight: 400; }
.srf-field textarea, .srf-field input { width: 100%; padding: 12px 14px; border: 1px solid #E6E6E8; border-radius: 8px; font-size: 13px; font-family: inherit; outline: none; resize: vertical; box-sizing: border-box; }
.srf-field textarea:focus { border-color: #3061FF; }
.srf-upload { border: 1.5px dashed #E6E6E8; border-radius: 10px; padding: 18px; display: flex; gap: 14px; align-items: center; font-size: 13px; cursor: pointer; }
.srf-upload-icon { width: 36px; height: 36px; background: #EAEFFF; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #3061FF; font-size: 16px; }
.srf-upload-meta { font-size: 11.5px; color: #6B7280; margin-top: 2px; }
.srf-form-foot { display: flex; justify-content: flex-end; gap: 10px; padding-top: 8px; }
.srf-btn-outline { background: #FFF; color: #3061FF; border: 1px solid #3061FF; padding: 9px 22px; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit; }
.srf-btn-primary { background: #3061FF; color: #FFF; border: none; padding: 9px 26px; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit; }

/* Ticket history (th) */
.th-header { margin-bottom: 18px; }
.th-title { font-size: 22px; font-weight: 700; margin: 0 0 6px; }
.th-breadcrumb { font-size: 13px; color: #6B7280; }
.th-breadcrumb a { color: #3061FF; cursor: pointer; text-decoration: none; }
.th-sep { margin: 0 8px; color: #BDBDBD; }
.th-card { background: #FFF; border: 1px solid #E6E6E8; border-radius: 12px; padding: 18px 22px; }
.th-card-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.th-tabs { display: flex; gap: 24px; border-bottom: 1px solid #E6E6E8; flex: 1; }
.th-tab { background: none; border: none; padding: 10px 2px; font-size: 14px; font-weight: 600; color: #6B7280; cursor: pointer; border-bottom: 2px solid transparent; font-family: inherit; margin-bottom: -1px; }
.th-tab.is-active { color: #3061FF; border-bottom-color: #3061FF; }
.th-search-wrap { position: relative; width: 320px; }
.th-search-wrap input { width: 100%; padding: 8px 40px 8px 32px; border: 1px solid #E6E6E8; border-radius: 999px; font-size: 13px; outline: none; font-family: inherit; box-sizing: border-box; }
.th-search-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); font-size: 12px; color: #6B7280; }
.th-mic { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); border: none; background: #3061FF; color: #FFF; width: 28px; height: 28px; border-radius: 50%; cursor: pointer; font-size: 12px; }
.th-list { list-style: none; padding: 0; margin: 14px 0 0; }
.th-row { display: flex; justify-content: space-between; gap: 16px; padding: 16px 0; border-bottom: 1px solid #F0F2F5; cursor: pointer; }
.th-row:last-child { border-bottom: none; }
.th-row:hover { background: #F8FAFF; }
.th-row-main { flex: 1; }
.th-row-id { font-size: 12px; color: #6B7280; font-weight: 600; }
.th-row-title { font-size: 14px; font-weight: 600; margin: 4px 0 2px; }
.th-row-type { font-size: 12px; color: #6B7280; margin-bottom: 4px; }
.th-row-desc { font-size: 13px; color: #444; margin-bottom: 6px; line-height: 1.45; }
.th-attach-chip { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; background: #EAEFFF; border-radius: 999px; font-size: 12px; color: #3061FF; font-weight: 500; }
.th-row-side { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; min-width: 180px; }
.th-row-date { font-size: 11.5px; color: #6B7280; }
.th-pill { display: inline-block; padding: 4px 12px; border-radius: 999px; font-size: 11.5px; font-weight: 600; }
.th-pill-review { background: #FFF4D6; color: #B07A00; }
.th-pill-closed { background: #E3F8E8; color: #2E7D32; }
.th-pill-cancelled { background: #ECECEE; color: #6B7280; }
.th-pill-rejected { background: #FDE2E2; color: #C0392B; }
.th-feedback-btn { background: #3061FF; color: #FFF; border: none; padding: 6px 14px; border-radius: 6px; font-size: 12px; font-weight: 600; cursor: pointer; font-family: inherit; }
.th-feedback-done { font-size: 12px; color: #3061FF; font-weight: 600; background: #EAEFFF; padding: 5px 12px; border-radius: 999px; }
.th-empty { padding: 32px; text-align: center; color: #6B7280; font-size: 13px; }

/* Ticket detail (td) */
.td-header { margin-bottom: 18px; }
.td-title { font-size: 22px; font-weight: 700; margin: 0 0 6px; }
.td-breadcrumb { font-size: 13px; color: #6B7280; }
.td-breadcrumb a { color: #3061FF; cursor: pointer; text-decoration: none; }
.td-sep { margin: 0 8px; color: #BDBDBD; }
.td-card { background: #FFF; border: 1px solid #E6E6E8; border-radius: 12px; padding: 24px 28px; }
.td-card-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; gap: 12px; flex-wrap: wrap; }
.td-title-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.td-title-row h2 { font-size: 18px; font-weight: 700; margin: 0; }
.td-pill { display: inline-block; padding: 4px 12px; border-radius: 999px; font-size: 11.5px; font-weight: 600; }
.td-pill-review { background: #FFF4D6; color: #B07A00; }
.td-pill-closed { background: #E3F8E8; color: #2E7D32; }
.td-pill-cancelled { background: #ECECEE; color: #6B7280; }
.td-pill-rejected { background: #FDE2E2; color: #C0392B; }
.td-actions { display: flex; gap: 10px; align-items: center; }
.td-btn-danger-outline { background: #FFF; color: #C0392B; border: 1px solid #C0392B; padding: 8px 16px; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit; }
.td-btn-danger { background: #C0392B; color: #FFF; border: none; padding: 8px 18px; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit; }
.td-feedback-done { font-size: 12px; color: #3061FF; font-weight: 600; background: #EAEFFF; padding: 6px 14px; border-radius: 999px; }
.td-meta-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; padding: 14px 0; border-top: 1px solid #E6E6E8; border-bottom: 1px solid #E6E6E8; margin-bottom: 20px; }
.td-meta-grid > div { display: flex; flex-direction: column; gap: 4px; }
.td-meta-label { font-size: 11.5px; color: #6B7280; font-weight: 500; }
.td-meta-val { font-size: 13px; font-weight: 600; }
.td-thread { display: flex; flex-direction: column; gap: 14px; }
.td-bubble { border: 1px solid #E6E6E8; border-radius: 12px; padding: 14px 16px; }
.td-bubble-you { background: #F8FAFF; border-color: #DBE5FF; }
.td-bubble-admin { background: #FFF; }
.td-bubble-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.td-avatar { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: #FFF; }
.td-avatar-you { background: #3061FF; }
.td-avatar-admin { background: #6B7280; }
.td-bubble-head strong { font-size: 13px; }
.td-bubble-time { font-size: 11.5px; color: #6B7280; margin-left: auto; }
.td-bubble-body { font-size: 13px; line-height: 1.55; color: #333; }
.td-section-label { font-size: 11.5px; font-weight: 600; color: #6B7280; margin: 8px 0 4px; text-transform: uppercase; letter-spacing: 0.4px; }
.td-bubble-body p { margin: 0 0 8px; }
.td-attach-chip { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; background: #EAEFFF; border-radius: 999px; font-size: 12px; color: #3061FF; font-weight: 500; }
.td-reply-btn { background: none; border: none; color: #3061FF; font-size: 13px; font-weight: 600; cursor: pointer; padding: 6px 0; font-family: inherit; display: inline-flex; align-items: center; gap: 4px; }
.td-state-switcher { margin-top: 16px; padding: 10px 14px; background: #FFF; border: 1px dashed #3061FF; border-radius: 8px; font-size: 12px; color: #6B7280; display: flex; gap: 10px; align-items: center; }
.td-state-switcher label { font-weight: 600; color: #3061FF; }
.td-state-switcher select { padding: 4px 10px; border: 1px solid #E6E6E8; border-radius: 4px; font-size: 12px; font-family: inherit; }

/* FAQs (fq) */
.fq-header { margin-bottom: 18px; }
.fq-title { font-size: 22px; font-weight: 700; margin: 0 0 6px; }
.fq-breadcrumb { font-size: 13px; color: #6B7280; }
.fq-breadcrumb a { color: #3061FF; cursor: pointer; text-decoration: none; }
.fq-sep { margin: 0 8px; color: #BDBDBD; }
.fq-card { background: #FFF; border: 1px solid #E6E6E8; border-radius: 12px; padding: 22px 26px; }
.fq-card-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 18px; }
.fq-card-head h2 { font-size: 17px; font-weight: 700; margin: 0; }
.fq-search-wrap { position: relative; width: 340px; }
.fq-search-wrap input { width: 100%; padding: 9px 40px 9px 32px; border: 1px solid #E6E6E8; border-radius: 999px; font-size: 13px; outline: none; font-family: inherit; box-sizing: border-box; }
.fq-search-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); font-size: 12px; color: #6B7280; }
.fq-mic { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); border: none; background: #3061FF; color: #FFF; width: 28px; height: 28px; border-radius: 50%; cursor: pointer; font-size: 12px; }
.fq-cats { list-style: none; padding: 0; margin: 0; }
.fq-cat { border-bottom: 1px solid #E6E6E8; }
.fq-cat:last-child { border-bottom: none; }
.fq-cat-btn { width: 100%; display: flex; justify-content: space-between; align-items: center; background: none; border: none; padding: 16px 4px; cursor: pointer; font-size: 14.5px; font-weight: 600; color: #1A1A1A; font-family: inherit; }
.fq-cat-caret { color: #3061FF; font-size: 18px; font-weight: 700; }
.fq-q-list { list-style: none; padding: 0 0 16px; margin: 0; }
.fq-q { background: #F8FAFF; border-radius: 10px; margin-bottom: 8px; overflow: hidden; }
.fq-q.is-open { background: #EAEFFF; border: 1px solid #DBE5FF; }
.fq-q-btn { width: 100%; display: flex; justify-content: space-between; align-items: center; background: none; border: none; padding: 12px 16px; cursor: pointer; font-size: 13.5px; font-weight: 500; color: #1A1A1A; font-family: inherit; text-align: left; }
.fq-q-caret { color: #3061FF; font-size: 16px; font-weight: 700; margin-left: 12px; }
.fq-answer { padding: 0 16px 14px; font-size: 13px; line-height: 1.55; color: #333; }
.fq-answer p { margin: 0 0 14px; }
.fq-answer-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-top: 8px; border-top: 1px solid #DBE5FF; }
.fq-votes { display: flex; gap: 10px; }
.fq-vote { background: #FFF; border: 1px solid #E6E6E8; padding: 4px 12px; border-radius: 999px; font-size: 12px; font-weight: 600; cursor: pointer; font-family: inherit; }
.fq-vote-up { color: #2E7D32; }
.fq-vote-down { color: #C0392B; }
.fq-helpful { background: none; border: none; color: #3061FF; font-size: 12.5px; font-weight: 600; cursor: pointer; font-family: inherit; }
.fq-empty { padding: 40px; text-align: center; color: #6B7280; font-size: 13px; }
.fq-modal-sub { font-size: 12.5px; color: #6B7280; margin: 0 0 14px; text-align: center; }
.fq-stars { display: flex; justify-content: center; gap: 8px; margin-bottom: 14px; }
.fq-star { background: none; border: none; font-size: 36px; color: #E0E4EA; cursor: pointer; padding: 0; }
.fq-star.is-on { color: #FFB400; }
.fq-improve { border-top: 1px solid #E6E6E8; padding-top: 16px; margin-top: 6px; }
.fq-improve h4 { margin: 0 0 12px; font-size: 13.5px; font-weight: 700; color: #C0392B; }
.fq-chips { list-style: none; padding: 0; margin: 0 0 14px; display: flex; flex-wrap: wrap; gap: 8px; }
.fq-chip { padding: 6px 14px; border-radius: 999px; border: 1px solid #E6E6E8; background: #FFF; font-size: 12px; font-weight: 500; cursor: pointer; color: #555; }
.fq-chip.is-on { background: #EAEFFF; border-color: #3061FF; color: #3061FF; font-weight: 600; }
.fq-field { display: block; }
.fq-field-label { display: block; font-size: 12.5px; font-weight: 600; margin-bottom: 6px; }
.fq-field textarea { width: 100%; padding: 10px 12px; border: 1px solid #E6E6E8; border-radius: 8px; font-size: 13px; font-family: inherit; outline: none; resize: vertical; box-sizing: border-box; }

/* Search results (srs) */
.srs-header { margin-bottom: 18px; }
.srs-title { font-size: 22px; font-weight: 700; margin: 0 0 6px; }
.srs-breadcrumb { font-size: 13px; color: #6B7280; }
.srs-breadcrumb a { color: #3061FF; cursor: pointer; text-decoration: none; }
.srs-sep { margin: 0 8px; color: #BDBDBD; }
.srs-hero { background: linear-gradient(135deg,#EAEFFF 0%,#F8FAFF 100%); border: 1px solid #E6E6E8; border-radius: 14px; padding: 32px 28px; margin-bottom: 18px; }
.srs-hero h2 { font-size: 22px; margin: 0 0 18px; text-align: center; }
.srs-search-wrap { position: relative; max-width: 720px; margin: 0 auto; }
.srs-search { width: 100%; padding: 14px 50px 14px 44px; border-radius: 999px; border: 1px solid #E6E6E8; background: #FFF; font-size: 14px; font-family: inherit; outline: none; box-sizing: border-box; }
.srs-search-icon { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); font-size: 14px; color: #6B7280; }
.srs-mic { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); border: none; background: #3061FF; color: #FFF; width: 36px; height: 36px; border-radius: 50%; cursor: pointer; font-size: 14px; }
.srs-results { background: #FFF; border: 1px solid #E6E6E8; border-radius: 12px; padding: 22px 26px; }
.srs-results-head { margin-bottom: 14px; }
.srs-results-head h3 { font-size: 14px; font-weight: 600; color: #6B7280; margin: 0; }
.srs-list { list-style: none; padding: 0; margin: 0; }
.srs-row { display: flex; justify-content: space-between; gap: 16px; padding: 16px 0; border-bottom: 1px solid #F0F2F5; cursor: pointer; }
.srs-row:last-child { border-bottom: none; }
.srs-row:hover { background: #F8FAFF; }
.srs-row-main { flex: 1; }
.srs-row-main h4 { font-size: 14px; font-weight: 600; margin: 0 0 4px; }
.srs-row-main p { font-size: 13px; color: #6B7280; margin: 0; line-height: 1.5; }
.srs-chip { display: inline-block; padding: 4px 14px; border-radius: 999px; font-size: 11.5px; font-weight: 600; height: fit-content; white-space: nowrap; }
.srs-chip-faq { background: #FFF; border: 1px solid #E6E6E8; color: #6B7280; }
.srs-chip-service { background: #EAEFFF; color: #3061FF; border: 1px solid #DBE5FF; }
.srs-chip-ticket { background: #FFF4D6; color: #B07A00; }
.srs-empty { padding: 60px 20px; text-align: center; }
.srs-empty-art { font-size: 64px; margin-bottom: 14px; }
.srs-empty h3 { font-size: 17px; font-weight: 700; margin: 0 0 6px; }
.srs-empty p { font-size: 13px; color: #6B7280; margin: 0; }

/* Shared modals */
.ss-modal-overlay { position: fixed; inset: 0; background: rgba(15,23,42,0.45); display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 20px; }
.ss-modal-overlay.hidden { display: none; }
.ss-modal { background: #FFF; border-radius: 14px; width: 100%; max-width: 540px; max-height: 90vh; overflow: auto; box-shadow: 0 20px 50px rgba(0,0,0,0.25); }
.ss-modal-head { display: flex; justify-content: space-between; align-items: center; padding: 18px 22px; border-bottom: 1px solid #E6E6E8; }
.ss-modal-head h3 { margin: 0; font-size: 17px; font-weight: 600; }
.ss-modal-x { background: none; border: none; font-size: 24px; cursor: pointer; color: #6B7280; }
.ss-modal-body { padding: 20px 22px; }
.ss-field { display: block; margin-bottom: 16px; }
.ss-field-label { display: block; font-size: 12.5px; font-weight: 600; margin-bottom: 6px; }
.ss-field-label em { font-style: normal; color: #6B7280; font-weight: 400; }
.ss-field input, .ss-field select, .ss-field textarea { width: 100%; padding: 10px 12px; border: 1px solid #E6E6E8; border-radius: 8px; font-size: 13px; font-family: inherit; outline: none; box-sizing: border-box; resize: vertical; }
.ss-textarea-wrap { position: relative; }
.ss-ai-chip { position: absolute; right: 10px; bottom: 10px; background: #EAEFFF; color: #3061FF; border: none; padding: 5px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 600; cursor: pointer; font-family: inherit; }
.ss-upload { border: 1.5px dashed #E6E6E8; border-radius: 10px; padding: 18px; display: flex; gap: 14px; align-items: center; font-size: 13px; cursor: pointer; }
.ss-upload-icon { width: 36px; height: 36px; background: #EAEFFF; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #3061FF; font-size: 16px; }
.ss-upload-meta { font-size: 11.5px; color: #6B7280; margin-top: 2px; }
.ss-modal-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 16px 22px; border-top: 1px solid #E6E6E8; }
.ss-btn-outline { background: #FFF; color: #3061FF; border: 1px solid #3061FF; padding: 8px 18px; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit; }
.ss-btn-primary { background: #3061FF; color: #FFF; border: none; padding: 8px 20px; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit; }
.ss-toast-overlay { position: fixed; inset: 0; background: rgba(15,23,42,0.45); display: flex; align-items: center; justify-content: center; z-index: 1100; }
.ss-toast-overlay.hidden { display: none; }
.ss-toast-card { background: #FFF; border-radius: 14px; padding: 32px 36px; text-align: center; min-width: 320px; box-shadow: 0 20px 50px rgba(0,0,0,0.25); }
.ss-toast-check { width: 56px; height: 56px; border-radius: 50%; background: #E3F8E8; color: #2E7D32; display: flex; align-items: center; justify-content: center; font-size: 28px; margin: 0 auto 14px; }
.ss-toast-check.ss-toast-check-blue { background: #EAEFFF; color: #3061FF; }
.ss-toast-card h3 { margin: 0 0 6px; font-size: 17px; }
.ss-toast-card p { margin: 0; color: #6B7280; font-size: 13px; }
.ss-modal-rating .ss-stars { display: flex; justify-content: center; gap: 8px; margin-bottom: 8px; }
.ss-star { background: none; border: none; font-size: 32px; color: #E0E4EA; cursor: pointer; padding: 0; }
.ss-star.is-on { color: #FFB400; }
.ss-rating-label { text-align: center; font-size: 13px; font-weight: 600; color: #3061FF; margin-bottom: 16px; min-height: 18px; }

/* ===========================================================
   CHAT MODULE
   =========================================================== */
.ch-page { padding: 24px 28px; font-family: 'GeneralSansFont','Salesforce Sans',system-ui,sans-serif; color: #1A1A1A; }
.ch-header { margin-bottom: 16px; }
.ch-title { font-size: 22px; font-weight: 700; margin: 0; }
.ch-shell { display: grid; grid-template-columns: 320px 1fr; gap: 0; background: #FFF; border: 1px solid #E6E6E8; border-radius: 14px; overflow: hidden; height: calc(100vh - 200px); min-height: 540px; }
.ch-list-pane { border-right: 1px solid #E6E6E8; display: flex; flex-direction: column; min-height: 0; }
.ch-search-wrap { position: relative; padding: 16px; border-bottom: 1px solid #E6E6E8; }
.ch-search { width: 100%; padding: 9px 14px 9px 34px; border: 1px solid #E6E6E8; border-radius: 999px; font-size: 13px; font-family: inherit; outline: none; box-sizing: border-box; background: #F6F8FB; }
.ch-search:focus { background: #FFF; border-color: #3061FF; }
.ch-search-icon { position: absolute; left: 28px; top: 50%; transform: translateY(-50%); font-size: 12px; color: #6B7280; }
.ch-conv-list { list-style: none; padding: 8px; margin: 0; overflow-y: auto; flex: 1; }
.ch-conv { display: flex; gap: 12px; padding: 12px; border-radius: 10px; cursor: pointer; margin-bottom: 4px; align-items: center; border: 1.5px solid transparent; transition: background 0.12s, border-color 0.12s; }
.ch-conv:hover { background: #F8FAFF; }
.ch-conv.is-active { background: #EAEFFF; border-color: #3061FF; }
.ch-avatar-wrap { position: relative; flex-shrink: 0; }
.ch-avatar { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: #1A1A1A; background: #DDD; }
.ch-avatar-lg { width: 44px; height: 44px; font-size: 14px; }
.ch-dot-online { position: absolute; bottom: 2px; right: 2px; width: 10px; height: 10px; background: #34D399; border-radius: 50%; border: 2px solid #FFF; }
.ch-conv-body { flex: 1; min-width: 0; }
.ch-conv-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2px; gap: 8px; }
.ch-conv-name { font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ch-conv-time { font-size: 11px; color: #6B7280; flex-shrink: 0; }
.ch-conv-preview { font-size: 12.5px; color: #6B7280; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ch-unread { background: #3061FF; color: #FFF; font-size: 11px; font-weight: 700; min-width: 18px; height: 18px; border-radius: 999px; padding: 0 6px; display: flex; align-items: center; justify-content: center; }
.ch-empty-list { padding: 32px 16px; text-align: center; color: #6B7280; font-size: 13px; }

.ch-thread-pane { display: flex; flex-direction: column; min-height: 0; background: #FAFBFD; }
.ch-thread-head { display: flex; align-items: center; gap: 12px; padding: 16px 22px; border-bottom: 1px solid #E6E6E8; background: #FFF; }
.ch-thread-meta { flex: 1; display: flex; flex-direction: column; }
.ch-thread-meta strong { font-size: 14px; }
.ch-thread-status { font-size: 11.5px; color: #6B7280; display: flex; align-items: center; gap: 6px; margin-top: 2px; }
.ch-status-dot { width: 8px; height: 8px; background: #34D399; border-radius: 50%; }
.ch-thread-actions { display: flex; gap: 6px; }
.ch-icon-btn { background: none; border: none; width: 34px; height: 34px; border-radius: 50%; cursor: pointer; font-size: 15px; color: #6B7280; }
.ch-icon-btn:hover { background: #EAEFFF; color: #3061FF; }
.ch-thread-body { flex: 1; overflow-y: auto; padding: 18px 22px; display: flex; flex-direction: column; gap: 8px; }
.ch-msg-row { display: flex; gap: 8px; align-items: flex-end; }
.ch-msg-row-them { justify-content: flex-start; }
.ch-msg-row-me { justify-content: flex-end; }
.ch-bubble { max-width: 60%; padding: 9px 14px; border-radius: 16px; font-size: 13.5px; line-height: 1.45; word-wrap: break-word; }
.ch-bubble-them { background: #FFF; border: 1px solid #E6E6E8; border-bottom-left-radius: 4px; }
.ch-bubble-me { background: #3061FF; color: #FFF; border-bottom-right-radius: 4px; }
.ch-bubble-avatar { width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 10.5px; font-weight: 700; flex-shrink: 0; background: #DDD; color: #1A1A1A; }
.ch-bubble-avatar-me { background: #3061FF; color: #FFF; }
.ch-typing { display: flex; gap: 4px; align-items: center; padding: 12px 14px; }
.ch-typing span { width: 6px; height: 6px; border-radius: 50%; background: #6B7280; opacity: 0.5; animation: ch-bounce 1.2s infinite ease-in-out; }
.ch-typing span:nth-child(2) { animation-delay: 0.15s; }
.ch-typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes ch-bounce { 0%, 60%, 100% { transform: translateY(0); opacity: 0.5; } 30% { transform: translateY(-4px); opacity: 1; } }

.ch-composer { display: flex; align-items: center; gap: 10px; padding: 12px 18px; border-top: 1px solid #E6E6E8; background: #FFF; }
.ch-attach { background: none; border: none; font-size: 16px; cursor: pointer; color: #6B7280; padding: 6px; }
.ch-composer-input { flex: 1; padding: 10px 16px; border: 1px solid #E6E6E8; border-radius: 999px; font-size: 13.5px; font-family: inherit; outline: none; background: #F6F8FB; box-sizing: border-box; }
.ch-composer-input:focus { background: #FFF; border-color: #3061FF; }
.ch-send { background: #3061FF; color: #FFF; border: none; width: 38px; height: 38px; border-radius: 50%; cursor: pointer; font-size: 14px; display: flex; align-items: center; justify-content: center; }
.ch-send:hover { background: #2350D9; }
.ch-empty-thread { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: #6B7280; }
.ch-empty-art { font-size: 56px; margin-bottom: 12px; }
.ch-empty-thread h3 { margin: 0 0 4px; font-size: 16px; color: #1A1A1A; }
.ch-empty-thread p { margin: 0; font-size: 13px; }

/* ===========================================================
   MY SCHEDULE / ATTENDANCE SUMMARY / LEAVE DETAIL
   =========================================================== */
.ms-page { padding: 24px 28px; font-family: 'GeneralSansFont','Salesforce Sans',system-ui,sans-serif; color: #1A1A1A; }
.ms-header { margin-bottom: 16px; }
.ms-title { font-size: 22px; font-weight: 700; margin: 0 0 6px; }
.ms-breadcrumb { font-size: 13px; color: #6B7280; }
.ms-breadcrumb a { color: #3061FF; cursor: pointer; text-decoration: none; }
.ms-sep { margin: 0 8px; color: #BDBDBD; }
.ms-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.ms-view-tabs { display: inline-flex; background: #F6F8FB; border-radius: 10px; padding: 4px; gap: 2px; }
.ms-view-tab { background: none; border: none; padding: 8px 18px; font-size: 13px; font-weight: 600; color: #6B7280; cursor: pointer; border-radius: 8px; font-family: inherit; }
.ms-view-tab.is-active { background: #FFF; color: #3061FF; box-shadow: 0 1px 4px rgba(0,0,0,0.06); }
.ms-toolbar-right { display: flex; gap: 10px; align-items: center; }
.ms-date-picker { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; background: #FFF; border: 1px solid #E6E6E8; border-radius: 8px; font-size: 13px; font-weight: 600; }
.ms-btn-outline { background: #FFF; color: #3061FF; border: 1px solid #3061FF; padding: 8px 18px; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit; }
.ms-btn-primary { background: #3061FF; color: #FFF; border: none; padding: 8px 20px; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit; }
.ms-btn-outline-sm { background: #FFF; color: #3061FF; border: 1px solid #3061FF; padding: 6px 14px; border-radius: 6px; font-size: 12px; font-weight: 600; cursor: pointer; font-family: inherit; }
.ms-btn-primary-sm { background: #3061FF; color: #FFF; border: none; padding: 6px 14px; border-radius: 6px; font-size: 12px; font-weight: 600; cursor: pointer; font-family: inherit; }
.ms-shell { display: grid; grid-template-columns: 1fr 340px; gap: 18px; }
.ms-calendar-pane { background: #FFF; border: 1px solid #E6E6E8; border-radius: 12px; padding: 14px 18px; min-height: 540px; }
.ms-day-timeline { list-style: none; padding: 0; margin: 0; }
.ms-day-row { display: grid; grid-template-columns: 80px 1fr; gap: 10px; padding: 10px 0; border-top: 1px dashed #E6E6E8; min-height: 70px; }
.ms-day-row:first-child { border-top: none; }
.ms-day-hour { font-size: 12px; color: #6B7280; padding-top: 4px; font-weight: 500; }
.ms-day-slot { display: flex; flex-direction: column; gap: 6px; }
.ms-ev { border-radius: 10px; padding: 10px 14px; background: #FFF; cursor: pointer; border-left: 4px solid #3061FF; border-top: 1px solid #E6E6E8; border-right: 1px solid #E6E6E8; border-bottom: 1px solid #E6E6E8; transition: transform 0.12s; }
.ms-ev:hover { transform: translateX(2px); }
.ms-ev-blue   { border-left-color: #3061FF; background: #F2F6FF; }
.ms-ev-green  { border-left-color: #34C38F; background: #EFFAF4; }
.ms-ev-purple { border-left-color: #7C3AED; background: #F4EEFF; }
.ms-ev-pink   { border-left-color: #E84A82; background: #FDEFF5; }
.ms-ev-neutral{ border-left-color: #BDBDBD; background: #FAFAFA; font-style: italic; color: #6B7280; }
.ms-ev-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.ms-ev-head strong { font-size: 13.5px; font-weight: 600; }
.ms-ev-time { font-size: 11.5px; color: #6B7280; }
.ms-ev-meta { font-size: 12px; color: #6B7280; margin-top: 4px; }
.ms-ev-loc { font-size: 12px; color: #444; margin-top: 4px; display: flex; align-items: center; gap: 6px; }
.ms-ev-batch { font-size: 11.5px; color: #444; margin-top: 4px; display: flex; align-items: center; gap: 6px; }
.ms-batch-dot { width: 6px; height: 6px; border-radius: 50%; background: #3061FF; }
.ms-week-grid { display: grid; grid-template-columns: 70px repeat(5, 1fr); gap: 1px; background: #E6E6E8; border: 1px solid #E6E6E8; border-radius: 10px; overflow: hidden; }
.ms-week-corner, .ms-week-dayhead, .ms-week-cell { background: #FFF; padding: 8px; }
.ms-week-dayhead { display: flex; flex-direction: column; align-items: center; padding: 12px 4px; gap: 2px; }
.ms-week-dow { font-size: 11px; color: #6B7280; font-weight: 600; text-transform: uppercase; }
.ms-week-date { font-size: 15px; font-weight: 700; }
.ms-week-cell { min-height: 70px; position: relative; padding: 4px 6px; display: flex; flex-direction: column; gap: 4px; }
.ms-week-hourcol { font-size: 11px; color: #6B7280; font-weight: 600; padding: 8px; }
.ms-week-cell .ms-ev { padding: 6px 8px; border-radius: 6px; cursor: pointer; }
.ms-week-cell .ms-ev strong { font-size: 11.5px; display: block; }
.ms-ev-mini-meta { font-size: 10.5px; color: #6B7280; display: block; }
.ms-ev-mini-loc { font-size: 10.5px; color: #6B7280; display: block; }
.ms-overflow-pill { display: inline-block; align-self: flex-start; background: #1A1A4A; color: #FFF; padding: 3px 8px; border-radius: 999px; font-size: 10.5px; font-weight: 600; }
.ms-month-head { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; margin-bottom: 6px; }
.ms-month-dow { text-align: center; font-size: 11px; font-weight: 600; color: #6B7280; padding: 6px; text-transform: uppercase; }
.ms-month-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; background: #E6E6E8; border: 1px solid #E6E6E8; border-radius: 10px; overflow: hidden; }
.ms-month-cell { background: #FFF; min-height: 110px; padding: 6px 8px; display: flex; flex-direction: column; gap: 4px; }
.ms-month-cell.is-out { background: #FAFAFA; color: #BDBDBD; }
.ms-month-num { font-size: 12px; font-weight: 600; }
.ms-month-cell.is-out .ms-month-num { color: #BDBDBD; }
.ms-month-events { display: flex; flex-direction: column; gap: 3px; }
.ms-chip { display: block; font-size: 10.5px; padding: 3px 8px; border-radius: 4px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 500; }
.ms-chip-blue   { background: #E3F2FD; color: #1565C0; }
.ms-chip-green  { background: #E8F5E9; color: #2E7D32; }
.ms-chip-purple { background: #F3E5F5; color: #6A1B9A; }
.ms-chip-pink   { background: #FDECEC; color: #C2185B; }
.ms-month-overflow { font-size: 10.5px; color: #3061FF; font-weight: 600; padding: 2px 4px; cursor: pointer; }
.ms-right-pane { display: flex; flex-direction: column; gap: 14px; }
.ms-side-card { background: #FFF; border: 1px solid #E6E6E8; border-radius: 12px; padding: 16px 18px; }
.ms-side-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.ms-side-head h3 { font-size: 14px; font-weight: 700; margin: 0; }
.ms-leave-list { list-style: none; padding: 0; margin: 0 0 12px; display: flex; flex-direction: column; gap: 10px; }
.ms-leave-item { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; padding: 10px 12px; background: #F6F8FB; border-radius: 8px; }
.ms-leave-main { display: flex; flex-direction: column; flex: 1; gap: 2px; }
.ms-leave-main strong { font-size: 13px; font-weight: 600; }
.ms-leave-reason { font-size: 11.5px; color: #6B7280; }
.ms-leave-dates { font-size: 11.5px; color: #6B7280; }
.ms-pill { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 600; }
.ms-pill-approved { background: #E3F8E8; color: #2E7D32; }
.ms-side-foot { display: flex; gap: 8px; }
.ms-oneone-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; }
.ms-oneone-item { display: flex; flex-direction: column; gap: 6px; padding: 12px; background: #F6F8FB; border-radius: 10px; }
.ms-oneone-top { display: flex; align-items: center; gap: 10px; }
.ms-oneone-avatar { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: #1A1A1A; flex-shrink: 0; }
.ms-oneone-name { display: flex; flex-direction: column; }
.ms-oneone-name strong { font-size: 13px; font-weight: 600; }
.ms-oneone-date { font-size: 11px; color: #6B7280; }
.ms-oneone-meta { font-size: 11.5px; color: #6B7280; }
.ms-oneone-note { font-size: 12px; color: #444; font-style: italic; }
.ms-oneone-actions { display: flex; gap: 8px; margin-top: 4px; }
.ms-empty { padding: 18px; text-align: center; color: #6B7280; font-size: 12.5px; }

.ms-modal-overlay { position: fixed; inset: 0; background: rgba(15,23,42,0.45); display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 20px; }
.ms-modal-overlay.hidden { display: none; }
.ms-modal { background: #FFF; border-radius: 14px; width: 100%; max-width: 540px; max-height: 90vh; overflow: auto; box-shadow: 0 20px 50px rgba(0,0,0,0.25); }
.ms-modal-lg { max-width: 720px; }
.ms-modal-head { display: flex; justify-content: space-between; align-items: center; padding: 18px 22px; border-bottom: 1px solid #E6E6E8; }
.ms-modal-head h3 { margin: 0; font-size: 17px; font-weight: 600; }
.ms-modal-x { background: none; border: none; font-size: 24px; cursor: pointer; color: #6B7280; }
.ms-modal-body { padding: 20px 22px; }
.ms-modal-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 16px 22px; border-top: 1px solid #E6E6E8; }
.ms-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
.ms-field { display: block; margin-bottom: 14px; }
.ms-field-label { display: block; font-size: 12.5px; font-weight: 600; margin-bottom: 6px; }
.ms-field-label em { font-style: normal; color: #6B7280; font-weight: 400; }
.ms-field input, .ms-field select, .ms-field textarea { width: 100%; padding: 10px 12px; border: 1px solid #E6E6E8; border-radius: 8px; font-size: 13px; font-family: inherit; outline: none; box-sizing: border-box; resize: vertical; }
.ms-rich-wrap { border: 1px solid #E6E6E8; border-radius: 8px; overflow: hidden; }
.ms-rich-toolbar { display: flex; gap: 4px; padding: 6px 8px; background: #F6F8FB; border-bottom: 1px solid #E6E6E8; align-items: center; }
.ms-rich-toolbar button { background: none; border: 1px solid transparent; padding: 4px 8px; font-size: 13px; cursor: pointer; border-radius: 4px; color: #1A1A1A; font-family: inherit; }
.ms-rich-toolbar button:hover { background: #FFF; border-color: #E6E6E8; }
.ms-ai-link { margin-left: auto; color: #3061FF !important; font-weight: 600; font-size: 12px !important; }
.ms-rich-wrap textarea { border: none; border-radius: 0; }
.ms-radio-group { border: none; padding: 0; margin: 0 0 14px; }
.ms-radio-group legend { font-size: 12.5px; font-weight: 600; margin-bottom: 8px; padding: 0; }
.ms-radio-group legend em { font-style: normal; color: #6B7280; }
.ms-radio { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border: 1px solid #E6E6E8; border-radius: 999px; cursor: pointer; margin-right: 8px; font-size: 13px; }
.ms-radio input { margin: 0; accent-color: #3061FF; }
.ms-textarea-wrap { position: relative; }
.ms-ai-chip { position: absolute; right: 10px; bottom: 10px; background: #EAEFFF; color: #3061FF; border: none; padding: 5px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 600; cursor: pointer; font-family: inherit; }
.ms-upload { border: 1.5px dashed #E6E6E8; border-radius: 10px; padding: 18px; display: flex; gap: 14px; align-items: center; font-size: 13px; cursor: pointer; }
.ms-upload-icon { width: 36px; height: 36px; background: #EAEFFF; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #3061FF; font-size: 16px; }
.ms-upload-meta { font-size: 11.5px; color: #6B7280; margin-top: 2px; }
.ms-toast-overlay { position: fixed; inset: 0; background: rgba(15,23,42,0.45); display: flex; align-items: center; justify-content: center; z-index: 1100; }
.ms-toast-overlay.hidden { display: none; }
.ms-toast-card { background: #FFF; border-radius: 14px; padding: 32px 36px; text-align: center; min-width: 320px; box-shadow: 0 20px 50px rgba(0,0,0,0.25); }
.ms-toast-check { width: 56px; height: 56px; border-radius: 50%; background: #E3F8E8; color: #2E7D32; display: flex; align-items: center; justify-content: center; font-size: 28px; margin: 0 auto 14px; }
.ms-toast-card h3 { margin: 0 0 6px; font-size: 17px; }
.ms-toast-card p { margin: 0; color: #6B7280; font-size: 13px; }

/* Attendance Summary (as-*) */
.as-page { padding: 24px 28px; font-family: 'GeneralSansFont','Salesforce Sans',system-ui,sans-serif; color: #1A1A1A; }
.as-header { margin-bottom: 18px; }
.as-title { font-size: 22px; font-weight: 700; margin: 0 0 6px; }
.as-breadcrumb { font-size: 13px; color: #6B7280; }
.as-breadcrumb a { color: #3061FF; cursor: pointer; text-decoration: none; }
.as-sep { margin: 0 8px; color: #BDBDBD; }
.as-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
.as-tabs { display: flex; gap: 24px; border-bottom: 1px solid #E6E6E8; flex: 1; }
.as-tab { background: none; border: none; padding: 10px 2px; font-size: 14px; font-weight: 600; color: #6B7280; cursor: pointer; border-bottom: 2px solid transparent; font-family: inherit; margin-bottom: -1px; }
.as-tab.is-active { color: #3061FF; border-bottom-color: #3061FF; }
.as-toolbar-right { display: flex; gap: 10px; align-items: center; }
.as-semester { padding: 8px 14px; border: 1px solid #E6E6E8; border-radius: 8px; font-size: 13px; font-family: inherit; background: #FFF; outline: none; }
.as-current-pill { display: inline-flex; align-items: center; gap: 6px; background: #FDECEC; color: #C0392B; padding: 5px 12px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.as-current-dot { width: 6px; height: 6px; border-radius: 50%; background: #C0392B; }
.as-btn-outline { background: #FFF; color: #3061FF; border: 1px solid #3061FF; padding: 8px 16px; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit; }
.as-btn-primary { background: #3061FF; color: #FFF; border: none; padding: 8px 18px; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit; }
.as-card { background: #FFF; border: 1px solid #E6E6E8; border-radius: 12px; padding: 18px 22px; }
.as-table { width: 100%; border-collapse: collapse; }
.as-table th { text-align: left; padding: 12px 10px; font-size: 12px; font-weight: 600; color: #6B7280; border-bottom: 1px solid #E6E6E8; }
.as-sort { color: #BDBDBD; margin-left: 4px; cursor: pointer; }
.as-table td { padding: 14px 10px; font-size: 13px; border-bottom: 1px solid #F0F2F5; }
.as-table tr:last-child td { border-bottom: none; }
.as-pill { display: inline-block; padding: 4px 12px; border-radius: 999px; font-size: 11.5px; font-weight: 600; }
.as-pill-present  { background: #E3F8E8; color: #2E7D32; }
.as-pill-absent   { background: #FDE2E2; color: #C0392B; }
.as-pill-review   { background: #FFF4D6; color: #B07A00; }
.as-pill-approved { background: #E3F8E8; color: #2E7D32; }
.as-pill-rejected { background: #FDE2E2; color: #C0392B; }
.as-list-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.as-list-head h2 { font-size: 15px; font-weight: 700; margin: 0; }
.as-filter-btn { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; background: #FFF; border: 1px solid #E6E6E8; border-radius: 999px; cursor: pointer; font-size: 12.5px; font-weight: 600; font-family: inherit; color: #1A1A1A; }
.as-filter-btn:hover { border-color: #3061FF; color: #3061FF; }
.as-filter-badge { background: #3061FF; color: #FFF; font-size: 11px; padding: 1px 7px; border-radius: 999px; font-weight: 700; }
.as-leave-list { list-style: none; padding: 0; margin: 0; }
.as-leave-row { display: flex; justify-content: space-between; gap: 16px; padding: 16px 0; border-bottom: 1px solid #F0F2F5; cursor: pointer; }
.as-leave-row:last-child { border-bottom: none; }
.as-leave-row:hover { background: #F8FAFF; }
.as-leave-main { flex: 1; }
.as-leave-id { font-size: 12px; color: #6B7280; font-weight: 600; }
.as-leave-title { font-size: 14px; font-weight: 600; margin: 4px 0 4px; }
.as-leave-desc { font-size: 13px; color: #444; margin-bottom: 6px; line-height: 1.45; }
.as-leave-dates { font-size: 12px; color: #6B7280; }
.as-leave-side { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; min-width: 180px; }
.as-leave-when { font-size: 11.5px; color: #6B7280; }
.as-empty { padding: 40px; text-align: center; color: #6B7280; font-size: 13px; }
.as-modal-overlay { position: fixed; inset: 0; background: rgba(15,23,42,0.45); display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 20px; }
.as-modal-overlay.hidden { display: none; }
.as-modal { background: #FFF; border-radius: 14px; width: 100%; max-width: 540px; max-height: 90vh; overflow: auto; box-shadow: 0 20px 50px rgba(0,0,0,0.25); }
.as-modal-head { display: flex; justify-content: space-between; align-items: center; padding: 18px 22px; border-bottom: 1px solid #E6E6E8; }
.as-modal-head h3 { margin: 0; font-size: 17px; font-weight: 600; }
.as-modal-x { background: none; border: none; font-size: 24px; cursor: pointer; color: #6B7280; }
.as-modal-body { padding: 20px 22px; }
.as-modal-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 16px 22px; border-top: 1px solid #E6E6E8; }
.as-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
.as-field { display: block; margin-bottom: 14px; }
.as-field-label { display: block; font-size: 12.5px; font-weight: 600; margin-bottom: 6px; }
.as-field input, .as-field select, .as-field textarea { width: 100%; padding: 10px 12px; border: 1px solid #E6E6E8; border-radius: 8px; font-size: 13px; font-family: inherit; outline: none; box-sizing: border-box; resize: vertical; }
.as-radio-group { border: none; padding: 0; margin: 0 0 18px; }
.as-radio-group legend { font-size: 12.5px; font-weight: 600; margin-bottom: 8px; padding: 0; }
.as-radio { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border: 1px solid #E6E6E8; border-radius: 999px; cursor: pointer; margin-right: 8px; font-size: 13px; }
.as-radio input { margin: 0; accent-color: #3061FF; }
.as-swap-options { display: flex; flex-direction: column; gap: 8px; }
.as-swap-options select { padding: 10px 12px; border: 1px solid #E6E6E8; border-radius: 8px; font-size: 13px; font-family: inherit; outline: none; }
.as-drawer-overlay { position: fixed; inset: 0; background: rgba(15,23,42,0.40); display: flex; justify-content: flex-end; z-index: 1000; }
.as-drawer-overlay.hidden { display: none; }
.as-drawer { background: #FFF; width: 360px; max-width: 90vw; height: 100vh; display: flex; flex-direction: column; box-shadow: -10px 0 30px rgba(0,0,0,0.18); }
.as-drawer-head { display: flex; justify-content: space-between; align-items: center; padding: 18px 22px; border-bottom: 1px solid #E6E6E8; }
.as-drawer-head h3 { margin: 0; font-size: 17px; font-weight: 600; }
.as-drawer-body { padding: 20px 22px; flex: 1; overflow-y: auto; }
.as-drawer-foot { display: flex; justify-content: space-between; gap: 10px; padding: 16px 22px; border-top: 1px solid #E6E6E8; }

/* Leave Request Detail (lrd-*) */
.lrd-page { padding: 24px 28px; font-family: 'GeneralSansFont','Salesforce Sans',system-ui,sans-serif; color: #1A1A1A; }
.lrd-header { margin-bottom: 18px; }
.lrd-title { font-size: 22px; font-weight: 700; margin: 0 0 6px; }
.lrd-breadcrumb { font-size: 13px; color: #6B7280; }
.lrd-breadcrumb a { color: #3061FF; cursor: pointer; text-decoration: none; }
.lrd-sep { margin: 0 8px; color: #BDBDBD; }
.lrd-card { background: #FFF; border: 1px solid #E6E6E8; border-radius: 12px; padding: 24px 28px; }
.lrd-card-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; gap: 12px; flex-wrap: wrap; }
.lrd-title-row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.lrd-title-row h2 { font-size: 18px; font-weight: 700; margin: 0; }
.lrd-pill { display: inline-block; padding: 4px 12px; border-radius: 999px; font-size: 11.5px; font-weight: 600; }
.lrd-pill-review { background: #FFF4D6; color: #B07A00; }
.lrd-pill-approved { background: #E3F8E8; color: #2E7D32; }
.lrd-pill-rejected { background: #FDE2E2; color: #C0392B; }
.lrd-pill-cancelled { background: #ECECEE; color: #6B7280; }
.lrd-btn-danger-outline { background: #FFF; color: #C0392B; border: 1px solid #C0392B; padding: 8px 16px; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit; }
.lrd-btn-danger { background: #C0392B; color: #FFF; border: none; padding: 8px 18px; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit; }
.lrd-btn-outline { background: #FFF; color: #3061FF; border: 1px solid #3061FF; padding: 8px 18px; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit; }
.lrd-meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; padding: 14px 0; border-top: 1px solid #E6E6E8; border-bottom: 1px solid #E6E6E8; margin-bottom: 20px; }
.lrd-meta > div { display: flex; flex-direction: column; gap: 4px; }
.lrd-meta-label { font-size: 11.5px; color: #6B7280; font-weight: 500; }
.lrd-meta-val { font-size: 13px; font-weight: 600; }
.lrd-thread { display: flex; flex-direction: column; gap: 14px; }
.lrd-bubble { border: 1px solid #E6E6E8; border-radius: 12px; padding: 14px 16px; }
.lrd-bubble-you { background: #F8FAFF; border-color: #DBE5FF; }
.lrd-bubble-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.lrd-avatar { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: #FFF; }
.lrd-avatar-you { background: #3061FF; }
.lrd-avatar-admin { background: #6B7280; }
.lrd-bubble-head strong { font-size: 13px; }
.lrd-time { font-size: 11.5px; color: #6B7280; margin-left: auto; }
.lrd-bubble-body { font-size: 13px; line-height: 1.55; color: #333; }
.lrd-section-label { font-size: 11.5px; font-weight: 600; color: #6B7280; margin: 8px 0 4px; text-transform: uppercase; letter-spacing: 0.4px; }
.lrd-bubble-body p { margin: 0 0 8px; }
.lrd-attach-chip { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; background: #EAEFFF; border-radius: 999px; font-size: 12px; color: #3061FF; font-weight: 500; }
.lrd-modal-overlay { position: fixed; inset: 0; background: rgba(15,23,42,0.45); display: flex; align-items: center; justify-content: center; z-index: 1000; }
.lrd-modal-overlay.hidden { display: none; }
.lrd-modal { background: #FFF; border-radius: 14px; width: 100%; max-width: 440px; box-shadow: 0 20px 50px rgba(0,0,0,0.25); }
.lrd-modal-head { display: flex; justify-content: space-between; align-items: center; padding: 18px 22px; border-bottom: 1px solid #E6E6E8; }
.lrd-modal-head h3 { margin: 0; font-size: 17px; font-weight: 600; }
.lrd-modal-x { background: none; border: none; font-size: 24px; cursor: pointer; color: #6B7280; }
.lrd-modal-body { padding: 20px 22px; font-size: 13.5px; color: #333; }
.lrd-modal-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 16px 22px; border-top: 1px solid #E6E6E8; }
.lrd-state-switcher { margin-top: 16px; padding: 10px 14px; background: #FFF; border: 1px dashed #3061FF; border-radius: 8px; font-size: 12px; color: #6B7280; display: flex; gap: 10px; align-items: center; }
.lrd-state-switcher label { font-weight: 600; color: #3061FF; }
.lrd-state-switcher select { padding: 4px 10px; border: 1px solid #E6E6E8; border-radius: 4px; font-size: 12px; font-family: inherit; }

/* ===========================================================
   PAYROLL MODULE
   =========================================================== */
.pd-page,.pl-page,.psd-page,.prq-page,.sa-page,.fb-page { padding: 24px 28px; font-family: 'GeneralSansFont','Salesforce Sans',system-ui,sans-serif; color: #1A1A1A; }
.pd-header,.pl-header,.psd-header,.prq-header,.sa-header,.fb-header { margin-bottom: 18px; }
.pd-title,.pl-title,.psd-title,.prq-title,.sa-title,.fb-title { font-size: 22px; font-weight: 700; margin: 0 0 6px; }
.pd-breadcrumb,.pl-breadcrumb,.psd-breadcrumb,.prq-breadcrumb,.sa-breadcrumb,.fb-breadcrumb { font-size: 13px; color: #6B7280; }
.pd-breadcrumb a,.pl-breadcrumb a,.psd-breadcrumb a,.prq-breadcrumb a,.sa-breadcrumb a,.fb-breadcrumb a { color: #3061FF; cursor: pointer; text-decoration: none; }
.pd-sep,.pl-sep,.psd-sep,.prq-sep,.sa-sep,.fb-sep { margin: 0 8px; color: #BDBDBD; }

/* Dashboard */
.pd-kpi-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin-bottom: 22px; }
.pd-kpi { background: #FFF; border: 1px solid #E6E6E8; border-radius: 12px; padding: 16px; display: flex; gap: 12px; align-items: center; }
.pd-kpi-icon { width: 42px; height: 42px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; }
.pd-kpi-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pd-kpi-label { font-size: 11.5px; color: #6B7280; font-weight: 500; }
.pd-kpi-value { font-size: 15px; font-weight: 700; }
.pd-shell { display: grid; grid-template-columns: 1fr 320px; gap: 18px; }
.pd-main { background: #FFF; border: 1px solid #E6E6E8; border-radius: 12px; padding: 20px 24px; }
.pd-section-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; flex-wrap: wrap; gap: 12px; }
.pd-section-head h2 { font-size: 16px; font-weight: 700; margin: 0; }
.pd-mini-stats { display: flex; gap: 18px; }
.pd-mini-stats span { font-size: 12.5px; color: #6B7280; }
.pd-mini-stats strong { color: #1A1A1A; font-weight: 700; font-size: 14px; margin-right: 4px; }
.pd-tables { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.pd-table-card { background: #FAFBFD; border: 1px solid #E6E6E8; border-radius: 10px; padding: 14px 16px; }
.pd-table-head h3 { font-size: 14px; font-weight: 700; margin: 0 0 10px; color: #3061FF; }
.pd-table { width: 100%; border-collapse: collapse; }
.pd-table td { padding: 8px 0; font-size: 13px; border-bottom: 1px solid #F0F2F5; }
.pd-table tr:last-child td { border-bottom: none; }
.pd-num { text-align: right; font-weight: 500; }
.pd-total td { font-weight: 700; border-top: 1.5px solid #E6E6E8; border-bottom: none !important; padding-top: 12px; }
.pd-rail { display: flex; flex-direction: column; gap: 12px; }
.pd-nav-card { background: #FFF; border: 1px solid #E6E6E8; border-radius: 12px; padding: 16px; display: flex; align-items: center; gap: 12px; cursor: pointer; transition: transform 0.12s, box-shadow 0.12s, border-color 0.12s; }
.pd-nav-card:hover { transform: translateX(-2px); border-color: #3061FF; box-shadow: 0 6px 16px rgba(48,97,255,0.08); }
.pd-nav-icon { width: 42px; height: 42px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; }
.pd-nav-body { display: flex; flex-direction: column; flex: 1; gap: 2px; }
.pd-nav-body strong { font-size: 13.5px; font-weight: 600; }
.pd-nav-body span { font-size: 11.5px; color: #6B7280; }
.pd-nav-arrow { color: #BDBDBD; font-size: 18px; }
@media (max-width: 1100px) { .pd-kpi-row { grid-template-columns: repeat(3, 1fr); } .pd-shell { grid-template-columns: 1fr; } }

/* Payslip List (pl-*) */
.pl-card { background: #FFF; border: 1px solid #E6E6E8; border-radius: 12px; padding: 20px 24px; }
.pl-card-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.pl-card-head h2 { font-size: 16px; font-weight: 700; margin: 0; }
.pl-year { padding: 8px 14px; border: 1px solid #E6E6E8; border-radius: 8px; font-size: 13px; font-family: inherit; outline: none; background: #FFF; }
.pl-table { width: 100%; border-collapse: collapse; }
.pl-table th { text-align: left; padding: 12px 10px; font-size: 12px; font-weight: 600; color: #6B7280; border-bottom: 1px solid #E6E6E8; }
.pl-table td { padding: 14px 10px; font-size: 13.5px; border-bottom: 1px solid #F0F2F5; cursor: pointer; }
.pl-table tr:last-child td { border-bottom: none; }
.pl-table tbody tr:hover td { background: #F8FAFF; }
.pl-num { font-weight: 600; }
.pl-actions { text-align: right; width: 60px; }
.pl-download { background: #EAEFFF; color: #3061FF; border: none; width: 32px; height: 32px; border-radius: 8px; cursor: pointer; font-size: 14px; font-weight: 700; }
.pl-download:hover { background: #3061FF; color: #FFF; }
.pl-toast-overlay { position: fixed; inset: 0; background: rgba(15,23,42,0.45); display: flex; align-items: center; justify-content: center; z-index: 1100; }
.pl-toast-overlay.hidden { display: none; }
.pl-toast-card { background: #FFF; border-radius: 14px; padding: 32px 36px; text-align: center; min-width: 320px; box-shadow: 0 20px 50px rgba(0,0,0,0.25); }
.pl-toast-check { width: 56px; height: 56px; border-radius: 50%; background: #E3F8E8; color: #2E7D32; display: flex; align-items: center; justify-content: center; font-size: 28px; margin: 0 auto 14px; }
.pl-toast-card h3 { margin: 0 0 6px; font-size: 17px; }
.pl-toast-card p { margin: 0; color: #6B7280; font-size: 13px; }

/* Payslip Detail (psd-*) */
.psd-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
.psd-tabs { display: flex; gap: 24px; border-bottom: 1px solid #E6E6E8; flex: 1; }
.psd-tab { background: none; border: none; padding: 10px 2px; font-size: 14px; font-weight: 600; color: #6B7280; cursor: pointer; border-bottom: 2px solid transparent; font-family: inherit; margin-bottom: -1px; white-space: nowrap; }
.psd-tab.is-active { color: #3061FF; border-bottom-color: #3061FF; }
.psd-toolbar-right { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.psd-year,.psd-month { padding: 8px 12px; border: 1px solid #E6E6E8; border-radius: 8px; font-size: 13px; font-family: inherit; outline: none; background: #FFF; }
.psd-btn-outline { background: #FFF; color: #3061FF; border: 1px solid #3061FF; padding: 8px 14px; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit; }
.psd-btn-primary { background: #3061FF; color: #FFF; border: none; padding: 8px 16px; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit; }
.psd-card { background: #FFF; border: 1px solid #E6E6E8; border-radius: 12px; padding: 18px 22px; }
.psd-table { width: 100%; border-collapse: collapse; }
.psd-table th { text-align: left; padding: 12px 10px; font-size: 12px; font-weight: 600; color: #6B7280; border-bottom: 1px solid #E6E6E8; }
.psd-table td { padding: 14px 10px; font-size: 13px; border-bottom: 1px solid #F0F2F5; }
.psd-table tr:last-child td { border-bottom: none; }
.psd-pill { display: inline-block; padding: 4px 12px; border-radius: 999px; font-size: 11.5px; font-weight: 600; }
.psd-pill-present { background: #E3F8E8; color: #2E7D32; }
.psd-pill-absent  { background: #FDE2E2; color: #C0392B; }
.psd-leave-head { font-size: 12.5px; color: #6B7280; padding: 4px 0 14px; font-weight: 500; }
.psd-pagination { display: flex; gap: 8px; justify-content: flex-end; align-items: center; padding-top: 14px; font-size: 12.5px; color: #6B7280; }
.psd-pagination select { padding: 4px 8px; border: 1px solid #E6E6E8; border-radius: 6px; font-size: 12px; font-family: inherit; }
.psd-pg-btn { background: #FFF; border: 1px solid #E6E6E8; padding: 4px 10px; border-radius: 6px; cursor: pointer; font-family: inherit; }

/* Reimbursement (prq-*) */
.prq-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
.prq-year { padding: 8px 12px; border: 1px solid #E6E6E8; border-radius: 8px; font-size: 13px; font-family: inherit; outline: none; background: #FFF; }
.prq-actions { display: flex; gap: 8px; }
.prq-btn-outline { background: #FFF; color: #3061FF; border: 1px solid #3061FF; padding: 8px 14px; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit; }
.prq-btn-primary { background: #3061FF; color: #FFF; border: none; padding: 8px 16px; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit; }
.prq-card { background: #FFF; border: 1px solid #E6E6E8; border-radius: 12px; padding: 18px 22px; overflow-x: auto; }
.prq-table { width: 100%; border-collapse: collapse; }
.prq-table th { text-align: left; padding: 12px 10px; font-size: 12px; font-weight: 600; color: #6B7280; border-bottom: 1px solid #E6E6E8; }
.prq-table td { padding: 14px 10px; font-size: 13px; border-bottom: 1px solid #F0F2F5; vertical-align: top; }
.prq-table tr:last-child td { border-bottom: none; }
.prq-id { font-weight: 600; color: #3061FF; }
.prq-num { font-weight: 600; }
.prq-remarks { color: #6B7280; font-size: 12.5px; max-width: 240px; }
.prq-pill { display: inline-block; padding: 4px 12px; border-radius: 999px; font-size: 11.5px; font-weight: 600; }
.prq-pill-submitted { background: #EAEFFF; color: #3061FF; }
.prq-pill-approved { background: #E3F8E8; color: #2E7D32; }
.prq-pill-rejected { background: #FDE2E2; color: #C0392B; }
.prq-modal-overlay { position: fixed; inset: 0; background: rgba(15,23,42,0.45); display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 20px; }
.prq-modal-overlay.hidden { display: none; }
.prq-modal { background: #FFF; border-radius: 14px; width: 100%; max-width: 540px; max-height: 90vh; overflow: auto; box-shadow: 0 20px 50px rgba(0,0,0,0.25); }
.prq-modal-lg { max-width: 720px; }
.prq-modal-head { display: flex; justify-content: space-between; align-items: center; padding: 18px 22px; border-bottom: 1px solid #E6E6E8; }
.prq-modal-head h3 { margin: 0; font-size: 17px; font-weight: 600; }
.prq-modal-x { background: none; border: none; font-size: 24px; cursor: pointer; color: #6B7280; }
.prq-modal-body { padding: 20px 22px; }
.prq-modal-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 16px 22px; border-top: 1px solid #E6E6E8; }
.prq-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
.prq-field { display: block; margin-bottom: 14px; }
.prq-field-label { display: block; font-size: 12.5px; font-weight: 600; margin-bottom: 6px; }
.prq-field-label em { font-style: normal; color: #6B7280; font-weight: 400; }
.prq-field input, .prq-field select, .prq-field textarea { width: 100%; padding: 10px 12px; border: 1px solid #E6E6E8; border-radius: 8px; font-size: 13px; font-family: inherit; outline: none; box-sizing: border-box; resize: vertical; }
.prq-upload-sm { padding: 10px 12px; border: 1px dashed #E6E6E8; border-radius: 8px; font-size: 13px; color: #6B7280; cursor: pointer; display: flex; gap: 8px; align-items: center; }
.prq-textarea-wrap { position: relative; }
.prq-ai-chip { position: absolute; right: 10px; bottom: 10px; background: #EAEFFF; color: #3061FF; border: none; padding: 5px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 600; cursor: pointer; font-family: inherit; }
.prq-upload { border: 1.5px dashed #E6E6E8; border-radius: 10px; padding: 18px; display: flex; gap: 14px; align-items: center; font-size: 13px; cursor: pointer; }
.prq-upload-icon { width: 36px; height: 36px; background: #EAEFFF; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #3061FF; font-size: 16px; }
.prq-upload-meta { font-size: 11.5px; color: #6B7280; margin-top: 2px; }

/* Salary Advance (sa-*) — clone with sa- prefix */
.sa-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
.sa-year { padding: 8px 12px; border: 1px solid #E6E6E8; border-radius: 8px; font-size: 13px; font-family: inherit; outline: none; background: #FFF; }
.sa-actions { display: flex; gap: 8px; }
.sa-btn-outline { background: #FFF; color: #3061FF; border: 1px solid #3061FF; padding: 8px 14px; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit; }
.sa-btn-primary { background: #3061FF; color: #FFF; border: none; padding: 8px 16px; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit; }
.sa-card { background: #FFF; border: 1px solid #E6E6E8; border-radius: 12px; padding: 18px 22px; overflow-x: auto; }
.sa-table { width: 100%; border-collapse: collapse; }
.sa-table th { text-align: left; padding: 12px 10px; font-size: 12px; font-weight: 600; color: #6B7280; border-bottom: 1px solid #E6E6E8; }
.sa-table td { padding: 14px 10px; font-size: 13px; border-bottom: 1px solid #F0F2F5; vertical-align: top; }
.sa-table tr:last-child td { border-bottom: none; }
.sa-id { font-weight: 600; color: #3061FF; }
.sa-num { font-weight: 600; }
.sa-remarks { color: #6B7280; font-size: 12.5px; max-width: 240px; }
.sa-pill { display: inline-block; padding: 4px 12px; border-radius: 999px; font-size: 11.5px; font-weight: 600; }
.sa-pill-submitted { background: #EAEFFF; color: #3061FF; }
.sa-pill-approved { background: #E3F8E8; color: #2E7D32; }
.sa-pill-rejected { background: #FDE2E2; color: #C0392B; }

/* Flexible Benefits */
.fb-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
.fb-view-tabs { display: inline-flex; background: #F6F8FB; border-radius: 10px; padding: 4px; gap: 2px; }
.fb-view-tab { background: none; border: none; padding: 8px 18px; font-size: 13px; font-weight: 600; color: #6B7280; cursor: pointer; border-radius: 8px; font-family: inherit; }
.fb-view-tab.is-active { background: #FFF; color: #3061FF; box-shadow: 0 1px 4px rgba(0,0,0,0.06); }
.fb-year { padding: 8px 12px; border: 1px solid #E6E6E8; border-radius: 8px; font-size: 13px; font-family: inherit; outline: none; background: #FFF; }
.fb-card { background: #FFF; border: 1px solid #E6E6E8; border-radius: 12px; padding: 18px 22px; }
.fb-table { width: 100%; border-collapse: collapse; }
.fb-table th { text-align: left; padding: 12px 10px; font-size: 12px; font-weight: 600; color: #6B7280; border-bottom: 1px solid #E6E6E8; }
.fb-table td { padding: 14px 10px; font-size: 13.5px; border-bottom: 1px solid #F0F2F5; }
.fb-table tr:last-child td { border-bottom: none; }
.fb-link { color: #3061FF; cursor: pointer; font-weight: 600; font-size: 13px; }
.fb-toggle { position: relative; display: inline-block; width: 36px; height: 20px; }
.fb-toggle input { opacity: 0; width: 0; height: 0; }
.fb-slider { position: absolute; inset: 0; background: #CFD8E3; border-radius: 999px; cursor: pointer; transition: background 0.15s; }
.fb-slider::before { content: ""; position: absolute; left: 2px; top: 2px; width: 16px; height: 16px; background: #FFF; border-radius: 50%; transition: transform 0.15s; }
.fb-toggle input:checked + .fb-slider { background: #3061FF; }
.fb-toggle input:checked + .fb-slider::before { transform: translateX(16px); }
.fb-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.fb-card-item { background: #FFF; border: 1px solid #E6E6E8; border-radius: 12px; display: flex; overflow: hidden; }
.fb-card-bar { width: 6px; flex-shrink: 0; }
.fb-bar-on  { background: #2E7D32; }
.fb-bar-off { background: #C0392B; }
.fb-card-body { flex: 1; padding: 16px 18px; }
.fb-card-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.fb-card-head h3 { font-size: 15px; font-weight: 700; margin: 0; }
.fb-card-actions { display: flex; gap: 6px; }
.fb-icon-btn { background: none; border: none; width: 28px; height: 28px; border-radius: 6px; cursor: pointer; font-size: 13px; color: #6B7280; }
.fb-icon-btn:hover { background: #EAEFFF; color: #3061FF; }
.fb-status-label { font-size: 12.5px; font-weight: 600; margin: 0 0 6px; }
.fb-card-item.is-on  .fb-status-label { color: #2E7D32; }
.fb-card-item.is-off .fb-status-label { color: #C0392B; }
.fb-card-meta { font-size: 12.5px; color: #6B7280; margin: 0; }
.fb-card-meta strong { color: #1A1A1A; font-weight: 600; }
.fb-fab { position: fixed; right: 28px; bottom: 28px; width: 52px; height: 52px; border-radius: 50%; border: none; background: #3061FF; color: #FFF; font-size: 22px; cursor: pointer; box-shadow: 0 8px 24px rgba(48,97,255,0.32); z-index: 100; }
@media (max-width: 900px) { .fb-grid { grid-template-columns: repeat(2, 1fr); } }

/* ===========================================================
   PAYROLL — Figma-fidelity overrides
   =========================================================== */

/* Dashboard new layout — KPI cards plain, only first w/ icon */
.pd-page .pd-shell { grid-template-columns: 1fr 320px; gap: 16px; align-items: start; }
.pd-main-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.pd-page .pd-kpi-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-bottom: 0; }
.pd-page .pd-kpi { background: #FFF; border: 1px solid #E6E6E8; border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; align-items: stretch; }
.pd-page .pd-kpi-label { font-size: 11.5px; color: #6B7280; font-weight: 500; }
.pd-kpi-value-row { display: flex; align-items: center; gap: 8px; }
.pd-kpi-icon-sm { display: inline-flex; width: 22px; height: 22px; align-items: center; justify-content: center; font-size: 13px; color: #3061FF; background: #EAEFFF; border-radius: 5px; }
.pd-page .pd-kpi-value { font-size: 18px; font-weight: 700; color: #1A1A1A; }

.pd-detail-card { background: #FFF; border: 1px solid #E6E6E8; border-radius: 14px; padding: 22px 24px; }
.pd-detail-title { font-size: 16px; font-weight: 700; margin: 0 0 14px; color: #1A1A1A; }
.pd-stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 22px; }
.pd-stat-chip { background: #F4F7FB; border-radius: 10px; padding: 14px 18px; display: flex; justify-content: space-between; align-items: center; }
.pd-stat-chip span { font-size: 13px; color: #1A1A1A; font-weight: 500; }
.pd-stat-chip strong { font-size: 16px; font-weight: 700; color: #1A1A1A; }

.pd-tables { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-top: 1px solid #E6E6E8; padding-top: 12px; }
.pd-tables .pd-table-card { background: transparent; border: none; padding: 0 18px 0 0; }
.pd-tables .pd-table-card + .pd-table-card { padding: 0 0 0 18px; border-left: 1px solid #E6E6E8; }
.pd-table-section-title { font-size: 15px; font-weight: 700; color: #3061FF; margin: 0 0 12px; }
.pd-page .pd-table { width: 100%; border-collapse: collapse; }
.pd-page .pd-table .pd-th-blue { color: #3061FF; font-size: 13px; font-weight: 600; text-align: left; padding: 8px 0; border-bottom: 1px solid #E6E6E8; }
.pd-page .pd-table td { padding: 10px 0; font-size: 13.5px; color: #1A1A1A; border-bottom: 1px solid #F0F2F5; text-align: left; }
.pd-page .pd-table tr:last-child td { border-bottom: none; }
.pd-page .pd-table .pd-total td { font-weight: 700; border-top: 1.5px solid #E6E6E8; padding-top: 12px; }

/* Right rail simpler cards */
.pd-page .pd-rail { display: flex; flex-direction: column; gap: 12px; align-self: start; }
.pd-page .pd-nav-card { background: #FFF; border: 1px solid #E6E6E8; border-radius: 14px; padding: 18px 20px; display: flex; flex-direction: column; gap: 14px; cursor: pointer; transition: transform 0.12s, box-shadow 0.12s, border-color 0.12s; }
.pd-page .pd-nav-card:hover { transform: translateY(-2px); border-color: #3061FF; box-shadow: 0 6px 16px rgba(48,97,255,0.08); }
.pd-nav-icon-lg { width: 42px; height: 42px; border-radius: 10px; background: #EAEFFF; color: #3061FF; display: flex; align-items: center; justify-content: center; font-size: 20px; }
.pd-nav-title-row { display: flex; justify-content: space-between; align-items: center; }
.pd-nav-title-row strong { font-size: 14.5px; font-weight: 600; color: #1A1A1A; }
.pd-nav-title-row .pd-nav-arrow { color: #1A1A1A; font-size: 16px; }

/* Reimbursement / Advance new layout */
.prq-card, .sa-card { background: #FFF; border: 1px solid #E6E6E8; border-radius: 14px; padding: 20px 22px; position: relative; }
.prq-card-head, .sa-card-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.prq-card-head h2, .sa-card-head h2 { font-size: 16px; font-weight: 700; margin: 0; }
.prq-table-wrap, .sa-table-wrap { overflow-x: auto; }
.prq-card-foot, .sa-card-foot { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; padding-top: 0; border-top: none; }
.prq-card-foot .prq-btn-outline,.sa-card-foot .sa-btn-outline { background: #FFF; color: #3061FF; border: 1px solid #3061FF; }
.prq-card-foot .prq-btn-primary,.sa-card-foot .sa-btn-primary { background: #3061FF; color: #FFF; }
/* Hide old toolbar — page now uses card head + foot */
[data-view="payroll-reimbursement"] .prq-toolbar, [data-view="payroll-advance"] .sa-toolbar { display: none; }
.prq-fab, .sa-fab, .fb-fab { position: fixed; right: 28px; bottom: 28px; width: 48px; height: 48px; border-radius: 50%; border: none; background: #6A1B9A; color: #FFF; font-size: 18px; font-weight: 700; cursor: pointer; box-shadow: 0 8px 24px rgba(106,27,154,0.32); z-index: 100; display: flex; align-items: center; justify-content: center; }
.prq-fab:hover, .sa-fab:hover, .fb-fab:hover { background: #4A148C; }

/* Table cells — left-align amount per Figma, no currency symbol */
.prq-table td.prq-num, .sa-table td.sa-num { font-weight: 500; text-align: left; }

/* Reimbursement/Advance pill colors per Figma (Submitted=lavender chip) */
.prq-pill-submitted, .sa-pill-submitted { background: #EAEAFE; color: #5B5BD6; }
.prq-pill-rejected,  .sa-pill-rejected  { background: #FEE2E2; color: #C0392B; }
.prq-pill-approved,  .sa-pill-approved  { background: #D8F5DE; color: #207B36; }

/* Flexible Benefits — Table view */
.fb-card-header h2 { font-size: 15px; font-weight: 700; color: #3061FF; margin: 0 0 12px; }
.fb-page .fb-card { padding: 22px 24px; }
.fb-page .fb-table { width: 100%; border-collapse: collapse; }
.fb-page .fb-table th { color: #3061FF; font-weight: 600; font-size: 13px; padding: 10px 0; border-bottom: 1px solid #E6E6E8; text-align: left; }
.fb-page .fb-table td { padding: 14px 0; font-size: 13.5px; border-bottom: 1px solid #F0F2F5; }
.fb-page .fb-table tr:last-child td { border-bottom: none; }
.fb-cb { accent-color: #3061FF; width: 16px; height: 16px; cursor: pointer; }
.fb-page .fb-link { color: #3061FF; text-decoration: underline; cursor: pointer; font-size: 13px; font-weight: 500; }
.fb-page .fb-link:hover { text-decoration: none; }

/* Flexible Benefits — Card view */
.fb-grid-wrap { padding: 4px 0; }
.fb-grid-title { font-size: 15px; font-weight: 700; color: #1A1A1A; margin: 0 0 14px; }
.fb-page .fb-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.fb-page .fb-card-item { background: #FFF; border: 1px solid #E6E6E8; border-radius: 12px; display: flex; overflow: hidden; min-height: 84px; }
.fb-page .fb-card-bar { width: 5px; flex-shrink: 0; }
.fb-page .fb-bar-on  { background: #2E7D32; }
.fb-page .fb-bar-off { background: #C0392B; }
.fb-page .fb-card-body { flex: 1; padding: 14px 18px; display: flex; flex-direction: column; gap: 4px; }
.fb-page .fb-card-head { display: flex; justify-content: space-between; align-items: center; }
.fb-page .fb-card-head h3 { font-size: 14px; font-weight: 600; margin: 0; }
.fb-page .fb-card-actions { display: flex; gap: 6px; }
.fb-page .fb-icon-btn { background: none; border: none; width: 26px; height: 26px; border-radius: 6px; cursor: pointer; font-size: 12px; color: #6B7280; }
.fb-page .fb-status-label { font-size: 12px; font-weight: 500; margin: 0; color: #6B7280; }

@media (max-width: 1100px) { .pd-page .pd-shell { grid-template-columns: 1fr; } .pd-page .pd-kpi-row { grid-template-columns: repeat(3, 1fr); } .fb-page .fb-grid { grid-template-columns: repeat(2, 1fr); } }

/* ===========================================================
   PAYROLL DASHBOARD — full-width KPI + 2-col shell
   =========================================================== */
.pd-page { display: flex; flex-direction: column; gap: 16px; }
.pd-page-title { font-size: 20px; font-weight: 700; margin: 0; }
.pd-page .pd-kpi-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-bottom: 0; width: 100%; }
.pd-page .pd-shell { display: grid; grid-template-columns: 1fr 300px; gap: 16px; align-items: start; }
.pd-page .pd-detail-card { padding: 24px 26px; }

/* ===========================================================
   PAYROLL DASHBOARD — full-viewport fit, premium feel
   =========================================================== */
.pd-page { min-height: calc(100vh - 110px); display: flex; flex-direction: column; gap: 14px; padding: 18px 24px 24px; }
.pd-page-title { font-size: 22px; font-weight: 700; margin: 0; }

/* KPI cards — taller, blue product tone, larger numbers */
.pd-page .pd-kpi-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; flex-shrink: 0; }
.pd-page .pd-kpi { background: linear-gradient(180deg, #F4F7FF 0%, #EAEFFF 100%); border: 1px solid #DBE5FF; border-radius: 14px; padding: 22px 24px; min-height: 130px; display: flex; flex-direction: column; justify-content: space-between; gap: 10px; box-shadow: 0 1px 2px rgba(48,97,255,0.04); }
.pd-page .pd-kpi-label { font-size: 13px; color: #3061FF; font-weight: 600; letter-spacing: 0.1px; }
.pd-kpi-value-row { display: flex; align-items: center; gap: 10px; }
.pd-kpi-icon-sm { width: 30px; height: 30px; font-size: 16px; background: #FFFFFF; color: #3061FF; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid #DBE5FF; }
.pd-page .pd-kpi-value { font-size: 24px; font-weight: 700; color: #1A1A1A; line-height: 1.1; }

/* Shell flexes to fill remaining height */
.pd-page .pd-shell { display: grid; grid-template-columns: 1fr 300px; gap: 16px; align-items: stretch; flex: 1; min-height: 0; }

/* Detail card stretches to full height */
.pd-page .pd-detail-card { padding: 26px 30px; display: flex; flex-direction: column; gap: 18px; height: 100%; }
.pd-page .pd-detail-title { font-size: 18px; font-weight: 700; margin: 0; }
.pd-page .pd-stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.pd-page .pd-stat-chip { background: #F4F7FB; border-radius: 12px; padding: 18px 22px; display: flex; justify-content: space-between; align-items: center; min-height: 70px; }
.pd-page .pd-stat-chip span { font-size: 14px; color: #1A1A1A; font-weight: 500; }
.pd-page .pd-stat-chip strong { font-size: 20px; font-weight: 700; color: #1A1A1A; }
.pd-page .pd-tables { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 0; padding-top: 12px; border-top: 1px solid #E6E6E8; min-height: 0; }
.pd-page .pd-table-section-title { font-size: 16px; font-weight: 700; color: #3061FF; margin: 0 0 14px; }
.pd-page .pd-table .pd-th-blue { font-size: 14px; padding: 10px 0; }
.pd-page .pd-table td { padding: 14px 0; font-size: 14.5px; }
.pd-page .pd-table .pd-total td { font-size: 15px; }

/* Right rail — cards stretch evenly to fill height */
.pd-page .pd-rail { display: flex; flex-direction: column; gap: 14px; height: 100%; }
.pd-page .pd-nav-card { flex: 1; min-height: 90px; padding: 20px 22px; display: flex; flex-direction: column; justify-content: center; gap: 14px; }
.pd-page .pd-nav-icon-lg { width: 48px; height: 48px; font-size: 22px; border-radius: 12px; }
.pd-page .pd-nav-title-row strong { font-size: 15.5px; font-weight: 600; }
.pd-page .pd-nav-title-row .pd-nav-arrow { font-size: 18px; color: #3061FF; }

/* ===========================================================
   EVENTS MODULE — consolidated styles
   =========================================================== */
.ev-page,.evd-page,.re-page,.he-page,.er-page,.rs-page,.hw-page,.hed-page,.ff-page { padding: 24px 28px; font-family: 'GeneralSansFont','Salesforce Sans',system-ui,sans-serif; color: #1A1A1A; }
.ev-header,.evd-header,.re-header,.he-header,.er-header,.rs-header,.hw-header,.hed-header,.ff-header { margin-bottom: 16px; }
.ev-title,.evd-title,.re-title,.he-title,.er-title,.rs-title,.hw-title,.hed-title,.ff-title { font-size: 22px; font-weight: 700; margin: 0 0 6px; }
.ev-breadcrumb,.evd-breadcrumb,.re-breadcrumb,.he-breadcrumb,.er-breadcrumb,.rs-breadcrumb,.hw-breadcrumb,.hed-breadcrumb,.ff-breadcrumb { font-size: 13px; color: #6B7280; }
.ev-breadcrumb a,.evd-breadcrumb a,.re-breadcrumb a,.he-breadcrumb a,.er-breadcrumb a,.rs-breadcrumb a,.hw-breadcrumb a,.hed-breadcrumb a,.ff-breadcrumb a { color: #3061FF; cursor: pointer; text-decoration: none; }
.ev-sep,.evd-sep,.re-sep,.he-sep,.er-sep,.rs-sep,.hw-sep,.hed-sep,.ff-sep { margin: 0 8px; color: #BDBDBD; }

/* Landing */
.ev-shell { display: grid; grid-template-columns: 1fr 320px; gap: 18px; }
.ev-main-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.ev-search-card { background: #FFF; border: 1px solid #E6E6E8; border-radius: 12px; padding: 16px 18px; }
.ev-search-row { display: flex; gap: 12px; align-items: center; }
.ev-search-wrap { position: relative; flex: 1; }
.ev-search-wrap input { width: 100%; padding: 10px 44px 10px 36px; border: 1px solid #E6E6E8; border-radius: 999px; font-size: 13.5px; outline: none; box-sizing: border-box; font-family: inherit; background: #F6F8FB; }
.ev-search-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); font-size: 12px; color: #6B7280; }
.ev-mic { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); border: none; background: #3061FF; color: #FFF; width: 30px; height: 30px; border-radius: 50%; cursor: pointer; font-size: 12px; }
.ev-filter-btn { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border: 1px solid #E6E6E8; border-radius: 999px; background: #FFF; cursor: pointer; font-size: 13px; font-family: inherit; font-weight: 600; }
.ev-section { background: #FFF; border: 1px solid #E6E6E8; border-radius: 12px; padding: 18px 22px; }
.ev-section-head { margin-bottom: 14px; }
.ev-section-head h2 { font-size: 15px; font-weight: 700; margin: 0; }
.ev-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.ev-card { background: #FFF; border: 1px solid #E6E6E8; border-radius: 14px; overflow: hidden; cursor: pointer; transition: transform 0.15s, box-shadow 0.15s; }
.ev-card:hover { transform: translateY(-3px); box-shadow: 0 8px 22px rgba(48,97,255,0.10); }
.ev-card-cover { height: 130px; position: relative; }
.ev-cat-pill { position: absolute; top: 10px; left: 12px; background: rgba(255,255,255,0.92); padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 600; z-index: 1; }
.ev-card-body { padding: 14px 16px; }
.ev-card-body h3 { font-size: 14.5px; font-weight: 700; margin: 0 0 8px; line-height: 1.3; }
.ev-card-meta { display: flex; gap: 8px; flex-wrap: wrap; }
.ev-meta-pill { background: #F4F7FB; padding: 4px 10px; border-radius: 999px; font-size: 11.5px; color: #444; font-weight: 500; }
.ev-mode { padding: 4px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 600; }
.ev-mode-online  { background: #E3F2FD; color: #1565C0; }
.ev-mode-offline { background: #FFF1E6; color: #A65D2A; }
.ev-mode-hybrid  { background: #F3E5F5; color: #6A1B9A; }
.ev-right-rail { display: flex; flex-direction: column; gap: 14px; }
.ev-rail-card { background: #FFF; border: 1px solid #E6E6E8; border-radius: 12px; padding: 16px 18px; }
.ev-rail-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.ev-rail-head h3 { font-size: 14px; font-weight: 700; margin: 0; }
.ev-link-btn { background: none; border: none; color: #3061FF; font-size: 12.5px; font-weight: 600; cursor: pointer; padding: 0; font-family: inherit; }
.ev-mini-list { list-style: none; padding: 0; margin: 0 0 12px; display: flex; flex-direction: column; gap: 10px; }
.ev-mini-item { display: flex; gap: 10px; padding: 10px; background: #F6F8FB; border-radius: 10px; cursor: pointer; align-items: center; }
.ev-mini-thumb { width: 48px; height: 48px; border-radius: 8px; flex-shrink: 0; }
.ev-mini-body { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ev-mini-body strong { font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ev-mini-time { font-size: 11px; color: #6B7280; }
.ev-mini-status { font-size: 10.5px; font-weight: 600; padding: 2px 8px; border-radius: 999px; align-self: flex-start; }
.ev-status-inreview { background: #FFF4D6; color: #B07A00; }
.ev-status-approved { background: #E3F8E8; color: #2E7D32; }
.ev-host-cta { width: 100%; background: #3061FF; color: #FFF; border: none; padding: 10px; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit; margin-top: 4px; }

/* Detail (attendee) */
.evd-banner { border-radius: 14px; height: 220px; position: relative; overflow: hidden; margin-bottom: 18px; box-shadow: 0 6px 18px rgba(0,0,0,0.10); background: linear-gradient(135deg, #4F46E5, #9333EA); }
.evd-banner-overlay { position: absolute; inset: 0; padding: 26px 30px; display: flex; flex-direction: column; justify-content: flex-end; gap: 12px; background: linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.55) 100%); color: #FFF; }
.evd-banner-overlay h2 { margin: 0; font-size: 26px; font-weight: 700; }
.evd-banner-tags { display: flex; gap: 8px; }
.evd-price-pill { background: #FFF; color: #1A1A1A; padding: 6px 14px; border-radius: 999px; font-size: 13px; font-weight: 700; }
.evd-type-pill  { background: rgba(255,255,255,0.18); border: 1px solid rgba(255,255,255,0.4); color: #FFF; padding: 6px 14px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.evd-tabs { display: flex; gap: 24px; border-bottom: 1px solid #E6E6E8; margin-bottom: 18px; }
.evd-tab { background: none; border: none; padding: 10px 2px; font-size: 14px; font-weight: 600; color: #6B7280; cursor: pointer; border-bottom: 2px solid transparent; font-family: inherit; margin-bottom: -1px; }
.evd-tab.is-active { color: #3061FF; border-bottom-color: #3061FF; }
.evd-shell { display: grid; grid-template-columns: 1fr 320px; gap: 16px; margin-bottom: 18px; }
.evd-main, .evd-side { display: flex; flex-direction: column; gap: 14px; }
.evd-card { background: #FFF; border: 1px solid #E6E6E8; border-radius: 12px; padding: 18px 22px; }
.evd-card h3 { font-size: 15px; font-weight: 700; margin: 0 0 12px; }
.evd-card p  { margin: 0; font-size: 13.5px; line-height: 1.6; color: #333; }
.evd-card-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.evd-pill-meals { background: #E3F8E8; color: #2E7D32; padding: 4px 12px; border-radius: 999px; font-size: 11.5px; font-weight: 600; }
.evd-meal-list { list-style: none; padding: 0; margin: 0; }
.evd-meal-row { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid #F0F2F5; font-size: 13px; }
.evd-expect-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.evd-expect-list li { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; color: #333; }
.evd-check { width: 20px; height: 20px; border-radius: 50%; background: #E3F8E8; color: #2E7D32; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; flex-shrink: 0; }
.evd-sched-day { margin-bottom: 18px; }
.evd-day-head { font-size: 14px; font-weight: 700; margin: 0 0 10px; color: #3061FF; }
.evd-sess-list { list-style: none; padding: 0; margin: 0; }
.evd-sess-row { display: flex; justify-content: space-between; align-items: center; padding: 14px; background: #F6F8FB; border-radius: 10px; margin-bottom: 8px; }
.evd-sess-main { display: flex; flex-direction: column; gap: 4px; }
.evd-sess-main strong { font-size: 14px; }
.evd-sess-meta { font-size: 12px; color: #6B7280; }
.evd-pill-ongoing { background: #FFF4D6; color: #B07A00; padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 600; }
.evd-price-chip { background: #EAEFFF; color: #3061FF; padding: 4px 12px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.evd-fb-table { width: 100%; border-collapse: collapse; margin-top: 6px; }
.evd-fb-table th { text-align: left; padding: 10px 8px; font-size: 12px; font-weight: 600; color: #6B7280; border-bottom: 1px solid #E6E6E8; }
.evd-fb-table td { padding: 12px 8px; font-size: 13px; border-bottom: 1px solid #F0F2F5; }
.evd-fb-pill { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 600; }
.evd-fb-completed { background: #E3F8E8; color: #2E7D32; }
.evd-fb-pending   { background: #FFF4D6; color: #B07A00; }
.evd-btn-link { background: none; border: none; color: #3061FF; font-size: 12.5px; font-weight: 600; cursor: pointer; font-family: inherit; }
.evd-footer { background: #FFF; border: 1px solid #E6E6E8; border-radius: 12px; padding: 14px 18px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 14px; }
.evd-meta { display: flex; gap: 16px; font-size: 12.5px; color: #6B7280; flex-wrap: wrap; align-items: center; }
.evd-meta-mode { padding: 4px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 600; }
.evd-mode-hybrid  { background: #F3E5F5; color: #6A1B9A; }
.evd-mode-online  { background: #E3F2FD; color: #1565C0; }
.evd-mode-offline { background: #FFF1E6; color: #A65D2A; }
.evd-cta-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.evd-state-pill { padding: 4px 12px; border-radius: 999px; font-size: 12px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
.evd-state-live { background: #FDE2E2; color: #C0392B; }
.evd-state-upcoming { background: #FFF4D6; color: #B07A00; }
.evd-state-completed { background: #E3F8E8; color: #2E7D32; }
.evd-live-dot { width: 8px; height: 8px; background: #C0392B; border-radius: 50%; }
.evd-btn-outline { background: #FFF; color: #3061FF; border: 1px solid #3061FF; padding: 8px 16px; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit; }
.evd-btn-primary { background: #3061FF; color: #FFF; border: none; padding: 8px 18px; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit; }
.evd-state-switcher,.rs-state-switcher,.hed-state-switcher,.ff-state-switcher { margin-top: 16px; padding: 10px 14px; background: #FFF; border: 1px dashed #3061FF; border-radius: 8px; font-size: 12px; color: #6B7280; display: flex; gap: 10px; align-items: center; }
.evd-state-switcher label,.rs-state-switcher label,.hed-state-switcher label,.ff-state-switcher label { font-weight: 600; color: #3061FF; }
.evd-state-switcher select,.rs-state-switcher select,.hed-state-switcher select,.ff-state-switcher select { padding: 4px 10px; border: 1px solid #E6E6E8; border-radius: 4px; font-size: 12px; font-family: inherit; }

/* Registered Events list */
.re-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
.re-tabs,.he-tabs { display: flex; gap: 24px; border-bottom: 1px solid #E6E6E8; flex: 1; }
.re-tab,.he-tab { background: none; border: none; padding: 10px 2px; font-size: 14px; font-weight: 600; color: #6B7280; cursor: pointer; border-bottom: 2px solid transparent; font-family: inherit; margin-bottom: -1px; }
.re-tab.is-active,.he-tab.is-active { color: #3061FF; border-bottom-color: #3061FF; }
.re-search-wrap { position: relative; width: 280px; }
.re-search-wrap input { width: 100%; padding: 8px 14px 8px 32px; border: 1px solid #E6E6E8; border-radius: 999px; font-size: 13px; outline: none; box-sizing: border-box; font-family: inherit; background: #F6F8FB; }
.re-search-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); font-size: 12px; color: #6B7280; }
.re-list,.he-list { display: flex; flex-direction: column; gap: 12px; }
.re-row,.he-row { background: #FFF; border: 1px solid #E6E6E8; border-radius: 12px; padding: 16px 18px; display: flex; gap: 16px; align-items: center; }
.re-thumb,.he-thumb { width: 96px; height: 80px; border-radius: 10px; flex-shrink: 0; }
.re-main,.he-main { flex: 1; min-width: 0; }
.re-main h3,.he-row-head h3 { font-size: 15px; font-weight: 700; margin: 0 0 6px; }
.he-row-head { display: flex; gap: 10px; align-items: center; margin-bottom: 6px; flex-wrap: wrap; }
.re-meta,.he-meta { display: flex; gap: 12px; font-size: 12px; color: #6B7280; flex-wrap: wrap; align-items: center; margin-bottom: 6px; }
.re-mode,.he-mode { padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 600; }
.re-mode-online,.he-mode-online   { background: #E3F2FD; color: #1565C0; }
.re-mode-offline,.he-mode-offline { background: #FFF1E6; color: #A65D2A; }
.re-mode-hybrid,.he-mode-hybrid   { background: #F3E5F5; color: #6A1B9A; }
.re-sub,.he-sub { display: flex; gap: 14px; font-size: 12px; color: #444; flex-wrap: wrap; }
.re-side,.he-side { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; min-width: 180px; }
.re-live { display: inline-flex; align-items: center; gap: 6px; color: #C0392B; font-size: 12px; font-weight: 600; }
.re-live-dot { width: 8px; height: 8px; background: #C0392B; border-radius: 50%; }
.re-status,.he-status { padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 600; }
.re-status-cancelled,.re-status-hostcancel { background: #FDE2E2; color: #C0392B; }
.re-status-completed { background: #E3F8E8; color: #2E7D32; }
.he-status-upcoming  { background: #FFF4D6; color: #B07A00; }
.he-status-ongoing   { background: #FDE2E2; color: #C0392B; }
.he-status-completed { background: #E3F8E8; color: #2E7D32; }
.he-status-rejected  { background: #FDE2E2; color: #C0392B; }
.he-status-deletion  { background: #FFE2E2; color: #B91C1C; }
.re-actions,.he-actions { display: flex; gap: 8px; }
.re-btn-outline,.he-btn-outline { background: #FFF; color: #3061FF; border: 1px solid #3061FF; padding: 7px 14px; border-radius: 8px; font-size: 12.5px; font-weight: 600; cursor: pointer; font-family: inherit; }
.re-btn-primary,.he-btn-primary { background: #3061FF; color: #FFF; border: none; padding: 7px 14px; border-radius: 8px; font-size: 12.5px; font-weight: 600; cursor: pointer; font-family: inherit; }
.re-empty,.he-empty { background: #FFF; border: 1px solid #E6E6E8; border-radius: 14px; padding: 60px 24px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.re-empty-art,.he-empty-art { font-size: 56px; }
.he-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.he-toolbar-right { display: flex; gap: 10px; align-items: center; }
.he-search-wrap { position: relative; width: 240px; }
.he-search-wrap input { width: 100%; padding: 8px 14px 8px 32px; border: 1px solid #E6E6E8; border-radius: 999px; font-size: 13px; outline: none; box-sizing: border-box; font-family: inherit; background: #F6F8FB; }
.he-search-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); font-size: 12px; color: #6B7280; }

/* Wizards (er, hw) — minimal preview styles */
.er-stepper,.hw-stepper { background: #FFF; border: 1px solid #E6E6E8; border-radius: 12px; padding: 16px 22px; margin-bottom: 14px; display: flex; gap: 18px; overflow-x: auto; }
.er-step,.hw-step { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: #6B7280; white-space: nowrap; }
.er-step-num,.hw-step-num { width: 28px; height: 28px; border-radius: 50%; background: #F4F7FB; color: #6B7280; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 12px; border: 1px solid #E6E6E8; }
.er-step.is-active .er-step-num,.hw-step.is-active .hw-step-num { background: #3061FF; color: #FFF; border-color: #3061FF; }
.er-step.is-done .er-step-num,.hw-step.is-done .hw-step-num { background: #E3F8E8; color: #2E7D32; border-color: #2E7D32; }
.er-card,.hw-card { background: #FFF; border: 1px solid #E6E6E8; border-radius: 12px; padding: 24px 28px; margin-bottom: 14px; }
.er-step-title,.hw-step-title { font-size: 17px; font-weight: 700; margin: 0 0 18px; }
.er-foot,.hw-foot { background: #FFF; border: 1px solid #E6E6E8; border-radius: 12px; padding: 14px 22px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; }
.er-btn-outline,.hw-btn-outline,.rs-btn-outline,.hed-btn-outline,.ff-btn-outline { background: #FFF; color: #3061FF; border: 1px solid #3061FF; padding: 8px 18px; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit; }
.er-btn-primary,.hw-btn-primary,.rs-btn-primary,.hed-btn-primary,.ff-btn-primary { background: #3061FF; color: #FFF; border: none; padding: 8px 22px; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit; }
.rs-btn-danger { background: #C0392B; color: #FFF; border: none; padding: 8px 16px; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit; }
.hed-btn-danger-outline,.ff-btn-danger-outline { background: #FFF; color: #C0392B; border: 1px solid #C0392B; padding: 8px 16px; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit; }

/* Registration Summary, Hosted Detail, Feedback — minimal preview styling */
.rs-meta-card,.ff-meta-card { background: #FFF; border: 1px solid #E6E6E8; border-radius: 12px; padding: 18px 22px; margin-bottom: 14px; display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; }
.rs-shell,.evd-shell,.hed-shell,.ff-shell { display: grid; grid-template-columns: 1fr 320px; gap: 14px; margin-bottom: 14px; }
.ff-shell { grid-template-columns: 1fr 1fr; }
.rs-card,.hed-card,.ff-card { background: #FFF; border: 1px solid #E6E6E8; border-radius: 12px; padding: 18px 22px; }
.rs-card h3,.hed-card h3,.ff-card h3 { font-size: 15px; font-weight: 700; margin: 0 0 12px; }

.hed-banner { border-radius: 14px; height: 220px; position: relative; overflow: hidden; margin-bottom: 16px; background: linear-gradient(135deg, #4F46E5, #9333EA); }
.hed-banner-overlay { position: absolute; inset: 0; padding: 26px 30px; display: flex; flex-direction: column; justify-content: flex-end; gap: 12px; background: linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.55) 100%); color: #FFF; }
.hed-banner-overlay h2 { margin: 0; font-size: 26px; font-weight: 700; }
.hed-tabs { display: flex; gap: 24px; border-bottom: 1px solid #E6E6E8; margin-bottom: 16px; }
.hed-tab { background: none; border: none; padding: 10px 2px; font-size: 14px; font-weight: 600; color: #6B7280; cursor: pointer; border-bottom: 2px solid transparent; font-family: inherit; margin-bottom: -1px; }
.hed-tab.is-active { color: #3061FF; border-bottom-color: #3061FF; }
.hed-state-pill { padding: 4px 12px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.hed-state-review,.hed-state-upcoming  { background: #FFF4D6; color: #B07A00; }
.hed-state-ongoing,.hed-state-rejected { background: #FDE2E2; color: #C0392B; }
.hed-state-completed { background: #E3F8E8; color: #2E7D32; }
.hed-state-deletion  { background: #FFE2E2; color: #B91C1C; }
.hed-footer { background: #FFF; border: 1px solid #E6E6E8; border-radius: 12px; padding: 14px 18px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 14px; }
.hed-cta-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

.ff-fill-card { background: #FFF; border: 1px solid #E6E6E8; border-radius: 12px; padding: 22px 26px; margin-bottom: 14px; }
.ff-progress { flex: 1; height: 8px; background: #F4F7FB; border-radius: 999px; overflow: hidden; }
.ff-progress-bar { height: 100%; background: #3061FF; transition: width 0.2s; }
.ff-fill-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.ff-q-card { padding: 18px 20px; background: #F6F8FB; border-radius: 10px; margin-bottom: 14px; }
.ff-result-bar { height: 8px; background: #FFF; border-radius: 999px; overflow: hidden; border: 1px solid #E6E6E8; }
.ff-result-fill { height: 100%; background: #3061FF; transition: width 0.3s; }

@media (max-width: 1100px) { .ev-shell, .evd-shell, .rs-shell, .hed-shell, .ff-shell { grid-template-columns: 1fr; } .ev-grid { grid-template-columns: repeat(2, 1fr); } }

/* ===========================================================
   EVENTS — Interactive banner + card decorations
   =========================================================== */
.ev-cover-deco { position: absolute; right: -8px; bottom: -8px; font-size: 64px; opacity: 0.45; line-height: 1; user-select: none; pointer-events: none; transform: rotate(-15deg); }
.ev-card-cover { background-image: radial-gradient(circle at top right, rgba(255,255,255,0.15) 0%, transparent 50%), radial-gradient(circle at bottom left, rgba(0,0,0,0.10) 0%, transparent 60%); background-blend-mode: overlay; }
.ev-card:hover .ev-cover-deco { transform: rotate(-5deg) scale(1.1); transition: transform 0.3s; }

/* Event Detail banner decoration */
.evd-banner-pattern { position: absolute; inset: 0; background-image:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,0.12) 2px, transparent 3px),
    radial-gradient(circle at 60% 70%, rgba(255,255,255,0.10) 2px, transparent 3px),
    radial-gradient(circle at 85% 25%, rgba(255,255,255,0.14) 3px, transparent 4px),
    radial-gradient(circle at 35% 80%, rgba(255,255,255,0.08) 2px, transparent 3px),
    linear-gradient(45deg, transparent 48%, rgba(255,255,255,0.05) 49%, rgba(255,255,255,0.05) 51%, transparent 52%);
    background-size: 60px 60px, 80px 80px, 70px 70px, 50px 50px, 100% 100%;
    pointer-events: none;
}
.evd-banner-overlay::before { content: '🎤'; position: absolute; right: 32px; top: 24px; font-size: 72px; opacity: 0.20; transform: rotate(12deg); pointer-events: none; }

.hed-banner { position: relative; }
.hed-banner-deco { display: none; } /* hidden — using ::before instead */
.hed-banner-overlay::before { content: '🎤'; position: absolute; right: 32px; top: 24px; font-size: 72px; opacity: 0.20; transform: rotate(12deg); pointer-events: none; }

.ev-filter-badge { background: #3061FF; color: #FFF; font-size: 11px; padding: 1px 7px; border-radius: 999px; font-weight: 700; }
.ev-drawer-overlay { position: fixed; inset: 0; background: rgba(15,23,42,0.40); display: flex; justify-content: flex-end; z-index: 1200; }
.ev-drawer-overlay.hidden { display: none; }
.ev-drawer { background: #FFF; width: 360px; max-width: 90vw; height: 100vh; display: flex; flex-direction: column; box-shadow: -10px 0 30px rgba(0,0,0,0.18); }
.ev-drawer-head { display: flex; justify-content: space-between; align-items: center; padding: 18px 22px; border-bottom: 1px solid #E6E6E8; }
.ev-drawer-head h3 { margin: 0; font-size: 17px; font-weight: 600; }
.ev-drawer-x { background: none; border: none; font-size: 24px; cursor: pointer; color: #6B7280; }
.ev-drawer-body { padding: 20px 22px; flex: 1; overflow-y: auto; }
.ev-drawer-foot { display: flex; justify-content: space-between; gap: 10px; padding: 16px 22px; border-top: 1px solid #E6E6E8; }
.ev-field { display: block; margin-bottom: 14px; }
.ev-field-label { display: block; font-size: 12.5px; font-weight: 600; margin-bottom: 6px; }
.ev-field select { width: 100%; padding: 10px 12px; border: 1px solid #E6E6E8; border-radius: 8px; font-size: 13px; font-family: inherit; outline: none; box-sizing: border-box; }
.ev-btn-outline { background: #FFF; color: #3061FF; border: 1px solid #3061FF; padding: 8px 18px; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit; }
.ev-btn-primary { background: #3061FF; color: #FFF; border: none; padding: 8px 20px; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit; }

/* Registration wizard — Figma-fidelity */
.er-mode-toggle { display: flex; gap: 12px; margin-bottom: 18px; }
.er-mode-pill { display: inline-flex; align-items: center; gap: 8px; padding: 8px 18px; border-radius: 999px; border: 1.5px solid #E6E6E8; cursor: pointer; font-size: 13px; font-weight: 500; background: #FFF; font-family: inherit; }
.er-mode-pill.is-on { background: #EAEFFF; border-color: #3061FF; color: #3061FF; font-weight: 600; }
.er-bulk-shell { display: grid; grid-template-columns: 260px 1fr; gap: 18px; }
.er-groups { background: #FFF; border-right: 1px solid #E6E6E8; padding-right: 14px; }
.er-group-row { display: flex; gap: 10px; padding: 10px 12px; background: #F6F8FB; border-radius: 8px; align-items: center; cursor: pointer; margin-bottom: 8px; }
.er-group-row.is-on { background: #EAEFFF; }
.er-group-row strong { display: block; font-size: 13px; font-weight: 600; }
.er-group-row span { display: block; font-size: 11.5px; color: #6B7280; }
.er-add-guest-card { background: #F6F8FB; border-radius: 10px; padding: 16px 18px; margin-bottom: 18px; }
.er-add-guest-card h3 { font-size: 13.5px; font-weight: 700; margin: 0 0 12px; }
.er-add-guest-row { display: grid; grid-template-columns: 1fr 1fr 1fr auto; gap: 12px; align-items: end; }
.er-add-guest-row label { display: flex; flex-direction: column; gap: 4px; }
.er-add-guest-row label span { font-size: 11.5px; font-weight: 600; }
.er-add-guest-row input { padding: 8px 12px; border: 1px solid #E6E6E8; border-radius: 8px; font-size: 13px; font-family: inherit; }
.er-hint { font-size: 11.5px; color: #6B7280; margin-top: 8px; }
.er-pt-table { width: 100%; border-collapse: collapse; }
.er-pt-table th { text-align: left; padding: 10px; font-size: 12px; font-weight: 600; color: #6B7280; border-bottom: 1px solid #E6E6E8; }
.er-pt-table td { padding: 10px; font-size: 13px; border-bottom: 1px solid #F0F2F5; }
.er-type-pill { padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 600; }
.er-type-myself { background: #EAEFFF; color: #3061FF; }
.er-type-guest  { background: #FFF1E6; color: #A65D2A; }
.er-type-group  { background: #F3E5F5; color: #6A1B9A; }
.er-toggle { position: relative; display: inline-block; width: 32px; height: 18px; }
.er-toggle input { opacity: 0; width: 0; height: 0; }
.er-slider { position: absolute; inset: 0; background: #CFD8E3; border-radius: 999px; cursor: pointer; transition: background 0.15s; }
.er-slider::before { content: ""; position: absolute; left: 2px; top: 2px; width: 14px; height: 14px; background: #FFF; border-radius: 50%; transition: transform 0.15s; }
.er-toggle input:checked + .er-slider { background: #3061FF; }
.er-toggle input:checked + .er-slider::before { transform: translateX(14px); }
.er-survey-btn { background: #3061FF; color: #FFF; border: none; padding: 4px 12px; border-radius: 6px; font-size: 11.5px; font-weight: 600; cursor: pointer; font-family: inherit; }
.er-survey-btn.is-done { background: #E3F8E8; color: #2E7D32; }
.er-info-banner { background: #EAEFFF; color: #3061FF; padding: 12px 16px; border-radius: 8px; font-size: 13px; margin-bottom: 16px; }
.er-day-block { margin-bottom: 18px; }
.er-day-head { display: flex; gap: 12px; align-items: center; padding: 10px 14px; background: #F4F7FB; border-radius: 8px; margin-bottom: 8px; }
.er-day-head strong { color: #C0392B; font-size: 13px; }
.er-day-head label { font-size: 12.5px; font-weight: 600; display: flex; gap: 6px; align-items: center; margin-left: auto; cursor: pointer; }
.er-sess-row { display: flex; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid #F0F2F5; }
.er-sess-row label { display: flex; gap: 10px; align-items: flex-start; flex: 1; cursor: pointer; }
.er-sess-row strong { display: block; font-size: 13.5px; font-weight: 600; }
.er-sess-row .er-sess-time { display: block; font-size: 12px; color: #6B7280; margin-top: 2px; }
.er-price-chip { background: #EAEFFF; color: #3061FF; padding: 4px 12px; border-radius: 999px; font-size: 12px; font-weight: 600; align-self: center; }
.er-sum-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; margin-bottom: 14px; }
.er-sum-card { background: #F6F8FB; border-radius: 10px; padding: 16px 18px; }
.er-sum-card h3 { font-size: 14px; color: #3061FF; margin: 0 0 12px; font-weight: 700; }
.er-sum-row { display: flex; justify-content: space-between; padding: 6px 0; font-size: 13px; }
.er-sum-row.er-sum-total { border-top: 1px solid #E6E6E8; margin-top: 6px; padding-top: 10px; font-size: 14px; font-weight: 700; }
.er-sum-day { margin-bottom: 8px; }
.er-sum-day strong { color: #C0392B; font-size: 12.5px; display: block; margin-bottom: 4px; }
.er-sum-day ul { list-style: none; padding: 0; margin: 0; }
.er-sum-day li { display: flex; justify-content: space-between; padding: 4px 0; font-size: 12.5px; }
.er-sum-day li span { color: #3061FF; font-weight: 600; }
.er-note { background: #FFF8E5; border-left: 4px solid #B07A00; padding: 14px 18px; border-radius: 8px; font-size: 13px; }
.er-note strong { color: #B07A00; }
.er-note p { margin: 4px 0; }
.er-pay-modal-overlay { position: fixed; inset: 0; background: rgba(15,23,42,0.45); display: flex; align-items: center; justify-content: center; z-index: 1200; padding: 20px; }
.er-pay-modal-overlay.hidden { display: none; }
.er-pay-modal { background: #FFF; border-radius: 14px; width: 100%; max-width: 460px; box-shadow: 0 20px 50px rgba(0,0,0,0.25); }
.er-pay-head { padding: 16px 22px; border-bottom: 1px solid #E6E6E8; display: flex; align-items: center; gap: 10px; }
.er-pay-logo { width: 28px; height: 28px; background: #F59E0B; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; color: #FFF; font-weight: 700; font-size: 14px; }
.er-pay-head h3 { margin: 0; font-size: 15px; font-weight: 700; }
.er-pay-head .er-pay-tr { display: block; font-size: 11px; color: #6B7280; }
.er-pay-body { padding: 18px 22px; }
.er-pay-body h4 { margin: 0 0 12px; font-size: 13px; }
.er-pay-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.er-pay-list li label { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid #E6E6E8; border-radius: 8px; cursor: pointer; font-size: 13px; }
.er-pay-list input { accent-color: #3061FF; }
.er-pay-bank-icon { width: 28px; height: 18px; border-radius: 4px; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 9px; color: #FFF; flex-shrink: 0; }
.er-pay-foot { padding: 16px 22px; border-top: 1px solid #E6E6E8; display: flex; justify-content: flex-end; gap: 10px; }

@media (max-width: 900px) { .er-bulk-shell, .er-sum-grid { grid-template-columns: 1fr; } .er-add-guest-row { grid-template-columns: 1fr; } }

/* ===========================================================
   EVENTS — Realistic event imagery (CSS-only seminar/auditorium look)
   =========================================================== */

/* Main banners override — looks like a real darkened auditorium with stage lighting */
.evd-banner, .hed-banner {
    background: #0E1E33 !important;
    position: relative;
    overflow: hidden;
}
.evd-banner::before, .hed-banner::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        /* Stage light glow */
        radial-gradient(ellipse 45% 50% at 50% 35%, rgba(135, 206, 250, 0.55) 0%, rgba(135, 206, 250, 0.15) 30%, transparent 60%),
        radial-gradient(ellipse 30% 35% at 50% 30%, rgba(255, 255, 255, 0.35) 0%, transparent 50%),
        /* Side stage lights */
        radial-gradient(ellipse 25% 60% at 15% 40%, rgba(56, 178, 172, 0.25) 0%, transparent 60%),
        radial-gradient(ellipse 25% 60% at 85% 40%, rgba(56, 178, 172, 0.25) 0%, transparent 60%),
        /* Audience silhouettes warm glow at bottom */
        linear-gradient(0deg, rgba(80, 50, 30, 0.45) 0%, rgba(80, 50, 30, 0.20) 12%, transparent 25%),
        /* Base dark gradient */
        linear-gradient(180deg, #0E1E33 0%, #142845 40%, #1A3050 100%);
    pointer-events: none;
}
.evd-banner::after, .hed-banner::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        /* Audience silhouette dots */
        radial-gradient(circle 6px at 8% 88%, rgba(0,0,0,0.55), transparent),
        radial-gradient(circle 7px at 18% 92%, rgba(0,0,0,0.50), transparent),
        radial-gradient(circle 5px at 28% 86%, rgba(0,0,0,0.55), transparent),
        radial-gradient(circle 7px at 36% 91%, rgba(0,0,0,0.50), transparent),
        radial-gradient(circle 6px at 44% 87%, rgba(0,0,0,0.55), transparent),
        radial-gradient(circle 7px at 52% 92%, rgba(0,0,0,0.50), transparent),
        radial-gradient(circle 5px at 60% 86%, rgba(0,0,0,0.55), transparent),
        radial-gradient(circle 7px at 68% 91%, rgba(0,0,0,0.50), transparent),
        radial-gradient(circle 6px at 76% 87%, rgba(0,0,0,0.55), transparent),
        radial-gradient(circle 7px at 84% 92%, rgba(0,0,0,0.50), transparent),
        radial-gradient(circle 5px at 92% 86%, rgba(0,0,0,0.55), transparent),
        /* Screen rectangle in stage area */
        linear-gradient(135deg, transparent 30%, rgba(255,255,255,0.05) 35%, rgba(255,255,255,0.12) 45%, rgba(255,255,255,0.05) 55%, transparent 60%);
    background-size: 100% 100%;
    pointer-events: none;
}
.evd-banner-overlay, .hed-banner-overlay {
    position: relative;
    z-index: 2;
    background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.20) 60%, rgba(0,0,0,0.55) 100%);
}
.evd-banner-overlay::before, .hed-banner-overlay::before { display: none !important; }
.evd-banner-pattern { display: none !important; }

/* Mini banner for event cards on landing/list */
.ev-card-cover, .re-thumb, .he-thumb, .ev-mini-thumb {
    background: #0E1E33 !important;
    position: relative;
    overflow: hidden;
}
.ev-card-cover::before, .re-thumb::before, .he-thumb::before, .ev-mini-thumb::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 50% 50% at 50% 32%, rgba(135, 206, 250, 0.55) 0%, transparent 60%),
        radial-gradient(ellipse 25% 30% at 50% 28%, rgba(255, 255, 255, 0.35) 0%, transparent 60%),
        linear-gradient(0deg, rgba(80, 50, 30, 0.40) 0%, transparent 22%),
        linear-gradient(180deg, #0E1E33 0%, #142845 100%);
    pointer-events: none;
}
.ev-card-cover::after, .re-thumb::after, .he-thumb::after, .ev-mini-thumb::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle 3px at 15% 88%, rgba(0,0,0,0.55), transparent 80%),
        radial-gradient(circle 3px at 30% 92%, rgba(0,0,0,0.50), transparent 80%),
        radial-gradient(circle 3px at 45% 88%, rgba(0,0,0,0.55), transparent 80%),
        radial-gradient(circle 3px at 60% 92%, rgba(0,0,0,0.50), transparent 80%),
        radial-gradient(circle 3px at 75% 88%, rgba(0,0,0,0.55), transparent 80%),
        radial-gradient(circle 3px at 88% 92%, rgba(0,0,0,0.50), transparent 80%);
    pointer-events: none;
}
.ev-cover-deco { display: none !important; }
.ev-cat-pill { position: absolute; top: 10px; left: 12px; z-index: 2; }

/* Hover lift effect for cards */
.ev-card { transition: transform 0.2s, box-shadow 0.2s; }
.ev-card:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(48,97,255,0.18); }

/* ===========================================================
   HOST WIZARD — full Figma fidelity
   =========================================================== */
.hw-stepper { padding: 16px 22px; display: flex; gap: 6px; align-items: center; overflow-x: auto; flex-wrap: nowrap; }
.hw-step { display: inline-flex; gap: 8px; align-items: center; font-size: 12.5px; color: #6B7280; white-space: nowrap; padding: 4px 6px; flex-shrink: 0; }
.hw-step-num { width: 22px; height: 22px; border-radius: 50%; background: #FFF; color: #6B7280; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 11px; border: 1.5px solid #CFD8E3; }
.hw-step.is-active .hw-step-num { background: #3061FF; color: #FFF; border-color: #3061FF; }
.hw-step.is-done .hw-step-num { background: #2E7D32; color: #FFF; border-color: #2E7D32; }
.hw-step.is-active .hw-step-name { color: #1A1A1A; font-weight: 600; }
.hw-step.is-done .hw-step-name { color: #1A1A1A; }
.hw-step-sep { color: #CFD8E3; flex-shrink: 0; }

.hw-progress-row { display: flex; gap: 12px; align-items: center; padding: 0 22px 14px; }
.hw-progress { flex: 1; height: 4px; background: #ECECEE; border-radius: 999px; overflow: hidden; }
.hw-progress-bar { height: 100%; background: #34C38F; transition: width 0.3s; }
.hw-step-counter { font-size: 11.5px; color: #6B7280; font-weight: 500; white-space: nowrap; }

/* Step 1: Cover uploader */
.hw-cover-uploader { border: 1.5px dashed #CFD8E3; border-radius: 12px; padding: 36px; text-align: center; margin-bottom: 18px; cursor: pointer; }
.hw-cover-icon { display: block; font-size: 22px; color: #3061FF; margin-bottom: 8px; }
.hw-cover-uploader strong { display: block; font-size: 14px; font-weight: 600; margin-bottom: 4px; }
.hw-cover-meta { display: block; font-size: 12px; color: #6B7280; }

/* Calendar */
.hw-dates-row { display: grid; grid-template-columns: 360px 1fr; gap: 24px; margin: 14px 0; align-items: start; }
.hw-cal { background: #FFF; border: 1px solid #E6E6E8; border-radius: 12px; padding: 16px; }
.hw-cal-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; font-size: 13px; }
.hw-cal-head strong { font-weight: 700; }
.hw-cal-nav { color: #6B7280; font-size: 16px; cursor: pointer; }
.hw-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; text-align: center; }
.hw-cal-dow { font-size: 10px; font-weight: 600; color: #6B7280; padding: 6px 0; }
.hw-cal-cell { padding: 6px 0; font-size: 12px; cursor: pointer; border-radius: 6px; }
.hw-cal-cell.is-on { background: #3061FF; color: #FFF; font-weight: 700; }
.hw-cal-blank { visibility: hidden; }
.hw-dates-info h4 { font-size: 13.5px; font-weight: 700; margin: 0 0 6px; }
.hw-dates-info p { font-size: 12.5px; color: #6B7280; margin: 2px 0; }
.hw-dates-info .hw-label { display: block; margin-top: 14px; font-size: 12.5px; font-weight: 600; }
.hw-dates-info .hw-date-pills { margin-top: 8px; }

/* Search wrap */
.hw-search-wrap { position: relative; width: 100%; max-width: 480px; }
.hw-search-wrap input { width: 100%; padding: 10px 14px 10px 36px; border: 1px solid #E6E6E8; border-radius: 999px; font-size: 13px; outline: none; box-sizing: border-box; font-family: inherit; background: #F6F8FB; }
.hw-search-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); font-size: 12px; color: #6B7280; }

/* Step 3 — Schedule */
.hw-day-tabs { display: flex; gap: 8px; margin-bottom: 16px; }
.hw-day-tab { background: #FFF; border: 1px solid #E6E6E8; padding: 10px 26px; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit; color: #6B7280; }
.hw-day-tab.is-active { background: #3061FF; color: #FFF; border-color: #3061FF; }
.hw-day-tab.is-done { background: #E3F8E8; color: #2E7D32; border-color: #2E7D32; }
.hw-add-btn { width: 32px; height: 32px; border-radius: 50%; border: 1px solid #3061FF; background: #FFF; color: #3061FF; font-size: 18px; font-weight: 700; cursor: pointer; }
.hw-empty-sessions { padding: 60px 30px; text-align: center; }
.hw-empty-sessions p { font-size: 14px; color: #1A1A1A; margin: 0 0 16px; }
.hw-empty-sessions em { font-style: normal; color: #C0392B; }
.hw-sess-builder { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.hw-sess-card { background: #FFF; border: 1px solid #E6E6E8; border-radius: 10px; overflow: hidden; }
.hw-sess-card.is-open { border-color: #3061FF; box-shadow: 0 2px 8px rgba(48,97,255,0.06); }
.hw-sess-head { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; cursor: pointer; }
.hw-sess-head strong { font-size: 13.5px; }
.hw-sess-icon-btn { background: none; border: none; cursor: pointer; font-size: 14px; color: #6B7280; padding: 4px; }
.hw-sess-caret { background: none; border: none; cursor: pointer; font-size: 16px; color: #3061FF; padding: 4px; }
.hw-sess-body { padding: 0 18px 18px; }
.hw-form-row-3 { grid-template-columns: 1fr 1fr 1fr !important; }
.hw-rich-wrap { border: 1px solid #E6E6E8; border-radius: 8px; overflow: hidden; }
.hw-rich-wrap textarea { width: 100%; border: none; padding: 12px 14px; font-size: 13px; font-family: inherit; outline: none; box-sizing: border-box; resize: vertical; }
.hw-rich-toolbar { display: flex; gap: 4px; padding: 6px 8px; background: #F6F8FB; border-top: 1px solid #E6E6E8; align-items: center; }
.hw-rich-toolbar button { background: none; border: 1px solid transparent; padding: 4px 8px; font-size: 13px; cursor: pointer; border-radius: 4px; color: #1A1A1A; font-family: inherit; }
.hw-ai-link { margin-left: auto !important; color: #3061FF !important; font-weight: 600 !important; font-size: 11.5px !important; }

/* Step 4 — Pre-Event Surveys */
.hw-info-banner { background: #EAEFFF; color: #3061FF; padding: 12px 16px; border-radius: 8px; font-size: 13px; margin-bottom: 14px; }
.hw-toggle-row { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; background: #FFF; border: 1px solid #E6E6E8; border-radius: 10px; margin-bottom: 10px; }
.hw-toggle-row strong { font-size: 13.5px; font-weight: 600; }
.hw-switch { position: relative; display: inline-block; width: 40px; height: 22px; }
.hw-switch input { opacity: 0; width: 0; height: 0; }
.hw-switch-slider { position: absolute; inset: 0; background: #CFD8E3; border-radius: 999px; cursor: pointer; transition: background 0.15s; }
.hw-switch-slider::before { content: ""; position: absolute; left: 2px; top: 2px; width: 18px; height: 18px; background: #FFF; border-radius: 50%; transition: transform 0.15s; }
.hw-switch input:checked + .hw-switch-slider { background: #3061FF; }
.hw-switch input:checked + .hw-switch-slider::before { transform: translateX(18px); }
.hw-meal-table { width: 100%; border-collapse: collapse; margin-bottom: 8px; border: 1px solid #E6E6E8; border-radius: 10px; overflow: hidden; }
.hw-meal-table th { background: #F4F7FB; padding: 12px 14px; font-size: 12px; font-weight: 600; color: #6B7280; text-align: left; }
.hw-meal-table td { padding: 14px; font-size: 13px; border-top: 1px solid #F0F2F5; }
.hw-meal-table input[type="checkbox"] { accent-color: #3061FF; }

/* Step 5 — Fee Setup */
.hw-fee-choice-stack { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; }
.hw-fee-pick { display: flex; justify-content: space-between; align-items: center; padding: 14px 20px; border: 1.5px solid #E6E6E8; border-radius: 10px; cursor: pointer; font-size: 13.5px; }
.hw-fee-pick.is-on { background: #EAEFFF; border-color: #3061FF; color: #3061FF; font-weight: 600; }
.hw-fee-check { width: 22px; height: 22px; border-radius: 50%; background: #3061FF; color: #FFF; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 12px; }
.hw-fee-section { background: #FFF; border: 1px solid #E6E6E8; border-radius: 10px; padding: 18px 22px; }
.hw-fee-section-head { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 14px; padding-bottom: 10px; border-bottom: 1px solid #E6E6E8; font-size: 13px; color: #3061FF; font-weight: 600; }
.hw-fee-day { font-size: 13.5px; font-weight: 700; margin: 14px 0 8px; }
.hw-fee-row { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 14px; align-items: center; padding: 10px 0; border-bottom: 1px solid #F0F2F5; }
.hw-fee-row-meal { background: #F6F8FB; padding: 12px 14px; border-radius: 8px; border: none; margin-top: 8px; }
.hw-fee-sess-name { display: block; font-size: 11.5px; color: #6B7280; }
.hw-fee-summary { margin-top: 14px; padding-top: 14px; border-top: 1px solid #E6E6E8; }
.hw-fee-line { display: flex; justify-content: space-between; padding: 6px 0; font-size: 14px; }

/* Step 6 — Feedback */
.hw-fb-day-head { font-size: 14px; font-weight: 700; margin: 14px 0 10px; color: #1A1A1A; }
.hw-fb-row { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; background: #FFF; border: 1px solid #E6E6E8; border-radius: 10px; margin-bottom: 8px; }
.hw-fb-session-label { font-size: 11.5px; color: #6B7280; margin-bottom: 2px; }
.hw-fb-row strong { font-size: 13.5px; }
.hw-fb-status { display: inline-block; margin-top: 6px; font-size: 11.5px; font-weight: 600; padding: 2px 10px; border-radius: 999px; }
.hw-fb-status-done { background: #E3F8E8; color: #2E7D32; }
.hw-fb-status-empty { background: #ECECEE; color: #6B7280; }

/* Step 7 — Summary */
.hw-sum-card { background: #FFF; border: 1px solid #E6E6E8; border-radius: 10px; padding: 18px 22px; margin-bottom: 12px; }
.hw-sum-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.hw-sum-head h3 { font-size: 14px; font-weight: 700; margin: 0; }
.hw-edit-link { background: none; border: none; color: #3061FF; font-size: 12.5px; font-weight: 600; cursor: pointer; font-family: inherit; }
.hw-sum-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.hw-sum-grid > div { display: flex; flex-direction: column; gap: 4px; }
.hw-sum-label { font-size: 11.5px; color: #6B7280; }
.hw-sum-grid strong { font-size: 13px; }
.hw-sum-aud { padding: 12px 14px; background: #F6F8FB; border-radius: 8px; display: flex; flex-direction: column; gap: 8px; }
.hw-sum-aud-head { font-size: 12.5px; font-weight: 600; }
.hw-sum-chip { background: #FFF; border: 1px solid #E6E6E8; padding: 4px 12px; border-radius: 999px; font-size: 12px; display: inline-block; margin-right: 6px; }
.hw-sum-chip-blue { background: #EAEFFF; color: #3061FF; border-color: #DBE5FF; }

/* Audience modal */
.hw-aud-group { background: #F6F8FB; border-radius: 10px; padding: 14px 18px; margin-bottom: 10px; }
.hw-aud-group-head { font-size: 13px; font-weight: 600; margin-bottom: 10px; }
.hw-aud-group-pills { display: flex; gap: 6px; margin-bottom: 12px; flex-wrap: wrap; }
.hw-aud-pill { background: #EAEFFF; color: #3061FF; padding: 4px 12px; border-radius: 999px; font-size: 12px; font-weight: 500; }
.hw-aud-criteria-row { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; flex-wrap: wrap; }
.hw-aud-crit-label { font-size: 12px; color: #6B7280; min-width: 80px; font-weight: 600; }

/* Modals already share .hw-modal-overlay etc */

/* Draft toast */
.hw-draft-toast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); background: #FFF; border: 1px solid #E6E6E8; border-radius: 999px; padding: 10px 18px; box-shadow: 0 8px 24px rgba(0,0,0,0.15); display: flex; gap: 10px; align-items: center; font-size: 13px; font-weight: 600; z-index: 1300; }
.hw-draft-check { width: 20px; height: 20px; border-radius: 50%; background: #E3F8E8; color: #2E7D32; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; }

/* Toast — full overlay */
.hw-toast-overlay { position: fixed; inset: 0; background: rgba(15,23,42,0.45); display: flex; align-items: center; justify-content: center; z-index: 1200; }
.hw-toast-card { background: #FFF; border-radius: 14px; padding: 32px 36px; text-align: center; min-width: 360px; box-shadow: 0 20px 50px rgba(0,0,0,0.25); }
.hw-toast-check { width: 56px; height: 56px; border-radius: 50%; background: #E3F8E8; color: #2E7D32; display: flex; align-items: center; justify-content: center; font-size: 28px; margin: 0 auto 14px; }
.hw-toast-card h3 { margin: 0 0 6px; font-size: 17px; }
.hw-toast-card p { margin: 0; color: #6B7280; font-size: 13px; line-height: 1.5; }

/* Feedback Q builder */
.hw-fb-q-builder { background: #F6F8FB; border-radius: 10px; padding: 16px 18px; }

/* Survey intro modal */
.ev-survey-intro { position: fixed; inset: 0; background: rgba(15,23,42,0.45); display: flex; align-items: center; justify-content: center; z-index: 1300; padding: 20px; }
.ev-survey-intro.hidden { display: none; }
.ev-survey-card { background: #FFF; border-radius: 14px; padding: 32px 40px; text-align: center; max-width: 360px; box-shadow: 0 20px 50px rgba(0,0,0,0.25); }
.ev-survey-art { display: flex; justify-content: center; margin-bottom: 14px; }
.ev-survey-card h3 { margin: 0 0 8px; font-size: 17px; font-weight: 700; }
.ev-survey-card p { margin: 0 0 20px; color: #6B7280; font-size: 13px; line-height: 1.55; }
.ev-survey-actions { display: flex; gap: 10px; justify-content: center; }

/* Avatar photo (SVG portrait) — fill circle */
.avatar-sidebar-photo { overflow: hidden; background: #F5E0C8 !important; }
.avatar-sidebar-photo svg { width: 100%; height: 100%; display: block; }

/* ===========================================================
   HOST WIZARD STEP 1 — Figma fidelity
   =========================================================== */
.hw-cover-filled { position: relative; border-radius: 12px; overflow: hidden; height: 240px; background: #F2EDE5; }
.hw-cover-photo { position: absolute; inset: 0; }
.hw-cover-photo svg { display: block; width: 100%; height: 100%; }
.hw-cover-controls { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.hw-cover-reposition { background: rgba(0,0,0,0.55); color: #FFF; border: none; padding: 8px 16px; border-radius: 6px; font-size: 13px; font-weight: 500; cursor: pointer; pointer-events: auto; font-family: inherit; display: inline-flex; gap: 6px; align-items: center; }
.hw-cover-del { position: absolute; left: 14px; bottom: 14px; width: 38px; height: 38px; background: #EF4444; color: #FFF; border: none; border-radius: 8px; font-size: 16px; cursor: pointer; }
.hw-cover-change { position: absolute; right: 14px; bottom: 14px; background: #FFF; color: #3061FF; border: 1px solid #3061FF; padding: 8px 16px; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit; }

/* Calendar panel in step 1 — wrap calendar in soft gray card */
.hw-calendar-panel { background: #F6F8FB; border-radius: 12px; padding: 22px 26px; margin: 18px 0; }
.hw-calendar-panel .hw-cal { background: #FFF; }

/* Upload row (Brochure) */
.hw-upload-row { display: flex; gap: 0; align-items: stretch; }
.hw-upload-row input { flex: 1; padding: 10px 14px; border: 1px solid #E6E6E8; border-right: none; border-radius: 8px 0 0 8px; font-size: 13px; font-family: inherit; background: #FFF; outline: none; }
.hw-upload-btn { background: #FFF; border: 1px solid #E6E6E8; border-left: none; border-radius: 0 8px 8px 0; padding: 0 16px; cursor: pointer; color: #3061FF; font-size: 16px; }

.hw-divider { border: none; border-top: 1px solid #E6E6E8; margin: 22px 0; }

/* Radio group inline */
.hw-radio-group { border: none; padding: 0; margin: 0; }
.hw-radio-group legend { font-size: 12.5px; font-weight: 600; margin-bottom: 10px; padding: 0; }
.hw-radio-inline { display: inline-flex; gap: 8px; align-items: center; margin-right: 24px; font-size: 13.5px; cursor: pointer; }
.hw-radio-inline input { accent-color: #3061FF; width: 16px; height: 16px; }

/* Stepper input (-/+) */
.hw-stepper-input { display: inline-flex; align-items: stretch; border: 1px solid #E6E6E8; border-radius: 8px; overflow: hidden; width: fit-content; }
.hw-stepper-btn { background: #FFF; border: none; width: 36px; cursor: pointer; font-size: 16px; color: #1A1A1A; font-family: inherit; }
.hw-stepper-btn:hover { background: #F4F7FB; }
.hw-stepper-input input { border: none; border-left: 1px solid #E6E6E8; border-right: 1px solid #E6E6E8; width: 60px; text-align: center; padding: 10px 0; font-size: 13.5px; font-family: inherit; outline: none; }
.hw-stepper-input input::-webkit-inner-spin-button { display: none; }

/* Override stepper title to be "Tell Us Your Meal Preferences" when guests=Yes (Figma label variant — keep as-is for now) */

/* ===========================================================
   HOST WIZARD — Form/field essentials (restoration)
   =========================================================== */
.hw-page { padding: 24px 28px; font-family: 'GeneralSansFont','Salesforce Sans',system-ui,sans-serif; color: #1A1A1A; }
.hw-card { background: #FFF; border: 1px solid #E6E6E8; border-radius: 14px; padding: 28px 32px; margin-bottom: 18px; }
.hw-step-title { font-size: 17px; font-weight: 700; margin: 0 0 20px; }

/* Field & form row */
.hw-field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.hw-label { font-size: 13px; font-weight: 600; color: #1A1A1A; line-height: 1.3; }
.hw-label em { font-style: normal; color: #C0392B; font-weight: 400; }
.hw-field input[type="text"],
.hw-field input[type="email"],
.hw-field input[type="number"],
.hw-field input[type="tel"],
.hw-field input[type="date"],
.hw-field input[type="time"],
.hw-field input[type="url"],
.hw-field select,
.hw-field textarea {
    padding: 12px 14px;
    border: 1px solid #E6E6E8;
    border-radius: 10px;
    font-size: 14px;
    font-family: inherit;
    outline: none;
    box-sizing: border-box;
    background: #FFF;
    color: #1A1A1A;
    width: 100%;
    resize: vertical;
}
.hw-field input:focus, .hw-field select:focus, .hw-field textarea:focus { border-color: #3061FF; box-shadow: 0 0 0 3px rgba(48,97,255,0.10); }
.hw-field input::placeholder, .hw-field textarea::placeholder { color: #9CA3AF; }
.hw-field select { appearance: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' stroke='%236B7280' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px; }

.hw-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 4px; }
.hw-form-row .hw-field { margin-bottom: 12px; }
.hw-form-row-3 { grid-template-columns: 1fr 1fr 1fr !important; }
@media (max-width: 860px) { .hw-form-row, .hw-form-row-3 { grid-template-columns: 1fr !important; } }

/* Rich text wrap re-spec */
.hw-rich-wrap { border: 1px solid #E6E6E8; border-radius: 10px; overflow: hidden; background: #FFF; }
.hw-rich-wrap textarea { border: none !important; border-radius: 0 !important; width: 100%; padding: 14px 16px; font-size: 14px; font-family: inherit; outline: none; box-sizing: border-box; resize: vertical; min-height: 100px; }
.hw-rich-toolbar { display: flex; gap: 6px; padding: 8px 14px; background: #F6F8FB; border-top: 1px solid #E6E6E8; align-items: center; }
.hw-rich-toolbar button { background: none; border: none; padding: 4px 10px; font-size: 14px; cursor: pointer; border-radius: 4px; color: #444; font-family: inherit; font-weight: 600; }
.hw-rich-toolbar button:hover { background: #FFF; }
.hw-ai-link { margin-left: auto !important; color: #3061FF !important; font-weight: 600 !important; font-size: 12.5px !important; }

/* Cover photo */
.hw-cover-filled { position: relative; border-radius: 12px; overflow: hidden; height: 260px; background: #F2EDE5; margin-bottom: 20px; }
.hw-cover-photo { position: absolute; inset: 0; }
.hw-cover-photo svg { display: block; width: 100% !important; height: 100% !important; object-fit: cover; }
.hw-cover-uploader { border: 1.5px dashed #CFD8E3; border-radius: 12px; padding: 60px 40px; text-align: center; margin-bottom: 20px; cursor: pointer; }
.hw-cover-icon { display: block; font-size: 26px; color: #3061FF; margin-bottom: 10px; }
.hw-cover-uploader strong { display: block; font-size: 15px; font-weight: 600; margin-bottom: 6px; color: #1A1A1A; }
.hw-cover-meta { display: block; font-size: 12.5px; color: #6B7280; }

/* Calendar wrap panel */
.hw-calendar-panel { background: #F6F8FB; border-radius: 14px; padding: 24px 28px; margin: 20px 0; }
.hw-dates-row { display: grid; grid-template-columns: 360px 1fr; gap: 28px; align-items: start; }
.hw-cal { background: #FFF; border-radius: 12px; padding: 18px 22px; }
.hw-cal-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; font-size: 14px; }
.hw-cal-head strong { font-weight: 600; }
.hw-cal-nav { color: #6B7280; font-size: 16px; cursor: pointer; }
.hw-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; text-align: center; }
.hw-cal-dow { font-size: 11px; font-weight: 500; color: #6B7280; padding: 6px 0; }
.hw-cal-cell { padding: 8px 0; font-size: 13px; cursor: pointer; border-radius: 8px; color: #1A1A1A; }
.hw-cal-cell:hover:not(.hw-cal-blank):not(.is-on) { background: #F4F7FB; }
.hw-cal-cell.is-on { background: #3061FF; color: #FFF; font-weight: 600; }
.hw-cal-blank { visibility: hidden; }
.hw-dates-info h4 { font-size: 14px; font-weight: 600; margin: 0 0 8px; color: #1A1A1A; }
.hw-dates-info p { font-size: 13px; color: #6B7280; margin: 2px 0; line-height: 1.5; }
.hw-date-pills { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.hw-date-pill { background: #EAEFFF; color: #3061FF; padding: 6px 14px; border-radius: 999px; font-size: 13px; font-weight: 600; display: inline-flex; gap: 6px; align-items: center; }
.hw-date-pill button { background: none; border: none; color: #3061FF; cursor: pointer; font-size: 14px; padding: 0; line-height: 1; }
.hw-date-add { background: #FFF; color: #3061FF; border: 1px dashed #3061FF; padding: 5px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 600; cursor: pointer; font-family: inherit; }

/* Upload row (brochure) */
.hw-upload-row { display: flex; align-items: stretch; }
.hw-upload-row input { flex: 1; padding: 12px 14px; border: 1px solid #E6E6E8; border-right: none; border-radius: 10px 0 0 10px; font-size: 14px; font-family: inherit; background: #FFF; outline: none; }
.hw-upload-btn { background: #FFF; border: 1px solid #E6E6E8; border-left: none; border-radius: 0 10px 10px 0; padding: 0 18px; cursor: pointer; color: #3061FF; font-size: 18px; }

/* Divider */
.hw-divider { border: none; border-top: 1px solid #E6E6E8; margin: 24px 0; }

/* Radio group */
.hw-radio-group { border: none; padding: 0; margin: 0 0 4px; display: flex; flex-direction: column; gap: 10px; }
.hw-radio-group legend { font-size: 13px; font-weight: 600; padding: 0; margin: 0; line-height: 1.3; }
.hw-radio-group legend em { font-style: normal; color: #C0392B; font-weight: 400; }
.hw-radio-inline { display: inline-flex; gap: 8px; align-items: center; margin-right: 28px; font-size: 14px; cursor: pointer; }
.hw-radio-inline input { accent-color: #3061FF; width: 18px; height: 18px; cursor: pointer; }

/* Stepper +/- */
.hw-stepper-input { display: inline-flex; align-items: stretch; border: 1px solid #E6E6E8; border-radius: 10px; overflow: hidden; width: fit-content; }
.hw-stepper-btn { background: #FFF; border: none; width: 40px; cursor: pointer; font-size: 18px; color: #1A1A1A; font-family: inherit; }
.hw-stepper-btn:hover { background: #F4F7FB; }
.hw-stepper-input input { border: none; border-left: 1px solid #E6E6E8; border-right: 1px solid #E6E6E8; width: 70px; text-align: center; padding: 10px 0; font-size: 14px; font-family: inherit; outline: none; }
.hw-stepper-input input::-webkit-inner-spin-button, .hw-stepper-input input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

/* Audience list (step 2) */
.hw-aud-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.hw-aud-row { background: #FFF; border: 1px solid #E6E6E8; border-radius: 12px; padding: 16px 20px; display: flex; align-items: center; gap: 14px; }
.hw-aud-main { flex: 1; min-width: 0; }
.hw-aud-main strong { display: block; font-size: 14.5px; font-weight: 600; margin-bottom: 2px; }
.hw-aud-main span { display: block; font-size: 12.5px; color: #6B7280; }
.hw-aud-check { width: 26px; height: 26px; border-radius: 50%; background: #E3F8E8; color: #2E7D32; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; }
.hw-btn-outline { background: #FFF; color: #3061FF; border: 1px solid #3061FF; padding: 8px 18px; border-radius: 10px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit; }
.hw-btn-primary { background: #3061FF; color: #FFF; border: none; padding: 8px 22px; border-radius: 10px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit; }
.hw-btn-danger-outline { background: #FFF; color: #C0392B; border: 1px solid #C0392B; padding: 6px 16px; border-radius: 10px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit; }

/* Step 3 — Schedule session card override */
.hw-day-tabs { display: flex; gap: 10px; margin-bottom: 20px; flex-wrap: wrap; }
.hw-day-tab { background: #FFF; border: 1px solid #E6E6E8; padding: 12px 32px; border-radius: 10px; font-size: 13.5px; font-weight: 600; cursor: pointer; font-family: inherit; color: #1A1A1A; min-width: 160px; text-align: center; }
.hw-day-tab.is-active { background: #3061FF; color: #FFF; border-color: #3061FF; }
.hw-day-tab.is-done { background: #E3F8E8; color: #2E7D32; border-color: #C8E6C9; }
.hw-add-btn { width: 36px; height: 36px; border-radius: 50%; border: 1px solid #3061FF; background: #FFF; color: #3061FF; font-size: 20px; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.hw-sess-builder { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.hw-sess-card { background: #FFF; border: 1px solid #E6E6E8; border-radius: 12px; overflow: hidden; }
.hw-sess-card.is-open { border-color: #3061FF; box-shadow: 0 2px 8px rgba(48,97,255,0.06); }
.hw-sess-head { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; cursor: pointer; }
.hw-sess-head strong { font-size: 14px; }
.hw-sess-icon-btn { background: none; border: none; cursor: pointer; font-size: 15px; color: #6B7280; padding: 6px; }
.hw-sess-caret { background: none; border: none; cursor: pointer; font-size: 16px; color: #6B7280; padding: 6px; }
.hw-sess-card.is-open .hw-sess-caret { color: #3061FF; }
.hw-sess-body { padding: 0 20px 20px; }
.hw-sess-body .hw-form-row { margin-bottom: 14px; }

/* Empty sessions state */
.hw-empty-sessions { padding: 80px 30px; text-align: center; background: #FFF; border: 1px solid #E6E6E8; border-radius: 12px; }
.hw-empty-sessions p { font-size: 14px; color: #1A1A1A; margin: 0 0 18px; font-weight: 500; }
.hw-empty-sessions em { font-style: normal; color: #C0392B; }

/* Footer panel */
.hw-foot { background: #FFF; border: 1px solid #E6E6E8; border-radius: 14px; padding: 16px 24px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; }

/* Search wrap for audience */
.hw-search-wrap { position: relative; display: flex; gap: 10px; margin-bottom: 18px; align-items: center; }
.hw-search-wrap input { width: 100%; padding: 12px 16px 12px 40px; border: 1px solid #E6E6E8; border-radius: 999px; font-size: 14px; outline: none; box-sizing: border-box; font-family: inherit; background: #F6F8FB; }
.hw-search-icon { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); font-size: 13px; color: #6B7280; pointer-events: none; }

/* Ensure +Add a Speaker button is properly styled */
[data-hw-open-speaker] { margin-top: 12px; }

/* Hosted Event Detail — About tab helpers */
.hed-about-head { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-bottom: 14px; flex-wrap: wrap; }
.hed-about-head h3 { margin: 0; }
.hed-help-row { display: flex; gap: 12px; align-items: center; }
.hed-help-btn { padding: 7px 16px !important; font-size: 12.5px !important; border-radius: 8px !important; }
.hed-help-hint { font-size: 12.5px; color: #6B7280; }

/* ===========================================================
   EVENTS LANDING — Premium cards + inline filter (Figma fidelity)
   =========================================================== */
.ev-page { padding: 18px 24px 24px; }
.ev-header-strip { background: #FFF; border: 1px solid #E6E6E8; border-radius: 14px; padding: 16px 22px; margin-bottom: 14px; }
.ev-header-strip .ev-title { font-size: 18px; font-weight: 700; margin: 0; }

.ev-shell { display: grid; grid-template-columns: 1fr 320px; gap: 16px; align-items: start; }
.ev-shell-with-filter { grid-template-columns: 1fr 280px 320px; }
.ev-main-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

.ev-main-card { background: #FFF; border: 1px solid #E6E6E8; border-radius: 14px; padding: 22px 24px; }
.ev-cards-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.ev-cards-tools { display: flex; gap: 10px; align-items: center; }
.ev-search-wrap-inline { position: relative; width: 240px; }
.ev-search-wrap-inline input { width: 100%; padding: 9px 44px 9px 36px; border: 1px solid #E6E6E8; border-radius: 999px; font-size: 13px; outline: none; box-sizing: border-box; background: #FFF; font-family: inherit; }
.ev-search-wrap-inline .ev-search-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); font-size: 13px; color: #6B7280; }
.ev-search-wrap-inline .ev-mic { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); border: none; background: none; color: #6B7280; cursor: pointer; font-size: 14px; width: auto; height: auto; }
.ev-filter-btn { display: inline-flex; gap: 8px; align-items: center; padding: 9px 18px; border: 1px solid #E6E6E8; border-radius: 999px; background: #FFF; cursor: pointer; font-size: 13px; font-family: inherit; font-weight: 500; color: #1A1A1A; }
.ev-filter-icon { color: #6B7280; }

/* Section heads */
.ev-section { background: transparent; border: none; padding: 0; margin-bottom: 24px; }
.ev-section-head { margin-bottom: 14px; padding: 0; }
.ev-section-head h2 { font-size: 15px; font-weight: 600; margin: 0; color: #1A1A1A; }
.ev-section-count { color: #6B7280; font-weight: 500; }

/* Cards grid — 3-col, big premium cards */
.ev-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.ev-shell-with-filter .ev-grid { grid-template-columns: repeat(2, 1fr); }

.ev-card { background: #F4F7FB; border: none; border-radius: 14px; overflow: hidden; cursor: pointer; transition: transform 0.18s, box-shadow 0.18s; padding: 8px 8px 14px; }
.ev-card:hover { transform: translateY(-3px); box-shadow: 0 8px 22px rgba(48,97,255,0.10); }
.ev-card-cover { position: relative; height: 170px; border-radius: 10px; overflow: hidden; margin-bottom: 14px; background: #DDD; }
.ev-card-cover::before, .ev-card-cover::after { content: none !important; } /* override the seminar-look defaults */
.ev-card-cover svg { width: 100%; height: 100%; display: block; }
.ev-cat-pill { position: absolute; top: 10px; left: 12px; background: rgba(255,255,255,0.95); padding: 4px 14px; border-radius: 999px; font-size: 12px; font-weight: 600; color: #1A1A1A; z-index: 2; box-shadow: 0 1px 3px rgba(0,0,0,0.12); }
.ev-currency-pill { position: absolute; top: 10px; right: 12px; background: rgba(255,255,255,0.95); width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: #1A1A1A; z-index: 2; box-shadow: 0 1px 3px rgba(0,0,0,0.12); }

.ev-card-body { padding: 0 8px; }
.ev-card-body h3 { font-size: 15px; font-weight: 600; margin: 0 0 10px; line-height: 1.35; color: #1A1A1A; min-height: 40px; }
.ev-card-loc { display: flex; gap: 6px; align-items: center; font-size: 12.5px; color: #6B7280; margin-bottom: 14px; }
.ev-loc-icon { font-size: 11px; }
.ev-card-meta { display: flex; gap: 10px; flex-wrap: wrap; }
.ev-meta-pill { background: #EAEFFF; color: #3061FF; padding: 6px 12px; border-radius: 8px; font-size: 12px; font-weight: 500; display: inline-flex; gap: 6px; align-items: center; }
.ev-pill-icon { font-size: 11px; }
.ev-mode { background: #EAEFFF; color: #3061FF; padding: 6px 12px; border-radius: 8px; font-size: 12px; font-weight: 500; display: inline-flex; align-items: center; }

/* Inline filter panel */
.ev-filter-inline { background: #FFF; border: 1px solid #E6E6E8; border-radius: 14px; padding: 22px 24px; display: flex; flex-direction: column; min-height: 540px; }
.ev-filter-inline.hidden { display: none; }
.ev-filter-inline-head h3 { font-size: 16px; font-weight: 700; margin: 0 0 20px; color: #1A1A1A; }
.ev-filter-body { display: flex; flex-direction: column; gap: 16px; flex: 1; }
.ev-filter-body .ev-field { display: block; margin: 0; }
.ev-field-input-wrap { position: relative; }
.ev-field-input-wrap input, .ev-field-input-wrap select { width: 100%; padding: 12px 16px; padding-right: 36px; border: 1px solid #E6E6E8; border-radius: 8px; font-size: 13.5px; font-family: inherit; outline: none; background: #FFF; color: #1A1A1A; box-sizing: border-box; appearance: none; }
.ev-field-input-wrap select { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' stroke='%236B7280' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>"); background-repeat: no-repeat; background-position: right 14px center; }
.ev-field-input-wrap input::placeholder, .ev-field-input-wrap select { color: #6B7280; }
.ev-field-icon { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); pointer-events: none; font-size: 14px; color: #6B7280; }
.ev-filter-foot { display: flex; justify-content: space-between; gap: 10px; margin-top: 20px; padding-top: 18px; border-top: 1px solid #F0F2F5; }
.ev-filter-foot .ev-btn-outline, .ev-filter-foot .ev-btn-primary { padding: 10px 24px; }

/* Right rail — premium look */
.ev-right-rail { display: flex; flex-direction: column; gap: 14px; }
.ev-rail-card { background: #FFF; border: 1px solid #E6E6E8; border-radius: 14px; padding: 20px 22px; }
.ev-rail-head { margin-bottom: 14px; padding: 0; }
.ev-rail-head h3 { font-size: 15px; font-weight: 700; margin: 0; color: #1A1A1A; }
.ev-rail-date { font-size: 13px; font-weight: 600; color: #1A1A1A; margin-bottom: 12px; }

.ev-mini-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.ev-mini-item { display: flex; gap: 12px; padding: 10px; background: #EAEFFF; border-left: 4px solid #3061FF; border-radius: 8px; cursor: pointer; align-items: center; }
.ev-mini-body-stack { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ev-mini-time-top { font-size: 11.5px; color: #1A1A1A; font-weight: 500; }
.ev-mini-body-stack strong { font-size: 12.5px; font-weight: 600; line-height: 1.3; color: #1A1A1A; }
.ev-mini-loc { display: inline-flex; gap: 4px; align-items: center; font-size: 11px; color: #6B7280; }
.ev-mini-thumb { width: 50px; height: 50px; border-radius: 8px; flex-shrink: 0; overflow: hidden; background: #DDD; }
.ev-mini-thumb svg { width: 100%; height: 100%; display: block; }
.ev-mini-thumb::before, .ev-mini-thumb::after { content: none !important; }

.ev-rail-view-all { width: 100%; margin-top: 12px; background: #FFF; color: #3061FF; border: 1px solid #3061FF; padding: 10px; border-radius: 10px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit; }

/* Hosted Events rail — outlined card */
.ev-rail-hosted { border-color: #3061FF; }
.ev-hosted-empty { display: flex; flex-direction: column; gap: 8px; align-items: center; justify-content: center; padding: 20px 12px; text-align: center; }
.ev-hosted-empty p { font-size: 12.5px; color: #6B7280; margin: 0; }
.ev-host-cta { width: 100%; margin-top: 14px; background: #3061FF; color: #FFF; border: none; padding: 11px; border-radius: 10px; font-size: 13.5px; font-weight: 600; cursor: pointer; font-family: inherit; }
.ev-host-cta:hover { background: #2350D9; }

/* Hosted Event Detail — Photos/Highlights link saved state */
.hed-link-saved { display: flex; gap: 12px; align-items: center; padding: 10px 14px; background: #F4F7FB; border-radius: 10px; }
.hed-link-text { flex: 1; font-size: 13px; color: #3061FF; word-break: break-all; }
.hed-card-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.hed-card-head h3 { margin: 0; }
.hed-modal-sm { max-width: 420px !important; }

@media (max-width: 1300px) { .ev-shell-with-filter { grid-template-columns: 1fr 280px; } .ev-shell-with-filter .ev-right-rail { display: none; } }
@media (max-width: 1000px) { .ev-shell, .ev-shell-with-filter { grid-template-columns: 1fr; } .ev-grid, .ev-shell-with-filter .ev-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px) { .ev-grid { grid-template-columns: 1fr; } }

/* ===========================================================
   HOSTED EVENT DETAIL — Modal overlays (Photos / Highlights / Delete)
   =========================================================== */
.hed-modal-overlay { position: fixed; inset: 0; background: rgba(15,23,42,0.45); display: flex; align-items: center; justify-content: center; z-index: 1200; padding: 20px; }
.hed-modal { background: #FFF; border-radius: 14px; width: 100%; max-width: 480px; max-height: 90vh; overflow: auto; box-shadow: 0 20px 50px rgba(0,0,0,0.25); }
.hed-modal-sm { max-width: 420px; }
.hed-modal-head { display: flex; justify-content: space-between; align-items: center; padding: 18px 22px; border-bottom: 1px solid #E6E6E8; }
.hed-modal-head h3 { margin: 0; font-size: 17px; font-weight: 600; }
.hed-modal-x { background: none; border: none; font-size: 24px; cursor: pointer; color: #6B7280; line-height: 1; padding: 0 4px; }
.hed-modal-body { padding: 22px; }
.hed-modal-sub { color: #6B7280; font-size: 13px; margin: 0 0 16px; }
.hed-modal-body .hw-field { margin-bottom: 4px; }
.hed-modal-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 22px; border-top: 1px solid #E6E6E8; }

/* Academics — illustrated course banners */
.ac-banner-illus { padding: 0 !important; overflow: hidden; height: 100px; }
.ac-banner-illus svg { width: 100%; height: 100%; display: block; }

/* Profile photo image — fills circle */
.avatar-sidebar-photo .avatar-img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50%; }