/* ════════════════════════════════════════════════
   MNEMOS — Cognitive Memory OS — felcos.es Design System
   ════════════════════════════════════════════════ */

/* Dark theme (default) */
:root,
html[data-theme="dark"] {
    --bg: #050a18;
    --bg2: #0a1128;
    --bg3: #0f1a35;
    --bg4: #162040;
    --text: #e4eaf4;
    --text2: #8d9bb5;
    --text3: #5a6a85;
    --accent1: #00d4ff;
    --accent2: #7c3aed;
    --accent3: #06d6a0;
    --accent4: #f72585;
    --accent5: #fca311;
    --glass: rgba(15, 26, 53, 0.65);
    --glass-border: rgba(0, 212, 255, 0.12);
    --glow1: rgba(0, 212, 255, 0.25);
    --glow2: rgba(124, 58, 237, 0.20);
    --glow3: rgba(6, 214, 160, 0.18);
    --glow4: rgba(247, 37, 133, 0.15);
    --glow5: rgba(252, 163, 17, 0.12);
    --radius: 16px;
    --ease: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    --success: #06d6a0;
    --warning: #fca311;
    --error: #f72585;
    --ss-color: #06d6a0;
    --rs-color: #00d4ff;
    --font-sans: 'Segoe UI', system-ui, -apple-system, sans-serif;
    --font-mono: 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
    --shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    --theme-toggle-icon: "\2600";
}

/* Light theme */
html[data-theme="light"] {
    --bg: #f0f2f5;
    --bg2: #ffffff;
    --bg3: #e8ecf0;
    --bg4: #d0d7de;
    --text: #1f2328;
    --text2: #656d76;
    --text3: #8c959f;
    --accent1: #0969da;
    --accent2: #7c3aed;
    --accent3: #1a7f37;
    --accent4: #cf222e;
    --accent5: #9a6700;
    --glass: rgba(255, 255, 255, 0.7);
    --glass-border: rgba(0, 0, 0, 0.08);
    --glow1: rgba(9, 105, 218, 0.08);
    --glow2: rgba(124, 58, 237, 0.08);
    --glow3: rgba(26, 127, 55, 0.08);
    --glow4: rgba(207, 34, 46, 0.08);
    --glow5: rgba(154, 103, 0, 0.08);
    --success: #1a7f37;
    --warning: #9a6700;
    --error: #cf222e;
    --ss-color: #1a7f37;
    --rs-color: #0969da;
    --shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    --theme-toggle-icon: "\263E";
}

/* ── Loading Screen ── */

.mnemos-loading {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    background: var(--bg);
}

.loading-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--glass-border);
    border-top-color: var(--accent1);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

@keyframes pulse-dot {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

.loading-text {
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    background: linear-gradient(135deg, var(--accent1), var(--accent2));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ── Reset & Base ── */

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-family: var(--font-sans);
    background: var(--bg);
    color: var(--text);
    line-height: 1.6;
    height: 100%;
}

body {
    font-family: var(--font-sans);
    background: transparent;
    color: var(--text);
    line-height: 1.6;
    height: 100%;
}

a {
    color: var(--accent1);
    text-decoration: none;
    transition: color var(--ease);
}

a:hover {
    color: var(--accent2);
}

/* ── Animated Mesh Background ── */

/* Orbs via DOM elements in .mesh-bg — pseudo-element disabled to avoid duplication */
/*
.mnemos-app::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -2;
    background:
        radial-gradient(ellipse 600px 600px at 20% 30%, var(--glow1), transparent),
        radial-gradient(ellipse 500px 500px at 80% 20%, var(--glow2), transparent),
        radial-gradient(ellipse 400px 400px at 50% 80%, var(--glow3), transparent);
    filter: blur(120px);
    animation: orbFloat 20s ease-in-out infinite alternate;
    pointer-events: none;
}
*/

@keyframes orbFloat {
    0%   { transform: translate(0, 0) scale(1); }
    33%  { transform: translate(30px, -20px) scale(1.05); }
    66%  { transform: translate(-20px, 15px) scale(0.97); }
    100% { transform: translate(10px, -10px) scale(1.02); }
}

/* Grid overlay via DOM element .grid-overlay — pseudo-element disabled to avoid duplication */
/*
.mnemos-app::after {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    background-image:
        linear-gradient(var(--glass-border) 1px, transparent 1px),
        linear-gradient(90deg, var(--glass-border) 1px, transparent 1px);
    background-size: 80px 80px;
    opacity: 0.07;
    pointer-events: none;
}
*/

/* ── Mesh Background Orbs (DOM elements) ── */

.mesh-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.mesh-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.6;
}

.mesh-orb-1 {
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, var(--glow1), transparent 70%);
    top: -10%;
    left: 10%;
    animation: orbDrift1 25s ease-in-out infinite alternate;
}

.mesh-orb-2 {
    width: 450px;
    height: 450px;
    background: radial-gradient(circle, var(--glow2), transparent 70%);
    top: 20%;
    right: -5%;
    animation: orbDrift2 30s ease-in-out infinite alternate;
}

.mesh-orb-3 {
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, var(--glow3), transparent 70%);
    bottom: -5%;
    left: 30%;
    animation: orbDrift3 22s ease-in-out infinite alternate;
}

.mesh-orb-4 {
    width: 350px;
    height: 350px;
    background: radial-gradient(circle, var(--glow4), transparent 70%);
    top: 50%;
    left: 60%;
    animation: orbDrift4 28s ease-in-out infinite alternate;
}

@keyframes orbDrift1 {
    0%   { transform: translate(0, 0) scale(1); }
    50%  { transform: translate(80px, 40px) scale(1.15); }
    100% { transform: translate(-30px, 60px) scale(0.95); }
}

@keyframes orbDrift2 {
    0%   { transform: translate(0, 0) scale(1); }
    50%  { transform: translate(-60px, 30px) scale(1.1); }
    100% { transform: translate(40px, -50px) scale(1.05); }
}

@keyframes orbDrift3 {
    0%   { transform: translate(0, 0) scale(1); }
    50%  { transform: translate(50px, -40px) scale(1.1); }
    100% { transform: translate(-40px, -20px) scale(0.9); }
}

@keyframes orbDrift4 {
    0%   { transform: translate(0, 0) scale(1); }
    50%  { transform: translate(-70px, -30px) scale(1.2); }
    100% { transform: translate(30px, 40px) scale(0.95); }
}

/* Grid overlay (DOM element) */
.grid-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(0, 212, 255, 0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 212, 255, 0.08) 1px, transparent 1px);
    background-size: 60px 60px;
}

html[data-theme="light"] .grid-overlay {
    background-image:
        linear-gradient(rgba(0, 0, 0, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 0, 0, 0.04) 1px, transparent 1px);
}

/* ── Gradient Text Utility ── */

.gradient-text {
    background: linear-gradient(135deg, var(--accent1), var(--accent2));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ── Scroll Reveal Utility ── */

.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}

.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ── App Layout ── */

.mnemos-app {
    display: flex;
    height: 100vh;
    overflow: hidden;
    position: relative;
    z-index: 2;
}

.mnemos-sidebar {
    width: 240px;
    min-width: 240px;
    background: var(--glass);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-right: 1px solid var(--glass-border);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    transition: background var(--ease), border-color var(--ease);
}

.mnemos-main {
    flex: 1;
    overflow-y: auto;
    padding: 2rem 3rem;
}

/* ── Sidebar ── */

.sidebar-header {
    padding: 1.5rem 1.25rem 1rem;
    border-bottom: 1px solid var(--glass-border);
}

