:root{
  --zb-primary:#7c3aed;
  --zb-primary-dark:#5b21b6;
  --zb-accent:#a78bfa;
  --zb-cyan:#06b6d4;
  --zb-pink:#ec4899;
  --zb-green:#22c55e;
  --zb-orange:#f97316;
  --zb-bg:#f6f7fb;
  --zb-sidebar-bg:#0f0f12;
  --zb-sidebar-hover:#1c1c22;
  --zb-card-radius:18px;
  --zb-border:#e8e9ef;
  --zb-text:#1a1a1f;
  --zb-text2:#71717a;
}
*{font-family:'Inter',-apple-system,sans-serif;}
body{background:var(--zb-bg);color:var(--zb-text);overflow-x:hidden;margin:0;}
a{text-decoration:none;color:inherit;}

/* SIDEBAR */
.zb-sidebar{width:264px;min-height:100vh;background:var(--zb-sidebar-bg);position:fixed;left:0;top:0;z-index:1040;overflow-y:auto;transition:transform .3s;}
.zb-sidebar.collapsed{transform:translateX(-264px);}
.zb-sidebar::-webkit-scrollbar{width:4px;}
.zb-sidebar::-webkit-scrollbar-thumb{background:#333;border-radius:2px;}
.zb-brand{padding:22px 22px 18px;display:flex;align-items:center;gap:12px;border-bottom:1px solid rgba(255,255,255,.06);}
.zb-brand-icon{width:44px;height:44px;background:linear-gradient(135deg,var(--zb-primary),var(--zb-pink));border-radius:13px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.2rem;}
.zb-brand-text h1{margin:0;font-family:'Space Grotesk',sans-serif;font-size:1.2rem;font-weight:700;color:#fff;letter-spacing:-.5px;}
.zb-brand-text small{display:block;font-size:.62rem;color:rgba(255,255,255,.4);font-weight:600;letter-spacing:1.5px;margin-top:2px;}
.zb-nav-section{padding:18px 14px 6px;color:rgba(255,255,255,.32);font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:1.8px;}
.zb-nav-item{display:flex;align-items:center;gap:12px;padding:10px 18px;color:rgba(255,255,255,.65);font-size:.86rem;font-weight:500;border-radius:10px;margin:2px 10px;transition:all .15s;}
.zb-nav-item:hover{background:var(--zb-sidebar-hover);color:#fff;}
.zb-nav-item.active{background:linear-gradient(135deg,rgba(124,58,237,.22),rgba(236,72,153,.12));color:#fff;font-weight:600;}
.zb-nav-item i{width:20px;text-align:center;opacity:.85;}

/* CONTENT */
.zb-content{margin-left:264px;min-height:100vh;transition:margin .3s;}
.zb-content.expanded{margin-left:0;}
.zb-topbar{height:64px;background:#fff;border-bottom:1px solid var(--zb-border);display:flex;align-items:center;justify-content:space-between;padding:0 26px;position:sticky;top:0;z-index:1030;}
.zb-top-left{display:flex;align-items:center;gap:16px;}
.zb-toggle{background:none;border:none;font-size:1.15rem;color:#666;cursor:pointer;padding:8px;border-radius:8px;}
.zb-toggle:hover{background:#f3f3f6;}
.zb-top-title{font-size:1.1rem;font-weight:600;color:#1a1a1f;font-family:'Space Grotesk',sans-serif;}
.zb-top-right{display:flex;align-items:center;gap:14px;}
.zb-top-link{color:#666;padding:8px 10px;border-radius:8px;}
.zb-top-link:hover{background:#f3f3f6;color:var(--zb-primary);}
.zb-top-user{display:flex;align-items:center;gap:10px;padding:5px 8px 5px 5px;border-radius:14px;background:#f8f8fb;}
.zb-avatar{width:36px;height:36px;border-radius:11px;background:linear-gradient(135deg,var(--zb-primary),var(--zb-pink));color:#fff;font-weight:700;display:flex;align-items:center;justify-content:center;font-size:.85rem;}
.zb-uname{font-size:.84rem;font-weight:600;line-height:1.1;}
.zb-urole{font-size:.68rem;color:var(--zb-text2);}
.zb-logout{margin-left:6px;color:#999;padding:6px 10px;border-radius:8px;}
.zb-logout:hover{background:#fee;color:#e74c3c;}
.zb-page{padding:26px;}

/* CARDS */
.zb-card{background:#fff;border-radius:var(--zb-card-radius);border:1px solid var(--zb-border);overflow:hidden;margin-bottom:24px;}
.zb-card-header{padding:20px 24px;border-bottom:1px solid var(--zb-border);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;}
.zb-card-header h5{margin:0;font-weight:600;font-size:1rem;}
.zb-card-body{padding:24px;}

.zb-stat-card{background:#fff;border-radius:var(--zb-card-radius);border:1px solid var(--zb-border);padding:22px;display:flex;align-items:center;gap:16px;}
.zb-stat-icon{width:52px;height:52px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:1.3rem;}
.zb-stat-info h3{margin:0;font-family:'Space Grotesk',sans-serif;font-size:1.6rem;font-weight:700;color:#1a1a1f;}
.zb-stat-info p{margin:0;font-size:.78rem;color:var(--zb-text2);font-weight:500;text-transform:uppercase;letter-spacing:.5px;}
.zb-stat-trend{font-size:.72rem;font-weight:600;margin-top:2px;}
.zb-stat-trend.up{color:var(--zb-green);}
.zb-stat-trend.down{color:#e74c3c;}

/* BUTTONS */
.zb-btn{border-radius:10px;font-weight:600;font-size:.85rem;padding:9px 20px;transition:all .2s;border:none;cursor:pointer;display:inline-flex;align-items:center;gap:6px;}
.zb-btn-primary{background:var(--zb-primary);color:#fff;}
.zb-btn-primary:hover{background:var(--zb-primary-dark);}
.zb-btn-outline{background:transparent;color:var(--zb-text);border:1px solid var(--zb-border);}
.zb-btn-outline:hover{background:#f8f8fb;}
.zb-btn-danger{background:#fee;color:#e74c3c;}
.zb-btn-danger:hover{background:#e74c3c;color:#fff;}

/* TABLES */
.zb-table{width:100%;border-collapse:separate;border-spacing:0;}
.zb-table th{text-align:left;padding:12px 18px;background:#fafbfd;font-size:.72rem;color:var(--zb-text2);text-transform:uppercase;letter-spacing:.5px;font-weight:600;border-bottom:1px solid var(--zb-border);}
.zb-table td{padding:14px 18px;border-bottom:1px solid var(--zb-border);font-size:.88rem;vertical-align:middle;}
.zb-table tr:hover td{background:#fafbfd;}
.zb-table tr:last-child td{border-bottom:none;}

/* BADGES */
.zb-badge{display:inline-block;font-size:.7rem;font-weight:600;padding:3px 10px;border-radius:8px;}
.zb-badge-success{background:rgba(34,197,94,.12);color:#16a34a;}
.zb-badge-danger{background:rgba(239,68,68,.12);color:#dc2626;}
.zb-badge-warning{background:rgba(245,158,11,.12);color:#d97706;}
.zb-badge-info{background:rgba(59,130,246,.12);color:#2563eb;}
.zb-badge-purple{background:rgba(124,58,237,.12);color:var(--zb-primary);}
.zb-badge-gray{background:#f1f1f5;color:#71717a;}

/* FORM */
.zb-form-group{margin-bottom:18px;}
.zb-form-group label{display:block;font-size:.8rem;font-weight:600;margin-bottom:6px;color:#444;}
.zb-form-group input,.zb-form-group select,.zb-form-group textarea{width:100%;padding:10px 14px;border:1px solid var(--zb-border);border-radius:10px;font-size:.88rem;font-family:inherit;}
.zb-form-group input:focus,.zb-form-group select:focus,.zb-form-group textarea:focus{outline:none;border-color:var(--zb-primary);box-shadow:0 0 0 3px rgba(124,58,237,.12);}

/* LOGIN */
.zb-login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#0f0f12 0%,#1c1c22 50%,#0f0f12 100%);padding:24px;}
.zb-login-card{background:#fff;border-radius:24px;padding:42px 38px;width:100%;max-width:420px;box-shadow:0 30px 80px rgba(0,0,0,.4);}
.zb-login-card .zb-brand-icon{width:56px;height:56px;font-size:1.5rem;border-radius:16px;margin-bottom:18px;}
.zb-login-card h2{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:1.6rem;margin-bottom:6px;}
.zb-login-card .sub{color:var(--zb-text2);font-size:.88rem;margin-bottom:26px;}

@media(max-width:768px){
  .zb-sidebar{transform:translateX(-264px);}
  .zb-content{margin-left:0;}
  .zb-sidebar.show{transform:translateX(0);}
}