@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700;800;900&display=swap');

:root {
    --navy: #0b1220;
    --navy-2: #101a2e;
    --navy-3: #15223b;
    --blue: #2563eb;
    --blue-2: #1d4ed8;
    --blue-soft: #eef5ff;
    --gold: #d4a017;
    --bg: #f4f7fb;
    --surface: #ffffff;
    --surface-2: #f8fafc;
    --text: #111827;
    --muted: #64748b;
    --border: #e2e8f0;
    --border-strong: #cbd5e1;
    --white: #ffffff;
    --success: #059669;
    --danger: #dc2626;
    --warning: #d97706;
    --info: #0284c7;
    --radius-sm: 12px;
    --radius-md: 16px;
    --radius-lg: 22px;
    --radius-xl: 28px;
    --shadow-soft: 0 12px 28px rgba(15, 23, 42, .07);
    --shadow-panel: 0 1px 2px rgba(15, 23, 42, .04), 0 16px 38px rgba(15, 23, 42, .06);
    --sidebar-width: 294px;
    --focus: 0 0 0 4px rgba(37, 99, 235, .14);
}

* { box-sizing: border-box; }
html { min-height: 100%; scroll-behavior: smooth; }
body {
    min-height: 100vh;
    margin: 0;
    font-family: Arial, Tahoma, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background:
        radial-gradient(circle at top left, rgba(37, 99, 235, .07), transparent 32%),
        var(--bg);
    color: var(--text);
    font-size: 15px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

body[dir="rtl"], html[dir="rtl"] body { letter-spacing: 0; }
a { color: inherit; text-decoration: none; }
img, svg { max-width: 100%; }
button, input, select, textarea { font: inherit; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #e8edf5; }
::-webkit-scrollbar-thumb { background: #c3ccdb; border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: #a9b6ca; }

/* Public website */
.hero {
    min-height: 100vh;
    color: white;
    padding: 28px;
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 18% 18%, rgba(59, 130, 246, .34), transparent 31%),
        radial-gradient(circle at 82% 10%, rgba(212, 160, 23, .18), transparent 27%),
        linear-gradient(135deg, #07111f, #0f172a 48%, #172554);
}
.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
    background-size: 54px 54px;
    mask-image: linear-gradient(to bottom, rgba(0,0,0,.55), transparent 75%);
    pointer-events: none;
}
.public-nav {
    max-width: 1180px;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    position: relative;
    z-index: 1;
}
.public-nav > div:last-child {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}
.hero-content {
    max-width: 880px;
    margin: 130px auto 0;
    text-align: center;
    position: relative;
    z-index: 1;
}
.badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 15px;
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 999px;
    color: #dbeafe;
    font-weight: 800;
    backdrop-filter: blur(10px);
}
.hero h1 {
    font-size: clamp(36px, 6vw, 76px);
    line-height: 1.08;
    margin: 24px 0 18px;
    letter-spacing: -.03em;
}
html[dir="rtl"] .hero h1 { letter-spacing: 0; }
.hero p {
    font-size: clamp(17px, 2.1vw, 21px);
    color: #dbeafe;
    line-height: 1.9;
    margin: 0 auto 30px;
    max-width: 760px;
}
.nav-button, .hero-button, .btn, button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 0;
    border-radius: 14px;
    padding: 12px 18px;
    background: var(--blue);
    color: white;
    font-weight: 800;
    cursor: pointer;
    min-height: 44px;
    transition: transform .15s ease, background .15s ease, border-color .15s ease, color .15s ease;
}
.nav-button:hover, .hero-button:hover, .btn:hover, button:hover { background: var(--blue-2); }
.nav-button:active, .hero-button:active, .btn:active, button:active { transform: translateY(1px); }
.btn.muted { background: #e2e8f0; color: #0f172a; }
.btn.muted:hover { background: #cbd5e1; }
.btn.small { padding: 8px 12px; min-height: 36px; font-size: 13px; }

/* Auth */
.auth-body {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 24px;
    background:
        radial-gradient(circle at top, rgba(37,99,235,.26), transparent 38%),
        radial-gradient(circle at bottom right, rgba(212,160,23,.12), transparent 30%),
        linear-gradient(135deg, #07111f, #0f172a 52%, #1e293b);
}
.language-switch {
    position: fixed;
    top: 24px;
    inset-inline-end: 28px;
    color: white;
    display: flex;
    gap: 10px;
    align-items: center;
    z-index: 4;
    padding: 9px 12px;
    border-radius: 999px;
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.14);
    backdrop-filter: blur(10px);
}
.auth-card {
    width: min(452px, calc(100% - 18px));
    background: white;
    border: 1px solid rgba(255,255,255,.72);
    border-radius: 30px;
    padding: 36px;
    box-shadow: 0 30px 80px rgba(0,0,0,.25);
}
.auth-logo, .brand-mark {
    width: 50px;
    height: 50px;
    border-radius: 17px;
    background: linear-gradient(135deg, var(--blue), #1e40af);
    color: white;
    display: grid;
    place-items: center;
    font-weight: 950;
    font-size: 24px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.22);
}
.auth-card h1 { margin: 20px 0 6px; font-size: 24px; line-height: 1.35; }
.auth-card p { color: var(--muted); margin: 0 0 24px; }

/* Forms */
label { display: block; margin: 0 0 8px; font-weight: 800; color: #0f172a; }
input, select, textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: white;
    color: var(--text);
    margin-bottom: 16px;
    font-size: 15px;
    outline: none;
    min-height: 46px;
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
textarea { min-height: 112px; resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--blue); box-shadow: var(--focus); }
input[type="checkbox"], input[type="radio"] {
    width: auto;
    min-height: 0;
    margin: 0;
    accent-color: var(--blue);
}
input[type="date"], input[type="month"], input[type="time"], input[type="number"] { direction: inherit; }
.auth-card button { width: 100%; margin-top: 6px; }
.help-text {
    display: block;
    color: var(--muted);
    margin-top: -8px;
    margin-bottom: 14px;
    font-size: 13px;
}
.form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}
.form-full { grid-column: 1 / -1; }
.form-actions {
    grid-column: 1 / -1;
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}
.compact-form { align-items: end; }
.align-end { align-self: end; }
.inline-inputs {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 210px;
    gap: 10px;
    align-items: start;
}
.inline-inputs input, .inline-inputs select { margin-bottom: 8px; }
.small-input { max-width: 150px; }
.inline-check { min-height: 48px; }

/* Dashboard layout */
.dashboard-body { display: flex; min-height: 100vh; }
.sidebar {
    width: var(--sidebar-width);
    background:
        radial-gradient(circle at top right, rgba(37,99,235,.14), transparent 36%),
        linear-gradient(180deg, #0b1220, #111827 72%, #0b1220);
    color: white;
    padding: 22px 18px;
    position: sticky;
    top: 0;
    min-height: 100vh;
    max-height: 100vh;
    overflow-y: auto;
    z-index: 30;
    flex: 0 0 var(--sidebar-width);
}
.sidebar-backdrop { display: none; }
.brand {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-bottom: 24px;
    padding: 4px 6px 16px;
    border-bottom: 1px solid rgba(255,255,255,.10);
}
.brand strong { display: block; line-height: 1.2; font-size: 18px; }
.brand span { display: block; color: #aeb9cf; font-size: 13px; margin-top: 3px; }
.public-brand { border-bottom: 0; margin-bottom: 0; padding: 0; }
.sidebar-nav { display: grid; gap: 6px; }
.menu-section { margin: 12px 0 4px; }
.menu-section:first-child { margin-top: 0; }
.nav-label {
    color: #91a0b8;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 8px 12px 5px;
}
html[dir="rtl"] .nav-label { letter-spacing: 0; }
.sidebar-nav a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 12px;
    border-radius: 14px;
    color: #dbeafe;
    min-height: 44px;
    border: 1px solid transparent;
}
.sidebar-nav a:hover { background: rgba(255,255,255,.08); color: white; }
.sidebar-nav a.active {
    background: rgba(37,99,235,.22);
    border-color: rgba(147,197,253,.20);
    color: white;
}
.nav-icon {
    width: 26px;
    height: 26px;
    flex: 0 0 26px;
    display: inline-grid;
    place-items: center;
    border-radius: 9px;
    background: rgba(255,255,255,.08);
    font-size: 14px;
}
.sidebar-nav a.active .nav-icon { background: rgba(37,99,235,.55); }
.sidebar-nav .disabled { opacity: .46; pointer-events: none; }
.main-content { flex: 1; min-width: 0; padding: 24px; overflow-x: clip; }
.topbar {
    background: rgba(255,255,255,.88);
    backdrop-filter: blur(12px);
    border: 1px solid var(--border);
    border-radius: 24px;
    padding: 18px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
    margin-bottom: 22px;
    box-shadow: var(--shadow-soft);
    position: sticky;
    top: 14px;
    z-index: 20;
}
.topbar-title { display: flex; align-items: center; gap: 12px; min-width: 0; }
.topbar h1 { margin: 0 0 3px; font-size: 22px; line-height: 1.35; }
.topbar p { margin: 0; color: var(--muted); }
.topbar-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.lang-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 8px 11px;
    border-radius: 12px;
    color: var(--muted);
    background: #f8fafc;
    border: 1px solid var(--border);
    font-weight: 800;
}
.lang-link:hover { color: var(--blue); border-color: #bfdbfe; background: #eff6ff; }
.logout { background: #f1f5f9; padding: 10px 14px; border-radius: 12px; font-weight: 800; color: #334155; }
.logout:hover { background: #e2e8f0; }
.sidebar-toggle {
    display: none;
    width: 44px;
    height: 44px;
    padding: 0;
    flex: 0 0 44px;
    border-radius: 14px;
    background: #0f172a;
    font-size: 22px;
}

.alert {
    padding: 13px 15px;
    border-radius: 16px;
    margin: 0 0 18px;
    font-weight: 800;
    border: 1px solid transparent;
}
.alert.error { background: #fff1f2; color: #991b1b; border-color: #fecdd3; }
.alert.success { background: #ecfdf5; color: #166534; border-color: #bbf7d0; }

/* Panels, cards, tables */
.cards-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 20px;
}
.stat-card, .panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 24px;
    padding: 22px;
    box-shadow: var(--shadow-panel);
}
.stat-card { position: relative; overflow: hidden; }
.stat-card::after {
    content: "";
    position: absolute;
    width: 88px;
    height: 88px;
    inset-inline-end: -28px;
    top: -28px;
    background: rgba(37,99,235,.08);
    border-radius: 50%;
}
.stat-card span { color: var(--muted); display: block; margin-bottom: 12px; font-weight: 800; }
.stat-card strong { font-size: 34px; letter-spacing: -.02em; }
.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 18px;
}
.page-header h2 { margin: 0 0 5px; font-size: 28px; letter-spacing: -.02em; }
html[dir="rtl"] .page-header h2 { letter-spacing: 0; }
.page-header p { margin: 0; color: var(--muted); }
.header-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.table-panel { overflow-x: auto; }
table { width: 100%; border-collapse: separate; border-spacing: 0; }
th, td { padding: 14px; border-bottom: 1px solid var(--border); text-align: inherit; vertical-align: middle; }
th { color: var(--muted); font-size: 13px; font-weight: 900; background: #f8fafc; }
tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: #fbfdff; }
.table-link { color: var(--blue); font-weight: 900; }
.table-link:hover { color: var(--blue-2); }
.table-link.danger-link { color: var(--danger); background: transparent; border: 0; padding: 0; cursor: pointer; font: inherit; font-weight: 900; }
.actions-cell { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.actions-cell form { display: inline; margin: 0; }
.link-danger {
    background: transparent !important;
    color: var(--danger) !important;
    padding: 0 !important;
    border-radius: 0 !important;
    min-height: auto !important;
    font-weight: 900;
}
.muted-line { display: block; color: var(--muted); font-size: 13px; margin-top: 5px; }
.empty-state { padding: 34px; text-align: center; color: var(--muted); }
.soft-separator { border: 0; border-top: 1px solid var(--border); margin: 20px 0; }
.top-gap { margin-top: 18px; }

/* Status and money */
.status { padding: 6px 10px; border-radius: 999px; font-size: 12px; font-weight: 900; display: inline-flex; align-items: center; gap: 6px; }
.status.active, .status.paid, .status.present { background: #dcfce7; color: #166534; }
.status.inactive, .status.unpaid, .status.absent { background: #fee2e2; color: #991b1b; }
.status.partial, .status.late { background: #fef3c7; color: #92400e; }
.status.excused { background: #e0f2fe; color: #075985; }
.status.teacher, .status.school_admin, .status.accountant { background: var(--blue-soft); color: #1e40af; }
.money { font-weight: 950; }
.money.ok { color: var(--success); }
.money.due { color: var(--danger); }
.pill { display: inline-flex; border-radius: 999px; padding: 6px 10px; font-size: 12px; font-weight: 900; margin-bottom: 8px; }
.muted-pill { background: #f1f5f9; color: #475569; }

/* Receipts and statements */
.receipt-card, .statement-card {
    background: white;
    border: 1px solid var(--border);
    border-radius: 28px;
    padding: 32px;
    max-width: 980px;
    margin: 0 auto 22px;
    box-shadow: var(--shadow-panel);
}
.receipt-head { display: flex; justify-content: space-between; gap: 20px; border-bottom: 1px solid var(--border); padding-bottom: 20px; margin-bottom: 22px; }
.brand-line { color: var(--blue); font-weight: 950; letter-spacing: .2px; margin-bottom: 8px; }
.receipt-head h2 { margin: 0 0 8px; }
.receipt-head p { margin: 0; color: var(--muted); }
.receipt-number { min-width: 220px; background: var(--blue-soft); border-radius: 20px; padding: 16px; }
.receipt-number span, .receipt-grid span, .receipt-total span { display: block; color: var(--muted); margin-bottom: 7px; font-size: 13px; }
.receipt-number strong { font-size: 20px; }
.receipt-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.receipt-grid > div { border: 1px solid var(--border); border-radius: 16px; padding: 14px; background: #fff; }
.receipt-total { margin: 22px 0; padding: 22px; border-radius: 22px; background: linear-gradient(135deg, #eff6ff, #ffffff); border: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.receipt-total strong { font-size: 34px; color: var(--blue); }
.receipt-notes { padding: 16px; border-radius: 16px; background: #f8fafc; }
.signature-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 54px; }
.signature-row span { border-top: 1px solid var(--text); padding-top: 12px; color: var(--muted); }
.statement-summary { margin: 22px 0; }
.statement-card h3 { margin-top: 28px; }

/* Salary and permissions */
.salary-preview, .employee-report-head { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 4px; }
.salary-preview > div, .employee-report-head > div { border: 1px solid var(--border); background: #f8fafc; border-radius: 18px; padding: 16px; }
.salary-preview span, .employee-report-head span { display: block; color: var(--muted); font-size: 13px; margin-bottom: 8px; }
.salary-preview strong, .employee-report-head strong { font-size: 20px; }
.salary-preview > div:last-child { background: var(--blue-soft); }
.salary-preview > div:last-child strong { color: var(--blue); }
.permissions-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
.check-card { display: flex; gap: 10px; align-items: center; border: 1px solid var(--border); border-radius: 14px; padding: 12px 14px; margin: 0; background: #fbfdff; font-weight: 800; cursor: pointer; }
.check-card:hover { border-color: #bfdbfe; background: #f8fbff; }
.permissions-box { border-top: 1px solid var(--border); padding-top: 18px; margin-top: 4px; }

/* Reports */
.reports-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.report-card { display: block; background: white; border: 1px solid var(--border); border-radius: 24px; padding: 24px; min-height: 170px; box-shadow: var(--shadow-panel); }
.report-card span { display: inline-flex; padding: 7px 12px; background: var(--blue-soft); color: var(--blue); border-radius: 999px; font-weight: 900; font-size: 13px; margin-bottom: 16px; }
.report-card strong { display: block; font-size: 20px; margin-bottom: 10px; }
.report-card p { margin: 0; color: var(--muted); line-height: 1.7; }

/* Attendance */
.date-switcher { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.attendance-live-summary { margin-bottom: 18px; }
.attendance-panel { overflow: visible; }
.attendance-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding-bottom: 16px; border-bottom: 1px solid var(--border); margin-bottom: 16px; }
.attendance-list { display: grid; gap: 14px; }
.attendance-row-card { border: 1px solid var(--border); background: #fff; border-radius: 22px; padding: 18px; display: grid; grid-template-columns: 1.1fr 1.4fr; gap: 16px; align-items: start; box-shadow: 0 8px 22px rgba(15,23,42,.04); }
.attendance-person strong { display: block; font-size: 16px; }
.attendance-status-group { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.status-choice { cursor: pointer; border: 1px solid var(--border); background: #f8fafc; border-radius: 14px; padding: 11px 8px; text-align: center; font-weight: 900; transition: border-color .15s ease, background .15s ease, color .15s ease; }
.status-choice input { display: none; }
.status-choice.active.present { background: #dcfce7; border-color: #86efac; color: #166534; }
.status-choice.active.absent { background: #fee2e2; border-color: #fca5a5; color: #991b1b; }
.status-choice.active.late { background: #fef3c7; border-color: #fcd34d; color: #92400e; }
.status-choice.active.excused { background: #e0f2fe; border-color: #7dd3fc; color: #075985; }
.attendance-details-grid { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; padding-top: 14px; border-top: 1px dashed var(--border); }
.attendance-details-grid label { display: block; margin-bottom: 7px; color: var(--muted); font-size: 12px; font-weight: 900; }
.attendance-details-grid .wide { grid-column: span 2; }
.sticky-save-bar { position: sticky; bottom: 14px; margin-top: 18px; background: rgba(255,255,255,.95); backdrop-filter: blur(12px); border: 1px solid var(--border); border-radius: 22px; padding: 14px 16px; display: flex; justify-content: space-between; gap: 16px; align-items: center; box-shadow: 0 12px 34px rgba(15,23,42,.10); }
.sticky-save-bar span { display: block; color: var(--muted); margin-top: 4px; font-size: 13px; }
.detailed-report-table { overflow-x: auto; }
.detailed-report-table table { min-width: 980px; }

/* Expenses, portals, categories */
.category-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
.category-card { border: 1px solid var(--border); background: #f8fafc; border-radius: 18px; padding: 16px; }
.category-card span { display: block; color: var(--muted); font-size: 13px; margin-bottom: 8px; }
.category-card strong { font-size: 20px; color: var(--danger); }
.portal-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-bottom: 20px; }
.portal-card p { color: var(--muted); margin: 10px 0 18px; }
.portal-summary-list p { margin: 9px 0; }
.chips-row { display: flex; gap: 10px; flex-wrap: wrap; }
.chip { background: #eef2ff; color: #1e40af; padding: 9px 13px; border-radius: 999px; font-weight: 900; }

/* Responsive */
@media (max-width: 1180px) {
    .cards-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .reports-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .category-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1050px) {
    :root { --sidebar-width: 292px; }
    .dashboard-body { display: block; }
    .sidebar {
        position: fixed;
        inset-block: 0;
        inset-inline-start: 0;
        transform: translateX(-105%);
        transition: transform .2s ease;
        box-shadow: 0 24px 60px rgba(0,0,0,.28);
    }
    html[dir="rtl"] .sidebar { transform: translateX(105%); }
    body.sidebar-open .sidebar { transform: translateX(0); }
    .sidebar-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(15,23,42,.52);
        z-index: 25;
        opacity: 0;
        pointer-events: none;
        transition: opacity .2s ease;
    }
    body.sidebar-open .sidebar-backdrop { opacity: 1; pointer-events: auto; }
    .sidebar-toggle { display: inline-flex; }
    .main-content { padding: 18px; }
    .topbar { top: 10px; align-items: flex-start; }
    .topbar-title { align-items: flex-start; }
    .attendance-row-card { grid-template-columns: 1fr; }
    .attendance-details-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .attendance-details-grid .wide { grid-column: span 2; }
    .inline-inputs, .salary-preview, .employee-report-head { grid-template-columns: 1fr; }
    .permissions-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
    body { font-size: 14px; }
    .hero { padding: 20px; }
    .public-nav { display: grid; gap: 18px; }
    .hero-content { margin-top: 86px; }
    .main-content { padding: 14px; }
    .topbar { display: grid; gap: 14px; padding: 15px; border-radius: 20px; }
    .topbar-actions { justify-content: flex-start; }
    html[dir="rtl"] .topbar-actions { justify-content: flex-end; }
    .page-header { display: grid; align-items: start; }
    .form-grid { grid-template-columns: 1fr; }
    .cards-grid, .reports-grid, .category-grid, .portal-grid { grid-template-columns: 1fr; }
    .receipt-head { display: grid; }
    .receipt-number { min-width: 0; }
    .receipt-grid { grid-template-columns: 1fr; }
    .receipt-total { display: grid; }
    .signature-row { grid-template-columns: 1fr; }
    .panel, .stat-card, .receipt-card, .statement-card { padding: 18px; border-radius: 20px; }
    th, td { padding: 12px; }
    table { min-width: 720px; }
    .table-panel table { min-width: 760px; }
    .permissions-grid { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
    .attendance-status-group, .attendance-details-grid { grid-template-columns: 1fr; }
    .attendance-details-grid .wide { grid-column: span 1; }
    .sticky-save-bar { position: static; flex-direction: column; align-items: stretch; }
    .auth-card { padding: 26px; border-radius: 24px; }
    .language-switch { position: absolute; top: 14px; inset-inline-end: 14px; }
}

@media print {
    body { background: white; }
    .sidebar, .topbar, .no-print, .alert, .sticky-save-bar, .sidebar-backdrop { display: none !important; }
    .dashboard-body { display: block; }
    .main-content { padding: 0; overflow: visible; }
    .receipt-card, .statement-card { border: none; border-radius: 0; max-width: none; padding: 0; margin: 0; box-shadow: none; }
    .stat-card, .panel, .report-card { box-shadow: none; }
    a { color: inherit; }
    .attendance-row-card { break-inside: avoid; }
}

/* ===== v12.1 enhanced professional theme ===== */
:root {
    --navy: #081426;
    --navy-2: #0d1b31;
    --navy-3: #132540;
    --blue: #2563eb;
    --blue-2: #1d4ed8;
    --blue-soft: #eaf2ff;
    --gold: #f59e0b;
    --bg: #f3f7fc;
    --surface: #ffffff;
    --surface-2: #f8fbff;
    --surface-3: #eef4fb;
    --text: #0f172a;
    --muted: #64748b;
    --border: #dbe5f0;
    --border-strong: #c7d5e4;
    --white: #ffffff;
    --success: #059669;
    --danger: #dc2626;
    --warning: #d97706;
    --info: #0284c7;
    --radius-sm: 12px;
    --radius-md: 16px;
    --radius-lg: 22px;
    --radius-xl: 28px;
    --shadow-soft: 0 18px 40px rgba(15, 23, 42, .06);
    --shadow-panel: 0 10px 35px rgba(15, 23, 42, .07);
    --focus: 0 0 0 4px rgba(37, 99, 235, .18);
    --sidebar-bg: linear-gradient(180deg, #0a1325 0%, #0f1b32 55%, #0c1427 100%);
    --sidebar-hover: rgba(255,255,255,.08);
    --sidebar-active: rgba(37,99,235,.24);
    --sidebar-text: #dce8ff;
    --sidebar-muted: #8ea4c8;
    --glass: rgba(255,255,255,.8);
}

html[data-theme="dark"] {
    --navy: #d7e6ff;
    --navy-2: #c9dbff;
    --navy-3: #adc7ff;
    --blue: #60a5fa;
    --blue-2: #3b82f6;
    --blue-soft: rgba(96,165,250,.16);
    --bg: #09111f;
    --surface: #0f172a;
    --surface-2: #111c31;
    --surface-3: #16233b;
    --text: #e5eefb;
    --muted: #94a3b8;
    --border: #22314c;
    --border-strong: #324766;
    --white: #ffffff;
    --success: #34d399;
    --danger: #f87171;
    --warning: #fbbf24;
    --info: #38bdf8;
    --shadow-soft: 0 16px 32px rgba(2, 6, 23, .34);
    --shadow-panel: 0 18px 42px rgba(2, 6, 23, .36);
    --focus: 0 0 0 4px rgba(96, 165, 250, .22);
    --sidebar-bg: linear-gradient(180deg, #050c17 0%, #09111f 52%, #06101d 100%);
    --sidebar-hover: rgba(148,163,184,.11);
    --sidebar-active: rgba(96,165,250,.18);
    --sidebar-text: #e5eefb;
    --sidebar-muted: #8fa4c7;
    --glass: rgba(15,23,42,.8);
}

body {
    background:
        radial-gradient(circle at top left, rgba(37, 99, 235, .09), transparent 32%),
        radial-gradient(circle at bottom right, rgba(14, 165, 233, .05), transparent 24%),
        var(--bg);
    color: var(--text);
}
html[data-theme="dark"] body {
    background:
        radial-gradient(circle at top left, rgba(59,130,246,.12), transparent 32%),
        radial-gradient(circle at bottom right, rgba(37,99,235,.10), transparent 26%),
        var(--bg);
}

/* general surface refinements */
.topbar,
.panel,
.stat-card,
.report-card,
.receipt-card,
.statement-card,
.attendance-row-card,
.category-card,
.receipt-grid > div,
.check-card,
.sticky-save-bar,
.auth-card,
.report-card,
.portal-card,
.receipt-number,
.receipt-notes,
.category-card,
input,
select,
textarea,
th {
    transition: background .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease;
}

.sidebar {
    background: var(--sidebar-bg);
    color: var(--sidebar-text);
    border-inline-end: 1px solid rgba(255,255,255,.04);
}
.brand {
    border-bottom-color: rgba(255,255,255,.08);
}
.brand-mark,
.auth-logo {
    background: linear-gradient(135deg, #2563eb, #0ea5e9 55%, #1d4ed8);
    box-shadow: 0 12px 24px rgba(37,99,235,.22), inset 0 1px 0 rgba(255,255,255,.25);
}
.brand span { color: var(--sidebar-muted); }
.nav-label { color: var(--sidebar-muted); }
.sidebar-nav a {
    color: var(--sidebar-text);
    border-radius: 16px;
}
.sidebar-nav a:hover { background: var(--sidebar-hover); }
.sidebar-nav a.active {
    background: var(--sidebar-active);
    border-color: rgba(255,255,255,.08);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.nav-icon {
    background: rgba(255,255,255,.09);
    color: #fff;
}
.sidebar-nav a.active .nav-icon { background: rgba(37,99,235,.7); }

.main-content { padding: 24px; }
.topbar {
    background: var(--glass);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-soft);
}
.topbar h1 { font-size: 23px; }
.topbar-actions { gap: 12px; }

.lang-switcher {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 5px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
}
.switcher-icon {
    width: 34px;
    height: 34px;
    display: inline-grid;
    place-items: center;
    border-radius: 999px;
    color: var(--blue);
    background: var(--blue-soft);
    font-size: 14px;
}
.lang-link {
    min-height: 34px;
    padding: 8px 14px;
    border-radius: 999px;
    border: 0;
    background: transparent;
    color: var(--muted);
    font-weight: 900;
}
.lang-link:hover {
    background: var(--surface-3);
    color: var(--text);
}
.lang-link.active {
    background: linear-gradient(135deg, var(--blue), var(--blue-2));
    color: white;
    box-shadow: 0 8px 20px rgba(37,99,235,.22);
}
.theme-toggle,
.logout {
    min-height: 44px;
    padding: 10px 16px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--text);
    font-weight: 900;
    box-shadow: none;
}
.theme-toggle:hover,
.logout:hover {
    background: var(--surface-3);
    border-color: var(--border-strong);
}
.theme-toggle {
    gap: 10px;
}
.theme-toggle-icon {
    width: 24px;
    height: 24px;
    display: inline-grid;
    place-items: center;
    border-radius: 50%;
    background: var(--blue-soft);
    color: var(--blue);
    font-size: 13px;
}
.light-on-dark {
    background: rgba(255,255,255,.12);
    border-color: rgba(255,255,255,.14);
    color: #fff;
    backdrop-filter: blur(8px);
}
.light-on-dark .theme-toggle-icon {
    background: rgba(255,255,255,.18);
    color: #fff;
}

.hero {
    background:
        radial-gradient(circle at top right, rgba(96,165,250,.2), transparent 28%),
        linear-gradient(135deg, #07111f, #0d1730 50%, #132540 100%);
}
.public-nav-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.nav-button,
.hero-button,
.btn,
button {
    border-radius: 16px;
}
.nav-button,
.hero-button,
.btn,
button:not(.theme-toggle):not(.sidebar-toggle) {
    background: linear-gradient(135deg, var(--blue), var(--blue-2));
    box-shadow: 0 14px 26px rgba(37,99,235,.18);
}
.btn.muted {
    background: var(--surface-3);
    color: var(--text);
    box-shadow: none;
}
.auth-body {
    background:
        radial-gradient(circle at top, rgba(37,99,235,.22), transparent 38%),
        radial-gradient(circle at bottom right, rgba(14,165,233,.14), transparent 32%),
        linear-gradient(135deg, #07111f, #0f172a 52%, #132540);
}
html[data-theme="dark"] .auth-body {
    background:
        radial-gradient(circle at top, rgba(59,130,246,.18), transparent 38%),
        radial-gradient(circle at bottom right, rgba(96,165,250,.1), transparent 32%),
        linear-gradient(135deg, #020817, #07111f 52%, #0a1424);
}
.toolbar-floating {
    position: fixed;
    top: 24px;
    inset-inline-end: 28px;
    display: flex;
    gap: 12px;
    align-items: center;
    z-index: 4;
}
.language-switch {
    background: transparent;
    border: 0;
    padding: 0;
    backdrop-filter: none;
}
.auth-card {
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-panel);
}

label { color: var(--text); }
input, select, textarea {
    background: var(--surface);
    border-color: var(--border);
    color: var(--text);
}
input::placeholder,
textarea::placeholder { color: var(--muted); }
input:focus, select:focus, textarea:focus { background: var(--surface); }

.panel,
.stat-card,
.report-card,
.receipt-card,
.statement-card,
.auth-card,
.portal-card { background: var(--surface); border-color: var(--border); }
.stat-card::after { background: rgba(37,99,235,.08); }
.page-header h2, .topbar h1 { color: var(--text); }
.page-header p, .topbar p, .muted-line, .help-text, .receipt-head p, .report-card p, .portal-card p { color: var(--muted); }

th {
    background: var(--surface-2);
    color: var(--muted);
}
tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: var(--surface-2); }
.table-link { color: var(--blue); }

.receipt-card, .statement-card { background: var(--surface); }
.receipt-number,
.receipt-total,
.receipt-notes,
.salary-preview > div,
.employee-report-head > div,
.category-card,
.check-card,
.status-choice,
.sticky-save-bar { background: var(--surface-2); border-color: var(--border); }
.receipt-total {
    background: linear-gradient(135deg, var(--blue-soft), var(--surface));
}
.receipt-total strong,
.salary-preview > div:last-child strong { color: var(--blue); }
.report-card span,
.chip,
.muted-pill {
    background: var(--blue-soft);
    color: var(--blue);
}
.chip { border: 1px solid transparent; }
.status.teacher, .status.school_admin, .status.accountant { background: var(--blue-soft); color: var(--blue); }

.sidebar-toggle {
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--text);
    box-shadow: none;
}
.sidebar-toggle:hover { background: var(--surface-3); }

html[data-theme="dark"] .topbar,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .stat-card,
html[data-theme="dark"] .report-card,
html[data-theme="dark"] .receipt-card,
html[data-theme="dark"] .statement-card,
html[data-theme="dark"] .attendance-row-card,
html[data-theme="dark"] .auth-card,
html[data-theme="dark"] .receipt-grid > div,
html[data-theme="dark"] .portal-card,
html[data-theme="dark"] .report-card,
html[data-theme="dark"] .sticky-save-bar,
html[data-theme="dark"] .table-panel,
html[data-theme="dark"] .receipt-head,
html[data-theme="dark"] .salary-preview > div,
html[data-theme="dark"] .employee-report-head > div,
html[data-theme="dark"] .category-card,
html[data-theme="dark"] .receipt-number,
html[data-theme="dark"] .receipt-notes,
html[data-theme="dark"] .check-card,
html[data-theme="dark"] .status-choice,
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
    background: var(--surface);
    border-color: var(--border);
    color: var(--text);
}
html[data-theme="dark"] th,
html[data-theme="dark"] .lang-switcher,
html[data-theme="dark"] .theme-toggle,
html[data-theme="dark"] .logout,
html[data-theme="dark"] .sidebar-toggle,
html[data-theme="dark"] .receipt-total,
html[data-theme="dark"] .muted-pill {
    background: var(--surface-2);
    border-color: var(--border);
    color: var(--text);
}
html[data-theme="dark"] .switcher-icon,
html[data-theme="dark"] .theme-toggle-icon,
html[data-theme="dark"] .report-card span,
html[data-theme="dark"] .chip,
html[data-theme="dark"] .status.teacher,
html[data-theme="dark"] .status.school_admin,
html[data-theme="dark"] .status.accountant {
    background: var(--blue-soft);
    color: var(--blue);
}
html[data-theme="dark"] .lang-link:hover,
html[data-theme="dark"] .theme-toggle:hover,
html[data-theme="dark"] .logout:hover,
html[data-theme="dark"] .sidebar-toggle:hover {
    background: var(--surface-3);
}
html[data-theme="dark"] .lang-link.active {
    color: #081426;
    background: linear-gradient(135deg, #93c5fd, #60a5fa);
    box-shadow: 0 10px 24px rgba(96,165,250,.18);
}
html[data-theme="dark"] .nav-button,
html[data-theme="dark"] .hero-button,
html[data-theme="dark"] .btn,
html[data-theme="dark"] button:not(.theme-toggle):not(.sidebar-toggle) {
    background: linear-gradient(135deg, #60a5fa, #3b82f6);
    color: #06101d;
}
html[data-theme="dark"] .btn.muted {
    background: var(--surface-2);
    color: var(--text);
}
html[data-theme="dark"] tbody tr:hover td { background: rgba(148,163,184,.06); }
html[data-theme="dark"] .alert.success { background: rgba(16,185,129,.12); color: #9ff0ca; border-color: rgba(52,211,153,.22); }
html[data-theme="dark"] .alert.error { background: rgba(239,68,68,.12); color: #fecaca; border-color: rgba(248,113,113,.22); }
html[data-theme="dark"] .status.active,
html[data-theme="dark"] .status.paid,
html[data-theme="dark"] .status.present { background: rgba(16,185,129,.14); color: #9ff0ca; }
html[data-theme="dark"] .status.inactive,
html[data-theme="dark"] .status.unpaid,
html[data-theme="dark"] .status.absent { background: rgba(239,68,68,.16); color: #fecaca; }
html[data-theme="dark"] .status.partial,
html[data-theme="dark"] .status.late { background: rgba(245,158,11,.16); color: #fde68a; }
html[data-theme="dark"] .status.excused { background: rgba(56,189,248,.14); color: #bae6fd; }
html[data-theme="dark"] .status-choice.active.present { background: rgba(16,185,129,.14); border-color: rgba(52,211,153,.25); color: #9ff0ca; }
html[data-theme="dark"] .status-choice.active.absent { background: rgba(239,68,68,.16); border-color: rgba(248,113,113,.22); color: #fecaca; }
html[data-theme="dark"] .status-choice.active.late { background: rgba(245,158,11,.16); border-color: rgba(251,191,36,.2); color: #fde68a; }
html[data-theme="dark"] .status-choice.active.excused { background: rgba(56,189,248,.14); border-color: rgba(56,189,248,.22); color: #bae6fd; }
html[data-theme="dark"] .receipt-head,
html[data-theme="dark"] .soft-separator,
html[data-theme="dark"] th,
html[data-theme="dark"] td,
html[data-theme="dark"] .attendance-toolbar,
html[data-theme="dark"] .attendance-details-grid,
html[data-theme="dark"] .brand { border-color: var(--border); }

@media (max-width: 760px) {
    .public-nav-actions,
    .toolbar-floating,
    .topbar-actions {
        width: 100%;
    }
    .public-nav-actions,
    .toolbar-floating,
    .topbar-actions {
        justify-content: flex-start;
    }
    html[dir="rtl"] .public-nav-actions,
    html[dir="rtl"] .toolbar-floating,
    html[dir="rtl"] .topbar-actions {
        justify-content: flex-end;
    }
    .lang-switcher {
        width: auto;
        max-width: 100%;
    }
    .theme-toggle,
    .logout { width: auto; }
}
@media (max-width: 620px) {
    .toolbar-floating {
        position: absolute;
        top: 14px;
        inset-inline-end: 14px;
        left: 14px;
        right: 14px;
        flex-wrap: wrap;
    }
    .lang-switcher {
        flex: 1 1 auto;
        justify-content: space-between;
    }
}

/* ===== v12.2 action icons + richer colors + premium language switcher ===== */
:root {
    --blue: #4f46e5;
    --blue-2: #06b6d4;
    --blue-soft: #eef2ff;
    --navy: #0f172a;
    --navy-2: #172554;
    --navy-3: #1e293b;
    --gold: #f59e0b;
    --success: #10b981;
    --danger: #ef4444;
    --warning: #f59e0b;
    --info: #06b6d4;
    --focus: 0 0 0 4px rgba(79, 70, 229, .18);
}
html[data-theme="dark"] {
    --blue: #818cf8;
    --blue-2: #22d3ee;
    --blue-soft: rgba(129,140,248,.16);
    --success: #34d399;
    --danger: #f87171;
    --warning: #fbbf24;
    --info: #22d3ee;
    --focus: 0 0 0 4px rgba(129, 140, 248, .22);
}

.brand-mark,
.auth-logo {
    background: linear-gradient(135deg, var(--blue), var(--blue-2) 65%, #2563eb);
}
.nav-button,
.hero-button,
.btn,
button:not(.theme-toggle):not(.sidebar-toggle):not(.link-danger):not(.danger-link) {
    background: linear-gradient(135deg, var(--blue), var(--blue-2));
}
html[data-theme="dark"] .nav-button,
html[data-theme="dark"] .hero-button,
html[data-theme="dark"] .btn,
html[data-theme="dark"] button:not(.theme-toggle):not(.sidebar-toggle):not(.link-danger):not(.danger-link) {
    background: linear-gradient(135deg, var(--blue), var(--blue-2));
    color: #07111f;
}

/* premium language buttons */
.lang-switcher {
    padding: 6px;
    gap: 8px;
    background:
        linear-gradient(180deg, rgba(255,255,255,.82), rgba(255,255,255,.62)),
        var(--surface-2);
    border: 1px solid rgba(79,70,229,.14);
    box-shadow: 0 10px 24px rgba(15, 23, 42, .08), inset 0 1px 0 rgba(255,255,255,.78);
}
html[data-theme="dark"] .lang-switcher {
    background: linear-gradient(180deg, rgba(15,23,42,.92), rgba(15,23,42,.8));
    border-color: rgba(129,140,248,.22);
    box-shadow: 0 14px 30px rgba(2,6,23,.34), inset 0 1px 0 rgba(255,255,255,.03);
}
.switcher-icon {
    width: 38px;
    height: 38px;
    background: linear-gradient(135deg, var(--blue-soft), rgba(6,182,212,.14));
    color: var(--blue);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.65);
}
.lang-link {
    min-height: 38px;
    padding: 8px 16px;
    font-size: 14px;
    letter-spacing: .01em;
}
html[dir="rtl"] .lang-link { letter-spacing: 0; }
.lang-link.active {
    background: linear-gradient(135deg, var(--blue), var(--blue-2));
    color: #fff;
    box-shadow: 0 10px 22px rgba(79,70,229,.24);
}
html[data-theme="dark"] .lang-link.active {
    color: #081426;
    box-shadow: 0 10px 24px rgba(129,140,248,.2);
}

/* table and action buttons */
.table-panel {
    border-radius: 24px;
    border: 1px solid var(--border);
    background: linear-gradient(180deg, rgba(255,255,255,.28), rgba(255,255,255,0)), var(--surface);
    box-shadow: var(--shadow-panel);
}
html[data-theme="dark"] .table-panel {
    background: linear-gradient(180deg, rgba(129,140,248,.03), rgba(15,23,42,0)), var(--surface);
}
.table-panel table { overflow: hidden; }
th {
    background: linear-gradient(180deg, rgba(79,70,229,.06), rgba(6,182,212,.03));
    color: var(--text);
    font-size: 13px;
}
html[data-theme="dark"] th {
    background: linear-gradient(180deg, rgba(129,140,248,.08), rgba(34,211,238,.03));
}

.actions-cell {
    gap: 10px;
}
.actions-cell .table-link,
.actions-cell .link-danger,
.actions-cell .danger-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px !important;
    min-height: 40px !important;
    border-radius: 14px !important;
    font-weight: 800;
    line-height: 1;
    border: 1px solid var(--border) !important;
    background: var(--surface-2) !important;
    color: var(--text) !important;
    box-shadow: none !important;
    text-decoration: none;
}
.actions-cell .table-link:hover,
.actions-cell .link-danger:hover,
.actions-cell .danger-link:hover {
    transform: translateY(-1px);
    border-color: var(--border-strong) !important;
    background: var(--surface-3) !important;
}
.actions-cell .table-link::before,
.actions-cell .link-danger::before,
.actions-cell .danger-link::before {
    width: 28px;
    height: 28px;
    display: inline-grid;
    place-items: center;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 900;
    flex: 0 0 28px;
}
.actions-cell a[href*="/edit"]::before { content: "✎"; background: rgba(79,70,229,.12); color: var(--blue); }
.actions-cell a[href*="student_id="]::before,
.actions-cell a[href*="statement"]::before { content: "▤"; background: rgba(6,182,212,.12); color: var(--info); }
.actions-cell a[href*="documents"]::before { content: "▣"; background: rgba(245,158,11,.14); color: var(--gold); }
.actions-cell a[href*="download"]::before,
.actions-cell a[href*="receipt"]::before,
.actions-cell a[href*="print"]::before { content: "⤓"; background: rgba(16,185,129,.12); color: var(--success); }
.actions-cell .link-danger::before,
.actions-cell .danger-link::before,
.actions-cell form .link-danger::before,
.actions-cell form .danger-link::before { content: "⌫"; background: rgba(239,68,68,.12); color: var(--danger); }
.actions-cell .link-danger,
.actions-cell .danger-link { color: var(--danger) !important; }
.actions-cell .link-danger:hover,
.actions-cell .danger-link:hover {
    background: rgba(239,68,68,.06) !important;
    border-color: rgba(239,68,68,.22) !important;
}
html[data-theme="dark"] .actions-cell .table-link,
html[data-theme="dark"] .actions-cell .link-danger,
html[data-theme="dark"] .actions-cell .danger-link {
    background: var(--surface-2) !important;
    border-color: var(--border) !important;
}
html[data-theme="dark"] .actions-cell .table-link:hover,
html[data-theme="dark"] .actions-cell .link-danger:hover,
html[data-theme="dark"] .actions-cell .danger-link:hover {
    background: var(--surface-3) !important;
}

/* more premium status colors */
.status.active, .status.paid, .status.present {
    background: linear-gradient(180deg, rgba(16,185,129,.18), rgba(16,185,129,.12));
    color: #047857;
}
.status.inactive, .status.unpaid, .status.absent {
    background: linear-gradient(180deg, rgba(239,68,68,.18), rgba(239,68,68,.1));
    color: #b91c1c;
}
.status.partial, .status.late {
    background: linear-gradient(180deg, rgba(245,158,11,.2), rgba(245,158,11,.1));
    color: #b45309;
}
.status.excused {
    background: linear-gradient(180deg, rgba(6,182,212,.18), rgba(6,182,212,.1));
    color: #0f766e;
}
html[data-theme="dark"] .status.active, html[data-theme="dark"] .status.paid, html[data-theme="dark"] .status.present { color: #9ff0ca; }
html[data-theme="dark"] .status.inactive, html[data-theme="dark"] .status.unpaid, html[data-theme="dark"] .status.absent { color: #fecaca; }
html[data-theme="dark"] .status.partial, html[data-theme="dark"] .status.late { color: #fde68a; }
html[data-theme="dark"] .status.excused { color: #a5f3fc; }

/* secondary text links not inside actions */

/* ===== v12.3 premium visual refresh ===== */
:root {
    --blue: #5b5cf0;
    --blue-2: #15b8d6;
    --blue-soft: #eef0ff;
    --navy: #0f1f4d;
    --navy-2: #121c39;
    --gold: #f59e0b;
    --success: #10b981;
    --danger: #ef4444;
    --sidebar-bg: linear-gradient(180deg, #0d1836 0%, #101a3a 45%, #0a1630 100%);
    --sidebar-hover: rgba(255,255,255,.08);
    --sidebar-active: linear-gradient(135deg, rgba(91,92,240,.24), rgba(21,184,214,.16));
    --glass: rgba(255,255,255,.82);
    --shadow-soft: 0 18px 40px rgba(15, 23, 42, .08);
    --shadow-panel: 0 18px 44px rgba(15, 23, 42, .07);
    --border-strong: rgba(91,92,240,.34);
}
html[data-theme="dark"] {
    --blue: #8c91ff;
    --blue-2: #35d2ea;
    --blue-soft: rgba(140,145,255,.14);
    --sidebar-bg: linear-gradient(180deg, #071120 0%, #0b1630 45%, #081120 100%);
    --sidebar-hover: rgba(255,255,255,.05);
    --sidebar-active: linear-gradient(135deg, rgba(140,145,255,.18), rgba(53,210,234,.1));
    --glass: rgba(12,19,33,.76);
    --shadow-soft: 0 18px 46px rgba(2, 6, 23, .34);
    --shadow-panel: 0 18px 46px rgba(2, 6, 23, .28);
    --border-strong: rgba(140,145,255,.35);
}

body,
.dashboard-body,
.auth-body {
    background-image:
        radial-gradient(circle at 0% 0%, rgba(91,92,240,.08), transparent 26%),
        radial-gradient(circle at 100% 0%, rgba(21,184,214,.08), transparent 24%);
}
html[data-theme="dark"] body,
html[data-theme="dark"] .dashboard-body,
html[data-theme="dark"] .auth-body {
    background-image:
        radial-gradient(circle at 0% 0%, rgba(140,145,255,.08), transparent 24%),
        radial-gradient(circle at 100% 0%, rgba(53,210,234,.06), transparent 22%);
}

.sidebar {
    background: var(--sidebar-bg);
    box-shadow: inset -1px 0 0 rgba(255,255,255,.03), 24px 0 50px rgba(2,6,23,.14);
}
.brand {
    padding-bottom: 20px;
}
.brand-mark,
.auth-logo {
    width: 54px;
    height: 54px;
    border-radius: 18px;
    background: linear-gradient(135deg, #6d6dff 0%, #31d5e8 65%, #4f46e5 100%);
    box-shadow: 0 16px 34px rgba(79,70,229,.28), inset 0 1px 0 rgba(255,255,255,.34);
}
.brand strong {
    font-size: 19px;
    letter-spacing: -.02em;
}
.nav-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .12em;
}
html[dir="rtl"] .nav-label { letter-spacing: .03em; }
.sidebar-nav a {
    min-height: 52px;
    border: 1px solid transparent;
    border-radius: 18px;
    padding-inline: 12px;
}
.sidebar-nav a:hover {
    transform: translateY(-1px);
}
.sidebar-nav a.active {
    box-shadow: 0 14px 26px rgba(8,15,33,.16), inset 0 1px 0 rgba(255,255,255,.08);
}
.nav-icon {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    display: inline-grid;
    place-items: center;
    font-size: 15px;
    background: linear-gradient(135deg, rgba(255,255,255,.16), rgba(255,255,255,.08));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
}
.sidebar-nav a.active .nav-icon {
    background: linear-gradient(135deg, rgba(91,92,240,.95), rgba(21,184,214,.88));
    color: white;
}

.topbar {
    border-radius: 28px;
    background: linear-gradient(180deg, rgba(255,255,255,.88), rgba(255,255,255,.72));
    backdrop-filter: blur(16px);
}
html[data-theme="dark"] .topbar {
    background: linear-gradient(180deg, rgba(12,19,33,.86), rgba(12,19,33,.72));
}
.topbar h1 {
    font-size: 24px;
    letter-spacing: -.03em;
}
html[dir="rtl"] .topbar h1 { letter-spacing: 0; }
.topbar p { color: var(--muted); }

/* premium language switcher */
.premium-switcher {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px;
    border-radius: 20px;
    border: 1px solid rgba(91,92,240,.12);
    background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.72));
    box-shadow: 0 14px 34px rgba(15,23,42,.08), inset 0 1px 0 rgba(255,255,255,.72);
}
html[data-theme="dark"] .premium-switcher {
    border-color: rgba(140,145,255,.18);
    background: linear-gradient(180deg, rgba(17,24,39,.9), rgba(15,23,42,.78));
    box-shadow: 0 16px 34px rgba(2,6,23,.34), inset 0 1px 0 rgba(255,255,255,.03);
}
.premium-switcher.light-on-dark {
    background: linear-gradient(180deg, rgba(255,255,255,.1), rgba(255,255,255,.06));
    border-color: rgba(255,255,255,.12);
}
.switcher-badge {
    display: inline-flex;
    flex-direction: column;
    gap: 2px;
    padding: 5px 7px;
    min-width: 44px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(91,92,240,.1), rgba(21,184,214,.08));
    color: var(--blue);
    font-size: 10px;
    font-weight: 900;
    line-height: 1.05;
    text-align: center;
}
.premium-switcher.light-on-dark .switcher-badge {
    background: rgba(255,255,255,.14);
    color: #fff;
}
.lang-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 42px;
    padding: 9px 14px;
    border-radius: 15px;
    font-weight: 800;
    color: var(--muted);
}
.lang-code {
    width: 28px;
    height: 28px;
    border-radius: 10px;
    display: inline-grid;
    place-items: center;
    background: rgba(91,92,240,.08);
    color: var(--blue);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .08em;
}
html[dir="rtl"] .lang-code { letter-spacing: .03em; }
.lang-name {
    white-space: nowrap;
}
.lang-link:hover {
    background: rgba(91,92,240,.06);
    color: var(--text);
}
.lang-link.active {
    background: linear-gradient(135deg, var(--blue), var(--blue-2));
    color: #fff;
    box-shadow: 0 12px 28px rgba(91,92,240,.24);
}
.lang-link.active .lang-code {
    background: rgba(255,255,255,.18);
    color: #fff;
}
.premium-switcher.light-on-dark .lang-link {
    color: rgba(255,255,255,.86);
}
.premium-switcher.light-on-dark .lang-code {
    background: rgba(255,255,255,.14);
    color: #fff;
}
.premium-switcher.light-on-dark .lang-link:hover {
    background: rgba(255,255,255,.08);
    color: white;
}
.premium-switcher.light-on-dark .lang-link.active {
    color: #06111f;
}
.premium-switcher.light-on-dark .lang-link.active .lang-code {
    color: #06111f;
    background: rgba(255,255,255,.34);
}

/* premium theme toggle */
.premium-theme-toggle {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-height: 54px;
    padding: 8px 16px 8px 10px;
    border-radius: 20px;
    border: 1px solid rgba(91,92,240,.12);
    background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.74));
    box-shadow: 0 14px 34px rgba(15,23,42,.08), inset 0 1px 0 rgba(255,255,255,.72);
}
html[data-theme="dark"] .premium-theme-toggle {
    border-color: rgba(140,145,255,.18);
    background: linear-gradient(180deg, rgba(17,24,39,.9), rgba(15,23,42,.78));
    box-shadow: 0 16px 34px rgba(2,6,23,.34), inset 0 1px 0 rgba(255,255,255,.03);
}
.premium-theme-toggle.light-on-dark {
    background: linear-gradient(180deg, rgba(255,255,255,.1), rgba(255,255,255,.06));
    border-color: rgba(255,255,255,.12);
    color: #fff;
}
.theme-toggle-icon-wrap {
    width: 36px;
    height: 36px;
    border-radius: 14px;
    display: inline-grid;
    place-items: center;
    background: linear-gradient(135deg, rgba(91,92,240,.12), rgba(21,184,214,.12));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.55);
}
.premium-theme-toggle.light-on-dark .theme-toggle-icon-wrap {
    background: rgba(255,255,255,.14);
}
.theme-toggle-icon {
    width: auto;
    height: auto;
    background: transparent;
    font-size: 14px;
}
.theme-toggle-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.1;
}
.theme-toggle-copy small {
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
    margin-bottom: 4px;
}
.premium-theme-toggle.light-on-dark .theme-toggle-copy small {
    color: rgba(255,255,255,.7);
}
.theme-toggle-copy [data-theme-label] {
    font-weight: 900;
    white-space: nowrap;
}
.premium-theme-toggle:hover,
.logout:hover,
.nav-button:hover,
.hero-button:hover,
.btn:hover {
    transform: translateY(-1px);
}
.logout {
    min-height: 52px;
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.72));
}
html[data-theme="dark"] .logout {
    background: linear-gradient(180deg, rgba(17,24,39,.9), rgba(15,23,42,.78));
}

.hero {
    background:
        radial-gradient(circle at top right, rgba(53,210,234,.18), transparent 26%),
        radial-gradient(circle at left center, rgba(109,109,255,.18), transparent 24%),
        linear-gradient(135deg, #07111f, #0f1f4d 52%, #0c1732 100%);
}
.nav-button,
.hero-button,
.btn,
button:not(.theme-toggle):not(.sidebar-toggle):not(.link-danger):not(.danger-link) {
    background: linear-gradient(135deg, #5b5cf0, #15b8d6);
    color: #fff;
    box-shadow: 0 14px 28px rgba(91,92,240,.22);
}
html[data-theme="dark"] .nav-button,
html[data-theme="dark"] .hero-button,
html[data-theme="dark"] .btn,
html[data-theme="dark"] button:not(.theme-toggle):not(.sidebar-toggle):not(.link-danger):not(.danger-link) {
    background: linear-gradient(135deg, #8c91ff, #35d2ea);
    color: #081321;
    box-shadow: 0 16px 30px rgba(140,145,255,.2);
}

.panel,
.stat-card,
.table-panel,
.auth-card,
.receipt-card,
.statement-card,
.category-card,
.check-card {
    border-radius: 24px;
    box-shadow: var(--shadow-panel);
}
.table-panel {
    background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.14)), var(--surface);
}
html[data-theme="dark"] .table-panel {
    background: linear-gradient(180deg, rgba(140,145,255,.03), rgba(15,23,42,0)), var(--surface);
}
th {
    color: var(--text);
    background: linear-gradient(180deg, rgba(91,92,240,.06), rgba(21,184,214,.03));
}
html[data-theme="dark"] th {
    background: linear-gradient(180deg, rgba(140,145,255,.08), rgba(53,210,234,.03));
}

.actions-cell .table-link,
.actions-cell .link-danger,
.actions-cell .danger-link {
    min-height: 42px !important;
    border-radius: 14px !important;
    padding-inline: 14px !important;
}
.actions-cell .table-link::before,
.actions-cell .link-danger::before,
.actions-cell .danger-link::before {
    width: 30px;
    height: 30px;
    border-radius: 11px;
}

@media (max-width: 760px) {
    .premium-switcher,
    .premium-theme-toggle {
        width: 100%;
        justify-content: center;
    }
    .theme-toggle-copy small { display: none; }
    .lang-link { flex: 1 1 auto; justify-content: center; }
    .lang-name { display: none; }
    .premium-switcher { gap: 6px; }
}

/* ===== v12.4 Emerald Premium + SVG icon system ===== */
:root {
    --blue: #059669;
    --blue-2: #0f766e;
    --blue-soft: #e8f7ef;
    --emerald: #059669;
    --emerald-2: #0f766e;
    --emerald-3: #064e3b;
    --gold: #f59e0b;
    --success: #059669;
    --danger: #dc2626;
    --warning: #d97706;
    --info: #0e7490;
    --bg: #f5faf7;
    --surface: #ffffff;
    --surface-2: #f7fbf8;
    --surface-3: #edf7f1;
    --text: #10201a;
    --muted: #64746d;
    --border: #dce9e1;
    --border-strong: rgba(5,150,105,.34);
    --focus: 0 0 0 4px rgba(5, 150, 105, .16);
    --glass: rgba(255,255,255,.84);
    --sidebar-bg: linear-gradient(180deg, #0c1f1a 0%, #102a24 48%, #091a16 100%);
    --sidebar-hover: rgba(255,255,255,.07);
    --sidebar-active: linear-gradient(135deg, rgba(5,150,105,.28), rgba(245,158,11,.12));
    --shadow-soft: 0 18px 40px rgba(16, 32, 26, .07);
    --shadow-panel: 0 18px 44px rgba(16, 32, 26, .065);
}
html[data-theme="dark"] {
    --blue: #34d399;
    --blue-2: #10b981;
    --blue-soft: rgba(52,211,153,.13);
    --emerald: #34d399;
    --emerald-2: #10b981;
    --emerald-3: #065f46;
    --gold: #fbbf24;
    --success: #34d399;
    --danger: #f87171;
    --warning: #fbbf24;
    --info: #2dd4bf;
    --bg: #07110e;
    --surface: #0d1915;
    --surface-2: #12231d;
    --surface-3: #183128;
    --text: #e6f6ee;
    --muted: #9cb2a8;
    --border: #203a31;
    --border-strong: rgba(52,211,153,.34);
    --focus: 0 0 0 4px rgba(52, 211, 153, .18);
    --glass: rgba(13,25,21,.78);
    --sidebar-bg: linear-gradient(180deg, #06110e 0%, #0a1a15 50%, #050e0c 100%);
    --sidebar-hover: rgba(255,255,255,.05);
    --sidebar-active: linear-gradient(135deg, rgba(52,211,153,.18), rgba(251,191,36,.08));
    --shadow-soft: 0 18px 46px rgba(0,0,0,.32);
    --shadow-panel: 0 18px 46px rgba(0,0,0,.28);
}

body,
.dashboard-body,
.auth-body {
    background:
        radial-gradient(circle at 0% 0%, rgba(5,150,105,.10), transparent 26%),
        radial-gradient(circle at 100% 0%, rgba(245,158,11,.06), transparent 24%),
        var(--bg) !important;
}
html[data-theme="dark"] body,
html[data-theme="dark"] .dashboard-body,
html[data-theme="dark"] .auth-body {
    background:
        radial-gradient(circle at 0% 0%, rgba(52,211,153,.08), transparent 24%),
        radial-gradient(circle at 100% 0%, rgba(251,191,36,.05), transparent 22%),
        var(--bg) !important;
}

.brand-mark,
.auth-logo {
    background: linear-gradient(135deg, #059669 0%, #0f766e 62%, #f59e0b 135%) !important;
    box-shadow: 0 18px 36px rgba(5,150,105,.26), inset 0 1px 0 rgba(255,255,255,.28) !important;
}
html[data-theme="dark"] .brand-mark,
html[data-theme="dark"] .auth-logo {
    background: linear-gradient(135deg, #34d399 0%, #10b981 65%, #fbbf24 140%) !important;
    color: #052018;
}

.sidebar {
    background: var(--sidebar-bg) !important;
    box-shadow: inset -1px 0 0 rgba(255,255,255,.035), 24px 0 55px rgba(0,0,0,.18);
}
.sidebar-nav a.active {
    background: var(--sidebar-active) !important;
    border-color: rgba(52,211,153,.18) !important;
}
.nav-icon {
    width: 36px;
    height: 36px;
    border-radius: 13px;
    color: #dff8ee;
    background: rgba(255,255,255,.07) !important;
}
.nav-icon svg {
    width: 18px;
    height: 18px;
    display: block;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.sidebar-nav a.active .nav-icon {
    color: #052018;
    background: linear-gradient(135deg, #34d399, #fbbf24) !important;
    box-shadow: 0 12px 22px rgba(5,150,105,.18), inset 0 1px 0 rgba(255,255,255,.22);
}
.sidebar-nav a:hover .nav-icon {
    background: rgba(52,211,153,.12) !important;
}

.topbar,
.panel,
.stat-card,
.table-panel,
.report-card,
.receipt-card,
.statement-card,
.auth-card,
.category-card,
.check-card {
    border-color: var(--border) !important;
    box-shadow: var(--shadow-panel) !important;
}
.topbar {
    background: linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,.76)) !important;
    backdrop-filter: blur(16px);
}
html[data-theme="dark"] .topbar {
    background: linear-gradient(180deg, rgba(13,25,21,.88), rgba(13,25,21,.72)) !important;
}

/* Emerald language switcher */
.premium-switcher,
.lang-switcher {
    background: linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,255,255,.74)) !important;
    border-color: rgba(5,150,105,.16) !important;
    box-shadow: 0 14px 32px rgba(16,32,26,.08), inset 0 1px 0 rgba(255,255,255,.8) !important;
}
html[data-theme="dark"] .premium-switcher,
html[data-theme="dark"] .lang-switcher {
    background: linear-gradient(180deg, rgba(18,35,29,.92), rgba(13,25,21,.78)) !important;
    border-color: rgba(52,211,153,.18) !important;
    box-shadow: 0 16px 34px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.035) !important;
}
.switcher-icon-svg {
    width: 40px;
    height: 40px;
    display: inline-grid;
    place-items: center;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(5,150,105,.12), rgba(245,158,11,.10));
    color: var(--emerald);
}
.switcher-icon-svg svg,
.theme-toggle-icon svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.lang-code {
    background: rgba(5,150,105,.10) !important;
    color: var(--emerald) !important;
}
.lang-link:hover {
    background: rgba(5,150,105,.07) !important;
}
.lang-link.active {
    background: linear-gradient(135deg, #059669, #0f766e) !important;
    color: #fff !important;
    box-shadow: 0 12px 28px rgba(5,150,105,.24) !important;
}
.lang-link.active .lang-code {
    background: rgba(255,255,255,.20) !important;
    color: #fff !important;
}
.premium-switcher.light-on-dark {
    background: rgba(255,255,255,.09) !important;
    border-color: rgba(255,255,255,.12) !important;
}
.premium-switcher.light-on-dark .switcher-icon-svg,
.premium-switcher.light-on-dark .lang-code {
    background: rgba(255,255,255,.14) !important;
    color: #fff !important;
}
.premium-switcher.light-on-dark .lang-link.active {
    background: linear-gradient(135deg, #34d399, #fbbf24) !important;
    color: #052018 !important;
}
.premium-switcher.light-on-dark .lang-link.active .lang-code {
    color: #052018 !important;
    background: rgba(255,255,255,.32) !important;
}

/* Emerald theme toggle */
.premium-theme-toggle,
.theme-toggle,
.logout {
    background: linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,255,255,.74)) !important;
    border-color: rgba(5,150,105,.16) !important;
    color: var(--text) !important;
    box-shadow: 0 14px 32px rgba(16,32,26,.08), inset 0 1px 0 rgba(255,255,255,.75) !important;
}
html[data-theme="dark"] .premium-theme-toggle,
html[data-theme="dark"] .theme-toggle,
html[data-theme="dark"] .logout {
    background: linear-gradient(180deg, rgba(18,35,29,.92), rgba(13,25,21,.78)) !important;
    border-color: rgba(52,211,153,.18) !important;
    box-shadow: 0 16px 34px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.035) !important;
}
.theme-toggle-icon-wrap,
.theme-toggle-icon {
    background: linear-gradient(135deg, rgba(5,150,105,.14), rgba(245,158,11,.12)) !important;
    color: var(--emerald) !important;
}
html[data-theme="dark"] .theme-toggle-icon-wrap,
html[data-theme="dark"] .theme-toggle-icon {
    color: #34d399 !important;
}
.theme-toggle-copy small { color: var(--muted) !important; }
.premium-theme-toggle.light-on-dark {
    background: rgba(255,255,255,.09) !important;
    border-color: rgba(255,255,255,.12) !important;
    color: #fff !important;
}
.premium-theme-toggle.light-on-dark .theme-toggle-icon-wrap,
.premium-theme-toggle.light-on-dark .theme-toggle-icon {
    background: rgba(255,255,255,.14) !important;
    color: #fff !important;
}

.hero {
    background:
        radial-gradient(circle at top right, rgba(52,211,153,.18), transparent 26%),
        radial-gradient(circle at left center, rgba(245,158,11,.12), transparent 24%),
        linear-gradient(135deg, #07110e, #0b3027 52%, #0f1d18 100%) !important;
}
.nav-button,
.hero-button,
.btn,
button:not(.theme-toggle):not(.sidebar-toggle):not(.link-danger):not(.danger-link) {
    background: linear-gradient(135deg, #059669, #0f766e) !important;
    color: #fff !important;
    box-shadow: 0 14px 28px rgba(5,150,105,.20) !important;
}
html[data-theme="dark"] .nav-button,
html[data-theme="dark"] .hero-button,
html[data-theme="dark"] .btn,
html[data-theme="dark"] button:not(.theme-toggle):not(.sidebar-toggle):not(.link-danger):not(.danger-link) {
    background: linear-gradient(135deg, #34d399, #10b981) !important;
    color: #052018 !important;
}
.btn.muted {
    background: var(--surface-3) !important;
    color: var(--text) !important;
    box-shadow: none !important;
}

/* SVG action icons */
.actions-cell .table-link::before,
.actions-cell .link-danger::before,
.actions-cell .danger-link::before {
    content: "" !important;
    background-color: currentColor !important;
    -webkit-mask: var(--action-icon) center / 17px 17px no-repeat;
    mask: var(--action-icon) center / 17px 17px no-repeat;
}
.actions-cell a[href*="/edit"] { color: var(--emerald) !important; }
.actions-cell a[href*="/edit"]::before { --action-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4Z'/%3E%3C/svg%3E"); }
.actions-cell a[href*="download"]::before,
.actions-cell a[href*="receipt"]::before,
.actions-cell a[href*="print"]::before { --action-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3Cpath d='M12 15V3'/%3E%3C/svg%3E"); color: var(--success) !important; }
.actions-cell a[href*="statement"]::before,
.actions-cell a[href*="student_id="]::before { --action-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 19V5'/%3E%3Cpath d='M4 19h16'/%3E%3Cpath d='M8 17v-6M12 17V8M16 17v-3'/%3E%3C/svg%3E"); color: var(--info) !important; }
.actions-cell a[href*="documents"]::before { --action-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7h6l2 2h10v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2Z'/%3E%3C/svg%3E"); color: var(--warning) !important; }
.actions-cell .link-danger::before,
.actions-cell .danger-link::before { --action-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M8 6V4h8v2'/%3E%3Cpath d='M19 6l-1 14H6L5 6'/%3E%3Cpath d='M10 11v6M14 11v6'/%3E%3C/svg%3E"); color: var(--danger) !important; }
.actions-cell .table-link,
.actions-cell .link-danger,
.actions-cell .danger-link {
    background: var(--surface-2) !important;
    border-color: var(--border) !important;
}
.actions-cell .table-link:hover,
.actions-cell .link-danger:hover,
.actions-cell .danger-link:hover {
    background: var(--surface-3) !important;
    border-color: var(--border-strong) !important;
}

.status.active, .status.paid, .status.present {
    background: linear-gradient(180deg, rgba(5,150,105,.16), rgba(5,150,105,.10)) !important;
    color: #047857 !important;
}
.status.partial, .status.late {
    background: linear-gradient(180deg, rgba(245,158,11,.18), rgba(245,158,11,.10)) !important;
    color: #b45309 !important;
}
html[data-theme="dark"] .status.active,
html[data-theme="dark"] .status.paid,
html[data-theme="dark"] .status.present { color: #9ff0ca !important; }
html[data-theme="dark"] .status.partial,
html[data-theme="dark"] .status.late { color: #fde68a !important; }

/* ===== v12.5 professional dashboard ===== */
.dashboard-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(340px, .95fr);
    gap: 20px;
    margin-bottom: 22px;
    overflow: hidden;
    position: relative;
}
.dashboard-hero::before {
    content: "";
    position: absolute;
    inset-inline-end: -80px;
    top: -80px;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(37,99,235,.12), rgba(37,99,235,0));
    pointer-events: none;
}
.dashboard-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(37,99,235,.08);
    color: var(--blue);
    font-size: 12px;
    font-weight: 900;
    margin-bottom: 14px;
}
.dashboard-hero-copy h2 {
    margin: 0 0 10px;
    font-size: clamp(28px, 3vw, 40px);
    line-height: 1.15;
    letter-spacing: -.03em;
}
html[dir="rtl"] .dashboard-hero-copy h2 { letter-spacing: 0; }
.dashboard-hero-copy > p {
    margin: 0;
    color: var(--muted);
    font-size: 15px;
    max-width: 760px;
}
.dashboard-hero-meta {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-top: 20px;
}
.hero-meta-card {
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 16px;
    background: linear-gradient(180deg, rgba(255,255,255,.48), rgba(255,255,255,.12));
}
html[data-theme="dark"] .hero-meta-card {
    background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015));
}
.hero-meta-card span {
    display: block;
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    margin-bottom: 8px;
}
.hero-meta-card strong {
    display: block;
    font-size: 22px;
    letter-spacing: -.02em;
}
.dashboard-hero-side {
    display: flex;
}
.dashboard-side-card {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: 24px;
    padding: 22px;
    background: linear-gradient(180deg, rgba(255,255,255,.48), rgba(255,255,255,.12));
}
html[data-theme="dark"] .dashboard-side-card {
    background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015));
}
.side-card-head {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    margin-bottom: 16px;
}
.side-card-head h3 {
    margin: 0 0 4px;
    font-size: 18px;
}
.side-card-head p {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
}
.side-card-icon,
.dashboard-kpi-icon,
.quick-action-icon,
.module-icon {
    width: 46px;
    height: 46px;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 46px;
}
.side-card-icon svg,
.dashboard-kpi-icon svg,
.quick-action-icon svg,
.quick-action-arrow svg,
.module-icon svg {
    width: 20px;
    height: 20px;
}
.tone-green { background: rgba(16,185,129,.14); color: #059669; }
.dashboard-kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 22px;
}
.dashboard-kpi-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 20px;
    border-radius: 22px;
    border: 1px solid var(--border);
    background: var(--surface);
    box-shadow: var(--shadow-panel);
    overflow: hidden;
}
.dashboard-kpi-card::after {
    content: "";
    position: absolute;
    inset-inline-end: -22px;
    top: -22px;
    width: 88px;
    height: 88px;
    border-radius: 50%;
    opacity: .8;
}
.dashboard-kpi-copy span {
    display: block;
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    margin-bottom: 7px;
}
.dashboard-kpi-copy strong {
    display: block;
    font-size: 26px;
    letter-spacing: -.02em;
}
.tone-violet .dashboard-kpi-icon, .tone-violet::after { background: rgba(139,92,246,.12); color: #7c3aed; }
.tone-blue .dashboard-kpi-icon, .tone-blue::after { background: rgba(37,99,235,.12); color: #2563eb; }
.tone-cyan .dashboard-kpi-icon, .tone-cyan::after { background: rgba(6,182,212,.12); color: #0891b2; }
.tone-green .dashboard-kpi-icon, .tone-green::after { background: rgba(16,185,129,.12); color: #059669; }
.tone-amber .dashboard-kpi-icon, .tone-amber::after { background: rgba(245,158,11,.14); color: #d97706; }
.tone-indigo .dashboard-kpi-icon, .tone-indigo::after { background: rgba(99,102,241,.12); color: #4f46e5; }
.tone-rose .dashboard-kpi-icon, .tone-rose::after { background: rgba(244,63,94,.12); color: #e11d48; }
.tone-slate .dashboard-kpi-icon, .tone-slate::after { background: rgba(71,85,105,.12); color: #334155; }
.dashboard-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    margin-bottom: 22px;
}
.dashboard-panel-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 16px;
}
.dashboard-panel-head h3 {
    margin: 0 0 5px;
    font-size: 22px;
}
.dashboard-panel-head p {
    margin: 0;
    color: var(--muted);
    font-size: 14px;
}
.quick-actions-grid,
.module-shortcuts-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}
.quick-action-card,
.module-shortcut-card {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 18px;
    border: 1px solid var(--border);
    border-radius: 20px;
    background: linear-gradient(180deg, rgba(255,255,255,.44), rgba(255,255,255,.12));
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
html[data-theme="dark"] .quick-action-card,
html[data-theme="dark"] .module-shortcut-card {
    background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015));
}
.quick-action-card:hover,
.module-shortcut-card:hover {
    transform: translateY(-2px);
    border-color: rgba(37,99,235,.28);
    box-shadow: 0 16px 36px rgba(15,23,42,.08);
}
.quick-action-copy,
.module-shortcut-card {
    flex: 1 1 auto;
}
.quick-action-copy strong,
.module-shortcut-card strong {
    display: block;
    margin-bottom: 6px;
    font-size: 16px;
}
.quick-action-copy span,
.module-shortcut-card p {
    display: block;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.55;
}
.quick-action-arrow {
    width: 34px;
    height: 34px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(37,99,235,.08);
    color: var(--blue);
    flex: 0 0 34px;
}
.summary-list {
    display: grid;
    gap: 12px;
}
.summary-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 15px 16px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(255,255,255,.44), rgba(255,255,255,.12));
}
html[data-theme="dark"] .summary-item {
    background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015));
}
.summary-item span {
    color: var(--muted);
    font-size: 13px;
    font-weight: 800;
}
.summary-item strong {
    font-size: 17px;
}
.summary-item.emphasis {
    border-color: rgba(37,99,235,.2);
}
.finance-breakdown { display: grid; gap: 12px; }
.finance-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.finance-row strong {
    display: block;
    font-size: 18px;
    margin-bottom: 3px;
}
.finance-row span,
.finance-row em {
    color: var(--muted);
    font-size: 12px;
    font-style: normal;
    font-weight: 800;
}
.progress {
    position: relative;
    height: 10px;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(37,99,235,.08);
}
.progress span {
    position: absolute;
    inset: 0 auto 0 0;
    border-radius: inherit;
    background: linear-gradient(90deg, #2563eb, #60a5fa);
}
.progress.amber { background: rgba(245,158,11,.12); }
.progress.amber span { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
.progress.cyan { background: rgba(6,182,212,.12); }
.progress.cyan span { background: linear-gradient(90deg, #06b6d4, #67e8f9); }
.module-shortcut-card {
    flex-direction: column;
    align-items: flex-start;
}
.module-shortcut-card p { margin: 0; }
.module-icon { margin-bottom: 4px; }

@media (max-width: 1200px) {
    .dashboard-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 980px) {
    .dashboard-hero,
    .dashboard-grid-2 {
        grid-template-columns: 1fr;
    }
    .dashboard-hero-meta,
    .quick-actions-grid,
    .module-shortcuts-grid,
    .dashboard-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 640px) {
    .dashboard-hero-copy h2 { font-size: 26px; }
    .dashboard-hero-meta,
    .quick-actions-grid,
    .module-shortcuts-grid,
    .dashboard-kpis {
        grid-template-columns: 1fr;
    }
    .dashboard-kpi-card,
    .quick-action-card {
        padding: 16px;
    }
    .hero-meta-card strong,
    .dashboard-kpi-copy strong {
        font-size: 20px;
    }
}

/* ===== v12.5.1 compact topbar controls ===== */
.topbar {
    position: static !important;
    top: auto !important;
    z-index: auto !important;
    padding: 14px 16px !important;
    gap: 14px !important;
}
.topbar h1 {
    font-size: 18px !important;
    line-height: 1.25 !important;
    margin: 0 0 2px !important;
}
.topbar p {
    font-size: 12px !important;
    margin: 0 !important;
}
.topbar-actions {
    gap: 8px !important;
    align-items: center !important;
}

.premium-switcher,
.lang-switcher,
.premium-theme-toggle,
.theme-toggle,
.logout {
    min-height: 42px !important;
    border-radius: 16px !important;
    padding: 4px 10px !important;
}

.premium-switcher,
.lang-switcher {
    gap: 6px !important;
}
.switcher-icon-svg {
    width: 32px !important;
    height: 32px !important;
    border-radius: 11px !important;
}
.switcher-icon-svg svg,
.theme-toggle-icon svg,
.logout-icon svg {
    width: 16px !important;
    height: 16px !important;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.lang-link {
    min-height: 32px !important;
    padding: 6px 10px !important;
    gap: 6px !important;
    border-radius: 12px !important;
}
.lang-code {
    width: 22px !important;
    height: 22px !important;
    border-radius: 8px !important;
    font-size: 10px !important;
}
.lang-name,
.switcher-badge {
    display: none !important;
}

.premium-theme-toggle,
.theme-toggle {
    gap: 8px !important;
    min-height: 42px !important;
    padding-inline: 8px 12px !important;
}
.theme-toggle-icon-wrap {
    width: 30px !important;
    height: 30px !important;
    border-radius: 10px !important;
}
.theme-toggle-copy {
    line-height: 1 !important;
}
.theme-toggle-copy small {
    display: none !important;
}
.theme-toggle-copy [data-theme-label] {
    font-size: 13px !important;
    font-weight: 800 !important;
}

.logout,
.logout-compact {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding-inline: 12px !important;
}
.logout-icon {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: rgba(255,255,255,.16);
}
html[data-theme="dark"] .logout-icon {
    background: rgba(255,255,255,.08);
}
.logout-label {
    font-weight: 800;
    font-size: 13px;
}

@media (max-width: 980px) {
    .topbar {
        padding: 12px 14px !important;
    }
    .topbar-title {
        gap: 10px !important;
    }
    .topbar h1 {
        font-size: 17px !important;
    }
    .topbar-actions {
        flex-wrap: wrap !important;
        justify-content: flex-start !important;
    }
    html[dir="rtl"] .topbar-actions {
        justify-content: flex-end !important;
    }
}

@media (max-width: 760px) {
    .topbar {
        display: grid !important;
        gap: 12px !important;
        padding: 12px !important;
        border-radius: 18px !important;
    }
    .topbar-title {
        align-items: center !important;
    }
    .topbar h1 {
        font-size: 16px !important;
    }
    .topbar p {
        font-size: 11px !important;
    }
    .topbar-actions {
        gap: 8px !important;
        width: 100% !important;
    }
    .premium-switcher,
    .lang-switcher,
    .premium-theme-toggle,
    .theme-toggle,
    .logout {
        width: auto !important;
        min-height: 40px !important;
        padding: 4px 8px !important;
    }
    .premium-theme-toggle,
    .theme-toggle {
        padding-inline: 6px 10px !important;
    }
    .theme-toggle-copy [data-theme-label],
    .logout-label {
        display: none !important;
    }
    .lang-link {
        padding: 5px 8px !important;
    }
    .switcher-icon-svg,
    .theme-toggle-icon-wrap,
    .logout-icon {
        width: 28px !important;
        height: 28px !important;
        border-radius: 10px !important;
    }
    .lang-code {
        width: 20px !important;
        height: 20px !important;
        font-size: 9px !important;
    }
}

/* ===== v12.6 selectable professional color themes ===== */
html[data-color-theme="midnight"] {
    --brand-primary: #155e75;
    --brand-secondary: #0e7490;
    --brand-accent: #06b6d4;
    --brand-soft: rgba(14,116,144,.12);
    --brand-bg: #f4f8fb;
    --brand-surface: rgba(14,116,144,.06);
    --brand-on: #ffffff;
    --blue: var(--brand-primary);
    --blue-2: var(--brand-secondary);
    --blue-soft: var(--brand-soft);
    --emerald: var(--brand-primary);
    --emerald-2: var(--brand-secondary);
    --gold: var(--brand-accent);
    --bg: var(--brand-bg);
    --sidebar-bg: linear-gradient(180deg, #0f172a 0%, #102033 50%, #0b1324 100%);
}
html[data-theme="dark"][data-color-theme="midnight"] {
    --brand-primary: #22d3ee;
    --brand-secondary: #38bdf8;
    --brand-accent: #67e8f9;
    --brand-soft: rgba(34,211,238,.14);
    --bg: #07111f;
    --surface: #0d1727;
    --surface-2: #111d31;
    --surface-3: #17263d;
    --border: #23344e;
    --sidebar-bg: linear-gradient(180deg, #040b16 0%, #07111f 52%, #050b15 100%);
}

html[data-color-theme="violet"] {
    --brand-primary: #7c3aed;
    --brand-secondary: #9333ea;
    --brand-accent: #06b6d4;
    --brand-soft: rgba(124,58,237,.12);
    --brand-bg: #f8f6ff;
    --brand-surface: rgba(124,58,237,.06);
    --brand-on: #ffffff;
    --blue: var(--brand-primary);
    --blue-2: var(--brand-secondary);
    --blue-soft: var(--brand-soft);
    --emerald: var(--brand-primary);
    --emerald-2: var(--brand-secondary);
    --gold: var(--brand-accent);
    --bg: var(--brand-bg);
    --sidebar-bg: linear-gradient(180deg, #241044 0%, #32175e 50%, #1d1237 100%);
}
html[data-theme="dark"][data-color-theme="violet"] {
    --brand-primary: #a78bfa;
    --brand-secondary: #c084fc;
    --brand-accent: #22d3ee;
    --brand-soft: rgba(167,139,250,.15);
    --bg: #0e081a;
    --surface: #151022;
    --surface-2: #1c1530;
    --surface-3: #291d44;
    --border: #3a2a5c;
    --sidebar-bg: linear-gradient(180deg, #0b0614 0%, #160d29 50%, #0d0719 100%);
}

html[data-color-theme="emerald"] {
    --brand-primary: #059669;
    --brand-secondary: #0f766e;
    --brand-accent: #f59e0b;
    --brand-soft: rgba(5,150,105,.12);
    --brand-bg: #f5faf7;
    --brand-surface: rgba(5,150,105,.06);
    --brand-on: #ffffff;
    --blue: var(--brand-primary);
    --blue-2: var(--brand-secondary);
    --blue-soft: var(--brand-soft);
    --emerald: var(--brand-primary);
    --emerald-2: var(--brand-secondary);
    --gold: var(--brand-accent);
    --bg: var(--brand-bg);
    --sidebar-bg: linear-gradient(180deg, #071f18 0%, #0b3027 52%, #071812 100%);
}
html[data-theme="dark"][data-color-theme="emerald"] {
    --brand-primary: #34d399;
    --brand-secondary: #10b981;
    --brand-accent: #fbbf24;
    --brand-soft: rgba(52,211,153,.14);
    --bg: #07110e;
    --surface: #0d1915;
    --surface-2: #12231d;
    --surface-3: #183329;
    --border: #234a3a;
    --sidebar-bg: linear-gradient(180deg, #04100c 0%, #081a14 52%, #04110d 100%);
}

html[data-color-theme="burgundy"] {
    --brand-primary: #991b1b;
    --brand-secondary: #7f1d1d;
    --brand-accent: #d97706;
    --brand-soft: rgba(153,27,27,.11);
    --brand-bg: #fbf7f5;
    --brand-surface: rgba(153,27,27,.055);
    --brand-on: #ffffff;
    --blue: var(--brand-primary);
    --blue-2: var(--brand-secondary);
    --blue-soft: var(--brand-soft);
    --emerald: var(--brand-primary);
    --emerald-2: var(--brand-secondary);
    --gold: var(--brand-accent);
    --bg: var(--brand-bg);
    --sidebar-bg: linear-gradient(180deg, #2c0b0b 0%, #421313 52%, #240909 100%);
}
html[data-theme="dark"][data-color-theme="burgundy"] {
    --brand-primary: #f87171;
    --brand-secondary: #ef4444;
    --brand-accent: #fbbf24;
    --brand-soft: rgba(248,113,113,.13);
    --bg: #130707;
    --surface: #1e1010;
    --surface-2: #291414;
    --surface-3: #3a1c1c;
    --border: #532727;
    --sidebar-bg: linear-gradient(180deg, #0e0505 0%, #1d0b0b 52%, #0f0505 100%);
}

html[data-color-theme="graphite"] {
    --brand-primary: #374151;
    --brand-secondary: #1f2937;
    --brand-accent: #f59e0b;
    --brand-soft: rgba(55,65,81,.10);
    --brand-bg: #f7f8fa;
    --brand-surface: rgba(55,65,81,.05);
    --brand-on: #ffffff;
    --blue: var(--brand-primary);
    --blue-2: var(--brand-secondary);
    --blue-soft: var(--brand-soft);
    --emerald: var(--brand-primary);
    --emerald-2: var(--brand-secondary);
    --gold: var(--brand-accent);
    --bg: var(--brand-bg);
    --sidebar-bg: linear-gradient(180deg, #111827 0%, #1f2937 52%, #0f172a 100%);
}
html[data-theme="dark"][data-color-theme="graphite"] {
    --brand-primary: #9ca3af;
    --brand-secondary: #d1d5db;
    --brand-accent: #fbbf24;
    --brand-soft: rgba(156,163,175,.14);
    --bg: #090d14;
    --surface: #111827;
    --surface-2: #17202e;
    --surface-3: #202b3b;
    --border: #303b4d;
    --sidebar-bg: linear-gradient(180deg, #060a10 0%, #0f172a 52%, #060a10 100%);
}

html[data-color-theme="teal"] {
    --brand-primary: #0f766e;
    --brand-secondary: #0891b2;
    --brand-accent: #f97316;
    --brand-soft: rgba(15,118,110,.12);
    --brand-bg: #f4fbfa;
    --brand-surface: rgba(15,118,110,.055);
    --brand-on: #ffffff;
    --blue: var(--brand-primary);
    --blue-2: var(--brand-secondary);
    --blue-soft: var(--brand-soft);
    --emerald: var(--brand-primary);
    --emerald-2: var(--brand-secondary);
    --gold: var(--brand-accent);
    --bg: var(--brand-bg);
    --sidebar-bg: linear-gradient(180deg, #0b2725 0%, #123f46 52%, #091d1d 100%);
}
html[data-theme="dark"][data-color-theme="teal"] {
    --brand-primary: #2dd4bf;
    --brand-secondary: #22d3ee;
    --brand-accent: #fb923c;
    --brand-soft: rgba(45,212,191,.14);
    --bg: #071312;
    --surface: #0d1c1b;
    --surface-2: #112a29;
    --surface-3: #173735;
    --border: #235350;
    --sidebar-bg: linear-gradient(180deg, #04100f 0%, #08201f 52%, #04100f 100%);
}

html[data-color-theme="indigo_rose"] {
    --brand-primary: #4f46e5;
    --brand-secondary: #4338ca;
    --brand-accent: #e11d48;
    --brand-soft: rgba(79,70,229,.12);
    --brand-bg: #f7f7ff;
    --brand-surface: rgba(79,70,229,.055);
    --brand-on: #ffffff;
    --blue: var(--brand-primary);
    --blue-2: var(--brand-secondary);
    --blue-soft: var(--brand-soft);
    --emerald: var(--brand-primary);
    --emerald-2: var(--brand-secondary);
    --gold: var(--brand-accent);
    --bg: var(--brand-bg);
    --sidebar-bg: linear-gradient(180deg, #1e1b4b 0%, #312e81 52%, #17143d 100%);
}
html[data-theme="dark"][data-color-theme="indigo_rose"] {
    --brand-primary: #818cf8;
    --brand-secondary: #a5b4fc;
    --brand-accent: #fb7185;
    --brand-soft: rgba(129,140,248,.15);
    --bg: #090b1e;
    --surface: #11142a;
    --surface-2: #171a36;
    --surface-3: #22254a;
    --border: #34386a;
    --sidebar-bg: linear-gradient(180deg, #070816 0%, #11142b 52%, #070816 100%);
}

html[data-color-theme] body,
html[data-color-theme] .dashboard-body,
html[data-color-theme] .auth-body {
    background:
        radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--brand-primary) 10%, transparent), transparent 28%),
        radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--brand-accent) 8%, transparent), transparent 24%),
        var(--bg) !important;
}
html[data-color-theme] .brand-mark,
html[data-color-theme] .auth-logo {
    background: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary) 64%, var(--brand-accent)) !important;
    box-shadow: 0 14px 30px color-mix(in srgb, var(--brand-primary) 26%, transparent), inset 0 1px 0 rgba(255,255,255,.28) !important;
}
html[data-color-theme] .sidebar {
    background: var(--sidebar-bg) !important;
}
html[data-color-theme] .sidebar-nav a.active {
    background: linear-gradient(135deg, color-mix(in srgb, var(--brand-primary) 28%, transparent), color-mix(in srgb, var(--brand-accent) 12%, transparent)) !important;
}
html[data-color-theme] .sidebar-nav a.active .nav-icon,
html[data-color-theme] .nav-button,
html[data-color-theme] .hero-button,
html[data-color-theme] .btn,
html[data-color-theme] button:not(.theme-toggle):not(.sidebar-toggle):not(.link-danger):not(.danger-link) {
    background: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary)) !important;
    color: var(--brand-on) !important;
    box-shadow: 0 14px 28px color-mix(in srgb, var(--brand-primary) 20%, transparent) !important;
}
html[data-theme="dark"][data-color-theme] .btn,
html[data-theme="dark"][data-color-theme] button:not(.theme-toggle):not(.sidebar-toggle):not(.link-danger):not(.danger-link) {
    color: #07111f !important;
}
html[data-color-theme="burgundy"] .btn,
html[data-color-theme="graphite"] .btn,
html[data-color-theme="midnight"] .btn,
html[data-color-theme="violet"] .btn,
html[data-color-theme="indigo_rose"] .btn,
html[data-color-theme="teal"] .btn,
html[data-color-theme="emerald"] .btn { color: #fff !important; }
html[data-color-theme] .btn.muted {
    background: var(--surface-3) !important;
    color: var(--text) !important;
    box-shadow: none !important;
}
html[data-color-theme] .topbar,
html[data-color-theme] .panel,
html[data-color-theme] .table-panel,
html[data-color-theme] .dashboard-kpi-card,
html[data-color-theme] .stat-card,
html[data-color-theme] .auth-card,
html[data-color-theme] .receipt-card,
html[data-color-theme] .statement-card {
    border-color: color-mix(in srgb, var(--brand-primary) 18%, var(--border)) !important;
}
html[data-color-theme] .premium-switcher,
html[data-color-theme] .lang-switcher,
html[data-color-theme] .premium-theme-toggle,
html[data-color-theme] .theme-toggle,
html[data-color-theme] .logout {
    border-color: color-mix(in srgb, var(--brand-primary) 18%, var(--border)) !important;
}
html[data-color-theme] .switcher-icon-svg,
html[data-color-theme] .theme-toggle-icon-wrap,
html[data-color-theme] .theme-toggle-icon,
html[data-color-theme] .lang-code,
html[data-color-theme] .dashboard-badge,
html[data-color-theme] .quick-action-arrow,
html[data-color-theme] .theme-choice-check {
    background: var(--brand-soft) !important;
    color: var(--brand-primary) !important;
}
html[data-color-theme] .lang-link:hover {
    background: var(--brand-soft) !important;
}
html[data-color-theme] .lang-link.active {
    background: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary)) !important;
    color: var(--brand-on) !important;
    box-shadow: 0 12px 28px color-mix(in srgb, var(--brand-primary) 24%, transparent) !important;
}
html[data-color-theme] .lang-link.active .lang-code {
    background: rgba(255,255,255,.22) !important;
    color: var(--brand-on) !important;
}
html[data-color-theme] .hero {
    background:
        radial-gradient(circle at top right, color-mix(in srgb, var(--brand-accent) 16%, transparent), transparent 26%),
        radial-gradient(circle at left center, color-mix(in srgb, var(--brand-primary) 18%, transparent), transparent 24%),
        linear-gradient(135deg, #07111f, color-mix(in srgb, var(--brand-primary) 32%, #07111f), #0c1732) !important;
}
html[data-color-theme] .progress span {
    background: linear-gradient(90deg, var(--brand-primary), var(--brand-secondary)) !important;
}
html[data-color-theme] .progress.amber span {
    background: linear-gradient(90deg, var(--brand-accent), color-mix(in srgb, var(--brand-accent) 72%, white)) !important;
}
html[data-color-theme] .quick-action-card:hover,
html[data-color-theme] .module-shortcut-card:hover {
    border-color: color-mix(in srgb, var(--brand-primary) 34%, var(--border)) !important;
}
html[data-color-theme] .actions-cell a[href*="/edit"],
html[data-color-theme] .table-link {
    color: var(--brand-primary) !important;
}
html[data-color-theme] .actions-cell .table-link:hover,
html[data-color-theme] .actions-cell .link-danger:hover,
html[data-color-theme] .actions-cell .danger-link:hover {
    border-color: color-mix(in srgb, var(--brand-primary) 28%, var(--border)) !important;
}
html[data-color-theme] th {
    background: linear-gradient(180deg, var(--brand-surface), transparent) !important;
}

/* Settings theme cards */
.settings-panel .form-grid {
    gap: 18px;
}
.settings-section-title {
    padding: 4px 0 0;
}
.settings-section-title span {
    display: block;
    font-size: 18px;
    font-weight: 900;
    margin-bottom: 5px;
}
.settings-section-title p {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
}
.theme-section-title {
    margin-top: 10px;
    padding-top: 18px;
    border-top: 1px solid var(--border);
}
.theme-picker-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}
.theme-choice-card {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 14px;
    align-items: center;
    min-height: 118px;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: 22px;
    background: linear-gradient(180deg, rgba(255,255,255,.46), rgba(255,255,255,.12)), var(--surface);
    cursor: pointer;
    overflow: hidden;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
html[data-theme="dark"] .theme-choice-card {
    background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.015)), var(--surface);
}
.theme-choice-card:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--brand-primary) 34%, var(--border));
    box-shadow: var(--shadow-panel);
}
.theme-choice-card input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.theme-choice-preview {
    width: 54px;
    height: 54px;
    border-radius: 18px;
    padding: 6px;
    display: flex;
    align-items: flex-end;
    gap: 4px;
    background: var(--surface-2);
    border: 1px solid var(--border);
}
.theme-choice-preview span {
    display: block;
    flex: 1;
    border-radius: 999px;
}
.theme-choice-preview span:nth-child(1) { height: 100%; }
.theme-choice-preview span:nth-child(2) { height: 74%; }
.theme-choice-preview span:nth-child(3) { height: 48%; }
.theme-choice-content strong {
    display: block;
    font-size: 15px;
    margin-bottom: 6px;
}
.theme-choice-content small {
    display: block;
    color: var(--muted);
    line-height: 1.55;
    font-size: 12px;
}
.theme-choice-check {
    width: 30px;
    height: 30px;
    border-radius: 11px;
    display: inline-grid;
    place-items: center;
    font-weight: 900;
    opacity: .3;
}
.theme-choice-card:has(input:checked) {
    border-color: color-mix(in srgb, var(--brand-primary) 48%, var(--border));
    box-shadow: 0 16px 34px color-mix(in srgb, var(--brand-primary) 12%, transparent);
}
.theme-choice-card:has(input:checked) .theme-choice-check {
    opacity: 1;
    background: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary)) !important;
    color: var(--brand-on) !important;
}
@media (max-width: 1100px) {
    .theme-picker-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
    .theme-picker-grid { grid-template-columns: 1fr; }
    .theme-choice-card { min-height: auto; }
}

/* ===== v12.7 custom logo support ===== */
.brand-logo,
.auth-logo-img {
    overflow: hidden;
    background: var(--surface) !important;
    border: 1px solid rgba(255,255,255,.14);
    padding: 6px;
}
.brand-logo img,
.auth-logo-img img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    border-radius: inherit;
}
.auth-logo-img {
    margin-inline: auto;
}
html[data-theme="dark"] .brand-logo,
html[data-theme="dark"] .auth-logo-img {
    background: rgba(255,255,255,.96) !important;
    border-color: rgba(255,255,255,.18);
}
.logo-settings-card {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr);
    gap: 18px;
    align-items: center;
    border: 1px solid var(--border);
    border-radius: 22px;
    padding: 18px;
    background: linear-gradient(180deg, rgba(255,255,255,.42), rgba(255,255,255,.12));
}
html[data-theme="dark"] .logo-settings-card {
    background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.015));
}
.logo-preview-box {
    width: 120px;
    height: 120px;
    border-radius: 26px;
    display: grid;
    place-items: center;
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.35);
    overflow: hidden;
}
.logo-preview-box img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 12px;
}
.logo-preview-box span {
    width: 70px;
    height: 70px;
    border-radius: 22px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, var(--blue), var(--blue-2));
    color: #fff;
    font-size: 34px;
    font-weight: 900;
}
.logo-settings-content label {
    margin-bottom: 6px;
}
.logo-settings-content p {
    margin: 0 0 12px;
    color: var(--muted);
    font-size: 14px;
}
.logo-file-input {
    padding: 10px !important;
    background: var(--surface-2) !important;
}
.logo-settings-content small {
    display: block;
    color: var(--muted);
    margin-top: 8px;
    font-size: 12px;
}
.remove-logo-option {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface-2);
    color: var(--danger);
    font-weight: 800;
}
.remove-logo-option input {
    width: auto;
    margin: 0;
}
@media (max-width: 680px) {
    .logo-settings-card {
        grid-template-columns: 1fr;
    }
    .logo-preview-box {
        width: 100px;
        height: 100px;
    }
}

/* ===== v12.8 professional print identity ===== */
.print-header {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(280px, .78fr);
    gap: 20px;
    align-items: stretch;
    padding: 22px;
    border: 1px solid var(--border);
    border-radius: 24px;
    background:
        radial-gradient(circle at top left, rgba(37,99,235,.08), transparent 34%),
        linear-gradient(180deg, rgba(255,255,255,.66), rgba(255,255,255,.16)),
        var(--surface);
    box-shadow: var(--shadow-panel);
    margin-bottom: 20px;
}
html[data-theme="dark"] .print-header {
    background:
        radial-gradient(circle at top left, rgba(96,165,250,.08), transparent 34%),
        linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.015)),
        var(--surface);
}
.print-brand-block {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
}
.print-logo {
    width: 72px;
    height: 72px;
    border-radius: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex: 0 0 72px;
    border: 1px solid var(--border);
    background: #fff;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.72);
}
.print-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 8px;
}
.print-logo-fallback {
    background: linear-gradient(135deg, var(--blue), var(--blue-2));
    color: #fff;
    font-size: 30px;
    font-weight: 900;
}
.print-brand-copy {
    min-width: 0;
}
.print-brand-copy .brand-line {
    margin: 0 0 6px;
    color: var(--text);
    font-size: 20px;
    font-weight: 950;
    letter-spacing: -.02em;
}
html[dir="rtl"] .print-brand-copy .brand-line { letter-spacing: 0; }
.print-secondary-name,
.print-contact-line {
    color: var(--muted);
    font-size: 13px;
    line-height: 1.6;
}
.print-report-title {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    text-align: end;
    gap: 8px;
}
html[dir="rtl"] .print-report-title {
    align-items: flex-start;
    text-align: start;
}
.print-report-title h2 {
    margin: 0;
    font-size: 24px;
    line-height: 1.25;
    color: var(--text);
}
.print-report-title p {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
}
.print-date-line,
.print-meta-line {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 11px;
    border-radius: 999px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    font-size: 12px;
}
.print-date-line span,
.print-meta-line span {
    color: var(--muted);
    font-weight: 800;
}
.print-date-line strong,
.print-meta-line strong {
    color: var(--text);
    font-weight: 950;
}
.print-footer {
    margin-top: 24px;
    padding-top: 18px;
    border-top: 1px dashed var(--border-strong);
}
.print-footer-note {
    color: var(--muted);
    font-size: 13px;
    text-align: center;
    margin-bottom: 18px;
}
.print-signatures {
    margin-top: 28px;
}
.print-report-shell,
.print-footer-shell {
    margin-bottom: 18px;
}
.receipt-card .print-header,
.statement-card .print-header {
    box-shadow: none;
}

@media (max-width: 760px) {
    .print-header {
        grid-template-columns: 1fr;
        padding: 16px;
        border-radius: 20px;
    }
    .print-report-title,
    html[dir="rtl"] .print-report-title {
        align-items: flex-start;
        text-align: start;
    }
    .print-logo {
        width: 58px;
        height: 58px;
        border-radius: 18px;
        flex-basis: 58px;
    }
    .print-brand-copy .brand-line {
        font-size: 17px;
    }
}

@page {
    size: A4;
    margin: 12mm;
}
@media print {
    html, body {
        background: #fff !important;
        color: #111827 !important;
    }
    body {
        font-size: 11px !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    .sidebar,
    .topbar,
    .no-print,
    .sidebar-backdrop,
    .alert,
    .sticky-save-bar,
    .toolbar-floating {
        display: none !important;
    }
    .main-content {
        display: block !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: visible !important;
    }
    .dashboard-body {
        display: block !important;
        min-height: auto !important;
    }
    .receipt-card,
    .statement-card,
    .panel,
    .table-panel,
    .stat-card,
    .category-card,
    .employee-report-head > div,
    .receipt-grid > div {
        background: #fff !important;
        color: #111827 !important;
        box-shadow: none !important;
        border-color: #d1d5db !important;
    }
    .receipt-card,
    .statement-card,
    .panel {
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        margin: 0 0 10px !important;
    }
    .print-header {
        display: grid !important;
        grid-template-columns: 1.25fr .8fr !important;
        gap: 12px !important;
        padding: 12px 0 14px !important;
        margin: 0 0 12px !important;
        border: 0 !important;
        border-bottom: 2px solid #111827 !important;
        border-radius: 0 !important;
        background: #fff !important;
        box-shadow: none !important;
        page-break-inside: avoid;
    }
    .print-logo {
        width: 58px !important;
        height: 58px !important;
        border-radius: 12px !important;
        border: 1px solid #d1d5db !important;
        background: #fff !important;
        flex-basis: 58px !important;
    }
    .print-logo img {
        padding: 5px !important;
    }
    .print-logo-fallback {
        background: #111827 !important;
        color: #fff !important;
    }
    .print-brand-copy .brand-line {
        font-size: 17px !important;
        color: #111827 !important;
    }
    .print-secondary-name,
    .print-contact-line,
    .print-report-title p,
    .print-date-line span,
    .print-meta-line span,
    .print-footer-note {
        color: #4b5563 !important;
    }
    .print-report-title h2 {
        font-size: 18px !important;
        color: #111827 !important;
    }
    .print-date-line,
    .print-meta-line {
        padding: 4px 0 !important;
        border: 0 !important;
        background: transparent !important;
        border-radius: 0 !important;
    }
    .cards-grid,
    .statement-summary,
    .receipt-grid,
    .employee-report-head {
        display: grid !important;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 8px !important;
        margin: 0 0 10px !important;
    }
    .receipt-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
    .stat-card,
    .receipt-grid > div,
    .employee-report-head > div,
    .category-card {
        padding: 8px !important;
        border: 1px solid #d1d5db !important;
        border-radius: 8px !important;
        page-break-inside: avoid;
    }
    .stat-card::after { display: none !important; }
    .stat-card span,
    .receipt-grid span,
    .employee-report-head span,
    .category-card span {
        color: #6b7280 !important;
        font-size: 10px !important;
        margin-bottom: 3px !important;
    }
    .stat-card strong,
    .receipt-grid strong,
    .employee-report-head strong,
    .category-card strong {
        color: #111827 !important;
        font-size: 12px !important;
    }
    .receipt-total {
        border: 1px solid #111827 !important;
        border-radius: 10px !important;
        padding: 10px !important;
        margin: 8px 0 12px !important;
        background: #f9fafb !important;
        color: #111827 !important;
    }
    .receipt-total strong {
        color: #111827 !important;
        font-size: 18px !important;
    }
    .table-panel {
        overflow: visible !important;
        border: 0 !important;
        border-radius: 0 !important;
        margin: 8px 0 12px !important;
    }
    table {
        width: 100% !important;
        border-collapse: collapse !important;
        border-spacing: 0 !important;
        font-size: 10px !important;
        page-break-inside: auto;
    }
    thead { display: table-header-group; }
    tfoot { display: table-footer-group; }
    tr { page-break-inside: avoid; page-break-after: auto; }
    th,
    td {
        padding: 6px 7px !important;
        border: 1px solid #d1d5db !important;
        color: #111827 !important;
        background: #fff !important;
    }
    th {
        background: #f3f4f6 !important;
        color: #111827 !important;
        font-weight: 900 !important;
    }
    h3 {
        font-size: 14px !important;
        margin: 12px 0 8px !important;
        color: #111827 !important;
    }
    .status,
    .money,
    .muted-line {
        color: #111827 !important;
        background: transparent !important;
        border: 0 !important;
        padding: 0 !important;
        font-size: inherit !important;
    }
    .print-footer {
        margin-top: 14px !important;
        padding-top: 10px !important;
        border-top: 1px solid #d1d5db !important;
        page-break-inside: avoid;
    }
    .print-footer-note {
        font-size: 10px !important;
        margin-bottom: 12px !important;
    }
    .signature-row,
    .print-signatures {
        display: flex !important;
        justify-content: space-between !important;
        gap: 24px !important;
        margin-top: 26px !important;
    }
    .signature-row span,
    .print-signatures span {
        min-width: 180px !important;
        padding-top: 14px !important;
        border-top: 1px solid #111827 !important;
        color: #111827 !important;
        text-align: center !important;
        font-size: 11px !important;
    }
}

/* ===== v12.8.1 smaller print logo ===== */
.print-logo {
    width: 48px !important;
    height: 48px !important;
    flex-basis: 48px !important;
    border-radius: 14px !important;
}
.print-logo img {
    padding: 5px !important;
}
.print-logo-fallback {
    font-size: 22px !important;
}
.print-brand-block {
    gap: 12px !important;
}
.print-brand-copy .brand-line {
    font-size: 18px !important;
}
.print-secondary-name,
.print-contact-line {
    font-size: 12px !important;
}

@media (max-width: 760px) {
    .print-logo {
        width: 42px !important;
        height: 42px !important;
        flex-basis: 42px !important;
        border-radius: 12px !important;
    }
    .print-logo img {
        padding: 4px !important;
    }
}

@media print {
    .print-logo {
        width: 40px !important;
        height: 40px !important;
        flex-basis: 40px !important;
        border-radius: 9px !important;
    }
    .print-logo img {
        padding: 3px !important;
    }
    .print-logo-fallback {
        font-size: 18px !important;
    }
    .print-brand-block {
        gap: 10px !important;
    }
    .print-brand-copy .brand-line {
        font-size: 15px !important;
    }
    .print-secondary-name,
    .print-contact-line {
        font-size: 10.5px !important;
    }
}

/* ===== v12.8.2 force tiny report logo ===== */
.print-header .print-logo,
.receipt-head .print-logo,
.statement-card .print-logo,
.receipt-card .print-logo {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    max-width: 38px !important;
    max-height: 38px !important;
    flex: 0 0 38px !important;
    border-radius: 10px !important;
    padding: 0 !important;
}
.print-header .print-logo img,
.receipt-head .print-logo img,
.statement-card .print-logo img,
.receipt-card .print-logo img {
    width: auto !important;
    height: auto !important;
    max-width: 30px !important;
    max-height: 30px !important;
    object-fit: contain !important;
    padding: 0 !important;
    display: block !important;
}
.print-header .print-logo-fallback,
.receipt-head .print-logo-fallback {
    font-size: 17px !important;
}
.print-header .print-brand-block,
.receipt-head .print-brand-block {
    gap: 8px !important;
    align-items: center !important;
}
.print-header .print-brand-copy .brand-line,
.receipt-head .print-brand-copy .brand-line {
    font-size: 14px !important;
}
.print-header .print-secondary-name,
.print-header .print-contact-line,
.receipt-head .print-secondary-name,
.receipt-head .print-contact-line {
    font-size: 10.5px !important;
}

@media print {
    .print-header .print-logo,
    .receipt-head .print-logo,
    .statement-card .print-logo,
    .receipt-card .print-logo {
        width: 30px !important;
        height: 30px !important;
        min-width: 30px !important;
        min-height: 30px !important;
        max-width: 30px !important;
        max-height: 30px !important;
        flex: 0 0 30px !important;
        border-radius: 7px !important;
    }
    .print-header .print-logo img,
    .receipt-head .print-logo img,
    .statement-card .print-logo img,
    .receipt-card .print-logo img {
        max-width: 24px !important;
        max-height: 24px !important;
        padding: 0 !important;
    }
    .print-header .print-logo-fallback,
    .receipt-head .print-logo-fallback {
        font-size: 14px !important;
    }
    .print-header .print-brand-copy .brand-line,
    .receipt-head .print-brand-copy .brand-line {
        font-size: 12px !important;
    }
    .print-header .print-secondary-name,
    .print-header .print-contact-line,
    .receipt-head .print-secondary-name,
    .receipt-head .print-contact-line {
        font-size: 9px !important;
    }
}

/* ===== v13 notifications center ===== */
.notification-summary-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 20px;
}
.notification-summary-card {
    position: relative;
    overflow: hidden;
    padding: 18px;
    border: 1px solid var(--border);
    border-radius: 22px;
    background: var(--surface);
    box-shadow: var(--shadow-panel);
}
.notification-summary-card::after {
    content: "";
    position: absolute;
    width: 92px;
    height: 92px;
    border-radius: 999px;
    inset-inline-end: -32px;
    top: -32px;
    opacity: .8;
}
.notification-summary-card span {
    position: relative;
    z-index: 1;
    display: block;
    color: var(--muted);
    font-size: 12px;
    font-weight: 900;
    margin-bottom: 10px;
}
.notification-summary-card strong {
    position: relative;
    z-index: 1;
    display: block;
    font-size: 30px;
    line-height: 1;
    margin-bottom: 10px;
}
.notification-summary-card p {
    position: relative;
    z-index: 1;
    margin: 0;
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
}
.notification-summary-card.critical::after { background: rgba(239,68,68,.12); }
.notification-summary-card.warning::after { background: rgba(245,158,11,.15); }
.notification-summary-card.info::after { background: rgba(6,182,212,.12); }
.notification-summary-card.transport::after { background: rgba(14,116,144,.12); }
.notification-summary-card.salary::after { background: rgba(139,92,246,.12); }
.notification-summary-card.absent::after { background: rgba(244,63,94,.12); }

.notifications-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}
.notification-panel.wide { grid-column: 1 / -1; }
.notification-panel-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 14px;
}
.notification-panel-head h3 {
    margin: 0 0 5px;
    font-size: 21px;
}
.notification-panel-head p {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
}
.notification-panel-head > span {
    min-width: 42px;
    height: 42px;
    display: inline-grid;
    place-items: center;
    border-radius: 14px;
    background: var(--blue-soft);
    color: var(--blue);
    font-weight: 900;
}
.notification-list {
    display: grid;
    gap: 10px;
}
.notification-list.compact {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.notification-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 12px;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(255,255,255,.42), rgba(255,255,255,.12));
}
html[data-theme="dark"] .notification-item {
    background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.015));
}
.notification-item strong {
    display: block;
    font-size: 14px;
    margin-bottom: 5px;
}
.notification-item span {
    display: block;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.5;
}
.notification-amount {
    min-width: 104px;
    text-align: center;
    padding: 9px 10px;
    border-radius: 14px;
    font-weight: 900;
    background: rgba(239,68,68,.08);
    color: var(--danger);
}
.notification-amount.partial { background: rgba(245,158,11,.12); color: var(--warning); }
.notification-amount.transport { background: rgba(6,182,212,.10); color: var(--info); }
.notification-amount.salary { background: rgba(139,92,246,.10); color: #7c3aed; }
.mini-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 8px 12px;
    border-radius: 13px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--text);
    font-size: 12px;
    font-weight: 900;
    white-space: nowrap;
}
.mini-action:hover {
    background: var(--surface-3);
    border-color: var(--border-strong);
}
.empty-state-mini {
    margin: 0;
    padding: 18px;
    border: 1px dashed var(--border);
    border-radius: 18px;
    color: var(--muted);
    font-weight: 800;
    text-align: center;
}
.dashboard-alert-strip {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.6fr) auto;
    align-items: center;
    gap: 18px;
    margin-bottom: 22px;
}
.dashboard-alert-title {
    display: flex;
    align-items: center;
    gap: 14px;
}
.dashboard-alert-icon {
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    background: var(--blue-soft);
    color: var(--blue);
    flex: 0 0 48px;
}
.dashboard-alert-icon svg {
    width: 22px;
    height: 22px;
}
.dashboard-alert-title h3 {
    margin: 0 0 4px;
    font-size: 20px;
}
.dashboard-alert-title p {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
}
.dashboard-alert-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}
.dashboard-alert-metrics div {
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--surface-2);
}
.dashboard-alert-metrics span {
    display: block;
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
    margin-bottom: 6px;
}
.dashboard-alert-metrics strong {
    display: block;
    font-size: 22px;
}

@media (max-width: 1200px) {
    .notification-summary-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .dashboard-alert-strip { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
    .notifications-grid,
    .notification-list.compact { grid-template-columns: 1fr; }
    .notification-panel.wide { grid-column: auto; }
    .dashboard-alert-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
    .notification-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .notification-summary-card { padding: 15px; }
    .notification-summary-card strong { font-size: 24px; }
    .notification-item { grid-template-columns: 1fr; align-items: stretch; }
    .notification-amount { text-align: inherit; min-width: 0; }
    .mini-action { width: 100%; }
    .dashboard-alert-metrics { grid-template-columns: 1fr; }
}


/* ===== v13.1 premium notifications presentation ===== */
.notifications-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 220px;
    gap: 20px;
    align-items: stretch;
    margin-bottom: 18px;
}
.notifications-hero-copy,
.notifications-hero-score {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 28px;
    background:
        radial-gradient(circle at 10% 0%, color-mix(in srgb, var(--blue) 12%, transparent), transparent 36%),
        linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.16)),
        var(--surface);
    box-shadow: var(--shadow-panel);
}
.notifications-hero-copy {
    padding: 28px;
}
.notifications-hero-copy::after {
    content: "";
    position: absolute;
    width: 180px;
    height: 180px;
    border-radius: 999px;
    inset-inline-end: -55px;
    top: -65px;
    background: color-mix(in srgb, var(--blue) 14%, transparent);
    pointer-events: none;
}
.notifications-eyebrow {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 13px;
    border-radius: 999px;
    background: var(--blue-soft);
    color: var(--blue);
    font-size: 12px;
    font-weight: 900;
    margin-bottom: 14px;
}
.notifications-eyebrow svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.notifications-hero h2 {
    position: relative;
    z-index: 1;
    margin: 0 0 10px;
    font-size: clamp(26px, 3vw, 38px);
    line-height: 1.18;
}
.notifications-hero p {
    position: relative;
    z-index: 1;
    margin: 0;
    color: var(--muted);
    max-width: 760px;
}
.notifications-hero-score {
    display: grid;
    place-items: center;
    text-align: center;
    padding: 22px;
}
.notifications-hero-score > span {
    width: 54px;
    height: 54px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
    margin-bottom: 12px;
}
.notifications-hero-score.has-alerts > span {
    background: rgba(239,68,68,.12);
    color: var(--danger);
}
.notifications-hero-score.clear > span {
    background: rgba(16,185,129,.12);
    color: var(--success);
}
.notifications-hero-score svg,
.notification-stat-tile svg,
.priority-icon svg,
.section-icon svg,
.professional-empty svg,
.alert-card-icon svg,
.alert-action svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.notifications-hero-score strong {
    display: block;
    font-size: 42px;
    line-height: 1;
}
.notifications-hero-score em {
    display: block;
    color: var(--muted);
    font-style: normal;
    font-weight: 800;
    font-size: 12px;
    margin-top: 7px;
}
.notifications-hero-score a {
    margin-top: 14px;
    display: inline-flex;
    min-height: 36px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
    border-radius: 13px;
    padding: 7px 12px;
    background: var(--surface-2);
    font-size: 12px;
    font-weight: 900;
}

.notification-stat-tiles {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}
.notification-stat-tile {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px;
    border: 1px solid var(--border);
    border-radius: 20px;
    background: var(--surface);
    box-shadow: var(--shadow-panel);
    min-width: 0;
    transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.notification-stat-tile:hover {
    transform: translateY(-2px);
    border-color: var(--border-strong);
}
.stat-tile-icon {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 15px;
}
.notification-stat-tile.danger .stat-tile-icon { background: rgba(239,68,68,.11); color: var(--danger); }
.notification-stat-tile.warning .stat-tile-icon { background: rgba(245,158,11,.13); color: var(--warning); }
.notification-stat-tile.info .stat-tile-icon { background: rgba(6,182,212,.11); color: var(--info); }
.notification-stat-tile.violet .stat-tile-icon { background: rgba(139,92,246,.12); color: #7c3aed; }
.notification-stat-tile.rose .stat-tile-icon { background: rgba(244,63,94,.11); color: #e11d48; }
.stat-tile-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.stat-tile-copy small {
    color: var(--muted);
    font-size: 11px;
    font-weight: 900;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.stat-tile-copy strong {
    font-size: 26px;
    line-height: 1;
}

.notification-clear-state {
    display: grid;
    place-items: center;
    text-align: center;
    padding: 34px;
    margin-bottom: 18px;
}
.notification-clear-state > span {
    width: 62px;
    height: 62px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 22px;
    background: rgba(16,185,129,.12);
    color: var(--success);
    margin-bottom: 14px;
}
.notification-clear-state svg {
    width: 25px;
    height: 25px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
}
.notification-clear-state h3 { margin: 0 0 6px; font-size: 24px; }
.notification-clear-state p { margin: 0; color: var(--muted); }

.priority-board {
    margin-bottom: 18px;
    padding: 20px;
}
.priority-board-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
}
.priority-board-head h3 { margin: 0 0 4px; font-size: 22px; }
.priority-board-head p { margin: 0; color: var(--muted); font-size: 13px; }
.mini-action.premium {
    background: linear-gradient(135deg, var(--blue), var(--blue-2));
    color: #fff;
    border-color: transparent;
}
.priority-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}
.priority-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(239,68,68,.05), rgba(255,255,255,.12));
}
.priority-icon {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 15px;
    background: rgba(239,68,68,.12);
    color: var(--danger);
}
.priority-card strong {
    display: block;
    margin-bottom: 4px;
    font-size: 14px;
}
.priority-card p {
    margin: 0;
    color: var(--muted);
    font-size: 12px;
}

.notification-tabs {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 18px;
    padding: 8px;
    border: 1px solid var(--border);
    border-radius: 20px;
    background: var(--surface);
    box-shadow: var(--shadow-panel);
}
.notification-tabs a {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-height: 38px;
    padding: 8px 12px;
    border-radius: 14px;
    background: var(--surface-2);
    color: var(--text);
    font-size: 13px;
    font-weight: 900;
}
.notification-tabs a span {
    min-width: 24px;
    height: 24px;
    display: inline-grid;
    place-items: center;
    border-radius: 999px;
    background: var(--blue-soft);
    color: var(--blue);
    font-size: 11px;
}

.professional-notifications {
    display: grid;
    gap: 18px;
}
.professional-notification-section {
    scroll-margin-top: 18px;
}
.professional-section-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}
.section-title-line {
    display: flex;
    align-items: flex-start;
    gap: 13px;
}
.section-icon {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 17px;
}
.professional-notification-section.danger .section-icon,
.professional-notification-section.danger .alert-card-icon { background: rgba(239,68,68,.11); color: var(--danger); }
.professional-notification-section.warning .section-icon,
.professional-notification-section.warning .alert-card-icon { background: rgba(245,158,11,.13); color: var(--warning); }
.professional-notification-section.info .section-icon,
.professional-notification-section.info .alert-card-icon { background: rgba(6,182,212,.11); color: var(--info); }
.professional-notification-section.violet .section-icon,
.professional-notification-section.violet .alert-card-icon { background: rgba(139,92,246,.12); color: #7c3aed; }
.professional-notification-section.rose .section-icon,
.professional-notification-section.rose .alert-card-icon { background: rgba(244,63,94,.11); color: #e11d48; }
.professional-section-head h3 {
    margin: 0 0 5px;
    font-size: 23px;
}
.professional-section-head p {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
}
.section-count {
    min-width: 46px;
    height: 46px;
    display: inline-grid;
    place-items: center;
    border-radius: 16px;
    background: var(--blue-soft);
    color: var(--blue);
    font-size: 18px;
    font-weight: 950;
}
.professional-alert-list {
    display: grid;
    gap: 12px;
}
.professional-alert-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 16px;
    align-items: center;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: 20px;
    background:
        linear-gradient(180deg, rgba(255,255,255,.52), rgba(255,255,255,.14)),
        var(--surface-2);
}
html[data-theme="dark"] .professional-alert-card,
html[data-theme="dark"] .priority-card {
    background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.015));
}
.alert-card-main {
    display: flex;
    align-items: center;
    gap: 13px;
    min-width: 0;
}
.alert-card-icon {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
}
.alert-card-copy {
    min-width: 0;
}
.alert-card-copy strong {
    display: block;
    margin-bottom: 8px;
    font-size: 15px;
}
.alert-meta-chips {
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
}
.alert-meta-chips span {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 5px 9px;
    border-radius: 999px;
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
}
.alert-card-side {
    display: flex;
    align-items: center;
    gap: 10px;
}
.alert-amount {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 110px;
    min-height: 40px;
    padding: 8px 12px;
    border-radius: 14px;
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text);
    font-weight: 950;
    white-space: nowrap;
}
.alert-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 40px;
    padding: 8px 13px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--blue), var(--blue-2));
    color: #fff;
    font-size: 12px;
    font-weight: 900;
    white-space: nowrap;
}
.alert-action svg {
    width: 15px;
    height: 15px;
}
html[dir="rtl"] .alert-action svg {
    transform: rotate(180deg);
}
.professional-empty {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px;
    border: 1px dashed var(--border);
    border-radius: 18px;
    color: var(--muted);
    background: var(--surface-2);
}
.professional-empty span {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: rgba(16,185,129,.12);
    color: var(--success);
    flex: 0 0 38px;
}
.professional-empty strong {
    font-size: 13px;
}

@media (max-width: 1180px) {
    .notification-stat-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .priority-strip { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
    .notifications-hero { grid-template-columns: 1fr; }
    .notification-stat-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .professional-alert-card {
        grid-template-columns: 1fr;
        align-items: stretch;
    }
    .alert-card-side {
        justify-content: space-between;
        flex-wrap: wrap;
    }
}
@media (max-width: 620px) {
    .notifications-hero-copy { padding: 20px; }
    .notification-stat-tiles { grid-template-columns: 1fr; }
    .notification-tabs {
        display: grid;
        grid-template-columns: 1fr;
    }
    .professional-section-head {
        align-items: stretch;
    }
    .section-title-line {
        gap: 10px;
    }
    .section-icon,
    .alert-card-icon {
        width: 40px;
        height: 40px;
        flex-basis: 40px;
        border-radius: 14px;
    }
    .professional-alert-card {
        padding: 14px;
    }
    .alert-card-main {
        align-items: flex-start;
    }
    .alert-card-side {
        display: grid;
        grid-template-columns: 1fr;
    }
    .alert-amount,
    .alert-action {
        width: 100%;
    }
}


/* ===== v13.2 clean professional notifications - fixes oversized SVG issue ===== */
.n2-page-header {
    margin-bottom: 18px;
}

.n2-svg,
.n2-page-header svg,
.n2-overview svg,
.n2-tabs svg,
.n2-sections svg {
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    max-width: 18px !important;
    max-height: 18px !important;
    display: inline-block !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.9 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
    overflow: visible !important;
}

.n2-overview {
    display: grid;
    grid-template-columns: minmax(260px, .85fr) minmax(0, 1.4fr);
    gap: 18px;
    margin-bottom: 16px;
    padding: 18px;
}

.n2-overview-main {
    display: flex;
    gap: 14px;
    align-items: center;
    padding: 18px;
    border-radius: 22px;
    border: 1px solid var(--border);
    background: linear-gradient(180deg, rgba(255,255,255,.48), rgba(255,255,255,.12));
}

html[data-theme="dark"] .n2-overview-main {
    background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.015));
}

.n2-overview-icon {
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
    border-radius: 17px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.n2-overview-icon svg {
    width: 22px !important;
    height: 22px !important;
    max-width: 22px !important;
    max-height: 22px !important;
}

.n2-overview-main.has-alerts .n2-overview-icon {
    background: rgba(239,68,68,.12);
    color: var(--danger);
}

.n2-overview-main.clear .n2-overview-icon {
    background: rgba(16,185,129,.12);
    color: var(--success);
}

.n2-overview-main span {
    display: block;
    color: var(--muted);
    font-size: 12px;
    font-weight: 900;
    margin-bottom: 6px;
}

.n2-overview-main strong {
    display: block;
    font-size: 38px;
    line-height: 1;
    margin-bottom: 6px;
}

.n2-overview-main p {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
}

.n2-overview-stats {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
}

.n2-stat {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    grid-template-areas:
        "icon title"
        "icon count";
    align-items: center;
    gap: 3px 10px;
    padding: 13px;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: var(--surface-2);
    min-width: 0;
}

.n2-stat > span {
    grid-area: icon;
    width: 34px;
    height: 34px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.n2-stat.danger > span { background: rgba(239,68,68,.12); color: var(--danger); }
.n2-stat.warning > span { background: rgba(245,158,11,.14); color: var(--warning); }
.n2-stat.info > span { background: rgba(6,182,212,.12); color: var(--info); }
.n2-stat.violet > span { background: rgba(139,92,246,.12); color: #7c3aed; }
.n2-stat.rose > span { background: rgba(244,63,94,.12); color: #e11d48; }

.n2-stat small {
    grid-area: title;
    color: var(--muted);
    font-size: 11px;
    font-weight: 900;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.n2-stat strong {
    grid-area: count;
    font-size: 22px;
    line-height: 1;
}

.n2-tabs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    padding: 8px;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: var(--surface);
    box-shadow: var(--shadow-panel);
    margin-bottom: 18px;
}

.n2-tabs a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 36px;
    padding: 7px 11px;
    border-radius: 13px;
    background: var(--surface-2);
    font-size: 12px;
    font-weight: 900;
}

.n2-tabs a span {
    min-width: 23px;
    height: 23px;
    display: inline-grid;
    place-items: center;
    border-radius: 999px;
    background: var(--blue-soft);
    color: var(--blue);
    font-size: 11px;
}

.n2-sections {
    display: grid;
    gap: 16px;
}

.n2-section {
    scroll-margin-top: 16px;
}

.n2-section-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 14px;
}

.n2-section-head > div {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    min-width: 0;
}

.n2-section-icon {
    width: 42px;
    height: 42px;
    border-radius: 15px;
    flex: 0 0 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.n2-section-icon svg,
.n2-item-icon svg {
    width: 19px !important;
    height: 19px !important;
    max-width: 19px !important;
    max-height: 19px !important;
}

.n2-section.danger .n2-section-icon,
.n2-section.danger .n2-item-icon { background: rgba(239,68,68,.12); color: var(--danger); }
.n2-section.warning .n2-section-icon,
.n2-section.warning .n2-item-icon { background: rgba(245,158,11,.14); color: var(--warning); }
.n2-section.info .n2-section-icon,
.n2-section.info .n2-item-icon { background: rgba(6,182,212,.12); color: var(--info); }
.n2-section.violet .n2-section-icon,
.n2-section.violet .n2-item-icon { background: rgba(139,92,246,.12); color: #7c3aed; }
.n2-section.rose .n2-section-icon,
.n2-section.rose .n2-item-icon { background: rgba(244,63,94,.12); color: #e11d48; }

.n2-section-head h3 {
    margin: 0 0 4px;
    font-size: 22px;
}

.n2-section-head p {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
}

.n2-section-head > strong {
    min-width: 42px;
    height: 42px;
    border-radius: 15px;
    display: inline-grid;
    place-items: center;
    background: var(--blue-soft);
    color: var(--blue);
    font-size: 18px;
    font-weight: 950;
}

.n2-list {
    display: grid;
    gap: 10px;
}

.n2-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(255,255,255,.46), rgba(255,255,255,.12)), var(--surface-2);
}

html[data-theme="dark"] .n2-item {
    background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.015));
}

.n2-item-main {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.n2-item-icon {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.n2-item-main strong {
    display: block;
    margin-bottom: 7px;
    font-size: 14px;
}

.n2-chips {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.n2-chips span {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 4px 8px;
    border-radius: 999px;
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
}

.n2-item-side {
    display: flex;
    gap: 8px;
    align-items: center;
}

.n2-amount {
    min-width: 100px;
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    padding: 7px 10px;
    background: var(--surface);
    border: 1px solid var(--border);
    font-size: 12px;
    font-weight: 950;
    white-space: nowrap;
}

.n2-action {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 7px 11px;
    border-radius: 13px;
    background: linear-gradient(135deg, var(--blue), var(--blue-2));
    color: #fff;
    font-size: 12px;
    font-weight: 900;
    white-space: nowrap;
}

.n2-action svg {
    width: 14px !important;
    height: 14px !important;
    max-width: 14px !important;
    max-height: 14px !important;
}

html[dir="rtl"] .n2-action svg {
    transform: rotate(180deg);
}

.n2-empty {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px;
    border: 1px dashed var(--border);
    border-radius: 16px;
    background: var(--surface-2);
    color: var(--muted);
    font-size: 13px;
    font-weight: 900;
}

.n2-empty svg {
    width: 18px !important;
    height: 18px !important;
    max-width: 18px !important;
    max-height: 18px !important;
    color: var(--success);
}

@media (max-width: 1180px) {
    .n2-overview {
        grid-template-columns: 1fr;
    }
    .n2-overview-stats {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .n2-overview {
        padding: 14px;
    }
    .n2-overview-stats {
        grid-template-columns: 1fr;
    }
    .n2-tabs {
        display: grid;
        grid-template-columns: 1fr;
    }
    .n2-section-head {
        align-items: center;
    }
    .n2-item {
        grid-template-columns: 1fr;
    }
    .n2-item-main {
        align-items: flex-start;
    }
    .n2-item-side {
        display: grid;
        grid-template-columns: 1fr;
    }
    .n2-amount,
    .n2-action {
        width: 100%;
    }
}


/* ===== v13.3 ordered professional notifications ===== */
.np-page-header { margin-bottom: 18px; }
.np-page-header + .np-summary { margin-top: 0; }
.np-summary,
.np-sections,
.np-section,
.np-stat-grid,
.np-alert-list,
.np-alert-row,
.np-alert-main,
.np-section-header,
.np-section-title,
.np-total-card {
    box-sizing: border-box;
}
.np-summary svg,
.np-sections svg,
.np-page-header svg {
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    max-width: 18px !important;
    max-height: 18px !important;
    display: block !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.9 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
}
.np-summary {
    display: grid;
    grid-template-columns: 310px minmax(0, 1fr);
    gap: 16px;
    margin-bottom: 18px;
}
.np-total-card,
.np-stat-card,
.np-section {
    border: 1px solid var(--border);
    background: var(--surface);
    box-shadow: var(--shadow-panel);
}
.np-total-card {
    display: flex;
    align-items: center;
    gap: 14px;
    border-radius: 24px;
    padding: 18px;
    min-height: 132px;
}
.np-total-icon {
    width: 56px;
    height: 56px;
    flex: 0 0 56px;
    border-radius: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.np-total-icon svg { width: 22px !important; height: 22px !important; max-width: 22px !important; max-height: 22px !important; }
.np-total-card.danger .np-total-icon { background: rgba(239,68,68,.12); color: var(--danger); }
.np-total-card.success .np-total-icon { background: rgba(16,185,129,.12); color: var(--success); }
.np-total-card small,
.np-stat-card small {
    display: block;
    color: var(--muted);
    font-size: 12px;
    font-weight: 900;
}
.np-total-card strong {
    display: block;
    font-size: 42px;
    line-height: 1;
    margin: 8px 0 6px;
}
.np-total-card p {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
}
.np-stat-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
}
.np-stat-card {
    display: flex;
    align-items: center;
    gap: 12px;
    border-radius: 20px;
    padding: 15px;
    min-height: 92px;
    min-width: 0;
}
.np-stat-card:hover { border-color: var(--border-strong); }
.np-icon-box {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    border-radius: 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--blue-soft);
    color: var(--blue);
}
.np-icon-box.large { width: 46px; height: 46px; flex-basis: 46px; border-radius: 16px; }
.np-icon-box.item { width: 40px; height: 40px; flex-basis: 40px; border-radius: 14px; }
.np-icon-box.large svg { width: 19px !important; height: 19px !important; max-width: 19px !important; max-height: 19px !important; }
.np-stat-card.danger .np-icon-box,
.np-section.danger .np-icon-box { background: rgba(239,68,68,.12); color: var(--danger); }
.np-stat-card.warning .np-icon-box,
.np-section.warning .np-icon-box { background: rgba(245,158,11,.14); color: var(--warning); }
.np-stat-card.info .np-icon-box,
.np-section.info .np-icon-box { background: rgba(6,182,212,.12); color: var(--info); }
.np-stat-card.violet .np-icon-box,
.np-section.violet .np-icon-box { background: rgba(139,92,246,.12); color: #7c3aed; }
.np-stat-card.rose .np-icon-box,
.np-section.rose .np-icon-box { background: rgba(244,63,94,.12); color: #e11d48; }
.np-stat-card > div { min-width: 0; }
.np-stat-card strong {
    display: block;
    font-size: 26px;
    line-height: 1;
    margin-bottom: 8px;
}
.np-stat-card small {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.np-sections { display: grid; gap: 16px; }
.np-section {
    border-radius: 24px;
    padding: 20px;
    scroll-margin-top: 18px;
}
.np-section-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 16px;
}
.np-section-title {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    min-width: 0;
}
.np-section-title h3 {
    margin: 0 0 5px;
    font-size: 22px;
    line-height: 1.3;
}
.np-section-title p {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
}
.np-count-pill {
    min-width: 44px;
    height: 44px;
    border-radius: 15px;
    display: inline-grid;
    place-items: center;
    background: var(--blue-soft);
    color: var(--blue);
    font-size: 18px;
    font-weight: 950;
}
.np-alert-list { display: grid; gap: 10px; }
.np-alert-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 120px 150px;
    align-items: center;
    gap: 12px;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(255,255,255,.48), rgba(255,255,255,.12)), var(--surface-2);
}
html[data-theme="dark"] .np-alert-row { background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.015)); }
.np-alert-main {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}
.np-alert-text { min-width: 0; }
.np-alert-text strong {
    display: block;
    margin-bottom: 7px;
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.np-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.np-meta span {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 4px 8px;
    border-radius: 999px;
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
}
.np-alert-value {
    min-height: 38px;
    border-radius: 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px 10px;
    border: 1px solid var(--border);
    background: var(--surface);
    font-size: 12px;
    font-weight: 950;
    white-space: nowrap;
}
.np-alert-action {
    min-height: 38px;
    border-radius: 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 7px 12px;
    background: linear-gradient(135deg, var(--blue), var(--blue-2));
    color: #fff;
    font-size: 12px;
    font-weight: 900;
    white-space: nowrap;
}
.np-alert-action svg { width: 14px !important; height: 14px !important; max-width: 14px !important; max-height: 14px !important; }
html[dir="rtl"] .np-alert-action svg { transform: rotate(180deg); }
.np-empty-row {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 54px;
    padding: 15px;
    border: 1px dashed var(--border);
    border-radius: 16px;
    background: var(--surface-2);
    color: var(--muted);
}
.np-empty-row span {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(16,185,129,.12);
    color: var(--success);
}
.np-empty-row strong { font-size: 13px; }
@media (max-width: 1180px) {
    .np-summary { grid-template-columns: 1fr; }
    .np-stat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
    .np-stat-grid { grid-template-columns: 1fr; }
    .np-section { padding: 16px; }
    .np-section-header { align-items: center; }
    .np-alert-row { grid-template-columns: 1fr; align-items: stretch; }
    .np-alert-main { align-items: flex-start; }
    .np-alert-value,
    .np-alert-action { width: 100%; }
    .np-alert-text strong { white-space: normal; }
}

/* ===== v13.4 notifications: no SVG, ordered professional cards ===== */
.notifications-v4 svg,
.main-content > svg {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    max-width: 0 !important;
    max-height: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
}
.notifications-v4 {
    display: grid;
    gap: 18px;
}
.notifications-v4-header {
    margin-bottom: 0;
}
.notifications-v4-summary {
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr);
    gap: 16px;
    padding: 18px;
}
.notifications-v4-total {
    min-height: 128px;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px;
    border: 1px solid var(--border);
    border-radius: 22px;
    background: linear-gradient(180deg, rgba(255,255,255,.46), rgba(255,255,255,.12)), var(--surface-2);
}
html[data-theme="dark"] .notifications-v4-total {
    background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.015));
}
.notifications-v4-total span:not(.notif-symbol) {
    display: block;
    color: var(--muted);
    font-size: 12px;
    font-weight: 900;
    margin-bottom: 7px;
}
.notifications-v4-total strong {
    display: block;
    font-size: 40px;
    line-height: 1;
    margin-bottom: 7px;
}
.notifications-v4-total p {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
}
.notifications-v4-stats {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
}
.notifications-v4-stat {
    min-width: 0;
    min-height: 92px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px;
    border: 1px solid var(--border);
    border-radius: 20px;
    background: var(--surface-2);
    transition: border-color .16s ease, transform .16s ease;
}
.notifications-v4-stat:hover {
    border-color: var(--border-strong);
    transform: translateY(-1px);
}
.notifications-v4-stat > div {
    min-width: 0;
}
.notifications-v4-stat strong {
    display: block;
    font-size: 26px;
    line-height: 1;
    margin-bottom: 7px;
}
.notifications-v4-stat span:not(.notif-symbol) {
    display: block;
    color: var(--muted);
    font-size: 12px;
    font-weight: 900;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.notifications-v4-sections {
    display: grid;
    gap: 16px;
}
.notifications-v4-section {
    padding: 20px;
    border-radius: 24px;
    scroll-margin-top: 18px;
}
.notifications-v4-section-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 16px;
}
.notifications-v4-section-head > div {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    min-width: 0;
}
.notifications-v4-section-head h3 {
    margin: 0 0 5px;
    font-size: 22px;
    line-height: 1.3;
}
.notifications-v4-section-head p {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
}
.notifications-v4-section-head > span {
    min-width: 44px;
    height: 44px;
    display: inline-grid;
    place-items: center;
    border-radius: 15px;
    background: var(--blue-soft);
    color: var(--blue);
    font-size: 18px;
    font-weight: 950;
}
.notifications-v4-list {
    display: grid;
    gap: 10px;
}
.notifications-v4-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 120px 150px;
    align-items: center;
    gap: 12px;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(255,255,255,.48), rgba(255,255,255,.12)), var(--surface-2);
}
html[data-theme="dark"] .notifications-v4-row {
    background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.015));
}
.notifications-v4-main {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 12px;
}
.notifications-v4-main > div {
    min-width: 0;
}
.notifications-v4-main strong {
    display: block;
    margin-bottom: 7px;
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.notifications-v4-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.notifications-v4-meta span {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 4px 8px;
    border-radius: 999px;
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
}
.notifications-v4-value {
    min-height: 38px;
    border-radius: 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px 10px;
    border: 1px solid var(--border);
    background: var(--surface);
    font-size: 12px;
    font-weight: 950;
    white-space: nowrap;
}
.notifications-v4-action {
    min-height: 38px;
    border-radius: 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 7px 12px;
    background: linear-gradient(135deg, var(--blue), var(--blue-2));
    color: #fff;
    font-size: 12px;
    font-weight: 900;
    white-space: nowrap;
}
.notifications-v4-action .action-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    font-size: 18px;
    line-height: 1;
}
html[dir="rtl"] .notifications-v4-action .action-arrow {
    transform: rotate(180deg);
}
.notifications-v4-empty {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 54px;
    padding: 15px;
    border: 1px dashed var(--border);
    border-radius: 16px;
    background: var(--surface-2);
    color: var(--muted);
}
.notifications-v4-empty strong {
    font-size: 13px;
}
.notif-symbol {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    border-radius: 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--blue-soft);
    color: var(--blue);
    font-size: 15px;
    font-weight: 950;
    line-height: 1;
    font-family: Arial, Tahoma, sans-serif;
}
.notif-symbol.big {
    width: 56px;
    height: 56px;
    flex-basis: 56px;
    border-radius: 18px;
    font-size: 18px;
}
.notif-symbol.medium {
    width: 46px;
    height: 46px;
    flex-basis: 46px;
    border-radius: 16px;
}
.notif-symbol-alert::before { content: "!"; }
.notif-symbol-wallet::before { content: "₪"; font-size: 16px; }
.notif-symbol-bus::before { content: "▣"; font-size: 14px; }
.notif-symbol-salary::before { content: "$"; font-size: 16px; }
.notif-symbol-calendar::before { content: "▦"; font-size: 14px; }
.notif-symbol-bell::before { content: "•"; font-size: 28px; line-height: .4; }
.notif-symbol-check::before { content: "✓"; font-size: 18px; }
.notifications-v4-stat.danger .notif-symbol,
.notifications-v4-section.danger .notif-symbol { background: rgba(239,68,68,.12); color: var(--danger); }
.notifications-v4-stat.warning .notif-symbol,
.notifications-v4-section.warning .notif-symbol { background: rgba(245,158,11,.14); color: var(--warning); }
.notifications-v4-stat.info .notif-symbol,
.notifications-v4-section.info .notif-symbol { background: rgba(6,182,212,.12); color: var(--info); }
.notifications-v4-stat.violet .notif-symbol,
.notifications-v4-section.violet .notif-symbol { background: rgba(139,92,246,.12); color: #7c3aed; }
.notifications-v4-stat.rose .notif-symbol,
.notifications-v4-section.rose .notif-symbol { background: rgba(244,63,94,.12); color: #e11d48; }
.notifications-v4-total.danger .notif-symbol { background: rgba(239,68,68,.12); color: var(--danger); }
.notifications-v4-total.success .notif-symbol,
.notifications-v4-empty .notif-symbol { background: rgba(16,185,129,.12); color: var(--success); }
@media (max-width: 1180px) {
    .notifications-v4-summary { grid-template-columns: 1fr; }
    .notifications-v4-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
    .notifications-v4-summary,
    .notifications-v4-section { padding: 16px; }
    .notifications-v4-stats { grid-template-columns: 1fr; }
    .notifications-v4-section-head { align-items: center; }
    .notifications-v4-row { grid-template-columns: 1fr; align-items: stretch; }
    .notifications-v4-main { align-items: flex-start; }
    .notifications-v4-value,
    .notifications-v4-action { width: 100%; }
    .notifications-v4-main strong { white-space: normal; }
}

/* ===== v13.5 notification dashboard layout ===== */
.notifications-dashboard {
    width: 100% !important;
    max-width: none !important;
    display: block !important;
}
.nd-page-header {
    margin-bottom: 18px !important;
}
.nd-hero {
    display: grid !important;
    grid-template-columns: minmax(300px, .82fr) minmax(0, 1.3fr) !important;
    gap: 18px !important;
    align-items: stretch !important;
    margin-bottom: 18px !important;
    padding: 18px !important;
    overflow: hidden !important;
}
.nd-hero-main {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    min-width: 0 !important;
    padding: 20px !important;
    border-radius: 24px !important;
    border: 1px solid var(--border) !important;
    background: linear-gradient(180deg, rgba(255,255,255,.50), rgba(255,255,255,.14)), var(--surface-2) !important;
}
html[data-theme="dark"] .nd-hero-main {
    background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.015)) !important;
}
.nd-hero-main span:not(.nd-icon) {
    display: block !important;
    color: var(--muted) !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    margin-bottom: 6px !important;
}
.nd-hero-main strong {
    display: block !important;
    font-size: 44px !important;
    line-height: 1 !important;
    margin-bottom: 7px !important;
}
.nd-hero-main p {
    margin: 0 !important;
    color: var(--muted) !important;
    font-size: 14px !important;
}
.nd-quick-grid {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 12px !important;
}
.nd-quick-card {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    min-width: 0 !important;
    padding: 16px !important;
    border-radius: 20px !important;
    border: 1px solid var(--border) !important;
    background: var(--surface-2) !important;
    transition: transform .18s ease, border-color .18s ease, background .18s ease !important;
}
.nd-quick-card:hover {
    transform: translateY(-2px) !important;
    border-color: var(--border-strong) !important;
}
.nd-quick-card div {
    min-width: 0 !important;
}
.nd-quick-card strong {
    display: block !important;
    font-size: 25px !important;
    line-height: 1 !important;
    margin-bottom: 5px !important;
}
.nd-quick-card span:not(.nd-icon) {
    display: block !important;
    color: var(--muted) !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}
.nd-filter-buttons {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    margin-bottom: 18px !important;
    padding: 8px !important;
    border: 1px solid var(--border) !important;
    border-radius: 20px !important;
    background: var(--surface) !important;
    box-shadow: var(--shadow-panel) !important;
}
.nd-filter-buttons a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 38px !important;
    padding: 8px 14px !important;
    border-radius: 14px !important;
    background: var(--surface-2) !important;
    color: var(--text) !important;
    font-size: 13px !important;
    font-weight: 900 !important;
}
.nd-filter-buttons a:hover {
    background: var(--blue-soft) !important;
    color: var(--blue) !important;
}
.nd-detail-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 18px !important;
    width: 100% !important;
}
.nd-detail-panel {
    scroll-margin-top: 18px !important;
    min-width: 0 !important;
}
.nd-detail-panel:nth-child(5) {
    grid-column: 1 / -1 !important;
}
.nd-panel-head {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    gap: 16px !important;
    margin-bottom: 16px !important;
}
.nd-panel-title {
    display: flex !important;
    align-items: flex-start !important;
    gap: 13px !important;
    min-width: 0 !important;
}
.nd-panel-title h3 {
    margin: 0 0 5px !important;
    font-size: 22px !important;
    line-height: 1.35 !important;
}
.nd-panel-title p {
    margin: 0 !important;
    color: var(--muted) !important;
    font-size: 13px !important;
}
.nd-panel-count {
    min-width: 44px !important;
    height: 44px !important;
    display: inline-grid !important;
    place-items: center !important;
    border-radius: 15px !important;
    background: var(--blue-soft) !important;
    color: var(--blue) !important;
    font-size: 18px !important;
    font-weight: 950 !important;
}
.nd-table-list {
    display: grid !important;
    gap: 10px !important;
}
.nd-alert-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto auto !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 14px !important;
    border: 1px solid var(--border) !important;
    border-radius: 18px !important;
    background: linear-gradient(180deg, rgba(255,255,255,.48), rgba(255,255,255,.12)), var(--surface-2) !important;
}
html[data-theme="dark"] .nd-alert-row {
    background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.015)) !important;
}
.nd-alert-person {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    min-width: 0 !important;
}
.nd-alert-person strong {
    display: block !important;
    margin-bottom: 7px !important;
    font-size: 14px !important;
    line-height: 1.35 !important;
}
.nd-meta {
    display: flex !important;
    gap: 6px !important;
    flex-wrap: wrap !important;
}
.nd-meta span {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 24px !important;
    padding: 4px 8px !important;
    border-radius: 999px !important;
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    color: var(--muted) !important;
    font-size: 11px !important;
    font-weight: 800 !important;
}
.nd-alert-value {
    min-width: 104px !important;
    min-height: 38px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 8px 10px !important;
    border-radius: 13px !important;
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    font-size: 12px !important;
    font-weight: 950 !important;
    white-space: nowrap !important;
}
.nd-action {
    min-height: 38px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 8px 13px !important;
    border-radius: 13px !important;
    background: linear-gradient(135deg, var(--blue), var(--blue-2)) !important;
    color: #fff !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    white-space: nowrap !important;
}
.nd-action span {
    font-size: 18px !important;
    line-height: 1 !important;
}
html[dir="rtl"] .nd-action span {
    transform: rotate(180deg) !important;
}
.nd-empty-state {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 18px !important;
    border: 1px dashed var(--border) !important;
    border-radius: 18px !important;
    background: var(--surface-2) !important;
    color: var(--muted) !important;
}
.nd-empty-state strong {
    font-size: 13px !important;
}
.nd-icon {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;
    max-height: 38px !important;
    flex: 0 0 38px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 13px !important;
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    color: var(--text) !important;
    font-weight: 950 !important;
    line-height: 1 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}
