/* ══════════════════════════════════════════════════════════
   MintStudio Portal — design system (light default + dark toggle)
   Tokens keep their historic --dark-* names; values flip per theme.
   ══════════════════════════════════════════════════════════ */

:root {
    /* brand */
    --brand: rgb(19, 91, 147);
    --brand-hover: rgb(24, 105, 170);
    --brand-light: rgba(19, 91, 147, 0.06);
    --brand-glow: rgba(19, 91, 147, 0.18);
    --brand-accent-fg: var(--brand);          /* brand-tint foreground on light tints */
    /* surfaces / text (LIGHT defaults) */
    --dark: #f4f6f9;
    --dark-2: #eef1f6;
    --dark-card: #ffffff;
    --dark-card-hover: #f7f9fc;
    --dark-border: rgba(15, 23, 42, 0.10);
    --dark-border-strong: rgba(15, 23, 42, 0.16);
    --dark-text: rgba(15, 23, 42, 0.70);
    --dark-text-strong: rgba(15, 23, 42, 0.95);
    --dark-text-dim: rgba(15, 23, 42, 0.60);
    --surface-1: #ffffff;
    --surface-2: #f7f9fc;
    --overlay-subtle: rgba(15, 23, 42, 0.025);
    --overlay-hover: rgba(15, 23, 42, 0.045);
    --overlay-hover-strong: rgba(15, 23, 42, 0.075);
    --topbar-bg: rgba(255, 255, 255, 0.82);
    --rim-highlight: rgba(255, 255, 255, 0.9);
    --chip-rim: rgba(15, 23, 42, 0.06);
    /* always-dark login brand panel */
    --brand-panel-bg: linear-gradient(160deg, #0a1628 0%, #0f1d35 50%, #0c1222 100%);
    --brand-panel-text: #ffffff;
    --brand-panel-text-dim: rgba(255, 255, 255, 0.55);
    /* semantic error */
    --error-bg: rgba(220, 38, 38, 0.07);
    --error-border: rgba(220, 38, 38, 0.28);
    --error-text: #b91c1c;
    /* ambient + shadows (soft depth) */
    --ambient-bg:
        radial-gradient(ellipse 90% 70% at 18% 0%, rgba(19, 91, 147, 0.05), transparent 60%),
        radial-gradient(ellipse 70% 60% at 85% 95%, rgba(19, 91, 147, 0.035), transparent 60%);
    --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.05);
    --shadow-md: 0 2px 8px rgba(15, 23, 42, 0.08), 0 4px 16px rgba(15, 23, 42, 0.06);
    --shadow-lg: 0 8px 28px rgba(15, 23, 42, 0.12), 0 2px 8px rgba(15, 23, 42, 0.08);
    --shadow-brand: 0 2px 10px rgba(19, 91, 147, 0.22);
    --chip-shadow: 0 1px 2px rgba(15, 23, 42, 0.06), 0 2px 6px -3px color-mix(in srgb, currentColor 30%, transparent);
    /* geometry / type */
    --radius: 14px;
    --radius-sm: 10px;
    --font-display: 'Plus Jakarta Sans', sans-serif;
    --font-body: 'DM Sans', sans-serif;
    --ease: cubic-bezier(0.4, 0, 0.2, 1);
    --topbar-h: 60px;
    --rail-w: 250px;
    --rail-w-collapsed: 68px;
}

:root[data-theme="dark"] {
    --brand-light: rgba(19, 91, 147, 0.08);
    --brand-glow: rgba(19, 91, 147, 0.15);
    --brand-accent-fg: #4f9fd9;
    --dark: #0c1222;
    --dark-2: #0a0f1c;
    --dark-card: #141c2e;
    --dark-card-hover: #18223a;
    --dark-border: rgba(255, 255, 255, 0.06);
    --dark-border-strong: rgba(255, 255, 255, 0.12);
    --dark-text: rgba(255, 255, 255, 0.72);
    --dark-text-strong: rgba(255, 255, 255, 0.95);
    --dark-text-dim: rgba(255, 255, 255, 0.45);
    --surface-1: #141c2e;
    --surface-2: #18223a;
    --overlay-subtle: rgba(255, 255, 255, 0.03);
    --overlay-hover: rgba(255, 255, 255, 0.06);
    --overlay-hover-strong: rgba(255, 255, 255, 0.09);
    --topbar-bg: rgba(10, 15, 28, 0.72);
    --rim-highlight: rgba(255, 255, 255, 0.14);
    --chip-rim: rgba(255, 255, 255, 0.12);
    --error-bg: rgba(220, 38, 38, 0.10);
    --error-border: rgba(220, 38, 38, 0.25);
    --error-text: #fca5a5;
    --ambient-bg:
        radial-gradient(ellipse 80% 60% at 20% 10%, rgba(19, 91, 147, 0.07), transparent 65%),
        radial-gradient(ellipse 60% 50% at 80% 85%, rgba(19, 91, 147, 0.04), transparent 65%);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 3px rgba(0, 0, 0, 0.25);
    --shadow-md: 0 2px 10px rgba(0, 0, 0, 0.35), 0 4px 18px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 10px 32px rgba(0, 0, 0, 0.45), 0 2px 8px rgba(0, 0, 0, 0.4);
    --shadow-brand: 0 2px 10px rgba(19, 91, 147, 0.3);
    --chip-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 2px 6px -3px color-mix(in srgb, currentColor 38%, transparent);
}

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

/* Remove 300ms tap delay; smoother taps on touch devices */
button, a, input, label, .system-card, .lang-btn { touch-action: manipulation; }

body {
    font-family: var(--font-body);
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background: var(--dark);
    color: var(--dark-text);
    overflow-x: hidden;
}

/* ── Ambient Background — static, subtle, theme-aware ───── */
.background-decorations {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background: var(--ambient-bg);
}

/* ── Portal Container ───────────────────────────────────── */
.portal-container {
    position: relative;
    z-index: 1;
    width: 100%;
    min-height: 100vh;
}

/* ── Section transitions ────────────────────────────────── */
.login-section, .dashboard-section {
    display: none;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
}

.login-section.active, .dashboard-section.active {
    display: block;
    opacity: 1;
    transform: translateY(0);
}

.login-section.active { min-height: 100vh; min-height: 100dvh; }

.login-split {
    display: flex;
    min-height: 100vh;
    min-height: 100dvh;
}

/* ── Brand Panel (Left) — stays dark navy in BOTH themes ── */
.login-brand-panel {
    flex: 1;
    display: none;
    flex-direction: column;
    justify-content: center;
    padding: 64px;
    position: relative;
    overflow: hidden;
    background: var(--brand-panel-bg);
}

.brand-pattern {
    position: absolute;
    inset: 0;
    opacity: 0.03;
    background-image:
        linear-gradient(rgba(255,255,255,0.1) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.1) 1px, transparent 1px);
    background-size: 48px 48px;
}

.brand-content { position: relative; z-index: 1; max-width: 440px; }

.brand-logo-row {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 48px;
    animation: fadeInUp 0.7s var(--ease) 0.1s both;
}

.brand-logo-full { height: 108px; width: auto; object-fit: contain; }
.header-logo-full { height: 65px; width: auto; object-fit: contain; }

.brand-wordmark {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--brand-panel-text);
    letter-spacing: -0.03em;
}

