/* --- Liquid Glass design tokens --- */
:root {
    --glass-blur: 36px;
    --glass-blur-strong: 48px;
    --glass-saturate: 195%;
    --glass-bg: rgba(255, 255, 255, 0.42);
    --glass-bg-strong: rgba(255, 255, 255, 0.58);
    --glass-bg-subtle: rgba(255, 255, 255, 0.28);
    --glass-border: rgba(255, 255, 255, 0.78);
    --glass-border-soft: rgba(255, 255, 255, 0.42);
    --glass-shadow: 0 12px 40px rgba(15, 23, 42, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.85), inset 0 -1px 0 rgba(255, 255, 255, 0.15);
    --glass-shadow-sm: 0 6px 24px rgba(15, 23, 42, 0.07), inset 0 1px 0 rgba(255, 255, 255, 0.65);
    --glass-shadow-lg: 0 24px 60px rgba(79, 70, 229, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.9);
    --accent: #6366f1;
    --accent-hover: #4f46e5;
    --accent-soft: rgba(99, 102, 241, 0.16);
    --accent-glow: rgba(99, 102, 241, 0.35);
    --hero-gradient: linear-gradient(135deg, #4f46e5 0%, #7c3aed 38%, #6366f1 68%, #818cf8 100%);
    --layout-chrome: 12.5rem;
    --view-gap: 1.5rem;
    --view-card-padding: 1.5rem;
}

.dark {
    --glass-bg: rgba(15, 23, 42, 0.48);
    --glass-bg-strong: rgba(30, 41, 59, 0.62);
    --glass-bg-subtle: rgba(15, 23, 42, 0.32);
    --glass-border: rgba(255, 255, 255, 0.12);
    --glass-border-soft: rgba(255, 255, 255, 0.06);
    --glass-shadow: 0 12px 40px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 -1px 0 rgba(255, 255, 255, 0.02);
    --glass-shadow-sm: 0 6px 24px rgba(0, 0, 0, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.07);
    --glass-shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    --accent-soft: rgba(99, 102, 241, 0.26);
    --accent-glow: rgba(129, 140, 248, 0.4);
    --hero-gradient: linear-gradient(135deg, #312e81 0%, #5b21b6 40%, #3730a3 70%, #4338ca 100%);
}

/* --- Ambient canvas --- */
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition: background-color 0.3s ease, color 0.3s ease;
    background-color: #e8edf5;
    background-image:
        radial-gradient(ellipse 100% 70% at 0% -10%, rgba(99, 102, 241, 0.2), transparent 52%),
        radial-gradient(ellipse 80% 55% at 100% 0%, rgba(167, 139, 250, 0.16), transparent 48%),
        radial-gradient(ellipse 60% 50% at 50% 100%, rgba(148, 163, 184, 0.1), transparent 50%);
    background-attachment: fixed;
    position: relative;
    overflow-x: hidden;
}

.dark body {
    background-color: #070b14;
    background-image:
        radial-gradient(ellipse 100% 70% at 0% -10%, rgba(99, 102, 241, 0.22), transparent 52%),
        radial-gradient(ellipse 80% 55% at 100% 0%, rgba(124, 58, 237, 0.14), transparent 48%),
        radial-gradient(ellipse 60% 50% at 50% 100%, rgba(15, 23, 42, 0.6), transparent 50%);
}

.ambient-orbs {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.ambient-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: 0.55;
    animation: float-orb 18s ease-in-out infinite;
}

.ambient-orb--1 {
    width: 420px;
    height: 420px;
    background: rgba(99, 102, 241, 0.35);
    top: -8%;
    left: -6%;
    animation-delay: 0s;
}

.ambient-orb--2 {
    width: 320px;
    height: 320px;
    background: rgba(167, 139, 250, 0.28);
    top: 12%;
    right: -4%;
    animation-delay: -6s;
    animation-duration: 22s;
}

.ambient-orb--3 {
    width: 280px;
    height: 280px;
    background: rgba(129, 140, 248, 0.22);
    bottom: 5%;
    left: 30%;
    animation-delay: -12s;
    animation-duration: 20s;
}

.dark .ambient-orb { opacity: 0.35; }

main, header {
    position: relative;
    z-index: 1;
}

@keyframes float-orb {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(24px, -18px) scale(1.04); }
    66% { transform: translate(-16px, 12px) scale(0.98); }
}

@keyframes gradient-shift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

@keyframes pulse-glow {
    0%, 100% { opacity: 0.6; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.08); }
}

/* --- Glass surfaces --- */
.glass {
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow-sm);
}

.glass-card {
    position: relative;
    background: var(--glass-bg-strong);
    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
}

.glass-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.75), transparent);
    pointer-events: none;
    z-index: 1;
}

.glass-header-tile {
    width: 100%;
}

.glass-hero {
    background: var(--glass-bg-strong);
    backdrop-filter: blur(var(--glass-blur-strong)) saturate(var(--glass-saturate));
    -webkit-backdrop-filter: blur(var(--glass-blur-strong)) saturate(var(--glass-saturate));
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow-lg);
}

/* --- Day overview: gradient + glass overlay (Apple-style hero) --- */
.glass-day-hero {
    position: relative;
    overflow: hidden;
    border-radius: 1.5rem;
    border: 1px solid rgba(255, 255, 255, 0.38);
    box-shadow:
        0 24px 56px rgba(79, 70, 229, 0.28),
        0 8px 24px rgba(124, 58, 237, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

.glass-day-hero__gradient {
    position: absolute;
    inset: 0;
    background: var(--hero-gradient);
    background-size: 220% 220%;
    animation: gradient-shift 14s ease infinite;
    z-index: 0;
}

.glass-day-hero__gradient::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 85% 15%, rgba(255, 255, 255, 0.28), transparent 42%),
        radial-gradient(circle at 10% 80%, rgba(255, 255, 255, 0.08), transparent 35%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, transparent 45%, rgba(0, 0, 0, 0.08) 100%);
}

.glass-day-hero__orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(40px);
    pointer-events: none;
    z-index: 1;
}

.glass-day-hero__orb--a {
    width: 180px;
    height: 180px;
    background: rgba(255, 255, 255, 0.2);
    top: -40px;
    right: 8%;
    animation: float-orb 10s ease-in-out infinite;
}

.glass-day-hero__orb--b {
    width: 120px;
    height: 120px;
    background: rgba(196, 181, 253, 0.35);
    bottom: -20px;
    left: 12%;
    animation: float-orb 14s ease-in-out infinite reverse;
}

.glass-day-hero__content {
    position: relative;
    z-index: 2;
    padding: 1.25rem 1.5rem;
}

@media (min-width: 768px) {
    .glass-day-hero__content { padding: 1.5rem; }
}

.glass-day-hero .glass-day-badge {
    background: rgba(255, 255, 255, 0.22);
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.38);
    color: rgba(255, 255, 255, 0.95);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.glass-day-hero .glass-day-title {
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}

.glass-day-hero .glass-day-subtitle {
    color: rgba(255, 255, 255, 0.92);
}

.glass-agent-panel {
    background: rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(var(--glass-blur-strong)) saturate(200%);
    -webkit-backdrop-filter: blur(var(--glass-blur-strong)) saturate(200%);
    border: 1px solid rgba(255, 255, 255, 0.42);
    border-radius: 1rem;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.5),
        0 8px 32px rgba(0, 0, 0, 0.08);
    color: rgba(255, 255, 255, 0.98);
}

.dark .glass-agent-panel {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.18);
}

.glass-day-hero .glass-agent-panel,
.glass-day-hero .glass-inset-light:not(#gemini-result-box):not(#autocomplete-dropdown) {
    color: rgba(255, 255, 255, 0.98);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}

.glass-day-hero .glass-agent-panel .text-slate-300,
.glass-day-hero .glass-agent-panel .text-slate-400,
.glass-day-hero .glass-agent-panel .text-slate-500,
.glass-day-hero .glass-agent-panel .text-slate-600,
.glass-day-hero .glass-agent-panel .text-slate-700,
.glass-day-hero .glass-inset-light .text-slate-300,
.glass-day-hero .glass-inset-light .text-slate-400,
.glass-day-hero .glass-inset-light .text-slate-500,
.glass-day-hero .glass-inset-light .text-slate-600,
.glass-day-hero .glass-inset-light .text-slate-700 {
    color: rgba(255, 255, 255, 0.94) !important;
}

.glass-day-hero .glass-inset-light {
    background: rgba(255, 255, 255, 0.16);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.32);
    color: rgba(255, 255, 255, 0.98);
}

.glass-day-hero .glass-inset-light input,
.glass-day-hero .glass-inset-light select {
    background: rgba(255, 255, 255, 0.96) !important;
    color: #0f172a !important;
    border: 1px solid rgba(255, 255, 255, 0.65) !important;
    text-shadow: none;
}

.glass-day-hero .glass-inset-light input::placeholder {
    color: #64748b !important;
}

.glass-day-hero #gemini-query {
    background: rgba(255, 255, 255, 0.96) !important;
    color: #0f172a !important;
    border: 1px solid rgba(255, 255, 255, 0.65) !important;
    text-shadow: none;
}

.glass-day-hero #gemini-query::placeholder {
    color: #64748b !important;
}

.glass-day-hero .glass-hero-chip {
    background: rgba(255, 255, 255, 0.22);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.38);
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

.glass-day-hero .glass-hero-chip button {
    color: rgba(255, 255, 255, 0.85) !important;
}

.glass-day-hero .glass-hero-chip button:hover {
    color: #fecaca !important;
}

.glass-day-hero #gemini-result-box,
.glass-day-hero #gemini-result-box * {
    text-shadow: none;
}

.glass-day-hero #gemini-result-box {
    background: rgba(255, 255, 255, 0.96);
    color: #0f172a;
    border: 1px solid rgba(255, 255, 255, 0.75);
}

.glass-day-hero #gemini-result-box .text-slate-500 {
    color: #64748b !important;
}

.glass-day-hero #gemini-result-box .text-slate-700,
.glass-day-hero #gemini-result-box #gemini-result-text {
    color: #1e293b !important;
}

.glass-day-hero #gemini-result-box .text-slate-400 {
    color: #64748b !important;
}

.glass-day-hero .glass-agent-panel {
    overflow: visible;
}

.glass-day-hero #autocomplete-dropdown,
.glass-day-hero #autocomplete-dropdown * {
    text-shadow: none;
}

.glass-day-hero #autocomplete-dropdown.agent-autocomplete-dropdown {
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(100% + 0.375rem);
    z-index: 60;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    max-height: 11.5rem;
    overflow: hidden;
    border-radius: 0.75rem;
    border: 1px solid rgba(226, 232, 240, 0.95);
    background: rgba(255, 255, 255, 0.98);
    color: #0f172a;
    box-shadow: 0 12px 40px rgba(15, 23, 42, 0.18);
}

.glass-day-hero #autocomplete-dropdown .agent-autocomplete-list {
    flex: 1;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.glass-day-hero #autocomplete-dropdown .agent-autocomplete-header {
    padding: 0.5rem 0.875rem;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #6366f1 !important;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    flex-shrink: 0;
    position: sticky;
    top: 0;
    z-index: 2;
}

.glass-day-hero #autocomplete-dropdown.agent-autocomplete-dropdown.hidden {
    display: none !important;
}

.dark .glass-day-hero #autocomplete-dropdown.agent-autocomplete-dropdown {
    background: rgba(15, 23, 42, 0.98);
    border-color: #334155;
    color: #e2e8f0;
}

.dark .glass-day-hero #autocomplete-dropdown .agent-autocomplete-header {
    background: #0f172a;
    border-bottom-color: #334155;
    color: #a5b4fc !important;
}

.glass-day-hero #autocomplete-dropdown .agent-autocomplete-list.custom-scrollbar::-webkit-scrollbar {
    width: 6px;
}

.glass-day-hero #autocomplete-dropdown .agent-autocomplete-item {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.625rem;
    width: 100%;
    box-sizing: border-box;
    padding: 0.5rem 0.875rem 0.5rem 0.625rem;
    text-align: left;
    font: inherit;
    color: #1e293b !important;
    background: transparent;
    border: 0;
    border-bottom: 1px solid #f1f5f9;
    border-left: 3px solid #6366f1;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.dark .glass-day-hero #autocomplete-dropdown .agent-autocomplete-item {
    color: #e2e8f0 !important;
    border-bottom-color: #1e293b;
}

.glass-day-hero #autocomplete-dropdown .agent-autocomplete-item:hover {
    background: #f8fafc;
}

.dark .glass-day-hero #autocomplete-dropdown .agent-autocomplete-item:hover {
    background: #1e293b;
}

.glass-day-hero #autocomplete-dropdown .agent-autocomplete-item:last-child {
    border-bottom: 0;
}

.glass-day-hero #autocomplete-dropdown .agent-autocomplete-item-leading {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    flex-shrink: 0;
}

.glass-day-hero #autocomplete-dropdown .agent-autocomplete-item-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 9999px;
    flex-shrink: 0;
    background: #6366f1;
}

.glass-day-hero #autocomplete-dropdown .agent-autocomplete-item-icon {
    font-size: 0.6875rem;
    width: 0.875rem;
    text-align: center;
    flex-shrink: 0;
    color: #6366f1 !important;
}

.glass-day-hero #autocomplete-dropdown .agent-autocomplete-item-main {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.glass-day-hero #autocomplete-dropdown .agent-autocomplete-item-title {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.75rem;
    font-weight: 600;
    color: #1e293b !important;
}

.dark .glass-day-hero #autocomplete-dropdown .agent-autocomplete-item-title {
    color: #e2e8f0 !important;
}

.glass-day-hero #autocomplete-dropdown .agent-autocomplete-cat-pill {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.5625rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    padding: 0.0625rem 0.375rem;
    border-radius: 0.25rem;
    background: #eef2ff;
    color: #4338ca;
}

.glass-day-hero #autocomplete-dropdown .agent-autocomplete-item-badge {
    flex-shrink: 0;
    font-size: 0.5rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 0.125rem 0.3125rem;
    border-radius: 0.25rem;
    white-space: nowrap;
    background: #f1f5f9;
    color: #64748b !important;
}

.glass-day-hero #autocomplete-dropdown .agent-autocomplete-item-badge.is-active {
    background: #dbeafe;
    color: #1d4ed8 !important;
}

.glass-day-hero #autocomplete-dropdown .agent-autocomplete-item-badge.is-testing {
    background: #ede9fe;
    color: #6d28d9 !important;
}

.glass-day-hero #autocomplete-dropdown .agent-autocomplete-item[data-cat-color="blue"] { border-left-color: #3b82f6; }
.glass-day-hero #autocomplete-dropdown .agent-autocomplete-item[data-cat-color="blue"] .agent-autocomplete-item-dot { background-color: #3b82f6; }
.glass-day-hero #autocomplete-dropdown .agent-autocomplete-item[data-cat-color="blue"] .agent-autocomplete-item-icon { color: #2563eb !important; }
.glass-day-hero #autocomplete-dropdown .agent-autocomplete-item[data-cat-color="blue"] .agent-autocomplete-cat-pill { background: #dbeafe; color: #1d4ed8; }

.glass-day-hero #autocomplete-dropdown .agent-autocomplete-item[data-cat-color="emerald"] { border-left-color: #10b981; }
.glass-day-hero #autocomplete-dropdown .agent-autocomplete-item[data-cat-color="emerald"] .agent-autocomplete-item-dot { background-color: #10b981; }
.glass-day-hero #autocomplete-dropdown .agent-autocomplete-item[data-cat-color="emerald"] .agent-autocomplete-item-icon { color: #059669 !important; }
.glass-day-hero #autocomplete-dropdown .agent-autocomplete-item[data-cat-color="emerald"] .agent-autocomplete-cat-pill { background: #d1fae5; color: #047857; }

.glass-day-hero #autocomplete-dropdown .agent-autocomplete-item[data-cat-color="amber"] { border-left-color: #f59e0b; }
.glass-day-hero #autocomplete-dropdown .agent-autocomplete-item[data-cat-color="amber"] .agent-autocomplete-item-dot { background-color: #f59e0b; }
.glass-day-hero #autocomplete-dropdown .agent-autocomplete-item[data-cat-color="amber"] .agent-autocomplete-item-icon { color: #d97706 !important; }
.glass-day-hero #autocomplete-dropdown .agent-autocomplete-item[data-cat-color="amber"] .agent-autocomplete-cat-pill { background: #fef3c7; color: #b45309; }

.glass-day-hero #autocomplete-dropdown .agent-autocomplete-item[data-cat-color="purple"] { border-left-color: #a855f7; }
.glass-day-hero #autocomplete-dropdown .agent-autocomplete-item[data-cat-color="purple"] .agent-autocomplete-item-dot { background-color: #a855f7; }
.glass-day-hero #autocomplete-dropdown .agent-autocomplete-item[data-cat-color="purple"] .agent-autocomplete-item-icon { color: #9333ea !important; }
.glass-day-hero #autocomplete-dropdown .agent-autocomplete-item[data-cat-color="purple"] .agent-autocomplete-cat-pill { background: #ede9fe; color: #7e22ce; }

.glass-day-hero #autocomplete-dropdown .agent-autocomplete-item[data-cat-color="rose"] { border-left-color: #f43f5e; }
.glass-day-hero #autocomplete-dropdown .agent-autocomplete-item[data-cat-color="rose"] .agent-autocomplete-item-dot { background-color: #f43f5e; }
.glass-day-hero #autocomplete-dropdown .agent-autocomplete-item[data-cat-color="rose"] .agent-autocomplete-item-icon { color: #e11d48 !important; }
.glass-day-hero #autocomplete-dropdown .agent-autocomplete-item[data-cat-color="rose"] .agent-autocomplete-cat-pill { background: #ffe4e6; color: #be123c; }

.glass-day-hero #autocomplete-dropdown .agent-autocomplete-item[data-cat-color="cyan"] { border-left-color: #06b6d4; }
.glass-day-hero #autocomplete-dropdown .agent-autocomplete-item[data-cat-color="cyan"] .agent-autocomplete-item-dot { background-color: #06b6d4; }
.glass-day-hero #autocomplete-dropdown .agent-autocomplete-item[data-cat-color="cyan"] .agent-autocomplete-item-icon { color: #0891b2 !important; }
.glass-day-hero #autocomplete-dropdown .agent-autocomplete-item[data-cat-color="cyan"] .agent-autocomplete-cat-pill { background: #cffafe; color: #0e7490; }

.glass-day-hero #autocomplete-dropdown .agent-autocomplete-item[data-cat-color="indigo"] { border-left-color: #6366f1; }
.glass-day-hero #autocomplete-dropdown .agent-autocomplete-item[data-cat-color="indigo"] .agent-autocomplete-item-dot { background-color: #6366f1; }
.glass-day-hero #autocomplete-dropdown .agent-autocomplete-item[data-cat-color="indigo"] .agent-autocomplete-item-icon { color: #4f46e5 !important; }
.glass-day-hero #autocomplete-dropdown .agent-autocomplete-item[data-cat-color="indigo"] .agent-autocomplete-cat-pill { background: #e0e7ff; color: #4338ca; }

