/* ==========================================================================
   mindecho.art — "Deep Ocean" dark teal glassmorphic design system
   Top nav, glassy teal panels, gold + purple accents, clean node-graph.
   Loaded after style.css; overrides page chrome.
   ========================================================================== */

:root {
  --bg-0: #091619;
  --text: #e6f0ec;
  --text-2: #9bb6ad;
  --text-3: #6f8a82;

  --glass: rgba(20, 40, 44, 0.5);
  --glass-2: rgba(26, 50, 54, 0.72);
  --glass-soft: rgba(20, 40, 44, 0.32);
  --border: rgba(120, 190, 175, 0.14);
  --border-2: rgba(120, 190, 175, 0.26);

  --teal: #5dcaa5;
  --teal-hover: #74d8b6;
  --teal-fg: #062019;
  --teal-tint: rgba(93, 202, 165, 0.12);
  --teal-tint-2: rgba(93, 202, 165, 0.22);
  --gold: #e0b074;
  --purple: #8f7fc9;
  --blue: #6aa7d8;

  --shadow: 0 10px 40px rgba(0, 0, 0, 0.35);
  --shadow-soft: 0 6px 24px rgba(0, 0, 0, 0.22);

  --radius-sm: 10px;
  --radius: 14px;
  --radius-lg: 18px;
  --radius-pill: 50px;

  --font: "Inter", system-ui, -apple-system, sans-serif;
  --font-brand: "Lora", Georgia, serif;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --blur: blur(18px);
  --topbar-h: 64px;
  --app-bg:
    radial-gradient(90% 70% at 82% -5%, rgba(46, 86, 88, 0.55), transparent 60%),
    radial-gradient(80% 70% at 0% 108%, rgba(48, 44, 86, 0.45), transparent 60%),
    linear-gradient(160deg, #0a1c1f 0%, #0a1620 55%, #0d1228 100%);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; } /* component CSS (display:flex etc.) was overriding the hidden attribute */
html { scroll-behavior: smooth; }
body {
  margin: 0; min-height: 100vh; color: var(--text);
  font-family: var(--font); font-size: 1rem; line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  background: var(--app-bg) !important;
  background-attachment: fixed !important;
}
body::before, body::after { content: none !important; display: none !important; }
.stars-container { display: none !important; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { font-weight: 600; color: var(--text); margin: 0; letter-spacing: -0.01em; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* ---- top navigation ---- */
.topbar {
  position: fixed; top: 0; left: 0; right: 0; height: var(--topbar-h); z-index: 80;
  display: flex; align-items: center; gap: 1.5rem; padding: 0 1.75rem;
  background: var(--topbar-bg); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  border-bottom: 1px solid var(--border);
}
.brand { font-family: var(--font-brand); font-size: 1.35rem; font-weight: 600; color: var(--text); letter-spacing: -0.01em; display: inline-flex; align-items: center; gap: 0.5rem; }
.brand-dot { width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, var(--teal), #2b6f78 70%); box-shadow: 0 0 12px rgba(93,202,165,0.5); }
.topnav { display: flex; gap: 0.35rem; margin: 0 auto 0 1rem; }
.nav-item {
  border: none; background: transparent; color: var(--text-2);
  font-family: var(--font); font-size: 0.92rem; cursor: pointer;
  padding: 0.5rem 0.9rem; border-radius: var(--radius-pill);
  transition: color 0.25s var(--ease), background 0.25s var(--ease);
  display: inline-flex; align-items: center;
}
.nav-item:hover { color: var(--text); background: var(--teal-tint); }
.nav-item.active { color: var(--teal); background: var(--teal-tint-2); }
.topbar-right { display: flex; align-items: center; gap: 1rem; margin-left: auto; }
.avatar {
  width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(140deg, var(--purple), var(--teal));
  display: grid; place-items: center; color: #fff; font-size: 1rem;
  border: 1px solid var(--border-2);
}

/* ---- token meter (in topbar) ---- */
.token-meter { display: flex; flex-direction: column; gap: 5px; width: 150px; }
.token-meter-bar { width: 100%; height: 6px; border-radius: 50px; background: rgba(120,150,145,0.18); overflow: hidden; }
.token-meter-fill { height: 100%; width: 0%; border-radius: 50px; background: var(--teal); transition: width 0.9s var(--ease), background 0.5s var(--ease); }
.token-meter-label { font-size: 0.72rem; color: var(--text-2); }
.token-meter[data-level="mid"] .token-meter-fill { background: var(--gold); }
.token-meter[data-level="high"] .token-meter-fill { background: #d98c7a; }

/* ---- shell ---- */
.app-shell { display: block; }
.sidebar, .bottom-nav, .mood-field { display: none !important; }
.content { margin-left: 0; padding-top: var(--topbar-h); position: relative; z-index: 1; }

/* ---- hero ---- */
.hero { max-width: 760px; margin: 0 auto; padding: 5rem 2rem 3rem; min-height: calc(100vh - var(--topbar-h)); display: flex; flex-direction: column; justify-content: center; animation: fade-up 0.6s var(--ease) both; }
.hero-form { display: flex; flex-direction: column; }
.hero-eyebrow { font-size: 13px; color: var(--teal); letter-spacing: 0.04em; text-transform: uppercase; margin: 0 0 0.85rem; font-weight: 500; }
.hero-title { font-size: clamp(2rem, 5vw, 3rem); line-height: 1.08; margin: 0 0 1rem; }
.hero-sub { font-size: 1.0625rem; color: var(--text-2); margin: 0 0 2rem; max-width: 34rem; }

/* composer */
.composer { background: var(--glass); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow); transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease); }
.composer:focus-within { border-color: var(--border-2); box-shadow: 0 10px 44px rgba(0,0,0,0.4), 0 0 0 1px var(--teal-tint-2); }
.composer-input, textarea#dream-input.composer-input {
  display: block !important; width: 100% !important; min-height: 150px !important; height: auto !important; resize: none !important;
  background: transparent !important; background-image: none !important; border: none !important; outline: none !important;
  color: var(--text) !important; font-family: var(--font) !important; font-size: 1.125rem !important; font-style: normal !important;
  line-height: 1.65 !important; padding: 1.2rem 1.4rem 0.5rem !important;
}
.composer-input::placeholder { color: var(--text-3) !important; opacity: 1; }
.composer-bar { display: flex; align-items: center; gap: 0.75rem; padding: 0.65rem 0.8rem 0.65rem 1.4rem; border-top: 1px solid var(--border); }
.composer-count { font-size: 0.8rem; color: var(--text-3); font-variant-numeric: tabular-nums; margin-right: auto; }

.icon-btn { width: 40px; height: 40px; display: grid; place-items: center; background: var(--glass-2); border: 1px solid var(--border); color: var(--text-2); border-radius: 50%; cursor: pointer; transition: all 0.25s var(--ease); }
.icon-btn svg { width: 18px; height: 18px; }
.icon-btn:hover { color: var(--teal); border-color: var(--border-2); }
.icon-btn.recording { background: #d98c7a; border-color: #d98c7a; color: #fff; animation: rec-pulse 1.4s infinite; }
@keyframes rec-pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(217,140,122,0.55);} 50%{ box-shadow:0 0 0 9px rgba(217,140,122,0);} }

.btn-primary { display: inline-flex; align-items: center; gap: 0.5rem; background: var(--teal); color: var(--teal-fg); border: none; border-radius: var(--radius-pill); font-family: var(--font); font-size: 0.95rem; font-weight: 600; padding: 13px 26px; cursor: pointer; box-shadow: 0 4px 18px rgba(93,202,165,0.22); transition: transform 0.2s var(--ease), background 0.2s var(--ease), box-shadow 0.2s var(--ease); }
.btn-primary svg { width: 16px; height: 16px; }
.btn-primary:hover { background: var(--teal-hover); transform: translateY(-1px); box-shadow: 0 8px 26px rgba(93,202,165,0.3); }
.btn-primary:active { transform: translateY(0); }
.btn-primary:disabled { opacity: 0.5; cursor: default; }
.btn-glow { display: none; }
.voice-hint { font-size: 0.85rem; color: var(--teal); margin: 0.75rem 0 0; font-style: italic; }

/* chips */
.prompt-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1.25rem 0 0; }
.prompt-chips-label { display: none; }
.chip { background: var(--glass); border: 1px solid var(--border); color: var(--text-2); border-radius: var(--radius-pill); font-family: var(--font); font-size: 0.85rem; padding: 0.5rem 1rem; cursor: pointer; transition: all 0.25s var(--ease); }
.chip:hover { background: var(--teal-tint); border-color: var(--border-2); color: var(--text); }

/* refine + style pills */
.refine { margin-top: 1.75rem; border-top: 1px solid var(--border); padding-top: 1.25rem; }
.refine > summary { cursor: pointer; list-style: none; color: var(--text-2); font-size: 0.9rem; display: inline-flex; align-items: center; gap: 0.4rem; }
.refine > summary::-webkit-details-marker { display: none; }
.refine > summary::before { content: "+"; color: var(--teal); font-weight: 600; }
.refine[open] > summary::before { content: "–"; }
.style-groups { display: grid; gap: 1.25rem; margin-top: 1.25rem; }
.style-group-label { display: block; font-size: 0.8rem; color: var(--text-3); margin-bottom: 0.6rem; }
.style-grid { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.style-pill { display: inline-flex; align-items: center; gap: 0.4rem; background: var(--glass); border: 1px solid var(--border); color: var(--text-2); border-radius: var(--radius-pill); padding: 0.45rem 0.9rem; font-size: 0.82rem; cursor: pointer; transition: all 0.25s var(--ease); }
.style-pill input { position: absolute; opacity: 0; width: 0; height: 0; }
.style-pill .pill-badge { width: 12px; height: 12px; border-radius: 50%; border: 1px solid var(--border-2); transition: all 0.25s var(--ease); }
.style-pill:hover { color: var(--text); border-color: var(--border-2); }
.style-pill:has(input:checked) { color: var(--teal); border-color: var(--teal); background: var(--teal-tint); }
.style-pill:has(input:checked) .pill-badge { background: var(--teal); border-color: var(--teal); }
.style-pill:focus-within { outline: 2px solid var(--teal-tint-2); outline-offset: 2px; }

/* ---- sections ---- */
.oracle-card.history-card, .oracle-card.gallery-card, .oracle-card.echomap-card {
  background: transparent !important; border: none !important; backdrop-filter: none !important; box-shadow: none !important;
  max-width: 1080px; margin: 0 auto !important; padding: 4rem 2rem !important;
}
.history-card, .echomap-card { border-top: 1px solid var(--border) !important; }
.card-header { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.5rem; }
.card-header .card-number, .card-header .accent-line { display: none !important; }
.card-header h2 { font-size: 1.6rem; color: var(--text) !important; }
.card-desc { color: var(--text-2) !important; font-size: 0.95rem; }

/* diary toolbar + search */
.diary-toolbar { margin: 1rem 0 1.5rem; }
.diary-search { width: 100%; max-width: 360px; background: var(--glass); backdrop-filter: blur(12px); border: 1px solid var(--border); color: var(--text); border-radius: var(--radius); padding: 0.7rem 1.1rem; font-family: var(--font); font-size: 0.9rem; transition: border-color 0.25s var(--ease); }
.diary-search::placeholder { color: var(--text-3); }
.diary-search:focus { outline: none; border-color: var(--border-2); box-shadow: 0 0 0 3px var(--teal-tint); }
#diary-count { color: var(--teal); font-size: 0.85rem; }
.diary-empty { text-align: center; padding: 3rem 1rem; color: var(--text-2); }
.diary-no-results { color: var(--text-2); font-style: italic; }

/* grids + cards */
.history-grid, .gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1.25rem; }
@media (min-width: 1024px) { .history-grid, .gallery-grid { grid-template-columns: repeat(3, 1fr); } }
.gallery-card-item, .gallery-card-item.shared-art-card {
  position: relative; background: var(--glass) !important; backdrop-filter: blur(14px); border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important; box-shadow: var(--shadow-soft) !important; overflow: hidden; cursor: pointer; padding: 0 !important;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s var(--ease); animation: fade-up 0.5s var(--ease) both;
}
.gallery-card-item:hover { transform: translateY(-3px); border-color: var(--border-2) !important; box-shadow: var(--shadow) !important; }
.gallery-card-img-wrapper { aspect-ratio: 16 / 10; overflow: hidden; margin: 0 !important; }
.gallery-card-img-wrapper img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--ease); }
.gallery-card-item:hover .gallery-card-img-wrapper img { transform: scale(1.05); }
.gallery-card-info { padding: 0.9rem 1.1rem; }
.gallery-card-text { color: var(--text) !important; font-size: 0.88rem; margin: 0 0 0.35rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.gallery-card-meta { color: var(--text-3) !important; font-size: 0.78rem; }
.gallery-loading { color: var(--text-2); text-align: center; padding: 2rem; }
.card-delete-btn { position: absolute; top: 8px; right: 8px; width: 30px; height: 30px; border-radius: 50%; background: rgba(9,22,25,0.7); border: 1px solid var(--border-2); color: var(--text-2); cursor: pointer; backdrop-filter: blur(8px); display: grid; place-items: center; font-size: 1.05rem; line-height: 1; z-index: 5; }
.card-delete-btn:hover { color: #d98c7a; }

/* ---- echo map (clean SVG node graph) ---- */
.echomap-stage { position: relative; width: 100%; height: 480px; margin: 1rem 0 0.5rem; border-radius: var(--radius-lg); overflow: hidden; background: linear-gradient(165deg, rgba(14,32,36,0.7), rgba(16,20,40,0.75)); border: 1px solid var(--border); box-shadow: var(--shadow-soft); }
#echomap-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.em-edge { fill: none; stroke: rgba(93,202,165,0.22); stroke-linecap: round; transition: stroke 0.25s var(--ease), stroke-width 0.25s var(--ease); }
.em-edge.hot { stroke: rgba(224,176,116,0.85); }
.em-node { cursor: grab; }
.em-node.dragging { cursor: grabbing; }
.em-node circle { transition: filter 0.2s var(--ease); }
.em-node.sel > circle:not(.em-ring) { stroke: var(--gold); stroke-width: 2.5; }
#echomap-overlay, #echomap-svg { touch-action: none; }
.em-node text { fill: var(--text); font-family: var(--font); font-size: 12px; text-anchor: middle; pointer-events: none; paint-order: stroke; stroke: rgba(9,18,20,0.7); stroke-width: 3px; }
.em-node.hot circle { filter: drop-shadow(0 0 8px rgba(224,176,116,0.8)); }
.em-node .em-ring { fill: none; stroke: var(--gold); stroke-width: 2; opacity: 0; transition: opacity 0.2s var(--ease); }
.em-node.hot .em-ring { opacity: 1; }
.echomap-badge { position: absolute; top: 0.75rem; left: 0.85rem; z-index: 2; font-size: 0.72rem; color: var(--text-2); background: rgba(9,18,20,0.5); padding: 0.25rem 0.65rem; border-radius: 20px; pointer-events: none; }
.echomap-loading, .echomap-empty { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 2rem; gap: 1rem; color: var(--text-2); }
.echomap-empty p { max-width: 440px; line-height: 1.6; font-style: italic; }
.echomap-detail { margin-top: 0.75rem; padding: 1rem 1.2rem; background: var(--glass) !important; backdrop-filter: blur(14px); border: 1px solid var(--border) !important; border-radius: var(--radius) !important; animation: fade-up 0.4s var(--ease); }
.echomap-detail h4 { color: var(--teal) !important; text-transform: capitalize; margin: 0 0 0.55rem; }
.echomap-detail-sub { color: var(--text-2) !important; font-size: 0.85rem; margin: 0 0 0.7rem; }
.echomap-dreamlinks { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.echomap-dreamlink { background: var(--teal-tint) !important; border: 1px solid var(--border) !important; color: var(--text) !important; border-radius: var(--radius-pill); padding: 0.4rem 0.85rem; font-size: 0.82rem; cursor: pointer; transition: all 0.2s var(--ease); }
.echomap-dreamlink:hover { background: var(--teal-tint-2) !important; }

/* share opt-in */
.share-optin { background: var(--teal-tint) !important; border: 1px solid var(--border) !important; }
.share-toggle-copy strong { color: var(--text) !important; }
.share-toggle-copy small { color: var(--text-2) !important; }
.share-toggle input:checked + .share-toggle-track { background: var(--teal) !important; border-color: var(--teal) !important; }
.share-status { color: var(--teal) !important; }

/* welcome banner */
.welcome-banner { max-width: 760px; margin: 0 auto 1.5rem !important; background: var(--glass) !important; backdrop-filter: blur(14px); border: 1px solid var(--border) !important; border-radius: var(--radius-lg) !important; box-shadow: var(--shadow-soft); }
.welcome-title { color: var(--teal) !important; }
.welcome-text { color: var(--text-2) !important; }
.welcome-close { color: var(--text-2) !important; }
.welcome-close:hover { color: var(--text) !important; background: var(--teal-tint) !important; }

/* spinner */
.spinner { border-color: var(--teal-tint) !important; border-top-color: var(--teal) !important; }

/* focus + motion */
:where(a, button, input, textarea, [tabindex]):focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; border-radius: 8px; }
@keyframes fade-up { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } }

/* responsive */
@media (max-width: 760px) {
  .topbar { gap: 0.5rem; padding: 0 1rem; }
  .topnav { margin: 0 auto 0 0.25rem; gap: 0.1rem; overflow-x: auto; }
  .nav-item { padding: 0.45rem 0.6rem; font-size: 0.85rem; }
  .token-meter { display: none; }
  .hero { padding: 3.5rem 1.25rem 2rem; }
  .oracle-card.history-card, .oracle-card.gallery-card, .oracle-card.echomap-card { padding: 3rem 1.25rem !important; }
  .echomap-stage { height: 380px; }
}

/* ---- dream-map hubs ---- */
.em-hub circle { filter: drop-shadow(0 0 7px rgba(93,202,165,0.55)); }
.em-hub-label { fill: var(--teal) !important; font-weight: 600; }

/* ==========================================================================
   PROCESSING / RESULTS / REPORT — deep-ocean restyle (overrides cosmic style.css)
   ========================================================================== */
body.portal-body { background: var(--app-bg) !important; }
.portal-main { position: relative; z-index: 1; }
.btn-back { color: var(--text-2) !important; font-family: var(--font); }
.btn-back:hover { color: var(--teal) !important; }
.portal-panel, .results-panel { background: var(--glass) !important; backdrop-filter: var(--blur) !important; -webkit-backdrop-filter: var(--blur) !important; border: 1px solid var(--border) !important; border-radius: var(--radius-lg) !important; box-shadow: var(--shadow) !important; }
.portal-title, .dream-title-heading { font-family: var(--font) !important; color: var(--text) !important; }
.portal-status-text { color: var(--teal) !important; }
.portal-status-subtext, .dream-date { color: var(--text-2) !important; }
.accent-line { background: var(--teal) !important; }
.orb-inner { background: radial-gradient(circle at 35% 30%, #8fe6cb, var(--teal) 55%, #2b6f78) !important; }
.orb-aura { background: radial-gradient(circle, rgba(93,202,165,0.4), transparent 70%) !important; }
.checklist-item .step-label { color: var(--text-2) !important; }
.checklist-item.completed .step-label, .checklist-item.active .step-label { color: var(--text) !important; }
.checkbox-circle { border-color: var(--border-2) !important; }
.checkbox-circle.checked, .checkbox-circle.completed { background: var(--teal) !important; border-color: var(--teal) !important; color: var(--teal-fg) !important; }
.image-frame-gold { border-color: var(--border-2) !important; }
.image-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.btn-action { display: inline-flex; align-items: center; gap: 0.45rem; background: var(--glass) !important; border: 1px solid var(--border) !important; color: var(--text) !important; border-radius: var(--radius-pill) !important; font-family: var(--font); font-size: 0.88rem; padding: 0.6rem 1.05rem !important; cursor: pointer; transition: all 0.2s var(--ease); }
.btn-action:hover { background: var(--teal-tint) !important; border-color: var(--border-2) !important; }
.btn-action svg { width: 16px; height: 16px; flex-shrink: 0; }
#btn-regenerate { background: var(--teal) !important; color: var(--teal-fg) !important; border-color: var(--teal) !important; }
#btn-regenerate:hover { background: var(--teal-hover) !important; }
.dream-original-card { background: var(--glass) !important; border: 1px solid var(--border) !important; border-radius: var(--radius) !important; }
.dream-original-card h4 { color: var(--teal) !important; }
.dream-original-text blockquote, #reveal-original-text { color: var(--text) !important; }
.analysis-block-title { font-family: var(--font) !important; color: var(--teal) !important; border-bottom-color: var(--border) !important; }
.markdown-content, .markdown-content p, .markdown-content li, .markdown-content blockquote { color: var(--text) !important; }
.markdown-content strong { color: var(--teal) !important; }
/* strip the leftover cosmic gold/purple left-lines + timeline markers on detail sections */
.markdown-content { border-left: none !important; padding-left: 0 !important; margin-left: 0 !important; }
.markdown-content p, .markdown-content blockquote, .markdown-content ul {
  background: var(--glass) !important; border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important; padding: 1rem 1.25rem !important;
}
.markdown-content p::before, .markdown-content blockquote::before, .markdown-content ul::before { display: none !important; content: none !important; }
.dream-original-text { border-left: none !important; background: var(--glass) !important; border: 1px solid var(--border) !important; border-radius: var(--radius) !important; }
.core-message-card { background: var(--glass) !important; border: 1px solid var(--border) !important; border-radius: var(--radius-lg) !important; }
.core-message-text { color: var(--text) !important; font-family: var(--font) !important; }
.quote-mark { color: var(--teal) !important; }
.btn-narration { background: var(--teal-tint) !important; border: 1px solid var(--border) !important; color: var(--text) !important; border-radius: var(--radius-pill) !important; }
.soundwave-bar { background: var(--teal) !important; }
.decoded-symbols-section h4 { color: var(--teal) !important; font-family: var(--font) !important; border-bottom-color: var(--border) !important; }
.symbol-card-item { background: var(--glass) !important; border: 1px solid var(--border) !important; border-radius: var(--radius) !important; }
.symbol-card-title { color: var(--teal) !important; }
.symbol-card-desc { color: var(--text-2) !important; }
.symbol-card-icon-container { background: var(--teal-tint) !important; }
.btn-read-more { background: var(--teal-tint) !important; border: 1px solid var(--border) !important; color: var(--text) !important; border-radius: var(--radius-pill) !important; }
.read-more-fade { background: linear-gradient(transparent, rgba(13,18,28,0.92)) !important; }
.alignment-column { background: var(--glass) !important; border: 1px solid var(--border) !important; border-radius: var(--radius) !important; }
.alignment-column-header h5 { color: var(--teal) !important; }
.alignment-card-body, .alignment-card-body p { color: var(--text-2) !important; }
.glossary-term { color: var(--teal) !important; border-bottom-color: var(--teal) !important; }
.definition-popup-card { background: var(--glass-2) !important; backdrop-filter: var(--blur); border: 1px solid var(--border) !important; }
.popup-title { color: var(--teal) !important; }
.modal-overlay { background: rgba(6,14,16,0.82) !important; backdrop-filter: blur(10px); }
.modal-content { background: var(--glass-2) !important; backdrop-filter: var(--blur) !important; border: 1px solid var(--border) !important; border-radius: var(--radius-lg) !important; }
.modal-close { color: var(--text-2) !important; }
.modal-close:hover { color: var(--teal) !important; }

/* ==========================================================================
   DREAM SYNTHESIS CORE — processing visual (fun + sci-fi + technical + organic)
   ========================================================================== */
.synthesis-core { position: relative; width: 240px; height: 240px; margin: 1.5rem auto; --core-color: var(--teal); }
.core-gpu { position: absolute; top: 50%; left: 50%; width: 380px; height: 380px; transform: translate(-50%, -50%); z-index: 0; pointer-events: none; opacity: 0.9; }
.core-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; z-index: 1; }
.core-blob { z-index: 1; }
.core-particle { z-index: 1; }
.core-track { fill: none; stroke: var(--border); stroke-width: 3; }
.core-progress {
  fill: none; stroke: var(--core-color); stroke-width: 4; stroke-linecap: round;
  stroke-dasharray: 603; stroke-dashoffset: 603;
  transition: stroke-dashoffset 1.1s cubic-bezier(0.34, 1.4, 0.5, 1), stroke 0.8s var(--ease);
  filter: drop-shadow(0 0 6px var(--core-color));
}
.core-arc, .core-arc-ring { transform-origin: 110px 110px; }
.core-arc path { fill: none; stroke: var(--core-color); stroke-width: 2.5; stroke-linecap: round; transition: stroke 0.8s var(--ease); }
.core-arc-1 { animation: core-spin 6s linear infinite; opacity: 0.75; }
.core-arc-2 { animation: core-spin 9s linear infinite reverse; opacity: 0.5; }
.core-arc-ring { fill: none; stroke: var(--core-color); stroke-width: 1; opacity: 0.28; stroke-dasharray: 3 9; animation: core-spin 26s linear infinite; transition: stroke 0.8s var(--ease); }
.core-center { fill: #fff; filter: drop-shadow(0 0 8px var(--core-color)); }
@keyframes core-spin { to { transform: rotate(360deg); } }

.core-blob {
  position: absolute; top: 50%; left: 50%; width: 100px; height: 100px;
  background: radial-gradient(circle at 35% 30%, rgba(255,255,255,0.92), var(--core-color) 58%);
  box-shadow: 0 0 44px var(--core-color), inset 0 0 22px rgba(255,255,255,0.28);
  border-radius: 42% 58% 63% 37% / 41% 44% 56% 59%;
  animation: blob-morph 8s ease-in-out infinite, blob-breathe 3.6s ease-in-out infinite;
  transition: background 0.8s var(--ease), box-shadow 0.8s var(--ease);
  will-change: border-radius, transform;
}
@keyframes blob-morph {
  0%, 100% { border-radius: 42% 58% 63% 37% / 41% 44% 56% 59%; }
  33% { border-radius: 62% 38% 34% 66% / 56% 58% 42% 44%; }
  66% { border-radius: 38% 62% 56% 44% / 48% 36% 64% 52%; }
}
@keyframes blob-breathe { 0%, 100% { transform: translate(-50%, -50%) scale(1); } 50% { transform: translate(-50%, -50%) scale(1.09); } }

.core-particle { position: absolute; top: 50%; left: 50%; width: 6px; height: 6px; border-radius: 50%; background: var(--core-color); box-shadow: 0 0 8px var(--core-color); transition: background 0.8s var(--ease); }
.cp1 { animation: orbit-a 5s linear infinite; }
.cp2 { animation: orbit-b 7.5s linear infinite; }
.cp3 { animation: orbit-c 9.5s linear infinite reverse; }
@keyframes orbit-a { from { transform: translate(-50%,-50%) rotate(0) translateX(98px); } to { transform: translate(-50%,-50%) rotate(360deg) translateX(98px); } }
@keyframes orbit-b { from { transform: translate(-50%,-50%) rotate(120deg) translateX(76px); } to { transform: translate(-50%,-50%) rotate(480deg) translateX(76px); } }
@keyframes orbit-c { from { transform: translate(-50%,-50%) rotate(240deg) translateX(110px); } to { transform: translate(-50%,-50%) rotate(600deg) translateX(110px); } }

.core-stages { display: flex; gap: 0.65rem; justify-content: center; margin-top: 1.25rem; }
.core-stage-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--border-2); transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); }
.core-stage-dot.done { background: var(--core-color); box-shadow: 0 0 8px var(--core-color); }
.core-stage-dot.active { background: var(--core-color); box-shadow: 0 0 13px var(--core-color); transform: scale(1.55); }

