/* ===== Design System ===== */
:root {
    --sidebar-width: 220px;
    --sidebar-bg: #0f172a;
    --sidebar-text: rgba(255,255,255,.5);
    --sidebar-active: rgba(99,102,241,.18);
    --bg: #f6f8fc;
    --bg-alt: #f1f4f9;
    --card: #ffffff;
    --card-border: #eef1f5;
    --card-hover: #f8fafc;
    --card-shadow: 0 1px 3px rgba(0,0,0,.03), 0 1px 2px rgba(0,0,0,.02);
    --text: #1e293b;
    --text-2: #475569;
    --text-3: #94a3b8;
    --accent: #6366f1;
    --accent-2: #4f46e5;
    --accent-bg: rgba(99,102,241,.08);
    --green: #10b981;
    --green-bg: #d1fae5;
    --amber: #f59e0b;
    --amber-bg: #fef3c7;
    --rose: #ef4444;
    --rose-bg: #fee2e2;
    --radius: 12px;
    --radius-sm: 8px;
    --radius-card: 12px;
    --radius-side: 8px;
    --font: -apple-system,BlinkMacSystemFont,'Segoe UI','PingFang SC','Noto Sans',sans-serif;
    --shadow-sm: 0 1px 2px rgba(0,0,0,.04);
    --shadow-md: 0 4px 12px rgba(0,0,0,.06);
}

* { margin:0; padding:0; box-sizing:border-box; }
html, body { height:100%; }
body {
    font-family:var(--font);
    background:var(--bg);
    color:var(--text);
    -webkit-font-smoothing:antialiased;
}

