/* ═══════════════════════════════════════════
   SCANilla — Design System (TailAdmin-inspired)
   ═══════════════════════════════════════════ */
:root {
  --primary: #3C50E0;
  --primary-dark: #2D3EC7;
  --primary-light: #EEF2FF;
  --bg: #F1F5F9;
  --white: #FFFFFF;
  --text: #1C2434;
  --text-muted: #64748B;
  --text-light: #94A3B8;
  --border: #E2E8F0;
  --border-light: #F1F5F9;
  --success: #10B981;
  --success-light: #ECFDF5;
  --danger: #EF4444;
  --danger-light: #FEF2F2;
  --warning: #F59E0B;
  --warning-light: #FFFBEB;
  --info: #3B82F6;
  --info-light: #EFF6FF;
  --sidebar-w: 280px;
  --sidebar-collapsed: 0px;
  --header-h: 64px;
  --radius: 12px;
  --radius-sm: 8px;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.05);
  --shadow: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --shadow-md: 0 4px 6px rgba(0,0,0,.05), 0 2px 4px rgba(0,0,0,.03);
  --shadow-lg: 0 10px 15px rgba(0,0,0,.06), 0 4px 6px rgba(0,0,0,.03);
  --font: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --mono: 'JetBrains Mono', 'Fira Code', monospace;
  --transition: .15s ease;
}
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
body { font-family:var(--font); background:var(--bg); color:var(--text); font-size:14px; line-height:1.6; -webkit-font-smoothing:antialiased; }
a { text-decoration:none; color:var(--primary); }

