@import "https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Outfit:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap";
:root{--color-navy-950:#050b14;--color-navy-900:#0a1628;--color-navy-800:#0f1f38;--color-navy-700:#162847;--color-navy-600:#1e3a5f;--color-teal-400:#2ee8bb;--color-teal-500:#00d4aa;--color-teal-600:#00b893;--color-teal-700:#009a7b;--color-amber-400:#ffca6e;--color-amber-500:#ffb547;--color-amber-600:#f59e20;--color-coral-400:#ff8a8a;--color-coral-500:#ff6b6b;--color-coral-600:#e85050;--color-green-500:#22c55e;--color-blue-500:#3b82f6;--color-purple-500:#a855f7;--color-slate-50:#f8fafc;--color-slate-100:#f1f5f9;--color-slate-200:#e2e8f0;--color-slate-300:#cbd5e1;--color-slate-400:#94a3b8;--color-slate-500:#64748b;--color-slate-600:#475569;--color-slate-700:#334155;--color-slate-800:#1e293b;--color-slate-900:#0f172a;--color-bg-primary:var(--color-navy-900);--color-bg-secondary:#111827;--color-bg-surface:#ffffff0a;--color-bg-surface-hover:#ffffff14;--color-bg-surface-active:#ffffff1f;--color-text-primary:var(--color-slate-50);--color-text-secondary:var(--color-slate-400);--color-text-muted:var(--color-slate-500);--color-text-accent:var(--color-teal-500);--color-border:#ffffff14;--color-border-hover:#ffffff29;--color-border-active:var(--color-teal-500);--color-accent:var(--color-teal-500);--color-accent-hover:var(--color-teal-400);--color-accent-muted:#00d4aa26;--color-warning:var(--color-amber-500);--color-warning-muted:#ffb54726;--color-danger:var(--color-coral-500);--color-danger-muted:#ff6b6b26;--color-success:var(--color-green-500);--color-success-muted:#22c55e26;--color-info:var(--color-blue-500);--color-info-muted:#3b82f626;--font-sans:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--font-mono:"JetBrains Mono", "Fira Code", "Cascadia Code", monospace;--font-display:"Outfit", var(--font-sans);--text-xs:.75rem;--text-sm:.875rem;--text-base:1rem;--text-lg:1.125rem;--text-xl:1.25rem;--text-2xl:1.5rem;--text-3xl:1.875rem;--text-4xl:2.25rem;--text-5xl:3rem;--leading-tight:1.25;--leading-normal:1.5;--leading-relaxed:1.75;--tracking-tight:-.025em;--tracking-normal:0;--tracking-wide:.025em;--space-0:0;--space-1:.25rem;--space-2:.5rem;--space-3:.75rem;--space-4:1rem;--space-5:1.25rem;--space-6:1.5rem;--space-8:2rem;--space-10:2.5rem;--space-12:3rem;--space-16:4rem;--space-20:5rem;--space-24:6rem;--radius-sm:.375rem;--radius-md:.5rem;--radius-lg:.75rem;--radius-xl:1rem;--radius-2xl:1.5rem;--radius-full:9999px;--shadow-sm:0 1px 2px #0000004d;--shadow-md:0 4px 6px -1px #0006, 0 2px 4px -2px #0000004d;--shadow-lg:0 10px 15px -3px #0006, 0 4px 6px -4px #0000004d;--shadow-xl:0 20px 25px -5px #00000080, 0 8px 10px -6px #0000004d;--shadow-glow-teal:0 0 20px #00d4aa40;--shadow-glow-amber:0 0 20px #ffb54740;--ease-default:cubic-bezier(.4, 0, .2, 1);--ease-in:cubic-bezier(.4, 0, 1, 1);--ease-out:cubic-bezier(0, 0, .2, 1);--ease-spring:cubic-bezier(.34, 1.56, .64, 1);--duration-fast:.15s;--duration-normal:.25s;--duration-slow:.4s;--glass-bg:#ffffff0a;--glass-bg-strong:#ffffff14;--glass-border:#ffffff1a;--glass-backdrop:blur(20px) saturate(180%);--sidebar-width:260px;--sidebar-collapsed-width:72px;--header-height:64px;--content-max-width:1440px;--z-dropdown:100;--z-sticky:200;--z-fixed:300;--z-modal-backdrop:400;--z-modal:500;--z-popover:600;--z-tooltip:700;--z-toast:800}
*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizelegibility;scroll-behavior:smooth;font-size:16px}body{font-family:var(--font-sans);font-size:var(--text-base);line-height:var(--leading-normal);color:var(--color-text-primary);background-color:var(--color-bg-primary);min-height:100vh;overflow-x:hidden}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:var(--color-slate-700);border-radius:var(--radius-full)}::-webkit-scrollbar-thumb:hover{background:var(--color-slate-600)}h1,h2,h3,h4,h5,h6{font-family:var(--font-display);font-weight:700;line-height:var(--leading-tight);letter-spacing:var(--tracking-tight);color:var(--color-text-primary)}h1{font-size:var(--text-4xl)}h2{font-size:var(--text-3xl)}h3{font-size:var(--text-2xl)}h4{font-size:var(--text-xl)}h5{font-size:var(--text-lg)}h6{font-size:var(--text-base);font-weight:600}p{color:var(--color-text-secondary);line-height:var(--leading-relaxed)}a{color:var(--color-text-accent);transition:color var(--duration-fast) var(--ease-default);text-decoration:none}a:hover{color:var(--color-accent-hover)}.app-shell{min-height:100vh;display:flex}.sidebar{width:var(--sidebar-width);background:var(--color-bg-secondary);border-right:1px solid var(--color-border);height:100vh;z-index:var(--z-sticky);transition:width var(--duration-normal) var(--ease-default), transform var(--duration-normal) var(--ease-default);flex-direction:column;display:flex;position:fixed;top:0;left:0;overflow:hidden auto}.sidebar-header{align-items:center;gap:var(--space-3);padding:var(--space-5) var(--space-5);border-bottom:1px solid var(--color-border);min-height:var(--header-height);display:flex}.sidebar-logo{border-radius:var(--radius-lg);object-fit:cover;width:36px;height:36px}.sidebar-brand{font-family:var(--font-display);font-size:var(--text-lg);color:var(--color-text-primary);white-space:nowrap;font-weight:700}.sidebar-brand span{color:var(--color-accent)}.sidebar-nav{padding:var(--space-4) var(--space-3);gap:var(--space-1);flex-direction:column;flex:1;display:flex}.sidebar-section-label{font-size:var(--text-xs);color:var(--color-text-muted);text-transform:uppercase;letter-spacing:var(--tracking-wide);padding:var(--space-4) var(--space-3) var(--space-2);font-weight:600}.nav-item{align-items:center;gap:var(--space-3);padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);color:var(--color-text-secondary);font-size:var(--text-sm);cursor:pointer;transition:all var(--duration-fast) var(--ease-default);white-space:nowrap;border:1px solid #0000;font-weight:500;text-decoration:none;display:flex;position:relative}.nav-item:hover{color:var(--color-text-primary);background:var(--color-bg-surface-hover)}.nav-item.active{color:var(--color-accent);background:var(--color-accent-muted);border-color:#00d4aa33}.nav-item.active:before{content:"";background:var(--color-accent);border-radius:var(--radius-full);width:3px;height:20px;position:absolute;top:50%;left:-13px;transform:translateY(-50%)}.nav-icon{opacity:.7;flex-shrink:0;width:20px;height:20px}.nav-item.active .nav-icon{opacity:1}.nav-badge{background:var(--color-danger);color:#fff;border-radius:var(--radius-full);text-align:center;min-width:18px;margin-left:auto;padding:2px 6px;font-size:.65rem;font-weight:700}.main-content{margin-left:var(--sidebar-width);min-height:100vh;transition:margin-left var(--duration-normal) var(--ease-default);flex:1}.top-bar{height:var(--header-height);-webkit-backdrop-filter:var(--glass-backdrop);backdrop-filter:var(--glass-backdrop);border-bottom:1px solid var(--color-border);padding:0 var(--space-6);z-index:var(--z-sticky);background:#0a1628cc;justify-content:space-between;align-items:center;display:flex;position:sticky;top:0}.top-bar-title{font-family:var(--font-display);font-size:var(--text-xl);font-weight:600}.top-bar-actions{align-items:center;gap:var(--space-3);display:flex}.page-content{padding:var(--space-6);max-width:var(--content-max-width)}.card{background:var(--color-bg-surface);border:1px solid var(--color-border);border-radius:var(--radius-xl);padding:var(--space-6);transition:all var(--duration-normal) var(--ease-default)}.card:hover{border-color:var(--color-border-hover);box-shadow:var(--shadow-md)}.card-glass{background:var(--glass-bg);-webkit-backdrop-filter:var(--glass-backdrop);backdrop-filter:var(--glass-backdrop);border:1px solid var(--glass-border);border-radius:var(--radius-xl);padding:var(--space-6)}.card-header{margin-bottom:var(--space-4);justify-content:space-between;align-items:center;display:flex}.card-title{font-size:var(--text-lg);font-weight:600}.card-subtitle{font-size:var(--text-sm);color:var(--color-text-muted);margin-top:var(--space-1)}.metric-card{background:var(--color-bg-surface);border:1px solid var(--color-border);border-radius:var(--radius-xl);padding:var(--space-5);gap:var(--space-2);transition:all var(--duration-normal) var(--ease-default);flex-direction:column;display:flex;position:relative;overflow:hidden}.metric-card:after{content:"";background:linear-gradient(90deg, var(--color-accent), transparent);opacity:0;height:2px;transition:opacity var(--duration-normal) var(--ease-default);position:absolute;top:0;left:0;right:0}.metric-card:hover{border-color:var(--color-border-hover);box-shadow:var(--shadow-lg);transform:translateY(-2px)}.metric-card:hover:after{opacity:1}.metric-label{font-size:var(--text-sm);color:var(--color-text-muted);font-weight:500}.metric-value{font-family:var(--font-display);font-size:var(--text-3xl);color:var(--color-text-primary);letter-spacing:var(--tracking-tight);font-weight:800}.metric-change{font-size:var(--text-sm);align-items:center;gap:var(--space-1);font-weight:600;display:flex}.metric-change.positive{color:var(--color-success)}.metric-change.negative{color:var(--color-danger)}.metric-change.neutral{color:var(--color-text-muted)}.metrics-grid{gap:var(--space-4);grid-template-columns:repeat(auto-fit,minmax(240px,1fr));display:grid}.dashboard-grid{gap:var(--space-4);grid-template-columns:repeat(12,1fr);display:grid}.col-span-4{grid-column:span 4}.col-span-6{grid-column:span 6}.col-span-8{grid-column:span 8}.col-span-12{grid-column:span 12}.btn{justify-content:center;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-4);font-family:var(--font-sans);font-size:var(--text-sm);border-radius:var(--radius-md);cursor:pointer;transition:all var(--duration-fast) var(--ease-default);white-space:nowrap;border:1px solid #0000;min-height:40px;font-weight:600;display:inline-flex}.btn:active{transform:scale(.97)}.btn-primary{background:var(--color-accent);color:var(--color-navy-900);box-shadow:var(--shadow-glow-teal)}.btn-primary:hover{background:var(--color-accent-hover);box-shadow:0 0 30px #00d4aa66}.btn-secondary{background:var(--color-bg-surface);color:var(--color-text-primary);border-color:var(--color-border)}.btn-secondary:hover{background:var(--color-bg-surface-hover);border-color:var(--color-border-hover)}.btn-danger{background:var(--color-danger-muted);color:var(--color-danger);border-color:#ff6b6b4d}.btn-danger:hover{background:#ff6b6b40}.btn-ghost{color:var(--color-text-secondary);background:0 0}.btn-ghost:hover{background:var(--color-bg-surface);color:var(--color-text-primary)}.btn-icon{border-radius:var(--radius-md);width:40px;height:40px;padding:0}.btn-sm{min-height:32px;padding:var(--space-1) var(--space-3);font-size:var(--text-xs)}.btn-lg{min-height:48px;padding:var(--space-3) var(--space-6);font-size:var(--text-base);border-radius:var(--radius-lg)}.badge{align-items:center;gap:var(--space-1);font-size:var(--text-xs);border-radius:var(--radius-full);text-transform:uppercase;letter-spacing:.05em;padding:3px 10px;font-weight:600;display:inline-flex}.badge-success{background:var(--color-success-muted);color:var(--color-success)}.badge-warning{background:var(--color-warning-muted);color:var(--color-amber-500)}.badge-danger{background:var(--color-danger-muted);color:var(--color-danger)}.badge-info{background:var(--color-info-muted);color:var(--color-info)}.badge-neutral{background:var(--color-bg-surface);color:var(--color-text-secondary)}.badge-teal{background:var(--color-accent-muted);color:var(--color-accent)}.input{width:100%;padding:var(--space-2) var(--space-3);font-family:var(--font-sans);font-size:var(--text-sm);color:var(--color-text-primary);background:var(--color-bg-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);transition:all var(--duration-fast) var(--ease-default);outline:none;min-height:40px}.input:focus{border-color:var(--color-accent);box-shadow:0 0 0 3px var(--color-accent-muted)}.input::placeholder{color:var(--color-text-muted)}.label{font-size:var(--text-sm);color:var(--color-text-secondary);margin-bottom:var(--space-1);font-weight:500;display:block}.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='%2394A3B8' d='M6 8L1 3h10z'/%3E%3C/svg%3E");background-position:right 12px center;background-repeat:no-repeat;padding-right:36px}.table-container{border:1px solid var(--color-border);border-radius:var(--radius-xl);overflow-x:auto}table{border-collapse:collapse;width:100%}thead{background:var(--color-bg-surface)}th{padding:var(--space-3) var(--space-4);font-size:var(--text-xs);color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.05em;text-align:left;border-bottom:1px solid var(--color-border);white-space:nowrap;font-weight:600}td{padding:var(--space-3) var(--space-4);font-size:var(--text-sm);color:var(--color-text-secondary);border-bottom:1px solid var(--color-border)}tr:last-child td{border-bottom:none}tr:hover td{background:var(--color-bg-surface-hover)}.bottom-nav{height:72px;-webkit-backdrop-filter:var(--glass-backdrop);backdrop-filter:var(--glass-backdrop);border-top:1px solid var(--color-border);z-index:var(--z-fixed);padding:0 var(--space-2);padding-bottom:env(safe-area-inset-bottom);background:#111827f2;display:none;position:fixed;bottom:0;left:0;right:0}.bottom-nav-items{justify-content:space-around;align-items:center;height:100%;display:flex}.bottom-nav-item{padding:var(--space-1) var(--space-2);color:var(--color-text-muted);border-radius:var(--radius-md);transition:color var(--duration-fast) var(--ease-default);flex-direction:column;align-items:center;gap:4px;min-width:56px;font-size:.625rem;font-weight:500;text-decoration:none;display:flex;position:relative}.bottom-nav-item.active{color:var(--color-accent)}.bottom-nav-item .nav-icon{width:22px;height:22px}@media (max-width:1024px){.sidebar{transform:translate(-100%)}.sidebar.open{box-shadow:var(--shadow-xl);transform:translate(0)}.main-content{margin-left:0}.dashboard-grid{grid-template-columns:repeat(6,1fr)}.col-span-4,.col-span-6,.col-span-8{grid-column:span 6}.page-content{padding:var(--space-4)}.bottom-nav{display:block}body{padding-bottom:72px}}@media (max-width:640px){.metrics-grid{gap:var(--space-3);grid-template-columns:repeat(2,1fr)}.dashboard-grid{grid-template-columns:1fr}.col-span-4,.col-span-6,.col-span-8{grid-column:span 1}.page-content{padding:var(--space-3)}h1{font-size:var(--text-2xl)}h2{font-size:var(--text-xl)}h3,.top-bar-title{font-size:var(--text-lg)}.table-container{font-size:var(--text-xs)}}