.nd-icon::before {
    display: block !important;
    font-size: 15px !important;
    line-height: 1 !important;
    font-family: Arial, Tahoma, sans-serif !important;
}
.nd-icon-large {
    width: 56px !important;
    height: 56px !important;
    min-width: 56px !important;
    max-width: 56px !important;
    max-height: 56px !important;
    border-radius: 18px !important;
}
.nd-icon-large::before { font-size: 21px !important; }
.nd-icon-medium {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    max-height: 44px !important;
    border-radius: 15px !important;
}
.nd-icon-bell::before { content: "●" !important; }
.nd-icon-check::before { content: "✓" !important; }
.nd-icon-alert::before { content: "!" !important; }
.nd-icon-wallet::before { content: "◐" !important; }
.nd-icon-bus::before { content: "▤" !important; }
.nd-icon-salary::before { content: "$" !important; }
.nd-icon-calendar::before { content: "▦" !important; }
.nd-hero-main.danger .nd-icon,
.nd-quick-card.danger .nd-icon,
.nd-detail-panel.danger .nd-icon { background: rgba(239,68,68,.11) !important; color: var(--danger) !important; border-color: rgba(239,68,68,.18) !important; }
.nd-hero-main.success .nd-icon,
.nd-empty-state .nd-icon { background: rgba(16,185,129,.12) !important; color: var(--success) !important; border-color: rgba(16,185,129,.18) !important; }
.nd-quick-card.warning .nd-icon,
.nd-detail-panel.warning .nd-icon { background: rgba(245,158,11,.13) !important; color: var(--warning) !important; border-color: rgba(245,158,11,.2) !important; }
.nd-quick-card.info .nd-icon,
.nd-detail-panel.info .nd-icon { background: rgba(6,182,212,.11) !important; color: var(--info) !important; border-color: rgba(6,182,212,.2) !important; }
.nd-quick-card.violet .nd-icon,
.nd-detail-panel.violet .nd-icon { background: rgba(139,92,246,.12) !important; color: #7c3aed !important; border-color: rgba(139,92,246,.2) !important; }
.nd-quick-card.rose .nd-icon,
.nd-detail-panel.rose .nd-icon { background: rgba(244,63,94,.11) !important; color: #e11d48 !important; border-color: rgba(244,63,94,.2) !important; }

@media (max-width: 1280px) {
    .nd-hero { grid-template-columns: 1fr !important; }
    .nd-quick-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}
@media (max-width: 980px) {
    .nd-detail-grid { grid-template-columns: 1fr !important; }
    .nd-detail-panel:nth-child(5) { grid-column: auto !important; }
    .nd-alert-row { grid-template-columns: 1fr !important; align-items: stretch !important; }
    .nd-alert-value, .nd-action { width: 100% !important; }
}
@media (max-width: 680px) {
    .nd-hero { padding: 14px !important; }
    .nd-hero-main { padding: 16px !important; }
    .nd-hero-main strong { font-size: 34px !important; }
    .nd-quick-grid { grid-template-columns: 1fr !important; }
    .nd-filter-buttons { display: grid !important; grid-template-columns: 1fr !important; }
    .nd-panel-head { align-items: center !important; }
    .nd-panel-title { gap: 10px !important; }
}

/* ===== v14 backup and activity log ===== */
.backup-dashboard-grid {
    display: grid;
    grid-template-columns: minmax(260px, .8fr) minmax(0, 1.2fr);
    gap: 18px;
    margin-bottom: 20px;
}
.backup-hero-card,
.backup-action-panel {
    display: flex;
    gap: 16px;
    align-items: center;
}
.backup-action-panel {
    display: block;
}
.backup-action-panel h3,
.section-head-row h3 {
    margin: 0 0 6px;
    font-size: 22px;
}
.backup-action-panel p,
.section-head-row p {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
}
.backup-icon-css {
    width: 58px;
    height: 58px;
    flex: 0 0 58px;
    border-radius: 20px;
    display: inline-grid;
    place-items: center;
    font-size: 24px;
    font-weight: 950;
}
.backup-icon-db {
    background: rgba(6,182,212,.12);
    color: var(--info);
}
.backup-icon-db::before { content: "▣"; }
.backup-icon-check {
    width: 46px;
    height: 46px;
    border-radius: 16px;
    background: rgba(16,185,129,.12);
    color: var(--success);
}
.backup-icon-check::before { content: "✓"; }
.backup-hero-card span:not(.backup-icon-css) {
    display: block;
    color: var(--muted);
    font-size: 12px;
    font-weight: 900;
    margin-bottom: 6px;
}
.backup-hero-card strong {
    display: block;
    font-size: 38px;
    line-height: 1;
    margin-bottom: 6px;
}
.backup-hero-card p {
    margin: 0;
    color: var(--muted);
}
.backup-restore-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: start;
    margin-top: 16px;
}
.backup-restore-form input { margin: 0; }
.section-head-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}
.empty-backup-state {
    display: grid;
    place-items: center;
    text-align: center;
    padding: 34px;
    border: 1px dashed var(--border);
    border-radius: 22px;
    background: var(--surface-2);
}
.empty-backup-state strong {
    margin-top: 12px;
    font-size: 18px;
}
.empty-backup-state p {
    margin: 4px 0 0;
    color: var(--muted);
}
.backup-log-preview { margin-top: 20px; }
.activity-log-mini-list {
    display: grid;
    gap: 10px;
}
.activity-mini-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 14px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--surface-2);
}
.activity-dot {
    width: 12px;
    height: 12px;
    flex: 0 0 12px;
    border-radius: 999px;
    background: var(--blue);
    box-shadow: 0 0 0 5px var(--blue-soft);
}
.activity-mini-item strong {
    display: block;
    font-size: 14px;
    margin-bottom: 3px;
}
.activity-mini-item span:not(.activity-dot) {
    color: var(--muted);
    font-size: 12px;
}
.muted-text {
    color: var(--muted);
    font-size: 12px;
}
.log-details-cell {
    max-width: 360px;
    word-break: break-word;
    font-size: 12px;
    color: var(--muted);
}
@media (max-width: 920px) {
    .backup-dashboard-grid,
    .backup-restore-form {
        grid-template-columns: 1fr;
    }
    .backup-restore-form .btn { width: 100%; }
    .section-head-row {
        flex-direction: column;
    }
}


