/* ==========================================================================
   ReimagineAGI — Central Projects Command Center & Repository
   Design System & Stylesheet
   ========================================================================== */

:root {
    --bg-base: #07090e;
    --bg-surface: #0d111a;
    --bg-card: rgba(16, 22, 35, 0.75);
    --bg-card-hover: rgba(23, 32, 51, 0.9);
    --bg-glass: rgba(13, 17, 26, 0.85);

    --text-primary: #f8fafc;
    --text-secondary: #94a3b8;
    --text-muted: #64748b;

    --border-subtle: rgba(255, 255, 255, 0.08);
    --border-hover: rgba(0, 243, 255, 0.35);

    /* Category Themes */
    --cat-fintech: #00f3ff;
    --cat-fintech-glow: rgba(0, 243, 255, 0.2);
    --cat-ops: #f59e0b;
    --cat-ops-glow: rgba(245, 158, 11, 0.2);
    --cat-ai: #10b981;
    --cat-ai-glow: rgba(16, 185, 129, 0.2);
    --cat-personal: #c084fc;
    --cat-personal-glow: rgba(192, 132, 252, 0.2);
    --cat-esg: #84cc16;
    --cat-esg-glow: rgba(132, 204, 22, 0.2);
    --cat-labs: #f43f5e;
    --cat-labs-glow: rgba(244, 63, 94, 0.2);

    /* General Accents */
    --primary: #00f3ff;
    --primary-glow: rgba(0, 243, 255, 0.3);
    --secondary: #a855f7;
    --secondary-glow: rgba(168, 85, 247, 0.3);

    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-full: 9999px;

    --font-heading: 'Outfit', sans-serif;
    --font-body: 'Plus Jakarta Sans', sans-serif;
    --font-mono: 'JetBrains Mono', monospace;

    --transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    --shadow-card: 0 8px 32px -4px rgba(0, 0, 0, 0.5);
    --shadow-glow: 0 0 25px rgba(0, 243, 255, 0.15);
}

/* Reset & Base */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Form controls do not inherit type from their parent, so every button on this page — the HUD
   actions, the category tabs, the card menus, the modal footers — was being drawn in the browser's
   default interface font while the text around it used Plus Jakarta Sans. Only font-family is
   inherited here: the buttons set their own sizes and several of them size an icon that way. The
   other applications in this repository get the same effect from a font-family on their * reset. */
button, input, select, textarea {
    font-family: inherit;
}

body {
    background-color: var(--bg-base);
    color: var(--text-primary);
    font-family: var(--font-body);
    min-height: 100vh;
    overflow-x: hidden;
    position: relative;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

/* Ambient Background Light Mesh */
.ambient-mesh {
    position: fixed;
    /* inset rather than 100vw/100vh: 100vw counts the scrollbar, so the mesh was a few pixels
       wider than the page it decorates. */
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.mesh-orb-1 {
    position: absolute;
    top: -10%;
    left: 15%;
    width: 650px;
    height: 650px;
    background: radial-gradient(circle, rgba(0, 243, 255, 0.12) 0%, transparent 65%);
    filter: blur(80px);
    animation: floatOrb 20s infinite alternate ease-in-out;
}

.mesh-orb-2 {
    position: absolute;
    top: 35%;
    right: -5%;
    width: 750px;
    height: 750px;
    background: radial-gradient(circle, rgba(168, 85, 247, 0.1) 0%, transparent 65%);
    filter: blur(90px);
    animation: floatOrb 24s infinite alternate-reverse ease-in-out;
}

.mesh-orb-3 {
    position: absolute;
    bottom: -10%;
    left: 30%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(16, 185, 129, 0.08) 0%, transparent 65%);
    filter: blur(80px);
}

@keyframes floatOrb {
    0% { transform: translate(0, 0) scale(1); }
    100% { transform: translate(40px, 30px) scale(1.08); }
}

/* Container */
.portal-container {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 2rem;
    position: relative;
    z-index: 1;
}

/* HUD Navigation Bar */
.hud-navbar {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(7, 9, 14, 0.82);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border-subtle);
    padding: 1rem 0;
}

.nav-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* The brand, the telemetry pills and eight action buttons want more row than the 1,440px
       container has, at any window size. Without wrapping the last buttons were pushed off the
       page, and the body's overflow-x: hidden meant they could not be reached or even seen. */
    flex-wrap: wrap;
    gap: 1rem;
}

.brand-section {
    display: flex;
    align-items: center;
    gap: 1rem;
    text-decoration: none;
}

.brand-icon {
    width: 44px;
    height: 44px;
    background: linear-gradient(135deg, rgba(0, 243, 255, 0.2), rgba(168, 85, 247, 0.2));
    border: 1px solid rgba(0, 243, 255, 0.3);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    font-size: 1.25rem;
    box-shadow: 0 0 16px rgba(0, 243, 255, 0.2);
}

.brand-title-group {
    display: flex;
    flex-direction: column;
}

.brand-title {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.02em;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.brand-tag {
    font-size: 0.65rem;
    font-family: var(--font-mono);
    text-transform: uppercase;
    background: rgba(0, 243, 255, 0.12);
    color: var(--primary);
    padding: 2px 8px;
    border-radius: var(--radius-full);
    border: 1px solid rgba(0, 243, 255, 0.25);
    letter-spacing: 0.05em;
}

.brand-subtitle {
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* Nav Telemetry & Actions */
.nav-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.telemetry-pills {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.telemetry-pill {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.75rem;
    padding: 0.35rem 0.75rem;
    border-radius: var(--radius-full);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border-subtle);
    color: var(--text-secondary);
}

.status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
}

.status-dot.online {
    background-color: #10b981;
    box-shadow: 0 0 8px #10b981;
}

.status-dot.local {
    background-color: #00f3ff;
    box-shadow: 0 0 8px #00f3ff;
}

.nav-buttons {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.btn-hud {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-primary);
    border: 1px solid var(--border-subtle);
    padding: 0.5rem 1rem;
    border-radius: var(--radius-md);
    font-size: 0.825rem;
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: var(--transition);
    text-decoration: none;
}

.btn-hud:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-1px);
}