.sidebar-brand {
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    background: linear-gradient(135deg, var(--accent1), var(--accent2));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0;
}

.sidebar-subtitle {
    font-size: 0.75rem;
    color: var(--text3);
    letter-spacing: 0.05em;
}

.sidebar-nav {
    display: flex;
    flex-direction: column;
    padding: 0.75rem 0;
    flex: 1;
}

.nav-separator {
    padding: 0.6rem 1rem 0.25rem 1rem;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    opacity: 0.35;
    color: var(--accent1);
    border-top: 1px solid var(--glass-border);
    margin-top: 0.3rem;
}
.nav-separator:first-child {
    border-top: none;
    margin-top: 0;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 1.25rem;
    color: var(--text2);
    font-size: 0.9rem;
    transition: background var(--ease), color var(--ease), border-color var(--ease);
    border-left: 3px solid transparent;
}

.nav-item:hover {
    background: var(--glow1);
    color: var(--text);
}

.nav-item.active {
    background: var(--glow1);
    color: var(--accent1);
    border-left-color: var(--accent1);
}

.nav-icon {
    font-size: 1rem;
    width: 1.2rem;
    text-align: center;
}

/* ── Nav User Section ── */

.nav-user-section {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--glass-border);
    margin-bottom: 0.25rem;
}

.nav-user-info {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.4rem 0.25rem;
    margin-bottom: 0.4rem;
}

.nav-user-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    min-width: 2rem;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent1), var(--accent2));
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.05em;
}

.nav-user-details {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.nav-user-name {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nav-user-email {
    font-size: 0.65rem;
    color: var(--text3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nav-logout-btn {
    width: 100%;
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
}

.nav-logout-btn:hover {
    color: var(--accent4) !important;
}

.nav-guest-section {
    padding: 1rem 0;
}

.nav-login-link {
    font-weight: 600;
}

/* ── Profile Page ── */

.profile-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    max-width: 900px;
}

.profile-grid > .glass-card:last-child {
    grid-column: 1 / -1;
    max-width: 450px;
}

.profile-field {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--glass-border);
}

.profile-field:last-child {
    border-bottom: none;
}

.profile-label {
    font-size: 0.85rem;
    color: var(--text3);
    font-weight: 600;
}

.profile-value {
    font-size: 0.9rem;
    color: var(--text);
}

.form-group {
    margin-bottom: 0.75rem;
}

.form-label {
    display: block;
    font-size: 0.85rem;
    opacity: 0.7;
    margin-bottom: 0.4rem;
}

.form-input {
    width: 100%;
    padding: 0.7rem 1rem;
    background: var(--glass);
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    color: var(--text);
    font-size: 1rem;
    outline: none;
    transition: border-color var(--ease);
}

.form-input:focus {
    border-color: var(--accent1);
}

@media (max-width: 768px) {
    .profile-grid {
        grid-template-columns: 1fr;
    }
    .profile-grid > .glass-card:last-child {
        max-width: none;
    }
}

.sidebar-footer {
    padding: 0.75rem 1.25rem;
    border-top: 1px solid var(--glass-border);
}

.sidebar-phase {
    font-size: 0.7rem;
    color: var(--text3);
    letter-spacing: 0.05em;
}

/* ── Page Header ── */

.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
}

.page-header h1 {
    font-size: 1.5rem;
    font-weight: 600;
}

.header-actions {
    display: flex;
    gap: 0.5rem;
}

/* ── Buttons ── */

.btn-primary {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1rem;
    background: linear-gradient(135deg, var(--accent1), var(--accent2));
    color: #fff;
    border: none;
    border-radius: var(--radius);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: box-shadow var(--ease), transform var(--ease);
}

.btn-primary:hover {
    box-shadow: 0 0 20px var(--glow1), 0 0 40px var(--glow2);
    transform: translateY(-1px);
    color: #fff;
}

.btn-primary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.btn-secondary {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1rem;
    background: transparent;
    color: var(--text);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    font-size: 0.85rem;
    cursor: pointer;
    transition: border-color var(--ease), background var(--ease), box-shadow var(--ease);
}

.btn-secondary:hover {
    border-color: var(--accent1);
    background: var(--glow1);
    box-shadow: 0 0 12px var(--glow1);
    color: var(--text);
}

.btn-secondary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ── Memor Cards (Home list) ── */

.memor-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.memor-card {
    display: block;
    padding: 1rem 1.25rem;
    background: var(--glass);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    transition: transform var(--ease), box-shadow var(--ease), border-color var(--ease);
}

.memor-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 40px var(--glow1);
    border-color: var(--accent1);
    color: var(--text);
}

.memor-card-content {
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--text);
    margin-bottom: 0.5rem;
    white-space: pre-wrap;
    word-break: break-word;
}

.memor-card-meta {
    display: flex;
    gap: 1rem;
    font-size: 0.75rem;
    color: var(--text3);
}

.meta-type {
    padding: 0.1rem 0.4rem;
    background: var(--bg3);
    border-radius: 6px;
}

.meta-strength {
    font-family: var(--font-mono);
    font-size: 0.7rem;
}

/* ── At-Risk Section (Bjork Decay Visual) ── */
.at-risk-section {
    margin-bottom: 2rem;
    padding: 1.25rem;
    background: linear-gradient(135deg, rgba(244,67,54,0.05), rgba(255,152,0,0.05));
    border: 1px solid rgba(244,67,54,0.2);
    border-radius: var(--radius);
}

.at-risk-title {
    font-size: 1rem;
    color: #f44336;
    margin-bottom: 0.25rem;
}

.at-risk-description {
    font-size: 0.75rem;
    color: var(--text3);
    margin-bottom: 0.75rem;
}

.at-risk-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.at-risk-card {
    display: flex;
    align-items: stretch;
    padding: 0.75rem;
    background: var(--glass);
    border-radius: 8px;
    border: 1px solid rgba(244,67,54,0.15);
    transition: transform var(--ease), border-color var(--ease);
}

.at-risk-card:hover {
    transform: translateX(4px);
    border-color: #f44336;
}

.at-risk-indicator {
    width: 4px;
    min-height: 100%;
    border-radius: 2px;
    margin-right: 0.75rem;
    flex-shrink: 0;
}

