@keyframes slideUp {
            from { opacity: 0; transform: translateY(20px); }
            to   { opacity: 1; transform: translateY(0); }
        }
        @keyframes fadeIn {
            from { opacity: 0; }
            to   { opacity: 1; }
        }

        /* Column highlight — smooth fade-in instead of abrupt */
        .column {
            transition: background 0.22s ease, box-shadow 0.22s ease, outline 0.22s ease;
        }
        .column-selected {
            outline: 2px solid rgba(77,171,247,0.7) !important;
            background: rgba(77,171,247,0.07) !important;
            box-shadow: 0 0 0 4px rgba(77,171,247,0.12) !important;
            animation: columnFadeSelect 0.22s ease forwards;
        }
        @keyframes columnFadeSelect {
            from { outline-color: rgba(77,171,247,0); box-shadow: 0 0 0 0 rgba(77,171,247,0); background: transparent; }
            to   { outline-color: rgba(77,171,247,0.7); box-shadow: 0 0 0 4px rgba(77,171,247,0.12); background: rgba(77,171,247,0.07); }
        }

        /* Force hide gallery controls */
        .controls, #createModal, #editModal {
            display: none !important;
        }

        /* Custom close button for mdEditor (injected, not used via iframe) */
        #mdEditorCloseBtn {
            background: #ffffff;
            border: 1px solid #dee2e6;
            color: #212529;
            cursor: pointer;
            transition: all 0.2s;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 4px;
        }

        /* ── Plan Badge ──────────────────────────────────── */
        .plan-badge-btn {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            padding: 3px 10px;
            border-radius: 20px;
            font-size: 0.7rem;
            font-weight: 700;
            letter-spacing: 0.05em;
            border: 1px solid transparent;
            cursor: pointer;
            transition: all 0.2s ease;
            white-space: nowrap;
        }
        .plan-badge-free {
            background: rgba(255,255,255,0.12);
            border-color: rgba(255,255,255,0.25);
            color: rgba(255,255,255,0.85);
        }
        .plan-badge-free:hover {
            background: rgba(99,179,237,0.25);
            border-color: #63b3ed;
            color: #fff;
            box-shadow: 0 0 10px rgba(99,179,237,0.3);
        }
        .plan-badge-premium {
            background: linear-gradient(135deg, rgba(217,119,6,0.3), rgba(245,158,11,0.2));
            border-color: rgba(245,158,11,0.5);
            color: #fbbf24;
        }
        .plan-badge-premium:hover {
            background: linear-gradient(135deg, rgba(217,119,6,0.45), rgba(245,158,11,0.35));
            box-shadow: 0 0 10px rgba(245,158,11,0.3);
        }
        .plan-badge-pro {
            background: linear-gradient(135deg, rgba(109,40,217,0.35), rgba(139,92,246,0.25));
            border-color: rgba(139,92,246,0.55);
            color: #c4b5fd;
        }
        .plan-badge-pro:hover {
            background: linear-gradient(135deg, rgba(109,40,217,0.5), rgba(139,92,246,0.4));
            box-shadow: 0 0 10px rgba(139,92,246,0.35);
        }

        /* ── Compact Board Tabs ──────────────────────────── */
        .board-tab {
            max-width: 180px;
            min-width: 80px;
            flex-shrink: 1;
        }
        .board-tab .board-name {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            max-width: 100px;
            display: inline-block;
            vertical-align: middle;
        }
        /* Drag-over indicator */
        .board-tab.drag-over {
            border-left: 2px solid #63b3ed !important;
            opacity: 0.7;
        }
        .board-tab.dragging {
            opacity: 0.4;
        }
        .onboarding-overlay {
            position: fixed;
            inset: 0;
            background: rgba(15, 23, 42, 0.82);
            backdrop-filter: blur(4px);
            z-index: 99999;
            display: none;
            align-items: center;
            justify-content: center;
            padding: 20px;
        }
        .onboarding-card {
            width: min(760px, 100%);
            background: #0f172a;
            border: 1px solid rgba(255,255,255,0.12);
            border-radius: 16px;
            color: #e2e8f0;
            box-shadow: 0 24px 60px rgba(0,0,0,0.5);
            overflow: hidden;
            display: flex;
            flex-direction: column;
            position: relative;
            z-index: 100000;
        }
        .onboarding-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 22px 24px 12px;
            border-bottom: 1px solid rgba(255,255,255,0.08);
        }
        .onboarding-body {
            display: block;
            padding: 18px 24px;
        }
        .onboarding-foot {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 16px;
            padding: 14px 24px 22px;
            border-top: 1px solid rgba(255,255,255,0.08);
        }
        @media (max-width: 640px) {
            .onboarding-foot {
                flex-direction: column;
                align-items: stretch;
            }
        }