/* ══════════════════════════════════════════════════════════════
   dashboard-modern.css — Overview page upgrade
   ALL rules scoped to .dashboard-modern (prompt requirement).
   References existing :root tokens — never overrides them.
   Masri.Cloud Dashboard v2 Modern
══════════════════════════════════════════════════════════════ */

/* ── Local tokens (extension only, never override :root) ─────── */
.dashboard-modern {
  --dm-green:       #22c55e;
  --dm-green-dim:   rgba(34,197,94,0.10);
  --dm-amber:       #F0A500;
  --dm-amber-dim:   rgba(240,165,0,0.10);
  --dm-red:         #ff5555;
  --dm-red-dim:     rgba(255,85,85,0.10);
  --dm-radius:      12px;
  --dm-radius-lg:   18px;
  --dm-t:           all 0.22s cubic-bezier(0.4,0,0.2,1);
}

/* ── Keyframes (must live at top level) ──────────────────────── */
@keyframes dmFloat {
  0%, 100% { transform: translate(0, 0)      scale(1);    }
  33%       { transform: translate(12px,-18px) scale(1.04); }
  66%       { transform: translate(-8px, 10px) scale(0.97); }
}
@keyframes dmPulse {
  0%, 100% { opacity:1;   transform:scale(1);   }
  50%       { opacity:0.4; transform:scale(0.8); }
}
@keyframes dmFadeUp {
  from { opacity:0; transform:translateY(16px); }
  to   { opacity:1; transform:translateY(0);    }
}
@keyframes mitraGlow {
  0%, 100% { opacity: .45; transform: translate3d(0,0,0) scale(1); }
  50%      { opacity: .78; transform: translate3d(0,-6px,0) scale(1.04); }
}
@keyframes mitraShine {
  0%   { transform: translateX(-140%) skewX(-18deg); opacity: 0; }
  20%  { opacity: .85; }
  55%  { opacity: .60; }
  100% { transform: translateX(160%) skewX(-18deg); opacity: 0; }
}
@keyframes mitraFloat {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-5px); }
}

/* ── Hero ────────────────────────────────────────────────────── */
.dashboard-modern .dm-hero {
  position: relative;
  border-radius: var(--dm-radius-lg);
  padding: 44px 40px 42px;
  margin-bottom: 20px;
  overflow: hidden;
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(0,240,200,0.10);
  animation: dmFadeUp 0.45s ease both;
}

/* Grid-texture overlay */
.dashboard-modern .dm-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(0,240,200,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,240,200,0.025) 1px, transparent 1px);
  background-size: 32px 32px;
  pointer-events: none;
}

.dashboard-modern .dm-hero-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  border-radius: inherit;
}

.dashboard-modern .dm-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.55;
  animation: dmFloat 9s ease-in-out infinite;
}
.dashboard-modern .dm-orb-1 {
  width: 320px; height: 320px;
  top: -80px; left: -60px;
  background: radial-gradient(circle, rgba(0,240,200,0.22), transparent 68%);
  animation-duration: 9s;
}
.dashboard-modern .dm-orb-2 {
  width: 260px; height: 260px;
  top: -40px; right: 10%;
  background: radial-gradient(circle, rgba(0,128,255,0.20), transparent 68%);
  animation-duration: 11s;
  animation-delay: -3s;
}
.dashboard-modern .dm-orb-3 {
  width: 200px; height: 200px;
  bottom: -60px; right: 25%;
  background: radial-gradient(circle, rgba(0,240,200,0.14), transparent 68%);
  animation-duration: 13s;
  animation-delay: -6s;
}

.dashboard-modern .dm-hero-content {
  position: relative;
  z-index: 1;
}

.dashboard-modern .dm-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 12px;
  background: rgba(0,240,200,0.08);
  border: 1px solid rgba(0,240,200,0.18);
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 18px;
}
.dashboard-modern .dm-eyebrow-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  animation: dmPulse 2s infinite;
}

