:root {
            --bg-a: #ecfeff;
            --bg-b: #fff7ed;
            --ink: #0f172a;
            --muted: #475569;
            --line: rgba(15, 118, 110, 0.22);
            --panel: rgba(255, 255, 255, 0.88);
            --accent: #0f766e;
        }

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

        body {
            min-height: 100vh;
            font-family: "Sora", sans-serif;
            color: var(--ink);
            background:
                radial-gradient(circle at 10% 12%, rgba(14, 165, 233, 0.2), transparent 30%),
                radial-gradient(circle at 86% 16%, rgba(249, 115, 22, 0.2), transparent 34%),
                linear-gradient(140deg, var(--bg-a), var(--bg-b));
            padding: 24px;
        }

        body[data-theme="dark"] {
            --ink: #e5e7eb;
            --muted: #94a3b8;
            --line: rgba(148, 163, 184, 0.28);
            --panel: rgba(15, 23, 42, 0.84);
            background:
                radial-gradient(circle at 12% 18%, rgba(45, 212, 191, 0.12), transparent 34%),
                radial-gradient(circle at 84% 12%, rgba(249, 115, 22, 0.1), transparent 30%),
                linear-gradient(140deg, #0b1220, #111827);
        }

        header { max-width: 1080px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; }
        .brand-group { display: inline-flex; align-items: center; gap: 10px; }
        .brand-actions { display: inline-flex; align-items: center; }
        .brand { display: inline-flex; align-items: center; gap: 10px; padding: 9px 14px; border-radius: 999px; text-decoration: none; color: var(--ink); border: 1px solid var(--line); background: rgba(255, 255, 255, 0.8); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
        .brand-logo { width: 28px; height: 28px; object-fit: contain; }
        .auth-actions { display: inline-flex; align-items: center; gap: 10px; }
        .login-btn { text-decoration: none; color: #ffffff; font-weight: 700; letter-spacing: 0.01em; padding: 11px 18px; border-radius: 999px; background: linear-gradient(120deg, #0f766e, #0ea5e9); box-shadow: 0 5px 14px rgba(15, 118, 110, 0.18); }
        .theme-switch { border: 1px solid rgba(17, 94, 89, 0.24); background: rgba(255, 255, 255, 0.82); border-radius: 999px; padding: 6px 10px 6px 8px; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; color: var(--accent); font-weight: 700; font-size: 0.8rem; box-shadow: 0 6px 14px rgba(15, 118, 110, 0.14); }
        .theme-switch-track { width: 42px; height: 22px; border-radius: 999px; background: rgba(148, 163, 184, 0.5); position: relative; border: 1px solid rgba(100, 116, 139, 0.34); }
        .theme-switch-thumb { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #ffffff; box-shadow: 0 1px 4px rgba(15, 23, 42, 0.28); transition: transform 180ms ease; }
        .theme-switch.is-dark .theme-switch-track { background: linear-gradient(120deg, #0f766e, #0ea5e9); border-color: rgba(14, 165, 233, 0.45); }
        .theme-switch.is-dark .theme-switch-thumb { transform: translateX(20px); }

        .quick-nav { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
        .quick-nav > .user-menu:not(:last-child) { --chip-a: #14b8a6; --chip-b: #0f766e; --chip-glow: rgba(15, 118, 110, 0.24); }
        .quick-nav > .user-menu:nth-child(1) { --chip-a: #0ea5e9; --chip-b: #2563eb; --chip-glow: rgba(37, 99, 235, 0.24); }
        .quick-nav > .user-menu:nth-child(2) { --chip-a: #06b6d4; --chip-b: #0f766e; --chip-glow: rgba(8, 145, 178, 0.24); }
        .quick-nav > .user-menu:nth-child(3) { --chip-a: #f59e0b; --chip-b: #ea580c; --chip-glow: rgba(234, 88, 12, 0.24); }
        .quick-nav > .user-menu:nth-child(4) { --chip-a: #22c55e; --chip-b: #15803d; --chip-glow: rgba(21, 128, 61, 0.24); }
        .quick-nav > .user-menu:nth-child(5) { --chip-a: #f97316; --chip-b: #dc2626; --chip-glow: rgba(220, 38, 38, 0.24); }
        .user-menu { position: relative; z-index: 40; }
        .user-badge { padding: 10px 14px; border-radius: 999px; border: 1px solid rgba(17, 94, 89, 0.22); background: rgba(255, 255, 255, 0.78); color: #0f766e; font-weight: 700; font-size: 0.9rem; }
        .user-trigger { border: 1px solid rgba(17, 94, 89, 0.22); cursor: pointer; transition: transform 150ms ease; }
        .nav-trigger { min-width: 94px; text-align: center; font-size: 0.82rem; padding: 9px 12px; }
        .quick-nav > .user-menu:not(:last-child) .nav-trigger { border: 1px solid rgba(255, 255, 255, 0.42); background: linear-gradient(140deg, color-mix(in srgb, var(--chip-a) 22%, #ffffff 78%), color-mix(in srgb, var(--chip-b) 15%, #ffffff 85%)); color: #0f172a; box-shadow: 0 10px 22px var(--chip-glow); font-weight: 800; letter-spacing: 0.01em; }
        .quick-nav > .user-menu:not(:last-child) .nav-trigger:hover { transform: translateY(-2px); box-shadow: 0 14px 24px var(--chip-glow); filter: saturate(1.08); }
        .quick-nav > .user-menu:not(:last-child) .user-dropdown { border: 1px solid color-mix(in srgb, var(--chip-b) 36%, #dbe5e8 64%); box-shadow: 0 20px 36px color-mix(in srgb, var(--chip-glow) 65%, rgba(15, 23, 42, 0.12) 35%); background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(247, 250, 252, 0.95)); }
        .user-trigger:hover { transform: translateY(-1px); }
        .user-dropdown { position: absolute; right: 0; top: calc(100% + 10px); min-width: 170px; border-radius: 12px; border: 1px solid rgba(15, 118, 110, 0.18); background: #ffffff; box-shadow: 0 16px 30px rgba(31, 42, 55, 0.15); padding: 8px; opacity: 0; visibility: hidden; transform: translateY(-4px); transition: all 160ms ease; z-index: 9999; }
        .user-menu:hover .user-dropdown, .user-menu:focus-within .user-dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
        .menu-link, .menu-btn { width: 100%; display: block; text-align: left; padding: 10px 12px; border-radius: 8px; color: #1f2937; font-weight: 600; font-size: 0.9rem; text-decoration: none; border: none; background: transparent; cursor: pointer; }
        .menu-title { padding: 8px 12px 6px; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; color: #64748b; font-weight: 700; }
        .menu-link:hover, .menu-btn:hover { background: #eef6f5; }
        .quick-nav > .user-menu:not(:last-child) .menu-link:hover { background: color-mix(in srgb, var(--chip-a) 18%, #eff6ff 82%); }
        .quick-nav > .user-menu:not(:last-child) .menu-title { color: color-mix(in srgb, var(--chip-b) 78%, #334155 22%); font-weight: 800; }

        body[data-theme="dark"] .brand { color: #e5e7eb; background: rgba(15, 23, 42, 0.72); border-color: rgba(148, 163, 184, 0.28); box-shadow: 0 8px 18px rgba(2, 6, 23, 0.42); }
        body[data-theme="dark"] .theme-switch { background: rgba(15, 23, 42, 0.78); border-color: rgba(148, 163, 184, 0.3); color: #e2e8f0; }
        body[data-theme="dark"] .user-badge { background: rgba(15, 23, 42, 0.78); color: #d1fae5; border-color: rgba(148, 163, 184, 0.24); }
        body[data-theme="dark"] .quick-nav > .user-menu:not(:last-child) .nav-trigger { background: linear-gradient(140deg, color-mix(in srgb, var(--chip-a) 35%, #0f172a 65%), color-mix(in srgb, var(--chip-b) 42%, #020617 58%)); color: #e2e8f0; border-color: rgba(148, 163, 184, 0.28); }
        body[data-theme="dark"] .user-dropdown { background: #0f172a; border-color: rgba(148, 163, 184, 0.28); box-shadow: 0 16px 30px rgba(2, 6, 23, 0.55); }
        body[data-theme="dark"] .quick-nav > .user-menu:not(:last-child) .user-dropdown { background: linear-gradient(180deg, rgba(15, 23, 42, 0.98), rgba(2, 6, 23, 0.96)); border: 1px solid rgba(100, 116, 139, 0.34); box-shadow: 0 20px 36px rgba(2, 6, 23, 0.58); }
        body[data-theme="dark"] .menu-link, body[data-theme="dark"] .menu-btn { color: #e5e7eb; }
        body[data-theme="dark"] .menu-title, body[data-theme="dark"] .quick-nav > .user-menu:not(:last-child) .menu-title { color: #94a3b8; }
        body[data-theme="dark"] .menu-link:hover, body[data-theme="dark"] .menu-btn:hover, body[data-theme="dark"] .quick-nav > .user-menu:not(:last-child) .menu-link:hover { background: rgba(30, 41, 59, 0.72); }

        .page { max-width: 1080px; margin: 18px auto 0; display: grid; gap: 14px; }
        .card { border: 1px solid var(--line); border-radius: 16px; background: var(--panel); padding: 16px; }
        h1 { font-size: 1.6rem; }
        .desc { margin-top: 8px; color: var(--muted); line-height: 1.5; }

        .field { margin-top: 10px; display: grid; gap: 6px; }
        .field label { font-size: 0.84rem; color: var(--muted); font-weight: 700; }
        .field input,
        .field textarea {
            width: 100%;
            border: 1px solid var(--line);
            border-radius: 10px;
            padding: 10px;
            font-family: inherit;
            background: rgba(255, 255, 255, 0.9);
            color: var(--ink);
        }

        body[data-theme="dark"] .field input,
        body[data-theme="dark"] .field textarea {
            background: rgba(2, 6, 23, 0.56);
            border-color: rgba(100, 116, 139, 0.4);
            color: #e5e7eb;
        }

        .row { margin-top: 10px; display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
        .btn { border: none; border-radius: 10px; padding: 10px 12px; font-weight: 700; font-size: 0.84rem; cursor: pointer; color: #fff; background: linear-gradient(120deg, #0f766e, #0ea5e9); }
        .msg { font-size: 0.84rem; color: var(--muted); min-height: 18px; }

        .req-list { display: grid; gap: 8px; }
        .req-item { border: 1px solid var(--line); border-radius: 12px; padding: 10px; background: rgba(255, 255, 255, 0.65); }
        body[data-theme="dark"] .req-item { background: rgba(2, 6, 23, 0.45); }
        .req-head { display: flex; justify-content: space-between; gap: 8px; }
        .req-title { font-weight: 700; }
        .req-meta { color: var(--muted); font-size: 0.8rem; }
        .req-content { margin-top: 6px; white-space: pre-wrap; line-height: 1.4; font-size: 0.88rem; }

        .badge { border-radius: 999px; border: 1px solid var(--line); padding: 3px 8px; font-size: 0.75rem; font-weight: 700; }
        .badge.pending { color: #0369a1; border-color: rgba(14, 165, 233, 0.4); }
        .badge.resolved { color: #065f46; border-color: rgba(16, 185, 129, 0.45); }
        .badge.rejected { color: #9f1239; border-color: rgba(244, 63, 94, 0.45); }