/* ===== v14.1 dashboard alert widget + activity log polish ===== */
.dashboard-alert-widget {
    margin-bottom: 22px !important;
    padding: 18px !important;
    overflow: hidden !important;
}
.dashboard-alert-widget svg,
.dashboard-alert-widget img {
    display: none !important;
}
.dashboard-alert-widget-head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    margin-bottom: 14px !important;
}
.dashboard-alert-widget-title {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    min-width: 0 !important;
}
.dashboard-alert-symbol {
    width: 48px !important;
    height: 48px !important;
    flex: 0 0 48px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 16px !important;
    font-size: 20px !important;
    font-weight: 950 !important;
    line-height: 1 !important;
    background: rgba(16,185,129,.12) !important;
    color: var(--success) !important;
    border: 1px solid rgba(16,185,129,.2) !important;
}
.dashboard-alert-widget.has-alerts .dashboard-alert-symbol {
    background: rgba(239,68,68,.11) !important;
    color: var(--danger) !important;
    border-color: rgba(239,68,68,.2) !important;
}
.dashboard-alert-widget h3 {
    margin: 0 0 5px !important;
    font-size: 22px !important;
    line-height: 1.3 !important;
}
.dashboard-alert-widget p {
    margin: 0 !important;
    color: var(--muted) !important;
    font-size: 13px !important;
}
.dashboard-alert-widget-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 12px !important;
}
.dashboard-alert-mini {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    min-width: 0 !important;
    padding: 14px !important;
    border: 1px solid var(--border) !important;
    border-radius: 18px !important;
    background: var(--surface-2) !important;
}
.dashboard-alert-mini > span {
    width: 38px !important;
    height: 38px !important;
    flex: 0 0 38px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 13px !important;
    font-size: 16px !important;
    font-weight: 950 !important;
    line-height: 1 !important;
}
.dashboard-alert-mini.danger > span { background: rgba(239,68,68,.11) !important; color: var(--danger) !important; }
.dashboard-alert-mini.warning > span { background: rgba(245,158,11,.14) !important; color: var(--warning) !important; }
.dashboard-alert-mini.info > span { background: rgba(6,182,212,.12) !important; color: var(--info) !important; }
.dashboard-alert-mini.violet > span { background: rgba(139,92,246,.12) !important; color: #7c3aed !important; }
.dashboard-alert-mini strong {
    display: block !important;
    font-size: 24px !important;
    line-height: 1 !important;
    margin-bottom: 5px !important;
}
.dashboard-alert-mini small {
    display: block !important;
    color: var(--muted) !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}
.log-details-cell {
    max-width: 520px !important;
    white-space: normal !important;
    line-height: 1.7 !important;
    font-size: 12px !important;
}
@media (max-width: 1100px) {
    .dashboard-alert-widget-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 720px) {
    .dashboard-alert-widget-head { align-items: stretch !important; flex-direction: column !important; }
    .dashboard-alert-widget-head .btn { width: 100% !important; }
    .dashboard-alert-widget-grid { grid-template-columns: 1fr !important; }
}


/* ===== v14.2 professional dashboard notifications board ===== */
.pro-alert-board {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(300px, .75fr);
    gap: 22px;
    margin-bottom: 22px !important;
    padding: 26px !important;
    border-radius: 28px !important;
    background:
        radial-gradient(circle at 8% 0%, rgba(14, 116, 144, .08), transparent 28%),
        radial-gradient(circle at 96% 10%, rgba(245, 158, 11, .06), transparent 26%),
        var(--surface) !important;
    border: 1px solid var(--border) !important;
    box-shadow: var(--shadow-panel) !important;
}

.pro-alert-main {
    display: flex;
    justify-content: space-between;
    gap: 22px;
    align-items: flex-start;
    min-width: 0;
}

.pro-alert-title {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    min-width: 0;
}

.pro-alert-bell {
    width: 62px;
    height: 62px;
    flex: 0 0 62px;
    border-radius: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background: linear-gradient(135deg, rgba(14, 116, 144, .12), rgba(20, 184, 166, .09));
    border: 1px solid rgba(14, 116, 144, .16);
}

.pro-alert-bell::before {
    content: "";
    width: 22px;
    height: 22px;
    border: 3px solid var(--blue);
    border-bottom: 0;
    border-radius: 14px 14px 4px 4px;
    transform: translateY(1px);
}

.pro-alert-bell::after {
    content: "";
    position: absolute;
    width: 8px;
    height: 8px;
    bottom: 17px;
    border-radius: 50%;
    background: var(--blue);
    box-shadow: 0 -20px 0 5px rgba(245, 158, 11, .22);
}

.pro-alert-board.has-alerts .pro-alert-bell {
    background: linear-gradient(135deg, rgba(245, 158, 11, .12), rgba(239, 68, 68, .06));
    border-color: rgba(245, 158, 11, .24);
}

.pro-alert-eyebrow {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 6px 11px;
    margin-bottom: 10px;
    border-radius: 999px;
    background: var(--blue-soft);
    color: var(--blue);
    font-size: 12px;
    font-weight: 900;
}

.pro-alert-title h3 {
    margin: 0 0 7px !important;
    font-size: clamp(25px, 2.2vw, 34px) !important;
    line-height: 1.2 !important;
    letter-spacing: -.02em;
}

html[dir="rtl"] .pro-alert-title h3 {
    letter-spacing: 0;
}

.pro-alert-title p {
    margin: 0 !important;
    color: var(--muted) !important;
    font-size: 14px !important;
    line-height: 1.8 !important;
}

.pro-alert-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 0 0 auto;
}