.btn-hud-primary {
    background: linear-gradient(135deg, rgba(0, 243, 255, 0.2), rgba(168, 85, 247, 0.2));
    border: 1px solid rgba(0, 243, 255, 0.4);
    color: #fff;
    box-shadow: 0 0 15px rgba(0, 243, 255, 0.15);
}

.btn-hud-primary:hover {
    background: linear-gradient(135deg, rgba(0, 243, 255, 0.35), rgba(168, 85, 247, 0.35));
    border-color: var(--primary);
    box-shadow: 0 0 20px rgba(0, 243, 255, 0.3);
}

/* Hero Section */
.hero-section {
    padding: 3rem 0 2rem;
    text-align: center;
}

.hero-badge-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 1rem;
    background: rgba(0, 243, 255, 0.06);
    border: 1px solid rgba(0, 243, 255, 0.2);
    border-radius: var(--radius-full);
    color: var(--primary);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    margin-bottom: 1.25rem;
}

.hero-title {
    font-family: var(--font-heading);
    font-size: clamp(2rem, 4vw, 3.25rem);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.03em;
    margin-bottom: 1rem;
}

.text-gradient {
    background: linear-gradient(135deg, #00f3ff 0%, #a855f7 60%, #ec4899 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero-description {
    font-size: 1.05rem;
    color: var(--text-secondary);
    max-width: 680px;
    margin: 0 auto 2.25rem;
    line-height: 1.6;
}

/* Stats Ribbon */
.stats-ribbon {
    display: grid;
    /* min() so the track can collapse to the container on a phone instead of forcing the page
       sideways. Same reason wherever it appears below. */
    grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
    gap: 1rem;
    margin-bottom: 2.5rem;
}

.stat-card {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    backdrop-filter: blur(12px);
    transition: var(--transition);
}

.stat-card:hover {
    border-color: rgba(255, 255, 255, 0.15);
    transform: translateY(-2px);
}

.stat-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    color: var(--primary);
}

.stat-info {
    display: flex;
    flex-direction: column;
}

.stat-value {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 700;
    color: #fff;
    line-height: 1.2;
}

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

/* Search & Filter Toolbar */
.toolbar-section {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-xl);
    padding: 1.25rem;
    margin-bottom: 2.25rem;
    backdrop-filter: blur(16px);
}

.search-row {
    display: flex;
    gap: 1rem;
    align-items: center;
    margin-bottom: 1.25rem;
}

.search-input-wrapper {
    position: relative;
    flex: 1;
}

.search-icon {
    position: absolute;
    left: 1.25rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-size: 1rem;
    pointer-events: none;
}

.search-input {
    width: 100%;
    background: rgba(7, 9, 14, 0.7);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: 0.85rem 3rem 0.85rem 3rem;
    font-size: 0.95rem;
    color: #fff;
    font-family: var(--font-body);
    transition: var(--transition);
}

.search-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 16px rgba(0, 243, 255, 0.2);
}

.search-kbd {
    position: absolute;
    right: 1.25rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.75rem;
    font-family: var(--font-mono);
    color: var(--text-muted);
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid var(--border-subtle);
    padding: 2px 6px;
    border-radius: 4px;
}

.toolbar-controls {
    display: flex;
    gap: 0.6rem;
    align-items: center;
}

.select-filter {
    background: rgba(7, 9, 14, 0.7);
    color: var(--text-secondary);
    border: 1px solid var(--border-subtle);
    padding: 0.85rem 1.25rem;
    border-radius: var(--radius-lg);
    font-size: 0.85rem;
    font-family: var(--font-body);
    cursor: pointer;
    transition: var(--transition);
}

.select-filter:focus {
    outline: none;
    border-color: var(--primary);
}

.view-toggle-btn {
    width: 44px;
    height: 44px;
    background: rgba(7, 9, 14, 0.7);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition);
}

.view-toggle-btn.active, .view-toggle-btn:hover {
    background: rgba(0, 243, 255, 0.1);
    color: var(--primary);
    border-color: rgba(0, 243, 255, 0.3);
}

/* Category Filter Tabs */
.category-tabs {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    padding-bottom: 0.25rem;
    scrollbar-width: none;
}

.category-tabs::-webkit-scrollbar {
    display: none;
}

.cat-tab {
    padding: 0.5rem 1.1rem;
    border-radius: var(--radius-full);
    font-size: 0.825rem;
    font-weight: 500;
    color: var(--text-secondary);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border-subtle);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    white-space: nowrap;
    transition: var(--transition);
}

.cat-tab:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.15);
}

.cat-tab.active {
    background: rgba(0, 243, 255, 0.15);
    color: var(--primary);
    border-color: rgba(0, 243, 255, 0.4);
    box-shadow: 0 0 12px rgba(0, 243, 255, 0.15);
}

.cat-count {
    font-size: 0.7rem;
    font-family: var(--font-mono);
    padding: 1px 6px;
    border-radius: var(--radius-full);
    background: rgba(255, 255, 255, 0.1);
}

.cat-tab.active .cat-count {
    background: rgba(0, 243, 255, 0.25);
    color: #fff;
}

/* Projects Grid Layout */
.projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(350px, 100%), 1fr));
    gap: 1.5rem;
    margin-bottom: 4rem;
}

/* Project Card */
.project-card {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-xl);
    padding: 1.6rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    backdrop-filter: blur(16px);
    transition: var(--transition);
    position: relative;
    overflow: hidden;
}