.glass-day-hero #autocomplete-dropdown .agent-autocomplete-item[data-cat-color="pink"] { border-left-color: #ec4899; }
.glass-day-hero #autocomplete-dropdown .agent-autocomplete-item[data-cat-color="pink"] .agent-autocomplete-item-dot { background-color: #ec4899; }
.glass-day-hero #autocomplete-dropdown .agent-autocomplete-item[data-cat-color="pink"] .agent-autocomplete-item-icon { color: #db2777 !important; }
.glass-day-hero #autocomplete-dropdown .agent-autocomplete-item[data-cat-color="pink"] .agent-autocomplete-cat-pill { background: #fce7f3; color: #be185d; }

.glass-day-hero #autocomplete-dropdown .agent-autocomplete-item[data-cat-color="orange"] { border-left-color: #f97316; }
.glass-day-hero #autocomplete-dropdown .agent-autocomplete-item[data-cat-color="orange"] .agent-autocomplete-item-dot { background-color: #f97316; }
.glass-day-hero #autocomplete-dropdown .agent-autocomplete-item[data-cat-color="orange"] .agent-autocomplete-item-icon { color: #ea580c !important; }
.glass-day-hero #autocomplete-dropdown .agent-autocomplete-item[data-cat-color="orange"] .agent-autocomplete-cat-pill { background: #ffedd5; color: #c2410c; }

.glass-day-hero #autocomplete-dropdown .agent-autocomplete-item[data-cat-color="teal"] { border-left-color: #14b8a6; }
.glass-day-hero #autocomplete-dropdown .agent-autocomplete-item[data-cat-color="teal"] .agent-autocomplete-item-dot { background-color: #14b8a6; }
.glass-day-hero #autocomplete-dropdown .agent-autocomplete-item[data-cat-color="teal"] .agent-autocomplete-item-icon { color: #0d9488 !important; }
.glass-day-hero #autocomplete-dropdown .agent-autocomplete-item[data-cat-color="teal"] .agent-autocomplete-cat-pill { background: #ccfbf1; color: #0f766e; }

.glass-day-hero #autocomplete-dropdown .agent-autocomplete-item[data-cat-color="sky"] { border-left-color: #0ea5e9; }
.glass-day-hero #autocomplete-dropdown .agent-autocomplete-item[data-cat-color="sky"] .agent-autocomplete-item-dot { background-color: #0ea5e9; }
.glass-day-hero #autocomplete-dropdown .agent-autocomplete-item[data-cat-color="sky"] .agent-autocomplete-item-icon { color: #0284c7 !important; }
.glass-day-hero #autocomplete-dropdown .agent-autocomplete-item[data-cat-color="sky"] .agent-autocomplete-cat-pill { background: #e0f2fe; color: #0369a1; }

.glass-day-hero #autocomplete-dropdown .agent-autocomplete-item[data-cat-color="fuchsia"] { border-left-color: #d946ef; }
.glass-day-hero #autocomplete-dropdown .agent-autocomplete-item[data-cat-color="fuchsia"] .agent-autocomplete-item-dot { background-color: #d946ef; }
.glass-day-hero #autocomplete-dropdown .agent-autocomplete-item[data-cat-color="fuchsia"] .agent-autocomplete-item-icon { color: #c026d3 !important; }
.glass-day-hero #autocomplete-dropdown .agent-autocomplete-item[data-cat-color="fuchsia"] .agent-autocomplete-cat-pill { background: #fae8ff; color: #a21caf; }

.glass-day-hero #autocomplete-dropdown .agent-autocomplete-empty {
    padding: 0.875rem;
    font-size: 0.6875rem;
    font-style: italic;
    color: #64748b !important;
}

.glass-day-hero .glass-icon-btn-light {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.35);
    color: #fff;
    transition: background 0.2s ease, transform 0.15s ease;
}

.glass-day-hero .glass-icon-btn-light:hover {
    background: rgba(255, 255, 255, 0.32);
    transform: scale(1.04);
}