.pro-alert-total {
    min-width: 112px;
    padding: 12px 14px;
    border-radius: 18px;
    border: 1px solid var(--border);
    background: var(--surface-2);
    text-align: center;
}

.pro-alert-total span {
    display: block;
    font-size: 30px;
    line-height: 1;
    font-weight: 950;
    color: var(--text);
    margin-bottom: 5px;
}

.pro-alert-total small {
    display: block;
    color: var(--muted);
    font-size: 11px;
    font-weight: 900;
    white-space: nowrap;
}

.pro-alert-total.warning {
    background: rgba(245, 158, 11, .08);
    border-color: rgba(245, 158, 11, .2);
}

.pro-alert-total.ok {
    background: rgba(16, 185, 129, .08);
    border-color: rgba(16, 185, 129, .2);
}

.pro-alert-button {
    min-height: 54px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    padding: 12px 20px;
    border-radius: 18px;
    background: linear-gradient(135deg, var(--blue), var(--blue-2));
    color: #fff;
    font-size: 15px;
    font-weight: 950;
    box-shadow: 0 18px 32px rgba(14, 116, 144, .18);
    white-space: nowrap;
}

.pro-alert-button em {
    width: 28px;
    height: 28px;
    border-radius: 10px;
    display: inline-grid;
    place-items: center;
    font-style: normal;
    background: rgba(255,255,255,.17);
    line-height: 1;
}