.dashboard-modern .dm-hero-title {
  font-size: clamp(1.55rem, 3vw, 2.1rem);
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.5px;
  line-height: 1.15;
  margin-bottom: 8px;
}

.dashboard-modern .dm-hero-sub {
  font-size: 14px;
  color: var(--text-2);
  margin-bottom: 28px;
  line-height: 1.5;
}

.dashboard-modern .dm-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* ── Buttons ─────────────────────────────────────────────────── */
.dashboard-modern .dm-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 18px;
  border-radius: 9px;
  font-family: 'Outfit', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  outline: none;
  transition: var(--dm-t);
  white-space: nowrap;
  text-decoration: none;
}
.dashboard-modern .dm-btn-icon { width:15px; height:15px; flex-shrink:0; }

.dashboard-modern .dm-btn-primary {
  background: var(--grad-accent);
  color: #041012;
  box-shadow: 0 0 20px rgba(0,240,200,0.28);
}
.dashboard-modern .dm-btn-primary:hover {
  filter: brightness(1.10);
  transform: translateY(-1px);
  box-shadow: 0 0 32px rgba(0,240,200,0.42);
}

.dashboard-modern .dm-btn-ghost {
  background: rgba(255,255,255,0.05);
  color: var(--text-2);
  border: 1px solid var(--border);
}
.dashboard-modern .dm-btn-ghost:hover {
  background: rgba(255,255,255,0.09);
  color: var(--text);
  border-color: rgba(0,240,200,0.25);
}

/* ── Stat cards ──────────────────────────────────────────────── */
.dashboard-modern .dm-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 20px;
  animation: dmFadeUp 0.45s 0.08s ease both;
}

.dashboard-modern .dm-stat-card {
  position: relative;
  background: rgba(255,255,255,0.035);
  border: 1px solid var(--border);
  border-radius: var(--dm-radius);
  padding: 18px 18px 16px;
  transition: var(--dm-t);
  overflow: hidden;
  cursor: default;
}
.dashboard-modern .dm-stat-card:hover {
  border-color: rgba(0,240,200,0.22);
  background: rgba(255,255,255,0.055);
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.4);
}
.dashboard-modern .dm-stat-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: var(--grad-accent);
  opacity: 0;
  transition: var(--dm-t);
}
.dashboard-modern .dm-stat-card:hover::before { opacity: 1; }

.dashboard-modern .dm-stat-icon-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.dashboard-modern .dm-stat-icon {
  width: 36px; height: 36px;
  border-radius: 9px;
  background: rgba(0,240,200,0.08);
  border: 1px solid rgba(0,240,200,0.14);
  display: flex;
  align-items: center;
  justify-content: center;
}
.dashboard-modern .dm-stat-icon svg { width:17px; height:17px; color:var(--accent); }

.dashboard-modern .dm-stat-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 20px;
  background: rgba(0,240,200,0.10);
  color: var(--accent);
  border: 1px solid rgba(0,240,200,0.18);
  letter-spacing: 0.4px;
  text-transform: uppercase;
}
.dashboard-modern .dm-stat-badge.pro {
  background: rgba(240,165,0,0.12);
  color: var(--gold);
  border-color: rgba(240,165,0,0.25);
}

.dashboard-modern .dm-stat-val {
  font-size: 28px;
  font-weight: 800;
  color: var(--text);
  font-family: 'DM Mono', monospace;
  line-height: 1;
  margin-bottom: 4px;
  letter-spacing: -1px;
}
.dashboard-modern .dm-stat-label {
  font-size: 12px;
  color: var(--text-2);
  font-weight: 500;
}