.glass-inset {
    background: var(--glass-bg-subtle);
    backdrop-filter: blur(20px) saturate(175%);
    -webkit-backdrop-filter: blur(20px) saturate(175%);
    border: 1px solid var(--glass-border-soft);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.glass-inset input,
.glass-inset textarea,
.glass-inset select {
    background: rgba(255, 255, 255, 0.78);
    color: #0f172a;
    border: 1px solid rgba(148, 163, 184, 0.35);
}

.dark .glass-inset input,
.dark .glass-inset textarea,
.dark .glass-inset select {
    background: rgba(15, 23, 42, 0.72);
    color: #f1f5f9;
    border-color: rgba(71, 85, 105, 0.55);
}

.dark .glass-inset {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* --- Glass text contrast (frosted surfaces) --- */
.glass-card,
.glass-stat,
.glass-modal,
.glass-inset,
.glass-header-tile {
    color: #0f172a;
}

.dark .glass-card,
.dark .glass-stat,
.dark .glass-modal,
.dark .glass-inset,
.dark .glass-header-tile {
    color: #f1f5f9;
}

.glass-card .text-slate-400,
.glass-inset .text-slate-400,
.glass-stat .text-slate-500,
.glass-modal .text-slate-400,
.glass-tab-bar .text-slate-600 {
    color: #64748b !important;
}

.glass-card .text-slate-500,
.glass-inset .text-slate-500,
.glass-modal .text-slate-500 {
    color: #475569 !important;
}

.glass-card .text-slate-600,
.glass-inset .text-slate-600 {
    color: #334155 !important;
}

.dark .glass-card .text-slate-400,
.dark .glass-inset .text-slate-400,
.dark .glass-stat .text-slate-500,
.dark .glass-modal .text-slate-400,
.dark .glass-tab-bar .text-slate-400 {
    color: #cbd5e1 !important;
}

.dark .glass-card .text-slate-500,
.dark .glass-inset .text-slate-500,
.dark .glass-modal .text-slate-500 {
    color: #94a3b8 !important;
}

.dark .glass-card .text-slate-600,
.dark .glass-inset .text-slate-600 {
    color: #e2e8f0 !important;
}

.glass-card .text-slate-300,
.glass-inset .text-slate-300 {
    color: #64748b !important;
}

.dark .glass-card .text-slate-300,
.dark .glass-inset .text-slate-300 {
    color: #94a3b8 !important;
}

.glass-card p.text-xs.text-slate-400,
.glass-card .text-[11px].text-slate-400,
.glass-card .text-[10px].text-slate-400,
.glass-card .text-[9px].text-slate-400 {
    color: #64748b !important;
}

.dark .glass-card p.text-xs.text-slate-400,
.dark .glass-card .text-[11px].text-slate-400,
.dark .glass-card .text-[10px].text-slate-400,
.dark .glass-card .text-[9px].text-slate-400 {
    color: #cbd5e1 !important;
}

.glass-modal {
    background: var(--glass-bg-strong);
    backdrop-filter: blur(var(--glass-blur-strong)) saturate(var(--glass-saturate));
    -webkit-backdrop-filter: blur(var(--glass-blur-strong)) saturate(var(--glass-saturate));
    border: 1px solid var(--glass-border);
    box-shadow: 0 32px 80px rgba(15, 23, 42, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.dark .glass-modal {
    box-shadow: 0 32px 80px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.settings-modal {
    width: 100%;
}

.settings-menu-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.75rem 0.875rem;
    border-radius: 0.875rem;
    text-align: left;
    background: rgba(248, 250, 252, 0.85);
    border: 1px solid rgba(148, 163, 184, 0.25);
    transition: background 0.15s, border-color 0.15s;
}

.dark .settings-menu-item {
    background: rgba(30, 41, 59, 0.55);
    border-color: rgba(71, 85, 105, 0.45);
}

.settings-menu-item:hover {
    background: rgba(238, 242, 255, 0.95);
    border-color: rgba(99, 102, 241, 0.35);
}

.dark .settings-menu-item:hover {
    background: rgba(51, 65, 85, 0.65);
}

.settings-menu-item__icon {
    width: 2rem;
    height: 2rem;
    border-radius: 0.625rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    flex-shrink: 0;
}

.settings-menu-item__icon--indigo { background: rgba(99, 102, 241, 0.15); color: #4f46e5; }
.settings-menu-item__icon--violet { background: rgba(139, 92, 246, 0.15); color: #7c3aed; }
.settings-menu-item__icon--sky { background: rgba(14, 165, 233, 0.15); color: #0284c7; }
.settings-menu-item__icon--emerald { background: rgba(16, 185, 129, 0.15); color: #059669; }

.settings-menu-item__text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.settings-menu-item__title {
    font-size: 0.8125rem;
    font-weight: 700;
    color: #0f172a;
}

.dark .settings-menu-item__title {
    color: #f1f5f9;
}

.settings-menu-item__sub {
    font-size: 0.6875rem;
    color: #64748b;
}

.settings-menu-item__chev {
    font-size: 0.625rem;
    color: #94a3b8;
    flex-shrink: 0;
}

.glass-logo {
    background: var(--glass-bg-strong);
    backdrop-filter: blur(24px) saturate(var(--glass-saturate));
    -webkit-backdrop-filter: blur(24px) saturate(var(--glass-saturate));
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow), 0 0 0 4px rgba(99, 102, 241, 0.08);
}

.glass-tab-bar {
    background: var(--glass-bg-subtle);
    backdrop-filter: blur(20px) saturate(175%);
    -webkit-backdrop-filter: blur(20px) saturate(175%);
    border: 1px solid var(--glass-border-soft);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.glass-tab-active {
    background: var(--glass-bg-strong) !important;
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    box-shadow: var(--glass-shadow-sm), 0 0 0 1px rgba(99, 102, 241, 0.12);
    color: var(--accent-hover) !important;
    border: 1px solid var(--glass-border-soft) !important;
    transition: background-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.dark .glass-tab-active {
    color: #a5b4fc !important;
}

.glass-stat {
    background: var(--glass-bg-strong);
    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow-sm);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.glass-stat:hover {
    transform: translateY(-2px);
    box-shadow: var(--glass-shadow);
}

/* --- Locked tab layout shell --- */
.app-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

#stats-dashboard {
    display: none !important;
}

#vandaag-stats-pillars,
#vessels-stats-pillars {
    flex-shrink: 0;
}

#vandaag-countdown.vandaag-flip-clock {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    flex-shrink: 0;
}

#vandaag-timer-pillar {
    min-height: 0;
}

.vandaag-flip-clock--pillar {
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    margin-top: 0.15rem;
}

.vandaag-flip-clock--pillar .vandaag-flip-tile {
    min-width: 1.65rem;
    height: 1.5rem;
}

.vandaag-flip-clock--pillar .vandaag-flip-tile__val {
    font-size: 0.72rem;
}

.vandaag-flip-clock--pillar .vandaag-flip-clock__adj-btn,
.vandaag-flip-clock--pillar .vandaag-flip-clock__btn {
    width: 1.35rem;
    height: 1.35rem;
    font-size: 0.65rem;
}

.vandaag-flip-clock--pillar .vandaag-flip-clock__btn i {
    font-size: 0.55rem;
}

.vandaag-flip-clock__face {
    display: inline-flex;
    align-items: center;
    gap: 0.1rem;
}

.vandaag-flip-clock__sep {
    font-size: 0.75rem;
    font-weight: 700;
    color: #64748b;
    line-height: 1;
    padding: 0 0.05rem;
}

.dark .vandaag-flip-clock__sep {
    color: #94a3b8;
}

.vandaag-flip-tile {
    position: relative;
    min-width: 1.85rem;
    height: 1.65rem;
    border-radius: 0.35rem;
    overflow: hidden;
    perspective: 220px;
    background: linear-gradient(180deg, #334155 0%, #1e293b 52%, #0f172a 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 1px 3px rgba(15, 23, 42, 0.25);
}

.vandaag-flip-tile::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: rgba(0, 0, 0, 0.45);
    z-index: 2;
    pointer-events: none;
}

.vandaag-flip-tile__val {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    font-size: 0.8rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: #f8fafc;
    letter-spacing: 0.04em;
}

.vandaag-flip-tile--flip .vandaag-flip-tile__val {
    animation: vandaag-flip-tick 0.32s ease;
}

@keyframes vandaag-flip-tick {
    0% { transform: rotateX(0deg); opacity: 1; }
    45% { transform: rotateX(-88deg); opacity: 0.35; }
    100% { transform: rotateX(0deg); opacity: 1; }
}

.vandaag-flip-clock--active .vandaag-flip-tile {
    background: linear-gradient(180deg, #fb7185 0%, #e11d48 52%, #be123c 100%);
}

.vandaag-flip-clock__adj-btn,
.vandaag-flip-clock__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.45rem;
    height: 1.45rem;
    border-radius: 0.4rem;
    border: 1px solid rgba(148, 163, 184, 0.35);
    background: rgba(255, 255, 255, 0.55);
    color: #475569;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.dark .vandaag-flip-clock__adj-btn,
.dark .vandaag-flip-clock__btn {
    background: rgba(15, 23, 42, 0.55);
    border-color: rgba(71, 85, 105, 0.55);
    color: #cbd5e1;
}

.vandaag-flip-clock__adj-btn:hover,
.vandaag-flip-clock__btn:hover {
    background: rgba(255, 255, 255, 0.85);
    color: #0f172a;
}

.dark .vandaag-flip-clock__adj-btn:hover,
.dark .vandaag-flip-clock__btn:hover {
    background: rgba(30, 41, 59, 0.85);
    color: #f8fafc;
}

.vandaag-flip-clock__btn--start {
    background: rgba(99, 102, 241, 0.18);
    border-color: rgba(99, 102, 241, 0.45);
    color: #4f46e5;
}

.dark .vandaag-flip-clock__btn--start {
    background: rgba(99, 102, 241, 0.28);
    color: #a5b4fc;
}

.vandaag-flip-clock--active .vandaag-flip-clock__btn--start {
    background: rgba(225, 29, 72, 0.15);
    border-color: rgba(225, 29, 72, 0.45);
    color: #e11d48;
}

#views-container {
    flex: 1;
    min-height: 0;
    position: relative;
}

.view-panel {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    gap: var(--view-gap);
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.18s ease, visibility 0.18s ease;
}

.view-panel > * {
    flex-shrink: 0;
}

.view-panel > .view-panel-card {
    flex: 1 1 auto;
    min-height: 0;
}

.view-panel.view-panel--active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    z-index: 1;
}

.extra-sub-panels {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    position: relative;
}

.extra-sub-panel {
    display: none;
    flex: 1 1 auto;
    min-height: 0;
    flex-direction: column;
    gap: var(--view-gap);
}

.extra-sub-panel.extra-sub-panel--active {
    display: flex;
}

#view-extra.view-panel > .extra-sub-panels {
    flex-shrink: 1;
}

.extra-sub-panel > .view-panel-card {
    flex: 1 1 auto;
    min-height: 0;
}

.view-panel--grid.view-panel.view-panel--active {
    display: grid;
    grid-template-columns: 1fr;
    align-items: start;
}

@media (min-width: 768px) {
    .view-panel--grid.view-panel.view-panel--active {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .view-panel--grid.view-panel.view-panel--active {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .board-grid--five.view-panel--grid.view-panel.view-panel--active {
        grid-template-columns: minmax(12rem, 0.92fr) minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1.1fr) minmax(12rem, 0.92fr);
    }
}

@media (min-width: 1280px) {
    .board-grid--five.view-panel--grid.view-panel.view-panel--active {
        grid-template-columns: minmax(12.5rem, 0.88fr) minmax(0, 1.14fr) minmax(0, 1.04fr) minmax(0, 1.14fr) minmax(12.5rem, 0.88fr);
    }
}

.view-panel-card {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--view-gap);
    min-height: 0;
    padding: var(--view-card-padding);
    overflow: hidden;
}

.view-panel-card--scroll {
    overflow-y: auto;
}

.app-header-bar {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 0.75rem;
}

.glass-tab-bar {
    grid-column: 2;
    justify-self: center;
}

.app-header-actions {
    grid-column: 3;
    justify-self: end;
    margin-left: 0;
}

@media (max-width: 1100px) {
    .app-header-bar {
        grid-template-columns: 1fr;
        justify-items: center;
    }

    .glass-tab-bar {
        grid-column: 1;
        width: 100%;
        justify-content: center;
    }

    .app-header-actions {
        grid-column: 1;
        justify-self: center;
    }
}

.tab-nav-btn {
    color: rgb(71 85 105);
    transition: background-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.dark .tab-nav-btn:not(.glass-tab-active) {
    color: rgb(148 163 184);
}

.tab-nav-btn:not(.glass-tab-active):hover {
    color: rgb(15 23 42);
}

.dark .tab-nav-btn:not(.glass-tab-active):hover {
    color: rgb(255 255 255);
}

#view-timeline.view-panel--active .glass-card {
    min-height: min-content;
}

/* --- Kanban board column scroll --- */

.board-column {
    display: flex;
    flex-direction: column;
    min-height: 450px;
    max-height: calc(100vh - var(--layout-chrome));
    width: 100%;
}

.board-column-scroll {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.board-column-scroll > .board-card {
    flex: 0 0 auto;
    flex-shrink: 0;
    width: 100%;
    min-width: 0;
    min-height: auto;
    overflow: hidden;
}

.board-card-details {
    min-width: 0;
    overflow: hidden;
}

.board-feed-composer {
    width: 100%;
    min-width: 0;
    border-top: none;
    padding-top: 0;
}

.board-feed-messages {
    max-height: 9rem;
    margin-bottom: 0.125rem;
}

.feed-panel {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.feed-panel-toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.25rem 0;
    border: none;
    background: transparent;
    cursor: pointer;
    text-align: left;
}

.feed-panel-toggle__label {
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #64748b;
    flex: 1;
}

.dark .feed-panel-toggle__label {
    color: #94a3b8;
}

.feed-panel-toggle__count {
    font-size: 0.625rem;
    font-weight: 700;
    line-height: 1;
    padding: 0.15rem 0.45rem;
    border-radius: 9999px;
    background: rgba(99, 102, 241, 0.12);
    color: #4338ca;
}

.dark .feed-panel-toggle__count {
    background: rgba(99, 102, 241, 0.2);
    color: #a5b4fc;
}

.feed-panel-toggle__chev {
    font-size: 0.625rem;
    color: #94a3b8;
}

.feed-panel__body {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.feed-panel--archive .feed-panel__body {
    gap: 0.625rem;
}

.project-feed__toolbar {
    display: flex;
    justify-content: flex-end;
}

.board-column-scroll > .board-column-empty {
    flex: 1 0 auto;
    min-height: 12rem;
}

.board-card-done.board-card-collapsed {
    gap: 0.75rem;
}

.board-column-scroll.custom-scrollbar::-webkit-scrollbar {
    width: 7px;
}

.board-column-scroll.custom-scrollbar::-webkit-scrollbar-thumb {
    background: rgba(100, 116, 139, 0.45);
    border-radius: 9999px;
}

.board-column-scroll.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: rgba(100, 116, 139, 0.65);
}

.board-column-scroll.drag-over {
    border-color: rgba(99, 102, 241, 0.55) !important;
    background: rgba(99, 102, 241, 0.06);
}

.board-folder-back {
    width: 1.5rem;
    height: 1.5rem;
    border: none;
    border-radius: 0.5rem;
    background: rgba(148, 163, 184, 0.15);
    color: #64748b;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.625rem;
    flex-shrink: 0;
    opacity: 0;
    transform: translateX(-6px);
    transition: opacity 0.22s ease, transform 0.22s ease, background 0.12s, color 0.12s;
}

.board-folder-back--shown {
    opacity: 1;
    transform: none;
}

.board-folder-back:hover {
    background: rgba(99, 102, 241, 0.15);
    color: #4f46e5;
}

.board-folder-stage {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    width: 100%;
    min-width: 0;
    opacity: 0;
    transform: translateX(14px);
    transition: opacity 0.26s ease, transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.board-folder-col--back .board-folder-stage:not(.board-folder-stage--visible):not(.board-folder-stage--exit) {
    transform: translateX(-14px);
}

.board-folder-stage.board-folder-stage--visible {
    opacity: 1;
    transform: none;
}

.board-folder-stage.board-folder-stage--exit {
    opacity: 0;
    transform: translateX(-12px);
    transition-duration: 0.2s;
}

.board-folder-col--back .board-folder-stage.board-folder-stage--exit {
    transform: translateX(12px);
}

.board-folder-stage--visible .board-folder-btn,
.board-folder-stage--visible .board-folder-item,
.board-folder-stage--visible .board-folder-list .board-folder-btn {
    animation: board-folder-item-in 0.3s cubic-bezier(0.4, 0, 0.2, 1) backwards;
}

.board-folder-stage--visible .board-folder-btn:nth-child(1),
.board-folder-stage--visible .board-folder-list .board-folder-btn:nth-child(1),
.board-folder-stage--visible .board-folder-item:nth-child(1) { animation-delay: 0ms; }
.board-folder-stage--visible .board-folder-btn:nth-child(2),
.board-folder-stage--visible .board-folder-list .board-folder-btn:nth-child(2),
.board-folder-stage--visible .board-folder-item:nth-child(2) { animation-delay: 30ms; }
.board-folder-stage--visible .board-folder-btn:nth-child(3),
.board-folder-stage--visible .board-folder-list .board-folder-btn:nth-child(3),
.board-folder-stage--visible .board-folder-item:nth-child(3) { animation-delay: 60ms; }
.board-folder-stage--visible .board-folder-btn:nth-child(4),
.board-folder-stage--visible .board-folder-list .board-folder-btn:nth-child(4),
.board-folder-stage--visible .board-folder-item:nth-child(4) { animation-delay: 90ms; }
.board-folder-stage--visible .board-folder-btn:nth-child(5),
.board-folder-stage--visible .board-folder-list .board-folder-btn:nth-child(5),
.board-folder-stage--visible .board-folder-item:nth-child(5) { animation-delay: 120ms; }
.board-folder-stage--visible .board-folder-btn:nth-child(6),
.board-folder-stage--visible .board-folder-list .board-folder-btn:nth-child(6),
.board-folder-stage--visible .board-folder-item:nth-child(6) { animation-delay: 150ms; }
.board-folder-stage--visible .board-folder-btn:nth-child(n+7),
.board-folder-stage--visible .board-folder-list .board-folder-btn:nth-child(n+7),
.board-folder-stage--visible .board-folder-item:nth-child(n+7) { animation-delay: 180ms; }

@keyframes board-folder-item-in {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

#board-title-ideas,
#board-title-done {
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.board-folder-title--open {
    animation: board-folder-title-in 0.24s ease;
}

@keyframes board-folder-title-in {
    from { opacity: 0.4; transform: translateX(4px); }
    to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .board-folder-stage,
    .board-folder-back,
    #board-title-ideas,
    #board-title-done,
    .board-folder-stage--visible .board-folder-btn,
    .board-folder-stage--visible .board-folder-item,
    .board-folder-title--open {
        transition: none !important;
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

.board-folder-list {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    width: 100%;
    min-width: 0;
}

.board-folder-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    width: 100%;
    padding: 0.55rem 0.65rem;
    border: 1px solid rgba(148, 163, 184, 0.25);
    border-radius: 0.75rem;
    background: rgba(255, 255, 255, 0.65);
    cursor: pointer;
    text-align: left;
    font-size: 0.6875rem;
    font-weight: 700;
    color: #334155;
    transition: background 0.12s, border-color 0.12s, transform 0.18s ease, box-shadow 0.18s ease;
}

.dark .board-folder-btn {
    background: rgba(15, 23, 42, 0.55);
    border-color: rgba(71, 85, 105, 0.45);
    color: #e2e8f0;
}

.board-folder-btn:hover {
    background: rgba(99, 102, 241, 0.08);
    border-color: rgba(99, 102, 241, 0.25);
    transform: translateX(2px);
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.08);
}

.board-folder-btn__left {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-width: 0;
}

.board-folder-btn__meta {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    flex-shrink: 0;
}

.board-folder-btn__count {
    font-size: 0.5625rem;
    font-weight: 800;
    color: #94a3b8;
}

.board-folder-item {
    position: relative;
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.35rem;
    padding: 0.55rem 0.65rem 0.5rem;
}

.board-folder-item__title {
    margin: 0;
    padding-right: 1.35rem;
    font-size: 0.8125rem;
    font-weight: 700;
    line-height: 1.4;
    color: #0f172a;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: normal;
    overflow-wrap: break-word;
    hyphens: auto;
}

.dark .board-folder-item__title {
    color: #f1f5f9;
}

.board-folder-item__meta {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.board-folder-item__icon {
    flex-shrink: 0;
    width: 1.375rem;
    height: 1.375rem;
    border-radius: 0.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.625rem;
}

.board-folder-item__duration {
    font-size: 0.625rem;
    font-weight: 600;
    color: #94a3b8;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.board-folder-item__duration i {
    font-size: 0.5625rem;
    opacity: 0.85;
}

.board-folder-item__edit {
    position: absolute;
    top: 0.4rem;
    right: 0.4rem;
    z-index: 1;
    flex-shrink: 0;
    width: 1.625rem;
    height: 1.625rem;
    border: none;
    border-radius: 0.45rem;
    background: transparent;
    color: #94a3b8;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.625rem;
    opacity: 0.45;
    transition: opacity 0.12s, color 0.12s, background 0.12s;
}

.board-folder-item:hover .board-folder-item__edit,
.board-folder-item__edit:focus-visible {
    opacity: 1;
    color: #4f46e5;
    background: rgba(99, 102, 241, 0.08);
}

.board-column--folder .board-column-scroll {
    gap: 0.5rem;
}

.board-column--focus .board-column-scroll {
    gap: 0.75rem;
}

/* --- Cockpit motion system (accordions, overlays, popovers) --- */
.cockpit-accordion-panel,
.archive-accordion-panel {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transition:
        grid-template-rows 0.38s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.28s ease;
}

.cockpit-accordion-panel--open,
.archive-accordion-panel--open {
    grid-template-rows: 1fr;
    opacity: 1;
}

.cockpit-accordion-panel__inner,
.archive-accordion-panel__inner {
    overflow: hidden;
    min-height: 0;
}

.cockpit-accordion-chevron,
.archive-accordion-chevron,
.archive-project__chevron,
.feed-panel-toggle__chev {
    transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}

.cockpit-overlay:not(.hidden) {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.28s ease, visibility 0.28s ease;
}

.cockpit-overlay.cockpit-overlay--shown {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.cockpit-overlay:not(.hidden) > .glass-modal,
.cockpit-overlay:not(.hidden) > .settings-modal {
    transform: scale(0.97) translateY(10px);
    opacity: 0;
    transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.28s ease;
}

.cockpit-overlay.cockpit-overlay--shown > .glass-modal,
.cockpit-overlay.cockpit-overlay--shown > .settings-modal {
    transform: none;
    opacity: 1;
}

.cockpit-overlay:not(.hidden) .auth-login-overlay__card,
.cockpit-overlay:not(.hidden) .board-timer-overlay__card {
    transform: scale(0.97) translateY(10px);
    opacity: 0;
    transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.28s ease;
    animation: none;
}

.cockpit-overlay.cockpit-overlay--shown .auth-login-overlay__card,
.cockpit-overlay.cockpit-overlay--shown .board-timer-overlay__card {
    transform: none;
    opacity: 1;
}

.cockpit-popover:not(.hidden) {
    opacity: 0;
    transform: translateY(-6px) scale(0.98);
    pointer-events: none;
    transition: opacity 0.22s ease, transform 0.26s cubic-bezier(0.4, 0, 0.2, 1);
}

.cockpit-popover.cockpit-popover--open {
    opacity: 1;
    transform: none;
    pointer-events: auto;
}

.cockpit-reveal {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.24s ease, transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

.cockpit-reveal--shown {
    opacity: 1;
    transform: none;
}

.settings-subpanel:not(.hidden) {
    animation: cockpit-panel-in 0.26s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes cockpit-panel-in {
    from { opacity: 0; transform: translateX(10px); }
    to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .cockpit-accordion-panel,
    .archive-accordion-panel,
    .cockpit-accordion-chevron,
    .archive-accordion-chevron,
    .archive-project__chevron,
    .feed-panel-toggle__chev,
    .archive-project--card,
    .cockpit-overlay,
    .cockpit-overlay > .glass-modal,
    .cockpit-overlay > .settings-modal,
    .cockpit-popover,
    .cockpit-reveal,
    .settings-subpanel:not(.hidden) {
        transition: none !important;
        animation: none !important;
    }
}

/* --- Archive project accordion --- */
.archive-category-projects {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    background: rgba(248, 250, 252, 0.45);
}

.dark .archive-category-projects {
    background: rgba(15, 23, 42, 0.35);
}

.archive-project--card {
    border-width: 1px;
    border-left-width: 4px;
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05), 0 4px 14px rgba(15, 23, 42, 0.04);
    overflow: hidden;
    transition: box-shadow 0.28s ease, transform 0.28s ease;
}

.archive-project--card:not(.archive-project--open):hover {
    transform: translateY(-1px);
}

.dark .archive-project--card {
    background: rgba(15, 23, 42, 0.72);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25), 0 6px 18px rgba(0, 0, 0, 0.18);
}

.archive-project--open {
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.08), 0 10px 28px rgba(15, 23, 42, 0.08);
    transform: translateY(-1px);
}

.dark .archive-project--open {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35), 0 12px 32px rgba(0, 0, 0, 0.28);
}

.archive-project--open .archive-project__body.cockpit-accordion-panel--open .archive-accordion-panel__inner {
    overflow: visible;
}

.archive-project__content {
    min-height: min(68vh, 42rem);
}

.archive-project__layout {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
}

.archive-project__field--hypothesis {
    flex: 0 0 auto;
}

.archive-project__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    align-items: stretch;
}

@media (min-width: 768px) {
    .archive-project__grid {
        grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    }
}

.archive-project__col--files {
    display: flex;
    flex-direction: column;
}

.archive-project__files {
    min-height: 5.5rem;
}

.archive-project__feed {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 10rem;
}

.archive-project--open .archive-project__feed .project-feed {
    flex: 1 1 auto;
    min-height: 10rem;
}

.archive-project--open .archive-project__feed .feed-panel--expanded .feed-panel__body.cockpit-accordion-panel--open {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 8rem;
}

.archive-project--open .archive-project__feed .feed-panel--expanded .project-feed {
    flex: 1 1 auto;
}

.archive-project--open .project-feed__messages {
    flex: 1 1 auto;
    max-height: none;
    min-height: 6rem;
}

.archive-project__header-icon {
    display: inline-block;
    transform-origin: center;
}

.archive-project__header-icon--updated {
    animation: archive-icon-pop 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes archive-icon-pop {
    0% { transform: scale(1); }
    45% { transform: scale(1.3); }
    100% { transform: scale(1); }
}

.archive-project__header {
    cursor: pointer;
}

.archive-project__header:hover {
    background: rgba(248, 250, 252, 0.85);
}

.dark .archive-project__header:hover {
    background: rgba(30, 41, 59, 0.55);
}

.archive-project__body {
    border-top: 1px solid rgba(226, 232, 240, 0.75);
}

.dark .archive-project__body {
    border-top-color: rgba(51, 65, 85, 0.75);
}

.archive-project__label {
    display: block;
    font-size: 0.5625rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #94a3b8;
    margin-bottom: 0.35rem;
}

.dark .archive-project__label {
    color: #64748b;
}

.archive-project__field + .archive-project__field,
.archive-project__field + div {
    margin-top: 0.125rem;
}

.archive-project__input {
    width: 100%;
    border: 1px solid rgba(226, 232, 240, 0.95);
    border-radius: 0.75rem;
    background: rgba(255, 255, 255, 0.95);
    color: #334155;
    font-size: 0.75rem;
    line-height: 1.45;
    padding: 0.55rem 0.7rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.archive-project__textarea {
    resize: none;
    min-height: 3rem;
}

.archive-project__textarea--hypothesis {
    overflow-y: hidden;
    line-height: 1.55;
    font-size: 0.8125rem;
}

.archive-project__textarea--hypothesis.archive-project__textarea--scroll {
    overflow-y: auto;
}

.dark .archive-project__input {
    border-color: rgba(51, 65, 85, 0.95);
    background: rgba(2, 6, 23, 0.55);
    color: #e2e8f0;
}

.archive-project__input:focus {
    outline: none;
    border-color: rgba(99, 102, 241, 0.65);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12);
}

.archive-project__status {
    white-space: nowrap;
}

.archive-project__chevron {
    width: 1rem;
    text-align: center;
}

.board-iteration-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.125rem;
    height: 1.125rem;
    padding: 0 0.25rem;
    border-radius: 9999px;
    background: #ef4444;
    color: #fff;
    font-size: 0.5625rem;
    font-weight: 800;
    line-height: 1;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.95);
}

.board-iteration-badge--sm {
    min-width: 1rem;
    height: 1rem;
    font-size: 0.5rem;
    box-shadow: none;
}

.glass-icon-well {
    background: var(--glass-bg-subtle);
    backdrop-filter: blur(12px);
    border: 1px solid var(--glass-border-soft);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

/* --- Glass buttons --- */
.glass-btn {
    backdrop-filter: blur(14px) saturate(175%);
    -webkit-backdrop-filter: blur(14px) saturate(175%);
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow-sm);
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
    font-weight: 600;
}

.glass-btn:hover {
    transform: translateY(-1px);
}

.glass-btn:active {
    transform: translateY(0) scale(0.98);
}

.glass-btn-primary {
    background: var(--accent-soft);
    border-color: rgba(99, 102, 241, 0.35);
    color: var(--accent-hover);
}

.dark .glass-btn-primary {
    color: #a5b4fc;
    border-color: rgba(129, 140, 248, 0.35);
}

.glass-btn-primary:hover {
    background: rgba(99, 102, 241, 0.28);
    border-color: rgba(99, 102, 241, 0.48);
}

.glass-btn-solid {
    background: rgba(99, 102, 241, 0.78);
    backdrop-filter: blur(16px) saturate(190%);
    -webkit-backdrop-filter: blur(16px) saturate(190%);
    border: 1px solid rgba(255, 255, 255, 0.32);
    color: #fff;
    box-shadow: 0 6px 24px var(--accent-glow), inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

.glass-btn-solid:hover {
    background: rgba(79, 70, 229, 0.88);
    box-shadow: 0 10px 32px var(--accent-glow), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.glass-day-hero .glass-btn-solid {
    background: rgba(255, 255, 255, 0.95);
    color: #4f46e5;
    border-color: rgba(255, 255, 255, 0.8);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12), inset 0 1px 0 #fff;
}

.glass-day-hero .glass-btn-solid:hover {
    background: #fff;
    color: #4338ca;
}

.glass-icon-btn {
    background: var(--glass-bg-subtle);
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    border: 1px solid var(--glass-border-soft);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
    transition: background 0.2s ease, transform 0.15s ease;
}

.glass-icon-btn:hover {
    background: var(--glass-bg);
    transform: scale(1.05);
}

/* --- Project modal AI typing --- */
.project-field--typing {
    caret-color: #6366f1;
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.15);
    border-color: rgba(99, 102, 241, 0.45) !important;
}

.dark .project-field--typing {
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.22);
}

@media (prefers-reduced-motion: reduce) {
    .project-field--typing {
        transition: none !important;
    }
}

/* --- Modal backdrop --- */
.modal-glass-backdrop {
    backdrop-filter: blur(12px) saturate(150%);
    -webkit-backdrop-filter: blur(12px) saturate(150%);
}

/* --- Progress --- */
.glass-progress-track {
    background: var(--glass-bg-subtle);
    border: 1px solid var(--glass-border-soft);
    border-radius: 9999px;
    overflow: hidden;
    box-shadow: inset 0 1px 3px rgba(15, 23, 42, 0.06);
}

.glass-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, rgba(79, 70, 229, 0.85), rgba(129, 140, 248, 0.9));
    box-shadow: 0 0 14px var(--accent-glow);
    border-radius: 9999px;
    transition: width 0.3s ease;
}

.glass-progress-warn {
    background: linear-gradient(90deg, rgba(244, 63, 94, 0.75), rgba(251, 146, 60, 0.8));
    box-shadow: 0 0 14px rgba(244, 63, 94, 0.25);
}

/* --- Scrollbar --- */
.custom-scrollbar::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
.custom-scrollbar::-webkit-scrollbar-track {
    background: transparent;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.5);
    border-radius: 3px;
}
.dark .custom-scrollbar::-webkit-scrollbar-thumb {
    background: rgba(71, 85, 105, 0.6);
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: rgba(100, 116, 139, 0.7);
}

.drag-over {
    border-color: var(--accent) !important;
    background-color: var(--accent-soft) !important;
}

.gantt-track {
    overflow: hidden;
}
.gantt-bar {
    cursor: grab;
    touch-action: none;
}
.gantt-bar--clip-left {
    border-top-left-radius: 0.25rem;
    border-bottom-left-radius: 0.25rem;
}
.gantt-bar--clip-right {
    border-top-right-radius: 0.25rem;
    border-bottom-right-radius: 0.25rem;
}
.gantt-bar--clip-left::before,
.gantt-bar--clip-right::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 0;
    height: 0;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    opacity: 0.55;
    pointer-events: none;
}
.gantt-bar--clip-left::before {
    left: 2px;
    transform: translateY(-50%);
    border-right: 5px solid currentColor;
}
.gantt-bar--clip-right::after {
    right: 2px;
    transform: translateY(-50%);
    border-left: 5px solid currentColor;
}
.gantt-bar.gantt-dragging {
    cursor: grabbing;
    opacity: 0.92;
    z-index: 20;
}

.gantt-row:has(.gantt-dragging) {
    position: relative;
    z-index: 5;
}

.gantt-row:has(.gantt-dragging) .gantt-row-label {
    z-index: 15;
}
.gantt-resize-handle {
    z-index: 2;
}

.gantt-today-line {
    width: 2px;
    background-color: rgb(244 63 94);
    box-shadow: 0 0 0 1px rgba(244, 63, 94, 0.15);
    pointer-events: none;
    transform: translateX(-50%);
    z-index: 30;
}

.gantt-today-line--mid {
    transform: translate(-50%, -50%);
}

@media print {
    @page {
        size: landscape;
        margin: 0.8cm !important;
    }
    body {
        background: white !important;
        background-image: none !important;
        color: #000 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    .ambient-orbs { display: none !important; }
    header, .no-print, button, form, input, select, textarea, .settings-btn-print, #modal-report, #modal-target-date {
        display: none !important;
    }
    main {
        max-width: 100% !important;
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    #view-board, #view-archive, #view-tasks, #view-extra, #view-visie, #view-brainstorm {
        display: none !important;
    }
    #view-timeline {
        display: flex !important;
        position: static !important;
        inset: auto !important;
        opacity: 1 !important;
        visibility: visible !important;
        border: none !important;
        box-shadow: none !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
    }
    .custom-scrollbar {
        overflow: visible !important;
        max-height: none !important;
    }
    .gantt-bar, .gantt-resize-handle {
        pointer-events: none !important;
    }
}