html[dir="ltr"] .pro-alert-button em {
    transform: rotate(180deg);
}

.pro-alert-focus {
    display: grid;
    gap: 12px;
    min-width: 0;
}

.pro-alert-focus-card {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 112px;
    padding: 18px;
    border-radius: 22px;
    border: 1px solid rgba(245, 158, 11, .26);
    background:
        radial-gradient(circle at 12% 50%, rgba(245, 158, 11, .13), transparent 35%),
        rgba(245, 158, 11, .045);
}

.pro-alert-focus-card.ok {
    border-color: rgba(16, 185, 129, .22);
    background:
        radial-gradient(circle at 12% 50%, rgba(16, 185, 129, .12), transparent 35%),
        rgba(16, 185, 129, .045);
}

.pro-alert-focus-icon {
    width: 66px;
    height: 66px;
    flex: 0 0 66px;
    border-radius: 24px;
    display: inline-grid;
    place-items: center;
    background: rgba(245, 158, 11, .12);
    color: var(--warning);
    font-size: 28px;
    font-weight: 950;
    line-height: 1;
}

.pro-alert-focus-card.ok .pro-alert-focus-icon {
    background: rgba(16, 185, 129, .12);
    color: var(--success);
}

.pro-alert-focus-card strong {
    display: block;
    margin-bottom: 6px;
    color: var(--text);
    font-size: 17px;
}

.pro-alert-focus-card p {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.7;
}

.pro-alert-live-list {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.pro-alert-live-item {
    flex: 1 1 110px;
    min-height: 58px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px;
    border-radius: 17px;
    border: 1px solid var(--border);
    background: var(--surface-2);
}

.pro-alert-live-item span {
    min-width: 34px;
    height: 34px;
    border-radius: 12px;
    display: inline-grid;
    place-items: center;
    background: var(--blue-soft);
    color: var(--blue);
    font-weight: 950;
    line-height: 1;
}

.pro-alert-live-item small {
    color: var(--muted);
    font-weight: 900;
    font-size: 11px;
    line-height: 1.4;
}

.pro-alert-live-item.danger span { background: rgba(239,68,68,.11); color: var(--danger); }
.pro-alert-live-item.warning span { background: rgba(245,158,11,.14); color: var(--warning); }
.pro-alert-live-item.info span { background: rgba(6,182,212,.11); color: var(--info); }
.pro-alert-live-item.violet span { background: rgba(139,92,246,.12); color: #7c3aed; }
.pro-alert-live-item.rose span { background: rgba(244,63,94,.11); color: #e11d48; }
.pro-alert-live-item.ok span { background: rgba(16,185,129,.12); color: var(--success); }

.pro-alert-stats {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(5, minmax(160px, 1fr));
    gap: 12px;
    padding-top: 18px;
    border-top: 1px solid var(--border);
}

.pro-alert-stat {
    min-width: 0;
    min-height: 104px;
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 16px;
    border-radius: 21px;
    border: 1px solid var(--border);
    background: linear-gradient(180deg, rgba(255,255,255,.48), rgba(255,255,255,.12)), var(--surface-2);
    position: relative;
    overflow: hidden;
}

.pro-alert-stat.is-hot::after {
    content: "";
    position: absolute;
    inset-inline-end: 0;
    top: 14px;
    bottom: 14px;
    width: 4px;
    border-radius: 999px;
    background: var(--warning);
}

.pro-alert-stat-icon {
    width: 54px;
    height: 54px;
    flex: 0 0 54px;
    border-radius: 19px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.pro-alert-stat-icon::before,
.pro-alert-stat-icon::after {
    content: "";
    position: absolute;
    box-sizing: border-box;
}

.pro-alert-stat-icon.calendar {
    background: rgba(239,68,68,.10);
    color: var(--danger);
}
.pro-alert-stat-icon.calendar::before {
    width: 25px;
    height: 23px;
    border: 3px solid currentColor;
    border-radius: 7px;
}
.pro-alert-stat-icon.calendar::after {
    width: 10px;
    height: 10px;
    border: 3px solid currentColor;
    border-radius: 50%;
    bottom: 13px;
    inset-inline-start: 24px;
    background: var(--surface-2);
}

.pro-alert-stat-icon.card {
    background: rgba(245,158,11,.12);
    color: var(--warning);
}
.pro-alert-stat-icon.card::before {
    width: 28px;
    height: 20px;
    border: 3px solid currentColor;
    border-radius: 6px;
}
.pro-alert-stat-icon.card::after {
    width: 13px;
    height: 3px;
    background: currentColor;
    bottom: 19px;
}

.pro-alert-stat-icon.bus {
    background: rgba(6,182,212,.11);
    color: var(--info);
}
.pro-alert-stat-icon.bus::before {
    width: 28px;
    height: 26px;
    border: 3px solid currentColor;
    border-radius: 8px;
}
.pro-alert-stat-icon.bus::after {
    width: 24px;
    height: 3px;
    background: currentColor;
    bottom: 19px;
    box-shadow: -8px 10px 0 -1px currentColor, 8px 10px 0 -1px currentColor;
}

.pro-alert-stat-icon.wallet {
    background: rgba(139,92,246,.12);
    color: #7c3aed;
}
.pro-alert-stat-icon.wallet::before {
    width: 29px;
    height: 22px;
    border: 3px solid currentColor;
    border-radius: 8px;
}
.pro-alert-stat-icon.wallet::after {
    width: 10px;
    height: 8px;
    border: 3px solid currentColor;
    border-radius: 5px;
    inset-inline-end: 11px;
}

.pro-alert-stat-icon.clock {
    background: rgba(244,63,94,.11);
    color: #e11d48;
}
.pro-alert-stat-icon.clock::before {
    width: 27px;
    height: 27px;
    border: 3px solid currentColor;
    border-radius: 50%;
}
.pro-alert-stat-icon.clock::after {
    width: 9px;
    height: 9px;
    border-inline-start: 3px solid currentColor;
    border-bottom: 3px solid currentColor;
    transform: translate(1px, -2px);
}

.pro-alert-stat strong {
    display: block;
    font-size: 31px;
    line-height: 1;
    margin-bottom: 8px;
    color: var(--text);
}

.pro-alert-stat small {
    display: block;
    color: var(--muted);
    font-size: 12px;
    font-weight: 950;
    line-height: 1.45;
}

html[data-theme="dark"] .pro-alert-board,
html[data-theme="dark"] .pro-alert-stat,
html[data-theme="dark"] .pro-alert-total,
html[data-theme="dark"] .pro-alert-live-item {
    background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.015)), var(--surface) !important;
}

@media (max-width: 1280px) {
    .pro-alert-board {
        grid-template-columns: 1fr;
    }
    .pro-alert-stats {
        grid-template-columns: repeat(3, minmax(160px, 1fr));
    }
}

@media (max-width: 900px) {
    .pro-alert-main {
        flex-direction: column;
    }
    .pro-alert-actions {
        width: 100%;
        justify-content: space-between;
        flex-wrap: wrap;
    }
    .pro-alert-button {
        flex: 1 1 220px;
    }
    .pro-alert-stats {
        grid-template-columns: repeat(2, minmax(140px, 1fr));
    }
}

@media (max-width: 620px) {
    .pro-alert-board {
        padding: 18px !important;
        border-radius: 22px !important;
    }
    .pro-alert-title {
        gap: 12px;
    }
    .pro-alert-bell {
        width: 50px;
        height: 50px;
        flex-basis: 50px;
        border-radius: 17px;
    }
    .pro-alert-title h3 {
        font-size: 22px !important;
    }
    .pro-alert-actions,
    .pro-alert-total,
    .pro-alert-button {
        width: 100%;
    }
    .pro-alert-stats {
        grid-template-columns: 1fr;
    }
    .pro-alert-focus-card {
        align-items: flex-start;
    }
}


/* ===== v14.3 Cairo font system-wide typography ===== */
:root {
    --font-main: "Cairo", Tahoma, Arial, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

html,
body,
button,
input,
select,
textarea,
table,
.btn,
.nav-button,
.hero-button,
.sidebar,
.topbar,
.panel,
.auth-card,
.report-card,
.stat-card,
.dashboard-kpi-card,
.pro-alert-board {
    font-family: var(--font-main) !important;
}

body {
    font-weight: 500;
    line-height: 1.75;
}

h1, h2, h3, h4, h5, h6,
.brand strong,
.topbar h1,
.page-header h2,
.dashboard-hero-copy h2,
.dashboard-panel-head h3,
.pro-alert-title h3 {
    font-family: var(--font-main) !important;
    font-weight: 800;
    letter-spacing: 0 !important;
}

strong,
th,
label,
.btn,
.nav-button,
.hero-button,
.sidebar-nav a,
.lang-link,
.theme-toggle-copy [data-theme-label],
.table-link,
.actions-cell a,
.actions-cell button {
    font-family: var(--font-main) !important;
    font-weight: 800;
}

small,
p,
.help-text,
.muted-text,
.pro-alert-title p,
.dashboard-panel-head p,
.dashboard-hero-copy > p {
    font-family: var(--font-main) !important;
}

input,
select,
textarea {
    font-weight: 600;
}

table {
    font-size: 14px;
}

td,
th {
    vertical-align: middle;
}

/* Cairo is slightly taller, so this keeps controls balanced */
.btn,
.nav-button,
.hero-button,
button:not(.theme-toggle):not(.sidebar-toggle):not(.link-danger):not(.danger-link),
.lang-link,
.theme-toggle,
.logout {
    line-height: 1.35;
}

@media print {
    html,
    body,
    table,
    button,
    input,
    select,
    textarea {
        font-family: var(--font-main) !important;
    }
}

/* ===== v15 security and advanced permissions ===== */
.security-dashboard-grid,
.users-security-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 20px;
}
.security-card,
.user-security-card {
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: 128px;
}
.security-card span:not(.security-icon-css),
.user-security-card span:not(.user-sec-icon) {
    display: block;
    color: var(--muted);
    font-size: 13px;
    font-weight: 900;
    margin-bottom: 6px;
}
.security-card strong,
.user-security-card strong {
    display: block;
    font-size: 30px;
    line-height: 1.1;
}
.security-card p {
    margin: 6px 0 0;
    color: var(--muted);
    font-size: 13px;
}
.security-icon-css,
.user-sec-icon {
    width: 58px;
    height: 58px;
    border-radius: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 58px;
    position: relative;
}
.security-icon-css.shield,
.user-sec-icon.total { background: rgba(14,116,144,.12); color: var(--blue); }
.security-icon-css.key,
.user-sec-icon.active { background: rgba(16,185,129,.12); color: var(--success); }
.security-icon-css.warning,
.user-sec-icon.inactive { background: rgba(245,158,11,.14); color: var(--warning); }
.security-icon-css::before,
.security-icon-css::after,
.user-sec-icon::before,
.user-sec-icon::after {
    content: "";
    position: absolute;
    box-sizing: border-box;
}
.security-icon-css.shield::before {
    width: 30px;
    height: 34px;
    border: 3px solid currentColor;
    border-radius: 16px 16px 12px 12px;
    clip-path: polygon(50% 0, 100% 18%, 100% 62%, 50% 100%, 0 62%, 0 18%);
}
.security-icon-css.key::before {
    width: 24px;
    height: 24px;
    border: 3px solid currentColor;
    border-radius: 50%;
    inset-inline-start: 12px;
}
.security-icon-css.key::after {
    width: 24px;
    height: 3px;
    background: currentColor;
    inset-inline-end: 12px;
    top: 28px;
    box-shadow: 8px 5px 0 -1px currentColor;
}
.security-icon-css.warning::before {
    width: 34px;
    height: 30px;
    border: 3px solid currentColor;
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.security-icon-css.warning::after {
    width: 4px;
    height: 12px;
    background: currentColor;
    top: 21px;
    border-radius: 999px;
    box-shadow: 0 16px 0 0 currentColor;
}
.user-sec-icon.total::before,
.user-sec-icon.active::before,
.user-sec-icon.inactive::before {
    width: 24px;
    height: 24px;
    border: 3px solid currentColor;
    border-radius: 50%;
    top: 12px;
}
.user-sec-icon.total::after,
.user-sec-icon.active::after,
.user-sec-icon.inactive::after {
    width: 34px;
    height: 18px;
    border: 3px solid currentColor;
    border-top: 0;
    border-radius: 0 0 18px 18px;
    bottom: 10px;
}
.security-settings-panel .check-card {
    min-height: 52px;
}
.security-check-row {
    display: flex;
    align-items: end;
}
.role-filter-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}
.role-filter-row > span {
    color: var(--muted);
    font-size: 13px;
    font-weight: 900;
}
.role-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 38px;
    padding: 8px 12px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--surface-2);
}
.role-chip strong {
    font-size: 12px;
}
.role-chip em {
    min-width: 24px;
    height: 24px;
    display: inline-grid;
    place-items: center;
    border-radius: 999px;
    background: var(--blue-soft);
    color: var(--blue);
    font-style: normal;
    font-size: 11px;
    font-weight: 900;
}
.danger-inline-form {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.danger-confirm-input {
    width: 112px !important;
    min-height: 34px !important;
    margin: 0 !important;
    padding: 6px 10px !important;
    border-radius: 12px !important;
    font-size: 12px !important;
}
.backup-restore-form {
    grid-template-columns: minmax(0, 1fr) minmax(170px, .7fr) auto !important;
}
@media (max-width: 980px) {
    .security-dashboard-grid,
    .users-security-grid,
    .backup-restore-form {
        grid-template-columns: 1fr !important;
    }
}

/* ===== v16 professional student profile + photo ===== */
.student-photo-field {
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: 20px;
    background: var(--surface-2);
}
.student-photo-uploader {
    display: flex;
    align-items: center;
    gap: 16px;
}
.student-photo-preview,
.student-table-avatar,
.student-profile-photo {
    background: linear-gradient(135deg, var(--blue), var(--blue-2));
    color: #fff;
    overflow: hidden;
    display: inline-grid;
    place-items: center;
    font-weight: 950;
    text-transform: uppercase;
}
.student-photo-preview {
    width: 92px;
    height: 92px;
    border-radius: 26px;
    flex: 0 0 92px;
    font-size: 28px;
    box-shadow: 0 16px 34px rgba(15,23,42,.12);
}
.student-photo-preview img,
.student-table-avatar img,
.student-profile-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.student-photo-controls {
    min-width: 0;
    flex: 1 1 auto;
}
.student-photo-controls input[type="file"] {
    margin-bottom: 8px;
}
.remove-photo-check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    color: var(--muted);
    font-weight: 800;
}
.student-table-avatar {
    width: 44px;
    height: 44px;
    border-radius: 15px;
    font-size: 14px;
    box-shadow: none;
}
.student-name-link {
    font-weight: 900;
    color: var(--blue);
}
.student-name-link:hover {
    color: var(--blue-2);
}

