/* ==========================================================================
   DOM & EVENTS INTERACTIVE WIDGETS (SIDE-BY-SIDE COLORFUL CODE LABS)
   Left: Syntax-Highlighted Writable Code | Right: Live Visual Object
   Soft Light Theme | High Contrast | Multi-Color VS Code Syntax
   ========================================================================== */

:root {
    --dom-accent: #6C4CE8;
    --dom-accent-hover: #5935D6;
    --dom-accent-light: #F0EBFF;
    --dom-border: #E2E8F0;
    --dom-surface: #FFFFFF;
    --dom-surface-alt: #F8FAFC;
    --dom-text: #1E293B;
    --dom-text-muted: #64748B;
    --dom-dark: #0D1117;
    --dom-dark-border: #1E293B;
    --dom-success: #10B981;
    --dom-danger: #EF4444;
}

/* ==========================================================================
   1. GENERIC INTERACTIVE CARD (Container)
   ========================================================================== */
.dom-interactive-card {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    background: var(--dom-surface) !important;
    border: 1px solid var(--dom-border) !important;
    border-radius: 14px !important;
    margin: 24px 0 32px !important;
    padding: 20px 22px !important;
    box-sizing: border-box !important;
    box-shadow: 0 4px 16px rgba(23, 32, 51, 0.04) !important;
    text-align: left !important;
    position: relative !important;
}

.dom-card-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 16px !important;
    padding-bottom: 12px !important;
    border-bottom: 1px solid var(--dom-border) !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.dom-card-title {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #1E293B !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.dom-card-dot {
    display: inline-block !important;
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    background: var(--dom-accent) !important;
}

.dom-card-tag {
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    color: var(--dom-accent) !important;
    background: var(--dom-accent-light) !important;
    padding: 3px 8px !important;
    border-radius: 4px !important;
}

/* ==========================================================================
   2. SIDE-BY-SIDE SPLIT LAYOUT (Left: Code Editor | Right: Object Preview)
   ========================================================================== */
