/* ============================================================
   Realadson.ai — Design System v3 "Clean"
   Floating light sidebar · airy minimal shell · crimson/green brand
   ============================================================ */
:root {
  --ra-brand: #DC1D44;
  --ra-brand-deep: #B81738;
  --ra-brand-tint: #FDEEF2;
  --ra-accent: #23CE40;
  --ra-accent-deep: #1AA832;
  --ra-ink: #000000;
  --ra-ink-soft: #5B6472;
  --ra-surface: #F4F7FF;
  --ra-card: #FFFFFF;
  --ra-line: #E9EDF8;
  --ra-success: #23CE40;
  --ra-danger: #EF4444;
  --ra-info: #3B82F6;
  --ra-radius: 18px;
  --ra-radius-sm: 12px;
  --ra-shadow: 0 1px 2px rgba(13,20,40,.03), 0 10px 30px -22px rgba(13,20,40,.18);
  --ra-shadow-lift: 0 4px 10px rgba(13,20,40,.05), 0 24px 48px -24px rgba(13,20,40,.22);
  --ra-glow: 0 24px 80px -24px rgba(220,29,68,.30);
  --ra-font-display: 'Plus Jakarta Sans', 'Inter', 'Segoe UI', sans-serif;
  --ra-font-body: 'Inter', 'Segoe UI', sans-serif;
}
html[data-theme="dark"] {
  --ra-brand-tint: rgba(220,29,68,.14);
  --ra-ink: #F3F4F6;
  --ra-ink-soft: #9AA3B5;
  --ra-surface: #0A0A0C;
  --ra-card: #141417;
  --ra-line: #24242A;
  --ra-shadow: 0 1px 2px rgba(0,0,0,.4), 0 10px 30px -22px rgba(0,0,0,.6);
  --ra-shadow-lift: 0 4px 10px rgba(0,0,0,.5), 0 24px 48px -24px rgba(0,0,0,.7);
  --ra-glow: 0 24px 80px -24px rgba(220,29,68,.45);
}

