:root {
    --primary: #4f46e5;
    --sidebar-bg: #1e293b;
    --sidebar-hover: #334155;
}
body { background: #f1f5f9; font-family: 'Segoe UI', sans-serif; }
.sidebar {
    width: 250px; min-height: 100vh; background: var(--sidebar-bg);
    position: fixed; top: 0; left: 0; z-index: 100;
}
.sidebar .brand { color: #fff; font-weight: 700; padding: 1.5rem; font-size: 1.2rem; border-bottom: 1px solid #334155; }
.sidebar a { color: #cbd5e1; display: block; padding: .8rem 1.5rem; text-decoration: none; border-left: 3px solid transparent; }
.sidebar a:hover, .sidebar a.active { background: var(--sidebar-hover); color: #fff; border-left-color: var(--primary); }
.sidebar i { width: 20px; margin-right: 10px; }
.content { margin-left: 250px; padding: 2rem; }
.stat-card { border: none; border-radius: 12px; box-shadow: 0 2px 10px rgba(0,0,0,.05); }
.stat-card .icon { font-size: 2rem; opacity: .7; }
.table-hover tbody tr:hover { background: #f8fafc; }
.login-wrapper {
    min-height: 100vh; display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #4f46e5, #7c3aed);
}
.login-card { border-radius: 16px; box-shadow: 0 20px 60px rgba(0,0,0,.3); border: none; }
.pos-product { cursor: pointer; transition: all .15s; }
.pos-product:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,.15); }
.cart-item { border-bottom: 1px solid #e5e7eb; padding: .5rem 0; }
@media (max-width: 768px) {
    .sidebar { transform: translateX(-100%); }
    .sidebar.show { transform: translateX(0); }
    .content { margin-left: 0; }
}