.dashboard-modern .dm-usage-wrap { margin-top: 10px; }
.dashboard-modern .dm-usage-bar {
  height: 4px;
  background: rgba(255,255,255,0.07);
  border-radius: 2px;
  overflow: hidden;
  margin-top: 6px;
}
.dashboard-modern .dm-usage-fill {
  height: 100%;
  background: var(--grad-accent);
  border-radius: 2px;
  transition: width 1s cubic-bezier(0.4,0,0.2,1);
}
.dashboard-modern .dm-usage-fill.warn   { background: var(--grad-gold); }
.dashboard-modern .dm-usage-fill.danger { background: var(--grad-danger); }

/* Dashed link card */
.dashboard-modern .dm-stat-link {
  cursor: pointer;
  border-style: dashed;
  border-color: rgba(255,255,255,0.08);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 8px;
}
.dashboard-modern .dm-stat-link:hover {
  border-color: rgba(0,240,200,0.30);
  border-style: solid;
}
.dashboard-modern .dm-stat-link-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-2);
  transition: var(--dm-t);
}
.dashboard-modern .dm-stat-link:hover .dm-stat-link-label { color: var(--accent); }
.dashboard-modern .dm-stat-link-arrow {
  font-size: 20px;
  color: var(--text-3);
  transition: var(--dm-t);
}
.dashboard-modern .dm-stat-link:hover .dm-stat-link-arrow {
  color: var(--accent);
  transform: translateX(3px);
}

/* ── Section ─────────────────────────────────────────────────── */
.dashboard-modern .dm-section {
  margin-bottom: 20px;
  animation: dmFadeUp 0.45s 0.14s ease both;
}
.dashboard-modern .dm-section-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 14px;
}
.dashboard-modern .dm-section-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.2px;
}
.dashboard-modern .dm-section-sub {
  font-size: 12px;
  color: var(--text-3);
}

/* ── Tool cards ──────────────────────────────────────────────── */
.dashboard-modern .dm-tools-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.dashboard-modern .dm-tool-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  border-radius: var(--dm-radius);
  padding: 20px 18px;
  cursor: pointer;
  transition: var(--dm-t);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}
.dashboard-modern .dm-tool-card:hover {
  border-color: rgba(0,240,200,0.25);
  background: rgba(0,240,200,0.04);
  transform: translateY(-3px);
  box-shadow: 0 12px 36px rgba(0,0,0,0.45), 0 0 0 1px rgba(0,240,200,0.08);
}
.dashboard-modern .dm-tool-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at 50% 0%, rgba(0,240,200,0.07), transparent 60%);
  opacity: 0;
  transition: var(--dm-t);
  pointer-events: none;
}
.dashboard-modern .dm-tool-card:hover::after { opacity: 1; }

.dashboard-modern .dm-tool-emoji {
  font-size: 26px;
  margin-bottom: 12px;
  line-height: 1;
}
.dashboard-modern .dm-tool-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 4px;
  letter-spacing: -0.2px;
}
.dashboard-modern .dm-tool-desc {
  font-size: 12px;
  color: var(--text-2);
  line-height: 1.5;
  flex: 1;
  margin-bottom: 14px;
}
.dashboard-modern .dm-tool-launch {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 600;
  color: var(--accent);
  letter-spacing: 0.3px;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(4px);
  transition: var(--dm-t);
}
.dashboard-modern .dm-tool-card:hover .dm-tool-launch {
  opacity: 1;
  transform: translateY(0);
}
.dashboard-modern .dm-tool-launch svg { width:12px; height:12px; }

/* ── Bottom grid ─────────────────────────────────────────────── */
.dashboard-modern .dm-bottom-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  animation: dmFadeUp 0.45s 0.20s ease both;
}

/* ── Status card ─────────────────────────────────────────────── */
.dashboard-modern .dm-status-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  border-radius: var(--dm-radius);
  padding: 20px;
}
.dashboard-modern .dm-status-list {
  display: flex;
  flex-direction: column;
}
.dashboard-modern .dm-status-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.dashboard-modern .dm-status-item:last-child { border-bottom: none; padding-bottom: 0; }
.dashboard-modern .dm-status-item:first-child { padding-top: 0; }

