*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --primary:       #c0392b;
  --primary-dark:  #922b21;
  --primary-light: #fdf0ef;
  --primary-glow:  rgba(192,57,43,.15);
  --sidebar-bg:    #0f172a;
  --sidebar-hover: rgba(255,255,255,.06);
  --sidebar-active:rgba(192,57,43,.2);
  --body-bg:       #f1f4f9;
  --card-bg:       #ffffff;
  --text:          #1e293b;
  --text-muted:    #64748b;
  --text-light:    #94a3b8;
  --border:        #e2e8f0;
  --border-light:  #f1f5f9;
  --success:       #16a34a;
  --success-bg:    #dcfce7;
  --danger:        #dc2626;
  --danger-bg:     #fee2e2;
  --warning:       #d97706;
  --warning-bg:    #fef3c7;
  --info:          #0284c7;
  --info-bg:       #e0f2fe;
  --sidebar-w:     250px;
  --topbar-h:      60px;
  --radius:        12px;
  --radius-lg:     16px;
  --radius-sm:     8px;
  --shadow-sm:     0 1px 3px rgba(0,0,0,.08),0 1px 2px rgba(0,0,0,.06);
  --shadow:        0 4px 16px rgba(0,0,0,.08),0 2px 6px rgba(0,0,0,.05);
  --shadow-lg:     0 20px 60px rgba(0,0,0,.15),0 8px 20px rgba(0,0,0,.1);
  --transition:    .18s ease;
}

html{scroll-behavior:smooth}
body{
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',sans-serif;
  background:var(--body-bg);color:var(--text);font-size:14px;line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--primary);text-decoration:none}