.student-profile-hero {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 22px;
    margin-bottom: 22px;
    overflow: hidden;
    position: relative;
    background:
        radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--blue) 12%, transparent), transparent 30%),
        var(--surface);
}
.student-profile-main {
    display: flex;
    align-items: center;
    gap: 20px;
    min-width: 0;
}
.student-profile-photo {
    width: 122px;
    height: 122px;
    border-radius: 34px;
    flex: 0 0 122px;
    font-size: 36px;
    box-shadow: 0 20px 42px rgba(15,23,42,.16);
}
.student-profile-info {
    min-width: 0;
}
.student-profile-eyebrow {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--blue-soft);
    color: var(--blue);
    font-size: 12px;
    font-weight: 950;
    margin-bottom: 10px;
}
.student-profile-info h2 {
    margin: 0 0 6px;
    font-size: clamp(26px, 3vw, 42px);
    line-height: 1.15;
}
.student-profile-info p {
    margin: 0;
    color: var(--muted);
    font-weight: 800;
}
.student-profile-tags {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 13px;
}
.student-profile-tags > span:not(.status) {
    display: inline-flex;
    min-height: 30px;
    align-items: center;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--muted);
    font-size: 12px;
    font-weight: 900;
}
.student-profile-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.student-profile-kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}
.student-profile-kpi {
    position: relative;
    overflow: hidden;
    padding: 19px;
    border-radius: 22px;
    border: 1px solid var(--border);
    background: var(--surface);
    box-shadow: var(--shadow-panel);
}
.student-profile-kpi::after {
    content: "";
    position: absolute;
    width: 86px;
    height: 86px;
    border-radius: 999px;
    inset-inline-end: -28px;
    top: -28px;
    opacity: .8;
}
.student-profile-kpi.danger::after { background: rgba(239,68,68,.12); }
.student-profile-kpi.success::after { background: rgba(16,185,129,.12); }
.student-profile-kpi.warning::after { background: rgba(245,158,11,.14); }
.student-profile-kpi.info::after { background: rgba(6,182,212,.12); }
.student-profile-kpi span,
.student-profile-kpi strong,
.student-profile-kpi small {
    position: relative;
    z-index: 1;
    display: block;
}
.student-profile-kpi span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 950;
    margin-bottom: 9px;
}
.student-profile-kpi strong {
    font-size: 28px;
    line-height: 1;
    margin-bottom: 9px;
}
.student-profile-kpi small {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}
.student-profile-tabs {
    display: flex;
    gap: 9px;
    flex-wrap: wrap;
    margin-bottom: 18px;
    padding: 8px;
    border: 1px solid var(--border);
    border-radius: 20px;
    background: var(--surface);
    box-shadow: var(--shadow-panel);
}
.student-profile-tabs a {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    padding: 8px 13px;
    border-radius: 14px;
    background: var(--surface-2);
    color: var(--text);
    font-size: 13px;
    font-weight: 950;
}
.student-profile-tabs a:hover {
    background: var(--blue-soft);
    color: var(--blue);
}
.student-profile-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}
.student-profile-panel {
    scroll-margin-top: 18px;
}
.student-profile-panel-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 16px;
}
.student-profile-panel-head h3 {
    margin: 0 0 5px;
    font-size: 22px;
}
.student-profile-panel-head p {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
}
.student-info-list,
.student-finance-bars,
.student-attendance-summary {
    display: grid;
    gap: 10px;
}
.student-info-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.student-finance-bars,
.student-attendance-summary {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-bottom: 14px;
}
.student-attendance-summary { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.student-info-list > div,
.student-finance-bars > div,
.student-attendance-summary > div,
.transport-active-card,
.grade-average-card {
    border: 1px solid var(--border);
    border-radius: 17px;
    padding: 14px;
    background: linear-gradient(180deg, rgba(255,255,255,.44), rgba(255,255,255,.12)), var(--surface-2);
}
.student-info-list span,
.student-finance-bars span,
.student-attendance-summary span,
.grade-average-card span {
    display: block;
    color: var(--muted);
    font-size: 12px;
    font-weight: 900;
    margin-bottom: 7px;
}
.student-info-list strong,
.student-finance-bars strong,
.student-attendance-summary strong,
.grade-average-card strong {
    display: block;
    font-size: 16px;
    line-height: 1.35;
}
.student-finance-bars strong,
.student-attendance-summary strong,
.grade-average-card strong { font-size: 22px; }
.student-mini-table {
    display: grid;
    gap: 9px;
}
.student-mini-table > div {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 10px;
    padding: 12px 13px;
    border: 1px solid var(--border);
    border-radius: 15px;
    background: var(--surface-2);
}
.student-mini-table span {
    min-width: 0;
    color: var(--muted);
    font-size: 12px;
    font-weight: 850;
}
.student-mini-table strong {
    font-size: 13px;
    white-space: nowrap;
}
.student-mini-table em {
    font-style: normal;
    color: var(--muted);
    font-size: 12px;
    font-weight: 900;
    white-space: nowrap;
}
.transport-active-card strong {
    display: block;
    margin-bottom: 7px;
    font-size: 18px;
}
.transport-active-card span,
.transport-active-card div {
    display: block;
    color: var(--muted);
    font-size: 13px;
    font-weight: 800;
    margin-top: 4px;
}
.grade-average-card {
    margin-bottom: 14px;
    background: linear-gradient(135deg, var(--blue-soft), rgba(255,255,255,.12));
}
@media (max-width: 1180px) {
    .student-profile-kpis,
    .student-profile-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 820px) {
    .student-profile-hero,
    .student-profile-main,
    .student-profile-actions {
        align-items: stretch;
        flex-direction: column;
    }
    .student-profile-actions .btn { width: 100%; }
    .student-profile-photo { width: 108px; height: 108px; flex-basis: 108px; }
    .student-profile-kpis,
    .student-profile-grid,
    .student-info-list,
    .student-finance-bars,
    .student-attendance-summary {
        grid-template-columns: 1fr;
    }
    .student-mini-table > div {
        grid-template-columns: 1fr;
        align-items: stretch;
    }
    .student-photo-uploader { align-items: flex-start; flex-direction: column; }
}

/* ===== v17 full mobile responsive interface ===== */
:root {
    --mobile-safe-x: clamp(12px, 4vw, 18px);
}

.sidebar-toggle {
    touch-action: manipulation;
}

@media (max-width: 1050px) {
    body.sidebar-open {
        overflow: hidden;
    }

    .sidebar {
        position: fixed !important;
        top: 0 !important;
        bottom: 0 !important;
        width: min(88vw, 330px) !important;
        max-width: 330px !important;
        z-index: 1000 !important;
        border-radius: 0 28px 28px 0 !important;
        box-shadow: 0 24px 80px rgba(15, 23, 42, .35) !important;
        overflow-y: auto !important;
        overscroll-behavior: contain !important;
        -webkit-overflow-scrolling: touch !important;
    }

    html[dir="rtl"] .sidebar {
        right: 0 !important;
        left: auto !important;
        border-radius: 28px 0 0 28px !important;
    }

    html[dir="ltr"] .sidebar {
        left: 0 !important;
        right: auto !important;
    }

    .sidebar-backdrop {
        position: fixed !important;
        inset: 0 !important;
        z-index: 990 !important;
        background: rgba(2, 6, 23, .48) !important;
        backdrop-filter: blur(8px) !important;
    }

    .sidebar-nav {
        padding-bottom: 28px !important;
    }

    .sidebar-nav a {
        min-height: 48px !important;
        border-radius: 16px !important;
    }

    .sidebar-toggle {
        width: 46px !important;
        height: 46px !important;
        border-radius: 16px !important;
        font-size: 22px !important;
        background: var(--surface-2) !important;
        border: 1px solid var(--border) !important;
        box-shadow: 0 12px 26px rgba(15,23,42,.08) !important;
    }
}

@media (max-width: 760px) {
    body {
        background:
            radial-gradient(circle at 50% -10%, rgba(14, 116, 144, .10), transparent 32%),
            var(--bg) !important;
    }

    .app-shell,
    .main-shell,
    main,
    .content,
    .page-content {
        min-width: 0 !important;
    }

    .main,
    main,
    .content,
    .page-content {
        padding-inline: var(--mobile-safe-x) !important;
    }

    .topbar {
        position: sticky !important;
        top: 8px !important;
        z-index: 80 !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 14px !important;
        margin: 8px var(--mobile-safe-x) 16px !important;
        padding: 14px !important;
        border-radius: 22px !important;
        backdrop-filter: blur(16px) !important;
        box-shadow: 0 18px 45px rgba(15, 23, 42, .10) !important;
    }

    .topbar-title {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: 46px minmax(0, 1fr) !important;
        align-items: center !important;
        gap: 11px !important;
    }

    html[dir="rtl"] .topbar-title {
        grid-template-columns: minmax(0, 1fr) 46px !important;
    }

    html[dir="rtl"] .topbar-title .sidebar-toggle {
        order: 2 !important;
    }

    html[dir="rtl"] .topbar-title > div {
        order: 1 !important;
    }

    .topbar h1 {
        font-size: 18px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .topbar p {
        font-size: 12px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .topbar-actions {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }

    .topbar-actions > * {
        width: 100% !important;
        justify-content: center !important;
        min-height: 42px !important;
    }

    .page-header,
    .section-head-row,
    .dashboard-panel-head,
    .report-header,
    .form-header {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        align-items: start !important;
    }

    .page-header .btn,
    .section-head-row .btn,
    .form-header .btn,
    .report-header .btn {
        width: 100% !important;
        justify-content: center !important;
    }

    .panel,
    .card,
    .table-panel,
    .dashboard-panel,
    .student-profile-card,
    .student-profile-section,
    .backup-card,
    .security-card,
    .pro-alert-board {
        border-radius: 22px !important;
        padding: 16px !important;
        margin-inline: 0 !important;
    }

    .dashboard-hero,
    .pro-alert-board,
    .dashboard-grid-2,
    .dashboard-kpis,
    .quick-actions-grid,
    .stat-grid,
    .settings-grid,
    .backup-dashboard-grid,
    .security-grid,
    .student-profile-grid,
    .student-profile-summary,
    .profile-tabs-grid {
        grid-template-columns: 1fr !important;
    }

    .dashboard-hero-copy h2,
    .page-header h2,
    .pro-alert-title h3 {
        font-size: 22px !important;
        line-height: 1.35 !important;
    }

    .dashboard-hero-copy p,
    .page-header p,
    .pro-alert-title p {
        font-size: 13px !important;
        line-height: 1.8 !important;
    }

    .pro-alert-main,
    .pro-alert-title,
    .pro-alert-actions,
    .pro-alert-focus-card {
        align-items: stretch !important;
    }

    .pro-alert-title {
        display: grid !important;
        grid-template-columns: 54px minmax(0, 1fr) !important;
    }

    html[dir="rtl"] .pro-alert-title {
        grid-template-columns: minmax(0, 1fr) 54px !important;
    }

    html[dir="rtl"] .pro-alert-bell {
        order: 2 !important;
    }

    html[dir="rtl"] .pro-alert-title > div {
        order: 1 !important;
    }

    .pro-alert-bell {
        width: 54px !important;
        height: 54px !important;
        flex-basis: 54px !important;
        border-radius: 18px !important;
    }

    .pro-alert-actions {
        display: grid !important;
        grid-template-columns: 1fr !important;
        width: 100% !important;
    }

    .pro-alert-button,
    .pro-alert-total {
        width: 100% !important;
    }

    .pro-alert-live-list,
    .actions-cell,
    .action-row,
    .button-row,
    .form-actions {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }

    .actions-cell .btn,
    .actions-cell .table-link,
    .actions-cell button,
    .action-row .btn,
    .button-row .btn,
    .form-actions .btn,
    .form-actions button {
        width: 100% !important;
        min-height: 42px !important;
        justify-content: center !important;
        text-align: center !important;
    }

    .form-grid,
    .grid-2,
    .grid-3,
    .grid-4,
    .filters-grid,
    .filter-grid,
    .backup-restore-form,
    .security-form-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    input,
    select,
    textarea {
        width: 100% !important;
        min-height: 46px !important;
        font-size: 15px !important;
        border-radius: 15px !important;
    }

    textarea {
        min-height: 110px !important;
    }

    label {
        font-size: 13px !important;
        margin-bottom: 6px !important;
    }

    .table-panel,
    .detailed-report-table {
        overflow: visible !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        padding: 0 !important;
    }

    .table-panel table.mobile-card-table,
    .detailed-report-table table.mobile-card-table {
        width: 100% !important;
        min-width: 0 !important;
        border-spacing: 0 !important;
        display: block !important;
    }

    .table-panel table.mobile-card-table thead,
    .detailed-report-table table.mobile-card-table thead {
        display: none !important;
    }

    .table-panel table.mobile-card-table tbody,
    .detailed-report-table table.mobile-card-table tbody,
    .table-panel table.mobile-card-table tr,
    .detailed-report-table table.mobile-card-table tr,
    .table-panel table.mobile-card-table td,
    .detailed-report-table table.mobile-card-table td {
        display: block !important;
        width: 100% !important;
    }

    .table-panel table.mobile-card-table tbody,
    .detailed-report-table table.mobile-card-table tbody {
        display: grid !important;
        gap: 12px !important;
    }

    .table-panel table.mobile-card-table tr,
    .detailed-report-table table.mobile-card-table tr {
        padding: 14px !important;
        border: 1px solid var(--border) !important;
        border-radius: 20px !important;
        background: var(--surface) !important;
        box-shadow: 0 14px 32px rgba(15, 23, 42, .06) !important;
    }

    html[data-theme="dark"] .table-panel table.mobile-card-table tr,
    html[data-theme="dark"] .detailed-report-table table.mobile-card-table tr {
        background: var(--surface) !important;
        box-shadow: 0 18px 42px rgba(0, 0, 0, .18) !important;
    }

    .table-panel table.mobile-card-table td,
    .detailed-report-table table.mobile-card-table td {
        border: 0 !important;
        padding: 10px 0 !important;
        min-height: 38px !important;
        display: grid !important;
        grid-template-columns: minmax(96px, 38%) minmax(0, 1fr) !important;
        gap: 12px !important;
        align-items: center !important;
        text-align: start !important;
        word-break: break-word !important;
    }

    html[dir="rtl"] .table-panel table.mobile-card-table td,
    html[dir="rtl"] .detailed-report-table table.mobile-card-table td {
        grid-template-columns: minmax(0, 1fr) minmax(96px, 38%) !important;
    }

    .table-panel table.mobile-card-table td::before,
    .detailed-report-table table.mobile-card-table td::before {
        content: attr(data-label);
        color: var(--muted);
        font-size: 12px;
        font-weight: 900;
        line-height: 1.5;
    }

    html[dir="rtl"] .table-panel table.mobile-card-table td::before,
    html[dir="rtl"] .detailed-report-table table.mobile-card-table td::before {
        order: 2;
    }

    html[dir="rtl"] .table-panel table.mobile-card-table td > *,
    html[dir="rtl"] .detailed-report-table table.mobile-card-table td > * {
        order: 1;
    }

    .table-panel table.mobile-card-table td:last-child,
    .detailed-report-table table.mobile-card-table td:last-child {
        border-top: 1px solid var(--border) !important;
        margin-top: 6px !important;
        padding-top: 12px !important;
        grid-template-columns: 1fr !important;
    }

    .table-panel table.mobile-card-table td:last-child::before,
    .detailed-report-table table.mobile-card-table td:last-child::before {
        margin-bottom: 4px !important;
    }

    .student-row-photo,
    .student-photo,
    .profile-photo,
    .student-avatar {
        max-width: 92px !important;
        max-height: 92px !important;
    }

    .badge,
    .status-badge,
    .pill,
    .pro-alert-eyebrow {
        white-space: normal !important;
        line-height: 1.45 !important;
    }

    .receipt-card,
    .report-card {
        width: 100% !important;
        overflow-x: auto !important;
    }
}

@media (max-width: 430px) {
    .topbar-actions {
        grid-template-columns: 1fr !important;
    }

    .table-panel table.mobile-card-table td,
    .detailed-report-table table.mobile-card-table td,
    html[dir="rtl"] .table-panel table.mobile-card-table td,
    html[dir="rtl"] .detailed-report-table table.mobile-card-table td {
        grid-template-columns: 1fr !important;
        gap: 4px !important;
    }

    .table-panel table.mobile-card-table td::before,
    .detailed-report-table table.mobile-card-table td::before {
        order: initial !important;
    }
}

/* ===== v17.1 topbar fixed at page top, not following scroll ===== */
.topbar {
    position: static !important;
    top: auto !important;
    inset: auto !important;
    z-index: 20 !important;
}

@media (max-width: 760px) {
    .topbar {
        position: static !important;
        top: auto !important;
        inset: auto !important;
        margin: 8px var(--mobile-safe-x) 16px !important;
    }
}

/* ===== v18 professional parent portal ===== */
.parent-portal-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 28px !important;
    margin-bottom: 22px;
    overflow: hidden;
    border-radius: 28px !important;
    background:
        radial-gradient(circle at 8% 12%, rgba(14, 116, 144, .12), transparent 28%),
        radial-gradient(circle at 96% 18%, rgba(16, 185, 129, .10), transparent 28%),
        var(--surface) !important;
}
.parent-portal-hero-copy span,
.parent-file-eyebrow {
    display: inline-flex;
    min-height: 28px;
    align-items: center;
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--blue-soft);
    color: var(--blue);
    font-size: 12px;
    font-weight: 950;
    margin-bottom: 12px;
}
.parent-portal-hero-copy h2 {
    margin: 0 0 9px;
    font-size: clamp(28px, 3vw, 42px);
    line-height: 1.2;
    font-weight: 900;
}
.parent-portal-hero-copy p {
    margin: 0;
    max-width: 760px;
    color: var(--muted);
    line-height: 1.9;
    font-weight: 650;
}
.parent-portal-hero-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(110px, 1fr));
    gap: 12px;
    flex: 0 0 280px;
}
.parent-portal-hero-stats div {
    padding: 18px;
    border: 1px solid var(--border);
    border-radius: 22px;
    background: var(--surface-2);
    text-align: center;
}
.parent-portal-hero-stats strong {
    display: block;
    font-size: 34px;
    line-height: 1;
    margin-bottom: 8px;
}
.parent-portal-hero-stats span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 900;
}
.parent-student-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
}
.parent-student-card {
    padding: 18px !important;
    border-radius: 26px !important;
    overflow: hidden;
    position: relative;
}
.parent-student-card::before {
    content: "";
    position: absolute;
    inset-inline-start: -40px;
    top: -60px;
    width: 160px;
    height: 160px;
    border-radius: 999px;
    background: rgba(14, 116, 144, .08);
}
.parent-student-card-top,
.parent-student-card-body,
.parent-student-card-footer { position: relative; z-index: 1; }
.parent-student-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 16px;
}
.parent-student-avatar,
.parent-file-photo {
    width: 76px;
    height: 76px;
    flex: 0 0 76px;
    border-radius: 24px;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--blue), var(--blue-2));
    color: #fff;
    font-weight: 950;
    font-size: 24px;
    border: 4px solid rgba(255,255,255,.75);
    box-shadow: 0 18px 34px rgba(15, 23, 42, .12);
}
.parent-student-avatar img,
.parent-file-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.parent-student-card-body > span {
    color: var(--blue);
    font-size: 12px;
    font-weight: 950;
}
.parent-student-card-body h3 {
    margin: 6px 0 5px;
    font-size: 22px;
    line-height: 1.35;
}
.parent-student-card-body p,
.parent-student-card-body small {
    display: block;
    color: var(--muted);
    margin: 0;
    line-height: 1.7;
    font-weight: 700;
}
.parent-student-card-footer {
    margin-top: 18px;
}
.parent-student-card-footer .btn { width: 100%; }
.parent-file-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 28px !important;
    border-radius: 30px !important;
    margin-bottom: 16px;
    background:
        radial-gradient(circle at 10% 10%, rgba(14, 116, 144, .11), transparent 30%),
        radial-gradient(circle at 95% 0%, rgba(245, 158, 11, .08), transparent 26%),
        var(--surface) !important;
}
.parent-file-identity {
    display: flex;
    align-items: center;
    gap: 18px;
    min-width: 0;
}
.parent-file-photo {
    width: 108px;
    height: 108px;
    flex-basis: 108px;
    border-radius: 32px;
    font-size: 32px;
}
.parent-file-identity h2 {
    margin: 0 0 8px;
    font-size: clamp(28px, 3vw, 42px);
    line-height: 1.2;
    font-weight: 950;
}
.parent-file-identity p {
    margin: 0;
    color: var(--muted);
    font-weight: 750;
    line-height: 1.8;
}
.parent-file-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}
.parent-file-tags > span:not(.status) {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 7px 11px;
    border-radius: 999px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--muted);
    font-size: 12px;
    font-weight: 850;
}
.parent-file-score {
    flex: 0 0 210px;
    min-height: 142px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 7px;
    border-radius: 28px;
    border: 1px solid rgba(14, 116, 144, .18);
    background: linear-gradient(135deg, rgba(14,116,144,.09), rgba(16,185,129,.06));
}
.parent-file-score span,
.parent-file-score small {
    color: var(--muted);
    font-size: 12px;
    font-weight: 950;
}
.parent-file-score strong {
    font-size: 42px;
    line-height: 1;
    color: var(--blue);
}
.parent-alert-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 17px;
    margin-bottom: 16px;
    border-radius: 24px;
    border: 1px solid var(--border);
    background: var(--surface);
}
.parent-alert-strip.has-alerts {
    border-color: rgba(245, 158, 11, .26);
    background: linear-gradient(135deg, rgba(245,158,11,.075), rgba(255,255,255,.04)), var(--surface);
}
.parent-alert-strip-main {
    display: flex;
    align-items: center;
    gap: 13px;
}
.parent-alert-strip-main > span {
    width: 48px;
    height: 48px;
    display: inline-grid;
    place-items: center;
    border-radius: 17px;
    background: rgba(16,185,129,.12);
    color: var(--success);
    font-weight: 950;
    font-size: 20px;
}
.parent-alert-strip.has-alerts .parent-alert-strip-main > span {
    background: rgba(245,158,11,.14);
    color: var(--warning);
}
.parent-alert-strip-main strong {
    display: block;
    font-size: 16px;
    margin-bottom: 4px;
}
.parent-alert-strip-main p {
    margin: 0;
    color: var(--muted);
    font-size: 12px;
    font-weight: 750;
}
.parent-alert-items {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
}
.parent-alert-items span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 36px;
    padding: 8px 11px;
    border-radius: 999px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--muted);
    font-size: 12px;
    font-weight: 900;
}
.parent-alert-items strong { color: var(--text); }
.parent-alert-items .danger { border-color: rgba(239,68,68,.22); background: rgba(239,68,68,.07); }
.parent-alert-items .warning { border-color: rgba(245,158,11,.24); background: rgba(245,158,11,.08); }
.parent-alert-items .info { border-color: rgba(6,182,212,.22); background: rgba(6,182,212,.07); }
.parent-alert-items .violet { border-color: rgba(139,92,246,.22); background: rgba(139,92,246,.07); }
.parent-alert-items .ok { border-color: rgba(16,185,129,.22); background: rgba(16,185,129,.08); color: var(--success); }
.parent-file-kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(170px, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}
.parent-file-kpi {
    padding: 18px;
    border-radius: 22px;
    border: 1px solid var(--border);
    background: var(--surface);
    position: relative;
    overflow: hidden;
}
.parent-file-kpi::after {
    content: "";
    position: absolute;
    inset-inline-end: 0;
    top: 16px;
    bottom: 16px;
    width: 4px;
    border-radius: 999px;
    background: var(--blue);
}
.parent-file-kpi.paid::after { background: var(--success); }
.parent-file-kpi.due::after { background: var(--warning); }
.parent-file-kpi.attendance::after { background: var(--danger); }
.parent-file-kpi span {
    display: block;
    color: var(--muted);
    font-size: 12px;
    font-weight: 950;
    margin-bottom: 9px;
}
.parent-file-kpi strong {
    display: block;
    font-size: 28px;
    line-height: 1;
}
.parent-file-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: 22px;
    background: var(--surface);
}
.parent-file-tabs a {
    padding: 10px 14px;
    border-radius: 15px;
    background: var(--surface-2);
    color: var(--muted);
    font-size: 13px;
    font-weight: 950;
}
.parent-file-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}
.parent-file-panel {
    padding: 20px !important;
    border-radius: 24px !important;
}
.parent-file-panel-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 15px;
}
.parent-file-panel-head h3 {
    margin: 0 0 5px;
    font-size: 20px;
    font-weight: 950;
}
.parent-file-panel-head p {
    margin: 0;
    color: var(--muted);
    font-size: 12px;
    font-weight: 750;
}
.parent-finance-summary,
.parent-attendance-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 12px;
}
.parent-attendance-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.parent-finance-summary div,
.parent-attendance-grid div {
    padding: 14px;
    border-radius: 18px;
    border: 1px solid var(--border);
    background: var(--surface-2);
}
.parent-finance-summary span,
.parent-attendance-grid span {
    display: block;
    color: var(--muted);
    font-size: 11px;
    font-weight: 950;
    margin-bottom: 8px;
}
.parent-finance-summary strong,
.parent-attendance-grid strong {
    display: block;
    font-size: 22px;
    line-height: 1;
}
.parent-mini-list {
    display: grid;
    gap: 9px;
}
.parent-mini-list > div {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 10px;
    padding: 12px;
    border-radius: 17px;
    border: 1px solid var(--border);
    background: var(--surface-2);
}
.parent-mini-list > div > span {
    min-width: 0;
    font-size: 13px;
    font-weight: 900;
}
.parent-mini-list > div > span small {
    display: block;
    margin-top: 3px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 750;
}
.parent-mini-list strong {
    font-size: 13px;
    white-space: nowrap;
}
.parent-mini-list em {
    font-style: normal;
    color: var(--muted);
    font-size: 11px;
    font-weight: 850;
}
.parent-grade-meter {
    padding: 18px;
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(14,116,144,.10), rgba(16,185,129,.07));
    border: 1px solid rgba(14,116,144,.18);
    margin-bottom: 12px;
}
.parent-grade-meter span {
    display: block;
    color: var(--muted);
    font-size: 12px;
    font-weight: 950;
    margin-bottom: 8px;
}
.parent-grade-meter strong {
    display: block;
    font-size: 34px;
    color: var(--blue);
    line-height: 1;
    margin-bottom: 13px;
}
.parent-grade-meter div {
    height: 9px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(14,116,144,.12);
}
.parent-grade-meter b {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--blue), var(--success));
}
.parent-transport-card {
    padding: 17px;
    margin-bottom: 12px;
    border-radius: 20px;
    border: 1px solid rgba(14,116,144,.16);
    background: linear-gradient(135deg, rgba(14,116,144,.08), rgba(16,185,129,.05));
}
.parent-transport-card strong {
    display: block;
    margin-bottom: 6px;
    font-size: 18px;
}
.parent-transport-card span,
.parent-transport-card div {
    display: block;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.8;
    font-weight: 800;
}
.parent-doc-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 10px;
}
.parent-doc-card {
    display: block;
    padding: 15px;
    border-radius: 18px;
    border: 1px solid var(--border);
    background: var(--surface-2);
}
.parent-doc-card span {
    display: inline-flex;
    min-height: 26px;
    align-items: center;
    padding: 5px 9px;
    border-radius: 999px;
    background: var(--blue-soft);
    color: var(--blue);
    font-size: 11px;
    font-weight: 950;
    margin-bottom: 10px;
}
.parent-doc-card strong {
    display: block;
    margin-bottom: 5px;
    color: var(--text);
    font-size: 14px;
    line-height: 1.6;
}
.parent-doc-card small {
    display: block;
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
}
html[data-theme="dark"] .parent-portal-hero,
html[data-theme="dark"] .parent-file-hero,
html[data-theme="dark"] .parent-alert-strip,
html[data-theme="dark"] .parent-file-kpi,
html[data-theme="dark"] .parent-file-tabs,
html[data-theme="dark"] .parent-file-panel,
html[data-theme="dark"] .parent-student-card {
    background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.015)), var(--surface) !important;
}
@media (max-width: 1120px) {
    .parent-portal-hero,
    .parent-file-hero,
    .parent-alert-strip {
        flex-direction: column;
        align-items: stretch;
    }
    .parent-portal-hero-stats,
    .parent-file-score {
        width: 100%;
        flex-basis: auto;
    }
    .parent-file-grid {
        grid-template-columns: 1fr;
    }
    .parent-file-kpis {
        grid-template-columns: repeat(2, minmax(150px, 1fr));
    }
}
@media (max-width: 720px) {
    .parent-portal-hero,
    .parent-file-hero,
    .parent-file-panel,
    .parent-student-card {
        border-radius: 22px !important;
        padding: 16px !important;
    }
    .parent-file-identity {
        align-items: flex-start;
    }
    .parent-file-photo {
        width: 78px;
        height: 78px;
        flex-basis: 78px;
        border-radius: 24px;
        font-size: 24px;
    }
    .parent-file-kpis,
    .parent-finance-summary,
    .parent-attendance-grid,
    .parent-portal-hero-stats {
        grid-template-columns: 1fr;
    }
    .parent-mini-list > div {
        grid-template-columns: 1fr;
        align-items: flex-start;
    }
    .parent-alert-items {
        justify-content: stretch;
    }
    .parent-alert-items span {
        width: 100%;
        justify-content: space-between;
    }
    .parent-file-tabs a {
        flex: 1 1 140px;
        text-align: center;
    }
}
@media print {
    .parent-file-tabs,
    .parent-alert-strip,
    .parent-doc-card::after {
        display: none !important;
    }
    .parent-file-grid,
    .parent-file-kpis {
        grid-template-columns: 1fr 1fr !important;
    }
    .parent-file-hero,
    .parent-file-panel,
    .parent-file-kpi {
        box-shadow: none !important;
        break-inside: avoid;
    }
}

/* ===== v19 PDF reports buttons and shortcuts ===== */
.pdf-export-btn {
    position: relative;
    border-color: rgba(15, 118, 110, .22) !important;
    background: rgba(15, 118, 110, .08) !important;
    color: var(--blue, #0f766e) !important;
}
.pdf-export-btn::before {
    content: "PDF";
    display: inline-grid;
    place-items: center;
    min-width: 31px;
    height: 22px;
    margin-inline-end: 8px;
    border-radius: 7px;
    background: rgba(220, 38, 38, .10);
    color: #dc2626;
    font-size: 10px;
    font-weight: 950;
    letter-spacing: .03em;
}
.pdf-reports-quick-panel {
    margin-bottom: 18px;
    padding: 22px !important;
    overflow: hidden;
    position: relative;
}
.pdf-reports-quick-panel::after {
    content: "";
    position: absolute;
    width: 220px;
    height: 220px;
    inset-inline-end: -80px;
    top: -110px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(15,118,110,.10), transparent 70%);
    pointer-events: none;
}
.pdf-report-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 14px;
}
.pdf-report-chips a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 9px 14px;
    border-radius: 14px;
    border: 1px solid rgba(15,118,110,.18);
    background: rgba(15,118,110,.06);
    color: var(--text);
    font-size: 13px;
    font-weight: 900;
}
.pdf-report-chips a:hover {
    border-color: rgba(15,118,110,.32);
    background: rgba(15,118,110,.10);
}
@media (max-width: 720px) {
    .pdf-report-chips { flex-direction: column; }
    .pdf-report-chips a { width: 100%; }
}
@media print {
    .pdf-export-btn,
    .pdf-reports-quick-panel { display: none !important; }
}

/* ===== v20 advanced search filters + favicon settings ===== */
.advanced-search-header .header-actions,
.advanced-filter-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.advanced-stats-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(150px, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}

.advanced-stat-card {
    min-height: 112px;
    padding: 18px;
    border-radius: 22px;
    border: 1px solid var(--border);
    background: var(--surface);
    box-shadow: var(--shadow-card);
    position: relative;
    overflow: hidden;
}

.advanced-stat-card::after {
    content: "";
    position: absolute;
    inset-inline-end: 0;
    top: 18px;
    bottom: 18px;
    width: 4px;
    border-radius: 999px;
    background: var(--blue);
}

.advanced-stat-card.warning::after { background: var(--warning); }
.advanced-stat-card.danger::after { background: var(--danger); }
.advanced-stat-card.rose::after { background: #e11d48; }
.advanced-stat-card.violet::after { background: #7c3aed; }

.advanced-stat-card span {
    display: block;
    color: var(--muted);
    font-size: 13px;
    font-weight: 900;
    line-height: 1.6;
    margin-bottom: 12px;
}

.advanced-stat-card strong {
    display: block;
    color: var(--text);
    font-size: 34px;
    line-height: 1;
    font-weight: 950;
}

.advanced-filter-panel {
    margin-bottom: 18px;
}

.advanced-filter-panel h3 {
    margin-top: 0;
}

.advanced-filter-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(120px, 1fr));
    gap: 14px;
    align-items: end;
}

.advanced-filter-grid.compact {
    grid-template-columns: repeat(4, minmax(120px, 1fr));
}

.advanced-filter-grid .form-wide {
    grid-column: span 2;
}

.advanced-filter-grid label {
    display: block;
    margin-bottom: 7px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 900;
}

.advanced-filter-grid input,
.advanced-filter-grid select {
    width: 100%;
}

.advanced-filter-actions {
    grid-column: span 2;
}

.advanced-results-panel {
    margin-bottom: 18px;
}

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

.advanced-mini-results {
    display: grid;
    gap: 10px;
    margin-top: 16px;
}

.advanced-mini-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 13px 14px;
    border-radius: 16px;
    border: 1px solid var(--border);
    background: var(--surface-2);
}

.advanced-mini-row span {
    min-width: 0;
}

.advanced-mini-row strong,
.advanced-mini-row small {
    display: block;
}

.advanced-mini-row small {
    color: var(--muted);
    font-size: 11px;
    margin-top: 3px;
}

.advanced-mini-row em {
    font-style: normal;
    font-weight: 950;
    color: var(--blue);
    white-space: nowrap;
}

.advanced-mini-row.static {
    text-decoration: none;
}

.identity-upload-grid {
    display: grid;
    grid-template-columns: 1.25fr .95fr;
    gap: 16px;
}

.identity-upload-grid .logo-settings-card {
    height: 100%;
}

.favicon-settings-card {
    background:
        radial-gradient(circle at 10% 0%, rgba(14, 116, 144, .08), transparent 30%),
        var(--surface-2);
}

.favicon-preview-box {
    width: 86px !important;
    height: 86px !important;
    border-radius: 24px !important;
}

.favicon-preview-box img {
    max-width: 52px !important;
    max-height: 52px !important;
    object-fit: contain;
}

.students-list-filters {
    margin-bottom: 18px;
}

html[data-theme="dark"] .advanced-stat-card,
html[data-theme="dark"] .advanced-mini-row,
html[data-theme="dark"] .favicon-settings-card {
    background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.015)), var(--surface) !important;
}

@media (max-width: 1280px) {
    .advanced-stats-grid {
        grid-template-columns: repeat(3, minmax(150px, 1fr));
    }
    .advanced-filter-grid,
    .advanced-filter-grid.compact {
        grid-template-columns: repeat(3, minmax(140px, 1fr));
    }
}

@media (max-width: 920px) {
    .advanced-stats-grid,
    .advanced-two-columns,
    .identity-upload-grid {
        grid-template-columns: 1fr;
    }
    .advanced-filter-grid,
    .advanced-filter-grid.compact {
        grid-template-columns: repeat(2, minmax(140px, 1fr));
    }
    .advanced-filter-grid .form-wide,
    .advanced-filter-actions {
        grid-column: 1 / -1;
    }
}

@media (max-width: 620px) {
    .advanced-stats-grid,
    .advanced-filter-grid,
    .advanced-filter-grid.compact {
        grid-template-columns: 1fr;
    }
    .advanced-search-header .header-actions,
    .advanced-filter-actions {
        width: 100%;
    }
    .advanced-filter-actions .btn,
    .advanced-search-header .header-actions .btn {
        flex: 1 1 100%;
        width: 100%;
    }
}

/* ===== v20.1 Professional Login + Remember Me + Forgot Password ===== */
.auth-body {
    min-height: 100vh !important;
    display: block !important;
    overflow-x: hidden !important;
    background:
        radial-gradient(circle at 15% 12%, rgba(20,184,166,.18), transparent 32%),
        radial-gradient(circle at 86% 18%, rgba(79,70,229,.16), transparent 34%),
        linear-gradient(135deg, rgba(248,250,252,.96), rgba(238,242,255,.86)) !important;
}

