/* QRDash 2026 visual refresh — loaded last so it can modernise legacy pages safely. */
:root {
  --qd-bg: #f4f7fb;
  --qd-surface: #ffffff;
  --qd-surface-soft: #f8fafc;
  --qd-surface-blue: #f3f7ff;
  --qd-text: #10213a;
  --qd-text-strong: #08162a;
  --qd-muted: #66758b;
  --qd-faint: #91a0b5;
  --qd-border: #dce5f0;
  --qd-border-soft: #e9eef5;
  --qd-primary: #2563eb;
  --qd-primary-strong: #1d4ed8;
  --qd-primary-soft: #eaf2ff;
  --qd-danger: #dc2626;
  --qd-success: #159447;
  --qd-radius: 18px;
  --qd-radius-sm: 12px;
  --qd-shadow: 0 12px 32px rgba(29, 48, 78, .08);
  --qd-shadow-lg: 0 24px 60px rgba(29, 48, 78, .13);
}
body.dark {
  --qd-bg: #07101d;
  --qd-surface: #0c1727;
  --qd-surface-soft: #101d2f;
  --qd-surface-blue: #0d1d35;
  --qd-text: #dbe6f5;
  --qd-text-strong: #f7fbff;
  --qd-muted: #98a8bd;
  --qd-faint: #6e8099;
  --qd-border: #22344b;
  --qd-border-soft: #192a3f;
  --qd-primary-soft: #102955;
  --qd-shadow: 0 14px 36px rgba(0, 0, 0, .22);
  --qd-shadow-lg: 0 24px 64px rgba(0, 0, 0, .34);
}