/* --- Timeline milestone pin hover tooltip (body portal) --- */
.timeline-pin-tooltip-portal {
    position: fixed;
    z-index: 200;
    width: min(18rem, calc(100vw - 1.25rem));
    padding: 0.625rem 0.75rem;
    border-radius: 0.75rem;
    background: rgba(255, 255, 255, 0.98);
    color: #0f172a;
    border: 1px solid rgba(226, 232, 240, 0.95);
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.18);
    pointer-events: none;
}

.timeline-pin-tooltip-portal.hidden {
    display: none !important;
}

.dark .timeline-pin-tooltip-portal {
    background: rgba(15, 23, 42, 0.98);
    color: #e2e8f0;
    border-color: #334155;
}

.timeline-pin-tooltip-portal__title {
    font-size: 0.8125rem;
    font-weight: 700;
    line-height: 1.35;
    margin-bottom: 0.375rem;
    word-break: break-word;
}

.timeline-pin-tooltip-portal__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem;
    margin-bottom: 0.375rem;
}

.timeline-pin-tooltip-portal__cat {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.125rem 0.375rem;
    border-radius: 9999px;
    border-width: 1px;
    font-size: 0.5625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.timeline-pin-tooltip-portal__dot {
    width: 0.375rem;
    height: 0.375rem;
    border-radius: 9999px;
    flex-shrink: 0;
}

.timeline-pin-tooltip-portal__status {
    font-size: 0.5625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #64748b;
}

.dark .timeline-pin-tooltip-portal__status {
    color: #94a3b8;
}

.timeline-pin-tooltip-portal__dates {
    font-size: 0.625rem;
    color: #64748b;
    margin-bottom: 0.375rem;
}

.dark .timeline-pin-tooltip-portal__dates {
    color: #94a3b8;
}

.timeline-pin-tooltip-portal__hypothesis {
    font-size: 0.6875rem;
    line-height: 1.45;
    color: #475569;
    font-style: italic;
    margin-bottom: 0.25rem;
}

.dark .timeline-pin-tooltip-portal__hypothesis {
    color: #cbd5e1;
}

.timeline-pin-tooltip-portal__next {
    font-size: 0.625rem;
    line-height: 1.4;
    color: #334155;
}

.dark .timeline-pin-tooltip-portal__next {
    color: #e2e8f0;
}

.timeline-milestone-pin:hover {
    border-color: rgba(99, 102, 241, 0.55) !important;
}

/* --- Visie Whiteboard / Mindmap --- */
#view-visie.view-panel--active .view-panel-card {
    min-height: calc(100vh - var(--layout-chrome));
}

/* --- Vessels / VesselFinder AIS --- */
#view-extra.view-panel--active #view-vessels.extra-sub-panel--active .view-panel-card {
    min-height: calc(100vh - var(--layout-chrome) - 3.25rem);
}

.vessels-panel__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.75rem;
    padding: 0 0.15rem;
}

.vessels-panel__link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.6875rem;
    font-weight: 600;
    color: #64748b;
    padding: 0.35rem 0.65rem;
    border-radius: 0.625rem;
    border: 1px solid rgba(148, 163, 184, 0.35);
    background: rgba(255, 255, 255, 0.5);
    transition: color 0.15s, border-color 0.15s;
}

.dark .vessels-panel__link {
    color: #94a3b8;
    background: rgba(15, 23, 42, 0.5);
    border-color: rgba(71, 85, 105, 0.5);
}

.vessels-panel__link:hover {
    color: #0ea5e9;
    border-color: rgba(14, 165, 233, 0.45);
}

.vessels-map-wrap {
    position: relative;
    border-radius: 0.875rem;
    overflow: hidden;
    border: 1px solid rgba(148, 163, 184, 0.35);
    background: #0f172a;
    min-height: 28rem;
}

.vessels-map-iframe {
    display: block;
    width: 100%;
    height: 100%;
    min-height: calc(100vh - var(--layout-chrome) - 5.5rem);
    border: 0;
    opacity: 0;
    transition: opacity 0.25s ease;
}

.vessels-map-iframe--loaded {
    opacity: 1;
}

.vessels-panel__header-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.vessels-connect {
    margin: 0 0 0.75rem;
    padding: 0.85rem 1rem;
    border-radius: 1rem;
    border: 1px dashed rgba(14, 165, 233, 0.45);
    background: linear-gradient(135deg, rgba(224, 242, 254, 0.55), rgba(240, 249, 255, 0.35));
}

.dark .vessels-connect {
    border-color: rgba(56, 189, 248, 0.35);
    background: linear-gradient(135deg, rgba(12, 74, 110, 0.35), rgba(15, 23, 42, 0.55));
}

.vessels-connect--linked {
    border-style: solid;
    border-color: rgba(16, 185, 129, 0.45);
    background: linear-gradient(135deg, rgba(209, 250, 229, 0.45), rgba(240, 253, 244, 0.25));
}

.dark .vessels-connect--linked {
    border-color: rgba(52, 211, 153, 0.35);
    background: linear-gradient(135deg, rgba(6, 78, 59, 0.35), rgba(15, 23, 42, 0.55));
}

.vessels-connect__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.vessels-connect__title {
    font-size: 0.8125rem;
    font-weight: 700;
    color: #0c4a6e;
}

.dark .vessels-connect__title {
    color: #7dd3fc;
}

.vessels-connect__lead {
    font-size: 0.6875rem;
    color: #475569;
    margin-top: 0.15rem;
    line-height: 1.35;
}

.dark .vessels-connect__lead {
    color: #94a3b8;
}

.vessels-connect__badge {
    font-size: 0.625rem;
    font-weight: 700;
    padding: 0.25rem 0.55rem;
    border-radius: 999px;
    background: rgba(16, 185, 129, 0.15);
    color: #047857;
    white-space: nowrap;
}

.dark .vessels-connect__badge {
    background: rgba(16, 185, 129, 0.2);
    color: #6ee7b7;
}

.vessels-connect__steps {
    margin: 0.35rem 0 0.65rem 1.1rem;
    font-size: 0.6875rem;
    color: #64748b;
    line-height: 1.45;
}

.vessels-connect__actions,
.vessels-connect__form {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    align-items: center;
}

.vessels-connect__form {
    margin-top: 0.45rem;
}

.vessels-connect__input {
    flex: 1 1 12rem;
    min-width: 10rem;
    font-size: 0.6875rem;
    padding: 0.45rem 0.65rem;
    border-radius: 0.55rem;
    border: 1px solid rgba(148, 163, 184, 0.45);
    background: rgba(255, 255, 255, 0.85);
}

.dark .vessels-connect__input {
    background: rgba(15, 23, 42, 0.75);
    border-color: rgba(71, 85, 105, 0.55);
    color: #f1f5f9;
}

.vessels-connect__hint {
    margin: 0.45rem 0 0;
    font-size: 0.625rem;
    color: #94a3b8;
}

.vessels-connect--linked .vessels-connect__steps,
.vessels-connect--linked .vessels-connect__actions,
.vessels-connect--linked .vessels-connect__hint,
.vessels-connect--linked .vessels-connect__input,
.vessels-connect--linked #vessels-connect-btn {
    display: none;
}

.vessels-toolbar-btn--primary {
    background: rgba(14, 165, 233, 0.15);
    border-color: rgba(14, 165, 233, 0.35);
    color: #0369a1;
}

.dark .vessels-toolbar-btn--primary {
    color: #7dd3fc;
    background: rgba(12, 74, 110, 0.55);
}

.vessels-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1.25rem;
    margin-bottom: 0.75rem;
    padding: 0.55rem 0.75rem;
    border-radius: 0.75rem;
    border: 1px solid rgba(148, 163, 184, 0.28);
    background: rgba(248, 250, 252, 0.55);
}

.dark .vessels-toolbar {
    background: rgba(15, 23, 42, 0.45);
    border-color: rgba(71, 85, 105, 0.45);
}

.vessels-toolbar-field {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.6875rem;
    font-weight: 600;
    color: #475569;
}

.dark .vessels-toolbar-field {
    color: #94a3b8;
}

.vessels-toolbar-field input[type="range"] {
    width: 7rem;
    accent-color: #0ea5e9;
}

.vessels-toolbar-field output {
    min-width: 3rem;
    font-variant-numeric: tabular-nums;
    color: #0ea5e9;
}

.vessels-toolbar-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.6875rem;
    font-weight: 700;
    color: #0369a1;
    padding: 0.35rem 0.65rem;
    border-radius: 0.625rem;
    border: 1px solid rgba(14, 165, 233, 0.35);
    background: rgba(224, 242, 254, 0.65);
    transition: background 0.15s, transform 0.15s;
}

.dark .vessels-toolbar-btn {
    color: #7dd3fc;
    background: rgba(12, 74, 110, 0.35);
    border-color: rgba(56, 189, 248, 0.35);
}

.vessels-toolbar-btn:hover {
    background: rgba(186, 230, 253, 0.85);
}

.vessels-toolbar-btn--busy i {
    animation: spin 0.8s linear infinite;
}

.vessels-map-mode {
    display: inline-flex;
    border-radius: 0.625rem;
    border: 1px solid rgba(148, 163, 184, 0.35);
    overflow: hidden;
    background: rgba(255, 255, 255, 0.45);
}

.dark .vessels-map-mode {
    background: rgba(15, 23, 42, 0.55);
    border-color: rgba(71, 85, 105, 0.5);
}

.vessels-map-mode-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.6875rem;
    font-weight: 700;
    padding: 0.35rem 0.6rem;
    color: #64748b;
    border: 0;
    background: transparent;
    transition: background 0.15s, color 0.15s;
}

.vessels-map-mode-btn--active {
    color: #0369a1;
    background: rgba(224, 242, 254, 0.85);
}

.dark .vessels-map-mode-btn--active {
    color: #7dd3fc;
    background: rgba(12, 74, 110, 0.55);
}

.vessels-fleet-config {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
}

.vessels-fleet-input {
    width: 11rem;
    max-width: 42vw;
    font-size: 0.6875rem;
    padding: 0.35rem 0.55rem;
    border-radius: 0.5rem;
    border: 1px solid rgba(148, 163, 184, 0.4);
    background: rgba(255, 255, 255, 0.7);
    color: #0f172a;
}

.vessels-fleet-input--name {
    width: 8rem;
}

.dark .vessels-fleet-input {
    background: rgba(15, 23, 42, 0.7);
    border-color: rgba(71, 85, 105, 0.55);
    color: #f1f5f9;
}

.vessels-fleet-help {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.65rem;
    height: 1.65rem;
    border-radius: 999px;
    color: #64748b;
    border: 1px solid rgba(148, 163, 184, 0.35);
    font-size: 0.75rem;
}

.vessels-fleet-help:hover {
    color: #0284c7;
    border-color: rgba(14, 165, 233, 0.45);
}

.vessels-scan-status {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.6875rem;
    color: #64748b;
    flex: 1;
    min-width: 12rem;
}

.vessels-scan-status a {
    color: #0284c7;
    text-decoration: underline;
}

