/* ═══════════════════════════════════════════════════════
   X-1 PRO AiO — Professional Design System
   Dark default · body.light for light mode
   Inspired by: Linear, Stripe, Vercel, Notion
   ═══════════════════════════════════════════════════════ */

/* ── DARK (default) ── */
:root {
    --bg-base:        #0f0f11;
    --bg-surface:     #18181b;
    --bg-elevated:    #1c1c1f;
    --bg-hover:       #232326;
    --bg-active:      #27272a;

    --accent:         #e11d48;
    --accent-hover:   #be123c;
    --accent-subtle:  rgba(225, 29, 72, 0.12);
    --accent-border:  rgba(225, 29, 72, 0.25);

    --text-1:  #fafafa;
    --text-2:  #a1a1aa;
    --text-3:  #52525b;
    --text-4:  #3f3f46;

    --border:       #27272a;
    --border-light: #1e1e22;
    --border-focus: #e11d48;

    --success:  #22c55e;
    --warning:  #f59e0b;
    --danger:   #ef4444;
    --info:     #3b82f6;

    --success-subtle: rgba(34, 197, 94, 0.1);
    --warning-subtle: rgba(245, 158, 11, 0.1);
    --danger-subtle:  rgba(239, 68, 68, 0.1);
    --info-subtle:    rgba(59, 130, 246, 0.1);

    --shadow-xs: 0 1px 2px rgba(0,0,0,.4);
    --shadow-sm: 0 2px 8px rgba(0,0,0,.5);
    --shadow-md: 0 4px 16px rgba(0,0,0,.6);
    --shadow-lg: 0 8px 32px rgba(0,0,0,.7);
    --shadow-accent: 0 4px 16px rgba(225,29,72,.3);

    --r-sm:  6px;
    --r-md:  8px;
    --r-lg:  12px;
    --r-xl:  16px;

    --ease:      all .2s cubic-bezier(.4,0,.2,1);
    --ease-fast: all .12s ease;
}

/* ── LIGHT override ── */
body.light {
    --bg-base:        #fafafa;
    --bg-surface:     #ffffff;
    --bg-elevated:    #ffffff;
    --bg-hover:       #f4f4f5;
    --bg-active:      #f0f0f0;

    --accent:         #e11d48;
    --accent-hover:   #be123c;
    --accent-subtle:  rgba(225, 29, 72, 0.06);
    --accent-border:  rgba(225, 29, 72, 0.2);

    --text-1:  #09090b;
    --text-2:  #71717a;
    --text-3:  #a1a1aa;
    --text-4:  #d4d4d8;

    --border:       #e4e4e7;
    --border-light: #f4f4f5;
    --border-focus: #e11d48;

    --shadow-xs: 0 1px 2px rgba(0,0,0,.04);
    --shadow-sm: 0 2px 8px rgba(0,0,0,.06);
    --shadow-md: 0 4px 16px rgba(0,0,0,.08);
    --shadow-lg: 0 8px 32px rgba(0,0,0,.1);
    --shadow-accent: 0 4px 16px rgba(225,29,72,.2);
}

