:root{--bg-primary: #030712;--bg-secondary: #0f172a;--bg-card: rgba(15, 23, 42, .8);--bg-card-hover: rgba(30, 41, 59, .9);--border: rgba(148, 163, 184, .12);--border-hover: rgba(148, 163, 184, .25);--text-primary: #f1f5f9;--text-secondary: rgba(148, 163, 184, .85);--text-muted: rgba(100, 116, 139, .7);--accent-blue: #3b82f6;--accent-cyan: #06b6d4;--accent-emerald: #10b981;--accent-amber: #f59e0b;--accent-rose: #f43f5e;--gradient-blue: linear-gradient(135deg, #3b82f6, #06b6d4);--gradient-emerald: linear-gradient(135deg, #10b981, #06b6d4);--gradient-amber: linear-gradient(135deg, #f59e0b, #ef4444);--radius: 12px;--radius-lg: 16px;--shadow-card: 0 4px 24px rgba(0, 0, 0, .3);--transition: .2s cubic-bezier(.4, 0, .2, 1);font-family:Inter,system-ui,-apple-system,sans-serif}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}body{background:var(--bg-primary);color:var(--text-primary);min-height:100vh;-webkit-font-smoothing:antialiased}a{color:var(--accent-blue);text-decoration:none}a:hover{text-decoration:underline}.admin-layout{display:grid;grid-template-columns:260px 1fr;min-height:100vh}.sidebar{background:var(--bg-secondary);border-right:1px solid var(--border);padding:24px 16px;display:flex;flex-direction:column;gap:8px;position:sticky;top:0;height:100vh;overflow-y:auto}.sidebar-brand{display:flex;align-items:center;gap:12px;padding:8px 12px;margin-bottom:24px}.sidebar-brand h1{font-size:18px;font-weight:700;background:var(--gradient-blue);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.sidebar-brand .badge{font-size:10px;padding:2px 8px;border-radius:999px;background:#3b82f626;color:var(--accent-blue);font-weight:600;letter-spacing:.5px;text-transform:uppercase}.nav-link{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:var(--radius);color:var(--text-secondary);font-size:14px;font-weight:500;transition:all var(--transition);text-decoration:none}.nav-link:hover{background:#3b82f614;color:var(--text-primary);text-decoration:none}.nav-link.active{background:#3b82f61f;color:var(--accent-blue)}.nav-link svg{width:20px;height:20px;opacity:.6}.nav-link.active svg,.nav-link:hover svg{opacity:1}.main-content{padding:32px 40px;overflow-y:auto;max-width:1400px}.page-header{margin-bottom:32px}.page-header h2{font-size:28px;font-weight:700;margin-bottom:8px}.page-header p{color:var(--text-secondary);font-size:15px}.card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:24px;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:var(--shadow-card);transition:all var(--transition)}.card:hover{border-color:var(--border-hover)}.metrics-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px;margin-bottom:32px}.metric-card{position:relative;overflow:hidden}.metric-card:before{content:"";position:absolute;top:0;left:0;right:0;height:3px;border-radius:var(--radius-lg) var(--radius-lg) 0 0}.metric-card.blue:before{background:var(--gradient-blue)}.metric-card.green:before{background:var(--gradient-emerald)}.metric-card.amber:before{background:var(--gradient-amber)}.metric-card.rose:before{background:linear-gradient(135deg,var(--accent-rose),#e11d48)}.metric-card .label{font-size:13px;color:var(--text-secondary);margin-bottom:8px;display:flex;align-items:center;gap:8px}.metric-card .value{font-size:32px;font-weight:700;line-height:1.1;margin-bottom:6px}.metric-card .trend{font-size:13px;display:flex;align-items:center;gap:4px}.metric-card .trend.up{color:var(--accent-emerald)}.metric-card .trend.down{color:var(--accent-rose)}.data-table{width:100%;border-collapse:collapse}.data-table th{text-align:left;padding:12px 16px;font-size:12px;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px;border-bottom:1px solid var(--border)}.data-table td{padding:14px 16px;font-size:14px;border-bottom:1px solid var(--border)}.data-table tr:hover td{background:#3b82f60a}.badge{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;font-size:12px;font-weight:600}.badge.active{background:#10b9811f;color:var(--accent-emerald)}.badge.suspended{background:#f59e0b1f;color:var(--accent-amber)}.badge.cancelled{background:#f43f5e1f;color:var(--accent-rose)}.badge.free{background:#94a3b81f;color:var(--text-secondary)}.badge:before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 20px;border-radius:var(--radius);font-size:14px;font-weight:600;cursor:pointer;border:none;transition:all var(--transition)}.btn-primary{background:var(--accent-blue);color:#fff}.btn-primary:hover{background:#2563eb;transform:translateY(-1px);box-shadow:0 4px 12px #3b82f64d}.btn-ghost{background:transparent;color:var(--text-secondary);border:1px solid var(--border)}.btn-ghost:hover{background:#3b82f614;border-color:var(--border-hover);color:var(--text-primary)}.btn-danger{background:#f43f5e1f;color:var(--accent-rose);border:1px solid rgba(244,63,94,.2)}.btn-danger:hover{background:#f43f5e33}.chart-card{padding:24px}.chart-card h3{font-size:16px;font-weight:600;margin-bottom:20px}.charts-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(400px,1fr));gap:20px;margin-bottom:32px}.search-bar{display:flex;align-items:center;gap:12px;margin-bottom:24px}.search-input{flex:1;padding:10px 16px;background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius);color:var(--text-primary);font-size:14px;outline:none;transition:border-color var(--transition)}.search-input:focus{border-color:var(--accent-blue)}.search-input::placeholder{color:var(--text-muted)}.spinner{width:32px;height:32px;border:3px solid var(--border);border-top-color:var(--accent-blue);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.loading-center{display:flex;justify-content:center;align-items:center;min-height:200px}.empty-state{text-align:center;padding:60px 20px;color:var(--text-secondary)}.empty-state svg{width:48px;height:48px;opacity:.3;margin-bottom:16px}@media(max-width:768px){.admin-layout{grid-template-columns:1fr}.sidebar{position:relative;height:auto;flex-direction:row;overflow-x:auto;padding:12px}.main-content{padding:20px}.metrics-grid{grid-template-columns:1fr 1fr}.charts-grid{grid-template-columns:1fr}}
