* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }
body {
    background:
        radial-gradient(circle at top left, rgba(74,111,165,0.12), transparent 28%),
        linear-gradient(180deg, #f4f7fb 0%, #eaf1f8 100%);
    color: #1f2f44;
    font-family: 'Segoe UI', system-ui, sans-serif;
    font-size: 14px;
    display: flex;
    flex-direction: column;
}
.container { max-width: 1200px; margin: 0 auto; padding: 15px; width: 100%; }
main { flex: 1; }
header {
    background: linear-gradient(135deg, #142b52, #315a92 58%, #4f78ad);
    color: white;
    padding: 15px 0;
    text-align: center;
    margin-bottom: 20px;
    border-radius: 0 0 18px 18px;
    box-shadow: 0 12px 32px rgba(30, 60, 114, 0.14);
}
.admin-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
}
.admin-header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.logo { font-size: 1.8rem; font-weight: 700; }
.logo span { color: #ffd166; }
.header-subtitle { color: rgba(255,255,255,0.88); margin-top: 4px; }
.header-outline-light {
    border-color: rgba(255,255,255,0.65);
    color: #fff;
}
.card {
    background: white;
    border-radius: 22px;
    padding: 20px;
    border: 1px solid #e3ebf3;
    box-shadow: 0 10px 28px rgba(17,34,68,0.06);
    margin-bottom: 20px;
}
.card-no-bottom { margin-bottom: 0; }
.dashboard-section-body {
    display: grid;
    gap: 0;
}
.dashboard-section.is-collapsed {
    padding-bottom: 16px;
}
.dashboard-section.is-collapsed .dashboard-section-body {
    display: none;
}
.section-toggle {
    min-width: 132px;
    justify-content: center;
}
h1 { color: #1e3c72; margin-bottom: 15px; font-size: 1.4rem; border-bottom: 2px solid #f0f5ff; padding-bottom: 10px; }
h2 { color: #1e3c72; margin-bottom: 15px; font-size: 1.2rem; }
h3 { color: #3a5a8a; margin-bottom: 10px; }
.heading-no-bottom { margin-bottom: 0; }
.info-box {
    background: #e7f3ff;
    border-left: 4px solid #4a6fa5;
    padding: 12px 15px;
    border-radius: 10px;
    margin-bottom: 15px;
    color: #0c5460;
    font-size: 0.9rem;
}
.row { display: flex; gap: 15px; flex-wrap: wrap; }
.row-space-between { display: flex; justify-content: space-between; gap: 15px; align-items: center; flex-wrap: wrap; }
.col { flex: 1; min-width: 220px; }
.metric {
    background:
        radial-gradient(circle at top right, rgba(42,157,143,0.08), transparent 36%),
        linear-gradient(135deg, rgba(42, 157, 143, 0.08), rgba(74, 111, 165, 0.08));
    border-left: 4px solid #2a9d8f;
    border-radius: 14px;
    padding: 16px;
}
.metric-label { color: #5a6b7c; font-size: 0.85rem; margin-bottom: 8px; }
.metric-value { color: #1e3c72; font-size: 1.6rem; font-weight: 700; }
.metric-sub { color: #718096; font-size: 0.8rem; margin-top: 4px; }
.notification-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    margin-left: 8px;
    padding: 0 8px;
    border-radius: 999px;
    background: #1e3c72;
    color: #fff;
    font-size: 0.8rem;
    font-weight: 700;
    vertical-align: middle;
}
.toolbar {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 15px;
}
.toolbar-column { flex-direction: column; align-items: stretch; }
.toolbar-no-bottom { margin-bottom: 0; }
.toolbar-tight { margin-bottom: 0; }
.toolbar-tight-top { margin-top: 6px; }
.toolbar-margin-top-6 { margin-top: 6px; }
.filter-grid {
    display: grid;
    grid-template-columns: minmax(240px, 1.4fr) repeat(3, minmax(150px, 0.7fr)) auto;
    gap: 10px;
    align-items: center;
}
.field {
    padding: 10px 12px;
    border: 1px solid #ddd;
    border-radius: 12px;
    font-size: 0.95rem;
    min-width: 260px;
    width: 100%;
    max-width: 420px;
}
.admin-notes-field { min-width: 100%; max-width: 100%; }
.btn {
    padding: 10px 18px;
    background: #1e3c72;
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.btn:hover { background: #16315e; transform: translateY(-1px); }
.btn-success { background: #2a9d8f; }
.btn-success:hover { background: #21867a; }
.btn-danger { background: #dc3545; }
.btn-outline { background: transparent; border: 1.5px solid #c8d5e3; color: #1e3c72; }
.btn-outline:hover { background: #1e3c72; color: white; }
.btn:disabled { opacity: 0.6; cursor: not-allowed; }
.table-wrap { overflow-x: auto; }
.table-hidden { overflow: hidden; }
table {
    width: 100%;
    border-collapse: collapse;
    min-width: 920px;
}
th, td {
    text-align: left;
    padding: 12px 10px;
    border-bottom: 1px solid #edf2f7;
    vertical-align: top;
}
th {
    color: #1e3c72;
    background: #f8fbff;
    font-size: 0.84rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
td { color: #334155; }
.badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
}
.badge-ok { background: #d4edda; color: #155724; }
.badge-warn { background: #fff3cd; color: #856404; }
.badge-info { background: #d1ecf1; color: #0c5460; }
.muted { color: #718096; }
.text-small { font-size: 0.84rem; }
.text-smaller { font-size: 0.8rem; }
.empty-state {
    padding: 28px 16px;
    text-align: center;
    color: #718096;
    background: #fafcff;
    border: 1px dashed #dbe6f3;
    border-radius: 14px;
}
.empty-state-tight { padding: 18px 16px; }
.notification-list {
    display: grid;
    gap: 10px;
}
.notification-item {
    width: 100%;
    border: 1px solid #e8edf2;
    border-radius: 16px;
    padding: 14px 16px;
    background:
        radial-gradient(circle at top right, rgba(74,111,165,0.08), transparent 34%),
        linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    text-align: left;
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
    color: inherit;
    font: inherit;
    appearance: none;
}
.notification-item:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 28px rgba(17, 34, 68, 0.08);
    border-color: #d6e2f1;
}
.notification-item-unread {
    border-color: #9bc1ff;
    box-shadow: inset 0 0 0 1px rgba(30, 60, 114, 0.08);
}
.notification-item-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}
.notification-item-title-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.notification-item-message {
    color: #24364a;
    line-height: 1.45;
    font-weight: 600;
}
.notification-item-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 8px;
    color: #718096;
    font-size: 0.82rem;
}
.notification-dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 9px;
    border-radius: 999px;
    background: #fff3cd;
    color: #856404;
    font-size: 0.74rem;
    font-weight: 700;
}
.loading {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #4a6fa5;
}
.spinner {
    width: 16px;
    height: 16px;
    border: 2px solid #d7e1ee;
    border-top-color: #4a6fa5;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.split {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 15px;
}
.action-link {
    background: transparent;
    border: 1px solid #c6d7ea;
    color: #1e3c72;
    padding: 7px 10px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 700;
}
.action-link:hover { background: #f3f7fc; }
.modal-overlay-admin {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(13, 25, 43, 0.72);
    z-index: 10000;
    align-items: center;
    justify-content: center;
    padding: 18px;
}
.modal-overlay-admin.active { display: flex; }
.modal-overlay-admin#deleteModal.active,
.modal-overlay-admin#proofRejectModal.active {
    z-index: 10020;
}
.admin-modal {
    width: min(1100px, 100%);
    max-height: min(90vh, 920px);
    overflow: auto;
    background: #fff;
    border-radius: 22px;
    box-shadow: 0 24px 60px rgba(0,0,0,0.26);
}
.admin-modal-header {
    padding: 18px 20px;
    border-bottom: 1px solid #e8edf2;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 1;
}
.admin-modal-body { padding: 20px; }
.admin-modal-grid {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 16px;
}
.detail-panel {
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    border: 1px solid #e5edf7;
    border-radius: 16px;
    padding: 16px;
}
.detail-panel.dashboard-section.is-collapsed {
    padding-bottom: 16px;
}
.dashboard-section-body {
    display: grid;
    gap: 0;
}
.detail-panel.dashboard-section.is-collapsed .dashboard-section-body {
    display: none;
}
.detail-list {
    list-style: none;
    display: grid;
    gap: 10px;
}
.detail-list li {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px dashed #e5edf7;
    padding-bottom: 8px;
}
.upload-grid, .audit-log-list, .email-log-list { display: grid; gap: 10px; }
.upload-item, .audit-log-item, .email-log-item {
    background: #fff;
    border: 1px solid #e8edf2;
    border-radius: 14px;
    padding: 12px 14px;
}
.audit-log-top, .email-log-top, .upload-top {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
    margin-bottom: 8px;
}
.audit-log-summary, .email-log-summary, .audit-log-summary {
    color: #24364a;
    line-height: 1.45;
}
.email-log-summary { font-weight: 600; }
.audit-log-meta, .email-log-meta {
    margin-top: 6px;
    font-size: 0.78rem;
    color: #718096;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.section-gap { margin-top: 12px; }
.section-stack { display: grid; gap: 10px; }
.section-stack-lg { display: grid; gap: 14px; }
.section-caption, .section-label, .section-note { color: #718096; }
.token-note { margin-top: 4px; }
.item-title { font-weight: 700; color: #1e3c72; }
.item-meta { color: #718096; }
.item-subtle { color: #718096; }
.item-link { color: #1e3c72; font-weight: 700; }
.open-file-wrapper { display: inline-flex; align-items: center; gap: 8px; }
.status-controls { display: flex; gap: 8px; flex-wrap: wrap; }
.status-pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; background: #eef5ff; color: #1e3c72; font-size: 0.78rem; font-weight: 700; }
.status-pill.active { background: #d1ecf1; color: #0c5460; }
.margin-top-4 { margin-top: 4px; }
.margin-top-10 { margin-top: 10px; }
.margin-top-8 { margin-top: 8px; }
.spacer-14 { height: 14px; }
@media (max-width: 900px) {
    .split { grid-template-columns: 1fr; }
    .admin-modal-grid { grid-template-columns: 1fr; }
    .admin-header-inner { justify-content: center; }
}