/* reset base */
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

:root{
    --font-main: 'Inter', Arial, sans-serif;
    --header-height: 68px;
    --body-bg: linear-gradient(120deg, #eff6ff, #dbeafe 50%, #f8fafc);
    --body-text: #162033;
    --header-bg: linear-gradient(135deg, #2563eb, #1d4ed8);
    --header-text: #ffffff;
    --header-shadow: 0 10px 30px rgba(37, 99, 235, 0.18);
    --surface-bg: rgba(255, 255, 255, 0.84);
    --surface-border: rgba(148, 163, 184, 0.28);
    --surface-shadow: 0 24px 60px rgba(148, 163, 184, 0.18);
    --surface-inset: rgba(255, 255, 255, 0.68);
    --surface-muted: rgba(241, 245, 249, 0.92);
    --surface-deep: rgba(226, 232, 240, 0.72);
    --title-text: #0f172a;
    --muted-text: #64748b;
    --soft-text: #475569;
    --table-head-bg: rgba(226, 232, 240, 0.9);
    --table-row-hover: rgba(59, 130, 246, 0.08);
    --field-bg: rgba(255, 255, 255, 0.92);
    --field-border: rgba(148, 163, 184, 0.4);
    --sidebar-bg: rgba(255, 255, 255, 0.95);
    --sidebar-border: rgba(148, 163, 184, 0.32);
    --sidebar-shadow: 10px 0 40px rgba(148, 163, 184, 0.25);
    --sidebar-title: #0f172a;
    --sidebar-text: #334155;
    --sidebar-muted: #64748b;
    --sidebar-hover-bg: rgba(59, 130, 246, 0.12);
    --sidebar-hover-text: #0f172a;
    --toggle-bg: radial-gradient(circle at top, rgba(255, 255, 255, 0.95), rgba(226, 232, 240, 0.96));
    --toggle-border: rgba(148, 163, 184, 0.55);
    --toggle-shadow: 0 10px 25px rgba(148, 163, 184, 0.28), 0 0 0 1px rgba(255, 255, 255, 0.8) inset;
    --toggle-hover-shadow: 0 14px 30px rgba(148, 163, 184, 0.35), 0 0 0 1px rgba(191, 219, 254, 0.95) inset;
    --toggle-line: #0f172a;
    --accent: #2563eb;
    --accent-strong: #1d4ed8;
    --accent-soft: rgba(37, 99, 235, 0.16);
    --success: #16a34a;
    --warning: #ea580c;
    --danger: #dc2626;
    --chip-accent: #2563eb;
    --overlay: rgba(15, 23, 42, 0.28);
}

body[data-theme='dark']{
    --body-bg: radial-gradient(circle at top left, #1f2933, #0b1120);
    --body-text: #e5e7eb;
    --header-bg: #6c63ff;
    --header-text: #ffffff;
    --header-shadow: 0 4px 10px rgba(0,0,0,0.1);
    --surface-bg: rgba(15, 23, 42, 0.9);
    --surface-border: rgba(148, 163, 184, 0.18);
    --surface-shadow: 0 24px 60px rgba(15, 23, 42, 0.9);
    --surface-inset: rgba(15, 23, 42, 0.9);
    --surface-muted: rgba(2, 6, 23, 0.35);
    --surface-deep: rgba(15, 23, 42, 0.85);
    --title-text: #f9fafb;
    --muted-text: #9ca3af;
    --soft-text: #cbd5e1;
    --table-head-bg: rgba(15, 23, 42, 0.98);
    --table-row-hover: rgba(148, 163, 184, 0.06);
    --field-bg: rgba(15, 23, 42, 0.85);
    --field-border: rgba(148, 163, 184, 0.4);
    --sidebar-bg: rgba(15, 23, 42, 0.98);
    --sidebar-border: rgba(148, 163, 184, 0.4);
    --sidebar-shadow: 10px 0 40px rgba(15, 23, 42, 0.9);
    --sidebar-title: #e5e7eb;
    --sidebar-text: #d1d5db;
    --sidebar-muted: #9ca3af;
    --sidebar-hover-bg: rgba(55, 65, 81, 0.9);
    --sidebar-hover-text: #f9fafb;
    --toggle-bg: radial-gradient(circle at top, rgba(148, 163, 184, 0.25), rgba(15, 23, 42, 0.98));
    --toggle-border: rgba(148, 163, 184, 0.6);
    --toggle-shadow: 0 10px 25px rgba(15, 23, 42, 0.85), 0 0 0 1px rgba(15, 23, 42, 0.95) inset;
    --toggle-hover-shadow: 0 14px 30px rgba(15, 23, 42, 0.9), 0 0 0 1px rgba(148, 163, 184, 0.75) inset;
    --toggle-line: #e5e7eb;
    --accent: #818cf8;
    --accent-strong: #6366f1;
    --accent-soft: rgba(129, 140, 248, 0.22);
    --success: #22c55e;
    --warning: #f97316;
    --danger: #ef4444;
    --chip-accent: #6366f1;
    --overlay: rgba(15, 23, 42, 0.45);
}

body{
    background: var(--body-bg);
    color: var(--body-text);
    font-family: var(--font-main);
    padding-top: var(--header-height);
    transition: background 0.25s ease, color 0.25s ease;
}

header{
    background:var(--header-bg);
    color:var(--header-text);
    padding:20px;
    text-align:center;
    box-shadow:var(--header-shadow);
}

h1,h2,h3{
    margin-bottom:10px;
}

a{
    text-decoration:none;
    color:inherit;
}

.main-header{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
    min-height: var(--header-height);
    background:var(--header-bg);
    color:var(--header-text);
    padding:15px 20px;
    display:flex;
    justify-content: space-between;
    align-items: center;
    font-family: var(--font-main);
    box-shadow: var(--header-shadow);
}

.main-header h2{
    margin:0;
    font-weight:700;
    font-size:1.5rem;
}

.user-info{
    display:flex;
    align-items:center;
    gap:15px;
    font-weight:600;
}

.logout-btn{
    background: rgba(255, 255, 255, 0.92);
    color:var(--accent-strong);
    padding:5px 12px;
    border-radius:6px;
    text-decoration:none;
    font-weight:600;
    transition: background 0.3s ease, color 0.3s ease;
}

.logout-btn:hover{
    background: rgba(255, 255, 255, 1);
    color:var(--accent);
}