.vessels-scan-status--ok { color: #059669; }
.vessels-scan-status--warn { color: #d97706; }
.vessels-scan-status--error { color: #dc2626; }
.vessels-scan-status--busy { color: #0284c7; }

.vessels-body {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(16rem, 0.85fr);
    gap: 0.75rem;
    min-height: 0;
}

@media (max-width: 1024px) {
    .vessels-body {
        grid-template-columns: 1fr;
        grid-template-rows: minmax(18rem, 42vh) minmax(16rem, 1fr);
    }
}

.vessels-map-wrap {
    min-height: 0;
}

.vessels-map-iframe {
    min-height: 100%;
    height: 100%;
}

.vessels-radar {
    display: flex;
    flex-direction: column;
    min-height: 0;
    border-radius: 0.875rem;
    border: 1px solid rgba(148, 163, 184, 0.35);
    background: rgba(248, 250, 252, 0.45);
    overflow: auto;
}

.dark .vessels-radar {
    background: rgba(15, 23, 42, 0.55);
    border-color: rgba(71, 85, 105, 0.5);
}

.vessels-radar__intro {
    padding: 0.75rem 0.85rem 0.35rem;
    position: sticky;
    top: 0;
    z-index: 1;
    background: inherit;
    backdrop-filter: blur(8px);
}

.vessels-radar__title {
    font-size: 0.8125rem;
    font-weight: 800;
    color: #0f172a;
}

.dark .vessels-radar__title {
    color: #f8fafc;
}

.vessels-radar__hint {
    font-size: 0.625rem;
    color: #64748b;
    margin-top: 0.15rem;
}

.vessels-harbor-list {
    padding: 0.35rem 0.55rem 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.vessels-radar-row {
    padding: 0.55rem 0.65rem;
    border-radius: 0.65rem;
    border: 1px solid rgba(148, 163, 184, 0.28);
    background: rgba(255, 255, 255, 0.55);
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.vessels-radar-row:hover {
    border-color: rgba(14, 165, 233, 0.45);
}

.vessels-radar-row:focus-visible {
    outline: 2px solid rgba(14, 165, 233, 0.55);
    outline-offset: 2px;
}

.vessels-radar-row--focus {
    border-color: rgba(14, 165, 233, 0.65);
    box-shadow: 0 0 0 1px rgba(14, 165, 233, 0.25);
}

.dark .vessels-radar-row {
    background: rgba(30, 41, 59, 0.55);
    border-color: rgba(71, 85, 105, 0.45);
}

.vessels-radar-row__name {
    font-size: 0.75rem;
    font-weight: 700;
    color: #0f172a;
}

.dark .vessels-radar-row__name {
    color: #f1f5f9;
}

.vessels-radar-row__status {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.2rem;
    font-size: 0.6875rem;
}

.vessels-radar-row__badge {
    font-size: 0.5625rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.12rem 0.4rem;
    border-radius: 999px;
}

.vessels-radar-row__badge--harbor {
    background: rgba(14, 165, 233, 0.15);
    color: #0369a1;
}

.vessels-radar-row__badge--dock {
    background: rgba(16, 185, 129, 0.15);
    color: #047857;
}

.vessels-radar-row__badge--route {
    background: rgba(245, 158, 11, 0.15);
    color: #b45309;
}

.vessels-radar-row__harbor {
    font-weight: 600;
    color: #475569;
}

.dark .vessels-radar-row__harbor {
    color: #cbd5e1;
}

.vessels-radar-row__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-top: 0.25rem;
    font-size: 0.625rem;
    color: #64748b;
}

.vessels-radar-empty {
    padding: 1.5rem 1rem;
    text-align: center;
    color: #64748b;
    font-size: 0.75rem;
}

.vessels-radar-empty i {
    font-size: 1.25rem;
    margin-bottom: 0.5rem;
    opacity: 0.65;
}

.vessels-harbor-card {
    border-radius: 0.65rem;
    border: 1px solid rgba(148, 163, 184, 0.3);
    background: rgba(255, 255, 255, 0.55);
    overflow: hidden;
}

.dark .vessels-harbor-card {
    background: rgba(30, 41, 59, 0.55);
    border-color: rgba(71, 85, 105, 0.45);
}

.vessels-harbor-card__toggle {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 0.65rem;
    text-align: left;
    font-size: 0.75rem;
    font-weight: 700;
    color: #0f172a;
}

.dark .vessels-harbor-card__toggle {
    color: #f1f5f9;
}

.vessels-harbor-card__counts {
    display: inline-flex;
    gap: 0.25rem;
}

.vessels-count {
    min-width: 1.35rem;
    padding: 0.1rem 0.35rem;
    border-radius: 999px;
    font-size: 0.625rem;
    font-weight: 800;
    text-align: center;
}

.vessels-count--near {
    background: rgba(16, 185, 129, 0.15);
    color: #059669;
}

.vessels-count--route {
    background: rgba(14, 165, 233, 0.15);
    color: #0284c7;
}

.vessels-harbor-card__chev {
    font-size: 0.625rem;
    color: #94a3b8;
    transition: transform 0.15s;
}

.vessels-harbor-card--open .vessels-harbor-card__chev {
    transform: rotate(180deg);
}

.vessels-harbor-card__body {
    display: none;
    padding: 0 0.65rem 0.65rem;
}

.vessels-harbor-card--open .vessels-harbor-card__body {
    display: block;
}

.vessels-harbor-card__sub {
    font-size: 0.625rem;
    color: #64748b;
    margin-bottom: 0.35rem;
}

.vessels-ship-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.vessels-ship-row {
    padding: 0.4rem 0.45rem;
    border-radius: 0.45rem;
    background: rgba(241, 245, 249, 0.7);
    border: 1px solid rgba(148, 163, 184, 0.2);
}

.dark .vessels-ship-row {
    background: rgba(15, 23, 42, 0.55);
}

.vessels-ship-row__main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.35rem;
}

.vessels-ship-name {
    font-size: 0.6875rem;
    font-weight: 700;
    color: #0f172a;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dark .vessels-ship-name {
    color: #e2e8f0;
}

.vessels-ship-badge {
    font-size: 0.5625rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 0.1rem 0.3rem;
    border-radius: 999px;
    flex-shrink: 0;
}

.vessels-ship-badge--near {
    background: rgba(16, 185, 129, 0.18);
    color: #047857;
}

.vessels-ship-badge--route {
    background: rgba(14, 165, 233, 0.18);
    color: #0369a1;
}

.vessels-ship-badge--dock {
    background: rgba(99, 102, 241, 0.18);
    color: #4338ca;
}

.vessels-ship-harbor {
    font-weight: 700;
    color: #475569;
}

.dark .vessels-ship-harbor {
    color: #94a3b8;
}

.vessels-radar-row__badge--near {
    background: rgba(100, 116, 139, 0.15);
    color: #475569;
}

.vessels-toolbar-field--place {
    flex: 1 1 12rem;
    min-width: 10rem;
    max-width: 18rem;
}

.vessels-place-wrap {
    position: relative;
    width: 100%;
}

.vessels-place-input {
    width: 100%;
    font-size: 0.6875rem;
    padding: 0.3rem 0.45rem;
    border-radius: 0.45rem;
    border: 1px solid rgba(148, 163, 184, 0.4);
    background: rgba(255, 255, 255, 0.75);
    color: #0f172a;
}

.dark .vessels-place-input {
    background: rgba(15, 23, 42, 0.75);
    border-color: rgba(71, 85, 105, 0.55);
    color: #f1f5f9;
}

.vessels-place-results {
    position: absolute;
    top: calc(100% + 0.25rem);
    left: 0;
    right: 0;
    z-index: 40;
    max-height: 12rem;
    overflow-y: auto;
    border-radius: 0.55rem;
    border: 1px solid rgba(148, 163, 184, 0.35);
    background: #fff;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
}

.dark .vessels-place-results {
    background: #0f172a;
    border-color: rgba(71, 85, 105, 0.55);
}

.vessels-place-results.hidden {
    display: none;
}

.vessels-place-result {
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
    width: 100%;
    padding: 0.45rem 0.55rem;
    border: none;
    background: transparent;
    text-align: left;
    font-size: 0.625rem;
    color: #334155;
    cursor: pointer;
}

.vessels-place-result:hover {
    background: rgba(14, 165, 233, 0.08);
}

.dark .vessels-place-result {
    color: #cbd5e1;
}

.vessels-place-loading,
.vessels-place-empty {
    padding: 0.55rem 0.65rem;
    font-size: 0.625rem;
    color: #64748b;
}

.vessels-agent-status {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin-bottom: 0.65rem;
    padding: 0.4rem 0.55rem;
    border-radius: 0.55rem;
    font-size: 0.625rem;
    color: #475569;
    border: 1px solid rgba(99, 102, 241, 0.2);
    background: rgba(238, 242, 255, 0.45);
}

.dark .vessels-agent-status {
    color: #cbd5e1;
    background: rgba(30, 27, 75, 0.3);
}

.vessels-agent-status[data-tone="busy"] .vessels-agent-status__icon {
    animation: spin 1s linear infinite;
}

.vessels-agent-status[data-tone="ok"] {
    border-color: rgba(16, 185, 129, 0.25);
}

.vessels-agent-status[data-tone="warn"] {
    border-color: rgba(245, 158, 11, 0.25);
}

.vessels-ship-detail {
    margin-bottom: 0.65rem;
    padding: 0.65rem 0.7rem;
    border-radius: 0.75rem;
    border: 1px solid rgba(14, 165, 233, 0.35);
    background: rgba(224, 242, 254, 0.45);
}

.dark .vessels-ship-detail {
    background: rgba(12, 74, 110, 0.25);
    border-color: rgba(56, 189, 248, 0.35);
}

.vessels-ship-detail.hidden {
    display: none;
}

.vessels-ship-detail__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.35rem;
    font-size: 0.8125rem;
    font-weight: 700;
    color: #0f172a;
}

.dark .vessels-ship-detail__header {
    color: #f1f5f9;
}

.vessels-ship-detail__close {
    border: none;
    background: transparent;
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    color: #64748b;
}

.vessels-ship-detail__badge {
    display: inline-block;
    margin-top: 0.35rem;
}

.vessels-ship-detail__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.35rem 0.55rem;
    margin-top: 0.45rem;
    font-size: 0.625rem;
}

.vessels-ship-detail__grid dt {
    color: #64748b;
    font-weight: 600;
}

.vessels-ship-detail__grid dd {
    margin: 0;
    color: #0f172a;
    font-weight: 600;
}

.dark .vessels-ship-detail__grid dd {
    color: #e2e8f0;
}

.vessels-ship-detail__loading {
    margin-top: 0.35rem;
    font-size: 0.625rem;
    color: #64748b;
}

.vessels-ship-detail__link {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin-top: 0.45rem;
    font-size: 0.625rem;
    font-weight: 700;
    color: #0369a1;
}

.vessels-radar-section__title {
    font-size: 0.5625rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #64748b;
    margin: 0.45rem 0 0.25rem;
}

.vessels-radar-section:first-child .vessels-radar-section__title {
    margin-top: 0;
}

.vessels-search-row {
    position: relative;
    margin-bottom: 0.75rem;
}

.vessels-search {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.45rem 0.55rem;
    border-radius: 0.75rem;
    border: 1px solid rgba(148, 163, 184, 0.35);
    background: rgba(255, 255, 255, 0.55);
}

.dark .vessels-search {
    background: rgba(15, 23, 42, 0.55);
    border-color: rgba(71, 85, 105, 0.5);
}

.vessels-search__icon {
    color: #94a3b8;
    font-size: 0.75rem;
    padding-left: 0.25rem;
}

.vessels-search__input {
    flex: 1;
    border: 0;
    background: transparent;
    font-size: 0.75rem;
    color: #0f172a;
    outline: none;
    min-width: 0;
}

.dark .vessels-search__input {
    color: #f1f5f9;
}

.vessels-search-results {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: 40;
    margin-top: 0.35rem;
    max-height: min(320px, 40vh);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.vessels-search-results.hidden {
    display: none;
}

.vessels-search-result {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.45rem 0.55rem;
    border-radius: 0.55rem;
    border: 1px solid rgba(148, 163, 184, 0.28);
    background: rgba(248, 250, 252, 0.7);
    font-size: 0.6875rem;
    cursor: pointer;
}

.vessels-search-result:hover {
    border-color: rgba(14, 165, 233, 0.45);
}

.vessels-search-result__actions {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    flex-shrink: 0;
}

.vessels-search-focus {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.65rem;
    height: 1.65rem;
    border-radius: 0.45rem;
    border: 1px solid rgba(14, 165, 233, 0.35);
    background: rgba(224, 242, 254, 0.65);
    color: #0369a1;
    cursor: pointer;
}

.vessels-agent-row {
    margin-bottom: 0.75rem;
}

.vessels-agent {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.45rem 0.55rem;
    border-radius: 0.75rem;
    border: 1px solid rgba(99, 102, 241, 0.25);
    background: rgba(238, 242, 255, 0.55);
}

.dark .vessels-agent {
    background: rgba(30, 27, 75, 0.35);
    border-color: rgba(99, 102, 241, 0.35);
}

.vessels-agent__icon {
    color: #6366f1;
    font-size: 0.85rem;
    flex-shrink: 0;
}

.vessels-agent__input {
    flex: 1;
    min-width: 0;
    border: none;
    background: transparent;
    font-size: 0.6875rem;
    color: #0f172a;
    outline: none;
}

.dark .vessels-agent__input {
    color: #f1f5f9;
}

.vessels-agent-result {
    margin-top: 0.45rem;
    padding: 0.55rem 0.65rem;
    border-radius: 0.65rem;
    border: 1px solid rgba(99, 102, 241, 0.2);
    background: rgba(255, 255, 255, 0.65);
    font-size: 0.6875rem;
    color: #334155;
    line-height: 1.45;
}

.dark .vessels-agent-result {
    background: rgba(15, 23, 42, 0.55);
    color: #cbd5e1;
}

.vessels-agent-result.hidden {
    display: none;
}

.vessels-agent-loading {
    color: #64748b;
}

.dark .vessels-search-result {
    background: rgba(30, 41, 59, 0.55);
}

.vessels-search-result__main {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.vessels-search-result__main span {
    color: #64748b;
    font-size: 0.625rem;
}

.vessels-search-add {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.625rem;
    font-weight: 700;
    color: #0369a1;
    padding: 0.3rem 0.5rem;
    border-radius: 0.45rem;
    border: 1px solid rgba(14, 165, 233, 0.35);
    background: rgba(224, 242, 254, 0.65);
}

.vessels-search-loading,
.vessels-search-empty {
    font-size: 0.6875rem;
    color: #64748b;
    padding: 0.35rem 0.15rem;
}

.vessels-fleet-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.45rem;
}

.vessels-fleet-chips__empty {
    font-size: 0.625rem;
    color: #94a3b8;
}

.vessels-fleet-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.625rem;
    font-weight: 600;
    padding: 0.2rem 0.35rem 0.2rem 0.5rem;
    border-radius: 999px;
    background: rgba(14, 165, 233, 0.12);
    color: #0369a1;
    border: 1px solid rgba(14, 165, 233, 0.25);
}

.vessels-fleet-chip__remove {
    border: 0;
    background: transparent;
    color: inherit;
    font-size: 0.85rem;
    line-height: 1;
    padding: 0 0.15rem;
    cursor: pointer;
    opacity: 0.7;
}

.vessels-fleet-chip__remove:hover {
    opacity: 1;
}

.vessels-ship-row__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.6rem;
    margin-top: 0.2rem;
    font-size: 0.625rem;
    color: #64748b;
    font-variant-numeric: tabular-nums;
}

.vessels-ship-dest {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vessels-ship-empty {
    font-size: 0.625rem;
    color: #94a3b8;
    padding: 0.35rem 0.15rem;
}

.visie-board-header {
    flex-wrap: wrap;
}

.visie-board-name {
    font-size: 1rem;
    font-weight: 700;
    color: #0f172a;
    cursor: text;
    border-radius: 0.375rem;
    padding: 0.1rem 0.35rem;
    outline: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 14rem;
}

.dark .visie-board-name {
    color: #f8fafc;
}

.visie-board-name:hover {
    background: rgba(99, 102, 241, 0.08);
}

.visie-board-name--editing {
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.35);
    white-space: normal;
    max-width: none;
}

.dark .visie-board-name--editing {
    background: rgba(15, 23, 42, 0.9);
}

.visie-board-picker {
    font-size: 0.6875rem;
    padding: 0.35rem 0.5rem;
    border-radius: 0.625rem;
    border: 1px solid rgba(148, 163, 184, 0.35);
    background: rgba(255, 255, 255, 0.7);
    max-width: 14rem;
}

.visie-main-board-btn--starred {
    color: #f59e0b;
    background: rgba(245, 158, 11, 0.12);
    border-color: rgba(245, 158, 11, 0.35);
}

.visie-main-board-btn--starred:hover {
    background: rgba(245, 158, 11, 0.2);
}

.dark .visie-board-picker {
    background: rgba(15, 23, 42, 0.8);
    border-color: rgba(71, 85, 105, 0.6);
    color: #e2e8f0;
}

.visie-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem;
    border-radius: 0.875rem;
    background: rgba(148, 163, 184, 0.1);
    border: 1px solid rgba(148, 163, 184, 0.2);
}

.visie-toolbar-divider {
    width: 1px;
    height: 1.5rem;
    background: rgba(148, 163, 184, 0.35);
    margin: 0 0.25rem;
}

.visie-tool-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.65rem;
    font-size: 0.6875rem;
    font-weight: 600;
    color: #475569;
    border-radius: 0.625rem;
    border: 1px solid transparent;
    background: transparent;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    cursor: pointer;
}

.dark .visie-tool-btn {
    color: #cbd5e1;
}

.visie-tool-btn:hover {
    background: rgba(255, 255, 255, 0.65);
    border-color: rgba(148, 163, 184, 0.3);
}

.dark .visie-tool-btn:hover {
    background: rgba(30, 41, 59, 0.65);
}

.visie-tool-btn--active {
    background: rgba(99, 102, 241, 0.15);
    border-color: rgba(99, 102, 241, 0.35);
    color: #4338ca;
}

.dark .visie-tool-btn--active {
    color: #a5b4fc;
}

.visie-tool-btn--danger:hover {
    background: rgba(244, 63, 94, 0.1);
    border-color: rgba(244, 63, 94, 0.3);
    color: #e11d48;
}

.visie-tool-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
    pointer-events: none;
}

.visie-tool-group {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.visie-tool-label {
    font-size: 0.5625rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #64748b;
    margin-right: 0.15rem;
}

.dark .visie-tool-label {
    color: #94a3b8;
}

.visie-text-size-btn {
    min-width: 3.25rem;
    font-size: 0.625rem !important;
    font-weight: 700;
}

.visie-project-picker {
    font-size: 0.6875rem;
    padding: 0.35rem 0.5rem;
    border-radius: 0.625rem;
    border: 1px solid rgba(148, 163, 184, 0.35);
    background: rgba(255, 255, 255, 0.7);
    max-width: 11rem;
}

.dark .visie-project-picker {
    background: rgba(15, 23, 42, 0.8);
    border-color: rgba(71, 85, 105, 0.6);
    color: #e2e8f0;
}

.visie-viewport {
    position: relative;
    overflow: hidden;
    border-radius: 1rem;
    background-color: #f8fafc;
    background-image:
        radial-gradient(circle, rgba(148, 163, 184, 0.45) 1px, transparent 1px);
    background-size: 24px 24px;
    cursor: default;
    touch-action: none;
}

.dark .visie-viewport {
    background-color: #0f172a;
    background-image:
        radial-gradient(circle, rgba(71, 85, 105, 0.55) 1px, transparent 1px);
}

.visie-viewport--pan {
    cursor: grab;
}

.visie-viewport--pan:active {
    cursor: grabbing;
}

.visie-world {
    position: absolute;
    top: 0;
    left: 0;
    width: 6000px;
    height: 6000px;
    transform-origin: 0 0;
    will-change: transform;
}

.visie-edges-svg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: visible;
    z-index: 4;
}

.visie-edge-line-hit {
    fill: none;
    stroke: transparent;
    stroke-width: 22;
    pointer-events: stroke;
    cursor: pointer;
}

.visie-edge-line {
    fill: none;
    stroke-width: 2.5;
    stroke-opacity: 0.65;
    stroke-linecap: round;
    shape-rendering: geometricPrecision;
    pointer-events: none;
}

.visie-edge-line--highlight {
    stroke-opacity: 0.95;
    stroke-width: 3.5;
}

.visie-edge-line--selected {
    stroke-opacity: 1;
    stroke-width: 4;
    filter: drop-shadow(0 0 4px rgba(99, 102, 241, 0.45));
}

.visie-nodes-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.visie-nodes-layer .visie-node,
.visie-nodes-layer .visie-connect-dot,
.visie-nodes-layer .visie-node__resize {
    pointer-events: auto;
}

.visie-node {
    position: absolute;
    display: flex;
    align-items: flex-start;
    gap: 0.375rem;
    padding: 0.5rem 0.625rem;
    border-radius: 0.875rem;
    background: #ffffff;
    border: 2px solid rgba(148, 163, 184, 0.55);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
    cursor: grab;
    user-select: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: geometricPrecision;
}

.dark .visie-node {
    background: #1e293b;
    border-color: rgba(100, 116, 139, 0.75);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

.visie-node:active {
    cursor: grabbing;
}

.visie-node--selected {
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.25), 0 8px 24px rgba(99, 102, 241, 0.15);
}

.visie-node__grip {
    color: #94a3b8;
    font-size: 0.625rem;
    padding-top: 0.15rem;
    opacity: 0.6;
    flex-shrink: 0;
}

.visie-node--text {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    box-sizing: border-box;
    overflow: visible;
    border-width: 2px;
    border-style: solid;
    background-color: transparent;
}

.visie-node__text {
    width: 100%;
    font-size: 0.8125rem;
    line-height: 1.2;
    outline: none;
    min-width: 0;
    white-space: pre;
    word-break: normal;
    overflow-wrap: normal;
    text-align: center;
    cursor: text;
}

.visie-node__text--kop {
    font-weight: 700;
    color: #ffffff;
}

.visie-node__text--subkop {
    font-weight: 400;
    color: #ffffff;
}

.visie-node__text--subsubkop {
    font-weight: 400;
    color: #ffffff;
}

.visie-node__text--orphan {
    font-weight: 400;
    color: #334155;
}

.dark .visie-node__text--orphan {
    color: #cbd5e1;
}

.visie-node__hoofd-star {
    position: absolute;
    top: -6px;
    left: -6px;
    width: 1rem;
    height: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    background: #f59e0b;
    color: #ffffff;
    font-size: 0.5rem;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
    z-index: 12;
    pointer-events: none;
}

.visie-node__priority-mark {
    position: absolute;
    top: -7px;
    right: -7px;
    width: 1.125rem;
    height: 1.125rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    background: #f43f5e;
    color: #ffffff;
    font-size: 0.55rem;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
    z-index: 13;
    pointer-events: none;
}

.visie-priority-wrap {
    display: inline-flex;
}

.visie-priority-count {
    position: absolute;
    top: -0.35rem;
    right: -0.35rem;
    min-width: 1rem;
    height: 1rem;
    padding: 0 0.25rem;
    border-radius: 9999px;
    background: #f43f5e;
    color: #fff;
    font-size: 0.5625rem;
    font-weight: 700;
    line-height: 1rem;
    text-align: center;
}

.visie-priority-panel {
    position: absolute;
    top: calc(100% + 0.35rem);
    left: 0;
    z-index: 60;
    width: min(22rem, calc(100vw - 2rem));
    max-height: min(24rem, 50vh);
    display: flex;
    flex-direction: column;
    border-radius: 0.875rem;
    border: 1px solid rgba(148, 163, 184, 0.35);
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.18);
    overflow: hidden;
}

.dark .visie-priority-panel {
    background: rgba(15, 23, 42, 0.98);
    border-color: rgba(71, 85, 105, 0.6);
}

.visie-priority-panel__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.75rem 0.875rem 0.25rem;
}

.visie-priority-panel__title {
    font-size: 0.8125rem;
    font-weight: 700;
    color: #0f172a;
}

.dark .visie-priority-panel__title {
    color: #f8fafc;
}

.visie-priority-panel__close {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 0.5rem;
    color: #64748b;
    display: flex;
    align-items: center;
    justify-content: center;
}

.visie-priority-panel__close:hover {
    background: rgba(148, 163, 184, 0.15);
    color: #334155;
}

.visie-priority-panel__hint {
    padding: 0 0.875rem 0.5rem;
    font-size: 0.625rem;
    color: #94a3b8;
}

.visie-priority-list {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 0 0.5rem 0.75rem;
    overflow-y: auto;
}

.visie-priority-item {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem;
    border-radius: 0.75rem;
    border: 1px solid rgba(148, 163, 184, 0.25);
    background: rgba(248, 250, 252, 0.9);
    cursor: grab;
}

.dark .visie-priority-item:not([class*="bg-"]) {
    background: rgba(30, 41, 59, 0.65);
    border-color: rgba(71, 85, 105, 0.45);
}

.visie-priority-item--dragging {
    opacity: 0.55;
}

.visie-priority-item--drop-target {
    border-color: #6366f1;
    box-shadow: 0 0 0 1px rgba(99, 102, 241, 0.35);
}

.visie-priority-item__grip {
    color: #94a3b8;
    font-size: 0.625rem;
    padding: 0 0.15rem;
    cursor: grab;
}

.visie-priority-item__rank {
    width: 1.125rem;
    text-align: center;
    font-size: 0.625rem;
    font-weight: 800;
    flex-shrink: 0;
}

.visie-priority-item__body {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-align: left;
    padding: 0.15rem 0.25rem;
    border-radius: 0.5rem;
}

.visie-priority-item__body:hover {
    background: rgba(99, 102, 241, 0.08);
}

.visie-priority-item__icon {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
    font-size: 0.625rem;
    flex-shrink: 0;
}

