/* ========== Brand tokens ========== */
:root{
  --brand:          #7C3AED;   /* primary purple */
  --brand-600:      #6D28D9;
  --brand-100:      #F3E8FF;
  --ink:            #0f172a;   /* neutral 900 */
  --muted:          #475569;   /* neutral 600 */
  --line:           rgba(15,23,42,.08);
  --bg:             #f6f7fb;   /* neutral 50 */
  --white:          #FFFFFF;

  --card-bg:        #ffffff;
  --card-line:      rgba(15,23,42,.08);
  --surface-muted:  #f3f2f9;
  --surface-accent: #ede9ff;
  --shadow:         0 12px 30px rgba(15,23,42,.08);
  --shadow-light:   0 6px 18px rgba(15,23,42,.06);

  --input-bg:       #ffffff;
  --input-border:   rgba(71,85,105,.25);
}

body.theme-dark{
  --ink:            #e2e8f0;
  --muted:          #a0aec0;
  --line:           rgba(226,232,240,.12);
  --bg:             #050712;
  --card-bg:        #111827;
  --card-line:      rgba(148,163,184,.25);
  --surface-muted:  #0f1424;
  --surface-accent: #1a1f35;
  --shadow:         0 20px 40px rgba(0,0,0,.45);
  --shadow-light:   0 10px 24px rgba(0,0,0,.35);
  --input-bg:       #0f172a;
  --input-border:   rgba(148,163,184,.35);
}

/* ===== Global scroll safety (mobile) ===== */
html, body {
  overflow-y: auto;
  color: var(--ink);
}
body.theme-dark{
  color:#e2e8f0;
}

/* ========== Page wrappers ========== */
.dashboard-shell{
  min-height: 100vh;
  background: var(--bg);
}
body, .dashboard-shell{
  transition: background-color 0.25s ease, color 0.25s ease;
}
body.theme-dark{
  background:#0b1220;
  color:#e5e7eb;
}

.dashboard-main{
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* Centered surface for dashboard content */
.dashboard-surface{
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px 16px 64px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 24px;
  box-shadow: 0 18px 50px rgba(15, 23, 42, 0.08);
}
.dashboard-surface > * + *{
  margin-top: 18px;
}
body.theme-dark .dashboard-surface{
  background: #0b1220;
  border-color: #1f2937;
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.45);
}

/* Landing hero adjustments to blend with app look */
.landing-hero{
  background: linear-gradient(135deg, rgba(15,23,42,0.06), rgba(124,58,237,0.10));
  color: #0f172a;
}
body.theme-dark .landing-hero{
  background: linear-gradient(135deg, rgba(15,23,42,0.75), rgba(76,29,149,0.45));
  color: #e5e7eb;
}

/* Shared landing/surface wrappers */
.page-shell{
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 16px 48px;
}
.page-section{
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  box-shadow: 0 16px 40px rgba(15,23,42,0.08);
  padding: 24px;
}
body.theme-dark .page-section{
  background: #0f172a;
  border-color: #1f2937;
  box-shadow: 0 18px 48px rgba(0,0,0,0.55);
}

/* Landing cards standardization */
.card{
  background:#ffffff;
  color:#0f172a;
  border:1px solid #e2e8f0;
  border-radius: 20px;
  box-shadow: 0 12px 30px rgba(15,23,42,0.08);
}
.card h1, .card h2, .card h3, .card h4,
.card .feature-title,
.card .section-title{
  color:#0f172a;
}
.card .text-gray-600,
.card .text-gray-700,
.card .text-gray-500{
  color:#334155;
}
body.theme-dark .card{
  background:#0f172a;
  color:#e5e7eb;
  border-color:#1f2937;
  box-shadow: 0 16px 40px rgba(0,0,0,0.55);
}

/* Landing option deck */
.option-deck{
  background: #0f172a;
  border: 1px solid #1f2937;
  color: #e5e7eb;
}
.option-deck .card{
  background:#111827;
  border-color:#1f2937;
  color:#e5e7eb;
}
.option-deck .card h3,
.option-deck .card p{
  color:#e5e7eb !important;
}
.option-deck .btn-primary,
.option-deck .btn-secondary{
  color:#fff;
}

/* FAQ cards dark */
.faq-item .faq-question{
  background: #f8fafc;
  color: #0f172a;
}
.faq-item .faq-answer{
  background: #f8fafc;
  color: #0f172a;
}
body.theme-dark .faq-item .faq-question{
  background:#0f172a !important;
  color:#e5e7eb;
}
body.theme-dark .faq-item .faq-answer{
  background:#0b1324 !important;
  color:#e5e7eb;
}

