/* =========================================================
   PRMS Workspace — Premium Compact Responsive UI
   Apply after global
   ========================================================= */

body[data-page="workspace"] {
    --ws-bg: #f3f5f8;
    --ws-surface: #ffffff;
    --ws-surface-soft: #f8fafc;
    --ws-surface-muted: #f1f5f9;
    --ws-text: #172033;
    --ws-text-soft: #526078;
    --ws-text-muted: #7a879a;
    --ws-line: #dde3eb;
    --ws-line-strong: #cdd5df;
    --ws-primary: #334155;
    --ws-primary-dark: #1e293b;
    --ws-accent: #64748b;
    --ws-success: #18765a;
    --ws-success-soft: #eaf7f1;
    --ws-warning: #a16207;
    --ws-warning-soft: #fff8e7;
    --ws-danger: #b42318;
    --ws-danger-soft: #fff0ee;
    --ws-info: #2f5f91;
    --ws-info-soft: #edf5fd;
    --ws-radius-xl: 20px;
    --ws-radius-lg: 16px;
    --ws-radius-md: 12px;
    --ws-radius-sm: 9px;
    --ws-shadow: 0 8px 24px rgba(15, 23, 42, 0.055);
    --ws-shadow-hover: 0 12px 30px rgba(15, 23, 42, 0.09);
    margin: 0;
    color: var(--ws-text);
    background:
        radial-gradient(circle at 100% 0%, rgba(100, 116, 139, 0.08), transparent 28rem),
        var(--ws-bg);
    font-family: Inter, "Segoe UI", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

body[data-page="workspace"] *,
body[data-page="workspace"] *::before,
body[data-page="workspace"] *::after {
    box-sizing: border-box;
}

body[data-page="workspace"] a,
body[data-page="workspace"] button {
    -webkit-tap-highlight-color: transparent;
}

body[data-page="workspace"] .container.page-with-nav {
    width: min(100% - 32px, 1320px);
    margin: 0 auto;
    padding: 18px 5px 92px;
}

/* ---------- Language switch ---------- */
body[data-page="workspace"] .login-language-switch {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 4px;
    margin: 0 0 8px;
}

body[data-page="workspace"] .login-language-switch form {
    margin: 0;
}

body[data-page="workspace"] .login-language-switch button {
    min-width: 48px;
    min-height: 32px;
    padding: 5px 11px;
    border: 1px solid var(--ws-line);
    border-radius: 999px;
    color: var(--ws-text-soft);
    background: rgba(255, 255, 255, 0.8);
    font: inherit;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    transition: 0.18s ease;
}

body[data-page="workspace"] .login-language-switch button:hover,
body[data-page="workspace"] .login-language-switch button.active {
    color: #fff;
    border-color: var(--ws-primary);
    background: var(--ws-primary);
}

/* ---------- Workspace hero ---------- */
body[data-page="workspace"] .workspace-premium-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(220px, 0.34fr);
    gap: 16px;
    align-items: center;
    min-height: 138px;
    padding: 20px 22px;
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: var(--ws-radius-xl);
    overflow: hidden;
    color: #fff;
    background:
        linear-gradient(125deg, rgba(255, 255, 255, 0.08), transparent 48%),
        linear-gradient(135deg, #263244 0%, #38465a 58%, #4b5b70 100%);
    box-shadow: 0 12px 32px rgba(30, 41, 59, 0.16);
}

body[data-page="workspace"] .workspace-premium-hero::after {
    content: "";
    position: absolute;
    right: -58px;
    top: -92px;
    width: 230px;
    height: 230px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 50%;
}

body[data-page="workspace"] .workspace-premium-hero-main {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 15px;
    min-width: 0;
}

body[data-page="workspace"] .workspace-premium-icon {
    display: grid;
    flex: 0 0 52px;
    width: 52px;
    height: 52px;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.19);
    border-radius: 15px;
    color: #fff;
    background: rgba(255, 255, 255, 0.11);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
    font-size: 1.22rem;
    font-weight: 800;
}

body[data-page="workspace"] .workspace-premium-hero .page-subtitle {
    margin: 0 0 2px;
    color: rgba(255, 255, 255, 0.68);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

body[data-page="workspace"] .workspace-premium-hero h1 {
    margin: 0;
    color: #fff;
    font-size: clamp(1.38rem, 2.2vw, 2rem);
    line-height: 1.18;
    letter-spacing: -0.025em;
}

body[data-page="workspace"] .workspace-premium-user-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
    margin-top: 8px;
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.84rem;
}

body[data-page="workspace"] .role-badge {
    display: inline-flex;
    align-items: center;
    min-height: 25px;
    padding: 3px 9px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    color: #fff;
    background: rgba(255, 255, 255, 0.12);
    font-size: 0.7rem;
    font-weight: 800;
}

body[data-page="workspace"] .role-badge.promoter { background: rgba(154, 52, 18, 0.62); }
body[data-page="workspace"] .role-badge.business { background: rgba(30, 58, 138, 0.62); }
body[data-page="workspace"] .role-badge.team-leader { background: rgba(76, 29, 149, 0.62); }
body[data-page="workspace"] .role-badge.dj { background: rgba(131, 24, 67, 0.62); }
body[data-page="workspace"] .role-badge.admin { background: rgba(15, 23, 42, 0.58); }

body[data-page="workspace"] .workspace-premium-hero-side {
    position: relative;
    z-index: 1;
    min-width: 0;
    padding: 13px 15px;
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.075);
    backdrop-filter: blur(8px);
}

body[data-page="workspace"] .workspace-premium-hero-side > span {
    display: block;
    color: rgba(255, 255, 255, 0.62);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

body[data-page="workspace"] .workspace-premium-hero-side strong {
    display: block;
    margin-top: 3px;
    color: #fff;
    font-size: 1rem;
    line-height: 1.28;
    overflow-wrap: anywhere;
}

body[data-page="workspace"] .workspace-premium-hero-side p {
    margin: 4px 0 0;
    color: rgba(255, 255, 255, 0.65);
    font-size: 0.76rem;
}

body[data-page="workspace"] .rooms-pro-action-btn.notification-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 34px;
    padding: 6px 11px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 10px;
    color: #fff;
    background: rgba(255, 255, 255, 0.12);
    font-size: 0.76rem;
    font-weight: 800;
    text-decoration: none;
    transition: 0.18s ease;
}

body[data-page="workspace"] .rooms-pro-action-btn.notification-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-1px);
}

body[data-page="workspace"] .notification-dot {
    display: inline-grid;
    min-width: 21px;
    height: 21px;
    padding: 0 5px;
    place-items: center;
    border-radius: 999px;
    color: #7f1d1d;
    background: #fee2e2;
    font-size: 0.68rem;
    font-weight: 900;
}

/* ---------- Shared sections ---------- */
body[data-page="workspace"] .workspace-important-announcement-alert,
body[data-page="workspace"] .workspace-announcement-board,
body[data-page="workspace"] .workspace-premium-section,
body[data-page="workspace"] .workspace-premium-record-section {
    margin-top: 14px;
}

body[data-page="workspace"] .workspace-announcement-board,
body[data-page="workspace"] .workspace-premium-section,
body[data-page="workspace"] .workspace-premium-record-section {
    padding: 17px;
    border: 1px solid var(--ws-line);
    border-radius: var(--ws-radius-lg);
    background: rgba(255, 255, 255, 0.92);
    box-shadow: var(--ws-shadow);
}

body[data-page="workspace"] .section-title-row,
body[data-page="workspace"] .workspace-announcement-board-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 12px;
}

body[data-page="workspace"] .section-title-row h3,
body[data-page="workspace"] .workspace-announcement-board-header h2 {
    margin: 0;
    color: var(--ws-text);
    font-size: 1rem;
    line-height: 1.3;
    letter-spacing: -0.012em;
}

body[data-page="workspace"] .section-subtitle,
body[data-page="workspace"] .workspace-announcement-board-header p {
    margin: 3px 0 0;
    color: var(--ws-text-muted);
    font-size: 0.78rem;
    line-height: 1.45;
}

body[data-page="workspace"] .workspace-announcement-eyebrow {
    display: block;
    margin-bottom: 4px;
    color: var(--ws-accent);
    font-size: 0.66rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

body[data-page="workspace"] .section-count {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    min-height: 28px;
    padding: 4px 9px;
    border: 1px solid var(--ws-line);
    border-radius: 999px;
    color: var(--ws-text-soft);
    background: var(--ws-surface-soft);
    font-size: 0.72rem;
    font-weight: 800;
}

/* ---------- Important announcements ---------- */
body[data-page="workspace"] .workspace-important-announcement-alert {
    padding: 15px;
    border: 1px solid #f3c9c3;
    border-radius: var(--ws-radius-lg);
    background: linear-gradient(180deg, #fff9f8, #fff5f3);
    box-shadow: 0 8px 24px rgba(180, 35, 24, 0.06);
}

body[data-page="workspace"] .workspace-important-announcement-alert-header {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 11px;
    align-items: center;
    margin-bottom: 11px;
}

body[data-page="workspace"] .workspace-important-announcement-alert-icon,
body[data-page="workspace"] .workspace-premium-reminder-icon {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border-radius: 10px;
    font-weight: 900;
}

body[data-page="workspace"] .workspace-important-announcement-alert-icon {
    color: var(--ws-danger);
    background: #ffe5e1;
}

body[data-page="workspace"] .workspace-important-announcement-alert h2 {
    margin: 0;
    color: #7f1d1d;
    font-size: 0.94rem;
}

body[data-page="workspace"] .workspace-important-announcement-alert-header p {
    margin: 2px 0 0;
    color: #9a4d45;
    font-size: 0.76rem;
}

body[data-page="workspace"] .workspace-important-announcement-count {
    display: grid;
    min-width: 29px;
    height: 29px;
    padding: 0 8px;
    place-items: center;
    border-radius: 999px;
    color: #fff;
    background: var(--ws-danger);
    font-size: 0.74rem;
    font-weight: 900;
}

/* ---------- Announcement board ---------- */
body[data-page="workspace"] .workspace-announcement-header-actions {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 7px;
}

body[data-page="workspace"] .workspace-announcement-list {
    display: grid;
    gap: 9px;
}

body[data-page="workspace"] .workspace-announcement-item {
    position: relative;
    padding: 13px 14px;
    border: 1px solid var(--ws-line);
    border-radius: var(--ws-radius-md);
    background: var(--ws-surface);
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

body[data-page="workspace"] .workspace-announcement-item:hover {
    border-color: var(--ws-line-strong);
    box-shadow: 0 7px 18px rgba(15, 23, 42, 0.055);
    transform: translateY(-1px);
}

body[data-page="workspace"] .workspace-announcement-item.is-unread {
    border-left: 3px solid var(--ws-info);
    background: linear-gradient(90deg, var(--ws-info-soft), #fff 20%);
}

body[data-page="workspace"] .workspace-announcement-item.is-important {
    border-left-color: var(--ws-danger);
    background: linear-gradient(90deg, var(--ws-danger-soft), #fff 20%);
}

body[data-page="workspace"] .workspace-announcement-top-row {
    display: flex;
    justify-content: space-between;
    gap: 8px;
}

body[data-page="workspace"] .workspace-announcement-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

body[data-page="workspace"] .announcement-badge {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 2px 7px;
    border-radius: 999px;
    font-size: 0.64rem;
    font-weight: 850;
    line-height: 1;
}

body[data-page="workspace"] .announcement-badge.pinned {
    color: #7c4a03;
    background: #fff2cc;
}

body[data-page="workspace"] .announcement-badge.important {
    color: #991b1b;
    background: #fee2e2;
}

body[data-page="workspace"] .announcement-badge.type {
    color: #334155;
    background: #e9eef5;
}

body[data-page="workspace"] .announcement-badge.unread {
    color: #1e4f7e;
    background: #dcecff;
}

body[data-page="workspace"] .announcement-badge.read {
    color: #16624c;
    background: #def3ea;
}

body[data-page="workspace"] .workspace-announcement-item h3 {
    margin: 8px 0 4px;
    color: var(--ws-text);
    font-size: 0.94rem;
    line-height: 1.35;
}

body[data-page="workspace"] .workspace-announcement-body {
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    color: var(--ws-text-soft);
    font-size: 0.79rem;
    line-height: 1.55;
    overflow-wrap: anywhere;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

body[data-page="workspace"] .workspace-announcement-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 10px;
    padding-top: 9px;
    border-top: 1px dashed var(--ws-line);
    color: var(--ws-text-muted);
    font-size: 0.69rem;
}

body[data-page="workspace"] .workspace-announcement-footer form {
    flex: 0 0 auto;
    margin: 0;
}

body[data-page="workspace"] .announcement-read-button,
body[data-page="workspace"] .workspace-card-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 5px 10px;
    border: 1px solid var(--ws-line-strong);
    border-radius: 9px;
    color: var(--ws-primary-dark);
    background: #fff;
    font: inherit;
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: 0.18s ease;
}

body[data-page="workspace"] .announcement-read-button:hover,
body[data-page="workspace"] .workspace-card-link:hover {
    color: #fff;
    border-color: var(--ws-primary);
    background: var(--ws-primary);
    transform: translateY(-1px);
}

/* ---------- Summary cards ---------- */
body[data-page="workspace"] .workspace-premium-summary-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 11px;
    margin-top: 14px;
}

body[data-page="workspace"] .workspace-premium-summary-card {
    min-width: 0;
    padding: 15px;
    border: 1px solid var(--ws-line);
    border-radius: var(--ws-radius-lg);
    background: rgba(255, 255, 255, 0.94);
    box-shadow: var(--ws-shadow);
}

body[data-page="workspace"] .workspace-premium-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

body[data-page="workspace"] .summary-label {
    display: block;
    color: var(--ws-text-soft);
    font-size: 0.74rem;
    font-weight: 850;
}

body[data-page="workspace"] .workspace-premium-card-hint {
    margin: 2px 0 0;
    color: var(--ws-text-muted);
    font-size: 0.68rem;
}

body[data-page="workspace"] .workspace-premium-mini-badge {
    display: inline-flex;
    min-height: 22px;
    align-items: center;
    padding: 2px 7px;
    border-radius: 999px;
    color: #40516a;
    background: #edf1f6;
    font-size: 0.62rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

body[data-page="workspace"] .workspace-premium-mode-card > strong {
    display: block;
    margin-top: 14px;
    color: var(--ws-primary-dark);
    font-size: 1.16rem;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

body[data-page="workspace"] .workspace-premium-meta-list {
    display: grid;
    gap: 4px;
    margin-top: 10px;
}

body[data-page="workspace"] .workspace-premium-meta-list p {
    margin: 0;
    color: var(--ws-text-muted);
    font-size: 0.72rem;
}

body[data-page="workspace"] .workspace-premium-meta-list span {
    color: var(--ws-text-soft);
    font-weight: 750;
}

body[data-page="workspace"] .workspace-premium-value-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 14px;
}

body[data-page="workspace"] .workspace-premium-value-icon {
    display: grid;
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    place-items: center;
    border-radius: 11px;
    color: var(--ws-primary-dark);
    background: #edf1f5;
    font-size: 0.72rem;
    font-weight: 900;
}

body[data-page="workspace"] .workspace-premium-big-value {
    min-width: 0;
    margin: 0;
    color: var(--ws-primary-dark);
    font-size: clamp(1.05rem, 1.6vw, 1.35rem);
    line-height: 1.2;
    overflow-wrap: anywhere;
}

body[data-page="workspace"] .workspace-premium-link-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 13px;
}

body[data-page="workspace"] .workspace-premium-pill-links a {
    display: inline-flex;
    align-items: center;
    min-height: 27px;
    padding: 3px 8px;
    border: 1px solid var(--ws-line);
    border-radius: 999px;
    color: var(--ws-text-soft);
    background: var(--ws-surface-soft);
    font-size: 0.67rem;
    font-weight: 800;
    text-decoration: none;
    transition: 0.18s ease;
}

body[data-page="workspace"] .workspace-premium-pill-links a:hover {
    color: #fff;
    border-color: var(--ws-primary);
    background: var(--ws-primary);
}

body[data-page="workspace"] .workspace-premium-progress-shell {
    height: 5px;
    margin-top: 13px;
    overflow: hidden;
    border-radius: 999px;
    background: #e9edf2;
}

body[data-page="workspace"] .workspace-premium-progress-bar {
    width: 58%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #718096, #334155);
}

body[data-page="workspace"] .workspace-premium-desc {
    margin: 7px 0 0;
    color: var(--ws-text-muted);
    font-size: 0.68rem;
}

/* ---------- Reminder ---------- */
body[data-page="workspace"] .workspace-premium-reminder-card {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-top: 11px;
    padding: 11px 14px;
    border: 1px solid #ead9aa;
    border-radius: var(--ws-radius-md);
    background: var(--ws-warning-soft);
}

body[data-page="workspace"] .workspace-premium-reminder-icon {
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    color: var(--ws-warning);
    background: #ffedbd;
}

body[data-page="workspace"] .workspace-premium-reminder-card h3 {
    margin: 0;
    color: #7a4d06;
    font-size: 0.82rem;
}

body[data-page="workspace"] .workspace-premium-reminder-card p {
    margin: 2px 0 0;
    color: #8c681f;
    font-size: 0.74rem;
}

/* ---------- Function cards ---------- */
body[data-page="workspace"] .workspace-premium-card-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 9px;
}

body[data-page="workspace"] .workspace-premium-action-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto auto;
    gap: 8px 11px;
    min-width: 0;
    min-height: 124px;
    padding: 13px;
    border: 1px solid var(--ws-line);
    border-radius: var(--ws-radius-md);
    background: var(--ws-surface);
    transition: 0.18s ease;
}

body[data-page="workspace"] .workspace-premium-action-card:hover {
    border-color: var(--ws-line-strong);
    box-shadow: var(--ws-shadow-hover);
    transform: translateY(-2px);
}

body[data-page="workspace"] .workspace-premium-action-icon {
    display: grid;
    grid-column: 1;
    grid-row: 1;
    width: 35px;
    height: 35px;
    place-items: center;
    border: 1px solid #dfe5ec;
    border-radius: 10px;
    color: var(--ws-primary-dark);
    background: #f2f5f8;
    font-size: 0.82rem;
    font-weight: 900;
}

body[data-page="workspace"] .workspace-premium-action-content {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
}

body[data-page="workspace"] .workspace-premium-action-content h3 {
    margin: 0;
    color: var(--ws-text);
    font-size: 0.86rem;
    line-height: 1.35;
}

body[data-page="workspace"] .workspace-premium-action-content p {
    display: -webkit-box;
    margin: 4px 0 0;
    overflow: hidden;
    color: var(--ws-text-muted);
    font-size: 0.72rem;
    line-height: 1.45;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

body[data-page="workspace"] .workspace-premium-action-card > .workspace-card-link {
    grid-column: 1 / -1;
    grid-row: 2;
    align-self: end;
    justify-self: stretch;
    min-height: 31px;
    padding: 5px 9px;
    background: var(--ws-surface-soft);
}

body[data-page="workspace"] .workspace-premium-action-card.excel-card {
    border-top: 3px solid #64748b;
}

/* ---------- Attendance record ---------- */
body[data-page="workspace"] .workspace-premium-record-section > .section-title-row {
    align-items: center;
}

body[data-page="workspace"] .workspace-record-list {
    display: grid;
    gap: 9px;
}

body[data-page="workspace"] .workspace-premium-attendance-item {
    padding: 13px;
    border: 1px solid var(--ws-line);
    border-radius: var(--ws-radius-md);
    background: var(--ws-surface);
}

body[data-page="workspace"] .attendance-top-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    padding-bottom: 9px;
    border-bottom: 1px solid var(--ws-line);
}

body[data-page="workspace"] .attendance-top-row h4 {
    margin: 0;
    color: var(--ws-text);
    font-size: 0.9rem;
}

body[data-page="workspace"] .attendance-top-row p {
    margin: 2px 0 0;
    color: var(--ws-text-muted);
    font-size: 0.7rem;
}

body[data-page="workspace"] .session-pill {
    display: inline-flex;
    flex: 0 0 auto;
    min-height: 25px;
    align-items: center;
    padding: 3px 8px;
    border-radius: 999px;
    color: #34445c;
    background: #eaf0f6;
    font-size: 0.66rem;
    font-weight: 850;
}

body[data-page="workspace"] .attendance-info-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 7px;
    margin-top: 9px;
}

body[data-page="workspace"] .attendance-info-grid > div {
    min-width: 0;
    padding: 8px 9px;
    border-radius: 9px;
    background: var(--ws-surface-soft);
}

body[data-page="workspace"] .attendance-info-grid span {
    display: block;
    color: var(--ws-text-muted);
    font-size: 0.62rem;
    line-height: 1.25;
}

body[data-page="workspace"] .attendance-info-grid strong {
    display: block;
    margin-top: 3px;
    color: var(--ws-text);
    font-size: 0.72rem;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

body[data-page="workspace"] .attendance-note,
body[data-page="workspace"] .workspace-feedback-notes .attendance-note {
    margin-top: 8px;
    padding: 8px 10px;
    border-left: 3px solid #cbd5e1;
    border-radius: 0 8px 8px 0;
    color: var(--ws-text-soft);
    background: var(--ws-surface-soft);
    font-size: 0.71rem;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

body[data-page="workspace"] .workspace-feedback-details {
    margin-top: 8px;
    border: 1px solid var(--ws-line);
    border-radius: 9px;
    background: #fbfcfd;
}

body[data-page="workspace"] .workspace-feedback-summary {
    padding: 8px 10px;
    color: var(--ws-primary-dark);
    font-size: 0.72rem;
    font-weight: 850;
    cursor: pointer;
    user-select: none;
}

body[data-page="workspace"] .workspace-feedback-details[open] .workspace-feedback-summary {
    border-bottom: 1px solid var(--ws-line);
}

body[data-page="workspace"] .workspace-feedback-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    padding: 0 9px 9px;
}

body[data-page="workspace"] .workspace-feedback-notes {
    padding: 0 9px 9px;
}

body[data-page="workspace"] .empty-state-card {
    display: grid;
    min-height: 92px;
    place-items: center;
    padding: 18px;
    border: 1px dashed var(--ws-line-strong);
    border-radius: var(--ws-radius-md);
    color: var(--ws-text-muted);
    background: var(--ws-surface-soft);
    font-size: 0.78rem;
    text-align: center;
}

/* ---------- Bottom navigation ---------- */
body[data-page="workspace"] .bottom-nav {
    position: fixed;
    z-index: 1000;
    right: 50%;
    bottom: max(10px, env(safe-area-inset-bottom));
    display: grid;
    grid-template-columns: repeat(3, minmax(82px, 1fr));
    width: min(calc(100% - 24px), 460px);
    padding: 5px;
    border: 1px solid rgba(203, 213, 225, 0.9);
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.93);
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.15);
    backdrop-filter: blur(14px);
    transform: translateX(50%);
}

body[data-page="workspace"] .bottom-nav a {
    display: flex;
    min-height: 38px;
    align-items: center;
    justify-content: center;
    padding: 6px 9px;
    border-radius: 10px;
    color: var(--ws-text-soft);
    font-size: 0.72rem;
    font-weight: 800;
    text-decoration: none;
    transition: 0.18s ease;
}

body[data-page="workspace"] .bottom-nav a:hover {
    color: var(--ws-primary-dark);
    background: var(--ws-surface-muted);
}

body[data-page="workspace"] .bottom-nav a.active {
    color: #fff;
    background: var(--ws-primary);
}

/* ---------- Keyboard focus ---------- */
body[data-page="workspace"] a:focus-visible,
body[data-page="workspace"] button:focus-visible,
body[data-page="workspace"] summary:focus-visible {
    outline: 3px solid rgba(59, 130, 246, 0.28);
    outline-offset: 2px;
}

/* ---------- Tablet ---------- */
@media (max-width: 1024px) {
    body[data-page="workspace"] .container.page-with-nav {
        width: min(100% - 26px, 960px);
        padding-top: 14px;
    }

    body[data-page="workspace"] .workspace-premium-hero {
        grid-template-columns: minmax(0, 1fr) minmax(205px, 0.42fr);
        padding: 18px;
    }

    body[data-page="workspace"] .workspace-premium-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body[data-page="workspace"] .workspace-premium-summary-card:last-child {
        grid-column: 1 / -1;
    }

    body[data-page="workspace"] .workspace-premium-card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body[data-page="workspace"] .attendance-info-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    body[data-page="workspace"] .workspace-feedback-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* ---------- Mobile ---------- */
@media (max-width: 700px) {
    body[data-page="workspace"] {
        background: var(--ws-bg);
    }

    body[data-page="workspace"] .container.page-with-nav {
        width: min(100% - 18px, 640px);
        padding: 9px 0 86px;
    }

    body[data-page="workspace"] .login-language-switch {
        margin-bottom: 6px;
    }

    body[data-page="workspace"] .login-language-switch button {
        min-width: 44px;
        min-height: 29px;
        padding: 4px 9px;
        font-size: 0.7rem;
    }

    body[data-page="workspace"] .workspace-premium-hero {
        grid-template-columns: 1fr;
        gap: 11px;
        min-height: 0;
        padding: 15px;
        border-radius: 17px;
    }

    body[data-page="workspace"] .workspace-premium-hero-main {
        gap: 11px;
    }

    body[data-page="workspace"] .workspace-premium-icon {
        flex-basis: 43px;
        width: 43px;
        height: 43px;
        border-radius: 12px;
        font-size: 1rem;
    }

    body[data-page="workspace"] .workspace-premium-hero h1 {
        font-size: 1.3rem;
    }

    body[data-page="workspace"] .workspace-premium-user-row {
        margin-top: 6px;
        font-size: 0.76rem;
    }

    body[data-page="workspace"] .workspace-premium-hero-side {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-rows: auto auto;
        align-items: center;
        gap: 1px 8px;
        padding: 10px 11px;
        border-radius: 12px;
    }

    body[data-page="workspace"] .workspace-premium-hero-side > span,
    body[data-page="workspace"] .workspace-premium-hero-side > strong,
    body[data-page="workspace"] .workspace-premium-hero-side > p {
        grid-column: 1;
    }

    body[data-page="workspace"] .workspace-premium-hero-side > strong {
        font-size: 0.88rem;
    }

    body[data-page="workspace"] .rooms-pro-action-btn.notification-btn {
        grid-column: 2;
        grid-row: 1 / span 2;
        min-height: 35px;
        margin-top: 0 !important;
        padding: 5px 9px;
        font-size: 0.69rem;
    }

    body[data-page="workspace"] .workspace-important-announcement-alert,
    body[data-page="workspace"] .workspace-announcement-board,
    body[data-page="workspace"] .workspace-premium-section,
    body[data-page="workspace"] .workspace-premium-record-section {
        margin-top: 10px;
    }

    body[data-page="workspace"] .workspace-announcement-board,
    body[data-page="workspace"] .workspace-premium-section,
    body[data-page="workspace"] .workspace-premium-record-section {
        padding: 12px;
        border-radius: 14px;
    }

    body[data-page="workspace"] .workspace-important-announcement-alert {
        padding: 12px;
        border-radius: 14px;
    }

    body[data-page="workspace"] .workspace-important-announcement-alert-header {
        grid-template-columns: auto minmax(0, 1fr) auto;
        gap: 8px;
    }

    body[data-page="workspace"] .workspace-important-announcement-alert-icon {
        width: 30px;
        height: 30px;
        border-radius: 9px;
    }

    body[data-page="workspace"] .workspace-important-announcement-alert h2 {
        font-size: 0.82rem;
    }

    body[data-page="workspace"] .workspace-important-announcement-alert-header p {
        display: -webkit-box;
        overflow: hidden;
        font-size: 0.68rem;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    body[data-page="workspace"] .workspace-announcement-board-header,
    body[data-page="workspace"] .section-title-row {
        flex-wrap: wrap;
        gap: 8px;
        margin-bottom: 9px;
    }

    body[data-page="workspace"] .workspace-announcement-board-header > div:first-child,
    body[data-page="workspace"] .section-title-row > div:first-child {
        flex: 1 1 220px;
    }

    body[data-page="workspace"] .workspace-announcement-header-actions {
        width: 100%;
        justify-content: flex-start;
    }

    body[data-page="workspace"] .workspace-announcement-header-actions .workspace-card-link {
        flex: 1 1 auto;
    }

    body[data-page="workspace"] .workspace-announcement-item {
        padding: 11px;
    }

    body[data-page="workspace"] .workspace-announcement-item h3 {
        margin-top: 7px;
        font-size: 0.84rem;
    }

    body[data-page="workspace"] .workspace-announcement-body {
        font-size: 0.73rem;
        -webkit-line-clamp: 2;
    }

    body[data-page="workspace"] .workspace-announcement-footer {
        align-items: flex-end;
        gap: 7px;
        font-size: 0.63rem;
    }

    body[data-page="workspace"] .announcement-read-button {
        min-height: 29px;
        padding: 4px 8px;
        font-size: 0.67rem;
    }

    body[data-page="workspace"] .workspace-premium-summary-grid {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        margin-top: 10px;
    }

    body[data-page="workspace"] .workspace-premium-summary-card {
        padding: 11px;
        border-radius: 13px;
    }

    body[data-page="workspace"] .workspace-premium-summary-card:last-child {
        grid-column: 1 / -1;
    }

    body[data-page="workspace"] .workspace-premium-mode-card > strong {
        margin-top: 10px;
        font-size: 0.94rem;
    }

    body[data-page="workspace"] .workspace-premium-card-hint,
    body[data-page="workspace"] .workspace-premium-desc {
        display: none;
    }

    body[data-page="workspace"] .workspace-premium-value-row {
        gap: 7px;
        margin-top: 10px;
    }

    body[data-page="workspace"] .workspace-premium-value-icon {
        flex-basis: 32px;
        width: 32px;
        height: 32px;
        border-radius: 9px;
        font-size: 0.62rem;
    }

    body[data-page="workspace"] .workspace-premium-big-value {
        font-size: 0.92rem;
    }

    body[data-page="workspace"] .workspace-premium-link-row {
        gap: 4px;
        margin-top: 9px;
    }

    body[data-page="workspace"] .workspace-premium-pill-links a {
        min-height: 24px;
        padding: 2px 6px;
        font-size: 0.6rem;
    }

    body[data-page="workspace"] .workspace-premium-reminder-card {
        gap: 8px;
        margin-top: 8px;
        padding: 9px 10px;
    }

    body[data-page="workspace"] .workspace-premium-reminder-icon {
        flex-basis: 29px;
        width: 29px;
        height: 29px;
    }

    body[data-page="workspace"] .workspace-premium-reminder-card h3 {
        font-size: 0.75rem;
    }

    body[data-page="workspace"] .workspace-premium-reminder-card p {
        display: -webkit-box;
        overflow: hidden;
        font-size: 0.68rem;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    body[data-page="workspace"] .workspace-premium-card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 7px;
    }

    body[data-page="workspace"] .workspace-premium-action-card {
        display: flex;
        flex-direction: column;
        gap: 7px;
        min-height: 132px;
        padding: 10px;
    }

    body[data-page="workspace"] .workspace-premium-action-icon {
        width: 32px;
        height: 32px;
        border-radius: 9px;
        font-size: 0.75rem;
    }

    body[data-page="workspace"] .workspace-premium-action-content {
        flex: 1 1 auto;
    }

    body[data-page="workspace"] .workspace-premium-action-content h3 {
        font-size: 0.76rem;
    }

    body[data-page="workspace"] .workspace-premium-action-content p {
        margin-top: 3px;
        font-size: 0.65rem;
        line-height: 1.38;
        -webkit-line-clamp: 2;
    }

    body[data-page="workspace"] .workspace-premium-action-card > .workspace-card-link {
        width: 100%;
        min-height: 29px;
        padding: 4px 6px;
        font-size: 0.64rem;
    }

    body[data-page="workspace"] .workspace-premium-record-section > .section-title-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
    }

    body[data-page="workspace"] .workspace-premium-record-section > .section-title-row > div:first-child {
        grid-column: 1 / -1;
    }

    body[data-page="workspace"] .workspace-premium-record-section > .section-title-row .section-count {
        grid-column: 1;
        justify-self: start;
    }

    body[data-page="workspace"] .workspace-premium-record-section > .section-title-row .workspace-card-link {
        grid-column: 2;
        justify-self: end;
    }

    body[data-page="workspace"] .workspace-premium-attendance-item {
        padding: 10px;
    }

    body[data-page="workspace"] .attendance-info-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 5px;
        margin-top: 7px;
    }

    body[data-page="workspace"] .attendance-info-grid > div {
        padding: 7px 8px;
    }

    body[data-page="workspace"] .workspace-feedback-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        padding: 0 7px 7px;
    }

    body[data-page="workspace"] .bottom-nav {
        bottom: max(7px, env(safe-area-inset-bottom));
        width: calc(100% - 18px);
        max-width: 430px;
        grid-template-columns: repeat(3, 1fr);
        padding: 4px;
        border-radius: 14px;
    }

    body[data-page="workspace"] .bottom-nav a {
        min-height: 36px;
        padding: 5px;
        font-size: 0.68rem;
    }
}

/* ---------- Very small phones ---------- */
@media (max-width: 390px) {
    body[data-page="workspace"] .container.page-with-nav {
        width: calc(100% - 14px);
    }

    body[data-page="workspace"] .workspace-premium-summary-grid,
    body[data-page="workspace"] .workspace-premium-card-grid {
        grid-template-columns: 1fr;
    }

    body[data-page="workspace"] .workspace-premium-summary-card:last-child {
        grid-column: auto;
    }

    body[data-page="workspace"] .workspace-premium-action-card {
        min-height: 0;
    }

    body[data-page="workspace"] .workspace-announcement-footer {
        align-items: stretch;
        flex-direction: column;
    }

    body[data-page="workspace"] .workspace-announcement-footer form,
    body[data-page="workspace"] .announcement-read-button {
        width: 100%;
    }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    body[data-page="workspace"] *,
    body[data-page="workspace"] *::before,
    body[data-page="workspace"] *::after {
        scroll-behavior: auto !important;
        transition: none !important;
        animation: none !important;
    }
}

/* =========================================================
   Premium Visual Enhancement Layer
   Keeps the current compact layout; improves hierarchy only.
   ========================================================= */

body[data-page="workspace"] {
    --ws-gold: #b58a4a;
    --ws-gold-soft: #f8f2e8;
    --ws-navy: #24344a;
    --ws-blue: #426b9a;
    --ws-teal: #24766f;
}

/* Refined section headings */
body[data-page="workspace"] .workspace-premium-section,
body[data-page="workspace"] .workspace-premium-record-section {
    position: relative;
}

body[data-page="workspace"] .section-title-row h3,
body[data-page="workspace"] .workspace-announcement-board-header h2 {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 9px;
}

body[data-page="workspace"] .section-title-row h3::before,
body[data-page="workspace"] .workspace-announcement-board-header h2::before {
    content: "";
    width: 4px;
    height: 17px;
    flex: 0 0 4px;
    border-radius: 99px;
    background: linear-gradient(180deg, var(--ws-gold), #8b6b39);
    box-shadow: 0 0 0 4px rgba(181, 138, 74, 0.09);
}

/* Announcement board: premium editorial card */
body[data-page="workspace"] .workspace-announcement-board {
    position: relative;
    overflow: hidden;
    border-color: rgba(181, 138, 74, 0.28);
    background:
        linear-gradient(145deg, rgba(248, 242, 232, 0.65), rgba(255,255,255,0) 34%),
        var(--ws-surface);
    box-shadow: 0 10px 30px rgba(31, 41, 55, 0.07);
}

body[data-page="workspace"] .workspace-announcement-board::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: linear-gradient(180deg, var(--ws-gold), #735b35);
}

body[data-page="workspace"] .workspace-announcement-board::after {
    content: "";
    position: absolute;
    top: -70px;
    right: -55px;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(181,138,74,.10), transparent 68%);
    pointer-events: none;
}

body[data-page="workspace"] .workspace-announcement-eyebrow {
    color: #8a6735;
    letter-spacing: .14em;
}

body[data-page="workspace"] .workspace-announcement-item {
    position: relative;
    border-color: #e4e8ee;
    background: linear-gradient(180deg, #ffffff, #fbfcfe);
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.035);
}

body[data-page="workspace"] .workspace-announcement-item::before {
    content: "";
    position: absolute;
    inset: 10px auto 10px 0;
    width: 3px;
    border-radius: 99px;
    background: #cbd5e1;
}

body[data-page="workspace"] .workspace-announcement-item.is-unread::before {
    background: var(--ws-blue);
}

body[data-page="workspace"] .workspace-announcement-item.is-important::before {
    background: linear-gradient(180deg, #c78a35, #a34f2f);
}

body[data-page="workspace"] .workspace-announcement-item:hover {
    border-color: #ced7e3;
    box-shadow: 0 9px 24px rgba(15, 23, 42, 0.07);
    transform: translateY(-1px);
}

body[data-page="workspace"] .workspace-announcement-item h3 {
    letter-spacing: -.012em;
}

body[data-page="workspace"] .announcement-badge {
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.45);
}

body[data-page="workspace"] .announcement-read-button {
    box-shadow: 0 4px 10px rgba(51, 65, 85, 0.12);
}

/* Important unread alert */
body[data-page="workspace"] .workspace-important-announcement-alert {
    position: relative;
    overflow: hidden;
    border-color: rgba(180, 83, 9, .28);
    background:
        linear-gradient(135deg, rgba(255,247,237,.95), rgba(255,255,255,.96));
    box-shadow: 0 9px 24px rgba(154, 52, 18, 0.08);
}

body[data-page="workspace"] .workspace-important-announcement-alert::after {
    content: "";
    position: absolute;
    width: 130px;
    height: 130px;
    right: -55px;
    top: -62px;
    border-radius: 50%;
    border: 20px solid rgba(180, 83, 9, .045);
}

body[data-page="workspace"] .workspace-important-announcement-alert-icon {
    box-shadow: 0 6px 15px rgba(180, 83, 9, .18);
}

/* Summary cards */
body[data-page="workspace"] .workspace-premium-summary-card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border-color: rgba(203, 213, 225, .92);
    background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
    box-shadow: 0 8px 22px rgba(15, 23, 42, .055);
}

body[data-page="workspace"] .workspace-premium-summary-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: linear-gradient(90deg, #64748b, #cbd5e1);
}

body[data-page="workspace"] .workspace-premium-summary-card::after {
    content: "";
    position: absolute;
    z-index: -1;
    right: -42px;
    bottom: -58px;
    width: 145px;
    height: 145px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(100,116,139,.10), transparent 70%);
}

body[data-page="workspace"] .workspace-premium-mode-card::before {
    background: linear-gradient(90deg, #475569, #94a3b8);
}

body[data-page="workspace"] .workspace-premium-money-card {
    border-color: rgba(181, 138, 74, .32);
    background:
        linear-gradient(145deg, rgba(248,242,232,.82), rgba(255,255,255,.98) 58%);
}

body[data-page="workspace"] .workspace-premium-money-card::before {
    background: linear-gradient(90deg, #8b6b39, #d8b46f);
}

body[data-page="workspace"] .workspace-premium-money-card::after {
    background: radial-gradient(circle, rgba(181,138,74,.16), transparent 70%);
}

body[data-page="workspace"] .workspace-premium-time-card {
    border-color: rgba(66, 107, 154, .27);
    background:
        linear-gradient(145deg, rgba(237,245,253,.88), rgba(255,255,255,.98) 58%);
}

body[data-page="workspace"] .workspace-premium-time-card::before {
    background: linear-gradient(90deg, #315e8d, #78a3c8);
}

body[data-page="workspace"] .workspace-premium-time-card::after {
    background: radial-gradient(circle, rgba(66,107,154,.13), transparent 70%);
}

body[data-page="workspace"] .workspace-premium-summary-card:hover {
    border-color: #c2ccd8;
    box-shadow: 0 13px 30px rgba(15, 23, 42, .085);
    transform: translateY(-2px);
}

body[data-page="workspace"] .workspace-premium-card-top {
    position: relative;
    z-index: 1;
}

body[data-page="workspace"] .summary-label {
    color: #46546a;
    letter-spacing: .025em;
}

body[data-page="workspace"] .workspace-premium-mini-badge {
    border: 1px solid rgba(100, 116, 139, .16);
    background: rgba(255,255,255,.78);
    box-shadow: 0 3px 8px rgba(15,23,42,.04);
}

body[data-page="workspace"] .workspace-premium-money-card .workspace-premium-mini-badge {
    color: #7a5a28;
    border-color: rgba(181,138,74,.22);
    background: rgba(255,250,240,.9);
}

body[data-page="workspace"] .workspace-premium-time-card .workspace-premium-mini-badge {
    color: #315e8d;
    border-color: rgba(66,107,154,.18);
    background: rgba(242,248,255,.9);
}

body[data-page="workspace"] .workspace-premium-value-icon {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.75);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.65),
        0 7px 16px rgba(15,23,42,.10);
}

body[data-page="workspace"] .workspace-premium-money-card .workspace-premium-value-icon {
    color: #fff;
    background: linear-gradient(145deg, #9d7941, #6f542e);
}

body[data-page="workspace"] .workspace-premium-time-card .workspace-premium-value-icon {
    color: #fff;
    background: linear-gradient(145deg, #4d79a7, #294f78);
}

body[data-page="workspace"] .workspace-premium-big-value strong {
    font-variant-numeric: tabular-nums;
    letter-spacing: -.035em;
}

body[data-page="workspace"] .workspace-premium-money-card .workspace-premium-big-value strong {
    color: #5f4727;
}

body[data-page="workspace"] .workspace-premium-time-card .workspace-premium-big-value strong {
    color: #264f79;
}

body[data-page="workspace"] .workspace-premium-pill-links a {
    position: relative;
    border-color: rgba(148,163,184,.28);
    background: rgba(255,255,255,.72);
    box-shadow: 0 3px 8px rgba(15,23,42,.035);
}

body[data-page="workspace"] .workspace-premium-pill-links a:hover {
    color: var(--ws-primary-dark);
    border-color: #b7c2cf;
    background: #fff;
    box-shadow: 0 6px 13px rgba(15,23,42,.07);
}

body[data-page="workspace"] .workspace-premium-progress-shell {
    padding: 2px;
    border: 1px solid rgba(66,107,154,.12);
    background: rgba(255,255,255,.72);
}

body[data-page="workspace"] .workspace-premium-progress-bar {
    background: linear-gradient(90deg, #315e8d, #79a7ce);
    box-shadow: 0 0 12px rgba(66,107,154,.22);
}

/* Reminder card */
body[data-page="workspace"] .workspace-premium-reminder-card {
    position: relative;
    overflow: hidden;
    border-color: rgba(181,138,74,.22);
    background: linear-gradient(100deg, #fffdf8, #fff 65%);
}

body[data-page="workspace"] .workspace-premium-reminder-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: var(--ws-gold);
}

body[data-page="workspace"] .workspace-premium-reminder-icon {
    color: #fff;
    background: linear-gradient(145deg, #b88b46, #806031);
    box-shadow: 0 6px 14px rgba(128,96,49,.17);
}

/* Common function / management cards */
body[data-page="workspace"] .workspace-premium-action-card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border-color: #dde3ea;
    background: linear-gradient(145deg, #fff 0%, #fafbfd 100%);
    box-shadow: 0 5px 15px rgba(15,23,42,.035);
}

body[data-page="workspace"] .workspace-premium-action-card::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0 auto 0 0;
    width: 3px;
    background: linear-gradient(180deg, #64748b, #94a3b8);
    opacity: .72;
    transition: width .2s ease, opacity .2s ease;
}

body[data-page="workspace"] .workspace-premium-action-card::after {
    content: "";
    position: absolute;
    z-index: -1;
    right: -42px;
    top: -48px;
    width: 105px;
    height: 105px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(100,116,139,.085), transparent 70%);
}

body[data-page="workspace"] .workspace-premium-action-card:hover::before {
    width: 5px;
    opacity: 1;
}

body[data-page="workspace"] .workspace-premium-action-card:hover {
    border-color: #c7d0db;
    background: #fff;
    box-shadow: 0 12px 27px rgba(15,23,42,.08);
}

body[data-page="workspace"] .workspace-premium-action-icon {
    border: 1px solid rgba(255,255,255,.72);
    color: #fff;
    background: linear-gradient(145deg, #53657a, #2f3d50);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.16),
        0 7px 14px rgba(31,41,55,.13);
}

body[data-page="workspace"] .workspace-premium-action-card:nth-child(3n + 2) .workspace-premium-action-icon {
    background: linear-gradient(145deg, #526f8e, #314c69);
}

body[data-page="workspace"] .workspace-premium-action-card:nth-child(3n + 3) .workspace-premium-action-icon {
    background: linear-gradient(145deg, #58716e, #324e4b);
}

body[data-page="workspace"] .workspace-premium-action-content h3 {
    color: #243247;
    letter-spacing: -.012em;
}

body[data-page="workspace"] .workspace-premium-action-card > .workspace-card-link {
    border: 1px solid rgba(100,116,139,.17);
    background: rgba(248,250,252,.9);
    box-shadow: 0 3px 8px rgba(15,23,42,.035);
}

body[data-page="workspace"] .workspace-premium-action-card > .workspace-card-link::after {
    content: "›";
    margin-left: 4px;
    font-size: 1rem;
    line-height: 1;
    transition: transform .18s ease;
}

body[data-page="workspace"] .workspace-premium-action-card > .workspace-card-link:hover::after {
    transform: translateX(2px);
}

body[data-page="workspace"] .workspace-premium-action-card.excel-card::before {
    background: linear-gradient(180deg, #24766f, #65a59e);
}

body[data-page="workspace"] .workspace-premium-action-card.excel-card .workspace-premium-action-icon {
    background: linear-gradient(145deg, #33867e, #1f5b55);
}

/* Attendance records */
body[data-page="workspace"] .workspace-premium-attendance-item {
    position: relative;
    overflow: hidden;
    border-color: #dde4ec;
    background: linear-gradient(180deg, #fff, #fbfcfd);
}

body[data-page="workspace"] .workspace-premium-attendance-item::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: #64748b;
}

body[data-page="workspace"] .session-pill {
    border: 1px solid rgba(66,107,154,.15);
    color: #315e8d;
    background: #f1f7fd;
}

/* Mobile keeps the decoration restrained */
@media (max-width: 640px) {
    body[data-page="workspace"] .workspace-premium-summary-card::after,
    body[data-page="workspace"] .workspace-premium-action-card::after,
    body[data-page="workspace"] .workspace-announcement-board::after {
        transform: scale(.78);
        transform-origin: top right;
    }

    body[data-page="workspace"] .workspace-premium-summary-card:hover,
    body[data-page="workspace"] .workspace-premium-action-card:hover,
    body[data-page="workspace"] .workspace-announcement-item:hover {
        transform: none;
    }

    body[data-page="workspace"] .workspace-premium-action-icon,
    body[data-page="workspace"] .workspace-premium-value-icon {
        box-shadow: 0 4px 10px rgba(31,41,55,.11);
    }
}

@media (prefers-reduced-motion: reduce) {
    body[data-page="workspace"] .workspace-premium-summary-card,
    body[data-page="workspace"] .workspace-premium-action-card,
    body[data-page="workspace"] .workspace-announcement-item,
    body[data-page="workspace"] .workspace-card-link::after {
        transition: none !important;
    }
}

/* =========================================================
   Workspace Luxury V3 — visual refinement overrides
   Keeps the existing layout and spacing model.
   ========================================================= */

body[data-page="workspace"] .container.page-with-nav {
    position: relative;
}

/* Visually place the existing language switch inside the hero */
body[data-page="workspace"] .login-language-switch {
    position: absolute;
    z-index: 20;
    top: 30px;
    right: 16px;
    gap: 2px;
    margin: 0;
    padding: 3px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.24);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08),
                0 8px 20px rgba(15, 23, 42, 0.12);
    backdrop-filter: blur(12px);
}

body[data-page="workspace"] .login-language-switch button {
    min-width: 42px;
    min-height: 27px;
    padding: 3px 9px;
    border: 0;
    border-radius: 999px;
    color: rgba(255, 255, 255, 0.7);
    background: transparent;
    box-shadow: none;
    font-size: 0.7rem;
}

body[data-page="workspace"] .login-language-switch button:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
}

body[data-page="workspace"] .login-language-switch button.active {
    color: #152033;
    background: linear-gradient(180deg, #ffffff, #e9eef5);
    box-shadow: 0 3px 9px rgba(15, 23, 42, 0.18),
                inset 0 1px 0 #fff;
}

/* More refined premium hero */
body[data-page="workspace"] .workspace-premium-hero {
    isolation: isolate;
    min-height: 154px;
    padding: 24px 22px;
    border-color: rgba(255, 255, 255, 0.2);
    background:
        radial-gradient(circle at 14% 10%, rgba(255, 255, 255, 0.14), transparent 24%),
        radial-gradient(circle at 86% 110%, rgba(148, 163, 184, 0.25), transparent 35%),
        linear-gradient(120deg, rgba(255,255,255,.055), transparent 42%),
        linear-gradient(135deg, #182333 0%, #29374a 47%, #43536a 100%);
    box-shadow:
        0 18px 42px rgba(15, 23, 42, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        inset 0 -1px 0 rgba(15, 23, 42, 0.2);
}

body[data-page="workspace"] .workspace-premium-hero::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
    background-size: 28px 28px;
    mask-image: linear-gradient(90deg, rgba(0,0,0,.75), transparent 78%);
    pointer-events: none;
}

body[data-page="workspace"] .workspace-premium-hero::after {
    right: -70px;
    top: -112px;
    width: 290px;
    height: 290px;
    border: 42px solid rgba(255, 255, 255, 0.025);
    box-shadow: 0 0 0 1px rgba(255,255,255,.055);
}

body[data-page="workspace"] .workspace-premium-icon {
    position: relative;
    flex-basis: 58px;
    width: 58px;
    height: 58px;
    border-color: rgba(255, 255, 255, 0.22);
    border-radius: 18px;
    background:
        linear-gradient(145deg, rgba(255,255,255,.18), rgba(255,255,255,.055));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        0 12px 28px rgba(15, 23, 42, 0.22);
}

body[data-page="workspace"] .workspace-premium-icon::after {
    content: "";
    position: absolute;
    right: 7px;
    bottom: 7px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #86efac;
    box-shadow: 0 0 0 3px rgba(134, 239, 172, 0.13),
                0 0 12px rgba(134, 239, 172, 0.55);
}

body[data-page="workspace"] .workspace-premium-hero h1 {
    text-shadow: 0 2px 14px rgba(15, 23, 42, 0.22);
}

body[data-page="workspace"] .workspace-premium-hero-side {
    margin-top: 28px;
    padding: 14px 15px;
    border-color: rgba(255, 255, 255, 0.16);
    background:
        linear-gradient(145deg, rgba(255,255,255,.115), rgba(255,255,255,.045));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.1),
                0 12px 24px rgba(15,23,42,.12);
}

body[data-page="workspace"] .workspace-premium-hero-side strong::before {
    content: "";
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-right: 7px;
    border-radius: 50%;
    background: #86efac;
    box-shadow: 0 0 0 4px rgba(134,239,172,.1);
    vertical-align: 0.08em;
}

/* Premium interactive buttons */
body[data-page="workspace"] .workspace-card-link,
body[data-page="workspace"] .rooms-pro-action-btn.notification-btn,
body[data-page="workspace"] .announcement-read-button {
    position: relative;
    overflow: hidden;
    box-shadow: 0 7px 16px rgba(15, 23, 42, 0.08),
                inset 0 1px 0 rgba(255,255,255,.7);
}

body[data-page="workspace"] .workspace-card-link {
    border-color: #d8e0ea;
    background: linear-gradient(180deg, #ffffff 0%, #f3f6fa 100%);
}

body[data-page="workspace"] .workspace-card-link::before,
body[data-page="workspace"] .announcement-read-button::before {
    content: "";
    position: absolute;
    top: 0;
    left: -70%;
    width: 48%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.75), transparent);
    transform: skewX(-18deg);
    transition: left .45s ease;
    pointer-events: none;
}

body[data-page="workspace"] .workspace-card-link:hover::before,
body[data-page="workspace"] .announcement-read-button:hover::before {
    left: 125%;
}

body[data-page="workspace"] .workspace-premium-action-card > .workspace-card-link {
    min-height: 35px;
    padding-right: 37px;
}

body[data-page="workspace"] .workspace-premium-action-card > .workspace-card-link::after {
    content: "→";
    position: absolute;
    right: 8px;
    top: 50%;
    display: grid;
    width: 22px;
    height: 22px;
    place-items: center;
    border-radius: 7px;
    color: #fff;
    background: linear-gradient(145deg, #475569, #273549);
    box-shadow: 0 4px 10px rgba(30,41,59,.2);
    transform: translateY(-50%);
}

body[data-page="workspace"] .workspace-premium-action-card > .workspace-card-link:hover {
    color: #172033;
    border-color: #bac6d5;
    background: #fff;
    transform: translateY(-1px);
}

body[data-page="workspace"] .rooms-pro-action-btn.notification-btn {
    background: linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.08));
}

/* Real progress-track appearance for total duration card */
body[data-page="workspace"] .workspace-premium-progress-shell {
    position: relative;
    height: 10px;
    padding: 2px;
    overflow: hidden;
    border: 1px solid #d7e0eb;
    border-radius: 999px;
    background:
        repeating-linear-gradient(
            90deg,
            #eef2f7 0,
            #eef2f7 calc(12.5% - 1px),
            #dfe6ef calc(12.5% - 1px),
            #dfe6ef 12.5%
        );
    box-shadow: inset 0 2px 4px rgba(15,23,42,.06),
                0 1px 0 #fff;
}

body[data-page="workspace"] .workspace-premium-progress-bar {
    position: relative;
    width: 68%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #315f91 0%, #4f7fb0 56%, #78a2ca 100%);
    box-shadow: 0 2px 8px rgba(47,95,145,.28),
                inset 0 1px 0 rgba(255,255,255,.35);
    overflow: hidden;
}

body[data-page="workspace"] .workspace-premium-progress-bar::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, transparent 20%, rgba(255,255,255,.42) 48%, transparent 72%);
    transform: translateX(-120%);
    animation: ws-progress-shine 3.2s ease-in-out infinite;
}

@keyframes ws-progress-shine {
    0%, 48% { transform: translateX(-120%); }
    78%, 100% { transform: translateX(140%); }
}

body[data-page="workspace"] .workspace-premium-time-card .workspace-premium-desc {
    display: flex;
    align-items: center;
    gap: 6px;
}

body[data-page="workspace"] .workspace-premium-time-card .workspace-premium-desc::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #4f7fb0;
    box-shadow: 0 0 0 3px rgba(79,127,176,.11);
}

/* More designed attendance records */
body[data-page="workspace"] .workspace-premium-record-section {
    background:
        linear-gradient(180deg, rgba(248,250,252,.95), rgba(255,255,255,.98));
}

body[data-page="workspace"] .workspace-premium-attendance-item {
    position: relative;
    padding: 0;
    overflow: hidden;
    border: 1px solid #dbe3ed;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 7px 18px rgba(15,23,42,.055),
                inset 0 1px 0 #fff;
}

body[data-page="workspace"] .workspace-premium-attendance-item::before {
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    border-radius: 0;
    background: linear-gradient(180deg, #4f6f94, #8ca5bf);
}

body[data-page="workspace"] .workspace-premium-attendance-item .attendance-top-row {
    position: relative;
    padding: 13px 15px 11px 18px;
    border-bottom: 1px solid #e5eaf1;
    background:
        linear-gradient(90deg, rgba(237,244,251,.92), rgba(248,250,252,.72) 58%, #fff);
}

body[data-page="workspace"] .workspace-premium-attendance-item .attendance-top-row::after {
    content: "";
    position: absolute;
    right: 14px;
    bottom: -1px;
    width: 44px;
    height: 2px;
    border-radius: 999px;
    background: #7793b1;
}

body[data-page="workspace"] .workspace-premium-attendance-item .attendance-top-row h4 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    color: #172033;
    font-size: .95rem;
}

body[data-page="workspace"] .workspace-premium-attendance-item .attendance-top-row h4::before {
    content: "";
    width: 9px;
    height: 9px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: #4f7a68;
    box-shadow: 0 0 0 3px rgba(79,122,104,.14);
}

body[data-page="workspace"] .workspace-premium-attendance-item .attendance-top-row p {
    margin: 4px 0 0 17px;
    color: #69768a;
}

body[data-page="workspace"] .workspace-premium-attendance-item .session-pill {
    border: 1px solid #ccd7e4;
    color: #3b526d;
    background: linear-gradient(180deg, #fff, #edf3f8);
    box-shadow: 0 3px 8px rgba(15,23,42,.06);
}

body[data-page="workspace"] .workspace-premium-attendance-item .attendance-info-grid {
    gap: 0;
    padding: 10px 13px 13px 17px;
    border: 0;
    background: #fff;
}

body[data-page="workspace"] .workspace-premium-attendance-item .attendance-info-grid > div {
    position: relative;
    min-width: 0;
    padding: 8px 10px;
    border-right: 1px dashed #dfe5ed;
}

body[data-page="workspace"] .workspace-premium-attendance-item .attendance-info-grid > div:last-child {
    border-right: 0;
}

body[data-page="workspace"] .workspace-premium-attendance-item .attendance-info-grid span {
    display: block;
    margin-bottom: 3px;
    color: #8792a3;
    font-size: .67rem;
    font-weight: 750;
    letter-spacing: .025em;
}

body[data-page="workspace"] .workspace-premium-attendance-item .attendance-info-grid strong {
    color: #27364a;
    font-size: .79rem;
}

body[data-page="workspace"] .workspace-premium-attendance-item .attendance-note,
body[data-page="workspace"] .workspace-premium-attendance-item .workspace-feedback-details {
    margin-right: 13px;
    margin-left: 17px;
}

body[data-page="workspace"] .workspace-feedback-summary {
    border: 1px solid #dce4ed;
    background: linear-gradient(180deg, #fbfcfe, #f3f6fa);
    box-shadow: inset 0 1px 0 #fff;
}

@media (max-width: 700px) {
    body[data-page="workspace"] .login-language-switch {
        top: 27px;
        right: 11px;
    }

    body[data-page="workspace"] .workspace-premium-hero {
        padding-top: 30px;
    }

    body[data-page="workspace"] .workspace-premium-hero-side {
        margin-top: 0;
    }

    body[data-page="workspace"] .workspace-premium-attendance-item .attendance-info-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        padding: 8px 10px 11px 14px;
    }

    body[data-page="workspace"] .workspace-premium-attendance-item .attendance-info-grid > div {
        border-right: 0;
        border-bottom: 1px dashed #e2e7ee;
    }

    body[data-page="workspace"] .workspace-premium-attendance-item .attendance-info-grid > div:nth-last-child(-n + 2) {
        border-bottom: 0;
    }

    body[data-page="workspace"] .workspace-premium-attendance-item .attendance-top-row {
        padding-left: 15px;
    }

    body[data-page="workspace"] .workspace-premium-attendance-item .attendance-note,
    body[data-page="workspace"] .workspace-premium-attendance-item .workspace-feedback-details {
        margin-right: 10px;
        margin-left: 14px;
    }
}

@media (max-width: 390px) {
    body[data-page="workspace"] .login-language-switch button {
        min-width: 37px;
        padding-inline: 7px;
    }

    body[data-page="workspace"] .workspace-premium-hero {
        padding-top: 30px;
    }
}

@media (prefers-reduced-motion: reduce) {
    body[data-page="workspace"] .workspace-premium-progress-bar::after {
        animation: none;
    }
}


/* =========================================================
   Workspace Final Refinement
   Based on current global
   - Remove button arrows
   - Improve announcement board
   - Add slightly more breathing space
   - Enrich attendance record backgrounds
   ========================================================= */

/* ---------- Remove arrows beside action buttons ---------- */
body[data-page="workspace"] .workspace-premium-action-card > .workspace-card-link {
    padding-right: 12px;
}

body[data-page="workspace"] .workspace-premium-action-card > .workspace-card-link::after {
    content: none !important;
    display: none !important;
}

/* ---------- Slightly increase breathing space ---------- */
body[data-page="workspace"] .workspace-announcement-board,
body[data-page="workspace"] .workspace-premium-section,
body[data-page="workspace"] .workspace-premium-record-section {
    padding: 20px;
}

body[data-page="workspace"] .workspace-premium-summary-card {
    padding: 17px;
}

body[data-page="workspace"] .workspace-premium-action-card {
    padding: 15px;
    gap: 10px 12px;
}

body[data-page="workspace"] .workspace-premium-card-grid {
    gap: 11px;
}

body[data-page="workspace"] .workspace-record-list,
body[data-page="workspace"] .workspace-announcement-list {
    gap: 11px;
}

body[data-page="workspace"] .section-title-row,
body[data-page="workspace"] .workspace-announcement-board-header {
    margin-bottom: 15px;
}

/* ---------- Premium company announcement board ---------- */
body[data-page="workspace"] .workspace-announcement-board {
    border: 1px solid rgba(168, 133, 75, 0.30);
    background:
        radial-gradient(circle at 100% 0%, rgba(181, 138, 74, 0.10), transparent 250px),
        linear-gradient(145deg, #fffdf9 0%, #ffffff 48%, #f8fafc 100%);
    box-shadow:
        0 14px 34px rgba(51, 65, 85, 0.075),
        inset 0 1px 0 rgba(255,255,255,.95);
}

body[data-page="workspace"] .workspace-announcement-board::before {
    width: 5px;
    background: linear-gradient(
        180deg,
        #d3ae6c 0%,
        #9a7340 48%,
        #42566f 100%
    );
}

body[data-page="workspace"] .workspace-announcement-board-header {
    position: relative;
    z-index: 2;
    align-items: center;
    padding: 3px 2px 15px 4px;
    border-bottom: 1px solid rgba(181, 138, 74, 0.17);
}

body[data-page="workspace"] .workspace-announcement-board-header h2 {
    font-size: 1.08rem;
    letter-spacing: -0.02em;
}

body[data-page="workspace"] .workspace-announcement-board-header h2::before {
    width: 5px;
    height: 20px;
    flex-basis: 5px;
    background: linear-gradient(180deg, #cda55e, #7e6034);
    box-shadow: 0 0 0 5px rgba(181, 138, 74, 0.09);
}

body[data-page="workspace"] .workspace-announcement-board-header p {
    max-width: 700px;
    margin-top: 5px;
    line-height: 1.55;
}

body[data-page="workspace"] .workspace-announcement-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 6px;
    color: #8a6735;
}

body[data-page="workspace"] .workspace-announcement-eyebrow::before {
    content: "";
    width: 18px;
    height: 1px;
    background: linear-gradient(90deg, #b58a4a, transparent);
}

body[data-page="workspace"] .workspace-announcement-header-actions .workspace-card-link {
    min-height: 34px;
    padding: 6px 12px;
    border-color: rgba(145, 117, 73, 0.22);
    color: #5d4829;
    background:
        linear-gradient(180deg, rgba(255,255,255,.98), rgba(249,244,235,.92));
    box-shadow:
        0 5px 12px rgba(91, 70, 38, 0.07),
        inset 0 1px 0 #fff;
}

body[data-page="workspace"] .workspace-announcement-header-actions .workspace-card-link:hover {
    color: #fff;
    border-color: #8c6939;
    background: linear-gradient(145deg, #9a7641, #6f522d);
}

/* Announcement item hierarchy */
body[data-page="workspace"] .workspace-announcement-item {
    padding: 15px 16px 14px 18px;
    border: 1px solid #e1e6ed;
    border-radius: 14px;
    background:
        linear-gradient(135deg, rgba(248,250,252,.96), rgba(255,255,255,.98));
    box-shadow:
        0 6px 16px rgba(15,23,42,.04),
        inset 0 1px 0 #fff;
}

body[data-page="workspace"] .workspace-announcement-item::before {
    inset: 13px auto 13px 0;
    width: 4px;
}

body[data-page="workspace"] .workspace-announcement-item.is-unread {
    border-color: rgba(66, 107, 154, 0.22);
    background:
        linear-gradient(90deg, rgba(237,245,253,.92), rgba(255,255,255,.98) 28%);
}

body[data-page="workspace"] .workspace-announcement-item.is-important {
    border-color: rgba(181, 107, 52, 0.26);
    background:
        linear-gradient(90deg, rgba(255,246,235,.96), rgba(255,255,255,.99) 30%);
}

body[data-page="workspace"] .workspace-announcement-item h3 {
    margin-top: 10px;
    margin-bottom: 5px;
    color: #1d2a3c;
    font-size: .98rem;
}

body[data-page="workspace"] .workspace-announcement-body {
    color: #59677b;
    line-height: 1.62;
}

body[data-page="workspace"] .workspace-announcement-footer {
    margin-top: 12px;
    padding-top: 11px;
    border-top-color: #dfe5ec;
}

body[data-page="workspace"] .announcement-badge {
    min-height: 23px;
    padding: 3px 8px;
    border: 1px solid rgba(148,163,184,.12);
}

/* ---------- Better attendance section background ---------- */
body[data-page="workspace"] .workspace-premium-record-section {
    position: relative;
    overflow: hidden;
    border-color: rgba(107, 130, 158, 0.25);
    background:
        radial-gradient(circle at 100% 0%, rgba(79, 111, 148, 0.11), transparent 260px),
        radial-gradient(circle at 0% 100%, rgba(181, 138, 74, 0.08), transparent 240px),
        linear-gradient(145deg, #f3f7fb 0%, #f8fafc 46%, #eef3f8 100%);
    box-shadow:
        0 14px 34px rgba(51, 65, 85, 0.075),
        inset 0 1px 0 rgba(255,255,255,.9);
}

body[data-page="workspace"] .workspace-premium-record-section::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 3px;
    background: linear-gradient(
        90deg,
        #4c6988 0%,
        #8ba3bd 48%,
        #b58a4a 100%
    );
}

body[data-page="workspace"] .workspace-premium-record-section > * {
    position: relative;
    z-index: 1;
}

body[data-page="workspace"] .workspace-premium-record-section > .section-title-row {
    padding: 2px 2px 14px;
    border-bottom: 1px solid rgba(111, 135, 163, 0.16);
}

body[data-page="workspace"] .workspace-premium-record-section .section-count {
    border-color: rgba(79, 111, 148, .19);
    color: #3f5875;
    background: rgba(255,255,255,.74);
    box-shadow: 0 4px 10px rgba(51,65,85,.045);
}

body[data-page="workspace"] .workspace-premium-attendance-item {
    border-color: rgba(106, 130, 158, 0.24);
    background:
        linear-gradient(145deg, rgba(255,255,255,.98), rgba(242,247,251,.96));
    box-shadow:
        0 9px 22px rgba(37, 52, 71, 0.065),
        inset 0 1px 0 rgba(255,255,255,.95);
}

body[data-page="workspace"] .workspace-premium-attendance-item:nth-child(even) {
    background:
        linear-gradient(145deg, rgba(255,255,255,.99), rgba(247,244,237,.92));
}

body[data-page="workspace"] .workspace-premium-attendance-item .attendance-top-row {
    background:
        linear-gradient(
            90deg,
            rgba(226,237,247,.98) 0%,
            rgba(245,248,251,.96) 56%,
            rgba(255,255,255,.98) 100%
        );
}

body[data-page="workspace"] .workspace-premium-attendance-item:nth-child(even) .attendance-top-row {
    background:
        linear-gradient(
            90deg,
            rgba(244,236,221,.93) 0%,
            rgba(249,247,242,.96) 56%,
            rgba(255,255,255,.98) 100%
        );
}

body[data-page="workspace"] .workspace-premium-attendance-item .attendance-info-grid {
    background: transparent;
}

body[data-page="workspace"] .workspace-premium-attendance-item .attendance-info-grid > div {
    margin: 2px;
    border: 1px solid rgba(213,221,231,.72);
    border-radius: 10px;
    background: rgba(255,255,255,.63);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.78);
}

body[data-page="workspace"] .workspace-premium-attendance-item .attendance-info-grid > div:last-child {
    border-right: 1px solid rgba(213,221,231,.72);
}

body[data-page="workspace"] .workspace-feedback-details {
    background: rgba(255,255,255,.70);
}

/* ---------- Mobile refinements ---------- */
@media (max-width: 700px) {
    body[data-page="workspace"] .workspace-announcement-board,
    body[data-page="workspace"] .workspace-premium-section,
    body[data-page="workspace"] .workspace-premium-record-section {
        padding: 14px;
    }

    body[data-page="workspace"] .workspace-premium-summary-card {
        padding: 13px;
    }

    body[data-page="workspace"] .workspace-premium-action-card {
        padding: 12px;
    }

    body[data-page="workspace"] .workspace-announcement-board-header {
        padding-bottom: 12px;
    }

    body[data-page="workspace"] .workspace-announcement-item {
        padding: 12px 12px 11px 15px;
    }

    body[data-page="workspace"] .workspace-premium-attendance-item .attendance-info-grid > div {
        margin: 2px;
        border: 1px solid rgba(213,221,231,.72);
    }
}

@media (max-width: 390px) {
    body[data-page="workspace"] .workspace-announcement-board,
    body[data-page="workspace"] .workspace-premium-section,
    body[data-page="workspace"] .workspace-premium-record-section {
        padding: 12px;
    }
}



/* =========================================================
   Workspace Role Colour + Summary Upgrade
   Keeps all other approved UI styles.
   ========================================================= */

/* ---------- Role colour system ---------- */
body[data-page="workspace"] {
    --role-color: #334155;
    --role-color-dark: #1e293b;
    --role-color-rgb: 51, 65, 85;
    --role-soft: #f1f5f9;
}

body[data-page="workspace"].role-promoter {
    --role-color: #be185d;
    --role-color-dark: #9d174d;
    --role-color-rgb: 190, 24, 93;
    --role-soft: #fdf2f8;
}

body[data-page="workspace"].role-business {
    --role-color: #1e3a8a;
    --role-color-dark: #172554;
    --role-color-rgb: 30, 58, 138;
    --role-soft: #eff6ff;
}

body[data-page="workspace"].role-team-leader {
    --role-color: #4c1d95;
    --role-color-dark: #3b0764;
    --role-color-rgb: 76, 29, 149;
    --role-soft: #f5f3ff;
}

body[data-page="workspace"].role-dj {
    --role-color: #831843;
    --role-color-dark: #500724;
    --role-color-rgb: 131, 24, 67;
    --role-soft: #fdf2f8;
}

body[data-page="workspace"].role-manager,
body[data-page="workspace"].role-store-manager,
body[data-page="workspace"].role-senior-admin {
    --role-color: #334155;
    --role-color-dark: #1e293b;
    --role-color-rgb: 51, 65, 85;
    --role-soft: #f1f5f9;
}

/* ---------- All primary workspace buttons follow role ---------- */
body[data-page="workspace"] .workspace-card-link,
body[data-page="workspace"] .announcement-read-button,
body[data-page="workspace"] .rooms-pro-action-btn.notification-btn {
    border-color: rgba(var(--role-color-rgb), .24);
}

body[data-page="workspace"] .workspace-premium-action-card > .workspace-card-link,
body[data-page="workspace"] .workspace-announcement-header-actions .workspace-card-link,
body[data-page="workspace"] .workspace-premium-record-section > .section-title-row .workspace-card-link {
    color: var(--role-color-dark);
    border-color: rgba(var(--role-color-rgb), .22);
    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.98),
            rgba(var(--role-color-rgb), .065)
        );
    box-shadow:
        0 5px 12px rgba(var(--role-color-rgb), .08),
        inset 0 1px 0 rgba(255,255,255,.95);
}

body[data-page="workspace"] .workspace-card-link:hover,
body[data-page="workspace"] .announcement-read-button:hover,
body[data-page="workspace"] .workspace-announcement-header-actions .workspace-card-link:hover,
body[data-page="workspace"] .workspace-premium-action-card > .workspace-card-link:hover {
    color: #fff;
    border-color: var(--role-color);
    background:
        linear-gradient(145deg, var(--role-color), var(--role-color-dark));
    box-shadow:
        0 8px 18px rgba(var(--role-color-rgb), .22),
        inset 0 1px 0 rgba(255,255,255,.16);
}

body[data-page="workspace"] .workspace-premium-pill-links a:hover {
    color: #fff;
    border-color: var(--role-color);
    background: var(--role-color);
    box-shadow: 0 6px 14px rgba(var(--role-color-rgb), .18);
}

body[data-page="workspace"] .bottom-nav a.active {
    background:
        linear-gradient(145deg, var(--role-color), var(--role-color-dark));
    box-shadow: 0 5px 13px rgba(var(--role-color-rgb), .22);
}

/* Function icon and side accent also follow role */
body[data-page="workspace"] .workspace-premium-action-card::before {
    background:
        linear-gradient(
            180deg,
            var(--role-color),
            rgba(var(--role-color-rgb), .52)
        );
}

body[data-page="workspace"] .workspace-premium-action-icon,
body[data-page="workspace"] .workspace-premium-action-card:nth-child(3n + 2) .workspace-premium-action-icon,
body[data-page="workspace"] .workspace-premium-action-card:nth-child(3n + 3) .workspace-premium-action-icon {
    background:
        linear-gradient(145deg, var(--role-color), var(--role-color-dark));
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.18),
        0 7px 15px rgba(var(--role-color-rgb), .18);
}

/* Keep Excel settlement visually identifiable */
body[data-page="workspace"] .workspace-premium-action-card.excel-card::before {
    background: linear-gradient(180deg, #24766f, #65a59e);
}

body[data-page="workspace"] .workspace-premium-action-card.excel-card .workspace-premium-action-icon {
    background: linear-gradient(145deg, #33867e, #1f5b55);
}

/* ---------- Cleaner company announcement header ---------- */
body[data-page="workspace"] .workspace-announcement-board-header {
    position: relative;
    z-index: 2;
    align-items: center;
    margin-bottom: 14px;
    padding: 0 0 13px;
    border-bottom: 1px solid #e3e8ef;
    background: transparent;
}

body[data-page="workspace"] .workspace-announcement-board-header::before,
body[data-page="workspace"] .workspace-announcement-board-header::after {
    content: none;
    display: none;
}

body[data-page="workspace"] .workspace-announcement-board-header h2 {
    display: block;
    color: #1d2a3c;
    font-size: 1.08rem;
    letter-spacing: -.018em;
}

body[data-page="workspace"] .workspace-announcement-board-header h2::before {
    content: none;
    display: none;
}

body[data-page="workspace"] .workspace-announcement-eyebrow {
    display: inline-flex;
    align-items: center;
    min-height: 23px;
    margin-bottom: 6px;
    padding: 3px 8px;
    border: 1px solid rgba(var(--role-color-rgb), .16);
    border-radius: 999px;
    color: var(--role-color);
    background: rgba(var(--role-color-rgb), .07);
    font-size: .62rem;
    letter-spacing: .11em;
}

body[data-page="workspace"] .workspace-announcement-eyebrow::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--role-color);
    box-shadow: 0 0 0 3px rgba(var(--role-color-rgb), .10);
}

body[data-page="workspace"] .workspace-announcement-board-header p {
    max-width: 720px;
    margin-top: 4px;
    color: #748195;
    line-height: 1.5;
}

/* Remove the previous heavy gold announcement treatment */
body[data-page="workspace"] .workspace-announcement-board {
    border-color: #dfe5ec;
    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(var(--role-color-rgb), .065),
            transparent 245px
        ),
        linear-gradient(145deg, #ffffff, #f8fafc);
}

body[data-page="workspace"] .workspace-announcement-board::before {
    width: 4px;
    background:
        linear-gradient(
            180deg,
            var(--role-color),
            rgba(var(--role-color-rgb), .40)
        );
}

body[data-page="workspace"] .workspace-announcement-board::after {
    background:
        radial-gradient(
            circle,
            rgba(var(--role-color-rgb), .08),
            transparent 68%
        );
}

/* ---------- More attractive check-in mode card ---------- */
body[data-page="workspace"] .workspace-premium-mode-card {
    border-color: rgba(var(--role-color-rgb), .28);
    background:
        radial-gradient(
            circle at 100% 100%,
            rgba(var(--role-color-rgb), .16),
            transparent 155px
        ),
        linear-gradient(
            145deg,
            rgba(var(--role-color-rgb), .11),
            rgba(255,255,255,.98) 56%
        );
    box-shadow:
        0 12px 28px rgba(var(--role-color-rgb), .10),
        inset 0 1px 0 rgba(255,255,255,.95);
}

body[data-page="workspace"] .workspace-premium-mode-card::before {
    height: 4px;
    background:
        linear-gradient(
            90deg,
            var(--role-color-dark),
            var(--role-color),
            rgba(var(--role-color-rgb), .36)
        );
}

body[data-page="workspace"] .workspace-premium-mode-card::after {
    right: -35px;
    bottom: -50px;
    width: 150px;
    height: 150px;
    border: 24px solid rgba(var(--role-color-rgb), .045);
    background: transparent;
}

body[data-page="workspace"] .workspace-premium-mode-card .workspace-premium-mini-badge {
    color: var(--role-color-dark);
    border-color: rgba(var(--role-color-rgb), .20);
    background: rgba(255,255,255,.76);
}

body[data-page="workspace"] .workspace-premium-mode-card > strong {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-top: 16px;
    padding: 8px 11px;
    border: 1px solid rgba(var(--role-color-rgb), .16);
    border-radius: 11px;
    color: var(--role-color-dark);
    background: rgba(255,255,255,.72);
    box-shadow:
        0 5px 13px rgba(var(--role-color-rgb), .08),
        inset 0 1px 0 rgba(255,255,255,.95);
}

body[data-page="workspace"] .workspace-premium-mode-card > strong::before {
    content: "";
    width: 9px;
    height: 9px;
    flex: 0 0 9px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: var(--role-color);
    box-shadow: 0 0 0 4px rgba(var(--role-color-rgb), .12);
}

body[data-page="workspace"] .workspace-premium-mode-card .workspace-premium-meta-list {
    padding: 9px 11px;
    border: 1px solid rgba(var(--role-color-rgb), .10);
    border-radius: 11px;
    background: rgba(255,255,255,.54);
}

/* ---------- More attractive balance card ---------- */
body[data-page="workspace"] .workspace-premium-money-card {
    border-color: rgba(181, 138, 74, .38);
    background:
        radial-gradient(circle at 100% 0%, rgba(218, 180, 109, .19), transparent 175px),
        radial-gradient(circle at 0% 100%, rgba(139, 107, 57, .10), transparent 165px),
        linear-gradient(145deg, #fffaf0 0%, #ffffff 57%, #f7f2e8 100%);
    box-shadow:
        0 13px 30px rgba(118, 86, 38, .11),
        inset 0 1px 0 rgba(255,255,255,.96);
}

body[data-page="workspace"] .workspace-premium-money-card::before {
    height: 4px;
    background:
        linear-gradient(90deg, #6f542e, #b58a4a 52%, #e2c17e);
}

body[data-page="workspace"] .workspace-premium-money-card::after {
    right: -45px;
    bottom: -66px;
    width: 165px;
    height: 165px;
    border: 26px solid rgba(181,138,74,.055);
    background: transparent;
}

body[data-page="workspace"] .workspace-premium-money-card .workspace-premium-value-row {
    position: relative;
    margin-top: 15px;
    padding: 12px;
    border: 1px solid rgba(181,138,74,.18);
    border-radius: 13px;
    background:
        linear-gradient(135deg, rgba(255,255,255,.82), rgba(248,242,232,.72));
    box-shadow:
        0 7px 17px rgba(111,84,46,.08),
        inset 0 1px 0 rgba(255,255,255,.95);
}

body[data-page="workspace"] .workspace-premium-money-card .workspace-premium-value-icon {
    flex-basis: 43px;
    width: 43px;
    height: 43px;
    border-radius: 13px;
    background:
        linear-gradient(145deg, #b48a4b, #6f542e);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.22),
        0 8px 18px rgba(111,84,46,.22);
}

body[data-page="workspace"] .workspace-premium-money-card .workspace-premium-big-value {
    font-size: clamp(1.18rem, 1.9vw, 1.55rem);
}

body[data-page="workspace"] .workspace-premium-money-card .workspace-premium-big-value strong {
    color: #543e20;
    text-shadow: 0 1px 0 rgba(255,255,255,.9);
}

body[data-page="workspace"] .workspace-premium-money-card .workspace-premium-pill-links a {
    color: #6f542e;
    border-color: rgba(181,138,74,.20);
    background: rgba(255,252,246,.80);
}

body[data-page="workspace"] .workspace-premium-money-card .workspace-premium-pill-links a:hover {
    color: #fff;
    border-color: #8b6b39;
    background: linear-gradient(145deg, #a47d42, #6f542e);
}

/* ---------- Mobile ---------- */
@media (max-width: 700px) {
    body[data-page="workspace"] .workspace-announcement-board-header {
        align-items: flex-start;
        padding-bottom: 11px;
    }

    body[data-page="workspace"] .workspace-premium-mode-card > strong {
        padding: 7px 9px;
    }

    body[data-page="workspace"] .workspace-premium-mode-card .workspace-premium-meta-list {
        padding: 7px 8px;
    }

    body[data-page="workspace"] .workspace-premium-money-card .workspace-premium-value-row {
        padding: 9px;
    }

    body[data-page="workspace"] .workspace-premium-money-card .workspace-premium-value-icon {
        flex-basis: 35px;
        width: 35px;
        height: 35px;
        border-radius: 10px;
    }
}



/* =========================================================
   Workspace Mobile-Visible Buttons + Announcement Header V2
   ========================================================= */

/* ---------- Buttons are coloured by default, not only on hover ---------- */
body[data-page="workspace"] .workspace-premium-action-card > .workspace-card-link,
body[data-page="workspace"] .workspace-announcement-header-actions .workspace-card-link,
body[data-page="workspace"] .workspace-premium-record-section > .section-title-row .workspace-card-link,
body[data-page="workspace"] .announcement-read-button {
    color: #fff;
    border-color: var(--role-color);
    background:
        linear-gradient(145deg, var(--role-color), var(--role-color-dark));
    box-shadow:
        0 7px 16px rgba(var(--role-color-rgb), .20),
        inset 0 1px 0 rgba(255,255,255,.16);
}

body[data-page="workspace"] .workspace-premium-action-card > .workspace-card-link:hover,
body[data-page="workspace"] .workspace-announcement-header-actions .workspace-card-link:hover,
body[data-page="workspace"] .workspace-premium-record-section > .section-title-row .workspace-card-link:hover,
body[data-page="workspace"] .announcement-read-button:hover {
    color: #fff;
    border-color: var(--role-color-dark);
    background:
        linear-gradient(145deg, var(--role-color-dark), var(--role-color));
    box-shadow:
        0 9px 20px rgba(var(--role-color-rgb), .26),
        inset 0 1px 0 rgba(255,255,255,.18);
    transform: translateY(-1px);
}

body[data-page="workspace"] .workspace-premium-action-card > .workspace-card-link:active,
body[data-page="workspace"] .workspace-announcement-header-actions .workspace-card-link:active,
body[data-page="workspace"] .workspace-premium-record-section > .section-title-row .workspace-card-link:active,
body[data-page="workspace"] .announcement-read-button:active {
    transform: translateY(0) scale(.985);
    box-shadow:
        0 4px 10px rgba(var(--role-color-rgb), .18),
        inset 0 2px 4px rgba(15,23,42,.12);
}

/* Wallet mini buttons are also visible on mobile */
body[data-page="workspace"] .workspace-premium-pill-links a {
    color: #fff;
    border-color: var(--role-color);
    background:
        linear-gradient(145deg, var(--role-color), var(--role-color-dark));
    box-shadow:
        0 5px 12px rgba(var(--role-color-rgb), .16),
        inset 0 1px 0 rgba(255,255,255,.14);
}

body[data-page="workspace"] .workspace-premium-pill-links a:hover,
body[data-page="workspace"] .workspace-premium-pill-links a:active {
    color: #fff;
    border-color: var(--role-color-dark);
    background:
        linear-gradient(145deg, var(--role-color-dark), var(--role-color));
}

/* Keep balance card links gold so the asset card remains visually distinct */
body[data-page="workspace"] .workspace-premium-money-card .workspace-premium-pill-links a {
    color: #fff;
    border-color: #8b6b39;
    background: linear-gradient(145deg, #a47d42, #6f542e);
    box-shadow:
        0 5px 12px rgba(111,84,46,.18),
        inset 0 1px 0 rgba(255,255,255,.15);
}

/* ---------- Completely redesigned announcement header ---------- */
body[data-page="workspace"] .workspace-announcement-board-header {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 18px;
    margin: -4px -4px 15px;
    padding: 15px 16px;
    overflow: hidden;
    border: 1px solid rgba(var(--role-color-rgb), .16);
    border-radius: 14px;
    background:
        linear-gradient(
            120deg,
            rgba(var(--role-color-rgb), .11),
            rgba(255,255,255,.96) 46%,
            rgba(var(--role-color-rgb), .045)
        );
    box-shadow:
        0 7px 18px rgba(var(--role-color-rgb), .065),
        inset 0 1px 0 rgba(255,255,255,.92);
}

body[data-page="workspace"] .workspace-announcement-board-header::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    display: block;
    width: 5px;
    background:
        linear-gradient(180deg, var(--role-color), var(--role-color-dark));
}

body[data-page="workspace"] .workspace-announcement-board-header::after {
    content: "";
    position: absolute;
    right: -38px;
    top: -44px;
    display: block;
    width: 120px;
    height: 120px;
    border: 18px solid rgba(var(--role-color-rgb), .045);
    border-radius: 50%;
    pointer-events: none;
}

body[data-page="workspace"] .workspace-announcement-board-header > div:first-child {
    position: relative;
    z-index: 1;
    min-width: 0;
    padding-left: 3px;
}

body[data-page="workspace"] .workspace-announcement-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 24px;
    margin: 0 0 7px;
    padding: 3px 9px;
    border: 1px solid rgba(var(--role-color-rgb), .18);
    border-radius: 999px;
    color: var(--role-color-dark);
    background: rgba(255,255,255,.70);
    box-shadow: 0 3px 8px rgba(var(--role-color-rgb), .05);
    font-size: .61rem;
    letter-spacing: .105em;
}

body[data-page="workspace"] .workspace-announcement-eyebrow::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--role-color);
    box-shadow: 0 0 0 4px rgba(var(--role-color-rgb), .10);
}

body[data-page="workspace"] .workspace-announcement-board-header h2 {
    display: block;
    margin: 0;
    color: #172033;
    font-size: clamp(1.03rem, 1.6vw, 1.18rem);
    font-weight: 850;
    line-height: 1.25;
    letter-spacing: -.022em;
}

body[data-page="workspace"] .workspace-announcement-board-header h2::before {
    content: none !important;
    display: none !important;
}

body[data-page="workspace"] .workspace-announcement-board-header p {
    max-width: 720px;
    margin: 5px 0 0;
    color: #657287;
    font-size: .76rem;
    line-height: 1.5;
}

body[data-page="workspace"] .workspace-announcement-header-actions {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 7px;
}

body[data-page="workspace"] .workspace-announcement-header-actions .workspace-card-link {
    min-height: 35px;
    padding: 6px 12px;
    border-radius: 10px;
    white-space: nowrap;
}

/* Remove decorative shine from announcement header buttons for a cleaner look */
body[data-page="workspace"] .workspace-announcement-header-actions .workspace-card-link::before {
    content: none;
    display: none;
}

/* ---------- Mobile layout ---------- */
@media (max-width: 700px) {
    body[data-page="workspace"] .workspace-announcement-board-header {
        grid-template-columns: 1fr;
        gap: 11px;
        margin: -2px -2px 12px;
        padding: 13px;
        border-radius: 12px;
    }

    body[data-page="workspace"] .workspace-announcement-header-actions {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        justify-content: stretch;
    }

    body[data-page="workspace"] .workspace-announcement-header-actions .workspace-card-link {
        width: 100%;
        min-width: 0;
        white-space: normal;
    }

    body[data-page="workspace"] .workspace-premium-action-card > .workspace-card-link,
    body[data-page="workspace"] .announcement-read-button {
        box-shadow:
            0 5px 12px rgba(var(--role-color-rgb), .18),
            inset 0 1px 0 rgba(255,255,255,.14);
    }
}

@media (max-width: 390px) {
    body[data-page="workspace"] .workspace-announcement-header-actions {
        grid-template-columns: 1fr;
    }
}



/* =========================================================
   Wallet Link Grid Layout
   - First two links share one row
   - Third link fills the full row
   ========================================================= */

body[data-page="workspace"] .workspace-premium-money-card .workspace-premium-link-row.workspace-premium-pill-links {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    width: 100%;
    margin-top: 13px;
}

body[data-page="workspace"] .workspace-premium-money-card .workspace-premium-link-row.workspace-premium-pill-links a {
    width: 100%;
    min-width: 0;
    min-height: 32px;
    justify-content: center;
    padding: 5px 9px;
    border-radius: 10px;
    text-align: center;
    white-space: normal;
}

body[data-page="workspace"] .workspace-premium-money-card .workspace-premium-link-row.workspace-premium-pill-links a:nth-child(3) {
    grid-column: 1 / -1;
}

/* Mobile remains compact while keeping the 2 + 1 structure */
@media (max-width: 700px) {
    body[data-page="workspace"] .workspace-premium-money-card .workspace-premium-link-row.workspace-premium-pill-links {
        gap: 5px;
        margin-top: 10px;
    }

    body[data-page="workspace"] .workspace-premium-money-card .workspace-premium-link-row.workspace-premium-pill-links a {
        min-height: 29px;
        padding: 4px 6px;
        font-size: .62rem;
    }
}

/* Very narrow screens can still keep two short buttons side by side */
@media (max-width: 330px) {
    body[data-page="workspace"] .workspace-premium-money-card .workspace-premium-link-row.workspace-premium-pill-links {
        grid-template-columns: 1fr;
    }

    body[data-page="workspace"] .workspace-premium-money-card .workspace-premium-link-row.workspace-premium-pill-links a:nth-child(3) {
        grid-column: auto;
    }
}



/* =========================================================
   Workspace Role Hero + Role Logo Upgrade
   Logo files must be placed in: static/img/
   ========================================================= */

/* ---------- Seven distinct role palettes ---------- */
body[data-page="workspace"].role-promoter {
    --role-color: #db2777;
    --role-color-dark: #9d174d;
    --role-color-rgb: 219, 39, 119;
    --role-hero-1: #831843;
    --role-hero-2: #be185d;
    --role-hero-3: #ec4899;
    --role-logo: url("../img/promoter_profile.png");
}

body[data-page="workspace"].role-business {
    --role-color: #1e3a8a;
    --role-color-dark: #172554;
    --role-color-rgb: 30, 58, 138;
    --role-hero-1: #172554;
    --role-hero-2: #1e3a8a;
    --role-hero-3: #2563eb;
    --role-logo: url("../img/business_profile.png");
}

body[data-page="workspace"].role-team-leader {
    --role-color: #4c1d95;
    --role-color-dark: #2e1065;
    --role-color-rgb: 76, 29, 149;
    --role-hero-1: #2e1065;
    --role-hero-2: #4c1d95;
    --role-hero-3: #7c3aed;
    --role-logo: url("../img/leader_profile.png");
}

body[data-page="workspace"].role-dj {
    --role-color: #831843;
    --role-color-dark: #500724;
    --role-color-rgb: 131, 24, 67;
    --role-hero-1: #500724;
    --role-hero-2: #831843;
    --role-hero-3: #be123c;
    --role-logo: url("../img/dj_profile.png");
}

body[data-page="workspace"].role-manager {
    --role-color: #0f766e;
    --role-color-dark: #134e4a;
    --role-color-rgb: 15, 118, 110;
    --role-hero-1: #134e4a;
    --role-hero-2: #0f766e;
    --role-hero-3: #14b8a6;
    --role-logo: url("../img/manager_profile.png");
}

body[data-page="workspace"].role-store-manager {
    --role-color: #b45309;
    --role-color-dark: #78350f;
    --role-color-rgb: 180, 83, 9;
    --role-hero-1: #78350f;
    --role-hero-2: #b45309;
    --role-hero-3: #d97706;
    --role-logo: url("../img/store_manager_profile.png");
}

body[data-page="workspace"].role-senior-admin {
    --role-color: #334155;
    --role-color-dark: #0f172a;
    --role-color-rgb: 51, 65, 85;
    --role-hero-1: #0f172a;
    --role-hero-2: #334155;
    --role-hero-3: #64748b;
    --role-logo: url("../img/admin_profile.png");
}

/* ---------- Hero follows current role ---------- */
body[data-page="workspace"] .workspace-premium-hero {
    border-color: rgba(255,255,255,.22);
    background:
        radial-gradient(circle at 13% 8%, rgba(255,255,255,.18), transparent 25%),
        radial-gradient(circle at 90% 108%, rgba(255,255,255,.13), transparent 36%),
        linear-gradient(120deg, rgba(255,255,255,.055), transparent 43%),
        linear-gradient(
            135deg,
            var(--role-hero-1, #0f172a) 0%,
            var(--role-hero-2, #334155) 52%,
            var(--role-hero-3, #64748b) 100%
        );
    box-shadow:
        0 18px 42px rgba(var(--role-color-rgb), .23),
        inset 0 1px 0 rgba(255,255,255,.14),
        inset 0 -1px 0 rgba(15,23,42,.22);
}

body[data-page="workspace"] .workspace-premium-hero::after {
    border-color: rgba(255,255,255,.045);
    box-shadow:
        0 0 0 1px rgba(255,255,255,.07),
        0 0 80px rgba(var(--role-color-rgb), .20);
}

/* ---------- Replace the text icon with role logo ---------- */
body[data-page="workspace"] .workspace-premium-icon {
    position: relative;
    display: block;
    flex: 0 0 66px;
    width: 66px;
    height: 66px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.25);
    border-radius: 20px;
    color: transparent;
    font-size: 0;
    line-height: 0;
    background:
        linear-gradient(145deg, rgba(255,255,255,.20), rgba(255,255,255,.07));
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.20),
        0 13px 28px rgba(15,23,42,.24);
}

body[data-page="workspace"] .workspace-premium-icon::before {
    content: "";
    position: absolute;
    inset: 7px;
    border-radius: 15px;
    background-image: var(--role-logo);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    filter: drop-shadow(0 5px 9px rgba(15,23,42,.22));
}

body[data-page="workspace"] .workspace-premium-icon::after {
    z-index: 2;
    right: 6px;
    bottom: 6px;
    width: 7px;
    height: 7px;
}

/* ---------- Role badge follows exact role colour ---------- */
body[data-page="workspace"] .role-badge.promoter,
body[data-page="workspace"] .role-badge.business,
body[data-page="workspace"] .role-badge.team-leader,
body[data-page="workspace"] .role-badge.dj,
body[data-page="workspace"] .role-badge.admin {
    border-color: rgba(255,255,255,.24);
    background: rgba(var(--role-color-rgb), .72);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.16),
        0 4px 10px rgba(15,23,42,.13);
}

body[data-page="workspace"] .workspace-premium-hero-side {
    border-color: rgba(255,255,255,.18);
    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.15),
            rgba(var(--role-color-rgb), .10)
        );
}

body[data-page="workspace"] .rooms-pro-action-btn.notification-btn {
    border-color: rgba(255,255,255,.22);
    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.20),
            rgba(255,255,255,.09)
        );
}

/* ---------- Tablet and mobile ---------- */
@media (max-width: 1024px) {
    body[data-page="workspace"] .workspace-premium-icon {
        flex-basis: 58px;
        width: 58px;
        height: 58px;
        border-radius: 17px;
    }

    body[data-page="workspace"] .workspace-premium-icon::before {
        inset: 6px;
        border-radius: 13px;
    }
}

@media (max-width: 700px) {
    body[data-page="workspace"] .workspace-premium-icon {
        flex-basis: 48px;
        width: 48px;
        height: 48px;
        border-radius: 14px;
    }

    body[data-page="workspace"] .workspace-premium-icon::before {
        inset: 5px;
        border-radius: 11px;
    }

    body[data-page="workspace"] .workspace-premium-icon::after {
        right: 4px;
        bottom: 4px;
        width: 6px;
        height: 6px;
    }
}

/* =========================================================
   PRMS Workspace — Premium Compact Responsive UI
   Apply after global
   ========================================================= */

body[data-page="workspace"] {
    --ws-bg: #f3f5f8;
    --ws-surface: #ffffff;
    --ws-surface-soft: #f8fafc;
    --ws-surface-muted: #f1f5f9;
    --ws-text: #172033;
    --ws-text-soft: #526078;
    --ws-text-muted: #7a879a;
    --ws-line: #dde3eb;
    --ws-line-strong: #cdd5df;
    --ws-primary: #334155;
    --ws-primary-dark: #1e293b;
    --ws-accent: #64748b;
    --ws-success: #18765a;
    --ws-success-soft: #eaf7f1;
    --ws-warning: #a16207;
    --ws-warning-soft: #fff8e7;
    --ws-danger: #b42318;
    --ws-danger-soft: #fff0ee;
    --ws-info: #2f5f91;
    --ws-info-soft: #edf5fd;
    --ws-radius-xl: 20px;
    --ws-radius-lg: 16px;
    --ws-radius-md: 12px;
    --ws-radius-sm: 9px;
    --ws-shadow: 0 8px 24px rgba(15, 23, 42, 0.055);
    --ws-shadow-hover: 0 12px 30px rgba(15, 23, 42, 0.09);
    margin: 0;
    color: var(--ws-text);
    background:
        radial-gradient(circle at 100% 0%, rgba(100, 116, 139, 0.08), transparent 28rem),
        var(--ws-bg);
    font-family: Inter, "Segoe UI", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

body[data-page="workspace"] *,
body[data-page="workspace"] *::before,
body[data-page="workspace"] *::after {
    box-sizing: border-box;
}

body[data-page="workspace"] a,
body[data-page="workspace"] button {
    -webkit-tap-highlight-color: transparent;
}

body[data-page="workspace"] .container.page-with-nav {
    width: min(100% - 32px, 1320px);
    margin: 0 auto;
    padding: 18px 5px 92px;
}

/* ---------- Language switch ---------- */
body[data-page="workspace"] .login-language-switch {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 4px;
    margin: 0 0 8px;
}

body[data-page="workspace"] .login-language-switch form {
    margin: 0;
}

body[data-page="workspace"] .login-language-switch button {
    min-width: 48px;
    min-height: 32px;
    padding: 5px 11px;
    border: 1px solid var(--ws-line);
    border-radius: 999px;
    color: var(--ws-text-soft);
    background: rgba(255, 255, 255, 0.8);
    font: inherit;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    transition: 0.18s ease;
}

body[data-page="workspace"] .login-language-switch button:hover,
body[data-page="workspace"] .login-language-switch button.active {
    color: #fff;
    border-color: var(--ws-primary);
    background: var(--ws-primary);
}

/* ---------- Workspace hero ---------- */
body[data-page="workspace"] .workspace-premium-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(220px, 0.34fr);
    gap: 16px;
    align-items: center;
    min-height: 138px;
    padding: 20px 22px;
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: var(--ws-radius-xl);
    overflow: hidden;
    color: #fff;
    background:
        linear-gradient(125deg, rgba(255, 255, 255, 0.08), transparent 48%),
        linear-gradient(135deg, #263244 0%, #38465a 58%, #4b5b70 100%);
    box-shadow: 0 12px 32px rgba(30, 41, 59, 0.16);
}

body[data-page="workspace"] .workspace-premium-hero::after {
    content: "";
    position: absolute;
    right: -58px;
    top: -92px;
    width: 230px;
    height: 230px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 50%;
}

body[data-page="workspace"] .workspace-premium-hero-main {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 15px;
    min-width: 0;
}

body[data-page="workspace"] .workspace-premium-icon {
    display: grid;
    flex: 0 0 52px;
    width: 52px;
    height: 52px;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.19);
    border-radius: 15px;
    color: #fff;
    background: rgba(255, 255, 255, 0.11);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
    font-size: 1.22rem;
    font-weight: 800;
}

body[data-page="workspace"] .workspace-premium-hero .page-subtitle {
    margin: 0 0 2px;
    color: rgba(255, 255, 255, 0.68);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

body[data-page="workspace"] .workspace-premium-hero h1 {
    margin: 0;
    color: #fff;
    font-size: clamp(1.38rem, 2.2vw, 2rem);
    line-height: 1.18;
    letter-spacing: -0.025em;
}

body[data-page="workspace"] .workspace-premium-user-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
    margin-top: 8px;
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.84rem;
}

body[data-page="workspace"] .role-badge {
    display: inline-flex;
    align-items: center;
    min-height: 25px;
    padding: 3px 9px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    color: #fff;
    background: rgba(255, 255, 255, 0.12);
    font-size: 0.7rem;
    font-weight: 800;
}

body[data-page="workspace"] .role-badge.promoter { background: rgba(154, 52, 18, 0.62); }
body[data-page="workspace"] .role-badge.business { background: rgba(30, 58, 138, 0.62); }
body[data-page="workspace"] .role-badge.team-leader { background: rgba(76, 29, 149, 0.62); }
body[data-page="workspace"] .role-badge.dj { background: rgba(131, 24, 67, 0.62); }
body[data-page="workspace"] .role-badge.admin { background: rgba(15, 23, 42, 0.58); }

body[data-page="workspace"] .workspace-premium-hero-side {
    position: relative;
    z-index: 1;
    min-width: 0;
    padding: 13px 15px;
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.075);
    backdrop-filter: blur(8px);
}

body[data-page="workspace"] .workspace-premium-hero-side > span {
    display: block;
    color: rgba(255, 255, 255, 0.62);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

body[data-page="workspace"] .workspace-premium-hero-side strong {
    display: block;
    margin-top: 3px;
    color: #fff;
    font-size: 1rem;
    line-height: 1.28;
    overflow-wrap: anywhere;
}

body[data-page="workspace"] .workspace-premium-hero-side p {
    margin: 4px 0 0;
    color: rgba(255, 255, 255, 0.65);
    font-size: 0.76rem;
}

body[data-page="workspace"] .rooms-pro-action-btn.notification-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 34px;
    padding: 6px 11px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 10px;
    color: #fff;
    background: rgba(255, 255, 255, 0.12);
    font-size: 0.76rem;
    font-weight: 800;
    text-decoration: none;
    transition: 0.18s ease;
}

body[data-page="workspace"] .rooms-pro-action-btn.notification-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-1px);
}

body[data-page="workspace"] .notification-dot {
    display: inline-grid;
    min-width: 21px;
    height: 21px;
    padding: 0 5px;
    place-items: center;
    border-radius: 999px;
    color: #7f1d1d;
    background: #fee2e2;
    font-size: 0.68rem;
    font-weight: 900;
}

/* ---------- Shared sections ---------- */
body[data-page="workspace"] .workspace-important-announcement-alert,
body[data-page="workspace"] .workspace-announcement-board,
body[data-page="workspace"] .workspace-premium-section,
body[data-page="workspace"] .workspace-premium-record-section {
    margin-top: 14px;
}

body[data-page="workspace"] .workspace-announcement-board,
body[data-page="workspace"] .workspace-premium-section,
body[data-page="workspace"] .workspace-premium-record-section {
    padding: 17px;
    border: 1px solid var(--ws-line);
    border-radius: var(--ws-radius-lg);
    background: rgba(255, 255, 255, 0.92);
    box-shadow: var(--ws-shadow);
}

body[data-page="workspace"] .section-title-row,
body[data-page="workspace"] .workspace-announcement-board-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 12px;
}

body[data-page="workspace"] .section-title-row h3,
body[data-page="workspace"] .workspace-announcement-board-header h2 {
    margin: 0;
    color: var(--ws-text);
    font-size: 1rem;
    line-height: 1.3;
    letter-spacing: -0.012em;
}

body[data-page="workspace"] .section-subtitle,
body[data-page="workspace"] .workspace-announcement-board-header p {
    margin: 3px 0 0;
    color: var(--ws-text-muted);
    font-size: 0.78rem;
    line-height: 1.45;
}

body[data-page="workspace"] .workspace-announcement-eyebrow {
    display: block;
    margin-bottom: 4px;
    color: var(--ws-accent);
    font-size: 0.66rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

body[data-page="workspace"] .section-count {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    min-height: 28px;
    padding: 4px 9px;
    border: 1px solid var(--ws-line);
    border-radius: 999px;
    color: var(--ws-text-soft);
    background: var(--ws-surface-soft);
    font-size: 0.72rem;
    font-weight: 800;
}

/* ---------- Important announcements ---------- */
body[data-page="workspace"] .workspace-important-announcement-alert {
    padding: 15px;
    border: 1px solid #f3c9c3;
    border-radius: var(--ws-radius-lg);
    background: linear-gradient(180deg, #fff9f8, #fff5f3);
    box-shadow: 0 8px 24px rgba(180, 35, 24, 0.06);
}

body[data-page="workspace"] .workspace-important-announcement-alert-header {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 11px;
    align-items: center;
    margin-bottom: 11px;
}

body[data-page="workspace"] .workspace-important-announcement-alert-icon,
body[data-page="workspace"] .workspace-premium-reminder-icon {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border-radius: 10px;
    font-weight: 900;
}

body[data-page="workspace"] .workspace-important-announcement-alert-icon {
    color: var(--ws-danger);
    background: #ffe5e1;
}

body[data-page="workspace"] .workspace-important-announcement-alert h2 {
    margin: 0;
    color: #7f1d1d;
    font-size: 0.94rem;
}

body[data-page="workspace"] .workspace-important-announcement-alert-header p {
    margin: 2px 0 0;
    color: #9a4d45;
    font-size: 0.76rem;
}

body[data-page="workspace"] .workspace-important-announcement-count {
    display: grid;
    min-width: 29px;
    height: 29px;
    padding: 0 8px;
    place-items: center;
    border-radius: 999px;
    color: #fff;
    background: var(--ws-danger);
    font-size: 0.74rem;
    font-weight: 900;
}

/* ---------- Announcement board ---------- */
body[data-page="workspace"] .workspace-announcement-header-actions {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 7px;
}

body[data-page="workspace"] .workspace-announcement-list {
    display: grid;
    gap: 9px;
}

body[data-page="workspace"] .workspace-announcement-item {
    position: relative;
    padding: 13px 14px;
    border: 1px solid var(--ws-line);
    border-radius: var(--ws-radius-md);
    background: var(--ws-surface);
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

body[data-page="workspace"] .workspace-announcement-item:hover {
    border-color: var(--ws-line-strong);
    box-shadow: 0 7px 18px rgba(15, 23, 42, 0.055);
    transform: translateY(-1px);
}

body[data-page="workspace"] .workspace-announcement-item.is-unread {
    border-left: 3px solid var(--ws-info);
    background: linear-gradient(90deg, var(--ws-info-soft), #fff 20%);
}

body[data-page="workspace"] .workspace-announcement-item.is-important {
    border-left-color: var(--ws-danger);
    background: linear-gradient(90deg, var(--ws-danger-soft), #fff 20%);
}

body[data-page="workspace"] .workspace-announcement-top-row {
    display: flex;
    justify-content: space-between;
    gap: 8px;
}

body[data-page="workspace"] .workspace-announcement-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

body[data-page="workspace"] .announcement-badge {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 2px 7px;
    border-radius: 999px;
    font-size: 0.64rem;
    font-weight: 850;
    line-height: 1;
}

body[data-page="workspace"] .announcement-badge.pinned {
    color: #7c4a03;
    background: #fff2cc;
}

body[data-page="workspace"] .announcement-badge.important {
    color: #991b1b;
    background: #fee2e2;
}

body[data-page="workspace"] .announcement-badge.type {
    color: #334155;
    background: #e9eef5;
}

body[data-page="workspace"] .announcement-badge.unread {
    color: #1e4f7e;
    background: #dcecff;
}

body[data-page="workspace"] .announcement-badge.read {
    color: #16624c;
    background: #def3ea;
}

body[data-page="workspace"] .workspace-announcement-item h3 {
    margin: 8px 0 4px;
    color: var(--ws-text);
    font-size: 0.94rem;
    line-height: 1.35;
}

body[data-page="workspace"] .workspace-announcement-body {
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    color: var(--ws-text-soft);
    font-size: 0.79rem;
    line-height: 1.55;
    overflow-wrap: anywhere;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

body[data-page="workspace"] .workspace-announcement-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 10px;
    padding-top: 9px;
    border-top: 1px dashed var(--ws-line);
    color: var(--ws-text-muted);
    font-size: 0.69rem;
}

body[data-page="workspace"] .workspace-announcement-footer form {
    flex: 0 0 auto;
    margin: 0;
}

body[data-page="workspace"] .announcement-read-button,
body[data-page="workspace"] .workspace-card-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 5px 10px;
    border: 1px solid var(--ws-line-strong);
    border-radius: 9px;
    color: var(--ws-primary-dark);
    background: #fff;
    font: inherit;
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: 0.18s ease;
}

body[data-page="workspace"] .announcement-read-button:hover,
body[data-page="workspace"] .workspace-card-link:hover {
    color: #fff;
    border-color: var(--ws-primary);
    background: var(--ws-primary);
    transform: translateY(-1px);
}

/* ---------- Summary cards ---------- */
body[data-page="workspace"] .workspace-premium-summary-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 11px;
    margin-top: 14px;
}

body[data-page="workspace"] .workspace-premium-summary-card {
    min-width: 0;
    padding: 15px;
    border: 1px solid var(--ws-line);
    border-radius: var(--ws-radius-lg);
    background: rgba(255, 255, 255, 0.94);
    box-shadow: var(--ws-shadow);
}

body[data-page="workspace"] .workspace-premium-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

body[data-page="workspace"] .summary-label {
    display: block;
    color: var(--ws-text-soft);
    font-size: 0.74rem;
    font-weight: 850;
}

body[data-page="workspace"] .workspace-premium-card-hint {
    margin: 2px 0 0;
    color: var(--ws-text-muted);
    font-size: 0.68rem;
}

body[data-page="workspace"] .workspace-premium-mini-badge {
    display: inline-flex;
    min-height: 22px;
    align-items: center;
    padding: 2px 7px;
    border-radius: 999px;
    color: #40516a;
    background: #edf1f6;
    font-size: 0.62rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

body[data-page="workspace"] .workspace-premium-mode-card > strong {
    display: block;
    margin-top: 14px;
    color: var(--ws-primary-dark);
    font-size: 1.16rem;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

body[data-page="workspace"] .workspace-premium-meta-list {
    display: grid;
    gap: 4px;
    margin-top: 10px;
}

body[data-page="workspace"] .workspace-premium-meta-list p {
    margin: 0;
    color: var(--ws-text-muted);
    font-size: 0.72rem;
}

body[data-page="workspace"] .workspace-premium-meta-list span {
    color: var(--ws-text-soft);
    font-weight: 750;
}

body[data-page="workspace"] .workspace-premium-value-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 14px;
}

body[data-page="workspace"] .workspace-premium-value-icon {
    display: grid;
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    place-items: center;
    border-radius: 11px;
    color: var(--ws-primary-dark);
    background: #edf1f5;
    font-size: 0.72rem;
    font-weight: 900;
}

body[data-page="workspace"] .workspace-premium-big-value {
    min-width: 0;
    margin: 0;
    color: var(--ws-primary-dark);
    font-size: clamp(1.05rem, 1.6vw, 1.35rem);
    line-height: 1.2;
    overflow-wrap: anywhere;
}

body[data-page="workspace"] .workspace-premium-link-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 13px;
}

body[data-page="workspace"] .workspace-premium-pill-links a {
    display: inline-flex;
    align-items: center;
    min-height: 27px;
    padding: 3px 8px;
    border: 1px solid var(--ws-line);
    border-radius: 999px;
    color: var(--ws-text-soft);
    background: var(--ws-surface-soft);
    font-size: 0.67rem;
    font-weight: 800;
    text-decoration: none;
    transition: 0.18s ease;
}

body[data-page="workspace"] .workspace-premium-pill-links a:hover {
    color: #fff;
    border-color: var(--ws-primary);
    background: var(--ws-primary);
}

body[data-page="workspace"] .workspace-premium-progress-shell {
    height: 5px;
    margin-top: 13px;
    overflow: hidden;
    border-radius: 999px;
    background: #e9edf2;
}

body[data-page="workspace"] .workspace-premium-progress-bar {
    width: 58%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #718096, #334155);
}

body[data-page="workspace"] .workspace-premium-desc {
    margin: 7px 0 0;
    color: var(--ws-text-muted);
    font-size: 0.68rem;
}

/* ---------- Reminder ---------- */
body[data-page="workspace"] .workspace-premium-reminder-card {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-top: 11px;
    padding: 11px 14px;
    border: 1px solid #ead9aa;
    border-radius: var(--ws-radius-md);
    background: var(--ws-warning-soft);
}

body[data-page="workspace"] .workspace-premium-reminder-icon {
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    color: var(--ws-warning);
    background: #ffedbd;
}

body[data-page="workspace"] .workspace-premium-reminder-card h3 {
    margin: 0;
    color: #7a4d06;
    font-size: 0.82rem;
}

body[data-page="workspace"] .workspace-premium-reminder-card p {
    margin: 2px 0 0;
    color: #8c681f;
    font-size: 0.74rem;
}

/* ---------- Function cards ---------- */
body[data-page="workspace"] .workspace-premium-card-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 9px;
}

body[data-page="workspace"] .workspace-premium-action-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto auto;
    gap: 8px 11px;
    min-width: 0;
    min-height: 124px;
    padding: 13px;
    border: 1px solid var(--ws-line);
    border-radius: var(--ws-radius-md);
    background: var(--ws-surface);
    transition: 0.18s ease;
}

body[data-page="workspace"] .workspace-premium-action-card:hover {
    border-color: var(--ws-line-strong);
    box-shadow: var(--ws-shadow-hover);
    transform: translateY(-2px);
}

body[data-page="workspace"] .workspace-premium-action-icon {
    display: grid;
    grid-column: 1;
    grid-row: 1;
    width: 35px;
    height: 35px;
    place-items: center;
    border: 1px solid #dfe5ec;
    border-radius: 10px;
    color: var(--ws-primary-dark);
    background: #f2f5f8;
    font-size: 0.82rem;
    font-weight: 900;
}

body[data-page="workspace"] .workspace-premium-action-content {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
}

body[data-page="workspace"] .workspace-premium-action-content h3 {
    margin: 0;
    color: var(--ws-text);
    font-size: 0.86rem;
    line-height: 1.35;
}

body[data-page="workspace"] .workspace-premium-action-content p {
    display: -webkit-box;
    margin: 4px 0 0;
    overflow: hidden;
    color: var(--ws-text-muted);
    font-size: 0.72rem;
    line-height: 1.45;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

body[data-page="workspace"] .workspace-premium-action-card > .workspace-card-link {
    grid-column: 1 / -1;
    grid-row: 2;
    align-self: end;
    justify-self: stretch;
    min-height: 31px;
    padding: 5px 9px;
    background: var(--ws-surface-soft);
}

body[data-page="workspace"] .workspace-premium-action-card.excel-card {
    border-top: 3px solid #64748b;
}

/* ---------- Attendance record ---------- */
body[data-page="workspace"] .workspace-premium-record-section > .section-title-row {
    align-items: center;
}

body[data-page="workspace"] .workspace-record-list {
    display: grid;
    gap: 9px;
}

body[data-page="workspace"] .workspace-premium-attendance-item {
    padding: 13px;
    border: 1px solid var(--ws-line);
    border-radius: var(--ws-radius-md);
    background: var(--ws-surface);
}

body[data-page="workspace"] .attendance-top-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    padding-bottom: 9px;
    border-bottom: 1px solid var(--ws-line);
}

body[data-page="workspace"] .attendance-top-row h4 {
    margin: 0;
    color: var(--ws-text);
    font-size: 0.9rem;
}

body[data-page="workspace"] .attendance-top-row p {
    margin: 2px 0 0;
    color: var(--ws-text-muted);
    font-size: 0.7rem;
}

body[data-page="workspace"] .session-pill {
    display: inline-flex;
    flex: 0 0 auto;
    min-height: 25px;
    align-items: center;
    padding: 3px 8px;
    border-radius: 999px;
    color: #34445c;
    background: #eaf0f6;
    font-size: 0.66rem;
    font-weight: 850;
}

body[data-page="workspace"] .attendance-info-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 7px;
    margin-top: 9px;
}

body[data-page="workspace"] .attendance-info-grid > div {
    min-width: 0;
    padding: 8px 9px;
    border-radius: 9px;
    background: var(--ws-surface-soft);
}

body[data-page="workspace"] .attendance-info-grid span {
    display: block;
    color: var(--ws-text-muted);
    font-size: 0.62rem;
    line-height: 1.25;
}

body[data-page="workspace"] .attendance-info-grid strong {
    display: block;
    margin-top: 3px;
    color: var(--ws-text);
    font-size: 0.72rem;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

body[data-page="workspace"] .attendance-note,
body[data-page="workspace"] .workspace-feedback-notes .attendance-note {
    margin-top: 8px;
    padding: 8px 10px;
    border-left: 3px solid #cbd5e1;
    border-radius: 0 8px 8px 0;
    color: var(--ws-text-soft);
    background: var(--ws-surface-soft);
    font-size: 0.71rem;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

body[data-page="workspace"] .workspace-feedback-details {
    margin-top: 8px;
    border: 1px solid var(--ws-line);
    border-radius: 9px;
    background: #fbfcfd;
}

body[data-page="workspace"] .workspace-feedback-summary {
    padding: 8px 10px;
    color: var(--ws-primary-dark);
    font-size: 0.72rem;
    font-weight: 850;
    cursor: pointer;
    user-select: none;
}

body[data-page="workspace"] .workspace-feedback-details[open] .workspace-feedback-summary {
    border-bottom: 1px solid var(--ws-line);
}

body[data-page="workspace"] .workspace-feedback-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    padding: 0 9px 9px;
}

body[data-page="workspace"] .workspace-feedback-notes {
    padding: 0 9px 9px;
}

body[data-page="workspace"] .empty-state-card {
    display: grid;
    min-height: 92px;
    place-items: center;
    padding: 18px;
    border: 1px dashed var(--ws-line-strong);
    border-radius: var(--ws-radius-md);
    color: var(--ws-text-muted);
    background: var(--ws-surface-soft);
    font-size: 0.78rem;
    text-align: center;
}

/* ---------- Bottom navigation ---------- */
body[data-page="workspace"] .bottom-nav {
    position: fixed;
    z-index: 1000;
    right: 50%;
    bottom: max(10px, env(safe-area-inset-bottom));
    display: grid;
    grid-template-columns: repeat(3, minmax(82px, 1fr));
    width: min(calc(100% - 24px), 460px);
    padding: 5px;
    border: 1px solid rgba(203, 213, 225, 0.9);
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.93);
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.15);
    backdrop-filter: blur(14px);
    transform: translateX(50%);
}

body[data-page="workspace"] .bottom-nav a {
    display: flex;
    min-height: 38px;
    align-items: center;
    justify-content: center;
    padding: 6px 9px;
    border-radius: 10px;
    color: var(--ws-text-soft);
    font-size: 0.72rem;
    font-weight: 800;
    text-decoration: none;
    transition: 0.18s ease;
}

body[data-page="workspace"] .bottom-nav a:hover {
    color: var(--ws-primary-dark);
    background: var(--ws-surface-muted);
}

body[data-page="workspace"] .bottom-nav a.active {
    color: #fff;
    background: var(--ws-primary);
}

/* ---------- Keyboard focus ---------- */
body[data-page="workspace"] a:focus-visible,
body[data-page="workspace"] button:focus-visible,
body[data-page="workspace"] summary:focus-visible {
    outline: 3px solid rgba(59, 130, 246, 0.28);
    outline-offset: 2px;
}

/* ---------- Tablet ---------- */
@media (max-width: 1024px) {
    body[data-page="workspace"] .container.page-with-nav {
        width: min(100% - 26px, 960px);
        padding-top: 14px;
    }

    body[data-page="workspace"] .workspace-premium-hero {
        grid-template-columns: minmax(0, 1fr) minmax(205px, 0.42fr);
        padding: 18px;
    }

    body[data-page="workspace"] .workspace-premium-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body[data-page="workspace"] .workspace-premium-summary-card:last-child {
        grid-column: 1 / -1;
    }

    body[data-page="workspace"] .workspace-premium-card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body[data-page="workspace"] .attendance-info-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    body[data-page="workspace"] .workspace-feedback-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* ---------- Mobile ---------- */
@media (max-width: 700px) {
    body[data-page="workspace"] {
        background: var(--ws-bg);
    }

    body[data-page="workspace"] .container.page-with-nav {
        width: min(100% - 18px, 640px);
        padding: 9px 0 86px;
    }

    body[data-page="workspace"] .login-language-switch {
        margin-bottom: 6px;
    }

    body[data-page="workspace"] .login-language-switch button {
        min-width: 44px;
        min-height: 29px;
        padding: 4px 9px;
        font-size: 0.7rem;
    }

    body[data-page="workspace"] .workspace-premium-hero {
        grid-template-columns: 1fr;
        gap: 11px;
        min-height: 0;
        padding: 15px;
        border-radius: 17px;
    }

    body[data-page="workspace"] .workspace-premium-hero-main {
        gap: 11px;
    }

    body[data-page="workspace"] .workspace-premium-icon {
        flex-basis: 43px;
        width: 43px;
        height: 43px;
        border-radius: 12px;
        font-size: 1rem;
    }

    body[data-page="workspace"] .workspace-premium-hero h1 {
        font-size: 1.3rem;
    }

    body[data-page="workspace"] .workspace-premium-user-row {
        margin-top: 6px;
        font-size: 0.76rem;
    }

    body[data-page="workspace"] .workspace-premium-hero-side {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-rows: auto auto;
        align-items: center;
        gap: 1px 8px;
        padding: 10px 11px;
        border-radius: 12px;
    }

    body[data-page="workspace"] .workspace-premium-hero-side > span,
    body[data-page="workspace"] .workspace-premium-hero-side > strong,
    body[data-page="workspace"] .workspace-premium-hero-side > p {
        grid-column: 1;
    }

    body[data-page="workspace"] .workspace-premium-hero-side > strong {
        font-size: 0.88rem;
    }

    body[data-page="workspace"] .rooms-pro-action-btn.notification-btn {
        grid-column: 2;
        grid-row: 1 / span 2;
        min-height: 35px;
        margin-top: 0 !important;
        padding: 5px 9px;
        font-size: 0.69rem;
    }

    body[data-page="workspace"] .workspace-important-announcement-alert,
    body[data-page="workspace"] .workspace-announcement-board,
    body[data-page="workspace"] .workspace-premium-section,
    body[data-page="workspace"] .workspace-premium-record-section {
        margin-top: 10px;
    }

    body[data-page="workspace"] .workspace-announcement-board,
    body[data-page="workspace"] .workspace-premium-section,
    body[data-page="workspace"] .workspace-premium-record-section {
        padding: 12px;
        border-radius: 14px;
    }

    body[data-page="workspace"] .workspace-important-announcement-alert {
        padding: 12px;
        border-radius: 14px;
    }

    body[data-page="workspace"] .workspace-important-announcement-alert-header {
        grid-template-columns: auto minmax(0, 1fr) auto;
        gap: 8px;
    }

    body[data-page="workspace"] .workspace-important-announcement-alert-icon {
        width: 30px;
        height: 30px;
        border-radius: 9px;
    }

    body[data-page="workspace"] .workspace-important-announcement-alert h2 {
        font-size: 0.82rem;
    }

    body[data-page="workspace"] .workspace-important-announcement-alert-header p {
        display: -webkit-box;
        overflow: hidden;
        font-size: 0.68rem;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    body[data-page="workspace"] .workspace-announcement-board-header,
    body[data-page="workspace"] .section-title-row {
        flex-wrap: wrap;
        gap: 8px;
        margin-bottom: 9px;
    }

    body[data-page="workspace"] .workspace-announcement-board-header > div:first-child,
    body[data-page="workspace"] .section-title-row > div:first-child {
        flex: 1 1 220px;
    }

    body[data-page="workspace"] .workspace-announcement-header-actions {
        width: 100%;
        justify-content: flex-start;
    }

    body[data-page="workspace"] .workspace-announcement-header-actions .workspace-card-link {
        flex: 1 1 auto;
    }

    body[data-page="workspace"] .workspace-announcement-item {
        padding: 11px;
    }

    body[data-page="workspace"] .workspace-announcement-item h3 {
        margin-top: 7px;
        font-size: 0.84rem;
    }

    body[data-page="workspace"] .workspace-announcement-body {
        font-size: 0.73rem;
        -webkit-line-clamp: 2;
    }

    body[data-page="workspace"] .workspace-announcement-footer {
        align-items: flex-end;
        gap: 7px;
        font-size: 0.63rem;
    }

    body[data-page="workspace"] .announcement-read-button {
        min-height: 29px;
        padding: 4px 8px;
        font-size: 0.67rem;
    }

    body[data-page="workspace"] .workspace-premium-summary-grid {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        margin-top: 10px;
    }

    body[data-page="workspace"] .workspace-premium-summary-card {
        padding: 11px;
        border-radius: 13px;
    }

    body[data-page="workspace"] .workspace-premium-summary-card:last-child {
        grid-column: 1 / -1;
    }

    body[data-page="workspace"] .workspace-premium-mode-card > strong {
        margin-top: 10px;
        font-size: 0.94rem;
    }

    body[data-page="workspace"] .workspace-premium-card-hint,
    body[data-page="workspace"] .workspace-premium-desc {
        display: none;
    }

    body[data-page="workspace"] .workspace-premium-value-row {
        gap: 7px;
        margin-top: 10px;
    }

    body[data-page="workspace"] .workspace-premium-value-icon {
        flex-basis: 32px;
        width: 32px;
        height: 32px;
        border-radius: 9px;
        font-size: 0.62rem;
    }

    body[data-page="workspace"] .workspace-premium-big-value {
        font-size: 0.92rem;
    }

    body[data-page="workspace"] .workspace-premium-link-row {
        gap: 4px;
        margin-top: 9px;
    }

    body[data-page="workspace"] .workspace-premium-pill-links a {
        min-height: 24px;
        padding: 2px 6px;
        font-size: 0.6rem;
    }

    body[data-page="workspace"] .workspace-premium-reminder-card {
        gap: 8px;
        margin-top: 8px;
        padding: 9px 10px;
    }

    body[data-page="workspace"] .workspace-premium-reminder-icon {
        flex-basis: 29px;
        width: 29px;
        height: 29px;
    }

    body[data-page="workspace"] .workspace-premium-reminder-card h3 {
        font-size: 0.75rem;
    }

    body[data-page="workspace"] .workspace-premium-reminder-card p {
        display: -webkit-box;
        overflow: hidden;
        font-size: 0.68rem;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    body[data-page="workspace"] .workspace-premium-card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 7px;
    }

    body[data-page="workspace"] .workspace-premium-action-card {
        display: flex;
        flex-direction: column;
        gap: 7px;
        min-height: 132px;
        padding: 10px;
    }

    body[data-page="workspace"] .workspace-premium-action-icon {
        width: 32px;
        height: 32px;
        border-radius: 9px;
        font-size: 0.75rem;
    }

    body[data-page="workspace"] .workspace-premium-action-content {
        flex: 1 1 auto;
    }

    body[data-page="workspace"] .workspace-premium-action-content h3 {
        font-size: 0.76rem;
    }

    body[data-page="workspace"] .workspace-premium-action-content p {
        margin-top: 3px;
        font-size: 0.65rem;
        line-height: 1.38;
        -webkit-line-clamp: 2;
    }

    body[data-page="workspace"] .workspace-premium-action-card > .workspace-card-link {
        width: 100%;
        min-height: 29px;
        padding: 4px 6px;
        font-size: 0.64rem;
    }

    body[data-page="workspace"] .workspace-premium-record-section > .section-title-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
    }

    body[data-page="workspace"] .workspace-premium-record-section > .section-title-row > div:first-child {
        grid-column: 1 / -1;
    }

    body[data-page="workspace"] .workspace-premium-record-section > .section-title-row .section-count {
        grid-column: 1;
        justify-self: start;
    }

    body[data-page="workspace"] .workspace-premium-record-section > .section-title-row .workspace-card-link {
        grid-column: 2;
        justify-self: end;
    }

    body[data-page="workspace"] .workspace-premium-attendance-item {
        padding: 10px;
    }

    body[data-page="workspace"] .attendance-info-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 5px;
        margin-top: 7px;
    }

    body[data-page="workspace"] .attendance-info-grid > div {
        padding: 7px 8px;
    }

    body[data-page="workspace"] .workspace-feedback-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        padding: 0 7px 7px;
    }

    body[data-page="workspace"] .bottom-nav {
        bottom: max(7px, env(safe-area-inset-bottom));
        width: calc(100% - 18px);
        max-width: 430px;
        grid-template-columns: repeat(3, 1fr);
        padding: 4px;
        border-radius: 14px;
    }

    body[data-page="workspace"] .bottom-nav a {
        min-height: 36px;
        padding: 5px;
        font-size: 0.68rem;
    }
}

/* ---------- Very small phones ---------- */
@media (max-width: 390px) {
    body[data-page="workspace"] .container.page-with-nav {
        width: calc(100% - 14px);
    }

    body[data-page="workspace"] .workspace-premium-summary-grid,
    body[data-page="workspace"] .workspace-premium-card-grid {
        grid-template-columns: 1fr;
    }

    body[data-page="workspace"] .workspace-premium-summary-card:last-child {
        grid-column: auto;
    }

    body[data-page="workspace"] .workspace-premium-action-card {
        min-height: 0;
    }

    body[data-page="workspace"] .workspace-announcement-footer {
        align-items: stretch;
        flex-direction: column;
    }

    body[data-page="workspace"] .workspace-announcement-footer form,
    body[data-page="workspace"] .announcement-read-button {
        width: 100%;
    }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    body[data-page="workspace"] *,
    body[data-page="workspace"] *::before,
    body[data-page="workspace"] *::after {
        scroll-behavior: auto !important;
        transition: none !important;
        animation: none !important;
    }
}

/* =========================================================
   Premium Visual Enhancement Layer
   Keeps the current compact layout; improves hierarchy only.
   ========================================================= */

body[data-page="workspace"] {
    --ws-gold: #b58a4a;
    --ws-gold-soft: #f8f2e8;
    --ws-navy: #24344a;
    --ws-blue: #426b9a;
    --ws-teal: #24766f;
}

/* Refined section headings */
body[data-page="workspace"] .workspace-premium-section,
body[data-page="workspace"] .workspace-premium-record-section {
    position: relative;
}

body[data-page="workspace"] .section-title-row h3,
body[data-page="workspace"] .workspace-announcement-board-header h2 {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 9px;
}

body[data-page="workspace"] .section-title-row h3::before,
body[data-page="workspace"] .workspace-announcement-board-header h2::before {
    content: "";
    width: 4px;
    height: 17px;
    flex: 0 0 4px;
    border-radius: 99px;
    background: linear-gradient(180deg, var(--ws-gold), #8b6b39);
    box-shadow: 0 0 0 4px rgba(181, 138, 74, 0.09);
}

/* Announcement board: premium editorial card */
body[data-page="workspace"] .workspace-announcement-board {
    position: relative;
    overflow: hidden;
    border-color: rgba(181, 138, 74, 0.28);
    background:
        linear-gradient(145deg, rgba(248, 242, 232, 0.65), rgba(255,255,255,0) 34%),
        var(--ws-surface);
    box-shadow: 0 10px 30px rgba(31, 41, 55, 0.07);
}

body[data-page="workspace"] .workspace-announcement-board::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: linear-gradient(180deg, var(--ws-gold), #735b35);
}

body[data-page="workspace"] .workspace-announcement-board::after {
    content: "";
    position: absolute;
    top: -70px;
    right: -55px;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(181,138,74,.10), transparent 68%);
    pointer-events: none;
}

body[data-page="workspace"] .workspace-announcement-eyebrow {
    color: #8a6735;
    letter-spacing: .14em;
}

body[data-page="workspace"] .workspace-announcement-item {
    position: relative;
    border-color: #e4e8ee;
    background: linear-gradient(180deg, #ffffff, #fbfcfe);
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.035);
}

body[data-page="workspace"] .workspace-announcement-item::before {
    content: "";
    position: absolute;
    inset: 10px auto 10px 0;
    width: 3px;
    border-radius: 99px;
    background: #cbd5e1;
}

body[data-page="workspace"] .workspace-announcement-item.is-unread::before {
    background: var(--ws-blue);
}

body[data-page="workspace"] .workspace-announcement-item.is-important::before {
    background: linear-gradient(180deg, #c78a35, #a34f2f);
}

body[data-page="workspace"] .workspace-announcement-item:hover {
    border-color: #ced7e3;
    box-shadow: 0 9px 24px rgba(15, 23, 42, 0.07);
    transform: translateY(-1px);
}

body[data-page="workspace"] .workspace-announcement-item h3 {
    letter-spacing: -.012em;
}

body[data-page="workspace"] .announcement-badge {
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.45);
}

body[data-page="workspace"] .announcement-read-button {
    box-shadow: 0 4px 10px rgba(51, 65, 85, 0.12);
}

/* Important unread alert */
body[data-page="workspace"] .workspace-important-announcement-alert {
    position: relative;
    overflow: hidden;
    border-color: rgba(180, 83, 9, .28);
    background:
        linear-gradient(135deg, rgba(255,247,237,.95), rgba(255,255,255,.96));
    box-shadow: 0 9px 24px rgba(154, 52, 18, 0.08);
}

body[data-page="workspace"] .workspace-important-announcement-alert::after {
    content: "";
    position: absolute;
    width: 130px;
    height: 130px;
    right: -55px;
    top: -62px;
    border-radius: 50%;
    border: 20px solid rgba(180, 83, 9, .045);
}

body[data-page="workspace"] .workspace-important-announcement-alert-icon {
    box-shadow: 0 6px 15px rgba(180, 83, 9, .18);
}

/* Summary cards */
body[data-page="workspace"] .workspace-premium-summary-card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border-color: rgba(203, 213, 225, .92);
    background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
    box-shadow: 0 8px 22px rgba(15, 23, 42, .055);
}

body[data-page="workspace"] .workspace-premium-summary-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: linear-gradient(90deg, #64748b, #cbd5e1);
}

body[data-page="workspace"] .workspace-premium-summary-card::after {
    content: "";
    position: absolute;
    z-index: -1;
    right: -42px;
    bottom: -58px;
    width: 145px;
    height: 145px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(100,116,139,.10), transparent 70%);
}

body[data-page="workspace"] .workspace-premium-mode-card::before {
    background: linear-gradient(90deg, #475569, #94a3b8);
}

body[data-page="workspace"] .workspace-premium-money-card {
    border-color: rgba(181, 138, 74, .32);
    background:
        linear-gradient(145deg, rgba(248,242,232,.82), rgba(255,255,255,.98) 58%);
}

body[data-page="workspace"] .workspace-premium-money-card::before {
    background: linear-gradient(90deg, #8b6b39, #d8b46f);
}

body[data-page="workspace"] .workspace-premium-money-card::after {
    background: radial-gradient(circle, rgba(181,138,74,.16), transparent 70%);
}

body[data-page="workspace"] .workspace-premium-time-card {
    border-color: rgba(66, 107, 154, .27);
    background:
        linear-gradient(145deg, rgba(237,245,253,.88), rgba(255,255,255,.98) 58%);
}

body[data-page="workspace"] .workspace-premium-time-card::before {
    background: linear-gradient(90deg, #315e8d, #78a3c8);
}

body[data-page="workspace"] .workspace-premium-time-card::after {
    background: radial-gradient(circle, rgba(66,107,154,.13), transparent 70%);
}

body[data-page="workspace"] .workspace-premium-summary-card:hover {
    border-color: #c2ccd8;
    box-shadow: 0 13px 30px rgba(15, 23, 42, .085);
    transform: translateY(-2px);
}

body[data-page="workspace"] .workspace-premium-card-top {
    position: relative;
    z-index: 1;
}

body[data-page="workspace"] .summary-label {
    color: #46546a;
    letter-spacing: .025em;
}

body[data-page="workspace"] .workspace-premium-mini-badge {
    border: 1px solid rgba(100, 116, 139, .16);
    background: rgba(255,255,255,.78);
    box-shadow: 0 3px 8px rgba(15,23,42,.04);
}

body[data-page="workspace"] .workspace-premium-money-card .workspace-premium-mini-badge {
    color: #7a5a28;
    border-color: rgba(181,138,74,.22);
    background: rgba(255,250,240,.9);
}

body[data-page="workspace"] .workspace-premium-time-card .workspace-premium-mini-badge {
    color: #315e8d;
    border-color: rgba(66,107,154,.18);
    background: rgba(242,248,255,.9);
}

body[data-page="workspace"] .workspace-premium-value-icon {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.75);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.65),
        0 7px 16px rgba(15,23,42,.10);
}

body[data-page="workspace"] .workspace-premium-money-card .workspace-premium-value-icon {
    color: #fff;
    background: linear-gradient(145deg, #9d7941, #6f542e);
}

body[data-page="workspace"] .workspace-premium-time-card .workspace-premium-value-icon {
    color: #fff;
    background: linear-gradient(145deg, #4d79a7, #294f78);
}

body[data-page="workspace"] .workspace-premium-big-value strong {
    font-variant-numeric: tabular-nums;
    letter-spacing: -.035em;
}

body[data-page="workspace"] .workspace-premium-money-card .workspace-premium-big-value strong {
    color: #5f4727;
}

body[data-page="workspace"] .workspace-premium-time-card .workspace-premium-big-value strong {
    color: #264f79;
}

body[data-page="workspace"] .workspace-premium-pill-links a {
    position: relative;
    border-color: rgba(148,163,184,.28);
    background: rgba(255,255,255,.72);
    box-shadow: 0 3px 8px rgba(15,23,42,.035);
}

body[data-page="workspace"] .workspace-premium-pill-links a:hover {
    color: var(--ws-primary-dark);
    border-color: #b7c2cf;
    background: #fff;
    box-shadow: 0 6px 13px rgba(15,23,42,.07);
}

body[data-page="workspace"] .workspace-premium-progress-shell {
    padding: 2px;
    border: 1px solid rgba(66,107,154,.12);
    background: rgba(255,255,255,.72);
}

body[data-page="workspace"] .workspace-premium-progress-bar {
    background: linear-gradient(90deg, #315e8d, #79a7ce);
    box-shadow: 0 0 12px rgba(66,107,154,.22);
}

/* Reminder card */
body[data-page="workspace"] .workspace-premium-reminder-card {
    position: relative;
    overflow: hidden;
    border-color: rgba(181,138,74,.22);
    background: linear-gradient(100deg, #fffdf8, #fff 65%);
}

body[data-page="workspace"] .workspace-premium-reminder-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: var(--ws-gold);
}

body[data-page="workspace"] .workspace-premium-reminder-icon {
    color: #fff;
    background: linear-gradient(145deg, #b88b46, #806031);
    box-shadow: 0 6px 14px rgba(128,96,49,.17);
}

/* Common function / management cards */
body[data-page="workspace"] .workspace-premium-action-card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border-color: #dde3ea;
    background: linear-gradient(145deg, #fff 0%, #fafbfd 100%);
    box-shadow: 0 5px 15px rgba(15,23,42,.035);
}

body[data-page="workspace"] .workspace-premium-action-card::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0 auto 0 0;
    width: 3px;
    background: linear-gradient(180deg, #64748b, #94a3b8);
    opacity: .72;
    transition: width .2s ease, opacity .2s ease;
}

body[data-page="workspace"] .workspace-premium-action-card::after {
    content: "";
    position: absolute;
    z-index: -1;
    right: -42px;
    top: -48px;
    width: 105px;
    height: 105px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(100,116,139,.085), transparent 70%);
}

body[data-page="workspace"] .workspace-premium-action-card:hover::before {
    width: 5px;
    opacity: 1;
}

body[data-page="workspace"] .workspace-premium-action-card:hover {
    border-color: #c7d0db;
    background: #fff;
    box-shadow: 0 12px 27px rgba(15,23,42,.08);
}

body[data-page="workspace"] .workspace-premium-action-icon {
    border: 1px solid rgba(255,255,255,.72);
    color: #fff;
    background: linear-gradient(145deg, #53657a, #2f3d50);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.16),
        0 7px 14px rgba(31,41,55,.13);
}

body[data-page="workspace"] .workspace-premium-action-card:nth-child(3n + 2) .workspace-premium-action-icon {
    background: linear-gradient(145deg, #526f8e, #314c69);
}

body[data-page="workspace"] .workspace-premium-action-card:nth-child(3n + 3) .workspace-premium-action-icon {
    background: linear-gradient(145deg, #58716e, #324e4b);
}

body[data-page="workspace"] .workspace-premium-action-content h3 {
    color: #243247;
    letter-spacing: -.012em;
}

body[data-page="workspace"] .workspace-premium-action-card > .workspace-card-link {
    border: 1px solid rgba(100,116,139,.17);
    background: rgba(248,250,252,.9);
    box-shadow: 0 3px 8px rgba(15,23,42,.035);
}

body[data-page="workspace"] .workspace-premium-action-card > .workspace-card-link::after {
    content: "›";
    margin-left: 4px;
    font-size: 1rem;
    line-height: 1;
    transition: transform .18s ease;
}

body[data-page="workspace"] .workspace-premium-action-card > .workspace-card-link:hover::after {
    transform: translateX(2px);
}

body[data-page="workspace"] .workspace-premium-action-card.excel-card::before {
    background: linear-gradient(180deg, #24766f, #65a59e);
}

body[data-page="workspace"] .workspace-premium-action-card.excel-card .workspace-premium-action-icon {
    background: linear-gradient(145deg, #33867e, #1f5b55);
}

/* Attendance records */
body[data-page="workspace"] .workspace-premium-attendance-item {
    position: relative;
    overflow: hidden;
    border-color: #dde4ec;
    background: linear-gradient(180deg, #fff, #fbfcfd);
}

body[data-page="workspace"] .workspace-premium-attendance-item::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: #64748b;
}

body[data-page="workspace"] .session-pill {
    border: 1px solid rgba(66,107,154,.15);
    color: #315e8d;
    background: #f1f7fd;
}

/* Mobile keeps the decoration restrained */
@media (max-width: 640px) {
    body[data-page="workspace"] .workspace-premium-summary-card::after,
    body[data-page="workspace"] .workspace-premium-action-card::after,
    body[data-page="workspace"] .workspace-announcement-board::after {
        transform: scale(.78);
        transform-origin: top right;
    }

    body[data-page="workspace"] .workspace-premium-summary-card:hover,
    body[data-page="workspace"] .workspace-premium-action-card:hover,
    body[data-page="workspace"] .workspace-announcement-item:hover {
        transform: none;
    }

    body[data-page="workspace"] .workspace-premium-action-icon,
    body[data-page="workspace"] .workspace-premium-value-icon {
        box-shadow: 0 4px 10px rgba(31,41,55,.11);
    }
}

@media (prefers-reduced-motion: reduce) {
    body[data-page="workspace"] .workspace-premium-summary-card,
    body[data-page="workspace"] .workspace-premium-action-card,
    body[data-page="workspace"] .workspace-announcement-item,
    body[data-page="workspace"] .workspace-card-link::after {
        transition: none !important;
    }
}

/* =========================================================
   Workspace Luxury V3 — visual refinement overrides
   Keeps the existing layout and spacing model.
   ========================================================= */

body[data-page="workspace"] .container.page-with-nav {
    position: relative;
}

/* Visually place the existing language switch inside the hero */
body[data-page="workspace"] .login-language-switch {
    position: absolute;
    z-index: 20;
    top: 30px;
    right: 16px;
    gap: 2px;
    margin: 0;
    padding: 3px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.24);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08),
                0 8px 20px rgba(15, 23, 42, 0.12);
    backdrop-filter: blur(12px);
}

body[data-page="workspace"] .login-language-switch button {
    min-width: 42px;
    min-height: 27px;
    padding: 3px 9px;
    border: 0;
    border-radius: 999px;
    color: rgba(255, 255, 255, 0.7);
    background: transparent;
    box-shadow: none;
    font-size: 0.7rem;
}

body[data-page="workspace"] .login-language-switch button:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
}

body[data-page="workspace"] .login-language-switch button.active {
    color: #152033;
    background: linear-gradient(180deg, #ffffff, #e9eef5);
    box-shadow: 0 3px 9px rgba(15, 23, 42, 0.18),
                inset 0 1px 0 #fff;
}

/* More refined premium hero */
body[data-page="workspace"] .workspace-premium-hero {
    isolation: isolate;
    min-height: 154px;
    padding: 24px 22px;
    border-color: rgba(255, 255, 255, 0.2);
    background:
        radial-gradient(circle at 14% 10%, rgba(255, 255, 255, 0.14), transparent 24%),
        radial-gradient(circle at 86% 110%, rgba(148, 163, 184, 0.25), transparent 35%),
        linear-gradient(120deg, rgba(255,255,255,.055), transparent 42%),
        linear-gradient(135deg, #182333 0%, #29374a 47%, #43536a 100%);
    box-shadow:
        0 18px 42px rgba(15, 23, 42, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        inset 0 -1px 0 rgba(15, 23, 42, 0.2);
}

body[data-page="workspace"] .workspace-premium-hero::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
    background-size: 28px 28px;
    mask-image: linear-gradient(90deg, rgba(0,0,0,.75), transparent 78%);
    pointer-events: none;
}

body[data-page="workspace"] .workspace-premium-hero::after {
    right: -70px;
    top: -112px;
    width: 290px;
    height: 290px;
    border: 42px solid rgba(255, 255, 255, 0.025);
    box-shadow: 0 0 0 1px rgba(255,255,255,.055);
}

body[data-page="workspace"] .workspace-premium-icon {
    position: relative;
    flex-basis: 58px;
    width: 58px;
    height: 58px;
    border-color: rgba(255, 255, 255, 0.22);
    border-radius: 18px;
    background:
        linear-gradient(145deg, rgba(255,255,255,.18), rgba(255,255,255,.055));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        0 12px 28px rgba(15, 23, 42, 0.22);
}

body[data-page="workspace"] .workspace-premium-icon::after {
    content: "";
    position: absolute;
    right: 7px;
    bottom: 7px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #86efac;
    box-shadow: 0 0 0 3px rgba(134, 239, 172, 0.13),
                0 0 12px rgba(134, 239, 172, 0.55);
}

body[data-page="workspace"] .workspace-premium-hero h1 {
    text-shadow: 0 2px 14px rgba(15, 23, 42, 0.22);
}

body[data-page="workspace"] .workspace-premium-hero-side {
    margin-top: 28px;
    padding: 14px 15px;
    border-color: rgba(255, 255, 255, 0.16);
    background:
        linear-gradient(145deg, rgba(255,255,255,.115), rgba(255,255,255,.045));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.1),
                0 12px 24px rgba(15,23,42,.12);
}

body[data-page="workspace"] .workspace-premium-hero-side strong::before {
    content: "";
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-right: 7px;
    border-radius: 50%;
    background: #86efac;
    box-shadow: 0 0 0 4px rgba(134,239,172,.1);
    vertical-align: 0.08em;
}

/* Premium interactive buttons */
body[data-page="workspace"] .workspace-card-link,
body[data-page="workspace"] .rooms-pro-action-btn.notification-btn,
body[data-page="workspace"] .announcement-read-button {
    position: relative;
    overflow: hidden;
    box-shadow: 0 7px 16px rgba(15, 23, 42, 0.08),
                inset 0 1px 0 rgba(255,255,255,.7);
}

body[data-page="workspace"] .workspace-card-link {
    border-color: #d8e0ea;
    background: linear-gradient(180deg, #ffffff 0%, #f3f6fa 100%);
}

body[data-page="workspace"] .workspace-card-link::before,
body[data-page="workspace"] .announcement-read-button::before {
    content: "";
    position: absolute;
    top: 0;
    left: -70%;
    width: 48%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.75), transparent);
    transform: skewX(-18deg);
    transition: left .45s ease;
    pointer-events: none;
}

body[data-page="workspace"] .workspace-card-link:hover::before,
body[data-page="workspace"] .announcement-read-button:hover::before {
    left: 125%;
}

body[data-page="workspace"] .workspace-premium-action-card > .workspace-card-link {
    min-height: 35px;
    padding-right: 37px;
}

body[data-page="workspace"] .workspace-premium-action-card > .workspace-card-link::after {
    content: "→";
    position: absolute;
    right: 8px;
    top: 50%;
    display: grid;
    width: 22px;
    height: 22px;
    place-items: center;
    border-radius: 7px;
    color: #fff;
    background: linear-gradient(145deg, #475569, #273549);
    box-shadow: 0 4px 10px rgba(30,41,59,.2);
    transform: translateY(-50%);
}

body[data-page="workspace"] .workspace-premium-action-card > .workspace-card-link:hover {
    color: #172033;
    border-color: #bac6d5;
    background: #fff;
    transform: translateY(-1px);
}

body[data-page="workspace"] .rooms-pro-action-btn.notification-btn {
    background: linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.08));
}

/* Real progress-track appearance for total duration card */
body[data-page="workspace"] .workspace-premium-progress-shell {
    position: relative;
    height: 10px;
    padding: 2px;
    overflow: hidden;
    border: 1px solid #d7e0eb;
    border-radius: 999px;
    background:
        repeating-linear-gradient(
            90deg,
            #eef2f7 0,
            #eef2f7 calc(12.5% - 1px),
            #dfe6ef calc(12.5% - 1px),
            #dfe6ef 12.5%
        );
    box-shadow: inset 0 2px 4px rgba(15,23,42,.06),
                0 1px 0 #fff;
}

body[data-page="workspace"] .workspace-premium-progress-bar {
    position: relative;
    width: 68%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #315f91 0%, #4f7fb0 56%, #78a2ca 100%);
    box-shadow: 0 2px 8px rgba(47,95,145,.28),
                inset 0 1px 0 rgba(255,255,255,.35);
    overflow: hidden;
}

body[data-page="workspace"] .workspace-premium-progress-bar::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, transparent 20%, rgba(255,255,255,.42) 48%, transparent 72%);
    transform: translateX(-120%);
    animation: ws-progress-shine 3.2s ease-in-out infinite;
}

@keyframes ws-progress-shine {
    0%, 48% { transform: translateX(-120%); }
    78%, 100% { transform: translateX(140%); }
}

body[data-page="workspace"] .workspace-premium-time-card .workspace-premium-desc {
    display: flex;
    align-items: center;
    gap: 6px;
}

body[data-page="workspace"] .workspace-premium-time-card .workspace-premium-desc::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #4f7fb0;
    box-shadow: 0 0 0 3px rgba(79,127,176,.11);
}

/* More designed attendance records */
body[data-page="workspace"] .workspace-premium-record-section {
    background:
        linear-gradient(180deg, rgba(248,250,252,.95), rgba(255,255,255,.98));
}

body[data-page="workspace"] .workspace-premium-attendance-item {
    position: relative;
    padding: 0;
    overflow: hidden;
    border: 1px solid #dbe3ed;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 7px 18px rgba(15,23,42,.055),
                inset 0 1px 0 #fff;
}

body[data-page="workspace"] .workspace-premium-attendance-item::before {
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    border-radius: 0;
    background: linear-gradient(180deg, #4f6f94, #8ca5bf);
}

body[data-page="workspace"] .workspace-premium-attendance-item .attendance-top-row {
    position: relative;
    padding: 13px 15px 11px 18px;
    border-bottom: 1px solid #e5eaf1;
    background:
        linear-gradient(90deg, rgba(237,244,251,.92), rgba(248,250,252,.72) 58%, #fff);
}

body[data-page="workspace"] .workspace-premium-attendance-item .attendance-top-row::after {
    content: "";
    position: absolute;
    right: 14px;
    bottom: -1px;
    width: 44px;
    height: 2px;
    border-radius: 999px;
    background: #7793b1;
}

body[data-page="workspace"] .workspace-premium-attendance-item .attendance-top-row h4 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    color: #172033;
    font-size: .95rem;
}

body[data-page="workspace"] .workspace-premium-attendance-item .attendance-top-row h4::before {
    content: "";
    width: 9px;
    height: 9px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: #4f7a68;
    box-shadow: 0 0 0 3px rgba(79,122,104,.14);
}

body[data-page="workspace"] .workspace-premium-attendance-item .attendance-top-row p {
    margin: 4px 0 0 17px;
    color: #69768a;
}

body[data-page="workspace"] .workspace-premium-attendance-item .session-pill {
    border: 1px solid #ccd7e4;
    color: #3b526d;
    background: linear-gradient(180deg, #fff, #edf3f8);
    box-shadow: 0 3px 8px rgba(15,23,42,.06);
}

body[data-page="workspace"] .workspace-premium-attendance-item .attendance-info-grid {
    gap: 0;
    padding: 10px 13px 13px 17px;
    border: 0;
    background: #fff;
}

body[data-page="workspace"] .workspace-premium-attendance-item .attendance-info-grid > div {
    position: relative;
    min-width: 0;
    padding: 8px 10px;
    border-right: 1px dashed #dfe5ed;
}

body[data-page="workspace"] .workspace-premium-attendance-item .attendance-info-grid > div:last-child {
    border-right: 0;
}

body[data-page="workspace"] .workspace-premium-attendance-item .attendance-info-grid span {
    display: block;
    margin-bottom: 3px;
    color: #8792a3;
    font-size: .67rem;
    font-weight: 750;
    letter-spacing: .025em;
}

body[data-page="workspace"] .workspace-premium-attendance-item .attendance-info-grid strong {
    color: #27364a;
    font-size: .79rem;
}

body[data-page="workspace"] .workspace-premium-attendance-item .attendance-note,
body[data-page="workspace"] .workspace-premium-attendance-item .workspace-feedback-details {
    margin-right: 13px;
    margin-left: 17px;
}

body[data-page="workspace"] .workspace-feedback-summary {
    border: 1px solid #dce4ed;
    background: linear-gradient(180deg, #fbfcfe, #f3f6fa);
    box-shadow: inset 0 1px 0 #fff;
}

@media (max-width: 700px) {
    body[data-page="workspace"] .login-language-switch {
        top: 27px;
        right: 11px;
    }

    body[data-page="workspace"] .workspace-premium-hero {
        padding-top: 30px;
    }

    body[data-page="workspace"] .workspace-premium-hero-side {
        margin-top: 0;
    }

    body[data-page="workspace"] .workspace-premium-attendance-item .attendance-info-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        padding: 8px 10px 11px 14px;
    }

    body[data-page="workspace"] .workspace-premium-attendance-item .attendance-info-grid > div {
        border-right: 0;
        border-bottom: 1px dashed #e2e7ee;
    }

    body[data-page="workspace"] .workspace-premium-attendance-item .attendance-info-grid > div:nth-last-child(-n + 2) {
        border-bottom: 0;
    }

    body[data-page="workspace"] .workspace-premium-attendance-item .attendance-top-row {
        padding-left: 15px;
    }

    body[data-page="workspace"] .workspace-premium-attendance-item .attendance-note,
    body[data-page="workspace"] .workspace-premium-attendance-item .workspace-feedback-details {
        margin-right: 10px;
        margin-left: 14px;
    }
}

@media (max-width: 390px) {
    body[data-page="workspace"] .login-language-switch button {
        min-width: 37px;
        padding-inline: 7px;
    }

    body[data-page="workspace"] .workspace-premium-hero {
        padding-top: 30px;
    }
}

@media (prefers-reduced-motion: reduce) {
    body[data-page="workspace"] .workspace-premium-progress-bar::after {
        animation: none;
    }
}


/* =========================================================
   Workspace Final Refinement
   Based on current global
   - Remove button arrows
   - Improve announcement board
   - Add slightly more breathing space
   - Enrich attendance record backgrounds
   ========================================================= */

/* ---------- Remove arrows beside action buttons ---------- */
body[data-page="workspace"] .workspace-premium-action-card > .workspace-card-link {
    padding-right: 12px;
}

body[data-page="workspace"] .workspace-premium-action-card > .workspace-card-link::after {
    content: none !important;
    display: none !important;
}

/* ---------- Slightly increase breathing space ---------- */
body[data-page="workspace"] .workspace-announcement-board,
body[data-page="workspace"] .workspace-premium-section,
body[data-page="workspace"] .workspace-premium-record-section {
    padding: 20px;
}

body[data-page="workspace"] .workspace-premium-summary-card {
    padding: 17px;
}

body[data-page="workspace"] .workspace-premium-action-card {
    padding: 15px;
    gap: 10px 12px;
}

body[data-page="workspace"] .workspace-premium-card-grid {
    gap: 11px;
}

body[data-page="workspace"] .workspace-record-list,
body[data-page="workspace"] .workspace-announcement-list {
    gap: 11px;
}

body[data-page="workspace"] .section-title-row,
body[data-page="workspace"] .workspace-announcement-board-header {
    margin-bottom: 15px;
}

/* ---------- Premium company announcement board ---------- */
body[data-page="workspace"] .workspace-announcement-board {
    border: 1px solid rgba(168, 133, 75, 0.30);
    background:
        radial-gradient(circle at 100% 0%, rgba(181, 138, 74, 0.10), transparent 250px),
        linear-gradient(145deg, #fffdf9 0%, #ffffff 48%, #f8fafc 100%);
    box-shadow:
        0 14px 34px rgba(51, 65, 85, 0.075),
        inset 0 1px 0 rgba(255,255,255,.95);
}

body[data-page="workspace"] .workspace-announcement-board::before {
    width: 5px;
    background: linear-gradient(
        180deg,
        #d3ae6c 0%,
        #9a7340 48%,
        #42566f 100%
    );
}

body[data-page="workspace"] .workspace-announcement-board-header {
    position: relative;
    z-index: 2;
    align-items: center;
    padding: 3px 2px 15px 4px;
    border-bottom: 1px solid rgba(181, 138, 74, 0.17);
}

body[data-page="workspace"] .workspace-announcement-board-header h2 {
    font-size: 1.08rem;
    letter-spacing: -0.02em;
}

body[data-page="workspace"] .workspace-announcement-board-header h2::before {
    width: 5px;
    height: 20px;
    flex-basis: 5px;
    background: linear-gradient(180deg, #cda55e, #7e6034);
    box-shadow: 0 0 0 5px rgba(181, 138, 74, 0.09);
}

body[data-page="workspace"] .workspace-announcement-board-header p {
    max-width: 700px;
    margin-top: 5px;
    line-height: 1.55;
}

body[data-page="workspace"] .workspace-announcement-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 6px;
    color: #8a6735;
}

body[data-page="workspace"] .workspace-announcement-eyebrow::before {
    content: "";
    width: 18px;
    height: 1px;
    background: linear-gradient(90deg, #b58a4a, transparent);
}

body[data-page="workspace"] .workspace-announcement-header-actions .workspace-card-link {
    min-height: 34px;
    padding: 6px 12px;
    border-color: rgba(145, 117, 73, 0.22);
    color: #5d4829;
    background:
        linear-gradient(180deg, rgba(255,255,255,.98), rgba(249,244,235,.92));
    box-shadow:
        0 5px 12px rgba(91, 70, 38, 0.07),
        inset 0 1px 0 #fff;
}

body[data-page="workspace"] .workspace-announcement-header-actions .workspace-card-link:hover {
    color: #fff;
    border-color: #8c6939;
    background: linear-gradient(145deg, #9a7641, #6f522d);
}

/* Announcement item hierarchy */
body[data-page="workspace"] .workspace-announcement-item {
    padding: 15px 16px 14px 18px;
    border: 1px solid #e1e6ed;
    border-radius: 14px;
    background:
        linear-gradient(135deg, rgba(248,250,252,.96), rgba(255,255,255,.98));
    box-shadow:
        0 6px 16px rgba(15,23,42,.04),
        inset 0 1px 0 #fff;
}

body[data-page="workspace"] .workspace-announcement-item::before {
    inset: 13px auto 13px 0;
    width: 4px;
}

body[data-page="workspace"] .workspace-announcement-item.is-unread {
    border-color: rgba(66, 107, 154, 0.22);
    background:
        linear-gradient(90deg, rgba(237,245,253,.92), rgba(255,255,255,.98) 28%);
}

body[data-page="workspace"] .workspace-announcement-item.is-important {
    border-color: rgba(181, 107, 52, 0.26);
    background:
        linear-gradient(90deg, rgba(255,246,235,.96), rgba(255,255,255,.99) 30%);
}

body[data-page="workspace"] .workspace-announcement-item h3 {
    margin-top: 10px;
    margin-bottom: 5px;
    color: #1d2a3c;
    font-size: .98rem;
}

body[data-page="workspace"] .workspace-announcement-body {
    color: #59677b;
    line-height: 1.62;
}

body[data-page="workspace"] .workspace-announcement-footer {
    margin-top: 12px;
    padding-top: 11px;
    border-top-color: #dfe5ec;
}

body[data-page="workspace"] .announcement-badge {
    min-height: 23px;
    padding: 3px 8px;
    border: 1px solid rgba(148,163,184,.12);
}

/* ---------- Better attendance section background ---------- */
body[data-page="workspace"] .workspace-premium-record-section {
    position: relative;
    overflow: hidden;
    border-color: rgba(107, 130, 158, 0.25);
    background:
        radial-gradient(circle at 100% 0%, rgba(79, 111, 148, 0.11), transparent 260px),
        radial-gradient(circle at 0% 100%, rgba(181, 138, 74, 0.08), transparent 240px),
        linear-gradient(145deg, #f3f7fb 0%, #f8fafc 46%, #eef3f8 100%);
    box-shadow:
        0 14px 34px rgba(51, 65, 85, 0.075),
        inset 0 1px 0 rgba(255,255,255,.9);
}

body[data-page="workspace"] .workspace-premium-record-section::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 3px;
    background: linear-gradient(
        90deg,
        #4c6988 0%,
        #8ba3bd 48%,
        #b58a4a 100%
    );
}

body[data-page="workspace"] .workspace-premium-record-section > * {
    position: relative;
    z-index: 1;
}

body[data-page="workspace"] .workspace-premium-record-section > .section-title-row {
    padding: 2px 2px 14px;
    border-bottom: 1px solid rgba(111, 135, 163, 0.16);
}

body[data-page="workspace"] .workspace-premium-record-section .section-count {
    border-color: rgba(79, 111, 148, .19);
    color: #3f5875;
    background: rgba(255,255,255,.74);
    box-shadow: 0 4px 10px rgba(51,65,85,.045);
}

body[data-page="workspace"] .workspace-premium-attendance-item {
    border-color: rgba(106, 130, 158, 0.24);
    background:
        linear-gradient(145deg, rgba(255,255,255,.98), rgba(242,247,251,.96));
    box-shadow:
        0 9px 22px rgba(37, 52, 71, 0.065),
        inset 0 1px 0 rgba(255,255,255,.95);
}

body[data-page="workspace"] .workspace-premium-attendance-item:nth-child(even) {
    background:
        linear-gradient(145deg, rgba(255,255,255,.99), rgba(247,244,237,.92));
}

body[data-page="workspace"] .workspace-premium-attendance-item .attendance-top-row {
    background:
        linear-gradient(
            90deg,
            rgba(226,237,247,.98) 0%,
            rgba(245,248,251,.96) 56%,
            rgba(255,255,255,.98) 100%
        );
}

body[data-page="workspace"] .workspace-premium-attendance-item:nth-child(even) .attendance-top-row {
    background:
        linear-gradient(
            90deg,
            rgba(244,236,221,.93) 0%,
            rgba(249,247,242,.96) 56%,
            rgba(255,255,255,.98) 100%
        );
}

body[data-page="workspace"] .workspace-premium-attendance-item .attendance-info-grid {
    background: transparent;
}

body[data-page="workspace"] .workspace-premium-attendance-item .attendance-info-grid > div {
    margin: 2px;
    border: 1px solid rgba(213,221,231,.72);
    border-radius: 10px;
    background: rgba(255,255,255,.63);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.78);
}

body[data-page="workspace"] .workspace-premium-attendance-item .attendance-info-grid > div:last-child {
    border-right: 1px solid rgba(213,221,231,.72);
}

body[data-page="workspace"] .workspace-feedback-details {
    background: rgba(255,255,255,.70);
}

/* ---------- Mobile refinements ---------- */
@media (max-width: 700px) {
    body[data-page="workspace"] .workspace-announcement-board,
    body[data-page="workspace"] .workspace-premium-section,
    body[data-page="workspace"] .workspace-premium-record-section {
        padding: 14px;
    }

    body[data-page="workspace"] .workspace-premium-summary-card {
        padding: 13px;
    }

    body[data-page="workspace"] .workspace-premium-action-card {
        padding: 12px;
    }

    body[data-page="workspace"] .workspace-announcement-board-header {
        padding-bottom: 12px;
    }

    body[data-page="workspace"] .workspace-announcement-item {
        padding: 12px 12px 11px 15px;
    }

    body[data-page="workspace"] .workspace-premium-attendance-item .attendance-info-grid > div {
        margin: 2px;
        border: 1px solid rgba(213,221,231,.72);
    }
}

@media (max-width: 390px) {
    body[data-page="workspace"] .workspace-announcement-board,
    body[data-page="workspace"] .workspace-premium-section,
    body[data-page="workspace"] .workspace-premium-record-section {
        padding: 12px;
    }
}



/* =========================================================
   Workspace Role Colour + Summary Upgrade
   Keeps all other approved UI styles.
   ========================================================= */

/* ---------- Role colour system ---------- */
body[data-page="workspace"] {
    --role-color: #334155;
    --role-color-dark: #1e293b;
    --role-color-rgb: 51, 65, 85;
    --role-soft: #f1f5f9;
}

body[data-page="workspace"].role-promoter {
    --role-color: #be185d;
    --role-color-dark: #9d174d;
    --role-color-rgb: 190, 24, 93;
    --role-soft: #fdf2f8;
}

body[data-page="workspace"].role-business {
    --role-color: #1e3a8a;
    --role-color-dark: #172554;
    --role-color-rgb: 30, 58, 138;
    --role-soft: #eff6ff;
}

body[data-page="workspace"].role-team-leader {
    --role-color: #4c1d95;
    --role-color-dark: #3b0764;
    --role-color-rgb: 76, 29, 149;
    --role-soft: #f5f3ff;
}

body[data-page="workspace"].role-dj {
    --role-color: #831843;
    --role-color-dark: #500724;
    --role-color-rgb: 131, 24, 67;
    --role-soft: #fdf2f8;
}

body[data-page="workspace"].role-manager,
body[data-page="workspace"].role-store-manager,
body[data-page="workspace"].role-senior-admin {
    --role-color: #334155;
    --role-color-dark: #1e293b;
    --role-color-rgb: 51, 65, 85;
    --role-soft: #f1f5f9;
}

/* ---------- All primary workspace buttons follow role ---------- */
body[data-page="workspace"] .workspace-card-link,
body[data-page="workspace"] .announcement-read-button,
body[data-page="workspace"] .rooms-pro-action-btn.notification-btn {
    border-color: rgba(var(--role-color-rgb), .24);
}

body[data-page="workspace"] .workspace-premium-action-card > .workspace-card-link,
body[data-page="workspace"] .workspace-announcement-header-actions .workspace-card-link,
body[data-page="workspace"] .workspace-premium-record-section > .section-title-row .workspace-card-link {
    color: var(--role-color-dark);
    border-color: rgba(var(--role-color-rgb), .22);
    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.98),
            rgba(var(--role-color-rgb), .065)
        );
    box-shadow:
        0 5px 12px rgba(var(--role-color-rgb), .08),
        inset 0 1px 0 rgba(255,255,255,.95);
}

body[data-page="workspace"] .workspace-card-link:hover,
body[data-page="workspace"] .announcement-read-button:hover,
body[data-page="workspace"] .workspace-announcement-header-actions .workspace-card-link:hover,
body[data-page="workspace"] .workspace-premium-action-card > .workspace-card-link:hover {
    color: #fff;
    border-color: var(--role-color);
    background:
        linear-gradient(145deg, var(--role-color), var(--role-color-dark));
    box-shadow:
        0 8px 18px rgba(var(--role-color-rgb), .22),
        inset 0 1px 0 rgba(255,255,255,.16);
}

body[data-page="workspace"] .workspace-premium-pill-links a:hover {
    color: #fff;
    border-color: var(--role-color);
    background: var(--role-color);
    box-shadow: 0 6px 14px rgba(var(--role-color-rgb), .18);
}

body[data-page="workspace"] .bottom-nav a.active {
    background:
        linear-gradient(145deg, var(--role-color), var(--role-color-dark));
    box-shadow: 0 5px 13px rgba(var(--role-color-rgb), .22);
}

/* Function icon and side accent also follow role */
body[data-page="workspace"] .workspace-premium-action-card::before {
    background:
        linear-gradient(
            180deg,
            var(--role-color),
            rgba(var(--role-color-rgb), .52)
        );
}

body[data-page="workspace"] .workspace-premium-action-icon,
body[data-page="workspace"] .workspace-premium-action-card:nth-child(3n + 2) .workspace-premium-action-icon,
body[data-page="workspace"] .workspace-premium-action-card:nth-child(3n + 3) .workspace-premium-action-icon {
    background:
        linear-gradient(145deg, var(--role-color), var(--role-color-dark));
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.18),
        0 7px 15px rgba(var(--role-color-rgb), .18);
}

/* Keep Excel settlement visually identifiable */
body[data-page="workspace"] .workspace-premium-action-card.excel-card::before {
    background: linear-gradient(180deg, #24766f, #65a59e);
}

body[data-page="workspace"] .workspace-premium-action-card.excel-card .workspace-premium-action-icon {
    background: linear-gradient(145deg, #33867e, #1f5b55);
}

/* ---------- Cleaner company announcement header ---------- */
body[data-page="workspace"] .workspace-announcement-board-header {
    position: relative;
    z-index: 2;
    align-items: center;
    margin-bottom: 14px;
    padding: 0 0 13px;
    border-bottom: 1px solid #e3e8ef;
    background: transparent;
}

body[data-page="workspace"] .workspace-announcement-board-header::before,
body[data-page="workspace"] .workspace-announcement-board-header::after {
    content: none;
    display: none;
}

body[data-page="workspace"] .workspace-announcement-board-header h2 {
    display: block;
    color: #1d2a3c;
    font-size: 1.08rem;
    letter-spacing: -.018em;
}

body[data-page="workspace"] .workspace-announcement-board-header h2::before {
    content: none;
    display: none;
}

body[data-page="workspace"] .workspace-announcement-eyebrow {
    display: inline-flex;
    align-items: center;
    min-height: 23px;
    margin-bottom: 6px;
    padding: 3px 8px;
    border: 1px solid rgba(var(--role-color-rgb), .16);
    border-radius: 999px;
    color: var(--role-color);
    background: rgba(var(--role-color-rgb), .07);
    font-size: .62rem;
    letter-spacing: .11em;
}

body[data-page="workspace"] .workspace-announcement-eyebrow::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--role-color);
    box-shadow: 0 0 0 3px rgba(var(--role-color-rgb), .10);
}

body[data-page="workspace"] .workspace-announcement-board-header p {
    max-width: 720px;
    margin-top: 4px;
    color: #748195;
    line-height: 1.5;
}

/* Remove the previous heavy gold announcement treatment */
body[data-page="workspace"] .workspace-announcement-board {
    border-color: #dfe5ec;
    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(var(--role-color-rgb), .065),
            transparent 245px
        ),
        linear-gradient(145deg, #ffffff, #f8fafc);
}

body[data-page="workspace"] .workspace-announcement-board::before {
    width: 4px;
    background:
        linear-gradient(
            180deg,
            var(--role-color),
            rgba(var(--role-color-rgb), .40)
        );
}

body[data-page="workspace"] .workspace-announcement-board::after {
    background:
        radial-gradient(
            circle,
            rgba(var(--role-color-rgb), .08),
            transparent 68%
        );
}

/* ---------- More attractive check-in mode card ---------- */
body[data-page="workspace"] .workspace-premium-mode-card {
    border-color: rgba(var(--role-color-rgb), .28);
    background:
        radial-gradient(
            circle at 100% 100%,
            rgba(var(--role-color-rgb), .16),
            transparent 155px
        ),
        linear-gradient(
            145deg,
            rgba(var(--role-color-rgb), .11),
            rgba(255,255,255,.98) 56%
        );
    box-shadow:
        0 12px 28px rgba(var(--role-color-rgb), .10),
        inset 0 1px 0 rgba(255,255,255,.95);
}

body[data-page="workspace"] .workspace-premium-mode-card::before {
    height: 4px;
    background:
        linear-gradient(
            90deg,
            var(--role-color-dark),
            var(--role-color),
            rgba(var(--role-color-rgb), .36)
        );
}

body[data-page="workspace"] .workspace-premium-mode-card::after {
    right: -35px;
    bottom: -50px;
    width: 150px;
    height: 150px;
    border: 24px solid rgba(var(--role-color-rgb), .045);
    background: transparent;
}

body[data-page="workspace"] .workspace-premium-mode-card .workspace-premium-mini-badge {
    color: var(--role-color-dark);
    border-color: rgba(var(--role-color-rgb), .20);
    background: rgba(255,255,255,.76);
}

body[data-page="workspace"] .workspace-premium-mode-card > strong {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-top: 16px;
    padding: 8px 11px;
    border: 1px solid rgba(var(--role-color-rgb), .16);
    border-radius: 11px;
    color: var(--role-color-dark);
    background: rgba(255,255,255,.72);
    box-shadow:
        0 5px 13px rgba(var(--role-color-rgb), .08),
        inset 0 1px 0 rgba(255,255,255,.95);
}

body[data-page="workspace"] .workspace-premium-mode-card > strong::before {
    content: "";
    width: 9px;
    height: 9px;
    flex: 0 0 9px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: var(--role-color);
    box-shadow: 0 0 0 4px rgba(var(--role-color-rgb), .12);
}

body[data-page="workspace"] .workspace-premium-mode-card .workspace-premium-meta-list {
    padding: 9px 11px;
    border: 1px solid rgba(var(--role-color-rgb), .10);
    border-radius: 11px;
    background: rgba(255,255,255,.54);
}

/* ---------- More attractive balance card ---------- */
body[data-page="workspace"] .workspace-premium-money-card {
    border-color: rgba(181, 138, 74, .38);
    background:
        radial-gradient(circle at 100% 0%, rgba(218, 180, 109, .19), transparent 175px),
        radial-gradient(circle at 0% 100%, rgba(139, 107, 57, .10), transparent 165px),
        linear-gradient(145deg, #fffaf0 0%, #ffffff 57%, #f7f2e8 100%);
    box-shadow:
        0 13px 30px rgba(118, 86, 38, .11),
        inset 0 1px 0 rgba(255,255,255,.96);
}

body[data-page="workspace"] .workspace-premium-money-card::before {
    height: 4px;
    background:
        linear-gradient(90deg, #6f542e, #b58a4a 52%, #e2c17e);
}

body[data-page="workspace"] .workspace-premium-money-card::after {
    right: -45px;
    bottom: -66px;
    width: 165px;
    height: 165px;
    border: 26px solid rgba(181,138,74,.055);
    background: transparent;
}

body[data-page="workspace"] .workspace-premium-money-card .workspace-premium-value-row {
    position: relative;
    margin-top: 15px;
    padding: 12px;
    border: 1px solid rgba(181,138,74,.18);
    border-radius: 13px;
    background:
        linear-gradient(135deg, rgba(255,255,255,.82), rgba(248,242,232,.72));
    box-shadow:
        0 7px 17px rgba(111,84,46,.08),
        inset 0 1px 0 rgba(255,255,255,.95);
}

body[data-page="workspace"] .workspace-premium-money-card .workspace-premium-value-icon {
    flex-basis: 43px;
    width: 43px;
    height: 43px;
    border-radius: 13px;
    background:
        linear-gradient(145deg, #b48a4b, #6f542e);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.22),
        0 8px 18px rgba(111,84,46,.22);
}

body[data-page="workspace"] .workspace-premium-money-card .workspace-premium-big-value {
    font-size: clamp(1.18rem, 1.9vw, 1.55rem);
}

body[data-page="workspace"] .workspace-premium-money-card .workspace-premium-big-value strong {
    color: #543e20;
    text-shadow: 0 1px 0 rgba(255,255,255,.9);
}

body[data-page="workspace"] .workspace-premium-money-card .workspace-premium-pill-links a {
    color: #6f542e;
    border-color: rgba(181,138,74,.20);
    background: rgba(255,252,246,.80);
}

body[data-page="workspace"] .workspace-premium-money-card .workspace-premium-pill-links a:hover {
    color: #fff;
    border-color: #8b6b39;
    background: linear-gradient(145deg, #a47d42, #6f542e);
}

/* ---------- Mobile ---------- */
@media (max-width: 700px) {
    body[data-page="workspace"] .workspace-announcement-board-header {
        align-items: flex-start;
        padding-bottom: 11px;
    }

    body[data-page="workspace"] .workspace-premium-mode-card > strong {
        padding: 7px 9px;
    }

    body[data-page="workspace"] .workspace-premium-mode-card .workspace-premium-meta-list {
        padding: 7px 8px;
    }

    body[data-page="workspace"] .workspace-premium-money-card .workspace-premium-value-row {
        padding: 9px;
    }

    body[data-page="workspace"] .workspace-premium-money-card .workspace-premium-value-icon {
        flex-basis: 35px;
        width: 35px;
        height: 35px;
        border-radius: 10px;
    }
}



/* =========================================================
   Workspace Mobile-Visible Buttons + Announcement Header V2
   ========================================================= */

/* ---------- Buttons are coloured by default, not only on hover ---------- */
body[data-page="workspace"] .workspace-premium-action-card > .workspace-card-link,
body[data-page="workspace"] .workspace-announcement-header-actions .workspace-card-link,
body[data-page="workspace"] .workspace-premium-record-section > .section-title-row .workspace-card-link,
body[data-page="workspace"] .announcement-read-button {
    color: #fff;
    border-color: var(--role-color);
    background:
        linear-gradient(145deg, var(--role-color), var(--role-color-dark));
    box-shadow:
        0 7px 16px rgba(var(--role-color-rgb), .20),
        inset 0 1px 0 rgba(255,255,255,.16);
}

body[data-page="workspace"] .workspace-premium-action-card > .workspace-card-link:hover,
body[data-page="workspace"] .workspace-announcement-header-actions .workspace-card-link:hover,
body[data-page="workspace"] .workspace-premium-record-section > .section-title-row .workspace-card-link:hover,
body[data-page="workspace"] .announcement-read-button:hover {
    color: #fff;
    border-color: var(--role-color-dark);
    background:
        linear-gradient(145deg, var(--role-color-dark), var(--role-color));
    box-shadow:
        0 9px 20px rgba(var(--role-color-rgb), .26),
        inset 0 1px 0 rgba(255,255,255,.18);
    transform: translateY(-1px);
}

body[data-page="workspace"] .workspace-premium-action-card > .workspace-card-link:active,
body[data-page="workspace"] .workspace-announcement-header-actions .workspace-card-link:active,
body[data-page="workspace"] .workspace-premium-record-section > .section-title-row .workspace-card-link:active,
body[data-page="workspace"] .announcement-read-button:active {
    transform: translateY(0) scale(.985);
    box-shadow:
        0 4px 10px rgba(var(--role-color-rgb), .18),
        inset 0 2px 4px rgba(15,23,42,.12);
}

/* Wallet mini buttons are also visible on mobile */
body[data-page="workspace"] .workspace-premium-pill-links a {
    color: #fff;
    border-color: var(--role-color);
    background:
        linear-gradient(145deg, var(--role-color), var(--role-color-dark));
    box-shadow:
        0 5px 12px rgba(var(--role-color-rgb), .16),
        inset 0 1px 0 rgba(255,255,255,.14);
}

body[data-page="workspace"] .workspace-premium-pill-links a:hover,
body[data-page="workspace"] .workspace-premium-pill-links a:active {
    color: #fff;
    border-color: var(--role-color-dark);
    background:
        linear-gradient(145deg, var(--role-color-dark), var(--role-color));
}

/* Keep balance card links gold so the asset card remains visually distinct */
body[data-page="workspace"] .workspace-premium-money-card .workspace-premium-pill-links a {
    color: #fff;
    border-color: #8b6b39;
    background: linear-gradient(145deg, #a47d42, #6f542e);
    box-shadow:
        0 5px 12px rgba(111,84,46,.18),
        inset 0 1px 0 rgba(255,255,255,.15);
}

/* ---------- Completely redesigned announcement header ---------- */
body[data-page="workspace"] .workspace-announcement-board-header {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 18px;
    margin: -4px -4px 15px;
    padding: 15px 16px;
    overflow: hidden;
    border: 1px solid rgba(var(--role-color-rgb), .16);
    border-radius: 14px;
    background:
        linear-gradient(
            120deg,
            rgba(var(--role-color-rgb), .11),
            rgba(255,255,255,.96) 46%,
            rgba(var(--role-color-rgb), .045)
        );
    box-shadow:
        0 7px 18px rgba(var(--role-color-rgb), .065),
        inset 0 1px 0 rgba(255,255,255,.92);
}

body[data-page="workspace"] .workspace-announcement-board-header::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    display: block;
    width: 5px;
    background:
        linear-gradient(180deg, var(--role-color), var(--role-color-dark));
}

body[data-page="workspace"] .workspace-announcement-board-header::after {
    content: "";
    position: absolute;
    right: -38px;
    top: -44px;
    display: block;
    width: 120px;
    height: 120px;
    border: 18px solid rgba(var(--role-color-rgb), .045);
    border-radius: 50%;
    pointer-events: none;
}

body[data-page="workspace"] .workspace-announcement-board-header > div:first-child {
    position: relative;
    z-index: 1;
    min-width: 0;
    padding-left: 3px;
}

body[data-page="workspace"] .workspace-announcement-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 24px;
    margin: 0 0 7px;
    padding: 3px 9px;
    border: 1px solid rgba(var(--role-color-rgb), .18);
    border-radius: 999px;
    color: var(--role-color-dark);
    background: rgba(255,255,255,.70);
    box-shadow: 0 3px 8px rgba(var(--role-color-rgb), .05);
    font-size: .61rem;
    letter-spacing: .105em;
}

body[data-page="workspace"] .workspace-announcement-eyebrow::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--role-color);
    box-shadow: 0 0 0 4px rgba(var(--role-color-rgb), .10);
}

body[data-page="workspace"] .workspace-announcement-board-header h2 {
    display: block;
    margin: 0;
    color: #172033;
    font-size: clamp(1.03rem, 1.6vw, 1.18rem);
    font-weight: 850;
    line-height: 1.25;
    letter-spacing: -.022em;
}

body[data-page="workspace"] .workspace-announcement-board-header h2::before {
    content: none !important;
    display: none !important;
}

body[data-page="workspace"] .workspace-announcement-board-header p {
    max-width: 720px;
    margin: 5px 0 0;
    color: #657287;
    font-size: .76rem;
    line-height: 1.5;
}

body[data-page="workspace"] .workspace-announcement-header-actions {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 7px;
}

body[data-page="workspace"] .workspace-announcement-header-actions .workspace-card-link {
    min-height: 35px;
    padding: 6px 12px;
    border-radius: 10px;
    white-space: nowrap;
}

/* Remove decorative shine from announcement header buttons for a cleaner look */
body[data-page="workspace"] .workspace-announcement-header-actions .workspace-card-link::before {
    content: none;
    display: none;
}

/* ---------- Mobile layout ---------- */
@media (max-width: 700px) {
    body[data-page="workspace"] .workspace-announcement-board-header {
        grid-template-columns: 1fr;
        gap: 11px;
        margin: -2px -2px 12px;
        padding: 13px;
        border-radius: 12px;
    }

    body[data-page="workspace"] .workspace-announcement-header-actions {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        justify-content: stretch;
    }

    body[data-page="workspace"] .workspace-announcement-header-actions .workspace-card-link {
        width: 100%;
        min-width: 0;
        white-space: normal;
    }

    body[data-page="workspace"] .workspace-premium-action-card > .workspace-card-link,
    body[data-page="workspace"] .announcement-read-button {
        box-shadow:
            0 5px 12px rgba(var(--role-color-rgb), .18),
            inset 0 1px 0 rgba(255,255,255,.14);
    }
}

@media (max-width: 390px) {
    body[data-page="workspace"] .workspace-announcement-header-actions {
        grid-template-columns: 1fr;
    }
}



/* =========================================================
   Wallet Link Grid Layout
   - First two links share one row
   - Third link fills the full row
   ========================================================= */

body[data-page="workspace"] .workspace-premium-money-card .workspace-premium-link-row.workspace-premium-pill-links {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    width: 100%;
    margin-top: 13px;
}

body[data-page="workspace"] .workspace-premium-money-card .workspace-premium-link-row.workspace-premium-pill-links a {
    width: 100%;
    min-width: 0;
    min-height: 32px;
    justify-content: center;
    padding: 5px 9px;
    border-radius: 10px;
    text-align: center;
    white-space: normal;
}

body[data-page="workspace"] .workspace-premium-money-card .workspace-premium-link-row.workspace-premium-pill-links a:nth-child(3) {
    grid-column: 1 / -1;
}

/* Mobile remains compact while keeping the 2 + 1 structure */
@media (max-width: 700px) {
    body[data-page="workspace"] .workspace-premium-money-card .workspace-premium-link-row.workspace-premium-pill-links {
        gap: 5px;
        margin-top: 10px;
    }

    body[data-page="workspace"] .workspace-premium-money-card .workspace-premium-link-row.workspace-premium-pill-links a {
        min-height: 29px;
        padding: 4px 6px;
        font-size: .62rem;
    }
}

/* Very narrow screens can still keep two short buttons side by side */
@media (max-width: 330px) {
    body[data-page="workspace"] .workspace-premium-money-card .workspace-premium-link-row.workspace-premium-pill-links {
        grid-template-columns: 1fr;
    }

    body[data-page="workspace"] .workspace-premium-money-card .workspace-premium-link-row.workspace-premium-pill-links a:nth-child(3) {
        grid-column: auto;
    }
}



/* =========================================================
   Workspace Role Hero + Role Logo Upgrade
   Logo files must be placed in: static/img/
   ========================================================= */

/* ---------- Seven distinct role palettes ---------- */
body[data-page="workspace"].role-promoter {
    --role-color: #db2777;
    --role-color-dark: #9d174d;
    --role-color-rgb: 219, 39, 119;
    --role-hero-1: #831843;
    --role-hero-2: #be185d;
    --role-hero-3: #ec4899;
    --role-logo: url("../img/promoter_profile.png");
}

body[data-page="workspace"].role-business {
    --role-color: #1e3a8a;
    --role-color-dark: #172554;
    --role-color-rgb: 30, 58, 138;
    --role-hero-1: #172554;
    --role-hero-2: #1e3a8a;
    --role-hero-3: #2563eb;
    --role-logo: url("../img/business_profile.png");
}

body[data-page="workspace"].role-team-leader {
    --role-color: #4c1d95;
    --role-color-dark: #2e1065;
    --role-color-rgb: 76, 29, 149;
    --role-hero-1: #2e1065;
    --role-hero-2: #4c1d95;
    --role-hero-3: #7c3aed;
    --role-logo: url("../img/leader_profile.png");
}

body[data-page="workspace"].role-dj {
    --role-color: #831843;
    --role-color-dark: #500724;
    --role-color-rgb: 131, 24, 67;
    --role-hero-1: #500724;
    --role-hero-2: #831843;
    --role-hero-3: #be123c;
    --role-logo: url("../img/dj_profile.png");
}

body[data-page="workspace"].role-manager {
    --role-color: #0f766e;
    --role-color-dark: #134e4a;
    --role-color-rgb: 15, 118, 110;
    --role-hero-1: #134e4a;
    --role-hero-2: #0f766e;
    --role-hero-3: #14b8a6;
    --role-logo: url("../img/manager_profile.png");
}

body[data-page="workspace"].role-store-manager {
    --role-color: #b45309;
    --role-color-dark: #78350f;
    --role-color-rgb: 180, 83, 9;
    --role-hero-1: #78350f;
    --role-hero-2: #b45309;
    --role-hero-3: #d97706;
    --role-logo: url("../img/store_manager_profile.png");
}

body[data-page="workspace"].role-senior-admin {
    --role-color: #334155;
    --role-color-dark: #0f172a;
    --role-color-rgb: 51, 65, 85;
    --role-hero-1: #0f172a;
    --role-hero-2: #334155;
    --role-hero-3: #64748b;
    --role-logo: url("../img/admin_profile.png");
}

/* ---------- Hero follows current role ---------- */
body[data-page="workspace"] .workspace-premium-hero {
    border-color: rgba(255,255,255,.22);
    background:
        radial-gradient(circle at 13% 8%, rgba(255,255,255,.18), transparent 25%),
        radial-gradient(circle at 90% 108%, rgba(255,255,255,.13), transparent 36%),
        linear-gradient(120deg, rgba(255,255,255,.055), transparent 43%),
        linear-gradient(
            135deg,
            var(--role-hero-1, #0f172a) 0%,
            var(--role-hero-2, #334155) 52%,
            var(--role-hero-3, #64748b) 100%
        );
    box-shadow:
        0 18px 42px rgba(var(--role-color-rgb), .23),
        inset 0 1px 0 rgba(255,255,255,.14),
        inset 0 -1px 0 rgba(15,23,42,.22);
}

body[data-page="workspace"] .workspace-premium-hero::after {
    border-color: rgba(255,255,255,.045);
    box-shadow:
        0 0 0 1px rgba(255,255,255,.07),
        0 0 80px rgba(var(--role-color-rgb), .20);
}

/* ---------- Replace the text icon with role logo ---------- */
body[data-page="workspace"] .workspace-premium-icon {
    position: relative;
    display: block;
    flex: 0 0 66px;
    width: 66px;
    height: 66px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.25);
    border-radius: 20px;
    color: transparent;
    font-size: 0;
    line-height: 0;
    background:
        linear-gradient(145deg, rgba(255,255,255,.20), rgba(255,255,255,.07));
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.20),
        0 13px 28px rgba(15,23,42,.24);
}

body[data-page="workspace"] .workspace-premium-icon::before {
    content: "";
    position: absolute;
    inset: 7px;
    border-radius: 15px;
    background-image: var(--role-logo);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    filter: drop-shadow(0 5px 9px rgba(15,23,42,.22));
}

body[data-page="workspace"] .workspace-premium-icon::after {
    z-index: 2;
    right: 6px;
    bottom: 6px;
    width: 7px;
    height: 7px;
}

/* ---------- Role badge follows exact role colour ---------- */
body[data-page="workspace"] .role-badge.promoter,
body[data-page="workspace"] .role-badge.business,
body[data-page="workspace"] .role-badge.team-leader,
body[data-page="workspace"] .role-badge.dj,
body[data-page="workspace"] .role-badge.admin {
    border-color: rgba(255,255,255,.24);
    background: rgba(var(--role-color-rgb), .72);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.16),
        0 4px 10px rgba(15,23,42,.13);
}

body[data-page="workspace"] .workspace-premium-hero-side {
    border-color: rgba(255,255,255,.18);
    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.15),
            rgba(var(--role-color-rgb), .10)
        );
}

body[data-page="workspace"] .rooms-pro-action-btn.notification-btn {
    border-color: rgba(255,255,255,.22);
    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.20),
            rgba(255,255,255,.09)
        );
}

/* ---------- Tablet and mobile ---------- */
@media (max-width: 1024px) {
    body[data-page="workspace"] .workspace-premium-icon {
        flex-basis: 58px;
        width: 58px;
        height: 58px;
        border-radius: 17px;
    }

    body[data-page="workspace"] .workspace-premium-icon::before {
        inset: 6px;
        border-radius: 13px;
    }
}

@media (max-width: 700px) {
    body[data-page="workspace"] .workspace-premium-icon {
        flex-basis: 48px;
        width: 48px;
        height: 48px;
        border-radius: 14px;
    }

    body[data-page="workspace"] .workspace-premium-icon::before {
        inset: 5px;
        border-radius: 11px;
    }

    body[data-page="workspace"] .workspace-premium-icon::after {
        right: 4px;
        bottom: 4px;
        width: 6px;
        height: 6px;
    }
}



/* =========================================================
   PRMS Notifications — Role Premium Responsive UI
   Uses the same role palette and logo system as Workspace.
   ========================================================= */

body[data-page="notifications"] {
    --role-color: #334155;
    --role-color-dark: #0f172a;
    --role-color-rgb: 51, 65, 85;
    --role-hero-1: #0f172a;
    --role-hero-2: #334155;
    --role-hero-3: #64748b;
    --role-logo: url("../img/admin.png");
    margin: 0;
    color: #172033;
    background:
        radial-gradient(circle at 100% 0%, rgba(var(--role-color-rgb), .08), transparent 28rem),
        #f3f5f8;
    font-family: Inter, "Segoe UI", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

body[data-page="notifications"].role-promoter {
    --role-color: #db2777;
    --role-color-dark: #9d174d;
    --role-color-rgb: 219, 39, 119;
    --role-hero-1: #831843;
    --role-hero-2: #be185d;
    --role-hero-3: #ec4899;
    --role-logo: url("../img/promoter.png");
}

body[data-page="notifications"].role-business {
    --role-color: #1e3a8a;
    --role-color-dark: #172554;
    --role-color-rgb: 30, 58, 138;
    --role-hero-1: #172554;
    --role-hero-2: #1e3a8a;
    --role-hero-3: #2563eb;
    --role-logo: url("../img/business.png");
}

body[data-page="notifications"].role-team-leader {
    --role-color: #4c1d95;
    --role-color-dark: #2e1065;
    --role-color-rgb: 76, 29, 149;
    --role-hero-1: #2e1065;
    --role-hero-2: #4c1d95;
    --role-hero-3: #7c3aed;
    --role-logo: url("../img/leader.png");
}

body[data-page="notifications"].role-dj {
    --role-color: #831843;
    --role-color-dark: #500724;
    --role-color-rgb: 131, 24, 67;
    --role-hero-1: #500724;
    --role-hero-2: #831843;
    --role-hero-3: #be123c;
    --role-logo: url("../img/dj.png");
}

body[data-page="notifications"].role-manager {
    --role-color: #0f766e;
    --role-color-dark: #134e4a;
    --role-color-rgb: 15, 118, 110;
    --role-hero-1: #134e4a;
    --role-hero-2: #0f766e;
    --role-hero-3: #14b8a6;
    --role-logo: url("../img/manager.png");
}

body[data-page="notifications"].role-store-manager {
    --role-color: #b45309;
    --role-color-dark: #78350f;
    --role-color-rgb: 180, 83, 9;
    --role-hero-1: #78350f;
    --role-hero-2: #b45309;
    --role-hero-3: #d97706;
    --role-logo: url("../img/store_manager.png");
}

body[data-page="notifications"].role-senior-admin {
    --role-color: #334155;
    --role-color-dark: #0f172a;
    --role-color-rgb: 51, 65, 85;
    --role-hero-1: #0f172a;
    --role-hero-2: #334155;
    --role-hero-3: #64748b;
    --role-logo: url("../img/admin.png");
}

body[data-page="notifications"] *,
body[data-page="notifications"] *::before,
body[data-page="notifications"] *::after {
    box-sizing: border-box;
}

body[data-page="notifications"] .container.page-with-nav {
    width: min(100% - 32px, 1180px);
    margin: 0 auto;
    padding: 18px 4px 92px;
}

/* ---------- Role hero ---------- */
body[data-page="notifications"] .notifications-premium-hero {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 18px;
    min-height: 154px;
    padding: 24px 22px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 20px;
    color: #fff;
    background:
        radial-gradient(circle at 13% 8%, rgba(255,255,255,.18), transparent 25%),
        radial-gradient(circle at 90% 108%, rgba(255,255,255,.13), transparent 36%),
        linear-gradient(120deg, rgba(255,255,255,.055), transparent 43%),
        linear-gradient(
            135deg,
            var(--role-hero-1) 0%,
            var(--role-hero-2) 52%,
            var(--role-hero-3) 100%
        );
    box-shadow:
        0 18px 42px rgba(var(--role-color-rgb), .23),
        inset 0 1px 0 rgba(255,255,255,.14),
        inset 0 -1px 0 rgba(15,23,42,.22);
}

body[data-page="notifications"] .notifications-premium-hero::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
    background-size: 28px 28px;
    mask-image: linear-gradient(90deg, rgba(0,0,0,.75), transparent 78%);
    pointer-events: none;
}

body[data-page="notifications"] .notifications-premium-hero::after {
    content: "";
    position: absolute;
    right: -70px;
    top: -112px;
    width: 290px;
    height: 290px;
    border: 42px solid rgba(255,255,255,.035);
    border-radius: 50%;
    box-shadow:
        0 0 0 1px rgba(255,255,255,.07),
        0 0 80px rgba(var(--role-color-rgb), .20);
}

body[data-page="notifications"] .notifications-premium-hero-main {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
}

body[data-page="notifications"] .notifications-premium-icon {
    position: relative;
    display: block;
    flex: 0 0 66px;
    width: 66px;
    height: 66px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.25);
    border-radius: 20px;
    color: transparent;
    font-size: 0;
    line-height: 0;
    background:
        linear-gradient(145deg, rgba(255,255,255,.20), rgba(255,255,255,.07));
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.20),
        0 13px 28px rgba(15,23,42,.24);
}

body[data-page="notifications"] .notifications-premium-icon::before {
    content: "";
    position: absolute;
    inset: 7px;
    border-radius: 15px;
    background-image: var(--role-logo);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    filter: drop-shadow(0 5px 9px rgba(15,23,42,.22));
}

body[data-page="notifications"] .notifications-premium-icon::after {
    content: "";
    position: absolute;
    z-index: 2;
    right: 6px;
    bottom: 6px;
    width: 7px;
    height: 7px;
    border: 2px solid rgba(255,255,255,.95);
    border-radius: 50%;
    background: #86efac;
    box-shadow:
        0 0 0 3px rgba(134,239,172,.13),
        0 0 12px rgba(134,239,172,.55);
}

body[data-page="notifications"] .notifications-premium-hero .page-subtitle {
    margin: 0 0 3px;
    color: rgba(255,255,255,.68);
    font-size: .7rem;
    font-weight: 850;
    letter-spacing: .11em;
    text-transform: uppercase;
}

body[data-page="notifications"] .notifications-premium-hero h1 {
    margin: 0;
    color: #fff;
    font-size: clamp(1.4rem, 2.2vw, 2rem);
    line-height: 1.18;
    letter-spacing: -.026em;
    text-shadow: 0 2px 14px rgba(15,23,42,.22);
}

body[data-page="notifications"] .notifications-premium-desc {
    max-width: 720px;
    margin: 6px 0 0;
    color: rgba(255,255,255,.72);
    font-size: .78rem;
    line-height: 1.52;
}

body[data-page="notifications"] .notifications-premium-hero .section-count {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 27px;
    margin-top: 10px;
    padding: 4px 9px;
    border: 1px solid rgba(255,255,255,.20);
    border-radius: 999px;
    color: #fff;
    background: rgba(255,255,255,.12);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
    font-size: .68rem;
    font-weight: 850;
}

body[data-page="notifications"] .notifications-premium-back-btn {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 7px 13px;
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 11px;
    color: #fff;
    background:
        linear-gradient(180deg, rgba(255,255,255,.20), rgba(255,255,255,.09));
    box-shadow:
        0 8px 18px rgba(15,23,42,.14),
        inset 0 1px 0 rgba(255,255,255,.13);
    font-size: .74rem;
    font-weight: 850;
    text-decoration: none;
}

/* ---------- Shared content cards ---------- */
body[data-page="notifications"] .notifications-premium-control-card,
body[data-page="notifications"] .notifications-premium-batch-card,
body[data-page="notifications"] .notifications-premium-list-card {
    position: relative;
    margin-top: 14px;
    padding: 18px;
    overflow: hidden;
    border: 1px solid rgba(var(--role-color-rgb), .16);
    border-radius: 16px;
    background:
        radial-gradient(circle at 100% 0%, rgba(var(--role-color-rgb), .055), transparent 220px),
        linear-gradient(145deg, #fff, #f8fafc);
    box-shadow:
        0 10px 28px rgba(15,23,42,.06),
        inset 0 1px 0 rgba(255,255,255,.95);
}

body[data-page="notifications"] .notifications-premium-control-card::before,
body[data-page="notifications"] .notifications-premium-list-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background:
        linear-gradient(180deg, var(--role-color), var(--role-color-dark));
}

body[data-page="notifications"] .section-title-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 13px;
}

body[data-page="notifications"] .section-title-row h3 {
    margin: 0;
    color: #172033;
    font-size: 1rem;
    line-height: 1.3;
    letter-spacing: -.015em;
}

body[data-page="notifications"] .section-title-row h3::before {
    content: "";
    display: inline-block;
    width: 4px;
    height: 17px;
    margin-right: 8px;
    border-radius: 99px;
    background:
        linear-gradient(180deg, var(--role-color), var(--role-color-dark));
    box-shadow: 0 0 0 4px rgba(var(--role-color-rgb), .08);
    vertical-align: -.15em;
}

body[data-page="notifications"] .section-subtitle {
    margin: 3px 0 0;
    color: #7a879a;
    font-size: .76rem;
}

/* ---------- Search/filter form ---------- */
body[data-page="notifications"] .notifications-premium-search-form {
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

body[data-page="notifications"] .notifications-premium-search-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr;
    gap: 10px;
}

body[data-page="notifications"] .notifications-premium-search-grid label {
    display: block;
    margin-bottom: 5px;
    color: #526078;
    font-size: .7rem;
    font-weight: 800;
}

body[data-page="notifications"] .notifications-premium-search-grid select,
body[data-page="notifications"] .notifications-premium-search-grid input {
    width: 100%;
    min-height: 40px;
    padding: 8px 10px;
    border: 1px solid #d7dfe9;
    border-radius: 10px;
    color: #172033;
    background: rgba(255,255,255,.9);
    box-shadow:
        inset 0 1px 2px rgba(15,23,42,.03),
        0 3px 8px rgba(15,23,42,.025);
    font: inherit;
    font-size: .76rem;
}

body[data-page="notifications"] .notifications-premium-search-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 11px;
}

body[data-page="notifications"] .notifications-premium-search-actions button,
body[data-page="notifications"] .notifications-premium-clear-btn,
body[data-page="notifications"] .notifications-premium-batch-btn,
body[data-page="notifications"] .notifications-premium-action-form button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 6px 11px;
    border: 1px solid var(--role-color);
    border-radius: 10px;
    color: #fff;
    background:
        linear-gradient(145deg, var(--role-color), var(--role-color-dark));
    box-shadow:
        0 7px 16px rgba(var(--role-color-rgb), .20),
        inset 0 1px 0 rgba(255,255,255,.16);
    font: inherit;
    font-size: .72rem;
    font-weight: 850;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}

body[data-page="notifications"] .notifications-premium-clear-btn {
    border-color: rgba(var(--role-color-rgb), .20);
    color: var(--role-color-dark);
    background:
        linear-gradient(180deg, #fff, rgba(var(--role-color-rgb), .07));
    box-shadow:
        0 5px 12px rgba(var(--role-color-rgb), .08),
        inset 0 1px 0 #fff;
}

body[data-page="notifications"] .notifications-premium-quick-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
    margin-top: 13px;
    padding-top: 12px;
    border-top: 1px dashed #dce3eb;
}

body[data-page="notifications"] .notifications-premium-quick-row > span {
    color: #7a879a;
    font-size: .68rem;
    font-weight: 800;
}

body[data-page="notifications"] .notifications-premium-chip {
    display: inline-flex;
    align-items: center;
    min-height: 29px;
    padding: 4px 9px;
    border: 1px solid rgba(var(--role-color-rgb), .18);
    border-radius: 999px;
    color: var(--role-color-dark);
    background: rgba(var(--role-color-rgb), .065);
    font-size: .66rem;
    font-weight: 850;
    text-decoration: none;
}

body[data-page="notifications"] .notifications-premium-chip.unread {
    color: #9f1239;
    border-color: rgba(225,29,72,.17);
    background: #fff1f2;
}

body[data-page="notifications"] .notifications-premium-chip.read {
    color: #166534;
    border-color: rgba(22,101,52,.16);
    background: #f0fdf4;
}

/* ---------- Batch action cards ---------- */
body[data-page="notifications"] .notifications-premium-batch-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 15px 17px;
}

body[data-page="notifications"] .notifications-premium-batch-left {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
}

body[data-page="notifications"] .notifications-premium-batch-icon {
    display: grid;
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    place-items: center;
    border: 1px solid rgba(255,255,255,.72);
    border-radius: 11px;
    color: #fff;
    background:
        linear-gradient(145deg, var(--role-color), var(--role-color-dark));
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.16),
        0 7px 14px rgba(var(--role-color-rgb), .18);
    font-size: .8rem;
    font-weight: 900;
}

body[data-page="notifications"] .notifications-premium-batch-card h3 {
    margin: 0;
    color: #223047;
    font-size: .87rem;
}

body[data-page="notifications"] .notifications-premium-batch-card p {
    margin: 3px 0 0;
    color: #7a879a;
    font-size: .71rem;
}

/* ---------- Notification list ---------- */
body[data-page="notifications"] .notifications-premium-list {
    display: grid;
    gap: 10px;
}

body[data-page="notifications"] .notifications-premium-item {
    position: relative;
    padding: 15px 16px 14px 18px;
    overflow: hidden;
    border: 1px solid #dfe5ec;
    border-radius: 14px;
    background:
        linear-gradient(145deg, #fff, #f8fafc);
    box-shadow:
        0 7px 18px rgba(15,23,42,.045),
        inset 0 1px 0 rgba(255,255,255,.95);
}

body[data-page="notifications"] .notifications-premium-item::before {
    content: "";
    position: absolute;
    inset: 12px auto 12px 0;
    width: 4px;
    border-radius: 99px;
    background: #cbd5e1;
}

body[data-page="notifications"] .notifications-premium-item.notifications-premium-unread {
    border-color: rgba(var(--role-color-rgb), .24);
    background:
        linear-gradient(
            90deg,
            rgba(var(--role-color-rgb), .09),
            #fff 28%
        );
}

body[data-page="notifications"] .notifications-premium-item.notifications-premium-unread::before {
    background:
        linear-gradient(180deg, var(--role-color), var(--role-color-dark));
}

body[data-page="notifications"] .notifications-premium-item-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

body[data-page="notifications"] .notifications-premium-item h4 {
    margin: 0;
    color: #1d2a3c;
    font-size: .92rem;
    line-height: 1.35;
}

body[data-page="notifications"] .notifications-premium-item-top p {
    margin: 3px 0 0;
    color: #8792a3;
    font-size: .68rem;
}

body[data-page="notifications"] .notifications-premium-status-pill {
    display: inline-flex;
    flex: 0 0 auto;
    min-height: 25px;
    align-items: center;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: .64rem;
    font-weight: 850;
}

body[data-page="notifications"] .notifications-premium-unread-pill {
    color: #9f1239;
    background: #ffe4e6;
}

body[data-page="notifications"] .notifications-premium-read-pill {
    color: #166534;
    background: #dcfce7;
}

body[data-page="notifications"] .notifications-premium-body {
    margin-top: 10px;
    padding: 10px 11px;
    border: 1px solid #e3e8ef;
    border-radius: 10px;
    color: #59677b;
    background: rgba(255,255,255,.68);
    font-size: .76rem;
    line-height: 1.58;
    overflow-wrap: anywhere;
}

body[data-page="notifications"] .notifications-premium-action-form {
    display: flex;
    justify-content: flex-end;
    margin-top: 10px;
}

body[data-page="notifications"] .notifications-premium-action-form button {
    min-height: 32px;
    padding-inline: 12px;
}

/* ---------- Counts, pagination, empty ---------- */
body[data-page="notifications"] .notifications-premium-list-card .section-count {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 4px 9px;
    border: 1px solid rgba(var(--role-color-rgb), .16);
    border-radius: 999px;
    color: var(--role-color-dark);
    background: rgba(var(--role-color-rgb), .06);
    font-size: .7rem;
    font-weight: 850;
}

body[data-page="notifications"] .pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    margin-top: 15px;
}

body[data-page="notifications"] .pagination a,
body[data-page="notifications"] .pagination span {
    display: inline-grid;
    min-width: 33px;
    min-height: 33px;
    padding: 5px 8px;
    place-items: center;
    border: 1px solid #d9e0e9;
    border-radius: 9px;
    color: #526078;
    background: #fff;
    font-size: .7rem;
    font-weight: 800;
    text-decoration: none;
}

body[data-page="notifications"] .pagination a.active {
    color: #fff;
    border-color: var(--role-color);
    background:
        linear-gradient(145deg, var(--role-color), var(--role-color-dark));
}

body[data-page="notifications"] .empty-state-card {
    display: grid;
    min-height: 100px;
    place-items: center;
    padding: 20px;
    border: 1px dashed rgba(var(--role-color-rgb), .22);
    border-radius: 13px;
    color: #7a879a;
    background: rgba(var(--role-color-rgb), .035);
    font-size: .78rem;
    text-align: center;
}

/* ---------- Bottom navigation ---------- */
body[data-page="notifications"] .bottom-nav a.active {
    color: #fff;
    background:
        linear-gradient(145deg, var(--role-color), var(--role-color-dark));
    box-shadow: 0 5px 13px rgba(var(--role-color-rgb), .22);
}

/* ---------- Responsive ---------- */
@media (max-width: 800px) {
    body[data-page="notifications"] .notifications-premium-search-grid {
        grid-template-columns: 1fr 1fr;
    }

    body[data-page="notifications"] .notifications-premium-search-grid > div:first-child {
        grid-column: 1 / -1;
    }
}

@media (max-width: 700px) {
    body[data-page="notifications"] .container.page-with-nav {
        width: min(100% - 18px, 640px);
        padding: 9px 0 86px;
    }

    body[data-page="notifications"] .notifications-premium-hero {
        grid-template-columns: 1fr;
        gap: 13px;
        min-height: 0;
        padding: 18px 15px;
        border-radius: 17px;
    }

    body[data-page="notifications"] .notifications-premium-icon {
        flex-basis: 49px;
        width: 49px;
        height: 49px;
        border-radius: 14px;
    }

    body[data-page="notifications"] .notifications-premium-icon::before {
        inset: 5px;
        border-radius: 11px;
    }

    body[data-page="notifications"] .notifications-premium-back-btn {
        width: 100%;
    }

    body[data-page="notifications"] .notifications-premium-control-card,
    body[data-page="notifications"] .notifications-premium-list-card {
        padding: 14px;
        border-radius: 14px;
    }

    body[data-page="notifications"] .notifications-premium-search-grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    body[data-page="notifications"] .notifications-premium-search-grid > div:first-child {
        grid-column: auto;
    }

    body[data-page="notifications"] .notifications-premium-batch-card {
        align-items: stretch;
        flex-direction: column;
        padding: 13px;
        border-radius: 14px;
    }

    body[data-page="notifications"] .notifications-premium-batch-card form,
    body[data-page="notifications"] .notifications-premium-batch-btn {
        width: 100%;
    }

    body[data-page="notifications"] .notifications-premium-item {
        padding: 13px 12px 12px 15px;
    }

    body[data-page="notifications"] .notifications-premium-item-top {
        align-items: flex-start;
    }

    body[data-page="notifications"] .notifications-premium-action-form button {
        width: 100%;
    }
}

@media (max-width: 390px) {
    body[data-page="notifications"] .notifications-premium-search-actions {
        grid-template-columns: 1fr;
    }

    body[data-page="notifications"] .notifications-premium-item-top {
        flex-direction: column;
    }
}

@media (prefers-reduced-motion: reduce) {
    body[data-page="notifications"] *,
    body[data-page="notifications"] *::before,
    body[data-page="notifications"] *::after {
        animation: none !important;
        transition: none !important;
    }
}

/* =========================================================
   PRMS Workspace — Premium Compact Responsive UI
   Apply after global
   ========================================================= */

body[data-page="workspace"] {
    --ws-bg: #f3f5f8;
    --ws-surface: #ffffff;
    --ws-surface-soft: #f8fafc;
    --ws-surface-muted: #f1f5f9;
    --ws-text: #172033;
    --ws-text-soft: #526078;
    --ws-text-muted: #7a879a;
    --ws-line: #dde3eb;
    --ws-line-strong: #cdd5df;
    --ws-primary: #334155;
    --ws-primary-dark: #1e293b;
    --ws-accent: #64748b;
    --ws-success: #18765a;
    --ws-success-soft: #eaf7f1;
    --ws-warning: #a16207;
    --ws-warning-soft: #fff8e7;
    --ws-danger: #b42318;
    --ws-danger-soft: #fff0ee;
    --ws-info: #2f5f91;
    --ws-info-soft: #edf5fd;
    --ws-radius-xl: 20px;
    --ws-radius-lg: 16px;
    --ws-radius-md: 12px;
    --ws-radius-sm: 9px;
    --ws-shadow: 0 8px 24px rgba(15, 23, 42, 0.055);
    --ws-shadow-hover: 0 12px 30px rgba(15, 23, 42, 0.09);
    margin: 0;
    color: var(--ws-text);
    background:
        radial-gradient(circle at 100% 0%, rgba(100, 116, 139, 0.08), transparent 28rem),
        var(--ws-bg);
    font-family: Inter, "Segoe UI", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

body[data-page="workspace"] *,
body[data-page="workspace"] *::before,
body[data-page="workspace"] *::after {
    box-sizing: border-box;
}

body[data-page="workspace"] a,
body[data-page="workspace"] button {
    -webkit-tap-highlight-color: transparent;
}

body[data-page="workspace"] .container.page-with-nav {
    width: min(100% - 32px, 1320px);
    margin: 0 auto;
    padding: 18px 5px 92px;
}

/* ---------- Language switch ---------- */
body[data-page="workspace"] .login-language-switch {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 4px;
    margin: 0 0 8px;
}

body[data-page="workspace"] .login-language-switch form {
    margin: 0;
}

body[data-page="workspace"] .login-language-switch button {
    min-width: 48px;
    min-height: 32px;
    padding: 5px 11px;
    border: 1px solid var(--ws-line);
    border-radius: 999px;
    color: var(--ws-text-soft);
    background: rgba(255, 255, 255, 0.8);
    font: inherit;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    transition: 0.18s ease;
}

body[data-page="workspace"] .login-language-switch button:hover,
body[data-page="workspace"] .login-language-switch button.active {
    color: #fff;
    border-color: var(--ws-primary);
    background: var(--ws-primary);
}

/* ---------- Workspace hero ---------- */
body[data-page="workspace"] .workspace-premium-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(220px, 0.34fr);
    gap: 16px;
    align-items: center;
    min-height: 138px;
    padding: 20px 22px;
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: var(--ws-radius-xl);
    overflow: hidden;
    color: #fff;
    background:
        linear-gradient(125deg, rgba(255, 255, 255, 0.08), transparent 48%),
        linear-gradient(135deg, #263244 0%, #38465a 58%, #4b5b70 100%);
    box-shadow: 0 12px 32px rgba(30, 41, 59, 0.16);
}

body[data-page="workspace"] .workspace-premium-hero::after {
    content: "";
    position: absolute;
    right: -58px;
    top: -92px;
    width: 230px;
    height: 230px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 50%;
}

body[data-page="workspace"] .workspace-premium-hero-main {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 15px;
    min-width: 0;
}

body[data-page="workspace"] .workspace-premium-icon {
    display: grid;
    flex: 0 0 52px;
    width: 52px;
    height: 52px;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.19);
    border-radius: 15px;
    color: #fff;
    background: rgba(255, 255, 255, 0.11);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
    font-size: 1.22rem;
    font-weight: 800;
}

body[data-page="workspace"] .workspace-premium-hero .page-subtitle {
    margin: 0 0 2px;
    color: rgba(255, 255, 255, 0.68);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

body[data-page="workspace"] .workspace-premium-hero h1 {
    margin: 0;
    color: #fff;
    font-size: clamp(1.38rem, 2.2vw, 2rem);
    line-height: 1.18;
    letter-spacing: -0.025em;
}

body[data-page="workspace"] .workspace-premium-user-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
    margin-top: 8px;
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.84rem;
}

body[data-page="workspace"] .role-badge {
    display: inline-flex;
    align-items: center;
    min-height: 25px;
    padding: 3px 9px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    color: #fff;
    background: rgba(255, 255, 255, 0.12);
    font-size: 0.7rem;
    font-weight: 800;
}

body[data-page="workspace"] .role-badge.promoter { background: rgba(154, 52, 18, 0.62); }
body[data-page="workspace"] .role-badge.business { background: rgba(30, 58, 138, 0.62); }
body[data-page="workspace"] .role-badge.team-leader { background: rgba(76, 29, 149, 0.62); }
body[data-page="workspace"] .role-badge.dj { background: rgba(131, 24, 67, 0.62); }
body[data-page="workspace"] .role-badge.admin { background: rgba(15, 23, 42, 0.58); }

body[data-page="workspace"] .workspace-premium-hero-side {
    position: relative;
    z-index: 1;
    min-width: 0;
    padding: 13px 15px;
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.075);
    backdrop-filter: blur(8px);
}

body[data-page="workspace"] .workspace-premium-hero-side > span {
    display: block;
    color: rgba(255, 255, 255, 0.62);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

body[data-page="workspace"] .workspace-premium-hero-side strong {
    display: block;
    margin-top: 3px;
    color: #fff;
    font-size: 1rem;
    line-height: 1.28;
    overflow-wrap: anywhere;
}

body[data-page="workspace"] .workspace-premium-hero-side p {
    margin: 4px 0 0;
    color: rgba(255, 255, 255, 0.65);
    font-size: 0.76rem;
}

body[data-page="workspace"] .rooms-pro-action-btn.notification-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 34px;
    padding: 6px 11px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 10px;
    color: #fff;
    background: rgba(255, 255, 255, 0.12);
    font-size: 0.76rem;
    font-weight: 800;
    text-decoration: none;
    transition: 0.18s ease;
}

body[data-page="workspace"] .rooms-pro-action-btn.notification-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-1px);
}

body[data-page="workspace"] .notification-dot {
    display: inline-grid;
    min-width: 21px;
    height: 21px;
    padding: 0 5px;
    place-items: center;
    border-radius: 999px;
    color: #7f1d1d;
    background: #fee2e2;
    font-size: 0.68rem;
    font-weight: 900;
}

/* ---------- Shared sections ---------- */
body[data-page="workspace"] .workspace-important-announcement-alert,
body[data-page="workspace"] .workspace-announcement-board,
body[data-page="workspace"] .workspace-premium-section,
body[data-page="workspace"] .workspace-premium-record-section {
    margin-top: 14px;
}

body[data-page="workspace"] .workspace-announcement-board,
body[data-page="workspace"] .workspace-premium-section,
body[data-page="workspace"] .workspace-premium-record-section {
    padding: 17px;
    border: 1px solid var(--ws-line);
    border-radius: var(--ws-radius-lg);
    background: rgba(255, 255, 255, 0.92);
    box-shadow: var(--ws-shadow);
}

body[data-page="workspace"] .section-title-row,
body[data-page="workspace"] .workspace-announcement-board-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 12px;
}

body[data-page="workspace"] .section-title-row h3,
body[data-page="workspace"] .workspace-announcement-board-header h2 {
    margin: 0;
    color: var(--ws-text);
    font-size: 1rem;
    line-height: 1.3;
    letter-spacing: -0.012em;
}

body[data-page="workspace"] .section-subtitle,
body[data-page="workspace"] .workspace-announcement-board-header p {
    margin: 3px 0 0;
    color: var(--ws-text-muted);
    font-size: 0.78rem;
    line-height: 1.45;
}

body[data-page="workspace"] .workspace-announcement-eyebrow {
    display: block;
    margin-bottom: 4px;
    color: var(--ws-accent);
    font-size: 0.66rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

body[data-page="workspace"] .section-count {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    min-height: 28px;
    padding: 4px 9px;
    border: 1px solid var(--ws-line);
    border-radius: 999px;
    color: var(--ws-text-soft);
    background: var(--ws-surface-soft);
    font-size: 0.72rem;
    font-weight: 800;
}

/* ---------- Important announcements ---------- */
body[data-page="workspace"] .workspace-important-announcement-alert {
    padding: 15px;
    border: 1px solid #f3c9c3;
    border-radius: var(--ws-radius-lg);
    background: linear-gradient(180deg, #fff9f8, #fff5f3);
    box-shadow: 0 8px 24px rgba(180, 35, 24, 0.06);
}

body[data-page="workspace"] .workspace-important-announcement-alert-header {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 11px;
    align-items: center;
    margin-bottom: 11px;
}

body[data-page="workspace"] .workspace-important-announcement-alert-icon,
body[data-page="workspace"] .workspace-premium-reminder-icon {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border-radius: 10px;
    font-weight: 900;
}

body[data-page="workspace"] .workspace-important-announcement-alert-icon {
    color: var(--ws-danger);
    background: #ffe5e1;
}

body[data-page="workspace"] .workspace-important-announcement-alert h2 {
    margin: 0;
    color: #7f1d1d;
    font-size: 0.94rem;
}

body[data-page="workspace"] .workspace-important-announcement-alert-header p {
    margin: 2px 0 0;
    color: #9a4d45;
    font-size: 0.76rem;
}

body[data-page="workspace"] .workspace-important-announcement-count {
    display: grid;
    min-width: 29px;
    height: 29px;
    padding: 0 8px;
    place-items: center;
    border-radius: 999px;
    color: #fff;
    background: var(--ws-danger);
    font-size: 0.74rem;
    font-weight: 900;
}

/* ---------- Announcement board ---------- */
body[data-page="workspace"] .workspace-announcement-header-actions {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 7px;
}

body[data-page="workspace"] .workspace-announcement-list {
    display: grid;
    gap: 9px;
}

body[data-page="workspace"] .workspace-announcement-item {
    position: relative;
    padding: 13px 14px;
    border: 1px solid var(--ws-line);
    border-radius: var(--ws-radius-md);
    background: var(--ws-surface);
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

body[data-page="workspace"] .workspace-announcement-item:hover {
    border-color: var(--ws-line-strong);
    box-shadow: 0 7px 18px rgba(15, 23, 42, 0.055);
    transform: translateY(-1px);
}

body[data-page="workspace"] .workspace-announcement-item.is-unread {
    border-left: 3px solid var(--ws-info);
    background: linear-gradient(90deg, var(--ws-info-soft), #fff 20%);
}

body[data-page="workspace"] .workspace-announcement-item.is-important {
    border-left-color: var(--ws-danger);
    background: linear-gradient(90deg, var(--ws-danger-soft), #fff 20%);
}

body[data-page="workspace"] .workspace-announcement-top-row {
    display: flex;
    justify-content: space-between;
    gap: 8px;
}

body[data-page="workspace"] .workspace-announcement-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

body[data-page="workspace"] .announcement-badge {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 2px 7px;
    border-radius: 999px;
    font-size: 0.64rem;
    font-weight: 850;
    line-height: 1;
}

body[data-page="workspace"] .announcement-badge.pinned {
    color: #7c4a03;
    background: #fff2cc;
}

body[data-page="workspace"] .announcement-badge.important {
    color: #991b1b;
    background: #fee2e2;
}

body[data-page="workspace"] .announcement-badge.type {
    color: #334155;
    background: #e9eef5;
}

body[data-page="workspace"] .announcement-badge.unread {
    color: #1e4f7e;
    background: #dcecff;
}

body[data-page="workspace"] .announcement-badge.read {
    color: #16624c;
    background: #def3ea;
}

body[data-page="workspace"] .workspace-announcement-item h3 {
    margin: 8px 0 4px;
    color: var(--ws-text);
    font-size: 0.94rem;
    line-height: 1.35;
}

body[data-page="workspace"] .workspace-announcement-body {
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    color: var(--ws-text-soft);
    font-size: 0.79rem;
    line-height: 1.55;
    overflow-wrap: anywhere;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

body[data-page="workspace"] .workspace-announcement-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 10px;
    padding-top: 9px;
    border-top: 1px dashed var(--ws-line);
    color: var(--ws-text-muted);
    font-size: 0.69rem;
}

body[data-page="workspace"] .workspace-announcement-footer form {
    flex: 0 0 auto;
    margin: 0;
}

body[data-page="workspace"] .announcement-read-button,
body[data-page="workspace"] .workspace-card-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 5px 10px;
    border: 1px solid var(--ws-line-strong);
    border-radius: 9px;
    color: var(--ws-primary-dark);
    background: #fff;
    font: inherit;
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: 0.18s ease;
}

body[data-page="workspace"] .announcement-read-button:hover,
body[data-page="workspace"] .workspace-card-link:hover {
    color: #fff;
    border-color: var(--ws-primary);
    background: var(--ws-primary);
    transform: translateY(-1px);
}

/* ---------- Summary cards ---------- */
body[data-page="workspace"] .workspace-premium-summary-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 11px;
    margin-top: 14px;
}

body[data-page="workspace"] .workspace-premium-summary-card {
    min-width: 0;
    padding: 15px;
    border: 1px solid var(--ws-line);
    border-radius: var(--ws-radius-lg);
    background: rgba(255, 255, 255, 0.94);
    box-shadow: var(--ws-shadow);
}

body[data-page="workspace"] .workspace-premium-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

body[data-page="workspace"] .summary-label {
    display: block;
    color: var(--ws-text-soft);
    font-size: 0.74rem;
    font-weight: 850;
}

body[data-page="workspace"] .workspace-premium-card-hint {
    margin: 2px 0 0;
    color: var(--ws-text-muted);
    font-size: 0.68rem;
}

body[data-page="workspace"] .workspace-premium-mini-badge {
    display: inline-flex;
    min-height: 22px;
    align-items: center;
    padding: 2px 7px;
    border-radius: 999px;
    color: #40516a;
    background: #edf1f6;
    font-size: 0.62rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

body[data-page="workspace"] .workspace-premium-mode-card > strong {
    display: block;
    margin-top: 14px;
    color: var(--ws-primary-dark);
    font-size: 1.16rem;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

body[data-page="workspace"] .workspace-premium-meta-list {
    display: grid;
    gap: 4px;
    margin-top: 10px;
}

body[data-page="workspace"] .workspace-premium-meta-list p {
    margin: 0;
    color: var(--ws-text-muted);
    font-size: 0.72rem;
}

body[data-page="workspace"] .workspace-premium-meta-list span {
    color: var(--ws-text-soft);
    font-weight: 750;
}

body[data-page="workspace"] .workspace-premium-value-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 14px;
}

body[data-page="workspace"] .workspace-premium-value-icon {
    display: grid;
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    place-items: center;
    border-radius: 11px;
    color: var(--ws-primary-dark);
    background: #edf1f5;
    font-size: 0.72rem;
    font-weight: 900;
}

body[data-page="workspace"] .workspace-premium-big-value {
    min-width: 0;
    margin: 0;
    color: var(--ws-primary-dark);
    font-size: clamp(1.05rem, 1.6vw, 1.35rem);
    line-height: 1.2;
    overflow-wrap: anywhere;
}

body[data-page="workspace"] .workspace-premium-link-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 13px;
}

body[data-page="workspace"] .workspace-premium-pill-links a {
    display: inline-flex;
    align-items: center;
    min-height: 27px;
    padding: 3px 8px;
    border: 1px solid var(--ws-line);
    border-radius: 999px;
    color: var(--ws-text-soft);
    background: var(--ws-surface-soft);
    font-size: 0.67rem;
    font-weight: 800;
    text-decoration: none;
    transition: 0.18s ease;
}

body[data-page="workspace"] .workspace-premium-pill-links a:hover {
    color: #fff;
    border-color: var(--ws-primary);
    background: var(--ws-primary);
}

body[data-page="workspace"] .workspace-premium-progress-shell {
    height: 5px;
    margin-top: 13px;
    overflow: hidden;
    border-radius: 999px;
    background: #e9edf2;
}

body[data-page="workspace"] .workspace-premium-progress-bar {
    width: 58%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #718096, #334155);
}

body[data-page="workspace"] .workspace-premium-desc {
    margin: 7px 0 0;
    color: var(--ws-text-muted);
    font-size: 0.68rem;
}

/* ---------- Reminder ---------- */
body[data-page="workspace"] .workspace-premium-reminder-card {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-top: 11px;
    padding: 11px 14px;
    border: 1px solid #ead9aa;
    border-radius: var(--ws-radius-md);
    background: var(--ws-warning-soft);
}

body[data-page="workspace"] .workspace-premium-reminder-icon {
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    color: var(--ws-warning);
    background: #ffedbd;
}

body[data-page="workspace"] .workspace-premium-reminder-card h3 {
    margin: 0;
    color: #7a4d06;
    font-size: 0.82rem;
}

body[data-page="workspace"] .workspace-premium-reminder-card p {
    margin: 2px 0 0;
    color: #8c681f;
    font-size: 0.74rem;
}

/* ---------- Function cards ---------- */
body[data-page="workspace"] .workspace-premium-card-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 9px;
}

body[data-page="workspace"] .workspace-premium-action-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto auto;
    gap: 8px 11px;
    min-width: 0;
    min-height: 124px;
    padding: 13px;
    border: 1px solid var(--ws-line);
    border-radius: var(--ws-radius-md);
    background: var(--ws-surface);
    transition: 0.18s ease;
}

body[data-page="workspace"] .workspace-premium-action-card:hover {
    border-color: var(--ws-line-strong);
    box-shadow: var(--ws-shadow-hover);
    transform: translateY(-2px);
}

body[data-page="workspace"] .workspace-premium-action-icon {
    display: grid;
    grid-column: 1;
    grid-row: 1;
    width: 35px;
    height: 35px;
    place-items: center;
    border: 1px solid #dfe5ec;
    border-radius: 10px;
    color: var(--ws-primary-dark);
    background: #f2f5f8;
    font-size: 0.82rem;
    font-weight: 900;
}

body[data-page="workspace"] .workspace-premium-action-content {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
}

body[data-page="workspace"] .workspace-premium-action-content h3 {
    margin: 0;
    color: var(--ws-text);
    font-size: 0.86rem;
    line-height: 1.35;
}

body[data-page="workspace"] .workspace-premium-action-content p {
    display: -webkit-box;
    margin: 4px 0 0;
    overflow: hidden;
    color: var(--ws-text-muted);
    font-size: 0.72rem;
    line-height: 1.45;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

body[data-page="workspace"] .workspace-premium-action-card > .workspace-card-link {
    grid-column: 1 / -1;
    grid-row: 2;
    align-self: end;
    justify-self: stretch;
    min-height: 31px;
    padding: 5px 9px;
    background: var(--ws-surface-soft);
}

body[data-page="workspace"] .workspace-premium-action-card.excel-card {
    border-top: 3px solid #64748b;
}

/* ---------- Attendance record ---------- */
body[data-page="workspace"] .workspace-premium-record-section > .section-title-row {
    align-items: center;
}

body[data-page="workspace"] .workspace-record-list {
    display: grid;
    gap: 9px;
}

body[data-page="workspace"] .workspace-premium-attendance-item {
    padding: 13px;
    border: 1px solid var(--ws-line);
    border-radius: var(--ws-radius-md);
    background: var(--ws-surface);
}

body[data-page="workspace"] .attendance-top-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    padding-bottom: 9px;
    border-bottom: 1px solid var(--ws-line);
}

body[data-page="workspace"] .attendance-top-row h4 {
    margin: 0;
    color: var(--ws-text);
    font-size: 0.9rem;
}

body[data-page="workspace"] .attendance-top-row p {
    margin: 2px 0 0;
    color: var(--ws-text-muted);
    font-size: 0.7rem;
}

body[data-page="workspace"] .session-pill {
    display: inline-flex;
    flex: 0 0 auto;
    min-height: 25px;
    align-items: center;
    padding: 3px 8px;
    border-radius: 999px;
    color: #34445c;
    background: #eaf0f6;
    font-size: 0.66rem;
    font-weight: 850;
}

body[data-page="workspace"] .attendance-info-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 7px;
    margin-top: 9px;
}

body[data-page="workspace"] .attendance-info-grid > div {
    min-width: 0;
    padding: 8px 9px;
    border-radius: 9px;
    background: var(--ws-surface-soft);
}

body[data-page="workspace"] .attendance-info-grid span {
    display: block;
    color: var(--ws-text-muted);
    font-size: 0.62rem;
    line-height: 1.25;
}

body[data-page="workspace"] .attendance-info-grid strong {
    display: block;
    margin-top: 3px;
    color: var(--ws-text);
    font-size: 0.72rem;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

body[data-page="workspace"] .attendance-note,
body[data-page="workspace"] .workspace-feedback-notes .attendance-note {
    margin-top: 8px;
    padding: 8px 10px;
    border-left: 3px solid #cbd5e1;
    border-radius: 0 8px 8px 0;
    color: var(--ws-text-soft);
    background: var(--ws-surface-soft);
    font-size: 0.71rem;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

body[data-page="workspace"] .workspace-feedback-details {
    margin-top: 8px;
    border: 1px solid var(--ws-line);
    border-radius: 9px;
    background: #fbfcfd;
}

body[data-page="workspace"] .workspace-feedback-summary {
    padding: 8px 10px;
    color: var(--ws-primary-dark);
    font-size: 0.72rem;
    font-weight: 850;
    cursor: pointer;
    user-select: none;
}

body[data-page="workspace"] .workspace-feedback-details[open] .workspace-feedback-summary {
    border-bottom: 1px solid var(--ws-line);
}

body[data-page="workspace"] .workspace-feedback-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    padding: 0 9px 9px;
}

body[data-page="workspace"] .workspace-feedback-notes {
    padding: 0 9px 9px;
}

body[data-page="workspace"] .empty-state-card {
    display: grid;
    min-height: 92px;
    place-items: center;
    padding: 18px;
    border: 1px dashed var(--ws-line-strong);
    border-radius: var(--ws-radius-md);
    color: var(--ws-text-muted);
    background: var(--ws-surface-soft);
    font-size: 0.78rem;
    text-align: center;
}

/* ---------- Bottom navigation ---------- */
body[data-page="workspace"] .bottom-nav {
    position: fixed;
    z-index: 1000;
    right: 50%;
    bottom: max(10px, env(safe-area-inset-bottom));
    display: grid;
    grid-template-columns: repeat(3, minmax(82px, 1fr));
    width: min(calc(100% - 24px), 460px);
    padding: 5px;
    border: 1px solid rgba(203, 213, 225, 0.9);
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.93);
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.15);
    backdrop-filter: blur(14px);
    transform: translateX(50%);
}

body[data-page="workspace"] .bottom-nav a {
    display: flex;
    min-height: 38px;
    align-items: center;
    justify-content: center;
    padding: 6px 9px;
    border-radius: 10px;
    color: var(--ws-text-soft);
    font-size: 0.72rem;
    font-weight: 800;
    text-decoration: none;
    transition: 0.18s ease;
}

body[data-page="workspace"] .bottom-nav a:hover {
    color: var(--ws-primary-dark);
    background: var(--ws-surface-muted);
}

body[data-page="workspace"] .bottom-nav a.active {
    color: #fff;
    background: var(--ws-primary);
}

/* ---------- Keyboard focus ---------- */
body[data-page="workspace"] a:focus-visible,
body[data-page="workspace"] button:focus-visible,
body[data-page="workspace"] summary:focus-visible {
    outline: 3px solid rgba(59, 130, 246, 0.28);
    outline-offset: 2px;
}

/* ---------- Tablet ---------- */
@media (max-width: 1024px) {
    body[data-page="workspace"] .container.page-with-nav {
        width: min(100% - 26px, 960px);
        padding-top: 14px;
    }

    body[data-page="workspace"] .workspace-premium-hero {
        grid-template-columns: minmax(0, 1fr) minmax(205px, 0.42fr);
        padding: 18px;
    }

    body[data-page="workspace"] .workspace-premium-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body[data-page="workspace"] .workspace-premium-summary-card:last-child {
        grid-column: 1 / -1;
    }

    body[data-page="workspace"] .workspace-premium-card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body[data-page="workspace"] .attendance-info-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    body[data-page="workspace"] .workspace-feedback-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* ---------- Mobile ---------- */
@media (max-width: 700px) {
    body[data-page="workspace"] {
        background: var(--ws-bg);
    }

    body[data-page="workspace"] .container.page-with-nav {
        width: min(100% - 18px, 640px);
        padding: 9px 0 86px;
    }

    body[data-page="workspace"] .login-language-switch {
        margin-bottom: 6px;
    }

    body[data-page="workspace"] .login-language-switch button {
        min-width: 44px;
        min-height: 29px;
        padding: 4px 9px;
        font-size: 0.7rem;
    }

    body[data-page="workspace"] .workspace-premium-hero {
        grid-template-columns: 1fr;
        gap: 11px;
        min-height: 0;
        padding: 15px;
        border-radius: 17px;
    }

    body[data-page="workspace"] .workspace-premium-hero-main {
        gap: 11px;
    }

    body[data-page="workspace"] .workspace-premium-icon {
        flex-basis: 43px;
        width: 43px;
        height: 43px;
        border-radius: 12px;
        font-size: 1rem;
    }

    body[data-page="workspace"] .workspace-premium-hero h1 {
        font-size: 1.3rem;
    }

    body[data-page="workspace"] .workspace-premium-user-row {
        margin-top: 6px;
        font-size: 0.76rem;
    }

    body[data-page="workspace"] .workspace-premium-hero-side {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-rows: auto auto;
        align-items: center;
        gap: 1px 8px;
        padding: 10px 11px;
        border-radius: 12px;
    }

    body[data-page="workspace"] .workspace-premium-hero-side > span,
    body[data-page="workspace"] .workspace-premium-hero-side > strong,
    body[data-page="workspace"] .workspace-premium-hero-side > p {
        grid-column: 1;
    }

    body[data-page="workspace"] .workspace-premium-hero-side > strong {
        font-size: 0.88rem;
    }

    body[data-page="workspace"] .rooms-pro-action-btn.notification-btn {
        grid-column: 2;
        grid-row: 1 / span 2;
        min-height: 35px;
        margin-top: 0 !important;
        padding: 5px 9px;
        font-size: 0.69rem;
    }

    body[data-page="workspace"] .workspace-important-announcement-alert,
    body[data-page="workspace"] .workspace-announcement-board,
    body[data-page="workspace"] .workspace-premium-section,
    body[data-page="workspace"] .workspace-premium-record-section {
        margin-top: 10px;
    }

    body[data-page="workspace"] .workspace-announcement-board,
    body[data-page="workspace"] .workspace-premium-section,
    body[data-page="workspace"] .workspace-premium-record-section {
        padding: 12px;
        border-radius: 14px;
    }

    body[data-page="workspace"] .workspace-important-announcement-alert {
        padding: 12px;
        border-radius: 14px;
    }

    body[data-page="workspace"] .workspace-important-announcement-alert-header {
        grid-template-columns: auto minmax(0, 1fr) auto;
        gap: 8px;
    }

    body[data-page="workspace"] .workspace-important-announcement-alert-icon {
        width: 30px;
        height: 30px;
        border-radius: 9px;
    }

    body[data-page="workspace"] .workspace-important-announcement-alert h2 {
        font-size: 0.82rem;
    }

    body[data-page="workspace"] .workspace-important-announcement-alert-header p {
        display: -webkit-box;
        overflow: hidden;
        font-size: 0.68rem;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    body[data-page="workspace"] .workspace-announcement-board-header,
    body[data-page="workspace"] .section-title-row {
        flex-wrap: wrap;
        gap: 8px;
        margin-bottom: 9px;
    }

    body[data-page="workspace"] .workspace-announcement-board-header > div:first-child,
    body[data-page="workspace"] .section-title-row > div:first-child {
        flex: 1 1 220px;
    }

    body[data-page="workspace"] .workspace-announcement-header-actions {
        width: 100%;
        justify-content: flex-start;
    }

    body[data-page="workspace"] .workspace-announcement-header-actions .workspace-card-link {
        flex: 1 1 auto;
    }

    body[data-page="workspace"] .workspace-announcement-item {
        padding: 11px;
    }

    body[data-page="workspace"] .workspace-announcement-item h3 {
        margin-top: 7px;
        font-size: 0.84rem;
    }

    body[data-page="workspace"] .workspace-announcement-body {
        font-size: 0.73rem;
        -webkit-line-clamp: 2;
    }

    body[data-page="workspace"] .workspace-announcement-footer {
        align-items: flex-end;
        gap: 7px;
        font-size: 0.63rem;
    }

    body[data-page="workspace"] .announcement-read-button {
        min-height: 29px;
        padding: 4px 8px;
        font-size: 0.67rem;
    }

    body[data-page="workspace"] .workspace-premium-summary-grid {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        margin-top: 10px;
    }

    body[data-page="workspace"] .workspace-premium-summary-card {
        padding: 11px;
        border-radius: 13px;
    }

    body[data-page="workspace"] .workspace-premium-summary-card:last-child {
        grid-column: 1 / -1;
    }

    body[data-page="workspace"] .workspace-premium-mode-card > strong {
        margin-top: 10px;
        font-size: 0.94rem;
    }

    body[data-page="workspace"] .workspace-premium-card-hint,
    body[data-page="workspace"] .workspace-premium-desc {
        display: none;
    }

    body[data-page="workspace"] .workspace-premium-value-row {
        gap: 7px;
        margin-top: 10px;
    }

    body[data-page="workspace"] .workspace-premium-value-icon {
        flex-basis: 32px;
        width: 32px;
        height: 32px;
        border-radius: 9px;
        font-size: 0.62rem;
    }

    body[data-page="workspace"] .workspace-premium-big-value {
        font-size: 0.92rem;
    }

    body[data-page="workspace"] .workspace-premium-link-row {
        gap: 4px;
        margin-top: 9px;
    }

    body[data-page="workspace"] .workspace-premium-pill-links a {
        min-height: 24px;
        padding: 2px 6px;
        font-size: 0.6rem;
    }

    body[data-page="workspace"] .workspace-premium-reminder-card {
        gap: 8px;
        margin-top: 8px;
        padding: 9px 10px;
    }

    body[data-page="workspace"] .workspace-premium-reminder-icon {
        flex-basis: 29px;
        width: 29px;
        height: 29px;
    }

    body[data-page="workspace"] .workspace-premium-reminder-card h3 {
        font-size: 0.75rem;
    }

    body[data-page="workspace"] .workspace-premium-reminder-card p {
        display: -webkit-box;
        overflow: hidden;
        font-size: 0.68rem;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    body[data-page="workspace"] .workspace-premium-card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 7px;
    }

    body[data-page="workspace"] .workspace-premium-action-card {
        display: flex;
        flex-direction: column;
        gap: 7px;
        min-height: 132px;
        padding: 10px;
    }

    body[data-page="workspace"] .workspace-premium-action-icon {
        width: 32px;
        height: 32px;
        border-radius: 9px;
        font-size: 0.75rem;
    }

    body[data-page="workspace"] .workspace-premium-action-content {
        flex: 1 1 auto;
    }

    body[data-page="workspace"] .workspace-premium-action-content h3 {
        font-size: 0.76rem;
    }

    body[data-page="workspace"] .workspace-premium-action-content p {
        margin-top: 3px;
        font-size: 0.65rem;
        line-height: 1.38;
        -webkit-line-clamp: 2;
    }

    body[data-page="workspace"] .workspace-premium-action-card > .workspace-card-link {
        width: 100%;
        min-height: 29px;
        padding: 4px 6px;
        font-size: 0.64rem;
    }

    body[data-page="workspace"] .workspace-premium-record-section > .section-title-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
    }

    body[data-page="workspace"] .workspace-premium-record-section > .section-title-row > div:first-child {
        grid-column: 1 / -1;
    }

    body[data-page="workspace"] .workspace-premium-record-section > .section-title-row .section-count {
        grid-column: 1;
        justify-self: start;
    }

    body[data-page="workspace"] .workspace-premium-record-section > .section-title-row .workspace-card-link {
        grid-column: 2;
        justify-self: end;
    }

    body[data-page="workspace"] .workspace-premium-attendance-item {
        padding: 10px;
    }

    body[data-page="workspace"] .attendance-info-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 5px;
        margin-top: 7px;
    }

    body[data-page="workspace"] .attendance-info-grid > div {
        padding: 7px 8px;
    }

    body[data-page="workspace"] .workspace-feedback-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        padding: 0 7px 7px;
    }

    body[data-page="workspace"] .bottom-nav {
        bottom: max(7px, env(safe-area-inset-bottom));
        width: calc(100% - 18px);
        max-width: 430px;
        grid-template-columns: repeat(3, 1fr);
        padding: 4px;
        border-radius: 14px;
    }

    body[data-page="workspace"] .bottom-nav a {
        min-height: 36px;
        padding: 5px;
        font-size: 0.68rem;
    }
}

/* ---------- Very small phones ---------- */
@media (max-width: 390px) {
    body[data-page="workspace"] .container.page-with-nav {
        width: calc(100% - 14px);
    }

    body[data-page="workspace"] .workspace-premium-summary-grid,
    body[data-page="workspace"] .workspace-premium-card-grid {
        grid-template-columns: 1fr;
    }

    body[data-page="workspace"] .workspace-premium-summary-card:last-child {
        grid-column: auto;
    }

    body[data-page="workspace"] .workspace-premium-action-card {
        min-height: 0;
    }

    body[data-page="workspace"] .workspace-announcement-footer {
        align-items: stretch;
        flex-direction: column;
    }

    body[data-page="workspace"] .workspace-announcement-footer form,
    body[data-page="workspace"] .announcement-read-button {
        width: 100%;
    }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    body[data-page="workspace"] *,
    body[data-page="workspace"] *::before,
    body[data-page="workspace"] *::after {
        scroll-behavior: auto !important;
        transition: none !important;
        animation: none !important;
    }
}

/* =========================================================
   Premium Visual Enhancement Layer
   Keeps the current compact layout; improves hierarchy only.
   ========================================================= */

body[data-page="workspace"] {
    --ws-gold: #b58a4a;
    --ws-gold-soft: #f8f2e8;
    --ws-navy: #24344a;
    --ws-blue: #426b9a;
    --ws-teal: #24766f;
}

/* Refined section headings */
body[data-page="workspace"] .workspace-premium-section,
body[data-page="workspace"] .workspace-premium-record-section {
    position: relative;
}

body[data-page="workspace"] .section-title-row h3,
body[data-page="workspace"] .workspace-announcement-board-header h2 {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 9px;
}

body[data-page="workspace"] .section-title-row h3::before,
body[data-page="workspace"] .workspace-announcement-board-header h2::before {
    content: "";
    width: 4px;
    height: 17px;
    flex: 0 0 4px;
    border-radius: 99px;
    background: linear-gradient(180deg, var(--ws-gold), #8b6b39);
    box-shadow: 0 0 0 4px rgba(181, 138, 74, 0.09);
}

/* Announcement board: premium editorial card */
body[data-page="workspace"] .workspace-announcement-board {
    position: relative;
    overflow: hidden;
    border-color: rgba(181, 138, 74, 0.28);
    background:
        linear-gradient(145deg, rgba(248, 242, 232, 0.65), rgba(255,255,255,0) 34%),
        var(--ws-surface);
    box-shadow: 0 10px 30px rgba(31, 41, 55, 0.07);
}

body[data-page="workspace"] .workspace-announcement-board::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: linear-gradient(180deg, var(--ws-gold), #735b35);
}

body[data-page="workspace"] .workspace-announcement-board::after {
    content: "";
    position: absolute;
    top: -70px;
    right: -55px;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(181,138,74,.10), transparent 68%);
    pointer-events: none;
}

body[data-page="workspace"] .workspace-announcement-eyebrow {
    color: #8a6735;
    letter-spacing: .14em;
}

body[data-page="workspace"] .workspace-announcement-item {
    position: relative;
    border-color: #e4e8ee;
    background: linear-gradient(180deg, #ffffff, #fbfcfe);
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.035);
}

body[data-page="workspace"] .workspace-announcement-item::before {
    content: "";
    position: absolute;
    inset: 10px auto 10px 0;
    width: 3px;
    border-radius: 99px;
    background: #cbd5e1;
}

body[data-page="workspace"] .workspace-announcement-item.is-unread::before {
    background: var(--ws-blue);
}

body[data-page="workspace"] .workspace-announcement-item.is-important::before {
    background: linear-gradient(180deg, #c78a35, #a34f2f);
}

body[data-page="workspace"] .workspace-announcement-item:hover {
    border-color: #ced7e3;
    box-shadow: 0 9px 24px rgba(15, 23, 42, 0.07);
    transform: translateY(-1px);
}

body[data-page="workspace"] .workspace-announcement-item h3 {
    letter-spacing: -.012em;
}

body[data-page="workspace"] .announcement-badge {
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.45);
}

body[data-page="workspace"] .announcement-read-button {
    box-shadow: 0 4px 10px rgba(51, 65, 85, 0.12);
}

/* Important unread alert */
body[data-page="workspace"] .workspace-important-announcement-alert {
    position: relative;
    overflow: hidden;
    border-color: rgba(180, 83, 9, .28);
    background:
        linear-gradient(135deg, rgba(255,247,237,.95), rgba(255,255,255,.96));
    box-shadow: 0 9px 24px rgba(154, 52, 18, 0.08);
}

body[data-page="workspace"] .workspace-important-announcement-alert::after {
    content: "";
    position: absolute;
    width: 130px;
    height: 130px;
    right: -55px;
    top: -62px;
    border-radius: 50%;
    border: 20px solid rgba(180, 83, 9, .045);
}

body[data-page="workspace"] .workspace-important-announcement-alert-icon {
    box-shadow: 0 6px 15px rgba(180, 83, 9, .18);
}

/* Summary cards */
body[data-page="workspace"] .workspace-premium-summary-card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border-color: rgba(203, 213, 225, .92);
    background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
    box-shadow: 0 8px 22px rgba(15, 23, 42, .055);
}

body[data-page="workspace"] .workspace-premium-summary-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: linear-gradient(90deg, #64748b, #cbd5e1);
}

body[data-page="workspace"] .workspace-premium-summary-card::after {
    content: "";
    position: absolute;
    z-index: -1;
    right: -42px;
    bottom: -58px;
    width: 145px;
    height: 145px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(100,116,139,.10), transparent 70%);
}

body[data-page="workspace"] .workspace-premium-mode-card::before {
    background: linear-gradient(90deg, #475569, #94a3b8);
}

body[data-page="workspace"] .workspace-premium-money-card {
    border-color: rgba(181, 138, 74, .32);
    background:
        linear-gradient(145deg, rgba(248,242,232,.82), rgba(255,255,255,.98) 58%);
}

body[data-page="workspace"] .workspace-premium-money-card::before {
    background: linear-gradient(90deg, #8b6b39, #d8b46f);
}

body[data-page="workspace"] .workspace-premium-money-card::after {
    background: radial-gradient(circle, rgba(181,138,74,.16), transparent 70%);
}

body[data-page="workspace"] .workspace-premium-time-card {
    border-color: rgba(66, 107, 154, .27);
    background:
        linear-gradient(145deg, rgba(237,245,253,.88), rgba(255,255,255,.98) 58%);
}

body[data-page="workspace"] .workspace-premium-time-card::before {
    background: linear-gradient(90deg, #315e8d, #78a3c8);
}

body[data-page="workspace"] .workspace-premium-time-card::after {
    background: radial-gradient(circle, rgba(66,107,154,.13), transparent 70%);
}

body[data-page="workspace"] .workspace-premium-summary-card:hover {
    border-color: #c2ccd8;
    box-shadow: 0 13px 30px rgba(15, 23, 42, .085);
    transform: translateY(-2px);
}

body[data-page="workspace"] .workspace-premium-card-top {
    position: relative;
    z-index: 1;
}

body[data-page="workspace"] .summary-label {
    color: #46546a;
    letter-spacing: .025em;
}

body[data-page="workspace"] .workspace-premium-mini-badge {
    border: 1px solid rgba(100, 116, 139, .16);
    background: rgba(255,255,255,.78);
    box-shadow: 0 3px 8px rgba(15,23,42,.04);
}

body[data-page="workspace"] .workspace-premium-money-card .workspace-premium-mini-badge {
    color: #7a5a28;
    border-color: rgba(181,138,74,.22);
    background: rgba(255,250,240,.9);
}

body[data-page="workspace"] .workspace-premium-time-card .workspace-premium-mini-badge {
    color: #315e8d;
    border-color: rgba(66,107,154,.18);
    background: rgba(242,248,255,.9);
}

body[data-page="workspace"] .workspace-premium-value-icon {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.75);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.65),
        0 7px 16px rgba(15,23,42,.10);
}

body[data-page="workspace"] .workspace-premium-money-card .workspace-premium-value-icon {
    color: #fff;
    background: linear-gradient(145deg, #9d7941, #6f542e);
}

body[data-page="workspace"] .workspace-premium-time-card .workspace-premium-value-icon {
    color: #fff;
    background: linear-gradient(145deg, #4d79a7, #294f78);
}

body[data-page="workspace"] .workspace-premium-big-value strong {
    font-variant-numeric: tabular-nums;
    letter-spacing: -.035em;
}

body[data-page="workspace"] .workspace-premium-money-card .workspace-premium-big-value strong {
    color: #5f4727;
}

body[data-page="workspace"] .workspace-premium-time-card .workspace-premium-big-value strong {
    color: #264f79;
}

body[data-page="workspace"] .workspace-premium-pill-links a {
    position: relative;
    border-color: rgba(148,163,184,.28);
    background: rgba(255,255,255,.72);
    box-shadow: 0 3px 8px rgba(15,23,42,.035);
}

body[data-page="workspace"] .workspace-premium-pill-links a:hover {
    color: var(--ws-primary-dark);
    border-color: #b7c2cf;
    background: #fff;
    box-shadow: 0 6px 13px rgba(15,23,42,.07);
}

body[data-page="workspace"] .workspace-premium-progress-shell {
    padding: 2px;
    border: 1px solid rgba(66,107,154,.12);
    background: rgba(255,255,255,.72);
}

body[data-page="workspace"] .workspace-premium-progress-bar {
    background: linear-gradient(90deg, #315e8d, #79a7ce);
    box-shadow: 0 0 12px rgba(66,107,154,.22);
}

/* Reminder card */
body[data-page="workspace"] .workspace-premium-reminder-card {
    position: relative;
    overflow: hidden;
    border-color: rgba(181,138,74,.22);
    background: linear-gradient(100deg, #fffdf8, #fff 65%);
}

body[data-page="workspace"] .workspace-premium-reminder-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: var(--ws-gold);
}

body[data-page="workspace"] .workspace-premium-reminder-icon {
    color: #fff;
    background: linear-gradient(145deg, #b88b46, #806031);
    box-shadow: 0 6px 14px rgba(128,96,49,.17);
}

/* Common function / management cards */
body[data-page="workspace"] .workspace-premium-action-card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border-color: #dde3ea;
    background: linear-gradient(145deg, #fff 0%, #fafbfd 100%);
    box-shadow: 0 5px 15px rgba(15,23,42,.035);
}

body[data-page="workspace"] .workspace-premium-action-card::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0 auto 0 0;
    width: 3px;
    background: linear-gradient(180deg, #64748b, #94a3b8);
    opacity: .72;
    transition: width .2s ease, opacity .2s ease;
}

body[data-page="workspace"] .workspace-premium-action-card::after {
    content: "";
    position: absolute;
    z-index: -1;
    right: -42px;
    top: -48px;
    width: 105px;
    height: 105px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(100,116,139,.085), transparent 70%);
}

body[data-page="workspace"] .workspace-premium-action-card:hover::before {
    width: 5px;
    opacity: 1;
}

body[data-page="workspace"] .workspace-premium-action-card:hover {
    border-color: #c7d0db;
    background: #fff;
    box-shadow: 0 12px 27px rgba(15,23,42,.08);
}

body[data-page="workspace"] .workspace-premium-action-icon {
    border: 1px solid rgba(255,255,255,.72);
    color: #fff;
    background: linear-gradient(145deg, #53657a, #2f3d50);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.16),
        0 7px 14px rgba(31,41,55,.13);
}

body[data-page="workspace"] .workspace-premium-action-card:nth-child(3n + 2) .workspace-premium-action-icon {
    background: linear-gradient(145deg, #526f8e, #314c69);
}

body[data-page="workspace"] .workspace-premium-action-card:nth-child(3n + 3) .workspace-premium-action-icon {
    background: linear-gradient(145deg, #58716e, #324e4b);
}

body[data-page="workspace"] .workspace-premium-action-content h3 {
    color: #243247;
    letter-spacing: -.012em;
}

body[data-page="workspace"] .workspace-premium-action-card > .workspace-card-link {
    border: 1px solid rgba(100,116,139,.17);
    background: rgba(248,250,252,.9);
    box-shadow: 0 3px 8px rgba(15,23,42,.035);
}

body[data-page="workspace"] .workspace-premium-action-card > .workspace-card-link::after {
    content: "›";
    margin-left: 4px;
    font-size: 1rem;
    line-height: 1;
    transition: transform .18s ease;
}

body[data-page="workspace"] .workspace-premium-action-card > .workspace-card-link:hover::after {
    transform: translateX(2px);
}

body[data-page="workspace"] .workspace-premium-action-card.excel-card::before {
    background: linear-gradient(180deg, #24766f, #65a59e);
}

body[data-page="workspace"] .workspace-premium-action-card.excel-card .workspace-premium-action-icon {
    background: linear-gradient(145deg, #33867e, #1f5b55);
}

/* Attendance records */
body[data-page="workspace"] .workspace-premium-attendance-item {
    position: relative;
    overflow: hidden;
    border-color: #dde4ec;
    background: linear-gradient(180deg, #fff, #fbfcfd);
}

body[data-page="workspace"] .workspace-premium-attendance-item::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: #64748b;
}

body[data-page="workspace"] .session-pill {
    border: 1px solid rgba(66,107,154,.15);
    color: #315e8d;
    background: #f1f7fd;
}

/* Mobile keeps the decoration restrained */
@media (max-width: 640px) {
    body[data-page="workspace"] .workspace-premium-summary-card::after,
    body[data-page="workspace"] .workspace-premium-action-card::after,
    body[data-page="workspace"] .workspace-announcement-board::after {
        transform: scale(.78);
        transform-origin: top right;
    }

    body[data-page="workspace"] .workspace-premium-summary-card:hover,
    body[data-page="workspace"] .workspace-premium-action-card:hover,
    body[data-page="workspace"] .workspace-announcement-item:hover {
        transform: none;
    }

    body[data-page="workspace"] .workspace-premium-action-icon,
    body[data-page="workspace"] .workspace-premium-value-icon {
        box-shadow: 0 4px 10px rgba(31,41,55,.11);
    }
}

@media (prefers-reduced-motion: reduce) {
    body[data-page="workspace"] .workspace-premium-summary-card,
    body[data-page="workspace"] .workspace-premium-action-card,
    body[data-page="workspace"] .workspace-announcement-item,
    body[data-page="workspace"] .workspace-card-link::after {
        transition: none !important;
    }
}

/* =========================================================
   Workspace Luxury V3 — visual refinement overrides
   Keeps the existing layout and spacing model.
   ========================================================= */

body[data-page="workspace"] .container.page-with-nav {
    position: relative;
}

/* Visually place the existing language switch inside the hero */
body[data-page="workspace"] .login-language-switch {
    position: absolute;
    z-index: 20;
    top: 30px;
    right: 16px;
    gap: 2px;
    margin: 0;
    padding: 3px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.24);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08),
                0 8px 20px rgba(15, 23, 42, 0.12);
    backdrop-filter: blur(12px);
}

body[data-page="workspace"] .login-language-switch button {
    min-width: 42px;
    min-height: 27px;
    padding: 3px 9px;
    border: 0;
    border-radius: 999px;
    color: rgba(255, 255, 255, 0.7);
    background: transparent;
    box-shadow: none;
    font-size: 0.7rem;
}

body[data-page="workspace"] .login-language-switch button:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
}

body[data-page="workspace"] .login-language-switch button.active {
    color: #152033;
    background: linear-gradient(180deg, #ffffff, #e9eef5);
    box-shadow: 0 3px 9px rgba(15, 23, 42, 0.18),
                inset 0 1px 0 #fff;
}

/* More refined premium hero */
body[data-page="workspace"] .workspace-premium-hero {
    isolation: isolate;
    min-height: 154px;
    padding: 24px 22px;
    border-color: rgba(255, 255, 255, 0.2);
    background:
        radial-gradient(circle at 14% 10%, rgba(255, 255, 255, 0.14), transparent 24%),
        radial-gradient(circle at 86% 110%, rgba(148, 163, 184, 0.25), transparent 35%),
        linear-gradient(120deg, rgba(255,255,255,.055), transparent 42%),
        linear-gradient(135deg, #182333 0%, #29374a 47%, #43536a 100%);
    box-shadow:
        0 18px 42px rgba(15, 23, 42, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        inset 0 -1px 0 rgba(15, 23, 42, 0.2);
}

body[data-page="workspace"] .workspace-premium-hero::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
    background-size: 28px 28px;
    mask-image: linear-gradient(90deg, rgba(0,0,0,.75), transparent 78%);
    pointer-events: none;
}

body[data-page="workspace"] .workspace-premium-hero::after {
    right: -70px;
    top: -112px;
    width: 290px;
    height: 290px;
    border: 42px solid rgba(255, 255, 255, 0.025);
    box-shadow: 0 0 0 1px rgba(255,255,255,.055);
}

body[data-page="workspace"] .workspace-premium-icon {
    position: relative;
    flex-basis: 58px;
    width: 58px;
    height: 58px;
    border-color: rgba(255, 255, 255, 0.22);
    border-radius: 18px;
    background:
        linear-gradient(145deg, rgba(255,255,255,.18), rgba(255,255,255,.055));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        0 12px 28px rgba(15, 23, 42, 0.22);
}

body[data-page="workspace"] .workspace-premium-icon::after {
    content: "";
    position: absolute;
    right: 7px;
    bottom: 7px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #86efac;
    box-shadow: 0 0 0 3px rgba(134, 239, 172, 0.13),
                0 0 12px rgba(134, 239, 172, 0.55);
}

body[data-page="workspace"] .workspace-premium-hero h1 {
    text-shadow: 0 2px 14px rgba(15, 23, 42, 0.22);
}

body[data-page="workspace"] .workspace-premium-hero-side {
    margin-top: 28px;
    padding: 14px 15px;
    border-color: rgba(255, 255, 255, 0.16);
    background:
        linear-gradient(145deg, rgba(255,255,255,.115), rgba(255,255,255,.045));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.1),
                0 12px 24px rgba(15,23,42,.12);
}

body[data-page="workspace"] .workspace-premium-hero-side strong::before {
    content: "";
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-right: 7px;
    border-radius: 50%;
    background: #86efac;
    box-shadow: 0 0 0 4px rgba(134,239,172,.1);
    vertical-align: 0.08em;
}

/* Premium interactive buttons */
body[data-page="workspace"] .workspace-card-link,
body[data-page="workspace"] .rooms-pro-action-btn.notification-btn,
body[data-page="workspace"] .announcement-read-button {
    position: relative;
    overflow: hidden;
    box-shadow: 0 7px 16px rgba(15, 23, 42, 0.08),
                inset 0 1px 0 rgba(255,255,255,.7);
}

body[data-page="workspace"] .workspace-card-link {
    border-color: #d8e0ea;
    background: linear-gradient(180deg, #ffffff 0%, #f3f6fa 100%);
}

body[data-page="workspace"] .workspace-card-link::before,
body[data-page="workspace"] .announcement-read-button::before {
    content: "";
    position: absolute;
    top: 0;
    left: -70%;
    width: 48%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.75), transparent);
    transform: skewX(-18deg);
    transition: left .45s ease;
    pointer-events: none;
}

body[data-page="workspace"] .workspace-card-link:hover::before,
body[data-page="workspace"] .announcement-read-button:hover::before {
    left: 125%;
}

body[data-page="workspace"] .workspace-premium-action-card > .workspace-card-link {
    min-height: 35px;
    padding-right: 37px;
}

body[data-page="workspace"] .workspace-premium-action-card > .workspace-card-link::after {
    content: "→";
    position: absolute;
    right: 8px;
    top: 50%;
    display: grid;
    width: 22px;
    height: 22px;
    place-items: center;
    border-radius: 7px;
    color: #fff;
    background: linear-gradient(145deg, #475569, #273549);
    box-shadow: 0 4px 10px rgba(30,41,59,.2);
    transform: translateY(-50%);
}

body[data-page="workspace"] .workspace-premium-action-card > .workspace-card-link:hover {
    color: #172033;
    border-color: #bac6d5;
    background: #fff;
    transform: translateY(-1px);
}

body[data-page="workspace"] .rooms-pro-action-btn.notification-btn {
    background: linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.08));
}

/* Real progress-track appearance for total duration card */
body[data-page="workspace"] .workspace-premium-progress-shell {
    position: relative;
    height: 10px;
    padding: 2px;
    overflow: hidden;
    border: 1px solid #d7e0eb;
    border-radius: 999px;
    background:
        repeating-linear-gradient(
            90deg,
            #eef2f7 0,
            #eef2f7 calc(12.5% - 1px),
            #dfe6ef calc(12.5% - 1px),
            #dfe6ef 12.5%
        );
    box-shadow: inset 0 2px 4px rgba(15,23,42,.06),
                0 1px 0 #fff;
}

body[data-page="workspace"] .workspace-premium-progress-bar {
    position: relative;
    width: 68%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #315f91 0%, #4f7fb0 56%, #78a2ca 100%);
    box-shadow: 0 2px 8px rgba(47,95,145,.28),
                inset 0 1px 0 rgba(255,255,255,.35);
    overflow: hidden;
}

body[data-page="workspace"] .workspace-premium-progress-bar::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, transparent 20%, rgba(255,255,255,.42) 48%, transparent 72%);
    transform: translateX(-120%);
    animation: ws-progress-shine 3.2s ease-in-out infinite;
}

@keyframes ws-progress-shine {
    0%, 48% { transform: translateX(-120%); }
    78%, 100% { transform: translateX(140%); }
}

body[data-page="workspace"] .workspace-premium-time-card .workspace-premium-desc {
    display: flex;
    align-items: center;
    gap: 6px;
}

body[data-page="workspace"] .workspace-premium-time-card .workspace-premium-desc::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #4f7fb0;
    box-shadow: 0 0 0 3px rgba(79,127,176,.11);
}

/* More designed attendance records */
body[data-page="workspace"] .workspace-premium-record-section {
    background:
        linear-gradient(180deg, rgba(248,250,252,.95), rgba(255,255,255,.98));
}

body[data-page="workspace"] .workspace-premium-attendance-item {
    position: relative;
    padding: 0;
    overflow: hidden;
    border: 1px solid #dbe3ed;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 7px 18px rgba(15,23,42,.055),
                inset 0 1px 0 #fff;
}

body[data-page="workspace"] .workspace-premium-attendance-item::before {
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    border-radius: 0;
    background: linear-gradient(180deg, #4f6f94, #8ca5bf);
}

body[data-page="workspace"] .workspace-premium-attendance-item .attendance-top-row {
    position: relative;
    padding: 13px 15px 11px 18px;
    border-bottom: 1px solid #e5eaf1;
    background:
        linear-gradient(90deg, rgba(237,244,251,.92), rgba(248,250,252,.72) 58%, #fff);
}

body[data-page="workspace"] .workspace-premium-attendance-item .attendance-top-row::after {
    content: "";
    position: absolute;
    right: 14px;
    bottom: -1px;
    width: 44px;
    height: 2px;
    border-radius: 999px;
    background: #7793b1;
}

body[data-page="workspace"] .workspace-premium-attendance-item .attendance-top-row h4 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    color: #172033;
    font-size: .95rem;
}

body[data-page="workspace"] .workspace-premium-attendance-item .attendance-top-row h4::before {
    content: "";
    width: 9px;
    height: 9px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: #4f7a68;
    box-shadow: 0 0 0 3px rgba(79,122,104,.14);
}

body[data-page="workspace"] .workspace-premium-attendance-item .attendance-top-row p {
    margin: 4px 0 0 17px;
    color: #69768a;
}

body[data-page="workspace"] .workspace-premium-attendance-item .session-pill {
    border: 1px solid #ccd7e4;
    color: #3b526d;
    background: linear-gradient(180deg, #fff, #edf3f8);
    box-shadow: 0 3px 8px rgba(15,23,42,.06);
}

body[data-page="workspace"] .workspace-premium-attendance-item .attendance-info-grid {
    gap: 0;
    padding: 10px 13px 13px 17px;
    border: 0;
    background: #fff;
}

body[data-page="workspace"] .workspace-premium-attendance-item .attendance-info-grid > div {
    position: relative;
    min-width: 0;
    padding: 8px 10px;
    border-right: 1px dashed #dfe5ed;
}

body[data-page="workspace"] .workspace-premium-attendance-item .attendance-info-grid > div:last-child {
    border-right: 0;
}

body[data-page="workspace"] .workspace-premium-attendance-item .attendance-info-grid span {
    display: block;
    margin-bottom: 3px;
    color: #8792a3;
    font-size: .67rem;
    font-weight: 750;
    letter-spacing: .025em;
}

body[data-page="workspace"] .workspace-premium-attendance-item .attendance-info-grid strong {
    color: #27364a;
    font-size: .79rem;
}

body[data-page="workspace"] .workspace-premium-attendance-item .attendance-note,
body[data-page="workspace"] .workspace-premium-attendance-item .workspace-feedback-details {
    margin-right: 13px;
    margin-left: 17px;
}

body[data-page="workspace"] .workspace-feedback-summary {
    border: 1px solid #dce4ed;
    background: linear-gradient(180deg, #fbfcfe, #f3f6fa);
    box-shadow: inset 0 1px 0 #fff;
}

@media (max-width: 700px) {
    body[data-page="workspace"] .login-language-switch {
        top: 27px;
        right: 11px;
    }

    body[data-page="workspace"] .workspace-premium-hero {
        padding-top: 30px;
    }

    body[data-page="workspace"] .workspace-premium-hero-side {
        margin-top: 0;
    }

    body[data-page="workspace"] .workspace-premium-attendance-item .attendance-info-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        padding: 8px 10px 11px 14px;
    }

    body[data-page="workspace"] .workspace-premium-attendance-item .attendance-info-grid > div {
        border-right: 0;
        border-bottom: 1px dashed #e2e7ee;
    }

    body[data-page="workspace"] .workspace-premium-attendance-item .attendance-info-grid > div:nth-last-child(-n + 2) {
        border-bottom: 0;
    }

    body[data-page="workspace"] .workspace-premium-attendance-item .attendance-top-row {
        padding-left: 15px;
    }

    body[data-page="workspace"] .workspace-premium-attendance-item .attendance-note,
    body[data-page="workspace"] .workspace-premium-attendance-item .workspace-feedback-details {
        margin-right: 10px;
        margin-left: 14px;
    }
}

@media (max-width: 390px) {
    body[data-page="workspace"] .login-language-switch button {
        min-width: 37px;
        padding-inline: 7px;
    }

    body[data-page="workspace"] .workspace-premium-hero {
        padding-top: 30px;
    }
}

@media (prefers-reduced-motion: reduce) {
    body[data-page="workspace"] .workspace-premium-progress-bar::after {
        animation: none;
    }
}


/* =========================================================
   Workspace Final Refinement
   Based on current global
   - Remove button arrows
   - Improve announcement board
   - Add slightly more breathing space
   - Enrich attendance record backgrounds
   ========================================================= */

/* ---------- Remove arrows beside action buttons ---------- */
body[data-page="workspace"] .workspace-premium-action-card > .workspace-card-link {
    padding-right: 12px;
}

body[data-page="workspace"] .workspace-premium-action-card > .workspace-card-link::after {
    content: none !important;
    display: none !important;
}

/* ---------- Slightly increase breathing space ---------- */
body[data-page="workspace"] .workspace-announcement-board,
body[data-page="workspace"] .workspace-premium-section,
body[data-page="workspace"] .workspace-premium-record-section {
    padding: 20px;
}

body[data-page="workspace"] .workspace-premium-summary-card {
    padding: 17px;
}

body[data-page="workspace"] .workspace-premium-action-card {
    padding: 15px;
    gap: 10px 12px;
}

body[data-page="workspace"] .workspace-premium-card-grid {
    gap: 11px;
}

body[data-page="workspace"] .workspace-record-list,
body[data-page="workspace"] .workspace-announcement-list {
    gap: 11px;
}

body[data-page="workspace"] .section-title-row,
body[data-page="workspace"] .workspace-announcement-board-header {
    margin-bottom: 15px;
}

/* ---------- Premium company announcement board ---------- */
body[data-page="workspace"] .workspace-announcement-board {
    border: 1px solid rgba(168, 133, 75, 0.30);
    background:
        radial-gradient(circle at 100% 0%, rgba(181, 138, 74, 0.10), transparent 250px),
        linear-gradient(145deg, #fffdf9 0%, #ffffff 48%, #f8fafc 100%);
    box-shadow:
        0 14px 34px rgba(51, 65, 85, 0.075),
        inset 0 1px 0 rgba(255,255,255,.95);
}

body[data-page="workspace"] .workspace-announcement-board::before {
    width: 5px;
    background: linear-gradient(
        180deg,
        #d3ae6c 0%,
        #9a7340 48%,
        #42566f 100%
    );
}

body[data-page="workspace"] .workspace-announcement-board-header {
    position: relative;
    z-index: 2;
    align-items: center;
    padding: 3px 2px 15px 4px;
    border-bottom: 1px solid rgba(181, 138, 74, 0.17);
}

body[data-page="workspace"] .workspace-announcement-board-header h2 {
    font-size: 1.08rem;
    letter-spacing: -0.02em;
}

body[data-page="workspace"] .workspace-announcement-board-header h2::before {
    width: 5px;
    height: 20px;
    flex-basis: 5px;
    background: linear-gradient(180deg, #cda55e, #7e6034);
    box-shadow: 0 0 0 5px rgba(181, 138, 74, 0.09);
}

body[data-page="workspace"] .workspace-announcement-board-header p {
    max-width: 700px;
    margin-top: 5px;
    line-height: 1.55;
}

body[data-page="workspace"] .workspace-announcement-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 6px;
    color: #8a6735;
}

body[data-page="workspace"] .workspace-announcement-eyebrow::before {
    content: "";
    width: 18px;
    height: 1px;
    background: linear-gradient(90deg, #b58a4a, transparent);
}

body[data-page="workspace"] .workspace-announcement-header-actions .workspace-card-link {
    min-height: 34px;
    padding: 6px 12px;
    border-color: rgba(145, 117, 73, 0.22);
    color: #5d4829;
    background:
        linear-gradient(180deg, rgba(255,255,255,.98), rgba(249,244,235,.92));
    box-shadow:
        0 5px 12px rgba(91, 70, 38, 0.07),
        inset 0 1px 0 #fff;
}

body[data-page="workspace"] .workspace-announcement-header-actions .workspace-card-link:hover {
    color: #fff;
    border-color: #8c6939;
    background: linear-gradient(145deg, #9a7641, #6f522d);
}

/* Announcement item hierarchy */
body[data-page="workspace"] .workspace-announcement-item {
    padding: 15px 16px 14px 18px;
    border: 1px solid #e1e6ed;
    border-radius: 14px;
    background:
        linear-gradient(135deg, rgba(248,250,252,.96), rgba(255,255,255,.98));
    box-shadow:
        0 6px 16px rgba(15,23,42,.04),
        inset 0 1px 0 #fff;
}

body[data-page="workspace"] .workspace-announcement-item::before {
    inset: 13px auto 13px 0;
    width: 4px;
}

body[data-page="workspace"] .workspace-announcement-item.is-unread {
    border-color: rgba(66, 107, 154, 0.22);
    background:
        linear-gradient(90deg, rgba(237,245,253,.92), rgba(255,255,255,.98) 28%);
}

body[data-page="workspace"] .workspace-announcement-item.is-important {
    border-color: rgba(181, 107, 52, 0.26);
    background:
        linear-gradient(90deg, rgba(255,246,235,.96), rgba(255,255,255,.99) 30%);
}

body[data-page="workspace"] .workspace-announcement-item h3 {
    margin-top: 10px;
    margin-bottom: 5px;
    color: #1d2a3c;
    font-size: .98rem;
}

body[data-page="workspace"] .workspace-announcement-body {
    color: #59677b;
    line-height: 1.62;
}

body[data-page="workspace"] .workspace-announcement-footer {
    margin-top: 12px;
    padding-top: 11px;
    border-top-color: #dfe5ec;
}

body[data-page="workspace"] .announcement-badge {
    min-height: 23px;
    padding: 3px 8px;
    border: 1px solid rgba(148,163,184,.12);
}

/* ---------- Better attendance section background ---------- */
body[data-page="workspace"] .workspace-premium-record-section {
    position: relative;
    overflow: hidden;
    border-color: rgba(107, 130, 158, 0.25);
    background:
        radial-gradient(circle at 100% 0%, rgba(79, 111, 148, 0.11), transparent 260px),
        radial-gradient(circle at 0% 100%, rgba(181, 138, 74, 0.08), transparent 240px),
        linear-gradient(145deg, #f3f7fb 0%, #f8fafc 46%, #eef3f8 100%);
    box-shadow:
        0 14px 34px rgba(51, 65, 85, 0.075),
        inset 0 1px 0 rgba(255,255,255,.9);
}

body[data-page="workspace"] .workspace-premium-record-section::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 3px;
    background: linear-gradient(
        90deg,
        #4c6988 0%,
        #8ba3bd 48%,
        #b58a4a 100%
    );
}

body[data-page="workspace"] .workspace-premium-record-section > * {
    position: relative;
    z-index: 1;
}

body[data-page="workspace"] .workspace-premium-record-section > .section-title-row {
    padding: 2px 2px 14px;
    border-bottom: 1px solid rgba(111, 135, 163, 0.16);
}

body[data-page="workspace"] .workspace-premium-record-section .section-count {
    border-color: rgba(79, 111, 148, .19);
    color: #3f5875;
    background: rgba(255,255,255,.74);
    box-shadow: 0 4px 10px rgba(51,65,85,.045);
}

body[data-page="workspace"] .workspace-premium-attendance-item {
    border-color: rgba(106, 130, 158, 0.24);
    background:
        linear-gradient(145deg, rgba(255,255,255,.98), rgba(242,247,251,.96));
    box-shadow:
        0 9px 22px rgba(37, 52, 71, 0.065),
        inset 0 1px 0 rgba(255,255,255,.95);
}

body[data-page="workspace"] .workspace-premium-attendance-item:nth-child(even) {
    background:
        linear-gradient(145deg, rgba(255,255,255,.99), rgba(247,244,237,.92));
}

body[data-page="workspace"] .workspace-premium-attendance-item .attendance-top-row {
    background:
        linear-gradient(
            90deg,
            rgba(226,237,247,.98) 0%,
            rgba(245,248,251,.96) 56%,
            rgba(255,255,255,.98) 100%
        );
}

body[data-page="workspace"] .workspace-premium-attendance-item:nth-child(even) .attendance-top-row {
    background:
        linear-gradient(
            90deg,
            rgba(244,236,221,.93) 0%,
            rgba(249,247,242,.96) 56%,
            rgba(255,255,255,.98) 100%
        );
}

body[data-page="workspace"] .workspace-premium-attendance-item .attendance-info-grid {
    background: transparent;
}

body[data-page="workspace"] .workspace-premium-attendance-item .attendance-info-grid > div {
    margin: 2px;
    border: 1px solid rgba(213,221,231,.72);
    border-radius: 10px;
    background: rgba(255,255,255,.63);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.78);
}

body[data-page="workspace"] .workspace-premium-attendance-item .attendance-info-grid > div:last-child {
    border-right: 1px solid rgba(213,221,231,.72);
}

body[data-page="workspace"] .workspace-feedback-details {
    background: rgba(255,255,255,.70);
}

/* ---------- Mobile refinements ---------- */
@media (max-width: 700px) {
    body[data-page="workspace"] .workspace-announcement-board,
    body[data-page="workspace"] .workspace-premium-section,
    body[data-page="workspace"] .workspace-premium-record-section {
        padding: 14px;
    }

    body[data-page="workspace"] .workspace-premium-summary-card {
        padding: 13px;
    }

    body[data-page="workspace"] .workspace-premium-action-card {
        padding: 12px;
    }

    body[data-page="workspace"] .workspace-announcement-board-header {
        padding-bottom: 12px;
    }

    body[data-page="workspace"] .workspace-announcement-item {
        padding: 12px 12px 11px 15px;
    }

    body[data-page="workspace"] .workspace-premium-attendance-item .attendance-info-grid > div {
        margin: 2px;
        border: 1px solid rgba(213,221,231,.72);
    }
}

@media (max-width: 390px) {
    body[data-page="workspace"] .workspace-announcement-board,
    body[data-page="workspace"] .workspace-premium-section,
    body[data-page="workspace"] .workspace-premium-record-section {
        padding: 12px;
    }
}



/* =========================================================
   Workspace Role Colour + Summary Upgrade
   Keeps all other approved UI styles.
   ========================================================= */

/* ---------- Role colour system ---------- */
body[data-page="workspace"] {
    --role-color: #334155;
    --role-color-dark: #1e293b;
    --role-color-rgb: 51, 65, 85;
    --role-soft: #f1f5f9;
}

body[data-page="workspace"].role-promoter {
    --role-color: #be185d;
    --role-color-dark: #9d174d;
    --role-color-rgb: 190, 24, 93;
    --role-soft: #fdf2f8;
}

body[data-page="workspace"].role-business {
    --role-color: #1e3a8a;
    --role-color-dark: #172554;
    --role-color-rgb: 30, 58, 138;
    --role-soft: #eff6ff;
}

body[data-page="workspace"].role-team-leader {
    --role-color: #4c1d95;
    --role-color-dark: #3b0764;
    --role-color-rgb: 76, 29, 149;
    --role-soft: #f5f3ff;
}

body[data-page="workspace"].role-dj {
    --role-color: #831843;
    --role-color-dark: #500724;
    --role-color-rgb: 131, 24, 67;
    --role-soft: #fdf2f8;
}

body[data-page="workspace"].role-manager,
body[data-page="workspace"].role-store-manager,
body[data-page="workspace"].role-senior-admin {
    --role-color: #334155;
    --role-color-dark: #1e293b;
    --role-color-rgb: 51, 65, 85;
    --role-soft: #f1f5f9;
}

/* ---------- All primary workspace buttons follow role ---------- */
body[data-page="workspace"] .workspace-card-link,
body[data-page="workspace"] .announcement-read-button,
body[data-page="workspace"] .rooms-pro-action-btn.notification-btn {
    border-color: rgba(var(--role-color-rgb), .24);
}

body[data-page="workspace"] .workspace-premium-action-card > .workspace-card-link,
body[data-page="workspace"] .workspace-announcement-header-actions .workspace-card-link,
body[data-page="workspace"] .workspace-premium-record-section > .section-title-row .workspace-card-link {
    color: var(--role-color-dark);
    border-color: rgba(var(--role-color-rgb), .22);
    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.98),
            rgba(var(--role-color-rgb), .065)
        );
    box-shadow:
        0 5px 12px rgba(var(--role-color-rgb), .08),
        inset 0 1px 0 rgba(255,255,255,.95);
}

body[data-page="workspace"] .workspace-card-link:hover,
body[data-page="workspace"] .announcement-read-button:hover,
body[data-page="workspace"] .workspace-announcement-header-actions .workspace-card-link:hover,
body[data-page="workspace"] .workspace-premium-action-card > .workspace-card-link:hover {
    color: #fff;
    border-color: var(--role-color);
    background:
        linear-gradient(145deg, var(--role-color), var(--role-color-dark));
    box-shadow:
        0 8px 18px rgba(var(--role-color-rgb), .22),
        inset 0 1px 0 rgba(255,255,255,.16);
}

body[data-page="workspace"] .workspace-premium-pill-links a:hover {
    color: #fff;
    border-color: var(--role-color);
    background: var(--role-color);
    box-shadow: 0 6px 14px rgba(var(--role-color-rgb), .18);
}

body[data-page="workspace"] .bottom-nav a.active {
    background:
        linear-gradient(145deg, var(--role-color), var(--role-color-dark));
    box-shadow: 0 5px 13px rgba(var(--role-color-rgb), .22);
}

/* Function icon and side accent also follow role */
body[data-page="workspace"] .workspace-premium-action-card::before {
    background:
        linear-gradient(
            180deg,
            var(--role-color),
            rgba(var(--role-color-rgb), .52)
        );
}

body[data-page="workspace"] .workspace-premium-action-icon,
body[data-page="workspace"] .workspace-premium-action-card:nth-child(3n + 2) .workspace-premium-action-icon,
body[data-page="workspace"] .workspace-premium-action-card:nth-child(3n + 3) .workspace-premium-action-icon {
    background:
        linear-gradient(145deg, var(--role-color), var(--role-color-dark));
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.18),
        0 7px 15px rgba(var(--role-color-rgb), .18);
}

/* Keep Excel settlement visually identifiable */
body[data-page="workspace"] .workspace-premium-action-card.excel-card::before {
    background: linear-gradient(180deg, #24766f, #65a59e);
}

body[data-page="workspace"] .workspace-premium-action-card.excel-card .workspace-premium-action-icon {
    background: linear-gradient(145deg, #33867e, #1f5b55);
}

/* ---------- Cleaner company announcement header ---------- */
body[data-page="workspace"] .workspace-announcement-board-header {
    position: relative;
    z-index: 2;
    align-items: center;
    margin-bottom: 14px;
    padding: 0 0 13px;
    border-bottom: 1px solid #e3e8ef;
    background: transparent;
}

body[data-page="workspace"] .workspace-announcement-board-header::before,
body[data-page="workspace"] .workspace-announcement-board-header::after {
    content: none;
    display: none;
}

body[data-page="workspace"] .workspace-announcement-board-header h2 {
    display: block;
    color: #1d2a3c;
    font-size: 1.08rem;
    letter-spacing: -.018em;
}

body[data-page="workspace"] .workspace-announcement-board-header h2::before {
    content: none;
    display: none;
}

body[data-page="workspace"] .workspace-announcement-eyebrow {
    display: inline-flex;
    align-items: center;
    min-height: 23px;
    margin-bottom: 6px;
    padding: 3px 8px;
    border: 1px solid rgba(var(--role-color-rgb), .16);
    border-radius: 999px;
    color: var(--role-color);
    background: rgba(var(--role-color-rgb), .07);
    font-size: .62rem;
    letter-spacing: .11em;
}

body[data-page="workspace"] .workspace-announcement-eyebrow::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--role-color);
    box-shadow: 0 0 0 3px rgba(var(--role-color-rgb), .10);
}

body[data-page="workspace"] .workspace-announcement-board-header p {
    max-width: 720px;
    margin-top: 4px;
    color: #748195;
    line-height: 1.5;
}

/* Remove the previous heavy gold announcement treatment */
body[data-page="workspace"] .workspace-announcement-board {
    border-color: #dfe5ec;
    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(var(--role-color-rgb), .065),
            transparent 245px
        ),
        linear-gradient(145deg, #ffffff, #f8fafc);
}

body[data-page="workspace"] .workspace-announcement-board::before {
    width: 4px;
    background:
        linear-gradient(
            180deg,
            var(--role-color),
            rgba(var(--role-color-rgb), .40)
        );
}

body[data-page="workspace"] .workspace-announcement-board::after {
    background:
        radial-gradient(
            circle,
            rgba(var(--role-color-rgb), .08),
            transparent 68%
        );
}

/* ---------- More attractive check-in mode card ---------- */
body[data-page="workspace"] .workspace-premium-mode-card {
    border-color: rgba(var(--role-color-rgb), .28);
    background:
        radial-gradient(
            circle at 100% 100%,
            rgba(var(--role-color-rgb), .16),
            transparent 155px
        ),
        linear-gradient(
            145deg,
            rgba(var(--role-color-rgb), .11),
            rgba(255,255,255,.98) 56%
        );
    box-shadow:
        0 12px 28px rgba(var(--role-color-rgb), .10),
        inset 0 1px 0 rgba(255,255,255,.95);
}

body[data-page="workspace"] .workspace-premium-mode-card::before {
    height: 4px;
    background:
        linear-gradient(
            90deg,
            var(--role-color-dark),
            var(--role-color),
            rgba(var(--role-color-rgb), .36)
        );
}

body[data-page="workspace"] .workspace-premium-mode-card::after {
    right: -35px;
    bottom: -50px;
    width: 150px;
    height: 150px;
    border: 24px solid rgba(var(--role-color-rgb), .045);
    background: transparent;
}

body[data-page="workspace"] .workspace-premium-mode-card .workspace-premium-mini-badge {
    color: var(--role-color-dark);
    border-color: rgba(var(--role-color-rgb), .20);
    background: rgba(255,255,255,.76);
}

body[data-page="workspace"] .workspace-premium-mode-card > strong {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-top: 16px;
    padding: 8px 11px;
    border: 1px solid rgba(var(--role-color-rgb), .16);
    border-radius: 11px;
    color: var(--role-color-dark);
    background: rgba(255,255,255,.72);
    box-shadow:
        0 5px 13px rgba(var(--role-color-rgb), .08),
        inset 0 1px 0 rgba(255,255,255,.95);
}

body[data-page="workspace"] .workspace-premium-mode-card > strong::before {
    content: "";
    width: 9px;
    height: 9px;
    flex: 0 0 9px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: var(--role-color);
    box-shadow: 0 0 0 4px rgba(var(--role-color-rgb), .12);
}

body[data-page="workspace"] .workspace-premium-mode-card .workspace-premium-meta-list {
    padding: 9px 11px;
    border: 1px solid rgba(var(--role-color-rgb), .10);
    border-radius: 11px;
    background: rgba(255,255,255,.54);
}

/* ---------- More attractive balance card ---------- */
body[data-page="workspace"] .workspace-premium-money-card {
    border-color: rgba(181, 138, 74, .38);
    background:
        radial-gradient(circle at 100% 0%, rgba(218, 180, 109, .19), transparent 175px),
        radial-gradient(circle at 0% 100%, rgba(139, 107, 57, .10), transparent 165px),
        linear-gradient(145deg, #fffaf0 0%, #ffffff 57%, #f7f2e8 100%);
    box-shadow:
        0 13px 30px rgba(118, 86, 38, .11),
        inset 0 1px 0 rgba(255,255,255,.96);
}

body[data-page="workspace"] .workspace-premium-money-card::before {
    height: 4px;
    background:
        linear-gradient(90deg, #6f542e, #b58a4a 52%, #e2c17e);
}

body[data-page="workspace"] .workspace-premium-money-card::after {
    right: -45px;
    bottom: -66px;
    width: 165px;
    height: 165px;
    border: 26px solid rgba(181,138,74,.055);
    background: transparent;
}

body[data-page="workspace"] .workspace-premium-money-card .workspace-premium-value-row {
    position: relative;
    margin-top: 15px;
    padding: 12px;
    border: 1px solid rgba(181,138,74,.18);
    border-radius: 13px;
    background:
        linear-gradient(135deg, rgba(255,255,255,.82), rgba(248,242,232,.72));
    box-shadow:
        0 7px 17px rgba(111,84,46,.08),
        inset 0 1px 0 rgba(255,255,255,.95);
}

body[data-page="workspace"] .workspace-premium-money-card .workspace-premium-value-icon {
    flex-basis: 43px;
    width: 43px;
    height: 43px;
    border-radius: 13px;
    background:
        linear-gradient(145deg, #b48a4b, #6f542e);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.22),
        0 8px 18px rgba(111,84,46,.22);
}

body[data-page="workspace"] .workspace-premium-money-card .workspace-premium-big-value {
    font-size: clamp(1.18rem, 1.9vw, 1.55rem);
}

body[data-page="workspace"] .workspace-premium-money-card .workspace-premium-big-value strong {
    color: #543e20;
    text-shadow: 0 1px 0 rgba(255,255,255,.9);
}

body[data-page="workspace"] .workspace-premium-money-card .workspace-premium-pill-links a {
    color: #6f542e;
    border-color: rgba(181,138,74,.20);
    background: rgba(255,252,246,.80);
}

body[data-page="workspace"] .workspace-premium-money-card .workspace-premium-pill-links a:hover {
    color: #fff;
    border-color: #8b6b39;
    background: linear-gradient(145deg, #a47d42, #6f542e);
}

/* ---------- Mobile ---------- */
@media (max-width: 700px) {
    body[data-page="workspace"] .workspace-announcement-board-header {
        align-items: flex-start;
        padding-bottom: 11px;
    }

    body[data-page="workspace"] .workspace-premium-mode-card > strong {
        padding: 7px 9px;
    }

    body[data-page="workspace"] .workspace-premium-mode-card .workspace-premium-meta-list {
        padding: 7px 8px;
    }

    body[data-page="workspace"] .workspace-premium-money-card .workspace-premium-value-row {
        padding: 9px;
    }

    body[data-page="workspace"] .workspace-premium-money-card .workspace-premium-value-icon {
        flex-basis: 35px;
        width: 35px;
        height: 35px;
        border-radius: 10px;
    }
}



/* =========================================================
   Workspace Mobile-Visible Buttons + Announcement Header V2
   ========================================================= */

/* ---------- Buttons are coloured by default, not only on hover ---------- */
body[data-page="workspace"] .workspace-premium-action-card > .workspace-card-link,
body[data-page="workspace"] .workspace-announcement-header-actions .workspace-card-link,
body[data-page="workspace"] .workspace-premium-record-section > .section-title-row .workspace-card-link,
body[data-page="workspace"] .announcement-read-button {
    color: #fff;
    border-color: var(--role-color);
    background:
        linear-gradient(145deg, var(--role-color), var(--role-color-dark));
    box-shadow:
        0 7px 16px rgba(var(--role-color-rgb), .20),
        inset 0 1px 0 rgba(255,255,255,.16);
}

body[data-page="workspace"] .workspace-premium-action-card > .workspace-card-link:hover,
body[data-page="workspace"] .workspace-announcement-header-actions .workspace-card-link:hover,
body[data-page="workspace"] .workspace-premium-record-section > .section-title-row .workspace-card-link:hover,
body[data-page="workspace"] .announcement-read-button:hover {
    color: #fff;
    border-color: var(--role-color-dark);
    background:
        linear-gradient(145deg, var(--role-color-dark), var(--role-color));
    box-shadow:
        0 9px 20px rgba(var(--role-color-rgb), .26),
        inset 0 1px 0 rgba(255,255,255,.18);
    transform: translateY(-1px);
}

body[data-page="workspace"] .workspace-premium-action-card > .workspace-card-link:active,
body[data-page="workspace"] .workspace-announcement-header-actions .workspace-card-link:active,
body[data-page="workspace"] .workspace-premium-record-section > .section-title-row .workspace-card-link:active,
body[data-page="workspace"] .announcement-read-button:active {
    transform: translateY(0) scale(.985);
    box-shadow:
        0 4px 10px rgba(var(--role-color-rgb), .18),
        inset 0 2px 4px rgba(15,23,42,.12);
}

/* Wallet mini buttons are also visible on mobile */
body[data-page="workspace"] .workspace-premium-pill-links a {
    color: #fff;
    border-color: var(--role-color);
    background:
        linear-gradient(145deg, var(--role-color), var(--role-color-dark));
    box-shadow:
        0 5px 12px rgba(var(--role-color-rgb), .16),
        inset 0 1px 0 rgba(255,255,255,.14);
}

body[data-page="workspace"] .workspace-premium-pill-links a:hover,
body[data-page="workspace"] .workspace-premium-pill-links a:active {
    color: #fff;
    border-color: var(--role-color-dark);
    background:
        linear-gradient(145deg, var(--role-color-dark), var(--role-color));
}

/* Keep balance card links gold so the asset card remains visually distinct */
body[data-page="workspace"] .workspace-premium-money-card .workspace-premium-pill-links a {
    color: #fff;
    border-color: #8b6b39;
    background: linear-gradient(145deg, #a47d42, #6f542e);
    box-shadow:
        0 5px 12px rgba(111,84,46,.18),
        inset 0 1px 0 rgba(255,255,255,.15);
}

/* ---------- Completely redesigned announcement header ---------- */
body[data-page="workspace"] .workspace-announcement-board-header {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 18px;
    margin: -4px -4px 15px;
    padding: 15px 16px;
    overflow: hidden;
    border: 1px solid rgba(var(--role-color-rgb), .16);
    border-radius: 14px;
    background:
        linear-gradient(
            120deg,
            rgba(var(--role-color-rgb), .11),
            rgba(255,255,255,.96) 46%,
            rgba(var(--role-color-rgb), .045)
        );
    box-shadow:
        0 7px 18px rgba(var(--role-color-rgb), .065),
        inset 0 1px 0 rgba(255,255,255,.92);
}

body[data-page="workspace"] .workspace-announcement-board-header::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    display: block;
    width: 5px;
    background:
        linear-gradient(180deg, var(--role-color), var(--role-color-dark));
}

body[data-page="workspace"] .workspace-announcement-board-header::after {
    content: "";
    position: absolute;
    right: -38px;
    top: -44px;
    display: block;
    width: 120px;
    height: 120px;
    border: 18px solid rgba(var(--role-color-rgb), .045);
    border-radius: 50%;
    pointer-events: none;
}

body[data-page="workspace"] .workspace-announcement-board-header > div:first-child {
    position: relative;
    z-index: 1;
    min-width: 0;
    padding-left: 3px;
}

body[data-page="workspace"] .workspace-announcement-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 24px;
    margin: 0 0 7px;
    padding: 3px 9px;
    border: 1px solid rgba(var(--role-color-rgb), .18);
    border-radius: 999px;
    color: var(--role-color-dark);
    background: rgba(255,255,255,.70);
    box-shadow: 0 3px 8px rgba(var(--role-color-rgb), .05);
    font-size: .61rem;
    letter-spacing: .105em;
}

body[data-page="workspace"] .workspace-announcement-eyebrow::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--role-color);
    box-shadow: 0 0 0 4px rgba(var(--role-color-rgb), .10);
}

body[data-page="workspace"] .workspace-announcement-board-header h2 {
    display: block;
    margin: 0;
    color: #172033;
    font-size: clamp(1.03rem, 1.6vw, 1.18rem);
    font-weight: 850;
    line-height: 1.25;
    letter-spacing: -.022em;
}

body[data-page="workspace"] .workspace-announcement-board-header h2::before {
    content: none !important;
    display: none !important;
}

body[data-page="workspace"] .workspace-announcement-board-header p {
    max-width: 720px;
    margin: 5px 0 0;
    color: #657287;
    font-size: .76rem;
    line-height: 1.5;
}

body[data-page="workspace"] .workspace-announcement-header-actions {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 7px;
}

body[data-page="workspace"] .workspace-announcement-header-actions .workspace-card-link {
    min-height: 35px;
    padding: 6px 12px;
    border-radius: 10px;
    white-space: nowrap;
}

/* Remove decorative shine from announcement header buttons for a cleaner look */
body[data-page="workspace"] .workspace-announcement-header-actions .workspace-card-link::before {
    content: none;
    display: none;
}

/* ---------- Mobile layout ---------- */
@media (max-width: 700px) {
    body[data-page="workspace"] .workspace-announcement-board-header {
        grid-template-columns: 1fr;
        gap: 11px;
        margin: -2px -2px 12px;
        padding: 13px;
        border-radius: 12px;
    }

    body[data-page="workspace"] .workspace-announcement-header-actions {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        justify-content: stretch;
    }

    body[data-page="workspace"] .workspace-announcement-header-actions .workspace-card-link {
        width: 100%;
        min-width: 0;
        white-space: normal;
    }

    body[data-page="workspace"] .workspace-premium-action-card > .workspace-card-link,
    body[data-page="workspace"] .announcement-read-button {
        box-shadow:
            0 5px 12px rgba(var(--role-color-rgb), .18),
            inset 0 1px 0 rgba(255,255,255,.14);
    }
}

@media (max-width: 390px) {
    body[data-page="workspace"] .workspace-announcement-header-actions {
        grid-template-columns: 1fr;
    }
}



/* =========================================================
   Wallet Link Grid Layout
   - First two links share one row
   - Third link fills the full row
   ========================================================= */

body[data-page="workspace"] .workspace-premium-money-card .workspace-premium-link-row.workspace-premium-pill-links {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    width: 100%;
    margin-top: 13px;
}

body[data-page="workspace"] .workspace-premium-money-card .workspace-premium-link-row.workspace-premium-pill-links a {
    width: 100%;
    min-width: 0;
    min-height: 32px;
    justify-content: center;
    padding: 5px 9px;
    border-radius: 10px;
    text-align: center;
    white-space: normal;
}

body[data-page="workspace"] .workspace-premium-money-card .workspace-premium-link-row.workspace-premium-pill-links a:nth-child(3) {
    grid-column: 1 / -1;
}

/* Mobile remains compact while keeping the 2 + 1 structure */
@media (max-width: 700px) {
    body[data-page="workspace"] .workspace-premium-money-card .workspace-premium-link-row.workspace-premium-pill-links {
        gap: 5px;
        margin-top: 10px;
    }

    body[data-page="workspace"] .workspace-premium-money-card .workspace-premium-link-row.workspace-premium-pill-links a {
        min-height: 29px;
        padding: 4px 6px;
        font-size: .62rem;
    }
}

/* Very narrow screens can still keep two short buttons side by side */
@media (max-width: 330px) {
    body[data-page="workspace"] .workspace-premium-money-card .workspace-premium-link-row.workspace-premium-pill-links {
        grid-template-columns: 1fr;
    }

    body[data-page="workspace"] .workspace-premium-money-card .workspace-premium-link-row.workspace-premium-pill-links a:nth-child(3) {
        grid-column: auto;
    }
}



/* =========================================================
   Workspace Role Hero + Role Logo Upgrade
   Logo files must be placed in: static/img/
   ========================================================= */

/* ---------- Seven distinct role palettes ---------- */
body[data-page="workspace"].role-promoter {
    --role-color: #db2777;
    --role-color-dark: #9d174d;
    --role-color-rgb: 219, 39, 119;
    --role-hero-1: #831843;
    --role-hero-2: #be185d;
    --role-hero-3: #ec4899;
    --role-logo: url("../img/promoter_profile.png");
}

body[data-page="workspace"].role-business {
    --role-color: #1e3a8a;
    --role-color-dark: #172554;
    --role-color-rgb: 30, 58, 138;
    --role-hero-1: #172554;
    --role-hero-2: #1e3a8a;
    --role-hero-3: #2563eb;
    --role-logo: url("../img/business_profile.png");
}

body[data-page="workspace"].role-team-leader {
    --role-color: #4c1d95;
    --role-color-dark: #2e1065;
    --role-color-rgb: 76, 29, 149;
    --role-hero-1: #2e1065;
    --role-hero-2: #4c1d95;
    --role-hero-3: #7c3aed;
    --role-logo: url("../img/leader_profile.png");
}

body[data-page="workspace"].role-dj {
    --role-color: #831843;
    --role-color-dark: #500724;
    --role-color-rgb: 131, 24, 67;
    --role-hero-1: #500724;
    --role-hero-2: #831843;
    --role-hero-3: #be123c;
    --role-logo: url("../img/dj_profile.png");
}

body[data-page="workspace"].role-manager {
    --role-color: #0f766e;
    --role-color-dark: #134e4a;
    --role-color-rgb: 15, 118, 110;
    --role-hero-1: #134e4a;
    --role-hero-2: #0f766e;
    --role-hero-3: #14b8a6;
    --role-logo: url("../img/manager_profile.png");
}

body[data-page="workspace"].role-store-manager {
    --role-color: #b45309;
    --role-color-dark: #78350f;
    --role-color-rgb: 180, 83, 9;
    --role-hero-1: #78350f;
    --role-hero-2: #b45309;
    --role-hero-3: #d97706;
    --role-logo: url("../img/store_manager_profile.png");
}

body[data-page="workspace"].role-senior-admin {
    --role-color: #334155;
    --role-color-dark: #0f172a;
    --role-color-rgb: 51, 65, 85;
    --role-hero-1: #0f172a;
    --role-hero-2: #334155;
    --role-hero-3: #64748b;
    --role-logo: url("../img/admin_profile.png");
}

/* ---------- Hero follows current role ---------- */
body[data-page="workspace"] .workspace-premium-hero {
    border-color: rgba(255,255,255,.22);
    background:
        radial-gradient(circle at 13% 8%, rgba(255,255,255,.18), transparent 25%),
        radial-gradient(circle at 90% 108%, rgba(255,255,255,.13), transparent 36%),
        linear-gradient(120deg, rgba(255,255,255,.055), transparent 43%),
        linear-gradient(
            135deg,
            var(--role-hero-1, #0f172a) 0%,
            var(--role-hero-2, #334155) 52%,
            var(--role-hero-3, #64748b) 100%
        );
    box-shadow:
        0 18px 42px rgba(var(--role-color-rgb), .23),
        inset 0 1px 0 rgba(255,255,255,.14),
        inset 0 -1px 0 rgba(15,23,42,.22);
}

body[data-page="workspace"] .workspace-premium-hero::after {
    border-color: rgba(255,255,255,.045);
    box-shadow:
        0 0 0 1px rgba(255,255,255,.07),
        0 0 80px rgba(var(--role-color-rgb), .20);
}

/* ---------- Replace the text icon with role logo ---------- */
body[data-page="workspace"] .workspace-premium-icon {
    position: relative;
    display: block;
    flex: 0 0 66px;
    width: 66px;
    height: 66px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.25);
    border-radius: 20px;
    color: transparent;
    font-size: 0;
    line-height: 0;
    background:
        linear-gradient(145deg, rgba(255,255,255,.20), rgba(255,255,255,.07));
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.20),
        0 13px 28px rgba(15,23,42,.24);
}

body[data-page="workspace"] .workspace-premium-icon::before {
    content: "";
    position: absolute;
    inset: 7px;
    border-radius: 15px;
    background-image: var(--role-logo);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    filter: drop-shadow(0 5px 9px rgba(15,23,42,.22));
}

body[data-page="workspace"] .workspace-premium-icon::after {
    z-index: 2;
    right: 6px;
    bottom: 6px;
    width: 7px;
    height: 7px;
}

/* ---------- Role badge follows exact role colour ---------- */
body[data-page="workspace"] .role-badge.promoter,
body[data-page="workspace"] .role-badge.business,
body[data-page="workspace"] .role-badge.team-leader,
body[data-page="workspace"] .role-badge.dj,
body[data-page="workspace"] .role-badge.admin {
    border-color: rgba(255,255,255,.24);
    background: rgba(var(--role-color-rgb), .72);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.16),
        0 4px 10px rgba(15,23,42,.13);
}

body[data-page="workspace"] .workspace-premium-hero-side {
    border-color: rgba(255,255,255,.18);
    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.15),
            rgba(var(--role-color-rgb), .10)
        );
}

body[data-page="workspace"] .rooms-pro-action-btn.notification-btn {
    border-color: rgba(255,255,255,.22);
    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.20),
            rgba(255,255,255,.09)
        );
}

/* ---------- Tablet and mobile ---------- */
@media (max-width: 1024px) {
    body[data-page="workspace"] .workspace-premium-icon {
        flex-basis: 58px;
        width: 58px;
        height: 58px;
        border-radius: 17px;
    }

    body[data-page="workspace"] .workspace-premium-icon::before {
        inset: 6px;
        border-radius: 13px;
    }
}

@media (max-width: 700px) {
    body[data-page="workspace"] .workspace-premium-icon {
        flex-basis: 48px;
        width: 48px;
        height: 48px;
        border-radius: 14px;
    }

    body[data-page="workspace"] .workspace-premium-icon::before {
        inset: 5px;
        border-radius: 11px;
    }

    body[data-page="workspace"] .workspace-premium-icon::after {
        right: 4px;
        bottom: 4px;
        width: 6px;
        height: 6px;
    }
}

/* =========================================================
   PRMS Workspace — Premium Compact Responsive UI
   Apply after global
   ========================================================= */

body[data-page="workspace"] {
    --ws-bg: #f3f5f8;
    --ws-surface: #ffffff;
    --ws-surface-soft: #f8fafc;
    --ws-surface-muted: #f1f5f9;
    --ws-text: #172033;
    --ws-text-soft: #526078;
    --ws-text-muted: #7a879a;
    --ws-line: #dde3eb;
    --ws-line-strong: #cdd5df;
    --ws-primary: #334155;
    --ws-primary-dark: #1e293b;
    --ws-accent: #64748b;
    --ws-success: #18765a;
    --ws-success-soft: #eaf7f1;
    --ws-warning: #a16207;
    --ws-warning-soft: #fff8e7;
    --ws-danger: #b42318;
    --ws-danger-soft: #fff0ee;
    --ws-info: #2f5f91;
    --ws-info-soft: #edf5fd;
    --ws-radius-xl: 20px;
    --ws-radius-lg: 16px;
    --ws-radius-md: 12px;
    --ws-radius-sm: 9px;
    --ws-shadow: 0 8px 24px rgba(15, 23, 42, 0.055);
    --ws-shadow-hover: 0 12px 30px rgba(15, 23, 42, 0.09);
    margin: 0;
    color: var(--ws-text);
    background:
        radial-gradient(circle at 100% 0%, rgba(100, 116, 139, 0.08), transparent 28rem),
        var(--ws-bg);
    font-family: Inter, "Segoe UI", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

body[data-page="workspace"] *,
body[data-page="workspace"] *::before,
body[data-page="workspace"] *::after {
    box-sizing: border-box;
}

body[data-page="workspace"] a,
body[data-page="workspace"] button {
    -webkit-tap-highlight-color: transparent;
}

body[data-page="workspace"] .container.page-with-nav {
    width: min(100% - 32px, 1320px);
    margin: 0 auto;
    padding: 18px 5px 92px;
}

/* ---------- Language switch ---------- */
body[data-page="workspace"] .login-language-switch {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 4px;
    margin: 0 0 8px;
}

body[data-page="workspace"] .login-language-switch form {
    margin: 0;
}

body[data-page="workspace"] .login-language-switch button {
    min-width: 48px;
    min-height: 32px;
    padding: 5px 11px;
    border: 1px solid var(--ws-line);
    border-radius: 999px;
    color: var(--ws-text-soft);
    background: rgba(255, 255, 255, 0.8);
    font: inherit;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    transition: 0.18s ease;
}

body[data-page="workspace"] .login-language-switch button:hover,
body[data-page="workspace"] .login-language-switch button.active {
    color: #fff;
    border-color: var(--ws-primary);
    background: var(--ws-primary);
}

/* ---------- Workspace hero ---------- */
body[data-page="workspace"] .workspace-premium-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(220px, 0.34fr);
    gap: 16px;
    align-items: center;
    min-height: 138px;
    padding: 20px 22px;
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: var(--ws-radius-xl);
    overflow: hidden;
    color: #fff;
    background:
        linear-gradient(125deg, rgba(255, 255, 255, 0.08), transparent 48%),
        linear-gradient(135deg, #263244 0%, #38465a 58%, #4b5b70 100%);
    box-shadow: 0 12px 32px rgba(30, 41, 59, 0.16);
}

body[data-page="workspace"] .workspace-premium-hero::after {
    content: "";
    position: absolute;
    right: -58px;
    top: -92px;
    width: 230px;
    height: 230px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 50%;
}

body[data-page="workspace"] .workspace-premium-hero-main {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 15px;
    min-width: 0;
}

body[data-page="workspace"] .workspace-premium-icon {
    display: grid;
    flex: 0 0 52px;
    width: 52px;
    height: 52px;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.19);
    border-radius: 15px;
    color: #fff;
    background: rgba(255, 255, 255, 0.11);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
    font-size: 1.22rem;
    font-weight: 800;
}

body[data-page="workspace"] .workspace-premium-hero .page-subtitle {
    margin: 0 0 2px;
    color: rgba(255, 255, 255, 0.68);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

body[data-page="workspace"] .workspace-premium-hero h1 {
    margin: 0;
    color: #fff;
    font-size: clamp(1.38rem, 2.2vw, 2rem);
    line-height: 1.18;
    letter-spacing: -0.025em;
}

body[data-page="workspace"] .workspace-premium-user-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
    margin-top: 8px;
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.84rem;
}

body[data-page="workspace"] .role-badge {
    display: inline-flex;
    align-items: center;
    min-height: 25px;
    padding: 3px 9px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    color: #fff;
    background: rgba(255, 255, 255, 0.12);
    font-size: 0.7rem;
    font-weight: 800;
}

body[data-page="workspace"] .role-badge.promoter { background: rgba(154, 52, 18, 0.62); }
body[data-page="workspace"] .role-badge.business { background: rgba(30, 58, 138, 0.62); }
body[data-page="workspace"] .role-badge.team-leader { background: rgba(76, 29, 149, 0.62); }
body[data-page="workspace"] .role-badge.dj { background: rgba(131, 24, 67, 0.62); }
body[data-page="workspace"] .role-badge.admin { background: rgba(15, 23, 42, 0.58); }

body[data-page="workspace"] .workspace-premium-hero-side {
    position: relative;
    z-index: 1;
    min-width: 0;
    padding: 13px 15px;
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.075);
    backdrop-filter: blur(8px);
}

body[data-page="workspace"] .workspace-premium-hero-side > span {
    display: block;
    color: rgba(255, 255, 255, 0.62);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

body[data-page="workspace"] .workspace-premium-hero-side strong {
    display: block;
    margin-top: 3px;
    color: #fff;
    font-size: 1rem;
    line-height: 1.28;
    overflow-wrap: anywhere;
}

body[data-page="workspace"] .workspace-premium-hero-side p {
    margin: 4px 0 0;
    color: rgba(255, 255, 255, 0.65);
    font-size: 0.76rem;
}

body[data-page="workspace"] .rooms-pro-action-btn.notification-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 34px;
    padding: 6px 11px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 10px;
    color: #fff;
    background: rgba(255, 255, 255, 0.12);
    font-size: 0.76rem;
    font-weight: 800;
    text-decoration: none;
    transition: 0.18s ease;
}

body[data-page="workspace"] .rooms-pro-action-btn.notification-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-1px);
}

body[data-page="workspace"] .notification-dot {
    display: inline-grid;
    min-width: 21px;
    height: 21px;
    padding: 0 5px;
    place-items: center;
    border-radius: 999px;
    color: #7f1d1d;
    background: #fee2e2;
    font-size: 0.68rem;
    font-weight: 900;
}

/* ---------- Shared sections ---------- */
body[data-page="workspace"] .workspace-important-announcement-alert,
body[data-page="workspace"] .workspace-announcement-board,
body[data-page="workspace"] .workspace-premium-section,
body[data-page="workspace"] .workspace-premium-record-section {
    margin-top: 14px;
}

body[data-page="workspace"] .workspace-announcement-board,
body[data-page="workspace"] .workspace-premium-section,
body[data-page="workspace"] .workspace-premium-record-section {
    padding: 17px;
    border: 1px solid var(--ws-line);
    border-radius: var(--ws-radius-lg);
    background: rgba(255, 255, 255, 0.92);
    box-shadow: var(--ws-shadow);
}

body[data-page="workspace"] .section-title-row,
body[data-page="workspace"] .workspace-announcement-board-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 12px;
}

body[data-page="workspace"] .section-title-row h3,
body[data-page="workspace"] .workspace-announcement-board-header h2 {
    margin: 0;
    color: var(--ws-text);
    font-size: 1rem;
    line-height: 1.3;
    letter-spacing: -0.012em;
}

body[data-page="workspace"] .section-subtitle,
body[data-page="workspace"] .workspace-announcement-board-header p {
    margin: 3px 0 0;
    color: var(--ws-text-muted);
    font-size: 0.78rem;
    line-height: 1.45;
}

body[data-page="workspace"] .workspace-announcement-eyebrow {
    display: block;
    margin-bottom: 4px;
    color: var(--ws-accent);
    font-size: 0.66rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

body[data-page="workspace"] .section-count {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    min-height: 28px;
    padding: 4px 9px;
    border: 1px solid var(--ws-line);
    border-radius: 999px;
    color: var(--ws-text-soft);
    background: var(--ws-surface-soft);
    font-size: 0.72rem;
    font-weight: 800;
}

/* ---------- Important announcements ---------- */
body[data-page="workspace"] .workspace-important-announcement-alert {
    padding: 15px;
    border: 1px solid #f3c9c3;
    border-radius: var(--ws-radius-lg);
    background: linear-gradient(180deg, #fff9f8, #fff5f3);
    box-shadow: 0 8px 24px rgba(180, 35, 24, 0.06);
}

body[data-page="workspace"] .workspace-important-announcement-alert-header {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 11px;
    align-items: center;
    margin-bottom: 11px;
}

body[data-page="workspace"] .workspace-important-announcement-alert-icon,
body[data-page="workspace"] .workspace-premium-reminder-icon {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border-radius: 10px;
    font-weight: 900;
}

body[data-page="workspace"] .workspace-important-announcement-alert-icon {
    color: var(--ws-danger);
    background: #ffe5e1;
}

body[data-page="workspace"] .workspace-important-announcement-alert h2 {
    margin: 0;
    color: #7f1d1d;
    font-size: 0.94rem;
}

body[data-page="workspace"] .workspace-important-announcement-alert-header p {
    margin: 2px 0 0;
    color: #9a4d45;
    font-size: 0.76rem;
}

body[data-page="workspace"] .workspace-important-announcement-count {
    display: grid;
    min-width: 29px;
    height: 29px;
    padding: 0 8px;
    place-items: center;
    border-radius: 999px;
    color: #fff;
    background: var(--ws-danger);
    font-size: 0.74rem;
    font-weight: 900;
}

/* ---------- Announcement board ---------- */
body[data-page="workspace"] .workspace-announcement-header-actions {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 7px;
}

body[data-page="workspace"] .workspace-announcement-list {
    display: grid;
    gap: 9px;
}

body[data-page="workspace"] .workspace-announcement-item {
    position: relative;
    padding: 13px 14px;
    border: 1px solid var(--ws-line);
    border-radius: var(--ws-radius-md);
    background: var(--ws-surface);
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

body[data-page="workspace"] .workspace-announcement-item:hover {
    border-color: var(--ws-line-strong);
    box-shadow: 0 7px 18px rgba(15, 23, 42, 0.055);
    transform: translateY(-1px);
}

body[data-page="workspace"] .workspace-announcement-item.is-unread {
    border-left: 3px solid var(--ws-info);
    background: linear-gradient(90deg, var(--ws-info-soft), #fff 20%);
}

body[data-page="workspace"] .workspace-announcement-item.is-important {
    border-left-color: var(--ws-danger);
    background: linear-gradient(90deg, var(--ws-danger-soft), #fff 20%);
}

body[data-page="workspace"] .workspace-announcement-top-row {
    display: flex;
    justify-content: space-between;
    gap: 8px;
}

body[data-page="workspace"] .workspace-announcement-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

body[data-page="workspace"] .announcement-badge {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 2px 7px;
    border-radius: 999px;
    font-size: 0.64rem;
    font-weight: 850;
    line-height: 1;
}

body[data-page="workspace"] .announcement-badge.pinned {
    color: #7c4a03;
    background: #fff2cc;
}

body[data-page="workspace"] .announcement-badge.important {
    color: #991b1b;
    background: #fee2e2;
}

body[data-page="workspace"] .announcement-badge.type {
    color: #334155;
    background: #e9eef5;
}

body[data-page="workspace"] .announcement-badge.unread {
    color: #1e4f7e;
    background: #dcecff;
}

body[data-page="workspace"] .announcement-badge.read {
    color: #16624c;
    background: #def3ea;
}

body[data-page="workspace"] .workspace-announcement-item h3 {
    margin: 8px 0 4px;
    color: var(--ws-text);
    font-size: 0.94rem;
    line-height: 1.35;
}

body[data-page="workspace"] .workspace-announcement-body {
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    color: var(--ws-text-soft);
    font-size: 0.79rem;
    line-height: 1.55;
    overflow-wrap: anywhere;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

body[data-page="workspace"] .workspace-announcement-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 10px;
    padding-top: 9px;
    border-top: 1px dashed var(--ws-line);
    color: var(--ws-text-muted);
    font-size: 0.69rem;
}

body[data-page="workspace"] .workspace-announcement-footer form {
    flex: 0 0 auto;
    margin: 0;
}

body[data-page="workspace"] .announcement-read-button,
body[data-page="workspace"] .workspace-card-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 5px 10px;
    border: 1px solid var(--ws-line-strong);
    border-radius: 9px;
    color: var(--ws-primary-dark);
    background: #fff;
    font: inherit;
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: 0.18s ease;
}

body[data-page="workspace"] .announcement-read-button:hover,
body[data-page="workspace"] .workspace-card-link:hover {
    color: #fff;
    border-color: var(--ws-primary);
    background: var(--ws-primary);
    transform: translateY(-1px);
}

/* ---------- Summary cards ---------- */
body[data-page="workspace"] .workspace-premium-summary-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 11px;
    margin-top: 14px;
}

body[data-page="workspace"] .workspace-premium-summary-card {
    min-width: 0;
    padding: 15px;
    border: 1px solid var(--ws-line);
    border-radius: var(--ws-radius-lg);
    background: rgba(255, 255, 255, 0.94);
    box-shadow: var(--ws-shadow);
}

body[data-page="workspace"] .workspace-premium-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

body[data-page="workspace"] .summary-label {
    display: block;
    color: var(--ws-text-soft);
    font-size: 0.74rem;
    font-weight: 850;
}

body[data-page="workspace"] .workspace-premium-card-hint {
    margin: 2px 0 0;
    color: var(--ws-text-muted);
    font-size: 0.68rem;
}

body[data-page="workspace"] .workspace-premium-mini-badge {
    display: inline-flex;
    min-height: 22px;
    align-items: center;
    padding: 2px 7px;
    border-radius: 999px;
    color: #40516a;
    background: #edf1f6;
    font-size: 0.62rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

body[data-page="workspace"] .workspace-premium-mode-card > strong {
    display: block;
    margin-top: 14px;
    color: var(--ws-primary-dark);
    font-size: 1.16rem;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

body[data-page="workspace"] .workspace-premium-meta-list {
    display: grid;
    gap: 4px;
    margin-top: 10px;
}

body[data-page="workspace"] .workspace-premium-meta-list p {
    margin: 0;
    color: var(--ws-text-muted);
    font-size: 0.72rem;
}

body[data-page="workspace"] .workspace-premium-meta-list span {
    color: var(--ws-text-soft);
    font-weight: 750;
}

body[data-page="workspace"] .workspace-premium-value-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 14px;
}

body[data-page="workspace"] .workspace-premium-value-icon {
    display: grid;
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    place-items: center;
    border-radius: 11px;
    color: var(--ws-primary-dark);
    background: #edf1f5;
    font-size: 0.72rem;
    font-weight: 900;
}

body[data-page="workspace"] .workspace-premium-big-value {
    min-width: 0;
    margin: 0;
    color: var(--ws-primary-dark);
    font-size: clamp(1.05rem, 1.6vw, 1.35rem);
    line-height: 1.2;
    overflow-wrap: anywhere;
}

body[data-page="workspace"] .workspace-premium-link-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 13px;
}

body[data-page="workspace"] .workspace-premium-pill-links a {
    display: inline-flex;
    align-items: center;
    min-height: 27px;
    padding: 3px 8px;
    border: 1px solid var(--ws-line);
    border-radius: 999px;
    color: var(--ws-text-soft);
    background: var(--ws-surface-soft);
    font-size: 0.67rem;
    font-weight: 800;
    text-decoration: none;
    transition: 0.18s ease;
}

body[data-page="workspace"] .workspace-premium-pill-links a:hover {
    color: #fff;
    border-color: var(--ws-primary);
    background: var(--ws-primary);
}

body[data-page="workspace"] .workspace-premium-progress-shell {
    height: 5px;
    margin-top: 13px;
    overflow: hidden;
    border-radius: 999px;
    background: #e9edf2;
}

body[data-page="workspace"] .workspace-premium-progress-bar {
    width: 58%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #718096, #334155);
}

body[data-page="workspace"] .workspace-premium-desc {
    margin: 7px 0 0;
    color: var(--ws-text-muted);
    font-size: 0.68rem;
}

/* ---------- Reminder ---------- */
body[data-page="workspace"] .workspace-premium-reminder-card {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-top: 11px;
    padding: 11px 14px;
    border: 1px solid #ead9aa;
    border-radius: var(--ws-radius-md);
    background: var(--ws-warning-soft);
}

body[data-page="workspace"] .workspace-premium-reminder-icon {
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    color: var(--ws-warning);
    background: #ffedbd;
}

body[data-page="workspace"] .workspace-premium-reminder-card h3 {
    margin: 0;
    color: #7a4d06;
    font-size: 0.82rem;
}

body[data-page="workspace"] .workspace-premium-reminder-card p {
    margin: 2px 0 0;
    color: #8c681f;
    font-size: 0.74rem;
}

/* ---------- Function cards ---------- */
body[data-page="workspace"] .workspace-premium-card-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 9px;
}

body[data-page="workspace"] .workspace-premium-action-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto auto;
    gap: 8px 11px;
    min-width: 0;
    min-height: 124px;
    padding: 13px;
    border: 1px solid var(--ws-line);
    border-radius: var(--ws-radius-md);
    background: var(--ws-surface);
    transition: 0.18s ease;
}

body[data-page="workspace"] .workspace-premium-action-card:hover {
    border-color: var(--ws-line-strong);
    box-shadow: var(--ws-shadow-hover);
    transform: translateY(-2px);
}

body[data-page="workspace"] .workspace-premium-action-icon {
    display: grid;
    grid-column: 1;
    grid-row: 1;
    width: 35px;
    height: 35px;
    place-items: center;
    border: 1px solid #dfe5ec;
    border-radius: 10px;
    color: var(--ws-primary-dark);
    background: #f2f5f8;
    font-size: 0.82rem;
    font-weight: 900;
}

body[data-page="workspace"] .workspace-premium-action-content {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
}

body[data-page="workspace"] .workspace-premium-action-content h3 {
    margin: 0;
    color: var(--ws-text);
    font-size: 0.86rem;
    line-height: 1.35;
}

body[data-page="workspace"] .workspace-premium-action-content p {
    display: -webkit-box;
    margin: 4px 0 0;
    overflow: hidden;
    color: var(--ws-text-muted);
    font-size: 0.72rem;
    line-height: 1.45;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

body[data-page="workspace"] .workspace-premium-action-card > .workspace-card-link {
    grid-column: 1 / -1;
    grid-row: 2;
    align-self: end;
    justify-self: stretch;
    min-height: 31px;
    padding: 5px 9px;
    background: var(--ws-surface-soft);
}

body[data-page="workspace"] .workspace-premium-action-card.excel-card {
    border-top: 3px solid #64748b;
}

/* ---------- Attendance record ---------- */
body[data-page="workspace"] .workspace-premium-record-section > .section-title-row {
    align-items: center;
}

body[data-page="workspace"] .workspace-record-list {
    display: grid;
    gap: 9px;
}

body[data-page="workspace"] .workspace-premium-attendance-item {
    padding: 13px;
    border: 1px solid var(--ws-line);
    border-radius: var(--ws-radius-md);
    background: var(--ws-surface);
}

body[data-page="workspace"] .attendance-top-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    padding-bottom: 9px;
    border-bottom: 1px solid var(--ws-line);
}

body[data-page="workspace"] .attendance-top-row h4 {
    margin: 0;
    color: var(--ws-text);
    font-size: 0.9rem;
}

body[data-page="workspace"] .attendance-top-row p {
    margin: 2px 0 0;
    color: var(--ws-text-muted);
    font-size: 0.7rem;
}

body[data-page="workspace"] .session-pill {
    display: inline-flex;
    flex: 0 0 auto;
    min-height: 25px;
    align-items: center;
    padding: 3px 8px;
    border-radius: 999px;
    color: #34445c;
    background: #eaf0f6;
    font-size: 0.66rem;
    font-weight: 850;
}

body[data-page="workspace"] .attendance-info-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 7px;
    margin-top: 9px;
}

body[data-page="workspace"] .attendance-info-grid > div {
    min-width: 0;
    padding: 8px 9px;
    border-radius: 9px;
    background: var(--ws-surface-soft);
}

body[data-page="workspace"] .attendance-info-grid span {
    display: block;
    color: var(--ws-text-muted);
    font-size: 0.62rem;
    line-height: 1.25;
}

body[data-page="workspace"] .attendance-info-grid strong {
    display: block;
    margin-top: 3px;
    color: var(--ws-text);
    font-size: 0.72rem;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

body[data-page="workspace"] .attendance-note,
body[data-page="workspace"] .workspace-feedback-notes .attendance-note {
    margin-top: 8px;
    padding: 8px 10px;
    border-left: 3px solid #cbd5e1;
    border-radius: 0 8px 8px 0;
    color: var(--ws-text-soft);
    background: var(--ws-surface-soft);
    font-size: 0.71rem;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

body[data-page="workspace"] .workspace-feedback-details {
    margin-top: 8px;
    border: 1px solid var(--ws-line);
    border-radius: 9px;
    background: #fbfcfd;
}

body[data-page="workspace"] .workspace-feedback-summary {
    padding: 8px 10px;
    color: var(--ws-primary-dark);
    font-size: 0.72rem;
    font-weight: 850;
    cursor: pointer;
    user-select: none;
}

body[data-page="workspace"] .workspace-feedback-details[open] .workspace-feedback-summary {
    border-bottom: 1px solid var(--ws-line);
}

body[data-page="workspace"] .workspace-feedback-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    padding: 0 9px 9px;
}

body[data-page="workspace"] .workspace-feedback-notes {
    padding: 0 9px 9px;
}

body[data-page="workspace"] .empty-state-card {
    display: grid;
    min-height: 92px;
    place-items: center;
    padding: 18px;
    border: 1px dashed var(--ws-line-strong);
    border-radius: var(--ws-radius-md);
    color: var(--ws-text-muted);
    background: var(--ws-surface-soft);
    font-size: 0.78rem;
    text-align: center;
}

/* ---------- Bottom navigation ---------- */
body[data-page="workspace"] .bottom-nav {
    position: fixed;
    z-index: 1000;
    right: 50%;
    bottom: max(10px, env(safe-area-inset-bottom));
    display: grid;
    grid-template-columns: repeat(3, minmax(82px, 1fr));
    width: min(calc(100% - 24px), 460px);
    padding: 5px;
    border: 1px solid rgba(203, 213, 225, 0.9);
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.93);
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.15);
    backdrop-filter: blur(14px);
    transform: translateX(50%);
}

body[data-page="workspace"] .bottom-nav a {
    display: flex;
    min-height: 38px;
    align-items: center;
    justify-content: center;
    padding: 6px 9px;
    border-radius: 10px;
    color: var(--ws-text-soft);
    font-size: 0.72rem;
    font-weight: 800;
    text-decoration: none;
    transition: 0.18s ease;
}

body[data-page="workspace"] .bottom-nav a:hover {
    color: var(--ws-primary-dark);
    background: var(--ws-surface-muted);
}

body[data-page="workspace"] .bottom-nav a.active {
    color: #fff;
    background: var(--ws-primary);
}

/* ---------- Keyboard focus ---------- */
body[data-page="workspace"] a:focus-visible,
body[data-page="workspace"] button:focus-visible,
body[data-page="workspace"] summary:focus-visible {
    outline: 3px solid rgba(59, 130, 246, 0.28);
    outline-offset: 2px;
}

/* ---------- Tablet ---------- */
@media (max-width: 1024px) {
    body[data-page="workspace"] .container.page-with-nav {
        width: min(100% - 26px, 960px);
        padding-top: 14px;
    }

    body[data-page="workspace"] .workspace-premium-hero {
        grid-template-columns: minmax(0, 1fr) minmax(205px, 0.42fr);
        padding: 18px;
    }

    body[data-page="workspace"] .workspace-premium-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body[data-page="workspace"] .workspace-premium-summary-card:last-child {
        grid-column: 1 / -1;
    }

    body[data-page="workspace"] .workspace-premium-card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body[data-page="workspace"] .attendance-info-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    body[data-page="workspace"] .workspace-feedback-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* ---------- Mobile ---------- */
@media (max-width: 700px) {
    body[data-page="workspace"] {
        background: var(--ws-bg);
    }

    body[data-page="workspace"] .container.page-with-nav {
        width: min(100% - 18px, 640px);
        padding: 9px 0 86px;
    }

    body[data-page="workspace"] .login-language-switch {
        margin-bottom: 6px;
    }

    body[data-page="workspace"] .login-language-switch button {
        min-width: 44px;
        min-height: 29px;
        padding: 4px 9px;
        font-size: 0.7rem;
    }

    body[data-page="workspace"] .workspace-premium-hero {
        grid-template-columns: 1fr;
        gap: 11px;
        min-height: 0;
        padding: 15px;
        border-radius: 17px;
    }

    body[data-page="workspace"] .workspace-premium-hero-main {
        gap: 11px;
    }

    body[data-page="workspace"] .workspace-premium-icon {
        flex-basis: 43px;
        width: 43px;
        height: 43px;
        border-radius: 12px;
        font-size: 1rem;
    }

    body[data-page="workspace"] .workspace-premium-hero h1 {
        font-size: 1.3rem;
    }

    body[data-page="workspace"] .workspace-premium-user-row {
        margin-top: 6px;
        font-size: 0.76rem;
    }

    body[data-page="workspace"] .workspace-premium-hero-side {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-rows: auto auto;
        align-items: center;
        gap: 1px 8px;
        padding: 10px 11px;
        border-radius: 12px;
    }

    body[data-page="workspace"] .workspace-premium-hero-side > span,
    body[data-page="workspace"] .workspace-premium-hero-side > strong,
    body[data-page="workspace"] .workspace-premium-hero-side > p {
        grid-column: 1;
    }

    body[data-page="workspace"] .workspace-premium-hero-side > strong {
        font-size: 0.88rem;
    }

    body[data-page="workspace"] .rooms-pro-action-btn.notification-btn {
        grid-column: 2;
        grid-row: 1 / span 2;
        min-height: 35px;
        margin-top: 0 !important;
        padding: 5px 9px;
        font-size: 0.69rem;
    }

    body[data-page="workspace"] .workspace-important-announcement-alert,
    body[data-page="workspace"] .workspace-announcement-board,
    body[data-page="workspace"] .workspace-premium-section,
    body[data-page="workspace"] .workspace-premium-record-section {
        margin-top: 10px;
    }

    body[data-page="workspace"] .workspace-announcement-board,
    body[data-page="workspace"] .workspace-premium-section,
    body[data-page="workspace"] .workspace-premium-record-section {
        padding: 12px;
        border-radius: 14px;
    }

    body[data-page="workspace"] .workspace-important-announcement-alert {
        padding: 12px;
        border-radius: 14px;
    }

    body[data-page="workspace"] .workspace-important-announcement-alert-header {
        grid-template-columns: auto minmax(0, 1fr) auto;
        gap: 8px;
    }

    body[data-page="workspace"] .workspace-important-announcement-alert-icon {
        width: 30px;
        height: 30px;
        border-radius: 9px;
    }

    body[data-page="workspace"] .workspace-important-announcement-alert h2 {
        font-size: 0.82rem;
    }

    body[data-page="workspace"] .workspace-important-announcement-alert-header p {
        display: -webkit-box;
        overflow: hidden;
        font-size: 0.68rem;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    body[data-page="workspace"] .workspace-announcement-board-header,
    body[data-page="workspace"] .section-title-row {
        flex-wrap: wrap;
        gap: 8px;
        margin-bottom: 9px;
    }

    body[data-page="workspace"] .workspace-announcement-board-header > div:first-child,
    body[data-page="workspace"] .section-title-row > div:first-child {
        flex: 1 1 220px;
    }

    body[data-page="workspace"] .workspace-announcement-header-actions {
        width: 100%;
        justify-content: flex-start;
    }

    body[data-page="workspace"] .workspace-announcement-header-actions .workspace-card-link {
        flex: 1 1 auto;
    }

    body[data-page="workspace"] .workspace-announcement-item {
        padding: 11px;
    }

    body[data-page="workspace"] .workspace-announcement-item h3 {
        margin-top: 7px;
        font-size: 0.84rem;
    }

    body[data-page="workspace"] .workspace-announcement-body {
        font-size: 0.73rem;
        -webkit-line-clamp: 2;
    }

    body[data-page="workspace"] .workspace-announcement-footer {
        align-items: flex-end;
        gap: 7px;
        font-size: 0.63rem;
    }

    body[data-page="workspace"] .announcement-read-button {
        min-height: 29px;
        padding: 4px 8px;
        font-size: 0.67rem;
    }

    body[data-page="workspace"] .workspace-premium-summary-grid {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        margin-top: 10px;
    }

    body[data-page="workspace"] .workspace-premium-summary-card {
        padding: 11px;
        border-radius: 13px;
    }

    body[data-page="workspace"] .workspace-premium-summary-card:last-child {
        grid-column: 1 / -1;
    }

    body[data-page="workspace"] .workspace-premium-mode-card > strong {
        margin-top: 10px;
        font-size: 0.94rem;
    }

    body[data-page="workspace"] .workspace-premium-card-hint,
    body[data-page="workspace"] .workspace-premium-desc {
        display: none;
    }

    body[data-page="workspace"] .workspace-premium-value-row {
        gap: 7px;
        margin-top: 10px;
    }

    body[data-page="workspace"] .workspace-premium-value-icon {
        flex-basis: 32px;
        width: 32px;
        height: 32px;
        border-radius: 9px;
        font-size: 0.62rem;
    }

    body[data-page="workspace"] .workspace-premium-big-value {
        font-size: 0.92rem;
    }

    body[data-page="workspace"] .workspace-premium-link-row {
        gap: 4px;
        margin-top: 9px;
    }

    body[data-page="workspace"] .workspace-premium-pill-links a {
        min-height: 24px;
        padding: 2px 6px;
        font-size: 0.6rem;
    }

    body[data-page="workspace"] .workspace-premium-reminder-card {
        gap: 8px;
        margin-top: 8px;
        padding: 9px 10px;
    }

    body[data-page="workspace"] .workspace-premium-reminder-icon {
        flex-basis: 29px;
        width: 29px;
        height: 29px;
    }

    body[data-page="workspace"] .workspace-premium-reminder-card h3 {
        font-size: 0.75rem;
    }

    body[data-page="workspace"] .workspace-premium-reminder-card p {
        display: -webkit-box;
        overflow: hidden;
        font-size: 0.68rem;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    body[data-page="workspace"] .workspace-premium-card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 7px;
    }

    body[data-page="workspace"] .workspace-premium-action-card {
        display: flex;
        flex-direction: column;
        gap: 7px;
        min-height: 132px;
        padding: 10px;
    }

    body[data-page="workspace"] .workspace-premium-action-icon {
        width: 32px;
        height: 32px;
        border-radius: 9px;
        font-size: 0.75rem;
    }

    body[data-page="workspace"] .workspace-premium-action-content {
        flex: 1 1 auto;
    }

    body[data-page="workspace"] .workspace-premium-action-content h3 {
        font-size: 0.76rem;
    }

    body[data-page="workspace"] .workspace-premium-action-content p {
        margin-top: 3px;
        font-size: 0.65rem;
        line-height: 1.38;
        -webkit-line-clamp: 2;
    }

    body[data-page="workspace"] .workspace-premium-action-card > .workspace-card-link {
        width: 100%;
        min-height: 29px;
        padding: 4px 6px;
        font-size: 0.64rem;
    }

    body[data-page="workspace"] .workspace-premium-record-section > .section-title-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
    }

    body[data-page="workspace"] .workspace-premium-record-section > .section-title-row > div:first-child {
        grid-column: 1 / -1;
    }

    body[data-page="workspace"] .workspace-premium-record-section > .section-title-row .section-count {
        grid-column: 1;
        justify-self: start;
    }

    body[data-page="workspace"] .workspace-premium-record-section > .section-title-row .workspace-card-link {
        grid-column: 2;
        justify-self: end;
    }

    body[data-page="workspace"] .workspace-premium-attendance-item {
        padding: 10px;
    }

    body[data-page="workspace"] .attendance-info-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 5px;
        margin-top: 7px;
    }

    body[data-page="workspace"] .attendance-info-grid > div {
        padding: 7px 8px;
    }

    body[data-page="workspace"] .workspace-feedback-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        padding: 0 7px 7px;
    }

    body[data-page="workspace"] .bottom-nav {
        bottom: max(7px, env(safe-area-inset-bottom));
        width: calc(100% - 18px);
        max-width: 430px;
        grid-template-columns: repeat(3, 1fr);
        padding: 4px;
        border-radius: 14px;
    }

    body[data-page="workspace"] .bottom-nav a {
        min-height: 36px;
        padding: 5px;
        font-size: 0.68rem;
    }
}

/* ---------- Very small phones ---------- */
@media (max-width: 390px) {
    body[data-page="workspace"] .container.page-with-nav {
        width: calc(100% - 14px);
    }

    body[data-page="workspace"] .workspace-premium-summary-grid,
    body[data-page="workspace"] .workspace-premium-card-grid {
        grid-template-columns: 1fr;
    }

    body[data-page="workspace"] .workspace-premium-summary-card:last-child {
        grid-column: auto;
    }

    body[data-page="workspace"] .workspace-premium-action-card {
        min-height: 0;
    }

    body[data-page="workspace"] .workspace-announcement-footer {
        align-items: stretch;
        flex-direction: column;
    }

    body[data-page="workspace"] .workspace-announcement-footer form,
    body[data-page="workspace"] .announcement-read-button {
        width: 100%;
    }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    body[data-page="workspace"] *,
    body[data-page="workspace"] *::before,
    body[data-page="workspace"] *::after {
        scroll-behavior: auto !important;
        transition: none !important;
        animation: none !important;
    }
}

/* =========================================================
   Premium Visual Enhancement Layer
   Keeps the current compact layout; improves hierarchy only.
   ========================================================= */

body[data-page="workspace"] {
    --ws-gold: #b58a4a;
    --ws-gold-soft: #f8f2e8;
    --ws-navy: #24344a;
    --ws-blue: #426b9a;
    --ws-teal: #24766f;
}

/* Refined section headings */
body[data-page="workspace"] .workspace-premium-section,
body[data-page="workspace"] .workspace-premium-record-section {
    position: relative;
}

body[data-page="workspace"] .section-title-row h3,
body[data-page="workspace"] .workspace-announcement-board-header h2 {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 9px;
}

body[data-page="workspace"] .section-title-row h3::before,
body[data-page="workspace"] .workspace-announcement-board-header h2::before {
    content: "";
    width: 4px;
    height: 17px;
    flex: 0 0 4px;
    border-radius: 99px;
    background: linear-gradient(180deg, var(--ws-gold), #8b6b39);
    box-shadow: 0 0 0 4px rgba(181, 138, 74, 0.09);
}

/* Announcement board: premium editorial card */
body[data-page="workspace"] .workspace-announcement-board {
    position: relative;
    overflow: hidden;
    border-color: rgba(181, 138, 74, 0.28);
    background:
        linear-gradient(145deg, rgba(248, 242, 232, 0.65), rgba(255,255,255,0) 34%),
        var(--ws-surface);
    box-shadow: 0 10px 30px rgba(31, 41, 55, 0.07);
}

body[data-page="workspace"] .workspace-announcement-board::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: linear-gradient(180deg, var(--ws-gold), #735b35);
}

body[data-page="workspace"] .workspace-announcement-board::after {
    content: "";
    position: absolute;
    top: -70px;
    right: -55px;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(181,138,74,.10), transparent 68%);
    pointer-events: none;
}

body[data-page="workspace"] .workspace-announcement-eyebrow {
    color: #8a6735;
    letter-spacing: .14em;
}

body[data-page="workspace"] .workspace-announcement-item {
    position: relative;
    border-color: #e4e8ee;
    background: linear-gradient(180deg, #ffffff, #fbfcfe);
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.035);
}

body[data-page="workspace"] .workspace-announcement-item::before {
    content: "";
    position: absolute;
    inset: 10px auto 10px 0;
    width: 3px;
    border-radius: 99px;
    background: #cbd5e1;
}

body[data-page="workspace"] .workspace-announcement-item.is-unread::before {
    background: var(--ws-blue);
}

body[data-page="workspace"] .workspace-announcement-item.is-important::before {
    background: linear-gradient(180deg, #c78a35, #a34f2f);
}

body[data-page="workspace"] .workspace-announcement-item:hover {
    border-color: #ced7e3;
    box-shadow: 0 9px 24px rgba(15, 23, 42, 0.07);
    transform: translateY(-1px);
}

body[data-page="workspace"] .workspace-announcement-item h3 {
    letter-spacing: -.012em;
}

body[data-page="workspace"] .announcement-badge {
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.45);
}

body[data-page="workspace"] .announcement-read-button {
    box-shadow: 0 4px 10px rgba(51, 65, 85, 0.12);
}

/* Important unread alert */
body[data-page="workspace"] .workspace-important-announcement-alert {
    position: relative;
    overflow: hidden;
    border-color: rgba(180, 83, 9, .28);
    background:
        linear-gradient(135deg, rgba(255,247,237,.95), rgba(255,255,255,.96));
    box-shadow: 0 9px 24px rgba(154, 52, 18, 0.08);
}

body[data-page="workspace"] .workspace-important-announcement-alert::after {
    content: "";
    position: absolute;
    width: 130px;
    height: 130px;
    right: -55px;
    top: -62px;
    border-radius: 50%;
    border: 20px solid rgba(180, 83, 9, .045);
}

body[data-page="workspace"] .workspace-important-announcement-alert-icon {
    box-shadow: 0 6px 15px rgba(180, 83, 9, .18);
}

/* Summary cards */
body[data-page="workspace"] .workspace-premium-summary-card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border-color: rgba(203, 213, 225, .92);
    background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
    box-shadow: 0 8px 22px rgba(15, 23, 42, .055);
}

body[data-page="workspace"] .workspace-premium-summary-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: linear-gradient(90deg, #64748b, #cbd5e1);
}

body[data-page="workspace"] .workspace-premium-summary-card::after {
    content: "";
    position: absolute;
    z-index: -1;
    right: -42px;
    bottom: -58px;
    width: 145px;
    height: 145px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(100,116,139,.10), transparent 70%);
}

body[data-page="workspace"] .workspace-premium-mode-card::before {
    background: linear-gradient(90deg, #475569, #94a3b8);
}

body[data-page="workspace"] .workspace-premium-money-card {
    border-color: rgba(181, 138, 74, .32);
    background:
        linear-gradient(145deg, rgba(248,242,232,.82), rgba(255,255,255,.98) 58%);
}

body[data-page="workspace"] .workspace-premium-money-card::before {
    background: linear-gradient(90deg, #8b6b39, #d8b46f);
}

body[data-page="workspace"] .workspace-premium-money-card::after {
    background: radial-gradient(circle, rgba(181,138,74,.16), transparent 70%);
}

body[data-page="workspace"] .workspace-premium-time-card {
    border-color: rgba(66, 107, 154, .27);
    background:
        linear-gradient(145deg, rgba(237,245,253,.88), rgba(255,255,255,.98) 58%);
}

body[data-page="workspace"] .workspace-premium-time-card::before {
    background: linear-gradient(90deg, #315e8d, #78a3c8);
}

body[data-page="workspace"] .workspace-premium-time-card::after {
    background: radial-gradient(circle, rgba(66,107,154,.13), transparent 70%);
}

body[data-page="workspace"] .workspace-premium-summary-card:hover {
    border-color: #c2ccd8;
    box-shadow: 0 13px 30px rgba(15, 23, 42, .085);
    transform: translateY(-2px);
}

body[data-page="workspace"] .workspace-premium-card-top {
    position: relative;
    z-index: 1;
}

body[data-page="workspace"] .summary-label {
    color: #46546a;
    letter-spacing: .025em;
}

body[data-page="workspace"] .workspace-premium-mini-badge {
    border: 1px solid rgba(100, 116, 139, .16);
    background: rgba(255,255,255,.78);
    box-shadow: 0 3px 8px rgba(15,23,42,.04);
}

body[data-page="workspace"] .workspace-premium-money-card .workspace-premium-mini-badge {
    color: #7a5a28;
    border-color: rgba(181,138,74,.22);
    background: rgba(255,250,240,.9);
}

body[data-page="workspace"] .workspace-premium-time-card .workspace-premium-mini-badge {
    color: #315e8d;
    border-color: rgba(66,107,154,.18);
    background: rgba(242,248,255,.9);
}

body[data-page="workspace"] .workspace-premium-value-icon {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.75);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.65),
        0 7px 16px rgba(15,23,42,.10);
}

body[data-page="workspace"] .workspace-premium-money-card .workspace-premium-value-icon {
    color: #fff;
    background: linear-gradient(145deg, #9d7941, #6f542e);
}

body[data-page="workspace"] .workspace-premium-time-card .workspace-premium-value-icon {
    color: #fff;
    background: linear-gradient(145deg, #4d79a7, #294f78);
}

body[data-page="workspace"] .workspace-premium-big-value strong {
    font-variant-numeric: tabular-nums;
    letter-spacing: -.035em;
}

body[data-page="workspace"] .workspace-premium-money-card .workspace-premium-big-value strong {
    color: #5f4727;
}

body[data-page="workspace"] .workspace-premium-time-card .workspace-premium-big-value strong {
    color: #264f79;
}

body[data-page="workspace"] .workspace-premium-pill-links a {
    position: relative;
    border-color: rgba(148,163,184,.28);
    background: rgba(255,255,255,.72);
    box-shadow: 0 3px 8px rgba(15,23,42,.035);
}

body[data-page="workspace"] .workspace-premium-pill-links a:hover {
    color: var(--ws-primary-dark);
    border-color: #b7c2cf;
    background: #fff;
    box-shadow: 0 6px 13px rgba(15,23,42,.07);
}

body[data-page="workspace"] .workspace-premium-progress-shell {
    padding: 2px;
    border: 1px solid rgba(66,107,154,.12);
    background: rgba(255,255,255,.72);
}

body[data-page="workspace"] .workspace-premium-progress-bar {
    background: linear-gradient(90deg, #315e8d, #79a7ce);
    box-shadow: 0 0 12px rgba(66,107,154,.22);
}

/* Reminder card */
body[data-page="workspace"] .workspace-premium-reminder-card {
    position: relative;
    overflow: hidden;
    border-color: rgba(181,138,74,.22);
    background: linear-gradient(100deg, #fffdf8, #fff 65%);
}

body[data-page="workspace"] .workspace-premium-reminder-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: var(--ws-gold);
}

body[data-page="workspace"] .workspace-premium-reminder-icon {
    color: #fff;
    background: linear-gradient(145deg, #b88b46, #806031);
    box-shadow: 0 6px 14px rgba(128,96,49,.17);
}

/* Common function / management cards */
body[data-page="workspace"] .workspace-premium-action-card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border-color: #dde3ea;
    background: linear-gradient(145deg, #fff 0%, #fafbfd 100%);
    box-shadow: 0 5px 15px rgba(15,23,42,.035);
}

body[data-page="workspace"] .workspace-premium-action-card::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0 auto 0 0;
    width: 3px;
    background: linear-gradient(180deg, #64748b, #94a3b8);
    opacity: .72;
    transition: width .2s ease, opacity .2s ease;
}

body[data-page="workspace"] .workspace-premium-action-card::after {
    content: "";
    position: absolute;
    z-index: -1;
    right: -42px;
    top: -48px;
    width: 105px;
    height: 105px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(100,116,139,.085), transparent 70%);
}

body[data-page="workspace"] .workspace-premium-action-card:hover::before {
    width: 5px;
    opacity: 1;
}

body[data-page="workspace"] .workspace-premium-action-card:hover {
    border-color: #c7d0db;
    background: #fff;
    box-shadow: 0 12px 27px rgba(15,23,42,.08);
}

body[data-page="workspace"] .workspace-premium-action-icon {
    border: 1px solid rgba(255,255,255,.72);
    color: #fff;
    background: linear-gradient(145deg, #53657a, #2f3d50);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.16),
        0 7px 14px rgba(31,41,55,.13);
}

body[data-page="workspace"] .workspace-premium-action-card:nth-child(3n + 2) .workspace-premium-action-icon {
    background: linear-gradient(145deg, #526f8e, #314c69);
}

body[data-page="workspace"] .workspace-premium-action-card:nth-child(3n + 3) .workspace-premium-action-icon {
    background: linear-gradient(145deg, #58716e, #324e4b);
}

body[data-page="workspace"] .workspace-premium-action-content h3 {
    color: #243247;
    letter-spacing: -.012em;
}

body[data-page="workspace"] .workspace-premium-action-card > .workspace-card-link {
    border: 1px solid rgba(100,116,139,.17);
    background: rgba(248,250,252,.9);
    box-shadow: 0 3px 8px rgba(15,23,42,.035);
}

body[data-page="workspace"] .workspace-premium-action-card > .workspace-card-link::after {
    content: "›";
    margin-left: 4px;
    font-size: 1rem;
    line-height: 1;
    transition: transform .18s ease;
}

body[data-page="workspace"] .workspace-premium-action-card > .workspace-card-link:hover::after {
    transform: translateX(2px);
}

body[data-page="workspace"] .workspace-premium-action-card.excel-card::before {
    background: linear-gradient(180deg, #24766f, #65a59e);
}

body[data-page="workspace"] .workspace-premium-action-card.excel-card .workspace-premium-action-icon {
    background: linear-gradient(145deg, #33867e, #1f5b55);
}

/* Attendance records */
body[data-page="workspace"] .workspace-premium-attendance-item {
    position: relative;
    overflow: hidden;
    border-color: #dde4ec;
    background: linear-gradient(180deg, #fff, #fbfcfd);
}

body[data-page="workspace"] .workspace-premium-attendance-item::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: #64748b;
}

body[data-page="workspace"] .session-pill {
    border: 1px solid rgba(66,107,154,.15);
    color: #315e8d;
    background: #f1f7fd;
}

/* Mobile keeps the decoration restrained */
@media (max-width: 640px) {
    body[data-page="workspace"] .workspace-premium-summary-card::after,
    body[data-page="workspace"] .workspace-premium-action-card::after,
    body[data-page="workspace"] .workspace-announcement-board::after {
        transform: scale(.78);
        transform-origin: top right;
    }

    body[data-page="workspace"] .workspace-premium-summary-card:hover,
    body[data-page="workspace"] .workspace-premium-action-card:hover,
    body[data-page="workspace"] .workspace-announcement-item:hover {
        transform: none;
    }

    body[data-page="workspace"] .workspace-premium-action-icon,
    body[data-page="workspace"] .workspace-premium-value-icon {
        box-shadow: 0 4px 10px rgba(31,41,55,.11);
    }
}

@media (prefers-reduced-motion: reduce) {
    body[data-page="workspace"] .workspace-premium-summary-card,
    body[data-page="workspace"] .workspace-premium-action-card,
    body[data-page="workspace"] .workspace-announcement-item,
    body[data-page="workspace"] .workspace-card-link::after {
        transition: none !important;
    }
}

/* =========================================================
   Workspace Luxury V3 — visual refinement overrides
   Keeps the existing layout and spacing model.
   ========================================================= */

body[data-page="workspace"] .container.page-with-nav {
    position: relative;
}

/* Visually place the existing language switch inside the hero */
body[data-page="workspace"] .login-language-switch {
    position: absolute;
    z-index: 20;
    top: 30px;
    right: 16px;
    gap: 2px;
    margin: 0;
    padding: 3px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.24);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08),
                0 8px 20px rgba(15, 23, 42, 0.12);
    backdrop-filter: blur(12px);
}

body[data-page="workspace"] .login-language-switch button {
    min-width: 42px;
    min-height: 27px;
    padding: 3px 9px;
    border: 0;
    border-radius: 999px;
    color: rgba(255, 255, 255, 0.7);
    background: transparent;
    box-shadow: none;
    font-size: 0.7rem;
}

body[data-page="workspace"] .login-language-switch button:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
}

body[data-page="workspace"] .login-language-switch button.active {
    color: #152033;
    background: linear-gradient(180deg, #ffffff, #e9eef5);
    box-shadow: 0 3px 9px rgba(15, 23, 42, 0.18),
                inset 0 1px 0 #fff;
}

/* More refined premium hero */
body[data-page="workspace"] .workspace-premium-hero {
    isolation: isolate;
    min-height: 154px;
    padding: 24px 22px;
    border-color: rgba(255, 255, 255, 0.2);
    background:
        radial-gradient(circle at 14% 10%, rgba(255, 255, 255, 0.14), transparent 24%),
        radial-gradient(circle at 86% 110%, rgba(148, 163, 184, 0.25), transparent 35%),
        linear-gradient(120deg, rgba(255,255,255,.055), transparent 42%),
        linear-gradient(135deg, #182333 0%, #29374a 47%, #43536a 100%);
    box-shadow:
        0 18px 42px rgba(15, 23, 42, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        inset 0 -1px 0 rgba(15, 23, 42, 0.2);
}

body[data-page="workspace"] .workspace-premium-hero::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
    background-size: 28px 28px;
    mask-image: linear-gradient(90deg, rgba(0,0,0,.75), transparent 78%);
    pointer-events: none;
}

body[data-page="workspace"] .workspace-premium-hero::after {
    right: -70px;
    top: -112px;
    width: 290px;
    height: 290px;
    border: 42px solid rgba(255, 255, 255, 0.025);
    box-shadow: 0 0 0 1px rgba(255,255,255,.055);
}

body[data-page="workspace"] .workspace-premium-icon {
    position: relative;
    flex-basis: 58px;
    width: 58px;
    height: 58px;
    border-color: rgba(255, 255, 255, 0.22);
    border-radius: 18px;
    background:
        linear-gradient(145deg, rgba(255,255,255,.18), rgba(255,255,255,.055));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        0 12px 28px rgba(15, 23, 42, 0.22);
}

body[data-page="workspace"] .workspace-premium-icon::after {
    content: "";
    position: absolute;
    right: 7px;
    bottom: 7px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #86efac;
    box-shadow: 0 0 0 3px rgba(134, 239, 172, 0.13),
                0 0 12px rgba(134, 239, 172, 0.55);
}

body[data-page="workspace"] .workspace-premium-hero h1 {
    text-shadow: 0 2px 14px rgba(15, 23, 42, 0.22);
}

body[data-page="workspace"] .workspace-premium-hero-side {
    margin-top: 28px;
    padding: 14px 15px;
    border-color: rgba(255, 255, 255, 0.16);
    background:
        linear-gradient(145deg, rgba(255,255,255,.115), rgba(255,255,255,.045));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.1),
                0 12px 24px rgba(15,23,42,.12);
}

body[data-page="workspace"] .workspace-premium-hero-side strong::before {
    content: "";
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-right: 7px;
    border-radius: 50%;
    background: #86efac;
    box-shadow: 0 0 0 4px rgba(134,239,172,.1);
    vertical-align: 0.08em;
}

/* Premium interactive buttons */
body[data-page="workspace"] .workspace-card-link,
body[data-page="workspace"] .rooms-pro-action-btn.notification-btn,
body[data-page="workspace"] .announcement-read-button {
    position: relative;
    overflow: hidden;
    box-shadow: 0 7px 16px rgba(15, 23, 42, 0.08),
                inset 0 1px 0 rgba(255,255,255,.7);
}

body[data-page="workspace"] .workspace-card-link {
    border-color: #d8e0ea;
    background: linear-gradient(180deg, #ffffff 0%, #f3f6fa 100%);
}

body[data-page="workspace"] .workspace-card-link::before,
body[data-page="workspace"] .announcement-read-button::before {
    content: "";
    position: absolute;
    top: 0;
    left: -70%;
    width: 48%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.75), transparent);
    transform: skewX(-18deg);
    transition: left .45s ease;
    pointer-events: none;
}

body[data-page="workspace"] .workspace-card-link:hover::before,
body[data-page="workspace"] .announcement-read-button:hover::before {
    left: 125%;
}

body[data-page="workspace"] .workspace-premium-action-card > .workspace-card-link {
    min-height: 35px;
    padding-right: 37px;
}

body[data-page="workspace"] .workspace-premium-action-card > .workspace-card-link::after {
    content: "→";
    position: absolute;
    right: 8px;
    top: 50%;
    display: grid;
    width: 22px;
    height: 22px;
    place-items: center;
    border-radius: 7px;
    color: #fff;
    background: linear-gradient(145deg, #475569, #273549);
    box-shadow: 0 4px 10px rgba(30,41,59,.2);
    transform: translateY(-50%);
}

body[data-page="workspace"] .workspace-premium-action-card > .workspace-card-link:hover {
    color: #172033;
    border-color: #bac6d5;
    background: #fff;
    transform: translateY(-1px);
}

body[data-page="workspace"] .rooms-pro-action-btn.notification-btn {
    background: linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.08));
}

/* Real progress-track appearance for total duration card */
body[data-page="workspace"] .workspace-premium-progress-shell {
    position: relative;
    height: 10px;
    padding: 2px;
    overflow: hidden;
    border: 1px solid #d7e0eb;
    border-radius: 999px;
    background:
        repeating-linear-gradient(
            90deg,
            #eef2f7 0,
            #eef2f7 calc(12.5% - 1px),
            #dfe6ef calc(12.5% - 1px),
            #dfe6ef 12.5%
        );
    box-shadow: inset 0 2px 4px rgba(15,23,42,.06),
                0 1px 0 #fff;
}

body[data-page="workspace"] .workspace-premium-progress-bar {
    position: relative;
    width: 68%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #315f91 0%, #4f7fb0 56%, #78a2ca 100%);
    box-shadow: 0 2px 8px rgba(47,95,145,.28),
                inset 0 1px 0 rgba(255,255,255,.35);
    overflow: hidden;
}

body[data-page="workspace"] .workspace-premium-progress-bar::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, transparent 20%, rgba(255,255,255,.42) 48%, transparent 72%);
    transform: translateX(-120%);
    animation: ws-progress-shine 3.2s ease-in-out infinite;
}

@keyframes ws-progress-shine {
    0%, 48% { transform: translateX(-120%); }
    78%, 100% { transform: translateX(140%); }
}

body[data-page="workspace"] .workspace-premium-time-card .workspace-premium-desc {
    display: flex;
    align-items: center;
    gap: 6px;
}

body[data-page="workspace"] .workspace-premium-time-card .workspace-premium-desc::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #4f7fb0;
    box-shadow: 0 0 0 3px rgba(79,127,176,.11);
}

/* More designed attendance records */
body[data-page="workspace"] .workspace-premium-record-section {
    background:
        linear-gradient(180deg, rgba(248,250,252,.95), rgba(255,255,255,.98));
}

body[data-page="workspace"] .workspace-premium-attendance-item {
    position: relative;
    padding: 0;
    overflow: hidden;
    border: 1px solid #dbe3ed;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 7px 18px rgba(15,23,42,.055),
                inset 0 1px 0 #fff;
}

body[data-page="workspace"] .workspace-premium-attendance-item::before {
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    border-radius: 0;
    background: linear-gradient(180deg, #4f6f94, #8ca5bf);
}

body[data-page="workspace"] .workspace-premium-attendance-item .attendance-top-row {
    position: relative;
    padding: 13px 15px 11px 18px;
    border-bottom: 1px solid #e5eaf1;
    background:
        linear-gradient(90deg, rgba(237,244,251,.92), rgba(248,250,252,.72) 58%, #fff);
}

body[data-page="workspace"] .workspace-premium-attendance-item .attendance-top-row::after {
    content: "";
    position: absolute;
    right: 14px;
    bottom: -1px;
    width: 44px;
    height: 2px;
    border-radius: 999px;
    background: #7793b1;
}

body[data-page="workspace"] .workspace-premium-attendance-item .attendance-top-row h4 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    color: #172033;
    font-size: .95rem;
}

body[data-page="workspace"] .workspace-premium-attendance-item .attendance-top-row h4::before {
    content: "";
    width: 9px;
    height: 9px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: #4f7a68;
    box-shadow: 0 0 0 3px rgba(79,122,104,.14);
}

body[data-page="workspace"] .workspace-premium-attendance-item .attendance-top-row p {
    margin: 4px 0 0 17px;
    color: #69768a;
}

body[data-page="workspace"] .workspace-premium-attendance-item .session-pill {
    border: 1px solid #ccd7e4;
    color: #3b526d;
    background: linear-gradient(180deg, #fff, #edf3f8);
    box-shadow: 0 3px 8px rgba(15,23,42,.06);
}

body[data-page="workspace"] .workspace-premium-attendance-item .attendance-info-grid {
    gap: 0;
    padding: 10px 13px 13px 17px;
    border: 0;
    background: #fff;
}

body[data-page="workspace"] .workspace-premium-attendance-item .attendance-info-grid > div {
    position: relative;
    min-width: 0;
    padding: 8px 10px;
    border-right: 1px dashed #dfe5ed;
}

body[data-page="workspace"] .workspace-premium-attendance-item .attendance-info-grid > div:last-child {
    border-right: 0;
}

body[data-page="workspace"] .workspace-premium-attendance-item .attendance-info-grid span {
    display: block;
    margin-bottom: 3px;
    color: #8792a3;
    font-size: .67rem;
    font-weight: 750;
    letter-spacing: .025em;
}

body[data-page="workspace"] .workspace-premium-attendance-item .attendance-info-grid strong {
    color: #27364a;
    font-size: .79rem;
}

body[data-page="workspace"] .workspace-premium-attendance-item .attendance-note,
body[data-page="workspace"] .workspace-premium-attendance-item .workspace-feedback-details {
    margin-right: 13px;
    margin-left: 17px;
}

body[data-page="workspace"] .workspace-feedback-summary {
    border: 1px solid #dce4ed;
    background: linear-gradient(180deg, #fbfcfe, #f3f6fa);
    box-shadow: inset 0 1px 0 #fff;
}

@media (max-width: 700px) {
    body[data-page="workspace"] .login-language-switch {
        top: 27px;
        right: 11px;
    }

    body[data-page="workspace"] .workspace-premium-hero {
        padding-top: 30px;
    }

    body[data-page="workspace"] .workspace-premium-hero-side {
        margin-top: 0;
    }

    body[data-page="workspace"] .workspace-premium-attendance-item .attendance-info-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        padding: 8px 10px 11px 14px;
    }

    body[data-page="workspace"] .workspace-premium-attendance-item .attendance-info-grid > div {
        border-right: 0;
        border-bottom: 1px dashed #e2e7ee;
    }

    body[data-page="workspace"] .workspace-premium-attendance-item .attendance-info-grid > div:nth-last-child(-n + 2) {
        border-bottom: 0;
    }

    body[data-page="workspace"] .workspace-premium-attendance-item .attendance-top-row {
        padding-left: 15px;
    }

    body[data-page="workspace"] .workspace-premium-attendance-item .attendance-note,
    body[data-page="workspace"] .workspace-premium-attendance-item .workspace-feedback-details {
        margin-right: 10px;
        margin-left: 14px;
    }
}

@media (max-width: 390px) {
    body[data-page="workspace"] .login-language-switch button {
        min-width: 37px;
        padding-inline: 7px;
    }

    body[data-page="workspace"] .workspace-premium-hero {
        padding-top: 30px;
    }
}

@media (prefers-reduced-motion: reduce) {
    body[data-page="workspace"] .workspace-premium-progress-bar::after {
        animation: none;
    }
}


/* =========================================================
   Workspace Final Refinement
   Based on current global
   - Remove button arrows
   - Improve announcement board
   - Add slightly more breathing space
   - Enrich attendance record backgrounds
   ========================================================= */

/* ---------- Remove arrows beside action buttons ---------- */
body[data-page="workspace"] .workspace-premium-action-card > .workspace-card-link {
    padding-right: 12px;
}

body[data-page="workspace"] .workspace-premium-action-card > .workspace-card-link::after {
    content: none !important;
    display: none !important;
}

/* ---------- Slightly increase breathing space ---------- */
body[data-page="workspace"] .workspace-announcement-board,
body[data-page="workspace"] .workspace-premium-section,
body[data-page="workspace"] .workspace-premium-record-section {
    padding: 20px;
}

body[data-page="workspace"] .workspace-premium-summary-card {
    padding: 17px;
}

body[data-page="workspace"] .workspace-premium-action-card {
    padding: 15px;
    gap: 10px 12px;
}

body[data-page="workspace"] .workspace-premium-card-grid {
    gap: 11px;
}

body[data-page="workspace"] .workspace-record-list,
body[data-page="workspace"] .workspace-announcement-list {
    gap: 11px;
}

body[data-page="workspace"] .section-title-row,
body[data-page="workspace"] .workspace-announcement-board-header {
    margin-bottom: 15px;
}

/* ---------- Premium company announcement board ---------- */
body[data-page="workspace"] .workspace-announcement-board {
    border: 1px solid rgba(168, 133, 75, 0.30);
    background:
        radial-gradient(circle at 100% 0%, rgba(181, 138, 74, 0.10), transparent 250px),
        linear-gradient(145deg, #fffdf9 0%, #ffffff 48%, #f8fafc 100%);
    box-shadow:
        0 14px 34px rgba(51, 65, 85, 0.075),
        inset 0 1px 0 rgba(255,255,255,.95);
}

body[data-page="workspace"] .workspace-announcement-board::before {
    width: 5px;
    background: linear-gradient(
        180deg,
        #d3ae6c 0%,
        #9a7340 48%,
        #42566f 100%
    );
}

body[data-page="workspace"] .workspace-announcement-board-header {
    position: relative;
    z-index: 2;
    align-items: center;
    padding: 3px 2px 15px 4px;
    border-bottom: 1px solid rgba(181, 138, 74, 0.17);
}

body[data-page="workspace"] .workspace-announcement-board-header h2 {
    font-size: 1.08rem;
    letter-spacing: -0.02em;
}

body[data-page="workspace"] .workspace-announcement-board-header h2::before {
    width: 5px;
    height: 20px;
    flex-basis: 5px;
    background: linear-gradient(180deg, #cda55e, #7e6034);
    box-shadow: 0 0 0 5px rgba(181, 138, 74, 0.09);
}

body[data-page="workspace"] .workspace-announcement-board-header p {
    max-width: 700px;
    margin-top: 5px;
    line-height: 1.55;
}

body[data-page="workspace"] .workspace-announcement-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 6px;
    color: #8a6735;
}

body[data-page="workspace"] .workspace-announcement-eyebrow::before {
    content: "";
    width: 18px;
    height: 1px;
    background: linear-gradient(90deg, #b58a4a, transparent);
}

body[data-page="workspace"] .workspace-announcement-header-actions .workspace-card-link {
    min-height: 34px;
    padding: 6px 12px;
    border-color: rgba(145, 117, 73, 0.22);
    color: #5d4829;
    background:
        linear-gradient(180deg, rgba(255,255,255,.98), rgba(249,244,235,.92));
    box-shadow:
        0 5px 12px rgba(91, 70, 38, 0.07),
        inset 0 1px 0 #fff;
}

body[data-page="workspace"] .workspace-announcement-header-actions .workspace-card-link:hover {
    color: #fff;
    border-color: #8c6939;
    background: linear-gradient(145deg, #9a7641, #6f522d);
}

/* Announcement item hierarchy */
body[data-page="workspace"] .workspace-announcement-item {
    padding: 15px 16px 14px 18px;
    border: 1px solid #e1e6ed;
    border-radius: 14px;
    background:
        linear-gradient(135deg, rgba(248,250,252,.96), rgba(255,255,255,.98));
    box-shadow:
        0 6px 16px rgba(15,23,42,.04),
        inset 0 1px 0 #fff;
}

body[data-page="workspace"] .workspace-announcement-item::before {
    inset: 13px auto 13px 0;
    width: 4px;
}

body[data-page="workspace"] .workspace-announcement-item.is-unread {
    border-color: rgba(66, 107, 154, 0.22);
    background:
        linear-gradient(90deg, rgba(237,245,253,.92), rgba(255,255,255,.98) 28%);
}

body[data-page="workspace"] .workspace-announcement-item.is-important {
    border-color: rgba(181, 107, 52, 0.26);
    background:
        linear-gradient(90deg, rgba(255,246,235,.96), rgba(255,255,255,.99) 30%);
}

body[data-page="workspace"] .workspace-announcement-item h3 {
    margin-top: 10px;
    margin-bottom: 5px;
    color: #1d2a3c;
    font-size: .98rem;
}

body[data-page="workspace"] .workspace-announcement-body {
    color: #59677b;
    line-height: 1.62;
}

body[data-page="workspace"] .workspace-announcement-footer {
    margin-top: 12px;
    padding-top: 11px;
    border-top-color: #dfe5ec;
}

body[data-page="workspace"] .announcement-badge {
    min-height: 23px;
    padding: 3px 8px;
    border: 1px solid rgba(148,163,184,.12);
}

/* ---------- Better attendance section background ---------- */
body[data-page="workspace"] .workspace-premium-record-section {
    position: relative;
    overflow: hidden;
    border-color: rgba(107, 130, 158, 0.25);
    background:
        radial-gradient(circle at 100% 0%, rgba(79, 111, 148, 0.11), transparent 260px),
        radial-gradient(circle at 0% 100%, rgba(181, 138, 74, 0.08), transparent 240px),
        linear-gradient(145deg, #f3f7fb 0%, #f8fafc 46%, #eef3f8 100%);
    box-shadow:
        0 14px 34px rgba(51, 65, 85, 0.075),
        inset 0 1px 0 rgba(255,255,255,.9);
}

body[data-page="workspace"] .workspace-premium-record-section::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 3px;
    background: linear-gradient(
        90deg,
        #4c6988 0%,
        #8ba3bd 48%,
        #b58a4a 100%
    );
}

body[data-page="workspace"] .workspace-premium-record-section > * {
    position: relative;
    z-index: 1;
}

body[data-page="workspace"] .workspace-premium-record-section > .section-title-row {
    padding: 2px 2px 14px;
    border-bottom: 1px solid rgba(111, 135, 163, 0.16);
}

body[data-page="workspace"] .workspace-premium-record-section .section-count {
    border-color: rgba(79, 111, 148, .19);
    color: #3f5875;
    background: rgba(255,255,255,.74);
    box-shadow: 0 4px 10px rgba(51,65,85,.045);
}

body[data-page="workspace"] .workspace-premium-attendance-item {
    border-color: rgba(106, 130, 158, 0.24);
    background:
        linear-gradient(145deg, rgba(255,255,255,.98), rgba(242,247,251,.96));
    box-shadow:
        0 9px 22px rgba(37, 52, 71, 0.065),
        inset 0 1px 0 rgba(255,255,255,.95);
}

body[data-page="workspace"] .workspace-premium-attendance-item:nth-child(even) {
    background:
        linear-gradient(145deg, rgba(255,255,255,.99), rgba(247,244,237,.92));
}

body[data-page="workspace"] .workspace-premium-attendance-item .attendance-top-row {
    background:
        linear-gradient(
            90deg,
            rgba(226,237,247,.98) 0%,
            rgba(245,248,251,.96) 56%,
            rgba(255,255,255,.98) 100%
        );
}

body[data-page="workspace"] .workspace-premium-attendance-item:nth-child(even) .attendance-top-row {
    background:
        linear-gradient(
            90deg,
            rgba(244,236,221,.93) 0%,
            rgba(249,247,242,.96) 56%,
            rgba(255,255,255,.98) 100%
        );
}

body[data-page="workspace"] .workspace-premium-attendance-item .attendance-info-grid {
    background: transparent;
}

body[data-page="workspace"] .workspace-premium-attendance-item .attendance-info-grid > div {
    margin: 2px;
    border: 1px solid rgba(213,221,231,.72);
    border-radius: 10px;
    background: rgba(255,255,255,.63);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.78);
}

body[data-page="workspace"] .workspace-premium-attendance-item .attendance-info-grid > div:last-child {
    border-right: 1px solid rgba(213,221,231,.72);
}

body[data-page="workspace"] .workspace-feedback-details {
    background: rgba(255,255,255,.70);
}

/* ---------- Mobile refinements ---------- */
@media (max-width: 700px) {
    body[data-page="workspace"] .workspace-announcement-board,
    body[data-page="workspace"] .workspace-premium-section,
    body[data-page="workspace"] .workspace-premium-record-section {
        padding: 14px;
    }

    body[data-page="workspace"] .workspace-premium-summary-card {
        padding: 13px;
    }

    body[data-page="workspace"] .workspace-premium-action-card {
        padding: 12px;
    }

    body[data-page="workspace"] .workspace-announcement-board-header {
        padding-bottom: 12px;
    }

    body[data-page="workspace"] .workspace-announcement-item {
        padding: 12px 12px 11px 15px;
    }

    body[data-page="workspace"] .workspace-premium-attendance-item .attendance-info-grid > div {
        margin: 2px;
        border: 1px solid rgba(213,221,231,.72);
    }
}

@media (max-width: 390px) {
    body[data-page="workspace"] .workspace-announcement-board,
    body[data-page="workspace"] .workspace-premium-section,
    body[data-page="workspace"] .workspace-premium-record-section {
        padding: 12px;
    }
}



/* =========================================================
   Workspace Role Colour + Summary Upgrade
   Keeps all other approved UI styles.
   ========================================================= */

/* ---------- Role colour system ---------- */
body[data-page="workspace"] {
    --role-color: #334155;
    --role-color-dark: #1e293b;
    --role-color-rgb: 51, 65, 85;
    --role-soft: #f1f5f9;
}

body[data-page="workspace"].role-promoter {
    --role-color: #be185d;
    --role-color-dark: #9d174d;
    --role-color-rgb: 190, 24, 93;
    --role-soft: #fdf2f8;
}

body[data-page="workspace"].role-business {
    --role-color: #1e3a8a;
    --role-color-dark: #172554;
    --role-color-rgb: 30, 58, 138;
    --role-soft: #eff6ff;
}

body[data-page="workspace"].role-team-leader {
    --role-color: #4c1d95;
    --role-color-dark: #3b0764;
    --role-color-rgb: 76, 29, 149;
    --role-soft: #f5f3ff;
}

body[data-page="workspace"].role-dj {
    --role-color: #831843;
    --role-color-dark: #500724;
    --role-color-rgb: 131, 24, 67;
    --role-soft: #fdf2f8;
}

body[data-page="workspace"].role-manager,
body[data-page="workspace"].role-store-manager,
body[data-page="workspace"].role-senior-admin {
    --role-color: #334155;
    --role-color-dark: #1e293b;
    --role-color-rgb: 51, 65, 85;
    --role-soft: #f1f5f9;
}

/* ---------- All primary workspace buttons follow role ---------- */
body[data-page="workspace"] .workspace-card-link,
body[data-page="workspace"] .announcement-read-button,
body[data-page="workspace"] .rooms-pro-action-btn.notification-btn {
    border-color: rgba(var(--role-color-rgb), .24);
}

body[data-page="workspace"] .workspace-premium-action-card > .workspace-card-link,
body[data-page="workspace"] .workspace-announcement-header-actions .workspace-card-link,
body[data-page="workspace"] .workspace-premium-record-section > .section-title-row .workspace-card-link {
    color: var(--role-color-dark);
    border-color: rgba(var(--role-color-rgb), .22);
    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.98),
            rgba(var(--role-color-rgb), .065)
        );
    box-shadow:
        0 5px 12px rgba(var(--role-color-rgb), .08),
        inset 0 1px 0 rgba(255,255,255,.95);
}

body[data-page="workspace"] .workspace-card-link:hover,
body[data-page="workspace"] .announcement-read-button:hover,
body[data-page="workspace"] .workspace-announcement-header-actions .workspace-card-link:hover,
body[data-page="workspace"] .workspace-premium-action-card > .workspace-card-link:hover {
    color: #fff;
    border-color: var(--role-color);
    background:
        linear-gradient(145deg, var(--role-color), var(--role-color-dark));
    box-shadow:
        0 8px 18px rgba(var(--role-color-rgb), .22),
        inset 0 1px 0 rgba(255,255,255,.16);
}

body[data-page="workspace"] .workspace-premium-pill-links a:hover {
    color: #fff;
    border-color: var(--role-color);
    background: var(--role-color);
    box-shadow: 0 6px 14px rgba(var(--role-color-rgb), .18);
}

body[data-page="workspace"] .bottom-nav a.active {
    background:
        linear-gradient(145deg, var(--role-color), var(--role-color-dark));
    box-shadow: 0 5px 13px rgba(var(--role-color-rgb), .22);
}

/* Function icon and side accent also follow role */
body[data-page="workspace"] .workspace-premium-action-card::before {
    background:
        linear-gradient(
            180deg,
            var(--role-color),
            rgba(var(--role-color-rgb), .52)
        );
}

body[data-page="workspace"] .workspace-premium-action-icon,
body[data-page="workspace"] .workspace-premium-action-card:nth-child(3n + 2) .workspace-premium-action-icon,
body[data-page="workspace"] .workspace-premium-action-card:nth-child(3n + 3) .workspace-premium-action-icon {
    background:
        linear-gradient(145deg, var(--role-color), var(--role-color-dark));
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.18),
        0 7px 15px rgba(var(--role-color-rgb), .18);
}

/* Keep Excel settlement visually identifiable */
body[data-page="workspace"] .workspace-premium-action-card.excel-card::before {
    background: linear-gradient(180deg, #24766f, #65a59e);
}

body[data-page="workspace"] .workspace-premium-action-card.excel-card .workspace-premium-action-icon {
    background: linear-gradient(145deg, #33867e, #1f5b55);
}

/* ---------- Cleaner company announcement header ---------- */
body[data-page="workspace"] .workspace-announcement-board-header {
    position: relative;
    z-index: 2;
    align-items: center;
    margin-bottom: 14px;
    padding: 0 0 13px;
    border-bottom: 1px solid #e3e8ef;
    background: transparent;
}

body[data-page="workspace"] .workspace-announcement-board-header::before,
body[data-page="workspace"] .workspace-announcement-board-header::after {
    content: none;
    display: none;
}

body[data-page="workspace"] .workspace-announcement-board-header h2 {
    display: block;
    color: #1d2a3c;
    font-size: 1.08rem;
    letter-spacing: -.018em;
}

body[data-page="workspace"] .workspace-announcement-board-header h2::before {
    content: none;
    display: none;
}

body[data-page="workspace"] .workspace-announcement-eyebrow {
    display: inline-flex;
    align-items: center;
    min-height: 23px;
    margin-bottom: 6px;
    padding: 3px 8px;
    border: 1px solid rgba(var(--role-color-rgb), .16);
    border-radius: 999px;
    color: var(--role-color);
    background: rgba(var(--role-color-rgb), .07);
    font-size: .62rem;
    letter-spacing: .11em;
}

body[data-page="workspace"] .workspace-announcement-eyebrow::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--role-color);
    box-shadow: 0 0 0 3px rgba(var(--role-color-rgb), .10);
}

body[data-page="workspace"] .workspace-announcement-board-header p {
    max-width: 720px;
    margin-top: 4px;
    color: #748195;
    line-height: 1.5;
}

/* Remove the previous heavy gold announcement treatment */
body[data-page="workspace"] .workspace-announcement-board {
    border-color: #dfe5ec;
    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(var(--role-color-rgb), .065),
            transparent 245px
        ),
        linear-gradient(145deg, #ffffff, #f8fafc);
}

body[data-page="workspace"] .workspace-announcement-board::before {
    width: 4px;
    background:
        linear-gradient(
            180deg,
            var(--role-color),
            rgba(var(--role-color-rgb), .40)
        );
}

body[data-page="workspace"] .workspace-announcement-board::after {
    background:
        radial-gradient(
            circle,
            rgba(var(--role-color-rgb), .08),
            transparent 68%
        );
}

/* ---------- More attractive check-in mode card ---------- */
body[data-page="workspace"] .workspace-premium-mode-card {
    border-color: rgba(var(--role-color-rgb), .28);
    background:
        radial-gradient(
            circle at 100% 100%,
            rgba(var(--role-color-rgb), .16),
            transparent 155px
        ),
        linear-gradient(
            145deg,
            rgba(var(--role-color-rgb), .11),
            rgba(255,255,255,.98) 56%
        );
    box-shadow:
        0 12px 28px rgba(var(--role-color-rgb), .10),
        inset 0 1px 0 rgba(255,255,255,.95);
}

body[data-page="workspace"] .workspace-premium-mode-card::before {
    height: 4px;
    background:
        linear-gradient(
            90deg,
            var(--role-color-dark),
            var(--role-color),
            rgba(var(--role-color-rgb), .36)
        );
}

body[data-page="workspace"] .workspace-premium-mode-card::after {
    right: -35px;
    bottom: -50px;
    width: 150px;
    height: 150px;
    border: 24px solid rgba(var(--role-color-rgb), .045);
    background: transparent;
}

body[data-page="workspace"] .workspace-premium-mode-card .workspace-premium-mini-badge {
    color: var(--role-color-dark);
    border-color: rgba(var(--role-color-rgb), .20);
    background: rgba(255,255,255,.76);
}

body[data-page="workspace"] .workspace-premium-mode-card > strong {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-top: 16px;
    padding: 8px 11px;
    border: 1px solid rgba(var(--role-color-rgb), .16);
    border-radius: 11px;
    color: var(--role-color-dark);
    background: rgba(255,255,255,.72);
    box-shadow:
        0 5px 13px rgba(var(--role-color-rgb), .08),
        inset 0 1px 0 rgba(255,255,255,.95);
}

body[data-page="workspace"] .workspace-premium-mode-card > strong::before {
    content: "";
    width: 9px;
    height: 9px;
    flex: 0 0 9px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: var(--role-color);
    box-shadow: 0 0 0 4px rgba(var(--role-color-rgb), .12);
}

body[data-page="workspace"] .workspace-premium-mode-card .workspace-premium-meta-list {
    padding: 9px 11px;
    border: 1px solid rgba(var(--role-color-rgb), .10);
    border-radius: 11px;
    background: rgba(255,255,255,.54);
}

/* ---------- More attractive balance card ---------- */
body[data-page="workspace"] .workspace-premium-money-card {
    border-color: rgba(181, 138, 74, .38);
    background:
        radial-gradient(circle at 100% 0%, rgba(218, 180, 109, .19), transparent 175px),
        radial-gradient(circle at 0% 100%, rgba(139, 107, 57, .10), transparent 165px),
        linear-gradient(145deg, #fffaf0 0%, #ffffff 57%, #f7f2e8 100%);
    box-shadow:
        0 13px 30px rgba(118, 86, 38, .11),
        inset 0 1px 0 rgba(255,255,255,.96);
}

body[data-page="workspace"] .workspace-premium-money-card::before {
    height: 4px;
    background:
        linear-gradient(90deg, #6f542e, #b58a4a 52%, #e2c17e);
}

body[data-page="workspace"] .workspace-premium-money-card::after {
    right: -45px;
    bottom: -66px;
    width: 165px;
    height: 165px;
    border: 26px solid rgba(181,138,74,.055);
    background: transparent;
}

body[data-page="workspace"] .workspace-premium-money-card .workspace-premium-value-row {
    position: relative;
    margin-top: 15px;
    padding: 12px;
    border: 1px solid rgba(181,138,74,.18);
    border-radius: 13px;
    background:
        linear-gradient(135deg, rgba(255,255,255,.82), rgba(248,242,232,.72));
    box-shadow:
        0 7px 17px rgba(111,84,46,.08),
        inset 0 1px 0 rgba(255,255,255,.95);
}

body[data-page="workspace"] .workspace-premium-money-card .workspace-premium-value-icon {
    flex-basis: 43px;
    width: 43px;
    height: 43px;
    border-radius: 13px;
    background:
        linear-gradient(145deg, #b48a4b, #6f542e);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.22),
        0 8px 18px rgba(111,84,46,.22);
}

body[data-page="workspace"] .workspace-premium-money-card .workspace-premium-big-value {
    font-size: clamp(1.18rem, 1.9vw, 1.55rem);
}

body[data-page="workspace"] .workspace-premium-money-card .workspace-premium-big-value strong {
    color: #543e20;
    text-shadow: 0 1px 0 rgba(255,255,255,.9);
}

body[data-page="workspace"] .workspace-premium-money-card .workspace-premium-pill-links a {
    color: #6f542e;
    border-color: rgba(181,138,74,.20);
    background: rgba(255,252,246,.80);
}

body[data-page="workspace"] .workspace-premium-money-card .workspace-premium-pill-links a:hover {
    color: #fff;
    border-color: #8b6b39;
    background: linear-gradient(145deg, #a47d42, #6f542e);
}

/* ---------- Mobile ---------- */
@media (max-width: 700px) {
    body[data-page="workspace"] .workspace-announcement-board-header {
        align-items: flex-start;
        padding-bottom: 11px;
    }

    body[data-page="workspace"] .workspace-premium-mode-card > strong {
        padding: 7px 9px;
    }

    body[data-page="workspace"] .workspace-premium-mode-card .workspace-premium-meta-list {
        padding: 7px 8px;
    }

    body[data-page="workspace"] .workspace-premium-money-card .workspace-premium-value-row {
        padding: 9px;
    }

    body[data-page="workspace"] .workspace-premium-money-card .workspace-premium-value-icon {
        flex-basis: 35px;
        width: 35px;
        height: 35px;
        border-radius: 10px;
    }
}



/* =========================================================
   Workspace Mobile-Visible Buttons + Announcement Header V2
   ========================================================= */

/* ---------- Buttons are coloured by default, not only on hover ---------- */
body[data-page="workspace"] .workspace-premium-action-card > .workspace-card-link,
body[data-page="workspace"] .workspace-announcement-header-actions .workspace-card-link,
body[data-page="workspace"] .workspace-premium-record-section > .section-title-row .workspace-card-link,
body[data-page="workspace"] .announcement-read-button {
    color: #fff;
    border-color: var(--role-color);
    background:
        linear-gradient(145deg, var(--role-color), var(--role-color-dark));
    box-shadow:
        0 7px 16px rgba(var(--role-color-rgb), .20),
        inset 0 1px 0 rgba(255,255,255,.16);
}

body[data-page="workspace"] .workspace-premium-action-card > .workspace-card-link:hover,
body[data-page="workspace"] .workspace-announcement-header-actions .workspace-card-link:hover,
body[data-page="workspace"] .workspace-premium-record-section > .section-title-row .workspace-card-link:hover,
body[data-page="workspace"] .announcement-read-button:hover {
    color: #fff;
    border-color: var(--role-color-dark);
    background:
        linear-gradient(145deg, var(--role-color-dark), var(--role-color));
    box-shadow:
        0 9px 20px rgba(var(--role-color-rgb), .26),
        inset 0 1px 0 rgba(255,255,255,.18);
    transform: translateY(-1px);
}

body[data-page="workspace"] .workspace-premium-action-card > .workspace-card-link:active,
body[data-page="workspace"] .workspace-announcement-header-actions .workspace-card-link:active,
body[data-page="workspace"] .workspace-premium-record-section > .section-title-row .workspace-card-link:active,
body[data-page="workspace"] .announcement-read-button:active {
    transform: translateY(0) scale(.985);
    box-shadow:
        0 4px 10px rgba(var(--role-color-rgb), .18),
        inset 0 2px 4px rgba(15,23,42,.12);
}

/* Wallet mini buttons are also visible on mobile */
body[data-page="workspace"] .workspace-premium-pill-links a {
    color: #fff;
    border-color: var(--role-color);
    background:
        linear-gradient(145deg, var(--role-color), var(--role-color-dark));
    box-shadow:
        0 5px 12px rgba(var(--role-color-rgb), .16),
        inset 0 1px 0 rgba(255,255,255,.14);
}

body[data-page="workspace"] .workspace-premium-pill-links a:hover,
body[data-page="workspace"] .workspace-premium-pill-links a:active {
    color: #fff;
    border-color: var(--role-color-dark);
    background:
        linear-gradient(145deg, var(--role-color-dark), var(--role-color));
}

/* Keep balance card links gold so the asset card remains visually distinct */
body[data-page="workspace"] .workspace-premium-money-card .workspace-premium-pill-links a {
    color: #fff;
    border-color: #8b6b39;
    background: linear-gradient(145deg, #a47d42, #6f542e);
    box-shadow:
        0 5px 12px rgba(111,84,46,.18),
        inset 0 1px 0 rgba(255,255,255,.15);
}

/* ---------- Completely redesigned announcement header ---------- */
body[data-page="workspace"] .workspace-announcement-board-header {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 18px;
    margin: -4px -4px 15px;
    padding: 15px 16px;
    overflow: hidden;
    border: 1px solid rgba(var(--role-color-rgb), .16);
    border-radius: 14px;
    background:
        linear-gradient(
            120deg,
            rgba(var(--role-color-rgb), .11),
            rgba(255,255,255,.96) 46%,
            rgba(var(--role-color-rgb), .045)
        );
    box-shadow:
        0 7px 18px rgba(var(--role-color-rgb), .065),
        inset 0 1px 0 rgba(255,255,255,.92);
}

body[data-page="workspace"] .workspace-announcement-board-header::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    display: block;
    width: 5px;
    background:
        linear-gradient(180deg, var(--role-color), var(--role-color-dark));
}

body[data-page="workspace"] .workspace-announcement-board-header::after {
    content: "";
    position: absolute;
    right: -38px;
    top: -44px;
    display: block;
    width: 120px;
    height: 120px;
    border: 18px solid rgba(var(--role-color-rgb), .045);
    border-radius: 50%;
    pointer-events: none;
}

body[data-page="workspace"] .workspace-announcement-board-header > div:first-child {
    position: relative;
    z-index: 1;
    min-width: 0;
    padding-left: 3px;
}

body[data-page="workspace"] .workspace-announcement-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 24px;
    margin: 0 0 7px;
    padding: 3px 9px;
    border: 1px solid rgba(var(--role-color-rgb), .18);
    border-radius: 999px;
    color: var(--role-color-dark);
    background: rgba(255,255,255,.70);
    box-shadow: 0 3px 8px rgba(var(--role-color-rgb), .05);
    font-size: .61rem;
    letter-spacing: .105em;
}

body[data-page="workspace"] .workspace-announcement-eyebrow::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--role-color);
    box-shadow: 0 0 0 4px rgba(var(--role-color-rgb), .10);
}

body[data-page="workspace"] .workspace-announcement-board-header h2 {
    display: block;
    margin: 0;
    color: #172033;
    font-size: clamp(1.03rem, 1.6vw, 1.18rem);
    font-weight: 850;
    line-height: 1.25;
    letter-spacing: -.022em;
}

body[data-page="workspace"] .workspace-announcement-board-header h2::before {
    content: none !important;
    display: none !important;
}

body[data-page="workspace"] .workspace-announcement-board-header p {
    max-width: 720px;
    margin: 5px 0 0;
    color: #657287;
    font-size: .76rem;
    line-height: 1.5;
}

body[data-page="workspace"] .workspace-announcement-header-actions {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 7px;
}

body[data-page="workspace"] .workspace-announcement-header-actions .workspace-card-link {
    min-height: 35px;
    padding: 6px 12px;
    border-radius: 10px;
    white-space: nowrap;
}

/* Remove decorative shine from announcement header buttons for a cleaner look */
body[data-page="workspace"] .workspace-announcement-header-actions .workspace-card-link::before {
    content: none;
    display: none;
}

/* ---------- Mobile layout ---------- */
@media (max-width: 700px) {
    body[data-page="workspace"] .workspace-announcement-board-header {
        grid-template-columns: 1fr;
        gap: 11px;
        margin: -2px -2px 12px;
        padding: 13px;
        border-radius: 12px;
    }

    body[data-page="workspace"] .workspace-announcement-header-actions {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        justify-content: stretch;
    }

    body[data-page="workspace"] .workspace-announcement-header-actions .workspace-card-link {
        width: 100%;
        min-width: 0;
        white-space: normal;
    }

    body[data-page="workspace"] .workspace-premium-action-card > .workspace-card-link,
    body[data-page="workspace"] .announcement-read-button {
        box-shadow:
            0 5px 12px rgba(var(--role-color-rgb), .18),
            inset 0 1px 0 rgba(255,255,255,.14);
    }
}

@media (max-width: 390px) {
    body[data-page="workspace"] .workspace-announcement-header-actions {
        grid-template-columns: 1fr;
    }
}



/* =========================================================
   Wallet Link Grid Layout
   - First two links share one row
   - Third link fills the full row
   ========================================================= */

body[data-page="workspace"] .workspace-premium-money-card .workspace-premium-link-row.workspace-premium-pill-links {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    width: 100%;
    margin-top: 13px;
}

body[data-page="workspace"] .workspace-premium-money-card .workspace-premium-link-row.workspace-premium-pill-links a {
    width: 100%;
    min-width: 0;
    min-height: 32px;
    justify-content: center;
    padding: 5px 9px;
    border-radius: 10px;
    text-align: center;
    white-space: normal;
}

body[data-page="workspace"] .workspace-premium-money-card .workspace-premium-link-row.workspace-premium-pill-links a:nth-child(3) {
    grid-column: 1 / -1;
}

/* Mobile remains compact while keeping the 2 + 1 structure */
@media (max-width: 700px) {
    body[data-page="workspace"] .workspace-premium-money-card .workspace-premium-link-row.workspace-premium-pill-links {
        gap: 5px;
        margin-top: 10px;
    }

    body[data-page="workspace"] .workspace-premium-money-card .workspace-premium-link-row.workspace-premium-pill-links a {
        min-height: 29px;
        padding: 4px 6px;
        font-size: .62rem;
    }
}

/* Very narrow screens can still keep two short buttons side by side */
@media (max-width: 330px) {
    body[data-page="workspace"] .workspace-premium-money-card .workspace-premium-link-row.workspace-premium-pill-links {
        grid-template-columns: 1fr;
    }

    body[data-page="workspace"] .workspace-premium-money-card .workspace-premium-link-row.workspace-premium-pill-links a:nth-child(3) {
        grid-column: auto;
    }
}



/* =========================================================
   Workspace Role Hero + Role Logo Upgrade
   Logo files must be placed in: static/img/
   ========================================================= */

/* ---------- Seven distinct role palettes ---------- */
body[data-page="workspace"].role-promoter {
    --role-color: #db2777;
    --role-color-dark: #9d174d;
    --role-color-rgb: 219, 39, 119;
    --role-hero-1: #831843;
    --role-hero-2: #be185d;
    --role-hero-3: #ec4899;
    --role-logo: url("../img/promoter.png");
}

body[data-page="workspace"].role-business {
    --role-color: #1e3a8a;
    --role-color-dark: #172554;
    --role-color-rgb: 30, 58, 138;
    --role-hero-1: #172554;
    --role-hero-2: #1e3a8a;
    --role-hero-3: #2563eb;
    --role-logo: url("../img/business.png");
}

body[data-page="workspace"].role-team-leader {
    --role-color: #4c1d95;
    --role-color-dark: #2e1065;
    --role-color-rgb: 76, 29, 149;
    --role-hero-1: #2e1065;
    --role-hero-2: #4c1d95;
    --role-hero-3: #7c3aed;
    --role-logo: url("../img/leader.png");
}

body[data-page="workspace"].role-dj {
    --role-color: #831843;
    --role-color-dark: #500724;
    --role-color-rgb: 131, 24, 67;
    --role-hero-1: #500724;
    --role-hero-2: #831843;
    --role-hero-3: #be123c;
    --role-logo: url("../img/dj.png");
}

body[data-page="workspace"].role-manager {
    --role-color: #0f766e;
    --role-color-dark: #134e4a;
    --role-color-rgb: 15, 118, 110;
    --role-hero-1: #134e4a;
    --role-hero-2: #0f766e;
    --role-hero-3: #14b8a6;
    --role-logo: url("../img/manager.png");
}

body[data-page="workspace"].role-store-manager {
    --role-color: #b45309;
    --role-color-dark: #78350f;
    --role-color-rgb: 180, 83, 9;
    --role-hero-1: #78350f;
    --role-hero-2: #b45309;
    --role-hero-3: #d97706;
    --role-logo: url("../img/store_manager.png");
}

body[data-page="workspace"].role-senior-admin {
    --role-color: #334155;
    --role-color-dark: #0f172a;
    --role-color-rgb: 51, 65, 85;
    --role-hero-1: #0f172a;
    --role-hero-2: #334155;
    --role-hero-3: #64748b;
    --role-logo: url("../img/admin.png");
}

/* ---------- Hero follows current role ---------- */
body[data-page="workspace"] .workspace-premium-hero {
    border-color: rgba(255,255,255,.22);
    background:
        radial-gradient(circle at 13% 8%, rgba(255,255,255,.18), transparent 25%),
        radial-gradient(circle at 90% 108%, rgba(255,255,255,.13), transparent 36%),
        linear-gradient(120deg, rgba(255,255,255,.055), transparent 43%),
        linear-gradient(
            135deg,
            var(--role-hero-1, #0f172a) 0%,
            var(--role-hero-2, #334155) 52%,
            var(--role-hero-3, #64748b) 100%
        );
    box-shadow:
        0 18px 42px rgba(var(--role-color-rgb), .23),
        inset 0 1px 0 rgba(255,255,255,.14),
        inset 0 -1px 0 rgba(15,23,42,.22);
}

body[data-page="workspace"] .workspace-premium-hero::after {
    border-color: rgba(255,255,255,.045);
    box-shadow:
        0 0 0 1px rgba(255,255,255,.07),
        0 0 80px rgba(var(--role-color-rgb), .20);
}

/* ---------- Replace the text icon with role logo ---------- */
body[data-page="workspace"] .workspace-premium-icon {
    position: relative;
    display: block;
    flex: 0 0 66px;
    width: 66px;
    height: 66px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.25);
    border-radius: 20px;
    color: transparent;
    font-size: 0;
    line-height: 0;
    background:
        linear-gradient(145deg, rgba(255,255,255,.20), rgba(255,255,255,.07));
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.20),
        0 13px 28px rgba(15,23,42,.24);
}

body[data-page="workspace"] .workspace-premium-icon::before {
    content: "";
    position: absolute;
    inset: 7px;
    border-radius: 15px;
    background-image: var(--role-logo);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    filter: drop-shadow(0 5px 9px rgba(15,23,42,.22));
}

body[data-page="workspace"] .workspace-premium-icon::after {
    z-index: 2;
    right: 6px;
    bottom: 6px;
    width: 7px;
    height: 7px;
}

/* ---------- Role badge follows exact role colour ---------- */
body[data-page="workspace"] .role-badge.promoter,
body[data-page="workspace"] .role-badge.business,
body[data-page="workspace"] .role-badge.team-leader,
body[data-page="workspace"] .role-badge.dj,
body[data-page="workspace"] .role-badge.admin {
    border-color: rgba(255,255,255,.24);
    background: rgba(var(--role-color-rgb), .72);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.16),
        0 4px 10px rgba(15,23,42,.13);
}

body[data-page="workspace"] .workspace-premium-hero-side {
    border-color: rgba(255,255,255,.18);
    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.15),
            rgba(var(--role-color-rgb), .10)
        );
}

body[data-page="workspace"] .rooms-pro-action-btn.notification-btn {
    border-color: rgba(255,255,255,.22);
    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.20),
            rgba(255,255,255,.09)
        );
}

/* ---------- Tablet and mobile ---------- */
@media (max-width: 1024px) {
    body[data-page="workspace"] .workspace-premium-icon {
        flex-basis: 58px;
        width: 58px;
        height: 58px;
        border-radius: 17px;
    }

    body[data-page="workspace"] .workspace-premium-icon::before {
        inset: 6px;
        border-radius: 13px;
    }
}

@media (max-width: 700px) {
    body[data-page="workspace"] .workspace-premium-icon {
        flex-basis: 48px;
        width: 48px;
        height: 48px;
        border-radius: 14px;
    }

    body[data-page="workspace"] .workspace-premium-icon::before {
        inset: 5px;
        border-radius: 11px;
    }

    body[data-page="workspace"] .workspace-premium-icon::after {
        right: 4px;
        bottom: 4px;
        width: 6px;
        height: 6px;
    }
}



/* =========================================================
   PRMS Notifications — Role Premium Responsive UI
   Uses the same role palette and logo system as Workspace.
   ========================================================= */

body[data-page="notifications"] {
    --role-color: #334155;
    --role-color-dark: #0f172a;
    --role-color-rgb: 51, 65, 85;
    --role-hero-1: #0f172a;
    --role-hero-2: #334155;
    --role-hero-3: #64748b;
    --role-logo: url("../img/admin.png");
    margin: 0;
    color: #172033;
    background:
        radial-gradient(circle at 100% 0%, rgba(var(--role-color-rgb), .08), transparent 28rem),
        #f3f5f8;
    font-family: Inter, "Segoe UI", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

body[data-page="notifications"].role-promoter {
    --role-color: #db2777;
    --role-color-dark: #9d174d;
    --role-color-rgb: 219, 39, 119;
    --role-hero-1: #831843;
    --role-hero-2: #be185d;
    --role-hero-3: #ec4899;
    --role-logo: url("../img/promoter.png");
}

body[data-page="notifications"].role-business {
    --role-color: #1e3a8a;
    --role-color-dark: #172554;
    --role-color-rgb: 30, 58, 138;
    --role-hero-1: #172554;
    --role-hero-2: #1e3a8a;
    --role-hero-3: #2563eb;
    --role-logo: url("../img/business.png");
}

body[data-page="notifications"].role-team-leader {
    --role-color: #4c1d95;
    --role-color-dark: #2e1065;
    --role-color-rgb: 76, 29, 149;
    --role-hero-1: #2e1065;
    --role-hero-2: #4c1d95;
    --role-hero-3: #7c3aed;
    --role-logo: url("../img/leader.png");
}

body[data-page="notifications"].role-dj {
    --role-color: #831843;
    --role-color-dark: #500724;
    --role-color-rgb: 131, 24, 67;
    --role-hero-1: #500724;
    --role-hero-2: #831843;
    --role-hero-3: #be123c;
    --role-logo: url("../img/dj.png");
}

body[data-page="notifications"].role-manager {
    --role-color: #0f766e;
    --role-color-dark: #134e4a;
    --role-color-rgb: 15, 118, 110;
    --role-hero-1: #134e4a;
    --role-hero-2: #0f766e;
    --role-hero-3: #14b8a6;
    --role-logo: url("../img/manager.png");
}

body[data-page="notifications"].role-store-manager {
    --role-color: #b45309;
    --role-color-dark: #78350f;
    --role-color-rgb: 180, 83, 9;
    --role-hero-1: #78350f;
    --role-hero-2: #b45309;
    --role-hero-3: #d97706;
    --role-logo: url("../img/store_manager.png");
}

body[data-page="notifications"].role-senior-admin {
    --role-color: #334155;
    --role-color-dark: #0f172a;
    --role-color-rgb: 51, 65, 85;
    --role-hero-1: #0f172a;
    --role-hero-2: #334155;
    --role-hero-3: #64748b;
    --role-logo: url("../img/admin.png");
}

body[data-page="notifications"] *,
body[data-page="notifications"] *::before,
body[data-page="notifications"] *::after {
    box-sizing: border-box;
}

body[data-page="notifications"] .container.page-with-nav {
    width: min(100% - 32px, 1180px);
    margin: 0 auto;
    padding: 18px 4px 92px;
}

/* ---------- Role hero ---------- */
body[data-page="notifications"] .notifications-premium-hero {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 18px;
    min-height: 154px;
    padding: 24px 22px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 20px;
    color: #fff;
    background:
        radial-gradient(circle at 13% 8%, rgba(255,255,255,.18), transparent 25%),
        radial-gradient(circle at 90% 108%, rgba(255,255,255,.13), transparent 36%),
        linear-gradient(120deg, rgba(255,255,255,.055), transparent 43%),
        linear-gradient(
            135deg,
            var(--role-hero-1) 0%,
            var(--role-hero-2) 52%,
            var(--role-hero-3) 100%
        );
    box-shadow:
        0 18px 42px rgba(var(--role-color-rgb), .23),
        inset 0 1px 0 rgba(255,255,255,.14),
        inset 0 -1px 0 rgba(15,23,42,.22);
}

body[data-page="notifications"] .notifications-premium-hero::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
    background-size: 28px 28px;
    mask-image: linear-gradient(90deg, rgba(0,0,0,.75), transparent 78%);
    pointer-events: none;
}

body[data-page="notifications"] .notifications-premium-hero::after {
    content: "";
    position: absolute;
    right: -70px;
    top: -112px;
    width: 290px;
    height: 290px;
    border: 42px solid rgba(255,255,255,.035);
    border-radius: 50%;
    box-shadow:
        0 0 0 1px rgba(255,255,255,.07),
        0 0 80px rgba(var(--role-color-rgb), .20);
}

body[data-page="notifications"] .notifications-premium-hero-main {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
}

body[data-page="notifications"] .notifications-premium-icon {
    position: relative;
    display: block;
    flex: 0 0 66px;
    width: 66px;
    height: 66px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.25);
    border-radius: 20px;
    color: transparent;
    font-size: 0;
    line-height: 0;
    background:
        linear-gradient(145deg, rgba(255,255,255,.20), rgba(255,255,255,.07));
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.20),
        0 13px 28px rgba(15,23,42,.24);
}

body[data-page="notifications"] .notifications-premium-icon::before {
    content: "";
    position: absolute;
    inset: 7px;
    border-radius: 15px;
    background-image: var(--role-logo);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    filter: drop-shadow(0 5px 9px rgba(15,23,42,.22));
}

body[data-page="notifications"] .notifications-premium-icon::after {
    content: "";
    position: absolute;
    z-index: 2;
    right: 6px;
    bottom: 6px;
    width: 7px;
    height: 7px;
    border: 2px solid rgba(255,255,255,.95);
    border-radius: 50%;
    background: #86efac;
    box-shadow:
        0 0 0 3px rgba(134,239,172,.13),
        0 0 12px rgba(134,239,172,.55);
}

body[data-page="notifications"] .notifications-premium-hero .page-subtitle {
    margin: 0 0 3px;
    color: rgba(255,255,255,.68);
    font-size: .7rem;
    font-weight: 850;
    letter-spacing: .11em;
    text-transform: uppercase;
}

body[data-page="notifications"] .notifications-premium-hero h1 {
    margin: 0;
    color: #fff;
    font-size: clamp(1.4rem, 2.2vw, 2rem);
    line-height: 1.18;
    letter-spacing: -.026em;
    text-shadow: 0 2px 14px rgba(15,23,42,.22);
}

body[data-page="notifications"] .notifications-premium-desc {
    max-width: 720px;
    margin: 6px 0 0;
    color: rgba(255,255,255,.72);
    font-size: .78rem;
    line-height: 1.52;
}

body[data-page="notifications"] .notifications-premium-hero .section-count {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 27px;
    margin-top: 10px;
    padding: 4px 9px;
    border: 1px solid rgba(255,255,255,.20);
    border-radius: 999px;
    color: #fff;
    background: rgba(255,255,255,.12);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
    font-size: .68rem;
    font-weight: 850;
}

body[data-page="notifications"] .notifications-premium-back-btn {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 7px 13px;
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 11px;
    color: #fff;
    background:
        linear-gradient(180deg, rgba(255,255,255,.20), rgba(255,255,255,.09));
    box-shadow:
        0 8px 18px rgba(15,23,42,.14),
        inset 0 1px 0 rgba(255,255,255,.13);
    font-size: .74rem;
    font-weight: 850;
    text-decoration: none;
}

/* ---------- Shared content cards ---------- */
body[data-page="notifications"] .notifications-premium-control-card,
body[data-page="notifications"] .notifications-premium-batch-card,
body[data-page="notifications"] .notifications-premium-list-card {
    position: relative;
    margin-top: 14px;
    padding: 18px;
    overflow: hidden;
    border: 1px solid rgba(var(--role-color-rgb), .16);
    border-radius: 16px;
    background:
        radial-gradient(circle at 100% 0%, rgba(var(--role-color-rgb), .055), transparent 220px),
        linear-gradient(145deg, #fff, #f8fafc);
    box-shadow:
        0 10px 28px rgba(15,23,42,.06),
        inset 0 1px 0 rgba(255,255,255,.95);
}

body[data-page="notifications"] .notifications-premium-control-card::before,
body[data-page="notifications"] .notifications-premium-list-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background:
        linear-gradient(180deg, var(--role-color), var(--role-color-dark));
}

body[data-page="notifications"] .section-title-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 13px;
}

body[data-page="notifications"] .section-title-row h3 {
    margin: 0;
    color: #172033;
    font-size: 1rem;
    line-height: 1.3;
    letter-spacing: -.015em;
}

body[data-page="notifications"] .section-title-row h3::before {
    content: "";
    display: inline-block;
    width: 4px;
    height: 17px;
    margin-right: 8px;
    border-radius: 99px;
    background:
        linear-gradient(180deg, var(--role-color), var(--role-color-dark));
    box-shadow: 0 0 0 4px rgba(var(--role-color-rgb), .08);
    vertical-align: -.15em;
}

body[data-page="notifications"] .section-subtitle {
    margin: 3px 0 0;
    color: #7a879a;
    font-size: .76rem;
}

/* ---------- Search/filter form ---------- */
body[data-page="notifications"] .notifications-premium-search-form {
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

body[data-page="notifications"] .notifications-premium-search-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr;
    gap: 10px;
}

body[data-page="notifications"] .notifications-premium-search-grid label {
    display: block;
    margin-bottom: 5px;
    color: #526078;
    font-size: .7rem;
    font-weight: 800;
}

body[data-page="notifications"] .notifications-premium-search-grid select,
body[data-page="notifications"] .notifications-premium-search-grid input {
    width: 100%;
    min-height: 40px;
    padding: 8px 10px;
    border: 1px solid #d7dfe9;
    border-radius: 10px;
    color: #172033;
    background: rgba(255,255,255,.9);
    box-shadow:
        inset 0 1px 2px rgba(15,23,42,.03),
        0 3px 8px rgba(15,23,42,.025);
    font: inherit;
    font-size: .76rem;
}

body[data-page="notifications"] .notifications-premium-search-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 11px;
}

body[data-page="notifications"] .notifications-premium-search-actions button,
body[data-page="notifications"] .notifications-premium-clear-btn,
body[data-page="notifications"] .notifications-premium-batch-btn,
body[data-page="notifications"] .notifications-premium-action-form button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 6px 11px;
    border: 1px solid var(--role-color);
    border-radius: 10px;
    color: #fff;
    background:
        linear-gradient(145deg, var(--role-color), var(--role-color-dark));
    box-shadow:
        0 7px 16px rgba(var(--role-color-rgb), .20),
        inset 0 1px 0 rgba(255,255,255,.16);
    font: inherit;
    font-size: .72rem;
    font-weight: 850;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}

body[data-page="notifications"] .notifications-premium-clear-btn {
    border-color: rgba(var(--role-color-rgb), .20);
    color: var(--role-color-dark);
    background:
        linear-gradient(180deg, #fff, rgba(var(--role-color-rgb), .07));
    box-shadow:
        0 5px 12px rgba(var(--role-color-rgb), .08),
        inset 0 1px 0 #fff;
}

body[data-page="notifications"] .notifications-premium-quick-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
    margin-top: 13px;
    padding-top: 12px;
    border-top: 1px dashed #dce3eb;
}

body[data-page="notifications"] .notifications-premium-quick-row > span {
    color: #7a879a;
    font-size: .68rem;
    font-weight: 800;
}

body[data-page="notifications"] .notifications-premium-chip {
    display: inline-flex;
    align-items: center;
    min-height: 29px;
    padding: 4px 9px;
    border: 1px solid rgba(var(--role-color-rgb), .18);
    border-radius: 999px;
    color: var(--role-color-dark);
    background: rgba(var(--role-color-rgb), .065);
    font-size: .66rem;
    font-weight: 850;
    text-decoration: none;
}

body[data-page="notifications"] .notifications-premium-chip.unread {
    color: #9f1239;
    border-color: rgba(225,29,72,.17);
    background: #fff1f2;
}

body[data-page="notifications"] .notifications-premium-chip.read {
    color: #166534;
    border-color: rgba(22,101,52,.16);
    background: #f0fdf4;
}

/* ---------- Batch action cards ---------- */
body[data-page="notifications"] .notifications-premium-batch-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 15px 17px;
}

body[data-page="notifications"] .notifications-premium-batch-left {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
}

body[data-page="notifications"] .notifications-premium-batch-icon {
    display: grid;
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    place-items: center;
    border: 1px solid rgba(255,255,255,.72);
    border-radius: 11px;
    color: #fff;
    background:
        linear-gradient(145deg, var(--role-color), var(--role-color-dark));
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.16),
        0 7px 14px rgba(var(--role-color-rgb), .18);
    font-size: .8rem;
    font-weight: 900;
}

body[data-page="notifications"] .notifications-premium-batch-card h3 {
    margin: 0;
    color: #223047;
    font-size: .87rem;
}

body[data-page="notifications"] .notifications-premium-batch-card p {
    margin: 3px 0 0;
    color: #7a879a;
    font-size: .71rem;
}

/* ---------- Notification list ---------- */
body[data-page="notifications"] .notifications-premium-list {
    display: grid;
    gap: 10px;
}

body[data-page="notifications"] .notifications-premium-item {
    position: relative;
    padding: 15px 16px 14px 18px;
    overflow: hidden;
    border: 1px solid #dfe5ec;
    border-radius: 14px;
    background:
        linear-gradient(145deg, #fff, #f8fafc);
    box-shadow:
        0 7px 18px rgba(15,23,42,.045),
        inset 0 1px 0 rgba(255,255,255,.95);
}

body[data-page="notifications"] .notifications-premium-item::before {
    content: "";
    position: absolute;
    inset: 12px auto 12px 0;
    width: 4px;
    border-radius: 99px;
    background: #cbd5e1;
}

body[data-page="notifications"] .notifications-premium-item.notifications-premium-unread {
    border-color: rgba(var(--role-color-rgb), .24);
    background:
        linear-gradient(
            90deg,
            rgba(var(--role-color-rgb), .09),
            #fff 28%
        );
}

body[data-page="notifications"] .notifications-premium-item.notifications-premium-unread::before {
    background:
        linear-gradient(180deg, var(--role-color), var(--role-color-dark));
}

body[data-page="notifications"] .notifications-premium-item-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

body[data-page="notifications"] .notifications-premium-item h4 {
    margin: 0;
    color: #1d2a3c;
    font-size: .92rem;
    line-height: 1.35;
}

body[data-page="notifications"] .notifications-premium-item-top p {
    margin: 3px 0 0;
    color: #8792a3;
    font-size: .68rem;
}

body[data-page="notifications"] .notifications-premium-status-pill {
    display: inline-flex;
    flex: 0 0 auto;
    min-height: 25px;
    align-items: center;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: .64rem;
    font-weight: 850;
}

body[data-page="notifications"] .notifications-premium-unread-pill {
    color: #9f1239;
    background: #ffe4e6;
}

body[data-page="notifications"] .notifications-premium-read-pill {
    color: #166534;
    background: #dcfce7;
}

body[data-page="notifications"] .notifications-premium-body {
    margin-top: 10px;
    padding: 10px 11px;
    border: 1px solid #e3e8ef;
    border-radius: 10px;
    color: #59677b;
    background: rgba(255,255,255,.68);
    font-size: .76rem;
    line-height: 1.58;
    overflow-wrap: anywhere;
}

body[data-page="notifications"] .notifications-premium-action-form {
    display: flex;
    justify-content: flex-end;
    margin-top: 10px;
}

body[data-page="notifications"] .notifications-premium-action-form button {
    min-height: 32px;
    padding-inline: 12px;
}

/* ---------- Counts, pagination, empty ---------- */
body[data-page="notifications"] .notifications-premium-list-card .section-count {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 4px 9px;
    border: 1px solid rgba(var(--role-color-rgb), .16);
    border-radius: 999px;
    color: var(--role-color-dark);
    background: rgba(var(--role-color-rgb), .06);
    font-size: .7rem;
    font-weight: 850;
}

body[data-page="notifications"] .pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    margin-top: 15px;
}

body[data-page="notifications"] .pagination a,
body[data-page="notifications"] .pagination span {
    display: inline-grid;
    min-width: 33px;
    min-height: 33px;
    padding: 5px 8px;
    place-items: center;
    border: 1px solid #d9e0e9;
    border-radius: 9px;
    color: #526078;
    background: #fff;
    font-size: .7rem;
    font-weight: 800;
    text-decoration: none;
}

body[data-page="notifications"] .pagination a.active {
    color: #fff;
    border-color: var(--role-color);
    background:
        linear-gradient(145deg, var(--role-color), var(--role-color-dark));
}

body[data-page="notifications"] .empty-state-card {
    display: grid;
    min-height: 100px;
    place-items: center;
    padding: 20px;
    border: 1px dashed rgba(var(--role-color-rgb), .22);
    border-radius: 13px;
    color: #7a879a;
    background: rgba(var(--role-color-rgb), .035);
    font-size: .78rem;
    text-align: center;
}

/* ---------- Bottom navigation ---------- */
body[data-page="notifications"] .bottom-nav a.active {
    color: #fff;
    background:
        linear-gradient(145deg, var(--role-color), var(--role-color-dark));
    box-shadow: 0 5px 13px rgba(var(--role-color-rgb), .22);
}

/* ---------- Responsive ---------- */
@media (max-width: 800px) {
    body[data-page="notifications"] .notifications-premium-search-grid {
        grid-template-columns: 1fr 1fr;
    }

    body[data-page="notifications"] .notifications-premium-search-grid > div:first-child {
        grid-column: 1 / -1;
    }
}

@media (max-width: 700px) {
    body[data-page="notifications"] .container.page-with-nav {
        width: min(100% - 18px, 640px);
        padding: 9px 0 86px;
    }

    body[data-page="notifications"] .notifications-premium-hero {
        grid-template-columns: 1fr;
        gap: 13px;
        min-height: 0;
        padding: 18px 15px;
        border-radius: 17px;
    }

    body[data-page="notifications"] .notifications-premium-icon {
        flex-basis: 49px;
        width: 49px;
        height: 49px;
        border-radius: 14px;
    }

    body[data-page="notifications"] .notifications-premium-icon::before {
        inset: 5px;
        border-radius: 11px;
    }

    body[data-page="notifications"] .notifications-premium-back-btn {
        width: 100%;
    }

    body[data-page="notifications"] .notifications-premium-control-card,
    body[data-page="notifications"] .notifications-premium-list-card {
        padding: 14px;
        border-radius: 14px;
    }

    body[data-page="notifications"] .notifications-premium-search-grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    body[data-page="notifications"] .notifications-premium-search-grid > div:first-child {
        grid-column: auto;
    }

    body[data-page="notifications"] .notifications-premium-batch-card {
        align-items: stretch;
        flex-direction: column;
        padding: 13px;
        border-radius: 14px;
    }

    body[data-page="notifications"] .notifications-premium-batch-card form,
    body[data-page="notifications"] .notifications-premium-batch-btn {
        width: 100%;
    }

    body[data-page="notifications"] .notifications-premium-item {
        padding: 13px 12px 12px 15px;
    }

    body[data-page="notifications"] .notifications-premium-item-top {
        align-items: flex-start;
    }

    body[data-page="notifications"] .notifications-premium-action-form button {
        width: 100%;
    }
}

@media (max-width: 390px) {
    body[data-page="notifications"] .notifications-premium-search-actions {
        grid-template-columns: 1fr;
    }

    body[data-page="notifications"] .notifications-premium-item-top {
        flex-direction: column;
    }
}

@media (prefers-reduced-motion: reduce) {
    body[data-page="notifications"] *,
    body[data-page="notifications"] *::before,
    body[data-page="notifications"] *::after {
        animation: none !important;
        transition: none !important;
    }
}


/* =========================================================
   PRMS Profile — Role Premium Responsive UI
   Matches Workspace and Notifications design language.
   ========================================================= */

body[data-page="profile"] {
    --role-color: #334155;
    --role-color-dark: #0f172a;
    --role-color-rgb: 51, 65, 85;
    --role-hero-1: #0f172a;
    --role-hero-2: #334155;
    --role-hero-3: #64748b;
    margin: 0;
    color: #172033;
    background:
        radial-gradient(circle at 100% 0%, rgba(var(--role-color-rgb), .08), transparent 28rem),
        #f3f5f8;
    font-family: Inter, "Segoe UI", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

body[data-page="profile"].role-promoter {
    --role-color: #db2777;
    --role-color-dark: #9d174d;
    --role-color-rgb: 219, 39, 119;
    --role-hero-1: #831843;
    --role-hero-2: #be185d;
    --role-hero-3: #ec4899;
}

body[data-page="profile"].role-business {
    --role-color: #1e3a8a;
    --role-color-dark: #172554;
    --role-color-rgb: 30, 58, 138;
    --role-hero-1: #172554;
    --role-hero-2: #1e3a8a;
    --role-hero-3: #2563eb;
}

body[data-page="profile"].role-team-leader {
    --role-color: #4c1d95;
    --role-color-dark: #2e1065;
    --role-color-rgb: 76, 29, 149;
    --role-hero-1: #2e1065;
    --role-hero-2: #4c1d95;
    --role-hero-3: #7c3aed;
}

body[data-page="profile"].role-dj {
    --role-color: #831843;
    --role-color-dark: #500724;
    --role-color-rgb: 131, 24, 67;
    --role-hero-1: #500724;
    --role-hero-2: #831843;
    --role-hero-3: #be123c;
}

body[data-page="profile"].role-manager {
    --role-color: #0f766e;
    --role-color-dark: #134e4a;
    --role-color-rgb: 15, 118, 110;
    --role-hero-1: #134e4a;
    --role-hero-2: #0f766e;
    --role-hero-3: #14b8a6;
}

body[data-page="profile"].role-store-manager {
    --role-color: #b45309;
    --role-color-dark: #78350f;
    --role-color-rgb: 180, 83, 9;
    --role-hero-1: #78350f;
    --role-hero-2: #b45309;
    --role-hero-3: #d97706;
}

body[data-page="profile"].role-senior-admin {
    --role-color: #334155;
    --role-color-dark: #0f172a;
    --role-color-rgb: 51, 65, 85;
    --role-hero-1: #0f172a;
    --role-hero-2: #334155;
    --role-hero-3: #64748b;
}

body[data-page="profile"] *,
body[data-page="profile"] *::before,
body[data-page="profile"] *::after {
    box-sizing: border-box;
}

body[data-page="profile"] .container.page-with-nav {
    position: relative;
    width: min(100% - 32px, 1180px);
    margin: 0 auto;
    padding: 18px 4px 92px;
}

/* ---------- Language switch inside hero ---------- */
body[data-page="profile"] .login-language-switch {
    position: absolute;
    z-index: 20;
    top: 30px;
    right: 16px;
    display: flex;
    gap: 2px;
    margin: 0;
    padding: 3px;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 999px;
    background: rgba(15,23,42,.24);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.08),
        0 8px 20px rgba(15,23,42,.12);
    backdrop-filter: blur(12px);
}

body[data-page="profile"] .login-language-switch form {
    margin: 0;
}

body[data-page="profile"] .login-language-switch button {
    min-width: 42px;
    min-height: 27px;
    padding: 3px 9px;
    border: 0;
    border-radius: 999px;
    color: rgba(255,255,255,.72);
    background: transparent;
    box-shadow: none;
    font: inherit;
    font-size: .7rem;
    font-weight: 800;
    cursor: pointer;
}

body[data-page="profile"] .login-language-switch button.active {
    color: #152033;
    background: linear-gradient(180deg, #fff, #e9eef5);
    box-shadow:
        0 3px 9px rgba(15,23,42,.18),
        inset 0 1px 0 #fff;
}

/* ---------- Profile hero ---------- */
body[data-page="profile"] .profile-premium-hero {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(220px, .34fr);
    align-items: center;
    gap: 18px;
    min-height: 168px;
    padding: 28px 22px 24px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 20px;
    color: #fff;
    background:
        radial-gradient(circle at 13% 8%, rgba(255,255,255,.18), transparent 25%),
        radial-gradient(circle at 90% 108%, rgba(255,255,255,.13), transparent 36%),
        linear-gradient(120deg, rgba(255,255,255,.055), transparent 43%),
        linear-gradient(
            135deg,
            var(--role-hero-1) 0%,
            var(--role-hero-2) 52%,
            var(--role-hero-3) 100%
        );
    box-shadow:
        0 18px 42px rgba(var(--role-color-rgb), .23),
        inset 0 1px 0 rgba(255,255,255,.14),
        inset 0 -1px 0 rgba(15,23,42,.22);
}

body[data-page="profile"] .profile-premium-hero::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
    background-size: 28px 28px;
    mask-image: linear-gradient(90deg, rgba(0,0,0,.75), transparent 78%);
}

body[data-page="profile"] .profile-premium-hero::after {
    content: "";
    position: absolute;
    right: -70px;
    top: -112px;
    width: 290px;
    height: 290px;
    border: 42px solid rgba(255,255,255,.035);
    border-radius: 50%;
    box-shadow:
        0 0 0 1px rgba(255,255,255,.07),
        0 0 80px rgba(var(--role-color-rgb), .20);
}

body[data-page="profile"] .profile-premium-main {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
}

body[data-page="profile"] .profile-premium-avatar {
    position: relative;
    display: grid;
    flex: 0 0 78px;
    width: 78px;
    height: 78px;
    overflow: hidden;
    place-items: center;
    border: 2px solid rgba(255,255,255,.28);
    border-radius: 24px;
    color: #fff;
    background:
        linear-gradient(145deg, rgba(255,255,255,.20), rgba(255,255,255,.07));
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.20),
        0 13px 28px rgba(15,23,42,.24);
    font-size: .75rem;
    font-weight: 850;
}

body[data-page="profile"] .profile-premium-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

body[data-page="profile"] .profile-premium-avatar::after {
    content: "";
    position: absolute;
    right: 7px;
    bottom: 7px;
    width: 9px;
    height: 9px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: #86efac;
    box-shadow:
        0 0 0 3px rgba(134,239,172,.13),
        0 0 12px rgba(134,239,172,.55);
}

body[data-page="profile"] .profile-premium-title .page-subtitle {
    margin: 0 0 3px;
    color: rgba(255,255,255,.68);
    font-size: .7rem;
    font-weight: 850;
    letter-spacing: .11em;
    text-transform: uppercase;
}

body[data-page="profile"] .profile-premium-title h1 {
    margin: 0;
    color: #fff;
    font-size: clamp(1.42rem, 2.3vw, 2.05rem);
    line-height: 1.18;
    letter-spacing: -.028em;
    text-shadow: 0 2px 14px rgba(15,23,42,.22);
}

body[data-page="profile"] .profile-premium-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 10px;
}

body[data-page="profile"] .role-badge,
body[data-page="profile"] .profile-premium-status-chip {
    display: inline-flex;
    align-items: center;
    min-height: 27px;
    padding: 4px 9px;
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 999px;
    color: #fff;
    background: rgba(255,255,255,.12);
    font-size: .67rem;
    font-weight: 850;
}

body[data-page="profile"] .role-badge {
    background: rgba(var(--role-color-rgb), .72);
}

body[data-page="profile"] .profile-premium-status-chip::before {
    content: "";
    width: 7px;
    height: 7px;
    margin-right: 6px;
    border-radius: 50%;
    background: #86efac;
    box-shadow: 0 0 0 3px rgba(134,239,172,.12);
}

body[data-page="profile"] .profile-premium-status-card {
    position: relative;
    z-index: 1;
    min-width: 0;
    padding: 15px;
    border: 1px solid rgba(255,255,255,.17);
    border-radius: 15px;
    background:
        linear-gradient(145deg, rgba(255,255,255,.15), rgba(var(--role-color-rgb), .10));
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.1),
        0 12px 24px rgba(15,23,42,.12);
    backdrop-filter: blur(9px);
}

body[data-page="profile"] .profile-premium-status-card > span {
    display: block;
    color: rgba(255,255,255,.64);
    font-size: .68rem;
    font-weight: 850;
    letter-spacing: .07em;
    text-transform: uppercase;
}

body[data-page="profile"] .profile-premium-status-card strong {
    display: block;
    margin-top: 4px;
    color: #fff;
    font-size: 1rem;
}

body[data-page="profile"] .profile-premium-status-card a {
    display: inline-flex;
    width: 100%;
    min-height: 34px;
    margin-top: 10px;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255,255,255,.20);
    border-radius: 10px;
    color: #fff;
    background: rgba(255,255,255,.14);
    font-size: .7rem;
    font-weight: 850;
    text-decoration: none;
}

/* ---------- Info cards ---------- */
body[data-page="profile"] .profile-premium-info-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-top: 14px;
}

body[data-page="profile"] .profile-premium-info-card {
    position: relative;
    overflow: hidden;
    min-width: 0;
    padding: 15px;
    border: 1px solid rgba(var(--role-color-rgb), .16);
    border-radius: 14px;
    background:
        radial-gradient(circle at 100% 0%, rgba(var(--role-color-rgb), .08), transparent 110px),
        linear-gradient(145deg, #fff, #f8fafc);
    box-shadow:
        0 8px 22px rgba(15,23,42,.05),
        inset 0 1px 0 #fff;
}

body[data-page="profile"] .profile-premium-info-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 3px;
    background:
        linear-gradient(90deg, var(--role-color), rgba(var(--role-color-rgb), .36));
}

body[data-page="profile"] .profile-premium-info-card span {
    display: block;
    color: #7a879a;
    font-size: .67rem;
    font-weight: 800;
}

body[data-page="profile"] .profile-premium-info-card strong {
    display: block;
    margin-top: 7px;
    color: #223047;
    font-size: .9rem;
    overflow-wrap: anywhere;
}

/* ---------- Reminder ---------- */
body[data-page="profile"] .profile-premium-reminder {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-top: 12px;
    padding: 12px 14px;
    border: 1px solid rgba(180,83,9,.21);
    border-radius: 13px;
    background:
        linear-gradient(100deg, #fffaf0, #fff 70%);
    box-shadow: 0 7px 18px rgba(120,53,15,.05);
}

body[data-page="profile"] .profile-premium-reminder-icon {
    display: grid;
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    place-items: center;
    border-radius: 10px;
    color: #fff;
    background: linear-gradient(145deg, #b45309, #78350f);
    box-shadow: 0 6px 14px rgba(120,53,15,.18);
    font-weight: 900;
}

body[data-page="profile"] .profile-premium-reminder h3 {
    margin: 0;
    color: #7c4507;
    font-size: .82rem;
}

body[data-page="profile"] .profile-premium-reminder p {
    margin: 2px 0 0;
    color: #8b6a2a;
    font-size: .72rem;
}

/* ---------- Action cards ---------- */
body[data-page="profile"] .profile-premium-action-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 11px;
    margin-top: 14px;
}

body[data-page="profile"] .profile-premium-action-card {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto auto;
    gap: 10px 12px;
    min-width: 0;
    min-height: 135px;
    padding: 15px;
    overflow: hidden;
    border: 1px solid #dde3ea;
    border-radius: 14px;
    background: linear-gradient(145deg, #fff, #fafbfd);
    box-shadow: 0 6px 17px rgba(15,23,42,.04);
}

body[data-page="profile"] .profile-premium-action-card::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0 auto 0 0;
    width: 4px;
    background:
        linear-gradient(180deg, var(--role-color), var(--role-color-dark));
}

body[data-page="profile"] .profile-premium-action-card::after {
    content: "";
    position: absolute;
    z-index: -1;
    right: -40px;
    top: -46px;
    width: 105px;
    height: 105px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(var(--role-color-rgb), .09), transparent 70%);
}

body[data-page="profile"] .profile-premium-action-icon {
    display: grid;
    grid-column: 1;
    grid-row: 1;
    width: 38px;
    height: 38px;
    place-items: center;
    border: 1px solid rgba(255,255,255,.72);
    border-radius: 11px;
    color: #fff;
    background:
        linear-gradient(145deg, var(--role-color), var(--role-color-dark));
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.16),
        0 7px 14px rgba(var(--role-color-rgb), .18);
    font-size: .8rem;
    font-weight: 900;
}

body[data-page="profile"] .profile-premium-action-card > div:nth-child(2) {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
}

body[data-page="profile"] .profile-premium-action-card h3 {
    margin: 0;
    color: #223047;
    font-size: .86rem;
}

body[data-page="profile"] .profile-premium-action-card p {
    display: -webkit-box;
    margin: 4px 0 0;
    overflow: hidden;
    color: #7a879a;
    font-size: .71rem;
    line-height: 1.45;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

body[data-page="profile"] .profile-premium-action-card > .workspace-card-link,
body[data-page="profile"] .profile-premium-action-card > form {
    grid-column: 1 / -1;
    grid-row: 2;
    align-self: end;
}

body[data-page="profile"] .profile-premium-action-card .workspace-card-link,
body[data-page="profile"] .profile-premium-notification-link {
    display: inline-flex;
    width: 100%;
    min-height: 35px;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    border: 1px solid var(--role-color) !important;
    border-radius: 10px;
    color: #fff;
    background:
        linear-gradient(145deg, var(--role-color), var(--role-color-dark));
    box-shadow:
        0 7px 16px rgba(var(--role-color-rgb), .20),
        inset 0 1px 0 rgba(255,255,255,.16);
    font: inherit;
    font-size: .7rem;
    font-weight: 850;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}

/* Logout card gets a restrained red distinction */
body[data-page="profile"] .profile-premium-action-grid:last-of-type .profile-premium-action-card:last-child::before {
    background: linear-gradient(180deg, #dc2626, #991b1b);
}

body[data-page="profile"] .profile-premium-action-grid:last-of-type .profile-premium-action-card:last-child .profile-premium-action-icon,
body[data-page="profile"] .profile-premium-action-grid:last-of-type .profile-premium-action-card:last-child .workspace-card-link {
    border-color: #b91c1c !important;
    background: linear-gradient(145deg, #dc2626, #991b1b);
    box-shadow:
        0 7px 16px rgba(185,28,28,.18),
        inset 0 1px 0 rgba(255,255,255,.16);
}

/* ---------- Today work card ---------- */
body[data-page="profile"] .profile-premium-work-card {
    position: relative;
    margin-top: 14px;
    padding: 18px;
    overflow: hidden;
    border: 1px solid rgba(var(--role-color-rgb), .18);
    border-radius: 16px;
    background:
        radial-gradient(circle at 100% 0%, rgba(var(--role-color-rgb), .09), transparent 210px),
        linear-gradient(145deg, #fff, #f8fafc);
    box-shadow:
        0 10px 28px rgba(15,23,42,.055),
        inset 0 1px 0 #fff;
}

body[data-page="profile"] .profile-premium-work-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background:
        linear-gradient(180deg, var(--role-color), var(--role-color-dark));
}

body[data-page="profile"] .section-title-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

body[data-page="profile"] .section-title-row h3 {
    margin: 0;
    color: #172033;
    font-size: .98rem;
}

body[data-page="profile"] .section-title-row h3::before {
    content: "";
    display: inline-block;
    width: 4px;
    height: 17px;
    margin-right: 8px;
    border-radius: 99px;
    background:
        linear-gradient(180deg, var(--role-color), var(--role-color-dark));
    box-shadow: 0 0 0 4px rgba(var(--role-color-rgb), .08);
    vertical-align: -.15em;
}

body[data-page="profile"] .section-subtitle {
    margin: 3px 0 0;
    color: #7a879a;
    font-size: .74rem;
}

body[data-page="profile"] .attendance-info-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

body[data-page="profile"] .attendance-info-grid > div {
    padding: 10px;
    border: 1px solid rgba(var(--role-color-rgb), .10);
    border-radius: 10px;
    background: rgba(255,255,255,.72);
}

body[data-page="profile"] .attendance-info-grid span {
    display: block;
    color: #8792a3;
    font-size: .64rem;
    font-weight: 750;
}

body[data-page="profile"] .attendance-info-grid strong {
    display: block;
    margin-top: 4px;
    color: #27364a;
    font-size: .77rem;
    overflow-wrap: anywhere;
}

/* ---------- Notification card ---------- */
body[data-page="profile"] .profile-premium-notification-card {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 15px;
    margin-top: 14px;
    padding: 16px 17px;
    overflow: hidden;
    border: 1px solid rgba(var(--role-color-rgb), .18);
    border-radius: 15px;
    background:
        radial-gradient(circle at 100% 0%, rgba(var(--role-color-rgb), .10), transparent 180px),
        linear-gradient(145deg, #fff, #f8fafc);
    box-shadow:
        0 9px 24px rgba(15,23,42,.055),
        inset 0 1px 0 #fff;
}

body[data-page="profile"] .profile-premium-notification-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background:
        linear-gradient(180deg, var(--role-color), var(--role-color-dark));
}

body[data-page="profile"] .profile-premium-notification-left {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
}

body[data-page="profile"] .profile-premium-notification-icon {
    display: grid;
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    place-items: center;
    border-radius: 11px;
    color: #fff;
    background:
        linear-gradient(145deg, var(--role-color), var(--role-color-dark));
    box-shadow: 0 7px 14px rgba(var(--role-color-rgb), .18);
    font-size: .8rem;
    font-weight: 900;
}

body[data-page="profile"] .profile-premium-notification-title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
}

body[data-page="profile"] .profile-premium-notification-title h3 {
    margin: 0;
    color: #223047;
    font-size: .88rem;
}

body[data-page="profile"] .profile-premium-notification-title span {
    display: inline-flex;
    min-height: 24px;
    align-items: center;
    padding: 3px 8px;
    border-radius: 999px;
    color: var(--role-color-dark);
    background: rgba(var(--role-color-rgb), .08);
    font-size: .64rem;
    font-weight: 850;
}

body[data-page="profile"] .profile-premium-notification-left p {
    margin: 3px 0 0;
    color: #7a879a;
    font-size: .71rem;
}

/* ---------- Bottom navigation ---------- */
body[data-page="profile"] .bottom-nav a.active {
    color: #fff;
    background:
        linear-gradient(145deg, var(--role-color), var(--role-color-dark));
    box-shadow: 0 5px 13px rgba(var(--role-color-rgb), .22);
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
    body[data-page="profile"] .profile-premium-info-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body[data-page="profile"] .profile-premium-action-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body[data-page="profile"] .attendance-info-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    body[data-page="profile"] .container.page-with-nav {
        width: min(100% - 18px, 640px);
        padding: 9px 0 86px;
    }

    body[data-page="profile"] .login-language-switch {
        top: 25px;
        right: 11px;
    }

    body[data-page="profile"] .profile-premium-hero {
        grid-template-columns: 1fr;
        gap: 13px;
        min-height: 0;
        padding: 32px 15px 16px;
        border-radius: 17px;
    }

    body[data-page="profile"] .profile-premium-avatar {
        flex-basis: 58px;
        width: 58px;
        height: 58px;
        border-radius: 17px;
    }

    body[data-page="profile"] .profile-premium-status-card {
        padding: 12px;
    }

    body[data-page="profile"] .profile-premium-info-grid {
        gap: 7px;
        margin-top: 10px;
    }

    body[data-page="profile"] .profile-premium-info-card {
        padding: 12px;
        border-radius: 12px;
    }

    body[data-page="profile"] .profile-premium-action-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        margin-top: 10px;
    }

    body[data-page="profile"] .profile-premium-action-card {
        display: flex;
        flex-direction: column;
        gap: 7px;
        min-height: 140px;
        padding: 12px;
    }

    body[data-page="profile"] .profile-premium-action-card > div:nth-child(2) {
        flex: 1 1 auto;
    }

    body[data-page="profile"] .profile-premium-action-icon {
        flex: 0 0 34px;
        width: 34px;
        height: 34px;
    }

    body[data-page="profile"] .profile-premium-work-card,
    body[data-page="profile"] .profile-premium-notification-card {
        margin-top: 10px;
        padding: 14px;
        border-radius: 14px;
    }

    body[data-page="profile"] .profile-premium-notification-card {
        grid-template-columns: 1fr;
    }

    body[data-page="profile"] .profile-premium-notification-link {
        width: 100%;
    }
}

@media (max-width: 390px) {
    body[data-page="profile"] .profile-premium-action-grid,
    body[data-page="profile"] .profile-premium-info-grid,
    body[data-page="profile"] .attendance-info-grid {
        grid-template-columns: 1fr;
    }

    body[data-page="profile"] .profile-premium-action-card {
        min-height: 0;
    }

    body[data-page="profile"] .login-language-switch button {
        min-width: 37px;
        padding-inline: 7px;
    }
}

@media (prefers-reduced-motion: reduce) {
    body[data-page="profile"] *,
    body[data-page="profile"] *::before,
    body[data-page="profile"] *::after {
        animation: none !important;
        transition: none !important;
    }
}



/* =========================================================
   Profile Mobile Density + Button Consistency + Bottom Nav Fix
   PROFILE PAGE ONLY
   ========================================================= */

/* ---------- Normalize <a> and <button> action sizes ---------- */
body[data-page="profile"] .profile-premium-action-card > .workspace-card-link,
body[data-page="profile"] .profile-premium-action-card > form,
body[data-page="profile"] .profile-premium-action-card > form .workspace-card-link {
    width: 100%;
    min-width: 0;
}

body[data-page="profile"] .profile-premium-action-card > form {
    display: flex;
    margin: 0;
    padding: 0;
}

body[data-page="profile"] .profile-premium-action-card .workspace-card-link,
body[data-page="profile"] .profile-premium-action-card a.workspace-card-link,
body[data-page="profile"] .profile-premium-action-card button.workspace-card-link {
    display: inline-flex;
    width: 100% !important;
    min-width: 0;
    min-height: 36px;
    height: 36px;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 6px 10px;
    border: 1px solid var(--role-color) !important;
    border-radius: 10px;
    color: #fff;
    background:
        linear-gradient(145deg, var(--role-color), var(--role-color-dark));
    box-shadow:
        0 7px 16px rgba(var(--role-color-rgb), .20),
        inset 0 1px 0 rgba(255,255,255,.16);
    font-family: inherit;
    font-size: .70rem;
    font-weight: 850;
    line-height: 1.15;
    text-align: center;
    text-decoration: none;
    white-space: normal;
    box-sizing: border-box;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
}

body[data-page="profile"] button.workspace-card-link {
    overflow: hidden;
}

/* ---------- Compact information cards on phones ---------- */
@media (max-width: 700px) {
    body[data-page="profile"] .profile-premium-info-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
        margin-top: 9px;
    }

    body[data-page="profile"] .profile-premium-info-card {
        min-height: 64px;
        padding: 9px 10px;
        border-radius: 11px;
    }

    body[data-page="profile"] .profile-premium-info-card::before {
        height: 2px;
    }

    body[data-page="profile"] .profile-premium-info-card span {
        font-size: .60rem;
        line-height: 1.2;
    }

    body[data-page="profile"] .profile-premium-info-card strong {
        margin-top: 4px;
        font-size: .78rem;
        line-height: 1.25;
    }

    body[data-page="profile"] .profile-premium-action-card .workspace-card-link,
    body[data-page="profile"] .profile-premium-action-card a.workspace-card-link,
    body[data-page="profile"] .profile-premium-action-card button.workspace-card-link {
        min-height: 33px;
        height: 33px;
        padding: 5px 7px;
        border-radius: 9px;
        font-size: .65rem;
    }
}

@media (max-width: 390px) {
    body[data-page="profile"] .profile-premium-info-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 5px;
    }

    body[data-page="profile"] .profile-premium-info-card {
        min-height: 58px;
        padding: 8px;
    }

    body[data-page="profile"] .profile-premium-info-card span {
        font-size: .56rem;
    }

    body[data-page="profile"] .profile-premium-info-card strong {
        font-size: .72rem;
    }
}

/* ---------- Complete Profile bottom navigation ---------- */
body[data-page="profile"] .bottom-nav {
    position: fixed;
    z-index: 1000;
    right: 50%;
    bottom: max(10px, env(safe-area-inset-bottom));
    display: grid;
    grid-template-columns: repeat(3, minmax(82px, 1fr));
    width: min(calc(100% - 24px), 460px);
    padding: 5px;
    border: 1px solid rgba(203,213,225,.90);
    border-radius: 15px;
    background: rgba(255,255,255,.94);
    box-shadow:
        0 12px 32px rgba(15,23,42,.15),
        inset 0 1px 0 rgba(255,255,255,.95);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    transform: translateX(50%);
}

body[data-page="profile"] .bottom-nav a {
    display: flex;
    min-width: 0;
    min-height: 38px;
    align-items: center;
    justify-content: center;
    padding: 6px 9px;
    border-radius: 10px;
    color: #526078;
    background: transparent;
    font-size: .72rem;
    font-weight: 800;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
}

body[data-page="profile"] .bottom-nav a:hover {
    color: var(--role-color-dark);
    background: rgba(var(--role-color-rgb), .07);
}

body[data-page="profile"] .bottom-nav a.active {
    color: #fff;
    background:
        linear-gradient(145deg, var(--role-color), var(--role-color-dark));
    box-shadow:
        0 5px 13px rgba(var(--role-color-rgb), .22),
        inset 0 1px 0 rgba(255,255,255,.14);
}

body[data-page="profile"] .bottom-nav a:active {
    transform: scale(.985);
}

@media (max-width: 700px) {
    body[data-page="profile"] .bottom-nav {
        bottom: max(7px, env(safe-area-inset-bottom));
        width: calc(100% - 18px);
        max-width: 430px;
        grid-template-columns: repeat(3, 1fr);
        padding: 4px;
        border-radius: 14px;
    }

    body[data-page="profile"] .bottom-nav a {
        min-height: 36px;
        padding: 5px;
        font-size: .68rem;
    }
}

@media (max-width: 360px) {
    body[data-page="profile"] .bottom-nav {
        width: calc(100% - 12px);
    }

    body[data-page="profile"] .bottom-nav a {
        min-height: 34px;
        padding-inline: 3px;
        font-size: .63rem;
    }
}



/* =========================================================
   Profile Action Grid — Keep Two Cards Per Row on Mobile
   ========================================================= */

@media (max-width: 700px) {
    body[data-page="profile"] .profile-premium-action-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 7px;
    }

    body[data-page="profile"] .profile-premium-action-card {
        min-width: 0;
        min-height: 132px;
        padding: 10px;
    }

    body[data-page="profile"] .profile-premium-action-card h3 {
        font-size: .74rem;
        line-height: 1.3;
    }

    body[data-page="profile"] .profile-premium-action-card p {
        font-size: .62rem;
        line-height: 1.35;
        -webkit-line-clamp: 2;
    }

    body[data-page="profile"] .profile-premium-action-icon {
        width: 31px;
        height: 31px;
        flex-basis: 31px;
        border-radius: 9px;
        font-size: .7rem;
    }
}

@media (max-width: 390px) {
    body[data-page="profile"] .profile-premium-action-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 6px;
    }

    body[data-page="profile"] .profile-premium-action-card {
        min-height: 126px;
        padding: 9px;
    }

    body[data-page="profile"] .profile-premium-action-card h3 {
        font-size: .7rem;
    }

    body[data-page="profile"] .profile-premium-action-card p {
        font-size: .58rem;
    }

    body[data-page="profile"] .profile-premium-action-card .workspace-card-link,
    body[data-page="profile"] .profile-premium-action-card a.workspace-card-link,
    body[data-page="profile"] .profile-premium-action-card button.workspace-card-link {
        min-height: 31px;
        height: 31px;
        padding: 4px 5px;
        font-size: .59rem;
    }
}

/* =========================================================
   PRMS Announcements — Unified Premium Responsive UI
   Page scope: body[data-page="announcements"]
   ========================================================= */

body[data-page="announcements"] {
    --role-color: #334155;
    --role-color-dark: #0f172a;
    --role-color-rgb: 51, 65, 85;
    --role-hero-1: #0f172a;
    --role-hero-2: #334155;
    --role-hero-3: #64748b;

    margin: 0;
    color: #172033;
    background:
        radial-gradient(circle at 100% 0%, rgba(var(--role-color-rgb), .08), transparent 28rem),
        #f3f5f8;
    font-family: Inter, "Segoe UI", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

body[data-page="announcements"] *,
body[data-page="announcements"] *::before,
body[data-page="announcements"] *::after {
    box-sizing: border-box;
}

body[data-page="announcements"] a,
body[data-page="announcements"] button {
    -webkit-tap-highlight-color: transparent;
}

body[data-page="announcements"] .container.page-with-nav {
    width: min(100% - 32px, 1180px);
    margin: 0 auto;
    padding: 18px 4px 88px;
}

/* ---------- Main board ---------- */
body[data-page="announcements"] .workspace-announcement-board {
    position: relative;
    overflow: hidden;
    padding: 20px;
    border: 1px solid rgba(var(--role-color-rgb), .16);
    border-radius: 18px;
    background:
        radial-gradient(circle at 100% 0%, rgba(var(--role-color-rgb), .07), transparent 250px),
        linear-gradient(145deg, #fff, #f8fafc);
    box-shadow:
        0 14px 34px rgba(15,23,42,.075),
        inset 0 1px 0 rgba(255,255,255,.95);
}

body[data-page="announcements"] .workspace-announcement-board::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 5px;
    background:
        linear-gradient(180deg, var(--role-color), var(--role-color-dark));
}

body[data-page="announcements"] .workspace-announcement-board::after {
    content: "";
    position: absolute;
    right: -45px;
    top: -52px;
    width: 150px;
    height: 150px;
    border: 22px solid rgba(var(--role-color-rgb), .04);
    border-radius: 50%;
    pointer-events: none;
}

/* ---------- Header ---------- */
body[data-page="announcements"] .workspace-announcement-board-header {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 18px;
    margin-bottom: 15px;
    padding: 16px;
    overflow: hidden;
    border: 1px solid rgba(var(--role-color-rgb), .16);
    border-radius: 14px;
    background:
        linear-gradient(
            120deg,
            rgba(var(--role-color-rgb), .11),
            rgba(255,255,255,.97) 48%,
            rgba(var(--role-color-rgb), .045)
        );
    box-shadow:
        0 7px 18px rgba(var(--role-color-rgb), .065),
        inset 0 1px 0 rgba(255,255,255,.92);
}

body[data-page="announcements"] .workspace-announcement-board-header::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 5px;
    background:
        linear-gradient(180deg, var(--role-color), var(--role-color-dark));
}

body[data-page="announcements"] .workspace-announcement-board-header::after {
    content: "";
    position: absolute;
    right: -38px;
    top: -44px;
    width: 120px;
    height: 120px;
    border: 18px solid rgba(var(--role-color-rgb), .045);
    border-radius: 50%;
    pointer-events: none;
}

body[data-page="announcements"] .workspace-announcement-board-header > div {
    position: relative;
    z-index: 1;
    min-width: 0;
}

body[data-page="announcements"] .workspace-announcement-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 24px;
    margin: 0 0 7px;
    padding: 3px 9px;
    border: 1px solid rgba(var(--role-color-rgb), .18);
    border-radius: 999px;
    color: var(--role-color-dark);
    background: rgba(255,255,255,.74);
    box-shadow: 0 3px 8px rgba(var(--role-color-rgb), .05);
    font-size: .61rem;
    font-weight: 900;
    letter-spacing: .105em;
    text-transform: uppercase;
}

body[data-page="announcements"] .workspace-announcement-eyebrow::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--role-color);
    box-shadow: 0 0 0 4px rgba(var(--role-color-rgb), .10);
}

body[data-page="announcements"] .workspace-announcement-board-header h1 {
    margin: 0;
    color: #172033;
    font-size: clamp(1.2rem, 2vw, 1.65rem);
    font-weight: 850;
    line-height: 1.22;
    letter-spacing: -.026em;
}

body[data-page="announcements"] .workspace-announcement-board-header p {
    max-width: 720px;
    margin: 5px 0 0;
    color: #657287;
    font-size: .76rem;
    line-height: 1.55;
}

body[data-page="announcements"] .workspace-announcement-header-actions {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 7px;
}

/* ---------- Unified action buttons ---------- */
body[data-page="announcements"] .workspace-card-link,
body[data-page="announcements"] .announcement-read-button {
    display: inline-flex;
    min-width: 0;
    min-height: 35px;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 6px 12px;
    border: 1px solid var(--role-color);
    border-radius: 10px;
    color: #fff;
    background:
        linear-gradient(145deg, var(--role-color), var(--role-color-dark));
    box-shadow:
        0 7px 16px rgba(var(--role-color-rgb), .20),
        inset 0 1px 0 rgba(255,255,255,.16);
    font: inherit;
    font-size: .7rem;
    font-weight: 850;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
}

body[data-page="announcements"] .workspace-card-link:hover,
body[data-page="announcements"] .announcement-read-button:hover {
    border-color: var(--role-color-dark);
    background:
        linear-gradient(145deg, var(--role-color-dark), var(--role-color));
    box-shadow:
        0 9px 20px rgba(var(--role-color-rgb), .26),
        inset 0 1px 0 rgba(255,255,255,.18);
    transform: translateY(-1px);
}

/* ---------- Announcement list ---------- */
body[data-page="announcements"] .workspace-announcement-list {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 11px;
}

body[data-page="announcements"] .workspace-announcement-item {
    position: relative;
    padding: 15px 16px 14px 18px;
    overflow: hidden;
    border: 1px solid #e1e6ed;
    border-radius: 14px;
    background:
        linear-gradient(135deg, rgba(248,250,252,.96), rgba(255,255,255,.99));
    box-shadow:
        0 6px 16px rgba(15,23,42,.04),
        inset 0 1px 0 #fff;
}

body[data-page="announcements"] .workspace-announcement-item::before {
    content: "";
    position: absolute;
    inset: 13px auto 13px 0;
    width: 4px;
    border-radius: 99px;
    background: #cbd5e1;
}

body[data-page="announcements"] .workspace-announcement-item.is-unread {
    border-color: rgba(var(--role-color-rgb), .22);
    background:
        linear-gradient(
            90deg,
            rgba(var(--role-color-rgb), .09),
            rgba(255,255,255,.99) 28%
        );
}

body[data-page="announcements"] .workspace-announcement-item.is-unread::before {
    background:
        linear-gradient(180deg, var(--role-color), var(--role-color-dark));
}

body[data-page="announcements"] .workspace-announcement-item.is-important {
    border-color: rgba(180,83,9,.27);
    background:
        linear-gradient(90deg, rgba(255,246,235,.96), rgba(255,255,255,.99) 30%);
}

body[data-page="announcements"] .workspace-announcement-item.is-important::before {
    background: linear-gradient(180deg, #d97706, #92400e);
}

body[data-page="announcements"] .workspace-announcement-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

body[data-page="announcements"] .announcement-badge {
    display: inline-flex;
    align-items: center;
    min-height: 23px;
    padding: 3px 8px;
    border: 1px solid rgba(148,163,184,.12);
    border-radius: 999px;
    font-size: .64rem;
    font-weight: 850;
    line-height: 1;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.4);
}

body[data-page="announcements"] .announcement-badge.pinned {
    color: #7c4a03;
    background: #fff2cc;
}

body[data-page="announcements"] .announcement-badge.unread {
    color: var(--role-color-dark);
    background: rgba(var(--role-color-rgb), .10);
}

body[data-page="announcements"] .announcement-badge.read {
    color: #16624c;
    background: #def3ea;
}

body[data-page="announcements"] .workspace-announcement-item h2 {
    margin: 10px 0 5px;
    color: #1d2a3c;
    font-size: .98rem;
    line-height: 1.35;
    letter-spacing: -.012em;
}

body[data-page="announcements"] .workspace-announcement-body {
    margin: 0;
    color: #59677b;
    font-size: .79rem;
    line-height: 1.62;
    white-space: pre-line;
    overflow-wrap: anywhere;
}

body[data-page="announcements"] .workspace-announcement-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 12px;
    padding-top: 11px;
    border-top: 1px dashed #dfe5ec;
    color: #7a879a;
    font-size: .68rem;
}

body[data-page="announcements"] .workspace-announcement-footer form {
    margin: 0;
}

/* ---------- Empty state ---------- */
body[data-page="announcements"] .empty-state-card {
    position: relative;
    z-index: 1;
    display: grid;
    min-height: 110px;
    place-items: center;
    padding: 20px;
    border: 1px dashed rgba(var(--role-color-rgb), .22);
    border-radius: 13px;
    color: #7a879a;
    background: rgba(var(--role-color-rgb), .035);
    font-size: .78rem;
    text-align: center;
}

/* ---------- Focus ---------- */
body[data-page="announcements"] a:focus-visible,
body[data-page="announcements"] button:focus-visible {
    outline: 3px solid rgba(var(--role-color-rgb), .22);
    outline-offset: 2px;
}

/* ---------- Mobile ---------- */
@media (max-width: 700px) {
    body[data-page="announcements"] .container.page-with-nav {
        width: min(100% - 18px, 640px);
        padding: 9px 0 78px;
    }

    body[data-page="announcements"] .workspace-announcement-board {
        padding: 13px;
        border-radius: 15px;
    }

    body[data-page="announcements"] .workspace-announcement-board-header {
        grid-template-columns: 1fr;
        gap: 11px;
        margin-bottom: 12px;
        padding: 13px;
        border-radius: 12px;
    }

    body[data-page="announcements"] .workspace-announcement-header-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
        gap: 6px;
    }

    body[data-page="announcements"] .workspace-announcement-header-actions .workspace-card-link {
        width: 100%;
        min-width: 0;
        min-height: 33px;
        padding: 5px 7px;
        white-space: normal;
    }

    body[data-page="announcements"] .workspace-announcement-item {
        padding: 12px 12px 11px 15px;
        border-radius: 12px;
    }

    body[data-page="announcements"] .workspace-announcement-item h2 {
        margin-top: 8px;
        font-size: .86rem;
    }

    body[data-page="announcements"] .workspace-announcement-body {
        font-size: .72rem;
        line-height: 1.52;
    }

    body[data-page="announcements"] .workspace-announcement-footer {
        align-items: flex-end;
        gap: 7px;
        font-size: .62rem;
    }

    body[data-page="announcements"] .announcement-read-button {
        min-height: 31px;
        padding: 4px 8px;
        font-size: .64rem;
    }
}

@media (max-width: 390px) {
    body[data-page="announcements"] .workspace-announcement-header-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body[data-page="announcements"] .workspace-announcement-footer {
        align-items: stretch;
        flex-direction: column;
    }

    body[data-page="announcements"] .workspace-announcement-footer form,
    body[data-page="announcements"] .announcement-read-button {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    body[data-page="announcements"] *,
    body[data-page="announcements"] *::before,
    body[data-page="announcements"] *::after {
        animation: none !important;
        transition: none !important;
    }
}

/* =========================================================
   PRMS Announcement Management — Unified Premium UI
   Page scope: body[data-page="announcement-management"]
   ========================================================= */

body[data-page="announcement-management"] {
    --role-color: #334155;
    --role-color-dark: #0f172a;
    --role-color-rgb: 51, 65, 85;

    margin: 0;
    color: #172033;
    background:
        radial-gradient(circle at 100% 0%, rgba(var(--role-color-rgb), .08), transparent 28rem),
        #f3f5f8;
    font-family: Inter, "Segoe UI", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

body[data-page="announcement-management"] *,
body[data-page="announcement-management"] *::before,
body[data-page="announcement-management"] *::after {
    box-sizing: border-box;
}

body[data-page="announcement-management"] a,
body[data-page="announcement-management"] button,
body[data-page="announcement-management"] select {
    -webkit-tap-highlight-color: transparent;
}

body[data-page="announcement-management"] .container.page-with-nav {
    width: min(100% - 32px, 1180px);
    margin: 0 auto;
    padding: 18px 4px 88px;
}

/* ---------- Main section ---------- */
body[data-page="announcement-management"] .workspace-premium-section {
    position: relative;
    overflow: hidden;
    padding: 20px;
    border: 1px solid rgba(var(--role-color-rgb), .16);
    border-radius: 18px;
    background:
        radial-gradient(circle at 100% 0%, rgba(var(--role-color-rgb), .07), transparent 250px),
        linear-gradient(145deg, #fff, #f8fafc);
    box-shadow:
        0 14px 34px rgba(15,23,42,.075),
        inset 0 1px 0 rgba(255,255,255,.95);
}

body[data-page="announcement-management"] .workspace-premium-section::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 5px;
    background:
        linear-gradient(180deg, var(--role-color), var(--role-color-dark));
}

body[data-page="announcement-management"] .workspace-premium-section::after {
    content: "";
    position: absolute;
    right: -45px;
    top: -52px;
    width: 150px;
    height: 150px;
    border: 22px solid rgba(var(--role-color-rgb), .04);
    border-radius: 50%;
    pointer-events: none;
}

/* ---------- Header ---------- */
body[data-page="announcement-management"] .section-title-row {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 18px;
    margin-bottom: 15px;
    padding: 16px;
    overflow: hidden;
    border: 1px solid rgba(var(--role-color-rgb), .16);
    border-radius: 14px;
    background:
        linear-gradient(
            120deg,
            rgba(var(--role-color-rgb), .11),
            rgba(255,255,255,.97) 48%,
            rgba(var(--role-color-rgb), .045)
        );
    box-shadow:
        0 7px 18px rgba(var(--role-color-rgb), .065),
        inset 0 1px 0 rgba(255,255,255,.92);
}

body[data-page="announcement-management"] .section-title-row::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 5px;
    background:
        linear-gradient(180deg, var(--role-color), var(--role-color-dark));
}

body[data-page="announcement-management"] .section-title-row::after {
    content: "";
    position: absolute;
    right: -38px;
    top: -44px;
    width: 120px;
    height: 120px;
    border: 18px solid rgba(var(--role-color-rgb), .045);
    border-radius: 50%;
    pointer-events: none;
}

body[data-page="announcement-management"] .section-title-row > div {
    position: relative;
    z-index: 1;
    min-width: 0;
}

body[data-page="announcement-management"] .page-subtitle {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 24px;
    margin: 0 0 7px;
    padding: 3px 9px;
    border: 1px solid rgba(var(--role-color-rgb), .18);
    border-radius: 999px;
    color: var(--role-color-dark);
    background: rgba(255,255,255,.74);
    box-shadow: 0 3px 8px rgba(var(--role-color-rgb), .05);
    font-size: .61rem;
    font-weight: 900;
    letter-spacing: .105em;
    text-transform: uppercase;
}

body[data-page="announcement-management"] .page-subtitle::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--role-color);
    box-shadow: 0 0 0 4px rgba(var(--role-color-rgb), .10);
}

body[data-page="announcement-management"] .section-title-row h1 {
    margin: 0;
    color: #172033;
    font-size: clamp(1.2rem, 2vw, 1.65rem);
    font-weight: 850;
    line-height: 1.22;
    letter-spacing: -.026em;
}

body[data-page="announcement-management"] .section-subtitle {
    max-width: 720px;
    margin: 5px 0 0;
    color: #657287;
    font-size: .76rem;
    line-height: 1.55;
}

body[data-page="announcement-management"] .workspace-announcement-header-actions {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 7px;
}

/* ---------- Unified buttons ---------- */
body[data-page="announcement-management"] .workspace-card-link,
body[data-page="announcement-management"] .announcement-filter-form button,
body[data-page="announcement-management"] .announcement-management-actions a,
body[data-page="announcement-management"] .announcement-management-actions button {
    display: inline-flex;
    min-width: 0;
    min-height: 35px;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 6px 12px;
    border: 1px solid var(--role-color);
    border-radius: 10px;
    color: #fff;
    background:
        linear-gradient(145deg, var(--role-color), var(--role-color-dark));
    box-shadow:
        0 7px 16px rgba(var(--role-color-rgb), .20),
        inset 0 1px 0 rgba(255,255,255,.16);
    font: inherit;
    font-size: .7rem;
    font-weight: 850;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
}

body[data-page="announcement-management"] .workspace-card-link:hover,
body[data-page="announcement-management"] .announcement-filter-form button:hover,
body[data-page="announcement-management"] .announcement-management-actions a:hover,
body[data-page="announcement-management"] .announcement-management-actions button:hover {
    border-color: var(--role-color-dark);
    background:
        linear-gradient(145deg, var(--role-color-dark), var(--role-color));
    box-shadow:
        0 9px 20px rgba(var(--role-color-rgb), .26),
        inset 0 1px 0 rgba(255,255,255,.18);
    transform: translateY(-1px);
}

/* ---------- Filter ---------- */
body[data-page="announcement-management"] .announcement-filter-form {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(180px, 320px) auto;
    gap: 8px;
    align-items: center;
    margin-bottom: 14px;
    padding: 12px;
    border: 1px solid rgba(var(--role-color-rgb), .14);
    border-radius: 12px;
    background: rgba(255,255,255,.78);
    box-shadow:
        0 6px 16px rgba(15,23,42,.04),
        inset 0 1px 0 #fff;
}

body[data-page="announcement-management"] .announcement-filter-form select {
    width: 100%;
    min-height: 38px;
    padding: 7px 10px;
    border: 1px solid #d8e0ea;
    border-radius: 10px;
    color: #27364a;
    background: #fff;
    font: inherit;
    font-size: .72rem;
}

/* ---------- Management list ---------- */
body[data-page="announcement-management"] .announcement-management-list {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 11px;
}

body[data-page="announcement-management"] .announcement-management-card {
    position: relative;
    overflow: hidden;
    padding: 15px 16px 14px 18px;
    border: 1px solid #e1e6ed;
    border-radius: 14px;
    background:
        linear-gradient(135deg, rgba(248,250,252,.96), rgba(255,255,255,.99));
    box-shadow:
        0 6px 16px rgba(15,23,42,.04),
        inset 0 1px 0 #fff;
}

body[data-page="announcement-management"] .announcement-management-card::before {
    content: "";
    position: absolute;
    inset: 13px auto 13px 0;
    width: 4px;
    border-radius: 99px;
    background:
        linear-gradient(180deg, var(--role-color), var(--role-color-dark));
}

body[data-page="announcement-management"] .workspace-announcement-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

body[data-page="announcement-management"] .announcement-badge {
    display: inline-flex;
    align-items: center;
    min-height: 23px;
    padding: 3px 8px;
    border: 1px solid rgba(148,163,184,.12);
    border-radius: 999px;
    font-size: .64rem;
    font-weight: 850;
    line-height: 1;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.4);
}

body[data-page="announcement-management"] .announcement-badge.pinned {
    color: #7c4a03;
    background: #fff2cc;
}

body[data-page="announcement-management"] .announcement-badge.type {
    color: #334155;
    background: #e9eef5;
}

body[data-page="announcement-management"] .announcement-badge.status {
    color: var(--role-color-dark);
    background: rgba(var(--role-color-rgb), .10);
}

body[data-page="announcement-management"] .announcement-badge.important {
    color: #991b1b;
    background: #fee2e2;
}

body[data-page="announcement-management"] .announcement-management-card h2 {
    margin: 10px 0 5px;
    color: #1d2a3c;
    font-size: .98rem;
    line-height: 1.35;
    letter-spacing: -.012em;
}

body[data-page="announcement-management"] .workspace-announcement-body {
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    color: #59677b;
    font-size: .79rem;
    line-height: 1.58;
    overflow-wrap: anywhere;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

body[data-page="announcement-management"] .announcement-management-meta {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
    margin-top: 11px;
}

body[data-page="announcement-management"] .announcement-management-meta span {
    min-width: 0;
    padding: 8px 9px;
    border: 1px solid #e2e7ee;
    border-radius: 9px;
    color: #657287;
    background: rgba(248,250,252,.82);
    font-size: .67rem;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

body[data-page="announcement-management"] .announcement-management-actions {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 7px;
    margin-top: 12px;
    padding-top: 11px;
    border-top: 1px dashed #dfe5ec;
}

body[data-page="announcement-management"] .announcement-management-actions form {
    display: flex;
    margin: 0;
}

body[data-page="announcement-management"] .announcement-management-actions a,
body[data-page="announcement-management"] .announcement-management-actions button {
    width: 100%;
    min-height: 34px;
    padding: 5px 8px;
    font-size: .67rem;
}

/* Secondary action distinction */
body[data-page="announcement-management"] .announcement-management-actions a:nth-of-type(2) {
    color: var(--role-color-dark);
    border-color: rgba(var(--role-color-rgb), .20);
    background:
        linear-gradient(180deg, #fff, rgba(var(--role-color-rgb), .07));
    box-shadow:
        0 5px 12px rgba(var(--role-color-rgb), .08),
        inset 0 1px 0 #fff;
}

/* ---------- Empty state ---------- */
body[data-page="announcement-management"] .empty-state-card {
    display: grid;
    min-height: 110px;
    place-items: center;
    padding: 20px;
    border: 1px dashed rgba(var(--role-color-rgb), .22);
    border-radius: 13px;
    color: #7a879a;
    background: rgba(var(--role-color-rgb), .035);
    font-size: .78rem;
    text-align: center;
}

/* ---------- Focus ---------- */
body[data-page="announcement-management"] a:focus-visible,
body[data-page="announcement-management"] button:focus-visible,
body[data-page="announcement-management"] select:focus-visible {
    outline: 3px solid rgba(var(--role-color-rgb), .22);
    outline-offset: 2px;
}

/* ---------- Tablet ---------- */
@media (max-width: 900px) {
    body[data-page="announcement-management"] .announcement-management-meta {
        grid-template-columns: 1fr 1fr;
    }

    body[data-page="announcement-management"] .announcement-management-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ---------- Mobile ---------- */
@media (max-width: 700px) {
    body[data-page="announcement-management"] .container.page-with-nav {
        width: min(100% - 18px, 640px);
        padding: 9px 0 78px;
    }

    body[data-page="announcement-management"] .workspace-premium-section {
        padding: 13px;
        border-radius: 15px;
    }

    body[data-page="announcement-management"] .section-title-row {
        grid-template-columns: 1fr;
        gap: 11px;
        margin-bottom: 12px;
        padding: 13px;
        border-radius: 12px;
    }

    body[data-page="announcement-management"] .workspace-announcement-header-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
        gap: 6px;
    }

    body[data-page="announcement-management"] .workspace-announcement-header-actions .workspace-card-link {
        width: 100%;
        min-width: 0;
        min-height: 33px;
        padding: 5px 7px;
        white-space: normal;
    }

    body[data-page="announcement-management"] .announcement-filter-form {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 6px;
        padding: 10px;
    }

    body[data-page="announcement-management"] .announcement-management-card {
        padding: 12px 12px 11px 15px;
        border-radius: 12px;
    }

    body[data-page="announcement-management"] .announcement-management-card h2 {
        margin-top: 8px;
        font-size: .86rem;
    }

    body[data-page="announcement-management"] .workspace-announcement-body {
        font-size: .72rem;
        line-height: 1.5;
        -webkit-line-clamp: 2;
    }

    body[data-page="announcement-management"] .announcement-management-meta {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 5px;
        margin-top: 9px;
    }

    body[data-page="announcement-management"] .announcement-management-meta span {
        padding: 7px;
        font-size: .61rem;
    }

    body[data-page="announcement-management"] .announcement-management-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
        margin-top: 10px;
        padding-top: 9px;
    }

    body[data-page="announcement-management"] .announcement-management-actions a,
    body[data-page="announcement-management"] .announcement-management-actions button {
        min-height: 31px;
        padding: 4px 6px;
        font-size: .61rem;
    }
}

@media (max-width: 390px) {
    body[data-page="announcement-management"] .announcement-filter-form {
        grid-template-columns: 1fr;
    }

    body[data-page="announcement-management"] .announcement-filter-form button {
        width: 100%;
    }

    body[data-page="announcement-management"] .announcement-management-meta,
    body[data-page="announcement-management"] .announcement-management-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (prefers-reduced-motion: reduce) {
    body[data-page="announcement-management"] *,
    body[data-page="announcement-management"] *::before,
    body[data-page="announcement-management"] *::after {
        animation: none !important;
        transition: none !important;
    }
}



/* =========================================================
   Announcement Management — Premium UI Upgrade
   - 3 buttons fill one row on large screens
   - richer title section
   - richer management cards
   ========================================================= */

/* ---------- Premium header upgrade ---------- */
body[data-page="announcement-management"] .section-title-row {
    isolation: isolate;
    min-height: 154px;
    padding: 22px 20px;
    border-color: rgba(var(--role-color-rgb), .22);
    background:
        radial-gradient(circle at 12% 10%, rgba(255,255,255,.86), transparent 24%),
        radial-gradient(circle at 92% 110%, rgba(var(--role-color-rgb), .16), transparent 36%),
        linear-gradient(
            125deg,
            rgba(var(--role-color-rgb), .16) 0%,
            rgba(255,255,255,.97) 45%,
            rgba(var(--role-color-rgb), .07) 100%
        );
    box-shadow:
        0 14px 30px rgba(var(--role-color-rgb), .10),
        inset 0 1px 0 rgba(255,255,255,.96);
}

body[data-page="announcement-management"] .section-title-row::before {
    width: 6px;
    background:
        linear-gradient(
            180deg,
            var(--role-color-dark) 0%,
            var(--role-color) 52%,
            rgba(var(--role-color-rgb), .42) 100%
        );
    box-shadow: 8px 0 24px rgba(var(--role-color-rgb), .12);
}

body[data-page="announcement-management"] .section-title-row::after {
    right: -52px;
    top: -58px;
    width: 170px;
    height: 170px;
    border-width: 24px;
    border-color: rgba(var(--role-color-rgb), .05);
    box-shadow: 0 0 0 1px rgba(var(--role-color-rgb), .04);
}

body[data-page="announcement-management"] .section-title-row > div:first-child::after {
    content: "";
    display: block;
    width: 64px;
    height: 3px;
    margin-top: 12px;
    border-radius: 999px;
    background:
        linear-gradient(90deg, var(--role-color), rgba(var(--role-color-rgb), .12));
}

body[data-page="announcement-management"] .page-subtitle {
    color: var(--role-color-dark);
    border-color: rgba(var(--role-color-rgb), .24);
    background: rgba(255,255,255,.84);
    box-shadow:
        0 5px 12px rgba(var(--role-color-rgb), .07),
        inset 0 1px 0 #fff;
}

body[data-page="announcement-management"] .section-title-row h1 {
    color: #162033;
    font-size: clamp(1.34rem, 2.3vw, 1.92rem);
    text-shadow: 0 1px 0 rgba(255,255,255,.85);
}

body[data-page="announcement-management"] .section-subtitle {
    max-width: 760px;
    color: #5f6e83;
    font-size: .79rem;
}

body[data-page="announcement-management"] .workspace-announcement-header-actions {
    align-self: end;
    padding: 10px;
    border: 1px solid rgba(var(--role-color-rgb), .13);
    border-radius: 12px;
    background: rgba(255,255,255,.62);
    box-shadow:
        0 7px 18px rgba(var(--role-color-rgb), .06),
        inset 0 1px 0 rgba(255,255,255,.92);
    backdrop-filter: blur(8px);
}

/* ---------- Filter card upgrade ---------- */
body[data-page="announcement-management"] .announcement-filter-form {
    padding: 13px;
    border-color: rgba(var(--role-color-rgb), .16);
    background:
        linear-gradient(145deg, rgba(255,255,255,.94), rgba(var(--role-color-rgb), .035));
    box-shadow:
        0 8px 20px rgba(15,23,42,.05),
        inset 0 1px 0 #fff;
}

body[data-page="announcement-management"] .announcement-filter-form select {
    border-color: rgba(var(--role-color-rgb), .17);
    background:
        linear-gradient(180deg, #fff, #f8fafc);
    box-shadow:
        inset 0 1px 2px rgba(15,23,42,.035),
        0 3px 8px rgba(15,23,42,.03);
}

/* ---------- Premium management cards ---------- */
body[data-page="announcement-management"] .announcement-management-card {
    isolation: isolate;
    padding: 17px 18px 15px 20px;
    border-color: rgba(var(--role-color-rgb), .16);
    border-radius: 16px;
    background:
        radial-gradient(circle at 100% 0%, rgba(var(--role-color-rgb), .085), transparent 160px),
        linear-gradient(145deg, #ffffff 0%, #f8fafc 64%, #f3f6fa 100%);
    box-shadow:
        0 10px 24px rgba(15,23,42,.06),
        inset 0 1px 0 rgba(255,255,255,.98);
    transition:
        transform .18s ease,
        box-shadow .18s ease,
        border-color .18s ease;
}

body[data-page="announcement-management"] .announcement-management-card::before {
    inset: 12px auto 12px 0;
    width: 5px;
    background:
        linear-gradient(
            180deg,
            var(--role-color-dark),
            var(--role-color),
            rgba(var(--role-color-rgb), .42)
        );
    box-shadow: 6px 0 18px rgba(var(--role-color-rgb), .10);
}

body[data-page="announcement-management"] .announcement-management-card::after {
    content: "";
    position: absolute;
    z-index: -1;
    right: -48px;
    bottom: -62px;
    width: 150px;
    height: 150px;
    border: 22px solid rgba(var(--role-color-rgb), .035);
    border-radius: 50%;
}

body[data-page="announcement-management"] .announcement-management-card:hover {
    border-color: rgba(var(--role-color-rgb), .28);
    box-shadow:
        0 16px 34px rgba(var(--role-color-rgb), .11),
        inset 0 1px 0 #fff;
    transform: translateY(-2px);
}

body[data-page="announcement-management"] .workspace-announcement-badges {
    position: relative;
    z-index: 1;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(var(--role-color-rgb), .10);
}

body[data-page="announcement-management"] .announcement-badge {
    min-height: 24px;
    padding: 3px 9px;
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.45),
        0 3px 8px rgba(15,23,42,.035);
}

body[data-page="announcement-management"] .announcement-management-card h2 {
    position: relative;
    margin: 12px 0 6px;
    padding-left: 13px;
    color: #172033;
    font-size: 1.02rem;
}

body[data-page="announcement-management"] .announcement-management-card h2::before {
    content: "";
    position: absolute;
    left: 0;
    top: .34em;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--role-color);
    box-shadow: 0 0 0 4px rgba(var(--role-color-rgb), .10);
}

body[data-page="announcement-management"] .workspace-announcement-body {
    color: #56657a;
    line-height: 1.62;
}

body[data-page="announcement-management"] .announcement-management-meta {
    gap: 8px;
    margin-top: 13px;
}

body[data-page="announcement-management"] .announcement-management-meta span {
    position: relative;
    padding: 10px 10px 10px 13px;
    border-color: rgba(var(--role-color-rgb), .11);
    background:
        linear-gradient(145deg, rgba(255,255,255,.94), rgba(var(--role-color-rgb), .035));
    box-shadow:
        inset 0 1px 0 #fff,
        0 4px 10px rgba(15,23,42,.025);
}

body[data-page="announcement-management"] .announcement-management-meta span::before {
    content: "";
    position: absolute;
    left: 6px;
    top: 10px;
    bottom: 10px;
    width: 2px;
    border-radius: 999px;
    background: rgba(var(--role-color-rgb), .35);
}

/* ---------- Action row: 3 buttons fill one row ---------- */
body[data-page="announcement-management"] .announcement-management-actions {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    align-items: stretch;
    gap: 8px;
    margin-top: 14px;
    padding: 13px;
    border: 1px solid rgba(var(--role-color-rgb), .10);
    border-radius: 12px;
    background:
        linear-gradient(145deg, rgba(248,250,252,.92), rgba(255,255,255,.96));
}

body[data-page="announcement-management"] .announcement-management-actions form {
    width: 100%;
}

body[data-page="announcement-management"] .announcement-management-actions a,
body[data-page="announcement-management"] .announcement-management-actions button {
    width: 100%;
    height: 100%;
    min-height: 36px;
}

/* ---------- Mobile restraint ---------- */
@media (max-width: 700px) {
    body[data-page="announcement-management"] .section-title-row {
        min-height: 0;
        padding: 15px;
    }

    body[data-page="announcement-management"] .workspace-announcement-header-actions {
        padding: 8px;
    }

    body[data-page="announcement-management"] .announcement-management-card {
        padding: 13px 13px 12px 16px;
        border-radius: 13px;
    }

    body[data-page="announcement-management"] .announcement-management-card:hover {
        transform: none;
    }

    body[data-page="announcement-management"] .announcement-management-card h2 {
        font-size: .88rem;
    }

    body[data-page="announcement-management"] .announcement-management-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        padding: 9px;
        gap: 6px;
    }
}



/* =========================================================
   Announcement Management — Eye-Catching Premium V3
   Stronger header identity + semantic action colours
   ========================================================= */

/* ---------- Stronger management hero ---------- */
body[data-page="announcement-management"] .section-title-row {
    isolation: isolate;
    min-height: 178px;
    padding: 26px 24px;
    border: 1px solid rgba(255,255,255,.22);
    background:
        radial-gradient(circle at 12% 6%, rgba(255,255,255,.22), transparent 24%),
        radial-gradient(circle at 88% 112%, rgba(255,255,255,.12), transparent 38%),
        linear-gradient(118deg, rgba(255,255,255,.06), transparent 42%),
        linear-gradient(
            135deg,
            #111827 0%,
            #243248 46%,
            #455872 100%
        );
    box-shadow:
        0 20px 46px rgba(15,23,42,.22),
        inset 0 1px 0 rgba(255,255,255,.13),
        inset 0 -1px 0 rgba(15,23,42,.26);
}

body[data-page="announcement-management"] .section-title-row::before {
    width: 7px;
    background:
        linear-gradient(
            180deg,
            #f5d58e 0%,
            #c39954 46%,
            #7b5a2e 100%
        );
    box-shadow:
        8px 0 26px rgba(195,153,84,.22);
}

body[data-page="announcement-management"] .section-title-row::after {
    right: -70px;
    top: -82px;
    width: 235px;
    height: 235px;
    border: 34px solid rgba(255,255,255,.035);
    box-shadow:
        0 0 0 1px rgba(255,255,255,.06),
        0 0 70px rgba(148,163,184,.16);
}

body[data-page="announcement-management"] .section-title-row > div:first-child {
    position: relative;
    z-index: 2;
    max-width: 760px;
}

body[data-page="announcement-management"] .section-title-row > div:first-child::before {
    content: "PRMS";
    position: absolute;
    z-index: -1;
    left: 0;
    top: 36px;
    color: rgba(255,255,255,.035);
    font-size: clamp(4rem, 8vw, 7rem);
    font-weight: 950;
    letter-spacing: -.08em;
    line-height: .8;
    pointer-events: none;
}

body[data-page="announcement-management"] .section-title-row > div:first-child::after {
    width: 92px;
    height: 4px;
    margin-top: 15px;
    background:
        linear-gradient(90deg, #e8c579, rgba(232,197,121,.10));
    box-shadow: 0 0 18px rgba(232,197,121,.20);
}

body[data-page="announcement-management"] .page-subtitle {
    min-height: 27px;
    color: #f8e5b8;
    border-color: rgba(245,213,142,.25);
    background: rgba(245,213,142,.10);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.10),
        0 7px 18px rgba(15,23,42,.14);
    backdrop-filter: blur(8px);
}

body[data-page="announcement-management"] .page-subtitle::before {
    background: #f1cc7d;
    box-shadow:
        0 0 0 4px rgba(241,204,125,.12),
        0 0 14px rgba(241,204,125,.35);
}

body[data-page="announcement-management"] .section-title-row h1 {
    color: #fff;
    font-size: clamp(1.55rem, 2.8vw, 2.35rem);
    text-shadow: 0 3px 18px rgba(15,23,42,.28);
}

body[data-page="announcement-management"] .section-subtitle {
    max-width: 720px;
    color: rgba(255,255,255,.70);
    font-size: .82rem;
    line-height: 1.62;
}

body[data-page="announcement-management"] .workspace-announcement-header-actions {
    align-self: end;
    padding: 11px;
    border-color: rgba(255,255,255,.14);
    background:
        linear-gradient(145deg, rgba(255,255,255,.13), rgba(255,255,255,.055));
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.12),
        0 14px 28px rgba(15,23,42,.16);
    backdrop-filter: blur(12px);
}

body[data-page="announcement-management"] .workspace-announcement-header-actions .workspace-card-link {
    border-color: rgba(255,255,255,.18);
    color: #fff;
    background:
        linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.08));
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.14),
        0 7px 16px rgba(15,23,42,.12);
}

body[data-page="announcement-management"] .workspace-announcement-header-actions .workspace-card-link:last-child {
    border-color: #d8b66e;
    color: #2a2112;
    background:
        linear-gradient(145deg, #f3d99d, #c99b4e);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.55),
        0 9px 20px rgba(173,125,49,.28);
}

/* ---------- More attractive management cards ---------- */
body[data-page="announcement-management"] .announcement-management-card {
    border-color: rgba(100,116,139,.20);
    background:
        radial-gradient(circle at 100% 0%, rgba(71,85,105,.11), transparent 175px),
        linear-gradient(145deg, #ffffff 0%, #f7f9fc 60%, #edf2f7 100%);
    box-shadow:
        0 12px 28px rgba(15,23,42,.075),
        inset 0 1px 0 rgba(255,255,255,.98);
}

body[data-page="announcement-management"] .announcement-management-card::before {
    width: 6px;
    background:
        linear-gradient(
            180deg,
            #1e293b 0%,
            #475569 48%,
            #c49a52 100%
        );
    box-shadow: 8px 0 20px rgba(51,65,85,.12);
}

body[data-page="announcement-management"] .announcement-management-card::after {
    right: -58px;
    bottom: -74px;
    width: 180px;
    height: 180px;
    border: 26px solid rgba(71,85,105,.035);
}

body[data-page="announcement-management"] .workspace-announcement-badges {
    padding: 10px;
    border: 1px solid rgba(100,116,139,.10);
    border-radius: 11px;
    background: rgba(255,255,255,.68);
    box-shadow:
        inset 0 1px 0 #fff,
        0 4px 10px rgba(15,23,42,.025);
}

body[data-page="announcement-management"] .announcement-management-card h2 {
    margin-top: 14px;
    font-size: 1.06rem;
}

body[data-page="announcement-management"] .announcement-management-card h2::before {
    width: 8px;
    height: 8px;
    background: #475569;
    box-shadow:
        0 0 0 4px rgba(71,85,105,.11),
        0 0 12px rgba(71,85,105,.20);
}

body[data-page="announcement-management"] .announcement-management-meta span {
    border-color: rgba(100,116,139,.13);
    background:
        linear-gradient(145deg, rgba(255,255,255,.96), rgba(241,245,249,.90));
}

body[data-page="announcement-management"] .announcement-management-meta span::before {
    background:
        linear-gradient(180deg, #64748b, #c49a52);
}

/* ---------- Semantic action colours ---------- */
body[data-page="announcement-management"] .announcement-management-actions {
    gap: 9px;
    border-color: rgba(100,116,139,.13);
    background:
        linear-gradient(145deg, rgba(241,245,249,.95), rgba(255,255,255,.98));
    box-shadow:
        inset 0 1px 0 #fff,
        0 7px 18px rgba(15,23,42,.035);
}

/* 1. Edit — blue */
body[data-page="announcement-management"] .announcement-management-actions > a:nth-child(1) {
    color: #fff;
    border-color: #2563eb;
    background:
        linear-gradient(145deg, #3b82f6, #1d4ed8);
    box-shadow:
        0 7px 16px rgba(37,99,235,.22),
        inset 0 1px 0 rgba(255,255,255,.18);
}

/* 2. Read status — purple */
body[data-page="announcement-management"] .announcement-management-actions > a:nth-child(2) {
    color: #fff;
    border-color: #7c3aed;
    background:
        linear-gradient(145deg, #8b5cf6, #6d28d9);
    box-shadow:
        0 7px 16px rgba(124,58,237,.22),
        inset 0 1px 0 rgba(255,255,255,.18);
}

/* 3. Publish — green */
body[data-page="announcement-management"] .announcement-management-actions form[action*="publish_announcement"] button {
    color: #fff;
    border-color: #059669;
    background:
        linear-gradient(145deg, #10b981, #047857);
    box-shadow:
        0 7px 16px rgba(5,150,105,.22),
        inset 0 1px 0 rgba(255,255,255,.18);
}

/* 4. Archive — amber */
body[data-page="announcement-management"] .announcement-management-actions form[action*="archive_announcement"] button {
    color: #fff;
    border-color: #d97706;
    background:
        linear-gradient(145deg, #f59e0b, #b45309);
    box-shadow:
        0 7px 16px rgba(217,119,6,.22),
        inset 0 1px 0 rgba(255,255,255,.18);
}

/* Shared hover treatment */
body[data-page="announcement-management"] .announcement-management-actions a:hover,
body[data-page="announcement-management"] .announcement-management-actions button:hover {
    filter: brightness(.96) saturate(1.08);
    transform: translateY(-2px);
}

/* ---------- Mobile refinement ---------- */
@media (max-width: 700px) {
    body[data-page="announcement-management"] .section-title-row {
        min-height: 0;
        padding: 18px 15px 15px;
    }

    body[data-page="announcement-management"] .section-title-row > div:first-child::before {
        top: 42px;
        font-size: 4.2rem;
    }

    body[data-page="announcement-management"] .section-title-row h1 {
        font-size: 1.45rem;
    }

    body[data-page="announcement-management"] .workspace-announcement-header-actions {
        padding: 8px;
    }

    body[data-page="announcement-management"] .announcement-management-card {
        padding: 14px 13px 12px 17px;
    }

    body[data-page="announcement-management"] .workspace-announcement-badges {
        padding: 8px;
    }

    body[data-page="announcement-management"] .announcement-management-actions {
        gap: 6px;
        padding: 8px;
    }

    body[data-page="announcement-management"] .announcement-management-actions a,
    body[data-page="announcement-management"] .announcement-management-actions button {
        min-height: 32px;
        font-size: .60rem;
    }
}
/* =========================================================
   PRMS Announcement Read Status — Unified Premium UI
   Page scope: body[data-page="announcement-read-status"]
   ========================================================= */

body[data-page="announcement-read-status"] {
    --page-bg: #f3f5f8;
    --surface: #ffffff;
    --surface-soft: #f8fafc;
    --text: #172033;
    --text-soft: #5f6e83;
    --text-muted: #7a879a;
    --line: #dfe5ec;

    --primary: #334155;
    --primary-dark: #0f172a;
    --primary-rgb: 51, 65, 85;

    --success: #059669;
    --success-dark: #047857;
    --success-rgb: 5, 150, 105;

    --danger: #dc2626;
    --danger-dark: #991b1b;
    --danger-rgb: 220, 38, 38;

    margin: 0;
    color: var(--text);
    background:
        radial-gradient(circle at 100% 0%, rgba(var(--primary-rgb), .08), transparent 28rem),
        var(--page-bg);
    font-family: Inter, "Segoe UI", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

body[data-page="announcement-read-status"] *,
body[data-page="announcement-read-status"] *::before,
body[data-page="announcement-read-status"] *::after {
    box-sizing: border-box;
}

body[data-page="announcement-read-status"] a,
body[data-page="announcement-read-status"] button {
    -webkit-tap-highlight-color: transparent;
}

body[data-page="announcement-read-status"] .container.page-with-nav {
    width: min(100% - 32px, 1180px);
    margin: 0 auto;
    padding: 18px 4px 88px;
}

/* ---------- Main section ---------- */
body[data-page="announcement-read-status"] .workspace-premium-section {
    position: relative;
    overflow: hidden;
    padding: 20px;
    border: 1px solid rgba(var(--primary-rgb), .16);
    border-radius: 18px;
    background:
        radial-gradient(circle at 100% 0%, rgba(var(--primary-rgb), .07), transparent 260px),
        linear-gradient(145deg, #fff, #f8fafc);
    box-shadow:
        0 14px 34px rgba(15,23,42,.075),
        inset 0 1px 0 rgba(255,255,255,.95);
}

body[data-page="announcement-read-status"] .workspace-premium-section::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 5px;
    background:
        linear-gradient(180deg, var(--primary), var(--primary-dark));
}

body[data-page="announcement-read-status"] .workspace-premium-section::after {
    content: "";
    position: absolute;
    right: -50px;
    top: -58px;
    width: 165px;
    height: 165px;
    border: 24px solid rgba(var(--primary-rgb), .04);
    border-radius: 50%;
    pointer-events: none;
}

/* ---------- Premium hero header ---------- */
body[data-page="announcement-read-status"] .section-title-row {
    position: relative;
    z-index: 1;
    isolation: isolate;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 18px;
    min-height: 178px;
    margin-bottom: 15px;
    padding: 26px 24px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 16px;
    background:
        radial-gradient(circle at 12% 6%, rgba(255,255,255,.22), transparent 24%),
        radial-gradient(circle at 88% 112%, rgba(255,255,255,.12), transparent 38%),
        linear-gradient(118deg, rgba(255,255,255,.06), transparent 42%),
        linear-gradient(135deg, #111827 0%, #243248 46%, #455872 100%);
    box-shadow:
        0 20px 46px rgba(15,23,42,.22),
        inset 0 1px 0 rgba(255,255,255,.13),
        inset 0 -1px 0 rgba(15,23,42,.26);
}

body[data-page="announcement-read-status"] .section-title-row::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 7px;
    background:
        linear-gradient(180deg, #f5d58e 0%, #c39954 46%, #7b5a2e 100%);
    box-shadow: 8px 0 26px rgba(195,153,84,.22);
}

body[data-page="announcement-read-status"] .section-title-row::after {
    content: "";
    position: absolute;
    right: -70px;
    top: -82px;
    width: 235px;
    height: 235px;
    border: 34px solid rgba(255,255,255,.035);
    border-radius: 50%;
    box-shadow:
        0 0 0 1px rgba(255,255,255,.06),
        0 0 70px rgba(148,163,184,.16);
    pointer-events: none;
}

body[data-page="announcement-read-status"] .section-title-row > div:first-child {
    position: relative;
    z-index: 2;
    min-width: 0;
    max-width: 780px;
}

body[data-page="announcement-read-status"] .section-title-row > div:first-child::before {
    content: "READ";
    position: absolute;
    z-index: -1;
    left: 0;
    top: 38px;
    color: rgba(255,255,255,.035);
    font-size: clamp(4rem, 8vw, 7rem);
    font-weight: 950;
    letter-spacing: -.08em;
    line-height: .8;
    pointer-events: none;
}

body[data-page="announcement-read-status"] .section-title-row > div:first-child::after {
    content: "";
    display: block;
    width: 92px;
    height: 4px;
    margin-top: 15px;
    border-radius: 999px;
    background:
        linear-gradient(90deg, #e8c579, rgba(232,197,121,.10));
    box-shadow: 0 0 18px rgba(232,197,121,.20);
}

body[data-page="announcement-read-status"] .page-subtitle {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 27px;
    margin: 0 0 8px;
    padding: 4px 10px;
    border: 1px solid rgba(245,213,142,.25);
    border-radius: 999px;
    color: #f8e5b8;
    background: rgba(245,213,142,.10);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.10),
        0 7px 18px rgba(15,23,42,.14);
    font-size: .62rem;
    font-weight: 900;
    letter-spacing: .11em;
    text-transform: uppercase;
    backdrop-filter: blur(8px);
}

body[data-page="announcement-read-status"] .page-subtitle::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #f1cc7d;
    box-shadow:
        0 0 0 4px rgba(241,204,125,.12),
        0 0 14px rgba(241,204,125,.35);
}

body[data-page="announcement-read-status"] .section-title-row h1 {
    margin: 0;
    color: #fff;
    font-size: clamp(1.5rem, 2.7vw, 2.25rem);
    font-weight: 850;
    line-height: 1.2;
    letter-spacing: -.026em;
    text-shadow: 0 3px 18px rgba(15,23,42,.28);
    overflow-wrap: anywhere;
}

body[data-page="announcement-read-status"] .section-subtitle {
    margin: 6px 0 0;
    color: rgba(255,255,255,.70);
    font-size: .82rem;
    line-height: 1.6;
}

body[data-page="announcement-read-status"] .workspace-card-link {
    position: relative;
    z-index: 2;
    display: inline-flex;
    min-width: 150px;
    min-height: 39px;
    align-items: center;
    justify-content: center;
    padding: 7px 13px;
    border: 1px solid #d8b66e;
    border-radius: 11px;
    color: #2a2112;
    background:
        linear-gradient(145deg, #f3d99d, #c99b4e);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.55),
        0 9px 20px rgba(173,125,49,.28);
    font-size: .7rem;
    font-weight: 850;
    text-align: center;
    text-decoration: none;
}

body[data-page="announcement-read-status"] .workspace-card-link:hover {
    filter: brightness(.98) saturate(1.08);
    transform: translateY(-1px);
}

/* ---------- Statistics ---------- */
body[data-page="announcement-read-status"] .announcement-stat-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 11px;
    margin-bottom: 14px;
}

body[data-page="announcement-read-status"] .announcement-stat-card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-height: 112px;
    padding: 17px;
    border: 1px solid rgba(var(--primary-rgb), .16);
    border-radius: 15px;
    background:
        radial-gradient(circle at 100% 0%, rgba(var(--primary-rgb), .12), transparent 115px),
        linear-gradient(145deg, #fff, #f4f7fa);
    box-shadow:
        0 10px 24px rgba(15,23,42,.06),
        inset 0 1px 0 #fff;
}

body[data-page="announcement-read-status"] .announcement-stat-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 4px;
    background: linear-gradient(90deg, var(--primary-dark), var(--primary), #94a3b8);
}

body[data-page="announcement-read-status"] .announcement-stat-card::after {
    content: "";
    position: absolute;
    z-index: -1;
    right: -36px;
    bottom: -46px;
    width: 120px;
    height: 120px;
    border: 19px solid rgba(var(--primary-rgb), .035);
    border-radius: 50%;
}

body[data-page="announcement-read-status"] .announcement-stat-card:nth-child(2) {
    border-color: rgba(var(--success-rgb), .22);
    background:
        radial-gradient(circle at 100% 0%, rgba(var(--success-rgb), .13), transparent 115px),
        linear-gradient(145deg, #f7fffb, #ffffff);
}

body[data-page="announcement-read-status"] .announcement-stat-card:nth-child(2)::before {
    background: linear-gradient(90deg, var(--success-dark), var(--success), #6ee7b7);
}

body[data-page="announcement-read-status"] .announcement-stat-card.is-unread {
    border-color: rgba(var(--danger-rgb), .22);
    background:
        radial-gradient(circle at 100% 0%, rgba(var(--danger-rgb), .13), transparent 115px),
        linear-gradient(145deg, #fff8f8, #ffffff);
}

body[data-page="announcement-read-status"] .announcement-stat-card.is-unread::before {
    background: linear-gradient(90deg, var(--danger-dark), var(--danger), #fca5a5);
}

body[data-page="announcement-read-status"] .announcement-stat-card span {
    display: block;
    color: var(--text-soft);
    font-size: .7rem;
    font-weight: 850;
    letter-spacing: .03em;
}

body[data-page="announcement-read-status"] .announcement-stat-card strong {
    display: block;
    margin-top: 12px;
    color: var(--primary-dark);
    font-size: clamp(1.55rem, 3vw, 2.25rem);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

body[data-page="announcement-read-status"] .announcement-stat-card:nth-child(2) strong {
    color: var(--success-dark);
}

body[data-page="announcement-read-status"] .announcement-stat-card.is-unread strong {
    color: var(--danger-dark);
}

/* ---------- Reader sections ---------- */
body[data-page="announcement-read-status"] .announcement-reader-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

body[data-page="announcement-read-status"] .announcement-reader-section {
    position: relative;
    overflow: hidden;
    padding: 15px;
    border: 1px solid rgba(var(--primary-rgb), .15);
    border-radius: 15px;
    background:
        radial-gradient(circle at 100% 0%, rgba(var(--primary-rgb), .07), transparent 160px),
        linear-gradient(145deg, #ffffff, #f8fafc);
    box-shadow:
        0 10px 24px rgba(15,23,42,.055),
        inset 0 1px 0 #fff;
}

body[data-page="announcement-read-status"] .announcement-reader-section:first-child {
    border-color: rgba(var(--danger-rgb), .18);
    background:
        radial-gradient(circle at 100% 0%, rgba(var(--danger-rgb), .07), transparent 160px),
        linear-gradient(145deg, #fffafa, #ffffff);
}

body[data-page="announcement-read-status"] .announcement-reader-section:last-child {
    border-color: rgba(var(--success-rgb), .18);
    background:
        radial-gradient(circle at 100% 0%, rgba(var(--success-rgb), .07), transparent 160px),
        linear-gradient(145deg, #f8fffb, #ffffff);
}

body[data-page="announcement-read-status"] .announcement-reader-section h2 {
    position: relative;
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 12px;
    padding: 11px 12px;
    border-radius: 11px;
    color: #fff;
    background:
        linear-gradient(145deg, var(--danger), var(--danger-dark));
    box-shadow:
        0 7px 16px rgba(var(--danger-rgb), .20),
        inset 0 1px 0 rgba(255,255,255,.15);
    font-size: .9rem;
}

body[data-page="announcement-read-status"] .announcement-reader-section:last-child h2 {
    background:
        linear-gradient(145deg, var(--success), var(--success-dark));
    box-shadow:
        0 7px 16px rgba(var(--success-rgb), .20),
        inset 0 1px 0 rgba(255,255,255,.15);
}

body[data-page="announcement-read-status"] .announcement-reader-section h2::before {
    content: "";
    width: 8px;
    height: 8px;
    flex: 0 0 8px;
    border: 2px solid rgba(255,255,255,.8);
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 0 4px rgba(255,255,255,.10);
}

body[data-page="announcement-read-status"] .announcement-user-list {
    display: grid;
    gap: 7px;
}

body[data-page="announcement-read-status"] .announcement-user-row {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 11px;
    border: 1px solid #e1e6ed;
    border-radius: 10px;
    background:
        linear-gradient(145deg, #fff, #f8fafc);
    box-shadow:
        inset 0 1px 0 #fff,
        0 4px 10px rgba(15,23,42,.025);
}

body[data-page="announcement-read-status"] .announcement-user-row.unread {
    border-left: 4px solid var(--danger);
}

body[data-page="announcement-read-status"] .announcement-user-row.read {
    border-left: 4px solid var(--success);
}

body[data-page="announcement-read-status"] .announcement-user-row > div,
body[data-page="announcement-read-status"] .announcement-user-row > strong {
    min-width: 0;
}

body[data-page="announcement-read-status"] .announcement-user-row strong {
    display: block;
    color: #1f2d40;
    font-size: .76rem;
    overflow-wrap: anywhere;
}

body[data-page="announcement-read-status"] .announcement-user-row span,
body[data-page="announcement-read-status"] .announcement-user-row time {
    color: var(--text-muted);
    font-size: .64rem;
}

body[data-page="announcement-read-status"] .announcement-user-row.unread span {
    flex: 0 0 auto;
    padding: 3px 7px;
    border-radius: 999px;
    color: var(--danger-dark);
    background: rgba(var(--danger-rgb), .09);
    font-weight: 800;
}

body[data-page="announcement-read-status"] .announcement-user-row.read span {
    display: block;
    margin-top: 2px;
}

body[data-page="announcement-read-status"] .announcement-user-row time {
    flex: 0 0 auto;
    padding: 4px 7px;
    border-radius: 8px;
    color: var(--success-dark);
    background: rgba(var(--success-rgb), .08);
    font-weight: 750;
    white-space: nowrap;
}

/* ---------- Empty state ---------- */
body[data-page="announcement-read-status"] .empty-state-card {
    display: grid;
    min-height: 92px;
    place-items: center;
    padding: 18px;
    border: 1px dashed rgba(var(--primary-rgb), .22);
    border-radius: 11px;
    color: var(--text-muted);
    background: rgba(var(--primary-rgb), .035);
    font-size: .74rem;
    text-align: center;
}

/* ---------- Focus ---------- */
body[data-page="announcement-read-status"] a:focus-visible {
    outline: 3px solid rgba(232,197,121,.28);
    outline-offset: 2px;
}

/* ---------- Mobile ---------- */
@media (max-width: 700px) {
    body[data-page="announcement-read-status"] .container.page-with-nav {
        width: min(100% - 18px, 640px);
        padding: 9px 0 78px;
    }

    body[data-page="announcement-read-status"] .workspace-premium-section {
        padding: 13px;
        border-radius: 15px;
    }

    body[data-page="announcement-read-status"] .section-title-row {
        grid-template-columns: 1fr;
        align-items: stretch;
        gap: 12px;
        min-height: 0;
        padding: 18px 15px 15px;
        border-radius: 13px;
    }

    body[data-page="announcement-read-status"] .section-title-row > div:first-child::before {
        top: 42px;
        font-size: 4.2rem;
    }

    body[data-page="announcement-read-status"] .section-title-row h1 {
        font-size: 1.42rem;
    }

    body[data-page="announcement-read-status"] .workspace-card-link {
        width: 100%;
        min-height: 35px;
    }

    body[data-page="announcement-read-status"] .announcement-stat-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 7px;
        margin-bottom: 10px;
    }

    body[data-page="announcement-read-status"] .announcement-stat-card {
        min-height: 88px;
        padding: 11px;
        border-radius: 12px;
    }

    body[data-page="announcement-read-status"] .announcement-stat-card span {
        font-size: .58rem;
        line-height: 1.3;
    }

    body[data-page="announcement-read-status"] .announcement-stat-card strong {
        margin-top: 9px;
        font-size: 1.35rem;
    }

    body[data-page="announcement-read-status"] .announcement-reader-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    body[data-page="announcement-read-status"] .announcement-reader-section {
        padding: 11px;
        border-radius: 12px;
    }

    body[data-page="announcement-read-status"] .announcement-reader-section h2 {
        margin-bottom: 9px;
        padding: 9px 10px;
        font-size: .78rem;
    }

    body[data-page="announcement-read-status"] .announcement-user-row {
        padding: 8px 9px;
    }

    body[data-page="announcement-read-status"] .announcement-user-row strong {
        font-size: .7rem;
    }

    body[data-page="announcement-read-status"] .announcement-user-row span,
    body[data-page="announcement-read-status"] .announcement-user-row time {
        font-size: .59rem;
    }
}

@media (max-width: 390px) {
    body[data-page="announcement-read-status"] .announcement-stat-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 5px;
    }

    body[data-page="announcement-read-status"] .announcement-stat-card {
        min-height: 82px;
        padding: 9px 7px;
    }

    body[data-page="announcement-read-status"] .announcement-stat-card span {
        font-size: .53rem;
    }

    body[data-page="announcement-read-status"] .announcement-stat-card strong {
        font-size: 1.18rem;
    }

    body[data-page="announcement-read-status"] .announcement-user-row.read {
        align-items: flex-start;
        flex-direction: column;
        gap: 6px;
    }

    body[data-page="announcement-read-status"] .announcement-user-row time {
        white-space: normal;
    }
}

@media (prefers-reduced-motion: reduce) {
    body[data-page="announcement-read-status"] *,
    body[data-page="announcement-read-status"] *::before,
    body[data-page="announcement-read-status"] *::after {
        animation: none !important;
        transition: none !important;
    }
}

/* =========================================================
   PRMS Announcement Form — Unified Premium UI
   Page scope: body[data-page="announcement-form"]
   ========================================================= */

body[data-page="announcement-form"] {
    --page-bg: #f3f5f8;
    --surface: #ffffff;
    --surface-soft: #f8fafc;
    --text: #172033;
    --text-soft: #5f6e83;
    --text-muted: #7a879a;
    --line: #dfe5ec;

    --primary: #334155;
    --primary-dark: #0f172a;
    --primary-rgb: 51, 65, 85;

    --gold: #c99b4e;
    --gold-dark: #7b5a2e;
    --gold-light: #f3d99d;

    margin: 0;
    color: var(--text);
    background:
        radial-gradient(circle at 100% 0%, rgba(var(--primary-rgb), .08), transparent 28rem),
        var(--page-bg);
    font-family: Inter, "Segoe UI", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

body[data-page="announcement-form"] *,
body[data-page="announcement-form"] *::before,
body[data-page="announcement-form"] *::after {
    box-sizing: border-box;
}

body[data-page="announcement-form"] a,
body[data-page="announcement-form"] button,
body[data-page="announcement-form"] input,
body[data-page="announcement-form"] textarea,
body[data-page="announcement-form"] select {
    -webkit-tap-highlight-color: transparent;
}

body[data-page="announcement-form"] .container.page-with-nav {
    width: min(100% - 32px, 1040px);
    margin: 0 auto;
    padding: 18px 4px 88px;
}

/* ---------- Main card ---------- */
body[data-page="announcement-form"] .announcement-form-card {
    position: relative;
    overflow: hidden;
    padding: 20px;
    border: 1px solid rgba(var(--primary-rgb), .16);
    border-radius: 18px;
    background:
        radial-gradient(circle at 100% 0%, rgba(var(--primary-rgb), .07), transparent 260px),
        linear-gradient(145deg, #fff, #f8fafc);
    box-shadow:
        0 14px 34px rgba(15,23,42,.075),
        inset 0 1px 0 rgba(255,255,255,.95);
}

body[data-page="announcement-form"] .announcement-form-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 5px;
    background:
        linear-gradient(180deg, var(--primary), var(--primary-dark));
}

body[data-page="announcement-form"] .announcement-form-card::after {
    content: "";
    position: absolute;
    right: -50px;
    top: -58px;
    width: 165px;
    height: 165px;
    border: 24px solid rgba(var(--primary-rgb), .04);
    border-radius: 50%;
    pointer-events: none;
}

/* ---------- Premium hero header ---------- */
body[data-page="announcement-form"] .section-title-row {
    position: relative;
    z-index: 1;
    isolation: isolate;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 18px;
    min-height: 178px;
    margin-bottom: 15px;
    padding: 26px 24px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 16px;
    background:
        radial-gradient(circle at 12% 6%, rgba(255,255,255,.22), transparent 24%),
        radial-gradient(circle at 88% 112%, rgba(255,255,255,.12), transparent 38%),
        linear-gradient(118deg, rgba(255,255,255,.06), transparent 42%),
        linear-gradient(135deg, #111827 0%, #243248 46%, #455872 100%);
    box-shadow:
        0 20px 46px rgba(15,23,42,.22),
        inset 0 1px 0 rgba(255,255,255,.13),
        inset 0 -1px 0 rgba(15,23,42,.26);
}

body[data-page="announcement-form"] .section-title-row::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 7px;
    background:
        linear-gradient(180deg, #f5d58e 0%, #c39954 46%, #7b5a2e 100%);
    box-shadow: 8px 0 26px rgba(195,153,84,.22);
}

body[data-page="announcement-form"] .section-title-row::after {
    content: "";
    position: absolute;
    right: -70px;
    top: -82px;
    width: 235px;
    height: 235px;
    border: 34px solid rgba(255,255,255,.035);
    border-radius: 50%;
    box-shadow:
        0 0 0 1px rgba(255,255,255,.06),
        0 0 70px rgba(148,163,184,.16);
    pointer-events: none;
}

body[data-page="announcement-form"] .section-title-row > div:first-child {
    position: relative;
    z-index: 2;
    min-width: 0;
}

body[data-page="announcement-form"] .section-title-row > div:first-child::before {
    content: "FORM";
    position: absolute;
    z-index: -1;
    left: 0;
    top: 38px;
    color: rgba(255,255,255,.035);
    font-size: clamp(4rem, 8vw, 7rem);
    font-weight: 950;
    letter-spacing: -.08em;
    line-height: .8;
    pointer-events: none;
}

body[data-page="announcement-form"] .section-title-row > div:first-child::after {
    content: "";
    display: block;
    width: 92px;
    height: 4px;
    margin-top: 15px;
    border-radius: 999px;
    background:
        linear-gradient(90deg, #e8c579, rgba(232,197,121,.10));
    box-shadow: 0 0 18px rgba(232,197,121,.20);
}

body[data-page="announcement-form"] .page-subtitle {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 27px;
    margin: 0 0 8px;
    padding: 4px 10px;
    border: 1px solid rgba(245,213,142,.25);
    border-radius: 999px;
    color: #f8e5b8;
    background: rgba(245,213,142,.10);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.10),
        0 7px 18px rgba(15,23,42,.14);
    font-size: .62rem;
    font-weight: 900;
    letter-spacing: .11em;
    text-transform: uppercase;
    backdrop-filter: blur(8px);
}

body[data-page="announcement-form"] .page-subtitle::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #f1cc7d;
    box-shadow:
        0 0 0 4px rgba(241,204,125,.12),
        0 0 14px rgba(241,204,125,.35);
}

body[data-page="announcement-form"] .section-title-row h1 {
    margin: 0;
    color: #fff;
    font-size: clamp(1.5rem, 2.7vw, 2.25rem);
    font-weight: 850;
    line-height: 1.2;
    letter-spacing: -.026em;
    text-shadow: 0 3px 18px rgba(15,23,42,.28);
}

body[data-page="announcement-form"] .workspace-card-link {
    position: relative;
    z-index: 2;
    display: inline-flex;
    min-width: 150px;
    min-height: 39px;
    align-items: center;
    justify-content: center;
    padding: 7px 13px;
    border: 1px solid #d8b66e;
    border-radius: 11px;
    color: #2a2112;
    background:
        linear-gradient(145deg, var(--gold-light), var(--gold));
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.55),
        0 9px 20px rgba(173,125,49,.28);
    font-size: .7rem;
    font-weight: 850;
    text-align: center;
    text-decoration: none;
}

body[data-page="announcement-form"] .workspace-card-link:hover {
    filter: brightness(.98) saturate(1.08);
    transform: translateY(-1px);
}

/* ---------- Form shell ---------- */
body[data-page="announcement-form"] .announcement-form-card > form {
    position: relative;
    z-index: 1;
    padding: 18px;
    border: 1px solid rgba(var(--primary-rgb), .13);
    border-radius: 15px;
    background:
        linear-gradient(145deg, rgba(255,255,255,.97), rgba(248,250,252,.94));
    box-shadow:
        0 10px 24px rgba(15,23,42,.055),
        inset 0 1px 0 #fff;
}

body[data-page="announcement-form"] .form-group {
    position: relative;
    margin-bottom: 14px;
}

body[data-page="announcement-form"] .form-group label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 7px;
    color: #334155;
    font-size: .72rem;
    font-weight: 850;
    letter-spacing: .02em;
}

body[data-page="announcement-form"] .form-group label::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--primary);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), .09);
}

body[data-page="announcement-form"] .form-group input,
body[data-page="announcement-form"] .form-group textarea,
body[data-page="announcement-form"] .form-group select {
    width: 100%;
    min-width: 0;
    border: 1px solid #d7dee8;
    border-radius: 11px;
    color: #1f2d40;
    background:
        linear-gradient(180deg, #fff, #f9fbfd);
    box-shadow:
        inset 0 1px 2px rgba(15,23,42,.035),
        0 3px 8px rgba(15,23,42,.025);
    font: inherit;
    font-size: .75rem;
    transition:
        border-color .18s ease,
        box-shadow .18s ease,
        background .18s ease;
}

body[data-page="announcement-form"] .form-group input,
body[data-page="announcement-form"] .form-group select {
    min-height: 42px;
    padding: 8px 11px;
}

body[data-page="announcement-form"] .form-group textarea {
    min-height: 210px;
    padding: 11px 12px;
    line-height: 1.6;
    resize: vertical;
}

body[data-page="announcement-form"] .form-group input:focus,
body[data-page="announcement-form"] .form-group textarea:focus,
body[data-page="announcement-form"] .form-group select:focus {
    outline: none;
    border-color: rgba(var(--primary-rgb), .55);
    background: #fff;
    box-shadow:
        0 0 0 4px rgba(var(--primary-rgb), .10),
        0 7px 16px rgba(var(--primary-rgb), .08);
}

/* ---------- Form grid ---------- */
body[data-page="announcement-form"] .announcement-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 2px;
    padding: 14px;
    border: 1px solid rgba(var(--primary-rgb), .10);
    border-radius: 13px;
    background:
        linear-gradient(145deg, rgba(248,250,252,.96), rgba(255,255,255,.98));
    box-shadow:
        inset 0 1px 0 #fff,
        0 6px 16px rgba(15,23,42,.035);
}

body[data-page="announcement-form"] .announcement-form-grid .form-group {
    margin-bottom: 0;
}

/* ---------- Checkbox row ---------- */
body[data-page="announcement-form"] .announcement-checkbox-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 14px 0;
    padding: 12px 13px;
    border: 1px solid rgba(var(--gold-rgb, 201,155,78), .20);
    border-radius: 11px;
    color: #5c4525;
    background:
        linear-gradient(145deg, #fffaf0, #fff);
    box-shadow:
        0 7px 16px rgba(173,125,49,.07),
        inset 0 1px 0 #fff;
    font-size: .72rem;
    font-weight: 800;
    cursor: pointer;
}

body[data-page="announcement-form"] .announcement-checkbox-row input {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--gold);
    cursor: pointer;
}

/* ---------- Save button ---------- */
body[data-page="announcement-form"] .announcement-primary-button {
    display: inline-flex;
    width: 100%;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    padding: 9px 14px;
    border: 1px solid var(--primary);
    border-radius: 11px;
    color: #fff;
    background:
        linear-gradient(145deg, var(--primary), var(--primary-dark));
    box-shadow:
        0 10px 22px rgba(var(--primary-rgb), .24),
        inset 0 1px 0 rgba(255,255,255,.17);
    font: inherit;
    font-size: .75rem;
    font-weight: 900;
    letter-spacing: .02em;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
}

body[data-page="announcement-form"] .announcement-primary-button:hover {
    filter: brightness(.97) saturate(1.06);
    transform: translateY(-1px);
}

body[data-page="announcement-form"] .announcement-primary-button:active {
    transform: translateY(0) scale(.992);
}

/* ---------- Focus ---------- */
body[data-page="announcement-form"] a:focus-visible,
body[data-page="announcement-form"] button:focus-visible,
body[data-page="announcement-form"] input:focus-visible,
body[data-page="announcement-form"] textarea:focus-visible,
body[data-page="announcement-form"] select:focus-visible {
    outline: 3px solid rgba(232,197,121,.25);
    outline-offset: 2px;
}

/* ---------- Mobile ---------- */
@media (max-width: 700px) {
    body[data-page="announcement-form"] .container.page-with-nav {
        width: min(100% - 18px, 640px);
        padding: 9px 0 78px;
    }

    body[data-page="announcement-form"] .announcement-form-card {
        padding: 13px;
        border-radius: 15px;
    }

    body[data-page="announcement-form"] .section-title-row {
        grid-template-columns: 1fr;
        align-items: stretch;
        gap: 12px;
        min-height: 0;
        padding: 18px 15px 15px;
        border-radius: 13px;
    }

    body[data-page="announcement-form"] .section-title-row > div:first-child::before {
        top: 42px;
        font-size: 4.2rem;
    }

    body[data-page="announcement-form"] .section-title-row h1 {
        font-size: 1.42rem;
    }

    body[data-page="announcement-form"] .workspace-card-link {
        width: 100%;
        min-height: 35px;
    }

    body[data-page="announcement-form"] .announcement-form-card > form {
        padding: 13px;
        border-radius: 12px;
    }

    body[data-page="announcement-form"] .announcement-form-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        padding: 10px;
    }

    body[data-page="announcement-form"] .form-group {
        margin-bottom: 11px;
    }

    body[data-page="announcement-form"] .form-group label {
        margin-bottom: 5px;
        font-size: .65rem;
    }

    body[data-page="announcement-form"] .form-group input,
    body[data-page="announcement-form"] .form-group select {
        min-height: 38px;
        padding: 7px 9px;
        font-size: .68rem;
    }

    body[data-page="announcement-form"] .form-group textarea {
        min-height: 170px;
        padding: 9px 10px;
        font-size: .68rem;
    }

    body[data-page="announcement-form"] .announcement-checkbox-row {
        margin: 11px 0;
        padding: 10px 11px;
        font-size: .66rem;
    }

    body[data-page="announcement-form"] .announcement-primary-button {
        min-height: 40px;
        font-size: .7rem;
    }
}

@media (max-width: 390px) {
    body[data-page="announcement-form"] .announcement-form-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
        padding: 8px;
    }

    body[data-page="announcement-form"] .announcement-form-grid .form-group label {
        font-size: .59rem;
    }

    body[data-page="announcement-form"] .announcement-form-grid .form-group input,
    body[data-page="announcement-form"] .announcement-form-grid .form-group select {
        min-height: 36px;
        padding: 6px 7px;
        font-size: .61rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    body[data-page="announcement-form"] *,
    body[data-page="announcement-form"] *::before,
    body[data-page="announcement-form"] *::after {
        animation: none !important;
        transition: none !important;
    }
}

/* =========================================================
   PRMS Announcements — Unified Premium UI
   Page scope: body[data-page="announcements"]
   ========================================================= */

body[data-page="announcements"] {
    --page-bg: #f3f5f8;
    --surface: #ffffff;
    --surface-soft: #f8fafc;
    --text: #172033;
    --text-soft: #5f6e83;
    --text-muted: #7a879a;
    --line: #dfe5ec;

    --primary: #334155;
    --primary-dark: #0f172a;
    --primary-rgb: 51, 65, 85;

    --gold: #c99b4e;
    --gold-dark: #7b5a2e;
    --gold-light: #f3d99d;

    --success: #059669;
    --success-dark: #047857;
    --success-rgb: 5, 150, 105;

    --danger: #dc2626;
    --danger-dark: #991b1b;
    --danger-rgb: 220, 38, 38;

    margin: 0;
    color: var(--text);
    background:
        radial-gradient(circle at 100% 0%, rgba(var(--primary-rgb), .08), transparent 28rem),
        var(--page-bg);
    font-family: Inter, "Segoe UI", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

body[data-page="announcements"] *,
body[data-page="announcements"] *::before,
body[data-page="announcements"] *::after {
    box-sizing: border-box;
}

body[data-page="announcements"] a,
body[data-page="announcements"] button {
    -webkit-tap-highlight-color: transparent;
}

body[data-page="announcements"] .container.page-with-nav {
    width: min(100% - 32px, 1180px);
    margin: 0 auto;
    padding: 18px 4px 88px;
}

/* ---------- Main board ---------- */
body[data-page="announcements"] .workspace-announcement-board {
    position: relative;
    overflow: hidden;
    padding: 20px;
    border: 1px solid rgba(var(--primary-rgb), .16);
    border-radius: 18px;
    background:
        radial-gradient(circle at 100% 0%, rgba(var(--primary-rgb), .07), transparent 260px),
        linear-gradient(145deg, #fff, #f8fafc);
    box-shadow:
        0 14px 34px rgba(15,23,42,.075),
        inset 0 1px 0 rgba(255,255,255,.95);
}

body[data-page="announcements"] .workspace-announcement-board::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 5px;
    background:
        linear-gradient(180deg, var(--primary), var(--primary-dark));
}

body[data-page="announcements"] .workspace-announcement-board::after {
    content: "";
    position: absolute;
    right: -50px;
    top: -58px;
    width: 165px;
    height: 165px;
    border: 24px solid rgba(var(--primary-rgb), .04);
    border-radius: 50%;
    pointer-events: none;
}

/* ---------- Premium hero header ---------- */
body[data-page="announcements"] .workspace-announcement-board-header {
    position: relative;
    z-index: 1;
    isolation: isolate;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 18px;
    min-height: 178px;
    margin-bottom: 15px;
    padding: 26px 24px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 16px;
    background:
        radial-gradient(circle at 12% 6%, rgba(255,255,255,.22), transparent 24%),
        radial-gradient(circle at 88% 112%, rgba(255,255,255,.12), transparent 38%),
        linear-gradient(118deg, rgba(255,255,255,.06), transparent 42%),
        linear-gradient(135deg, #111827 0%, #243248 46%, #455872 100%);
    box-shadow:
        0 20px 46px rgba(15,23,42,.22),
        inset 0 1px 0 rgba(255,255,255,.13),
        inset 0 -1px 0 rgba(15,23,42,.26);
}

body[data-page="announcements"] .workspace-announcement-board-header::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 7px;
    background:
        linear-gradient(180deg, #f5d58e 0%, #c39954 46%, #7b5a2e 100%);
    box-shadow: 8px 0 26px rgba(195,153,84,.22);
}

body[data-page="announcements"] .workspace-announcement-board-header::after {
    content: "";
    position: absolute;
    right: -70px;
    top: -82px;
    width: 235px;
    height: 235px;
    border: 34px solid rgba(255,255,255,.035);
    border-radius: 50%;
    box-shadow:
        0 0 0 1px rgba(255,255,255,.06),
        0 0 70px rgba(148,163,184,.16);
    pointer-events: none;
}

body[data-page="announcements"] .workspace-announcement-board-header > div:first-child {
    position: relative;
    z-index: 2;
    min-width: 0;
    max-width: 760px;
}

body[data-page="announcements"] .workspace-announcement-board-header > div:first-child::before {
    content: "NOTICE";
    position: absolute;
    z-index: -1;
    left: 0;
    top: 38px;
    color: rgba(255,255,255,.035);
    font-size: clamp(4rem, 8vw, 7rem);
    font-weight: 950;
    letter-spacing: -.08em;
    line-height: .8;
    pointer-events: none;
}

body[data-page="announcements"] .workspace-announcement-board-header > div:first-child::after {
    content: "";
    display: block;
    width: 92px;
    height: 4px;
    margin-top: 15px;
    border-radius: 999px;
    background:
        linear-gradient(90deg, #e8c579, rgba(232,197,121,.10));
    box-shadow: 0 0 18px rgba(232,197,121,.20);
}

body[data-page="announcements"] .workspace-announcement-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 27px;
    margin: 0 0 8px;
    padding: 4px 10px;
    border: 1px solid rgba(245,213,142,.25);
    border-radius: 999px;
    color: #f8e5b8;
    background: rgba(245,213,142,.10);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.10),
        0 7px 18px rgba(15,23,42,.14);
    font-size: .62rem;
    font-weight: 900;
    letter-spacing: .11em;
    text-transform: uppercase;
    backdrop-filter: blur(8px);
}

body[data-page="announcements"] .workspace-announcement-eyebrow::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #f1cc7d;
    box-shadow:
        0 0 0 4px rgba(241,204,125,.12),
        0 0 14px rgba(241,204,125,.35);
}

body[data-page="announcements"] .workspace-announcement-board-header h1 {
    margin: 0;
    color: #fff;
    font-size: clamp(1.5rem, 2.7vw, 2.25rem);
    font-weight: 850;
    line-height: 1.2;
    letter-spacing: -.026em;
    text-shadow: 0 3px 18px rgba(15,23,42,.28);
}

body[data-page="announcements"] .workspace-announcement-board-header p {
    margin: 6px 0 0;
    color: rgba(255,255,255,.70);
    font-size: .82rem;
    line-height: 1.6;
}

body[data-page="announcements"] .workspace-announcement-header-actions {
    position: relative;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
    align-self: end;
    padding: 11px;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 12px;
    background:
        linear-gradient(145deg, rgba(255,255,255,.13), rgba(255,255,255,.055));
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.12),
        0 14px 28px rgba(15,23,42,.16);
    backdrop-filter: blur(12px);
}

body[data-page="announcements"] .workspace-card-link {
    display: inline-flex;
    min-width: 140px;
    min-height: 39px;
    align-items: center;
    justify-content: center;
    padding: 7px 13px;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 11px;
    color: #fff;
    background:
        linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.08));
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.14),
        0 7px 16px rgba(15,23,42,.12);
    font-size: .7rem;
    font-weight: 850;
    text-align: center;
    text-decoration: none;
}

body[data-page="announcements"] .workspace-card-link:last-child {
    border-color: #d8b66e;
    color: #2a2112;
    background:
        linear-gradient(145deg, var(--gold-light), var(--gold));
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.55),
        0 9px 20px rgba(173,125,49,.28);
}

body[data-page="announcements"] .workspace-card-link:hover {
    filter: brightness(.98) saturate(1.08);
    transform: translateY(-1px);
}

/* ---------- Announcement list ---------- */
body[data-page="announcements"] .workspace-announcement-list {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 12px;
}

body[data-page="announcements"] .workspace-announcement-item {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 17px 18px 15px 20px;
    border: 1px solid rgba(var(--primary-rgb), .16);
    border-radius: 16px;
    background:
        radial-gradient(circle at 100% 0%, rgba(var(--primary-rgb), .085), transparent 170px),
        linear-gradient(145deg, #ffffff 0%, #f8fafc 64%, #f2f5f9 100%);
    box-shadow:
        0 10px 24px rgba(15,23,42,.06),
        inset 0 1px 0 rgba(255,255,255,.98);
    transition:
        transform .18s ease,
        box-shadow .18s ease,
        border-color .18s ease;
}

body[data-page="announcements"] .workspace-announcement-item::before {
    content: "";
    position: absolute;
    inset: 12px auto 12px 0;
    width: 6px;
    border-radius: 99px;
    background:
        linear-gradient(180deg, #1e293b 0%, #475569 48%, #c49a52 100%);
    box-shadow: 8px 0 20px rgba(51,65,85,.12);
}

body[data-page="announcements"] .workspace-announcement-item::after {
    content: "";
    position: absolute;
    z-index: -1;
    right: -58px;
    bottom: -74px;
    width: 180px;
    height: 180px;
    border: 26px solid rgba(71,85,105,.035);
    border-radius: 50%;
}

body[data-page="announcements"] .workspace-announcement-item:hover {
    border-color: rgba(var(--primary-rgb), .28);
    box-shadow:
        0 16px 34px rgba(var(--primary-rgb), .11),
        inset 0 1px 0 #fff;
    transform: translateY(-2px);
}

body[data-page="announcements"] .workspace-announcement-item.is-unread {
    border-color: rgba(var(--primary-rgb), .26);
    background:
        radial-gradient(circle at 100% 0%, rgba(var(--primary-rgb), .11), transparent 175px),
        linear-gradient(145deg, #ffffff 0%, #f2f6fa 66%, #eaf0f6 100%);
}

body[data-page="announcements"] .workspace-announcement-item.is-important {
    border-color: rgba(180,83,9,.28);
    background:
        radial-gradient(circle at 100% 0%, rgba(217,119,6,.12), transparent 175px),
        linear-gradient(145deg, #fffdf9 0%, #fff8ed 65%, #f7ead5 100%);
}

body[data-page="announcements"] .workspace-announcement-item.is-important::before {
    background:
        linear-gradient(180deg, #f59e0b, #b45309, #7c2d12);
    box-shadow: 8px 0 20px rgba(180,83,9,.13);
}

body[data-page="announcements"] .workspace-announcement-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 10px;
    border: 1px solid rgba(var(--primary-rgb), .10);
    border-radius: 11px;
    background: rgba(255,255,255,.68);
    box-shadow:
        inset 0 1px 0 #fff,
        0 4px 10px rgba(15,23,42,.025);
}

body[data-page="announcements"] .announcement-badge {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 3px 9px;
    border: 1px solid rgba(148,163,184,.12);
    border-radius: 999px;
    font-size: .64rem;
    font-weight: 850;
    line-height: 1;
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.45),
        0 3px 8px rgba(15,23,42,.035);
}

body[data-page="announcements"] .announcement-badge.pinned {
    color: #7c4a03;
    background: #fff2cc;
}

body[data-page="announcements"] .announcement-badge.unread {
    color: #fff;
    background:
        linear-gradient(145deg, var(--primary), var(--primary-dark));
}

body[data-page="announcements"] .announcement-badge.read {
    color: #fff;
    background:
        linear-gradient(145deg, var(--success), var(--success-dark));
}

body[data-page="announcements"] .workspace-announcement-item h2 {
    position: relative;
    margin: 14px 0 6px;
    padding-left: 13px;
    color: #172033;
    font-size: 1.06rem;
    line-height: 1.35;
    letter-spacing: -.012em;
}

body[data-page="announcements"] .workspace-announcement-item h2::before {
    content: "";
    position: absolute;
    left: 0;
    top: .34em;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #475569;
    box-shadow:
        0 0 0 4px rgba(71,85,105,.11),
        0 0 12px rgba(71,85,105,.20);
}

body[data-page="announcements"] .workspace-announcement-item.is-important h2::before {
    background: #d97706;
    box-shadow:
        0 0 0 4px rgba(217,119,6,.12),
        0 0 12px rgba(217,119,6,.22);
}

body[data-page="announcements"] .workspace-announcement-body {
    margin: 0;
    color: #56657a;
    font-size: .79rem;
    line-height: 1.62;
    white-space: pre-line;
    overflow-wrap: anywhere;
}

body[data-page="announcements"] .workspace-announcement-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 14px;
    padding: 13px;
    border: 1px solid rgba(var(--primary-rgb), .10);
    border-radius: 12px;
    color: var(--text-muted);
    background:
        linear-gradient(145deg, rgba(248,250,252,.92), rgba(255,255,255,.96));
    box-shadow:
        inset 0 1px 0 #fff,
        0 7px 18px rgba(15,23,42,.035);
    font-size: .68rem;
}

body[data-page="announcements"] .workspace-announcement-footer form {
    display: flex;
    margin: 0;
}

body[data-page="announcements"] .announcement-read-button {
    display: inline-flex;
    min-width: 128px;
    min-height: 35px;
    align-items: center;
    justify-content: center;
    padding: 6px 11px;
    border: 1px solid var(--success);
    border-radius: 10px;
    color: #fff;
    background:
        linear-gradient(145deg, var(--success), var(--success-dark));
    box-shadow:
        0 7px 16px rgba(var(--success-rgb), .22),
        inset 0 1px 0 rgba(255,255,255,.18);
    font: inherit;
    font-size: .68rem;
    font-weight: 850;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
}

body[data-page="announcements"] .announcement-read-button:hover {
    filter: brightness(.96) saturate(1.08);
    transform: translateY(-1px);
}

/* ---------- Empty state ---------- */
body[data-page="announcements"] .empty-state-card {
    position: relative;
    z-index: 1;
    display: grid;
    min-height: 120px;
    place-items: center;
    padding: 20px;
    border: 1px dashed rgba(var(--primary-rgb), .22);
    border-radius: 13px;
    color: var(--text-muted);
    background:
        linear-gradient(145deg, rgba(248,250,252,.96), rgba(255,255,255,.98));
    font-size: .78rem;
    text-align: center;
}

/* ---------- Focus ---------- */
body[data-page="announcements"] a:focus-visible,
body[data-page="announcements"] button:focus-visible {
    outline: 3px solid rgba(232,197,121,.25);
    outline-offset: 2px;
}

/* ---------- Mobile ---------- */
@media (max-width: 700px) {
    body[data-page="announcements"] .container.page-with-nav {
        width: min(100% - 18px, 640px);
        padding: 9px 0 78px;
    }

    body[data-page="announcements"] .workspace-announcement-board {
        padding: 13px;
        border-radius: 15px;
    }

    body[data-page="announcements"] .workspace-announcement-board-header {
        grid-template-columns: 1fr;
        align-items: stretch;
        gap: 12px;
        min-height: 0;
        padding: 18px 15px 15px;
        border-radius: 13px;
    }

    body[data-page="announcements"] .workspace-announcement-board-header > div:first-child::before {
        top: 42px;
        font-size: 4.2rem;
    }

    body[data-page="announcements"] .workspace-announcement-board-header h1 {
        font-size: 1.42rem;
    }

    body[data-page="announcements"] .workspace-announcement-header-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
        gap: 6px;
        padding: 8px;
    }

    body[data-page="announcements"] .workspace-announcement-header-actions .workspace-card-link {
        width: 100%;
        min-width: 0;
        min-height: 34px;
        padding: 5px 7px;
        font-size: .64rem;
        white-space: normal;
    }

    body[data-page="announcements"] .workspace-announcement-item {
        padding: 14px 13px 12px 17px;
        border-radius: 13px;
    }

    body[data-page="announcements"] .workspace-announcement-item:hover {
        transform: none;
    }

    body[data-page="announcements"] .workspace-announcement-badges {
        padding: 8px;
    }

    body[data-page="announcements"] .workspace-announcement-item h2 {
        margin-top: 11px;
        font-size: .88rem;
    }

    body[data-page="announcements"] .workspace-announcement-body {
        font-size: .72rem;
        line-height: 1.52;
    }

    body[data-page="announcements"] .workspace-announcement-footer {
        gap: 7px;
        margin-top: 11px;
        padding: 9px;
        font-size: .61rem;
    }

    body[data-page="announcements"] .announcement-read-button {
        min-width: 110px;
        min-height: 32px;
        padding: 5px 8px;
        font-size: .61rem;
    }
}

@media (max-width: 390px) {
    body[data-page="announcements"] .workspace-announcement-header-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body[data-page="announcements"] .workspace-announcement-footer {
        align-items: stretch;
        flex-direction: column;
    }

    body[data-page="announcements"] .workspace-announcement-footer form,
    body[data-page="announcements"] .announcement-read-button {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    body[data-page="announcements"] *,
    body[data-page="announcements"] *::before,
    body[data-page="announcements"] *::after {
        animation: none !important;
        transition: none !important;
    }
}

/* =========================================================
   PRMS Wallet — Premium Asset UI
   Page scope: body[data-page="wallet"]
   Different palette: emerald + teal + gold + indigo
   ========================================================= */

body[data-page="wallet"] {
    --wallet-bg: #f2f6f5;
    --wallet-surface: #ffffff;
    --wallet-surface-soft: #f7faf9;
    --wallet-text: #16302d;
    --wallet-text-soft: #526d68;
    --wallet-text-muted: #7b918d;
    --wallet-line: #d8e4e1;

    --wallet-primary: #0f766e;
    --wallet-primary-dark: #134e4a;
    --wallet-primary-rgb: 15, 118, 110;

    --wallet-accent: #0e7490;
    --wallet-accent-dark: #155e75;
    --wallet-accent-rgb: 14, 116, 144;

    --wallet-gold: #b7791f;
    --wallet-gold-dark: #7c4a03;
    --wallet-gold-light: #f7d794;

    --wallet-indigo: #5b5bd6;
    --wallet-indigo-dark: #3730a3;
    --wallet-indigo-rgb: 91, 91, 214;

    --wallet-success: #059669;
    --wallet-danger: #dc2626;

    margin: 0;
    color: var(--wallet-text);
    background:
        radial-gradient(circle at 100% 0%, rgba(var(--wallet-primary-rgb), .10), transparent 30rem),
        radial-gradient(circle at 0% 100%, rgba(var(--wallet-accent-rgb), .06), transparent 26rem),
        var(--wallet-bg);
    font-family: Inter, "Segoe UI", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

body[data-page="wallet"] *,
body[data-page="wallet"] *::before,
body[data-page="wallet"] *::after {
    box-sizing: border-box;
}

body[data-page="wallet"] a,
body[data-page="wallet"] button,
body[data-page="wallet"] input,
body[data-page="wallet"] select {
    -webkit-tap-highlight-color: transparent;
}

body[data-page="wallet"] .container.page-with-nav {
    width: min(100% - 32px, 1220px);
    margin: 0 auto;
    padding: 18px 4px 92px;
}

/* ---------- Role palette mapping ---------- */
body[data-page="wallet"].role-promoter {
    --role-color: #db2777;
    --role-color-dark: #9d174d;
    --role-color-rgb: 219, 39, 119;
}

body[data-page="wallet"].role-business {
    --role-color: #2563eb;
    --role-color-dark: #1e3a8a;
    --role-color-rgb: 37, 99, 235;
}

body[data-page="wallet"].role-team-leader {
    --role-color: #7c3aed;
    --role-color-dark: #4c1d95;
    --role-color-rgb: 124, 58, 237;
}

body[data-page="wallet"].role-dj {
    --role-color: #be123c;
    --role-color-dark: #831843;
    --role-color-rgb: 190, 18, 60;
}

body[data-page="wallet"].role-manager {
    --role-color: #0f766e;
    --role-color-dark: #134e4a;
    --role-color-rgb: 15, 118, 110;
}

body[data-page="wallet"].role-store-manager {
    --role-color: #d97706;
    --role-color-dark: #92400e;
    --role-color-rgb: 217, 119, 6;
}

body[data-page="wallet"].role-senior-admin {
    --role-color: #475569;
    --role-color-dark: #0f172a;
    --role-color-rgb: 71, 85, 105;
}

body[data-page="wallet"] {
    --role-color: var(--wallet-primary);
    --role-color-dark: var(--wallet-primary-dark);
    --role-color-rgb: var(--wallet-primary-rgb);
}

/* ---------- Premium wallet hero ---------- */
body[data-page="wallet"] .wallet-premium-hero {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    min-height: 174px;
    padding: 26px 24px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 18px;
    color: #fff;
    background:
        radial-gradient(circle at 12% 8%, rgba(255,255,255,.18), transparent 24%),
        radial-gradient(circle at 88% 110%, rgba(255,255,255,.12), transparent 38%),
        linear-gradient(118deg, rgba(255,255,255,.06), transparent 42%),
        linear-gradient(
            135deg,
            #073b37 0%,
            #0f766e 50%,
            #14b8a6 100%
        );
    box-shadow:
        0 20px 46px rgba(7,59,55,.25),
        inset 0 1px 0 rgba(255,255,255,.14),
        inset 0 -1px 0 rgba(7,59,55,.24);
}

body[data-page="wallet"] .wallet-premium-hero::before {
    content: "WALLET";
    position: absolute;
    z-index: -1;
    left: 102px;
    top: 48px;
    color: rgba(255,255,255,.04);
    font-size: clamp(4rem, 8vw, 7rem);
    font-weight: 950;
    letter-spacing: -.08em;
    line-height: .8;
    pointer-events: none;
}

body[data-page="wallet"] .wallet-premium-hero::after {
    content: "";
    position: absolute;
    right: -72px;
    top: -88px;
    width: 250px;
    height: 250px;
    border: 36px solid rgba(255,255,255,.04);
    border-radius: 50%;
    box-shadow:
        0 0 0 1px rgba(255,255,255,.06),
        0 0 80px rgba(45,212,191,.18);
}

body[data-page="wallet"] .wallet-premium-hero-main {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 17px;
    min-width: 0;
}

body[data-page="wallet"] .wallet-premium-icon {
    display: grid;
    flex: 0 0 68px;
    width: 68px;
    height: 68px;
    place-items: center;
    border: 1px solid rgba(255,255,255,.24);
    border-radius: 20px;
    color: #fff8df;
    background:
        linear-gradient(145deg, rgba(255,255,255,.20), rgba(255,255,255,.07));
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.20),
        0 13px 28px rgba(3,47,43,.24);
    font-size: 1rem;
    font-weight: 950;
}

body[data-page="wallet"] .wallet-premium-hero .page-subtitle {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 27px;
    margin: 0 0 8px;
    padding: 4px 10px;
    border: 1px solid rgba(247,215,148,.24);
    border-radius: 999px;
    color: #fff0c6;
    background: rgba(247,215,148,.11);
    font-size: .62rem;
    font-weight: 900;
    letter-spacing: .11em;
    text-transform: uppercase;
}

body[data-page="wallet"] .wallet-premium-hero .page-subtitle::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #f7d794;
    box-shadow:
        0 0 0 4px rgba(247,215,148,.12),
        0 0 14px rgba(247,215,148,.35);
}

body[data-page="wallet"] .wallet-premium-hero h1 {
    margin: 0;
    color: #fff;
    font-size: clamp(1.55rem, 2.8vw, 2.35rem);
    font-weight: 850;
    line-height: 1.2;
    letter-spacing: -.026em;
    text-shadow: 0 3px 18px rgba(3,47,43,.28);
}

body[data-page="wallet"] .wallet-premium-user-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    color: rgba(255,255,255,.76);
    font-size: .78rem;
}

body[data-page="wallet"] .role-badge {
    display: inline-flex;
    min-height: 25px;
    align-items: center;
    padding: 3px 9px;
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 999px;
    color: #fff;
    background: rgba(var(--role-color-rgb), .72);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.16),
        0 4px 10px rgba(3,47,43,.13);
    font-size: .66rem;
    font-weight: 850;
}

/* ---------- Alerts ---------- */
body[data-page="wallet"] .alert {
    margin-top: 12px;
    padding: 11px 13px;
    border: 1px solid var(--wallet-line);
    border-radius: 11px;
    background: #fff;
    box-shadow: 0 7px 16px rgba(15,23,42,.045);
    font-size: .72rem;
}

body[data-page="wallet"] .alert.success {
    color: #065f46;
    border-color: rgba(5,150,105,.22);
    background: #ecfdf5;
}

body[data-page="wallet"] .alert.error,
body[data-page="wallet"] .alert.danger {
    color: #991b1b;
    border-color: rgba(220,38,38,.22);
    background: #fef2f2;
}

/* ---------- Balance and withdrawal ---------- */
body[data-page="wallet"] .wallet-premium-top-grid {
    display: grid;
    grid-template-columns: minmax(260px, .72fr) minmax(0, 1.28fr);
    gap: 13px;
    margin-top: 14px;
}

body[data-page="wallet"] .wallet-premium-balance-card,
body[data-page="wallet"] .wallet-premium-withdraw-card,
body[data-page="wallet"] .wallet-premium-section-card {
    position: relative;
    overflow: hidden;
    border-radius: 16px;
    box-shadow:
        0 12px 28px rgba(15,23,42,.07),
        inset 0 1px 0 rgba(255,255,255,.98);
}

body[data-page="wallet"] .wallet-premium-balance-card {
    isolation: isolate;
    min-height: 220px;
    padding: 22px;
    border: 1px solid rgba(183,121,31,.30);
    background:
        radial-gradient(circle at 100% 0%, rgba(247,215,148,.30), transparent 160px),
        radial-gradient(circle at 0% 100%, rgba(183,121,31,.10), transparent 170px),
        linear-gradient(145deg, #fff9e9 0%, #ffffff 58%, #f6ead0 100%);
    box-shadow:
        0 16px 34px rgba(124,74,3,.12),
        inset 0 1px 0 rgba(255,255,255,.98);
}

body[data-page="wallet"] .wallet-premium-balance-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 5px;
    background:
        linear-gradient(90deg, var(--wallet-gold-dark), var(--wallet-gold), #f7d794);
}

body[data-page="wallet"] .wallet-premium-balance-card::after {
    content: "";
    position: absolute;
    z-index: -1;
    right: -52px;
    bottom: -70px;
    width: 180px;
    height: 180px;
    border: 28px solid rgba(183,121,31,.055);
    border-radius: 50%;
}

body[data-page="wallet"] .summary-label {
    display: inline-flex;
    align-items: center;
    min-height: 25px;
    padding: 4px 9px;
    border: 1px solid rgba(183,121,31,.20);
    border-radius: 999px;
    color: var(--wallet-gold-dark);
    background: rgba(255,255,255,.74);
    font-size: .66rem;
    font-weight: 900;
}

body[data-page="wallet"] .wallet-premium-balance-card h2 {
    margin: 24px 0 8px;
    color: #5b3b08;
    font-size: clamp(2rem, 4vw, 3.15rem);
    line-height: 1;
    letter-spacing: -.05em;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 1px 0 #fff;
}

body[data-page="wallet"] .wallet-premium-balance-card p {
    margin: 0;
    color: #806438;
    font-size: .75rem;
    line-height: 1.55;
}

body[data-page="wallet"] .wallet-premium-withdraw-card {
    padding: 18px;
    border: 1px solid rgba(var(--wallet-primary-rgb), .18);
    background:
        radial-gradient(circle at 100% 0%, rgba(var(--wallet-primary-rgb), .09), transparent 180px),
        linear-gradient(145deg, #ffffff 0%, #f4faf8 100%);
}

body[data-page="wallet"] .wallet-premium-withdraw-card::before,
body[data-page="wallet"] .wallet-premium-section-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 5px;
    background:
        linear-gradient(180deg, var(--wallet-primary), var(--wallet-primary-dark));
}

body[data-page="wallet"] .section-title-row {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
    padding: 12px 13px;
    border: 1px solid rgba(var(--wallet-primary-rgb), .12);
    border-radius: 12px;
    background:
        linear-gradient(145deg, rgba(255,255,255,.94), rgba(var(--wallet-primary-rgb), .045));
}

body[data-page="wallet"] .section-title-row h3 {
    margin: 0;
    color: #163d39;
    font-size: 1rem;
    letter-spacing: -.015em;
}

body[data-page="wallet"] .section-subtitle {
    margin: 4px 0 0;
    color: var(--wallet-text-muted);
    font-size: .71rem;
    line-height: 1.45;
}

body[data-page="wallet"] .section-count {
    display: inline-flex;
    flex: 0 0 auto;
    min-height: 28px;
    align-items: center;
    padding: 4px 9px;
    border: 1px solid rgba(var(--wallet-primary-rgb), .16);
    border-radius: 999px;
    color: var(--wallet-primary-dark);
    background: rgba(var(--wallet-primary-rgb), .07);
    font-size: .67rem;
    font-weight: 850;
}

/* ---------- Withdrawal form ---------- */
body[data-page="wallet"] .wallet-premium-withdraw-form {
    margin: 0;
    padding: 14px;
    border: 1px solid rgba(var(--wallet-primary-rgb), .11);
    border-radius: 12px;
    background: rgba(255,255,255,.78);
    box-shadow: inset 0 1px 0 #fff;
}

body[data-page="wallet"] .wallet-premium-form-grid {
    display: grid;
    gap: 11px;
}

body[data-page="wallet"] .wallet-premium-form-full label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 6px;
    color: #28534f;
    font-size: .68rem;
    font-weight: 850;
}

body[data-page="wallet"] .wallet-premium-form-full label::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--wallet-primary);
    box-shadow: 0 0 0 3px rgba(var(--wallet-primary-rgb), .09);
}

body[data-page="wallet"] .wallet-premium-withdraw-form select,
body[data-page="wallet"] .wallet-premium-withdraw-form input {
    width: 100%;
    min-height: 42px;
    padding: 8px 11px;
    border: 1px solid #cfdfdb;
    border-radius: 10px;
    color: #203f3c;
    background: linear-gradient(180deg, #fff, #f8fbfa);
    font: inherit;
    font-size: .72rem;
    box-shadow:
        inset 0 1px 2px rgba(15,23,42,.035),
        0 3px 8px rgba(15,23,42,.025);
}

body[data-page="wallet"] .wallet-premium-withdraw-form select:focus,
body[data-page="wallet"] .wallet-premium-withdraw-form input:focus {
    outline: none;
    border-color: rgba(var(--wallet-primary-rgb), .55);
    box-shadow:
        0 0 0 4px rgba(var(--wallet-primary-rgb), .10),
        0 7px 16px rgba(var(--wallet-primary-rgb), .08);
}

body[data-page="wallet"] .wallet-premium-withdraw-form button {
    display: inline-flex;
    width: 100%;
    min-height: 42px;
    align-items: center;
    justify-content: center;
    margin-top: 12px;
    padding: 8px 13px;
    border: 1px solid var(--wallet-primary);
    border-radius: 10px;
    color: #fff;
    background:
        linear-gradient(145deg, var(--wallet-primary), var(--wallet-primary-dark));
    box-shadow:
        0 9px 20px rgba(var(--wallet-primary-rgb), .23),
        inset 0 1px 0 rgba(255,255,255,.17);
    font: inherit;
    font-size: .72rem;
    font-weight: 900;
    cursor: pointer;
}

/* ---------- Quick links ---------- */
body[data-page="wallet"] .wallet-premium-quick-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 11px;
    margin-top: 13px;
}

body[data-page="wallet"] .wallet-premium-quick-card {
    position: relative;
    isolation: isolate;
    display: flex;
    min-width: 0;
    min-height: 112px;
    align-items: center;
    gap: 12px;
    padding: 15px;
    overflow: hidden;
    border: 1px solid rgba(var(--wallet-accent-rgb), .18);
    border-radius: 14px;
    color: inherit;
    background:
        radial-gradient(circle at 100% 0%, rgba(var(--wallet-accent-rgb), .12), transparent 120px),
        linear-gradient(145deg, #ffffff, #f1f8fa);
    box-shadow:
        0 9px 22px rgba(15,23,42,.055),
        inset 0 1px 0 #fff;
    text-decoration: none;
    transition: .18s ease;
}

body[data-page="wallet"] .wallet-premium-quick-card:nth-child(2) {
    border-color: rgba(var(--wallet-indigo-rgb), .18);
    background:
        radial-gradient(circle at 100% 0%, rgba(var(--wallet-indigo-rgb), .12), transparent 120px),
        linear-gradient(145deg, #ffffff, #f4f4ff);
}

body[data-page="wallet"] .wallet-premium-quick-card:nth-child(3) {
    border-color: rgba(183,121,31,.22);
    background:
        radial-gradient(circle at 100% 0%, rgba(247,215,148,.22), transparent 120px),
        linear-gradient(145deg, #ffffff, #fff9eb);
}

body[data-page="wallet"] .wallet-premium-quick-card:hover {
    transform: translateY(-2px);
    box-shadow:
        0 14px 30px rgba(15,23,42,.09),
        inset 0 1px 0 #fff;
}

body[data-page="wallet"] .wallet-premium-quick-icon {
    display: grid;
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    place-items: center;
    border-radius: 12px;
    color: #fff;
    background:
        linear-gradient(145deg, var(--wallet-accent), var(--wallet-accent-dark));
    box-shadow:
        0 8px 17px rgba(var(--wallet-accent-rgb), .20),
        inset 0 1px 0 rgba(255,255,255,.18);
    font-size: .78rem;
    font-weight: 950;
}

body[data-page="wallet"] .wallet-premium-quick-card:nth-child(2) .wallet-premium-quick-icon {
    background:
        linear-gradient(145deg, var(--wallet-indigo), var(--wallet-indigo-dark));
    box-shadow:
        0 8px 17px rgba(var(--wallet-indigo-rgb), .20),
        inset 0 1px 0 rgba(255,255,255,.18);
}

body[data-page="wallet"] .wallet-premium-quick-card:nth-child(3) .wallet-premium-quick-icon {
    color: #3c2806;
    background:
        linear-gradient(145deg, var(--wallet-gold-light), var(--wallet-gold));
    box-shadow:
        0 8px 17px rgba(183,121,31,.22),
        inset 0 1px 0 rgba(255,255,255,.35);
}

body[data-page="wallet"] .wallet-premium-quick-card strong {
    display: block;
    color: #183a37;
    font-size: .78rem;
}

body[data-page="wallet"] .wallet-premium-quick-card p {
    margin: 4px 0 0;
    color: var(--wallet-text-muted);
    font-size: .66rem;
    line-height: 1.4;
}

/* ---------- Section cards ---------- */
body[data-page="wallet"] .wallet-premium-section-card {
    margin-top: 13px;
    padding: 18px;
    border: 1px solid rgba(var(--wallet-primary-rgb), .16);
    background:
        radial-gradient(circle at 100% 0%, rgba(var(--wallet-primary-rgb), .07), transparent 210px),
        linear-gradient(145deg, #ffffff, #f7faf9);
}

body[data-page="wallet"] .wallet-premium-list {
    display: grid;
    gap: 10px;
}

body[data-page="wallet"] .wallet-premium-record-card,
body[data-page="wallet"] .wallet-premium-request-card {
    position: relative;
    overflow: hidden;
    padding: 14px;
    border: 1px solid #dce7e4;
    border-radius: 13px;
    background:
        linear-gradient(145deg, #fff, #f7faf9);
    box-shadow:
        0 7px 17px rgba(15,23,42,.045),
        inset 0 1px 0 #fff;
}

body[data-page="wallet"] .wallet-premium-record-card::before,
body[data-page="wallet"] .wallet-premium-request-card::before {
    content: "";
    position: absolute;
    inset: 10px auto 10px 0;
    width: 4px;
    border-radius: 99px;
    background:
        linear-gradient(180deg, var(--wallet-accent), var(--wallet-primary));
}

body[data-page="wallet"] .wallet-premium-request-card::before {
    background:
        linear-gradient(180deg, var(--wallet-indigo), var(--wallet-indigo-dark));
}

body[data-page="wallet"] .wallet-premium-record-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

body[data-page="wallet"] .wallet-premium-record-top h4 {
    margin: 0;
    color: #173b37;
    font-size: .84rem;
}

body[data-page="wallet"] .wallet-premium-record-top p {
    margin: 3px 0 0;
    color: var(--wallet-text-muted);
    font-size: .63rem;
}

body[data-page="wallet"] .wallet-premium-amount-pill,
body[data-page="wallet"] .wallet-premium-status-pill {
    display: inline-flex;
    flex: 0 0 auto;
    min-height: 28px;
    align-items: center;
    padding: 4px 9px;
    border-radius: 999px;
    color: #fff;
    background:
        linear-gradient(145deg, var(--wallet-primary), var(--wallet-primary-dark));
    box-shadow:
        0 5px 12px rgba(var(--wallet-primary-rgb), .18),
        inset 0 1px 0 rgba(255,255,255,.16);
    font-size: .66rem;
    font-weight: 900;
}

body[data-page="wallet"] .wallet-premium-status-pill {
    background:
        linear-gradient(145deg, var(--wallet-indigo), var(--wallet-indigo-dark));
    box-shadow:
        0 5px 12px rgba(var(--wallet-indigo-rgb), .18),
        inset 0 1px 0 rgba(255,255,255,.16);
}

body[data-page="wallet"] .wallet-premium-message {
    margin-top: 10px;
    padding: 9px 10px;
    border: 1px solid #e0e9e7;
    border-radius: 9px;
    color: var(--wallet-text-soft);
    background: rgba(255,255,255,.72);
    font-size: .68rem;
    line-height: 1.48;
    overflow-wrap: anywhere;
}

body[data-page="wallet"] .attendance-info-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 7px;
    margin-top: 10px;
}

body[data-page="wallet"] .attendance-info-grid > div {
    min-width: 0;
    padding: 8px 9px;
    border: 1px solid #dfe8e6;
    border-radius: 9px;
    background: rgba(255,255,255,.72);
}

body[data-page="wallet"] .attendance-info-grid span {
    display: block;
    color: var(--wallet-text-muted);
    font-size: .60rem;
}

body[data-page="wallet"] .attendance-info-grid strong {
    display: block;
    margin-top: 3px;
    color: #24423f;
    font-size: .69rem;
    overflow-wrap: anywhere;
}

/* ---------- Empty state ---------- */
body[data-page="wallet"] .empty-state-card {
    display: grid;
    min-height: 100px;
    place-items: center;
    padding: 18px;
    border: 1px dashed rgba(var(--wallet-primary-rgb), .22);
    border-radius: 11px;
    color: var(--wallet-text-muted);
    background: rgba(var(--wallet-primary-rgb), .035);
    font-size: .74rem;
    text-align: center;
}

/* ---------- Bottom nav ---------- */
body[data-page="wallet"] .bottom-nav {
    position: fixed;
    z-index: 1000;
    right: 50%;
    bottom: max(10px, env(safe-area-inset-bottom));
    display: grid;
    grid-template-columns: repeat(3, minmax(82px, 1fr));
    width: min(calc(100% - 24px), 460px);
    padding: 5px;
    border: 1px solid rgba(194,213,208,.90);
    border-radius: 15px;
    background: rgba(255,255,255,.94);
    box-shadow:
        0 12px 32px rgba(15,23,42,.15),
        inset 0 1px 0 rgba(255,255,255,.95);
    backdrop-filter: blur(14px);
    transform: translateX(50%);
}

body[data-page="wallet"] .bottom-nav a {
    display: flex;
    min-height: 38px;
    align-items: center;
    justify-content: center;
    padding: 6px 9px;
    border-radius: 10px;
    color: var(--wallet-text-soft);
    font-size: .72rem;
    font-weight: 800;
    text-align: center;
    text-decoration: none;
}

body[data-page="wallet"] .bottom-nav a:hover {
    color: var(--wallet-primary-dark);
    background: rgba(var(--wallet-primary-rgb), .07);
}

body[data-page="wallet"] .bottom-nav a.active {
    color: #fff;
    background:
        linear-gradient(145deg, var(--wallet-primary), var(--wallet-primary-dark));
    box-shadow:
        0 5px 13px rgba(var(--wallet-primary-rgb), .22),
        inset 0 1px 0 rgba(255,255,255,.14);
}

/* ---------- Mobile ---------- */
@media (max-width: 700px) {
    body[data-page="wallet"] .container.page-with-nav {
        width: min(100% - 18px, 640px);
        padding: 9px 0 82px;
    }

    body[data-page="wallet"] .wallet-premium-hero {
        min-height: 0;
        padding: 18px 15px;
        border-radius: 15px;
    }

    body[data-page="wallet"] .wallet-premium-hero::before {
        left: 68px;
        top: 45px;
        font-size: 4.2rem;
    }

    body[data-page="wallet"] .wallet-premium-icon {
        flex-basis: 50px;
        width: 50px;
        height: 50px;
        border-radius: 15px;
        font-size: .75rem;
    }

    body[data-page="wallet"] .wallet-premium-hero h1 {
        font-size: 1.42rem;
    }

    body[data-page="wallet"] .wallet-premium-top-grid {
        grid-template-columns: 1fr;
        gap: 9px;
        margin-top: 10px;
    }

    body[data-page="wallet"] .wallet-premium-balance-card {
        min-height: 150px;
        padding: 15px;
    }

    body[data-page="wallet"] .wallet-premium-balance-card h2 {
        margin-top: 17px;
        font-size: 2rem;
    }

    body[data-page="wallet"] .wallet-premium-withdraw-card,
    body[data-page="wallet"] .wallet-premium-section-card {
        padding: 13px;
        border-radius: 13px;
    }

    body[data-page="wallet"] .wallet-premium-quick-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 7px;
        margin-top: 9px;
    }

    body[data-page="wallet"] .wallet-premium-quick-card {
        min-height: 104px;
        padding: 11px;
        gap: 8px;
    }

    body[data-page="wallet"] .wallet-premium-quick-card:nth-child(3) {
        grid-column: 1 / -1;
    }

    body[data-page="wallet"] .wallet-premium-quick-icon {
        flex-basis: 34px;
        width: 34px;
        height: 34px;
        border-radius: 10px;
        font-size: .66rem;
    }

    body[data-page="wallet"] .wallet-premium-quick-card strong {
        font-size: .69rem;
    }

    body[data-page="wallet"] .wallet-premium-quick-card p {
        font-size: .60rem;
    }

    body[data-page="wallet"] .section-title-row {
        padding: 10px;
        margin-bottom: 9px;
    }

    body[data-page="wallet"] .wallet-premium-record-card,
    body[data-page="wallet"] .wallet-premium-request-card {
        padding: 11px;
    }

    body[data-page="wallet"] .attendance-info-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 5px;
    }

    body[data-page="wallet"] .bottom-nav {
        bottom: max(7px, env(safe-area-inset-bottom));
        width: calc(100% - 18px);
        max-width: 430px;
        padding: 4px;
        border-radius: 14px;
    }

    body[data-page="wallet"] .bottom-nav a {
        min-height: 36px;
        padding: 5px;
        font-size: .68rem;
    }
}

@media (max-width: 390px) {
    body[data-page="wallet"] .wallet-premium-quick-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body[data-page="wallet"] .wallet-premium-quick-card {
        min-height: 96px;
        padding: 9px;
    }

    body[data-page="wallet"] .wallet-premium-quick-card:nth-child(3) {
        grid-column: 1 / -1;
    }

    body[data-page="wallet"] .wallet-premium-record-top {
        align-items: stretch;
        flex-direction: column;
    }

    body[data-page="wallet"] .wallet-premium-amount-pill,
    body[data-page="wallet"] .wallet-premium-status-pill {
        align-self: flex-start;
    }
}

@media (prefers-reduced-motion: reduce) {
    body[data-page="wallet"] *,
    body[data-page="wallet"] *::before,
    body[data-page="wallet"] *::after {
        animation: none !important;
        transition: none !important;
    }
}

/* =========================================================
   PRMS Wallet — Premium Asset UI
   Page scope: body[data-page="wallet"]
   Different palette: emerald + teal + gold + indigo
   ========================================================= */

body[data-page="wallet"] {
    --wallet-bg: #f2f6f5;
    --wallet-surface: #ffffff;
    --wallet-surface-soft: #f7faf9;
    --wallet-text: #16302d;
    --wallet-text-soft: #526d68;
    --wallet-text-muted: #7b918d;
    --wallet-line: #d8e4e1;

    --wallet-primary: #0f766e;
    --wallet-primary-dark: #134e4a;
    --wallet-primary-rgb: 15, 118, 110;

    --wallet-accent: #0e7490;
    --wallet-accent-dark: #155e75;
    --wallet-accent-rgb: 14, 116, 144;

    --wallet-gold: #b7791f;
    --wallet-gold-dark: #7c4a03;
    --wallet-gold-light: #f7d794;

    --wallet-indigo: #5b5bd6;
    --wallet-indigo-dark: #3730a3;
    --wallet-indigo-rgb: 91, 91, 214;

    --wallet-success: #059669;
    --wallet-danger: #dc2626;

    margin: 0;
    color: var(--wallet-text);
    background:
        radial-gradient(circle at 100% 0%, rgba(var(--wallet-primary-rgb), .10), transparent 30rem),
        radial-gradient(circle at 0% 100%, rgba(var(--wallet-accent-rgb), .06), transparent 26rem),
        var(--wallet-bg);
    font-family: Inter, "Segoe UI", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

body[data-page="wallet"] *,
body[data-page="wallet"] *::before,
body[data-page="wallet"] *::after {
    box-sizing: border-box;
}

body[data-page="wallet"] a,
body[data-page="wallet"] button,
body[data-page="wallet"] input,
body[data-page="wallet"] select {
    -webkit-tap-highlight-color: transparent;
}

body[data-page="wallet"] .container.page-with-nav {
    width: min(100% - 32px, 1220px);
    margin: 0 auto;
    padding: 18px 4px 92px;
}

/* ---------- Role palette mapping ---------- */
body[data-page="wallet"].role-promoter {
    --role-color: #db2777;
    --role-color-dark: #9d174d;
    --role-color-rgb: 219, 39, 119;
}

body[data-page="wallet"].role-business {
    --role-color: #2563eb;
    --role-color-dark: #1e3a8a;
    --role-color-rgb: 37, 99, 235;
}

body[data-page="wallet"].role-team-leader {
    --role-color: #7c3aed;
    --role-color-dark: #4c1d95;
    --role-color-rgb: 124, 58, 237;
}

body[data-page="wallet"].role-dj {
    --role-color: #be123c;
    --role-color-dark: #831843;
    --role-color-rgb: 190, 18, 60;
}

body[data-page="wallet"].role-manager {
    --role-color: #0f766e;
    --role-color-dark: #134e4a;
    --role-color-rgb: 15, 118, 110;
}

body[data-page="wallet"].role-store-manager {
    --role-color: #d97706;
    --role-color-dark: #92400e;
    --role-color-rgb: 217, 119, 6;
}

body[data-page="wallet"].role-senior-admin {
    --role-color: #475569;
    --role-color-dark: #0f172a;
    --role-color-rgb: 71, 85, 105;
}

body[data-page="wallet"] {
    --role-color: var(--wallet-primary);
    --role-color-dark: var(--wallet-primary-dark);
    --role-color-rgb: var(--wallet-primary-rgb);
}

/* ---------- Premium wallet hero ---------- */
body[data-page="wallet"] .wallet-premium-hero {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    min-height: 174px;
    padding: 26px 24px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 18px;
    color: #fff;
    background:
        radial-gradient(circle at 12% 8%, rgba(255,255,255,.18), transparent 24%),
        radial-gradient(circle at 88% 110%, rgba(255,255,255,.12), transparent 38%),
        linear-gradient(118deg, rgba(255,255,255,.06), transparent 42%),
        linear-gradient(
            135deg,
            #073b37 0%,
            #0f766e 50%,
            #14b8a6 100%
        );
    box-shadow:
        0 20px 46px rgba(7,59,55,.25),
        inset 0 1px 0 rgba(255,255,255,.14),
        inset 0 -1px 0 rgba(7,59,55,.24);
}

body[data-page="wallet"] .wallet-premium-hero::before {
    content: "WALLET";
    position: absolute;
    z-index: -1;
    left: 102px;
    top: 48px;
    color: rgba(255,255,255,.04);
    font-size: clamp(4rem, 8vw, 7rem);
    font-weight: 950;
    letter-spacing: -.08em;
    line-height: .8;
    pointer-events: none;
}

body[data-page="wallet"] .wallet-premium-hero::after {
    content: "";
    position: absolute;
    right: -72px;
    top: -88px;
    width: 250px;
    height: 250px;
    border: 36px solid rgba(255,255,255,.04);
    border-radius: 50%;
    box-shadow:
        0 0 0 1px rgba(255,255,255,.06),
        0 0 80px rgba(45,212,191,.18);
}

body[data-page="wallet"] .wallet-premium-hero-main {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 17px;
    min-width: 0;
}

body[data-page="wallet"] .wallet-premium-icon {
    display: grid;
    flex: 0 0 68px;
    width: 68px;
    height: 68px;
    place-items: center;
    border: 1px solid rgba(255,255,255,.24);
    border-radius: 20px;
    color: #fff8df;
    background:
        linear-gradient(145deg, rgba(255,255,255,.20), rgba(255,255,255,.07));
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.20),
        0 13px 28px rgba(3,47,43,.24);
    font-size: 1rem;
    font-weight: 950;
}

body[data-page="wallet"] .wallet-premium-hero .page-subtitle {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 27px;
    margin: 0 0 8px;
    padding: 4px 10px;
    border: 1px solid rgba(247,215,148,.24);
    border-radius: 999px;
    color: #fff0c6;
    background: rgba(247,215,148,.11);
    font-size: .62rem;
    font-weight: 900;
    letter-spacing: .11em;
    text-transform: uppercase;
}

body[data-page="wallet"] .wallet-premium-hero .page-subtitle::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #f7d794;
    box-shadow:
        0 0 0 4px rgba(247,215,148,.12),
        0 0 14px rgba(247,215,148,.35);
}

body[data-page="wallet"] .wallet-premium-hero h1 {
    margin: 0;
    color: #fff;
    font-size: clamp(1.55rem, 2.8vw, 2.35rem);
    font-weight: 850;
    line-height: 1.2;
    letter-spacing: -.026em;
    text-shadow: 0 3px 18px rgba(3,47,43,.28);
}

body[data-page="wallet"] .wallet-premium-user-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    color: rgba(255,255,255,.76);
    font-size: .78rem;
}

body[data-page="wallet"] .role-badge {
    display: inline-flex;
    min-height: 25px;
    align-items: center;
    padding: 3px 9px;
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 999px;
    color: #fff;
    background: rgba(var(--role-color-rgb), .72);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.16),
        0 4px 10px rgba(3,47,43,.13);
    font-size: .66rem;
    font-weight: 850;
}

/* ---------- Alerts ---------- */
body[data-page="wallet"] .alert {
    margin-top: 12px;
    padding: 11px 13px;
    border: 1px solid var(--wallet-line);
    border-radius: 11px;
    background: #fff;
    box-shadow: 0 7px 16px rgba(15,23,42,.045);
    font-size: .72rem;
}

body[data-page="wallet"] .alert.success {
    color: #065f46;
    border-color: rgba(5,150,105,.22);
    background: #ecfdf5;
}

body[data-page="wallet"] .alert.error,
body[data-page="wallet"] .alert.danger {
    color: #991b1b;
    border-color: rgba(220,38,38,.22);
    background: #fef2f2;
}

/* ---------- Balance and withdrawal ---------- */
body[data-page="wallet"] .wallet-premium-top-grid {
    display: grid;
    grid-template-columns: minmax(260px, .72fr) minmax(0, 1.28fr);
    gap: 13px;
    margin-top: 14px;
}

body[data-page="wallet"] .wallet-premium-balance-card,
body[data-page="wallet"] .wallet-premium-withdraw-card,
body[data-page="wallet"] .wallet-premium-section-card {
    position: relative;
    overflow: hidden;
    border-radius: 16px;
    box-shadow:
        0 12px 28px rgba(15,23,42,.07),
        inset 0 1px 0 rgba(255,255,255,.98);
}

body[data-page="wallet"] .wallet-premium-balance-card {
    isolation: isolate;
    min-height: 220px;
    padding: 22px;
    border: 1px solid rgba(183,121,31,.30);
    background:
        radial-gradient(circle at 100% 0%, rgba(247,215,148,.30), transparent 160px),
        radial-gradient(circle at 0% 100%, rgba(183,121,31,.10), transparent 170px),
        linear-gradient(145deg, #fff9e9 0%, #ffffff 58%, #f6ead0 100%);
    box-shadow:
        0 16px 34px rgba(124,74,3,.12),
        inset 0 1px 0 rgba(255,255,255,.98);
}

body[data-page="wallet"] .wallet-premium-balance-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 5px;
    background:
        linear-gradient(90deg, var(--wallet-gold-dark), var(--wallet-gold), #f7d794);
}

body[data-page="wallet"] .wallet-premium-balance-card::after {
    content: "";
    position: absolute;
    z-index: -1;
    right: -52px;
    bottom: -70px;
    width: 180px;
    height: 180px;
    border: 28px solid rgba(183,121,31,.055);
    border-radius: 50%;
}

body[data-page="wallet"] .summary-label {
    display: inline-flex;
    align-items: center;
    min-height: 25px;
    padding: 4px 9px;
    border: 1px solid rgba(183,121,31,.20);
    border-radius: 999px;
    color: var(--wallet-gold-dark);
    background: rgba(255,255,255,.74);
    font-size: .66rem;
    font-weight: 900;
}

body[data-page="wallet"] .wallet-premium-balance-card h2 {
    margin: 24px 0 8px;
    color: #5b3b08;
    font-size: clamp(2rem, 4vw, 3.15rem);
    line-height: 1;
    letter-spacing: -.05em;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 1px 0 #fff;
}

body[data-page="wallet"] .wallet-premium-balance-card p {
    margin: 0;
    color: #806438;
    font-size: .75rem;
    line-height: 1.55;
}

body[data-page="wallet"] .wallet-premium-withdraw-card {
    padding: 18px;
    border: 1px solid rgba(var(--wallet-primary-rgb), .18);
    background:
        radial-gradient(circle at 100% 0%, rgba(var(--wallet-primary-rgb), .09), transparent 180px),
        linear-gradient(145deg, #ffffff 0%, #f4faf8 100%);
}

body[data-page="wallet"] .wallet-premium-withdraw-card::before,
body[data-page="wallet"] .wallet-premium-section-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 5px;
    background:
        linear-gradient(180deg, var(--wallet-primary), var(--wallet-primary-dark));
}

body[data-page="wallet"] .section-title-row {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
    padding: 12px 13px;
    border: 1px solid rgba(var(--wallet-primary-rgb), .12);
    border-radius: 12px;
    background:
        linear-gradient(145deg, rgba(255,255,255,.94), rgba(var(--wallet-primary-rgb), .045));
}

body[data-page="wallet"] .section-title-row h3 {
    margin: 0;
    color: #163d39;
    font-size: 1rem;
    letter-spacing: -.015em;
}

body[data-page="wallet"] .section-subtitle {
    margin: 4px 0 0;
    color: var(--wallet-text-muted);
    font-size: .71rem;
    line-height: 1.45;
}

body[data-page="wallet"] .section-count {
    display: inline-flex;
    flex: 0 0 auto;
    min-height: 28px;
    align-items: center;
    padding: 4px 9px;
    border: 1px solid rgba(var(--wallet-primary-rgb), .16);
    border-radius: 999px;
    color: var(--wallet-primary-dark);
    background: rgba(var(--wallet-primary-rgb), .07);
    font-size: .67rem;
    font-weight: 850;
}

/* ---------- Withdrawal form ---------- */
body[data-page="wallet"] .wallet-premium-withdraw-form {
    margin: 0;
    padding: 14px;
    border: 1px solid rgba(var(--wallet-primary-rgb), .11);
    border-radius: 12px;
    background: rgba(255,255,255,.78);
    box-shadow: inset 0 1px 0 #fff;
}

body[data-page="wallet"] .wallet-premium-form-grid {
    display: grid;
    gap: 11px;
}

body[data-page="wallet"] .wallet-premium-form-full label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 6px;
    color: #28534f;
    font-size: .68rem;
    font-weight: 850;
}

body[data-page="wallet"] .wallet-premium-form-full label::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--wallet-primary);
    box-shadow: 0 0 0 3px rgba(var(--wallet-primary-rgb), .09);
}

body[data-page="wallet"] .wallet-premium-withdraw-form select,
body[data-page="wallet"] .wallet-premium-withdraw-form input {
    width: 100%;
    min-height: 42px;
    padding: 8px 11px;
    border: 1px solid #cfdfdb;
    border-radius: 10px;
    color: #203f3c;
    background: linear-gradient(180deg, #fff, #f8fbfa);
    font: inherit;
    font-size: .72rem;
    box-shadow:
        inset 0 1px 2px rgba(15,23,42,.035),
        0 3px 8px rgba(15,23,42,.025);
}

body[data-page="wallet"] .wallet-premium-withdraw-form select:focus,
body[data-page="wallet"] .wallet-premium-withdraw-form input:focus {
    outline: none;
    border-color: rgba(var(--wallet-primary-rgb), .55);
    box-shadow:
        0 0 0 4px rgba(var(--wallet-primary-rgb), .10),
        0 7px 16px rgba(var(--wallet-primary-rgb), .08);
}

body[data-page="wallet"] .wallet-premium-withdraw-form button {
    display: inline-flex;
    width: 100%;
    min-height: 42px;
    align-items: center;
    justify-content: center;
    margin-top: 12px;
    padding: 8px 13px;
    border: 1px solid var(--wallet-primary);
    border-radius: 10px;
    color: #fff;
    background:
        linear-gradient(145deg, var(--wallet-primary), var(--wallet-primary-dark));
    box-shadow:
        0 9px 20px rgba(var(--wallet-primary-rgb), .23),
        inset 0 1px 0 rgba(255,255,255,.17);
    font: inherit;
    font-size: .72rem;
    font-weight: 900;
    cursor: pointer;
}

/* ---------- Quick links ---------- */
body[data-page="wallet"] .wallet-premium-quick-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 11px;
    margin-top: 13px;
}

body[data-page="wallet"] .wallet-premium-quick-card {
    position: relative;
    isolation: isolate;
    display: flex;
    min-width: 0;
    min-height: 112px;
    align-items: center;
    gap: 12px;
    padding: 15px;
    overflow: hidden;
    border: 1px solid rgba(var(--wallet-accent-rgb), .18);
    border-radius: 14px;
    color: inherit;
    background:
        radial-gradient(circle at 100% 0%, rgba(var(--wallet-accent-rgb), .12), transparent 120px),
        linear-gradient(145deg, #ffffff, #f1f8fa);
    box-shadow:
        0 9px 22px rgba(15,23,42,.055),
        inset 0 1px 0 #fff;
    text-decoration: none;
    transition: .18s ease;
}

body[data-page="wallet"] .wallet-premium-quick-card:nth-child(2) {
    border-color: rgba(var(--wallet-indigo-rgb), .18);
    background:
        radial-gradient(circle at 100% 0%, rgba(var(--wallet-indigo-rgb), .12), transparent 120px),
        linear-gradient(145deg, #ffffff, #f4f4ff);
}

body[data-page="wallet"] .wallet-premium-quick-card:nth-child(3) {
    border-color: rgba(183,121,31,.22);
    background:
        radial-gradient(circle at 100% 0%, rgba(247,215,148,.22), transparent 120px),
        linear-gradient(145deg, #ffffff, #fff9eb);
}

body[data-page="wallet"] .wallet-premium-quick-card:hover {
    transform: translateY(-2px);
    box-shadow:
        0 14px 30px rgba(15,23,42,.09),
        inset 0 1px 0 #fff;
}

body[data-page="wallet"] .wallet-premium-quick-icon {
    display: grid;
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    place-items: center;
    border-radius: 12px;
    color: #fff;
    background:
        linear-gradient(145deg, var(--wallet-accent), var(--wallet-accent-dark));
    box-shadow:
        0 8px 17px rgba(var(--wallet-accent-rgb), .20),
        inset 0 1px 0 rgba(255,255,255,.18);
    font-size: .78rem;
    font-weight: 950;
}

body[data-page="wallet"] .wallet-premium-quick-card:nth-child(2) .wallet-premium-quick-icon {
    background:
        linear-gradient(145deg, var(--wallet-indigo), var(--wallet-indigo-dark));
    box-shadow:
        0 8px 17px rgba(var(--wallet-indigo-rgb), .20),
        inset 0 1px 0 rgba(255,255,255,.18);
}

body[data-page="wallet"] .wallet-premium-quick-card:nth-child(3) .wallet-premium-quick-icon {
    color: #3c2806;
    background:
        linear-gradient(145deg, var(--wallet-gold-light), var(--wallet-gold));
    box-shadow:
        0 8px 17px rgba(183,121,31,.22),
        inset 0 1px 0 rgba(255,255,255,.35);
}

body[data-page="wallet"] .wallet-premium-quick-card strong {
    display: block;
    color: #183a37;
    font-size: .78rem;
}

body[data-page="wallet"] .wallet-premium-quick-card p {
    margin: 4px 0 0;
    color: var(--wallet-text-muted);
    font-size: .66rem;
    line-height: 1.4;
}

/* ---------- Section cards ---------- */
body[data-page="wallet"] .wallet-premium-section-card {
    margin-top: 13px;
    padding: 18px;
    border: 1px solid rgba(var(--wallet-primary-rgb), .16);
    background:
        radial-gradient(circle at 100% 0%, rgba(var(--wallet-primary-rgb), .07), transparent 210px),
        linear-gradient(145deg, #ffffff, #f7faf9);
}

body[data-page="wallet"] .wallet-premium-list {
    display: grid;
    gap: 10px;
}

body[data-page="wallet"] .wallet-premium-record-card,
body[data-page="wallet"] .wallet-premium-request-card {
    position: relative;
    overflow: hidden;
    padding: 14px;
    border: 1px solid #dce7e4;
    border-radius: 13px;
    background:
        linear-gradient(145deg, #fff, #f7faf9);
    box-shadow:
        0 7px 17px rgba(15,23,42,.045),
        inset 0 1px 0 #fff;
}

body[data-page="wallet"] .wallet-premium-record-card::before,
body[data-page="wallet"] .wallet-premium-request-card::before {
    content: "";
    position: absolute;
    inset: 10px auto 10px 0;
    width: 4px;
    border-radius: 99px;
    background:
        linear-gradient(180deg, var(--wallet-accent), var(--wallet-primary));
}

body[data-page="wallet"] .wallet-premium-request-card::before {
    background:
        linear-gradient(180deg, var(--wallet-indigo), var(--wallet-indigo-dark));
}

body[data-page="wallet"] .wallet-premium-record-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

body[data-page="wallet"] .wallet-premium-record-top h4 {
    margin: 0;
    color: #173b37;
    font-size: .84rem;
}

body[data-page="wallet"] .wallet-premium-record-top p {
    margin: 3px 0 0;
    color: var(--wallet-text-muted);
    font-size: .63rem;
}

body[data-page="wallet"] .wallet-premium-amount-pill,
body[data-page="wallet"] .wallet-premium-status-pill {
    display: inline-flex;
    flex: 0 0 auto;
    min-height: 28px;
    align-items: center;
    padding: 4px 9px;
    border-radius: 999px;
    color: #fff;
    background:
        linear-gradient(145deg, var(--wallet-primary), var(--wallet-primary-dark));
    box-shadow:
        0 5px 12px rgba(var(--wallet-primary-rgb), .18),
        inset 0 1px 0 rgba(255,255,255,.16);
    font-size: .66rem;
    font-weight: 900;
}

body[data-page="wallet"] .wallet-premium-status-pill {
    background:
        linear-gradient(145deg, var(--wallet-indigo), var(--wallet-indigo-dark));
    box-shadow:
        0 5px 12px rgba(var(--wallet-indigo-rgb), .18),
        inset 0 1px 0 rgba(255,255,255,.16);
}

body[data-page="wallet"] .wallet-premium-message {
    margin-top: 10px;
    padding: 9px 10px;
    border: 1px solid #e0e9e7;
    border-radius: 9px;
    color: var(--wallet-text-soft);
    background: rgba(255,255,255,.72);
    font-size: .68rem;
    line-height: 1.48;
    overflow-wrap: anywhere;
}

body[data-page="wallet"] .attendance-info-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 7px;
    margin-top: 10px;
}

body[data-page="wallet"] .attendance-info-grid > div {
    min-width: 0;
    padding: 8px 9px;
    border: 1px solid #dfe8e6;
    border-radius: 9px;
    background: rgba(255,255,255,.72);
}

body[data-page="wallet"] .attendance-info-grid span {
    display: block;
    color: var(--wallet-text-muted);
    font-size: .60rem;
}

body[data-page="wallet"] .attendance-info-grid strong {
    display: block;
    margin-top: 3px;
    color: #24423f;
    font-size: .69rem;
    overflow-wrap: anywhere;
}

/* ---------- Empty state ---------- */
body[data-page="wallet"] .empty-state-card {
    display: grid;
    min-height: 100px;
    place-items: center;
    padding: 18px;
    border: 1px dashed rgba(var(--wallet-primary-rgb), .22);
    border-radius: 11px;
    color: var(--wallet-text-muted);
    background: rgba(var(--wallet-primary-rgb), .035);
    font-size: .74rem;
    text-align: center;
}

/* ---------- Bottom nav ---------- */
body[data-page="wallet"] .bottom-nav {
    position: fixed;
    z-index: 1000;
    right: 50%;
    bottom: max(10px, env(safe-area-inset-bottom));
    display: grid;
    grid-template-columns: repeat(3, minmax(82px, 1fr));
    width: min(calc(100% - 24px), 460px);
    padding: 5px;
    border: 1px solid rgba(194,213,208,.90);
    border-radius: 15px;
    background: rgba(255,255,255,.94);
    box-shadow:
        0 12px 32px rgba(15,23,42,.15),
        inset 0 1px 0 rgba(255,255,255,.95);
    backdrop-filter: blur(14px);
    transform: translateX(50%);
}

body[data-page="wallet"] .bottom-nav a {
    display: flex;
    min-height: 38px;
    align-items: center;
    justify-content: center;
    padding: 6px 9px;
    border-radius: 10px;
    color: var(--wallet-text-soft);
    font-size: .72rem;
    font-weight: 800;
    text-align: center;
    text-decoration: none;
}

body[data-page="wallet"] .bottom-nav a:hover {
    color: var(--wallet-primary-dark);
    background: rgba(var(--wallet-primary-rgb), .07);
}

body[data-page="wallet"] .bottom-nav a.active {
    color: #fff;
    background:
        linear-gradient(145deg, var(--wallet-primary), var(--wallet-primary-dark));
    box-shadow:
        0 5px 13px rgba(var(--wallet-primary-rgb), .22),
        inset 0 1px 0 rgba(255,255,255,.14);
}

/* ---------- Mobile ---------- */
@media (max-width: 700px) {
    body[data-page="wallet"] .container.page-with-nav {
        width: min(100% - 18px, 640px);
        padding: 9px 0 82px;
    }

    body[data-page="wallet"] .wallet-premium-hero {
        min-height: 0;
        padding: 18px 15px;
        border-radius: 15px;
    }

    body[data-page="wallet"] .wallet-premium-hero::before {
        left: 68px;
        top: 45px;
        font-size: 4.2rem;
    }

    body[data-page="wallet"] .wallet-premium-icon {
        flex-basis: 50px;
        width: 50px;
        height: 50px;
        border-radius: 15px;
        font-size: .75rem;
    }

    body[data-page="wallet"] .wallet-premium-hero h1 {
        font-size: 1.42rem;
    }

    body[data-page="wallet"] .wallet-premium-top-grid {
        grid-template-columns: 1fr;
        gap: 9px;
        margin-top: 10px;
    }

    body[data-page="wallet"] .wallet-premium-balance-card {
        min-height: 150px;
        padding: 15px;
    }

    body[data-page="wallet"] .wallet-premium-balance-card h2 {
        margin-top: 17px;
        font-size: 2rem;
    }

    body[data-page="wallet"] .wallet-premium-withdraw-card,
    body[data-page="wallet"] .wallet-premium-section-card {
        padding: 13px;
        border-radius: 13px;
    }

    body[data-page="wallet"] .wallet-premium-quick-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 7px;
        margin-top: 9px;
    }

    body[data-page="wallet"] .wallet-premium-quick-card {
        min-height: 104px;
        padding: 11px;
        gap: 8px;
    }

    body[data-page="wallet"] .wallet-premium-quick-card:nth-child(3) {
        grid-column: 1 / -1;
    }

    body[data-page="wallet"] .wallet-premium-quick-icon {
        flex-basis: 34px;
        width: 34px;
        height: 34px;
        border-radius: 10px;
        font-size: .66rem;
    }

    body[data-page="wallet"] .wallet-premium-quick-card strong {
        font-size: .69rem;
    }

    body[data-page="wallet"] .wallet-premium-quick-card p {
        font-size: .60rem;
    }

    body[data-page="wallet"] .section-title-row {
        padding: 10px;
        margin-bottom: 9px;
    }

    body[data-page="wallet"] .wallet-premium-record-card,
    body[data-page="wallet"] .wallet-premium-request-card {
        padding: 11px;
    }

    body[data-page="wallet"] .attendance-info-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 5px;
    }

    body[data-page="wallet"] .bottom-nav {
        bottom: max(7px, env(safe-area-inset-bottom));
        width: calc(100% - 18px);
        max-width: 430px;
        padding: 4px;
        border-radius: 14px;
    }

    body[data-page="wallet"] .bottom-nav a {
        min-height: 36px;
        padding: 5px;
        font-size: .68rem;
    }
}

@media (max-width: 390px) {
    body[data-page="wallet"] .wallet-premium-quick-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body[data-page="wallet"] .wallet-premium-quick-card {
        min-height: 96px;
        padding: 9px;
    }

    body[data-page="wallet"] .wallet-premium-quick-card:nth-child(3) {
        grid-column: 1 / -1;
    }

    body[data-page="wallet"] .wallet-premium-record-top {
        align-items: stretch;
        flex-direction: column;
    }

    body[data-page="wallet"] .wallet-premium-amount-pill,
    body[data-page="wallet"] .wallet-premium-status-pill {
        align-self: flex-start;
    }
}

@media (prefers-reduced-motion: reduce) {
    body[data-page="wallet"] *,
    body[data-page="wallet"] *::before,
    body[data-page="wallet"] *::after {
        animation: none !important;
        transition: none !important;
    }
}



/* =========================================================
   Wallet Premium Upgrade V2
   Focus: balance card + quick access grid
   ========================================================= */

/* ---------- Luxury money balance card ---------- */
body[data-page="wallet"] .wallet-premium-balance-card {
    isolation: isolate;
    min-height: 236px;
    padding: 24px;
    border: 1px solid rgba(183,121,31,.36);
    border-radius: 18px;
    background:
        radial-gradient(circle at 16% 8%, rgba(255,255,255,.96), transparent 22%),
        radial-gradient(circle at 92% 12%, rgba(247,215,148,.42), transparent 28%),
        radial-gradient(circle at 12% 100%, rgba(183,121,31,.11), transparent 34%),
        linear-gradient(145deg, #fffdf6 0%, #fff8e8 45%, #f1dfb7 100%);
    box-shadow:
        0 22px 48px rgba(124,74,3,.16),
        inset 0 1px 0 rgba(255,255,255,.98),
        inset 0 -1px 0 rgba(124,74,3,.08);
}

body[data-page="wallet"] .wallet-premium-balance-card::before {
    height: 6px;
    background:
        linear-gradient(
            90deg,
            #6b4310 0%,
            #b7791f 30%,
            #f2d388 56%,
            #9a6518 100%
        );
    box-shadow: 0 4px 14px rgba(183,121,31,.20);
}

body[data-page="wallet"] .wallet-premium-balance-card::after {
    right: -68px;
    bottom: -88px;
    width: 220px;
    height: 220px;
    border: 32px solid rgba(183,121,31,.06);
    box-shadow:
        0 0 0 1px rgba(183,121,31,.04),
        0 0 50px rgba(247,215,148,.18);
}

body[data-page="wallet"] .wallet-premium-balance-card .summary-label {
    position: relative;
    z-index: 2;
    min-height: 28px;
    padding: 4px 11px;
    border-color: rgba(183,121,31,.26);
    color: #6d450d;
    background:
        linear-gradient(145deg, rgba(255,255,255,.88), rgba(247,215,148,.24));
    box-shadow:
        inset 0 1px 0 #fff,
        0 5px 12px rgba(124,74,3,.07);
    letter-spacing: .04em;
}

body[data-page="wallet"] .wallet-premium-balance-card .summary-label::before {
    content: "";
    width: 7px;
    height: 7px;
    margin-right: 7px;
    border-radius: 50%;
    background: #b7791f;
    box-shadow:
        0 0 0 4px rgba(183,121,31,.10),
        0 0 12px rgba(183,121,31,.24);
}

body[data-page="wallet"] .wallet-premium-balance-card h2 {
    position: relative;
    z-index: 2;
    margin: 28px 0 10px;
    color: #4b2f07;
    font-size: clamp(2.35rem, 5vw, 3.7rem);
    font-weight: 900;
    line-height: .96;
    letter-spacing: -.065em;
    text-shadow:
        0 1px 0 rgba(255,255,255,.96),
        0 8px 24px rgba(124,74,3,.10);
}

body[data-page="wallet"] .wallet-premium-balance-card h2::after {
    content: "AVAILABLE BALANCE";
    display: block;
    margin-top: 10px;
    color: rgba(91,59,8,.48);
    font-size: .52rem;
    font-weight: 900;
    letter-spacing: .16em;
}

body[data-page="wallet"] .wallet-premium-balance-card p {
    position: relative;
    z-index: 2;
    max-width: 290px;
    margin-top: 14px;
    padding-top: 13px;
    border-top: 1px solid rgba(183,121,31,.18);
    color: #765c31;
    font-size: .72rem;
}

/* Decorative premium chip */
body[data-page="wallet"] .wallet-premium-balance-card {
    background-color: #fff9ea;
}

body[data-page="wallet"] .wallet-premium-balance-card > * {
    position: relative;
    z-index: 2;
}

body[data-page="wallet"] .wallet-premium-balance-card::marker {
    display: none;
}

/* ---------- Premium quick access grid ---------- */
body[data-page="wallet"] .wallet-premium-quick-grid {
    gap: 13px;
    margin-top: 15px;
}

body[data-page="wallet"] .wallet-premium-quick-card {
    min-height: 128px;
    padding: 17px;
    border-radius: 16px;
    border-color: rgba(var(--wallet-accent-rgb), .22);
    background:
        radial-gradient(circle at 100% 0%, rgba(var(--wallet-accent-rgb), .16), transparent 132px),
        linear-gradient(145deg, #ffffff 0%, #f2fafc 62%, #e7f4f7 100%);
    box-shadow:
        0 13px 28px rgba(15,23,42,.065),
        inset 0 1px 0 #fff;
}

body[data-page="wallet"] .wallet-premium-quick-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 4px;
    background:
        linear-gradient(90deg, var(--wallet-accent-dark), var(--wallet-accent), #67e8f9);
}

body[data-page="wallet"] .wallet-premium-quick-card::after {
    content: "→";
    position: absolute;
    right: 14px;
    bottom: 12px;
    color: rgba(var(--wallet-accent-rgb), .45);
    font-size: 1rem;
    font-weight: 900;
}

body[data-page="wallet"] .wallet-premium-quick-card:nth-child(2) {
    border-color: rgba(var(--wallet-indigo-rgb), .22);
    background:
        radial-gradient(circle at 100% 0%, rgba(var(--wallet-indigo-rgb), .16), transparent 132px),
        linear-gradient(145deg, #ffffff 0%, #f5f4ff 62%, #ecebff 100%);
}

body[data-page="wallet"] .wallet-premium-quick-card:nth-child(2)::before {
    background:
        linear-gradient(90deg, var(--wallet-indigo-dark), var(--wallet-indigo), #a5b4fc);
}

body[data-page="wallet"] .wallet-premium-quick-card:nth-child(2)::after {
    color: rgba(var(--wallet-indigo-rgb), .45);
}

body[data-page="wallet"] .wallet-premium-quick-card:nth-child(3) {
    border-color: rgba(183,121,31,.26);
    background:
        radial-gradient(circle at 100% 0%, rgba(247,215,148,.30), transparent 132px),
        linear-gradient(145deg, #ffffff 0%, #fff9ec 62%, #f5e8c9 100%);
}

body[data-page="wallet"] .wallet-premium-quick-card:nth-child(3)::before {
    background:
        linear-gradient(90deg, var(--wallet-gold-dark), var(--wallet-gold), #f7d794);
}

body[data-page="wallet"] .wallet-premium-quick-card:nth-child(3)::after {
    color: rgba(183,121,31,.48);
}

body[data-page="wallet"] .wallet-premium-quick-icon {
    flex-basis: 46px;
    width: 46px;
    height: 46px;
    border-radius: 14px;
    font-size: .82rem;
    box-shadow:
        0 10px 22px rgba(var(--wallet-accent-rgb), .22),
        inset 0 1px 0 rgba(255,255,255,.22);
}

body[data-page="wallet"] .wallet-premium-quick-card strong {
    color: #173b37;
    font-size: .82rem;
    line-height: 1.3;
}

body[data-page="wallet"] .wallet-premium-quick-card p {
    max-width: 230px;
    margin-top: 5px;
    color: #718985;
    font-size: .64rem;
    line-height: 1.45;
}

body[data-page="wallet"] .wallet-premium-quick-card:hover {
    border-color: rgba(var(--wallet-accent-rgb), .34);
    box-shadow:
        0 18px 36px rgba(15,23,42,.10),
        inset 0 1px 0 #fff;
    transform: translateY(-3px);
}

body[data-page="wallet"] .wallet-premium-quick-card:nth-child(2):hover {
    border-color: rgba(var(--wallet-indigo-rgb), .34);
}

body[data-page="wallet"] .wallet-premium-quick-card:nth-child(3):hover {
    border-color: rgba(183,121,31,.38);
}

/* ---------- Mobile refinement ---------- */
@media (max-width: 700px) {
    body[data-page="wallet"] .wallet-premium-balance-card {
        min-height: 168px;
        padding: 17px;
        border-radius: 14px;
    }

    body[data-page="wallet"] .wallet-premium-balance-card h2 {
        margin-top: 18px;
        font-size: 2.25rem;
    }

    body[data-page="wallet"] .wallet-premium-balance-card h2::after {
        margin-top: 7px;
        font-size: .45rem;
    }

    body[data-page="wallet"] .wallet-premium-balance-card p {
        margin-top: 10px;
        padding-top: 10px;
        font-size: .64rem;
    }

    body[data-page="wallet"] .wallet-premium-quick-grid {
        gap: 8px;
        margin-top: 10px;
    }

    body[data-page="wallet"] .wallet-premium-quick-card {
        min-height: 108px;
        padding: 12px;
        border-radius: 13px;
    }

    body[data-page="wallet"] .wallet-premium-quick-card::after {
        right: 10px;
        bottom: 8px;
        font-size: .85rem;
    }

    body[data-page="wallet"] .wallet-premium-quick-icon {
        flex-basis: 36px;
        width: 36px;
        height: 36px;
        border-radius: 11px;
        font-size: .68rem;
    }

    body[data-page="wallet"] .wallet-premium-quick-card strong {
        font-size: .7rem;
    }

    body[data-page="wallet"] .wallet-premium-quick-card p {
        font-size: .58rem;
    }
}

@media (max-width: 390px) {
    body[data-page="wallet"] .wallet-premium-balance-card {
        min-height: 156px;
        padding: 15px;
    }

    body[data-page="wallet"] .wallet-premium-balance-card h2 {
        font-size: 2rem;
    }

    body[data-page="wallet"] .wallet-premium-quick-card {
        min-height: 102px;
        padding: 10px;
    }
}

/* =========================================================
   PRMS Wallet Withdrawals — Premium Burgundy & Violet UI
   Page scope: body[data-page="wallet-withdrawals"]
   Palette: deep violet + burgundy + champagne gold
   ========================================================= */

body[data-page="wallet-withdrawals"] {
    --page-bg: #f6f3f7;
    --surface: #ffffff;
    --surface-soft: #faf8fb;
    --text: #2a1d2f;
    --text-soft: #6d5a74;
    --text-muted: #8b7a91;
    --line: #e5dce8;

    --primary: #6d28d9;
    --primary-dark: #3b0764;
    --primary-rgb: 109, 40, 217;

    --burgundy: #9f1239;
    --burgundy-dark: #701a2f;
    --burgundy-rgb: 159, 18, 57;

    --gold: #c28b36;
    --gold-dark: #7c4a03;
    --gold-light: #f0d69b;

    --success: #15803d;
    --warning: #d97706;
    --danger: #b91c1c;

    margin: 0;
    color: var(--text);
    background:
        radial-gradient(circle at 100% 0%, rgba(var(--primary-rgb), .09), transparent 30rem),
        radial-gradient(circle at 0% 100%, rgba(var(--burgundy-rgb), .055), transparent 26rem),
        var(--page-bg);
    font-family: Inter, "Segoe UI", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

body[data-page="wallet-withdrawals"] *,
body[data-page="wallet-withdrawals"] *::before,
body[data-page="wallet-withdrawals"] *::after {
    box-sizing: border-box;
}

body[data-page="wallet-withdrawals"] a,
body[data-page="wallet-withdrawals"] button,
body[data-page="wallet-withdrawals"] input,
body[data-page="wallet-withdrawals"] select {
    -webkit-tap-highlight-color: transparent;
}

body[data-page="wallet-withdrawals"] .container.page-with-nav {
    width: min(100% - 32px, 1180px);
    margin: 0 auto;
    padding: 18px 4px 88px;
}

/* ---------- Premium Hero ---------- */
body[data-page="wallet-withdrawals"] .wallet-history-hero {
    position: relative;
    isolation: isolate;
    min-height: 182px;
    padding: 26px 24px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.20);
    border-radius: 18px;
    color: #fff;
    background:
        radial-gradient(circle at 12% 8%, rgba(255,255,255,.16), transparent 24%),
        radial-gradient(circle at 88% 112%, rgba(255,255,255,.10), transparent 38%),
        linear-gradient(118deg, rgba(255,255,255,.05), transparent 42%),
        linear-gradient(135deg, #2e1065 0%, #5b21b6 48%, #881337 100%);
    box-shadow:
        0 20px 46px rgba(63,17,103,.24),
        inset 0 1px 0 rgba(255,255,255,.13),
        inset 0 -1px 0 rgba(44,7,64,.24);
}

body[data-page="wallet-withdrawals"] .wallet-history-hero::before {
    content: "WITHDRAW";
    position: absolute;
    z-index: -1;
    left: 24px;
    top: 55px;
    color: rgba(255,255,255,.04);
    font-size: clamp(3.8rem, 8vw, 6.8rem);
    font-weight: 950;
    letter-spacing: -.08em;
    line-height: .8;
    pointer-events: none;
}

body[data-page="wallet-withdrawals"] .wallet-history-hero::after {
    content: "";
    position: absolute;
    right: -74px;
    top: -90px;
    width: 252px;
    height: 252px;
    border: 36px solid rgba(255,255,255,.035);
    border-radius: 50%;
    box-shadow:
        0 0 0 1px rgba(255,255,255,.05),
        0 0 78px rgba(244,114,182,.13);
}

body[data-page="wallet-withdrawals"] .wallet-history-header-top {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 18px;
}

body[data-page="wallet-withdrawals"] .page-subtitle {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 27px;
    margin: 0 0 8px;
    padding: 4px 10px;
    border: 1px solid rgba(240,214,155,.24);
    border-radius: 999px;
    color: #ffe8b8;
    background: rgba(240,214,155,.10);
    font-size: .62rem;
    font-weight: 900;
    letter-spacing: .11em;
    text-transform: uppercase;
    backdrop-filter: blur(8px);
}

body[data-page="wallet-withdrawals"] .page-subtitle::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--gold-light);
    box-shadow:
        0 0 0 4px rgba(240,214,155,.12),
        0 0 14px rgba(240,214,155,.35);
}

body[data-page="wallet-withdrawals"] .wallet-history-hero h1 {
    margin: 0;
    color: #fff;
    font-size: clamp(1.55rem, 2.8vw, 2.35rem);
    font-weight: 850;
    line-height: 1.2;
    letter-spacing: -.026em;
    text-shadow: 0 3px 18px rgba(44,7,64,.28);
}

body[data-page="wallet-withdrawals"] .wallet-history-desc {
    position: relative;
    z-index: 2;
    max-width: 760px;
    margin: 12px 0 0;
    color: rgba(255,255,255,.72);
    font-size: .8rem;
    line-height: 1.58;
}

body[data-page="wallet-withdrawals"] .wallet-history-back-button {
    display: inline-flex;
    min-width: 145px;
    min-height: 39px;
    align-items: center;
    justify-content: center;
    padding: 7px 13px;
    border: 1px solid var(--gold-light);
    border-radius: 11px;
    color: #2e210d;
    background:
        linear-gradient(145deg, var(--gold-light), var(--gold));
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.55),
        0 9px 20px rgba(124,74,3,.24);
    font-size: .7rem;
    font-weight: 850;
    text-decoration: none;
}

body[data-page="wallet-withdrawals"] .wallet-history-back-button:hover {
    filter: brightness(.98) saturate(1.08);
    transform: translateY(-1px);
}

/* ---------- Filter card ---------- */
body[data-page="wallet-withdrawals"] .wallet-history-filter-card,
body[data-page="wallet-withdrawals"] .wallet-history-list-card {
    position: relative;
    overflow: hidden;
    margin-top: 14px;
    padding: 18px;
    border: 1px solid rgba(var(--primary-rgb), .16);
    border-radius: 16px;
    background:
        radial-gradient(circle at 100% 0%, rgba(var(--primary-rgb), .07), transparent 190px),
        linear-gradient(145deg, #ffffff, #faf8fb);
    box-shadow:
        0 12px 28px rgba(42,29,47,.07),
        inset 0 1px 0 #fff;
}

body[data-page="wallet-withdrawals"] .wallet-history-filter-card::before,
body[data-page="wallet-withdrawals"] .wallet-history-list-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 5px;
    background:
        linear-gradient(180deg, var(--primary), var(--burgundy));
}

body[data-page="wallet-withdrawals"] .section-title-row {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
    padding: 12px 13px;
    border: 1px solid rgba(var(--primary-rgb), .12);
    border-radius: 12px;
    background:
        linear-gradient(145deg, rgba(255,255,255,.95), rgba(var(--primary-rgb), .045));
}

body[data-page="wallet-withdrawals"] .section-title-row h3 {
    margin: 0;
    color: #3d2354;
    font-size: 1rem;
    letter-spacing: -.015em;
}

body[data-page="wallet-withdrawals"] .section-count {
    display: inline-flex;
    min-height: 28px;
    align-items: center;
    padding: 4px 9px;
    border: 1px solid rgba(var(--burgundy-rgb), .18);
    border-radius: 999px;
    color: var(--burgundy-dark);
    background: rgba(var(--burgundy-rgb), .07);
    font-size: .67rem;
    font-weight: 850;
}

body[data-page="wallet-withdrawals"] .wallet-history-filter-form {
    margin: 0;
    padding: 14px;
    border: 1px solid rgba(var(--primary-rgb), .10);
    border-radius: 12px;
    background: rgba(255,255,255,.78);
    box-shadow: inset 0 1px 0 #fff;
}

body[data-page="wallet-withdrawals"] .wallet-history-filter-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr;
    gap: 10px;
}

body[data-page="wallet-withdrawals"] .wallet-history-filter-grid label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 6px;
    color: #563e63;
    font-size: .68rem;
    font-weight: 850;
}

body[data-page="wallet-withdrawals"] .wallet-history-filter-grid label::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--primary);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), .09);
}

body[data-page="wallet-withdrawals"] .wallet-history-filter-grid select,
body[data-page="wallet-withdrawals"] .wallet-history-filter-grid input {
    width: 100%;
    min-height: 41px;
    padding: 8px 10px;
    border: 1px solid #ded2e3;
    border-radius: 10px;
    color: #35243d;
    background: linear-gradient(180deg, #fff, #fbf9fc);
    font: inherit;
    font-size: .71rem;
    box-shadow:
        inset 0 1px 2px rgba(42,29,47,.035),
        0 3px 8px rgba(42,29,47,.025);
}

body[data-page="wallet-withdrawals"] .wallet-history-filter-grid select:focus,
body[data-page="wallet-withdrawals"] .wallet-history-filter-grid input:focus {
    outline: none;
    border-color: rgba(var(--primary-rgb), .55);
    box-shadow:
        0 0 0 4px rgba(var(--primary-rgb), .10),
        0 7px 16px rgba(var(--primary-rgb), .07);
}

body[data-page="wallet-withdrawals"] .wallet-history-filter-form > button {
    display: inline-flex;
    width: 100%;
    min-height: 42px;
    align-items: center;
    justify-content: center;
    margin-top: 12px;
    padding: 8px 13px;
    border: 1px solid var(--primary);
    border-radius: 10px;
    color: #fff;
    background:
        linear-gradient(145deg, var(--primary), var(--primary-dark));
    box-shadow:
        0 9px 20px rgba(var(--primary-rgb), .22),
        inset 0 1px 0 rgba(255,255,255,.17);
    font: inherit;
    font-size: .72rem;
    font-weight: 900;
    cursor: pointer;
}

/* ---------- Withdrawal items ---------- */
body[data-page="wallet-withdrawals"] .wallet-history-list {
    display: grid;
    gap: 10px;
}

body[data-page="wallet-withdrawals"] .wallet-history-item {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 15px 16px 14px 19px;
    border: 1px solid rgba(var(--burgundy-rgb), .14);
    border-radius: 14px;
    background:
        radial-gradient(circle at 100% 0%, rgba(var(--burgundy-rgb), .08), transparent 150px),
        linear-gradient(145deg, #ffffff, #fcf8fa);
    box-shadow:
        0 8px 20px rgba(42,29,47,.05),
        inset 0 1px 0 #fff;
}

body[data-page="wallet-withdrawals"] .wallet-history-item::before {
    content: "";
    position: absolute;
    inset: 11px auto 11px 0;
    width: 5px;
    border-radius: 99px;
    background:
        linear-gradient(180deg, var(--burgundy), var(--primary));
    box-shadow: 7px 0 18px rgba(var(--burgundy-rgb), .10);
}

body[data-page="wallet-withdrawals"] .wallet-history-item::after {
    content: "";
    position: absolute;
    z-index: -1;
    right: -52px;
    bottom: -66px;
    width: 160px;
    height: 160px;
    border: 24px solid rgba(var(--burgundy-rgb), .035);
    border-radius: 50%;
}

body[data-page="wallet-withdrawals"] .wallet-history-item-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

body[data-page="wallet-withdrawals"] .wallet-history-item-top h4 {
    margin: 0;
    color: #4a1d31;
    font-size: 1rem;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
}

body[data-page="wallet-withdrawals"] .wallet-history-item-top p {
    margin: 3px 0 0;
    color: var(--text-muted);
    font-size: .63rem;
}

body[data-page="wallet-withdrawals"] .wallet-status-pill {
    display: inline-flex;
    flex: 0 0 auto;
    min-height: 29px;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    color: #fff;
    background:
        linear-gradient(145deg, var(--burgundy), var(--burgundy-dark));
    box-shadow:
        0 6px 14px rgba(var(--burgundy-rgb), .20),
        inset 0 1px 0 rgba(255,255,255,.16);
    font-size: .65rem;
    font-weight: 900;
}

body[data-page="wallet-withdrawals"] .attendance-info-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 7px;
    margin-top: 11px;
}

body[data-page="wallet-withdrawals"] .attendance-info-grid > div {
    min-width: 0;
    padding: 9px 10px;
    border: 1px solid #eadfe8;
    border-radius: 10px;
    background:
        linear-gradient(145deg, rgba(255,255,255,.94), rgba(250,248,251,.94));
}

body[data-page="wallet-withdrawals"] .attendance-info-grid span {
    display: block;
    color: var(--text-muted);
    font-size: .60rem;
}

body[data-page="wallet-withdrawals"] .attendance-info-grid strong {
    display: block;
    margin-top: 3px;
    color: #3d2b44;
    font-size: .69rem;
    overflow-wrap: anywhere;
}

/* ---------- Pagination ---------- */
body[data-page="wallet-withdrawals"] .pagination-bar {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    margin-top: 14px;
}

body[data-page="wallet-withdrawals"] .pagination-bar a,
body[data-page="wallet-withdrawals"] .pagination-bar span {
    display: inline-flex;
    min-width: 34px;
    min-height: 34px;
    align-items: center;
    justify-content: center;
    padding: 5px 9px;
    border: 1px solid #dfd2e4;
    border-radius: 9px;
    color: #5c3c68;
    background: #fff;
    font-size: .67rem;
    font-weight: 800;
    text-decoration: none;
}

body[data-page="wallet-withdrawals"] .pagination-bar a.active {
    color: #fff;
    border-color: var(--primary);
    background:
        linear-gradient(145deg, var(--primary), var(--primary-dark));
    box-shadow:
        0 6px 14px rgba(var(--primary-rgb), .18);
}

/* ---------- Empty ---------- */
body[data-page="wallet-withdrawals"] .empty-state-card {
    display: grid;
    min-height: 100px;
    place-items: center;
    padding: 18px;
    border: 1px dashed rgba(var(--primary-rgb), .22);
    border-radius: 11px;
    color: var(--text-muted);
    background: rgba(var(--primary-rgb), .035);
    font-size: .74rem;
    text-align: center;
}

/* ---------- Mobile ---------- */
@media (max-width: 700px) {
    body[data-page="wallet-withdrawals"] .container.page-with-nav {
        width: min(100% - 18px, 640px);
        padding: 9px 0 78px;
    }

    body[data-page="wallet-withdrawals"] .wallet-history-hero {
        min-height: 0;
        padding: 18px 15px;
        border-radius: 15px;
    }

    body[data-page="wallet-withdrawals"] .wallet-history-header-top {
        grid-template-columns: 1fr;
        align-items: stretch;
        gap: 12px;
    }

    body[data-page="wallet-withdrawals"] .wallet-history-hero::before {
        top: 58px;
        font-size: 4rem;
    }

    body[data-page="wallet-withdrawals"] .wallet-history-hero h1 {
        font-size: 1.42rem;
    }

    body[data-page="wallet-withdrawals"] .wallet-history-back-button {
        width: 100%;
        min-height: 35px;
    }

    body[data-page="wallet-withdrawals"] .wallet-history-filter-card,
    body[data-page="wallet-withdrawals"] .wallet-history-list-card {
        margin-top: 10px;
        padding: 13px;
        border-radius: 13px;
    }

    body[data-page="wallet-withdrawals"] .wallet-history-filter-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 7px;
    }

    body[data-page="wallet-withdrawals"] .wallet-history-filter-grid > div:first-child {
        grid-column: 1 / -1;
    }

    body[data-page="wallet-withdrawals"] .wallet-history-item {
        padding: 12px 12px 11px 15px;
        border-radius: 12px;
    }

    body[data-page="wallet-withdrawals"] .attendance-info-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 5px;
    }
}

@media (max-width: 390px) {
    body[data-page="wallet-withdrawals"] .wallet-history-filter-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body[data-page="wallet-withdrawals"] .wallet-history-item-top {
        align-items: stretch;
        flex-direction: column;
    }

    body[data-page="wallet-withdrawals"] .wallet-status-pill {
        align-self: flex-start;
    }
}

@media (prefers-reduced-motion: reduce) {
    body[data-page="wallet-withdrawals"] *,
    body[data-page="wallet-withdrawals"] *::before,
    body[data-page="wallet-withdrawals"] *::after {
        animation: none !important;
        transition: none !important;
    }
}
/* =========================================================
   PRMS Wallet Transactions — Premium Navy & Copper UI
   Page scope: body[data-page="wallet-transactions"]
   Palette: navy + copper + champagne
   ========================================================= */

body[data-page="wallet-transactions"] {
    --page-bg: #f4f1ed;
    --surface: #ffffff;
    --surface-soft: #faf8f5;
    --text: #1d2733;
    --text-soft: #5f6d7c;
    --text-muted: #8793a0;
    --line: #e3ddd5;

    --primary: #1e3a5f;
    --primary-dark: #0f2742;
    --primary-rgb: 30, 58, 95;

    --copper: #b65f2e;
    --copper-dark: #7c3518;
    --copper-rgb: 182, 95, 46;

    --gold: #c69a4a;
    --gold-dark: #7c5718;
    --gold-light: #f1d79c;

    --success: #15803d;
    --danger: #b91c1c;

    margin: 0;
    color: var(--text);
    background:
        radial-gradient(circle at 100% 0%, rgba(var(--primary-rgb), .09), transparent 30rem),
        radial-gradient(circle at 0% 100%, rgba(var(--copper-rgb), .055), transparent 26rem),
        var(--page-bg);
    font-family: Inter, "Segoe UI", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

body[data-page="wallet-transactions"] *,
body[data-page="wallet-transactions"] *::before,
body[data-page="wallet-transactions"] *::after {
    box-sizing: border-box;
}

body[data-page="wallet-transactions"] a,
body[data-page="wallet-transactions"] button,
body[data-page="wallet-transactions"] input {
    -webkit-tap-highlight-color: transparent;
}

body[data-page="wallet-transactions"] .container.page-with-nav {
    width: min(100% - 32px, 1180px);
    margin: 0 auto;
    padding: 18px 4px 88px;
}

/* ---------- Premium Hero ---------- */
body[data-page="wallet-transactions"] .wallet-history-hero {
    position: relative;
    isolation: isolate;
    min-height: 182px;
    padding: 26px 24px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.20);
    border-radius: 18px;
    color: #fff;
    background:
        radial-gradient(circle at 12% 8%, rgba(255,255,255,.16), transparent 24%),
        radial-gradient(circle at 88% 112%, rgba(255,255,255,.10), transparent 38%),
        linear-gradient(118deg, rgba(255,255,255,.05), transparent 42%),
        linear-gradient(135deg, #0b1f33 0%, #1e3a5f 48%, #7c3518 100%);
    box-shadow:
        0 20px 46px rgba(15,39,66,.24),
        inset 0 1px 0 rgba(255,255,255,.13),
        inset 0 -1px 0 rgba(8,22,38,.24);
}

body[data-page="wallet-transactions"] .wallet-history-hero::before {
    content: "TRANSACTIONS";
    position: absolute;
    z-index: -1;
    left: 24px;
    top: 56px;
    color: rgba(255,255,255,.035);
    font-size: clamp(3.4rem, 7.5vw, 6.4rem);
    font-weight: 950;
    letter-spacing: -.08em;
    line-height: .8;
    pointer-events: none;
}

body[data-page="wallet-transactions"] .wallet-history-hero::after {
    content: "";
    position: absolute;
    right: -74px;
    top: -90px;
    width: 252px;
    height: 252px;
    border: 36px solid rgba(255,255,255,.035);
    border-radius: 50%;
    box-shadow:
        0 0 0 1px rgba(255,255,255,.05),
        0 0 78px rgba(198,154,74,.14);
}

body[data-page="wallet-transactions"] .wallet-history-header-top {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 18px;
}

body[data-page="wallet-transactions"] .page-subtitle {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 27px;
    margin: 0 0 8px;
    padding: 4px 10px;
    border: 1px solid rgba(241,215,156,.24);
    border-radius: 999px;
    color: #ffedc2;
    background: rgba(241,215,156,.10);
    font-size: .62rem;
    font-weight: 900;
    letter-spacing: .11em;
    text-transform: uppercase;
    backdrop-filter: blur(8px);
}

body[data-page="wallet-transactions"] .page-subtitle::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--gold-light);
    box-shadow:
        0 0 0 4px rgba(241,215,156,.12),
        0 0 14px rgba(241,215,156,.35);
}

body[data-page="wallet-transactions"] .wallet-history-hero h1 {
    margin: 0;
    color: #fff;
    font-size: clamp(1.55rem, 2.8vw, 2.35rem);
    font-weight: 850;
    line-height: 1.2;
    letter-spacing: -.026em;
    text-shadow: 0 3px 18px rgba(8,22,38,.28);
}

body[data-page="wallet-transactions"] .wallet-history-desc {
    position: relative;
    z-index: 2;
    max-width: 760px;
    margin: 12px 0 0;
    color: rgba(255,255,255,.72);
    font-size: .8rem;
    line-height: 1.58;
}

body[data-page="wallet-transactions"] .wallet-history-back-button {
    display: inline-flex;
    min-width: 145px;
    min-height: 39px;
    align-items: center;
    justify-content: center;
    padding: 7px 13px;
    border: 1px solid var(--gold-light);
    border-radius: 11px;
    color: #2f2412;
    background:
        linear-gradient(145deg, var(--gold-light), var(--gold));
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.55),
        0 9px 20px rgba(124,87,24,.24);
    font-size: .7rem;
    font-weight: 850;
    text-decoration: none;
}

body[data-page="wallet-transactions"] .wallet-history-back-button:hover {
    filter: brightness(.98) saturate(1.08);
    transform: translateY(-1px);
}

/* ---------- Filter & List cards ---------- */
body[data-page="wallet-transactions"] .wallet-history-filter-card,
body[data-page="wallet-transactions"] .wallet-history-list-card {
    position: relative;
    overflow: hidden;
    margin-top: 14px;
    padding: 18px;
    border: 1px solid rgba(var(--primary-rgb), .16);
    border-radius: 16px;
    background:
        radial-gradient(circle at 100% 0%, rgba(var(--primary-rgb), .07), transparent 190px),
        linear-gradient(145deg, #ffffff, #faf8f5);
    box-shadow:
        0 12px 28px rgba(29,39,51,.07),
        inset 0 1px 0 #fff;
}

body[data-page="wallet-transactions"] .wallet-history-filter-card::before,
body[data-page="wallet-transactions"] .wallet-history-list-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 5px;
    background:
        linear-gradient(180deg, var(--primary), var(--copper));
}

body[data-page="wallet-transactions"] .section-title-row {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
    padding: 12px 13px;
    border: 1px solid rgba(var(--primary-rgb), .12);
    border-radius: 12px;
    background:
        linear-gradient(145deg, rgba(255,255,255,.95), rgba(var(--primary-rgb), .045));
}

body[data-page="wallet-transactions"] .section-title-row h3 {
    margin: 0;
    color: #263b54;
    font-size: 1rem;
    letter-spacing: -.015em;
}

body[data-page="wallet-transactions"] .section-count {
    display: inline-flex;
    min-height: 28px;
    align-items: center;
    padding: 4px 9px;
    border: 1px solid rgba(var(--copper-rgb), .18);
    border-radius: 999px;
    color: var(--copper-dark);
    background: rgba(var(--copper-rgb), .07);
    font-size: .67rem;
    font-weight: 850;
}

body[data-page="wallet-transactions"] .wallet-history-filter-form {
    margin: 0;
    padding: 14px;
    border: 1px solid rgba(var(--primary-rgb), .10);
    border-radius: 12px;
    background: rgba(255,255,255,.78);
    box-shadow: inset 0 1px 0 #fff;
}

body[data-page="wallet-transactions"] .wallet-history-filter-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr;
    gap: 10px;
}

body[data-page="wallet-transactions"] .wallet-history-filter-grid label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 6px;
    color: #46576b;
    font-size: .68rem;
    font-weight: 850;
}

body[data-page="wallet-transactions"] .wallet-history-filter-grid label::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--primary);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), .09);
}

body[data-page="wallet-transactions"] .wallet-history-filter-grid input {
    width: 100%;
    min-height: 41px;
    padding: 8px 10px;
    border: 1px solid #d9d4ce;
    border-radius: 10px;
    color: #2f3c4a;
    background: linear-gradient(180deg, #fff, #fbfaf8);
    font: inherit;
    font-size: .71rem;
    box-shadow:
        inset 0 1px 2px rgba(29,39,51,.035),
        0 3px 8px rgba(29,39,51,.025);
}

body[data-page="wallet-transactions"] .wallet-history-filter-grid input:focus {
    outline: none;
    border-color: rgba(var(--primary-rgb), .55);
    box-shadow:
        0 0 0 4px rgba(var(--primary-rgb), .10),
        0 7px 16px rgba(var(--primary-rgb), .07);
}

body[data-page="wallet-transactions"] .wallet-history-filter-form > button {
    display: inline-flex;
    width: 100%;
    min-height: 42px;
    align-items: center;
    justify-content: center;
    margin-top: 12px;
    padding: 8px 13px;
    border: 1px solid var(--primary);
    border-radius: 10px;
    color: #fff;
    background:
        linear-gradient(145deg, var(--primary), var(--primary-dark));
    box-shadow:
        0 9px 20px rgba(var(--primary-rgb), .22),
        inset 0 1px 0 rgba(255,255,255,.17);
    font: inherit;
    font-size: .72rem;
    font-weight: 900;
    cursor: pointer;
}

/* ---------- Transaction items ---------- */
body[data-page="wallet-transactions"] .wallet-history-list {
    display: grid;
    gap: 10px;
}

body[data-page="wallet-transactions"] .wallet-history-item {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 15px 16px 14px 19px;
    border: 1px solid rgba(var(--copper-rgb), .14);
    border-radius: 14px;
    background:
        radial-gradient(circle at 100% 0%, rgba(var(--copper-rgb), .08), transparent 150px),
        linear-gradient(145deg, #ffffff, #fcfaf7);
    box-shadow:
        0 8px 20px rgba(29,39,51,.05),
        inset 0 1px 0 #fff;
}

body[data-page="wallet-transactions"] .wallet-history-item::before {
    content: "";
    position: absolute;
    inset: 11px auto 11px 0;
    width: 5px;
    border-radius: 99px;
    background:
        linear-gradient(180deg, var(--copper), var(--primary));
    box-shadow: 7px 0 18px rgba(var(--copper-rgb), .10);
}

body[data-page="wallet-transactions"] .wallet-history-item::after {
    content: "";
    position: absolute;
    z-index: -1;
    right: -52px;
    bottom: -66px;
    width: 160px;
    height: 160px;
    border: 24px solid rgba(var(--copper-rgb), .035);
    border-radius: 50%;
}

body[data-page="wallet-transactions"] .wallet-history-item-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

body[data-page="wallet-transactions"] .wallet-history-item-top h4 {
    margin: 0;
    color: #263b54;
    font-size: .9rem;
    font-weight: 850;
}

body[data-page="wallet-transactions"] .wallet-history-item-top p {
    margin: 3px 0 0;
    color: var(--text-muted);
    font-size: .63rem;
}

body[data-page="wallet-transactions"] .wallet-amount-pill {
    display: inline-flex;
    flex: 0 0 auto;
    min-height: 29px;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    color: #fff;
    background:
        linear-gradient(145deg, var(--copper), var(--copper-dark));
    box-shadow:
        0 6px 14px rgba(var(--copper-rgb), .20),
        inset 0 1px 0 rgba(255,255,255,.16);
    font-size: .65rem;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
}

body[data-page="wallet-transactions"] .wallet-history-message {
    margin-top: 11px;
    padding: 10px 11px;
    border: 1px solid #e5dfd8;
    border-radius: 10px;
    color: var(--text-soft);
    background:
        linear-gradient(145deg, rgba(255,255,255,.95), rgba(250,248,245,.95));
    font-size: .68rem;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

/* ---------- Pagination ---------- */
body[data-page="wallet-transactions"] .pagination-bar {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    margin-top: 14px;
}

body[data-page="wallet-transactions"] .pagination-bar a,
body[data-page="wallet-transactions"] .pagination-bar span {
    display: inline-flex;
    min-width: 34px;
    min-height: 34px;
    align-items: center;
    justify-content: center;
    padding: 5px 9px;
    border: 1px solid #ddd6cf;
    border-radius: 9px;
    color: #41556c;
    background: #fff;
    font-size: .67rem;
    font-weight: 800;
    text-decoration: none;
}

body[data-page="wallet-transactions"] .pagination-bar a.active {
    color: #fff;
    border-color: var(--primary);
    background:
        linear-gradient(145deg, var(--primary), var(--primary-dark));
    box-shadow:
        0 6px 14px rgba(var(--primary-rgb), .18);
}

/* ---------- Empty state ---------- */
body[data-page="wallet-transactions"] .empty-state-card {
    display: grid;
    min-height: 100px;
    place-items: center;
    padding: 18px;
    border: 1px dashed rgba(var(--primary-rgb), .22);
    border-radius: 11px;
    color: var(--text-muted);
    background: rgba(var(--primary-rgb), .035);
    font-size: .74rem;
    text-align: center;
}

/* ---------- Mobile ---------- */
@media (max-width: 700px) {
    body[data-page="wallet-transactions"] .container.page-with-nav {
        width: min(100% - 18px, 640px);
        padding: 9px 0 78px;
    }

    body[data-page="wallet-transactions"] .wallet-history-hero {
        min-height: 0;
        padding: 18px 15px;
        border-radius: 15px;
    }

    body[data-page="wallet-transactions"] .wallet-history-header-top {
        grid-template-columns: 1fr;
        align-items: stretch;
        gap: 12px;
    }

    body[data-page="wallet-transactions"] .wallet-history-hero::before {
        top: 60px;
        font-size: 3.5rem;
    }

    body[data-page="wallet-transactions"] .wallet-history-hero h1 {
        font-size: 1.42rem;
    }

    body[data-page="wallet-transactions"] .wallet-history-back-button {
        width: 100%;
        min-height: 35px;
    }

    body[data-page="wallet-transactions"] .wallet-history-filter-card,
    body[data-page="wallet-transactions"] .wallet-history-list-card {
        margin-top: 10px;
        padding: 13px;
        border-radius: 13px;
    }

    body[data-page="wallet-transactions"] .wallet-history-filter-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 7px;
    }

    body[data-page="wallet-transactions"] .wallet-history-filter-grid > div:first-child {
        grid-column: 1 / -1;
    }

    body[data-page="wallet-transactions"] .wallet-history-item {
        padding: 12px 12px 11px 15px;
        border-radius: 12px;
    }
}

@media (max-width: 390px) {
    body[data-page="wallet-transactions"] .wallet-history-filter-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body[data-page="wallet-transactions"] .wallet-history-item-top {
        align-items: stretch;
        flex-direction: column;
    }

    body[data-page="wallet-transactions"] .wallet-amount-pill {
        align-self: flex-start;
    }
}

@media (prefers-reduced-motion: reduce) {
    body[data-page="wallet-transactions"] *,
    body[data-page="wallet-transactions"] *::before,
    body[data-page="wallet-transactions"] *::after {
        animation: none !important;
        transition: none !important;
    }
}

/* =========================================================
   PRMS Salary Payouts — Premium Burgundy & Graphite UI
   Page scope: body[data-page="salary-payouts"]
   Palette: burgundy + graphite + champagne gold
   ========================================================= */

body[data-page="salary-payouts"] {
    --page-bg: #f5f2f1;
    --surface: #ffffff;
    --surface-soft: #faf8f7;
    --text: #261f22;
    --text-soft: #675d62;
    --text-muted: #8b8186;
    --line: #e5dddd;

    --primary: #881337;
    --primary-dark: #4c0519;
    --primary-rgb: 136, 19, 55;

    --graphite: #2f3338;
    --graphite-dark: #17191c;
    --graphite-rgb: 47, 51, 56;

    --gold: #c7953f;
    --gold-dark: #7c5415;
    --gold-light: #f1d89f;

    --success: #15803d;
    --success-dark: #166534;
    --success-rgb: 21, 128, 61;

    margin: 0;
    color: var(--text);
    background:
        radial-gradient(circle at 100% 0%, rgba(var(--primary-rgb), .08), transparent 30rem),
        radial-gradient(circle at 0% 100%, rgba(var(--graphite-rgb), .05), transparent 26rem),
        var(--page-bg);
    font-family: Inter, "Segoe UI", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

body[data-page="salary-payouts"] *,
body[data-page="salary-payouts"] *::before,
body[data-page="salary-payouts"] *::after {
    box-sizing: border-box;
}

body[data-page="salary-payouts"] a,
body[data-page="salary-payouts"] button {
    -webkit-tap-highlight-color: transparent;
}

body[data-page="salary-payouts"] .container.page-with-nav {
    width: min(100% - 32px, 1180px);
    margin: 0 auto;
    padding: 18px 4px 92px;
}

/* ---------- Premium Hero ---------- */
body[data-page="salary-payouts"] .salary-management-hero {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 18px;
    min-height: 182px;
    padding: 26px 24px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.20);
    border-radius: 18px;
    color: #fff;
    background:
        radial-gradient(circle at 12% 8%, rgba(255,255,255,.16), transparent 24%),
        radial-gradient(circle at 88% 112%, rgba(255,255,255,.10), transparent 38%),
        linear-gradient(118deg, rgba(255,255,255,.05), transparent 42%),
        linear-gradient(135deg, #17191c 0%, #34383e 47%, #7f1238 100%);
    box-shadow:
        0 20px 46px rgba(39,22,29,.24),
        inset 0 1px 0 rgba(255,255,255,.13),
        inset 0 -1px 0 rgba(23,25,28,.24);
}

body[data-page="salary-payouts"] .salary-management-hero::before {
    content: "PAYOUT";
    position: absolute;
    z-index: -1;
    left: 24px;
    top: 56px;
    color: rgba(255,255,255,.035);
    font-size: clamp(3.8rem, 8vw, 6.8rem);
    font-weight: 950;
    letter-spacing: -.08em;
    line-height: .8;
    pointer-events: none;
}

body[data-page="salary-payouts"] .salary-management-hero::after {
    content: "";
    position: absolute;
    right: -74px;
    top: -90px;
    width: 252px;
    height: 252px;
    border: 36px solid rgba(255,255,255,.035);
    border-radius: 50%;
    box-shadow:
        0 0 0 1px rgba(255,255,255,.05),
        0 0 78px rgba(199,149,63,.14);
}

body[data-page="salary-payouts"] .salary-management-hero > div:first-child {
    position: relative;
    z-index: 2;
    min-width: 0;
}

body[data-page="salary-payouts"] .page-subtitle {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 27px;
    margin: 0 0 8px;
    padding: 4px 10px;
    border: 1px solid rgba(241,216,159,.24);
    border-radius: 999px;
    color: #ffedc3;
    background: rgba(241,216,159,.10);
    font-size: .62rem;
    font-weight: 900;
    letter-spacing: .11em;
    text-transform: uppercase;
    backdrop-filter: blur(8px);
}

body[data-page="salary-payouts"] .page-subtitle::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--gold-light);
    box-shadow:
        0 0 0 4px rgba(241,216,159,.12),
        0 0 14px rgba(241,216,159,.35);
}

body[data-page="salary-payouts"] .salary-management-hero h1 {
    margin: 0;
    color: #fff;
    font-size: clamp(1.55rem, 2.8vw, 2.35rem);
    font-weight: 850;
    line-height: 1.2;
    letter-spacing: -.026em;
    text-shadow: 0 3px 18px rgba(23,25,28,.28);
}

body[data-page="salary-payouts"] .user-inline {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 10px;
    padding: 5px 9px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 999px;
    color: rgba(255,255,255,.76);
    background: rgba(255,255,255,.06);
    font-size: .7rem;
}

body[data-page="salary-payouts"] .salary-management-actions {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(2, minmax(120px, 1fr));
    gap: 8px;
    padding: 11px;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 12px;
    background:
        linear-gradient(145deg, rgba(255,255,255,.13), rgba(255,255,255,.055));
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.12),
        0 14px 28px rgba(23,25,28,.16);
    backdrop-filter: blur(12px);
}

body[data-page="salary-payouts"] .header-action-btn {
    display: inline-flex;
    min-height: 39px;
    align-items: center;
    justify-content: center;
    padding: 7px 12px;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 11px;
    color: #fff;
    background:
        linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.08));
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.14),
        0 7px 16px rgba(23,25,28,.12);
    font-size: .68rem;
    font-weight: 850;
    text-align: center;
    text-decoration: none;
}

body[data-page="salary-payouts"] .header-action-btn:first-child {
    border-color: var(--gold-light);
    color: #2f2411;
    background:
        linear-gradient(145deg, var(--gold-light), var(--gold));
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.55),
        0 9px 20px rgba(124,84,21,.24);
}

/* ---------- Alerts ---------- */
body[data-page="salary-payouts"] .alert {
    margin-top: 12px;
    padding: 11px 13px;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: #fff;
    box-shadow: 0 7px 16px rgba(23,25,28,.045);
    font-size: .72rem;
}

body[data-page="salary-payouts"] .alert.success {
    color: #166534;
    border-color: rgba(var(--success-rgb), .22);
    background: #f0fdf4;
}

body[data-page="salary-payouts"] .alert.error,
body[data-page="salary-payouts"] .alert.danger {
    color: #991b1b;
    border-color: rgba(185,28,28,.22);
    background: #fef2f2;
}

/* ---------- Main request section ---------- */
body[data-page="salary-payouts"] .salary-request-section {
    position: relative;
    overflow: hidden;
    margin-top: 14px;
    padding: 18px;
    border: 1px solid rgba(var(--primary-rgb), .16);
    border-radius: 16px;
    background:
        radial-gradient(circle at 100% 0%, rgba(var(--primary-rgb), .07), transparent 190px),
        linear-gradient(145deg, #ffffff, #faf8f7);
    box-shadow:
        0 12px 28px rgba(38,31,34,.07),
        inset 0 1px 0 #fff;
}

body[data-page="salary-payouts"] .salary-request-section::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 5px;
    background:
        linear-gradient(180deg, var(--graphite), var(--primary));
}

body[data-page="salary-payouts"] .section-title-row {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
    padding: 12px 13px;
    border: 1px solid rgba(var(--primary-rgb), .12);
    border-radius: 12px;
    background:
        linear-gradient(145deg, rgba(255,255,255,.95), rgba(var(--primary-rgb), .045));
}

body[data-page="salary-payouts"] .section-title-row h3 {
    margin: 0;
    color: #44242f;
    font-size: 1rem;
    letter-spacing: -.015em;
}

body[data-page="salary-payouts"] .section-subtitle {
    margin: 4px 0 0;
    color: var(--text-muted);
    font-size: .71rem;
    line-height: 1.45;
}

body[data-page="salary-payouts"] .section-count {
    display: inline-flex;
    flex: 0 0 auto;
    min-height: 28px;
    align-items: center;
    padding: 4px 9px;
    border: 1px solid rgba(var(--primary-rgb), .18);
    border-radius: 999px;
    color: var(--primary-dark);
    background: rgba(var(--primary-rgb), .07);
    font-size: .67rem;
    font-weight: 850;
}

/* ---------- Payout grid ---------- */
body[data-page="salary-payouts"] .salary-request-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 11px;
}

body[data-page="salary-payouts"] .salary-request-card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 16px 16px 14px 19px;
    border: 1px solid rgba(var(--primary-rgb), .15);
    border-radius: 15px;
    background:
        radial-gradient(circle at 100% 0%, rgba(var(--primary-rgb), .08), transparent 150px),
        linear-gradient(145deg, #ffffff, #fcf8f9);
    box-shadow:
        0 9px 22px rgba(38,31,34,.055),
        inset 0 1px 0 #fff;
}

body[data-page="salary-payouts"] .salary-request-card::before {
    content: "";
    position: absolute;
    inset: 11px auto 11px 0;
    width: 5px;
    border-radius: 99px;
    background:
        linear-gradient(180deg, var(--gold), var(--primary), var(--graphite));
    box-shadow: 7px 0 18px rgba(var(--primary-rgb), .10);
}

body[data-page="salary-payouts"] .salary-request-card::after {
    content: "";
    position: absolute;
    z-index: -1;
    right: -52px;
    bottom: -66px;
    width: 160px;
    height: 160px;
    border: 24px solid rgba(var(--primary-rgb), .035);
    border-radius: 50%;
}

body[data-page="salary-payouts"] .salary-request-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

body[data-page="salary-payouts"] .salary-request-top h3 {
    margin: 0;
    color: #5f1230;
    font-size: 1.15rem;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
}

body[data-page="salary-payouts"] .salary-request-top p {
    margin: 3px 0 0;
    color: var(--text-muted);
    font-size: .63rem;
}

body[data-page="salary-payouts"] .salary-status-pill {
    display: inline-flex;
    flex: 0 0 auto;
    min-height: 29px;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    color: #fff;
    background:
        linear-gradient(145deg, var(--primary), var(--primary-dark));
    box-shadow:
        0 6px 14px rgba(var(--primary-rgb), .20),
        inset 0 1px 0 rgba(255,255,255,.16);
    font-size: .65rem;
    font-weight: 900;
}

body[data-page="salary-payouts"] .attendance-info-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    margin-top: 11px;
}

body[data-page="salary-payouts"] .attendance-info-grid > div {
    min-width: 0;
    padding: 9px 10px;
    border: 1px solid #eadfe2;
    border-radius: 10px;
    background:
        linear-gradient(145deg, rgba(255,255,255,.94), rgba(250,248,247,.94));
}

body[data-page="salary-payouts"] .attendance-info-grid span {
    display: block;
    color: var(--text-muted);
    font-size: .60rem;
}

body[data-page="salary-payouts"] .attendance-info-grid strong {
    display: block;
    margin-top: 3px;
    color: #3b3034;
    font-size: .69rem;
    overflow-wrap: anywhere;
}

/* ---------- Confirm payout action ---------- */
body[data-page="salary-payouts"] .salary-action-row {
    margin-top: 12px;
    padding-top: 11px;
    border-top: 1px dashed #dfd4d7;
}

body[data-page="salary-payouts"] .salary-action-row form {
    margin: 0;
}

body[data-page="salary-payouts"] .salary-action-row button {
    display: inline-flex;
    width: 100%;
    min-height: 40px;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
    border: 1px solid var(--success);
    border-radius: 10px;
    color: #fff;
    background:
        linear-gradient(145deg, var(--success), var(--success-dark));
    box-shadow:
        0 9px 20px rgba(var(--success-rgb), .22),
        inset 0 1px 0 rgba(255,255,255,.17);
    font: inherit;
    font-size: .7rem;
    font-weight: 900;
    cursor: pointer;
}

body[data-page="salary-payouts"] .salary-action-row button:hover {
    filter: brightness(.97) saturate(1.08);
    transform: translateY(-1px);
}

/* ---------- Empty state ---------- */
body[data-page="salary-payouts"] .empty-state-card {
    display: grid;
    min-height: 110px;
    place-items: center;
    padding: 18px;
    border: 1px dashed rgba(var(--primary-rgb), .22);
    border-radius: 11px;
    color: var(--text-muted);
    background: rgba(var(--primary-rgb), .035);
    font-size: .74rem;
    text-align: center;
}

/* ---------- Bottom nav ---------- */
body[data-page="salary-payouts"] .bottom-nav {
    position: fixed;
    z-index: 1000;
    right: 50%;
    bottom: max(10px, env(safe-area-inset-bottom));
    display: grid;
    grid-template-columns: repeat(3, minmax(82px, 1fr));
    width: min(calc(100% - 24px), 460px);
    padding: 5px;
    border: 1px solid rgba(218,207,211,.92);
    border-radius: 15px;
    background: rgba(255,255,255,.94);
    box-shadow:
        0 12px 32px rgba(38,31,34,.15),
        inset 0 1px 0 rgba(255,255,255,.95);
    backdrop-filter: blur(14px);
    transform: translateX(50%);
}

body[data-page="salary-payouts"] .bottom-nav a {
    display: flex;
    min-height: 38px;
    align-items: center;
    justify-content: center;
    padding: 6px 9px;
    border-radius: 10px;
    color: var(--text-soft);
    font-size: .72rem;
    font-weight: 800;
    text-align: center;
    text-decoration: none;
}

body[data-page="salary-payouts"] .bottom-nav a:hover {
    color: var(--primary-dark);
    background: rgba(var(--primary-rgb), .07);
}

body[data-page="salary-payouts"] .bottom-nav a.active {
    color: #fff;
    background:
        linear-gradient(145deg, var(--primary), var(--primary-dark));
    box-shadow:
        0 5px 13px rgba(var(--primary-rgb), .22),
        inset 0 1px 0 rgba(255,255,255,.14);
}

/* ---------- Mobile ---------- */
@media (max-width: 700px) {
    body[data-page="salary-payouts"] .container.page-with-nav {
        width: min(100% - 18px, 640px);
        padding: 9px 0 82px;
    }

    body[data-page="salary-payouts"] .salary-management-hero {
        grid-template-columns: 1fr;
        align-items: stretch;
        gap: 12px;
        min-height: 0;
        padding: 18px 15px;
        border-radius: 15px;
    }

    body[data-page="salary-payouts"] .salary-management-hero::before {
        top: 60px;
        font-size: 4rem;
    }

    body[data-page="salary-payouts"] .salary-management-hero h1 {
        font-size: 1.42rem;
    }

    body[data-page="salary-payouts"] .salary-management-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        padding: 8px;
        gap: 6px;
    }

    body[data-page="salary-payouts"] .header-action-btn {
        min-height: 34px;
        font-size: .63rem;
    }

    body[data-page="salary-payouts"] .salary-request-section {
        margin-top: 10px;
        padding: 13px;
        border-radius: 13px;
    }

    body[data-page="salary-payouts"] .salary-request-grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    body[data-page="salary-payouts"] .salary-request-card {
        padding: 12px 12px 11px 15px;
        border-radius: 12px;
    }

    body[data-page="salary-payouts"] .attendance-info-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 5px;
    }

    body[data-page="salary-payouts"] .bottom-nav {
        bottom: max(7px, env(safe-area-inset-bottom));
        width: calc(100% - 18px);
        max-width: 430px;
        padding: 4px;
        border-radius: 14px;
    }

    body[data-page="salary-payouts"] .bottom-nav a {
        min-height: 36px;
        padding: 5px;
        font-size: .68rem;
    }
}

@media (max-width: 390px) {
    body[data-page="salary-payouts"] .salary-request-top {
        align-items: stretch;
        flex-direction: column;
    }

    body[data-page="salary-payouts"] .salary-status-pill {
        align-self: flex-start;
    }
}

@media (prefers-reduced-motion: reduce) {
    body[data-page="salary-payouts"] *,
    body[data-page="salary-payouts"] *::before,
    body[data-page="salary-payouts"] *::after {
        animation: none !important;
        transition: none !important;
    }
}

/* =========================================================
   PRMS Payroll Records — Premium Indigo & Amber UI
   Page scope: body[data-page="payroll-records"]
   Palette: deep indigo + amber + warm gray
   ========================================================= */

body[data-page="payroll-records"] {
    --page-bg: #f5f3f0;
    --surface: #ffffff;
    --surface-soft: #faf8f5;
    --text: #242431;
    --text-soft: #646273;
    --text-muted: #8a8795;
    --line: #e2ddd6;

    --primary: #4338ca;
    --primary-dark: #312e81;
    --primary-rgb: 67, 56, 202;

    --amber: #d97706;
    --amber-dark: #92400e;
    --amber-rgb: 217, 119, 6;

    --gold: #c89a45;
    --gold-dark: #7c5718;
    --gold-light: #f2d89d;

    --success: #15803d;
    --danger: #b91c1c;

    margin: 0;
    color: var(--text);
    background:
        radial-gradient(circle at 100% 0%, rgba(var(--primary-rgb), .08), transparent 30rem),
        radial-gradient(circle at 0% 100%, rgba(var(--amber-rgb), .05), transparent 25rem),
        var(--page-bg);
    font-family: Inter, "Segoe UI", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

body[data-page="payroll-records"] *,
body[data-page="payroll-records"] *::before,
body[data-page="payroll-records"] *::after {
    box-sizing: border-box;
}

body[data-page="payroll-records"] a,
body[data-page="payroll-records"] button,
body[data-page="payroll-records"] input,
body[data-page="payroll-records"] select {
    -webkit-tap-highlight-color: transparent;
}

body[data-page="payroll-records"] .container.page-with-nav {
    width: min(100% - 32px, 1220px);
    margin: 0 auto;
    padding: 18px 4px 92px;
}

/* ---------- Role palette mapping ---------- */
body[data-page="payroll-records"].role-promoter {
    --role-color: #c2410c;
    --role-color-dark: #9a3412;
    --role-color-rgb: 194, 65, 12;
}

body[data-page="payroll-records"].role-business {
    --role-color: #2563eb;
    --role-color-dark: #1e3a8a;
    --role-color-rgb: 37, 99, 235;
}

body[data-page="payroll-records"].role-team-leader {
    --role-color: #7c3aed;
    --role-color-dark: #4c1d95;
    --role-color-rgb: 124, 58, 237;
}

body[data-page="payroll-records"].role-dj {
    --role-color: #be185d;
    --role-color-dark: #831843;
    --role-color-rgb: 190, 24, 93;
}

body[data-page="payroll-records"].role-manager,
body[data-page="payroll-records"].role-store-manager,
body[data-page="payroll-records"].role-senior-admin {
    --role-color: #475569;
    --role-color-dark: #0f172a;
    --role-color-rgb: 71, 85, 105;
}

/* ---------- Premium hero ---------- */
body[data-page="payroll-records"] .profile-premium-hero {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 18px;
    min-height: 184px;
    padding: 26px 24px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.20);
    border-radius: 18px;
    color: #fff;
    background:
        radial-gradient(circle at 12% 8%, rgba(255,255,255,.16), transparent 24%),
        radial-gradient(circle at 88% 112%, rgba(255,255,255,.10), transparent 38%),
        linear-gradient(118deg, rgba(255,255,255,.05), transparent 42%),
        linear-gradient(135deg, #1e1b4b 0%, #4338ca 48%, #92400e 100%);
    box-shadow:
        0 20px 46px rgba(49,46,129,.24),
        inset 0 1px 0 rgba(255,255,255,.13),
        inset 0 -1px 0 rgba(30,27,75,.24);
}

body[data-page="payroll-records"] .profile-premium-hero::before {
    content: "PAYROLL";
    position: absolute;
    z-index: -1;
    left: 102px;
    top: 54px;
    color: rgba(255,255,255,.04);
    font-size: clamp(4rem, 8vw, 7rem);
    font-weight: 950;
    letter-spacing: -.08em;
    line-height: .8;
    pointer-events: none;
}

body[data-page="payroll-records"] .profile-premium-hero::after {
    content: "";
    position: absolute;
    right: -74px;
    top: -90px;
    width: 252px;
    height: 252px;
    border: 36px solid rgba(255,255,255,.035);
    border-radius: 50%;
    box-shadow:
        0 0 0 1px rgba(255,255,255,.05),
        0 0 78px rgba(242,216,157,.13);
}

body[data-page="payroll-records"] .profile-premium-main {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 17px;
    min-width: 0;
}

body[data-page="payroll-records"] .profile-premium-avatar {
    display: grid;
    flex: 0 0 68px;
    width: 68px;
    height: 68px;
    place-items: center;
    border: 1px solid rgba(255,255,255,.24);
    border-radius: 20px;
    color: #fff1c7;
    background:
        linear-gradient(145deg, rgba(255,255,255,.20), rgba(255,255,255,.07));
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.20),
        0 13px 28px rgba(30,27,75,.24);
    font-size: 1rem;
    font-weight: 950;
}

body[data-page="payroll-records"] .page-subtitle {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 27px;
    margin: 0 0 8px;
    padding: 4px 10px;
    border: 1px solid rgba(242,216,157,.24);
    border-radius: 999px;
    color: #ffedc3;
    background: rgba(242,216,157,.10);
    font-size: .62rem;
    font-weight: 900;
    letter-spacing: .11em;
    text-transform: uppercase;
}

body[data-page="payroll-records"] .page-subtitle::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--gold-light);
    box-shadow:
        0 0 0 4px rgba(242,216,157,.12),
        0 0 14px rgba(242,216,157,.35);
}

body[data-page="payroll-records"] .profile-premium-title h1 {
    margin: 0;
    color: #fff;
    font-size: clamp(1.55rem, 2.8vw, 2.35rem);
    font-weight: 850;
    line-height: 1.2;
    letter-spacing: -.026em;
    text-shadow: 0 3px 18px rgba(30,27,75,.28);
}

body[data-page="payroll-records"] .profile-premium-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 9px;
}

body[data-page="payroll-records"] .role-badge,
body[data-page="payroll-records"] .profile-premium-status-chip {
    display: inline-flex;
    min-height: 25px;
    align-items: center;
    padding: 3px 9px;
    border: 1px solid rgba(255,255,255,.20);
    border-radius: 999px;
    color: #fff;
    background: rgba(var(--role-color-rgb), .72);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.15),
        0 4px 10px rgba(30,27,75,.12);
    font-size: .65rem;
    font-weight: 850;
}

body[data-page="payroll-records"] .profile-premium-status-chip {
    background: rgba(255,255,255,.10);
}

body[data-page="payroll-records"] .profile-premium-status-card {
    position: relative;
    z-index: 2;
    min-width: 180px;
    padding: 16px;
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 14px;
    background:
        linear-gradient(145deg, rgba(255,255,255,.14), rgba(255,255,255,.06));
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.13),
        0 14px 28px rgba(30,27,75,.16);
    backdrop-filter: blur(12px);
}

body[data-page="payroll-records"] .profile-premium-status-card span {
    display: block;
    color: rgba(255,255,255,.68);
    font-size: .64rem;
}

body[data-page="payroll-records"] .profile-premium-status-card strong {
    display: block;
    margin: 6px 0 10px;
    color: #fff7de;
    font-size: 2rem;
    line-height: 1;
}

body[data-page="payroll-records"] .profile-premium-status-card a {
    display: inline-flex;
    width: 100%;
    min-height: 34px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--gold-light);
    border-radius: 9px;
    color: #2f2410;
    background:
        linear-gradient(145deg, var(--gold-light), var(--gold));
    font-size: .65rem;
    font-weight: 850;
    text-decoration: none;
}

/* ---------- Reminder ---------- */
body[data-page="payroll-records"] .profile-premium-reminder {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    margin-top: 12px;
    padding: 13px 14px;
    border: 1px solid rgba(var(--amber-rgb), .20);
    border-radius: 13px;
    background:
        linear-gradient(145deg, #fffaf0, #ffffff);
    box-shadow:
        0 8px 18px rgba(146,64,14,.06),
        inset 0 1px 0 #fff;
}

body[data-page="payroll-records"] .profile-premium-reminder-icon {
    display: grid;
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    place-items: center;
    border-radius: 10px;
    color: #fff;
    background:
        linear-gradient(145deg, var(--amber), var(--amber-dark));
    box-shadow:
        0 7px 16px rgba(var(--amber-rgb), .20),
        inset 0 1px 0 rgba(255,255,255,.16);
    font-weight: 950;
}

body[data-page="payroll-records"] .profile-premium-reminder h3 {
    margin: 0;
    color: #6f3d0a;
    font-size: .8rem;
}

body[data-page="payroll-records"] .profile-premium-reminder p {
    margin: 4px 0 0;
    color: #8a6a45;
    font-size: .68rem;
    line-height: 1.48;
}

/* ---------- Generic cards ---------- */
body[data-page="payroll-records"] .info-card {
    position: relative;
    overflow: hidden;
    margin-top: 12px;
    padding: 17px;
    border: 1px solid rgba(var(--primary-rgb), .14);
    border-radius: 15px;
    background:
        radial-gradient(circle at 100% 0%, rgba(var(--primary-rgb), .06), transparent 180px),
        linear-gradient(145deg, #ffffff, #faf8f5);
    box-shadow:
        0 10px 24px rgba(36,36,49,.06),
        inset 0 1px 0 #fff;
}

body[data-page="payroll-records"] .info-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 5px;
    background:
        linear-gradient(180deg, var(--primary), var(--amber));
}

body[data-page="payroll-records"] .section-title-row {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
    padding: 12px 13px;
    border: 1px solid rgba(var(--primary-rgb), .11);
    border-radius: 12px;
    background:
        linear-gradient(145deg, rgba(255,255,255,.96), rgba(var(--primary-rgb), .04));
}

body[data-page="payroll-records"] .section-title-row h3 {
    margin: 0;
    color: #312e81;
    font-size: .98rem;
    letter-spacing: -.015em;
}

body[data-page="payroll-records"] .section-subtitle {
    margin: 4px 0 0;
    color: var(--text-muted);
    font-size: .69rem;
    line-height: 1.45;
}

/* ---------- Filter controls ---------- */
body[data-page="payroll-records"] form .attendance-info-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

body[data-page="payroll-records"] form .attendance-info-grid > div {
    min-width: 0;
    padding: 9px 10px;
    border: 1px solid #e3dce8;
    border-radius: 10px;
    background: rgba(255,255,255,.78);
}

body[data-page="payroll-records"] form .attendance-info-grid span {
    display: block;
    margin-bottom: 5px;
    color: #5a5870;
    font-size: .63rem;
    font-weight: 850;
}

body[data-page="payroll-records"] input,
body[data-page="payroll-records"] select {
    width: 100% !important;
    min-height: 39px;
    padding: 7px 9px;
    border: 1px solid #ddd7d0;
    border-radius: 9px;
    color: #2e2d38;
    background: linear-gradient(180deg, #fff, #fbfaf8);
    font: inherit;
    font-size: .68rem;
}

body[data-page="payroll-records"] input:focus,
body[data-page="payroll-records"] select:focus {
    outline: none;
    border-color: rgba(var(--primary-rgb), .55);
    box-shadow:
        0 0 0 4px rgba(var(--primary-rgb), .09),
        0 6px 14px rgba(var(--primary-rgb), .07);
}

body[data-page="payroll-records"] .workspace-card-link {
    display: inline-flex;
    min-height: 36px;
    align-items: center;
    justify-content: center;
    padding: 6px 11px;
    border: 1px solid var(--primary) !important;
    border-radius: 10px;
    color: #fff;
    background:
        linear-gradient(145deg, var(--primary), var(--primary-dark));
    box-shadow:
        0 7px 16px rgba(var(--primary-rgb), .20),
        inset 0 1px 0 rgba(255,255,255,.16);
    font: inherit;
    font-size: .67rem;
    font-weight: 850;
    text-decoration: none;
    cursor: pointer;
}

body[data-page="payroll-records"] a.workspace-card-link {
    background:
        linear-gradient(145deg, var(--amber), var(--amber-dark));
    border-color: var(--amber) !important;
    box-shadow:
        0 7px 16px rgba(var(--amber-rgb), .20),
        inset 0 1px 0 rgba(255,255,255,.16);
}

/* ---------- Payroll data grids ---------- */
body[data-page="payroll-records"] .info-card > .attendance-info-grid,
body[data-page="payroll-records"] .info-card .attendance-info-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 7px;
}

body[data-page="payroll-records"] .info-card .attendance-info-grid > div {
    min-width: 0;
    padding: 9px 10px !important;
    border: 1px solid #e3ddd7;
    border-radius: 10px !important;
    background:
        linear-gradient(145deg, rgba(255,255,255,.95), rgba(250,248,245,.94)) !important;
}

body[data-page="payroll-records"] .info-card .attendance-info-grid span {
    display: block;
    color: var(--text-muted);
    font-size: .60rem;
}

body[data-page="payroll-records"] .info-card .attendance-info-grid strong {
    display: block;
    margin-top: 3px;
    color: #343244;
    font-size: .69rem;
    overflow-wrap: anywhere;
}

body[data-page="payroll-records"] .info-card hr {
    height: 1px;
    margin: 13px 0 !important;
    border: 0;
    background:
        linear-gradient(90deg, transparent, rgba(var(--primary-rgb), .15), transparent);
}

body[data-page="payroll-records"] .info-card p {
    color: var(--text-soft);
    font-size: .69rem;
    line-height: 1.5;
}

/* ---------- Daily summary cards ---------- */
body[data-page="payroll-records"] .info-card > .attendance-info-grid > div strong[style*="22px"] {
    color: var(--amber-dark);
    font-weight: 900;
    font-variant-numeric: tabular-nums;
}

/* ---------- Bottom nav ---------- */
body[data-page="payroll-records"] .bottom-nav {
    position: fixed;
    z-index: 1000;
    right: 50%;
    bottom: max(10px, env(safe-area-inset-bottom));
    display: grid;
    grid-template-columns: repeat(3, minmax(82px, 1fr));
    width: min(calc(100% - 24px), 460px);
    padding: 5px;
    border: 1px solid rgba(215,209,221,.92);
    border-radius: 15px;
    background: rgba(255,255,255,.94);
    box-shadow:
        0 12px 32px rgba(36,36,49,.15),
        inset 0 1px 0 rgba(255,255,255,.95);
    backdrop-filter: blur(14px);
    transform: translateX(50%);
}

body[data-page="payroll-records"] .bottom-nav a {
    display: flex;
    min-height: 38px;
    align-items: center;
    justify-content: center;
    padding: 6px 9px;
    border-radius: 10px;
    color: var(--text-soft);
    font-size: .72rem;
    font-weight: 800;
    text-align: center;
    text-decoration: none;
}

body[data-page="payroll-records"] .bottom-nav a:hover {
    color: var(--primary-dark);
    background: rgba(var(--primary-rgb), .07);
}

body[data-page="payroll-records"] .bottom-nav a.active {
    color: #fff;
    background:
        linear-gradient(145deg, var(--primary), var(--primary-dark));
    box-shadow:
        0 5px 13px rgba(var(--primary-rgb), .22),
        inset 0 1px 0 rgba(255,255,255,.14);
}

/* ---------- Mobile ---------- */
@media (max-width: 700px) {
    body[data-page="payroll-records"] .container.page-with-nav {
        width: min(100% - 18px, 640px);
        padding: 9px 0 82px;
    }

    body[data-page="payroll-records"] .profile-premium-hero {
        grid-template-columns: 1fr;
        gap: 12px;
        min-height: 0;
        padding: 18px 15px;
        border-radius: 15px;
    }

    body[data-page="payroll-records"] .profile-premium-hero::before {
        left: 68px;
        top: 50px;
        font-size: 4.1rem;
    }

    body[data-page="payroll-records"] .profile-premium-avatar {
        flex-basis: 50px;
        width: 50px;
        height: 50px;
        border-radius: 15px;
        font-size: .76rem;
    }

    body[data-page="payroll-records"] .profile-premium-title h1 {
        font-size: 1.42rem;
    }

    body[data-page="payroll-records"] .profile-premium-status-card {
        min-width: 0;
        width: 100%;
        padding: 12px;
    }

    body[data-page="payroll-records"] .profile-premium-status-card strong {
        font-size: 1.55rem;
    }

    body[data-page="payroll-records"] .profile-premium-reminder {
        padding: 11px;
    }

    body[data-page="payroll-records"] .info-card {
        padding: 13px;
        border-radius: 13px;
    }

    body[data-page="payroll-records"] form .attendance-info-grid,
    body[data-page="payroll-records"] .info-card > .attendance-info-grid,
    body[data-page="payroll-records"] .info-card .attendance-info-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
    }

    body[data-page="payroll-records"] .section-title-row {
        gap: 8px;
        padding: 10px;
    }

    body[data-page="payroll-records"] .section-title-row h3 {
        font-size: .82rem;
    }

    body[data-page="payroll-records"] .workspace-card-link {
        flex: 1 1 0;
        min-width: 0;
        min-height: 33px;
        font-size: .61rem;
    }

    body[data-page="payroll-records"] .bottom-nav {
        bottom: max(7px, env(safe-area-inset-bottom));
        width: calc(100% - 18px);
        max-width: 430px;
        padding: 4px;
        border-radius: 14px;
    }

    body[data-page="payroll-records"] .bottom-nav a {
        min-height: 36px;
        padding: 5px;
        font-size: .68rem;
    }
}

@media (max-width: 390px) {
    body[data-page="payroll-records"] form .attendance-info-grid,
    body[data-page="payroll-records"] .info-card > .attendance-info-grid,
    body[data-page="payroll-records"] .info-card .attendance-info-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 5px;
    }

    body[data-page="payroll-records"] .info-card .attendance-info-grid > div,
    body[data-page="payroll-records"] form .attendance-info-grid > div {
        padding: 8px !important;
    }

    body[data-page="payroll-records"] .info-card .attendance-info-grid span,
    body[data-page="payroll-records"] form .attendance-info-grid span {
        font-size: .56rem;
    }

    body[data-page="payroll-records"] .info-card .attendance-info-grid strong {
        font-size: .63rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    body[data-page="payroll-records"] *,
    body[data-page="payroll-records"] *::before,
    body[data-page="payroll-records"] *::after {
        animation: none !important;
        transition: none !important;
    }
}

/* =========================================================
   PRMS Takeaway — Premium Plum & Burnt Orange UI
   Page scope: body[data-page="takeaway"]
   Palette: plum + burnt orange + charcoal
   ========================================================= */

body[data-page="takeaway"] {
    --page-bg: #f6f2ef;
    --surface: #ffffff;
    --surface-soft: #fbf8f6;
    --text: #2d2529;
    --text-soft: #6d6067;
    --text-muted: #8f838a;
    --line: #e6ddd8;

    --primary: #9a3412;
    --primary-dark: #7c2d12;
    --primary-rgb: 154, 52, 18;

    --plum: #7e2252;
    --plum-dark: #57163a;
    --plum-rgb: 126, 34, 82;

    --gold: #c99542;
    --gold-dark: #7c5416;
    --gold-light: #f0d69a;

    --success: #15803d;
    --success-dark: #166534;
    --success-rgb: 21, 128, 61;

    --danger: #b91c1c;
    --danger-dark: #7f1d1d;
    --danger-rgb: 185, 28, 28;

    margin: 0;
    color: var(--text);
    background:
        radial-gradient(circle at 100% 0%, rgba(var(--primary-rgb), .08), transparent 30rem),
        radial-gradient(circle at 0% 100%, rgba(var(--plum-rgb), .055), transparent 26rem),
        var(--page-bg);
    font-family: Inter, "Segoe UI", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

body[data-page="takeaway"] *,
body[data-page="takeaway"] *::before,
body[data-page="takeaway"] *::after {
    box-sizing: border-box;
}

body[data-page="takeaway"] a,
body[data-page="takeaway"] button,
body[data-page="takeaway"] input,
body[data-page="takeaway"] select {
    -webkit-tap-highlight-color: transparent;
}

body[data-page="takeaway"] .container.page-with-nav {
    width: min(100% - 32px, 1180px);
    margin: 0 auto;
    padding: 18px 4px 92px;
}

/* ---------- Role palette mapping ---------- */
body[data-page="takeaway"].role-promoter {
    --role-color: #c2410c;
    --role-color-dark: #9a3412;
    --role-color-rgb: 194, 65, 12;
}

body[data-page="takeaway"].role-business {
    --role-color: #2563eb;
    --role-color-dark: #1e3a8a;
    --role-color-rgb: 37, 99, 235;
}

body[data-page="takeaway"].role-team-leader {
    --role-color: #7c3aed;
    --role-color-dark: #4c1d95;
    --role-color-rgb: 124, 58, 237;
}

body[data-page="takeaway"].role-dj {
    --role-color: #be185d;
    --role-color-dark: #831843;
    --role-color-rgb: 190, 24, 93;
}

body[data-page="takeaway"].role-manager,
body[data-page="takeaway"].role-store-manager,
body[data-page="takeaway"].role-senior-admin {
    --role-color: #475569;
    --role-color-dark: #0f172a;
    --role-color-rgb: 71, 85, 105;
}

/* ---------- Premium Hero ---------- */
body[data-page="takeaway"] .takeaway-hero {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 18px;
    min-height: 182px;
    padding: 26px 24px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.20);
    border-radius: 18px;
    color: #fff;
    background:
        radial-gradient(circle at 12% 8%, rgba(255,255,255,.16), transparent 24%),
        radial-gradient(circle at 88% 112%, rgba(255,255,255,.10), transparent 38%),
        linear-gradient(118deg, rgba(255,255,255,.05), transparent 42%),
        linear-gradient(135deg, #3b1a13 0%, #9a3412 48%, #7e2252 100%);
    box-shadow:
        0 20px 46px rgba(83,33,27,.24),
        inset 0 1px 0 rgba(255,255,255,.13),
        inset 0 -1px 0 rgba(59,26,19,.24);
}

body[data-page="takeaway"] .takeaway-hero::before {
    content: "TAKEAWAY";
    position: absolute;
    z-index: -1;
    left: 24px;
    top: 56px;
    color: rgba(255,255,255,.04);
    font-size: clamp(3.8rem, 8vw, 6.8rem);
    font-weight: 950;
    letter-spacing: -.08em;
    line-height: .8;
    pointer-events: none;
}

body[data-page="takeaway"] .takeaway-hero::after {
    content: "";
    position: absolute;
    right: -74px;
    top: -90px;
    width: 252px;
    height: 252px;
    border: 36px solid rgba(255,255,255,.035);
    border-radius: 50%;
    box-shadow:
        0 0 0 1px rgba(255,255,255,.05),
        0 0 78px rgba(240,214,154,.13);
}

body[data-page="takeaway"] .takeaway-hero > div:first-child {
    position: relative;
    z-index: 2;
    min-width: 0;
}

body[data-page="takeaway"] .page-subtitle {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 27px;
    margin: 0 0 8px;
    padding: 4px 10px;
    border: 1px solid rgba(240,214,154,.24);
    border-radius: 999px;
    color: #ffedc2;
    background: rgba(240,214,154,.10);
    font-size: .62rem;
    font-weight: 900;
    letter-spacing: .11em;
    text-transform: uppercase;
}

body[data-page="takeaway"] .page-subtitle::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--gold-light);
    box-shadow:
        0 0 0 4px rgba(240,214,154,.12),
        0 0 14px rgba(240,214,154,.35);
}

body[data-page="takeaway"] .takeaway-hero h1 {
    margin: 0;
    color: #fff;
    font-size: clamp(1.55rem, 2.8vw, 2.35rem);
    font-weight: 850;
    line-height: 1.2;
    letter-spacing: -.026em;
    text-shadow: 0 3px 18px rgba(59,26,19,.28);
}

body[data-page="takeaway"] .user-inline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 9px;
    color: rgba(255,255,255,.76);
    font-size: .72rem;
}

body[data-page="takeaway"] .role-badge {
    display: inline-flex;
    min-height: 25px;
    align-items: center;
    padding: 3px 9px;
    border: 1px solid rgba(255,255,255,.20);
    border-radius: 999px;
    color: #fff;
    background: rgba(var(--role-color-rgb), .72);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.15),
        0 4px 10px rgba(59,26,19,.12);
    font-size: .65rem;
    font-weight: 850;
}

body[data-page="takeaway"] .takeaway-hero-actions {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(2, minmax(120px, 1fr));
    gap: 8px;
    padding: 11px;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 12px;
    background:
        linear-gradient(145deg, rgba(255,255,255,.13), rgba(255,255,255,.055));
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.12),
        0 14px 28px rgba(59,26,19,.16);
    backdrop-filter: blur(12px);
}

body[data-page="takeaway"] .header-action-btn {
    display: inline-flex;
    min-height: 39px;
    align-items: center;
    justify-content: center;
    padding: 7px 12px;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 11px;
    color: #fff;
    background:
        linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.08));
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.14),
        0 7px 16px rgba(59,26,19,.12);
    font-size: .68rem;
    font-weight: 850;
    text-align: center;
    text-decoration: none;
}

body[data-page="takeaway"] .header-action-btn:first-child {
    border-color: var(--gold-light);
    color: #2f2411;
    background:
        linear-gradient(145deg, var(--gold-light), var(--gold));
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.55),
        0 9px 20px rgba(124,84,22,.24);
}

/* ---------- Alerts ---------- */
body[data-page="takeaway"] .alert {
    margin-top: 12px;
    padding: 11px 13px;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: #fff;
    box-shadow: 0 7px 16px rgba(45,37,41,.045);
    font-size: .72rem;
}

body[data-page="takeaway"] .alert.success {
    color: #166534;
    border-color: rgba(var(--success-rgb), .22);
    background: #f0fdf4;
}

body[data-page="takeaway"] .alert.error,
body[data-page="takeaway"] .alert.danger {
    color: #991b1b;
    border-color: rgba(var(--danger-rgb), .22);
    background: #fef2f2;
}

/* ---------- Main / Section cards ---------- */
body[data-page="takeaway"] .takeaway-main-card,
body[data-page="takeaway"] .takeaway-section-card {
    position: relative;
    overflow: hidden;
    margin-top: 14px;
    padding: 18px;
    border: 1px solid rgba(var(--primary-rgb), .16);
    border-radius: 16px;
    background:
        radial-gradient(circle at 100% 0%, rgba(var(--primary-rgb), .07), transparent 190px),
        linear-gradient(145deg, #ffffff, #fbf8f6);
    box-shadow:
        0 12px 28px rgba(45,37,41,.07),
        inset 0 1px 0 #fff;
}

body[data-page="takeaway"] .takeaway-main-card::before,
body[data-page="takeaway"] .takeaway-section-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 5px;
    background:
        linear-gradient(180deg, var(--primary), var(--plum));
}

body[data-page="takeaway"] .section-title-row {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
    padding: 12px 13px;
    border: 1px solid rgba(var(--primary-rgb), .12);
    border-radius: 12px;
    background:
        linear-gradient(145deg, rgba(255,255,255,.95), rgba(var(--primary-rgb), .045));
}

body[data-page="takeaway"] .section-title-row h3 {
    margin: 0;
    color: #5d2d21;
    font-size: 1rem;
    letter-spacing: -.015em;
}

body[data-page="takeaway"] .section-count {
    display: inline-flex;
    min-height: 28px;
    align-items: center;
    padding: 4px 9px;
    border: 1px solid rgba(var(--plum-rgb), .18);
    border-radius: 999px;
    color: var(--plum-dark);
    background: rgba(var(--plum-rgb), .07);
    font-size: .67rem;
    font-weight: 850;
}

/* ---------- Active takeaway panel ---------- */
body[data-page="takeaway"] .takeaway-active-panel {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 16px;
    border: 1px solid rgba(var(--plum-rgb), .18);
    border-radius: 14px;
    background:
        radial-gradient(circle at 100% 0%, rgba(var(--plum-rgb), .10), transparent 150px),
        linear-gradient(145deg, #ffffff, #fdf8fb);
    box-shadow:
        0 9px 22px rgba(45,37,41,.055),
        inset 0 1px 0 #fff;
}

body[data-page="takeaway"] .takeaway-active-panel::before {
    content: "";
    position: absolute;
    inset: 10px auto 10px 0;
    width: 5px;
    border-radius: 99px;
    background:
        linear-gradient(180deg, var(--plum), var(--primary));
}

body[data-page="takeaway"] .takeaway-active-top,
body[data-page="takeaway"] .takeaway-item-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

body[data-page="takeaway"] .summary-label {
    display: inline-flex;
    min-height: 25px;
    align-items: center;
    padding: 3px 9px;
    border: 1px solid rgba(var(--plum-rgb), .16);
    border-radius: 999px;
    color: var(--plum-dark);
    background: rgba(var(--plum-rgb), .07);
    font-size: .64rem;
    font-weight: 850;
}

body[data-page="takeaway"] .takeaway-active-panel h2 {
    margin: 8px 0 0;
    color: #5c183d;
    font-size: 1.3rem;
}

body[data-page="takeaway"] .takeaway-status-pill {
    display: inline-flex;
    flex: 0 0 auto;
    min-height: 29px;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    color: #fff;
    background:
        linear-gradient(145deg, var(--plum), var(--plum-dark));
    box-shadow:
        0 6px 14px rgba(var(--plum-rgb), .20),
        inset 0 1px 0 rgba(255,255,255,.16);
    font-size: .65rem;
    font-weight: 900;
}

/* ---------- Forms ---------- */
body[data-page="takeaway"] .takeaway-start-form {
    margin: 0;
    padding: 14px;
    border: 1px solid rgba(var(--primary-rgb), .10);
    border-radius: 12px;
    background: rgba(255,255,255,.78);
    box-shadow: inset 0 1px 0 #fff;
}

body[data-page="takeaway"] .takeaway-form-grid {
    display: grid;
    grid-template-columns: 1.25fr .8fr 1fr;
    gap: 10px;
}

body[data-page="takeaway"] .takeaway-form-grid label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 6px;
    color: #654339;
    font-size: .68rem;
    font-weight: 850;
}

body[data-page="takeaway"] .takeaway-form-grid label::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--primary);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), .09);
}

body[data-page="takeaway"] .takeaway-form-grid select,
body[data-page="takeaway"] .takeaway-form-grid input {
    width: 100%;
    min-height: 41px;
    padding: 8px 10px;
    border: 1px solid #e0d5d0;
    border-radius: 10px;
    color: #3a3035;
    background: linear-gradient(180deg, #fff, #fbfaf8);
    font: inherit;
    font-size: .71rem;
    box-shadow:
        inset 0 1px 2px rgba(45,37,41,.035),
        0 3px 8px rgba(45,37,41,.025);
}

body[data-page="takeaway"] .takeaway-form-grid select:focus,
body[data-page="takeaway"] .takeaway-form-grid input:focus {
    outline: none;
    border-color: rgba(var(--primary-rgb), .55);
    box-shadow:
        0 0 0 4px rgba(var(--primary-rgb), .09),
        0 7px 16px rgba(var(--primary-rgb), .07);
}

body[data-page="takeaway"] .takeaway-start-form > button,
body[data-page="takeaway"] .takeaway-action-row button {
    display: inline-flex;
    width: 100%;
    min-height: 42px;
    align-items: center;
    justify-content: center;
    margin-top: 12px;
    padding: 8px 13px;
    border: 1px solid var(--primary);
    border-radius: 10px;
    color: #fff;
    background:
        linear-gradient(145deg, var(--primary), var(--primary-dark));
    box-shadow:
        0 9px 20px rgba(var(--primary-rgb), .22),
        inset 0 1px 0 rgba(255,255,255,.17);
    font: inherit;
    font-size: .72rem;
    font-weight: 900;
    cursor: pointer;
}

/* ---------- Info grids ---------- */
body[data-page="takeaway"] .attendance-info-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
    margin-top: 11px;
}

body[data-page="takeaway"] .attendance-info-grid > div {
    min-width: 0;
    padding: 9px 10px;
    border: 1px solid #e8ddd9;
    border-radius: 10px;
    background:
        linear-gradient(145deg, rgba(255,255,255,.94), rgba(251,248,246,.94));
}

body[data-page="takeaway"] .attendance-info-grid span {
    display: block;
    color: var(--text-muted);
    font-size: .60rem;
}

body[data-page="takeaway"] .attendance-info-grid strong {
    display: block;
    margin-top: 3px;
    color: #3f3439;
    font-size: .69rem;
    overflow-wrap: anywhere;
}

/* ---------- Item cards ---------- */
body[data-page="takeaway"] .takeaway-list {
    display: grid;
    gap: 10px;
}

body[data-page="takeaway"] .takeaway-item-card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 15px 16px 14px 19px;
    border: 1px solid rgba(var(--plum-rgb), .14);
    border-radius: 14px;
    background:
        radial-gradient(circle at 100% 0%, rgba(var(--plum-rgb), .08), transparent 150px),
        linear-gradient(145deg, #ffffff, #fcf8fa);
    box-shadow:
        0 8px 20px rgba(45,37,41,.05),
        inset 0 1px 0 #fff;
}

body[data-page="takeaway"] .takeaway-item-card::before {
    content: "";
    position: absolute;
    inset: 11px auto 11px 0;
    width: 5px;
    border-radius: 99px;
    background:
        linear-gradient(180deg, var(--plum), var(--primary));
    box-shadow: 7px 0 18px rgba(var(--plum-rgb), .10);
}

body[data-page="takeaway"] .takeaway-item-top h4 {
    margin: 0;
    color: #5b213f;
    font-size: .9rem;
    font-weight: 850;
}

body[data-page="takeaway"] .takeaway-item-top p {
    margin: 3px 0 0;
    color: var(--text-muted);
    font-size: .63rem;
}

/* ---------- Action rows ---------- */
body[data-page="takeaway"] .takeaway-action-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    margin-top: 12px;
}

body[data-page="takeaway"] .takeaway-action-row form,
body[data-page="takeaway"] .takeaway-end-form,
body[data-page="takeaway"] .takeaway-admin-end-form {
    margin: 0;
}

body[data-page="takeaway"] .takeaway-action-row button {
    margin-top: 0;
    min-height: 38px;
}

body[data-page="takeaway"] .danger-btn {
    display: inline-flex;
    width: 100%;
    min-height: 40px;
    align-items: center;
    justify-content: center;
    margin-top: 12px;
    padding: 8px 12px;
    border: 1px solid var(--danger) !important;
    border-radius: 10px;
    color: #fff !important;
    background:
        linear-gradient(145deg, var(--danger), var(--danger-dark)) !important;
    box-shadow:
        0 9px 20px rgba(var(--danger-rgb), .22),
        inset 0 1px 0 rgba(255,255,255,.17);
    font: inherit;
    font-size: .7rem;
    font-weight: 900;
    cursor: pointer;
}

body[data-page="takeaway"] .takeaway-action-row .danger-btn {
    margin-top: 0;
}

/* ---------- Empty state ---------- */
body[data-page="takeaway"] .empty-state-card {
    display: grid;
    min-height: 105px;
    place-items: center;
    padding: 18px;
    border: 1px dashed rgba(var(--primary-rgb), .22);
    border-radius: 11px;
    color: var(--text-muted);
    background: rgba(var(--primary-rgb), .035);
    font-size: .74rem;
    text-align: center;
}

/* ---------- Bottom nav ---------- */
body[data-page="takeaway"] .bottom-nav {
    position: fixed;
    z-index: 1000;
    right: 50%;
    bottom: max(10px, env(safe-area-inset-bottom));
    display: grid;
    grid-template-columns: repeat(3, minmax(82px, 1fr));
    width: min(calc(100% - 24px), 460px);
    padding: 5px;
    border: 1px solid rgba(220,210,206,.92);
    border-radius: 15px;
    background: rgba(255,255,255,.94);
    box-shadow:
        0 12px 32px rgba(45,37,41,.15),
        inset 0 1px 0 rgba(255,255,255,.95);
    backdrop-filter: blur(14px);
    transform: translateX(50%);
}

body[data-page="takeaway"] .bottom-nav a {
    display: flex;
    min-height: 38px;
    align-items: center;
    justify-content: center;
    padding: 6px 9px;
    border-radius: 10px;
    color: var(--text-soft);
    font-size: .72rem;
    font-weight: 800;
    text-align: center;
    text-decoration: none;
}

body[data-page="takeaway"] .bottom-nav a:hover {
    color: var(--primary-dark);
    background: rgba(var(--primary-rgb), .07);
}

body[data-page="takeaway"] .bottom-nav a.active {
    color: #fff;
    background:
        linear-gradient(145deg, var(--primary), var(--plum));
    box-shadow:
        0 5px 13px rgba(var(--primary-rgb), .22),
        inset 0 1px 0 rgba(255,255,255,.14);
}

/* ---------- Mobile ---------- */
@media (max-width: 700px) {
    body[data-page="takeaway"] .container.page-with-nav {
        width: min(100% - 18px, 640px);
        padding: 9px 0 82px;
    }

    body[data-page="takeaway"] .takeaway-hero {
        grid-template-columns: 1fr;
        align-items: stretch;
        gap: 12px;
        min-height: 0;
        padding: 18px 15px;
        border-radius: 15px;
    }

    body[data-page="takeaway"] .takeaway-hero::before {
        top: 60px;
        font-size: 3.9rem;
    }

    body[data-page="takeaway"] .takeaway-hero h1 {
        font-size: 1.42rem;
    }

    body[data-page="takeaway"] .takeaway-hero-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        padding: 8px;
        gap: 6px;
    }

    body[data-page="takeaway"] .header-action-btn {
        min-height: 34px;
        font-size: .63rem;
    }

    body[data-page="takeaway"] .takeaway-main-card,
    body[data-page="takeaway"] .takeaway-section-card {
        margin-top: 10px;
        padding: 13px;
        border-radius: 13px;
    }

    body[data-page="takeaway"] .takeaway-form-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 7px;
    }

    body[data-page="takeaway"] .takeaway-form-grid > div:first-child {
        grid-column: 1 / -1;
    }

    body[data-page="takeaway"] .attendance-info-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 5px;
    }

    body[data-page="takeaway"] .takeaway-item-card,
    body[data-page="takeaway"] .takeaway-active-panel {
        padding: 12px 12px 11px 15px;
        border-radius: 12px;
    }

    body[data-page="takeaway"] .bottom-nav {
        bottom: max(7px, env(safe-area-inset-bottom));
        width: calc(100% - 18px);
        max-width: 430px;
        padding: 4px;
        border-radius: 14px;
    }

    body[data-page="takeaway"] .bottom-nav a {
        min-height: 36px;
        padding: 5px;
        font-size: .68rem;
    }
}

@media (max-width: 390px) {
    body[data-page="takeaway"] .takeaway-form-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body[data-page="takeaway"] .takeaway-active-top,
    body[data-page="takeaway"] .takeaway-item-top {
        align-items: stretch;
        flex-direction: column;
    }

    body[data-page="takeaway"] .takeaway-status-pill {
        align-self: flex-start;
    }

    body[data-page="takeaway"] .takeaway-action-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (prefers-reduced-motion: reduce) {
    body[data-page="takeaway"] *,
    body[data-page="takeaway"] *::before,
    body[data-page="takeaway"] *::after {
        animation: none !important;
        transition: none !important;
    }
}

body[data-page="takeaway"] .takeaway-hero-actions .header-action-btn:only-child {
    grid-column: 1 / -1;
    width: 100%;
}
/* =========================================================
   PRMS Takeaway Records — Premium Indigo & Brick UI
   Page scope: body[data-page="takeaway-records"]
   Palette: indigo + brick red + warm gold
   ========================================================= */

body[data-page="takeaway-records"] {
    --page-bg: #f4f1ef;
    --surface: #ffffff;
    --surface-soft: #faf7f5;
    --text: #252534;
    --text-soft: #666174;
    --text-muted: #8c8795;
    --line: #e3dcd8;

    --primary: #4338ca;
    --primary-dark: #312e81;
    --primary-rgb: 67, 56, 202;

    --brick: #b4533c;
    --brick-dark: #7f2f24;
    --brick-rgb: 180, 83, 60;

    --gold: #c89a45;
    --gold-dark: #7c5718;
    --gold-light: #f2d89d;

    --success: #15803d;
    --danger: #b91c1c;

    margin: 0;
    color: var(--text);
    background:
        radial-gradient(circle at 100% 0%, rgba(var(--primary-rgb), .08), transparent 30rem),
        radial-gradient(circle at 0% 100%, rgba(var(--brick-rgb), .05), transparent 26rem),
        var(--page-bg);
    font-family: Inter, "Segoe UI", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

body[data-page="takeaway-records"] *,
body[data-page="takeaway-records"] *::before,
body[data-page="takeaway-records"] *::after {
    box-sizing: border-box;
}

body[data-page="takeaway-records"] a,
body[data-page="takeaway-records"] button,
body[data-page="takeaway-records"] input,
body[data-page="takeaway-records"] select {
    -webkit-tap-highlight-color: transparent;
}

body[data-page="takeaway-records"] .container.page-with-nav {
    width: min(100% - 32px, 1180px);
    margin: 0 auto;
    padding: 18px 4px 92px;
}

/* ---------- Hero ---------- */
body[data-page="takeaway-records"] .takeaway-hero {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 18px;
    min-height: 182px;
    padding: 26px 24px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.20);
    border-radius: 18px;
    color: #fff;
    background:
        radial-gradient(circle at 12% 8%, rgba(255,255,255,.16), transparent 24%),
        radial-gradient(circle at 88% 112%, rgba(255,255,255,.10), transparent 38%),
        linear-gradient(118deg, rgba(255,255,255,.05), transparent 42%),
        linear-gradient(135deg, #1e1b4b 0%, #4338ca 48%, #7f2f24 100%);
    box-shadow:
        0 20px 46px rgba(49,46,129,.24),
        inset 0 1px 0 rgba(255,255,255,.13),
        inset 0 -1px 0 rgba(30,27,75,.24);
}

body[data-page="takeaway-records"] .takeaway-hero::before {
    content: "RECORDS";
    position: absolute;
    z-index: -1;
    left: 24px;
    top: 56px;
    color: rgba(255,255,255,.04);
    font-size: clamp(3.8rem, 8vw, 6.8rem);
    font-weight: 950;
    letter-spacing: -.08em;
    line-height: .8;
    pointer-events: none;
}

body[data-page="takeaway-records"] .takeaway-hero::after {
    content: "";
    position: absolute;
    right: -74px;
    top: -90px;
    width: 252px;
    height: 252px;
    border: 36px solid rgba(255,255,255,.035);
    border-radius: 50%;
    box-shadow:
        0 0 0 1px rgba(255,255,255,.05),
        0 0 78px rgba(242,216,157,.13);
}

body[data-page="takeaway-records"] .takeaway-hero > div:first-child {
    position: relative;
    z-index: 2;
    min-width: 0;
}

body[data-page="takeaway-records"] .page-subtitle {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 27px;
    margin: 0 0 8px;
    padding: 4px 10px;
    border: 1px solid rgba(242,216,157,.24);
    border-radius: 999px;
    color: #ffedc3;
    background: rgba(242,216,157,.10);
    font-size: .62rem;
    font-weight: 900;
    letter-spacing: .11em;
    text-transform: uppercase;
}

body[data-page="takeaway-records"] .page-subtitle::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--gold-light);
    box-shadow:
        0 0 0 4px rgba(242,216,157,.12),
        0 0 14px rgba(242,216,157,.35);
}

body[data-page="takeaway-records"] .takeaway-hero h1 {
    margin: 0;
    color: #fff;
    font-size: clamp(1.55rem, 2.8vw, 2.35rem);
    font-weight: 850;
    line-height: 1.2;
    letter-spacing: -.026em;
    text-shadow: 0 3px 18px rgba(30,27,75,.28);
}

body[data-page="takeaway-records"] .user-inline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 9px;
    color: rgba(255,255,255,.76);
    font-size: .72rem;
}

body[data-page="takeaway-records"] .role-badge {
    display: inline-flex;
    min-height: 25px;
    align-items: center;
    padding: 3px 9px;
    border: 1px solid rgba(255,255,255,.20);
    border-radius: 999px;
    color: #fff;
    background: rgba(255,255,255,.10);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.15),
        0 4px 10px rgba(30,27,75,.12);
    font-size: .65rem;
    font-weight: 850;
}

body[data-page="takeaway-records"] .takeaway-hero-actions {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(2, minmax(120px, 1fr));
    gap: 8px;
    padding: 11px;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 12px;
    background:
        linear-gradient(145deg, rgba(255,255,255,.13), rgba(255,255,255,.055));
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.12),
        0 14px 28px rgba(30,27,75,.16);
    backdrop-filter: blur(12px);
}

body[data-page="takeaway-records"] .header-action-btn {
    display: inline-flex;
    min-height: 39px;
    align-items: center;
    justify-content: center;
    padding: 7px 12px;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 11px;
    color: #fff;
    background:
        linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.08));
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.14),
        0 7px 16px rgba(30,27,75,.12);
    font-size: .68rem;
    font-weight: 850;
    text-align: center;
    text-decoration: none;
}

body[data-page="takeaway-records"] .takeaway-hero-actions .header-action-btn:first-child {
    border-color: var(--gold-light);
    color: #2f2411;
    background:
        linear-gradient(145deg, var(--gold-light), var(--gold));
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.55),
        0 9px 20px rgba(124,87,24,.24);
}

/* ---------- Alerts ---------- */
body[data-page="takeaway-records"] .alert {
    margin-top: 12px;
    padding: 11px 13px;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: #fff;
    box-shadow: 0 7px 16px rgba(37,37,52,.045);
    font-size: .72rem;
}

/* ---------- Section cards ---------- */
body[data-page="takeaway-records"] .takeaway-section-card {
    position: relative;
    overflow: hidden;
    margin-top: 14px;
    padding: 18px;
    border: 1px solid rgba(var(--primary-rgb), .16);
    border-radius: 16px;
    background:
        radial-gradient(circle at 100% 0%, rgba(var(--primary-rgb), .07), transparent 190px),
        linear-gradient(145deg, #ffffff, #faf7f5);
    box-shadow:
        0 12px 28px rgba(37,37,52,.07),
        inset 0 1px 0 #fff;
}

body[data-page="takeaway-records"] .takeaway-section-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 5px;
    background:
        linear-gradient(180deg, var(--primary), var(--brick));
}

body[data-page="takeaway-records"] .section-title-row {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
    padding: 12px 13px;
    border: 1px solid rgba(var(--primary-rgb), .12);
    border-radius: 12px;
    background:
        linear-gradient(145deg, rgba(255,255,255,.95), rgba(var(--primary-rgb), .045));
}

body[data-page="takeaway-records"] .section-title-row h3 {
    margin: 0;
    color: #353281;
    font-size: 1rem;
    letter-spacing: -.015em;
}

body[data-page="takeaway-records"] .section-count {
    display: inline-flex;
    min-height: 28px;
    align-items: center;
    padding: 4px 9px;
    border: 1px solid rgba(var(--brick-rgb), .18);
    border-radius: 999px;
    color: var(--brick-dark);
    background: rgba(var(--brick-rgb), .07);
    font-size: .67rem;
    font-weight: 850;
}

/* ---------- Filter form ---------- */
body[data-page="takeaway-records"] .form-box {
    margin: 0;
    padding: 14px;
    border: 1px solid rgba(var(--primary-rgb), .10);
    border-radius: 12px;
    background: rgba(255,255,255,.80);
    box-shadow: inset 0 1px 0 #fff;
}

body[data-page="takeaway-records"] .takeaway-form-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

body[data-page="takeaway-records"] .takeaway-form-grid label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 6px;
    color: #5a5670;
    font-size: .68rem;
    font-weight: 850;
}

body[data-page="takeaway-records"] .takeaway-form-grid label::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--primary);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), .09);
}

body[data-page="takeaway-records"] .takeaway-form-grid input,
body[data-page="takeaway-records"] .takeaway-form-grid select {
    width: 100%;
    min-height: 41px;
    padding: 8px 10px;
    border: 1px solid #ddd7d2;
    border-radius: 10px;
    color: #35323f;
    background: linear-gradient(180deg, #fff, #fbfaf8);
    font: inherit;
    font-size: .71rem;
    box-shadow:
        inset 0 1px 2px rgba(37,37,52,.035),
        0 3px 8px rgba(37,37,52,.025);
}

body[data-page="takeaway-records"] .takeaway-form-grid input:focus,
body[data-page="takeaway-records"] .takeaway-form-grid select:focus {
    outline: none;
    border-color: rgba(var(--primary-rgb), .55);
    box-shadow:
        0 0 0 4px rgba(var(--primary-rgb), .09),
        0 7px 16px rgba(var(--primary-rgb), .07);
}

body[data-page="takeaway-records"] .takeaway-action-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 12px;
}

body[data-page="takeaway-records"] .takeaway-action-row button,
body[data-page="takeaway-records"] .takeaway-action-row .header-action-btn {
    display: inline-flex;
    width: 100%;
    min-height: 40px;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 8px 12px;
    border: 1px solid var(--primary);
    border-radius: 10px;
    color: #fff;
    background:
        linear-gradient(145deg, var(--primary), var(--primary-dark));
    box-shadow:
        0 8px 18px rgba(var(--primary-rgb), .20),
        inset 0 1px 0 rgba(255,255,255,.16);
    font: inherit;
    font-size: .69rem;
    font-weight: 900;
    text-decoration: none;
    cursor: pointer;
}

body[data-page="takeaway-records"] .takeaway-action-row .header-action-btn {
    border-color: var(--brick);
    background:
        linear-gradient(145deg, var(--brick), var(--brick-dark));
    box-shadow:
        0 8px 18px rgba(var(--brick-rgb), .20),
        inset 0 1px 0 rgba(255,255,255,.16);
}

/* ---------- Record list ---------- */
body[data-page="takeaway-records"] .takeaway-list {
    display: grid;
    gap: 10px;
}

body[data-page="takeaway-records"] .takeaway-item-card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 15px 16px 14px 19px;
    border: 1px solid rgba(var(--brick-rgb), .14);
    border-radius: 14px;
    background:
        radial-gradient(circle at 100% 0%, rgba(var(--brick-rgb), .08), transparent 150px),
        linear-gradient(145deg, #ffffff, #fcf8f7);
    box-shadow:
        0 8px 20px rgba(37,37,52,.05),
        inset 0 1px 0 #fff;
}

body[data-page="takeaway-records"] .takeaway-item-card::before {
    content: "";
    position: absolute;
    inset: 11px auto 11px 0;
    width: 5px;
    border-radius: 99px;
    background:
        linear-gradient(180deg, var(--primary), var(--brick));
    box-shadow: 7px 0 18px rgba(var(--brick-rgb), .10);
}

body[data-page="takeaway-records"] .takeaway-item-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

body[data-page="takeaway-records"] .takeaway-item-top h4 {
    margin: 0;
    color: #353281;
    font-size: .9rem;
    font-weight: 850;
}

body[data-page="takeaway-records"] .takeaway-item-top p {
    margin: 3px 0 0;
    color: var(--text-muted);
    font-size: .63rem;
}

body[data-page="takeaway-records"] .takeaway-status-pill {
    display: inline-flex;
    flex: 0 0 auto;
    min-height: 29px;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    color: #fff;
    background:
        linear-gradient(145deg, var(--brick), var(--brick-dark));
    box-shadow:
        0 6px 14px rgba(var(--brick-rgb), .20),
        inset 0 1px 0 rgba(255,255,255,.16);
    font-size: .65rem;
    font-weight: 900;
}

/* ---------- Details grid ---------- */
body[data-page="takeaway-records"] .attendance-info-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 7px;
    margin-top: 11px;
}

body[data-page="takeaway-records"] .attendance-info-grid > div {
    min-width: 0;
    padding: 9px 10px;
    border: 1px solid #e5ded9;
    border-radius: 10px;
    background:
        linear-gradient(145deg, rgba(255,255,255,.94), rgba(250,247,245,.94));
}

body[data-page="takeaway-records"] .attendance-info-grid span {
    display: block;
    color: var(--text-muted);
    font-size: .60rem;
}

body[data-page="takeaway-records"] .attendance-info-grid strong {
    display: block;
    margin-top: 3px;
    color: #393643;
    font-size: .68rem;
    overflow-wrap: anywhere;
}

/* ---------- Pagination ---------- */
body[data-page="takeaway-records"] .pagination-row {
    display: grid;
    grid-template-columns: minmax(110px, auto) minmax(0, 1fr) minmax(110px, auto);
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    padding: 10px;
    border: 1px solid rgba(var(--primary-rgb), .10);
    border-radius: 12px;
    background: rgba(255,255,255,.76);
}

body[data-page="takeaway-records"] .pagination-row .header-action-btn {
    color: #fff;
    border-color: var(--primary);
    background:
        linear-gradient(145deg, var(--primary), var(--primary-dark));
}

body[data-page="takeaway-records"] .pagination-row .section-count {
    justify-content: center;
}

/* ---------- Empty ---------- */
body[data-page="takeaway-records"] .empty-state-card {
    display: grid;
    min-height: 105px;
    place-items: center;
    padding: 18px;
    border: 1px dashed rgba(var(--primary-rgb), .22);
    border-radius: 11px;
    color: var(--text-muted);
    background: rgba(var(--primary-rgb), .035);
    font-size: .74rem;
    text-align: center;
}

/* ---------- Bottom nav ---------- */
body[data-page="takeaway-records"] .bottom-nav {
    position: fixed;
    z-index: 1000;
    right: 50%;
    bottom: max(10px, env(safe-area-inset-bottom));
    display: grid;
    grid-template-columns: repeat(3, minmax(82px, 1fr));
    width: min(calc(100% - 24px), 460px);
    padding: 5px;
    border: 1px solid rgba(216,209,221,.92);
    border-radius: 15px;
    background: rgba(255,255,255,.94);
    box-shadow:
        0 12px 32px rgba(37,37,52,.15),
        inset 0 1px 0 rgba(255,255,255,.95);
    backdrop-filter: blur(14px);
    transform: translateX(50%);
}

body[data-page="takeaway-records"] .bottom-nav a {
    display: flex;
    min-height: 38px;
    align-items: center;
    justify-content: center;
    padding: 6px 9px;
    border-radius: 10px;
    color: var(--text-soft);
    font-size: .72rem;
    font-weight: 800;
    text-align: center;
    text-decoration: none;
}

body[data-page="takeaway-records"] .bottom-nav a.active {
    color: #fff;
    background:
        linear-gradient(145deg, var(--primary), var(--brick));
    box-shadow:
        0 5px 13px rgba(var(--primary-rgb), .22),
        inset 0 1px 0 rgba(255,255,255,.14);
}

/* ---------- Mobile ---------- */
@media (max-width: 700px) {
    body[data-page="takeaway-records"] .container.page-with-nav {
        width: min(100% - 18px, 640px);
        padding: 9px 0 82px;
    }

    body[data-page="takeaway-records"] .takeaway-hero {
        grid-template-columns: 1fr;
        align-items: stretch;
        gap: 12px;
        min-height: 0;
        padding: 18px 15px;
        border-radius: 15px;
    }

    body[data-page="takeaway-records"] .takeaway-hero::before {
        top: 60px;
        font-size: 3.9rem;
    }

    body[data-page="takeaway-records"] .takeaway-hero h1 {
        font-size: 1.42rem;
    }

    body[data-page="takeaway-records"] .takeaway-hero-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        padding: 8px;
        gap: 6px;
    }

    body[data-page="takeaway-records"] .header-action-btn {
        min-height: 34px;
        font-size: .63rem;
    }

    body[data-page="takeaway-records"] .takeaway-section-card {
        margin-top: 10px;
        padding: 13px;
        border-radius: 13px;
    }

    body[data-page="takeaway-records"] .takeaway-form-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 7px;
    }

    body[data-page="takeaway-records"] .takeaway-form-grid > div:first-child {
        grid-column: 1 / -1;
    }

    body[data-page="takeaway-records"] .attendance-info-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 5px;
    }

    body[data-page="takeaway-records"] .takeaway-item-card {
        padding: 12px 12px 11px 15px;
        border-radius: 12px;
    }

    body[data-page="takeaway-records"] .pagination-row {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    body[data-page="takeaway-records"] .bottom-nav {
        bottom: max(7px, env(safe-area-inset-bottom));
        width: calc(100% - 18px);
        max-width: 430px;
        padding: 4px;
        border-radius: 14px;
    }

    body[data-page="takeaway-records"] .bottom-nav a {
        min-height: 36px;
        padding: 5px;
        font-size: .68rem;
    }
}

@media (max-width: 390px) {
    body[data-page="takeaway-records"] .takeaway-item-top {
        align-items: stretch;
        flex-direction: column;
    }

    body[data-page="takeaway-records"] .takeaway-status-pill {
        align-self: flex-start;
    }

    body[data-page="takeaway-records"] .pagination-row {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    body[data-page="takeaway-records"] *,
    body[data-page="takeaway-records"] *::before,
    body[data-page="takeaway-records"] *::after {
        animation: none !important;
        transition: none !important;
    }
}

/* =========================================================
   PRMS Manual Attendance Entry — Premium Navy & Burgundy UI
   Page scope: body[data-page="manual-attendance-entry"]
   Palette: navy + burgundy + champagne gold
   ========================================================= */

body[data-page="manual-attendance-entry"] {
    --page-bg: #f4f2f1;
    --surface: #ffffff;
    --surface-soft: #faf8f7;
    --text: #252530;
    --text-soft: #666273;
    --text-muted: #8b8794;
    --line: #e3dcda;

    --primary: #1e3a5f;
    --primary-dark: #0f2742;
    --primary-rgb: 30, 58, 95;

    --burgundy: #9f1239;
    --burgundy-dark: #701a2f;
    --burgundy-rgb: 159, 18, 57;

    --gold: #c7953f;
    --gold-dark: #7c5415;
    --gold-light: #f1d89f;

    --success: #15803d;
    --success-dark: #166534;
    --success-rgb: 21, 128, 61;

    --danger: #b91c1c;
    --danger-dark: #7f1d1d;
    --danger-rgb: 185, 28, 28;

    margin: 0;
    color: var(--text);
    background:
        radial-gradient(circle at 100% 0%, rgba(var(--primary-rgb), .08), transparent 30rem),
        radial-gradient(circle at 0% 100%, rgba(var(--burgundy-rgb), .05), transparent 26rem),
        var(--page-bg);
    font-family: Inter, "Segoe UI", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

body[data-page="manual-attendance-entry"] *,
body[data-page="manual-attendance-entry"] *::before,
body[data-page="manual-attendance-entry"] *::after {
    box-sizing: border-box;
}

body[data-page="manual-attendance-entry"] a,
body[data-page="manual-attendance-entry"] button,
body[data-page="manual-attendance-entry"] input,
body[data-page="manual-attendance-entry"] select,
body[data-page="manual-attendance-entry"] textarea {
    -webkit-tap-highlight-color: transparent;
}

body[data-page="manual-attendance-entry"] .container.page-with-nav {
    width: min(100% - 32px, 1220px);
    margin: 0 auto;
    padding: 18px 4px 92px;
}

/* ---------- Hero ---------- */
body[data-page="manual-attendance-entry"] .workspace-premium-hero {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(230px, .42fr);
    align-items: center;
    gap: 18px;
    min-height: 188px;
    padding: 26px 24px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.20);
    border-radius: 18px;
    color: #fff;
    background:
        radial-gradient(circle at 12% 8%, rgba(255,255,255,.16), transparent 24%),
        radial-gradient(circle at 88% 112%, rgba(255,255,255,.10), transparent 38%),
        linear-gradient(118deg, rgba(255,255,255,.05), transparent 42%),
        linear-gradient(135deg, #0f2742 0%, #1e3a5f 48%, #701a2f 100%);
    box-shadow:
        0 20px 46px rgba(15,39,66,.24),
        inset 0 1px 0 rgba(255,255,255,.13),
        inset 0 -1px 0 rgba(15,39,66,.24);
}

body[data-page="manual-attendance-entry"] .workspace-premium-hero::before {
    content: "MANUAL";
    position: absolute;
    z-index: -1;
    left: 104px;
    top: 58px;
    color: rgba(255,255,255,.04);
    font-size: clamp(4rem, 8vw, 7rem);
    font-weight: 950;
    letter-spacing: -.08em;
    line-height: .8;
}

body[data-page="manual-attendance-entry"] .workspace-premium-hero::after {
    content: "";
    position: absolute;
    right: -74px;
    top: -90px;
    width: 252px;
    height: 252px;
    border: 36px solid rgba(255,255,255,.035);
    border-radius: 50%;
    box-shadow:
        0 0 0 1px rgba(255,255,255,.05),
        0 0 78px rgba(241,216,159,.13);
}

body[data-page="manual-attendance-entry"] .workspace-premium-hero-main {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 17px;
    min-width: 0;
}

body[data-page="manual-attendance-entry"] .workspace-premium-icon {
    display: grid;
    flex: 0 0 68px;
    width: 68px;
    height: 68px;
    place-items: center;
    border: 1px solid rgba(255,255,255,.24);
    border-radius: 20px;
    color: #fff1c7;
    background:
        linear-gradient(145deg, rgba(255,255,255,.20), rgba(255,255,255,.07));
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.20),
        0 13px 28px rgba(15,39,66,.24);
    font-size: 1rem;
    font-weight: 950;
}

body[data-page="manual-attendance-entry"] .page-subtitle {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 27px;
    margin: 0 0 8px;
    padding: 4px 10px;
    border: 1px solid rgba(241,216,159,.24);
    border-radius: 999px;
    color: #ffedc3;
    background: rgba(241,216,159,.10);
    font-size: .62rem;
    font-weight: 900;
    letter-spacing: .11em;
    text-transform: uppercase;
}

body[data-page="manual-attendance-entry"] .page-subtitle::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--gold-light);
    box-shadow:
        0 0 0 4px rgba(241,216,159,.12),
        0 0 14px rgba(241,216,159,.35);
}

body[data-page="manual-attendance-entry"] .workspace-premium-hero h1 {
    margin: 0;
    color: #fff;
    font-size: clamp(1.55rem, 2.8vw, 2.35rem);
    font-weight: 850;
    line-height: 1.2;
    letter-spacing: -.026em;
}

body[data-page="manual-attendance-entry"] .workspace-premium-user-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 9px;
    color: rgba(255,255,255,.76);
    font-size: .72rem;
}

body[data-page="manual-attendance-entry"] .role-badge {
    display: inline-flex;
    min-height: 25px;
    align-items: center;
    padding: 3px 9px;
    border: 1px solid rgba(255,255,255,.20);
    border-radius: 999px;
    color: #fff;
    background: rgba(255,255,255,.10);
    font-size: .65rem;
    font-weight: 850;
}

body[data-page="manual-attendance-entry"] .workspace-premium-hero-side {
    position: relative;
    z-index: 2;
    min-width: 0;
    padding: 16px;
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 14px;
    background:
        linear-gradient(145deg, rgba(255,255,255,.14), rgba(255,255,255,.06));
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.13),
        0 14px 28px rgba(15,39,66,.16);
    backdrop-filter: blur(12px);
}

body[data-page="manual-attendance-entry"] .workspace-premium-hero-side span {
    color: #ffe8b8;
    font-size: .62rem;
    font-weight: 850;
}

body[data-page="manual-attendance-entry"] .workspace-premium-hero-side strong {
    display: block;
    margin-top: 5px;
    color: #fff;
    font-size: 1rem;
}

body[data-page="manual-attendance-entry"] .workspace-premium-hero-side p {
    margin: 5px 0 0;
    color: rgba(255,255,255,.70);
    font-size: .67rem;
    line-height: 1.45;
}

/* ---------- Reminder cards ---------- */
body[data-page="manual-attendance-entry"] .workspace-premium-reminder-card {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    margin-top: 12px;
    padding: 13px 14px;
    border: 1px solid rgba(var(--gold-dark), .18);
    border-radius: 13px;
    background:
        linear-gradient(145deg, #fffaf0, #ffffff);
    box-shadow:
        0 8px 18px rgba(124,84,21,.06),
        inset 0 1px 0 #fff;
}

body[data-page="manual-attendance-entry"] .workspace-premium-reminder-icon {
    display: grid;
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    place-items: center;
    border-radius: 10px;
    color: #fff;
    background:
        linear-gradient(145deg, var(--gold), var(--gold-dark));
    box-shadow:
        0 7px 16px rgba(199,149,63,.20),
        inset 0 1px 0 rgba(255,255,255,.16);
    font-weight: 950;
}

body[data-page="manual-attendance-entry"] .workspace-premium-reminder-card h3 {
    margin: 0;
    color: #6f4811;
    font-size: .82rem;
}

body[data-page="manual-attendance-entry"] .workspace-premium-reminder-card p {
    margin: 4px 0 0;
    color: #856c48;
    font-size: .68rem;
    line-height: 1.48;
}

/* ---------- Sections ---------- */
body[data-page="manual-attendance-entry"] .workspace-premium-section {
    position: relative;
    overflow: hidden;
    margin-top: 14px;
    padding: 18px;
    border: 1px solid rgba(var(--primary-rgb), .16);
    border-radius: 16px;
    background:
        radial-gradient(circle at 100% 0%, rgba(var(--primary-rgb), .07), transparent 190px),
        linear-gradient(145deg, #ffffff, #faf8f7);
    box-shadow:
        0 12px 28px rgba(37,37,48,.07),
        inset 0 1px 0 #fff;
}

body[data-page="manual-attendance-entry"] .workspace-premium-section::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 5px;
    background:
        linear-gradient(180deg, var(--primary), var(--burgundy));
}

body[data-page="manual-attendance-entry"] .section-title-row {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
    padding: 12px 13px;
    border: 1px solid rgba(var(--primary-rgb), .12);
    border-radius: 12px;
    background:
        linear-gradient(145deg, rgba(255,255,255,.95), rgba(var(--primary-rgb), .045));
}

body[data-page="manual-attendance-entry"] .section-title-row h3 {
    margin: 0;
    color: #263b54;
    font-size: 1rem;
}

body[data-page="manual-attendance-entry"] .section-subtitle {
    margin: 4px 0 0;
    color: var(--text-muted);
    font-size: .69rem;
}

/* ---------- Summary cards / forms ---------- */
body[data-page="manual-attendance-entry"] .workspace-premium-summary-card {
    padding: 15px;
    border: 1px solid rgba(var(--primary-rgb), .11);
    border-radius: 13px;
    background: rgba(255,255,255,.82);
    box-shadow: inset 0 1px 0 #fff;
}

body[data-page="manual-attendance-entry"] .settlement-pro-input-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

body[data-page="manual-attendance-entry"] .settlement-pro-input-grid > div {
    min-width: 0;
    padding: 10px;
    border: 1px solid #e1d9d7;
    border-radius: 10px;
    background: linear-gradient(145deg, #fff, #fbf9f8);
}

body[data-page="manual-attendance-entry"] label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 6px;
    color: #4d5462;
    font-size: .68rem;
    font-weight: 850;
}

body[data-page="manual-attendance-entry"] label::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--primary);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), .09);
}

body[data-page="manual-attendance-entry"] input,
body[data-page="manual-attendance-entry"] select,
body[data-page="manual-attendance-entry"] textarea {
    width: 100%;
    min-width: 0;
    border: 1px solid #ddd6d4;
    border-radius: 10px;
    color: #31333d;
    background: linear-gradient(180deg, #fff, #fbfaf9);
    font: inherit;
    font-size: .70rem;
    box-shadow:
        inset 0 1px 2px rgba(37,37,48,.035),
        0 3px 8px rgba(37,37,48,.025);
}

body[data-page="manual-attendance-entry"] input,
body[data-page="manual-attendance-entry"] select {
    min-height: 41px;
    padding: 8px 10px;
}

body[data-page="manual-attendance-entry"] textarea {
    min-height: 96px;
    padding: 10px;
    resize: vertical;
}

body[data-page="manual-attendance-entry"] input:focus,
body[data-page="manual-attendance-entry"] select:focus,
body[data-page="manual-attendance-entry"] textarea:focus {
    outline: none;
    border-color: rgba(var(--primary-rgb), .55);
    box-shadow:
        0 0 0 4px rgba(var(--primary-rgb), .09),
        0 7px 16px rgba(var(--primary-rgb), .07);
}

body[data-page="manual-attendance-entry"] input[readonly],
body[data-page="manual-attendance-entry"] select:disabled,
body[data-page="manual-attendance-entry"] button:disabled {
    opacity: .66;
    cursor: not-allowed;
}

body[data-page="manual-attendance-entry"] .settlement-pro-input-grid p {
    margin: 5px 0 0;
    color: var(--text-muted);
    font-size: .60rem;
    line-height: 1.4;
}

/* ---------- Record lists ---------- */
body[data-page="manual-attendance-entry"] .workspace-record-list {
    display: grid;
    gap: 10px;
}

body[data-page="manual-attendance-entry"] .workspace-premium-attendance-item {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 15px 16px 14px 19px;
    border: 1px solid rgba(var(--burgundy-rgb), .14);
    border-radius: 14px;
    background:
        radial-gradient(circle at 100% 0%, rgba(var(--burgundy-rgb), .08), transparent 150px),
        linear-gradient(145deg, #ffffff, #fcf8fa);
    box-shadow:
        0 8px 20px rgba(37,37,48,.05),
        inset 0 1px 0 #fff;
}

body[data-page="manual-attendance-entry"] .workspace-premium-attendance-item::before {
    content: "";
    position: absolute;
    inset: 11px auto 11px 0;
    width: 5px;
    border-radius: 99px;
    background:
        linear-gradient(180deg, var(--primary), var(--burgundy));
}

body[data-page="manual-attendance-entry"] .attendance-top-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

body[data-page="manual-attendance-entry"] .attendance-top-row h4 {
    margin: 0;
    color: #263b54;
    font-size: .88rem;
}

body[data-page="manual-attendance-entry"] .attendance-top-row p {
    margin: 3px 0 0;
    color: var(--text-muted);
    font-size: .62rem;
}

body[data-page="manual-attendance-entry"] .session-pill {
    display: inline-flex;
    flex: 0 0 auto;
    min-height: 28px;
    align-items: center;
    padding: 4px 9px;
    border-radius: 999px;
    color: #fff;
    background:
        linear-gradient(145deg, var(--burgundy), var(--burgundy-dark));
    font-size: .64rem;
    font-weight: 850;
}

body[data-page="manual-attendance-entry"] .attendance-note {
    margin-top: 10px;
    padding: 9px 10px;
    border: 1px solid #e7dddf;
    border-radius: 9px;
    color: var(--text-soft);
    background: rgba(255,255,255,.75);
    font-size: .66rem;
}

body[data-page="manual-attendance-entry"] .attendance-info-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 7px;
    margin-top: 11px;
}

body[data-page="manual-attendance-entry"] .attendance-info-grid > div {
    min-width: 0;
    padding: 9px 10px;
    border: 1px solid #e2dcda;
    border-radius: 10px;
    background: linear-gradient(145deg, #fff, #faf8f7);
}

body[data-page="manual-attendance-entry"] .attendance-info-grid span {
    display: block;
    color: var(--text-muted);
    font-size: .60rem;
}

body[data-page="manual-attendance-entry"] .attendance-info-grid strong {
    display: block;
    margin-top: 3px;
    color: #363640;
    font-size: .68rem;
    overflow-wrap: anywhere;
}

/* ---------- Action rows ---------- */
body[data-page="manual-attendance-entry"] .workspace-premium-link-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

body[data-page="manual-attendance-entry"] .btn.primary,
body[data-page="manual-attendance-entry"] .workspace-card-link {
    display: inline-flex;
    width: 100%;
    min-height: 40px;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
    border: 1px solid var(--primary);
    border-radius: 10px;
    color: #fff;
    background:
        linear-gradient(145deg, var(--primary), var(--primary-dark));
    box-shadow:
        0 8px 18px rgba(var(--primary-rgb), .20),
        inset 0 1px 0 rgba(255,255,255,.16);
    font: inherit;
    font-size: .69rem;
    font-weight: 900;
    text-decoration: none;
    cursor: pointer;
}

body[data-page="manual-attendance-entry"] .workspace-card-link {
    border-color: var(--burgundy);
    background:
        linear-gradient(145deg, var(--burgundy), var(--burgundy-dark));
    box-shadow:
        0 8px 18px rgba(var(--burgundy-rgb), .20),
        inset 0 1px 0 rgba(255,255,255,.16);
}

/* ---------- Empty state ---------- */
body[data-page="manual-attendance-entry"] .empty-state-card {
    display: grid;
    min-height: 105px;
    place-items: center;
    padding: 18px;
    border: 1px dashed rgba(var(--primary-rgb), .22);
    border-radius: 11px;
    color: var(--text-muted);
    background: rgba(var(--primary-rgb), .035);
    font-size: .74rem;
    text-align: center;
}

/* ---------- Bottom nav ---------- */
body[data-page="manual-attendance-entry"] .bottom-nav {
    position: fixed;
    z-index: 1000;
    right: 50%;
    bottom: max(10px, env(safe-area-inset-bottom));
    display: grid;
    grid-template-columns: repeat(3, minmax(82px, 1fr));
    width: min(calc(100% - 24px), 460px);
    padding: 5px;
    border: 1px solid rgba(216,209,213,.92);
    border-radius: 15px;
    background: rgba(255,255,255,.94);
    box-shadow:
        0 12px 32px rgba(37,37,48,.15),
        inset 0 1px 0 rgba(255,255,255,.95);
    backdrop-filter: blur(14px);
    transform: translateX(50%);
}

body[data-page="manual-attendance-entry"] .bottom-nav a {
    display: flex;
    min-height: 38px;
    align-items: center;
    justify-content: center;
    padding: 6px 9px;
    border-radius: 10px;
    color: var(--text-soft);
    font-size: .72rem;
    font-weight: 800;
    text-align: center;
    text-decoration: none;
}

body[data-page="manual-attendance-entry"] .bottom-nav a.active {
    color: #fff;
    background:
        linear-gradient(145deg, var(--primary), var(--burgundy));
    box-shadow:
        0 5px 13px rgba(var(--primary-rgb), .22),
        inset 0 1px 0 rgba(255,255,255,.14);
}

/* ---------- Mobile ---------- */
@media (max-width: 700px) {
    body[data-page="manual-attendance-entry"] .container.page-with-nav {
        width: min(100% - 18px, 640px);
        padding: 9px 0 82px;
    }

    body[data-page="manual-attendance-entry"] .workspace-premium-hero {
        grid-template-columns: 1fr;
        gap: 12px;
        min-height: 0;
        padding: 18px 15px;
        border-radius: 15px;
    }

    body[data-page="manual-attendance-entry"] .workspace-premium-hero::before {
        left: 68px;
        top: 52px;
        font-size: 4rem;
    }

    body[data-page="manual-attendance-entry"] .workspace-premium-icon {
        flex-basis: 50px;
        width: 50px;
        height: 50px;
        border-radius: 15px;
        font-size: .76rem;
    }

    body[data-page="manual-attendance-entry"] .workspace-premium-hero h1 {
        font-size: 1.42rem;
    }

    body[data-page="manual-attendance-entry"] .workspace-premium-section {
        margin-top: 10px;
        padding: 13px;
        border-radius: 13px;
    }

    body[data-page="manual-attendance-entry"] .workspace-premium-summary-card {
        padding: 11px;
    }

    body[data-page="manual-attendance-entry"] .settlement-pro-input-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 7px;
    }

    body[data-page="manual-attendance-entry"] .attendance-info-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 5px;
    }

    body[data-page="manual-attendance-entry"] .workspace-premium-attendance-item {
        padding: 12px 12px 11px 15px;
        border-radius: 12px;
    }

    body[data-page="manual-attendance-entry"] .workspace-premium-link-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body[data-page="manual-attendance-entry"] .bottom-nav {
        bottom: max(7px, env(safe-area-inset-bottom));
        width: calc(100% - 18px);
        max-width: 430px;
        padding: 4px;
        border-radius: 14px;
    }

    body[data-page="manual-attendance-entry"] .bottom-nav a {
        min-height: 36px;
        padding: 5px;
        font-size: .68rem;
    }
}

@media (max-width: 390px) {
    body[data-page="manual-attendance-entry"] .settlement-pro-input-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 5px;
    }

    body[data-page="manual-attendance-entry"] .settlement-pro-input-grid > div {
        padding: 8px;
    }

    body[data-page="manual-attendance-entry"] .attendance-top-row {
        align-items: stretch;
        flex-direction: column;
    }

    body[data-page="manual-attendance-entry"] .session-pill {
        align-self: flex-start;
    }
}

@media (prefers-reduced-motion: reduce) {
    body[data-page="manual-attendance-entry"] *,
    body[data-page="manual-attendance-entry"] *::before,
    body[data-page="manual-attendance-entry"] *::after {
        animation: none !important;
        transition: none !important;
    }
}
/* =========================================================
   PRMS Salary Management — Premium Midnight & Garnet UI
   Page scope: body[data-page="salary-management"]
   Palette: midnight blue + garnet + champagne gold
   ========================================================= */

body[data-page="salary-management"] {
    --page-bg: #f3f1f3;
    --surface: #ffffff;
    --surface-soft: #faf8fa;
    --text: #252432;
    --text-soft: #666273;
    --text-muted: #8d8996;
    --line: #e3dde5;

    --primary: #243b66;
    --primary-dark: #17233d;
    --primary-rgb: 36, 59, 102;

    --garnet: #8f1747;
    --garnet-dark: #5f0d2d;
    --garnet-rgb: 143, 23, 71;

    --gold: #c69a4a;
    --gold-dark: #7d581d;
    --gold-light: #f1d9a2;

    --success: #15803d;
    --success-dark: #166534;
    --success-rgb: 21, 128, 61;

    --danger: #b91c1c;
    --danger-dark: #7f1d1d;
    --danger-rgb: 185, 28, 28;

    margin: 0;
    color: var(--text);
    background:
        radial-gradient(circle at 100% 0%, rgba(var(--primary-rgb), .085), transparent 30rem),
        radial-gradient(circle at 0% 100%, rgba(var(--garnet-rgb), .05), transparent 26rem),
        var(--page-bg);
    font-family: Inter, "Segoe UI", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

body[data-page="salary-management"] *,
body[data-page="salary-management"] *::before,
body[data-page="salary-management"] *::after {
    box-sizing: border-box;
}

body[data-page="salary-management"] a,
body[data-page="salary-management"] button,
body[data-page="salary-management"] input,
body[data-page="salary-management"] select {
    -webkit-tap-highlight-color: transparent;
}

body[data-page="salary-management"] .container.page-with-nav {
    width: min(100% - 32px, 1220px);
    margin: 0 auto;
    padding: 18px 4px 92px;
}

/* ---------- Hero ---------- */
body[data-page="salary-management"] .salary-management-hero {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 18px;
    min-height: 184px;
    padding: 26px 24px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.20);
    border-radius: 18px;
    color: #fff;
    background:
        radial-gradient(circle at 12% 8%, rgba(255,255,255,.17), transparent 24%),
        radial-gradient(circle at 88% 112%, rgba(255,255,255,.10), transparent 38%),
        linear-gradient(118deg, rgba(255,255,255,.05), transparent 42%),
        linear-gradient(135deg, #17233d 0%, #243b66 48%, #6f1238 100%);
    box-shadow:
        0 20px 46px rgba(23,35,61,.25),
        inset 0 1px 0 rgba(255,255,255,.13),
        inset 0 -1px 0 rgba(23,35,61,.24);
}

body[data-page="salary-management"] .salary-management-hero::before {
    content: "SALARY";
    position: absolute;
    z-index: -1;
    left: 24px;
    top: 56px;
    color: rgba(255,255,255,.04);
    font-size: clamp(4rem, 8vw, 7rem);
    font-weight: 950;
    letter-spacing: -.08em;
    line-height: .8;
    pointer-events: none;
}

body[data-page="salary-management"] .salary-management-hero::after {
    content: "";
    position: absolute;
    right: -74px;
    top: -90px;
    width: 252px;
    height: 252px;
    border: 36px solid rgba(255,255,255,.035);
    border-radius: 50%;
    box-shadow:
        0 0 0 1px rgba(255,255,255,.05),
        0 0 78px rgba(241,217,162,.13);
}

body[data-page="salary-management"] .salary-management-hero > div:first-child {
    position: relative;
    z-index: 2;
    min-width: 0;
}

body[data-page="salary-management"] .page-subtitle {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 27px;
    margin: 0 0 8px;
    padding: 4px 10px;
    border: 1px solid rgba(241,217,162,.24);
    border-radius: 999px;
    color: #ffedc4;
    background: rgba(241,217,162,.10);
    font-size: .62rem;
    font-weight: 900;
    letter-spacing: .11em;
    text-transform: uppercase;
}

body[data-page="salary-management"] .page-subtitle::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--gold-light);
    box-shadow:
        0 0 0 4px rgba(241,217,162,.12),
        0 0 14px rgba(241,217,162,.35);
}

body[data-page="salary-management"] .salary-management-hero h1 {
    margin: 0;
    color: #fff;
    font-size: clamp(1.55rem, 2.8vw, 2.35rem);
    font-weight: 850;
    line-height: 1.2;
    letter-spacing: -.026em;
    text-shadow: 0 3px 18px rgba(23,35,61,.28);
}

body[data-page="salary-management"] .user-inline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 9px;
    color: rgba(255,255,255,.76);
    font-size: .72rem;
}

body[data-page="salary-management"] .role-badge {
    display: inline-flex;
    min-height: 25px;
    align-items: center;
    padding: 3px 9px;
    border: 1px solid rgba(255,255,255,.20);
    border-radius: 999px;
    color: #fff;
    background: rgba(255,255,255,.10);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.14),
        0 4px 10px rgba(23,35,61,.12);
    font-size: .65rem;
    font-weight: 850;
}

body[data-page="salary-management"] .salary-management-actions {
    position: relative;
    z-index: 2;
    min-width: 160px;
    padding: 10px;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 12px;
    background:
        linear-gradient(145deg, rgba(255,255,255,.13), rgba(255,255,255,.055));
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.12),
        0 14px 28px rgba(23,35,61,.16);
    backdrop-filter: blur(12px);
}

body[data-page="salary-management"] .header-action-btn {
    display: inline-flex;
    width: 100%;
    min-height: 39px;
    align-items: center;
    justify-content: center;
    padding: 7px 12px;
    border: 1px solid var(--gold-light);
    border-radius: 11px;
    color: #2f2412;
    background:
        linear-gradient(145deg, var(--gold-light), var(--gold));
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.55),
        0 9px 20px rgba(125,88,29,.24);
    font-size: .68rem;
    font-weight: 850;
    text-align: center;
    text-decoration: none;
}

/* ---------- Alerts ---------- */
body[data-page="salary-management"] .alert {
    margin-top: 12px;
    padding: 11px 13px;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: #fff;
    box-shadow: 0 7px 16px rgba(37,36,50,.045);
    font-size: .72rem;
}

body[data-page="salary-management"] .alert.success {
    color: #166534;
    border-color: rgba(var(--success-rgb), .22);
    background: #f0fdf4;
}

body[data-page="salary-management"] .alert.error,
body[data-page="salary-management"] .alert.danger {
    color: #991b1b;
    border-color: rgba(var(--danger-rgb), .22);
    background: #fef2f2;
}

/* ---------- Search / tool cards ---------- */
body[data-page="salary-management"] .salary-search-card,
body[data-page="salary-management"] .salary-request-section {
    position: relative;
    overflow: hidden;
    margin-top: 14px;
    padding: 18px;
    border: 1px solid rgba(var(--primary-rgb), .15);
    border-radius: 16px;
    background:
        radial-gradient(circle at 100% 0%, rgba(var(--primary-rgb), .07), transparent 190px),
        linear-gradient(145deg, #ffffff, #faf8fa);
    box-shadow:
        0 12px 28px rgba(37,36,50,.07),
        inset 0 1px 0 #fff;
}

body[data-page="salary-management"] .salary-search-card::before,
body[data-page="salary-management"] .salary-request-section::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 5px;
    background:
        linear-gradient(180deg, var(--primary), var(--garnet));
}

body[data-page="salary-management"] .section-title-row {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
    padding: 12px 13px;
    border: 1px solid rgba(var(--primary-rgb), .11);
    border-radius: 12px;
    background:
        linear-gradient(145deg, rgba(255,255,255,.96), rgba(var(--primary-rgb), .04));
}

body[data-page="salary-management"] .section-title-row h3 {
    margin: 0;
    color: #273854;
    font-size: 1rem;
    letter-spacing: -.015em;
}

body[data-page="salary-management"] .section-subtitle {
    margin: 4px 0 0;
    color: var(--text-muted);
    font-size: .69rem;
    line-height: 1.45;
}

body[data-page="salary-management"] .section-count {
    display: inline-flex;
    flex: 0 0 auto;
    min-height: 28px;
    align-items: center;
    padding: 4px 9px;
    border: 1px solid rgba(var(--garnet-rgb), .18);
    border-radius: 999px;
    color: var(--garnet-dark);
    background: rgba(var(--garnet-rgb), .07);
    font-size: .67rem;
    font-weight: 850;
}

/* ---------- Forms ---------- */
body[data-page="salary-management"] .salary-search-form {
    margin: 0;
    padding: 14px;
    border: 1px solid rgba(var(--primary-rgb), .10);
    border-radius: 12px;
    background: rgba(255,255,255,.80);
    box-shadow: inset 0 1px 0 #fff;
}

body[data-page="salary-management"] .salary-search-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

body[data-page="salary-management"] .salary-search-grid > div {
    min-width: 0;
}

body[data-page="salary-management"] .salary-search-grid label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 6px;
    color: #4d5667;
    font-size: .68rem;
    font-weight: 850;
}

body[data-page="salary-management"] .salary-search-grid label::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--primary);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), .09);
}

body[data-page="salary-management"] .salary-search-grid input,
body[data-page="salary-management"] .salary-search-grid select {
    width: 100%;
    min-height: 41px;
    padding: 8px 10px;
    border: 1px solid #ddd6de;
    border-radius: 10px;
    color: #343441;
    background: linear-gradient(180deg, #fff, #fbfafb);
    font: inherit;
    font-size: .71rem;
    box-shadow:
        inset 0 1px 2px rgba(37,36,50,.035),
        0 3px 8px rgba(37,36,50,.025);
}

body[data-page="salary-management"] .salary-search-grid input:focus,
body[data-page="salary-management"] .salary-search-grid select:focus {
    outline: none;
    border-color: rgba(var(--primary-rgb), .55);
    box-shadow:
        0 0 0 4px rgba(var(--primary-rgb), .09),
        0 7px 16px rgba(var(--primary-rgb), .07);
}

body[data-page="salary-management"] .salary-search-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 12px;
}

body[data-page="salary-management"] .salary-search-actions button,
body[data-page="salary-management"] .clear-filter-btn {
    display: inline-flex;
    width: 100%;
    min-height: 40px;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
    border: 1px solid var(--primary);
    border-radius: 10px;
    color: #fff;
    background:
        linear-gradient(145deg, var(--primary), var(--primary-dark));
    box-shadow:
        0 8px 18px rgba(var(--primary-rgb), .20),
        inset 0 1px 0 rgba(255,255,255,.16);
    font: inherit;
    font-size: .69rem;
    font-weight: 900;
    text-decoration: none;
    cursor: pointer;
}

body[data-page="salary-management"] .clear-filter-btn {
    border-color: var(--garnet);
    background:
        linear-gradient(145deg, var(--garnet), var(--garnet-dark));
    box-shadow:
        0 8px 18px rgba(var(--garnet-rgb), .20),
        inset 0 1px 0 rgba(255,255,255,.16);
}

body[data-page="salary-management"] .salary-search-actions:has(> button:only-child) {
    grid-template-columns: 1fr;
}

/* ---------- Request grid ---------- */
body[data-page="salary-management"] .salary-request-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 11px;
}

body[data-page="salary-management"] .salary-request-card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 16px 16px 14px 19px;
    border: 1px solid rgba(var(--garnet-rgb), .14);
    border-radius: 15px;
    background:
        radial-gradient(circle at 100% 0%, rgba(var(--garnet-rgb), .08), transparent 150px),
        linear-gradient(145deg, #ffffff, #fcf8fa);
    box-shadow:
        0 9px 22px rgba(37,36,50,.055),
        inset 0 1px 0 #fff;
}

body[data-page="salary-management"] .salary-request-card::before {
    content: "";
    position: absolute;
    inset: 11px auto 11px 0;
    width: 5px;
    border-radius: 99px;
    background:
        linear-gradient(180deg, var(--primary), var(--garnet));
}

body[data-page="salary-management"] .salary-request-card::after {
    content: "";
    position: absolute;
    z-index: -1;
    right: -52px;
    bottom: -66px;
    width: 160px;
    height: 160px;
    border: 24px solid rgba(var(--garnet-rgb), .035);
    border-radius: 50%;
}

body[data-page="salary-management"] .salary-request-card.salary-request-pending {
    border-color: rgba(var(--gold), .32);
    background:
        radial-gradient(circle at 100% 0%, rgba(241,217,162,.22), transparent 155px),
        linear-gradient(145deg, #fffdf7, #fff8eb);
}

body[data-page="salary-management"] .salary-request-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

body[data-page="salary-management"] .salary-request-top h3 {
    margin: 0;
    color: #273854;
    font-size: .92rem;
    font-weight: 850;
}

body[data-page="salary-management"] .salary-request-top p {
    margin: 3px 0 0;
    color: var(--text-muted);
    font-size: .63rem;
}

body[data-page="salary-management"] .salary-status-pill {
    display: inline-flex;
    flex: 0 0 auto;
    min-height: 29px;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    color: #fff;
    background:
        linear-gradient(145deg, var(--garnet), var(--garnet-dark));
    box-shadow:
        0 6px 14px rgba(var(--garnet-rgb), .20),
        inset 0 1px 0 rgba(255,255,255,.16);
    font-size: .65rem;
    font-weight: 900;
}

body[data-page="salary-management"] .salary-status-pill.salary-status-pending {
    color: #3c2a0b;
    background:
        linear-gradient(145deg, var(--gold-light), var(--gold));
    box-shadow:
        0 6px 14px rgba(198,154,74,.22),
        inset 0 1px 0 rgba(255,255,255,.42);
}

body[data-page="salary-management"] .salary-amount-box {
    margin-top: 12px;
    padding: 14px;
    border: 1px solid rgba(var(--gold), .28);
    border-radius: 12px;
    background:
        radial-gradient(circle at 100% 0%, rgba(241,217,162,.24), transparent 120px),
        linear-gradient(145deg, #fffdf7, #f8ecd2);
    box-shadow:
        inset 0 1px 0 #fff,
        0 7px 17px rgba(125,88,29,.07);
}

body[data-page="salary-management"] .salary-amount-box span {
    display: block;
    color: #806735;
    font-size: .61rem;
    font-weight: 800;
}

body[data-page="salary-management"] .salary-amount-box strong {
    display: block;
    margin-top: 4px;
    color: #5d3d0b;
    font-size: 1.35rem;
    font-weight: 950;
    letter-spacing: -.035em;
    font-variant-numeric: tabular-nums;
}

/* ---------- Info grid ---------- */
body[data-page="salary-management"] .attendance-info-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    margin-top: 11px;
}

body[data-page="salary-management"] .attendance-info-grid > div {
    min-width: 0;
    padding: 9px 10px;
    border: 1px solid #e3dde3;
    border-radius: 10px;
    background:
        linear-gradient(145deg, rgba(255,255,255,.95), rgba(250,248,250,.94));
}

body[data-page="salary-management"] .attendance-info-grid span {
    display: block;
    color: var(--text-muted);
    font-size: .60rem;
}

body[data-page="salary-management"] .attendance-info-grid strong {
    display: block;
    margin-top: 3px;
    color: #393744;
    font-size: .68rem;
    overflow-wrap: anywhere;
}

/* ---------- Approve / reject ---------- */
body[data-page="salary-management"] .salary-action-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    margin-top: 12px;
    padding-top: 11px;
    border-top: 1px dashed #ddd5dd;
}

body[data-page="salary-management"] .salary-action-row form {
    margin: 0;
}

body[data-page="salary-management"] .salary-action-row button {
    display: inline-flex;
    width: 100%;
    min-height: 39px;
    align-items: center;
    justify-content: center;
    padding: 8px 11px;
    border: 1px solid var(--success);
    border-radius: 10px;
    color: #fff;
    background:
        linear-gradient(145deg, var(--success), var(--success-dark));
    box-shadow:
        0 8px 18px rgba(var(--success-rgb), .20),
        inset 0 1px 0 rgba(255,255,255,.16);
    font: inherit;
    font-size: .68rem;
    font-weight: 900;
    cursor: pointer;
}

body[data-page="salary-management"] .salary-action-row .danger-btn {
    border-color: var(--danger);
    background:
        linear-gradient(145deg, var(--danger), var(--danger-dark));
    box-shadow:
        0 8px 18px rgba(var(--danger-rgb), .20),
        inset 0 1px 0 rgba(255,255,255,.16);
}

/* ---------- Pagination ---------- */
body[data-page="salary-management"] .pagination-bar {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    margin-top: 14px;
}

body[data-page="salary-management"] .pagination-bar a,
body[data-page="salary-management"] .pagination-bar span {
    display: inline-flex;
    min-width: 34px;
    min-height: 34px;
    align-items: center;
    justify-content: center;
    padding: 5px 9px;
    border: 1px solid #ddd6df;
    border-radius: 9px;
    color: #4d5569;
    background: #fff;
    font-size: .67rem;
    font-weight: 800;
    text-decoration: none;
}

body[data-page="salary-management"] .pagination-bar a.active {
    color: #fff;
    border-color: var(--primary);
    background:
        linear-gradient(145deg, var(--primary), var(--primary-dark));
    box-shadow:
        0 6px 14px rgba(var(--primary-rgb), .18);
}

/* ---------- Empty state ---------- */
body[data-page="salary-management"] .empty-state-card {
    display: grid;
    min-height: 92px;
    place-items: center;
    padding: 16px;
    border: 1px dashed rgba(var(--primary-rgb), .22);
    border-radius: 11px;
    color: var(--text-muted);
    background: rgba(var(--primary-rgb), .035);
    font-size: .72rem;
    text-align: center;
}

/* ---------- Bottom nav ---------- */
body[data-page="salary-management"] .bottom-nav {
    position: fixed;
    z-index: 1000;
    right: 50%;
    bottom: max(10px, env(safe-area-inset-bottom));
    display: grid;
    grid-template-columns: repeat(3, minmax(82px, 1fr));
    width: min(calc(100% - 24px), 460px);
    padding: 5px;
    border: 1px solid rgba(216,209,219,.92);
    border-radius: 15px;
    background: rgba(255,255,255,.94);
    box-shadow:
        0 12px 32px rgba(37,36,50,.15),
        inset 0 1px 0 rgba(255,255,255,.95);
    backdrop-filter: blur(14px);
    transform: translateX(50%);
}

body[data-page="salary-management"] .bottom-nav a {
    display: flex;
    min-height: 38px;
    align-items: center;
    justify-content: center;
    padding: 6px 9px;
    border-radius: 10px;
    color: var(--text-soft);
    font-size: .72rem;
    font-weight: 800;
    text-align: center;
    text-decoration: none;
}

body[data-page="salary-management"] .bottom-nav a.active {
    color: #fff;
    background:
        linear-gradient(145deg, var(--primary), var(--garnet));
    box-shadow:
        0 5px 13px rgba(var(--primary-rgb), .22),
        inset 0 1px 0 rgba(255,255,255,.14);
}

/* ---------- Mobile ---------- */
@media (max-width: 700px) {
    body[data-page="salary-management"] .container.page-with-nav {
        width: min(100% - 18px, 640px);
        padding: 9px 0 82px;
    }

    body[data-page="salary-management"] .salary-management-hero {
        grid-template-columns: 1fr;
        align-items: stretch;
        gap: 12px;
        min-height: 0;
        padding: 18px 15px;
        border-radius: 15px;
    }

    body[data-page="salary-management"] .salary-management-hero::before {
        top: 58px;
        font-size: 4rem;
    }

    body[data-page="salary-management"] .salary-management-hero h1 {
        font-size: 1.42rem;
    }

    body[data-page="salary-management"] .salary-management-actions {
        min-width: 0;
        width: 100%;
        padding: 8px;
    }

    body[data-page="salary-management"] .salary-search-card,
    body[data-page="salary-management"] .salary-request-section {
        margin-top: 10px;
        padding: 13px;
        border-radius: 13px;
    }

    body[data-page="salary-management"] .salary-search-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 7px;
    }

    body[data-page="salary-management"] .salary-search-grid > div:first-child {
        grid-column: 1 / -1;
    }

    body[data-page="salary-management"] .salary-request-grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    body[data-page="salary-management"] .salary-request-card {
        padding: 12px 12px 11px 15px;
        border-radius: 12px;
    }

    body[data-page="salary-management"] .attendance-info-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 5px;
    }

    body[data-page="salary-management"] .bottom-nav {
        bottom: max(7px, env(safe-area-inset-bottom));
        width: calc(100% - 18px);
        max-width: 430px;
        padding: 4px;
        border-radius: 14px;
    }

    body[data-page="salary-management"] .bottom-nav a {
        min-height: 36px;
        padding: 5px;
        font-size: .68rem;
    }
}

@media (max-width: 390px) {
    body[data-page="salary-management"] .salary-request-top {
        align-items: stretch;
        flex-direction: column;
    }

    body[data-page="salary-management"] .salary-status-pill {
        align-self: flex-start;
    }

    body[data-page="salary-management"] .salary-search-actions,
    body[data-page="salary-management"] .salary-action-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (prefers-reduced-motion: reduce) {
    body[data-page="salary-management"] *,
    body[data-page="salary-management"] *::before,
    body[data-page="salary-management"] *::after {
        animation: none !important;
        transition: none !important;
    }
}
/* =========================================================
   PRMS Status Applications Management
   Premium Aubergine & Champagne UI
   Page scope: body[data-page="status-applications-management"]
   ========================================================= */

body[data-page="status-applications-management"] {
    --page-bg: #f5f2f4;
    --surface: #ffffff;
    --surface-soft: #fbf8fa;
    --text: #2b2630;
    --text-soft: #6e6574;
    --text-muted: #918793;
    --line: #e5dde4;

    --primary: #4b2e5f;
    --primary-dark: #2f183d;
    --primary-rgb: 75, 46, 95;

    --garnet: #8f1d46;
    --garnet-dark: #5d0f2b;
    --garnet-rgb: 143, 29, 70;

    --gold: #c79a48;
    --gold-dark: #7b571c;
    --gold-light: #f1d9a2;

    --success: #15803d;
    --success-dark: #166534;
    --success-rgb: 21, 128, 61;

    --warning: #d97706;
    --warning-dark: #92400e;
    --warning-rgb: 217, 119, 6;

    --danger: #b91c1c;
    --danger-dark: #7f1d1d;
    --danger-rgb: 185, 28, 28;

    margin: 0;
    color: var(--text);
    background:
        radial-gradient(circle at 100% 0%, rgba(var(--primary-rgb), .085), transparent 30rem),
        radial-gradient(circle at 0% 100%, rgba(var(--garnet-rgb), .05), transparent 26rem),
        var(--page-bg);
    font-family: Inter, "Segoe UI", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

body[data-page="status-applications-management"] *,
body[data-page="status-applications-management"] *::before,
body[data-page="status-applications-management"] *::after {
    box-sizing: border-box;
}

body[data-page="status-applications-management"] a,
body[data-page="status-applications-management"] button,
body[data-page="status-applications-management"] input,
body[data-page="status-applications-management"] select {
    -webkit-tap-highlight-color: transparent;
}

body[data-page="status-applications-management"] .container.page-with-nav {
    width: min(100% - 32px, 1220px);
    margin: 0 auto;
    padding: 18px 4px 92px;
}

/* ---------- Hero ---------- */
body[data-page="status-applications-management"] .status-management-hero {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 18px;
    min-height: 184px;
    padding: 26px 24px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.20);
    border-radius: 18px;
    color: #fff;
    background:
        radial-gradient(circle at 12% 8%, rgba(255,255,255,.17), transparent 24%),
        radial-gradient(circle at 88% 112%, rgba(255,255,255,.10), transparent 38%),
        linear-gradient(118deg, rgba(255,255,255,.05), transparent 42%),
        linear-gradient(135deg, #2f183d 0%, #4b2e5f 50%, #78163d 100%);
    box-shadow:
        0 20px 46px rgba(47,24,61,.25),
        inset 0 1px 0 rgba(255,255,255,.13),
        inset 0 -1px 0 rgba(47,24,61,.24);
}

body[data-page="status-applications-management"] .status-management-hero::before {
    content: "STATUS";
    position: absolute;
    z-index: -1;
    left: 24px;
    top: 56px;
    color: rgba(255,255,255,.04);
    font-size: clamp(4rem, 8vw, 7rem);
    font-weight: 950;
    letter-spacing: -.08em;
    line-height: .8;
    pointer-events: none;
}

body[data-page="status-applications-management"] .status-management-hero::after {
    content: "";
    position: absolute;
    right: -74px;
    top: -90px;
    width: 252px;
    height: 252px;
    border: 36px solid rgba(255,255,255,.035);
    border-radius: 50%;
    box-shadow:
        0 0 0 1px rgba(255,255,255,.05),
        0 0 78px rgba(241,217,162,.13);
}

body[data-page="status-applications-management"] .status-management-hero > div:first-child {
    position: relative;
    z-index: 2;
    min-width: 0;
}

body[data-page="status-applications-management"] .page-subtitle {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 27px;
    margin: 0 0 8px;
    padding: 4px 10px;
    border: 1px solid rgba(241,217,162,.24);
    border-radius: 999px;
    color: #ffedc4;
    background: rgba(241,217,162,.10);
    font-size: .62rem;
    font-weight: 900;
    letter-spacing: .11em;
    text-transform: uppercase;
}

body[data-page="status-applications-management"] .page-subtitle::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--gold-light);
    box-shadow:
        0 0 0 4px rgba(241,217,162,.12),
        0 0 14px rgba(241,217,162,.35);
}

body[data-page="status-applications-management"] .status-management-hero h1 {
    margin: 0;
    color: #fff;
    font-size: clamp(1.55rem, 2.8vw, 2.35rem);
    font-weight: 850;
    line-height: 1.2;
    letter-spacing: -.026em;
    text-shadow: 0 3px 18px rgba(47,24,61,.28);
}

body[data-page="status-applications-management"] .user-inline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 9px;
    color: rgba(255,255,255,.76);
    font-size: .72rem;
}

body[data-page="status-applications-management"] .role-badge {
    display: inline-flex;
    min-height: 25px;
    align-items: center;
    padding: 3px 9px;
    border: 1px solid rgba(255,255,255,.20);
    border-radius: 999px;
    color: #fff;
    background: rgba(255,255,255,.10);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.14),
        0 4px 10px rgba(47,24,61,.12);
    font-size: .65rem;
    font-weight: 850;
}

body[data-page="status-applications-management"] .status-management-actions {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(2, minmax(130px, 1fr));
    gap: 8px;
    padding: 11px;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 12px;
    background:
        linear-gradient(145deg, rgba(255,255,255,.13), rgba(255,255,255,.055));
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.12),
        0 14px 28px rgba(47,24,61,.16);
    backdrop-filter: blur(12px);
}

body[data-page="status-applications-management"] .header-action-btn {
    display: inline-flex;
    min-height: 39px;
    align-items: center;
    justify-content: center;
    padding: 7px 12px;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 11px;
    color: #fff;
    background:
        linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.08));
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.14),
        0 7px 16px rgba(47,24,61,.12);
    font-size: .68rem;
    font-weight: 850;
    text-align: center;
    text-decoration: none;
}

body[data-page="status-applications-management"] .status-management-actions .header-action-btn:first-child {
    border-color: var(--gold-light);
    color: #2f2412;
    background:
        linear-gradient(145deg, var(--gold-light), var(--gold));
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.55),
        0 9px 20px rgba(123,87,28,.24);
}

/* ---------- Alerts ---------- */
body[data-page="status-applications-management"] .alert {
    margin-top: 12px;
    padding: 11px 13px;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: #fff;
    box-shadow: 0 7px 16px rgba(43,38,48,.045);
    font-size: .72rem;
}

body[data-page="status-applications-management"] .alert.success {
    color: #166534;
    border-color: rgba(var(--success-rgb), .22);
    background: #f0fdf4;
}

body[data-page="status-applications-management"] .alert.error,
body[data-page="status-applications-management"] .alert.danger {
    color: #991b1b;
    border-color: rgba(var(--danger-rgb), .22);
    background: #fef2f2;
}

/* ---------- Search card ---------- */
body[data-page="status-applications-management"] .status-search-card,
body[data-page="status-applications-management"] .status-application-section,
body[data-page="status-applications-management"] .applications-pagination-card {
    position: relative;
    overflow: hidden;
    margin-top: 14px;
    padding: 18px;
    border: 1px solid rgba(var(--primary-rgb), .15);
    border-radius: 16px;
    background:
        radial-gradient(circle at 100% 0%, rgba(var(--primary-rgb), .07), transparent 190px),
        linear-gradient(145deg, #ffffff, #faf8fa);
    box-shadow:
        0 12px 28px rgba(43,38,48,.07),
        inset 0 1px 0 #fff;
}

body[data-page="status-applications-management"] .status-search-card::before,
body[data-page="status-applications-management"] .status-application-section::before,
body[data-page="status-applications-management"] .applications-pagination-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 5px;
    background:
        linear-gradient(180deg, var(--primary), var(--garnet));
}

body[data-page="status-applications-management"] .section-title-row {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
    padding: 12px 13px;
    border: 1px solid rgba(var(--primary-rgb), .11);
    border-radius: 12px;
    background:
        linear-gradient(145deg, rgba(255,255,255,.96), rgba(var(--primary-rgb), .04));
}

body[data-page="status-applications-management"] .section-title-row h3 {
    margin: 0;
    color: #44284f;
    font-size: 1rem;
    letter-spacing: -.015em;
}

body[data-page="status-applications-management"] .section-subtitle {
    margin: 4px 0 0;
    color: var(--text-muted);
    font-size: .69rem;
    line-height: 1.45;
}

body[data-page="status-applications-management"] .section-count {
    display: inline-flex;
    flex: 0 0 auto;
    min-height: 28px;
    align-items: center;
    padding: 4px 9px;
    border: 1px solid rgba(var(--garnet-rgb), .18);
    border-radius: 999px;
    color: var(--garnet-dark);
    background: rgba(var(--garnet-rgb), .07);
    font-size: .67rem;
    font-weight: 850;
}

/* ---------- Search form ---------- */
body[data-page="status-applications-management"] .status-search-form {
    margin: 0;
    padding: 14px;
    border: 1px solid rgba(var(--primary-rgb), .10);
    border-radius: 12px;
    background: rgba(255,255,255,.80);
    box-shadow: inset 0 1px 0 #fff;
}

body[data-page="status-applications-management"] .status-search-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

body[data-page="status-applications-management"] .status-search-grid label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 6px;
    color: #5a5060;
    font-size: .68rem;
    font-weight: 850;
}

body[data-page="status-applications-management"] .status-search-grid label::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--primary);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), .09);
}

body[data-page="status-applications-management"] .status-search-grid input,
body[data-page="status-applications-management"] .status-search-grid select {
    width: 100%;
    min-height: 41px;
    padding: 8px 10px;
    border: 1px solid #ddd6df;
    border-radius: 10px;
    color: #35313a;
    background: linear-gradient(180deg, #fff, #fbfafb);
    font: inherit;
    font-size: .71rem;
    box-shadow:
        inset 0 1px 2px rgba(43,38,48,.035),
        0 3px 8px rgba(43,38,48,.025);
}

body[data-page="status-applications-management"] .status-search-grid input:focus,
body[data-page="status-applications-management"] .status-search-grid select:focus {
    outline: none;
    border-color: rgba(var(--primary-rgb), .55);
    box-shadow:
        0 0 0 4px rgba(var(--primary-rgb), .09),
        0 7px 16px rgba(var(--primary-rgb), .07);
}

body[data-page="status-applications-management"] .status-search-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 12px;
}

body[data-page="status-applications-management"] .status-search-actions button,
body[data-page="status-applications-management"] .clear-filter-btn {
    display: inline-flex;
    width: 100%;
    min-height: 40px;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
    border: 1px solid var(--primary);
    border-radius: 10px;
    color: #fff;
    background:
        linear-gradient(145deg, var(--primary), var(--primary-dark));
    box-shadow:
        0 8px 18px rgba(var(--primary-rgb), .20),
        inset 0 1px 0 rgba(255,255,255,.16);
    font: inherit;
    font-size: .69rem;
    font-weight: 900;
    text-decoration: none;
    cursor: pointer;
}

body[data-page="status-applications-management"] .clear-filter-btn {
    border-color: var(--garnet);
    background:
        linear-gradient(145deg, var(--garnet), var(--garnet-dark));
    box-shadow:
        0 8px 18px rgba(var(--garnet-rgb), .20),
        inset 0 1px 0 rgba(255,255,255,.16);
}

/* ---------- Quick filters ---------- */
body[data-page="status-applications-management"] .status-quick-filter-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
    margin-top: 12px;
    padding: 11px;
    border: 1px solid rgba(var(--primary-rgb), .10);
    border-radius: 12px;
    background: rgba(255,255,255,.76);
}

body[data-page="status-applications-management"] .status-quick-filter-row > span {
    color: var(--text-muted);
    font-size: .66rem;
    font-weight: 850;
}

body[data-page="status-applications-management"] .status-filter-chip {
    display: inline-flex;
    min-height: 28px;
    align-items: center;
    padding: 4px 9px;
    border: 1px solid rgba(var(--primary-rgb), .15);
    border-radius: 999px;
    color: var(--primary-dark);
    background: rgba(var(--primary-rgb), .06);
    font-size: .64rem;
    font-weight: 850;
    text-decoration: none;
}

body[data-page="status-applications-management"] .status-filter-chip.pending {
    color: #7a4906;
    border-color: rgba(var(--warning-rgb), .20);
    background: rgba(var(--warning-rgb), .08);
}

body[data-page="status-applications-management"] .status-filter-chip.approved {
    color: #166534;
    border-color: rgba(var(--success-rgb), .20);
    background: rgba(var(--success-rgb), .08);
}

body[data-page="status-applications-management"] .status-filter-chip.rejected {
    color: #991b1b;
    border-color: rgba(var(--danger-rgb), .20);
    background: rgba(var(--danger-rgb), .07);
}

/* ---------- Pagination card ---------- */
body[data-page="status-applications-management"] .applications-pagination-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 13px 16px;
}

body[data-page="status-applications-management"] .applications-pagination-card span {
    display: block;
    color: var(--text-muted);
    font-size: .62rem;
}

body[data-page="status-applications-management"] .applications-pagination-card strong {
    display: block;
    margin-top: 3px;
    color: #403449;
    font-size: .78rem;
}

body[data-page="status-applications-management"] .applications-pagination-actions {
    display: flex;
    gap: 7px;
}

body[data-page="status-applications-management"] .applications-pagination-actions a {
    display: inline-flex;
    min-height: 34px;
    align-items: center;
    justify-content: center;
    padding: 6px 11px;
    border: 1px solid var(--primary);
    border-radius: 9px;
    color: #fff;
    background:
        linear-gradient(145deg, var(--primary), var(--primary-dark));
    font-size: .65rem;
    font-weight: 850;
    text-decoration: none;
}

/* ---------- Application cards ---------- */
body[data-page="status-applications-management"] .status-application-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 11px;
}

body[data-page="status-applications-management"] .status-application-card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 16px 16px 14px 19px;
    border: 1px solid rgba(var(--primary-rgb), .14);
    border-radius: 15px;
    background:
        radial-gradient(circle at 100% 0%, rgba(var(--primary-rgb), .07), transparent 150px),
        linear-gradient(145deg, #ffffff, #fbf9fb);
    box-shadow:
        0 9px 22px rgba(43,38,48,.055),
        inset 0 1px 0 #fff;
}

body[data-page="status-applications-management"] .status-application-card::before {
    content: "";
    position: absolute;
    inset: 11px auto 11px 0;
    width: 5px;
    border-radius: 99px;
    background:
        linear-gradient(180deg, var(--primary), var(--garnet));
}

body[data-page="status-applications-management"] .status-application-card.status-card-pending {
    border-color: rgba(var(--warning-rgb), .24);
    background:
        radial-gradient(circle at 100% 0%, rgba(var(--warning-rgb), .11), transparent 150px),
        linear-gradient(145deg, #fffdf8, #fff9ed);
}

body[data-page="status-applications-management"] .status-application-card.status-card-approved {
    border-color: rgba(var(--success-rgb), .20);
    background:
        radial-gradient(circle at 100% 0%, rgba(var(--success-rgb), .08), transparent 150px),
        linear-gradient(145deg, #ffffff, #f6fbf7);
}

body[data-page="status-applications-management"] .status-application-card.status-card-rejected {
    border-color: rgba(var(--danger-rgb), .18);
    background:
        radial-gradient(circle at 100% 0%, rgba(var(--danger-rgb), .07), transparent 150px),
        linear-gradient(145deg, #ffffff, #fdf7f7);
}

body[data-page="status-applications-management"] .status-application-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

body[data-page="status-applications-management"] .status-application-top h3 {
    margin: 0;
    color: #432c4d;
    font-size: .92rem;
    font-weight: 850;
}

body[data-page="status-applications-management"] .status-application-top p {
    margin: 3px 0 0;
    color: var(--text-muted);
    font-size: .63rem;
}

body[data-page="status-applications-management"] .application-status-pill {
    display: inline-flex;
    flex: 0 0 auto;
    min-height: 29px;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    color: #fff;
    background:
        linear-gradient(145deg, var(--primary), var(--primary-dark));
    font-size: .65rem;
    font-weight: 900;
}

body[data-page="status-applications-management"] .application-status-pill.pill-pending {
    color: #3f2b08;
    background:
        linear-gradient(145deg, var(--gold-light), var(--gold));
    box-shadow: 0 6px 14px rgba(199,154,72,.22);
}

body[data-page="status-applications-management"] .application-status-pill.pill-approved {
    background:
        linear-gradient(145deg, var(--success), var(--success-dark));
}

body[data-page="status-applications-management"] .application-status-pill.pill-rejected {
    background:
        linear-gradient(145deg, var(--danger), var(--danger-dark));
}

/* ---------- Info & reason ---------- */
body[data-page="status-applications-management"] .attendance-info-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    margin-top: 11px;
}

body[data-page="status-applications-management"] .attendance-info-grid > div {
    min-width: 0;
    padding: 9px 10px;
    border: 1px solid #e5dfe5;
    border-radius: 10px;
    background:
        linear-gradient(145deg, rgba(255,255,255,.95), rgba(250,248,250,.94));
}

body[data-page="status-applications-management"] .attendance-info-grid span {
    display: block;
    color: var(--text-muted);
    font-size: .60rem;
}

body[data-page="status-applications-management"] .attendance-info-grid strong {
    display: block;
    margin-top: 3px;
    color: #3b3741;
    font-size: .68rem;
    overflow-wrap: anywhere;
}

body[data-page="status-applications-management"] .status-reason-box {
    margin-top: 11px;
    padding: 10px 11px;
    border: 1px solid #e6dfe5;
    border-radius: 10px;
    background: rgba(255,255,255,.76);
}

body[data-page="status-applications-management"] .status-reason-box span {
    display: block;
    color: var(--text-muted);
    font-size: .60rem;
}

body[data-page="status-applications-management"] .status-reason-box p {
    margin: 4px 0 0;
    color: var(--text-soft);
    font-size: .68rem;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

/* ---------- Approve / reject ---------- */
body[data-page="status-applications-management"] .status-application-buttons {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    margin-top: 12px;
    padding-top: 11px;
    border-top: 1px dashed #ddd5dd;
}

body[data-page="status-applications-management"] .status-application-buttons form {
    margin: 0;
}

body[data-page="status-applications-management"] .status-application-buttons button {
    display: inline-flex;
    width: 100%;
    min-height: 39px;
    align-items: center;
    justify-content: center;
    padding: 8px 11px;
    border: 1px solid var(--success);
    border-radius: 10px;
    color: #fff;
    background:
        linear-gradient(145deg, var(--success), var(--success-dark));
    box-shadow:
        0 8px 18px rgba(var(--success-rgb), .20),
        inset 0 1px 0 rgba(255,255,255,.16);
    font: inherit;
    font-size: .68rem;
    font-weight: 900;
    cursor: pointer;
}

body[data-page="status-applications-management"] .status-application-buttons .danger-btn {
    border-color: var(--danger);
    background:
        linear-gradient(145deg, var(--danger), var(--danger-dark));
    box-shadow:
        0 8px 18px rgba(var(--danger-rgb), .20),
        inset 0 1px 0 rgba(255,255,255,.16);
}

/* ---------- Empty ---------- */
body[data-page="status-applications-management"] .empty-state-card {
    display: grid;
    min-height: 96px;
    place-items: center;
    padding: 16px;
    border: 1px dashed rgba(var(--primary-rgb), .22);
    border-radius: 11px;
    color: var(--text-muted);
    background: rgba(var(--primary-rgb), .035);
    font-size: .72rem;
    text-align: center;
}

/* ---------- Bottom nav ---------- */
body[data-page="status-applications-management"] .bottom-nav {
    position: fixed;
    z-index: 1000;
    right: 50%;
    bottom: max(10px, env(safe-area-inset-bottom));
    display: grid;
    grid-template-columns: repeat(3, minmax(82px, 1fr));
    width: min(calc(100% - 24px), 460px);
    padding: 5px;
    border: 1px solid rgba(216,209,219,.92);
    border-radius: 15px;
    background: rgba(255,255,255,.94);
    box-shadow:
        0 12px 32px rgba(43,38,48,.15),
        inset 0 1px 0 rgba(255,255,255,.95);
    backdrop-filter: blur(14px);
    transform: translateX(50%);
}

body[data-page="status-applications-management"] .bottom-nav a {
    display: flex;
    min-height: 38px;
    align-items: center;
    justify-content: center;
    padding: 6px 9px;
    border-radius: 10px;
    color: var(--text-soft);
    font-size: .72rem;
    font-weight: 800;
    text-align: center;
    text-decoration: none;
}

body[data-page="status-applications-management"] .bottom-nav a.active {
    color: #fff;
    background:
        linear-gradient(145deg, var(--primary), var(--garnet));
    box-shadow:
        0 5px 13px rgba(var(--primary-rgb), .22),
        inset 0 1px 0 rgba(255,255,255,.14);
}

/* ---------- Mobile ---------- */
@media (max-width: 700px) {
    body[data-page="status-applications-management"] .container.page-with-nav {
        width: min(100% - 18px, 640px);
        padding: 9px 0 82px;
    }

    body[data-page="status-applications-management"] .status-management-hero {
        grid-template-columns: 1fr;
        align-items: stretch;
        gap: 12px;
        min-height: 0;
        padding: 18px 15px;
        border-radius: 15px;
    }

    body[data-page="status-applications-management"] .status-management-hero::before {
        top: 60px;
        font-size: 4rem;
    }

    body[data-page="status-applications-management"] .status-management-hero h1 {
        font-size: 1.42rem;
    }

    body[data-page="status-applications-management"] .status-management-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        padding: 8px;
        gap: 6px;
    }

    body[data-page="status-applications-management"] .header-action-btn {
        min-height: 34px;
        font-size: .63rem;
    }

    body[data-page="status-applications-management"] .status-search-card,
    body[data-page="status-applications-management"] .status-application-section,
    body[data-page="status-applications-management"] .applications-pagination-card {
        margin-top: 10px;
        padding: 13px;
        border-radius: 13px;
    }

    body[data-page="status-applications-management"] .status-search-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 7px;
    }

    body[data-page="status-applications-management"] .status-search-grid > div:first-child {
        grid-column: 1 / -1;
    }

    body[data-page="status-applications-management"] .status-application-grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    body[data-page="status-applications-management"] .status-application-card {
        padding: 12px 12px 11px 15px;
        border-radius: 12px;
    }

    body[data-page="status-applications-management"] .applications-pagination-card {
        align-items: stretch;
        flex-direction: column;
    }

    body[data-page="status-applications-management"] .applications-pagination-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body[data-page="status-applications-management"] .applications-pagination-actions a {
        width: 100%;
    }

    body[data-page="status-applications-management"] .bottom-nav {
        bottom: max(7px, env(safe-area-inset-bottom));
        width: calc(100% - 18px);
        max-width: 430px;
        padding: 4px;
        border-radius: 14px;
    }

    body[data-page="status-applications-management"] .bottom-nav a {
        min-height: 36px;
        padding: 5px;
        font-size: .68rem;
    }
}

@media (max-width: 390px) {
    body[data-page="status-applications-management"] .status-application-top {
        align-items: stretch;
        flex-direction: column;
    }

    body[data-page="status-applications-management"] .application-status-pill {
        align-self: flex-start;
    }

    body[data-page="status-applications-management"] .status-search-actions,
    body[data-page="status-applications-management"] .status-application-buttons {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (prefers-reduced-motion: reduce) {
    body[data-page="status-applications-management"] *,
    body[data-page="status-applications-management"] *::before,
    body[data-page="status-applications-management"] *::after {
        animation: none !important;
        transition: none !important;
    }
}

/* =========================================================
   PRMS Dashboard — Executive Midnight & Royal Purple UI
   Page scope: body[data-page="dashboard"]
   Palette: midnight charcoal + royal purple + champagne gold
   ========================================================= */

body[data-page="dashboard"] {
    --page-bg: #f4f2f5;
    --surface: #ffffff;
    --surface-soft: #faf8fb;
    --text: #252530;
    --text-soft: #666273;
    --text-muted: #8c8794;
    --line: #e3dde5;

    --primary: #2f365f;
    --primary-dark: #1b203d;
    --primary-rgb: 47, 54, 95;

    --royal: #6d3bb5;
    --royal-dark: #462477;
    --royal-rgb: 109, 59, 181;

    --gold: #c89a45;
    --gold-dark: #7c5718;
    --gold-light: #f2d89d;

    --success: #15803d;
    --success-dark: #166534;
    --success-rgb: 21, 128, 61;

    --warning: #d97706;
    --warning-dark: #92400e;
    --warning-rgb: 217, 119, 6;

    --danger: #b91c1c;
    --danger-dark: #7f1d1d;
    --danger-rgb: 185, 28, 28;

    margin: 0;
    color: var(--text);
    background:
        radial-gradient(circle at 100% 0%, rgba(var(--royal-rgb), .085), transparent 31rem),
        radial-gradient(circle at 0% 100%, rgba(var(--primary-rgb), .055), transparent 27rem),
        var(--page-bg);
    font-family: Inter, "Segoe UI", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

body[data-page="dashboard"] *,
body[data-page="dashboard"] *::before,
body[data-page="dashboard"] *::after {
    box-sizing: border-box;
}

body[data-page="dashboard"] a,
body[data-page="dashboard"] button {
    -webkit-tap-highlight-color: transparent;
}

body[data-page="dashboard"] .container.page-with-nav {
    width: min(100% - 32px, 1240px);
    margin: 0 auto;
    padding: 18px 4px 92px;
}

/* ---------- Language switch ---------- */
body[data-page="dashboard"] .login-language-switch {
    display: inline-grid;
    grid-template-columns: repeat(2, minmax(72px, 1fr));
    gap: 4px;
    margin-bottom: 10px;
    padding: 4px;
    border: 1px solid rgba(var(--primary-rgb), .12);
    border-radius: 12px;
    background: rgba(255,255,255,.86);
    box-shadow:
        0 7px 18px rgba(37,37,48,.05),
        inset 0 1px 0 #fff;
}

body[data-page="dashboard"] .login-language-switch form {
    margin: 0;
}

body[data-page="dashboard"] .login-language-switch button {
    width: 100%;
    min-height: 32px;
    padding: 5px 10px;
    border: 0;
    border-radius: 8px;
    color: var(--text-soft);
    background: transparent;
    font: inherit;
    font-size: .65rem;
    font-weight: 850;
    cursor: pointer;
}

body[data-page="dashboard"] .login-language-switch button.active {
    color: #fff;
    background:
        linear-gradient(145deg, var(--primary), var(--royal));
    box-shadow:
        0 5px 12px rgba(var(--primary-rgb), .18),
        inset 0 1px 0 rgba(255,255,255,.15);
}

/* ---------- Executive hero ---------- */
body[data-page="dashboard"] .dashboard-hero {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 18px;
    min-height: 198px;
    padding: 28px 26px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.20);
    border-radius: 20px;
    color: #fff;
    background:
        radial-gradient(circle at 12% 8%, rgba(255,255,255,.17), transparent 24%),
        radial-gradient(circle at 88% 112%, rgba(255,255,255,.10), transparent 38%),
        linear-gradient(118deg, rgba(255,255,255,.05), transparent 42%),
        linear-gradient(135deg, #171c34 0%, #2f365f 48%, #5f2f92 100%);
    box-shadow:
        0 24px 54px rgba(27,32,61,.27),
        inset 0 1px 0 rgba(255,255,255,.13),
        inset 0 -1px 0 rgba(23,28,52,.24);
}

body[data-page="dashboard"] .dashboard-hero::before {
    content: "DASHBOARD";
    position: absolute;
    z-index: -1;
    left: 24px;
    top: 64px;
    color: rgba(255,255,255,.04);
    font-size: clamp(4.4rem, 8vw, 7.4rem);
    font-weight: 950;
    letter-spacing: -.085em;
    line-height: .8;
    pointer-events: none;
}

body[data-page="dashboard"] .dashboard-hero::after {
    content: "";
    position: absolute;
    right: -86px;
    top: -106px;
    width: 286px;
    height: 286px;
    border: 40px solid rgba(255,255,255,.035);
    border-radius: 50%;
    box-shadow:
        0 0 0 1px rgba(255,255,255,.05),
        0 0 88px rgba(242,216,157,.14);
}

body[data-page="dashboard"] .dashboard-hero > div:first-child {
    position: relative;
    z-index: 2;
    min-width: 0;
}

body[data-page="dashboard"] .page-subtitle {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 28px;
    margin: 0 0 9px;
    padding: 4px 10px;
    border: 1px solid rgba(242,216,157,.24);
    border-radius: 999px;
    color: #ffedc4;
    background: rgba(242,216,157,.10);
    font-size: .62rem;
    font-weight: 900;
    letter-spacing: .11em;
    text-transform: uppercase;
}

body[data-page="dashboard"] .page-subtitle::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--gold-light);
    box-shadow:
        0 0 0 4px rgba(242,216,157,.12),
        0 0 14px rgba(242,216,157,.35);
}

body[data-page="dashboard"] .dashboard-hero h1 {
    margin: 0;
    color: #fff;
    font-size: clamp(1.7rem, 3vw, 2.55rem);
    font-weight: 900;
    line-height: 1.15;
    letter-spacing: -.032em;
    text-shadow: 0 3px 18px rgba(23,28,52,.28);
}

body[data-page="dashboard"] .user-inline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    color: rgba(255,255,255,.76);
    font-size: .72rem;
}

body[data-page="dashboard"] .role-badge {
    display: inline-flex;
    min-height: 25px;
    align-items: center;
    padding: 3px 9px;
    border: 1px solid rgba(255,255,255,.20);
    border-radius: 999px;
    color: #fff;
    background: rgba(255,255,255,.10);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.14),
        0 4px 10px rgba(23,28,52,.12);
    font-size: .65rem;
    font-weight: 850;
}

body[data-page="dashboard"] .dashboard-date-card {
    position: relative;
    z-index: 2;
    min-width: 195px;
    padding: 18px;
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 15px;
    background:
        linear-gradient(145deg, rgba(255,255,255,.15), rgba(255,255,255,.06));
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.13),
        0 16px 30px rgba(23,28,52,.17);
    backdrop-filter: blur(12px);
}

body[data-page="dashboard"] .dashboard-date-card span {
    display: block;
    color: rgba(255,255,255,.65);
    font-size: .62rem;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
}

body[data-page="dashboard"] .dashboard-date-card strong {
    display: block;
    margin-top: 6px;
    color: #fff5d8;
    font-size: 1.05rem;
    font-weight: 900;
}

/* ---------- Top KPI grid ---------- */
body[data-page="dashboard"] .dashboard-overview-grid {
    display: grid;
    gap: 12px;
    margin-top: 14px;
}

body[data-page="dashboard"] .dashboard-overview-grid-four {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

body[data-page="dashboard"] .dashboard-main-stat {
    position: relative;
    isolation: isolate;
    min-height: 168px;
    overflow: hidden;
    padding: 17px;
    border: 1px solid rgba(var(--primary-rgb), .14);
    border-radius: 16px;
    background:
        radial-gradient(circle at 100% 0%, rgba(var(--primary-rgb), .08), transparent 150px),
        linear-gradient(145deg, #ffffff, #faf8fb);
    box-shadow:
        0 11px 26px rgba(37,37,48,.065),
        inset 0 1px 0 #fff;
}

body[data-page="dashboard"] .dashboard-main-stat::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 5px;
    background:
        linear-gradient(90deg, var(--primary), var(--royal));
}

body[data-page="dashboard"] .dashboard-main-stat::after {
    content: "";
    position: absolute;
    z-index: -1;
    right: -44px;
    bottom: -58px;
    width: 150px;
    height: 150px;
    border: 22px solid rgba(var(--primary-rgb), .035);
    border-radius: 50%;
}

body[data-page="dashboard"] .dashboard-main-stat.active-stat {
    border-color: rgba(var(--success-rgb), .18);
    background:
        radial-gradient(circle at 100% 0%, rgba(var(--success-rgb), .10), transparent 150px),
        linear-gradient(145deg, #ffffff, #f6fbf7);
}

body[data-page="dashboard"] .dashboard-main-stat.active-stat::before {
    background:
        linear-gradient(90deg, var(--success), #4ca56b);
}

body[data-page="dashboard"] .dashboard-main-stat.warning-stat {
    border-color: rgba(var(--warning-rgb), .20);
    background:
        radial-gradient(circle at 100% 0%, rgba(var(--warning-rgb), .11), transparent 150px),
        linear-gradient(145deg, #fffdf8, #fff9ed);
}

body[data-page="dashboard"] .dashboard-main-stat.warning-stat::before {
    background:
        linear-gradient(90deg, var(--warning), var(--gold));
}

body[data-page="dashboard"] .summary-label {
    display: inline-flex;
    min-height: 26px;
    align-items: center;
    padding: 3px 9px;
    border: 1px solid rgba(var(--primary-rgb), .14);
    border-radius: 999px;
    color: var(--primary-dark);
    background: rgba(var(--primary-rgb), .055);
    font-size: .62rem;
    font-weight: 850;
}

body[data-page="dashboard"] .dashboard-main-stat h2 {
    margin: 18px 0 8px;
    color: #2d3153;
    font-size: clamp(2.1rem, 4vw, 3.2rem);
    font-weight: 950;
    line-height: .92;
    letter-spacing: -.055em;
    font-variant-numeric: tabular-nums;
}

body[data-page="dashboard"] .dashboard-main-stat.active-stat h2 {
    color: #166534;
}

body[data-page="dashboard"] .dashboard-main-stat.warning-stat h2 {
    color: #92400e;
}

body[data-page="dashboard"] .dashboard-main-stat p {
    margin: 0;
    color: var(--text-muted);
    font-size: .66rem;
    line-height: 1.45;
}

body[data-page="dashboard"] .dashboard-main-stat p strong {
    color: var(--text-soft);
    font-weight: 900;
}

/* ---------- Reminder / maintenance ---------- */
body[data-page="dashboard"] .dashboard-reminder-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    margin-top: 14px;
    padding: 15px 16px;
    border: 1px solid rgba(var(--gold), .24);
    border-radius: 15px;
    background:
        radial-gradient(circle at 100% 0%, rgba(242,216,157,.22), transparent 180px),
        linear-gradient(145deg, #fffdf8, #fff9ed);
    box-shadow:
        0 10px 24px rgba(124,87,24,.07),
        inset 0 1px 0 #fff;
}

body[data-page="dashboard"] .dashboard-reminder-card h3 {
    margin: 0;
    color: #6c4610;
    font-size: .9rem;
}

body[data-page="dashboard"] .dashboard-reminder-card p {
    margin: 4px 0 0;
    color: #856c48;
    font-size: .67rem;
    line-height: 1.45;
}

body[data-page="dashboard"] .dashboard-reminder-card form {
    margin: 0;
}

body[data-page="dashboard"] .dashboard-reminder-card button {
    display: inline-flex;
    min-width: 150px;
    min-height: 39px;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
    border: 1px solid var(--gold);
    border-radius: 10px;
    color: #2f2411;
    background:
        linear-gradient(145deg, var(--gold-light), var(--gold));
    box-shadow:
        0 8px 18px rgba(124,87,24,.20),
        inset 0 1px 0 rgba(255,255,255,.42);
    font: inherit;
    font-size: .68rem;
    font-weight: 900;
    cursor: pointer;
}

body[data-page="dashboard"] .system-maintenance-card {
    border-color: rgba(var(--primary-rgb), .18);
    background:
        radial-gradient(circle at 100% 0%, rgba(var(--royal-rgb), .08), transparent 180px),
        linear-gradient(145deg, #ffffff, #faf8fb);
}

body[data-page="dashboard"] .system-maintenance-card h3 {
    color: #3f3159;
}

body[data-page="dashboard"] .system-maintenance-card p {
    color: var(--text-muted);
}

body[data-page="dashboard"] .maintenance-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(150px, 1fr));
    gap: 8px;
}

body[data-page="dashboard"] .maintenance-actions .btn.secondary {
    color: #fff;
    border-color: var(--primary);
    background:
        linear-gradient(145deg, var(--primary), var(--primary-dark));
    box-shadow:
        0 8px 18px rgba(var(--primary-rgb), .20),
        inset 0 1px 0 rgba(255,255,255,.16);
}

body[data-page="dashboard"] .maintenance-actions .btn.danger {
    color: #fff;
    border-color: var(--danger);
    background:
        linear-gradient(145deg, var(--danger), var(--danger-dark));
    box-shadow:
        0 8px 18px rgba(var(--danger-rgb), .20),
        inset 0 1px 0 rgba(255,255,255,.16);
}

/* ---------- Status section grid ---------- */
body[data-page="dashboard"] .dashboard-section-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 14px;
}

body[data-page="dashboard"] .dashboard-status-card {
    position: relative;
    overflow: hidden;
    padding: 17px;
    border: 1px solid rgba(var(--primary-rgb), .14);
    border-radius: 16px;
    background:
        radial-gradient(circle at 100% 0%, rgba(var(--royal-rgb), .06), transparent 170px),
        linear-gradient(145deg, #ffffff, #faf8fb);
    box-shadow:
        0 10px 24px rgba(37,37,48,.06),
        inset 0 1px 0 #fff;
}

body[data-page="dashboard"] .dashboard-status-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 5px;
    background:
        linear-gradient(180deg, var(--primary), var(--royal));
}

body[data-page="dashboard"] .section-title-row {
    margin-bottom: 11px;
    padding: 11px 12px;
    border: 1px solid rgba(var(--primary-rgb), .10);
    border-radius: 11px;
    background:
        linear-gradient(145deg, rgba(255,255,255,.96), rgba(var(--primary-rgb), .04));
}

body[data-page="dashboard"] .section-title-row h3 {
    margin: 0;
    color: #3d365d;
    font-size: .9rem;
}

body[data-page="dashboard"] .dashboard-mini-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
}

body[data-page="dashboard"] .dashboard-status-card:nth-child(n+2) .dashboard-mini-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

body[data-page="dashboard"] .dashboard-mini-grid > div {
    min-width: 0;
    padding: 11px 10px;
    border: 1px solid #e4dfe7;
    border-radius: 11px;
    background:
        linear-gradient(145deg, rgba(255,255,255,.96), rgba(250,248,251,.94));
}

body[data-page="dashboard"] .dashboard-mini-grid span {
    display: block;
    color: var(--text-muted);
    font-size: .60rem;
    line-height: 1.35;
}

body[data-page="dashboard"] .dashboard-mini-grid strong {
    display: block;
    margin-top: 6px;
    color: #40385d;
    font-size: 1.25rem;
    font-weight: 950;
    font-variant-numeric: tabular-nums;
}

body[data-page="dashboard"] .pending-job-count,
body[data-page="dashboard"] .pending-withdrawal-count {
    color: var(--warning-dark) !important;
}

/* ---------- Bottom nav ---------- */
body[data-page="dashboard"] .bottom-nav {
    position: fixed;
    z-index: 1000;
    right: 50%;
    bottom: max(10px, env(safe-area-inset-bottom));
    display: grid;
    grid-template-columns: repeat(3, minmax(82px, 1fr));
    width: min(calc(100% - 24px), 460px);
    padding: 5px;
    border: 1px solid rgba(216,209,221,.92);
    border-radius: 15px;
    background: rgba(255,255,255,.94);
    box-shadow:
        0 12px 32px rgba(37,37,48,.15),
        inset 0 1px 0 rgba(255,255,255,.95);
    backdrop-filter: blur(14px);
    transform: translateX(50%);
}

body[data-page="dashboard"] .bottom-nav a {
    display: flex;
    min-height: 38px;
    align-items: center;
    justify-content: center;
    padding: 6px 9px;
    border-radius: 10px;
    color: var(--text-soft);
    font-size: .72rem;
    font-weight: 800;
    text-align: center;
    text-decoration: none;
}

body[data-page="dashboard"] .bottom-nav a:hover {
    color: var(--primary-dark);
    background: rgba(var(--primary-rgb), .07);
}

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
    body[data-page="dashboard"] .dashboard-overview-grid-four {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    body[data-page="dashboard"] .container.page-with-nav {
        width: min(100% - 18px, 640px);
        padding: 9px 0 82px;
    }

    body[data-page="dashboard"] .dashboard-hero {
        grid-template-columns: 1fr;
        gap: 12px;
        min-height: 0;
        padding: 19px 15px;
        border-radius: 16px;
    }

    body[data-page="dashboard"] .dashboard-hero::before {
        top: 60px;
        font-size: 3.9rem;
    }

    body[data-page="dashboard"] .dashboard-hero h1 {
        font-size: 1.5rem;
    }

    body[data-page="dashboard"] .dashboard-date-card {
        min-width: 0;
        width: 100%;
        padding: 12px;
    }

    body[data-page="dashboard"] .dashboard-overview-grid-four {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        margin-top: 10px;
    }

    body[data-page="dashboard"] .dashboard-main-stat {
        min-height: 142px;
        padding: 13px;
        border-radius: 13px;
    }

    body[data-page="dashboard"] .dashboard-main-stat h2 {
        margin-top: 14px;
        font-size: 2.15rem;
    }

    body[data-page="dashboard"] .dashboard-reminder-card {
        grid-template-columns: 1fr;
        align-items: stretch;
        gap: 10px;
        margin-top: 10px;
        padding: 13px;
        border-radius: 13px;
    }

    body[data-page="dashboard"] .dashboard-reminder-card button {
        width: 100%;
        min-width: 0;
    }

    body[data-page="dashboard"] .maintenance-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body[data-page="dashboard"] .dashboard-section-grid {
        grid-template-columns: 1fr;
        gap: 8px;
        margin-top: 10px;
    }

    body[data-page="dashboard"] .dashboard-status-card {
        padding: 13px;
        border-radius: 13px;
    }

    body[data-page="dashboard"] .bottom-nav {
        bottom: max(7px, env(safe-area-inset-bottom));
        width: calc(100% - 18px);
        max-width: 430px;
        padding: 4px;
        border-radius: 14px;
    }

    body[data-page="dashboard"] .bottom-nav a {
        min-height: 36px;
        padding: 5px;
        font-size: .68rem;
    }
}

@media (max-width: 390px) {
    body[data-page="dashboard"] .dashboard-overview-grid-four {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
    }

    body[data-page="dashboard"] .dashboard-main-stat {
        min-height: 132px;
        padding: 11px;
    }

    body[data-page="dashboard"] .summary-label {
        font-size: .56rem;
        padding-inline: 7px;
    }

    body[data-page="dashboard"] .dashboard-main-stat h2 {
        font-size: 1.9rem;
    }

    body[data-page="dashboard"] .dashboard-main-stat p {
        font-size: .58rem;
    }

    body[data-page="dashboard"] .maintenance-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (prefers-reduced-motion: reduce) {
    body[data-page="dashboard"] *,
    body[data-page="dashboard"] *::before,
    body[data-page="dashboard"] *::after {
        animation: none !important;
        transition: none !important;
    }
}
/* =========================================================
   PRMS Employee Management — Premium Graphite & Garnet UI
   Page scope: body[data-page="employee-management"]
   Palette: graphite navy + garnet + champagne gold
   ========================================================= */

body[data-page="employee-management"] {
    --page-bg: #f4f2f3;
    --surface: #ffffff;
    --surface-soft: #faf8f9;
    --text: #25262f;
    --text-soft: #666874;
    --text-muted: #8b8d97;
    --line: #e2dde1;

    --primary: #334155;
    --primary-dark: #1e293b;
    --primary-rgb: 51, 65, 85;

    --garnet: #9f1239;
    --garnet-dark: #701a2f;
    --garnet-rgb: 159, 18, 57;

    --gold: #c89a45;
    --gold-dark: #7c5718;
    --gold-light: #f2d89d;

    --success: #15803d;
    --success-dark: #166534;
    --success-rgb: 21, 128, 61;

    --warning: #d97706;
    --warning-dark: #92400e;
    --warning-rgb: 217, 119, 6;

    --danger: #b91c1c;
    --danger-dark: #7f1d1d;
    --danger-rgb: 185, 28, 28;

    margin: 0;
    color: var(--text);
    background:
        radial-gradient(circle at 100% 0%, rgba(var(--primary-rgb), .085), transparent 31rem),
        radial-gradient(circle at 0% 100%, rgba(var(--garnet-rgb), .05), transparent 27rem),
        var(--page-bg);
    font-family: Inter, "Segoe UI", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

body[data-page="employee-management"] *,
body[data-page="employee-management"] *::before,
body[data-page="employee-management"] *::after {
    box-sizing: border-box;
}

body[data-page="employee-management"] a,
body[data-page="employee-management"] button,
body[data-page="employee-management"] input,
body[data-page="employee-management"] select {
    -webkit-tap-highlight-color: transparent;
}

body[data-page="employee-management"] .container.page-with-nav {
    width: min(100% - 32px, 1260px);
    margin: 0 auto;
    padding: 18px 4px 92px;
}

/* ---------- Hero ---------- */
body[data-page="employee-management"] .employee-management-hero {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, .55fr);
    align-items: end;
    gap: 18px;
    min-height: 196px;
    padding: 28px 26px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.20);
    border-radius: 20px;
    color: #fff;
    background:
        radial-gradient(circle at 12% 8%, rgba(255,255,255,.17), transparent 24%),
        radial-gradient(circle at 88% 112%, rgba(255,255,255,.10), transparent 38%),
        linear-gradient(118deg, rgba(255,255,255,.05), transparent 42%),
        linear-gradient(135deg, #1e293b 0%, #334155 48%, #7a1738 100%);
    box-shadow:
        0 24px 54px rgba(30,41,59,.27),
        inset 0 1px 0 rgba(255,255,255,.13),
        inset 0 -1px 0 rgba(30,41,59,.24);
}

body[data-page="employee-management"] .employee-management-hero::before {
    content: "EMPLOYEES";
    position: absolute;
    z-index: -1;
    left: 24px;
    top: 64px;
    color: rgba(255,255,255,.04);
    font-size: clamp(4rem, 8vw, 7.2rem);
    font-weight: 950;
    letter-spacing: -.085em;
    line-height: .8;
    pointer-events: none;
}

body[data-page="employee-management"] .employee-management-hero::after {
    content: "";
    position: absolute;
    right: -86px;
    top: -106px;
    width: 286px;
    height: 286px;
    border: 40px solid rgba(255,255,255,.035);
    border-radius: 50%;
    box-shadow:
        0 0 0 1px rgba(255,255,255,.05),
        0 0 88px rgba(242,216,157,.14);
}

body[data-page="employee-management"] .employee-management-hero > div:first-child {
    position: relative;
    z-index: 2;
    min-width: 0;
}

body[data-page="employee-management"] .page-subtitle {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 28px;
    margin: 0 0 9px;
    padding: 4px 10px;
    border: 1px solid rgba(242,216,157,.24);
    border-radius: 999px;
    color: #ffedc4;
    background: rgba(242,216,157,.10);
    font-size: .62rem;
    font-weight: 900;
    letter-spacing: .11em;
    text-transform: uppercase;
}

body[data-page="employee-management"] .page-subtitle::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--gold-light);
    box-shadow:
        0 0 0 4px rgba(242,216,157,.12),
        0 0 14px rgba(242,216,157,.35);
}

body[data-page="employee-management"] .employee-management-hero h1 {
    margin: 0;
    color: #fff;
    font-size: clamp(1.7rem, 3vw, 2.55rem);
    font-weight: 900;
    line-height: 1.15;
    letter-spacing: -.032em;
    text-shadow: 0 3px 18px rgba(30,41,59,.28);
}

body[data-page="employee-management"] .user-inline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    color: rgba(255,255,255,.76);
    font-size: .72rem;
}

body[data-page="employee-management"] .role-badge {
    display: inline-flex;
    min-height: 25px;
    align-items: center;
    padding: 3px 9px;
    border: 1px solid rgba(255,255,255,.20);
    border-radius: 999px;
    color: #fff;
    background: rgba(255,255,255,.10);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.14),
        0 4px 10px rgba(30,41,59,.12);
    font-size: .65rem;
    font-weight: 850;
}

body[data-page="employee-management"] .employee-management-actions {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(2, minmax(130px, 1fr));
    gap: 8px;
    padding: 11px;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 13px;
    background:
        linear-gradient(145deg, rgba(255,255,255,.13), rgba(255,255,255,.055));
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.12),
        0 14px 28px rgba(30,41,59,.16);
    backdrop-filter: blur(12px);
}

body[data-page="employee-management"] .header-action-btn {
    display: inline-flex;
    min-height: 39px;
    align-items: center;
    justify-content: center;
    padding: 7px 12px;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 11px;
    color: #fff;
    background:
        linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.08));
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.14),
        0 7px 16px rgba(30,41,59,.12);
    font-size: .66rem;
    font-weight: 850;
    text-align: center;
    text-decoration: none;
}

body[data-page="employee-management"] .employee-management-actions .header-action-btn:first-child {
    border-color: var(--gold-light);
    color: #2f2412;
    background:
        linear-gradient(145deg, var(--gold-light), var(--gold));
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.55),
        0 9px 20px rgba(124,87,24,.24);
}

/* ---------- Alerts ---------- */
body[data-page="employee-management"] .alert {
    margin-top: 12px;
    padding: 11px 13px;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: #fff;
    box-shadow: 0 7px 16px rgba(37,38,47,.045);
    font-size: .72rem;
}

body[data-page="employee-management"] .alert.success {
    color: #166534;
    border-color: rgba(var(--success-rgb), .22);
    background: #f0fdf4;
}

body[data-page="employee-management"] .alert.error,
body[data-page="employee-management"] .alert.danger {
    color: #991b1b;
    border-color: rgba(var(--danger-rgb), .22);
    background: #fef2f2;
}

/* ---------- Filter & list sections ---------- */
body[data-page="employee-management"] .employee-filter-card,
body[data-page="employee-management"] .employee-list-section {
    position: relative;
    overflow: hidden;
    margin-top: 14px;
    padding: 18px;
    border: 1px solid rgba(var(--primary-rgb), .15);
    border-radius: 16px;
    background:
        radial-gradient(circle at 100% 0%, rgba(var(--primary-rgb), .07), transparent 190px),
        linear-gradient(145deg, #ffffff, #faf8f9);
    box-shadow:
        0 12px 28px rgba(37,38,47,.07),
        inset 0 1px 0 #fff;
}

body[data-page="employee-management"] .employee-filter-card::before,
body[data-page="employee-management"] .employee-list-section::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 5px;
    background:
        linear-gradient(180deg, var(--primary), var(--garnet));
}

body[data-page="employee-management"] .section-title-row {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
    padding: 12px 13px;
    border: 1px solid rgba(var(--primary-rgb), .11);
    border-radius: 12px;
    background:
        linear-gradient(145deg, rgba(255,255,255,.96), rgba(var(--primary-rgb), .04));
}

body[data-page="employee-management"] .section-title-row h3 {
    margin: 0;
    color: #354052;
    font-size: 1rem;
    letter-spacing: -.015em;
}

body[data-page="employee-management"] .section-subtitle {
    margin: 4px 0 0;
    color: var(--text-muted);
    font-size: .69rem;
    line-height: 1.45;
}

body[data-page="employee-management"] .section-count {
    display: inline-flex;
    flex: 0 0 auto;
    min-height: 28px;
    align-items: center;
    padding: 4px 9px;
    border: 1px solid rgba(var(--garnet-rgb), .18);
    border-radius: 999px;
    color: var(--garnet-dark);
    background: rgba(var(--garnet-rgb), .07);
    font-size: .67rem;
    font-weight: 850;
}

/* ---------- Filter form ---------- */
body[data-page="employee-management"] .employee-filter-form {
    margin: 0;
    padding: 14px;
    border: 1px solid rgba(var(--primary-rgb), .10);
    border-radius: 12px;
    background: rgba(255,255,255,.80);
    box-shadow: inset 0 1px 0 #fff;
}

body[data-page="employee-management"] .employee-filter-grid {
    display: grid;
    gap: 10px;
}

body[data-page="employee-management"] .employee-filter-grid-four {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

body[data-page="employee-management"] .employee-filter-grid-four > div:last-child {
    grid-column: span 2;
}

body[data-page="employee-management"] .employee-filter-grid label,
body[data-page="employee-management"] .employee-update-grid label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 6px;
    color: #525967;
    font-size: .68rem;
    font-weight: 850;
}

body[data-page="employee-management"] .employee-filter-grid label::before,
body[data-page="employee-management"] .employee-update-grid label::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--primary);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), .09);
}

body[data-page="employee-management"] .employee-filter-grid input,
body[data-page="employee-management"] .employee-filter-grid select,
body[data-page="employee-management"] .employee-update-grid input,
body[data-page="employee-management"] .employee-update-grid select {
    width: 100%;
    min-height: 41px;
    padding: 8px 10px;
    border: 1px solid #ddd7db;
    border-radius: 10px;
    color: #333640;
    background: linear-gradient(180deg, #fff, #fbfafb);
    font: inherit;
    font-size: .71rem;
    box-shadow:
        inset 0 1px 2px rgba(37,38,47,.035),
        0 3px 8px rgba(37,38,47,.025);
}


body[data-page="employee-management"] .employee-filter-grid input:focus,
body[data-page="employee-management"] .employee-filter-grid select:focus,
body[data-page="employee-management"] .employee-update-grid input:focus,
body[data-page="employee-management"] .employee-update-grid select:focus {
    outline: none;
    border-color: rgba(var(--primary-rgb), .55);
    box-shadow:
        0 0 0 4px rgba(var(--primary-rgb), .09),
        0 7px 16px rgba(var(--primary-rgb), .07);
}

body[data-page="employee-management"] .form-hint {
    display: block;
    margin-top: 5px;
    color: var(--text-muted);
    font-size: .60rem;
}

body[data-page="employee-management"] .employee-filter-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-top: 12px;
}

body[data-page="employee-management"] .employee-filter-actions button,
body[data-page="employee-management"] .employee-filter-actions .header-action-btn {
    width: 100%;
    min-height: 40px;
    margin: 0;
    border: 1px solid var(--primary);
    border-radius: 10px;
    color: #fff;
    background:
        linear-gradient(145deg, var(--primary), var(--primary-dark));
    box-shadow:
        0 8px 18px rgba(var(--primary-rgb), .20),
        inset 0 1px 0 rgba(255,255,255,.16);
    font: inherit;
    font-size: .68rem;
    font-weight: 900;
    cursor: pointer;
}

body[data-page="employee-management"] .employee-filter-actions .header-action-btn:nth-child(2) {
    border-color: var(--gold);
    color: #30240f;
    background:
        linear-gradient(145deg, var(--gold-light), var(--gold));
    box-shadow:
        0 8px 18px rgba(124,87,24,.20),
        inset 0 1px 0 rgba(255,255,255,.42);
}

body[data-page="employee-management"] .employee-filter-actions .header-action-btn:last-child {
    border-color: var(--garnet);
    color: #fff;
    background:
        linear-gradient(145deg, var(--garnet), var(--garnet-dark));
    box-shadow:
        0 8px 18px rgba(var(--garnet-rgb), .20),
        inset 0 1px 0 rgba(255,255,255,.16);
}

/* ---------- Employee grid ---------- */
body[data-page="employee-management"] .employee-management-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

body[data-page="employee-management"] .employee-management-card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 16px 16px 15px 19px;
    border: 1px solid rgba(var(--primary-rgb), .14);
    border-radius: 16px;
    background:
        radial-gradient(circle at 100% 0%, rgba(var(--garnet-rgb), .06), transparent 160px),
        linear-gradient(145deg, #ffffff, #fbf9fa);
    box-shadow:
        0 10px 24px rgba(37,38,47,.06),
        inset 0 1px 0 #fff;
}

body[data-page="employee-management"] .employee-management-card::before {
    content: "";
    position: absolute;
    inset: 11px auto 11px 0;
    width: 5px;
    border-radius: 99px;
    background:
        linear-gradient(180deg, var(--primary), var(--garnet));
}

body[data-page="employee-management"] .employee-card-top {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 12px;
}

body[data-page="employee-management"] .employee-card-avatar {
    display: grid;
    width: 54px;
    height: 54px;
    place-items: center;
    overflow: hidden;
    border: 1px solid rgba(var(--primary-rgb), .16);
    border-radius: 15px;
    color: var(--primary-dark);
    background:
        linear-gradient(145deg, rgba(var(--primary-rgb), .09), rgba(var(--garnet-rgb), .05));
    box-shadow:
        inset 0 1px 0 #fff,
        0 7px 16px rgba(var(--primary-rgb), .08);
    font-size: .68rem;
    font-weight: 900;
}

body[data-page="employee-management"] .employee-card-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

body[data-page="employee-management"] .employee-name-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
}

body[data-page="employee-management"] .employee-card-title h3 {
    margin: 0;
    color: #344052;
    font-size: .95rem;
    font-weight: 900;
}

body[data-page="employee-management"] .employee-card-title p {
    margin: 4px 0 0;
    color: var(--text-muted);
    font-size: .64rem;
}

body[data-page="employee-management"] .employee-style-badge-row {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

body[data-page="employee-management"] .employee-style-badge {
    display: inline-flex;
    min-height: 23px;
    align-items: center;
    padding: 3px 8px;
    border: 1px solid rgba(var(--garnet-rgb), .16);
    border-radius: 999px;
    color: var(--garnet-dark);
    background: rgba(var(--garnet-rgb), .06);
    font-size: .58rem;
    font-weight: 850;
}

/* ---------- Employee info ---------- */
body[data-page="employee-management"] .employee-info-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
    margin-top: 12px;
}

body[data-page="employee-management"] .employee-info-grid > div {
    min-width: 0;
    padding: 9px 10px;
    border: 1px solid #e3dee1;
    border-radius: 10px;
    background:
        linear-gradient(145deg, rgba(255,255,255,.95), rgba(250,248,249,.94));
}

body[data-page="employee-management"] .employee-info-grid span {
    display: block;
    color: var(--text-muted);
    font-size: .59rem;
}

body[data-page="employee-management"] .employee-info-grid strong {
    display: block;
    margin-top: 3px;
    color: #3a3c45;
    font-size: .67rem;
    overflow-wrap: anywhere;
}

/* ---------- Update form ---------- */
body[data-page="employee-management"] .employee-update-form {
    margin-top: 12px;
    padding: 12px;
    border: 1px solid rgba(var(--primary-rgb), .10);
    border-radius: 12px;
    background: rgba(255,255,255,.78);
}

body[data-page="employee-management"] .employee-update-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

body[data-page="employee-management"] .employee-update-form > button {
    display: inline-flex;
    width: 100%;
    min-height: 39px;
    align-items: center;
    justify-content: center;
    margin-top: 10px;
    padding: 8px 11px;
    border: 1px solid var(--primary);
    border-radius: 10px;
    color: #fff;
    background:
        linear-gradient(145deg, var(--primary), var(--primary-dark));
    box-shadow:
        0 8px 18px rgba(var(--primary-rgb), .20),
        inset 0 1px 0 rgba(255,255,255,.16);
    font: inherit;
    font-size: .68rem;
    font-weight: 900;
    cursor: pointer;
}

/* ---------- Employee links/actions ---------- */
body[data-page="employee-management"] .employee-card-links {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    margin-top: 10px;
}

body[data-page="employee-management"] .employee-card-links a {
    display: inline-flex;
    min-height: 36px;
    align-items: center;
    justify-content: center;
    padding: 7px 9px;
    border: 1px solid rgba(var(--primary-rgb), .16);
    border-radius: 9px;
    color: var(--primary-dark);
    background: rgba(var(--primary-rgb), .055);
    font-size: .64rem;
    font-weight: 850;
    text-align: center;
    text-decoration: none;
}

body[data-page="employee-management"] .employee-card-links a:last-child {
    color: var(--garnet-dark);
    border-color: rgba(var(--garnet-rgb), .16);
    background: rgba(var(--garnet-rgb), .055);
}

body[data-page="employee-management"] .employee-management-card > form:last-child {
    margin: 9px 0 0;
}

body[data-page="employee-management"] .employee-management-card > form:last-child button {
    display: inline-flex;
    width: 100%;
    min-height: 39px;
    align-items: center;
    justify-content: center;
    padding: 8px 11px;
    border: 1px solid var(--success);
    border-radius: 10px;
    color: #fff;
    background:
        linear-gradient(145deg, var(--success), var(--success-dark));
    box-shadow:
        0 8px 18px rgba(var(--success-rgb), .20),
        inset 0 1px 0 rgba(255,255,255,.16);
    font: inherit;
    font-size: .68rem;
    font-weight: 900;
    cursor: pointer;
}

body[data-page="employee-management"] .employee-management-card > form:last-child .danger-btn {
    border-color: var(--danger);
    background:
        linear-gradient(145deg, var(--danger), var(--danger-dark));
    box-shadow:
        0 8px 18px rgba(var(--danger-rgb), .20),
        inset 0 1px 0 rgba(255,255,255,.16);
}

/* ---------- Pagination ---------- */
body[data-page="employee-management"] .pagination-bar {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    margin-top: 14px;
}

body[data-page="employee-management"] .pagination-bar a,
body[data-page="employee-management"] .pagination-bar span {
    display: inline-flex;
    min-width: 34px;
    min-height: 34px;
    align-items: center;
    justify-content: center;
    padding: 5px 9px;
    border: 1px solid #ddd7dc;
    border-radius: 9px;
    color: #4f5663;
    background: #fff;
    font-size: .67rem;
    font-weight: 800;
    text-decoration: none;
}

body[data-page="employee-management"] .pagination-bar a.active {
    color: #fff;
    border-color: var(--primary);
    background:
        linear-gradient(145deg, var(--primary), var(--garnet));
    box-shadow:
        0 6px 14px rgba(var(--primary-rgb), .18);
}

/* ---------- Empty state ---------- */
body[data-page="employee-management"] .empty-state-card {
    display: grid;
    min-height: 100px;
    place-items: center;
    padding: 18px;
    border: 1px dashed rgba(var(--primary-rgb), .22);
    border-radius: 11px;
    color: var(--text-muted);
    background: rgba(var(--primary-rgb), .035);
    font-size: .72rem;
    text-align: center;
}

/* ---------- Bottom nav ---------- */
body[data-page="employee-management"] .bottom-nav {
    position: fixed;
    z-index: 1000;
    right: 50%;
    bottom: max(10px, env(safe-area-inset-bottom));
    display: grid;
    grid-template-columns: repeat(3, minmax(82px, 1fr));
    width: min(calc(100% - 24px), 460px);
    padding: 5px;
    border: 1px solid rgba(216,209,218,.92);
    border-radius: 15px;
    background: rgba(255,255,255,.94);
    box-shadow:
        0 12px 32px rgba(37,38,47,.15),
        inset 0 1px 0 rgba(255,255,255,.95);
    backdrop-filter: blur(14px);
    transform: translateX(50%);
}

body[data-page="employee-management"] .bottom-nav a {
    display: flex;
    min-height: 38px;
    align-items: center;
    justify-content: center;
    padding: 6px 9px;
    border-radius: 10px;
    color: var(--text-soft);
    font-size: .72rem;
    font-weight: 800;
    text-align: center;
    text-decoration: none;
}

body[data-page="employee-management"] .bottom-nav a.active {
    color: #fff;
    background:
        linear-gradient(145deg, var(--primary), var(--garnet));
    box-shadow:
        0 5px 13px rgba(var(--primary-rgb), .22),
        inset 0 1px 0 rgba(255,255,255,.14);
}

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
    body[data-page="employee-management"] .employee-management-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 700px) {
    body[data-page="employee-management"] .container.page-with-nav {
        width: min(100% - 18px, 640px);
        padding: 9px 0 82px;
    }

    body[data-page="employee-management"] .employee-management-hero {
        grid-template-columns: 1fr;
        align-items: stretch;
        gap: 12px;
        min-height: 0;
        padding: 19px 15px;
        border-radius: 16px;
    }

    body[data-page="employee-management"] .employee-management-hero::before {
        top: 60px;
        font-size: 3.8rem;
    }

    body[data-page="employee-management"] .employee-management-hero h1 {
        font-size: 1.5rem;
    }

    body[data-page="employee-management"] .employee-management-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        padding: 8px;
        gap: 6px;
    }

    body[data-page="employee-management"] .header-action-btn {
        min-height: 34px;
        padding: 6px 8px;
        font-size: .60rem;
    }

    body[data-page="employee-management"] .employee-filter-card,
    body[data-page="employee-management"] .employee-list-section {
        margin-top: 10px;
        padding: 13px;
        border-radius: 13px;
    }

    body[data-page="employee-management"] .employee-filter-grid-four {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 7px;
    }

    body[data-page="employee-management"] .employee-filter-grid-four > div:first-child,
    body[data-page="employee-management"] .employee-filter-grid-four > div:last-child {
        grid-column: 1 / -1;
    }

    body[data-page="employee-management"] .employee-filter-actions {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 6px;
    }

    body[data-page="employee-management"] .employee-filter-actions button,
    body[data-page="employee-management"] .employee-filter-actions .header-action-btn {
        min-height: 35px;
        padding: 6px;
        font-size: .59rem;
    }

    body[data-page="employee-management"] .employee-management-grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    body[data-page="employee-management"] .employee-management-card {
        padding: 13px 12px 12px 15px;
        border-radius: 13px;
    }

    body[data-page="employee-management"] .employee-info-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 5px;
    }

    body[data-page="employee-management"] .employee-update-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
    }

    body[data-page="employee-management"] .bottom-nav {
        bottom: max(7px, env(safe-area-inset-bottom));
        width: calc(100% - 18px);
        max-width: 430px;
        padding: 4px;
        border-radius: 14px;
    }

    body[data-page="employee-management"] .bottom-nav a {
        min-height: 36px;
        padding: 5px;
        font-size: .68rem;
    }
}

@media (max-width: 390px) {
    body[data-page="employee-management"] .employee-management-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body[data-page="employee-management"] .employee-card-top {
        align-items: flex-start;
    }

    body[data-page="employee-management"] .employee-card-avatar {
        width: 46px;
        height: 46px;
        border-radius: 13px;
    }

    body[data-page="employee-management"] .employee-info-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 4px;
    }

    body[data-page="employee-management"] .employee-info-grid > div {
        padding: 8px 7px;
    }

    body[data-page="employee-management"] .employee-info-grid span {
        font-size: .54rem;
    }

    body[data-page="employee-management"] .employee-info-grid strong {
        font-size: .60rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    body[data-page="employee-management"] *,
    body[data-page="employee-management"] *::before,
    body[data-page="employee-management"] *::after {
        animation: none !important;
        transition: none !important;
    }
}

/* =========================================================
   Enhanced Style Type Multi-Select
   ========================================================= */

body[data-page="employee-management"] .employee-filter-grid select[name="style_type"] {
    position: relative;
    min-height: 178px;
    padding: 8px;
    border: 1px solid rgba(var(--primary-rgb), .18);
    border-radius: 13px;
    color: #353943;
    background:
        radial-gradient(circle at 100% 0%, rgba(var(--garnet-rgb), .07), transparent 120px),
        linear-gradient(145deg, #ffffff, #faf8f9);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.95),
        inset 0 0 0 1px rgba(255,255,255,.55),
        0 8px 18px rgba(37,38,47,.045);
    font-size: .69rem;
    line-height: 1.35;
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--garnet-rgb), .45) rgba(var(--primary-rgb), .06);
}

body[data-page="employee-management"] .employee-filter-grid select[name="style_type"]:hover {
    border-color: rgba(var(--garnet-rgb), .28);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.95),
        0 10px 22px rgba(var(--garnet-rgb), .07);
}

body[data-page="employee-management"] .employee-filter-grid select[name="style_type"]:focus {
    outline: none;
    border-color: rgba(var(--garnet-rgb), .55);
    box-shadow:
        0 0 0 4px rgba(var(--garnet-rgb), .09),
        inset 0 1px 0 rgba(255,255,255,.95),
        0 10px 24px rgba(var(--garnet-rgb), .08);
}

body[data-page="employee-management"] .employee-filter-grid select[name="style_type"] option {
    margin: 3px 0;
    padding: 9px 11px;
    border-radius: 8px;
    color: #41434d;
    background: #ffffff;
    font-size: .68rem;
    font-weight: 750;
}

body[data-page="employee-management"] .employee-filter-grid select[name="style_type"] option:checked {
    color: #ffffff;
    background:
        linear-gradient(145deg, var(--primary), var(--garnet));
    box-shadow:
        inset 4px 0 0 var(--gold-light);
    font-weight: 900;
}

body[data-page="employee-management"] .employee-filter-grid select[name="style_type"] option:hover {
    color: var(--garnet-dark);
    background: rgba(var(--garnet-rgb), .07);
}

body[data-page="employee-management"] .employee-filter-grid select[name="style_type"]::-webkit-scrollbar {
    width: 8px;
}

body[data-page="employee-management"] .employee-filter-grid select[name="style_type"]::-webkit-scrollbar-track {
    border-radius: 999px;
    background: rgba(var(--primary-rgb), .055);
}

body[data-page="employee-management"] .employee-filter-grid select[name="style_type"]::-webkit-scrollbar-thumb {
    border: 2px solid transparent;
    border-radius: 999px;
    background:
        linear-gradient(180deg, var(--primary), var(--garnet));
    background-clip: padding-box;
}

body[data-page="employee-management"] .employee-filter-grid select[name="style_type"] + .form-hint {
    position: relative;
    margin-top: 8px;
    padding: 8px 10px 8px 28px;
    border: 1px solid rgba(var(--gold), .18);
    border-radius: 9px;
    color: #7b6440;
    background:
        linear-gradient(145deg, #fffaf0, #ffffff);
    font-size: .60rem;
    line-height: 1.4;
}

body[data-page="employee-management"] .employee-filter-grid select[name="style_type"] + .form-hint::before {
    content: "⌘";
    position: absolute;
    left: 9px;
    top: 50%;
    display: grid;
    width: 13px;
    height: 13px;
    place-items: center;
    border-radius: 4px;
    color: #fff;
    background:
        linear-gradient(145deg, var(--gold), var(--gold-dark));
    font-size: .48rem;
    font-weight: 900;
    transform: translateY(-50%);
}

@media (max-width: 700px) {
    body[data-page="employee-management"] .employee-filter-grid select[name="style_type"] {
        min-height: 154px;
        border-radius: 11px;
    }

    body[data-page="employee-management"] .employee-filter-grid select[name="style_type"] option {
        padding: 8px 9px;
        font-size: .64rem;
    }
}

/* =========================================================
   PRMS Direct Outing Records — Premium Olive & Copper UI
   Page scope: body[data-page="direct-outing-records"]
   Palette: deep olive-black + copper + burgundy
   ========================================================= */

body[data-page="direct-outing-records"] {
    --page-bg: #f3f2ee;
    --surface: #ffffff;
    --surface-soft: #faf9f6;
    --text: #292a24;
    --text-soft: #68695f;
    --text-muted: #8e8f85;
    --line: #e1dfd7;

    --primary: #3f4a32;
    --primary-dark: #252d1f;
    --primary-rgb: 63, 74, 50;

    --copper: #b87333;
    --copper-dark: #7a461f;
    --copper-rgb: 184, 115, 51;

    --burgundy: #8b1e3f;
    --burgundy-dark: #5e1028;
    --burgundy-rgb: 139, 30, 63;

    --gold: #c89a45;
    --gold-dark: #7c5718;
    --gold-light: #f1d89f;

    --success: #15803d;
    --success-dark: #166534;
    --success-rgb: 21, 128, 61;

    --warning: #d97706;
    --warning-dark: #92400e;
    --warning-rgb: 217, 119, 6;

    --danger: #b91c1c;
    --danger-dark: #7f1d1d;
    --danger-rgb: 185, 28, 28;

    margin: 0;
    color: var(--text);
    background:
        radial-gradient(circle at 100% 0%, rgba(var(--primary-rgb), .08), transparent 31rem),
        radial-gradient(circle at 0% 100%, rgba(var(--copper-rgb), .05), transparent 26rem),
        var(--page-bg);
    font-family: Inter, "Segoe UI", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

body[data-page="direct-outing-records"] *,
body[data-page="direct-outing-records"] *::before,
body[data-page="direct-outing-records"] *::after {
    box-sizing: border-box;
}

body[data-page="direct-outing-records"] a,
body[data-page="direct-outing-records"] button,
body[data-page="direct-outing-records"] input,
body[data-page="direct-outing-records"] select,
body[data-page="direct-outing-records"] textarea {
    -webkit-tap-highlight-color: transparent;
}

body[data-page="direct-outing-records"] .container.page-with-nav {
    width: min(100% - 32px, 1220px);
    margin: 0 auto;
    padding: 18px 4px 42px;
}

/* ---------- Language switch ---------- */
body[data-page="direct-outing-records"] .login-language-switch {
    display: inline-grid;
    grid-template-columns: repeat(2, minmax(72px, 1fr));
    gap: 4px;
    margin-bottom: 10px;
    padding: 4px;
    border: 1px solid rgba(var(--primary-rgb), .12);
    border-radius: 12px;
    background: rgba(255,255,255,.86);
    box-shadow:
        0 7px 18px rgba(41,42,36,.05),
        inset 0 1px 0 #fff;
}

body[data-page="direct-outing-records"] .login-language-switch form {
    margin: 0;
}

body[data-page="direct-outing-records"] .login-language-switch button {
    width: 100%;
    min-height: 32px;
    padding: 5px 10px;
    border: 0;
    border-radius: 8px;
    color: var(--text-soft);
    background: transparent;
    font: inherit;
    font-size: .65rem;
    font-weight: 850;
    cursor: pointer;
}

body[data-page="direct-outing-records"] .login-language-switch button.active {
    color: #fff;
    background:
        linear-gradient(145deg, var(--primary), var(--copper));
    box-shadow:
        0 5px 12px rgba(var(--primary-rgb), .18),
        inset 0 1px 0 rgba(255,255,255,.15);
}

/* ---------- Hero ---------- */
body[data-page="direct-outing-records"] .workspace-premium-hero {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(220px, .42fr);
    align-items: center;
    gap: 18px;
    min-height: 192px;
    padding: 27px 25px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.20);
    border-radius: 19px;
    color: #fff;
    background:
        radial-gradient(circle at 12% 8%, rgba(255,255,255,.16), transparent 24%),
        radial-gradient(circle at 88% 112%, rgba(255,255,255,.10), transparent 38%),
        linear-gradient(118deg, rgba(255,255,255,.05), transparent 42%),
        linear-gradient(135deg, #23291e 0%, #3f4a32 48%, #7a461f 100%);
    box-shadow:
        0 22px 50px rgba(37,45,31,.25),
        inset 0 1px 0 rgba(255,255,255,.13),
        inset 0 -1px 0 rgba(35,41,30,.24);
}

body[data-page="direct-outing-records"] .workspace-premium-hero::before {
    content: "OUTING";
    position: absolute;
    z-index: -1;
    left: 104px;
    top: 60px;
    color: rgba(255,255,255,.04);
    font-size: clamp(4rem, 8vw, 7rem);
    font-weight: 950;
    letter-spacing: -.08em;
    line-height: .8;
}

body[data-page="direct-outing-records"] .workspace-premium-hero::after {
    content: "";
    position: absolute;
    right: -80px;
    top: -96px;
    width: 270px;
    height: 270px;
    border: 38px solid rgba(255,255,255,.035);
    border-radius: 50%;
    box-shadow:
        0 0 0 1px rgba(255,255,255,.05),
        0 0 82px rgba(241,216,159,.13);
}

body[data-page="direct-outing-records"] .workspace-premium-hero-main {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 17px;
    min-width: 0;
}

body[data-page="direct-outing-records"] .workspace-premium-icon {
    display: grid;
    flex: 0 0 68px;
    width: 68px;
    height: 68px;
    place-items: center;
    border: 1px solid rgba(255,255,255,.24);
    border-radius: 20px;
    color: #fff0c6;
    background:
        linear-gradient(145deg, rgba(255,255,255,.20), rgba(255,255,255,.07));
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.20),
        0 13px 28px rgba(35,41,30,.24);
    font-size: 1rem;
    font-weight: 950;
}

body[data-page="direct-outing-records"] .page-subtitle {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 27px;
    margin: 0 0 8px;
    padding: 4px 10px;
    border: 1px solid rgba(241,216,159,.24);
    border-radius: 999px;
    color: #ffedc3;
    background: rgba(241,216,159,.10);
    font-size: .62rem;
    font-weight: 900;
    letter-spacing: .11em;
    text-transform: uppercase;
}

body[data-page="direct-outing-records"] .page-subtitle::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--gold-light);
    box-shadow:
        0 0 0 4px rgba(241,216,159,.12),
        0 0 14px rgba(241,216,159,.35);
}

body[data-page="direct-outing-records"] .workspace-premium-hero h1 {
    margin: 0;
    color: #fff;
    font-size: clamp(1.6rem, 2.8vw, 2.4rem);
    font-weight: 900;
    line-height: 1.18;
    letter-spacing: -.03em;
}

body[data-page="direct-outing-records"] .workspace-premium-hero-main p:last-child {
    margin: 8px 0 0;
    color: rgba(255,255,255,.72);
    font-size: .7rem;
    line-height: 1.5;
}

body[data-page="direct-outing-records"] .workspace-premium-hero-side {
    position: relative;
    z-index: 2;
    min-width: 0;
    padding: 16px;
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 14px;
    background:
        linear-gradient(145deg, rgba(255,255,255,.14), rgba(255,255,255,.06));
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.13),
        0 14px 28px rgba(35,41,30,.16);
    backdrop-filter: blur(12px);
}

body[data-page="direct-outing-records"] .workspace-premium-hero-side span {
    display: block;
    color: rgba(255,255,255,.67);
    font-size: .62rem;
    font-weight: 800;
}

body[data-page="direct-outing-records"] .workspace-premium-hero-side strong {
    display: block;
    margin: 5px 0 10px;
    color: #fff4d8;
    font-size: 1rem;
}

body[data-page="direct-outing-records"] .workspace-premium-hero-side .workspace-card-link {
    display: inline-flex;
    width: 100%;
    min-height: 35px;
    align-items: center;
    justify-content: center;
    padding: 7px 10px;
    border: 1px solid var(--gold-light);
    border-radius: 9px;
    color: #2f2411;
    background:
        linear-gradient(145deg, var(--gold-light), var(--gold));
    box-shadow:
        0 8px 18px rgba(124,87,24,.20),
        inset 0 1px 0 rgba(255,255,255,.42);
    font-size: .65rem;
    font-weight: 900;
    text-decoration: none;
}

/* ---------- Alerts ---------- */
body[data-page="direct-outing-records"] .alert {
    margin-top: 12px;
    padding: 11px 13px;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: #fff;
    box-shadow: 0 7px 16px rgba(41,42,36,.045);
    font-size: .72rem;
}

/* ---------- Reminder ---------- */
body[data-page="direct-outing-records"] .workspace-premium-reminder-card {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    margin-top: 12px;
    padding: 13px 14px;
    border: 1px solid rgba(var(--gold-dark), .18);
    border-radius: 13px;
    background:
        linear-gradient(145deg, #fffaf0, #ffffff);
    box-shadow:
        0 8px 18px rgba(124,84,21,.06),
        inset 0 1px 0 #fff;
}

body[data-page="direct-outing-records"] .workspace-premium-reminder-icon {
    display: grid;
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    place-items: center;
    border-radius: 10px;
    color: #fff;
    background:
        linear-gradient(145deg, var(--gold), var(--gold-dark));
    box-shadow:
        0 7px 16px rgba(200,154,69,.20),
        inset 0 1px 0 rgba(255,255,255,.16);
    font-weight: 950;
}

body[data-page="direct-outing-records"] .workspace-premium-reminder-card h3 {
    margin: 0;
    color: #6f4811;
    font-size: .82rem;
}

body[data-page="direct-outing-records"] .workspace-premium-reminder-card p {
    margin: 4px 0 0;
    color: #856c48;
    font-size: .68rem;
    line-height: 1.48;
}

/* ---------- Sections ---------- */
body[data-page="direct-outing-records"] .workspace-premium-section,
body[data-page="direct-outing-records"] .workspace-premium-record-section {
    position: relative;
    overflow: hidden;
    margin-top: 14px;
    padding: 18px;
    border: 1px solid rgba(var(--primary-rgb), .15);
    border-radius: 16px;
    background:
        radial-gradient(circle at 100% 0%, rgba(var(--primary-rgb), .07), transparent 190px),
        linear-gradient(145deg, #ffffff, #faf9f6);
    box-shadow:
        0 12px 28px rgba(41,42,36,.07),
        inset 0 1px 0 #fff;
}

body[data-page="direct-outing-records"] .workspace-premium-section::before,
body[data-page="direct-outing-records"] .workspace-premium-record-section::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 5px;
    background:
        linear-gradient(180deg, var(--primary), var(--copper));
}

body[data-page="direct-outing-records"] .section-title-row {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
    padding: 12px 13px;
    border: 1px solid rgba(var(--primary-rgb), .11);
    border-radius: 12px;
    background:
        linear-gradient(145deg, rgba(255,255,255,.96), rgba(var(--primary-rgb), .04));
}

body[data-page="direct-outing-records"] .section-title-row h3 {
    margin: 0;
    color: #3d4931;
    font-size: 1rem;
}

body[data-page="direct-outing-records"] .section-subtitle {
    margin: 4px 0 0;
    color: var(--text-muted);
    font-size: .69rem;
}

body[data-page="direct-outing-records"] .section-count {
    display: inline-flex;
    min-height: 28px;
    align-items: center;
    padding: 4px 9px;
    border: 1px solid rgba(var(--copper-rgb), .18);
    border-radius: 999px;
    color: var(--copper-dark);
    background: rgba(var(--copper-rgb), .07);
    font-size: .67rem;
    font-weight: 850;
}

/* ---------- Filter form ---------- */
body[data-page="direct-outing-records"] .workspace-premium-section .form-box {
    margin: 0;
    padding: 14px;
    border: 1px solid rgba(var(--primary-rgb), .10);
    border-radius: 12px;
    background: rgba(255,255,255,.80);
    box-shadow: inset 0 1px 0 #fff;
}

body[data-page="direct-outing-records"] .settlement-pro-input-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

body[data-page="direct-outing-records"] label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 6px;
    color: #52594c;
    font-size: .68rem;
    font-weight: 850;
}

body[data-page="direct-outing-records"] label::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--primary);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), .09);
}

body[data-page="direct-outing-records"] input,
body[data-page="direct-outing-records"] select,
body[data-page="direct-outing-records"] textarea {
    width: 100%;
    min-width: 0;
    border: 1px solid #ddd9d1;
    border-radius: 10px;
    color: #34372f;
    background: linear-gradient(180deg, #fff, #fbfaf7);
    font: inherit;
    font-size: .70rem;
    box-shadow:
        inset 0 1px 2px rgba(41,42,36,.035),
        0 3px 8px rgba(41,42,36,.025);
}

body[data-page="direct-outing-records"] input,
body[data-page="direct-outing-records"] select {
    min-height: 41px;
    padding: 8px 10px;
}

body[data-page="direct-outing-records"] textarea {
    min-height: 92px;
    padding: 10px;
    resize: vertical;
}

body[data-page="direct-outing-records"] input:focus,
body[data-page="direct-outing-records"] select:focus,
body[data-page="direct-outing-records"] textarea:focus {
    outline: none;
    border-color: rgba(var(--copper-rgb), .55);
    box-shadow:
        0 0 0 4px rgba(var(--copper-rgb), .09),
        0 7px 16px rgba(var(--copper-rgb), .07);
}

/* ---------- Filter actions ---------- */
body[data-page="direct-outing-records"] .workspace-premium-link-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-top: 12px;
}

body[data-page="direct-outing-records"] .workspace-premium-link-row button,
body[data-page="direct-outing-records"] .workspace-premium-link-row .workspace-card-link {
    display: inline-flex;
    width: 100%;
    min-height: 40px;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 8px 12px;
    border: 1px solid var(--primary);
    border-radius: 10px;
    color: #fff;
    background:
        linear-gradient(145deg, var(--primary), var(--primary-dark));
    box-shadow:
        0 8px 18px rgba(var(--primary-rgb), .20),
        inset 0 1px 0 rgba(255,255,255,.16);
    font: inherit;
    font-size: .68rem;
    font-weight: 900;
    text-decoration: none;
    cursor: pointer;
}

body[data-page="direct-outing-records"] .workspace-premium-link-row .workspace-card-link:nth-child(2) {
    border-color: var(--burgundy);
    background:
        linear-gradient(145deg, var(--burgundy), var(--burgundy-dark));
    box-shadow:
        0 8px 18px rgba(var(--burgundy-rgb), .20),
        inset 0 1px 0 rgba(255,255,255,.16);
}

body[data-page="direct-outing-records"] .workspace-premium-link-row .workspace-card-link:last-child {
    border-color: var(--gold);
    color: #30240f;
    background:
        linear-gradient(145deg, var(--gold-light), var(--gold));
    box-shadow:
        0 8px 18px rgba(124,87,24,.20),
        inset 0 1px 0 rgba(255,255,255,.42);
}

/* ---------- Record cards ---------- */
body[data-page="direct-outing-records"] .workspace-record-list {
    display: grid;
    gap: 10px;
}

body[data-page="direct-outing-records"] .workspace-premium-attendance-item {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 16px 16px 15px 19px;
    border: 1px solid rgba(var(--copper-rgb), .14);
    border-radius: 15px;
    background:
        radial-gradient(circle at 100% 0%, rgba(var(--copper-rgb), .07), transparent 160px),
        linear-gradient(145deg, #ffffff, #fcfaf7);
    box-shadow:
        0 9px 22px rgba(41,42,36,.055),
        inset 0 1px 0 #fff;
}

body[data-page="direct-outing-records"] .workspace-premium-attendance-item::before {
    content: "";
    position: absolute;
    inset: 11px auto 11px 0;
    width: 5px;
    border-radius: 99px;
    background:
        linear-gradient(180deg, var(--primary), var(--copper));
}

body[data-page="direct-outing-records"] .attendance-top-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

body[data-page="direct-outing-records"] .attendance-top-row h4 {
    margin: 0;
    color: #3a4630;
    font-size: .92rem;
    font-weight: 900;
}

body[data-page="direct-outing-records"] .attendance-top-row p {
    margin: 3px 0 0;
    color: var(--text-muted);
    font-size: .63rem;
}

body[data-page="direct-outing-records"] .session-pill {
    display: inline-flex;
    flex: 0 0 auto;
    min-height: 29px;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    color: #fff;
    background:
        linear-gradient(145deg, var(--copper), var(--copper-dark));
    box-shadow:
        0 6px 14px rgba(var(--copper-rgb), .20),
        inset 0 1px 0 rgba(255,255,255,.16);
    font-size: .65rem;
    font-weight: 900;
}

/* ---------- Data grid ---------- */
body[data-page="direct-outing-records"] .attendance-info-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 7px;
    margin-top: 11px;
}

body[data-page="direct-outing-records"] .attendance-info-grid > div {
    min-width: 0;
    padding: 9px 10px;
    border: 1px solid #e4e0d8;
    border-radius: 10px;
    background:
        linear-gradient(145deg, rgba(255,255,255,.95), rgba(250,249,246,.94));
}

body[data-page="direct-outing-records"] .attendance-info-grid span {
    display: block;
    color: var(--text-muted);
    font-size: .59rem;
}

body[data-page="direct-outing-records"] .attendance-info-grid strong {
    display: block;
    margin-top: 3px;
    color: #3a3d35;
    font-size: .67rem;
    overflow-wrap: anywhere;
}

/* ---------- Notes ---------- */
body[data-page="direct-outing-records"] .attendance-note {
    margin-top: 10px;
    padding: 9px 10px;
    border: 1px solid #e5ded7;
    border-radius: 9px;
    color: var(--text-soft);
    background:
        linear-gradient(145deg, #fffdfa, #fbf7f2);
    font-size: .66rem;
    line-height: 1.48;
}

/* ---------- Force end ---------- */
body[data-page="direct-outing-records"] .workspace-premium-attendance-item > .form-box {
    margin-top: 12px;
    padding: 12px;
    border: 1px solid rgba(var(--danger-rgb), .13);
    border-radius: 11px;
    background: rgba(var(--danger-rgb), .035);
}

body[data-page="direct-outing-records"] .work-mode-input-group {
    margin: 0;
}

body[data-page="direct-outing-records"] .danger-btn {
    display: inline-flex;
    width: 100%;
    min-height: 40px;
    align-items: center;
    justify-content: center;
    margin-top: 10px;
    padding: 8px 12px;
    border: 1px solid var(--danger);
    border-radius: 10px;
    color: #fff;
    background:
        linear-gradient(145deg, var(--danger), var(--danger-dark));
    box-shadow:
        0 8px 18px rgba(var(--danger-rgb), .20),
        inset 0 1px 0 rgba(255,255,255,.16);
    font: inherit;
    font-size: .68rem;
    font-weight: 900;
    cursor: pointer;
}

/* ---------- Pagination ---------- */
body[data-page="direct-outing-records"] .pagination {
    display: grid;
    grid-template-columns: minmax(110px, auto) minmax(0, 1fr) minmax(110px, auto);
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    padding: 10px;
    border: 1px solid rgba(var(--primary-rgb), .10);
    border-radius: 12px;
    background: rgba(255,255,255,.76);
}

body[data-page="direct-outing-records"] .pagination a,
body[data-page="direct-outing-records"] .pagination span {
    display: inline-flex;
    min-height: 34px;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    border-radius: 9px;
    font-size: .66rem;
    font-weight: 850;
    text-decoration: none;
}

body[data-page="direct-outing-records"] .pagination a {
    color: #fff;
    border: 1px solid var(--primary);
    background:
        linear-gradient(145deg, var(--primary), var(--primary-dark));
}

body[data-page="direct-outing-records"] .pagination span {
    color: var(--copper-dark);
    border: 1px solid rgba(var(--copper-rgb), .16);
    background: rgba(var(--copper-rgb), .06);
}

/* ---------- Empty ---------- */
body[data-page="direct-outing-records"] .empty-state-card {
    display: grid;
    min-height: 100px;
    place-items: center;
    padding: 18px;
    border: 1px dashed rgba(var(--primary-rgb), .22);
    border-radius: 11px;
    color: var(--text-muted);
    background: rgba(var(--primary-rgb), .035);
    font-size: .72rem;
    text-align: center;
}

/* ---------- Mobile ---------- */
@media (max-width: 700px) {
    body[data-page="direct-outing-records"] .container.page-with-nav {
        width: min(100% - 18px, 640px);
        padding: 9px 0 30px;
    }

    body[data-page="direct-outing-records"] .workspace-premium-hero {
        grid-template-columns: 1fr;
        gap: 12px;
        min-height: 0;
        padding: 18px 15px;
        border-radius: 15px;
    }

    body[data-page="direct-outing-records"] .workspace-premium-hero::before {
        left: 68px;
        top: 52px;
        font-size: 4rem;
    }

    body[data-page="direct-outing-records"] .workspace-premium-icon {
        flex-basis: 50px;
        width: 50px;
        height: 50px;
        border-radius: 15px;
        font-size: .76rem;
    }

    body[data-page="direct-outing-records"] .workspace-premium-hero h1 {
        font-size: 1.42rem;
    }

    body[data-page="direct-outing-records"] .workspace-premium-section,
    body[data-page="direct-outing-records"] .workspace-premium-record-section {
        margin-top: 10px;
        padding: 13px;
        border-radius: 13px;
    }

    body[data-page="direct-outing-records"] .settlement-pro-input-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 7px;
    }

    body[data-page="direct-outing-records"] .workspace-premium-link-row {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 6px;
    }

    body[data-page="direct-outing-records"] .workspace-premium-link-row button,
    body[data-page="direct-outing-records"] .workspace-premium-link-row .workspace-card-link {
        min-height: 35px;
        padding: 6px;
        font-size: .59rem;
    }

    body[data-page="direct-outing-records"] .attendance-info-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 5px;
    }

    body[data-page="direct-outing-records"] .workspace-premium-attendance-item {
        padding: 12px 12px 11px 15px;
        border-radius: 12px;
    }

    body[data-page="direct-outing-records"] .pagination {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 390px) {
    body[data-page="direct-outing-records"] .workspace-premium-link-row {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    body[data-page="direct-outing-records"] .attendance-top-row {
        align-items: stretch;
        flex-direction: column;
    }

    body[data-page="direct-outing-records"] .session-pill {
        align-self: flex-start;
    }

    body[data-page="direct-outing-records"] .pagination {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    body[data-page="direct-outing-records"] *,
    body[data-page="direct-outing-records"] *::before,
    body[data-page="direct-outing-records"] *::after {
        animation: none !important;
        transition: none !important;
    }
}
/* =========================================================
   PRMS Employee Audit Log — Premium Obsidian & Copper UI
   Page scope: body[data-page="employee-audit-log"]
   Palette: obsidian navy + copper + deep red
   ========================================================= */

body[data-page="employee-audit-log"] {
    --page-bg: #f3f2f0;
    --surface: #ffffff;
    --surface-soft: #faf8f7;
    --text: #26272d;
    --text-soft: #666872;
    --text-muted: #8b8d95;
    --line: #e1ddd9;

    --primary: #293241;
    --primary-dark: #171c24;
    --primary-rgb: 41, 50, 65;

    --copper: #b87333;
    --copper-dark: #7a461f;
    --copper-rgb: 184, 115, 51;

    --crimson: #8f1d35;
    --crimson-dark: #5d1022;
    --crimson-rgb: 143, 29, 53;

    --gold: #c99b48;
    --gold-dark: #7d591c;
    --gold-light: #f1d9a2;

    --success: #15803d;
    --danger: #b91c1c;

    margin: 0;
    color: var(--text);
    background:
        radial-gradient(circle at 100% 0%, rgba(var(--primary-rgb), .085), transparent 31rem),
        radial-gradient(circle at 0% 100%, rgba(var(--copper-rgb), .05), transparent 27rem),
        var(--page-bg);
    font-family: Inter, "Segoe UI", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

body[data-page="employee-audit-log"] *,
body[data-page="employee-audit-log"] *::before,
body[data-page="employee-audit-log"] *::after {
    box-sizing: border-box;
}

body[data-page="employee-audit-log"] a,
body[data-page="employee-audit-log"] button,
body[data-page="employee-audit-log"] input,
body[data-page="employee-audit-log"] select {
    -webkit-tap-highlight-color: transparent;
}

body[data-page="employee-audit-log"] .container.page-with-nav {
    width: min(100% - 32px, 1240px);
    margin: 0 auto;
    padding: 18px 4px 92px;
}

/* ---------- Hero ---------- */
body[data-page="employee-audit-log"] .employee-management-hero {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 18px;
    min-height: 188px;
    padding: 27px 25px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.20);
    border-radius: 19px;
    color: #fff;
    background:
        radial-gradient(circle at 12% 8%, rgba(255,255,255,.17), transparent 24%),
        radial-gradient(circle at 88% 112%, rgba(255,255,255,.10), transparent 38%),
        linear-gradient(118deg, rgba(255,255,255,.05), transparent 42%),
        linear-gradient(135deg, #171c24 0%, #293241 50%, #7a461f 100%);
    box-shadow:
        0 22px 50px rgba(23,28,36,.27),
        inset 0 1px 0 rgba(255,255,255,.13),
        inset 0 -1px 0 rgba(23,28,36,.24);
}

body[data-page="employee-audit-log"] .employee-management-hero::before {
    content: "AUDIT";
    position: absolute;
    z-index: -1;
    left: 24px;
    top: 60px;
    color: rgba(255,255,255,.04);
    font-size: clamp(4rem, 8vw, 7rem);
    font-weight: 950;
    letter-spacing: -.08em;
    line-height: .8;
}

body[data-page="employee-audit-log"] .employee-management-hero::after {
    content: "";
    position: absolute;
    right: -80px;
    top: -96px;
    width: 270px;
    height: 270px;
    border: 38px solid rgba(255,255,255,.035);
    border-radius: 50%;
    box-shadow:
        0 0 0 1px rgba(255,255,255,.05),
        0 0 82px rgba(241,217,162,.13);
}

body[data-page="employee-audit-log"] .employee-management-hero > div:first-child {
    position: relative;
    z-index: 2;
    min-width: 0;
}

body[data-page="employee-audit-log"] .page-subtitle {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 27px;
    margin: 0 0 8px;
    padding: 4px 10px;
    border: 1px solid rgba(241,217,162,.24);
    border-radius: 999px;
    color: #ffedc4;
    background: rgba(241,217,162,.10);
    font-size: .62rem;
    font-weight: 900;
    letter-spacing: .11em;
    text-transform: uppercase;
}

body[data-page="employee-audit-log"] .page-subtitle::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--gold-light);
    box-shadow:
        0 0 0 4px rgba(241,217,162,.12),
        0 0 14px rgba(241,217,162,.35);
}

body[data-page="employee-audit-log"] .employee-management-hero h1 {
    margin: 0;
    color: #fff;
    font-size: clamp(1.65rem, 2.9vw, 2.45rem);
    font-weight: 900;
    line-height: 1.18;
    letter-spacing: -.03em;
}

body[data-page="employee-audit-log"] .user-inline {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 9px;
    color: rgba(255,255,255,.76);
    font-size: .72rem;
}

body[data-page="employee-audit-log"] .role-badge {
    display: inline-flex;
    min-height: 25px;
    align-items: center;
    padding: 3px 9px;
    border: 1px solid rgba(255,255,255,.20);
    border-radius: 999px;
    color: #fff;
    background: rgba(255,255,255,.10);
    font-size: .65rem;
    font-weight: 850;
}

body[data-page="employee-audit-log"] .employee-management-actions {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(2, minmax(130px, 1fr));
    gap: 8px;
    padding: 11px;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 12px;
    background:
        linear-gradient(145deg, rgba(255,255,255,.13), rgba(255,255,255,.055));
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.12),
        0 14px 28px rgba(23,28,36,.16);
    backdrop-filter: blur(12px);
}

body[data-page="employee-audit-log"] .header-action-btn {
    display: inline-flex;
    min-height: 39px;
    align-items: center;
    justify-content: center;
    padding: 7px 12px;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 11px;
    color: #fff;
    background:
        linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.08));
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.14),
        0 7px 16px rgba(23,28,36,.12);
    font-size: .66rem;
    font-weight: 850;
    text-align: center;
    text-decoration: none;
}

body[data-page="employee-audit-log"] .employee-management-actions .header-action-btn:first-child {
    border-color: var(--gold-light);
    color: #2f2412;
    background:
        linear-gradient(145deg, var(--gold-light), var(--gold));
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.55),
        0 9px 20px rgba(125,89,28,.24);
}

/* ---------- Alerts ---------- */
body[data-page="employee-audit-log"] .alert {
    margin-top: 12px;
    padding: 11px 13px;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: #fff;
    box-shadow: 0 7px 16px rgba(38,39,45,.045);
    font-size: .72rem;
}

/* ---------- Filter / list sections ---------- */
body[data-page="employee-audit-log"] .employee-filter-card,
body[data-page="employee-audit-log"] .employee-list-section {
    position: relative;
    overflow: hidden;
    margin-top: 14px;
    padding: 18px;
    border: 1px solid rgba(var(--primary-rgb), .15);
    border-radius: 16px;
    background:
        radial-gradient(circle at 100% 0%, rgba(var(--primary-rgb), .07), transparent 190px),
        linear-gradient(145deg, #ffffff, #faf8f7);
    box-shadow:
        0 12px 28px rgba(38,39,45,.07),
        inset 0 1px 0 #fff;
}

body[data-page="employee-audit-log"] .employee-filter-card::before,
body[data-page="employee-audit-log"] .employee-list-section::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 5px;
    background:
        linear-gradient(180deg, var(--primary), var(--copper));
}

body[data-page="employee-audit-log"] .section-title-row {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
    padding: 12px 13px;
    border: 1px solid rgba(var(--primary-rgb), .11);
    border-radius: 12px;
    background:
        linear-gradient(145deg, rgba(255,255,255,.96), rgba(var(--primary-rgb), .04));
}

body[data-page="employee-audit-log"] .section-title-row h3 {
    margin: 0;
    color: #303947;
    font-size: 1rem;
}

body[data-page="employee-audit-log"] .section-subtitle {
    margin: 4px 0 0;
    color: var(--text-muted);
    font-size: .69rem;
}

body[data-page="employee-audit-log"] .section-count {
    display: inline-flex;
    min-height: 28px;
    align-items: center;
    padding: 4px 9px;
    border: 1px solid rgba(var(--copper-rgb), .18);
    border-radius: 999px;
    color: var(--copper-dark);
    background: rgba(var(--copper-rgb), .07);
    font-size: .67rem;
    font-weight: 850;
}

/* ---------- Filter form ---------- */
body[data-page="employee-audit-log"] .employee-filter-form {
    margin: 0;
    padding: 14px;
    border: 1px solid rgba(var(--primary-rgb), .10);
    border-radius: 12px;
    background: rgba(255,255,255,.80);
    box-shadow: inset 0 1px 0 #fff;
}

body[data-page="employee-audit-log"] .employee-filter-grid {
    display: grid;
    gap: 10px;
}

body[data-page="employee-audit-log"] .employee-filter-grid-four {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

body[data-page="employee-audit-log"] .employee-filter-grid label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 6px;
    color: #515660;
    font-size: .68rem;
    font-weight: 850;
}

body[data-page="employee-audit-log"] .employee-filter-grid label::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--primary);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), .09);
}

body[data-page="employee-audit-log"] .employee-filter-grid input,
body[data-page="employee-audit-log"] .employee-filter-grid select {
    width: 100%;
    min-height: 41px;
    padding: 8px 10px;
    border: 1px solid #ddd8d4;
    border-radius: 10px;
    color: #33363d;
    background: linear-gradient(180deg, #fff, #fbfaf8);
    font: inherit;
    font-size: .71rem;
    box-shadow:
        inset 0 1px 2px rgba(38,39,45,.035),
        0 3px 8px rgba(38,39,45,.025);
}

body[data-page="employee-audit-log"] .employee-filter-grid input:focus,
body[data-page="employee-audit-log"] .employee-filter-grid select:focus {
    outline: none;
    border-color: rgba(var(--copper-rgb), .55);
    box-shadow:
        0 0 0 4px rgba(var(--copper-rgb), .09),
        0 7px 16px rgba(var(--copper-rgb), .07);
}

body[data-page="employee-audit-log"] .employee-filter-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 12px;
}

body[data-page="employee-audit-log"] .employee-filter-actions button,
body[data-page="employee-audit-log"] .employee-filter-actions .header-action-btn {
    width: 100%;
    min-height: 40px;
    margin: 0;
    border: 1px solid var(--primary);
    border-radius: 10px;
    color: #fff;
    background:
        linear-gradient(145deg, var(--primary), var(--primary-dark));
    box-shadow:
        0 8px 18px rgba(var(--primary-rgb), .20),
        inset 0 1px 0 rgba(255,255,255,.16);
    font: inherit;
    font-size: .68rem;
    font-weight: 900;
    cursor: pointer;
}

body[data-page="employee-audit-log"] .employee-filter-actions .header-action-btn {
    border-color: var(--crimson);
    background:
        linear-gradient(145deg, var(--crimson), var(--crimson-dark));
    box-shadow:
        0 8px 18px rgba(var(--crimson-rgb), .20),
        inset 0 1px 0 rgba(255,255,255,.16);
}

/* ---------- Table card ---------- */
body[data-page="employee-audit-log"] .info-card {
    padding: 0;
    overflow: hidden;
    border: 1px solid rgba(var(--primary-rgb), .12);
    border-radius: 14px;
    background: #fff;
    box-shadow:
        0 10px 24px rgba(38,39,45,.055),
        inset 0 1px 0 #fff;
}

body[data-page="employee-audit-log"] .table-responsive {
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--copper-rgb), .45) rgba(var(--primary-rgb), .06);
}

body[data-page="employee-audit-log"] table {
    width: 100%;
    min-width: 980px;
    border-collapse: separate;
    border-spacing: 0;
}

body[data-page="employee-audit-log"] thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    padding: 12px 13px;
    border-bottom: 1px solid rgba(255,255,255,.10);
    color: #fff;
    background:
        linear-gradient(145deg, var(--primary-dark), var(--primary));
    font-size: .63rem;
    font-weight: 900;
    letter-spacing: .03em;
    text-align: left;
    white-space: nowrap;
}

body[data-page="employee-audit-log"] tbody td {
    padding: 11px 13px;
    border-bottom: 1px solid #ece8e4;
    color: #454750;
    background: #fff;
    font-size: .65rem;
    vertical-align: top;
}

body[data-page="employee-audit-log"] tbody tr:nth-child(even) td {
    background: #fbfaf8;
}

body[data-page="employee-audit-log"] tbody tr:hover td {
    background: rgba(var(--copper-rgb), .055);
}

body[data-page="employee-audit-log"] tbody td strong {
    color: #2f3540;
    font-size: .67rem;
}

body[data-page="employee-audit-log"] tbody td small {
    color: var(--text-muted);
    font-size: .58rem;
}

body[data-page="employee-audit-log"] tbody td:nth-child(4),
body[data-page="employee-audit-log"] tbody td:nth-child(5) {
    font-weight: 850;
    color: var(--copper-dark);
}

body[data-page="employee-audit-log"] tbody td:nth-child(6) {
    color: #7a5c53;
    background-image:
        linear-gradient(90deg, rgba(var(--crimson-rgb), .035), transparent);
}

body[data-page="employee-audit-log"] tbody td:nth-child(7) {
    color: #2f5f3a;
    background-image:
        linear-gradient(90deg, rgba(21,128,61,.04), transparent);
}

body[data-page="employee-audit-log"] .table-responsive::-webkit-scrollbar {
    height: 9px;
}

body[data-page="employee-audit-log"] .table-responsive::-webkit-scrollbar-track {
    background: rgba(var(--primary-rgb), .055);
}

body[data-page="employee-audit-log"] .table-responsive::-webkit-scrollbar-thumb {
    border: 2px solid transparent;
    border-radius: 999px;
    background:
        linear-gradient(90deg, var(--primary), var(--copper));
    background-clip: padding-box;
}

/* ---------- Pagination ---------- */
body[data-page="employee-audit-log"] .pagination-bar {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    margin-top: 14px;
}

body[data-page="employee-audit-log"] .pagination-bar a,
body[data-page="employee-audit-log"] .pagination-bar span {
    display: inline-flex;
    min-width: 34px;
    min-height: 34px;
    align-items: center;
    justify-content: center;
    padding: 5px 9px;
    border: 1px solid #ddd8d4;
    border-radius: 9px;
    color: #4f535e;
    background: #fff;
    font-size: .67rem;
    font-weight: 800;
    text-decoration: none;
}

body[data-page="employee-audit-log"] .pagination-bar a.active {
    color: #fff;
    border-color: var(--primary);
    background:
        linear-gradient(145deg, var(--primary), var(--copper));
    box-shadow:
        0 6px 14px rgba(var(--primary-rgb), .18);
}

/* ---------- Bottom nav ---------- */
body[data-page="employee-audit-log"] .bottom-nav {
    position: fixed;
    z-index: 1000;
    right: 50%;
    bottom: max(10px, env(safe-area-inset-bottom));
    display: grid;
    grid-template-columns: repeat(3, minmax(82px, 1fr));
    width: min(calc(100% - 24px), 460px);
    padding: 5px;
    border: 1px solid rgba(216,210,215,.92);
    border-radius: 15px;
    background: rgba(255,255,255,.94);
    box-shadow:
        0 12px 32px rgba(38,39,45,.15),
        inset 0 1px 0 rgba(255,255,255,.95);
    backdrop-filter: blur(14px);
    transform: translateX(50%);
}

body[data-page="employee-audit-log"] .bottom-nav a {
    display: flex;
    min-height: 38px;
    align-items: center;
    justify-content: center;
    padding: 6px 9px;
    border-radius: 10px;
    color: var(--text-soft);
    font-size: .72rem;
    font-weight: 800;
    text-align: center;
    text-decoration: none;
}

body[data-page="employee-audit-log"] .bottom-nav a.active {
    color: #fff;
    background:
        linear-gradient(145deg, var(--primary), var(--copper));
    box-shadow:
        0 5px 13px rgba(var(--primary-rgb), .22),
        inset 0 1px 0 rgba(255,255,255,.14);
}

/* ---------- Responsive ---------- */
@media (max-width: 700px) {
    body[data-page="employee-audit-log"] .container.page-with-nav {
        width: min(100% - 18px, 640px);
        padding: 9px 0 82px;
    }

    body[data-page="employee-audit-log"] .employee-management-hero {
        grid-template-columns: 1fr;
        align-items: stretch;
        gap: 12px;
        min-height: 0;
        padding: 18px 15px;
        border-radius: 15px;
    }

    body[data-page="employee-audit-log"] .employee-management-hero::before {
        top: 58px;
        font-size: 4rem;
    }

    body[data-page="employee-audit-log"] .employee-management-hero h1 {
        font-size: 1.45rem;
    }

    body[data-page="employee-audit-log"] .employee-management-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        padding: 8px;
        gap: 6px;
    }

    body[data-page="employee-audit-log"] .header-action-btn {
        min-height: 34px;
        padding: 6px 8px;
        font-size: .61rem;
    }

    body[data-page="employee-audit-log"] .employee-filter-card,
    body[data-page="employee-audit-log"] .employee-list-section {
        margin-top: 10px;
        padding: 13px;
        border-radius: 13px;
    }

    body[data-page="employee-audit-log"] .employee-filter-grid-four {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 7px;
    }

    body[data-page="employee-audit-log"] .employee-filter-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body[data-page="employee-audit-log"] .table-responsive {
        border-radius: 11px;
    }

    body[data-page="employee-audit-log"] table {
        min-width: 900px;
    }

    body[data-page="employee-audit-log"] .bottom-nav {
        bottom: max(7px, env(safe-area-inset-bottom));
        width: calc(100% - 18px);
        max-width: 430px;
        padding: 4px;
        border-radius: 14px;
    }

    body[data-page="employee-audit-log"] .bottom-nav a {
        min-height: 36px;
        padding: 5px;
        font-size: .68rem;
    }
}

@media (max-width: 390px) {
    body[data-page="employee-audit-log"] .employee-filter-grid-four {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 5px;
    }

    body[data-page="employee-audit-log"] .employee-management-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (prefers-reduced-motion: reduce) {
    body[data-page="employee-audit-log"] *,
    body[data-page="employee-audit-log"] *::before,
    body[data-page="employee-audit-log"] *::after {
        animation: none !important;
        transition: none !important;
    }
}
/* =========================================================
   PRMS Attendance Management — Premium Indigo & Amber UI
   Page scope: body[data-page="attendance-management"]
   Palette: deep indigo-black + amber gold + burgundy
   ========================================================= */

body[data-page="attendance-management"] {
    --page-bg: #f4f2f3;
    --surface: #ffffff;
    --surface-soft: #faf8f9;
    --text: #252632;
    --text-soft: #666876;
    --text-muted: #8c8e99;
    --line: #e3dde3;

    --primary: #30374f;
    --primary-dark: #1b2030;
    --primary-rgb: 48, 55, 79;

    --amber: #c1842f;
    --amber-dark: #7d4f12;
    --amber-rgb: 193, 132, 47;

    --burgundy: #8f1d46;
    --burgundy-dark: #5d0f2b;
    --burgundy-rgb: 143, 29, 70;

    --success: #15803d;
    --success-dark: #166534;
    --success-rgb: 21, 128, 61;

    --danger: #b91c1c;
    --danger-dark: #7f1d1d;
    --danger-rgb: 185, 28, 28;

    margin: 0;
    color: var(--text);
    background:
        radial-gradient(circle at 100% 0%, rgba(var(--primary-rgb), .085), transparent 31rem),
        radial-gradient(circle at 0% 100%, rgba(var(--amber-rgb), .045), transparent 27rem),
        var(--page-bg);
    font-family: Inter, "Segoe UI", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

body[data-page="attendance-management"] *,
body[data-page="attendance-management"] *::before,
body[data-page="attendance-management"] *::after {
    box-sizing: border-box;
}

body[data-page="attendance-management"] a,
body[data-page="attendance-management"] button,
body[data-page="attendance-management"] input,
body[data-page="attendance-management"] select {
    -webkit-tap-highlight-color: transparent;
}

body[data-page="attendance-management"] .container.page-with-nav {
    width: min(100% - 32px, 1240px);
    margin: 0 auto;
    padding: 18px 4px 92px;
}

/* ---------- Hero ---------- */
body[data-page="attendance-management"] .attendance-management-hero {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 18px;
    min-height: 190px;
    padding: 27px 25px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.20);
    border-radius: 19px;
    color: #fff;
    background:
        radial-gradient(circle at 12% 8%, rgba(255,255,255,.17), transparent 24%),
        radial-gradient(circle at 88% 112%, rgba(255,255,255,.10), transparent 38%),
        linear-gradient(118deg, rgba(255,255,255,.05), transparent 42%),
        linear-gradient(135deg, #191d2a 0%, #30374f 50%, #7d4f12 100%);
    box-shadow:
        0 22px 50px rgba(27,32,48,.27),
        inset 0 1px 0 rgba(255,255,255,.13),
        inset 0 -1px 0 rgba(25,29,42,.24);
}

body[data-page="attendance-management"] .attendance-management-hero::before {
    content: "ATTENDANCE";
    position: absolute;
    z-index: -1;
    left: 24px;
    top: 61px;
    color: rgba(255,255,255,.04);
    font-size: clamp(3.8rem, 7.5vw, 6.8rem);
    font-weight: 950;
    letter-spacing: -.085em;
    line-height: .8;
    pointer-events: none;
}

body[data-page="attendance-management"] .attendance-management-hero::after {
    content: "";
    position: absolute;
    right: -80px;
    top: -96px;
    width: 270px;
    height: 270px;
    border: 38px solid rgba(255,255,255,.035);
    border-radius: 50%;
    box-shadow:
        0 0 0 1px rgba(255,255,255,.05),
        0 0 82px rgba(240,211,150,.13);
}

body[data-page="attendance-management"] .attendance-management-hero > div:first-child {
    position: relative;
    z-index: 2;
    min-width: 0;
}

body[data-page="attendance-management"] .page-subtitle {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 27px;
    margin: 0 0 8px;
    padding: 4px 10px;
    border: 1px solid rgba(240,211,150,.24);
    border-radius: 999px;
    color: #ffedc4;
    background: rgba(240,211,150,.10);
    font-size: .62rem;
    font-weight: 900;
    letter-spacing: .11em;
    text-transform: uppercase;
}

body[data-page="attendance-management"] .page-subtitle::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #efd08f;
    box-shadow:
        0 0 0 4px rgba(239,208,143,.12),
        0 0 14px rgba(239,208,143,.35);
}

body[data-page="attendance-management"] .attendance-management-hero h1 {
    margin: 0;
    color: #fff;
    font-size: clamp(1.65rem, 2.9vw, 2.45rem);
    font-weight: 900;
    line-height: 1.18;
    letter-spacing: -.03em;
}

body[data-page="attendance-management"] .user-inline {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 9px;
    color: rgba(255,255,255,.76);
    font-size: .72rem;
}

body[data-page="attendance-management"] .role-badge {
    display: inline-flex;
    min-height: 25px;
    align-items: center;
    padding: 3px 9px;
    border: 1px solid rgba(255,255,255,.20);
    border-radius: 999px;
    color: #fff;
    background: rgba(255,255,255,.10);
    font-size: .65rem;
    font-weight: 850;
}

body[data-page="attendance-management"] .attendance-management-actions {
    position: relative;
    z-index: 2;
    min-width: 170px;
    padding: 10px;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 12px;
    background:
        linear-gradient(145deg, rgba(255,255,255,.13), rgba(255,255,255,.055));
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.12),
        0 14px 28px rgba(27,32,48,.16);
    backdrop-filter: blur(12px);
}

body[data-page="attendance-management"] .header-action-btn {
    display: inline-flex;
    width: 100%;
    min-height: 39px;
    align-items: center;
    justify-content: center;
    padding: 7px 12px;
    border: 1px solid rgba(240,211,150,.75);
    border-radius: 11px;
    color: #30240f;
    background:
        linear-gradient(145deg, #f0d396, var(--amber));
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.45),
        0 9px 20px rgba(var(--amber-rgb), .20);
    font-size: .68rem;
    font-weight: 850;
    text-align: center;
    text-decoration: none;
}

/* ---------- Alerts ---------- */
body[data-page="attendance-management"] .alert {
    margin-top: 12px;
    padding: 11px 13px;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: #fff;
    box-shadow: 0 7px 16px rgba(37,38,50,.045);
    font-size: .72rem;
}

/* ---------- Main sections ---------- */
body[data-page="attendance-management"] .attendance-filter-card,
body[data-page="attendance-management"] .attendance-record-section {
    position: relative;
    overflow: hidden;
    margin-top: 14px;
    padding: 18px;
    border: 1px solid rgba(var(--primary-rgb), .15);
    border-radius: 16px;
    background:
        radial-gradient(circle at 100% 0%, rgba(var(--primary-rgb), .07), transparent 190px),
        linear-gradient(145deg, #ffffff, #faf8f9);
    box-shadow:
        0 12px 28px rgba(37,38,50,.07),
        inset 0 1px 0 #fff;
}

body[data-page="attendance-management"] .attendance-filter-card::before,
body[data-page="attendance-management"] .attendance-record-section::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 5px;
    background:
        linear-gradient(180deg, var(--primary), var(--amber));
}

body[data-page="attendance-management"] .section-title-row {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
    padding: 12px 13px;
    border: 1px solid rgba(var(--primary-rgb), .11);
    border-radius: 12px;
    background:
        linear-gradient(145deg, rgba(255,255,255,.96), rgba(var(--primary-rgb), .04));
}

body[data-page="attendance-management"] .section-title-row h3 {
    margin: 0;
    color: #343a50;
    font-size: 1rem;
}

body[data-page="attendance-management"] .section-subtitle {
    margin: 4px 0 0;
    color: var(--text-muted);
    font-size: .69rem;
}

body[data-page="attendance-management"] .section-count {
    display: inline-flex;
    min-height: 28px;
    align-items: center;
    padding: 4px 9px;
    border: 1px solid rgba(var(--amber-rgb), .18);
    border-radius: 999px;
    color: var(--amber-dark);
    background: rgba(var(--amber-rgb), .07);
    font-size: .67rem;
    font-weight: 850;
}

/* ---------- Filter form ---------- */
body[data-page="attendance-management"] .attendance-filter-form {
    margin: 0;
    padding: 14px;
    border: 1px solid rgba(var(--primary-rgb), .10);
    border-radius: 12px;
    background: rgba(255,255,255,.80);
    box-shadow: inset 0 1px 0 #fff;
}

body[data-page="attendance-management"] .attendance-filter-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

body[data-page="attendance-management"] .attendance-filter-grid label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 6px;
    color: #525767;
    font-size: .68rem;
    font-weight: 850;
}

body[data-page="attendance-management"] .attendance-filter-grid label::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--primary);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), .09);
}

body[data-page="attendance-management"] .attendance-filter-grid input,
body[data-page="attendance-management"] .attendance-filter-grid select {
    width: 100%;
    min-height: 41px;
    padding: 8px 10px;
    border: 1px solid #ddd7dd;
    border-radius: 10px;
    color: #333642;
    background: linear-gradient(180deg, #fff, #fbfafb);
    font: inherit;
    font-size: .71rem;
    box-shadow:
        inset 0 1px 2px rgba(37,38,50,.035),
        0 3px 8px rgba(37,38,50,.025);
}

body[data-page="attendance-management"] .attendance-filter-grid input:focus,
body[data-page="attendance-management"] .attendance-filter-grid select:focus {
    outline: none;
    border-color: rgba(var(--amber-rgb), .55);
    box-shadow:
        0 0 0 4px rgba(var(--amber-rgb), .09),
        0 7px 16px rgba(var(--amber-rgb), .07);
}

body[data-page="attendance-management"] .attendance-filter-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-top: 12px;
}

body[data-page="attendance-management"] .attendance-filter-actions button,
body[data-page="attendance-management"] .attendance-filter-actions .header-action-btn {
    width: 100%;
    min-height: 40px;
    margin: 0;
    border: 1px solid var(--primary);
    border-radius: 10px;
    color: #fff;
    background:
        linear-gradient(145deg, var(--primary), var(--primary-dark));
    box-shadow:
        0 8px 18px rgba(var(--primary-rgb), .20),
        inset 0 1px 0 rgba(255,255,255,.16);
    font: inherit;
    font-size: .68rem;
    font-weight: 900;
    cursor: pointer;
}

body[data-page="attendance-management"] .attendance-filter-actions .header-action-btn:nth-child(2) {
    border-color: var(--burgundy);
    background:
        linear-gradient(145deg, var(--burgundy), var(--burgundy-dark));
    box-shadow:
        0 8px 18px rgba(var(--burgundy-rgb), .20),
        inset 0 1px 0 rgba(255,255,255,.16);
}

body[data-page="attendance-management"] .attendance-filter-actions .header-action-btn:last-child {
    border-color: var(--amber);
    color: #30240f;
    background:
        linear-gradient(145deg, #f0d396, var(--amber));
    box-shadow:
        0 8px 18px rgba(var(--amber-rgb), .20),
        inset 0 1px 0 rgba(255,255,255,.42);
}

/* ---------- Record list ---------- */
body[data-page="attendance-management"] .attendance-management-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

body[data-page="attendance-management"] .attendance-management-card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 16px 16px 15px 19px;
    border: 1px solid rgba(var(--primary-rgb), .14);
    border-radius: 16px;
    background:
        radial-gradient(circle at 100% 0%, rgba(var(--amber-rgb), .06), transparent 160px),
        linear-gradient(145deg, #ffffff, #fbf9fa);
    box-shadow:
        0 10px 24px rgba(37,38,50,.06),
        inset 0 1px 0 #fff;
}

body[data-page="attendance-management"] .attendance-management-card::before {
    content: "";
    position: absolute;
    inset: 11px auto 11px 0;
    width: 5px;
    border-radius: 99px;
    background:
        linear-gradient(180deg, var(--primary), var(--amber));
}

body[data-page="attendance-management"] .attendance-management-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

body[data-page="attendance-management"] .attendance-management-top h3 {
    margin: 0;
    color: #353b50;
    font-size: .93rem;
    font-weight: 900;
}

body[data-page="attendance-management"] .attendance-management-top p {
    margin: 3px 0 0;
    color: var(--text-muted);
    font-size: .63rem;
}

body[data-page="attendance-management"] .attendance-status-pill {
    display: inline-flex;
    flex: 0 0 auto;
    min-height: 29px;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    color: #fff;
    font-size: .65rem;
    font-weight: 900;
}

body[data-page="attendance-management"] .attendance-status-pill.status-in-use {
    background:
        linear-gradient(145deg, var(--success), var(--success-dark));
    box-shadow:
        0 6px 14px rgba(var(--success-rgb), .20),
        inset 0 1px 0 rgba(255,255,255,.16);
}

body[data-page="attendance-management"] .attendance-status-pill.status-idle {
    background:
        linear-gradient(145deg, var(--primary), var(--primary-dark));
    box-shadow:
        0 6px 14px rgba(var(--primary-rgb), .20),
        inset 0 1px 0 rgba(255,255,255,.16);
}

/* ---------- Room highlight ---------- */
body[data-page="attendance-management"] .attendance-room-highlight {
    display: grid;
    grid-template-columns: 1.15fr .85fr 1fr;
    gap: 7px;
    margin-top: 12px;
    padding: 10px;
    border: 1px solid rgba(var(--amber-rgb), .22);
    border-radius: 12px;
    background:
        radial-gradient(circle at 100% 0%, rgba(240,211,150,.20), transparent 120px),
        linear-gradient(145deg, #fffdf8, #fff8eb);
}

body[data-page="attendance-management"] .attendance-room-highlight > div {
    min-width: 0;
}

body[data-page="attendance-management"] .attendance-room-highlight span {
    display: block;
    color: #856b3c;
    font-size: .59rem;
}

body[data-page="attendance-management"] .attendance-room-highlight strong {
    display: block;
    margin-top: 3px;
    color: #5d3f0f;
    font-size: .70rem;
    overflow-wrap: anywhere;
}

/* ---------- Info grid ---------- */
body[data-page="attendance-management"] .attendance-info-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
    margin-top: 11px;
}

body[data-page="attendance-management"] .attendance-info-grid > div {
    min-width: 0;
    padding: 9px 10px;
    border: 1px solid #e3dee3;
    border-radius: 10px;
    background:
        linear-gradient(145deg, rgba(255,255,255,.95), rgba(250,248,249,.94));
}

body[data-page="attendance-management"] .attendance-info-grid span {
    display: block;
    color: var(--text-muted);
    font-size: .59rem;
}

body[data-page="attendance-management"] .attendance-info-grid strong {
    display: block;
    margin-top: 3px;
    color: #3a3c46;
    font-size: .67rem;
    overflow-wrap: anywhere;
}

/* ---------- Notes ---------- */
body[data-page="attendance-management"] .attendance-management-note {
    margin-top: 10px;
    padding: 9px 10px;
    border: 1px solid #e4dee4;
    border-radius: 10px;
    background:
        linear-gradient(145deg, #fffdfb, #faf7f8);
}

body[data-page="attendance-management"] .attendance-management-note span {
    display: block;
    color: var(--burgundy-dark);
    font-size: .59rem;
    font-weight: 850;
}

body[data-page="attendance-management"] .attendance-management-note p {
    margin: 4px 0 0;
    color: var(--text-soft);
    font-size: .67rem;
    line-height: 1.48;
    overflow-wrap: anywhere;
}

/* ---------- Pagination ---------- */
body[data-page="attendance-management"] .pagination-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    margin-top: 14px;
    padding: 11px 12px;
    border: 1px solid rgba(var(--primary-rgb), .10);
    border-radius: 12px;
    background: rgba(255,255,255,.78);
}

body[data-page="attendance-management"] .pagination-info {
    color: var(--text-muted);
    font-size: .65rem;
    font-weight: 800;
}

body[data-page="attendance-management"] .pagination-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
}

body[data-page="attendance-management"] .pagination-actions a,
body[data-page="attendance-management"] .pagination-actions span {
    display: inline-flex;
    min-width: 34px;
    min-height: 34px;
    align-items: center;
    justify-content: center;
    padding: 5px 9px;
    border: 1px solid #ddd7de;
    border-radius: 9px;
    color: #4f5363;
    background: #fff;
    font-size: .67rem;
    font-weight: 800;
    text-decoration: none;
}

body[data-page="attendance-management"] .pagination-actions span.active {
    color: #fff;
    border-color: var(--primary);
    background:
        linear-gradient(145deg, var(--primary), var(--amber));
    box-shadow:
        0 6px 14px rgba(var(--primary-rgb), .18);
}

/* ---------- Empty state ---------- */
body[data-page="attendance-management"] .empty-state-card {
    display: grid;
    min-height: 100px;
    place-items: center;
    padding: 18px;
    border: 1px dashed rgba(var(--primary-rgb), .22);
    border-radius: 11px;
    color: var(--text-muted);
    background: rgba(var(--primary-rgb), .035);
    font-size: .72rem;
    text-align: center;
}

/* ---------- Bottom nav ---------- */
body[data-page="attendance-management"] .bottom-nav {
    position: fixed;
    z-index: 1000;
    right: 50%;
    bottom: max(10px, env(safe-area-inset-bottom));
    display: grid;
    grid-template-columns: repeat(3, minmax(82px, 1fr));
    width: min(calc(100% - 24px), 460px);
    padding: 5px;
    border: 1px solid rgba(216,209,218,.92);
    border-radius: 15px;
    background: rgba(255,255,255,.94);
    box-shadow:
        0 12px 32px rgba(37,38,50,.15),
        inset 0 1px 0 rgba(255,255,255,.95);
    backdrop-filter: blur(14px);
    transform: translateX(50%);
}

body[data-page="attendance-management"] .bottom-nav a {
    display: flex;
    min-height: 38px;
    align-items: center;
    justify-content: center;
    padding: 6px 9px;
    border-radius: 10px;
    color: var(--text-soft);
    font-size: .72rem;
    font-weight: 800;
    text-align: center;
    text-decoration: none;
}

body[data-page="attendance-management"] .bottom-nav a.active {
    color: #fff;
    background:
        linear-gradient(145deg, var(--primary), var(--amber));
    box-shadow:
        0 5px 13px rgba(var(--primary-rgb), .22),
        inset 0 1px 0 rgba(255,255,255,.14);
}

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
    body[data-page="attendance-management"] .attendance-management-list {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 700px) {
    body[data-page="attendance-management"] .container.page-with-nav {
        width: min(100% - 18px, 640px);
        padding: 9px 0 82px;
    }

    body[data-page="attendance-management"] .attendance-management-hero {
        grid-template-columns: 1fr;
        align-items: stretch;
        gap: 12px;
        min-height: 0;
        padding: 18px 15px;
        border-radius: 15px;
    }

    body[data-page="attendance-management"] .attendance-management-hero::before {
        top: 58px;
        font-size: 3.7rem;
    }

    body[data-page="attendance-management"] .attendance-management-hero h1 {
        font-size: 1.45rem;
    }

    body[data-page="attendance-management"] .attendance-management-actions {
        width: 100%;
        min-width: 0;
        padding: 8px;
    }

    body[data-page="attendance-management"] .attendance-filter-card,
    body[data-page="attendance-management"] .attendance-record-section {
        margin-top: 10px;
        padding: 13px;
        border-radius: 13px;
    }

    body[data-page="attendance-management"] .attendance-filter-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 7px;
    }

    body[data-page="attendance-management"] .attendance-filter-grid > div:nth-child(2),
    body[data-page="attendance-management"] .attendance-filter-grid > div:nth-child(3) {
        grid-column: auto;
    }

    body[data-page="attendance-management"] .attendance-filter-actions {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 6px;
    }

    body[data-page="attendance-management"] .attendance-filter-actions button,
    body[data-page="attendance-management"] .attendance-filter-actions .header-action-btn {
        min-height: 35px;
        padding: 6px;
        font-size: .59rem;
    }

    body[data-page="attendance-management"] .attendance-management-list {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    body[data-page="attendance-management"] .attendance-management-card {
        padding: 13px 12px 12px 15px;
        border-radius: 13px;
    }

    body[data-page="attendance-management"] .attendance-room-highlight {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 5px;
    }

    body[data-page="attendance-management"] .attendance-info-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 5px;
    }

    body[data-page="attendance-management"] .pagination-card {
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    body[data-page="attendance-management"] .pagination-actions {
        justify-content: flex-start;
    }

    body[data-page="attendance-management"] .bottom-nav {
        bottom: max(7px, env(safe-area-inset-bottom));
        width: calc(100% - 18px);
        max-width: 430px;
        padding: 4px;
        border-radius: 14px;
    }

    body[data-page="attendance-management"] .bottom-nav a {
        min-height: 36px;
        padding: 5px;
        font-size: .68rem;
    }
}

@media (max-width: 390px) {
    body[data-page="attendance-management"] .attendance-management-top {
        align-items: stretch;
        flex-direction: column;
    }

    body[data-page="attendance-management"] .attendance-status-pill {
        align-self: flex-start;
    }

    body[data-page="attendance-management"] .attendance-room-highlight {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (prefers-reduced-motion: reduce) {
    body[data-page="attendance-management"] *,
    body[data-page="attendance-management"] *::before,
    body[data-page="attendance-management"] *::after {
        animation: none !important;
        transition: none !important;
    }
}
/* =========================================================
   PRMS Applications — Premium Sapphire & Burgundy UI
   Page scope: body[data-page="applications"]
   Palette: deep sapphire + burgundy + champagne gold
   ========================================================= */

body[data-page="applications"] {
    --page-bg: #f4f2f5;
    --surface: #ffffff;
    --surface-soft: #faf8fb;
    --text: #272633;
    --text-soft: #686474;
    --text-muted: #8d8997;
    --line: #e4dee6;

    --primary: #2f3f66;
    --primary-dark: #1a2540;
    --primary-rgb: 47, 63, 102;

    --burgundy: #8f1d46;
    --burgundy-dark: #5f102d;
    --burgundy-rgb: 143, 29, 70;

    --gold: #c89a45;
    --gold-dark: #7c5718;
    --gold-light: #f1d9a2;

    --success: #15803d;
    --success-dark: #166534;
    --success-rgb: 21, 128, 61;

    --warning: #d97706;
    --warning-dark: #92400e;
    --warning-rgb: 217, 119, 6;

    --danger: #b91c1c;
    --danger-dark: #7f1d1d;
    --danger-rgb: 185, 28, 28;

    margin: 0;
    color: var(--text);
    background:
        radial-gradient(circle at 100% 0%, rgba(var(--primary-rgb), .085), transparent 31rem),
        radial-gradient(circle at 0% 100%, rgba(var(--burgundy-rgb), .05), transparent 27rem),
        var(--page-bg);
    font-family: Inter, "Segoe UI", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

body[data-page="applications"] *,
body[data-page="applications"] *::before,
body[data-page="applications"] *::after {
    box-sizing: border-box;
}

body[data-page="applications"] a,
body[data-page="applications"] button,
body[data-page="applications"] input,
body[data-page="applications"] select {
    -webkit-tap-highlight-color: transparent;
}

body[data-page="applications"] .container.page-with-nav {
    width: min(100% - 32px, 1220px);
    margin: 0 auto;
    padding: 18px 4px 92px;
}

/* ---------- Hero ---------- */
body[data-page="applications"] .applications-hero {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 18px;
    min-height: 188px;
    padding: 27px 25px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.20);
    border-radius: 19px;
    color: #fff;
    background:
        radial-gradient(circle at 12% 8%, rgba(255,255,255,.17), transparent 24%),
        radial-gradient(circle at 88% 112%, rgba(255,255,255,.10), transparent 38%),
        linear-gradient(118deg, rgba(255,255,255,.05), transparent 42%),
        linear-gradient(135deg, #1a2540 0%, #2f3f66 50%, #6f173b 100%);
    box-shadow:
        0 22px 50px rgba(26,37,64,.27),
        inset 0 1px 0 rgba(255,255,255,.13),
        inset 0 -1px 0 rgba(26,37,64,.24);
}

body[data-page="applications"] .applications-hero::before {
    content: "APPLICATIONS";
    position: absolute;
    z-index: -1;
    left: 24px;
    top: 61px;
    color: rgba(255,255,255,.04);
    font-size: clamp(3.8rem, 7.5vw, 6.8rem);
    font-weight: 950;
    letter-spacing: -.085em;
    line-height: .8;
    pointer-events: none;
}

body[data-page="applications"] .applications-hero::after {
    content: "";
    position: absolute;
    right: -80px;
    top: -96px;
    width: 270px;
    height: 270px;
    border: 38px solid rgba(255,255,255,.035);
    border-radius: 50%;
    box-shadow:
        0 0 0 1px rgba(255,255,255,.05),
        0 0 82px rgba(241,217,162,.13);
}

body[data-page="applications"] .applications-hero > div:first-child {
    position: relative;
    z-index: 2;
    min-width: 0;
}

body[data-page="applications"] .page-subtitle {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 27px;
    margin: 0 0 8px;
    padding: 4px 10px;
    border: 1px solid rgba(241,217,162,.24);
    border-radius: 999px;
    color: #ffedc4;
    background: rgba(241,217,162,.10);
    font-size: .62rem;
    font-weight: 900;
    letter-spacing: .11em;
    text-transform: uppercase;
}

body[data-page="applications"] .page-subtitle::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--gold-light);
    box-shadow:
        0 0 0 4px rgba(241,217,162,.12),
        0 0 14px rgba(241,217,162,.35);
}

body[data-page="applications"] .applications-hero h1 {
    margin: 0;
    color: #fff;
    font-size: clamp(1.65rem, 2.9vw, 2.45rem);
    font-weight: 900;
    line-height: 1.18;
    letter-spacing: -.03em;
}

body[data-page="applications"] .user-inline {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 9px;
    color: rgba(255,255,255,.76);
    font-size: .72rem;
}

body[data-page="applications"] .role-badge {
    display: inline-flex;
    min-height: 25px;
    align-items: center;
    padding: 3px 9px;
    border: 1px solid rgba(255,255,255,.20);
    border-radius: 999px;
    color: #fff;
    background: rgba(255,255,255,.10);
    font-size: .65rem;
    font-weight: 850;
}

body[data-page="applications"] .applications-hero-actions {
    position: relative;
    z-index: 2;
    min-width: 170px;
    padding: 10px;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 12px;
    background:
        linear-gradient(145deg, rgba(255,255,255,.13), rgba(255,255,255,.055));
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.12),
        0 14px 28px rgba(26,37,64,.16);
    backdrop-filter: blur(12px);
}

body[data-page="applications"] .header-action-btn {
    display: inline-flex;
    width: 100%;
    min-height: 39px;
    align-items: center;
    justify-content: center;
    padding: 7px 12px;
    border: 1px solid var(--gold-light);
    border-radius: 11px;
    color: #30240f;
    background:
        linear-gradient(145deg, var(--gold-light), var(--gold));
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.45),
        0 9px 20px rgba(124,87,24,.20);
    font-size: .68rem;
    font-weight: 850;
    text-align: center;
    text-decoration: none;
}

/* ---------- Alerts ---------- */
body[data-page="applications"] .alert {
    margin-top: 12px;
    padding: 11px 13px;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: #fff;
    box-shadow: 0 7px 16px rgba(39,38,51,.045);
    font-size: .72rem;
}

/* ---------- Search / list sections ---------- */
body[data-page="applications"] .applications-search-card,
body[data-page="applications"] .applications-list-section,
body[data-page="applications"] .applications-pagination-card {
    position: relative;
    overflow: hidden;
    margin-top: 14px;
    padding: 18px;
    border: 1px solid rgba(var(--primary-rgb), .15);
    border-radius: 16px;
    background:
        radial-gradient(circle at 100% 0%, rgba(var(--primary-rgb), .07), transparent 190px),
        linear-gradient(145deg, #ffffff, #faf8fb);
    box-shadow:
        0 12px 28px rgba(39,38,51,.07),
        inset 0 1px 0 #fff;
}

body[data-page="applications"] .applications-search-card::before,
body[data-page="applications"] .applications-list-section::before,
body[data-page="applications"] .applications-pagination-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 5px;
    background:
        linear-gradient(180deg, var(--primary), var(--burgundy));
}

body[data-page="applications"] .section-title-row {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
    padding: 12px 13px;
    border: 1px solid rgba(var(--primary-rgb), .11);
    border-radius: 12px;
    background:
        linear-gradient(145deg, rgba(255,255,255,.96), rgba(var(--primary-rgb), .04));
}

body[data-page="applications"] .section-title-row h3 {
    margin: 0;
    color: #34415f;
    font-size: 1rem;
}

body[data-page="applications"] .section-subtitle {
    margin: 4px 0 0;
    color: var(--text-muted);
    font-size: .69rem;
}

body[data-page="applications"] .section-count {
    display: inline-flex;
    min-height: 28px;
    align-items: center;
    padding: 4px 9px;
    border: 1px solid rgba(var(--burgundy-rgb), .18);
    border-radius: 999px;
    color: var(--burgundy-dark);
    background: rgba(var(--burgundy-rgb), .07);
    font-size: .67rem;
    font-weight: 850;
}

/* ---------- Search form ---------- */
body[data-page="applications"] .applications-search-form {
    margin: 0;
    padding: 14px;
    border: 1px solid rgba(var(--primary-rgb), .10);
    border-radius: 12px;
    background: rgba(255,255,255,.80);
    box-shadow: inset 0 1px 0 #fff;
}

body[data-page="applications"] .applications-search-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

body[data-page="applications"] .applications-search-grid label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 6px;
    color: #53596a;
    font-size: .68rem;
    font-weight: 850;
}

body[data-page="applications"] .applications-search-grid label::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--primary);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), .09);
}

body[data-page="applications"] .applications-search-grid input,
body[data-page="applications"] .applications-search-grid select {
    width: 100%;
    min-height: 41px;
    padding: 8px 10px;
    border: 1px solid #ddd7df;
    border-radius: 10px;
    color: #343641;
    background: linear-gradient(180deg, #fff, #fbfafb);
    font: inherit;
    font-size: .71rem;
    box-shadow:
        inset 0 1px 2px rgba(39,38,51,.035),
        0 3px 8px rgba(39,38,51,.025);
}

body[data-page="applications"] .applications-search-grid input:focus,
body[data-page="applications"] .applications-search-grid select:focus {
    outline: none;
    border-color: rgba(var(--primary-rgb), .55);
    box-shadow:
        0 0 0 4px rgba(var(--primary-rgb), .09),
        0 7px 16px rgba(var(--primary-rgb), .07);
}

body[data-page="applications"] .applications-search-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 12px;
}

body[data-page="applications"] .applications-search-actions button,
body[data-page="applications"] .clear-filter-btn {
    display: inline-flex;
    width: 100%;
    min-height: 40px;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
    border: 1px solid var(--primary);
    border-radius: 10px;
    color: #fff;
    background:
        linear-gradient(145deg, var(--primary), var(--primary-dark));
    box-shadow:
        0 8px 18px rgba(var(--primary-rgb), .20),
        inset 0 1px 0 rgba(255,255,255,.16);
    font: inherit;
    font-size: .68rem;
    font-weight: 900;
    text-decoration: none;
    cursor: pointer;
}

body[data-page="applications"] .clear-filter-btn {
    border-color: var(--burgundy);
    background:
        linear-gradient(145deg, var(--burgundy), var(--burgundy-dark));
    box-shadow:
        0 8px 18px rgba(var(--burgundy-rgb), .20),
        inset 0 1px 0 rgba(255,255,255,.16);
}

/* ---------- Quick filters ---------- */
body[data-page="applications"] .applications-quick-filter-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
    margin-top: 12px;
    padding: 11px;
    border: 1px solid rgba(var(--primary-rgb), .10);
    border-radius: 12px;
    background: rgba(255,255,255,.76);
}

body[data-page="applications"] .applications-quick-filter-row > span {
    color: var(--text-muted);
    font-size: .66rem;
    font-weight: 850;
}

body[data-page="applications"] .applications-filter-chip {
    display: inline-flex;
    min-height: 28px;
    align-items: center;
    padding: 4px 9px;
    border: 1px solid rgba(var(--primary-rgb), .15);
    border-radius: 999px;
    color: var(--primary-dark);
    background: rgba(var(--primary-rgb), .06);
    font-size: .64rem;
    font-weight: 850;
    text-decoration: none;
}

body[data-page="applications"] .applications-filter-chip.pending {
    color: #7a4906;
    border-color: rgba(var(--warning-rgb), .20);
    background: rgba(var(--warning-rgb), .08);
}

body[data-page="applications"] .applications-filter-chip.approved {
    color: #166534;
    border-color: rgba(var(--success-rgb), .20);
    background: rgba(var(--success-rgb), .08);
}

body[data-page="applications"] .applications-filter-chip.rejected {
    color: #991b1b;
    border-color: rgba(var(--danger-rgb), .20);
    background: rgba(var(--danger-rgb), .07);
}

/* ---------- Pagination card ---------- */
body[data-page="applications"] .applications-pagination-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 13px 16px;
}

body[data-page="applications"] .applications-pagination-card span {
    display: block;
    color: var(--text-muted);
    font-size: .62rem;
}

body[data-page="applications"] .applications-pagination-card strong {
    display: block;
    margin-top: 3px;
    color: #3c4357;
    font-size: .78rem;
}

body[data-page="applications"] .applications-pagination-actions {
    display: flex;
    gap: 7px;
}

body[data-page="applications"] .applications-pagination-actions a {
    display: inline-flex;
    min-height: 34px;
    align-items: center;
    justify-content: center;
    padding: 6px 11px;
    border: 1px solid var(--primary);
    border-radius: 9px;
    color: #fff;
    background:
        linear-gradient(145deg, var(--primary), var(--primary-dark));
    font-size: .65rem;
    font-weight: 850;
    text-decoration: none;
}

/* ---------- Application cards ---------- */
body[data-page="applications"] .applications-list-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 11px;
}

body[data-page="applications"] .application-card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 16px 16px 14px 19px;
    border: 1px solid rgba(var(--primary-rgb), .14);
    border-radius: 15px;
    background:
        radial-gradient(circle at 100% 0%, rgba(var(--primary-rgb), .07), transparent 150px),
        linear-gradient(145deg, #ffffff, #fbf9fb);
    box-shadow:
        0 9px 22px rgba(39,38,51,.055),
        inset 0 1px 0 #fff;
}

body[data-page="applications"] .application-card::before {
    content: "";
    position: absolute;
    inset: 11px auto 11px 0;
    width: 5px;
    border-radius: 99px;
    background:
        linear-gradient(180deg, var(--primary), var(--burgundy));
}

body[data-page="applications"] .application-card.application-card-pending {
    border-color: rgba(var(--warning-rgb), .24);
    background:
        radial-gradient(circle at 100% 0%, rgba(var(--warning-rgb), .11), transparent 150px),
        linear-gradient(145deg, #fffdf8, #fff9ed);
}

body[data-page="applications"] .application-card.application-card-approved {
    border-color: rgba(var(--success-rgb), .20);
    background:
        radial-gradient(circle at 100% 0%, rgba(var(--success-rgb), .08), transparent 150px),
        linear-gradient(145deg, #ffffff, #f6fbf7);
}

body[data-page="applications"] .application-card.application-card-rejected {
    border-color: rgba(var(--danger-rgb), .18);
    background:
        radial-gradient(circle at 100% 0%, rgba(var(--danger-rgb), .07), transparent 150px),
        linear-gradient(145deg, #ffffff, #fdf7f7);
}

body[data-page="applications"] .application-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

body[data-page="applications"] .application-card-top h3 {
    margin: 0;
    color: #33415f;
    font-size: .92rem;
    font-weight: 900;
}

body[data-page="applications"] .application-card-top p {
    margin: 3px 0 0;
    color: var(--text-muted);
    font-size: .63rem;
}

body[data-page="applications"] .application-status-pill {
    display: inline-flex;
    flex: 0 0 auto;
    min-height: 29px;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    color: #fff;
    font-size: .65rem;
    font-weight: 900;
}

body[data-page="applications"] .application-status-pill.application-pill-pending {
    color: #3f2b08;
    background:
        linear-gradient(145deg, var(--gold-light), var(--gold));
    box-shadow: 0 6px 14px rgba(200,154,69,.22);
}

body[data-page="applications"] .application-status-pill.application-pill-approved {
    background:
        linear-gradient(145deg, var(--success), var(--success-dark));
}

body[data-page="applications"] .application-status-pill.application-pill-rejected {
    background:
        linear-gradient(145deg, var(--danger), var(--danger-dark));
}

/* ---------- Details ---------- */
body[data-page="applications"] .attendance-info-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    margin-top: 11px;
}

body[data-page="applications"] .attendance-info-grid > div {
    min-width: 0;
    padding: 9px 10px;
    border: 1px solid #e5dfe6;
    border-radius: 10px;
    background:
        linear-gradient(145deg, rgba(255,255,255,.95), rgba(250,248,251,.94));
}

body[data-page="applications"] .attendance-info-grid span {
    display: block;
    color: var(--text-muted);
    font-size: .60rem;
}

body[data-page="applications"] .attendance-info-grid strong {
    display: block;
    margin-top: 3px;
    color: #3b3a45;
    font-size: .68rem;
    overflow-wrap: anywhere;
}

/* ---------- Approve / reject ---------- */
body[data-page="applications"] .application-action-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    margin-top: 12px;
    padding-top: 11px;
    border-top: 1px dashed #ddd5dd;
}

body[data-page="applications"] .application-action-row form {
    margin: 0;
}

body[data-page="applications"] .application-action-row button {
    display: inline-flex;
    width: 100%;
    min-height: 39px;
    align-items: center;
    justify-content: center;
    padding: 8px 11px;
    border: 1px solid var(--success);
    border-radius: 10px;
    color: #fff;
    background:
        linear-gradient(145deg, var(--success), var(--success-dark));
    box-shadow:
        0 8px 18px rgba(var(--success-rgb), .20),
        inset 0 1px 0 rgba(255,255,255,.16);
    font: inherit;
    font-size: .68rem;
    font-weight: 900;
    cursor: pointer;
}

body[data-page="applications"] .application-action-row .danger-btn {
    border-color: var(--danger);
    background:
        linear-gradient(145deg, var(--danger), var(--danger-dark));
    box-shadow:
        0 8px 18px rgba(var(--danger-rgb), .20),
        inset 0 1px 0 rgba(255,255,255,.16);
}

/* ---------- Empty ---------- */
body[data-page="applications"] .empty-state-card {
    display: grid;
    min-height: 96px;
    place-items: center;
    padding: 16px;
    border: 1px dashed rgba(var(--primary-rgb), .22);
    border-radius: 11px;
    color: var(--text-muted);
    background: rgba(var(--primary-rgb), .035);
    font-size: .72rem;
    text-align: center;
}

/* ---------- Bottom nav ---------- */
body[data-page="applications"] .bottom-nav {
    position: fixed;
    z-index: 1000;
    right: 50%;
    bottom: max(10px, env(safe-area-inset-bottom));
    display: grid;
    grid-template-columns: repeat(3, minmax(82px, 1fr));
    width: min(calc(100% - 24px), 460px);
    padding: 5px;
    border: 1px solid rgba(216,209,219,.92);
    border-radius: 15px;
    background: rgba(255,255,255,.94);
    box-shadow:
        0 12px 32px rgba(39,38,51,.15),
        inset 0 1px 0 rgba(255,255,255,.95);
    backdrop-filter: blur(14px);
    transform: translateX(50%);
}

body[data-page="applications"] .bottom-nav a {
    display: flex;
    min-height: 38px;
    align-items: center;
    justify-content: center;
    padding: 6px 9px;
    border-radius: 10px;
    color: var(--text-soft);
    font-size: .72rem;
    font-weight: 800;
    text-align: center;
    text-decoration: none;
}

body[data-page="applications"] .bottom-nav a.active {
    color: #fff;
    background:
        linear-gradient(145deg, var(--primary), var(--burgundy));
    box-shadow:
        0 5px 13px rgba(var(--primary-rgb), .22),
        inset 0 1px 0 rgba(255,255,255,.14);
}

/* ---------- Mobile ---------- */
@media (max-width: 700px) {
    body[data-page="applications"] .container.page-with-nav {
        width: min(100% - 18px, 640px);
        padding: 9px 0 82px;
    }

    body[data-page="applications"] .applications-hero {
        grid-template-columns: 1fr;
        align-items: stretch;
        gap: 12px;
        min-height: 0;
        padding: 18px 15px;
        border-radius: 15px;
    }

    body[data-page="applications"] .applications-hero::before {
        top: 58px;
        font-size: 3.7rem;
    }

    body[data-page="applications"] .applications-hero h1 {
        font-size: 1.45rem;
    }

    body[data-page="applications"] .applications-hero-actions {
        width: 100%;
        min-width: 0;
        padding: 8px;
    }

    body[data-page="applications"] .applications-search-card,
    body[data-page="applications"] .applications-list-section,
    body[data-page="applications"] .applications-pagination-card {
        margin-top: 10px;
        padding: 13px;
        border-radius: 13px;
    }

    body[data-page="applications"] .applications-search-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 7px;
    }

    body[data-page="applications"] .applications-search-grid > div:first-child {
        grid-column: 1 / -1;
    }

    body[data-page="applications"] .applications-list-grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    body[data-page="applications"] .application-card {
        padding: 12px 12px 11px 15px;
        border-radius: 12px;
    }

    body[data-page="applications"] .applications-pagination-card {
        align-items: stretch;
        flex-direction: column;
    }

    body[data-page="applications"] .applications-pagination-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body[data-page="applications"] .applications-pagination-actions a {
        width: 100%;
    }

    body[data-page="applications"] .bottom-nav {
        bottom: max(7px, env(safe-area-inset-bottom));
        width: calc(100% - 18px);
        max-width: 430px;
        padding: 4px;
        border-radius: 14px;
    }

    body[data-page="applications"] .bottom-nav a {
        min-height: 36px;
        padding: 5px;
        font-size: .68rem;
    }
}

@media (max-width: 390px) {
    body[data-page="applications"] .application-card-top {
        align-items: stretch;
        flex-direction: column;
    }

    body[data-page="applications"] .application-status-pill {
        align-self: flex-start;
    }

    body[data-page="applications"] .applications-search-actions,
    body[data-page="applications"] .application-action-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (prefers-reduced-motion: reduce) {
    body[data-page="applications"] *,
    body[data-page="applications"] *::before,
    body[data-page="applications"] *::after {
        animation: none !important;
        transition: none !important;
    }
}
/* =========================================================
   PRMS Export Center — Premium Obsidian Plum & Bronze UI
   Page scope: body[data-page="export-center"]
   Palette: obsidian plum + bronze gold + burgundy
   ========================================================= */

body[data-page="export-center"] {
    --page-bg: #f4f1f3;
    --surface: #ffffff;
    --surface-soft: #faf8fa;
    --text: #28252d;
    --text-soft: #69626e;
    --text-muted: #908792;
    --line: #e3dce2;

    --primary: #3d2f4f;
    --primary-dark: #24192f;
    --primary-rgb: 61, 47, 79;

    --bronze: #b87936;
    --bronze-dark: #754617;
    --bronze-rgb: 184, 121, 54;

    --burgundy: #8f1d46;
    --burgundy-dark: #5d102d;
    --burgundy-rgb: 143, 29, 70;

    --gold: #c99b48;
    --gold-dark: #7d591c;
    --gold-light: #f1d9a2;

    margin: 0;
    color: var(--text);
    background:
        radial-gradient(circle at 100% 0%, rgba(var(--primary-rgb), .085), transparent 31rem),
        radial-gradient(circle at 0% 100%, rgba(var(--bronze-rgb), .05), transparent 27rem),
        var(--page-bg);
    font-family: Inter, "Segoe UI", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

body[data-page="export-center"] *,
body[data-page="export-center"] *::before,
body[data-page="export-center"] *::after {
    box-sizing: border-box;
}

body[data-page="export-center"] a {
    -webkit-tap-highlight-color: transparent;
}

body[data-page="export-center"] .container.page-with-nav {
    width: min(100% - 32px, 1220px);
    margin: 0 auto;
    padding: 18px 4px 92px;
}

/* ---------- Hero ---------- */
body[data-page="export-center"] .export-center-hero {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 18px;
    min-height: 192px;
    padding: 28px 26px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.20);
    border-radius: 20px;
    color: #fff;
    background:
        radial-gradient(circle at 12% 8%, rgba(255,255,255,.17), transparent 24%),
        radial-gradient(circle at 88% 112%, rgba(255,255,255,.10), transparent 38%),
        linear-gradient(118deg, rgba(255,255,255,.05), transparent 42%),
        linear-gradient(135deg, #24192f 0%, #3d2f4f 50%, #754617 100%);
    box-shadow:
        0 24px 54px rgba(36,25,47,.27),
        inset 0 1px 0 rgba(255,255,255,.13),
        inset 0 -1px 0 rgba(36,25,47,.24);
}

body[data-page="export-center"] .export-center-hero::before {
    content: "EXPORT";
    position: absolute;
    z-index: -1;
    left: 24px;
    top: 62px;
    color: rgba(255,255,255,.04);
    font-size: clamp(4rem, 8vw, 7rem);
    font-weight: 950;
    letter-spacing: -.085em;
    line-height: .8;
    pointer-events: none;
}

body[data-page="export-center"] .export-center-hero::after {
    content: "";
    position: absolute;
    right: -82px;
    top: -100px;
    width: 278px;
    height: 278px;
    border: 39px solid rgba(255,255,255,.035);
    border-radius: 50%;
    box-shadow:
        0 0 0 1px rgba(255,255,255,.05),
        0 0 86px rgba(241,217,162,.13);
}

body[data-page="export-center"] .export-center-hero > div:first-child {
    position: relative;
    z-index: 2;
    min-width: 0;
}

body[data-page="export-center"] .page-subtitle {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 28px;
    margin: 0 0 9px;
    padding: 4px 10px;
    border: 1px solid rgba(241,217,162,.24);
    border-radius: 999px;
    color: #ffedc4;
    background: rgba(241,217,162,.10);
    font-size: .62rem;
    font-weight: 900;
    letter-spacing: .11em;
    text-transform: uppercase;
}

body[data-page="export-center"] .page-subtitle::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--gold-light);
    box-shadow:
        0 0 0 4px rgba(241,217,162,.12),
        0 0 14px rgba(241,217,162,.35);
}

body[data-page="export-center"] .export-center-hero h1 {
    margin: 0;
    color: #fff;
    font-size: clamp(1.7rem, 3vw, 2.5rem);
    font-weight: 900;
    line-height: 1.16;
    letter-spacing: -.032em;
    text-shadow: 0 3px 18px rgba(36,25,47,.28);
}

body[data-page="export-center"] .user-inline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    color: rgba(255,255,255,.76);
    font-size: .72rem;
}

body[data-page="export-center"] .role-badge {
    display: inline-flex;
    min-height: 25px;
    align-items: center;
    padding: 3px 9px;
    border: 1px solid rgba(255,255,255,.20);
    border-radius: 999px;
    color: #fff;
    background: rgba(255,255,255,.10);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.14),
        0 4px 10px rgba(36,25,47,.12);
    font-size: .65rem;
    font-weight: 850;
}

body[data-page="export-center"] .export-center-actions {
    position: relative;
    z-index: 2;
    min-width: 175px;
    padding: 10px;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 12px;
    background:
        linear-gradient(145deg, rgba(255,255,255,.13), rgba(255,255,255,.055));
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.12),
        0 14px 28px rgba(36,25,47,.16);
    backdrop-filter: blur(12px);
}

body[data-page="export-center"] .header-action-btn {
    display: inline-flex;
    width: 100%;
    min-height: 39px;
    align-items: center;
    justify-content: center;
    padding: 7px 12px;
    border: 1px solid var(--gold-light);
    border-radius: 11px;
    color: #30240f;
    background:
        linear-gradient(145deg, var(--gold-light), var(--gold));
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.45),
        0 9px 20px rgba(125,89,28,.20);
    font-size: .68rem;
    font-weight: 850;
    text-align: center;
    text-decoration: none;
}

/* ---------- Export grid ---------- */
body[data-page="export-center"] .export-center-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-top: 14px;
}

body[data-page="export-center"] .export-card {
    position: relative;
    isolation: isolate;
    display: flex;
    min-height: 236px;
    flex-direction: column;
    overflow: hidden;
    padding: 18px;
    border: 1px solid rgba(var(--primary-rgb), .14);
    border-radius: 17px;
    background:
        radial-gradient(circle at 100% 0%, rgba(var(--bronze-rgb), .07), transparent 165px),
        linear-gradient(145deg, #ffffff, #faf8fa);
    box-shadow:
        0 12px 28px rgba(40,37,45,.07),
        inset 0 1px 0 #fff;
}

body[data-page="export-center"] .export-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 5px;
    background:
        linear-gradient(90deg, var(--primary), var(--bronze));
}

body[data-page="export-center"] .export-card::after {
    content: "";
    position: absolute;
    z-index: -1;
    right: -54px;
    bottom: -70px;
    width: 172px;
    height: 172px;
    border: 25px solid rgba(var(--bronze-rgb), .035);
    border-radius: 50%;
}

body[data-page="export-center"] .export-card-primary {
    border-color: rgba(var(--gold), .28);
    background:
        radial-gradient(circle at 100% 0%, rgba(241,217,162,.22), transparent 170px),
        linear-gradient(145deg, #fffdf8, #fff9ed);
}

body[data-page="export-center"] .export-card-primary::before {
    background:
        linear-gradient(90deg, var(--gold-dark), var(--gold));
}

body[data-page="export-center"] .export-card-top {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 12px;
}

body[data-page="export-center"] .export-icon {
    display: grid;
    width: 52px;
    height: 52px;
    place-items: center;
    border: 1px solid rgba(var(--primary-rgb), .16);
    border-radius: 15px;
    color: #fff;
    background:
        linear-gradient(145deg, var(--primary), var(--primary-dark));
    box-shadow:
        0 9px 20px rgba(var(--primary-rgb), .20),
        inset 0 1px 0 rgba(255,255,255,.16);
    font-size: .95rem;
    font-weight: 950;
}

body[data-page="export-center"] .export-card:nth-child(2) .export-icon {
    background:
        linear-gradient(145deg, var(--bronze), var(--bronze-dark));
}

body[data-page="export-center"] .export-card:nth-child(3) .export-icon {
    background:
        linear-gradient(145deg, var(--burgundy), var(--burgundy-dark));
}

body[data-page="export-center"] .export-card:nth-child(4) .export-icon {
    color: #2f2411;
    background:
        linear-gradient(145deg, var(--gold-light), var(--gold));
}

body[data-page="export-center"] .export-card:nth-child(5) .export-icon {
    background:
        linear-gradient(145deg, #51415f, #2f2438);
}

body[data-page="export-center"] .export-card-top h3 {
    margin: 0;
    color: #3d3149;
    font-size: .95rem;
    font-weight: 900;
}

body[data-page="export-center"] .export-card-top p {
    margin: 4px 0 0;
    color: var(--text-muted);
    font-size: .65rem;
    line-height: 1.4;
}

body[data-page="export-center"] .export-card-body {
    flex: 1 1 auto;
    margin-top: 14px;
    padding: 12px 13px;
    border: 1px solid rgba(var(--primary-rgb), .09);
    border-radius: 11px;
    background: rgba(255,255,255,.76);
}

body[data-page="export-center"] .export-card-body p {
    margin: 0;
    color: var(--text-soft);
    font-size: .68rem;
    line-height: 1.55;
}

body[data-page="export-center"] .export-card-link {
    display: inline-flex;
    width: 100%;
    min-height: 40px;
    align-items: center;
    justify-content: center;
    margin-top: 13px;
    padding: 8px 12px;
    border: 1px solid var(--primary);
    border-radius: 10px;
    color: #fff;
    background:
        linear-gradient(145deg, var(--primary), var(--primary-dark));
    box-shadow:
        0 8px 18px rgba(var(--primary-rgb), .20),
        inset 0 1px 0 rgba(255,255,255,.16);
    font-size: .68rem;
    font-weight: 900;
    text-align: center;
    text-decoration: none;
}

body[data-page="export-center"] .export-card:nth-child(2) .export-card-link {
    border-color: var(--bronze);
    background:
        linear-gradient(145deg, var(--bronze), var(--bronze-dark));
    box-shadow:
        0 8px 18px rgba(var(--bronze-rgb), .20),
        inset 0 1px 0 rgba(255,255,255,.16);
}

body[data-page="export-center"] .export-card:nth-child(3) .export-card-link {
    border-color: var(--burgundy);
    background:
        linear-gradient(145deg, var(--burgundy), var(--burgundy-dark));
    box-shadow:
        0 8px 18px rgba(var(--burgundy-rgb), .20),
        inset 0 1px 0 rgba(255,255,255,.16);
}

body[data-page="export-center"] .export-card:nth-child(4) .export-card-link {
    border-color: var(--gold);
    color: #30240f;
    background:
        linear-gradient(145deg, var(--gold-light), var(--gold));
    box-shadow:
        0 8px 18px rgba(125,89,28,.20),
        inset 0 1px 0 rgba(255,255,255,.42);
}

body[data-page="export-center"] .export-card:nth-child(5) .export-card-link {
    border-color: #51415f;
    background:
        linear-gradient(145deg, #51415f, #2f2438);
}

/* ---------- Bottom nav ---------- */
body[data-page="export-center"] .bottom-nav {
    position: fixed;
    z-index: 1000;
    right: 50%;
    bottom: max(10px, env(safe-area-inset-bottom));
    display: grid;
    grid-template-columns: repeat(3, minmax(82px, 1fr));
    width: min(calc(100% - 24px), 460px);
    padding: 5px;
    border: 1px solid rgba(216,209,219,.92);
    border-radius: 15px;
    background: rgba(255,255,255,.94);
    box-shadow:
        0 12px 32px rgba(40,37,45,.15),
        inset 0 1px 0 rgba(255,255,255,.95);
    backdrop-filter: blur(14px);
    transform: translateX(50%);
}

body[data-page="export-center"] .bottom-nav a {
    display: flex;
    min-height: 38px;
    align-items: center;
    justify-content: center;
    padding: 6px 9px;
    border-radius: 10px;
    color: var(--text-soft);
    font-size: .72rem;
    font-weight: 800;
    text-align: center;
    text-decoration: none;
}

body[data-page="export-center"] .bottom-nav a.active {
    color: #fff;
    background:
        linear-gradient(145deg, var(--primary), var(--bronze));
    box-shadow:
        0 5px 13px rgba(var(--primary-rgb), .22),
        inset 0 1px 0 rgba(255,255,255,.14);
}

/* ---------- Responsive ---------- */
@media (max-width: 700px) {
    body[data-page="export-center"] .container.page-with-nav {
        width: min(100% - 18px, 640px);
        padding: 9px 0 82px;
    }

    body[data-page="export-center"] .export-center-hero {
        grid-template-columns: 1fr;
        align-items: stretch;
        gap: 12px;
        min-height: 0;
        padding: 19px 15px;
        border-radius: 16px;
    }

    body[data-page="export-center"] .export-center-hero::before {
        top: 58px;
        font-size: 4rem;
    }

    body[data-page="export-center"] .export-center-hero h1 {
        font-size: 1.5rem;
    }

    body[data-page="export-center"] .export-center-actions {
        width: 100%;
        min-width: 0;
        padding: 8px;
    }

    body[data-page="export-center"] .export-center-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        margin-top: 10px;
    }

    body[data-page="export-center"] .export-card {
        min-height: 220px;
        padding: 13px;
        border-radius: 13px;
    }

    body[data-page="export-center"] .export-icon {
        width: 42px;
        height: 42px;
        border-radius: 12px;
        font-size: .78rem;
    }

    body[data-page="export-center"] .export-card-top {
        gap: 9px;
    }

    body[data-page="export-center"] .export-card-top h3 {
        font-size: .82rem;
    }

    body[data-page="export-center"] .export-card-top p {
        font-size: .58rem;
    }

    body[data-page="export-center"] .export-card-body {
        margin-top: 10px;
        padding: 9px;
    }

    body[data-page="export-center"] .export-card-body p {
        font-size: .60rem;
    }

    body[data-page="export-center"] .export-card-link {
        min-height: 35px;
        padding: 6px;
        font-size: .60rem;
    }

    body[data-page="export-center"] .bottom-nav {
        bottom: max(7px, env(safe-area-inset-bottom));
        width: calc(100% - 18px);
        max-width: 430px;
        padding: 4px;
        border-radius: 14px;
    }

    body[data-page="export-center"] .bottom-nav a {
        min-height: 36px;
        padding: 5px;
        font-size: .68rem;
    }
}

@media (max-width: 390px) {
    body[data-page="export-center"] .export-center-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
    }

    body[data-page="export-center"] .export-card {
        min-height: 210px;
        padding: 11px;
    }

    body[data-page="export-center"] .export-icon {
        width: 38px;
        height: 38px;
    }
}

@media (prefers-reduced-motion: reduce) {
    body[data-page="export-center"] *,
    body[data-page="export-center"] *::before,
    body[data-page="export-center"] *::after {
        animation: none !important;
        transition: none !important;
    }
}
/* =========================================================
   PRMS Room Settlement — Premium Forest & Antique Gold UI
   Page scope: body[data-page="room-settlement"]
   Palette: deep forest + antique gold + burgundy
   ========================================================= */

body[data-page="room-settlement"] {
    --page-bg: #f3f2ee;
    --surface: #ffffff;
    --surface-soft: #faf9f5;
    --text: #272a25;
    --text-soft: #666b63;
    --text-muted: #8b9088;
    --line: #dfddd4;

    --primary: #31483a;
    --primary-dark: #1e2d24;
    --primary-rgb: 49, 72, 58;

    --gold: #b98a3d;
    --gold-dark: #744e18;
    --gold-light: #ecd39a;
    --gold-rgb: 185, 138, 61;

    --burgundy: #8b1e3f;
    --burgundy-dark: #5d1028;
    --burgundy-rgb: 139, 30, 63;

    --success: #15803d;
    --success-dark: #166534;
    --success-rgb: 21, 128, 61;

    --danger: #b91c1c;
    --danger-dark: #7f1d1d;
    --danger-rgb: 185, 28, 28;

    margin: 0;
    color: var(--text);
    background:
        radial-gradient(circle at 100% 0%, rgba(var(--primary-rgb), .085), transparent 31rem),
        radial-gradient(circle at 0% 100%, rgba(var(--gold-rgb), .045), transparent 27rem),
        var(--page-bg);
    font-family: Inter, "Segoe UI", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

body[data-page="room-settlement"] *,
body[data-page="room-settlement"] *::before,
body[data-page="room-settlement"] *::after {
    box-sizing: border-box;
}

body[data-page="room-settlement"] a,
body[data-page="room-settlement"] button,
body[data-page="room-settlement"] input,
body[data-page="room-settlement"] select,
body[data-page="room-settlement"] textarea {
    -webkit-tap-highlight-color: transparent;
}

body[data-page="room-settlement"] .container.page-with-nav {
    width: min(100% - 32px, 1260px);
    margin: 0 auto;
    padding: 18px 4px 92px;
}

/* ---------- Hero ---------- */
body[data-page="room-settlement"] .settlement-pro-hero {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 18px;
    min-height: 194px;
    padding: 28px 26px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.20);
    border-radius: 20px;
    color: #fff;
    background:
        radial-gradient(circle at 12% 8%, rgba(255,255,255,.17), transparent 24%),
        radial-gradient(circle at 88% 112%, rgba(255,255,255,.10), transparent 38%),
        linear-gradient(118deg, rgba(255,255,255,.05), transparent 42%),
        linear-gradient(135deg, #1e2d24 0%, #31483a 50%, #744e18 100%);
    box-shadow:
        0 24px 54px rgba(30,45,36,.27),
        inset 0 1px 0 rgba(255,255,255,.13),
        inset 0 -1px 0 rgba(30,45,36,.24);
}

body[data-page="room-settlement"] .settlement-pro-hero::before {
    content: "SETTLEMENT";
    position: absolute;
    z-index: -1;
    left: 24px;
    top: 64px;
    color: rgba(255,255,255,.04);
    font-size: clamp(3.8rem, 7.4vw, 6.8rem);
    font-weight: 950;
    letter-spacing: -.085em;
    line-height: .8;
    pointer-events: none;
}

body[data-page="room-settlement"] .settlement-pro-hero::after {
    content: "";
    position: absolute;
    right: -84px;
    top: -102px;
    width: 282px;
    height: 282px;
    border: 40px solid rgba(255,255,255,.035);
    border-radius: 50%;
    box-shadow:
        0 0 0 1px rgba(255,255,255,.05),
        0 0 88px rgba(236,211,154,.13);
}

body[data-page="room-settlement"] .settlement-pro-hero-main {
    position: relative;
    z-index: 2;
    min-width: 0;
}

body[data-page="room-settlement"] .page-subtitle {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 28px;
    margin: 0 0 9px;
    padding: 4px 10px;
    border: 1px solid rgba(236,211,154,.24);
    border-radius: 999px;
    color: #ffedc4;
    background: rgba(236,211,154,.10);
    font-size: .62rem;
    font-weight: 900;
    letter-spacing: .11em;
    text-transform: uppercase;
}

body[data-page="room-settlement"] .page-subtitle::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--gold-light);
    box-shadow:
        0 0 0 4px rgba(236,211,154,.12),
        0 0 14px rgba(236,211,154,.35);
}

body[data-page="room-settlement"] .settlement-pro-hero h1 {
    margin: 0;
    color: #fff;
    font-size: clamp(1.7rem, 3vw, 2.5rem);
    font-weight: 900;
    line-height: 1.16;
    letter-spacing: -.032em;
}

body[data-page="room-settlement"] .user-inline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    color: rgba(255,255,255,.76);
    font-size: .72rem;
}

body[data-page="room-settlement"] .role-badge {
    display: inline-flex;
    min-height: 25px;
    align-items: center;
    padding: 3px 9px;
    border: 1px solid rgba(255,255,255,.20);
    border-radius: 999px;
    color: #fff;
    background: rgba(255,255,255,.10);
    font-size: .65rem;
    font-weight: 850;
}

body[data-page="room-settlement"] .settlement-pro-hero-actions {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(2, minmax(130px, 1fr));
    gap: 8px;
    padding: 11px;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 13px;
    background:
        linear-gradient(145deg, rgba(255,255,255,.13), rgba(255,255,255,.055));
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.12),
        0 14px 28px rgba(30,45,36,.16);
    backdrop-filter: blur(12px);
}

body[data-page="room-settlement"] .settlement-pro-action-btn {
    display: inline-flex;
    min-height: 39px;
    align-items: center;
    justify-content: center;
    padding: 7px 12px;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 11px;
    color: #fff;
    background:
        linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.08));
    font-size: .66rem;
    font-weight: 850;
    text-align: center;
    text-decoration: none;
}

body[data-page="room-settlement"] .settlement-pro-action-btn:first-child {
    border-color: var(--gold-light);
    color: #30240f;
    background:
        linear-gradient(145deg, var(--gold-light), var(--gold));
}

/* ---------- Alerts ---------- */
body[data-page="room-settlement"] .alert {
    margin-top: 12px;
    padding: 11px 13px;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: #fff;
    box-shadow: 0 7px 16px rgba(39,42,37,.045);
    font-size: .72rem;
}

/* ---------- Shared section cards ---------- */
body[data-page="room-settlement"] .settlement-pro-filter-card,
body[data-page="room-settlement"] .settlement-pro-room-card,
body[data-page="room-settlement"] .settlement-pro-section-card,
body[data-page="room-settlement"] .settlement-pro-input-card {
    position: relative;
    overflow: hidden;
    margin-top: 14px;
    padding: 18px;
    border: 1px solid rgba(var(--primary-rgb), .15);
    border-radius: 16px;
    background:
        radial-gradient(circle at 100% 0%, rgba(var(--primary-rgb), .07), transparent 190px),
        linear-gradient(145deg, #ffffff, #faf9f5);
    box-shadow:
        0 12px 28px rgba(39,42,37,.07),
        inset 0 1px 0 #fff;
}

body[data-page="room-settlement"] .settlement-pro-filter-card::before,
body[data-page="room-settlement"] .settlement-pro-room-card::before,
body[data-page="room-settlement"] .settlement-pro-section-card::before,
body[data-page="room-settlement"] .settlement-pro-input-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 5px;
    background:
        linear-gradient(180deg, var(--primary), var(--gold));
}

body[data-page="room-settlement"] .section-title-row {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
    padding: 12px 13px;
    border: 1px solid rgba(var(--primary-rgb), .11);
    border-radius: 12px;
    background:
        linear-gradient(145deg, rgba(255,255,255,.96), rgba(var(--primary-rgb), .04));
}

body[data-page="room-settlement"] .section-title-row h3 {
    margin: 0;
    color: #35483c;
    font-size: 1rem;
}

body[data-page="room-settlement"] .section-subtitle {
    margin: 4px 0 0;
    color: var(--text-muted);
    font-size: .69rem;
    line-height: 1.45;
}

body[data-page="room-settlement"] .section-count {
    display: inline-flex;
    min-height: 28px;
    align-items: center;
    padding: 4px 9px;
    border: 1px solid rgba(var(--gold-rgb), .18);
    border-radius: 999px;
    color: var(--gold-dark);
    background: rgba(var(--gold-rgb), .07);
    font-size: .67rem;
    font-weight: 850;
}

/* ---------- Filter ---------- */
body[data-page="room-settlement"] .settlement-pro-filter-form,
body[data-page="room-settlement"] .settlement-pro-input-form {
    margin: 0;
    padding: 8px;
    border: 1px solid rgba(var(--primary-rgb), .10);
    border-radius: 12px;
    background: rgba(255,255,255,.80);
    box-shadow: inset 0 1px 0 #fff;
}

body[data-page="room-settlement"] .settlement-pro-filter-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

body[data-page="room-settlement"] .settlement-pro-filter-grid-three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

body[data-page="room-settlement"] label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 6px;
    color: #535b54;
    font-size: .68rem;
    font-weight: 850;
}

body[data-page="room-settlement"] label::before {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--primary);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), .09);
}

body[data-page="room-settlement"] input,
body[data-page="room-settlement"] select,
body[data-page="room-settlement"] textarea {
    width: 100%;
    min-width: 0;
    border: 1px solid #dcd8d0;
    border-radius: 10px;
    color: #343932;
    background: linear-gradient(180deg, #fff, #fbfaf7);
    font: inherit;
    font-size: .70rem;
    box-shadow:
        inset 0 1px 2px rgba(39,42,37,.035),
        0 3px 8px rgba(39,42,37,.025);
}

body[data-page="room-settlement"] input,
body[data-page="room-settlement"] select {
    min-height: 41px;
    padding: 8px 10px;
}

body[data-page="room-settlement"] textarea {
    min-height: 90px;
    padding: 10px;
}

body[data-page="room-settlement"] input:focus,
body[data-page="room-settlement"] select:focus,
body[data-page="room-settlement"] textarea:focus {
    outline: none;
    border-color: rgba(var(--gold-rgb), .55);
    box-shadow:
        0 0 0 4px rgba(var(--gold-rgb), .09),
        0 7px 16px rgba(var(--gold-rgb), .07);
}

body[data-page="room-settlement"] input:disabled,
body[data-page="room-settlement"] select:disabled,
body[data-page="room-settlement"] textarea:disabled {
    color: #777d76;
    background: #f2f1ed;
    cursor: not-allowed;
}

body[data-page="room-settlement"] .settlement-pro-filter-form > button,
body[data-page="room-settlement"] .settlement-pro-input-form > button {
    display: inline-flex;
    width: 100%;
    min-height: 40px;
    align-items: center;
    justify-content: center;
    margin-top: 12px;
    padding: 8px 12px;
    border: 1px solid var(--primary);
    border-radius: 10px;
    color: #fff;
    background:
        linear-gradient(145deg, var(--primary), var(--primary-dark));
    box-shadow:
        0 8px 18px rgba(var(--primary-rgb), .20),
        inset 0 1px 0 rgba(255,255,255,.16);
    font: inherit;
    font-size: .68rem;
    font-weight: 900;
    cursor: pointer;
}

/* ---------- Room summary ---------- */
body[data-page="room-settlement"] .settlement-pro-room-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

body[data-page="room-settlement"] .summary-label {
    display: inline-flex;
    min-height: 26px;
    align-items: center;
    padding: 3px 9px;
    border: 1px solid rgba(var(--primary-rgb), .14);
    border-radius: 999px;
    color: var(--primary-dark);
    background: rgba(var(--primary-rgb), .055);
    font-size: .62rem;
    font-weight: 850;
}

body[data-page="room-settlement"] .settlement-pro-room-top h2 {
    margin: 10px 0 4px;
    color: #31483a;
    font-size: 1.55rem;
    font-weight: 950;
}

body[data-page="room-settlement"] .settlement-pro-room-top p {
    margin: 0;
    color: var(--text-muted);
    font-size: .67rem;
}

body[data-page="room-settlement"] .settlement-pro-status-pill {
    display: inline-flex;
    min-height: 30px;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    color: #fff;
    font-size: .65rem;
    font-weight: 900;
}

body[data-page="room-settlement"] .settlement-pro-confirmed {
    background:
        linear-gradient(145deg, var(--success), var(--success-dark));
}

body[data-page="room-settlement"] .settlement-pro-unconfirmed {
    color: #34250c;
    background:
        linear-gradient(145deg, var(--gold-light), var(--gold));
}

body[data-page="room-settlement"] .settlement-pro-export-links {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-top: 12px;
}

body[data-page="room-settlement"] .settlement-pro-export-links a {
    display: inline-flex;
    min-height: 38px;
    align-items: center;
    justify-content: center;
    padding: 7px 10px;
    border: 1px solid var(--primary);
    border-radius: 9px;
    color: #fff;
    background:
        linear-gradient(145deg, var(--primary), var(--primary-dark));
    font-size: .64rem;
    font-weight: 850;
    text-align: center;
    text-decoration: none;
}

body[data-page="room-settlement"] .settlement-pro-export-links a:nth-child(2) {
    border-color: var(--gold);
    color: #30240f;
    background:
        linear-gradient(145deg, var(--gold-light), var(--gold));
}

body[data-page="room-settlement"] .settlement-pro-export-links a:nth-child(3) {
    border-color: var(--burgundy);
    background:
        linear-gradient(145deg, var(--burgundy), var(--burgundy-dark));
}

/* ---------- Promoter cards ---------- */
body[data-page="room-settlement"] .settlement-pro-promoter-list {
    display: grid;
    gap: 10px;
}

body[data-page="room-settlement"] .settlement-pro-promoter-card {
    position: relative;
    overflow: hidden;
    padding: 15px;
    border: 1px solid rgba(var(--primary-rgb), .13);
    border-radius: 14px;
    background:
        radial-gradient(circle at 100% 0%, rgba(var(--gold-rgb), .06), transparent 150px),
        linear-gradient(145deg, #ffffff, #fbfaf7);
    box-shadow:
        0 8px 20px rgba(39,42,37,.05),
        inset 0 1px 0 #fff;
}

body[data-page="room-settlement"] .settlement-pro-promoter-card::before {
    content: "";
    position: absolute;
    inset: 10px auto 10px 0;
    width: 4px;
    border-radius: 999px;

}

body[data-page="room-settlement"] .settlement-pro-promoter-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

body[data-page="room-settlement"] .settlement-pro-promoter-top h4 {
    margin: 0;
    color: #35483c;
    font-size: .9rem;
    font-weight: 900;
}

body[data-page="room-settlement"] .settlement-pro-promoter-top p {
    margin: 3px 0 0;
    color: var(--text-muted);
    font-size: .63rem;
}

body[data-page="room-settlement"] .settlement-pro-takeaway-pill {
    display: inline-flex;
    flex: 0 0 auto;
    min-height: 29px;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    color: var(--gold-dark);
    background: rgba(var(--gold-rgb), .10);
    border: 1px solid rgba(var(--gold-rgb), .20);
    font-size: .64rem;
    font-weight: 900;
}

/* ---------- Info grid ---------- */
body[data-page="room-settlement"] .attendance-info-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
    margin-top: 11px;
}

body[data-page="room-settlement"] .attendance-info-grid > div {
    min-width: 0;
    padding: 9px 10px;
    border: 1px solid #e3dfd6;
    border-radius: 10px;
    background:
        linear-gradient(145deg, rgba(255,255,255,.95), rgba(250,249,245,.94));
}

body[data-page="room-settlement"] .attendance-info-grid span {
    display: block;
    color: var(--text-muted);
    font-size: .59rem;
}

body[data-page="room-settlement"] .attendance-info-grid strong {
    display: block;
    margin-top: 3px;
    color: #3a3f39;
    font-size: .67rem;
    overflow-wrap: anywhere;
}

/* ---------- Subsections ---------- */
body[data-page="room-settlement"] .settlement-pro-subsection {
    margin-top: 14px;
    padding: 14px;
    border: 1px solid rgba(var(--primary-rgb), .11);
    border-radius: 13px;
    background:
        linear-gradient(145deg, #fff, #faf9f5);
}

body[data-page="room-settlement"] .settlement-pro-subsection:first-child {
    margin-top: 0;
}

body[data-page="room-settlement"] .settlement-pro-subsection-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid #e6e2da;
}

body[data-page="room-settlement"] .settlement-pro-subsection-title > span {
    display: grid;
    width: 32px;
    height: 32px;
    place-items: center;
    border-radius: 10px;
    color: #fff;
    background:
        linear-gradient(145deg, var(--primary), var(--gold));
    font-size: .62rem;
    font-weight: 950;
}

body[data-page="room-settlement"] .settlement-pro-subsection-title h4 {
    margin: 0;
    color: #35483c;
    font-size: .88rem;
}

body[data-page="room-settlement"] .settlement-collapse-btn,
body[data-page="room-settlement"] .settlement-employee-toggle-btn {
    margin-left: auto;
    min-height: 30px;
    padding: 5px 9px;
    border: 1px solid rgba(var(--primary-rgb), .16);
    border-radius: 8px;
    color: var(--primary-dark);
    background: rgba(var(--primary-rgb), .055);
    font: inherit;
    font-size: .60rem;
    font-weight: 850;
    cursor: pointer;
}

body[data-page="room-settlement"] .settlement-pro-subsection.is-collapsed > *:not(.settlement-pro-subsection-title) {
    display: none;
}

body[data-page="room-settlement"] .settlement-pro-promoter-card.is-employee-collapsed > *:not(.settlement-pro-promoter-top) {
    display: none;
}

/* ---------- Input grids ---------- */
body[data-page="room-settlement"] .settlement-pro-input-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 9px;
}

body[data-page="room-settlement"] .settlement-pro-wide-field {
    grid-column: 1 / -1;
}

body[data-page="room-settlement"] .js-payroll-edit-input[readonly] {
    background: #f2f1ed;
    color: #81867f;
}

body[data-page="room-settlement"] .js-payroll-edit-input.is-editing {
    border-color: rgba(var(--gold-rgb), .55);
    background: #fffdf7;
    box-shadow: 0 0 0 4px rgba(var(--gold-rgb), .08);
}

/* ---------- Calculation note ---------- */
body[data-page="room-settlement"] .commission-note-box {
    padding: 10px 11px;
    border: 1px solid rgba(var(--gold-rgb), .16);
    border-radius: 10px;
    background:
        linear-gradient(145deg, #fffaf0, #ffffff);
}

body[data-page="room-settlement"] .commission-note-box span {
    display: block;
    color: var(--gold-dark);
    font-size: .60rem;
    font-weight: 850;
}

body[data-page="room-settlement"] .commission-note-box p {
    margin: 4px 0 0;
    color: var(--text-soft);
    font-size: .66rem;
    line-height: 1.48;
}

/* ---------- Finance / DJ ---------- */
body[data-page="room-settlement"] .settlement-pro-finance-grid {
    display: grid;
    grid-template-columns: .75fr 1.25fr;
    gap: 10px;
}

body[data-page="room-settlement"] .settlement-pro-readonly-box,
body[data-page="room-settlement"] .settlement-pro-dj-card {
    padding: 13px;
    border: 1px solid #e3dfd6;
    border-radius: 12px;
    background: #fff;
}

body[data-page="room-settlement"] .settlement-pro-readonly-box span {
    color: var(--text-muted);
    font-size: .62rem;
}

body[data-page="room-settlement"] .settlement-pro-readonly-box strong {
    display: block;
    margin-top: 6px;
    color: var(--gold-dark);
    font-size: 1.25rem;
    font-weight: 950;
}

body[data-page="room-settlement"] .settlement-pro-readonly-box p {
    margin: 6px 0 0;
    color: var(--text-muted);
    font-size: .62rem;
}

body[data-page="room-settlement"] .settlement-pro-dj-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

body[data-page="room-settlement"] .settlement-pro-dj-title h4 {
    margin: 0;
    color: #35483c;
    font-size: .84rem;
}

body[data-page="room-settlement"] .settlement-pro-dj-title span {
    color: var(--gold-dark);
    font-size: .64rem;
    font-weight: 900;
}

body[data-page="room-settlement"] .settlement-pro-dj-list {
    display: grid;
    gap: 6px;
    margin-top: 10px;
}

body[data-page="room-settlement"] .settlement-pro-dj-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 10px;
    border: 1px solid #e5e1d9;
    border-radius: 9px;
    background: #fbfaf7;
}

body[data-page="room-settlement"] .settlement-pro-dj-item strong {
    color: #3a3f39;
    font-size: .67rem;
}

body[data-page="room-settlement"] .settlement-pro-dj-item p {
    margin: 2px 0 0;
    color: var(--text-muted);
    font-size: .58rem;
}

body[data-page="room-settlement"] .settlement-pro-dj-item > span {
    color: var(--gold-dark);
    font-size: .66rem;
    font-weight: 900;
}

/* ---------- Total card ---------- */
body[data-page="room-settlement"] .settlement-pro-total-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(180px, .45fr);
    align-items: center;
    gap: 12px;
    margin-top: 14px;
    padding: 15px;
    border: 1px solid rgba(var(--gold-rgb), .24);
    border-radius: 13px;
    background:
        radial-gradient(circle at 100% 0%, rgba(236,211,154,.20), transparent 160px),
        linear-gradient(145deg, #fffdf8, #fff8ec);
}

body[data-page="room-settlement"] .settlement-pro-total-card span {
    display: block;
    color: #84683a;
    font-size: .62rem;
}

body[data-page="room-settlement"] .settlement-pro-total-card strong {
    display: block;
    margin-top: 5px;
    color: #5d3f0f;
    font-size: 1.35rem;
    font-weight: 950;
}

/* ---------- Confirm / rollback ---------- */
body[data-page="room-settlement"] .settlement-pro-confirm-form {
    margin-top: 10px;
}

body[data-page="room-settlement"] .settlement-pro-confirm-form .danger-btn {
    display: inline-flex;
    width: 100%;
    min-height: 42px;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
    border: 1px solid var(--burgundy);
    border-radius: 10px;
    color: #fff;
    background:
        linear-gradient(145deg, var(--burgundy), var(--burgundy-dark));
    box-shadow:
        0 8px 18px rgba(var(--burgundy-rgb), .20),
        inset 0 1px 0 rgba(255,255,255,.16);
    font: inherit;
    font-size: .68rem;
    font-weight: 900;
    cursor: pointer;
}

/* ---------- Empty ---------- */
body[data-page="room-settlement"] .empty-state-card {
    display: grid;
    min-height: 82px;
    place-items: center;
    padding: 14px;
    border: 1px dashed rgba(var(--primary-rgb), .22);
    border-radius: 10px;
    color: var(--text-muted);
    background: rgba(var(--primary-rgb), .035);
    font-size: .68rem;
    text-align: center;
}

/* ---------- Bottom nav ---------- */
body[data-page="room-settlement"] .bottom-nav {
    position: fixed;
    z-index: 1000;
    right: 50%;
    bottom: max(10px, env(safe-area-inset-bottom));
    display: grid;
    grid-template-columns: repeat(3, minmax(82px, 1fr));
    width: min(calc(100% - 24px), 460px);
    padding: 5px;
    border: 1px solid rgba(216,210,214,.92);
    border-radius: 15px;
    background: rgba(255,255,255,.94);
    box-shadow:
        0 12px 32px rgba(39,42,37,.15),
        inset 0 1px 0 rgba(255,255,255,.95);
    backdrop-filter: blur(14px);
    transform: translateX(50%);
}

body[data-page="room-settlement"] .bottom-nav a {
    display: flex;
    min-height: 38px;
    align-items: center;
    justify-content: center;
    padding: 6px 9px;
    border-radius: 10px;
    color: var(--text-soft);
    font-size: .72rem;
    font-weight: 800;
    text-align: center;
    text-decoration: none;
}

body[data-page="room-settlement"] .bottom-nav a.active {
    color: #fff;
    background:
        linear-gradient(145deg, var(--primary), var(--gold));
    box-shadow:
        0 5px 13px rgba(var(--primary-rgb), .22),
        inset 0 1px 0 rgba(255,255,255,.14);
}

/* ---------- Mobile ---------- */
@media (max-width: 700px) {
    body[data-page="room-settlement"] .container.page-with-nav {
        width: min(100% - 18px, 640px);
        padding: 9px 0 82px;
    }

    body[data-page="room-settlement"] .settlement-pro-hero {
        grid-template-columns: 1fr;
        gap: 12px;
        min-height: 0;
        padding: 19px 15px;
        border-radius: 16px;
    }

    body[data-page="room-settlement"] .settlement-pro-hero::before {
        top: 58px;
        font-size: 3.8rem;
    }

    body[data-page="room-settlement"] .settlement-pro-hero h1 {
        font-size: 1.5rem;
    }

    body[data-page="room-settlement"] .settlement-pro-hero-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        padding: 8px;
        gap: 6px;
    }

    body[data-page="room-settlement"] .settlement-pro-filter-card,
    body[data-page="room-settlement"] .settlement-pro-room-card,
    body[data-page="room-settlement"] .settlement-pro-section-card,
    body[data-page="room-settlement"] .settlement-pro-input-card {
        margin-top: 10px;
        padding: 13px;
        border-radius: 13px;
    }

    body[data-page="room-settlement"] .settlement-pro-filter-grid,
    body[data-page="room-settlement"] .settlement-pro-filter-grid-three {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 7px;
    }

    body[data-page="room-settlement"] .settlement-pro-filter-grid-three > div:last-child {
        grid-column: 1 / -1;
    }

    body[data-page="room-settlement"] .settlement-pro-export-links {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 6px;
    }

    body[data-page="room-settlement"] .settlement-pro-export-links a {
        min-height: 35px;
        padding: 6px;
        font-size: .58rem;
    }

    body[data-page="room-settlement"] .attendance-info-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 5px;
    }

    body[data-page="room-settlement"] .settlement-pro-input-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 7px;
    }

    body[data-page="room-settlement"] .settlement-pro-wide-field {
        grid-column: 1 / -1;
    }

    body[data-page="room-settlement"] .settlement-pro-finance-grid {
        grid-template-columns: 1fr;
    }

    body[data-page="room-settlement"] .settlement-pro-total-card {
        grid-template-columns: 1fr;
    }

    body[data-page="room-settlement"] .bottom-nav {
        bottom: max(7px, env(safe-area-inset-bottom));
        width: calc(100% - 18px);
        max-width: 430px;
        padding: 4px;
        border-radius: 14px;
    }

    body[data-page="room-settlement"] .bottom-nav a {
        min-height: 36px;
        padding: 5px;
        font-size: .68rem;
    }
}

@media (max-width: 390px) {
    body[data-page="room-settlement"] .settlement-pro-promoter-top,
    body[data-page="room-settlement"] .settlement-pro-room-top {
        align-items: stretch;
        flex-direction: column;
    }

    body[data-page="room-settlement"] .settlement-pro-status-pill,
    body[data-page="room-settlement"] .settlement-pro-takeaway-pill {
        align-self: flex-start;
    }
}

@media (prefers-reduced-motion: reduce) {
    body[data-page="room-settlement"] *,
    body[data-page="room-settlement"] *::before,
    body[data-page="room-settlement"] *::after {
        animation: none !important;
        transition: none !important;
    }
}

/* =========================================================
   Enhanced Total Amount Emphasis
   ========================================================= */

body[data-page="room-settlement"] #js-total-amount-text {
    display: inline-block;
    margin-left: 4px;
    color: #4a310b;
    font-size: clamp(1.8rem, 4vw, 2.65rem);
    font-weight: 950;
    line-height: 1;
    letter-spacing: -.04em;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 2px 10px rgba(var(--gold-rgb), .16);
    vertical-align: baseline;
}

body[data-page="room-settlement"] .settlement-pro-total-card strong {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 3px;
    margin-top: 7px;
    color: #5d3f0f;
    font-size: 1rem;
    font-weight: 900;
    line-height: 1;
}

body[data-page="room-settlement"] .settlement-pro-total-card > div:first-child {
    min-width: 0;
}

body[data-page="room-settlement"] .settlement-pro-total-card::before {
    content: "";
    position: absolute;
    inset: 10px auto 10px 0;
    width: 5px;
    border-radius: 999px;
    background:
        linear-gradient(180deg, var(--gold), var(--gold-dark));
}

body[data-page="room-settlement"] .settlement-pro-total-card {
    position: relative;
    padding-left: 19px;
}

@media (max-width: 700px) {
    body[data-page="room-settlement"] #js-total-amount-text {
        font-size: clamp(1.65rem, 8vw, 2.2rem);
    }

    body[data-page="room-settlement"] .settlement-pro-total-card strong {
        font-size: .9rem;
    }
}

/* =========================================================
   Small-Screen Room Summary Layout Fix
   ========================================================= */

@media (max-width: 700px) {
    body[data-page="room-settlement"] .settlement-pro-room-top {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: start;
        gap: 10px;
    }

    body[data-page="room-settlement"] .settlement-pro-room-top > div:first-child {
        min-width: 0;
    }

    body[data-page="room-settlement"] .settlement-pro-room-top h2 {
        margin-top: 8px;
        font-size: 1.28rem;
        line-height: 1.2;
        overflow-wrap: anywhere;
    }

    body[data-page="room-settlement"] .settlement-pro-room-top p {
        margin-top: 3px;
        font-size: .63rem;
    }

    body[data-page="room-settlement"] .settlement-pro-room-top .settlement-pro-status-pill {
        align-self: start;
        justify-self: end;
        max-width: 120px;
        min-height: 28px;
        padding: 4px 9px;
        text-align: center;
        white-space: normal;
        line-height: 1.25;
    }
}

@media (max-width: 430px) {
    body[data-page="room-settlement"] .settlement-pro-room-top {
        grid-template-columns: 1fr;
        gap: 8px;
        padding-bottom: 2px;
    }

    body[data-page="room-settlement"] .settlement-pro-room-top .settlement-pro-status-pill {
        justify-self: start;
        width: auto;
        max-width: 100%;
    }
}

@media (max-width: 390px) {
    body[data-page="room-settlement"] .settlement-pro-room-top {
        display: grid;
        align-items: start;
        flex-direction: initial;
    }

    body[data-page="room-settlement"] .settlement-pro-room-top .settlement-pro-status-pill {
        align-self: start;
    }
}

/* =========================================================
   PRMS Room Commission Settlement — Premium Navy & Copper UI
   Page scope: body[data-page="room-commission-settlement"]
   Palette: deep navy + copper gold + burgundy
   ========================================================= */

body[data-page="room-commission-settlement"] {
    --page-bg: #f3f2f4;
    --surface: #ffffff;
    --surface-soft: #faf8fa;
    --text: #252731;
    --text-soft: #666a75;
    --text-muted: #8b8f99;
    --line: #e1dde3;

    --primary: #2f3d56;
    --primary-dark: #1b2433;
    --primary-rgb: 47, 61, 86;

    --copper: #b7793c;
    --copper-dark: #744617;
    --copper-light: #efd3a0;
    --copper-rgb: 183, 121, 60;

    --burgundy: #8b1e46;
    --burgundy-dark: #5c102d;
    --burgundy-rgb: 139, 30, 70;

    --success: #15803d;
    --success-dark: #166534;
    --success-rgb: 21, 128, 61;

    --warning: #d97706;
    --warning-dark: #92400e;
    --warning-rgb: 217, 119, 6;

    --danger: #b91c1c;
    --danger-dark: #7f1d1d;
    --danger-rgb: 185, 28, 28;

    margin: 0;
    color: var(--text);
    background:
        radial-gradient(circle at 100% 0%, rgba(var(--primary-rgb), .085), transparent 31rem),
        radial-gradient(circle at 0% 100%, rgba(var(--copper-rgb), .045), transparent 27rem),
        var(--page-bg);
    font-family: Inter, "Segoe UI", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

body[data-page="room-commission-settlement"] *,
body[data-page="room-commission-settlement"] *::before,
body[data-page="room-commission-settlement"] *::after {
    box-sizing: border-box;
}

body[data-page="room-commission-settlement"] a,
body[data-page="room-commission-settlement"] button,
body[data-page="room-commission-settlement"] input,
body[data-page="room-commission-settlement"] select {
    -webkit-tap-highlight-color: transparent;
}

body[data-page="room-commission-settlement"] .container.page-with-nav {
    width: min(100% - 32px, 1260px);
    margin: 0 auto;
    padding: 18px 4px 92px;
}

/* ---------- Hero ---------- */
body[data-page="room-commission-settlement"] .commission-hero {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 18px;
    min-height: 194px;
    padding: 28px 26px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.20);
    border-radius: 20px;
    color: #fff;
    background:
        radial-gradient(circle at 12% 8%, rgba(255,255,255,.17), transparent 24%),
        radial-gradient(circle at 88% 112%, rgba(255,255,255,.10), transparent 38%),
        linear-gradient(118deg, rgba(255,255,255,.05), transparent 42%),
        linear-gradient(135deg, #1b2433 0%, #2f3d56 50%, #744617 100%);
    box-shadow:
        0 24px 54px rgba(27,36,51,.27),
        inset 0 1px 0 rgba(255,255,255,.13),
        inset 0 -1px 0 rgba(27,36,51,.24);
}

body[data-page="room-commission-settlement"] .commission-hero::before {
    content: "COMMISSION";
    position: absolute;
    z-index: -1;
    left: 24px;
    top: 64px;
    color: rgba(255,255,255,.04);
    font-size: clamp(3.7rem, 7vw, 6.6rem);
    font-weight: 950;
    letter-spacing: -.085em;
    line-height: .8;
    pointer-events: none;
}

body[data-page="room-commission-settlement"] .commission-hero::after {
    content: "";
    position: absolute;
    right: -84px;
    top: -102px;
    width: 282px;
    height: 282px;
    border: 40px solid rgba(255,255,255,.035);
    border-radius: 50%;
    box-shadow:
        0 0 0 1px rgba(255,255,255,.05),
        0 0 88px rgba(239,211,160,.13);
}

body[data-page="room-commission-settlement"] .commission-hero > div:first-child {
    position: relative;
    z-index: 2;
    min-width: 0;
}

body[data-page="room-commission-settlement"] .page-subtitle {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 28px;
    margin: 0 0 9px;
    padding: 4px 10px;
    border: 1px solid rgba(239,211,160,.24);
    border-radius: 999px;
    color: #ffedc4;
    background: rgba(239,211,160,.10);
    font-size: .62rem;
    font-weight: 900;
    letter-spacing: .11em;
    text-transform: uppercase;
}

body[data-page="room-commission-settlement"] .page-subtitle::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--copper-light);
    box-shadow:
        0 0 0 4px rgba(239,211,160,.12),
        0 0 14px rgba(239,211,160,.35);
}

body[data-page="room-commission-settlement"] .commission-hero h1 {
    margin: 0;
    color: #fff;
    font-size: clamp(1.7rem, 3vw, 2.5rem);
    font-weight: 900;
    line-height: 1.16;
    letter-spacing: -.032em;
}

body[data-page="room-commission-settlement"] .user-inline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    color: rgba(255,255,255,.76);
    font-size: .72rem;
}

body[data-page="room-commission-settlement"] .role-badge {
    display: inline-flex;
    min-height: 25px;
    align-items: center;
    padding: 3px 9px;
    border: 1px solid rgba(255,255,255,.20);
    border-radius: 999px;
    color: #fff;
    background: rgba(255,255,255,.10);
    font-size: .65rem;
    font-weight: 850;
}

body[data-page="room-commission-settlement"] .commission-hero-actions {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(2, minmax(130px, 1fr));
    gap: 8px;
    padding: 11px;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 13px;
    background:
        linear-gradient(145deg, rgba(255,255,255,.13), rgba(255,255,255,.055));
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.12),
        0 14px 28px rgba(27,36,51,.16);
    backdrop-filter: blur(12px);
}

body[data-page="room-commission-settlement"] .header-action-btn {
    display: inline-flex;
    min-height: 39px;
    align-items: center;
    justify-content: center;
    padding: 7px 12px;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 11px;
    color: #fff;
    background:
        linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.08));
    font-size: .66rem;
    font-weight: 850;
    text-align: center;
    text-decoration: none;
}

body[data-page="room-commission-settlement"] .commission-hero-actions .header-action-btn:first-child {
    border-color: var(--copper-light);
    color: #30240f;
    background:
        linear-gradient(145deg, var(--copper-light), var(--copper));
}

/* ---------- Alerts ---------- */
body[data-page="room-commission-settlement"] .alert {
    margin-top: 12px;
    padding: 11px 13px;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: #fff;
    box-shadow: 0 7px 16px rgba(37,39,49,.045);
    font-size: .72rem;
}

/* ---------- Main cards ---------- */
body[data-page="room-commission-settlement"] .commission-filter-card,
body[data-page="room-commission-settlement"] .commission-room-card,
body[data-page="room-commission-settlement"] .commission-section-card,
body[data-page="room-commission-settlement"] .commission-input-card {
    position: relative;
    overflow: hidden;
    margin-top: 14px;
    padding: 18px;
    border: 1px solid rgba(var(--primary-rgb), .15);
    border-radius: 16px;
    background:
        radial-gradient(circle at 100% 0%, rgba(var(--primary-rgb), .07), transparent 190px),
        linear-gradient(145deg, #ffffff, #faf8fa);
    box-shadow:
        0 12px 28px rgba(37,39,49,.07),
        inset 0 1px 0 #fff;
}

body[data-page="room-commission-settlement"] .commission-filter-card::before,
body[data-page="room-commission-settlement"] .commission-room-card::before,
body[data-page="room-commission-settlement"] .commission-section-card::before,
body[data-page="room-commission-settlement"] .commission-input-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 5px;
    background:
        linear-gradient(180deg, var(--primary), var(--copper));
}

body[data-page="room-commission-settlement"] .section-title-row {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
    padding: 12px 13px;
    border: 1px solid rgba(var(--primary-rgb), .11);
    border-radius: 12px;
    background:
        linear-gradient(145deg, rgba(255,255,255,.96), rgba(var(--primary-rgb), .04));
}

body[data-page="room-commission-settlement"] .section-title-row h3,
body[data-page="room-commission-settlement"] .section-title-row h4 {
    margin: 0;
    color: #344158;
    font-size: .80rem;
}

body[data-page="room-commission-settlement"] .section-subtitle {
    margin: 4px 0 0;
    color: var(--text-muted);
    font-size: .69rem;
    line-height: 1.45;
}

body[data-page="room-commission-settlement"] .section-count {
    display: inline-flex;
    min-height: 28px;
    align-items: center;
    padding: 4px 9px;
    border: 1px solid rgba(var(--copper-rgb), .18);
    border-radius: 999px;
    color: var(--copper-dark);
    background: rgba(var(--copper-rgb), .07);
    font-size: .67rem;
    font-weight: 850;
}

/* ---------- Filter form ---------- */
body[data-page="room-commission-settlement"] .commission-filter-form,
body[data-page="room-commission-settlement"] .commission-input-form {
    margin: 0;
    padding: 2px;
    border: 1px solid rgba(var(--primary-rgb), .10);
    border-radius: 12px;
    background: rgba(255,255,255,.80);
    box-shadow: inset 0 1px 0 #fff;
}

body[data-page="room-commission-settlement"] .commission-filter-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

body[data-page="room-commission-settlement"] .commission-filter-grid-three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

body[data-page="room-commission-settlement"] label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 6px;
    color: #535a67;
    font-size: .68rem;
    font-weight: 850;
}

body[data-page="room-commission-settlement"] label::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--primary);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), .09);
}

body[data-page="room-commission-settlement"] input,
body[data-page="room-commission-settlement"] select {
    width: 100%;
    min-width: 0;
    min-height: 41px;
    padding: 8px 10px;
    border: 1px solid #ddd8df;
    border-radius: 10px;
    color: #343640;
    background: linear-gradient(180deg, #fff, #fbfafb);
    font: inherit;
    font-size: .70rem;
    box-shadow:
        inset 0 1px 2px rgba(37,39,49,.035),
        0 3px 8px rgba(37,39,49,.025);
}

body[data-page="room-commission-settlement"] input:focus,
body[data-page="room-commission-settlement"] select:focus {
    outline: none;
    border-color: rgba(var(--copper-rgb), .55);
    box-shadow:
        0 0 0 4px rgba(var(--copper-rgb), .09),
        0 7px 16px rgba(var(--copper-rgb), .07);
}

body[data-page="room-commission-settlement"] input:disabled,
body[data-page="room-commission-settlement"] select:disabled {
    color: #7a7e86;
    background: #f2f1f3;
    cursor: not-allowed;
}

body[data-page="room-commission-settlement"] .commission-filter-form > button,
body[data-page="room-commission-settlement"] .commission-input-form > button {
    display: inline-flex;
    width: 100%;
    min-height: 40px;
    align-items: center;
    justify-content: center;
    margin-top: 12px;
    padding: 8px 12px;
    border: 1px solid var(--primary);
    border-radius: 10px;
    color: #fff;
    background:
        linear-gradient(145deg, var(--primary), var(--primary-dark));
    box-shadow:
        0 8px 18px rgba(var(--primary-rgb), .20),
        inset 0 1px 0 rgba(255,255,255,.16);
    font: inherit;
    font-size: .68rem;
    font-weight: 900;
    cursor: pointer;
}

/* ---------- Warning ---------- */
body[data-page="room-commission-settlement"] .commission-warning-card {
    margin-top: 14px;
    padding: 15px 16px;
    border: 1px solid rgba(var(--warning-rgb), .22);
    border-radius: 14px;
    background:
        radial-gradient(circle at 100% 0%, rgba(var(--warning-rgb), .09), transparent 160px),
        linear-gradient(145deg, #fffdf8, #fff8eb);
    box-shadow: 0 10px 22px rgba(var(--warning-rgb), .07);
}

body[data-page="room-commission-settlement"] .commission-warning-card h3 {
    margin: 0;
    color: var(--warning-dark);
    font-size: .88rem;
}

body[data-page="room-commission-settlement"] .commission-warning-card p {
    margin: 5px 0 0;
    color: #876b3f;
    font-size: .67rem;
}

/* ---------- Room summary ---------- */
body[data-page="room-commission-settlement"] .commission-room-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

body[data-page="room-commission-settlement"] .summary-label {
    display: inline-flex;
    min-height: 26px;
    align-items: center;
    padding: 3px 9px;
    border: 1px solid rgba(var(--primary-rgb), .14);
    border-radius: 999px;
    color: var(--primary-dark);
    background: rgba(var(--primary-rgb), .055);
    font-size: .62rem;
    font-weight: 850;
}

body[data-page="room-commission-settlement"] .commission-room-top h2 {
    margin: 10px 0 4px;
    color: #30405a;
    font-size: 1.55rem;
    font-weight: 950;
}

body[data-page="room-commission-settlement"] .commission-room-top p {
    margin: 0;
    color: var(--text-muted);
    font-size: .67rem;
}

body[data-page="room-commission-settlement"] .commission-status-pill {
    display: inline-flex;
    min-height: 30px;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    color: #fff;
    font-size: .65rem;
    font-weight: 900;
}

body[data-page="room-commission-settlement"] .commission-confirmed {
    background:
        linear-gradient(145deg, var(--success), var(--success-dark));
}

body[data-page="room-commission-settlement"] .commission-unconfirmed {
    color: #34250c;
    background:
        linear-gradient(145deg, var(--copper-light), var(--copper));
}

body[data-page="room-commission-settlement"] .commission-export-links {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 12px;
}

body[data-page="room-commission-settlement"] .commission-export-links a {
    display: inline-flex;
    min-height: 38px;
    align-items: center;
    justify-content: center;
    padding: 7px 10px;
    border: 1px solid var(--primary);
    border-radius: 9px;
    color: #fff;
    background:
        linear-gradient(145deg, var(--primary), var(--primary-dark));
    font-size: .64rem;
    font-weight: 850;
    text-align: center;
    text-decoration: none;
}

body[data-page="room-commission-settlement"] .commission-export-links a:last-child {
    border-color: var(--copper);
    color: #30240f;
    background:
        linear-gradient(145deg, var(--copper-light), var(--copper));
}

/* ---------- Info grids ---------- */
body[data-page="room-commission-settlement"] .attendance-info-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 7px;
    margin-top: 11px;
}

body[data-page="room-commission-settlement"] .attendance-info-grid > div {
    min-width: 0;
    padding: 9px 10px;
    border: 1px solid #e3dee4;
    border-radius: 10px;
    background:
        linear-gradient(145deg, rgba(255,255,255,.95), rgba(250,248,250,.94));
}

body[data-page="room-commission-settlement"] .attendance-info-grid span {
    display: block;
    color: var(--text-muted);
    font-size: .59rem;
}

body[data-page="room-commission-settlement"] .attendance-info-grid strong {
    display: block;
    margin-top: 3px;
    color: #3a3d46;
    font-size: .67rem;
    overflow-wrap: anywhere;
}

/* ---------- Commission rows ---------- */
body[data-page="room-commission-settlement"] .commission-row-list {
    display: grid;
    gap: 10px;
}

body[data-page="room-commission-settlement"] .commission-row-card {
    position: relative;
    overflow: hidden;
    padding: 15px;
    border: 1px solid rgba(var(--primary-rgb), .13);
    border-radius: 14px;
    background:
        radial-gradient(circle at 100% 0%, rgba(var(--copper-rgb), .06), transparent 150px),
        linear-gradient(145deg, #ffffff, #fbf9fb);
    box-shadow:
        0 8px 20px rgba(37,39,49,.05),
        inset 0 1px 0 #fff;
}

body[data-page="room-commission-settlement"] .commission-row-card::before {
    content: "";
    position: absolute;
    inset: 10px auto 10px 0;
    width: 4px;
    border-radius: 999px;
    background:
        linear-gradient(180deg, var(--primary), var(--copper));
}

body[data-page="room-commission-settlement"] .commission-row-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

body[data-page="room-commission-settlement"] .commission-row-top h4 {
    margin: 0;
    color: #344158;
    font-size: .9rem;
    font-weight: 900;
}

body[data-page="room-commission-settlement"] .commission-row-top p {
    margin: 3px 0 0;
    color: var(--text-muted);
    font-size: .63rem;
}

body[data-page="room-commission-settlement"] .commission-amount-pill {
    display: inline-flex;
    flex: 0 0 auto;
    min-height: 30px;
    align-items: center;
    padding: 4px 10px;
    border: 1px solid rgba(var(--copper-rgb), .20);
    border-radius: 999px;
    color: var(--copper-dark);
    background: rgba(var(--copper-rgb), .10);
    font-size: .64rem;
    font-weight: 900;
}

/* ---------- Money grid ---------- */
body[data-page="room-commission-settlement"] .commission-money-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 7px;
    margin-top: 11px;
}

body[data-page="room-commission-settlement"] .commission-money-grid > div {
    min-width: 0;
    padding: 9px 10px;
    border: 1px solid #e3dee4;
    border-radius: 10px;
    background:
        linear-gradient(145deg, rgba(255,255,255,.96), rgba(250,248,250,.94));
}

body[data-page="room-commission-settlement"] .commission-money-grid span {
    display: block;
    color: var(--text-muted);
    font-size: .58rem;
    line-height: 1.35;
}

body[data-page="room-commission-settlement"] .commission-money-grid strong {
    display: block;
    margin-top: 4px;
    color: #3a3d46;
    font-size: .66rem;
    overflow-wrap: anywhere;
}

body[data-page="room-commission-settlement"] .commission-money-grid > div:nth-child(3n) strong {
    color: var(--burgundy-dark);
}

body[data-page="room-commission-settlement"] .commission-money-grid > div:last-child strong {
    color: var(--copper-dark);
    font-size: .72rem;
}

/* ---------- Notes ---------- */
body[data-page="room-commission-settlement"] .commission-note-box {
    margin-top: 10px;
    padding: 10px 11px;
    border: 1px solid rgba(var(--copper-rgb), .16);
    border-radius: 10px;
    background:
        linear-gradient(145deg, #fffaf1, #ffffff);
}

body[data-page="room-commission-settlement"] .commission-note-box span {
    display: block;
    color: var(--copper-dark);
    font-size: .60rem;
    font-weight: 850;
}

body[data-page="room-commission-settlement"] .commission-note-box p {
    margin: 4px 0 0;
    color: var(--text-soft);
    font-size: .66rem;
    line-height: 1.48;
}

/* ---------- Calculation sections ---------- */
body[data-page="room-commission-settlement"] .payroll-calc-section {
    margin-top: 14px;
    padding: 14px;
    border: 1px solid rgba(var(--primary-rgb), .11);
    border-radius: 13px;
    background:
        linear-gradient(145deg, #fff, #faf8fa);
}

body[data-page="room-commission-settlement"] .payroll-calc-section:first-child {
    margin-top: 0;
}

body[data-page="room-commission-settlement"] .commission-input-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 9px;
}

body[data-page="room-commission-settlement"] .commission-total-field {
    grid-column: auto;
}

body[data-page="room-commission-settlement"] #js-final-commission-total,
body[data-page="room-commission-settlement"] #js-commission-total {
    color: #3e2d12;
    border-color: rgba(var(--copper-rgb), .26);
    background:
        linear-gradient(145deg, #fffdf8, #fff7e8);
    font-size: .86rem;
    font-weight: 950;
}

body[data-page="room-commission-settlement"] #js-final-commission-total {
    color: #5c102d;
    border-color: rgba(var(--burgundy-rgb), .22);
    background:
        linear-gradient(145deg, #fff, #fdf5f8);
}

/* ---------- Confirm area ---------- */
body[data-page="room-commission-settlement"] .commission-confirm-actions {
    margin-top: 10px;
}

body[data-page="room-commission-settlement"] .commission-confirm-actions form {
    margin-top: 10px;
}

body[data-page="room-commission-settlement"] .commission-confirm-actions .danger-btn {
    display: inline-flex;
    width: 100%;
    min-height: 42px;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
    border: 1px solid var(--burgundy);
    border-radius: 10px;
    color: #fff;
    background:
        linear-gradient(145deg, var(--burgundy), var(--burgundy-dark));
    box-shadow:
        0 8px 18px rgba(var(--burgundy-rgb), .20),
        inset 0 1px 0 rgba(255,255,255,.16);
    font: inherit;
    font-size: .68rem;
    font-weight: 900;
    cursor: pointer;
}

/* ---------- Empty state ---------- */
body[data-page="room-commission-settlement"] .empty-state-card {
    display: grid;
    min-height: 82px;
    place-items: center;
    padding: 14px;
    border: 1px dashed rgba(var(--primary-rgb), .22);
    border-radius: 10px;
    color: var(--text-muted);
    background: rgba(var(--primary-rgb), .035);
    font-size: .68rem;
    text-align: center;
}

/* ---------- Bottom nav ---------- */
body[data-page="room-commission-settlement"] .bottom-nav {
    position: fixed;
    z-index: 1000;
    right: 50%;
    bottom: max(10px, env(safe-area-inset-bottom));
    display: grid;
    grid-template-columns: repeat(3, minmax(82px, 1fr));
    width: min(calc(100% - 24px), 460px);
    padding: 5px;
    border: 1px solid rgba(216,210,218,.92);
    border-radius: 15px;
    background: rgba(255,255,255,.94);
    box-shadow:
        0 12px 32px rgba(37,39,49,.15),
        inset 0 1px 0 rgba(255,255,255,.95);
    backdrop-filter: blur(14px);
    transform: translateX(50%);
}

body[data-page="room-commission-settlement"] .bottom-nav a {
    display: flex;
    min-height: 38px;
    align-items: center;
    justify-content: center;
    padding: 6px 9px;
    border-radius: 10px;
    color: var(--text-soft);
    font-size: .72rem;
    font-weight: 800;
    text-align: center;
    text-decoration: none;
}

body[data-page="room-commission-settlement"] .bottom-nav a.active {
    color: #fff;
    background:
        linear-gradient(145deg, var(--primary), var(--copper));
    box-shadow:
        0 5px 13px rgba(var(--primary-rgb), .22),
        inset 0 1px 0 rgba(255,255,255,.14);
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
    body[data-page="room-commission-settlement"] .commission-money-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    body[data-page="room-commission-settlement"] .container.page-with-nav {
        width: min(100% - 18px, 640px);
        padding: 9px 0 82px;
    }

    body[data-page="room-commission-settlement"] .commission-hero {
        grid-template-columns: 1fr;
        gap: 12px;
        min-height: 0;
        padding: 19px 15px;
        border-radius: 16px;
    }

    body[data-page="room-commission-settlement"] .commission-hero::before {
        top: 58px;
        font-size: 3.7rem;
    }

    body[data-page="room-commission-settlement"] .commission-hero h1 {
        font-size: 1.5rem;
    }

    body[data-page="room-commission-settlement"] .commission-hero-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        padding: 8px;
        gap: 6px;
    }

    body[data-page="room-commission-settlement"] .commission-filter-card,
    body[data-page="room-commission-settlement"] .commission-room-card,
    body[data-page="room-commission-settlement"] .commission-section-card,
    body[data-page="room-commission-settlement"] .commission-input-card {
        margin-top: 10px;
        padding: 13px;
        border-radius: 13px;
    }

    body[data-page="room-commission-settlement"] .commission-filter-grid,
    body[data-page="room-commission-settlement"] .commission-filter-grid-three {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 7px;
    }

    body[data-page="room-commission-settlement"] .commission-filter-grid-three > div:last-child {
        grid-column: 1 / -1;
    }

    body[data-page="room-commission-settlement"] .attendance-info-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 5px;
    }

    body[data-page="room-commission-settlement"] .commission-money-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 5px;
    }

    body[data-page="room-commission-settlement"] .commission-input-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 7px;
    }

    body[data-page="room-commission-settlement"] .commission-total-field {
        grid-column: 1 / -1;
    }

    body[data-page="room-commission-settlement"] .commission-export-links {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
    }

    body[data-page="room-commission-settlement"] .bottom-nav {
        bottom: max(7px, env(safe-area-inset-bottom));
        width: calc(100% - 18px);
        max-width: 430px;
        padding: 4px;
        border-radius: 14px;
    }

    body[data-page="room-commission-settlement"] .bottom-nav a {
        min-height: 36px;
        padding: 5px;
        font-size: .68rem;
    }
}

@media (max-width: 430px) {
    body[data-page="room-commission-settlement"] .commission-room-top,
    body[data-page="room-commission-settlement"] .commission-row-top {
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
    }

    body[data-page="room-commission-settlement"] .commission-status-pill,
    body[data-page="room-commission-settlement"] .commission-amount-pill {
        justify-self: start;
        max-width: 100%;
        white-space: normal;
        text-align: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    body[data-page="room-commission-settlement"] *,
    body[data-page="room-commission-settlement"] *::before,
    body[data-page="room-commission-settlement"] *::after {
        animation: none !important;
        transition: none !important;
    }
}

/* =========================================================
   PRMS Room Payroll Settlement — Premium Charcoal & Royal Purple UI
   Page scope: body[data-page="room-payroll-settlement"]
   Palette: deep charcoal + royal purple + champagne gold
   ========================================================= */

body[data-page="room-payroll-settlement"] {
    --page-bg: #f3f1f4;
    --surface: #ffffff;
    --surface-soft: #faf8fb;
    --text: #26262e;
    --text-soft: #66636f;
    --text-muted: #8c8894;
    --line: #e2dce4;

    --primary: #34313f;
    --primary-dark: #1f1d27;
    --primary-rgb: 52, 49, 63;

    --purple: #5d3f8c;
    --purple-dark: #39245c;
    --purple-rgb: 93, 63, 140;

    --gold: #c89a45;
    --gold-dark: #7c5718;
    --gold-light: #f1d9a2;
    --gold-rgb: 200, 154, 69;

    --burgundy: #8b1e46;
    --burgundy-dark: #5c102d;
    --burgundy-rgb: 139, 30, 70;

    --success: #15803d;
    --success-dark: #166534;
    --success-rgb: 21, 128, 61;

    --warning: #d97706;
    --warning-dark: #92400e;
    --warning-rgb: 217, 119, 6;

    --danger: #b91c1c;
    --danger-dark: #7f1d1d;
    --danger-rgb: 185, 28, 28;

    margin: 0;
    color: var(--text);
    background:
        radial-gradient(circle at 100% 0%, rgba(var(--purple-rgb), .08), transparent 31rem),
        radial-gradient(circle at 0% 100%, rgba(var(--gold-rgb), .045), transparent 27rem),
        var(--page-bg);
    font-family: Inter, "Segoe UI", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

body[data-page="room-payroll-settlement"] *,
body[data-page="room-payroll-settlement"] *::before,
body[data-page="room-payroll-settlement"] *::after {
    box-sizing: border-box;
}

body[data-page="room-payroll-settlement"] a,
body[data-page="room-payroll-settlement"] button,
body[data-page="room-payroll-settlement"] input,
body[data-page="room-payroll-settlement"] select {
    -webkit-tap-highlight-color: transparent;
}

body[data-page="room-payroll-settlement"] .container.page-with-nav {
    width: min(100% - 32px, 1260px);
    margin: 0 auto;
    padding: 18px 4px 92px;
}

/* ---------- Hero ---------- */
body[data-page="room-payroll-settlement"] .payroll-hero {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 18px;
    min-height: 194px;
    padding: 28px 26px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.20);
    border-radius: 20px;
    color: #fff;
    background:
        radial-gradient(circle at 12% 8%, rgba(255,255,255,.17), transparent 24%),
        radial-gradient(circle at 88% 112%, rgba(255,255,255,.10), transparent 38%),
        linear-gradient(118deg, rgba(255,255,255,.05), transparent 42%),
        linear-gradient(135deg, #1f1d27 0%, #34313f 48%, #5d3f8c 100%);
    box-shadow:
        0 24px 54px rgba(31,29,39,.27),
        inset 0 1px 0 rgba(255,255,255,.13),
        inset 0 -1px 0 rgba(31,29,39,.24);
}

body[data-page="room-payroll-settlement"] .payroll-hero::before {
    content: "PAYROLL";
    position: absolute;
    z-index: -1;
    left: 24px;
    top: 64px;
    color: rgba(255,255,255,.04);
    font-size: clamp(4rem, 7.8vw, 6.9rem);
    font-weight: 950;
    letter-spacing: -.085em;
    line-height: .8;
    pointer-events: none;
}

body[data-page="room-payroll-settlement"] .payroll-hero::after {
    content: "";
    position: absolute;
    right: -84px;
    top: -102px;
    width: 282px;
    height: 282px;
    border: 40px solid rgba(255,255,255,.035);
    border-radius: 50%;
    box-shadow:
        0 0 0 1px rgba(255,255,255,.05),
        0 0 88px rgba(241,217,162,.13);
}

body[data-page="room-payroll-settlement"] .payroll-hero > div:first-child {
    position: relative;
    z-index: 2;
    min-width: 0;
}

body[data-page="room-payroll-settlement"] .page-subtitle {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 28px;
    margin: 0 0 9px;
    padding: 4px 10px;
    border: 1px solid rgba(241,217,162,.24);
    border-radius: 999px;
    color: #ffedc4;
    background: rgba(241,217,162,.10);
    font-size: .62rem;
    font-weight: 900;
    letter-spacing: .11em;
    text-transform: uppercase;
}

body[data-page="room-payroll-settlement"] .page-subtitle::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--gold-light);
    box-shadow:
        0 0 0 4px rgba(241,217,162,.12),
        0 0 14px rgba(241,217,162,.35);
}

body[data-page="room-payroll-settlement"] .payroll-hero h1 {
    margin: 0;
    color: #fff;
    font-size: clamp(1.7rem, 3vw, 2.5rem);
    font-weight: 900;
    line-height: 1.16;
    letter-spacing: -.032em;
}

body[data-page="room-payroll-settlement"] .user-inline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    color: rgba(255,255,255,.76);
    font-size: .72rem;
}

body[data-page="room-payroll-settlement"] .role-badge {
    display: inline-flex;
    min-height: 25px;
    align-items: center;
    padding: 3px 9px;
    border: 1px solid rgba(255,255,255,.20);
    border-radius: 999px;
    color: #fff;
    background: rgba(255,255,255,.10);
    font-size: .65rem;
    font-weight: 850;
}

body[data-page="room-payroll-settlement"] .payroll-hero-actions {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(2, minmax(130px, 1fr));
    gap: 8px;
    padding: 11px;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 13px;
    background:
        linear-gradient(145deg, rgba(255,255,255,.13), rgba(255,255,255,.055));
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.12),
        0 14px 28px rgba(31,29,39,.16);
    backdrop-filter: blur(12px);
}

body[data-page="room-payroll-settlement"] .header-action-btn {
    display: inline-flex;
    min-height: 39px;
    align-items: center;
    justify-content: center;
    padding: 7px 12px;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 11px;
    color: #fff;
    background:
        linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.08));
    font-size: .66rem;
    font-weight: 850;
    text-align: center;
    text-decoration: none;
}

body[data-page="room-payroll-settlement"] .payroll-hero-actions .header-action-btn:first-child {
    border-color: var(--gold-light);
    color: #30240f;
    background:
        linear-gradient(145deg, var(--gold-light), var(--gold));
}

/* ---------- Alerts ---------- */
body[data-page="room-payroll-settlement"] .alert {
    margin-top: 12px;
    padding: 11px 13px;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: #fff;
    box-shadow: 0 7px 16px rgba(38,38,46,.045);
    font-size: .72rem;
}

/* ---------- Main cards ---------- */
body[data-page="room-payroll-settlement"] .payroll-filter-card,
body[data-page="room-payroll-settlement"] .payroll-room-card,
body[data-page="room-payroll-settlement"] .payroll-row-section,
body[data-page="room-payroll-settlement"] .payroll-final-action-card {
    position: relative;
    overflow: hidden;
    margin-top: 14px;
    padding: 18px;
    border: 1px solid rgba(var(--primary-rgb), .15);
    border-radius: 16px;
    background:
        radial-gradient(circle at 100% 0%, rgba(var(--purple-rgb), .07), transparent 190px),
        linear-gradient(145deg, #ffffff, #faf8fb);
    box-shadow:
        0 12px 28px rgba(38,38,46,.07),
        inset 0 1px 0 #fff;
}

body[data-page="room-payroll-settlement"] .payroll-filter-card::before,
body[data-page="room-payroll-settlement"] .payroll-room-card::before,
body[data-page="room-payroll-settlement"] .payroll-row-section::before,
body[data-page="room-payroll-settlement"] .payroll-final-action-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 5px;
    background:
        linear-gradient(180deg, var(--primary), var(--purple));
}

body[data-page="room-payroll-settlement"] .section-title-row {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
    padding: 12px 13px;
    border: 1px solid rgba(var(--primary-rgb), .11);
    border-radius: 12px;
    background:
        linear-gradient(145deg, rgba(255,255,255,.96), rgba(var(--purple-rgb), .04));
}

body[data-page="room-payroll-settlement"] .section-title-row h3,
body[data-page="room-payroll-settlement"] .section-title-row h4 {
    margin: 0;
    color: #40384f;
    font-size: 1rem;
}

body[data-page="room-payroll-settlement"] .section-subtitle {
    margin: 4px 0 0;
    color: var(--text-muted);
    font-size: .69rem;
    line-height: 1.45;
}

body[data-page="room-payroll-settlement"] .section-count {
    display: inline-flex;
    min-height: 28px;
    align-items: center;
    padding: 4px 9px;
    border: 1px solid rgba(var(--purple-rgb), .18);
    border-radius: 999px;
    color: var(--purple-dark);
    background: rgba(var(--purple-rgb), .07);
    font-size: .67rem;
    font-weight: 850;
}

/* ---------- Filter ---------- */
body[data-page="room-payroll-settlement"] .payroll-filter-form {
    margin: 0;
    padding: 14px;
    border: 1px solid rgba(var(--primary-rgb), .10);
    border-radius: 12px;
    background: rgba(255,255,255,.80);
    box-shadow: inset 0 1px 0 #fff;
}

body[data-page="room-payroll-settlement"] .payroll-filter-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

body[data-page="room-payroll-settlement"] .payroll-filter-grid-three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

body[data-page="room-payroll-settlement"] label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 6px;
    color: #565261;
    font-size: .68rem;
    font-weight: 850;
}

body[data-page="room-payroll-settlement"] label::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--purple);
    box-shadow: 0 0 0 3px rgba(var(--purple-rgb), .09);
}

body[data-page="room-payroll-settlement"] input,
body[data-page="room-payroll-settlement"] select {
    width: 100%;
    min-width: 0;
    min-height: 41px;
    padding: 8px 10px;
    border: 1px solid #ddd7df;
    border-radius: 10px;
    color: #34333c;
    background: linear-gradient(180deg, #fff, #fbfafb);
    font: inherit;
    font-size: .70rem;
    box-shadow:
        inset 0 1px 2px rgba(38,38,46,.035),
        0 3px 8px rgba(38,38,46,.025);
}

body[data-page="room-payroll-settlement"] input:focus,
body[data-page="room-payroll-settlement"] select:focus {
    outline: none;
    border-color: rgba(var(--purple-rgb), .55);
    box-shadow:
        0 0 0 4px rgba(var(--purple-rgb), .09),
        0 7px 16px rgba(var(--purple-rgb), .07);
}

body[data-page="room-payroll-settlement"] input:disabled,
body[data-page="room-payroll-settlement"] select:disabled {
    color: #7a7781;
    background: #f2f0f3;
    cursor: not-allowed;
}

body[data-page="room-payroll-settlement"] .payroll-filter-form > button {
    display: inline-flex;
    width: 100%;
    min-height: 40px;
    align-items: center;
    justify-content: center;
    margin-top: 12px;
    padding: 8px 12px;
    border: 1px solid var(--primary);
    border-radius: 10px;
    color: #fff;
    background:
        linear-gradient(145deg, var(--primary), var(--primary-dark));
    box-shadow:
        0 8px 18px rgba(var(--primary-rgb), .20),
        inset 0 1px 0 rgba(255,255,255,.16);
    font: inherit;
    font-size: .68rem;
    font-weight: 900;
    cursor: pointer;
}

/* ---------- Warning ---------- */
body[data-page="room-payroll-settlement"] .payroll-warning-card {
    margin-top: 14px;
    padding: 15px 16px;
    border: 1px solid rgba(var(--warning-rgb), .22);
    border-radius: 14px;
    background:
        radial-gradient(circle at 100% 0%, rgba(var(--warning-rgb), .09), transparent 160px),
        linear-gradient(145deg, #fffdf8, #fff8eb);
    box-shadow: 0 10px 22px rgba(var(--warning-rgb), .07);
}

body[data-page="room-payroll-settlement"] .payroll-warning-card h3 {
    margin: 0;
    color: var(--warning-dark);
    font-size: .88rem;
}

body[data-page="room-payroll-settlement"] .payroll-warning-card p {
    margin: 5px 0 0;
    color: #876b3f;
    font-size: .67rem;
}

/* ---------- Room summary ---------- */
body[data-page="room-payroll-settlement"] .payroll-room-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

body[data-page="room-payroll-settlement"] .summary-label {
    display: inline-flex;
    min-height: 26px;
    align-items: center;
    padding: 3px 9px;
    border: 1px solid rgba(var(--purple-rgb), .14);
    border-radius: 999px;
    color: var(--purple-dark);
    background: rgba(var(--purple-rgb), .055);
    font-size: .62rem;
    font-weight: 850;
}

body[data-page="room-payroll-settlement"] .payroll-room-top h2 {
    margin: 10px 0 4px;
    color: #40384f;
    font-size: 1.55rem;
    font-weight: 950;
}

body[data-page="room-payroll-settlement"] .payroll-room-top p {
    margin: 0;
    color: var(--text-muted);
    font-size: .67rem;
}

body[data-page="room-payroll-settlement"] .payroll-status-pill {
    display: inline-flex;
    min-height: 30px;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    color: #fff;
    font-size: .65rem;
    font-weight: 900;
}

body[data-page="room-payroll-settlement"] .payroll-confirmed {
    background:
        linear-gradient(145deg, var(--success), var(--success-dark));
}

/* ---------- Shared info grid ---------- */
body[data-page="room-payroll-settlement"] .attendance-info-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
    margin-top: 11px;
}

body[data-page="room-payroll-settlement"] .attendance-info-grid > div {
    min-width: 0;
    padding: 9px 10px;
    border: 1px solid #e3dee5;
    border-radius: 10px;
    background:
        linear-gradient(145deg, rgba(255,255,255,.95), rgba(250,248,251,.94));
}

body[data-page="room-payroll-settlement"] .attendance-info-grid span {
    display: block;
    color: var(--text-muted);
    font-size: .59rem;
}

body[data-page="room-payroll-settlement"] .attendance-info-grid strong {
    display: block;
    margin-top: 3px;
    color: #3b3942;
    font-size: .67rem;
    overflow-wrap: anywhere;
}

/* ---------- Payroll cards ---------- */
body[data-page="room-payroll-settlement"] .payroll-row-list {
    display: grid;
    gap: 11px;
}

body[data-page="room-payroll-settlement"] .payroll-row-card {
    position: relative;
    overflow: hidden;
    padding: 15px;
    border: 1px solid rgba(var(--purple-rgb), .14);
    border-radius: 15px;
    background:
        radial-gradient(circle at 100% 0%, rgba(var(--purple-rgb), .07), transparent 160px),
        linear-gradient(145deg, #ffffff, #fbf9fc);
    box-shadow:
        0 9px 22px rgba(38,38,46,.055),
        inset 0 1px 0 #fff;
}

body[data-page="room-payroll-settlement"] .payroll-row-card::before {
    content: "";
    position: absolute;
    inset: 10px auto 10px 0;
    width: 4px;
    border-radius: 999px;
    background:
        linear-gradient(180deg, var(--primary), var(--purple));
}

body[data-page="room-payroll-settlement"] .payroll-row-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

body[data-page="room-payroll-settlement"] .payroll-row-top h3 {
    margin: 0;
    color: #40384f;
    font-size: .92rem;
    font-weight: 900;
}

body[data-page="room-payroll-settlement"] .payroll-row-top p {
    margin: 3px 0 0;
    color: var(--text-muted);
    font-size: .63rem;
    line-height: 1.45;
}

body[data-page="room-payroll-settlement"] .payroll-final-pill {
    display: inline-flex;
    min-height: 31px;
    align-items: center;
    padding: 4px 10px;
    border: 1px solid rgba(var(--gold-rgb), .22);
    border-radius: 999px;
    color: #3d2a0d;
    background:
        linear-gradient(145deg, var(--gold-light), var(--gold));
    box-shadow: 0 6px 14px rgba(var(--gold-rgb), .20);
    font-size: .65rem;
    font-weight: 950;
    white-space: nowrap;
}

/* ---------- Calculation sections ---------- */
body[data-page="room-payroll-settlement"] .payroll-calc-section {
    margin-top: 12px;
    padding: 12px;
    border: 1px solid rgba(var(--primary-rgb), .10);
    border-radius: 12px;
    background:
        linear-gradient(145deg, #fff, #faf8fb);
}

body[data-page="room-payroll-settlement"] .payroll-calc-section .section-title-row {
    margin-bottom: 9px;
    padding: 9px 10px;
}

body[data-page="room-payroll-settlement"] .payroll-money-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 7px;
}

body[data-page="room-payroll-settlement"] .payroll-money-grid > div {
    min-width: 0;
    padding: 9px 10px;
    border: 1px solid #e3dee5;
    border-radius: 10px;
    background:
        linear-gradient(145deg, rgba(255,255,255,.96), rgba(250,248,251,.94));
}

body[data-page="room-payroll-settlement"] .payroll-money-grid span {
    display: block;
    color: var(--text-muted);
    font-size: .58rem;
    line-height: 1.35;
}

body[data-page="room-payroll-settlement"] .payroll-money-grid strong {
    display: block;
    margin-top: 4px;
    color: #3a3840;
    font-size: .66rem;
    overflow-wrap: anywhere;
}

body[data-page="room-payroll-settlement"] .payroll-money-grid > div:nth-child(3n) strong {
    color: var(--burgundy-dark);
}

body[data-page="room-payroll-settlement"] .payroll-system-salary {
    border-color: rgba(var(--gold-rgb), .26) !important;
    background:
        radial-gradient(circle at 100% 0%, rgba(var(--gold-rgb), .12), transparent 100px),
        linear-gradient(145deg, #fffdf8, #fff8ec) !important;
}

body[data-page="room-payroll-settlement"] .payroll-system-salary strong {
    color: #5d3f0f !important;
    font-size: .78rem !important;
}

/* ---------- Details ---------- */
body[data-page="room-payroll-settlement"] .payroll-detail-collapse {
    margin-top: 12px;
    border: 1px solid rgba(var(--purple-rgb), .12);
    border-radius: 12px;
    background: rgba(255,255,255,.76);
    overflow: hidden;
}

body[data-page="room-payroll-settlement"] .payroll-detail-collapse summary {
    display: flex;
    min-height: 40px;
    align-items: center;
    justify-content: space-between;
    padding: 8px 11px;
    color: var(--purple-dark);
    background:
        linear-gradient(145deg, rgba(var(--purple-rgb), .07), rgba(var(--purple-rgb), .035));
    font-size: .67rem;
    font-weight: 900;
    cursor: pointer;
    list-style: none;
}

body[data-page="room-payroll-settlement"] .payroll-detail-collapse summary::-webkit-details-marker {
    display: none;
}

body[data-page="room-payroll-settlement"] .payroll-detail-collapse summary::after {
    content: "+";
    display: grid;
    width: 24px;
    height: 24px;
    place-items: center;
    border-radius: 8px;
    color: #fff;
    background:
        linear-gradient(145deg, var(--purple), var(--purple-dark));
}

body[data-page="room-payroll-settlement"] .payroll-detail-collapse[open] summary::after {
    content: "−";
}

/* ---------- Notes ---------- */
body[data-page="room-payroll-settlement"] .commission-note-box {
    margin-top: 10px;
    padding: 10px 11px;
    border: 1px solid rgba(var(--gold-rgb), .16);
    border-radius: 10px;
    background:
        linear-gradient(145deg, #fffaf1, #ffffff);
}

body[data-page="room-payroll-settlement"] .commission-note-box span {
    display: block;
    color: var(--gold-dark);
    font-size: .60rem;
    font-weight: 850;
}

body[data-page="room-payroll-settlement"] .commission-note-box p {
    margin: 4px 0 0;
    color: var(--text-soft);
    font-size: .66rem;
    line-height: 1.48;
}

/* ---------- Adjustment form ---------- */
body[data-page="room-payroll-settlement"] .payroll-adjust-form {
    margin-top: 12px;
    padding: 12px;
    border: 1px solid rgba(var(--purple-rgb), .11);
    border-radius: 12px;
    background: rgba(255,255,255,.80);
}

body[data-page="room-payroll-settlement"] .payroll-adjust-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

body[data-page="room-payroll-settlement"] .payroll-final-field {
    grid-column: 1 / -1;
}

body[data-page="room-payroll-settlement"] .payroll-final-field input {
    color: #3b270b;
    border-color: rgba(var(--gold-rgb), .28);
    background:
        linear-gradient(145deg, #fffdf8, #fff8ec);
    font-size: .88rem;
    font-weight: 950;
}

/* ---------- Final action card ---------- */
body[data-page="room-payroll-settlement"] .payroll-final-action-card > div:first-child h3 {
    margin: 0;
    color: #40384f;
    font-size: 1rem;
}

body[data-page="room-payroll-settlement"] .payroll-final-action-card > div:first-child p {
    margin: 5px 0 0;
    color: var(--text-muted);
    font-size: .68rem;
}

body[data-page="room-payroll-settlement"] .payroll-final-action-forms {
    margin-top: 12px;
}

body[data-page="room-payroll-settlement"] .payroll-final-action-forms form {
    margin-top: 10px;
}

body[data-page="room-payroll-settlement"] .payroll-final-action-forms .danger-btn {
    display: inline-flex;
    width: 100%;
    min-height: 42px;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
    border: 1px solid var(--burgundy);
    border-radius: 10px;
    color: #fff;
    background:
        linear-gradient(145deg, var(--burgundy), var(--burgundy-dark));
    box-shadow:
        0 8px 18px rgba(var(--burgundy-rgb), .20),
        inset 0 1px 0 rgba(255,255,255,.16);
    font: inherit;
    font-size: .68rem;
    font-weight: 900;
    cursor: pointer;
}

body[data-page="room-payroll-settlement"] .payroll-export-box {
    margin-top: 10px;
}

body[data-page="room-payroll-settlement"] .payroll-export-box a {
    display: inline-flex;
    width: 100%;
    min-height: 40px;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
    border: 1px solid var(--gold);
    border-radius: 10px;
    color: #30240f;
    background:
        linear-gradient(145deg, var(--gold-light), var(--gold));
    box-shadow:
        0 8px 18px rgba(var(--gold-rgb), .20),
        inset 0 1px 0 rgba(255,255,255,.42);
    font-size: .68rem;
    font-weight: 900;
    text-decoration: none;
}

/* ---------- Empty ---------- */
body[data-page="room-payroll-settlement"] .empty-state-card {
    display: grid;
    min-height: 82px;
    place-items: center;
    padding: 14px;
    border: 1px dashed rgba(var(--primary-rgb), .22);
    border-radius: 10px;
    color: var(--text-muted);
    background: rgba(var(--primary-rgb), .035);
    font-size: .68rem;
    text-align: center;
}

/* ---------- Bottom nav ---------- */
body[data-page="room-payroll-settlement"] .bottom-nav {
    position: fixed;
    z-index: 1000;
    right: 50%;
    bottom: max(10px, env(safe-area-inset-bottom));
    display: grid;
    grid-template-columns: repeat(3, minmax(82px, 1fr));
    width: min(calc(100% - 24px), 460px);
    padding: 5px;
    border: 1px solid rgba(216,210,219,.92);
    border-radius: 15px;
    background: rgba(255,255,255,.94);
    box-shadow:
        0 12px 32px rgba(38,38,46,.15),
        inset 0 1px 0 rgba(255,255,255,.95);
    backdrop-filter: blur(14px);
    transform: translateX(50%);
}

body[data-page="room-payroll-settlement"] .bottom-nav a {
    display: flex;
    min-height: 38px;
    align-items: center;
    justify-content: center;
    padding: 6px 9px;
    border-radius: 10px;
    color: var(--text-soft);
    font-size: .72rem;
    font-weight: 800;
    text-align: center;
    text-decoration: none;
}

body[data-page="room-payroll-settlement"] .bottom-nav a.active {
    color: #fff;
    background:
        linear-gradient(145deg, var(--primary), var(--purple));
    box-shadow:
        0 5px 13px rgba(var(--purple-rgb), .22),
        inset 0 1px 0 rgba(255,255,255,.14);
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
    body[data-page="room-payroll-settlement"] .payroll-money-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    body[data-page="room-payroll-settlement"] .container.page-with-nav {
        width: min(100% - 18px, 640px);
        padding: 9px 0 82px;
    }

    body[data-page="room-payroll-settlement"] .payroll-hero {
        grid-template-columns: 1fr;
        gap: 12px;
        min-height: 0;
        padding: 19px 15px;
        border-radius: 16px;
    }

    body[data-page="room-payroll-settlement"] .payroll-hero::before {
        top: 58px;
        font-size: 3.9rem;
    }

    body[data-page="room-payroll-settlement"] .payroll-hero h1 {
        font-size: 1.5rem;
    }

    body[data-page="room-payroll-settlement"] .payroll-hero-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        padding: 8px;
        gap: 6px;
    }

    body[data-page="room-payroll-settlement"] .payroll-filter-card,
    body[data-page="room-payroll-settlement"] .payroll-room-card,
    body[data-page="room-payroll-settlement"] .payroll-row-section,
    body[data-page="room-payroll-settlement"] .payroll-final-action-card {
        margin-top: 10px;
        padding: 13px;
        border-radius: 13px;
    }

    body[data-page="room-payroll-settlement"] .payroll-filter-grid,
    body[data-page="room-payroll-settlement"] .payroll-filter-grid-three {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 7px;
    }

    body[data-page="room-payroll-settlement"] .payroll-filter-grid-three > div:last-child {
        grid-column: 1 / -1;
    }

    body[data-page="room-payroll-settlement"] .attendance-info-grid,
    body[data-page="room-payroll-settlement"] .payroll-money-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 5px;
    }

    body[data-page="room-payroll-settlement"] .payroll-adjust-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 7px;
    }

    body[data-page="room-payroll-settlement"] .payroll-final-field {
        grid-column: 1 / -1;
    }

    body[data-page="room-payroll-settlement"] .bottom-nav {
        bottom: max(7px, env(safe-area-inset-bottom));
        width: calc(100% - 18px);
        max-width: 430px;
        padding: 4px;
        border-radius: 14px;
    }

    body[data-page="room-payroll-settlement"] .bottom-nav a {
        min-height: 36px;
        padding: 5px;
        font-size: .68rem;
    }
}

@media (max-width: 430px) {
    body[data-page="room-payroll-settlement"] .payroll-room-top,
    body[data-page="room-payroll-settlement"] .payroll-row-top {
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
    }

    body[data-page="room-payroll-settlement"] .payroll-status-pill,
    body[data-page="room-payroll-settlement"] .payroll-final-pill {
        justify-self: start;
        max-width: 100%;
        white-space: normal;
        text-align: center;
    }

    body[data-page="room-payroll-settlement"] .payroll-row-top > div:last-child {
        align-items: flex-start !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    body[data-page="room-payroll-settlement"] *,
    body[data-page="room-payroll-settlement"] *::before,
    body[data-page="room-payroll-settlement"] *::after {
        animation: none !important;
        transition: none !important;
    }
}
/* =========================================================
   PRMS Permission Management — Premium Graphite & Royal Violet UI
   Page scope: body[data-page="permissions"]
   Palette: deep graphite + royal violet + champagne gold
   ========================================================= */

body[data-page="permissions"] {
    --page-bg: #f3f2f5;
    --surface: #ffffff;
    --surface-soft: #faf9fb;
    --text: #272832;
    --text-soft: #676974;
    --text-muted: #8b8d97;
    --line: #e1dde4;

    --primary: #343946;
    --primary-dark: #1f232c;
    --primary-rgb: 52, 57, 70;

    --violet: #5a4688;
    --violet-dark: #342652;
    --violet-rgb: 90, 70, 136;

    --gold: #c89a45;
    --gold-dark: #7c5718;
    --gold-light: #f1d9a2;
    --gold-rgb: 200, 154, 69;

    --burgundy: #8b1e46;
    --burgundy-dark: #5c102d;
    --burgundy-rgb: 139, 30, 70;

    --success: #15803d;
    --success-dark: #166534;
    --success-rgb: 21, 128, 61;

    --warning: #d97706;
    --warning-dark: #92400e;
    --warning-rgb: 217, 119, 6;

    --danger: #b91c1c;
    --danger-dark: #7f1d1d;
    --danger-rgb: 185, 28, 28;

    margin: 0;
    color: var(--text);
    background:
        radial-gradient(circle at 100% 0%, rgba(var(--violet-rgb), .08), transparent 31rem),
        radial-gradient(circle at 0% 100%, rgba(var(--gold-rgb), .045), transparent 27rem),
        var(--page-bg);
    font-family: Inter, "Segoe UI", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

body[data-page="permissions"] *,
body[data-page="permissions"] *::before,
body[data-page="permissions"] *::after {
    box-sizing: border-box;
}

body[data-page="permissions"] a,
body[data-page="permissions"] button,
body[data-page="permissions"] input,
body[data-page="permissions"] select {
    -webkit-tap-highlight-color: transparent;
}

body[data-page="permissions"] .container.page-with-nav {
    width: min(100% - 32px, 1240px);
    margin: 0 auto;
    padding: 18px 4px 92px;
}

/* ---------- Hero ---------- */
body[data-page="permissions"] .permission-hero {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 18px;
    min-height: 190px;
    padding: 28px 26px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.20);
    border-radius: 20px;
    color: #fff;
    background:
        radial-gradient(circle at 12% 8%, rgba(255,255,255,.17), transparent 24%),
        radial-gradient(circle at 88% 112%, rgba(255,255,255,.10), transparent 38%),
        linear-gradient(118deg, rgba(255,255,255,.05), transparent 42%),
        linear-gradient(135deg, #1f232c 0%, #343946 48%, #5a4688 100%);
    box-shadow:
        0 24px 54px rgba(31,35,44,.27),
        inset 0 1px 0 rgba(255,255,255,.13),
        inset 0 -1px 0 rgba(31,35,44,.24);
}

body[data-page="permissions"] .permission-hero::before {
    content: "ACCESS";
    position: absolute;
    z-index: -1;
    left: 24px;
    top: 62px;
    color: rgba(255,255,255,.04);
    font-size: clamp(4rem, 8vw, 7rem);
    font-weight: 950;
    letter-spacing: -.085em;
    line-height: .8;
    pointer-events: none;
}

body[data-page="permissions"] .permission-hero::after {
    content: "";
    position: absolute;
    right: -84px;
    top: -102px;
    width: 282px;
    height: 282px;
    border: 40px solid rgba(255,255,255,.035);
    border-radius: 50%;
    box-shadow:
        0 0 0 1px rgba(255,255,255,.05),
        0 0 88px rgba(241,217,162,.13);
}

body[data-page="permissions"] .permission-hero > div:first-child {
    position: relative;
    z-index: 2;
    min-width: 0;
}

body[data-page="permissions"] .page-subtitle {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 28px;
    margin: 0 0 9px;
    padding: 4px 10px;
    border: 1px solid rgba(241,217,162,.24);
    border-radius: 999px;
    color: #ffedc4;
    background: rgba(241,217,162,.10);
    font-size: .62rem;
    font-weight: 900;
    letter-spacing: .11em;
    text-transform: uppercase;
}

body[data-page="permissions"] .page-subtitle::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--gold-light);
    box-shadow:
        0 0 0 4px rgba(241,217,162,.12),
        0 0 14px rgba(241,217,162,.35);
}

body[data-page="permissions"] .permission-hero h1 {
    margin: 0;
    color: #fff;
    font-size: clamp(1.7rem, 3vw, 2.5rem);
    font-weight: 900;
    line-height: 1.16;
    letter-spacing: -.032em;
}

body[data-page="permissions"] .user-inline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    color: rgba(255,255,255,.76);
    font-size: .72rem;
}

body[data-page="permissions"] .role-badge {
    display: inline-flex;
    min-height: 25px;
    align-items: center;
    padding: 3px 9px;
    border: 1px solid rgba(255,255,255,.20);
    border-radius: 999px;
    color: #fff;
    background: rgba(255,255,255,.10);
    font-size: .65rem;
    font-weight: 850;
}

body[data-page="permissions"] .permission-hero-actions {
    position: relative;
    z-index: 2;
    min-width: 175px;
    padding: 10px;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 12px;
    background:
        linear-gradient(145deg, rgba(255,255,255,.13), rgba(255,255,255,.055));
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.12),
        0 14px 28px rgba(31,35,44,.16);
    backdrop-filter: blur(12px);
}

body[data-page="permissions"] .header-action-btn {
    display: inline-flex;
    width: 100%;
    min-height: 39px;
    align-items: center;
    justify-content: center;
    padding: 7px 12px;
    border: 1px solid var(--gold-light);
    border-radius: 11px;
    color: #30240f;
    background:
        linear-gradient(145deg, var(--gold-light), var(--gold));
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.45),
        0 9px 20px rgba(var(--gold-rgb), .20);
    font-size: .68rem;
    font-weight: 850;
    text-align: center;
    text-decoration: none;
}

/* ---------- Alerts ---------- */
body[data-page="permissions"] .alert {
    margin-top: 12px;
    padding: 11px 13px;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: #fff;
    box-shadow: 0 7px 16px rgba(39,40,50,.045);
    font-size: .72rem;
}

/* ---------- Main cards ---------- */
body[data-page="permissions"] .permission-search-card,
body[data-page="permissions"] .permission-list-section,
body[data-page="permissions"] .permission-pagination-card {
    position: relative;
    overflow: hidden;
    margin-top: 14px;
    padding: 18px;
    border: 1px solid rgba(var(--primary-rgb), .15);
    border-radius: 16px;
    background:
        radial-gradient(circle at 100% 0%, rgba(var(--violet-rgb), .07), transparent 190px),
        linear-gradient(145deg, #ffffff, #faf9fb);
    box-shadow:
        0 12px 28px rgba(39,40,50,.07),
        inset 0 1px 0 #fff;
}

body[data-page="permissions"] .permission-search-card::before,
body[data-page="permissions"] .permission-list-section::before,
body[data-page="permissions"] .permission-pagination-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 5px;
    background:
        linear-gradient(180deg, var(--primary), var(--violet));
}

body[data-page="permissions"] .section-title-row {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
    padding: 12px 13px;
    border: 1px solid rgba(var(--primary-rgb), .11);
    border-radius: 12px;
    background:
        linear-gradient(145deg, rgba(255,255,255,.96), rgba(var(--violet-rgb), .04));
}

body[data-page="permissions"] .section-title-row h3 {
    margin: 0;
    color: #403a4d;
    font-size: 1rem;
}

body[data-page="permissions"] .section-subtitle {
    margin: 4px 0 0;
    color: var(--text-muted);
    font-size: .69rem;
    line-height: 1.45;
}

body[data-page="permissions"] .section-count {
    display: inline-flex;
    min-height: 28px;
    align-items: center;
    padding: 4px 9px;
    border: 1px solid rgba(var(--violet-rgb), .18);
    border-radius: 999px;
    color: var(--violet-dark);
    background: rgba(var(--violet-rgb), .07);
    font-size: .67rem;
    font-weight: 850;
}

/* ---------- Search ---------- */
body[data-page="permissions"] .permission-search-form {
    margin: 0;
    padding: 14px;
    border: 1px solid rgba(var(--primary-rgb), .10);
    border-radius: 12px;
    background: rgba(255,255,255,.80);
    box-shadow: inset 0 1px 0 #fff;
}

body[data-page="permissions"] .permission-search-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

body[data-page="permissions"] label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 6px;
    color: #565461;
    font-size: .68rem;
    font-weight: 850;
}

body[data-page="permissions"] input,
body[data-page="permissions"] select {
    width: 100%;
    min-width: 0;
    min-height: 41px;
    padding: 8px 10px;
    border: 1px solid #ddd8df;
    border-radius: 10px;
    color: #34343d;
    background: linear-gradient(180deg, #fff, #fbfafb);
    font: inherit;
    font-size: .70rem;
    box-shadow:
        inset 0 1px 2px rgba(39,40,50,.035),
        0 3px 8px rgba(39,40,50,.025);
}

body[data-page="permissions"] input:focus,
body[data-page="permissions"] select:focus {
    outline: none;
    border-color: rgba(var(--violet-rgb), .55);
    box-shadow:
        0 0 0 4px rgba(var(--violet-rgb), .09),
        0 7px 16px rgba(var(--violet-rgb), .07);
}

body[data-page="permissions"] .permission-search-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 12px;
}

body[data-page="permissions"] .permission-search-actions button,
body[data-page="permissions"] .clear-filter-btn {
    display: inline-flex;
    width: 100%;
    min-height: 40px;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
    border: 1px solid var(--primary);
    border-radius: 10px;
    color: #fff;
    background:
        linear-gradient(145deg, var(--primary), var(--primary-dark));
    box-shadow:
        0 8px 18px rgba(var(--primary-rgb), .20),
        inset 0 1px 0 rgba(255,255,255,.16);
    font: inherit;
    font-size: .68rem;
    font-weight: 900;
    text-decoration: none;
    cursor: pointer;
}

body[data-page="permissions"] .clear-filter-btn {
    border-color: var(--burgundy);
    background:
        linear-gradient(145deg, var(--burgundy), var(--burgundy-dark));
    box-shadow:
        0 8px 18px rgba(var(--burgundy-rgb), .20),
        inset 0 1px 0 rgba(255,255,255,.16);
}

/* ---------- Employee cards ---------- */
body[data-page="permissions"] .permission-card-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 11px;
}

body[data-page="permissions"] .permission-user-card {
    position: relative;
    overflow: hidden;
    padding: 15px;
    border: 1px solid rgba(var(--violet-rgb), .14);
    border-radius: 15px;
    background:
        radial-gradient(circle at 100% 0%, rgba(var(--violet-rgb), .07), transparent 160px),
        linear-gradient(145deg, #ffffff, #fbf9fc);
    box-shadow:
        0 9px 22px rgba(39,40,50,.055),
        inset 0 1px 0 #fff;
}

body[data-page="permissions"] .permission-user-card::before {
    content: "";
    position: absolute;
    inset: 10px auto 10px 0;
    width: 4px;
    border-radius: 999px;
    background:
        linear-gradient(180deg, var(--primary), var(--violet));
}

body[data-page="permissions"] .permission-user-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

body[data-page="permissions"] .permission-user-top h3 {
    margin: 0;
    color: #403a4d;
    font-size: .92rem;
    font-weight: 900;
}

body[data-page="permissions"] .permission-user-top p {
    margin: 3px 0 0;
    color: var(--text-muted);
    font-size: .63rem;
}

body[data-page="permissions"] .permission-status-pill {
    display: inline-flex;
    flex: 0 0 auto;
    min-height: 29px;
    align-items: center;
    padding: 4px 10px;
    border: 1px solid rgba(var(--gold-rgb), .22);
    border-radius: 999px;
    color: #3d2a0d;
    background:
        linear-gradient(145deg, var(--gold-light), var(--gold));
    box-shadow: 0 6px 14px rgba(var(--gold-rgb), .18);
    font-size: .64rem;
    font-weight: 900;
}

/* ---------- Permission templates ---------- */
body[data-page="permissions"] .permission-template-row {
    margin-top: 12px;
    padding: 10px;
    border: 1px solid rgba(var(--gold-rgb), .15);
    border-radius: 11px;
    background:
        linear-gradient(145deg, #fffaf1, #ffffff);
}

body[data-page="permissions"] .permission-template-row form {
    display: inline-block !important;
    margin: 0 5px 6px 0 !important;
}

body[data-page="permissions"] .permission-template-row .header-action-btn {
    width: auto;
    min-height: 32px;
    padding: 5px 9px;
    border-color: rgba(var(--violet-rgb), .18);
    color: var(--violet-dark);
    background: rgba(var(--violet-rgb), .07);
    box-shadow: none;
    font-size: .60rem;
}

body[data-page="permissions"] .permission-template-row .header-action-btn:hover {
    color: #fff;
    background:
        linear-gradient(145deg, var(--violet), var(--violet-dark));
}

/* ---------- Permission update form ---------- */
body[data-page="permissions"] .permission-update-form {
    margin-top: 12px;
    padding: 12px;
    border: 1px solid rgba(var(--primary-rgb), .10);
    border-radius: 12px;
    background: rgba(255,255,255,.82);
}

body[data-page="permissions"] .permission-checkbox-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
}

body[data-page="permissions"] .permission-checkbox-item {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    min-height: 42px;
    margin: 0;
    padding: 8px 9px;
    border: 1px solid #e2dce4;
    border-radius: 10px;
    color: #4e4b56;
    background:
        linear-gradient(145deg, #fff, #faf9fb);
    cursor: pointer;
}

body[data-page="permissions"] .permission-checkbox-item::before {
    display: none;
}

body[data-page="permissions"] .permission-checkbox-item input[type="checkbox"] {
    width: 17px;
    height: 17px;
    min-height: 0;
    margin: 0;
    accent-color: var(--violet);
    cursor: pointer;
}

body[data-page="permissions"] .permission-checkbox-item span {
    min-width: 0;
    font-size: .64rem;
    font-weight: 800;
    line-height: 1.35;
}

body[data-page="permissions"] .permission-checkbox-item:has(input:checked) {
    border-color: rgba(var(--violet-rgb), .30);
    background:
        radial-gradient(circle at 100% 0%, rgba(var(--gold-rgb), .11), transparent 90px),
        linear-gradient(145deg, rgba(var(--violet-rgb), .08), rgba(var(--violet-rgb), .035));
    box-shadow:
        inset 4px 0 0 var(--violet),
        0 5px 12px rgba(var(--violet-rgb), .07);
}

body[data-page="permissions"] .permission-checkbox-item:has(input:checked) span {
    color: var(--violet-dark);
    font-weight: 900;
}

body[data-page="permissions"] .permission-update-form > button {
    display: inline-flex;
    width: 100%;
    min-height: 40px;
    align-items: center;
    justify-content: center;
    margin-top: 11px;
    padding: 8px 12px;
    border: 1px solid var(--violet);
    border-radius: 10px;
    color: #fff;
    background:
        linear-gradient(145deg, var(--violet), var(--violet-dark));
    box-shadow:
        0 8px 18px rgba(var(--violet-rgb), .20),
        inset 0 1px 0 rgba(255,255,255,.16);
    font: inherit;
    font-size: .68rem;
    font-weight: 900;
    cursor: pointer;
}

/* ---------- Pagination ---------- */
body[data-page="permissions"] .permission-pagination-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 13px 16px;
}

body[data-page="permissions"] .permission-pagination-card span {
    display: block;
    color: var(--text-muted);
    font-size: .62rem;
}

body[data-page="permissions"] .permission-pagination-card strong {
    display: block;
    margin-top: 3px;
    color: #403a4d;
    font-size: .78rem;
}

body[data-page="permissions"] .permission-pagination-actions {
    display: flex;
    gap: 7px;
}

body[data-page="permissions"] .permission-pagination-actions a {
    display: inline-flex;
    min-height: 34px;
    align-items: center;
    justify-content: center;
    padding: 6px 11px;
    border: 1px solid var(--primary);
    border-radius: 9px;
    color: #fff;
    background:
        linear-gradient(145deg, var(--primary), var(--violet));
    font-size: .65rem;
    font-weight: 850;
    text-decoration: none;
}

/* ---------- Empty ---------- */
body[data-page="permissions"] .empty-state-card {
    display: grid;
    min-height: 88px;
    place-items: center;
    padding: 14px;
    border: 1px dashed rgba(var(--primary-rgb), .22);
    border-radius: 10px;
    color: var(--text-muted);
    background: rgba(var(--primary-rgb), .035);
    font-size: .68rem;
    text-align: center;
}

/* ---------- Bottom nav ---------- */
body[data-page="permissions"] .bottom-nav {
    position: fixed;
    z-index: 1000;
    right: 50%;
    bottom: max(10px, env(safe-area-inset-bottom));
    display: grid;
    grid-template-columns: repeat(3, minmax(82px, 1fr));
    width: min(calc(100% - 24px), 460px);
    padding: 5px;
    border: 1px solid rgba(216,210,219,.92);
    border-radius: 15px;
    background: rgba(255,255,255,.94);
    box-shadow:
        0 12px 32px rgba(39,40,50,.15),
        inset 0 1px 0 rgba(255,255,255,.95);
    backdrop-filter: blur(14px);
    transform: translateX(50%);
}

body[data-page="permissions"] .bottom-nav a {
    display: flex;
    min-height: 38px;
    align-items: center;
    justify-content: center;
    padding: 6px 9px;
    border-radius: 10px;
    color: var(--text-soft);
    font-size: .72rem;
    font-weight: 800;
    text-align: center;
    text-decoration: none;
}

body[data-page="permissions"] .bottom-nav a.active {
    color: #fff;
    background:
        linear-gradient(145deg, var(--primary), var(--violet));
    box-shadow:
        0 5px 13px rgba(var(--violet-rgb), .22),
        inset 0 1px 0 rgba(255,255,255,.14);
}

/* ---------- Responsive ---------- */
@media (max-width: 940px) {
    body[data-page="permissions"] .permission-card-list {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 700px) {
    body[data-page="permissions"] .container.page-with-nav {
        width: min(100% - 18px, 640px);
        padding: 9px 0 82px;
    }

    body[data-page="permissions"] .permission-hero {
        grid-template-columns: 1fr;
        gap: 12px;
        min-height: 0;
        padding: 19px 15px;
        border-radius: 16px;
    }

    body[data-page="permissions"] .permission-hero::before {
        top: 58px;
        font-size: 4rem;
    }

    body[data-page="permissions"] .permission-hero h1 {
        font-size: 1.5rem;
    }

    body[data-page="permissions"] .permission-hero-actions {
        width: 100%;
        min-width: 0;
        padding: 8px;
    }

    body[data-page="permissions"] .permission-search-card,
    body[data-page="permissions"] .permission-list-section,
    body[data-page="permissions"] .permission-pagination-card {
        margin-top: 10px;
        padding: 13px;
        border-radius: 13px;
    }

    body[data-page="permissions"] .permission-search-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 7px;
    }

    body[data-page="permissions"] .permission-search-grid > div:first-child {
        grid-column: 1 / -1;
    }

    body[data-page="permissions"] .permission-checkbox-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 5px;
    }

    body[data-page="permissions"] .permission-checkbox-item {
        min-height: 39px;
        padding: 7px 8px;
    }

    body[data-page="permissions"] .permission-pagination-card {
        align-items: stretch;
        flex-direction: column;
    }

    body[data-page="permissions"] .permission-pagination-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body[data-page="permissions"] .permission-pagination-actions a {
        width: 100%;
    }

    body[data-page="permissions"] .bottom-nav {
        bottom: max(7px, env(safe-area-inset-bottom));
        width: calc(100% - 18px);
        max-width: 430px;
        padding: 4px;
        border-radius: 14px;
    }

    body[data-page="permissions"] .bottom-nav a {
        min-height: 36px;
        padding: 5px;
        font-size: .68rem;
    }
}

@media (max-width: 430px) {
    body[data-page="permissions"] .permission-user-top {
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
    }

    body[data-page="permissions"] .permission-status-pill {
        justify-self: start;
        max-width: 100%;
        white-space: normal;
        text-align: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    body[data-page="permissions"] *,
    body[data-page="permissions"] *::before,
    body[data-page="permissions"] *::after {
        animation: none !important;
        transition: none !important;
    }
}


body[data-page="login"] {
    --bg:#101218; --panel:#211a2b; --card:#fbfafc; --text:#292832; --muted:#777381;
    --primary:#49385f; --primary-dark:#271f35; --aubergine:#6c2f54;
    --gold:#c99b48; --gold-dark:#7d591c; --gold-light:#f2dba5;
    min-height:100vh; margin:0; color:var(--text);
    background:
        radial-gradient(circle at 15% 10%, rgba(73,56,95,.35), transparent 30rem),
        radial-gradient(circle at 90% 88%, rgba(108,47,84,.25), transparent 32rem),
        linear-gradient(145deg,#0d0f15,#171923 50%,#221729);
    font-family:Inter,"Segoe UI","PingFang SC","Microsoft YaHei",Arial,sans-serif;
}
body[data-page="login"] *,body[data-page="login"] *::before,body[data-page="login"] *::after{box-sizing:border-box}
body[data-page="login"] .login-page-wrapper{
    display:grid;grid-template-columns:minmax(0,1.1fr) minmax(420px,.9fr);
    width:min(calc(100% - 34px),1180px);min-height:min(760px,calc(100vh - 40px));
    margin:20px auto;overflow:hidden;border:1px solid rgba(255,255,255,.12);
    border-radius:28px;background:rgba(255,255,255,.035);
    box-shadow:0 36px 90px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.08);
    backdrop-filter:blur(18px)
}
body[data-page="login"] .login-brand-panel{
    position:relative;display:grid;place-items:center;overflow:hidden;padding:42px;color:#fff;
    background:
        radial-gradient(circle at 50% 40%,rgba(255,255,255,.08),transparent 19rem),
        linear-gradient(145deg,rgba(39,31,53,.98),rgba(73,56,95,.94) 54%,rgba(108,47,84,.9))
}
body[data-page="login"] .login-brand-panel::before{
    content:"";position:absolute;width:460px;height:460px;border:1px solid rgba(255,255,255,.06);
    border-radius:50%;box-shadow:0 0 0 44px rgba(255,255,255,.025),0 0 0 88px rgba(255,255,255,.016),0 0 120px rgba(201,155,72,.12)
}
body[data-page="login"] .login-brand-panel::after{
    content:"PRMS";position:absolute;right:24px;bottom:18px;color:rgba(255,255,255,.035);
    font-size:clamp(4rem,10vw,8rem);font-weight:950;letter-spacing:-.08em;line-height:.8
}
body[data-page="login"] .login-brand-content{position:relative;z-index:2;width:min(100%,480px);text-align:center}
body[data-page="login"] .login-brand-logo-wrap{
    position:relative;display:grid;width:clamp(220px,28vw,330px);aspect-ratio:1;place-items:center;
    margin:0 auto 26px;border:1px solid rgba(255,255,255,.12);border-radius:50%;
    background:radial-gradient(circle at 50% 38%,rgba(255,255,255,.16),transparent 46%),linear-gradient(145deg,rgba(255,255,255,.1),rgba(255,255,255,.035));
    box-shadow:0 24px 50px rgba(13,14,20,.3),inset 0 1px 0 rgba(255,255,255,.12),0 0 0 12px rgba(255,255,255,.025),0 0 70px rgba(201,155,72,.16)
}
body[data-page="login"] .login-brand-logo-wrap::before{
    content:"";position:absolute;inset:16px;border:1px solid rgba(201,155,72,.22);border-radius:50%;
    box-shadow:inset 0 0 35px rgba(201,155,72,.07),0 0 30px rgba(201,155,72,.08)
}
body[data-page="login"] .login-brand-logo-wrap::after{content:"";position:absolute;inset:-14px;border:1px dashed rgba(241,217,162,.1);border-radius:50%}
body[data-page="login"] .login-brand-logo{
    position:relative;z-index:2;display:block;width:82%;height:82%;object-fit:contain;object-position:center;
    filter:drop-shadow(0 20px 24px rgba(0,0,0,.34)) drop-shadow(0 0 18px rgba(241,217,162,.12));
    transform:translateY(-2px)
}
body[data-page="login"] .login-brand-content h1{margin:0;color:#fff;font-size:clamp(1.8rem,3vw,2.7rem);font-weight:950;letter-spacing:-.035em}
body[data-page="login"] .login-brand-content>p{max-width:430px;margin:10px auto 0;color:rgba(255,255,255,.7);font-size:.78rem;line-height:1.7}
body[data-page="login"] .login-card{
    position:relative;display:flex;min-width:0;flex-direction:column;justify-content:center;
    padding:clamp(30px,5vw,58px);
    background:radial-gradient(circle at 100% 0%,rgba(73,56,95,.08),transparent 17rem),linear-gradient(145deg,rgba(255,255,255,.99),rgba(248,246,249,.97))
}
body[data-page="login"] .login-card::before{content:"";position:absolute;inset:0 auto 0 0;width:1px;background:linear-gradient(180deg,transparent,rgba(201,155,72,.34),transparent)}
body[data-page="login"] .login-language-switch{
    position:absolute;top:22px;right:24px;display:grid;grid-template-columns:repeat(2,minmax(58px,1fr));gap:5px;padding:4px;
    border:1px solid rgba(73,56,95,.11);border-radius:12px;background:rgba(255,255,255,.84);box-shadow:0 8px 20px rgba(37,38,49,.08)
}
body[data-page="login"] .login-language-switch form{margin:0}
body[data-page="login"] .login-language-switch button{width:100%;min-height:32px;padding:5px 9px;border:0;border-radius:8px;color:#76717e;background:transparent;font:inherit;font-size:.63rem;font-weight:850}
body[data-page="login"] .login-language-switch button.active{color:#fff;background:linear-gradient(145deg,var(--primary),var(--aubergine));box-shadow:0 5px 12px rgba(73,56,95,.18)}
body[data-page="login"] .login-card-header{margin-bottom:19px}
body[data-page="login"] .login-card-header .page-subtitle{
    display:inline-flex;align-items:center;gap:7px;min-height:27px;margin:0 0 9px;padding:4px 10px;
    border:1px solid rgba(201,155,72,.2);border-radius:999px;color:var(--gold-dark);background:rgba(201,155,72,.08);
    font-size:.62rem;font-weight:900;letter-spacing:.09em;text-transform:uppercase
}
body[data-page="login"] .login-card-header .page-subtitle::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 4px rgba(201,155,72,.1)}
body[data-page="login"] .login-card-header h2{margin:0;color:#2f2d38;font-size:clamp(1.45rem,2.3vw,2rem);font-weight:950;letter-spacing:-.03em}
body[data-page="login"] .login-card-header>p:last-child{margin:7px 0 0;color:var(--muted);font-size:.72rem}
body[data-page="login"] .alert{margin-bottom:12px;padding:10px 12px;border:1px solid #e1dce3;border-radius:10px;background:#fff;font-size:.68rem}
body[data-page="login"] .login-form{
    margin:0;padding:16px;border:1px solid rgba(73,56,95,.1);border-radius:15px;
    background:linear-gradient(145deg,rgba(255,255,255,.96),rgba(249,247,250,.94));
    box-shadow:0 12px 28px rgba(37,38,49,.07),inset 0 1px 0 #fff
}
body[data-page="login"] .login-input-group+.login-input-group{margin-top:11px}
body[data-page="login"] .login-input-group label{display:inline-flex;align-items:center;gap:7px;margin-bottom:6px;color:#575360;font-size:.68rem;font-weight:850}
body[data-page="login"] .login-input-group label::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--primary);box-shadow:0 0 0 3px rgba(73,56,95,.09)}
body[data-page="login"] .login-input-group input{
    width:100%;min-height:46px;padding:10px 12px;border:1px solid #ddd7df;border-radius:11px;color:#33323a;
    background:linear-gradient(180deg,#fff,#fbfafb);font:inherit;font-size:.72rem
}
body[data-page="login"] .login-input-group input:focus{outline:none;border-color:rgba(73,56,95,.52);box-shadow:0 0 0 4px rgba(73,56,95,.09),0 8px 18px rgba(73,56,95,.07)}
body[data-page="login"] .login-remember-row{display:inline-flex;align-items:center;gap:8px;margin:12px 0 0;color:#686571;font-size:.66rem;font-weight:750}
body[data-page="login"] .login-remember-row input{width:17px;height:17px;margin:0;accent-color:var(--primary)}
body[data-page="login"] .login-form>button{
    display:inline-flex;width:100%;min-height:46px;align-items:center;justify-content:center;margin-top:14px;padding:9px 12px;
    border:1px solid var(--primary);border-radius:11px;color:#fff;background:linear-gradient(145deg,var(--primary),var(--aubergine));
    box-shadow:0 10px 22px rgba(73,56,95,.24),inset 0 1px 0 rgba(255,255,255,.16);font:inherit;font-size:.72rem;font-weight:950
}
body[data-page="login"] .login-register-card{
    display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:13px;padding:11px 12px;
    border:1px solid rgba(201,155,72,.15);border-radius:11px;background:linear-gradient(145deg,#fffaf1,#fff);color:#77727d;font-size:.66rem
}
body[data-page="login"] .login-register-card a{color:var(--aubergine);font-weight:900;text-decoration:none}
@media(max-width:820px){
    body[data-page="login"] .login-page-wrapper{grid-template-columns:1fr;min-height:0}
    body[data-page="login"] .login-brand-panel{min-height:320px;padding:34px 22px 30px}
    body[data-page="login"] .login-brand-logo-wrap{width:clamp(180px,45vw,240px);margin-bottom:18px}
    body[data-page="login"] .login-card{padding:58px 24px 28px}
}
@media(max-width:520px){
    body[data-page="login"] .login-page-wrapper{width:calc(100% - 16px);margin:8px auto;border-radius:20px}
    body[data-page="login"] .login-brand-panel{min-height:270px;padding:25px 16px 22px}
    body[data-page="login"] .login-brand-panel::before{width:310px;height:310px}
    body[data-page="login"] .login-brand-logo-wrap{width:178px;margin-bottom:13px}
    body[data-page="login"] .login-brand-content h1{font-size:1.45rem}
    body[data-page="login"] .login-brand-content>p{font-size:.66rem;line-height:1.55}
    body[data-page="login"] .login-card{padding:54px 15px 20px}
    body[data-page="login"] .login-language-switch{top:14px;right:14px}
    body[data-page="login"] .login-form{padding:13px}
}
@media(max-width:390px){
    body[data-page="login"] .login-brand-panel{min-height:245px}
    body[data-page="login"] .login-brand-logo-wrap{width:155px}
    body[data-page="login"] .login-register-card{align-items:flex-start;flex-direction:column;gap:4px}
}

/* Center the register prompt */
body[data-page="login"] .login-register-card {
    justify-content: center;
    text-align: center;
}

body[data-page="login"] .login-register-card a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

@media (max-width: 390px) {
    body[data-page="login"] .login-register-card {
        align-items: center;
        justify-content: center;
        text-align: center;
    }
}

/* =========================================================
   PRMS Register — Premium Midnight Blue, Plum & Champagne UI
   Page scope: body[data-page="register"]
   ========================================================= */

body[data-page="register"] {
    --bg: #10131a;
    --bg-soft: #171b25;
    --text: #292a33;
    --muted: #767986;
    --line: #e1dde5;

    --primary: #32445f;
    --primary-dark: #1c2738;
    --primary-rgb: 50, 68, 95;

    --plum: #633d67;
    --plum-dark: #38213d;
    --plum-rgb: 99, 61, 103;

    --gold: #c99b48;
    --gold-dark: #7d591c;
    --gold-light: #f2dba5;
    --gold-rgb: 201, 155, 72;

    --success: #15803d;
    --success-dark: #166534;
    --success-rgb: 21, 128, 61;

    --warning: #d97706;
    --warning-dark: #92400e;
    --warning-rgb: 217, 119, 6;

    --danger: #b91c1c;
    --danger-dark: #7f1d1d;
    --danger-rgb: 185, 28, 28;

    min-height: 100vh;
    margin: 0;
    color: var(--text);
    background:
        radial-gradient(circle at 14% 10%, rgba(var(--primary-rgb), .35), transparent 30rem),
        radial-gradient(circle at 92% 88%, rgba(var(--plum-rgb), .26), transparent 32rem),
        linear-gradient(145deg, #0d1016 0%, #151923 48%, #21182a 100%);
    font-family: Inter, "Segoe UI", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

body[data-page="register"] *,
body[data-page="register"] *::before,
body[data-page="register"] *::after {
    box-sizing: border-box;
}

body[data-page="register"] a,
body[data-page="register"] button,
body[data-page="register"] input,
body[data-page="register"] select {
    -webkit-tap-highlight-color: transparent;
}

body[data-page="register"] .register-page-wrapper {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(440px, .95fr);
    width: min(calc(100% - 34px), 1200px);
    min-height: min(800px, calc(100vh - 40px));
    margin: 20px auto;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 28px;
    background: rgba(255,255,255,.035);
    box-shadow:
        0 36px 90px rgba(0,0,0,.42),
        inset 0 1px 0 rgba(255,255,255,.08);
    backdrop-filter: blur(18px);
}

/* ---------- Brand panel ---------- */
body[data-page="register"] .register-brand-panel {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 100%;
    overflow: hidden;
    padding: 42px;
    color: #fff;
    background:
        radial-gradient(circle at 50% 40%, rgba(255,255,255,.08), transparent 19rem),
        linear-gradient(145deg, rgba(28,39,56,.98), rgba(50,68,95,.94) 52%, rgba(99,61,103,.90));
}

body[data-page="register"] .register-brand-panel::before {
    content: "";
    position: absolute;
    width: 470px;
    height: 470px;
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 50%;
    box-shadow:
        0 0 0 46px rgba(255,255,255,.025),
        0 0 0 92px rgba(255,255,255,.016),
        0 0 125px rgba(var(--gold-rgb), .13);
}

body[data-page="register"] .register-brand-panel::after {
    content: "JOIN PRMS";
    position: absolute;
    right: 24px;
    bottom: 18px;
    color: rgba(255,255,255,.035);
    font-size: clamp(3.8rem, 8vw, 7rem);
    font-weight: 950;
    letter-spacing: -.08em;
    line-height: .8;
}

body[data-page="register"] .register-brand-content {
    position: relative;
    z-index: 2;
    width: min(100%, 500px);
    text-align: center;
}

body[data-page="register"] .register-brand-logo-wrap {
    position: relative;
    display: grid;
    width: clamp(220px, 27vw, 330px);
    aspect-ratio: 1;
    place-items: center;
    margin: 0 auto 26px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 50%;
    background:
        radial-gradient(circle at 50% 38%, rgba(255,255,255,.16), transparent 46%),
        linear-gradient(145deg, rgba(255,255,255,.10), rgba(255,255,255,.035));
    box-shadow:
        0 24px 50px rgba(13,14,20,.30),
        inset 0 1px 0 rgba(255,255,255,.12),
        0 0 0 12px rgba(255,255,255,.025),
        0 0 72px rgba(var(--gold-rgb), .17);
}

body[data-page="register"] .register-brand-logo-wrap::before {
    content: "";
    position: absolute;
    inset: 16px;
    border: 1px solid rgba(var(--gold-rgb), .23);
    border-radius: 50%;
    box-shadow:
        inset 0 0 36px rgba(var(--gold-rgb), .08),
        0 0 30px rgba(var(--gold-rgb), .08);
}

body[data-page="register"] .register-brand-logo-wrap::after {
    content: "";
    position: absolute;
    inset: -14px;
    border: 1px dashed rgba(241,217,162,.10);
    border-radius: 50%;
}

body[data-page="register"] .register-brand-logo {
    position: relative;
    z-index: 2;
    display: block;
    width: 82%;
    height: 82%;
    object-fit: contain;
    object-position: center;
    filter:
        drop-shadow(0 20px 24px rgba(0,0,0,.34))
        drop-shadow(0 0 18px rgba(241,217,162,.13));
    transform: translateY(-2px);
}

body[data-page="register"] .register-brand-content h1 {
    margin: 0;
    color: #fff;
    font-size: clamp(1.8rem, 3vw, 2.7rem);
    font-weight: 950;
    letter-spacing: -.035em;
}

body[data-page="register"] .register-brand-content > p {
    max-width: 440px;
    margin: 10px auto 0;
    color: rgba(255,255,255,.70);
    font-size: .78rem;
    line-height: 1.7;
}

/* ---------- Register card ---------- */
body[data-page="register"] .register-card {
    position: relative;
    display: flex;
    min-width: 0;
    flex-direction: column;
    justify-content: center;
    padding: clamp(30px, 4.5vw, 54px);
    background:
        radial-gradient(circle at 100% 0%, rgba(var(--primary-rgb), .08), transparent 17rem),
        linear-gradient(145deg, rgba(255,255,255,.99), rgba(248,246,250,.97));
}

body[data-page="register"] .register-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 1px;
    background: linear-gradient(180deg, transparent, rgba(var(--gold-rgb), .34), transparent);
}

/* ---------- Language ---------- */
body[data-page="register"] .login-language-switch {
    position: absolute;
    top: 22px;
    right: 24px;
    display: grid;
    grid-template-columns: repeat(2, minmax(58px, 1fr));
    gap: 5px;
    padding: 4px;
    border: 1px solid rgba(var(--primary-rgb), .11);
    border-radius: 12px;
    background: rgba(255,255,255,.84);
    box-shadow: 0 8px 20px rgba(37,38,49,.08);
}

body[data-page="register"] .login-language-switch form {
    margin: 0;
}

body[data-page="register"] .login-language-switch button {
    width: 100%;
    min-height: 32px;
    padding: 5px 9px;
    border: 0;
    border-radius: 8px;
    color: #76717e;
    background: transparent;
    font: inherit;
    font-size: .63rem;
    font-weight: 850;
    cursor: pointer;
}

body[data-page="register"] .login-language-switch button.active {
    color: #fff;
    background: linear-gradient(145deg, var(--primary), var(--plum));
    box-shadow: 0 5px 12px rgba(var(--primary-rgb), .18);
}

/* ---------- Header ---------- */
body[data-page="register"] .register-card-header {
    margin-bottom: 18px;
}

body[data-page="register"] .register-card-header .page-subtitle {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 27px;
    margin: 0 0 9px;
    padding: 4px 10px;
    border: 1px solid rgba(var(--gold-rgb), .20);
    border-radius: 999px;
    color: var(--gold-dark);
    background: rgba(var(--gold-rgb), .08);
    font-size: .62rem;
    font-weight: 900;
    letter-spacing: .09em;
    text-transform: uppercase;
}

body[data-page="register"] .register-card-header .page-subtitle::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--gold);
    box-shadow: 0 0 0 4px rgba(var(--gold-rgb), .10);
}

body[data-page="register"] .register-card-header h2 {
    margin: 0;
    color: #2f3039;
    font-size: clamp(1.45rem, 2.3vw, 2rem);
    font-weight: 950;
    letter-spacing: -.03em;
}

body[data-page="register"] .register-card-header > p:last-child {
    margin: 7px 0 0;
    color: var(--muted);
    font-size: .72rem;
}

/* ---------- Alert ---------- */
body[data-page="register"] .alert {
    margin-bottom: 12px;
    padding: 10px 12px;
    border: 1px solid #e1dce3;
    border-radius: 10px;
    background: #fff;
    font-size: .68rem;
}

/* ---------- Form ---------- */
body[data-page="register"] .register-form {
    margin: 0;
    padding: 16px;
    border: 1px solid rgba(var(--primary-rgb), .10);
    border-radius: 15px;
    background:
        linear-gradient(145deg, rgba(255,255,255,.96), rgba(249,247,250,.94));
    box-shadow:
        0 12px 28px rgba(37,38,49,.07),
        inset 0 1px 0 #fff;
}

body[data-page="register"] .register-input-group + .register-input-group {
    margin-top: 11px;
}

body[data-page="register"] .register-input-group label,
body[data-page="register"] .register-promoter-grid label,
body[data-page="register"] #temporary-password-box label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 6px;
    color: #575b65;
    font-size: .68rem;
    font-weight: 850;
}

body[data-page="register"] .register-input-group label::before,
body[data-page="register"] .register-promoter-grid label::before,
body[data-page="register"] #temporary-password-box label::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--primary);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), .09);
}

body[data-page="register"] .register-input-group input,
body[data-page="register"] .register-input-group select,
body[data-page="register"] .register-promoter-grid select,
body[data-page="register"] #temporary-password-box input {
    width: 100%;
    min-width: 0;
    min-height: 45px;
    padding: 9px 12px;
    border: 1px solid #ddd8df;
    border-radius: 11px;
    color: #343640;
    background: linear-gradient(180deg, #fff, #fbfafb);
    font: inherit;
    font-size: .72rem;
}

body[data-page="register"] .register-input-group input:focus,
body[data-page="register"] .register-input-group select:focus,
body[data-page="register"] .register-promoter-grid select:focus {
    outline: none;
    border-color: rgba(var(--primary-rgb), .52);
    box-shadow:
        0 0 0 4px rgba(var(--primary-rgb), .09),
        0 8px 18px rgba(var(--primary-rgb), .07);
}

/* ---------- Promoter fields ---------- */
body[data-page="register"] .register-promoter-fields {
    margin-top: 12px;
    padding: 13px;
    border: 1px solid rgba(var(--gold-rgb), .17);
    border-radius: 12px;
    background:
        radial-gradient(circle at 100% 0%, rgba(var(--gold-rgb), .10), transparent 120px),
        linear-gradient(145deg, #fffaf1, #fff);
}

body[data-page="register"] .register-promoter-title {
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(var(--gold-rgb), .16);
}

body[data-page="register"] .register-promoter-title span {
    color: var(--gold-dark);
    font-size: .68rem;
    font-weight: 900;
}

body[data-page="register"] .register-promoter-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
}

body[data-page="register"] #team-leader-field {
    margin-top: 11px;
}

body[data-page="register"] .register-form > button {
    display: inline-flex;
    width: 100%;
    min-height: 46px;
    align-items: center;
    justify-content: center;
    margin-top: 14px;
    padding: 9px 12px;
    border: 1px solid var(--primary);
    border-radius: 11px;
    color: #fff;
    background: linear-gradient(145deg, var(--primary), var(--plum));
    box-shadow:
        0 10px 22px rgba(var(--primary-rgb), .24),
        inset 0 1px 0 rgba(255,255,255,.16);
    font: inherit;
    font-size: .72rem;
    font-weight: 950;
    cursor: pointer;
}

/* ---------- Login / Status card ---------- */
body[data-page="register"] .register-login-card {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 13px;
    padding: 12px;
    border: 1px solid rgba(var(--gold-rgb), .16);
    border-radius: 12px;
    background:
        linear-gradient(145deg, #fffaf1, #fff);
    color: #77727d;
    font-size: .66rem;
    text-align: center;
}

body[data-page="register"] .register-login-card a {
    color: var(--plum);
    font-weight: 900;
    text-decoration: none;
}

body[data-page="register"] #registration-status-card {
    align-items: stretch;
    flex-direction: column;
    text-align: left;
}

body[data-page="register"] #registration-status-card strong {
    color: #34333d;
    font-size: .84rem;
}

body[data-page="register"] #registration-status-card p {
    margin: 5px 0 0;
    color: var(--muted);
    font-size: .66rem;
    line-height: 1.5;
}

body[data-page="register"] #temporary-password-box {
    margin-top: 10px;
    padding: 12px;
    border: 1px solid rgba(var(--success-rgb), .18);
    border-radius: 11px;
    background:
        linear-gradient(145deg, #f5fff8, #ffffff);
}

body[data-page="register"] #temporary-password-box > div {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 7px;
}

body[data-page="register"] #temporary-password-box button {
    min-height: 45px;
    padding: 8px 11px;
    border: 1px solid var(--success);
    border-radius: 10px;
    color: #fff;
    background:
        linear-gradient(145deg, var(--success), var(--success-dark));
    font: inherit;
    font-size: .65rem;
    font-weight: 900;
    cursor: pointer;
}

body[data-page="register"] #go-to-login-link {
    display: inline-flex;
    min-height: 42px;
    align-items: center;
    justify-content: center;
    margin-top: 10px;
    padding: 8px 12px;
    border: 1px solid var(--primary);
    border-radius: 10px;
    color: #fff;
    background: linear-gradient(145deg, var(--primary), var(--plum));
    text-align: center;
}

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
    body[data-page="register"] .register-page-wrapper {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    body[data-page="register"] .register-brand-panel {
        min-height: 320px;
        padding: 34px 22px 30px;
    }

    body[data-page="register"] .register-brand-logo-wrap {
        width: clamp(180px, 45vw, 240px);
        margin-bottom: 18px;
    }

    body[data-page="register"] .register-card {
        padding: 58px 24px 28px;
    }
}

@media (max-width: 520px) {
    body[data-page="register"] .register-page-wrapper {
        width: calc(100% - 16px);
        margin: 8px auto;
        border-radius: 20px;
    }

    body[data-page="register"] .register-brand-panel {
        min-height: 270px;
        padding: 25px 16px 22px;
    }

    body[data-page="register"] .register-brand-panel::before {
        width: 310px;
        height: 310px;
    }

    body[data-page="register"] .register-brand-logo-wrap {
        width: 178px;
        margin-bottom: 13px;
    }

    body[data-page="register"] .register-brand-content h1 {
        font-size: 1.45rem;
    }

    body[data-page="register"] .register-brand-content > p {
        font-size: .66rem;
        line-height: 1.55;
    }

    body[data-page="register"] .register-card {
        padding: 54px 15px 20px;
    }

    body[data-page="register"] .login-language-switch {
        top: 14px;
        right: 14px;
    }

    body[data-page="register"] .register-form {
        padding: 13px;
    }

    body[data-page="register"] .register-promoter-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 7px;
    }
}

@media (max-width: 390px) {
    body[data-page="register"] .register-brand-panel {
        min-height: 245px;
    }

    body[data-page="register"] .register-brand-logo-wrap {
        width: 155px;
    }

    body[data-page="register"] .register-login-card {
        align-items: center;
        flex-direction: column;
        gap: 4px;
    }

    body[data-page="register"] #registration-status-card {
        align-items: stretch;
    }

    body[data-page="register"] #temporary-password-box > div {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    body[data-page="register"] *,
    body[data-page="register"] *::before,
    body[data-page="register"] *::after {
        animation: none !important;
        transition: none !important;
    }
}

/* =========================================================
   PRMS Change Password — Premium Deep Teal & Antique Gold UI
   Page scope: body[data-page="change-password"]
   ========================================================= */

body[data-page="change-password"] {
    --page-bg: #eef1f1;
    --surface: #ffffff;
    --surface-soft: #f8faf9;
    --text: #252a2b;
    --text-soft: #646d6f;
    --text-muted: #8a9294;
    --line: #dce2e1;

    --primary: #2f5558;
    --primary-dark: #1a3335;
    --primary-rgb: 47, 85, 88;

    --gold: #b98a3d;
    --gold-dark: #744e18;
    --gold-light: #ecd39a;
    --gold-rgb: 185, 138, 61;

    --burgundy: #8b1e3f;
    --burgundy-dark: #5d1028;
    --burgundy-rgb: 139, 30, 63;

    min-height: 100vh;
    margin: 0;
    color: var(--text);
    background:
        radial-gradient(circle at 100% 0%, rgba(var(--primary-rgb), .10), transparent 30rem),
        radial-gradient(circle at 0% 100%, rgba(var(--gold-rgb), .06), transparent 28rem),
        linear-gradient(145deg, #e9efee, #f5f3ef);
    font-family: Inter, "Segoe UI", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

body[data-page="change-password"] *,
body[data-page="change-password"] *::before,
body[data-page="change-password"] *::after {
    box-sizing: border-box;
}

body[data-page="change-password"] a,
body[data-page="change-password"] button,
body[data-page="change-password"] input {
    -webkit-tap-highlight-color: transparent;
}

body[data-page="change-password"] .password-premium-container {
    position: relative;
    width: min(100% - 28px, 860px);
    margin: 0 auto;
    padding: 20px 0 34px;
}

/* ---------- Language switch ---------- */
body[data-page="change-password"] .login-language-switch {
    position: absolute;
    z-index: 20;
    top: 34px;
    right: 16px;
    display: grid;
    grid-template-columns: repeat(2, minmax(58px, 1fr));
    gap: 5px;
    padding: 4px;
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 12px;
    background: rgba(255,255,255,.10);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.12),
        0 8px 20px rgba(26,51,53,.14);
    backdrop-filter: blur(12px);
}

body[data-page="change-password"] .login-language-switch form {
    margin: 0;
}

body[data-page="change-password"] .login-language-switch button {
    width: 100%;
    min-height: 32px;
    padding: 5px 9px;
    border: 0;
    border-radius: 8px;
    color: rgba(255,255,255,.72);
    background: transparent;
    font: inherit;
    font-size: .63rem;
    font-weight: 850;
    cursor: pointer;
}

body[data-page="change-password"] .login-language-switch button.active {
    color: #2f2411;
    background:
        linear-gradient(145deg, var(--gold-light), var(--gold));
    box-shadow:
        0 5px 12px rgba(var(--gold-rgb), .18),
        inset 0 1px 0 rgba(255,255,255,.35);
}

/* ---------- Hero ---------- */
body[data-page="change-password"] .password-premium-hero {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 18px;
    min-height: 160px;
    padding: 34px 28px 28px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.20);
    border-radius: 22px;
    color: #fff;
    background:
        radial-gradient(circle at 12% 8%, rgba(255,255,255,.17), transparent 24%),
        radial-gradient(circle at 88% 112%, rgba(255,255,255,.10), transparent 38%),
        linear-gradient(118deg, rgba(255,255,255,.05), transparent 42%),
        linear-gradient(135deg, #1a3335 0%, #2f5558 52%, #744e18 100%);
    box-shadow:
        0 26px 60px rgba(26,51,53,.28),
        inset 0 1px 0 rgba(255,255,255,.13);
}

body[data-page="change-password"] .password-premium-hero::before {
    content: "SECURITY";
    position: absolute;
    z-index: -1;
    left: 24px;
    bottom: 18px;
    color: rgba(255,255,255,.04);
    font-size: clamp(4rem, 8vw, 6.8rem);
    font-weight: 950;
    letter-spacing: -.085em;
    line-height: .8;
}

body[data-page="change-password"] .password-premium-hero::after {
    content: "";
    position: absolute;
    right: -86px;
    top: -104px;
    width: 290px;
    height: 290px;
    border: 42px solid rgba(255,255,255,.035);
    border-radius: 50%;
    box-shadow:
        0 0 0 1px rgba(255,255,255,.05),
        0 0 90px rgba(236,211,154,.13);
}

body[data-page="change-password"] .password-premium-hero-main {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 18px;
    min-width: 0;
}

body[data-page="change-password"] .password-premium-icon {
    display: grid;
    width: 82px;
    height: 82px;
    place-items: center;
    border: 1px solid rgba(236,211,154,.28);
    border-radius: 24px;
    color: #2f2411;
    background:
        radial-gradient(circle at 35% 30%, rgba(255,255,255,.55), transparent 42%),
        linear-gradient(145deg, var(--gold-light), var(--gold));
    box-shadow:
        0 18px 34px rgba(116,78,24,.24),
        inset 0 1px 0 rgba(255,255,255,.45),
        0 0 0 10px rgba(255,255,255,.035);
    font-size: 1.15rem;
    font-weight: 950;
}

body[data-page="change-password"] .page-subtitle {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 28px;
    margin: 0 0 9px;
    padding: 4px 10px;
    border: 1px solid rgba(236,211,154,.24);
    border-radius: 999px;
    color: #ffedc4;
    background: rgba(236,211,154,.10);
    font-size: .62rem;
    font-weight: 900;
    letter-spacing: .10em;
    text-transform: uppercase;
}

body[data-page="change-password"] .page-subtitle::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--gold-light);
    box-shadow: 0 0 0 4px rgba(236,211,154,.12);
}

body[data-page="change-password"] .password-premium-hero h1 {
    margin: 0;
    color: #fff;
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    font-weight: 950;
    line-height: 1.16;
    letter-spacing: -.032em;
}

body[data-page="change-password"] .password-premium-desc {
    max-width: 560px;
    margin: 8px 0 0;
    color: rgba(255,255,255,.72);
    font-size: .72rem;
    line-height: 1.6;
}

body[data-page="change-password"] .password-premium-hero > form,
body[data-page="change-password"] .password-premium-hero > .password-premium-back-btn {
    position: relative;
    z-index: 2;
    margin: 0;
}

body[data-page="change-password"] .password-premium-back-btn {
    display: inline-flex;
    min-width: 150px;
    min-height: 40px;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
    border: 1px solid rgba(255,255,255,.18) !important;
    border-radius: 11px;
    color: #fff;
    background:
        linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.08)) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.12),
        0 10px 22px rgba(26,51,53,.16);
    font: inherit;
    font-size: .66rem;
    font-weight: 850;
    text-align: center;
    text-decoration: none;
}

/* ---------- Alert ---------- */
body[data-page="change-password"] .alert {
    margin-top: 12px;
    padding: 11px 13px;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: #fff;
    box-shadow: 0 7px 16px rgba(37,42,43,.05);
    font-size: .70rem;
}

/* ---------- Card ---------- */
body[data-page="change-password"] .password-premium-card {
    position: relative;
    overflow: hidden;
    margin-top: 14px;
    padding: 20px;
    border: 1px solid rgba(var(--primary-rgb), .14);
    border-radius: 18px;
    background:
        radial-gradient(circle at 100% 0%, rgba(var(--primary-rgb), .07), transparent 180px),
        linear-gradient(145deg, #ffffff, #f9faf8);
    box-shadow:
        0 14px 34px rgba(37,42,43,.08),
        inset 0 1px 0 #fff;
}

body[data-page="change-password"] .password-premium-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 5px;
    background:
        linear-gradient(180deg, var(--primary), var(--gold));
}

body[data-page="change-password"] .password-premium-card-title {
    padding: 13px 14px;
    border: 1px solid rgba(var(--primary-rgb), .10);
    border-radius: 12px;
    background:
        linear-gradient(145deg, rgba(255,255,255,.96), rgba(var(--primary-rgb), .04));
}

body[data-page="change-password"] .password-premium-card-title > span {
    display: inline-flex;
    align-items: center;
    min-height: 25px;
    padding: 3px 9px;
    border: 1px solid rgba(var(--gold-rgb), .18);
    border-radius: 999px;
    color: var(--gold-dark);
    background: rgba(var(--gold-rgb), .08);
    font-size: .60rem;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

body[data-page="change-password"] .password-premium-card-title h3 {
    margin: 8px 0 0;
    color: #33494b;
    font-size: 1rem;
}

body[data-page="change-password"] .password-premium-card-title p {
    margin: 5px 0 0;
    color: var(--text-muted);
    font-size: .68rem;
}

/* ---------- Form ---------- */
body[data-page="change-password"] .password-premium-form {
    margin: 13px 0 0;
    padding: 15px;
    border: 1px solid rgba(var(--primary-rgb), .10);
    border-radius: 13px;
    background: rgba(255,255,255,.82);
}

body[data-page="change-password"] .password-premium-field + .password-premium-field {
    margin-top: 11px;
}

body[data-page="change-password"] .password-premium-field label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 6px;
    color: #555f60;
    font-size: .68rem;
    font-weight: 850;
}

body[data-page="change-password"] .password-premium-field label::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--primary);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), .09);
}

body[data-page="change-password"] .password-premium-field input {
    width: 100%;
    min-height: 46px;
    padding: 10px 12px;
    border: 1px solid #d9dedc;
    border-radius: 11px;
    color: #343a3a;
    background:
        linear-gradient(180deg, #fff, #fbfcfb);
    font: inherit;
    font-size: .72rem;
    box-shadow:
        inset 0 1px 2px rgba(37,42,43,.035),
        0 3px 8px rgba(37,42,43,.025);
}

body[data-page="change-password"] .password-premium-field input:focus {
    outline: none;
    border-color: rgba(var(--primary-rgb), .52);
    box-shadow:
        0 0 0 4px rgba(var(--primary-rgb), .09),
        0 8px 18px rgba(var(--primary-rgb), .07);
}

body[data-page="change-password"] .password-premium-form > button {
    display: inline-flex;
    width: 100%;
    min-height: 46px;
    align-items: center;
    justify-content: center;
    margin-top: 14px;
    padding: 9px 12px;
    border: 1px solid var(--primary);
    border-radius: 11px;
    color: #fff;
    background:
        linear-gradient(145deg, var(--primary), var(--primary-dark));
    box-shadow:
        0 10px 22px rgba(var(--primary-rgb), .24),
        inset 0 1px 0 rgba(255,255,255,.16);
    font: inherit;
    font-size: .72rem;
    font-weight: 950;
    cursor: pointer;
}

/* ---------- Bottom link ---------- */
body[data-page="change-password"] .password-premium-bottom-link {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 13px 0 0;
    padding: 10px;
    border: 1px solid rgba(var(--gold-rgb), .15);
    border-radius: 11px;
    background:
        linear-gradient(145deg, #fffaf1, #ffffff);
    text-align: center;
}

body[data-page="change-password"] .password-premium-bottom-link form {
    margin: 0;
}

body[data-page="change-password"] .password-premium-bottom-link a,
body[data-page="change-password"] .password-premium-bottom-link button {
    color: var(--burgundy) !important;
    background: transparent !important;
    font: inherit;
    font-size: .66rem;
    font-weight: 900;
    text-decoration: none;
}

/* ---------- Responsive ---------- */
@media (max-width: 700px) {
    body[data-page="change-password"] .password-premium-container {
        width: min(100% - 16px, 620px);
        padding: 8px 0 20px;
    }

    body[data-page="change-password"] .login-language-switch {
        top: 20px;
        right: 12px;
    }

    body[data-page="change-password"] .password-premium-hero {
        grid-template-columns: 1fr;
        align-items: stretch;
        gap: 14px;
        min-height: 0;
        padding: 30px 16px 18px;
        border-radius: 17px;
    }

    body[data-page="change-password"] .password-premium-hero-main {
        grid-template-columns: auto minmax(0, 1fr);
        gap: 12px;
    }

    body[data-page="change-password"] .password-premium-icon {
        width: 62px;
        height: 62px;
        border-radius: 18px;
        font-size: .9rem;
    }

    body[data-page="change-password"] .password-premium-hero h1 {
        font-size: 1.45rem;
    }

    body[data-page="change-password"] .password-premium-back-btn {
        width: 100%;
        min-width: 0;
    }

    body[data-page="change-password"] .password-premium-card {
        margin-top: 10px;
        padding: 13px;
        border-radius: 14px;
    }
}

@media (max-width: 430px) {
    body[data-page="change-password"] .password-premium-hero-main {
        grid-template-columns: 1fr;
    }

    body[data-page="change-password"] .password-premium-icon {
        width: 56px;
        height: 56px;
    }

    body[data-page="change-password"] .password-premium-desc {
        font-size: .66rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    body[data-page="change-password"] *,
    body[data-page="change-password"] *::before,
    body[data-page="change-password"] *::after {
        animation: none !important;
        transition: none !important;
    }
}

/* =========================================================
   Bottom Back Link Fix
   ========================================================= */

body[data-page="change-password"] .password-premium-bottom-link {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    margin-top: 13px;
    padding: 10px 12px;
    border: 1px solid rgba(var(--gold-rgb), .18);
    border-radius: 11px;
    background:
        linear-gradient(145deg, #fffaf1, #ffffff);
    box-shadow:
        0 7px 16px rgba(37,42,43,.045),
        inset 0 1px 0 #fff;
    text-align: center;
}

body[data-page="change-password"] .password-premium-bottom-link form {
    display: flex;
    width: 100%;
    justify-content: center;
    margin: 0;
}

body[data-page="change-password"] .password-premium-bottom-link a,
body[data-page="change-password"] .password-premium-bottom-link button {
    display: inline-flex !important;
    min-height: 36px;
    align-items: center;
    justify-content: center;
    padding: 7px 14px !important;
    border: 1px solid rgba(var(--burgundy-rgb), .18) !important;
    border-radius: 9px !important;
    color: var(--burgundy) !important;
    background: rgba(var(--burgundy-rgb), .055) !important;
    box-shadow: none !important;
    font: inherit;
    font-size: .66rem !important;
    font-weight: 900 !important;
    text-decoration: none;
    cursor: pointer;
}

body[data-page="change-password"] .password-premium-bottom-link a:hover,
body[data-page="change-password"] .password-premium-bottom-link button:hover {
    color: #fff !important;
    background:
        linear-gradient(145deg, var(--burgundy), var(--burgundy-dark)) !important;
}

/* =========================================================
   Refined Minimal Bottom Link
   ========================================================= */

body[data-page="change-password"] .password-premium-bottom-link {
    position: relative;
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    margin: 16px 0 0;
    padding: 14px 0 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    text-align: center;
}

body[data-page="change-password"] .password-premium-bottom-link::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: min(100%, 280px);
    height: 1px;
    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(var(--primary-rgb), .16),
            rgba(var(--gold-rgb), .28),
            rgba(var(--primary-rgb), .16),
            transparent
        );
    transform: translateX(-50%);
}

body[data-page="change-password"] .password-premium-bottom-link form {
    display: flex;
    width: auto;
    justify-content: center;
    margin: 0;
}

body[data-page="change-password"] .password-premium-bottom-link a,
body[data-page="change-password"] .password-premium-bottom-link button {
    position: relative;
    display: inline-flex !important;
    min-height: 34px;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 6px 10px !important;
    border: 0 !important;
    border-radius: 8px !important;
    color: var(--text-soft) !important;
    background: transparent !important;
    box-shadow: none !important;
    font: inherit;
    font-size: .65rem !important;
    font-weight: 850 !important;
    letter-spacing: .01em;
    text-decoration: none;
    cursor: pointer;
}

body[data-page="change-password"] .password-premium-bottom-link a::before,
body[data-page="change-password"] .password-premium-bottom-link button::before {
    content: "←";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--gold-dark);
    font-size: .78rem;
    font-weight: 950;
    transition: transform .18s ease;
}

body[data-page="change-password"] .password-premium-bottom-link a:hover,
body[data-page="change-password"] .password-premium-bottom-link button:hover {
    color: var(--primary-dark) !important;
    background: rgba(var(--primary-rgb), .045) !important;
}

body[data-page="change-password"] .password-premium-bottom-link a:hover::before,
body[data-page="change-password"] .password-premium-bottom-link button:hover::before {
    transform: translateX(-2px);
}

@media (max-width: 430px) {
    body[data-page="change-password"] .password-premium-bottom-link {
        margin-top: 13px;
        padding-top: 12px;
    }
}

/* =========================================================
   PRMS Work Mode — Premium Midnight Navy & Champagne Gold UI
   Page scope: body[data-page="work-mode"]
   ========================================================= */

body[data-page="work-mode"] {
    --page-bg: #f1f2f5;
    --surface: #ffffff;
    --surface-soft: #f8f9fb;
    --text: #272934;
    --text-soft: #686b78;
    --text-muted: #8d909b;
    --line: #dde0e7;

    --primary: #33445f;
    --primary-dark: #1d293b;
    --primary-rgb: 51, 68, 95;

    --gold: #b98a3d;
    --gold-dark: #744e18;
    --gold-light: #ecd39a;
    --gold-rgb: 185, 138, 61;

    --brick: #9b3f35;
    --brick-dark: #64231e;
    --brick-rgb: 155, 63, 53;

    min-height: 100vh;
    margin: 0;
    color: var(--text);
    background:
        radial-gradient(circle at 100% 0%, rgba(var(--primary-rgb), .10), transparent 30rem),
        radial-gradient(circle at 0% 100%, rgba(var(--gold-rgb), .055), transparent 28rem),
        linear-gradient(145deg, #eceff4, #f6f3ef);
    font-family: Inter, "Segoe UI", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

body[data-page="work-mode"] *,
body[data-page="work-mode"] *::before,
body[data-page="work-mode"] *::after {
    box-sizing: border-box;
}

body[data-page="work-mode"] a,
body[data-page="work-mode"] button,
body[data-page="work-mode"] select {
    -webkit-tap-highlight-color: transparent;
}

body[data-page="work-mode"] .work-mode-page-container {
    position: relative;
    width: min(100% - 28px, 920px);
    margin: 0 auto;
    padding: 20px 0 30px;
}

/* Language switch */
body[data-page="work-mode"] .login-language-switch {
    position: absolute;
    z-index: 20;
    top: 34px;
    right: 16px;
    display: grid;
    grid-template-columns: repeat(2, minmax(58px, 1fr));
    gap: 5px;
    padding: 4px;
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 12px;
    background: rgba(255,255,255,.10);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.12),
        0 8px 20px rgba(29,41,59,.14);
    backdrop-filter: blur(12px);
}

body[data-page="work-mode"] .login-language-switch form {
    margin: 0;
}

body[data-page="work-mode"] .login-language-switch button {
    width: 100%;
    min-height: 32px;
    padding: 5px 9px;
    border: 0;
    border-radius: 8px;
    color: rgba(255,255,255,.72);
    background: transparent;
    font: inherit;
    font-size: .63rem;
    font-weight: 850;
    cursor: pointer;
}

body[data-page="work-mode"] .login-language-switch button.active {
    color: #30240f;
    background:
        linear-gradient(145deg, var(--gold-light), var(--gold));
    box-shadow:
        0 5px 12px rgba(var(--gold-rgb), .18),
        inset 0 1px 0 rgba(255,255,255,.38);
}

/* Hero */
body[data-page="work-mode"] .work-mode-hero {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 18px;
    min-height: 225px;
    padding: 34px 28px 28px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.20);
    border-radius: 22px;
    color: #fff;
    background:
        radial-gradient(circle at 12% 8%, rgba(255,255,255,.17), transparent 24%),
        radial-gradient(circle at 88% 112%, rgba(255,255,255,.10), transparent 38%),
        linear-gradient(118deg, rgba(255,255,255,.05), transparent 42%),
        linear-gradient(135deg, #1d293b 0%, #33445f 54%, #744e18 100%);
    box-shadow:
        0 26px 60px rgba(29,41,59,.28),
        inset 0 1px 0 rgba(255,255,255,.13);
}

body[data-page="work-mode"] .work-mode-hero::before {
    content: "WORK MODE";
    position: absolute;
    z-index: -1;
    left: 24px;
    bottom: 18px;
    color: rgba(255,255,255,.04);
    font-size: clamp(3.8rem, 8vw, 6.8rem);
    font-weight: 950;
    letter-spacing: -.085em;
    line-height: .8;
}

body[data-page="work-mode"] .work-mode-hero::after {
    content: "";
    position: absolute;
    right: -86px;
    top: -104px;
    width: 290px;
    height: 290px;
    border: 42px solid rgba(255,255,255,.035);
    border-radius: 50%;
    box-shadow:
        0 0 0 1px rgba(255,255,255,.05),
        0 0 90px rgba(236,211,154,.13);
}

body[data-page="work-mode"] .work-mode-hero > div:first-child {
    position: relative;
    z-index: 2;
    min-width: 0;
}

body[data-page="work-mode"] .page-subtitle {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 28px;
    margin: 0 0 9px;
    padding: 4px 10px;
    border: 1px solid rgba(236,211,154,.24);
    border-radius: 999px;
    color: #ffedc4;
    background: rgba(236,211,154,.10);
    font-size: .62rem;
    font-weight: 900;
    letter-spacing: .10em;
    text-transform: uppercase;
}

body[data-page="work-mode"] .page-subtitle::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--gold-light);
    box-shadow: 0 0 0 4px rgba(236,211,154,.12);
}

body[data-page="work-mode"] .work-mode-hero h1 {
    margin: 0;
    color: #fff;
    font-size: clamp(1.8rem, 3vw, 2.55rem);
    font-weight: 950;
    line-height: 1.16;
    letter-spacing: -.032em;
}

body[data-page="work-mode"] .work-mode-desc {
    max-width: 560px;
    margin: 8px 0 0;
    color: rgba(255,255,255,.72);
    font-size: .72rem;
    line-height: 1.6;
}

body[data-page="work-mode"] .user-inline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 11px;
    color: rgba(255,255,255,.76);
    font-size: .70rem;
}

body[data-page="work-mode"] .role-badge {
    display: inline-flex;
    min-height: 25px;
    align-items: center;
    padding: 3px 9px;
    border: 1px solid rgba(255,255,255,.20);
    border-radius: 999px;
    color: #fff;
    background: rgba(255,255,255,.10);
    font-size: .64rem;
    font-weight: 850;
}

body[data-page="work-mode"] .work-mode-user-card {
    position: relative;
    z-index: 2;
    min-width: 170px;
    padding: 14px;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 14px;
    background:
        linear-gradient(145deg, rgba(255,255,255,.13), rgba(255,255,255,.055));
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.12),
        0 14px 28px rgba(29,41,59,.16);
    backdrop-filter: blur(12px);
}

body[data-page="work-mode"] .work-mode-user-card span {
    display: block;
    color: rgba(255,255,255,.62);
    font-size: .60rem;
}

body[data-page="work-mode"] .work-mode-user-card strong {
    display: block;
    margin-top: 5px;
    color: #fff;
    font-size: .82rem;
}

/* Alert */
body[data-page="work-mode"] .alert {
    margin-top: 12px;
    padding: 11px 13px;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: #fff;
    box-shadow: 0 7px 16px rgba(39,41,52,.05);
    font-size: .70rem;
}

/* Main card */
body[data-page="work-mode"] .work-mode-card {
    position: relative;
    overflow: hidden;
    margin-top: 14px;
    padding: 20px;
    border: 1px solid rgba(var(--primary-rgb), .14);
    border-radius: 18px;
    background:
        radial-gradient(circle at 100% 0%, rgba(var(--primary-rgb), .07), transparent 180px),
        linear-gradient(145deg, #ffffff, #f9fafc);
    box-shadow:
        0 14px 34px rgba(39,41,52,.08),
        inset 0 1px 0 #fff;
}

body[data-page="work-mode"] .work-mode-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 5px;
    background:
        linear-gradient(180deg, var(--primary), var(--gold));
}

body[data-page="work-mode"] .section-title-row {
    padding: 13px 14px;
    border: 1px solid rgba(var(--primary-rgb), .10);
    border-radius: 12px;
    background:
        linear-gradient(145deg, rgba(255,255,255,.96), rgba(var(--primary-rgb), .04));
}

body[data-page="work-mode"] .section-title-row h3 {
    margin: 0;
    color: #3b4354;
    font-size: 1rem;
}

body[data-page="work-mode"] .section-subtitle {
    margin: 5px 0 0;
    color: var(--text-muted);
    font-size: .68rem;
}

/* Form */
body[data-page="work-mode"] .work-mode-form {
    margin: 13px 0 0;
    padding: 15px;
    border: 1px solid rgba(var(--primary-rgb), .10);
    border-radius: 13px;
    background: rgba(255,255,255,.84);
}

body[data-page="work-mode"] .work-mode-input-group label,
body[data-page="work-mode"] .work-mode-takeaway-box label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 6px;
    color: #596171;
    font-size: .68rem;
    font-weight: 850;
}

body[data-page="work-mode"] .work-mode-input-group label::before,
body[data-page="work-mode"] .work-mode-takeaway-box label::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--primary);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), .09);
}

body[data-page="work-mode"] select {
    width: 100%;
    min-height: 46px;
    padding: 10px 12px;
    border: 1px solid #d9dedc;
    border-radius: 11px;
    color: #363b47;
    background:
        linear-gradient(180deg, #fff, #fbfcfd);
    font: inherit;
    font-size: .72rem;
    box-shadow:
        inset 0 1px 2px rgba(39,41,52,.035),
        0 3px 8px rgba(39,41,52,.025);
}

body[data-page="work-mode"] select:focus {
    outline: none;
    border-color: rgba(var(--primary-rgb), .52);
    box-shadow:
        0 0 0 4px rgba(var(--primary-rgb), .09),
        0 8px 18px rgba(var(--primary-rgb), .07);
}

/* Hint box */
body[data-page="work-mode"] .work-mode-hint-box {
    margin-top: 12px;
    padding: 13px;
    border: 1px solid rgba(var(--gold-rgb), .17);
    border-radius: 12px;
    background:
        radial-gradient(circle at 100% 0%, rgba(var(--gold-rgb), .10), transparent 120px),
        linear-gradient(145deg, #fffaf1, #fff);
}

body[data-page="work-mode"] .work-mode-hint-title {
    color: var(--gold-dark);
    font-size: .68rem;
    font-weight: 900;
}

body[data-page="work-mode"] .work-mode-hint-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    margin-top: 9px;
}

body[data-page="work-mode"] .work-mode-hint-list p {
    position: relative;
    margin: 0;
    padding: 8px 9px 8px 22px;
    border: 1px solid rgba(var(--gold-rgb), .10);
    border-radius: 9px;
    color: #6e6658;
    background: rgba(255,255,255,.70);
    font-size: .63rem;
    line-height: 1.45;
}

body[data-page="work-mode"] .work-mode-hint-list p::before {
    content: "";
    position: absolute;
    top: 13px;
    left: 9px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--gold);
}

body[data-page="work-mode"] .work-mode-takeaway-box {
    margin-top: 12px;
    padding: 12px;
    border: 1px solid rgba(var(--primary-rgb), .13);
    border-radius: 11px;
    background: rgba(var(--primary-rgb), .045);
}

/* Primary action */
body[data-page="work-mode"] .work-mode-form > button:not(.work-mode-logout-btn) {
    display: inline-flex;
    width: 100%;
    min-height: 46px;
    align-items: center;
    justify-content: center;
    margin-top: 14px;
    padding: 9px 12px;
    border: 1px solid var(--primary);
    border-radius: 11px;
    color: #fff;
    background:
        linear-gradient(145deg, var(--primary), var(--primary-dark));
    box-shadow:
        0 10px 22px rgba(var(--primary-rgb), .24),
        inset 0 1px 0 rgba(255,255,255,.16);
    font: inherit;
    font-size: .72rem;
    font-weight: 950;
    cursor: pointer;
}

/* Logout action */
body[data-page="work-mode"] .work-mode-card > .work-mode-form:last-child {
    margin-top: 12px;
    padding: 0;
    border: 0;
    background: transparent;
}

body[data-page="work-mode"] .work-mode-logout-btn {
    min-height: 42px !important;
    margin-top: 0 !important;
    border: 1px solid rgba(var(--brick-rgb), .18) !important;
    border-radius: 10px !important;
    color: var(--brick) !important;
    background:
        linear-gradient(145deg, rgba(var(--brick-rgb), .065), rgba(var(--brick-rgb), .035)) !important;
    box-shadow: none !important;
    font: inherit;
    font-size: .68rem !important;
    font-weight: 900 !important;
}

body[data-page="work-mode"] .work-mode-logout-btn:hover {
    color: #fff !important;
    background:
        linear-gradient(145deg, var(--brick), var(--brick-dark)) !important;
}

/* Responsive */
@media (max-width: 700px) {
    body[data-page="work-mode"] .work-mode-page-container {
        width: min(100% - 16px, 620px);
        padding: 8px 0 20px;
    }

    body[data-page="work-mode"] .login-language-switch {
        right: 12px;
    }

    body[data-page="work-mode"] .work-mode-hero {
        grid-template-columns: 1fr;
        align-items: stretch;
        gap: 14px;
        min-height: 0;
        padding: 30px 16px 18px;
        border-radius: 17px;
    }

    body[data-page="work-mode"] .work-mode-hero h1 {
        font-size: 1.48rem;
    }

    body[data-page="work-mode"] .work-mode-user-card {
        min-width: 0;
        padding: 11px 12px;
    }

    body[data-page="work-mode"] .work-mode-card {
        margin-top: 10px;
        padding: 13px;
        border-radius: 14px;
    }

    body[data-page="work-mode"] .work-mode-hint-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 5px;
    }
}

@media (max-width: 430px) {
    body[data-page="work-mode"] .work-mode-hint-list {
        grid-template-columns: 1fr;
    }

    body[data-page="work-mode"] .work-mode-desc {
        font-size: .66rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    body[data-page="work-mode"] *,
    body[data-page="work-mode"] *::before,
    body[data-page="work-mode"] *::after {
        animation: none !important;
        transition: none !important;
    }
}

/* =========================================================
   PRMS Direct Outing — Premium Slate Blue & Amber UI
   Page scope: body[data-page="direct-outing"]
   ========================================================= */

body[data-page="direct-outing"] {
    --page-bg: #f1f3f6;
    --surface: #ffffff;
    --surface-soft: #f8f9fb;
    --text: #272a33;
    --text-soft: #676b76;
    --text-muted: #8c9099;
    --line: #dde1e7;

    --primary: #3f4f68;
    --primary-dark: #253246;
    --primary-rgb: 63, 79, 104;

    --amber: #c18a35;
    --amber-dark: #79531b;
    --amber-light: #efd39a;
    --amber-rgb: 193, 138, 53;

    --burgundy: #8b2944;
    --burgundy-dark: #5a172b;
    --burgundy-rgb: 139, 41, 68;

    --success: #1f7a4d;
    --success-dark: #145c39;
    --success-rgb: 31, 122, 77;

    min-height: 100vh;
    margin: 0;
    color: var(--text);
    background:
        radial-gradient(circle at 100% 0%, rgba(var(--primary-rgb), .10), transparent 30rem),
        radial-gradient(circle at 0% 100%, rgba(var(--amber-rgb), .055), transparent 28rem),
        linear-gradient(145deg, #edf0f4, #f7f4ef);
    font-family: Inter, "Segoe UI", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

body[data-page="direct-outing"] *,
body[data-page="direct-outing"] *::before,
body[data-page="direct-outing"] *::after {
    box-sizing: border-box;
}

body[data-page="direct-outing"] a,
body[data-page="direct-outing"] button,
body[data-page="direct-outing"] select,
body[data-page="direct-outing"] textarea {
    -webkit-tap-highlight-color: transparent;
}

body[data-page="direct-outing"] .work-mode-page-container {
    position: relative;
    width: min(100% - 28px, 960px);
    margin: 0 auto;
    padding: 20px 0 30px;
}

/* ---------- Language switch ---------- */
body[data-page="direct-outing"] .login-language-switch {
    position: absolute;
    z-index: 20;
    top: 34px;
    right: 16px;
    display: grid;
    grid-template-columns: repeat(2, minmax(58px, 1fr));
    gap: 5px;
    padding: 4px;
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 12px;
    background: rgba(255,255,255,.10);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.12),
        0 8px 20px rgba(37,50,70,.14);
    backdrop-filter: blur(12px);
}

body[data-page="direct-outing"] .login-language-switch form {
    margin: 0;
}

body[data-page="direct-outing"] .login-language-switch button {
    width: 100%;
    min-height: 32px;
    padding: 5px 9px;
    border: 0;
    border-radius: 8px;
    color: rgba(255,255,255,.72);
    background: transparent;
    font: inherit;
    font-size: .63rem;
    font-weight: 850;
    cursor: pointer;
}

body[data-page="direct-outing"] .login-language-switch button.active {
    color: #30240f;
    background:
        linear-gradient(145deg, var(--amber-light), var(--amber));
    box-shadow:
        0 5px 12px rgba(var(--amber-rgb), .18),
        inset 0 1px 0 rgba(255,255,255,.38);
}

/* ---------- Hero ---------- */
body[data-page="direct-outing"] .work-mode-hero {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 18px;
    min-height: 225px;
    padding: 34px 28px 28px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.20);
    border-radius: 22px;
    color: #fff;
    background:
        radial-gradient(circle at 12% 8%, rgba(255,255,255,.17), transparent 24%),
        radial-gradient(circle at 88% 112%, rgba(255,255,255,.10), transparent 38%),
        linear-gradient(118deg, rgba(255,255,255,.05), transparent 42%),
        linear-gradient(135deg, #253246 0%, #3f4f68 54%, #79531b 100%);
    box-shadow:
        0 26px 60px rgba(37,50,70,.28),
        inset 0 1px 0 rgba(255,255,255,.13);
}

body[data-page="direct-outing"] .work-mode-hero::before {
    content: "DIRECT OUTING";
    position: absolute;
    z-index: -1;
    left: 24px;
    bottom: 18px;
    color: rgba(255,255,255,.04);
    font-size: clamp(3.4rem, 7vw, 6.2rem);
    font-weight: 950;
    letter-spacing: -.085em;
    line-height: .8;
}

body[data-page="direct-outing"] .work-mode-hero::after {
    content: "";
    position: absolute;
    right: -86px;
    top: -104px;
    width: 290px;
    height: 290px;
    border: 42px solid rgba(255,255,255,.035);
    border-radius: 50%;
    box-shadow:
        0 0 0 1px rgba(255,255,255,.05),
        0 0 90px rgba(239,211,154,.13);
}

body[data-page="direct-outing"] .work-mode-hero > div:first-child {
    position: relative;
    z-index: 2;
    min-width: 0;
}

body[data-page="direct-outing"] .page-subtitle {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 28px;
    margin: 0 0 9px;
    padding: 4px 10px;
    border: 1px solid rgba(239,211,154,.24);
    border-radius: 999px;
    color: #ffedc4;
    background: rgba(239,211,154,.10);
    font-size: .62rem;
    font-weight: 900;
    letter-spacing: .10em;
    text-transform: uppercase;
}

body[data-page="direct-outing"] .page-subtitle::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--amber-light);
    box-shadow: 0 0 0 4px rgba(239,211,154,.12);
}

body[data-page="direct-outing"] .work-mode-hero h1 {
    margin: 0;
    color: #fff;
    font-size: clamp(1.8rem, 3vw, 2.55rem);
    font-weight: 950;
    line-height: 1.16;
    letter-spacing: -.032em;
}

body[data-page="direct-outing"] .work-mode-desc {
    max-width: 560px;
    margin: 8px 0 0;
    color: rgba(255,255,255,.72);
    font-size: .72rem;
    line-height: 1.6;
}

body[data-page="direct-outing"] .user-inline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 11px;
    color: rgba(255,255,255,.76);
    font-size: .70rem;
}

body[data-page="direct-outing"] .role-badge {
    display: inline-flex;
    min-height: 25px;
    align-items: center;
    padding: 3px 9px;
    border: 1px solid rgba(255,255,255,.20);
    border-radius: 999px;
    color: #fff;
    background: rgba(255,255,255,.10);
    font-size: .64rem;
    font-weight: 850;
}

body[data-page="direct-outing"] .work-mode-user-card {
    position: relative;
    z-index: 2;
    min-width: 170px;
    padding: 14px;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 14px;
    background:
        linear-gradient(145deg, rgba(255,255,255,.13), rgba(255,255,255,.055));
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.12),
        0 14px 28px rgba(37,50,70,.16);
    backdrop-filter: blur(12px);
}

body[data-page="direct-outing"] .work-mode-user-card span {
    display: block;
    color: rgba(255,255,255,.62);
    font-size: .60rem;
}

body[data-page="direct-outing"] .work-mode-user-card strong {
    display: block;
    margin-top: 5px;
    color: #fff;
    font-size: .82rem;
}

/* ---------- Alert ---------- */
body[data-page="direct-outing"] .alert {
    margin-top: 12px;
    padding: 11px 13px;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: #fff;
    box-shadow: 0 7px 16px rgba(39,42,51,.05);
    font-size: .70rem;
}

/* ---------- Main card ---------- */
body[data-page="direct-outing"] .work-mode-card {
    position: relative;
    overflow: hidden;
    margin-top: 14px;
    padding: 20px;
    border: 1px solid rgba(var(--primary-rgb), .14);
    border-radius: 18px;
    background:
        radial-gradient(circle at 100% 0%, rgba(var(--primary-rgb), .07), transparent 180px),
        linear-gradient(145deg, #ffffff, #f9fafc);
    box-shadow:
        0 14px 34px rgba(39,42,51,.08),
        inset 0 1px 0 #fff;
}

body[data-page="direct-outing"] .work-mode-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 5px;
    background:
        linear-gradient(180deg, var(--primary), var(--amber));
}

body[data-page="direct-outing"] .section-title-row {
    padding: 13px 14px;
    border: 1px solid rgba(var(--primary-rgb), .10);
    border-radius: 12px;
    background:
        linear-gradient(145deg, rgba(255,255,255,.96), rgba(var(--primary-rgb), .04));
}

body[data-page="direct-outing"] .section-title-row h3 {
    margin: 0;
    color: #3b4354;
    font-size: 1rem;
}

body[data-page="direct-outing"] .section-subtitle {
    margin: 5px 0 0;
    color: var(--text-muted);
    font-size: .68rem;
}

/* ---------- Form ---------- */
body[data-page="direct-outing"] .work-mode-form {
    margin: 13px 0 0;
    padding: 15px;
    border: 1px solid rgba(var(--primary-rgb), .10);
    border-radius: 13px;
    background: rgba(255,255,255,.84);
}

body[data-page="direct-outing"] .work-mode-input-group + .work-mode-input-group {
    margin-top: 11px;
}

body[data-page="direct-outing"] .work-mode-input-group label,
body[data-page="direct-outing"] .work-mode-takeaway-box label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 6px;
    color: #596171;
    font-size: .68rem;
    font-weight: 850;
}

body[data-page="direct-outing"] .work-mode-input-group label::before,
body[data-page="direct-outing"] .work-mode-takeaway-box label::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--primary);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), .09);
}

body[data-page="direct-outing"] select,
body[data-page="direct-outing"] textarea {
    width: 100%;
    min-width: 0;
    padding: 10px 12px;
    border: 1px solid #d9dde4;
    border-radius: 11px;
    color: #363b47;
    background: linear-gradient(180deg, #fff, #fbfcfd);
    font: inherit;
    font-size: .72rem;
    box-shadow:
        inset 0 1px 2px rgba(39,42,51,.035),
        0 3px 8px rgba(39,42,51,.025);
}

body[data-page="direct-outing"] select {
    min-height: 46px;
}

body[data-page="direct-outing"] textarea {
    min-height: 108px;
    resize: vertical;
    line-height: 1.55;
}

body[data-page="direct-outing"] select:focus,
body[data-page="direct-outing"] textarea:focus {
    outline: none;
    border-color: rgba(var(--primary-rgb), .52);
    box-shadow:
        0 0 0 4px rgba(var(--primary-rgb), .09),
        0 8px 18px rgba(var(--primary-rgb), .07);
}

body[data-page="direct-outing"] .work-mode-takeaway-box {
    margin-top: 12px;
    padding: 12px;
    border: 1px solid rgba(var(--amber-rgb), .18);
    border-radius: 11px;
    background:
        radial-gradient(circle at 100% 0%, rgba(var(--amber-rgb), .10), transparent 110px),
        linear-gradient(145deg, #fffaf1, #fff);
}

/* ---------- Primary start button ---------- */
body[data-page="direct-outing"] .work-mode-form > button:not(.work-mode-logout-btn):not(.direct-outing-end-btn) {
    display: inline-flex;
    width: 100%;
    min-height: 46px;
    align-items: center;
    justify-content: center;
    margin-top: 14px;
    padding: 9px 12px;
    border: 1px solid var(--primary);
    border-radius: 11px;
    color: #fff;
    background:
        linear-gradient(145deg, var(--primary), var(--primary-dark));
    box-shadow:
        0 10px 22px rgba(var(--primary-rgb), .24),
        inset 0 1px 0 rgba(255,255,255,.16);
    font: inherit;
    font-size: .72rem;
    font-weight: 950;
    cursor: pointer;
}

/* ---------- Back button ---------- */
body[data-page="direct-outing"] .work-mode-card > .work-mode-form:last-child {
    margin-top: 12px;
    padding: 0;
    border: 0;
    background: transparent;
}

body[data-page="direct-outing"] .work-mode-logout-btn {
    min-height: 42px !important;
    margin-top: 0 !important;
    border: 1px solid rgba(var(--burgundy-rgb), .18) !important;
    border-radius: 10px !important;
    color: var(--burgundy) !important;
    background:
        linear-gradient(145deg, rgba(var(--burgundy-rgb), .065), rgba(var(--burgundy-rgb), .035)) !important;
    box-shadow: none !important;
    font: inherit;
    font-size: .68rem !important;
    font-weight: 900 !important;
}

/* ---------- Active outing ---------- */
body[data-page="direct-outing"] .direct-outing-active-card {
    margin-top: 13px;
    padding: 15px;
    border: 1px solid rgba(var(--success-rgb), .18);
    border-radius: 15px;
    background:
        radial-gradient(circle at 100% 0%, rgba(var(--success-rgb), .09), transparent 150px),
        linear-gradient(145deg, #f6fff9, #ffffff);
    box-shadow:
        0 10px 24px rgba(var(--success-rgb), .07),
        inset 0 1px 0 #fff;
}

body[data-page="direct-outing"] .direct-outing-status {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

body[data-page="direct-outing"] .direct-outing-status > div,
body[data-page="direct-outing"] .direct-outing-info-grid > div {
    min-width: 0;
    padding: 10px 11px;
    border: 1px solid #dfe6e2;
    border-radius: 10px;
    background: rgba(255,255,255,.82);
}

body[data-page="direct-outing"] .direct-outing-status span,
body[data-page="direct-outing"] .direct-outing-info-grid span,
body[data-page="direct-outing"] .direct-outing-remark span {
    display: block;
    color: var(--text-muted);
    font-size: .59rem;
}

body[data-page="direct-outing"] .direct-outing-status strong,
body[data-page="direct-outing"] .direct-outing-info-grid strong {
    display: block;
    margin-top: 4px;
    color: #39423f;
    font-size: .69rem;
    overflow-wrap: anywhere;
}

body[data-page="direct-outing"] .direct-outing-status > div:first-child strong {
    color: var(--success-dark);
}

body[data-page="direct-outing"] .direct-outing-info-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
    margin-top: 9px;
}

body[data-page="direct-outing"] #direct-outing-duration {
    color: var(--amber-dark);
    font-size: 1.15rem;
    font-weight: 950;
    letter-spacing: .03em;
    font-variant-numeric: tabular-nums;
}

body[data-page="direct-outing"] .direct-outing-remark {
    margin-top: 9px;
    padding: 11px 12px;
    border: 1px solid rgba(var(--amber-rgb), .16);
    border-radius: 10px;
    background: linear-gradient(145deg, #fffaf1, #fff);
}

body[data-page="direct-outing"] .direct-outing-remark p {
    margin: 5px 0 0;
    color: var(--text-soft);
    font-size: .67rem;
    line-height: 1.5;
}

body[data-page="direct-outing"] .direct-outing-end-btn {
    display: inline-flex;
    width: 100%;
    min-height: 46px;
    align-items: center;
    justify-content: center;
    margin-top: 0;
    padding: 9px 12px;
    border: 1px solid var(--burgundy);
    border-radius: 11px;
    color: #fff;
    background:
        linear-gradient(145deg, var(--burgundy), var(--burgundy-dark));
    box-shadow:
        0 10px 22px rgba(var(--burgundy-rgb), .22),
        inset 0 1px 0 rgba(255,255,255,.16);
    font: inherit;
    font-size: .72rem;
    font-weight: 950;
    cursor: pointer;
}

/* ---------- Responsive ---------- */
@media (max-width: 700px) {
    body[data-page="direct-outing"] .work-mode-page-container {
        width: min(100% - 16px, 640px);
        padding: 8px 0 20px;
    }

    body[data-page="direct-outing"] .login-language-switch {
        top: 20px;
        right: 12px;
    }

    body[data-page="direct-outing"] .work-mode-hero {
        grid-template-columns: 1fr;
        align-items: stretch;
        gap: 14px;
        min-height: 0;
        padding: 64px 16px 18px;
        border-radius: 17px;
    }

    body[data-page="direct-outing"] .work-mode-hero h1 {
        font-size: 1.48rem;
    }

    body[data-page="direct-outing"] .work-mode-user-card {
        min-width: 0;
        padding: 11px 12px;
    }

    body[data-page="direct-outing"] .work-mode-card {
        margin-top: 10px;
        padding: 13px;
        border-radius: 14px;
    }

    body[data-page="direct-outing"] .direct-outing-info-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 5px;
    }
}

@media (max-width: 430px) {
    body[data-page="direct-outing"] .direct-outing-status {
        grid-template-columns: 1fr;
    }

    body[data-page="direct-outing"] .work-mode-desc {
        font-size: .66rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    body[data-page="direct-outing"] *,
    body[data-page="direct-outing"] *::before,
    body[data-page="direct-outing"] *::after {
        animation: none !important;
        transition: none !important;
    }
}

/* =========================================================
   PRMS Direct Outing — Premium Slate Blue & Amber UI
   Page scope: body[data-page="direct-outing"]
   ========================================================= */

body[data-page="direct-outing"] {
    --page-bg: #f1f3f6;
    --surface: #ffffff;
    --surface-soft: #f8f9fb;
    --text: #272a33;
    --text-soft: #676b76;
    --text-muted: #8c9099;
    --line: #dde1e7;

    --primary: #3f4f68;
    --primary-dark: #253246;
    --primary-rgb: 63, 79, 104;

    --amber: #c18a35;
    --amber-dark: #79531b;
    --amber-light: #efd39a;
    --amber-rgb: 193, 138, 53;

    --burgundy: #8b2944;
    --burgundy-dark: #5a172b;
    --burgundy-rgb: 139, 41, 68;

    --success: #1f7a4d;
    --success-dark: #145c39;
    --success-rgb: 31, 122, 77;

    min-height: 100vh;
    margin: 0;
    color: var(--text);
    background:
        radial-gradient(circle at 100% 0%, rgba(var(--primary-rgb), .10), transparent 30rem),
        radial-gradient(circle at 0% 100%, rgba(var(--amber-rgb), .055), transparent 28rem),
        linear-gradient(145deg, #edf0f4, #f7f4ef);
    font-family: Inter, "Segoe UI", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

body[data-page="direct-outing"] *,
body[data-page="direct-outing"] *::before,
body[data-page="direct-outing"] *::after {
    box-sizing: border-box;
}

body[data-page="direct-outing"] a,
body[data-page="direct-outing"] button,
body[data-page="direct-outing"] select,
body[data-page="direct-outing"] textarea {
    -webkit-tap-highlight-color: transparent;
}

body[data-page="direct-outing"] .work-mode-page-container {
    position: relative;
    width: min(100% - 28px, 960px);
    margin: 0 auto;
    padding: 20px 0 30px;
}

/* ---------- Language switch ---------- */
body[data-page="direct-outing"] .login-language-switch {
    position: absolute;
    z-index: 20;
    top: 34px;
    right: 16px;
    display: grid;
    grid-template-columns: repeat(2, minmax(58px, 1fr));
    gap: 5px;
    padding: 4px;
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 12px;
    background: rgba(255,255,255,.10);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.12),
        0 8px 20px rgba(37,50,70,.14);
    backdrop-filter: blur(12px);
}

body[data-page="direct-outing"] .login-language-switch form {
    margin: 0;
}

body[data-page="direct-outing"] .login-language-switch button {
    width: 100%;
    min-height: 32px;
    padding: 5px 9px;
    border: 0;
    border-radius: 8px;
    color: rgba(255,255,255,.72);
    background: transparent;
    font: inherit;
    font-size: .63rem;
    font-weight: 850;
    cursor: pointer;
}

body[data-page="direct-outing"] .login-language-switch button.active {
    color: #30240f;
    background:
        linear-gradient(145deg, var(--amber-light), var(--amber));
    box-shadow:
        0 5px 12px rgba(var(--amber-rgb), .18),
        inset 0 1px 0 rgba(255,255,255,.38);
}

/* ---------- Hero ---------- */
body[data-page="direct-outing"] .work-mode-hero {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 18px;
    min-height: 225px;
    padding: 34px 28px 28px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.20);
    border-radius: 22px;
    color: #fff;
    background:
        radial-gradient(circle at 12% 8%, rgba(255,255,255,.17), transparent 24%),
        radial-gradient(circle at 88% 112%, rgba(255,255,255,.10), transparent 38%),
        linear-gradient(118deg, rgba(255,255,255,.05), transparent 42%),
        linear-gradient(135deg, #253246 0%, #3f4f68 54%, #79531b 100%);
    box-shadow:
        0 26px 60px rgba(37,50,70,.28),
        inset 0 1px 0 rgba(255,255,255,.13);
}

body[data-page="direct-outing"] .work-mode-hero::before {
    content: "DIRECT OUTING";
    position: absolute;
    z-index: -1;
    left: 24px;
    bottom: 18px;
    color: rgba(255,255,255,.04);
    font-size: clamp(3.4rem, 7vw, 6.2rem);
    font-weight: 950;
    letter-spacing: -.085em;
    line-height: .8;
}

body[data-page="direct-outing"] .work-mode-hero::after {
    content: "";
    position: absolute;
    right: -86px;
    top: -104px;
    width: 290px;
    height: 290px;
    border: 42px solid rgba(255,255,255,.035);
    border-radius: 50%;
    box-shadow:
        0 0 0 1px rgba(255,255,255,.05),
        0 0 90px rgba(239,211,154,.13);
}

body[data-page="direct-outing"] .work-mode-hero > div:first-child {
    position: relative;
    z-index: 2;
    min-width: 0;
}

body[data-page="direct-outing"] .page-subtitle {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 28px;
    margin: 0 0 9px;
    padding: 4px 10px;
    border: 1px solid rgba(239,211,154,.24);
    border-radius: 999px;
    color: #ffedc4;
    background: rgba(239,211,154,.10);
    font-size: .62rem;
    font-weight: 900;
    letter-spacing: .10em;
    text-transform: uppercase;
}

body[data-page="direct-outing"] .page-subtitle::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--amber-light);
    box-shadow: 0 0 0 4px rgba(239,211,154,.12);
}

body[data-page="direct-outing"] .work-mode-hero h1 {
    margin: 0;
    color: #fff;
    font-size: clamp(1.8rem, 3vw, 2.55rem);
    font-weight: 950;
    line-height: 1.16;
    letter-spacing: -.032em;
}

body[data-page="direct-outing"] .work-mode-desc {
    max-width: 560px;
    margin: 8px 0 0;
    color: rgba(255,255,255,.72);
    font-size: .72rem;
    line-height: 1.6;
}

body[data-page="direct-outing"] .user-inline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 11px;
    color: rgba(255,255,255,.76);
    font-size: .70rem;
}

body[data-page="direct-outing"] .role-badge {
    display: inline-flex;
    min-height: 25px;
    align-items: center;
    padding: 3px 9px;
    border: 1px solid rgba(255,255,255,.20);
    border-radius: 999px;
    color: #fff;
    background: rgba(255,255,255,.10);
    font-size: .64rem;
    font-weight: 850;
}

body[data-page="direct-outing"] .work-mode-user-card {
    position: relative;
    z-index: 2;
    min-width: 170px;
    padding: 14px;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 14px;
    background:
        linear-gradient(145deg, rgba(255,255,255,.13), rgba(255,255,255,.055));
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.12),
        0 14px 28px rgba(37,50,70,.16);
    backdrop-filter: blur(12px);
}

body[data-page="direct-outing"] .work-mode-user-card span {
    display: block;
    color: rgba(255,255,255,.62);
    font-size: .60rem;
}

body[data-page="direct-outing"] .work-mode-user-card strong {
    display: block;
    margin-top: 5px;
    color: #fff;
    font-size: .82rem;
}

/* ---------- Alert ---------- */
body[data-page="direct-outing"] .alert {
    margin-top: 12px;
    padding: 11px 13px;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: #fff;
    box-shadow: 0 7px 16px rgba(39,42,51,.05);
    font-size: .70rem;
}

/* ---------- Main card ---------- */
body[data-page="direct-outing"] .work-mode-card {
    position: relative;
    overflow: hidden;
    margin-top: 14px;
    padding: 20px;
    border: 1px solid rgba(var(--primary-rgb), .14);
    border-radius: 18px;
    background:
        radial-gradient(circle at 100% 0%, rgba(var(--primary-rgb), .07), transparent 180px),
        linear-gradient(145deg, #ffffff, #f9fafc);
    box-shadow:
        0 14px 34px rgba(39,42,51,.08),
        inset 0 1px 0 #fff;
}

body[data-page="direct-outing"] .work-mode-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 5px;
    background:
        linear-gradient(180deg, var(--primary), var(--amber));
}

body[data-page="direct-outing"] .section-title-row {
    padding: 13px 14px;
    border: 1px solid rgba(var(--primary-rgb), .10);
    border-radius: 12px;
    background:
        linear-gradient(145deg, rgba(255,255,255,.96), rgba(var(--primary-rgb), .04));
}

body[data-page="direct-outing"] .section-title-row h3 {
    margin: 0;
    color: #3b4354;
    font-size: 1rem;
}

body[data-page="direct-outing"] .section-subtitle {
    margin: 5px 0 0;
    color: var(--text-muted);
    font-size: .68rem;
}

/* ---------- Form ---------- */
body[data-page="direct-outing"] .work-mode-form {
    margin: 13px 0 0;
    padding: 15px;
    border: 1px solid rgba(var(--primary-rgb), .10);
    border-radius: 13px;
    background: rgba(255,255,255,.84);
}

body[data-page="direct-outing"] .work-mode-input-group + .work-mode-input-group {
    margin-top: 11px;
}

body[data-page="direct-outing"] .work-mode-input-group label,
body[data-page="direct-outing"] .work-mode-takeaway-box label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 6px;
    color: #596171;
    font-size: .68rem;
    font-weight: 850;
}

body[data-page="direct-outing"] .work-mode-input-group label::before,
body[data-page="direct-outing"] .work-mode-takeaway-box label::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--primary);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), .09);
}

body[data-page="direct-outing"] select,
body[data-page="direct-outing"] textarea {
    width: 100%;
    min-width: 0;
    padding: 10px 12px;
    border: 1px solid #d9dde4;
    border-radius: 11px;
    color: #363b47;
    background: linear-gradient(180deg, #fff, #fbfcfd);
    font: inherit;
    font-size: .72rem;
    box-shadow:
        inset 0 1px 2px rgba(39,42,51,.035),
        0 3px 8px rgba(39,42,51,.025);
}

body[data-page="direct-outing"] select {
    min-height: 46px;
}

body[data-page="direct-outing"] textarea {
    min-height: 108px;
    resize: vertical;
    line-height: 1.55;
}

body[data-page="direct-outing"] select:focus,
body[data-page="direct-outing"] textarea:focus {
    outline: none;
    border-color: rgba(var(--primary-rgb), .52);
    box-shadow:
        0 0 0 4px rgba(var(--primary-rgb), .09),
        0 8px 18px rgba(var(--primary-rgb), .07);
}

body[data-page="direct-outing"] .work-mode-takeaway-box {
    margin-top: 12px;
    padding: 12px;
    border: 1px solid rgba(var(--amber-rgb), .18);
    border-radius: 11px;
    background:
        radial-gradient(circle at 100% 0%, rgba(var(--amber-rgb), .10), transparent 110px),
        linear-gradient(145deg, #fffaf1, #fff);
}

/* ---------- Primary start button ---------- */
body[data-page="direct-outing"] .work-mode-form > button:not(.work-mode-logout-btn):not(.direct-outing-end-btn) {
    display: inline-flex;
    width: 100%;
    min-height: 46px;
    align-items: center;
    justify-content: center;
    margin-top: 14px;
    padding: 9px 12px;
    border: 1px solid var(--primary);
    border-radius: 11px;
    color: #fff;
    background:
        linear-gradient(145deg, var(--primary), var(--primary-dark));
    box-shadow:
        0 10px 22px rgba(var(--primary-rgb), .24),
        inset 0 1px 0 rgba(255,255,255,.16);
    font: inherit;
    font-size: .72rem;
    font-weight: 950;
    cursor: pointer;
}

/* ---------- Back button ---------- */
body[data-page="direct-outing"] .work-mode-card > .work-mode-form:last-child {
    margin-top: 12px;
    padding: 0;
    border: 0;
    background: transparent;
}

body[data-page="direct-outing"] .work-mode-logout-btn {
    min-height: 42px !important;
    margin-top: 0 !important;
    border: 1px solid rgba(var(--burgundy-rgb), .18) !important;
    border-radius: 10px !important;
    color: var(--burgundy) !important;
    background:
        linear-gradient(145deg, rgba(var(--burgundy-rgb), .065), rgba(var(--burgundy-rgb), .035)) !important;
    box-shadow: none !important;
    font: inherit;
    font-size: .68rem !important;
    font-weight: 900 !important;
}

/* ---------- Active outing ---------- */
body[data-page="direct-outing"] .direct-outing-active-card {
    margin-top: 13px;
    padding: 15px;
    border: 1px solid rgba(var(--success-rgb), .18);
    border-radius: 15px;
    background:
        radial-gradient(circle at 100% 0%, rgba(var(--success-rgb), .09), transparent 150px),
        linear-gradient(145deg, #f6fff9, #ffffff);
    box-shadow:
        0 10px 24px rgba(var(--success-rgb), .07),
        inset 0 1px 0 #fff;
}

body[data-page="direct-outing"] .direct-outing-status {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

body[data-page="direct-outing"] .direct-outing-status > div,
body[data-page="direct-outing"] .direct-outing-info-grid > div {
    min-width: 0;
    padding: 10px 11px;
    border: 1px solid #dfe6e2;
    border-radius: 10px;
    background: rgba(255,255,255,.82);
}

body[data-page="direct-outing"] .direct-outing-status span,
body[data-page="direct-outing"] .direct-outing-info-grid span,
body[data-page="direct-outing"] .direct-outing-remark span {
    display: block;
    color: var(--text-muted);
    font-size: .59rem;
}

body[data-page="direct-outing"] .direct-outing-status strong,
body[data-page="direct-outing"] .direct-outing-info-grid strong {
    display: block;
    margin-top: 4px;
    color: #39423f;
    font-size: .69rem;
    overflow-wrap: anywhere;
}

body[data-page="direct-outing"] .direct-outing-status > div:first-child strong {
    color: var(--success-dark);
}

body[data-page="direct-outing"] .direct-outing-info-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
    margin-top: 9px;
}

body[data-page="direct-outing"] #direct-outing-duration {
    color: var(--amber-dark);
    font-size: 1.15rem;
    font-weight: 950;
    letter-spacing: .03em;
    font-variant-numeric: tabular-nums;
}

body[data-page="direct-outing"] .direct-outing-remark {
    margin-top: 9px;
    padding: 11px 12px;
    border: 1px solid rgba(var(--amber-rgb), .16);
    border-radius: 10px;
    background: linear-gradient(145deg, #fffaf1, #fff);
}

body[data-page="direct-outing"] .direct-outing-remark p {
    margin: 5px 0 0;
    color: var(--text-soft);
    font-size: .67rem;
    line-height: 1.5;
}

body[data-page="direct-outing"] .direct-outing-end-btn {
    display: inline-flex;
    width: 100%;
    min-height: 46px;
    align-items: center;
    justify-content: center;
    margin-top: 0;
    padding: 9px 12px;
    border: 1px solid var(--burgundy);
    border-radius: 11px;
    color: #fff;
    background:
        linear-gradient(145deg, var(--burgundy), var(--burgundy-dark));
    box-shadow:
        0 10px 22px rgba(var(--burgundy-rgb), .22),
        inset 0 1px 0 rgba(255,255,255,.16);
    font: inherit;
    font-size: .72rem;
    font-weight: 950;
    cursor: pointer;
}

/* ---------- Responsive ---------- */
@media (max-width: 700px) {
    body[data-page="direct-outing"] .work-mode-page-container {
        width: min(100% - 16px, 640px);
        padding: 8px 0 20px;
    }

    body[data-page="direct-outing"] .login-language-switch {
        top: 20px;
        right: 12px;
    }

    body[data-page="direct-outing"] .work-mode-hero {
        grid-template-columns: 1fr;
        align-items: stretch;
        gap: 14px;
        min-height: 0;
        padding: 30px 16px 18px;
        border-radius: 17px;
    }

    body[data-page="direct-outing"] .work-mode-hero h1 {
        font-size: 1.48rem;
    }

    body[data-page="direct-outing"] .work-mode-user-card {
        min-width: 0;
        padding: 11px 12px;
    }

    body[data-page="direct-outing"] .work-mode-card {
        margin-top: 10px;
        padding: 13px;
        border-radius: 14px;
    }

    body[data-page="direct-outing"] .direct-outing-info-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 5px;
    }
}

@media (max-width: 430px) {
    body[data-page="direct-outing"] .direct-outing-status {
        grid-template-columns: 1fr;
    }

    body[data-page="direct-outing"] .work-mode-desc {
        font-size: .66rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    body[data-page="direct-outing"] *,
    body[data-page="direct-outing"] *::before,
    body[data-page="direct-outing"] *::after {
        animation: none !important;
        transition: none !important;
    }
}

/* =========================================================
   Center Only the "Select Today's Work Mode" Button
   ========================================================= */

body[data-page="direct-outing"] .work-mode-card > .work-mode-form:last-child {
    display: flex;
    justify-content: center;
}

body[data-page="direct-outing"] .work-mode-card > .work-mode-form:last-child .work-mode-logout-btn {
    width: auto !important;
    min-width: 190px;
    max-width: 100%;
    padding-left: 18px !important;
    padding-right: 18px !important;
}

@media (max-width: 430px) {
    body[data-page="direct-outing"] .work-mode-card > .work-mode-form:last-child .work-mode-logout-btn {
        width: min(100%, 260px) !important;
        min-width: 0;
    }
}

/* =========================================================
   PRMS Direct Outing Feedback — Premium Plum Slate & Champagne
   Page scope: body[data-page="direct-outing-feedback"]
   ========================================================= */

body[data-page="direct-outing-feedback"] {
    --page-bg: #f2f1f5;
    --surface: #ffffff;
    --surface-soft: #faf9fb;
    --text: #292831;
    --text-soft: #696673;
    --text-muted: #8e8a96;
    --line: #e0dce4;

    --primary: #4c445e;
    --primary-dark: #2a2536;
    --primary-rgb: 76, 68, 94;

    --plum: #70415f;
    --plum-dark: #44243a;
    --plum-rgb: 112, 65, 95;

    --gold: #c69a4a;
    --gold-dark: #7a571d;
    --gold-light: #efd7a3;
    --gold-rgb: 198, 154, 74;

    --burgundy: #8b2944;
    --burgundy-dark: #5a172b;
    --burgundy-rgb: 139, 41, 68;

    --success: #1f7a4d;
    --success-dark: #145c39;
    --success-rgb: 31, 122, 77;

    min-height: 100vh;
    margin: 0;
    color: var(--text);
    background:
        radial-gradient(circle at 100% 0%, rgba(var(--primary-rgb), .10), transparent 30rem),
        radial-gradient(circle at 0% 100%, rgba(var(--gold-rgb), .055), transparent 28rem),
        linear-gradient(145deg, #efedf3, #f7f3ef);
    font-family: Inter, "Segoe UI", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

body[data-page="direct-outing-feedback"] *,
body[data-page="direct-outing-feedback"] *::before,
body[data-page="direct-outing-feedback"] *::after {
    box-sizing: border-box;
}

body[data-page="direct-outing-feedback"] a,
body[data-page="direct-outing-feedback"] button,
body[data-page="direct-outing-feedback"] input,
body[data-page="direct-outing-feedback"] select,
body[data-page="direct-outing-feedback"] textarea {
    -webkit-tap-highlight-color: transparent;
}

body[data-page="direct-outing-feedback"] .work-mode-page-container {
    position: relative;
    width: min(100% - 28px, 920px);
    margin: 0 auto;
    padding: 20px 0 30px;
}

/* Language switch */
body[data-page="direct-outing-feedback"] .login-language-switch {
    position: absolute;
    z-index: 20;
    top: 34px;
    right: 16px;
    display: grid;
    grid-template-columns: repeat(2, minmax(58px, 1fr));
    gap: 5px;
    padding: 4px;
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 12px;
    background: rgba(255,255,255,.10);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.12),
        0 8px 20px rgba(42,37,54,.14);
    backdrop-filter: blur(12px);
}

body[data-page="direct-outing-feedback"] .login-language-switch form {
    margin: 0;
}

body[data-page="direct-outing-feedback"] .login-language-switch button {
    width: 100%;
    min-height: 32px;
    padding: 5px 9px;
    border: 0;
    border-radius: 8px;
    color: rgba(255,255,255,.72);
    background: transparent;
    font: inherit;
    font-size: .63rem;
    font-weight: 850;
    cursor: pointer;
}

body[data-page="direct-outing-feedback"] .login-language-switch button.active {
    color: #30240f;
    background:
        linear-gradient(145deg, var(--gold-light), var(--gold));
    box-shadow:
        0 5px 12px rgba(var(--gold-rgb), .18),
        inset 0 1px 0 rgba(255,255,255,.38);
}

/* Hero */
body[data-page="direct-outing-feedback"] .work-mode-hero {
    position: relative;
    isolation: isolate;
    min-height: 215px;
    padding: 34px 28px 28px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.20);
    border-radius: 22px;
    color: #fff;
    background:
        radial-gradient(circle at 12% 8%, rgba(255,255,255,.17), transparent 24%),
        radial-gradient(circle at 88% 112%, rgba(255,255,255,.10), transparent 38%),
        linear-gradient(118deg, rgba(255,255,255,.05), transparent 42%),
        linear-gradient(135deg, #2a2536 0%, #4c445e 54%, #70415f 100%);
    box-shadow:
        0 26px 60px rgba(42,37,54,.28),
        inset 0 1px 0 rgba(255,255,255,.13);
}

body[data-page="direct-outing-feedback"] .work-mode-hero::before {
    content: "FEEDBACK";
    position: absolute;
    z-index: -1;
    left: 24px;
    bottom: 18px;
    color: rgba(255,255,255,.04);
    font-size: clamp(3.8rem, 8vw, 6.8rem);
    font-weight: 950;
    letter-spacing: -.085em;
    line-height: .8;
}

body[data-page="direct-outing-feedback"] .work-mode-hero::after {
    content: "";
    position: absolute;
    right: -86px;
    top: -104px;
    width: 290px;
    height: 290px;
    border: 42px solid rgba(255,255,255,.035);
    border-radius: 50%;
    box-shadow:
        0 0 0 1px rgba(255,255,255,.05),
        0 0 90px rgba(239,215,163,.13);
}

body[data-page="direct-outing-feedback"] .work-mode-hero > div {
    position: relative;
    z-index: 2;
    min-width: 0;
}

body[data-page="direct-outing-feedback"] .page-subtitle {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 28px;
    margin: 0 0 9px;
    padding: 4px 10px;
    border: 1px solid rgba(239,215,163,.24);
    border-radius: 999px;
    color: #ffedc4;
    background: rgba(239,215,163,.10);
    font-size: .62rem;
    font-weight: 900;
    letter-spacing: .10em;
    text-transform: uppercase;
}

body[data-page="direct-outing-feedback"] .page-subtitle::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--gold-light);
    box-shadow: 0 0 0 4px rgba(239,215,163,.12);
}

body[data-page="direct-outing-feedback"] .work-mode-hero h1 {
    margin: 0;
    color: #fff;
    font-size: clamp(1.8rem, 3vw, 2.55rem);
    font-weight: 950;
    line-height: 1.16;
    letter-spacing: -.032em;
}

body[data-page="direct-outing-feedback"] .work-mode-desc {
    max-width: 560px;
    margin: 8px 0 0;
    color: rgba(255,255,255,.72);
    font-size: .72rem;
    line-height: 1.6;
}

/* Alert */
body[data-page="direct-outing-feedback"] .alert {
    margin-top: 12px;
    padding: 11px 13px;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: #fff;
    box-shadow: 0 7px 16px rgba(41,40,49,.05);
    font-size: .70rem;
}

/* Main card */
body[data-page="direct-outing-feedback"] .work-mode-card {
    position: relative;
    overflow: hidden;
    margin-top: 14px;
    padding: 20px;
    border: 1px solid rgba(var(--primary-rgb), .14);
    border-radius: 18px;
    background:
        radial-gradient(circle at 100% 0%, rgba(var(--primary-rgb), .07), transparent 180px),
        linear-gradient(145deg, #ffffff, #faf9fb);
    box-shadow:
        0 14px 34px rgba(41,40,49,.08),
        inset 0 1px 0 #fff;
}

body[data-page="direct-outing-feedback"] .work-mode-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 5px;
    background:
        linear-gradient(180deg, var(--primary), var(--gold));
}

/* Back link */
body[data-page="direct-outing-feedback"] .workspace-premium-link-row {
    display: flex;
    justify-content: flex-start;
    margin-bottom: 12px;
}

body[data-page="direct-outing-feedback"] .workspace-card-link {
    display: inline-flex;
    min-height: 36px;
    align-items: center;
    justify-content: center;
    padding: 7px 12px;
    border: 1px solid rgba(var(--primary-rgb), .15);
    border-radius: 9px;
    color: var(--primary-dark);
    background: rgba(var(--primary-rgb), .055);
    font-size: .65rem;
    font-weight: 900;
    text-decoration: none;
}

/* Outing summary */
body[data-page="direct-outing-feedback"] .direct-outing-info-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
}

body[data-page="direct-outing-feedback"] .direct-outing-info-grid > div {
    min-width: 0;
    padding: 10px 11px;
    border: 1px solid #e2dde5;
    border-radius: 10px;
    background:
        linear-gradient(145deg, rgba(255,255,255,.96), rgba(250,249,251,.94));
}

body[data-page="direct-outing-feedback"] .direct-outing-info-grid span {
    display: block;
    color: var(--text-muted);
    font-size: .59rem;
}

body[data-page="direct-outing-feedback"] .direct-outing-info-grid strong {
    display: block;
    margin-top: 4px;
    color: #3c3943;
    font-size: .69rem;
    overflow-wrap: anywhere;
}

/* Form */
body[data-page="direct-outing-feedback"] .work-mode-form {
    margin: 13px 0 0;
    padding: 15px;
    border: 1px solid rgba(var(--primary-rgb), .10);
    border-radius: 13px;
    background: rgba(255,255,255,.84);
}

body[data-page="direct-outing-feedback"] .work-mode-input-group + .work-mode-input-group {
    margin-top: 11px;
}

body[data-page="direct-outing-feedback"] .work-mode-input-group label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 6px;
    color: #5b5764;
    font-size: .68rem;
    font-weight: 850;
}

body[data-page="direct-outing-feedback"] .work-mode-input-group label::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--primary);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), .09);
}

body[data-page="direct-outing-feedback"] select,
body[data-page="direct-outing-feedback"] input,
body[data-page="direct-outing-feedback"] textarea {
    width: 100%;
    min-width: 0;
    padding: 10px 12px;
    border: 1px solid #ddd8e0;
    border-radius: 11px;
    color: #37343e;
    background: linear-gradient(180deg, #fff, #fbfafc);
    font: inherit;
    font-size: .72rem;
    box-shadow:
        inset 0 1px 2px rgba(41,40,49,.035),
        0 3px 8px rgba(41,40,49,.025);
}

body[data-page="direct-outing-feedback"] select,
body[data-page="direct-outing-feedback"] input {
    min-height: 46px;
}

body[data-page="direct-outing-feedback"] textarea {
    min-height: 108px;
    resize: vertical;
    line-height: 1.55;
}

body[data-page="direct-outing-feedback"] select:focus,
body[data-page="direct-outing-feedback"] input:focus,
body[data-page="direct-outing-feedback"] textarea:focus {
    outline: none;
    border-color: rgba(var(--primary-rgb), .52);
    box-shadow:
        0 0 0 4px rgba(var(--primary-rgb), .09),
        0 8px 18px rgba(var(--primary-rgb), .07);
}

/* Conditional amount boxes */
body[data-page="direct-outing-feedback"] #received-tip-box,
body[data-page="direct-outing-feedback"] #extra-tip-box {
    padding: 12px;
    border: 1px solid rgba(var(--gold-rgb), .18);
    border-radius: 11px;
    background:
        radial-gradient(circle at 100% 0%, rgba(var(--gold-rgb), .10), transparent 110px),
        linear-gradient(145deg, #fffaf1, #fff);
}

body[data-page="direct-outing-feedback"] #received-tip-box input,
body[data-page="direct-outing-feedback"] #extra-tip-box input {
    color: var(--gold-dark);
    font-size: .82rem;
    font-weight: 950;
    font-variant-numeric: tabular-nums;
}

/* Story box */
body[data-page="direct-outing-feedback"] #feedback-story-box {
    padding: 12px;
    border: 1px solid rgba(var(--plum-rgb), .18);
    border-radius: 11px;
    background:
        radial-gradient(circle at 100% 0%, rgba(var(--plum-rgb), .09), transparent 110px),
        linear-gradient(145deg, #fcf8fc, #fff);
}

body[data-page="direct-outing-feedback"] .section-subtitle {
    margin: 6px 0 0;
    color: var(--text-muted);
    font-size: .63rem;
    line-height: 1.45;
}

/* Submit */
body[data-page="direct-outing-feedback"] #direct-outing-submit-btn {
    display: inline-flex;
    width: 100%;
    min-height: 48px;
    align-items: center;
    justify-content: center;
    margin-top: 14px;
    padding: 9px 12px;
    border: 1px solid var(--burgundy);
    border-radius: 11px;
    color: #fff;
    background:
        linear-gradient(145deg, var(--burgundy), var(--burgundy-dark));
    box-shadow:
        0 10px 22px rgba(var(--burgundy-rgb), .23),
        inset 0 1px 0 rgba(255,255,255,.16);
    font: inherit;
    font-size: .72rem;
    font-weight: 950;
    cursor: pointer;
}

body[data-page="direct-outing-feedback"] #direct-outing-submit-btn:disabled {
    opacity: .68;
    cursor: not-allowed;
}

/* Responsive */
@media (max-width: 700px) {
    body[data-page="direct-outing-feedback"] .work-mode-page-container {
        width: min(100% - 16px, 620px);
        padding: 8px 0 20px;
    }

    body[data-page="direct-outing-feedback"] .login-language-switch {
        top: 20px;
        right: 12px;
    }

    body[data-page="direct-outing-feedback"] .work-mode-hero {
        min-height: 0;
        padding: 30px 16px 18px;
        border-radius: 17px;
    }

    body[data-page="direct-outing-feedback"] .work-mode-hero h1 {
        font-size: 1.48rem;
    }

    body[data-page="direct-outing-feedback"] .work-mode-card {
        margin-top: 10px;
        padding: 13px;
        border-radius: 14px;
    }

    body[data-page="direct-outing-feedback"] .direct-outing-info-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 5px;
    }

    body[data-page="direct-outing-feedback"] .direct-outing-info-grid > div:last-child {
        grid-column: 1 / -1;
    }
}

@media (max-width: 430px) {
    body[data-page="direct-outing-feedback"] .work-mode-desc {
        font-size: .66rem;
    }

    body[data-page="direct-outing-feedback"] .direct-outing-info-grid {
        grid-template-columns: 1fr;
    }

    body[data-page="direct-outing-feedback"] .direct-outing-info-grid > div:last-child {
        grid-column: auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    body[data-page="direct-outing-feedback"] *,
    body[data-page="direct-outing-feedback"] *::before,
    body[data-page="direct-outing-feedback"] *::after {
        animation: none !important;
        transition: none !important;
    }
}

/* =========================================================
   Refined Back Link Placement
   ========================================================= */

body[data-page="direct-outing-feedback"] .workspace-premium-link-row {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin: 0 0 14px;
    padding: 0 0 10px;
    border-bottom: 1px solid rgba(var(--primary-rgb), .10);
}

body[data-page="direct-outing-feedback"] .workspace-card-link {
    position: relative;
    display: inline-flex;
    min-height: 34px;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 6px 10px;
    border: 0;
    border-radius: 8px;
    color: var(--primary-dark);
    background: rgba(var(--primary-rgb), .055);
    box-shadow: none;
    font-size: .64rem;
    font-weight: 900;
    text-decoration: none;
}

body[data-page="direct-outing-feedback"] .workspace-card-link::before {
    content: "←";
    color: var(--gold-dark);
    font-size: .76rem;
    font-weight: 950;
    transition: transform .18s ease;
}

body[data-page="direct-outing-feedback"] .workspace-card-link:hover {
    color: #fff;
    background:
        linear-gradient(145deg, var(--primary), var(--plum));
}

body[data-page="direct-outing-feedback"] .workspace-card-link:hover::before {
    color: #fff;
    transform: translateX(-2px);
}

@media (max-width: 430px) {
    body[data-page="direct-outing-feedback"] .workspace-premium-link-row {
        margin-bottom: 11px;
        padding-bottom: 8px;
    }

    body[data-page="direct-outing-feedback"] .workspace-card-link {
        min-height: 32px;
        padding: 5px 9px;
        font-size: .62rem;
    }
}

/* =========================================================
   PRMS Rooms — Premium Executive Room Status Dashboard
   Page scope: body[data-page="rooms"]
   ========================================================= */

body[data-page="rooms"] {
    --page-bg: #f1f3f6;
    --surface: #ffffff;
    --surface-soft: #f8fafb;
    --text: #252a31;
    --text-soft: #68707c;
    --text-muted: #8b929d;
    --line: #dde2e8;

    --navy: #2f3f58;
    --navy-dark: #1d293b;
    --navy-rgb: 47, 63, 88;

    --gold: #c29a52;
    --gold-dark: #76551d;
    --gold-light: #edd7aa;
    --gold-rgb: 194, 154, 82;

    --idle: #2f8f8a;
    --idle-dark: #1d6662;
    --idle-soft: #e9f7f5;
    --idle-rgb: 47, 143, 138;

    --in-use: #b34b52;
    --in-use-dark: #7c2f36;
    --in-use-soft: #fbeff0;
    --in-use-rgb: 179, 75, 82;

    --pending: #b7832f;
    --pending-dark: #78561d;
    --pending-soft: #fff7e7;
    --pending-rgb: 183, 131, 47;

    min-height: 100vh;
    margin: 0;
    color: var(--text);
    background:
        radial-gradient(circle at 100% 0%, rgba(var(--navy-rgb), .08), transparent 30rem),
        radial-gradient(circle at 0% 100%, rgba(var(--gold-rgb), .05), transparent 28rem),
        linear-gradient(145deg, #eef1f5, #f7f4ef);
    font-family: Inter, "Segoe UI", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

body[data-page="rooms"] *,
body[data-page="rooms"] *::before,
body[data-page="rooms"] *::after {
    box-sizing: border-box;
}

body[data-page="rooms"] a,
body[data-page="rooms"] button,
body[data-page="rooms"] input {
    -webkit-tap-highlight-color: transparent;
}

body[data-page="rooms"] .page-with-nav {
    width: min(100% - 28px, 1180px);
    margin: 0 auto;
    padding: 20px 0 96px;
}

/* ---------- Hero ---------- */
body[data-page="rooms"] .rooms-pro-hero {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 18px;
    min-height: 220px;
    padding: 30px 28px 26px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 22px;
    color: #fff;
    background:
        radial-gradient(circle at 12% 8%, rgba(255,255,255,.16), transparent 24%),
        radial-gradient(circle at 88% 112%, rgba(255,255,255,.08), transparent 38%),
        linear-gradient(118deg, rgba(255,255,255,.05), transparent 42%),
        linear-gradient(135deg, var(--navy-dark) 0%, var(--navy) 56%, var(--gold-dark) 100%);
    box-shadow:
        0 26px 60px rgba(var(--navy-rgb), .26),
        inset 0 1px 0 rgba(255,255,255,.12);
}

body[data-page="rooms"] .rooms-pro-hero::before {
    content: "ROOM STATUS";
    position: absolute;
    z-index: -1;
    left: 24px;
    bottom: 18px;
    color: rgba(255,255,255,.04);
    font-size: clamp(3.5rem, 7vw, 6.5rem);
    font-weight: 950;
    letter-spacing: -.08em;
    line-height: .8;
}

body[data-page="rooms"] .rooms-pro-hero::after {
    content: "";
    position: absolute;
    right: -90px;
    top: -110px;
    width: 300px;
    height: 300px;
    border: 44px solid rgba(255,255,255,.035);
    border-radius: 50%;
    box-shadow:
        0 0 0 1px rgba(255,255,255,.05),
        0 0 90px rgba(var(--gold-rgb), .12);
}

body[data-page="rooms"] .rooms-pro-hero-main,
body[data-page="rooms"] .rooms-pro-actions {
    position: relative;
    z-index: 2;
}

body[data-page="rooms"] .page-subtitle {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 28px;
    margin: 0 0 9px;
    padding: 4px 10px;
    border: 1px solid rgba(237,215,170,.24);
    border-radius: 999px;
    color: #ffedc8;
    background: rgba(237,215,170,.10);
    font-size: .62rem;
    font-weight: 900;
    letter-spacing: .10em;
    text-transform: uppercase;
}

body[data-page="rooms"] .page-subtitle::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--gold-light);
    box-shadow: 0 0 0 4px rgba(237,215,170,.12);
}

body[data-page="rooms"] .rooms-pro-hero h1 {
    margin: 0;
    color: #fff;
    font-size: clamp(1.9rem, 3.2vw, 2.7rem);
    font-weight: 950;
    line-height: 1.13;
    letter-spacing: -.035em;
}

body[data-page="rooms"] .user-inline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    color: rgba(255,255,255,.76);
    font-size: .70rem;
}

body[data-page="rooms"] .role-badge {
    display: inline-flex;
    min-height: 25px;
    align-items: center;
    padding: 3px 9px;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 999px;
    color: #fff;
    background: rgba(255,255,255,.10);
    font-size: .63rem;
    font-weight: 850;
}

/* ---------- Hero actions ---------- */
body[data-page="rooms"] .rooms-pro-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(130px, 1fr));
    gap: 8px;
    min-width: 300px;
}

body[data-page="rooms"] .rooms-pro-actions form {
    margin: 0;
}

body[data-page="rooms"] .rooms-pro-action-btn {
    position: relative;
    display: inline-flex;
    width: 100%;
    min-height: 40px;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 11px;
    color: #fff;
    background:
        linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.07));
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.12),
        0 9px 20px rgba(var(--navy-rgb), .16);
    font: inherit;
    font-size: .65rem;
    font-weight: 850;
    text-align: center;
    text-decoration: none;
}

body[data-page="rooms"] .notification-btn {
    grid-column: span 2;
}

body[data-page="rooms"] .notification-dot {
    display: inline-flex;
    min-width: 20px;
    height: 20px;
    align-items: center;
    justify-content: center;
    margin-left: 7px;
    padding: 0 6px;
    border-radius: 999px;
    color: #fff;
    background: var(--in-use);
    font-size: .58rem;
    font-weight: 950;
}

body[data-page="rooms"] .rooms-pro-logout-btn {
    color: #fff;
    background:
        linear-gradient(145deg, rgba(var(--in-use-rgb), .72), rgba(124,47,54,.84));
}

/* ---------- Search ---------- */
body[data-page="rooms"] .rooms-pro-search-card {
    margin-top: 14px;
    padding: 12px;
    border: 1px solid rgba(var(--navy-rgb), .12);
    border-radius: 14px;
    background: rgba(255,255,255,.88);
    box-shadow:
        0 10px 24px rgba(37,42,49,.06),
        inset 0 1px 0 #fff;
}

body[data-page="rooms"] .rooms-pro-search-box {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    margin: 0;
}

body[data-page="rooms"] .rooms-pro-search-box input {
    min-width: 0;
    min-height: 44px;
    padding: 10px 12px;
    border: 1px solid #d9dee5;
    border-radius: 10px;
    color: var(--text);
    background: linear-gradient(180deg, #fff, #fbfcfd);
    font: inherit;
    font-size: .70rem;
}

body[data-page="rooms"] .rooms-pro-search-box input:focus {
    outline: none;
    border-color: rgba(var(--navy-rgb), .48);
    box-shadow: 0 0 0 4px rgba(var(--navy-rgb), .08);
}

body[data-page="rooms"] .rooms-pro-search-box button {
    min-width: 112px;
    min-height: 44px;
    padding: 8px 15px;
    border: 1px solid var(--navy);
    border-radius: 10px;
    color: #fff;
    background: linear-gradient(145deg, var(--navy), var(--navy-dark));
    box-shadow:
        0 9px 18px rgba(var(--navy-rgb), .18),
        inset 0 1px 0 rgba(255,255,255,.14);
    font: inherit;
    font-size: .68rem;
    font-weight: 900;
    cursor: pointer;
}

/* ---------- Sections ---------- */
body[data-page="rooms"] .rooms-pro-section {
    margin-top: 16px;
    padding: 18px;
    border: 1px solid rgba(var(--navy-rgb), .11);
    border-radius: 17px;
    background:
        radial-gradient(circle at 100% 0%, rgba(var(--navy-rgb), .045), transparent 180px),
        linear-gradient(145deg, #ffffff, #fafbfc);
    box-shadow:
        0 13px 30px rgba(37,42,49,.065),
        inset 0 1px 0 #fff;
}

body[data-page="rooms"] .rooms-pro-section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 12px;
    padding-bottom: 11px;
    border-bottom: 1px solid rgba(var(--navy-rgb), .09);
}

body[data-page="rooms"] .rooms-pro-section-title h2 {
    margin: 0;
    color: #303846;
    font-size: 1rem;
}

body[data-page="rooms"] .rooms-pro-section-title p {
    margin: 4px 0 0;
    color: var(--text-muted);
    font-size: .65rem;
}

body[data-page="rooms"] .rooms-pro-section-count {
    display: inline-flex;
    min-height: 30px;
    align-items: center;
    justify-content: center;
    padding: 5px 10px;
    border: 1px solid rgba(var(--gold-rgb), .16);
    border-radius: 999px;
    color: var(--gold-dark);
    background: rgba(var(--gold-rgb), .07);
    font-size: .62rem;
    font-weight: 900;
    white-space: nowrap;
}

/* ---------- Room grid ---------- */
body[data-page="rooms"] .rooms-pro-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

body[data-page="rooms"] .rooms-pro-link {
    min-width: 0;
    color: inherit;
    text-decoration: none;
}

body[data-page="rooms"] .rooms-pro-card {
    position: relative;
    min-height: 155px;
    padding: 13px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fff;
    box-shadow:
        0 9px 20px rgba(37,42,49,.055),
        inset 0 1px 0 #fff;
    transition:
        transform .18s ease,
        box-shadow .18s ease,
        border-color .18s ease;
}

body[data-page="rooms"] .rooms-pro-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    border-radius: 14px 0 0 14px;
}

body[data-page="rooms"] .rooms-pro-card::after {
    content: "";
    position: absolute;
    right: -28px;
    bottom: -28px;
    width: 92px;
    height: 92px;
    border-radius: 50%;
    opacity: .45;
}

body[data-page="rooms"] .rooms-pro-link:hover .rooms-pro-card {
    transform: translateY(-2px);
    box-shadow:
        0 15px 28px rgba(37,42,49,.09),
        inset 0 1px 0 #fff;
}

/* Idle / Available */
body[data-page="rooms"] .rooms-pro-card.idle {
    border-color: rgba(var(--idle-rgb), .22);
    background:
        radial-gradient(circle at 100% 0%, rgba(var(--idle-rgb), .11), transparent 105px),
        linear-gradient(145deg, #ffffff, var(--idle-soft));
}

body[data-page="rooms"] .rooms-pro-card.idle::before {
    background: linear-gradient(180deg, var(--idle), var(--idle-dark));
}

body[data-page="rooms"] .rooms-pro-card.idle::after {
    background: rgba(var(--idle-rgb), .10);
}

body[data-page="rooms"] .rooms-pro-card.idle .rooms-pro-status-dot {
    background: var(--idle);
    box-shadow:
        0 0 0 5px rgba(var(--idle-rgb), .10),
        0 0 14px rgba(var(--idle-rgb), .22);
}

body[data-page="rooms"] .rooms-pro-card.idle .room-status {
    color: var(--idle-dark);
}

/* In use */
body[data-page="rooms"] .rooms-pro-card.in-use {
    border-color: rgba(var(--in-use-rgb), .24);
    background:
        radial-gradient(circle at 100% 0%, rgba(var(--in-use-rgb), .12), transparent 105px),
        linear-gradient(145deg, #ffffff, var(--in-use-soft));
}

body[data-page="rooms"] .rooms-pro-card.in-use::before {
    background: linear-gradient(180deg, var(--in-use), var(--in-use-dark));
}

body[data-page="rooms"] .rooms-pro-card.in-use::after {
    background: rgba(var(--in-use-rgb), .10);
}

body[data-page="rooms"] .rooms-pro-card.in-use .rooms-pro-status-dot {
    background: var(--in-use);
    box-shadow:
        0 0 0 5px rgba(var(--in-use-rgb), .10),
        0 0 14px rgba(var(--in-use-rgb), .22);
}

body[data-page="rooms"] .rooms-pro-card.in-use .room-status {
    color: var(--in-use-dark);
}

/* Pending */
body[data-page="rooms"] .rooms-pro-card.pending {
    border-color: rgba(var(--pending-rgb), .25);
    background:
        radial-gradient(circle at 100% 0%, rgba(var(--pending-rgb), .12), transparent 105px),
        linear-gradient(145deg, #ffffff, var(--pending-soft));
}

body[data-page="rooms"] .rooms-pro-card.pending::before {
    background: linear-gradient(180deg, var(--pending), var(--pending-dark));
}

body[data-page="rooms"] .rooms-pro-card.pending::after {
    background: rgba(var(--pending-rgb), .10);
}

body[data-page="rooms"] .rooms-pro-card.pending .rooms-pro-status-dot {
    background: var(--pending);
    box-shadow:
        0 0 0 5px rgba(var(--pending-rgb), .10),
        0 0 14px rgba(var(--pending-rgb), .22);
}

body[data-page="rooms"] .rooms-pro-card.pending .room-status {
    color: var(--pending-dark);
}

/* ---------- Room card content ---------- */
body[data-page="rooms"] .rooms-pro-card-top {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

body[data-page="rooms"] .rooms-pro-card h3 {
    margin: 0;
    color: #2f3440;
    font-size: .84rem;
    font-weight: 950;
    letter-spacing: -.01em;
}

body[data-page="rooms"] .room-status {
    margin: 5px 0 0;
    font-size: .61rem;
    font-weight: 850;
}

body[data-page="rooms"] .rooms-pro-status-dot {
    flex: 0 0 auto;
    width: 10px;
    height: 10px;
    margin-top: 3px;
    border-radius: 50%;
}

body[data-page="rooms"] .rooms-pro-card-main {
    position: relative;
    z-index: 2;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid rgba(37,42,49,.07);
}

body[data-page="rooms"] .room-staff-count {
    margin: 0;
    color: var(--text-soft);
    font-size: .62rem;
    font-weight: 800;
}

body[data-page="rooms"] .rooms-pro-staff-list {
    display: grid;
    gap: 6px;
    margin-top: 8px;
}

body[data-page="rooms"] .rooms-pro-staff-list:empty::before {
    content: "—";
    color: var(--text-muted);
    font-size: .68rem;
}

/* styles for staff items generated by JS */
body[data-page="rooms"] .rooms-pro-staff-list > * {
    min-width: 0;
    padding: 6px 8px;
    border: 1px solid rgba(var(--navy-rgb), .08);
    border-radius: 8px;
    color: #555d69;
    background: rgba(255,255,255,.72);
    font-size: .60rem;
    overflow-wrap: anywhere;
}

/* ---------- Backup room distinction ---------- */
body[data-page="rooms"] .backup-room-card {
    box-shadow:
        0 8px 18px rgba(37,42,49,.045),
        inset 0 1px 0 #fff;
}

body[data-page="rooms"] .backup-room-card::after {
    opacity: .30;
}

body[data-page="rooms"] .rooms-pro-empty-card {
    grid-column: 1 / -1;
    padding: 18px;
    border: 1px dashed rgba(var(--navy-rgb), .18);
    border-radius: 12px;
    color: var(--text-muted);
    background: rgba(var(--navy-rgb), .025);
    font-size: .68rem;
    text-align: center;
}

/* ---------- Bottom nav ---------- */
body[data-page="rooms"] .bottom-nav {
    position: fixed;
    z-index: 100;
    left: 50%;
    bottom: 12px;
    display: grid;
    width: min(calc(100% - 24px), 560px);
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    padding: 6px;
    border: 1px solid rgba(var(--navy-rgb), .14);
    border-radius: 16px;
    background: rgba(255,255,255,.92);
    box-shadow:
        0 18px 38px rgba(var(--navy-rgb), .16),
        inset 0 1px 0 #fff;
    backdrop-filter: blur(16px);
    transform: translateX(-50%);
}

body[data-page="rooms"] .bottom-nav a {
    display: inline-flex;
    min-height: 42px;
    align-items: center;
    justify-content: center;
    padding: 7px 8px;
    border-radius: 11px;
    color: var(--text-soft);
    font-size: .65rem;
    font-weight: 850;
    text-decoration: none;
}

body[data-page="rooms"] .bottom-nav a.active {
    color: #fff;
    background: linear-gradient(145deg, var(--navy), var(--navy-dark));
    box-shadow:
        0 8px 16px rgba(var(--navy-rgb), .18),
        inset 0 1px 0 rgba(255,255,255,.14);
}

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
    body[data-page="rooms"] .rooms-pro-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    body[data-page="rooms"] .page-with-nav {
        width: min(100% - 16px, 640px);
        padding: 8px 0 90px;
    }

    body[data-page="rooms"] .rooms-pro-hero {
        grid-template-columns: 1fr;
        gap: 14px;
        min-height: 0;
        padding: 22px 16px 18px;
        border-radius: 17px;
    }

    body[data-page="rooms"] .rooms-pro-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        min-width: 0;
    }

    body[data-page="rooms"] .notification-btn {
        grid-column: span 2;
    }

    body[data-page="rooms"] .rooms-pro-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 7px;
    }

    body[data-page="rooms"] .rooms-pro-section {
        margin-top: 11px;
        padding: 13px;
        border-radius: 14px;
    }

    body[data-page="rooms"] .rooms-pro-card {
        min-height: 145px;
        padding: 11px;
        border-radius: 12px;
    }

    body[data-page="rooms"] .rooms-pro-card::before {
        border-radius: 12px 0 0 12px;
    }
}

@media (max-width: 430px) {
    body[data-page="rooms"] .rooms-pro-hero h1 {
        font-size: 1.55rem;
    }

    body[data-page="rooms"] .rooms-pro-search-box {
        grid-template-columns: minmax(0, 1fr) 88px;
    }

    body[data-page="rooms"] .rooms-pro-search-box button {
        min-width: 0;
        padding: 8px 10px;
    }

    body[data-page="rooms"] .rooms-pro-section-title {
        align-items: flex-start;
    }

    body[data-page="rooms"] .rooms-pro-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body[data-page="rooms"] .rooms-pro-card {
        min-height: 138px;
        padding: 10px;
    }

    body[data-page="rooms"] .rooms-pro-card h3 {
        font-size: .76rem;
    }

    body[data-page="rooms"] .room-status,
    body[data-page="rooms"] .room-staff-count {
        font-size: .58rem;
    }
}

@media (max-width: 350px) {
    body[data-page="rooms"] .rooms-pro-grid {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    body[data-page="rooms"] *,
    body[data-page="rooms"] *::before,
    body[data-page="rooms"] *::after {
        animation: none !important;
        transition: none !important;
    }
}

/* =========================================================
   Rooms Hero Owl Branding + Permission-aware Action Layout
   ========================================================= */

body[data-page="rooms"] .rooms-pro-hero {
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
}

body[data-page="rooms"] .rooms-pro-owl {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 132px;
    min-width: 132px;
}

body[data-page="rooms"] .rooms-pro-owl-ring {
    position: relative;
    display: grid;
    width: 118px;
    height: 118px;
    place-items: center;
    border: 1px solid rgba(237,215,170,.26);
    border-radius: 50%;
    background:
        radial-gradient(circle at 35% 28%, rgba(255,255,255,.18), transparent 40%),
        linear-gradient(145deg, rgba(255,255,255,.12), rgba(255,255,255,.045));
    box-shadow:
        0 18px 34px rgba(var(--navy-rgb), .20),
        inset 0 1px 0 rgba(255,255,255,.18),
        0 0 0 10px rgba(255,255,255,.028),
        0 0 0 11px rgba(237,215,170,.08);
    backdrop-filter: blur(12px);
}

body[data-page="rooms"] .rooms-pro-owl-ring::before,
body[data-page="rooms"] .rooms-pro-owl-ring::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

body[data-page="rooms"] .rooms-pro-owl-ring::before {
    inset: -13px;
    border: 1px solid rgba(237,215,170,.11);
}

body[data-page="rooms"] .rooms-pro-owl-ring::after {
    inset: 12px;
    border: 1px solid rgba(255,255,255,.08);
}

body[data-page="rooms"] .rooms-pro-owl-image {
    position: relative;
    z-index: 2;
    display: block;
    width: 92px;
    height: 92px;
    object-fit: contain;
    filter:
        drop-shadow(0 10px 16px rgba(0,0,0,.22))
        drop-shadow(0 0 10px rgba(237,215,170,.08));
}

body[data-page="rooms"] .rooms-pro-actions.has-application-action {
    grid-template-columns: repeat(2, minmax(130px, 1fr));
}

body[data-page="rooms"] .rooms-pro-actions.has-application-action .notification-btn {
    grid-column: 1 / -1;
}

body[data-page="rooms"] .rooms-pro-actions.no-application-action {
    grid-template-columns: 1fr;
}

body[data-page="rooms"] .rooms-pro-actions.no-application-action .notification-btn,
body[data-page="rooms"] .rooms-pro-actions.no-application-action form,
body[data-page="rooms"] .rooms-pro-actions.no-application-action .rooms-pro-logout-btn {
    width: 100%;
}

body[data-page="rooms"] .rooms-pro-actions.no-application-action .notification-btn {
    grid-column: auto;
}

@media (max-width: 900px) {
    body[data-page="rooms"] .rooms-pro-hero {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    body[data-page="rooms"] .rooms-pro-owl {
        grid-column: 2;
        grid-row: 1;
        width: 104px;
        min-width: 104px;
    }

    body[data-page="rooms"] .rooms-pro-owl-ring {
        width: 94px;
        height: 94px;
    }

    body[data-page="rooms"] .rooms-pro-owl-image {
        width: 72px;
        height: 72px;
    }

    body[data-page="rooms"] .rooms-pro-actions {
        grid-column: 1 / -1;
        width: 100%;
    }
}

@media (max-width: 760px) {
    body[data-page="rooms"] .rooms-pro-hero {
        grid-template-columns: minmax(0, 1fr) 82px;
        align-items: start;
    }

    body[data-page="rooms"] .rooms-pro-owl {
        width: 82px;
        min-width: 82px;
    }

    body[data-page="rooms"] .rooms-pro-owl-ring {
        width: 76px;
        height: 76px;
        box-shadow:
            0 12px 24px rgba(var(--navy-rgb), .18),
            inset 0 1px 0 rgba(255,255,255,.16),
            0 0 0 7px rgba(255,255,255,.025);
    }

    body[data-page="rooms"] .rooms-pro-owl-image {
        width: 58px;
        height: 58px;
    }

    body[data-page="rooms"] .rooms-pro-actions.has-application-action {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body[data-page="rooms"] .rooms-pro-actions.has-application-action .notification-btn {
        grid-column: 1 / -1;
    }

    body[data-page="rooms"] .rooms-pro-actions.no-application-action {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 430px) {
    body[data-page="rooms"] .rooms-pro-hero {
        grid-template-columns: minmax(0, 1fr) 70px;
    }

    body[data-page="rooms"] .rooms-pro-owl {
        width: 70px;
        min-width: 70px;
    }

    body[data-page="rooms"] .rooms-pro-owl-ring {
        width: 64px;
        height: 64px;
    }

    body[data-page="rooms"] .rooms-pro-owl-image {
        width: 50px;
        height: 50px;
    }
}

/* =========================================================
   PRMS Room Detail — Premium Indigo Gold Room Operations UI
   Page scope: body[data-page="room-detail"]
   ========================================================= */

body[data-page="room-detail"] {
    --page-bg: #f2f3f6;
    --surface: #ffffff;
    --surface-soft: #f8f9fb;
    --text: #272a32;
    --text-soft: #69707b;
    --text-muted: #8d939d;
    --line: #dde1e7;

    --primary: #3e4765;
    --primary-dark: #242b40;
    --primary-rgb: 62, 71, 101;

    --gold: #c49a50;
    --gold-dark: #75541d;
    --gold-light: #ecd7aa;
    --gold-rgb: 196, 154, 80;

    --idle: #2f8f8a;
    --idle-dark: #1d6662;
    --idle-soft: #eaf7f5;
    --idle-rgb: 47, 143, 138;

    --in-use: #b34b52;
    --in-use-dark: #7c2f36;
    --in-use-soft: #fbeff0;
    --in-use-rgb: 179, 75, 82;

    --pending: #b7832f;
    --pending-dark: #78561d;
    --pending-soft: #fff7e7;
    --pending-rgb: 183, 131, 47;

    --danger: #8b2944;
    --danger-dark: #5a172b;
    --danger-rgb: 139, 41, 68;

    min-height: 100vh;
    margin: 0;
    color: var(--text);
    background:
        radial-gradient(circle at 100% 0%, rgba(var(--primary-rgb), .09), transparent 30rem),
        radial-gradient(circle at 0% 100%, rgba(var(--gold-rgb), .05), transparent 28rem),
        linear-gradient(145deg, #eef0f5, #f7f4ef);
    font-family: Inter, "Segoe UI", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

body[data-page="room-detail"] *,
body[data-page="room-detail"] *::before,
body[data-page="room-detail"] *::after {
    box-sizing: border-box;
}

body[data-page="room-detail"] a,
body[data-page="room-detail"] button,
body[data-page="room-detail"] input,
body[data-page="room-detail"] select {
    -webkit-tap-highlight-color: transparent;
}

body[data-page="room-detail"] .page-with-nav {
    width: min(100% - 28px, 1040px);
    margin: 0 auto;
    padding: 20px 0 96px;
}

/* ---------- Hero ---------- */
body[data-page="room-detail"] .room-detail-pro-hero {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 18px;
    min-height: 205px;
    padding: 28px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 22px;
    color: #fff;
    background:
        radial-gradient(circle at 12% 8%, rgba(255,255,255,.16), transparent 24%),
        radial-gradient(circle at 88% 112%, rgba(255,255,255,.08), transparent 38%),
        linear-gradient(118deg, rgba(255,255,255,.05), transparent 42%),
        linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 58%, var(--gold-dark) 100%);
    box-shadow:
        0 26px 60px rgba(var(--primary-rgb), .26),
        inset 0 1px 0 rgba(255,255,255,.12);
}

body[data-page="room-detail"] .room-detail-pro-hero::before {
    content: "ROOM DETAIL";
    position: absolute;
    z-index: -1;
    left: 24px;
    bottom: 18px;
    color: rgba(255,255,255,.04);
    font-size: clamp(3.4rem, 7vw, 6.3rem);
    font-weight: 950;
    letter-spacing: -.08em;
    line-height: .8;
}

body[data-page="room-detail"] .room-detail-pro-hero::after {
    content: "";
    position: absolute;
    right: -88px;
    top: -106px;
    width: 294px;
    height: 294px;
    border: 42px solid rgba(255,255,255,.035);
    border-radius: 50%;
    box-shadow:
        0 0 0 1px rgba(255,255,255,.05),
        0 0 90px rgba(var(--gold-rgb), .12);
}

body[data-page="room-detail"] .room-detail-back-btn {
    position: relative;
    z-index: 2;
    display: grid;
    width: 48px;
    height: 48px;
    place-items: center;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 14px;
    color: #fff;
    background:
        linear-gradient(145deg, rgba(255,255,255,.16), rgba(255,255,255,.07));
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.12),
        0 10px 22px rgba(var(--primary-rgb), .16);
    font-size: 1rem;
    font-weight: 950;
    text-decoration: none;
}

body[data-page="room-detail"] .room-detail-pro-main {
    position: relative;
    z-index: 2;
    min-width: 0;
}

body[data-page="room-detail"] .page-subtitle {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 28px;
    margin: 0 0 9px;
    padding: 4px 10px;
    border: 1px solid rgba(236,215,170,.24);
    border-radius: 999px;
    color: #ffedc8;
    background: rgba(236,215,170,.10);
    font-size: .62rem;
    font-weight: 900;
    letter-spacing: .10em;
    text-transform: uppercase;
}

body[data-page="room-detail"] .page-subtitle::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--gold-light);
    box-shadow: 0 0 0 4px rgba(236,215,170,.12);
}

body[data-page="room-detail"] .room-detail-pro-title-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

body[data-page="room-detail"] .room-detail-pro-title-row h1 {
    margin: 0;
    color: #fff;
    font-size: clamp(1.85rem, 3.2vw, 2.6rem);
    font-weight: 950;
    line-height: 1.14;
    letter-spacing: -.035em;
}

body[data-page="room-detail"] .room-detail-status-badge {
    display: inline-flex;
    min-height: 30px;
    align-items: center;
    justify-content: center;
    padding: 5px 11px;
    border-radius: 999px;
    font-size: .63rem;
    font-weight: 950;
}

body[data-page="room-detail"] .room-detail-status-badge.status-idle {
    color: #dffffa;
    border: 1px solid rgba(var(--idle-rgb), .34);
    background: rgba(var(--idle-rgb), .20);
}

body[data-page="room-detail"] .room-detail-status-badge.status-in-use {
    color: #ffe5e7;
    border: 1px solid rgba(var(--in-use-rgb), .36);
    background: rgba(var(--in-use-rgb), .23);
}

body[data-page="room-detail"] .room-detail-status-badge.status-pending {
    color: #ffefca;
    border: 1px solid rgba(var(--pending-rgb), .38);
    background: rgba(var(--pending-rgb), .22);
}

body[data-page="room-detail"] .room-detail-pro-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 10px;
    color: rgba(255,255,255,.72);
    font-size: .69rem;
}

/* ---------- Alerts ---------- */
body[data-page="room-detail"] .alert {
    margin-top: 12px;
    padding: 11px 13px;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: #fff;
    box-shadow: 0 7px 16px rgba(39,42,50,.05);
    font-size: .70rem;
}

/* ---------- Entry / current cards ---------- */
body[data-page="room-detail"] .room-detail-entry-card,
body[data-page="room-detail"] .room-detail-current-card,
body[data-page="room-detail"] .room-detail-resource-card,
body[data-page="room-detail"] .room-detail-operation-card {
    position: relative;
    overflow: hidden;
    margin-top: 14px;
    padding: 18px;
    border: 1px solid rgba(var(--primary-rgb), .12);
    border-radius: 17px;
    background:
        radial-gradient(circle at 100% 0%, rgba(var(--primary-rgb), .05), transparent 170px),
        linear-gradient(145deg, #fff, #fafbfc);
    box-shadow:
        0 13px 30px rgba(39,42,50,.065),
        inset 0 1px 0 #fff;
}

body[data-page="room-detail"] .room-detail-entry-card::before,
body[data-page="room-detail"] .room-detail-current-card::before,
body[data-page="room-detail"] .room-detail-resource-card::before,
body[data-page="room-detail"] .room-detail-operation-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 5px;
    background: linear-gradient(180deg, var(--primary), var(--gold));
}

body[data-page="room-detail"] .room-detail-entry-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;
}

body[data-page="room-detail"] .summary-label {
    display: inline-flex;
    min-height: 25px;
    align-items: center;
    padding: 3px 9px;
    border: 1px solid rgba(var(--gold-rgb), .16);
    border-radius: 999px;
    color: var(--gold-dark);
    background: rgba(var(--gold-rgb), .07);
    font-size: .60rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .06em;
}

body[data-page="room-detail"] .room-detail-entry-card h3,
body[data-page="room-detail"] .room-detail-current-card h3 {
    margin: 8px 0 0;
    color: #303846;
    font-size: 1rem;
}

body[data-page="room-detail"] .room-detail-entry-card p {
    margin: 5px 0 0;
    color: var(--text-muted);
    font-size: .67rem;
}

body[data-page="room-detail"] .room-detail-entry-form button {
    min-width: 170px;
    min-height: 44px;
    padding: 9px 14px;
    border: 1px solid var(--idle);
    border-radius: 11px;
    color: #fff;
    background: linear-gradient(145deg, var(--idle), var(--idle-dark));
    box-shadow:
        0 10px 22px rgba(var(--idle-rgb), .22),
        inset 0 1px 0 rgba(255,255,255,.16);
    font: inherit;
    font-size: .69rem;
    font-weight: 950;
    cursor: pointer;
}

body[data-page="room-detail"] .room-detail-current-card {
    border-color: rgba(var(--in-use-rgb), .16);
    background:
        radial-gradient(circle at 100% 0%, rgba(var(--in-use-rgb), .08), transparent 170px),
        linear-gradient(145deg, #fff, var(--in-use-soft));
}

body[data-page="room-detail"] .room-detail-current-card::before {
    background: linear-gradient(180deg, var(--in-use), var(--in-use-dark));
}

body[data-page="room-detail"] .room-detail-current-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

body[data-page="room-detail"] .room-detail-live-pill {
    display: inline-flex;
    min-height: 28px;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    color: var(--in-use-dark);
    background: rgba(var(--in-use-rgb), .10);
    font-size: .62rem;
    font-weight: 950;
}

/* ---------- Shared grids ---------- */
body[data-page="room-detail"] .attendance-info-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
    margin-top: 12px;
}

body[data-page="room-detail"] .attendance-info-grid > div {
    min-width: 0;
    padding: 10px 11px;
    border: 1px solid rgba(var(--primary-rgb), .09);
    border-radius: 10px;
    background: rgba(255,255,255,.78);
}

body[data-page="room-detail"] .attendance-info-grid span {
    display: block;
    color: var(--text-muted);
    font-size: .58rem;
}

body[data-page="room-detail"] .attendance-info-grid strong {
    display: block;
    margin-top: 4px;
    color: #3b414d;
    font-size: .68rem;
    overflow-wrap: anywhere;
}

body[data-page="room-detail"] .room-detail-current-form {
    margin-top: 12px;
}

/* ---------- Section title ---------- */
body[data-page="room-detail"] .section-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 11px;
    border-bottom: 1px solid rgba(var(--primary-rgb), .09);
}

body[data-page="room-detail"] .section-title-row h3 {
    margin: 0;
    color: #303846;
    font-size: 1rem;
}

body[data-page="room-detail"] .section-subtitle {
    margin: 4px 0 0;
    color: var(--text-muted);
    font-size: .65rem;
}

body[data-page="room-detail"] .section-count {
    display: inline-flex;
    min-height: 30px;
    align-items: center;
    justify-content: center;
    padding: 5px 10px;
    border: 1px solid rgba(var(--gold-rgb), .16);
    border-radius: 999px;
    color: var(--gold-dark);
    background: rgba(var(--gold-rgb), .07);
    font-size: .62rem;
    font-weight: 900;
    white-space: nowrap;
}

/* ---------- Active attendance cards ---------- */
body[data-page="room-detail"] .room-detail-active-list {
    display: grid;
    gap: 10px;
    margin-top: 12px;
}

body[data-page="room-detail"] .room-detail-active-card {
    padding: 14px;
    border: 1px solid rgba(var(--primary-rgb), .10);
    border-radius: 13px;
    background: linear-gradient(145deg, #fff, #fafbfc);
    box-shadow: 0 8px 18px rgba(39,42,50,.04);
}

body[data-page="room-detail"] .attendance-top-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

body[data-page="room-detail"] .attendance-top-row h4 {
    margin: 0;
    color: #2f3440;
    font-size: .82rem;
}

body[data-page="room-detail"] .attendance-top-row p {
    margin: 4px 0 0;
    color: var(--text-muted);
    font-size: .62rem;
}

body[data-page="room-detail"] .session-pill {
    display: inline-flex;
    min-height: 27px;
    align-items: center;
    padding: 4px 9px;
    border-radius: 999px;
    color: var(--primary-dark);
    background: rgba(var(--primary-rgb), .07);
    font-size: .60rem;
    font-weight: 900;
}

body[data-page="room-detail"] .attendance-note {
    margin-top: 9px;
    padding: 9px 10px;
    border: 1px solid rgba(var(--gold-rgb), .14);
    border-radius: 9px;
    color: #6b6254;
    background: #fffaf1;
    font-size: .63rem;
}

/* ---------- Actions ---------- */
body[data-page="room-detail"] .room-detail-action-zone {
    display: grid;
    gap: 8px;
    margin-top: 11px;
    padding-top: 11px;
    border-top: 1px solid rgba(var(--primary-rgb), .08);
}

body[data-page="room-detail"] .room-detail-action-zone form {
    margin: 0;
}

body[data-page="room-detail"] button,
body[data-page="room-detail"] select,
body[data-page="room-detail"] input {
    font: inherit;
}

body[data-page="room-detail"] .danger-btn {
    width: 100%;
    min-height: 41px;
    padding: 8px 12px;
    border: 1px solid var(--danger);
    border-radius: 10px;
    color: #fff;
    background: linear-gradient(145deg, var(--danger), var(--danger-dark));
    box-shadow:
        0 8px 18px rgba(var(--danger-rgb), .18),
        inset 0 1px 0 rgba(255,255,255,.14);
    font-size: .66rem;
    font-weight: 900;
    cursor: pointer;
}

body[data-page="room-detail"] .room-detail-mini-form,
body[data-page="room-detail"] .room-detail-operation-form {
    padding: 11px;
    border: 1px solid rgba(var(--primary-rgb), .09);
    border-radius: 11px;
    background: rgba(255,255,255,.78);
}

body[data-page="room-detail"] .room-detail-mini-form label,
body[data-page="room-detail"] .room-detail-operation-form label,
body[data-page="room-detail"] .room-detail-operation-label {
    display: block;
    margin-bottom: 6px;
    color: #596170;
    font-size: .64rem;
    font-weight: 850;
}

body[data-page="room-detail"] .room-detail-mini-grid {
    display: grid;
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
    gap: 7px;
}

body[data-page="room-detail"] select,
body[data-page="room-detail"] input {
    width: 100%;
    min-width: 0;
    min-height: 42px;
    padding: 8px 10px;
    border: 1px solid #d9dde4;
    border-radius: 9px;
    color: #363b47;
    background: linear-gradient(180deg, #fff, #fbfcfd);
    font-size: .66rem;
}

body[data-page="room-detail"] select:focus,
body[data-page="room-detail"] input:focus {
    outline: none;
    border-color: rgba(var(--primary-rgb), .48);
    box-shadow: 0 0 0 4px rgba(var(--primary-rgb), .08);
}

body[data-page="room-detail"] .room-detail-mini-form > button,
body[data-page="room-detail"] .room-detail-operation-form > button:not(.danger-btn) {
    width: 100%;
    min-height: 41px;
    margin-top: 8px;
    padding: 8px 12px;
    border: 1px solid var(--primary);
    border-radius: 10px;
    color: #fff;
    background: linear-gradient(145deg, var(--primary), var(--primary-dark));
    box-shadow:
        0 8px 18px rgba(var(--primary-rgb), .17),
        inset 0 1px 0 rgba(255,255,255,.14);
    font-size: .66rem;
    font-weight: 900;
    cursor: pointer;
}

/* ---------- Room operations ---------- */
body[data-page="room-detail"] .room-detail-operation-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 9px;
    margin-top: 12px;
}

/* ---------- Empty state ---------- */
body[data-page="room-detail"] .empty-state-card {
    padding: 18px;
    border: 1px dashed rgba(var(--primary-rgb), .18);
    border-radius: 12px;
    color: var(--text-muted);
    background: rgba(var(--primary-rgb), .025);
    font-size: .68rem;
    text-align: center;
}

/* ---------- Bottom nav ---------- */
body[data-page="room-detail"] .bottom-nav {
    position: fixed;
    z-index: 100;
    left: 50%;
    bottom: 12px;
    display: grid;
    width: min(calc(100% - 24px), 560px);
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    padding: 6px;
    border: 1px solid rgba(var(--primary-rgb), .14);
    border-radius: 16px;
    background: rgba(255,255,255,.92);
    box-shadow:
        0 18px 38px rgba(var(--primary-rgb), .16),
        inset 0 1px 0 #fff;
    backdrop-filter: blur(16px);
    transform: translateX(-50%);
}

body[data-page="room-detail"] .bottom-nav a {
    display: inline-flex;
    min-height: 42px;
    align-items: center;
    justify-content: center;
    padding: 7px 8px;
    border-radius: 11px;
    color: var(--text-soft);
    font-size: .65rem;
    font-weight: 850;
    text-decoration: none;
}

body[data-page="room-detail"] .bottom-nav a.active {
    color: #fff;
    background: linear-gradient(145deg, var(--primary), var(--primary-dark));
    box-shadow:
        0 8px 16px rgba(var(--primary-rgb), .18),
        inset 0 1px 0 rgba(255,255,255,.14);
}

/* ---------- Responsive ---------- */
@media (max-width: 760px) {
    body[data-page="room-detail"] .page-with-nav {
        width: min(100% - 16px, 640px);
        padding: 8px 0 90px;
    }

    body[data-page="room-detail"] .room-detail-pro-hero {
        grid-template-columns: auto minmax(0, 1fr);
        min-height: 0;
        padding: 20px 16px;
        border-radius: 17px;
    }

    body[data-page="room-detail"] .room-detail-back-btn {
        width: 42px;
        height: 42px;
        border-radius: 12px;
    }

    body[data-page="room-detail"] .room-detail-pro-title-row h1 {
        font-size: 1.5rem;
    }

    body[data-page="room-detail"] .room-detail-entry-card {
        grid-template-columns: 1fr;
    }

    body[data-page="room-detail"] .room-detail-entry-form button {
        width: 100%;
        min-width: 0;
    }

    body[data-page="room-detail"] .attendance-info-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 5px;
    }

    body[data-page="room-detail"] .room-detail-operation-grid {
        grid-template-columns: 1fr;
    }

    body[data-page="room-detail"] .room-detail-entry-card,
    body[data-page="room-detail"] .room-detail-current-card,
    body[data-page="room-detail"] .room-detail-resource-card,
    body[data-page="room-detail"] .room-detail-operation-card {
        margin-top: 10px;
        padding: 13px;
        border-radius: 14px;
    }
}

@media (max-width: 430px) {
    body[data-page="room-detail"] .room-detail-pro-hero {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    body[data-page="room-detail"] .room-detail-back-btn {
        width: 38px;
        height: 38px;
    }

    body[data-page="room-detail"] .room-detail-mini-grid {
        grid-template-columns: 1fr;
    }

    body[data-page="room-detail"] .attendance-info-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 350px) {
    body[data-page="room-detail"] .attendance-info-grid {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    body[data-page="room-detail"] *,
    body[data-page="room-detail"] *::before,
    body[data-page="room-detail"] *::after {
        animation: none !important;
        transition: none !important;
    }
}

/* =========================================================
   Mobile Hero Main Placement Fix
   ========================================================= */

@media (max-width: 430px) {
    body[data-page="room-detail"] .room-detail-pro-hero {
        position: relative;
        display: block;
        min-height: 190px;
        padding: 66px 16px 20px;
    }

    body[data-page="room-detail"] .room-detail-back-btn {
        position: absolute;
        top: 16px;
        left: 16px;
        width: 38px;
        height: 38px;
        margin: 0;
    }

    body[data-page="room-detail"] .room-detail-pro-main {
        width: 100%;
        min-width: 0;
    }

    body[data-page="room-detail"] .room-detail-pro-title-row {
        align-items: flex-start;
        gap: 8px;
    }

    body[data-page="room-detail"] .room-detail-pro-title-row h1 {
        width: 100%;
        font-size: 1.48rem;
    }

    body[data-page="room-detail"] .room-detail-status-badge {
        min-height: 28px;
        padding: 4px 9px;
    }
}

/* =========================================================
   Small Mobile Hero — Keep Horizontal Screenshot Layout
   ========================================================= */

@media (max-width: 430px) {
    body[data-page="room-detail"] .room-detail-pro-hero {
        position: relative;
        display: grid;
        grid-template-columns: 60px minmax(0, 1fr);
        align-items: center;
        gap: 12px;
        min-height: 145px;
        padding: 18px 14px;
    }

    body[data-page="room-detail"] .room-detail-back-btn {
        position: static;
        width: 60px;
        height: 60px;
        margin: 0;
        border-radius: 15px;
    }

    body[data-page="room-detail"] .room-detail-pro-main {
        width: auto;
        min-width: 0;
    }

    body[data-page="room-detail"] .page-subtitle {
        min-height: 26px;
        margin-bottom: 8px;
        padding: 3px 9px;
        font-size: .58rem;
        letter-spacing: .08em;
    }

    body[data-page="room-detail"] .room-detail-pro-title-row {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        gap: 8px;
        min-width: 0;
    }

    body[data-page="room-detail"] .room-detail-pro-title-row h1 {
        width: auto;
        min-width: 0;
        margin: 0;
        font-size: clamp(1.55rem, 8vw, 2.15rem);
        line-height: 1.05;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    body[data-page="room-detail"] .room-detail-status-badge {
        flex: 0 0 auto;
        min-height: 28px;
        padding: 4px 9px;
        font-size: .58rem;
        white-space: nowrap;
    }

    body[data-page="room-detail"] .room-detail-pro-meta {
        margin-top: 8px;
        gap: 6px;
        font-size: .63rem;
    }
}

@media (max-width: 360px) {
    body[data-page="room-detail"] .room-detail-pro-hero {
        grid-template-columns: 52px minmax(0, 1fr);
        gap: 10px;
        padding: 16px 12px;
    }

    body[data-page="room-detail"] .room-detail-back-btn {
        width: 52px;
        height: 52px;
    }

    body[data-page="room-detail"] .room-detail-pro-title-row h1 {
        font-size: clamp(1.35rem, 7.3vw, 1.75rem);
    }

    body[data-page="room-detail"] .room-detail-status-badge {
        min-height: 26px;
        padding: 3px 7px;
        font-size: .54rem;
    }
}

/* =========================================================
   Smaller Mobile Back Button
   ========================================================= */

@media (max-width: 430px) {
    body[data-page="room-detail"] .room-detail-pro-hero {
        grid-template-columns: 48px minmax(0, 1fr);
        gap: 10px;
    }

    body[data-page="room-detail"] .room-detail-back-btn {
        width: 46px;
        height: 46px;
        border-radius: 12px;
        font-size: .88rem;
    }
}

@media (max-width: 360px) {
    body[data-page="room-detail"] .room-detail-pro-hero {
        grid-template-columns: 44px minmax(0, 1fr);
        gap: 9px;
    }

    body[data-page="room-detail"] .room-detail-back-btn {
        width: 42px;
        height: 42px;
        border-radius: 11px;
        font-size: .82rem;
    }
}

/* =========================================================
   PRMS Attendance Feedback — Premium Ink Navy & Champagne UI
   Page scope: body[data-page="attendance-feedback"]
   ========================================================= */

body[data-page="attendance-feedback"] {
    --page-bg: #f2f3f6;
    --surface: #ffffff;
    --surface-soft: #f8f9fb;
    --text: #282b33;
    --text-soft: #68707b;
    --text-muted: #8d939d;
    --line: #dde1e7;

    --primary: #38465f;
    --primary-dark: #202b3d;
    --primary-rgb: 56, 70, 95;

    --gold: #c59a4d;
    --gold-dark: #75531d;
    --gold-light: #ecd6a5;
    --gold-rgb: 197, 154, 77;

    --berry: #8b3553;
    --berry-dark: #5a1f36;
    --berry-rgb: 139, 53, 83;

    --teal: #2f8f8a;
    --teal-dark: #1d6662;
    --teal-rgb: 47, 143, 138;

    min-height: 100vh;
    margin: 0;
    color: var(--text);
    background:
        radial-gradient(circle at 100% 0%, rgba(var(--primary-rgb), .09), transparent 30rem),
        radial-gradient(circle at 0% 100%, rgba(var(--gold-rgb), .05), transparent 28rem),
        linear-gradient(145deg, #eef0f4, #f7f4ef);
    font-family: Inter, "Segoe UI", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

body[data-page="attendance-feedback"] *,
body[data-page="attendance-feedback"] *::before,
body[data-page="attendance-feedback"] *::after {
    box-sizing: border-box;
}

body[data-page="attendance-feedback"] a,
body[data-page="attendance-feedback"] button,
body[data-page="attendance-feedback"] input,
body[data-page="attendance-feedback"] select,
body[data-page="attendance-feedback"] textarea {
    -webkit-tap-highlight-color: transparent;
}

body[data-page="attendance-feedback"] .work-mode-page-container {
    position: relative;
    width: min(100% - 28px, 900px);
    margin: 0 auto;
    padding: 20px 0 30px;
}

/* ---------- Hero ---------- */
body[data-page="attendance-feedback"] .work-mode-hero {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 18px;
    min-height: 220px;
    padding: 32px 28px 27px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 22px;
    color: #fff;
    background:
        radial-gradient(circle at 12% 8%, rgba(255,255,255,.16), transparent 24%),
        radial-gradient(circle at 88% 112%, rgba(255,255,255,.09), transparent 38%),
        linear-gradient(118deg, rgba(255,255,255,.05), transparent 42%),
        linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 56%, var(--berry) 100%);
    box-shadow:
        0 26px 60px rgba(var(--primary-rgb), .27),
        inset 0 1px 0 rgba(255,255,255,.12);
}

body[data-page="attendance-feedback"] .work-mode-hero::before {
    content: "FEEDBACK";
    position: absolute;
    z-index: -1;
    left: 24px;
    bottom: 18px;
    color: rgba(255,255,255,.04);
    font-size: clamp(3.8rem, 8vw, 6.8rem);
    font-weight: 950;
    letter-spacing: -.085em;
    line-height: .8;
}

body[data-page="attendance-feedback"] .work-mode-hero::after {
    content: "";
    position: absolute;
    right: -86px;
    top: -104px;
    width: 290px;
    height: 290px;
    border: 42px solid rgba(255,255,255,.035);
    border-radius: 50%;
    box-shadow:
        0 0 0 1px rgba(255,255,255,.05),
        0 0 90px rgba(236,214,165,.12);
}

body[data-page="attendance-feedback"] .work-mode-hero > div {
    position: relative;
    z-index: 2;
    min-width: 0;
}

body[data-page="attendance-feedback"] .page-subtitle {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 28px;
    margin: 0 0 9px;
    padding: 4px 10px;
    border: 1px solid rgba(236,214,165,.24);
    border-radius: 999px;
    color: #ffedc8;
    background: rgba(236,214,165,.10);
    font-size: .62rem;
    font-weight: 900;
    letter-spacing: .10em;
    text-transform: uppercase;
}

body[data-page="attendance-feedback"] .page-subtitle::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--gold-light);
    box-shadow: 0 0 0 4px rgba(236,214,165,.12);
}

body[data-page="attendance-feedback"] .work-mode-hero h1 {
    margin: 0;
    color: #fff;
    font-size: clamp(1.85rem, 3.1vw, 2.6rem);
    font-weight: 950;
    line-height: 1.15;
    letter-spacing: -.034em;
}

body[data-page="attendance-feedback"] .work-mode-desc {
    max-width: 560px;
    margin: 8px 0 0;
    color: rgba(255,255,255,.72);
    font-size: .72rem;
    line-height: 1.6;
}

body[data-page="attendance-feedback"] .user-inline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 11px;
    color: rgba(255,255,255,.76);
    font-size: .70rem;
}

body[data-page="attendance-feedback"] .role-badge {
    display: inline-flex;
    min-height: 25px;
    align-items: center;
    padding: 3px 9px;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 999px;
    color: #fff;
    background: rgba(255,255,255,.10);
    font-size: .63rem;
    font-weight: 850;
}

body[data-page="attendance-feedback"] .work-mode-user-card {
    position: relative;
    z-index: 2;
    min-width: 170px;
    padding: 14px;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 14px;
    background:
        linear-gradient(145deg, rgba(255,255,255,.13), rgba(255,255,255,.055));
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.12),
        0 14px 28px rgba(var(--primary-rgb), .16);
    backdrop-filter: blur(12px);
}

body[data-page="attendance-feedback"] .work-mode-user-card span {
    display: block;
    color: rgba(255,255,255,.62);
    font-size: .60rem;
}

body[data-page="attendance-feedback"] .work-mode-user-card strong {
    display: block;
    margin-top: 5px;
    color: #fff;
    font-size: .86rem;
}

/* ---------- Alert ---------- */
body[data-page="attendance-feedback"] .alert {
    margin-top: 12px;
    padding: 11px 13px;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: #fff;
    box-shadow: 0 7px 16px rgba(40,43,51,.05);
    font-size: .70rem;
}

/* ---------- Main card ---------- */
body[data-page="attendance-feedback"] .work-mode-card {
    position: relative;
    overflow: hidden;
    margin-top: 14px;
    padding: 20px;
    border: 1px solid rgba(var(--primary-rgb), .13);
    border-radius: 18px;
    background:
        radial-gradient(circle at 100% 0%, rgba(var(--primary-rgb), .055), transparent 180px),
        linear-gradient(145deg, #ffffff, #fafbfc);
    box-shadow:
        0 14px 34px rgba(40,43,51,.075),
        inset 0 1px 0 #fff;
}

body[data-page="attendance-feedback"] .work-mode-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 5px;
    background:
        linear-gradient(180deg, var(--primary), var(--gold));
}

body[data-page="attendance-feedback"] .section-title-row {
    padding: 13px 14px;
    border: 1px solid rgba(var(--primary-rgb), .10);
    border-radius: 12px;
    background:
        linear-gradient(145deg, rgba(255,255,255,.96), rgba(var(--primary-rgb), .04));
}

body[data-page="attendance-feedback"] .section-title-row h3 {
    margin: 0;
    color: #343b49;
    font-size: 1rem;
}

body[data-page="attendance-feedback"] .section-subtitle {
    margin: 5px 0 0;
    color: var(--text-muted);
    font-size: .65rem;
    line-height: 1.45;
}

/* ---------- Form ---------- */
body[data-page="attendance-feedback"] .work-mode-form {
    margin: 13px 0 0;
    padding: 15px;
    border: 1px solid rgba(var(--primary-rgb), .10);
    border-radius: 13px;
    background: rgba(255,255,255,.84);
}

body[data-page="attendance-feedback"] .work-mode-input-group + .work-mode-input-group {
    margin-top: 11px;
}

body[data-page="attendance-feedback"] .work-mode-input-group label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 6px;
    color: #596170;
    font-size: .68rem;
    font-weight: 850;
}

body[data-page="attendance-feedback"] .work-mode-input-group label::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--primary);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), .09);
}

body[data-page="attendance-feedback"] select,
body[data-page="attendance-feedback"] input,
body[data-page="attendance-feedback"] textarea {
    width: 100%;
    min-width: 0;
    padding: 10px 12px;
    border: 1px solid #d9dde4;
    border-radius: 11px;
    color: #363b47;
    background: linear-gradient(180deg, #fff, #fbfcfd);
    font: inherit;
    font-size: .72rem;
    box-shadow:
        inset 0 1px 2px rgba(40,43,51,.035),
        0 3px 8px rgba(40,43,51,.025);
}

body[data-page="attendance-feedback"] select,
body[data-page="attendance-feedback"] input {
    min-height: 46px;
}

body[data-page="attendance-feedback"] textarea {
    min-height: 102px;
    resize: vertical;
    line-height: 1.55;
}

body[data-page="attendance-feedback"] select:focus,
body[data-page="attendance-feedback"] input:focus,
body[data-page="attendance-feedback"] textarea:focus {
    outline: none;
    border-color: rgba(var(--primary-rgb), .52);
    box-shadow:
        0 0 0 4px rgba(var(--primary-rgb), .09),
        0 8px 18px rgba(var(--primary-rgb), .07);
}

/* ---------- Money amount boxes ---------- */
body[data-page="attendance-feedback"] #received-tip-amount-box,
body[data-page="attendance-feedback"] #extra-tip-amount-box,
body[data-page="attendance-feedback"] #story-detail-box {
    padding: 12px;
    border: 1px solid rgba(var(--gold-rgb), .18);
    border-radius: 11px;
    background:
        radial-gradient(circle at 100% 0%, rgba(var(--gold-rgb), .10), transparent 110px),
        linear-gradient(145deg, #fffaf1, #fff);
}

body[data-page="attendance-feedback"] #received-tip-amount-box input,
body[data-page="attendance-feedback"] #extra-tip-amount-box input,
body[data-page="attendance-feedback"] #story-detail-box input[type="number"] {
    color: var(--gold-dark);
    font-size: .82rem;
    font-weight: 950;
    font-variant-numeric: tabular-nums;
}

/* ---------- Story section ---------- */
body[data-page="attendance-feedback"] #story-box {
    margin-top: 11px;
    padding: 12px;
    border: 1px solid rgba(var(--berry-rgb), .16);
    border-radius: 12px;
    background:
        radial-gradient(circle at 100% 0%, rgba(var(--berry-rgb), .08), transparent 120px),
        linear-gradient(145deg, #fcf8fb, #fff);
}

body[data-page="attendance-feedback"] #story-switch-box {
    margin-top: 10px;
    padding: 10px 11px;
    border: 1px solid rgba(var(--primary-rgb), .10);
    border-radius: 10px;
    background: rgba(var(--primary-rgb), .04);
}

body[data-page="attendance-feedback"] .switch-row {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin: 0 !important;
}

body[data-page="attendance-feedback"] .switch-row::before {
    display: none;
}

body[data-page="attendance-feedback"] .switch-row input[type="checkbox"] {
    width: 42px;
    min-width: 42px;
    height: 23px;
    min-height: 23px;
    margin: 0;
    appearance: none;
    border: 0;
    border-radius: 999px;
    background: #cfd4dc;
    box-shadow: inset 0 1px 2px rgba(0,0,0,.12);
    cursor: pointer;
    transition: background .18s ease;
}

body[data-page="attendance-feedback"] .switch-row input[type="checkbox"]::before {
    content: "";
    display: block;
    width: 17px;
    height: 17px;
    margin: 3px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 5px rgba(0,0,0,.18);
    transition: transform .18s ease;
}

body[data-page="attendance-feedback"] .switch-row input[type="checkbox"]:checked {
    background: linear-gradient(145deg, var(--teal), var(--teal-dark));
}

body[data-page="attendance-feedback"] .switch-row input[type="checkbox"]:checked::before {
    transform: translateX(19px);
}

/* inline hint */
body[data-page="attendance-feedback"] .work-mode-input-group p {
    margin: 6px 0 0 !important;
    color: var(--text-muted) !important;
    font-size: .62rem !important;
    line-height: 1.45;
}

/* ---------- Submit ---------- */
body[data-page="attendance-feedback"] .work-mode-form > button[type="submit"] {
    display: inline-flex;
    width: 100%;
    min-height: 48px;
    align-items: center;
    justify-content: center;
    margin-top: 14px;
    padding: 9px 12px;
    border: 1px solid var(--berry);
    border-radius: 11px;
    color: #fff;
    background:
        linear-gradient(145deg, var(--berry), var(--berry-dark));
    box-shadow:
        0 10px 22px rgba(var(--berry-rgb), .22),
        inset 0 1px 0 rgba(255,255,255,.16);
    font: inherit;
    font-size: .72rem;
    font-weight: 950;
    cursor: pointer;
}

/* ---------- Responsive ---------- */
@media (max-width: 700px) {
    body[data-page="attendance-feedback"] .work-mode-page-container {
        width: min(100% - 16px, 620px);
        padding: 8px 0 20px;
    }

    body[data-page="attendance-feedback"] .work-mode-hero {
        grid-template-columns: 1fr;
        align-items: stretch;
        gap: 14px;
        min-height: 0;
        padding: 22px 16px 18px;
        border-radius: 17px;
    }

    body[data-page="attendance-feedback"] .work-mode-hero h1 {
        font-size: 1.5rem;
    }

    body[data-page="attendance-feedback"] .work-mode-user-card {
        min-width: 0;
        padding: 11px 12px;
    }

    body[data-page="attendance-feedback"] .work-mode-card {
        margin-top: 10px;
        padding: 13px;
        border-radius: 14px;
    }
}

@media (max-width: 430px) {
    body[data-page="attendance-feedback"] .work-mode-desc {
        font-size: .66rem;
    }

    body[data-page="attendance-feedback"] .work-mode-form {
        padding: 12px;
    }
}

@media (prefers-reduced-motion: reduce) {
    body[data-page="attendance-feedback"] *,
    body[data-page="attendance-feedback"] *::before,
    body[data-page="attendance-feedback"] *::after {
        animation: none !important;
        transition: none !important;
    }
}

/* =========================================================
   PRMS Daily Feedback — Premium Taupe Gold & Plum UI
   Page scope: body[data-page="daily-feedback"]
   ========================================================= */

body[data-page="daily-feedback"] {
    --page-bg: #f3f1ef;
    --surface: #ffffff;
    --surface-soft: #faf8f6;
    --text: #2d2a2c;
    --text-soft: #6f696d;
    --text-muted: #948d91;
    --line: #e3dedf;

    --primary: #5c504f;
    --primary-dark: #342d2d;
    --primary-rgb: 92, 80, 79;

    --gold: #c59a4d;
    --gold-dark: #75531d;
    --gold-light: #ecd6a5;
    --gold-rgb: 197, 154, 77;

    --plum: #7d3d5b;
    --plum-dark: #4c2236;
    --plum-rgb: 125, 61, 91;

    --teal: #2f8f8a;
    --teal-dark: #1d6662;
    --teal-rgb: 47, 143, 138;

    min-height: 100vh;
    margin: 0;
    color: var(--text);
    background:
        radial-gradient(circle at 100% 0%, rgba(var(--primary-rgb), .09), transparent 30rem),
        radial-gradient(circle at 0% 100%, rgba(var(--gold-rgb), .05), transparent 28rem),
        linear-gradient(145deg, #efedeb, #f8f4ef);
    font-family: Inter, "Segoe UI", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

body[data-page="daily-feedback"] *,
body[data-page="daily-feedback"] *::before,
body[data-page="daily-feedback"] *::after {
    box-sizing: border-box;
}

body[data-page="daily-feedback"] button,
body[data-page="daily-feedback"] input,
body[data-page="daily-feedback"] select,
body[data-page="daily-feedback"] textarea {
    -webkit-tap-highlight-color: transparent;
}

body[data-page="daily-feedback"] .daily-feedback-page-container {
    width: min(100% - 28px, 920px);
    margin: 0 auto;
    padding: 20px 0 32px;
}

/* ---------- Hero ---------- */
body[data-page="daily-feedback"] .daily-feedback-hero {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 18px;
    min-height: 150px;
    padding: 32px 28px 27px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 22px;
    color: #fff;
    background:
        radial-gradient(circle at 12% 8%, rgba(255,255,255,.16), transparent 24%),
        radial-gradient(circle at 88% 112%, rgba(255,255,255,.09), transparent 38%),
        linear-gradient(118deg, rgba(255,255,255,.05), transparent 42%),
        linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 56%, var(--plum) 100%);
    box-shadow:
        0 26px 60px rgba(var(--primary-rgb), .27),
        inset 0 1px 0 rgba(255,255,255,.12);
}

body[data-page="daily-feedback"] .daily-feedback-hero::before {
    content: "DAILY FEEDBACK";
    position: absolute;
    z-index: -1;
    left: 24px;
    bottom: 18px;
    color: rgba(255,255,255,.04);
    font-size: clamp(3.2rem, 7vw, 6.3rem);
    font-weight: 950;
    letter-spacing: -.085em;
    line-height: .8;
}

body[data-page="daily-feedback"] .daily-feedback-hero::after {
    content: "";
    position: absolute;
    right: -86px;
    top: -104px;
    width: 290px;
    height: 290px;
    border: 42px solid rgba(255,255,255,.035);
    border-radius: 50%;
    box-shadow:
        0 0 0 1px rgba(255,255,255,.05),
        0 0 90px rgba(236,214,165,.12);
}

body[data-page="daily-feedback"] .daily-feedback-hero > div {
    position: relative;
    z-index: 2;
    min-width: 0;
}

body[data-page="daily-feedback"] .page-subtitle {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 28px;
    margin: 0 0 9px;
    padding: 4px 10px;
    border: 1px solid rgba(236,214,165,.24);
    border-radius: 999px;
    color: #ffedc8;
    background: rgba(236,214,165,.10);
    font-size: .62rem;
    font-weight: 900;
    letter-spacing: .10em;
    text-transform: uppercase;
}

body[data-page="daily-feedback"] .page-subtitle::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--gold-light);
    box-shadow: 0 0 0 4px rgba(236,214,165,.12);
}

body[data-page="daily-feedback"] .daily-feedback-hero h1 {
    margin: 0;
    color: #fff;
    font-size: clamp(1.85rem, 3.1vw, 2.6rem);
    font-weight: 950;
    line-height: 1.15;
    letter-spacing: -.034em;
}

body[data-page="daily-feedback"] .daily-feedback-desc {
    max-width: 560px;
    margin: 8px 0 0;
    color: rgba(255,255,255,.72);
    font-size: .72rem;
    line-height: 1.6;
}

body[data-page="daily-feedback"] .daily-feedback-date-card {
    min-width: 170px;
    padding: 14px;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 14px;
    background:
        linear-gradient(145deg, rgba(255,255,255,.13), rgba(255,255,255,.055));
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.12),
        0 14px 28px rgba(var(--primary-rgb), .16);
    backdrop-filter: blur(12px);
}

body[data-page="daily-feedback"] .daily-feedback-date-card span {
    display: block;
    color: rgba(255,255,255,.62);
    font-size: .60rem;
}

body[data-page="daily-feedback"] .daily-feedback-date-card strong {
    display: block;
    margin-top: 5px;
    color: #fff;
    font-size: .86rem;
}

/* ---------- Basic info ---------- */
body[data-page="daily-feedback"] .daily-feedback-info-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
    margin-top: 12px;
}

body[data-page="daily-feedback"] .daily-feedback-info-card {
    padding: 12px 13px;
    border: 1px solid rgba(var(--primary-rgb), .11);
    border-radius: 12px;
    background: rgba(255,255,255,.88);
    box-shadow:
        0 8px 18px rgba(45,42,44,.045),
        inset 0 1px 0 #fff;
}

body[data-page="daily-feedback"] .daily-feedback-info-card span {
    display: block;
    color: var(--text-muted);
    font-size: .60rem;
}

body[data-page="daily-feedback"] .daily-feedback-info-card strong {
    display: block;
    margin-top: 4px;
    color: #3f393c;
    font-size: .72rem;
}

/* ---------- Alerts ---------- */
body[data-page="daily-feedback"] .alert {
    margin-top: 12px;
    padding: 11px 13px;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: #fff;
    box-shadow: 0 7px 16px rgba(45,42,44,.05);
    font-size: .70rem;
}

/* ---------- Form shell ---------- */
body[data-page="daily-feedback"] .daily-feedback-form-card {
    position: relative;
    margin-top: 14px;
    padding: 18px;
    overflow: hidden;
    border: 1px solid rgba(var(--primary-rgb), .13);
    border-radius: 18px;
    background:
        radial-gradient(circle at 100% 0%, rgba(var(--primary-rgb), .05), transparent 180px),
        linear-gradient(145deg, #fff, #faf9f8);
    box-shadow:
        0 14px 34px rgba(45,42,44,.075),
        inset 0 1px 0 #fff;
}

body[data-page="daily-feedback"] .daily-feedback-form-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 5px;
    background: linear-gradient(180deg, var(--primary), var(--gold));
}

/* ---------- Question cards ---------- */
body[data-page="daily-feedback"] .daily-feedback-question-card {
    padding: 14px;
    border: 1px solid rgba(var(--primary-rgb), .10);
    border-radius: 13px;
    background: rgba(255,255,255,.86);
    box-shadow:
        0 7px 17px rgba(45,42,44,.035),
        inset 0 1px 0 #fff;
}

body[data-page="daily-feedback"] .daily-feedback-question-card + .daily-feedback-question-card {
    margin-top: 10px;
}

body[data-page="daily-feedback"] .daily-feedback-question-title {
    display: flex;
    align-items: center;
    gap: 10px;
}

body[data-page="daily-feedback"] .daily-feedback-question-number {
    display: grid;
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    place-items: center;
    border: 1px solid rgba(var(--gold-rgb), .22);
    border-radius: 10px;
    color: #fff;
    background: linear-gradient(145deg, var(--gold), var(--gold-dark));
    box-shadow:
        0 6px 13px rgba(var(--gold-rgb), .16),
        inset 0 1px 0 rgba(255,255,255,.18);
    font-size: .67rem;
    font-weight: 950;
}

body[data-page="daily-feedback"] .daily-feedback-question-title label {
    color: #413b3f;
    font-size: .71rem;
    font-weight: 900;
}

/* ---------- Radio choices ---------- */
body[data-page="daily-feedback"] .daily-feedback-radio-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    margin-top: 11px;
}

body[data-page="daily-feedback"] .daily-feedback-radio-option {
    position: relative;
    display: flex;
    min-height: 42px;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 8px 10px;
    border: 1px solid #dfdade;
    border-radius: 10px;
    color: var(--text-soft);
    background: linear-gradient(180deg, #fff, #fbfafb);
    font-size: .66rem;
    font-weight: 850;
    cursor: pointer;
}

body[data-page="daily-feedback"] .daily-feedback-radio-option input {
    width: 15px;
    height: 15px;
    margin: 0;
    accent-color: var(--plum);
}

body[data-page="daily-feedback"] .daily-feedback-radio-option:has(input:checked) {
    color: var(--plum-dark);
    border-color: rgba(var(--plum-rgb), .30);
    background:
        linear-gradient(145deg, rgba(var(--plum-rgb), .09), rgba(255,255,255,.96));
    box-shadow: 0 0 0 3px rgba(var(--plum-rgb), .06);
}

/* ---------- Extra boxes ---------- */
body[data-page="daily-feedback"] .daily-feedback-extra-box {
    margin-top: 10px;
    padding: 11px;
    border: 1px solid rgba(var(--gold-rgb), .17);
    border-radius: 11px;
    background:
        radial-gradient(circle at 100% 0%, rgba(var(--gold-rgb), .09), transparent 110px),
        linear-gradient(145deg, #fffaf1, #fff);
}

body[data-page="daily-feedback"] .daily-feedback-story-box {
    border-color: rgba(var(--plum-rgb), .17);
    background:
        radial-gradient(circle at 100% 0%, rgba(var(--plum-rgb), .08), transparent 110px),
        linear-gradient(145deg, #fcf8fb, #fff);
}

body[data-page="daily-feedback"] input,
body[data-page="daily-feedback"] select,
body[data-page="daily-feedback"] textarea {
    width: 100%;
    min-width: 0;
    padding: 10px 12px;
    border: 1px solid #ddd8dc;
    border-radius: 10px;
    color: #393439;
    background: linear-gradient(180deg, #fff, #fbfafb);
    font: inherit;
    font-size: .70rem;
    box-shadow:
        inset 0 1px 2px rgba(45,42,44,.035),
        0 3px 8px rgba(45,42,44,.025);
}

body[data-page="daily-feedback"] input,
body[data-page="daily-feedback"] select {
    min-height: 44px;
}

body[data-page="daily-feedback"] textarea {
    min-height: 100px;
    resize: vertical;
    line-height: 1.55;
}

body[data-page="daily-feedback"] .daily-feedback-extra-box > * + * {
    margin-top: 8px;
}

body[data-page="daily-feedback"] input:focus,
body[data-page="daily-feedback"] select:focus,
body[data-page="daily-feedback"] textarea:focus {
    outline: none;
    border-color: rgba(var(--primary-rgb), .50);
    box-shadow:
        0 0 0 4px rgba(var(--primary-rgb), .08),
        0 8px 18px rgba(var(--primary-rgb), .06);
}

body[data-page="daily-feedback"] .daily-feedback-extra-box input[type="number"] {
    color: var(--gold-dark);
    font-size: .80rem;
    font-weight: 950;
    font-variant-numeric: tabular-nums;
}

/* ---------- Submit ---------- */
body[data-page="daily-feedback"] .daily-feedback-submit-btn {
    display: inline-flex;
    width: 100%;
    min-height: 48px;
    align-items: center;
    justify-content: center;
    margin-top: 14px;
    padding: 9px 12px;
    border: 1px solid var(--plum);
    border-radius: 11px;
    color: #fff;
    background:
        linear-gradient(145deg, var(--plum), var(--plum-dark));
    box-shadow:
        0 10px 22px rgba(var(--plum-rgb), .22),
        inset 0 1px 0 rgba(255,255,255,.16);
    font: inherit;
    font-size: .72rem;
    font-weight: 950;
    cursor: pointer;
}

/* ---------- Responsive ---------- */
@media (max-width: 700px) {
    body[data-page="daily-feedback"] .daily-feedback-page-container {
        width: min(100% - 16px, 620px);
        padding: 8px 0 20px;
    }

    body[data-page="daily-feedback"] .daily-feedback-hero {
        grid-template-columns: 1fr;
        align-items: stretch;
        gap: 14px;
        min-height: 0;
        padding: 22px 16px 18px;
        border-radius: 17px;
    }

    body[data-page="daily-feedback"] .daily-feedback-hero h1 {
        font-size: 1.5rem;
    }

    body[data-page="daily-feedback"] .daily-feedback-date-card {
        min-width: 0;
        padding: 11px 12px;
    }

    body[data-page="daily-feedback"] .daily-feedback-form-card {
        margin-top: 10px;
        padding: 13px;
        border-radius: 14px;
    }
}

@media (max-width: 430px) {
    body[data-page="daily-feedback"] .daily-feedback-desc {
        font-size: .66rem;
    }

    body[data-page="daily-feedback"] .daily-feedback-info-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
    }

    body[data-page="daily-feedback"] .daily-feedback-question-card {
        padding: 12px;
    }

    body[data-page="daily-feedback"] .daily-feedback-radio-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 340px) {
    body[data-page="daily-feedback"] .daily-feedback-info-grid {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    body[data-page="daily-feedback"] *,
    body[data-page="daily-feedback"] *::before,
    body[data-page="daily-feedback"] *::after {
        animation: none !important;
        transition: none !important;
    }
}

/* =========================================================
   Smaller Yes / No Buttons + Refined Hover
   ========================================================= */

body[data-page="daily-feedback"] .daily-feedback-radio-row {
    gap: 6px;
    margin-top: 9px;
}

body[data-page="daily-feedback"] .daily-feedback-radio-option {
    min-height: 36px;
    padding: 6px 8px;
    border-radius: 9px;
    font-size: .62rem;
    transition:
        transform .16s ease,
        border-color .16s ease,
        background .16s ease,
        box-shadow .16s ease,
        color .16s ease;
}

body[data-page="daily-feedback"] .daily-feedback-radio-option input {
    width: 14px;
    height: 14px;
}

/* Hover: champagne outline, soft lift */
body[data-page="daily-feedback"] .daily-feedback-radio-option:hover {
    color: var(--gold-dark);
    border-color: rgba(var(--gold-rgb), .42);
    background:
        linear-gradient(
            145deg,
            rgba(var(--gold-rgb), .08),
            rgba(255,255,255,.98)
        );
    box-shadow:
        0 6px 14px rgba(var(--gold-rgb), .10),
        inset 0 1px 0 #fff;
    transform: translateY(-1px);
}

/* Checked state stays plum and overrides hover */
body[data-page="daily-feedback"] .daily-feedback-radio-option:has(input:checked),
body[data-page="daily-feedback"] .daily-feedback-radio-option:has(input:checked):hover {
    color: var(--plum-dark);
    border-color: rgba(var(--plum-rgb), .34);
    background:
        linear-gradient(
            145deg,
            rgba(var(--plum-rgb), .11),
            rgba(255,255,255,.98)
        );
    box-shadow:
        0 0 0 3px rgba(var(--plum-rgb), .06),
        0 5px 12px rgba(var(--plum-rgb), .08);
    transform: none;
}

body[data-page="daily-feedback"] .daily-feedback-radio-option:active {
    transform: scale(.985);
}

@media (max-width: 430px) {
    body[data-page="daily-feedback"] .daily-feedback-radio-option {
        min-height: 34px;
        padding: 5px 7px;
        font-size: .59rem;
    }

    body[data-page="daily-feedback"] .daily-feedback-radio-option input {
        width: 13px;
        height: 13px;
    }
}

/* =========================================================
   PRMS My Attendance Records — Premium Slate Copper UI
   Page scope: body[data-page="my-attendance-records"]
   ========================================================= */

body[data-page="my-attendance-records"] {
    --page-bg: #f1f3f6;
    --surface: #ffffff;
    --surface-soft: #f8fafc;
    --text: #28303b;
    --text-soft: #677182;
    --text-muted: #8c95a3;
    --line: #dfe4ea;

    --primary: #46566c;
    --primary-dark: #273446;
    --primary-rgb: 70, 86, 108;

    --copper: #b98752;
    --copper-dark: #704b28;
    --copper-soft: #f7eee4;
    --copper-rgb: 185, 135, 82;

    --teal: #2f8f8a;
    --teal-dark: #1d6662;
    --teal-rgb: 47, 143, 138;

    --danger: #8b3553;
    --danger-dark: #562035;
    --danger-rgb: 139, 53, 83;

    min-height: 100vh;
    margin: 0;
    color: var(--text);
    background:
        radial-gradient(circle at 100% 0%, rgba(var(--primary-rgb), .08), transparent 30rem),
        radial-gradient(circle at 0% 100%, rgba(var(--copper-rgb), .05), transparent 28rem),
        linear-gradient(145deg, #eef1f5, #f7f4f0);
    font-family: Inter, "Segoe UI", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

body[data-page="my-attendance-records"] *,
body[data-page="my-attendance-records"] *::before,
body[data-page="my-attendance-records"] *::after {
    box-sizing: border-box;
}

body[data-page="my-attendance-records"] a,
body[data-page="my-attendance-records"] button,
body[data-page="my-attendance-records"] input,
body[data-page="my-attendance-records"] summary {
    -webkit-tap-highlight-color: transparent;
}

body[data-page="my-attendance-records"] .container.page-with-nav {
    width: min(100% - 28px, 1080px);
    margin: 0 auto;
    padding: 20px 0 96px;
}

/* ---------- Hero ---------- */
body[data-page="my-attendance-records"] .attendance-history-premium-hero {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 20px;
    min-height: 220px;
    padding: 28px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 22px;
    color: #fff;
    background:
        radial-gradient(circle at 12% 8%, rgba(255,255,255,.16), transparent 24%),
        radial-gradient(circle at 88% 112%, rgba(255,255,255,.09), transparent 38%),
        linear-gradient(118deg, rgba(255,255,255,.05), transparent 42%),
        linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 58%, var(--copper-dark) 100%);
    box-shadow:
        0 26px 60px rgba(var(--primary-rgb), .27),
        inset 0 1px 0 rgba(255,255,255,.12);
}

body[data-page="my-attendance-records"] .attendance-history-premium-hero::before {
    content: "ATTENDANCE";
    position: absolute;
    z-index: -1;
    left: 24px;
    bottom: 18px;
    color: rgba(255,255,255,.04);
    font-size: clamp(3.2rem, 7vw, 6.5rem);
    font-weight: 950;
    letter-spacing: -.08em;
    line-height: .8;
}

body[data-page="my-attendance-records"] .attendance-history-premium-hero::after {
    content: "";
    position: absolute;
    right: -86px;
    top: -104px;
    width: 290px;
    height: 290px;
    border: 42px solid rgba(255,255,255,.035);
    border-radius: 50%;
    box-shadow:
        0 0 0 1px rgba(255,255,255,.05),
        0 0 90px rgba(var(--copper-rgb), .12);
}

body[data-page="my-attendance-records"] .attendance-history-premium-main {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
}

body[data-page="my-attendance-records"] .attendance-history-back-btn {
    display: grid;
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    place-items: center;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 14px;
    color: #fff;
    background:
        linear-gradient(145deg, rgba(255,255,255,.16), rgba(255,255,255,.07));
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.12),
        0 10px 22px rgba(var(--primary-rgb), .16);
    font-size: 1rem;
    font-weight: 950;
    text-decoration: none;
}

body[data-page="my-attendance-records"] .page-subtitle {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 28px;
    margin: 0 0 9px;
    padding: 4px 10px;
    border: 1px solid rgba(236,214,165,.24);
    border-radius: 999px;
    color: #ffedc8;
    background: rgba(236,214,165,.10);
    font-size: .62rem;
    font-weight: 900;
    letter-spacing: .10em;
    text-transform: uppercase;
}

body[data-page="my-attendance-records"] .page-subtitle::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #efd7aa;
    box-shadow: 0 0 0 4px rgba(239,215,170,.12);
}

body[data-page="my-attendance-records"] .attendance-history-premium-main h1 {
    margin: 0;
    color: #fff;
    font-size: clamp(1.85rem, 3vw, 2.55rem);
    font-weight: 950;
    line-height: 1.15;
    letter-spacing: -.034em;
}

body[data-page="my-attendance-records"] .attendance-history-user-row {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 10px;
    color: rgba(255,255,255,.72);
    font-size: .69rem;
}

body[data-page="my-attendance-records"] .attendance-history-total-card {
    position: relative;
    z-index: 2;
    min-width: 175px;
    padding: 15px;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 15px;
    background:
        linear-gradient(145deg, rgba(255,255,255,.13), rgba(255,255,255,.055));
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.12),
        0 14px 28px rgba(var(--primary-rgb), .16);
    backdrop-filter: blur(12px);
}

body[data-page="my-attendance-records"] .attendance-history-total-card span,
body[data-page="my-attendance-records"] .attendance-history-total-card p {
    color: rgba(255,255,255,.62);
    font-size: .60rem;
}

body[data-page="my-attendance-records"] .attendance-history-total-card strong {
    display: block;
    margin-top: 3px;
    color: #fff;
    font-size: 1.8rem;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

body[data-page="my-attendance-records"] .attendance-history-total-card p {
    margin: 6px 0 0;
}

/* ---------- Alerts ---------- */
body[data-page="my-attendance-records"] .alert {
    margin-top: 12px;
    padding: 11px 13px;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: #fff;
    box-shadow: 0 7px 16px rgba(40,48,59,.05);
    font-size: .70rem;
}

/* ---------- Cards ---------- */
body[data-page="my-attendance-records"] .attendance-history-filter-card,
body[data-page="my-attendance-records"] .attendance-history-record-section {
    position: relative;
    overflow: hidden;
    margin-top: 14px;
    padding: 18px;
    border: 1px solid rgba(var(--primary-rgb), .12);
    border-radius: 17px;
    background:
        radial-gradient(circle at 100% 0%, rgba(var(--primary-rgb), .05), transparent 170px),
        linear-gradient(145deg, #fff, #fafbfc);
    box-shadow:
        0 13px 30px rgba(40,48,59,.065),
        inset 0 1px 0 #fff;
}

body[data-page="my-attendance-records"] .attendance-history-filter-card::before,
body[data-page="my-attendance-records"] .attendance-history-record-section::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 5px;
    background: linear-gradient(180deg, var(--primary), var(--copper));
}

body[data-page="my-attendance-records"] .section-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 11px;
    border-bottom: 1px solid rgba(var(--primary-rgb), .09);
}

body[data-page="my-attendance-records"] .section-title-row h3 {
    margin: 0;
    color: #303846;
    font-size: 1rem;
}

body[data-page="my-attendance-records"] .section-subtitle {
    margin: 4px 0 0;
    color: var(--text-muted);
    font-size: .65rem;
}

body[data-page="my-attendance-records"] .section-count {
    display: inline-flex;
    min-height: 30px;
    align-items: center;
    padding: 5px 10px;
    border: 1px solid rgba(var(--copper-rgb), .18);
    border-radius: 999px;
    color: var(--copper-dark);
    background: rgba(var(--copper-rgb), .08);
    font-size: .62rem;
    font-weight: 900;
    white-space: nowrap;
}

/* ---------- Filter ---------- */
body[data-page="my-attendance-records"] .attendance-history-filter-form {
    margin-top: 12px;
}

body[data-page="my-attendance-records"] .attendance-history-filter-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: end;
    gap: 8px;
}

body[data-page="my-attendance-records"] .attendance-history-filter-grid label {
    display: block;
    margin-bottom: 6px;
    color: #596170;
    font-size: .64rem;
    font-weight: 850;
}

body[data-page="my-attendance-records"] input[type="date"] {
    width: 100%;
    min-height: 43px;
    padding: 8px 10px;
    border: 1px solid #d9dde4;
    border-radius: 10px;
    color: #363b47;
    background: linear-gradient(180deg, #fff, #fbfcfd);
    font: inherit;
    font-size: .68rem;
}

body[data-page="my-attendance-records"] input[type="date"]:focus {
    outline: none;
    border-color: rgba(var(--primary-rgb), .50);
    box-shadow: 0 0 0 4px rgba(var(--primary-rgb), .08);
}

body[data-page="my-attendance-records"] .attendance-history-filter-grid button,
body[data-page="my-attendance-records"] .attendance-history-clear-btn {
    display: inline-flex;
    min-height: 43px;
    align-items: center;
    justify-content: center;
    padding: 8px 14px;
    border-radius: 10px;
    font: inherit;
    font-size: .66rem;
    font-weight: 900;
    text-decoration: none;
    cursor: pointer;
}

body[data-page="my-attendance-records"] .attendance-history-filter-grid button {
    border: 1px solid var(--primary);
    color: #fff;
    background: linear-gradient(145deg, var(--primary), var(--primary-dark));
    box-shadow:
        0 8px 18px rgba(var(--primary-rgb), .18),
        inset 0 1px 0 rgba(255,255,255,.14);
}

body[data-page="my-attendance-records"] .attendance-history-clear-btn {
    border: 1px solid rgba(var(--copper-rgb), .28);
    color: var(--copper-dark);
    background: var(--copper-soft);
}

/* ---------- Record list ---------- */
body[data-page="my-attendance-records"] .attendance-history-list {
    display: grid;
    gap: 10px;
    margin-top: 12px;
}

body[data-page="my-attendance-records"] .attendance-history-item {
    position: relative;
    overflow: hidden;
    padding: 14px;
    border: 1px solid rgba(var(--primary-rgb), .10);
    border-radius: 14px;
    background:
        linear-gradient(145deg, #fff, #fafbfc);
    box-shadow: 0 8px 18px rgba(40,48,59,.04);
}

body[data-page="my-attendance-records"] .attendance-history-item::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: linear-gradient(180deg, var(--teal), var(--primary));
}

body[data-page="my-attendance-records"] .attendance-history-item-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(var(--primary-rgb), .08);
}

body[data-page="my-attendance-records"] .attendance-history-item-top h4 {
    margin: 0;
    color: #2f3440;
    font-size: .84rem;
}

body[data-page="my-attendance-records"] .attendance-history-item-top p {
    margin: 4px 0 0;
    color: var(--text-muted);
    font-size: .62rem;
}

body[data-page="my-attendance-records"] .session-pill {
    display: inline-flex;
    min-height: 27px;
    align-items: center;
    padding: 4px 9px;
    border: 1px solid rgba(var(--primary-rgb), .13);
    border-radius: 999px;
    color: var(--primary-dark);
    background: rgba(var(--primary-rgb), .07);
    font-size: .60rem;
    font-weight: 900;
    white-space: nowrap;
}

/* ---------- Info grids ---------- */
body[data-page="my-attendance-records"] .attendance-info-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
    margin-top: 10px;
}

body[data-page="my-attendance-records"] .attendance-info-grid > div {
    min-width: 0;
    padding: 10px 11px;
    border: 1px solid rgba(var(--primary-rgb), .08);
    border-radius: 10px;
    background: var(--surface-soft);
}

body[data-page="my-attendance-records"] .attendance-info-grid span {
    display: block;
    color: var(--text-muted);
    font-size: .58rem;
}

body[data-page="my-attendance-records"] .attendance-info-grid strong {
    display: block;
    margin-top: 4px;
    color: #3b414d;
    font-size: .68rem;
    overflow-wrap: anywhere;
}

body[data-page="my-attendance-records"] .attendance-history-note {
    margin-top: 9px;
    padding: 9px 10px;
    border-left: 3px solid var(--copper);
    border-radius: 0 9px 9px 0;
    color: #6b6254;
    background: #fffaf1;
    font-size: .63rem;
}

/* ---------- Feedback details ---------- */
body[data-page="my-attendance-records"] .workspace-feedback-details {
    margin-top: 10px;
    overflow: hidden;
    border: 1px solid rgba(var(--primary-rgb), .10);
    border-radius: 11px;
    background: rgba(255,255,255,.82);
}

body[data-page="my-attendance-records"] .workspace-feedback-summary {
    position: relative;
    padding: 10px 12px;
    color: var(--primary-dark);
    background:
        linear-gradient(145deg, rgba(var(--primary-rgb), .05), #fff);
    font-size: .66rem;
    font-weight: 900;
    cursor: pointer;
    list-style: none;
}

body[data-page="my-attendance-records"] .workspace-feedback-summary::after {
    content: "+";
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--copper-dark);
    font-size: .9rem;
}

body[data-page="my-attendance-records"] .workspace-feedback-details[open] .workspace-feedback-summary::after {
    content: "−";
}

body[data-page="my-attendance-records"] .workspace-feedback-details[open] .workspace-feedback-summary {
    border-bottom: 1px solid rgba(var(--primary-rgb), .08);
}

body[data-page="my-attendance-records"] .workspace-feedback-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    padding: 10px;
    margin-top: 0;
}

body[data-page="my-attendance-records"] .workspace-feedback-notes {
    padding: 0 10px 10px;
}

/* ---------- Pagination ---------- */
body[data-page="my-attendance-records"] .attendance-history-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 14px;
    padding-top: 13px;
    border-top: 1px solid rgba(var(--primary-rgb), .08);
}

body[data-page="my-attendance-records"] .attendance-history-pagination a,
body[data-page="my-attendance-records"] .attendance-history-pagination span {
    display: inline-flex;
    min-height: 34px;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    border-radius: 9px;
    font-size: .63rem;
    font-weight: 850;
}

body[data-page="my-attendance-records"] .attendance-history-pagination a {
    border: 1px solid var(--primary);
    color: #fff;
    background: linear-gradient(145deg, var(--primary), var(--primary-dark));
    text-decoration: none;
}

body[data-page="my-attendance-records"] .attendance-history-pagination span {
    color: var(--text-soft);
    background: rgba(var(--primary-rgb), .06);
}

/* ---------- Empty state ---------- */
body[data-page="my-attendance-records"] .empty-state-card {
    margin-top: 12px;
    padding: 20px;
    border: 1px dashed rgba(var(--primary-rgb), .18);
    border-radius: 12px;
    color: var(--text-muted);
    background: rgba(var(--primary-rgb), .025);
    font-size: .68rem;
    text-align: center;
}

/* ---------- Bottom nav ---------- */
body[data-page="my-attendance-records"] .bottom-nav {
    position: fixed;
    z-index: 100;
    left: 50%;
    bottom: 12px;
    display: grid;
    width: min(calc(100% - 24px), 560px);
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    padding: 6px;
    border: 1px solid rgba(var(--primary-rgb), .14);
    border-radius: 16px;
    background: rgba(255,255,255,.92);
    box-shadow:
        0 18px 38px rgba(var(--primary-rgb), .16),
        inset 0 1px 0 #fff;
    backdrop-filter: blur(16px);
    transform: translateX(-50%);
}

body[data-page="my-attendance-records"] .bottom-nav a {
    display: inline-flex;
    min-height: 42px;
    align-items: center;
    justify-content: center;
    padding: 7px 8px;
    border-radius: 11px;
    color: var(--text-soft);
    font-size: .65rem;
    font-weight: 850;
    text-decoration: none;
}

body[data-page="my-attendance-records"] .bottom-nav a.active {
    color: #fff;
    background: linear-gradient(145deg, var(--primary), var(--primary-dark));
    box-shadow:
        0 8px 16px rgba(var(--primary-rgb), .18),
        inset 0 1px 0 rgba(255,255,255,.14);
}

/* ---------- Responsive ---------- */
@media (max-width: 760px) {
    body[data-page="my-attendance-records"] .container.page-with-nav {
        width: min(100% - 16px, 640px);
        padding: 8px 0 90px;
    }

    body[data-page="my-attendance-records"] .attendance-history-premium-hero {
        grid-template-columns: 1fr;
        min-height: 0;
        padding: 20px 16px;
        border-radius: 17px;
    }

    body[data-page="my-attendance-records"] .attendance-history-total-card {
        min-width: 0;
        padding: 11px 12px;
    }

    body[data-page="my-attendance-records"] .attendance-history-total-card strong {
        font-size: 1.35rem;
    }

    body[data-page="my-attendance-records"] .attendance-history-filter-card,
    body[data-page="my-attendance-records"] .attendance-history-record-section {
        margin-top: 10px;
        padding: 13px;
        border-radius: 14px;
    }

    body[data-page="my-attendance-records"] .attendance-history-filter-grid {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    body[data-page="my-attendance-records"] .attendance-history-clear-btn {
        grid-column: 1 / -1;
        width: 100%;
    }

    body[data-page="my-attendance-records"] .attendance-info-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 5px;
    }

    body[data-page="my-attendance-records"] .workspace-feedback-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 430px) {
    body[data-page="my-attendance-records"] .attendance-history-premium-main {
        gap: 11px;
    }

    body[data-page="my-attendance-records"] .attendance-history-back-btn {
        flex-basis: 42px;
        width: 42px;
        height: 42px;
        border-radius: 12px;
    }

    body[data-page="my-attendance-records"] .attendance-history-premium-main h1 {
        font-size: 1.45rem;
    }

    body[data-page="my-attendance-records"] .attendance-history-filter-grid {
        grid-template-columns: 1fr;
    }

    body[data-page="my-attendance-records"] .attendance-history-filter-grid button,
    body[data-page="my-attendance-records"] .attendance-history-clear-btn {
        width: 100%;
    }
}

@media (max-width: 350px) {
    body[data-page="my-attendance-records"] .attendance-info-grid {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    body[data-page="my-attendance-records"] *,
    body[data-page="my-attendance-records"] *::before,
    body[data-page="my-attendance-records"] *::after {
        animation: none !important;
        transition: none !important;
    }
}

/* =========================================================
   PRMS Employee Profile — Premium Forest Gold UI
   Page scope: body[data-page="employee-profile"]
   ========================================================= */

body[data-page="employee-profile"] {
    --page-bg: #f2f3f1;
    --surface: #ffffff;
    --surface-soft: #f8faf8;
    --text: #28302d;
    --text-soft: #68716d;
    --text-muted: #909893;
    --line: #dde3df;

    --primary: #3f5c52;
    --primary-dark: #243a34;
    --primary-rgb: 63, 92, 82;

    --gold: #c49a50;
    --gold-dark: #76541f;
    --gold-soft: #f7f0e4;
    --gold-rgb: 196, 154, 80;

    --sage: #789487;
    --sage-dark: #526b60;
    --sage-rgb: 120, 148, 135;

    --danger: #8a3d4f;
    --danger-dark: #572330;
    --danger-rgb: 138, 61, 79;

    min-height: 100vh;
    margin: 0;
    color: var(--text);
    background:
        radial-gradient(circle at 100% 0%, rgba(var(--primary-rgb), .08), transparent 30rem),
        radial-gradient(circle at 0% 100%, rgba(var(--gold-rgb), .05), transparent 28rem),
        linear-gradient(145deg, #eef1ee, #f8f5ef);
    font-family: Inter, "Segoe UI", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

body[data-page="employee-profile"] *,
body[data-page="employee-profile"] *::before,
body[data-page="employee-profile"] *::after {
    box-sizing: border-box;
}

body[data-page="employee-profile"] a,
body[data-page="employee-profile"] button,
body[data-page="employee-profile"] input,
body[data-page="employee-profile"] select {
    -webkit-tap-highlight-color: transparent;
}

body[data-page="employee-profile"] .container.page-with-nav {
    width: min(100% - 28px, 1120px);
    margin: 0 auto;
    padding: 20px 0 96px;
}

/* ---------- Hero ---------- */
body[data-page="employee-profile"] .employee-premium-hero {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 20px;
    min-height: 220px;
    padding: 28px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 22px;
    color: #fff;
    background:
        radial-gradient(circle at 12% 8%, rgba(255,255,255,.16), transparent 24%),
        radial-gradient(circle at 88% 112%, rgba(255,255,255,.09), transparent 38%),
        linear-gradient(118deg, rgba(255,255,255,.05), transparent 42%),
        linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 58%, var(--gold-dark) 100%);
    box-shadow:
        0 26px 60px rgba(var(--primary-rgb), .27),
        inset 0 1px 0 rgba(255,255,255,.12);
}

body[data-page="employee-profile"] .employee-premium-hero::before {
    content: "EMPLOYEE PROFILE";
    position: absolute;
    z-index: -1;
    left: 24px;
    bottom: 18px;
    color: rgba(255,255,255,.04);
    font-size: clamp(3rem, 6.8vw, 6rem);
    font-weight: 950;
    letter-spacing: -.08em;
    line-height: .8;
}

body[data-page="employee-profile"] .employee-premium-hero::after {
    content: "";
    position: absolute;
    right: -86px;
    top: -104px;
    width: 290px;
    height: 290px;
    border: 42px solid rgba(255,255,255,.035);
    border-radius: 50%;
    box-shadow:
        0 0 0 1px rgba(255,255,255,.05),
        0 0 90px rgba(var(--gold-rgb), .12);
}

body[data-page="employee-profile"] .employee-premium-hero-main {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 18px;
    min-width: 0;
}

body[data-page="employee-profile"] .employee-premium-avatar {
    display: grid;
    flex: 0 0 84px;
    width: 84px;
    height: 84px;
    place-items: center;
    overflow: hidden;
    border: 2px solid rgba(255,255,255,.26);
    border-radius: 24px;
    color: rgba(255,255,255,.8);
    background:
        linear-gradient(145deg, rgba(255,255,255,.18), rgba(255,255,255,.06));
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.16),
        0 16px 30px rgba(var(--primary-rgb), .22);
    font-size: .68rem;
    text-align: center;
}

body[data-page="employee-profile"] .employee-premium-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

body[data-page="employee-profile"] .employee-premium-title {
    min-width: 0;
}

body[data-page="employee-profile"] .page-subtitle {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 28px;
    margin: 0 0 9px;
    padding: 4px 10px;
    border: 1px solid rgba(236,214,165,.24);
    border-radius: 999px;
    color: #ffedc8;
    background: rgba(236,214,165,.10);
    font-size: .62rem;
    font-weight: 900;
    letter-spacing: .10em;
    text-transform: uppercase;
}

body[data-page="employee-profile"] .page-subtitle::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #efd7aa;
    box-shadow: 0 0 0 4px rgba(239,215,170,.12);
}

body[data-page="employee-profile"] .employee-premium-title h1 {
    margin: 0;
    color: #fff;
    font-size: clamp(1.85rem, 3vw, 2.55rem);
    font-weight: 950;
    line-height: 1.15;
    letter-spacing: -.034em;
}

body[data-page="employee-profile"] .employee-premium-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 10px;
    color: rgba(255,255,255,.72);
    font-size: .69rem;
}

body[data-page="employee-profile"] .employee-premium-hero-actions {
    position: relative;
    z-index: 2;
}

body[data-page="employee-profile"] .employee-premium-back-btn {
    display: inline-flex;
    min-height: 42px;
    align-items: center;
    justify-content: center;
    padding: 8px 14px;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 11px;
    color: #fff;
    background:
        linear-gradient(145deg, rgba(255,255,255,.16), rgba(255,255,255,.07));
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.12),
        0 10px 22px rgba(var(--primary-rgb), .16);
    font-size: .67rem;
    font-weight: 900;
    text-decoration: none;
}

/* ---------- Alerts ---------- */
body[data-page="employee-profile"] .alert {
    margin-top: 12px;
    padding: 11px 13px;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: #fff;
    box-shadow: 0 7px 16px rgba(40,48,45,.05);
    font-size: .70rem;
}

/* ---------- Main layout ---------- */
body[data-page="employee-profile"] .employee-premium-layout {
    display: grid;
    grid-template-columns: minmax(240px, .36fr) minmax(0, 1fr);
    gap: 14px;
    margin-top: 14px;
}

body[data-page="employee-profile"] .employee-premium-photo-card,
body[data-page="employee-profile"] .employee-premium-form,
body[data-page="employee-profile"] .employee-premium-readonly,
body[data-page="employee-profile"] .employee-premium-gallery-card {
    position: relative;
    overflow: hidden;
    padding: 18px;
    border: 1px solid rgba(var(--primary-rgb), .12);
    border-radius: 17px;
    background:
        radial-gradient(circle at 100% 0%, rgba(var(--primary-rgb), .05), transparent 170px),
        linear-gradient(145deg, #fff, #fafbfa);
    box-shadow:
        0 13px 30px rgba(40,48,45,.065),
        inset 0 1px 0 #fff;
}

body[data-page="employee-profile"] .employee-premium-photo-card::before,
body[data-page="employee-profile"] .employee-premium-form::before,
body[data-page="employee-profile"] .employee-premium-readonly::before,
body[data-page="employee-profile"] .employee-premium-gallery-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 5px;
    background: linear-gradient(180deg, var(--primary), var(--gold));
}

/* ---------- Current photo ---------- */
body[data-page="employee-profile"] .employee-premium-card-title span {
    color: var(--gold-dark);
    font-size: .60rem;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

body[data-page="employee-profile"] .employee-premium-card-title h3 {
    margin: 5px 0 0;
    color: #303a36;
    font-size: 1rem;
}

body[data-page="employee-profile"] .employee-premium-main-photo {
    margin-top: 13px;
    overflow: hidden;
    aspect-ratio: 4 / 5;
    border: 1px solid rgba(var(--primary-rgb), .12);
    border-radius: 15px;
    background: var(--surface-soft);
    box-shadow:
        0 10px 24px rgba(var(--primary-rgb), .10),
        inset 0 1px 0 #fff;
}

body[data-page="employee-profile"] .employee-premium-main-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

body[data-page="employee-profile"] .employee-premium-photo-card > p {
    margin: 9px 0 0;
    color: var(--text-muted);
    font-size: .63rem;
    text-align: center;
}

body[data-page="employee-profile"] .employee-premium-empty-photo {
    display: grid;
    min-height: 260px;
    margin-top: 13px;
    place-items: center;
    padding: 18px;
    border: 1px dashed rgba(var(--primary-rgb), .20);
    border-radius: 14px;
    color: var(--text-muted);
    background: rgba(var(--primary-rgb), .03);
    font-size: .68rem;
    text-align: center;
}

/* ---------- Section title ---------- */
body[data-page="employee-profile"] .section-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 11px;
    border-bottom: 1px solid rgba(var(--primary-rgb), .09);
}

body[data-page="employee-profile"] .section-title-row h3 {
    margin: 0;
    color: #303a36;
    font-size: 1rem;
}

body[data-page="employee-profile"] .section-subtitle {
    margin: 4px 0 0;
    color: var(--text-muted);
    font-size: .65rem;
}

body[data-page="employee-profile"] .section-count {
    display: inline-flex;
    min-height: 30px;
    align-items: center;
    padding: 5px 10px;
    border: 1px solid rgba(var(--gold-rgb), .18);
    border-radius: 999px;
    color: var(--gold-dark);
    background: rgba(var(--gold-rgb), .08);
    font-size: .62rem;
    font-weight: 900;
    white-space: nowrap;
}

/* ---------- Form ---------- */
body[data-page="employee-profile"] .employee-premium-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 13px;
}

body[data-page="employee-profile"] .employee-premium-form-grid > div {
    min-width: 0;
}

body[data-page="employee-profile"] .employee-premium-form-grid label {
    display: block;
    margin-bottom: 6px;
    color: #59645f;
    font-size: .64rem;
    font-weight: 850;
}

body[data-page="employee-profile"] input,
body[data-page="employee-profile"] select {
    width: 100%;
    min-width: 0;
    min-height: 44px;
    padding: 9px 11px;
    border: 1px solid #d9dfdb;
    border-radius: 10px;
    color: #35403b;
    background: linear-gradient(180deg, #fff, #fbfcfb);
    font: inherit;
    font-size: .68rem;
    box-shadow:
        inset 0 1px 2px rgba(40,48,45,.035),
        0 3px 8px rgba(40,48,45,.025);
}

body[data-page="employee-profile"] select[multiple] {
    min-height: 172px;
    padding: 7px;
}

body[data-page="employee-profile"] select[multiple] option {
    padding: 8px 9px;
    border-radius: 7px;
}

body[data-page="employee-profile"] input:focus,
body[data-page="employee-profile"] select:focus {
    outline: none;
    border-color: rgba(var(--primary-rgb), .50);
    box-shadow:
        0 0 0 4px rgba(var(--primary-rgb), .08),
        0 8px 18px rgba(var(--primary-rgb), .06);
}

body[data-page="employee-profile"] input[type="file"] {
    padding: 7px;
}

body[data-page="employee-profile"] input[type="file"]::file-selector-button {
    min-height: 30px;
    margin-right: 8px;
    padding: 5px 9px;
    border: 1px solid rgba(var(--primary-rgb), .18);
    border-radius: 8px;
    color: var(--primary-dark);
    background: rgba(var(--primary-rgb), .06);
    font: inherit;
    font-size: .62rem;
    font-weight: 850;
    cursor: pointer;
}

body[data-page="employee-profile"] .form-hint {
    display: block;
    margin-top: 5px;
    color: var(--text-muted);
    font-size: .58rem;
    line-height: 1.45;
}

body[data-page="employee-profile"] .employee-premium-form > button[type="submit"] {
    display: inline-flex;
    width: 100%;
    min-height: 47px;
    align-items: center;
    justify-content: center;
    margin-top: 14px;
    padding: 9px 12px;
    border: 1px solid var(--primary);
    border-radius: 11px;
    color: #fff;
    background:
        linear-gradient(145deg, var(--primary), var(--primary-dark));
    box-shadow:
        0 10px 22px rgba(var(--primary-rgb), .22),
        inset 0 1px 0 rgba(255,255,255,.16);
    font: inherit;
    font-size: .72rem;
    font-weight: 950;
    cursor: pointer;
}

/* ---------- Readonly ---------- */
body[data-page="employee-profile"] .attendance-info-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    margin-top: 12px;
}

body[data-page="employee-profile"] .attendance-info-grid > div {
    min-width: 0;
    padding: 10px 11px;
    border: 1px solid rgba(var(--primary-rgb), .08);
    border-radius: 10px;
    background: var(--surface-soft);
}

body[data-page="employee-profile"] .attendance-info-grid span {
    display: block;
    color: var(--text-muted);
    font-size: .58rem;
}

body[data-page="employee-profile"] .attendance-info-grid strong {
    display: block;
    margin-top: 4px;
    color: #3b4540;
    font-size: .68rem;
    overflow-wrap: anywhere;
}

/* ---------- Gallery ---------- */
body[data-page="employee-profile"] .employee-premium-gallery-card {
    margin-top: 14px;
}

body[data-page="employee-profile"] .employee-premium-photo-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-top: 12px;
}

body[data-page="employee-profile"] .employee-premium-photo-item {
    position: relative;
    overflow: hidden;
    padding: 9px;
    border: 1px solid rgba(var(--primary-rgb), .10);
    border-radius: 13px;
    background: linear-gradient(145deg, #fff, #fafbfa);
    box-shadow: 0 7px 16px rgba(40,48,45,.04);
}

body[data-page="employee-profile"] .employee-premium-photo-item.primary-photo-item {
    border-color: rgba(var(--gold-rgb), .38);
    background:
        radial-gradient(circle at 100% 0%, rgba(var(--gold-rgb), .09), transparent 110px),
        linear-gradient(145deg, #fffaf1, #fff);
}

body[data-page="employee-profile"] .employee-premium-photo-image {
    overflow: hidden;
    aspect-ratio: 4 / 5;
    border-radius: 10px;
    background: var(--surface-soft);
}

body[data-page="employee-profile"] .employee-premium-photo-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

body[data-page="employee-profile"] .employee-premium-photo-info p {
    margin: 7px 0 0;
    color: var(--text-soft);
    font-size: .60rem;
    text-align: center;
}

body[data-page="employee-profile"] .employee-premium-photo-info strong {
    color: var(--gold-dark);
}

body[data-page="employee-profile"] .employee-premium-photo-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    margin-top: 8px;
}

body[data-page="employee-profile"] .employee-premium-photo-actions form {
    margin: 0;
}

body[data-page="employee-profile"] .employee-premium-photo-actions button {
    width: 100%;
    min-height: 34px;
    padding: 5px 7px;
    border: 1px solid var(--primary);
    border-radius: 9px;
    color: #fff;
    background: linear-gradient(145deg, var(--primary), var(--primary-dark));
    font: inherit;
    font-size: .58rem;
    font-weight: 900;
    cursor: pointer;
}

body[data-page="employee-profile"] .employee-premium-photo-actions .danger-btn {
    border-color: var(--danger);
    background: linear-gradient(145deg, var(--danger), var(--danger-dark));
}

/* ---------- Empty state ---------- */
body[data-page="employee-profile"] .empty-state-card {
    margin-top: 12px;
    padding: 20px;
    border: 1px dashed rgba(var(--primary-rgb), .18);
    border-radius: 12px;
    color: var(--text-muted);
    background: rgba(var(--primary-rgb), .025);
    font-size: .68rem;
    text-align: center;
}

/* ---------- Bottom nav ---------- */
body[data-page="employee-profile"] .bottom-nav {
    position: fixed;
    z-index: 100;
    left: 50%;
    bottom: 12px;
    display: grid;
    width: min(calc(100% - 24px), 560px);
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    padding: 6px;
    border: 1px solid rgba(var(--primary-rgb), .14);
    border-radius: 16px;
    background: rgba(255,255,255,.92);
    box-shadow:
        0 18px 38px rgba(var(--primary-rgb), .16),
        inset 0 1px 0 #fff;
    backdrop-filter: blur(16px);
    transform: translateX(-50%);
}

body[data-page="employee-profile"] .bottom-nav a {
    display: inline-flex;
    min-height: 42px;
    align-items: center;
    justify-content: center;
    padding: 7px 8px;
    border-radius: 11px;
    color: var(--text-soft);
    font-size: .65rem;
    font-weight: 850;
    text-decoration: none;
}

body[data-page="employee-profile"] .bottom-nav a.active {
    color: #fff;
    background: linear-gradient(145deg, var(--primary), var(--primary-dark));
    box-shadow:
        0 8px 16px rgba(var(--primary-rgb), .18),
        inset 0 1px 0 rgba(255,255,255,.14);
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
    body[data-page="employee-profile"] .employee-premium-layout {
        grid-template-columns: minmax(220px, .42fr) minmax(0, 1fr);
    }

    body[data-page="employee-profile"] .employee-premium-photo-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    body[data-page="employee-profile"] .container.page-with-nav {
        width: min(100% - 16px, 640px);
        padding: 8px 0 90px;
    }

    body[data-page="employee-profile"] .employee-premium-hero {
        grid-template-columns: 1fr;
        min-height: 0;
        padding: 20px 16px;
        border-radius: 17px;
    }

    body[data-page="employee-profile"] .employee-premium-hero-actions {
        width: 100%;
    }

    body[data-page="employee-profile"] .employee-premium-back-btn {
        width: 100%;
    }

    body[data-page="employee-profile"] .employee-premium-layout {
        grid-template-columns: 1fr;
        gap: 10px;
        margin-top: 10px;
    }

    body[data-page="employee-profile"] .employee-premium-photo-card,
    body[data-page="employee-profile"] .employee-premium-form,
    body[data-page="employee-profile"] .employee-premium-readonly,
    body[data-page="employee-profile"] .employee-premium-gallery-card {
        padding: 13px;
        border-radius: 14px;
    }

    body[data-page="employee-profile"] .employee-premium-main-photo {
        max-width: 320px;
        margin-inline: auto;
    }

    body[data-page="employee-profile"] .employee-premium-photo-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 430px) {
    body[data-page="employee-profile"] .employee-premium-hero-main {
        gap: 12px;
    }

    body[data-page="employee-profile"] .employee-premium-avatar {
        flex-basis: 62px;
        width: 62px;
        height: 62px;
        border-radius: 18px;
    }

    body[data-page="employee-profile"] .employee-premium-title h1 {
        font-size: 1.42rem;
    }

    body[data-page="employee-profile"] .employee-premium-form-grid {
        grid-template-columns: 1fr;
    }

    body[data-page="employee-profile"] .employee-premium-photo-actions {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 340px) {
    body[data-page="employee-profile"] .employee-premium-photo-grid {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    body[data-page="employee-profile"] *,
    body[data-page="employee-profile"] *::before,
    body[data-page="employee-profile"] *::after {
        animation: none !important;
        transition: none !important;
    }
}

/* =========================================================
   Mobile Compact Refinement
   Reduce vertical space without losing hierarchy
   ========================================================= */

@media (max-width: 760px) {
    body[data-page="employee-profile"] .container.page-with-nav {
        width: min(100% - 12px, 640px);
        padding: 6px 0 82px;
    }

    body[data-page="employee-profile"] .employee-premium-hero {
        gap: 10px;
        padding: 15px 13px;
        border-radius: 15px;
    }

    body[data-page="employee-profile"] .employee-premium-hero-main {
        gap: 10px;
    }

    body[data-page="employee-profile"] .employee-premium-avatar {
        flex-basis: 56px;
        width: 56px;
        height: 56px;
        border-radius: 16px;
    }

    body[data-page="employee-profile"] .page-subtitle {
        min-height: 24px;
        margin-bottom: 5px;
        padding: 3px 8px;
        font-size: .56rem;
    }

    body[data-page="employee-profile"] .employee-premium-title h1 {
        font-size: 1.28rem;
    }

    body[data-page="employee-profile"] .employee-premium-meta {
        margin-top: 6px;
        font-size: .62rem;
    }

    body[data-page="employee-profile"] .employee-premium-back-btn {
        min-height: 36px;
        padding: 6px 10px;
        border-radius: 9px;
        font-size: .62rem;
    }

    body[data-page="employee-profile"] .employee-premium-layout {
        gap: 8px;
        margin-top: 8px;
    }

    body[data-page="employee-profile"] .employee-premium-photo-card,
    body[data-page="employee-profile"] .employee-premium-form,
    body[data-page="employee-profile"] .employee-premium-readonly,
    body[data-page="employee-profile"] .employee-premium-gallery-card {
        padding: 11px;
        border-radius: 12px;
    }

    body[data-page="employee-profile"] .employee-premium-card-title h3,
    body[data-page="employee-profile"] .section-title-row h3 {
        font-size: .88rem;
    }

    body[data-page="employee-profile"] .section-subtitle {
        font-size: .60rem;
    }

    body[data-page="employee-profile"] .employee-premium-main-photo {
        max-width: 240px;
        margin-top: 9px;
    }

    body[data-page="employee-profile"] .employee-premium-empty-photo {
        min-height: 170px;
        margin-top: 9px;
        padding: 12px;
    }

    body[data-page="employee-profile"] .employee-premium-photo-card > p {
        margin-top: 6px;
    }

    body[data-page="employee-profile"] .section-title-row {
        padding-bottom: 8px;
    }

    body[data-page="employee-profile"] .employee-premium-form-grid {
        gap: 8px;
        margin-top: 10px;
    }

    body[data-page="employee-profile"] input,
    body[data-page="employee-profile"] select {
        min-height: 40px;
        padding: 8px 9px;
    }

    body[data-page="employee-profile"] select[multiple] {
        min-height: 138px;
    }

    body[data-page="employee-profile"] .employee-premium-form > button[type="submit"] {
        min-height: 42px;
        margin-top: 10px;
    }

    body[data-page="employee-profile"] .employee-premium-gallery-card {
        margin-top: 8px;
    }

    body[data-page="employee-profile"] .employee-premium-photo-grid {
        gap: 7px;
        margin-top: 9px;
    }

    body[data-page="employee-profile"] .employee-premium-photo-item {
        padding: 7px;
        border-radius: 11px;
    }

    body[data-page="employee-profile"] .employee-premium-photo-actions {
        gap: 5px;
        margin-top: 6px;
    }

    body[data-page="employee-profile"] .employee-premium-photo-actions button {
        min-height: 30px;
        padding: 4px 5px;
        font-size: .54rem;
    }

    body[data-page="employee-profile"] .bottom-nav {
        bottom: 7px;
        width: calc(100% - 16px);
        padding: 4px;
        border-radius: 13px;
    }

    body[data-page="employee-profile"] .bottom-nav a {
        min-height: 36px;
        padding: 5px 6px;
        font-size: .60rem;
    }
}

@media (max-width: 430px) {
    body[data-page="employee-profile"] .employee-premium-form-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body[data-page="employee-profile"] .employee-premium-form-grid > div:nth-last-child(-n + 2),
    body[data-page="employee-profile"] .employee-premium-form-grid > .form-group {
        grid-column: 1 / -1;
    }

    body[data-page="employee-profile"] .employee-premium-photo-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 350px) {
    body[data-page="employee-profile"] .employee-premium-form-grid {
        grid-template-columns: 1fr;
    }

    body[data-page="employee-profile"] .employee-premium-form-grid > div,
    body[data-page="employee-profile"] .employee-premium-form-grid > .form-group {
        grid-column: auto;
    }
}

/* =========================================================
   Workspace Role Logo — Larger Size Override
   Only affects body[data-page="workspace"]
   ========================================================= */

body[data-page="workspace"] .workspace-premium-icon {
    flex: 0 0 78px;
    width: 78px;
    height: 78px;
    border-radius: 22px;
}

body[data-page="workspace"] .workspace-premium-icon::before {
    inset: 3px;
    border-radius: 18px;
    background-size: contain;
}

body[data-page="workspace"] .workspace-premium-icon::after {
    right: 6px;
    bottom: 6px;
    width: 8px;
    height: 8px;
}

@media (max-width: 1024px) {
    body[data-page="workspace"] .workspace-premium-icon {
        flex-basis: 68px;
        width: 68px;
        height: 68px;
        border-radius: 19px;
    }

    body[data-page="workspace"] .workspace-premium-icon::before {
        inset: 3px;
        border-radius: 16px;
    }
}

@media (max-width: 700px) {
    body[data-page="workspace"] .workspace-premium-icon {
        flex-basis: 56px;
        width: 56px;
        height: 56px;
        border-radius: 16px;
    }

    body[data-page="workspace"] .workspace-premium-icon::before {
        inset: 2px;
        border-radius: 13px;
    }

    body[data-page="workspace"] .workspace-premium-icon::after {
        right: 4px;
        bottom: 4px;
        width: 7px;
        height: 7px;
    }
}

@media (max-width: 390px) {
    body[data-page="workspace"] .workspace-premium-icon {
        flex-basis: 52px;
        width: 52px;
        height: 52px;
        border-radius: 15px;
    }

    body[data-page="workspace"] .workspace-premium-icon::before {
        inset: 2px;
        border-radius: 12px;
    }
}

body[data-page="workspace"].role-promoter {
    --role-logo: url("../img/promoter_profile.png");
}

body[data-page="workspace"].role-business {
    --role-logo: url("../img/business_profile.png");
}

body[data-page="workspace"].role-team-leader {
    --role-logo: url("../img/leader_profile.png");
}

body[data-page="workspace"].role-dj {
    --role-logo: url("../img/dj_profile.png");
}

body[data-page="workspace"].role-manager {
    --role-logo: url("../img/manager_profile.png");
}

body[data-page="workspace"].role-store-manager,
body[data-page="workspace"].role-senior-admin {
    --role-logo: url("../img/store_manager_profile.png");
}

body[data-page="workspace"].role-admin {
    --role-logo: url("../img/admin_profile.png");
}

body[data-page="workspace"] .workspace-premium-icon {
    position: relative;
    display: block;
    flex: 0 0 78px;
    width: 78px;
    height: 78px;
    overflow: hidden;
    border-radius: 22px;
    color: transparent;
    font-size: 0;
    line-height: 0;
}

body[data-page="workspace"] .workspace-premium-icon::before {
    content: "";
    position: absolute;
    inset: 3px;
    border-radius: 18px;
    background-image: var(--role-logo);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

@media (max-width: 700px) {
    body[data-page="workspace"] .workspace-premium-icon {
        flex-basis: 56px;
        width: 56px;
        height: 56px;
        border-radius: 16px;
    }

    body[data-page="workspace"] .workspace-premium-icon::before {
        inset: 2px;
        border-radius: 13px;
    }
}

body[data-page="attendance-management"]
.attendance-date-badge {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.2;
    white-space: normal;
}

body[data-page="attendance-management"]
.attendance-date-badge.cross-day {
    color: #854d0e;
    background: #fef3c7;
    border: 1px solid #fde68a;
}

body[data-page="attendance-management"]
.attendance-date-badge.same-day {
    color: #166534;
    background: #dcfce7;
    border: 1px solid #bbf7d0;
}

/* =========================================================
   PRMS Excel 1 Export — Premium Indigo Copper UI
   Page scope: body[data-page="excel1-export"]
   ========================================================= */

body[data-page="excel1-export"] {
    --page-bg: #f2f4f8;
    --surface: #ffffff;
    --surface-soft: #f8fafc;
    --text: #252b37;
    --text-soft: #667084;
    --text-muted: #9299a7;
    --line: #dde2ea;

    --primary: #425277;
    --primary-dark: #26334f;
    --primary-rgb: 66, 82, 119;

    --copper: #b88652;
    --copper-dark: #724d28;
    --copper-soft: #f7eee4;
    --copper-rgb: 184, 134, 82;

    --success: #3b8178;
    --success-dark: #245b55;
    --success-rgb: 59, 129, 120;

    min-height: 100vh;
    margin: 0;
    color: var(--text);
    background:
        radial-gradient(circle at 100% 0%, rgba(var(--primary-rgb), .08), transparent 30rem),
        radial-gradient(circle at 0% 100%, rgba(var(--copper-rgb), .05), transparent 28rem),
        linear-gradient(145deg, #eef1f6, #f8f5f0);
    font-family: Inter, "Segoe UI", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

body[data-page="excel1-export"] *,
body[data-page="excel1-export"] *::before,
body[data-page="excel1-export"] *::after {
    box-sizing: border-box;
}

body[data-page="excel1-export"] a,
body[data-page="excel1-export"] button,
body[data-page="excel1-export"] input {
    -webkit-tap-highlight-color: transparent;
}

body[data-page="excel1-export"] .container.page-with-nav {
    width: min(100% - 28px, 1040px);
    margin: 0 auto;
    padding: 20px 0 96px;
}

/* ---------- Hero ---------- */
body[data-page="excel1-export"] .export-center-hero {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 20px;
    min-height: 220px;
    padding: 28px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 22px;
    color: #fff;
    background:
        radial-gradient(circle at 12% 8%, rgba(255,255,255,.16), transparent 24%),
        radial-gradient(circle at 88% 112%, rgba(255,255,255,.09), transparent 38%),
        linear-gradient(118deg, rgba(255,255,255,.05), transparent 42%),
        linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 60%, var(--copper-dark) 100%);
    box-shadow:
        0 26px 60px rgba(var(--primary-rgb), .27),
        inset 0 1px 0 rgba(255,255,255,.12);
}

body[data-page="excel1-export"] .export-center-hero::before {
    content: "EXCEL 1";
    position: absolute;
    z-index: -1;
    left: 24px;
    bottom: 18px;
    color: rgba(255,255,255,.045);
    font-size: clamp(3.2rem, 7vw, 6.2rem);
    font-weight: 950;
    letter-spacing: -.08em;
    line-height: .8;
}

body[data-page="excel1-export"] .export-center-hero::after {
    content: "";
    position: absolute;
    right: -88px;
    top: -108px;
    width: 300px;
    height: 300px;
    border: 42px solid rgba(255,255,255,.035);
    border-radius: 50%;
    box-shadow:
        0 0 0 1px rgba(255,255,255,.05),
        0 0 90px rgba(var(--copper-rgb), .12);
}

body[data-page="excel1-export"] .page-subtitle {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 28px;
    margin: 0 0 9px;
    padding: 4px 10px;
    border: 1px solid rgba(236,214,165,.24);
    border-radius: 999px;
    color: #ffedc8;
    background: rgba(236,214,165,.10);
    font-size: .62rem;
    font-weight: 900;
    letter-spacing: .10em;
    text-transform: uppercase;
}

body[data-page="excel1-export"] .page-subtitle::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #efd7aa;
    box-shadow: 0 0 0 4px rgba(239,215,170,.12);
}

body[data-page="excel1-export"] .export-center-hero h1 {
    margin: 0;
    color: #fff;
    font-size: clamp(1.85rem, 3vw, 2.55rem);
    font-weight: 950;
    line-height: 1.15;
    letter-spacing: -.034em;
}

body[data-page="excel1-export"] .user-inline {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
    color: rgba(255,255,255,.72);
    font-size: .69rem;
}

body[data-page="excel1-export"] .role-badge {
    display: inline-flex;
    min-height: 24px;
    align-items: center;
    padding: 3px 8px;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 999px;
    color: #fff;
    background: rgba(255,255,255,.10);
    font-size: .58rem;
    font-weight: 900;
}

body[data-page="excel1-export"] .export-center-actions {
    position: relative;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

body[data-page="excel1-export"] .header-action-btn {
    display: inline-flex;
    min-height: 42px;
    align-items: center;
    justify-content: center;
    padding: 8px 14px;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 11px;
    color: #fff;
    background:
        linear-gradient(145deg, rgba(255,255,255,.16), rgba(255,255,255,.07));
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.12),
        0 10px 22px rgba(var(--primary-rgb), .16);
    font-size: .67rem;
    font-weight: 900;
    text-decoration: none;
}

/* ---------- Alerts ---------- */
body[data-page="excel1-export"] .alert {
    margin-top: 12px;
    padding: 11px 13px;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: #fff;
    box-shadow: 0 7px 16px rgba(40,48,59,.05);
    font-size: .70rem;
}

/* ---------- Export grid ---------- */
body[data-page="excel1-export"] .export-center-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-top: 14px;
}

body[data-page="excel1-export"] .export-card {
    position: relative;
    overflow: hidden;
    min-width: 0;
    padding: 18px;
    border: 1px solid rgba(var(--primary-rgb), .12);
    border-radius: 17px;
    background:
        radial-gradient(circle at 100% 0%, rgba(var(--primary-rgb), .05), transparent 170px),
        linear-gradient(145deg, #fff, #fafbfc);
    box-shadow:
        0 13px 30px rgba(40,48,59,.065),
        inset 0 1px 0 #fff;
}

body[data-page="excel1-export"] .export-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 5px;
    background: linear-gradient(180deg, var(--primary), var(--copper));
}

body[data-page="excel1-export"] .export-card-primary {
    background:
        radial-gradient(circle at 100% 0%, rgba(var(--copper-rgb), .09), transparent 180px),
        linear-gradient(145deg, #fffaf3, #fff);
    border-color: rgba(var(--copper-rgb), .20);
}

body[data-page="excel1-export"] .export-card-top {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 11px;
    border-bottom: 1px solid rgba(var(--primary-rgb), .08);
}

body[data-page="excel1-export"] .export-icon {
    display: grid;
    flex: 0 0 46px;
    width: 46px;
    height: 46px;
    place-items: center;
    border: 1px solid rgba(var(--primary-rgb), .14);
    border-radius: 14px;
    color: #fff;
    background: linear-gradient(145deg, var(--primary), var(--primary-dark));
    box-shadow:
        0 8px 18px rgba(var(--primary-rgb), .18),
        inset 0 1px 0 rgba(255,255,255,.14);
    font-size: .88rem;
    font-weight: 950;
}

body[data-page="excel1-export"] .export-card-primary .export-icon {
    background: linear-gradient(145deg, var(--copper), var(--copper-dark));
    border-color: rgba(var(--copper-rgb), .28);
    box-shadow:
        0 8px 18px rgba(var(--copper-rgb), .18),
        inset 0 1px 0 rgba(255,255,255,.14);
}

body[data-page="excel1-export"] .export-card-top h3 {
    margin: 0;
    color: #303846;
    font-size: 1rem;
}

body[data-page="excel1-export"] .export-card-top p {
    margin: 4px 0 0;
    color: var(--text-muted);
    font-size: .64rem;
}

body[data-page="excel1-export"] .export-card-body {
    min-height: 62px;
    padding: 12px 0 4px;
}

body[data-page="excel1-export"] .export-card-body p {
    margin: 0;
    color: var(--text-soft);
    font-size: .67rem;
    line-height: 1.65;
}

/* ---------- Date form ---------- */
body[data-page="excel1-export"] .export-excel-date-form {
    display: grid;
    gap: 8px;
    margin-top: 10px;
}

body[data-page="excel1-export"] .export-excel-date-form label {
    color: #596170;
    font-size: .64rem;
    font-weight: 850;
}

body[data-page="excel1-export"] .export-excel-date-form input[type="date"] {
    width: 100%;
    min-height: 43px;
    padding: 8px 10px;
    border: 1px solid #d9dde4;
    border-radius: 10px;
    color: #363b47;
    background: linear-gradient(180deg, #fff, #fbfcfd);
    font: inherit;
    font-size: .68rem;
    box-shadow:
        inset 0 1px 2px rgba(40,48,59,.035),
        0 3px 8px rgba(40,48,59,.025);
}

body[data-page="excel1-export"] .export-excel-date-form input[type="date"]:focus {
    outline: none;
    border-color: rgba(var(--primary-rgb), .50);
    box-shadow:
        0 0 0 4px rgba(var(--primary-rgb), .08),
        0 8px 18px rgba(var(--primary-rgb), .06);
}

/* ---------- Buttons ---------- */
body[data-page="excel1-export"] .export-card-link {
    display: inline-flex;
    width: 100%;
    min-height: 43px;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
    border: 1px solid var(--primary);
    border-radius: 10px;
    color: #fff;
    background: linear-gradient(145deg, var(--primary), var(--primary-dark));
    box-shadow:
        0 9px 20px rgba(var(--primary-rgb), .18),
        inset 0 1px 0 rgba(255,255,255,.14);
    font: inherit;
    font-size: .66rem;
    font-weight: 950;
    text-decoration: none;
    cursor: pointer;
    transition:
        transform .16s ease,
        box-shadow .16s ease,
        filter .16s ease;
}

body[data-page="excel1-export"] .export-card-primary .export-card-link {
    border-color: var(--copper-dark);
    background: linear-gradient(145deg, var(--copper), var(--copper-dark));
    box-shadow:
        0 9px 20px rgba(var(--copper-rgb), .18),
        inset 0 1px 0 rgba(255,255,255,.14);
}

body[data-page="excel1-export"] .export-card-link:hover {
    transform: translateY(-1px);
    box-shadow:
        0 12px 24px rgba(var(--primary-rgb), .22),
        inset 0 1px 0 rgba(255,255,255,.16);
    filter: brightness(1.03);
}

body[data-page="excel1-export"] .export-card-primary .export-card-link:hover {
    box-shadow:
        0 12px 24px rgba(var(--copper-rgb), .22),
        inset 0 1px 0 rgba(255,255,255,.16);
}

body[data-page="excel1-export"] .export-card-link:active {
    transform: scale(.985);
}

body[data-page="excel1-export"] .export-card-link.disabled {
    border-color: rgba(var(--primary-rgb), .10);
    color: var(--text-muted);
    background: rgba(var(--primary-rgb), .05);
    box-shadow: none;
    cursor: not-allowed;
}

/* ---------- Bottom nav ---------- */
body[data-page="excel1-export"] .bottom-nav {
    position: fixed;
    z-index: 100;
    left: 50%;
    bottom: 12px;
    display: grid;
    width: min(calc(100% - 24px), 560px);
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    padding: 6px;
    border: 1px solid rgba(var(--primary-rgb), .14);
    border-radius: 16px;
    background: rgba(255,255,255,.92);
    box-shadow:
        0 18px 38px rgba(var(--primary-rgb), .16),
        inset 0 1px 0 #fff;
    backdrop-filter: blur(16px);
    transform: translateX(-50%);
}

body[data-page="excel1-export"] .bottom-nav a {
    display: inline-flex;
    min-height: 42px;
    align-items: center;
    justify-content: center;
    padding: 7px 8px;
    border-radius: 11px;
    color: var(--text-soft);
    font-size: .65rem;
    font-weight: 850;
    text-decoration: none;
}

body[data-page="excel1-export"] .bottom-nav a.active {
    color: #fff;
    background: linear-gradient(145deg, var(--primary), var(--primary-dark));
    box-shadow:
        0 8px 16px rgba(var(--primary-rgb), .18),
        inset 0 1px 0 rgba(255,255,255,.14);
}

/* ---------- Responsive ---------- */
@media (max-width: 760px) {
    body[data-page="excel1-export"] .container.page-with-nav {
        width: min(100% - 16px, 640px);
        padding: 8px 0 88px;
    }

    body[data-page="excel1-export"] .export-center-hero {
        grid-template-columns: 1fr;
        min-height: 0;
        gap: 12px;
        padding: 18px 15px;
        border-radius: 16px;
    }

    body[data-page="excel1-export"] .export-center-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
    }

    body[data-page="excel1-export"] .header-action-btn {
        min-height: 37px;
        padding: 6px 9px;
        font-size: .61rem;
    }

    body[data-page="excel1-export"] .export-center-grid {
        grid-template-columns: 1fr;
        gap: 9px;
        margin-top: 9px;
    }

    body[data-page="excel1-export"] .export-card {
        padding: 13px;
        border-radius: 14px;
    }

    body[data-page="excel1-export"] .export-card-body {
        min-height: 0;
        padding-top: 9px;
    }

    body[data-page="excel1-export"] .export-icon {
        flex-basis: 40px;
        width: 40px;
        height: 40px;
        border-radius: 12px;
    }

    body[data-page="excel1-export"] .export-excel-date-form input[type="date"],
    body[data-page="excel1-export"] .export-card-link {
        min-height: 40px;
    }

    body[data-page="excel1-export"] .bottom-nav {
        bottom: 7px;
        width: calc(100% - 16px);
        padding: 4px;
        border-radius: 13px;
    }

    body[data-page="excel1-export"] .bottom-nav a {
        min-height: 36px;
        padding: 5px 6px;
        font-size: .60rem;
    }
}

@media (max-width: 430px) {
    body[data-page="excel1-export"] .export-center-hero h1 {
        font-size: 1.42rem;
    }

    body[data-page="excel1-export"] .page-subtitle {
        min-height: 24px;
        margin-bottom: 6px;
        padding: 3px 8px;
        font-size: .56rem;
    }

    body[data-page="excel1-export"] .export-center-actions {
        grid-template-columns: 1fr;
    }

    body[data-page="excel1-export"] .export-card-top {
        gap: 9px;
    }
}

@media (prefers-reduced-motion: reduce) {
    body[data-page="excel1-export"] *,
    body[data-page="excel1-export"] *::before,
    body[data-page="excel1-export"] *::after {
        animation: none !important;
        transition: none !important;
    }
}

/* =========================
   Excel 2 Copy Summary
   ========================= */

.settlement-copy-card {
    margin-top: 16px;
    padding: 18px;
    border: 1px solid #d9e2ec;
    border-radius: 14px;
    background: #ffffff;
}

.settlement-copy-btn {
    width: auto;
    min-width: 120px;
    padding: 10px 16px;
}

.settlement-copy-textarea {
    width: 100%;
    min-height: 270px;
    margin-top: 14px;
    padding: 16px;
    border: 1px solid #cbd5e1;
    border-radius: 12px;
    background: #f8fafc;
    color: #1e293b;
    font-family:
        Consolas,
        "Courier New",
        monospace;
    font-size: 14px;
    line-height: 1.7;
    resize: vertical;
    box-sizing: border-box;
}

.settlement-copy-textarea:focus {
    outline: 2px solid rgba(30, 64, 175, 0.16);
    border-color: #64748b;
}

@media (max-width: 640px) {
    .settlement-copy-card {
        padding: 14px;
    }

    .settlement-copy-btn {
        width: 100%;
    }

    .settlement-copy-textarea {
        min-height: 310px;
        font-size: 13px;
    }
}

/* =========================================================
   PRMS Status Application — Premium Emerald Rose Override
   Existing global.css remains unchanged.
   Scope: body[data-page="status-application"]
   ========================================================= */

body[data-page="status-application"] {
    --sa-bg: #f3f5f2;
    --sa-surface: #ffffff;
    --sa-surface-soft: #f8faf7;
    --sa-text: #26312d;
    --sa-text-soft: #64716b;
    --sa-text-muted: #8d9892;
    --sa-line: #dce4df;

    --sa-primary: #3f665d;
    --sa-primary-dark: #24453e;
    --sa-primary-rgb: 63, 102, 93;

    --sa-rose: #b67b72;
    --sa-rose-dark: #744d48;
    --sa-rose-soft: #f7ece9;
    --sa-rose-rgb: 182, 123, 114;

    --sa-gold: #b9945f;
    --sa-gold-dark: #755b35;
    --sa-gold-rgb: 185, 148, 95;

    min-height: 100vh;
    margin: 0;
    color: var(--sa-text);
    background:
        radial-gradient(circle at 100% 0%, rgba(var(--sa-primary-rgb), .08), transparent 28rem),
        radial-gradient(circle at 0% 100%, rgba(var(--sa-rose-rgb), .055), transparent 26rem),
        linear-gradient(145deg, #eef2ef, #faf7f4);
    font-family: Inter, "Segoe UI", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

body[data-page="status-application"] *,
body[data-page="status-application"] *::before,
body[data-page="status-application"] *::after {
    box-sizing: border-box;
}

body[data-page="status-application"] .status-page-container {
    width: min(100% - 28px, 900px);
    margin: 0 auto;
    padding: 20px 0 42px;
}

/* ---------- Hero ---------- */
body[data-page="status-application"] .status-hero {
    position: relative;
    overflow: hidden;
    padding: 25px;
    border: 1px solid rgba(255,255,255,.20);
    border-radius: 21px;
    color: #fff;
    background:
        radial-gradient(circle at 12% 10%, rgba(255,255,255,.16), transparent 24%),
        radial-gradient(circle at 88% 112%, rgba(255,255,255,.10), transparent 36%),
        linear-gradient(118deg, rgba(255,255,255,.05), transparent 42%),
        linear-gradient(135deg, var(--sa-primary-dark) 0%, var(--sa-primary) 62%, var(--sa-rose-dark) 100%);
    box-shadow:
        0 24px 52px rgba(var(--sa-primary-rgb), .25),
        inset 0 1px 0 rgba(255,255,255,.13);
}

body[data-page="status-application"] .status-hero::before {
    content: "STATUS";
    position: absolute;
    left: 22px;
    bottom: 12px;
    color: rgba(255,255,255,.045);
    font-size: clamp(3rem, 7vw, 5.4rem);
    font-weight: 950;
    letter-spacing: -.08em;
    line-height: .85;
}

body[data-page="status-application"] .status-hero::after {
    content: "";
    position: absolute;
    right: -75px;
    top: -95px;
    width: 245px;
    height: 245px;
    border: 34px solid rgba(255,255,255,.035);
    border-radius: 50%;
}

body[data-page="status-application"] .status-header-top {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 15px;
}

body[data-page="status-application"] .page-subtitle {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 27px;
    margin: 0 0 7px;
    padding: 4px 9px;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 999px;
    color: #f7e6d0;
    background: rgba(255,255,255,.09);
    font-size: .60rem;
    font-weight: 900;
    letter-spacing: .10em;
    text-transform: uppercase;
}

body[data-page="status-application"] .page-subtitle::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #e7c89f;
    box-shadow: 0 0 0 4px rgba(231,200,159,.12);
}

body[data-page="status-application"] .status-hero h1 {
    margin: 0;
    color: #fff;
    font-size: clamp(1.65rem, 3vw, 2.25rem);
    line-height: 1.15;
    letter-spacing: -.03em;
}

body[data-page="status-application"] .status-page-desc {
    position: relative;
    z-index: 1;
    max-width: 680px;
    margin: 11px 0 0;
    color: rgba(255,255,255,.72);
    font-size: .72rem;
    line-height: 1.65;
}

body[data-page="status-application"] .status-back-button {
    display: inline-flex;
    min-height: 40px;
    align-items: center;
    justify-content: center;
    padding: 7px 13px;
    border: 1px solid rgba(255,255,255,.17);
    border-radius: 10px;
    color: #fff;
    background: linear-gradient(145deg, rgba(255,255,255,.17), rgba(255,255,255,.07));
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.12),
        0 8px 18px rgba(36,69,62,.14);
    font-size: .64rem;
    font-weight: 900;
    text-decoration: none;
}

/* ---------- Summary ---------- */
body[data-page="status-application"] .status-summary-panel {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 11px;
    margin-top: 13px;
}

body[data-page="status-application"] .status-user-card,
body[data-page="status-application"] .status-current-card {
    position: relative;
    overflow: hidden;
    min-width: 0;
    padding: 15px;
    border: 1px solid rgba(var(--sa-primary-rgb), .13);
    border-radius: 15px;
    background:
        radial-gradient(circle at 100% 0%, rgba(var(--sa-primary-rgb), .06), transparent 130px),
        linear-gradient(145deg, #fff, #fafcfb);
    box-shadow:
        0 9px 22px rgba(44,62,55,.055),
        inset 0 1px 0 #fff;
}

body[data-page="status-application"] .status-user-card::before,
body[data-page="status-application"] .status-current-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: linear-gradient(180deg, var(--sa-primary), var(--sa-gold));
}

body[data-page="status-application"] .status-current-card {
    border-color: rgba(var(--sa-rose-rgb), .18);
    background:
        radial-gradient(circle at 100% 0%, rgba(var(--sa-rose-rgb), .08), transparent 130px),
        linear-gradient(145deg, #fffaf9, #fff);
}

body[data-page="status-application"] .status-current-card::before {
    background: linear-gradient(180deg, var(--sa-rose), var(--sa-gold));
}

body[data-page="status-application"] .summary-label {
    display: block;
    color: var(--sa-text-muted);
    font-size: .61rem;
    font-weight: 850;
    letter-spacing: .03em;
}

body[data-page="status-application"] .status-summary-panel strong {
    display: block;
    margin-top: 5px;
    color: var(--sa-text);
    font-size: .94rem;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

/* ---------- Alerts ---------- */
body[data-page="status-application"] .alert {
    margin-top: 11px;
    padding: 10px 12px;
    border: 1px solid var(--sa-line);
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 6px 14px rgba(44,62,55,.045);
    font-size: .68rem;
}

/* ---------- Form card ---------- */
body[data-page="status-application"] .status-form-card {
    position: relative;
    overflow: hidden;
    margin-top: 13px;
    padding: 17px;
    border: 1px solid rgba(var(--sa-primary-rgb), .14);
    border-radius: 17px;
    background:
        radial-gradient(circle at 100% 0%, rgba(var(--sa-primary-rgb), .065), transparent 180px),
        linear-gradient(145deg, #fff, #fbfcfb);
    box-shadow:
        0 12px 28px rgba(44,62,55,.065),
        inset 0 1px 0 #fff;
}

body[data-page="status-application"] .status-form-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 5px;
    background: linear-gradient(180deg, var(--sa-primary), var(--sa-rose));
}

body[data-page="status-application"] .section-title-row {
    margin-bottom: 11px;
    padding: 10px 11px;
    border: 1px solid rgba(var(--sa-primary-rgb), .10);
    border-radius: 11px;
    background:
        linear-gradient(145deg, rgba(255,255,255,.98), rgba(var(--sa-primary-rgb), .045));
}

body[data-page="status-application"] .section-title-row h3 {
    margin: 0;
    color: var(--sa-primary-dark);
    font-size: .92rem;
}

body[data-page="status-application"] .status-application-form {
    display: grid;
    gap: 8px;
    padding: 13px;
    border: 1px solid rgba(var(--sa-primary-rgb), .09);
    border-radius: 13px;
    background: rgba(255,255,255,.82);
}

body[data-page="status-application"] label {
    display: block;
    color: #53615b;
    font-size: .64rem;
    font-weight: 850;
}

body[data-page="status-application"] select,
body[data-page="status-application"] input,
body[data-page="status-application"] textarea {
    width: 100%;
    min-height: 42px;
    padding: 8px 10px;
    border: 1px solid #d7dfda;
    border-radius: 10px;
    color: #33413b;
    background: linear-gradient(180deg, #fff, #fbfcfb);
    font: inherit;
    font-size: .68rem;
    box-shadow:
        inset 0 1px 2px rgba(44,62,55,.03),
        0 3px 8px rgba(44,62,55,.025);
}

body[data-page="status-application"] textarea {
    min-height: 104px;
    resize: vertical;
    line-height: 1.55;
}

body[data-page="status-application"] select:focus,
body[data-page="status-application"] input:focus,
body[data-page="status-application"] textarea:focus {
    outline: none;
    border-color: rgba(var(--sa-primary-rgb), .52);
    box-shadow:
        0 0 0 4px rgba(var(--sa-primary-rgb), .085),
        0 8px 18px rgba(var(--sa-primary-rgb), .055);
}

/* ---------- Newly added extra status fields ---------- */
body[data-page="status-application"] #extra-status-fields {
    margin-top: 3px;
    padding: 12px;
    border: 1px solid rgba(var(--sa-rose-rgb), .18);
    border-radius: 12px;
    background:
        radial-gradient(circle at 100% 0%, rgba(var(--sa-rose-rgb), .07), transparent 150px),
        linear-gradient(145deg, #fffaf9, #fff);
    box-shadow: inset 0 1px 0 #fff;
}

body[data-page="status-application"] .status-extra-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
}

body[data-page="status-application"] .status-reason-field {
    grid-column: 1 / -1;
}

body[data-page="status-application"] #extra-status-fields label {
    color: var(--sa-rose-dark);
}

body[data-page="status-application"] #extra-status-fields input,
body[data-page="status-application"] #extra-status-fields textarea {
    border-color: rgba(var(--sa-rose-rgb), .24);
    background: linear-gradient(180deg, #fff, #fffaf9);
}

body[data-page="status-application"] #extra-status-fields input:focus,
body[data-page="status-application"] #extra-status-fields textarea:focus {
    border-color: rgba(var(--sa-rose-rgb), .58);
    box-shadow:
        0 0 0 4px rgba(var(--sa-rose-rgb), .09),
        0 8px 18px rgba(var(--sa-rose-rgb), .05);
}

/* ---------- Submit button ---------- */
body[data-page="status-application"] .status-application-form > button[type="submit"] {
    display: inline-flex;
    width: 100%;
    min-height: 43px;
    align-items: center;
    justify-content: center;
    margin-top: 4px;
    padding: 8px 13px;
    border: 1px solid var(--sa-primary-dark);
    border-radius: 10px;
    color: #fff;
    background: linear-gradient(145deg, var(--sa-primary), var(--sa-primary-dark));
    box-shadow:
        0 9px 20px rgba(var(--sa-primary-rgb), .21),
        inset 0 1px 0 rgba(255,255,255,.15);
    font: inherit;
    font-size: .67rem;
    font-weight: 950;
    cursor: pointer;
    transition:
        transform .16s ease,
        box-shadow .16s ease,
        filter .16s ease;
}

body[data-page="status-application"] .status-application-form > button[type="submit"]:hover {
    transform: translateY(-1px);
    filter: brightness(1.04);
    box-shadow:
        0 12px 24px rgba(var(--sa-primary-rgb), .25),
        inset 0 1px 0 rgba(255,255,255,.17);
}

body[data-page="status-application"] .status-application-form > button[type="submit"]:active {
    transform: scale(.985);
}

/* ---------- Mobile ---------- */
@media (max-width: 700px) {
    body[data-page="status-application"] .status-page-container {
        width: min(100% - 14px, 640px);
        padding: 7px 0 22px;
    }

    body[data-page="status-application"] .status-hero {
        padding: 17px 14px;
        border-radius: 16px;
    }

    body[data-page="status-application"] .status-header-top {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 10px;
    }

    body[data-page="status-application"] .status-back-button {
        min-height: 35px;
        padding: 6px 9px;
        font-size: .59rem;
    }

    body[data-page="status-application"] .status-hero h1 {
        font-size: 1.36rem;
    }

    body[data-page="status-application"] .status-page-desc {
        margin-top: 8px;
        font-size: .66rem;
    }

    body[data-page="status-application"] .status-summary-panel {
        gap: 8px;
        margin-top: 9px;
    }

    body[data-page="status-application"] .status-user-card,
    body[data-page="status-application"] .status-current-card {
        padding: 11px;
        border-radius: 12px;
    }

    body[data-page="status-application"] .status-form-card {
        margin-top: 9px;
        padding: 11px;
        border-radius: 14px;
    }

    body[data-page="status-application"] .section-title-row {
        margin-bottom: 8px;
        padding: 8px 9px;
    }

    body[data-page="status-application"] .status-application-form {
        gap: 7px;
        padding: 10px;
    }

    body[data-page="status-application"] select,
    body[data-page="status-application"] input {
        min-height: 39px;
    }

    body[data-page="status-application"] textarea {
        min-height: 88px;
    }

    body[data-page="status-application"] #extra-status-fields {
        padding: 9px;
    }

    body[data-page="status-application"] .status-extra-grid {
        gap: 7px;
    }

    body[data-page="status-application"] .status-application-form > button[type="submit"] {
        min-height: 40px;
    }
}

@media (max-width: 430px) {
    body[data-page="status-application"] .status-summary-panel,
    body[data-page="status-application"] .status-extra-grid {
        grid-template-columns: 1fr;
    }

    body[data-page="status-application"] .status-reason-field {
        grid-column: auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    body[data-page="status-application"] *,
    body[data-page="status-application"] *::before,
    body[data-page="status-application"] *::after {
        animation: none !important;
        transition: none !important;
    }
}

/* =========================================================
   Notifications Bottom Navigation Fix
   Scope: body[data-page="notifications"]
   ========================================================= */

body[data-page="notifications"] .bottom-nav {
    position: fixed;
    z-index: 1000;
    left: 50%;
    bottom: max(10px, env(safe-area-inset-bottom));
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: min(calc(100% - 24px), 460px);
    padding: 5px;
    border: 1px solid rgba(var(--role-color-rgb, 51, 65, 85), .16);
    border-radius: 15px;
    background: rgba(255, 255, 255, .94);
    box-shadow:
        0 16px 36px rgba(15, 23, 42, .16),
        inset 0 1px 0 rgba(255,255,255,.95);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    transform: translateX(-50%);
}

body[data-page="notifications"] .bottom-nav a {
    display: flex;
    min-width: 0;
    min-height: 39px;
    align-items: center;
    justify-content: center;
    padding: 6px 9px;
    border-radius: 10px;
    color: #637083;
    background: transparent;
    font-size: .71rem;
    font-weight: 850;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    transition:
        color .17s ease,
        background .17s ease,
        transform .17s ease,
        box-shadow .17s ease;
    -webkit-tap-highlight-color: transparent;
}

body[data-page="notifications"] .bottom-nav a:hover {
    color: var(--role-color-dark, #1e293b);
    background: rgba(var(--role-color-rgb, 51, 65, 85), .07);
}

body[data-page="notifications"] .bottom-nav a.active {
    color: #fff;
    background:
        linear-gradient(
            145deg,
            var(--role-color, #334155),
            var(--role-color-dark, #1e293b)
        );
    box-shadow:
        0 7px 16px rgba(var(--role-color-rgb, 51, 65, 85), .23),
        inset 0 1px 0 rgba(255,255,255,.16);
}

body[data-page="notifications"] .bottom-nav a:active {
    transform: scale(.98);
}

body[data-page="notifications"] .bottom-nav a:focus-visible {
    outline: 3px solid rgba(var(--role-color-rgb, 51, 65, 85), .20);
    outline-offset: 2px;
}

/* Keep page content visible above fixed navigation */
body[data-page="notifications"] .container.page-with-nav {
    padding-bottom: 94px;
}

/* ---------- Mobile ---------- */
@media (max-width: 700px) {
    body[data-page="notifications"] .bottom-nav {
        bottom: max(7px, env(safe-area-inset-bottom));
        width: calc(100% - 18px);
        max-width: 430px;
        padding: 4px;
        border-radius: 14px;
    }

    body[data-page="notifications"] .bottom-nav a {
        min-height: 36px;
        padding: 5px 6px;
        border-radius: 9px;
        font-size: .67rem;
    }

    body[data-page="notifications"] .container.page-with-nav {
        padding-bottom: 84px;
    }
}

@media (max-width: 360px) {
    body[data-page="notifications"] .bottom-nav {
        width: calc(100% - 12px);
    }

    body[data-page="notifications"] .bottom-nav a {
        padding-inline: 4px;
        font-size: .62rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    body[data-page="notifications"] .bottom-nav a {
        transition: none !important;
    }
}
/* =========================================================
   Workspace Small Screen — Keep Function Cards 2 Per Row
   Scope: body[data-page="workspace"]
   Place after global.css
   ========================================================= */

@media (max-width: 700px) {
    body[data-page="workspace"]
    .workspace-premium-section
    .workspace-premium-card-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 7px !important;
    }

    body[data-page="workspace"]
    .workspace-premium-section
    .workspace-premium-action-card {
        min-width: 0;
        min-height: 132px;
        padding: 10px;
    }

    body[data-page="workspace"]
    .workspace-premium-section
    .workspace-premium-action-content {
        min-width: 0;
    }

    body[data-page="workspace"]
    .workspace-premium-section
    .workspace-premium-action-content h3,
    body[data-page="workspace"]
    .workspace-premium-section
    .workspace-premium-action-content p,
    body[data-page="workspace"]
    .workspace-premium-section
    .workspace-card-link {
        overflow-wrap: anywhere;
        word-break: break-word;
    }
}

/* Override the existing max-width:390px single-column rule */
@media (max-width: 390px) {
    body[data-page="workspace"]
    .workspace-premium-section
    .workspace-premium-card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 6px !important;
    }

    body[data-page="workspace"]
    .workspace-premium-section
    .workspace-premium-action-card {
        min-height: 124px;
        padding: 9px;
        gap: 6px;
        border-radius: 11px;
    }

    body[data-page="workspace"]
    .workspace-premium-section
    .workspace-premium-action-icon {
        width: 30px;
        height: 30px;
        border-radius: 8px;
        font-size: .69rem;
    }

    body[data-page="workspace"]
    .workspace-premium-section
    .workspace-premium-action-content h3 {
        font-size: .70rem;
        line-height: 1.28;
    }

    body[data-page="workspace"]
    .workspace-premium-section
    .workspace-premium-action-content p {
        margin-top: 2px;
        font-size: .59rem;
        line-height: 1.32;
        -webkit-line-clamp: 2;
    }

    body[data-page="workspace"]
    .workspace-premium-section
    .workspace-premium-action-card
    > .workspace-card-link {
        min-height: 28px;
        padding: 4px 5px;
        border-radius: 8px;
        font-size: .59rem;
        line-height: 1.2;
    }
}

/* Very narrow phones still remain two columns, but more compact */
@media (max-width: 340px) {
    body[data-page="workspace"]
    .workspace-premium-section
    .workspace-premium-card-grid {
        gap: 5px !important;
    }

    body[data-page="workspace"]
    .workspace-premium-section {
        padding: 10px !important;
    }

    body[data-page="workspace"]
    .workspace-premium-section
    .workspace-premium-action-card {
        min-height: 118px;
        padding: 8px;
    }

    body[data-page="workspace"]
    .workspace-premium-section
    .workspace-premium-action-content p {
        display: none;
    }
}

/* =========================================================
   Mobile Zoom Prevention
   Prevent tap zoom, double-tap zoom and input focus zoom
   ========================================================= */

html {
    width: 100%;
    min-height: 100%;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    touch-action: manipulation;
}

body {
    width: 100%;
    min-height: 100%;
    touch-action: manipulation;
    overscroll-behavior-x: none;
}

/* Remove mobile tap highlight */
a,
button,
input,
select,
textarea,
summary,
label,
[role="button"] {
    -webkit-tap-highlight-color: transparent;
}

/* Prevent double-tap zoom on interactive elements */
a,
button,
summary,
label,
[role="button"] {
    touch-action: manipulation;
}

/* Prevent iPhone focus zoom */
@media (max-width: 700px) {
    input,
    select,
    textarea {
        font-size: 12px !important;
        line-height: 1.35;
    }
}

/* =========================================================
   Global Flash Messages
   ========================================================= */

.global-flash-container {
    position: fixed;
    top: max(14px, env(safe-area-inset-top));
    left: 50%;
    z-index: 9999;

    width: min(
        calc(100% - 28px),
        560px
    );

    transform: translateX(-50%);

    display: grid;
    gap: 8px;

    pointer-events: none;
}

.global-flash-message {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;

    padding: 11px 13px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 12px;

    background: #ffffff;
    box-shadow:
        0 8px 28px
        rgba(15, 23, 42, 0.12);

    font-size: 14px;
    line-height: 1.45;

    pointer-events: auto;
}

.global-flash-message.flash-success {
    border-left: 4px solid #15803d;
}

.global-flash-message.flash-danger {
    border-left: 4px solid #b91c1c;
}

.global-flash-message.flash-warning {
    border-left: 4px solid #b45309;
}

.global-flash-message.flash-info {
    border-left: 4px solid #0369a1;
}

.global-flash-text {
    min-width: 0;
    overflow-wrap: anywhere;
}

.global-flash-close {
    flex: 0 0 auto;

    width: 26px;
    height: 26px;
    padding: 0;
    border: 0;
    border-radius: 8px;

    background: transparent;
    color: inherit;

    font-size: 20px;
    line-height: 1;

    cursor: pointer;
}

.global-flash-close:hover {
    background: rgba(0, 0, 0, 0.06);
}

/* =========================================================
   PRMS Employee Login Records — Premium Teal Violet Override
   Existing global.css remains unchanged.
   Scope: body[data-page="employee-login-records"]
   ========================================================= */

body[data-page="employee-login-records"] {
    --elr-bg: #f2f5f6;
    --elr-surface: #ffffff;
    --elr-surface-soft: #f8fafb;
    --elr-text: #24323a;
    --elr-text-soft: #64727b;
    --elr-text-muted: #8d989f;
    --elr-line: #dce3e7;
    --elr-primary: #326b73;
    --elr-primary-dark: #1f464c;
    --elr-primary-rgb: 50, 107, 115;
    --elr-violet: #6f5a7b;
    --elr-violet-dark: #493b53;
    --elr-violet-rgb: 111, 90, 123;
    --elr-success: #2f7a68;
    --elr-success-dark: #1f5146;
    --elr-success-rgb: 47, 122, 104;
    --elr-warning: #a6793d;
    --elr-warning-dark: #6e4d24;
    --elr-warning-rgb: 166, 121, 61;
    --elr-danger: #9a4a57;
    --elr-danger-dark: #64313a;
    --elr-danger-rgb: 154, 74, 87;
    min-height: 100vh;
    margin: 0;
    color: var(--elr-text);
    background:
        radial-gradient(circle at 100% 0%, rgba(var(--elr-primary-rgb), .08), transparent 30rem),
        radial-gradient(circle at 0% 100%, rgba(var(--elr-violet-rgb), .05), transparent 28rem),
        linear-gradient(145deg, #edf2f3, #f8f6f8);
    font-family: Inter, "Segoe UI", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

body[data-page="employee-login-records"] *,
body[data-page="employee-login-records"] *::before,
body[data-page="employee-login-records"] *::after { box-sizing: border-box; }

body[data-page="employee-login-records"] a,
body[data-page="employee-login-records"] button,
body[data-page="employee-login-records"] input,
body[data-page="employee-login-records"] select {
    -webkit-tap-highlight-color: transparent;
}

body[data-page="employee-login-records"] .container.page-with-nav {
    width: min(100% - 28px, 1180px);
    margin: 0 auto;
    padding: 20px 0 94px;
}

body[data-page="employee-login-records"] .employee-login-hero {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 20px;
    min-height: 190px;
    padding: 26px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.20);
    border-radius: 21px;
    color: #fff;
    background:
        radial-gradient(circle at 12% 8%, rgba(255,255,255,.16), transparent 24%),
        radial-gradient(circle at 88% 112%, rgba(255,255,255,.10), transparent 36%),
        linear-gradient(118deg, rgba(255,255,255,.05), transparent 42%),
        linear-gradient(135deg, var(--elr-primary-dark) 0%, var(--elr-primary) 58%, var(--elr-violet-dark) 100%);
    box-shadow: 0 24px 56px rgba(var(--elr-primary-rgb), .24), inset 0 1px 0 rgba(255,255,255,.13);
}

body[data-page="employee-login-records"] .employee-login-hero::before {
    content: "LOGIN";
    position: absolute;
    z-index: -1;
    left: 22px;
    bottom: 14px;
    color: rgba(255,255,255,.045);
    font-size: clamp(3.2rem, 7vw, 6rem);
    font-weight: 950;
    letter-spacing: -.08em;
    line-height: .82;
}

body[data-page="employee-login-records"] .employee-login-hero::after {
    content: "";
    position: absolute;
    right: -82px;
    top: -105px;
    width: 285px;
    height: 285px;
    border: 40px solid rgba(255,255,255,.035);
    border-radius: 50%;
    box-shadow: 0 0 0 1px rgba(255,255,255,.05), 0 0 80px rgba(var(--elr-violet-rgb), .14);
}

body[data-page="employee-login-records"] .page-subtitle {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 27px;
    margin: 0 0 8px;
    padding: 4px 9px;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 999px;
    color: #e7f2f3;
    background: rgba(255,255,255,.09);
    font-size: .61rem;
    font-weight: 900;
    letter-spacing: .10em;
    text-transform: uppercase;
}

body[data-page="employee-login-records"] .page-subtitle::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #b7d8d8;
    box-shadow: 0 0 0 4px rgba(183,216,216,.12);
}

body[data-page="employee-login-records"] .employee-login-hero h1 {
    margin: 0;
    color: #fff;
    font-size: clamp(1.75rem, 3vw, 2.35rem);
    line-height: 1.15;
    letter-spacing: -.03em;
}

body[data-page="employee-login-records"] .employee-login-hero .section-subtitle {
    max-width: 680px;
    margin: 9px 0 0;
    color: rgba(255,255,255,.72);
    font-size: .71rem;
    line-height: 1.6;
}

body[data-page="employee-login-records"] .employee-management-actions {
    position: relative;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

body[data-page="employee-login-records"] .header-action-btn {
    display: inline-flex;
    min-height: 40px;
    align-items: center;
    justify-content: center;
    padding: 7px 13px;
    border: 1px solid rgba(255,255,255,.17);
    border-radius: 10px;
    color: #fff;
    background: linear-gradient(145deg, rgba(255,255,255,.17), rgba(255,255,255,.07));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 8px 18px rgba(var(--elr-primary-rgb), .14);
    font-size: .64rem;
    font-weight: 900;
    text-decoration: none;
}

body[data-page="employee-login-records"] .employee-filter-card,
body[data-page="employee-login-records"] .employee-login-section {
    position: relative;
    overflow: hidden;
    margin-top: 13px;
    padding: 17px;
    border: 1px solid rgba(var(--elr-primary-rgb), .14);
    border-radius: 16px;
    background:
        radial-gradient(circle at 100% 0%, rgba(var(--elr-primary-rgb), .06), transparent 175px),
        linear-gradient(145deg, #fff, #fafcfc);
    box-shadow: 0 12px 28px rgba(36,50,58,.065), inset 0 1px 0 #fff;
}

body[data-page="employee-login-records"] .employee-filter-card::before,
body[data-page="employee-login-records"] .employee-login-section::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 5px;
    background: linear-gradient(180deg, var(--elr-primary), var(--elr-violet));
}

body[data-page="employee-login-records"] .employee-login-filter-form {
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

body[data-page="employee-login-records"] .employee-login-filter-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 9px;
}

body[data-page="employee-login-records"] label {
    display: block;
    margin-bottom: 5px;
    color: #55656d;
    font-size: .63rem;
    font-weight: 850;
}

body[data-page="employee-login-records"] input,
body[data-page="employee-login-records"] select {
    width: 100%;
    min-height: 41px;
    padding: 8px 10px;
    border: 1px solid #d7e0e3;
    border-radius: 10px;
    color: #304047;
    background: linear-gradient(180deg, #fff, #fbfcfc);
    font: inherit;
    font-size: .68rem;
}

body[data-page="employee-login-records"] input:focus,
body[data-page="employee-login-records"] select:focus {
    outline: none;
    border-color: rgba(var(--elr-primary-rgb), .52);
    box-shadow: 0 0 0 4px rgba(var(--elr-primary-rgb), .085), 0 8px 18px rgba(var(--elr-primary-rgb), .055);
}

body[data-page="employee-login-records"] .employee-filter-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 11px;
}

body[data-page="employee-login-records"] .employee-filter-actions button,
body[data-page="employee-login-records"] .employee-filter-actions .header-action-btn {
    min-height: 39px;
    padding: 7px 14px;
    border-radius: 10px;
    font: inherit;
    font-size: .65rem;
    font-weight: 900;
    cursor: pointer;
}

body[data-page="employee-login-records"] .employee-filter-actions button {
    border: 1px solid var(--elr-primary-dark);
    color: #fff;
    background: linear-gradient(145deg, var(--elr-primary), var(--elr-primary-dark));
    box-shadow: 0 8px 18px rgba(var(--elr-primary-rgb), .20), inset 0 1px 0 rgba(255,255,255,.14);
}

body[data-page="employee-login-records"] .employee-filter-actions .header-action-btn {
    color: var(--elr-primary-dark);
    border-color: rgba(var(--elr-primary-rgb), .18);
    background: rgba(var(--elr-primary-rgb), .06);
    box-shadow: none;
}

body[data-page="employee-login-records"] .employee-login-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-top: 13px;
}

body[data-page="employee-login-records"] .dashboard-main-stat {
    position: relative;
    overflow: hidden;
    min-width: 0;
    padding: 15px;
    border: 1px solid rgba(var(--elr-primary-rgb), .13);
    border-radius: 14px;
    background: linear-gradient(145deg, #fff, #fafcfc);
    box-shadow: 0 9px 22px rgba(36,50,58,.055), inset 0 1px 0 #fff;
}

body[data-page="employee-login-records"] .dashboard-main-stat::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    background: linear-gradient(90deg, var(--elr-primary), rgba(var(--elr-primary-rgb), .35));
}

body[data-page="employee-login-records"] .dashboard-main-stat.active-stat::before { background: linear-gradient(90deg, var(--elr-success), #69aa9b); }
body[data-page="employee-login-records"] .dashboard-main-stat.warning-stat::before { background: linear-gradient(90deg, var(--elr-warning), #d0aa6e); }
body[data-page="employee-login-records"] .dashboard-main-stat:last-child::before { background: linear-gradient(90deg, var(--elr-danger), #c7838e); }

body[data-page="employee-login-records"] .dashboard-main-stat span {
    display: block;
    color: var(--elr-text-muted);
    font-size: .62rem;
    font-weight: 850;
}

body[data-page="employee-login-records"] .dashboard-main-stat h2 {
    margin: 6px 0 0;
    color: var(--elr-text);
    font-size: 1.45rem;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

body[data-page="employee-login-records"] .employee-login-section.is-online::before { background: linear-gradient(180deg, var(--elr-success), #69aa9b); }
body[data-page="employee-login-records"] .employee-login-section.is-offline::before { background: linear-gradient(180deg, var(--elr-warning), #d0aa6e); }
body[data-page="employee-login-records"] .employee-login-section.is-disabled::before { background: linear-gradient(180deg, var(--elr-danger), #c7838e); }

body[data-page="employee-login-records"] .section-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 11px;
    padding: 9px 10px;
    border: 1px solid rgba(var(--elr-primary-rgb), .09);
    border-radius: 10px;
    background: linear-gradient(145deg, rgba(255,255,255,.98), rgba(var(--elr-primary-rgb), .04));
}

body[data-page="employee-login-records"] .section-title-row h3 {
    margin: 0;
    color: var(--elr-primary-dark);
    font-size: .91rem;
}

body[data-page="employee-login-records"] .section-count {
    display: inline-flex;
    min-height: 25px;
    align-items: center;
    padding: 3px 8px;
    border: 1px solid rgba(var(--elr-primary-rgb), .14);
    border-radius: 999px;
    color: var(--elr-primary-dark);
    background: rgba(var(--elr-primary-rgb), .06);
    font-size: .61rem;
    font-weight: 900;
}

body[data-page="employee-login-records"] .employee-login-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--elr-line);
    border-radius: 12px;
    background: #fff;
}

body[data-page="employee-login-records"] .employee-login-table {
    width: 100%;
    min-width: 880px;
    border-collapse: collapse;
}

body[data-page="employee-login-records"] .employee-login-table th {
    padding: 10px 11px;
    border-bottom: 1px solid var(--elr-line);
    color: #52636c;
    background: linear-gradient(180deg, #f8fafb, #eef3f4);
    font-size: .62rem;
    font-weight: 900;
    text-align: left;
    white-space: nowrap;
}

body[data-page="employee-login-records"] .employee-login-table td {
    padding: 10px 11px;
    border-bottom: 1px solid #edf1f2;
    color: #39484f;
    font-size: .67rem;
    vertical-align: middle;
}

body[data-page="employee-login-records"] .employee-login-table tbody tr:nth-child(even) { background: #fbfcfc; }
body[data-page="employee-login-records"] .employee-login-table tbody tr:hover { background: rgba(var(--elr-primary-rgb), .045); }
body[data-page="employee-login-records"] .employee-login-table tbody tr:last-child td { border-bottom: 0; }

body[data-page="employee-login-records"] .employee-login-status-badge {
    display: inline-flex;
    min-height: 24px;
    align-items: center;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: .60rem;
    font-weight: 900;
    white-space: nowrap;
}

body[data-page="employee-login-records"] .employee-login-status-badge.online,
body[data-page="employee-login-records"] .employee-login-status-badge.is-online {
    color: var(--elr-success-dark);
    background: rgba(var(--elr-success-rgb), .12);
}

body[data-page="employee-login-records"] .employee-login-status-badge.offline,
body[data-page="employee-login-records"] .employee-login-status-badge.is-offline {
    color: var(--elr-warning-dark);
    background: rgba(var(--elr-warning-rgb), .12);
}

body[data-page="employee-login-records"] .employee-login-status-badge.disabled,
body[data-page="employee-login-records"] .employee-login-status-badge.is-disabled {
    color: var(--elr-danger-dark);
    background: rgba(var(--elr-danger-rgb), .11);
}

body[data-page="employee-login-records"] .empty-state-card {
    display: grid;
    min-height: 88px;
    place-items: center;
    padding: 16px;
    border: 1px dashed var(--elr-line);
    border-radius: 11px;
    color: var(--elr-text-muted);
    background: var(--elr-surface-soft);
    font-size: .70rem;
    text-align: center;
}

body[data-page="employee-login-records"] .pagination-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 13px;
    padding: 9px;
    border: 1px solid rgba(var(--elr-primary-rgb), .12);
    border-radius: 11px;
    background: rgba(255,255,255,.88);
    box-shadow: 0 7px 16px rgba(36,50,58,.05);
}

body[data-page="employee-login-records"] .pagination-bar a {
    display: inline-flex;
    min-height: 32px;
    align-items: center;
    justify-content: center;
    padding: 5px 10px;
    border: 1px solid var(--elr-primary);
    border-radius: 9px;
    color: #fff;
    background: linear-gradient(145deg, var(--elr-primary), var(--elr-primary-dark));
    font-size: .63rem;
    font-weight: 900;
    text-decoration: none;
}

body[data-page="employee-login-records"] .bottom-nav {
    position: fixed;
    z-index: 1000;
    left: 50%;
    bottom: max(9px, env(safe-area-inset-bottom));
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: min(calc(100% - 24px), 460px);
    padding: 5px;
    border: 1px solid rgba(var(--elr-primary-rgb), .14);
    border-radius: 15px;
    background: rgba(255,255,255,.94);
    box-shadow: 0 16px 36px rgba(31,70,76,.15), inset 0 1px 0 rgba(255,255,255,.95);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    transform: translateX(-50%);
}

body[data-page="employee-login-records"] .bottom-nav a {
    display: flex;
    min-width: 0;
    min-height: 38px;
    align-items: center;
    justify-content: center;
    padding: 6px 8px;
    border-radius: 10px;
    color: var(--elr-text-soft);
    font-size: .69rem;
    font-weight: 850;
    text-align: center;
    text-decoration: none;
}

body[data-page="employee-login-records"] .bottom-nav a.active {
    color: #fff;
    background: linear-gradient(145deg, var(--elr-primary), var(--elr-primary-dark));
    box-shadow: 0 7px 16px rgba(var(--elr-primary-rgb), .22), inset 0 1px 0 rgba(255,255,255,.15);
}

@media (max-width: 900px) {
    body[data-page="employee-login-records"] .employee-login-filter-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    body[data-page="employee-login-records"] .employee-login-filter-grid > div:last-child {
        grid-column: 1 / -1;
    }
}

@media (max-width: 700px) {
    body[data-page="employee-login-records"] .container.page-with-nav {
        width: min(100% - 16px, 640px);
        padding: 8px 0 86px;
    }
    body[data-page="employee-login-records"] .employee-login-hero {
        grid-template-columns: 1fr;
        min-height: 0;
        gap: 12px;
        padding: 17px 14px;
        border-radius: 16px;
    }
    body[data-page="employee-login-records"] .employee-login-hero h1 { font-size: 1.42rem; }
    body[data-page="employee-login-records"] .employee-management-actions,
    body[data-page="employee-login-records"] .employee-filter-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
    }
    body[data-page="employee-login-records"] .header-action-btn,
    body[data-page="employee-login-records"] .employee-filter-actions button {
        width: 100%;
        min-height: 37px;
    }
    body[data-page="employee-login-records"] .employee-filter-card,
    body[data-page="employee-login-records"] .employee-login-section {
        margin-top: 9px;
        padding: 11px;
        border-radius: 13px;
    }
    body[data-page="employee-login-records"] .employee-login-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 7px;
        margin-top: 9px;
    }
    body[data-page="employee-login-records"] .dashboard-main-stat {
        padding: 11px;
        border-radius: 12px;
    }
    body[data-page="employee-login-records"] .dashboard-main-stat h2 { font-size: 1.20rem; }
    body[data-page="employee-login-records"] .employee-login-table th,
    body[data-page="employee-login-records"] .employee-login-table td { padding: 8px 9px; }
    body[data-page="employee-login-records"] .bottom-nav {
        bottom: max(7px, env(safe-area-inset-bottom));
        width: calc(100% - 18px);
        max-width: 430px;
        padding: 4px;
        border-radius: 14px;
    }
    body[data-page="employee-login-records"] .bottom-nav a {
        min-height: 36px;
        padding: 5px;
        font-size: .65rem;
    }
}

@media (max-width: 430px) {
    body[data-page="employee-login-records"] .employee-login-filter-grid,
    body[data-page="employee-login-records"] .employee-management-actions,
    body[data-page="employee-login-records"] .employee-filter-actions {
        grid-template-columns: 1fr;
    }
    body[data-page="employee-login-records"] .employee-login-filter-grid > div:last-child {
        grid-column: auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    body[data-page="employee-login-records"] *,
    body[data-page="employee-login-records"] *::before,
    body[data-page="employee-login-records"] *::after {
        animation: none !important;
        transition: none !important;
    }
}

/* =========================================================
   PRMS Membership Fee Management — Premium Peacock Bronze
   Scope: body[data-page="membership-fee-management"]
   Place after global.css
   ========================================================= */

body[data-page="membership-fee-management"] {
    --mfm-bg: #f3f4f1;
    --mfm-surface: #ffffff;
    --mfm-text: #293538;
    --mfm-soft: #6b777a;
    --mfm-muted: #929b9d;
    --mfm-line: #dfe4e1;
    --mfm-primary: #356b70;
    --mfm-primary-dark: #21474b;
    --mfm-primary-rgb: 53, 107, 112;
    --mfm-bronze: #ad7d45;
    --mfm-bronze-dark: #6d4b26;
    --mfm-bronze-rgb: 173, 125, 69;
    --mfm-success: #3b7967;
    --mfm-warning: #a97030;
    --mfm-danger: #9c4c55;

    min-height: 100vh;
    color: var(--mfm-text);
    background:
        radial-gradient(circle at 100% 0%, rgba(var(--mfm-primary-rgb), .08), transparent 30rem),
        radial-gradient(circle at 0% 100%, rgba(var(--mfm-bronze-rgb), .06), transparent 28rem),
        linear-gradient(145deg, #edf2f0, #faf6ef);
}

body[data-page="membership-fee-management"] *,
body[data-page="membership-fee-management"] *::before,
body[data-page="membership-fee-management"] *::after {
    box-sizing: border-box;
}

body[data-page="membership-fee-management"] .container.page-with-nav {
    width: min(100% - 28px, 1180px);
    margin: 0 auto;
    padding: 20px 0 94px;
}

/* Hero */
body[data-page="membership-fee-management"] .workspace-premium-hero {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(230px, .34fr);
    gap: 20px;
    align-items: center;
    min-height: 205px;
    padding: 26px;
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 22px;
    color: #fff;
    background:
        radial-gradient(circle at 12% 8%, rgba(255,255,255,.16), transparent 24%),
        radial-gradient(circle at 88% 112%, rgba(255,255,255,.1), transparent 36%),
        linear-gradient(135deg, var(--mfm-primary-dark), var(--mfm-primary) 58%, var(--mfm-bronze-dark));
    box-shadow:
        0 24px 56px rgba(var(--mfm-primary-rgb), .24),
        inset 0 1px 0 rgba(255,255,255,.13);
}

body[data-page="membership-fee-management"] .workspace-premium-hero::after {
    content: "";
    position: absolute;
    right: -85px;
    top: -105px;
    width: 290px;
    height: 290px;
    border: 40px solid rgba(255,255,255,.035);
    border-radius: 50%;
}

body[data-page="membership-fee-management"] .workspace-premium-hero-main {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 15px;
    min-width: 0;
}

body[data-page="membership-fee-management"] .workspace-premium-icon {
    display: grid;
    flex: 0 0 58px;
    width: 58px;
    height: 58px;
    place-items: center;
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 17px;
    background: linear-gradient(145deg, rgba(255,255,255,.18), rgba(255,255,255,.07));
    box-shadow: 0 12px 26px rgba(22,48,51,.2);
    font-size: 1.05rem;
    font-weight: 950;
}

body[data-page="membership-fee-management"] .page-subtitle {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 27px;
    margin: 0 0 8px;
    padding: 4px 9px;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 999px;
    color: #e9f1ed;
    background: rgba(255,255,255,.09);
    font-size: .6rem;
    font-weight: 900;
    letter-spacing: .1em;
    text-transform: uppercase;
}

body[data-page="membership-fee-management"] .page-subtitle::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #e0c79f;
    box-shadow: 0 0 0 4px rgba(224,199,159,.12);
}

body[data-page="membership-fee-management"] .workspace-premium-hero h1 {
    margin: 0;
    font-size: clamp(1.75rem, 3vw, 2.4rem);
    letter-spacing: -.03em;
}

body[data-page="membership-fee-management"] .workspace-premium-hero-main > div:last-child > p:last-child {
    margin: 9px 0 0;
    color: rgba(255,255,255,.72);
    font-size: .71rem;
}

body[data-page="membership-fee-management"] .workspace-premium-hero-side {
    position: relative;
    z-index: 1;
    padding: 15px;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 15px;
    background: linear-gradient(145deg, rgba(255,255,255,.14), rgba(255,255,255,.06));
    backdrop-filter: blur(10px);
}

body[data-page="membership-fee-management"] .workspace-premium-hero-side > span {
    color: rgba(255,255,255,.62);
    font-size: .62rem;
    font-weight: 850;
}

body[data-page="membership-fee-management"] .workspace-premium-hero-side strong {
    display: block;
    margin-top: 4px;
    font-size: .98rem;
}

body[data-page="membership-fee-management"] .workspace-premium-hero-side p {
    margin: 3px 0 10px;
    color: rgba(255,255,255,.68);
    font-size: .67rem;
}

/* Shared buttons */
body[data-page="membership-fee-management"] button,
body[data-page="membership-fee-management"] .workspace-card-link {
    display: inline-flex;
    min-height: 37px;
    align-items: center;
    justify-content: center;
    padding: 7px 12px;
    border: 1px solid var(--mfm-primary-dark);
    border-radius: 10px;
    color: #fff;
    background: linear-gradient(145deg, var(--mfm-primary), var(--mfm-primary-dark));
    box-shadow:
        0 8px 18px rgba(var(--mfm-primary-rgb), .2),
        inset 0 1px 0 rgba(255,255,255,.14);
    font: inherit;
    font-size: .65rem;
    font-weight: 900;
    text-decoration: none;
    cursor: pointer;
}

body[data-page="membership-fee-management"] .workspace-premium-hero-side .workspace-card-link {
    width: 100%;
    border-color: rgba(255,255,255,.18);
    background: rgba(255,255,255,.12);
}

/* Reminder */
body[data-page="membership-fee-management"] .workspace-premium-reminder-card {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-top: 12px;
    padding: 12px 14px;
    border: 1px solid rgba(var(--mfm-bronze-rgb), .22);
    border-radius: 13px;
    background: linear-gradient(100deg, #fffaf1, #fff 68%);
    box-shadow: 0 8px 20px rgba(var(--mfm-bronze-rgb), .07);
}

body[data-page="membership-fee-management"] .workspace-premium-reminder-icon {
    display: grid;
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    place-items: center;
    border-radius: 9px;
    color: #fff;
    background: linear-gradient(145deg, var(--mfm-bronze), var(--mfm-bronze-dark));
    font-weight: 950;
}

body[data-page="membership-fee-management"] .workspace-premium-reminder-card h3 {
    margin: 0;
    color: var(--mfm-bronze-dark);
    font-size: .82rem;
}

body[data-page="membership-fee-management"] .workspace-premium-reminder-card p {
    margin: 2px 0 0;
    color: #80684a;
    font-size: .69rem;
}

/* Sections */
body[data-page="membership-fee-management"] .workspace-premium-section {
    position: relative;
    overflow: hidden;
    margin-top: 13px;
    padding: 17px;
    border: 1px solid rgba(var(--mfm-primary-rgb), .13);
    border-radius: 16px;
    background:
        radial-gradient(circle at 100% 0%, rgba(var(--mfm-primary-rgb), .05), transparent 185px),
        linear-gradient(145deg, #fff, #fafcfa);
    box-shadow: 0 11px 26px rgba(43,52,54,.06);
}

body[data-page="membership-fee-management"] .workspace-premium-section::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 5px;
    background: linear-gradient(180deg, var(--mfm-primary), var(--mfm-bronze));
}

body[data-page="membership-fee-management"] .section-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 11px;
    padding: 9px 10px;
    border: 1px solid rgba(var(--mfm-primary-rgb), .09);
    border-radius: 10px;
    background: linear-gradient(145deg, #fff, rgba(var(--mfm-primary-rgb), .04));
}

body[data-page="membership-fee-management"] .section-title-row h3 {
    margin: 0;
    color: var(--mfm-primary-dark);
    font-size: .92rem;
}

body[data-page="membership-fee-management"] .section-subtitle {
    margin: 3px 0 0;
    color: var(--mfm-muted);
    font-size: .66rem;
}

body[data-page="membership-fee-management"] .section-count {
    display: inline-flex;
    min-height: 25px;
    align-items: center;
    padding: 3px 8px;
    border: 1px solid rgba(var(--mfm-primary-rgb), .14);
    border-radius: 999px;
    color: var(--mfm-primary-dark);
    background: rgba(var(--mfm-primary-rgb), .06);
    font-size: .61rem;
    font-weight: 900;
}

/* Forms */
body[data-page="membership-fee-management"] .form-box {
    margin: 0;
    padding: 12px;
    border: 1px solid rgba(var(--mfm-primary-rgb), .09);
    border-radius: 12px;
    background: rgba(255,255,255,.78);
}

body[data-page="membership-fee-management"] .settlement-pro-input-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
}

body[data-page="membership-fee-management"] label {
    display: block;
    margin-bottom: 5px;
    color: #596568;
    font-size: .63rem;
    font-weight: 850;
}

body[data-page="membership-fee-management"] input,
body[data-page="membership-fee-management"] select {
    width: 100%;
    min-height: 41px;
    padding: 8px 10px;
    border: 1px solid #d9dfdc;
    border-radius: 10px;
    color: #334043;
    background: linear-gradient(180deg, #fff, #fbfcfa);
    font: inherit;
    font-size: .68rem;
}

body[data-page="membership-fee-management"] input:focus,
body[data-page="membership-fee-management"] select:focus {
    outline: none;
    border-color: rgba(var(--mfm-primary-rgb), .52);
    box-shadow: 0 0 0 4px rgba(var(--mfm-primary-rgb), .085);
}

body[data-page="membership-fee-management"] .workspace-premium-link-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

body[data-page="membership-fee-management"] .workspace-premium-link-row .workspace-card-link {
    color: var(--mfm-primary-dark);
    border-color: rgba(var(--mfm-primary-rgb), .17);
    background: rgba(var(--mfm-primary-rgb), .06);
    box-shadow: none;
}

/* Record cards */
body[data-page="membership-fee-management"] .salary-request-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

body[data-page="membership-fee-management"] .salary-request-card {
    position: relative;
    overflow: hidden;
    min-width: 0;
    padding: 14px;
    border: 1px solid rgba(var(--mfm-primary-rgb), .12);
    border-radius: 14px;
    background: linear-gradient(145deg, #fff, #fafcfa);
    box-shadow: 0 8px 20px rgba(43,52,54,.05);
}

body[data-page="membership-fee-management"] .salary-request-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: linear-gradient(180deg, var(--mfm-primary), var(--mfm-bronze));
}

body[data-page="membership-fee-management"] .salary-request-top {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(var(--mfm-primary-rgb), .08);
}

body[data-page="membership-fee-management"] .salary-request-top h3 {
    margin: 0;
    font-size: .88rem;
}

body[data-page="membership-fee-management"] .salary-request-top p {
    margin: 3px 0 0;
    color: var(--mfm-muted);
    font-size: .64rem;
}

body[data-page="membership-fee-management"] .salary-status-pill {
    display: inline-flex;
    min-height: 24px;
    align-items: center;
    padding: 3px 8px;
    border-radius: 999px;
    color: var(--mfm-primary-dark);
    background: rgba(var(--mfm-primary-rgb), .09);
    font-size: .59rem;
    font-weight: 900;
    white-space: nowrap;
}

body[data-page="membership-fee-management"] .salary-status-pending {
    color: #67333a;
    background: rgba(156,76,85,.11);
}

body[data-page="membership-fee-management"] .salary-amount-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 10px;
    padding: 11px 12px;
    border: 1px solid rgba(var(--mfm-bronze-rgb), .18);
    border-radius: 11px;
    background: linear-gradient(145deg, #fffaf2, #fff);
}

body[data-page="membership-fee-management"] .salary-amount-box span {
    color: #80684a;
    font-size: .63rem;
    font-weight: 850;
}

body[data-page="membership-fee-management"] .salary-amount-box strong {
    color: var(--mfm-bronze-dark);
    font-size: 1.05rem;
}

/* Record details */
body[data-page="membership-fee-management"] .attendance-info-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 7px;
    margin-top: 10px;
}

body[data-page="membership-fee-management"] .attendance-info-grid > div {
    min-width: 0;
    padding: 8px 9px;
    border: 1px solid rgba(var(--mfm-primary-rgb), .07);
    border-radius: 9px;
    background: rgba(var(--mfm-primary-rgb), .035);
}

body[data-page="membership-fee-management"] .attendance-info-grid span {
    display: block;
    color: var(--mfm-muted);
    font-size: .59rem;
}

body[data-page="membership-fee-management"] .attendance-info-grid strong {
    display: block;
    margin-top: 3px;
    font-size: .66rem;
    overflow-wrap: anywhere;
}

body[data-page="membership-fee-management"] .wallet-history-message {
    margin-top: 9px;
    padding: 9px 10px;
    border-left: 3px solid var(--mfm-bronze);
    border-radius: 0 9px 9px 0;
    color: #735d3f;
    background: rgba(var(--mfm-bronze-rgb), .07);
    font-size: .65rem;
}

/* Cash payment */
body[data-page="membership-fee-management"] .workspace-feedback-details {
    margin-top: 9px;
    overflow: hidden;
    border: 1px solid rgba(var(--mfm-primary-rgb), .12);
    border-radius: 10px;
    background: #fbfcfa;
}

body[data-page="membership-fee-management"] .workspace-feedback-summary {
    padding: 9px 10px;
    color: var(--mfm-primary-dark);
    background: linear-gradient(180deg, #fff, rgba(var(--mfm-primary-rgb), .045));
    font-size: .65rem;
    font-weight: 900;
    cursor: pointer;
}

body[data-page="membership-fee-management"] .workspace-feedback-details[open] .workspace-feedback-summary {
    border-bottom: 1px solid rgba(var(--mfm-primary-rgb), .1);
}

body[data-page="membership-fee-management"] .workspace-feedback-details .form-box {
    border: 0;
    border-radius: 0;
    background: #fff;
}

body[data-page="membership-fee-management"] .workspace-feedback-details button {
    width: 100%;
    margin-top: 8px;
    border-color: var(--mfm-bronze-dark);
    background: linear-gradient(145deg, var(--mfm-bronze), var(--mfm-bronze-dark));
}

/* Pagination */
body[data-page="membership-fee-management"] .pagination-bar {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 7px;
    margin-top: 13px;
    padding: 9px;
    border: 1px solid rgba(var(--mfm-primary-rgb), .12);
    border-radius: 11px;
    background: rgba(255,255,255,.88);
}

body[data-page="membership-fee-management"] .pagination-bar a,
body[data-page="membership-fee-management"] .pagination-bar span {
    display: inline-flex;
    min-width: 31px;
    min-height: 31px;
    align-items: center;
    justify-content: center;
    padding: 5px 9px;
    border-radius: 8px;
    font-size: .62rem;
    font-weight: 850;
    text-decoration: none;
}

body[data-page="membership-fee-management"] .pagination-bar a {
    color: var(--mfm-primary-dark);
    border: 1px solid rgba(var(--mfm-primary-rgb), .16);
    background: rgba(var(--mfm-primary-rgb), .05);
}

body[data-page="membership-fee-management"] .pagination-bar a.active {
    color: #fff;
    background: linear-gradient(145deg, var(--mfm-primary), var(--mfm-primary-dark));
}

/* Bottom nav */
body[data-page="membership-fee-management"] .bottom-nav {
    position: fixed;
    z-index: 1000;
    left: 50%;
    bottom: max(9px, env(safe-area-inset-bottom));
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: min(calc(100% - 24px), 460px);
    padding: 5px;
    border: 1px solid rgba(var(--mfm-primary-rgb), .14);
    border-radius: 15px;
    background: rgba(255,255,255,.94);
    box-shadow: 0 16px 36px rgba(33,71,75,.15);
    backdrop-filter: blur(16px);
    transform: translateX(-50%);
}

body[data-page="membership-fee-management"] .bottom-nav a {
    display: flex;
    min-height: 38px;
    align-items: center;
    justify-content: center;
    padding: 6px 8px;
    border-radius: 10px;
    color: var(--mfm-soft);
    font-size: .69rem;
    font-weight: 850;
    text-decoration: none;
}

body[data-page="membership-fee-management"] .bottom-nav a.active {
    color: #fff;
    background: linear-gradient(145deg, var(--mfm-primary), var(--mfm-primary-dark));
    box-shadow: 0 7px 16px rgba(var(--mfm-primary-rgb), .22);
}

@media (max-width: 900px) {
    body[data-page="membership-fee-management"] .salary-request-grid {
        grid-template-columns: 1fr;
    }

    body[data-page="membership-fee-management"] .attendance-info-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    body[data-page="membership-fee-management"] .container.page-with-nav {
        width: min(100% - 16px, 640px);
        padding: 8px 0 86px;
    }

    body[data-page="membership-fee-management"] .workspace-premium-hero {
        grid-template-columns: 1fr;
        min-height: 0;
        gap: 12px;
        padding: 17px 14px;
        border-radius: 16px;
    }

    body[data-page="membership-fee-management"] .workspace-premium-icon {
        flex-basis: 46px;
        width: 46px;
        height: 46px;
        border-radius: 13px;
    }

    body[data-page="membership-fee-management"] .workspace-premium-hero h1 {
        font-size: 1.42rem;
    }

    body[data-page="membership-fee-management"] .workspace-premium-reminder-card,
    body[data-page="membership-fee-management"] .workspace-premium-section {
        margin-top: 9px;
    }

    body[data-page="membership-fee-management"] .workspace-premium-section {
        padding: 11px;
        border-radius: 13px;
    }

    body[data-page="membership-fee-management"] .salary-request-card {
        padding: 11px;
    }

    body[data-page="membership-fee-management"] .bottom-nav {
        bottom: max(7px, env(safe-area-inset-bottom));
        width: calc(100% - 18px);
        max-width: 430px;
        padding: 4px;
    }

    body[data-page="membership-fee-management"] .bottom-nav a {
        min-height: 36px;
        font-size: .65rem;
    }
}

@media (max-width: 430px) {
    body[data-page="membership-fee-management"] .settlement-pro-input-grid {
        grid-template-columns: 1fr;
    }

    body[data-page="membership-fee-management"] .workspace-premium-link-row {
        display: grid;
        grid-template-columns: 1fr;
    }

    body[data-page="membership-fee-management"] .workspace-premium-link-row > * {
        width: 100%;
    }
}

/* =========================================================
   PRMS Admin Reset Password — Premium Wine Violet Override
   Existing global.css remains unchanged.
   Scope: body[data-page="reset-password-admin"]
   ========================================================= */

body[data-page="reset-password-admin"] {
    --rpa-bg: #f5f1f3;
    --rpa-surface: #ffffff;
    --rpa-surface-soft: #fbf8fa;
    --rpa-text: #332c32;
    --rpa-text-soft: #6f6570;
    --rpa-text-muted: #968d95;
    --rpa-line: #e4dce2;

    --rpa-primary: #7b3f57;
    --rpa-primary-dark: #4b2534;
    --rpa-primary-rgb: 123, 63, 87;

    --rpa-violet: #6c5879;
    --rpa-violet-dark: #44364f;
    --rpa-violet-rgb: 108, 88, 121;

    --rpa-gold: #b48b5a;
    --rpa-gold-dark: #74552f;
    --rpa-gold-rgb: 180, 139, 90;

    min-height: 100vh;
    margin: 0;
    color: var(--rpa-text);
    background:
        radial-gradient(circle at 100% 0%, rgba(var(--rpa-primary-rgb), .08), transparent 28rem),
        radial-gradient(circle at 0% 100%, rgba(var(--rpa-gold-rgb), .05), transparent 26rem),
        linear-gradient(145deg, #f0ebef, #faf7f2);
    font-family: Inter, "Segoe UI", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

body[data-page="reset-password-admin"] *,
body[data-page="reset-password-admin"] *::before,
body[data-page="reset-password-admin"] *::after {
    box-sizing: border-box;
}

body[data-page="reset-password-admin"] a,
body[data-page="reset-password-admin"] button,
body[data-page="reset-password-admin"] input {
    -webkit-tap-highlight-color: transparent;
}

body[data-page="reset-password-admin"] .container {
    position: relative;
    isolation: isolate;
    width: min(100% - 28px, 560px);
    margin: 0 auto;
    padding: 34px 0 42px;
}

/* ---------- Main card ---------- */
body[data-page="reset-password-admin"] .container::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 18px 0 0;
    border: 1px solid rgba(var(--rpa-primary-rgb), .14);
    border-radius: 22px;
    background:
        radial-gradient(circle at 100% 0%, rgba(var(--rpa-primary-rgb), .07), transparent 190px),
        linear-gradient(145deg, #fff, #fcf9fb);
    box-shadow:
        0 24px 52px rgba(75,37,52,.10),
        inset 0 1px 0 #fff;
}

body[data-page="reset-password-admin"] .container::after {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 18px auto 0 0;
    width: 6px;
    border-radius: 22px 0 0 22px;
    background: linear-gradient(180deg, var(--rpa-primary), var(--rpa-violet), var(--rpa-gold));
}

/* ---------- Heading ---------- */
body[data-page="reset-password-admin"] h1 {
    position: relative;
    margin: 0;
    padding: 28px 28px 10px;
    color: var(--rpa-primary-dark);
    font-size: clamp(1.55rem, 4vw, 2rem);
    line-height: 1.2;
    letter-spacing: -.03em;
}

body[data-page="reset-password-admin"] h1::before {
    content: "SECURITY";
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    margin-right: 8px;
    padding: 3px 8px;
    border: 1px solid rgba(var(--rpa-primary-rgb), .16);
    border-radius: 999px;
    color: var(--rpa-primary);
    background: rgba(var(--rpa-primary-rgb), .06);
    font-size: .58rem;
    font-weight: 900;
    letter-spacing: .11em;
    vertical-align: .35em;
}

body[data-page="reset-password-admin"] .container > p {
    margin: 0;
    padding: 4px 28px;
    color: var(--rpa-text-soft);
    font-size: .72rem;
    line-height: 1.5;
}

body[data-page="reset-password-admin"] .container > p:nth-of-type(1) {
    padding-top: 3px;
}

body[data-page="reset-password-admin"] .container > p:nth-of-type(2) {
    padding-bottom: 14px;
    color: var(--rpa-violet-dark);
    font-weight: 750;
}

/* ---------- Form ---------- */
body[data-page="reset-password-admin"] .form-box {
    margin: 0 28px;
    padding: 16px;
    border: 1px solid rgba(var(--rpa-primary-rgb), .12);
    border-radius: 14px;
    background:
        radial-gradient(circle at 100% 0%, rgba(var(--rpa-violet-rgb), .05), transparent 145px),
        linear-gradient(145deg, #fff, #fbf8fa);
    box-shadow:
        0 10px 24px rgba(75,37,52,.06),
        inset 0 1px 0 #fff;
}

body[data-page="reset-password-admin"] .form-box label {
    display: block;
    margin-bottom: 6px;
    color: var(--rpa-primary-dark);
    font-size: .65rem;
    font-weight: 850;
}

body[data-page="reset-password-admin"] .form-box input[type="password"] {
    width: 100%;
    min-height: 44px;
    padding: 9px 11px;
    border: 1px solid #ddd3db;
    border-radius: 10px;
    color: var(--rpa-text);
    background: linear-gradient(180deg, #fff, #fcfafb);
    font: inherit;
    font-size: 16px;
    box-shadow:
        inset 0 1px 2px rgba(75,37,52,.03),
        0 3px 8px rgba(75,37,52,.025);
}

body[data-page="reset-password-admin"] .form-box input[type="password"]:focus {
    outline: none;
    border-color: rgba(var(--rpa-primary-rgb), .50);
    box-shadow:
        0 0 0 4px rgba(var(--rpa-primary-rgb), .085),
        0 8px 18px rgba(var(--rpa-primary-rgb), .055);
}

body[data-page="reset-password-admin"] .form-box button[type="submit"] {
    display: inline-flex;
    width: 100%;
    min-height: 43px;
    align-items: center;
    justify-content: center;
    margin-top: 11px;
    padding: 8px 13px;
    border: 1px solid var(--rpa-primary-dark);
    border-radius: 10px;
    color: #fff;
    background:
        linear-gradient(145deg, var(--rpa-primary), var(--rpa-primary-dark));
    box-shadow:
        0 9px 20px rgba(var(--rpa-primary-rgb), .22),
        inset 0 1px 0 rgba(255,255,255,.15);
    font: inherit;
    font-size: .68rem;
    font-weight: 950;
    cursor: pointer;
    transition:
        transform .16s ease,
        box-shadow .16s ease,
        filter .16s ease;
}

body[data-page="reset-password-admin"] .form-box button[type="submit"]:hover {
    transform: translateY(-1px);
    filter: brightness(1.04);
    box-shadow:
        0 12px 24px rgba(var(--rpa-primary-rgb), .26),
        inset 0 1px 0 rgba(255,255,255,.17);
}

body[data-page="reset-password-admin"] .form-box button[type="submit"]:active {
    transform: scale(.985);
}

/* ---------- Back link ---------- */
body[data-page="reset-password-admin"] .container > p:last-of-type {
    margin-top: 14px !important;
    padding: 0 28px 28px;
}

body[data-page="reset-password-admin"] .container > p:last-of-type a {
    display: inline-flex;
    min-height: 37px;
    align-items: center;
    justify-content: center;
    padding: 7px 12px;
    border: 1px solid rgba(var(--rpa-violet-rgb), .18);
    border-radius: 10px;
    color: var(--rpa-violet-dark);
    background:
        linear-gradient(180deg, #fff, rgba(var(--rpa-violet-rgb), .055));
    box-shadow:
        0 6px 14px rgba(var(--rpa-violet-rgb), .07),
        inset 0 1px 0 #fff;
    font-size: .64rem;
    font-weight: 850;
    text-decoration: none;
}

/* ---------- Flash messages ---------- */
body[data-page="reset-password-admin"] .flash-message,
body[data-page="reset-password-admin"] .alert {
    width: min(100% - 28px, 560px);
    margin: 12px auto 0;
    border-radius: 11px;
    font-size: .68rem;
}

/* ---------- Mobile ---------- */
@media (max-width: 700px) {
    body[data-page="reset-password-admin"] .container {
        width: min(100% - 16px, 560px);
        padding: 8px 0 22px;
    }

    body[data-page="reset-password-admin"] .container::before {
        inset: 0;
        border-radius: 16px;
    }

    body[data-page="reset-password-admin"] .container::after {
        inset: 0 auto 0 0;
        border-radius: 16px 0 0 16px;
    }

    body[data-page="reset-password-admin"] h1 {
        padding: 20px 18px 8px;
        font-size: 1.36rem;
    }

    body[data-page="reset-password-admin"] h1::before {
        display: flex;
        width: fit-content;
        margin: 0 0 8px;
        vertical-align: initial;
    }

    body[data-page="reset-password-admin"] .container > p {
        padding-inline: 18px;
        font-size: .68rem;
    }

    body[data-page="reset-password-admin"] .container > p:nth-of-type(2) {
        padding-bottom: 11px;
    }

    body[data-page="reset-password-admin"] .form-box {
        margin-inline: 18px;
        padding: 13px;
        border-radius: 12px;
    }

    body[data-page="reset-password-admin"] .container > p:last-of-type {
        padding: 0 18px 20px;
    }

    body[data-page="reset-password-admin"] .container > p:last-of-type a {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    body[data-page="reset-password-admin"] *,
    body[data-page="reset-password-admin"] *::before,
    body[data-page="reset-password-admin"] *::after {
        animation: none !important;
        transition: none !important;
    }
}

/* =========================================================
   Flash Final Fix
   - Close button stays at far right with safe spacing
   - Works consistently on desktop, tablet and mobile
   ========================================================= */

.global-flash-message {
    grid-template-columns:
        auto
        minmax(0, 1fr)
        auto !important;
    padding-right: 14px !important;
}

.global-flash-close {
    grid-column: 3;
    justify-self: end;
    align-self: center;
    margin-right: 2px;
    flex: 0 0 auto;
}

.global-flash-text {
    grid-column: 2;
    min-width: 0;
}

.global-flash-icon {
    grid-column: 1;
}

@media (max-width: 700px) {
    .global-flash-message {
        padding-right: 11px !important;
    }

    .global-flash-close {
        margin-right: 1px;
    }
}

/* =========================================================
   Premium Flash Message Upgrade
   放在 global.css 最底部，覆盖旧样式
   ========================================================= */

.global-flash-container {
    position: fixed;
    z-index: 10050;
    top: max(14px, env(safe-area-inset-top));
    left: 50%;
    transform: translateX(-50%);
    width: min(calc(100% - 24px), 560px);
    display: grid;
    gap: 10px;
    pointer-events: none;
}

.global-flash-message {
    --flash-accent: #64748b;
    --flash-accent-rgb: 100, 116, 139;
    --flash-bg: rgba(255, 255, 255, 0.96);
    --flash-text: #243041;
    --flash-soft: rgba(var(--flash-accent-rgb), 0.08);

    position: relative;
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) 30px;
    align-items: center;
    column-gap: 12px;
    min-height: 60px;
    padding: 12px 14px 12px 12px;
    overflow: hidden;
    border: 1px solid rgba(var(--flash-accent-rgb), 0.18);
    border-radius: 16px;
    background:
        radial-gradient(
            circle at top right,
            rgba(var(--flash-accent-rgb), 0.10),
            transparent 140px
        ),
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.98),
            rgba(248, 250, 252, 0.94)
        );
    box-shadow:
        0 18px 40px rgba(15, 23, 42, 0.16),
        0 2px 8px rgba(15, 23, 42, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    pointer-events: auto;
    animation: global-flash-enter 0.28s cubic-bezier(.2, .8, .2, 1) both;
}

.global-flash-message::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    border-radius: 16px 0 0 16px;
    background: linear-gradient(
        180deg,
        var(--flash-accent),
        rgba(var(--flash-accent-rgb), 0.55)
    );
}

.global-flash-message::after {
    content: "";
    position: absolute;
    inset: 1px 1px auto 1px;
    height: 44%;
    border-radius: 15px 15px 10px 10px;
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.42),
        rgba(255, 255, 255, 0)
    );
    pointer-events: none;
}

/* 状态色 */
.global-flash-message.flash-success {
    --flash-accent: #16a34a;
    --flash-accent-rgb: 22, 163, 74;
    --flash-text: #1f3f2b;
}

.global-flash-message.flash-info {
    --flash-accent: #2563eb;
    --flash-accent-rgb: 37, 99, 235;
    --flash-text: #1f3c6a;
}

.global-flash-message.flash-warning {
    --flash-accent: #d97706;
    --flash-accent-rgb: 217, 119, 6;
    --flash-text: #6a4318;
}

.global-flash-message.flash-danger {
    --flash-accent: #dc2626;
    --flash-accent-rgb: 220, 38, 38;
    --flash-text: #6a2323;
}

.global-flash-message.flash-message {
    --flash-accent: #7c3aed;
    --flash-accent-rgb: 124, 58, 237;
    --flash-text: #4d2f73;
}

/* 图标 */
.global-flash-icon {
    position: relative;
    z-index: 1;
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border: 1px solid rgba(var(--flash-accent-rgb), 0.16);
    border-radius: 12px;
    color: #fff;
    background:
        linear-gradient(
            145deg,
            var(--flash-accent),
            rgba(var(--flash-accent-rgb), 0.76)
        );
    box-shadow:
        0 10px 20px rgba(var(--flash-accent-rgb), 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.22);
    font-size: 0.86rem;
    font-weight: 800;
    line-height: 1;
}

/* 文字：重点修这个 */
.global-flash-text {
    position: relative;
    z-index: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    color: var(--flash-text);
    font-size: 0.92rem;
    font-weight: 650;
    line-height: 1.38;
    letter-spacing: 0.01em;
    text-wrap: pretty;
    overflow-wrap: anywhere;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* 关闭按钮 */
.global-flash-close {
    position: relative;
    z-index: 1;
    display: grid;
    width: 30px;
    height: 30px;
    place-items: center;
    justify-self: end;
    margin-right: 2px;
    padding: 0;
    border: 1px solid rgba(var(--flash-accent-rgb), 0.14);
    border-radius: 10px;
    color: rgba(var(--flash-accent-rgb), 0.84);
    background: rgba(255, 255, 255, 0.72);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition:
        transform 0.16s ease,
        background 0.16s ease,
        color 0.16s ease,
        box-shadow 0.16s ease;
}

.global-flash-close:hover {
    color: #fff;
    background: var(--flash-accent);
    box-shadow: 0 8px 16px rgba(var(--flash-accent-rgb), 0.22);
}

.global-flash-close:active {
    transform: scale(0.94);
}

.global-flash-close:focus-visible {
    outline: 3px solid rgba(var(--flash-accent-rgb), 0.18);
    outline-offset: 2px;
}

/* 底部进度条 */
.global-flash-progress {
    position: absolute;
    left: 8px;
    right: 8px;
    bottom: 7px;
    width: auto;
    height: 4px;
    border-radius: 999px;
    background:
        linear-gradient(
            90deg,
            rgba(var(--flash-accent-rgb), 0.36),
            var(--flash-accent)
        );
    box-shadow: 0 0 0 1px rgba(var(--flash-accent-rgb), 0.08);
    transition-property: width;
    transition-timing-function: linear;
}

/* 离场 */
.global-flash-message.is-leaving {
    pointer-events: none;
    animation: global-flash-leave 0.24s ease forwards;
}

@keyframes global-flash-enter {
    from {
        opacity: 0;
        transform: translateY(-10px) scale(0.985);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes global-flash-leave {
    from {
        opacity: 1;
        transform: translateY(0) scale(1);
        max-height: 120px;
    }

    to {
        opacity: 0;
        transform: translateY(-8px) scale(0.985);
        max-height: 0;
        margin: -4px 0;
        padding-top: 0;
        padding-bottom: 0;
    }
}

/* 手机 */
@media (max-width: 700px) {
    .global-flash-container {
        top: max(10px, env(safe-area-inset-top));
        width: calc(100% - 16px);
        gap: 8px;
    }

    .global-flash-message {
        grid-template-columns: 34px minmax(0, 1fr) 28px;
        min-height: 56px;
        column-gap: 10px;
        padding: 10px 11px 11px 10px;
        border-radius: 14px;
    }

    .global-flash-icon {
        width: 34px;
        height: 34px;
        border-radius: 11px;
        font-size: 0.78rem;
    }

    .global-flash-text {
        font-size: 0.86rem;
        line-height: 1.36;
    }

    .global-flash-close {
        width: 28px;
        height: 28px;
        border-radius: 9px;
        margin-right: 1px;
    }

    .global-flash-progress {
        left: 7px;
        right: 7px;
        bottom: 6px;
        height: 3px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .global-flash-message,
    .global-flash-message.is-leaving {
        animation: none !important;
    }

    .global-flash-progress {
        transition: none !important;
    }
}

/* =========================================================
   PRMS Core Pages — Unified Responsive Page Width
   Rooms / Workspace / Profile
   Place at the very bottom of global.css
   ========================================================= */

/* Desktop: all three pages use exactly the same outer width */
body[data-page="rooms"] .container.page-with-nav,
body[data-page="workspace"] .container.page-with-nav,
body[data-page="profile"] .container.page-with-nav {
    width: min(calc(100% - 32px), 1320px) !important;
    max-width: 1320px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 4px !important;
    padding-right: 4px !important;
}

/* iPad / tablet */
@media (max-width: 1180px) {
    body[data-page="rooms"] .container.page-with-nav,
    body[data-page="workspace"] .container.page-with-nav,
    body[data-page="profile"] .container.page-with-nav {
        width: calc(100% - 24px) !important;
        max-width: none !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

/* Smaller tablet and large phones */
@media (max-width: 700px) {
    body[data-page="rooms"] .container.page-with-nav,
    body[data-page="workspace"] .container.page-with-nav,
    body[data-page="profile"] .container.page-with-nav {
        width: calc(100% - 16px) !important;
        max-width: 640px !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

/* Very narrow phones */
@media (max-width: 390px) {
    body[data-page="rooms"] .container.page-with-nav,
    body[data-page="workspace"] .container.page-with-nav,
    body[data-page="profile"] .container.page-with-nav {
        width: calc(100% - 14px) !important;
    }
}

/* Keep the hero/header exactly aligned with page sections */
body[data-page="rooms"] .rooms-pro-hero,
body[data-page="rooms"] .rooms-pro-search-card,
body[data-page="rooms"] .rooms-pro-section,
body[data-page="workspace"] .workspace-premium-hero,
body[data-page="workspace"] .workspace-announcement-board,
body[data-page="workspace"] .workspace-important-announcement-alert,
body[data-page="workspace"] .workspace-premium-summary-grid,
body[data-page="workspace"] .workspace-premium-reminder-card,
body[data-page="workspace"] .workspace-premium-section,
body[data-page="workspace"] .workspace-premium-record-section,
body[data-page="profile"] .profile-premium-hero,
body[data-page="profile"] .profile-premium-info-grid,
body[data-page="profile"] .profile-premium-reminder,
body[data-page="profile"] .profile-premium-action-grid,
body[data-page="profile"] .profile-premium-work-card,
body[data-page="profile"] .profile-premium-notification-card {
    width: 100%;
    max-width: 100%;
}

/* =========================================================
   Profile Membership Status Card — Full Width Upgrade
   Scope: only the work card inside .profile-premium-info-grid
   Place at the very bottom of global.css
   ========================================================= */

/* Make the newly added membership card span the full info grid */
body[data-page="profile"]
.profile-premium-info-grid
> .profile-premium-work-card {
    grid-column: 1 / -1 !important;
    width: 100%;
    min-width: 0;
    margin-top: 8px;
    padding: 20px;
    border-radius: 17px;
    border-color: rgba(var(--role-color-rgb), .22);
    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(var(--role-color-rgb), .12),
            transparent 240px
        ),
        radial-gradient(
            circle at 0% 100%,
            rgba(var(--role-color-rgb), .055),
            transparent 210px
        ),
        linear-gradient(
            145deg,
            #ffffff 0%,
            #f9fafc 56%,
            rgba(var(--role-color-rgb), .035) 100%
        );
    box-shadow:
        0 13px 30px rgba(15, 23, 42, .07),
        inset 0 1px 0 rgba(255, 255, 255, .96);
}

/* Stronger side accent only for the membership card */
body[data-page="profile"]
.profile-premium-info-grid
> .profile-premium-work-card::before {
    width: 5px;
    background:
        linear-gradient(
            180deg,
            var(--role-color),
            var(--role-color-dark)
        );
}

/* Header gets a clearer hierarchy */
body[data-page="profile"]
.profile-premium-info-grid
> .profile-premium-work-card
.section-title-row {
    align-items: center;
    margin-bottom: 14px;
    padding: 0 2px 13px;
    border-bottom: 1px solid rgba(var(--role-color-rgb), .11);
}

body[data-page="profile"]
.profile-premium-info-grid
> .profile-premium-work-card
.section-title-row h3 {
    font-size: 1.02rem;
    letter-spacing: -.018em;
}

body[data-page="profile"]
.profile-premium-info-grid
> .profile-premium-work-card
.section-subtitle {
    margin-top: 4px;
    font-size: .72rem;
    line-height: 1.5;
}

/* Membership data layout */
body[data-page="profile"]
.profile-premium-info-grid
> .profile-premium-work-card
.attendance-info-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

/* More polished individual data cells */
body[data-page="profile"]
.profile-premium-info-grid
> .profile-premium-work-card
.attendance-info-grid
> div {
    position: relative;
    min-width: 0;
    min-height: 92px;
    padding: 14px;
    overflow: hidden;
    border: 1px solid rgba(var(--role-color-rgb), .11);
    border-radius: 13px;
    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(var(--role-color-rgb), .07),
            transparent 100px
        ),
        linear-gradient(
            145deg,
            rgba(255,255,255,.98),
            rgba(248,250,252,.96)
        );
    box-shadow:
        0 6px 16px rgba(15,23,42,.04),
        inset 0 1px 0 rgba(255,255,255,.95);
}

/* Small top accent for each cell */
body[data-page="profile"]
.profile-premium-info-grid
> .profile-premium-work-card
.attendance-info-grid
> div::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 3px;
    background:
        linear-gradient(
            90deg,
            var(--role-color),
            rgba(var(--role-color-rgb), .28)
        );
}

/* Slight variation between cells */
body[data-page="profile"]
.profile-premium-info-grid
> .profile-premium-work-card
.attendance-info-grid
> div:nth-child(2)::before {
    background:
        linear-gradient(
            90deg,
            #8b6b39,
            rgba(181,138,74,.34)
        );
}

body[data-page="profile"]
.profile-premium-info-grid
> .profile-premium-work-card
.attendance-info-grid
> div:nth-child(3)::before {
    background:
        linear-gradient(
            90deg,
            #4f6f94,
            rgba(79,111,148,.30)
        );
}

body[data-page="profile"]
.profile-premium-info-grid
> .profile-premium-work-card
.attendance-info-grid
> div:nth-child(4)::before {
    background:
        linear-gradient(
            90deg,
            #7a4d06,
            rgba(161,98,7,.28)
        );
}

body[data-page="profile"]
.profile-premium-info-grid
> .profile-premium-work-card
.attendance-info-grid span {
    color: #7f8b9d;
    font-size: .66rem;
    font-weight: 800;
    line-height: 1.35;
}

body[data-page="profile"]
.profile-premium-info-grid
> .profile-premium-work-card
.attendance-info-grid strong {
    margin-top: 9px;
    color: #223047;
    font-size: .88rem;
    font-weight: 850;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

/* Tablet */
@media (max-width: 900px) {
    body[data-page="profile"]
    .profile-premium-info-grid
    > .profile-premium-work-card {
        padding: 17px;
    }

    body[data-page="profile"]
    .profile-premium-info-grid
    > .profile-premium-work-card
    .attendance-info-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 9px;
    }

    body[data-page="profile"]
    .profile-premium-info-grid
    > .profile-premium-work-card
    .attendance-info-grid
    > div {
        min-height: 84px;
        padding: 13px;
    }
}

/* Mobile */
@media (max-width: 700px) {
    body[data-page="profile"]
    .profile-premium-info-grid
    > .profile-premium-work-card {
        grid-column: 1 / -1 !important;
        margin-top: 5px;
        padding: 14px;
        border-radius: 14px;
    }

    body[data-page="profile"]
    .profile-premium-info-grid
    > .profile-premium-work-card
    .section-title-row {
        margin-bottom: 11px;
        padding-bottom: 10px;
    }

    body[data-page="profile"]
    .profile-premium-info-grid
    > .profile-premium-work-card
    .section-title-row h3 {
        font-size: .94rem;
    }

    body[data-page="profile"]
    .profile-premium-info-grid
    > .profile-premium-work-card
    .section-subtitle {
        font-size: .67rem;
    }

    body[data-page="profile"]
    .profile-premium-info-grid
    > .profile-premium-work-card
    .attendance-info-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px;
    }

    body[data-page="profile"]
    .profile-premium-info-grid
    > .profile-premium-work-card
    .attendance-info-grid
    > div {
        min-height: 80px;
        padding: 11px;
        border-radius: 11px;
    }

    body[data-page="profile"]
    .profile-premium-info-grid
    > .profile-premium-work-card
    .attendance-info-grid span {
        font-size: .62rem;
    }

    body[data-page="profile"]
    .profile-premium-info-grid
    > .profile-premium-work-card
    .attendance-info-grid strong {
        margin-top: 7px;
        font-size: .78rem;
    }
}

/* Very narrow phones still keep two compact columns */
@media (max-width: 350px) {
    body[data-page="profile"]
    .profile-premium-info-grid
    > .profile-premium-work-card
    .attendance-info-grid {
        gap: 6px;
    }

    body[data-page="profile"]
    .profile-premium-info-grid
    > .profile-premium-work-card
    .attendance-info-grid
    > div {
        min-height: 76px;
        padding: 9px;
    }

    body[data-page="profile"]
    .profile-premium-info-grid
    > .profile-premium-work-card
    .attendance-info-grid strong {
        font-size: .73rem;
    }
}

/* =========================================================
   PRMS Membership Fee Management — Premium Plum Champagne V2
   Scope: body[data-page="membership-fee-management"]
   Place after global.css
   ========================================================= */

body[data-page="membership-fee-management"] {
    --mfm-bg: #f4f1f4;
    --mfm-surface: #ffffff;
    --mfm-surface-soft: #faf8fa;
    --mfm-text: #2f2932;
    --mfm-soft: #706774;
    --mfm-muted: #948b98;
    --mfm-line: #e4dde5;
    --mfm-primary: #70526f;
    --mfm-primary-dark: #443044;
    --mfm-primary-rgb: 112, 82, 111;
    --mfm-gold: #b58a52;
    --mfm-gold-dark: #73542d;
    --mfm-gold-rgb: 181, 138, 82;
    --mfm-success: #52735f;
    --mfm-success-rgb: 82, 115, 95;
    --mfm-warning: #a66d31;
    --mfm-warning-rgb: 166, 109, 49;
    --mfm-danger: #9d4b59;
    --mfm-danger-rgb: 157, 75, 89;
    min-height: 100vh;
    color: var(--mfm-text);
    background:
        radial-gradient(circle at 100% 0%, rgba(var(--mfm-primary-rgb), .09), transparent 30rem),
        radial-gradient(circle at 0% 100%, rgba(var(--mfm-gold-rgb), .055), transparent 28rem),
        linear-gradient(145deg, #f0edf1, #faf7f1);
}

body[data-page="membership-fee-management"] *,
body[data-page="membership-fee-management"] *::before,
body[data-page="membership-fee-management"] *::after {
    box-sizing: border-box;
}

body[data-page="membership-fee-management"] .container.page-with-nav {
    width: min(calc(100% - 28px), 1240px);
    margin: 0 auto;
    padding: 18px 0 94px;
}

body[data-page="membership-fee-management"] .workspace-premium-hero {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(250px, .34fr);
    align-items: center;
    gap: 22px;
    min-height: 205px;
    padding: 27px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 22px;
    color: #fff;
    background:
        radial-gradient(circle at 12% 8%, rgba(255,255,255,.16), transparent 24%),
        radial-gradient(circle at 88% 112%, rgba(255,255,255,.10), transparent 36%),
        linear-gradient(118deg, rgba(255,255,255,.055), transparent 42%),
        linear-gradient(135deg, #382838 0%, #654965 56%, #8b6739 100%);
    box-shadow:
        0 24px 56px rgba(68,48,68,.22),
        inset 0 1px 0 rgba(255,255,255,.14);
}

body[data-page="membership-fee-management"] .workspace-premium-hero::before {
    content: "MEMBERSHIP";
    position: absolute;
    z-index: -1;
    left: 22px;
    bottom: 14px;
    color: rgba(255,255,255,.045);
    font-size: clamp(3rem, 7vw, 6rem);
    font-weight: 950;
    letter-spacing: -.08em;
    line-height: .82;
}

body[data-page="membership-fee-management"] .workspace-premium-hero::after {
    content: "";
    position: absolute;
    z-index: -1;
    right: -90px;
    top: -112px;
    width: 305px;
    height: 305px;
    border: 42px solid rgba(255,255,255,.035);
    border-radius: 50%;
    box-shadow: 0 0 0 1px rgba(255,255,255,.06), 0 0 90px rgba(var(--mfm-gold-rgb), .15);
}

body[data-page="membership-fee-management"] .workspace-premium-hero-main {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
}

body[data-page="membership-fee-management"] .workspace-premium-icon {
    display: grid;
    flex: 0 0 62px;
    width: 62px;
    height: 62px;
    place-items: center;
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 18px;
    color: #fff;
    background: linear-gradient(145deg, rgba(255,255,255,.19), rgba(255,255,255,.07));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 13px 28px rgba(33,23,34,.22);
    font-size: 1.12rem;
    font-weight: 950;
}

body[data-page="membership-fee-management"] .page-subtitle {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 27px;
    margin: 0 0 8px;
    padding: 4px 9px;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 999px;
    color: #f4e7d5;
    background: rgba(255,255,255,.09);
    font-size: .60rem;
    font-weight: 900;
    letter-spacing: .10em;
    text-transform: uppercase;
}

body[data-page="membership-fee-management"] .page-subtitle::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #e3c99f;
    box-shadow: 0 0 0 4px rgba(227,201,159,.12);
}

body[data-page="membership-fee-management"] .workspace-premium-hero h1 {
    margin: 0;
    color: #fff;
    font-size: clamp(1.78rem, 3vw, 2.45rem);
    line-height: 1.15;
    letter-spacing: -.035em;
}

body[data-page="membership-fee-management"] .workspace-premium-hero-main > div:last-child > p:last-child {
    max-width: 700px;
    margin: 9px 0 0;
    color: rgba(255,255,255,.74);
    font-size: .72rem;
    line-height: 1.6;
}

body[data-page="membership-fee-management"] .workspace-premium-hero-side {
    position: relative;
    z-index: 1;
    padding: 16px;
    border: 1px solid rgba(255,255,255,.17);
    border-radius: 15px;
    background: linear-gradient(145deg, rgba(255,255,255,.14), rgba(255,255,255,.06));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 12px 24px rgba(33,23,34,.13);
    backdrop-filter: blur(10px);
}

body[data-page="membership-fee-management"] .workspace-premium-hero-side > span {
    display: block;
    color: rgba(255,255,255,.62);
    font-size: .62rem;
    font-weight: 850;
}

body[data-page="membership-fee-management"] .workspace-premium-hero-side strong {
    display: block;
    margin-top: 4px;
    color: #fff;
    font-size: 1rem;
}

body[data-page="membership-fee-management"] .workspace-premium-hero-side p {
    margin: 3px 0 11px;
    color: rgba(255,255,255,.68);
    font-size: .67rem;
}

body[data-page="membership-fee-management"] .workspace-premium-reminder-card {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 12px;
    padding: 13px 15px;
    border: 1px solid rgba(var(--mfm-gold-rgb), .23);
    border-radius: 14px;
    background: radial-gradient(circle at 100% 0%, rgba(var(--mfm-gold-rgb), .09), transparent 150px), linear-gradient(100deg, #fffaf1, #fff 70%);
    box-shadow: 0 9px 22px rgba(var(--mfm-gold-rgb), .075);
}

body[data-page="membership-fee-management"] .workspace-premium-reminder-icon {
    display: grid;
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    place-items: center;
    border-radius: 10px;
    color: #fff;
    background: linear-gradient(145deg, var(--mfm-gold), var(--mfm-gold-dark));
    box-shadow: 0 7px 15px rgba(var(--mfm-gold-rgb), .20);
    font-weight: 950;
}

body[data-page="membership-fee-management"] .workspace-premium-reminder-card h3 {
    margin: 0;
    color: var(--mfm-gold-dark);
    font-size: .84rem;
}

body[data-page="membership-fee-management"] .workspace-premium-reminder-card p {
    margin: 3px 0 0;
    color: #80694c;
    font-size: .69rem;
    line-height: 1.55;
}

body[data-page="membership-fee-management"] .workspace-premium-section {
    position: relative;
    overflow: hidden;
    margin-top: 13px;
    padding: 18px;
    border: 1px solid rgba(var(--mfm-primary-rgb), .13);
    border-radius: 17px;
    background: radial-gradient(circle at 100% 0%, rgba(var(--mfm-primary-rgb), .055), transparent 190px), linear-gradient(145deg, #fff, #fbf9fb);
    box-shadow: 0 12px 28px rgba(47,41,50,.06), inset 0 1px 0 #fff;
}

body[data-page="membership-fee-management"] .workspace-premium-section::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 5px;
    background: linear-gradient(180deg, var(--mfm-primary), var(--mfm-gold));
}

body[data-page="membership-fee-management"] .section-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 13px;
    padding: 0 2px 12px;
    border-bottom: 1px solid rgba(var(--mfm-primary-rgb), .10);
}

body[data-page="membership-fee-management"] .section-title-row h3 {
    margin: 0;
    color: var(--mfm-primary-dark);
    font-size: .98rem;
    letter-spacing: -.015em;
}

body[data-page="membership-fee-management"] .section-subtitle {
    margin: 4px 0 0;
    color: var(--mfm-muted);
    font-size: .67rem;
    line-height: 1.5;
}

body[data-page="membership-fee-management"] .section-count {
    display: inline-flex;
    min-height: 27px;
    align-items: center;
    padding: 3px 9px;
    border: 1px solid rgba(var(--mfm-primary-rgb), .15);
    border-radius: 999px;
    color: var(--mfm-primary-dark);
    background: rgba(var(--mfm-primary-rgb), .07);
    font-size: .62rem;
    font-weight: 900;
    white-space: nowrap;
}

body[data-page="membership-fee-management"] .form-box {
    margin: 0;
    padding: 14px;
    border: 1px solid rgba(var(--mfm-primary-rgb), .10);
    border-radius: 13px;
    background: radial-gradient(circle at 100% 0%, rgba(var(--mfm-primary-rgb), .045), transparent 135px), rgba(255,255,255,.86);
    box-shadow: inset 0 1px 0 #fff;
}

body[data-page="membership-fee-management"] .settlement-pro-input-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

body[data-page="membership-fee-management"] label {
    display: block;
    margin-bottom: 5px;
    color: #625867;
    font-size: .64rem;
    font-weight: 850;
}

body[data-page="membership-fee-management"] input,
body[data-page="membership-fee-management"] select {
    width: 100%;
    min-height: 42px;
    padding: 8px 11px;
    border: 1px solid #ded6df;
    border-radius: 10px;
    color: #3b333d;
    background: linear-gradient(180deg, #fff, #fcfafc);
    font: inherit;
    font-size: .69rem;
}

body[data-page="membership-fee-management"] input:focus,
body[data-page="membership-fee-management"] select:focus {
    outline: none;
    border-color: rgba(var(--mfm-primary-rgb), .52);
    box-shadow: 0 0 0 4px rgba(var(--mfm-primary-rgb), .09);
}

body[data-page="membership-fee-management"] button,
body[data-page="membership-fee-management"] .workspace-card-link {
    display: inline-flex;
    min-height: 38px;
    align-items: center;
    justify-content: center;
    padding: 7px 13px;
    border: 1px solid var(--mfm-primary-dark);
    border-radius: 10px;
    color: #fff;
    background: linear-gradient(145deg, var(--mfm-primary), var(--mfm-primary-dark));
    box-shadow: 0 8px 18px rgba(var(--mfm-primary-rgb), .20), inset 0 1px 0 rgba(255,255,255,.15);
    font: inherit;
    font-size: .65rem;
    font-weight: 900;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}

body[data-page="membership-fee-management"] .workspace-premium-link-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 11px;
}

body[data-page="membership-fee-management"] .workspace-premium-link-row .workspace-card-link {
    color: var(--mfm-primary-dark);
    border-color: rgba(var(--mfm-primary-rgb), .18);
    background: linear-gradient(180deg, #fff, rgba(var(--mfm-primary-rgb), .055));
    box-shadow: 0 5px 12px rgba(var(--mfm-primary-rgb), .06);
}

body[data-page="membership-fee-management"] .workspace-premium-link-row .workspace-card-link:last-child {
    color: #fff;
    border-color: var(--mfm-gold-dark);
    background: linear-gradient(145deg, var(--mfm-gold), var(--mfm-gold-dark));
}

body[data-page="membership-fee-management"] .employee-login-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

body[data-page="membership-fee-management"] .dashboard-main-stat {
    position: relative;
    overflow: hidden;
    min-width: 0;
    min-height: 125px;
    padding: 16px;
    border: 1px solid rgba(var(--mfm-primary-rgb), .13);
    border-radius: 14px;
    background: radial-gradient(circle at 100% 0%, rgba(var(--mfm-primary-rgb), .08), transparent 125px), linear-gradient(145deg, #fff, #faf8fb);
    box-shadow: 0 9px 22px rgba(47,41,50,.055), inset 0 1px 0 #fff;
}

body[data-page="membership-fee-management"] .dashboard-main-stat::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 4px;
    background: linear-gradient(90deg, var(--mfm-primary), rgba(var(--mfm-primary-rgb), .30));
}

body[data-page="membership-fee-management"] .dashboard-main-stat.active-stat {
    border-color: rgba(var(--mfm-success-rgb), .18);
    background: radial-gradient(circle at 100% 0%, rgba(var(--mfm-success-rgb), .11), transparent 125px), linear-gradient(145deg, #f9fcfa, #fff);
}

body[data-page="membership-fee-management"] .dashboard-main-stat.active-stat::before {
    background: linear-gradient(90deg, var(--mfm-success), rgba(var(--mfm-success-rgb), .35));
}

body[data-page="membership-fee-management"] .dashboard-main-stat.warning-stat {
    border-color: rgba(var(--mfm-warning-rgb), .20);
    background: radial-gradient(circle at 100% 0%, rgba(var(--mfm-warning-rgb), .11), transparent 125px), linear-gradient(145deg, #fffaf3, #fff);
}

body[data-page="membership-fee-management"] .dashboard-main-stat.warning-stat::before {
    background: linear-gradient(90deg, var(--mfm-warning), rgba(var(--mfm-warning-rgb), .36));
}

body[data-page="membership-fee-management"] .dashboard-main-stat:last-child {
    border-color: rgba(var(--mfm-danger-rgb), .19);
    background: radial-gradient(circle at 100% 0%, rgba(var(--mfm-danger-rgb), .10), transparent 125px), linear-gradient(145deg, #fff8f9, #fff);
}

body[data-page="membership-fee-management"] .dashboard-main-stat:last-child::before {
    background: linear-gradient(90deg, var(--mfm-danger), rgba(var(--mfm-danger-rgb), .34));
}

body[data-page="membership-fee-management"] .dashboard-main-stat span {
    display: block;
    color: var(--mfm-muted);
    font-size: .63rem;
    font-weight: 850;
}

body[data-page="membership-fee-management"] .dashboard-main-stat h2 {
    margin: 9px 0 0;
    color: var(--mfm-text);
    font-size: clamp(1.15rem, 2vw, 1.55rem);
    line-height: 1.08;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

body[data-page="membership-fee-management"] .dashboard-main-stat p {
    margin: 7px 0 0;
    color: var(--mfm-soft);
    font-size: .64rem;
    font-weight: 750;
}

body[data-page="membership-fee-management"] .workspace-feedback-details {
    margin-top: 9px;
    overflow: hidden;
    border: 1px solid rgba(var(--mfm-primary-rgb), .13);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 7px 18px rgba(47,41,50,.045), inset 0 1px 0 #fff;
}

body[data-page="membership-fee-management"] .workspace-feedback-summary {
    position: relative;
    display: flex;
    min-height: 46px;
    align-items: center;
    padding: 10px 44px 10px 13px;
    color: var(--mfm-primary-dark);
    background: radial-gradient(circle at 100% 0%, rgba(var(--mfm-primary-rgb), .08), transparent 120px), linear-gradient(180deg, #fff, #faf7fa);
    font-size: .70rem;
    font-weight: 900;
    cursor: pointer;
    user-select: none;
    list-style: none;
}

body[data-page="membership-fee-management"] .workspace-feedback-summary::-webkit-details-marker {
    display: none;
}

body[data-page="membership-fee-management"] .workspace-feedback-summary::after {
    content: "+";
    position: absolute;
    right: 13px;
    top: 50%;
    display: grid;
    width: 26px;
    height: 26px;
    place-items: center;
    border: 1px solid rgba(var(--mfm-primary-rgb), .15);
    border-radius: 8px;
    color: var(--mfm-primary);
    background: rgba(var(--mfm-primary-rgb), .06);
    font-size: .92rem;
    transform: translateY(-50%);
}

body[data-page="membership-fee-management"] .workspace-feedback-details[open] .workspace-feedback-summary::after {
    content: "−";
    color: #fff;
    background: linear-gradient(145deg, var(--mfm-primary), var(--mfm-primary-dark));
}

body[data-page="membership-fee-management"] .workspace-feedback-details[open] .workspace-feedback-summary {
    border-bottom: 1px solid rgba(var(--mfm-primary-rgb), .11);
}

body[data-page="membership-fee-management"] .workspace-feedback-details > .salary-request-grid,
body[data-page="membership-fee-management"] .workspace-feedback-details > .empty-state-card {
    margin: 12px;
}

body[data-page="membership-fee-management"] .salary-request-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 11px;
}

body[data-page="membership-fee-management"] .salary-request-card {
    position: relative;
    overflow: hidden;
    min-width: 0;
    padding: 15px;
    border: 1px solid rgba(var(--mfm-primary-rgb), .13);
    border-radius: 14px;
    background: radial-gradient(circle at 100% 0%, rgba(var(--mfm-primary-rgb), .055), transparent 150px), linear-gradient(145deg, #fff, #fbf9fb);
    box-shadow: 0 9px 22px rgba(47,41,50,.05), inset 0 1px 0 #fff;
}

body[data-page="membership-fee-management"] .salary-request-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: linear-gradient(180deg, var(--mfm-primary), var(--mfm-gold));
}

body[data-page="membership-fee-management"] .salary-request-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    padding-bottom: 11px;
    border-bottom: 1px solid rgba(var(--mfm-primary-rgb), .09);
}

body[data-page="membership-fee-management"] .salary-request-top h3 {
    margin: 0;
    color: var(--mfm-text);
    font-size: .90rem;
}

body[data-page="membership-fee-management"] .salary-request-top p {
    margin: 4px 0 0;
    color: var(--mfm-muted);
    font-size: .64rem;
}

body[data-page="membership-fee-management"] .salary-status-pill {
    display: inline-flex;
    min-height: 25px;
    align-items: center;
    padding: 3px 8px;
    border-radius: 999px;
    color: var(--mfm-primary-dark);
    background: rgba(var(--mfm-primary-rgb), .09);
    font-size: .59rem;
    font-weight: 900;
    white-space: nowrap;
}

body[data-page="membership-fee-management"] .salary-status-pending {
    color: #6d303b;
    background: rgba(var(--mfm-danger-rgb), .11);
}

body[data-page="membership-fee-management"] .salary-amount-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 11px;
    padding: 12px;
    border: 1px solid rgba(var(--mfm-gold-rgb), .19);
    border-radius: 11px;
    background: radial-gradient(circle at 100% 0%, rgba(var(--mfm-gold-rgb), .10), transparent 100px), linear-gradient(145deg, #fffaf2, #fff);
}

body[data-page="membership-fee-management"] .salary-amount-box span {
    color: #80684a;
    font-size: .64rem;
    font-weight: 850;
}

body[data-page="membership-fee-management"] .salary-amount-box strong {
    color: var(--mfm-gold-dark);
    font-size: 1.08rem;
    font-variant-numeric: tabular-nums;
}

body[data-page="membership-fee-management"] .attendance-info-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 7px;
    margin-top: 10px;
}

body[data-page="membership-fee-management"] .attendance-info-grid > div {
    min-width: 0;
    padding: 9px;
    border: 1px solid rgba(var(--mfm-primary-rgb), .075);
    border-radius: 9px;
    background: rgba(var(--mfm-primary-rgb), .035);
}

body[data-page="membership-fee-management"] .attendance-info-grid span {
    display: block;
    color: var(--mfm-muted);
    font-size: .59rem;
}

body[data-page="membership-fee-management"] .attendance-info-grid strong {
    display: block;
    margin-top: 4px;
    color: var(--mfm-text);
    font-size: .67rem;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

body[data-page="membership-fee-management"] .wallet-history-message {
    margin-top: 9px;
    padding: 9px 10px;
    border-left: 3px solid var(--mfm-gold);
    border-radius: 0 9px 9px 0;
    color: #735d3f;
    background: rgba(var(--mfm-gold-rgb), .075);
    font-size: .65rem;
    line-height: 1.5;
}

body[data-page="membership-fee-management"] .salary-request-card .workspace-feedback-details {
    margin-top: 10px;
}

body[data-page="membership-fee-management"] .salary-request-card .workspace-feedback-details .form-box {
    border: 0;
    border-radius: 0;
    background: #fff;
}

body[data-page="membership-fee-management"] .salary-request-card .workspace-feedback-details button,
body[data-page="membership-fee-management"] .salary-request-card > .form-box button {
    width: 100%;
    margin-top: 8px;
}

body[data-page="membership-fee-management"] .empty-state-card {
    display: grid;
    min-height: 92px;
    place-items: center;
    padding: 17px;
    border: 1px dashed var(--mfm-line);
    border-radius: 11px;
    color: var(--mfm-muted);
    background: var(--mfm-surface-soft);
    font-size: .70rem;
    text-align: center;
}

body[data-page="membership-fee-management"] .pagination-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin-top: 14px;
    padding: 9px;
    border: 1px solid rgba(var(--mfm-primary-rgb), .12);
    border-radius: 11px;
    background: rgba(255,255,255,.90);
}

body[data-page="membership-fee-management"] .pagination-bar a,
body[data-page="membership-fee-management"] .pagination-bar span {
    display: inline-flex;
    min-width: 32px;
    min-height: 32px;
    align-items: center;
    justify-content: center;
    padding: 5px 9px;
    border-radius: 8px;
    font-size: .62rem;
    font-weight: 850;
    text-decoration: none;
}

body[data-page="membership-fee-management"] .pagination-bar a {
    color: var(--mfm-primary-dark);
    border: 1px solid rgba(var(--mfm-primary-rgb), .16);
    background: rgba(var(--mfm-primary-rgb), .05);
}

body[data-page="membership-fee-management"] .pagination-bar a.active {
    color: #fff;
    background: linear-gradient(145deg, var(--mfm-primary), var(--mfm-primary-dark));
}

body[data-page="membership-fee-management"] .bottom-nav {
    position: fixed;
    z-index: 1000;
    left: 50%;
    bottom: max(9px, env(safe-area-inset-bottom));
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: min(calc(100% - 24px), 460px);
    padding: 5px;
    border: 1px solid rgba(var(--mfm-primary-rgb), .14);
    border-radius: 15px;
    background: rgba(255,255,255,.94);
    box-shadow: 0 16px 36px rgba(68,48,68,.15);
    backdrop-filter: blur(16px);
    transform: translateX(-50%);
}

body[data-page="membership-fee-management"] .bottom-nav a {
    display: flex;
    min-height: 38px;
    align-items: center;
    justify-content: center;
    padding: 6px 8px;
    border-radius: 10px;
    color: var(--mfm-soft);
    font-size: .69rem;
    font-weight: 850;
    text-decoration: none;
}

body[data-page="membership-fee-management"] .bottom-nav a.active {
    color: #fff;
    background: linear-gradient(145deg, var(--mfm-primary), var(--mfm-primary-dark));
}

@media (max-width: 1000px) {
    body[data-page="membership-fee-management"] .container.page-with-nav {
        width: calc(100% - 24px);
    }

    body[data-page="membership-fee-management"] .employee-login-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body[data-page="membership-fee-management"] .dashboard-main-stat:last-child {
        grid-column: 1 / -1;
    }

    body[data-page="membership-fee-management"] .salary-request-grid {
        grid-template-columns: 1fr;
    }

    body[data-page="membership-fee-management"] .attendance-info-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    body[data-page="membership-fee-management"] .container.page-with-nav {
        width: calc(100% - 16px);
        padding: 8px 0 86px;
    }

    body[data-page="membership-fee-management"] .workspace-premium-hero {
        grid-template-columns: 1fr;
        gap: 12px;
        min-height: 0;
        padding: 17px 14px;
        border-radius: 16px;
    }

    body[data-page="membership-fee-management"] .workspace-premium-icon {
        flex-basis: 48px;
        width: 48px;
        height: 48px;
        border-radius: 14px;
    }

    body[data-page="membership-fee-management"] .workspace-premium-hero h1 {
        font-size: 1.42rem;
    }

    body[data-page="membership-fee-management"] .workspace-premium-section {
        margin-top: 9px;
        padding: 12px;
        border-radius: 13px;
    }

    body[data-page="membership-fee-management"] .settlement-pro-input-grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    body[data-page="membership-fee-management"] .workspace-premium-link-row {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body[data-page="membership-fee-management"] .workspace-premium-link-row > * {
        width: 100%;
        min-width: 0;
    }

    body[data-page="membership-fee-management"] .workspace-premium-link-row > *:last-child {
        grid-column: 1 / -1;
    }

    body[data-page="membership-fee-management"] .employee-login-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 7px;
    }

    body[data-page="membership-fee-management"] .dashboard-main-stat {
        min-height: 105px;
        padding: 12px;
        border-radius: 12px;
    }

    body[data-page="membership-fee-management"] .dashboard-main-stat h2 {
        font-size: 1.10rem;
    }

    body[data-page="membership-fee-management"] .workspace-feedback-summary {
        min-height: 43px;
        padding: 9px 40px 9px 11px;
        font-size: .66rem;
    }

    body[data-page="membership-fee-management"] .salary-request-card {
        padding: 12px;
        border-radius: 12px;
    }

    body[data-page="membership-fee-management"] .attendance-info-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
    }
}

@media (max-width: 390px) {
    body[data-page="membership-fee-management"] .dashboard-main-stat {
        min-height: 98px;
        padding: 10px;
    }

    body[data-page="membership-fee-management"] .dashboard-main-stat span,
    body[data-page="membership-fee-management"] .dashboard-main-stat p {
        font-size: .58rem;
    }

    body[data-page="membership-fee-management"] .dashboard-main-stat h2 {
        font-size: .98rem;
    }
}

/* =========================================================
   PRMS Wallet — Multi Salary Selection UI Upgrade
   Scope: body[data-page="wallet"]
   Place at the very bottom of global.css
   ========================================================= */

/* ---------- Withdraw card gets more room ---------- */
body[data-page="wallet"] .wallet-premium-top-grid {
    grid-template-columns: minmax(250px, .34fr) minmax(0, 1fr);
    align-items: start;
    gap: 14px;
}

body[data-page="wallet"] .wallet-premium-withdraw-card {
    min-width: 0;
}

body[data-page="wallet"] .wallet-premium-withdraw-form {
    overflow: visible;
}

/* ---------- Salary selection list ---------- */
body[data-page="wallet"] .wallet-salary-selection-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
    max-height: 430px;
    padding: 3px 4px 3px 1px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color:
        rgba(var(--role-color-rgb), .30)
        transparent;
}

body[data-page="wallet"] .wallet-salary-selection-list::-webkit-scrollbar {
    width: 7px;
}

body[data-page="wallet"] .wallet-salary-selection-list::-webkit-scrollbar-track {
    background: transparent;
}

body[data-page="wallet"] .wallet-salary-selection-list::-webkit-scrollbar-thumb {
    border: 2px solid transparent;
    border-radius: 999px;
    background:
        rgba(var(--role-color-rgb), .30);
    background-clip: padding-box;
}

/* ---------- Individual selectable salary ---------- */
body[data-page="wallet"] .wallet-salary-selection-item {
    position: relative;
    display: grid;
    grid-template-columns: 21px minmax(0, 1fr);
    align-items: start;
    gap: 10px;
    min-width: 0;
    min-height: 126px;
    margin: 0;
    padding: 13px;
    overflow: hidden;
    border: 1px solid rgba(var(--role-color-rgb), .13);
    border-radius: 14px;
    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(var(--role-color-rgb), .07),
            transparent 125px
        ),
        linear-gradient(
            145deg,
            #ffffff,
            #f8fafc
        );
    box-shadow:
        0 7px 18px rgba(15,23,42,.045),
        inset 0 1px 0 rgba(255,255,255,.96);
    cursor: pointer;
    transition:
        border-color .18s ease,
        box-shadow .18s ease,
        transform .18s ease,
        background .18s ease;
}

body[data-page="wallet"] .wallet-salary-selection-item::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background:
        linear-gradient(
            180deg,
            rgba(var(--role-color-rgb), .38),
            rgba(var(--role-color-rgb), .12)
        );
    transition:
        width .18s ease,
        background .18s ease;
}

body[data-page="wallet"] .wallet-salary-selection-item:hover {
    border-color: rgba(var(--role-color-rgb), .28);
    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(var(--role-color-rgb), .11),
            transparent 135px
        ),
        #fff;
    box-shadow:
        0 11px 24px rgba(var(--role-color-rgb), .09),
        inset 0 1px 0 rgba(255,255,255,.98);
    transform: translateY(-1px);
}

/* Native checkbox upgraded */
body[data-page="wallet"] .wallet-salary-selection-item > input[type="checkbox"] {
    position: relative;
    z-index: 2;
    width: 19px;
    height: 19px;
    margin: 2px 0 0;
    flex: 0 0 19px;
    border: 1px solid rgba(var(--role-color-rgb), .34);
    border-radius: 6px;
    accent-color: var(--role-color);
    cursor: pointer;
}

/* Selected state using :has */
body[data-page="wallet"] .wallet-salary-selection-item:has(
    > input[type="checkbox"]:checked
) {
    border-color: rgba(var(--role-color-rgb), .46);
    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(var(--role-color-rgb), .17),
            transparent 150px
        ),
        linear-gradient(
            145deg,
            rgba(var(--role-color-rgb), .09),
            #fff 62%
        );
    box-shadow:
        0 12px 26px rgba(var(--role-color-rgb), .13),
        inset 0 1px 0 rgba(255,255,255,.96);
}

body[data-page="wallet"] .wallet-salary-selection-item:has(
    > input[type="checkbox"]:checked
)::before {
    width: 5px;
    background:
        linear-gradient(
            180deg,
            var(--role-color),
            var(--role-color-dark)
        );
}

/* ---------- Salary content ---------- */
body[data-page="wallet"] .wallet-salary-selection-content {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    min-width: 0;
}

body[data-page="wallet"] .wallet-salary-selection-content > strong {
    grid-column: 1 / -1;
    display: block;
    min-width: 0;
    margin: 0 0 2px;
    color: #213047;
    font-size: .76rem;
    font-weight: 850;
    line-height: 1.42;
    overflow-wrap: anywhere;
}

body[data-page="wallet"] .wallet-salary-selection-content > span {
    position: relative;
    display: block;
    min-width: 0;
    padding: 8px 8px 8px 10px;
    border: 1px solid rgba(var(--role-color-rgb), .075);
    border-radius: 9px;
    color: #687589;
    background: rgba(255,255,255,.70);
    font-size: .61rem;
    font-weight: 760;
    line-height: 1.36;
    overflow-wrap: anywhere;
}

body[data-page="wallet"] .wallet-salary-selection-content > span::before {
    content: "";
    position: absolute;
    inset: 8px auto 8px 0;
    width: 3px;
    border-radius: 99px;
    background: #94a3b8;
}

body[data-page="wallet"] .wallet-salary-selection-content > span:nth-of-type(2)::before {
    background: #b58a4a;
}

body[data-page="wallet"] .wallet-salary-selection-content > span:nth-of-type(3) {
    color: var(--role-color-dark);
    border-color: rgba(var(--role-color-rgb), .12);
    background: rgba(var(--role-color-rgb), .055);
}

body[data-page="wallet"] .wallet-salary-selection-content > span:nth-of-type(3)::before {
    background: var(--role-color);
}

/* ---------- Selection total summary ---------- */
body[data-page="wallet"] .wallet-withdraw-selection-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin-top: 11px;
    padding: 11px;
    border: 1px solid rgba(var(--role-color-rgb), .16);
    border-radius: 13px;
    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(var(--role-color-rgb), .10),
            transparent 150px
        ),
        linear-gradient(
            145deg,
            rgba(var(--role-color-rgb), .055),
            #fff
        );
    box-shadow:
        0 8px 20px rgba(var(--role-color-rgb), .07),
        inset 0 1px 0 rgba(255,255,255,.95);
}

body[data-page="wallet"] .wallet-withdraw-selection-summary > div {
    position: relative;
    min-width: 0;
    min-height: 74px;
    padding: 10px;
    overflow: hidden;
    border: 1px solid rgba(var(--role-color-rgb), .09);
    border-radius: 10px;
    background: rgba(255,255,255,.76);
}

body[data-page="wallet"] .wallet-withdraw-selection-summary > div::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 3px;
    background:
        linear-gradient(
            90deg,
            #64748b,
            #cbd5e1
        );
}

body[data-page="wallet"] .wallet-withdraw-selection-summary > div:nth-child(2)::before {
    background:
        linear-gradient(
            90deg,
            #4f6f94,
            #91aac2
        );
}

body[data-page="wallet"] .wallet-withdraw-selection-summary > div:nth-child(3)::before {
    background:
        linear-gradient(
            90deg,
            #9b743b,
            #d4b06c
        );
}

body[data-page="wallet"] .wallet-withdraw-selection-summary > div:nth-child(4) {
    border-color: rgba(var(--role-color-rgb), .14);
    background: rgba(var(--role-color-rgb), .065);
}

body[data-page="wallet"] .wallet-withdraw-selection-summary > div:nth-child(4)::before {
    background:
        linear-gradient(
            90deg,
            var(--role-color-dark),
            var(--role-color)
        );
}

body[data-page="wallet"] .wallet-withdraw-selection-summary span {
    display: block;
    color: #7c8798;
    font-size: .59rem;
    font-weight: 800;
    line-height: 1.32;
}

body[data-page="wallet"] .wallet-withdraw-selection-summary strong {
    display: block;
    margin-top: 7px;
    color: #27364a;
    font-size: .76rem;
    font-weight: 900;
    line-height: 1.28;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

body[data-page="wallet"] .wallet-withdraw-selection-summary > div:nth-child(4) strong {
    color: var(--role-color-dark);
    font-size: .84rem;
}

/* ---------- Withdrawal submit ---------- */
body[data-page="wallet"] #wallet-submit-withdrawal {
    position: relative;
    min-height: 43px;
    margin-top: 11px;
    overflow: hidden;
}

body[data-page="wallet"] #wallet-submit-withdrawal:disabled {
    border-color: #cfd6df;
    color: #8b95a5;
    background: linear-gradient(180deg, #eef1f4, #e2e7ec);
    box-shadow: none;
    cursor: not-allowed;
    opacity: .82;
}

/* ---------- Withdrawal record financial breakdown ---------- */
body[data-page="wallet"] .wallet-premium-request-card {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

body[data-page="wallet"] .wallet-premium-request-card > .wallet-premium-record-top {
    grid-column: 1 / -1;
}

body[data-page="wallet"] .wallet-premium-request-card > div:not(
    .wallet-premium-record-top
):not(
    .attendance-info-grid
) {
    position: relative;
    min-width: 0;
    min-height: 70px;
    padding: 10px;
    overflow: hidden;
    border: 1px solid rgba(var(--role-color-rgb), .09);
    border-radius: 10px;
    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.92),
            rgba(248,250,252,.88)
        );
}

body[data-page="wallet"] .wallet-premium-request-card > div:not(
    .wallet-premium-record-top
):not(
    .attendance-info-grid
)::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 3px;
    background: #94a3b8;
}

body[data-page="wallet"] .wallet-premium-request-card > div:nth-of-type(3)::before {
    background: #b58a4a;
}

body[data-page="wallet"] .wallet-premium-request-card > div:nth-of-type(4) {
    border-color: rgba(var(--role-color-rgb), .14);
    background: rgba(var(--role-color-rgb), .055);
}

body[data-page="wallet"] .wallet-premium-request-card > div:nth-of-type(4)::before {
    background:
        linear-gradient(
            90deg,
            var(--role-color-dark),
            var(--role-color)
        );
}

body[data-page="wallet"] .wallet-premium-request-card > div:not(
    .wallet-premium-record-top
):not(
    .attendance-info-grid
) > span {
    display: block;
    color: #7d8999;
    font-size: .60rem;
    font-weight: 800;
}

body[data-page="wallet"] .wallet-premium-request-card > div:not(
    .wallet-premium-record-top
):not(
    .attendance-info-grid
) > strong {
    display: block;
    margin-top: 7px;
    color: #27364a;
    font-size: .78rem;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

body[data-page="wallet"] .wallet-premium-request-card > .attendance-info-grid {
    grid-column: 1 / -1;
    margin-top: 1px;
}

/* ---------- Tablet ---------- */
@media (max-width: 1024px) {
    body[data-page="wallet"] .wallet-premium-top-grid {
        grid-template-columns: 1fr;
    }

    body[data-page="wallet"] .wallet-premium-balance-card {
        min-height: 0;
    }

    body[data-page="wallet"] .wallet-salary-selection-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        max-height: 390px;
    }

    body[data-page="wallet"] .wallet-withdraw-selection-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ---------- Mobile ---------- */
@media (max-width: 700px) {
    body[data-page="wallet"] .wallet-salary-selection-list {
        grid-template-columns: 1fr;
        max-height: 410px;
        gap: 7px;
        padding-right: 2px;
    }

    body[data-page="wallet"] .wallet-salary-selection-item {
        min-height: 0;
        padding: 11px;
        border-radius: 12px;
    }

    body[data-page="wallet"] .wallet-salary-selection-content {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 6px;
    }

    body[data-page="wallet"] .wallet-salary-selection-content > strong {
        font-size: .72rem;
    }

    body[data-page="wallet"] .wallet-salary-selection-content > span {
        padding: 7px 6px 7px 8px;
        font-size: .57rem;
    }

    body[data-page="wallet"] .wallet-withdraw-selection-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
        padding: 8px;
        border-radius: 11px;
    }

    body[data-page="wallet"] .wallet-withdraw-selection-summary > div {
        min-height: 66px;
        padding: 8px;
    }

    body[data-page="wallet"] .wallet-withdraw-selection-summary strong {
        font-size: .70rem;
    }

    body[data-page="wallet"] .wallet-withdraw-selection-summary > div:nth-child(4) strong {
        font-size: .76rem;
    }

    body[data-page="wallet"] .wallet-premium-request-card {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
    }

    body[data-page="wallet"] .wallet-premium-request-card > .wallet-premium-record-top,
    body[data-page="wallet"] .wallet-premium-request-card > .attendance-info-grid {
        grid-column: 1 / -1;
    }

    body[data-page="wallet"] .wallet-premium-request-card > div:not(
        .wallet-premium-record-top
    ):not(
        .attendance-info-grid
    ) {
        min-height: 64px;
        padding: 8px;
    }

    body[data-page="wallet"] .wallet-premium-request-card > div:nth-of-type(4) {
        grid-column: 1 / -1;
    }
}

/* ---------- Very narrow phones ---------- */
@media (max-width: 360px) {
    body[data-page="wallet"] .wallet-salary-selection-content {
        grid-template-columns: 1fr;
    }

    body[data-page="wallet"] .wallet-salary-selection-content > span {
        min-height: 34px;
    }

    body[data-page="wallet"] .wallet-premium-request-card {
        grid-template-columns: 1fr;
    }

    body[data-page="wallet"] .wallet-premium-request-card > div:not(
        .wallet-premium-record-top
    ):not(
        .attendance-info-grid
    ),
    body[data-page="wallet"] .wallet-premium-request-card > div:nth-of-type(4) {
        grid-column: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    body[data-page="wallet"] .wallet-salary-selection-item {
        transition: none !important;
    }
}
/* =========================================================
   PRMS Salary Management — Grouped Payroll UI Upgrade
   Scope: body[data-page="salary-management"]
   Place after global.css
   ========================================================= */

body[data-page="salary-management"] {
    --sm-bg: #f3f4f6;
    --sm-surface: #ffffff;
    --sm-surface-soft: #f8fafc;
    --sm-text: #263244;
    --sm-soft: #667387;
    --sm-muted: #8b96a7;
    --sm-line: #dde3eb;

    --sm-primary: #4b556f;
    --sm-primary-dark: #30384d;
    --sm-primary-rgb: 75, 85, 111;

    --sm-gold: #b1854e;
    --sm-gold-dark: #72532e;
    --sm-gold-rgb: 177, 133, 78;

    --sm-success: #44745d;
    --sm-success-rgb: 68, 116, 93;

    --sm-danger: #a24b56;
    --sm-danger-dark: #6d3139;
    --sm-danger-rgb: 162, 75, 86;

    --sm-info: #4c6f95;
    --sm-info-rgb: 76, 111, 149;

    min-height: 100vh;
    color: var(--sm-text);
    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(var(--sm-primary-rgb), .08),
            transparent 30rem
        ),
        radial-gradient(
            circle at 0% 100%,
            rgba(var(--sm-gold-rgb), .05),
            transparent 28rem
        ),
        linear-gradient(145deg, #eef1f5, #faf8f4);
}

body[data-page="salary-management"] *,
body[data-page="salary-management"] *::before,
body[data-page="salary-management"] *::after {
    box-sizing: border-box;
}

body[data-page="salary-management"] .container.page-with-nav {
    width: min(calc(100% - 28px), 1260px);
    margin: 0 auto;
    padding: 18px 0 94px;
}

/* =========================================================
   Header
   ========================================================= */

body[data-page="salary-management"] .salary-management-hero {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 20px;
    min-height: 180px;
    padding: 25px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.21);
    border-radius: 21px;
    color: #fff;
    background:
        radial-gradient(
            circle at 12% 8%,
            rgba(255,255,255,.16),
            transparent 24%
        ),
        radial-gradient(
            circle at 88% 112%,
            rgba(255,255,255,.11),
            transparent 36%
        ),
        linear-gradient(
            135deg,
            #293247 0%,
            #4b556f 57%,
            #80623c 100%
        );
    box-shadow:
        0 22px 52px rgba(48,56,77,.22),
        inset 0 1px 0 rgba(255,255,255,.14);
}

body[data-page="salary-management"] .salary-management-hero::before {
    content: "PAYROLL";
    position: absolute;
    z-index: -1;
    left: 20px;
    bottom: 12px;
    color: rgba(255,255,255,.045);
    font-size: clamp(3rem, 7vw, 6rem);
    font-weight: 950;
    letter-spacing: -.08em;
    line-height: .82;
}

body[data-page="salary-management"] .salary-management-hero::after {
    content: "";
    position: absolute;
    z-index: -1;
    right: -82px;
    top: -106px;
    width: 285px;
    height: 285px;
    border: 40px solid rgba(255,255,255,.035);
    border-radius: 50%;
}

body[data-page="salary-management"] .page-subtitle {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 27px;
    margin: 0 0 8px;
    padding: 4px 9px;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 999px;
    color: #f1e6d7;
    background: rgba(255,255,255,.09);
    font-size: .60rem;
    font-weight: 900;
    letter-spacing: .10em;
    text-transform: uppercase;
}

body[data-page="salary-management"] .page-subtitle::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #dfc394;
    box-shadow: 0 0 0 4px rgba(223,195,148,.12);
}

body[data-page="salary-management"] .salary-management-hero h1 {
    margin: 0;
    color: #fff;
    font-size: clamp(1.72rem, 3vw, 2.35rem);
    line-height: 1.15;
    letter-spacing: -.03em;
}

body[data-page="salary-management"] .user-inline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 9px;
    color: rgba(255,255,255,.75);
    font-size: .76rem;
}

body[data-page="salary-management"] .role-badge {
    display: inline-flex;
    min-height: 25px;
    align-items: center;
    padding: 3px 9px;
    border: 1px solid rgba(255,255,255,.20);
    border-radius: 999px;
    color: #fff;
    background: rgba(255,255,255,.12);
    font-size: .66rem;
    font-weight: 900;
}

body[data-page="salary-management"] .salary-management-actions {
    position: relative;
    z-index: 1;
}

body[data-page="salary-management"] .header-action-btn {
    display: inline-flex;
    min-height: 40px;
    align-items: center;
    justify-content: center;
    padding: 7px 14px;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 10px;
    color: #fff;
    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.18),
            rgba(255,255,255,.07)
        );
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.13),
        0 8px 18px rgba(31,38,54,.15);
    font-size: .65rem;
    font-weight: 900;
    text-decoration: none;
}

/* =========================================================
   Shared search / action cards
   ========================================================= */

body[data-page="salary-management"] .salary-search-card,
body[data-page="salary-management"] .salary-request-section {
    position: relative;
    overflow: hidden;
    margin-top: 13px;
    padding: 17px;
    border: 1px solid rgba(var(--sm-primary-rgb), .13);
    border-radius: 16px;
    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(var(--sm-primary-rgb), .05),
            transparent 185px
        ),
        linear-gradient(145deg, #fff, #fafbfd);
    box-shadow:
        0 11px 26px rgba(38,50,68,.06),
        inset 0 1px 0 #fff;
}

body[data-page="salary-management"] .salary-search-card::before,
body[data-page="salary-management"] .salary-request-section::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 5px;
    background:
        linear-gradient(
            180deg,
            var(--sm-primary),
            var(--sm-gold)
        );
}

/* Cash adjustment card */
body[data-page="salary-management"] .salary-search-card:nth-of-type(3) {
    border-color: rgba(var(--sm-danger-rgb), .16);
    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(var(--sm-danger-rgb), .07),
            transparent 180px
        ),
        linear-gradient(145deg, #fffafa, #fff);
}

body[data-page="salary-management"] .salary-search-card:nth-of-type(3)::before {
    background:
        linear-gradient(
            180deg,
            var(--sm-danger),
            #c88790
        );
}

/* Monthly ZIP export card */
body[data-page="salary-management"] .salary-search-card:nth-of-type(4) {
    border-color: rgba(var(--sm-gold-rgb), .20);
    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(var(--sm-gold-rgb), .10),
            transparent 180px
        ),
        linear-gradient(145deg, #fffaf2, #fff);
}

body[data-page="salary-management"] .salary-search-card:nth-of-type(4)::before {
    background:
        linear-gradient(
            180deg,
            var(--sm-gold),
            var(--sm-gold-dark)
        );
}

body[data-page="salary-management"] .section-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
    padding: 0 2px 12px;
    border-bottom: 1px solid rgba(var(--sm-primary-rgb), .10);
}

body[data-page="salary-management"] .section-title-row h3 {
    margin: 0;
    color: var(--sm-primary-dark);
    font-size: .96rem;
    letter-spacing: -.015em;
}

body[data-page="salary-management"] .section-subtitle {
    margin: 4px 0 0;
    color: var(--sm-muted);
    font-size: .67rem;
    line-height: 1.5;
}

body[data-page="salary-management"] .section-count {
    display: inline-flex;
    min-height: 27px;
    align-items: center;
    padding: 3px 9px;
    border: 1px solid rgba(var(--sm-primary-rgb), .15);
    border-radius: 999px;
    color: var(--sm-primary-dark);
    background: rgba(var(--sm-primary-rgb), .06);
    font-size: .62rem;
    font-weight: 900;
    white-space: nowrap;
}

body[data-page="salary-management"] .form-box {
    margin: 0;
    padding: 13px;
    border: 1px solid rgba(var(--sm-primary-rgb), .09);
    border-radius: 12px;
    background: rgba(255,255,255,.80);
    box-shadow: inset 0 1px 0 #fff;
}

body[data-page="salary-management"] .salary-search-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 9px;
}

body[data-page="salary-management"] label {
    display: block;
    margin-bottom: 5px;
    color: #596579;
    font-size: .63rem;
    font-weight: 850;
}

body[data-page="salary-management"] input,
body[data-page="salary-management"] select {
    width: 100%;
    min-height: 41px;
    padding: 8px 10px;
    border: 1px solid #d8dee7;
    border-radius: 10px;
    color: #334155;
    background: linear-gradient(180deg, #fff, #fbfcfd);
    font: inherit;
    font-size: .68rem;
    box-shadow:
        inset 0 1px 2px rgba(38,50,68,.03),
        0 3px 8px rgba(38,50,68,.025);
}

body[data-page="salary-management"] input:focus,
body[data-page="salary-management"] select:focus {
    outline: none;
    border-color: rgba(var(--sm-primary-rgb), .50);
    box-shadow:
        0 0 0 4px rgba(var(--sm-primary-rgb), .085),
        0 8px 18px rgba(var(--sm-primary-rgb), .05);
}

body[data-page="salary-management"] .salary-search-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 11px;
}

body[data-page="salary-management"] .salary-search-actions button,
body[data-page="salary-management"] .clear-filter-btn {
    display: inline-flex;
    min-height: 39px;
    align-items: center;
    justify-content: center;
    padding: 7px 14px;
    border-radius: 10px;
    font: inherit;
    font-size: .65rem;
    font-weight: 900;
    text-decoration: none;
    cursor: pointer;
}

body[data-page="salary-management"] .salary-search-actions button {
    border: 1px solid var(--sm-primary-dark);
    color: #fff;
    background:
        linear-gradient(
            145deg,
            var(--sm-primary),
            var(--sm-primary-dark)
        );
    box-shadow:
        0 8px 18px rgba(var(--sm-primary-rgb), .20),
        inset 0 1px 0 rgba(255,255,255,.14);
}

body[data-page="salary-management"] .clear-filter-btn {
    color: var(--sm-primary-dark);
    border: 1px solid rgba(var(--sm-primary-rgb), .16);
    background: rgba(var(--sm-primary-rgb), .055);
}

/* Cash return submit visually distinct */
body[data-page="salary-management"]
.salary-search-card:nth-of-type(3)
.salary-search-actions button {
    border-color: var(--sm-danger-dark);
    background:
        linear-gradient(
            145deg,
            var(--sm-danger),
            var(--sm-danger-dark)
        );
    box-shadow:
        0 8px 18px rgba(var(--sm-danger-rgb), .19),
        inset 0 1px 0 rgba(255,255,255,.14);
}

/* ZIP export submit visually distinct */
body[data-page="salary-management"]
.salary-search-card:nth-of-type(4)
.salary-search-actions button {
    border-color: var(--sm-gold-dark);
    background:
        linear-gradient(
            145deg,
            var(--sm-gold),
            var(--sm-gold-dark)
        );
    box-shadow:
        0 8px 18px rgba(var(--sm-gold-rgb), .20),
        inset 0 1px 0 rgba(255,255,255,.15);
}

/* =========================================================
   Employee grouped requests — new feature
   ========================================================= */

body[data-page="salary-management"] .salary-employee-group-list {
    display: grid;
    gap: 14px;
}

body[data-page="salary-management"] .salary-employee-group {
    position: relative;
    overflow: hidden;
    padding: 14px;
    border: 1px solid rgba(var(--sm-primary-rgb), .13);
    border-radius: 15px;
    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(var(--sm-primary-rgb), .055),
            transparent 190px
        ),
        linear-gradient(145deg, #f9fafc, #fff);
    box-shadow:
        0 8px 22px rgba(38,50,68,.05),
        inset 0 1px 0 #fff;
}

body[data-page="salary-management"] .salary-employee-group::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background:
        linear-gradient(
            180deg,
            var(--sm-info),
            var(--sm-primary)
        );
}

body[data-page="salary-management"] .salary-employee-group-header {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    margin-bottom: 12px;
    padding: 12px 13px;
    border: 1px solid rgba(var(--sm-primary-rgb), .10);
    border-radius: 12px;
    background:
        linear-gradient(
            120deg,
            rgba(var(--sm-primary-rgb), .075),
            rgba(255,255,255,.94) 52%,
            rgba(var(--sm-gold-rgb), .055)
        );
}

body[data-page="salary-management"] .salary-employee-group-header h2 {
    margin: 0;
    color: #243247;
    font-size: 1rem;
    line-height: 1.3;
    letter-spacing: -.018em;
}

body[data-page="salary-management"] .salary-employee-group-header .section-subtitle {
    margin-top: 4px;
}

body[data-page="salary-management"] .salary-employee-group-total {
    min-width: 155px;
    padding: 10px 12px;
    border: 1px solid rgba(var(--sm-gold-rgb), .18);
    border-radius: 11px;
    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(var(--sm-gold-rgb), .10),
            transparent 95px
        ),
        linear-gradient(145deg, #fffaf2, #fff);
    text-align: right;
    box-shadow:
        0 6px 15px rgba(var(--sm-gold-rgb), .07),
        inset 0 1px 0 #fff;
}

body[data-page="salary-management"] .salary-employee-group-total span {
    display: block;
    color: #80694b;
    font-size: .60rem;
    font-weight: 850;
}

body[data-page="salary-management"] .salary-employee-group-total strong {
    display: block;
    margin-top: 5px;
    color: var(--sm-gold-dark);
    font-size: 1rem;
    font-weight: 950;
    font-variant-numeric: tabular-nums;
}

/* =========================================================
   Request cards
   ========================================================= */

body[data-page="salary-management"] .salary-request-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

body[data-page="salary-management"] .salary-request-card {
    position: relative;
    overflow: hidden;
    min-width: 0;
    padding: 14px;
    border: 1px solid rgba(var(--sm-primary-rgb), .12);
    border-radius: 14px;
    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(var(--sm-primary-rgb), .05),
            transparent 145px
        ),
        linear-gradient(145deg, #fff, #fafbfd);
    box-shadow:
        0 8px 20px rgba(38,50,68,.05),
        inset 0 1px 0 #fff;
}

body[data-page="salary-management"] .salary-request-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background:
        linear-gradient(
            180deg,
            var(--sm-primary),
            rgba(var(--sm-primary-rgb), .42)
        );
}

body[data-page="salary-management"] .salary-request-card.salary-request-pending {
    border-color: rgba(var(--sm-gold-rgb), .24);
    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(var(--sm-gold-rgb), .10),
            transparent 145px
        ),
        linear-gradient(145deg, #fffaf3, #fff);
}

body[data-page="salary-management"] .salary-request-card.salary-request-pending::before {
    background:
        linear-gradient(
            180deg,
            var(--sm-gold),
            var(--sm-gold-dark)
        );
}

body[data-page="salary-management"] .salary-request-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(var(--sm-primary-rgb), .09);
}

body[data-page="salary-management"] .salary-request-top h3 {
    margin: 0;
    color: var(--sm-text);
    font-size: .88rem;
    line-height: 1.35;
}

body[data-page="salary-management"] .salary-request-top p {
    margin: 4px 0 0;
    color: var(--sm-muted);
    font-size: .63rem;
}

body[data-page="salary-management"] .salary-status-pill {
    display: inline-flex;
    min-height: 25px;
    align-items: center;
    padding: 3px 8px;
    border: 1px solid rgba(var(--sm-primary-rgb), .10);
    border-radius: 999px;
    color: var(--sm-primary-dark);
    background: rgba(var(--sm-primary-rgb), .08);
    font-size: .59rem;
    font-weight: 900;
    white-space: nowrap;
}

body[data-page="salary-management"] .salary-status-pending {
    color: var(--sm-gold-dark);
    border-color: rgba(var(--sm-gold-rgb), .15);
    background: rgba(var(--sm-gold-rgb), .12);
}

body[data-page="salary-management"] .salary-amount-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 10px;
    padding: 12px;
    border: 1px solid rgba(var(--sm-gold-rgb), .18);
    border-radius: 11px;
    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(var(--sm-gold-rgb), .11),
            transparent 100px
        ),
        linear-gradient(145deg, #fffaf2, #fff);
}

body[data-page="salary-management"] .salary-amount-box span {
    color: #80694b;
    font-size: .63rem;
    font-weight: 850;
}

body[data-page="salary-management"] .salary-amount-box strong {
    color: var(--sm-gold-dark);
    font-size: 1.08rem;
    font-weight: 950;
    font-variant-numeric: tabular-nums;
}

/* Original salary, membership fee and metadata */
body[data-page="salary-management"] .attendance-info-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
    margin-top: 10px;
}

body[data-page="salary-management"] .attendance-info-grid > div {
    position: relative;
    min-width: 0;
    min-height: 69px;
    padding: 9px;
    overflow: hidden;
    border: 1px solid rgba(var(--sm-primary-rgb), .075);
    border-radius: 9px;
    background: rgba(var(--sm-primary-rgb), .035);
}

body[data-page="salary-management"] .attendance-info-grid > div::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 3px;
    background: #94a3b8;
}

body[data-page="salary-management"] .attendance-info-grid > div:nth-child(1)::before {
    background:
        linear-gradient(
            90deg,
            var(--sm-info),
            #94abc3
        );
}

body[data-page="salary-management"] .attendance-info-grid > div:nth-child(2)::before {
    background:
        linear-gradient(
            90deg,
            var(--sm-gold),
            #d3ae70
        );
}

body[data-page="salary-management"] .attendance-info-grid span {
    display: block;
    color: var(--sm-muted);
    font-size: .59rem;
    line-height: 1.3;
}

body[data-page="salary-management"] .attendance-info-grid strong {
    display: block;
    margin-top: 5px;
    color: var(--sm-text);
    font-size: .67rem;
    font-weight: 850;
    line-height: 1.4;
    overflow-wrap: anywhere;
    font-variant-numeric: tabular-nums;
}

/* =========================================================
   Approve / reject actions
   ========================================================= */

body[data-page="salary-management"] .salary-action-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed rgba(var(--sm-primary-rgb), .14);
}

body[data-page="salary-management"] .salary-action-row form {
    margin: 0;
}

body[data-page="salary-management"] .salary-action-row button {
    width: 100%;
    min-height: 38px;
    padding: 7px 11px;
    border: 1px solid var(--sm-success);
    border-radius: 10px;
    color: #fff;
    background:
        linear-gradient(
            145deg,
            #56866e,
            #355f4b
        );
    box-shadow:
        0 7px 16px rgba(var(--sm-success-rgb), .18),
        inset 0 1px 0 rgba(255,255,255,.15);
    font: inherit;
    font-size: .64rem;
    font-weight: 900;
    cursor: pointer;
}

body[data-page="salary-management"] .salary-action-row .danger-btn {
    border-color: var(--sm-danger-dark);
    background:
        linear-gradient(
            145deg,
            var(--sm-danger),
            var(--sm-danger-dark)
        );
    box-shadow:
        0 7px 16px rgba(var(--sm-danger-rgb), .18),
        inset 0 1px 0 rgba(255,255,255,.15);
}

/* Read-only processing notice */
body[data-page="salary-management"] .salary-request-card > .empty-state-card {
    min-height: 0;
    margin-top: 10px;
    padding: 10px 11px;
    border-style: solid;
    border-color: rgba(var(--sm-info-rgb), .15);
    color: #49627f;
    background: rgba(var(--sm-info-rgb), .065);
    font-size: .64rem;
    line-height: 1.5;
}

/* Generic empty state */
body[data-page="salary-management"] .empty-state-card {
    display: grid;
    min-height: 90px;
    place-items: center;
    padding: 16px;
    border: 1px dashed var(--sm-line);
    border-radius: 11px;
    color: var(--sm-muted);
    background: var(--sm-surface-soft);
    font-size: .70rem;
    text-align: center;
}

/* =========================================================
   Pagination
   ========================================================= */

body[data-page="salary-management"] .pagination-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin-top: 14px;
    padding: 9px;
    border: 1px solid rgba(var(--sm-primary-rgb), .12);
    border-radius: 11px;
    background: rgba(255,255,255,.90);
    box-shadow: 0 7px 16px rgba(38,50,68,.05);
}

body[data-page="salary-management"] .pagination-bar a,
body[data-page="salary-management"] .pagination-bar span {
    display: inline-flex;
    min-width: 32px;
    min-height: 32px;
    align-items: center;
    justify-content: center;
    padding: 5px 9px;
    border-radius: 8px;
    font-size: .62rem;
    font-weight: 850;
    text-decoration: none;
}

body[data-page="salary-management"] .pagination-bar a {
    color: var(--sm-primary-dark);
    border: 1px solid rgba(var(--sm-primary-rgb), .16);
    background: rgba(var(--sm-primary-rgb), .05);
}

body[data-page="salary-management"] .pagination-bar a.active {
    color: #fff;
    border-color: var(--sm-primary);
    background:
        linear-gradient(
            145deg,
            var(--sm-primary),
            var(--sm-primary-dark)
        );
    box-shadow: 0 6px 14px rgba(var(--sm-primary-rgb), .18);
}

/* =========================================================
   Bottom navigation
   ========================================================= */

body[data-page="salary-management"] .bottom-nav {
    position: fixed;
    z-index: 1000;
    left: 50%;
    bottom: max(9px, env(safe-area-inset-bottom));
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: min(calc(100% - 24px), 460px);
    padding: 5px;
    border: 1px solid rgba(var(--sm-primary-rgb), .14);
    border-radius: 15px;
    background: rgba(255,255,255,.94);
    box-shadow:
        0 16px 36px rgba(48,56,77,.15),
        inset 0 1px 0 rgba(255,255,255,.95);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    transform: translateX(-50%);
}

body[data-page="salary-management"] .bottom-nav a {
    display: flex;
    min-width: 0;
    min-height: 38px;
    align-items: center;
    justify-content: center;
    padding: 6px 8px;
    border-radius: 10px;
    color: var(--sm-soft);
    font-size: .69rem;
    font-weight: 850;
    text-align: center;
    text-decoration: none;
}

body[data-page="salary-management"] .bottom-nav a.active {
    color: #fff;
    background:
        linear-gradient(
            145deg,
            var(--sm-primary),
            var(--sm-primary-dark)
        );
    box-shadow:
        0 7px 16px rgba(var(--sm-primary-rgb), .22),
        inset 0 1px 0 rgba(255,255,255,.15);
}

/* =========================================================
   Tablet
   ========================================================= */

@media (max-width: 1000px) {
    body[data-page="salary-management"] .container.page-with-nav {
        width: calc(100% - 24px);
    }

    body[data-page="salary-management"] .salary-search-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body[data-page="salary-management"] .salary-request-grid {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   Mobile
   ========================================================= */

@media (max-width: 700px) {
    body[data-page="salary-management"] .container.page-with-nav {
        width: calc(100% - 16px);
        padding: 8px 0 86px;
    }

    body[data-page="salary-management"] .salary-management-hero {
        grid-template-columns: 1fr;
        gap: 12px;
        min-height: 0;
        padding: 17px 14px;
        border-radius: 16px;
    }

    body[data-page="salary-management"] .salary-management-hero h1 {
        font-size: 1.42rem;
    }

    body[data-page="salary-management"] .salary-management-actions {
        width: 100%;
    }

    body[data-page="salary-management"] .header-action-btn {
        width: 100%;
        min-height: 37px;
    }

    body[data-page="salary-management"] .salary-search-card,
    body[data-page="salary-management"] .salary-request-section {
        margin-top: 9px;
        padding: 12px;
        border-radius: 13px;
    }

    body[data-page="salary-management"] .salary-search-grid {
        grid-template-columns: 1fr;
        gap: 7px;
    }

    body[data-page="salary-management"] .salary-search-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body[data-page="salary-management"] .salary-search-actions > * {
        width: 100%;
        min-width: 0;
    }

    body[data-page="salary-management"]
    .salary-search-actions > button:only-child {
        grid-column: 1 / -1;
    }

    body[data-page="salary-management"] .salary-employee-group {
        padding: 10px;
        border-radius: 12px;
    }

    body[data-page="salary-management"] .salary-employee-group-header {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 8px;
        padding: 10px;
        border-radius: 10px;
    }

    body[data-page="salary-management"] .salary-employee-group-header h2 {
        font-size: .88rem;
    }

    body[data-page="salary-management"] .salary-employee-group-total {
        min-width: 122px;
        padding: 8px 9px;
    }

    body[data-page="salary-management"] .salary-employee-group-total strong {
        font-size: .82rem;
    }

    body[data-page="salary-management"] .salary-request-card {
        padding: 11px;
        border-radius: 12px;
    }

    body[data-page="salary-management"] .attendance-info-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
    }

    body[data-page="salary-management"] .attendance-info-grid > div {
        min-height: 64px;
        padding: 8px;
    }

    body[data-page="salary-management"] .attendance-info-grid > div:nth-child(1),
    body[data-page="salary-management"] .attendance-info-grid > div:nth-child(2) {
        min-height: 69px;
    }

    body[data-page="salary-management"] .salary-action-row {
        gap: 7px;
    }

    body[data-page="salary-management"] .bottom-nav {
        bottom: max(7px, env(safe-area-inset-bottom));
        width: calc(100% - 18px);
        max-width: 430px;
        padding: 4px;
    }

    body[data-page="salary-management"] .bottom-nav a {
        min-height: 36px;
        font-size: .65rem;
    }
}

@media (max-width: 390px) {
    body[data-page="salary-management"] .salary-employee-group-header {
        grid-template-columns: 1fr;
    }

    body[data-page="salary-management"] .salary-employee-group-total {
        width: 100%;
        min-width: 0;
        text-align: left;
    }

    body[data-page="salary-management"] .salary-search-actions {
        grid-template-columns: 1fr;
    }

    body[data-page="salary-management"]
    .salary-search-actions > button:only-child {
        grid-column: auto;
    }

    body[data-page="salary-management"] .salary-action-row {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    body[data-page="salary-management"] *,
    body[data-page="salary-management"] *::before,
    body[data-page="salary-management"] *::after {
        animation: none !important;
        transition: none !important;
    }
}

/* =========================================================
   Salary Management — Responsive Withdrawal Table
   Scope: body[data-page="salary-management"]
   Place after salary-management-upgrade.css
   ========================================================= */

body[data-page="salary-management"] .salary-table-section {
    padding: 18px;
}

/* Less crowded heading */
body[data-page="salary-management"] .salary-list-heading {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;
    margin-bottom: 14px;
    padding: 3px 4px 14px;
    border-bottom: 1px solid rgba(var(--sm-primary-rgb), .11);
}

body[data-page="salary-management"] .salary-list-heading h3 {
    margin: 3px 0 0;
    color: var(--sm-primary-dark);
    font-size: 1.05rem;
    letter-spacing: -.02em;
}

body[data-page="salary-management"] .salary-list-eyebrow {
    margin: 0;
    color: var(--sm-gold-dark);
    font-size: .58rem;
    font-weight: 900;
    letter-spacing: .11em;
    text-transform: uppercase;
}

body[data-page="salary-management"] .salary-list-heading .section-subtitle {
    max-width: 660px;
}

body[data-page="salary-management"] .salary-list-heading .section-count {
    min-width: 72px;
    justify-content: center;
    padding-inline: 12px;
}

/* Employee groups */
body[data-page="salary-management"] .salary-employee-table-list {
    display: grid;
    gap: 14px;
}

body[data-page="salary-management"] .salary-employee-table-group {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(var(--sm-primary-rgb), .13);
    border-radius: 15px;
    background: #fff;
    box-shadow:
        0 9px 22px rgba(38,50,68,.055),
        inset 0 1px 0 #fff;
}

body[data-page="salary-management"] .salary-employee-table-group::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background:
        linear-gradient(
            180deg,
            var(--sm-info),
            var(--sm-primary),
            var(--sm-gold)
        );
}

body[data-page="salary-management"] .salary-employee-table-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    padding: 13px 14px 13px 17px;
    border-bottom: 1px solid rgba(var(--sm-primary-rgb), .10);
    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(var(--sm-gold-rgb), .09),
            transparent 145px
        ),
        linear-gradient(
            120deg,
            rgba(var(--sm-primary-rgb), .07),
            rgba(255,255,255,.98) 58%
        );
}

body[data-page="salary-management"] .salary-employee-identity {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

body[data-page="salary-management"] .salary-employee-avatar {
    display: grid;
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    place-items: center;
    border: 1px solid rgba(var(--sm-primary-rgb), .16);
    border-radius: 11px;
    color: #fff;
    background:
        linear-gradient(
            145deg,
            var(--sm-primary),
            var(--sm-primary-dark)
        );
    box-shadow:
        0 7px 16px rgba(var(--sm-primary-rgb), .18),
        inset 0 1px 0 rgba(255,255,255,.17);
    font-size: .80rem;
    font-weight: 950;
}

body[data-page="salary-management"] .salary-employee-identity h2 {
    margin: 0;
    color: #243247;
    font-size: .94rem;
    line-height: 1.3;
}

body[data-page="salary-management"] .salary-employee-identity p {
    margin: 3px 0 0;
    color: var(--sm-muted);
    font-size: .62rem;
}

body[data-page="salary-management"] .salary-employee-table-header
.salary-employee-group-total {
    min-width: 150px;
}

/* Table */
body[data-page="salary-management"] .salary-table-wrap {
    overflow-x: auto;
    background: #fff;
}

body[data-page="salary-management"] .salary-withdrawal-table {
    width: 100%;
    min-width: 1080px;
    border-collapse: collapse;
    table-layout: fixed;
}

body[data-page="salary-management"] .salary-withdrawal-table th {
    padding: 10px 9px;
    border-bottom: 1px solid var(--sm-line);
    color: #59667b;
    background:
        linear-gradient(180deg, #f8fafc, #edf1f5);
    font-size: .59rem;
    font-weight: 900;
    text-align: left;
    white-space: nowrap;
}

body[data-page="salary-management"] .salary-withdrawal-table th:nth-child(1) {
    width: 190px;
}

body[data-page="salary-management"] .salary-withdrawal-table th:nth-child(2),
body[data-page="salary-management"] .salary-withdrawal-table th:nth-child(3),
body[data-page="salary-management"] .salary-withdrawal-table th:nth-child(4) {
    width: 105px;
}

body[data-page="salary-management"] .salary-withdrawal-table th:nth-child(5) {
    width: 78px;
}

body[data-page="salary-management"] .salary-withdrawal-table th:nth-child(6) {
    width: 195px;
}

body[data-page="salary-management"] .salary-withdrawal-table th:nth-child(7) {
    width: 95px;
}

body[data-page="salary-management"] .salary-withdrawal-table th:nth-child(8) {
    width: 150px;
}

body[data-page="salary-management"] .salary-withdrawal-table td {
    padding: 11px 9px;
    border-bottom: 1px solid #edf1f5;
    color: #354257;
    font-size: .64rem;
    vertical-align: middle;
}

body[data-page="salary-management"] .salary-withdrawal-table tbody tr {
    transition:
        background .16s ease,
        box-shadow .16s ease;
}

body[data-page="salary-management"] .salary-withdrawal-table tbody tr:hover {
    background: rgba(var(--sm-primary-rgb), .035);
}

body[data-page="salary-management"] .salary-withdrawal-table tbody tr.is-pending {
    background:
        linear-gradient(
            90deg,
            rgba(var(--sm-gold-rgb), .055),
            rgba(255,255,255,0)
        );
}

body[data-page="salary-management"] .salary-withdrawal-table tbody tr:last-child td {
    border-bottom: 0;
}

body[data-page="salary-management"] .salary-table-primary {
    display: grid;
    gap: 4px;
}

body[data-page="salary-management"] .salary-table-primary strong {
    color: #27364b;
    font-size: .68rem;
    line-height: 1.38;
    overflow-wrap: anywhere;
}

body[data-page="salary-management"] .salary-table-primary span {
    color: var(--sm-muted);
    font-size: .57rem;
    line-height: 1.4;
}

body[data-page="salary-management"] .salary-money {
    display: inline-flex;
    min-height: 28px;
    align-items: center;
    padding: 4px 7px;
    border-radius: 8px;
    font-size: .64rem;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

body[data-page="salary-management"] .salary-money-gross {
    color: #385676;
    background: rgba(var(--sm-info-rgb), .09);
}

body[data-page="salary-management"] .salary-money-fee {
    color: var(--sm-gold-dark);
    background: rgba(var(--sm-gold-rgb), .11);
}

body[data-page="salary-management"] .salary-money-net {
    color: #365e4b;
    background: rgba(var(--sm-success-rgb), .11);
}

body[data-page="salary-management"] .salary-table-value {
    color: #445167;
    font-weight: 800;
}

body[data-page="salary-management"] .salary-processing-info {
    display: grid;
    gap: 5px;
}

body[data-page="salary-management"] .salary-processing-info span {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 5px;
    min-width: 0;
    color: #445167;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

body[data-page="salary-management"] .salary-processing-info small {
    color: var(--sm-muted);
    font-size: .55rem;
    font-weight: 800;
}

body[data-page="salary-management"] .salary-table-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px;
}

body[data-page="salary-management"] .salary-table-actions form {
    margin: 0;
}

body[data-page="salary-management"] .salary-table-actions button {
    width: 100%;
    min-height: 31px;
    padding: 5px 7px;
    border-radius: 8px;
    color: #fff;
    font: inherit;
    font-size: .58rem;
    font-weight: 900;
    cursor: pointer;
}

body[data-page="salary-management"] .salary-table-approve {
    border: 1px solid #355f4b;
    background:
        linear-gradient(145deg, #56866e, #355f4b);
    box-shadow: 0 5px 12px rgba(var(--sm-success-rgb), .16);
}

body[data-page="salary-management"] .salary-table-reject {
    border: 1px solid var(--sm-danger-dark);
    background:
        linear-gradient(
            145deg,
            var(--sm-danger),
            var(--sm-danger-dark)
        );
    box-shadow: 0 5px 12px rgba(var(--sm-danger-rgb), .16);
}

body[data-page="salary-management"] .salary-readonly-badge {
    display: block;
    padding: 6px 7px;
    border: 1px solid rgba(var(--sm-info-rgb), .14);
    border-radius: 8px;
    color: #49627f;
    background: rgba(var(--sm-info-rgb), .065);
    font-size: .55rem;
    font-weight: 750;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

body[data-page="salary-management"] .salary-no-action {
    display: block;
    color: #a0a9b7;
    text-align: center;
}

/* Tablet keeps a scrollable table */
@media (max-width: 1024px) {
    body[data-page="salary-management"] .salary-table-section {
        padding: 14px;
    }

    body[data-page="salary-management"] .salary-withdrawal-table {
        min-width: 1020px;
    }
}

/* Mobile: table becomes cards */
@media (max-width: 700px) {
    body[data-page="salary-management"] .salary-table-section {
        padding: 11px;
    }

    body[data-page="salary-management"] .salary-list-heading {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 9px;
        padding-bottom: 11px;
    }

    body[data-page="salary-management"] .salary-list-heading h3 {
        font-size: .94rem;
    }

    body[data-page="salary-management"] .salary-list-heading .section-subtitle {
        font-size: .63rem;
    }

    body[data-page="salary-management"] .salary-employee-table-header {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 8px;
        padding: 10px 10px 10px 13px;
    }

    body[data-page="salary-management"] .salary-employee-avatar {
        flex-basis: 34px;
        width: 34px;
        height: 34px;
    }

    body[data-page="salary-management"] .salary-employee-table-header
    .salary-employee-group-total {
        min-width: 118px;
        padding: 7px 8px;
    }

    body[data-page="salary-management"] .salary-table-wrap {
        overflow: visible;
        padding: 8px;
        background: #f7f9fb;
    }

    body[data-page="salary-management"] .salary-withdrawal-table,
    body[data-page="salary-management"] .salary-withdrawal-table tbody,
    body[data-page="salary-management"] .salary-withdrawal-table tr,
    body[data-page="salary-management"] .salary-withdrawal-table td {
        display: block;
        width: 100%;
        min-width: 0;
    }

    body[data-page="salary-management"] .salary-withdrawal-table thead {
        display: none;
    }

    body[data-page="salary-management"] .salary-withdrawal-table tbody {
        display: grid;
        gap: 8px;
    }

    body[data-page="salary-management"] .salary-withdrawal-table tr {
        overflow: hidden;
        padding: 10px;
        border: 1px solid rgba(var(--sm-primary-rgb), .12);
        border-radius: 12px;
        background: #fff;
        box-shadow:
            0 6px 15px rgba(38,50,68,.045),
            inset 0 1px 0 #fff;
    }

    body[data-page="salary-management"] .salary-withdrawal-table tr.is-pending {
        border-color: rgba(var(--sm-gold-rgb), .24);
        background:
            radial-gradient(
                circle at 100% 0%,
                rgba(var(--sm-gold-rgb), .10),
                transparent 120px
            ),
            #fff;
    }

    body[data-page="salary-management"] .salary-withdrawal-table td {
        display: grid;
        grid-template-columns: 92px minmax(0, 1fr);
        align-items: center;
        gap: 8px;
        min-height: 38px;
        padding: 7px 2px;
        border-bottom: 1px solid #edf1f5;
    }

    body[data-page="salary-management"] .salary-withdrawal-table td::before {
        content: attr(data-label);
        color: var(--sm-muted);
        font-size: .59rem;
        font-weight: 850;
    }

    body[data-page="salary-management"] .salary-withdrawal-table td:first-child {
        grid-template-columns: 1fr;
        padding-top: 2px;
    }

    body[data-page="salary-management"] .salary-withdrawal-table td:first-child::before {
        display: none;
    }

    body[data-page="salary-management"] .salary-withdrawal-table td:last-child {
        border-bottom: 0;
        padding-bottom: 2px;
    }

    body[data-page="salary-management"] .salary-processing-info span {
        grid-template-columns: 68px minmax(0, 1fr);
    }

    body[data-page="salary-management"] .salary-table-actions {
        width: 100%;
    }
}

@media (max-width: 390px) {
    body[data-page="salary-management"] .salary-list-heading {
        grid-template-columns: 1fr;
    }

    body[data-page="salary-management"] .salary-list-heading .section-count {
        width: fit-content;
    }

    body[data-page="salary-management"] .salary-employee-table-header {
        grid-template-columns: 1fr;
    }

    body[data-page="salary-management"] .salary-employee-table-header
    .salary-employee-group-total {
        width: 100%;
        min-width: 0;
        text-align: left;
    }

    body[data-page="salary-management"] .salary-withdrawal-table td {
        grid-template-columns: 78px minmax(0, 1fr);
    }

    body[data-page="salary-management"] .salary-table-actions {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   Salary Management — Responsive Withdrawal Table
   Scope: body[data-page="salary-management"]
   Place after salary-management-upgrade.css
   ========================================================= */

body[data-page="salary-management"] .salary-table-section {
    padding: 18px;
}

/* Less crowded heading */
body[data-page="salary-management"] .salary-list-heading {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;
    margin-bottom: 14px;
    padding: 3px 4px 14px;
    border-bottom: 1px solid rgba(var(--sm-primary-rgb), .11);
}

body[data-page="salary-management"] .salary-list-heading h3 {
    margin: 3px 0 0;
    color: var(--sm-primary-dark);
    font-size: 1.05rem;
    letter-spacing: -.02em;
}

body[data-page="salary-management"] .salary-list-eyebrow {
    margin: 0;
    color: var(--sm-gold-dark);
    font-size: .58rem;
    font-weight: 900;
    letter-spacing: .11em;
    text-transform: uppercase;
}

body[data-page="salary-management"] .salary-list-heading .section-subtitle {
    max-width: 660px;
}

body[data-page="salary-management"] .salary-list-heading .section-count {
    min-width: 72px;
    justify-content: center;
    padding-inline: 12px;
}

/* Employee groups */
body[data-page="salary-management"] .salary-employee-table-list {
    display: grid;
    gap: 14px;
}

body[data-page="salary-management"] .salary-employee-table-group {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(var(--sm-primary-rgb), .13);
    border-radius: 15px;
    background: #fff;
    box-shadow:
        0 9px 22px rgba(38,50,68,.055),
        inset 0 1px 0 #fff;
}

body[data-page="salary-management"] .salary-employee-table-group::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background:
        linear-gradient(
            180deg,
            var(--sm-info),
            var(--sm-primary),
            var(--sm-gold)
        );
}

body[data-page="salary-management"] .salary-employee-table-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    padding: 13px 14px 13px 17px;
    border-bottom: 1px solid rgba(var(--sm-primary-rgb), .10);
    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(var(--sm-gold-rgb), .09),
            transparent 145px
        ),
        linear-gradient(
            120deg,
            rgba(var(--sm-primary-rgb), .07),
            rgba(255,255,255,.98) 58%
        );
}

body[data-page="salary-management"] .salary-employee-identity {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

body[data-page="salary-management"] .salary-employee-avatar {
    display: grid;
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    place-items: center;
    border: 1px solid rgba(var(--sm-primary-rgb), .16);
    border-radius: 11px;
    color: #fff;
    background:
        linear-gradient(
            145deg,
            var(--sm-primary),
            var(--sm-primary-dark)
        );
    box-shadow:
        0 7px 16px rgba(var(--sm-primary-rgb), .18),
        inset 0 1px 0 rgba(255,255,255,.17);
    font-size: .80rem;
    font-weight: 950;
}

body[data-page="salary-management"] .salary-employee-identity h2 {
    margin: 0;
    color: #243247;
    font-size: .94rem;
    line-height: 1.3;
}

body[data-page="salary-management"] .salary-employee-identity p {
    margin: 3px 0 0;
    color: var(--sm-muted);
    font-size: .62rem;
}

body[data-page="salary-management"] .salary-employee-table-header
.salary-employee-group-total {
    min-width: 150px;
}

/* Table */
body[data-page="salary-management"] .salary-table-wrap {
    overflow-x: auto;
    background: #fff;
}

body[data-page="salary-management"] .salary-withdrawal-table {
    width: 100%;
    min-width: 1080px;
    border-collapse: collapse;
    table-layout: fixed;
}

body[data-page="salary-management"] .salary-withdrawal-table th {
    padding: 10px 9px;
    border-bottom: 1px solid var(--sm-line);
    color: #59667b;
    background:
        linear-gradient(180deg, #f8fafc, #edf1f5);
    font-size: .59rem;
    font-weight: 900;
    text-align: left;
    white-space: nowrap;
}

body[data-page="salary-management"] .salary-withdrawal-table th:nth-child(1) {
    width: 190px;
}

body[data-page="salary-management"] .salary-withdrawal-table th:nth-child(2),
body[data-page="salary-management"] .salary-withdrawal-table th:nth-child(3),
body[data-page="salary-management"] .salary-withdrawal-table th:nth-child(4) {
    width: 105px;
}

body[data-page="salary-management"] .salary-withdrawal-table th:nth-child(5) {
    width: 78px;
}

body[data-page="salary-management"] .salary-withdrawal-table th:nth-child(6) {
    width: 195px;
}

body[data-page="salary-management"] .salary-withdrawal-table th:nth-child(7) {
    width: 95px;
}

body[data-page="salary-management"] .salary-withdrawal-table th:nth-child(8) {
    width: 150px;
}

body[data-page="salary-management"] .salary-withdrawal-table td {
    padding: 11px 9px;
    border-bottom: 1px solid #edf1f5;
    color: #354257;
    font-size: .64rem;
    vertical-align: middle;
}

body[data-page="salary-management"] .salary-withdrawal-table tbody tr {
    transition:
        background .16s ease,
        box-shadow .16s ease;
}

body[data-page="salary-management"] .salary-withdrawal-table tbody tr:hover {
    background: rgba(var(--sm-primary-rgb), .035);
}

body[data-page="salary-management"] .salary-withdrawal-table tbody tr.is-pending {
    background:
        linear-gradient(
            90deg,
            rgba(var(--sm-gold-rgb), .055),
            rgba(255,255,255,0)
        );
}

body[data-page="salary-management"] .salary-withdrawal-table tbody tr:last-child td {
    border-bottom: 0;
}

body[data-page="salary-management"] .salary-table-primary {
    display: grid;
    gap: 4px;
}

body[data-page="salary-management"] .salary-table-primary strong {
    color: #27364b;
    font-size: .68rem;
    line-height: 1.38;
    overflow-wrap: anywhere;
}

body[data-page="salary-management"] .salary-table-primary span {
    color: var(--sm-muted);
    font-size: .57rem;
    line-height: 1.4;
}

body[data-page="salary-management"] .salary-money {
    display: inline-flex;
    min-height: 28px;
    align-items: center;
    padding: 4px 7px;
    border-radius: 8px;
    font-size: .64rem;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

body[data-page="salary-management"] .salary-money-gross {
    color: #385676;
    background: rgba(var(--sm-info-rgb), .09);
}

body[data-page="salary-management"] .salary-money-fee {
    color: var(--sm-gold-dark);
    background: rgba(var(--sm-gold-rgb), .11);
}

body[data-page="salary-management"] .salary-money-net {
    color: #365e4b;
    background: rgba(var(--sm-success-rgb), .11);
}

body[data-page="salary-management"] .salary-table-value {
    color: #445167;
    font-weight: 800;
}

body[data-page="salary-management"] .salary-processing-info {
    display: grid;
    gap: 5px;
}

body[data-page="salary-management"] .salary-processing-info span {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 5px;
    min-width: 0;
    color: #445167;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

body[data-page="salary-management"] .salary-processing-info small {
    color: var(--sm-muted);
    font-size: .55rem;
    font-weight: 800;
}

body[data-page="salary-management"] .salary-table-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px;
}

body[data-page="salary-management"] .salary-table-actions form {
    margin: 0;
}

body[data-page="salary-management"] .salary-table-actions button {
    width: 100%;
    min-height: 31px;
    padding: 5px 7px;
    border-radius: 8px;
    color: #fff;
    font: inherit;
    font-size: .58rem;
    font-weight: 900;
    cursor: pointer;
}

body[data-page="salary-management"] .salary-table-approve {
    border: 1px solid #355f4b;
    background:
        linear-gradient(145deg, #56866e, #355f4b);
    box-shadow: 0 5px 12px rgba(var(--sm-success-rgb), .16);
}

body[data-page="salary-management"] .salary-table-reject {
    border: 1px solid var(--sm-danger-dark);
    background:
        linear-gradient(
            145deg,
            var(--sm-danger),
            var(--sm-danger-dark)
        );
    box-shadow: 0 5px 12px rgba(var(--sm-danger-rgb), .16);
}

body[data-page="salary-management"] .salary-readonly-badge {
    display: block;
    padding: 6px 7px;
    border: 1px solid rgba(var(--sm-info-rgb), .14);
    border-radius: 8px;
    color: #49627f;
    background: rgba(var(--sm-info-rgb), .065);
    font-size: .55rem;
    font-weight: 750;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

body[data-page="salary-management"] .salary-no-action {
    display: block;
    color: #a0a9b7;
    text-align: center;
}

/* Tablet keeps a scrollable table */
@media (max-width: 1024px) {
    body[data-page="salary-management"] .salary-table-section {
        padding: 14px;
    }

    body[data-page="salary-management"] .salary-withdrawal-table {
        min-width: 1020px;
    }
}

/* Mobile: table becomes cards */
@media (max-width: 700px) {
    body[data-page="salary-management"] .salary-table-section {
        padding: 11px;
    }

    body[data-page="salary-management"] .salary-list-heading {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 9px;
        padding-bottom: 11px;
    }

    body[data-page="salary-management"] .salary-list-heading h3 {
        font-size: .94rem;
    }

    body[data-page="salary-management"] .salary-list-heading .section-subtitle {
        font-size: .63rem;
    }

    body[data-page="salary-management"] .salary-employee-table-header {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 8px;
        padding: 10px 10px 10px 13px;
    }

    body[data-page="salary-management"] .salary-employee-avatar {
        flex-basis: 34px;
        width: 34px;
        height: 34px;
    }

    body[data-page="salary-management"] .salary-employee-table-header
    .salary-employee-group-total {
        min-width: 118px;
        padding: 7px 8px;
    }

    body[data-page="salary-management"] .salary-table-wrap {
        overflow: visible;
        padding: 8px;
        background: #f7f9fb;
    }

    body[data-page="salary-management"] .salary-withdrawal-table,
    body[data-page="salary-management"] .salary-withdrawal-table tbody,
    body[data-page="salary-management"] .salary-withdrawal-table tr,
    body[data-page="salary-management"] .salary-withdrawal-table td {
        display: block;
        width: 100%;
        min-width: 0;
    }

    body[data-page="salary-management"] .salary-withdrawal-table thead {
        display: none;
    }

    body[data-page="salary-management"] .salary-withdrawal-table tbody {
        display: grid;
        gap: 8px;
    }

    body[data-page="salary-management"] .salary-withdrawal-table tr {
        overflow: hidden;
        padding: 10px;
        border: 1px solid rgba(var(--sm-primary-rgb), .12);
        border-radius: 12px;
        background: #fff;
        box-shadow:
            0 6px 15px rgba(38,50,68,.045),
            inset 0 1px 0 #fff;
    }

    body[data-page="salary-management"] .salary-withdrawal-table tr.is-pending {
        border-color: rgba(var(--sm-gold-rgb), .24);
        background:
            radial-gradient(
                circle at 100% 0%,
                rgba(var(--sm-gold-rgb), .10),
                transparent 120px
            ),
            #fff;
    }

    body[data-page="salary-management"] .salary-withdrawal-table td {
        display: grid;
        grid-template-columns: 92px minmax(0, 1fr);
        align-items: center;
        gap: 8px;
        min-height: 38px;
        padding: 7px 2px;
        border-bottom: 1px solid #edf1f5;
    }

    body[data-page="salary-management"] .salary-withdrawal-table td::before {
        content: attr(data-label);
        color: var(--sm-muted);
        font-size: .59rem;
        font-weight: 850;
    }

    body[data-page="salary-management"] .salary-withdrawal-table td:first-child {
        grid-template-columns: 1fr;
        padding-top: 2px;
    }

    body[data-page="salary-management"] .salary-withdrawal-table td:first-child::before {
        display: none;
    }

    body[data-page="salary-management"] .salary-withdrawal-table td:last-child {
        border-bottom: 0;
        padding-bottom: 2px;
    }

    body[data-page="salary-management"] .salary-processing-info span {
        grid-template-columns: 68px minmax(0, 1fr);
    }

    body[data-page="salary-management"] .salary-table-actions {
        width: 100%;
    }
}

@media (max-width: 390px) {
    body[data-page="salary-management"] .salary-list-heading {
        grid-template-columns: 1fr;
    }

    body[data-page="salary-management"] .salary-list-heading .section-count {
        width: fit-content;
    }

    body[data-page="salary-management"] .salary-employee-table-header {
        grid-template-columns: 1fr;
    }

    body[data-page="salary-management"] .salary-employee-table-header
    .salary-employee-group-total {
        width: 100%;
        min-width: 0;
        text-align: left;
    }

    body[data-page="salary-management"] .salary-withdrawal-table td {
        grid-template-columns: 78px minmax(0, 1fr);
    }

    body[data-page="salary-management"] .salary-table-actions {
        grid-template-columns: 1fr;
    }
}
/* =========================================================
   Salary Management — Compact Mobile Table Override
   Scope: body[data-page="salary-management"]
   Place AFTER salary-withdrawal-responsive-table.css
   ========================================================= */

@media (max-width: 700px) {
    /* Keep the employee group compact */
    body[data-page="salary-management"]
    .salary-employee-table-list {
        gap: 10px;
    }

    body[data-page="salary-management"]
    .salary-employee-table-group {
        border-radius: 12px;
    }

    body[data-page="salary-management"]
    .salary-employee-table-header {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 7px;
        padding: 9px 9px 9px 12px;
    }

    body[data-page="salary-management"]
    .salary-employee-avatar {
        flex-basis: 31px;
        width: 31px;
        height: 31px;
        border-radius: 9px;
        font-size: .68rem;
    }

    body[data-page="salary-management"]
    .salary-employee-identity {
        gap: 8px;
    }

    body[data-page="salary-management"]
    .salary-employee-identity h2 {
        font-size: .82rem;
    }

    body[data-page="salary-management"]
    .salary-employee-identity p {
        margin-top: 2px;
        font-size: .56rem;
    }

    body[data-page="salary-management"]
    .salary-employee-table-header
    .salary-employee-group-total {
        min-width: 108px;
        padding: 7px 8px;
        border-radius: 9px;
    }

    body[data-page="salary-management"]
    .salary-employee-group-total span {
        font-size: .54rem;
    }

    body[data-page="salary-management"]
    .salary-employee-group-total strong {
        margin-top: 3px;
        font-size: .73rem;
    }

    /* Restore the real table instead of tall mobile cards */
    body[data-page="salary-management"]
    .salary-table-wrap {
        position: relative;
        width: 100%;
        padding: 0;
        overflow-x: auto;
        overflow-y: hidden;
        background: #fff;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        scrollbar-color:
            rgba(var(--sm-primary-rgb), .28)
            transparent;
    }

    body[data-page="salary-management"]
    .salary-table-wrap::-webkit-scrollbar {
        height: 5px;
    }

    body[data-page="salary-management"]
    .salary-table-wrap::-webkit-scrollbar-thumb {
        border-radius: 999px;
        background: rgba(var(--sm-primary-rgb), .28);
    }

    body[data-page="salary-management"]
    .salary-withdrawal-table {
        display: table;
        width: 100%;
        min-width: 820px;
        table-layout: fixed;
        border-collapse: separate;
        border-spacing: 0;
    }

    body[data-page="salary-management"]
    .salary-withdrawal-table thead {
        display: table-header-group;
    }

    body[data-page="salary-management"]
    .salary-withdrawal-table tbody {
        display: table-row-group;
    }

    body[data-page="salary-management"]
    .salary-withdrawal-table tr {
        display: table-row;
        width: auto;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }

    body[data-page="salary-management"]
    .salary-withdrawal-table tr.is-pending {
        background:
            linear-gradient(
                90deg,
                rgba(var(--sm-gold-rgb), .055),
                rgba(255,255,255,0)
            );
    }

    body[data-page="salary-management"]
    .salary-withdrawal-table th,
    body[data-page="salary-management"]
    .salary-withdrawal-table td {
        display: table-cell;
        width: auto;
        min-width: 0;
        height: auto;
        padding: 8px 7px;
        border-bottom: 1px solid #edf1f5;
        font-size: .57rem;
        vertical-align: middle;
    }

    body[data-page="salary-management"]
    .salary-withdrawal-table td::before {
        display: none;
        content: none;
    }

    body[data-page="salary-management"]
    .salary-withdrawal-table th {
        position: sticky;
        z-index: 4;
        top: 0;
        color: #59667b;
        background:
            linear-gradient(180deg, #f8fafc, #edf1f5);
        font-size: .54rem;
        white-space: nowrap;
    }

    /* Compact column widths */
    body[data-page="salary-management"]
    .salary-withdrawal-table th:nth-child(1) {
        width: 150px;
    }

    body[data-page="salary-management"]
    .salary-withdrawal-table th:nth-child(2),
    body[data-page="salary-management"]
    .salary-withdrawal-table th:nth-child(3),
    body[data-page="salary-management"]
    .salary-withdrawal-table th:nth-child(4) {
        width: 86px;
    }

    body[data-page="salary-management"]
    .salary-withdrawal-table th:nth-child(5) {
        width: 60px;
    }

    body[data-page="salary-management"]
    .salary-withdrawal-table th:nth-child(6) {
        width: 150px;
    }

    body[data-page="salary-management"]
    .salary-withdrawal-table th:nth-child(7) {
        width: 78px;
    }

    body[data-page="salary-management"]
    .salary-withdrawal-table th:nth-child(8) {
        width: 120px;
    }

    /* Sticky application column */
    body[data-page="salary-management"]
    .salary-withdrawal-table th:first-child,
    body[data-page="salary-management"]
    .salary-withdrawal-table td:first-child {
        position: sticky;
        z-index: 3;
        left: 0;
        background: #fff;
        box-shadow:
            8px 0 12px -12px rgba(15,23,42,.42);
    }

    body[data-page="salary-management"]
    .salary-withdrawal-table th:first-child {
        z-index: 6;
        background:
            linear-gradient(180deg, #f8fafc, #edf1f5);
    }

    body[data-page="salary-management"]
    .salary-withdrawal-table tr.is-pending
    td:first-child {
        background: #fffaf3;
    }

    /* Sticky actions column */
    body[data-page="salary-management"]
    .salary-withdrawal-table th:last-child,
    body[data-page="salary-management"]
    .salary-withdrawal-table td:last-child {
        position: sticky;
        z-index: 3;
        right: 0;
        background: #fff;
        box-shadow:
            -8px 0 12px -12px rgba(15,23,42,.42);
    }

    body[data-page="salary-management"]
    .salary-withdrawal-table th:last-child {
        z-index: 6;
        background:
            linear-gradient(180deg, #f8fafc, #edf1f5);
    }

    body[data-page="salary-management"]
    .salary-withdrawal-table tr.is-pending
    td:last-child {
        background: #fffaf3;
    }

    body[data-page="salary-management"]
    .salary-table-primary {
        gap: 2px;
    }

    body[data-page="salary-management"]
    .salary-table-primary strong {
        font-size: .60rem;
        line-height: 1.3;
        -webkit-line-clamp: 2;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    body[data-page="salary-management"]
    .salary-table-primary span {
        font-size: .50rem;
        line-height: 1.3;
    }

    body[data-page="salary-management"]
    .salary-money {
        min-height: 24px;
        padding: 3px 5px;
        border-radius: 7px;
        font-size: .55rem;
    }

    body[data-page="salary-management"]
    .salary-processing-info {
        gap: 3px;
    }

    body[data-page="salary-management"]
    .salary-processing-info span {
        grid-template-columns: 58px minmax(0, 1fr);
        gap: 3px;
        font-size: .53rem;
        line-height: 1.3;
    }

    body[data-page="salary-management"]
    .salary-processing-info small {
        font-size: .48rem;
    }

    body[data-page="salary-management"]
    .salary-status-pill {
        min-height: 22px;
        padding: 2px 6px;
        font-size: .52rem;
    }

    body[data-page="salary-management"]
    .salary-table-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 4px;
    }

    body[data-page="salary-management"]
    .salary-table-actions button {
        min-height: 27px;
        padding: 4px 5px;
        border-radius: 7px;
        font-size: .51rem;
    }

    body[data-page="salary-management"]
    .salary-readonly-badge {
        padding: 5px;
        border-radius: 7px;
        font-size: .48rem;
        line-height: 1.3;
    }

    /* A small swipe hint */
    body[data-page="salary-management"]
    .salary-table-wrap::after {
        content: "左右滑动查看完整资料";
        position: sticky;
        left: 50%;
        bottom: 4px;
        z-index: 8;
        display: block;
        width: fit-content;
        margin: 4px auto;
        padding: 3px 7px;
        border: 1px solid rgba(var(--sm-primary-rgb), .11);
        border-radius: 999px;
        color: var(--sm-muted);
        background: rgba(255,255,255,.92);
        box-shadow: 0 4px 10px rgba(15,23,42,.06);
        font-size: .48rem;
        font-weight: 800;
        pointer-events: none;
    }
}

@media (max-width: 390px) {
    body[data-page="salary-management"]
    .salary-employee-table-header {
        grid-template-columns: minmax(0, 1fr) 100px;
    }

    body[data-page="salary-management"]
    .salary-employee-table-header
    .salary-employee-group-total {
        width: auto;
        min-width: 0;
        text-align: right;
    }

    body[data-page="salary-management"]
    .salary-withdrawal-table {
        min-width: 760px;
    }
}

/* =========================================================
   PRMS Customer Balance Management — Premium Navy Copper
   Scope: body[data-page="customer-balance-management"]
   Place after global.css
   ========================================================= */

body[data-page="customer-balance-management"] {
    --cb-bg: #f3f4f6;
    --cb-surface: #ffffff;
    --cb-surface-soft: #f8fafc;
    --cb-text: #253247;
    --cb-soft: #647187;
    --cb-muted: #8b96a7;
    --cb-line: #dfe5ec;
    --cb-primary: #35445b;
    --cb-primary-dark: #202c3d;
    --cb-primary-rgb: 53, 68, 91;
    --cb-copper: #b1713f;
    --cb-copper-dark: #75451f;
    --cb-copper-rgb: 177, 113, 63;
    --cb-success: #47705c;
    --cb-success-dark: #2f5040;
    --cb-success-rgb: 71, 112, 92;
    --cb-danger: #a34d58;
    --cb-danger-dark: #6d3038;
    --cb-danger-rgb: 163, 77, 88;
    min-height: 100vh;
    color: var(--cb-text);
    background:
        radial-gradient(circle at 100% 0%, rgba(var(--cb-primary-rgb), .08), transparent 30rem),
        radial-gradient(circle at 0% 100%, rgba(var(--cb-copper-rgb), .055), transparent 28rem),
        linear-gradient(145deg, #eef1f5, #faf8f4);
}

body[data-page="customer-balance-management"] *,
body[data-page="customer-balance-management"] *::before,
body[data-page="customer-balance-management"] *::after { box-sizing: border-box; }

body[data-page="customer-balance-management"] .container.page-with-nav {
    width: min(calc(100% - 28px), 1260px);
    margin: 0 auto;
    padding: 18px 0 94px;
}

body[data-page="customer-balance-management"] .customer-balance-hero {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 20px;
    min-height: 190px;
    margin-bottom: 14px;
    padding: 25px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.20);
    border-radius: 21px;
    color: #fff;
    background:
        radial-gradient(circle at 12% 8%, rgba(255,255,255,.16), transparent 24%),
        radial-gradient(circle at 90% 110%, rgba(255,255,255,.11), transparent 36%),
        linear-gradient(135deg, #202c3d 0%, #3b4b63 56%, #83542f 100%);
    box-shadow: 0 22px 52px rgba(32,44,61,.22), inset 0 1px 0 rgba(255,255,255,.14);
}

body[data-page="customer-balance-management"] .customer-balance-hero::before {
    content: "CUSTOMER BALANCE";
    position: absolute;
    z-index: -1;
    left: 20px;
    bottom: 12px;
    color: rgba(255,255,255,.04);
    font-size: clamp(2.7rem, 6.3vw, 5.7rem);
    font-weight: 950;
    letter-spacing: -.08em;
    line-height: .82;
}

body[data-page="customer-balance-management"] .customer-balance-hero::after {
    content: "";
    position: absolute;
    z-index: -1;
    right: -85px;
    top: -110px;
    width: 290px;
    height: 290px;
    border: 42px solid rgba(255,255,255,.035);
    border-radius: 50%;
}

body[data-page="customer-balance-management"] .customer-balance-hero .page-subtitle {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 27px;
    margin: 0 0 8px;
    padding: 4px 9px;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 999px;
    color: #f2e3d4;
    background: rgba(255,255,255,.09);
    font-size: .60rem;
    font-weight: 900;
    letter-spacing: .11em;
    text-transform: uppercase;
}

body[data-page="customer-balance-management"] .customer-balance-hero .page-subtitle::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #dfbd91;
    box-shadow: 0 0 0 4px rgba(223,189,145,.12);
}

body[data-page="customer-balance-management"] .customer-balance-hero h1 {
    margin: 0;
    color: #fff;
    font-size: clamp(1.78rem, 3vw, 2.42rem);
    line-height: 1.15;
    letter-spacing: -.035em;
}

body[data-page="customer-balance-management"] .customer-balance-hero .section-subtitle {
    max-width: 760px;
    margin: 10px 0 0;
    color: rgba(255,255,255,.72);
    font-size: .72rem;
    line-height: 1.65;
}

body[data-page="customer-balance-management"] .customer-balance-hero .header-action-btn {
    display: inline-flex;
    min-height: 40px;
    align-items: center;
    justify-content: center;
    padding: 7px 14px;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 10px;
    color: #fff;
    background: linear-gradient(145deg, rgba(255,255,255,.18), rgba(255,255,255,.07));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.13), 0 8px 18px rgba(22,31,45,.16);
    font-size: .66rem;
    font-weight: 900;
    text-decoration: none;
}

body[data-page="customer-balance-management"] .customer-balance-panel {
    position: relative;
    overflow: hidden;
    margin-bottom: 14px;
    padding: 18px;
    border: 1px solid rgba(var(--cb-primary-rgb), .13);
    border-radius: 17px;
    background: radial-gradient(circle at 100% 0%, rgba(var(--cb-primary-rgb), .05), transparent 190px), linear-gradient(145deg, #fff, #fafbfd);
    box-shadow: 0 12px 28px rgba(37,50,71,.06), inset 0 1px 0 #fff;
}

body[data-page="customer-balance-management"] .customer-balance-panel::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 5px;
    background: linear-gradient(180deg, var(--cb-primary), var(--cb-copper));
}

body[data-page="customer-balance-management"] .section-title-row {
    display: block;
    margin-bottom: 15px;
    padding: 2px 3px 14px;
    border-bottom: 1px solid rgba(var(--cb-primary-rgb), .10);
}

body[data-page="customer-balance-management"] .section-title-row h3 {
    position: relative;
    margin: 0;
    padding-left: 13px;
    color: var(--cb-primary-dark);
    font-size: 1rem;
    font-weight: 900;
    line-height: 1.35;
    letter-spacing: -.018em;
}

body[data-page="customer-balance-management"] .section-title-row h3::before {
    content: "";
    position: absolute;
    left: 0;
    top: .16em;
    width: 4px;
    height: 1.02em;
    border-radius: 999px;
    background: linear-gradient(180deg, var(--cb-primary), var(--cb-copper));
    box-shadow: 0 0 0 4px rgba(var(--cb-primary-rgb), .055);
}

body[data-page="customer-balance-management"] .section-title-row .section-subtitle {
    max-width: 900px;
    margin: 8px 0 0;
    color: var(--cb-muted);
    font-size: .70rem;
    line-height: 1.7;
}

body[data-page="customer-balance-management"] .form-box {
    margin: 0;
    padding: 14px;
    border: 1px solid rgba(var(--cb-primary-rgb), .09);
    border-radius: 12px;
    background: rgba(255,255,255,.84);
    box-shadow: inset 0 1px 0 #fff;
}

body[data-page="customer-balance-management"] .customer-balance-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

body[data-page="customer-balance-management"] .customer-balance-form-grid .wide { grid-column: 1 / -1; }
body[data-page="customer-balance-management"] label { display:block; margin-bottom:5px; color:#58657a; font-size:.63rem; font-weight:850; }

body[data-page="customer-balance-management"] input {
    width: 100%;
    min-height: 42px;
    padding: 8px 11px;
    border: 1px solid #d8dee7;
    border-radius: 10px;
    color: #334155;
    background: linear-gradient(180deg, #fff, #fbfcfd);
    font: inherit;
    font-size: .69rem;
}

body[data-page="customer-balance-management"] input:focus {
    outline: none;
    border-color: rgba(var(--cb-primary-rgb), .50);
    box-shadow: 0 0 0 4px rgba(var(--cb-primary-rgb), .085);
}

body[data-page="customer-balance-management"] button,
body[data-page="customer-balance-management"] .clear-filter-btn {
    display: inline-flex;
    min-height: 40px;
    align-items: center;
    justify-content: center;
    margin-top: 11px;
    padding: 7px 14px;
    border-radius: 10px;
    font: inherit;
    font-size: .65rem;
    font-weight: 900;
    text-decoration: none;
    cursor: pointer;
}

body[data-page="customer-balance-management"] button {
    border: 1px solid var(--cb-primary-dark);
    color: #fff;
    background: linear-gradient(145deg, var(--cb-primary), var(--cb-primary-dark));
    box-shadow: 0 8px 18px rgba(var(--cb-primary-rgb), .20), inset 0 1px 0 rgba(255,255,255,.14);
}

body[data-page="customer-balance-management"] .clear-filter-btn {
    margin-left: 7px;
    color: var(--cb-primary-dark);
    border: 1px solid rgba(var(--cb-primary-rgb), .16);
    background: rgba(var(--cb-primary-rgb), .055);
}

body[data-page="customer-balance-management"] .customer-balance-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 11px;
}

body[data-page="customer-balance-management"] .customer-balance-card {
    position: relative;
    overflow: hidden;
    min-width: 0;
    padding: 15px;
    border: 1px solid rgba(var(--cb-primary-rgb), .13);
    border-radius: 15px;
    background: radial-gradient(circle at 100% 0%, rgba(var(--cb-primary-rgb), .07), transparent 155px), linear-gradient(145deg, #fff, #fafbfd);
    box-shadow: 0 9px 22px rgba(37,50,71,.055), inset 0 1px 0 #fff;
}

body[data-page="customer-balance-management"] .customer-balance-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: linear-gradient(180deg, var(--cb-success), var(--cb-primary));
}

body[data-page="customer-balance-management"] .customer-balance-card:has(.customer-balance-status.depleted) {
    border-color: rgba(var(--cb-danger-rgb), .16);
    background: radial-gradient(circle at 100% 0%, rgba(var(--cb-danger-rgb), .07), transparent 155px), linear-gradient(145deg, #fffafa, #fff);
}

body[data-page="customer-balance-management"] .customer-balance-card:has(.customer-balance-status.depleted)::before {
    background: linear-gradient(180deg, var(--cb-danger), #c98a91);
}

body[data-page="customer-balance-management"] .customer-balance-card-top {
    display:flex; align-items:flex-start; justify-content:space-between; gap:10px; margin-bottom:10px; padding-bottom:10px; border-bottom:1px solid rgba(var(--cb-primary-rgb), .09);
}

body[data-page="customer-balance-management"] .customer-balance-card-top h3 { margin:0; color:var(--cb-text); font-size:.92rem; }
body[data-page="customer-balance-management"] .customer-balance-meta { margin:4px 0 0; color:var(--cb-muted); font-size:.61rem; line-height:1.55; }

body[data-page="customer-balance-management"] .customer-balance-status {
    display:inline-flex; min-height:25px; align-items:center; padding:3px 8px; border:1px solid rgba(var(--cb-success-rgb), .14); border-radius:999px; color:var(--cb-success-dark); background:rgba(var(--cb-success-rgb), .11); font-size:.58rem; font-weight:900; white-space:nowrap;
}

body[data-page="customer-balance-management"] .customer-balance-status.depleted {
    color:var(--cb-danger-dark); border-color:rgba(var(--cb-danger-rgb), .14); background:rgba(var(--cb-danger-rgb), .10);
}

body[data-page="customer-balance-management"] .customer-balance-amount {
    margin:0 0 11px; padding:13px; border:1px solid rgba(var(--cb-copper-rgb), .18); border-radius:12px; color:var(--cb-copper-dark); background:radial-gradient(circle at 100% 0%, rgba(var(--cb-copper-rgb), .12), transparent 110px), linear-gradient(145deg, #fffaf2, #fff); font-size:1.32rem; font-weight:950; font-variant-numeric:tabular-nums;
}

body[data-page="customer-balance-management"] .customer-balance-amount::before { content:"当前余额"; display:block; margin-bottom:5px; color:#8a6b49; font-size:.56rem; font-weight:850; }
body[data-page="customer-balance-management"] .customer-balance-card .form-box { padding:11px; background:rgba(248,250,252,.80); }
body[data-page="customer-balance-management"] .customer-balance-card .form-box > div { margin-bottom:8px; }
body[data-page="customer-balance-management"] .customer-balance-card .form-box button { width:100%; margin-top:2px; border-color:var(--cb-copper-dark); background:linear-gradient(145deg, var(--cb-copper), var(--cb-copper-dark)); }

body[data-page="customer-balance-management"] .customer-balance-log-list { display:grid; gap:9px; }
body[data-page="customer-balance-management"] .customer-balance-log-card { position:relative; overflow:hidden; padding:14px; border:1px solid rgba(var(--cb-primary-rgb), .12); border-radius:13px; background:linear-gradient(145deg, #fff, #fafbfd); box-shadow:0 7px 18px rgba(37,50,71,.045); }
body[data-page="customer-balance-management"] .customer-balance-log-card::before { content:""; position:absolute; inset:0 auto 0 0; width:4px; background:linear-gradient(180deg, var(--cb-primary), rgba(var(--cb-primary-rgb), .35)); }
body[data-page="customer-balance-management"] .customer-balance-log-card:has(.customer-balance-change-positive)::before { background:linear-gradient(180deg, var(--cb-success), #8eaa9b); }
body[data-page="customer-balance-management"] .customer-balance-log-card:has(.customer-balance-change-negative)::before { background:linear-gradient(180deg, var(--cb-danger), #cb8e96); }
body[data-page="customer-balance-management"] .customer-balance-log-top { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; padding-bottom:9px; border-bottom:1px solid rgba(var(--cb-primary-rgb), .08); }
body[data-page="customer-balance-management"] .customer-balance-log-top strong { color:#27364a; font-size:.80rem; }
body[data-page="customer-balance-management"] .customer-balance-change-positive,
body[data-page="customer-balance-management"] .customer-balance-change-negative { display:inline-flex; min-height:29px; align-items:center; padding:4px 8px; border-radius:9px; font-size:.66rem; font-weight:950; font-variant-numeric:tabular-nums; white-space:nowrap; }
body[data-page="customer-balance-management"] .customer-balance-change-positive { color:var(--cb-success-dark); background:rgba(var(--cb-success-rgb), .11); }
body[data-page="customer-balance-management"] .customer-balance-change-negative { color:var(--cb-danger-dark); background:rgba(var(--cb-danger-rgb), .10); }
body[data-page="customer-balance-management"] .customer-balance-log-card > p:not(.customer-balance-meta):not(.customer-balance-change-negative) { margin:9px 0 0; padding:9px 10px; border:1px solid rgba(var(--cb-primary-rgb), .08); border-radius:9px; color:#445167; background:rgba(var(--cb-primary-rgb), .035); font-size:.66rem; font-weight:800; }
body[data-page="customer-balance-management"] .customer-balance-log-card > .customer-balance-meta { margin-top:7px; padding-left:9px; border-left:3px solid rgba(var(--cb-primary-rgb), .18); }
body[data-page="customer-balance-management"] .customer-balance-log-card > .customer-balance-change-negative { margin:8px 0 0; padding:8px 9px; border:1px solid rgba(var(--cb-danger-rgb), .13); border-radius:9px; background:rgba(var(--cb-danger-rgb), .07); }

body[data-page="customer-balance-management"] .empty-state-card { display:grid; min-height:90px; place-items:center; padding:16px; border:1px dashed var(--cb-line); border-radius:11px; color:var(--cb-muted); background:var(--cb-surface-soft); font-size:.70rem; text-align:center; }

body[data-page="customer-balance-management"] .bottom-nav { position:fixed; z-index:1000; left:50%; bottom:max(9px, env(safe-area-inset-bottom)); display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); width:min(calc(100% - 24px),460px); padding:5px; border:1px solid rgba(var(--cb-primary-rgb), .14); border-radius:15px; background:rgba(255,255,255,.94); box-shadow:0 16px 36px rgba(32,44,61,.15); backdrop-filter:blur(16px); transform:translateX(-50%); }
body[data-page="customer-balance-management"] .bottom-nav a { display:flex; min-height:38px; align-items:center; justify-content:center; padding:6px 8px; border-radius:10px; color:var(--cb-soft); font-size:.69rem; font-weight:850; text-decoration:none; }
body[data-page="customer-balance-management"] .bottom-nav a.active { color:#fff; background:linear-gradient(145deg, var(--cb-primary), var(--cb-primary-dark)); }

@media (max-width: 1000px) {
    body[data-page="customer-balance-management"] .container.page-with-nav { width:calc(100% - 24px); }
    body[data-page="customer-balance-management"] .customer-balance-grid { grid-template-columns:1fr; }
}

@media (max-width: 700px) {
    body[data-page="customer-balance-management"] .container.page-with-nav { width:calc(100% - 16px); padding:8px 0 86px; }
    body[data-page="customer-balance-management"] .customer-balance-hero { grid-template-columns:1fr; gap:12px; min-height:0; padding:17px 14px; border-radius:16px; }
    body[data-page="customer-balance-management"] .customer-balance-hero h1 { font-size:1.42rem; }
    body[data-page="customer-balance-management"] .customer-balance-hero > div:last-child { width:100%; }
    body[data-page="customer-balance-management"] .customer-balance-hero .header-action-btn { width:100%; min-height:37px; }
    body[data-page="customer-balance-management"] .customer-balance-panel { margin-bottom:9px; padding:12px; border-radius:13px; }
    body[data-page="customer-balance-management"] .section-title-row { margin-bottom:12px; padding:2px 2px 12px; }
    body[data-page="customer-balance-management"] .section-title-row h3 { font-size:.94rem; }
    body[data-page="customer-balance-management"] .section-title-row .section-subtitle { margin-top:7px; font-size:.67rem; line-height:1.65; }
    body[data-page="customer-balance-management"] .customer-balance-form-grid { grid-template-columns:1fr; gap:7px; }
    body[data-page="customer-balance-management"] .customer-balance-form-grid .wide { grid-column:auto; }
    body[data-page="customer-balance-management"] .form-box { padding:10px; }
    body[data-page="customer-balance-management"] button,
    body[data-page="customer-balance-management"] .clear-filter-btn { width:100%; margin:8px 0 0; }
    body[data-page="customer-balance-management"] .clear-filter-btn { margin-top:6px; }
    body[data-page="customer-balance-management"] .customer-balance-card { padding:11px; border-radius:12px; }
    body[data-page="customer-balance-management"] .customer-balance-amount { padding:11px; font-size:1.14rem; }
    body[data-page="customer-balance-management"] .customer-balance-log-card { padding:11px; border-radius:11px; }
    body[data-page="customer-balance-management"] .bottom-nav { bottom:max(7px, env(safe-area-inset-bottom)); width:calc(100% - 18px); max-width:430px; padding:4px; }
    body[data-page="customer-balance-management"] .bottom-nav a { min-height:36px; font-size:.65rem; }
}

@media (max-width: 390px) {
    body[data-page="customer-balance-management"] .customer-balance-log-top { grid-template-columns:1fr; }
    body[data-page="customer-balance-management"] .customer-balance-change-positive,
    body[data-page="customer-balance-management"] .customer-balance-change-negative { width:fit-content; }
}

/* =========================================================
   Manual Attendance Entry — Responsive Redesign
   Scope: body[data-page="manual-attendance-entry"]
   Load after global.css
   ========================================================= */

body[data-page="manual-attendance-entry"] {
    --ma-bg: #f2f4f7;
    --ma-surface: #ffffff;
    --ma-soft: #f8fafc;
    --ma-text: #253247;
    --ma-muted: #7e8a9d;
    --ma-line: #dce3eb;
    --ma-primary: #46566e;
    --ma-primary-dark: #29364a;
    --ma-primary-rgb: 70, 86, 110;
    --ma-gold: #b3844d;
    --ma-gold-dark: #72502c;
    --ma-gold-rgb: 179, 132, 77;
    --ma-success: #4d745e;
    --ma-warning: #a66b2f;
    --ma-danger: #a34e59;

    min-height: 100vh;
    margin: 0;
    color: var(--ma-text);
    background:
        radial-gradient(circle at 100% 0%, rgba(var(--ma-primary-rgb), .09), transparent 31rem),
        radial-gradient(circle at 0% 100%, rgba(var(--ma-gold-rgb), .055), transparent 28rem),
        linear-gradient(145deg, #eef1f5, #faf8f4);
    font-family: Inter, "Segoe UI", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

body[data-page="manual-attendance-entry"] *,
body[data-page="manual-attendance-entry"] *::before,
body[data-page="manual-attendance-entry"] *::after {
    box-sizing: border-box;
}

body[data-page="manual-attendance-entry"] .container.page-with-nav {
    width: min(calc(100% - 32px), 1320px);
    margin: 0 auto;
    padding: 18px 0 96px;
}

body[data-page="manual-attendance-entry"] .manual-entry-shell {
    display: grid;
    gap: 14px;
}

/* Hero */
body[data-page="manual-attendance-entry"] .manual-entry-hero {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 22px;
    min-height: 188px;
    margin: 0;
    padding: 25px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 22px;
    color: #fff;
    background:
        radial-gradient(circle at 12% 8%, rgba(255,255,255,.16), transparent 24%),
        radial-gradient(circle at 90% 110%, rgba(255,255,255,.12), transparent 38%),
        linear-gradient(120deg, rgba(255,255,255,.055), transparent 43%),
        linear-gradient(135deg, #263247 0%, #46566e 56%, #806039 100%);
    box-shadow: 0 23px 54px rgba(41,54,74,.22), inset 0 1px 0 rgba(255,255,255,.14);
}

body[data-page="manual-attendance-entry"] .manual-entry-hero::before {
    content: "MANUAL ATTENDANCE";
    position: absolute;
    z-index: -1;
    left: 20px;
    bottom: 10px;
    color: rgba(255,255,255,.042);
    font-size: clamp(2.9rem, 6.5vw, 6rem);
    font-weight: 950;
    line-height: .82;
    letter-spacing: -.08em;
}

body[data-page="manual-attendance-entry"] .manual-entry-hero::after {
    content: "";
    position: absolute;
    z-index: -1;
    right: -90px;
    top: -112px;
    width: 300px;
    height: 300px;
    border: 42px solid rgba(255,255,255,.035);
    border-radius: 50%;
}

body[data-page="manual-attendance-entry"] .manual-entry-hero .page-subtitle {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 27px;
    margin: 0 0 8px;
    padding: 4px 9px;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 999px;
    color: #f3e7d8;
    background: rgba(255,255,255,.09);
    font-size: .61rem;
    font-weight: 900;
    letter-spacing: .11em;
    text-transform: uppercase;
}

body[data-page="manual-attendance-entry"] .manual-entry-hero h1 {
    margin: 0;
    color: #fff;
    font-size: clamp(1.8rem, 3vw, 2.42rem);
    line-height: 1.16;
    letter-spacing: -.035em;
}

body[data-page="manual-attendance-entry"] .manual-entry-hero .section-subtitle {
    max-width: 760px;
    margin: 10px 0 0;
    color: rgba(255,255,255,.73);
    font-size: .73rem;
    line-height: 1.65;
}

body[data-page="manual-attendance-entry"] .manual-entry-hero .user-inline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
    margin-top: 12px;
    color: rgba(255,255,255,.78);
    font-size: .72rem;
}

body[data-page="manual-attendance-entry"] .manual-entry-hero .role-badge,
body[data-page="manual-attendance-entry"] .header-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255,255,255,.20);
    color: #fff;
    background: rgba(255,255,255,.12);
    font-weight: 900;
    text-decoration: none;
}

body[data-page="manual-attendance-entry"] .manual-entry-hero .role-badge {
    min-height: 25px;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: .63rem;
}

body[data-page="manual-attendance-entry"] .header-action-btn {
    min-height: 40px;
    padding: 7px 14px;
    border-radius: 10px;
    background: linear-gradient(145deg, rgba(255,255,255,.18), rgba(255,255,255,.07));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 8px 18px rgba(25,34,47,.16);
    font-size: .66rem;
}

/* Warning */
body[data-page="manual-attendance-entry"] .workspace-premium-reminder-card {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    align-items: center;
    gap: 11px;
    margin: 0;
    padding: 13px 15px;
    border: 1px solid rgba(166,107,47,.22);
    border-radius: 14px;
    background: linear-gradient(100deg, #fffaf2, #fff);
    box-shadow: 0 8px 21px rgba(166,107,47,.07);
}

body[data-page="manual-attendance-entry"] .workspace-premium-reminder-icon {
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
    border-radius: 10px;
    color: #fff;
    background: linear-gradient(145deg, var(--ma-warning), #74491f);
    font-weight: 950;
}

body[data-page="manual-attendance-entry"] .workspace-premium-reminder-card h3 {
    margin: 0;
    color: #71491f;
    font-size: .83rem;
}

body[data-page="manual-attendance-entry"] .workspace-premium-reminder-card p {
    margin: 3px 0 0;
    color: #85643d;
    font-size: .68rem;
    line-height: 1.55;
}

/* Panels */
body[data-page="manual-attendance-entry"] .manual-entry-panel {
    position: relative;
    overflow: hidden;
    margin: 0;
    padding: 19px;
    border: 1px solid rgba(var(--ma-primary-rgb), .13);
    border-radius: 17px;
    background: linear-gradient(145deg, #fff, #fafbfd);
    box-shadow: 0 12px 28px rgba(37,50,71,.06), inset 0 1px 0 #fff;
}

body[data-page="manual-attendance-entry"] .manual-entry-panel::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 5px;
    background: linear-gradient(180deg, var(--ma-primary), var(--ma-gold));
}

body[data-page="manual-attendance-entry"] .manual-entry-panel > .section-title-row {
    display: block;
    margin-bottom: 15px;
    padding: 2px 3px 14px;
    border-bottom: 1px solid rgba(var(--ma-primary-rgb), .10);
}

body[data-page="manual-attendance-entry"] .manual-entry-panel > .section-title-row h3 {
    position: relative;
    margin: 0;
    padding-left: 13px;
    color: var(--ma-primary-dark);
    font-size: 1rem;
    line-height: 1.35;
}

body[data-page="manual-attendance-entry"] .manual-entry-panel > .section-title-row h3::before {
    content: "";
    position: absolute;
    left: 0;
    top: .17em;
    width: 4px;
    height: 1.02em;
    border-radius: 999px;
    background: linear-gradient(180deg, var(--ma-primary), var(--ma-gold));
}

body[data-page="manual-attendance-entry"] .manual-entry-panel > .section-title-row .section-subtitle {
    max-width: 920px;
    margin: 8px 0 0;
    color: var(--ma-muted);
    font-size: .69rem;
    line-height: 1.7;
}

/* Mode cards */
body[data-page="manual-attendance-entry"] .manual-entry-mode-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 11px;
}

body[data-page="manual-attendance-entry"] .manual-entry-mode-card {
    position: relative;
    display: grid;
    grid-template-rows: auto auto auto 1fr auto;
    gap: 9px;
    min-width: 0;
    min-height: 250px;
    padding: 16px;
    overflow: hidden;
    border: 1px solid rgba(var(--ma-primary-rgb), .13);
    border-radius: 15px;
    background: linear-gradient(145deg, #fff, #f9fafc);
    box-shadow: 0 8px 20px rgba(37,50,71,.045);
    transition: .18s ease;
}

body[data-page="manual-attendance-entry"] .manual-entry-mode-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: linear-gradient(180deg, var(--ma-primary), rgba(var(--ma-primary-rgb), .32));
}

body[data-page="manual-attendance-entry"] .manual-entry-mode-card:nth-child(2)::before {
    background: linear-gradient(180deg, var(--ma-gold), var(--ma-gold-dark));
}

body[data-page="manual-attendance-entry"] .manual-entry-mode-card:nth-child(3)::before {
    background: linear-gradient(180deg, var(--ma-success), #345342);
}

body[data-page="manual-attendance-entry"] .manual-entry-mode-card.is-active {
    border-color: rgba(var(--ma-primary-rgb), .48);
    background: linear-gradient(145deg, rgba(var(--ma-primary-rgb), .075), #fff 58%);
    box-shadow: 0 13px 30px rgba(var(--ma-primary-rgb), .14);
}

body[data-page="manual-attendance-entry"] .manual-entry-mode-icon {
    display: grid;
    width: 40px;
    height: 40px;
    place-items: center;
    border-radius: 12px;
    color: #fff;
    background: linear-gradient(145deg, var(--ma-primary), var(--ma-primary-dark));
    font-size: .75rem;
    font-weight: 950;
}

body[data-page="manual-attendance-entry"] .manual-entry-mode-card:nth-child(2) .manual-entry-mode-icon {
    background: linear-gradient(145deg, var(--ma-gold), var(--ma-gold-dark));
}

body[data-page="manual-attendance-entry"] .manual-entry-mode-card:nth-child(3) .manual-entry-mode-icon {
    background: linear-gradient(145deg, var(--ma-success), #345342);
}

body[data-page="manual-attendance-entry"] .manual-entry-mode-card h3 {
    margin: 0;
    color: #263448;
    font-size: .88rem;
}

body[data-page="manual-attendance-entry"] .manual-entry-mode-card p,
body[data-page="manual-attendance-entry"] .manual-entry-mode-card ul {
    margin: 0;
    color: #667489;
    font-size: .65rem;
    line-height: 1.55;
}

body[data-page="manual-attendance-entry"] .manual-entry-mode-card ul {
    padding-left: 16px;
}

/* Buttons / forms */
body[data-page="manual-attendance-entry"] button {
    min-height: 40px;
    padding: 7px 13px;
    border: 1px solid var(--ma-primary-dark);
    border-radius: 10px;
    color: #fff;
    background: linear-gradient(145deg, var(--ma-primary), var(--ma-primary-dark));
    box-shadow: 0 8px 18px rgba(var(--ma-primary-rgb), .19);
    font: inherit;
    font-size: .64rem;
    font-weight: 900;
    cursor: pointer;
}

body[data-page="manual-attendance-entry"] .form-box {
    margin: 0;
    padding: 15px;
    border: 1px solid rgba(var(--ma-primary-rgb), .09);
    border-radius: 13px;
    background: rgba(255,255,255,.86);
}

body[data-page="manual-attendance-entry"] .manual-entry-form-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

body[data-page="manual-attendance-entry"] .manual-entry-form-grid .wide {
    grid-column: 1 / -1;
}

body[data-page="manual-attendance-entry"] label {
    display: block;
    margin-bottom: 5px;
    color: #596579;
    font-size: .63rem;
    font-weight: 850;
}

body[data-page="manual-attendance-entry"] input,
body[data-page="manual-attendance-entry"] select,
body[data-page="manual-attendance-entry"] textarea {
    width: 100%;
    min-height: 42px;
    padding: 8px 10px;
    border: 1px solid #d8dee7;
    border-radius: 10px;
    color: #334155;
    background: linear-gradient(180deg, #fff, #fbfcfd);
    font: inherit;
    font-size: .69rem;
}

body[data-page="manual-attendance-entry"] textarea {
    min-height: 92px;
    resize: vertical;
    line-height: 1.55;
}

body[data-page="manual-attendance-entry"] input:focus,
body[data-page="manual-attendance-entry"] select:focus,
body[data-page="manual-attendance-entry"] textarea:focus {
    outline: none;
    border-color: rgba(var(--ma-primary-rgb), .52);
    box-shadow: 0 0 0 4px rgba(var(--ma-primary-rgb), .085);
}

body[data-page="manual-attendance-entry"] .manual-entry-subsection {
    margin-top: 17px;
    padding-top: 17px;
    border-top: 1px solid rgba(var(--ma-primary-rgb), .10);
}

body[data-page="manual-attendance-entry"] .manual-entry-subsection:first-of-type {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

body[data-page="manual-attendance-entry"] .manual-entry-subsection-title {
    display: block;
    margin-bottom: 12px;
}

body[data-page="manual-attendance-entry"] .manual-entry-subsection-title h3,
body[data-page="manual-attendance-entry"] .manual-entry-subsection-title h4 {
    margin: 0;
    color: #2b394d;
    font-size: .84rem;
}

body[data-page="manual-attendance-entry"] .manual-entry-subsection-title .section-subtitle {
    margin: 6px 0 0;
    color: var(--ma-muted);
    font-size: .65rem;
    line-height: 1.6;
}

body[data-page="manual-attendance-entry"] .manual-entry-check-row {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    gap: 9px;
    margin: 0;
    padding: 11px 12px;
    border: 1px solid rgba(var(--ma-primary-rgb), .09);
    border-radius: 11px;
    background: rgba(var(--ma-primary-rgb), .045);
}

body[data-page="manual-attendance-entry"] .manual-entry-check-row input[type="checkbox"] {
    width: 18px;
    height: 18px;
    min-height: 0;
    margin: 2px 0 0;
    padding: 0;
    accent-color: var(--ma-primary);
}

body[data-page="manual-attendance-entry"] .manual-entry-overview-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 7px;
}

body[data-page="manual-attendance-entry"] .manual-entry-overview-grid > div {
    padding: 9px;
    border-radius: 9px;
    background: rgba(var(--ma-primary-rgb), .04);
}

body[data-page="manual-attendance-entry"] .manual-entry-record-list,
body[data-page="manual-attendance-entry"] .manual-entry-audit-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
}

body[data-page="manual-attendance-entry"] .manual-entry-record-card,
body[data-page="manual-attendance-entry"] .manual-entry-audit-card {
    padding: 12px;
    border: 1px solid rgba(var(--ma-primary-rgb), .11);
    border-radius: 12px;
    background: linear-gradient(145deg, #fff, #fafbfd);
    box-shadow: 0 7px 17px rgba(37,50,71,.04);
}

body[data-page="manual-attendance-entry"] .manual-entry-action-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 15px;
}

body[data-page="manual-attendance-entry"] .manual-entry-dialog {
    width: min(680px, calc(100vw - 28px));
    max-height: calc(100dvh - 28px);
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: 18px;
    background: #fff;
}

body[data-page="manual-attendance-entry"] .manual-entry-dialog-content {
    max-height: calc(100dvh - 28px);
    padding: 20px;
    overflow-y: auto;
}

body[data-page="manual-attendance-entry"] .manual-entry-preview {
    max-height: 48vh;
    margin: 13px 0;
    padding: 13px;
    overflow-y: auto;
    border-radius: 11px;
    background: rgba(var(--ma-primary-rgb), .045);
    font-size: .68rem;
    line-height: 1.65;
}

body[data-page="manual-attendance-entry"] .bottom-nav {
    position: fixed;
    z-index: 1000;
    left: 50%;
    bottom: max(9px, env(safe-area-inset-bottom));
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: min(calc(100% - 24px), 460px);
    padding: 5px;
    border: 1px solid rgba(var(--ma-primary-rgb), .14);
    border-radius: 15px;
    background: rgba(255,255,255,.94);
    box-shadow: 0 16px 36px rgba(41,54,74,.15);
    transform: translateX(-50%);
}

body[data-page="manual-attendance-entry"] .bottom-nav a {
    display: flex;
    min-height: 38px;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    color: #667489;
    font-size: .69rem;
    font-weight: 850;
    text-decoration: none;
}

body[data-page="manual-attendance-entry"] .bottom-nav a.active {
    color: #fff;
    background: linear-gradient(145deg, var(--ma-primary), var(--ma-primary-dark));
}

body[data-page="manual-attendance-entry"] [hidden] {
    display: none !important;
}

/* iPad / tablet */
@media (max-width: 1100px) {
    body[data-page="manual-attendance-entry"] .container.page-with-nav {
        width: calc(100% - 24px);
        max-width: 980px;
    }

    body[data-page="manual-attendance-entry"] .manual-entry-form-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body[data-page="manual-attendance-entry"] .manual-entry-overview-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 820px) {
    body[data-page="manual-attendance-entry"] .manual-entry-mode-grid {
        grid-template-columns: 1fr;
    }

    body[data-page="manual-attendance-entry"] .manual-entry-mode-card {
        grid-template-columns: 42px minmax(0, 1fr) auto;
        grid-template-rows: auto auto auto;
        min-height: 0;
        padding: 13px;
    }

    body[data-page="manual-attendance-entry"] .manual-entry-mode-icon {
        grid-column: 1;
        grid-row: 1 / span 2;
    }

    body[data-page="manual-attendance-entry"] .manual-entry-mode-card h3 {
        grid-column: 2;
        grid-row: 1;
    }

    body[data-page="manual-attendance-entry"] .manual-entry-mode-card > p {
        grid-column: 2;
        grid-row: 2;
    }

    body[data-page="manual-attendance-entry"] .manual-entry-mode-card ul {
        grid-column: 1 / -1;
        grid-row: 3;
        columns: 2;
        column-gap: 28px;
        padding-top: 9px;
        border-top: 1px solid rgba(var(--ma-primary-rgb), .08);
    }

    body[data-page="manual-attendance-entry"] .manual-entry-mode-card button {
        grid-column: 3;
        grid-row: 1 / span 2;
        align-self: center;
        min-width: 130px;
        margin: 0;
    }
}

/* Mobile */
@media (max-width: 700px) {
    body[data-page="manual-attendance-entry"] .container.page-with-nav {
        width: calc(100% - 16px);
        max-width: 640px;
        padding: 8px 0 86px;
    }

    body[data-page="manual-attendance-entry"] .manual-entry-shell {
        gap: 9px;
    }

    body[data-page="manual-attendance-entry"] .manual-entry-hero {
        grid-template-columns: 1fr;
        min-height: 0;
        padding: 16px 14px;
        border-radius: 16px;
    }

    body[data-page="manual-attendance-entry"] .manual-entry-hero h1 {
        font-size: 1.39rem;
    }

    body[data-page="manual-attendance-entry"] .manual-entry-hero > .header-action-btn {
        width: 100%;
    }

    body[data-page="manual-attendance-entry"] .workspace-premium-reminder-card {
        grid-template-columns: 31px minmax(0, 1fr);
        padding: 10px 11px;
    }

    body[data-page="manual-attendance-entry"] .workspace-premium-reminder-icon {
        width: 31px;
        height: 31px;
    }

    body[data-page="manual-attendance-entry"] .manual-entry-panel {
        padding: 12px;
        border-radius: 13px;
    }

    body[data-page="manual-attendance-entry"] .manual-entry-mode-grid {
        gap: 7px;
    }

    body[data-page="manual-attendance-entry"] .manual-entry-mode-card {
        grid-template-columns: 36px minmax(0, 1fr) 92px;
        grid-template-rows: auto auto;
        align-items: center;
        gap: 4px 9px;
        padding: 10px;
        border-radius: 11px;
    }

    body[data-page="manual-attendance-entry"] .manual-entry-mode-icon {
        width: 36px;
        height: 36px;
        border-radius: 10px;
    }

    body[data-page="manual-attendance-entry"] .manual-entry-mode-card h3 {
        font-size: .75rem;
    }

    body[data-page="manual-attendance-entry"] .manual-entry-mode-card > p {
        display: -webkit-box;
        overflow: hidden;
        font-size: .59rem;
        line-height: 1.4;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    body[data-page="manual-attendance-entry"] .manual-entry-mode-card ul {
        display: none;
    }

    body[data-page="manual-attendance-entry"] .manual-entry-mode-card button {
        width: 92px;
        min-width: 0;
        min-height: 34px;
        padding: 5px 7px;
        font-size: .57rem;
    }

    body[data-page="manual-attendance-entry"] .form-box {
        padding: 10px;
    }

    body[data-page="manual-attendance-entry"] .manual-entry-form-grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    body[data-page="manual-attendance-entry"] .manual-entry-form-grid .wide {
        grid-column: auto;
    }

    body[data-page="manual-attendance-entry"] input,
    body[data-page="manual-attendance-entry"] select,
    body[data-page="manual-attendance-entry"] textarea {
        min-height: 43px;
        font-size: 16px;
    }

    body[data-page="manual-attendance-entry"] .manual-entry-overview-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body[data-page="manual-attendance-entry"] .manual-entry-overview-grid > div:last-child {
        grid-column: 1 / -1;
    }

    body[data-page="manual-attendance-entry"] .manual-entry-record-list,
    body[data-page="manual-attendance-entry"] .manual-entry-audit-list {
        grid-template-columns: 1fr;
        gap: 7px;
    }

    body[data-page="manual-attendance-entry"] .manual-entry-action-row {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 7px;
    }

    body[data-page="manual-attendance-entry"] .manual-entry-action-row > button,
    body[data-page="manual-attendance-entry"] .manual-entry-action-row > a {
        width: 100%;
        min-width: 0;
    }

    body[data-page="manual-attendance-entry"] .manual-entry-action-row > :only-child {
        grid-column: 1 / -1;
    }

    body[data-page="manual-attendance-entry"] .manual-entry-dialog {
        width: calc(100vw - 16px);
        max-height: calc(100dvh - 16px);
        border-radius: 14px;
    }

    body[data-page="manual-attendance-entry"] .manual-entry-dialog-content {
        max-height: calc(100dvh - 16px);
        padding: 14px;
    }

    body[data-page="manual-attendance-entry"] .bottom-nav {
        bottom: max(7px, env(safe-area-inset-bottom));
        width: calc(100% - 18px);
        max-width: 430px;
        padding: 4px;
    }
}

@media (max-width: 390px) {
    body[data-page="manual-attendance-entry"] .container.page-with-nav {
        width: calc(100% - 12px);
    }

    body[data-page="manual-attendance-entry"] .manual-entry-mode-card {
        grid-template-columns: 34px minmax(0, 1fr) 80px;
        gap: 4px 7px;
        padding: 8px;
    }

    body[data-page="manual-attendance-entry"] .manual-entry-mode-card button {
        width: 80px;
        padding-inline: 4px;
        font-size: .53rem;
    }

    body[data-page="manual-attendance-entry"] .manual-entry-action-row {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    body[data-page="manual-attendance-entry"] *,
    body[data-page="manual-attendance-entry"] *::before,
    body[data-page="manual-attendance-entry"] *::after {
        animation: none !important;
        transition: none !important;
    }
}
/* =========================================================
   Manual Attendance Entry — Mobile Density & Alignment Fix
   Scope: body[data-page="manual-attendance-entry"]
   Load after manual-attendance-entry-responsive-redesign.css
   ========================================================= */

/* ---------- Main section heading refinement ---------- */
body[data-page="manual-attendance-entry"]
.manual-entry-panel
> .section-title-row {
    margin-bottom: 14px;
    padding: 0 2px 13px;
}

body[data-page="manual-attendance-entry"]
.manual-entry-panel
> .section-title-row
> div {
    min-width: 0;
}

body[data-page="manual-attendance-entry"]
.manual-entry-panel
> .section-title-row h3 {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 26px;
    padding-left: 0;
    color: #263448;
    font-size: 1rem;
    font-weight: 900;
    line-height: 1.35;
    letter-spacing: -.018em;
}

body[data-page="manual-attendance-entry"]
.manual-entry-panel
> .section-title-row h3::before {
    position: static;
    flex: 0 0 5px;
    width: 5px;
    height: 20px;
    border-radius: 999px;
    background:
        linear-gradient(
            180deg,
            var(--ma-gold),
            var(--ma-primary)
        );
    box-shadow:
        0 0 0 4px rgba(var(--ma-gold-rgb), .07);
}

body[data-page="manual-attendance-entry"]
.manual-entry-panel
> .section-title-row .section-subtitle {
    max-width: 900px;
    margin: 7px 0 0 14px;
    color: #7a8798;
    font-size: .69rem;
    font-weight: 500;
    line-height: 1.62;
}

/* ---------- Audit card: compact and balanced ---------- */
body[data-page="manual-attendance-entry"]
.manual-entry-audit-card {
    display: grid;
    align-content: start;
    gap: 5px;
    min-height: 0;
    padding: 12px 13px;
}

body[data-page="manual-attendance-entry"]
.manual-entry-audit-card strong {
    display: block;
    margin: 0;
    color: #2c394d;
    font-size: .79rem;
    line-height: 1.52;
}

body[data-page="manual-attendance-entry"]
.manual-entry-audit-card p {
    margin: 0;
    color: var(--ma-muted);
    font-size: .70rem;
    line-height: 1.45;
}

/* ---------- Check row: reduce vertical bulk ---------- */
body[data-page="manual-attendance-entry"]
.manual-entry-check-row {
    grid-template-columns: 18px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    min-height: 0;
    padding: 9px 10px;
}

body[data-page="manual-attendance-entry"]
.manual-entry-check-row input[type="checkbox"] {
    align-self: start;
    width: 17px;
    height: 17px;
    margin-top: 1px;
}

body[data-page="manual-attendance-entry"]
.manual-entry-check-row span {
    display: block;
    margin: 0;
    font-size: .62rem;
    line-height: 1.42;
}

body[data-page="manual-attendance-entry"]
.manual-entry-check-row strong {
    display: inline;
    font-size: .65rem;
    line-height: 1.35;
}

/* Remove excessive line break height caused by <br> */
body[data-page="manual-attendance-entry"]
.manual-entry-check-row br {
    display: none;
}

body[data-page="manual-attendance-entry"]
.manual-entry-check-row strong::after {
    content: " ";
}

/* ---------- Mobile ---------- */
@media (max-width: 700px) {
    body[data-page="manual-attendance-entry"]
    .manual-entry-panel
    > .section-title-row {
        margin-bottom: 10px;
        padding: 0 1px 10px;
    }

    body[data-page="manual-attendance-entry"]
    .manual-entry-panel
    > .section-title-row h3 {
        gap: 8px;
        min-height: 23px;
        font-size: .88rem;
        line-height: 1.32;
    }

    body[data-page="manual-attendance-entry"]
    .manual-entry-panel
    > .section-title-row h3::before {
        flex-basis: 4px;
        width: 4px;
        height: 18px;
        box-shadow:
            0 0 0 3px
            rgba(var(--ma-gold-rgb), .065);
    }

    body[data-page="manual-attendance-entry"]
    .manual-entry-panel
    > .section-title-row .section-subtitle {
        margin: 5px 0 0 12px;
        font-size: .62rem;
        line-height: 1.5;
    }

    /* Compact audit list */
    body[data-page="manual-attendance-entry"]
    .manual-entry-audit-list {
        gap: 6px;
    }

    body[data-page="manual-attendance-entry"]
    .manual-entry-audit-card {
        gap: 3px;
        min-height: 0;
        padding: 9px 10px 9px 12px;
        border-radius: 10px;
    }

    body[data-page="manual-attendance-entry"]
    .manual-entry-audit-card::before {
        width: 3px;
    }

    body[data-page="manual-attendance-entry"]
    .manual-entry-audit-card strong {
        font-size: .74rem;
        line-height: 1.38;
    }

    body[data-page="manual-attendance-entry"]
    .manual-entry-audit-card p {
        font-size: .60rem;
        line-height: 1.38;
    }

    /* Compact checkbox rows */
    body[data-page="manual-attendance-entry"]
    .manual-entry-check-row {
        grid-template-columns: 17px minmax(0, 1fr);
        gap: 7px;
        padding: 8px 9px;
        border-radius: 9px;
    }

    body[data-page="manual-attendance-entry"]
    .manual-entry-check-row input[type="checkbox"] {
        width: 16px;
        height: 16px;
        margin-top: 1px;
    }

    body[data-page="manual-attendance-entry"]
    .manual-entry-check-row span {
        font-size: .58rem;
        line-height: 1.38;
    }

    body[data-page="manual-attendance-entry"]
    .manual-entry-check-row strong {
        font-size: .61rem;
    }

    /* Symmetric vertical spacing for subsections */
    body[data-page="manual-attendance-entry"]
    .manual-entry-subsection {
        margin-top: 12px;
        padding-top: 12px;
    }

    body[data-page="manual-attendance-entry"]
    .manual-entry-subsection-title {
        margin-bottom: 8px;
    }
}

/* ---------- Very small phones ---------- */
@media (max-width: 390px) {
    body[data-page="manual-attendance-entry"]
    .manual-entry-panel
    > .section-title-row h3 {
        font-size: .84rem;
    }

    body[data-page="manual-attendance-entry"]
    .manual-entry-panel
    > .section-title-row .section-subtitle {
        margin-left: 11px;
        font-size: .59rem;
    }

    body[data-page="manual-attendance-entry"]
    .manual-entry-audit-card {
        padding: 8px 9px 8px 11px;
    }

    body[data-page="manual-attendance-entry"]
    .manual-entry-check-row {
        padding: 7px 8px;
    }
}

/* =========================================================
   Manual Attendance Entry — Audit Button + Checkbox Row Fix
   Scope: body[data-page="manual-attendance-entry"]
   Load after all previous manual attendance CSS files
   ========================================================= */

/* =========================================================
   1. Restore the audit link button on light panels
   ========================================================= */

body[data-page="manual-attendance-entry"]
.manual-entry-panel
.manual-entry-action-row
a.header-action-btn {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    min-width: 160px;
    min-height: 38px;
    align-items: center;
    justify-content: center;
    padding: 7px 13px;
    border: 1px solid var(--ma-primary-dark);
    border-radius: 10px;
    color: #ffffff !important;
    background:
        linear-gradient(
            145deg,
            var(--ma-primary),
            var(--ma-primary-dark)
        ) !important;
    box-shadow:
        0 8px 18px rgba(var(--ma-primary-rgb), .19),
        inset 0 1px 0 rgba(255,255,255,.14);
    font-size: .64rem;
    font-weight: 900;
    line-height: 1.25;
    text-decoration: none !important;
}

body[data-page="manual-attendance-entry"]
.manual-entry-panel
.manual-entry-action-row
a.header-action-btn:hover {
    color: #ffffff !important;
    border-color: var(--ma-primary-dark);
    background:
        linear-gradient(
            145deg,
            var(--ma-primary-dark),
            var(--ma-primary)
        ) !important;
}

/* =========================================================
   2. Force checkbox text to stay horizontal and compact
   ========================================================= */

body[data-page="manual-attendance-entry"]
.manual-entry-check-row {
    display: grid !important;
    grid-template-columns: 18px minmax(0, 1fr) !important;
    grid-auto-flow: row;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    align-items: start !important;
    gap: 8px !important;
    padding: 9px 10px !important;
    overflow: visible !important;
}

body[data-page="manual-attendance-entry"]
.manual-entry-check-row
> input[type="checkbox"] {
    grid-column: 1;
    grid-row: 1;
    width: 17px !important;
    height: 17px !important;
    min-width: 17px !important;
    min-height: 17px !important;
    margin: 1px 0 0 !important;
    padding: 0 !important;
}

body[data-page="manual-attendance-entry"]
.manual-entry-check-row
> span {
    grid-column: 2;
    grid-row: 1;
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;

    writing-mode: horizontal-tb !important;
    text-orientation: mixed !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: anywhere !important;

    color: var(--ma-soft);
    font-size: .62rem;
    line-height: 1.48;
    text-align: left;
}

body[data-page="manual-attendance-entry"]
.manual-entry-check-row
> span strong {
    display: inline !important;
    width: auto !important;
    margin: 0 4px 0 0 !important;
    padding: 0 !important;

    writing-mode: horizontal-tb !important;
    white-space: normal !important;
    word-break: keep-all !important;

    color: #344258;
    font-size: .65rem;
    line-height: inherit;
}

/* Keep the original line break from creating a tall empty line */
body[data-page="manual-attendance-entry"]
.manual-entry-check-row
> span br {
    display: none !important;
}

/* Make sure a wide checkbox item still occupies the full form row */
body[data-page="manual-attendance-entry"]
.manual-entry-form-grid
> .wide
.manual-entry-check-row,
body[data-page="manual-attendance-entry"]
.manual-entry-form-grid
> label.manual-entry-check-row {
    width: 100% !important;
    max-width: none !important;
}

/* =========================================================
   Mobile
   ========================================================= */

@media (max-width: 700px) {
    body[data-page="manual-attendance-entry"]
    .manual-entry-check-row {
        grid-template-columns: 17px minmax(0, 1fr) !important;
        gap: 7px !important;
        padding: 8px 9px !important;
        border-radius: 9px;
    }

    body[data-page="manual-attendance-entry"]
    .manual-entry-check-row
    > input[type="checkbox"] {
        width: 16px !important;
        height: 16px !important;
        min-width: 16px !important;
        min-height: 16px !important;
    }

    body[data-page="manual-attendance-entry"]
    .manual-entry-check-row
    > span {
        font-size: .59rem;
        line-height: 1.42;
    }

    body[data-page="manual-attendance-entry"]
    .manual-entry-check-row
    > span strong {
        font-size: .62rem;
    }

    body[data-page="manual-attendance-entry"]
    .manual-entry-panel
    .manual-entry-action-row
    a.header-action-btn {
        width: 100%;
        min-width: 0;
        min-height: 38px;
    }
}

@media (max-width: 390px) {
    body[data-page="manual-attendance-entry"]
    .manual-entry-check-row {
        padding: 7px 8px !important;
    }

    body[data-page="manual-attendance-entry"]
    .manual-entry-check-row
    > span {
        font-size: .57rem;
        line-height: 1.4;
    }
}

/* =========================================================
   Manual Attendance Entry — Checkbox Text Recovery Fix
   Scope: body[data-page="manual-attendance-entry"]
   Load after ALL previous manual attendance CSS files
   ========================================================= */

/* Reset the checkbox row safely */
body[data-page="manual-attendance-entry"]
label.manual-entry-check-row {
    display: grid !important;
    grid-template-columns: 18px minmax(0, 1fr) !important;
    grid-template-rows: auto !important;
    align-items: start !important;
    gap: 8px !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 9px 10px !important;
    overflow: visible !important;

    writing-mode: horizontal-tb !important;
    text-orientation: mixed !important;
}

/* Checkbox */
body[data-page="manual-attendance-entry"]
label.manual-entry-check-row
> input[type="checkbox"] {
    grid-column: 1 !important;
    grid-row: 1 !important;

    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;

    width: 17px !important;
    height: 17px !important;
    min-width: 17px !important;
    min-height: 17px !important;
    max-width: 17px !important;
    max-height: 17px !important;

    margin: 2px 0 0 !important;
    padding: 0 !important;
    writing-mode: horizontal-tb !important;
}

/* Main text container */
body[data-page="manual-attendance-entry"]
label.manual-entry-check-row
> span {
    grid-column: 2 !important;
    grid-row: 1 !important;

    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;

    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;

    color: #596579 !important;
    font-size: .64rem !important;
    font-weight: 500 !important;
    line-height: 1.48 !important;

    writing-mode: horizontal-tb !important;
    text-orientation: mixed !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    text-align: left !important;
}

/* Title inside checkbox description */
body[data-page="manual-attendance-entry"]
label.manual-entry-check-row
> span
> strong {
    display: inline !important;
    visibility: visible !important;
    opacity: 1 !important;

    width: auto !important;
    max-width: none !important;
    height: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    color: #2f3d51 !important;
    font-size: .67rem !important;
    font-weight: 850 !important;
    line-height: inherit !important;

    writing-mode: horizontal-tb !important;
    white-space: normal !important;
    word-break: keep-all !important;
}

/* Restore the original line break */
body[data-page="manual-attendance-entry"]
label.manual-entry-check-row
> span
> br {
    display: block !important;
    content: "" !important;
    height: 0 !important;
    margin: 2px 0 0 !important;
}

/* Small hint / preview inside checkbox row */
body[data-page="manual-attendance-entry"]
label.manual-entry-check-row
> span
> small {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;

    margin: 4px 0 0 !important;
    padding: 0 !important;
    overflow: visible !important;

    color: #8792a2 !important;
    font-size: .57rem !important;
    font-weight: 500 !important;
    line-height: 1.42 !important;

    writing-mode: horizontal-tb !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
}

/* Make sure the parent wide field does not collapse */
body[data-page="manual-attendance-entry"]
.manual-entry-form-grid
> .wide {
    min-width: 0 !important;
    width: 100% !important;
}

/* Mobile */
@media (max-width: 700px) {
    body[data-page="manual-attendance-entry"]
    label.manual-entry-check-row {
        grid-template-columns: 17px minmax(0, 1fr) !important;
        gap: 7px !important;
        padding: 8px 9px !important;
        border-radius: 9px;
    }

    body[data-page="manual-attendance-entry"]
    label.manual-entry-check-row
    > input[type="checkbox"] {
        width: 16px !important;
        height: 16px !important;
        min-width: 16px !important;
        min-height: 16px !important;
        max-width: 16px !important;
        max-height: 16px !important;
    }

    body[data-page="manual-attendance-entry"]
    label.manual-entry-check-row
    > span {
        font-size: .60rem !important;
        line-height: 1.43 !important;
    }

    body[data-page="manual-attendance-entry"]
    label.manual-entry-check-row
    > span
    > strong {
        font-size: .63rem !important;
    }

    body[data-page="manual-attendance-entry"]
    label.manual-entry-check-row
    > span
    > small {
        margin-top: 3px !important;
        font-size: .55rem !important;
        line-height: 1.38 !important;
    }
}

/* Very small phones */
@media (max-width: 390px) {
    body[data-page="manual-attendance-entry"]
    label.manual-entry-check-row {
        padding: 7px 8px !important;
    }

    body[data-page="manual-attendance-entry"]
    label.manual-entry-check-row
    > span {
        font-size: .58rem !important;
    }

    body[data-page="manual-attendance-entry"]
    label.manual-entry-check-row
    > span
    > strong {
        font-size: .61rem !important;
    }
}

/* Manual Attendance Audit — Responsive Premium UI */
body[data-page="manual-attendance-audit"]{
  --aa-p:#46566e;--aa-pd:#29364a;--aa-pr:70,86,110;
  --aa-g:#b1844d;--aa-gd:#72502c;--aa-gr:177,132,77;
  --aa-ok:#4c745e;--aa-okr:76,116,94;
  --aa-bad:#a24d58;--aa-badr:162,77,88;
  --aa-text:#273448;--aa-muted:#8b96a7;--aa-line:#dde4ec;
  min-height:100vh;color:var(--aa-text);
  background:radial-gradient(circle at 100% 0%,rgba(var(--aa-pr),.09),transparent 31rem),
             radial-gradient(circle at 0% 100%,rgba(var(--aa-gr),.055),transparent 28rem),
             linear-gradient(145deg,#eef1f5,#faf8f4);
}
body[data-page="manual-attendance-audit"] *{box-sizing:border-box}
body[data-page="manual-attendance-audit"] .container.page-with-nav{
  width:min(calc(100% - 32px),1320px);max-width:1320px;margin:auto;padding:18px 0 96px
}
body[data-page="manual-attendance-audit"] .manual-audit-shell{display:grid;gap:14px}

/* Hero */
body[data-page="manual-attendance-audit"] .attendance-management-hero{
  position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,1fr) auto;
  align-items:center;gap:22px;min-height:190px;padding:25px;overflow:hidden;
  border:1px solid rgba(255,255,255,.22);border-radius:22px;color:#fff;
  background:radial-gradient(circle at 12% 8%,rgba(255,255,255,.16),transparent 24%),
             radial-gradient(circle at 90% 110%,rgba(255,255,255,.11),transparent 38%),
             linear-gradient(135deg,#263247 0%,#46566e 56%,#806039 100%);
  box-shadow:0 23px 54px rgba(41,54,74,.22),inset 0 1px 0 rgba(255,255,255,.14)
}
body[data-page="manual-attendance-audit"] .attendance-management-hero:before{
  content:"AUDIT LOG";position:absolute;z-index:-1;left:20px;bottom:10px;
  color:rgba(255,255,255,.042);font-size:clamp(3rem,6.7vw,6rem);
  font-weight:950;line-height:.82;letter-spacing:-.08em
}
body[data-page="manual-attendance-audit"] .attendance-management-hero:after{
  content:"";position:absolute;z-index:-1;right:-90px;top:-112px;width:300px;height:300px;
  border:42px solid rgba(255,255,255,.035);border-radius:50%
}
body[data-page="manual-attendance-audit"] .attendance-management-hero h1{
  margin:0;color:#fff;font-size:clamp(1.8rem,3vw,2.42rem);line-height:1.16;letter-spacing:-.035em
}
body[data-page="manual-attendance-audit"] .attendance-management-hero .section-subtitle{
  max-width:760px;margin:10px 0 0;color:rgba(255,255,255,.73);font-size:.73rem;line-height:1.65
}
body[data-page="manual-attendance-audit"] .attendance-management-hero .page-subtitle{
  display:inline-flex;align-items:center;gap:7px;min-height:27px;margin:0 0 8px;padding:4px 9px;
  border:1px solid rgba(255,255,255,.18);border-radius:999px;color:#f3e7d8;
  background:rgba(255,255,255,.09);font-size:.61rem;font-weight:900;letter-spacing:.11em
}
body[data-page="manual-attendance-audit"] .manual-audit-top-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px}
body[data-page="manual-attendance-audit"] .attendance-management-hero .header-action-btn{
  display:inline-flex;min-height:40px;align-items:center;justify-content:center;padding:7px 13px;
  border:1px solid rgba(255,255,255,.2);border-radius:10px;color:#fff;
  background:linear-gradient(145deg,rgba(255,255,255,.18),rgba(255,255,255,.07));
  font-size:.64rem;font-weight:900;text-decoration:none
}

/* Panels */
body[data-page="manual-attendance-audit"] .manual-audit-panel{
  position:relative;overflow:hidden;padding:18px;border:1px solid rgba(var(--aa-pr),.13);
  border-radius:17px;background:radial-gradient(circle at 100% 0%,rgba(var(--aa-pr),.05),transparent 190px),
  linear-gradient(145deg,#fff,#fafbfd);box-shadow:0 12px 28px rgba(37,50,71,.06),inset 0 1px 0 #fff
}
body[data-page="manual-attendance-audit"] .manual-audit-panel:before{
  content:"";position:absolute;inset:0 auto 0 0;width:5px;background:linear-gradient(180deg,var(--aa-p),var(--aa-g))
}
body[data-page="manual-attendance-audit"] .manual-audit-panel>.section-title-row{
  display:block;margin-bottom:15px;padding:1px 3px 14px;border-bottom:1px solid rgba(var(--aa-pr),.1)
}
body[data-page="manual-attendance-audit"] .manual-audit-panel>.section-title-row h3{
  display:flex;align-items:center;gap:9px;margin:0;color:var(--aa-pd);font-size:1rem
}
body[data-page="manual-attendance-audit"] .manual-audit-panel>.section-title-row h3:before{
  content:"";flex:0 0 5px;width:5px;height:20px;border-radius:999px;
  background:linear-gradient(180deg,var(--aa-g),var(--aa-p));
  box-shadow:0 0 0 4px rgba(var(--aa-gr),.07)
}
body[data-page="manual-attendance-audit"] .manual-audit-panel>.section-title-row .section-subtitle{
  margin:7px 0 0 14px;color:var(--aa-muted);font-size:.69rem;line-height:1.6
}

/* Filter */
body[data-page="manual-attendance-audit"] .manual-audit-filter-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px
}
body[data-page="manual-attendance-audit"] label{
  display:block;margin-bottom:5px;color:#596579;font-size:.63rem;font-weight:850
}
body[data-page="manual-attendance-audit"] input,
body[data-page="manual-attendance-audit"] select{
  width:100%;min-height:42px;padding:8px 10px;border:1px solid #d8dee7;border-radius:10px;
  color:#334155;background:linear-gradient(180deg,#fff,#fbfcfd);font:inherit;font-size:.69rem
}
body[data-page="manual-attendance-audit"] input:focus,
body[data-page="manual-attendance-audit"] select:focus{
  outline:none;border-color:rgba(var(--aa-pr),.52);box-shadow:0 0 0 4px rgba(var(--aa-pr),.085)
}
body[data-page="manual-attendance-audit"] .manual-audit-actions{
  display:flex;flex-wrap:wrap;gap:8px;margin-top:14px!important
}
body[data-page="manual-attendance-audit"] .manual-audit-actions button,
body[data-page="manual-attendance-audit"] .manual-audit-actions .header-action-btn{
  display:inline-flex;min-height:39px;align-items:center;justify-content:center;padding:7px 13px;
  border-radius:10px;font:inherit;font-size:.64rem;font-weight:900;text-decoration:none
}
body[data-page="manual-attendance-audit"] .manual-audit-actions button{
  border:1px solid var(--aa-pd);color:#fff;background:linear-gradient(145deg,var(--aa-p),var(--aa-pd))
}
body[data-page="manual-attendance-audit"] .manual-audit-actions .header-action-btn{
  color:var(--aa-pd);border:1px solid rgba(var(--aa-pr),.16);background:rgba(var(--aa-pr),.055)
}
body[data-page="manual-attendance-audit"] .manual-audit-actions .header-action-btn:last-child{
  color:#fff;border-color:var(--aa-gd);background:linear-gradient(145deg,var(--aa-g),var(--aa-gd))
}

/* Cards */
body[data-page="manual-attendance-audit"] .manual-audit-list{display:grid;gap:11px}
body[data-page="manual-attendance-audit"] .manual-audit-card{
  position:relative;overflow:hidden;padding:15px;border:1px solid rgba(var(--aa-pr),.12);
  border-radius:14px;background:linear-gradient(145deg,#fff,#fafbfd);
  box-shadow:0 8px 20px rgba(37,50,71,.05),inset 0 1px 0 #fff
}
body[data-page="manual-attendance-audit"] .manual-audit-card:before{
  content:"";position:absolute;inset:0 auto 0 0;width:4px;background:linear-gradient(180deg,var(--aa-ok),var(--aa-p))
}
body[data-page="manual-attendance-audit"] .manual-audit-card.blocked{
  border-color:rgba(var(--aa-badr),.2);background:linear-gradient(145deg,#fff8f9,#fff)
}
body[data-page="manual-attendance-audit"] .manual-audit-card.blocked:before{
  background:linear-gradient(180deg,var(--aa-bad),#6d3038)
}
body[data-page="manual-attendance-audit"] .manual-audit-card-top{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:11px;padding-bottom:11px;
  border-bottom:1px solid rgba(var(--aa-pr),.09)
}
body[data-page="manual-attendance-audit"] .manual-audit-card h3{margin:0;color:#263448;font-size:.88rem;line-height:1.4}
body[data-page="manual-attendance-audit"] .manual-audit-card-top .section-subtitle{
  margin:4px 0 0;color:var(--aa-muted);font-size:.62rem;line-height:1.45
}
body[data-page="manual-attendance-audit"] .manual-audit-result{
  display:inline-flex;min-height:27px;align-items:center;padding:4px 9px;border-radius:999px;
  color:#31503f;background:rgba(var(--aa-okr),.11);font-size:.59rem;font-weight:900;white-space:nowrap
}
body[data-page="manual-attendance-audit"] .manual-audit-result.blocked{
  color:#6d3038;background:rgba(var(--aa-badr),.1)
}
body[data-page="manual-attendance-audit"] .manual-audit-grid{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:11px
}
body[data-page="manual-attendance-audit"] .manual-audit-grid>div{
  min-width:0;min-height:70px;padding:10px;border:1px solid rgba(var(--aa-pr),.075);
  border-radius:10px;background:rgba(var(--aa-pr),.035)
}
body[data-page="manual-attendance-audit"] .manual-audit-grid span{
  display:block;margin:0;color:var(--aa-muted);font-size:.58rem;line-height:1.3
}
body[data-page="manual-attendance-audit"] .manual-audit-grid strong{
  display:block;margin-top:5px;color:#2d3a4e;font-size:.68rem;line-height:1.4;overflow-wrap:anywhere
}
body[data-page="manual-attendance-audit"] .manual-audit-reason{
  margin-top:10px;padding:11px 12px 11px 15px;border:1px solid rgba(var(--aa-pr),.09);
  border-radius:10px;color:#445167;background:rgba(var(--aa-pr),.045);font-size:.65rem;line-height:1.55
}
body[data-page="manual-attendance-audit"] .manual-audit-card.blocked .manual-audit-reason{
  color:#71313a;border-color:rgba(var(--aa-badr),.12);background:rgba(var(--aa-badr),.07)
}

/* Pagination + nav */
body[data-page="manual-attendance-audit"] .pagination-card{
  display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px;
  margin-top:14px!important;padding:10px 11px;border:1px solid rgba(var(--aa-pr),.11);
  border-radius:11px;background:#fff
}
body[data-page="manual-attendance-audit"] .pagination-actions{display:flex;flex-wrap:wrap;gap:6px}
body[data-page="manual-attendance-audit"] .pagination-actions a,
body[data-page="manual-attendance-audit"] .pagination-actions span{
  display:inline-flex;min-width:31px;min-height:31px;align-items:center;justify-content:center;
  padding:5px 8px;border-radius:8px;font-size:.61rem;font-weight:850;text-decoration:none
}
body[data-page="manual-attendance-audit"] .pagination-actions a{
  color:var(--aa-pd);border:1px solid rgba(var(--aa-pr),.15);background:rgba(var(--aa-pr),.05)
}
body[data-page="manual-attendance-audit"] .pagination-actions span.active{
  color:#fff;background:linear-gradient(145deg,var(--aa-p),var(--aa-pd))
}
body[data-page="manual-attendance-audit"] .bottom-nav{
  position:fixed;z-index:1000;left:50%;bottom:max(9px,env(safe-area-inset-bottom));
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:min(calc(100% - 24px),460px);
  padding:5px;border:1px solid rgba(var(--aa-pr),.14);border-radius:15px;background:rgba(255,255,255,.94);
  box-shadow:0 16px 36px rgba(41,54,74,.15);transform:translateX(-50%)
}
body[data-page="manual-attendance-audit"] .bottom-nav a{
  display:flex;min-height:38px;align-items:center;justify-content:center;padding:6px 8px;border-radius:10px;
  color:#667489;font-size:.69rem;font-weight:850;text-decoration:none
}
body[data-page="manual-attendance-audit"] .bottom-nav a.active{
  color:#fff;background:linear-gradient(145deg,var(--aa-p),var(--aa-pd))
}

/* Tablet */
@media(max-width:1100px){
  body[data-page="manual-attendance-audit"] .container.page-with-nav{width:calc(100% - 24px);max-width:980px}
  body[data-page="manual-attendance-audit"] .manual-audit-filter-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  body[data-page="manual-attendance-audit"] .manual-audit-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* Mobile */
@media(max-width:700px){
  body[data-page="manual-attendance-audit"] .container.page-with-nav{
    width:calc(100% - 16px);max-width:640px;padding:8px 0 86px
  }
  body[data-page="manual-attendance-audit"] .manual-audit-shell{gap:9px}
  body[data-page="manual-attendance-audit"] .attendance-management-hero{
    grid-template-columns:1fr;gap:11px;min-height:0;padding:16px 14px;border-radius:16px
  }
  body[data-page="manual-attendance-audit"] .attendance-management-hero h1{font-size:1.39rem}
  body[data-page="manual-attendance-audit"] .manual-audit-top-actions{
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%;gap:7px
  }
  body[data-page="manual-attendance-audit"] .attendance-management-hero .header-action-btn{width:100%;min-height:36px}
  body[data-page="manual-attendance-audit"] .manual-audit-panel{padding:12px;border-radius:13px}
  body[data-page="manual-attendance-audit"] .manual-audit-filter-grid{grid-template-columns:1fr;gap:8px}
  body[data-page="manual-attendance-audit"] input,
  body[data-page="manual-attendance-audit"] select{min-height:43px;font-size:16px}
  body[data-page="manual-attendance-audit"] .manual-audit-actions{
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px
  }
  body[data-page="manual-attendance-audit"] .manual-audit-actions>*{width:100%}
  body[data-page="manual-attendance-audit"] .manual-audit-actions>*:last-child{grid-column:1/-1}
  body[data-page="manual-attendance-audit"] .manual-audit-card{padding:11px;border-radius:11px}
  body[data-page="manual-attendance-audit"] .manual-audit-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin-top:8px
  }
  body[data-page="manual-attendance-audit"] .manual-audit-grid>div{min-height:61px;padding:8px}
  body[data-page="manual-attendance-audit"] .manual-audit-reason{margin-top:8px;padding:9px 10px;font-size:.60rem}
  body[data-page="manual-attendance-audit"] .pagination-card{grid-template-columns:1fr}
  body[data-page="manual-attendance-audit"] .bottom-nav{
    bottom:max(7px,env(safe-area-inset-bottom));width:calc(100% - 18px);max-width:430px;padding:4px
  }
}
@media(max-width:390px){
  body[data-page="manual-attendance-audit"] .manual-audit-top-actions,
  body[data-page="manual-attendance-audit"] .manual-audit-actions{grid-template-columns:1fr}
  body[data-page="manual-attendance-audit"] .manual-audit-actions>*:last-child{grid-column:auto}
  body[data-page="manual-attendance-audit"] .manual-audit-grid{grid-template-columns:1fr}
}

/* =========================================================
   Manual Attendance Audit — Date Width + Two-Column Cards
   Scope: body[data-page="manual-attendance-audit"]
   Load after manual-attendance-audit.css
   ========================================================= */

/* Prevent every filter field from exceeding its grid cell */
body[data-page="manual-attendance-audit"]
.manual-audit-filter-grid > div {
    min-width: 0;
    width: 100%;
}

body[data-page="manual-attendance-audit"]
.manual-audit-filter-grid input,
body[data-page="manual-attendance-audit"]
.manual-audit-filter-grid select {
    display: block;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
}

/* Desktop and iPad: two audit records per row */
body[data-page="manual-attendance-audit"]
.manual-audit-list {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 12px;
}

body[data-page="manual-attendance-audit"]
.manual-audit-card {
    min-width: 0;
    height: 100%;
}

/* Inside a half-width audit card, keep details readable */
body[data-page="manual-attendance-audit"]
.manual-audit-card
.manual-audit-grid {
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
}

/* iPad portrait still keeps two cards when enough width exists */
@media (min-width: 701px) and (max-width: 1100px) {
    body[data-page="manual-attendance-audit"]
    .manual-audit-list {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    body[data-page="manual-attendance-audit"]
    .manual-audit-card {
        padding: 13px;
    }

    body[data-page="manual-attendance-audit"]
    .manual-audit-card h3 {
        font-size: .80rem;
    }

    body[data-page="manual-attendance-audit"]
    .manual-audit-grid > div {
        min-height: 64px;
        padding: 8px;
    }
}

/* Mobile */
@media (max-width: 700px) {
    /* Audit cards return to one per row */
    body[data-page="manual-attendance-audit"]
    .manual-audit-list {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    /*
       Date fields stay in one compact row.
       Remaining filters stay full width.
    */
    body[data-page="manual-attendance-audit"]
    .manual-audit-filter-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;
        gap: 8px;
    }

    body[data-page="manual-attendance-audit"]
    .manual-audit-filter-grid > div:nth-child(n + 3) {
        grid-column: 1 / -1;
    }

    body[data-page="manual-attendance-audit"]
    .manual-audit-filter-grid > div:nth-child(1),
    body[data-page="manual-attendance-audit"]
    .manual-audit-filter-grid > div:nth-child(2) {
        grid-column: auto;
        min-width: 0;
    }

    body[data-page="manual-attendance-audit"]
    .manual-audit-filter-grid input[type="date"] {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        min-height: 41px;
        padding:
            7px
            5px
            7px
            8px;
        border-radius: 9px;
        font-size: 14px !important;
        line-height: 1.2;
    }

    /* Stop the native date picker indicator from widening the field */
    body[data-page="manual-attendance-audit"]
    .manual-audit-filter-grid
    input[type="date"]::-webkit-calendar-picker-indicator {
        width: 15px;
        height: 15px;
        margin: 0;
        padding: 2px;
        opacity: .72;
    }

    body[data-page="manual-attendance-audit"]
    .manual-audit-filter-grid label {
        margin-bottom: 4px;
        font-size: .59rem;
        line-height: 1.3;
    }
}

/* Very narrow phones: stack dates if two columns become too tight */
@media (max-width: 350px) {
    body[data-page="manual-attendance-audit"]
    .manual-audit-filter-grid {
        grid-template-columns: 1fr !important;
    }

    body[data-page="manual-attendance-audit"]
    .manual-audit-filter-grid > div {
        grid-column: auto !important;
    }

    body[data-page="manual-attendance-audit"]
    .manual-audit-filter-grid input[type="date"] {
        font-size: 16px !important;
    }
}

/* =========================================================
   Manual Attendance Audit — Mobile Date Gap Fix
   Scope: body[data-page="manual-attendance-audit"]
   Load after manual-audit-layout-fix.css
   ========================================================= */

@media (max-width: 700px) {
    body[data-page="manual-attendance-audit"]
    .manual-audit-filter-grid {
        column-gap: 12px !important;
        row-gap: 9px !important;
    }

    body[data-page="manual-attendance-audit"]
    .manual-audit-filter-grid
    > div:nth-child(1),
    body[data-page="manual-attendance-audit"]
    .manual-audit-filter-grid
    > div:nth-child(2) {
        min-width: 0 !important;
        width: 100% !important;
    }

    body[data-page="manual-attendance-audit"]
    .manual-audit-filter-grid
    > div:nth-child(1) {
        padding-right: 2px;
    }

    body[data-page="manual-attendance-audit"]
    .manual-audit-filter-grid
    > div:nth-child(2) {
        padding-left: 2px;
    }

    body[data-page="manual-attendance-audit"]
    .manual-audit-filter-grid
    input[type="date"] {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin: 0 !important;
        box-shadow:
            inset 0 1px 2px rgba(37,50,71,.03),
            0 2px 6px rgba(37,50,71,.025) !important;
    }
}

@media (max-width: 390px) and (min-width: 351px) {
    body[data-page="manual-attendance-audit"]
    .manual-audit-filter-grid {
        column-gap: 10px !important;
    }
}

/* =========================================================
   Customer Balance Management — Targeted Layout Fix V4
   Scope: body[data-page="customer-balance-management"]
   Load after all previous customer balance CSS
   ========================================================= */

/* =========================================================
   1. Customer balance cards
   Desktop / iPad: 3 per row
   Mobile: 2 per row
   ========================================================= */

body[data-page="customer-balance-management"]
#customer-balance-list
.customer-balance-grid {
    display: grid !important;
    grid-template-columns:
        repeat(3, minmax(0, 1fr)) !important;
    align-items: stretch;
    gap: 10px;
}

body[data-page="customer-balance-management"]
#customer-balance-list
.customer-balance-card {
    min-width: 0;
    height: 100%;
    padding: 12px;
    border-radius: 12px;
}

body[data-page="customer-balance-management"]
#customer-balance-list
.customer-balance-card-top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 7px;
    margin-bottom: 8px;
    padding-bottom: 8px;
}

body[data-page="customer-balance-management"]
#customer-balance-list
.customer-balance-card-top h3 {
    margin: 0;
    font-size: .78rem;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

body[data-page="customer-balance-management"]
#customer-balance-list
.customer-balance-meta {
    font-size: .54rem;
    line-height: 1.4;
}

body[data-page="customer-balance-management"]
#customer-balance-list
.customer-balance-status {
    min-height: 22px;
    padding: 3px 7px;
    font-size: .50rem;
}

body[data-page="customer-balance-management"]
#customer-balance-list
.customer-balance-amount {
    margin-bottom: 8px;
    padding: 9px;
    font-size: 1rem;
}

body[data-page="customer-balance-management"]
#customer-balance-list
.customer-balance-card .form-box {
    padding: 8px;
}

body[data-page="customer-balance-management"]
#customer-balance-list
.customer-balance-card .form-box > div {
    margin-bottom: 6px;
}

body[data-page="customer-balance-management"]
#customer-balance-list
.customer-balance-card input {
    min-height: 36px;
    padding: 6px 7px;
    font-size: .62rem;
}

body[data-page="customer-balance-management"]
#customer-balance-list
.customer-balance-card button {
    width: 100%;
    min-height: 35px;
    margin-top: 2px;
    padding: 6px 7px;
    font-size: .56rem;
}

/* =========================================================
   2. Premium account type select
   ========================================================= */

body[data-page="customer-balance-management"]
#customer-account-type {
    position: relative;
    min-height: 25px;
    padding:
        8px
        38px
        8px
        12px;
    border: 1px solid rgba(var(--cb-primary-rgb, 53, 68, 91), .28);
    border-radius: 11px;
    color: #2f3c50;
    background:
        linear-gradient(
            180deg,
            #ffffff,
            #f7f9fc
        );
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.95),
        0 5px 12px rgba(37,50,71,.05);
    cursor: pointer;
}

body[data-page="customer-balance-management"]
#customer-account-type:hover {
    border-color: rgba(var(--cb-primary-rgb, 53, 68, 91), .42);
    background:
        linear-gradient(
            180deg,
            #ffffff,
            #f2f5f9
        );
}

body[data-page="customer-balance-management"]
#customer-account-type:focus {
    outline: none;
    border-color: rgba(var(--cb-primary-rgb, 53, 68, 91), .56);
    box-shadow:
        0 0 0 4px rgba(var(--cb-primary-rgb, 53, 68, 91), .09),
        0 8px 18px rgba(37,50,71,.06);
}

/* Note below the type selector */
body[data-page="customer-balance-management"]
#customer-account-type-note {
    margin: 7px 0 0;
    padding: 7px 9px;
    border-left: 3px solid rgba(var(--cb-copper-rgb, 177, 113, 63), .72);
    border-radius: 0 8px 8px 0;
    color: #6f6253;
    background: rgba(var(--cb-copper-rgb, 177, 113, 63), .055);
    font-size: .59rem;
    line-height: 1.48;
}

/* =========================================================
   3. Section count badge
   ========================================================= */

body[data-page="customer-balance-management"]
.section-count {
    display: inline-flex;
    min-height: 28px;
    align-items: center;
    justify-content: center;
    padding: 4px 9px;
    border: 1px solid rgba(var(--cb-primary-rgb, 53, 68, 91), .16);
    border-radius: 999px;
    color: #314056;
    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.98),
            rgba(var(--cb-primary-rgb, 53, 68, 91), .07)
        );
    box-shadow:
        0 4px 10px rgba(37,50,71,.05),
        inset 0 1px 0 rgba(255,255,255,.96);
    font-size: .58rem;
    font-weight: 900;
    white-space: nowrap;
}

body[data-page="customer-balance-management"]
.section-count::before {
    content: "";
    width: 6px;
    height: 6px;
    margin-right: 6px;
    border-radius: 50%;
    background: var(--cb-copper, #b1713f);
    box-shadow:
        0 0 0 3px rgba(var(--cb-copper-rgb, 177, 113, 63), .10);
}

/* =========================================================
   4. Balance usage/modification logs
   Desktop / iPad: 2 per row
   Mobile: 2 per row, compact
   ========================================================= */

body[data-page="customer-balance-management"]
#customer-balance-logs
.customer-balance-log-list {
    display: grid !important;
    grid-template-columns:
        repeat(2, minmax(0, 1fr)) !important;
    align-items: start;
    gap: 9px;
}

body[data-page="customer-balance-management"]
#customer-balance-logs
.customer-balance-log-card {
    min-width: 0;
    padding: 11px;
    border-radius: 11px;
}

body[data-page="customer-balance-management"]
#customer-balance-logs
.customer-balance-log-top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 7px;
    padding-bottom: 8px;
}

body[data-page="customer-balance-management"]
#customer-balance-logs
.customer-balance-log-top strong {
    font-size: .70rem;
    line-height: 1.35;
}

body[data-page="customer-balance-management"]
#customer-balance-logs
.customer-balance-meta {
    margin-top: 3px;
    font-size: .53rem;
    line-height: 1.4;
}

body[data-page="customer-balance-management"]
#customer-balance-logs
.customer-balance-change-positive,
body[data-page="customer-balance-management"]
#customer-balance-logs
.customer-balance-change-negative {
    min-height: 24px;
    padding: 3px 6px;
    font-size: .54rem;
}

body[data-page="customer-balance-management"]
#customer-balance-logs
.customer-balance-log-card > p:not(.customer-balance-meta) {
    margin-top: 7px;
    padding: 7px 8px;
    font-size: .58rem;
    line-height: 1.42;
}

/* =========================================================
   5. Credit ledger customer cards
   Desktop / iPad: 2 per row
   Mobile: 1 per row, compact
   ========================================================= */

body[data-page="customer-balance-management"]
#customer-credit-ledger
.customer-balance-log-list {
    display: grid !important;
    grid-template-columns:
        repeat(2, minmax(0, 1fr)) !important;
    align-items: start;
    gap: 10px;
}

body[data-page="customer-balance-management"]
#customer-credit-ledger
.customer-balance-log-card {
    min-width: 0;
    padding: 12px;
    border-radius: 12px;
}

body[data-page="customer-balance-management"]
#customer-credit-ledger
.customer-balance-log-top {
    gap: 8px;
    padding-bottom: 8px;
}

body[data-page="customer-balance-management"]
#customer-credit-ledger
.customer-balance-log-top h3 {
    margin: 0;
    font-size: .76rem;
    line-height: 1.35;
}

body[data-page="customer-balance-management"]
#customer-credit-ledger
.customer-balance-meta {
    margin-top: 3px;
    font-size: .52rem;
    line-height: 1.38;
}

body[data-page="customer-balance-management"]
#customer-credit-ledger
.customer-credit-account-summary {
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
    gap: 6px;
    margin: 9px 0;
}

body[data-page="customer-balance-management"]
#customer-credit-ledger
.customer-credit-account-summary > div {
    min-height: 66px;
    padding: 8px;
}

body[data-page="customer-balance-management"]
#customer-credit-ledger
.customer-credit-account-summary span {
    font-size: .49rem;
}

body[data-page="customer-balance-management"]
#customer-credit-ledger
.customer-credit-account-summary strong {
    font-size: .65rem;
}

body[data-page="customer-balance-management"]
#customer-credit-ledger
.workspace-feedback-details {
    margin-top: 7px;
}

body[data-page="customer-balance-management"]
#customer-credit-ledger
.workspace-feedback-summary {
    min-height: 38px;
    padding: 8px 34px 8px 9px;
    font-size: .57rem;
}

body[data-page="customer-balance-management"]
#customer-credit-ledger
.customer-credit-card-actions {
    margin-top: 8px;
}

/* =========================================================
   Tablet
   ========================================================= */

@media (min-width: 701px) and (max-width: 1100px) {
    body[data-page="customer-balance-management"]
    #customer-balance-list
    .customer-balance-grid {
        grid-template-columns:
            repeat(3, minmax(0, 1fr)) !important;
        gap: 8px;
    }

    body[data-page="customer-balance-management"]
    #customer-balance-logs
    .customer-balance-log-list,
    body[data-page="customer-balance-management"]
    #customer-credit-ledger
    .customer-balance-log-list {
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;
        gap: 8px;
    }
}

/* =========================================================
   Mobile
   ========================================================= */

@media (max-width: 700px) {
    /* Customer cards: 2 per row */
    body[data-page="customer-balance-management"]
    #customer-balance-list
    .customer-balance-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;
        gap: 7px;
    }

    body[data-page="customer-balance-management"]
    #customer-balance-list
    .customer-balance-card {
        padding: 9px;
        border-radius: 10px;
    }

    body[data-page="customer-balance-management"]
    #customer-balance-list
    .customer-balance-card-top {
        grid-template-columns: minmax(0, 1fr);
        gap: 4px;
    }

    body[data-page="customer-balance-management"]
    #customer-balance-list
    .customer-balance-status {
        width: fit-content;
    }

    body[data-page="customer-balance-management"]
    #customer-balance-list
    .customer-balance-card-top h3 {
        font-size: .69rem;
    }

    body[data-page="customer-balance-management"]
    #customer-balance-list
    .customer-balance-meta {
        font-size: .49rem;
        line-height: 1.34;
    }

    body[data-page="customer-balance-management"]
    #customer-balance-list
    .customer-balance-amount {
        padding: 8px;
        font-size: .88rem;
    }

    body[data-page="customer-balance-management"]
    #customer-balance-list
    .customer-balance-card input {
        min-height: 35px;
        font-size: 16px;
    }

    /* Usage logs: 2 per row, compact */
    body[data-page="customer-balance-management"]
    #customer-balance-logs
    .customer-balance-log-list {
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;
        gap: 7px;
    }

    body[data-page="customer-balance-management"]
    #customer-balance-logs
    .customer-balance-log-card {
        padding: 9px;
        border-radius: 10px;
    }

    body[data-page="customer-balance-management"]
    #customer-balance-logs
    .customer-balance-log-top {
        grid-template-columns: 1fr;
        gap: 5px;
    }

    body[data-page="customer-balance-management"]
    #customer-balance-logs
    .customer-balance-change-positive,
    body[data-page="customer-balance-management"]
    #customer-balance-logs
    .customer-balance-change-negative {
        width: fit-content;
    }

    body[data-page="customer-balance-management"]
    #customer-balance-logs
    .customer-balance-log-top strong {
        font-size: .64rem;
    }

    body[data-page="customer-balance-management"]
    #customer-balance-logs
    .customer-balance-meta {
        font-size: .48rem;
        line-height: 1.34;
    }

    body[data-page="customer-balance-management"]
    #customer-balance-logs
    .customer-balance-log-card > p:not(.customer-balance-meta) {
        margin-top: 6px;
        padding: 6px 7px;
        font-size: .54rem;
    }

    /* Credit ledger: one customer per row */
    body[data-page="customer-balance-management"]
    #customer-credit-ledger
    .customer-balance-log-list {
        grid-template-columns: 1fr !important;
        gap: 8px;
    }

    body[data-page="customer-balance-management"]
    #customer-credit-ledger
    .customer-balance-log-card {
        padding: 10px;
        border-radius: 10px;
    }

    body[data-page="customer-balance-management"]
    #customer-credit-ledger
    .customer-balance-log-top {
        gap: 6px;
    }

    body[data-page="customer-balance-management"]
    #customer-credit-ledger
    .customer-balance-log-top h3 {
        font-size: .70rem;
    }

    body[data-page="customer-balance-management"]
    #customer-credit-ledger
    .customer-balance-meta {
        font-size: .49rem;
        line-height: 1.34;
    }

    body[data-page="customer-balance-management"]
    #customer-credit-ledger
    .customer-credit-account-summary {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
        gap: 5px;
        margin: 8px 0;
    }

    body[data-page="customer-balance-management"]
    #customer-credit-ledger
    .customer-credit-account-summary > div {
        min-height: 60px;
        padding: 7px;
    }

    body[data-page="customer-balance-management"]
    #customer-credit-ledger
    .customer-credit-account-summary span {
        font-size: .46rem;
    }

    body[data-page="customer-balance-management"]
    #customer-credit-ledger
    .customer-credit-account-summary strong {
        font-size: .61rem;
    }

    body[data-page="customer-balance-management"]
    #customer-credit-ledger
    .workspace-feedback-summary {
        min-height: 36px;
        font-size: .54rem;
    }

    body[data-page="customer-balance-management"]
    #customer-credit-ledger
    .customer-credit-card-actions a {
        min-height: 35px;
        font-size: .57rem;
    }

    body[data-page="customer-balance-management"]
    .section-count {
        min-height: 25px;
        padding: 3px 7px;
        font-size: .53rem;
    }

    body[data-page="customer-balance-management"]
    #customer-account-type {
        min-height: 43px;
        font-size: 16px;
    }
}

/* Extremely narrow phones */
@media (max-width: 360px) {
    body[data-page="customer-balance-management"]
    #customer-balance-list
    .customer-balance-grid,
    body[data-page="customer-balance-management"]
    #customer-balance-logs
    .customer-balance-log-list {
        grid-template-columns: 1fr !important;
    }

    body[data-page="customer-balance-management"]
    #customer-credit-ledger
    .customer-credit-account-summary {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   Customer Balance Management — Final Detail Fix V5
   Scope: body[data-page="customer-balance-management"]
   Load after customer-balance-targeted-layout-v4.css
   ========================================================= */

/* =========================================================
   1. Section count at the top-right, aligned with h3
   ========================================================= */

body[data-page="customer-balance-management"]
.customer-balance-panel
> .section-title-row {
    position: relative;
    display: block !important;
    min-height: 31px;
    padding-right: 0;
}

body[data-page="customer-balance-management"]
.customer-balance-panel
> .section-title-row
> div:first-child {
    min-width: 0;
    padding-right: 108px;
}

body[data-page="customer-balance-management"]
.customer-balance-panel
> .section-title-row
.section-count {
    position: absolute;
    top: 0;
    right: 1px;
    z-index: 2;
    margin: 0;
}

/* Sections without a count do not need reserved space */
body[data-page="customer-balance-management"]
.customer-balance-panel
> .section-title-row:not(:has(.section-count))
> div:first-child {
    padding-right: 0;
}

/* =========================================================
   2. Restore and upgrade “查看全部账本” link
   href="/customer-balance-management/credit/<id>"
   ========================================================= */

body[data-page="customer-balance-management"]
#customer-credit-ledger
.customer-credit-card-actions {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    justify-content: flex-end;
    margin: 9px 0 0;
}

body[data-page="customer-balance-management"]
#customer-credit-ledger
.customer-credit-card-actions
a.workspace-card-link,
body[data-page="customer-balance-management"]
#customer-credit-ledger
a[href^="/customer-balance-management/credit/"] {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100%;
    min-height: 38px;
    align-items: center;
    justify-content: center;
    padding: 7px 11px;
    border: 1px solid var(--cb3-primary-dark, #202c3d);
    border-radius: 9px;
    color: #fff !important;
    background:
        linear-gradient(
            145deg,
            var(--cb3-primary, #37465d),
            var(--cb3-primary-dark, #202c3d)
        ) !important;
    box-shadow:
        0 7px 16px rgba(55, 70, 93, .18),
        inset 0 1px 0 rgba(255,255,255,.14);
    font-size: .62rem;
    font-weight: 900;
    line-height: 1.3;
    text-decoration: none !important;
}

body[data-page="customer-balance-management"]
#customer-credit-ledger
.customer-credit-card-actions
a.workspace-card-link:hover,
body[data-page="customer-balance-management"]
#customer-credit-ledger
a[href^="/customer-balance-management/credit/"]:hover {
    color: #fff !important;
    background:
        linear-gradient(
            145deg,
            var(--cb3-primary-dark, #202c3d),
            var(--cb3-primary, #37465d)
        ) !important;
}

/* =========================================================
   3. Fixed heights with internal scrolling
   ========================================================= */

/* Balance usage / modification records */
body[data-page="customer-balance-management"]
#customer-balance-logs
.customer-balance-log-card {
    height: 224px;
    min-height: 224px;
    max-height: 224px;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color:
        rgba(55, 70, 93, .28)
        transparent;
}

/* Credit ledger customer cards */
body[data-page="customer-balance-management"]
#customer-credit-ledger
.customer-balance-log-card {
    height: 560px;
    min-height: 560px;
    max-height: 560px;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color:
        rgba(55, 70, 93, .28)
        transparent;
}

/* WebKit scrollbar */
body[data-page="customer-balance-management"]
#customer-balance-logs
.customer-balance-log-card::-webkit-scrollbar,
body[data-page="customer-balance-management"]
#customer-credit-ledger
.customer-balance-log-card::-webkit-scrollbar {
    width: 6px;
}

body[data-page="customer-balance-management"]
#customer-balance-logs
.customer-balance-log-card::-webkit-scrollbar-thumb,
body[data-page="customer-balance-management"]
#customer-credit-ledger
.customer-balance-log-card::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(55, 70, 93, .24);
}

body[data-page="customer-balance-management"]
#customer-balance-logs
.customer-balance-log-card::-webkit-scrollbar-track,
body[data-page="customer-balance-management"]
#customer-credit-ledger
.customer-balance-log-card::-webkit-scrollbar-track {
    background: transparent;
}

/* Keep the horizontal credit table scrolling inside the card */
body[data-page="customer-balance-management"]
#customer-credit-ledger
.customer-credit-table-wrap {
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
}

/* =========================================================
   4. Slightly larger metadata text on all devices
   ========================================================= */

body[data-page="customer-balance-management"]
.customer-balance-meta {
    font-size: .70rem !important;
    line-height: 1.48 !important;
}

body[data-page="customer-balance-management"]
#customer-balance-list
.customer-balance-meta {
    font-size: .57rem !important;
}

body[data-page="customer-balance-management"]
#customer-credit-ledger
.customer-balance-meta {
    font-size: .56rem !important;
}

/* =========================================================
   5. Slightly larger accordion summary
   ========================================================= */

body[data-page="customer-balance-management"]
.workspace-feedback-summary {
    font-size: .64rem !important;
    line-height: 1.45;
    font-weight: 850;
}

/* =========================================================
   Mobile
   ========================================================= */

@media (max-width: 700px) {
    body[data-page="customer-balance-management"]
    .customer-balance-panel
    > .section-title-row
    > div:first-child {
        padding-right: 90px;
    }

    body[data-page="customer-balance-management"]
    .customer-balance-panel
    > .section-title-row
    .section-count {
        top: 0;
        right: 0;
    }

    /* Fixed compact log heights */
    body[data-page="customer-balance-management"]
    #customer-balance-logs
    .customer-balance-log-card {
        height: 196px;
        min-height: 196px;
        max-height: 210px;
    }

    body[data-page="customer-balance-management"]
    #customer-credit-ledger
    .customer-balance-log-card {
        height: 438px;
        min-height: 438px;
        max-height: 438px;
    }

    /* Smaller placeholder only; input stays 16px to prevent iPhone zoom */
    body[data-page="customer-balance-management"]
    #customer-balance-list
    .customer-balance-card
    input::placeholder {
        font-size: 11px !important;
        color: #9aa4b2;
        opacity: 1;
    }

    body[data-page="customer-balance-management"]
    .customer-balance-meta {
        font-size: .54rem !important;
        line-height: 1.43 !important;
    }

    body[data-page="customer-balance-management"]
    #customer-balance-list
    .customer-balance-meta {
        font-size: .52rem !important;
    }

    body[data-page="customer-balance-management"]
    #customer-credit-ledger
    .customer-balance-meta {
        font-size: .52rem !important;
    }

    body[data-page="customer-balance-management"]
    .workspace-feedback-summary {
        font-size: .60rem !important;
        line-height: 1.42;
    }

    body[data-page="customer-balance-management"]
    #customer-credit-ledger
    .customer-credit-card-actions
    a.workspace-card-link,
    body[data-page="customer-balance-management"]
    #customer-credit-ledger
    a[href^="/customer-balance-management/credit/"] {
        min-height: 36px;
        font-size: .59rem;
    }
}

/* Very small phone protection */
@media (max-width: 360px) {
    body[data-page="customer-balance-management"]
    .customer-balance-panel
    > .section-title-row
    > div:first-child {
        padding-right: 82px;
    }

    body[data-page="customer-balance-management"]
    #customer-credit-ledger
    .customer-balance-log-card {
        height: 420px;
        min-height: 420px;
        max-height: 420px;
    }
}


/* =========================================================
   PRMS Customer Credit Account Detail — Complete Responsive UI
   Scope: body[data-page="customer-credit-account-detail"]
   This file replaces the page-level <style> block.
   Load after global.css.
   ========================================================= */

body[data-page="customer-credit-account-detail"] {
    --ccd-bg: #f2f4f7;
    --ccd-surface: #ffffff;
    --ccd-surface-soft: #f8fafc;
    --ccd-text: #273448;
    --ccd-soft: #667489;
    --ccd-muted: #8a96a7;
    --ccd-line: #dce3eb;

    --ccd-primary: #3f4f67;
    --ccd-primary-dark: #243145;
    --ccd-primary-rgb: 63, 79, 103;

    --ccd-copper: #ad7544;
    --ccd-copper-dark: #734923;
    --ccd-copper-rgb: 173, 117, 68;

    --ccd-success: #4c745e;
    --ccd-success-dark: #31503f;
    --ccd-success-rgb: 76, 116, 94;

    --ccd-danger: #a14d58;
    --ccd-danger-dark: #6d3038;
    --ccd-danger-rgb: 161, 77, 88;

    min-height: 100vh;
    color: var(--ccd-text);
    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(var(--ccd-primary-rgb), .085),
            transparent 32rem
        ),
        radial-gradient(
            circle at 0% 100%,
            rgba(var(--ccd-copper-rgb), .05),
            transparent 29rem
        ),
        linear-gradient(145deg, #eef1f5, #faf8f4);
}

body[data-page="customer-credit-account-detail"] *,
body[data-page="customer-credit-account-detail"] *::before,
body[data-page="customer-credit-account-detail"] *::after {
    box-sizing: border-box;
}

body[data-page="customer-credit-account-detail"]
.container.page-with-nav {
    width: min(calc(100% - 30px), 1380px);
    max-width: 1380px;
    margin: 0 auto;
    padding: 18px 0 96px;
}

/* =========================================================
   Hero
   ========================================================= */

body[data-page="customer-credit-account-detail"]
.credit-detail-hero {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 22px;
    min-height: 220px;
    margin-bottom: 14px;
    padding: 26px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 22px;
    color: #fff;
    background:
        radial-gradient(
            circle at 10% 7%,
            rgba(255,255,255,.16),
            transparent 25%
        ),
        radial-gradient(
            circle at 90% 110%,
            rgba(255,255,255,.10),
            transparent 38%
        ),
        linear-gradient(
            135deg,
            #243145 0%,
            #43536b 55%,
            #7b5936 100%
        );
    box-shadow:
        0 24px 56px rgba(36,49,69,.22),
        inset 0 1px 0 rgba(255,255,255,.14);
}

body[data-page="customer-credit-account-detail"]
.credit-detail-hero::before {
    content: "CREDIT LEDGER";
    position: absolute;
    z-index: -1;
    left: 20px;
    bottom: 9px;
    color: rgba(255,255,255,.042);
    font-size: clamp(3rem, 7vw, 6.3rem);
    font-weight: 950;
    line-height: .82;
    letter-spacing: -.08em;
}

body[data-page="customer-credit-account-detail"]
.credit-detail-hero::after {
    content: "";
    position: absolute;
    z-index: -1;
    right: -90px;
    top: -118px;
    width: 310px;
    height: 310px;
    border: 44px solid rgba(255,255,255,.035);
    border-radius: 50%;
}

body[data-page="customer-credit-account-detail"]
.credit-detail-hero > div:first-child {
    min-width: 0;
}

body[data-page="customer-credit-account-detail"]
.credit-detail-hero .page-subtitle {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 27px;
    margin: 0 0 8px;
    padding: 4px 9px;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 999px;
    color: #f4e8da;
    background: rgba(255,255,255,.09);
    font-size: .61rem;
    font-weight: 900;
    letter-spacing: .11em;
    text-transform: uppercase;
}

body[data-page="customer-credit-account-detail"]
.credit-detail-hero .page-subtitle::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #e3c494;
    box-shadow: 0 0 0 4px rgba(227,196,148,.12);
}

body[data-page="customer-credit-account-detail"]
.credit-detail-hero h1 {
    margin: 0;
    color: #fff;
    font-size: clamp(1.9rem, 3.2vw, 2.55rem);
    line-height: 1.14;
    letter-spacing: -.04em;
    overflow-wrap: anywhere;
}

body[data-page="customer-credit-account-detail"]
.credit-detail-hero > div:first-child > .section-subtitle {
    max-width: 760px;
    margin: 10px 0 0;
    color: rgba(255,255,255,.74);
    font-size: .73rem;
    line-height: 1.65;
}

body[data-page="customer-credit-account-detail"]
.credit-detail-hero .header-action-btn {
    display: inline-flex;
    min-height: 41px;
    align-items: center;
    justify-content: center;
    padding: 8px 14px;
    border: 1px solid rgba(255,255,255,.20);
    border-radius: 10px;
    color: #fff;
    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.18),
            rgba(255,255,255,.07)
        );
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.14),
        0 8px 18px rgba(25,34,47,.16);
    font-size: .66rem;
    font-weight: 900;
    text-decoration: none;
}

/* =========================================================
   Summary
   ========================================================= */

body[data-page="customer-credit-account-detail"]
.credit-detail-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 9px;
    margin-top: 17px;
}

body[data-page="customer-credit-account-detail"]
.credit-detail-summary > div {
    position: relative;
    min-width: 0;
    min-height: 82px;
    padding: 12px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 12px;
    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.14),
            rgba(255,255,255,.07)
        );
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.10);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

body[data-page="customer-credit-account-detail"]
.credit-detail-summary > div::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 3px;
    background: rgba(255,255,255,.26);
}

body[data-page="customer-credit-account-detail"]
.credit-detail-summary > div:nth-child(1)::before {
    background: #d9929c;
}

body[data-page="customer-credit-account-detail"]
.credit-detail-summary > div:nth-child(2)::before {
    background: #e0b67f;
}

body[data-page="customer-credit-account-detail"]
.credit-detail-summary > div:nth-child(3)::before {
    background: #9ab9a7;
}

body[data-page="customer-credit-account-detail"]
.credit-detail-summary > div:nth-child(4)::before {
    background: #b7c2d1;
}

body[data-page="customer-credit-account-detail"]
.credit-detail-summary span {
    display: block;
    margin: 0;
    color: rgba(255,255,255,.68);
    font-size: .58rem;
    line-height: 1.3;
}

body[data-page="customer-credit-account-detail"]
.credit-detail-summary strong {
    display: block;
    margin-top: 7px;
    color: #fff;
    font-size: .92rem;
    line-height: 1.3;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

/* =========================================================
   Panels
   ========================================================= */

body[data-page="customer-credit-account-detail"]
.credit-detail-panel {
    position: relative;
    overflow: hidden;
    margin-bottom: 14px;
    padding: 18px;
    border: 1px solid rgba(var(--ccd-primary-rgb), .13);
    border-radius: 17px;
    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(var(--ccd-primary-rgb), .05),
            transparent 190px
        ),
        linear-gradient(145deg, #fff, #fafbfd);
    box-shadow:
        0 12px 28px rgba(37,50,71,.06),
        inset 0 1px 0 #fff;
}

body[data-page="customer-credit-account-detail"]
.credit-detail-panel::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 5px;
    background:
        linear-gradient(
            180deg,
            var(--ccd-primary),
            var(--ccd-copper)
        );
}

body[data-page="customer-credit-account-detail"]
.credit-detail-panel
> .section-title-row {
    position: relative;
    display: block;
    min-height: 31px;
    margin-bottom: 14px;
    padding: 0 2px 13px;
    border-bottom: 1px solid rgba(var(--ccd-primary-rgb), .10);
}

body[data-page="customer-credit-account-detail"]
.credit-detail-panel
> .section-title-row
> div:first-child {
    min-width: 0;
    padding-right: 86px;
}

body[data-page="customer-credit-account-detail"]
.credit-detail-panel
> .section-title-row h3 {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0;
    color: var(--ccd-primary-dark);
    font-size: .98rem;
    line-height: 1.35;
    letter-spacing: -.018em;
}

body[data-page="customer-credit-account-detail"]
.credit-detail-panel
> .section-title-row h3::before {
    content: "";
    flex: 0 0 5px;
    width: 5px;
    height: 20px;
    border-radius: 999px;
    background:
        linear-gradient(
            180deg,
            var(--ccd-copper),
            var(--ccd-primary)
        );
    box-shadow:
        0 0 0 4px rgba(var(--ccd-copper-rgb), .07);
}

body[data-page="customer-credit-account-detail"]
.credit-detail-panel
> .section-title-row .section-subtitle {
    margin: 7px 0 0 14px;
    color: var(--ccd-muted);
    font-size: .67rem;
    line-height: 1.55;
}

body[data-page="customer-credit-account-detail"]
.section-count {
    position: absolute;
    top: 0;
    right: 1px;
    display: inline-flex;
    min-height: 27px;
    align-items: center;
    justify-content: center;
    padding: 4px 9px;
    border: 1px solid rgba(var(--ccd-primary-rgb), .16);
    border-radius: 999px;
    color: #314056;
    background:
        linear-gradient(
            180deg,
            #fff,
            rgba(var(--ccd-primary-rgb), .065)
        );
    box-shadow:
        0 4px 10px rgba(37,50,71,.045),
        inset 0 1px 0 #fff;
    font-size: .57rem;
    font-weight: 900;
    white-space: nowrap;
}

body[data-page="customer-credit-account-detail"]
.section-count::before {
    content: "";
    width: 6px;
    height: 6px;
    margin-right: 6px;
    border-radius: 50%;
    background: var(--ccd-copper);
    box-shadow:
        0 0 0 3px rgba(var(--ccd-copper-rgb), .10);
}

/* =========================================================
   Tables
   ========================================================= */

body[data-page="customer-credit-account-detail"]
.credit-detail-table-wrap {
    position: relative;
    width: 100%;
    max-width: 100%;
    margin-top: 0;
    overflow-x: auto;
    overflow-y: hidden;
    border: 1px solid rgba(var(--ccd-primary-rgb), .12);
    border-radius: 12px;
    background: #fff;
    box-shadow:
        0 8px 20px rgba(37,50,71,.045),
        inset 0 1px 0 #fff;
    scrollbar-width: thin;
    scrollbar-color:
        rgba(var(--ccd-primary-rgb), .26)
        transparent;
}

body[data-page="customer-credit-account-detail"]
.credit-detail-table-wrap::-webkit-scrollbar {
    height: 8px;
}

body[data-page="customer-credit-account-detail"]
.credit-detail-table-wrap::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(var(--ccd-primary-rgb), .25);
}

body[data-page="customer-credit-account-detail"]
.credit-detail-table {
    width: 100%;
    min-width: 1050px;
    border-collapse: separate;
    border-spacing: 0;
}

body[data-page="customer-credit-account-detail"]
.credit-detail-table th,
body[data-page="customer-credit-account-detail"]
.credit-detail-table td {
    padding: 9px 10px;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid rgba(var(--ccd-primary-rgb), .08);
    white-space: nowrap;
}

body[data-page="customer-credit-account-detail"]
.credit-detail-table th {
    position: sticky;
    top: 0;
    z-index: 2;
    color: #445167;
    background:
        linear-gradient(
            180deg,
            #f7f9fc,
            #eef2f6
        );
    font-size: .59rem;
    font-weight: 900;
    letter-spacing: .015em;
}

body[data-page="customer-credit-account-detail"]
.credit-detail-table td {
    color: #445167;
    background: #fff;
    font-size: .62rem;
    line-height: 1.45;
}

body[data-page="customer-credit-account-detail"]
.credit-detail-table tbody tr:nth-child(even) td {
    background: #fbfcfd;
}

body[data-page="customer-credit-account-detail"]
.credit-detail-table tbody tr:hover td {
    background: rgba(var(--ccd-primary-rgb), .045);
}

body[data-page="customer-credit-account-detail"]
.credit-detail-table tbody tr:last-child td {
    border-bottom: 0;
}

body[data-page="customer-credit-account-detail"]
.credit-detail-table td:nth-child(5),
body[data-page="customer-credit-account-detail"]
.credit-detail-table td:nth-child(6) {
    color: var(--ccd-primary-dark);
    font-weight: 850;
    font-variant-numeric: tabular-nums;
}

body[data-page="customer-credit-account-detail"]
.credit-detail-wrap-text {
    min-width: 230px;
    max-width: 330px;
    white-space: normal !important;
    line-height: 1.5 !important;
    overflow-wrap: anywhere;
}

body[data-page="customer-credit-account-detail"]
.credit-detail-table small {
    color: var(--ccd-muted);
    font-size: .53rem;
}

/* Sticky first column on wide tables */
body[data-page="customer-credit-account-detail"]
.credit-detail-table th:first-child,
body[data-page="customer-credit-account-detail"]
.credit-detail-table td:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    box-shadow: 1px 0 0 rgba(var(--ccd-primary-rgb), .08);
}

body[data-page="customer-credit-account-detail"]
.credit-detail-table th:first-child {
    z-index: 3;
    background:
        linear-gradient(
            180deg,
            #f7f9fc,
            #eef2f6
        );
}

body[data-page="customer-credit-account-detail"]
.credit-detail-table td:first-child {
    background: #fff;
}

body[data-page="customer-credit-account-detail"]
.credit-detail-table tbody tr:nth-child(even) td:first-child {
    background: #fbfcfd;
}

/* =========================================================
   Pagination
   ========================================================= */

body[data-page="customer-credit-account-detail"]
.pagination-bar {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    margin-top: 13px;
    padding: 9px;
    border: 1px solid rgba(var(--ccd-primary-rgb), .10);
    border-radius: 11px;
    background: rgba(255,255,255,.90);
}

body[data-page="customer-credit-account-detail"]
.pagination-bar a,
body[data-page="customer-credit-account-detail"]
.pagination-bar span {
    display: inline-flex;
    min-width: 31px;
    min-height: 31px;
    align-items: center;
    justify-content: center;
    padding: 5px 8px;
    border-radius: 8px;
    font-size: .60rem;
    font-weight: 850;
    text-decoration: none;
}

body[data-page="customer-credit-account-detail"]
.pagination-bar a {
    color: var(--ccd-primary-dark);
    border: 1px solid rgba(var(--ccd-primary-rgb), .14);
    background: rgba(var(--ccd-primary-rgb), .05);
}

body[data-page="customer-credit-account-detail"]
.pagination-bar a.active {
    color: #fff;
    border-color: var(--ccd-primary);
    background:
        linear-gradient(
            145deg,
            var(--ccd-primary),
            var(--ccd-primary-dark)
        );
    box-shadow:
        0 6px 14px rgba(var(--ccd-primary-rgb), .18);
}

/* Empty state */
body[data-page="customer-credit-account-detail"]
.empty-state-card {
    display: grid;
    min-height: 92px;
    place-items: center;
    padding: 16px;
    border: 1px dashed var(--ccd-line);
    border-radius: 11px;
    color: var(--ccd-muted);
    background: var(--ccd-surface-soft);
    font-size: .69rem;
    text-align: center;
}

/* =========================================================
   Bottom nav
   ========================================================= */

body[data-page="customer-credit-account-detail"]
.bottom-nav {
    position: fixed;
    z-index: 1000;
    left: 50%;
    bottom: max(9px, env(safe-area-inset-bottom));
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: min(calc(100% - 24px), 460px);
    padding: 5px;
    border: 1px solid rgba(var(--ccd-primary-rgb), .14);
    border-radius: 15px;
    background: rgba(255,255,255,.94);
    box-shadow:
        0 16px 36px rgba(36,49,69,.15),
        inset 0 1px 0 rgba(255,255,255,.95);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    transform: translateX(-50%);
}

body[data-page="customer-credit-account-detail"]
.bottom-nav a {
    display: flex;
    min-width: 0;
    min-height: 38px;
    align-items: center;
    justify-content: center;
    padding: 6px 8px;
    border-radius: 10px;
    color: var(--ccd-soft);
    font-size: .69rem;
    font-weight: 850;
    text-align: center;
    text-decoration: none;
}

body[data-page="customer-credit-account-detail"]
.bottom-nav a.active {
    color: #fff;
    background:
        linear-gradient(
            145deg,
            var(--ccd-primary),
            var(--ccd-primary-dark)
        );
    box-shadow:
        0 7px 16px rgba(var(--ccd-primary-rgb), .22),
        inset 0 1px 0 rgba(255,255,255,.15);
}

/* =========================================================
   iPad / Tablet
   ========================================================= */

@media (max-width: 1100px) {
    body[data-page="customer-credit-account-detail"]
    .container.page-with-nav {
        width: calc(100% - 24px);
        max-width: 1020px;
    }

    body[data-page="customer-credit-account-detail"]
    .credit-detail-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body[data-page="customer-credit-account-detail"]
    .credit-detail-table {
        min-width: 980px;
    }
}

/* =========================================================
   Mobile
   ========================================================= */

@media (max-width: 700px) {
    body[data-page="customer-credit-account-detail"]
    .container.page-with-nav {
        width: calc(100% - 16px);
        max-width: 640px;
        padding: 8px 0 86px;
    }

    body[data-page="customer-credit-account-detail"]
    .credit-detail-hero {
        grid-template-columns: 1fr;
        gap: 12px;
        min-height: 0;
        padding: 16px 14px;
        border-radius: 16px;
    }

    body[data-page="customer-credit-account-detail"]
    .credit-detail-hero h1 {
        font-size: 1.45rem;
    }

    body[data-page="customer-credit-account-detail"]
    .credit-detail-hero > div:first-child > .section-subtitle {
        margin-top: 7px;
        font-size: .66rem;
        line-height: 1.55;
    }

    body[data-page="customer-credit-account-detail"]
    .credit-detail-hero .header-action-btn {
        width: 100%;
        min-height: 37px;
    }

    body[data-page="customer-credit-account-detail"]
    .credit-detail-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 7px;
        margin-top: 12px;
    }

    body[data-page="customer-credit-account-detail"]
    .credit-detail-summary > div {
        min-height: 70px;
        padding: 9px;
        border-radius: 10px;
    }

    body[data-page="customer-credit-account-detail"]
    .credit-detail-summary span {
        font-size: .52rem;
    }

    body[data-page="customer-credit-account-detail"]
    .credit-detail-summary strong {
        margin-top: 5px;
        font-size: .76rem;
    }

    body[data-page="customer-credit-account-detail"]
    .credit-detail-panel {
        margin-bottom: 9px;
        padding: 11px;
        border-radius: 12px;
    }

    body[data-page="customer-credit-account-detail"]
    .credit-detail-panel
    > .section-title-row {
        margin-bottom: 10px;
        padding-bottom: 10px;
    }

    body[data-page="customer-credit-account-detail"]
    .credit-detail-panel
    > .section-title-row
    > div:first-child {
        padding-right: 72px;
    }

    body[data-page="customer-credit-account-detail"]
    .credit-detail-panel
    > .section-title-row h3 {
        gap: 8px;
        font-size: .86rem;
    }

    body[data-page="customer-credit-account-detail"]
    .credit-detail-panel
    > .section-title-row h3::before {
        flex-basis: 4px;
        width: 4px;
        height: 18px;
        box-shadow:
            0 0 0 3px
            rgba(var(--ccd-copper-rgb), .065);
    }

    body[data-page="customer-credit-account-detail"]
    .credit-detail-panel
    > .section-title-row .section-subtitle {
        margin: 5px 0 0 12px;
        font-size: .60rem;
        line-height: 1.48;
    }

    body[data-page="customer-credit-account-detail"]
    .section-count {
        min-height: 24px;
        padding: 3px 7px;
        font-size: .51rem;
    }

    body[data-page="customer-credit-account-detail"]
    .credit-detail-table-wrap {
        border-radius: 9px;
    }

    body[data-page="customer-credit-account-detail"]
    .credit-detail-table {
        min-width: 860px;
    }

    body[data-page="customer-credit-account-detail"]
    .credit-detail-table th,
    body[data-page="customer-credit-account-detail"]
    .credit-detail-table td {
        padding: 7px 8px;
    }

    body[data-page="customer-credit-account-detail"]
    .credit-detail-table th {
        font-size: .53rem;
    }

    body[data-page="customer-credit-account-detail"]
    .credit-detail-table td {
        font-size: .56rem;
        line-height: 1.4;
    }

    body[data-page="customer-credit-account-detail"]
    .credit-detail-wrap-text {
        min-width: 190px;
        max-width: 245px;
    }

    body[data-page="customer-credit-account-detail"]
    .pagination-bar {
        justify-content: flex-start;
        padding: 8px;
        overflow-x: auto;
        flex-wrap: nowrap;
    }

    body[data-page="customer-credit-account-detail"]
    .pagination-bar a,
    body[data-page="customer-credit-account-detail"]
    .pagination-bar span {
        flex: 0 0 auto;
        min-width: 29px;
        min-height: 29px;
    }

    body[data-page="customer-credit-account-detail"]
    .bottom-nav {
        bottom: max(7px, env(safe-area-inset-bottom));
        width: calc(100% - 18px);
        max-width: 430px;
        padding: 4px;
    }

    body[data-page="customer-credit-account-detail"]
    .bottom-nav a {
        min-height: 36px;
        font-size: .65rem;
    }
}

/* Very small phones */
@media (max-width: 360px) {
    body[data-page="customer-credit-account-detail"]
    .credit-detail-summary {
        grid-template-columns: 1fr 1fr;
    }

    body[data-page="customer-credit-account-detail"]
    .credit-detail-panel
    > .section-title-row
    > div:first-child {
        padding-right: 65px;
    }

    body[data-page="customer-credit-account-detail"]
    .section-count {
        font-size: .48rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    body[data-page="customer-credit-account-detail"] *,
    body[data-page="customer-credit-account-detail"] *::before,
    body[data-page="customer-credit-account-detail"] *::after {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }
}

/* =========================================================
   PRMS Permission Management — Complete Responsive UI
   Scope: body[data-page="permissions"]
   Replaces the page-level <style> block.
   Load after global.css.
   ========================================================= */

body[data-page="permissions"] {
    --pm-bg: #f2f4f7;
    --pm-surface: #ffffff;
    --pm-soft-surface: #f8fafc;
    --pm-text: #273448;
    --pm-soft: #667489;
    --pm-muted: #8a96a7;
    --pm-line: #dce3eb;

    --pm-primary: #3f4f67;
    --pm-primary-dark: #243145;
    --pm-primary-rgb: 63, 79, 103;

    --pm-gold: #ad7544;
    --pm-gold-dark: #734923;
    --pm-gold-rgb: 173, 117, 68;

    --pm-success: #4c745e;
    --pm-success-dark: #31503f;
    --pm-success-rgb: 76, 116, 94;

    --pm-danger: #a14d58;
    --pm-danger-dark: #6d3038;
    --pm-danger-rgb: 161, 77, 88;

    --pm-warning: #a56a2f;
    --pm-warning-rgb: 165, 106, 47;

    min-height: 100vh;
    color: var(--pm-text);
    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(var(--pm-primary-rgb), .085),
            transparent 32rem
        ),
        radial-gradient(
            circle at 0% 100%,
            rgba(var(--pm-gold-rgb), .05),
            transparent 29rem
        ),
        linear-gradient(145deg, #eef1f5, #faf8f4);
}

body[data-page="permissions"] *,
body[data-page="permissions"] *::before,
body[data-page="permissions"] *::after {
    box-sizing: border-box;
}

body[data-page="permissions"] .container.page-with-nav {
    width: min(calc(100% - 30px), 1380px);
    max-width: 1380px;
    margin: 0 auto;
    padding: 18px 0 96px;
}

/* =========================================================
   Hero
   ========================================================= */

body[data-page="permissions"] .permission-hero {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 22px;
    min-height: 186px;
    margin-bottom: 14px;
    padding: 25px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 22px;
    color: #fff;
    background:
        radial-gradient(
            circle at 10% 7%,
            rgba(255,255,255,.16),
            transparent 25%
        ),
        radial-gradient(
            circle at 90% 110%,
            rgba(255,255,255,.10),
            transparent 38%
        ),
        linear-gradient(
            135deg,
            #243145 0%,
            #43536b 55%,
            #7b5936 100%
        );
    box-shadow:
        0 24px 56px rgba(36,49,69,.22),
        inset 0 1px 0 rgba(255,255,255,.14);
}

body[data-page="permissions"] .permission-hero::before {
    content: "PERMISSION CONTROL";
    position: absolute;
    z-index: -1;
    left: 20px;
    bottom: 9px;
    color: rgba(255,255,255,.042);
    font-size: clamp(3rem, 6.8vw, 6rem);
    font-weight: 950;
    line-height: .82;
    letter-spacing: -.08em;
}

body[data-page="permissions"] .permission-hero::after {
    content: "";
    position: absolute;
    z-index: -1;
    right: -90px;
    top: -118px;
    width: 310px;
    height: 310px;
    border: 44px solid rgba(255,255,255,.035);
    border-radius: 50%;
}

body[data-page="permissions"] .permission-hero h1 {
    margin: 0;
    color: #fff;
    font-size: clamp(1.85rem, 3vw, 2.45rem);
    line-height: 1.15;
    letter-spacing: -.04em;
}

body[data-page="permissions"] .permission-hero .page-subtitle {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 27px;
    margin: 0 0 8px;
    padding: 4px 9px;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 999px;
    color: #f4e8da;
    background: rgba(255,255,255,.09);
    font-size: .61rem;
    font-weight: 900;
    letter-spacing: .11em;
    text-transform: uppercase;
}

body[data-page="permissions"] .permission-hero .user-inline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
    margin-top: 12px;
    color: rgba(255,255,255,.78);
    font-size: .72rem;
}

body[data-page="permissions"] .permission-hero .role-badge {
    display: inline-flex;
    min-height: 25px;
    align-items: center;
    padding: 3px 9px;
    border: 1px solid rgba(255,255,255,.20);
    border-radius: 999px;
    color: #fff;
    background: rgba(255,255,255,.12);
    font-size: .63rem;
    font-weight: 900;
}

body[data-page="permissions"] .permission-hero-actions {
    display: flex;
    justify-content: flex-end;
}

body[data-page="permissions"] .permission-hero .header-action-btn {
    display: inline-flex;
    min-height: 41px;
    align-items: center;
    justify-content: center;
    padding: 8px 14px;
    border: 1px solid rgba(255,255,255,.20);
    border-radius: 10px;
    color: #fff;
    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.18),
            rgba(255,255,255,.07)
        );
    font-size: .66rem;
    font-weight: 900;
    text-decoration: none;
}

/* =========================================================
   Shared section cards
   ========================================================= */

body[data-page="permissions"] .permission-search-card,
body[data-page="permissions"] .permission-list-section,
body[data-page="permissions"] .permission-pagination-card {
    position: relative;
    overflow: hidden;
    margin-bottom: 14px;
    padding: 18px;
    border: 1px solid rgba(var(--pm-primary-rgb), .13);
    border-radius: 17px;
    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(var(--pm-primary-rgb), .05),
            transparent 190px
        ),
        linear-gradient(145deg, #fff, #fafbfd);
    box-shadow:
        0 12px 28px rgba(37,50,71,.06),
        inset 0 1px 0 #fff;
}

body[data-page="permissions"] .permission-search-card::before,
body[data-page="permissions"] .permission-list-section::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 5px;
    background:
        linear-gradient(
            180deg,
            var(--pm-primary),
            var(--pm-gold)
        );
}

/* =========================================================
   Section titles
   ========================================================= */

body[data-page="permissions"] .section-title-row {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 10px;
    margin-bottom: 14px;
    padding: 0 2px 13px;
    border-bottom: 1px solid rgba(var(--pm-primary-rgb), .10);
}

body[data-page="permissions"] .section-title-row h3 {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0;
    color: var(--pm-primary-dark);
    font-size: .98rem;
    line-height: 1.35;
}

body[data-page="permissions"] .section-title-row h3::before {
    content: "";
    flex: 0 0 5px;
    width: 5px;
    height: 20px;
    border-radius: 999px;
    background:
        linear-gradient(
            180deg,
            var(--pm-gold),
            var(--pm-primary)
        );
}

body[data-page="permissions"] .section-title-row .section-subtitle {
    margin: 7px 0 0 14px;
    color: var(--pm-muted);
    font-size: .67rem;
    line-height: 1.55;
}

body[data-page="permissions"] .section-count {
    display: inline-flex;
    min-height: 27px;
    align-items: center;
    justify-content: center;
    padding: 4px 9px;
    border: 1px solid rgba(var(--pm-primary-rgb), .16);
    border-radius: 999px;
    color: #314056;
    background:
        linear-gradient(
            180deg,
            #fff,
            rgba(var(--pm-primary-rgb), .065)
        );
    font-size: .57rem;
    font-weight: 900;
    white-space: nowrap;
}

/* =========================================================
   Search
   ========================================================= */

body[data-page="permissions"] .permission-search-form {
    padding: 14px;
    border: 1px solid rgba(var(--pm-primary-rgb), .09);
    border-radius: 13px;
    background: rgba(255,255,255,.84);
}

body[data-page="permissions"] .permission-search-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

body[data-page="permissions"] label {
    display: block;
    margin-bottom: 5px;
    color: #596579;
    font-size: .63rem;
    font-weight: 850;
}

body[data-page="permissions"] input[type="text"],
body[data-page="permissions"] select {
    width: 100%;
    min-height: 42px;
    padding: 8px 10px;
    border: 1px solid #d8dee7;
    border-radius: 10px;
    color: #334155;
    background: linear-gradient(180deg, #fff, #fbfcfd);
    font: inherit;
    font-size: .69rem;
}

body[data-page="permissions"] input:focus,
body[data-page="permissions"] select:focus {
    outline: none;
    border-color: rgba(var(--pm-primary-rgb), .52);
    box-shadow: 0 0 0 4px rgba(var(--pm-primary-rgb), .085);
}

body[data-page="permissions"] .permission-search-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

body[data-page="permissions"] .permission-search-actions button,
body[data-page="permissions"] .permission-search-actions .clear-filter-btn {
    display: inline-flex;
    min-height: 39px;
    align-items: center;
    justify-content: center;
    padding: 7px 13px;
    border-radius: 10px;
    font-size: .64rem;
    font-weight: 900;
    text-decoration: none;
}

body[data-page="permissions"] .permission-search-actions button {
    border: 1px solid var(--pm-primary-dark);
    color: #fff;
    background:
        linear-gradient(
            145deg,
            var(--pm-primary),
            var(--pm-primary-dark)
        );
}

body[data-page="permissions"] .permission-search-actions .clear-filter-btn {
    color: var(--pm-primary-dark);
    border: 1px solid rgba(var(--pm-primary-rgb), .16);
    background: rgba(var(--pm-primary-rgb), .055);
}

/* =========================================================
   Employee cards
   ========================================================= */

body[data-page="permissions"] .permission-card-list {
    display: grid;
    gap: 12px;
}

body[data-page="permissions"] .permission-user-card {
    position: relative;
    overflow: hidden;
    padding: 15px;
    border: 1px solid rgba(var(--pm-primary-rgb), .12);
    border-radius: 14px;
    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(var(--pm-primary-rgb), .05),
            transparent 170px
        ),
        linear-gradient(145deg, #fff, #fafbfd);
    box-shadow:
        0 8px 20px rgba(37,50,71,.05),
        inset 0 1px 0 #fff;
}

body[data-page="permissions"] .permission-user-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background:
        linear-gradient(
            180deg,
            var(--pm-primary),
            var(--pm-gold)
        );
}

body[data-page="permissions"] .permission-user-top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(var(--pm-primary-rgb), .09);
}

body[data-page="permissions"] .permission-user-top h3 {
    margin: 0;
    color: #263448;
    font-size: .90rem;
}

body[data-page="permissions"] .permission-user-top p {
    margin: 4px 0 0;
    color: var(--pm-muted);
    font-size: .62rem;
}

body[data-page="permissions"] .permission-status-pill {
    display: inline-flex;
    min-height: 26px;
    align-items: center;
    padding: 4px 8px;
    border-radius: 999px;
    color: var(--pm-success-dark);
    background: rgba(var(--pm-success-rgb), .11);
    font-size: .57rem;
    font-weight: 900;
}

/* =========================================================
   Reset row
   ========================================================= */

body[data-page="permissions"] .permission-reset-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    margin: 11px 0;
    padding: 11px 12px;
    border: 1px solid rgba(var(--pm-gold-rgb), .13);
    border-radius: 11px;
    background:
        linear-gradient(
            145deg,
            rgba(var(--pm-gold-rgb), .07),
            rgba(255,255,255,.85)
        );
}

body[data-page="permissions"] .permission-reset-row strong {
    color: #5f452d;
    font-size: .67rem;
}

body[data-page="permissions"] .permission-reset-row p {
    margin: 4px 0 0;
    color: #7b6b5a;
    font-size: .59rem;
    line-height: 1.45;
}

body[data-page="permissions"] .permission-reset-row form {
    margin: 0;
}

body[data-page="permissions"] .permission-reset-row .header-action-btn {
    display: inline-flex;
    min-height: 36px;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    border: 1px solid var(--pm-gold-dark);
    border-radius: 9px;
    color: #fff;
    background:
        linear-gradient(
            145deg,
            var(--pm-gold),
            var(--pm-gold-dark)
        );
    font-size: .58rem;
    font-weight: 900;
}

/* =========================================================
   Override intro
   ========================================================= */

body[data-page="permissions"] .permission-override-intro {
    margin: 12px 0 10px;
    padding: 11px 12px;
    border: 1px solid rgba(var(--pm-primary-rgb), .11);
    border-radius: 11px;
    background:
        linear-gradient(
            145deg,
            rgba(var(--pm-primary-rgb), .055),
            rgba(255,255,255,.82)
        );
}

body[data-page="permissions"] .permission-override-intro h3 {
    margin: 0;
    color: var(--pm-primary-dark);
    font-size: .76rem;
}

body[data-page="permissions"] .permission-override-intro p {
    margin: 5px 0 0;
    color: var(--pm-soft);
    font-size: .61rem;
    line-height: 1.5;
}

/* =========================================================
   Permission grid and items
   ========================================================= */

body[data-page="permissions"] .permission-override-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
}

body[data-page="permissions"] .permission-override-item {
    min-width: 0;
    padding: 11px;
    border: 1px solid rgba(var(--pm-primary-rgb), .11);
    border-radius: 11px;
    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(var(--pm-primary-rgb), .045),
            transparent 120px
        ),
        linear-gradient(145deg, #fff, #fafbfd);
}

body[data-page="permissions"] .permission-override-heading {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 8px;
    margin-bottom: 8px;
}

body[data-page="permissions"] .permission-override-heading strong {
    color: #2d3a4e;
    font-size: .66rem;
    line-height: 1.4;
}

body[data-page="permissions"] .permission-effective-pill {
    display: inline-flex;
    min-height: 24px;
    align-items: center;
    padding: 3px 7px;
    border-radius: 999px;
    font-size: .52rem;
    font-weight: 900;
    white-space: nowrap;
}

body[data-page="permissions"] .permission-effective-pill.allowed {
    color: var(--pm-success-dark);
    background: rgba(var(--pm-success-rgb), .11);
}

body[data-page="permissions"] .permission-effective-pill.denied {
    color: var(--pm-danger-dark);
    background: rgba(var(--pm-danger-rgb), .10);
}

/* =========================================================
   Three-state controls
   ========================================================= */

body[data-page="permissions"] .permission-state-options {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
}

body[data-page="permissions"] .permission-state-option {
    display: grid;
    grid-template-columns: 16px minmax(0, 1fr);
    align-items: start;
    gap: 6px;
    min-width: 0;
    margin: 0;
    padding: 8px;
    border: 1px solid rgba(var(--pm-primary-rgb), .075);
    border-radius: 9px;
    background: rgba(var(--pm-primary-rgb), .035);
    cursor: pointer;
}

body[data-page="permissions"] .permission-state-option:hover {
    border-color: rgba(var(--pm-primary-rgb), .20);
    background: rgba(var(--pm-primary-rgb), .06);
}

body[data-page="permissions"] .permission-state-option input[type="radio"] {
    width: 15px;
    height: 15px;
    margin: 1px 0 0;
    accent-color: var(--pm-primary);
}

body[data-page="permissions"] .permission-state-option span {
    min-width: 0;
    color: #536076;
    font-size: .55rem;
    line-height: 1.38;
    overflow-wrap: anywhere;
}

body[data-page="permissions"] .permission-state-option.disabled {
    opacity: .55;
    cursor: not-allowed;
}

/* Highlight selected state */
body[data-page="permissions"] .permission-state-option:has(input:checked) {
    border-color: rgba(var(--pm-primary-rgb), .32);
    background:
        linear-gradient(
            145deg,
            rgba(var(--pm-primary-rgb), .10),
            rgba(255,255,255,.88)
        );
    box-shadow: inset 0 0 0 1px rgba(var(--pm-primary-rgb), .04);
}

body[data-page="permissions"] .permission-state-option:has(input[value="allow"]:checked) {
    border-color: rgba(var(--pm-success-rgb), .30);
    background: rgba(var(--pm-success-rgb), .08);
}

body[data-page="permissions"] .permission-state-option:has(input[value="deny"]:checked) {
    border-color: rgba(var(--pm-danger-rgb), .28);
    background: rgba(var(--pm-danger-rgb), .07);
}

/* =========================================================
   Resolution / lock note
   ========================================================= */

body[data-page="permissions"] .permission-protected-note {
    margin: 7px 0 0;
    padding: 7px 8px;
    border-left: 3px solid var(--pm-warning);
    border-radius: 0 8px 8px 0;
    color: #795124;
    background: rgba(var(--pm-warning-rgb), .08);
    font-size: .55rem;
    font-weight: 700;
    line-height: 1.4;
}

body[data-page="permissions"] .permission-resolution {
    display: grid;
    gap: 4px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed rgba(var(--pm-primary-rgb), .18);
    color: var(--pm-soft);
    font-size: .56rem;
    line-height: 1.42;
}

body[data-page="permissions"] .permission-resolution strong {
    color: #405066;
}

/* Save button */
body[data-page="permissions"] .permission-update-form > button[type="submit"] {
    width: 100%;
    min-height: 40px;
    margin-top: 11px;
    border: 1px solid var(--pm-primary-dark);
    border-radius: 10px;
    color: #fff;
    background:
        linear-gradient(
            145deg,
            var(--pm-primary),
            var(--pm-primary-dark)
        );
    font-size: .64rem;
    font-weight: 900;
}

/* =========================================================
   Pagination
   ========================================================= */

body[data-page="permissions"] .permission-pagination-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
}

body[data-page="permissions"] .permission-pagination-card span {
    display: block;
    color: var(--pm-muted);
    font-size: .57rem;
}

body[data-page="permissions"] .permission-pagination-card strong {
    display: block;
    margin-top: 4px;
    color: var(--pm-primary-dark);
    font-size: .70rem;
}

body[data-page="permissions"] .permission-pagination-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

body[data-page="permissions"] .permission-pagination-actions a {
    display: inline-flex;
    min-height: 34px;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    border: 1px solid rgba(var(--pm-primary-rgb), .15);
    border-radius: 8px;
    color: var(--pm-primary-dark);
    background: rgba(var(--pm-primary-rgb), .05);
    font-size: .59rem;
    font-weight: 850;
    text-decoration: none;
}

/* =========================================================
   Bottom nav
   ========================================================= */

body[data-page="permissions"] .bottom-nav {
    position: fixed;
    z-index: 1000;
    left: 50%;
    bottom: max(9px, env(safe-area-inset-bottom));
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: min(calc(100% - 24px), 460px);
    padding: 5px;
    border: 1px solid rgba(var(--pm-primary-rgb), .14);
    border-radius: 15px;
    background: rgba(255,255,255,.94);
    box-shadow: 0 16px 36px rgba(36,49,69,.15);
    transform: translateX(-50%);
}

body[data-page="permissions"] .bottom-nav a {
    display: flex;
    min-height: 38px;
    align-items: center;
    justify-content: center;
    padding: 6px 8px;
    border-radius: 10px;
    color: var(--pm-soft);
    font-size: .69rem;
    font-weight: 850;
    text-decoration: none;
}

body[data-page="permissions"] .bottom-nav a.active {
    color: #fff;
    background:
        linear-gradient(
            145deg,
            var(--pm-primary),
            var(--pm-primary-dark)
        );
}

/* =========================================================
   Tablet
   ========================================================= */

@media (max-width: 1100px) {
    body[data-page="permissions"] .container.page-with-nav {
        width: calc(100% - 24px);
        max-width: 1020px;
    }

    body[data-page="permissions"] .permission-search-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body[data-page="permissions"] .permission-state-options {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   Mobile
   ========================================================= */

@media (max-width: 700px) {
    body[data-page="permissions"] .container.page-with-nav {
        width: calc(100% - 16px);
        max-width: 640px;
        padding: 8px 0 86px;
    }

    body[data-page="permissions"] .permission-hero {
        grid-template-columns: 1fr;
        gap: 12px;
        min-height: 0;
        padding: 16px 14px;
        border-radius: 16px;
    }

    body[data-page="permissions"] .permission-hero h1 {
        font-size: 1.42rem;
    }

    body[data-page="permissions"] .permission-hero .header-action-btn {
        width: 100%;
        min-height: 37px;
    }

    body[data-page="permissions"] .permission-search-card,
    body[data-page="permissions"] .permission-list-section,
    body[data-page="permissions"] .permission-pagination-card {
        margin-bottom: 9px;
        padding: 11px;
        border-radius: 12px;
    }

    body[data-page="permissions"] .section-title-row {
        margin-bottom: 10px;
        padding-bottom: 10px;
    }

    body[data-page="permissions"] .section-title-row h3 {
        gap: 8px;
        font-size: .86rem;
    }

    body[data-page="permissions"] .section-title-row .section-subtitle {
        margin: 5px 0 0 12px;
        font-size: .60rem;
        line-height: 1.48;
    }

    body[data-page="permissions"] .section-count {
        min-height: 24px;
        padding: 3px 7px;
        font-size: .51rem;
    }

    body[data-page="permissions"] .permission-search-form {
        padding: 9px;
    }

    body[data-page="permissions"] .permission-search-grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    body[data-page="permissions"] input[type="text"],
    body[data-page="permissions"] select {
        min-height: 43px;
        font-size: 16px;
    }

    body[data-page="permissions"] .permission-search-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 7px;
    }

    body[data-page="permissions"] .permission-search-actions > * {
        width: 100%;
    }

    body[data-page="permissions"] .permission-user-card {
        padding: 10px;
        border-radius: 10px;
    }

    body[data-page="permissions"] .permission-user-top h3 {
        font-size: .78rem;
    }

    body[data-page="permissions"] .permission-reset-row {
        grid-template-columns: 1fr;
        gap: 8px;
        padding: 9px;
    }

    body[data-page="permissions"] .permission-reset-row .header-action-btn {
        width: 100%;
    }

    body[data-page="permissions"] .permission-override-grid {
        grid-template-columns: 1fr;
        gap: 7px;
    }

    body[data-page="permissions"] .permission-override-item {
        padding: 9px;
        border-radius: 9px;
    }

    body[data-page="permissions"] .permission-override-heading strong {
        font-size: .62rem;
    }

    body[data-page="permissions"] .permission-state-options {
        grid-template-columns: 1fr;
        gap: 5px;
    }

    body[data-page="permissions"] .permission-state-option {
        grid-template-columns: 16px minmax(0, 1fr);
        padding: 7px 8px;
    }

    body[data-page="permissions"] .permission-state-option span {
        font-size: .57rem;
    }

    body[data-page="permissions"] .permission-pagination-card {
        grid-template-columns: 1fr;
    }

    body[data-page="permissions"] .permission-pagination-actions {
        width: 100%;
    }

    body[data-page="permissions"] .permission-pagination-actions a {
        flex: 1;
    }

    body[data-page="permissions"] .bottom-nav {
        bottom: max(7px, env(safe-area-inset-bottom));
        width: calc(100% - 18px);
        max-width: 430px;
        padding: 4px;
    }
}

@media (prefers-reduced-motion: reduce) {
    body[data-page="permissions"] *,
    body[data-page="permissions"] *::before,
    body[data-page="permissions"] *::after {
        animation: none !important;
        transition: none !important;
    }
}
/* =========================================================
   Permission Management — Horizontal State Text Fix
   Scope: body[data-page="permissions"]
   Load after permission-management.css
   ========================================================= */

body[data-page="permissions"]
.permission-state-option {
    display: grid !important;
    grid-template-columns: 18px minmax(0, 1fr) !important;
    align-items: start !important;
    gap: 8px !important;
    min-width: 0 !important;
    width: 100% !important;
    padding: 9px 10px !important;
}

body[data-page="permissions"]
.permission-state-option
input[type="radio"] {
    grid-column: 1;
    grid-row: 1;
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    min-height: 16px !important;
    margin: 1px 0 0 !important;
    padding: 0 !important;
}

body[data-page="permissions"]
.permission-state-option
span {
    grid-column: 2;
    grid-row: 1;

    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 0 !important;

    writing-mode: horizontal-tb !important;
    text-orientation: mixed !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;

    color: #536076;
    font-size: .60rem !important;
    line-height: 1.45 !important;
    text-align: left !important;
}

/* Desktop / iPad: keep each option readable inside the 3-column state row */
@media (min-width: 701px) {
    body[data-page="permissions"]
    .permission-state-options {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 7px !important;
    }

    body[data-page="permissions"]
    .permission-state-option {
        min-height: 58px;
    }

    body[data-page="permissions"]
    .permission-state-option span {
        font-size: .58rem !important;
        line-height: 1.42 !important;
    }
}

/* iPad portrait: two columns is safer than squeezing 3 narrow boxes */
@media (min-width: 701px) and (max-width: 900px) {
    body[data-page="permissions"]
    .permission-state-options {
        grid-template-columns: 1fr !important;
    }

    body[data-page="permissions"]
    .permission-state-option {
        min-height: 0;
    }
}

/* Mobile */
@media (max-width: 700px) {
    body[data-page="permissions"]
    .permission-state-options {
        grid-template-columns: 1fr !important;
        gap: 6px !important;
    }

    body[data-page="permissions"]
    .permission-state-option {
        min-height: 0;
        padding: 8px 9px !important;
    }

    body[data-page="permissions"]
    .permission-state-option span {
        font-size: .59rem !important;
        line-height: 1.42 !important;
    }
}

/* =========================================================
   Permission Management — Vertical Options Inside Two-Column Cards
   Scope: body[data-page="permissions"]
   Load after all previous permission CSS files
   ========================================================= */

/* Two permission cards per row on desktop and iPad */
body[data-page="permissions"]
.permission-override-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
}

/* Each permission card stays compact */
body[data-page="permissions"]
.permission-override-item {
    min-width: 0 !important;
    padding: 12px !important;
}

/* Permission title and actual result stay on one row */
body[data-page="permissions"]
.permission-override-heading {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: start !important;
    gap: 8px !important;
    margin-bottom: 9px !important;
}

body[data-page="permissions"]
.permission-override-heading > strong {
    min-width: 0 !important;
    writing-mode: horizontal-tb !important;
    text-orientation: mixed !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
}

/* Three states must be stacked vertically */
body[data-page="permissions"]
.permission-state-options {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 6px !important;
}

/* Each option is one horizontal row */
body[data-page="permissions"]
.permission-state-option {
    display: grid !important;
    grid-template-columns: 18px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 8px !important;

    width: 100% !important;
    min-width: 0 !important;
    min-height: 38px !important;

    margin: 0 !important;
    padding: 8px 10px !important;

    border-radius: 9px !important;
    writing-mode: horizontal-tb !important;
    text-orientation: mixed !important;
}

/* Radio */
body[data-page="permissions"]
.permission-state-option
input[type="radio"] {
    grid-column: 1 !important;
    grid-row: 1 !important;

    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    min-height: 16px !important;

    margin: 0 !important;
    padding: 0 !important;
}

/* Text stays horizontal */
body[data-page="permissions"]
.permission-state-option
span {
    grid-column: 2 !important;
    grid-row: 1 !important;

    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 0 !important;

    writing-mode: horizontal-tb !important;
    text-orientation: mixed !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;

    font-size: .61rem !important;
    line-height: 1.42 !important;
    text-align: left !important;
}

/* Selected option stays highlighted without becoming tall */
body[data-page="permissions"]
.permission-state-option:has(input:checked) {
    min-height: 38px !important;
}

/* Resolution stays below the three options */
body[data-page="permissions"]
.permission-resolution {
    margin-top: 9px !important;
}

/* Tablet */
@media (min-width: 701px) and (max-width: 1000px) {
    body[data-page="permissions"]
    .permission-override-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }

    body[data-page="permissions"]
    .permission-override-item {
        padding: 10px !important;
    }

    body[data-page="permissions"]
    .permission-state-option {
        min-height: 36px !important;
        padding: 7px 8px !important;
    }

    body[data-page="permissions"]
    .permission-state-option span {
        font-size: .58rem !important;
    }
}

/* Mobile: one permission card per row */
@media (max-width: 700px) {
    body[data-page="permissions"]
    .permission-override-grid {
        grid-template-columns: 1fr !important;
        gap: 7px !important;
    }

    body[data-page="permissions"]
    .permission-override-item {
        padding: 9px !important;
    }

    body[data-page="permissions"]
    .permission-state-option {
        min-height: 36px !important;
        padding: 7px 8px !important;
    }

    body[data-page="permissions"]
    .permission-state-option span {
        font-size: .59rem !important;
        line-height: 1.4 !important;
    }
}


/* =========================================================
   Permission Management — Mobile Two-Column Permission Cards
   Scope: body[data-page="permissions"]
   Load after all previous permission CSS files
   ========================================================= */

/* Mobile: two permission cards per row */
@media (max-width: 700px) {
    body[data-page="permissions"]
    .permission-override-grid {
        display: grid !important;
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;
        align-items: stretch;
        gap: 7px !important;
    }

    body[data-page="permissions"]
    .permission-override-item {
        min-width: 0 !important;
        height: 100%;
        padding: 8px !important;
        border-radius: 9px !important;
    }

    /* Permission title + result pill */
    body[data-page="permissions"]
    .permission-override-heading {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        align-items: start !important;
        gap: 5px !important;
        margin-bottom: 7px !important;
    }

    body[data-page="permissions"]
    .permission-override-heading > strong {
        min-width: 0 !important;
        font-size: .57rem !important;
        line-height: 1.35 !important;

        writing-mode: horizontal-tb !important;
        text-orientation: mixed !important;
        white-space: normal !important;
        word-break: normal !important;
        overflow-wrap: break-word !important;
    }

    body[data-page="permissions"]
    .permission-effective-pill {
        min-height: 21px !important;
        padding: 2px 5px !important;
        font-size: .46rem !important;
    }

    /* Three options remain vertical inside each card */
    body[data-page="permissions"]
    .permission-state-options {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 4px !important;
    }

    body[data-page="permissions"]
    .permission-state-option {
        display: grid !important;
        grid-template-columns: 15px minmax(0, 1fr) !important;
        align-items: start !important;
        gap: 5px !important;

        width: 100% !important;
        min-width: 0 !important;
        min-height: 33px !important;

        margin: 0 !important;
        padding: 6px !important;
        border-radius: 8px !important;
    }

    body[data-page="permissions"]
    .permission-state-option
    input[type="radio"] {
        width: 14px !important;
        height: 14px !important;
        min-width: 14px !important;
        min-height: 14px !important;
        margin: 1px 0 0 !important;
    }

    body[data-page="permissions"]
    .permission-state-option
    span {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;

        font-size: .52rem !important;
        line-height: 1.34 !important;

        writing-mode: horizontal-tb !important;
        text-orientation: mixed !important;
        white-space: normal !important;
        word-break: normal !important;
        overflow-wrap: break-word !important;
    }

    /* Protected / locked note */
    body[data-page="permissions"]
    .permission-protected-note {
        margin-top: 5px !important;
        padding: 5px 6px !important;
        font-size: .48rem !important;
        line-height: 1.32 !important;
    }

    /* Actual result + source */
    body[data-page="permissions"]
    .permission-resolution {
        gap: 3px !important;
        margin-top: 6px !important;
        padding-top: 6px !important;
        font-size: .49rem !important;
        line-height: 1.34 !important;
    }
}

/* Very narrow phones: one card per row for readability */
@media (max-width: 360px) {
    body[data-page="permissions"]
    .permission-override-grid {
        grid-template-columns: 1fr !important;
    }

    body[data-page="permissions"]
    .permission-override-item {
        padding: 9px !important;
    }

    body[data-page="permissions"]
    .permission-override-heading > strong {
        font-size: .61rem !important;
    }

    body[data-page="permissions"]
    .permission-state-option
    span {
        font-size: .56rem !important;
    }
}

/* =========================================================
   Room Detail — Desktop / iPad Operation Button Alignment Fix
   Scope: body[data-page="room-detail"]
   Mobile UI is intentionally unchanged.
   Load after the existing room-detail/global CSS.
   ========================================================= */

@media (min-width: 701px) {
    body[data-page="room-detail"] .room-detail-operation-grid {
        align-items: stretch;
    }

    body[data-page="room-detail"] .room-detail-operation-form {
        display: flex !important;
        flex-direction: column !important;
        min-width: 0;
        height: 100% !important;
    }

    body[data-page="room-detail"]
    .room-detail-operation-form
    .room-detail-operation-label {
        display: block;
        margin-bottom: 8px;
    }

    body[data-page="room-detail"]
    .room-detail-operation-form
    > button[type="submit"] {
        width: 100%;
        min-height: 40px;
        margin-top: auto !important;
    }

    body[data-page="room-detail"]
    .room-detail-operation-form:first-child::after {
        content: "";
        order: 2;
        flex: 1 1 auto;
        min-height: 72px;
    }

    body[data-page="room-detail"]
    .room-detail-operation-form:first-child
    > button[type="submit"] {
        order: 3;
    }
}

@media (min-width: 701px) and (max-width: 1024px) {
    body[data-page="room-detail"]
    .room-detail-operation-form:first-child::after {
        min-height: 64px;
    }
}

/* =========================================================
   Payroll Records — Mobile Compact Header & Amount Fix
   Scope: body[data-page="payroll-records"]
   Desktop and iPad remain unchanged.
   Load after global.css.
   ========================================================= */

@media (max-width: 700px) {
    /* ---------------------------------------------------------
       Record card title area
       Left: employee + payroll type
       Right: final amount
       Bottom: official daily total
       --------------------------------------------------------- */

    body[data-page="payroll-records"]
    .info-card
    .section-title-row:has(> div:nth-child(3)) {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        align-items: start !important;
        gap: 7px 10px !important;
        margin-bottom: 9px !important;
        padding-bottom: 9px !important;
    }

    /* Employee name and payroll record type */
    body[data-page="payroll-records"]
    .info-card
    .section-title-row:has(> div:nth-child(3))
    > div:first-child {
        min-width: 0 !important;
    }

    body[data-page="payroll-records"]
    .info-card
    .section-title-row:has(> div:nth-child(3))
    > div:first-child h3 {
        margin: 0 !important;
        font-size: .78rem !important;
        line-height: 1.3 !important;
    }

    body[data-page="payroll-records"]
    .info-card
    .section-title-row:has(> div:nth-child(3))
    > div:first-child
    .section-subtitle {
        margin: 4px 0 0 !important;
        color: #7b8798 !important;
        font-size: .56rem !important;
        line-height: 1.4 !important;
        overflow-wrap: anywhere !important;
    }

    /* Final amount at top-right */
    body[data-page="payroll-records"]
    .info-card
    .section-title-row
    > div[style*="text-align: right"] {
        min-width: 82px !important;
        margin: 0 !important;
        padding: 0 !important;
        text-align: right !important;
    }

    body[data-page="payroll-records"]
    .info-card
    .section-title-row
    > div[style*="text-align: right"]
    > span {
        display: block !important;
        margin: 0 !important;
        color: #8792a2 !important;
        font-size: .50rem !important;
        line-height: 1.25 !important;
    }

    body[data-page="payroll-records"]
    .info-card
    .section-title-row
    > div[style*="text-align: right"]
    > strong {
        display: block !important;
        margin-top: 3px !important;
        color: #273448 !important;
        font-size: .86rem !important;
        line-height: 1.2 !important;
        white-space: nowrap !important;
        font-variant-numeric: tabular-nums;
    }

    /* Official daily total block */
    body[data-page="payroll-records"]
    .info-card
    .section-title-row
    > div[style*="margin-top: 10px"] {
        grid-column: 1 / -1 !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        align-items: center !important;
        gap: 3px 8px !important;

        width: 100% !important;
        min-width: 0 !important;

        margin: 0 !important;
        padding: 7px 9px !important;

        border: 1px solid rgba(63, 79, 103, .08) !important;
        border-radius: 9px !important;
        background: rgba(63, 79, 103, .045) !important;
    }

    body[data-page="payroll-records"]
    .info-card
    .section-title-row
    > div[style*="margin-top: 10px"]
    > span {
        grid-column: 1 !important;
        grid-row: 1 !important;
        margin: 0 !important;
        color: #69768a !important;
        font-size: .52rem !important;
        font-weight: 750 !important;
        line-height: 1.3 !important;
    }

    body[data-page="payroll-records"]
    .info-card
    .section-title-row
    > div[style*="margin-top: 10px"]
    > strong {
        grid-column: 2 !important;
        grid-row: 1 / span 2 !important;
        align-self: center !important;

        display: block !important;
        margin: 0 !important;

        color: #334155 !important;
        font-size: .78rem !important;
        line-height: 1.2 !important;
        white-space: nowrap !important;
        font-variant-numeric: tabular-nums;
    }

    body[data-page="payroll-records"]
    .info-card
    .section-title-row
    > div[style*="margin-top: 10px"]
    > small {
        grid-column: 1 !important;
        grid-row: 2 !important;
        display: block !important;
        margin: 1px 0 0 !important;
        color: #8b96a7 !important;
        font-size: .47rem !important;
        line-height: 1.3 !important;
    }

    /* ---------------------------------------------------------
       Overall card density on mobile
       --------------------------------------------------------- */

    body[data-page="payroll-records"]
    .container.page-with-nav
    > .info-card {
        padding: 11px !important;
        border-radius: 12px !important;
        margin-bottom: 9px !important;
    }

    body[data-page="payroll-records"]
    .info-card
    .attendance-info-grid {
        gap: 6px !important;
    }

    body[data-page="payroll-records"]
    .info-card
    .attendance-info-grid
    > div {
        min-height: 58px !important;
        padding: 8px !important;
        border-radius: 9px !important;
    }

    body[data-page="payroll-records"]
    .info-card
    .attendance-info-grid span {
        font-size: .50rem !important;
        line-height: 1.3 !important;
    }

    body[data-page="payroll-records"]
    .info-card
    .attendance-info-grid strong {
        margin-top: 4px !important;
        font-size: .62rem !important;
        line-height: 1.35 !important;
        overflow-wrap: anywhere !important;
    }

    body[data-page="payroll-records"]
    .info-card hr {
        margin: 9px 0 !important;
    }

    body[data-page="payroll-records"]
    .info-card
    > p:last-child {
        margin: 8px 0 0 !important;
        font-size: .58rem !important;
        line-height: 1.45 !important;
    }

    /* ---------------------------------------------------------
       Official daily summary cards near the top
       --------------------------------------------------------- */

    body[data-page="payroll-records"]
    .info-card
    .attendance-info-grid
    > div[style*="padding: 12px"] {
        min-height: 66px !important;
        padding: 8px !important;
        border-radius: 10px !important;
    }

    body[data-page="payroll-records"]
    .info-card
    .attendance-info-grid
    > div[style*="padding: 12px"]
    > strong[style*="font-size: 22px"] {
        margin-top: 3px !important;
        font-size: .80rem !important;
        line-height: 1.2 !important;
    }

    body[data-page="payroll-records"]
    .info-card
    .attendance-info-grid
    > div[style*="padding: 12px"]
    > small {
        font-size: .48rem !important;
        line-height: 1.3 !important;
    }
}

/* Extremely narrow phones */
@media (max-width: 360px) {
    body[data-page="payroll-records"]
    .info-card
    .section-title-row:has(> div:nth-child(3)) {
        gap: 6px 7px !important;
    }

    body[data-page="payroll-records"]
    .info-card
    .section-title-row
    > div[style*="text-align: right"] {
        min-width: 72px !important;
    }

    body[data-page="payroll-records"]
    .info-card
    .section-title-row
    > div[style*="text-align: right"]
    > strong {
        font-size: .78rem !important;
    }
}

/* =========================================================
   Payroll Records — Two-Column Record Cards + Mobile Dense Grid
   Scope: body[data-page="payroll-records"]
   Load after payroll-records-mobile-fix.css
   ========================================================= */

/* =========================================================
   Desktop / iPad page layout
   Only payroll record cards become two per row.
   ========================================================= */

@media (min-width: 701px) {
    body[data-page="payroll-records"]
    .container.page-with-nav {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: start;
        gap: 14px;
        width: min(calc(100% - 30px), 1380px);
        max-width: 1380px;
    }

    /* Full-width page sections */
    body[data-page="payroll-records"]
    .container.page-with-nav
    > .profile-premium-hero,
    body[data-page="payroll-records"]
    .container.page-with-nav
    > .profile-premium-reminder,
    body[data-page="payroll-records"]
    .container.page-with-nav
    > .info-card:first-of-type {
        grid-column: 1 / -1;
        width: 100%;
    }

    /*
       The daily summary card contains a section-title-row,
       followed by an attendance grid, but no payroll header
       with three direct children. Keep it full width.
    */
    body[data-page="payroll-records"]
    .container.page-with-nav
    > .info-card:has(
        .section-title-row
        + .attendance-info-grid
    ):not(
        :has(
            .section-title-row
            > div:nth-child(3)
        )
    ) {
        grid-column: 1 / -1;
    }

    /*
       Actual payroll record cards contain:
       1. employee/title
       2. final amount
       3. official daily total
    */
    body[data-page="payroll-records"]
    .container.page-with-nav
    > .info-card:has(
        .section-title-row
        > div:nth-child(3)
    ) {
        grid-column: auto;
        min-width: 0;
        width: 100%;
        height: 100%;
        margin: 0;
    }

    /* Pagination and empty state stay full width */
    body[data-page="payroll-records"]
    .container.page-with-nav
    > .info-card:last-child:not(
        :has(
            .section-title-row
            > div:nth-child(3)
        )
    ) {
        grid-column: 1 / -1;
    }

    /* Record header fits inside half-width cards */
    body[data-page="payroll-records"]
    .info-card
    .section-title-row:has(
        > div:nth-child(3)
    ) {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: start;
        gap: 8px 10px;
    }

    body[data-page="payroll-records"]
    .info-card
    .section-title-row:has(
        > div:nth-child(3)
    )
    > div:nth-child(3) {
        grid-column: 1 / -1;
        width: 100%;
        margin-top: 2px !important;
    }

    /* Inside each half-width record card: two data cells per row */
    body[data-page="payroll-records"]
    .info-card:has(
        .section-title-row
        > div:nth-child(3)
    )
    .attendance-info-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    body[data-page="payroll-records"]
    .info-card:has(
        .section-title-row
        > div:nth-child(3)
    )
    .attendance-info-grid > div {
        min-width: 0;
    }
}

/* iPad: slightly tighter spacing */
@media (min-width: 701px) and (max-width: 1100px) {
    body[data-page="payroll-records"]
    .container.page-with-nav {
        width: calc(100% - 24px);
        gap: 10px;
    }

    body[data-page="payroll-records"]
    .info-card:has(
        .section-title-row
        > div:nth-child(3)
    ) {
        padding: 13px;
        border-radius: 13px;
    }

    body[data-page="payroll-records"]
    .info-card:has(
        .section-title-row
        > div:nth-child(3)
    )
    .attendance-info-grid {
        gap: 6px;
    }

    body[data-page="payroll-records"]
    .info-card:has(
        .section-title-row
        > div:nth-child(3)
    )
    .attendance-info-grid > div {
        padding: 8px;
    }
}

/* =========================================================
   Mobile — compact attendance information
   ========================================================= */

@media (max-width: 700px) {
    /* Ensure the page stays one column on phones */
    body[data-page="payroll-records"]
    .container.page-with-nav {
        display: block;
        width: calc(100% - 16px);
    }

    /*
       Keep two compact cells per row.
       This saves much more vertical space than one-column cards.
    */
    body[data-page="payroll-records"]
    .info-card
    .attendance-info-grid {
        display: grid !important;
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;
        align-items: stretch;
        gap: 5px !important;
        margin-top: 8px !important;
    }

    body[data-page="payroll-records"]
    .info-card
    .attendance-info-grid > div {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;

        min-width: 0 !important;
        min-height: 49px !important;
        height: auto !important;

        padding: 6px 7px !important;
        border-radius: 8px !important;

        background:
            linear-gradient(
                145deg,
                rgba(63, 79, 103, .045),
                rgba(255,255,255,.86)
            ) !important;
    }

    body[data-page="payroll-records"]
    .info-card
    .attendance-info-grid span {
        margin: 0 !important;
        color: #8792a2 !important;
        font-size: .46rem !important;
        font-weight: 750 !important;
        line-height: 1.2 !important;
    }

    body[data-page="payroll-records"]
    .info-card
    .attendance-info-grid strong {
        display: block !important;
        margin: 3px 0 0 !important;

        color: #344258 !important;
        font-size: .57rem !important;
        line-height: 1.26 !important;

        white-space: normal !important;
        word-break: normal !important;
        overflow-wrap: anywhere !important;
    }

    /* Daily summary cards can be even shorter */
    body[data-page="payroll-records"]
    .info-card
    .attendance-info-grid
    > div[style*="padding: 12px"] {
        min-height: 55px !important;
        padding: 6px 7px !important;
        border-radius: 8px !important;
    }

    body[data-page="payroll-records"]
    .info-card
    .attendance-info-grid
    > div[style*="padding: 12px"]
    > strong {
        margin-top: 2px !important;
        font-size: .70rem !important;
    }

    body[data-page="payroll-records"]
    .info-card
    .attendance-info-grid
    > div[style*="padding: 12px"]
    > small {
        margin-top: 2px !important;
        font-size: .45rem !important;
        line-height: 1.22 !important;
    }

    /* Reduce repeated separators */
    body[data-page="payroll-records"]
    .info-card hr {
        margin: 7px 0 !important;
        border: 0 !important;
        border-top:
            1px solid
            rgba(63, 79, 103, .09) !important;
    }

    /* Compact record cards */
    body[data-page="payroll-records"]
    .container.page-with-nav
    > .info-card:has(
        .section-title-row
        > div:nth-child(3)
    ) {
        margin-bottom: 8px !important;
        padding: 9px !important;
        border-radius: 11px !important;
    }

    /* Notes stay compact */
    body[data-page="payroll-records"]
    .info-card
    > p:last-child {
        margin: 7px 0 0 !important;
        padding: 6px 7px !important;
        border-radius: 7px;
        background: rgba(63, 79, 103, .035);
        font-size: .53rem !important;
        line-height: 1.35 !important;
    }
}

/* Very narrow phones */
@media (max-width: 350px) {
    body[data-page="payroll-records"]
    .info-card
    .attendance-info-grid {
        gap: 4px !important;
    }

    body[data-page="payroll-records"]
    .info-card
    .attendance-info-grid > div {
        min-height: 47px !important;
        padding: 5px 6px !important;
    }

    body[data-page="payroll-records"]
    .info-card
    .attendance-info-grid span {
        font-size: .44rem !important;
    }

    body[data-page="payroll-records"]
    .info-card
    .attendance-info-grid strong {
        font-size: .54rem !important;
    }
}

/* =========================================================
   Payroll Records — Keep Filter Card Full Width
   Other info-card elements: 2 per row on Desktop / iPad
   Scope: body[data-page="payroll-records"]
   Load after previous payroll-records CSS files
   ========================================================= */

@media (min-width: 701px) {
    body[data-page="payroll-records"]
    .container.page-with-nav {
        display: grid !important;
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;
        align-items: start;
        gap: 14px;
    }

    /* Hero remains full width */
    body[data-page="payroll-records"]
    .container.page-with-nav
    > .profile-premium-hero {
        grid-column: 1 / -1 !important;
        width: 100%;
    }

    /* Reminder remains full width */
    body[data-page="payroll-records"]
    .container.page-with-nav
    > .profile-premium-reminder {
        grid-column: 1 / -1 !important;
        width: 100%;
    }

    /*
       Keep only the filter info-card full width.
       This card contains:
       <form method="GET" action="/payroll-records">
    */
    body[data-page="payroll-records"]
    .container.page-with-nav
    > .info-card:has(
        form[action="/payroll-records"]
    ),
    body[data-page="payroll-records"]
    .container.page-with-nav
    > .info-card:has(
        form[action$="/payroll-records"]
    ) {
        grid-column: 1 / -1 !important;
        width: 100% !important;
        height: auto !important;
        margin: 0 !important;
    }

    /* Every other direct info-card becomes 2 per row */
    body[data-page="payroll-records"]
    .container.page-with-nav
    > .info-card:not(
        :has(form[action="/payroll-records"])
    ):not(
        :has(form[action$="/payroll-records"])
    ) {
        grid-column: auto !important;
        min-width: 0 !important;
        width: 100% !important;
        height: 100%;
        margin: 0 !important;
    }

    /* Keep two-column record cards visually aligned */
    body[data-page="payroll-records"]
    .container.page-with-nav
    > .info-card:not(
        :has(form[action="/payroll-records"])
    ):not(
        :has(form[action$="/payroll-records"])
    ) {
        align-self: stretch;
    }

    /* Prevent long content from widening one grid column */
    body[data-page="payroll-records"]
    .container.page-with-nav
    > .info-card {
        min-width: 0;
        overflow: hidden;
    }

    body[data-page="payroll-records"]
    .container.page-with-nav
    > .info-card
    .section-title-row,
    body[data-page="payroll-records"]
    .container.page-with-nav
    > .info-card
    .attendance-info-grid {
        min-width: 0;
    }
}

/* iPad spacing */
@media (min-width: 701px) and (max-width: 1100px) {
    body[data-page="payroll-records"]
    .container.page-with-nav {
        width: calc(100% - 24px);
        gap: 10px;
    }

    body[data-page="payroll-records"]
    .container.page-with-nav
    > .info-card:not(
        :has(form[action="/payroll-records"])
    ):not(
        :has(form[action$="/payroll-records"])
    ) {
        padding: 12px;
        border-radius: 12px;
    }
}

/* Mobile remains one card per row */
@media (max-width: 700px) {
    body[data-page="payroll-records"]
    .container.page-with-nav {
        display: block !important;
    }

    body[data-page="payroll-records"]
    .container.page-with-nav
    > .info-card {
        width: 100% !important;
        height: auto !important;
        margin-bottom: 9px !important;
    }
}

/* =========================================================
   Status Application — Mobile Summary Always Two Columns
   Scope: body[data-page="status-application"]
   Load after global.css / existing status page CSS
   ========================================================= */

@media (max-width: 700px) {
    body[data-page="status-application"]
    .status-summary-panel {
        display: grid !important;
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;
        align-items: stretch;
        gap: 7px !important;
        width: 100%;
    }

    body[data-page="status-application"]
    .status-summary-panel
    > .status-user-card,
    body[data-page="status-application"]
    .status-summary-panel
    > .status-current-card {
        min-width: 0 !important;
        width: 100% !important;
        min-height: 72px;
        margin: 0 !important;
        padding: 10px !important;
        border-radius: 11px !important;
    }

    body[data-page="status-application"]
    .status-summary-panel
    .summary-label {
        display: block;
        margin: 0;
        font-size: .54rem !important;
        line-height: 1.25 !important;
    }

    body[data-page="status-application"]
    .status-summary-panel
    strong {
        display: block;
        margin-top: 5px;
        font-size: .72rem !important;
        line-height: 1.3 !important;
        white-space: normal;
        overflow-wrap: anywhere;
    }
}

/* Extremely narrow phones still remain two columns */
@media (max-width: 360px) {
    body[data-page="status-application"]
    .status-summary-panel {
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;
        gap: 5px !important;
    }

    body[data-page="status-application"]
    .status-summary-panel
    > .status-user-card,
    body[data-page="status-application"]
    .status-summary-panel
    > .status-current-card {
        min-height: 65px;
        padding: 8px !important;
        border-radius: 9px !important;
    }

    body[data-page="status-application"]
    .status-summary-panel
    .summary-label {
        font-size: .49rem !important;
    }

    body[data-page="status-application"]
    .status-summary-panel
    strong {
        margin-top: 4px;
        font-size: .65rem !important;
    }
}

/* =========================================================
   PRMS Dashboard — New Features UI Upgrade
   Scope: body[data-page="dashboard"]
   Covers:
   - Employee online overview
   - System maintenance
   - Dashboard status cards
   - Responsive desktop / iPad / mobile layout
   Load after global.css.
   ========================================================= */

body[data-page="dashboard"] {
    --db-bg: #f3f5f8;
    --db-surface: #ffffff;
    --db-soft: #f7f9fc;
    --db-text: #263449;
    --db-muted: #748195;
    --db-line: #dce3eb;

    --db-primary: #3d4d65;
    --db-primary-dark: #233044;
    --db-primary-rgb: 61, 77, 101;

    --db-accent: #ad7747;
    --db-accent-dark: #75502f;
    --db-accent-rgb: 173, 119, 71;

    --db-success: #46735d;
    --db-success-rgb: 70, 115, 93;

    --db-warning: #a66b32;
    --db-warning-rgb: 166, 107, 50;

    --db-danger: #a24e59;
    --db-danger-dark: #73333c;
    --db-danger-rgb: 162, 78, 89;
}

/* =========================================================
   Employee online overview — new clickable card
   ========================================================= */

body[data-page="dashboard"]
.dashboard-section-grid:first-of-type {
    display: grid;
    grid-template-columns: 1fr;
    gap: 13px;
    margin: 14px 0;
}

body[data-page="dashboard"]
.dashboard-section-grid:first-of-type
> a.dashboard-status-card {
    position: relative;
    isolation: isolate;
    display: block;
    min-width: 0;
    padding: 18px;
    overflow: hidden;
    border: 1px solid rgba(var(--db-primary-rgb), .15);
    border-radius: 16px;
    color: inherit;
    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(var(--db-primary-rgb), .10),
            transparent 230px
        ),
        linear-gradient(145deg, #fff, #f7f9fc);
    box-shadow:
        0 12px 28px rgba(35, 48, 68, .075),
        inset 0 1px 0 rgba(255,255,255,.95);
    text-decoration: none;
    transition:
        border-color .18s ease,
        box-shadow .18s ease,
        transform .18s ease;
}

body[data-page="dashboard"]
.dashboard-section-grid:first-of-type
> a.dashboard-status-card::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0 auto 0 0;
    width: 5px;
    background:
        linear-gradient(
            180deg,
            var(--db-primary),
            var(--db-accent)
        );
}

body[data-page="dashboard"]
.dashboard-section-grid:first-of-type
> a.dashboard-status-card::after {
    content: "›";
    position: absolute;
    right: 18px;
    top: 17px;
    display: grid;
    width: 29px;
    height: 29px;
    place-items: center;
    border: 1px solid rgba(var(--db-primary-rgb), .14);
    border-radius: 9px;
    color: var(--db-primary);
    background: rgba(255,255,255,.78);
    box-shadow: 0 5px 12px rgba(35,48,68,.07);
    font-size: 1.1rem;
    font-weight: 900;
}

body[data-page="dashboard"]
.dashboard-section-grid:first-of-type
> a.dashboard-status-card:hover {
    border-color: rgba(var(--db-primary-rgb), .30);
    box-shadow:
        0 16px 36px rgba(35, 48, 68, .12),
        inset 0 1px 0 #fff;
    transform: translateY(-2px);
}

body[data-page="dashboard"]
.dashboard-section-grid:first-of-type
.section-title-row {
    margin-bottom: 12px;
    padding-right: 38px;
}

body[data-page="dashboard"]
.dashboard-section-grid:first-of-type
.section-title-row h3 {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0;
    color: var(--db-primary-dark);
    font-size: .96rem;
}

body[data-page="dashboard"]
.dashboard-section-grid:first-of-type
.section-title-row h3::before {
    content: "";
    flex: 0 0 5px;
    width: 5px;
    height: 20px;
    border-radius: 999px;
    background:
        linear-gradient(
            180deg,
            var(--db-primary),
            var(--db-accent)
        );
}

/* Five online-status values */
body[data-page="dashboard"]
.dashboard-section-grid:first-of-type
.dashboard-mini-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
}

body[data-page="dashboard"]
.dashboard-section-grid:first-of-type
.dashboard-mini-grid > div {
    position: relative;
    min-width: 0;
    min-height: 84px;
    padding: 11px;
    overflow: hidden;
    border: 1px solid rgba(var(--db-primary-rgb), .09);
    border-radius: 11px;
    background: rgba(255,255,255,.76);
}

body[data-page="dashboard"]
.dashboard-section-grid:first-of-type
.dashboard-mini-grid > div::after {
    content: "";
    position: absolute;
    right: -23px;
    bottom: -31px;
    width: 68px;
    height: 68px;
    border: 13px solid rgba(var(--db-primary-rgb), .035);
    border-radius: 50%;
}

body[data-page="dashboard"]
.dashboard-section-grid:first-of-type
.dashboard-mini-grid span {
    position: relative;
    z-index: 1;
    display: block;
    color: var(--db-muted);
    font-size: .61rem;
    font-weight: 800;
    line-height: 1.35;
}

body[data-page="dashboard"]
.dashboard-section-grid:first-of-type
.dashboard-mini-grid strong {
    position: relative;
    z-index: 1;
    display: block;
    margin-top: 8px;
    color: var(--db-primary-dark);
    font-size: 1.25rem;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

/* Individual online-status meaning */
body[data-page="dashboard"]
#dashboard-active-registered-staff,
body[data-page="dashboard"]
#dashboard-online-staff-today {
    color: var(--db-success);
}

body[data-page="dashboard"]
#dashboard-offline-staff-today {
    color: var(--db-warning);
}

body[data-page="dashboard"]
#dashboard-disabled-registered-staff {
    color: var(--db-danger);
}

/* =========================================================
   Main overview cards
   ========================================================= */

body[data-page="dashboard"]
.dashboard-overview-grid-four {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

body[data-page="dashboard"]
.dashboard-main-stat {
    position: relative;
    isolation: isolate;
    min-width: 0;
    min-height: 126px;
    padding: 15px;
    overflow: hidden;
    border: 1px solid rgba(var(--db-primary-rgb), .11);
    border-radius: 14px;
    background:
        radial-gradient(
            circle at 100% 100%,
            rgba(var(--db-primary-rgb), .08),
            transparent 130px
        ),
        linear-gradient(145deg, #fff, #f8fafc);
    box-shadow: 0 8px 20px rgba(35,48,68,.055);
}

body[data-page="dashboard"]
.dashboard-main-stat::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 3px;
    background:
        linear-gradient(
            90deg,
            var(--db-primary),
            rgba(var(--db-primary-rgb), .30)
        );
}

body[data-page="dashboard"]
.dashboard-main-stat.active-stat {
    border-color: rgba(var(--db-success-rgb), .20);
    background:
        radial-gradient(
            circle at 100% 100%,
            rgba(var(--db-success-rgb), .12),
            transparent 130px
        ),
        linear-gradient(145deg, #fff, #f5faf7);
}

body[data-page="dashboard"]
.dashboard-main-stat.active-stat::before {
    background:
        linear-gradient(
            90deg,
            var(--db-success),
            rgba(var(--db-success-rgb), .32)
        );
}

body[data-page="dashboard"]
.dashboard-main-stat.warning-stat {
    border-color: rgba(var(--db-warning-rgb), .22);
    background:
        radial-gradient(
            circle at 100% 100%,
            rgba(var(--db-warning-rgb), .13),
            transparent 130px
        ),
        linear-gradient(145deg, #fff, #fffaf4);
}

body[data-page="dashboard"]
.dashboard-main-stat.warning-stat::before {
    background:
        linear-gradient(
            90deg,
            var(--db-warning),
            rgba(var(--db-warning-rgb), .33)
        );
}

body[data-page="dashboard"]
.dashboard-main-stat h2 {
    margin: 10px 0 6px;
    color: var(--db-primary-dark);
    font-size: 1.65rem;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

body[data-page="dashboard"]
.dashboard-main-stat p {
    margin: 0;
    color: var(--db-muted);
    font-size: .65rem;
    line-height: 1.45;
}

/* =========================================================
   Reminder cards
   ========================================================= */

body[data-page="dashboard"]
.dashboard-reminder-card {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    margin-top: 13px;
    padding: 15px 16px;
    overflow: hidden;
    border: 1px solid rgba(var(--db-warning-rgb), .20);
    border-radius: 14px;
    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(var(--db-warning-rgb), .10),
            transparent 180px
        ),
        linear-gradient(145deg, #fffdf9, #fff);
    box-shadow: 0 8px 22px rgba(83,61,35,.055);
}

body[data-page="dashboard"]
.dashboard-reminder-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background:
        linear-gradient(
            180deg,
            var(--db-warning),
            var(--db-accent)
        );
}

body[data-page="dashboard"]
.dashboard-reminder-card h3 {
    margin: 0;
    color: #674827;
    font-size: .85rem;
}

body[data-page="dashboard"]
.dashboard-reminder-card p {
    margin: 4px 0 0;
    color: #89735d;
    font-size: .64rem;
    line-height: 1.45;
}

body[data-page="dashboard"]
.dashboard-reminder-card form {
    margin: 0;
}

body[data-page="dashboard"]
.dashboard-reminder-card button {
    display: inline-flex;
    min-height: 38px;
    align-items: center;
    justify-content: center;
    padding: 7px 12px;
    border: 1px solid var(--db-warning);
    border-radius: 9px;
    color: #fff;
    background:
        linear-gradient(
            145deg,
            var(--db-warning),
            #76502c
        );
    font: inherit;
    font-size: .61rem;
    font-weight: 900;
    cursor: pointer;
}

/* =========================================================
   New system maintenance card
   ========================================================= */

body[data-page="dashboard"]
.system-maintenance-card {
    border-color: rgba(var(--db-danger-rgb), .21);
    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(var(--db-danger-rgb), .10),
            transparent 190px
        ),
        linear-gradient(145deg, #fff, #fff8f8);
    box-shadow: 0 9px 24px rgba(115,51,60,.06);
}

body[data-page="dashboard"]
.system-maintenance-card::before {
    background:
        linear-gradient(
            180deg,
            var(--db-danger),
            var(--db-danger-dark)
        );
}

body[data-page="dashboard"]
.system-maintenance-card h3 {
    color: var(--db-danger-dark);
}

body[data-page="dashboard"]
.system-maintenance-card p {
    color: #87666b;
}

body[data-page="dashboard"]
.maintenance-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 7px;
}

body[data-page="dashboard"]
.maintenance-actions form {
    margin: 0;
}

body[data-page="dashboard"]
.maintenance-actions .btn {
    min-height: 38px;
    padding: 7px 11px;
    border-radius: 9px;
    font-size: .58rem;
    font-weight: 900;
    white-space: normal;
}

body[data-page="dashboard"]
.maintenance-actions .btn.secondary {
    color: #fff;
    border-color: var(--db-primary);
    background:
        linear-gradient(
            145deg,
            var(--db-primary),
            var(--db-primary-dark)
        );
}

body[data-page="dashboard"]
.maintenance-actions .btn.danger {
    color: #fff;
    border-color: var(--db-danger-dark);
    background:
        linear-gradient(
            145deg,
            var(--db-danger),
            var(--db-danger-dark)
        );
}

/* =========================================================
   Lower status section cards
   ========================================================= */

body[data-page="dashboard"]
.container.page-with-nav
> .dashboard-section-grid:last-of-type {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: stretch;
    gap: 10px;
    margin-top: 13px;
}

body[data-page="dashboard"]
.container.page-with-nav
> .dashboard-section-grid:last-of-type
> .dashboard-status-card {
    min-width: 0;
    padding: 14px;
    border: 1px solid rgba(var(--db-primary-rgb), .10);
    border-radius: 13px;
    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(var(--db-primary-rgb), .055),
            transparent 130px
        ),
        linear-gradient(145deg, #fff, #f9fafc);
    box-shadow: 0 7px 18px rgba(35,48,68,.045);
}

body[data-page="dashboard"]
.container.page-with-nav
> .dashboard-section-grid:last-of-type
.section-title-row {
    margin-bottom: 9px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(var(--db-primary-rgb), .08);
}

body[data-page="dashboard"]
.container.page-with-nav
> .dashboard-section-grid:last-of-type
.section-title-row h3 {
    margin: 0;
    color: var(--db-primary-dark);
    font-size: .76rem;
}

body[data-page="dashboard"]
.container.page-with-nav
> .dashboard-section-grid:last-of-type
.dashboard-mini-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
}

body[data-page="dashboard"]
.container.page-with-nav
> .dashboard-section-grid:last-of-type
.dashboard-mini-grid > div {
    min-width: 0;
    padding: 8px;
    border-radius: 9px;
    background: rgba(var(--db-primary-rgb), .045);
}

body[data-page="dashboard"]
.container.page-with-nav
> .dashboard-section-grid:last-of-type
.dashboard-mini-grid span {
    display: block;
    color: var(--db-muted);
    font-size: .52rem;
    line-height: 1.3;
}

body[data-page="dashboard"]
.container.page-with-nav
> .dashboard-section-grid:last-of-type
.dashboard-mini-grid strong {
    display: block;
    margin-top: 5px;
    color: var(--db-primary-dark);
    font-size: .88rem;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

/* =========================================================
   Tablet
   ========================================================= */

@media (max-width: 1050px) {
    body[data-page="dashboard"]
    .dashboard-overview-grid-four {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body[data-page="dashboard"]
    .dashboard-section-grid:first-of-type
    .dashboard-mini-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    body[data-page="dashboard"]
    .container.page-with-nav
    > .dashboard-section-grid:last-of-type {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body[data-page="dashboard"]
    .system-maintenance-card {
        align-items: start;
    }

    body[data-page="dashboard"]
    .maintenance-actions {
        max-width: 360px;
    }
}

/* =========================================================
   Mobile
   ========================================================= */

@media (max-width: 700px) {
    body[data-page="dashboard"]
    .dashboard-section-grid:first-of-type {
        margin: 9px 0;
    }

    body[data-page="dashboard"]
    .dashboard-section-grid:first-of-type
    > a.dashboard-status-card {
        padding: 11px;
        border-radius: 12px;
    }

    body[data-page="dashboard"]
    .dashboard-section-grid:first-of-type
    > a.dashboard-status-card::after {
        right: 11px;
        top: 10px;
        width: 25px;
        height: 25px;
        border-radius: 7px;
    }

    body[data-page="dashboard"]
    .dashboard-section-grid:first-of-type
    .section-title-row {
        margin-bottom: 8px;
        padding-right: 32px;
    }

    /* Keep employee status compact: 3 + 2 */
    body[data-page="dashboard"]
    .dashboard-section-grid:first-of-type
    .dashboard-mini-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 5px;
    }

    body[data-page="dashboard"]
    .dashboard-section-grid:first-of-type
    .dashboard-mini-grid > div {
        min-height: 64px;
        padding: 7px;
        border-radius: 8px;
    }

    body[data-page="dashboard"]
    .dashboard-section-grid:first-of-type
    .dashboard-mini-grid > div:nth-child(4),
    body[data-page="dashboard"]
    .dashboard-section-grid:first-of-type
    .dashboard-mini-grid > div:nth-child(5) {
        grid-column: span 1;
    }

    body[data-page="dashboard"]
    .dashboard-section-grid:first-of-type
    .dashboard-mini-grid span {
        font-size: .48rem;
        line-height: 1.25;
    }

    body[data-page="dashboard"]
    .dashboard-section-grid:first-of-type
    .dashboard-mini-grid strong {
        margin-top: 6px;
        font-size: .92rem;
    }

    body[data-page="dashboard"]
    .dashboard-overview-grid-four {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
    }

    body[data-page="dashboard"]
    .dashboard-main-stat {
        min-height: 104px;
        padding: 10px;
        border-radius: 10px;
    }

    body[data-page="dashboard"]
    .dashboard-main-stat h2 {
        margin: 8px 0 5px;
        font-size: 1.24rem;
    }

    body[data-page="dashboard"]
    .dashboard-main-stat p {
        font-size: .54rem;
        line-height: 1.35;
    }

    body[data-page="dashboard"]
    .dashboard-reminder-card {
        grid-template-columns: 1fr;
        gap: 9px;
        margin-top: 9px;
        padding: 11px;
        border-radius: 11px;
    }

    body[data-page="dashboard"]
    .dashboard-reminder-card button {
        width: 100%;
        min-height: 35px;
    }

    body[data-page="dashboard"]
    .maintenance-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
        max-width: none;
        gap: 6px;
    }

    body[data-page="dashboard"]
    .maintenance-actions form,
    body[data-page="dashboard"]
    .maintenance-actions .btn {
        width: 100%;
    }

    body[data-page="dashboard"]
    .maintenance-actions .btn {
        min-height: 37px;
        padding: 6px 7px;
        font-size: .52rem;
    }

    body[data-page="dashboard"]
    .container.page-with-nav
    > .dashboard-section-grid:last-of-type {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
        margin-top: 9px;
    }

    body[data-page="dashboard"]
    .container.page-with-nav
    > .dashboard-section-grid:last-of-type
    > .dashboard-status-card {
        padding: 9px;
        border-radius: 10px;
    }

    body[data-page="dashboard"]
    .container.page-with-nav
    > .dashboard-section-grid:last-of-type
    .section-title-row {
        margin-bottom: 7px;
        padding-bottom: 6px;
    }

    body[data-page="dashboard"]
    .container.page-with-nav
    > .dashboard-section-grid:last-of-type
    .section-title-row h3 {
        font-size: .63rem;
    }

    body[data-page="dashboard"]
    .container.page-with-nav
    > .dashboard-section-grid:last-of-type
    .dashboard-mini-grid {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    body[data-page="dashboard"]
    .container.page-with-nav
    > .dashboard-section-grid:last-of-type
    .dashboard-mini-grid > div {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 5px;
        padding: 6px;
        border-radius: 7px;
    }

    body[data-page="dashboard"]
    .container.page-with-nav
    > .dashboard-section-grid:last-of-type
    .dashboard-mini-grid strong {
        margin: 0;
        font-size: .72rem;
    }
}

/* Very narrow phones remain usable */
@media (max-width: 350px) {
    body[data-page="dashboard"]
    .dashboard-section-grid:first-of-type
    .dashboard-mini-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body[data-page="dashboard"]
    .dashboard-overview-grid-four,
    body[data-page="dashboard"]
    .container.page-with-nav
    > .dashboard-section-grid:last-of-type {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body[data-page="dashboard"]
    .maintenance-actions {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   Dashboard Section Full-Width + Link Underline Fix
   Scope: body[data-page="dashboard"]
   Load after dashboard-new-features-ui-upgrade.css
   ========================================================= */

/* Desktop and iPad: every dashboard-section-grid spans full row */
@media (min-width: 701px) {
    body[data-page="dashboard"]
    .container.page-with-nav
    > .dashboard-section-grid {
        grid-column: 1 / -1 !important;
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    body[data-page="dashboard"]
    .dashboard-section-grid:first-of-type {
        display: grid !important;
        grid-template-columns: 1fr !important;
    }

    body[data-page="dashboard"]
    .dashboard-section-grid:first-of-type
    > .dashboard-status-card {
        width: 100% !important;
        max-width: none !important;
    }
}

/* Remove underline from clickable dashboard cards */
body[data-page="dashboard"]
.dashboard-section-grid
a.dashboard-status-card,
body[data-page="dashboard"]
.dashboard-section-grid
a.dashboard-status-card:link,
body[data-page="dashboard"]
.dashboard-section-grid
a.dashboard-status-card:visited,
body[data-page="dashboard"]
.dashboard-section-grid
a.dashboard-status-card:hover,
body[data-page="dashboard"]
.dashboard-section-grid
a.dashboard-status-card:active,
body[data-page="dashboard"]
.dashboard-section-grid
a.dashboard-status-card:focus,
body[data-page="dashboard"]
.dashboard-section-grid
a.dashboard-status-card:focus-visible {
    color: inherit !important;
    text-decoration: none !important;
    text-decoration-line: none !important;
    text-underline-offset: 0 !important;
}

/* Prevent inherited underline on child text */
body[data-page="dashboard"]
.dashboard-section-grid
a.dashboard-status-card *,
body[data-page="dashboard"]
.dashboard-section-grid
a.dashboard-status-card:hover * {
    text-decoration: none !important;
}

/* =========================================================
   Dashboard Employee Online Section — True Full Width Fix
   Scope: body[data-page="dashboard"]
   Load after all dashboard CSS files
   ========================================================= */

/*
   Do not use :first-of-type here.
   The dashboard grid is not the first DIV inside the container.
   Identify this section by its direct clickable status card.
*/
body[data-page="dashboard"]
.container.page-with-nav
> .dashboard-section-grid:has(
    > a.dashboard-status-card
) {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;

    grid-column: 1 / -1 !important;

    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;

    margin-left: 0 !important;
    margin-right: 0 !important;
    justify-self: stretch !important;
    align-self: stretch !important;
}

/* The clickable employee online card fills the section */
body[data-page="dashboard"]
.container.page-with-nav
> .dashboard-section-grid:has(
    > a.dashboard-status-card
)
> a.dashboard-status-card {
    display: block !important;

    grid-column: 1 / -1 !important;

    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;

    margin: 0 !important;
    justify-self: stretch !important;

    text-decoration: none !important;
}

/* Prevent an old fixed/fitted width from children */
body[data-page="dashboard"]
.container.page-with-nav
> .dashboard-section-grid:has(
    > a.dashboard-status-card
)
.dashboard-mini-grid {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
}

/* Desktop / iPad explicitly remain full width */
@media (min-width: 701px) {
    body[data-page="dashboard"]
    .container.page-with-nav
    > .dashboard-section-grid:has(
        > a.dashboard-status-card
    ) {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

/* =========================================================
   Direct Outing Records — Two-Column Records + Hero Language Switch
   Scope: body[data-page="direct-outing-records"]
   Load after the existing global / page CSS.
   ========================================================= */

/* The language switch is before the hero in HTML.
   Position it visually inside the hero without changing markup. */
body[data-page="direct-outing-records"]
.container.page-with-nav {
    position: relative;
}

body[data-page="direct-outing-records"]
.login-language-switch {
    position: absolute !important;
    z-index: 25;
    top: 31px !important;
    right: 24px !important;

    display: flex !important;
    align-items: center;
    gap: 3px !important;

    margin: 0 !important;
    padding: 3px !important;

    border: 1px solid rgba(255, 255, 255, .18) !important;
    border-radius: 999px !important;
    background: rgba(15, 23, 42, .24) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .08),
        0 7px 18px rgba(15, 23, 42, .13) !important;
    backdrop-filter: blur(12px);
}

body[data-page="direct-outing-records"]
.login-language-switch form {
    margin: 0 !important;
}

body[data-page="direct-outing-records"]
.login-language-switch button {
    min-width: 41px !important;
    min-height: 27px !important;
    padding: 3px 8px !important;

    border: 0 !important;
    border-radius: 999px !important;

    color: rgba(255, 255, 255, .72) !important;
    background: transparent !important;
    box-shadow: none !important;

    font-size: .68rem !important;
    line-height: 1 !important;
}

body[data-page="direct-outing-records"]
.login-language-switch button:hover {
    color: #fff !important;
    background: rgba(255, 255, 255, .11) !important;
}

body[data-page="direct-outing-records"]
.login-language-switch button.active {
    color: #172033 !important;
    background:
        linear-gradient(180deg, #fff, #e9eef5) !important;
    box-shadow:
        0 3px 9px rgba(15, 23, 42, .18),
        inset 0 1px 0 #fff !important;
}

/* Reserve space at the top-right of the hero so the switch
   does not cover the admin side card. */
body[data-page="direct-outing-records"]
.workspace-premium-hero {
    position: relative;
    padding-top: 30px !important;
}

/* =========================================================
   Desktop and iPad: two outing records per row
   ========================================================= */

@media (min-width: 701px) {
    body[data-page="direct-outing-records"]
    .workspace-record-list {
        display: grid !important;
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;
        align-items: stretch !important;
        gap: 11px !important;
    }

    body[data-page="direct-outing-records"]
    .workspace-record-list
    > .workspace-premium-attendance-item {
        min-width: 0 !important;
        width: 100% !important;
        height: 100% !important;
        margin: 0 !important;
    }

    /* Half-width record cards need a compact inner grid. */
    body[data-page="direct-outing-records"]
    .workspace-record-list
    .attendance-info-grid {
        display: grid !important;
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;
        gap: 6px !important;
    }

    body[data-page="direct-outing-records"]
    .workspace-record-list
    .attendance-info-grid > div {
        min-width: 0 !important;
    }

    /* Force-end form stays at the bottom when cards differ in content. */
    body[data-page="direct-outing-records"]
    .workspace-record-list
    > .workspace-premium-attendance-item {
        display: flex !important;
        flex-direction: column !important;
    }

    body[data-page="direct-outing-records"]
    .workspace-record-list
    > .workspace-premium-attendance-item
    > form.form-box {
        margin-top: auto !important;
    }
}

/* iPad tightening */
@media (min-width: 701px) and (max-width: 1050px) {
    body[data-page="direct-outing-records"]
    .workspace-record-list {
        gap: 8px !important;
    }

    body[data-page="direct-outing-records"]
    .workspace-record-list
    > .workspace-premium-attendance-item {
        border-radius: 12px !important;
    }

    body[data-page="direct-outing-records"]
    .workspace-record-list
    .attendance-info-grid {
        gap: 5px !important;
    }

    body[data-page="direct-outing-records"]
    .login-language-switch {
        top: 25px !important;
        right: 18px !important;
    }
}

/* =========================================================
   Mobile: keep one record per row
   ========================================================= */

@media (max-width: 700px) {
    body[data-page="direct-outing-records"]
    .workspace-record-list {
        display: grid !important;
        grid-template-columns: 1fr !important;
    }

    body[data-page="direct-outing-records"]
    .login-language-switch {
        top: 18px !important;
        right: 12px !important;
    }

    body[data-page="direct-outing-records"]
    .workspace-premium-hero {
        padding-top: 31px !important;
    }

    body[data-page="direct-outing-records"]
    .login-language-switch button {
        min-width: 37px !important;
        min-height: 25px !important;
        padding-inline: 7px !important;
        font-size: .63rem !important;
    }
}

/* =========================================================
   Direct Outing Records — Export Button Visual Match
   Scope: body[data-page="direct-outing-records"]
   Load after existing direct-outing records CSS.
   ========================================================= */

body[data-page="direct-outing-records"]
a[href^="/admin/direct-outing-records/export"] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    min-width: 0 !important;
    min-height: 38px !important;
    padding: 7px 12px !important;

    border: 1px solid #334155 !important;
    border-radius: 9px !important;

    color: #fff !important;
    background:
        linear-gradient(
            145deg,
            #475569,
            #273549
        ) !important;
    box-shadow:
        0 7px 16px rgba(15, 23, 42, .14),
        inset 0 1px 0 rgba(255,255,255,.14) !important;

    font: inherit !important;
    font-size: .72rem !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    text-align: center !important;
    text-decoration: none !important;
    white-space: normal !important;

    cursor: pointer !important;
    transition:
        transform .18s ease,
        box-shadow .18s ease,
        border-color .18s ease,
        background .18s ease !important;
}

body[data-page="direct-outing-records"]
a[href^="/admin/direct-outing-records/export"]:hover {
    color: #fff !important;
    border-color: #1e293b !important;
    background:
        linear-gradient(
            145deg,
            #1e293b,
            #475569
        ) !important;
    box-shadow:
        0 9px 20px rgba(15, 23, 42, .20),
        inset 0 1px 0 rgba(255,255,255,.15) !important;
    transform: translateY(-1px);
}

body[data-page="direct-outing-records"]
a[href^="/admin/direct-outing-records/export"]:active {
    transform: translateY(0) scale(.985);
}

body[data-page="direct-outing-records"]
a[href^="/admin/direct-outing-records/export"]:focus-visible {
    outline: 3px solid rgba(59, 130, 246, .24);
    outline-offset: 2px;
}

/* Keep all three filter actions visually aligned */
body[data-page="direct-outing-records"]
.workspace-premium-link-row {
    align-items: stretch !important;
}

body[data-page="direct-outing-records"]
.workspace-premium-link-row
> button,
body[data-page="direct-outing-records"]
.workspace-premium-link-row
> a {
    min-height: 38px !important;
}

/* Mobile keeps full-width compact actions */
@media (max-width: 700px) {
    body[data-page="direct-outing-records"]
    a[href^="/admin/direct-outing-records/export"] {
        min-height: 35px !important;
        padding: 6px 9px !important;
        font-size: .66rem !important;
    }
}

/* =========================================================
   Applications — Responsive Application Card Grid
   Scope: body[data-page="applications"]
   Desktop / iPad: 3 cards per row
   Mobile: 2 cards per row, including very narrow phones
   Load after global.css / existing applications CSS.
   ========================================================= */

body[data-page="applications"]
.applications-list-grid {
    display: grid !important;
    grid-template-columns:
        repeat(3, minmax(0, 1fr)) !important;
    align-items: stretch !important;
    gap: 11px !important;
}

body[data-page="applications"]
.applications-list-grid
> .application-card {
    min-width: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
}

/* Keep each card internally balanced */
body[data-page="applications"]
.application-card {
    display: flex !important;
    flex-direction: column !important;
}

body[data-page="applications"]
.application-card
.application-action-row,
body[data-page="applications"]
.application-card
.application-permission-note {
    margin-top: auto !important;
}

/* Three-column cards need a compact internal information grid */
body[data-page="applications"]
.application-card
.attendance-info-grid {
    display: grid !important;
    grid-template-columns:
        repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
}

body[data-page="applications"]
.application-card
.attendance-info-grid > div {
    min-width: 0 !important;
}

/* =========================================================
   iPad
   ========================================================= */

@media (min-width: 701px) and (max-width: 1100px) {
    body[data-page="applications"]
    .applications-list-grid {
        grid-template-columns:
            repeat(3, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }

    body[data-page="applications"]
    .application-card {
        padding: 10px !important;
        border-radius: 11px !important;
    }

    body[data-page="applications"]
    .application-card-top {
        gap: 6px !important;
    }

    body[data-page="applications"]
    .application-card-top h3 {
        font-size: .72rem !important;
    }

    body[data-page="applications"]
    .application-card-top p {
        font-size: .52rem !important;
    }

    body[data-page="applications"]
    .application-status-pill {
        padding: 3px 6px !important;
        font-size: .48rem !important;
    }

    body[data-page="applications"]
    .application-card
    .attendance-info-grid {
        gap: 5px !important;
    }

    body[data-page="applications"]
    .application-card
    .attendance-info-grid > div {
        padding: 7px !important;
    }

    body[data-page="applications"]
    .application-card
    .attendance-info-grid span {
        font-size: .46rem !important;
    }

    body[data-page="applications"]
    .application-card
    .attendance-info-grid strong {
        font-size: .55rem !important;
    }
}

/* =========================================================
   Mobile — always 2 cards per row
   ========================================================= */

@media (max-width: 700px) {
    body[data-page="applications"]
    .applications-list-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;
        gap: 6px !important;
    }

    body[data-page="applications"]
    .application-card {
        min-width: 0 !important;
        padding: 8px !important;
        border-radius: 9px !important;
    }

    body[data-page="applications"]
    .application-card-top {
        display: grid !important;
        grid-template-columns:
            minmax(0, 1fr) auto !important;
        align-items: start !important;
        gap: 5px !important;
        margin-bottom: 6px !important;
    }

    body[data-page="applications"]
    .application-card-top > div {
        min-width: 0 !important;
    }

    body[data-page="applications"]
    .application-card-top h3 {
        margin: 0 !important;
        font-size: .61rem !important;
        line-height: 1.25 !important;
        overflow-wrap: anywhere !important;
    }

    body[data-page="applications"]
    .application-card-top p {
        margin: 3px 0 0 !important;
        font-size: .45rem !important;
        line-height: 1.3 !important;
        overflow-wrap: anywhere !important;
    }

    body[data-page="applications"]
    .application-status-pill {
        min-height: 20px !important;
        padding: 2px 5px !important;
        font-size: .42rem !important;
        line-height: 1.1 !important;
        white-space: nowrap !important;
    }

    body[data-page="applications"]
    .application-card
    .attendance-info-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;
        gap: 4px !important;
        margin-top: 5px !important;
    }

    body[data-page="applications"]
    .application-card
    .attendance-info-grid > div {
        min-width: 0 !important;
        min-height: 47px !important;
        padding: 5px 6px !important;
        border-radius: 7px !important;
    }

    body[data-page="applications"]
    .application-card
    .attendance-info-grid span {
        font-size: .41rem !important;
        line-height: 1.2 !important;
    }

    body[data-page="applications"]
    .application-card
    .attendance-info-grid strong {
        margin-top: 3px !important;
        font-size: .50rem !important;
        line-height: 1.25 !important;
        overflow-wrap: anywhere !important;
    }

    /* Approve / reject buttons remain side-by-side */
    body[data-page="applications"]
    .application-action-row {
        display: grid !important;
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;
        gap: 4px !important;
        margin-top: 6px !important;
    }

    body[data-page="applications"]
    .application-action-row form,
    body[data-page="applications"]
    .application-action-row button {
        width: 100% !important;
        min-width: 0 !important;
    }

    body[data-page="applications"]
    .application-action-row button {
        min-height: 31px !important;
        padding: 5px 4px !important;
        border-radius: 7px !important;
        font-size: .45rem !important;
        line-height: 1.2 !important;
        white-space: normal !important;
    }

    body[data-page="applications"]
    .application-permission-note {
        margin-top: 6px !important;
        padding: 6px !important;
        border-radius: 7px !important;
        font-size: .43rem !important;
        line-height: 1.3 !important;
    }
}

/* =========================================================
   Very narrow phones still remain 2 columns
   ========================================================= */

@media (max-width: 360px) {
    body[data-page="applications"]
    .applications-list-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;
        gap: 4px !important;
    }

    body[data-page="applications"]
    .application-card {
        padding: 6px !important;
        border-radius: 8px !important;
    }

    body[data-page="applications"]
    .application-card-top {
        gap: 3px !important;
    }

    body[data-page="applications"]
    .application-card-top h3 {
        font-size: .56rem !important;
    }

    body[data-page="applications"]
    .application-card-top p {
        font-size: .41rem !important;
    }

    body[data-page="applications"]
    .application-status-pill {
        padding: 2px 4px !important;
        font-size: .38rem !important;
    }

    body[data-page="applications"]
    .application-card
    .attendance-info-grid {
        gap: 3px !important;
    }

    body[data-page="applications"]
    .application-card
    .attendance-info-grid > div {
        min-height: 44px !important;
        padding: 4px 5px !important;
    }

    body[data-page="applications"]
    .application-card
    .attendance-info-grid span {
        font-size: .38rem !important;
    }

    body[data-page="applications"]
    .application-card
    .attendance-info-grid strong {
        font-size: .46rem !important;
    }

    body[data-page="applications"]
    .application-action-row button {
        min-height: 29px !important;
        padding: 4px 3px !important;
        font-size: .41rem !important;
    }
}



/* =========================================================
   Attendance Management — Mobile Top Alignment + Form Hint
   Scope: body[data-page="attendance-management"]
   Load after global.css / existing attendance CSS.
   ========================================================= */

@media (max-width: 700px) {
    body[data-page="attendance-management"] .attendance-management-top {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        grid-template-rows: auto auto !important;
        align-items: center !important;
        gap: 3px 7px !important;
        padding-bottom: 7px !important;
    }

    body[data-page="attendance-management"] .attendance-management-top > div {
        display: contents !important;
    }

    body[data-page="attendance-management"] .attendance-management-top h3 {
        grid-column: 1 !important;
        grid-row: 1 !important;
        align-self: center !important;
        min-width: 0 !important;
        margin: 0 !important;
        font-size: .85rem !important;
        line-height: 1.25 !important;
        overflow-wrap: anywhere !important;
    }

    body[data-page="attendance-management"] .attendance-management-top .attendance-status-pill {
        grid-column: 2 !important;
        grid-row: 1 !important;
        align-self: center !important;
        min-height: 21px !important;
        margin: 0 !important;
        padding: 3px 6px !important;
        border-radius: 999px !important;
        font-size: .65rem !important;
        line-height: 1 !important;
        white-space: nowrap !important;
    }

    body[data-page="attendance-management"] .attendance-management-top p {
        grid-column: 1 / -1 !important;
        grid-row: 2 !important;
        min-width: 0 !important;
        margin: 0 !important;
        color: #7b8798 !important;
        font-size: .60rem !important;
        line-height: 1.3 !important;
        overflow-wrap: anywhere !important;
    }

    body[data-page="attendance-management"] .attendance-filter-form .form-hint {
        display: block !important;
        margin-top: 4px !important;
        color: #7f8a9b !important;
        font-size: .48rem !important;
        font-weight: 500 !important;
        line-height: 1.3 !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
    }
}

@media (max-width: 360px) {
    body[data-page="attendance-management"] .attendance-management-top {
        gap: 2px 5px !important;
        padding-bottom: 6px !important;
    }

    body[data-page="attendance-management"] .attendance-management-top h3 {
        font-size: .85rem !important;
    }

    body[data-page="attendance-management"] .attendance-management-top .attendance-status-pill {
        min-height: 20px !important;
        padding: 3px 5px !important;
        font-size: .42rem !important;
    }

    body[data-page="attendance-management"] .attendance-management-top p {
        font-size: .45rem !important;
    }

    body[data-page="attendance-management"] .attendance-filter-form .form-hint {
        font-size: .44rem !important;
        line-height: 1.25 !important;
    }
}

/* =========================================================
   Attendance Management — Header Action Button Gap Fix
   Scope: body[data-page="attendance-management"]
   Load after existing attendance CSS.
   ========================================================= */

body[data-page="attendance-management"]
.attendance-management-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
}

body[data-page="attendance-management"]
.attendance-management-actions
> a,
body[data-page="attendance-management"]
.attendance-management-actions
> button,
body[data-page="attendance-management"]
.attendance-management-actions
> form {
    margin: 0 !important;
}

/* Mobile keeps the buttons separated while staying compact */
@media (max-width: 700px) {
    body[data-page="attendance-management"]
    .attendance-management-actions {
        gap: 7px !important;
    }
}

/* =========================================================
   Attendance Management — Desktop / iPad Three-Column List
   Scope: body[data-page="attendance-management"]
   Load after existing attendance management CSS.
   ========================================================= */

@media (min-width: 701px) {
    body[data-page="attendance-management"]
    .attendance-management-list {
        display: grid !important;
        grid-template-columns:
            repeat(3, minmax(0, 1fr)) !important;
        align-items: stretch !important;
        gap: 10px !important;
    }

    body[data-page="attendance-management"]
    .attendance-management-list
    > .attendance-management-card {
        display: flex !important;
        flex-direction: column !important;

        min-width: 0 !important;
        width: 100% !important;
        height: 100% !important;
        margin: 0 !important;
    }

    body[data-page="attendance-management"]
    .attendance-management-card
    .attendance-management-top {
        min-width: 0 !important;
    }

    body[data-page="attendance-management"]
    .attendance-management-card
    .attendance-management-top > div {
        min-width: 0 !important;
    }

    body[data-page="attendance-management"]
    .attendance-management-card
    .attendance-management-top h3,
    body[data-page="attendance-management"]
    .attendance-management-card
    .attendance-management-top p {
        overflow-wrap: anywhere !important;
    }

    body[data-page="attendance-management"]
    .attendance-management-card
    .attendance-room-highlight {
        display: grid !important;
        grid-template-columns:
            repeat(3, minmax(0, 1fr)) !important;
        gap: 5px !important;
    }

    body[data-page="attendance-management"]
    .attendance-management-card
    .attendance-room-highlight > div {
        min-width: 0 !important;
    }

    body[data-page="attendance-management"]
    .attendance-management-card
    .attendance-info-grid {
        display: grid !important;
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;
        gap: 5px !important;
    }

    body[data-page="attendance-management"]
    .attendance-management-card
    .attendance-info-grid > div {
        min-width: 0 !important;
    }

    body[data-page="attendance-management"]
    .attendance-management-card
    .attendance-info-grid strong,
    body[data-page="attendance-management"]
    .attendance-management-card
    .attendance-room-highlight strong {
        overflow-wrap: anywhere !important;
    }

    body[data-page="attendance-management"]
    .attendance-management-card
    .attendance-management-note:last-child {
        margin-bottom: 0 !important;
    }
}

/* iPad compact sizing while keeping three cards per row */
@media (min-width: 701px) and (max-width: 1100px) {
    body[data-page="attendance-management"]
    .attendance-management-list {
        grid-template-columns:
            repeat(3, minmax(0, 1fr)) !important;
        gap: 7px !important;
    }

    body[data-page="attendance-management"]
    .attendance-management-card {
        padding: 9px !important;
        border-radius: 11px !important;
    }

    body[data-page="attendance-management"]
    .attendance-management-card
    .attendance-management-top {
        gap: 5px !important;
        margin-bottom: 7px !important;
    }

    body[data-page="attendance-management"]
    .attendance-management-card
    .attendance-management-top h3 {
        font-size: .68rem !important;
    }

    body[data-page="attendance-management"]
    .attendance-management-card
    .attendance-management-top p {
        font-size: .48rem !important;
    }

    body[data-page="attendance-management"]
    .attendance-management-card
    .attendance-status-pill {
        padding: 3px 5px !important;
        font-size: .44rem !important;
    }

    body[data-page="attendance-management"]
    .attendance-management-card
    .attendance-room-highlight {
        gap: 4px !important;
    }

    body[data-page="attendance-management"]
    .attendance-management-card
    .attendance-room-highlight > div,
    body[data-page="attendance-management"]
    .attendance-management-card
    .attendance-info-grid > div {
        padding: 6px !important;
        border-radius: 7px !important;
    }

    body[data-page="attendance-management"]
    .attendance-management-card
    .attendance-room-highlight span,
    body[data-page="attendance-management"]
    .attendance-management-card
    .attendance-info-grid span {
        font-size: .42rem !important;
        line-height: 1.2 !important;
    }

    body[data-page="attendance-management"]
    .attendance-management-card
    .attendance-room-highlight strong,
    body[data-page="attendance-management"]
    .attendance-management-card
    .attendance-info-grid strong {
        font-size: .50rem !important;
        line-height: 1.25 !important;
    }

    body[data-page="attendance-management"]
    .attendance-management-card
    .attendance-management-note {
        padding: 7px !important;
        border-radius: 7px !important;
    }

    body[data-page="attendance-management"]
    .attendance-management-card
    .attendance-management-note span {
        font-size: .42rem !important;
    }

    body[data-page="attendance-management"]
    .attendance-management-card
    .attendance-management-note p {
        font-size: .48rem !important;
        line-height: 1.3 !important;
    }
}

/* Mobile retains one card per row */
@media (max-width: 700px) {
    body[data-page="attendance-management"]
    .attendance-management-list {
        display: grid !important;
        grid-template-columns: 1fr !important;
    }
}

/* =========================================================
   Excel 1 Export — Hero Right Alignment + Card Button Alignment
   Scope: body[data-page="excel1-export"]
   Load after global.css / existing Excel export CSS.
   ========================================================= */

/* =========================================================
   Desktop and iPad
   ========================================================= */

@media (min-width: 701px) {
    /* Hero structure:
       left content | right permission badge
                    | right action buttons
    */
    body[data-page="excel1-export"]
    .export-center-hero {
        display: grid !important;
        grid-template-columns:
            minmax(0, 1fr) auto !important;
        grid-template-rows:
            auto auto !important;
        align-items: start !important;
        column-gap: 18px !important;
        row-gap: 14px !important;
    }

    body[data-page="excel1-export"]
    .export-center-hero
    > div:first-child {
        grid-column: 1 !important;
        grid-row: 1 / 3 !important;
        min-width: 0 !important;
    }

    /* Download-enabled / read-only badge */
    body[data-page="excel1-export"]
    .export-center-hero
    > span.role-badge {
        grid-column: 2 !important;
        grid-row: 1 !important;

        justify-self: end !important;
        align-self: start !important;

        width: max-content !important;
        max-width: 100% !important;
        margin: 0 !important;
    }

    /* Hero action buttons at the far right */
    body[data-page="excel1-export"]
    .export-center-actions {
        grid-column: 2 !important;
        grid-row: 2 !important;

        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        flex-wrap: wrap !important;
        gap: 9px !important;

        width: max-content !important;
        max-width: 100% !important;
        margin: 0 !important;
        justify-self: end !important;
        align-self: end !important;
    }

    body[data-page="excel1-export"]
    .export-center-actions
    > a {
        margin: 0 !important;
    }

    /* User role badge stays beside admin name,
       but is visually tightened and aligned. */
    body[data-page="excel1-export"]
    .export-center-hero
    .user-inline
    .role-badge.admin {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;

        min-height: 25px !important;
        margin: 0 0 0 7px !important;
        padding: 4px 9px !important;

        border-radius: 999px !important;
        line-height: 1 !important;
        vertical-align: middle !important;
        white-space: nowrap !important;
    }

    /* =====================================================
       Equal-height cards and bottom-aligned action controls
       ===================================================== */

    body[data-page="excel1-export"]
    .export-center-grid {
        display: grid !important;
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;
        align-items: stretch !important;
    }

    body[data-page="excel1-export"]
    .export-center-grid
    > .export-card {
        display: flex !important;
        flex-direction: column !important;

        min-width: 0 !important;
        width: 100% !important;
        height: 100% !important;
    }

    body[data-page="excel1-export"]
    .export-card
    .export-card-body {
        min-width: 0 !important;
    }

    /* Date form occupies the card's remaining lower area */
    body[data-page="excel1-export"]
    .export-card
    > .export-excel-date-form {
        display: flex !important;
        flex-direction: column !important;

        margin-top: auto !important;
    }

    /* Download / disabled action also stays at the bottom */
    body[data-page="excel1-export"]
    .export-card
    > .export-card-link {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        min-height: 50px !important;
        margin-top: auto !important;
        box-sizing: border-box !important;
    }

    /* Search button and download button use the same height */
    body[data-page="excel1-export"]
    .export-card
    .export-excel-date-form
    > button.export-card-link,
    body[data-page="excel1-export"]
    .export-card
    > a.export-card-link,
    body[data-page="excel1-export"]
    .export-card
    > span.export-card-link {
        min-height: 50px !important;
    }

    body[data-page="excel1-export"]
    .export-card
    .export-excel-date-form
    > button.export-card-link {
        width: 100% !important;
        margin-top: 10px !important;
    }
}

/* =========================================================
   iPad tightening while preserving right alignment
   ========================================================= */

@media (min-width: 701px) and (max-width: 1050px) {
    body[data-page="excel1-export"]
    .export-center-hero {
        column-gap: 12px !important;
        row-gap: 10px !important;
    }

    body[data-page="excel1-export"]
    .export-center-actions {
        gap: 7px !important;
    }

    body[data-page="excel1-export"]
    .export-center-actions
    .header-action-btn {
        padding-inline: 10px !important;
        font-size: .62rem !important;
    }

    body[data-page="excel1-export"]
    .export-center-hero
    > span.role-badge {
        font-size: .58rem !important;
    }

    body[data-page="excel1-export"]
    .export-card
    > .export-card-link,
    body[data-page="excel1-export"]
    .export-card
    .export-excel-date-form
    > button.export-card-link {
        min-height: 46px !important;
    }
}

/* =========================================================
   Mobile keeps the existing stacked layout
   ========================================================= */

@media (max-width: 700px) {
    body[data-page="excel1-export"]
    .export-center-grid
    > .export-card {
        height: auto !important;
    }
}

/* =========================================================
   Room Settlement — Compact Density & Alignment Override
   Scope: body[data-page="room-settlement"]
   Purpose:
   - Keep the existing approved UI
   - Reduce wasted vertical space
   - Make grids, cards and controls more orderly
   Load after global.css and after any existing room-settlement CSS.
   ========================================================= */

/* ---------- Main section rhythm ---------- */
body[data-page="room-settlement"]
.settlement-pro-filter-card,
body[data-page="room-settlement"]
.settlement-pro-room-card,
body[data-page="room-settlement"]
.settlement-pro-section-card,
body[data-page="room-settlement"]
.settlement-pro-input-card {
    margin-top: 10px !important;
    padding: 13px !important;
}

body[data-page="room-settlement"]
.section-title-row {
    gap: 9px !important;
    margin-bottom: 9px !important;
}

body[data-page="room-settlement"]
.section-title-row h3 {
    font-size: .86rem !important;
    line-height: 1.25 !important;
}

body[data-page="room-settlement"]
.section-subtitle {
    margin-top: 2px !important;
    font-size: .64rem !important;
    line-height: 1.35 !important;
}

/* ---------- Hero stays existing, only tighter ---------- */
body[data-page="room-settlement"]
.settlement-pro-hero {
    min-height: 0 !important;
    padding: 17px 19px !important;
    gap: 12px !important;
}

body[data-page="room-settlement"]
.settlement-pro-hero h1 {
    font-size: clamp(1.35rem, 2.4vw, 1.9rem) !important;
}

body[data-page="room-settlement"]
.settlement-pro-hero .user-inline {
    margin-top: 7px !important;
    gap: 5px !important;
}

body[data-page="room-settlement"]
.settlement-pro-hero-actions {
    gap: 6px !important;
}

body[data-page="room-settlement"]
.settlement-pro-action-btn {
    min-height: 34px !important;
    padding: 6px 10px !important;
    font-size: .60rem !important;
}

/* ---------- Filter ---------- */
body[data-page="room-settlement"]
.settlement-pro-filter-grid,
body[data-page="room-settlement"]
.settlement-pro-filter-grid-three {
    gap: 7px !important;
}

body[data-page="room-settlement"]
.settlement-pro-filter-form > button {
    min-height: 36px !important;
    margin-top: 8px !important;
}

/* ---------- Form controls ---------- */
body[data-page="room-settlement"]
label {
    margin-bottom: 4px !important;
    font-size: .60rem !important;
    line-height: 1.25 !important;
}

body[data-page="room-settlement"]
input,
body[data-page="room-settlement"]
select,
body[data-page="room-settlement"]
textarea {
    min-height: 37px !important;
    padding: 6px 9px !important;
    font-size: .64rem !important;
}

body[data-page="room-settlement"]
textarea {
    line-height: 1.4 !important;
}

body[data-page="room-settlement"]
.settlement-pro-input-grid {
    gap: 7px !important;
}

body[data-page="room-settlement"]
.settlement-pro-input-grid > div {
    min-width: 0 !important;
}

/* Inline help text inside form fields */
body[data-page="room-settlement"]
.settlement-pro-input-grid p,
body[data-page="room-settlement"]
.settlement-pro-subsection
p[style*="font-size"] {
    margin-top: 4px !important;
    margin-bottom: 0 !important;
    font-size: .45rem !important;
    line-height: 1.3 !important;
}

/* ---------- Room summary ---------- */
body[data-page="room-settlement"]
.settlement-pro-room-top {
    gap: 8px !important;
}

body[data-page="room-settlement"]
.settlement-pro-room-top h2 {
    margin: 3px 0 1px !important;
    font-size: 1.15rem !important;
}

body[data-page="room-settlement"]
.settlement-pro-status-pill {
    min-height: 24px !important;
    padding: 4px 7px !important;
    font-size: .50rem !important;
}

body[data-page="room-settlement"]
.settlement-pro-room-card
> .attendance-info-grid {
    gap: 5px !important;
    margin-top: 8px !important;
}

body[data-page="room-settlement"]
.attendance-info-grid {
    gap: 5px !important;
}

body[data-page="room-settlement"]
.attendance-info-grid > div {
    padding: 7px !important;
    border-radius: 8px !important;
}

body[data-page="room-settlement"]
.attendance-info-grid span {
    font-size: .47rem !important;
}

body[data-page="room-settlement"]
.attendance-info-grid strong {
    margin-top: 3px !important;
    font-size: .57rem !important;
    line-height: 1.25 !important;
}

/* ---------- Export links ---------- */
body[data-page="room-settlement"]
.settlement-pro-export-links {
    gap: 5px !important;
    margin-top: 8px !important;
}

body[data-page="room-settlement"]
.settlement-pro-export-links > a,
body[data-page="room-settlement"]
.settlement-pro-export-links > span {
    min-height: 32px !important;
    padding: 5px 8px !important;
    font-size: .52rem !important;
}

/* ---------- Copy settlement card ---------- */
body[data-page="room-settlement"]
.settlement-copy-card {
    margin-top: 9px !important;
    padding: 10px !important;
}

body[data-page="room-settlement"]
.settlement-copy-card .section-title-row {
    align-items: center !important;
}

body[data-page="room-settlement"]
.settlement-copy-btn {
    min-width: 92px !important;
    min-height: 32px !important;
    padding: 5px 9px !important;
    font-size: .54rem !important;
}

body[data-page="room-settlement"]
.settlement-copy-textarea {
    min-height: 215px !important;
    margin-top: 7px !important;
    padding: 10px !important;
    font-size: .56rem !important;
    line-height: 1.45 !important;
}

/* ---------- Promoter lists ---------- */
body[data-page="room-settlement"]
.settlement-pro-promoter-list {
    gap: 6px !important;
}

body[data-page="room-settlement"]
.settlement-pro-promoter-card {
    padding: 9px !important;
    border-radius: 10px !important;
}

body[data-page="room-settlement"]
.settlement-pro-promoter-top {
    gap: 6px !important;
}

body[data-page="room-settlement"]
.settlement-pro-promoter-top h4 {
    font-size: .67rem !important;
}

body[data-page="room-settlement"]
.settlement-pro-promoter-top p {
    margin-top: 2px !important;
    font-size: .48rem !important;
    line-height: 1.3 !important;
}

body[data-page="room-settlement"]
.settlement-pro-takeaway-pill {
    max-width: 155px !important;
    padding: 4px 6px !important;
    font-size: .44rem !important;
}

/* ---------- Subsections 01–08 ---------- */
body[data-page="room-settlement"]
.settlement-pro-subsection {
    margin-top: 8px !important;
    padding: 10px !important;
    border-radius: 10px !important;
}

body[data-page="room-settlement"]
.settlement-pro-subsection-title {
    gap: 6px !important;
    margin-bottom: 7px !important;
    padding-bottom: 7px !important;
}

body[data-page="room-settlement"]
.settlement-pro-subsection-title > span {
    flex: 0 0 25px !important;
    width: 25px !important;
    height: 25px !important;
    border-radius: 7px !important;
    font-size: .47rem !important;
}

body[data-page="room-settlement"]
.settlement-pro-subsection-title h4 {
    font-size: .67rem !important;
}

body[data-page="room-settlement"]
.settlement-collapse-btn,
body[data-page="room-settlement"]
.settlement-employee-toggle-btn {
    min-height: 27px !important;
    padding: 4px 7px !important;
    font-size: .43rem !important;
}

/* ---------- Finance / readonly blocks ---------- */
body[data-page="room-settlement"]
.settlement-pro-finance-grid {
    gap: 7px !important;
}

body[data-page="room-settlement"]
.settlement-pro-readonly-box,
body[data-page="room-settlement"]
.settlement-pro-dj-card,
body[data-page="room-settlement"]
.commission-note-box,
body[data-page="room-settlement"]
.empty-state-card {
    padding: 8px !important;
    border-radius: 8px !important;
}

body[data-page="room-settlement"]
.settlement-pro-dj-list {
    gap: 5px !important;
}

body[data-page="room-settlement"]
.settlement-pro-dj-item {
    padding: 6px 7px !important;
}

/* ---------- Employee adjustment header ---------- */
body[data-page="room-settlement"]
.settlement-pro-promoter-card
> div[style*="justify-content:space-between"] {
    margin-top: 9px !important;
    gap: 7px !important;
}

body[data-page="room-settlement"]
.settlement-pro-promoter-card
> div[style*="justify-content:space-between"]
p {
    margin-top: 2px !important;
    font-size: .50rem !important;
    line-height: 1.3 !important;
}

/* ---------- Total summary ---------- */
body[data-page="room-settlement"]
.settlement-pro-total-card {
    gap: 5px !important;
    margin-top: 9px !important;
    padding: 9px !important;
}

body[data-page="room-settlement"]
.settlement-pro-total-card > div {
    padding: 7px !important;
}

body[data-page="room-settlement"]
.settlement-pro-total-card span {
    font-size: .50rem !important;
}

body[data-page="room-settlement"]
.settlement-pro-total-card strong {
    font-size: .62rem !important;
}

body[data-page="room-settlement"]
#js-total-amount-input {
    min-height: 37px !important;
    font-size: .78rem !important;
}

/* Save / Confirm button row */
body[data-page="room-settlement"]
.settlement-pro-input-form
> div[style*="display:flex"] {
    gap: 7px !important;
}

body[data-page="room-settlement"]
button[type="submit"] {
    min-height: 36px !important;
    padding: 6px 10px !important;
    font-size: .57rem !important;
}

/* =========================================================
   Desktop
   ========================================================= */

@media (min-width: 1101px) {
    body[data-page="room-settlement"]
    .settlement-pro-input-grid {
        grid-template-columns:
            repeat(4, minmax(0, 1fr)) !important;
    }

    body[data-page="room-settlement"]
    .settlement-pro-wide-field {
        grid-column: span 2 !important;
    }

    body[data-page="room-settlement"]
    .settlement-pro-subsection
    .settlement-pro-promoter-list {
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;
    }
}

/* =========================================================
   iPad
   ========================================================= */

@media (min-width: 701px) and (max-width: 1100px) {
    body[data-page="room-settlement"]
    .settlement-pro-input-grid {
        grid-template-columns:
            repeat(3, minmax(0, 1fr)) !important;
    }

    body[data-page="room-settlement"]
    .settlement-pro-wide-field {
        grid-column: span 2 !important;
    }

    body[data-page="room-settlement"]
    .settlement-pro-promoter-list {
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;
    }
}

/* =========================================================
   Mobile
   ========================================================= */

@media (max-width: 700px) {
    body[data-page="room-settlement"]
    .settlement-pro-hero {
        padding: 12px !important;
        gap: 8px !important;
    }

    body[data-page="room-settlement"]
    .settlement-pro-filter-card,
    body[data-page="room-settlement"]
    .settlement-pro-room-card,
    body[data-page="room-settlement"]
    .settlement-pro-section-card,
    body[data-page="room-settlement"]
    .settlement-pro-input-card {
        margin-top: 7px !important;
        padding: 8px !important;
    }

    body[data-page="room-settlement"]
    .settlement-pro-filter-grid,
    body[data-page="room-settlement"]
    .settlement-pro-filter-grid-three,
    body[data-page="room-settlement"]
    .settlement-pro-input-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;
        gap: 5px !important;
    }

    body[data-page="room-settlement"]
    .settlement-pro-wide-field {
        grid-column: 1 / -1 !important;
    }

    body[data-page="room-settlement"]
    .settlement-pro-subsection {
        margin-top: 6px !important;
        padding: 7px !important;
    }

    body[data-page="room-settlement"]
    .settlement-pro-promoter-card {
        padding: 7px !important;
    }

    body[data-page="room-settlement"]
    input,
    body[data-page="room-settlement"]
    select,
    body[data-page="room-settlement"]
    textarea {
        min-height: 34px !important;
        padding: 5px 7px !important;
        font-size: .55rem !important;
    }

    body[data-page="room-settlement"]
    label {
        font-size: .49rem !important;
    }

    body[data-page="room-settlement"]
    .settlement-copy-textarea {
        min-height: 190px !important;
    }

    body[data-page="room-settlement"]
    .settlement-pro-total-card {
        margin-top: 7px !important;
        padding: 7px !important;
    }
}

/* =========================================================
   Room Settlement — Final Targeted UI Refinement
   Scope: body[data-page="room-settlement"]
   Load after all existing Room Settlement CSS files.
   ========================================================= */

/* ---------- Room card and promoter list padding ---------- */
body[data-page="room-settlement"]
.settlement-pro-room-card {
    padding: 15px !important;
}

body[data-page="room-settlement"]
.settlement-pro-promoter-list {
    padding: 7px !important;
    border: 1px solid rgba(56, 75, 104, .08) !important;
    border-radius: 11px !important;
    background: rgba(248, 250, 252, .68) !important;
}

/* ---------- Collapsed employee payroll card ---------- */
body[data-page="room-settlement"]
.settlement-pro-promoter-card.is-employee-collapsed {
    position: relative;
    overflow: hidden;
    min-height: 66px !important;
    padding: 10px 11px !important;
    border: 1px solid rgba(56, 75, 104, .16) !important;
    border-left: 4px solid #384b68 !important;
    border-radius: 11px !important;
    background:
        linear-gradient(
            135deg,
            rgba(240, 244, 249, .96),
            rgba(255, 255, 255, .98)
        ) !important;
    box-shadow:
        0 6px 15px rgba(35, 50, 74, .055),
        inset 0 1px 0 rgba(255,255,255,.95) !important;
}

body[data-page="room-settlement"]
.settlement-pro-promoter-card.is-employee-collapsed::after {
    content: "";
    position: absolute;
    right: -28px;
    top: -32px;
    width: 82px;
    height: 82px;
    border: 13px solid rgba(56, 75, 104, .035);
    border-radius: 50%;
    pointer-events: none;
}

body[data-page="room-settlement"]
.settlement-pro-promoter-card.is-employee-collapsed
.settlement-pro-promoter-top {
    position: relative;
    z-index: 1;
    align-items: center !important;
    min-height: 44px !important;
}

body[data-page="room-settlement"]
.settlement-pro-promoter-card.is-employee-collapsed
.settlement-pro-promoter-top h4 {
    color: #23324a !important;
    font-weight: 900 !important;
}

body[data-page="room-settlement"]
.settlement-pro-promoter-card.is-employee-collapsed
.settlement-pro-promoter-top p {
    color: #718096 !important;
}

body[data-page="room-settlement"]
.settlement-pro-promoter-card.is-employee-collapsed
.settlement-pro-takeaway-pill {
    border-color: rgba(169, 119, 69, .20) !important;
    color: #76502e !important;
    background: rgba(169, 119, 69, .09) !important;
}

body[data-page="room-settlement"]
.settlement-pro-promoter-card.is-employee-collapsed
.settlement-employee-toggle-btn {
    min-width: 74px !important;
    color: #fff !important;
    border-color: #384b68 !important;
    background:
        linear-gradient(
            145deg,
            #435675,
            #25354e
        ) !important;
    box-shadow:
        0 5px 12px rgba(35, 50, 74, .15),
        inset 0 1px 0 rgba(255,255,255,.15) !important;
}

/* ---------- Normal checkbox size ---------- */
body[data-page="room-settlement"]
input[type="checkbox"] {
    width: 15px !important;
    height: 15px !important;
    min-width: 15px !important;
    min-height: 15px !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 4px !important;
    box-shadow: none !important;
    accent-color: #384b68;
    vertical-align: middle !important;
}

body[data-page="room-settlement"]
label:has(> input[type="checkbox"]) {
    gap: 6px !important;
    font-size: .58rem !important;
    line-height: 1.25 !important;
}

/* ---------- Credit detail empty-state list ---------- */
body[data-page="room-settlement"]
#js-credit-payment-details.empty-state-card {
    display: block !important;
    min-height: 0 !important;
    padding: 9px 10px !important;
    color: #34445b !important;
    background:
        linear-gradient(
            145deg,
            #f7f9fc,
            #fff
        ) !important;
    border: 1px solid #dce3eb !important;
    border-left: 4px solid #4c6685 !important;
    border-radius: 9px !important;
    font-size: .58rem !important;
    line-height: 1.55 !important;
    text-align: left !important;
    white-space: pre-line !important;
    overflow-wrap: anywhere !important;
}

/* ---------- Save / Confirm action buttons ---------- */
body[data-page="room-settlement"]
.settlement-pro-input-form
> div[style*="display:flex"][style*="gap"] {
    display: grid !important;
    grid-template-columns:
        repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
    margin-top: 11px !important;
    padding: 9px !important;
    border: 1px solid rgba(56, 75, 104, .10) !important;
    border-radius: 11px !important;
    background: rgba(248, 250, 252, .78) !important;
}

body[data-page="room-settlement"]
.settlement-pro-input-form
> div[style*="display:flex"][style*="gap"]
> button[type="submit"] {
    width: 100% !important;
    min-height: 42px !important;
    margin: 0 !important;
    padding: 8px 12px !important;
    border-radius: 9px !important;
    font-size: .64rem !important;
    font-weight: 900 !important;
    letter-spacing: .01em !important;
}

body[data-page="room-settlement"]
.settlement-pro-input-form
> div[style*="display:flex"][style*="gap"]
> button[data-submit-mode="save"] {
    color: #fff !important;
    border: 1px solid #2c405d !important;
    background:
        linear-gradient(
            145deg,
            #465d7f,
            #263852
        ) !important;
    box-shadow:
        0 7px 16px rgba(38, 56, 82, .18),
        inset 0 1px 0 rgba(255,255,255,.15) !important;
}

body[data-page="room-settlement"]
.settlement-pro-input-form
> div[style*="display:flex"][style*="gap"]
> button[data-submit-mode="confirm"] {
    color: #fff !important;
    border: 1px solid #783840 !important;
    background:
        linear-gradient(
            145deg,
            #ad5662,
            #74343d
        ) !important;
    box-shadow:
        0 7px 16px rgba(116, 52, 61, .18),
        inset 0 1px 0 rgba(255,255,255,.15) !important;
}

body[data-page="room-settlement"]
.settlement-pro-input-form
> div[style*="display:flex"][style*="gap"]
> button[type="submit"]:hover {
    transform: translateY(-1px);
    filter: brightness(1.04);
}

/* ---------- Total card premium hierarchy ---------- */
body[data-page="room-settlement"]
.settlement-pro-total-card {
    position: relative;
    overflow: hidden;
    padding: 12px !important;
    border: 1px solid rgba(56, 75, 104, .18) !important;
    border-radius: 13px !important;
    background:
        radial-gradient(
            circle at 100% 100%,
            rgba(169, 119, 69, .13),
            transparent 190px
        ),
        linear-gradient(
            145deg,
            #f4f7fb,
            #ffffff
        ) !important;
    box-shadow:
        0 10px 24px rgba(35, 50, 74, .075),
        inset 0 1px 0 #fff !important;
}

body[data-page="room-settlement"]
.settlement-pro-total-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 4px;
    background:
        linear-gradient(
            90deg,
            #334964,
            #7188a3 58%,
            #ad7747
        );
}

body[data-page="room-settlement"]
.settlement-pro-total-card > div {
    min-height: 43px !important;
    padding: 9px 10px !important;
    border: 1px solid rgba(56, 75, 104, .08) !important;
    border-radius: 9px !important;
    background: rgba(255,255,255,.78) !important;
}

body[data-page="room-settlement"]
.settlement-pro-total-card > div:last-of-type {
    border-color: rgba(169, 119, 69, .18) !important;
    background: rgba(255, 250, 242, .88) !important;
}

body[data-page="room-settlement"]
.settlement-pro-total-card span {
    color: #69788d !important;
    font-weight: 700 !important;
}

body[data-page="room-settlement"]
.settlement-pro-total-card strong {
    color: #23324a !important;
    font-weight: 900 !important;
    font-variant-numeric: tabular-nums;
}

body[data-page="room-settlement"]
#js-total-amount-input {
    min-height: 44px !important;
    border: 0 !important;
    border-radius: 10px !important;
    color: #fff !important;
    background:
        linear-gradient(
            145deg,
            #405674,
            #25364f
        ) !important;
    box-shadow:
        0 8px 18px rgba(37, 54, 79, .18),
        inset 0 1px 0 rgba(255,255,255,.14) !important;
    font-weight: 900 !important;
    letter-spacing: .02em !important;
    text-align: center !important;
}

/* ---------- Desktop typography increase ---------- */
@media (min-width: 1101px) {
    body[data-page="room-settlement"]
    .settlement-pro-promoter-top h4 {
        font-size: .75rem !important;
    }

    body[data-page="room-settlement"]
    .settlement-pro-promoter-top p {
        font-size: .54rem !important;
    }

    body[data-page="room-settlement"]
    .settlement-pro-takeaway-pill {
        font-size: .50rem !important;
    }

    body[data-page="room-settlement"]
    .attendance-info-grid span {
        font-size: .53rem !important;
    }

    body[data-page="room-settlement"]
    .attendance-info-grid strong {
        font-size: .65rem !important;
    }

    body[data-page="room-settlement"]
    .settlement-pro-total-card span {
        font-size: .64rem !important;
    }

    body[data-page="room-settlement"]
    .settlement-pro-total-card strong {
        font-size: .82rem !important;
    }

    body[data-page="room-settlement"]
    #js-total-amount-input {
        font-size: 1rem !important;
    }
}

/* ---------- Mobile ---------- */
@media (max-width: 700px) {
    body[data-page="room-settlement"]
    .section-subtitle {
        font-size: .52rem !important;
        line-height: 1.3 !important;
    }

    body[data-page="room-settlement"]
    .settlement-pro-room-card {
        padding: 10px !important;
    }

    body[data-page="room-settlement"]
    .settlement-pro-promoter-list {
        padding: 5px !important;
    }

    body[data-page="room-settlement"]
    .settlement-pro-promoter-card.is-employee-collapsed {
        min-height: 58px !important;
        padding: 7px 8px !important;
    }

    body[data-page="room-settlement"]
    .settlement-pro-promoter-card.is-employee-collapsed
    .settlement-employee-toggle-btn {
        min-width: 62px !important;
        min-height: 26px !important;
        padding: 4px 6px !important;
        font-size: .40rem !important;
    }

    body[data-page="room-settlement"]
    input[type="checkbox"] {
        width: 13px !important;
        height: 13px !important;
        min-width: 13px !important;
        min-height: 13px !important;
    }

    body[data-page="room-settlement"]
    label:has(> input[type="checkbox"]) {
        font-size: .46rem !important;
    }

    body[data-page="room-settlement"]
    #js-credit-payment-details.empty-state-card {
        padding: 7px 8px !important;
        font-size: .48rem !important;
        line-height: 1.45 !important;
    }

    body[data-page="room-settlement"]
    .settlement-pro-input-form
    > div[style*="display:flex"][style*="gap"] {
        padding: 6px !important;
        gap: 6px !important;
    }

    body[data-page="room-settlement"]
    .settlement-pro-input-form
    > div[style*="display:flex"][style*="gap"]
    > button[type="submit"] {
        min-height: 36px !important;
        padding: 6px 7px !important;
        font-size: .52rem !important;
    }

    body[data-page="room-settlement"]
    .settlement-pro-total-card {
        padding: 8px !important;
    }

    body[data-page="room-settlement"]
    .settlement-pro-total-card > div {
        min-height: 37px !important;
        padding: 7px 8px !important;
    }
}

/* =========================================================
   Room Settlement — Mobile Collapsed Card Alignment Fix
   Scope: body[data-page="room-settlement"]
   Load after room-settlement-final-targeted-ui.css
   ========================================================= */

@media (max-width: 700px) {
    /* Pull employee name/content back to the left edge */
    body[data-page="room-settlement"]
    .settlement-pro-promoter-card.is-employee-collapsed
    .settlement-pro-promoter-top {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        align-items: center !important;
        gap: 5px !important;

        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    body[data-page="room-settlement"]
    .settlement-pro-promoter-card.is-employee-collapsed
    .settlement-pro-promoter-top
    > div:first-child {
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    body[data-page="room-settlement"]
    .settlement-pro-promoter-card.is-employee-collapsed
    .settlement-pro-promoter-top h4 {
        margin: 0 !important;
        padding: 0 !important;
        font-size: .61rem !important;
        line-height: 1.2 !important;
    }

    body[data-page="room-settlement"]
    .settlement-pro-promoter-card.is-employee-collapsed
    .settlement-pro-promoter-top p {
        margin: 2px 0 0 !important;
        padding: 0 !important;
        font-size: .43rem !important;
        line-height: 1.25 !important;
    }

    body[data-page="room-settlement"]
    .settlement-pro-promoter-card.is-employee-collapsed
    .settlement-pro-takeaway-pill {
        justify-self: start !important;
        margin: 5px 0 0 !important;
        max-width: 100% !important;
        font-size: .41rem !important;
    }

    body[data-page="room-settlement"]
    .settlement-pro-promoter-card.is-employee-collapsed
    .settlement-employee-toggle-btn {
        justify-self: end !important;
        align-self: center !important;
        margin: 0 !important;
    }

    /* Employee amount adjustment title block */
    body[data-page="room-settlement"]
    .settlement-pro-promoter-card
    > div[style*="margin-top:16px"][style*="justify-content:space-between"] {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        align-items: center !important;
        gap: 5px !important;

        margin-top: 8px !important;
        padding: 7px !important;
        border: 1px solid rgba(56, 75, 104, .09) !important;
        border-radius: 8px !important;
        background: rgba(248, 250, 252, .72) !important;
    }

    body[data-page="room-settlement"]
    .settlement-pro-promoter-card
    > div[style*="margin-top:16px"][style*="justify-content:space-between"]
    > div:first-child {
        min-width: 0 !important;
    }

    body[data-page="room-settlement"]
    .settlement-pro-promoter-card
    > div[style*="margin-top:16px"][style*="justify-content:space-between"]
    strong {
        display: block !important;
        margin: 0 !important;
        font-size: .52rem !important;
        line-height: 1.25 !important;
    }

    body[data-page="room-settlement"]
    .settlement-pro-promoter-card
    > div[style*="margin-top:16px"][style*="justify-content:space-between"]
    p {
        margin: 2px 0 0 !important;
        font-size: .41rem !important;
        line-height: 1.25 !important;
    }

    body[data-page="room-settlement"]
    .settlement-pro-promoter-card
    > div[style*="margin-top:16px"][style*="justify-content:space-between"]
    label {
        justify-self: end !important;
        margin: 0 !important;
        font-size: .43rem !important;
        white-space: nowrap !important;
    }
}

@media (max-width: 360px) {
    body[data-page="room-settlement"]
    .settlement-pro-promoter-card
    > div[style*="margin-top:16px"][style*="justify-content:space-between"]
    strong {
        font-size: .49rem !important;
    }

    body[data-page="room-settlement"]
    .settlement-pro-promoter-card
    > div[style*="margin-top:16px"][style*="justify-content:space-between"]
    p {
        font-size: .38rem !important;
    }
}

/* =========================================================
   Room Settlement — Employee Toggle Button Far Right Fix
   Scope: body[data-page="room-settlement"]
   Load after all existing Room Settlement CSS.
   ========================================================= */

@media (max-width: 700px) {
    body[data-page="room-settlement"]
    .settlement-pro-promoter-card.is-employee-collapsed
    .settlement-pro-promoter-top {
        display: grid !important;
        grid-template-columns:
            minmax(0, 1fr) auto !important;
        align-items: start !important;
        column-gap: 8px !important;
    }

    body[data-page="room-settlement"]
    .settlement-pro-promoter-card.is-employee-collapsed
    .settlement-pro-promoter-top
    > div:first-child {
        grid-column: 1 !important;
        min-width: 0 !important;
    }

    body[data-page="room-settlement"]
    .settlement-pro-promoter-card.is-employee-collapsed
    .settlement-pro-takeaway-pill {
        grid-column: 1 !important;
        justify-self: start !important;
    }

    body[data-page="room-settlement"]
    .settlement-pro-promoter-card.is-employee-collapsed
    .settlement-employee-toggle-btn {
        grid-column: 2 !important;
        grid-row: 1 / span 2 !important;

        justify-self: end !important;
        align-self: center !important;

        margin-left: auto !important;
        margin-right: 0 !important;
    }
}

/* =========================================================
   Room Commission Settlement — Mobile Room Name + Status Inline
   Scope: body[data-page="room-commission-settlement"]
   Load after all existing commission CSS files.
   ========================================================= */

@media (max-width: 700px) {
    body[data-page="room-commission-settlement"]
    .commission-room-top {
        display: grid !important;
        grid-template-columns:
            minmax(0, 1fr) auto !important;
        grid-template-rows:
            auto auto auto !important;
        align-items: center !important;
        gap: 3px 7px !important;
    }

    body[data-page="room-commission-settlement"]
    .commission-room-top
    > div:first-child {
        display: contents !important;
    }

    /* Row 1: room info label only */
    body[data-page="room-commission-settlement"]
    .commission-room-top
    .summary-label {
        grid-column: 1 / -1 !important;
        grid-row: 1 !important;

        margin: 0 !important;

        font-size: .52rem !important;
        line-height: 1.2 !important;
    }

    /* Row 2: room name left */
    body[data-page="room-commission-settlement"]
    .commission-room-top h2 {
        grid-column: 1 !important;
        grid-row: 2 !important;
        align-self: center !important;

        min-width: 0 !important;
        margin: 4px 0 0 !important;

        font-size: .92rem !important;
        line-height: 1.2 !important;
        overflow-wrap: anywhere !important;
    }

    /* Row 2: status right */
    body[data-page="room-commission-settlement"]
    .commission-room-top
    .commission-status-pill {
        grid-column: 2 !important;
        grid-row: 2 !important;
        align-self: center !important;
        justify-self: end !important;

        min-height: 22px !important;
        margin: 4px 0 0 !important;
        padding: 3px 7px !important;

        border-radius: 999px !important;
        font-size: .70rem !important;
        line-height: 1 !important;
        white-space: nowrap !important;
    }

    /* Row 3: date */
    body[data-page="room-commission-settlement"]
    .commission-room-top p {
        grid-column: 1 / -1 !important;
        grid-row: 3 !important;

        min-width: 0 !important;
        margin: 0 !important;

        font-size: .48rem !important;
        line-height: 1.25 !important;
    }
}

@media (max-width: 360px) {
    body[data-page="room-commission-settlement"]
    .commission-room-top {
        gap: 2px 5px !important;
    }

    body[data-page="room-commission-settlement"]
    .commission-room-top
    .summary-label {
        font-size: .48rem !important;
    }

    body[data-page="room-commission-settlement"]
    .commission-room-top h2 {
        font-size: .85rem !important;
    }

    body[data-page="room-commission-settlement"]
    .commission-room-top
    .commission-status-pill {
        min-height: 20px !important;
        padding: 3px 6px !important;
        font-size: .41rem !important;
    }
}
/* =========================================================
   Room Commission Settlement — Mobile Component Density Fix
   Scope: body[data-page="room-commission-settlement"]
   Load after all existing Commission CSS files.
   ========================================================= */

@media (max-width: 700px) {
    body[data-page="room-commission-settlement"]
    .commission-component-scroll {
        margin-top: 8px !important;
        padding: 0 !important;
        overflow-x: auto !important;
        overscroll-behavior-x: contain;
        scrollbar-width: thin;
    }

    body[data-page="room-commission-settlement"]
    .commission-component-row {
        grid-auto-columns: minmax(118px, 128px) !important;
        gap: 5px !important;
        padding-bottom: 4px !important;
    }

    body[data-page="room-commission-settlement"]
    .commission-component-row
    + .commission-component-row {
        margin-top: 7px !important;
        padding-top: 7px !important;
    }

    body[data-page="room-commission-settlement"]
    .commission-component-item {
        min-width: 118px !important;
        min-height: 70px !important;
        padding: 7px !important;

        border: 1px solid rgba(56, 75, 104, .08) !important;
        border-radius: 8px !important;
        background: rgba(248, 250, 252, .92) !important;
    }

    body[data-page="room-commission-settlement"]
    .commission-component-item span {
        margin-bottom: 3px !important;
        font-size: .73rem !important;
        line-height: 1.2 !important;
    }

    body[data-page="room-commission-settlement"]
    .commission-component-item strong {
        font-size: .64rem !important;
        line-height: 1.22 !important;
        overflow-wrap: anywhere !important;
    }

    body[data-page="room-commission-settlement"]
    .commission-component-item small {
        margin-top: 3px !important;
        font-size: .39rem !important;
        line-height: 1.25 !important;
    }

    body[data-page="room-commission-settlement"]
    .commission-component-final {
        margin-top: 8px !important;
        padding: 9px 10px !important;
        border-radius: 9px !important;
    }

    body[data-page="room-commission-settlement"]
    .commission-component-final span {
        margin-bottom: 3px !important;
        font-size: .45rem !important;
    }

    body[data-page="room-commission-settlement"]
    .commission-component-final strong {
        font-size: .72rem !important;
        line-height: 1.2 !important;
    }
}

/* Very narrow phones become slightly denser */
@media (max-width: 360px) {
    body[data-page="room-commission-settlement"]
    .commission-component-row {
        grid-auto-columns: minmax(105px, 114px) !important;
        gap: 4px !important;
    }

    body[data-page="room-commission-settlement"]
    .commission-component-item {
        min-width: 105px !important;
        min-height: 65px !important;
        padding: 6px !important;
    }

    body[data-page="room-commission-settlement"]
    .commission-component-item span {
        font-size: .40rem !important;
    }

    body[data-page="room-commission-settlement"]
    .commission-component-item strong {
        font-size: .50rem !important;
    }

    body[data-page="room-commission-settlement"]
    .commission-component-item small {
        font-size: .36rem !important;
    }
}

/* =========================================================
   Room Commission Settlement — Mobile Business Reference Grid
   Scope: body[data-page="room-commission-settlement"]
   Load after all existing Commission CSS files.
   ========================================================= */

@media (max-width: 700px) {
    /* Business Reference Info is the second payroll section. */
    body[data-page="room-commission-settlement"]
    .commission-input-form
    .payroll-calc-section:nth-of-type(2)
    .commission-input-grid {
        display: grid !important;
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;
        gap: 6px !important;
    }

    body[data-page="room-commission-settlement"]
    .commission-input-form
    .payroll-calc-section:nth-of-type(2)
    .commission-input-grid
    > div {
        min-width: 0 !important;
    }

    /* Business names today: one full row */
    body[data-page="room-commission-settlement"]
    .commission-input-form
    .payroll-calc-section:nth-of-type(2)
    .commission-input-grid
    > div:nth-child(3) {
        grid-column: 1 / -1 !important;
    }

    /* Per-business reference and balance stay side by side */
    body[data-page="room-commission-settlement"]
    .commission-input-form
    .payroll-calc-section:nth-of-type(2)
    .commission-input-grid
    > div:nth-child(4) {
        grid-column: 1 !important;
    }

    body[data-page="room-commission-settlement"]
    .commission-input-form
    .payroll-calc-section:nth-of-type(2)
    .commission-input-grid
    > div:nth-child(5) {
        grid-column: 2 !important;
    }

    body[data-page="room-commission-settlement"]
    .commission-input-form
    .payroll-calc-section:nth-of-type(2)
    .commission-input-grid
    input {
        width: 100% !important;
        min-width: 0 !important;
    }
}

/* Very narrow phones retain the same arrangement */
@media (max-width: 360px) {
    body[data-page="room-commission-settlement"]
    .commission-input-form
    .payroll-calc-section:nth-of-type(2)
    .commission-input-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;
        gap: 4px !important;
    }
}

/* =========================================================
   Room Payroll Settlement — Mobile Status & Typography Refinement
   Scope: body[data-page="room-payroll-settlement"]
   Load after global.css and all existing payroll page CSS.
   Other desktop/tablet styles remain unchanged.
   ========================================================= */

@media (max-width: 700px) {

    /* =====================================================
       1. Room info:
       房间资料
       A5                         Excel 2 已确认
       2026-07-26
       ===================================================== */

    body[data-page="room-payroll-settlement"]
    .payroll-room-top {
        display: grid !important;
        grid-template-columns:
            minmax(0, 1fr) auto !important;
        grid-template-rows:
            auto auto auto !important;
        align-items: center !important;
        gap: 3px 7px !important;
    }

    body[data-page="room-payroll-settlement"]
    .payroll-room-top
    > div:first-child {
        display: contents !important;
    }

    body[data-page="room-payroll-settlement"]
    .payroll-room-top
    .summary-label {
        grid-column: 1 / -1 !important;
        grid-row: 1 !important;

        margin: 0 !important;
        padding: 4 !important;

        font-size: .72rem !important;
        line-height: 1.2 !important;
    }

    body[data-page="room-payroll-settlement"]
    .payroll-room-top h2,
    body[data-page="room-payroll-settlement"]
    .payroll-room-top h3 {
        grid-column: 1 !important;
        grid-row: 2 !important;
        align-self: center !important;

        min-width: 0 !important;
        margin: 4px 0 0 !important;
        padding: 0 !important;

        font-size: .92rem !important;
        line-height: 1.2 !important;
        overflow-wrap: anywhere !important;
    }

    body[data-page="room-payroll-settlement"]
    .payroll-room-top
    .payroll-status-pill.payroll-confirmed {
        grid-column: 2 !important;
        grid-row: 2 !important;
        align-self: center !important;
        justify-self: end !important;

        min-height: 22px !important;
        margin: 4px 0 0 !important;
        padding: 3px 7px !important;

        border-radius: 999px !important;
        font-size: .44rem !important;
        line-height: 1 !important;
        white-space: nowrap !important;
    }

    body[data-page="room-payroll-settlement"]
    .payroll-room-top p {
        grid-column: 1 / -1 !important;
        grid-row: 3 !important;

        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;

        font-size: .48rem !important;
        line-height: 1.25 !important;
    }

    /* =====================================================
       2. Employee card right-side status stack
       ===================================================== */

    body[data-page="room-payroll-settlement"]
    .payroll-row-top
    > div:last-child {
        gap: 4px !important;
        max-width: 54% !important;
        min-width: 0 !important;
    }

    body[data-page="room-payroll-settlement"]
    .salary-status-pill,
    body[data-page="room-payroll-settlement"]
    .salary-status-pill.salary-status-pending {
        min-height: 20px !important;
        max-width: 100% !important;
        padding: 3px 6px !important;

        border-radius: 999px !important;
        font-size: .40rem !important;
        line-height: 1.25 !important;
        text-align: right !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
    }

    body[data-page="room-payroll-settlement"]
    .payroll-row-top
    small[style*="color:#64748b"] {
        display: block !important;
        max-width: 100% !important;
        margin: 0 !important;

        color: #64748b !important;
        font-size: .39rem !important;
        font-weight: 700 !important;
        line-height: 1.3 !important;
        text-align: right !important;
        overflow-wrap: anywhere !important;
    }

    body[data-page="room-payroll-settlement"]
    .payroll-row-top
    small[style*="color:#0f766e"] {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: flex-end !important;

        max-width: 100% !important;
        min-height: 19px !important;
        margin: 0 !important;
        padding: 2px 5px !important;

        border: 1px solid rgba(15, 118, 110, .14) !important;
        border-radius: 6px !important;
        color: #0f766e !important;
        background: rgba(15, 118, 110, .06) !important;

        font-size: .39rem !important;
        font-weight: 800 !important;
        line-height: 1.25 !important;
        text-align: right !important;
        overflow-wrap: anywhere !important;
    }

    /* Keep the main salary pill readable but compact. */
    body[data-page="room-payroll-settlement"]
    .payroll-final-pill {
        max-width: 100% !important;
        padding: 4px 7px !important;
        font-size: .43rem !important;
        line-height: 1.25 !important;
        text-align: right !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
    }

    /* =====================================================
       3. Section h4 hierarchy
       ===================================================== */

    body[data-page="room-payroll-settlement"]
    .payroll-calc-section
    > .section-title-row {
        min-height: 0 !important;
        margin-bottom: 6px !important;
        padding-bottom: 5px !important;
    }

    body[data-page="room-payroll-settlement"]
    .section-title-row h4 {
        margin: 0 !important;
        color: #2d3b50 !important;
        font-size: .70rem !important;
        font-weight: 900 !important;
        line-height: 1.25 !important;
        letter-spacing: .005em !important;
    }

    body[data-page="room-payroll-settlement"]
    .section-title-row h4::before {
        content: "";
        display: inline-block;
        width: 3px;
        height: 11px;
        margin-right: 5px;
        border-radius: 99px;
        background: #64748b;
        vertical-align: -1px;
    }

    /* =====================================================
       4. Payroll money grid notes
       ===================================================== */

    body[data-page="room-payroll-settlement"]
    .payroll-money-grid {
        gap: 5px !important;
    }

    body[data-page="room-payroll-settlement"]
    .payroll-money-grid > div {
        min-width: 0 !important;
        padding: 7px !important;
        border-radius: 8px !important;
    }

    body[data-page="room-payroll-settlement"]
    .payroll-money-grid span {
        font-size: .63rem !important;
        line-height: 1.22 !important;
    }

    body[data-page="room-payroll-settlement"]
    .payroll-money-grid strong {
        margin-top: 3px !important;
        font-size: .64rem !important;
        line-height: 1.22 !important;
        overflow-wrap: anywhere !important;
    }

    body[data-page="room-payroll-settlement"]
    .payroll-money-grid small {
        display: block !important;
        margin-top: 3px !important;

        color: #7b8798 !important;
        font-size: .57rem !important;
        font-weight: 650 !important;
        line-height: 1.3 !important;
        overflow-wrap: anywhere !important;
    }
}

/* Extra-tight adjustment for very narrow phones. */
@media (max-width: 360px) {
    body[data-page="room-payroll-settlement"]
    .payroll-room-top {
        gap: 2px 5px !important;
    }

    body[data-page="room-payroll-settlement"]
    .payroll-room-top h2,
    body[data-page="room-payroll-settlement"]
    .payroll-room-top h3 {
        font-size: .85rem !important;
    }

    body[data-page="room-payroll-settlement"]
    .payroll-room-top
    .payroll-status-pill.payroll-confirmed {
        min-height: 20px !important;
        padding: 3px 6px !important;
        font-size: .40rem !important;
    }

    body[data-page="room-payroll-settlement"]
    .payroll-row-top
    > div:last-child {
        max-width: 52% !important;
    }

    body[data-page="room-payroll-settlement"]
    .section-title-row h4 {
        font-size: .52rem !important;
    }

    body[data-page="room-payroll-settlement"]
    .payroll-money-grid small {
        font-size: .34rem !important;
    }
}
/* =========================================================
   Room Payroll Settlement — Mobile Employee Summary Redesign
   Scope: body[data-page="room-payroll-settlement"]
   Load after room-payroll-mobile-status-typography-refinement.css
   Only redesigns the four summary elements in employee card.
   ========================================================= */

@media (max-width: 700px) {

    /* Employee card header becomes two clear vertical sections. */
    body[data-page="room-payroll-settlement"]
    .payroll-row-top {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 8px !important;
        align-items: stretch !important;
    }

    body[data-page="room-payroll-settlement"]
    .payroll-row-top
    > div:first-child {
        min-width: 0 !important;
        width: 100% !important;
    }

    body[data-page="room-payroll-settlement"]
    .payroll-row-top
    > div:last-child {
        display: grid !important;
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;
        gap: 6px !important;

        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        padding: 8px !important;

        border: 1px solid rgba(51, 65, 85, .11) !important;
        border-radius: 10px !important;
        background:
            linear-gradient(
                145deg,
                rgba(248, 250, 252, .98),
                rgba(255, 255, 255, .98)
            ) !important;
        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.95),
            0 5px 13px rgba(15, 23, 42, .045) !important;
    }

    /* Main salary amount: full-width and visually dominant. */
    body[data-page="room-payroll-settlement"]
    .payroll-row-top
    .payroll-final-pill {
        grid-column: 1 / -1 !important;

        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;

        width: 100% !important;
        max-width: none !important;
        min-height: 36px !important;
        margin: 0 !important;
        padding: 8px 10px !important;

        border: 1px solid rgba(51, 65, 85, .18) !important;
        border-radius: 9px !important;
        color: #fff !important;
        background:
            linear-gradient(
                145deg,
                #485d7a,
                #283a54
            ) !important;
        box-shadow:
            0 6px 14px rgba(40, 58, 84, .17),
            inset 0 1px 0 rgba(255,255,255,.16) !important;

        font-size: .57rem !important;
        font-weight: 900 !important;
        line-height: 1.35 !important;
        text-align: left !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
    }

    /* Membership status: full-width second row. */
    body[data-page="room-payroll-settlement"]
    .payroll-row-top
    .salary-status-pill,
    body[data-page="room-payroll-settlement"]
    .payroll-row-top
    .salary-status-pill.salary-status-pending {
        grid-column: 1 / -1 !important;

        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;

        width: 100% !important;
        max-width: none !important;
        min-height: 29px !important;
        margin: 0 !important;
        padding: 6px 9px !important;

        border: 1px solid rgba(180, 83, 9, .18) !important;
        border-radius: 8px !important;
        color: #8a4b09 !important;
        background:
            linear-gradient(
                145deg,
                #fff8eb,
                #fffdf8
            ) !important;
        box-shadow: inset 0 1px 0 #fff !important;

        font-size: .50rem !important;
        font-weight: 850 !important;
        line-height: 1.3 !important;
        text-align: left !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
    }

    body[data-page="room-payroll-settlement"]
    .payroll-row-top
    .salary-status-pill:not(.salary-status-pending) {
        color: #38536f !important;
        border-color: rgba(56, 83, 111, .16) !important;
        background:
            linear-gradient(
                145deg,
                #f2f6fa,
                #ffffff
            ) !important;
    }

    /* Source information card. */
    body[data-page="room-payroll-settlement"]
    .payroll-row-top
    small[style*="color:#64748b"] {
        display: flex !important;
        align-items: center !important;

        min-width: 0 !important;
        min-height: 28px !important;
        margin: 0 !important;
        padding: 6px 7px !important;

        border: 1px solid rgba(100, 116, 139, .13) !important;
        border-radius: 8px !important;
        color: #536174 !important;
        background: #f5f7fa !important;

        font-size: .47rem !important;
        font-weight: 750 !important;
        line-height: 1.3 !important;
        text-align: left !important;
        overflow-wrap: anywhere !important;
    }

    body[data-page="room-payroll-settlement"]
    .payroll-row-top
    small[style*="color:#64748b"]::before {
        content: "来源";
        flex: 0 0 auto;
        margin-right: 5px;
        padding: 2px 4px;
        border-radius: 5px;
        color: #fff;
        background: #64748b;
        font-size: .38rem;
        font-weight: 900;
        line-height: 1.1;
    }

    /* Payout business information card. */
    body[data-page="room-payroll-settlement"]
    .payroll-row-top
    small[style*="color:#0f766e"] {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;

        min-width: 0 !important;
        min-height: 28px !important;
        margin: 0 !important;
        padding: 6px 7px !important;

        border: 1px solid rgba(15, 118, 110, .17) !important;
        border-radius: 8px !important;
        color: #0d675f !important;
        background:
            linear-gradient(
                145deg,
                #edf9f6,
                #f9fffd
            ) !important;

        font-size: .47rem !important;
        font-weight: 850 !important;
        line-height: 1.3 !important;
        text-align: left !important;
        overflow-wrap: anywhere !important;
    }

    /* Ensure employee name area remains readable. */
    body[data-page="room-payroll-settlement"]
    .payroll-row-top
    > div:first-child h3 {
        margin: 0 !important;
        font-size: .72rem !important;
        line-height: 1.25 !important;
    }

    body[data-page="room-payroll-settlement"]
    .payroll-row-top
    > div:first-child p {
        margin: 3px 0 0 !important;
        font-size: .48rem !important;
        line-height: 1.35 !important;
    }
}

/* Very narrow phones: stack the two information cards. */
@media (max-width: 350px) {
    body[data-page="room-payroll-settlement"]
    .payroll-row-top
    > div:last-child {
        grid-template-columns: 1fr !important;
    }

    body[data-page="room-payroll-settlement"]
    .payroll-row-top
    .payroll-final-pill,
    body[data-page="room-payroll-settlement"]
    .payroll-row-top
    .salary-status-pill,
    body[data-page="room-payroll-settlement"]
    .payroll-row-top
    .salary-status-pill.salary-status-pending {
        grid-column: 1 !important;
    }
}

/* =========================================================
   Manual Attendance — Confirm Dialog & Preview UI Fix
   Scope: body[data-page="manual-attendance-entry"]
   Load after global.css and the page's existing inline CSS.
   ========================================================= */

body[data-page="manual-attendance-entry"] .manual-entry-dialog {
    overflow: hidden !important;
    border: 1px solid rgba(148, 163, 184, .22) !important;
    border-radius: 20px !important;
    background: #ffffff !important;
    box-shadow: 0 28px 70px rgba(15, 23, 42, .28), 0 0 0 1px rgba(255, 255, 255, .75) inset !important;
}

body[data-page="manual-attendance-entry"] .manual-entry-dialog::backdrop {
    background: rgba(15, 23, 42, .62) !important;
    backdrop-filter: blur(3px) !important;
}

body[data-page="manual-attendance-entry"] .manual-entry-dialog-content {
    position: relative;
    padding: 22px !important;
    background: radial-gradient(circle at 100% 0%, rgba(59, 130, 246, .08), transparent 210px), linear-gradient(180deg, #ffffff, #f8fafc) !important;
}

body[data-page="manual-attendance-entry"] .manual-entry-dialog-content::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 4px;
    background: linear-gradient(90deg, #334155, #64748b, #94a3b8);
}

body[data-page="manual-attendance-entry"] #manual-confirm-dialog-title {
    margin: 2px 0 0 !important;
    color: #172033 !important;
    font-size: 1.05rem !important;
    font-weight: 900 !important;
    line-height: 1.3 !important;
    letter-spacing: -.015em !important;
}

body[data-page="manual-attendance-entry"] .manual-entry-dialog-content > .section-subtitle {
    margin: 5px 0 0 !important;
    color: #6b778a !important;
    font-size: .76rem !important;
    line-height: 1.5 !important;
}

body[data-page="manual-attendance-entry"] .manual-entry-preview {
    position: relative;
    margin: 16px 0 !important;
    max-height: min(56vh, 520px) !important;
    overflow-y: auto !important;
    padding: 16px 17px !important;
    border: 1px solid #dce3ec !important;
    border-radius: 14px !important;
    color: #2f3d52 !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(247, 249, 252, .98)) !important;
    box-shadow: inset 0 1px 0 #fff, 0 7px 18px rgba(15, 23, 42, .055) !important;
    white-space: pre-wrap !important;
    overflow-wrap: anywhere !important;
    font-size: .79rem !important;
    font-weight: 650 !important;
    line-height: 1.75 !important;
    scrollbar-width: thin;
    scrollbar-color: #94a3b8 transparent;
}

body[data-page="manual-attendance-entry"] .manual-entry-preview::before {
    content: "补录内容预览";
    display: block;
    width: fit-content;
    margin: 0 0 11px;
    padding: 4px 8px;
    border: 1px solid rgba(51, 65, 85, .13);
    border-radius: 999px;
    color: #334155;
    background: #eef2f6;
    font-size: .64rem;
    font-weight: 900;
    line-height: 1.2;
    letter-spacing: .035em;
}

body[data-page="manual-attendance-entry"] .manual-entry-preview:empty {
    min-height: 110px !important;
}

body[data-page="manual-attendance-entry"] .manual-entry-preview:empty::after {
    content: "正在准备补录内容……";
    display: grid;
    min-height: 70px;
    place-items: center;
    color: #8491a3;
    font-size: .74rem;
    font-weight: 700;
}

body[data-page="manual-attendance-entry"] .manual-entry-dialog .manual-entry-action-row {
    display: grid !important;
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr) !important;
    gap: 9px !important;
    margin-top: 16px !important;
}

body[data-page="manual-attendance-entry"] .manual-entry-dialog .manual-entry-action-row button {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 42px !important;
    margin: 0 !important;
    padding: 9px 13px !important;
    border-radius: 11px !important;
    font: inherit !important;
    font-size: .78rem !important;
    font-weight: 900 !important;
    line-height: 1.2 !important;
    cursor: pointer !important;
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease !important;
}

body[data-page="manual-attendance-entry"] #manual-confirm-back-button.header-action-btn {
    color: #334155 !important;
    border: 1px solid #cbd5e1 !important;
    background: linear-gradient(180deg, #ffffff, #f1f5f9) !important;
    box-shadow: 0 5px 12px rgba(15, 23, 42, .07), inset 0 1px 0 #fff !important;
    text-shadow: none !important;
    opacity: 1 !important;
}

body[data-page="manual-attendance-entry"] #manual-confirm-back-button.header-action-btn:hover {
    color: #172033 !important;
    border-color: #94a3b8 !important;
    background: linear-gradient(180deg, #f8fafc, #e9eef5) !important;
    transform: translateY(-1px) !important;
}

body[data-page="manual-attendance-entry"] #manual-confirm-submit-button {
    color: #ffffff !important;
    border: 1px solid #1f4f7c !important;
    background: linear-gradient(145deg, #416f9d, #244b73) !important;
    box-shadow: 0 8px 18px rgba(36, 75, 115, .22), inset 0 1px 0 rgba(255, 255, 255, .18) !important;
}

body[data-page="manual-attendance-entry"] #manual-confirm-submit-button:hover {
    border-color: #173c5f !important;
    background: linear-gradient(145deg, #315f8d, #1c3f61) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 10px 22px rgba(28, 63, 97, .28), inset 0 1px 0 rgba(255, 255, 255, .18) !important;
}

body[data-page="manual-attendance-entry"] .manual-entry-dialog .manual-entry-action-row button:active {
    transform: translateY(0) scale(.985) !important;
}

body[data-page="manual-attendance-entry"] .manual-entry-dialog .manual-entry-action-row button:focus-visible {
    outline: 3px solid rgba(59, 130, 246, .22) !important;
    outline-offset: 2px !important;
}

@media (max-width: 700px) {
    body[data-page="manual-attendance-entry"] .manual-entry-dialog {
        width: calc(100vw - 18px) !important;
        max-height: calc(100vh - 24px) !important;
        border-radius: 16px !important;
    }

    body[data-page="manual-attendance-entry"] .manual-entry-dialog-content {
        padding: 16px !important;
    }

    body[data-page="manual-attendance-entry"] #manual-confirm-dialog-title {
        font-size: .88rem !important;
    }

    body[data-page="manual-attendance-entry"] .manual-entry-dialog-content > .section-subtitle {
        font-size: .65rem !important;
    }

    body[data-page="manual-attendance-entry"] .manual-entry-preview {
        max-height: 52vh !important;
        margin: 12px 0 !important;
        padding: 12px 13px !important;
        border-radius: 11px !important;
        font-size: .64rem !important;
        line-height: 1.65 !important;
    }

    body[data-page="manual-attendance-entry"] .manual-entry-preview::before {
        margin-bottom: 8px;
        font-size: .54rem;
    }

    body[data-page="manual-attendance-entry"] .manual-entry-dialog .manual-entry-action-row {
        grid-template-columns: 1fr 1fr !important;
        gap: 7px !important;
        margin-top: 12px !important;
    }

    body[data-page="manual-attendance-entry"] .manual-entry-dialog .manual-entry-action-row button {
        min-height: 39px !important;
        padding: 8px 9px !important;
        border-radius: 9px !important;
        font-size: .67rem !important;
    }
}

@media (max-width: 360px) {
    body[data-page="manual-attendance-entry"] .manual-entry-dialog .manual-entry-action-row {
        grid-template-columns: 1fr !important;
    }
}

/* =========================================================
   Login + Register — Mobile Vertical Centering
   Load after:
   login-register-mobile-viewport-balance-fix.css
   ========================================================= */

@media (max-width: 820px) {
    body[data-page="login"],
    body[data-page="register"] {
        display: flex !important;
        min-height: 100vh !important;
        min-height: 100svh !important;
        align-items: center !important;
        justify-content: center !important;

        padding:
            max(8px, env(safe-area-inset-top))
            0
            max(8px, env(safe-area-inset-bottom)) !important;
    }

    body[data-page="login"] .login-page-wrapper,
    body[data-page="register"] .register-page-wrapper {
        width: calc(100% - 16px) !important;

        min-height: 0 !important;
        height: auto !important;
        max-height: none !important;

        margin: 0 auto !important;
    }
}

/* Short screens or pages with expanded content:
   switch back to top alignment so nothing gets clipped. */
@media (max-width: 820px) and (max-height: 760px) {
    body[data-page="login"],
    body[data-page="register"] {
        align-items: flex-start !important;
    }
}

/* Register page can become taller when Promoter fields appear.
   Let the document scroll naturally while keeping the initial
   compact form centered on normal-height phones. */
@media (max-width: 520px) {
    body[data-page="login"] .login-page-wrapper,
    body[data-page="register"] .register-page-wrapper {
        border-radius: 20px !important;
    }

    body[data-page="login"] .login-brand-panel,
    body[data-page="register"] .register-brand-panel {
        min-height: clamp(225px, 29svh, 250px) !important;
    }

    body[data-page="login"] .login-card,
    body[data-page="register"] .register-card {
        padding-top: 30px !important;
        padding-bottom: 20px !important;
    }
}

/* =========================================================
   Login + Register — Mobile Full-Screen Hero Layout
   Load after global.css.
   Do not load login-register-mobile-vertical-center.css.
   ========================================================= */

@media (max-width: 820px) {
    body[data-page="login"],
    body[data-page="register"] {
        display: block !important;

        min-height: 100vh !important;
        min-height: 100svh !important;

        padding:
            max(8px, env(safe-area-inset-top))
            0
            max(8px, env(safe-area-inset-bottom)) !important;

        overflow-x: hidden !important;
    }

    body[data-page="login"] .login-page-wrapper,
    body[data-page="register"] .register-page-wrapper {
        display: grid !important;
        grid-template-columns: 1fr !important;
        grid-template-rows:
            minmax(300px, 40svh)
            minmax(0, 1fr) !important;

        width: calc(100% - 16px) !important;

        min-height: calc(100vh - 16px) !important;
        min-height: calc(100svh - 16px) !important;
        height: auto !important;
        max-height: none !important;

        margin: 0 auto !important;

        overflow: hidden !important;
        border-radius: 22px !important;
    }

    body[data-page="login"] .login-brand-panel,
    body[data-page="register"] .register-brand-panel {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        min-height: 300px !important;
        height: auto !important;
        padding:
            max(28px, env(safe-area-inset-top))
            24px
            30px !important;
    }

    body[data-page="login"] .login-brand-content,
    body[data-page="register"] .register-brand-content {
        width: 100% !important;
        max-width: 520px !important;
        margin: 0 auto !important;
        text-align: center !important;
    }

    body[data-page="login"] .login-brand-logo-wrap,
    body[data-page="register"] .register-brand-logo-wrap {
        width: clamp(165px, 44vw, 195px) !important;
        margin: 0 auto 14px !important;
    }

    body[data-page="login"] .login-card,
    body[data-page="register"] .register-card {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;

        min-height: 0 !important;
        height: 100% !important;

        padding-top: 54px !important;
        padding-bottom:
            max(24px, env(safe-area-inset-bottom)) !important;
    }
}

/* Standard phones */
@media (max-width: 520px) {
    body[data-page="login"] .login-page-wrapper,
    body[data-page="register"] .register-page-wrapper {
        grid-template-rows:
            minmax(315px, 42svh)
            minmax(0, 1fr) !important;

        width: calc(100% - 16px) !important;
        border-radius: 21px !important;
    }

    body[data-page="login"] .login-brand-panel,
    body[data-page="register"] .register-brand-panel {
        min-height: 315px !important;
        padding-top: 30px !important;
        padding-bottom: 28px !important;
    }

    body[data-page="login"] .login-brand-logo-wrap,
    body[data-page="register"] .register-brand-logo-wrap {
        width: clamp(168px, 46vw, 190px) !important;
    }

    body[data-page="login"] .login-card,
    body[data-page="register"] .register-card {
        padding-top: 54px !important;
        padding-bottom:
            max(22px, env(safe-area-inset-bottom)) !important;
    }
}

/* Tall phones: make the brand area longer without creating
   empty space beneath the white form section. */
@media (max-width: 520px) and (min-height: 820px) {
    body[data-page="login"] .login-page-wrapper,
    body[data-page="register"] .register-page-wrapper {
        grid-template-rows:
            minmax(340px, 43svh)
            minmax(0, 1fr) !important;
    }

    body[data-page="login"] .login-brand-panel,
    body[data-page="register"] .register-brand-panel {
        min-height: 340px !important;
    }
}

/* Short phones: keep all fields reachable. */
@media (max-width: 520px) and (max-height: 760px) {
    body[data-page="login"] .login-page-wrapper,
    body[data-page="register"] .register-page-wrapper {
        grid-template-rows:
            245px
            auto !important;
    }

    body[data-page="login"] .login-brand-panel,
    body[data-page="register"] .register-brand-panel {
        min-height: 245px !important;
        padding-top: 20px !important;
        padding-bottom: 18px !important;
    }

    body[data-page="login"] .login-brand-logo-wrap,
    body[data-page="register"] .register-brand-logo-wrap {
        width: 145px !important;
        margin-bottom: 8px !important;
    }

    body[data-page="login"] .login-card,
    body[data-page="register"] .register-card {
        height: auto !important;
        justify-content: flex-start !important;
        padding-top: 48px !important;
    }
}

/* =========================================================
   PRMS — Global Mobile Natural Height + Safe Top Spacing
   Load after global.css and all page-specific CSS.
   Excludes Login and Register pages.
   ========================================================= */

@media (max-width: 700px) {

    /* -----------------------------------------------------
       1. iPhone / Android top safe spacing
       ----------------------------------------------------- */

    body[data-page]:not([data-page="login"]):not([data-page="register"]) {
        min-height: 100vh !important;
        min-height: 100svh !important;
        height: auto !important;
        overflow-x: hidden !important;
    }

    body[data-page]:not([data-page="login"]):not([data-page="register"])
    > .container,

    body[data-page]:not([data-page="login"]):not([data-page="register"])
    > main,

    body[data-page]:not([data-page="login"]):not([data-page="register"])
    .container.page-with-nav {
        padding-top:
            max(
                18px,
                calc(env(safe-area-inset-top) + 11px)
            ) !important;
    }

    /* Common alternative page wrappers */
    body[data-page]:not([data-page="login"]):not([data-page="register"])
    > .page-container,

    body[data-page]:not([data-page="login"]):not([data-page="register"])
    > .content-container,

    body[data-page]:not([data-page="login"]):not([data-page="register"])
    > .page-wrapper:not(.login-page-wrapper):not(.register-page-wrapper) {
        padding-top:
            max(
                18px,
                calc(env(safe-area-inset-top) + 11px)
            ) !important;
    }

    /* -----------------------------------------------------
       2. Top-level layout follows content height naturally
       ----------------------------------------------------- */

    body[data-page]:not([data-page="login"]):not([data-page="register"])
    .container.page-with-nav,

    body[data-page]:not([data-page="login"]):not([data-page="register"])
    main,

    body[data-page]:not([data-page="login"]):not([data-page="register"])
    .page-container,

    body[data-page]:not([data-page="login"]):not([data-page="register"])
    .content-container {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
    }

    /* -----------------------------------------------------
       3. Common page heroes should size from their content
       ----------------------------------------------------- */

    body[data-page]:not([data-page="login"]):not([data-page="register"])
    [class$="-hero"],

    body[data-page]:not([data-page="login"]):not([data-page="register"])
    [class*="-hero "] {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        align-self: start !important;
    }

    /* -----------------------------------------------------
       4. Prevent mobile grids from stretching cards vertically
       ----------------------------------------------------- */

    body[data-page]:not([data-page="login"]):not([data-page="register"])
    [class$="-grid"],

    body[data-page]:not([data-page="login"]):not([data-page="register"])
    [class*="-grid "] {
        align-items: start !important;
        grid-auto-rows: max-content !important;
    }

    body[data-page]:not([data-page="login"]):not([data-page="register"])
    [class$="-list"],

    body[data-page]:not([data-page="login"]):not([data-page="register"])
    [class*="-list "] {
        align-items: start !important;
    }

    /* -----------------------------------------------------
       5. Direct page cards and sections use natural height
       Does not target dialogs, inputs, buttons, nav or pills.
       ----------------------------------------------------- */

    body[data-page]:not([data-page="login"]):not([data-page="register"])
    .container.page-with-nav
    > [class$="-card"],

    body[data-page]:not([data-page="login"]):not([data-page="register"])
    .container.page-with-nav
    > [class*="-card "],

    body[data-page]:not([data-page="login"]):not([data-page="register"])
    .container.page-with-nav
    > [class$="-section"],

    body[data-page]:not([data-page="login"]):not([data-page="register"])
    .container.page-with-nav
    > [class*="-section "] {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        align-self: start !important;
    }

    /* Cards inside content grids should not be forced taller
       than their own content. */
    body[data-page]:not([data-page="login"]):not([data-page="register"])
    [class$="-grid"]
    > [class$="-card"],

    body[data-page]:not([data-page="login"]):not([data-page="register"])
    [class$="-grid"]
    > [class*="-card "],

    body[data-page]:not([data-page="login"]):not([data-page="register"])
    [class*="-grid "]
    > [class$="-card"],

    body[data-page]:not([data-page="login"]):not([data-page="register"])
    [class*="-grid "]
    > [class*="-card "] {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        align-self: start !important;
    }

    /* -----------------------------------------------------
       6. Keep fixed bottom navigation unchanged
       ----------------------------------------------------- */

    body[data-page] .bottom-nav {
        height: auto !important;
        min-height: 0 !important;
    }
}

/* Slightly more top breathing room on Dynamic Island phones. */
@media (max-width: 700px) and (min-height: 780px) {
    body[data-page]:not([data-page="login"]):not([data-page="register"])
    > .container,

    body[data-page]:not([data-page="login"]):not([data-page="register"])
    > main,

    body[data-page]:not([data-page="login"]):not([data-page="register"])
    .container.page-with-nav,

    body[data-page]:not([data-page="login"]):not([data-page="register"])
    > .page-container,

    body[data-page]:not([data-page="login"]):not([data-page="register"])
    > .content-container {
        padding-top:
            max(
                22px,
                calc(env(safe-area-inset-top) + 14px)
            ) !important;
    }
}


/* ===== Excel 2/3/4 cascading filter mobile hotfix ===== */
body[data-page="room-settlement"] .settlement-pro-filter-grid > div,
body[data-page="room-commission-settlement"] .commission-filter-grid > div,
body[data-page="room-payroll-settlement"] .payroll-filter-grid > div {
    min-width: 0;
    max-width: 100%;
}

body[data-page="room-settlement"] .settlement-pro-filter-grid input,
body[data-page="room-settlement"] .settlement-pro-filter-grid select,
body[data-page="room-commission-settlement"] .commission-filter-grid input,
body[data-page="room-commission-settlement"] .commission-filter-grid select,
body[data-page="room-payroll-settlement"] .payroll-filter-grid input,
body[data-page="room-payroll-settlement"] .payroll-filter-grid select {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 640px) {
    body[data-page="room-settlement"] .settlement-pro-filter-grid,
    body[data-page="room-settlement"] .settlement-pro-filter-grid-three,
    body[data-page="room-commission-settlement"] .commission-filter-grid,
    body[data-page="room-commission-settlement"] .commission-filter-grid-three,
    body[data-page="room-payroll-settlement"] .payroll-filter-grid,
    body[data-page="room-payroll-settlement"] .payroll-filter-grid-three {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 9px !important;
    }

    body[data-page="room-settlement"] .settlement-pro-filter-grid-three > div:last-child,
    body[data-page="room-commission-settlement"] .commission-filter-grid-three > div:last-child,
    body[data-page="room-payroll-settlement"] .payroll-filter-grid-three > div:last-child {
        grid-column: auto !important;
    }

    body[data-page="room-settlement"] .settlement-pro-filter-form > button,
    body[data-page="room-commission-settlement"] .commission-filter-form > button,
    body[data-page="room-payroll-settlement"] .payroll-filter-form > button {
        width: 100% !important;
        max-width: 100% !important;
    }
}