*{box-sizing:border-box}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Arial,sans-serif;background-color:var(--bg);color:var(--text);transition:background-color .2s ease,color .2s ease}.app-shell{display:flex;min-height:100vh}.sidebar{width:220px;background:var(--surface);color:var(--text);border-right:1px solid var(--border);display:flex;flex-direction:column;flex-shrink:0;transition:width .2s ease}.brand{height:60px;padding:0 20px;font-size:17px;font-weight:700;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:8px}.brand-mark{color:var(--primary)}.nav{display:flex;flex-direction:column;padding:10px;gap:2px;flex:1;min-height:0;overflow-y:auto}.nav-item{display:flex;align-items:center;gap:10px;background:transparent;color:var(--text-secondary);border:none;border-radius:6px;padding:10px 12px;cursor:pointer;font-size:14px;width:100%;text-decoration:none;box-sizing:border-box}.nav-item:hover{background:var(--surface-2);color:var(--text)}.nav-item.active{background:var(--gradient);color:var(--ink-on-accent)}.main{flex:1;display:flex;flex-direction:column;min-width:0}.topbar{height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 24px;background:var(--surface);border-bottom:1px solid var(--border)}.page-title{margin:0;font-size:18px;font-weight:600;color:var(--text)}.content{padding:24px;flex:1;background:var(--bg)}.header-right{display:flex;align-items:center;gap:12px}.user-chip{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--text-secondary)}.user-avatar{width:26px;height:26px;border-radius:50%;object-fit:cover;border:1px solid var(--border)}.theme-switcher{display:flex;align-items:center;gap:8px}.accent-picker{position:relative}.accent-pop{position:absolute;right:0;top:calc(100% + 8px);background:var(--surface);border:1px solid var(--border);border-radius:10px;box-shadow:var(--shadow);padding:6px;min-width:170px;z-index:50;display:flex;flex-direction:column;gap:2px}.accent-swatch{display:flex;align-items:center;gap:8px;background:transparent;border:none;color:var(--text);padding:7px 9px;border-radius:7px;text-align:left;font-size:13px;font-weight:400;cursor:pointer;width:100%;box-shadow:none}.accent-swatch:hover{background:var(--surface-2);transform:none;box-shadow:none}.accent-swatch--active{background:var(--primary-soft)}.accent-swatch__dot{width:14px;height:14px;border-radius:50%;background:var(--swatch)}.theme-toggle{width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;background:transparent;border:1px solid var(--border);color:var(--text);border-radius:50%;cursor:pointer;padding:0;font-size:15px;box-shadow:none}.theme-toggle:hover{background:var(--surface-2);border-color:var(--primary);color:var(--primary);transform:none;box-shadow:none}.btn-logout{display:inline-flex;align-items:center;gap:6px;background:transparent;border:1px solid var(--border);color:var(--text);box-shadow:none}.btn-logout:hover{background:var(--surface-2);color:var(--text);transform:none;box-shadow:none}.card{background:var(--surface);border-radius:10px;padding:20px;box-shadow:var(--shadow);border:1px solid var(--border)}.card h3{margin:0 0 14px;font-size:15px;font-weight:600;color:var(--text)}.card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px}.stat-card{border:1px solid var(--border);cursor:pointer;text-align:left;display:flex;flex-direction:column;gap:4px;color:var(--text);font-weight:400}.stat-card:hover{box-shadow:var(--shadow-hover)}.stat-value{font-size:26px;font-weight:700;color:var(--text)}.stat-label{font-size:13px;color:var(--text-secondary)}.page-toolbar{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px}.inline-form{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:16px}.inline-form label{font-size:13px;font-weight:500;color:var(--text-secondary)}.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-bottom:16px}.form-grid label{display:flex;flex-direction:column;gap:5px;font-size:13px;color:var(--text-secondary)}.check-label{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--text-secondary);cursor:pointer}.data-table{width:100%;border-collapse:collapse;margin-top:15px;font-size:14px}.data-table th,.data-table td{border:1px solid var(--border);padding:8px 10px;text-align:left}.data-table th,.data-table tfoot td{background-color:var(--surface-2);font-weight:600}.empty-cell{text-align:center;color:var(--text-muted);padding:20px}.row-actions{display:flex;gap:6px;flex-wrap:wrap}.users-header{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:14px}.users-header h3{margin:0}.add-user-form{margin-bottom:16px;padding:14px;border:1px solid var(--border);border-radius:10px;background:var(--surface-2)}.user-actions{display:flex;flex-direction:column;align-items:flex-start;gap:8px}.approve-group{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:10px 12px;background:var(--surface-2);border:1px solid var(--border);border-radius:10px}.btn-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:300;background:#00000080;display:flex;align-items:center;justify-content:center;padding:16px}.modal{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:24px;max-width:400px;width:100%;box-shadow:var(--shadow-hover)}.modal-title{margin:0 0 8px;font-size:18px;font-weight:700;color:var(--text)}.modal-message{margin:0 0 20px;font-size:14px;color:var(--text-secondary);line-height:1.6}.modal-actions{display:flex;justify-content:flex-end;gap:10px}.history-cell{background:var(--surface-2);padding:10px 12px}.history-list{margin:0;padding-left:18px;font-size:13px;color:var(--text-secondary)}input,select{padding:8px 10px;border:1px solid var(--input-border);border-radius:6px;font-size:14px;background:var(--surface);color:var(--text);font-family:inherit}input:focus,select:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 2px var(--primary-soft)}button{padding:9px 18px;background:var(--gradient);background-size:150% 100%;color:var(--ink-on-accent);border:none;border-radius:var(--radius-pill);cursor:pointer;font-size:14px;font-weight:700;line-height:1;white-space:nowrap;transition:all var(--transition);box-shadow:var(--shadow-btn)}button:hover{background-position:100% 0;transform:translateY(-1px);box-shadow:var(--glow)}button:disabled{background:var(--text-muted);color:var(--ink-inverse);box-shadow:none;cursor:not-allowed;transform:none}.btn-primary{background:var(--gradient);background-size:150% 100%;color:var(--ink-on-accent)}.btn-primary:hover{background-position:100% 0;box-shadow:var(--glow)}.btn-danger,.btn-danger:hover{background:var(--danger-soft);color:var(--danger-ink);box-shadow:none}.btn-secondary{background:var(--surface);color:var(--text);border:1px solid var(--border);box-shadow:none}.btn-secondary:hover{background:var(--surface-2);border-color:var(--primary);color:var(--primary);transform:none;box-shadow:none}.btn-soft,.btn-soft:hover{background:var(--primary-soft);color:var(--primary);box-shadow:none}.btn-info,.btn-info:hover{background:var(--info-soft);color:var(--info);box-shadow:none}.error-text{color:var(--danger);font-size:14px;margin:10px 0 0}.muted{color:var(--text-muted);font-size:14px}.profile-head{display:flex;align-items:center;gap:16px}.profile-avatar{width:56px;height:56px;border-radius:50%;object-fit:cover;border:1px solid var(--border)}.profile-avatar--initials{display:grid;place-items:center;background:var(--gradient);color:var(--ink-on-accent);font-weight:700;font-size:18px}.profile-name{font-size:17px;font-weight:700;color:var(--text)}.role-badge{display:inline-block;margin-top:8px;padding:2px 10px;border-radius:999px;background:var(--primary-soft);color:var(--primary);font-size:12px;font-weight:600;text-transform:capitalize}.req-badge{display:inline-flex;align-items:center;padding:2px 10px;border-radius:999px;background:var(--info-soft);color:var(--info);font-size:12px;font-weight:600;text-transform:capitalize;white-space:nowrap}.profile-avatar--lg{width:96px;height:96px;font-size:26px}.photo-upload{display:flex;align-items:center;gap:20px;flex-wrap:wrap}.topbar-left{display:flex;align-items:center;gap:12px}.nav-icon{display:inline-flex;flex-shrink:0}.app-shell.collapsed .sidebar{width:64px}.app-shell.collapsed .brand{justify-content:center;padding-left:0;padding-right:0}.app-shell.collapsed .brand-label,.app-shell.collapsed .nav-label{display:none}.app-shell.collapsed .nav-item{justify-content:center;padding-left:0;padding-right:0}.mobile-toggle{display:none}.sidebar-toggle{display:inline-flex}.sidebar-close{display:none;margin-left:auto}.sidebar-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:150;background:#00000073}.hide-sm{display:inline}.page-title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}.topbar-left{min-width:0}@media (max-width: 899px){.sidebar{position:fixed;top:0;left:0;bottom:0;z-index:200;width:240px;height:100vh;transform:translate(-100%);transition:transform .25s ease}.app-shell.mobile-open .sidebar{transform:translate(0);box-shadow:0 0 40px #0000004d}.app-shell.collapsed .sidebar{width:240px}.app-shell.collapsed .brand{justify-content:flex-start;padding:0 20px}.app-shell.collapsed .brand-label,.app-shell.collapsed .nav-label{display:inline}.app-shell.collapsed .nav-item{justify-content:flex-start;padding:10px 12px}.mobile-toggle{display:inline-flex}.sidebar-toggle{display:none}.sidebar-close{display:inline-flex}}@media (max-width: 768px){.content{padding:16px}.card{padding:16px;overflow-x:auto}.topbar{padding:0 12px}.page-title{font-size:16px}.header-right{gap:8px}.hide-sm{display:none}}@media (max-width: 460px){.page-title{display:none}}.login-page{min-height:100vh;display:flex;flex-direction:column;background-color:var(--bg)}.login-topbar{display:flex;justify-content:flex-end;padding:16px 24px}.login-shell{flex:1;width:100%;max-width:1040px;margin:0 auto;padding:8px 24px 64px;display:grid;grid-template-columns:1.15fr 1fr;gap:48px;align-items:center}.login-shell--single{grid-template-columns:1fr;max-width:520px;gap:24px}.login-hero{display:flex;flex-direction:column;gap:16px}.hero-mark{width:54px;height:54px;border-radius:14px;background:var(--gradient);color:var(--ink-on-accent);display:grid;place-items:center;font-weight:800;font-size:1.2rem}.login-company{font-size:.85rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted);margin:0}.login-title{font-size:clamp(2.4rem,5vw,3.4rem);font-weight:800;line-height:1.05;letter-spacing:-.02em;margin:0;color:var(--text)}.login-title span{color:var(--primary)}.login-tagline{font-size:1.2rem;font-weight:600;color:var(--primary);margin:0}.login-desc{color:var(--text-muted);font-size:1rem;line-height:1.65;max-width:500px;margin:0}.login-card{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:28px;box-shadow:var(--shadow);text-align:left}.login-card h1,.login-card h2{margin:0 0 6px;font-size:20px;font-weight:700;color:var(--text)}.login-sub{color:var(--text-secondary);font-size:14px;margin:4px 0 12px}.auth-form{display:flex;flex-direction:column;gap:12px;margin-top:16px}.auth-form input{width:100%;padding:11px 12px}.auth-btn{width:100%;padding:12px;margin-top:4px}.auth-divider{display:flex;align-items:center;gap:10px;margin:20px 0;color:var(--text-muted);font-size:13px}.auth-divider:before,.auth-divider:after{content:"";flex:1;height:1px;background:var(--border)}.auth-footer{margin-top:16px;font-size:13px;display:flex;gap:8px;flex-wrap:wrap}.auth-footer a{color:var(--primary);text-decoration:none}.auth-footer a:hover{text-decoration:underline}.login-error{color:var(--danger);font-size:14px;margin:0}.login-success{color:var(--success);font-size:14px;margin:0}.google-btn-wrapper{display:flex;justify-content:center;width:100%}.role-list{display:flex;flex-direction:column;gap:10px;margin:16px 0}.role-card{display:flex;align-items:flex-start;gap:12px;padding:12px 14px;border:2px solid var(--border);border-radius:10px;cursor:pointer;transition:border-color .15s,background .15s}.role-card input{margin-top:3px}.role-card.selected{border-color:var(--primary);background:var(--primary-soft)}.role-label{font-weight:600;font-size:14px;color:var(--text)}.role-desc{font-size:12.5px;color:var(--text-secondary);margin-top:2px}@media (max-width: 760px){.login-shell{grid-template-columns:1fr;gap:28px;padding-top:8px}}:root{--bg: #f4f7f6;--surface: #ffffff;--surface-2: #f8fafc;--surface-3: #eef2f7;--text: #0f172a;--text-secondary: #475569;--text-muted: #94a3b8;--border: #e5e7eb;--input-border: #cbd5e1;--primary: #3b82f6;--primary-hover: #2563eb;--primary-soft: rgba(59, 130, 246, .14);--accent-2: #2563eb;--gradient: linear-gradient(90deg, #2563eb 0%, #3b82f6 50%, #4f9cf9 100%);--ink-on-accent: #1a1a1a;--ink-inverse: #ffffff;--danger: #ef4444;--danger-hover: #dc2626;--danger-soft: rgba(239, 68, 68, .12);--danger-ink: #b91c1c;--secondary: #64748b;--secondary-hover: #475569;--success: #16a34a;--info: #6366f1;--info-soft: rgba(99, 102, 241, .14);--shadow: 0 1px 3px rgba(0, 0, 0, .08);--shadow-hover: 0 4px 12px rgba(0, 0, 0, .12);--shadow-btn: 0 8px 24px -8px rgba(37, 99, 235, .45);--glow: 0 10px 34px -8px rgba(37, 99, 235, .4);--radius-pill: 999px;--transition: .2s ease}:root.dark{--bg: #0d1117;--surface: #161b22;--surface-2: #1c2128;--surface-3: #21262d;--text: #e6edf3;--text-secondary: #9ca3af;--text-muted: #6b7280;--border: #30363d;--input-border: #3a4048;--primary-soft: rgba(59, 130, 246, .2);--danger: #f87171;--danger-hover: #ef4444;--danger-soft: rgba(248, 113, 113, .18);--danger-ink: #fca5a5;--secondary: #8b949e;--secondary-hover: #a0a8b0;--success: #34d399;--info: #818cf8;--info-soft: rgba(129, 140, 248, .18);--shadow: 0 1px 3px rgba(0, 0, 0, .4);--shadow-hover: 0 6px 18px rgba(0, 0, 0, .5)}:root[data-accent=sunset]{--primary: #ffb020;--primary-hover: #f59e0b;--accent-2: #f59e0b;--gradient: linear-gradient(90deg, #ff6b35 0%, #ffb020 50%, #ffc135 100%);--primary-soft: rgba(245, 158, 11, .14);--shadow-btn: 0 8px 24px -8px rgba(245, 158, 11, .45);--glow: 0 10px 34px -8px rgba(255, 176, 32, .4)}:root[data-accent=ocean]{--primary: #3b82f6;--primary-hover: #2563eb;--accent-2: #2563eb;--gradient: linear-gradient(90deg, #2563eb 0%, #3b82f6 50%, #4f9cf9 100%);--primary-soft: rgba(59, 130, 246, .14);--shadow-btn: 0 8px 24px -8px rgba(37, 99, 235, .45);--glow: 0 10px 34px -8px rgba(37, 99, 235, .4)}:root[data-accent=forest]{--primary: #10b981;--primary-hover: #059669;--accent-2: #059669;--gradient: linear-gradient(90deg, #059669 0%, #10b981 50%, #34d399 100%);--primary-soft: rgba(16, 185, 129, .14);--shadow-btn: 0 8px 24px -8px rgba(5, 150, 105, .45);--glow: 0 10px 34px -8px rgba(16, 185, 129, .4)}:root[data-accent=berry]{--primary: #ec4899;--primary-hover: #db2777;--accent-2: #db2777;--gradient: linear-gradient(90deg, #db2777 0%, #ec4899 50%, #f472b6 100%);--primary-soft: rgba(236, 72, 153, .14);--shadow-btn: 0 8px 24px -8px rgba(219, 39, 119, .45);--glow: 0 10px 34px -8px rgba(236, 72, 153, .4)}:root[data-accent=royal]{--primary: #8b5cf6;--primary-hover: #7c3aed;--accent-2: #7c3aed;--gradient: linear-gradient(90deg, #7c3aed 0%, #8b5cf6 50%, #a78bfa 100%);--primary-soft: rgba(139, 92, 246, .14);--shadow-btn: 0 8px 24px -8px rgba(124, 58, 237, .45);--glow: 0 10px 34px -8px rgba(139, 92, 246, .4)}:root.dark[data-accent=sunset]{--primary: #fbbf24;--primary-hover: #f59e0b;--gradient: linear-gradient(90deg, #f59e0b 0%, #fbbf24 50%, #fcd34d 100%);--shadow-btn: 0 8px 24px -8px rgba(245, 158, 11, .55);--glow: 0 10px 34px -8px rgba(251, 191, 36, .5)}:root.dark[data-accent=ocean]{--primary: #60a5fa;--primary-hover: #3b82f6;--gradient: linear-gradient(90deg, #3b82f6 0%, #60a5fa 50%, #93c5fd 100%);--shadow-btn: 0 8px 24px -8px rgba(59, 130, 246, .55);--glow: 0 10px 34px -8px rgba(96, 165, 250, .5)}:root.dark[data-accent=forest]{--primary: #34d399;--primary-hover: #10b981;--gradient: linear-gradient(90deg, #10b981 0%, #34d399 50%, #6ee7b7 100%);--shadow-btn: 0 8px 24px -8px rgba(16, 185, 129, .55);--glow: 0 10px 34px -8px rgba(52, 211, 153, .5)}:root.dark[data-accent=berry]{--primary: #f472b6;--primary-hover: #ec4899;--gradient: linear-gradient(90deg, #ec4899 0%, #f472b6 50%, #f9a8d4 100%);--shadow-btn: 0 8px 24px -8px rgba(236, 72, 153, .55);--glow: 0 10px 34px -8px rgba(244, 114, 182, .5)}:root.dark[data-accent=royal]{--primary: #a78bfa;--primary-hover: #8b5cf6;--gradient: linear-gradient(90deg, #8b5cf6 0%, #a78bfa 50%, #c4b5fd 100%);--shadow-btn: 0 8px 24px -8px rgba(139, 92, 246, .55);--glow: 0 10px 34px -8px rgba(167, 139, 250, .5)}