/* Message cards (rituals/alerts) */
.ew-msg-card{
  padding: 12px;
  border-radius: 14px;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  color: #0f172a;
  box-shadow: 0 8px 24px rgba(15,23,42,0.08);
}
.ew-msg-card .ew-msg-head{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  font-size: 12px;
  color: #0f172a;
  margin-bottom: 6px;
}
.ew-msg-card .ew-msg-from{ font-weight: 700; }
.ew-msg-card .ew-msg-meta{ display:flex; align-items:center; gap:8px; color:#475569; }
.ew-msg-card .ew-msg-body{
  font-size: 14px;
  color: #0f172a;
}
.ew-msg-card .ew-msg-link a{
  color: #5b21b6;
  text-decoration: underline;
}
.ew-msg-btn{
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(91,33,182,.2);
  background: linear-gradient(135deg,#7c3aed,#6366f1);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.ew-msg-btn--ghost{
  background: transparent;
  color: #475569;
  border: 1px solid #e2e8f0;
}
.ew-msg-card--unread{}
.ew-msg-card--read{
  opacity: 0.85;
}
body.theme-dark .ew-msg-card{
  background:#0f172a;
  color:#e5e7eb;
  border-color:#1f2937;
  box-shadow: 0 12px 30px rgba(0,0,0,0.55);
}
body.theme-dark .ew-msg-card .ew-msg-head{ color:#e5e7eb; }
body.theme-dark .ew-msg-card .ew-msg-meta{ color:#cbd5e1; }
body.theme-dark .ew-msg-card .ew-msg-body{ color:#e5e7eb; }
body.theme-dark .ew-msg-card .ew-msg-link a{ color:#c4b5fd; }
body.theme-dark .ew-msg-btn{
  background: linear-gradient(135deg,#7c3aed,#6366f1);
  color:#fff;
  border-color: transparent;
}
body.theme-dark .ew-msg-btn--ghost{
  background: rgba(255,255,255,0.08);
  color:#e5e7eb;
  border-color: rgba(255,255,255,0.14);
}

/* Modal surfaces (shared) */
.modal-surface{
  background:#ffffff;
  color:#0f172a;
  border:1px solid #e2e8f0;
  border-radius: 18px;
  box-shadow:0 18px 50px rgba(15,23,42,.15);
  padding: 20px 20px 24px;
}
.modal-surface .modal-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom: 12px;
}
.modal-surface .modal-title{
  font-size: 1.05rem;
  font-weight: 700;
  color: #111827;
}
.modal-surface .modal-close{
  font-size: 1.1rem;
  color: #6b7280;
}
.modal-surface .modal-close:hover{
  color: #111827;
}
.modal-surface .modal-body{
  max-height: 70vh;
  overflow-y: auto;
}
body.theme-dark .modal-surface{
  background:#0f172a;
  color:#e5e7eb;
  border-color:#1f2937;
  box-shadow:0 22px 60px rgba(0,0,0,.5);
}
body.theme-dark .modal-surface .modal-title{ color:#e5e7eb; }
body.theme-dark .modal-surface .modal-close{ color:#cbd5e1; }
body.theme-dark .modal-surface .modal-close:hover{ color:#f8fafc; }

/* Settings modal: header/tabs sticky, body scroll only */
#settingsModal{
  overflow: hidden;
}
#settingsModal.settings-shell{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:16px;
}
#settingsModal .settings-panel{
  --settings-header-h: 64px;
  max-height: calc(100dvh - 2rem);
  display:flex;
  flex-direction:column;
  width:100%;
}
#settingsModal .settings-header,
#settingsModal .settings-tabs{
  position: sticky;
  z-index: 20;
  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(8px);
}
#settingsModal .settings-header{
  top: 0;
  min-height: var(--settings-header-h);
}
#settingsModal .settings-tabs{
  top: var(--settings-header-h);
  border-bottom: 1px solid #e5e7eb;
}
#settingsModal .settings-body{
  flex:1;
  min-height:0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
body.theme-dark #settingsModal .settings-header,
body.theme-dark #settingsModal .settings-tabs{
  background: rgba(15,23,42,0.96);
  border-color: rgba(148,163,184,0.25);
}
/* Tile hierarchy */
.feature-grid,
.ek-tiles-grid{
  gap: 16px;
}
.ek-tiles-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  align-items:start;
}
.ek-tile{
  border:1px solid var(--tile-line, #e5e7eb);
  border-radius:12px;
  padding:12px;
  box-shadow:0 10px 26px rgba(15,23,42,0.08);
  background: var(--tile-bg, linear-gradient(180deg,#fff,#fafafa));
}
.ek-open-btn, .ek-action-btn{
  padding:.45rem .7rem;
  border:1px solid #e5e7eb;
  border-radius:.5rem;
  background:#f9fafb;
  font-size:.875rem;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:.4rem;
}
.ek-open-btn:focus, .ek-action-btn:focus{ outline:2px solid #c4b5fd; outline-offset:2px; }
.ek-actions{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.5rem; }
.ek-status-dot{display:inline-block;width:9px;height:9px;border-radius:9999px;background:#10b981;box-shadow:0 0 0 2px #d1fae5 inset;}
.ek-badge{font-size:10px; padding:2px 6px; border-radius:9999px; background:#f4ebff; color:#6b21a8; border:1px solid #e9d5ff;}
@media (max-width: 420px){ .ek-actions{ gap:.4rem; } }
.ek-tile-trusted{
  background:#f8fbff;
  border:1px solid #cfe6ff;
  border-radius:12px;
  padding:12px;
  box-shadow:0 0 0 1px #e9f3ff inset;
  color:#0f172a;
}
.ek-tile-trusted .ek-title-wrap{
  display:flex; align-items:center; gap:.4rem; min-width:0;
  color:#0f172a;
}
.ek-tile-trusted .ek-title{
  min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-weight:700;
}
.ek-tile-trusted .ek-subtitle{
  color:#475569; font-weight:600;
}
.ek-tile-trusted .ek-status{ display:inline-flex; align-items:center; gap:.35rem; }
.ek-tile-trusted .ek-status-dot{
  display:inline-block;width:9px;height:9px;border-radius:9999px;
  background:#10b981;box-shadow:0 0 0 2px #d1fae5 inset;
}
.ek-tile-trusted .ek-status-text{ color:#475569; }
.ek-tile-trusted .ek-badge-blue{
  font-size:10px;padding:2px 6px;border-radius:9999px;
  background:#e0f2fe;color:#1e40af;border:1px solid #bae6fd;
  font-weight:700;
}
.ek-tile-trusted .ek-icon{ color:#2563eb; }

.ek-hero,
.ek-hero-pair{
  grid-column: span 2;
  padding: 16px;
  border-radius: 14px;
  box-shadow: 0 14px 36px rgba(124,58,237,0.22);
  background: linear-gradient(135deg, #6d28d9, #9333ea);
  color: #fff;
}
.ek-hero .feature-title,
.ek-hero .feature-desc,
.ek-hero .feature-meta,
.ek-hero-pair .feature-title,
.ek-hero-pair .feature-desc,
.ek-hero-pair .feature-meta{
  color: #fff;
}
.ek-hero .feature-cta,
.ek-hero-pair .feature-cta{
  background: #fff;
  color: #5b21b6;
  border: none;
}

.feature-card:not(.ek-hero),
.ek-tile{
  box-shadow: 0 10px 26px rgba(15,23,42,0.08);
  border-color: rgba(15,23,42,0.08);
}
body.theme-dark .feature-card:not(.ek-hero),
body.theme-dark .ek-tile{
  box-shadow: 0 12px 30px rgba(0,0,0,0.4);
  border-color: rgba(148,163,184,0.16);
}
body.theme-dark .feature-card{
  background: #0f172a;
  color: #e5e7eb;
  border-color: rgba(148,163,184,0.25);
}

body.theme-dark .ek-tile{
  background:#0f172a;
  border-color: rgba(148,163,184,.25);
  box-shadow: 0 12px 30px rgba(0,0,0,.45);
  color: #e2e8f0;
}
body.theme-dark .ek-tile .text-gray-800,
body.theme-dark .ek-tile .text-gray-600,
body.theme-dark .ek-tile .ek-badge,
body.theme-dark .ek-tile .ek-status-dot,
body.theme-dark .ek-tile .ek-actions button,
body.theme-dark .ek-tile .ek-actions a{
  color: #e2e8f0 !important;
  border-color: rgba(148,163,184,.25);
}
body.theme-dark .ek-tile .ek-badge{
  background: rgba(124,58,237,0.18);
  border-color: rgba(124,58,237,0.45);
}
body.theme-dark .ek-tile .ek-open-btn,
body.theme-dark .ek-tile .ek-action-btn{
  background: rgba(255,255,255,0.08);
}
body.theme-dark .ek-tile .ek-open-btn.btn-lavender{
  background: linear-gradient(135deg,#7c3aed,#6366f1);
  color:#fff !important;
  border-color: transparent;
}
body.theme-dark .ek-tile-trusted{
  background: #0f172a;
  border: 1px solid rgba(148,163,184,.25);
  box-shadow: 0 0 0 1px rgba(148,163,184,.12) inset, 0 12px 30px rgba(0,0,0,.45);
  color: rgba(255,255,255,.90);
}
body.theme-dark .ek-tile-trusted .ek-title-wrap,
body.theme-dark .ek-tile-trusted .ek-title{
  color: rgba(255,255,255,.95) !important;
}
body.theme-dark .ek-tile-trusted .ek-subtitle{ color: rgba(255,255,255,.70); }
body.theme-dark .ek-open-btn{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.90);
}
body.theme-dark .ek-open-btn:hover{
  background: rgba(255,255,255,.10);
}
body.theme-dark .ek-status-text{ color: rgba(255,255,255,.70); }
body.theme-dark .ek-badge-blue{
  background: rgba(59,130,246,.16);
  border: 1px solid rgba(59,130,246,.25);
  color: rgba(191,219,254,1);
}
body.theme-dark .ek-tile-trusted .ek-icon{ color: rgba(191,219,254,1); }
.dashboard-header{
  background: var(--surface-muted);
  border-bottom: 1px solid var(--card-line);
  padding: 12px 16px;
  box-shadow: var(--shadow-light);
}
.dashboard-header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:12px;
}
.dashboard-footer{
  padding: 12px 16px 24px;
}
.dashboard-main main{
  flex: 1;
}
.sidebar-theme-toggle{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid var(--card-line);
  background: var(--surface-accent);
  color: var(--brand);
  font-weight: 600;
  cursor: pointer;
}
.sidebar-theme-toggle i{
  width: 18px;
  text-align: center;
}

@media (max-width: 640px){
  .dashboard-header{
    padding: 8px 12px;
  }
  .dashboard-footer{
    padding: 8px 12px 24px;
  }
}

.dashboard-cards-wrapper{
  max-width: 1100px;
  margin: 0 auto;
  padding: 18px 16px;
  overflow: visible; /* allow expanded content */
}

/* ===== Static content helpers (marketing pages) ===== */
.static-toolbar{
  border-bottom:1px solid var(--card-line);
  background:var(--surface-muted);
}
.static-toolbar-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 16px;
  flex-wrap:wrap;
}
.static-toolbar-inner h1{
  font-size:1rem;
  font-weight:600;
  color:var(--muted);
  margin:0;
}
.static-hero-card{
  display:flex;
  flex-wrap:wrap;
  gap:24px;
}
.static-hero-card > *{
  flex:1 1 320px;
}
.faq-item{
  border:1px solid var(--card-line);
  border-radius:18px;
  box-shadow:var(--shadow-light);
  background:var(--card-bg);
}
.faq-question{
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:20px 24px;
}
.faq-question h3{
  font-size:1.1rem;
  font-weight:600;
}
.faq-answer{
  background:var(--surface-muted);
  border-top:1px solid var(--card-line);
}
.faq-answer p{margin:0;padding:20px 24px;color:var(--muted);}
body.theme-dark .faq-answer{background:rgba(15,23,42,.7);}

.dual-keys-trusted .dual-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap:24px;
  align-items:start;
}
.dual-keys-trusted .dual-panel{
  min-height:100%;
  display:flex;
  flex-direction:column;
  gap:10px;
}
/* Two-up or masonry grid for cards (UNIFIED) */
.cards-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 16px;
  align-items: start;
}

.stack-gap > * + *{
  margin-top: 12px;
}

@keyframes fadeIn{0%{opacity:0;transform:translateY(6px);}100%{opacity:1;transform:none;}}

.dashboard-hero{
  display:flex;
  flex-direction:column;
  gap:18px;
  padding:24px;
  background:linear-gradient(135deg,rgba(124,58,237,.08),rgba(15,23,42,.04));
  border:1px solid var(--card-line);
  border-radius:20px;
  box-shadow:var(--shadow);
  animation:fadeIn .4s ease;
}
.hero-copy{max-width:680px;}
.hero-eyebrow{
  text-transform:uppercase;
  letter-spacing:.2em;
  font-size:11px;
  color:#7c3aed;
  font-weight:700;
}
.hero-title{
  font-size:32px;
  color:var(--ink);
  margin-top:4px;
}
.hero-subtitle{
  font-size:15px;
  color:var(--muted);
  margin-top:6px;
}
.hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.hero-btn{
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 16px;
  border-radius:12px;
  border:1px solid var(--card-line);
  background:var(--card-bg);
  font-weight:600;
  color:var(--brand);
  cursor:pointer;
  box-shadow:var(--shadow-light);
  transition:transform .15s,box-shadow .15s;
}
.hero-btn i{width:18px;text-align:center;}
.hero-btn:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(124,58,237,.2);}
.hero-btn.is-active{
  transform:translateY(-2px);
  box-shadow:0 12px 26px rgba(124,58,237,.25);
}

.feature-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  grid-auto-flow:dense;
  gap:16px;
  margin:24px 16px 8px;
}
@media (max-width: 640px){
  .feature-grid{
    grid-template-columns:1fr;
    gap:14px;
  }
}
.feature-card{
  border:1px solid var(--card-line);
  border-radius:16px;
  padding:18px;
  background:linear-gradient(180deg,var(--card-bg),rgba(124,58,237,.08));
  display:flex;
  flex-direction:column;
  gap:8px;
  box-shadow:var(--shadow-light);
  color: var(--ink);
}
.feature-card h1, .feature-card h2, .feature-card h3, .feature-card h4{
  color: var(--ink);
}
.feature-title{
  font-weight:700;
  color:var(--ink);
}
.feature-desc{
  font-size:13px;
  color:var(--muted);
}
.feature-meta{
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:#7c3aed;
  font-weight:700;
}
.feature-cta{
  align-self:flex-start;
  margin-top:auto;
  border:1px solid rgba(124,58,237,.25);
  border-radius:999px;
  padding:8px 14px;
  font-size:13px;
  font-weight:600;
  background:var(--surface-accent);
  color:var(--brand);
  cursor:pointer;
  transition:.15s;
}
.feature-cta:hover{
  background:#e1d0f8;
  box-shadow:0 8px 18px rgba(124,58,237,.12);
}
.mini-grid{
  margin-top:16px;
}
.mini-grid .section-box{
  min-height:220px;
}
.mini-card{
  display:flex;
  flex-direction:column;
  gap:10px;
}

/* ========== Global utility ========== */
.section-title{
  font-weight: 700;
  color: var(--brand);
  margin: 0 0 8px 0;
}

.empty-text{
  color: var(--muted);
  font-size: 0.9rem;
}
.text-gray-500{ color:#5f6b7a !important; }
.text-gray-600{ color:#475569 !important; }
.text-xs.text-gray-500{ font-size:0.85rem; }
.text-xs.text-gray-600{ font-size:0.85rem; }

/* ========== Card ========== */
.echokey-card-ui{
  position: relative;
  display: block;
  width: 100%;
  min-width: 360px;           /* protects against collapse on wide containers */
  background: var(--card-bg);
  border: 1px solid var(--card-line);
  border-radius: 16px;
  padding: 14px;
  box-shadow: var(--shadow);
  overflow: visible;          /* ✅ do not clip expanded content */
}

/* On narrow screens, let the card shrink to fit the single-column grid */
@media (max-width: 420px){
  .echokey-card-ui{ min-width: 0; }
}

/* “Span both columns” helper for the owner card */
.echokey-card-ui.span-2{
  grid-column: 1 / -1;
}

@media (max-width: 420px) {
  .device-row { flex-wrap: wrap; }
  .device-row .actions {
    gap: 8px;
    width: 100%;
    justify-content: flex-end;
    margin-top: 6px;
  }
}

/* ========== Card header ========== */
.card-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
  flex-wrap: wrap;              /* allow the Manage chip to wrap on small screens */
}

.echokey-chip{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(90deg, var(--brand) 0%, var(--brand-600) 100%);
  box-shadow: 0 1px 0 rgba(255,255,255,0.25) inset;

  /* prevent huge growth on tight layouts */
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.manage-row{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  margin:8px 0 6px;
}
.manage-badge{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 6px 4px 12px;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
  background: linear-gradient(135deg, #7c3aed, #6d28d9);
  color: #ffffff;
  border: none;
  box-shadow: 0 6px 16px rgba(124,58,237,0.25);
  flex: 0 0 auto;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.manage-badge i{
  font-size: 0.8rem;
}
.manage-badge:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(124,58,237,0.35);
}
@media (max-width: 420px){
  .manage-row{
    flex-direction:column;
    align-items:flex-start;
  }
}
.manage-hint{
  font-size: .7rem;
  color: var(--muted);
  white-space: nowrap;
}
body.theme-dark .manage-badge{
  background:linear-gradient(135deg,#a855f7,#7c3aed);
  color:#fff;
  box-shadow:0 10px 28px rgba(124,58,237,.45);
}
body.theme-dark .manage-hint{
  color:#e2e8f0;
}
@media (max-width: 640px){
  .manage-hint{ display:none; }
}

.owner-card-summary{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 0 6px;
  border-top: 1px dashed var(--card-line);
  margin-top: 6px;
}
.summary-copy{
  flex: 1 1 auto;
  min-width: 0;
}
.summary-title{
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-strong, #6e0378ee);
}
.summary-text{
  font-size: 0.85rem;
  color: var(--muted, #6b7280);
  margin-top: 2px;
}
.summary-actions{
  flex: 0 0 auto;
  display: flex;
  align-items: center;
}
.summary-toggle{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--surface-accent);
  border: 1px solid var(--card-line);
  border-radius: 999px;
  padding: 6px 12px;
  font-weight: 600;
  color: var(--brand-700, var(--brand));
  transition: background .15s ease, color .15s ease;
}
.summary-toggle:hover{
  background: #ede9fe;
  color: var(--brand);
}
.summary-toggle i{
  font-size: 0.8rem;
}

.owner-safetap-stack{
  margin-top: 12px;
}
.owner-safetap-stack.card-stack > * + *{
  margin-top: 12px;
}

.dashboard-shell input:not([type="checkbox"]):not([type="radio"]),
.dashboard-shell select,
.dashboard-shell textarea,
.settings-panel input:not([type="checkbox"]):not([type="radio"]),
.settings-panel select,
.settings-panel textarea{
  background:var(--input-bg) !important;
  border:1.5px solid var(--input-border) !important;
  border-radius:10px !important;
  padding:8px 10px !important;
  color:var(--ink) !important;
  font-weight:500;
  transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.dashboard-shell input:focus,
.dashboard-shell select:focus,
.dashboard-shell textarea:focus,
.settings-panel input:focus,
.settings-panel select:focus,
.settings-panel textarea:focus{
  border-color:var(--brand, #7c3aed) !important;
  box-shadow:0 0 0 2px rgba(124,58,237,.15);
  outline:none;
  background:var(--surface-accent) !important;
}
.dashboard-shell input::placeholder,
.dashboard-shell textarea::placeholder,
.settings-panel input::placeholder,
.settings-panel textarea::placeholder{
  color:rgba(15,23,42,0.6);
}

.owner-card-panel{
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(126, 134, 163, 0.2);
}
.owner-card-panel[data-state="collapsed"]{
  display: none;
}

.echokey-card-ui{
  transition: box-shadow .2s ease, transform .2s ease;
}
.echokey-card-ui:not(.is-panel-open){
  box-shadow: var(--shadow-light, 0 4px 16px rgba(17, 24, 39, 0.08));
}

/* ========== Two-column band inside card (devices + contacts) ========== */
.card-two-col{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 700px) {
  .card-two-col { grid-template-columns: 1fr; }
}

/* ========== Sections inside cards ========== */
.section-box,
.trusted-card,
.mini-card,
.echokey-card-ui .section-box{
  background: var(--card-bg);
  border: 1px solid var(--card-line);
  border-radius: 16px;
  padding: 16px;
  overflow: visible;
  box-shadow: var(--shadow);
}
.card-stack > * + *{
  margin-top:18px;
}

.section-box,
.section-box p,
.section-box span,
.section-box li{
  color: var(--ink);
  font-size:0.95rem;
}
.section-title{
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ink);
}
.detail-title{
  font-size: 1.25rem;
  font-weight: 700;
}
.detail-eyebrow,
.gs-pill{
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  font-size: 0.72rem;
}
.empty-text{
  color: #6b7280;
}
body.theme-dark .section-title,
body.theme-dark .detail-title{
  color: #e5e7eb;
}
body.theme-dark .empty-text{
  color: #cbd5e1;
}

/* Light-surface resets inside dark containers */
body.theme-dark .section-box .card,
body.theme-dark .section-box .bg-white,
body.theme-dark .section-box .surface-light{
  background:#ffffff !important;
  color:#0f172a !important;
  border-color:#e5e7eb !important;
  box-shadow:0 6px 20px rgba(15,23,42,0.12);
}
body.theme-dark .section-box .card h1,
body.theme-dark .section-box .card h2,
body.theme-dark .section-box .card h3,
body.theme-dark .section-box .card h4,
body.theme-dark .section-box .bg-white h1,
body.theme-dark .section-box .bg-white h2,
body.theme-dark .section-box .bg-white h3,
body.theme-dark .section-box .bg-white h4,
body.theme-dark .section-box .card .section-title,
body.theme-dark .section-box .bg-white .section-title,
body.theme-dark .section-box .surface-light .section-title,
body.theme-dark .section-box .card .detail-title,
body.theme-dark .section-box .bg-white .detail-title,
body.theme-dark .section-box .surface-light .detail-title{
  color:#0f172a !important;
}
body.theme-dark .section-box .card .text-gray-600,
body.theme-dark .section-box .card .text-gray-700,
body.theme-dark .section-box .bg-white .text-gray-600,
body.theme-dark .section-box .bg-white .text-gray-700,
body.theme-dark .section-box .bg-white .text-gray-500{
  color:#334155 !important;
}
body.theme-dark .section-box .bg-white *,
body.theme-dark .section-box .surface-light *{
  color:#0f172a !important;
}

/* SafeTap + Ritual action buttons */
.trigger-safetap-button,
.send-ritual-button,
.btn-view-more{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 999px;
  padding: 8px 12px;
  font-weight: 600;
  border: 1px solid transparent;
  cursor: pointer;
}

.trigger-safetap-button{
  color: #fff;
  background: var(--brand);
}

.send-ritual-button{
  color: #fff;
  background: var(--brand);
}

.btn-view-more{
  color: #334155;
  background: rgba(71,85,105,.08);
  border-color: rgba(71,85,105,.16);
}
button.btn-view-more{
  border: 1px solid rgba(71,85,105,.16);
}
.btn-outline,
.message-dismiss{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(71,85,105,.16);
  background:rgba(71,85,105,.08);
  color:#334155;
  font-weight:600;
  cursor:pointer;
}

/* ========== SafeTap alert bubble ========== */
.safetap-bubble{
  width: 100%;
  border: 1px solid rgba(208, 143, 244, 0.0.911);
  background: rgba(254,226,226,.8);
  border-radius: 16px;
  padding: 14px;
  text-align: left;
  box-shadow:0 8px 20px rgba(202, 143, 244, 0.911);
}

.bubble-header{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 6px;
}

.bubble-time{ color: var(--muted); font-size: 0.85rem; }

.bubble-badge{
  display:inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.75rem;
  color: #fff;
  background: #d3a5fb;                 /* red-600 */
}
.bubble-badge[data-state="pending"]{ background:#dfb4f8; }
.bubble-badge[data-state="resolved"]{ background:#065F46; } /* emerald-800 */
.bubble-badge[data-state="deleted"]{ background:#6B7280; }  /* gray-500  */

/* ========== Dark mode ========== */
body.theme-dark .section-title{
  color:#c4b5fd;
}
body.theme-dark .dashboard-shell input::placeholder,
body.theme-dark .dashboard-shell textarea::placeholder,
body.theme-dark .settings-panel input::placeholder,
body.theme-dark .settings-panel textarea::placeholder{
  color:rgba(226,232,240,0.7);
}
body.theme-dark [class*="bg-white"] input:not([type="checkbox"]):not([type="radio"]),
body.theme-dark [class*="bg-white"] textarea,
body.theme-dark [class*="bg-white"] select{
  background:#ffffff !important;
  color:#0f172a !important;
  border-color:rgba(148,163,184,0.45) !important;
}
body.theme-dark [class*="bg-white"] input::placeholder,
body.theme-dark [class*="bg-white"] textarea::placeholder{
  color:rgba(15,23,42,0.55) !important;
}
body.theme-dark .pilot-hero input,
body.theme-dark .pilot-hero textarea{
  background:#ffffff !important;
  color:#0f172a !important;
  border-color:rgba(148,163,184,0.45) !important;
}
body.theme-dark .pilot-hero input::placeholder,
body.theme-dark .pilot-hero textarea::placeholder{
  color:rgba(15,23,42,0.55) !important;
}
body.theme-dark .dashboard-hero{
  background:linear-gradient(135deg,rgba(124,58,237,.35),rgba(15,23,42,.35));
  border-color:var(--card-line);
}
body.theme-dark .hero-title{color:var(--ink);}
body.theme-dark .hero-subtitle{color:var(--muted);}
body.theme-dark .detail-title{color:var(--ink);}
body.theme-dark .detail-eyebrow{color:var(--muted);}
body.theme-dark .hero-btn{
  background:var(--card-bg);
  color:#c4b5fd;
  border-color:var(--card-line);
}
body.theme-dark .send-ritual-button,
body.theme-dark .trigger-safetap-button{
  box-shadow:0 6px 18px rgba(124,58,237,0.25);
}
body.theme-dark .btn-view-more,
body.theme-dark .btn-outline,
body.theme-dark .message-dismiss{
  background:rgba(255,255,255,0.08);
  border-color:rgba(255,255,255,0.16);
  color:#e2e8f0;
}
body.theme-dark .feature-card{
  background:linear-gradient(180deg,var(--card-bg),rgba(124,58,237,.18));
  border-color:var(--card-line);
  color:var(--ink);
  box-shadow:var(--shadow);
}
body.theme-dark .feature-desc{color:var(--muted);}
body.theme-dark .feature-cta{
  background:rgba(124,58,237,.18);
  border-color:rgba(124,58,237,.4);
  color:#f5f3ff;
}
body.theme-dark .empty-text{
  color:#94a3b8;
}
body.theme-dark .safetap-bubble{
  border-color:rgba(251,113,133,.32);
  background:rgba(231, 204, 249, 0.978);
  color:#ffe4e6;
  box-shadow:0 12px 26px rgba(0,0,0,.55);
}

/* ========== Global cards (pending invites / claim) ========== */
.global-card {
  background: var(--card-bg);
  border: 1px solid var(--card-line);
  border-radius: 12px;
  padding: 14px;
}
.global-card-header { margin-bottom: 8px; }

.global-title {
  font-weight: 800;
  color: var(--ink);
}

.global-subtitle {
  color: var(--muted);
}

/* Remove decorative frames if any could overlay content */
.echokey-card-ui::before, .echokey-card-ui::after,
.global-card::before, .global-card::after {
  content: none !important;
  display: none !important;
}

/* shared safety net so headers don’t squash content */
.echokey-card-ui,
.echokey-card-ui .card-header,
.echokey-card-ui .section-box { min-width: 0; }

/* Trusted card styling (soft blue) */
.echokey-card--trusted{
  background:#dbbdf8;
  border-color:#cfe6ff;
  box-shadow:0 0 0 1px #e9f3ff inset;
  color:#0f172a;
}
.echokey-card--trusted .echokey-chip{
  background:#d7bcf6;
  color:#1e40af;             /* indigo-900-ish */
}
.echokey-card--trusted .section-title{
  color:#0f172a;
}
.echokey-card--trusted .section-box{
  background:#ffffff;
  border-color:#e2e8f0;
  color:#0f172a;
}
.echokey-card--trusted .section-box *{
  color:#0f172a;
}

/* === EchoKey tiles: soft color accents + hover lift === */
.ek-tiles-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:16px;
  align-items:start;
}

/* Getting Started info button */
.gs-info {
  flex: 0 0 auto;
  border: none;
  background: transparent;
  padding: 0;
  margin-top: 1px;
  cursor: pointer;
  color: #9ca3af; /* gray-400 */
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.gs-info:hover {
  color: #6b7280; /* gray-500 */
}

.gs-tooltip {
  display: none;
  margin-top: 0.35rem;
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  font-size: 0.75rem;
  line-height: 1.25;
  background: #eef2ff;   /* indigo-50 */
  color: #4338ca;        /* indigo-700 */
  border: 1px solid #e0e7ff; /* indigo-100 */
}

/* Simple caret-ish effect */
.gs-tooltip::before {
  content: "";
  position: absolute;
  width: 0.5rem;
  height: 0.5rem;
  top: -4px;
  left: 1.75rem; /* roughly under the icon/heading area */
  background: #d8c0f4;
  border-left: 1px solid #e0e7ff;
  border-top: 1px solid #e0e7ff;
  transform: rotate(45deg);
}

/* Show when step is toggled */
.gs-step.show-tooltip .gs-tooltip {
  display: block;
}
/* Getting Started progress pill */
.gs-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 500;
  border: 1px solid rgba(124,58,237,.35);
  background: rgba(124,58,237,.15);
  color: #1f1b2d;
}
body.theme-dark .gs-pill{
  background:rgba(174, 132, 246, 0.966);
  border-color:rgba(124,58,237,.5);
  color:#f5f3ff;
}

.gs-pill.gs-pill-complete {
  border-color: #bbf7d0;       /* green-200 */
  background: #dcfce7;         /* green-100 */
  color: #15803d;              /* green-700 */
}
body.theme-dark .gs-pill.gs-pill-complete{
  background:#16a34a;
  color:#f0fdf4;
  border-color:#15803d;
}

/* Getting Started steps */
.gs-step {
  position: relative;
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  font-size: 0.875rem;
  color: #0f172a;
}

.gs-step-icon {
  flex: 0 0 auto;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  background: #e0f2fe;
  color: #0f172a;
  box-shadow:0 4px 12px rgba(37,99,235,.25);
}

.gs-step-body strong {
  display: block;
  margin-bottom: 0.05rem;
}

/* Completed state */
.gs-step.gs-step-done {
  opacity: 0.8;
}

.gs-step.gs-step-done .gs-step-icon {
  background: #16a34a;
  color: #f0fdf4;
  box-shadow:0 4px 12px rgba(22,163,74,.25);
}

.gs-step.gs-step-done strong {
  text-decoration: line-through;
}

/* Base tile look for any direct child in the grid */
.ek-tiles-grid > *{
  position:relative;
  background:#ddcaf8;
  border-radius:16px;
  padding:14px 16px;
  border:1px solid rgba(0,0,0,.06);
  box-shadow:0 8px 20px rgba(17,24,39,.06);
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
  overflow: visible;
}

/* Gradient ring without covering contents */
.ek-tiles-grid > *::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  padding:2px;             /* ring thickness */
  background: var(--ek-grad,linear-gradient(135deg,#e9d5ff,#dbeafe));
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events:none;
  z-index:1;
}

/* SafeTap alert popover layering */
.ek-tiles-grid > .ek-alert-open{
  z-index: 50;
}
.ek-alert-pop{
  z-index: 60;
}

/* Hover/focus */
.ek-tiles-grid > *:hover{
  transform:translateY(-1px);
  box-shadow:0 12px 26px rgba(17,24,39,.10);
}
.ek-tiles-grid > *:focus-visible{
  outline:none;
  transform:translateY(-1px);
  box-shadow:0 0 0 3px rgba(124,58,237,.25), 0 12px 26px rgba(17,24,39,.10);
}

/* Optional small title style if your tile has a title element */
.ek-tiles-grid .ek-title{
  font-weight:600;
  color:#111827;
}

/* Color cycle — every 6th tile repeats */
.ek-tiles-grid > *:nth-child(6n+1){ --ek-grad: linear-gradient(135deg,#e9d5ff,#dbeafe); } /* violet → sky */
.ek-tiles-grid > *:nth-child(6n+2){ --ek-grad: linear-gradient(135deg,#bbf7d0,#a5f3fc); } /* green → cyan */
.ek-tiles-grid > *:nth-child(6n+3){ --ek-grad: linear-gradient(135deg,#fde68a,#fca5a5); } /* amber → rose */
.ek-tiles-grid > *:nth-child(6n+4){ --ek-grad: linear-gradient(135deg,#c7d2fe,#fbcfe8); } /* indigo → pink */
.ek-tiles-grid > *:nth-child(6n+5){ --ek-grad: linear-gradient(135deg,#f5d0fe,#ddd6fe); } /* fuchsia → violet */
.ek-tiles-grid > *:nth-child(6n+6){ --ek-grad: linear-gradient(135deg,#bfdbfe,#a7f3d0); } /* blue → mint */

/* Slightly tinted background instead of pure white */
.ek-tiles-grid > *{
  background: linear-gradient(180deg,#ffffff, #fafafa);
}

/* Tiny badge in the tile’s bottom-right corner */
.notif-badge{
  position:absolute; bottom:.5rem; right:.5rem;
  min-width:1.35rem; height:1.35rem; line-height:1.35rem;
  border-radius:9999px;
  background:#cfb7f9; color:#fff;
  font-size:.75rem; font-weight:700;
  text-align:center; padding:0 .33rem;
  box-shadow:0 2px 6px rgba(196, 166, 247, 0.952);
}

/* Pastel lavender primary action */
.btn-lavender {
  background-color: #d1b7f6 !important;
  color: #4c1d95 !important;
  border: 1px solid #ddd6fe !important;
  border-radius: 0.5rem !important;
  padding: 0.5rem 0.75rem !important;
  font-weight: 600 !important;
  transition:
    background 0.15s ease,
    box-shadow 0.15s ease,
    transform 0.05s ease !important;
}

.btn-lavender:hover {
  background-color: #d0baf7 !important;
  filter: brightness(0.97);
}

.btn-lavender:active {
  transform: translateY(1px) !important;
}

/* Pastel blue copy action */
.btn-red {
  background-color: #fabdd6 !important; /* lavender/indigo-50 */
  color: #fb6363 !important;            /* indigo-900 */
  border: 1px solid #fabdd6 !important; /* indigo-200 */
  border-radius: 0.5rem !important;
  padding: 0.5rem 0.75rem !important;
  font-weight: 600 !important;
  transition: background .15s ease, box-shadow .15s ease, transform .05s ease !important;
}
/* Pastel red action (copy/delete/etc.) */
.btn-red {
  background-color: #fabdd6 !important;
  color: #fb6363 !important;
  border: 1px solid #fabdd6 !important;
  border-radius: 0.5rem !important;
  padding: 0.5rem 0.75rem !important;
  font-weight: 600 !important;
  transition:
    background 0.15s ease,
    box-shadow 0.15s ease,
    transform 0.05s ease !important;
}

.btn-red:hover {
  background-color: #fabdd6 !important;
}

.btn-red:active {
  transform: translateY(1px) !important;
}

/* Status pill */
.status-pill{
  margin-left:auto;
  padding:.25rem .5rem;
  border-radius:9999px;
  font-size:12px;
  line-height:1;
  background:#dcc8fa; /* gray */
  color:#374151;
}
.status-pill[data-status="active"]{
  background:#34d399;
  color:#022c22;
  border:none;
  font-weight:600;
}
body.theme-dark .status-pill{
  background:#312e81;
  color:#c7d2fe;
  border-color:#4c1d95;
}
body.theme-dark .status-pill[data-status="active"]{
  background:#16a34a;
  color:#f0fdf4;
}
.safetap-pill{
  text-transform:uppercase;
  letter-spacing:.08em;
  background:#69af62;
  color:#e0f2fe;
  border-color:#bfdbfe;
}
.safetap-pill--ok{background:#34d399;color:#022c22;border-color:#10b981;}
.safetap-pill--alert{background:#fecaca;color:#7f1d1d;border-color:#f87171;}
.safetap-pill--setup{background:#fef08a;color:#78350f;border-color:#fcd34d;}
.safetap-pill--neutral{background:#e0e7ff;color:#312e81;border-color:#c7d2fe;}
body.theme-dark .safetap-pill{background:rgba(129,140,248,.25);color:#e0e7ff;border-color:#818cf8;}
body.theme-dark .safetap-pill--ok{background:#15803d;color:#f0fdf4;border-color:#16a34a;}
body.theme-dark .safetap-pill--alert{background:#b91c1c;color:#fee2e2;border-color:#f87171;}
body.theme-dark .safetap-pill--setup{background:#b45309;color:#fffbeb;border-color:#f6ad55;}

/* Hide school-only controls for non-child cards and trusted cards */
.echokey-card-ui:not([data-kind="child"]) .school-only,
.trusted-card .school-only {
  display: none !important;
}

/* ===== Mobile modal/drawer scroll safety ===== */
.modal, .modal-content, .drawer, .sheet,
[role="dialog"], [data-modal="true"],
.settings-modal, .settings-modal .modal-content {
  max-height: 90dvh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Optional dvh helper if a class uses 100vh somewhere */
@supports (height: 100dvh) {
  .h-\[100vh\] { height: 100dvh !important; }
}

.ios-a2hs-hint {
  background:#FEF3C7; /* amber-100 */
  border:1px solid #F59E0B; /* amber-500 */
  color:#92400E; /* amber-900 */
  padding:.75rem .9rem;
  border-radius:.75rem;
  margin:.75rem 0;
  font-size:.95rem;
}
.ios-a2hs-hint .minor { font-size:.85rem; color:#92400E; opacity:.9; }

/* Prevent background scroll when any modal is open */
body.modal-open { overflow: hidden; }

.ek-tile { background: var(--tile-bg); border-color: var(--tile-line); }
/* trusted tile visual */
.ek-tile-trusted {
  background: #d6bcf3;
  border-color: #cfe6ff;
  box-shadow: 0 0 0 1px #e9f3ff inset;
}

/* Dark mode fixes for EK tiles (ensure contrast) */
body.theme-dark .ek-tile {
  background: #111827 !important;
  border-color: #1f2937 !important;
  color: #e2e8f0;
  box-shadow: 0 1px 3px rgba(0,0,0,0.35);
}
body.theme-dark .ek-tile .text-gray-800,
body.theme-dark .ek-tile .text-gray-600,
body.theme-dark .ek-tile .text-gray-500,
body.theme-dark .ek-tile .ek-badge,
body.theme-dark .ek-tile .ek-status-dot,
body.theme-dark .ek-tile .ek-actions button,
body.theme-dark .ek-tile .ek-actions a {
  color: #e2e8f0 !important;
  border-color: rgba(255,255,255,0.18);
}
body.theme-dark .ek-tile .ek-badge {
  background: rgba(124,58,237,0.18);
  border-color: rgba(124,58,237,0.45);
}
body.theme-dark .ek-tile .ek-actions .ek-open-btn,
body.theme-dark .ek-tile .ek-actions .ek-action-btn {
  background: rgba(255,255,255,0.08);
  color: #f8fafc !important;
}
body.theme-dark .ek-tile .ek-open-btn.btn-lavender {
  background: linear-gradient(135deg, #7c3aed, #6366f1);
  color: #fff !important;
  border-color: transparent;
}

/* trusted badge */
.ek-badge-blue {
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 9999px;
  background: #e0f2fe;  /* sky-100 */
  color: #1e40af;       /* indigo-900 */
  border: 1px solid #bae6fd; /* sky-200 */
}

/* ===== Trusted Devices row: keep label on one line, actions flexible ===== */
.device-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(15,23,42,.08);
  background:rgba(71,85,105,.04);
}

/* Alert history modal dark override */
body.theme-dark .alert-history-modal {
  background: #0f172a !important;
  color: #e2e8f0;
  border: 1px solid #1f2937;
}
body.theme-dark .alert-history-modal input[type="date"] {
  background: #111827;
  border-color: #334155;
  color: #e2e8f0;
}
body.theme-dark .alert-history-modal .text-gray-500,
body.theme-dark .alert-history-modal .text-gray-600 {
  color: #cbd5e1 !important;
}

/* Detail modal dark mode (EchoKey Details) */
body.theme-dark .detail-modal {
  background: #0b1220 !important;
  color: #e5e7eb !important;
  border: 1px solid #1f2937;
}
body.theme-dark .detail-modal .border-b {
  border-color: #1f2937 !important;
}
body.theme-dark .detail-modal .font-semibold,
body.theme-dark .detail-modal [data-close] {
  color: #e5e7eb !important;
}
body.theme-dark .detail-modal [data-close]:hover {
  color: #f8fafc !important;
}

/* Trusted contacts popup (dark) */
body.theme-dark .trusted-popup {
  background: #0f172a !important;
  color: #e2e8f0 !important;
  border: 1px solid #1f2937 !important;
}
body.theme-dark .trusted-popup h3,
body.theme-dark .trusted-popup p,
body.theme-dark .trusted-popup .text-gray-500 {
  color: #e2e8f0 !important;
}
body.theme-dark .trusted-popup [data-close] {
  color: #cbd5e1 !important;
}
body.theme-dark .trusted-popup .border {
  border-color: #1f2937 !important;
}
body.theme-dark .trusted-popup .bg-white {
  background: #111827 !important;
  color: #e2e8f0 !important;
}
body.theme-dark .trusted-popup .text-gray-600,
body.theme-dark .trusted-popup .text-gray-700,
body.theme-dark .trusted-popup .text-gray-800 {
  color: #e2e8f0 !important;
}
body.theme-dark .trusted-popup .text-gray-400,
body.theme-dark .trusted-popup .text-gray-500 {
  color: #cbd5e1 !important;
}
body.theme-dark .trusted-popup .text-gray-300 {
  color: #e5e7eb !important;
}
body.theme-dark .trusted-popup .bg-gray-50,
body.theme-dark .trusted-popup .bg-white {
  background: #0b1220 !important;
  color: #e2e8f0 !important;
  border-color: #1f2937 !important;
}
body.theme-dark .trusted-popup .border-gray-200,
body.theme-dark .trusted-popup .border {
  border-color: #1f2937 !important;
}

.device-row > :first-child,
.device-row .label,
.device-row .device-name,
.device-row [data-device-name] {
  /* the name/label column */
  flex: 1 1 auto;
  min-width: 0;                 /* enables ellipsis in flex layouts */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.device-row .actions {
  flex: 0 0 auto;               /* don’t shrink action buttons */
  display: flex;
  gap: 8px;
}
body.theme-dark .device-row{
  background:rgba(15,23,42,.6);
  border-color:rgba(255,255,255,.08);
}

.detail-section{
  margin:32px auto;
}
.detail-heading{
  margin-bottom:12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.detail-eyebrow{
  text-transform:uppercase;
  font-size:11px;
  letter-spacing:.2em;
  color:var(--muted);
}
.detail-title{
  font-size:20px;
  font-weight:700;
  color:var(--ink);
}
.overview-grid .section-box{
  min-height:200px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}

/* ========== Per-EchoKey Settings Panel – dark mode fix ========== */

/* Base look in light mode (explicit so modals stay readable) */
.settings-panel {
  background: var(--card-bg);
  color: var(--ink);
  border: 1px solid var(--card-line);
  border-radius: 20px;
  box-shadow: var(--shadow);
}

/* Tabs row in light mode */
.settings-panel .settings-tabs button,
.settings-panel [role="tab"] {
  color: var(--muted);
}

/* --- Dark theme overrides --- */
body.theme-dark .settings-panel {
  background: var(--card-bg) !important;
  color: var(--ink) !important;
  border-color: var(--card-line) !important;
}

/* Header + footer bars inside the panel */
body.theme-dark .settings-panel .settings-header,
body.theme-dark .settings-panel .settings-footer {
  background: var(--card-bg) !important;
  border-color: var(--card-line) !important;
}

/* General text in the panel */
body.theme-dark .settings-panel p,
body.theme-dark .settings-panel label,
body.theme-dark .settings-panel span {
  color: var(--ink) !important;
}

/* Tabs: SafeTap / Trusted Contacts / Activity / Key Controls */
body.theme-dark .settings-panel .settings-tabs button,
body.theme-dark .settings-panel [role="tab"] {
  background: transparent;
  color: var(--muted) !important;
  border-color: transparent;
}

body.theme-dark .settings-panel .settings-tabs button[aria-selected="true"],
body.theme-dark .settings-panel [role="tab"][aria-selected="true"] {
  background: #70aaf5 !important;
  color: #f9fafb !important;
  border-color: #7c3aed !important;  /* purple underline feel */
}

/* All buttons inside the panel */
body.theme-dark .settings-panel button {
  color: var(--ink) !important;
}

/* Primary Save-style buttons */
body.theme-dark .settings-panel button.bg-purple-600,
body.theme-dark .settings-panel .btn-primary {
  background: #7c3aed !important;
  border-color: #7c3aed !important;
  color: #ffffff !important;
}

/* Secondary / bordered buttons (Close, etc.) */
body.theme-dark .settings-panel button.border,
body.theme-dark .settings-panel .btn-secondary {
  background: transparent !important;
  border-color: #334155 !important;
  color: #e5e7eb !important;
}

/* Little “X” close button in the header */
body.theme-dark .settings-panel [data-close] {
  color: var(--ink) !important;
}
body.theme-dark .settings-panel [data-close]:hover {
  background: #1f2937 !important;
}

/* ========== Dark mode tuning: SafeTap status bar ========== */

/* ALERT pill */
body.theme-dark .safetap-status-label {
  background: #f97373 !important;    /* brighter red */
  color: #111827 !important;         /* dark text for contrast */
}

/* Main SafeTap status copy */
body.theme-dark .safetap-status-body p {
  color: #e5e7eb !important;         /* light text */
}

/* Secondary lines in the status body */
body.theme-dark .safetap-status-body p + p {
  color: hsl(220, 16%, 96%) !important;         /* softer but still bright */
}

/* Links inside the status bar */
body.theme-dark .safetap-status-body a {
  color: hsl(240, 11%, 98%) !important;         /* light blue link */
  text-decoration: underline;
}

/* ========== Dark mode tuning: EchoKey card text ========== */
body.theme-dark .echokey-card-ui {
  background: #020617 !important;
  border-color: #ba7fda !important;
  color: hsl(216, 56%, 98%) !important;
}
body.theme-dark .echokey-card-ui .card-header,
body.theme-dark .echokey-card-ui .card-header * {
  color: hsl(216, 56%, 98%) !important;
}
body.theme-dark .echokey-card-ui p,
body.theme-dark .echokey-card-ui .text-sm,
body.theme-dark .echokey-card-ui .summary-text,
body.theme-dark .echokey-card-ui .empty-text {
  color: hsl(220, 27%, 98%) !important;
}
body.theme-dark .echokey-card-ui .text-xs {
  color: hsl(220, 27%, 98%) !important;
}
/* === Dark mode: SafeTap status bar text contrast === */
/* Dark mode: SafeTap status bar */
body.theme-dark .safetap-status-bar {
  background: #020617 !important;
  border-color: #4c1d95 !important;
  color: #e5e7eb !important;
}

body.theme-dark .safetap-status-bar p,
body.theme-dark .safetap-status-bar span,
body.theme-dark .safetap-status-bar strong,
body.theme-dark .safetap-status-bar .text-sm,
body.theme-dark .safetap-status-bar .text-xs {
  color: #e5e7eb !important;
}

body.theme-dark .safetap-status-bar .status-heading {
  color: #f9fafb !important;
}
/* ==== SafeTap hero button alert dot ==== */
.hero-btn[data-alert="active"] {
  position: relative; /* so the dot can anchor */
}

.hero-btn[data-alert="active"]::after {
  content: "";
  position: absolute;
  top: 4px;
  right: 6px;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #ef4444;           /* red-500 */
  box-shadow: 0 0 0 2px rgba(255,255,255,0.9);
}

body.theme-dark .hero-btn[data-alert="active"]::after {
  box-shadow: 0 0 0 2px #0f172a; /* dark halo */
}

/* ==== Sidebar SafeTap nav alert dot ==== */

/* --- Hero info dialog (bottom sheet modal) --- */
#heroInfoInline{
  margin-top:16px;
}
.hero-info-inline .hero-info-panel{
  width:100%;
  background:var(--card-bg);
  border:1px solid var(--card-line);
  border-radius:22px;
  padding:20px;
  box-shadow:var(--shadow);
  transform:translateY(-6px);
  opacity:0;
  transition:transform .2s ease, opacity .2s ease;
}
.hero-info-inline.is-open .hero-info-panel{
  transform:none;
  opacity:1;
}
.hero-info-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}
#heroInfoDialog{
  position:fixed;
  inset:0;
  display:none;
  align-items:flex-end;
  justify-content:center;
  padding:24px 16px 32px;
  background:rgba(6,11,25,.65);
  backdrop-filter:blur(4px);
  z-index:60;
}
#heroInfoDialog .hero-info-panel{
  width:min(520px,100%);
  background:var(--card-bg);
  border:1px solid var(--card-line);
  border-radius:24px;
  padding:20px;
  box-shadow:var(--shadow);
  transform:translateY(24px);
  opacity:0;
  transition:transform .2s ease, opacity .2s ease;
}
#heroInfoDialog.is-open .hero-info-panel{
  transform:none;
  opacity:1;
}
#heroInfoDialog .hero-info-title{
  font-size:1.15rem;
  font-weight:700;
  color:var(--ink);
}
#heroInfoDialog .hero-info-subtitle{
  font-size:.9rem;
  color:var(--muted);
  margin-top:2px;
}
#heroInfoDialog .hero-info-body{
  margin-top:12px;
  color:var(--ink);
  font-size:.95rem;
}
.hero-info-close{
  border:none;
  background:rgba(71,85,105,.08);
  border-radius:999px;
  width:32px;
  height:32px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:var(--muted);
  cursor:pointer;
}
.hero-info-close:hover{
  background:rgba(124,58,237,.12);
  color:var(--brand);
}
body.modal-open{
  overflow:hidden;
}
body.theme-dark #heroInfoDialog{
  background:rgba(0,0,0,.75);
}
body.theme-dark #heroInfoDialog .hero-info-panel{
  background:var(--card-bg);
}
body.theme-dark #heroInfoDialog .hero-info-title{
  color:var(--ink);
}
body.theme-dark #heroInfoDialog .hero-info-subtitle{
  color:var(--muted);
}
[data-role="dashboard-nav"] [data-nav-target="#section-safetap"][data-alert="active"] {
  position: relative;
}

[data-role="dashboard-nav"] [data-nav-target="#section-safetap"][data-alert="active"]::after {
  content: "";
  position: absolute;
  top: 6px;
  right: 10px;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #ef4444;
}

/* Ritual Hub layout */

.ritual-hub-shell {
  max-width: 1100px;
  margin: 0 auto;
  padding: 1.5rem 1.25rem 2.5rem;
}

.ritual-hub-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}

.ritual-hub-header-title {
  font-size: 1.5rem;
  font-weight: 700;
}
.ritual-hub-header-desc{
  margin-top:0.35rem;
  color:#475569;
  font-size:0.95rem;
}

.ritual-hub-header-eyebrow {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #94a3b8;
  margin-bottom: 0.1rem;
}

.ritual-hub-back {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.8rem;
  color: #4f46e5;
  text-decoration: none;
}

.ritual-hub-back:hover {
  text-decoration: underline;
}

.ritual-hub-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

@media (max-width: 768px) {
  .ritual-hub-grid {
    grid-template-columns: 1fr;
  }

  .hub-span-2 {
    grid-column: span 1 / span 1;
  }
}

.hub-span-2 {
  grid-column: span 2 / span 2;
}

/* Theme toggle button */

.theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;
  padding: 0.45rem 0.8rem;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.6);
  background: rgba(248, 250, 252, 0.9);
  color: #0f172a;
}

.theme-toggle-icon {
  font-size: 0.9rem;
}

.theme-toggle.is-on {
  background: linear-gradient(135deg, #312e81, #6366f1);
  color: #f9fafb;
  border-color: transparent;
}
/* Global dark background + base text */
body.theme-dark {
  background: #020617;            /* very dark slate */
  color: #e2e8f0;                 /* light text */
}

/* Card surfaces */
body.theme-dark .section-box {
  background: rgba(15, 23, 42, 0.96); /* slate-900ish */
  border-color: rgba(148, 163, 184, 0.35);
}

/* Section titles + subtitles */
body.theme-dark .section-title {
  color: #e5e7eb;
}
body.theme-dark .ritual-hub-header-desc{
  color:#e0e7ff;
}

/* Generic gray text variants inside cards */
body.theme-dark .text-gray-600 {
  color: #cbd5f5 !important;
}

body.theme-dark .text-gray-500 {
  color: #aeb8d4 !important;
}
/* Gate badge in windows panel */
.ritual-windows-gate-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  border-radius:999px;
  padding:4px 10px;
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.01em;
  border:1px solid transparent;
  background:#e8fdf3;
  color:#064e3b;
}
.ritual-windows-gate-badge--allowed{
  background:#34d399;
  color:#022c22;
  border-color:#059669;
  box-shadow:0 0 0 1px rgba(22,163,74,.12) inset;
}
.ritual-windows-gate-badge--blocked{
  background:#fff7ed;
  color:#92400e;
  border-color:#fdba74;
  box-shadow:0 0 0 1px rgba(194,65,12,.15) inset;
}
body.theme-dark .ritual-windows-gate-badge {
  background:rgba(15,23,42,.65);
  color:#e2e8f0;
  border-color:rgba(148,163,184,.4);
}

body.theme-dark .ritual-windows-gate-badge--allowed {
  background:#16a34a;
  color:#fbfdf9;
  border-color:#15803d;
  box-shadow:0 0 0 1px rgba(15,118,110,.3) inset;
}

body.theme-dark .ritual-windows-gate-badge--blocked {
  background:#ea580c;
  color:#fff7ed;
  border-color:#c2410c;
  box-shadow:0 0 0 1px rgba(180,83,9,.35) inset;
}

body.theme-dark input[type="time"]::-webkit-calendar-picker-indicator{
  filter: invert(1) brightness(1.4);
  opacity:0.85;
}
body.theme-dark input[type="time"]{
  color:#e2e8f0;
}
/* Primary CTA hover/active */
.send-ritual-button {
  transition: transform 0.08s ease, box-shadow 0.12s ease, background 0.12s ease;
}

.send-ritual-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(99, 102, 241, 0.45);
}

.send-ritual-button:active {
  transform: translateY(0);
  box-shadow: 0 4px 10px rgba(79, 70, 229, 0.45);
}

/* Secondary “View All / Inbox” style hover */
.btn-view-more {
  transition: background 0.12s ease, color 0.12s ease, transform 0.08s ease;
}

.btn-view-more:hover {
  transform: translateY(-1px);
  background: rgba(148, 163, 184, 0.12);
}

/* Small security chip under hero */
.security-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 500;
  background: rgba(15, 23, 42, 0.04);
  color: #4b5563;
  border: 1px solid rgba(148, 163, 184, 0.55);
}

.security-chip i {
  font-size: 0.7rem;
}

/* Dark-mode variant */
body.theme-dark .security-chip {
  background: rgba(15, 23, 42, 0.9);
  color: #e5e7eb;
  border-color: rgba(129, 140, 248, 0.8);
}

/* Ritual Hub subtitle */
.ritual-hub-subtitle {
  font-size: 0.95rem;
  color: #374151;
}

body.theme-dark .ritual-hub-subtitle {
  color: #e5e7eb;
}

.ritual-updated-label {
  font-style: normal;
}

body.theme-dark .ritual-updated-label {
  color: #9ca3af;
}

/* === Ritual Hub – School Windows contrast (light mode) === */

/* Slightly tint the whole card */
#rituals-windows-card {
  background: #f9fafb; /* very light gray instead of pure white */
}

/* Each window row (we reuse rounded-xl + border on those rows) */
#rituals-windows-card .rounded-xl.border {
  background: #dbc0f7;   /* gray-100 */
}

/* Make the times + labels darker */
#rituals-windows-card .rounded-xl.border span,
#rituals-windows-card .rounded-xl.border div {
  color: #111827;        /* gray-900 */
}

/* Any generic gray text inside the panel gets a bump in contrast */
#rituals-windows-card .text-gray-500,
#rituals-windows-card .text-gray-400 {
  color: #4b5563;        /* gray-600 */
}

/* === Dark mode keep things balanced === */

body.theme-dark #rituals-windows-card {
  background: #020617;   /* same dark shell */
}

body.theme-dark #rituals-windows-card .rounded-xl.border {
  background: #020617;   /* let rows blend into dark card */
  border-color: #1f2937;
}

body.theme-dark #rituals-windows-card .rounded-xl.border span,
body.theme-dark #rituals-windows-card .rounded-xl.border div {
  color: #e5e7eb;        /* light text on dark background */
}

body.theme-dark #rituals-windows-card .text-gray-500,
body.theme-dark #rituals-windows-card .text-gray-400 {
  color: #cbd5f5;
}

/* === Dark mode polish: EchoKey Settings Panel === */
body.theme-dark .settings-panel {
  background: var(--card-bg) !important;
  border-radius: 20px;
  border: 1px solid var(--card-line);
  box-shadow: var(--shadow);
}

/* Lighten the columns inside the panel */
body.theme-dark .settings-panel .dual-grid {
  border-radius: 16px;
  padding: 12px;
  background: transparent;
}

/* Individual boxes: Trusted Devices, Trusted Contacts, SafeTap, Rituals, Double-tap */
body.theme-dark .settings-panel .section-box {
  background: var(--card-bg) !important;
  border-color: var(--card-line) !important;
}
/* Headings + labels inside the panel 
body.theme-dark .settings-panel h2,
body.theme-dark .settings-panel h3,
body.theme-dark .settings-panel .section-title {
  color: var(--ink) !important;
}

body.theme-dark .settings-panel p,
body.theme-dark .settings-panel .text-sm,
body.theme-dark .settings-panel .text-xs {
  color: var(--muted) !important;
}
*/
/* Device rows – give each a chip-like card */
body.theme-dark .settings-panel .device-row {
  background: #1e2438;
  border-radius: 12px;
  border: 1px solid #323c55;
  padding: 6px 8px;
}

/* Primary buttons in the panel */
body.theme-dark .settings-panel .trigger-safetap-button,
body.theme-dark .settings-panel .send-ritual-button,
body.theme-dark .settings-panel button.bg-purple-600,
body.theme-dark .settings-panel .btn-primary {
  background: linear-gradient(135deg, #7c3aed, #6366f1) !important;
  border-color: transparent !important;
  color: #ffffff !important;
}

/* Secondary buttons (View full history, Stop, etc.) */
body.theme-dark .settings-panel .btn-view-more,
body.theme-dark .settings-panel button.border,
body.theme-dark .settings-panel .btn-secondary {
  background: rgba(15, 23, 42, 0.9) !important;
  border-color: #4b5563 !important;
  color: #e5e7eb !important;
}
/* ===== Hero Info Modal & Global Modal Helpers ===== */

/* When any overlay modal is open, prevent background scroll */
body.modal-open {
  overflow: hidden;
}

/* Smooth show/hide for the hero info modal */
#heroInfoModal {
  transition: opacity 0.18s ease, transform 0.18s ease;
}

#heroInfoModal.hidden {
  opacity: 0;
  pointer-events: none;
}

#heroInfoModal:not(.hidden) {
  opacity: 1;
}

/* Optional: small "lift" animation on content */
#heroInfoModal:not(.hidden) .modal-panel,
#heroInfoModal:not(.hidden) .rounded-2xl {
  transform: translateY(0);
}

#heroInfoModal.hidden .modal-panel,
#heroInfoModal.hidden .rounded-2xl {
  transform: translateY(4px);
}
/* ===== Dark mode overrides for Hero Info Modal ===== */

/* Panel background & text */
:root[data-theme="dark"] #heroInfoModal .bg-white,
body.theme-dark #heroInfoModal .bg-white {
  background-color: #111827; /* gray-900-ish */
  color: #e5e7eb;           /* light text */
}

/* Body text inside the modal */
:root[data-theme="dark"] #heroInfoModal .text-gray-700,
body.theme-dark #heroInfoModal .text-gray-700 {
  color: #e5e7eb;
}

:root[data-theme="dark"] #heroInfoModal .text-gray-900,
body.theme-dark #heroInfoModal .text-gray-900 {
  color: #f9fafb;
}

/* Subtle border + hover tweaks */
:root[data-theme="dark"] #heroInfoModal .border-gray-300,
body.theme-dark #heroInfoModal .border-gray-300 {
  border-color: #4b5563;
}

:root[data-theme="dark"] #heroInfoModal .hover\:bg-gray-100:hover,
body.theme-dark #heroInfoModal .hover\:bg-gray-100:hover {
  background-color: #1f2937;
}

/* Secondary button */
:root[data-theme="dark"] #heroInfoModal .border-gray-300.text-gray-700,
body.theme-dark #heroInfoModal .border-gray-300.text-gray-700 {
  color: #e5e7eb;
}
/* ===== Dark mode: Hero buttons ===== */

:root[data-theme="dark"] .hero-btn,
body.theme-dark .hero-btn {
  background: rgba(17, 24, 39, 0.85);   /* dark panel */
  border-color: #4b5563;
  color: #e5e7eb;
}

:root[data-theme="dark"] .hero-btn:hover,
body.theme-dark .hero-btn:hover {
  background: rgba(31, 41, 55, 0.95);
}
/* ========================= SafeTap Alert Cards ========================= */

/* Base card styling (works in light mode) */
.safetap-alert-card {
  border-radius: 1rem;
  padding: 0.9rem 1rem;
  background-color: #fef2f2;       /* light red */
  border: 1px solid #fecaca;       /* soft red border */
  color: #7f1d1d;                  /* dark red text */
}

/* Slight separation between multiple alerts */
.safetap-alert-card + .safetap-alert-card {
  margin-top: 0.75rem;
}

/* Timestamp – quieter, secondary line */
.safetap-alert-timestamp {
  font-size: 0.75rem;
  color: #6b7280;                  /* gray-500 */
  font-style: italic;
  margin-bottom: 0.35rem;
}

/* Status pill (NEW / sent) */
.safetap-alert-status-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.1rem 0.6rem;
  border-radius: 9999px;
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background-color: #f97373;       /* lighter red so it pops but not screaming */
  color: #7f1d1d;
}

/* Primary action button (View location) */
.safetap-alert-primary-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.35rem 0.9rem;
  border-radius: 9999px;
  font-size: 0.8rem;
  font-weight: 500;
  border: 1px solid rgba(148, 163, 184, 0.6); /* slate-ish outline */
  background: rgba(248, 250, 252, 0.9);       /* near-white */
  color: #111827;
  transition: background 0.15s ease, transform 0.08s ease, box-shadow 0.15s ease;
}