.project-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--card-accent, var(--primary)), transparent);
    opacity: 0;
    transition: var(--transition);
}

.project-card:hover {
    background: var(--bg-card-hover);
    border-color: var(--border-hover);
    transform: translateY(-4px);
    box-shadow: var(--shadow-card), 0 0 25px rgba(0, 243, 255, 0.08);
}

.project-card:hover::before {
    opacity: 1;
}

/* Dynamic Category Card Theme Variables */
.project-card[data-category="Banking & FinTech"] {
    --card-accent: var(--cat-fintech);
    --card-accent-glow: var(--cat-fintech-glow);
}
.project-card[data-category="Operations & Infra"] {
    --card-accent: var(--cat-ops);
    --card-accent-glow: var(--cat-ops-glow);
}
.project-card[data-category="AI & Gamification"] {
    --card-accent: var(--cat-ai);
    --card-accent-glow: var(--cat-ai-glow);
}
.project-card[data-category="Personal & Growth"] {
    --card-accent: var(--cat-personal);
    --card-accent-glow: var(--cat-personal-glow);
}
.project-card[data-category="Analytics & ESG"] {
    --card-accent: var(--cat-esg);
    --card-accent-glow: var(--cat-esg-glow);
}
.project-card[data-category="Labs & Prototypes"] {
    --card-accent: var(--cat-labs);
    --card-accent-glow: var(--cat-labs-glow);
}

/* Card Header */
.card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.25rem;
    /* An uppercase category pill plus the health pill plus the status badge is wider than a
       phone-width card, so the badges drop to a second line rather than spilling out of it. */
    flex-wrap: wrap;
    gap: 0.5rem;
}

.card-category-pill {
    font-size: 0.725rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.3rem 0.75rem;
    border-radius: var(--radius-full);
    background: var(--card-accent-glow);
    color: var(--card-accent);
    border: 1px solid rgba(255, 255, 255, 0.05);
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.card-status-badge {
    font-size: 0.7rem;
    font-family: var(--font-mono);
    padding: 0.25rem 0.6rem;
    border-radius: var(--radius-full);
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.status-active {
    background: rgba(16, 185, 129, 0.12);
    color: #10b981;
    border: 1px solid rgba(16, 185, 129, 0.25);
}

.status-in_progress {
    background: rgba(245, 158, 11, 0.12);
    color: #f59e0b;
    border: 1px solid rgba(245, 158, 11, 0.25);
}

.status-prototype {
    background: rgba(168, 85, 247, 0.12);
    color: #c084fc;
    border: 1px solid rgba(168, 85, 247, 0.25);
}

/* Card Main Body */
.card-content {
    margin-bottom: 1.25rem;
}

.project-title-row {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 0.75rem;
}

.project-avatar {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border-subtle);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    color: var(--card-accent);
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    transition: var(--transition);
}

.project-card:hover .project-avatar {
    background: var(--card-accent-glow);
    border-color: var(--card-accent);
    transform: scale(1.05);
}

.project-title-text {
    flex: 1;
    /* A flex child defaults to min-width: auto, so without this the text block refuses to shrink
       below its longest word and a long project name widens the whole card. */
    min-width: 0;
}

.project-name {
    font-family: var(--font-heading);
    font-size: 1.15rem;
    font-weight: 700;
    color: #fff;
    line-height: 1.3;
    margin-bottom: 0.25rem;
    overflow-wrap: anywhere;
}

.project-slug {
    font-size: 0.75rem;
    font-family: var(--font-mono);
    color: var(--text-muted);
    /* A route like /one-global-markets/ has no spaces to break on. */
    overflow-wrap: anywhere;
}

.project-desc {
    font-size: 0.875rem;
    color: var(--text-secondary);
    line-height: 1.55;
    margin-bottom: 1rem;
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Tech Stack Pills */
.tech-stack-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 1.25rem;
}

.tech-tag {
    font-size: 0.7rem;
    font-family: var(--font-mono);
    padding: 0.2rem 0.55rem;
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-secondary);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

/* Dev Server Port Badge */
.dev-port-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.725rem;
    font-family: var(--font-mono);
    color: var(--primary);
    background: rgba(0, 243, 255, 0.08);
    border: 1px solid rgba(0, 243, 255, 0.25);
    padding: 0.2rem 0.6rem;
    border-radius: var(--radius-sm);
    text-decoration: none;
    margin-bottom: 1.25rem;
    transition: var(--transition);
}

.dev-port-badge:hover {
    background: rgba(0, 243, 255, 0.18);
    border-color: var(--primary);
}

.port-ping {
    width: 6px;
    height: 6px;
    background-color: var(--primary);
    border-radius: 50%;
    animation: portPulse 1.5s infinite;
}

@keyframes portPulse {
    0%, 100% { opacity: 0.4; transform: scale(0.9); }
    50% { opacity: 1; transform: scale(1.2); }
}

/* Card Footer Actions */
.card-bottom {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-subtle);
}

.btn-launch {
    flex: 1;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03));
    color: #fff;
    border: 1px solid var(--border-subtle);
    padding: 0.65rem 1rem;
    border-radius: var(--radius-md);
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: var(--transition);
}

.btn-launch:hover {
    background: linear-gradient(135deg, var(--card-accent), var(--secondary));
    color: #000;
    font-weight: 700;
    border-color: transparent;
    box-shadow: 0 0 18px var(--card-accent-glow);
    transform: translateY(-1px);
}

.card-actions-dropdown {
    position: relative;
}

.btn-card-more {
    width: 38px;
    height: 38px;
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border-subtle);
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition);
}

.btn-card-more:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.card-menu {
    position: absolute;
    right: 0;
    bottom: calc(100% + 8px);
    width: 200px;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: 0.4rem;
    display: none;
    flex-direction: column;
    z-index: 50;
    box-shadow: var(--shadow-card);
    backdrop-filter: blur(20px);
}

