:root {
    --bg: #eef3fb;
    --bg-soft: #f8fafc;
    --surface: #ffffff;
    --surface-alt: #f1f5f9;
    --surface-strong: #e2e8f0;
    --text: #0f172a;
    --muted: #475569;
    --primary: #1546a0;
    --primary-dark: #0f3274;
    --primary-soft: #e8f0ff;
    --accent: #7c3aed;
    --success: #047857;
    --danger: #b91c1c;
    --warning: #b45309;
    --info: #0369a1;
    --border: #cbd5e1;
    --border-strong: #334155;
    --focus: #f59e0b;
    --shadow-sm: 0 2px 10px rgba(15, 23, 42, .07);
    --shadow: 0 20px 44px rgba(15, 23, 42, .12);
    --shadow-lg: 0 28px 70px rgba(15, 23, 42, .18);
    --radius-lg: 22px;
    --radius-md: 15px;
    --radius-sm: 10px;
    --base-font: 16.5px;
}

html.zoom-100 { --base-font: 16.5px; }
html.zoom-110 { --base-font: 18.15px; }
html.zoom-125 { --base-font: 20.6px; }
html.zoom-140 { --base-font: 23.1px; }

html.theme-dark {
    --bg: #0b1220;
    --bg-soft: #111827;
    --surface: #111827;
    --surface-alt: #172033;
    --surface-strong: #1f2937;
    --text: #f8fafc;
    --muted: #d1d5db;
    --primary: #93c5fd;
    --primary-dark: #bfdbfe;
    --primary-soft: #142640;
    --accent: #c4b5fd;
    --success: #86efac;
    --danger: #fca5a5;
    --warning: #fcd34d;
    --info: #7dd3fc;
    --border: #475569;
    --border-strong: #e5e7eb;
    --focus: #fde047;
    --shadow-sm: 0 2px 10px rgba(0, 0, 0, .28);
    --shadow: 0 20px 44px rgba(0, 0, 0, .42);
    --shadow-lg: 0 28px 70px rgba(0, 0, 0, .52);
}

html.theme-contrast {
    --bg: #000000;
    --bg-soft: #000000;
    --surface: #000000;
    --surface-alt: #050505;
    --surface-strong: #111111;
    --text: #ffffff;
    --muted: #ffffff;
    --primary: #ffff00;
    --primary-dark: #ffffff;
    --primary-soft: #1a1a00;
    --accent: #00ffff;
    --success: #00ff66;
    --danger: #ff7373;
    --warning: #ffff00;
    --info: #00ffff;
    --border: #ffffff;
    --border-strong: #ffffff;
    --focus: #00ffff;
    --shadow-sm: none;
    --shadow: none;
    --shadow-lg: none;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    color: var(--text);
    background:
        radial-gradient(circle at top left, rgba(21, 70, 160, .12) 0, transparent 340px),
        linear-gradient(180deg, var(--bg-soft), var(--bg));
    font-family: Inter, Arial, Helvetica, sans-serif;
    font-size: var(--base-font);
    line-height: 1.6;
}
img, svg, video { max-width: 100%; }
a { color: var(--primary); font-weight: 800; }
a:hover { color: var(--primary-dark); }

.skip-link {
    position: absolute;
    left: -999px;
    top: 8px;
    z-index: 9999;
    background: #000;
    color: #fff;
    padding: 12px 16px;
    border: 3px solid #fff;
    border-radius: 8px;
}
.skip-link:focus { left: 8px; }
:focus-visible { outline: 4px solid var(--focus) !important; outline-offset: 3px; }

