/* Modern design variables and demo card styles */
:root{
  --bg: #121417;
  --surface: #1f1f23;
  --text: #e6eef6;
  --muted: #9aa6b2;
  --accent: #0ea5a4;
  --accent-2: #06b6d4;
  --radius: 10px;
  --shadow: 0 6px 18px rgba(0,0,0,0.6);
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
}

/* Dark mode: match original dark theme */
body.dark{
  --bg: #252525;
  --surface: #333333;
  --text: #fcfcfc;
  --muted: #aaaaaa;
  --shadow: 0 6px 18px rgba(0,0,0,0.6);
}

html,body{
  height:100%;
  background:var(--bg) !important;
  font-family:var(--font-sans);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  transition: background .3s ease, color .3s ease;
}

/* Explicit light mode (opt-in) */
body.light {
  background: #f6f7fb !important;
  color: #0f172a;
}

/* Explicit dark mode */
body.dark{
  background: #252525 !important;
  color: #fcfcfc;
}

/* Demo wrapper */
.modern-demo{
  padding:28px;
}
.demo-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap:18px;
  max-width:1100px;
  margin:0 auto;
}

.card{
  background:var(--surface);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  transition:transform .18s ease, box-shadow .18s ease;
}
.card:hover{ transform:translateY(-6px); box-shadow:0 12px 28px rgba(16,24,40,0.12); }
.card-header{ padding:16px 18px 8px 18px; }
.card-header h3{ margin:0; font-size:1.05rem; font-weight:600; }
.card-header .muted{ margin:4px 0 0 0; color:var(--muted); font-size:0.85rem; }
.card-body{ padding:8px 18px 12px 18px; flex:1; font-size:0.95rem; color:#0b1220; }
.card-footer{ padding:12px 16px; display:flex; align-items:center; justify-content:space-between; gap:8px; border-top:1px solid rgba(15,23,42,0.04); }
.tags span{ display:inline-block; background:rgba(37,99,235,0.08); color:var(--accent); padding:6px 8px; border-radius:999px; font-size:0.78rem; margin-right:6px; }
.actions .btn{ text-decoration:none; display:inline-block; padding:8px 12px; border-radius:8px; font-size:0.9rem; color:#fff; background:var(--accent); }
.actions .btn.ghost{ background:transparent; color:var(--accent); border:1px solid rgba(37,99,235,0.12); }

/* small screens */
@media (max-width:480px){
  .modern-demo{ padding:16px; }
  .card-header h3{ font-size:1rem; }
}

.otp-setup {
  display:flex;
  flex-direction:column;
  gap:12px;
  background:rgba(255,255,255,0.95);
  border:1px solid rgba(15,23,42,0.08);
  border-radius:16px;
  padding:16px;
  max-width:420px;
}

body.dark .otp-setup {
  background:rgba(40,40,40,0.92);
  border-color:rgba(255,255,255,0.08);
}

.otp-instructions {
  color:var(--muted);
  font-size:0.95rem;
}

.otp-qr {
  display:flex;
  justify-content:center;
}

.otp-qr img {
  width:220px;
  height:220px;
  border-radius:16px;
  box-shadow:0 12px 24px rgba(0,0,0,0.08);
}

.otp-secret {
  font-size:0.95rem;
  word-break:break-all;
  color:var(--text);
}

.otp-setup-panel {
  margin-top:12px;
}

.otp-fallback{ font-size:0.9rem; color:var(--muted); margin-top:8px; }
.otp-fallback a{ color:var(--accent-2); text-decoration:underline; }

/* Settings layout */
.settings-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap:10px; align-items:start; margin:18px auto 0; max-width:980px; padding:0 12px; }
.settings-card.full-width{ grid-column: 1 / -1; }
.settings-card{ max-width:520px; margin:0 auto; }
.settings-card .card-body{ display:flex; flex-direction:column; gap:10px; }
.setting-row{ display:flex; flex-direction:column; gap:6px; }
.setting-row label{ font-weight:600; font-size:0.95rem; color:var(--muted); }
.setting-row input[type="text"], .setting-row input[type="number"], .setting-row select{ padding:8px 10px; border-radius:8px; border:1px solid rgba(15,23,42,0.06); background:var(--surface); color:var(--text); }
.card.header-small .card-header{ padding:8px 12px; }
.actions{ display:flex; gap:12px; align-items:center; }
.btn{ padding:8px 12px; border-radius:8px; text-decoration:none; display:inline-block; }
.btn.primary{ background:var(--accent); color:#fff; border:0; }
.btn.ghost{ background:transparent; color:var(--accent); border:1px solid rgba(37,99,235,0.12); }

/* Card visual tweaks for dark theme */
.card{ border:1px solid rgba(0,0,0,0.08); }
body.dark .card{ background: #2b2b2b; border-color: rgba(255,255,255,0.06); box-shadow: 0 8px 20px rgba(0,0,0,0.6); }
.card-header{ background:transparent; padding:12px 16px; }
.card-header h3{ margin:0; color:var(--text); }
.card-body{ padding:12px 16px; max-width:520px; margin:0 auto; color:var(--text); }

@media (max-width:860px){ .settings-grid{ grid-template-columns: 1fr; } }

/* Strong overrides for the settings page to ensure dark theme and constrained cards */
.modern-settings{ background:transparent; padding:18px 0; }
.modern-settings .settings-grid{ max-width:900px; margin:18px auto; gap:10px; }
.modern-settings .settings-card{ max-width:560px; width:100%; margin:0 auto; background:transparent; }
.modern-settings .card{ background: #262626; border-color: rgba(255,255,255,0.06); box-shadow:none; }
.modern-settings .card-header{ border-bottom:1px solid rgba(255,255,255,0.04); }
.modern-settings .card-body{ background: transparent; padding:12px 16px; max-width:520px; margin:0 auto; color:#e9eef6; }
.modern-settings .setting-row label{ color:#cbd5e1; }
.modern-settings .setting-row input[type="text"], .modern-settings .setting-row input[type="number"], .modern-settings .setting-row select{ background:#383838; border:1px solid rgba(255,255,255,0.04); color:#e9eef6; }
.modern-settings .otp-setup{ background:transparent; border-color: rgba(255,255,255,0.04); }
.modern-settings .otp-qr img{ box-shadow: 0 10px 20px rgba(0,0,0,0.6); }
.modern-settings .otp-secret{ color:#dfe7f3; }
.modern-settings .otp-setup-wrapper{ display:none; }
.modern-settings .btn.primary{ background:#0ea5a4; }
.modern-settings .btn.ghost{ color:#9ec5d3; border-color: rgba(255,255,255,0.06); }