@media (prefers-reduced-motion: reduce) {
  .core-arc-1, .core-arc-2, .core-arc-ring, .core-blob, .core-particle { animation: none !important; }
}

/* ==========================================================================
   THEMES — swap the token set via html[data-theme]
   ========================================================================== */
:root { --topbar-bg: rgba(10, 22, 25, 0.6); }

/* Lavender — soft, light, casual diary (from reference) */
html[data-theme="lavender"] {
  --app-bg:
    radial-gradient(90% 70% at 80% -10%, #efe6f7 0%, transparent 55%),
    radial-gradient(80% 70% at 0% 110%, #e9e6f6 0%, transparent 55%),
    linear-gradient(160deg, #faf7fc 0%, #f1ecf8 100%);
  --text: #4a4458; --text-2: #857d96; --text-3: #aaa3bb;
  --glass: rgba(255, 255, 255, 0.58); --glass-2: rgba(255, 255, 255, 0.74); --glass-soft: rgba(255, 255, 255, 0.42);
  --border: rgba(150, 130, 185, 0.22); --border-2: rgba(150, 130, 185, 0.4);
  --teal: #9b7ebd; --teal-hover: #8a6ba8; --teal-fg: #ffffff;
  --teal-tint: rgba(155, 126, 189, 0.14); --teal-tint-2: rgba(155, 126, 189, 0.24);
  --gold: #e0a96d; --purple: #9b7ebd; --blue: #7ba8d8;
  --shadow: 0 10px 40px rgba(120, 100, 150, 0.12); --shadow-soft: 0 6px 24px rgba(120, 100, 150, 0.08);
  --topbar-bg: rgba(255, 255, 255, 0.62);
}

/* Sage — calm dark green */
html[data-theme="sage"] {
  --app-bg:
    radial-gradient(100% 80% at 50% -5%, rgba(40, 56, 46, 0.5), transparent 60%),
    linear-gradient(160deg, #0e1611 0%, #0c120f 100%);
  --teal: #94b49f; --teal-hover: #a9c7b3; --teal-fg: #0a140e;
  --teal-tint: rgba(148, 180, 159, 0.12); --teal-tint-2: rgba(148, 180, 159, 0.22);
  --glass: rgba(24, 32, 27, 0.5); --glass-2: rgba(30, 40, 33, 0.72);
  --border: rgba(148, 180, 159, 0.14); --border-2: rgba(148, 180, 159, 0.26);
  --topbar-bg: rgba(12, 18, 14, 0.6);
}

/* theme picker */
.theme-picker { position: relative; }
.theme-btn { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: transparent; border: 1px solid var(--border); color: var(--text-2); cursor: pointer; transition: all 0.2s var(--ease); }
.theme-btn:hover { color: var(--teal); border-color: var(--border-2); }
.theme-btn svg { width: 18px; height: 18px; }
.theme-menu { position: absolute; top: calc(100% + 10px); right: 0; z-index: 90; display: flex; flex-direction: column; gap: 2px; padding: 6px; min-width: 172px; background: var(--glass-2); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.theme-opt { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: none; background: transparent; color: var(--text); font-family: var(--font); font-size: 0.88rem; border-radius: var(--radius-sm); cursor: pointer; text-align: left; transition: background 0.2s var(--ease); }
.theme-opt:hover { background: var(--teal-tint); }
.theme-opt.active { background: var(--teal-tint-2); color: var(--teal); }
.theme-opt .sw { width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.14); }

/* ==========================================================================
   PERSONAL PAGE (me.html) — hero + calendar
   ========================================================================== */
.me-hero { padding: 2.5rem 0 0.5rem; text-align: center; }
.me-hero .hero-eyebrow { color: var(--teal); font-size: 0.82rem; letter-spacing: 0.08em; text-transform: uppercase; margin: 0 0 0.5rem; }
.me-title { font-family: var(--font-display, 'Lora', serif); font-size: clamp(2rem, 5vw, 2.9rem); font-weight: 600; line-height: 1.1; margin: 0 0 0.65rem; color: var(--text); }
.me-hero .hero-sub { color: var(--text-2); font-size: 1.02rem; max-width: 46ch; margin: 0 auto; line-height: 1.55; }

/* Calendar */
.calendar { margin-top: 0.5rem; }
.cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.9rem; }
.cal-title { font-family: var(--font-display, 'Lora', serif); font-size: 1.12rem; font-weight: 600; color: var(--text); }
.cal-nav { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: transparent; border: 1px solid var(--border); color: var(--text-2); font-size: 1.3rem; line-height: 1; cursor: pointer; transition: all 0.2s var(--ease); }
.cal-nav:hover { color: var(--teal); border-color: var(--border-2); background: var(--teal-tint); }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.cal-wd { text-align: center; font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-3); padding-bottom: 4px; }
.cal-cell { aspect-ratio: 1 / 1; display: grid; place-items: center; border-radius: var(--radius-sm); border: 1px solid transparent; background: color-mix(in srgb, var(--text) 4%, transparent); color: var(--text-3); font-family: var(--font); font-size: 0.9rem; cursor: default; transition: all 0.2s var(--ease); }
.cal-cell.empty { background: transparent; border-color: transparent; }
.cal-cell.has { color: var(--text); cursor: pointer; border-color: var(--border); background: color-mix(in srgb, var(--teal) calc(var(--c-int, 0.4) * 100%), transparent); box-shadow: 0 0 0 1px var(--border); }
.cal-cell.has:hover { border-color: var(--teal); transform: translateY(-1px); }
.cal-cell.today { box-shadow: inset 0 0 0 1.5px var(--teal); }
.cal-cell.sel { border-color: var(--teal); box-shadow: 0 0 0 2px var(--teal), 0 4px 14px var(--teal-tint-2); transform: translateY(-1px); }

/* ==========================================================================
   PROMPT PREVIEW MODAL — themed (deep ocean glass)
   ========================================================================== */
.modal-content.pp-modal { max-width: 600px; width: 100%; padding: 2rem 2rem 1.75rem; }
.pp-head { display: flex; align-items: center; gap: 0.7rem; margin: 0 0 0.5rem; }
.pp-icon { font-size: 1.45rem; line-height: 1; }
.pp-title { font-family: var(--font-display, 'Lora', serif); font-size: 1.3rem; font-weight: 600; color: var(--text); margin: 0; }
.pp-desc { color: var(--text-2); font-size: 0.95rem; line-height: 1.55; margin: 0 0 1.15rem; }
.pp-textarea { width: 100%; min-height: 150px; resize: vertical; background: color-mix(in srgb, var(--text) 5%, transparent); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); font-family: var(--font); font-size: 0.95rem; line-height: 1.55; padding: 14px 16px; outline: none; transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease); }
.pp-textarea::placeholder { color: var(--text-3); }
.pp-textarea:focus { border-color: var(--teal); box-shadow: 0 0 0 3px var(--teal-tint); }
.pp-textarea.pp-invalid { border-color: #e0795f; box-shadow: 0 0 0 3px rgba(224,121,95,0.18); }
.pp-actions { display: flex; gap: 0.6rem; margin-top: 1.35rem; flex-wrap: wrap; }
.pp-btn { flex: 1 1 120px; padding: 12px 16px; border-radius: var(--radius-pill); font-family: var(--font); font-size: 0.92rem; font-weight: 600; cursor: pointer; border: 1px solid transparent; transition: transform 0.2s var(--ease), background 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease); }
.pp-btn.primary { flex-grow: 1.7; background: var(--teal); color: var(--teal-fg); box-shadow: 0 4px 18px rgba(93,202,165,0.22); }
.pp-btn.primary:hover { background: var(--teal-hover); transform: translateY(-1px); }
.pp-btn.secondary { background: var(--teal-tint); color: var(--teal); border-color: var(--border-2); }
.pp-btn.secondary:hover { background: var(--teal-tint-2); }
.pp-btn.ghost { flex-grow: 0.8; background: transparent; color: var(--text-2); border-color: var(--border); }
.pp-btn.ghost:hover { color: var(--text); border-color: var(--border-2); background: var(--teal-tint); }