/* ── LIGHT specific ── */
body.light .topbar,
body.light .admin-topbar { background:#fff !important; border-bottom-color:#e4e4e7 !important; }
body.light .topbar-brand { color:#09090b !important; }
body.light .tnav-item,
body.light .atnav-item { color:#71717a; }
body.light .tnav-item:hover,
body.light .atnav-item:hover { color:#09090b; background:#f4f4f5; }
body.light .tnav-item.active,
body.light .atnav-item.active { color:#e11d48; background:rgba(225,29,72,.06); }
body.light .topbar-credits { background:#e11d48; color:#fff; border-color:transparent; }
body.light .topbar-avatar { background:#f4f4f5; border-color:#e4e4e7; color:#09090b; }
body.light .topbar-username { color:#71717a; }
body.light .topbar-notif-bell { color:#71717a; }
body.light .topbar-notif-bell:hover { background:#f4f4f5; color:#09090b; }
body.light .topbar-theme-btn { color:#71717a; }
body.light .topbar-theme-btn:hover { background:#f4f4f5; color:#09090b; }
body.light .hamburger { background:#e11d48; }
body.light .auth-container { background:#fafafa; }
body.light .table code { background:#f4f4f5; color:#e11d48; border-color:#e4e4e7; }
body.light .pg-btn { background:#fff; }
body.light .adm-stat-icon { background:rgba(225,29,72,.08); color:#e11d48; }
body.light .form-input { background:#fff; }
body.light .form-select { background-color:#fff; }

/* ─────────────────────────────────────────
   BASE
───────────────────────────────────────── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { font-size:16px; }
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', sans-serif;
    background: var(--bg-base);
    color: var(--text-1);
    min-height: 100vh;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
a { color: var(--accent); text-decoration: none; transition: var(--ease-fast); }
a:hover { color: var(--accent-hover); }
.app-container { display:flex; flex-direction:column; min-height:100vh; }
.sidebar { display:none !important; }
.main-content {
    flex:1; padding:32px;
    max-width:1200px; width:100%; margin:0 auto;
}
.main-content.full-width { max-width:100%; }
.page-header { margin-bottom:28px; }
.page-header h1 {
    font-size:1.5rem; font-weight:700;
    color:var(--text-1); letter-spacing:-.025em;
}
.page-header h1 span { color:var(--accent); }
.page-header p { color:var(--text-2); font-size:.9rem; margin-top:4px; }

/* ─────────────────────────────────────────
   TOPBAR
───────────────────────────────────────── */
.topbar {
    position:sticky; top:0; z-index:100;
    display:flex; align-items:center; justify-content:space-between;
    padding:0 20px; height:52px;
    background:var(--bg-base);
    border-bottom:1px solid var(--border-light);
    backdrop-filter:blur(12px);
}
.topbar-left { display:flex; align-items:center; gap:4px; min-width:0; overflow:hidden; }
.topbar-brand {
    font-size:14px; font-weight:800; color:var(--text-1);
    text-decoration:none; margin-right:8px; white-space:nowrap;
    flex-shrink:0; letter-spacing:-.01em;
}
.topbar-brand-accent { color:var(--accent); font-weight:700; margin-left:3px; }
.topbar-nav { display:flex; align-items:center; gap:1px; }
.tnav-item {
    display:flex; align-items:center; gap:5px;
    padding:5px 10px; border-radius:var(--r-md);
    font-size:13px; font-weight:500;
    color:var(--text-2);
    text-decoration:none; transition:var(--ease-fast); white-space:nowrap;
}
.tnav-item:hover { color:var(--text-1); background:var(--bg-hover); }
.tnav-item.active {
    color:var(--accent);
    background:var(--accent-subtle);
}
.tnav-item i { font-size:11px; opacity:.7; }
.topbar-right { display:flex; align-items:center; gap:8px; flex-shrink:0; }
.topbar-credits {
    display:flex; align-items:center; gap:6px;
    padding:4px 12px; border-radius:20px;
    background:var(--accent); color:#fff;
    font-weight:700; font-size:12px; letter-spacing:.01em;
    box-shadow:var(--shadow-accent);
    transition:var(--ease-fast);
}
.topbar-credits:hover { background:var(--accent-hover); }
.topbar-credits i { font-size:10px; }
.topbar-username { font-size:12px; color:var(--text-2); font-weight:500; }
.topbar-avatar {
    width:30px; height:30px; border-radius:50%;
    background:var(--bg-active); border:1px solid var(--border);
    display:flex; align-items:center; justify-content:center;
    font-weight:700; font-size:10px; color:var(--text-2);
    transition:var(--ease-fast);
}
.topbar-avatar:hover { border-color:var(--accent); color:var(--accent); }
.topbar-user-dropdown {
    position:relative; display:flex; align-items:center;
    gap:7px; cursor:pointer; padding:3px 0;
}
.topbar-user-menu {
    display:none; position:absolute; top:calc(100% + 8px); right:0;
    background:var(--bg-elevated);
    border:1px solid var(--border);
    border-radius:var(--r-lg);
    min-width:168px; padding:5px;
    box-shadow:var(--shadow-lg); z-index:200;
}
.topbar-user-dropdown::after { content:''; position:absolute; bottom:-8px; left:0; right:0; height:12px; }
.topbar-user-dropdown:hover .topbar-user-menu { display:block; }
.topbar-user-menu a {
    display:flex; align-items:center; gap:8px;
    padding:8px 12px; border-radius:var(--r-md);
    font-size:12px; color:var(--text-2);
    text-decoration:none; transition:var(--ease-fast);
}
.topbar-user-menu a:hover { background:var(--bg-hover); color:var(--text-1); }
.topbar-user-menu a i { width:14px; text-align:center; font-size:11px; }
.topbar-notif-bell {
    display:flex; align-items:center; justify-content:center;
    width:32px; height:32px; border-radius:var(--r-md);
    color:var(--text-2); text-decoration:none;
    transition:var(--ease-fast); position:relative; font-size:13px;
}
.topbar-notif-bell:hover { background:var(--bg-hover); color:var(--text-1); }
.notif-badge {
    position:absolute; top:3px; right:3px;
    background:var(--accent); color:#fff;
    font-size:8px; font-weight:700;
    min-width:14px; height:14px; border-radius:7px;
    display:flex; align-items:center; justify-content:center;
    border:2px solid var(--bg-base);
}
.notif-panel {
    display:none; position:absolute; top:calc(100% + 8px); right:0;
    background:var(--bg-elevated); border:1px solid var(--border);
    border-radius:var(--r-lg); width:310px; max-height:380px;
    box-shadow:var(--shadow-lg); z-index:300; overflow:hidden;
}
.notif-panel.open { display:block; }
.notif-header { display:flex; justify-content:space-between; align-items:center; padding:11px 14px; border-bottom:1px solid var(--border); font-size:12px; font-weight:600; color:var(--text-1); }
.notif-list { max-height:320px; overflow-y:auto; }
.notif-item { display:flex; gap:9px; padding:11px 14px; text-decoration:none; color:inherit; transition:background .12s; border-bottom:1px solid var(--border-light); }
.notif-item:hover { background:var(--bg-hover); }
.notif-item.unread { background:var(--accent-subtle); }
.notif-item i { margin-top:2px; font-size:13px; flex-shrink:0; color:var(--accent); }
.notif-title { font-size:12px; font-weight:600; margin-bottom:1px; color:var(--text-1); }
.notif-msg { font-size:11px; color:var(--text-2); line-height:1.4; }
.notif-time { font-size:10px; color:var(--text-3); margin-top:3px; }
.notif-empty { padding:28px; text-align:center; color:var(--text-3); font-size:12px; }
.topbar-notif-wrap { position:relative; }
.topbar-theme-btn {
    display:flex; align-items:center; justify-content:center;
    width:32px; height:32px; border-radius:var(--r-md);
    color:var(--text-2); text-decoration:none;
    transition:var(--ease-fast); font-size:13px;
}
.topbar-theme-btn:hover { background:var(--bg-hover); color:var(--text-1); }

/* ── ADMIN TOPBAR ── */
.admin-topbar {
    background:var(--bg-base) !important;
    border-bottom-color:var(--border-light) !important;
}
.atnav-item {
    display:flex; align-items:center; gap:5px;
    padding:5px 10px; border-radius:var(--r-md);
    font-size:13px; font-weight:500; color:var(--text-2);
    text-decoration:none; transition:var(--ease-fast); white-space:nowrap;
}
.atnav-item:hover { color:var(--text-1); background:var(--bg-hover); }
.atnav-item.active { color:var(--accent); background:var(--accent-subtle); }
.atnav-item i { font-size:11px; opacity:.7; }
.admin-topbar-brand { color:var(--text-1) !important; font-weight:800 !important; }

/* ─────────────────────────────────────────
   AUTH
───────────────────────────────────────── */
.auth-container {
    min-height:100vh; display:flex; align-items:center; justify-content:center;
    background:var(--bg-base); padding:20px;
}
.auth-card {
    background:var(--bg-surface);
    border-radius:var(--r-xl); padding:36px;
    width:100%; max-width:400px;
    border:1px solid var(--border);
    box-shadow:var(--shadow-lg);
}
.auth-header { text-align:center; margin-bottom:28px; }
.auth-logo {
    width:52px; height:52px;
    background:var(--accent); border-radius:var(--r-lg);
    display:flex; align-items:center; justify-content:center;
    margin:0 auto 14px; font-size:1.4rem; color:white;
    box-shadow:var(--shadow-accent);
}
.auth-header h1 { font-size:1.25rem; font-weight:700; color:var(--text-1); letter-spacing:-.02em; }
.auth-header p { font-size:.85rem; color:var(--text-2); margin-top:5px; }
.auth-form { display:flex; flex-direction:column; gap:16px; }
.auth-links { display:flex; justify-content:space-between; margin-top:4px; }
.auth-links a { color:var(--text-2); font-size:.82rem; }
.auth-links a:hover { color:var(--text-1); }

/* ─────────────────────────────────────────
   FORMS
───────────────────────────────────────── */
.form-group { display:flex; flex-direction:column; gap:6px; }
.form-group label { font-size:.82rem; color:var(--text-2); font-weight:500; }
.form-group small { font-size:.75rem; color:var(--text-3); }
.form-input {
    padding:9px 12px;
    background:var(--bg-surface);
    border:1px solid var(--border);
    border-radius:var(--r-md);
    color:var(--text-1);
    font-size:.9rem; transition:var(--ease);
    width:100%; outline:none; font-family:inherit;
}
.form-input:hover { border-color:var(--text-4); }
.form-input:focus {
    border-color:var(--border-focus);
    box-shadow:0 0 0 3px var(--accent-subtle);
}
.form-input::placeholder { color:var(--text-3); }
.form-input.small { padding:6px 10px; font-size:.82rem; width:auto; }
.form-input:disabled { opacity:.4; cursor:not-allowed; }
.form-select {
    appearance:none;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23a1a1aa' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat:no-repeat; background-position:right 11px center;
    padding-right:30px; cursor:pointer;
}
.form-row { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:16px; }
.form-inline { display:flex; gap:8px; flex-wrap:wrap; align-items:flex-end; }
.inline-form { display:inline-flex; gap:6px; align-items:center; }

/* ─────────────────────────────────────────
   BUTTONS
───────────────────────────────────────── */
.btn {
    padding:8px 18px;
    border:1px solid transparent;
    border-radius:var(--r-md);
    font-size:.85rem; font-weight:600;
    cursor:pointer; transition:var(--ease);
    display:inline-flex; align-items:center;
    justify-content:center; gap:7px;
    font-family:inherit; white-space:nowrap;
    letter-spacing:.01em;
}
.btn-primary {
    background:var(--accent); color:#fff;
    box-shadow:var(--shadow-accent);
}
.btn-primary:hover { background:var(--accent-hover); transform:translateY(-1px); box-shadow:0 6px 20px rgba(225,29,72,.4); }
.btn-primary:active { transform:translateY(0); }
.btn-ghost { background:transparent; color:var(--accent); border-color:var(--accent-border); }
.btn-ghost:hover { background:var(--accent-subtle); }
.btn-outline { background:transparent; color:var(--text-2); border-color:var(--border); }
.btn-outline:hover { background:var(--bg-hover); color:var(--text-1); border-color:var(--text-4); }
.btn-block { width:100%; }
.btn-sm { padding:5px 12px; font-size:.78rem; }
.btn-lg { padding:11px 24px; font-size:.95rem; }
.btn-danger  { background:var(--danger);  color:#fff; border-color:transparent; box-shadow:0 4px 12px rgba(239,68,68,.3); }
.btn-success { background:var(--success); color:#fff; border-color:transparent; box-shadow:0 4px 12px rgba(34,197,94,.25); }
.btn-warning { background:var(--warning); color:#fff; border-color:transparent; }
.btn:disabled { opacity:.35; cursor:not-allowed; transform:none !important; box-shadow:none !important; }

/* ─────────────────────────────────────────
   CARDS
───────────────────────────────────────── */
.card {
    background:var(--bg-surface);
    border-radius:var(--r-lg);
    border:1px solid var(--border);
    overflow:hidden; margin-bottom:20px;
    box-shadow:var(--shadow-xs);
    transition:var(--ease);
}
.card:hover { border-color:var(--text-4); box-shadow:var(--shadow-sm); }
.card-header {
    padding:14px 18px;
    border-bottom:1px solid var(--border);
    display:flex; align-items:center; justify-content:space-between;
}
.card-header h3 { font-size:.9rem; font-weight:600; color:var(--text-1); }
.card-body { padding:18px; overflow-x:auto; }
.card-footer { padding:12px 18px; border-top:1px solid var(--border); display:flex; align-items:center; gap:8px; }

/* ─────────────────────────────────────────
   STAT CARDS
───────────────────────────────────────── */
.stats-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:12px; margin-bottom:20px; }
.stat-card {
    background:var(--bg-surface);
    border-radius:var(--r-lg); padding:16px;
    display:flex; align-items:flex-start; gap:12px;
    border:1px solid var(--border);
    box-shadow:var(--shadow-xs); transition:var(--ease);
}
.stat-card:hover { border-color:var(--text-4); transform:translateY(-1px); box-shadow:var(--shadow-sm); }
.stat-icon {
    width:40px; height:40px;
    background:var(--accent-subtle);
    border-radius:var(--r-md);
    display:flex; align-items:center; justify-content:center;
    font-size:1rem; color:var(--accent); flex-shrink:0;
}
.stat-icon.muted { background:var(--bg-hover); color:var(--text-3); }
.stat-info { display:flex; flex-direction:column; gap:1px; }
.stat-value { font-size:1.5rem; font-weight:700; letter-spacing:-.03em; line-height:1.1; color:var(--text-1); }
.stat-value.accent { color:var(--accent); }
.stat-label { font-size:.78rem; color:var(--text-2); margin-top:3px; }
.stat-trend { font-size:.75rem; font-weight:600; margin-top:5px; display:flex; align-items:center; gap:3px; }
.stat-trend.up { color:var(--success); }
.stat-trend.down { color:var(--danger); }

/* ─────────────────────────────────────────
   SERVICES
───────────────────────────────────────── */
.services-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:16px; }
.service-card {
    background:var(--bg-surface); border-radius:var(--r-lg);
    padding:18px; border:1px solid var(--border);
    box-shadow:var(--shadow-xs); transition:var(--ease);
}
.service-card:hover { border-color:var(--accent-border); transform:translateY(-1px); box-shadow:var(--shadow-sm); }
.service-header { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:8px; }
.service-header h3 { font-size:.92rem; font-weight:600; color:var(--text-1); }
.service-price { font-size:1.1rem; font-weight:700; color:var(--accent); letter-spacing:-.01em; }
.service-desc { color:var(--text-2); font-size:.83rem; margin-bottom:16px; line-height:1.5; }

/* ─────────────────────────────────────────
   TABLES
───────────────────────────────────────── */
.table-wrapper { overflow-x:auto; border-radius:var(--r-lg); border:1px solid var(--border); }
.table { width:100%; border-collapse:collapse; min-width:520px; }
.table th {
    padding:10px 14px; text-align:left;
    background:var(--bg-elevated);
    font-size:.7rem; font-weight:600;
    text-transform:uppercase; letter-spacing:.08em;
    color:var(--text-3); border-bottom:1px solid var(--border);
    white-space:nowrap;
}
.table td { padding:11px 14px; font-size:.87rem; color:var(--text-1); border-bottom:1px solid var(--border-light); vertical-align:middle; }
.table tr:last-child td { border-bottom:none; }
.table tbody tr { transition:background .1s; }
.table tbody tr:hover { background:var(--bg-hover); }
.table code { background:var(--bg-hover); padding:2px 7px; border-radius:4px; font-size:.78rem; color:var(--accent); font-family:'JetBrains Mono','Fira Code',ui-monospace,monospace; border:1px solid var(--border); }

/* ─────────────────────────────────────────
   BADGES
───────────────────────────────────────── */
.badge { display:inline-flex; align-items:center; gap:4px; padding:2px 8px; border-radius:4px; font-size:.7rem; font-weight:600; text-transform:uppercase; letter-spacing:.04em; border:1px solid transparent; }
.badge::before { content:''; width:4px; height:4px; border-radius:50%; flex-shrink:0; }
.badge-completed { background:var(--success-subtle); color:var(--success); border-color:rgba(34,197,94,.2); }
.badge-completed::before { background:var(--success); }
.badge-pending { background:var(--warning-subtle); color:var(--warning); border-color:rgba(245,158,11,.2); }
.badge-pending::before { background:var(--warning); }
.badge-failed { background:var(--danger-subtle); color:var(--danger); border-color:rgba(239,68,68,.2); }
.badge-failed::before { background:var(--danger); }
.badge-refunded { background:var(--info-subtle); color:var(--info); border-color:rgba(59,130,246,.2); }
.badge-refunded::before { background:var(--info); }

/* ─────────────────────────────────────────
   ALERTS
───────────────────────────────────────── */
.alert { padding:11px 14px; border-radius:var(--r-md); margin-bottom:16px; display:flex; align-items:flex-start; gap:9px; font-size:.87rem; border:1px solid; }
.alert i { margin-top:1px; flex-shrink:0; }
.alert-error   { background:var(--danger-subtle);  border-color:rgba(239,68,68,.25);  color:var(--danger); }
.alert-success { background:var(--success-subtle); border-color:rgba(34,197,94,.25);  color:var(--success); }
.alert-warning { background:var(--warning-subtle); border-color:rgba(245,158,11,.25); color:var(--warning); }
.alert-info    { background:var(--info-subtle);    border-color:rgba(59,130,246,.25); color:var(--info); }

/* ─────────────────────────────────────────
   MODAL
───────────────────────────────────────── */
.modal { display:none; position:fixed; inset:0; background:rgba(0,0,0,.7); align-items:center; justify-content:center; z-index:1000; padding:20px; backdrop-filter:blur(6px); }
.modal.open { display:flex; }
.modal-content { background:var(--bg-elevated); border-radius:var(--r-xl); padding:26px; width:100%; max-width:460px; border:1px solid var(--border); box-shadow:var(--shadow-lg); animation:modalIn .18s ease-out; }
@keyframes modalIn { from{opacity:0;transform:scale(.97) translateY(8px)}to{opacity:1;transform:scale(1) translateY(0)} }
.modal-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:18px; }
.modal-header h3 { font-size:1rem; font-weight:700; color:var(--text-1); }
.modal-close { width:28px; height:28px; border-radius:var(--r-sm); background:var(--bg-hover); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--text-3); transition:var(--ease-fast); font-size:.9rem; }
.modal-close:hover { background:var(--bg-active); color:var(--text-1); }

/* ─────────────────────────────────────────
   DASHBOARD
───────────────────────────────────────── */
.dash-welcome { margin-bottom:22px; }
.dash-welcome h1 { font-size:1.5rem; font-weight:700; color:var(--text-1); letter-spacing:-.025em; }
.dash-welcome h1 span { color:var(--accent); }
.dash-welcome p { color:var(--text-2); font-size:.875rem; margin-top:4px; }
.dash-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:16px; }
.dash-stat-card { background:var(--bg-surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:16px; display:flex; align-items:center; gap:12px; box-shadow:var(--shadow-xs); transition:var(--ease); }
.dash-stat-card:hover { border-color:var(--text-4); transform:translateY(-1px); box-shadow:var(--shadow-sm); }
.dash-stat-icon { width:38px; height:38px; border-radius:var(--r-md); display:flex; align-items:center; justify-content:center; font-size:15px; flex-shrink:0; }
.dash-stat-value { font-size:18px; font-weight:700; display:block; color:var(--text-1); letter-spacing:-.02em; }
.dash-stat-label { font-size:11px; color:var(--text-2); margin-top:2px; display:block; }
.dash-actions { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:16px; }
.dash-action-card { background:var(--bg-surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:16px; text-decoration:none; color:inherit; transition:var(--ease); display:flex; align-items:center; gap:12px; box-shadow:var(--shadow-xs); }
.dash-action-card:hover { border-color:var(--accent-border); background:var(--accent-subtle); transform:translateY(-1px); box-shadow:var(--shadow-sm); }
.dash-action-icon { width:40px; height:40px; border-radius:var(--r-md); display:flex; align-items:center; justify-content:center; font-size:17px; flex-shrink:0; }
.dash-action-title { font-size:13px; font-weight:600; color:var(--text-1); }
.dash-action-desc { font-size:11px; color:var(--text-2); margin-top:2px; }

/* ─────────────────────────────────────────
   ADMIN
───────────────────────────────────────── */
.adm-welcome { margin-bottom:20px; }
.adm-welcome h1 { font-size:1.3rem; font-weight:700; color:var(--text-1); letter-spacing:-.02em; }
.adm-welcome p { font-size:.85rem; color:var(--text-2); margin-top:3px; }
.adm-stats { display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:10px; margin-bottom:18px; }
.adm-stat { background:var(--bg-surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:14px; display:flex; align-items:center; gap:10px; box-shadow:var(--shadow-xs); transition:var(--ease); }
.adm-stat:hover { border-color:var(--text-4); transform:translateY(-1px); box-shadow:var(--shadow-sm); }
.adm-stat-icon { width:36px; height:36px; border-radius:var(--r-md); display:flex; align-items:center; justify-content:center; font-size:14px; flex-shrink:0; background:var(--accent-subtle); color:var(--accent); }
.adm-stat-value { font-size:16px; font-weight:700; display:block; color:var(--text-1); }
.adm-stat-label { font-size:10px; color:var(--text-2); margin-top:1px; display:block; }
.adm-quick { display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:8px; margin-bottom:18px; }
.adm-quick-card { background:var(--bg-surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:12px 14px; text-decoration:none; color:inherit; transition:var(--ease); display:flex; align-items:center; gap:10px; box-shadow:var(--shadow-xs); }
.adm-quick-card:hover { border-color:var(--accent-border); background:var(--accent-subtle); transform:translateY(-1px); }
.adm-quick-icon { width:34px; height:34px; border-radius:var(--r-md); display:flex; align-items:center; justify-content:center; font-size:14px; flex-shrink:0; }
.adm-quick-title { font-size:12px; font-weight:600; color:var(--text-1); }
.adm-quick-desc { font-size:10px; color:var(--text-2); margin-top:2px; }

/* ─────────────────────────────────────────
   UTILITY
───────────────────────────────────────── */
.text-accent{color:var(--accent)} .text-success{color:var(--success)} .text-danger{color:var(--danger)} .text-warning{color:var(--warning)} .text-info{color:var(--info)} .text-muted{color:var(--text-3)} .text-secondary{color:var(--text-2)}
.flex{display:flex} .flex-center{display:flex;align-items:center;justify-content:center} .flex-between{display:flex;align-items:center;justify-content:space-between}
.gap-sm{gap:8px} .gap-md{gap:12px} .gap-lg{gap:18px}
.divider{height:1px;background:var(--border);margin:16px 0}

/* ─────────────────────────────────────────
   SCROLLBAR
───────────────────────────────────────── */
::-webkit-scrollbar { width:4px; height:4px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--border); border-radius:2px; }
::-webkit-scrollbar-thumb:hover { background:var(--text-4); }

/* ─────────────────────────────────────────
   ANIMATIONS
───────────────────────────────────────── */
@keyframes fadeUp { from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)} }
@keyframes dashFadeUp { from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)} }
.fade-up { animation:fadeUp .3s ease-out both; }
.fade-up-1{animation-delay:.04s} .fade-up-2{animation-delay:.08s} .fade-up-3{animation-delay:.12s} .fade-up-4{animation-delay:.16s}
.fadeUp { animation:dashFadeUp .4s ease both; }
.card,.stat-card,.service-card,.auth-card,.dash-stat-card,.dash-action-card { animation:fadeUp .28s ease-out both; }

/* ─────────────────────────────────────────
   PAGINATION
───────────────────────────────────────── */
.pagination { display:flex; align-items:center; justify-content:center; gap:8px; padding:14px 0; margin-top:14px; }
.pg-btn { padding:6px 14px; border-radius:var(--r-md); font-size:12px; font-weight:500; background:var(--bg-surface); border:1px solid var(--border); color:var(--text-2); text-decoration:none; transition:var(--ease-fast); }
.pg-btn:hover { border-color:var(--text-4); color:var(--text-1); }
.pg-btn.active { background:var(--accent); color:#fff; border-color:transparent; box-shadow:var(--shadow-accent); }
.pg-info { font-size:11px; color:var(--text-3); }

/* ─────────────────────────────────────────
   COUPON
───────────────────────────────────────── */
.coupon-bar { display:flex; gap:8px; align-items:center; padding:10px 14px; background:var(--bg-surface); border:1px solid var(--border); border-radius:var(--r-lg); margin-bottom:16px; }
.coupon-bar input { flex:1; }
.coupon-bar button { white-space:nowrap; }

/* ─────────────────────────────────────────
   HAMBURGER
───────────────────────────────────────── */
.hamburger { display:none; position:fixed; top:12px; left:12px; z-index:300; width:38px; height:38px; border-radius:var(--r-md); background:var(--accent); border:none; align-items:center; justify-content:center; cursor:pointer; flex-direction:column; gap:4px; box-shadow:var(--shadow-accent); transition:var(--ease); }
.hamburger:hover { background:var(--accent-hover); }
.hamburger span { display:block; width:18px; height:1.5px; background:#fff; border-radius:2px; transition:var(--ease); }
.hamburger.open span:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
.hamburger.open span:nth-child(2){opacity:0;transform:scaleX(0)}
.hamburger.open span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}
.sidebar-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:150; backdrop-filter:blur(2px); }
.sidebar-overlay.active { display:block; }

/* ─────────────────────────────────────────
   RESPONSIVE
───────────────────────────────────────── */
@media(max-width:1200px){.main-content{padding:24px}.stats-grid{grid-template-columns:repeat(2,1fr)}.dash-stats{grid-template-columns:repeat(2,1fr)}}
@media(max-width:1024px){
  .hamburger{display:flex}
  .topbar{position:fixed;top:0;left:-280px;width:280px;height:100vh;flex-direction:column;align-items:stretch;justify-content:flex-start;padding:20px 0;background:var(--bg-surface);border-bottom:none;border-right:1px solid var(--border);transition:left .28s cubic-bezier(.4,0,.2,1);z-index:1000;overflow-y:auto}
  .topbar.open{left:0;box-shadow:var(--shadow-lg)}
  .topbar-left{flex-direction:column;align-items:stretch;gap:0}
  .topbar-brand{padding:16px 18px;font-size:17px}
  .topbar-nav{flex-direction:column;gap:0}
  .tnav-item{padding:10px 18px;border-radius:0;font-size:13px}
  .topbar-right{flex-direction:column;align-items:stretch;gap:10px;padding:14px 18px;border-top:1px solid var(--border);margin-top:auto}
  .topbar-credits{justify-content:center}
  .topbar-user-dropdown{justify-content:center}
  .lang-switcher{justify-content:center}
  .main-content{padding-top:68px !important}
  .dash-actions{grid-template-columns:1fr}
}
@media(max-width:640px){
  .main-content{padding:14px;padding-top:62px}
  .page-header{margin-bottom:16px}
  .page-header h1{font-size:1.25rem}
  .stats-grid{grid-template-columns:1fr 1fr;gap:8px}
  .services-grid{grid-template-columns:1fr}
  .form-row{grid-template-columns:1fr}
  .form-inline{flex-direction:column;align-items:stretch}
  .auth-card{padding:22px 16px}
  .card-body{padding:14px}
  .modal-content{padding:16px 14px}
  .btn-sm{padding:5px 10px;font-size:.76rem}
  .stat-card{padding:12px;gap:10px}
  .stat-value{font-size:1.3rem}
  .stat-icon{width:36px;height:36px;font-size:.9rem}
  .dash-stats{grid-template-columns:1fr}
}
@media(max-width:380px){.stats-grid{grid-template-columns:1fr}.main-content{padding:10px;padding-top:58px}}
@media(min-width:1025px){.hamburger{display:none !important}.sidebar-overlay{display:none !important}.main-content{padding-top:30px}}
@media(max-width:768px){.notif-panel{width:280px;right:-30px}.dash-stats{grid-template-columns:repeat(2,1fr)}}