html[data-theme="dark"] .auth-body {
    background:
        radial-gradient(circle at 15% 12%, rgba(20,184,166,.18), transparent 32%),
        radial-gradient(circle at 86% 18%, rgba(79,70,229,.16), transparent 34%),
        linear-gradient(135deg, #07111f, #0f172a 54%, #0b1120) !important;
}

.auth-pro-page {
    width: 100%;
    min-height: 100vh;
    position: relative;
    display: grid;
    place-items: center;
    padding: 86px 24px 34px;
    overflow: hidden;
}

.auth-pro-page.compact {
    padding-top: 96px;
}

.auth-pro-orb {
    position: fixed;
    pointer-events: none;
    filter: blur(2px);
    opacity: .7;
    animation: authFloat 9s ease-in-out infinite;
}

.auth-pro-orb.one {
    width: 360px;
    height: 360px;
    border-radius: 50%;
    inset-inline-start: -120px;
    top: 8%;
    background: radial-gradient(circle, rgba(20,184,166,.22), rgba(20,184,166,0) 68%);
}

.auth-pro-orb.two {
    width: 420px;
    height: 420px;
    border-radius: 50%;
    inset-inline-end: -140px;
    bottom: -80px;
    background: radial-gradient(circle, rgba(79,70,229,.18), rgba(79,70,229,0) 68%);
    animation-delay: -3s;
}

@keyframes authFloat {
    0%, 100% { transform: translate3d(0,0,0) scale(1); }
    50% { transform: translate3d(0,-22px,0) scale(1.04); }
}

.auth-pro-shell {
    width: min(1180px, 100%);
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(390px, .92fr);
    gap: 22px;
    position: relative;
    z-index: 2;
}

.auth-pro-showcase,
.auth-pro-card {
    border: 1px solid rgba(148,163,184,.24);
    border-radius: 34px;
    background: rgba(255,255,255,.74);
    box-shadow: 0 34px 90px rgba(15,23,42,.13);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

html[data-theme="dark"] .auth-pro-showcase,
html[data-theme="dark"] .auth-pro-card {
    background: rgba(15,23,42,.72);
    border-color: rgba(148,163,184,.16);
    box-shadow: 0 34px 90px rgba(0,0,0,.34);
}

.auth-pro-showcase {
    min-height: 650px;
    padding: 36px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
}

.auth-pro-showcase::before {
    content: "";
    position: absolute;
    inset: 18px;
    border-radius: 28px;
    background:
        linear-gradient(135deg, rgba(15,118,110,.92), rgba(14,116,144,.76) 52%, rgba(79,70,229,.74)),
        radial-gradient(circle at 20% 18%, rgba(255,255,255,.28), transparent 32%);
    z-index: -2;
}

.auth-pro-showcase::after {
    content: "";
    position: absolute;
    width: 420px;
    height: 420px;
    border: 1px solid rgba(255,255,255,.17);
    border-radius: 48px;
    inset-inline-end: -120px;
    bottom: -140px;
    transform: rotate(18deg);
    background: linear-gradient(135deg, rgba(255,255,255,.12), rgba(255,255,255,.03));
    animation: authRotate 18s linear infinite;
    z-index: -1;
}

@keyframes authRotate {
    from { transform: rotate(18deg); }
    to { transform: rotate(378deg); }
}

.auth-pro-brand {
    display: flex;
    align-items: center;
    gap: 14px;
    color: #fff;
}

.auth-pro-logo {
    width: 64px;
    height: 64px;
    flex: 0 0 64px;
    border-radius: 22px;
    display: inline-grid;
    place-items: center;
    background: rgba(255,255,255,.17);
    border: 1px solid rgba(255,255,255,.22);
    color: #fff;
    font-weight: 950;
    font-size: 31px;
    overflow: hidden;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.2);
}

.auth-pro-logo.image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 8px;
}

.auth-pro-brand strong {
    display: block;
    font-size: 26px;
    font-weight: 950;
    line-height: 1.1;
}

.auth-pro-brand small {
    display: block;
    color: rgba(255,255,255,.73);
    font-size: 13px;
    margin-top: 3px;
}

.auth-pro-copy {
    max-width: 560px;
    color: #fff;
    animation: authFadeUp .75s ease both;
}

.auth-pro-badge {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 7px 13px;
    border-radius: 999px;
    background: rgba(255,255,255,.16);
    color: rgba(255,255,255,.88);
    font-size: 12px;
    font-weight: 900;
    border: 1px solid rgba(255,255,255,.18);
    margin-bottom: 18px;
}

.auth-pro-copy h1 {
    margin: 0 0 18px;
    color: #fff;
    font-size: clamp(34px, 4vw, 58px);
    line-height: 1.12;
    font-weight: 950;
}

.auth-pro-copy p {
    margin: 0;
    color: rgba(255,255,255,.76);
    font-size: 16px;
    line-height: 2;
    max-width: 480px;
}

.auth-pro-features {
    display: grid;
    gap: 12px;
    color: rgba(255,255,255,.88);
}

.auth-pro-features div {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 10px 12px;
    border-radius: 16px;
    background: rgba(255,255,255,.11);
    border: 1px solid rgba(255,255,255,.13);
    font-weight: 850;
    font-size: 13px;
}

.auth-pro-features span {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: #fbbf24;
    box-shadow: 0 0 0 5px rgba(251,191,36,.15);
}

.auth-pro-card {
    min-height: 650px;
    padding: 42px;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: center;
    animation: authFadeUp .75s ease .08s both;
}

.auth-pro-single-card {
    width: min(520px, 100%);
    min-height: auto;
    position: relative;
    z-index: 2;
}

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

.auth-pro-card-head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 26px;
}

.auth-pro-card-head.centered {
    align-items: center;
    flex-direction: column;
    text-align: center;
}

.auth-pro-card-icon {
    width: 58px;
    height: 58px;
    flex: 0 0 58px;
    display: inline-grid;
    place-items: center;
    border-radius: 21px;
    background: linear-gradient(135deg, var(--blue-soft), rgba(79,70,229,.1));
    border: 1px solid rgba(14,116,144,.14);
    position: relative;
}

.auth-pro-card-icon::before {
    content: "";
    width: 22px;
    height: 16px;
    border: 3px solid var(--blue);
    border-radius: 5px;
    transform: translateY(5px);
}

.auth-pro-card-icon::after {
    content: "";
    position: absolute;
    width: 18px;
    height: 15px;
    border: 3px solid var(--blue);
    border-bottom: 0;
    border-radius: 13px 13px 0 0;
    top: 15px;
}

.auth-pro-card h2 {
    margin: 0 0 6px;
    font-size: 30px;
    line-height: 1.25;
    font-weight: 950;
    color: var(--text);
}

.auth-pro-card p {
    margin: 0;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.8;
}

.auth-pro-form {
    display: grid;
    gap: 12px;
}

.auth-pro-form label:not(.auth-pro-check) {
    color: var(--text);
    font-size: 13px;
    font-weight: 900;
    margin-top: 8px;
}

.auth-pro-input {
    height: 58px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 14px;
    border-radius: 18px;
    border: 1px solid var(--border);
    background: var(--surface-2);
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.auth-pro-input:focus-within {
    border-color: rgba(14,116,144,.38);
    box-shadow: 0 0 0 5px rgba(14,116,144,.09);
    transform: translateY(-1px);
}

.auth-pro-input input {
    width: 100%;
    height: 100%;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    outline: none !important;
    padding: 0 !important;
    color: var(--text);
    font-weight: 750;
}

.auth-pro-input > span {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border-radius: 14px;
    display: inline-grid;
    place-items: center;
    background: var(--blue-soft);
    color: var(--blue);
    position: relative;
}

.auth-pro-input.mail > span::before {
    content: "";
    width: 19px;
    height: 14px;
    border: 2px solid currentColor;
    border-radius: 4px;
}

.auth-pro-input.mail > span::after {
    content: "";
    position: absolute;
    width: 13px;
    height: 13px;
    border-inline-start: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-45deg) translateY(-2px);
}

.auth-pro-input.lock > span::before {
    content: "";
    width: 18px;
    height: 15px;
    border: 2px solid currentColor;
    border-radius: 4px;
    transform: translateY(5px);
}

.auth-pro-input.lock > span::after {
    content: "";
    position: absolute;
    width: 14px;
    height: 13px;
    border: 2px solid currentColor;
    border-bottom: 0;
    border-radius: 12px 12px 0 0;
    top: 9px;
}

.auth-pro-options {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 4px 0 8px;
    flex-wrap: wrap;
}

.auth-pro-check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--muted);
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
}

.auth-pro-check input {
    width: 18px;
    height: 18px;
    accent-color: var(--blue);
}

.auth-pro-options a,
.auth-pro-backline a {
    color: var(--blue);
    text-decoration: none;
    font-weight: 950;
    font-size: 13px;
}

.auth-pro-submit {
    min-height: 58px;
    width: 100%;
    border: 0;
    border-radius: 19px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: #fff;
    cursor: pointer;
    font-size: 16px;
    font-weight: 950;
    background: linear-gradient(135deg, var(--blue), var(--blue-2));
    box-shadow: 0 22px 36px rgba(14,116,144,.20);
    transition: transform .2s ease, box-shadow .2s ease;
}

.auth-pro-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 28px 46px rgba(14,116,144,.25);
}

.auth-pro-submit em {
    width: 30px;
    height: 30px;
    border-radius: 11px;
    display: inline-grid;
    place-items: center;
    font-style: normal;
    background: rgba(255,255,255,.17);
}

html[dir="ltr"] .auth-pro-submit em {
    transform: rotate(180deg);
}

.auth-pro-backline {
    margin-top: 18px;
    text-align: center;
}

.auth-pro-help {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    margin-top: -4px;
}

.auth-pro-card .alert {
    margin: 0 0 16px;
    border-radius: 17px;
    line-height: 1.7;
}

/* Settings SMTP block */
.mail-settings-box {
    padding: 18px;
    border: 1px solid var(--border);
    border-radius: 22px;
    background: var(--surface-2);
}

.settings-check-row {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 9px 12px;
    border-radius: 15px;
    background: var(--surface);
    border: 1px solid var(--border);
    font-weight: 900;
    cursor: pointer;
    margin-bottom: 14px;
}

.settings-check-row input {
    width: 18px;
    height: 18px;
    accent-color: var(--blue);
}

.mail-settings-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.mail-settings-note {
    display: block;
    margin-top: 12px;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.8;
}

@media (max-width: 1050px) {
    .auth-pro-shell {
        grid-template-columns: 1fr;
        width: min(620px, 100%);
    }
    .auth-pro-showcase {
        min-height: 380px;
    }
    .auth-pro-card {
        min-height: auto;
    }
    .mail-settings-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 680px) {
    .auth-pro-page {
        padding: 92px 14px 22px;
    }
    .auth-pro-showcase,
    .auth-pro-card {
        border-radius: 26px;
    }
    .auth-pro-showcase {
        padding: 28px;
        min-height: 340px;
    }
    .auth-pro-card {
        padding: 28px;
    }
    .auth-pro-card h2 {
        font-size: 24px;
    }
    .auth-pro-copy h1 {
        font-size: 32px;
    }
    .auth-pro-brand strong {
        font-size: 22px;
    }
    .auth-pro-options {
        align-items: flex-start;
        flex-direction: column;
    }
    .mail-settings-grid {
        grid-template-columns: 1fr;
    }
}


/* ===== v20.2 SMTP test email polish ===== */
.smtp-test-box {
    margin-top: -8px;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(14,116,144,.06), rgba(16,185,129,.04));
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.smtp-test-box strong {
    display: block;
    margin-bottom: 5px;
    font-size: 15px;
}
.smtp-test-box p {
    margin: 0;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.7;
}
.smtp-test-form {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: min(100%, 520px);
}
.smtp-test-form input {
    min-width: 240px;
}
.smtp-test-form .btn {
    white-space: nowrap;
}
@media (max-width: 820px) {
    .smtp-test-box,
    .smtp-test-form {
        flex-direction: column;
        align-items: stretch;
    }
    .smtp-test-form input,
    .smtp-test-form .btn {
        width: 100%;
    }
}

/* ===== v20.3 ultra professional animated login ===== */
.auth-body {
    min-height: 100vh;
    overflow-x: hidden;
    background:
        radial-gradient(circle at 15% 12%, rgba(14,116,144,.16), transparent 30%),
        radial-gradient(circle at 84% 16%, rgba(79,70,229,.12), transparent 31%),
        radial-gradient(circle at 50% 100%, rgba(16,185,129,.10), transparent 38%),
        linear-gradient(135deg, #f7fbff, #eef8f6 52%, #f7f4ff) !important;
}

html[data-theme="dark"] .auth-body {
    background:
        radial-gradient(circle at 15% 12%, rgba(20,184,166,.20), transparent 30%),
        radial-gradient(circle at 84% 16%, rgba(99,102,241,.16), transparent 32%),
        radial-gradient(circle at 50% 100%, rgba(16,185,129,.12), transparent 38%),
        linear-gradient(135deg, #07111f, #0f172a 55%, #111827) !important;
}

.auth-ultra-page,
.auth-ultra-page * {
    box-sizing: border-box;
}

.auth-ultra-page {
    position: relative;
    min-height: 100vh;
    width: 100%;
    display: grid;
    place-items: center;
    padding: 96px 24px 36px;
    overflow: hidden;
    isolation: isolate;
}

.auth-ultra-bg-grid {
    position: fixed;
    inset: 0;
    opacity: .5;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(14,116,144,.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(14,116,144,.06) 1px, transparent 1px);
    background-size: 54px 54px;
    mask-image: radial-gradient(circle at 50% 50%, #000 0 50%, transparent 78%);
    animation: authGridDrift 24s linear infinite;
    z-index: -6;
}

@keyframes authGridDrift {
    from { transform: translate3d(0,0,0); }
    to { transform: translate3d(54px,54px,0); }
}

.auth-ultra-glow {
    position: fixed;
    pointer-events: none;
    border-radius: 999px;
    filter: blur(8px);
    z-index: -5;
    opacity: .85;
    animation: authUltraFloat 11s ease-in-out infinite;
}

.auth-ultra-glow.glow-a {
    width: 440px;
    height: 440px;
    top: -140px;
    inset-inline-start: -130px;
    background: radial-gradient(circle, rgba(20,184,166,.28), transparent 67%);
}

.auth-ultra-glow.glow-b {
    width: 510px;
    height: 510px;
    bottom: -180px;
    inset-inline-end: -160px;
    background: radial-gradient(circle, rgba(79,70,229,.22), transparent 68%);
    animation-delay: -3s;
}

.auth-ultra-glow.glow-c {
    width: 300px;
    height: 300px;
    top: 28%;
    inset-inline-end: 24%;
    background: radial-gradient(circle, rgba(245,158,11,.13), transparent 70%);
    animation-delay: -7s;
}

@keyframes authUltraFloat {
    0%, 100% { transform: translate3d(0,0,0) scale(1); }
    50% { transform: translate3d(0,-28px,0) scale(1.05); }
}

.auth-ultra-particles {
    position: fixed;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: -4;
}

.auth-ultra-particles span {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(14,116,144,.34);
    box-shadow: 0 0 0 8px rgba(14,116,144,.06);
    animation: authParticle 13s ease-in-out infinite;
}

.auth-ultra-particles span:nth-child(1) { top: 18%; inset-inline-start: 12%; animation-delay: -1s; }
.auth-ultra-particles span:nth-child(2) { top: 72%; inset-inline-start: 18%; animation-delay: -6s; background: rgba(245,158,11,.38); box-shadow: 0 0 0 8px rgba(245,158,11,.07); }
.auth-ultra-particles span:nth-child(3) { top: 28%; inset-inline-end: 14%; animation-delay: -3s; }
.auth-ultra-particles span:nth-child(4) { top: 62%; inset-inline-end: 10%; animation-delay: -8s; background: rgba(79,70,229,.32); box-shadow: 0 0 0 8px rgba(79,70,229,.06); }
.auth-ultra-particles span:nth-child(5) { top: 84%; inset-inline-end: 44%; animation-delay: -4s; }
.auth-ultra-particles span:nth-child(6) { top: 10%; inset-inline-end: 52%; animation-delay: -10s; background: rgba(16,185,129,.34); box-shadow: 0 0 0 8px rgba(16,185,129,.06); }

@keyframes authParticle {
    0%, 100% { transform: translate3d(0,0,0); opacity: .55; }
    50% { transform: translate3d(18px,-34px,0); opacity: 1; }
}

.auth-ultra-shell {
    width: min(1220px, 100%);
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(410px, .95fr);
    gap: 22px;
    position: relative;
    z-index: 2;
    perspective: 1600px;
}

.auth-ultra-showcase,
.auth-ultra-card {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(148,163,184,.25);
    border-radius: 36px;
    background: rgba(255,255,255,.70);
    box-shadow:
        0 36px 90px rgba(15,23,42,.13),
        inset 0 1px 0 rgba(255,255,255,.62);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
}

html[data-theme="dark"] .auth-ultra-showcase,
html[data-theme="dark"] .auth-ultra-card {
    background: rgba(15,23,42,.72);
    border-color: rgba(148,163,184,.16);
    box-shadow: 0 36px 100px rgba(0,0,0,.36), inset 0 1px 0 rgba(255,255,255,.06);
}

.auth-ultra-showcase {
    min-height: 690px;
    padding: 34px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transform-origin: center;
    animation: authPanelIn .75s cubic-bezier(.2,.8,.2,1) both;
}

.auth-ultra-showcase::before {
    content: "";
    position: absolute;
    inset: 18px;
    border-radius: 30px;
    z-index: -3;
    background:
        radial-gradient(circle at 18% 18%, rgba(255,255,255,.30), transparent 28%),
        radial-gradient(circle at 82% 78%, rgba(255,255,255,.14), transparent 28%),
        linear-gradient(135deg, rgba(15,118,110,.96), rgba(14,116,144,.86) 48%, rgba(79,70,229,.82));
}

.auth-ultra-showcase::after {
    content: "";
    position: absolute;
    width: 520px;
    height: 520px;
    border-radius: 48px;
    border: 1px solid rgba(255,255,255,.16);
    inset-inline-end: -185px;
    bottom: -175px;
    z-index: -2;
    background: linear-gradient(135deg, rgba(255,255,255,.14), rgba(255,255,255,.035));
    transform: rotate(18deg);
    animation: authSoftRotate 24s linear infinite;
}

@keyframes authSoftRotate {
    from { transform: rotate(18deg); }
    to { transform: rotate(378deg); }
}

@keyframes authPanelIn {
    from { opacity: 0; transform: translateY(18px) rotateX(2deg); }
    to { opacity: 1; transform: translateY(0) rotateX(0); }
}

.auth-ultra-card {
    min-height: 690px;
    display: grid;
    place-items: center;
    padding: 34px;
    animation: authPanelIn .75s cubic-bezier(.2,.8,.2,1) .08s both;
}

.auth-ultra-card::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(120deg, transparent 0 36%, rgba(255,255,255,.45) 44%, transparent 52% 100%);
    transform: translateX(120%);
    animation: authCardSheen 5.8s ease-in-out infinite;
}

@keyframes authCardSheen {
    0%, 58%, 100% { transform: translateX(120%); opacity: 0; }
    70% { opacity: .45; }
    88% { transform: translateX(-120%); opacity: 0; }
}

.auth-ultra-card-inner {
    width: min(440px, 100%);
    position: relative;
    z-index: 2;
}

.auth-ultra-brand-row,
.auth-ultra-brand,
.auth-ultra-secure-badge,
.auth-ultra-feature-row,
.auth-ultra-feature-row div,
.auth-ultra-card-head,
.auth-ultra-options,
.auth-ultra-check,
.auth-ultra-submit,
.auth-ultra-note {
    display: flex;
    align-items: center;
}

.auth-ultra-brand-row {
    justify-content: space-between;
    gap: 14px;
    color: #fff;
}

.auth-ultra-brand {
    gap: 14px;
}

.auth-ultra-logo {
    width: 66px;
    height: 66px;
    flex: 0 0 66px;
    display: inline-grid;
    place-items: center;
    border-radius: 23px;
    overflow: hidden;
    background: rgba(255,255,255,.16);
    border: 1px solid rgba(255,255,255,.23);
    color: #fff;
    font-size: 32px;
    font-weight: 950;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.24), 0 18px 32px rgba(0,0,0,.12);
}

.auth-ultra-logo.image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 8px;
}

.auth-ultra-brand strong {
    display: block;
    color: #fff;
    font-size: 27px;
    line-height: 1.1;
    font-weight: 950;
}

.auth-ultra-brand small {
    display: block;
    color: rgba(255,255,255,.72);
    margin-top: 3px;
    font-size: 13px;
}

.auth-ultra-secure-badge {
    gap: 9px;
    min-height: 42px;
    padding: 9px 13px;
    border-radius: 999px;
    color: rgba(255,255,255,.90);
    background: rgba(255,255,255,.13);
    border: 1px solid rgba(255,255,255,.16);
    font-size: 12px;
    font-weight: 900;
    white-space: nowrap;
}

.auth-ultra-secure-badge i {
    width: 16px;
    height: 13px;
    border: 2px solid currentColor;
    border-radius: 4px;
    position: relative;
}

.auth-ultra-secure-badge i::before {
    content: "";
    position: absolute;
    width: 10px;
    height: 9px;
    border: 2px solid currentColor;
    border-bottom: 0;
    border-radius: 10px 10px 0 0;
    left: 1px;
    top: -9px;
}

.auth-ultra-hero-copy {
    max-width: 590px;
    color: #fff;
    animation: authTextReveal .75s ease .14s both;
}

@keyframes authTextReveal {
    from { opacity: 0; transform: translateY(18px); filter: blur(4px); }
    to { opacity: 1; transform: translateY(0); filter: blur(0); }
}

.auth-ultra-kicker {
    display: inline-flex;
    align-items: center;
    min-height: 33px;
    padding: 7px 13px;
    margin-bottom: 18px;
    border-radius: 999px;
    background: rgba(255,255,255,.16);
    border: 1px solid rgba(255,255,255,.18);
    color: rgba(255,255,255,.88);
    font-size: 12px;
    font-weight: 900;
}

.auth-ultra-hero-copy h1 {
    margin: 0 0 18px;
    color: #fff;
    font-size: clamp(36px, 4.7vw, 60px);
    line-height: 1.12;
    font-weight: 950;
    letter-spacing: 0 !important;
}

.auth-ultra-hero-copy p {
    max-width: 500px;
    margin: 0;
    color: rgba(255,255,255,.78);
    font-size: 16px;
    line-height: 2;
}

.auth-ultra-visual {
    width: min(560px, 100%);
    margin-top: 26px;
    transform: translateZ(0);
    animation: authVisualIn .85s ease .24s both;
}

@keyframes authVisualIn {
    from { opacity: 0; transform: translateY(22px) scale(.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.auth-ultra-window {
    min-height: 210px;
    border-radius: 28px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.18);
    background: rgba(255,255,255,.10);
    box-shadow: 0 28px 60px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.15);
    backdrop-filter: blur(12px);
}

.auth-ultra-window-top {
    height: 42px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 16px;
    border-bottom: 1px solid rgba(255,255,255,.12);
}

.auth-ultra-window-top span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255,255,255,.34);
}

.auth-ultra-window-top span:nth-child(1) { background: #fb7185; }
.auth-ultra-window-top span:nth-child(2) { background: #fbbf24; }
.auth-ultra-window-top span:nth-child(3) { background: #34d399; }

.auth-ultra-window-body {
    min-height: 168px;
    padding: 16px;
    display: grid;
    grid-template-columns: 1fr 1fr 1.4fr;
    grid-template-rows: auto auto;
    gap: 12px;
}

.auth-ultra-stat,
.auth-ultra-chart,
.auth-ultra-radar {
    border-radius: 20px;
    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.13);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
}

.auth-ultra-stat {
    min-height: 84px;
    padding: 14px;
}

.auth-ultra-stat b {
    display: block;
    color: rgba(255,255,255,.76);
    font-size: 11px;
    margin-bottom: 8px;
}

.auth-ultra-stat strong {
    display: block;
    color: #fff;
    font-size: 28px;
    line-height: 1;
    margin-bottom: 12px;
}

.auth-ultra-stat em {
    display: block;
    height: 7px;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(255,255,255,.16);
    position: relative;
}

.auth-ultra-stat em::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(90deg, #34d399, #a7f3d0);
    transform-origin: right center;
    animation: authProgress 2.7s ease-in-out infinite;
}

.auth-ultra-stat.stat-two em::before {
    background: linear-gradient(90deg, #fbbf24, #fde68a);
    animation-delay: -.8s;
}

@keyframes authProgress {
    0%, 100% { transform: scaleX(.45); }
    50% { transform: scaleX(.92); }
}

.auth-ultra-chart {
    grid-row: 1 / span 2;
    grid-column: 3;
    min-height: 180px;
    display: flex;
    align-items: end;
    justify-content: space-around;
    gap: 9px;
    padding: 18px;
}

.auth-ultra-chart span {
    width: 100%;
    max-width: 24px;
    min-height: 28px;
    border-radius: 999px 999px 8px 8px;
    background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.36));
    animation: authBars 2.8s ease-in-out infinite;
}

.auth-ultra-chart span:nth-child(2) { animation-delay: -.2s; }
.auth-ultra-chart span:nth-child(3) { animation-delay: -.5s; }
.auth-ultra-chart span:nth-child(4) { animation-delay: -.9s; }
.auth-ultra-chart span:nth-child(5) { animation-delay: -1.2s; }
.auth-ultra-chart span:nth-child(6) { animation-delay: -1.5s; }

@keyframes authBars {
    0%, 100% { transform: scaleY(.88); opacity: .7; }
    50% { transform: scaleY(1.04); opacity: 1; }
}

.auth-ultra-radar {
    grid-column: 1 / span 2;
    min-height: 84px;
    position: relative;
    overflow: hidden;
}

.auth-ultra-radar::before {
    content: "";
    position: absolute;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    inset-inline-start: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background:
        radial-gradient(circle, transparent 0 22px, rgba(255,255,255,.10) 23px 24px, transparent 25px 48px, rgba(255,255,255,.10) 49px 50px, transparent 51px 78px, rgba(255,255,255,.10) 79px 80px, transparent 81px);
}

.auth-ultra-radar span {
    position: absolute;
    width: 110px;
    height: 110px;
    top: 50%;
    inset-inline-start: 50%;
    border-radius: 100% 0 0 0;
    background: linear-gradient(45deg, rgba(52,211,153,.42), transparent 70%);
    transform-origin: 0 0;
    animation: authRadar 3.6s linear infinite;
}

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

.auth-ultra-feature-row {
    gap: 10px;
    flex-wrap: wrap;
    color: rgba(255,255,255,.88);
}

.auth-ultra-feature-row div {
    gap: 9px;
    min-height: 44px;
    padding: 10px 12px;
    border-radius: 16px;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.13);
    font-size: 12px;
    font-weight: 900;
}

.auth-ultra-feature-row .dot {
    width: 10px;
    height: 10px;
    flex: 0 0 10px;
    border-radius: 50%;
    background: #34d399;
    box-shadow: 0 0 0 5px rgba(52,211,153,.14);
}

.auth-ultra-feature-row .dot.amber { background: #fbbf24; box-shadow: 0 0 0 5px rgba(251,191,36,.14); }
.auth-ultra-feature-row .dot.violet { background: #c4b5fd; box-shadow: 0 0 0 5px rgba(196,181,253,.14); }

.auth-ultra-card-head {
    gap: 15px;
    margin-bottom: 26px;
}

.auth-ultra-lock {
    width: 62px;
    height: 62px;
    flex: 0 0 62px;
    border-radius: 23px;
    position: relative;
    display: inline-grid;
    place-items: center;
    background: linear-gradient(135deg, var(--blue-soft), rgba(79,70,229,.10));
    border: 1px solid rgba(14,116,144,.14);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.34);
}

.auth-ultra-lock::before {
    content: "";
    width: 24px;
    height: 17px;
    border: 3px solid var(--blue);
    border-radius: 6px;
    transform: translateY(6px);
}

.auth-ultra-lock::after {
    content: "";
    position: absolute;
    width: 18px;
    height: 17px;
    border: 3px solid var(--blue);
    border-bottom: 0;
    border-radius: 14px 14px 0 0;
    top: 17px;
}

.auth-ultra-card h2 {
    margin: 0 0 7px;
    color: var(--text);
    font-size: 32px;
    line-height: 1.2;
    font-weight: 950;
    letter-spacing: 0 !important;
}

.auth-ultra-card p {
    margin: 0;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.8;
}

.auth-ultra-alert {
    margin: 0 0 17px !important;
    border-radius: 18px !important;
    line-height: 1.8 !important;
}

.auth-ultra-form {
    display: grid;
    gap: 12px;
}

.auth-ultra-form > label {
    color: var(--text);
    font-size: 13px;
    font-weight: 950;
    margin-top: 8px;
}

.auth-ultra-input {
    min-height: 60px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 14px;
    border-radius: 20px;
    border: 1px solid var(--border);
    background: var(--surface-2);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.45);
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, background .22s ease;
}

.auth-ultra-input:focus-within {
    transform: translateY(-2px);
    border-color: rgba(14,116,144,.40);
    background: var(--surface);
    box-shadow: 0 0 0 6px rgba(14,116,144,.10), 0 16px 34px rgba(15,23,42,.08);
}

.auth-ultra-input input {
    width: 100%;
    height: 100%;
    min-height: 58px;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    outline: none !important;
    padding: 0 !important;
    color: var(--text);
    font-weight: 800;
}

.auth-ultra-input > span {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    border-radius: 15px;
    display: inline-grid;
    place-items: center;
    position: relative;
    color: var(--blue);
    background: var(--blue-soft);
}

.auth-ultra-input.mail > span::before {
    content: "";
    width: 20px;
    height: 15px;
    border: 2px solid currentColor;
    border-radius: 5px;
}

.auth-ultra-input.mail > span::after {
    content: "";
    position: absolute;
    width: 14px;
    height: 14px;
    border-inline-start: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-45deg) translateY(-2px);
}

.auth-ultra-input.lock > span::before {
    content: "";
    width: 19px;
    height: 16px;
    border: 2px solid currentColor;
    border-radius: 5px;
    transform: translateY(5px);
}

.auth-ultra-input.lock > span::after {
    content: "";
    position: absolute;
    width: 15px;
    height: 14px;
    top: 9px;
    border: 2px solid currentColor;
    border-bottom: 0;
    border-radius: 14px 14px 0 0;
}

.auth-ultra-eye {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    border: 0;
    border-radius: 15px;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    position: relative;
    transition: background .2s ease, color .2s ease;
}

.auth-ultra-eye:hover,
.auth-ultra-eye.is-visible {
    background: var(--blue-soft);
    color: var(--blue);
}

.auth-ultra-eye::before {
    content: "";
    position: absolute;
    width: 22px;
    height: 14px;
    border: 2px solid currentColor;
    border-radius: 999px / 70%;
    top: 13px;
    inset-inline-start: 9px;
}

.auth-ultra-eye::after {
    content: "";
    position: absolute;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    top: 16.5px;
    inset-inline-start: 16.5px;
}

.auth-ultra-eye:not(.is-visible) {
    opacity: .72;
}

.auth-ultra-options {
    justify-content: space-between;
    gap: 12px;
    margin: 6px 0 10px;
    flex-wrap: wrap;
}

.auth-ultra-check {
    gap: 9px;
    color: var(--muted);
    font-size: 13px;
    font-weight: 900;
    cursor: pointer;
    user-select: none;
}

.auth-ultra-check input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.auth-ultra-check-ui {
    width: 46px;
    height: 26px;
    flex: 0 0 46px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    padding: 3px;
    background: rgba(148,163,184,.28);
    border: 1px solid rgba(148,163,184,.28);
    transition: background .2s ease, border-color .2s ease;
}

.auth-ultra-check-ui::before {
    content: "";
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 5px 14px rgba(15,23,42,.18);
    transform: translateX(0);
    transition: transform .22s ease;
}

html[dir="rtl"] .auth-ultra-check input:checked + .auth-ultra-check-ui::before {
    transform: translateX(-20px);
}

html[dir="ltr"] .auth-ultra-check input:checked + .auth-ultra-check-ui::before {
    transform: translateX(20px);
}

.auth-ultra-check input:checked + .auth-ultra-check-ui {
    background: linear-gradient(135deg, var(--blue), var(--blue-2));
    border-color: rgba(14,116,144,.22);
}

.auth-ultra-forgot {
    color: var(--blue);
    text-decoration: none;
    font-size: 13px;
    font-weight: 950;
    position: relative;
}

.auth-ultra-forgot::after {
    content: "";
    position: absolute;
    height: 2px;
    inset-inline: 0;
    bottom: -3px;
    border-radius: 999px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: right center;
    transition: transform .2s ease;
}

.auth-ultra-forgot:hover::after {
    transform: scaleX(1);
}

.auth-ultra-submit {
    width: 100%;
    min-height: 60px;
    justify-content: center;
    gap: 12px;
    border: 0;
    border-radius: 20px;
    cursor: pointer;
    color: #fff;
    font-size: 16px;
    font-weight: 950;
    background: linear-gradient(135deg, var(--blue), var(--blue-2));
    box-shadow: 0 22px 42px rgba(14,116,144,.22);
    position: relative;
    overflow: hidden;
    transition: transform .22s ease, box-shadow .22s ease;
}

.auth-ultra-submit::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 0 35%, rgba(255,255,255,.24) 45%, transparent 55% 100%);
    transform: translateX(120%);
    transition: transform .65s ease;
}

.auth-ultra-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 30px 54px rgba(14,116,144,.28);
}

.auth-ultra-submit:hover::before {
    transform: translateX(-120%);
}

.auth-ultra-submit span,
.auth-ultra-submit em {
    position: relative;
    z-index: 1;
}

.auth-ultra-submit em {
    width: 31px;
    height: 31px;
    display: inline-grid;
    place-items: center;
    border-radius: 12px;
    background: rgba(255,255,255,.17);
    font-style: normal;
    line-height: 1;
}

html[dir="ltr"] .auth-ultra-submit em {
    transform: rotate(180deg);
}

.auth-ultra-note {
    gap: 9px;
    margin-top: 18px;
    padding: 12px 13px;
    border-radius: 16px;
    border: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    line-height: 1.7;
}

.auth-ultra-note span {
    width: 17px;
    height: 17px;
    flex: 0 0 17px;
    border-radius: 50%;
    background: var(--blue-soft);
    position: relative;
}

.auth-ultra-note span::before {
    content: "";
    position: absolute;
    width: 5px;
    height: 9px;
    border-inline-end: 2px solid var(--blue);
    border-bottom: 2px solid var(--blue);
    transform: rotate(45deg);
    top: 3px;
    inset-inline-start: 6px;
}

html[data-theme="dark"] .auth-ultra-input,
html[data-theme="dark"] .auth-ultra-note {
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}

@media (max-width: 1120px) {
    .auth-ultra-shell {
        grid-template-columns: 1fr;
        width: min(680px, 100%);
    }
    .auth-ultra-showcase {
        min-height: 560px;
    }
    .auth-ultra-card {
        min-height: auto;
    }
}