/* Admin layout */
.admin-body { background: var(--bg); }
.app-shell { display: grid; grid-template-columns: 286px minmax(0, 1fr); min-height: 100vh; }
.sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    background: linear-gradient(180deg, #0f172a 0%, #111827 62%, #172554 100%);
    color: #fff;
    padding: 1.15rem;
    box-shadow: 12px 0 34px rgba(15, 23, 42, .16);
}
.sidebar-brand { display:flex; align-items:center; gap:.75rem; padding:.45rem .25rem 1.1rem; border-bottom:1px solid rgba(255,255,255,.17); margin-bottom:1rem; }
.sidebar-brand img { width:48px; height:48px; object-fit:contain; background:#fff; border-radius:14px; padding:5px; }
.sidebar-title { margin:0; font-weight:900; font-size:1.02rem; line-height:1.2; }
.sidebar-subtitle { margin:.1rem 0 0; color:#cbd5e1; font-size:.82rem; font-weight:700; }
.sidebar-nav { display:grid; gap:.45rem; }
.sidebar a {
    display:flex; align-items:center; gap:.65rem;
    color:#e5e7eb; text-decoration:none;
    padding:.78rem .85rem; border-radius:14px;
    border:1px solid transparent;
    min-height:48px; font-weight:850;
}
.sidebar a:hover, .sidebar a.active {
    background:#ffffff; color:#0f172a; border-color:#ffffff;
    box-shadow: 0 10px 24px rgba(0,0,0,.18);
}
.sidebar .nav-kicker { margin:1.1rem .35rem .45rem; color:#bfdbfe; font-size:.75rem; font-weight:900; text-transform:uppercase; letter-spacing:.08em; }
.main-content { min-width:0; padding:1.4rem; }
.admin-topbar {
    display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap;
    background: rgba(255,255,255,.78); backdrop-filter: blur(14px);
    border:1px solid rgba(203,213,225,.85);
    border-radius: 22px;
    box-shadow: var(--shadow-sm);
    padding: .85rem 1rem;
    margin-bottom:1.2rem;
}
html.theme-dark .admin-topbar, html.theme-contrast .admin-topbar { background:var(--surface); border-color:var(--border); }
.admin-page-title { margin:0; font-size:1.45rem; font-weight:950; letter-spacing:-.02em; }
.admin-page-subtitle { margin:.1rem 0 0; color:var(--muted); font-weight:700; }
.topbar-actions { display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; }
.content-card, .card, .panel {
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}
.card { border-width: 1px; }
.card:hover { box-shadow: var(--shadow); }

/* Dashboard */
.stat-grid { display:grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap:1rem; }
.stat-card {
    position:relative; overflow:hidden; min-height:142px; padding:1.1rem;
    background: linear-gradient(135deg, var(--surface) 0%, var(--surface-alt) 100%);
    border:1px solid var(--border); border-radius:24px; box-shadow:var(--shadow-sm);
}
.stat-card::after { content:""; position:absolute; width:130px; height:130px; right:-55px; top:-60px; background:var(--primary-soft); border-radius:999px; }
.stat-label { margin:0; color:var(--muted); font-weight:900; font-size:.88rem; text-transform:uppercase; letter-spacing:.06em; }
.stat-value { margin:.35rem 0 .15rem; font-size:2.35rem; font-weight:950; line-height:1; letter-spacing:-.04em; }
.stat-note { margin:0; color:var(--muted); font-weight:750; }
.stat-pill { display:inline-flex; align-items:center; min-height:32px; padding:.2rem .65rem; border-radius:999px; font-weight:900; background:var(--primary-soft); color:var(--primary); border:1px solid currentColor; }
.dashboard-grid { display:grid; grid-template-columns: 1.45fr .9fr; gap:1rem; }
.quick-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.75rem; }
.quick-action {
    display:block; text-decoration:none; padding:1rem; border-radius:18px; border:1px solid var(--border);
    background:linear-gradient(135deg,var(--surface),var(--surface-alt)); color:var(--text);
}
.quick-action strong { display:block; font-size:1.03rem; }
.quick-action span { color:var(--muted); font-weight:700; }
.bar-list { display:grid; gap:.75rem; }
.bar-row { display:grid; gap:.25rem; }
.bar-row-top { display:flex; justify-content:space-between; gap:1rem; font-weight:850; }
.bar-track { height:12px; border-radius:999px; background:var(--surface-strong); overflow:hidden; border:1px solid var(--border); }
.bar-fill { display:block; height:100%; border-radius:999px; background:linear-gradient(90deg,var(--primary),var(--accent)); }

/* Forms and controls */
.form-control, .form-select, .custom-select, input, select, textarea {
    background-color: var(--surface) !important;
    border: 1.8px solid var(--border-strong) !important;
    color: var(--text) !important;
    min-height: 48px;
    border-radius: 12px !important;
    font-size: 1rem !important;
    font-weight: 650;
}
.form-control::placeholder, textarea::placeholder { color: var(--muted) !important; opacity:.85; }
label, legend { color: var(--text); font-weight:900; margin-bottom:.35rem; }
.required::after { content:" *"; color:var(--danger); }
.help-text, .text-muted { color: var(--muted) !important; }
.btn { min-height:46px; font-weight:900; border-width:1.8px; border-radius:12px; display:inline-flex; align-items:center; justify-content:center; gap:.35rem; }
.btn-sm { min-height:36px; border-radius:10px; font-size:.88rem; }
.btn-primary, .btn-success, .btn-danger, .btn-dark { color:#fff !important; }
html.theme-dark .btn-success, html.theme-contrast .btn-success { color:#07111f !important; }
.alert { border-width:1.8px; border-radius:var(--radius-md); font-weight:800; }
.alert-info { color:var(--text); background:var(--primary-soft); border-color:var(--primary); }

/* Tables and pagination */
.table-card { overflow:hidden; }
.table-toolbar { display:flex; justify-content:space-between; align-items:center; gap:.8rem; flex-wrap:wrap; margin-bottom:1rem; }
.table { color:var(--text); margin-bottom:0; }
.table th { background:var(--surface-alt); color:var(--text); border-color:var(--border); font-size:.84rem; text-transform:uppercase; letter-spacing:.045em; }
.table td { border-color:var(--border); vertical-align:middle; }
.table-hover tbody tr:hover { background:var(--primary-soft); }
.table-responsive { border-radius:16px; border:1px solid var(--border); }
.member-cell { display:flex; align-items:center; gap:.75rem; min-width:220px; }
.avatar-sm { width:42px; height:42px; border-radius:12px; object-fit:cover; background:#fff; border:1px solid var(--border); }
.badge-status, .status-badge {
    display:inline-flex; align-items:center; justify-content:center; gap:.25rem;
    min-height:30px; padding:.28rem .62rem; border-radius:999px;
    font-weight:950; border:1px solid currentColor; white-space:nowrap;
}
.badge-success, .status-approved, .status-verified { color:var(--success); background:#ecfdf5; }
.badge-danger, .status-rejected, .status-expired { color:var(--danger); background:#fff1f2; }
.badge-warning, .status-pending { color:var(--warning); background:#fffbeb; }
.badge-info { color:var(--primary); background:var(--primary-soft); }
html.theme-dark .badge-success, html.theme-dark .badge-danger, html.theme-dark .badge-warning, html.theme-dark .badge-info,
html.theme-dark .status-badge, html.theme-contrast .badge-success, html.theme-contrast .badge-danger, html.theme-contrast .badge-warning,
html.theme-contrast .badge-info, html.theme-contrast .status-badge { background:transparent; }
.pagination-wrap { display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; padding-top:1rem; }
.pagination { display:flex; gap:.35rem; flex-wrap:wrap; margin:0; padding:0; list-style:none; }
.pagination a, .pagination span {
    min-width:42px; min-height:42px; display:inline-flex; align-items:center; justify-content:center;
    border:1px solid var(--border); border-radius:12px; text-decoration:none; color:var(--text); font-weight:900; background:var(--surface);
}
.pagination .active span, .pagination a:hover { background:var(--primary); color:#fff; border-color:var(--primary); }
html.theme-contrast .pagination .active span, html.theme-contrast .pagination a:hover { color:#000; }

/* Member view */
.profile-hero {
    display:grid; grid-template-columns: 180px minmax(0,1fr) auto; gap:1.25rem; align-items:center;
    padding:1.25rem; border-radius:26px;
    background:linear-gradient(135deg,var(--surface),var(--surface-alt)); border:1px solid var(--border); box-shadow:var(--shadow-sm);
}
.member-photo { width:160px; height:190px; object-fit:cover; border-radius:18px; border:3px solid var(--border-strong); background:#fff; }
.document-preview { max-width:100%; max-height:340px; border:1.8px solid var(--border-strong); border-radius:14px; object-fit:contain; background:#fff; }
.detail-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; }
.detail-list .detail-row, dl .row { border-color:var(--border) !important; }
.detail-label { color:var(--muted); font-weight:900; }
.quick-renew-card { border-left:6px solid var(--success); }
.print-header { display:none; }

/* Public membership form */
body.membership-form-page { min-height:100vh; }
.public-wrapper { width:min(1180px, calc(100% - 24px)); margin:0 auto; padding:1.2rem 0 2rem; }
.form-shell { display:grid; gap:1rem; }
.brand-header {
    background:linear-gradient(135deg, #1546a0, #0f172a 78%);
    color:#fff; border-radius:28px; padding:1.4rem; box-shadow:var(--shadow); border:1px solid rgba(255,255,255,.22);
}
html.theme-dark .brand-header, html.theme-contrast .brand-header { background:var(--surface); color:var(--text); border-color:var(--border); }
.brand-header img { background:#fff; border-radius:16px; padding:8px; border:2px solid rgba(255,255,255,.75); }
.brand-title { margin:0; font-weight:950; letter-spacing:-.03em; }
.brand-subtitle { margin:.25rem 0 0; color:inherit; opacity:.95; font-weight:750; }
.accessibility-panel { background:var(--surface); border:1px solid var(--border); border-radius:22px; padding:1rem; box-shadow:var(--shadow-sm); }
.access-control-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.9rem; }
.access-control-group { border:1px solid var(--border); border-radius:16px; padding:.85rem; background:var(--surface-alt); }
.access-control-title { display:block; font-weight:950; margin-bottom:.55rem; }
.access-btn-row { display:flex; flex-wrap:wrap; gap:.5rem; }
.access-btn { border:1.8px solid var(--border-strong); background:var(--surface); color:var(--text); border-radius:999px; min-height:44px; padding:.45rem .8rem; font-weight:950; cursor:pointer; }
.access-btn:hover, .access-btn[aria-pressed="true"] { background:var(--primary); color:#fff; }
html.theme-contrast .access-btn:hover, html.theme-contrast .access-btn[aria-pressed="true"] { color:#000; }
.settings-status { margin:.75rem 0 0; font-weight:850; color:var(--muted); }
.section-card { padding:1.45rem; margin-bottom:1.35rem; position:relative; overflow:hidden; }
.section-card::before { content:""; position:absolute; inset:0 auto 0 0; width:6px; background:linear-gradient(180deg,var(--primary),var(--accent)); }
.section-card h2, .section-card h3 { margin-top:0; }
.checkbox-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.75rem; }
.checkbox-list label, .radio-card label, fieldset .d-flex label { min-height:44px; display:inline-flex; align-items:center; gap:.2rem; padding:.4rem .55rem; border-radius:10px; }
.checkbox-list label:hover, fieldset .d-flex label:hover { background:var(--surface-alt); }
.form-actions { border:1px solid var(--border); border-radius:18px; padding:1rem; background:var(--surface); box-shadow:var(--shadow-sm); }
.form-actions-sticky { position: static !important; bottom:auto !important; backdrop-filter:none !important; }

.grid-2 { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; }
.grid-3 { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; }
.grid-4 { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1rem; }

@media (max-width: 1200px) { .stat-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .dashboard-grid { grid-template-columns:1fr; } }
@media (max-width: 960px) {
    .app-shell { grid-template-columns:1fr; }
    .sidebar { position:relative; height:auto; border-radius:0 0 24px 24px; }
    .sidebar-nav { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .main-content { padding:1rem; }
    .profile-hero { grid-template-columns:1fr; }
    .detail-grid, .grid-2, .grid-3, .grid-4, .access-control-grid { grid-template-columns:1fr; }
}
@media (max-width: 700px) {
    .sidebar-nav, .stat-grid, .quick-actions, .checkbox-list { grid-template-columns:1fr; }
    .public-wrapper { width:min(100% - 16px, 1180px); padding-top:.6rem; }
    .brand-header { border-radius:20px; }
    .brand-header img { width:76px; height:auto; }
    .btn-lg, .form-actions .btn { width:100%; }
    .admin-topbar { border-radius:16px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; transition-duration:.01ms !important; }
}

@media print {
    @page { margin: 12mm; }
    body { background:#fff !important; color:#000 !important; font-size:12px; }
    .sidebar, .admin-topbar, .no-print, .print-btn, .accessibility-panel, .form-actions, .btn, nav { display:none !important; }
    .app-shell { display:block; }
    .main-content { padding:0 !important; }
    .print-header { display:block; text-align:center; border-bottom:2px solid #000; padding-bottom:10px; margin-bottom:14px; }
    .content-card, .card, .panel, .section-card, .profile-hero { box-shadow:none !important; border:1px solid #000 !important; border-radius:8px !important; break-inside:avoid; }
    .detail-grid, .grid-2, .grid-3 { display:block; }
    .detail-grid > *, .grid-2 > *, .grid-3 > * { margin-bottom:10px; }
    a { color:#000 !important; text-decoration:none !important; }
    .table-responsive { overflow:visible; border:0; }
    .table th, .table td { border:1px solid #000 !important; padding:5px !important; }
    .member-photo { width:110px; height:135px; }
    .document-preview { max-height:180px; }
}