*,:after,:before{box-sizing:border-box;margin:0;padding:0}:root{--navy:#03062e;--navy-2:#0a0f3d;--cyan:#00c8f5;--white:#fff;--gray-50:#f8fafc;--gray-100:#f1f5f9;--gray-200:#e2e8f0;--gray-400:#94a3b8;--gray-500:#64748b;--gray-800:#1e293b;--sidebar-w:220px}body,html{height:100%;font-family:Inter,system-ui,-apple-system,sans-serif;font-size:14px}body{background:var(--gray-50);color:var(--gray-800)}a{color:inherit;text-decoration:none}::-webkit-scrollbar{width:4px;height:4px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:rgba(0,200,245,.3);border-radius:4px}.shell{height:100vh}.shell,.sidebar{display:flex;overflow:hidden}.sidebar{width:var(--sidebar-w);flex-shrink:0;background:var(--navy);flex-direction:column;height:100%}.sidebar-logo{padding:20px 20px 16px;border-bottom:1px solid hsla(0,0%,100%,.06)}.sidebar-logo-inner{display:flex;align-items:center;gap:10px}.sidebar-logo-mark{width:32px;height:32px;border-radius:8px;background:linear-gradient(135deg,#00c8f5,#9855cd);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;color:#fff;flex-shrink:0}.sidebar-logo-text{font-weight:700;font-size:15px;color:#fff;letter-spacing:-.2px}.sidebar-logo-sub{font-size:10px;color:hsla(0,0%,100%,.4);letter-spacing:.5px;text-transform:uppercase}.sidebar-nav{flex:1 1;overflow-y:auto;padding:12px 8px}.nav-section-label{font-size:10px;font-weight:600;color:hsla(0,0%,100%,.3);text-transform:uppercase;letter-spacing:.8px;padding:8px 12px 4px}.nav-item{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:8px;cursor:pointer;transition:background .12s;color:hsla(0,0%,100%,.6);font-size:13px;font-weight:500;border:none;background:transparent;width:100%;text-align:left;text-decoration:none}.nav-item:hover{background:hsla(0,0%,100%,.06);color:hsla(0,0%,100%,.85)}.nav-item.active{background:rgba(0,200,245,.12);color:var(--cyan)}.nav-item.active .nav-dot{background:var(--cyan)}.nav-dot{width:6px;height:6px;border-radius:50%;background:hsla(0,0%,100%,.2);flex-shrink:0}.sidebar-footer{padding:12px 8px 16px;border-top:1px solid hsla(0,0%,100%,.06)}.user-chip{gap:8px;padding:8px 12px;border-radius:8px;background:hsla(0,0%,100%,.04)}.user-avatar,.user-chip{display:flex;align-items:center}.user-avatar{width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,#00c8f5,#9855cd);justify-content:center;font-weight:700;font-size:11px;color:#fff;flex-shrink:0}.user-name{font-size:12px;font-weight:600;color:hsla(0,0%,100%,.8)}.user-role{font-size:10px;text-transform:capitalize}.logout-btn,.user-role{color:hsla(0,0%,100%,.35)}.logout-btn{display:flex;align-items:center;gap:8px;width:100%;padding:7px 12px;border-radius:8px;margin-top:4px;font-size:12px;cursor:pointer;border:none;background:transparent;transition:color .12s}.logout-btn:hover{color:hsla(0,0%,100%,.6)}.main{flex:1 1;overflow:hidden;display:flex;flex-direction:column}.topbar{height:52px;flex-shrink:0;background:#fff;border-bottom:1px solid var(--gray-200);display:flex;align-items:center;gap:12px;padding:0 24px}.topbar-title{font-size:15px;font-weight:700;color:var(--navy)}.topbar-sub{font-size:12px;color:var(--gray-400)}.content{flex:1 1;overflow-y:auto;padding:24px}.stat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));grid-gap:16px;gap:16px;margin-bottom:24px}.stat-card{background:#fff;border:1px solid var(--gray-200);border-radius:12px;padding:16px}.stat-card-label{font-size:11px;font-weight:600;color:var(--gray-400);text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px}.stat-card-value{font-size:24px;font-weight:700;color:var(--navy);line-height:1}.stat-card-sub{font-size:11px;color:var(--gray-400);margin-top:4px}.card{background:#fff;border:1px solid var(--gray-200);border-radius:12px;padding:20px;margin-bottom:16px}.card-title{font-size:13px;font-weight:700;color:var(--navy);margin-bottom:14px}.table-wrap{overflow-x:auto}table{width:100%;border-collapse:collapse;font-size:13px}th{text-align:left;font-size:11px;font-weight:600;color:var(--gray-400);text-transform:uppercase;letter-spacing:.5px;padding:8px 12px;border-bottom:1px solid var(--gray-200)}td{padding:10px 12px;border-bottom:1px solid var(--gray-100);color:var(--gray-800)}tr:last-child td{border-bottom:none}tr:hover td{background:var(--gray-50)}.badge{display:inline-flex;align-items:center;padding:2px 8px;border-radius:20px;font-size:11px;font-weight:600}.badge-green{background:#d1fae5;color:#065f46}.badge-red{background:#fee2e2;color:#991b1b}.badge-yellow{background:#fef3c7;color:#92400e}.badge-blue{background:#dbeafe;color:#1e40af}.badge-purple{background:#ede9fe;color:#5b21b6}.badge-gray{background:#f1f5f9;color:#475569}.btn-primary{background:var(--cyan);color:var(--navy);font-weight:700;font-size:13px;padding:8px 18px;border-radius:8px;border:none;cursor:pointer;transition:opacity .12s}.btn-primary:hover{opacity:.88}.btn-ghost{background:transparent;color:var(--gray-500);font-size:13px;font-weight:500;padding:8px 14px;border-radius:8px;border:1px solid var(--gray-200);cursor:pointer;transition:background .12s}.btn-ghost:hover{background:var(--gray-50)}.login-wrap{min-height:100vh;background:var(--navy);display:flex;align-items:center;justify-content:center;padding:24px}.login-card{background:#fff;border-radius:16px;padding:40px;width:100%;max-width:400px;box-shadow:0 24px 64px rgba(3,6,46,.4)}.login-logo{margin-bottom:28px}.login-squareme-logo{height:22px;width:auto;display:block;margin-bottom:20px}.login-divider{height:1px;background:var(--gray-200);margin-bottom:20px}.login-product-row{display:flex;align-items:center;gap:14px}.login-logo-mark{width:44px;height:44px;border-radius:12px;flex-shrink:0;background:linear-gradient(135deg,#00c8f5,#9855cd);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:18px;color:#fff}.login-title{font-size:22px;font-weight:800;color:var(--navy);margin-bottom:2px;line-height:1}.login-sub{font-size:13px;color:var(--gray-400)}.form-label{display:block;font-size:12px;font-weight:600;color:var(--gray-500);margin-bottom:6px}.form-input{width:100%;padding:11px 14px;border:1.5px solid var(--gray-200);border-radius:8px;font-size:14px;color:var(--navy);outline:none;transition:border-color .12s}.form-input:focus{border-color:var(--cyan)}.form-input::placeholder{color:var(--gray-400)}.form-submit{width:100%;padding:13px;border-radius:8px;border:none;background:var(--navy);color:#fff;font-weight:700;font-size:15px;cursor:pointer;transition:opacity .12s;margin-top:4px}.form-submit:hover:not(:disabled){opacity:.88}.form-submit:disabled{opacity:.5;cursor:not-allowed}.form-error{font-size:13px;color:#dc2626;margin-top:8px}.form-success{background:#f0fdf4;border:1px solid #bbf7d0;border-radius:10px;padding:16px;text-align:center}.form-success-title{font-weight:700;color:#166534;margin-bottom:4px}.form-success-sub{font-size:13px;color:#4ade80;color:#15803d}.empty{display:flex;flex-direction:column;align-items:center;justify-content:center;height:240px;color:var(--gray-400);gap:8px}.empty-icon{font-size:32px}.empty-text{font-size:14px;font-weight:500}.loading{display:flex;align-items:center;justify-content:center;height:160px;color:var(--gray-400);font-size:13px}@media (max-width:768px){:root{--sidebar-w:60px}.logout-btn span,.nav-item span,.nav-section-label,.sidebar-logo-sub,.sidebar-logo-text,.user-name,.user-role{display:none}.sidebar-logo{padding:16px 12px}.nav-item{padding:10px}.nav-item,.user-chip{justify-content:center}}