.at-risk-content {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.at-risk-preview {
    font-size: 0.85rem;
    color: var(--text);
    line-height: 1.4;
}

.at-risk-meta {
    font-size: 0.7rem;
    color: var(--text3);
    font-family: var(--font-mono);
}

/* ── Editor ── */

.editor-container {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.editor-toolbar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.85rem;
}

.editor-toolbar label {
    color: var(--text2);
}

.select-field {
    padding: 0.35rem 0.75rem;
    background: var(--bg2);
    color: var(--text);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    font-size: 0.85rem;
    transition: border-color var(--ease), box-shadow var(--ease);
}

.select-field:focus {
    border-color: var(--accent1);
    box-shadow: 0 0 12px var(--glow1);
    outline: none;
}

.editor-textarea {
    width: 100%;
    padding: 1rem;
    background: var(--bg2);
    color: var(--text);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    font-family: var(--font-mono);
    font-size: 0.9rem;
    line-height: 1.6;
    resize: vertical;
    outline: none;
    transition: border-color var(--ease), box-shadow var(--ease);
}

.editor-textarea:focus {
    border-color: var(--accent1);
    box-shadow: 0 0 12px var(--glow1);
}

.editor-textarea::placeholder {
    color: var(--text3);
}

.editor-actions {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
}

.editor-hint {
    font-size: 0.75rem;
    color: var(--text3);
}

/* ── Strength Panel (Memor Detail) ── */

.strength-panel {
    display: flex;
    gap: 2rem;
    padding: 1rem 1.25rem;
    background: var(--glass);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    margin-bottom: 1.5rem;
}

.strength-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.strength-label {
    font-size: 0.75rem;
    color: var(--text2);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.strength-bar {
    height: 6px;
    background: var(--bg3);
    border-radius: 3px;
    overflow: hidden;
}

.strength-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.3s ease;
}

.ss-fill {
    background: linear-gradient(90deg, var(--ss-color), var(--accent3));
    box-shadow: 0 0 8px var(--glow3);
}

.rs-fill {
    background: linear-gradient(90deg, var(--rs-color), var(--accent1));
    box-shadow: 0 0 8px var(--glow1);
}

.strength-value {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    color: var(--text);
}

/* ── Memor Content View ── */

.memor-content-view {
    margin-bottom: 1.5rem;
}

.memor-text {
    padding: 1rem 1.25rem;
    background: var(--glass);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    font-family: var(--font-mono);
    font-size: 0.9rem;
    line-height: 1.6;
    white-space: pre-wrap;
    word-break: break-word;
    color: var(--text);
}

/* ── Metadata ── */

.memor-metadata {
    padding: 1rem 1.25rem;
    background: var(--glass);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    margin-bottom: 1.5rem;
}

.meta-row {
    display: flex;
    justify-content: space-between;
    padding: 0.3rem 0;
    border-bottom: 1px solid var(--glass-border);
    font-size: 0.85rem;
}

.meta-row:last-child {
    border-bottom: none;
}

.meta-key {
    color: var(--text2);
}

.meta-val {
    color: var(--text);
    font-family: var(--font-mono);
    font-size: 0.8rem;
}

/* ── Backlinks ── */

.backlinks-section {
    margin-bottom: 2rem;
}

.backlinks-section h2 {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
}

.link-list {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.link-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    background: var(--glass);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    font-size: 0.85rem;
    transition: background var(--ease), border-color var(--ease);
}

.link-item:hover {
    background: var(--glow1);
    border-color: var(--accent1);
    color: var(--text);
}

.link-direction {
    font-family: var(--font-mono);
    color: var(--text3);
}

.link-type {
    padding: 0.1rem 0.4rem;
    background: var(--bg3);
    border-radius: 6px;
    font-size: 0.75rem;
}

.link-strength {
    margin-left: auto;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--text3);
}

/* ── Search ── */

.search-container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.search-bar {
    display: flex;
    gap: 0.5rem;
}

.search-input {
    flex: 1;
    padding: 0.6rem 1rem;
    background: var(--bg2);
    color: var(--text);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    font-size: 0.9rem;
    outline: none;
    transition: border-color var(--ease), box-shadow var(--ease);
}

.search-input:focus {
    border-color: var(--accent1);
    box-shadow: 0 0 12px var(--glow1);
}

.search-input::placeholder {
    color: var(--text3);
}

.search-results {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.search-result-card {
    display: block;
    padding: 1rem 1.25rem;
    background: var(--glass);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    transition: transform var(--ease), box-shadow var(--ease), border-color var(--ease);
}

.search-result-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 40px var(--glow1);
    border-color: var(--accent1);
    color: var(--text);
}

.result-content {
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--text);
    margin-bottom: 0.5rem;
    white-space: pre-wrap;
    word-break: break-word;
}

.result-scores {
    display: flex;
    gap: 1rem;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--text3);
}

.score-item {
    padding: 0.1rem 0.4rem;
    background: var(--bg3);
    border-radius: 6px;
}

/* ── Filter Bar (Home) ── */

.filter-bar {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1rem;
    background: var(--glass);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.filter-group {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.filter-label {
    font-size: 0.75rem;
    color: var(--text2);
    white-space: nowrap;
}

.filter-search {
    padding: 0.35rem 0.75rem;
    background: var(--bg2);
    color: var(--text);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    font-size: 0.85rem;
    outline: none;
    min-width: 160px;
    transition: border-color var(--ease), box-shadow var(--ease);
}

.filter-search:focus {
    border-color: var(--accent1);
    box-shadow: 0 0 12px var(--glow1);
}

.filter-search::placeholder {
    color: var(--text3);
}

.filter-count {
    margin-left: auto;
    font-size: 0.75rem;
    color: var(--text3);
    font-family: var(--font-mono);
}

.pagination-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    margin-top: 1.5rem;
    padding: 0.75rem;
    flex-wrap: wrap;
}

.pagination-bar .btn-primary,
.pagination-bar .btn-secondary {
    min-width: 2.2rem;
    padding: 0.35rem 0.65rem;
    font-size: 0.85rem;
}

.pagination-bar .filter-count {
    margin-left: 0.75rem;
}

/* ── Link Form (MemorDetail) ── */

.backlinks-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}

.backlinks-header h2 {
    font-size: 1.1rem;
    font-weight: 600;
}

.btn-small {
    padding: 0.3rem 0.6rem;
    font-size: 0.75rem;
}

.link-form {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: var(--glass);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    margin-bottom: 0.75rem;
}

.link-form-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.link-form-row .filter-label {
    min-width: 140px;
}

.link-form-row .filter-search,
.link-form-row .select-field {
    flex: 1;
}

.link-item-container {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.link-item-container .link-item {
    flex: 1;
}

.link-context {
    font-size: 0.75rem;
    color: var(--text3);
    font-style: italic;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 200px;
}

.btn-link-delete {
    background: none;
    border: none;
    color: var(--text3);
    font-size: 0.75rem;
    cursor: pointer;
    padding: 0.25rem 0.4rem;
    border-radius: 6px;
    transition: background var(--ease), color var(--ease);
}

.btn-link-delete:hover {
    background: var(--glow4);
    color: var(--error);
}

.success-box {
    padding: 0.5rem 0.75rem;
    background: var(--glow3);
    border: 1px solid var(--success);
    border-radius: var(--radius);
    color: var(--success);
    font-size: 0.85rem;
}

/* ── Utility ── */

.loading-text {
    color: var(--text3);
    font-style: italic;
    padding: 2rem 0;
}

.error-box {
    padding: 0.75rem 1rem;
    background: var(--glow4);
    border: 1px solid var(--error);
    border-radius: var(--radius);
    color: var(--error);
    font-size: 0.85rem;
}

.empty-state {
    padding: 3rem;
    text-align: center;
    color: var(--text2);
}

.empty-state p {
    margin-bottom: 1rem;
}

.empty-hint {
    color: var(--text3);
    font-style: italic;
}

/* ── Blazor Error UI ── */

#blazor-error-ui {
    background: var(--error);
    color: white;
    padding: 0.5rem 1rem;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    display: none;
}

#blazor-error-ui .reload, #blazor-error-ui .dismiss {
    color: white;
    margin-left: 1rem;
}

/* ── Graph Visualization ── */

.graph-container {
    width: 100%;
    height: 500px;
    background: var(--glass);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    overflow: hidden;
    position: relative;
}

.graph-container svg {
    display: block;
    width: 100%;
    height: 100%;
}

.graph-node:hover circle {
    stroke: var(--accent1);
    stroke-width: 2.5;
    filter: brightness(1.2) drop-shadow(0 0 6px var(--glow1));
}

.graph-node:hover text {
    fill: var(--text);
}

.graph-legend {
    display: flex;
    gap: 1.5rem;
    align-items: center;
    padding: 0.75rem 0;
    flex-wrap: wrap;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--text2);
    font-size: 0.85rem;
}