.safetap-alert-primary-btn:hover {
  background: #e5f0ff;
  transform: translateY(-0.5px);
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.15);
}

/* ========================= Dark mode tweaks ========================= */
/* Adjust selectors to match your dark-mode toggle if different */
body.theme-dark .safetap-alert-card,
[data-theme="dark"] .safetap-alert-card {
  background-color: #d1afd4;       
  border-color: #fca5a5;
  color: #fee2e2;
}

body.theme-dark .safetap-alert-timestamp,
[data-theme="dark"] .safetap-alert-timestamp {
  color: #954bb4;                  
}

body.theme-dark .safetap-alert-status-pill,
[data-theme="dark"] .safetap-alert-status-pill {
  background-color: #fecaca;
  color: #7f1d1d;
}

body.theme-dark .safetap-alert-primary-btn,
[data-theme="dark"] .safetap-alert-primary-btn {
  border-color: rgba(248, 250, 252, 0.35);
  background: rgba(15, 23, 42, 0.6);
  color: #e5e7eb;
}

body.theme-dark .safetap-alert-primary-btn:hover,
[data-theme="dark"] .safetap-alert-primary-btn:hover {
  background: rgba(15, 23, 42, 0.85);
}
/* ========================= SafeTap Status Strip ========================= */

.safetap-status-strip {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
  padding: 0.35rem 0.6rem;
  border-radius: 9999px;
  background: rgba(248, 113, 113, 0.10);   /* soft alert tint */
  /*background: rgba(22, 163, 74, 0.06);        faint green */
  border: 1px solid rgba(22, 163, 74, 0.12);  /* green-600 soft border */
}