.dashboard-modern .dm-status-left {
  display: flex;
  align-items: center;
  gap: 10px;
}
.dashboard-modern .dm-status-icon {
  width: 30px; height: 30px;
  border-radius: 8px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
}
.dashboard-modern .dm-status-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
}
.dashboard-modern .dm-status-detail {
  font-size: 11px;
  color: var(--text-3);
  margin-top: 1px;
}

.dashboard-modern .dm-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2px;
}
.dashboard-modern .dm-status-dot-sm {
  width: 5px; height: 5px;
  border-radius: 50%;
}
.dashboard-modern .dm-status-pill.online {
  background: rgba(34,197,94,0.10);
  color: var(--dm-green);
  border: 1px solid rgba(34,197,94,0.20);
}
.dashboard-modern .dm-status-pill.online .dm-status-dot-sm {
  background: var(--dm-green);
  animation: dmPulse 2s infinite;
}
.dashboard-modern .dm-status-pill.warn {
  background: var(--dm-amber-dim);
  color: var(--dm-amber);
  border: 1px solid rgba(240,165,0,0.20);
}
.dashboard-modern .dm-status-pill.warn .dm-status-dot-sm { background: var(--dm-amber); }
.dashboard-modern .dm-status-pill.offline {
  background: var(--dm-red-dim);
  color: var(--dm-red);
  border: 1px solid rgba(255,85,85,0.20);
}
.dashboard-modern .dm-status-pill.offline .dm-status-dot-sm { background: var(--dm-red); }

/* ── Shortcuts card ──────────────────────────────────────────── */
.dashboard-modern .dm-shortcuts-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  border-radius: var(--dm-radius);
  padding: 20px;
}
.dashboard-modern .dm-shortcut-list {
  display: flex;
  flex-direction: column;
}
.dashboard-modern .dm-shortcut-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 8px;
  border-radius: 9px;
  cursor: pointer;
  transition: var(--dm-t);
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.dashboard-modern .dm-shortcut-item:last-child { border-bottom: none; }
.dashboard-modern .dm-shortcut-item:hover {
  background: rgba(0,240,200,0.05);
}
.dashboard-modern .dm-shortcut-icon {
  width: 32px; height: 32px;
  border-radius: 8px;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  flex-shrink: 0;
  transition: var(--dm-t);
}
.dashboard-modern .dm-shortcut-item:hover .dm-shortcut-icon {
  background: rgba(0,240,200,0.08);
  border-color: rgba(0,240,200,0.20);
}
.dashboard-modern .dm-shortcut-body { flex: 1; min-width: 0; }
.dashboard-modern .dm-shortcut-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.2;
}
.dashboard-modern .dm-shortcut-meta {
  font-size: 11px;
  color: var(--text-3);
  margin-top: 1px;
}
.dashboard-modern .dm-shortcut-arrow {
  color: var(--text-3);
  transition: var(--dm-t);
  flex-shrink: 0;
}
.dashboard-modern .dm-shortcut-arrow svg { width:14px; height:14px; display:block; }
.dashboard-modern .dm-shortcut-item:hover .dm-shortcut-arrow {
  color: var(--accent);
  transform: translateX(2px);
}

/* ── MitraCloud promo card ─────────────────────────────────── */
.dashboard-modern .mitra-promo-card {
  position: relative;
  overflow: hidden;
  box-shadow: 0 20px 45px rgba(0,0,0,.22);
  animation: dmFadeUp 0.45s ease both, mitraFloat 5.5s ease-in-out infinite;
  transform-origin: center;
}

.dashboard-modern .mitra-promo-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 18% 18%, rgba(251,191,36,.18), transparent 26%),
    radial-gradient(circle at 82% 20%, rgba(34,197,94,.10), transparent 24%),
    radial-gradient(circle at 50% 100%, rgba(56,189,248,.10), transparent 26%);
  pointer-events: none;
  animation: mitraGlow 7s ease-in-out infinite;
}

