:root {
  --brand-red: #d80f16;
  --brand-red-dark: #b30b12;
  --ink: #1b1b1f;
  --muted: #70737d;
  --bg: #f5f7fb;
  --card: #ffffff;
  --border: #e7eaf0;
  --sidebar: #13151a;
}
*{box-sizing:border-box}
body.app-body{margin:0;font-family:'Inter',sans-serif;background:var(--bg);color:var(--ink)}
a{text-decoration:none}
.app-shell{display:grid;grid-template-columns:280px 1fr;min-height:100vh}
.app-sidebar{background:linear-gradient(180deg,#171a21 0%,#111318 100%);color:#fff;padding:28px 22px;display:flex;flex-direction:column;justify-content:space-between;gap:20px;position:sticky;top:0;height:100vh}
.brand-wrap{display:flex;gap:14px;align-items:center}.sidebar-logo{width:58px;height:auto;border-radius:14px;background:#fff;padding:6px}.brand-title{font-weight:800;letter-spacing:.08em}.brand-subtitle{color:#b9becc;font-size:.92rem}
.sidebar-nav{gap:8px}.sidebar-nav .nav-link{display:flex;align-items:center;gap:12px;color:#d8dbe5;padding:12px 14px;border-radius:14px;font-weight:600}.sidebar-nav .nav-link:hover,.sidebar-nav .nav-link.active{background:rgba(255,255,255,.08);color:#fff}
.sidebar-user{padding:18px;border-radius:18px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08)}
.sidebar-user-role{font-size:.84rem;color:#ffb3b6;text-transform:uppercase;letter-spacing:.08em}.sidebar-user-name{font-size:1.05rem;font-weight:700;margin-top:6px}.sidebar-user-branch{color:#c8ccd7;margin-top:6px;font-size:.95rem}
.app-main{padding:28px}.topbar{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;margin-bottom:24px}.page-title{font-size:2rem;font-weight:800;margin:0}.page-subtitle{color:var(--muted);margin-top:8px}.content-area{display:grid;gap:22px}
.btn-danger{background:var(--brand-red)!important;border-color:var(--brand-red)!important}.btn-danger:hover{background:var(--brand-red-dark)!important;border-color:var(--brand-red-dark)!important}
.card-pro{background:var(--card);border:1px solid var(--border);border-radius:22px;padding:22px;box-shadow:0 10px 30px rgba(17,19,24,.05)}
.stats-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}.stat-card{padding:22px;border-radius:22px;background:var(--card);border:1px solid var(--border);box-shadow:0 8px 24px rgba(17,19,24,.04)}.stat-card .icon{width:50px;height:50px;border-radius:16px;background:#fff2f2;color:var(--brand-red);display:flex;align-items:center;justify-content:center;font-size:1.3rem;margin-bottom:16px}.stat-card h3{margin:0;font-size:1.9rem;font-weight:800}.stat-card p{margin:6px 0 0;color:var(--muted)}
.filters-grid,.form-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:16px}.col-span-3{grid-column:span 3}.col-span-4{grid-column:span 4}.col-span-6{grid-column:span 6}.col-span-8{grid-column:span 8}.col-span-12{grid-column:span 12}
.form-label{font-weight:700}.form-control,.form-select,.form-check-input{border-radius:14px;border:1px solid #d9dde8;padding:.78rem .95rem}.form-control:focus,.form-select:focus{border-color:#f29c9f;box-shadow:0 0 0 .25rem rgba(216,15,22,.15)}
.table-wrap{overflow:auto}.table-pro{width:100%;border-collapse:separate;border-spacing:0 10px}.table-pro thead th{font-size:.88rem;color:var(--muted);font-weight:700;padding:0 14px 8px}.table-pro tbody tr{background:#fff;box-shadow:0 4px 18px rgba(17,19,24,.04)}.table-pro tbody td{padding:16px 14px;vertical-align:top}.table-pro tbody tr td:first-child{border-top-left-radius:16px;border-bottom-left-radius:16px}.table-pro tbody tr td:last-child{border-top-right-radius:16px;border-bottom-right-radius:16px}.product-title{font-weight:700}.muted{color:var(--muted)}
.badge-soft{display:inline-flex;align-items:center;padding:.4rem .7rem;border-radius:999px;background:#fff4f4;color:var(--brand-red);font-weight:700;font-size:.85rem}.badge-dark-soft{background:#f1f3f7;color:#303442}
.action-group{display:flex;gap:8px;flex-wrap:wrap}.btn-soft{background:#fff;border:1px solid var(--border);border-radius:12px;padding:.55rem .85rem;color:#111}.btn-soft:hover{border-color:#cfd5e2;background:#fafbfc}
.selection-bar{display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;padding:16px 18px;border-radius:18px;background:#fff7f7;border:1px dashed #f0b1b5}.selection-info{font-weight:700}.qr-box{display:grid;grid-template-columns:220px 1fr;gap:24px;align-items:center}.qr-box img{width:200px;height:200px;border-radius:18px;background:#fff;padding:10px;border:1px solid var(--border)}
.public-shell{max-width:1100px;margin:0 auto;padding:30px 18px}.public-header{display:flex;justify-content:space-between;gap:18px;align-items:center;margin-bottom:24px}.public-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.public-card{background:#fff;border-radius:22px;padding:22px;border:1px solid var(--border);box-shadow:0 12px 28px rgba(17,19,24,.05)}
.login-page{min-height:100vh;display:grid;place-items:center;background:radial-gradient(circle at top left, #fff0f1 0%, #f7f8fb 44%, #eff2f8 100%)}.login-card{max-width:440px;width:100%;background:#fff;padding:34px;border:1px solid var(--border);border-radius:28px;box-shadow:0 24px 50px rgba(17,19,24,.08)}.login-logo{width:76px;background:#fff;border-radius:18px;padding:8px;box-shadow:0 10px 24px rgba(216,15,22,.12)}
@media (max-width:1200px){.stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.public-grid{grid-template-columns:1fr}.qr-box{grid-template-columns:1fr}}
@media (max-width:960px){.app-shell{grid-template-columns:1fr}.app-sidebar{position:static;height:auto}.topbar{flex-direction:column}.col-span-3,.col-span-4,.col-span-6,.col-span-8,.col-span-12{grid-column:span 12}}

.page-title{letter-spacing:-.03em}.page-subtitle{max-width:720px}.topbar{padding-bottom:4px;border-bottom:1px solid var(--border)}
.selection-info{font-size:1rem}.sidebar-user-branch{line-height:1.45}.table-pro tbody tr:hover{transform:translateY(-1px);transition:.18s ease}.nav-link span{white-space:nowrap}