@import "https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap";:root{--bg-color:#0f172a;--surface-color:#1e293b99;--surface-border:#ffffff1a;--text-primary:#f8fafc;--text-secondary:#94a3b8;--accent:#6366f1;--accent-gradient:linear-gradient(135deg, #6366f1 0%, #a855f7 100%);--success:#10b981;--warning:#f59e0b}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg-color);color:var(--text-primary);-webkit-font-smoothing:antialiased;min-height:100vh;font-family:Inter,system-ui,-apple-system,sans-serif}a{color:inherit;text-decoration:none}ul{list-style:none}.glass{background:var(--surface-color);-webkit-backdrop-filter:blur(12px);border:1px solid var(--surface-border);border-radius:16px}.glass-card{background:var(--surface-color);-webkit-backdrop-filter:blur(12px);border:1px solid var(--surface-border);border-radius:12px;padding:24px;transition:transform .2s,box-shadow .2s}.glass-card:hover{transform:translateY(-4px);box-shadow:0 10px 20px #0003}.btn{background:var(--surface-border);color:var(--text-primary);border:1px solid var(--surface-border);cursor:pointer;border-radius:8px;justify-content:center;align-items:center;gap:8px;padding:10px 20px;font-size:14px;font-weight:500;transition:all .2s;display:inline-flex}.btn:hover{background:#ffffff1a}.btn-primary{background:var(--accent-gradient);color:#fff;border:none}.btn-primary:hover{opacity:.9;background:var(--accent-gradient);box-shadow:0 4px 12px #6366f14d}.stat-value{background:var(--accent-gradient);-webkit-text-fill-color:transparent;-webkit-background-clip:text;font-size:32px;font-weight:700;display:inline-block}.subtitle{color:var(--text-secondary);margin-top:4px;font-size:14px}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:#ffffff1a;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#fff3}.app-container{height:100vh;display:flex;overflow:hidden}.main-content{flex-direction:column;flex:1;display:flex;overflow:hidden}.content-area{background:radial-gradient(circle at top right, #6366f10d, transparent 400px), var(--bg-color);flex:1;padding:32px;overflow-y:auto}.page-header{margin-bottom:32px}.page-title{margin-bottom:8px;font-size:28px;font-weight:600}.page-subtitle{color:var(--text-secondary);font-size:16px}.sidebar{border-right:1px solid var(--surface-border);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background:#0f172acc;flex-direction:column;width:280px;padding:24px 0;display:flex}.sidebar-brand{color:var(--text-primary);align-items:center;gap:12px;padding:0 24px 32px;font-size:20px;font-weight:700;display:flex}.brand-icon{color:var(--accent)}.sidebar-nav{flex-direction:column;flex:1;gap:8px;padding:0 16px;display:flex}.nav-item{color:var(--text-secondary);cursor:pointer;border-radius:8px;align-items:center;gap:12px;padding:12px 16px;font-weight:500;transition:all .2s;display:flex}.nav-item:hover,.nav-item.active{background:var(--surface-color);color:var(--text-primary)}.nav-item.active{color:#818cf8;background:#6366f11a}.nav-item-icon{width:20px;height:20px}.sidebar-footer{border-top:1px solid var(--surface-border);padding:24px}.user-profile{align-items:center;gap:12px;display:flex}.avatar{background:var(--accent-gradient);color:#fff;border-radius:50%;justify-content:center;align-items:center;width:40px;height:40px;font-weight:600;display:flex}.user-info{flex-direction:column;display:flex}.user-name{font-size:14px;font-weight:600}.user-role{color:var(--text-secondary);font-size:12px}.top-navbar{border-bottom:1px solid var(--surface-border);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background:#0f172acc;justify-content:space-between;align-items:center;height:72px;padding:0 32px;display:flex}.search-bar{background:var(--surface-color);border:1px solid var(--surface-border);border-radius:8px;align-items:center;gap:12px;width:300px;padding:8px 16px;display:flex}.search-bar input{color:var(--text-primary);background:0 0;border:none;outline:none;width:100%;font-family:inherit}.search-bar input::placeholder{color:var(--text-secondary)}.nav-actions{align-items:center;gap:16px;display:flex}.icon-btn{cursor:pointer;width:40px;height:40px;color:var(--text-secondary);background:0 0;border:none;border-radius:50%;justify-content:center;align-items:center;transition:all .2s;display:flex}.icon-btn:hover{background:var(--surface-color);color:var(--text-primary)}