.legend-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.legend-episodic { background: var(--accent5); }
.legend-semantic { background: var(--accent1); }
.legend-procedural { background: var(--accent3); }

.legend-hint {
    color: var(--text3);
    font-size: 0.8rem;
    font-style: italic;
    margin-left: auto;
}

/* ── Beliefs ── */

.belief-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.belief-card {
    display: block;
    padding: 1rem 1.25rem;
    background: var(--glass);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    transition: transform var(--ease), box-shadow var(--ease), border-color var(--ease);
}

.belief-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 40px var(--glow2);
    border-color: var(--accent2);
    color: var(--text);
}

.belief-card-statement {
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--text);
    margin-bottom: 0.5rem;
    white-space: pre-wrap;
    word-break: break-word;
}

.belief-card-meta {
    display: flex;
    gap: 1rem;
    font-size: 0.75rem;
    color: var(--text3);
    align-items: center;
    flex-wrap: wrap;
}

.belief-credence {
    font-family: var(--font-mono);
    font-size: 0.7rem;
}

.bias-gap {
    padding: 0.1rem 0.4rem;
    border-radius: 6px;
    font-family: var(--font-mono);
    font-size: 0.7rem;
}

.bias-gap-low {
    background: var(--glow3);
    color: var(--success);
}

.bias-gap-medium {
    background: var(--glow5);
    color: var(--warning);
}

.bias-gap-high {
    background: var(--glow4);
    color: var(--error);
}

.belief-inactive-badge {
    padding: 0.1rem 0.4rem;
    background: rgba(141, 155, 181, 0.15);
    border-radius: 6px;
    font-size: 0.7rem;
    color: var(--text3);
}

/* ── Credence Panel (NewBelief) ── */

.credence-panel {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: var(--glass);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
}

.credence-group {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.credence-label {
    font-size: 0.75rem;
    color: var(--text2);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.credence-slider-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.credence-slider {
    flex: 1;
    height: 6px;
    -webkit-appearance: none;
    appearance: none;
    background: var(--bg3);
    border-radius: 3px;
    outline: none;
}

.credence-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent1), var(--accent2));
    cursor: pointer;
    transition: box-shadow var(--ease);
    box-shadow: 0 0 6px var(--glow1);
}

.credence-slider::-webkit-slider-thumb:hover {
    box-shadow: 0 0 12px var(--glow1), 0 0 20px var(--glow2);
}

.credence-slider::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent1), var(--accent2));
    cursor: pointer;
    border: none;
}

.slider-value {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    color: var(--text);
    min-width: 3rem;
    text-align: right;
}

.credence-hint {
    font-size: 0.7rem;
    color: var(--text3);
    font-style: italic;
}

.bias-gap-preview {
    font-family: var(--font-mono);
    font-size: 1rem;
    font-weight: 600;
}

.bias-gap-text-low {
    color: var(--success);
}

.bias-gap-text-medium {
    color: var(--warning);
}

.bias-gap-text-high {
    color: var(--error);
}

/* ── Credence Fills (BeliefDetail) ── */

.credence-ideal-fill {
    background: linear-gradient(90deg, var(--accent1), var(--accent2));
}

.credence-actual-fill {
    background: var(--accent2);
}

.bias-gap-fill-low {
    background: var(--success);
}

.bias-gap-fill-medium {
    background: var(--warning);
}

.bias-gap-fill-high {
    background: var(--error);
}

/* ── Evidence List (BeliefDetail) ── */

.evidence-list {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.evidence-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    background: var(--glass);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    font-size: 0.85rem;
}

.evidence-direction {
    padding: 0.1rem 0.5rem;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
}

.evidence-supporting {
    background: var(--glow3);
    color: var(--success);
}

.evidence-contradicting {
    background: var(--glow4);
    color: var(--error);
}

.evidence-neutral {
    background: rgba(141, 155, 181, 0.15);
    color: var(--text3);
}

.evidence-strength {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--text2);
}

.evidence-delta {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--text3);
    margin-left: auto;
}

/* ── Schemas ── */

.schema-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.schema-card {
    display: block;
    padding: 1rem 1.25rem;
    background: var(--glass);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    transition: transform var(--ease), box-shadow var(--ease), border-color var(--ease);
}

.schema-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 40px var(--glow3);
    border-color: var(--accent3);
    color: var(--text);
}

.schema-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.4rem;
}

.schema-card-name {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text);
}

.schema-card-description {
    font-size: 0.85rem;
    color: var(--text2);
    margin-bottom: 0.5rem;
    line-height: 1.4;
}

.schema-card-meta {
    display: flex;
    gap: 1rem;
    font-size: 0.75rem;
    color: var(--text3);
    align-items: center;
    flex-wrap: wrap;
}

.schema-stability {
    font-family: var(--font-mono);
    font-size: 0.7rem;
}

.schema-counts {
    font-family: var(--font-mono);
    font-size: 0.7rem;
}

/* Stage Badges */
.stage-badge {
    padding: 0.15rem 0.5rem;
    border-radius: 6px;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.03em;
}

.stage-nascent {
    background: var(--glow2);
    color: var(--accent2);
}

.stage-developing {
    background: var(--glow1);
    color: var(--accent1);
}

.stage-stable {
    background: var(--glow3);
    color: var(--success);
}

.stage-rigid {
    background: var(--glow5);
    color: var(--warning);
}

.stage-obsolete {
    background: rgba(141, 155, 181, 0.15);
    color: var(--text3);
}

/* Schema Evolution Progress Track */
.schema-evolution-panel {
    padding: 1rem 1.25rem;
    background: var(--glass);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    margin-bottom: 1.5rem;
}

.schema-stage-track {
    display: flex;
    align-items: center;
    margin-top: 0.75rem;
    padding: 0 0.5rem;
}

.schema-stage-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
}

.stage-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid var(--glass-border);
    background: var(--bg3);
    transition: all var(--ease);
}

.stage-step-label {
    font-size: 0.65rem;
    color: var(--text3);
    white-space: nowrap;
}

.stage-step-current .stage-dot {
    background: var(--accent1);
    border-color: var(--accent1);
    box-shadow: 0 0 12px var(--glow1);
}

.stage-step-current .stage-step-label {
    color: var(--accent1);
    font-weight: 600;
}

.stage-step-completed .stage-dot {
    background: var(--success);
    border-color: var(--success);
}

.stage-step-completed .stage-step-label {
    color: var(--success);
}

.schema-stage-connector {
    flex: 1;
    height: 2px;
    background: var(--glass-border);
    margin: 0 0.25rem;
    margin-bottom: 1.2rem;
}

.connector-completed {
    background: var(--success);
}

.connector-inactive {
    background: var(--glass-border);
}

/* Schema Detail extras */
.schema-count-value {
    font-size: 1.1rem;
    font-weight: 600;
}

.schema-beliefs-list {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.schema-belief-item {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    background: var(--glass);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    font-size: 0.85rem;
}

.schema-belief-key {
    font-weight: 600;
    color: var(--accent1);
    min-width: 120px;
    font-size: 0.8rem;
}

.schema-belief-value {
    color: var(--text);
    flex: 1;
}

/* ── Decisions ── */

.decision-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--glass-border);
}

.decision-tab {
    padding: 0.6rem 1.25rem;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--text2);
    font-size: 0.9rem;
    cursor: pointer;
    transition: color var(--ease), border-color var(--ease);
}

.decision-tab:hover {
    color: var(--text);
}