.visie-priority-item__text {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.visie-priority-item__title {
    font-size: 0.75rem;
    font-weight: 700;
    color: #0f172a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dark .visie-priority-item__title:not([class*="text-"]) {
    color: #f1f5f9;
}

.visie-priority-item__meta {
    font-size: 0.625rem;
    color: #64748b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.visie-priority-item__remove {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 0.5rem;
    color: #94a3b8;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.visie-priority-item__remove:hover {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.1);
}

.visie-priority-empty {
    padding: 0.75rem 0.875rem 1rem;
    font-size: 0.6875rem;
    color: #94a3b8;
    text-align: center;
}

.visie-drill-btn {
    position: absolute;
    bottom: -7px;
    left: -7px;
    width: 1.125rem;
    height: 1.125rem;
    border-radius: 9999px;
    border: 2px solid #ffffff;
    background: #6366f1;
    color: #ffffff;
    cursor: pointer;
    z-index: 15;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.45rem;
    box-shadow:
        0 0 0 2px rgba(99, 102, 241, 0.35),
        0 2px 8px rgba(30, 27, 75, 0.28);
    transition: transform 0.12s, background 0.12s;
}

.visie-drill-btn:hover {
    transform: scale(1.1);
    background: #4f46e5;
}

.visie-node--project {
    min-width: 120px;
    width: auto;
    align-items: flex-start;
    border-width: 1px;
    border-style: solid;
    box-sizing: border-box;
}

.visie-node__cat {
    line-height: 1.2;
}

.visie-color-label {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    cursor: pointer;
    padding: 0.25rem;
    border-radius: 0.5rem;
}

.visie-color-input {
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    border-radius: 0.375rem;
}

.visie-node__resize {
    position: absolute;
    right: -4px;
    bottom: -4px;
    width: 1.125rem;
    height: 1.125rem;
    border-radius: 0.375rem;
    background: rgba(99, 102, 241, 0.9);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.5rem;
    cursor: nwse-resize;
    z-index: 2;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

.visie-node__resize:hover {
    background: #4338ca;
}

.visie-node--text,
.visie-node--image {
    position: absolute;
}

.visie-node--project {
    position: absolute;
}

.visie-node__project-title {
    font-size: 0.75rem;
    font-weight: 700;
    color: #1e293b;
    line-height: 1.25;
    white-space: nowrap;
    overflow: visible;
}

.dark .visie-node__project-title {
    color: #f1f5f9;
}

.visie-node__status {
    font-size: 0.5625rem;
    font-weight: 700;
    padding: 0.1rem 0.35rem;
    border-radius: 0.25rem;
    margin-top: 0.15rem;
    display: inline-block;
}

.visie-node--image {
    flex-direction: column;
    padding: 0.375rem;
    overflow: visible;
}

.visie-node__image-wrap {
    overflow: hidden;
    border-radius: 0.5rem;
    width: 100%;
}

.visie-connect-hint {
    position: absolute;
    bottom: 2.25rem;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.6875rem;
    font-weight: 600;
    padding: 0.35rem 0.75rem;
    border-radius: 9999px;
    background: rgba(99, 102, 241, 0.9);
    color: white;
    pointer-events: none;
    z-index: 10;
}

.visie-hint-bar {
    position: absolute;
    bottom: 0.5rem;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.625rem;
    font-weight: 500;
    color: #94a3b8;
    pointer-events: none;
    z-index: 5;
    white-space: nowrap;
}

.dark .visie-hint-bar {
    color: #64748b;
}

.visie-zones-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.visie-zones-layer .visie-zone {
    pointer-events: auto;
}

.visie-zone {
    position: absolute;
    border: 2px dashed;
    border-radius: 1rem;
    cursor: grab;
    user-select: none;
}

.visie-zone--selected {
    border-width: 2.5px;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
}

.visie-zone__label {
    position: absolute;
    top: -1.35rem;
    left: 0.5rem;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    cursor: text;
    border-radius: 0.25rem;
    padding: 0.05rem 0.25rem;
    outline: none;
}

.visie-zone__label--editing {
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.3);
}

.dark .visie-zone__label--editing {
    background: rgba(15, 23, 42, 0.95);
}

.visie-marquee {
    position: absolute;
    border: 2px dashed rgba(99, 102, 241, 0.85);
    background: rgba(99, 102, 241, 0.08);
    border-radius: 0.5rem;
    pointer-events: none;
    z-index: 20;
}

.visie-marquee--select {
    border-color: rgba(14, 165, 233, 0.9);
    background: rgba(14, 165, 233, 0.1);
}

.visie-node--hover:not(.visie-node--selected) {
    border-color: rgba(99, 102, 241, 0.55);
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.12);
}

.visie-node--text-root {
    box-shadow:
        0 0 0 1px rgba(99, 102, 241, 0.2),
        0 6px 18px rgba(79, 70, 229, 0.16);
}

.dark .visie-node--text-root {
    box-shadow:
        0 0 0 1px rgba(129, 140, 248, 0.28),
        0 6px 18px rgba(79, 70, 229, 0.28);
}

.visie-node--text,
.visie-node--project,
.visie-node--image {
    overflow: visible;
}

.visie-connect-dot {
    position: absolute;
    top: -7px;
    right: -7px;
    width: 0.875rem;
    height: 0.875rem;
    border-radius: 9999px;
    border: 2px solid #ffffff;
    background: #4f46e5;
    cursor: crosshair;
    z-index: 15;
    padding: 0;
    box-shadow:
        0 0 0 2px rgba(79, 70, 229, 0.35),
        0 2px 8px rgba(30, 27, 75, 0.28);
    transition: transform 0.12s, background 0.12s, box-shadow 0.12s;
}

.visie-connect-dot::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 9999px;
    border: 1.5px solid rgba(99, 102, 241, 0.28);
    pointer-events: none;
}

.visie-connect-dot:hover {
    transform: scale(1.1);
    box-shadow:
        0 0 0 3px rgba(79, 70, 229, 0.45),
        0 3px 10px rgba(30, 27, 75, 0.35);
}

.visie-connect-dot--active {
    background: #f59e0b;
    animation: visie-pulse 1s ease infinite;
}

@keyframes visie-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.5); }
    50% { box-shadow: 0 0 0 6px rgba(245, 158, 11, 0); }
}

.visie-context-menu {
    position: fixed;
    z-index: 200;
    min-width: 10.5rem;
    padding: 0.35rem;
    border-radius: 0.75rem;
    background: rgba(255, 255, 255, 0.97);
    border: 1px solid rgba(148, 163, 184, 0.35);
    box-shadow: 0 12px 40px rgba(15, 23, 42, 0.18);
    backdrop-filter: blur(12px);
}

.dark .visie-context-menu {
    background: rgba(30, 41, 59, 0.97);
    border-color: rgba(71, 85, 105, 0.6);
}

.visie-context-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.45rem 0.65rem;
    font-size: 0.6875rem;
    font-weight: 600;
    color: #334155;
    border: none;
    border-radius: 0.5rem;
    background: transparent;
    cursor: pointer;
    text-align: left;
}

.dark .visie-context-item {
    color: #e2e8f0;
}

.visie-context-item:hover {
    background: rgba(99, 102, 241, 0.1);
    color: #4338ca;
}

.visie-context-item--has-sub {
    position: relative;
}

.visie-context-chevron {
    margin-left: auto;
    font-size: 0.5rem;
    opacity: 0.5;
}

.visie-context-submenu {
    display: none;
    position: absolute;
    left: 100%;
    top: 0;
    min-width: 9rem;
    padding: 0.35rem;
    margin-left: 0.25rem;
    border-radius: 0.75rem;
    background: rgba(255, 255, 255, 0.97);
    border: 1px solid rgba(148, 163, 184, 0.35);
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.15);
}

.dark .visie-context-submenu {
    background: rgba(30, 41, 59, 0.97);
    border-color: rgba(71, 85, 105, 0.6);
}

.visie-context-item--has-sub:hover .visie-context-submenu {
    display: block;
}

.visie-context-heading {
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #94a3b8;
    padding: 0.35rem 0.65rem 0.25rem;
    margin: 0;
}

.visie-project-menu-list {
    max-height: 16rem;
    overflow-y: auto;
}

.visie-project-menu-header {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding-right: 0.25rem;
}

.visie-project-menu-title {
    flex: 1;
    min-width: 0;
    margin: 0 !important;
    padding: 0.35rem 0.65rem 0.25rem !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.visie-project-menu-back {
    flex-shrink: 0;
    width: 1.625rem;
    height: 1.625rem;
    margin-left: 0.35rem;
    border: none;
    border-radius: 0.5rem;
    background: rgba(148, 163, 184, 0.15);
    color: #64748b;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.625rem;
}

.visie-project-menu-back:hover {
    background: rgba(99, 102, 241, 0.15);
    color: #4f46e5;
}

.visie-project-folder {
    justify-content: space-between;
}

.visie-project-folder__meta {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-left: auto;
    flex-shrink: 0;
}

.visie-project-folder__count {
    font-size: 0.5625rem;
    font-weight: 700;
    color: #94a3b8;
    min-width: 1rem;
    text-align: right;
}

.visie-project-item__status {
    font-size: 0.5rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #94a3b8;
    margin-left: auto;
    flex-shrink: 0;
}

.visie-context-empty {
    font-size: 0.6875rem;
    color: #94a3b8;
    padding: 0.5rem 0.65rem;
    margin: 0;
}

.visie-node__img {
    width: 100%;
    object-fit: contain;
    border-radius: 0.5rem;
    pointer-events: none;
    image-rendering: auto;
}

.visie-node__img--sharp {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}

/* --- Project live feed (messaging style) --- */
.project-feed {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.75rem;
    border-radius: 1rem;
    background: linear-gradient(180deg, rgba(241, 245, 249, 0.9) 0%, rgba(226, 232, 240, 0.45) 100%);
    border: 1px solid rgba(148, 163, 184, 0.25);
}

.dark .project-feed {
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.65) 0%, rgba(30, 41, 59, 0.45) 100%);
    border-color: rgba(71, 85, 105, 0.45);
}

.project-feed__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.project-feed__title {
    font-size: 0.5625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #64748b;
}

.dark .project-feed__title {
    color: #94a3b8;
}

.project-feed__filter {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 9999px;
    border: none;
    background: rgba(255, 255, 255, 0.7);
    color: #cbd5e1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.625rem;
    transition: color 0.15s, background 0.15s;
}

.project-feed__filter:hover,
.project-feed__filter--on {
    color: #f59e0b;
    background: rgba(245, 158, 11, 0.12);
}

.dark .project-feed__filter {
    background: rgba(30, 41, 59, 0.8);
}

.project-feed__messages {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    max-height: 16rem;
    overflow-y: auto;
    padding: 0.25rem 0.125rem;
}

.project-feed__empty {
    font-size: 0.6875rem;
    color: #94a3b8;
    font-style: italic;
    text-align: center;
    padding: 1rem 0.5rem;
    margin: 0;
}

.feed-msg {
    display: flex;
    flex-direction: column;
    max-width: 88%;
}

.feed-msg--own {
    align-self: flex-end;
    align-items: flex-end;
}

.feed-msg--other {
    align-self: flex-start;
    align-items: flex-start;
}

.feed-msg__author {
    font-size: 0.625rem;
    font-weight: 700;
    color: #4f46e5;
    margin: 0 0 0.2rem 0.35rem;
    letter-spacing: 0.01em;
}

.dark .feed-msg__author {
    color: #a5b4fc;
}

.feed-msg--own .feed-msg__bubble {
    background: linear-gradient(145deg, #4f46e5, #6366f1);
    border-color: rgba(79, 70, 229, 0.35);
    border-radius: 1rem 1rem 0.35rem 1rem;
    color: #fff;
}

.feed-msg--own .feed-msg__text {
    color: #fff;
}

.feed-msg--own .feed-msg__caption {
    color: rgba(255, 255, 255, 0.88);
}

.feed-msg--own .feed-msg__star,
.feed-msg--own .feed-msg__delete {
    color: rgba(255, 255, 255, 0.55);
}

.feed-msg--own .feed-msg__star:hover,
.feed-msg--own .feed-msg__delete:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.12);
}

.feed-msg--other .feed-msg__bubble {
    border-radius: 1rem 1rem 1rem 0.35rem;
}

.feed-msg__bubble {
    position: relative;
    background: #ffffff;
    border-radius: 1rem 1rem 1rem 0.35rem;
    padding: 0.5rem 3.1rem 0.5rem 0.75rem;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
    border: 1px solid rgba(148, 163, 184, 0.2);
    min-width: 3rem;
}

.dark .feed-msg__bubble {
    background: rgba(30, 41, 59, 0.95);
    border-color: rgba(71, 85, 105, 0.5);
}

.feed-msg__bubble--starred {
    border-color: rgba(245, 158, 11, 0.45);
    box-shadow: 0 0 0 1px rgba(245, 158, 11, 0.15), 0 1px 3px rgba(15, 23, 42, 0.08);
}

.feed-msg__star {
    position: absolute;
    top: 0.35rem;
    right: 0.35rem;
    width: 1.25rem;
    height: 1.25rem;
    border: none;
    background: transparent;
    color: #cbd5e1;
    cursor: pointer;
    padding: 0;
    font-size: 0.625rem;
    line-height: 1;
    border-radius: 9999px;
    transition: color 0.12s, transform 0.12s;
}

.feed-msg__star:hover {
    color: #f59e0b;
    transform: scale(1.15);
}

.feed-msg__star--on {
    color: #f59e0b;
}

.feed-msg__delete {
    position: absolute;
    top: 0.35rem;
    right: 1.65rem;
    width: 1.25rem;
    height: 1.25rem;
    border: none;
    background: transparent;
    color: #cbd5e1;
    cursor: pointer;
    padding: 0;
    font-size: 0.5625rem;
    line-height: 1;
    border-radius: 9999px;
    transition: color 0.12s, background 0.12s;
}

.feed-msg__delete:hover {
    color: #e11d48;
    background: rgba(244, 63, 94, 0.08);
}

.feed-msg__text {
    font-size: 0.75rem;
    line-height: 1.45;
    color: #1e293b;
    margin: 0;
    word-break: break-word;
}

.dark .feed-msg__text {
    color: #e2e8f0;
}

.feed-msg__image-btn {
    display: block;
    border: none;
    background: transparent;
    padding: 0;
    cursor: zoom-in;
    max-width: 100%;
}

.feed-msg__image {
    display: block;
    max-width: min(100%, 22rem);
    max-height: 12rem;
    width: auto;
    height: auto;
    border-radius: 0.625rem;
    object-fit: contain;
}

.feed-msg__caption {
    display: block;
    font-size: 0.5625rem;
    color: #94a3b8;
    margin-top: 0.35rem;
}

.feed-msg__time {
    font-size: 0.5625rem;
    color: #94a3b8;
    margin-top: 0.2rem;
    margin-left: 0.35rem;
}

.project-feed__composer {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding-top: 0.375rem;
    border-top: 1px solid rgba(148, 163, 184, 0.2);
    min-width: 0;
    width: 100%;
}

.dark .project-feed__composer {
    border-top-color: rgba(71, 85, 105, 0.45);
}

.project-feed__input {
    flex: 1 1 0;
    min-width: 0;
    font-size: 0.6875rem;
    padding: 0.45rem 0.85rem;
    border-radius: 9999px;
    border: 1px solid rgba(148, 163, 184, 0.35);
    background: rgba(255, 255, 255, 0.85);
    color: #1e293b;
    outline: none;
}

.project-feed__input:focus {
    border-color: rgba(99, 102, 241, 0.55);
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.15);
}

.dark .project-feed__input {
    background: rgba(15, 23, 42, 0.85);
    border-color: rgba(71, 85, 105, 0.6);
    color: #f1f5f9;
}

.project-feed__send {
    width: 2rem;
    height: 2rem;
    flex-shrink: 0;
    border: none;
    border-radius: 9999px;
    background: #6366f1;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.625rem;
    transition: background 0.15s, transform 0.12s;
}

.project-feed__send:hover {
    background: #4338ca;
    transform: scale(1.05);
}

.feed-draft {
    margin-bottom: 0.375rem;
}

.feed-draft__inner {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.5rem;
    border-radius: 0.875rem;
    background: rgba(255, 255, 255, 0.92);
    border: 2px dashed rgba(99, 102, 241, 0.45);
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.08);
}

.dark .feed-draft__inner {
    background: rgba(30, 41, 59, 0.92);
    border-color: rgba(129, 140, 248, 0.45);
}

.feed-draft__img {
    width: 3.5rem;
    height: 3.5rem;
    object-fit: cover;
    border-radius: 0.5rem;
    flex-shrink: 0;
    background: #f1f5f9;
}

.feed-draft__meta {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.feed-draft__label {
    font-size: 0.6875rem;
    font-weight: 600;
    color: #4338ca;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dark .feed-draft__label {
    color: #a5b4fc;
}

.feed-draft__hint {
    font-size: 0.5625rem;
    color: #94a3b8;
}

.feed-draft__clear {
    width: 1.75rem;
    height: 1.75rem;
    flex-shrink: 0;
    border: none;
    border-radius: 9999px;
    background: rgba(148, 163, 184, 0.15);
    color: #64748b;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    transition: background 0.12s, color 0.12s;
}

.feed-draft__clear:hover {
    background: rgba(244, 63, 94, 0.12);
    color: #e11d48;
}

.board-card-details .feed-draft__inner {
    padding: 0.375rem;
}

.board-card-details .feed-draft__img {
    width: 2.75rem;
    height: 2.75rem;
}

/* --- Login & auth --- */
.login-page {
    font-family: Inter, system-ui, -apple-system, sans-serif;
    background: linear-gradient(145deg, #eef2ff 0%, #f8fafc 45%, #e0e7ff 100%);
}

.login-card {
    backdrop-filter: blur(16px);
}

.login-logo {
    width: 4rem;
    height: 4rem;
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(145deg, #4f46e5, #6366f1);
    color: #fff;
    font-size: 1.5rem;
    box-shadow: 0 10px 30px rgba(79, 70, 229, 0.25);
}

.login-logo.login-logo--custom {
    width: auto;
    height: auto;
    max-width: 9rem;
    max-height: 5rem;
    padding: 0;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
}

.login-logo__img {
    max-height: 5rem;
    max-width: 9rem;
    object-fit: contain;
    border-radius: 0.5rem;
}

.login-input {
    background: rgba(255, 255, 255, 0.9);
}

.login-submit {
    background: linear-gradient(145deg, #4f46e5, #6366f1);
    box-shadow: 0 8px 20px rgba(79, 70, 229, 0.25);
}

.login-submit:hover:not(:disabled) {
    filter: brightness(1.05);
}

.login-submit:disabled {
    opacity: 0.7;
    cursor: wait;
}

.auth-user-wrap {
    display: flex;
}

.auth-user-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.35rem 0.65rem;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid rgba(148, 163, 184, 0.35);
    font-size: 0.75rem;
    font-weight: 600;
    color: #334155;
}

.dark .auth-user-pill {
    background: rgba(30, 41, 59, 0.65);
    border-color: rgba(100, 116, 139, 0.45);
    color: #e2e8f0;
}

.auth-user-pill__name {
    max-width: 7rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.auth-user-role {
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #64748b;
    padding: 0.1rem 0.35rem;
    border-radius: 9999px;
    background: rgba(148, 163, 184, 0.15);
}

.auth-user-role--admin {
    color: #4338ca;
    background: rgba(99, 102, 241, 0.15);
}

.settings-users-list {
    max-height: 360px;
    overflow-y: auto;
}

.settings-user-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.65rem 0.75rem;
    border-radius: 0.75rem;
    border: 1px solid rgba(148, 163, 184, 0.25);
    background: rgba(248, 250, 252, 0.8);
}

.dark .settings-user-row {
    background: rgba(15, 23, 42, 0.5);
    border-color: rgba(100, 116, 139, 0.35);
}

.settings-user-row__main {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    min-width: 0;
    flex: 1;
}

.settings-user-row__identity {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
    flex: 1;
}

.settings-user-row__actions {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex-shrink: 0;
}

.settings-user-row__name {
    font-size: 0.8125rem;
    font-weight: 600;
    color: #1e293b;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dark .settings-user-row__name {
    color: #f1f5f9;
}

.settings-user-role {
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.15rem 0.4rem;
    border-radius: 9999px;
    background: rgba(148, 163, 184, 0.15);
    color: #64748b;
    flex-shrink: 0;
}

.settings-user-role--admin {
    background: rgba(99, 102, 241, 0.15);
    color: #4338ca;
}

.settings-user-delete {
    width: 2rem;
    height: 2rem;
    border: none;
    border-radius: 0.5rem;
    background: transparent;
    color: #94a3b8;
    cursor: pointer;
    flex-shrink: 0;
}

.settings-user-delete:hover {
    color: #e11d48;
    background: rgba(244, 63, 94, 0.08);
}

.settings-user-copy,
.settings-user-reset {
    width: 2rem;
    height: 2rem;
    border: none;
    border-radius: 0.5rem;
    background: transparent;
    color: #94a3b8;
    cursor: pointer;
    flex-shrink: 0;
}

.settings-user-copy:hover {
    color: #4338ca;
    background: rgba(99, 102, 241, 0.08);
}

.settings-user-reset:hover {
    color: #d97706;
    background: rgba(245, 158, 11, 0.08);
}

.settings-user-row__password {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.6875rem;
    color: #4338ca;
    word-break: break-all;
}

.dark .settings-user-row__password { color: #a5b4fc; }

.settings-user-row__password--empty {
    font-family: inherit;
    font-size: 0.625rem;
    color: #94a3b8;
    font-style: italic;
}

.settings-menu-item__icon--rose {
    background: rgba(244, 63, 94, 0.12);
    color: #e11d48;
}

.auth-login-overlay {
    position: fixed;
    inset: 0;
    z-index: 250;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.auth-login-overlay__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
}

.dark .auth-login-overlay__backdrop {
    background: rgba(2, 6, 23, 0.62);
}

.auth-login-overlay__card {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 24rem;
    padding: 2rem;
    animation: auth-overlay-in 0.28s ease-out;
}

@keyframes auth-overlay-in {
    from {
        opacity: 0;
        transform: translateY(12px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

body.auth-pending > header,
body.auth-pending > main,
body.auth-pending > .ambient-orbs,
body.auth-pending > #modals-container,
body.auth-locked > header,
body.auth-locked > main,
body.auth-locked > .ambient-orbs,
body.auth-locked > #modals-container {
    visibility: hidden !important;
    pointer-events: none !important;
    user-select: none !important;
}

#auth-boot-shield {
    position: fixed;
    inset: 0;
    z-index: 300;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    pointer-events: auto;
}

.dark #auth-boot-shield {
    background: rgba(2, 6, 23, 0.68);
}

.dark .login-input {
    background: rgba(15, 23, 42, 0.85);
}

/* --- Board werkblok-timer --- */
.board-timer-overlay {
    position: fixed;
    inset: 0;
    z-index: 245;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.board-work-report-overlay {
    z-index: 260;
}

.board-timer-overlay__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
}

.dark .board-timer-overlay__backdrop {
    background: rgba(2, 6, 23, 0.62);
}

.board-work-report-overlay .board-timer-overlay__backdrop {
    cursor: default;
}

.board-timer-overlay__card {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 24rem;
    padding: 1.75rem;
    animation: auth-overlay-in 0.28s ease-out;
}

.board-timer-overlay__icon {
    width: 3rem;
    height: 3rem;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(99, 102, 241, 0.12);
    color: #4f46e5;
    font-size: 1.125rem;
}

.board-timer-overlay__icon--done {
    background: rgba(16, 185, 129, 0.12);
    color: #059669;
}

.board-timer-presets {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.board-timer-preset {
    border: 1px solid rgba(148, 163, 184, 0.35);
    background: rgba(255, 255, 255, 0.75);
    color: #334155;
    border-radius: 0.75rem;
    padding: 0.625rem 0.5rem;
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
}

.board-timer-preset:hover {
    border-color: rgba(99, 102, 241, 0.45);
    background: rgba(99, 102, 241, 0.08);
    color: #4338ca;
}

.dark .board-timer-preset {
    background: rgba(30, 41, 59, 0.85);
    border-color: rgba(71, 85, 105, 0.55);
    color: #e2e8f0;
}

.board-timer-start-btn {
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
    box-shadow: 0 4px 14px rgba(79, 70, 229, 0.25);
}

.board-timer-start-btn:hover {
    filter: brightness(1.05);
}

.board-timer-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.board-timer-btn__remaining {
    font-size: 0.625rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
}

.board-timer-btn--active {
    animation: board-timer-pulse 2s ease-in-out infinite;
}

@keyframes board-timer-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0); }
    50% { box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.15); }
}

body.work-report-locked header,
body.work-report-locked main,
body.work-report-locked #modals-container {
    pointer-events: none;
    user-select: none;
}