.safetap-status-label {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.7rem;
  color: #15803d;                              /* green-700 */
}

.safetap-status-meta {
  font-size: 0.72rem;
  opacity: 0.9;                             /* override Tailwind's .opacity-70 */
}

/* Stop button – subtle emergency feel */
.safetap-stop-btn {
  margin-left: auto;
  padding: 0.2rem 0.7rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border: 1px solid rgba(248, 113, 113, 0.7);  /* red-400 */
  background: rgba(248, 250, 252, 0.9);        /* near-white */
  color: #b91c1c;                              /* red-700 */
  transition: background 0.15s ease, transform 0.08s ease, box-shadow 0.15s ease;
}

.safetap-stop-btn:hover {
  background: #fee2e2;
  transform: translateY(-0.5px);
  box-shadow: 0 4px 10px rgba(127, 29, 29, 0.25);
}

/* ========================= Dark mode tweaks ========================= */

body.theme-dark .safetap-status-strip,
[data-theme="dark"] .safetap-status-strip {
  background: rgba(22, 163, 74, 0.2);
  border-color: rgba(134, 239, 172, 0.6);
}

body.theme-dark .safetap-status-label,
[data-theme="dark"] .safetap-status-label {
  color: #bbf7d0;                              /* green-200 */
}

body.theme-dark .safetap-status-meta,
[data-theme="dark"] .safetap-status-meta {
  color: #e5e7eb;                              /* gray-200 */
}