.brand-accent { color: var(--dark-text-dim); font-weight: 500; }
.login-brand-panel .brand-accent { color: var(--brand-panel-text-dim); }

.brand-tagline {
    font-family: var(--font-display);
    font-size: 2.25rem;
    font-weight: 800;
    color: var(--brand-panel-text);
    line-height: 1.25;
    letter-spacing: -0.03em;
    margin-bottom: 20px;
    animation: fadeInUp 0.7s var(--ease) 0.2s both;
}

.brand-sub {
    font-size: 1.05rem;
    color: var(--brand-panel-text-dim);
    line-height: 1.6;
    margin-bottom: 40px;
    animation: fadeInUp 0.7s var(--ease) 0.3s both;
}

.brand-features {
    display: flex;
    flex-direction: column;
    gap: 14px;
    animation: fadeInUp 0.7s var(--ease) 0.4s both;
}

.brand-feature {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--brand-panel-text-dim);
    font-size: 0.875rem;
    font-weight: 500;
}

.brand-feature svg { color: #4f9fd9; flex-shrink: 0; }   /* lighter brand on the dark panel */

/* ── Form Panel (Right) — follows the app theme ─────────── */
.login-form-panel {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 48px 24px;
    background: var(--dark);
    position: relative;
}

/* ── Language Switcher (shared login + dashboard) ───────── */
.lang-switcher {
    display: flex;
    gap: 2px;
    background: var(--dark-card);
    border: 1px solid var(--dark-border);
    border-radius: 8px;
    padding: 3px;
}

.login-form-panel .lang-switcher {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 5;
}

.lang-btn {
    background: transparent;
    border: none;
    color: var(--dark-text-dim);
    font-family: var(--font-display);
    font-size: 0.7rem;
    font-weight: 600;
    padding: 5px 10px;
    border-radius: 6px;
    cursor: pointer;
    transition: color 0.15s var(--ease), background 0.15s var(--ease);
    letter-spacing: 0.03em;
}

.lang-btn:hover { color: var(--dark-text-strong); }
.lang-btn.active { background: var(--brand); color: #fff; }
.lang-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

.login-form-panel .header {
    text-align: center;
    margin-bottom: 40px;
    width: 100%;
    max-width: 380px;
}

.login-form-panel .header-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 32px;
    animation: fadeInUp 0.6s var(--ease) 0.1s both;
}

.header-title {
    font-family: var(--font-display);
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--dark-text-strong);
    letter-spacing: -0.03em;
}

.header-subtitle {
    font-size: 0.75rem;
    color: var(--dark-text-dim);
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-top: 2px;
}

.login-welcome {
    font-family: var(--font-display);
    font-size: 1.125rem;
    color: var(--dark-text);
    font-weight: 500;
    animation: fadeInUp 0.6s var(--ease) 0.2s both;
}

/* ── Login Form ─────────────────────────────────────────── */
.login-form { width: 100%; max-width: 380px; }

.form-group {
    margin-bottom: 20px;
    animation: fadeInUp 0.5s var(--ease) both;
}
.form-group:nth-of-type(1) { animation-delay: 0.3s; }
.form-group:nth-of-type(2) { animation-delay: 0.4s; }

.form-group label {
    display: block;
    margin-bottom: 8px;
    color: var(--dark-text);
    font-weight: 500;
    font-size: 0.8125rem;
    letter-spacing: 0.02em;
}

.form-group input {
    width: 100%;
    padding: 14px 16px;
    background: var(--dark-card);
    border: 1px solid var(--dark-border);
    border-radius: var(--radius-sm);
    color: var(--dark-text-strong);
    font-size: 16px; /* 16px avoids iOS focus auto-zoom */
    font-family: var(--font-body);
    transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease), background 0.2s var(--ease);
    outline: none;
}

.form-group input::placeholder { color: var(--dark-text-dim); }

.form-group input:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-glow);
    background: var(--surface-2);
}

.form-group input:hover:not(:focus) { border-color: var(--dark-border-strong); }

/* ── Password show/hide ─────────────────────────────────── */
.password-wrap { position: relative; }
.password-wrap input { padding-right: 46px; }

.password-toggle {
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: var(--dark-text-dim);
    cursor: pointer;
    transition: color 0.15s var(--ease), background 0.15s var(--ease);
}
.password-toggle:hover { color: var(--dark-text-strong); background: var(--overlay-hover); }
.password-toggle:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.password-toggle .icon-eye-off { display: none; }
.password-toggle.revealed .icon-eye { display: none; }
.password-toggle.revealed .icon-eye-off { display: inline; }

/* ── Login Button ───────────────────────────────────────── */
.login-btn {
    width: 100%;
    padding: 14px 24px;
    background: var(--brand);
    color: #fff;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 15px;
    font-weight: 600;
    font-family: var(--font-display);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background 0.25s var(--ease), box-shadow 0.25s var(--ease), transform 0.25s var(--ease);
    box-shadow: var(--shadow-brand);
    animation: fadeInUp 0.5s var(--ease) 0.5s both;
}

.login-btn:hover:not(:disabled) {
    background: var(--brand-hover);
    box-shadow: var(--shadow-md), var(--shadow-brand);
    transform: translateY(-1px);
}

.login-btn:active:not(:disabled) {
    transform: translateY(0);
    box-shadow: var(--shadow-sm);
}

.login-btn:disabled { opacity: 0.65; cursor: not-allowed; transform: none; }
.login-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.btn-arrow { transition: transform 0.2s var(--ease); }
.login-btn:hover:not(:disabled) .btn-arrow { transform: translateX(3px); }

.btn-spinner {
    display: none;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
}
.login-btn.is-loading .btn-spinner { display: inline-block; }
.login-btn.is-loading .btn-arrow { display: none; }

/* ── Error Message ──────────────────────────────────────── */
.error-message {
    display: none;
    padding: 14px 16px;
    background: var(--error-bg);
    border: 1px solid var(--error-border);
    border-radius: var(--radius-sm);
    color: var(--error-text);
    font-size: 0.85rem;
    font-weight: 500;
    margin-bottom: 20px;
    animation: fadeInUp 0.3s var(--ease) both;
}
.error-message.visible { display: block; }

/* ── Login Footer ───────────────────────────────────────── */
.login-footer-text {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 32px;
    color: var(--dark-text-dim);
    font-size: 0.75rem;
    font-weight: 500;
    animation: fadeInUp 0.5s var(--ease) 0.6s both;
}

.login-footer-text svg { color: #059669; }

/* ══════════════════════════════════════════════════════════
   WORKSPACE (dashboard shell) — topbar + 3 columns
   ══════════════════════════════════════════════════════════ */

.dashboard-section.ws.active {
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    padding: 0;
    overflow: hidden;
}

/* ── Top bar ── */
.ws-topbar {
    flex-shrink: 0;
    height: var(--topbar-h);
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0 18px;
    border-bottom: 1px solid var(--dark-border);
    background: var(--topbar-bg);
    backdrop-filter: blur(12px);
    z-index: 40;
}

.ws-brand { display: flex; align-items: center; gap: 9px; flex-shrink: 0; }
.ws-logo { height: 30px; width: auto; object-fit: contain; }
.ws-wordmark {
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--dark-text-strong);
    letter-spacing: -0.02em;
}

