/* ═══════════════════════════════════════════════════════════════════
   Schema Markup Generator Pro 2.3 — Complete Isolated CSS
   Scoped entirely to .smg-root — zero conflicts with Elementor/theme.
   Every color, font, border is explicitly set with !important.
   ═══════════════════════════════════════════════════════════════════ */

/* ── 1. Hard isolation: override Elementor global palette & base styles ── */
.smg-root,
.smg-root *,
.smg-root *::before,
.smg-root *::after {
    box-sizing: border-box !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    /* Reset Elementor color vars that bleed in */
    --e-global-color-primary:        unset;
    --e-global-color-secondary:      unset;
    --e-global-color-text:           unset;
    --e-global-color-accent:         unset;
    --e-global-typography-primary-font-family:   unset;
    --e-global-typography-secondary-font-family: unset;
}

/* Structural resets — only margins/padding/border on layout elements */
.smg-root div,
.smg-root section,
.smg-root ul,
.smg-root ol,
.smg-root li,
.smg-root p,
.smg-root h1,
.smg-root h2,
.smg-root h3,
.smg-root h4,
.smg-root h5,
.smg-root h6,
.smg-root span,
.smg-root pre,
.smg-root code,
.smg-root details,
.smg-root summary {
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    color: inherit !important;
    background: transparent !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    line-height: inherit !important;
    letter-spacing: inherit !important;
    text-transform: none !important;
    text-decoration: none !important;
}

/* Input/button resets */
.smg-root input,
.smg-root textarea,
.smg-root select,
.smg-root button {
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    color: inherit !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    outline: none !important;
}

/* ── 2. Design Tokens on root ── */
.smg-root {
    /* Palette */
    --smg-accent:      #6366f1;
    --smg-accent-h:    #4f46e5;
    --smg-accent-r08:  rgba(99,102,241,.08);
    --smg-accent-r12:  rgba(99,102,241,.12);
    --smg-accent-r15:  rgba(99,102,241,.15);
    --smg-accent-r18:  rgba(99,102,241,.18);
    --smg-accent-r25:  rgba(99,102,241,.25);
    --smg-accent-r05:  rgba(99,102,241,.05);
    --smg-accent-r10:  rgba(99,102,241,.10);
    --smg-bg:          #f5f6fa;
    --smg-card:        #ffffff;
    --smg-border:      #e0e3ed;
    --smg-text:        #1a1d2e;
    --smg-dim:         #5f6580;
    --smg-faint:       #9198b0;
    --smg-input:       #f0f1f7;
    --smg-input-dk:    #e8eaf2;
    --smg-danger:      #ef4444;
    --smg-danger-r10:  rgba(239,68,68,.10);
    --smg-success:     #10b981;
    --smg-warn:        #f59e0b;
    --smg-warn-r08:    rgba(245,158,11,.08);
    --smg-warn-brd:    rgba(245,158,11,.30);
    --smg-code-bg:     #191b27;
    --smg-code-fg:     #cdd5e0;
    --smg-mono:        'SF Mono', 'Fira Code', 'Cascadia Code', Consolas, monospace;
    --smg-radius:      14px;
    --smg-shadow:      0 1px 4px rgba(20,20,60,.06), 0 4px 14px rgba(20,20,60,.04);
    --smg-font:        -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;

    /* Legacy aliases used by JS inline SVGs */
    --smg-acc:   var(--smg-accent);
    --smg-brd:   var(--smg-border);
    --smg-bg2:   var(--smg-input);
    --smg-bg3:   var(--smg-input-dk);
    --smg-muted: var(--smg-dim);
    --smg-txt:   var(--smg-text);
    /* Keep old token names working */
    --_accent:      var(--smg-accent);
    --_accent-h:    var(--smg-accent-h);
    --_accent-soft: var(--smg-accent-r08);
    --_accent-ring: var(--smg-accent-r18);
    --_accent-05:   var(--smg-accent-r05);
    --_accent-10:   var(--smg-accent-r10);
    --_accent-12:   var(--smg-accent-r12);
    --_accent-15:   var(--smg-accent-r15);
    --_accent-25:   var(--smg-accent-r25);
    --_bg:          var(--smg-bg);
    --_card:        var(--smg-card);
    --_border:      var(--smg-border);
    --_text:        var(--smg-text);
    --_dim:         var(--smg-dim);
    --_faint:       var(--smg-faint);
    --_input:       var(--smg-input);
    --_input-dark:  var(--smg-input-dk);
    --_danger:      var(--smg-danger);
    --_success:     var(--smg-success);
    --_warn:        var(--smg-warn);
    --_warn-soft:   var(--smg-warn-r08);
    --_warn-border: var(--smg-warn-brd);
    --_code-bg:     var(--smg-code-bg);
    --_code-fg:     var(--smg-code-fg);
    --_mono:        var(--smg-mono);
    --_r:           var(--smg-radius);
    --_shadow:      var(--smg-shadow);

    /* Root appearance */
    background-color: var(--smg-bg) !important;
    color:            var(--smg-text) !important;
    font-family:      var(--smg-font) !important;
    font-size:        14px !important;
    line-height:      1.5 !important;
    padding:          32px 28px !important;
    border-radius:    20px !important;
    max-width:        100% !important;
    position:         relative !important;
    border:           none !important;
}

/* ── 3. Header ── */
.smg-root .smg-hdr {
    text-align: center !important;
    margin-bottom: 24px !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
}
.smg-root .smg-hdr h2 {
    font-size: 26px !important;
    font-weight: 800 !important;
    letter-spacing: -0.03em !important;
    color: var(--smg-text) !important;
    margin-bottom: 6px !important;
    text-transform: none !important;
    line-height: 1.2 !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
}
.smg-root .smg-hdr p {
    font-size: 14px !important;
    color: var(--smg-dim) !important;
    max-width: 580px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    font-weight: 400 !important;
    line-height: 1.6 !important;
}

/* ── 4. Mode Bar (Tab row) ── */
.smg-root .smg-mode-bar {
    display: flex !important;
    margin: 0 0 22px !important;
    padding: 0 !important;
    border-radius: 12px !important;
    border: 1.5px solid var(--smg-border) !important;
    background-color: var(--smg-input) !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
    width: 100% !important;
}
.smg-root .smg-mode-bar::-webkit-scrollbar { display: none !important; }