body.theme-dark .safetap-stop-btn,
[data-theme="dark"] .safetap-stop-btn {
  border-color: rgba(252, 165, 165, 0.9);
  background: rgba(15, 23, 42, 0.7);
  color: #fecaca;
}

body.theme-dark .safetap-stop-btn:hover,
[data-theme="dark"] .safetap-stop-btn:hover {
  background: rgba(127, 29, 29, 0.9);
}
/* Double-tap SafeTap block (Require double-tap to trigger SafeTap) */
[data-dtap-wrap] {
  border-radius: 1rem;
  background: rgba(124, 58, 237, 0.06);          /* light brand purple */
  border: 1px solid rgba(124, 58, 237, 0.40);
  color: #e4bdfb;
}

/* Make the text follow the card colour instead of random grays */
[data-dtap-wrap] .text-sm,
[data-dtap-wrap] .text-xs,
[data-dtap-wrap] span {
  color: inherit;
}

/* The number input box */
[data-dtap-wrap] input[data-dtap-window] {
  border-color: rgba(124, 58, 237, 0.40);
}
body.theme-dark [data-dtap-wrap] input[data-dtap-window] {
  background: rgba(15, 23, 42, 0.85);
  color: #e5e7eb;
  border-color: rgba(196, 181, 253, 0.6);
}
body.theme-dark [data-dtap-wrap] input[data-dtap-window]::placeholder {
  color: rgba(226, 232, 240, 0.7);
}