.ws-search {
    position: relative;
    display: flex;
    align-items: center;
    flex: 0 1 360px;
    margin-left: 8px;
}
.ws-search svg { position: absolute; left: 12px; color: var(--dark-text-dim); pointer-events: none; }
.ws-search-input {
    width: 100%;
    height: 38px;
    padding: 0 14px 0 36px;
    background: var(--dark-card);
    border: 1px solid var(--dark-border);
    border-radius: 999px;
    color: var(--dark-text-strong);
    font-size: 0.875rem;
    font-family: var(--font-body);
    outline: none;
    transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.ws-search-input::placeholder { color: var(--dark-text-dim); }
.ws-search-input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-glow); }
.ws-search-input::-webkit-search-cancel-button { -webkit-appearance: none; }

.ws-top-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; flex-shrink: 0; }

.ws-icon-btn {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--dark-card);
    border: 1px solid var(--dark-border);
    border-radius: 10px;
    color: var(--dark-text);
    cursor: pointer;
    transition: color 0.2s var(--ease), background 0.2s var(--ease), border-color 0.2s var(--ease);
}
.ws-icon-btn:hover { color: var(--dark-text-strong); background: var(--dark-card-hover); border-color: var(--dark-border-strong); }
.ws-icon-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
#chat-toggle { display: none; }   /* visible only when chat is an overlay (≤1160) */

/* Theme toggle: show the icon for the OTHER theme */
.theme-toggle svg { display: none; }
:root[data-theme="light"] .theme-toggle .icon-moon { display: inline-block; }
:root[data-theme="dark"]  .theme-toggle .icon-sun  { display: inline-block; }

/* ── Body: 3-column grid ── */
.ws-body {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: var(--rail-w) minmax(0, 1fr) 340px;
    transition: grid-template-columns 0.26s var(--ease);
}
.ws-body.rail-collapsed { --rail-w: var(--rail-w-collapsed); }
.ws-body.no-anim { transition: none; }

/* ── Left rail: modules ── */
.ws-left {
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 16px 12px 12px;
    border-right: 1px solid var(--dark-border);
    overflow-y: auto;
}
.ws-rail-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 0 8px 10px;
}
.ws-rail-title {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--dark-text-dim);
    font-weight: 600;
}
.ws-rail-collapse {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: var(--dark-text-dim);
    cursor: pointer;
    transition: color 0.15s var(--ease), background 0.15s var(--ease);
}
.ws-rail-collapse:hover { color: var(--dark-text-strong); background: var(--overlay-hover); }
.ws-rail-collapse:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.ws-rail-collapse .icon-expand { display: none; }
.ws-body.rail-collapsed .ws-rail-collapse .icon-collapse { display: none; }
.ws-body.rail-collapsed .ws-rail-collapse .icon-expand { display: inline; }

.ws-modules { display: flex; flex-direction: column; gap: 5px; }

/* Compact module rows (reuse .system-card markup) */
.system-card {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    min-width: 0;
    padding: 9px 11px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    text-decoration: none;
    cursor: pointer;
    position: relative;
    overflow: visible;
    transition: background 0.2s var(--ease), border-color 0.2s var(--ease), transform 0.15s var(--ease);
}
.system-card:hover,
.system-card:focus-visible {
    background: var(--dark-card-hover);
    border-color: var(--dark-border);
}
.system-card:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.system-card:active { transform: scale(0.985); }

/* Left accent bar on hover */
.card-accent {
    position: absolute;
    top: 6px;
    bottom: 6px;
    left: 0;
    width: 3px;
    border-radius: 0 3px 3px 0;
    transform: scaleY(0);
    transform-origin: center;
    transition: transform 0.2s var(--ease);
}
.system-card:hover .card-accent,
.system-card:focus-visible .card-accent { transform: scaleY(1); }

/* Per-card accent bar + icon colors via data-color.
   Accent bar = saturated base hue (reads on both themes).
   Icon color = darker/saturated in light (default), pastel under [data-theme="dark"]. */