.smg-root .smg-mode-btn {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    padding: 11px 14px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    font-family: var(--smg-font) !important;
    line-height: 1 !important;
    cursor: pointer !important;
    border: none !important;
    border-right: 1.5px solid var(--smg-border) !important;
    border-radius: 0 !important;
    background-color: transparent !important;
    color: var(--smg-dim) !important;
    transition: background-color .18s, color .18s !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    white-space: nowrap !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    box-shadow: none !important;
}
.smg-root .smg-mode-btn:last-child {
    border-right: none !important;
    border-radius: 0 10px 10px 0 !important;
}
.smg-root .smg-mode-btn:first-child {
    border-radius: 10px 0 0 10px !important;
}
.smg-root .smg-mode-btn.active {
    background-color: var(--smg-accent) !important;
    color: #ffffff !important;
    border-right-color: var(--smg-accent-h) !important;
}
.smg-root .smg-mode-btn:not(.active):hover {
    background-color: var(--smg-input-dk) !important;
    color: var(--smg-text) !important;
}
.smg-root .smg-mode-btn svg {
    width: 14px !important;
    height: 14px !important;
    flex-shrink: 0 !important;
    vertical-align: middle !important;
    display: inline-block !important;
}

/* ── 5. Schema type dropdown ── */
.smg-root .smg-sel-wrap {
    max-width: 440px !important;
    margin: 0 auto 22px !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    position: relative !important;
}
.smg-root .smg-sel {
    width: 100% !important;
    padding: 12px 44px 12px 16px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    font-family: var(--smg-font) !important;
    color: var(--smg-text) !important;
    background-color: var(--smg-card) !important;
    border: 2px solid var(--smg-border) !important;
    border-radius: 12px !important;
    cursor: pointer !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    box-shadow: var(--smg-shadow) !important;
    transition: border-color .2s, box-shadow .2s !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235f6580' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 14px center !important;
    line-height: 1.5 !important;
    display: block !important;
}
.smg-root .smg-sel:focus {
    border-color: var(--smg-accent) !important;
    box-shadow: 0 0 0 4px var(--smg-accent-r18) !important;
    outline: none !important;
}
.smg-root .smg-sel optgroup {
    font-weight: 700 !important;
    color: var(--smg-dim) !important;
    font-size: 11px !important;
    background-color: var(--smg-card) !important;
}
.smg-root .smg-sel option {
    font-weight: 500 !important;
    color: var(--smg-text) !important;
    background-color: var(--smg-card) !important;
    padding: 6px !important;
}

/* ── 6. Two-panel layout ── */
.smg-root .smg-panels {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 20px !important;
    align-items: start !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
}

/* ── 7. Cards (.smg-c) ── */
.smg-root .smg-c {
    background-color: var(--smg-card) !important;
    border: 1px solid var(--smg-border) !important;
    border-radius: var(--smg-radius) !important;
    box-shadow: var(--smg-shadow) !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 0 !important;
    color: var(--smg-text) !important;
}
.smg-root .smg-fc   { min-height: 400px !important; }
.smg-root .smg-pv   { position: sticky !important; top: 16px !important; }