.decision-tab-active {
    color: var(--accent1);
    border-bottom-color: var(--accent1);
}

.decision-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.decision-card {
    display: block;
    padding: 1rem 1.25rem;
    background: var(--glass);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    transition: transform var(--ease), box-shadow var(--ease), border-color var(--ease);
}

.decision-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 40px var(--glow5);
    border-color: var(--accent5);
    color: var(--text);
}

.decision-card-description {
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--text);
    margin-bottom: 0.5rem;
    white-space: pre-wrap;
    word-break: break-word;
}

.decision-card-meta {
    display: flex;
    gap: 1rem;
    font-size: 0.75rem;
    color: var(--text3);
    align-items: center;
    flex-wrap: wrap;
}

/* Reasoning system badges */

.reasoning-badge {
    padding: 0.1rem 0.5rem;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
}

.reasoning-system1 {
    background: var(--glow3);
    color: var(--success);
}

.reasoning-system2 {
    background: var(--glow1);
    color: var(--accent1);
}

.reasoning-transitioning {
    background: var(--glow5);
    color: var(--warning);
}

/* Decision status badges */

.decision-status-badge {
    padding: 0.1rem 0.5rem;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
}

.decision-status-pending {
    background: var(--glow5);
    color: var(--warning);
}

.decision-status-resolved {
    background: var(--glow3);
    color: var(--success);
}

/* Satisfaction bars (inline in list) */

.decision-satisfaction-inline {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.satisfaction-bar-mini {
    width: 50px;
    height: 4px;
    background: var(--bg3);
    border-radius: 2px;
    overflow: hidden;
}

.satisfaction-fill-mini {
    display: block;
    height: 100%;
    border-radius: 2px;
    transition: width 0.3s ease;
}

.satisfaction-value-mini {
    font-family: var(--font-mono);
    font-size: 0.7rem;
}

/* Satisfaction colors */

.satisfaction-low {
    background: var(--error);
}

.satisfaction-medium {
    background: var(--warning);
}

.satisfaction-high {
    background: var(--success);
}

.satisfaction-fill-low {
    background: var(--error);
}

.satisfaction-fill-medium {
    background: var(--warning);
}

.satisfaction-fill-high {
    background: var(--success);
}

.satisfaction-text-low {
    color: var(--error);
}

.satisfaction-text-medium {
    color: var(--warning);
}

.satisfaction-text-high {
    color: var(--success);
}

/* Pattern cards */

.pattern-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.pattern-card {
    padding: 1rem 1.25rem;
    background: var(--glass);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
}

.pattern-card-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.pattern-domain {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text);
    padding: 0.1rem 0.5rem;
    background: var(--bg3);
    border-radius: 6px;
}

.pattern-card-description {
    font-size: 0.9rem;
    color: var(--text2);
    margin-bottom: 0.75rem;
    line-height: 1.5;
}

.pattern-card-stats {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.pattern-stat {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.pattern-stat-label {
    font-size: 0.65rem;
    color: var(--text3);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.pattern-stat-value {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    color: var(--text);
}

/* Success rate colors */

.success-rate-low {
    color: var(--error);
}

.success-rate-medium {
    color: var(--warning);
}

.success-rate-high {
    color: var(--success);
}

/* ════════════════════════════════════════════════
   Emotional States (Damasio)
   ════════════════════════════════════════════════ */

.emotion-analyze-section {
    background: var(--glass);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    padding: 1.2rem;
    margin-bottom: 1.5rem;
}

.emotion-analyze-section h3 {
    font-size: 0.9rem;
    color: var(--text2);
    margin-bottom: 0.8rem;
}

.emotion-form {
    display: flex;
    gap: 0.8rem;
    align-items: flex-end;
}

.emotion-form .text-area-field {
    flex: 1;
    background: var(--bg2);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    color: var(--text);
    padding: 0.6rem;
    font-family: var(--font-sans);
    resize: vertical;
    transition: border-color var(--ease), box-shadow var(--ease);
}

.emotion-form .text-area-field:focus {
    border-color: var(--accent1);
    box-shadow: 0 0 12px var(--glow1);
    outline: none;
}

.emotion-section { margin-bottom: 1.5rem; }

.emotion-section h3 {
    font-size: 0.9rem;
    color: var(--text2);
    margin-bottom: 0.8rem;
}

.emotion-card {
    background: var(--glass);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    padding: 1.2rem;
}

.emotion-card-highlight { border-color: var(--accent1); box-shadow: 0 0 12px var(--glow1); }

.emotion-vad { display: flex; flex-direction: column; gap: 0.6rem; margin-bottom: 1rem; }
.vad-item { display: flex; align-items: center; gap: 0.8rem; }
.vad-label { width: 80px; font-size: 0.85rem; color: var(--text2); }
.vad-bar-container { flex: 1; height: 8px; background: var(--bg3); border-radius: 4px; overflow: hidden; }
.vad-bar { height: 100%; border-radius: 4px; transition: width 0.3s ease; }
.vad-value { width: 50px; text-align: right; font-family: var(--font-mono); font-size: 0.85rem; }
.vad-positive { background: var(--success); color: var(--success); }
.vad-negative { background: var(--error); color: var(--error); }
.vad-neutral { background: var(--warning); color: var(--warning); }
.vad-arousal { background: var(--accent2); }
.vad-dominance { background: var(--accent1); }

.emotion-meta {
    display: flex;
    gap: 1rem;
    align-items: center;
    font-size: 0.8rem;
    color: var(--text3);
}

/* ════════════════════════════════════════════════
   Predictions (Friston)
   ════════════════════════════════════════════════ */

.prediction-list { display: flex; flex-direction: column; gap: 0.8rem; }

.prediction-card {
    background: var(--glass);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    padding: 1rem;
}

.prediction-resolved { opacity: 0.8; }

.prediction-content {
    font-size: 0.95rem;
    margin-bottom: 0.8rem;
    line-height: 1.5;
}

.prediction-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    align-items: center;
    font-size: 0.8rem;
}

.prediction-confidence { color: var(--text2); }
.prediction-status-resolved { color: var(--success); }
.prediction-status-pending { color: var(--warning); }
.prediction-surprise { color: var(--error); font-weight: 600; }
.prediction-match { color: var(--success); }

.prediction-errors {
    margin-top: 0.8rem;
    padding-top: 0.8rem;
    border-top: 1px solid var(--glass-border);
}

.prediction-error-item {
    display: flex;
    gap: 1rem;
    font-size: 0.8rem;
    color: var(--text2);
    padding: 0.3rem 0;
}

.error-magnitude { color: var(--error); }
.error-boost { color: var(--success); }

.empty-state-hint {
    font-size: 0.85rem;
    color: var(--text3);
    margin-top: 0.5rem;
}

/* ════════════════════════════════════════════════
   Reconstructions (Reconstructive Memory)
   ════════════════════════════════════════════════ */

.page-description {
    color: var(--text2);
    font-size: 0.9rem;
    margin-bottom: 1.5rem;
    line-height: 1.5;
    max-width: 800px;
}

.reconstruction-list { display: flex; flex-direction: column; gap: 0.8rem; }

.reconstruction-card {
    background: var(--glass);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    padding: 1.2rem;
}

.reconstruction-high-drift { border-left: 3px solid var(--error); }

.reconstruction-annotation {
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 1rem;
}

.reconstruction-metrics {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin-bottom: 0.8rem;
}

.metric-item { display: flex; flex-direction: column; gap: 0.2rem; }
.metric-label { font-size: 0.75rem; color: var(--text3); text-transform: uppercase; }
.metric-value { font-family: var(--font-mono); font-size: 0.9rem; }
.drift-low { color: var(--success); }
.drift-medium { color: var(--warning); }
.drift-high { color: var(--error); }
.shift-positive { color: var(--success); }
.shift-negative { color: var(--error); }
.shift-neutral { color: var(--text2); }

.reconstruction-footer {
    display: flex;
    gap: 1rem;
    align-items: center;
    font-size: 0.8rem;
    color: var(--text3);
}

/* ════════════════════════════════════════════════
   Narratives (Narrative Self)
   ════════════════════════════════════════════════ */

.narrative-readiness-warning {
    background: var(--glow5);
    border: 1px solid var(--warning);
    border-radius: var(--radius);
    padding: 0.8rem 1.2rem;
    margin-bottom: 1rem;
    color: var(--warning);
    font-size: 0.9rem;
}

.narrative-actions { margin-bottom: 1rem; }

.episode-list { display: flex; flex-direction: column; gap: 0.8rem; }

.episode-card {
    background: var(--glass);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    padding: 1.2rem;
}

.episode-acknowledged { opacity: 0.7; }

.episode-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.episode-type {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    padding: 0.15rem 0.5rem;
    border-radius: 6px;
}

.episode-type-turning { background: var(--glow1); color: var(--accent1); }
.episode-type-chapter { background: var(--glow3); color: var(--success); }
.episode-type-theme { background: var(--glow2); color: var(--accent2); }
.episode-type-contradiction { background: var(--glow4); color: var(--error); }
.episode-type-identity { background: var(--glow5); color: var(--warning); }
.episode-type-default { background: var(--bg3); color: var(--text2); }

.episode-confidence { font-size: 0.8rem; color: var(--text3); }
.episode-title { font-size: 1rem; font-weight: 600; margin-bottom: 0.5rem; }
.episode-description { font-size: 0.9rem; color: var(--text2); line-height: 1.5; margin-bottom: 0.8rem; }

.episode-contradiction {
    background: var(--glow4);
    border-left: 3px solid var(--error);
    padding: 0.5rem 0.8rem;
    font-size: 0.85rem;
    color: var(--text2);
    margin-bottom: 0.8rem;
    border-radius: 0 var(--radius) var(--radius) 0;
}

.episode-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    align-items: center;
    font-size: 0.8rem;
    color: var(--text3);
}

.episode-ack-badge { color: var(--success); font-weight: 600; }
.episode-response { font-style: italic; }

.episode-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.8rem;
    padding-top: 0.8rem;
    border-top: 1px solid var(--glass-border);
}