.system-card[data-color="#6366f1"] .card-accent { background: #6366f1; }
.system-card[data-color="#6366f1"] .system-icon { color: #4f46e5; }
.system-card[data-color="#f59e0b"] .card-accent { background: #f59e0b; }
.system-card[data-color="#f59e0b"] .system-icon { color: #b45309; }
.system-card[data-color="#10b981"] .card-accent { background: #10b981; }
.system-card[data-color="#10b981"] .system-icon { color: #047857; }
.system-card[data-color="#8b5cf6"] .card-accent { background: #8b5cf6; }
.system-card[data-color="#8b5cf6"] .system-icon { color: #6d28d9; }
.system-card[data-color="#135b93"] .card-accent { background: #2a7fc0; }
.system-card[data-color="#135b93"] .system-icon { color: #135b93; }
.system-card[data-color="#ec4899"] .card-accent { background: #ec4899; }
.system-card[data-color="#ec4899"] .system-icon { color: #be185d; }
.system-card[data-color="#e11d48"] .card-accent { background: #e11d48; }
.system-card[data-color="#e11d48"] .system-icon { color: #be123c; }
.system-card[data-color="#06b6d4"] .card-accent { background: #06b6d4; }
.system-card[data-color="#06b6d4"] .system-icon { color: #0e7490; }

:root[data-theme="dark"] .system-card[data-color="#6366f1"] .system-icon { color: #818cf8; }
:root[data-theme="dark"] .system-card[data-color="#f59e0b"] .system-icon { color: #fbbf24; }
:root[data-theme="dark"] .system-card[data-color="#10b981"] .system-icon { color: #34d399; }
:root[data-theme="dark"] .system-card[data-color="#8b5cf6"] .system-icon { color: #a78bfa; }
:root[data-theme="dark"] .system-card[data-color="#135b93"] .system-icon { color: #4f9fd9; }
:root[data-theme="dark"] .system-card[data-color="#ec4899"] .system-icon { color: #f472b6; }
:root[data-theme="dark"] .system-card[data-color="#e11d48"] .system-icon { color: #fb7185; }
:root[data-theme="dark"] .system-card[data-color="#06b6d4"] .system-icon { color: #22d3ee; }

/* Soft tinted icon chip — per-module color via currentColor, no glass/glow */
.system-icon {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
    isolation: isolate;
    background: color-mix(in srgb, currentColor 12%, var(--surface-1));
    border: 1px solid color-mix(in srgb, currentColor 24%, var(--chip-rim));
    box-shadow: var(--chip-shadow);
    transition:
        transform .2s var(--ease),
        box-shadow .25s var(--ease),
        border-color .25s var(--ease),
        background .25s var(--ease);
}
/* faint top catch-light only */
.system-icon::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(180deg, var(--rim-highlight), transparent 55%);
    opacity: .6;
    pointer-events: none;
    z-index: 0;
}
.system-icon svg {
    position: relative;
    z-index: 1;
    width: 21px;
    height: 21px;
    stroke: currentColor;
}
.system-card:hover .system-icon,
.system-card:focus-visible .system-icon {
    transform: translateY(-1px);
    background: color-mix(in srgb, currentColor 18%, var(--surface-1));
    border-color: color-mix(in srgb, currentColor 38%, var(--chip-rim));
    box-shadow: var(--shadow-md);
}
/* Fallback: no color-mix → flat neutral tinted chip, never transparent */
@supports not (background: color-mix(in srgb, red, blue)) {
    .system-icon {
        background: var(--overlay-subtle);
        border: 1px solid var(--chip-rim);
        box-shadow: var(--shadow-sm);
    }
    .system-icon::before { background: currentColor; opacity: .12; }
}

.card-body { flex: 1; min-width: 0; }
.system-title {
    display: block;
    font-family: var(--font-display);
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--dark-text-strong);
    letter-spacing: -0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.system-description { display: none; }  /* hidden in the compact rail */
.system-card.search-hidden { display: none; }

/* User count badge */
.card-stat {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px;
    border-radius: 999px;
    background: var(--overlay-subtle);
    border: 1px solid var(--dark-border);
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--dark-text-dim);
    line-height: 1;
}
.card-stat svg { flex-shrink: 0; opacity: 0.7; }
.card-stat .stat-count { color: var(--dark-text-strong); font-variant-numeric: tabular-nums; }
.card-stat.is-empty { opacity: 0.45; }

.ws-rail-foot { margin-top: auto; padding: 14px 8px 4px; }
.ws-rail-foot p { font-size: 0.66rem; color: var(--dark-text-dim); line-height: 1.5; }
.ws-rail-foot a { color: var(--dark-text); text-decoration: none; font-weight: 600; }
.ws-rail-foot a:hover { color: var(--dark-text-strong); }

/* ── Collapsed icon-only rail (desktop) ── */
.ws-body.rail-collapsed .ws-rail-title,
.ws-body.rail-collapsed .card-body,
.ws-body.rail-collapsed .card-stat,
.ws-body.rail-collapsed .ws-rail-foot { display: none; }
.ws-body.rail-collapsed .ws-rail-head { justify-content: center; }
.ws-body.rail-collapsed .ws-left { padding: 16px 10px 12px; overflow: visible; }
.ws-body.rail-collapsed .system-card { justify-content: center; padding: 9px; gap: 0; }
.ws-body.rail-collapsed .system-card:hover::after,
.ws-body.rail-collapsed .system-card:focus-visible::after {
    content: attr(data-tip);
    position: absolute;
    left: calc(100% + 8px);
    top: 50%;
    transform: translateY(-50%);
    white-space: nowrap;
    padding: 5px 9px;
    border-radius: 8px;
    background: var(--surface-2);
    border: 1px solid var(--dark-border-strong);
    color: var(--dark-text-strong);
    font-size: 0.78rem;
    font-weight: 600;
    box-shadow: var(--shadow-md);
    z-index: 60;
    pointer-events: none;
}

/* ── Left rail skeleton ── */
.ws-skeleton { display: none; }
.ws-skeleton.visible { display: flex; flex-direction: column; gap: 5px; }
.skeleton-row {
    height: 56px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--dark-border);
    background:
        linear-gradient(100deg, transparent 20%, var(--overlay-hover) 40%, transparent 60%),
        var(--dark-card);
    background-size: 200% 100%, auto;
    animation: shimmer 1.4s linear infinite;
}

/* ── Center: hybrid workspace ── */
.ws-center {
    min-width: 0;
    min-height: 0;
    overflow-y: auto;
    padding: 26px 30px 40px;
}

.ws-hello { margin-bottom: 22px; animation: fadeInUp 0.5s var(--ease) both; }
.ws-hello-title {
    font-family: var(--font-display);
    font-size: 1.9rem;
    font-weight: 800;
    color: var(--dark-text-strong);
    letter-spacing: -0.03em;
    margin-bottom: 6px;
}
.ws-hello-sub { color: var(--dark-text-dim); font-size: 0.95rem; }

.ws-widgets {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
    gap: 14px;
    margin-bottom: 30px;
    animation: fadeInUp 0.5s var(--ease) 0.08s both;
}
.ws-widget {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 16px 18px;
    background: var(--dark-card);
    border: 1px solid var(--dark-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}
.ws-widget-icon {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--dark-text-dim);
    background: var(--overlay-subtle);
    margin-bottom: 8px;
}
.ws-widget-num {
    font-family: var(--font-display);
    font-size: 1.7rem;
    font-weight: 800;
    color: var(--dark-text-strong);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.ws-widget-label { font-size: 0.8rem; color: var(--dark-text-dim); }
.ws-widget--accent {
    background: var(--brand-light);
    border-color: var(--brand-glow);
}
.ws-widget--accent .ws-widget-icon { color: var(--brand-accent-fg); background: var(--brand-light); }
.ws-widget.is-soon { opacity: 0.62; }
.ws-soon {
    position: absolute;
    top: 12px;
    right: 12px;
    font-size: 0.58rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--dark-text-dim);
    background: var(--overlay-hover);
    border: 1px solid var(--dark-border);
    border-radius: 999px;
    padding: 3px 7px;
}

.ws-feed { animation: fadeInUp 0.5s var(--ease) 0.16s both; }
.ws-section-head {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 700;
    color: var(--dark-text-strong);
    letter-spacing: -0.01em;
    margin-bottom: 14px;
}
.ws-feed-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center;
    padding: 44px 24px;
    border: 1px dashed var(--dark-border-strong);
    border-radius: var(--radius);
    color: var(--dark-text-dim);
}
.ws-feed-empty[hidden] { display: none; }
.ws-feed-empty svg { color: var(--dark-text-dim); opacity: 0.7; }
.ws-feed-empty p { font-size: 0.875rem; max-width: 320px; line-height: 1.55; }

/* compact value (dates, text) inside a widget tile */
.ws-widget-num--sm { font-size: 1.05rem; letter-spacing: -0.01em; }

/* Activity feed: recent modules list */
.ws-feed-list { display: flex; flex-direction: column; gap: 6px; }
.ws-feed-list[hidden] { display: none; }
.ws-feed-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 14px;
    background: var(--dark-card);
    border: 1px solid var(--dark-border);
    border-radius: var(--radius-sm);
    text-decoration: none;
    box-shadow: var(--shadow-sm);
    transition: background 0.2s var(--ease), border-color 0.2s var(--ease);
}
.ws-feed-item:hover { background: var(--dark-card-hover); border-color: var(--dark-border-strong); }
.ws-feed-item:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.ws-feed-icon {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    position: relative;
    color: var(--brand);
}
.ws-feed-icon::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: currentColor; opacity: 0.12; }
.ws-feed-icon svg { position: relative; z-index: 1; width: 18px; height: 18px; stroke: currentColor; }
.ws-feed-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ws-feed-name { font-size: 0.875rem; font-weight: 600; color: var(--dark-text-strong); }
.ws-feed-cap { font-size: 0.72rem; color: var(--dark-text-dim); }

/* ── Right: assistant chat ── */
.ws-chat {
    display: flex;
    flex-direction: column;
    min-height: 0;
    border-left: 1px solid var(--dark-border);
    background: var(--dark-2);
}
.ws-chat-head {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 13px 16px;
    border-bottom: 1px solid var(--dark-border);
}
.ws-chat-orb {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    color: #fff;
    background: linear-gradient(140deg, var(--brand), var(--brand-hover));
}
.ws-chat-title {
    font-family: var(--font-display);
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--dark-text-strong);
}
.ws-chat-badge {
    margin-left: auto;
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--brand-accent-fg);
    background: var(--brand-light);
    border: 1px solid var(--brand-glow);
    border-radius: 999px;
    padding: 4px 9px;
}
.ws-chat-close {
    display: none;
    width: 32px;
    height: 32px;
    margin-left: 4px;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: var(--dark-text-dim);
    cursor: pointer;
}
.ws-chat-close:hover { color: var(--dark-text-strong); background: var(--overlay-hover); }

.ws-chat-body { flex: 1; min-height: 0; overflow-y: auto; padding: 18px 16px; }
.ws-chat-welcome {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    text-align: center;
    color: var(--dark-text-dim);
    margin-top: 24px;
}
.ws-chat-welcome[hidden] { display: none; }
.ws-chat-welcome-icon {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    color: var(--brand-accent-fg);
    background: var(--brand-light);
    border: 1px solid var(--brand-glow);
}
.ws-chat-welcome p { font-size: 0.85rem; line-height: 1.6; max-width: 240px; }

.ws-chat-input {
    flex-shrink: 0;
    display: flex;
    gap: 8px;
    padding: 12px;
    border-top: 1px solid var(--dark-border);
}
.ws-chat-input input {
    flex: 1;
    min-width: 0;
    height: 40px;
    padding: 0 14px;
    background: var(--dark-card);
    border: 1px solid var(--dark-border);
    border-radius: 999px;
    color: var(--dark-text-strong);
    font-size: 0.875rem;
    font-family: var(--font-body);
    outline: none;
}
.ws-chat-input input::placeholder { color: var(--dark-text-dim); }
.ws-chat-input input:disabled { cursor: not-allowed; opacity: 0.7; }
.ws-chat-send {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--brand);
    border: none;
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
    transition: background 0.2s var(--ease);
}
.ws-chat-send:hover:not(:disabled) { background: var(--brand-hover); }
.ws-chat-send:disabled { opacity: 0.45; cursor: not-allowed; }

/* Welcome starter chips */
.ws-chat-suggest { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 6px; }
.ws-chat-suggest-chip,
.ws-chat-chip {
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--overlay-subtle);
    border: 1px solid var(--dark-border);
    color: var(--dark-text-strong);
    font-size: 0.78rem;
    font-weight: 500;
    font-family: var(--font-body);
    cursor: pointer;
    transition: background 0.18s var(--ease), border-color 0.18s var(--ease);
}
.ws-chat-suggest-chip:hover,
.ws-chat-chip:hover { background: var(--overlay-hover-strong); border-color: var(--dark-border-strong); }
.ws-chat-suggest-chip:focus-visible,
.ws-chat-chip:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* Message bubbles */
.ws-chat-msg { display: flex; margin-bottom: 10px; }
.ws-chat-msg.is-user { justify-content: flex-end; }
.ws-chat-bubble {
    max-width: 84%;
    padding: 9px 13px;
    border-radius: 14px;
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--dark-text-strong);
    word-wrap: break-word;
    overflow-wrap: anywhere;
}
.ws-chat-msg.is-user .ws-chat-bubble {
    background: var(--brand);
    color: #fff;
    border-bottom-right-radius: 5px;
}
.ws-chat-msg.is-bot .ws-chat-bubble {
    background: var(--dark-card);
    border: 1px solid var(--dark-border);
    border-bottom-left-radius: 5px;
    box-shadow: var(--shadow-sm);
}
.ws-chat-line { margin: 0; }
.ws-chat-module {
    display: block;
    margin: 6px 0 9px;
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--dark-text-strong);
}
.ws-chat-action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 13px;
    border-radius: 8px;
    background: var(--brand);
    color: #fff;
    border: none;
    font-size: 0.8rem;
    font-weight: 600;
    font-family: var(--font-body);
    cursor: pointer;
    transition: background 0.18s var(--ease);
}
.ws-chat-action:hover { background: var(--brand-hover); }
.ws-chat-action:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.ws-chat-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }

/* Typing indicator */
.ws-chat-typing .ws-chat-bubble { display: inline-flex; align-items: center; gap: 4px; padding: 12px 14px; }
.ws-typing-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--dark-text-dim);
    animation: typingDot 1.2s infinite ease-in-out;
}
.ws-typing-dot:nth-child(2) { animation-delay: 0.18s; }
.ws-typing-dot:nth-child(3) { animation-delay: 0.36s; }
@keyframes typingDot {
    0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
    30%           { opacity: 1; transform: translateY(-3px); }
}

/* ── Center: profile (read-only) ── */
.ws-profile { display: none; animation: fadeInUp 0.4s var(--ease) both; }
.ws-center.profile-open .ws-home { display: none; }
.ws-center.profile-open .ws-profile { display: block; }

/* MintAI report constructor — WIP: markup exists but no styles/JS yet.
   Keep all three roots dormant so nothing renders unstyled in prod.
   Remove these `display:none`s when the feature is wired. */
.ws-report,
.ws-panel-mode,
.ws-builder { display: none; }
.ws-center.report-open .ws-home { display: none; }
.ws-center.report-open .ws-report { display: block; }

.ws-profile-back {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 13px 7px 10px;
    margin-bottom: 18px;
    background: var(--overlay-subtle);
    border: 1px solid var(--dark-border);
    border-radius: 999px;
    color: var(--dark-text);
    font-size: 0.82rem;
    font-weight: 500;
    font-family: var(--font-body);
    cursor: pointer;
    transition: background 0.18s var(--ease), border-color 0.18s var(--ease), color 0.18s var(--ease);
}
.ws-profile-back:hover { background: var(--overlay-hover); border-color: var(--dark-border-strong); color: var(--dark-text-strong); }
.ws-profile-back:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

.ws-profile-hero { display: flex; align-items: center; gap: 18px; margin-bottom: 26px; }
.ws-profile-avatar { width: 64px; height: 64px; font-size: 1.4rem; }
.ws-profile-name {
    font-family: var(--font-display);
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--dark-text-strong);
    letter-spacing: -0.02em;
    margin-bottom: 3px;
}
.ws-profile-meta { color: var(--dark-text-dim); font-size: 0.9rem; }

.ws-profile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
    align-items: start;
}
.ws-profile-card {
    background: var(--dark-card);
    border: 1px solid var(--dark-border);
    border-radius: var(--radius);
    padding: 20px 22px;
    box-shadow: var(--shadow-sm);
}
.ws-profile-h {
    font-family: var(--font-display);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    font-weight: 700;
    color: var(--dark-text-dim);
    margin-bottom: 14px;
}
.ws-profile-dl { margin: 0; display: flex; flex-direction: column; }
.ws-profile-dl > div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    padding: 9px 0;
    border-top: 1px solid var(--dark-border);
}
.ws-profile-dl > div:first-child { border-top: none; }
.ws-profile-dl dt { color: var(--dark-text-dim); font-size: 0.8125rem; flex-shrink: 0; }
.ws-profile-dl dd {
    margin: 0;
    color: var(--dark-text-strong);
    font-weight: 500;
    font-size: 0.8125rem;
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ws-profile-access { display: flex; flex-direction: column; gap: 6px; }
.ws-profile-proj {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 12px;
    background: var(--overlay-subtle);
    border: 1px solid var(--dark-border);
    border-radius: 9px;
    font-size: 0.8125rem;
}
.ws-profile-proj-name { color: var(--dark-text-strong); font-weight: 500; }
.ws-profile-proj-role { color: var(--dark-text-dim); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.03em; flex-shrink: 0; }
.ws-profile-since { margin-top: 12px; color: var(--dark-text-dim); font-size: 0.8rem; }

.ws-profile-action {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 12px 14px;
    border-radius: var(--radius-sm);
    background: var(--overlay-subtle);
    border: 1px solid var(--dark-border);
    color: var(--dark-text);
    font-size: 0.875rem;
    font-weight: 500;
    font-family: var(--font-body);
    cursor: pointer;
}
.ws-profile-action svg { color: var(--dark-text-dim); flex-shrink: 0; }
.ws-profile-action:disabled { cursor: not-allowed; opacity: 0.75; }
.ws-profile-action .ws-soon { position: static; margin-left: auto; }

/* ══════════════════════════════════════════════════════════
   Account dropdown (anchored to the top-right avatar)
   ══════════════════════════════════════════════════════════ */
.user-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--brand);
    color: #fff;
    font-family: var(--font-display);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    flex-shrink: 0;
}

.user-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px;
    background: var(--dark-card);
    border: 1px solid var(--dark-border);
    border-radius: 50%;
    cursor: pointer;
}
.user-toggle .user-avatar { width: 34px; height: 34px; }
.user-toggle:hover { border-color: var(--dark-border-strong); }
.user-toggle:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

.user-panel {
    position: fixed;
    top: calc(var(--topbar-h) + 6px);
    right: 14px;
    width: 320px;
    max-width: calc(100vw - 24px);
    max-height: calc(100dvh - var(--topbar-h) - 18px);
    overflow-y: auto;
    display: none;
    flex-direction: column;
    gap: 20px;
    padding: 20px;
    background: var(--dark-card);
    border: 1px solid var(--dark-border-strong);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    z-index: 60;
    animation: fadeSlide 0.2s var(--ease);
}
.user-panel.open { display: flex; }
.user-panel[hidden] { display: none; }

/* 1. Greeting */
.up-greeting { display: flex; align-items: center; gap: 14px; }
.up-avatar { width: 46px; height: 46px; font-size: 1rem; }
.up-greeting-text { min-width: 0; }
.up-hello { font-size: 0.8rem; color: var(--dark-text-dim); }
.up-name {
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--dark-text-strong);
    letter-spacing: -0.01em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* mini-stat summary */
.up-summary {
    display: flex;
    align-items: baseline;
    gap: 9px;
    padding: 12px 14px;
    background: var(--brand-light);
    border: 1px solid var(--brand-glow);
    border-radius: var(--radius-sm);
}
.up-sum-num {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--dark-text-strong);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.up-sum-label { font-size: 0.8rem; color: var(--dark-text-dim); }

/* 2. User data */
.up-info {
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--dark-border);
    border-bottom: 1px solid var(--dark-border);
    padding: 8px 0;
}
.up-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 0; font-size: 0.8125rem; }
.up-row[hidden] { display: none; }
.up-label { color: var(--dark-text-dim); flex-shrink: 0; }
.up-value { color: var(--dark-text-strong); font-weight: 500; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* recent modules */
.up-recent-section { display: flex; flex-direction: column; gap: 8px; }
.up-recent-section[hidden] { display: none; }
.up-section-title { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--dark-text-dim); margin-bottom: 2px; }
.up-recent { display: flex; flex-direction: column; gap: 4px; }
.up-recent-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 9px;
    text-decoration: none;
    border: 1px solid transparent;
    transition: background 0.2s var(--ease), border-color 0.2s var(--ease);
}
.up-recent-item:hover { background: var(--overlay-hover); border-color: var(--dark-border); }
.up-recent-item:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.up-recent-icon {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    position: relative;
    color: var(--brand);
}
.up-recent-icon::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: currentColor;
    opacity: 0.12;
}
.up-recent-icon svg { position: relative; z-index: 1; width: 17px; height: 17px; stroke: currentColor; }
.up-recent-name {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--dark-text-strong);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* language inside the dropdown (mobile, where the topbar switcher is hidden) */
.up-lang { display: none; }