@media (max-width: 700px) {
    .auth-ultra-page {
        padding: 92px 14px 22px;
    }
    .auth-ultra-showcase,
    .auth-ultra-card {
        border-radius: 26px;
    }
    .auth-ultra-showcase {
        min-height: auto;
        padding: 24px;
        gap: 28px;
    }
    .auth-ultra-showcase::before {
        inset: 10px;
        border-radius: 22px;
    }
    .auth-ultra-secure-badge {
        display: none;
    }
    .auth-ultra-logo {
        width: 56px;
        height: 56px;
        flex-basis: 56px;
        border-radius: 19px;
        font-size: 28px;
    }
    .auth-ultra-brand strong {
        font-size: 23px;
    }
    .auth-ultra-hero-copy h1 {
        font-size: 31px;
    }
    .auth-ultra-hero-copy p {
        font-size: 14px;
        line-height: 1.9;
    }
    .auth-ultra-window-body {
        grid-template-columns: 1fr 1fr;
    }
    .auth-ultra-chart {
        grid-column: 1 / -1;
        grid-row: auto;
        min-height: 110px;
    }
    .auth-ultra-radar {
        display: none;
    }
    .auth-ultra-feature-row {
        display: none;
    }
    .auth-ultra-card {
        padding: 22px;
    }
    .auth-ultra-card h2 {
        font-size: 26px;
    }
    .auth-ultra-lock {
        width: 52px;
        height: 52px;
        flex-basis: 52px;
        border-radius: 19px;
    }
    .auth-ultra-options {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (prefers-reduced-motion: reduce) {
    .auth-ultra-page *,
    .auth-ultra-bg-grid,
    .auth-ultra-glow,
    .auth-ultra-particles span,
    .auth-ultra-showcase::after,
    .auth-ultra-card::before,
    .auth-ultra-chart span,
    .auth-ultra-radar span,
    .auth-ultra-stat em::before {
        animation: none !important;
        transition: none !important;
    }
}

/* ===== v20.4 login real dashboard stats + refined CSS icons ===== */
.auth-ultra-page {
    padding-top: 86px;
}

.auth-ultra-window-body {
    grid-template-columns: 1fr 1fr 1.25fr;
}

.auth-ultra-stat em::before {
    transform: scaleX(calc(var(--w, 70) / 100)) !important;
    animation: authProgressReal 3.2s ease-in-out infinite !important;
}

@keyframes authProgressReal {
    0%, 100% { transform: scaleX(calc(var(--w, 70) / 100)); opacity: .82; }
    50% { transform: scaleX(calc(var(--w, 70) / 100)); opacity: 1; }
}

.auth-ultra-stat strong {
    font-variant-numeric: tabular-nums;
    letter-spacing: -.02em;
}

.auth-ultra-live-metric {
    position: absolute;
    inset: 14px;
    z-index: 2;
    display: grid;
    align-content: center;
    justify-items: start;
    gap: 8px;
    color: #fff;
}

html[dir="rtl"] .auth-ultra-live-metric {
    justify-items: end;
    text-align: right;
}

.auth-ultra-live-metric b {
    font-size: 12px;
    color: rgba(255,255,255,.74);
}

.auth-ultra-live-metric strong {
    font-size: 28px;
    line-height: 1;
    color: #fff;
    font-weight: 950;
}

.auth-ultra-lock,
.auth-ultra-input > span,
.auth-ultra-eye,
.auth-ultra-secure-badge i {
    --icon-stroke: currentColor;
}

.auth-ultra-lock {
    width: 58px !important;
    height: 58px !important;
    flex-basis: 58px !important;
    border-radius: 20px !important;
    background:
        radial-gradient(circle at 30% 20%, rgba(255,255,255,.55), transparent 42%),
        linear-gradient(135deg, rgba(14,116,144,.10), rgba(79,70,229,.09)) !important;
    color: var(--blue) !important;
    border: 1px solid rgba(14,116,144,.14) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 14px 28px rgba(14,116,144,.08) !important;
}

.auth-ultra-lock::before {
    width: 23px !important;
    height: 18px !important;
    border: 2.5px solid currentColor !important;
    border-radius: 7px !important;
    transform: translateY(7px) !important;
    background: transparent !important;
}

.auth-ultra-lock::after {
    width: 17px !important;
    height: 15px !important;
    top: 15px !important;
    border: 2.5px solid currentColor !important;
    border-bottom: 0 !important;
    border-radius: 13px 13px 0 0 !important;
}

.auth-ultra-input > span {
    width: 36px !important;
    height: 36px !important;
    flex: 0 0 36px !important;
    border-radius: 14px !important;
    background: linear-gradient(135deg, rgba(14,116,144,.10), rgba(79,70,229,.07)) !important;
    color: var(--blue) !important;
    border: 1px solid rgba(14,116,144,.10) !important;
    box-shadow: none !important;
}

.auth-ultra-input.mail > span::before,
.auth-ultra-input.mail > span::after,
.auth-ultra-input.lock > span::before,
.auth-ultra-input.lock > span::after {
    box-sizing: border-box !important;
}

.auth-ultra-input.mail > span::before {
    width: 19px !important;
    height: 14px !important;
    border: 2px solid currentColor !important;
    border-radius: 5px !important;
    background: transparent !important;
    transform: none !important;
}

.auth-ultra-input.mail > span::after {
    width: 11px !important;
    height: 11px !important;
    border-inline-start: 2px solid currentColor !important;
    border-bottom: 2px solid currentColor !important;
    border-top: 0 !important;
    border-inline-end: 0 !important;
    transform: rotate(-45deg) translate(0, -1px) !important;
    opacity: .95 !important;
}

html[dir="rtl"] .auth-ultra-input.mail > span::after {
    transform: rotate(45deg) translate(0, -1px) !important;
}

.auth-ultra-input.lock > span::before {
    width: 18px !important;
    height: 15px !important;
    border: 2px solid currentColor !important;
    border-radius: 5px !important;
    transform: translateY(5px) !important;
    background: transparent !important;
}

.auth-ultra-input.lock > span::after {
    width: 14px !important;
    height: 13px !important;
    top: 8px !important;
    border: 2px solid currentColor !important;
    border-bottom: 0 !important;
    border-radius: 12px 12px 0 0 !important;
}

.auth-ultra-eye {
    color: var(--blue) !important;
    opacity: .78;
}

.auth-ultra-eye::before {
    width: 23px !important;
    height: 14px !important;
    border: 2px solid currentColor !important;
    border-radius: 999px / 68% !important;
    inset-inline-start: 8px !important;
    top: 13px !important;
    background: transparent !important;
}

.auth-ultra-eye::after {
    width: 7px !important;
    height: 7px !important;
    inset-inline-start: 16px !important;
    top: 16.5px !important;
    background: currentColor !important;
}

.auth-ultra-eye:not(.is-visible)::before {
    box-shadow: inset 0 0 0 9px transparent;
}

.auth-ultra-eye:not(.is-visible)::after {
    opacity: .42;
}

.auth-ultra-secure-badge i {
    width: 18px !important;
    height: 14px !important;
    border-radius: 5px !important;
    border-width: 2px !important;
    transform: translateY(2px);
}

.auth-ultra-secure-badge i::before {
    width: 12px !important;
    height: 10px !important;
    left: 1px !important;
    top: -10px !important;
    border-width: 2px !important;
}

.auth-ultra-feature-row div {
    min-height: 42px !important;
    background: rgba(255,255,255,.13) !important;
}

.auth-ultra-feature-row div,
.auth-ultra-stat b,
.auth-ultra-live-metric b {
    white-space: nowrap;
}

.auth-ultra-chart span {
    transform-origin: bottom center;
}

@media (max-width: 700px) {
    .auth-ultra-window-body {
        grid-template-columns: 1fr 1fr;
    }
    .auth-ultra-radar {
        display: grid !important;
        min-height: 82px;
        grid-column: 1 / -1;
    }
    .auth-ultra-live-metric {
        inset: 12px;
    }
}


/* ===== v20.6 professional icon system + no-finance login showcase ===== */
:root {
    --icon-premium-bg: linear-gradient(135deg, rgba(14,116,144,.12), rgba(99,102,241,.10));
    --icon-premium-border: rgba(14,116,144,.14);
}

/* Global icon polish: cleaner line icons across the platform */
.nav-icon,
.dashboard-kpi-icon,
.quick-action-icon,
.theme-toggle-icon-wrap,
.logout-icon,
.auth-ultra-lock,
.auth-ultra-input > span,
.auth-ultra-eye,
.auth-ultra-secure-badge i,
.student-avatar-placeholder,
.profile-avatar-placeholder {
    position: relative;
    overflow: hidden;
}

.nav-icon {
    width: 36px !important;
    height: 36px !important;
    flex: 0 0 36px !important;
    border-radius: 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: rgba(226,232,240,.92) !important;
    background: rgba(255,255,255,.065) !important;
    border: 1px solid rgba(255,255,255,.07) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08) !important;
}

.sidebar-nav a.active .nav-icon,
.sidebar-nav a:hover .nav-icon {
    color: #fff !important;
    background: linear-gradient(135deg, var(--blue), var(--blue-2)) !important;
    border-color: rgba(255,255,255,.16) !important;
    box-shadow: 0 12px 24px rgba(14,116,144,.22), inset 0 1px 0 rgba(255,255,255,.18) !important;
}

.nav-icon svg,
.nav-icon .pro-line-icon,
.logout-icon svg,
.switcher-icon-svg svg,
.quick-action-icon svg,
.dashboard-kpi-icon svg,
.theme-toggle-icon-wrap svg {
    width: 19px !important;
    height: 19px !important;
    display: block !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 2.05 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
}

.nav-icon svg path,
.nav-icon svg circle,
.nav-icon svg rect,
.nav-icon svg line,
.nav-icon svg polyline,
.nav-icon svg polygon,
.logout-icon svg path,
.switcher-icon-svg svg path,
.switcher-icon-svg svg circle,
.quick-action-icon svg path,
.dashboard-kpi-icon svg path {
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 2.05 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
}

/* Login visual: only operational/school stats, no finance */
.auth-ultra-hero-copy p {
    max-width: 540px !important;
}

.auth-ultra-window-body {
    grid-template-columns: 1fr 1fr 1.2fr !important;
}

.auth-ultra-stat.stat-students em::before,
.auth-ultra-stat.stat-one em::before {
    background: linear-gradient(90deg, #34d399, #a7f3d0) !important;
}

.auth-ultra-stat.stat-staff em::before,
.auth-ultra-stat.stat-two em::before {
    background: linear-gradient(90deg, #a78bfa, #ddd6fe) !important;
}

.auth-ultra-chart.attendance-chart {
    position: relative;
    padding-top: 42px !important;
    background:
        linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.09)),
        rgba(255,255,255,.11) !important;
}

.attendance-chart-label {
    position: absolute;
    top: 14px;
    inset-inline-start: 18px;
    color: rgba(255,255,255,.78);
    font-size: 11px;
    font-weight: 950;
    white-space: nowrap;
}

.auth-ultra-chart.attendance-chart span {
    background: linear-gradient(180deg, #d1fae5, rgba(255,255,255,.36)) !important;
    box-shadow: 0 -8px 24px rgba(52,211,153,.12);
}

.auth-ultra-radar.attendance-focus {
    background:
        radial-gradient(circle at 80% 22%, rgba(52,211,153,.22), transparent 36%),
        rgba(255,255,255,.12) !important;
}

.auth-ultra-live-metric small {
    display: inline-flex;
    color: rgba(255,255,255,.68);
    font-size: 12px;
    font-weight: 900;
}

.login-nonfinance-row .dot.amber {
    background: #fb7185 !important;
    box-shadow: 0 0 0 5px rgba(251,113,133,.16) !important;
}

.login-nonfinance-row .dot.violet {
    background: #a78bfa !important;
    box-shadow: 0 0 0 5px rgba(167,139,250,.16) !important;
}

/* Replace rough CSS login icons with cleaner premium pictograms */
.auth-ultra-input > span,
.auth-ultra-lock {
    background:
        radial-gradient(circle at 30% 18%, rgba(255,255,255,.38), transparent 42%),
        var(--icon-premium-bg) !important;
    border: 1px solid var(--icon-premium-border) !important;
    color: var(--blue) !important;
}

.auth-ultra-input.mail > span::before {
    width: 18px !important;
    height: 13px !important;
    border: 2px solid currentColor !important;
    border-radius: 5px !important;
    background: transparent !important;
    transform: none !important;
}

.auth-ultra-input.mail > span::after {
    width: 12px !important;
    height: 12px !important;
    border: 0 !important;
    border-inline-start: 2px solid currentColor !important;
    border-bottom: 2px solid currentColor !important;
    transform: rotate(-45deg) translate(0, -1px) !important;
    opacity: .86 !important;
}

html[dir="rtl"] .auth-ultra-input.mail > span::after {
    transform: rotate(45deg) translate(0, -1px) !important;
}

.auth-ultra-input.lock > span::before,
.auth-ultra-lock::before {
    width: 18px !important;
    height: 15px !important;
    border: 2px solid currentColor !important;
    border-radius: 6px !important;
    background: transparent !important;
    transform: translateY(5px) !important;
}

.auth-ultra-input.lock > span::after,
.auth-ultra-lock::after {
    width: 14px !important;
    height: 13px !important;
    border: 2px solid currentColor !important;
    border-bottom: 0 !important;
    border-radius: 12px 12px 0 0 !important;
    top: 8px !important;
}

.auth-ultra-lock::after {
    top: 15px !important;
}

.auth-ultra-eye::before {
    width: 22px !important;
    height: 14px !important;
    border: 2px solid currentColor !important;
    border-radius: 999px / 68% !important;
    background: transparent !important;
}

.auth-ultra-eye::after {
    width: 6.5px !important;
    height: 6.5px !important;
    background: currentColor !important;
}

@media (max-width: 700px) {
    .auth-ultra-window-body {
        grid-template-columns: 1fr 1fr !important;
    }
    .auth-ultra-chart.attendance-chart,
    .auth-ultra-radar.attendance-focus {
        grid-column: 1 / -1 !important;
    }
}

/* ===== v20.7 clean professional icon system ===== */
:root {
    --icon-line: #9aa8ff;
    --icon-line-strong: #cfd7ff;
    --icon-surface: rgba(129, 140, 248, .12);
    --icon-border-soft: rgba(129, 140, 248, .22);
}

/* Stop old CSS-drawn login pictograms from stacking over the new SVG icons */
.auth-ultra-lock::before,
.auth-ultra-lock::after,
.auth-ultra-input.mail > span::before,
.auth-ultra-input.mail > span::after,
.auth-ultra-input.lock > span::before,
.auth-ultra-input.lock > span::after,
.auth-ultra-eye::before,
.auth-ultra-eye::after,
.auth-ultra-secure-badge i::before,
.auth-ultra-secure-badge i::after {
    content: none !important;
    display: none !important;
}

.auth-svg-icon,
.auth-ultra-lock,
.auth-ultra-eye,
.auth-ultra-secure-badge .auth-svg-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: var(--icon-line) !important;
    background: linear-gradient(135deg, rgba(129,140,248,.16), rgba(34,211,238,.08)) !important;
    border: 1px solid var(--icon-border-soft) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08) !important;
    overflow: hidden !important;
}

.auth-svg-icon,
.auth-ultra-input > .auth-svg-icon {
    width: 38px !important;
    height: 38px !important;
    flex: 0 0 38px !important;
    border-radius: 14px !important;
}

.auth-ultra-lock {
    width: 58px !important;
    height: 58px !important;
    flex: 0 0 58px !important;
    border-radius: 20px !important;
}

.auth-svg-icon.mini,
.auth-ultra-secure-badge .auth-svg-icon {
    width: 24px !important;
    height: 24px !important;
    flex: 0 0 24px !important;
    border-radius: 9px !important;
    background: rgba(255,255,255,.10) !important;
    color: rgba(255,255,255,.88) !important;
    border-color: rgba(255,255,255,.18) !important;
}

.auth-svg-icon svg,
.auth-ultra-lock svg,
.auth-ultra-eye svg,
.auth-ultra-secure-badge .auth-svg-icon svg {
    width: 20px !important;
    height: 20px !important;
    display: block !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 2 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
    vector-effect: non-scaling-stroke;
}

.auth-ultra-lock svg {
    width: 25px !important;
    height: 25px !important;
}

.auth-svg-icon.mini svg,
.auth-ultra-secure-badge .auth-svg-icon svg {
    width: 15px !important;
    height: 15px !important;
}

.auth-ultra-eye {
    width: 40px !important;
    height: 40px !important;
    flex: 0 0 40px !important;
    border-radius: 14px !important;
    background: rgba(129,140,248,.10) !important;
    border: 1px solid rgba(129,140,248,.18) !important;
    color: #9aa8ff !important;
    opacity: 1 !important;
    padding: 0 !important;
}

.auth-ultra-eye:hover,
.auth-ultra-eye.is-visible {
    color: #fff !important;
    background: linear-gradient(135deg, #6366f1, #22d3ee) !important;
    border-color: rgba(255,255,255,.18) !important;
}

.auth-ultra-eye:not(.is-visible) svg::after { display: none !important; }
.auth-ultra-eye:not(.is-visible) {
    position: relative;
}
.auth-ultra-eye:not(.is-visible)::selection { background: transparent; }
.auth-ultra-eye:not(.is-visible) svg { opacity: .86; }
.auth-ultra-eye:not(.is-visible)::before {
    content: "" !important;
    display: block !important;
    position: absolute;
    width: 24px;
    height: 2px;
    border-radius: 999px;
    background: currentColor;
    transform: rotate(-38deg);
    opacity: .82;
}

.auth-ultra-input {
    gap: 14px !important;
}

.auth-ultra-input:focus-within .auth-svg-icon {
    color: #fff !important;
    background: linear-gradient(135deg, #6366f1, #22d3ee) !important;
    border-color: rgba(255,255,255,.18) !important;
    box-shadow: 0 10px 24px rgba(99,102,241,.18) !important;
}

/* Platform/sidebar icons: balanced professional outlined icon buttons */
.nav-icon,
.logout-icon,
.dashboard-kpi-icon,
.quick-action-icon,
.theme-toggle-icon-wrap,
.switcher-icon-svg {
    color: currentColor !important;
}

.nav-icon {
    width: 38px !important;
    height: 38px !important;
    flex: 0 0 38px !important;
    border-radius: 15px !important;
    background: rgba(255,255,255,.045) !important;
    border: 1px solid rgba(255,255,255,.075) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06) !important;
}

.sidebar-nav a.active .nav-icon {
    background: linear-gradient(135deg, rgba(34,211,238,.92), rgba(99,102,241,.92)) !important;
    color: #fff !important;
    border-color: rgba(255,255,255,.22) !important;
    box-shadow: 0 12px 26px rgba(34,211,238,.18), inset 0 1px 0 rgba(255,255,255,.18) !important;
}

.sidebar-nav a:hover .nav-icon:not(.sidebar-nav a.active .nav-icon) {
    background: rgba(255,255,255,.09) !important;
    border-color: rgba(255,255,255,.12) !important;
}

.nav-icon svg,
.nav-icon .pro-line-icon,
.logout-icon svg,
.switcher-icon-svg svg,
.quick-action-icon svg,
.dashboard-kpi-icon svg,
.theme-toggle-icon-wrap svg {
    width: 20px !important;
    height: 20px !important;
    stroke-width: 1.95 !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
    vector-effect: non-scaling-stroke;
}

.nav-icon svg *,
.logout-icon svg *,
.switcher-icon-svg svg *,
.quick-action-icon svg *,
.dashboard-kpi-icon svg *,
.theme-toggle-icon-wrap svg * {
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.95 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
}

html[data-theme="light"] .auth-svg-icon,
html[data-theme="light"] .auth-ultra-lock,
html[data-theme="light"] .auth-ultra-eye {
    --icon-line: #4f46e5;
    background: linear-gradient(135deg, rgba(79,70,229,.10), rgba(14,116,144,.06)) !important;
    border-color: rgba(79,70,229,.16) !important;
}
.sidebar-nav a:not(.active):hover .nav-icon {
    background: rgba(255,255,255,.09) !important;
    border-color: rgba(255,255,255,.12) !important;
}

/* ===== v21 professional admin dashboard ===== */
.v21-hero,
.v21-kpi-card,
.v21-panel,
.v21-action-card,
.v21-command-card {
    position: relative;
}
.v21-icon-svg {
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: currentColor;
    flex: 0 0 22px;
}
.v21-icon-svg svg {
    width: 22px !important;
    height: 22px !important;
    display: block;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.85 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
    overflow: visible;
}
.v21-icon-svg svg * {
    vector-effect: non-scaling-stroke;
}
.v21-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(320px, .65fr);
    gap: 24px;
    padding: 30px !important;
    border-radius: 32px !important;
    overflow: hidden;
    background:
        radial-gradient(circle at 8% 0%, rgba(37, 99, 235, .12), transparent 30%),
        radial-gradient(circle at 95% 15%, rgba(20, 184, 166, .12), transparent 30%),
        linear-gradient(135deg, rgba(255,255,255,.92), rgba(255,255,255,.78)),
        var(--surface) !important;
    box-shadow: 0 28px 70px rgba(15, 23, 42, .09) !important;
}
.v21-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(37,99,235,.055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(37,99,235,.055) 1px, transparent 1px);
    background-size: 42px 42px;
    mask-image: linear-gradient(to bottom, rgba(0,0,0,.55), transparent 72%);
    pointer-events: none;
}
.v21-hero-copy,
.v21-command-card {
    position: relative;
    z-index: 1;
}
.v21-chip {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-height: 38px;
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid rgba(37, 99, 235, .16);
    background: rgba(37, 99, 235, .08);
    color: var(--blue);
    font-size: 12px;
    font-weight: 950;
}
.v21-chip .v21-icon-svg,
.v21-chip .v21-icon-svg svg {
    width: 18px !important;
    height: 18px !important;
}
.v21-hero h2 {
    max-width: 860px;
    margin: 18px 0 10px;
    font-size: clamp(30px, 3.3vw, 50px);
    line-height: 1.14;
    font-weight: 950;
    letter-spacing: -.035em;
}
html[dir="rtl"] .v21-hero h2 { letter-spacing: 0; }
.v21-hero p {
    max-width: 760px;
    margin: 0;
    color: var(--muted);
    font-size: 15px;
    line-height: 1.95;
    font-weight: 700;
}
.v21-hero-meta {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-top: 24px;
}
.v21-hero-meta div {
    min-width: 0;
    padding: 14px;
    border-radius: 20px;
    border: 1px solid var(--border);
    background: rgba(255,255,255,.68);
    backdrop-filter: blur(10px);
}
.v21-hero-meta span,
.v21-hero-meta strong {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.v21-hero-meta span { color: var(--muted); font-size: 12px; font-weight: 800; }
.v21-hero-meta strong { margin-top: 5px; font-size: 14px; font-weight: 950; }
.v21-command-card {
    align-self: stretch;
    min-height: 240px;
    padding: 18px;
    border-radius: 28px;
    border: 1px solid rgba(37, 99, 235, .14);
    background:
        linear-gradient(135deg, rgba(15, 23, 42, .94), rgba(30, 64, 175, .82)),
        var(--navy);
    color: white;
    overflow: hidden;
    display: grid;
    grid-template-columns: 148px minmax(0,1fr);
    gap: 14px;
    align-items: center;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 22px 50px rgba(15, 23, 42, .18);
}
.v21-command-card::before {
    content: "";
    position: absolute;
    width: 210px;
    height: 210px;
    border-radius: 999px;
    inset-inline-end: -80px;
    top: -80px;
    background: rgba(20, 184, 166, .22);
    filter: blur(4px);
}
.v21-orb {
    width: 140px;
    height: 140px;
    border-radius: 999px;
    background:
        radial-gradient(circle at center, rgba(255,255,255,.13) 0 48%, transparent 49%),
        conic-gradient(#22c55e calc(var(--v) * 1%), rgba(255,255,255,.16) 0);
    display: grid;
    place-items: center;
    text-align: center;
    position: relative;
}
.v21-orb::after {
    content: "";
    position: absolute;
    inset: 12px;
    border-radius: inherit;
    background: rgba(15,23,42,.58);
}
.v21-orb span,
.v21-orb small {
    position: relative;
    z-index: 1;
    display: block;
}
.v21-orb span { font-size: 31px; line-height: 1; font-weight: 950; }
.v21-orb small { margin-top: 6px; font-size: 11px; color: rgba(255,255,255,.72); font-weight: 900; }
.v21-command-list { display: grid; gap: 10px; min-width: 0; }
.v21-command-list a {
    display: grid;
    grid-template-columns: 38px 1fr;
    gap: 10px;
    align-items: center;
    padding: 12px;
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,.1);
    background: rgba(255,255,255,.08);
    min-width: 0;
}
.v21-command-list a span {
    width: 38px;
    height: 38px;
    display: inline-grid;
    place-items: center;
    border-radius: 14px;
    background: rgba(255,255,255,.13);
    color: #dbeafe;
    grid-row: span 2;
}
.v21-command-list a span .v21-icon-svg,
.v21-command-list a span .v21-icon-svg svg { width: 20px !important; height: 20px !important; }
.v21-command-list strong { display: block; font-size: 22px; line-height: 1; }
.v21-command-list em { display: block; font-style: normal; color: rgba(255,255,255,.72); font-size: 11px; font-weight: 850; }
.v21-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin: 20px 0;
}
.v21-kpi-card {
    min-height: 136px;
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 18px;
    border-radius: 24px;
    border: 1px solid var(--border);
    background: var(--surface);
    overflow: hidden;
    box-shadow: 0 15px 42px rgba(15, 23, 42, .055);
}
.v21-kpi-card::after {
    content: "";
    position: absolute;
    inset-inline-end: 0;
    top: 18px;
    bottom: 18px;
    width: 4px;
    border-radius: 999px;
    background: currentColor;
    opacity: .55;
}
.v21-kpi-icon,
.v21-icon-badge {
    width: 52px;
    height: 52px;
    display: inline-grid;
    place-items: center;
    flex: 0 0 52px;
    border-radius: 18px;
    background: rgba(37,99,235,.1);
    color: var(--blue);
}
.v21-icon-badge { width: 46px; height: 46px; flex-basis: 46px; border-radius: 16px; }
.v21-kpi-icon .v21-icon-svg,
.v21-kpi-icon .v21-icon-svg svg { width: 24px !important; height: 24px !important; }
.v21-icon-badge .v21-icon-svg,
.v21-icon-badge .v21-icon-svg svg { width: 22px !important; height: 22px !important; }
.v21-kpi-body { min-width: 0; }
.v21-kpi-body small,
.v21-kpi-body span {
    display: block;
    color: var(--muted);
    font-size: 12px;
    font-weight: 850;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.v21-kpi-body strong {
    display: block;
    margin: 7px 0 6px;
    color: var(--text);
    font-size: clamp(24px, 2.25vw, 34px);
    line-height: 1;
    font-weight: 950;
}
.tone-blue { color: #2563eb; }
.tone-cyan { color: #0891b2; }
.tone-emerald { color: #059669; }
.tone-rose { color: #e11d48; }
.tone-violet { color: #7c3aed; }
.tone-amber { color: #d97706; }
.tone-indigo { color: #4f46e5; }
.tone-slate { color: #334155; }
.tone-blue .v21-kpi-icon, .v21-icon-badge.blue { background: rgba(37,99,235,.11); color: #2563eb; }
.tone-cyan .v21-kpi-icon, .v21-icon-badge.cyan { background: rgba(6,182,212,.12); color: #0891b2; }
.tone-emerald .v21-kpi-icon, .v21-icon-badge.emerald { background: rgba(16,185,129,.12); color: #059669; }
.tone-rose .v21-kpi-icon, .v21-icon-badge.rose { background: rgba(244,63,94,.12); color: #e11d48; }
.tone-violet .v21-kpi-icon, .v21-icon-badge.violet { background: rgba(139,92,246,.12); color: #7c3aed; }
.tone-amber .v21-kpi-icon, .v21-icon-badge.amber { background: rgba(245,158,11,.14); color: #d97706; }
.tone-indigo .v21-kpi-icon, .v21-icon-badge.indigo { background: rgba(99,102,241,.12); color: #4f46e5; }
.tone-slate .v21-kpi-icon, .v21-icon-badge.slate { background: rgba(71,85,105,.12); color: #334155; }
.v21-grid-main,
.v21-grid-2,
.v21-grid-3 {
    display: grid;
    gap: 16px;
    margin-bottom: 16px;
}
.v21-grid-main { grid-template-columns: minmax(340px, .78fr) minmax(0, 1.22fr); }
.v21-grid-2 { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }
.v21-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.v21-panel {
    padding: 22px !important;
    border-radius: 26px !important;
    overflow: hidden;
}
.v21-panel-head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
}
.v21-panel-head.compact { margin-bottom: 14px; }
.v21-panel-head h3 {
    margin: 0 0 4px;
    font-size: 20px;
    line-height: 1.3;
    font-weight: 950;
}
.v21-panel-head p {
    margin: 0;
    color: var(--muted);
    font-size: 12px;
    font-weight: 750;
}
.v21-attendance-layout {
    display: grid;
    grid-template-columns: 142px minmax(0, 1fr);
    gap: 16px;
    align-items: center;
}
.v21-ring {
    width: 140px;
    height: 140px;
    border-radius: 999px;
    background:
        radial-gradient(circle at center, var(--surface) 0 57%, transparent 58%),
        conic-gradient(#10b981 calc(var(--v) * 1%), rgba(15,23,42,.08) 0);
    display: grid;
    place-items: center;
    box-shadow: inset 0 0 0 1px var(--border);
}
.v21-ring span { font-size: 28px; font-weight: 950; color: var(--text); }
.v21-attendance-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}
.v21-attendance-stats div,
.v21-staff-split div,
.v21-money-stack div {
    padding: 14px;
    border-radius: 18px;
    border: 1px solid var(--border);
    background: var(--surface-2);
}
.v21-attendance-stats strong,
.v21-staff-split strong,
.v21-money-stack strong {
    display: block;
    font-size: 24px;
    line-height: 1;
    margin-bottom: 7px;
    font-weight: 950;
}
.v21-attendance-stats span,
.v21-staff-split span,
.v21-money-stack span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 850;
}
.v21-trend-chart {
    min-height: 210px;
    display: flex;
    align-items: end;
    gap: 10px;
    padding-top: 18px;
}
.v21-trend-col { flex: 1; min-width: 0; display: grid; gap: 8px; text-align: center; }
.v21-trend-bar {
    height: 170px;
    display: flex;
    align-items: end;
    justify-content: center;
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(37,99,235,.06), rgba(37,99,235,.025));
    border: 1px solid rgba(37,99,235,.08);
    overflow: hidden;
}
.v21-trend-bar span {
    width: 58%;
    border-radius: 14px 14px 0 0;
    background: linear-gradient(180deg, #60a5fa, #2563eb);
    box-shadow: 0 -8px 18px rgba(37,99,235,.2);
}
.v21-trend-col small { color: var(--muted); font-size: 11px; font-weight: 850; }
.v21-bars-list,
.v21-student-watch-list,
.v21-activity-list,
.v21-recent-students,
.v21-money-stack {
    display: grid;
    gap: 10px;
}
.v21-bar-row {
    display: grid;
    gap: 8px;
}
.v21-bar-row > div {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: center;
}
.v21-bar-row strong { font-size: 13px; font-weight: 950; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v21-bar-row span { color: var(--muted); font-size: 12px; font-weight: 900; }
.v21-bar-row em {
    height: 9px;
    border-radius: 999px;
    background: rgba(15,23,42,.07);
    overflow: hidden;
    display: block;
}
.v21-bar-row em i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #7c3aed, #06b6d4);
}
.v21-money-stack div {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}
.v21-money-stack div.highlight { background: rgba(16,185,129,.09); border-color: rgba(16,185,129,.16); }
.v21-mini-months {
    height: 82px;
    display: flex;
    gap: 8px;
    align-items: end;
    margin-top: 14px;
    padding: 10px 12px 6px;
    border-radius: 18px;
    background: var(--surface-2);
    border: 1px solid var(--border);
}
.v21-mini-months span { flex: 1; display: grid; gap: 5px; align-items: end; height: 100%; text-align: center; }
.v21-mini-months i { display: block; min-height: 5px; border-radius: 999px 999px 4px 4px; background: linear-gradient(180deg, #fbbf24, #f59e0b); }
.v21-mini-months small { color: var(--muted); font-size: 10px; font-weight: 850; }
.v21-student-watch-list a,
.v21-recent-students a,
.v21-activity-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-radius: 18px;
    border: 1px solid var(--border);
    background: var(--surface-2);
    min-width: 0;
}
.v21-student-watch-list a > span,
.v21-recent-students a > span {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: inline-grid;
    place-items: center;
    border-radius: 15px;
    background: linear-gradient(135deg, rgba(37,99,235,.13), rgba(20,184,166,.12));
    color: var(--blue);
    font-weight: 950;
}
.v21-student-watch-list a div,
.v21-recent-students a div,
.v21-activity-item div { min-width: 0; flex: 1; }
.v21-student-watch-list strong,
.v21-recent-students strong,
.v21-activity-item strong { display: block; font-size: 13px; font-weight: 950; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v21-student-watch-list small,
.v21-recent-students small,
.v21-activity-item small { display: block; color: var(--muted); font-size: 11px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v21-student-watch-list em {
    min-width: 34px;
    height: 34px;
    display: inline-grid;
    place-items: center;
    border-radius: 12px;
    background: rgba(244,63,94,.11);
    color: #e11d48;
    font-style: normal;
    font-weight: 950;
}
.v21-recent-students em,
.v21-action-card em {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    display: inline-grid;
    place-items: center;
    border-radius: 14px;
    background: var(--surface);
    color: var(--blue);
    font-style: normal;
}
.v21-recent-students em .v21-icon-svg,
.v21-recent-students em .v21-icon-svg svg,
.v21-action-card em .v21-icon-svg,
.v21-action-card em .v21-icon-svg svg { width: 17px !important; height: 17px !important; }
html[dir="rtl"] .v21-recent-students em .v21-icon-svg,
html[dir="rtl"] .v21-action-card em .v21-icon-svg { transform: rotate(180deg); }
.v21-actions-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}
.v21-action-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    border-radius: 20px;
    border: 1px solid var(--border);
    background: var(--surface-2);
    min-width: 0;
}
.v21-action-card > span {
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    display: inline-grid;
    place-items: center;
    border-radius: 17px;
    background: rgba(37,99,235,.1);
    color: var(--blue);
}
.v21-action-card > span .v21-icon-svg,
.v21-action-card > span .v21-icon-svg svg { width: 22px !important; height: 22px !important; }
.v21-action-card div { min-width: 0; flex: 1; }
.v21-action-card strong { display: block; font-size: 14px; font-weight: 950; margin-bottom: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v21-action-card small { display: block; color: var(--muted); font-size: 11px; line-height: 1.6; font-weight: 800; }
.v21-activity-item > span {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    display: inline-grid;
    place-items: center;
    border-radius: 15px;
    background: rgba(71,85,105,.11);
    color: #334155;
}
.v21-activity-item > span .v21-icon-svg,
.v21-activity-item > span .v21-icon-svg svg { width: 19px !important; height: 19px !important; }
.v21-staff-split {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}
.v21-empty-state {
    padding: 18px;
    border-radius: 18px;
    background: var(--surface-2);
    border: 1px dashed var(--border-strong);
    color: var(--muted);
    font-size: 13px;
    font-weight: 850;
    text-align: center;
}
.v21-empty-state.success {
    color: var(--success);
    background: rgba(16,185,129,.08);
    border-color: rgba(16,185,129,.2);
}
/* Global professional icon polish for the platform navigation */
.sidebar-nav .nav-icon {
    border-radius: 15px !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}
.sidebar-nav .nav-icon svg {
    width: 20px !important;
    height: 20px !important;
    display: block !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.85 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
}
.sidebar-nav .nav-icon svg * {
    vector-effect: non-scaling-stroke;
}
html[data-theme="dark"] .v21-hero {
    background:
        radial-gradient(circle at 8% 0%, rgba(59,130,246,.16), transparent 30%),
        radial-gradient(circle at 95% 15%, rgba(20,184,166,.14), transparent 30%),
        linear-gradient(135deg, rgba(15,23,42,.96), rgba(15,23,42,.86)),
        var(--surface) !important;
}
html[data-theme="dark"] .v21-hero-meta div,
html[data-theme="dark"] .v21-kpi-card,
html[data-theme="dark"] .v21-panel,
html[data-theme="dark"] .v21-action-card,
html[data-theme="dark"] .v21-activity-item,
html[data-theme="dark"] .v21-student-watch-list a,
html[data-theme="dark"] .v21-recent-students a {
    background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.015)), var(--surface) !important;
}
html[data-theme="dark"] .v21-ring {
    background:
        radial-gradient(circle at center, var(--surface) 0 57%, transparent 58%),
        conic-gradient(#10b981 calc(var(--v) * 1%), rgba(255,255,255,.1) 0);
}
@media (max-width: 1280px) {
    .v21-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .v21-grid-main,
    .v21-grid-2,
    .v21-grid-3 { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
    .v21-hero { grid-template-columns: 1fr; padding: 22px !important; }
    .v21-command-card { grid-template-columns: 1fr; justify-items: center; }
    .v21-command-list { width: 100%; }
    .v21-hero-meta { grid-template-columns: 1fr; }
    .v21-kpi-grid { grid-template-columns: 1fr; }
    .v21-actions-grid { grid-template-columns: 1fr; }
    .v21-attendance-layout { grid-template-columns: 1fr; justify-items: center; }
    .v21-attendance-stats, .v21-staff-split { width: 100%; }
}
@media (max-width: 560px) {
    .v21-panel { padding: 16px !important; border-radius: 22px !important; }
    .v21-hero h2 { font-size: 28px; }
    .v21-kpi-card { min-height: 116px; padding: 15px; }
    .v21-attendance-stats,
    .v21-staff-split { grid-template-columns: 1fr; }
    .v21-trend-chart { gap: 6px; }
    .v21-trend-bar { height: 138px; }
}