/* "Saved" / "Saving…" label on the right */
[data-dtap-wrap] [data-dtap-status] {
  color: rgba(17, 24, 39, 0.7);
}

/* Global SafeTap alerts banner at top of the column */
.safetap-global-banner {
  border-radius: 9999px;
  padding: 0.65rem 1.1rem;
  background: rgba(124, 58, 237, 0.08);  /* light brand purple, works on light & dark */
  color: #111827;                         /* readable on lavender */
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  font-size: 0.85rem;
}

/* If you have a title line in there like "SafeTap alerts" */
.safetap-global-banner strong,
.safetap-global-banner b {
  color: #111827;
}

body.theme-dark .safetap-global-banner {
  background: rgba(124, 58, 237, 0.2);
  border-color: rgba(196, 181, 253, 0.7);
  color: #e5e7eb;
}
.safetap-meta {
  font-size: 0.75rem;           /* similar to text-xs */
  margin-top: 0.15rem;
  color: #4b5563;               /* slate-600 on light */
}

body.theme-dark .safetap-meta {
  color: #e0e7ff;               /* soft indigo on dark */
  opacity: 0.9;
}
/* Active incident strip */
.safetap-status-strip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 0.7rem;
  border-radius: 9999px;
  background: rgba(248, 113, 113, 0.08);   /* soft red */
  border: 1px solid rgba(248, 113, 113, 0.5);
}

body.theme-dark .safetap-status-strip {
  background: rgba(248, 113, 113, 0.2);
  border-color: rgba(248, 113, 113, 0.75);
}

.safetap-status-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #b91c1c; /* red-700 */
}

body.theme-dark .safetap-status-label {
  color: #fecaca; /* red-200 */
}

.safetap-status-meta {
  font-size: 0.75rem;
  color: #4b5563; /* slate-600 */
}

body.theme-dark .safetap-status-meta {
  color: #fef9c3; /* amber-100 */
  opacity: 0.9;
}

.safetap-stop-btn {
  margin-left: auto;
  font-size: 0.7rem;
  border-radius: 9999px;
  padding: 0.15rem 0.75rem;
  border: 1px solid rgba(55, 65, 81, 0.4); /* gray-700-ish */
  background: #ffffff;
  color: #111827;
  cursor: pointer;
}

body.theme-dark .safetap-stop-btn {
  background: rgba(15, 23, 42, 0.9); /* slate-900 */
  color: #e5e7eb;
  border-color: rgba(148, 163, 184, 0.8);
}
/* Double-tap SafeTap settings chip */
.safetap-doubletap-card {
  border-radius: 0.9rem;
  padding: 0.75rem 0.9rem;
  background: rgba(129, 140, 248, 0.12);           /* indigo-ish lavender */
  border: 1px solid rgba(165, 180, 252, 0.85);     /* indigo-300 */
}

body.theme-dark .safetap-doubletap-card {
  background: rgba(129, 140, 248, 0.25);
  border-color: rgba(191, 219, 254, 0.9);
}