.card-menu.show {
    display: flex;
    animation: menuFade 0.15s ease-out;
}

@keyframes menuFade {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

.menu-item {
    padding: 0.55rem 0.8rem;
    font-size: 0.8rem;
    color: var(--text-secondary);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    border-radius: var(--radius-sm);
    transition: var(--transition);
    background: none;
    border: none;
    width: 100%;
    text-align: left;
    cursor: pointer;
}

.menu-item:hover {
    background: rgba(255, 255, 255, 0.07);
    color: #fff;
}

.menu-item.danger {
    color: #f43f5e;
}

.menu-item.danger:hover {
    background: rgba(244, 63, 94, 0.12);
    color: #f43f5e;
}

.menu-divider {
    height: 1px;
    background: var(--border-subtle);
    margin: 0.3rem 0;
}

/* Detailed Table View */
.projects-table-view {
    display: none;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-xl);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 4rem;
    backdrop-filter: blur(16px);
}

.portal-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    font-size: 0.875rem;
}

.portal-table th {
    background: rgba(0, 0, 0, 0.25);
    padding: 1rem 1.25rem;
    color: var(--text-muted);
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid var(--border-subtle);
}

.portal-table td {
    padding: 1.1rem 1.25rem;
    border-bottom: 1px solid var(--border-subtle);
    color: var(--text-secondary);
}

.portal-table tr:hover td {
    background: rgba(255, 255, 255, 0.02);
}

/* Empty State */
.empty-state {
    display: none;
    text-align: center;
    padding: 4rem 1rem;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-xl);
    margin-bottom: 4rem;
}

.empty-state-icon {
    font-size: 3rem;
    color: var(--text-muted);
    margin-bottom: 1rem;
}

.empty-state-title {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    color: #fff;
    margin-bottom: 0.5rem;
}

.empty-state-text {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin-bottom: 1.5rem;
}

/* Modals */
.modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(4, 6, 10, 0.75);
    backdrop-filter: blur(12px);
    z-index: 1000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}

.modal-backdrop.show {
    display: flex;
    animation: modalIn 0.2s ease-out;
}

@keyframes modalIn {
    from { opacity: 0; transform: scale(0.96); }
    to { opacity: 1; transform: scale(1); }
}

.modal-box {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-xl);
    width: 100%;
    max-width: 650px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: var(--shadow-card);
}

.modal-header {
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--border-subtle);
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* The topology modal puts an Export button beside the close button, which does not fit a
       narrow header on one line. */
    flex-wrap: wrap;
    gap: 0.75rem;
}

.modal-title {
    font-family: var(--font-heading);
    font-size: 1.15rem;
    font-weight: 700;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-width: 0;
    overflow-wrap: anywhere;
}

.btn-close-modal {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 1.25rem;
    cursor: pointer;
    transition: var(--transition);
}

.btn-close-modal:hover {
    color: #fff;
}

.modal-body {
    padding: 1.5rem;
    overflow-y: auto;
}

.modal-footer {
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--border-subtle);
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.75rem;
    background: rgba(0, 0, 0, 0.15);
}

/* Form Elements */
.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-bottom: 1rem;
}

.form-group.full-width {
    grid-column: span 2;
}

.form-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.form-input, .form-textarea, .form-select {
    background: rgba(7, 9, 14, 0.8);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 0.65rem 0.85rem;
    color: #fff;
    font-family: var(--font-body);
    font-size: 0.875rem;
    transition: var(--transition);
}

.form-input:focus, .form-textarea:focus, .form-select:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 12px rgba(0, 243, 255, 0.2);
}

.form-textarea {
    resize: vertical;
    min-height: 80px;
}

/* Command Palette */
.cmd-palette-box {
    max-width: 580px;
    background: rgba(13, 17, 26, 0.95);
}

.cmd-search-row {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border-subtle);
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.cmd-input {
    flex: 1;
    background: none;
    border: none;
    color: #fff;
    font-size: 1.1rem;
    font-family: var(--font-body);
    outline: none;
}

.cmd-results-list {
    max-height: 380px;
    overflow-y: auto;
    padding: 0.5rem;
}

.cmd-result-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    border-radius: var(--radius-md);
    cursor: pointer;
    text-decoration: none;
    color: var(--text-secondary);
    transition: var(--transition);
}

.cmd-result-item:hover, .cmd-result-item.focused {
    background: rgba(0, 243, 255, 0.12);
    color: #fff;
}

.cmd-item-left {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.cmd-item-icon {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
}

/* Scan Workspace List */
.scan-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border-subtle);
    margin-bottom: 0.6rem;
}

.scan-item-info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.badge-tag {
    font-size: 0.7rem;
    font-family: var(--font-mono);
    padding: 2px 6px;
    border-radius: 4px;
}

.badge-tag.reg {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
}

.badge-tag.unreg {
    background: rgba(245, 158, 11, 0.15);
    color: #f59e0b;
}

/* ==========================================================================
   Live Service Health Badges & Probes
   ========================================================================== */
.health-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.15rem 0.5rem;
    border-radius: var(--radius-full);
    font-size: 0.68rem;
    font-family: var(--font-mono);
    font-weight: 500;
    transition: var(--transition);
}

.health-pill.ready {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.health-pill.checking {
    background: rgba(0, 243, 255, 0.12);
    color: var(--primary);
    border: 1px solid rgba(0, 243, 255, 0.25);
}

.health-pill.slow {
    background: rgba(245, 158, 11, 0.15);
    color: #f59e0b;
    border: 1px solid rgba(245, 158, 11, 0.3);
}

.health-pill.offline, .health-pill.missing_dir {
    background: rgba(244, 63, 94, 0.15);
    color: #f43f5e;
    border: 1px solid rgba(244, 63, 94, 0.3);
}

/* Shown when the probe itself could not be reached, so nothing is known either way. */
.health-pill.unknown {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-muted);
    border: 1px solid var(--border-subtle);
}