.dashboard-modern .mitra-promo-card::after {
  content: '';
  position: absolute;
  top: -20%;
  left: -30%;
  width: 45%;
  height: 140%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
  pointer-events: none;
  animation: mitraShine 8.5s ease-in-out infinite;
}

.dashboard-modern .mitra-promo-card > div {
  position: relative;
  z-index: 1;
}

.dashboard-modern .mitra-promo-card .mitra-promo-cta {
  box-shadow: 0 8px 20px rgba(251,191,36,.18);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
  animation: mitraFloat 4.8s ease-in-out infinite;
}

.dashboard-modern .mitra-promo-card .mitra-promo-cta:hover {
  transform: translateY(-1px) scale(1.02);
  box-shadow: 0 12px 26px rgba(251,191,36,.28);
  filter: brightness(1.03);
}

.dashboard-modern .mitra-promo-card .mitra-promo-secondary {
  transition: transform .18s ease, border-color .18s ease, color .18s ease, background .18s ease;
}

.dashboard-modern .mitra-promo-card .mitra-promo-secondary:hover {
  transform: translateY(-1px);
  border-color: rgba(251,191,36,.75);
  color: #fff2bf;
}

.dashboard-modern .mitra-promo-card .mitra-promo-cta:focus-visible,
.dashboard-modern .mitra-promo-card .mitra-promo-secondary:focus-visible {
  outline: 2px solid rgba(251,191,36,.55);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .dashboard-modern .mitra-promo-card,
  .dashboard-modern .mitra-promo-card::before,
  .dashboard-modern .mitra-promo-card::after,
  .dashboard-modern .mitra-promo-card .mitra-promo-cta {
    animation: none !important;
  }
  .idle-riddle-card.riddle-flash-good,
  .idle-riddle-card.riddle-flash-bad {
    animation: none !important;
  }
}