/* Make the main title and helper line read nicely on both themes */
.safetap-doubletap-card .text-sm {
  color: #111827;
}

body.theme-dark .safetap-doubletap-card .text-sm {
  color: #f9fafb;
}

.safetap-doubletap-card .text-xs {
  color: #4b5563;
}

body.theme-dark .safetap-doubletap-card .text-xs {
  color: #e5e7eb;
  opacity: 0.85;
}

.key-icon {
  color: #f59e0b;           /* amber-500 */
  text-shadow: 0 0 4px rgba(245, 158, 11, 0.45);
}

.echokey-card-ui .card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.75rem;
}

.card-header-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.25rem;
}

.manage-key-row {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.15rem;
}

.manage-hint {
  font-size: 11px;
  color: rgba(55, 65, 81, 0.75); /* gray-700-ish */
}

.manage-key-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  background: linear-gradient(135deg, #8b5cf6, #ec4899);
  color: #fff;
  box-shadow: 0 8px 20px rgba(139, 92, 246, 0.45);
  border: none;
  cursor: pointer;
  transition: transform 0.08s ease, box-shadow 0.08s ease, filter 0.08s ease;
}

.manage-key-cta:hover {
  filter: brightness(1.05);
  box-shadow: 0 10px 24px rgba(139, 92, 246, 0.6);
}

.manage-key-cta:active {
  transform: translateY(1px) scale(0.99);
  box-shadow: 0 4px 10px rgba(88, 28, 135, 0.45);
}

/* SafeTap status pill (ALL CLEAR, etc.) */
.safetap-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.1rem 0.7rem;
  border-radius: 9999px;        /* 👈 full pill */
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  white-space: nowrap;
}

.safetap-pill-ok {
  border: 1px solid #16a34a;   /* green-600-ish */
  background: rgba(22, 163, 74, 0.08);
  color: #15803d;              /* green-700-ish */
  box-shadow: 0 0 0 1px rgba(22, 163, 74, 0.12);
}

/* Dark mode: make Manage key pill text bright + crisp */
html[data-theme="dark"] .manage-badge {
  color: #f9fafb; /* almost white */
  font-weight: 600;
}

/* Optional: icon inside the badge */
html[data-theme="dark"] .manage-badge i {
  color: inherit;
}

/* Dark mode: improve contrast for helper/description text */
html[data-theme="dark"] .section-box .text-gray-600 {
  color: #dfe3e9; /* Tailwind gray-400-ish */
}
.manage-badge {
  box-shadow: 0 0 0 0 rgba(168, 85, 247, 0.25);
  transition: box-shadow 150ms ease, transform 150ms ease;
}

.manage-badge:hover,
.manage-badge:focus-visible {
  box-shadow: 0 0 0 5px rgba(168, 85, 247, 0.25);
  transform: translateY(-1px);
}
.empty-centered {
  text-align: center;
  padding: 2.5rem 1.5rem;
}

html[data-theme="dark"] .detail-title {
  color: #e5e7eb;
}

.detail-title {
  font-size: 1.15rem; /* or 1.2rem */
  font-weight: 700;
  color: #0f172a;      /* darker than body */
}
.detail-eyebrow {
  letter-spacing: 0.16em;
}
.nav-link--active {
  font-weight: 600;
  color: #7c3aed; /* your lavender */
  position: relative;
}

.nav-link--active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.35rem;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, #a855f7, #6366f1);
}
/* ---------- SETTINGS PANEL SHARED ---------- */

/* Inputs */
.settings-panel .settings-input {
  width: 100%;
  border-radius: 0.5rem;
  border: 1px solid var(--border-subtle, #e5e7eb);
  background: var(--surface, #ffffff);
  color: var(--ink, #111827);
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
}

/* Labels & small help text */
.settings-panel .settings-label {
  color: var(--ink, #111827);
}

.settings-panel .settings-help {
  color: var(--muted, #6b7280);
}

/* Sub-card (security question box) */
.settings-panel .settings-subcard {
  margin-top: 0.5rem;
  padding: 0.75rem 0.9rem;
  border-radius: 0.75rem;
  border: 1px solid rgba(124, 58, 237, 0.15);
  background: rgba(124, 58, 237, 0.08);
}

/* Primary call-to-action in settings (Send Invite) */
.settings-panel .settings-primary-btn {
  border-radius: 999px;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  background: linear-gradient(135deg, #8b5cf6, #a855f7);
  color: #ffffff;
  box-shadow: 0 10px 20px rgba(88, 28, 135, 0.35);
  border: none;
  cursor: pointer;
  transition: transform 0.08s ease, box-shadow 0.08s ease, filter 0.08s ease;
}

.settings-panel .settings-primary-btn:hover {
  filter: brightness(1.05);
  box-shadow: 0 14px 28px rgba(88, 28, 135, 0.45);
}

.settings-panel .settings-primary-btn:active {
  transform: translateY(1px);
  box-shadow: 0 6px 14px rgba(88, 28, 135, 0.3);
}

/* ---------- DARK THEME VARIANTS ---------- */

body.theme-dark .settings-panel .settings-input,
body[data-theme="dark"] .settings-panel .settings-input {
  background: #020617;
  border-color: #4b5563;
  color: #e5e7eb;
}

body.theme-dark .settings-panel .settings-input::placeholder,
body[data-theme="dark"] .settings-panel .settings-input::placeholder {
  color: #6b7280;
}

body.theme-dark .settings-panel .settings-label,
body[data-theme="dark"] .settings-panel .settings-label {
  color: #e5e7eb;
}

body.theme-dark .settings-panel .settings-help,
body[data-theme="dark"] .settings-panel .settings-help {
  color: #9ca3af;
}

body.theme-dark .settings-panel .settings-subcard,
body[data-theme="dark"] .settings-panel .settings-subcard {
  background: rgba(88, 28, 135, 0.5);
  border-color: rgba(167, 139, 250, 0.6);
  box-shadow: 0 10px 25px rgba(15, 23, 42, 0.45);
}
body.theme-dark .settings-panel .trusted-chip,
body[data-theme="dark"] .settings-panel .trusted-chip {
  color: #8df6cf;
}
/* Status pill inside settings modal */
.settings-panel .status-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
  background:  #166534;      /* soft green bg for light */
  color: #dcfce7;           /* deep green text */
}

/* Dark theme variant */
body.theme-dark .settings-panel .status-pill,
body[data-theme="dark"] .settings-panel .status-pill {
  background: #022c22;      /* rich dark teal/green */
  color: #6ee7b7;           /* bright mint text */
}
/* =========================
   Top navigation (header)
   ========================= */

.ew-main-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: #ffffff;
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.03);
  backdrop-filter: blur(16px);
}

.ew-main-nav .ew-nav-tagline {
  white-space: nowrap;
}

/* Links */
.ew-nav-link {
  font-size: 0.875rem;
  color: #4b5563;
  padding: 0.25rem 0.5rem;
  border-radius: 999px;
  line-height: 1.5;
  text-decoration: none;
}
/* ----- Alert chip (for any element with data-ek-alerts) ----- */
[data-ek-alerts]{
  display:inline-flex; align-items:center; gap:.35rem;
  height:28px; padding:0 .6rem; border-radius:9999px;
  background:#ede9fe; color:#4c1d95; border:1px solid #ddd6fe;
  font-size:12px; font-weight:600; letter-spacing:.01em;
  transition:transform .08s ease, box-shadow .12s ease, background-color .12s ease;
  text-decoration:none; cursor:pointer;
}
[data-ek-alerts]:hover{
  background:#e9d5ff; box-shadow:0 3px 10px rgba(76,29,149,.15); transform:translateY(-1px);
}
[data-ek-alerts]:active{ transform:translateY(0); }
[data-ek-alerts]:focus-visible{ outline:2px solid #a78bfa; outline-offset:2px; }

/* “Active alert” look (set via JS: el.dataset.alert = 'active') */
[data-ek-alerts][data-alert="active"]{
  background:#fef3c7; border-color:#fde68a; color:#92400e;
}

/* Optional sub-parts if present */
[data-ek-alerts] .dot{
  width:8px; height:8px; border-radius:50%; background:#a78bfa; flex:0 0 auto;
}
[data-ek-alerts][data-alert="active"] .dot{ background:#f59e0b; }

[data-ek-alerts] .count{
  min-width:18px; height:18px; border-radius:9999px; padding:0 6px;
  display:inline-flex; align-items:center; justify-content:center;
  background:#c4b5fd; color:#1f2937; font-size:11px; font-weight:700; line-height:1;
}

/* Dark mode */
.theme-dark [data-ek-alerts]{ background:#2b214b; border-color:#3b2c66; color:#e9d5ff; }
.theme-dark [data-ek-alerts][data-alert="active"]{
  background:#4b3a0c; border-color:#b45309; color:#fde68a;
}
.ew-nav-link:hover {
  background: rgba(129, 140, 248, 0.08);
  color: #4c1d95;
}

/* Small pills for actions */
.ew-nav-chip {
  margin-left: 0.5rem;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 500;
  border: 1px solid rgba(148, 163, 184, 0.7);
  background: #f9fafb;
  color: #111827;
  white-space: nowrap;
}

.ew-nav-chip--primary {
  border-color: transparent;
  background: linear-gradient(135deg, #8b5cf6, #a855f7);
  color: #ffffff;
}

.ew-nav-chip--green {
  border-color: transparent;
  background: linear-gradient(135deg, #16a34a, #22c55e);
  color: #ffffff;
}

.ew-nav-chip--ghost {
  background: transparent;
  color: #4c1d95;
}

.ew-nav-chip:hover {
  opacity: 0.95;
}

/* Dark mode header */
body.theme-dark .ew-main-nav {
  background: rgba(15, 23, 42, 0.96);       /* slate-900-ish */
  border-bottom-color: #111827;
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.9);
}

body.theme-dark .ew-main-nav .ew-nav-tagline {
  color: #9ca3af;
}

body.theme-dark .ew-nav-link {
  color: #e5e7eb;
}

body.theme-dark .ew-nav-link:hover {
  background: rgba(129, 140, 248, 0.16);
  color: #c4b5fd;
}

body.theme-dark .ew-nav-chip {
  border-color: rgba(148, 163, 184, 0.6);
  background: rgba(15, 23, 42, 0.9);
  color: #e5e7eb;
}

body.theme-dark .ew-nav-chip--primary {
  border-color: transparent;
  background: linear-gradient(135deg, #8b5cf6, #c4b5fd);
  color: #ffffff;
}

body.theme-dark .ew-nav-chip--green {
  border-color: transparent;
  background: linear-gradient(135deg, #16a34a, #4ade80);
  color: #022c22;
}

/* App nav integration inside dashboard shell */
.dashboard-shell .app-nav {
  background: #ffffff;
  border-bottom: 1px solid rgba(148, 163, 184, 0.25);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

/* Dark mode: make header match the dark shell */
body.theme-dark .dashboard-shell .app-nav {
  background: #020617; /* near-slate-950 */
  border-bottom-color: rgba(15, 23, 42, 0.9);
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.9);
}

body.theme-dark .dashboard-shell .app-nav a,
body.theme-dark .dashboard-shell .app-nav button,
body.theme-dark .dashboard-shell .app-nav span,
body.theme-dark .dashboard-shell .app-nav i {
  color: #e5e7eb;
}

body.theme-dark .dashboard-shell .app-nav a:hover {
  color: #c4b5fd;
}

body.theme-dark .dashboard-shell .app-nav #logoutBtn {
  background-color: rgba(148, 163, 184, 0.15);
  color: #e5e7eb;
}

body.theme-dark .dashboard-shell .app-nav #loginBtn {
  background-color: #7c3aed;
  color: #f9fafb;
}

/* =========================
   Dashboard footer / trailer
   ========================= */

.dashboard-footer {
  margin-top: 3rem;
  border-top: 1px solid rgba(148, 163, 184, 0.4);
  background: #f9fafb;
}

.dashboard-footer #main-footer {
  max-width: 72rem;
  margin: 0 auto;
  padding: 1rem 1.5rem;
  font-size: 0.75rem;
  color: #6b7280;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  align-items: center;
  justify-content: space-between;
}

.dashboard-footer #main-footer a {
  color: #4c1d95;
  text-decoration: none;
}

.dashboard-footer #main-footer a:hover {
  text-decoration: underline;
}

/* Dark mode footer */
body.theme-dark .dashboard-footer {
  background: #020617;
  border-top-color: #111827;
}

body.theme-dark .dashboard-footer #main-footer {
  color: #9ca3af;
}

body.theme-dark .dashboard-footer #main-footer a {
  color: #c4b5fd;
}

/* Base app header styling on light background */
.app-nav {
  background: #ffffff;
  box-shadow: 0 6px 24px rgba(0,0,0,0.06);
}
.app-nav #nav-links {
  background-color: #ffffff;
}
@media (max-width: 767px){
  #nav-backdrop:not(.hidden){ display:block; }
}

/* Dark-mode header standalone (outside dashboard-shell too) */
body.theme-dark .app-nav {
  background: rgba(15, 23, 42, 0.85);
  border-bottom-color: rgba(15, 23, 42, 0.9);
  box-shadow: 0 10px 32px rgba(0,0,0,0.55);
}
body.theme-dark .app-nav .text-slate-900,
body.theme-dark .app-nav .text-gray-700,
body.theme-dark .app-nav a,
body.theme-dark .app-nav span,
body.theme-dark .app-nav button{
  color: #e5e7eb !important;
}
body.theme-dark .app-nav #nav-links{
  background: rgba(15,23,42,0.9) !important;
  border-color: rgba(17,24,39,0.8) !important;
}
.nav-link{
  font-size: 0.95rem;
  font-weight: 600;
  color:#0f172a;
  padding: 6px 0;
}
.nav-link:hover{ color:#7c3aed; }
body.theme-dark .nav-link{ color:#e5e7eb; }
body.theme-dark .nav-link:hover{ color:#c4b5fd; }

.nav-theme-toggle{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(124,58,237,.25);
  background: rgba(124,58,237,.08);
  color:#5b21b6;
  font-size:12px;
  font-weight:600;
}
.nav-theme-toggle:hover{
  background: rgba(124,58,237,.14);
}
body.theme-dark .nav-theme-toggle{
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.18);
  color: #e5e7eb;
}
body.theme-dark .nav-theme-toggle:hover{
  background: rgba(255,255,255,.14);
}

#enablePushBtn,
#pwaInstallBtn,
#loginBtn,
#logoutBtn{
  color: #ffffff;
}
body:not(.theme-dark) #enablePushBtn,
body:not(.theme-dark) #pwaInstallBtn{
  background: #0f172a;
  color: #ffffff;
}
body:not(.theme-dark) #enablePushBtn:hover,
body:not(.theme-dark) #pwaInstallBtn:hover{
  background: #111827;
}
body:not(.theme-dark) #logoutBtn{
  background: #111827;
  color: #ffffff;
}
body:not(.theme-dark) #logoutBtn:hover{
  background: #0f172a;
}
#enablePushBtn{
  margin-right: 8px;
}