/* ===== Sidebar (Admin & User) ===== */
.sidebar {
    width:var(--sidebar-width);
    background:var(--sidebar-bg);
    position:fixed; left:0; top:0;
    height:100vh;
    overflow-y:auto;
    z-index:100;
    display:flex;
    flex-direction:column;
}
.sidebar .brand {
    padding:22px 20px 16px;
    border-bottom:1px solid rgba(255,255,255,.06);
    flex-shrink:0;
}
.sidebar .brand h2 { color:#fff; font-size:16px; font-weight:700; }
.sidebar .brand span { color:rgba(255,255,255,.3); font-size:12px; margin-top:2px; display:block; }
.sidebar h3 {
    padding:20px 20px 14px;
    font-size:15px;
    color:#fff;
    font-weight:600;
    border-bottom:1px solid rgba(255,255,255,.06);
}
.sidebar a {
    display:flex;
    align-items:center;
    gap:10px;
    padding:9px 16px;
    margin:1px 10px;
    color:var(--sidebar-text);
    text-decoration:none;
    font-size:13px;
    border-radius:var(--radius-side);
    transition:.15s;
    font-weight:450;
    flex-shrink:0;
}
.sidebar a:hover { color:#fff; background:rgba(255,255,255,.06); }
.sidebar a.active { color:#fff; background:var(--sidebar-active); font-weight:500; }
.sidebar a .icon { font-size:15px; width:18px; text-align:center; }
.sidebar a.logout {
    color:rgba(239,68,68,.5);
    margin-top:auto;
    margin-bottom:12px;
    border-top:1px solid rgba(255,255,255,.06);
    padding-top:14px;
}
.sidebar a.logout:hover { color:#ef4444; background:rgba(239,68,68,.08); }

/* ===== Main Layout (Admin base) ===== */
.main { margin-left:var(--sidebar-width); min-height:100vh; padding:24px 28px; }
.main > .page-header {
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:20px;
}
.main > .page-header h2 { font-size:19px; font-weight:700; }
.main .main-inner { max-width:900px; }

/* ===== Main Layout (User Center) ===== */
.dash-wrap { display:flex; min-height:100vh; }
.dash-wrap .sidebar { position:fixed; }
.dash-wrap .main {
    margin-left:var(--sidebar-width);
    width:calc(100% - var(--sidebar-width));
    padding:28px 32px;
    min-height:100vh;
}
.dash-wrap .main-inner { max-width:860px; }
.dash-wrap .page-title { font-size:20px; font-weight:700; margin-bottom:22px; }

/* ===== Stat Cards (Admin) ===== */
.stat-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:14px; margin-bottom:22px; }
.stat-card {
    background:var(--card);
    border:1px solid var(--card-border);
    border-radius:var(--radius-card);
    padding:18px 20px;
    box-shadow:var(--card-shadow);
    transition:.2s;
}
.stat-card:hover { box-shadow:var(--shadow-md); }
.stat-card .num { font-size:26px; font-weight:700; color:var(--text); letter-spacing:-.5px; }
.stat-card .label { font-size:12.5px; color:var(--text-3); margin-top:3px; }
.stat-card .num.green { color:var(--green); }
.stat-card .num.amber { color:var(--amber); }
.stat-card .num.accent { color:var(--accent); }

/* ===== Cards ===== */
.card {
    background:var(--card);
    border:1px solid var(--card-border);
    border-radius:var(--radius);
    padding:20px 22px;
    box-shadow:var(--card-shadow);
}
.card + .card { margin-top:14px; }
.card h3 { margin-bottom:12px; font-size:15px; color:var(--text); font-weight:600; }
.card .card-header {
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:14px;
}
.card .card-header h3 { margin-bottom:0; }

/* ===== Tables ===== */
.table-wrap { overflow-x:auto; }
table { width:100%; border-collapse:collapse; }
th {
    padding:10px 12px;
    text-align:left;
    font-size:12px;
    font-weight:600;
    color:var(--text-3);
    text-transform:uppercase;
    letter-spacing:.4px;
    border-bottom:2px solid var(--card-border);
    white-space:nowrap;
}
td {
    padding:11px 12px;
    font-size:13.5px;
    border-bottom:1px solid #f1f5f9;
    color:var(--text);
}
tr:last-child td { border-bottom:none; }
tr:hover td { background:var(--card-hover); }
td .text-muted { color:var(--text-3); font-size:12px; }

/* ===== Forms ===== */
.form-group { margin-bottom:14px; }
.form-group label { display:block; margin-bottom:5px; font-size:13px; color:var(--text-2); font-weight:500; }
.form-group .hint { font-size:11px; color:var(--text-3); margin-top:2px; }
.form-control {
    width:100%;
    padding:9px 12px;
    border:1px solid #d1d5db;
    border-radius:var(--radius-sm);
    font-size:13.5px;
    color:var(--text);
    background:#fff;
    outline:none;
    transition:.15s;
}
.form-control:focus {
    border-color:var(--accent);
    box-shadow:0 0 0 3px rgba(99,102,241,.12);
}
textarea.form-control { min-height:90px; resize:vertical; }
select.form-control { cursor:pointer; }
.form-actions {
    display:flex;
    gap:8px;
    justify-content:flex-end;
    margin-top:18px;
}

/* ===== Buttons ===== */
.btn {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:4px;
    padding:8px 18px;
    border:none;
    border-radius:var(--radius-sm);
    font-size:13px;
    font-weight:500;
    cursor:pointer;
    text-decoration:none;
    transition:.15s;
    white-space:nowrap;
}
.btn-primary { background:var(--accent); color:#fff; }
.btn-primary:hover { background:var(--accent-2); }
.btn-success { background:var(--green); color:#fff; }
.btn-success:hover { opacity:.9; }
.btn-danger { background:var(--rose); color:#fff; }
.btn-danger:hover { opacity:.9; }
.btn-warning { background:var(--amber); color:#fff; }
.btn-warning:hover { opacity:.9; }
.btn-ghost { background:transparent; color:var(--text-2); border:1px solid var(--card-border); }
.btn-ghost:hover { background:var(--card-hover); border-color:var(--text-3); }
.btn-sm { padding:5px 12px; font-size:12px; }
.btn-lg { padding:10px 24px; font-size:14px; }
.btn-block { width:100%; }

/* ===== Badges ===== */
.badge {
    display:inline-block;
    padding:2px 8px;
    border-radius:4px;
    font-size:11px;
    font-weight:500;
    white-space:nowrap;
}
.badge-success { background:var(--green-bg); color:#059669; }
.badge-warning { background:var(--amber-bg); color:#d97706; }
.badge-danger { background:var(--rose-bg); color:var(--rose); }
.badge-info { background:var(--accent-bg); color:var(--accent); }

/* ===== Tags ===== */
.tag {
    display:inline-block;
    padding:1px 7px;
    border-radius:4px;
    font-size:11px;
    font-weight:500;
}
.tag-gray { background:#f1f5f9; color:var(--text-2); }
.tag-blue { background:var(--accent-bg); color:var(--accent); }
.tag-green { background:var(--green-bg); color:#059669; }
.tag-amber { background:var(--amber-bg); color:#d97706; }

/* ===== Alerts ===== */
.alert {
    padding:11px 16px;
    border-radius:var(--radius-sm);
    margin-bottom:16px;
    font-size:13.5px;
}
.alert-danger { background:var(--rose-bg); color:#dc2626; border:1px solid #fecaca; }
.alert-success { background:var(--green-bg); color:#059669; border:1px solid #bbf7d0; }
.alert-warning { background:var(--amber-bg); color:#d97706; border:1px solid #fde68a; }
.alert-info { background:var(--accent-bg); color:var(--accent); border:1px solid #c7d2fe; }

/* ===== Modal ===== */
.modal {
    display:none;
    position:fixed;
    inset:0;
    background:rgba(15,23,42,.45);
    align-items:center;
    justify-content:center;
    z-index:2000;
}
.modal.show { display:flex; }
.modal-content {
    background:var(--card);
    border-radius:14px;
    padding:26px 28px;
    width:500px;
    max-width:90vw;
    max-height:82vh;
    overflow-y:auto;
    box-shadow:0 16px 48px rgba(0,0,0,.12);
}
.modal-content h3 { font-size:17px; margin-bottom:16px; }

/* ===== Empty State ===== */
.empty-state { text-align:center; padding:50px 20px; color:var(--text-3); }
.empty-state .icon { font-size:44px; margin-bottom:10px; }

/* ===== Popup (login/register overlay) ===== */
.popup-overlay { display:none; position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,.55); z-index:2000; justify-content:center; align-items:center; }
.popup-overlay.show { display:flex; }
.popup-box { background:#fff; border-radius:14px; width:460px; max-width:90vw; max-height:80vh; overflow-y:auto; padding:28px; box-shadow:0 8px 32px rgba(0,0,0,.2); }
.popup-box h3 { margin-top:0; font-size:17px; }
.popup-body { font-size:14px; line-height:1.7; color:#374151; margin:16px 0; }
.popup-body h1, .popup-body h2, .popup-body h3 { margin-top:0; font-size:16px; }
.popup-body p { margin:8px 0; }
.popup-body ul, .popup-body ol { margin:8px 0; padding-left:20px; }
.popup-btn { display:block; width:100%; padding:12px; background:#4a6cf7; color:#fff; border:none; border-radius:8px; font-size:16px; cursor:pointer; text-align:center; }
.popup-btn:hover { background:#3b5de7; }

/* ===== Announcement Modal ===== */
.ann-overlay { display:none; position:fixed; inset:0; background:rgba(15,23,42,.5); z-index:2000; justify-content:center; align-items:center; }
.ann-overlay.show { display:flex; }
.ann-box { background:#fff; border-radius:14px; width:500px; max-width:90vw; max-height:82vh; padding:26px 28px; box-shadow:0 16px 48px rgba(0,0,0,.12); position:relative; overflow-y:auto; }
.ann-box h3 { font-size:17px; margin-top:0; padding-right:28px; }
.ann-date { font-size:12px; color:var(--text-3); margin:4px 0 10px; }
.ann-body { font-size:14px; line-height:1.65; color:var(--text); word-break:break-word; overflow-wrap:break-word; }
.ann-btn { display:block; width:100%; padding:11px; background:var(--accent); color:#fff; border:none; border-radius:8px; font-size:14.5px; font-weight:500; cursor:pointer; text-align:center; margin-top:16px; transition:.15s; }
.ann-btn:hover { background:#4f46e5; }
.ann-close { position:absolute; top:12px; right:16px; background:none; border:none; font-size:18px; cursor:pointer; color:var(--text-3); transition:.15s; }
.ann-close:hover { color:var(--text); }

/* ===== Copy Button ===== */
.copy-btn {
    background:none;
    border:1px solid var(--card-border);
    border-radius:5px;
    padding:3px 8px;
    cursor:pointer;
    font-size:12px;
    color:var(--text-3);
    transition:.15s;
    flex-shrink:0;
}
.copy-btn:hover { border-color:var(--accent); color:var(--accent); background:var(--accent-bg); }
.copy-btn.copied { border-color:var(--green); color:var(--green); background:var(--green-bg); }

/* ===== Misc ===== */
.text-green { color:var(--green); }
.text-amber { color:var(--amber); }
.text-rose { color:var(--rose); }
.text-accent { color:var(--accent); }
.text-muted { color:var(--text-3); }
.flex { display:flex; }
.flex-center { display:flex; align-items:center; }
.gap-8 { gap:8px; }
.gap-12 { gap:12px; }
.mt-4 { margin-top:4px; }
.mt-8 { margin-top:8px; }
.mt-12 { margin-top:12px; }
.mb-12 { margin-bottom:12px; }
.mb-16 { margin-bottom:16px; }
.truncate { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ===== Responsive ===== */
@media (max-width:768px) {
    .admin-wrap { margin-left:0; }
    .admin-wrap .main { padding:14px; }
    .dash-wrap .sidebar { display:none; }
    .dash-wrap .main { margin-left:0; width:100%; padding:14px; }
    .stat-grid { grid-template-columns:1fr; }
}