/* ── LAYOUT ── */
.layout { display:flex; min-height:100vh; }
.sidebar {
  width:var(--sidebar-w); background:var(--white); border-right:1px solid var(--border);
  position:fixed; top:0; left:0; bottom:0; z-index:50; display:flex; flex-direction:column;
  transition:transform .25s ease;
}
.sidebar-header { height:var(--header-h); display:flex; align-items:center; padding:0 24px; border-bottom:1px solid var(--border); }
.sidebar-logo-by { font-size:11px; font-weight:400; color:var(--text-muted); margin-top:1px; }
.sidebar-footer { padding:16px 24px; border-top:1px solid var(--border); margin-top:auto; }
.sidebar-footer-brand { font-size:12px; color:var(--text-light); }
.sidebar-footer-brand a { color:var(--text-muted); font-weight:600; }
.sidebar-footer-brand a:hover { color:var(--primary); }
.app-footer { padding:20px 32px; border-top:1px solid var(--border); background:var(--white); display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; font-size:12px; color:var(--text-light); }
.app-footer a { color:var(--text-light); }
.app-footer a:hover { color:var(--primary); }
.app-footer-center { color:var(--text-muted); }
.app-footer-right { display:flex; gap:16px; }
.sidebar-logo { display:flex; align-items:center; gap:10px; }
.sidebar-logo-icon { width:32px; height:32px; background:var(--primary); border-radius:var(--radius-sm); display:flex; align-items:center; justify-content:center; }
.sidebar-logo-icon svg { width:18px; height:18px; fill:#fff; }
.sidebar-logo-text { font-size:18px; font-weight:800; letter-spacing:-.03em; color:var(--text); }
.sidebar-logo-text span { color:var(--primary); }
.sidebar-body { flex:1; overflow-y:auto; padding:16px 0; }
.sidebar-section { padding:0 16px; margin-bottom:8px; }
.sidebar-section-label { font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.08em; color:var(--text-light); padding:8px 12px; }
.sidebar-item {
  display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:var(--radius-sm);
  color:var(--text-muted); font-size:14px; font-weight:500; cursor:pointer; transition:all var(--transition);
  margin:2px 0;
}
.sidebar-item:hover { background:var(--bg); color:var(--text); }
.sidebar-item.active { background:var(--primary-light); color:var(--primary); font-weight:600; }
.sidebar-item svg { width:20px; height:20px; flex-shrink:0; opacity:.7; }
.sidebar-item.active svg { opacity:1; }
.sidebar-badge { margin-left:auto; font-size:11px; font-weight:700; background:var(--primary); color:#fff; padding:1px 8px; border-radius:20px; }
.sidebar-close { display:none; position:absolute; top:18px; right:16px; background:none; border:none; cursor:pointer; color:var(--text-muted); font-size:20px; }

.main { width:calc(100% - var(--sidebar-w)); margin-left:var(--sidebar-w); min-height:100vh; display:flex; flex-direction:column; transition:margin .25s ease; }

/* ── HEADER ── */
.header {
  height:var(--header-h); background:var(--white); border-bottom:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between; padding:0 24px;
  position:sticky; top:0; z-index:40; box-shadow:var(--shadow-sm);
}
.header-left { display:flex; align-items:center; gap:16px; }
.hamburger { display:none; background:none; border:none; cursor:pointer; color:var(--text-muted); padding:4px; }
.hamburger svg { width:24px; height:24px; }
.breadcrumb { display:flex; align-items:center; gap:6px; font-size:13px; color:var(--text-muted); }
.breadcrumb a { color:var(--text-muted); font-weight:500; }
.breadcrumb a:hover { color:var(--primary); }
.breadcrumb span { color:var(--text); font-weight:600; }
.header-right { display:flex; align-items:center; gap:16px; }
.header-nav { display:flex; align-items:center; gap:4px; }
.header-nav-link { font-size:13px; font-weight:500; color:var(--text-muted); padding:6px 12px; border-radius:8px; text-decoration:none; transition:all .15s; }
.header-nav-link:hover { color:var(--primary); background:var(--bg); }
.gen-hero { background:#fff; border-bottom:1px solid var(--border); padding:40px 32px 32px; text-align:center; }
.gen-hero-title { font-size:28px; font-weight:800; color:var(--text); letter-spacing:-.5px; margin-bottom:10px; }
.gen-hero-sub { font-size:15px; color:var(--text-muted); max-width:540px; margin:0 auto 20px; line-height:1.6; }
.gen-hero-badges { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:8px; }
.gen-badge { font-size:12px; font-weight:500; color:var(--primary); background:#eef2ff; border-radius:20px; padding:4px 12px; }
.gen-features { display:grid; grid-template-columns:repeat(4,1fr); gap:0; border-top:1px solid var(--border); background:#fff; }
.gen-feat { display:flex; align-items:flex-start; gap:14px; padding:20px 24px; border-right:1px solid var(--border); }
.gen-feat:last-child { border-right:none; }
.gen-feat-icon { flex-shrink:0; width:38px; height:38px; background:#eef2ff; border-radius:10px; display:flex; align-items:center; justify-content:center; }
.gen-feat-icon svg { width:18px; height:18px; color:var(--primary); }
.gen-feat-text { display:flex; flex-direction:column; gap:3px; }
.gen-feat-text strong { font-size:13px; font-weight:700; color:var(--text); }
.gen-feat-text span { font-size:12px; color:var(--text-muted); line-height:1.4; }
@media(max-width:900px){ .gen-features { grid-template-columns:repeat(2,1fr); } .gen-feat:nth-child(2){ border-right:none; } .gen-feat:nth-child(3){ border-top:1px solid var(--border); } .gen-feat:nth-child(4){ border-top:1px solid var(--border); border-right:none; } }
@media(max-width:640px){ .header-nav { display:none; } .gen-hero { padding:28px 20px 24px; } .gen-hero-title { font-size:22px; } .gen-features { grid-template-columns:1fr; } .gen-feat { border-right:none !important; border-top:1px solid var(--border); } .gen-feat:first-child{ border-top:none; } }
.header-user { display:flex; align-items:center; gap:10px; cursor:pointer; position:relative; }
.header-avatar {
  width:36px; height:36px; border-radius:50%; background:var(--primary); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:700;
}
.header-user-info { text-align:right; }
.header-user-name { font-size:13px; font-weight:600; color:var(--text); line-height:1.2; }
.header-user-role { font-size:11px; color:var(--text-muted); line-height:1.2; }
.header-dropdown {
  position:absolute; top:calc(100% + 8px); right:0; width:220px; background:var(--white);
  border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-lg);
  display:none; z-index:100; overflow:hidden;
}
.header-dropdown.show { display:block; }
.header-dropdown-header { padding:14px 16px; border-bottom:1px solid var(--border); }
.header-dropdown-header .name { font-size:14px; font-weight:600; }
.header-dropdown-header .email { font-size:12px; color:var(--text-muted); }
.header-dropdown a {
  display:flex; align-items:center; gap:10px; padding:10px 16px; font-size:13px;
  font-weight:500; color:var(--text); cursor:pointer;
}
.header-dropdown a:hover { background:var(--bg); }
.header-dropdown a svg { width:18px; height:18px; color:var(--text-muted); }

/* ── CONTENT ── */
.content { flex:1; min-width:0; padding:24px; }
.page-title { font-size:22px; font-weight:700; margin-bottom:20px; color:var(--text); }

/* ── CARDS ── */
.card {
  background:var(--white); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow-sm); overflow:hidden;
}
.card-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 20px; border-bottom:1px solid var(--border);
}
.card-title { font-size:15px; font-weight:700; color:var(--text); }
.card-body { padding:20px; }
.card + .card { margin-top:16px; }

/* ── STAT CARDS ── */
.stats-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:24px; }
.stat-card {
  background:var(--white); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow-sm); padding:20px;
}
.stat-card-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.stat-icon {
  width:42px; height:42px; border-radius:50%; display:flex; align-items:center; justify-content:center;
}
.stat-icon svg { width:20px; height:20px; }
.stat-icon.blue { background:var(--info-light); color:var(--info); }
.stat-icon.green { background:var(--success-light); color:var(--success); }
.stat-icon.orange { background:var(--warning-light); color:var(--warning); }
.stat-icon.red { background:var(--danger-light); color:var(--danger); }
.stat-trend { display:flex; align-items:center; gap:4px; font-size:12px; font-weight:600; }
.stat-trend.up { color:var(--success); }
.stat-trend.down { color:var(--danger); }
.stat-num { font-size:28px; font-weight:700; color:var(--text); line-height:1.2; }
.stat-label { font-size:13px; color:var(--text-muted); margin-top:2px; }

/* ── TABLES ── */
.table-wrap { overflow-x:auto; }
table { width:100%; border-collapse:collapse; }
thead th {
  text-align:left; padding:12px 16px; font-size:12px; font-weight:600;
  text-transform:uppercase; letter-spacing:.04em; color:var(--text-muted);
  background:var(--bg); border-bottom:1px solid var(--border);
}
tbody td { padding:12px 16px; font-size:14px; border-bottom:1px solid var(--border); }
tbody tr { transition:background var(--transition); cursor:pointer; }
tbody tr:hover { background:var(--primary-light); }
tbody tr:last-child td { border-bottom:none; }

/* ── BADGES ── */
.badge {
  display:inline-flex; align-items:center; padding:3px 10px; border-radius:20px;
  font-size:11px; font-weight:600; letter-spacing:.02em;
}
.badge-primary { background:var(--primary-light); color:var(--primary); }
.badge-success { background:var(--success-light); color:var(--success); }
.badge-danger { background:var(--danger-light); color:var(--danger); }
.badge-warning { background:var(--warning-light); color:var(--warning); }
.badge-info { background:var(--info-light); color:var(--info); }
.badge-gray { background:var(--bg); color:var(--text-muted); }

/* ── BUTTONS ── */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:10px 18px; border:1px solid transparent; border-radius:var(--radius-sm);
  font-size:13px; font-weight:600; font-family:var(--font); cursor:pointer;
  transition:all var(--transition); line-height:1;
}
.btn-sm { padding:7px 14px; font-size:12px; }
.btn-lg { padding:13px 24px; font-size:14px; }
.btn-primary { background:var(--primary); color:#fff; border-color:var(--primary); }
.btn-primary:hover { background:var(--primary-dark); box-shadow:0 4px 12px rgba(60,80,224,.35); transform:translateY(-1px); }
.btn-primary:active { background:#2336b0; box-shadow:none; transform:translateY(0) scale(.97); }
.btn-success { background:var(--success); color:#fff; }
.btn-success:hover { background:#059669; box-shadow:0 4px 12px rgba(16,185,129,.3); transform:translateY(-1px); }
.btn-success:active { background:#047857; box-shadow:none; transform:translateY(0) scale(.97); }
.btn-danger { background:var(--danger); color:#fff; }
.btn-danger:hover { background:#DC2626; box-shadow:0 4px 12px rgba(239,68,68,.3); transform:translateY(-1px); }
.btn-danger:active { background:#B91C1C; box-shadow:none; transform:translateY(0) scale(.97); }
.btn-outline { background:transparent; color:var(--text); border-color:var(--border); }
.btn-outline:hover { border-color:var(--primary); color:var(--primary); background:var(--primary-light); }
.btn-outline:active { background:#dde4fc; transform:scale(.97); }
.btn-ghost { background:transparent; color:var(--text-muted); }
.btn-ghost:hover { color:var(--primary); background:var(--primary-light); }
.btn-ghost:active { background:#dde4fc; transform:scale(.97); }
.btn-full { width:100%; }
.btn svg { width:16px; height:16px; }
.btn-group { display:flex; gap:8px; flex-wrap:wrap; }

/* ── FORMS ── */
.form-group { margin-bottom:16px; }
.form-group:last-child { margin-bottom:0; }
.form-label { display:block; font-size:13px; font-weight:500; color:var(--text); margin-bottom:6px; }
.form-input, .form-select, .form-textarea {
  width:100%; padding:10px 14px; background:var(--white); border:1px solid var(--border);
  border-radius:var(--radius-sm); font-size:14px; font-family:var(--font); color:var(--text);
  outline:none; transition:border-color var(--transition), box-shadow var(--transition);
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
  border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-light);
}
.form-input::placeholder { color:var(--text-light); }
.form-textarea { resize:vertical; min-height:80px; }
.form-hint { font-size:12px; color:var(--text-muted); margin-top:4px; }
.form-error { font-size:12px; color:var(--danger); margin-top:4px; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }

/* ── COLOR INPUTS ── */
.color-field { display:flex; align-items:center; gap:8px; }
.color-swatch {
  width:40px; height:40px; border-radius:var(--radius-sm); border:1px solid var(--border);
  overflow:hidden; position:relative; cursor:pointer; flex-shrink:0;
}
.color-swatch input[type="color"] {
  position:absolute; inset:-6px; width:calc(100% + 12px); height:calc(100% + 12px);
  cursor:pointer; border:none;
}
.color-field .form-input { flex:1; font-family:var(--mono); font-size:13px; }

/* ── PILLS / TABS ── */
.pill-group { display:flex; gap:6px; flex-wrap:wrap; }
.pill {
  padding:7px 16px; border-radius:var(--radius-sm); border:1px solid var(--border);
  background:var(--white); font-size:12px; font-weight:600; color:var(--text-muted);
  cursor:pointer; transition:all var(--transition);
}
.pill:hover { border-color:var(--primary); color:var(--primary); }
.pill.active { background:var(--primary); color:#fff; border-color:var(--primary); }

.tab-bar { display:flex; gap:0; border-bottom:2px solid var(--border); margin-bottom:20px; }
.tab-item {
  padding:12px 20px; font-size:13px; font-weight:600; color:var(--text-muted);
  cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-2px;
  transition:all var(--transition);
}
.tab-item:hover { color:var(--text); }
.tab-item.active { color:var(--primary); border-bottom-color:var(--primary); }

/* ── LOGO UPLOAD ── */
.dropzone {
  border:2px dashed var(--border); border-radius:var(--radius); padding:28px;
  text-align:center; cursor:pointer; transition:all var(--transition);
  background:var(--bg);
}
.dropzone:hover { border-color:var(--primary); background:var(--primary-light); }
.dropzone.has-file { border-style:solid; border-color:var(--primary); background:var(--primary-light); }
.dropzone-icon { font-size:28px; margin-bottom:8px; opacity:.6; }
.dropzone-text { font-size:13px; color:var(--text-muted); font-weight:500; }
.dropzone-sub { font-size:11px; color:var(--text-light); margin-top:2px; }
.dropzone-preview { width:52px; height:52px; object-fit:contain; border-radius:var(--radius-sm); margin:0 auto 8px; display:block; }
.dropzone-remove { font-size:12px; color:var(--danger); font-weight:600; cursor:pointer; margin-top:4px; }

/* ── RANGE SLIDER ── */
.range-group { }
.range-header { display:flex; justify-content:space-between; margin-bottom:4px; }
.range-val { font-family:var(--mono); font-size:13px; color:var(--primary); font-weight:600; }
input[type="range"] { width:100%; accent-color:var(--primary); height:4px; }

/* ── QR PREVIEW ── */
.preview-card { position:sticky; top:calc(var(--header-h) + 24px); }
.preview-qr {
  padding:32px; display:flex; align-items:center; justify-content:center;
  min-height:320px; background:var(--bg); border-bottom:1px solid var(--border);
}
.preview-qr canvas, .preview-qr svg { max-width:100%!important; height:auto!important; }
.preview-actions { padding:20px; }
.dl-row { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:12px; }
.size-select { display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.size-select label { font-size:13px; color:var(--text-muted); font-weight:500; flex-shrink:0; margin:0; }
.size-select .form-select { flex:1; }
.save-section { border-top:1px solid var(--border); padding-top:16px; margin-top:16px; }

/* ── PRESETS ── */
.presets-bar { margin-bottom:24px; }
.presets-label { font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.08em; color:var(--text-light); margin-bottom:10px; }
.presets-scroll { display:flex; gap:8px; overflow-x:auto; scrollbar-width:none; padding-bottom:4px; }
.presets-scroll::-webkit-scrollbar { display:none; }
.preset-chip {
  flex-shrink:0; display:flex; align-items:center; gap:8px; padding:10px 16px;
  background:var(--white); border:1px solid var(--border); border-radius:var(--radius-sm);
  cursor:pointer; transition:all var(--transition);
}
.preset-chip:hover { border-color:var(--primary); box-shadow:var(--shadow); }
.preset-chip.active { border-color:var(--primary); background:var(--primary-light); }
.preset-chip-emoji { font-size:20px; }
.preset-chip-name { font-size:13px; font-weight:600; color:var(--text); white-space:nowrap; }
.preset-chip-sub { font-size:11px; color:var(--text-muted); white-space:nowrap; }
.preset-chip-tag {
  font-size:9px; font-weight:700; background:var(--danger); color:#fff;
  padding:1px 6px; border-radius:20px; text-transform:uppercase; margin-left:2px;
}

/* ── WORKSPACE ── */
.workspace { display:grid; grid-template-columns:1fr 380px; gap:24px; align-items:start; }

/* ── QR CARDS GRID ── */
.qr-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:16px; }
.qr-card {
  background:var(--white); border:1px solid var(--border); border-radius:var(--radius);
  padding:20px; cursor:pointer; transition:all var(--transition); box-shadow:var(--shadow-sm);
}
.qr-card:hover { border-color:var(--primary); box-shadow:var(--shadow); transform:translateY(-2px); }
.qr-card-top { display:flex; align-items:center; gap:12px; margin-bottom:10px; }
.qr-card-icon { font-size:24px; }
.qr-card-label { font-size:15px; font-weight:600; color:var(--text); flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.qr-card-meta { font-size:12px; color:var(--text-muted); margin-bottom:4px; }
.qr-card-date { font-size:11px; color:var(--text-light); }
.qr-card-actions { display:flex; gap:6px; margin-top:12px; flex-wrap:wrap; }
.qr-card-actions .btn { padding:6px 12px; font-size:11px; }

/* ── DYNAMIC QR CARDS ── */
.dqr-card {
  background:var(--white); border:1px solid var(--border); border-radius:var(--radius);
  padding:20px; cursor:pointer; transition:all var(--transition); box-shadow:var(--shadow-sm);
}
.dqr-card:hover { border-color:var(--primary); box-shadow:var(--shadow); }
.dqr-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.dqr-label { font-size:15px; font-weight:600; }
.dqr-scans { font-size:24px; font-weight:700; font-family:var(--mono); color:var(--primary); }
.dqr-url { font-size:12px; color:var(--text-muted); word-break:break-all; margin-bottom:4px; }
.dqr-code { font-size:12px; font-family:var(--mono); color:var(--primary); }
.dqr-info { font-size:11px; color:var(--text-light); margin-top:4px; }
.dqr-actions { display:flex; gap:6px; margin-top:12px; flex-wrap:wrap; }
.dqr-actions .btn { padding:6px 12px; font-size:11px; }

/* ── ANALYTICS ── */
.analytics-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:24px; }
.chart-card { margin-bottom:16px; }
.chart-container { height:180px; position:relative; }
.breakdown-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:16px; }
.breakdown-item { display:flex; justify-content:space-between; padding:8px 0; border-bottom:1px solid var(--border); font-size:13px; }
.breakdown-item:last-child { border:none; }
.breakdown-val { font-weight:600; font-family:var(--mono); }

/* ── SHORT URL ── */
.short-url-box {
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  background:var(--bg); border:1px solid var(--border); border-radius:var(--radius-sm);
  padding:10px 14px; margin:12px 0; font-family:var(--mono); font-size:13px;
}
.short-url-box span { word-break:break-all; }

/* ── USER DETAIL ── */
.user-detail-card { margin-bottom:20px; }
.user-cover { height:120px; background:linear-gradient(135deg,var(--primary),#6366F1); border-radius:var(--radius) var(--radius) 0 0; position:relative; }
.user-detail-body { padding:0 24px 24px; position:relative; }
.user-detail-avatar {
  width:64px; height:64px; border-radius:50%; background:var(--primary); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:24px; font-weight:700;
  border:3px solid var(--white); margin-top:-32px; position:relative;
}
.user-detail-name { font-size:18px; font-weight:700; margin-top:10px; }
.user-detail-email { font-size:13px; color:var(--text-muted); }
.detail-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:16px; }
.detail-item { }
.detail-label { font-size:11px; font-weight:600; text-transform:uppercase; color:var(--text-light); letter-spacing:.04em; margin-bottom:2px; }
.detail-value { font-size:14px; font-weight:500; }

/* ── MODE TOGGLE ── */
.mode-toggle { display:flex; border:1px solid var(--border); border-radius:var(--radius-sm); overflow:hidden; margin-bottom:14px; }
.mode-btn {
  flex:1; padding:9px 16px; text-align:center; font-size:12px; font-weight:600;
  cursor:pointer; transition:all var(--transition); background:var(--white); color:var(--text-muted);
}
.mode-btn:first-child { border-right:1px solid var(--border); }
.mode-btn.active { background:var(--primary); color:#fff; }
.dynamic-info { background:var(--info-light); border:1px solid var(--info); border-radius:var(--radius-sm); padding:12px 16px; margin-bottom:14px; font-size:12px; color:var(--info); line-height:1.5; }

/* ── TOAST ── */
.toast-container { position:fixed; top:80px; right:24px; z-index:9999; display:flex; flex-direction:column; gap:8px; }
.toast {
  display:flex; align-items:center; gap:10px; padding:12px 20px; border-radius:var(--radius-sm);
  font-size:13px; font-weight:500; box-shadow:var(--shadow-lg); animation:slideIn .25s ease;
  min-width:280px;
}
.toast-success { background:var(--success); color:#fff; }
.toast-error { background:var(--danger); color:#fff; }
.toast-info { background:var(--info); color:#fff; }
@keyframes slideIn { from{transform:translateX(100%);opacity:0} to{transform:translateX(0);opacity:1} }
@keyframes slideOut { from{transform:translateX(0);opacity:1} to{transform:translateX(100%);opacity:0} }

/* ── MODAL ── */
.modal-overlay {
  position:fixed; inset:0; background:rgba(15,23,42,.5); z-index:1000;
  display:none; align-items:center; justify-content:center; backdrop-filter:blur(4px);
}
.modal-overlay.show { display:flex; }
.modal {
  background:var(--white); border-radius:var(--radius); width:440px; max-width:92vw;
  box-shadow:var(--shadow-lg); overflow:hidden; animation:modalIn .2s ease;
}
@keyframes modalIn { from{transform:scale(.95);opacity:0} to{transform:scale(1);opacity:1} }
.modal-header { display:flex; align-items:center; justify-content:space-between; padding:20px 24px; border-bottom:1px solid var(--border); }
.modal-title { font-size:16px; font-weight:700; }
.modal-close { background:none; border:none; cursor:pointer; color:var(--text-muted); font-size:20px; padding:4px; border-radius:6px; }
.modal-close:hover { background:var(--bg); color:var(--text); }
.modal-body { padding:24px; }
.modal-footer { padding:16px 24px; border-top:1px solid var(--border); display:flex; justify-content:flex-end; gap:8px; }

/* ── AUTH PAGES ── */
.auth-page {
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  background:var(--bg); padding:24px;
}
.auth-card { background:var(--white); border-radius:var(--radius); box-shadow:var(--shadow-md); width:420px; max-width:100%; padding:40px; }
.auth-logo { display:flex; align-items:center; gap:10px; justify-content:center; margin-bottom:28px; }
.auth-title { font-size:22px; font-weight:700; text-align:center; margin-bottom:6px; }
.auth-subtitle { font-size:14px; color:var(--text-muted); text-align:center; margin-bottom:28px; }
.auth-divider { display:flex; align-items:center; gap:12px; margin:20px 0; color:var(--text-light); font-size:12px; }
.auth-divider::before, .auth-divider::after { content:''; flex:1; height:1px; background:var(--border); }
.auth-footer { text-align:center; font-size:13px; color:var(--text-muted); margin-top:20px; }
.auth-footer a { color:var(--primary); font-weight:600; }
.auth-link { font-size:13px; color:var(--primary); font-weight:500; cursor:pointer; }
.auth-error { background:var(--danger-light); color:var(--danger); padding:10px 14px; border-radius:var(--radius-sm); font-size:13px; margin-bottom:16px; display:none; }
.auth-success { background:var(--success-light); color:var(--success); padding:10px 14px; border-radius:var(--radius-sm); font-size:13px; margin-bottom:16px; }

/* ── SEARCH BAR ── */
.search-bar { display:flex; gap:10px; margin-bottom:12px; }
.search-bar .form-input { flex:1; }
.bulk-action-bar { display:flex; align-items:center; gap:10px; background:#fef2f2; border:1px solid #fecaca; border-radius:8px; padding:8px 14px; margin-bottom:12px; font-size:13px; font-weight:600; color:#dc2626; }
.bulk-action-bar span { flex:1; }

/* ── EMPTY STATE ── */
.empty-state {
  text-align:center; padding:60px 20px; color:var(--text-light);
}
.empty-icon { font-size:40px; margin-bottom:12px; opacity:.5; }
.empty-title { font-size:16px; font-weight:600; color:var(--text-muted); margin-bottom:4px; }
.empty-text { font-size:13px; }

/* ── SECTION TITLE ── */
.section-title { font-size:13px; font-weight:600; text-transform:uppercase; letter-spacing:.06em; color:var(--text-light); margin:28px 0 12px; }
.section-title:first-child { margin-top:0; }

/* ── BACK LINK ── */
.back-link { display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:600; color:var(--primary); cursor:pointer; margin-bottom:16px; }
.back-link:hover { text-decoration:underline; }

/* ── VIEWS ── */
.view { display:none; }
.view.active { display:block; }

/* ── RESPONSIVE ── */
@media(max-width:1280px) {
  .workspace-grid { grid-template-columns:1fr 340px; }
  :root { --sidebar-w:240px; }
}
@media(max-width:1024px) {
  .workspace-grid { grid-template-columns:1fr; }
  .qr-preview-panel { position:static; }
  .stats-grid, .analytics-grid { grid-template-columns:1fr 1fr; }
  .breakdown-grid { grid-template-columns:1fr; }
  .sidebar { transform:translateX(-100%); }
  .sidebar.open { transform:translateX(0); }
  .main { margin-left:0; width:100%; }
  .hamburger { display:flex; }
}
@media(max-width:768px) {
  .stats-grid { grid-template-columns:1fr 1fr; }
  .form-row { grid-template-columns:1fr; }
  .header-search { display:none; }
  .auth-brand-side { display:none; }
}
@media(max-width:480px) {
  .content { padding:16px; }
  .stats-grid { grid-template-columns:1fr; }
  .qr-grid { grid-template-columns:1fr; }
}

/* ── JS-Generated Classes ── */
.hidden { display:none !important; }
.mb-8 { margin-bottom:8px; }
.mb-16 { margin-bottom:16px; }
.mt-16 { margin-top:16px; }
.w-full { width:100%; }
.font-mono { font-family:var(--mono); }
.text-sm { font-size:13px; }
.text-muted { color:var(--text-muted); }
.text-danger { color:var(--danger) !important; }
.text-secondary { color:var(--text-muted); }

.content-header { margin-bottom:20px; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; }
.content-title { font-size:22px; font-weight:700; color:var(--text); }

.workspace-grid { display:grid; grid-template-columns:1fr 380px; gap:24px; align-items:start; }
@media(max-width:1024px) { .workspace-grid { grid-template-columns:1fr; } }

/* QR Preview Panel */
.qr-preview-panel { position:sticky; top:calc(var(--header-h) + 24px); }
.qr-preview-box { background:var(--white); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-sm); overflow:hidden; }
.qr-canvas { padding:32px; display:flex; align-items:center; justify-content:center; min-height:320px; background:var(--bg); border-bottom:1px solid var(--border); }
.qr-canvas canvas, .qr-canvas svg { max-width:100% !important; height:auto !important; }

/* QR Frame */
.qr-frame-wrap { background:var(--bg); padding:20px; display:flex; align-items:center; justify-content:center; border-bottom:1px solid var(--border); }
.qr-frame-outer { display:inline-flex; flex-direction:column; align-items:stretch; transition:all .2s ease; }
.qr-frame-outer .qr-canvas { border-bottom:none; min-height:unset; padding:16px; background:transparent; }
.qr-frame-outer.frame-active .qr-canvas { padding:12px; }
.qr-frame-band { display:flex; align-items:center; justify-content:center; padding:10px 16px; font-size:14px; font-weight:700; letter-spacing:.02em; min-height:44px; }
.qr-actions { padding:20px; }

/* View toggle */
.content-header-actions { display:flex; align-items:center; gap:8px; }
.view-toggle { display:flex; border:1px solid var(--border); border-radius:8px; overflow:hidden; }
.view-btn { background:none; border:none; padding:6px 10px; cursor:pointer; color:var(--text-muted); display:flex; align-items:center; transition:all .15s; }
.view-btn:hover { background:var(--bg); color:var(--text); }
.view-btn.active { background:var(--primary); color:#fff; }

/* QR Items */
.qr-item {
  background:var(--white); border:1px solid var(--border); border-radius:var(--radius);
  padding:20px; transition:all var(--transition); box-shadow:var(--shadow-sm); position:relative;
}
.qr-item:hover { border-color:var(--primary); box-shadow:var(--shadow); transform:translateY(-2px); }
.qr-item-cb { position:absolute; top:12px; right:12px; }
.qr-item-cb input[type=checkbox] { width:16px; height:16px; cursor:pointer; }
.qr-item-top { display:flex; align-items:center; gap:12px; margin-bottom:10px; }
.qr-item-icon { width:40px;height:40px;border-radius:var(--radius);background:var(--primary-light);display:flex;align-items:center;justify-content:center;color:var(--primary);flex-shrink:0; }
.qr-item-label { font-size:15px; font-weight:600; color:var(--text); flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; padding-right:24px; }
.qr-item-meta { font-size:12px; color:var(--text-muted); margin-bottom:10px; }
.qr-item-actions { display:flex; gap:6px; flex-wrap:wrap; }

/* Presets */
.preset-card {
  flex-shrink:0; display:flex; align-items:center; gap:10px; padding:10px 16px;
  background:var(--white); border:1px solid var(--border); border-radius:var(--radius-sm);
  cursor:pointer; transition:all var(--transition);
}
.preset-card:hover { border-color:var(--primary); box-shadow:var(--shadow); }
.preset-card.active { border-color:var(--primary); background:var(--primary-light); }
.preset-icon { display:flex; align-items:center; justify-content:center; width:28px; height:28px; background:var(--bg); border-radius:6px; color:var(--text-muted); flex-shrink:0; }
.preset-card.active .preset-icon { background:var(--primary-light); color:var(--primary); }
.preset-card:hover .preset-icon { color:var(--primary); }
.preset-name { font-size:13px; font-weight:600; color:var(--text); white-space:nowrap; }
.preset-colors { display:flex; gap:3px; margin-top:4px; }
.preset-dot { display:inline-block; width:10px; height:10px; border-radius:50%; flex-shrink:0; }
.preset-tag { font-size:9px; font-weight:700; background:var(--danger); color:#fff; padding:1px 6px; border-radius:20px; text-transform:uppercase; margin-left:4px; }

/* Color Input */
.color-input { display:flex; align-items:center; gap:8px; }
.color-swatch {
  width:40px; height:40px; border-radius:var(--radius-sm); border:1px solid var(--border);
  overflow:hidden; position:relative; cursor:pointer; flex-shrink:0;
}
.color-swatch input[type="color"] { position:absolute; inset:-6px; width:calc(100% + 12px); height:calc(100% + 12px); cursor:pointer; border:none; }
.color-input .form-input { flex:1; font-family:var(--mono); font-size:13px; }

/* Logo Dropzone */
.logo-dropzone {
  border:2px dashed var(--border); border-radius:var(--radius); padding:24px;
  text-align:center; cursor:pointer; transition:all var(--transition); background:var(--bg);
}
.logo-dropzone:hover { border-color:var(--primary); background:var(--primary-light); }
.logo-dropzone.has { border-style:solid; border-color:var(--primary); background:var(--primary-light); }
.logo-preview { width:52px; height:52px; object-fit:contain; border-radius:var(--radius-sm); margin:0 auto 8px; display:block; }
.logo-remove { font-size:12px; color:var(--danger); font-weight:600; cursor:pointer; margin-top:4px; }

/* Error Correction Hint */
.ec-hint { font-size:12px; color:var(--text-muted); margin-top:8px; line-height:1.5; }

/* Dynamic QR Items */
.dqr-item { background:var(--white); border:1px solid var(--border); border-radius:var(--radius); padding:20px; cursor:pointer; transition:all var(--transition); box-shadow:var(--shadow-sm); }
.dqr-item:hover { border-color:var(--primary); box-shadow:var(--shadow); }
.dqr-item-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.dqr-item-label { font-size:15px; font-weight:600; }
.dqr-item-scans { font-size:24px; font-weight:700; font-family:var(--mono); color:var(--primary); }
.dqr-item-url { font-size:12px; color:var(--text-muted); word-break:break-all; margin-bottom:4px; }
.dqr-item-code { font-size:12px; font-family:var(--mono); color:var(--primary); }
.dqr-item-info { font-size:11px; color:var(--text-light); margin-top:4px; }
.dqr-item-actions { display:flex; gap:6px; margin-top:12px; flex-wrap:wrap; }

/* User Detail */
.user-cover { height:120px; background:linear-gradient(135deg,var(--primary),#6366F1); border-radius:var(--radius) var(--radius) 0 0; }
.user-info-card { background:var(--white); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-sm); overflow:hidden; margin-bottom:20px; }
.user-info-body { padding:0 24px 24px; position:relative; }
.user-avatar-lg { width:64px; height:64px; border-radius:50%; background:var(--primary); color:#fff; display:flex; align-items:center; justify-content:center; font-size:24px; font-weight:700; border:3px solid var(--white); margin-top:-32px; }
.user-name-lg { font-size:18px; font-weight:700; margin-top:10px; }
.user-email-lg { font-size:13px; color:var(--text-muted); }

/* Dropdown */
.dropdown-menu { display:none; position:absolute; top:100%; right:0; background:var(--white); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-lg); z-index:100; min-width:200px; overflow:hidden; }
.dropdown-menu.show { display:block; }
.dropdown-header { padding:14px 16px; border-bottom:1px solid var(--border); }
.dropdown-header .name { font-size:14px; font-weight:600; }
.dropdown-header .email { font-size:12px; color:var(--text-muted); }
.dropdown-item { display:flex; align-items:center; gap:10px; padding:10px 16px; font-size:13px; font-weight:500; color:var(--text); cursor:pointer; }
.dropdown-item:hover { background:var(--bg); }
.dropdown-item svg { color:var(--text-muted); flex-shrink:0; }
.dropdown-item-danger { color:var(--danger); }
.dropdown-item-danger svg { color:var(--danger); }
.dropdown-item-danger:hover { background:var(--danger-light); }
.dropdown-divider { border-top:1px solid var(--border); }
.profile-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; align-items:start; }
@media(max-width:768px) { .profile-grid { grid-template-columns:1fr; } }

/* ── Plan Badge ── */
.plan-badge { font-size:10px; font-weight:700; padding:2px 7px; border-radius:20px; text-transform:uppercase; letter-spacing:.04em; }
.plan-badge-free { background:#F1F5F9; color:var(--text-muted); }
.plan-badge-pro { background:var(--primary-light); color:var(--primary); }
.plan-badge-business { background:#FEF3C7; color:#92400E; }

/* ── Usage Bar ── */
.usage-bar-wrap { margin-bottom:20px; background:var(--white); border:1px solid var(--border); border-radius:var(--radius-sm); padding:14px 16px; }
.usage-bar-label { display:flex; justify-content:space-between; align-items:center; font-size:13px; margin-bottom:8px; color:var(--text-muted); }
.usage-upgrade-link { color:var(--primary); font-weight:600; cursor:pointer; font-size:12px; }
.usage-upgrade-link:hover { text-decoration:underline; }
.usage-bar-track { height:6px; background:var(--border); border-radius:3px; overflow:hidden; }
.usage-bar-fill { height:100%; border-radius:3px; transition:width .4s ease; }

/* ── Upgrade Modal ── */
.upgrade-plan-card { background:var(--bg); border:2px solid var(--primary); border-radius:var(--radius); padding:24px; text-align:center; }
.upgrade-plan-name { font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--primary); margin-bottom:8px; }
.upgrade-plan-price { font-size:42px; font-weight:800; color:var(--text); line-height:1; margin-bottom:20px; }
.upgrade-plan-price span { font-size:16px; font-weight:500; color:var(--text-muted); }
.upgrade-plan-features { list-style:none; text-align:left; display:inline-block; }
.upgrade-plan-features li { font-size:14px; color:var(--text-muted); padding:5px 0; }
.upgrade-plan-features li::before { content:'✓ '; color:var(--success); font-weight:700; }

/* ── Bulk Generator ── */
.bulk-grid { display:grid; grid-template-columns:1fr 320px; gap:24px; align-items:start; }
@media(max-width:900px) { .bulk-grid { grid-template-columns:1fr; } }
.bulk-info-col { position:sticky; top:calc(var(--header-h) + 24px); }
.bulk-drop {
  border:2px dashed var(--border); border-radius:var(--radius); padding:32px 24px;
  text-align:center; cursor:pointer; transition:all var(--transition); background:var(--bg);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
}
.bulk-drop:hover, .bulk-drop.drag { border-color:var(--primary); background:var(--primary-light); }
.bulk-drop.has { border-style:solid; border-color:var(--success); background:var(--success-light); }
.content-subtitle { font-size:14px; color:var(--text-muted); margin-top:4px; }

.form-hint { font-size:12px; color:var(--text-muted); margin-top:6px; line-height:1.5; }
.color-extract { margin-top:12px; padding:12px; background:var(--bg); border-radius:var(--radius-sm); border:1px solid var(--border); }
.color-extract-label { font-size:11px; font-weight:600; color:var(--text-muted); text-transform:uppercase; letter-spacing:.06em; margin-bottom:8px; }
.color-extract-swatches { display:flex; gap:6px; flex-wrap:wrap; }
.color-swatch-btn { width:28px; height:28px; border-radius:50%; border:2px solid transparent; cursor:pointer; transition:transform .15s,box-shadow .15s; padding:0; }
.color-swatch-btn:hover { transform:scale(1.15); box-shadow:0 2px 8px rgba(0,0,0,.25); }
.color-swatch-btn.active { border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-light); }
/* ── Extra Utilities ── */
.text-xs { font-size:12px; }
.empty-desc { font-size:13px; color:var(--text-muted); }
.badge-gray { background:var(--bg); color:var(--text-muted); }
.ta { width:100%; border-collapse:collapse; }