* { box-sizing: border-box; }
:root {
    --bg:#070d19; --side:#08111f; --panel:#101827; --panel-2:#121c2e;
    --line:#1f2a3d; --text:#f8fafc; --muted:#94a3b8; --soft:#cbd5e1;
    --primary:#7c3aed; --primary-2:#2563eb; --green:#22c55e; --orange:#f97316; --danger:#ef4444;
}
body { margin:0; font-family: Arial, Helvetica, sans-serif; background:var(--bg); color:var(--text); }
a { color:inherit; }
input,select,textarea { width:100%; border:1px solid var(--line); border-radius:12px; padding:0 12px; min-height:42px; background:#0b1322; color:var(--text); outline:none; font:inherit; }
textarea { padding:12px; min-height:88px; resize:vertical; }
button,.btn { min-height:40px; border:0; border-radius:12px; background:linear-gradient(135deg,var(--primary),var(--primary-2)); color:#fff; font-weight:900; padding:0 16px; cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; justify-content:center; gap:8px; }
.btn-ghost { background:#111827; border:1px solid var(--line); color:var(--soft); }
.btn-danger { background:#2a1218; color:#fecdd3; border:1px solid #7f1d1d; }
.mini-btn { min-height:30px; padding:0 10px; border-radius:9px; font-size:12px; }
.login-body { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px; }
.login-card { width:100%; max-width:420px; background:var(--panel); border:1px solid var(--line); border-radius:22px; padding:32px; box-shadow:0 24px 70px rgba(0,0,0,.35); }
.brand-badge { width:54px; height:54px; border-radius:16px; background:var(--primary); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:900; margin-bottom:16px; }
h1,h2,h3,p { margin-top:0; }
.muted,p { color:var(--muted); }
.hub-shell { min-height:100vh; display:grid; grid-template-columns:270px minmax(0,1fr); }
.hub-sidebar { background:var(--side); color:var(--soft); padding:24px 18px; border-right:1px solid var(--line); }
.hub-brand { display:flex; gap:12px; align-items:center; padding:8px 8px 28px; }
.hub-brand:before { content:"S"; width:42px; height:42px; border-radius:12px; background:linear-gradient(135deg,var(--primary),#a855f7); display:flex; align-items:center; justify-content:center; color:#fff; font-size:24px; font-weight:900; }
.hub-brand strong { display:block; font-size:24px; color:#fff; letter-spacing:.02em; }
.hub-brand strong span { color:#a855f7; }
.hub-brand > span { display:block; font-size:12px; color:var(--muted); }
.hub-sidebar nav { display:grid; gap:5px; }
.menu-title { margin:18px 10px 8px; color:#64748b; font-size:11px; font-weight:900; text-transform:uppercase; letter-spacing:.08em; }
.hub-sidebar a { text-decoration:none; padding:12px 13px; border-radius:12px; color:#cbd5e1; font-weight:800; font-size:14px; display:flex; justify-content:space-between; align-items:center; }
.hub-sidebar a.active,.hub-sidebar a:hover { background:linear-gradient(135deg,#6d28d9,#4f46e5); color:#fff; }
.hub-main { min-width:0; }
.hub-topbar { min-height:92px; padding:24px 34px; display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.hub-topbar h1 { margin:0; font-size:28px; }
.hub-topbar p { margin:8px 0 0; font-size:15px; }
.hub-user { min-width:180px; height:58px; border:1px solid var(--line); background:#0b1322; border-radius:14px; display:flex; align-items:center; gap:12px; padding:0 14px; }
.hub-user:before { content:"A"; width:38px; height:38px; border-radius:50%; background:var(--primary); display:flex; align-items:center; justify-content:center; font-weight:900; }
.hub-user small { display:block; color:var(--muted); margin-top:2px; }
.hub-content { padding:0 34px 34px; display:grid; gap:18px; }
.hub-card,.metric,.dashboard-panel { background:rgba(16,24,39,.92); border:1px solid var(--line); border-radius:18px; box-shadow:0 20px 50px rgba(0,0,0,.18); }
.hub-card { padding:20px; }
.metric-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; }
.metric { padding:22px; display:flex; align-items:center; gap:16px; min-height:130px; }
.metric-icon { width:48px; height:48px; border-radius:14px; display:flex; align-items:center; justify-content:center; font-weight:900; background:var(--primary); }
.metric span { display:block; color:var(--muted); font-size:14px; }
.metric strong { display:block; margin-top:8px; font-size:28px; }
.metric small { display:block; margin-top:10px; color:var(--green); }
.hub-form { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.hub-form.one { grid-template-columns:1fr; }
.hub-form textarea,.hub-form button,.hub-form .full { grid-column:span 2; }
.quick-form { display:grid; grid-template-columns:150px minmax(220px,1fr) 140px 150px 130px auto; gap:10px; align-items:end; }
.grid,.two-col,.dashboard-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.dashboard-grid { grid-template-columns:1.15fr .85fr; }
.chart-card { min-height:330px; padding:22px; }
.fake-chart { height:230px; margin-top:18px; border-left:1px solid var(--line); border-bottom:1px solid var(--line); background:linear-gradient(180deg,rgba(124,58,237,.18),rgba(124,58,237,.02)); border-radius:10px; position:relative; overflow:hidden; }
.fake-chart:before { content:""; position:absolute; inset:35px 20px 50px; background:linear-gradient(135deg,transparent 0 20%,#7c3aed 21% 23%,transparent 24% 40%,#7c3aed 41% 43%,transparent 44% 62%,#7c3aed 63% 65%,transparent 66%); opacity:.9; }
.product-row,.activity-row { display:grid; grid-template-columns:48px 1fr auto; gap:12px; align-items:center; padding:14px 0; border-bottom:1px solid var(--line); }
.product-row:last-child,.activity-row:last-child { border-bottom:0; }
.product-icon { width:44px; height:44px; border-radius:12px; background:var(--primary); display:flex; align-items:center; justify-content:center; font-weight:900; }
.product-tabs { display:flex; gap:10px; flex-wrap:wrap; border-bottom:1px solid var(--line); padding-bottom:12px; margin-bottom:14px; }
.product-tabs button { background:#0b1322; border:1px solid var(--line); color:var(--soft); }
.product-tabs button.active { background:linear-gradient(135deg,var(--primary),var(--primary-2)); color:#fff; border-color:transparent; }
.product-dashboard { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.hidden-product { display:none; }
.product-kpi { background:#0b1322; border:1px solid var(--line); border-radius:14px; padding:16px; }
.product-kpi span { display:block; color:var(--muted); font-size:12px; font-weight:900; text-transform:uppercase; }
.product-kpi strong { display:block; margin-top:8px; font-size:25px; color:#fff; }
.product-kpi small { display:block; margin-top:8px; color:var(--green); }
.kanban { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px; }
.kanban-col { background:#0b1322; border:1px solid var(--line); border-radius:14px; min-height:280px; overflow:hidden; }
.kanban-col header { height:42px; display:flex; align-items:center; justify-content:space-between; padding:0 12px; font-size:12px; font-weight:900; background:#111827; }
.kanban-col b { background:#1f2937; border-radius:999px; min-width:22px; height:22px; display:flex; align-items:center; justify-content:center; }
.lead-card { margin:10px; padding:12px; border:1px solid var(--line); border-radius:12px; background:#101827; display:grid; gap:5px; }
.lead-card strong { font-size:14px; }
.lead-card span,.lead-card small { color:var(--muted); }
.empty { padding:18px; text-align:center; font-size:13px; color:var(--muted); }
.table-wrap { overflow:auto; }
table { width:100%; border-collapse:collapse; }
th,td { padding:12px; border-bottom:1px solid var(--line); text-align:left; font-size:13px; }
th { color:var(--muted); text-transform:uppercase; font-size:11px; }
.pill { display:inline-flex; padding:5px 9px; border-radius:999px; background:#1f2937; color:#c4b5fd; font-weight:900; font-size:12px; }
.actions { display:flex; gap:7px; flex-wrap:wrap; }
.alert { padding:14px 16px; border-radius:14px; font-weight:800; }
.alert-success { background:#052e20; color:#86efac; }
.alert-danger { background:#3b0a0a; color:#fecaca; }
.modal-backdrop { position:fixed; inset:0; background:rgba(0,0,0,.62); display:none; align-items:center; justify-content:center; padding:24px; z-index:99; }
.modal-backdrop.active { display:flex; }
.modal { width:min(820px,100%); max-height:90vh; overflow:auto; background:var(--panel); border:1px solid var(--line); border-radius:20px; padding:22px; }
.modal-head { display:flex; justify-content:space-between; gap:12px; margin-bottom:14px; }
.close-x { background:#111827; border:1px solid var(--line); width:38px; height:38px; min-height:38px; padding:0; }
@media(max-width:1150px){ .hub-shell{grid-template-columns:1fr}.hub-sidebar{position:static}.metric-grid,.grid,.two-col,.dashboard-grid,.kanban,.hub-form,.quick-form,.product-dashboard{grid-template-columns:1fr}.hub-form textarea,.hub-form button,.hub-form .full{grid-column:auto} }