html { background: var(--qd-bg); }
body:not(.auth-body) {
  background:
    radial-gradient(circle at 12% -10%, rgba(37,99,235,.08), transparent 30rem),
    radial-gradient(circle at 95% 5%, rgba(14,165,233,.06), transparent 26rem),
    var(--qd-bg);
  color: var(--qd-text);
  min-height: 100vh;
}
body, button, input, select, textarea { font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.content { width: min(100%, 1460px); max-width: none; margin: 30px auto; padding: 0 28px 48px; }

/* Buttons */
.btn {
  min-height: 38px;
  padding: 9px 14px;
  border-radius: 11px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: -.005em;
  box-shadow: none;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease, color .15s ease;
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 8px 18px rgba(30,64,175,.14); }
.btn-primary { background: linear-gradient(135deg, #2f6fec, #2358d5); box-shadow: 0 7px 18px rgba(37,99,235,.18); }
.btn-primary:hover { background: linear-gradient(135deg, #3477f3, #1d4ed8); }
.btn-secondary { background: var(--qd-surface); color: var(--qd-text); border: 1px solid var(--qd-border); }
.btn-outline { background: var(--qd-surface); color: var(--qd-primary); border: 1px solid #b9cdf7; }
.btn-ghost { background: transparent; color: var(--qd-muted); border: 1px solid var(--qd-border); }
.btn-danger { background: #fff1f1; color: #c82020; border: 1px solid #ffcaca; }
body.dark .btn-danger { background:#32131a; color:#ff9da6; border-color:#5d2631; }
.btn-lg { min-height: 44px; padding: 10px 17px; font-size: 13px; border-radius: 12px; }
.btn-compact { min-height: 32px; padding: 6px 10px; font-size: 11px; border-radius: 9px; }

/* Generic legacy form polish */
.form-wrapper { max-width: 900px !important; margin: 30px auto !important; padding: 0 22px 44px !important; }
.form-card, .settings-card, .profile-card, .smtp-card {
  border: 1px solid var(--qd-border) !important;
  background: var(--qd-surface) !important;
  border-radius: 20px !important;
  box-shadow: var(--qd-shadow) !important;
}
.form-card { padding: 24px !important; }
.field-group label, .profile-field label, .smtp-field label { color: var(--qd-muted) !important; font-size: 12px !important; font-weight: 700 !important; }
.field-group input:not([type="color"]):not([type="checkbox"]):not([type="radio"]),
.field-group select, .field-group textarea,
.profile-field input, .profile-field select,
.smtp-field input, .smtp-field select, .smtp-field textarea {
  min-height: 42px;
  padding: 10px 12px !important;
  border: 1px solid var(--qd-border) !important;
  border-radius: 11px !important;
  background: var(--qd-surface-soft) !important;
  color: var(--qd-text-strong) !important;
  font-size: 13px !important;
  box-sizing: border-box;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.field-group textarea, .smtp-field textarea { min-height: 110px; }
.field-group input:focus, .field-group select:focus, .field-group textarea:focus,
.profile-field input:focus, .profile-field select:focus,
.smtp-field input:focus, .smtp-field select:focus, .smtp-field textarea:focus {
  outline: 0 !important;
  border-color: #74a1ff !important;
  box-shadow: 0 0 0 4px rgba(37,99,235,.10) !important;
  background: var(--qd-surface) !important;
}
.field-hint, .smtp-field-hint { color: var(--qd-faint) !important; font-size: 11px !important; line-height: 1.5 !important; }
.form-error, .form-success, .banner, .smtp-status { border-radius: 12px !important; padding: 11px 13px !important; font-size: 12px !important; }

/* Navbar — deliberate app chrome rather than a generic white bar. */
.app-nav { border-bottom: 1px solid rgba(207,219,234,.85) !important; box-shadow: 0 1px 0 rgba(255,255,255,.75); }
.app-nav-inner { width: min(100%, 1516px); min-height: 70px; padding: 0 28px; }
.app-nav-logo { gap: 11px; }
.app-nav-mark {
  width: 39px; height: 39px; border-radius: 12px; position: relative; overflow: hidden; font-size: 0;
  background: linear-gradient(145deg,#3375f0,#1f54d5); box-shadow: 0 8px 20px rgba(37,99,235,.22);
}
.app-nav-mark::before, .app-nav-mark::after { content:""; position:absolute; width:9px; height:9px; border:3px solid white; border-radius:2px; }
.app-nav-mark::before { left:8px; top:8px; box-shadow: 14px 0 0 -3px #fff, 0 14px 0 -3px #fff, 14px 14px 0 -3px rgba(255,255,255,.9); }
.app-nav-mark::after { right:7px; bottom:7px; width:4px; height:4px; border-width:2px; }
.app-nav-logo-main { font-size: 17px; font-weight: 800; color: var(--qd-text-strong); }
.app-nav-logo-sub { font-size: 8.5px; color: var(--qd-faint); }
.app-nav-links { gap: 3px; }
.app-nav-link { padding: 9px 11px; border-radius: 10px; font-size: 12px; color: var(--qd-muted); }
.app-nav-link:hover { color: var(--qd-primary-strong); background: var(--qd-primary-soft); }
.app-nav-link-active { color: var(--qd-primary-strong); background: var(--qd-primary-soft); border-color: transparent; }
.app-nav-link.app-nav-create { color:#fff; background:linear-gradient(135deg,#2f6fec,#2358d5); margin-left:3px; padding-inline:13px; box-shadow:0 6px 14px rgba(37,99,235,.15); }
.app-nav-link.app-nav-create:hover { color:#fff; background:linear-gradient(135deg,#3477f3,#1d4ed8); }
.app-nav-profile { padding: 4px 9px 4px 4px; border-color: var(--qd-border); background: var(--qd-surface); }
.app-nav-avatar { width:32px; height:32px; flex-basis:32px; background:linear-gradient(145deg,#dbeafe,#e0e7ff); color:#1e4fb6; }
.app-nav-profile-text strong { font-size:10.5px; color:var(--qd-text); }
.app-nav-profile-text small { font-size:8.5px; color:var(--qd-faint); }
body.dark .app-nav { background:rgba(7,16,29,.92) !important; border-color:#1e3048 !important; }
body.dark .app-nav-profile { background:var(--qd-surface); border-color:var(--qd-border); }
body.dark .app-nav-avatar { background:linear-gradient(145deg,#18376a,#243d77); color:#dbeafe; }

/* Dashboard */
.dashboard-v2 { gap: 18px !important; }
.dashboard-hero {
  position:relative; overflow:hidden; align-items:stretch !important; padding: 30px !important; border:1px solid #cfe0ff !important;
  border-radius:24px !important;
  background: linear-gradient(125deg,#ffffff 0%,#f5f9ff 48%,#edf4ff 100%) !important;
  box-shadow: 0 18px 44px rgba(43,78,125,.08) !important;
}
.dashboard-hero::after { content:""; position:absolute; width:280px; height:280px; right:-105px; top:-125px; border-radius:50%; background:radial-gradient(circle,rgba(37,99,235,.16),rgba(37,99,235,0) 67%); pointer-events:none; }
.dashboard-hero > div:first-child { align-self:center; max-width:720px; }
.dashboard-eyebrow { margin-bottom:8px !important; font-size:10px !important; color:#3268cd !important; }
.dashboard-hero h1 { font-size:34px !important; line-height:1.08; font-weight:780; letter-spacing:-.045em !important; color:var(--qd-text-strong) !important; }
.dashboard-hero p { max-width:640px; margin-top:9px !important; font-size:14px !important; line-height:1.55; color:var(--qd-muted) !important; }
.dashboard-hero-actions { align-self:center; justify-content:flex-end; z-index:1; }
.dashboard-stats { gap:14px !important; }
.dashboard-stats article {
  position:relative; min-height:116px; padding:17px 18px 16px 19px !important; overflow:hidden;
  border:1px solid var(--qd-border) !important; border-radius:18px !important; background:var(--qd-surface) !important; box-shadow:var(--qd-shadow) !important;
}
.dashboard-stats article::after { content:""; position:absolute; width:70px; height:70px; border-radius:24px; right:-20px; bottom:-25px; background:var(--metric-glow,#eaf2ff); transform:rotate(18deg); }
.dashboard-stats article:nth-child(2) { --metric-glow:#e8f8f0; }
.dashboard-stats article:nth-child(3) { --metric-glow:#fff4dc; }
.dashboard-stats article:nth-child(4) { --metric-glow:#f2ebff; }
.dashboard-stats span { font-size:10px !important; color:var(--qd-faint) !important; }
.dashboard-stats strong { margin-top:8px !important; font-size:30px !important; font-weight:770; color:var(--qd-text-strong) !important; }
.dashboard-stats small { margin-top:6px !important; font-size:11px !important; color:var(--qd-muted) !important; }
.dashboard-table-card { border-radius:20px !important; border-color:var(--qd-border) !important; box-shadow:var(--qd-shadow) !important; background:var(--qd-surface) !important; }
.dashboard-table-head { padding:18px 20px !important; border-color:var(--qd-border-soft) !important; }
.dashboard-table-head h2 { font-size:18px !important; color:var(--qd-text-strong); }
.dashboard-table-head p { margin-top:4px !important; font-size:11px !important; color:var(--qd-faint) !important; }
.dashboard-filters { gap:9px !important; }
.dashboard-search { width:min(360px,35vw) !important; height:42px !important; border:1px solid var(--qd-border) !important; border-radius:11px !important; background:var(--qd-surface-soft) !important; }
.dashboard-search input { font-size:12.5px !important; color:var(--qd-text) !important; }
#qr-type-filter, #qr-sort { height:42px; padding:0 31px 0 11px; border:1px solid var(--qd-border); border-radius:11px; background:var(--qd-surface-soft); color:var(--qd-text); font-size:11.5px; }
.dashboard-table th { padding:11px 14px !important; font-size:9.5px !important; color:var(--qd-faint) !important; background:var(--qd-surface-soft); }
.dashboard-table td { padding:13px 14px !important; font-size:12px !important; border-color:var(--qd-border-soft) !important; color:var(--qd-text); }
.dashboard-table tbody tr { transition:background .14s ease; }
.dashboard-table tbody tr:hover { background:#f9fbff !important; }
body.dark .dashboard-table tbody tr:hover { background:#101d2f !important; }
.qr-thumb { width:62px !important; height:62px !important; border-radius:13px !important; border-color:var(--qd-border) !important; padding:3px; box-sizing:border-box; }
.qr-name-cell strong { font-size:13px !important; color:var(--qd-text-strong) !important; }
.qr-name-cell small { font-size:10px !important; color:var(--qd-faint) !important; }
.qr-type-badge { padding:4px 8px !important; font-size:9.5px !important; }
.stat-count { font-size:12.5px !important; color:var(--qd-text-strong) !important; }
.stat-muted { margin-top:2px; font-size:10px !important; color:var(--qd-faint) !important; }
.activity-link { margin-top:5px !important; font-size:10px !important; }
.dashboard-actions { min-width:190px !important; flex-wrap:nowrap !important; align-items:center; }
.dashboard-more { position:relative; }
.dashboard-more > summary { list-style:none; cursor:pointer; user-select:none; }
.dashboard-more > summary::-webkit-details-marker { display:none; }
.dashboard-more-menu {
  position:absolute; right:0; top:calc(100% + 7px); z-index:30; width:155px; padding:6px; border:1px solid var(--qd-border);
  border-radius:12px; background:var(--qd-surface); box-shadow:var(--qd-shadow-lg);
}
.dashboard-more-menu a, .dashboard-more-menu button {
  width:100%; min-height:34px; display:flex; align-items:center; padding:7px 9px; box-sizing:border-box; border:0; border-radius:8px;
  background:transparent; color:var(--qd-text); text-decoration:none; font-size:11px; font-weight:650; cursor:pointer; text-align:left;
}
.dashboard-more-menu a:hover, .dashboard-more-menu button:hover { background:var(--qd-surface-soft); }
.dashboard-more-menu .danger { color:#c82020; }

/* Users */
.users-shell { gap:18px !important; }
.users-hero { padding:28px !important; border-radius:22px !important; border-color:#cfe0ff !important; background:linear-gradient(125deg,#fff,#f4f8ff) !important; box-shadow:var(--qd-shadow) !important; }
.users-title { font-size:31px !important; color:var(--qd-text-strong); }
.users-subtitle { font-size:13.5px !important; line-height:1.5; color:var(--qd-muted) !important; }
.users-stats { gap:14px !important; }
.users-stat { min-height:104px; padding:16px 18px !important; border-color:var(--qd-border) !important; border-radius:18px !important; background:var(--qd-surface) !important; box-shadow:var(--qd-shadow) !important; }
.users-stat span { font-size:10px !important; color:var(--qd-faint) !important; }
.users-stat strong { margin-top:7px !important; font-size:29px !important; color:var(--qd-text-strong) !important; }
.users-stat small { margin-top:5px !important; font-size:10.5px !important; color:var(--qd-muted) !important; }
.users-table-card { border-color:var(--qd-border) !important; border-radius:20px !important; background:var(--qd-surface) !important; box-shadow:var(--qd-shadow) !important; }
.users-table-head { padding:18px 20px !important; border-color:var(--qd-border-soft) !important; }
.users-table-head h2 { font-size:18px !important; color:var(--qd-text-strong); }
.users-table-head p { font-size:11px !important; }
.users-table-controls { display:flex; gap:9px; align-items:center; }
.users-search { width:min(340px,32vw) !important; height:42px !important; border-color:var(--qd-border) !important; background:var(--qd-surface-soft) !important; }
.users-search input { font-size:12px !important; color:var(--qd-text) !important; }
#users-filter { height:42px; padding:0 31px 0 11px; border:1px solid var(--qd-border); border-radius:11px; background:var(--qd-surface-soft); color:var(--qd-text); font-size:11.5px; }
.users-table { min-width:1120px !important; }
.users-table th { padding:11px 13px !important; font-size:9.5px !important; color:var(--qd-faint) !important; background:var(--qd-surface-soft) !important; }
.users-table td { padding:13px !important; border-color:var(--qd-border-soft) !important; color:var(--qd-text) !important; }
.user-ident { gap:10px !important; }
.user-avatar { width:38px !important; height:38px !important; flex-basis:38px !important; border-radius:12px !important; font-size:13px !important; background:linear-gradient(145deg,#dbeafe,#e8edff) !important; }
.user-ident-text strong,.users-stack strong { font-size:12px !important; color:var(--qd-text-strong) !important; }
.user-ident-text small,.users-stack small { font-size:10px !important; line-height:1.4; color:var(--qd-muted) !important; }
.user-ident-text em { font-size:9px !important; color:var(--qd-faint) !important; }
.users-rights-pill,.users-sec-pill,.login-method { font-size:9.5px !important; }
.users-actions { min-width:128px !important; flex-wrap:nowrap !important; }
.users-more { position:relative; }
.users-more > summary { list-style:none; cursor:pointer; }
.users-more > summary::-webkit-details-marker { display:none; }
.users-more-menu { position:absolute; right:0; top:calc(100% + 7px); z-index:35; width:170px; padding:6px; border:1px solid var(--qd-border); border-radius:12px; background:var(--qd-surface); box-shadow:var(--qd-shadow-lg); }
.users-more-menu button { width:100%; min-height:34px; display:flex; align-items:center; padding:7px 9px; border:0; border-radius:8px; background:transparent; color:var(--qd-text); font-size:11px; font-weight:650; cursor:pointer; text-align:left; }
.users-more-menu button:hover { background:var(--qd-surface-soft); }
.users-more-menu form { width:100%; display:block !important; }
.users-more-menu .danger { color:#c82020; }
.users-modal-dialog { padding:23px !important; border-color:var(--qd-border) !important; border-radius:20px !important; background:var(--qd-surface) !important; box-shadow:var(--qd-shadow-lg) !important; }
.users-modal-title { font-size:21px !important; color:var(--qd-text-strong); }
.users-modal-form > label:not(.users-check):not(.users-radio) { font-size:11.5px !important; color:var(--qd-muted) !important; }
.users-modal-form input[type="text"],.users-modal-form input[type="email"],.users-modal-form select { min-height:42px; border-color:var(--qd-border) !important; border-radius:11px !important; background:var(--qd-surface-soft) !important; color:var(--qd-text) !important; }

/* Scan analytics */
.scans-hero { padding:26px !important; border-radius:22px !important; border-color:#cfe0ff !important; background:linear-gradient(125deg,#fff,#f4f8ff) !important; box-shadow:var(--qd-shadow) !important; }
.scans-hero h1 { font-size:31px !important; color:var(--qd-text-strong); }
.scans-hero p { font-size:12.5px !important; color:var(--qd-muted) !important; }
.scans-stats article { min-height:92px; padding:16px !important; border-color:var(--qd-border) !important; border-radius:17px !important; background:var(--qd-surface) !important; box-shadow:var(--qd-shadow) !important; }
.scans-stats span { font-size:9.5px !important; }
.scans-stats strong { font-size:25px !important; color:var(--qd-text-strong) !important; }
.scans-card { border-color:var(--qd-border) !important; border-radius:20px !important; background:var(--qd-surface) !important; box-shadow:var(--qd-shadow) !important; }
.scans-card-head { padding:17px 19px !important; border-color:var(--qd-border-soft) !important; }
.scans-card-head h2 { font-size:17px !important; color:var(--qd-text-strong); }
.scans-card-head p { font-size:10.5px !important; }
.scans-table th { padding:10px 12px !important; font-size:9.5px !important; background:var(--qd-surface-soft) !important; }
.scans-table td { padding:12px !important; font-size:10.5px !important; border-color:var(--qd-border-soft) !important; color:var(--qd-text) !important; }
.scans-table td strong { font-size:11px !important; color:var(--qd-text-strong) !important; }

/* SMTP and settings/profile surfaces */
.smtp-shell { gap:18px !important; }
.smtp-card { padding:22px !important; }
.smtp-title { font-size:23px !important; color:var(--qd-text-strong) !important; }
.smtp-subtitle { font-size:12.5px !important; color:var(--qd-muted) !important; }
.smtp-grid { gap:13px 15px !important; }
.smtp-selfsigned-field { padding:13px 14px !important; border-radius:13px !important; }
.smtp-templates-title { font-size:18px !important; color:var(--qd-text-strong) !important; }
.template-item { padding:9px 10px !important; border:1px solid var(--qd-border-soft); border-radius:10px !important; background:var(--qd-surface-soft) !important; }
.template-item.active { border-color:#2563eb !important; background:#2563eb !important; }
.settings-header, .profile-header { border-radius:22px !important; }
.settings-card, .profile-card { overflow:hidden; }

/* Better mobile treatment */
@media (max-width: 920px) {
  .app-nav-inner { min-height:62px; padding:0 14px; }
  .app-nav-brand { display:flex !important; }
  .app-nav-logo-sub { display:none; }
  .app-nav-links { left:8px !important; right:8px !important; top:calc(100% + 7px) !important; padding:9px !important; border-radius:17px !important; border-color:var(--qd-border) !important; background:rgba(255,255,255,.985) !important; box-shadow:var(--qd-shadow-lg) !important; }
  body.dark .app-nav-links { background:rgba(9,20,35,.99) !important; }
  .app-nav-link { padding:11px 12px !important; font-size:13px !important; }
  .app-nav-link.app-nav-create { margin:0 0 2px !important; }
  .app-nav-profile { border-radius:12px !important; }
}
@media (max-width: 768px) {
  .content { margin:18px auto !important; padding:0 12px 34px !important; }
  .form-wrapper { margin:18px auto !important; padding:0 12px 34px !important; }
  .form-card { padding:17px 14px !important; border-radius:17px !important; }
  .dashboard-hero { padding:21px 17px !important; border-radius:19px !important; }
  .dashboard-hero h1 { font-size:27px !important; }
  .dashboard-hero p { font-size:12.5px !important; }
  .dashboard-hero-actions { width:100%; display:grid !important; grid-template-columns:1.2fr .8fr !important; }
  .dashboard-stats { gap:9px !important; }
  .dashboard-stats article { min-height:100px; padding:14px !important; border-radius:15px !important; }
  .dashboard-stats strong { font-size:25px !important; }
  .dashboard-table-head { padding:13px !important; border-radius:15px !important; }
  .dashboard-filters { grid-template-columns:1fr 1fr !important; }
  .dashboard-search { grid-column:1 / -1; width:100% !important; }
  #qr-type-filter, #qr-sort { width:100%; }
  .dashboard-table tr { position:relative; padding:13px !important; border-radius:17px !important; box-shadow:var(--qd-shadow) !important; }
  .dashboard-table .qr-cell { padding-bottom:12px !important; }
  .dashboard-table .qr-thumb { width:78px !important; height:78px !important; }
  .dashboard-table td { padding:8px 0 !important; }
  .dashboard-table td::before { flex-basis:78px !important; font-size:8.5px !important; }
  .dashboard-actions { display:grid !important; grid-template-columns:1fr 1fr auto; gap:7px !important; padding-top:11px !important; }
  .dashboard-actions::before { display:none !important; }
  .dashboard-actions .btn { width:100%; min-height:36px !important; }
  .dashboard-more { width:auto; }
  .dashboard-more > summary { min-width:44px; }
  .dashboard-more-menu { position:fixed; left:10px; right:10px; bottom:10px; top:auto; width:auto; padding:8px; border-radius:16px; }
  .dashboard-more-menu a,.dashboard-more-menu button { min-height:43px; font-size:12px; }
  .users-hero { padding:20px 16px !important; border-radius:18px !important; }
  .users-title { font-size:26px !important; }
  .users-stats { gap:9px !important; }
  .users-stat { min-height:91px; padding:13px !important; border-radius:15px !important; }
  .users-stat strong { font-size:24px !important; }
  .users-table-head { padding:13px !important; border-radius:15px !important; }
  .users-table-controls { display:grid; grid-template-columns:1fr 118px; }
  .users-search { width:100% !important; }
  .users-table tr { padding:13px !important; border-radius:17px !important; box-shadow:var(--qd-shadow) !important; }
  .users-table td { padding:8px 0 !important; }
  .users-table td::before { flex-basis:90px !important; font-size:8.5px !important; }
  .users-actions { display:grid !important; grid-template-columns:1fr auto; width:100%; padding-top:11px !important; }
  .users-actions::before { display:none !important; }
  .users-actions > .btn { width:100%; }
  .users-more-menu { position:fixed; left:10px; right:10px; bottom:10px; top:auto; width:auto; padding:8px; border-radius:16px; }
  .users-more-menu button { min-height:43px; font-size:12px; }
  .scans-hero { padding:19px 16px !important; border-radius:18px !important; }
  .scans-hero h1 { font-size:26px !important; }
  .scans-table tr { border-radius:16px !important; box-shadow:var(--qd-shadow) !important; }
  .smtp-card { padding:17px 14px !important; border-radius:17px !important; }
  .btn-lg { min-height:43px; }
}
@media (max-width: 480px) {
  .dashboard-stats, .users-stats, .scans-stats { grid-template-columns:1fr 1fr !important; }
  .dashboard-stats article, .users-stat, .scans-stats article { min-width:0; }
  .dashboard-hero-actions { grid-template-columns:1fr !important; }
  .dashboard-filters { grid-template-columns:1fr !important; }
  .dashboard-search { grid-column:auto; }
  .users-table-controls { grid-template-columns:1fr !important; }
  #users-filter { width:100%; }
}

/* Authentication screens */
.auth-body {
  background:
    radial-gradient(circle at 20% 15%, rgba(45,116,246,.26), transparent 28rem),
    radial-gradient(circle at 85% 80%, rgba(79,70,229,.18), transparent 32rem),
    linear-gradient(145deg,#07101e,#0b1830 55%,#07111f) !important;
}
.auth-body .auth-wrapper { padding:24px; }
.auth-body .auth-card {
  max-width:440px; padding:29px 28px 24px; border-radius:24px !important;
  background:rgba(8,17,31,.88) !important; border:1px solid rgba(148,163,184,.18);
  box-shadow:0 32px 90px rgba(0,0,0,.44), inset 0 1px 0 rgba(255,255,255,.04) !important;
  backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px);
}
.auth-body .auth-logo { width:36px; height:36px; border-radius:12px !important; background:linear-gradient(145deg,#397af3,#4f46e5); color:#fff; box-shadow:0 8px 20px rgba(37,99,235,.28); }
.auth-body .auth-brand-title { font-size:15px; font-weight:750; }
.auth-body .auth-brand-subtitle { font-size:10px; letter-spacing:.04em; }
.auth-body .auth-title { margin-top:18px; font-size:28px; font-weight:750; letter-spacing:-.035em; }
.auth-body .auth-subtitle { margin-bottom:20px; font-size:12.5px; line-height:1.5; color:#94a3b8; }
.auth-body .auth-form label, .auth-body .auth-card > label { font-size:11.5px; font-weight:650; color:#aab7c9; }
.auth-body .auth-form input, .auth-body .auth-card > input {
  min-height:45px; padding:11px 12px; border-radius:11px; border:1px solid #27384f; background:#091424; color:#f1f5f9; font-size:13px;
}
.auth-body .auth-form input:focus, .auth-body .auth-card > input:focus { border-color:#4c83f4; box-shadow:0 0 0 4px rgba(59,130,246,.13); }
.auth-body .auth-submit, .auth-body .auth-card > .btn { min-height:46px; border-radius:11px; font-size:13px; }
.auth-body .btn-alt { min-height:43px; border-radius:11px; border-color:#2a3a51; background:#0c1727; font-size:12px; }
.auth-body .btn-alt:hover { background:#10203a; border-color:#4d7ddd; }
.auth-body .auth-meta { margin-top:16px; font-size:9.5px; color:#64748b; }
.auth-body .auth-alt { font-size:12px; color:#94a3b8; text-align:center; }
.auth-body .auth-alt a { color:#93c5fd; }

/* Legacy create/edit forms */
.form-card > h2 { margin:0 0 22px !important; padding-bottom:17px; border-bottom:1px solid var(--qd-border-soft); font-size:25px !important; line-height:1.15; letter-spacing:-.035em; color:var(--qd-text-strong) !important; }
.form-card > label { display:block; margin:13px 0 5px; color:var(--qd-muted); font-size:12px; font-weight:700; }
.form-card > input:not([type="color"]):not([type="range"]):not([type="checkbox"]):not([type="radio"]), .form-card > select {
  width:100%; min-height:43px; padding:10px 12px; border:1px solid var(--qd-border); border-radius:11px; background:var(--qd-surface-soft); color:var(--qd-text); box-sizing:border-box;
}
.form-card > input:focus, .form-card > select:focus { outline:0; border-color:#74a1ff; box-shadow:0 0 0 4px rgba(37,99,235,.10); }
.form-card input[type="color"] { width:56px; height:42px; padding:3px; border:1px solid var(--qd-border); border-radius:10px; background:var(--qd-surface); }
.form-card input[type="range"] { accent-color:var(--qd-primary); }
.form-card .field-group { margin-top:16px; padding-top:3px; }
.form-card .radio-row { gap:8px !important; }
.form-card .radio-row label, .form-card .checkbox-inline { padding:9px 11px; border:1px solid var(--qd-border); border-radius:10px; background:var(--qd-surface-soft); color:var(--qd-text); }
.form-card .grid-2, .form-card .grid-3 { gap:12px !important; }
.dashboard-hero-meta { display:flex; flex-wrap:wrap; gap:8px 18px; margin-top:17px; }
.dashboard-hero-meta span { position:relative; padding-left:12px; font-size:10px; color:var(--qd-faint); }
.dashboard-hero-meta span::before { content:""; position:absolute; left:0; top:.43em; width:5px; height:5px; border-radius:50%; background:#5b8df0; box-shadow:0 0 0 3px rgba(37,99,235,.10); }
.dashboard-hero-meta b { display:block; margin-bottom:2px; font-size:11px; font-weight:750; color:var(--qd-text); }
body.dark .dashboard-hero, body.dark .users-hero, body.dark .scans-hero { background:linear-gradient(125deg,#0b1728,#10213a) !important; border-color:#25405f !important; }
body.dark .dashboard-table-card,body.dark .users-table-card,body.dark .scans-card { background:var(--qd-surface) !important; border-color:var(--qd-border) !important; }
body.dark .dashboard-table th,body.dark .users-table th,body.dark .scans-table th { background:var(--qd-surface-soft) !important; }
body.dark .dashboard-search,body.dark #qr-type-filter,body.dark #qr-sort,body.dark .users-search,body.dark #users-filter { background:var(--qd-surface-soft) !important; border-color:var(--qd-border) !important; color:var(--qd-text) !important; }
@media(max-width:768px){.dashboard-hero-meta{display:grid;grid-template-columns:1fr 1fr;gap:10px}.dashboard-hero-meta span:last-child{grid-column:1/-1}.dashboard-hero-meta b{font-size:10.5px}}
.qd-toast { position:fixed; left:50%; bottom:24px; z-index:2000; max-width:min(90vw,420px); padding:11px 15px; border:1px solid rgba(255,255,255,.14); border-radius:12px; background:rgba(8,20,37,.94); color:#f8fafc; font-size:12px; font-weight:700; box-shadow:0 18px 50px rgba(0,0,0,.28); backdrop-filter:blur(14px); transform:translate(-50%,18px); opacity:0; pointer-events:none; transition:opacity .18s ease,transform .18s ease; }
.qd-toast.qd-toast-show { opacity:1; transform:translate(-50%,0); }
@media(max-width:768px){.qd-toast{bottom:15px;width:calc(100vw - 30px);box-sizing:border-box;text-align:center}}

/* 2026 theme system */
body.theme-classic{--qd-primary:#2563eb;--qd-primary-strong:#1d4ed8;--qd-wash:#eff6ff;--qd-wash-2:#eef2ff}
body.theme-ocean{--qd-primary:#0284c7;--qd-primary-strong:#0369a1;--qd-wash:#ecfeff;--qd-wash-2:#e0f2fe;background:radial-gradient(circle at 12% -10%,rgba(14,165,233,.15),transparent 30rem),#f5fbfd}
body.theme-violet{--qd-primary:#7c3aed;--qd-primary-strong:#6d28d9;--qd-wash:#f5f3ff;--qd-wash-2:#eef2ff;background:radial-gradient(circle at 12% -10%,rgba(124,58,237,.13),transparent 30rem),#faf8ff}
body.theme-emerald{--qd-primary:#059669;--qd-primary-strong:#047857;--qd-wash:#ecfdf5;--qd-wash-2:#f0fdfa;background:radial-gradient(circle at 12% -10%,rgba(5,150,105,.12),transparent 30rem),#f7fcfa}
body.theme-sunset{--qd-primary:#ea580c;--qd-primary-strong:#c2410c;--qd-wash:#fff7ed;--qd-wash-2:#fffbeb;background:radial-gradient(circle at 12% -10%,rgba(234,88,12,.12),transparent 30rem),#fffaf6}
body.theme-midnight{--qd-primary:#3b82f6;--qd-primary-strong:#2563eb;--qd-wash:#10213a;--qd-wash-2:#0b1730}
body.theme-graphite{--qd-primary:#8b5cf6;--qd-primary-strong:#7c3aed;--qd-wash:#1f2937;--qd-wash-2:#111827;background:radial-gradient(circle at 12% -10%,rgba(139,92,246,.18),transparent 30rem),#0b0f16}
body.theme-graphite.dark{color:#e5e7eb}
body.theme-graphite.dark .app-nav{background:rgba(15,18,25,.94);border-color:#28303b}
body.theme-graphite.dark .dashboard-hero,body.theme-graphite.dark .users-hero,body.theme-graphite.dark .scans-hero{background:linear-gradient(135deg,#151a23,#1c2430)!important;border-color:#303a47!important}
body.theme-graphite.dark .dashboard-stat,body.theme-graphite.dark .users-stat,body.theme-graphite.dark .qr-table-card,body.theme-graphite.dark .users-table-card{background:#11161f!important;border-color:#2a3340!important}
.btn-primary,.app-nav-link.app-nav-create{background:linear-gradient(135deg,var(--qd-primary,#2563eb),var(--qd-primary-strong,#1d4ed8))!important}
.btn-outline{border-color:var(--qd-primary,#2563eb)!important;color:var(--qd-primary,#2563eb)!important}
.dashboard-eyebrow,.eyebrow,.scans-eyebrow,.settings-eyebrow,.profile-eyebrow,.settings-step,.profile-panel-head>div>span{color:var(--qd-primary,#2563eb)!important}
.app-nav-mark{background:linear-gradient(145deg,var(--qd-primary,#2563eb),var(--qd-primary-strong,#1d4ed8))!important}
.app-nav-link-active{color:var(--qd-primary,#2563eb)!important}
.qd-toast{border-color:color-mix(in srgb,var(--qd-primary,#2563eb) 28%,#dbe3ee)!important}
.app-nav-avatar-img{width:100%;height:100%;display:block;object-fit:cover;border-radius:inherit}
body.theme-ocean .dashboard-hero,body.theme-ocean .users-hero,body.theme-ocean .scans-hero{background:linear-gradient(125deg,#fff,#effcff)!important;border-color:#bae6fd!important}
body.theme-violet .dashboard-hero,body.theme-violet .users-hero,body.theme-violet .scans-hero{background:linear-gradient(125deg,#fff,#f5f3ff)!important;border-color:#ddd6fe!important}
body.theme-emerald .dashboard-hero,body.theme-emerald .users-hero,body.theme-emerald .scans-hero{background:linear-gradient(125deg,#fff,#ecfdf5)!important;border-color:#bbf7d0!important}
body.theme-sunset .dashboard-hero,body.theme-sunset .users-hero,body.theme-sunset .scans-hero{background:linear-gradient(125deg,#fff,#fff7ed)!important;border-color:#fed7aa!important}

/* =========================================================
   2026-09 layout hardening: desktop action alignment +
   genuinely viewport-safe mobile cards/forms.
   Loaded last intentionally to override legacy mobile rules.
   ========================================================= */

/* Keep the Actions column as a real table cell on desktop.
   The shared .actions rule uses display:flex, which breaks table row
   height/borders when applied directly to a <td>. */
@media (min-width: 769px) {
  .dashboard-table td.dashboard-actions {
    display: table-cell !important;
    min-width: 240px;
    vertical-align: middle !important;
    white-space: nowrap;
  }

  .dashboard-table td.dashboard-actions > .btn,
  .dashboard-table td.dashboard-actions > .dashboard-more {
    vertical-align: middle;
    margin-right: 6px;
  }

  .dashboard-table td.dashboard-actions > .dashboard-more {
    display: inline-block;
    margin-right: 0;
  }

  .dashboard-table td.dashboard-actions > .dashboard-more > summary {
    display: inline-flex;
  }

  /* users.php uses the exact same real-table-cell alignment model. */
  .users-table { display: table !important; width: 100%; }
  .users-table thead { display: table-header-group !important; }
  .users-table tbody { display: table-row-group !important; }
  .users-table tr { display: table-row !important; }
  .users-table th,
  .users-table td { display: table-cell !important; vertical-align: middle !important; }

  .users-table td.users-actions {
    display: table-cell !important;
    min-width: 210px;
    vertical-align: middle !important;
    white-space: nowrap;
  }

  .users-table td.users-actions > .btn,
  .users-table td.users-actions > .users-more {
    display: inline-block;
    vertical-align: middle;
    margin-right: 6px;
  }

  .users-table td.users-actions > .users-more {
    margin-right: 0;
  }

  .users-table td.users-actions > .users-more > summary {
    display: inline-flex;
  }
}

@media (max-width: 768px) {
  /* Nothing on an app page should be able to make the viewport wider. */
  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
  }

  body,
  .app-nav,
  .app-nav-inner,
  .content,
  .qr-dashboard,
  .dashboard-v2,
  .dashboard-hero,
  .dashboard-stats,
  .dashboard-table-card,
  .dashboard-table-head,
  .dashboard-table-wrap,
  .dashboard-mobile-list,
  .users-shell,
  .users-table-card,
  .users-table-head,
  .users-table-wrap,
  .users-mobile-list,
  .form-wrapper,
  .form-card,
  .field-group,
  .expiry-group {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .content,
  .qr-dashboard,
  .dashboard-v2,
  .dashboard-table-card,
  .dashboard-table-wrap,
  .dashboard-mobile-list,
  .users-shell,
  .users-table-card,
  .users-table-wrap,
  .users-mobile-list,
  .form-wrapper,
  .form-card {
    width: 100% !important;
  }

  /* Dedicated QR cards: never inherit a desktop/table min-width. */
  .dashboard-mobile-list {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .qr-mobile-card {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden;
  }

  .qr-mobile-head,
  .qr-mobile-title,
  .qr-mobile-title-line,
  .qr-mobile-target,
  .qr-mobile-activity,
  .qr-mobile-actions {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .qr-mobile-title-line {
    width: 100%;
  }

  .qr-mobile-title h3 {
    max-width: 100%;
  }

  .qr-mobile-target p,
  .qr-mobile-activity p {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .qr-mobile-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .qr-mobile-actions > *,
  .qr-mobile-actions .btn,
  .qr-mobile-more,
  .qr-mobile-more > summary {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Same hardening for Users mobile cards. */
  .users-mobile-list {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .user-mobile-card {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .user-mobile-head,
  .user-mobile-ident,
  .user-mobile-ident > div,
  .user-mobile-metrics,
  .user-mobile-login,
  .user-mobile-security,
  .user-mobile-actions {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .user-mobile-ident h3,
  .user-mobile-ident p,
  .user-mobile-login strong,
  .user-mobile-login small {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  /* iOS/Safari datetime-local has a large intrinsic width unless it is
     explicitly allowed to shrink. This keeps the campaign expiry control
     inside the Create/Edit card. */
  input[type="date"],
  input[type="time"],
  input[type="datetime-local"] {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    font-size: 16px !important;
  }

  #expiry-fields,
  #expiry-fields input,
  .expiry-group,
  .expiry-group input {
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Prevent long native form controls/content from establishing a wider
     min-content width than the card on small iPhones. */
  .form-card input:not([type="color"]):not([type="checkbox"]):not([type="radio"]),
  .form-card select,
  .form-card textarea {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}

@media (max-width: 420px) {
  .qr-mobile-actions,
  .user-mobile-actions {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  }
}

@media (max-width: 768px) {
  html,
  body {
    overflow-x: hidden;
    overflow-x: clip;
  }

  .dashboard-filters,
  .dashboard-search,
  .dashboard-filters select,
  #qr-type-filter,
  #qr-sort,
  .users-table-controls,
  .users-search,
  .users-table-controls select,
  #users-filter {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .dashboard-hero-meta span,
  .dashboard-hero-meta b {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  .user-mobile-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .checkbox-inline {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    white-space: normal;
    overflow-wrap: anywhere;
  }
}