*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--bg:#f0f2f5;--surface:#fff;--surface2:#f4f6fa;--border:#e2e6f0;--text:#1e2235;--muted:#6b7280;--accent:#5b5ef4;--danger:#ef4444;--success:#22c55e;--warning:#f59e0b;--radius:10px;--sidebar-w:255px;--sb-bg:#1a1d2e;--sb-border:#ffffff0f;--sb-text:#ffffff8c;--sb-text-hover:#ffffffe6;--sb-text-muted:#ffffff4d;--sb-active-bg:#5b5ef440;--sb-hover-bg:#ffffff0d;--sb-sep:#ffffff12;--sb-header-bg:#ffffff0a}[data-theme=dark]{--bg:#0f1117;--surface:#1a1d2e;--surface2:#1e2235;--border:#2a2f45;--text:#e2e8f0;--muted:#94a3b8;--sb-bg:#111827;--sb-border:#ffffff0d;--sb-text:#ffffff80;--sb-text-hover:#ffffffd9;--sb-text-muted:#ffffff40;--sb-active-bg:#5b5ef44d;--sb-hover-bg:#ffffff0a;--sb-sep:#ffffff0f;--sb-header-bg:#ffffff08}body{background:var(--bg);color:var(--text);font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;font-size:14px;line-height:1.6;transition:background .25s,color .25s}.layout{min-height:100vh;display:flex}.main-content{margin-left:var(--sidebar-w);flex:1;min-height:100vh;padding:28px 32px;transition:background .25s}.page-header{margin-bottom:22px}.page-header h1{color:var(--text);font-size:21px;font-weight:700}.page-header p{color:var(--muted);margin-top:3px;font-size:13px}.sidebar{width:var(--sidebar-w);background:var(--sb-bg);z-index:200;flex-direction:column;height:100vh;transition:background .25s;display:flex;position:fixed;top:0;left:0;box-shadow:2px 0 20px #0003}.sidebar-logo{border-bottom:1px solid var(--sb-border);cursor:pointer;flex-shrink:0;align-items:center;gap:11px;padding:20px 16px;display:flex}.sidebar-logo__icon{color:#fff;background:linear-gradient(135deg,#5b5ef4,#7c7ff5);border-radius:9px;flex-shrink:0;justify-content:center;align-items:center;width:36px;height:36px;display:flex;box-shadow:0 3px 10px #5b5ef466}.sidebar-logo__title{color:#fff;font-size:15px;font-weight:800;line-height:1.2;display:block}.sidebar-logo__sub{color:var(--sb-text-muted);margin-top:1px;font-size:10px;display:block}.sidebar-user{border-bottom:1px solid var(--sb-border);flex-shrink:0;align-items:center;gap:10px;padding:10px 16px;display:flex}.sidebar-user__avatar{color:#a5b4fc;background:#5b5ef440;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:30px;height:30px;display:flex}.sidebar-user__info{flex:1;min-width:0}.sidebar-user__name{color:#ffffffd9;white-space:nowrap;text-overflow:ellipsis;font-size:12.5px;font-weight:600;display:block;overflow:hidden}.sidebar-user__role{color:var(--sb-text-muted);font-size:10.5px;display:block}.sidebar-logout{color:#ef4444b3;cursor:pointer;background:0 0;border:1px solid #ef444440;border-radius:8px;align-items:center;gap:9px;width:100%;margin-top:6px;padding:8px 12px;font-size:13px;transition:all .2s;display:flex}.sidebar-logout:hover{color:#ef4444;background:#ef44441a;border-color:#ef444480}.snav-home{border:none;border-bottom:1px solid var(--sb-border);width:100%;color:var(--sb-text);cursor:pointer;background:0 0;flex-shrink:0;align-items:center;gap:9px;padding:10px 16px;font-size:13px;transition:color .15s,background .15s;display:flex}.snav-home:hover{color:var(--sb-text-hover);background:var(--sb-hover-bg)}.sidebar-nav{scrollbar-width:thin;scrollbar-color:#ffffff1a transparent;flex:1;padding:6px 0 12px;overflow-y:auto}.sidebar-nav::-webkit-scrollbar{width:3px}.sidebar-nav::-webkit-scrollbar-thumb{background:#ffffff1a;border-radius:3px}.snav-section{border-bottom:1px solid var(--sb-sep)}.snav-header{cursor:pointer;width:100%;color:var(--sb-text);background:0 0;border:none;justify-content:space-between;align-items:center;padding:10px 16px;font-size:12.5px;font-weight:500;transition:color .15s,background .15s;display:flex}.snav-header:hover,.snav-header.open{color:var(--sb-text-hover);background:var(--sb-header-bg)}.snav-header.has-active{color:#a5b4fce6}.snav-header__left{align-items:center;gap:9px;display:flex}.snav-header__icon{opacity:.7;flex-shrink:0}.snav-header.open .snav-header__icon,.snav-header.has-active .snav-header__icon{opacity:1}.snav-chevron{opacity:.5;flex-shrink:0;transition:transform .2s}.snav-header.open .snav-chevron{opacity:.8;transform:rotate(180deg)}.snav-items{background:#0000001a;padding:2px 0 6px}.snav-item{text-align:left;width:100%;color:var(--sb-text);cursor:pointer;background:0 0;border:none;padding:6px 16px 6px 40px;font-size:12.5px;line-height:1.4;transition:color .12s,background .12s;display:block}.snav-item:hover{color:var(--sb-text-hover);background:var(--sb-hover-bg)}.snav-item.active{color:#a5b4fc;background:var(--sb-active-bg);font-weight:600}.snav-sep{background:var(--sb-sep);height:1px;margin:4px 16px}.sidebar-footer{border-top:1px solid var(--sb-border);flex-shrink:0;padding:12px 16px}.theme-toggle{background:var(--sb-hover-bg);border:1px solid var(--sb-border);width:100%;color:var(--sb-text);cursor:pointer;border-radius:8px;align-items:center;gap:9px;padding:9px 12px;font-size:13px;transition:all .2s;display:flex}.theme-toggle:hover{color:var(--sb-text-hover);background:#ffffff14;border-color:#ffffff26}.dash-grid{grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:20px;display:grid}.dash-card{background:var(--surface);border-radius:var(--radius);border:1px solid var(--border);border-top-width:4px;flex-direction:column;transition:box-shadow .2s,background .25s;display:flex;overflow:hidden;box-shadow:0 1px 4px #0000000d}.dash-card:hover{box-shadow:0 4px 16px #00000017}.dash-card--purple{border-top-color:#7c3aed}.dash-card--blue{border-top-color:#2563eb}.dash-card--orange{border-top-color:#ea580c}.dash-card--red{border-top-color:#dc2626}.dash-card--green{border-top-color:#16a34a}.dash-card--teal{border-top-color:#0891b2}.dash-card__top{align-items:center;gap:12px;padding:14px 14px 6px;display:flex}.dash-card__icon{border-radius:8px;flex-shrink:0;justify-content:center;align-items:center;width:42px;height:42px;display:flex}.dash-icon--purple{color:#7c3aed;background:#7c3aed1a}.dash-icon--blue{color:#2563eb;background:#2563eb1a}.dash-icon--orange{color:#ea580c;background:#ea580c1a}.dash-icon--red{color:#dc2626;background:#dc26261a}.dash-icon--green{color:#16a34a;background:#16a34a1a}.dash-icon--teal{color:#0891b2;background:#0891b21a}.dash-card__meta{flex:1}.dash-card__label{text-transform:uppercase;letter-spacing:.07em;color:var(--muted);font-size:11px;font-weight:700}.dash-card__eye{cursor:pointer;color:var(--muted);background:0 0;border:none;border-radius:5px;align-items:center;padding:4px;transition:color .15s;display:flex}.dash-card__eye:hover{color:var(--text)}.dash-card__value{color:var(--text);padding:2px 14px 10px;font-size:34px;font-weight:800;line-height:1}.dash-card__btn{cursor:pointer;color:#fff;background:#06b6d4;border:none;justify-content:center;align-items:center;gap:6px;width:100%;margin-top:auto;padding:9px;font-size:12px;font-weight:600;transition:background .15s;display:flex}.dash-card__btn:hover{background:#0891b2}.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:18px;transition:background .25s}.toolbar{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;margin-bottom:14px;display:flex}.search-wrap{position:relative}.search-wrap input{background:var(--surface2);border:1px solid var(--border);color:var(--text);border-radius:7px;width:220px;padding:7px 12px 7px 34px;font-size:13px}.search-wrap svg{color:var(--muted);position:absolute;top:50%;left:10px;transform:translateY(-50%)}.search-wrap input::placeholder{color:var(--muted)}.search-wrap input:focus{border-color:var(--accent);outline:none}.btn{cursor:pointer;border:none;border-radius:7px;align-items:center;gap:6px;padding:7px 14px;font-size:13px;font-weight:500;transition:all .15s;display:inline-flex}.btn-primary{background:var(--accent);color:#fff}.btn-primary:hover{background:#4b4edb}.btn-success{background:var(--success);color:#fff}.btn-success:hover{background:#16a34a}.btn-danger{border:1px solid var(--danger);color:var(--danger);background:0 0}.btn-danger:hover{background:var(--danger);color:#fff}.btn-ghost{background:var(--surface2);color:var(--text);border:1px solid var(--border)}.btn-ghost:hover{border-color:var(--accent);color:var(--accent)}.btn-sm{padding:4px 10px;font-size:12px}.table-wrap{overflow-x:auto}table{border-collapse:collapse;width:100%}th{text-transform:uppercase;letter-spacing:.06em;color:var(--muted);text-align:left;border-bottom:1px solid var(--border);background:var(--surface2);padding:9px 12px;font-size:11px}td{border-bottom:1px solid var(--border);color:var(--text);padding:11px 12px;font-size:13.5px}tr:last-child td{border-bottom:none}tr:hover td{background:var(--surface2)}.actions{gap:6px;display:flex}.badge{border-radius:20px;padding:2px 9px;font-size:11px;font-weight:600;display:inline-block}.badge-active{color:#16a34a;background:#22c55e1f}.badge-expired{color:#dc2626;background:#ef44441f}.badge-pending{color:#d97706;background:#f59e0b1f}.badge-paid{color:#0284c7;background:#0ea5e91f}.modal-overlay{-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);z-index:9999;background:#0f111780;justify-content:center;align-items:center;padding:16px;display:flex;position:fixed;inset:0}.modal{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);width:100%;max-width:520px;max-height:90vh;padding:22px;overflow-y:auto;box-shadow:0 20px 60px #00000040}.modal-header{justify-content:space-between;align-items:center;margin-bottom:18px;display:flex}.modal-header h3{color:var(--text);font-size:16px;font-weight:700}.modal-close{color:var(--muted);cursor:pointer;background:0 0;border:none;font-size:20px;line-height:1}.modal-close:hover{color:var(--text)}.form-grid{grid-template-columns:1fr 1fr;gap:14px;display:grid}.form-grid.single{grid-template-columns:1fr}.form-group{flex-direction:column;gap:5px;display:flex}.form-group.full{grid-column:1/-1}label{color:var(--muted);font-size:12px;font-weight:500}input,select,textarea{background:var(--surface2);border:1px solid var(--border);color:var(--text);border-radius:7px;width:100%;padding:8px 12px;font-size:13px;transition:border-color .15s,background .25s}input:focus,select:focus,textarea:focus{border-color:var(--accent);outline:none}input::placeholder,textarea::placeholder{color:var(--muted)}select option{background:var(--surface);color:var(--text)}textarea{resize:vertical;min-height:80px;font-family:inherit}.modal-footer{justify-content:flex-end;gap:8px;margin-top:18px;display:flex}.dashboard-grid{grid-template-columns:1fr 1fr;gap:16px;margin-top:16px;display:grid}.recent-list{list-style:none}.recent-item{border-bottom:1px solid var(--border);color:var(--text);justify-content:space-between;padding:9px 0;font-size:13px;display:flex}.recent-item:last-child{border-bottom:none}.card-title{color:var(--text);margin-bottom:12px;font-size:14px;font-weight:600}.login-page{background:var(--bg);justify-content:center;align-items:center;min-height:100vh;padding:16px;display:flex}.login-card{background:var(--surface);border:1px solid var(--border);border-radius:14px;width:100%;max-width:380px;padding:40px 36px;box-shadow:0 8px 40px #0000001a}.login-logo{text-align:center;margin-bottom:28px}.login-logo__icon{color:#fff;background:linear-gradient(135deg,#5b5ef4,#7c7ff5);border-radius:14px;justify-content:center;align-items:center;width:56px;height:56px;margin:0 auto 12px;display:flex;box-shadow:0 4px 16px #5b5ef459}.login-logo h1{color:var(--text);font-size:22px;font-weight:800}.login-logo p{color:var(--muted);margin-top:4px;font-size:13px}.login-form{flex-direction:column;gap:14px;display:flex}.login-btn{justify-content:center;width:100%;margin-top:4px;padding:10px;font-size:14px}.perm-grid{grid-template-columns:1fr 1fr;gap:8px;display:grid}.perm-item{border:1px solid var(--border);cursor:pointer;color:var(--text);border-radius:7px;align-items:center;gap:8px;padding:8px 12px;font-size:13px;transition:all .15s;display:flex}.perm-item input{width:auto}.perm-item.checked{border-color:var(--accent);color:var(--accent);background:#5b5ef414;font-weight:500}.erp-sync-card{border:1px solid var(--border);background:var(--surface2);border-radius:8px;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;padding:12px 16px;display:flex}.erp-sync-card__info{flex:1;align-items:center;gap:10px;display:flex}.erp-sync-card__info strong{color:var(--text);font-size:13px;display:block}.erp-sync-card__info span{color:var(--muted);font-size:11px;display:block}@keyframes spin{to{transform:rotate(360deg)}}.spin{animation:1s linear infinite spin}.stub-empty{color:var(--muted);text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:12px;padding:64px 24px;display:flex}.stub-empty p{color:var(--text);font-size:15px;font-weight:500}.stub-empty span{font-size:13px}.empty{text-align:center;color:var(--muted);padding:48px}.error-bar{border:1px solid var(--danger);color:var(--danger);background:#ef44441a;border-radius:7px;margin-bottom:12px;padding:9px 14px;font-size:13px}.muted{color:var(--muted)}@media (width<=1200px){.dash-grid{grid-template-columns:repeat(2,1fr)}}@media (width<=900px){:root{--sidebar-w:220px}.main-content{padding:16px 18px}}@media (width<=768px){.dash-grid,.dashboard-grid,.form-grid{grid-template-columns:1fr}}