.health-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

.health-pill.ready .health-dot {
    box-shadow: 0 0 6px #10b981;
    animation: healthPulse 2s infinite ease-in-out;
}

@keyframes healthPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(1.3); }
}

/* ==========================================================================
   Architecture & Tech Stack Matrix View
   ========================================================================== */
.projects-matrix-view {
    display: none;
    background: rgba(13, 17, 26, 0.7);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    /* Was overflow: hidden, which cut the right-hand columns off a narrow screen with no way to
       reach them. The table now scrolls inside this box; the vertical axis stays clipped so the
       rounded corners still hold. */
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    margin-top: 1rem;
    box-shadow: var(--shadow-card);
}

.matrix-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
    text-align: left;
}

.matrix-table th {
    background: rgba(7, 9, 14, 0.9);
    padding: 0.9rem 1.25rem;
    color: var(--text-muted);
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--border-subtle);
    position: sticky;
    top: 0;
    z-index: 10;
}

.matrix-table td {
    padding: 0.9rem 1.25rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    color: var(--text-secondary);
    vertical-align: middle;
}

.matrix-table tr:hover td {
    background: rgba(0, 243, 255, 0.03);
}

.matrix-app-cell {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.matrix-app-icon {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    background: rgba(0, 243, 255, 0.1);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    flex-shrink: 0;
}

.matrix-pattern-pill {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    border-radius: var(--radius-sm);
    background: rgba(168, 85, 247, 0.12);
    color: #c084fc;
    border: 1px solid rgba(168, 85, 247, 0.25);
    font-size: 0.725rem;
    font-family: var(--font-mono);
}

.matrix-db-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.5rem;
    border-radius: var(--radius-sm);
    background: rgba(0, 243, 255, 0.08);
    color: var(--primary);
    font-family: var(--font-mono);
    font-size: 0.75rem;
}

/* ==========================================================================
   Interactive Ecosystem Topology Modal & Canvas
   ========================================================================== */
.topology-box {
    max-width: 1100px;
    width: 95vw;
}

.topology-header-actions {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.topology-cluster-filter {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.topo-filter-btn {
    padding: 0.35rem 0.8rem;
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-secondary);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border-subtle);
    cursor: pointer;
    transition: var(--transition);
}

.topo-filter-btn.active, .topo-filter-btn:hover {
    background: rgba(0, 243, 255, 0.15);
    color: var(--primary);
    border-color: rgba(0, 243, 255, 0.4);
}

.topology-canvas-container {
    position: relative;
    width: 100%;
    height: 520px;
    background: radial-gradient(circle at center, rgba(13, 22, 38, 0.9) 0%, rgba(7, 9, 14, 0.98) 100%);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.topology-svg {
    width: 100%;
    height: 100%;
}

.topo-node {
    cursor: pointer;
    transition: all 0.2s ease-out;
}

.topo-node:hover {
    filter: drop-shadow(0 0 10px rgba(0, 243, 255, 0.6));
}

.topo-edge {
    stroke: rgba(255, 255, 255, 0.12);
    stroke-width: 1.5;
    stroke-dasharray: 4 4;
    animation: edgeDash 20s linear infinite;
}

.topo-edge.active {
    stroke: rgba(0, 243, 255, 0.5);
    stroke-width: 2;
}

@keyframes edgeDash {
    to { stroke-dashoffset: -100; }
}

.topo-details-panel {
    position: absolute;
    bottom: 1rem;
    right: 1rem;
    max-width: 320px;
    background: rgba(7, 9, 14, 0.92);
    backdrop-filter: blur(12px);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 1rem;
    font-size: 0.8rem;
    box-shadow: var(--shadow-card);
    display: none;
}

.topo-details-panel.show {
    display: block;
    animation: fadeIn 0.2s ease-out;
}

/* ==========================================================================
   Database Namespace Inspector Modal
   ========================================================================== */
.db-inspector-box {
    max-width: 1050px;
    width: 95vw;
}

.db-stats-header {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.db-stat-tile {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 1rem;
    display: flex;
    align-items: center;
    gap: 0.85rem;
}

.db-stat-tile-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
}

.db-namespaces-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr));
    gap: 1rem;
    max-height: 420px;
    overflow-y: auto;
    padding-right: 0.3rem;
}

.ns-card {
    background: rgba(13, 17, 26, 0.7);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.ns-card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.ns-card-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    font-size: 0.875rem;
    color: #fff;
}

.ns-card-count {
    font-size: 0.75rem;
    font-family: var(--font-mono);
    padding: 2px 8px;
    border-radius: var(--radius-full);
    background: rgba(255, 255, 255, 0.06);
}

.ns-tables-pill-box {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    max-height: 120px;
    overflow-y: auto;
    background: rgba(7, 9, 14, 0.5);
    padding: 0.5rem;
    border-radius: var(--radius-sm);
    border: 1px solid rgba(255, 255, 255, 0.04);
}

.ns-table-pill {
    font-size: 0.68rem;
    font-family: var(--font-mono);
    padding: 1px 6px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-secondary);
}

/* Command Palette Quick Actions */
.cmd-shortcuts-bar {
    display: flex;
    gap: 0.4rem;
    padding: 0.6rem 1.25rem;
    background: rgba(7, 9, 14, 0.6);
    border-bottom: 1px solid var(--border-subtle);
    overflow-x: auto;
}

.cmd-shortcut-btn {
    font-size: 0.72rem;
    font-family: var(--font-mono);
    padding: 0.25rem 0.6rem;
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border-subtle);
    color: var(--text-secondary);
    cursor: pointer;
    white-space: nowrap;
    transition: var(--transition);
}