/* --- Koers tab --- */
.koers-label {
    display: block;
    font-size: 0.5625rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #94a3b8;
    margin-bottom: 0.35rem;
}

.dark .koers-label {
    color: #64748b;
}

.koers-input {
    width: 100%;
    border: 1px solid rgba(226, 232, 240, 0.95);
    border-radius: 0.75rem;
    background: rgba(255, 255, 255, 0.95);
    color: #334155;
    font-size: 0.8125rem;
    line-height: 1.45;
    padding: 0.55rem 0.75rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.koers-input:focus {
    outline: none;
    border-color: rgba(99, 102, 241, 0.55);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12);
}

.koers-input--title {
    font-size: 1rem;
    font-weight: 700;
    color: #1e293b;
    padding: 0.65rem 0.85rem;
}

.dark .koers-input {
    background: rgba(15, 23, 42, 0.85);
    border-color: rgba(51, 65, 85, 0.75);
    color: #e2e8f0;
}

.dark .koers-input--title {
    color: #f1f5f9;
}

.koers-input--select {
    width: auto;
    min-width: 8rem;
    padding: 0.4rem 0.65rem;
    font-size: 0.75rem;
}

.koers-textarea {
    resize: vertical;
    min-height: 4.5rem;
}

.koers-goal-card {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.04) 0%, rgba(255, 255, 255, 0.6) 100%);
}

.dark .koers-goal-card {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.08) 0%, rgba(15, 23, 42, 0.5) 100%);
}

.koers-progress__bar-wrap {
    height: 0.375rem;
    border-radius: 9999px;
    background: rgba(148, 163, 184, 0.25);
    overflow: hidden;
}

.koers-progress__bar {
    height: 100%;
    border-radius: 9999px;
    background: linear-gradient(90deg, #6366f1 0%, #818cf8 100%);
    transition: width 0.35s ease;
}

.koers-criterion {
    align-items: center;
}

.koers-criterion__check {
    width: 1.25rem;
    height: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
    flex-shrink: 0;
    transition: color 0.15s ease;
}

.koers-criterion__check--done {
    color: #10b981;
}

.koers-path {
    position: relative;
    padding-left: 0.5rem;
}

.koers-path__goal-node {
    display: flex;
    justify-content: center;
    padding: 0.5rem 0;
}

.koers-path__node {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.45rem 0.85rem;
    border: 1px solid rgba(148, 163, 184, 0.35);
    background: rgba(255, 255, 255, 0.9);
    color: #475569;
}

.dark .koers-path__node {
    background: rgba(30, 41, 59, 0.9);
    border-color: rgba(71, 85, 105, 0.55);
    color: #cbd5e1;
}

.koers-path__node--goal {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.15) 0%, rgba(129, 140, 248, 0.08) 100%);
    border-color: rgba(99, 102, 241, 0.35);
    color: #4338ca;
    font-size: 0.8125rem;
    padding: 0.55rem 1rem;
}

.dark .koers-path__node--goal {
    color: #a5b4fc;
    border-color: rgba(99, 102, 241, 0.45);
}

.koers-path__node--milestone,
.koers-path__node--loose {
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    border-radius: 0.5rem;
    flex-shrink: 0;
}

.koers-path__connector {
    width: 2px;
    height: 1.25rem;
    margin: 0 auto;
    background: linear-gradient(180deg, rgba(99, 102, 241, 0.35) 0%, rgba(148, 163, 184, 0.25) 100%);
    border-radius: 1px;
}

.koers-path__focus {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 600;
    color: #6366f1;
    padding: 0.35rem 0.75rem;
    margin: 0 auto;
    max-width: 28rem;
    text-align: center;
}

.dark .koers-path__focus {
    color: #818cf8;
}

.koers-path__milestone {
    padding: 0.75rem 0.5rem 0.75rem 0;
    border-left: 2px solid rgba(148, 163, 184, 0.2);
    margin-left: 0.875rem;
}

.dark .koers-path__milestone {
    border-left-color: rgba(71, 85, 105, 0.45);
}

.koers-path__milestone--done {
    border-left-color: rgba(16, 185, 129, 0.45);
}

.koers-path__milestone-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.koers-path__milestone-projects {
    padding-left: 2.25rem;
}

.koers-project-chip {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.6rem;
    border-radius: 0.75rem;
    border: 1px solid rgba(226, 232, 240, 0.9);
    background: rgba(255, 255, 255, 0.85);
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

.koers-project-chip:hover {
    border-color: rgba(99, 102, 241, 0.35);
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.08);
}

.dark .koers-project-chip {
    background: rgba(30, 41, 59, 0.75);
    border-color: rgba(51, 65, 85, 0.75);
}

.koers-project-chip--available {
    background: rgba(248, 250, 252, 0.9);
}

.dark .koers-project-chip--available {
    background: rgba(15, 23, 42, 0.65);
}

.koers-empty {
    border: 1px dashed rgba(99, 102, 241, 0.25);
}

.koers-category-list {
    display: flex;
    flex-direction: column;
}

.koers-category-group + .koers-category-group {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(226, 232, 240, 0.7);
}

.dark .koers-category-group + .koers-category-group {
    border-top-color: rgba(51, 65, 85, 0.55);
}

.koers-category-head {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.5rem;
    min-width: 0;
}

.koers-category-head__name {
    font-size: 0.6875rem;
    font-weight: 700;
    color: #334155;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
}

.dark .koers-category-head__name {
    color: #e2e8f0;
}

.koers-category-head__count {
    font-size: 0.5625rem;
    font-weight: 800;
    color: #94a3b8;
    flex-shrink: 0;
}

.koers-category-group__items {
    padding-left: 0.15rem;
}

.koers-project-chip .board-folder-item__icon {
    width: 1.5rem;
    height: 1.5rem;
    flex-shrink: 0;
}

/* --- Koers helikopter map --- */
.koers-map-wrap {
    background: linear-gradient(180deg, rgba(99, 102, 241, 0.03) 0%, rgba(255, 255, 255, 0.5) 100%);
}

.dark .koers-map-wrap {
    background: linear-gradient(180deg, rgba(99, 102, 241, 0.06) 0%, rgba(15, 23, 42, 0.4) 100%);
}

.koers-map-scroll {
    overflow-x: auto;
    overflow-y: visible;
    padding-bottom: 0.5rem;
    margin: 0 -0.25rem;
}

.koers-map-track {
    display: flex;
    align-items: stretch;
    gap: 0;
    min-width: min-content;
    padding: 0.5rem 0.25rem 0;
    position: relative;
}

.koers-map-track::before {
    content: '';
    position: absolute;
    top: 1.35rem;
    left: 2.5rem;
    right: 2.5rem;
    height: 2px;
    background: linear-gradient(90deg, rgba(244, 63, 94, 0.35) 0%, rgba(99, 102, 241, 0.45) 35%, rgba(99, 102, 241, 0.45) 70%, rgba(16, 185, 129, 0.4) 100%);
    border-radius: 1px;
    pointer-events: none;
    z-index: 0;
}

.koers-map-col {
    flex: 0 0 11.5rem;
    min-width: 11.5rem;
    max-width: 13rem;
    display: flex;
    flex-direction: column;
    padding: 0 0.5rem 0.75rem;
    position: relative;
    z-index: 1;
}

.koers-map-col--goal {
    flex: 0 0 13rem;
    min-width: 13rem;
    max-width: 15rem;
}

.koers-map-col--current {
    background: rgba(99, 102, 241, 0.04);
    border-radius: 1rem;
    box-shadow: inset 0 0 0 1px rgba(99, 102, 241, 0.12);
}

.dark .koers-map-col--current {
    background: rgba(99, 102, 241, 0.08);
    box-shadow: inset 0 0 0 1px rgba(99, 102, 241, 0.2);
}

.koers-map-col--done .koers-map-col__stop {
    background: rgba(16, 185, 129, 0.15);
    border-color: rgba(16, 185, 129, 0.45);
    color: #059669;
}

.koers-map-col__stop {
    width: 2rem;
    height: 2rem;
    margin: 0 auto 0.65rem;
    border-radius: 9999px;
    border: 2px solid rgba(148, 163, 184, 0.45);
    background: rgba(255, 255, 255, 0.95);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    color: #64748b;
    position: relative;
    z-index: 2;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
}

.dark .koers-map-col__stop {
    background: rgba(30, 41, 59, 0.95);
    border-color: rgba(71, 85, 105, 0.65);
    color: #94a3b8;
}

.koers-map-col__stop--now {
    border-color: rgba(99, 102, 241, 0.45);
    color: #6366f1;
}

.koers-map-col__stop--problem {
    border-color: rgba(244, 63, 94, 0.45);
    color: #e11d48;
    background: rgba(255, 241, 242, 0.95);
}

.dark .koers-map-col__stop--problem {
    background: rgba(76, 5, 25, 0.5);
    border-color: rgba(251, 113, 133, 0.45);
    color: #fb7185;
}

.koers-map-col--problem {
    flex: 0 0 12.5rem;
    min-width: 12.5rem;
}

.koers-map-col__problem-title {
    font-size: 0.6875rem;
    font-weight: 700;
    line-height: 1.35;
    color: #9f1239;
    margin: 0 0 0.35rem;
}

.dark .koers-map-col__problem-title {
    color: #fda4af;
}

.koers-map-col__problem-snippet {
    font-size: 0.5625rem;
    line-height: 1.4;
    color: #64748b;
    margin: 0 0 0.4rem;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.koers-map-criteria--problem .koers-map-criterion {
    color: #9f1239;
}

.dark .koers-map-criteria--problem .koers-map-criterion {
    color: #fda4af;
}

.koers-map-criterion--problem.koers-map-criterion--done {
    color: #64748b;
    opacity: 0.75;
}

.koers-map-col__count--open {
    color: #e11d48;
}

.koers-criterion__check--problem.koers-criterion__check--done {
    color: #64748b;
}

.koers-map-col__stop--goal {
    width: 2.25rem;
    height: 2.25rem;
    border-color: rgba(99, 102, 241, 0.5);
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.12) 0%, rgba(129, 140, 248, 0.08) 100%);
    color: #4f46e5;
    font-size: 0.75rem;
}

.koers-map-col__stop--current {
    border-color: #6366f1;
    background: #6366f1;
    color: #fff;
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.2);
    animation: koers-map-pulse 2.5s ease-in-out infinite;
}

.koers-map-col__stop--done {
    background: rgba(16, 185, 129, 0.15);
    border-color: #10b981;
    color: #059669;
}

@keyframes koers-map-pulse {
    0%, 100% { box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.15); }
    50% { box-shadow: 0 0 0 7px rgba(99, 102, 241, 0.08); }
}

.koers-map-col__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.35rem;
    margin-bottom: 0.5rem;
    min-height: 1.5rem;
}

.koers-map-col__label {
    font-size: 0.625rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #64748b;
}

.koers-map-col__label--now {
    color: #6366f1;
}

.koers-map-col__label--problem {
    color: #e11d48;
}

.dark .koers-map-col__label--problem {
    color: #fb7185;
}

.koers-map-col__label--goal {
    color: #4f46e5;
}

.dark .koers-map-col__label {
    color: #94a3b8;
}

.dark .koers-map-col__label--now,
.dark .koers-map-col__label--goal {
    color: #a5b4fc;
}

.koers-map-col__title-input {
    flex: 1;
    min-width: 0;
    border: none;
    background: transparent;
    font-size: 0.6875rem;
    font-weight: 700;
    color: #334155;
    padding: 0.1rem 0;
    outline: none;
}

.koers-map-col__title-input:focus {
    border-bottom: 1px solid rgba(99, 102, 241, 0.45);
}

.dark .koers-map-col__title-input {
    color: #e2e8f0;
}

.koers-map-col__meta {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex-shrink: 0;
}

.koers-map-col__count {
    font-size: 0.5625rem;
    font-weight: 800;
    color: #94a3b8;
    font-variant-numeric: tabular-nums;
}

.koers-map-col__remove {
    width: 1rem;
    height: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
    border-radius: 0.25rem;
    font-size: 0.5rem;
}

.koers-map-col__remove:hover {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.08);
}

.koers-map-col__date {
    font-size: 0.5625rem;
    font-weight: 600;
    color: #94a3b8;
    font-variant-numeric: tabular-nums;
}

.koers-map-col__focus {
    display: flex;
    gap: 0.4rem;
    align-items: flex-start;
    padding: 0.5rem;
    border-radius: 0.65rem;
    background: rgba(99, 102, 241, 0.07);
    border: 1px solid rgba(99, 102, 241, 0.15);
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1.4;
    color: #4338ca;
}

.koers-map-col__focus i {
    margin-top: 0.1rem;
    flex-shrink: 0;
    font-size: 0.6rem;
}

.dark .koers-map-col__focus {
    background: rgba(99, 102, 241, 0.12);
    border-color: rgba(99, 102, 241, 0.25);
    color: #a5b4fc;
}

.koers-map-col__goal-title {
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.35;
    color: #1e293b;
    margin: 0 0 0.5rem;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.dark .koers-map-col__goal-title {
    color: #f1f5f9;
}

.koers-map-col__nodes {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    flex: 1;
}

.koers-map-col__empty {
    font-size: 0.625rem;
    color: #94a3b8;
    font-style: italic;
    text-align: center;
    padding: 0.5rem 0.25rem;
}

.koers-map-node {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    width: 100%;
    text-align: left;
    padding: 0.35rem 0.4rem;
    border-radius: 0.65rem;
    border: 1px solid rgba(226, 232, 240, 0.95);
    background: rgba(255, 255, 255, 0.92);
    cursor: pointer;
    transition: border-color 0.12s, box-shadow 0.12s, transform 0.12s;
}

.koers-map-node:hover {
    border-color: rgba(99, 102, 241, 0.35);
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.1);
    transform: translateY(-1px);
}

.dark .koers-map-node {
    background: rgba(30, 41, 59, 0.85);
    border-color: rgba(51, 65, 85, 0.75);
}

.koers-map-node--done {
    opacity: 0.72;
    border-color: rgba(16, 185, 129, 0.25);
}

.koers-map-node--running {
    border-color: rgba(59, 130, 246, 0.45);
    box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.12);
}

.koers-map-node__dot {
    width: 0.35rem;
    height: 0.35rem;
    border-radius: 9999px;
    flex-shrink: 0;
}

.koers-map-node__icon {
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 0.35rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.55rem;
    flex-shrink: 0;
}

.koers-map-node__body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
}

.koers-map-node__title {
    font-size: 0.625rem;
    font-weight: 700;
    color: #334155;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dark .koers-map-node__title {
    color: #e2e8f0;
}