html, body { height: 100%; }
body {
  font-family: var(--ra-font-body);
  color: var(--ra-ink);
  background: var(--ra-surface);
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
}
/* Signature striped canvas — used across the whole app shell */
.app-shell, .auth-wrap {
  background-color: var(--ra-surface);
  background-image: repeating-linear-gradient(-45deg,
    rgba(255,255,255,0) 0px, rgba(255,255,255,0) 14px,
    rgba(226,233,250,0) 14px, rgba(226,233,250,.32) 28px);
  background-attachment: fixed;
}
.auth-wrap {
  background-image:
    radial-gradient(900px 480px at 85% -15%, rgba(220,29,68,.14), transparent 60%),
    radial-gradient(700px 420px at 0% 115%, rgba(35,206,64,.08), transparent 55%),
    repeating-linear-gradient(-45deg,
      rgba(255,255,255,0) 0px, rgba(255,255,255,0) 14px,
      rgba(226,233,250,0) 14px, rgba(226,233,250,.32) 28px);
}
html[data-theme="dark"] .app-shell {
  background-image: repeating-linear-gradient(-45deg,
    rgba(255,255,255,.014) 0px, rgba(255,255,255,.014) 14px,
    rgba(255,255,255,0) 14px, rgba(255,255,255,0) 28px);
}
html[data-theme="dark"] .auth-wrap {
  background-image:
    radial-gradient(900px 480px at 85% -15%, rgba(220,29,68,.16), transparent 60%),
    repeating-linear-gradient(-45deg,
      rgba(255,255,255,.014) 0px, rgba(255,255,255,.014) 14px,
      rgba(255,255,255,0) 14px, rgba(255,255,255,0) 28px);
}
h1, h2, h3, h4, h5, .display-font { font-family: var(--ra-font-display); letter-spacing: -0.02em; font-weight: 700; }
a { color: var(--ra-brand); text-decoration: none; transition: color .15s ease; }
a:hover { color: var(--ra-brand-deep); }
::selection { background: rgba(220,29,68,.18); }
.ra-grad-text { background: linear-gradient(92deg, var(--ra-brand), #F43F5E 80%); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- Buttons ---------- */
.btn { transition: all .16s ease; }
.btn-ra {
  background: var(--ra-brand); color: #fff; border: none; border-radius: 12px;
  padding: 11px 24px; font-weight: 600; box-shadow: 0 8px 20px -10px rgba(220,29,68,.55);
}
.btn-ra:hover { background: var(--ra-brand-deep); color: #fff; transform: translateY(-1px); box-shadow: 0 12px 26px -10px rgba(220,29,68,.6); }
.btn-ra:active { transform: translateY(0); }
.btn-ra-outline {
  background: var(--ra-card); color: var(--ra-brand); border: 1.5px solid #F6C6D2;
  border-radius: 12px; padding: 10px 22px; font-weight: 600;
}
.btn-ra-outline:hover { background: var(--ra-brand-tint); color: var(--ra-brand-deep); border-color: var(--ra-brand); }
.btn-ra-amber { background: var(--ra-accent); color: #fff; border: none; border-radius: 12px; padding: 11px 24px; font-weight: 700; box-shadow: 0 8px 20px -10px rgba(35,206,64,.55); }
.btn-ra-amber:hover { background: var(--ra-accent-deep); color: #fff; transform: translateY(-1px); }
.btn-sm.btn-ra, .btn-sm.btn-ra-outline, .btn-sm.btn-ra-amber { padding: 6px 14px; box-shadow: none; }
.btn-light { background: var(--ra-card); border-color: var(--ra-line); color: var(--ra-ink); }
.btn-light:hover { background: var(--ra-surface); border-color: var(--ra-line); color: var(--ra-ink); }
.btn:focus-visible, a:focus-visible { outline: 2px solid var(--ra-brand); outline-offset: 2px; box-shadow: none !important; }

/* ---------- Public site ---------- */
.public-nav { background: var(--ra-card); border-bottom: 1px solid var(--ra-line); }
.public-nav .navbar-brand { font-family: var(--ra-font-display); font-weight: 800; font-size: 1.35rem; color: var(--ra-ink); }
.public-nav .navbar-brand span { color: var(--ra-brand); }
.hero {
  background:
    radial-gradient(900px 420px at 85% -10%, rgba(220,29,68,.12), transparent 60%),
    radial-gradient(700px 380px at 5% 110%, rgba(35,206,64,.08), transparent 55%),
    var(--ra-card);
  padding: 84px 0 72px;
  border-bottom: 1px solid var(--ra-line);
}
.hero h1 { font-size: clamp(2.1rem, 4.6vw, 3.4rem); font-weight: 800; line-height: 1.1; }
.hero h1 .hl { color: var(--ra-brand); }
.hero .lead { color: var(--ra-ink-soft); max-width: 620px; }

.prompt-bar {
  max-width: 680px; background: var(--ra-card); border: 1px solid var(--ra-line);
  border-radius: 20px; box-shadow: var(--ra-glow), var(--ra-shadow);
  padding: 10px 10px 10px 20px; display: flex; align-items: center; gap: 12px;
}
.prompt-bar .prompt-text { flex: 1; color: var(--ra-ink-soft); font-size: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prompt-bar .cursor { display: inline-block; width: 2px; height: 1.1em; background: var(--ra-brand); vertical-align: text-bottom; animation: ra-blink 1s steps(1) infinite; }
@keyframes ra-blink { 50% { opacity: 0; } }
.prompt-steps { color: var(--ra-ink-soft); font-size: .92rem; }
.prompt-steps b { color: var(--ra-ink); }

.section-pad { padding: 72px 0; }
.feature-card {
  background: var(--ra-card); border: 1px solid var(--ra-line); border-radius: var(--ra-radius);
  padding: 26px; height: 100%; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.feature-card:hover { transform: translateY(-3px); box-shadow: var(--ra-shadow-lift); border-color: #F5A9BC; }
.feature-card .icon {
  width: 44px; height: 44px; border-radius: 12px; background: var(--ra-brand-tint);
  color: var(--ra-brand); display: flex; align-items: center; justify-content: center; font-size: 1.25rem; margin-bottom: 14px;
}
.pricing-card { background: var(--ra-card); border: 1px solid var(--ra-line); border-radius: var(--ra-radius); padding: 28px; height: 100%; position: relative; transition: transform .18s ease, box-shadow .18s ease; }
.pricing-card:hover { transform: translateY(-3px); box-shadow: var(--ra-shadow-lift); }
.pricing-card.popular { border: 2px solid var(--ra-brand); box-shadow: 0 20px 50px -22px rgba(220,29,68,.35); }
.pricing-card .pop-badge { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); background: var(--ra-brand); color: #fff; font-size: .75rem; font-weight: 700; padding: 4px 14px; border-radius: 999px; }
.pricing-card .price { font-family: var(--ra-font-display); font-size: 2.1rem; font-weight: 800; }
.pricing-card ul { padding-left: 0; list-style: none; }
.pricing-card ul li { padding: 6px 0 6px 26px; position: relative; color: var(--ra-ink-soft); font-size: .93rem; }
.pricing-card ul li::before { content: '✓'; position: absolute; left: 0; color: var(--ra-success); font-weight: 700; }
.public-footer { background: #0C0C0D; color: #A8A8AE; padding: 40px 0 24px; }
.public-footer a { color: #D4D4D8; }
.public-footer a:hover { color: var(--ra-brand); }

/* ---------- Auth ---------- */
.auth-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 32px 16px;
  background-color: var(--ra-surface); }
.auth-card { width: 100%; max-width: 440px; background: var(--ra-card); border: 1px solid var(--ra-line); border-radius: 22px; padding: 36px; box-shadow: var(--ra-glow), var(--ra-shadow-lift); }
.auth-card .brand { font-family: var(--ra-font-display); font-weight: 800; font-size: 1.4rem; }
.auth-card .brand span { color: var(--ra-brand); }
.form-control, .form-select { border-radius: 12px; border-color: var(--ra-line); padding: 10px 14px; background: var(--ra-card); color: var(--ra-ink); transition: border-color .15s ease, box-shadow .15s ease; }
.form-control:focus, .form-select:focus { background: var(--ra-card); color: var(--ra-ink); border-color: var(--ra-brand); box-shadow: 0 0 0 .22rem rgba(220,29,68,.10); }
.form-control::placeholder { color: var(--ra-ink-soft); opacity: .7; }
label.form-label { font-weight: 600; font-size: .88rem; }
.form-text { color: var(--ra-ink-soft); }

/* ============================================================
   APP SHELL — floating light sidebar (clean look)
   ============================================================ */
.app-shell { display: flex; min-height: 100vh; }
.sidebar {
  width: 252px; position: fixed; top: 14px; bottom: 14px; left: 14px; z-index: 1040;
  background:
    radial-gradient(240px 200px at 0% 0%, rgba(220,29,68,.055), transparent 70%),
    radial-gradient(260px 220px at 100% 100%, rgba(220,29,68,.05), transparent 70%),
    var(--ra-card);
  color: var(--ra-ink-soft);
  border: 1px solid var(--ra-line);
  border-radius: 22px;
  box-shadow: var(--ra-shadow-lift);
  display: flex; flex-direction: column;
  transition: transform .22s ease, width .22s ease;
  overflow: hidden;
}
.side-brand { padding: 20px 18px 12px; display: flex; align-items: center; gap: 10px; }
.side-brand .brand-mark { width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0;
  background: linear-gradient(135deg, var(--ra-brand), #F43F5E); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1rem;
  box-shadow: 0 6px 16px -6px rgba(220,29,68,.55); }
.side-brand .brand-name { font-family: var(--ra-font-display); font-weight: 800; font-size: 1.14rem; color: var(--ra-ink); white-space: nowrap; }
.side-brand .brand-name span { color: var(--ra-brand); }
.side-brand .side-min { margin-left: auto; background: none; border: none; color: #A9B1C3; font-size: 1rem; cursor: pointer; padding: 4px 6px; border-radius: 8px; }
.side-brand .side-min:hover { color: var(--ra-brand); background: var(--ra-brand-tint); }
.sidebar nav { padding: 6px 12px 12px; flex: 1; overflow-y: auto; scrollbar-width: none; }
.sidebar nav::-webkit-scrollbar { display: none; }
.sidebar .side-label { font-size: .68rem; text-transform: uppercase; letter-spacing: .12em; color: #ADB5C7; padding: 16px 12px 6px; white-space: nowrap; font-weight: 600; }
.sidebar a.side-link {
  display: flex; align-items: center; gap: 12px; color: var(--ra-ink-soft); padding: 9px 12px;
  border-radius: 12px; font-size: .93rem; font-weight: 500; margin-bottom: 2px; position: relative; white-space: nowrap;
  transition: background .14s ease, color .14s ease;
}
.sidebar a.side-link i { font-size: 1.05rem; width: 20px; text-align: center; flex-shrink: 0; color: #98A1B3; transition: color .14s ease; }
.sidebar a.side-link:hover { background: var(--ra-surface); color: var(--ra-ink); }
.sidebar a.side-link:hover i { color: var(--ra-brand); }
.sidebar a.side-link.active { background: var(--ra-brand-tint); color: var(--ra-brand); font-weight: 600; }
.sidebar a.side-link.active i { color: var(--ra-brand); }
.side-foot { padding: 12px; }
.side-user { display: flex; align-items: center; gap: 10px; background: var(--ra-surface); border: 1px solid var(--ra-line); border-radius: 14px; padding: 10px 12px; }
.side-user .avatar { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, var(--ra-brand), #F43F5E); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: .92rem; flex-shrink: 0; }
.side-user .u-name { color: var(--ra-ink); font-size: .86rem; font-weight: 700; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 128px; }
.side-user .u-meta { color: var(--ra-ink-soft); font-size: .72rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; max-width: 150px; }
.plan-chip { background: var(--ra-brand-tint); color: var(--ra-brand); font-size: .6rem; font-weight: 800; padding: 2px 7px; border-radius: 999px; text-transform: uppercase; letter-spacing: .05em; vertical-align: 1px; }

/* Collapsed floating rail (desktop) */
@media (min-width: 992px) {
  html.side-min .sidebar { width: 80px; }
  html.side-min .app-main { margin-left: 108px; }
  html.side-min .side-brand { justify-content: center; padding: 20px 8px 10px; }
  html.side-min .side-brand .brand-name, html.side-min .sidebar .side-label,
  html.side-min .side-link .side-text, html.side-min .side-user .u-info { display: none; }
  html.side-min .side-brand .side-min { margin-left: 0; position: absolute; top: 62px; left: 50%; transform: translateX(-50%); }
  html.side-min .sidebar nav { padding-top: 30px; }
  html.side-min .sidebar a.side-link { justify-content: center; padding: 11px 8px; }
  html.side-min .sidebar a.side-link i { width: auto; }
  html.side-min .side-user { justify-content: center; padding: 8px; }
  html.side-min .sidebar a.side-link:hover::after {
    content: attr(data-tip); position: absolute; left: calc(100% + 14px); top: 50%; transform: translateY(-50%);
    background: var(--ra-ink); color: var(--ra-card); font-size: .78rem; font-weight: 600; padding: 6px 12px; border-radius: 8px;
    white-space: nowrap; z-index: 1100; box-shadow: var(--ra-shadow-lift);
  }
}

.app-main { flex: 1; margin-left: 280px; display: flex; flex-direction: column; min-width: 0; transition: margin-left .22s ease; }
.topbar { background: transparent; border: none; padding: 18px 28px 4px; display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.topbar .page-title { font-family: var(--ra-font-display); font-weight: 800; font-size: 1.15rem; margin: 0; }
.search-pill { display: inline-flex; align-items: center; gap: 9px; background: var(--ra-card); border: 1px solid var(--ra-line);
  border-radius: 999px; padding: 8px 16px; color: var(--ra-ink-soft); font-size: .85rem; cursor: pointer; transition: all .15s ease; box-shadow: var(--ra-shadow); }
.search-pill:hover { border-color: #F5A9BC; color: var(--ra-ink); box-shadow: var(--ra-shadow-lift); }
.search-pill kbd { background: var(--ra-surface); border: 1px solid var(--ra-line); border-radius: 6px; padding: 1px 7px; font-size: .7rem; color: var(--ra-ink-soft); }
.icon-btn { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--ra-line); background: var(--ra-card); color: var(--ra-ink-soft);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: all .15s ease; box-shadow: var(--ra-shadow); }
.icon-btn:hover { color: var(--ra-brand); border-color: #F5A9BC; }
.topbar .avatar-sm { width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg, var(--ra-brand), #F43F5E); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: .84rem; }

.content { padding: 18px 28px 30px; animation: ra-fadeup .3s ease both; }
@keyframes ra-fadeup { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---------- Cards / KPIs / tables ---------- */
.stat-card { background: var(--ra-card); border: 1px solid var(--ra-line); border-radius: var(--ra-radius); padding: 20px 22px; position: relative; overflow: hidden;
  box-shadow: var(--ra-shadow); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.stat-card::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, var(--ra-brand), #F43F5E); opacity: 0; transition: opacity .18s ease; }
.stat-card:hover { transform: translateY(-2px); box-shadow: var(--ra-shadow-lift); border-color: #F5A9BC; }
.stat-card:hover::after { opacity: 1; }
.stat-card .stat-label { color: var(--ra-ink-soft); font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.stat-card .stat-value { font-family: var(--ra-font-display); font-size: 1.75rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.card { border: 1px solid var(--ra-line); border-radius: var(--ra-radius); background: var(--ra-card); box-shadow: var(--ra-shadow); }
.card-header { background: var(--ra-card); border-bottom: 1px solid var(--ra-line); font-weight: 700; font-family: var(--ra-font-display); color: var(--ra-ink); border-radius: var(--ra-radius) var(--ra-radius) 0 0 !important; padding: 14px 20px; }
.card-body { color: var(--ra-ink); }
.table { color: var(--ra-ink); --bs-table-bg: transparent; --bs-table-color: var(--ra-ink); border-color: var(--ra-line); }
.table thead th { font-size: .74rem; text-transform: uppercase; letter-spacing: .07em; color: var(--ra-ink-soft); border-bottom-width: 1px; }
.table tbody tr { transition: background .12s ease; }
.table-hover tbody tr:hover, .table tbody tr:hover { background: #FBF6F9; }
html[data-theme="dark"] .table tbody tr:hover { background: rgba(220,29,68,.07); }
.badge { font-weight: 600; }
.badge.text-bg-light { background: var(--ra-surface) !important; color: var(--ra-ink) !important; border-color: var(--ra-line) !important; }
.alert { border-radius: 14px; border-color: var(--ra-line); }
.dropdown-menu { border: 1px solid var(--ra-line); border-radius: 14px; box-shadow: var(--ra-shadow-lift); background: var(--ra-card); }
.dropdown-item { color: var(--ra-ink); border-radius: 8px; }
.dropdown-item:hover { background: var(--ra-brand-tint); color: var(--ra-ink); }

/* Onboarding wizard */
.wizard-steps { display: flex; gap: 8px; margin-bottom: 26px; flex-wrap: wrap; }
.wizard-step { flex: 1; min-width: 130px; background: var(--ra-card); border: 1px solid var(--ra-line); border-radius: 12px; padding: 12px 14px; font-size: .85rem; color: var(--ra-ink-soft); }
.wizard-step .num { font-family: var(--ra-font-display); font-weight: 700; color: var(--ra-ink); }
.wizard-step.current { border-color: var(--ra-brand); background: var(--ra-brand-tint); }
.wizard-step.done { border-color: var(--ra-success); }
.wizard-step.done .num::after { content: ' ✓'; color: var(--ra-success); }

.soon-card { background: repeating-linear-gradient(-45deg, var(--ra-card), var(--ra-card) 12px, var(--ra-surface) 12px, var(--ra-surface) 24px); border: 1.5px dashed var(--ra-line); border-radius: var(--ra-radius); padding: 22px; color: var(--ra-ink-soft); height: 100%; }
.soon-card .soon-badge { background: var(--ra-accent); color: #fff; font-size: .7rem; font-weight: 700; border-radius: 999px; padding: 3px 10px; text-transform: uppercase; letter-spacing: .05em; }

/* ---------- Command palette ---------- */
.cmdk-overlay { position: fixed; inset: 0; background: rgba(10,12,20,.45); backdrop-filter: blur(3px); z-index: 1200; display: none; align-items: flex-start; justify-content: center; padding: 12vh 16px 16px; }
.cmdk-overlay.open { display: flex; }
.cmdk { width: 100%; max-width: 560px; background: var(--ra-card); border: 1px solid var(--ra-line); border-radius: 18px; box-shadow: 0 40px 100px -20px rgba(0,0,0,.4); overflow: hidden; animation: ra-pop .16s ease both; }
@keyframes ra-pop { from { opacity: 0; transform: scale(.97) translateY(-6px); } to { opacity: 1; transform: none; } }
.cmdk input { width: 100%; border: none; outline: none; padding: 16px 18px; font-size: 1rem; background: transparent; color: var(--ra-ink); border-bottom: 1px solid var(--ra-line); }
.cmdk-list { max-height: 46vh; overflow-y: auto; padding: 8px; }
.cmdk-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; color: var(--ra-ink); font-size: .92rem; cursor: pointer; }
.cmdk-item i { color: var(--ra-ink-soft); width: 20px; text-align: center; }
.cmdk-item.sel, .cmdk-item:hover { background: var(--ra-brand-tint); }
.cmdk-item.sel i, .cmdk-item:hover i { color: var(--ra-brand); }
.cmdk-empty { padding: 22px; text-align: center; color: var(--ra-ink-soft); font-size: .9rem; }
.cmdk-foot { border-top: 1px solid var(--ra-line); padding: 8px 14px; font-size: .72rem; color: var(--ra-ink-soft); display: flex; gap: 14px; }
.cmdk-foot kbd { background: var(--ra-surface); border: 1px solid var(--ra-line); border-radius: 5px; padding: 0 6px; }

/* ---------- Utilities ---------- */
.skeleton { background: linear-gradient(90deg, var(--ra-line) 25%, var(--ra-surface) 50%, var(--ra-line) 75%); background-size: 200% 100%; animation: ra-shimmer 1.3s infinite; border-radius: 8px; }
@keyframes ra-shimmer { to { background-position: -200% 0; } }
.text-secondary { color: var(--ra-ink-soft) !important; }
.border, .border-top, .border-bottom { border-color: var(--ra-line) !important; }
.rounded-3 { border-radius: 14px !important; }

/* Brand green for success elements */
.text-bg-success { background-color: #23CE40 !important; color: #fff !important; }
.btn-success { background-color: #23CE40; border-color: #23CE40; }
.btn-success:hover { background-color: #1AA832; border-color: #1AA832; }
.text-success { color: #1AA832 !important; }

/* Dark-mode tuning */
html[data-theme="dark"] .btn-light { background: #1C1C21; border-color: var(--ra-line); color: var(--ra-ink); }
html[data-theme="dark"] .btn-light:hover { background: #232329; color: #fff; }
html[data-theme="dark"] .btn-ra-outline { background: transparent; border-color: rgba(220,29,68,.5); }
html[data-theme="dark"] .alert-warning { background: rgba(245,158,11,.12); border-color: rgba(245,158,11,.35); color: #FCD34D; }
html[data-theme="dark"] .alert-info { background: rgba(59,130,246,.12); border-color: rgba(59,130,246,.35); color: #93C5FD; }
html[data-theme="dark"] .alert-danger { background: rgba(239,68,68,.12); border-color: rgba(239,68,68,.35); color: #FCA5A5; }
html[data-theme="dark"] .alert-success { background: rgba(35,206,64,.12); border-color: rgba(35,206,64,.35); color: #86EFAC; }
html[data-theme="dark"] .alert-light { background: #1A1A1F; border-color: var(--ra-line); color: var(--ra-ink); }
html[data-theme="dark"] .text-bg-light { background: #1C1C21 !important; color: var(--ra-ink) !important; }
html[data-theme="dark"] .sidebar { background:
    radial-gradient(240px 200px at 0% 0%, rgba(220,29,68,.10), transparent 70%),
    radial-gradient(260px 220px at 100% 100%, rgba(220,29,68,.08), transparent 70%),
    var(--ra-card); }
html[data-theme="dark"] .side-brand .brand-name { color: #fff; }
html[data-theme="dark"] .sidebar a.side-link:hover { background: rgba(255,255,255,.05); }
html[data-theme="dark"] .side-user { background: rgba(255,255,255,.04); }
html[data-theme="dark"] .search-pill, html[data-theme="dark"] .icon-btn { background: var(--ra-card); }
html[data-theme="dark"] .prompt-shell, html[data-theme="dark"] .modal-content { background: var(--ra-card); }

/* ---------- Mobile ---------- */
@media (max-width: 991.98px) {
  .sidebar { top: 0; bottom: 0; left: 0; border-radius: 0 22px 22px 0; transform: translateX(-105%); width: 264px; }
  .sidebar.open { transform: translateX(0); }
  .app-main { margin-left: 0; }
  .sidebar-backdrop { position: fixed; inset: 0; background: rgba(10,12,20,.5); z-index: 1035; display: none; }
  .sidebar-backdrop.show { display: block; }
  .content { padding: 12px 16px 22px; }
  .topbar { padding: 14px 16px 4px; }
  .search-pill .pill-text, .search-pill kbd { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}


/* Striped texture for public site section bands */
.section-pad.striped {
  background-color: var(--ra-surface);
  background-image: repeating-linear-gradient(-45deg,
    rgba(255,255,255,0) 0px, rgba(255,255,255,0) 14px,
    rgba(226,233,250,0) 14px, rgba(226,233,250,.32) 28px);
}

/* Chart card */
.chart-card { background: var(--ra-card); border: 1px solid var(--ra-line); border-radius: var(--ra-radius); box-shadow: var(--ra-shadow); }
.chart-card .chart-head { padding: 16px 20px 4px; display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.chart-card .chart-title { font-family: var(--ra-font-display); font-weight: 700; font-size: .98rem; margin: 0; }
.chart-card .chart-body { padding: 8px 16px 18px; }
.legend-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; margin-right: 6px; }


/* Clickable stat cards & manage tiles (admin) */
a.stat-card { color: inherit; }
a.stat-card:hover { color: inherit; }
a.stat-card .stat-value { color: var(--ra-ink); }
.card-body a.border:hover { border-color: #F5A9BC !important; background: var(--ra-brand-tint); transform: translateY(-2px); }
.card-body a.border { background: var(--ra-card); }
.nav-tabs .nav-link:hover { background: var(--ra-surface) !important; }
.progress { background: var(--ra-surface); }