/* ── 8. Card Header ── */
.smg-root .smg-c-h {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
    gap: 12px !important;
    padding: 13px 18px !important;
    border: none !important;
    border-bottom: 1px solid var(--smg-border) !important;
    background: linear-gradient(180deg, #f8f9fc 0%, var(--smg-card) 100%) !important;
    flex-shrink: 0 !important;
    color: var(--smg-text) !important;
}
.smg-root .smg-c-h h3 {
    font-size: 11.5px !important;
    font-weight: 700 !important;
    color: var(--smg-text) !important;
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    white-space: nowrap !important;
    line-height: 1.4 !important;
}
.smg-root .smg-c-h h3 svg {
    width: 15px !important;
    height: 15px !important;
    color: var(--smg-accent) !important;
    flex-shrink: 0 !important;
    display: inline-block !important;
    vertical-align: middle !important;
}

/* Presets header: h3 + p stacked vertically */
.smg-root .smg-presets-hdr {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px !important;
    padding-bottom: 14px !important;
}
.smg-root .smg-presets-hdr p.smg-presets-sub {
    font-size: 13px !important;
    color: var(--smg-dim) !important;
    font-weight: 400 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    line-height: 1.5 !important;
    white-space: normal !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

/* ── 9. Card Body ── */
.smg-root .smg-c-b {
    padding: 18px !important;
    flex: 1 !important;
    overflow-y: auto !important;
    max-height: 68vh !important;
    scrollbar-width: thin !important;
    scrollbar-color: var(--smg-border) transparent !important;
    background: transparent !important;
    color: var(--smg-text) !important;
    border: none !important;
}
.smg-root .smg-c-b::-webkit-scrollbar { width: 5px !important; }
.smg-root .smg-c-b::-webkit-scrollbar-thumb {
    background-color: var(--smg-border) !important;
    border-radius: 3px !important;
}

/* ── 10. Panel wrappers (presets / import / csv) act as cards ── */
/* NOTE: NO display property here — JS controls show/hide via inline style.
   !important on display would override inline style="display:none" and break tabs. */
.smg-root #smg-presets-panel,
.smg-root #smg-import-panel,
.smg-root #smg-csv-panel {
    background-color: var(--smg-card) !important;
    border: 1px solid var(--smg-border) !important;
    border-radius: var(--smg-radius) !important;
    box-shadow: var(--smg-shadow) !important;
    overflow: hidden !important;
    padding: 0 !important;
    color: var(--smg-text) !important;
}

/* ── 11. Form sections (collapsible) ── */
.smg-root .smg-sec {
    margin-bottom: 18px !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
}
.smg-root .smg-sec:last-child { margin-bottom: 0 !important; }
.smg-root .smg-sec-h {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    cursor: pointer !important;
    padding: 7px 10px !important;
    border-radius: 8px !important;
    background-color: var(--smg-accent-r08) !important;
    margin-bottom: 12px !important;
    transition: background-color .15s !important;
    user-select: none !important;
    border: none !important;
    color: var(--smg-accent) !important;
}
.smg-root .smg-sec-h:hover { background-color: var(--smg-accent-r12) !important; }
.smg-root .smg-sec-h .smg-sec-arrow {
    width: 16px !important;
    height: 16px !important;
    color: var(--smg-accent) !important;
    transition: transform .2s !important;
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.smg-root .smg-sec-h .smg-sec-arrow svg {
    width: 16px !important;
    height: 16px !important;
    display: block !important;
    color: var(--smg-accent) !important;
}
.smg-root .smg-sec-h.collapsed .smg-sec-arrow { transform: rotate(-90deg) !important; }
.smg-root .smg-sec-h > span {
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.07em !important;
    color: var(--smg-accent) !important;
    background: transparent !important;
    padding: 0 !important;
    border: none !important;
    line-height: 1 !important;
}
.smg-root .smg-sec-body { display: block !important; }
.smg-root .smg-sec-body.hidden { display: none !important; }

/* ── 12. Form fields ── */
.smg-root .smg-f {
    margin-bottom: 12px !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
}
.smg-root .smg-f:last-child { margin-bottom: 0 !important; }
.smg-root .smg-lbl {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: var(--smg-text) !important;
    margin-bottom: 5px !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    line-height: 1.4 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}
.smg-root .smg-lbl .r {
    color: var(--smg-danger) !important;
    font-weight: 700 !important;
    background: transparent !important;
    padding: 0 !important;
}
.smg-root .smg-lbl .h {
    font-weight: 400 !important;
    color: var(--smg-faint) !important;
    font-size: 11px !important;
    margin-left: 2px !important;
    background: transparent !important;
    padding: 0 !important;
}

/* ── 13. Inputs / selects / textareas ── */
.smg-root .smg-in,
.smg-root .smg-ta,
.smg-root .smg-sl {
    width: 100% !important;
    padding: 9px 12px !important;
    font-size: 13px !important;
    font-family: var(--smg-font) !important;
    font-weight: 400 !important;
    color: var(--smg-text) !important;
    background-color: var(--smg-input) !important;
    border: 1.5px solid transparent !important;
    border-radius: 8px !important;
    transition: border-color .2s, background-color .2s, box-shadow .2s !important;
    line-height: 1.5 !important;
    display: block !important;
    box-shadow: none !important;
    outline: none !important;
}
.smg-root .smg-in:focus,
.smg-root .smg-ta:focus,
.smg-root .smg-sl:focus {
    border-color: var(--smg-accent) !important;
    background-color: #ffffff !important;
    box-shadow: 0 0 0 3px var(--smg-accent-r18) !important;
    outline: none !important;
}
.smg-root .smg-in::placeholder,
.smg-root .smg-ta::placeholder { color: var(--smg-faint) !important; }
.smg-root .smg-ta {
    min-height: 68px !important;
    resize: vertical !important;
    font-family: var(--smg-font) !important;
}
.smg-root .smg-sl {
    cursor: pointer !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 24 24' fill='none' stroke='%235f6580' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 10px center !important;
    padding-right: 30px !important;
}
.smg-root .smg-inv {
    border-color: var(--smg-danger) !important;
    background-color: rgba(239,68,68,.04) !important;
}
.smg-root .smg-vmsg {
    font-size: 11px !important;
    color: var(--smg-danger) !important;
    margin-top: 3px !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    line-height: 1.4 !important;
    display: block !important;
}

/* Two / three col grid rows */
.smg-root .smg-row  { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
.smg-root .smg-row3 { display: grid !important; grid-template-columns: 1fr 1fr 1fr !important; gap: 10px !important; }

/* ── 14. Repeater: single-field row ── */
.smg-root .smg-ri {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin-bottom: 6px !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
}
.smg-root .smg-ri .smg-in {
    flex: 1 !important;
    min-width: 0 !important;
}

/* Remove (×) button */
.smg-root .smg-x {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    border-radius: 6px !important;
    background-color: transparent !important;
    border: none !important;
    padding: 0 !important;
    color: var(--smg-danger) !important;
    cursor: pointer !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    font-family: var(--smg-font) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: background-color .15s !important;
    flex-shrink: 0 !important;
    line-height: 1 !important;
    box-shadow: none !important;
}
.smg-root .smg-x:hover { background-color: var(--smg-danger-r10) !important; }

/* ── 15. Repeater: multi-field block ── */
.smg-root .smg-rb {
    border: 1.5px solid var(--smg-border) !important;
    border-radius: 10px !important;
    padding: 20px 12px 12px !important;
    margin-bottom: 10px !important;
    background-color: var(--smg-input) !important;
    position: relative !important;
    color: var(--smg-text) !important;
}
.smg-root .smg-rb .smg-bn {
    position: absolute !important;
    top: -9px !important;
    left: 12px !important;
    background-color: var(--smg-accent) !important;
    color: #ffffff !important;
    font-size: 9px !important;
    font-weight: 800 !important;
    width: 18px !important;
    height: 18px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    border: none !important;
    line-height: 1 !important;
}
.smg-root .smg-rb > .smg-x {
    position: absolute !important;
    top: 6px !important;
    right: 6px !important;
}
.smg-root .smg-rb .smg-f { margin-bottom: 8px !important; }
.smg-root .smg-rb .smg-f:last-child { margin-bottom: 0 !important; }

/* Add-item button */
.smg-root .smg-add {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 6px 14px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    font-family: var(--smg-font) !important;
    color: var(--smg-accent) !important;
    background-color: var(--smg-accent-r08) !important;
    border: 1.5px dashed rgba(99,102,241,.35) !important;
    border-radius: 7px !important;
    cursor: pointer !important;
    transition: background-color .15s, border-color .15s !important;
    margin-top: 6px !important;
    line-height: 1 !important;
    box-shadow: none !important;
    text-decoration: none !important;
}
.smg-root .smg-add:hover {
    background-color: var(--smg-accent-r12) !important;
    border-color: var(--smg-accent) !important;
}

/* ── 16. Footer / action bar ── */
.smg-root .smg-foot {
    padding: 14px 18px !important;
    border: none !important;
    border-top: 1px solid var(--smg-border) !important;
    background-color: var(--smg-card) !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-shrink: 0 !important;
}

/* PRIMARY generate button */
.smg-root .smg-btn-gen {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    padding: 11px 20px !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    font-family: var(--smg-font) !important;
    color: #ffffff !important;
    background: linear-gradient(135deg, #6366f1, #4f46e5) !important;
    border: none !important;
    border-radius: 10px !important;
    cursor: pointer !important;
    transition: box-shadow .2s, transform .15s !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    box-shadow: 0 2px 10px rgba(99,102,241,.35) !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    text-decoration: none !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}
.smg-root .smg-btn-gen:hover {
    box-shadow: 0 4px 18px rgba(99,102,241,.5) !important;
    transform: translateY(-1px) !important;
}
.smg-root .smg-btn-gen:active {
    transform: scale(.98) !important;
    box-shadow: 0 1px 6px rgba(99,102,241,.3) !important;
}
.smg-root .smg-btn-gen svg {
    width: 15px !important;
    height: 15px !important;
    flex-shrink: 0 !important;
    display: inline-block !important;
    vertical-align: middle !important;
    color: #ffffff !important;
}

/* SECONDARY reset button */
.smg-root .smg-btn-rst {
    flex: 0 0 auto !important;
    padding: 11px 18px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    font-family: var(--smg-font) !important;
    color: var(--smg-dim) !important;
    background-color: var(--smg-input) !important;
    border: 1.5px solid var(--smg-border) !important;
    border-radius: 10px !important;
    cursor: pointer !important;
    transition: border-color .15s, color .15s, background-color .15s !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: none !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}
.smg-root .smg-btn-rst:hover {
    border-color: var(--smg-danger) !important;
    color: var(--smg-danger) !important;
    background-color: rgba(239,68,68,.04) !important;
}

/* ── 17. Code / preview panel ── */
.smg-root .smg-code-area {
    background-color: var(--smg-code-bg) !important;
    border: none !important;
    padding: 16px !important;
    max-height: 58vh !important;
    overflow: auto !important;
    flex: 1 !important;
    scrollbar-width: thin !important;
    scrollbar-color: #333 transparent !important;
    color: var(--smg-code-fg) !important;
}
.smg-root .smg-code-area::-webkit-scrollbar { width: 5px !important; }
.smg-root .smg-code-area::-webkit-scrollbar-thumb { background-color: #444 !important; border-radius: 3px !important; }
.smg-root .smg-code-area pre {
    margin: 0 !important;
    padding: 0 !important;
    white-space: pre-wrap !important;
    word-break: break-word !important;
    font-family: var(--smg-mono) !important;
    font-size: 12px !important;
    line-height: 1.75 !important;
    color: var(--smg-code-fg) !important;
    background: transparent !important;
    border: none !important;
}
.smg-root .smg-hl-k { color: #7dd3fc !important; }
.smg-root .smg-hl-s { color: #86efac !important; }
.smg-root .smg-hl-n { color: #fca5a5 !important; }
.smg-root .smg-hl-b { color: #a5b4fc !important; }
.smg-root .smg-hl-u { color: #94a3b8 !important; }

/* Code action buttons bar (dark bg) */
.smg-root .smg-acts {
    display: flex !important;
    gap: 6px !important;
    padding: 10px 16px !important;
    border: none !important;
    border-top: 1px solid rgba(255,255,255,.07) !important;
    background-color: var(--smg-code-bg) !important;
    flex-wrap: wrap !important;
    flex-shrink: 0 !important;
}
.smg-root .smg-abtn {
    flex: 1 !important;
    min-width: 80px !important;
    padding: 8px 12px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    font-family: var(--smg-font) !important;
    border: 1.5px solid rgba(255,255,255,.12) !important;
    border-radius: 7px !important;
    cursor: pointer !important;
    transition: background-color .15s, border-color .15s !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    background-color: rgba(255,255,255,.06) !important;
    color: #d0d5e0 !important;
    white-space: nowrap !important;
    line-height: 1 !important;
    box-shadow: none !important;
    text-decoration: none !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}
.smg-root .smg-abtn:hover {
    background-color: rgba(255,255,255,.12) !important;
    border-color: rgba(255,255,255,.2) !important;
    color: #fff !important;
}
.smg-root .smg-abtn.ok {
    background-color: rgba(16,185,129,.15) !important;
    border-color: var(--smg-success) !important;
    color: var(--smg-success) !important;
}
.smg-root .smg-abtn svg { width: 13px !important; height: 13px !important; flex-shrink: 0 !important; }

/* Light-bg .smg-abtn (used in CSV controls area) */
.smg-root .smg-csv-tmpl-btn {
    background-color: var(--smg-input-dk) !important;
    border: 1.5px solid var(--smg-border) !important;
    color: var(--smg-text) !important;
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    padding: 9px 14px !important;
    font-size: 12.5px !important;
}
.smg-root .smg-csv-tmpl-btn:hover {
    background-color: var(--smg-accent-r08) !important;
    border-color: var(--smg-accent) !important;
    color: var(--smg-accent) !important;
}

/* Import copy/edit buttons (also on light bg) */
.smg-root .smg-import-copy-btn,
.smg-root .smg-import-edit-btn {
    background-color: var(--smg-input-dk) !important;
    border-color: var(--smg-border) !important;
    color: var(--smg-text) !important;
    flex: 0 0 auto !important;
}
.smg-root .smg-import-copy-btn:hover,
.smg-root .smg-import-edit-btn:hover {
    background-color: var(--smg-accent-r08) !important;
    border-color: var(--smg-accent) !important;
    color: var(--smg-accent) !important;
}

/* ── 18. Empty state ── */
.smg-root .smg-empty {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 48px 20px !important;
    text-align: center !important;
    color: var(--smg-faint) !important;
    background: transparent !important;
    border: none !important;
}
.smg-root .smg-empty svg {
    width: 44px !important;
    height: 44px !important;
    margin-bottom: 12px !important;
    opacity: .35 !important;
    display: block !important;
}
.smg-root .smg-empty p {
    font-size: 13px !important;
    line-height: 1.65 !important;
    color: var(--smg-faint) !important;
    font-weight: 400 !important;
    background: transparent !important;
    border: none !important;
}
.smg-root .smg-empty p strong { font-weight: 700 !important; color: var(--smg-dim) !important; }

/* ── 19. Validation panel (inserted above code area) ── */
.smg-root .smg-val-panel {
    padding: 10px 16px !important;
    border: none !important;
    border-bottom: 1px solid var(--smg-border) !important;
    background-color: var(--smg-input) !important;
    flex-shrink: 0 !important;
    color: var(--smg-text) !important;
}
.smg-root .smg-vbadge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    padding: 4px 11px !important;
    border-radius: 20px !important;
    letter-spacing: .02em !important;
    line-height: 1 !important;
    border: none !important;
}
.smg-root .smg-vbadge.ok   { background-color: #dcfce7 !important; color: #166534 !important; }
.smg-root .smg-vbadge.err  { background-color: #fee2e2 !important; color: #991b1b !important; }
.smg-root .smg-vbadge.warn { background-color: #fef9c3 !important; color: #854d0e !important; }
.smg-root .smg-val-list {
    list-style: none !important;
    margin: 8px 0 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 5px !important;
    border: none !important;
    background: transparent !important;
}
.smg-root .smg-vi {
    display: flex !important;
    align-items: flex-start !important;
    gap: 7px !important;
    font-size: 12px !important;
    line-height: 1.45 !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    color: var(--smg-text) !important;
}
.smg-root .smg-vi-icon {
    font-weight: 700 !important;
    flex-shrink: 0 !important;
    margin-top: 1px !important;
    background: transparent !important;
    padding: 0 !important;
    border: none !important;
}
.smg-root .smg-vi.error .smg-vi-icon { color: #ef4444 !important; }
.smg-root .smg-vi.warn  .smg-vi-icon { color: #f59e0b !important; }
.smg-root .smg-vi.ok    .smg-vi-icon { color: #22c55e !important; }
.smg-root .smg-vi-hint {
    color: var(--smg-dim) !important;
    font-style: italic !important;
    background: transparent !important;
    padding: 0 !important;
    border: none !important;
}

/* ── 20. Toast notification ── */
.smg-toast {
    position: fixed !important;
    bottom: 24px !important;
    right: 24px !important;
    background-color: #1e2132 !important;
    color: #ffffff !important;
    padding: 10px 18px !important;
    border-radius: 10px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    box-shadow: 0 8px 30px rgba(0,0,0,.28) !important;
    z-index: 9999999 !important;
    transform: translateY(16px) !important;
    opacity: 0 !important;
    transition: transform .3s ease, opacity .3s ease !important;
    pointer-events: none !important;
    max-width: 320px !important;
    border: none !important;
}
.smg-toast.show { transform: translateY(0) !important; opacity: 1 !important; }
.smg-toast.suc  { border-left: 4px solid #10b981 !important; }
.smg-toast.err  { border-left: 4px solid #ef4444 !important; }

/* Fade-in */
.smg-root .smg-fade { animation: smgFi .25s ease !important; }
@keyframes smgFi {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}
/* Spinner */
.smg-root .smg-spinner {
    display: inline-block !important;
    width: 14px !important;
    height: 14px !important;
    min-width: 14px !important;
    border: 2px solid var(--smg-border) !important;
    border-top-color: var(--smg-accent) !important;
    border-radius: 50% !important;
    animation: smgSpin .7s linear infinite !important;
    background: transparent !important;
    flex-shrink: 0 !important;
}
@keyframes smgSpin { to { transform: rotate(360deg); } }

/* ════════════════════════════════════════════════════════════════
   @graph COMBINER
   ════════════════════════════════════════════════════════════════ */

/* JS controls display (sets "grid" or "none" explicitly via switchMode) */
.smg-root #smg-graph-panel {
    grid-template-columns: 1fr 1fr !important;
    gap: 20px !important;
    align-items: start !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
}
.smg-root .smg-graph-lc {
    display: flex !important;
    flex-direction: column !important;
    min-height: 400px !important;
}

/* Schema stack list */
.smg-root .smg-graph-stack {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    padding: 14px 16px !important;
    min-height: 80px !important;
    max-height: 280px !important;
    overflow-y: auto !important;
    flex: 1 !important;
    scrollbar-width: thin !important;
    scrollbar-color: var(--smg-border) transparent !important;
    background: transparent !important;
    border: none !important;
}
.smg-root .smg-graph-stack::-webkit-scrollbar { width: 5px !important; }
.smg-root .smg-graph-stack::-webkit-scrollbar-thumb {
    background-color: var(--smg-border) !important;
    border-radius: 3px !important;
}

.smg-root .smg-graph-empty {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 24px 16px !important;
    color: var(--smg-dim) !important;
    text-align: center !important;
    font-size: 13px !important;
    line-height: 1.6 !important;
    background: transparent !important;
    border: none !important;
    flex: 1 !important;
}
.smg-root .smg-graph-empty p {
    color: var(--smg-dim) !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    background: transparent !important;
    border: none !important;
}
.smg-root .smg-graph-empty p strong { font-weight: 700 !important; color: var(--smg-text) !important; }

/* Individual schema card in stack */
.smg-root .smg-graph-card {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    background-color: var(--smg-input) !important;
    border: 1.5px solid var(--smg-border) !important;
    border-radius: 10px !important;
    padding: 10px 12px !important;
    cursor: default !important;
    transition: border-color .18s, box-shadow .18s !important;
    color: var(--smg-text) !important;
    min-width: 0 !important;
}
.smg-root .smg-graph-card.active,
.smg-root .smg-graph-card:hover {
    border-color: var(--smg-accent) !important;
    box-shadow: 0 0 0 3px var(--smg-accent-r15) !important;
}

/* Left section of card: number + info */
.smg-root .smg-gc-left {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    min-width: 0 !important;
    flex: 1 !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
}

/* Numbered badge */
.smg-root .smg-gc-idx {
    background-color: var(--smg-accent) !important;
    color: #ffffff !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    border-radius: 50% !important;
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    padding: 0 !important;
    border: none !important;
    line-height: 1 !important;
}

/* Info block: type label + @id */
.smg-root .smg-gc-info {
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
    min-width: 0 !important;
    flex: 1 !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
}
.smg-root .smg-gc-type {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: var(--smg-text) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    background: transparent !important;
    padding: 0 !important;
    border: none !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}
.smg-root .smg-gc-id {
    font-size: 11px !important;
    color: var(--smg-accent) !important;
    background-color: var(--smg-accent-r10) !important;
    padding: 2px 7px !important;
    border-radius: 4px !important;
    font-family: var(--smg-mono) !important;
    font-weight: 500 !important;
    width: fit-content !important;
    max-width: 160px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    display: block !important;
    border: none !important;
    line-height: 1.5 !important;
}

/* Green dot: has-data indicator */
.smg-root .smg-gc-dot {
    width: 8px !important;
    height: 8px !important;
    min-width: 8px !important;
    border-radius: 50% !important;
    background-color: #22c55e !important;
    flex-shrink: 0 !important;
    border: none !important;
    padding: 0 !important;
    display: inline-block !important;
}

/* Edit / delete buttons in graph card */
.smg-root .smg-gc-actions {
    display: flex !important;
    gap: 4px !important;
    flex-shrink: 0 !important;
    align-items: center !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
}
.smg-root .smg-gc-edit,
.smg-root .smg-gc-del {
    border: none !important;
    border-radius: 6px !important;
    padding: 5px 8px !important;
    cursor: pointer !important;
    font-size: 13px !important;
    line-height: 1 !important;
    transition: background-color .15s, color .15s !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-family: var(--smg-font) !important;
    box-shadow: none !important;
    text-decoration: none !important;
}
.smg-root .smg-gc-edit {
    background-color: var(--smg-input-dk) !important;
    color: var(--smg-dim) !important;
}
.smg-root .smg-gc-edit:hover {
    background-color: var(--smg-accent) !important;
    color: #ffffff !important;
}
.smg-root .smg-gc-edit svg {
    width: 13px !important;
    height: 13px !important;
    display: block !important;
    color: inherit !important;
}
.smg-root .smg-gc-del {
    background-color: var(--smg-input-dk) !important;
    color: var(--smg-dim) !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    padding: 3px 8px !important;
    line-height: 1 !important;
}
.smg-root .smg-gc-del:hover {
    background-color: #ef4444 !important;
    color: #ffffff !important;
}

/* Add schema row at bottom of stack */
.smg-root .smg-graph-add-wrap {
    display: flex !important;
    gap: 8px !important;
    padding: 12px 16px !important;
    border: none !important;
    border-top: 1px solid var(--smg-border) !important;
    background-color: var(--smg-card) !important;
    align-items: center !important;
    flex-shrink: 0 !important;
}
.smg-root .smg-graph-add-wrap .smg-graph-type-sel {
    flex: 1 !important;
    min-width: 0 !important;
}
.smg-root .smg-graph-add-btn {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    padding: 10px 16px !important;
    font-size: 13px !important;
}

/* Form wrap (below stack when editing an item) */
.smg-root .smg-graph-form-wrap {
    border: none !important;
    border-top: 2px solid var(--smg-accent) !important;
    background: transparent !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
}
.smg-root .smg-graph-form-hdr {
    border-radius: 0 !important;
    background: linear-gradient(180deg, #ededff 0%, #f5f5ff 100%) !important;
}
.smg-root .smg-graph-id-row {
    padding: 14px 16px !important;
    background-color: var(--smg-accent-r05) !important;
    border: none !important;
    border-bottom: 1px solid var(--smg-border) !important;
    flex-shrink: 0 !important;
}
.smg-root .smg-graph-id-row .smg-f { margin-bottom: 0 !important; }
.smg-root .smg-graph-form-body {
    max-height: 380px !important;
    overflow-y: auto !important;
    scrollbar-width: thin !important;
    scrollbar-color: var(--smg-border) transparent !important;
}
.smg-root .smg-graph-form-body::-webkit-scrollbar { width: 5px !important; }
.smg-root .smg-graph-form-body::-webkit-scrollbar-thumb {
    background-color: var(--smg-border) !important;
    border-radius: 3px !important;
}
.smg-root .smg-graph-save-row {
    border: none !important;
    border-top: 1px solid var(--smg-border) !important;
    flex-shrink: 0 !important;
    background-color: var(--smg-card) !important;
}

/* Cross-reference panel */
.smg-root .smg-xref-panel {
    padding: 10px 16px 12px !important;
    background-color: var(--smg-warn-r08) !important;
    border: none !important;
    border-bottom: 1px solid var(--smg-warn-brd) !important;
    flex-shrink: 0 !important;
}
.smg-root .smg-xref-hdr {
    font-size: 11.5px !important;
    font-weight: 700 !important;
    color: #b45309 !important;
    margin-bottom: 8px !important;
    text-transform: uppercase !important;
    letter-spacing: .05em !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    line-height: 1.4 !important;
}
.smg-root .smg-xref-item {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 12px !important;
    color: var(--smg-text) !important;
    margin-bottom: 4px !important;
    flex-wrap: wrap !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
}
.smg-root .smg-xref-prop {
    font-family: var(--smg-mono) !important;
    font-weight: 700 !important;
    color: var(--smg-accent) !important;
    background-color: var(--smg-accent-r10) !important;
    padding: 2px 7px !important;
    border-radius: 4px !important;
    font-size: 11px !important;
    border: none !important;
    line-height: 1.5 !important;
}
.smg-root .smg-xref-arrow {
    color: var(--smg-dim) !important;
    font-weight: 700 !important;
    background: transparent !important;
    padding: 0 !important;
    border: none !important;
}
.smg-root .smg-xref-target {
    color: var(--smg-text) !important;
    background: transparent !important;
    padding: 0 !important;
    border: none !important;
}
.smg-root .smg-xref-target code {
    font-size: 11px !important;
    font-family: var(--smg-mono) !important;
    background-color: var(--smg-input-dk) !important;
    padding: 1px 5px !important;
    border-radius: 3px !important;
    color: #22c55e !important;
    border: none !important;
}

/* ════════════════════════════════════════════════════════════════
   PRESETS PANEL
   ════════════════════════════════════════════════════════════════ */

.smg-root .smg-presets-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important;
    gap: 16px !important;
    padding: 18px !important;
    background: transparent !important;
    border: none !important;
}
.smg-root .smg-preset-card {
    background-color: var(--smg-input) !important;
    border: 1.5px solid var(--smg-border) !important;
    border-radius: 10px !important;
    padding: 18px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    transition: border-color .18s, box-shadow .18s !important;
    color: var(--smg-text) !important;
}
.smg-root .smg-preset-card:hover {
    border-color: var(--smg-accent) !important;
    box-shadow: 0 4px 16px -4px var(--smg-accent-r25) !important;
}
.smg-root .smg-pc-title {
    font-size: 15px !important;
    font-weight: 800 !important;
    color: var(--smg-text) !important;
    background: transparent !important;
    padding: 0 !important;
    border: none !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    line-height: 1.3 !important;
}
.smg-root .smg-pc-desc {
    font-size: 13px !important;
    color: var(--smg-dim) !important;
    line-height: 1.55 !important;
    background: transparent !important;
    padding: 0 !important;
    border: none !important;
    font-weight: 400 !important;
}
.smg-root .smg-pc-badges {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
    margin-top: 2px !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
}
.smg-root .smg-pc-badge {
    font-size: 11px !important;
    font-weight: 600 !important;
    background-color: var(--smg-accent-r12) !important;
    color: var(--smg-accent) !important;
    border-radius: 4px !important;
    padding: 2px 8px !important;
    border: none !important;
    line-height: 1.5 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}
.smg-root .smg-pc-load {
    margin-top: 8px !important;
    width: 100% !important;
    justify-content: center !important;
    padding: 9px 16px !important;
    font-size: 13px !important;
}

/* ════════════════════════════════════════════════════════════════
   IMPORT URL PANEL
   ════════════════════════════════════════════════════════════════ */

.smg-root .smg-import-body {
    padding: 20px 18px !important;
    background: transparent !important;
    border: none !important;
}
.smg-root .smg-import-desc {
    font-size: 13px !important;
    color: var(--smg-dim) !important;
    margin-bottom: 18px !important;
    line-height: 1.65 !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    font-weight: 400 !important;
}
.smg-root .smg-import-row {
    display: flex !important;
    gap: 8px !important;
    align-items: center !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
}
.smg-root .smg-import-url {
    flex: 1 !important;
    min-width: 0 !important;
}
.smg-root .smg-import-go {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    padding: 10px 18px !important;
    font-size: 13px !important;
}
.smg-root .smg-import-status {
    margin-top: 14px !important;
    font-size: 13px !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
}
.smg-root .smg-import-loading {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    color: var(--smg-dim) !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
}
.smg-root .smg-import-ok  { color: #22c55e !important; font-weight: 600 !important; }
.smg-root .smg-import-err { color: #ef4444 !important; font-weight: 600 !important; }

.smg-root .smg-import-results {
    margin-top: 20px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
}
.smg-root .smg-import-card {
    background-color: var(--smg-input) !important;
    border: 1.5px solid var(--smg-border) !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    color: var(--smg-text) !important;
}
.smg-root .smg-import-card-hdr {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    padding: 10px 14px !important;
    border: none !important;
    border-bottom: 1px solid var(--smg-border) !important;
    background-color: var(--smg-input-dk) !important;
}
.smg-root .smg-import-type {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: var(--smg-accent) !important;
    background: transparent !important;
    padding: 0 !important;
    border: none !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}
.smg-root .smg-import-card-actions {
    display: flex !important;
    gap: 6px !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    align-items: center !important;
}
.smg-root .smg-import-pre {
    max-height: 240px !important;
    overflow-y: auto !important;
    font-size: 11.5px !important;
    font-family: var(--smg-mono) !important;
    margin: 0 !important;
    padding: 14px !important;
    border: none !important;
    border-radius: 0 !important;
    background-color: var(--smg-code-bg) !important;
    color: var(--smg-code-fg) !important;
    line-height: 1.7 !important;
    white-space: pre-wrap !important;
    word-break: break-word !important;
}

/* ════════════════════════════════════════════════════════════════
   CSV BULK PANEL
   ════════════════════════════════════════════════════════════════ */

.smg-root .smg-csv-body {
    padding: 20px 18px !important;
    background: transparent !important;
    border: none !important;
}
.smg-root .smg-csv-desc {
    font-size: 13px !important;
    color: var(--smg-dim) !important;
    margin-bottom: 18px !important;
    line-height: 1.65 !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    font-weight: 400 !important;
}
.smg-root .smg-csv-controls {
    display: flex !important;
    align-items: flex-end !important;
    gap: 10px !important;
    margin-bottom: 18px !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
}
.smg-root .smg-csv-controls .smg-f {
    flex: 1 !important;
    min-width: 0 !important;
    margin: 0 !important;
}

/* CSV Upload Drop Zone */
.smg-root .smg-csv-upload-area {
    border: 2px dashed var(--smg-border) !important;
    border-radius: 12px !important;
    margin-bottom: 18px !important;
    transition: border-color .18s, background-color .18s !important;
    overflow: hidden !important;
    background-color: var(--smg-input) !important;
}
.smg-root .smg-csv-drop {
    padding: 40px 20px !important;
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 10px !important;
    cursor: default !important;
    background: transparent !important;
    border: none !important;
}
.smg-root .smg-csv-drop.dragging {
    border-color: var(--smg-accent) !important;
    background-color: var(--smg-accent-r05) !important;
}
.smg-root .smg-csv-drop p {
    font-size: 14px !important;
    color: var(--smg-text) !important;
    font-weight: 500 !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    line-height: 1.5 !important;
}
.smg-root .smg-csv-browse-btn {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    color: var(--smg-accent) !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    text-decoration: underline !important;
    font-size: inherit !important;
    font-family: var(--smg-font) !important;
    line-height: inherit !important;
    display: inline !important;
    box-shadow: none !important;
}
.smg-root .smg-csv-drop-hint {
    font-size: 12px !important;
    color: var(--smg-faint) !important;
    background: transparent !important;
    padding: 0 !important;
    border: none !important;
    font-weight: 400 !important;
    line-height: 1.4 !important;
}

/* Progress bar */
.smg-root .smg-csv-prog-bar {
    height: 6px !important;
    border-radius: 3px !important;
    background-color: var(--smg-border) !important;
    overflow: hidden !important;
    margin-bottom: 8px !important;
    border: none !important;
    padding: 0 !important;
}
.smg-root .smg-csv-prog-fill {
    height: 100% !important;
    background-color: var(--smg-accent) !important;
    border-radius: 3px !important;
    transition: width .2s !important;
    border: none !important;
    padding: 0 !important;
}
.smg-root #smg-csv-progress span {
    font-size: 12px !important;
    color: var(--smg-dim) !important;
    background: transparent !important;
    padding: 0 !important;
    border: none !important;
}

/* CSV results */
.smg-root .smg-csv-summary {
    display: flex !important;
    gap: 14px !important;
    margin-bottom: 14px !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
}
.smg-root .smg-csv-count {
    font-size: 13px !important;
    font-weight: 700 !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    line-height: 1.4 !important;
}
.smg-root .smg-csv-count.ok  { color: #22c55e !important; }
.smg-root .smg-csv-count.err { color: #ef4444 !important; }
.smg-root .smg-csv-dl-row {
    display: flex !important;
    gap: 8px !important;
    margin-bottom: 18px !important;
    flex-wrap: wrap !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    align-items: center !important;
}
.smg-root .smg-csv-dl-row .smg-btn-gen {
    flex: 1 1 auto !important;
    min-width: 160px !important;
}
.smg-root .smg-csv-dl-row .smg-abtn {
    flex: 0 0 auto !important;
    background-color: var(--smg-input-dk) !important;
    border-color: var(--smg-border) !important;
    color: var(--smg-text) !important;
}
.smg-root .smg-csv-dl-row .smg-abtn:hover {
    background-color: var(--smg-accent-r08) !important;
    border-color: var(--smg-accent) !important;
    color: var(--smg-accent) !important;
}
.smg-root .smg-csv-rows {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
}

/* CSV row details */
.smg-root .smg-csv-row-detail {
    background-color: var(--smg-input) !important;
    border: 1.5px solid var(--smg-border) !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    color: var(--smg-text) !important;
    padding: 0 !important;
}
.smg-root .smg-csv-row-detail summary {
    padding: 11px 14px !important;
    cursor: pointer !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    user-select: none !important;
    background-color: var(--smg-input-dk) !important;
    list-style: none !important;
    border: none !important;
    color: var(--smg-text) !important;
    line-height: 1.4 !important;
}
.smg-root .smg-csv-row-detail summary::-webkit-details-marker { display: none !important; }
.smg-root .smg-csv-row-detail.err          { border-color: rgba(239,68,68,.4) !important; }
.smg-root .smg-csv-row-detail.err summary  {
    background-color: #fef2f2 !important;
    color: #991b1b !important;
}
.smg-root .smg-csv-pre {
    max-height: 220px !important;
    overflow-y: auto !important;
    font-size: 11.5px !important;
    font-family: var(--smg-mono) !important;
    margin: 0 !important;
    padding: 14px !important;
    border: none !important;
    border-top: 1px solid var(--smg-border) !important;
    border-radius: 0 !important;
    background-color: var(--smg-code-bg) !important;
    color: var(--smg-code-fg) !important;
    line-height: 1.7 !important;
    white-space: pre-wrap !important;
    word-break: break-word !important;
}
/* Copy button inside a CSV row */
.smg-root .smg-csv-row-copy {
    display: block !important;
    margin: 8px 14px 12px !important;
    flex: 0 0 auto !important;
    background-color: var(--smg-input-dk) !important;
    border-color: var(--smg-border) !important;
    color: var(--smg-text) !important;
    width: auto !important;
    max-width: fit-content !important;
    padding: 6px 14px !important;
    font-size: 12px !important;
}
.smg-root .smg-csv-row-copy:hover {
    background-color: var(--smg-accent-r08) !important;
    border-color: var(--smg-accent) !important;
    color: var(--smg-accent) !important;
}
.smg-root .smg-csv-err-msg {
    font-size: 13px !important;
    color: #ef4444 !important;
    padding: 10px 14px !important;
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
    line-height: 1.5 !important;
    font-weight: 500 !important;
}

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

@media (max-width: 1024px) {
    .smg-root { padding: 28px 22px !important; }
}

@media (max-width: 960px) {
    .smg-root .smg-panels { grid-template-columns: 1fr !important; }
    .smg-root #smg-graph-panel { grid-template-columns: 1fr !important; }
    .smg-root .smg-pv { position: static !important; top: auto !important; }
    .smg-root .smg-c-b { max-height: 52vh !important; }
    .smg-root .smg-code-area { max-height: 46vh !important; }
    .smg-root .smg-graph-form-body { max-height: 340px !important; }
}

@media (max-width: 768px) {
    .smg-root { padding: 20px 16px !important; border-radius: 16px !important; }
    .smg-root .smg-hdr h2 { font-size: 22px !important; }
    .smg-root .smg-mode-btn { padding: 10px 12px !important; font-size: 12px !important; }
    .smg-root .smg-presets-grid { grid-template-columns: 1fr 1fr !important; }
    .smg-root .smg-import-row { flex-direction: column !important; align-items: stretch !important; }
    .smg-root .smg-import-go { width: 100% !important; }
    .smg-root .smg-graph-add-wrap { flex-wrap: wrap !important; }
    .smg-root .smg-graph-add-btn { width: 100% !important; }
}

@media (max-width: 640px) {
    .smg-root { padding: 16px 12px !important; border-radius: 12px !important; }
    .smg-root .smg-hdr h2 { font-size: 19px !important; }
    .smg-root .smg-hdr p { font-size: 13px !important; }
    .smg-root .smg-mode-btn { padding: 9px 10px !important; font-size: 11.5px !important; gap: 4px !important; }
    .smg-root .smg-mode-btn svg { display: none !important; }
    .smg-root .smg-sel-wrap { max-width: 100% !important; }
    .smg-root .smg-c-b { padding: 14px !important; max-height: 55vh !important; }
    .smg-root .smg-code-area { max-height: 42vh !important; }
    .smg-root .smg-foot { padding: 12px 14px !important; }
    .smg-root .smg-btn-gen { font-size: 13px !important; padding: 10px 14px !important; }
    .smg-root .smg-btn-rst { padding: 10px 13px !important; font-size: 12.5px !important; }
    .smg-root .smg-presets-grid { grid-template-columns: 1fr !important; padding: 14px !important; gap: 12px !important; }
    .smg-root .smg-csv-controls { flex-direction: column !important; align-items: stretch !important; }
    .smg-root .smg-csv-tmpl-btn { width: 100% !important; }
    .smg-root .smg-csv-dl-row { flex-direction: column !important; }
    .smg-root .smg-csv-dl-row .smg-btn-gen { min-width: unset !important; }
    .smg-root .smg-graph-form-body { max-height: 280px !important; }
    .smg-root .smg-acts { padding: 8px 12px !important; gap: 5px !important; }
    .smg-root .smg-abtn { min-width: 70px !important; padding: 7px 10px !important; font-size: 11px !important; }
}

@media (max-width: 480px) {
    .smg-root .smg-row,
    .smg-root .smg-row3 { grid-template-columns: 1fr !important; }
    .smg-root .smg-hdr h2 { font-size: 17px !important; }
    .smg-root .smg-gc-id { max-width: 90px !important; }
    .smg-root .smg-xref-item { flex-direction: column !important; align-items: flex-start !important; gap: 4px !important; }
    .smg-root .smg-graph-stack { max-height: 220px !important; }
    .smg-toast { left: 12px !important; right: 12px !important; bottom: 12px !important; max-width: none !important; }
}