/* ── Scrollbar ──────────────────────────────────────────────────────────────── */
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:10px}
::-webkit-scrollbar-thumb:hover{background:#94a3b8}

/* ── Layout ─────────────────────────────────────────────────────────────────── */
.layout{display:flex;min-height:100vh}

/* ── Sidebar ────────────────────────────────────────────────────────────────── */
.sidebar{
  width:var(--sidebar-w);background:var(--sidebar-bg);
  display:flex;flex-direction:column;
  position:fixed;top:0;left:0;height:100vh;z-index:200;
  box-shadow:4px 0 24px rgba(0,0,0,.2);
  transition:transform var(--transition);
}

.sidebar-logo{
  padding:20px 22px 16px;
  font-size:21px;font-weight:900;color:#fff;letter-spacing:-.3px;
  border-bottom:1px solid rgba(255,255,255,.07);line-height:1;
  display:flex;flex-direction:column;gap:4px;
}
.sidebar-logo span{color:var(--primary)}
.sidebar-logo small{
  font-size:9.5px;font-weight:500;
  color:rgba(255,255,255,.3);
  text-transform:uppercase;letter-spacing:2.5px;
}

.sidebar-section{
  padding:16px 12px 6px;
  font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;
  color:rgba(255,255,255,.25);
}

.sidebar-nav{flex:1;padding:8px 0;overflow-y:auto}

.nav-link{
  display:flex;align-items:center;gap:11px;padding:10px 20px;
  color:rgba(255,255,255,.65);text-decoration:none;font-size:13.5px;font-weight:500;
  transition:all var(--transition);border-left:3px solid transparent;
  border-radius:0;white-space:nowrap;position:relative;
}
.nav-link:hover{background:var(--sidebar-hover);color:#fff}
.nav-link.active{
  background:var(--sidebar-active);color:#fff;
  border-left-color:var(--primary);
}
.nav-link.active .nav-icon{color:var(--primary)}
.nav-icon{
  font-size:15px;width:20px;text-align:center;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
}

.sidebar-footer{
  padding:8px 0 12px;
  border-top:1px solid rgba(255,255,255,.06);
}
.logout-link{color:rgba(255,255,255,.45)!important;font-size:13px}
.logout-link:hover{color:#ef4444!important;background:rgba(239,68,68,.08)!important}
.sidebar-user{
  padding:6px 20px 2px;
  font-size:11px;color:rgba(255,255,255,.28);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* Sidebar overlay (mobile) */
.sidebar-overlay{
  display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);
  z-index:190;backdrop-filter:blur(2px);
}

/* ── Content ────────────────────────────────────────────────────────────────── */
.content{
  margin-left:var(--sidebar-w);flex:1;
  display:flex;flex-direction:column;min-height:100vh;
}

/* ── Topbar ─────────────────────────────────────────────────────────────────── */
.topbar{
  background:var(--card-bg);
  border-bottom:1px solid var(--border);
  padding:0 24px;height:var(--topbar-h);
  display:flex;align-items:center;justify-content:space-between;
  position:sticky;top:0;z-index:100;
  box-shadow:var(--shadow-sm);
}
.topbar-left{display:flex;align-items:center;gap:14px}
.page-title{font-size:17px;font-weight:700;color:var(--text)}

.user-badge{
  display:flex;align-items:center;gap:8px;
  font-size:13px;color:var(--text-muted);
  background:var(--body-bg);
  padding:6px 12px;border-radius:20px;
  border:1px solid var(--border);
}
.user-dot{
  width:7px;height:7px;background:var(--success);
  border-radius:50%;flex-shrink:0;
  box-shadow:0 0 0 2px rgba(22,163,74,.2);
}

/* Hamburger */
.menu-toggle{
  display:none;align-items:center;justify-content:center;
  width:38px;height:38px;background:transparent;border:1.5px solid var(--border);
  border-radius:var(--radius-sm);cursor:pointer;color:var(--text-muted);
  transition:all var(--transition);flex-shrink:0;
}
.menu-toggle:hover{background:var(--body-bg);color:var(--text)}
.menu-toggle svg{display:block}

/* ── Page Body ──────────────────────────────────────────────────────────────── */
.page-body{padding:22px 24px;flex:1}

/* ── Flash ──────────────────────────────────────────────────────────────────── */
.flash{
  display:flex;align-items:center;gap:10px;
  padding:12px 16px;border-radius:var(--radius-sm);
  margin-bottom:20px;font-size:13.5px;font-weight:500;
}
.flash-success{background:var(--success-bg);color:#15803d;border:1px solid #bbf7d0}
.flash-error  {background:var(--danger-bg);color:var(--danger);border:1px solid #fca5a5}

/* ── Cards ──────────────────────────────────────────────────────────────────── */
.table-card{
  background:var(--card-bg);border-radius:var(--radius-lg);
  border:1px solid var(--border);overflow:hidden;
  margin-bottom:20px;box-shadow:var(--shadow-sm);
  transition:box-shadow var(--transition);
}
.table-card:hover{box-shadow:var(--shadow)}
.table-head{
  padding:14px 20px;border-bottom:1px solid var(--border-light);
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;flex-wrap:wrap;
}
.table-title{font-size:15px;font-weight:700}
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* ── Table ──────────────────────────────────────────────────────────────────── */
table{width:100%;border-collapse:collapse;font-size:13.5px}
th{
  background:#f8fafc;padding:10px 16px;
  text-align:left;font-weight:700;
  font-size:10.5px;text-transform:uppercase;letter-spacing:.6px;
  color:var(--text-muted);border-bottom:1px solid var(--border);
  white-space:nowrap;
}
td{
  padding:11px 16px;border-bottom:1px solid var(--border-light);
  vertical-align:middle;
}
tr:last-child td{border-bottom:none}
tr:hover td{background:#fafbfd}
td.nowrap{white-space:nowrap}

.empty-row{
  text-align:center;color:var(--text-light);
  padding:40px!important;font-size:14px;
}

/* ── Badges ─────────────────────────────────────────────────────────────────── */
.badge{
  display:inline-flex;align-items:center;gap:4px;
  padding:3px 10px;border-radius:20px;
  font-size:11.5px;font-weight:600;white-space:nowrap;
}
.badge-success{background:var(--success-bg);color:#15803d}
.badge-danger {background:var(--danger-bg);color:var(--danger)}
.badge-warning{background:var(--warning-bg);color:var(--warning)}
.badge-info   {background:var(--info-bg);color:var(--info)}
.badge-gray   {background:#f1f5f9;color:var(--text-muted)}

/* ── Buttons ────────────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:8px 16px;border-radius:var(--radius-sm);
  font-size:13px;font-weight:600;cursor:pointer;
  border:none;text-decoration:none;
  transition:all var(--transition);
  font-family:inherit;line-height:1;
  white-space:nowrap;
}
.btn:active{transform:scale(.97)}

.btn-primary{background:var(--primary);color:#fff;box-shadow:0 2px 8px rgba(192,57,43,.3)}
.btn-primary:hover{background:var(--primary-dark);box-shadow:0 4px 12px rgba(192,57,43,.35)}

.btn-success{background:var(--success);color:#fff;box-shadow:0 2px 8px rgba(22,163,74,.25)}
.btn-success:hover{background:#15803d}

.btn-danger{background:var(--danger);color:#fff;box-shadow:0 2px 8px rgba(220,38,38,.25)}
.btn-danger:hover{background:#b91c1c}

.btn-warning{background:var(--warning);color:#fff}
.btn-warning:hover{background:#b45309}

.btn-outline{
  background:transparent;color:var(--text);
  border:1.5px solid var(--border);
}
.btn-outline:hover{border-color:#94a3b8;background:var(--body-bg)}

.btn-ghost{
  background:transparent;color:var(--text-muted);
  border:none;padding:6px 10px;border-radius:var(--radius-sm);
}
.btn-ghost:hover{background:var(--body-bg);color:var(--text)}

.btn-sm{padding:5px 10px;font-size:12px;border-radius:6px}
.btn-lg{padding:12px 24px;font-size:15px;border-radius:10px}

.btn-icon{
  width:34px;height:34px;padding:0;
  justify-content:center;flex-shrink:0;border-radius:var(--radius-sm);
}

/* Eye / view button */
.btn-view{
  width:32px;height:32px;padding:0;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--body-bg);border:1.5px solid var(--border);
  border-radius:var(--radius-sm);cursor:pointer;color:var(--text-muted);
  transition:all var(--transition);
}
.btn-view:hover{background:var(--primary-light);border-color:var(--primary);color:var(--primary)}
.btn-view svg{display:block;flex-shrink:0}

/* ── Filters ────────────────────────────────────────────────────────────────── */
.filter-bar{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.filter-select,.search-input{
  padding:7px 11px;border:1.5px solid var(--border);
  border-radius:var(--radius-sm);font-size:13px;
  color:var(--text);background:#fff;font-family:inherit;
  transition:border-color var(--transition);
}
.filter-select:focus,.search-input:focus{
  outline:none;border-color:var(--primary);
  box-shadow:0 0 0 3px var(--primary-glow);
}
.search-input{min-width:0;width:200px}

/* ── Forms ──────────────────────────────────────────────────────────────────── */
.form-group{margin-bottom:16px}
.form-label{
  display:block;font-size:11px;font-weight:700;
  color:var(--text-muted);text-transform:uppercase;
  letter-spacing:.5px;margin-bottom:6px;
}
.form-control{
  width:100%;border:1.5px solid var(--border);
  border-radius:var(--radius-sm);padding:10px 12px;
  font-size:14px;color:var(--text);font-family:inherit;
  transition:border-color var(--transition),box-shadow var(--transition);
  background:#fff;
}
.form-control:focus{
  outline:none;border-color:var(--primary);
  box-shadow:0 0 0 3px var(--primary-glow);
}
select.form-control{cursor:pointer}
.form-hint{font-size:11.5px;color:var(--text-light);margin-top:5px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.input-with-btn{display:flex;gap:8px}
.input-with-btn .form-control{flex:1}

/* ── Modal ──────────────────────────────────────────────────────────────────── */
.modal-overlay{
  display:none;position:fixed;inset:0;
  background:rgba(15,23,42,.55);
  z-index:300;align-items:center;justify-content:center;
  padding:20px;backdrop-filter:blur(2px);
}
.modal-overlay.open{display:flex;animation:fadeIn .18s ease}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

.modal{
  background:#fff;border-radius:var(--radius-lg);padding:28px;
  width:460px;max-width:100%;
  box-shadow:var(--shadow-lg);max-height:90vh;overflow-y:auto;
  animation:slideUp .2s ease;
}
@keyframes slideUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}

.modal-header{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:18px;gap:12px}
.modal-title{font-size:18px;font-weight:800;color:var(--text)}
.modal-sub{font-size:13px;color:var(--text-muted);margin-bottom:22px;margin-top:4px}
.modal-close{
  width:30px;height:30px;border:none;background:var(--body-bg);
  border-radius:50%;cursor:pointer;color:var(--text-muted);
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;transition:all var(--transition);font-size:16px;
}
.modal-close:hover{background:var(--danger-bg);color:var(--danger)}
.modal-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:24px}

/* Danger zone inside modal */
.danger-zone{
  margin-top:24px;padding-top:20px;
  border-top:1px dashed var(--border);
}
.danger-zone-title{
  font-size:11px;font-weight:700;text-transform:uppercase;
  letter-spacing:.5px;color:var(--text-light);margin-bottom:12px;
}
.danger-zone-actions{display:flex;gap:8px;flex-wrap:wrap}

/* ── Stats Tabs ─────────────────────────────────────────────────────────────── */
.stats-tabs{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:14px;margin-bottom:20px;
}
.stat-tab{
  background:var(--card-bg);border-radius:var(--radius-lg);
  border:2px solid var(--border);padding:16px 18px;
  text-decoration:none;display:block;
  transition:all .2s;color:var(--text);
  box-shadow:var(--shadow-sm);
}
.stat-tab:hover{border-color:#94a3b8;box-shadow:var(--shadow);transform:translateY(-1px);color:var(--text)}
.stat-tab.active{
  border-color:var(--sidebar-bg);background:var(--sidebar-bg);
  color:#fff;box-shadow:0 8px 24px rgba(15,23,42,.25);
}
.st-icon-wrap{
  width:38px;height:38px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  font-size:17px;margin-bottom:10px;
}
.st-icon-wrap.green{background:var(--success-bg)}
.st-icon-wrap.orange{background:var(--warning-bg)}
.st-icon-wrap.gray{background:#f1f5f9}
.stat-tab.active .st-icon-wrap{background:rgba(255,255,255,.12)}
.st-num{font-size:28px;font-weight:800;line-height:1;margin-bottom:3px}
.st-lbl{font-size:12px;font-weight:500;color:var(--text-muted)}
.stat-tab.active .st-lbl{color:rgba(255,255,255,.55)}

/* ── KPI Cards ──────────────────────────────────────────────────────────────── */
.kpi-grid{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:16px;margin-bottom:20px;
}
.kpi-card{
  border-radius:var(--radius-lg);padding:20px 22px;
  position:relative;overflow:hidden;color:#fff;
  box-shadow:0 6px 20px rgba(0,0,0,.12);
  transition:transform var(--transition),box-shadow var(--transition);
}
.kpi-card:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(0,0,0,.16)}
.kpi-card::before{
  content:'';position:absolute;right:-30px;top:-30px;
  width:120px;height:120px;border-radius:50%;background:rgba(255,255,255,.08);
}
.kpi-card::after{
  content:'';position:absolute;right:20px;bottom:-20px;
  width:80px;height:80px;border-radius:50%;background:rgba(255,255,255,.05);
}
.kpi-green {background:linear-gradient(135deg,#16a34a 0%,#15803d 100%)}
.kpi-purple{background:linear-gradient(135deg,#7c3aed 0%,#5b21b6 100%)}
.kpi-blue  {background:linear-gradient(135deg,#0284c7 0%,#075985 100%)}
.kpi-orange{background:linear-gradient(135deg,#ea580c 0%,#c2410c 100%)}
.kpi-top{
  display:flex;justify-content:space-between;align-items:flex-start;
  margin-bottom:16px;position:relative;z-index:1;
}
.kpi-icon{font-size:24px}
.kpi-trend{
  font-size:10.5px;background:rgba(255,255,255,.2);
  padding:3px 9px;border-radius:20px;font-weight:600;white-space:nowrap;
}
.kpi-value{
  font-size:30px;font-weight:900;line-height:1;
  margin-bottom:4px;position:relative;z-index:1;
}
.kpi-label{font-size:12px;opacity:.8;font-weight:500;position:relative;z-index:1}

/* ── Charts ─────────────────────────────────────────────────────────────────── */
.charts-row{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:20px}
.tables-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.chart-card{padding:22px}
.chart-title{font-size:15px;font-weight:700;margin-bottom:3px}
.chart-sub{font-size:12px;color:var(--text-muted);margin-bottom:16px}
.canvas-wrap{height:200px;position:relative}

/* ── Funnel ─────────────────────────────────────────────────────────────────── */
.funnel{display:flex;flex-direction:column;gap:0}
.funnel-step{padding:10px 0}
.funnel-meta{display:flex;align-items:center;gap:8px;margin-bottom:7px}
.funnel-icon{font-size:16px;width:22px;text-align:center;flex-shrink:0}
.funnel-label{flex:1;font-size:13px;font-weight:600}
.funnel-count{font-size:15px;font-weight:800;min-width:32px;text-align:right}
.funnel-pct{font-size:12px;color:var(--text-muted);min-width:38px;text-align:right}
.funnel-bar-wrap{height:8px;background:var(--border-light);border-radius:4px;overflow:hidden}
.funnel-bar{height:100%;border-radius:4px;transition:width .5s ease;min-width:4px}
.funnel-arrow{text-align:center;color:var(--text-light);font-size:18px;line-height:1;padding:2px 0}
.funnel-insight{
  margin-top:14px;padding:10px 14px;background:var(--body-bg);
  border-radius:var(--radius-sm);font-size:12.5px;color:var(--text-muted);
  border-left:3px solid var(--primary);
}

/* ── Actions column ─────────────────────────────────────────────────────────── */
.actions{display:flex;gap:6px;flex-wrap:wrap;align-items:center}

/* ── Login ──────────────────────────────────────────────────────────────────── */
.login-wrap{
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#0f172a 0%,#1e0a0a 50%,#0f172a 100%);
  padding:20px;
}
.login-card{
  background:#fff;border-radius:20px;padding:40px;
  width:400px;max-width:100%;box-shadow:var(--shadow-lg);
}
.login-logo{font-size:28px;font-weight:900;color:#111;margin-bottom:4px;letter-spacing:-.5px}
.login-logo span{color:var(--primary)}
.login-sub{font-size:13px;color:var(--text-muted);margin-bottom:28px}
.login-btn{
  width:100%;padding:13px;
  background:linear-gradient(135deg,var(--primary),var(--primary-dark));
  color:#fff;border:none;border-radius:10px;
  font-size:15px;font-weight:700;cursor:pointer;
  transition:opacity .2s;font-family:inherit;
}
.login-btn:hover{opacity:.9}
.login-error{
  background:var(--danger-bg);color:var(--danger);
  border:1px solid #fca5a5;padding:11px 14px;
  border-radius:var(--radius-sm);font-size:13.5px;margin-bottom:18px;
}

/* ── Setup ──────────────────────────────────────────────────────────────────── */
.setup-wrap{
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#0f172a,#1e0a0a);padding:20px;
}
.setup-card{
  background:#fff;border-radius:20px;padding:40px;
  width:480px;max-width:100%;box-shadow:var(--shadow-lg);
}
.setup-card h2{font-size:22px;font-weight:900;margin-bottom:6px}
.setup-card p{font-size:13px;color:var(--text-muted);margin-bottom:28px}
.generated-pwd{
  background:var(--body-bg);border-radius:var(--radius-sm);padding:12px;
  font-family:monospace;font-size:15px;letter-spacing:1px;
  word-break:break-all;margin-top:8px;border:2px solid var(--primary-light);
}

/* ── Tariff cards layout ────────────────────────────────────────────────────── */
.tariff-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:16px;padding:20px;
}
.tariff-card{
  border:1.5px solid var(--border);border-radius:var(--radius-lg);
  padding:18px 20px;display:flex;align-items:center;
  gap:14px;background:#fff;transition:all var(--transition);
  position:relative;
}
.tariff-card:hover{border-color:#94a3b8;box-shadow:var(--shadow)}
.tariff-card.inactive{opacity:.55}
.tariff-emoji{font-size:32px;flex-shrink:0;line-height:1}
.tariff-info{flex:1;min-width:0}
.tariff-name{font-size:14.5px;font-weight:700;margin-bottom:4px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tariff-meta{font-size:12px;color:var(--text-muted);display:flex;gap:10px;flex-wrap:wrap}
.tariff-price{font-weight:600;color:var(--text)}
.tariff-days{color:var(--text-light)}
.tariff-stars{color:#d97706}
.tariff-actions{display:flex;align-items:center;gap:6px;flex-shrink:0}

/* ── Section title ──────────────────────────────────────────────────────────── */
.section-title{
  font-size:13px;font-weight:700;color:var(--text-muted);
  text-transform:uppercase;letter-spacing:.5px;margin-bottom:12px;
}

/* ── Help card ──────────────────────────────────────────────────────────────── */
.help-card{
  background:var(--card-bg);border-radius:var(--radius-lg);
  border:1px solid var(--border);padding:22px;
  box-shadow:var(--shadow-sm);
}
.help-card-title{
  font-size:14px;font-weight:700;margin-bottom:14px;
  display:flex;align-items:center;gap:8px;
}
.help-item{
  display:flex;gap:10px;margin-bottom:14px;
  font-size:13px;color:var(--text-muted);line-height:1.6;
}
.help-item:last-child{margin-bottom:0}
.help-dot{
  width:6px;height:6px;border-radius:50%;background:var(--primary);
  flex-shrink:0;margin-top:6px;
}

/* ── btn-key ────────────────────────────────────────────────────────────────── */
.btn-key{
  width:40px;height:40px;padding:0;justify-content:center;
  font-size:17px;border-radius:var(--radius-sm);
  background:var(--body-bg);color:var(--text-muted);
  border:1.5px solid var(--border);
  cursor:pointer;transition:all var(--transition);
  display:inline-flex;align-items:center;flex-shrink:0;
}
.btn-key:hover{background:var(--primary-light);border-color:var(--primary);color:var(--primary)}

/* ── Responsive ─────────────────────────────────────────────────────────────── */
@media(max-width:1280px){
  .kpi-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:1024px){
  .charts-row,.tables-row{grid-template-columns:1fr}
  :root{--sidebar-w:220px}
}
@media(max-width:768px){
  :root{--sidebar-w:260px;--topbar-h:56px}

  .menu-toggle{display:flex}

  .sidebar{transform:translateX(-100%)}
  .sidebar.open{transform:translateX(0)}

  .sidebar-overlay.open{display:block}

  .content{margin-left:0}

  .page-body{padding:14px 12px}
  .topbar{padding:0 14px}

  .kpi-grid{grid-template-columns:1fr 1fr;gap:10px}
  .kpi-card{padding:16px}
  .kpi-value{font-size:24px}

  .stats-tabs{grid-template-columns:1fr 1fr}

  .tariff-grid{grid-template-columns:1fr;padding:12px}

  .form-row{grid-template-columns:1fr}

  .table-head{padding:12px 14px}
  th,td{padding:10px 12px;font-size:12.5px}

  .filter-bar{gap:6px}
  .search-input{width:100%}

  .modal{padding:22px 18px}
  .modal-actions{flex-direction:column-reverse}
  .modal-actions .btn{width:100%;justify-content:center}
  .danger-zone-actions{flex-direction:column}
  .danger-zone-actions .btn{width:100%;justify-content:center}
}
@media(max-width:600px){
  /* Bottom-sheet style modals */
  .modal-overlay{align-items:flex-end;padding:0}
  .modal{
    border-radius:20px 20px 0 0;width:100%;
    max-height:92vh;padding:20px 16px 28px;
    animation:sheetUp .25s ease;
  }
  @keyframes sheetUp{
    from{transform:translateY(100%)}
    to{transform:translateY(0)}
  }
}
@media(max-width:480px){
  .stats-tabs{grid-template-columns:1fr}
  .kpi-grid{grid-template-columns:1fr}
  .user-badge span:not(.user-dot){display:none}
}