@media (max-width: 860px) {
  .dashboard-modern .mitra-promo-card > div {
    grid-template-columns: 1fr !important;
  }
}

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .dashboard-modern .dm-tools-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 860px) {
  .dashboard-modern .dm-stats {
    grid-template-columns: repeat(2, 1fr);
  }
  .dashboard-modern .dm-bottom-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 600px) {
  .dashboard-modern .dm-hero {
    padding: 28px 20px;
  }
  .dashboard-modern .dm-hero-title { font-size: 1.4rem; }
  .dashboard-modern .dm-tools-grid {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .dashboard-modern .dm-stats {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .dashboard-modern .dm-hero-actions { gap: 8px; }
  .dashboard-modern .dm-btn { padding: 8px 14px; font-size: 12px; }
}
@media (max-width: 380px) {
  .dashboard-modern .dm-tools-grid { grid-template-columns: 1fr; }
  .dashboard-modern .dm-stats      { grid-template-columns: 1fr 1fr; }
}

/* ── Dashboard Tour ───────────────────────────────────────── */
.dash-tour {
  position: fixed;
  inset: 0;
  z-index: 1200;
  pointer-events: none;
  overflow: hidden;
}
.dash-tour.open { pointer-events: auto; }
.dash-tour-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(3, 7, 18, .72);
  opacity: 0;
  transition: opacity .18s ease;
}
.dash-tour.open .dash-tour-backdrop { opacity: 1; }
.dash-tour-spotlight {
  position: absolute;
  border-radius: 18px;
  box-shadow:
    0 0 0 2px rgba(251,191,36,.95),
    0 0 0 9999px rgba(3,7,18,.60),
    0 18px 50px rgba(0,0,0,.35);
  opacity: 0;
  transition: all .25s ease;
  pointer-events: none;
}
.dash-tour.open .dash-tour-spotlight { opacity: 1; }
.dash-tour-card {
  position: absolute;
  width: min(360px, calc(100vw - 32px));
  max-height: min(78vh, calc(100vh - 32px));
  background: linear-gradient(180deg, rgba(17, 23, 58, .98), rgba(11, 15, 40, .98));
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 18px;
  padding: 18px;
  color: #e5e7eb;
  box-shadow: 0 18px 60px rgba(0,0,0,.45);
  opacity: 0;
  transform: translateY(8px);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.22) transparent;
  transition: opacity .18s ease, transform .18s ease, left .25s ease, top .25s ease;
}
.dash-tour.open .dash-tour-card { opacity: 1; transform: translateY(0); }
.dash-tour-card::-webkit-scrollbar { width: 3px; }
.dash-tour-card::-webkit-scrollbar-thumb { background: rgba(255,255,255,.22); border-radius: 999px; }
.dash-tour-kicker {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(251,191,36,.12);
  border: 1px solid rgba(251,191,36,.22);
  color: #fcd34d;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .35px;
  text-transform: uppercase;
}
.dash-tour-title {
  margin: 10px 0 8px;
  font-size: 18px;
  line-height: 1.25;
  color: #fff;
}
.dash-tour-head {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  justify-content: space-between;
}
.dash-tour-mascot {
  width: 72px;
  height: 72px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  object-fit: cover;
  flex-shrink: 0;
  box-shadow: 0 10px 24px rgba(0,0,0,.18);
}
.dash-tour-desc {
  margin: 0;
  color: #cbd5e1;
  font-size: 13px;
  line-height: 1.55;
}
.dash-tour-meta {
  margin-top: 12px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.dash-tour-pill {
  padding: 5px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  font-size: 11px;
  color: #cbd5e1;
}
.dash-tour-actions {
  display: flex;
  gap: 10px;
  margin-top: 16px;
  justify-content: flex-end;
}
.dash-tour-btn {
  border: none;
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.dash-tour-btn-primary {
  background: #fbbf24;
  color: #0b0f28;
}
.dash-tour-btn-ghost {
  background: transparent;
  color: #cbd5e1;
  border: 1px solid rgba(255,255,255,.10);
}

@media (max-width: 700px) {
  .dash-tour {
    padding: 16px;
  }
  .dash-tour-card {
    position: fixed;
    left: 16px !important;
    right: 16px !important;
    top: auto !important;
    bottom: 16px !important;
    width: auto;
    max-height: 62vh;
    border-radius: 16px;
    padding: 16px;
  }
  .dash-tour-head {
    align-items: flex-start;
  }
  .dash-tour-mascot {
    width: 58px;
    height: 58px;
    border-radius: 14px;
  }
  .dash-tour-title {
    font-size: 16px;
  }
  .dash-tour-desc {
    font-size: 12px;
  }
  .dash-tour-actions {
    margin-top: 14px;
  }
}

.mascot-bubble {
  position: fixed;
  right: 18px;
  bottom: 84px;
  z-index: 1100;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px 8px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(180deg, rgba(17,23,58,.94), rgba(11,15,40,.94));
  color: #e5e7eb;
  box-shadow: 0 14px 34px rgba(0,0,0,.30);
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}
.mascot-toggle {
  position: fixed;
  right: 18px;
  bottom: 34px;
  z-index: 1101;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(180deg, rgba(17,23,58,.94), rgba(11,15,40,.94));
  color: #e5e7eb;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .2px;
  box-shadow: 0 14px 34px rgba(0,0,0,.30);
  cursor: pointer;
}
.mascot-toggle:hover {
  transform: translateY(-1px);
}
.mascot-bubble-actions {
  display: none;
  align-items: center;
  gap: 6px;
}
.mascot-bubble:hover .mascot-bubble-actions,
.mascot-bubble:focus-within .mascot-bubble-actions {
  display: inline-flex;
}
.mascot-bubble-action {
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.08);
  color: #e5e7eb;
  border-radius: 999px;
  padding: 5px 9px;
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
  line-height: 1;
}
.mascot-bubble-action:hover {
  background: rgba(255,255,255,.14);
}
.mascot-bubble-action-close {
  background: rgba(239,68,68,.14);
  border-color: rgba(239,68,68,.24);
}
.mascot-bubble-action-hide {
  background: rgba(59,130,246,.14);
  border-color: rgba(59,130,246,.24);
}
.mascot-bubble-note {
  position: absolute;
  right: 68px;
  bottom: 50%;
  transform: translateY(50%);
  min-width: 220px;
  max-width: min(340px, calc(100vw - 100px));
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(11,15,40,.98);
  border: 1px solid rgba(251,191,36,.18);
  color: #e5e7eb;
  font-size: 12px;
  line-height: 1.45;
  box-shadow: 0 14px 32px rgba(0,0,0,.28);
  pointer-events: none;
  animation: dmFadeUp .22s ease both;
}
.mascot-bubble-note strong {
  color: #fff;
}
.mascot-bubble-note::after {
  content: '';
  position: absolute;
  right: -7px;
  top: 50%;
  transform: translateY(-50%);
  border-left: 7px solid rgba(11,15,40,.98);
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
}
.mascot-bubble-note-open {
  min-width: 260px;
  max-width: min(360px, calc(100vw - 100px));
}
.mascot-bubble::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(251,191,36,.20), rgba(255,255,255,0));
  opacity: 0;
  transition: opacity .18s ease;
  pointer-events: none;
}
.mascot-bubble:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 40px rgba(0,0,0,.34);
}
.mascot-bubble:hover::before {
  opacity: 1;
}
.mascot-bubble.hidden-while-tour {
  opacity: 0;
  pointer-events: none;
}
.mascot-bubble[data-page="overview"] .mascot-bubble-text,
.mascot-bubble[data-page="store"] .mascot-bubble-text,
.mascot-bubble[data-page="creator"] .mascot-bubble-text {
  color: #f8fafc;
}
.mascot-bubble[data-page="ai"] .mascot-bubble-img,
.mascot-bubble[data-page="mentor"] .mascot-bubble-img,
.mascot-bubble[data-page="billing"] .mascot-bubble-img {
  border-color: rgba(56,189,248,.28);
}
.mascot-bubble-img {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  border: 1px solid rgba(251,191,36,.28);
  background: rgba(255,255,255,.04);
}
.mascot-bubble-text {
  font-size: 12px;
  font-weight: 700;
  color: #f8fafc;
}