/* 3. Quick actions */
.up-quick { display: flex; flex-direction: column; gap: 8px; }
.up-action {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 11px 14px;
    border-radius: var(--radius-sm);
    background: var(--overlay-subtle);
    border: 1px solid var(--dark-border);
    color: var(--dark-text);
    font-size: 0.875rem;
    font-weight: 500;
    font-family: var(--font-body);
    text-decoration: none;
    cursor: pointer;
    transition: background 0.2s var(--ease), border-color 0.2s var(--ease), color 0.2s var(--ease);
}
.up-action svg { flex-shrink: 0; color: var(--dark-text-dim); transition: color 0.2s var(--ease); }
.up-action:hover { background: var(--overlay-hover-strong); border-color: var(--dark-border-strong); color: var(--dark-text-strong); }
.up-action:hover svg { color: var(--brand); }
.up-action:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.up-logout:hover { background: var(--error-bg); border-color: var(--error-border); color: var(--error-text); }
.up-logout:hover svg { color: var(--error-text); }

/* Panel views: main account ↔ statistics (legacy flip, unused) */
.up-view { display: flex; flex-direction: column; gap: 20px; }
.up-view--stats { display: none; }
.user-panel.stats .up-view--main { display: none; }
.user-panel.stats .up-view--stats { display: flex; }
.up-view--main { animation: fadeSlide 0.28s var(--ease); }
.user-panel.stats .up-view--stats { animation: fadeSlide 0.28s var(--ease); }

@keyframes fadeSlide {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}

.up-stats-head { display: flex; align-items: center; gap: 12px; }
.up-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    background: var(--overlay-hover);
    border: 1px solid var(--dark-border);
    border-radius: 9px;
    color: var(--dark-text);
    cursor: pointer;
    transition: background 0.2s var(--ease), color 0.2s var(--ease);
}
.up-back:hover { background: var(--overlay-hover-strong); color: var(--dark-text-strong); }
.up-back:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.up-stats-title {
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--dark-text-strong);
    letter-spacing: -0.01em;
}

.up-projects { display: flex; flex-direction: column; gap: 8px; }
.up-proj-list { display: flex; flex-direction: column; gap: 6px; }
.up-proj {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 12px;
    background: var(--overlay-subtle);
    border: 1px solid var(--dark-border);
    border-radius: 9px;
    font-size: 0.8125rem;
}
.up-proj-name { color: var(--dark-text-strong); font-weight: 500; }
.up-proj-role { color: var(--dark-text-dim); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.03em; flex-shrink: 0; }

/* ── Empty state (left rail) ── */
.dashboard-empty {
    text-align: center;
    margin: 24px auto;
    padding: 0 8px;
    animation: fadeInUp 0.5s var(--ease) both;
}
.dashboard-empty[hidden] { display: none; }
.empty-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: var(--dark-card);
    border: 1px solid var(--dark-border);
    color: var(--dark-text-dim);
}
.dashboard-empty h2 {
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--dark-text-strong);
    margin-bottom: 8px;
}
.dashboard-empty p { color: var(--dark-text-dim); font-size: 0.82rem; line-height: 1.6; }

/* ── Card stagger animation (left rail) ── */
.system-card.anim-card-1 { animation: fadeInUp 0.4s var(--ease) 0.10s both; }
.system-card.anim-card-2 { animation: fadeInUp 0.4s var(--ease) 0.15s both; }
.system-card.anim-card-3 { animation: fadeInUp 0.4s var(--ease) 0.20s both; }
.system-card.anim-card-4 { animation: fadeInUp 0.4s var(--ease) 0.25s both; }
.system-card.anim-card-5 { animation: fadeInUp 0.4s var(--ease) 0.30s both; }
.system-card.anim-card-6 { animation: fadeInUp 0.4s var(--ease) 0.35s both; }
.system-card.anim-card-7 { animation: fadeInUp 0.4s var(--ease) 0.40s both; }
.system-card.anim-card-8 { animation: fadeInUp 0.4s var(--ease) 0.45s both; }

/* ── Footer ── */
footer {
    pointer-events: none;
    position: fixed;
    bottom: 16px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    z-index: 10;
    animation: fadeInUp 0.5s var(--ease) 1.2s both;
}
footer > div {
    pointer-events: auto;
    background: var(--surface-2);
    backdrop-filter: blur(12px);
    border: 1px solid var(--dark-border);
    border-radius: 20px;
    padding: 6px 16px;
    box-shadow: var(--shadow-sm);
}
footer p {
    font-size: 0.7rem;
    color: var(--dark-text-dim);
    font-weight: 500;
    text-align: center;
}
footer a {
    color: var(--dark-text);
    text-decoration: none;
    font-weight: 600;
    transition: color 0.2s var(--ease);
}
footer a:hover { color: var(--dark-text-strong); }
/* On the workspace shell the global footer is replaced by the rail footer. */
body.dash-mode footer { display: none; }

/* ── Spinner ── */
.spinner {
    border: 2px solid var(--dark-border);
    border-top: 2px solid var(--brand);
    border-radius: 50%;
    width: 24px;
    height: 24px;
    animation: spin 0.8s linear infinite;
    margin: 24px auto;
}