.cmd-shortcut-btn:hover {
    background: rgba(0, 243, 255, 0.15);
    color: var(--primary);
    border-color: rgba(0, 243, 255, 0.3);
}

/* Toast Notifications */
.toast-container {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.toast {
    /* Anchored to the right edge, so a long message grew leftwards out of the viewport. */
    max-width: 100%;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 0.75rem 1.25rem;
    font-size: 0.85rem;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    box-shadow: var(--shadow-card);
    animation: toastSlide 0.2s ease-out;
}

.toast.success { border-color: rgba(16, 185, 129, 0.4); }
.toast.error { border-color: rgba(244, 63, 94, 0.4); }

@keyframes toastSlide {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Footer */
.portal-footer {
    border-top: 1px solid var(--border-subtle);
    padding: 2.5rem 0;
    margin-top: 3rem;
    color: var(--text-muted);
    font-size: 0.825rem;
    text-align: center;
}

/* .footer-links and .footer-link were removed along with the three dead footer links they styled;
   see the comment in index.php's footer. */

/* Arcade & Games Button and Modals */
.btn-hud-arcade {
    background: rgba(236, 72, 153, 0.12) !important;
    border-color: rgba(236, 72, 153, 0.35) !important;
    color: #f472b6 !important;
}

.btn-hud-arcade:hover {
    background: rgba(236, 72, 153, 0.22) !important;
    border-color: rgba(236, 72, 153, 0.6) !important;
    color: #fff !important;
    box-shadow: 0 0 16px rgba(236, 72, 153, 0.35);
}

.badge-mini {
    display: inline-block;
    background: rgba(236, 72, 153, 0.3);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 9999px;
    margin-left: 4px;
}

.arcade-modal-box, .core-menu-box {
    max-width: 960px;
    width: 94%;
}

.arcade-group-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-primary);
    margin-bottom: 0.75rem;
}

.arcade-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(380px, 100%), 1fr));
    gap: 0.75rem;
}

.arcade-card {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.85rem 1rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    text-decoration: none;
    color: inherit;
    transition: all 0.2s ease;
    position: relative;
}

.arcade-card:hover {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(236, 72, 153, 0.5);
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

.arcade-icon-wrap {
    width: 42px;
    height: 42px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
}

.arcade-info {
    flex: 1;
    min-width: 0;
}

.arcade-name {
    font-size: 0.9rem;
    font-weight: 600;
    color: #fff;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-bottom: 0.2rem;
}

.arcade-desc {
    font-size: 0.75rem;
    color: var(--text-secondary);
    line-height: 1.35;
    margin: 0;
}

.arcade-launch-icon {
    font-size: 0.75rem;
    color: var(--text-muted);
    opacity: 0.6;
    transition: all 0.2s ease;
}

.arcade-card:hover .arcade-launch-icon {
    opacity: 1;
    color: var(--primary);
    transform: translate(2px, -2px);
}

.arcade-pill {
    font-size: 0.625rem;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 9999px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.pill-ai { background: rgba(0, 243, 255, 0.15); color: var(--primary); border: 1px solid rgba(0, 243, 255, 0.3); }
.pill-game { background: rgba(236, 72, 153, 0.15); color: #ec4899; border: 1px solid rgba(236, 72, 153, 0.3); }
.pill-fintech { background: rgba(168, 85, 247, 0.15); color: #a855f7; border: 1px solid rgba(168, 85, 247, 0.3); }

.arcade-mini-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.arcade-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.75rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-full);
    font-size: 0.78rem;
    color: var(--text-primary);
    text-decoration: none;
    transition: all 0.2s ease;
}

.arcade-chip:hover {
    background: rgba(0, 243, 255, 0.1);
    border-color: rgba(0, 243, 255, 0.4);
    color: #fff;
    transform: translateY(-1px);
}

.chip-icon {
    font-size: 0.95rem;
}

/* Core Functions Domains Grid */
.core-domains-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
    gap: 1rem;
}

.core-domain-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 1rem;
}

.core-domain-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border-subtle);
}

.core-domain-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.core-domain-list li a {
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.8rem;
    line-height: 1.4;
    display: block;
    padding: 0.35rem 0.5rem;
    border-radius: var(--radius-sm);
    transition: all 0.2s ease;
}

.core-domain-list li a:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    padding-left: 0.75rem;
}

.core-domain-list li a strong {
    color: var(--text-primary);
}

/* The responsive rules live in one block at the end of this file, below the 404 page styles. */
/* Not Found
   The 404 page. Built from the same tokens as everything else so an address that does not exist
   still looks like part of the site rather than the web server's grey default. */
.page-error {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 2rem 1.25rem;
}

.error-shell {
    max-width: 34rem;
    text-align: center;
}

.error-code {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: clamp(4rem, 18vw, 7.5rem);
    line-height: 1;
    margin: 0;
    font-weight: 500;
    color: var(--primary, #00f3ff);
    text-shadow: 0 0 40px rgba(0, 243, 255, 0.25);
}

.error-title {
    font-size: clamp(1.4rem, 5vw, 2rem);
    margin: 0.75rem 0 0;
    color: var(--text-primary);
    text-wrap: balance;
}

.error-path {
    margin: 1rem 0 0;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

/* The address can be long and has no spaces to break on, so it is told where it may wrap —
   otherwise it pushes the card wider than a phone screen. */
.error-path code {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm, 6px);
    padding: 0.15rem 0.4rem;
    word-break: break-all;
    overflow-wrap: anywhere;
}

.error-help {
    margin: 1rem 0 0;
    color: var(--text-muted);
    max-width: 30rem;
    margin-inline: auto;
}

.error-actions {
    margin-top: 2rem;
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    flex-wrap: wrap;
}

.error-btn {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-primary);
    border: 1px solid var(--border-subtle);
    padding: 0.7rem 1.25rem;
    border-radius: var(--radius-md, 10px);
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    transition: var(--transition, all 0.2s ease);
}