.dom-split-layout {
    display: grid !important;
    grid-template-columns: 1.15fr 1fr !important;
    gap: 18px !important;
    align-items: stretch !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* --- Left Column: Writable Code Editor --- */
.dom-code-col {
    display: flex !important;
    flex-direction: column !important;
    background: #0B1120 !important;
    border: 1px solid var(--dom-dark-border) !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

.dom-editor-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 8px 14px !important;
    background: #0F172A !important;
    border-bottom: 1px solid #1E293B !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    color: #94A3B8 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

/* Syntax Highlighting Editor Wrapper */
.dom-editor-wrapper {
    position: relative !important;
    width: 100% !important;
    height: 135px !important;
    min-height: 125px !important;
    background: #0D1117 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

.dom-highlight-backdrop,
.dom-code-textarea {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 14px 16px !important;
    border: none !important;
    font-family: 'JetBrains Mono', Consolas, 'Fira Code', monospace !important;
    font-size: 13px !important;
    line-height: 22px !important;
    letter-spacing: 0 !important;
    tab-size: 2 !important;
    white-space: pre-wrap !important;
    word-break: break-word !important;
    box-sizing: border-box !important;
}

.dom-highlight-backdrop {
    background: transparent !important;
    pointer-events: none !important;
    overflow: hidden !important;
    z-index: 1 !important;
    color: #E6EDF3 !important;
}

.dom-highlight-backdrop code {
    background: transparent !important;
    padding: 0 !important;
    border: none !important;
    font-size: inherit !important;
    font-family: inherit !important;
    line-height: inherit !important;
    display: block !important;
}

.dom-code-textarea {
    background: transparent !important;
    color: transparent !important;
    caret-color: #58A6FF !important;
    outline: none !important;
    resize: none !important;
    z-index: 2 !important;
    overflow-y: auto !important;
}

.dom-code-textarea::selection {
    background: rgba(56, 189, 248, 0.35) !important;
    color: transparent !important;
}

/* Syntax Highlighting Tokens (Unified VS Code Dark+ Theme) */
.hl-keyword, .tok-kw, .tok-keyword          { color: #C084FC !important; font-weight: 600 !important; } /* Keywords: const, let, if, for, return, function */
.hl-func, .tok-fn, .tok-method             { color: #FCD34D !important; font-weight: 600 !important; } /* Functions & Methods: querySelectorAll, forEach */
.hl-tag, .tok-tag                          { color: #38BDF8 !important; font-weight: 600 !important; } /* HTML Tags: <div>, <button> */
.hl-builtin, .tok-sel, .tok-builtin         { color: #38BDF8 !important; font-weight: 600 !important; } /* Built-ins: document, window, console, Array */
.hl-attr, .tok-attr                        { color: #9CDCFE !important; } /* HTML Attributes: class, id, type */
.hl-prop, .tok-prop, .tok-property         { color: #7DD3FC !important; } /* Properties: .style, .classList, .textContent */
.hl-var, .tok-var                          { color: #9CDCFE !important; } /* Variables */
.hl-str, .hl-string, .tok-str, .tok-string { color: #FB923C !important; } /* Strings: "text", 'job-card' */
.hl-number, .tok-num, .tok-number, .hl-val, .tok-val { color: #A3E635 !important; font-weight: 600 !important; } /* Numbers & Hex: 0, 2, 0xfc */
.hl-atom, .tok-atom                        { color: #A3E635 !important; font-weight: 600 !important; } /* Atoms: true, false, null, undefined */
.hl-comment, .hl-cmt, .tok-cm, .tok-comment { color: #7EC770 !important; font-style: italic !important; } /* Comments: // comment */
.hl-doctype                                { color: #C084FC !important; font-weight: 700 !important; } /* <!DOCTYPE html> */
.hl-op, .tok-op                            { color: #F8FAFC !important; } /* Operators: +, =, <, >>, & */
.hl-punct, .tok-punct, .tok-punc           { color: #F8FAFC !important; } /* Punctuation: {}, (), [], ;, , */
.hl-plain                                  { color: #F8FAFC !important; }

.dom-editor-actions {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 8px 12px !important;
    background: #0F172A !important;
    border-top: 1px solid #1E293B !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
}

.dom-btn-run {
    height: 30px !important;
    padding: 0 14px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    border-radius: 6px !important;
    background: var(--dom-accent) !important;
    color: #FFFFFF !important;
    border: none !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    transition: all 0.2s ease !important;
}

.dom-btn-run:hover {
    background: var(--dom-accent-hover) !important;
}

.dom-btn-reset {
    height: 30px !important;
    padding: 0 10px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    border-radius: 6px !important;
    background: #1E293B !important;
    color: #CBD5E1 !important;
    border: 1px solid #334155 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.dom-btn-reset:hover {
    background: #334155 !important;
    color: #FFFFFF !important;
}

.dom-status-msg {
    font-family: 'JetBrains Mono', Consolas, monospace !important;
    font-size: 11px !important;
    color: #4ADE80 !important;
    margin-left: auto !important;
}

.dom-status-msg.error {
    color: #F87171 !important;
}

/* --- Right Column: Visual Object Preview --- */
.dom-preview-col {
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    background: var(--dom-surface-alt) !important;
    border: 1px solid var(--dom-border) !important;
    border-radius: 10px !important;
    padding: 14px 16px !important;
    box-sizing: border-box !important;
    gap: 12px !important;
}

.dom-object-container {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    min-height: 100px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.dom-quick-controls {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    border-top: 1px solid var(--dom-border) !important;
    padding-top: 10px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.dom-control-row {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
}

.dom-control-label {
    font-size: 11px !important;
    font-weight: 700 !important;
    color: var(--dom-text-muted) !important;
    text-transform: uppercase !important;
    min-width: 55px !important;
}

.dom-pill-btn {
    height: 28px !important;
    padding: 0 10px !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
    border-radius: 6px !important;
    border: 1px solid var(--dom-border) !important;
    background: #FFFFFF !important;
    color: var(--dom-text) !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
}

.dom-pill-btn:hover {
    border-color: var(--dom-accent) !important;
    color: var(--dom-accent) !important;
    background: var(--dom-accent-light) !important;
}

.dom-pill-btn.active {
    background: var(--dom-accent) !important;
    color: #FFFFFF !important;
    border-color: var(--dom-accent) !important;
}

/* ==========================================================================
   3. INDIVIDUAL VISUAL OBJECT STYLES
   ========================================================================== */

/* Demo 1: Shape Box */
.demo-live-shape {
    width: 85px !important;
    height: 85px !important;
    background: #6C4CE8;
    border-radius: 8px;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    color: #FFFFFF !important;
    font-weight: 700 !important;
    font-size: 12.5px !important;
    text-align: center !important;
    padding: 6px !important;
    box-sizing: border-box !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
    user-select: none !important;
}

/* Demo 2: Preview Card */
.demo-live-card {
    border: 1.5px solid var(--dom-border) !important;
    border-radius: 10px !important;
    padding: 14px 16px !important;
    background: #FFFFFF !important;
    width: 100% !important;
    transition: all 0.25s ease !important;
    box-sizing: border-box !important;
}

.demo-live-card.dark-theme {
    background: #0F172A !important;
    color: #F8FAFC !important;
    border-color: #334155 !important;
}

.demo-live-card.dark-theme h4 {
    color: #F8FAFC !important;
}

.demo-live-card.dark-theme p {
    color: #94A3B8 !important;
}

.demo-live-card.glowing-border {
    border-color: #6C4CE8 !important;
    box-shadow: 0 0 0 4px var(--dom-accent-light), 0 4px 16px rgba(108, 76, 232, 0.15) !important;
}

.demo-live-card.pill-rounded {
    border-radius: 24px !important;
}

.demo-live-card h4 {
    margin: 0 0 4px 0 !important;
    font-size: 14px !important;
    color: #0F172A !important;
}

.demo-live-card p {
    margin: 0 !important;
    font-size: 12px !important;
    color: #64748B !important;
    line-height: 1.4 !important;
}

/* Demo 3: Live Tags List */
.demo-tags-box {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    min-height: 44px !important;
    padding: 8px !important;
    background: #FFFFFF !important;
    border: 1px dashed var(--dom-border) !important;
    border-radius: 8px !important;
    align-items: center !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.demo-live-tag {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    background: var(--dom-accent-light) !important;
    color: var(--dom-accent) !important;
    border: 1px solid rgba(108, 76, 232, 0.2) !important;
    padding: 3px 8px !important;
    border-radius: 5px !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
    animation: tagPop 0.2s ease forwards !important;
}

@keyframes tagPop {
    from { opacity: 0; transform: scale(0.85); }
    to { opacity: 1; transform: scale(1); }
}

.demo-live-tag .tag-del {
    color: #EF4444 !important;
    cursor: pointer !important;
    font-weight: 800 !important;
    font-size: 11px !important;
}

/* Events Demo 1: Bubbling Boxes */
.bubble-tree-view {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.bubble-node {
    border-radius: 6px !important;
    padding: 8px 12px !important;
    transition: all 0.2s ease !important;
    width: 100% !important;
    box-sizing: border-box !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
}

.bubble-node.doc {
    background: #F1F5F9 !important;
    border: 1px solid #94A3B8 !important;
    color: #475569 !important;
}

.bubble-node.parent {
    background: #EDE9FE !important;
    border: 1px solid #A78BFA !important;
    color: #6D28D9 !important;
}

.bubble-node.btn {
    background: var(--dom-accent) !important;
    color: #FFFFFF !important;
    border: 1px solid var(--dom-accent) !important;
    text-align: center !important;
    cursor: pointer !important;
    padding: 8px 12px !important;
    box-shadow: 0 2px 6px rgba(108, 76, 232, 0.2) !important;
}

.bubble-node.active-glow {
    background: #FEF3C7 !important;
    border-color: #F59E0B !important;
    color: #92400E !important;
    transform: scale(1.02) !important;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.35) !important;
}

/* Events Demo 2: Delegated Task List */
.demo-delegated-ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    width: 100% !important;
}

.demo-delegated-li {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 7px 10px !important;
    background: #FFFFFF !important;
    border: 1px solid var(--dom-border) !important;
    border-radius: 6px !important;
    font-size: 12.5px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    user-select: none !important;
}

.demo-delegated-li:hover {
    background: #F1F5F9 !important;
}

.demo-delegated-li.done {
    text-decoration: line-through !important;
    color: #94A3B8 !important;
    background: #F0FDF4 !important;
    border-color: #BBF7D0 !important;
}

.demo-delegated-del {
    background: #FEE2E2 !important;
    color: #EF4444 !important;
    border: none !important;
    padding: 2px 6px !important;
    border-radius: 4px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
}

/* Events Demo 3: Debounce Counters */
.demo-debounce-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    width: 100% !important;
}

.demo-counter-badge {
    border-radius: 8px !important;
    padding: 10px 12px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    border: 1px solid var(--dom-border) !important;
}

.demo-counter-badge.raw {
    background: #EFF6FF !important;
    border-color: #BFDBFE !important;
}

.demo-counter-badge.debounced {
    background: #F0FDF4 !important;
    border-color: #BBF7D0 !important;
}

.demo-badge-title {
    font-size: 10.5px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    color: var(--dom-text-muted) !important;
}

.demo-badge-num {
    font-family: 'JetBrains Mono', Consolas, monospace !important;
    font-size: 20px !important;
    font-weight: 800 !important;
}

.demo-counter-badge.raw .demo-badge-num { color: #2563EB !important; }
.demo-counter-badge.debounced .demo-badge-num { color: #16A34A !important; }

/* ==========================================================================
   4. RESPONSIVE BREAKPOINT
   ========================================================================== */
@media (max-width: 880px) {
    .dom-split-layout {
        grid-template-columns: 1fr !important;
    }
}