/* ── Keyframes ── */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes shimmer {
    0%   { background-position: 200% 0, 0 0; }
    100% { background-position: -200% 0, 0 0; }
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ══════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════ */

@media (min-width: 900px) {
    .login-brand-panel { display: flex; }
    .login-form-panel {
        width: 480px;
        flex-shrink: 0;
        border-left: 1px solid var(--dark-border);
    }
    .login-form-panel .header-brand { display: none; }
}

@media (max-width: 899px) {
    .login-brand-panel { display: none; }
    .login-form-panel { width: 100%; }
    .login-split { min-height: 100vh; min-height: 100dvh; }
}

/* ── Chat collapses to an overlay drawer ≤1160px ── */
@media (max-width: 1160px) {
    .ws-body { --rail-w: 240px; grid-template-columns: var(--rail-w) minmax(0, 1fr); }
    .ws-body.rail-collapsed { --rail-w: var(--rail-w-collapsed); }
    #chat-toggle { display: inline-flex; }
    .ws-chat {
        position: fixed;
        top: var(--topbar-h);
        right: 0;
        bottom: 0;
        width: 340px;
        max-width: 90vw;
        transform: translateX(100%);
        transition: transform 0.28s var(--ease);
        box-shadow: var(--shadow-lg);
        z-index: 55;
    }
    .ws-chat.open { transform: translateX(0); }
    .ws-chat-close { display: inline-flex; }
}

/* ── Single column ≤900px ── */
@media (max-width: 900px) {
    .ws-topbar { gap: 10px; padding: 0 12px; }
    .ws-search { display: none; }            /* search hidden on small screens */
    .ws-top-actions .lang-switcher { display: none; }
    .up-lang { display: flex; align-self: stretch; justify-content: center; }
    .up-lang .lang-btn { flex: 1; padding: 9px 0; text-align: center; }

    .dashboard-section.ws.active { height: auto; min-height: 100dvh; overflow: visible; }
    .ws-body {
        display: flex;
        flex-direction: column;
        min-height: 0;
        overflow: visible;
    }
    .ws-left {
        order: 1;
        border-right: none;
        border-bottom: 1px solid var(--dark-border);
        overflow: visible;
        padding: 14px 14px 8px;
    }
    .ws-modules { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
    .ws-skeleton.visible { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
    .ws-modules .card-stat { display: none; }   /* compact launcher chips: icon + title only */
    .ws-modules .system-card { padding: 11px 13px; }
    .ws-rail-foot { display: none; }
    .ws-center { order: 2; overflow: visible; padding: 22px 16px 40px; }
    .ws-hello-title { font-size: 1.6rem; }

    /* Collapse is desktop-only: neutralize it on the stacked mobile rail.
       (card-stat stays hidden on mobile — launcher chips show icon + title only.) */
    .ws-rail-collapse { display: none; }
    .ws-body.rail-collapsed .ws-rail-title { display: block; }
    .ws-body.rail-collapsed .card-body { display: block; }
    .ws-body.rail-collapsed .ws-rail-head { justify-content: space-between; }
    .ws-body.rail-collapsed .system-card { justify-content: flex-start; padding: 11px 13px; gap: 12px; }
    .ws-body.rail-collapsed .ws-left { padding: 14px 14px 8px; overflow: visible; }
    .ws-body.rail-collapsed .system-card:hover::after,
    .ws-body.rail-collapsed .system-card:focus-visible::after { content: none; }
}

@media (max-width: 560px) {
    .ws-wordmark { display: none; }
    .ws-modules { grid-template-columns: repeat(2, 1fr); }
    .ws-skeleton.visible { grid-template-columns: repeat(2, 1fr); }
    .ws-center { padding: 18px 13px 36px; }
    .ws-hello-title { font-size: 1.45rem; }
    .ws-widgets { grid-template-columns: 1fr 1fr; gap: 10px; }
    .ws-icon-btn { width: 36px; height: 36px; }
    .user-panel { width: 300px; padding: 18px; gap: 18px; }
    .lang-btn { padding: 9px 13px; font-size: 0.72rem; }
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ══════════════════════════════════════════════════════════
   MINTAI — report constructor (right panel) + report view (center)
   ══════════════════════════════════════════════════════════ */

/* Chat ↔ constructor segmented toggle */
.ws-panel-mode {
    display: flex;
    gap: 3px;
    margin: 10px 14px 0;
    padding: 3px;
    background: var(--dark-card);
    border: 1px solid var(--dark-border);
    border-radius: 9px;
    flex-shrink: 0;
}
.ws-panel-mode[hidden] { display: none; }
.ws-mode-btn {
    flex: 1;
    padding: 7px 10px;
    background: transparent;
    border: none;
    border-radius: 7px;
    color: var(--dark-text-dim);
    font-family: var(--font-display);
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.18s var(--ease), color 0.18s var(--ease);
}
.ws-mode-btn:hover { color: var(--dark-text-strong); }
.ws-mode-btn.active { background: var(--brand); color: #fff; }
.ws-mode-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* Constructor form */
.ws-builder {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.ws-builder[hidden] { display: none; }
.ws-builder-field { display: flex; flex-direction: column; gap: 7px; }
.ws-builder-label {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--dark-text-dim);
    font-weight: 600;
}
.ws-builder-select {
    width: 100%;
    height: 38px;
    padding: 0 12px;
    background: var(--dark-card);
    border: 1px solid var(--dark-border);
    border-radius: var(--radius-sm);
    color: var(--dark-text-strong);
    font-size: 0.875rem;
    font-family: var(--font-body);
    outline: none;
}
.ws-builder-select:focus { border-color: var(--brand); }

.ws-builder-metrics { display: flex; flex-direction: column; gap: 4px; }
.ws-builder-check {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 10px;
    border-radius: 8px;
    border: 1px solid transparent;
    cursor: pointer;
    font-size: 0.85rem;
    color: var(--dark-text);
    transition: background 0.15s var(--ease), border-color 0.15s var(--ease);
}
.ws-builder-check:hover { background: rgba(255,255,255,0.04); border-color: var(--dark-border); }
.ws-builder-check input { width: 16px; height: 16px; accent-color: var(--brand); flex-shrink: 0; }

.ws-builder-period { display: flex; gap: 5px; }
.ws-period-chip {
    flex: 1;
    padding: 7px 4px;
    background: var(--dark-card);
    border: 1px solid var(--dark-border);
    border-radius: 8px;
    color: var(--dark-text-dim);
    font-size: 0.78rem;
    font-weight: 600;
    font-family: var(--font-body);
    cursor: pointer;
    transition: background 0.15s var(--ease), color 0.15s var(--ease), border-color 0.15s var(--ease);
}
.ws-period-chip:hover { color: var(--dark-text-strong); }
.ws-period-chip.active { background: var(--brand-light); border-color: rgba(19,91,147,0.4); color: var(--dark-text-strong); }
.ws-builder-dates { display: flex; gap: 6px; margin-top: 8px; }
.ws-builder-dates[hidden] { display: none; }
.ws-builder-dates input {
    flex: 1; min-width: 0; height: 36px; padding: 0 10px;
    background: var(--dark-card); border: 1px solid var(--dark-border);
    border-radius: 8px; color: var(--dark-text-strong); font-size: 0.8rem;
    color-scheme: dark; outline: none;
}

.ws-builder-preview { display: flex; flex-wrap: wrap; gap: 5px; }
.ws-preview-col {
    font-size: 0.7rem;
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--dark-border);
    color: var(--dark-text);
}
.ws-builder-run {
    width: 100%;
    padding: 12px;
    background: var(--brand);
    border: none;
    border-radius: var(--radius-sm);
    color: #fff;
    font-family: var(--font-display);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s var(--ease);
}
.ws-builder-run:hover:not(:disabled) { background: var(--brand-hover); }
.ws-builder-run:disabled { opacity: 0.45; cursor: not-allowed; }
.ws-builder-templates { display: flex; gap: 6px; align-items: center; }
.ws-builder-templates .ws-builder-select { flex: 1; height: 34px; font-size: 0.8rem; }
.ws-builder-save {
    flex-shrink: 0;
    padding: 8px 10px;
    background: transparent;
    border: 1px solid var(--dark-border);
    border-radius: 8px;
    color: var(--dark-text-dim);
    font-size: 0.72rem;
    cursor: pointer;
    transition: color 0.15s var(--ease), border-color 0.15s var(--ease);
}
.ws-builder-save:hover { color: var(--dark-text-strong); border-color: var(--dark-border-strong); }

/* Center report view */
.ws-report { display: none; animation: fadeInUp 0.4s var(--ease) both; }
.ws-center.report-open .ws-home,
.ws-center.report-open .ws-profile { display: none; }
.ws-center.report-open .ws-report { display: block; }

.ws-report-head {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}
.ws-report-titles { flex: 1 1 200px; min-width: 0; }
.ws-report-title {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--dark-text-strong);
    letter-spacing: -0.02em;
}
.ws-report-period { color: var(--dark-text-dim); font-size: 0.85rem; margin-top: 2px; }

.ws-report-view { display: flex; gap: 2px; padding: 3px; background: var(--dark-card); border: 1px solid var(--dark-border); border-radius: 8px; }
.ws-rv-btn {
    padding: 6px 14px; background: transparent; border: none; border-radius: 6px;
    color: var(--dark-text-dim); font-size: 0.78rem; font-weight: 600; cursor: pointer;
    transition: background 0.15s var(--ease), color 0.15s var(--ease);
}
.ws-rv-btn.active { background: var(--brand); color: #fff; }
.ws-rv-btn:disabled { opacity: 0.4; cursor: not-allowed; }

.ws-report-actions { display: flex; gap: 8px; }
.ws-report-dl {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 14px; background: rgba(255,255,255,0.03);
    border: 1px solid var(--dark-border); border-radius: 8px;
    color: var(--dark-text); font-size: 0.8rem; font-weight: 500; cursor: pointer;
    transition: background 0.15s var(--ease), border-color 0.15s var(--ease), color 0.15s var(--ease);
}
.ws-report-dl:hover:not(:disabled) { background: rgba(255,255,255,0.06); color: var(--dark-text-strong); border-color: var(--dark-border-strong); }
.ws-report-dl:disabled { opacity: 0.4; cursor: not-allowed; }

.ws-report-warnings {
    margin-bottom: 14px; padding: 10px 14px; border-radius: var(--radius-sm);
    background: rgba(245, 158, 11, 0.1); border: 1px solid rgba(245, 158, 11, 0.3);
    color: #fbbf24; font-size: 0.82rem;
}
.ws-report-warnings[hidden] { display: none; }
.ws-report-warnings.is-error { background: rgba(220,38,38,0.1); border-color: rgba(220,38,38,0.3); color: #fca5a5; }

.ws-report-loading { display: flex; justify-content: center; padding: 40px; }
.ws-report-loading[hidden] { display: none; }

.ws-report-table-wrap { overflow-x: auto; border: 1px solid var(--dark-border); border-radius: var(--radius); }
.ws-report-table-wrap[hidden] { display: none; }
.ws-report-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.ws-report-table th {
    position: sticky; top: 0;
    background: #135b93; color: #fff;
    text-align: right; padding: 11px 14px; font-family: var(--font-display);
    font-weight: 600; font-size: 0.8rem; white-space: nowrap;
}
.ws-report-table th.rc-col-group { text-align: left; }
.ws-report-table td { padding: 10px 14px; text-align: right; border-top: 1px solid var(--dark-border); color: var(--dark-text); font-variant-numeric: tabular-nums; }
.ws-report-table td.rc-col-group { text-align: left; color: var(--dark-text-strong); font-weight: 500; }
.ws-report-table tbody tr:nth-child(even) { background: rgba(255,255,255,0.02); }
.ws-report-table td.rc-empty { text-align: center; color: var(--dark-text-dim); padding: 28px; }
.ws-report-table tfoot td { background: var(--brand-light); font-weight: 700; color: var(--dark-text-strong); border-top: 1px solid rgba(19,91,147,0.3); }

.ws-report-pdf { width: 100%; height: 72vh; border: 1px solid var(--dark-border); border-radius: var(--radius); background: #fff; }
.ws-report-pdf[hidden] { display: none; }

@media (max-width: 900px) {
    .ws-report-pdf { height: 60vh; }
    .ws-report-title { font-size: 1.25rem; }
}