.brand-lockup .brand-logo{
  height: 44px;
  max-height: 44px;
  width: auto;
}
@media (max-width: 640px){
  .brand-lockup .brand-logo{
    height: 38px;
    max-height: 38px;
  }
}

.echokey-chip-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.echokey-chip-row .status-pill{
  margin-left:auto;
}
.manage-key-row{
  display:flex;
  align-items:center;
  gap:10px;
}
.manage-key-cta{
  padding:10px 16px;
  border-radius:999px;
  min-width: 140px;
  justify-content:center;
}

.trigger-safetap-button{
  background: linear-gradient(135deg,#ef4444,#dc2626) !important;
  color:#fff !important;
  border: none !important;
}

.card-header,
.owner-card-summary,
.section-box,
.owner-card-panel,
.section-title,
.summary-title,
.summary-text{
  color: var(--ink);
}
body.theme-dark .card-header,
body.theme-dark .owner-card-summary,
body.theme-dark .section-box,
body.theme-dark .owner-card-panel,
body.theme-dark .section-title,
body.theme-dark .summary-title,
body.theme-dark .summary-text{
  color:#e5e7eb;
}
body.theme-dark .app-nav #nav-links {
  background-color: transparent;
}
body.theme-dark .app-nav #nav-links a[data-nav-link] {
  color: #e5e7eb;
}
body.theme-dark .app-nav #nav-links a[data-nav-link]:hover {
  color: #c4b5fd;
}

/* Mobile: keep overlay look */
.app-nav #nav-links {
  background-color: #ffffff;
}

/* Desktop: make nav-links sit flat in the bar, no white box */
@media (min-width: 768px) {
  .dashboard-shell .app-nav #nav-links {
    position: static;
    left: auto;
    right: auto;
    top: auto;
    background-color: transparent;
    border-top: 0;
    box-shadow: none;
    padding: 0;
  }
}

/* Link styling: darker, more space, slightly bolder */
.app-nav #nav-links a[data-nav-link] {
  font-size: 0.875rem;           /* text-sm */
  font-weight: 500;
  color: #111827;                /* much darker on white */
  padding: 6px 10px;
  margin-right: 1.25rem;         /* space between links */
  letter-spacing: 0.01em;
  transition: color 0.15s ease;
}

.app-nav #nav-links a[data-nav-link]:last-of-type {
  margin-right: 0;
}

.app-nav #nav-links a[data-nav-link]:hover {
  color: #7c3aed;                /* brand purple */
}

/* Dark-mode header integration */
body.theme-dark .dashboard-shell .app-nav {
  background: rgba(15, 23, 42, 0.85);
  border-bottom-color: rgba(15, 23, 42, 0.9);
  box-shadow: 0 10px 32px rgba(0,0,0,0.55);
}

body.theme-dark .dashboard-shell .app-nav #nav-links {
  background-color: transparent;
}

body.theme-dark .dashboard-shell .app-nav #nav-links a[data-nav-link] {
  color: #e5e7eb;
}

body.theme-dark .dashboard-shell .app-nav #nav-links a[data-nav-link]:hover {
  color: #c4b5fd;
}
/* ------------ Marketing page shell ------------ */

.page-shell {
  background: var(--page-bg, #0b1020);
  color: var(--ink, #020617);
}

/* Elevated inner panel used for hero images */
.surface-elevated {
  background-color: var(--surface-alt, var(--surface, #020617));
}

/* Small info cards on marketing pages */
.info-grid-card {
  background-color: var(--surface, #0b1020);
  border-radius: 1rem;
  border: 1px solid var(--border-subtle, rgba(148, 163, 184, 0.35));
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.35);
}

/* Marketing page shell – reuses dashboard vars */
.page-shell {
  background: radial-gradient(circle at top, #1e293b 0, #020617 55%);
  color: #e5e7eb;

  padding-top: calc(64px + env(safe-area-inset-top));
}

/* ---------- HERO BAND ---------- */

.marketing-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 2.5rem;
  padding: 2.5rem 2rem;
  border-radius: 1.75rem;
  background:
    radial-gradient(circle at top left, rgba(129, 140, 248, 0.35), transparent 60%),
    radial-gradient(circle at bottom right, rgba(236, 72, 153, 0.25), transparent 60%),
    #020617;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.75);
  border: 1px solid rgba(148, 163, 184, 0.5);
}

@media (max-width: 1023px) {
  .marketing-hero {
    grid-template-columns: minmax(0, 1fr);
    text-align: left;
  }
}

.marketing-hero-text {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.marketing-kicker {
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #a5b4fc;
  font-weight: 600;
}

.marketing-title {
  font-size: clamp(1.75rem, 2.4vw, 2.4rem);
  font-weight: 700;
  color: #f9fafb;
}

.marketing-lede {
  font-size: 0.95rem;
  line-height: 1.6;
  color: #cbd5f5;
  max-width: 34rem;
}

.marketing-bullets {
  margin-top: 0.25rem;
  margin-bottom: 0.75rem;
  padding-left: 1.1rem;
  font-size: 0.9rem;
  color: #e5e7eb;
}

.marketing-bullets li {
  list-style: disc;
}

/* CTA row */
.marketing-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  margin-top: 0.5rem;
}

.marketing-cta-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.6rem 1.6rem;
  border-radius: 999px;
  font-size: 0.87rem;
  font-weight: 600;
  background: linear-gradient(135deg, #8b5cf6, #ec4899);
  color: #f9fafb;
  box-shadow: 0 14px 35px rgba(168, 85, 247, 0.55);
  transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.12s ease;
}

.marketing-cta-primary:hover {
  transform: translateY(-1px);
  filter: brightness(1.05);
  box-shadow: 0 18px 45px rgba(168, 85, 247, 0.7);
}

.marketing-cta-secondary {
  font-size: 0.85rem;
  font-weight: 500;
  color: #c4b5fd;
}

.marketing-cta-secondary:hover {
  text-decoration: underline;
}

/* Hero art */
.marketing-hero-art {
  display: flex;
  justify-content: center;
  align-items: center;
}

.hero-art-frame {
  width: 100%;
  max-width: 320px;
  padding: 2px;
  border-radius: 1.75rem;
  background: linear-gradient(135deg, #8b5cf6, #f97316, #ec4899);
  box-shadow: 0 20px 40px rgba(15, 23, 42, 0.9);
}

.hero-art-inner {
  border-radius: inherit;
  background: radial-gradient(circle at top, #111827, #020617);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.75rem;
}

.hero-art-image {
  width: 100%;
  height: auto;
  max-width: 230px;
}

/* ---------- STEPS SECTION ---------- */

.marketing-section {
  background: rgba(15, 23, 42, 0.98);
}

.marketing-body {
  font-size: 0.9rem;
  color: #cbd5f5;
  max-width: 36rem;
}

.marketing-steps-grid {
  display: grid;
  gap: 1.25rem;
}

@media (min-width: 768px) {
  .marketing-steps-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.info-grid-card {
  border-radius: 1.25rem;
  padding: 1rem;
  background: radial-gradient(circle at top, rgba(148, 163, 184, 0.25), transparent 55%),
              #020617;
  border: 1px solid rgba(148, 163, 184, 0.45);
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.7);
}

.info-grid-card h3 {
  font-size: 0.9rem;
  font-weight: 600;
  color: #e5e7eb;
  margin-bottom: 0.35rem;
}

.info-grid-card p {
  font-size: 0.85rem;
  color: #cbd5f5;
}

.marketing-cta-text {
  font-size: 0.83rem;
  font-weight: 500;
  color: #c4b5fd;
}

.marketing-cta-text:hover {
  text-decoration: underline;
}


/* =========================================================
   Dark mode: trusted cards readable & consistent
   ========================================================= */

body.theme-dark .echokey-card--trusted {
  background: var(--card-bg) !important;      /* dark card surface */
  border-color: var(--card-line) !important;
  box-shadow: var(--shadow) !important;
  color: var(--ink) !important;
}

/* Inner sections inside the trusted card */
body.theme-dark .echokey-card--trusted .section-box {
  background: var(--card-bg) !important;
  border-color: var(--card-line) !important;
}

/* All text inside trusted card → light, readable */
body.theme-dark .echokey-card--trusted,
body.theme-dark .echokey-card--trusted p,
body.theme-dark .echokey-card--trusted span,
body.theme-dark .echokey-card--trusted li,
body.theme-dark .echokey-card--trusted .empty-text {
  color: var(--ink) !important;
}

/* Section titles in trusted card */
body.theme-dark .echokey-card--trusted .section-title {
  color: #c4b5fd !important;  /* soft lavender */
}

/* Header chip in trusted card */
body.theme-dark .echokey-card--trusted .echokey-chip {
  background: linear-gradient(90deg, #a855f7, #6366f1) !important;
  color: #f9fafb !important;
}

/* Tiny helper lines (like "In class now…") */
body.theme-dark .echokey-card--trusted .text-xs {
  color: #e5e7eb !important;
}

/* ===== SafeTap alert modal panel ===== */

.safetap-modal-content {
  background: #ffffff;
  color: #111827;
  border-radius: 1rem;
  padding: 1rem 1.25rem;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.55);
}

/* Dark mode: make background dark and text bright */
body.theme-dark .safetap-modal-content {
  background: #020617;               /* slate-950-ish */
  color: #e5e7eb;
}

body.theme-dark .safetap-modal-content p,
body.theme-dark .safetap-modal-content span,
body.theme-dark .safetap-modal-content div,
body.theme-dark .safetap-modal-content .text-sm,
body.theme-dark .safetap-modal-content .font-medium,
body.theme-dark .safetap-modal-content h3 {
  color: #e5e7eb !important;
}

/* Keep the “×” close button visible in dark mode */
body.theme-dark .safetap-modal-content [data-close] {
  color: #e5e7eb;
}
.ew-muted{
  color: #475569;
}
body.theme-dark .ew-muted{
  color: #cbd5e1;
}
/* Admin nav link badge */
.nav-link-admin {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.admin-badge {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 2px 6px;
  border-radius: 999px;
  background: #ede9fe;          /* soft lavender */
  color: #5b21b6;               /* brand purple */
  border: 1px solid #ddd6fe;
  line-height: 1;
}

/* Dark mode support */
.theme-dark .admin-badge {
  background: rgba(109,40,217,.15);
  color: #c4b5fd;
  border-color: rgba(109,40,217,.35);
}
@import url('/assets/css/fonts.css');