.koers-map-node__meta {
    font-size: 0.5rem;
    color: #94a3b8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.koers-map-node__status {
    font-size: 0.45rem;
    font-weight: 700;
    padding: 0.1rem 0.25rem;
    border-radius: 0.25rem;
    border-width: 1px;
    border-style: solid;
    flex-shrink: 0;
    max-width: 3.5rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.koers-map-criteria {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.koers-map-criterion {
    display: flex;
    align-items: flex-start;
    gap: 0.35rem;
    font-size: 0.5625rem;
    line-height: 1.35;
    color: #64748b;
}

.koers-map-criterion i {
    font-size: 0.5rem;
    margin-top: 0.15rem;
    flex-shrink: 0;
    color: #94a3b8;
}

.koers-map-criterion--done {
    color: #059669;
}

.koers-map-criterion--done i {
    color: #10b981;
}

.koers-map-criterion--empty {
    font-style: italic;
    color: #94a3b8;
}

.koers-map-criteria__count {
    font-size: 0.5rem;
    font-weight: 700;
    color: #94a3b8;
    margin-top: 0.35rem;
    text-align: right;
}

.koers-map-rail {
    margin-top: 1rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(226, 232, 240, 0.8);
}

.dark .koers-map-rail {
    border-top-color: rgba(51, 65, 85, 0.65);
}

.koers-map-rail__track {
    height: 0.4rem;
    border-radius: 9999px;
    background: rgba(148, 163, 184, 0.2);
    overflow: hidden;
}

.koers-map-rail__fill {
    height: 100%;
    border-radius: 9999px;
    background: linear-gradient(90deg, #6366f1 0%, #818cf8 60%, #10b981 100%);
    transition: width 0.45s ease;
}

.koers-map-rail__labels {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.35rem;
    font-size: 0.5625rem;
    font-weight: 600;
    color: #94a3b8;
}

.koers-details__summary {
    list-style: none;
}

.koers-details__summary::-webkit-details-marker {
    display: none;
}

.koers-details[open] .koers-details__chevron {
    transform: rotate(180deg);
}

.koers-details__chevron {
    transition: transform 0.2s ease;
}

@media (prefers-reduced-motion: reduce) {
    .koers-map-col__stop--current {
        animation: none;
    }

    .koers-map-node:hover {
        transform: none;
    }
}

/* --- User avatar badge --- */
.user-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    font-weight: 800;
    line-height: 1;
    color: #fff;
    background: hsl(var(--avatar-hue, 220) 65% 46%);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85);
    flex-shrink: 0;
}

.user-avatar--sm {
    width: 1.35rem;
    height: 1.35rem;
    font-size: 0.625rem;
}

.user-avatar--md {
    width: 1.65rem;
    height: 1.65rem;
    font-size: 0.72rem;
}

.dark .user-avatar {
    box-shadow: 0 0 0 2px rgba(15, 23, 42, 0.85);
}

/* --- Brainstorm sticky notes (whiteboard-style canvas) --- */
#view-brainstorm.view-panel--active .view-panel-card {
    min-height: calc(100vh - var(--layout-chrome));
}

.brainstorm-panel {
    gap: 0.65rem;
}

.brainstorm-board-header {
    min-width: 0;
}

.brainstorm-title-input {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 20rem;
    border: none;
    background: transparent;
    font-size: 1rem;
    font-weight: 700;
    color: #0f172a;
    outline: none;
    padding: 0.15rem 0.35rem;
    border-radius: 0.5rem;
    transition: background 0.15s ease, box-shadow 0.15s ease;
}

.brainstorm-title-input:hover,
.brainstorm-title-input:focus {
    background: rgba(148, 163, 184, 0.12);
    box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.25);
}

.dark .brainstorm-title-input {
    color: #f8fafc;
}

.brainstorm-column-indicator {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.65rem;
    border-radius: 9999px;
    background: rgba(99, 102, 241, 0.1);
    border: 1px solid rgba(99, 102, 241, 0.22);
    max-width: min(34vw, 240px);
    flex-shrink: 0;
}

.brainstorm-column-indicator.hidden { display: none; }

.brainstorm-column-indicator__label {
    font-size: 0.625rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #6366f1;
    flex-shrink: 0;
}

.brainstorm-column-indicator__name {
    font-size: 0.8125rem;
    font-weight: 700;
    color: #4338ca;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.dark .brainstorm-column-indicator {
    background: rgba(99, 102, 241, 0.14);
    border-color: rgba(129, 140, 248, 0.25);
}

.dark .brainstorm-column-indicator__label { color: #a5b4fc; }
.dark .brainstorm-column-indicator__name { color: #e0e7ff; }

.brainstorm-online {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.2rem 0.5rem;
    border-radius: 9999px;
    background: rgba(148, 163, 184, 0.12);
    flex-shrink: 0;
}

.brainstorm-online.hidden {
    display: none;
}

.brainstorm-online__label {
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #64748b;
}

.brainstorm-online__avatars {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
}

.brainstorm-color-btn {
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 9999px;
    border: 2px solid transparent;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.brainstorm-color-btn--active {
    border-color: rgba(15, 23, 42, 0.45);
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.35);
    transform: scale(1.08);
}

.brainstorm-color-btn--green { background: #bbf7d0; }
.brainstorm-color-btn--red { background: #fecaca; }
.brainstorm-color-btn--blue { background: #bfdbfe; }

.brainstorm-live-indicator {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #059669;
}

.brainstorm-live-indicator__dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 9999px;
    background: #10b981;
    animation: brainstorm-live-pulse 1.8s ease-in-out infinite;
}

@keyframes brainstorm-live-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.45; transform: scale(0.85); }
}

.brainstorm-columns-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.brainstorm-col-band {
    position: absolute;
    top: 0;
    height: 100%;
    border-right: 1px dashed rgba(148, 163, 184, 0.35);
    border-left: 1px dashed rgba(148, 163, 184, 0.18);
    background: rgba(148, 163, 184, 0.03);
    box-sizing: border-box;
}

.brainstorm-col-band:first-child {
    border-left: none;
}

.brainstorm-col-band:nth-child(even) {
    background: rgba(148, 163, 184, 0.055);
}

.brainstorm-col-band--active {
    background: rgba(99, 102, 241, 0.09);
    border-right: 2px solid rgba(99, 102, 241, 0.55);
    border-left-color: rgba(99, 102, 241, 0.35);
    box-shadow: inset 0 0 0 1px rgba(99, 102, 241, 0.12);
}

.brainstorm-col-band--active::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, rgba(99, 102, 241, 0.85), rgba(129, 140, 248, 0.55));
}

.dark .brainstorm-col-band {
    border-right-color: rgba(71, 85, 105, 0.45);
    border-left-color: rgba(71, 85, 105, 0.25);
    background: rgba(71, 85, 105, 0.07);
}

.dark .brainstorm-col-band:nth-child(even) {
    background: rgba(71, 85, 105, 0.11);
}

.dark .brainstorm-col-band--active {
    background: rgba(99, 102, 241, 0.14);
    border-right-color: rgba(129, 140, 248, 0.65);
    box-shadow: inset 0 0 0 1px rgba(129, 140, 248, 0.2);
}

.brainstorm-col-band__label {
    position: absolute;
    top: 14px;
    left: 50%;
    transform: translateX(-50%);
    max-width: calc(100% - 1rem);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: rgba(100, 116, 139, 0.62);
    pointer-events: auto;
    padding: 0.15rem 0.45rem;
    border-radius: 9999px;
}

.brainstorm-col-band__label--untitled {
    opacity: 0.45;
    font-size: 0.625rem;
}

.brainstorm-col-band--active .brainstorm-col-band__label {
    color: #4338ca;
    background: rgba(99, 102, 241, 0.14);
    font-size: 0.75rem;
    letter-spacing: 0.05em;
}

.dark .brainstorm-col-band__label {
    color: rgba(148, 163, 184, 0.55);
}

.dark .brainstorm-col-band--active .brainstorm-col-band__label {
    color: #c7d2fe;
    background: rgba(99, 102, 241, 0.22);
}

.brainstorm-col-band__width {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.625rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: rgba(100, 116, 139, 0.55);
    pointer-events: none;
    padding: 0.1rem 0.35rem;
    border-radius: 0.35rem;
    background: rgba(255, 255, 255, 0.55);
}

.dark .brainstorm-col-band__width {
    color: rgba(148, 163, 184, 0.65);
    background: rgba(15, 23, 42, 0.45);
}

.brainstorm-col-band--resizing .brainstorm-col-band__width {
    color: #4338ca;
    background: rgba(99, 102, 241, 0.16);
}

.brainstorm-col-resize {
    position: absolute;
    top: 0;
    right: -9px;
    width: 18px;
    height: 100%;
    cursor: col-resize;
    pointer-events: auto;
    z-index: 4;
}

.brainstorm-col-resize::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 5px;
    height: 2.75rem;
    border-radius: 9999px;
    background: rgba(99, 102, 241, 0.35);
    transition: background 0.15s ease, height 0.15s ease;
}

.brainstorm-col-resize:hover::after,
.brainstorm-col-band--resizing .brainstorm-col-resize::after {
    background: rgba(99, 102, 241, 0.75);
    height: 3.25rem;
}

body.brainstorm-col-resize-active {
    cursor: col-resize !important;
    user-select: none;
}

body.brainstorm-col-resize-active * {
    cursor: col-resize !important;
}

.brainstorm-notes-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.brainstorm-notes-layer .brainstorm-note {
    pointer-events: auto;
}

#view-brainstorm.brainstorm--fullscreen {
    position: fixed;
    inset: 0;
    z-index: 9999;
    max-width: none;
    width: 100vw;
    height: 100vh;
    margin: 0;
    padding: 0;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

#view-brainstorm.brainstorm--fullscreen .view-panel-card {
    border-radius: 0;
    min-height: 100vh;
    height: 100vh;
    max-height: 100vh;
}

body.brainstorm-fullscreen-active {
    overflow: hidden;
}

header[data-auth-shell][data-brainstorm-hidden],
.ambient-orbs[data-brainstorm-hidden],
.app-main[data-brainstorm-hidden] {
    display: none !important;
}

.brainstorm-note {
    position: absolute;
    width: 10.75rem;
    min-height: 5.75rem;
    padding: 0.45rem 0.5rem 0.55rem;
    border-radius: 0.28rem;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.09), 0 1px 0 rgba(15, 23, 42, 0.04);
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    transition: box-shadow 0.15s ease, transform 0.15s ease;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    backface-visibility: hidden;
    transform: translateZ(0);
}

.brainstorm-note--green { background: #bbf7d0; color: #14532d; }
.brainstorm-note--red { background: #fecaca; color: #7f1d1d; }
.brainstorm-note--blue { background: #bfdbfe; color: #1e3a8a; }

.brainstorm-note--selected {
    box-shadow: 0 0 0 2px rgba(14, 165, 233, 0.85), 0 8px 18px rgba(14, 165, 233, 0.15);
}

.brainstorm-note--starred {
    box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.85), 0 8px 16px rgba(245, 158, 11, 0.14);
}

.brainstorm-note--starred.brainstorm-note--selected {
    box-shadow:
        0 0 0 2px rgba(245, 158, 11, 0.9),
        0 0 0 4px rgba(14, 165, 233, 0.45),
        0 8px 16px rgba(245, 158, 11, 0.14);
}

.brainstorm-note--dragging {
    z-index: 20;
    transform: rotate(-1deg) scale(1.02);
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.16);
}

.brainstorm-note__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.25rem;
    cursor: grab;
    min-height: 1.35rem;
}

.brainstorm-note__author {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    min-width: 0;
    flex: 1 1 auto;
}

.brainstorm-note__author-name {
    font-size: 0.6875rem;
    font-weight: 700;
    line-height: 1.1;
    opacity: 0.88;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.brainstorm-note .user-avatar--md {
    width: 1.35rem;
    height: 1.35rem;
    font-size: 0.6875rem;
}

.brainstorm-note .user-avatar--sm {
    width: 1.15rem;
    height: 1.15rem;
    font-size: 0.5625rem;
}

.brainstorm-note__header:active {
    cursor: grabbing;
}

.brainstorm-note__actions {
    display: flex;
    align-items: center;
    gap: 0.1rem;
    flex-shrink: 0;
}

.brainstorm-note__star,
.brainstorm-note__delete {
    width: 1rem;
    height: 1rem;
    border: none;
    background: transparent;
    border-radius: 0.25rem;
    cursor: pointer;
    opacity: 0.55;
    font-size: 0.55rem;
    transition: opacity 0.15s ease, color 0.15s ease;
}

.brainstorm-note__star:hover,
.brainstorm-note__delete:hover { opacity: 1; }

.brainstorm-note__star--on {
    color: #d97706;
    opacity: 1;
}

.brainstorm-note__star--readonly {
    cursor: default;
}

.brainstorm-note__delete:hover { color: #dc2626; }

.brainstorm-note__text {
    flex: 1 1 auto;
    min-height: 2.75rem;
    resize: none;
    border: none;
    background: transparent;
    font-size: 0.9375rem;
    line-height: 1.4;
    color: inherit;
    outline: none;
}

.brainstorm-note__text::placeholder { opacity: 0.55; }

@media (prefers-reduced-motion: reduce) {
    .brainstorm-live-indicator__dot { animation: none; }
}

.brainstorm-timer-wrap {
    display: inline-flex;
    align-items: baseline;
    gap: 0.35rem;
    padding: 0.25rem 0.65rem;
    border-radius: 9999px;
    background: rgba(99, 102, 241, 0.12);
    font-variant-numeric: tabular-nums;
}

.brainstorm-timer-wrap.hidden { display: none; }

.brainstorm-active-question-wrap {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-width: 0;
    max-width: min(42vw, 520px);
    padding: 0.3rem 0.75rem;
    border-radius: 9999px;
    background: rgba(245, 158, 11, 0.14);
    border: 1px solid rgba(245, 158, 11, 0.25);
}

.brainstorm-active-question-wrap.hidden { display: none; }

.brainstorm-active-question-label {
    font-size: 0.625rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #b45309;
    flex-shrink: 0;
}

.brainstorm-active-question-text {
    font-size: 0.9375rem;
    font-weight: 600;
    color: #92400e;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.dark .brainstorm-active-question-wrap {
    background: rgba(245, 158, 11, 0.12);
    border-color: rgba(245, 158, 11, 0.2);
}

.dark .brainstorm-active-question-label { color: #fbbf24; }
.dark .brainstorm-active-question-text { color: #fde68a; }

.brainstorm-timer-label {
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #6366f1;
}

.brainstorm-timer-clock {
    font-size: 1rem;
    font-weight: 800;
    color: #4338ca;
    letter-spacing: 0.04em;
}

.brainstorm-timer-clock--urgent {
    color: #dc2626;
    animation: brainstorm-timer-pulse 1s ease-in-out infinite;
}

@keyframes brainstorm-timer-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.55; }
}

.brainstorm-questions-panel {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    left: auto;
    z-index: 25;
    width: min(28rem, calc(100% - 1.5rem));
    max-height: calc(100% - 1.5rem);
    display: flex;
    flex-direction: column;
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(148, 163, 184, 0.35);
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.16);
    backdrop-filter: blur(10px);
}

.brainstorm-questions-panel--prep {
    width: min(32rem, calc(100% - 1.5rem));
}

.dark .brainstorm-questions-panel {
    background: rgba(15, 23, 42, 0.92);
    border-color: rgba(71, 85, 105, 0.55);
}

.brainstorm-questions-panel.hidden { display: none; }

.brainstorm-questions-panel__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.65rem;
    padding: 0.85rem 1rem;
    border-bottom: 1px solid rgba(148, 163, 184, 0.25);
}

.brainstorm-questions-panel__title-wrap {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 0;
    flex: 1 1 auto;
}

.brainstorm-questions-panel__title {
    font-size: 0.9375rem;
    font-weight: 800;
    color: #1e293b;
}

.dark .brainstorm-questions-panel__title { color: #f1f5f9; }

.brainstorm-questions-panel__intro {
    margin: 0;
    font-size: 0.75rem;
    line-height: 1.45;
    font-weight: 500;
    color: #64748b;
}

.dark .brainstorm-questions-panel__intro { color: #94a3b8; }

.brainstorm-questions-panel__section {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.55rem 1rem 0;
}

.brainstorm-questions-panel__section-label {
    margin: 0;
    font-size: 0.6875rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #64748b;
}

.dark .brainstorm-questions-panel__section-label { color: #94a3b8; }

.brainstorm-questions-live-hint {
    flex: 0 1 auto;
    min-width: 0;
    font-size: 0.6875rem;
    font-weight: 500;
    color: #64748b;
    text-align: right;
}

.brainstorm-questions-live-hint.hidden { display: none; }

.brainstorm-questions-panel__close {
    width: 1.5rem;
    height: 1.5rem;
    border: none;
    background: transparent;
    color: #94a3b8;
    border-radius: 0.35rem;
    cursor: pointer;
}

.brainstorm-questions-list {
    list-style: none;
    margin: 0;
    padding: 0.5rem 0.75rem 0.75rem;
    overflow: auto;
    flex: 1 1 auto;
    min-height: 8rem;
    max-height: min(42vh, 22rem);
}

.brainstorm-question-item {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    padding: 0.6rem 0.45rem;
    border-bottom: 1px solid rgba(148, 163, 184, 0.15);
    font-size: 0.875rem;
    line-height: 1.45;
    color: #334155;
}

.dark .brainstorm-question-item { color: #cbd5e1; }

.brainstorm-question-item--active {
    background: rgba(245, 158, 11, 0.12);
    border-radius: 0.5rem;
}

.brainstorm-question-live-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.2rem 0.45rem;
    border: none;
    border-radius: 9999px;
    background: rgba(99, 102, 241, 0.12);
    color: #4338ca;
    font-size: 0.625rem;
    font-weight: 700;
    cursor: pointer;
    flex-shrink: 0;
}

.brainstorm-question-live-btn:hover {
    background: rgba(99, 102, 241, 0.2);
}

.brainstorm-question-live-btn--active {
    background: rgba(245, 158, 11, 0.18);
    color: #b45309;
}

.brainstorm-question-live-badge {
    font-size: 0.625rem;
    font-weight: 700;
    color: #b45309;
    flex-shrink: 0;
}

.brainstorm-question-num {
    flex-shrink: 0;
    width: 1.45rem;
    height: 1.45rem;
    border-radius: 9999px;
    background: rgba(99, 102, 241, 0.15);
    color: #4f46e5;
    font-size: 0.6875rem;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.brainstorm-question-text { flex: 1 1 auto; min-width: 0; }

.brainstorm-question-delete {
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
    border: none;
    background: transparent;
    color: #94a3b8;
    cursor: pointer;
    border-radius: 0.3rem;
}

.brainstorm-question-delete:hover { color: #dc2626; }

.brainstorm-questions-empty {
    padding: 0.75rem;
    font-size: 0.75rem;
    color: #94a3b8;
    font-style: italic;
}

.brainstorm-questions-admin {
    padding: 0.75rem 1rem 1rem;
    border-top: 1px solid rgba(148, 163, 184, 0.2);
}

.brainstorm-questions-input {
    flex: 1 1 auto;
    min-width: 0;
    border: 1px solid rgba(148, 163, 184, 0.35);
    border-radius: 0.55rem;
    padding: 0.45rem 0.65rem;
    font-size: 0.875rem;
    background: rgba(255, 255, 255, 0.8);
}

.dark .brainstorm-questions-input {
    background: rgba(15, 23, 42, 0.8);
    border-color: rgba(71, 85, 105, 0.55);
    color: #f8fafc;
}

.brainstorm-inline-modal {
    position: fixed;
    inset: 0;
    z-index: 12000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.brainstorm-inline-modal.hidden { display: none; }

.brainstorm-inline-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    backdrop-filter: blur(4px);
}

.brainstorm-inline-modal__card {
    position: relative;
    z-index: 1;
    width: min(24rem, 100%);
    padding: 1.25rem;
}

.brainstorm-timer-presets {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.brainstorm-timer-preset {
    min-width: 2.5rem;
    padding: 0.35rem 0.55rem;
    border-radius: 0.55rem;
    border: 1px solid rgba(148, 163, 184, 0.35);
    background: rgba(148, 163, 184, 0.12);
    font-size: 0.75rem;
    font-weight: 700;
    cursor: pointer;
}

.settings-user-row__email {
    display: block;
    font-size: 0.6875rem;
    color: #64748b;
    margin-top: 0.1rem;
}