:root{
  --bg:#f4f7fb;
  --bg-soft:#eef3f9;
  --panel:#ffffff;
  --panel-2:#f9fbff;
  --line:#d9e2ef;
  --text:#162033;
  --muted:#64748b;
  --primary:#2563eb;
  --primary-soft:#e8f0ff;
  --success:#16a34a;
  --success-soft:#eaf8ef;
  --warning:#f59e0b;
  --warning-soft:#fff6df;
  --danger:#dc2626;
  --danger-soft:#feeaea;
  --shadow:0 18px 40px rgba(15,23,42,.08);
}
*{box-sizing:border-box}
html,body{min-height:100%}
body{margin:0;background:linear-gradient(180deg,#f8fbff 0%,var(--bg) 100%);color:var(--text);font-family:Inter,Arial,sans-serif}
a{text-decoration:none}
.app-shell{display:flex;min-height:100vh}
.sidebar{width:290px;background:linear-gradient(180deg,#ffffff 0%,#f8fbff 100%);border-right:1px solid var(--line);padding:24px 18px;position:sticky;top:0;height:100vh;display:flex;flex-direction:column;gap:16px}
.sidebar-brand{display:flex;align-items:center;gap:14px;font-weight:800;font-size:1.05rem;margin-bottom:10px;padding:10px 12px;border-radius:20px;background:var(--panel);border:1px solid var(--line);box-shadow:var(--shadow)}
.sidebar-brand small{display:block;color:var(--muted);font-size:.78rem;font-weight:600;margin-top:2px}
.brand-mark{display:grid;place-items:center;width:48px;height:48px;border-radius:16px;background:linear-gradient(135deg,#2563eb,#60a5fa);color:#fff;box-shadow:0 12px 24px rgba(37,99,235,.22);font-size:1.2rem}
.sidebar .nav-link{display:flex;align-items:center;gap:12px;color:var(--text);padding:12px 14px;border-radius:16px;border:1px solid transparent;font-weight:600;transition:.18s ease}
.sidebar .nav-link i{font-size:1rem;color:#4b5f7a}
.sidebar .nav-link:hover{background:var(--primary-soft);border-color:#cfe0ff;color:var(--primary)}
.sidebar .nav-link.active{background:linear-gradient(135deg,#2563eb,#3b82f6);color:#fff;box-shadow:0 14px 28px rgba(37,99,235,.22)}
.sidebar .nav-link.active i{color:#fff}
.sidebar-footer{margin-top:auto;padding:14px;border-radius:18px;background:var(--panel);border:1px solid var(--line)}
.main-content{flex:1;min-width:0}
.topbar{display:flex;align-items:center;justify-content:space-between;padding:20px 28px;border-bottom:1px solid var(--line);background:rgba(255,255,255,.88);backdrop-filter:blur(10px);position:sticky;top:0;z-index:10}
.topbar-title{font-size:1.3rem;font-weight:800;letter-spacing:-.02em}
.topbar-subtitle{color:var(--muted);font-size:.92rem;margin-top:2px}
.topbar-user{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:16px;background:var(--panel);border:1px solid var(--line);box-shadow:var(--shadow);font-weight:700}
.page-wrapper{padding:26px}
.page-body{max-width:1460px;margin:0 auto}
.card-dark,.table-card,.form-card,.hero-card,.kpi-mini,.list-card{background:var(--panel);border:1px solid var(--line);border-radius:24px;box-shadow:var(--shadow)}
.panel-head{padding:18px 22px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:12px;background:linear-gradient(180deg,#ffffff,#f9fbff)}
.panel-head h5{font-weight:800}
.panel-body{padding:22px}
.form-label{color:var(--text);font-weight:700;margin-bottom:8px}
.form-control,.form-select,.form-check-input,textarea{background:#fff!important;color:var(--text)!important;border:1px solid #d2dbe8!important;border-radius:16px!important;padding:.82rem 1rem!important;min-height:48px}
.form-control::placeholder,textarea::placeholder{color:#94a3b8!important}
.form-control:focus,.form-select:focus,textarea:focus{box-shadow:0 0 0 4px rgba(37,99,235,.12)!important;border-color:#7aa2ff!important}
.form-check-input{width:1.1rem;height:1.1rem;min-height:auto}
.table{margin-bottom:0;color:var(--text)}
.table>:not(caption)>*>*{background:#fff!important;color:var(--text)!important;border-color:#e8eef6!important;vertical-align:middle}
.table thead th{background:#f8fbff!important;color:#51627c!important;font-weight:800;font-size:.8rem;text-transform:uppercase;letter-spacing:.04em}
.table tbody tr:hover td{background:#f8fbff!important}
.badge-soft{padding:8px 12px;border-radius:999px;background:var(--primary-soft);border:1px solid #cfe0ff;display:inline-block;color:var(--primary);font-weight:700}
.metric{padding:22px}
.metric-value{font-size:2rem;font-weight:800;line-height:1.05;letter-spacing:-.02em}
.metric-label{color:var(--muted);margin-bottom:10px;font-weight:600}
.metric-icon{width:52px;height:52px;border-radius:18px;display:grid;place-items:center;background:var(--primary-soft);color:var(--primary);margin-bottom:16px;font-size:1.2rem}
.grid-metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.actions{display:flex;gap:10px;flex-wrap:wrap}
.small-muted{color:var(--muted);font-size:.86rem}
.btn{border-radius:16px;font-weight:700;padding:.78rem 1.05rem;border:0}
.btn-primary{background:linear-gradient(135deg,#2563eb,#3b82f6);box-shadow:0 12px 24px rgba(37,99,235,.18)}
.btn-success{background:linear-gradient(135deg,#16a34a,#22c55e);box-shadow:0 12px 24px rgba(34,197,94,.16)}
.btn-warning{background:linear-gradient(135deg,#f59e0b,#fbbf24);color:#3b2a00;box-shadow:0 12px 24px rgba(245,158,11,.16)}
.btn-danger{background:linear-gradient(135deg,#dc2626,#ef4444);box-shadow:0 12px 24px rgba(239,68,68,.16)}
.btn-outline-light,.btn-outline-secondary{background:#fff;border:1px solid var(--line)!important;color:var(--text)!important}
.btn-outline-light:hover,.btn-outline-secondary:hover{background:#f8fbff;color:var(--primary)!important;border-color:#cfe0ff!important}
.btn-outline-warning{background:var(--warning-soft);border:1px solid #f7d88d;color:#9a6700}
.btn-outline-danger{background:var(--danger-soft);border:1px solid #f4b4b4;color:var(--danger)}
.alert{border-radius:18px;border:1px solid transparent;box-shadow:var(--shadow);padding:14px 18px}
.alert-danger{background:#fff2f2;border-color:#f5b1b1;color:#9f1d1d}
.alert-success{background:#eefcf2;border-color:#b2e8be;color:#0f7a32}
.alert-warning{background:#fff9ea;border-color:#f5d680;color:#986702}
.login-page{min-height:100vh;display:grid;place-items:center;padding:24px;background:linear-gradient(180deg,#eef5ff,#f8fbff 45%,#eef2f8 100%)}
.login-card{width:min(460px,100%);padding:34px;background:var(--panel);border:1px solid var(--line);border-radius:28px;box-shadow:var(--shadow)}
.hero-banner{display:grid;grid-template-columns:1.45fr .95fr;gap:20px;margin-bottom:22px}
.hero-card{padding:28px;background:linear-gradient(135deg,#ffffff,#f5f9ff);position:relative;overflow:hidden}
.hero-card::after{content:"";position:absolute;right:-40px;top:-40px;width:160px;height:160px;border-radius:999px;background:radial-gradient(circle,rgba(37,99,235,.12),transparent 68%)}
.hero-card h3{font-size:1.7rem;font-weight:800;margin-bottom:10px;letter-spacing:-.03em}
.hero-card p{color:#49586f;max-width:760px;font-size:1rem;line-height:1.6}
.info-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.kpi-mini{padding:18px;background:linear-gradient(180deg,#fff,#fbfdff)}
.kpi-mini strong{display:block;font-size:1.2rem;line-height:1.3;word-break:break-word}
.qr-preview{background:#fff;padding:12px;border-radius:18px;max-width:220px;border:1px solid var(--line)}
.copy-box{background:#f8fbff;border:1px dashed #bdd0ec;border-radius:16px;padding:12px;color:#274064;font-size:.92rem;word-break:break-all}
.list-stack{display:flex;flex-direction:column;gap:12px}
.list-card{padding:14px 16px;background:linear-gradient(180deg,#fff,#fbfdff)}
.mobile-backdrop{display:none}
.text-bg-warning{color:#6b4a00!important}
.table-card .panel-body.p-0 .table-responsive{border-radius:0 0 24px 24px}
@media (max-width: 1280px){.grid-metrics{grid-template-columns:repeat(2,1fr)}.hero-banner{grid-template-columns:1fr}.info-grid{grid-template-columns:1fr}}
@media (max-width: 1199px){.sidebar{position:fixed;left:-310px;z-index:30;transition:.25s}.sidebar.open{left:0}.mobile-backdrop.show{display:block;position:fixed;inset:0;background:rgba(15,23,42,.32);z-index:20}.topbar{padding:16px 18px}.topbar-subtitle{display:none}.page-wrapper{padding:16px}}
@media (max-width: 640px){.grid-metrics{grid-template-columns:1fr}.page-wrapper{padding:12px}.topbar-title{font-size:1.05rem}.topbar-user{display:none}.panel-head,.panel-body{padding:16px}.btn{width:100%}.actions>.btn,.actions>a{width:100%}}