.error-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-1px);
}

.error-btn--primary {
    background: linear-gradient(135deg, rgba(0, 243, 255, 0.2), rgba(168, 85, 247, 0.2));
    border-color: rgba(0, 243, 255, 0.4);
    color: #fff;
    box-shadow: 0 0 15px rgba(0, 243, 255, 0.15);
}

.error-btn--primary:hover {
    background: linear-gradient(135deg, rgba(0, 243, 255, 0.35), rgba(168, 85, 247, 0.35));
    border-color: var(--primary, #00f3ff);
    box-shadow: 0 0 20px rgba(0, 243, 255, 0.3);
}

/* ==========================================================================
   Narrow viewports
   ==========================================================================
   Everything above this line is written for a wide desktop window. This section is what a smaller
   window needs, in four steps:

     1400px  the HUD bar's eight action buttons stop fitting beside the brand and the telemetry
     900px   the multi-column grids, the search row and the wide tables give up
     600px   phones: tap targets, the sticky bar, the stats ribbon, the modals
     420px   the narrowest phones still in common use

   Each rule says what it is fixing. A responsive block with no reasons in it is indistinguishable
   from an arbitrary one, and the next person cannot tell which rules are still needed.
   ========================================================================== */

/* --- 1400px: the action buttons need a row of their own -------------------- */
@media (max-width: 1400px) {
    /* display: contents promotes the telemetry pills and the button group to direct children of
       .nav-wrapper, so the buttons can claim a whole row instead of being squeezed into whatever
       is left beside the brand. The result is brand and telemetry on the first row, the eight
       actions on the second, rather than four buttons hanging off the side of the page. */
    .nav-actions {
        display: contents;
    }

    .nav-wrapper {
        row-gap: 0.85rem;
    }

    .nav-buttons {
        flex: 1 1 100%;
        justify-content: flex-end;
    }
}

/* --- 900px: tablets ------------------------------------------------------- */
@media (max-width: 900px) {
    /* Three pills of runtime detail are not worth a row of a tablet screen, and the same
       information is one tap away behind the DB Schema button. */
    .telemetry-pills {
        display: none;
    }

    /* With the pills gone the buttons start at the left edge, under the brand. */
    .nav-buttons {
        justify-content: flex-start;
    }

    .projects-grid {
        grid-template-columns: 1fr;
    }

    .form-grid {
        grid-template-columns: 1fr;
    }

    .form-group.full-width {
        grid-column: span 1;
    }

    /* The search field and the four controls beside it cannot share a row this narrow. */
    .search-row {
        flex-direction: column;
        align-items: stretch;
    }

    .toolbar-controls {
        flex-wrap: wrap;
    }

    .select-filter {
        flex: 1 1 12rem;
    }

    .topology-canvas-container {
        height: 380px;
    }

    .arcade-grid {
        grid-template-columns: 1fr;
    }

    .core-domains-grid {
        grid-template-columns: 1fr;
    }

    /* Seven columns of table will not fit. Given a minimum width the table keeps readable columns
       and its own container scrolls sideways; without one, the cells squash into slivers and the
       page itself is what gets pushed sideways. */
    .portal-table {
        min-width: 48rem;
    }

    .matrix-table {
        min-width: 54rem;
    }
}

/* --- 768px ---------------------------------------------------------------- */
@media (max-width: 768px) {
    .portal-container {
        padding: 0 1.25rem;
    }

    .hero-section {
        padding: 2.25rem 0 1.5rem;
    }

    .hero-description {
        margin-bottom: 1.75rem;
    }

    .modal-backdrop {
        padding: 1rem;
    }

    /* These four boxes are sized in vw, which takes no account of the backdrop's own padding, so
       each overflowed the backdrop by exactly that much and was clipped on the right. */
    .topology-box,
    .db-inspector-box,
    .arcade-modal-box,
    .core-menu-box {
        width: 100%;
    }
}

/* --- 600px: phones -------------------------------------------------------- */
@media (max-width: 600px) {
    .portal-container {
        padding: 0 1rem;
    }

    /* The sticky bar has to earn its height on a phone. The subtitle repeats the domain, which is
       in the address bar anyway. */
    .hud-navbar {
        padding: 0.6rem 0;
    }

    .nav-wrapper {
        row-gap: 0.6rem;
    }

    .brand-subtitle {
        display: none;
    }

    .brand-icon {
        width: 38px;
        height: 38px;
        font-size: 1.05rem;
    }

    .brand-title {
        font-size: 1.05rem;
    }

    .brand-tag {
        font-size: 0.6rem;
    }

    /* Wrapped, the eight buttons take five rows and swallow the screen. As one swipeable row they
       all stay reachable and the bar stays about 100px tall. This is the treatment the category
       tabs below already use, so it is not a new idea on the page. */
    .nav-buttons {
        flex: 1 1 100%;
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 2px;
    }

    .nav-buttons::-webkit-scrollbar {
        display: none;
    }

    .btn-hud {
        flex-shrink: 0;
        min-height: 44px;
    }

    /* There is no Ctrl key to show a shortcut for. */
    .btn-hud kbd {
        display: none;
    }

    .hero-section {
        padding: 1.75rem 0 1.25rem;
    }

    .hero-badge-pill {
        font-size: 0.7rem;
        padding: 0.4rem 0.85rem;
    }

    .hero-description {
        font-size: 0.95rem;
    }

    /* Five stat cards stacked is most of a screen's scrolling before the first project appears.
       Two columns keeps the ribbon a ribbon. */
    .stats-ribbon {
        grid-template-columns: 1fr 1fr;
        gap: 0.75rem;
        margin-bottom: 1.75rem;
    }

    .stat-card {
        padding: 0.9rem;
        gap: 0.7rem;
        border-radius: var(--radius-md);
    }

    .stat-icon {
        width: 36px;
        height: 36px;
        font-size: 1rem;
    }

    .stat-value {
        font-size: 1.25rem;
    }

    .stat-label {
        font-size: 0.65rem;
        letter-spacing: 0.03em;
    }

    .toolbar-section {
        padding: 1rem;
        border-radius: var(--radius-lg);
        margin-bottom: 1.75rem;
    }

    /* 16px is the smallest a field can be set before Safari zooms the whole page on focus, which
       then leaves the page scrolled sideways. */
    .search-input,
    .select-filter,
    .form-input,
    .form-select,
    .form-textarea {
        font-size: 1rem;
    }

    .search-kbd {
        display: none;
    }

    .search-input {
        padding-right: 1.1rem;
    }

    .select-filter {
        flex: 1 1 100%;
        min-height: 44px;
    }

    /* The status filter takes a row; the three view toggles share the next one. */
    .view-toggle-btn {
        flex: 1 1 0;
        width: auto;
        min-width: 44px;
    }

    .category-tabs {
        -webkit-overflow-scrolling: touch;
    }

    .cat-tab {
        min-height: 44px;
        padding: 0.5rem 0.9rem;
    }

    .project-card {
        padding: 1.1rem;
        border-radius: var(--radius-lg);
    }

    .projects-grid {
        gap: 1rem;
        margin-bottom: 2.5rem;
    }

    .project-title-row {
        gap: 0.75rem;
    }

    .project-avatar {
        width: 42px;
        height: 42px;
        font-size: 1.15rem;
    }

    .project-name {
        font-size: 1.05rem;
    }

    .btn-card-more {
        width: 44px;
        height: 44px;
    }

    .card-menu {
        max-width: calc(100vw - 3rem);
    }

    .menu-item {
        padding: 0.7rem 0.8rem;
    }

    .empty-state {
        padding: 2.5rem 1.25rem;
    }

    .modal-backdrop {
        padding: 0.75rem;
    }

    .modal-box {
        max-height: 88vh;
    }

    .modal-header {
        padding: 1rem;
    }

    .modal-title {
        font-size: 1rem;
    }

    .modal-body {
        padding: 1rem;
    }

    .modal-footer {
        padding: 0.85rem 1rem;
    }

    .modal-footer .btn-hud {
        flex: 1 1 auto;
        justify-content: center;
        min-height: 44px;
    }

    /* A bare 20px multiplication sign is not something a thumb can hit. The negative margin keeps
       the widened hit area from pushing the header padding out. */
    .btn-close-modal {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 44px;
        min-height: 44px;
        margin-right: -0.5rem;
    }

    .topology-canvas-container {
        height: 300px;
    }

    /* One swipeable row, rather than three wrapped rows of 44px pills pushing the map off screen. */
    .topology-cluster-filter {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .topology-cluster-filter::-webkit-scrollbar {
        display: none;
    }

    .topo-filter-btn {
        flex-shrink: 0;
        min-height: 44px;
    }

    /* The node details drawer is 320px wide and floats 1rem in from both edges, inside a modal
       body narrower than that. It now spans the map instead. */
    .topo-details-panel {
        left: 0.6rem;
        right: 0.6rem;
        bottom: 0.6rem;
        max-width: none;
    }

    .db-stats-header {
        grid-template-columns: 1fr;
    }

    /* Its own scrollbar nested inside the modal body's scrollbar is one too many on a touch
       screen, so the modal body does all the scrolling. */
    .db-namespaces-grid {
        max-height: none;
        padding-right: 0;
    }

    .cmd-shortcut-btn {
        min-height: 44px;
    }

    .cmd-result-item {
        padding: 0.8rem 0.75rem;
    }

    .arcade-chip {
        min-height: 44px;
    }

    .core-domain-list li a {
        padding: 0.6rem 0.5rem;
    }

    /* Anchored only to the right, a toast ran off the left edge of a phone. */
    .toast-container {
        left: 1rem;
        right: 1rem;
        bottom: 1rem;
    }

    .portal-footer {
        padding: 2rem 0;
        margin-top: 2rem;
    }
}

/* --- 420px: the narrowest phones ------------------------------------------ */
@media (max-width: 420px) {
    .portal-container {
        padding: 0 0.875rem;
    }

    /* Slightly tighter buttons put two more of them on screen in the scrolling HUD row. */
    .btn-hud {
        padding: 0.5rem 0.8rem;
        font-size: 0.8rem;
    }

    .hero-badge-pill {
        font-size: 0.66rem;
        letter-spacing: 0.02em;
    }

    .stats-ribbon {
        gap: 0.6rem;
    }

    .stat-label {
        font-size: 0.62rem;
    }

    .toolbar-section {
        padding: 0.85rem;
    }

    .project-card {
        padding: 1rem;
    }

    .card-top {
        gap: 0.4rem;
    }

    .modal-backdrop {
        padding: 0.6rem;
    }

    .modal-body {
        padding: 0.85rem;
    }
}

/* --- Reduced motion ------------------------------------------------------- */
/* Three blurred orbs drift behind the page on twenty-second loops, the dev-port dots and the
   health dots pulse forever, and the topology edges crawl. None of it carries information, so for
   anyone whose system asks for less movement it stops. Transition durations are collapsed rather
   than removed, so hover, open and close states still land — just immediately. */
@media (prefers-reduced-motion: reduce) {
    .mesh-orb-1,
    .mesh-orb-2,
    .mesh-orb-3,
    .port-ping,
    .health-pill.ready .health-dot,
    .topo-edge {
        animation: none;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}