/* =====================================================================
           Design tokens
           ===================================================================== */
        :root {
            --app-accent: #6366f1;
            --app-accent-hover: #4f46e5;
            --app-accent-deep: #4338ca;
            --app-accent-soft: #eef2ff;
            --app-accent-border: #c7d2fe;
            --app-accent-2: #a855f7;
            --app-surface: #ffffff;
            --app-surface-2: #f8fafc;
            --app-bg: #f5f6fb;
            --app-border: #e6e8f0;
            --app-border-strong: #d5d9e4;
            --app-text: #0f172a;
            --app-text-2: #334155;
            --app-text-muted: #64748b;
            --app-text-faint: #94a3b8;
            --app-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.05);
            --app-shadow: 0 4px 14px -4px rgba(15, 23, 42, 0.10), 0 2px 4px -2px rgba(15, 23, 42, 0.05);
            --app-shadow-lg: 0 24px 48px -16px rgba(15, 23, 42, 0.22), 0 8px 16px -8px rgba(15, 23, 42, 0.08);
            --app-ring: 0 0 0 4px rgba(99, 102, 241, 0.16);
            --app-radius-sm: 0.55rem;
            --app-radius: 0.85rem;
            --app-radius-lg: 1.1rem;
            --app-header-h: 64px;
            --app-sidebar-w: 268px;
            --app-sidebar-w-collapsed: 78px;
            --app-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
            --app-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
            --bs-body-font-family: var(--app-font);
            --bs-font-monospace: var(--app-mono);
            --bs-border-color: var(--app-border);
            --bs-link-color-rgb: 79, 70, 229;
            --bs-link-hover-color-rgb: 67, 56, 202;
        }
        html { max-width: 100%; overflow-x: hidden; scroll-behavior: smooth; }
        body {
            min-height: 100vh; max-width: 100%; overflow-x: clip; /* clip, not hidden: keeps sticky header/sidebar working */
            color: var(--app-text); font-family: var(--app-font); font-size: 0.925rem; line-height: 1.55;
            -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
            background-color: var(--app-bg);
            background-image:
                radial-gradient(1100px 520px at 85% -12%, rgba(99, 102, 241, 0.13), transparent 62%),
                radial-gradient(900px 480px at -10% 18%, rgba(168, 85, 247, 0.09), transparent 58%),
                radial-gradient(700px 400px at 55% 110%, rgba(14, 165, 233, 0.07), transparent 60%);
            background-attachment: fixed;
        }
        body.app-logged-in { display: flex; flex-direction: column; min-height: 100vh; }
        .app-shell { display: flex; flex-direction: column; flex: 1; min-height: 100vh; max-width: 100%; }
        h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-weight: 700; letter-spacing: -0.015em; color: var(--app-text); }
        a { text-decoration: none; }
        a:hover { text-decoration: none; }
        code, pre, .font-monospace, .mono { font-family: var(--app-mono) !important; }
        ::selection { background: rgba(99, 102, 241, 0.2); }

        /* =====================================================================
           Header (frosted glass)
           ===================================================================== */
        .app-navbar {
            position: sticky; top: 0; z-index: 1030; flex-shrink: 0; height: var(--app-header-h);
            background: rgba(255, 255, 255, 0.72); -webkit-backdrop-filter: saturate(180%) blur(16px); backdrop-filter: saturate(180%) blur(16px);
            border-bottom: 1px solid rgba(15, 23, 42, 0.06);
        }
        .app-navbar .container-fluid { height: 100%; gap: 0.6rem; padding-left: 1rem; padding-right: 1rem; }
        .app-navbar .navbar-brand { color: var(--app-text); display: flex; align-items: center; gap: 0.65rem; padding: 0; margin-right: 0.35rem; }
        .app-brand-mark {
            width: 2.25rem; height: 2.25rem; border-radius: 0.7rem; color: #fff; font-size: 1.05rem;
            background: linear-gradient(135deg, #6366f1 0%, #a855f7 100%);
            display: inline-flex; align-items: center; justify-content: center;
            box-shadow: 0 6px 16px rgba(99, 102, 241, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.35);
        }
        .app-brand-text { line-height: 1.05; }
        .app-brand-text strong { display: block; font-size: 0.98rem; font-weight: 800; letter-spacing: -0.02em; }
        .app-brand-text span { font-size: 0.64rem; color: var(--app-text-faint); letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600; }
        .app-icon-btn {
            width: 2.4rem; height: 2.4rem; border-radius: 0.7rem; padding: 0; position: relative;
            display: inline-flex; align-items: center; justify-content: center; color: var(--app-text-2);
            background: #fff; border: 1px solid var(--app-border); box-shadow: var(--app-shadow-sm);
            transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
        }
        .app-icon-btn:hover, .app-icon-btn:focus, .app-icon-btn.show { color: var(--app-accent-deep); background: var(--app-accent-soft); border-color: var(--app-accent-border); }
        .app-icon-btn:active { transform: scale(0.96); }
        .app-icon-btn .app-dot {
            position: absolute; top: -0.35rem; right: -0.35rem; min-width: 1.15rem; height: 1.15rem; padding: 0 0.3rem;
            border-radius: 999px; background: #ef4444; color: #fff; font-size: 0.64rem; font-weight: 700;
            display: inline-flex; align-items: center; justify-content: center; border: 2px solid #fff; box-shadow: 0 2px 6px rgba(239, 68, 68, 0.4);
        }
        .global-search { max-width: 560px; }
        .global-search .input-group { border-radius: 0.8rem; background: #fff; border: 1px solid var(--app-border); box-shadow: var(--app-shadow-sm); overflow: visible; transition: box-shadow 0.15s ease, border-color 0.15s ease; }
        .global-search .input-group:focus-within { border-color: var(--app-accent); box-shadow: 0 0 0 1px var(--app-accent), 0 0 0 4px rgba(99, 102, 241, 0.08); }
        .global-search .form-control, .global-search .input-group-text { background: transparent; border: 0; color: var(--app-text); box-shadow: none !important; height: 2.4rem; }
        .global-search .form-control { padding-left: 0; padding-right: 2.6rem; }
        .global-search .form-control::placeholder { color: var(--app-text-faint); }
        .global-search .input-group-text { color: var(--app-text-faint); padding-left: 0.85rem; }
        .global-search .app-kbd-hint { position: absolute; right: 0.7rem; top: 50%; transform: translateY(-50%); pointer-events: none; z-index: 5; }
        .global-search-results {
            display: none; position: absolute; top: calc(100% + 8px); left: 0; right: 0; max-height: 460px; overflow-y: auto; z-index: 1050;
            border: 1px solid var(--app-border); border-radius: var(--app-radius); box-shadow: var(--app-shadow-lg); padding: 0.4rem;
        }
        .global-search-results.is-open { display: block; }
        .global-search-results .dropdown-header { font-size: 0.66rem; letter-spacing: 0.1em; color: var(--app-text-faint); padding: 0.6rem 0.75rem 0.25rem; }
        .global-search-results .dropdown-item { border-radius: 0.6rem; }
        .app-quick-note-btn { border-radius: 0.7rem; font-weight: 700; padding: 0.45rem 0.85rem; border: 0; color: #422006;
            background: linear-gradient(135deg, #fbbf24, #f59e0b); box-shadow: 0 6px 16px rgba(245, 158, 11, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.4); }
        .app-quick-note-btn:hover { color: #422006; filter: brightness(1.04); transform: translateY(-1px); box-shadow: 0 8px 20px rgba(245, 158, 11, 0.4); }
        .app-avatar {
            width: 2.2rem; height: 2.2rem; border-radius: 50%; color: #fff; font-weight: 700; font-size: 0.78rem; letter-spacing: 0.03em;
            background: linear-gradient(135deg, #22d3ee, #6366f1); display: inline-flex; align-items: center; justify-content: center;
            box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--app-border);
        }
        .app-user-btn { display: inline-flex; align-items: center; gap: 0.55rem; background: transparent; border: 0; color: var(--app-text); padding: 0.2rem 0.45rem 0.2rem 0.2rem; border-radius: 0.8rem; transition: background 0.15s ease; }
        .app-user-btn:hover, .app-user-btn.show { background: rgba(15, 23, 42, 0.05); }
        .app-user-btn .app-user-name { font-size: 0.85rem; font-weight: 600; line-height: 1.1; text-align: left; }
        .app-user-btn .app-user-role { display: block; font-size: 0.66rem; font-weight: 500; color: var(--app-text-faint); }
        .app-dropdown { border: 1px solid var(--app-border); border-radius: var(--app-radius); box-shadow: var(--app-shadow-lg); padding: 0.4rem; min-width: 16rem; }
        .app-dropdown .dropdown-item { border-radius: 0.6rem; padding: 0.5rem 0.75rem; font-size: 0.875rem; font-weight: 500; }
        .app-dropdown .dropdown-item i { width: 1.25rem; color: var(--app-text-muted); }
        .app-dropdown .dropdown-header { font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--app-text-faint); font-weight: 700; }
        .app-reminder-item { white-space: normal; }
        .app-reminder-item .app-reminder-title { font-weight: 600; font-size: 0.85rem; }
        .app-reminder-item .app-reminder-meta { font-size: 0.74rem; color: var(--app-text-muted); }
        .app-kbd-hint kbd { background: #f1f5f9; color: var(--app-text-muted); border: 1px solid var(--app-border); font-size: 0.66rem; box-shadow: none; }

        /* =====================================================================
           Layout & sidebar
           ===================================================================== */
        .app-layout { display: flex; flex: 1; min-height: 0; align-items: stretch; max-width: 100%; }
        .app-content { flex: 1; min-width: 0; max-width: 100%; padding: 1.25rem; overflow-x: hidden; overflow-wrap: anywhere; }
        .app-content > * { max-width: 100%; }
        @media (min-width: 768px) { .app-content { padding: 1.75rem 2rem; } }
        @media (min-width: 1400px) { .app-content { padding: 2rem 2.5rem; } }
        @media (min-width: 1700px) { .app-content { padding: 2rem 3rem; } }

        .app-sidebar { width: var(--app-sidebar-w); flex-shrink: 0; transition: width 0.18s ease; --bs-offcanvas-width: 284px; }
        .app-sidebar-inner {
            display: flex; flex-direction: column; width: 100%; flex: 1 1 auto; height: 100%; overflow-y: auto; overflow-x: hidden;
            padding: 1rem 0.8rem 0.8rem; position: relative; overscroll-behavior: contain; scroll-behavior: smooth;
            background: rgba(255, 255, 255, 0.82); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
            border-right: 1px solid rgba(15, 23, 42, 0.06);
        }
        @media (min-width: 768px) { .app-sidebar-inner { position: sticky; top: var(--app-header-h); height: calc(100vh - var(--app-header-h)); } }
        .app-sidebar-inner::before, .app-sidebar-inner::after {
            content: ""; position: sticky; left: 0; right: 0; height: 1.5rem; flex-shrink: 0; pointer-events: none; z-index: 2; opacity: 0; transition: opacity 0.2s ease;
        }
        .app-sidebar-inner::before { top: -1rem; margin: -1rem -0.8rem -1.5rem; background: linear-gradient(to bottom, #fff 20%, rgba(255, 255, 255, 0)); }
        .app-sidebar-inner::after { bottom: -0.8rem; margin: -1.5rem -0.8rem -0.8rem; background: linear-gradient(to top, #fff 20%, rgba(255, 255, 255, 0)); }
        .app-sidebar-inner.has-scroll-up::before { opacity: 1; }
        .app-sidebar-inner.has-scroll-down::after { opacity: 1; }
        .app-sidebar .nav-link {
            color: var(--app-text-2); border-radius: 0.7rem; padding: 0.5rem 0.65rem; display: flex; align-items: center; gap: 0.7rem;
            font-size: 0.875rem; font-weight: 500; position: relative; white-space: nowrap; transition: background 0.12s ease, color 0.12s ease;
        }
        .app-sidebar .nav-link .app-nav-icon {
            width: 2rem; height: 2rem; border-radius: 0.6rem; display: inline-flex; align-items: center; justify-content: center;
            background: #f1f3f9; color: #475569; font-size: 0.95rem; flex-shrink: 0; transition: background 0.12s ease, color 0.12s ease, box-shadow 0.12s ease;
        }
        .app-sidebar .nav-link:hover { background: rgba(15, 23, 42, 0.04); color: var(--app-text); }
        .app-sidebar .nav-link:hover .app-nav-icon { background: var(--app-accent-soft); color: var(--app-accent); }
        .app-sidebar .nav-link.active { background: linear-gradient(90deg, rgba(99, 102, 241, 0.12), rgba(99, 102, 241, 0.04)); color: var(--app-accent-deep); font-weight: 600; }
        .app-sidebar .nav-link.active .app-nav-icon { background: linear-gradient(135deg, #6366f1, #7c3aed); color: #fff; box-shadow: 0 6px 14px rgba(99, 102, 241, 0.38); }
        .app-sidebar .nav-link.active::before { content: ""; position: absolute; left: -0.8rem; top: 0.5rem; bottom: 0.5rem; width: 3px; border-radius: 0 3px 3px 0; background: var(--app-accent); }
        .app-sidebar .nav-link .app-nav-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
        .app-sidebar .nav-link .badge { font-size: 0.64rem; }
        .app-sidebar-label { font-size: 0.64rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--app-text-faint); padding: 1rem 0.65rem 0.4rem; white-space: nowrap; }
        .app-sidebar-project { margin: 0.8rem 0 0.3rem; padding: 0.65rem 0.75rem; border-radius: 0.8rem; background: linear-gradient(135deg, #eef2ff, #f5f3ff); border: 1px solid rgba(99, 102, 241, 0.25); }
        .app-sidebar-project .app-sidebar-project-kicker { font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.1em; color: #6366f1; font-weight: 700; }
        .app-sidebar-project .app-sidebar-project-name { font-weight: 700; font-size: 0.9rem; color: #312e81; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .app-sidebar .app-sidebar-subnav .nav-link { padding: 0.35rem 0.65rem; font-size: 0.84rem; }
        .app-sidebar .app-sidebar-subnav .app-nav-icon { width: 1.65rem; height: 1.65rem; font-size: 0.85rem; background: transparent; }
        .app-sidebar-quick { border-radius: 0.8rem; font-weight: 700; padding: 0.6rem 0.75rem; display: flex; align-items: center; justify-content: center; gap: 0.5rem; white-space: nowrap; }
        .app-sidebar-user { margin-top: auto; padding-top: 0.8rem; border-top: 1px solid var(--app-border); display: flex; align-items: center; gap: 0.6rem; white-space: nowrap; }
        .app-sidebar-user .app-avatar { flex-shrink: 0; }
        .app-sidebar-user .app-sidebar-user-text { min-width: 0; flex: 1; }
        .app-sidebar-user .app-sidebar-user-text strong { display: block; font-size: 0.84rem; overflow: hidden; text-overflow: ellipsis; }
        .app-sidebar-user .app-sidebar-user-text span { display: block; font-size: 0.7rem; color: var(--app-text-muted); overflow: hidden; text-overflow: ellipsis; }
        .app-sidebar-user a { color: var(--app-text-muted); }
        .app-sidebar-user a:hover { color: #dc2626; }
        @media (min-width: 768px) {
            html.sidebar-collapsed .app-sidebar { width: var(--app-sidebar-w-collapsed); }
            html.sidebar-collapsed .app-sidebar-inner { padding-left: 0.6rem; padding-right: 0.6rem; }
            html.sidebar-collapsed .app-sidebar-label, html.sidebar-collapsed .app-nav-label, html.sidebar-collapsed .app-sidebar .nav-link .badge,
            html.sidebar-collapsed .app-sidebar-user-text, html.sidebar-collapsed .app-sidebar-quick span, html.sidebar-collapsed .app-sidebar-project { display: none !important; }
            html.sidebar-collapsed .app-sidebar .nav-link { justify-content: center; padding: 0.45rem 0; }
            html.sidebar-collapsed .app-sidebar .nav-link::before { left: -0.6rem; }
            html.sidebar-collapsed .app-sidebar-subnav { display: none; }
            html.sidebar-collapsed .app-sidebar-divider { display: block; height: 1px; background: var(--app-border); margin: 0.6rem 0.25rem; }
            html.sidebar-collapsed .app-sidebar-user { justify-content: center; }
            html.sidebar-collapsed .app-sidebar-user a { display: none; }
            html.sidebar-collapsed .app-sidebar-quick { padding: 0.6rem 0; }
        }
        .app-sidebar-divider { display: none; }
        @media (max-width: 767.98px) {
            .app-sidebar .offcanvas-header { border-bottom: 1px solid var(--app-border); }
            .app-sidebar .offcanvas-body { padding: 0; display: flex; }
            .app-sidebar-inner { border-right: 0; background: #fff; }
        }

        /* =====================================================================
           Scrollbars
           ===================================================================== */
        * { scrollbar-width: thin; scrollbar-color: #cbd5e1 transparent; }
        *::-webkit-scrollbar { width: 8px; height: 8px; }
        *::-webkit-scrollbar-track { background: transparent; }
        *::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }
        *::-webkit-scrollbar-thumb:hover { background: #94a3b8; border: 2px solid transparent; background-clip: padding-box; }
        .app-sidebar-inner::-webkit-scrollbar { width: 6px; }
        .app-sidebar-inner { scrollbar-color: #dbe2ea transparent; }
        .nav-tabs::-webkit-scrollbar, .kanban-wrap::-webkit-scrollbar, .table-responsive::-webkit-scrollbar { height: 6px; }

        /* =====================================================================
           Components
           ===================================================================== */
        .card, .card.shadow-sm { border: 1px solid rgba(15, 23, 42, 0.06) !important; box-shadow: var(--app-shadow-sm) !important; border-radius: var(--app-radius-lg); background: var(--app-surface); }
        .card .card { box-shadow: none !important; border-radius: var(--app-radius); }
        .card-header.bg-white, .card-header { background-color: transparent !important; border-bottom: 1px solid var(--app-border); padding: 1rem 1.25rem; border-radius: var(--app-radius-lg) var(--app-radius-lg) 0 0 !important; }
        .card-header .h5, .card-header .h6, .card-header h2, .card-header h3 { font-weight: 700; }
        .card-body { padding: 1.25rem; }
        .card-footer { background: var(--app-surface-2); border-top: 1px solid var(--app-border); border-radius: 0 0 var(--app-radius-lg) var(--app-radius-lg) !important; }
        .card.border-0.bg-light, .card.bg-light { background: var(--app-surface-2) !important; border: 1px solid var(--app-border) !important; box-shadow: none !important; }

        .btn { border-radius: 0.7rem; font-weight: 600; letter-spacing: 0.005em; transition: transform 0.12s ease, box-shadow 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease; }
        .btn:active { transform: translateY(1px); }
        .btn-sm { border-radius: 0.6rem; padding: 0.35rem 0.7rem; font-size: 0.8rem; }
        .btn-primary { background: linear-gradient(135deg, #6366f1, #4f46e5); border: 0; box-shadow: 0 6px 16px rgba(79, 70, 229, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.2); }
        .btn-primary:hover, .btn-primary:focus { background: linear-gradient(135deg, #5b5ef0, #4338ca); box-shadow: 0 8px 20px rgba(79, 70, 229, 0.4); transform: translateY(-1px); }
        .btn-primary:disabled, .btn-primary.disabled { background: linear-gradient(135deg, #a5b4fc, #818cf8); border: 0; }
        .btn-success { background: linear-gradient(135deg, #22c55e, #16a34a); border: 0; box-shadow: 0 6px 16px rgba(22, 163, 74, 0.28); }
        .btn-danger { background: linear-gradient(135deg, #f87171, #dc2626); border: 0; box-shadow: 0 6px 16px rgba(220, 38, 38, 0.28); }
        .btn-warning { background: linear-gradient(135deg, #fbbf24, #f59e0b); border: 0; color: #422006; box-shadow: 0 6px 16px rgba(245, 158, 11, 0.3); }
        .btn-warning:hover { color: #422006; }
        .btn-light { background: #fff; border: 1px solid var(--app-border); color: var(--app-text); box-shadow: var(--app-shadow-sm); }
        .btn-outline-secondary { color: var(--app-text-2); border-color: var(--app-border-strong); background: #fff; }
        .btn-outline-secondary:hover, .btn-outline-secondary:focus { background: var(--app-surface-2); color: var(--app-text); border-color: var(--app-border-strong); }
        .btn-outline-primary { color: var(--app-accent-deep); border-color: var(--app-accent-border); background: #fff; }
        .btn-outline-primary:hover, .btn-outline-primary:focus { background: var(--app-accent-soft); border-color: var(--app-accent); color: var(--app-accent-deep); }
        .btn-outline-danger { border-color: #fecaca; color: #dc2626; background: #fff; }
        .btn-outline-danger:hover { background: #fef2f2; border-color: #f87171; color: #b91c1c; }
        .btn-outline-success { border-color: #bbf7d0; color: #16a34a; background: #fff; }
        .btn-outline-success:hover { background: #f0fdf4; border-color: #4ade80; color: #15803d; }
        .btn-outline-light { border-color: rgba(255, 255, 255, 0.35); color: #fff; }
        .btn-outline-light:hover { background: rgba(255, 255, 255, 0.14); color: #fff; }
        .btn-link { font-weight: 600; }
        .btn-group > .btn { box-shadow: none; }
        .btn-group-sm > .btn { border-radius: 0.55rem; }
        .btn-group > .btn:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; }
        .btn-group > .btn:not(:last-child):not(.dropdown-toggle) { border-top-right-radius: 0; border-bottom-right-radius: 0; }

        /* ---------- Forms ---------- */
        :root { accent-color: var(--app-accent); }
        .form-label { font-weight: 600; font-size: 0.8rem; color: var(--app-text-2); margin-bottom: 0.35rem; letter-spacing: 0.01em; display: inline-flex; align-items: center; gap: 0.3rem; }
        .form-label .text-danger, .form-label .form-required { color: #ef4444 !important; font-weight: 700; font-size: 0.85em; line-height: 1; }
        .form-label .text-muted { font-weight: 500; }
        .form-control, .form-select {
            border-radius: 0.7rem; border: 1px solid var(--app-border-strong); padding: 0.55rem 0.9rem; min-height: 2.65rem;
            background-color: #fff; color: var(--app-text); font-size: 0.9rem; line-height: 1.45;
            box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.035);
            transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
        }
        .form-control:hover:not(:focus):not(:disabled):not([readonly]), .form-select:hover:not(:focus):not(:disabled) { border-color: #b9c0cf; }
        /* Focus: crisp accent border + faint halo + light tint (no heavy ring) */
        .form-control:focus, .form-select:focus { border-color: var(--app-accent); box-shadow: 0 0 0 1px var(--app-accent), 0 0 0 4px rgba(99, 102, 241, 0.08); background-color: #fcfcff; outline: 0; }
        .form-control::placeholder { color: var(--app-text-faint); opacity: 1; }
        .form-control:disabled, .form-control[readonly], .form-select:disabled { background-color: var(--app-surface-2); color: var(--app-text-muted); border-color: var(--app-border); box-shadow: none; cursor: not-allowed; }
        .form-control-sm, .form-select-sm { border-radius: 0.6rem; padding: 0.38rem 0.75rem; min-height: 2.2rem; font-size: 0.83rem; }
        .form-control-lg, .form-select-lg { border-radius: 0.85rem; padding: 0.75rem 1.1rem; min-height: 3.1rem; font-size: 1rem; }
        textarea.form-control { min-height: 5.5rem; line-height: 1.55; resize: vertical; }
        textarea.form-control.form-control-sm { min-height: 3.6rem; }
        textarea.form-control.is-autogrow { resize: none; overflow: hidden; }
        .form-select {
            padding-right: 2.6rem; cursor: pointer;
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2364748b' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.8' d='m3 6 5 5 5-5'/%3e%3c/svg%3e");
            background-size: 14px 14px; background-position: right 0.9rem center;
        }
        .form-select:focus { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%234f46e5' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.8' d='m3 6 5 5 5-5'/%3e%3c/svg%3e"); }
        .form-select-sm { padding-right: 2.2rem; background-position: right 0.7rem center; background-size: 12px 12px; }
        .form-select[multiple], .form-select[size]:not([size="1"]) { background-image: none; padding-right: 0.9rem; }
        .form-select option { padding: 0.4rem 0.6rem; }
        .form-text { color: var(--app-text-muted); font-size: 0.76rem; margin-top: 0.35rem; }
        input[type="date"].form-control, input[type="time"].form-control, input[type="datetime-local"].form-control, input[type="month"].form-control { cursor: text; }
        input[type="date"]::-webkit-calendar-picker-indicator, input[type="time"]::-webkit-calendar-picker-indicator, input[type="datetime-local"]::-webkit-calendar-picker-indicator {
            cursor: pointer; opacity: 0.55; border-radius: 0.35rem; padding: 0.15rem; transition: opacity 0.15s ease, background 0.15s ease;
        }
        input[type="date"]::-webkit-calendar-picker-indicator:hover, input[type="time"]::-webkit-calendar-picker-indicator:hover, input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover { opacity: 1; background: var(--app-accent-soft); }
        input[type="search"].form-control { -webkit-appearance: none; appearance: none; }
        input[type="search"]::-webkit-search-cancel-button {
            -webkit-appearance: none; appearance: none; height: 0.95rem; width: 0.95rem; cursor: pointer; opacity: 0.55; margin-left: 0.25rem;
            background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3ccircle cx='8' cy='8' r='8' fill='%2394a3b8'/%3e%3cpath d='M5 5l6 6M11 5l-6 6' stroke='%23fff' stroke-width='1.6' stroke-linecap='round'/%3e%3c/svg%3e") center/contain no-repeat;
        }
        input[type="search"]::-webkit-search-cancel-button:hover { opacity: 1; }
        input[type="file"].form-control { padding: 0.35rem 0.5rem; cursor: pointer; color: var(--app-text-muted); }
        input[type="file"].form-control::file-selector-button {
            border: 1px solid var(--app-accent-border); background: var(--app-accent-soft); color: var(--app-accent-deep); font-weight: 600; font-size: 0.8rem;
            padding: 0.3rem 0.75rem; border-radius: 0.5rem; margin-right: 0.75rem; cursor: pointer; transition: background 0.15s ease, color 0.15s ease;
        }
        input[type="file"].form-control:hover::file-selector-button { background: var(--app-accent); color: #fff; border-color: var(--app-accent); }
        input[type="file"].form-control-sm { padding: 0.2rem 0.4rem; }
        input[type="file"].form-control-sm::file-selector-button { padding: 0.2rem 0.6rem; font-size: 0.75rem; }
        input[type="number"].form-control { -moz-appearance: textfield; }
        input[type="color"].form-control { padding: 0.25rem; width: 3rem; }
        input[type="range"].form-range::-webkit-slider-thumb { background: var(--app-accent); box-shadow: 0 2px 6px rgba(99, 102, 241, 0.4); }
        input[type="range"].form-range::-webkit-slider-runnable-track { background: #e5e7f0; border-radius: 999px; }

        /* Checkboxes, radios, switches */
        .form-check { min-height: 1.5rem; padding-left: 1.7rem; }
        .form-check-input { width: 1.1rem; height: 1.1rem; margin-top: 0.2rem; margin-left: -1.7rem; border: 1.5px solid #b9c0cf; border-radius: 0.32rem; background-color: #fff; cursor: pointer; transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease; box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.04); }
        .form-check-input[type="radio"] { border-radius: 50%; }
        .form-check-input:hover:not(:checked):not(:disabled) { border-color: var(--app-accent); }
        .form-check-input:checked { background-color: var(--app-accent); border-color: var(--app-accent); background-image: linear-gradient(135deg, #6366f1, #4f46e5); box-shadow: 0 2px 6px rgba(99, 102, 241, 0.35); }
        .form-check-input:checked[type="checkbox"] { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.4' d='m5 10.5 3.5 3.5L15 7'/%3e%3c/svg%3e"), linear-gradient(135deg, #6366f1, #4f46e5); }
        .form-check-input:checked[type="radio"] { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e"), linear-gradient(135deg, #6366f1, #4f46e5); }
        .form-check-input:focus { box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.14); border-color: var(--app-accent); }
        .form-check-input:focus:not(:focus-visible) { box-shadow: none; }
        .form-check-input:disabled { opacity: 0.55; cursor: not-allowed; }
        .form-check-label { cursor: pointer; font-size: 0.875rem; color: var(--app-text-2); }
        .form-check-input:checked ~ .form-check-label { color: var(--app-text); }
        .form-switch { padding-left: 3.1rem; }
        .form-switch .form-check-input { width: 2.4rem; height: 1.3rem; margin-left: -3.1rem; margin-top: 0.1rem; border-radius: 999px; background-color: #d5d9e4; border-color: #d5d9e4; box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.1);
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e"); background-position: left 0.15rem center; transition: background-position 0.18s ease, background-color 0.18s ease; }
        .form-switch .form-check-input:checked { background-position: right 0.15rem center; background-color: var(--app-accent); border-color: var(--app-accent); box-shadow: 0 2px 8px rgba(99, 102, 241, 0.4); }
        .form-switch .form-check-input:focus:not(:checked) { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e"); }
        .form-check-inline { margin-right: 1.25rem; }

        /* Input groups: one ring around the whole group */
        .input-group { border-radius: 0.7rem; }
        .input-group-sm { border-radius: 0.6rem; }
        .input-group:focus-within { box-shadow: 0 0 0 1px var(--app-accent), 0 0 0 4px rgba(99, 102, 241, 0.08); }
        .input-group:focus-within .form-control, .input-group:focus-within .form-select, .input-group:focus-within .input-group-text { border-color: var(--app-accent); }
        .input-group .form-control:focus, .input-group .form-select:focus { box-shadow: none; background-color: #fcfcff; }
        .input-group .form-control, .input-group .form-select { border-radius: 0.7rem; }
        .input-group-sm .form-control, .input-group-sm .form-select { border-radius: 0.6rem; }
        .input-group-text { background: var(--app-surface-2); border: 1px solid var(--app-border-strong); color: var(--app-text-muted); border-radius: 0.7rem; font-size: 0.875rem; transition: border-color 0.15s ease; }
        .input-group-text.bg-white { background: #fff !important; }
        .input-group-sm .input-group-text { border-radius: 0.6rem; font-size: 0.8rem; }
        .input-group > :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) { margin-left: -1px; border-top-left-radius: 0; border-bottom-left-radius: 0; }
        .input-group > :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
        .input-group .btn { box-shadow: none; }
        .input-group .btn-primary { border: 1px solid var(--app-accent-deep); }
        .input-group .border-start-0 { border-left: 0 !important; }
        .input-group .border-end-0 { border-right: 0 !important; }

        /* Validation, counters, misc */
        .form-control.is-invalid, .form-select.is-invalid, .was-validated .form-control:invalid, .was-validated .form-select:invalid { border-color: #ef4444; background-image: none; }
        .form-control.is-invalid:focus, .form-select.is-invalid:focus { box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.16); }
        .form-control.is-valid, .form-select.is-valid { border-color: #22c55e; background-image: none; }
        .invalid-feedback, .valid-feedback { font-size: 0.76rem; font-weight: 500; }
        fieldset:disabled .form-control, fieldset:disabled .form-select { background: var(--app-surface-2); }
        .form-floating > .form-control, .form-floating > .form-select { border-radius: 0.7rem; }
        .form-floating > label { color: var(--app-text-faint); }
        legend, .form-section-title { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--app-text-faint); margin-bottom: 0.75rem; }
        .modal .form-label, .card .form-label { margin-bottom: 0.3rem; }
        .modal-body .row.g-3 > [class*="col-"] > .form-label:first-child { margin-top: 0; }
        .btn-close:focus { box-shadow: var(--app-ring); }
        label.btn { font-weight: 500; }
        .btn-check:checked + .btn-outline-primary, .btn-check:checked + .btn-outline-secondary { background: var(--app-accent-soft); color: var(--app-accent-deep); border-color: var(--app-accent-border); }
        .btn-check:focus-visible + .btn { box-shadow: var(--app-ring); }

        .badge { border-radius: 999px; font-weight: 600; padding: 0.32em 0.65em; letter-spacing: 0.01em; font-size: 0.72em; }
        .badge.text-bg-primary   { background: rgba(99, 102, 241, 0.13) !important; color: #4338ca !important; }
        .badge.text-bg-success   { background: rgba(34, 197, 94, 0.14) !important; color: #15803d !important; }
        .badge.text-bg-warning   { background: rgba(245, 158, 11, 0.16) !important; color: #b45309 !important; }
        .badge.text-bg-danger    { background: rgba(239, 68, 68, 0.13) !important; color: #b91c1c !important; }
        .badge.text-bg-info      { background: rgba(6, 182, 212, 0.14) !important; color: #0e7490 !important; }
        .badge.text-bg-secondary { background: rgba(100, 116, 139, 0.14) !important; color: #475569 !important; }
        .badge.text-bg-dark      { background: rgba(15, 23, 42, 0.10) !important; color: #0f172a !important; }
        .badge.text-bg-light     { background: #f1f3f9 !important; color: var(--app-text-2) !important; border-color: var(--app-border) !important; }
        .app-sidebar .badge.text-bg-primary, .app-sidebar .badge.text-bg-danger { color: #fff !important; }
        .app-sidebar .badge.text-bg-primary { background: var(--app-accent) !important; }
        .app-sidebar .badge.text-bg-danger { background: #ef4444 !important; }

        .nav-tabs { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; border: 0; gap: 0.2rem;
            background: rgba(15, 23, 42, 0.05); padding: 0.3rem; border-radius: 0.9rem; }
        .nav-tabs .nav-link { white-space: nowrap; color: var(--app-text-muted); border: 0; border-radius: 0.65rem; padding: 0.45rem 0.9rem; font-weight: 500; font-size: 0.85rem; transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease; }
        .nav-tabs .nav-link:hover { color: var(--app-text); background: rgba(255, 255, 255, 0.6); }
        .nav-tabs .nav-link.active { color: var(--app-accent-deep); background: #fff; font-weight: 600; box-shadow: var(--app-shadow-sm); }
        .nav-pills .nav-link { color: var(--app-text-muted); border-radius: 0.65rem; font-weight: 500; }
        .nav-pills .nav-link.active { background: linear-gradient(135deg, #6366f1, #4f46e5); }

        .table { --bs-table-hover-bg: #f7f8fe; margin-bottom: 0; }
        .table thead th, .table > thead > tr > th { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--app-text-muted); background: var(--app-surface-2); border-bottom: 1px solid var(--app-border); font-weight: 700; padding: 0.7rem 0.85rem; white-space: nowrap; }
        .table.table-light thead th, .table thead.table-light th { background: var(--app-surface-2) !important; }
        .table > :not(caption) > * > * { padding: 0.65rem 0.85rem; border-bottom-color: var(--app-border); vertical-align: middle; }
        .table-sm > :not(caption) > * > * { padding: 0.5rem 0.7rem; }
        .table-responsive { -webkit-overflow-scrolling: touch; max-width: 100%; }
        .table-responsive.border, .table-responsive.rounded { border-color: var(--app-border) !important; border-radius: var(--app-radius) !important; overflow: auto; }
        .list-group-item { border-color: var(--app-border); padding: 0.75rem 1rem; }
        .list-group-flush > .list-group-item:last-child { border-bottom: 0; }
        .list-group-item-action:hover { background: #f7f8fe; }

        .modal-content { border: 0; border-radius: var(--app-radius-lg); box-shadow: var(--app-shadow-lg); }
        .modal-header { border-bottom: 1px solid var(--app-border); padding: 1.1rem 1.35rem; }
        .modal-title { font-weight: 700; letter-spacing: -0.01em; }
        .modal-body { padding: 1.35rem; overflow-x: hidden; overflow-wrap: anywhere; }
        .modal-body .table-responsive, .modal-body pre, .modal-body .nav-tabs { overflow-x: auto; }
        .modal-footer { border-top: 1px solid var(--app-border); padding: 0.9rem 1.35rem; background: var(--app-surface-2); border-radius: 0 0 var(--app-radius-lg) var(--app-radius-lg); }
        .modal-backdrop { --bs-backdrop-bg: #0f172a; --bs-backdrop-opacity: 0.55; -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
        .offcanvas { border: 0 !important; box-shadow: var(--app-shadow-lg); }
        .dropdown-menu { border: 1px solid var(--app-border); border-radius: var(--app-radius); box-shadow: var(--app-shadow-lg); padding: 0.4rem; max-width: calc(100vw - 1rem); }
        .dropdown-item { border-radius: 0.55rem; padding: 0.45rem 0.7rem; font-size: 0.875rem; }
        .dropdown-item.active, .dropdown-item:active { background: var(--app-accent-soft); color: var(--app-accent-deep); }
        .alert { border-radius: var(--app-radius); border: 1px solid transparent; }
        .alert-success { background: #f0fdf4; color: #15803d; border-color: #bbf7d0; }
        .alert-danger { background: #fef2f2; color: #b91c1c; border-color: #fecaca; }
        .alert-warning { background: #fffbeb; color: #b45309; border-color: #fde68a; }
        .alert-info { background: #ecfeff; color: #0e7490; border-color: #a5f3fc; }
        .progress { height: 8px; border-radius: 999px; background: #eceef5; overflow: hidden; }
        .progress-bar { background: linear-gradient(90deg, #6366f1, #8b5cf6); border-radius: 999px; }
        .toast { border-radius: var(--app-radius); box-shadow: var(--app-shadow-lg); border: 0; }
        .toast.text-bg-success { background: linear-gradient(135deg, #16a34a, #15803d) !important; }
        .toast.text-bg-danger { background: linear-gradient(135deg, #dc2626, #b91c1c) !important; }
        .tooltip { --bs-tooltip-bg: #0f172a; --bs-tooltip-border-radius: 0.5rem; }
        .popover { border-color: var(--app-border); border-radius: var(--app-radius); box-shadow: var(--app-shadow-lg); }
        .accordion-item { border-color: var(--app-border); }
        .accordion-button:not(.collapsed) { background: var(--app-accent-soft); color: var(--app-accent-deep); box-shadow: none; }
        .accordion-button:focus { box-shadow: var(--app-ring); border-color: var(--app-accent-border); }
        .text-muted { color: var(--app-text-muted) !important; }
        hr { border-color: var(--app-border); opacity: 1; }

        /* Page header */
        .page-header { margin-bottom: 1.5rem; }
        .app-page-header { margin-bottom: 1.5rem; padding-bottom: 0; border-bottom: 0; }
        .app-page-eyebrow { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--app-accent); margin-bottom: 0.25rem; display: inline-flex; align-items: center; gap: 0.4rem; }
        .app-page-title { font-weight: 800; color: var(--app-text); letter-spacing: -0.025em; font-size: 1.65rem; }
        .app-page-subtitle { color: var(--app-text-muted); font-size: 0.95rem; max-width: 64ch; }
        .app-page-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }

        /* Stat tiles & misc (used by several pages) */
        .app-stat-card .card-body { padding: 1.1rem 1.25rem; }
        .app-stat-icon { font-size: 1.25rem; margin-bottom: 0.35rem; }
        .app-stat-value { font-size: 1.75rem; font-weight: 800; line-height: 1.1; color: var(--app-text); letter-spacing: -0.02em; }
        .app-stat-label { font-size: 0.8rem; color: var(--app-text-muted); margin-top: 0.15rem; }
        .app-product-card { transition: transform 0.15s ease, box-shadow 0.15s ease; }
        .app-product-card:hover { transform: translateY(-2px); box-shadow: var(--app-shadow-lg) !important; }
        .dashboard-empty-art svg { display: block; width: 100%; height: auto; }
        .dashboard-empty-body { background: #fff; }
        .dashboard-steps { display: flex; flex-direction: column; gap: 0.85rem; }
        .dashboard-step { display: flex; gap: 0.85rem; align-items: flex-start; }
        .dashboard-step-num { flex-shrink: 0; width: 1.75rem; height: 1.75rem; border-radius: 999px; background: var(--app-accent-soft); color: var(--app-accent); font-size: 0.8rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
        .app-empty-state { padding: 2.25rem 1rem; }
        .app-empty-icon { width: 4.25rem; height: 4.25rem; border-radius: 1.25rem; margin: 0 auto; display: inline-flex; align-items: center; justify-content: center; font-size: 1.8rem; line-height: 1;
            color: var(--app-accent); background: linear-gradient(135deg, #eef2ff, #f5f3ff); border: 1px solid rgba(99, 102, 241, 0.2); box-shadow: 0 10px 24px -12px rgba(99, 102, 241, 0.45); }
        .app-loading-inline .spinner-border { color: var(--app-accent) !important; }
        .prompt-row-inner { border-color: var(--app-border) !important; }
        .search-highlight { outline: 2px solid #f59e0b !important; outline-offset: 2px; background-color: #fffbeb !important; border-radius: 0.5rem; }
        #productsTable_wrapper .row { margin-bottom: 0.75rem; }
        .login-wrapper { min-height: calc(100vh - 56px); display: flex; align-items: center; justify-content: center; padding: 1rem; }

        /* Product cards (products list + dashboard) */
        .product-card { transition: box-shadow 0.18s ease, transform 0.18s ease; overflow: hidden; border-left: 4px solid var(--app-border) !important; }
        .product-card:hover { box-shadow: var(--app-shadow-lg) !important; transform: translateY(-3px); }
        .product-card--primary { border-left-color: #6366f1 !important; }
        .product-card--secondary { border-left-color: #94a3b8 !important; }
        .product-card--success { border-left-color: #22c55e !important; }
        .product-card--warning { border-left-color: #f59e0b !important; }
        .product-card--info { border-left-color: #06b6d4 !important; }
        .product-card--danger { border-left-color: #ef4444 !important; }
        .product-card--dark { border-left-color: #334155 !important; }
        .product-card-thumb { height: 140px; background: #f1f5f9; border-bottom: 1px solid var(--app-border); }
        .product-card-thumb-img { width: 100%; height: 100%; object-fit: cover; display: block; }
        .product-card-thumb-badge { position: absolute; top: 0.65rem; right: 0.65rem; box-shadow: 0 1px 4px rgba(15, 23, 42, 0.15); }
        .product-card-icon { width: 2.5rem; height: 2.5rem; border-radius: 0.75rem; background: linear-gradient(135deg, #eef2ff, #f5f3ff); color: var(--app-accent); display: flex; align-items: center; justify-content: center; font-size: 1.15rem; border: 1px solid rgba(99, 102, 241, 0.18); }
        .product-card-title a { color: var(--app-text); }
        .product-card-title a:hover { color: var(--app-accent-deep); }
        .product-card-tagline { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.45; }
        .product-status-badge { font-weight: 600; font-size: 0.68rem; letter-spacing: 0.02em; }
        .product-card-stats { display: flex; flex-wrap: wrap; gap: 0.35rem 0.85rem; font-size: 0.78rem; color: var(--app-text-muted); margin-bottom: 0.5rem; }
        .product-card-stats i { margin-right: 0.3rem; color: var(--app-text-faint); }
        .product-card-actions .btn { width: 2rem; height: 2rem; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 0.5rem !important; }
        .product-card-footer { position: relative; z-index: 2; }

        /* Rendered Markdown (notes, requirements, decisions) */
        .markdown-body { line-height: 1.6; word-wrap: break-word; }
        .markdown-body > :last-child { margin-bottom: 0; }
        .markdown-body h3, .markdown-body h4, .markdown-body h5, .markdown-body h6 { font-size: 1rem; font-weight: 700; margin: 0.8rem 0 0.35rem; }
        .markdown-body h3 { font-size: 1.1rem; }
        .markdown-body p { margin: 0 0 0.5rem; }
        .markdown-body ul, .markdown-body ol { padding-left: 1.4rem; margin-bottom: 0.5rem; }
        .markdown-body li { margin-bottom: 0.15rem; }
        .markdown-body li input[type="checkbox"] { margin-right: 0.35rem; vertical-align: middle; accent-color: var(--app-accent); }
        .markdown-body blockquote { border-left: 3px solid var(--app-accent-border); padding: 0.3rem 0.85rem; color: var(--app-text-muted); margin: 0.5rem 0; background: var(--app-accent-soft); border-radius: 0 0.5rem 0.5rem 0; }
        .markdown-body pre { background: #0f172a; color: #e2e8f0; border: 0; border-radius: 0.65rem; padding: 0.75rem 0.9rem; font-size: 0.82em; overflow-x: auto; }
        .markdown-body code { font-size: 0.88em; background: #f1f3f9; color: #4338ca; padding: 0.12rem 0.35rem; border-radius: 0.35rem; }
        .markdown-body pre code { background: transparent; color: inherit; padding: 0; }
        .markdown-body hr { margin: 0.75rem 0; }
        .markdown-body a { text-decoration: underline; text-underline-offset: 2px; }
        .na-note--pinned { border-color: #fcd34d !important; background: linear-gradient(180deg, #fffdf5, #fff); }
        .na-note .card-body, .inbox-note .card-body { position: relative; }
        .min-w-0 { min-width: 0; }
        .link-icon { width: 2.1rem; height: 2.1rem; border-radius: 0.6rem; background: var(--app-accent-soft); display: inline-flex; align-items: center; justify-content: center; font-size: 1rem; }
        kbd { background: #0f172a; color: #fff; border-radius: 0.3rem; padding: 0.05rem 0.4rem; font-size: 0.75em; font-family: var(--app-mono); }

        /* Horizontal-overflow safety net */
        .card, .list-group-item, .card-body, .modal-content { min-width: 0; }
        img, svg, video, iframe, canvas { max-width: 100%; }
        pre { max-width: 100%; overflow-x: auto; }
        .btn-group.flex-wrap, .btn-group.flex-nowrap { max-width: 100%; }
        .offcanvas.offcanvas-end, .tree-detail-offcanvas { max-width: 100vw !important; }
        .toast-container { max-width: calc(100vw - 1rem); }
        @media (max-width: 575.98px) {
            .app-content { padding: 1rem 0.85rem; }
            .app-page-header .btn { width: 100%; }
            .offcanvas.offcanvas-end, .tree-detail-offcanvas { width: 100vw !important; }
            .app-page-title { font-size: 1.35rem; }
        }
        @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }