*{box-sizing:border-box;margin:0;padding:0}body{color:#0f172a;background:linear-gradient(135deg,#e0f2fe,#fff,#f0f9ff);font-family:Segoe UI,Arial,sans-serif}a{text-decoration:none}.dashboard-layout{min-height:100vh;display:flex}.main-content{flex:1;padding:28px}.sidebar{background:linear-gradient(#38bdf8,#0ea5e9);flex-direction:column;gap:28px;width:270px;min-height:100vh;padding:28px 20px;display:flex;box-shadow:4px 0 20px #0ea5e926}.sidebar-brand{align-items:center;gap:14px;display:flex}.brand-logo{color:#0ea5e9;background:#fff;border-radius:16px;justify-content:center;align-items:center;width:52px;height:52px;font-size:26px;font-weight:700;display:flex;box-shadow:0 8px 20px #ffffff80}.sidebar-brand h2{color:#fff;font-size:20px}.sidebar-brand p{color:#e0f2fe;font-size:13px}.sidebar-menu{flex-direction:column;gap:14px;display:flex}.menu-item{color:#fff;background:#ffffff1f;border-radius:14px;padding:14px 16px;font-weight:600;transition:all .3s}.menu-item:hover,.menu-item.active{color:#0284c7;background:#fff;transform:translate(4px)}.topbar{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffffbf;border:1px solid #dbeafe;border-radius:22px;justify-content:space-between;align-items:center;margin-bottom:28px;padding:20px 24px;display:flex;box-shadow:0 12px 30px #38bdf814}.topbar h1{color:#0369a1;font-size:28px}.topbar p{color:#64748b;font-size:14px}.admin-box{background:#fff;border-radius:16px;align-items:center;gap:12px;padding:10px 16px;display:flex;box-shadow:0 8px 18px #38bdf81f}.admin-avatar{color:#fff;background:linear-gradient(135deg,#38bdf8,#0ea5e9);border-radius:50%;justify-content:center;align-items:center;width:42px;height:42px;font-weight:700;display:flex}.admin-box h4{font-size:14px}.admin-box span{color:#64748b;font-size:12px}.hero-card{background:linear-gradient(135deg,#38bdf8,#7dd3fc);border-radius:28px;justify-content:space-between;align-items:center;margin-bottom:28px;padding:32px;display:flex;box-shadow:0 20px 40px #38bdf82e}.hero-text h2{color:#fff;margin-bottom:10px;font-size:30px}.hero-text p{color:#f8fafc;font-size:15px}.stats-grid{grid-template-columns:repeat(4,1fr);gap:20px;display:grid}.stat-card{background:#fff;border:1px solid #e0f2fe;border-radius:20px;align-items:center;gap:14px;padding:20px;transition:all .3s;display:flex;box-shadow:0 10px 25px #38bdf814}.stat-card:hover{transform:translateY(-4px)}.stat-icon{background:linear-gradient(135deg,#e0f2fe,#bae6fd);border-radius:16px;justify-content:center;align-items:center;width:52px;height:52px;font-size:22px;display:flex}.stat-card p{color:#64748b;font-size:13px}.stat-card h3{font-size:20px}.logout-btn{color:#fff;cursor:pointer;background:linear-gradient(135deg,#ef4444,#dc2626);border:none;border-radius:12px;padding:10px 16px;font-weight:600;transition:all .3s}.logout-btn:hover{transform:translateY(-2px);box-shadow:0 8px 16px #dc26264d}@media (width<=1100px){.stats-grid{grid-template-columns:repeat(2,1fr)}}@media (width<=850px){.dashboard-layout{flex-direction:column}.sidebar{width:100%}}@media (width<=600px){.main-content{padding:16px}.topbar{flex-direction:column;align-items:flex-start;gap:12px}.stats-grid{grid-template-columns:1fr}}.login-page{background:linear-gradient(135deg,#e0f2fe,#fff,#f0f9ff);grid-template-columns:1.15fr .85fr;min-height:100vh;display:grid}.login-left{background:linear-gradient(135deg,#0ea5e9e0,#38bdf8d1),radial-gradient(circle at 0 0,#ffffff59,#0000 35%);justify-content:center;align-items:center;padding:48px;display:flex;position:relative;overflow:hidden}.login-overlay{color:#fff;width:100%;max-width:560px}.login-brand{margin-bottom:34px}.login-logo{color:#fff;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#fff3;border-radius:24px;justify-content:center;align-items:center;width:78px;height:78px;margin-bottom:22px;font-size:34px;font-weight:700;display:flex;box-shadow:0 16px 35px #0000001f}.login-brand h1{margin-bottom:14px;font-size:42px;font-weight:800;line-height:1.2}.login-brand p{color:#eaf8ff;max-width:520px;font-size:17px;line-height:1.8}.login-info-cards{grid-template-columns:1fr;gap:18px;margin-top:28px;display:grid}.info-card{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#ffffff26;border:1px solid #ffffff38;border-radius:22px;padding:22px;box-shadow:0 16px 35px #00000014}.info-card h3{color:#fff;margin-bottom:10px;font-size:20px}.info-card p{color:#effaff;font-size:14px;line-height:1.7}.login-right{justify-content:center;align-items:center;padding:40px 28px;display:flex}.login-card{-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);background:#ffffffd1;border:1px solid #dbeafe;border-radius:30px;width:100%;max-width:460px;padding:38px 34px;box-shadow:0 22px 50px #0ea5e91f}.login-header{margin-bottom:28px}.login-header h2{color:#0369a1;margin-bottom:8px;font-size:32px}.login-header p{color:#64748b;font-size:15px}.login-form .form-group{margin-bottom:20px}.login-form label{color:#0f172a;margin-bottom:8px;font-size:14px;font-weight:600;display:block}.login-form input[type=email],.login-form input[type=password]{color:#0f172a;background:#fff;border:1px solid #cbd5e1;border-radius:14px;outline:none;width:100%;height:52px;padding:0 16px;font-size:14px;transition:all .3s}.login-form input[type=email]:focus,.login-form input[type=password]:focus{border-color:#38bdf8;box-shadow:0 0 0 4px #38bdf81f}.login-options{justify-content:space-between;align-items:center;gap:14px;margin-bottom:22px;display:flex}.remember-me{color:#475569;align-items:center;gap:8px;font-size:14px;display:flex}.remember-me input{width:16px;height:16px}.forgot-link{color:#0284c7;font-size:14px;font-weight:600;transition:all .3s}.forgot-link:hover{color:#0369a1}.login-btn{color:#fff;cursor:pointer;background:linear-gradient(135deg,#0ea5e9,#38bdf8);border:none;border-radius:16px;width:100%;height:54px;font-size:15px;font-weight:700;transition:all .3s;box-shadow:0 14px 28px #0ea5e938}.login-btn:hover{transform:translateY(-2px);box-shadow:0 18px 36px #0ea5e947}.login-footer{text-align:center;margin-top:22px}.login-footer p{color:#94a3b8;font-size:13px}.error-text{color:#dc2626;margin-top:6px;font-size:13px;display:block}.alert-success{color:#0f766e;background:#ecfeff;border:1px solid #a5f3fc;border-radius:12px;margin-bottom:18px;padding:12px 14px;font-size:14px}@media (width<=992px){.login-page{grid-template-columns:1fr}.login-left{min-height:340px}.login-brand h1{font-size:34px}}@media (width<=640px){.login-left{padding:28px 20px}.login-right{padding:20px 16px 28px}.login-card{border-radius:24px;padding:28px 22px}.login-header h2{font-size:26px}.login-brand h1{font-size:28px}.login-brand p{font-size:15px}.login-options{flex-direction:column;align-items:flex-start}}.content-grid{grid-template-columns:2fr 1fr;gap:22px;margin-top:28px;display:grid}.panel-card{background:#fff;border:1px solid #dbeafe;border-radius:24px;padding:24px;box-shadow:0 10px 25px #38bdf814}.panel-header{justify-content:space-between;align-items:center;margin-bottom:20px;display:flex}.panel-header h3{color:#0f172a;font-size:24px;font-weight:700}.panel-header span{color:#64748b;font-size:14px}.quick-grid{grid-template-columns:repeat(2,1fr);gap:18px;display:grid}.quick-card{color:inherit;background:linear-gradient(135deg,#f0f9ff,#fff);border:1px solid #dbeafe;border-radius:18px;padding:20px;transition:all .3s;display:block}.quick-card:hover{transform:translateY(-4px);box-shadow:0 10px 24px #38bdf824}.quick-card h4{color:#0284c7;margin-bottom:8px;font-size:18px}.quick-card p{color:#64748b;font-size:14px;line-height:1.6}.activity-list{flex-direction:column;gap:14px;display:flex}.activity-item{background:#f8fdff;border:1px solid #e0f2fe;border-radius:16px;padding:16px}.activity-item strong{color:#0f172a;margin-bottom:6px;font-size:15px;display:block}.activity-item p{color:#64748b;font-size:13px}@media (width<=1100px){.content-grid{grid-template-columns:1fr}}@media (width<=700px){.quick-grid{grid-template-columns:1fr}}.transaction-list{flex-direction:column;gap:16px;display:flex}.transaction-item{background:#f8fdff;border:1px solid #dbeafe;border-radius:16px;justify-content:space-between;align-items:center;padding:18px 20px;transition:all .3s;display:flex}.transaction-item:hover{transform:translateY(-2px);box-shadow:0 8px 18px #38bdf814}.transaction-item strong{color:#0f172a;margin-bottom:6px;font-size:16px;display:block}.transaction-item p{color:#64748b;font-size:14px}.transaction-item span{color:#0284c7;font-size:15px;font-weight:700}.add-btn,.back-btn,.save-btn{color:#fff;cursor:pointer;background:linear-gradient(135deg,#0ea5e9,#38bdf8);border:none;border-radius:12px;padding:12px 18px;font-weight:600;text-decoration:none;transition:all .3s;display:inline-block}.add-btn:hover,.back-btn:hover,.save-btn:hover{transform:translateY(-2px);box-shadow:0 10px 20px #0ea5e92e}.success-alert{color:#0f766e;background:#ecfeff;border:1px solid #a5f3fc;border-radius:14px;margin-bottom:20px;padding:14px 18px}.form-card,.panel-card{background:#fff;border:1px solid #dbeafe;border-radius:24px;padding:24px;box-shadow:0 10px 25px #38bdf814}.form-grid{grid-template-columns:repeat(2,1fr);gap:20px;margin-bottom:20px;display:grid}.form-group{flex-direction:column;gap:8px;margin-bottom:18px;display:flex}.form-group label{color:#0f172a;font-weight:600}.form-group input,.form-group textarea{background:#fff;border:1px solid #cbd5e1;border-radius:14px;outline:none;width:100%;padding:12px 14px;font-size:14px}.form-group input:focus,.form-group textarea:focus{border-color:#38bdf8;box-shadow:0 0 0 4px #38bdf81f}.table-wrapper{overflow-x:auto}.produk-table{border-collapse:collapse;width:100%}.produk-table thead{background:#f0f9ff}.produk-table th,.produk-table td{text-align:left;border-bottom:1px solid #e2e8f0;padding:16px}.produk-table th{color:#0369a1;font-size:14px}.produk-table td{color:#334155;font-size:14px}.error-text{color:#dc2626;font-size:13px}@media (width<=768px){.form-grid{grid-template-columns:1fr}}#kode_produk{background:#f0f9ff;border:2px solid #38bdf8;font-size:18px;font-weight:600}.stock-badge{text-align:center;border-radius:999px;min-width:110px;padding:8px 14px;font-size:13px;font-weight:700;display:inline-block}.stock-safe{color:#15803d;background:#dcfce7;border:1px solid #86efac}.stock-warning{color:#b45309;background:#fef3c7;border:1px solid #fcd34d}.stock-danger{color:#b91c1c;background:#fee2e2;border:1px solid #fca5a5}.stock-summary-grid{margin-bottom:28px}.edit-btn{color:#fff;background:linear-gradient(135deg,#0ea5e9,#38bdf8);border-radius:10px;padding:10px 14px;font-size:13px;font-weight:600;text-decoration:none;transition:all .3s;display:inline-block}.edit-btn:hover{transform:translateY(-2px);box-shadow:0 10px 20px #0ea5e92e}.form-group select{background:#fff;border:1px solid #cbd5e1;border-radius:14px;outline:none;width:100%;padding:12px 14px;font-size:14px}.form-group select:focus{border-color:#38bdf8;box-shadow:0 0 0 4px #38bdf81f}.scan-barcode-group{align-items:center;gap:12px;display:flex}.barcode-input{background:#f0f9ff;border:2px solid #38bdf8;border-radius:14px;outline:none;flex:1;height:52px;padding:0 16px;font-size:16px;font-weight:600}.barcode-input:focus{box-shadow:0 0 0 4px #38bdf81f}.qty-input{border:1px solid #cbd5e1;border-radius:10px;width:80px;padding:8px 10px}.mini-btn{color:#fff;cursor:pointer;background:linear-gradient(135deg,#0ea5e9,#38bdf8);border:none;border-radius:10px;padding:8px 12px;font-size:12px;font-weight:600}.delete-btn{color:#fff;cursor:pointer;background:linear-gradient(135deg,#ef4444,#dc2626);border:none;border-radius:10px;padding:8px 12px;font-size:12px;font-weight:600}.reset-btn{color:#fff;cursor:pointer;background:linear-gradient(135deg,#64748b,#475569);border:none;border-radius:12px;padding:10px 16px;font-weight:600}.kasir-total-box{text-align:right;background:linear-gradient(135deg,#e0f2fe,#f8fdff);border:1px solid #bae6fd;border-radius:18px;margin-top:24px;padding:20px}.kasir-total-box h3{color:#0369a1;margin-bottom:8px;font-size:16px}.kasir-total-box h2{color:#0f172a;font-size:28px}.error-alert{color:#b91c1c;background:#fee2e2;border:1px solid #fecaca;border-radius:14px;margin-bottom:20px;padding:14px 18px}