.btn-small { font-size: 0.8rem; padding: 0.3rem 0.6rem; }

.narrative-list { display: flex; flex-direction: column; gap: 1rem; }

.narrative-card {
    background: var(--glass);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    padding: 1.2rem;
}

.narrative-edited { border-left: 3px solid var(--accent1); }

.narrative-period {
    font-size: 0.8rem;
    color: var(--text3);
    text-transform: uppercase;
    margin-bottom: 0.5rem;
}

.narrative-text {
    font-size: 0.95rem;
    line-height: 1.7;
    margin-bottom: 1rem;
    white-space: pre-line;
}

.narrative-themes, .narrative-patterns {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
    margin-bottom: 0.5rem;
}

.themes-label, .patterns-label {
    font-size: 0.8rem;
    color: var(--text3);
    margin-right: 0.3rem;
}

.theme-tag, .pattern-tag {
    font-size: 0.75rem;
    padding: 0.15rem 0.5rem;
    border-radius: 6px;
    background: var(--bg3);
    color: var(--text2);
}

.theme-tag { border: 1px solid rgba(124, 58, 237, 0.3); }
.pattern-tag { border: 1px solid rgba(0, 212, 255, 0.3); }

.narrative-footer {
    display: flex;
    gap: 1rem;
    align-items: center;
    font-size: 0.8rem;
    color: var(--text3);
}

.narrative-edited-badge { color: var(--accent1); font-weight: 600; }
.narrative-episodes { color: var(--text2); }

/* ════════════════════════════════════════════════
   Accessibility — Focus & Contrast
   ════════════════════════════════════════════════ */

/* Skip to content link (keyboard nav) */
.skip-to-content {
    position: absolute;
    top: -100%;
    left: 0;
    padding: 0.75rem 1.5rem;
    background: linear-gradient(135deg, var(--accent1), var(--accent2));
    color: #fff;
    font-weight: 600;
    z-index: 9999;
    border-radius: 0 0 var(--radius) 0;
    transition: top 0.2s;
}

.skip-to-content:focus {
    top: 0;
}

/* Global focus-visible styles for keyboard navigation */
*:focus-visible {
    outline: 2px solid var(--accent1);
    outline-offset: 2px;
}

/* Remove outline for mouse clicks but keep for keyboard */
*:focus:not(:focus-visible) {
    outline: none;
}

/* Specific focus styles for buttons and links */
.btn-primary:focus-visible,
.btn-secondary:focus-visible {
    outline: 2px solid var(--accent2);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px var(--glow1);
}

.nav-item:focus-visible {
    outline: 2px solid var(--accent1);
    outline-offset: -2px;
    background: var(--glow1);
}

/* Form elements focus */
.select-field:focus-visible,
.filter-search:focus-visible,
.credence-slider:focus-visible {
    outline: 2px solid var(--accent1);
    outline-offset: 2px;
}

/* Decision tab focus */
.decision-tab:focus-visible {
    outline: 2px solid var(--accent1);
    outline-offset: -2px;
}

/* Card focus for keyboard navigation */
.memor-card:focus-visible,
.belief-card:focus-visible,
.schema-card:focus-visible,
.decision-card:focus-visible,
.prediction-card:focus-visible,
.episode-card:focus-visible,
.reconstruction-card:focus-visible,
.search-result-card:focus-visible {
    outline: 2px solid var(--accent1);
    outline-offset: 2px;
    border-color: var(--accent1);
}

/* Delete button focus */
.btn-link-delete:focus-visible {
    outline: 2px solid var(--error);
    outline-offset: 1px;
}

/* ════════════════════════════════════════════════
   Visual Polish — Transitions & Animations
   ════════════════════════════════════════════════ */

/* Card hover (base transition set per-card above with --ease) */
.memor-card,
.belief-card,
.schema-card,
.decision-card,
.prediction-card,
.episode-card,
.narrative-card,
.reconstruction-card,
.search-result-card {
    transition: transform var(--ease), box-shadow var(--ease), border-color var(--ease), background var(--ease);
}

.memor-card:hover,
.prediction-card:hover,
.episode-card:hover,
.narrative-card:hover,
.reconstruction-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 40px var(--glow1);
}

/* Loading spinner animation */
@keyframes mnemos-pulse {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}

.loading-text {
    animation: mnemos-pulse 1.5s ease-in-out infinite;
}

/* Smooth section spacing */
.emotion-section,
.backlinks-section,
.memor-metadata,
.memor-content-view {
    margin-top: 1.5rem;
}

/* Consistent spacing for page description */
.page-description + .filter-bar {
    margin-top: 0;
}

/* Smooth fade for error and success boxes */
.error-box,
.success-box {
    animation: mnemos-fadeIn 0.2s ease-out;
}