/* ── Idle Riddle ─────────────────────────────────────────── */
.idle-riddle {
  position: fixed;
  inset: 0;
  z-index: 1250;
  pointer-events: none;
}
.idle-riddle.open { pointer-events: auto; }
.idle-riddle-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(3,7,18,.74);
  opacity: 0;
  transition: opacity .18s ease;
}
.idle-riddle.open .idle-riddle-backdrop { opacity: 1; }
.idle-riddle-card {
  position: absolute;
  width: min(420px, calc(100vw - 28px));
  max-height: min(78vh, 640px);
  background: linear-gradient(180deg, rgba(17,23,58,.98), rgba(11,15,40,.98));
  border: 1px solid rgba(251,191,36,.16);
  border-radius: 20px;
  padding: 18px;
  color: #e5e7eb;
  box-shadow: 0 24px 70px rgba(0,0,0,.48);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .18s ease, transform .18s ease, left .22s ease, top .22s ease;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.idle-riddle.open .idle-riddle-card { opacity: 1; transform: translateY(0); }
.idle-riddle-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.idle-riddle-kicker {
  display: inline-flex;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(34,197,94,.10);
  border: 1px solid rgba(34,197,94,.20);
  color: #86efac;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .35px;
}
.idle-riddle-title {
  margin: 8px 0 0;
  font-size: 18px;
  color: #fff;
}
.idle-riddle-close {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  color: #cbd5e1;
  cursor: pointer;
}
.idle-riddle-question {
  margin: 12px 0 14px;
  color: #cbd5e1;
  font-size: 13px;
  line-height: 1.55;
  overflow-wrap: anywhere;
}
.idle-riddle-score {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 12px;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(59,130,246,.10);
  border: 1px solid rgba(96,165,250,.22);
  color: #bfdbfe;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .15px;
}
.idle-riddle-options {
  display: grid;
  gap: 10px;
}
.idle-riddle-option {
  width: 100%;
  text-align: left;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  color: #e5e7eb;
  border-radius: 12px;
  padding: 10px 12px;
  cursor: pointer;
  transition: transform .15s ease, border-color .15s ease, background .15s ease;
  font-size: 13px;
  line-height: 1.35;
}
.idle-riddle-option:hover {
  transform: translateY(-1px);
  border-color: rgba(251,191,36,.28);
}
.idle-riddle-option.good {
  background: rgba(34,197,94,.14);
  border-color: rgba(34,197,94,.28);
}
.idle-riddle-option.bad {
  background: rgba(239,68,68,.14);
  border-color: rgba(239,68,68,.28);
}
.idle-riddle-feedback {
  min-height: 22px;
  margin-top: 12px;
  margin-bottom: 8px;
  font-size: 12px;
  color: #cbd5e1;
  overflow-wrap: anywhere;
}
.idle-riddle-feedback.good { color: #86efac; }
.idle-riddle-feedback.bad { color: #fca5a5; }
.idle-riddle-card.riddle-flash-good {
  animation: riddleGoodPulse .65s ease;
}
.idle-riddle-card.riddle-flash-bad {
  animation: riddleBadShake .65s ease;
}
@keyframes riddleGoodPulse {
  0% { transform: translateY(0) scale(1); box-shadow: 0 24px 70px rgba(0,0,0,.48); }
  45% { transform: translateY(0) scale(1.015); box-shadow: 0 24px 90px rgba(34,197,94,.22); }
  100% { transform: translateY(0) scale(1); box-shadow: 0 24px 70px rgba(0,0,0,.48); }
}
@keyframes riddleBadShake {
  0%, 100% { transform: translateY(0) translateX(0); }
  20% { transform: translateY(0) translateX(-5px); }
  40% { transform: translateY(0) translateX(5px); }
  60% { transform: translateY(0) translateX(-3px); }
  80% { transform: translateY(0) translateX(3px); }
}
.idle-riddle-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 14px;
}
.idle-riddle-btn {
  border: none;
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.idle-riddle-btn-secondary {
  margin-right: auto;
  background: rgba(255,255,255,.06);
  color: #e5e7eb;
  border: 1px solid rgba(255,255,255,.08);
}
.idle-riddle-btn-primary {
  background: #fbbf24;
  color: #0b0f28;
}
@media (max-width: 600px) {
  .idle-riddle-card {
    width: min(360px, calc(100vw - 20px));
    max-height: min(72vh, 560px);
  }
}
@media (max-width: 600px) {
  .dash-tour-card {
    width: min(320px, calc(100vw - 24px));
  }
  .dash-tour-mascot {
    width: 56px;
    height: 56px;
    border-radius: 14px;
  }
  .mascot-bubble {
    right: 12px;
    bottom: 78px;
    padding: 6px 8px 6px 6px;
    gap: 8px;
  }
  .mascot-toggle {
    right: 12px;
    bottom: 24px;
    padding: 8px 11px;
    font-size: 11px;
    min-width: 104px;
  }
  .mascot-bubble-actions {
    gap: 4px;
  }
  .mascot-bubble-action {
    padding: 4px 7px;
    font-size: 9px;
  }
  .mascot-bubble-text {
    display: none;
  }
  .mascot-bubble-note {
    right: 54px;
    max-width: min(210px, calc(100vw - 80px));
    font-size: 10px;
  }
  .mascot-bubble-note-open {
    max-width: min(230px, calc(100vw - 80px));
  }
}