@keyframes mnemos-fadeIn {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Empty state icon */
.empty-state {
    padding: 3rem 2rem;
}

.empty-state::before {
    content: "";
    display: block;
    width: 48px;
    height: 48px;
    margin: 0 auto 1rem;
    border: 2px dashed var(--glass-border);
    border-radius: 50%;
    opacity: 0.5;
}

/* ════════════════════════════════════════════════
   Theme Toggle
   ════════════════════════════════════════════════ */

.theme-toggle {
    position: fixed;
    top: 0.75rem;
    right: 0.75rem;
    z-index: 1001;
    background: var(--glass);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    color: var(--text);
    padding: 0.45rem 0.65rem;
    font-size: 1.1rem;
    cursor: pointer;
    line-height: 1;
    transition: background var(--ease), border-color var(--ease), box-shadow var(--ease);
}

.theme-toggle:hover {
    border-color: var(--accent1);
    box-shadow: 0 0 12px var(--glow1);
}

.theme-toggle::before {
    content: var(--theme-toggle-icon);
}

/* ════════════════════════════════════════════════
   Table Responsive Wrapper
   ════════════════════════════════════════════════ */

.table-responsive {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

table th,
table td {
    padding: 0.5rem 0.75rem;
    text-align: left;
    border-bottom: 1px solid var(--glass-border);
    white-space: nowrap;
}

table th {
    color: var(--text2);
    font-weight: 600;
    background: var(--bg3);
}

table td {
    color: var(--text);
}

table tr:hover td {
    background: var(--glow1);
}

/* ════════════════════════════════════════════════
   Graph Responsive — Touch Support
   ════════════════════════════════════════════════ */

.graph-container svg {
    touch-action: none;
}

/* Larger hit areas on touch devices */
@media (pointer: coarse) {
    .graph-node circle {
        stroke-width: 3px;
    }
}

/* ════════════════════════════════════════════════
   Responsive — Mobile Menu Toggle
   ════════════════════════════════════════════════ */

.sidebar-toggle {
    display: none;
    position: fixed;
    top: 0.75rem;
    left: 0.75rem;
    z-index: 1001;
    background: var(--glass);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    color: var(--text);
    padding: 0.5rem 0.7rem;
    font-size: 1.2rem;
    cursor: pointer;
    line-height: 1;
    transition: background var(--ease), border-color var(--ease);
}

.sidebar-toggle:hover {
    border-color: var(--accent1);
    box-shadow: 0 0 12px var(--glow1);
}

/* ════════════════════════════════════════════════
   Responsive — Tablet (max 768px)
   ════════════════════════════════════════════════ */

@media (max-width: 768px) {
    .mnemos-main {
        padding: 1.5rem 1.5rem;
        max-width: 100%;
    }

    .mnemos-sidebar {
        position: fixed;
        top: 0;
        left: -260px;
        height: 100vh;
        height: 100dvh;
        z-index: 1000;
        transition: left 0.25s ease;
        box-shadow: 4px 0 16px rgba(0, 0, 0, 0.5);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }

    .mnemos-sidebar.sidebar-open {
        left: 0;
    }

    .sidebar-toggle {
        display: block;
    }

    /* Overlay when sidebar is open */
    .sidebar-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 999;
    }

    .sidebar-overlay.sidebar-open {
        display: block;
    }

    /* Page header stacks on tablet */
    .page-header {
        flex-wrap: wrap;
        gap: 0.75rem;
    }

    .page-header h1 {
        font-size: 1.3rem;
    }

    /* Filter bar wraps */
    .filter-bar {
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
    }

    .filter-count {
        margin-left: 0;
        text-align: right;
    }

    .filter-search {
        min-width: 0;
        width: 100%;
    }

    /* Sidebar nav compact for mobile — easier to tap, fits more items */
    .nav-item {
        padding: 0.5rem 1rem;
        font-size: 0.85rem;
        min-height: 40px;
    }

    .nav-separator {
        padding: 0.4rem 1rem 0.2rem;
        margin-top: 0.15rem;
    }

    .sidebar-header {
        padding: 1rem 1rem 0.75rem;
    }

    .sidebar-footer {
        padding: 0.5rem 1rem;
    }

    /* Strength panel stacks */
    .strength-panel {
        flex-direction: column;
        gap: 1rem;
    }

    /* VAD items stay horizontal but reduce gap */
    .emotion-vad {
        gap: 0.4rem;
    }

    .vad-label {
        width: 70px;
        font-size: 0.8rem;
    }

    /* Meta rows responsive */
    .meta-row {
        flex-direction: column;
        gap: 0.15rem;
        padding: 0.5rem 0;
    }

    .meta-val {
        word-break: break-all;
    }

    /* Reconstruction metrics wrap */
    .reconstruction-metrics {
        gap: 1rem;
    }

    /* Pattern stats wrap */
    .pattern-card-stats {
        gap: 1rem;
    }

    /* Link form row stacks */
    .link-form-row {
        flex-direction: column;
        align-items: stretch;
    }

    .link-form-row .filter-label {
        min-width: auto;
    }

    /* Emotion form stacks */
    .emotion-form {
        flex-direction: column;
    }

    /* Search bar */
    .search-bar {
        flex-direction: column;
    }

    /* Episode actions wrap */
    .episode-actions {
        flex-wrap: wrap;
    }

    /* Decision tabs scroll */
    .decision-tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .decision-tab {
        white-space: nowrap;
        flex-shrink: 0;
    }

    /* Graph container */
    .graph-container {
        height: 350px;
    }

    /* Legend wraps */
    .graph-legend {
        gap: 0.75rem;
    }

    .legend-hint {
        margin-left: 0;
        width: 100%;
    }
}

/* ════════════════════════════════════════════════
   Responsive — Mobile (max 480px)
   ════════════════════════════════════════════════ */

@media (max-width: 480px) {
    .mnemos-main {
        padding: 1rem 0.75rem;
        padding-top: 3.5rem; /* Space for hamburger button */
    }

    .page-header h1 {
        font-size: 1.15rem;
    }

    /* Cards reduce padding */
    .memor-card,
    .belief-card,
    .schema-card,
    .decision-card,
    .prediction-card,
    .episode-card,
    .narrative-card,
    .reconstruction-card,
    .emotion-card,
    .credence-panel,
    .memor-metadata,
    .link-form {
        padding: 0.75rem 0.85rem;
    }

    /* VAD bars stack labels */
    .vad-item {
        flex-wrap: wrap;
    }

    .vad-label {
        width: 100%;
        font-size: 0.75rem;
    }

    .vad-bar-container {
        flex: 1;
        min-width: 0;
    }

    .vad-value {
        width: 45px;
        font-size: 0.75rem;
    }

    /* Buttons full-width on mobile */
    .btn-primary,
    .btn-secondary {
        width: 100%;
        justify-content: center;
    }

    .header-actions {
        width: 100%;
    }

    .header-actions .btn-secondary,
    .header-actions .btn-primary {
        flex: 1;
    }

    .editor-actions {
        flex-direction: column;
    }

    /* Evidence items stack */
    .evidence-item {
        flex-wrap: wrap;
        gap: 0.4rem;
    }

    .evidence-delta {
        margin-left: 0;
    }

    /* Belief meta wraps */
    .belief-card-meta,
    .schema-card-meta,
    .decision-card-meta,
    .prediction-meta,
    .emotion-meta,
    .reconstruction-footer,
    .episode-meta,
    .narrative-footer {
        flex-direction: column;
        gap: 0.3rem;
        align-items: flex-start;
    }

    /* Schema stage track scrolls horizontally */
    .schema-stage-track {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 0.5rem;
    }

    /* Credence slider row */
    .credence-slider-row {
        flex-wrap: wrap;
    }

    .slider-value {
        min-width: 100%;
        text-align: left;
    }

    /* Link context wider */
    .link-context {
        max-width: 100%;
    }

    /* Graph smaller */
    .graph-container {
        height: 250px;
    }

    /* Satisfaction bar hidden on small screens, show value only */
    .satisfaction-bar-mini {
        display: none;
    }

    /* Result scores stack */
    .result-scores {
        flex-direction: column;
        gap: 0.25rem;
    }

    /* Memor card meta wraps */
    .memor-card-meta {
        flex-direction: column;
        gap: 0.25rem;
    }

    /* Tables: make them scrollable */
    table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Cognitive Flow responsive */
    .cognitive-flow-wrapper {
        flex-direction: column;
    }

    .cognitive-flow-container {
        height: 500px;
    }

    .cf-detail-panel {
        position: relative;
        width: 100%;
        max-width: 100%;
        right: auto;
        top: auto;
        height: auto;
        max-height: 400px;
        border-radius: var(--radius);
        border-left: none;
        border-top: 1px solid var(--glass-border);
    }

    .cf-detail-visible {
        display: block;
    }

    .cf-legend {
        flex-wrap: wrap;
    }

    .cf-legend-hint {
        width: 100%;
    }
}

/* ════════════════════════════════════════════════
   Cognitive Flow — Interactive Pipeline Visualization
   ════════════════════════════════════════════════ */

.cognitive-flow-wrapper {
    display: flex;
    position: relative;
    gap: 0;
    min-height: 600px;
}

.cognitive-flow-container {
    flex: 1;
    position: relative;
    background: var(--bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    overflow: hidden;
    min-height: 600px;
    cursor: default;
}

.cognitive-flow-container svg {
    display: block;
    width: 100%;
    height: 100%;
    touch-action: none;
}

/* Tooltip (hover) */
.cf-tooltip {
    position: absolute;
    max-width: 280px;
    background: var(--glass);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    padding: 0.8rem 1rem;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease;
    z-index: 100;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

.cf-tooltip-title {
    font-size: 0.95rem;
    font-weight: 700;
    margin-bottom: 0.3rem;
}

.cf-tooltip-theory {
    font-size: 0.75rem;
    font-style: italic;
    color: var(--text3);
    margin-bottom: 0.4rem;
}

.cf-tooltip-desc {
    font-size: 0.8rem;
    color: var(--text2);
    line-height: 1.4;
}

/* Detail Panel (click) */
.cf-detail-panel {
    position: absolute;
    right: 0;
    top: 0;
    width: 360px;
    max-width: 40%;
    height: 100%;
    background: var(--glass);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-left: 1px solid var(--glass-border);
    border-radius: 0 var(--radius) var(--radius) 0;
    padding: 1.5rem;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 50;
    box-shadow: -8px 0 32px rgba(0, 0, 0, 0.3);
}

.cf-detail-panel.cf-detail-visible {
    transform: translateX(0);
}

.cf-detail-close {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    background: none;
    border: none;
    color: var(--text2);
    font-size: 1.4rem;
    cursor: pointer;
    line-height: 1;
    padding: 0.2rem 0.5rem;
    border-radius: 6px;
    transition: color var(--ease), background var(--ease);
}

.cf-detail-close:hover {
    color: var(--text);
    background: var(--bg3);
}

.cf-detail-icon {
    font-size: 2.5rem;
    text-align: center;
    margin-bottom: 0.5rem;
}

.cf-detail-title {
    font-size: 1.2rem;
    font-weight: 700;
    text-align: center;
    margin-bottom: 0.5rem;
}

.cf-detail-theory {
    font-size: 0.8rem;
    font-style: italic;
    color: var(--text3);
    text-align: center;
    margin-bottom: 1rem;
    line-height: 1.4;
}

.cf-detail-divider {
    height: 1px;
    background: var(--glass-border);
    margin: 1rem 0;
}

.cf-detail-desc {
    font-size: 0.88rem;
    color: var(--text2);
    line-height: 1.7;
}

.cf-detail-section-title {
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--text3);
    margin-bottom: 0.6rem;
}

.cf-detail-usecase {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    font-size: 0.85rem;
    color: var(--text2);
    line-height: 1.4;
}

.cf-detail-tag {
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.1rem 0.5rem;
    border-radius: 6px;
    white-space: nowrap;
    flex-shrink: 0;
}

.cf-detail-metrics {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    color: var(--accent1);
    line-height: 1.6;
    word-break: break-word;
}

.cf-detail-keyinsight {
    background: linear-gradient(135deg, rgba(108, 99, 255, 0.1), rgba(255, 101, 132, 0.1));
    border: 1px solid rgba(108, 99, 255, 0.3);
    border-radius: 8px;
    padding: 0.75rem 1rem;
    margin: 0.75rem 0;
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--text);
    line-height: 1.5;
}

.cf-detail-formula {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    color: var(--accent3, #06d6a0);
    background: var(--bg3, rgba(26, 26, 46, 0.8));
    border-left: 3px solid var(--accent1, #00d4ff);
    border-radius: 0 8px 8px 0;
    padding: 0.75rem 1rem;
    line-height: 1.7;
    overflow-x: auto;
    white-space: pre-wrap;
    word-break: break-word;
}

/* Legend */
.cf-legend {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    padding: 0.8rem 1.2rem;
    margin-top: 0.8rem;
    background: var(--glass);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    font-size: 0.8rem;
    color: var(--text2);
}

.cf-legend-item {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.cf-legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
}

.cf-legend-hint {
    margin-left: auto;
    font-size: 0.75rem;
    color: var(--text3);
}

/* SVG Animations */
@keyframes cf-pulse-opacity {
    0%, 100% { stroke-opacity: 0.15; }
    50% { stroke-opacity: 0.5; }
}

.cf-pulse-ring {
    animation: cf-node-pulse 2.5s ease-in-out infinite;
    transform-origin: center;
}

@keyframes cf-node-pulse {
    0% { r: inherit; opacity: 0.5; }
    50% { opacity: 0; }
    100% { r: inherit; opacity: 0.5; }
}

/* Node hover glow effect via CSS */
.cf-node:hover circle {
    transition: all 0.2s ease;
}

/* ── PWA / Mobile Touch Optimizations ── */
@media (max-width: 480px) {
    .page-header {
        flex-direction: column;
        gap: 0.75rem;
        align-items: flex-start;
    }

    .page-header .btn-primary {
        width: 100%;
        text-align: center;
    }

    .filter-bar {
        flex-direction: column;
        gap: 0.5rem;
    }

    .filter-group {
        width: 100%;
    }

    .filter-search {
        width: 100%;
    }

    .memor-card {
        padding: 0.75rem;
    }

    .at-risk-section {
        padding: 0.75rem;
    }

    .at-risk-card {
        padding: 0.5rem;
    }
}

/* Touch-friendly tap targets (minimum 44px) */
@media (pointer: coarse) {
    .memor-card {
        min-height: 44px;
        padding: 0.875rem 1rem;
    }

    .btn-primary,
    .btn-secondary {
        min-height: 44px;
        min-width: 44px;
        padding: 0.625rem 1.25rem;
    }

    .select-field {
        min-height: 44px;
    }

    .pagination-bar button {
        min-width: 44px;
        min-height: 44px;
    }

    .at-risk-card {
        min-height: 44px;
    }
}

/* Safe area insets for notched devices */
@supports (padding-top: env(safe-area-inset-top)) {
    body {
        padding-top: env(safe-area-inset-top);
        padding-bottom: env(safe-area-inset-bottom);
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
    }
}