/**
 * MolSystem Pro — Style widgetu frontend
 * Version: 1.0.0
 *
 * =============================================================================
 * AI MODIFICATION GUIDE
 * =============================================================================
 * Ten plik zawiera WSZYSTKIE style frontend widgetu.
 *
 * Organizacja sekcji:
 *   1. Reset i zmienne CSS
 *   2. Widget wrapper (kontener)
 *   3. Header (nazwa, meta, badge)
 *   4. Stage (obszar 3D z tłem)
 *   5. Panele szklane (glass panels)
 *   6. Kontrolki 3D (buttons)
 *   7. Tabs panel (dolna sekcja)
 *   8. Metric cards (właściwości)
 *   9. GHS styles
 *  10. LD50 styles
 *  11. GC-MS table
 *  12. Download bar
 *  13. Loading / Error states
 *  14. Responsywność (media queries)
 *  15. Dark mode (prefers-color-scheme)
 *
 * Aby zmienić kolorystykę → edytuj zmienne CSS w :root
 * Aby zmienić layout → edytuj sekcję Stage / Glass panels
 * =============================================================================
 */

/* =============================================================================
   1. Reset i zmienne CSS
   ============================================================================= */
.molsystem-widget,
.molsystem-widget * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.molsystem-widget {
    /* Główne zmienne — edytuj tutaj */
    --ms-primary:       #2255dd;
    --ms-primary-light: #dce8ff;
    --ms-bg:            #ffffff;
    --ms-bg-2:          #f5f7ff;
    --ms-bg-3:          #eef1ff;
    --ms-border:        rgba(200, 210, 240, 0.7);
    --ms-text:          #1a1a2e;
    --ms-text-2:        #445;
    --ms-text-3:        #778;
    --ms-shadow:        0 4px 24px rgba(60, 80, 160, 0.12);
    --ms-glass-bg:      rgba(255, 255, 255, 0.82);
    --ms-glass-border:  rgba(255, 255, 255, 0.95);
    --ms-radius:        12px;
    --ms-radius-sm:     8px;
    --ms-radius-xs:     5px;
    --ms-font:          -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;

    /* Kolory semantyczne */
    --ms-danger:        #cc2200;
    --ms-warning:       #ff8800;
    --ms-success:       #2a7a2a;
    --ms-info:          #1a5fc8;
}

/* =============================================================================
   2. Widget wrapper
   ============================================================================= */
.molsystem-widget {
    font-family: var(--ms-font);
    font-size:   14px;
    line-height: 1.5;
    color:       var(--ms-text);
    background:  var(--ms-bg);
    border-radius: var(--ms-radius);
    overflow:    hidden;
    border:      0.5px solid var(--ms-border);
    max-width:   100%;
    width:       100%;
}

/* =============================================================================
   3. Header
   ============================================================================= */
.molsystem-header {
    background:    #0d1535;
    padding:       13px 18px 11px;
    position:      relative;
    overflow:      hidden;
}

.molsystem-header::before {
    content:       '';
    position:      absolute;
    right:         -50px;
    top:           -50px;
    width:         200px;
    height:        200px;
    border-radius: 50%;
    background:    rgba(34, 85, 221, 0.18);
    pointer-events:none;
}

.ms-hdr-inner {
    position: relative;
    z-index:  1;
}

.ms-hdr-name {
    font-size:    22px;
    font-weight:  600;
    color:        #fff;
    line-height:  1.1;
    margin-bottom:4px;
}

.ms-hdr-name em {
    font-size:   12px;
    font-weight: 400;
    opacity:     0.5;
    font-style:  normal;
    margin-left: 8px;
}

.ms-hdr-meta {
    font-size:  9.5px;
    color:      rgba(255, 255, 255, 0.5);
    line-height:1.9;
}

.ms-hdr-badge {
    position:     absolute;
    top:          13px;
    right:        15px;
    background:   rgba(255, 255, 255, 0.1);
    border:       0.5px solid rgba(255, 255, 255, 0.2);
    padding:      3px 10px;
    border-radius:20px;
    font-size:    9px;
    color:        rgba(255, 255, 255, 0.75);
    z-index:      2;
}

.molsystem-loading-msg {
    color:     rgba(255, 255, 255, 0.7);
    font-size: 13px;
    padding:   8px 0;
}

/* =============================================================================
   4. Stage
   ============================================================================= */
.molsystem-stage {
    position:   relative;
    overflow:   hidden;
    background: linear-gradient(135deg, #c8d8f8 0%, #d8e4ff 30%, #e8eeff 60%, #d4e0ff 100%);
}

.molsystem-3d-canvas {
    display:   block;
    width:     100%;
    cursor:    grab;
    position:  relative;
    z-index:   1;
}

.molsystem-3d-canvas:active {
    cursor: grabbing;
}

.molsystem-gcbg-canvas {
    position:       absolute;
    top:            0;
    left:           0;
    pointer-events: none;
    z-index:        0;
}

/* =============================================================================
   5. Panele szklane (glass panels)
   ============================================================================= */
.molsystem-glass {
    position:   absolute;
    z-index:    5;
    background: var(--ms-glass-bg);
    border:     0.5px solid var(--ms-glass-border);
    border-radius: var(--ms-radius-sm);
    box-shadow: 0 4px 20px rgba(60,80,160,.10), inset 0 0.5px 0 rgba(255,255,255,1);
    padding:    9px 12px;
    max-width:  200px;
}

/* Panel info (TL) */
.molsystem-panel-info .ms-panel-title {
    font-size:    14px;
    font-weight:  700;
    color:        var(--ms-text);
    display:      block;
    margin-bottom:5px;
}

.ms-prop-row {
    display:         flex;
    justify-content: space-between;
    align-items:     baseline;
    font-size:       9px;
    line-height:     1.75;
    gap:             8px;
}

.ms-prop-row span:first-child { color: var(--ms-text-3); }
.ms-prop-row span:last-child  { font-weight: 600; font-size: 9.5px; }

.ms-verified-badge {
    display:      inline-block;
    background:   #e8f0ff;
    border:       0.5px solid #88aadd;
    color:        var(--ms-info);
    padding:      2px 7px;
    border-radius:10px;
    font-size:    8px;
    font-weight:  600;
    margin-top:   5px;
}

/* Panel skeletal (TR) */
.molsystem-panel-skel {
    width:       158px;
    text-align:  center;
    padding:     7px;
}

/* Panel legend (BL) */
.ms-leg-row {
    display:     flex;
    align-items: center;
    gap:         5px;
    font-size:   9px;
    color:       var(--ms-text-2);
    line-height: 1.75;
}

.ms-leg-dot {
    width:         10px;
    height:        10px;
    border-radius: 50%;
    flex-shrink:   0;
}

.ms-leg-line {
    width:         18px;
    height:        2.5px;
    flex-shrink:   0;
    border-radius: 1px;
    background:    #8899aa;
}

/* Panel GHS (BR) */
.molsystem-panel-ghs {
    text-align: center;
    min-width:  100px;
}

.ms-ghs-signal {
    font-size:    10px;
    font-weight:  700;
    color:        #c05000;
    margin-bottom:5px;
}

.ms-ghs-pics {
    display: flex;
    gap:     6px;
    justify-content: center;
}

.ms-ghs-item { text-align: center; }

.ms-ghs-item img {
    width:         42px;
    height:        42px;
    border-radius: 6px;
    border:        0.5px solid #eee;
    display:       block;
    transition:    transform 0.15s;
}

.ms-ghs-item img:hover { transform: scale(1.1); }

.ms-ghs-code {
    font-size:  7.5px;
    font-weight:700;
    display:    block;
    margin-top: 2px;
}

/* =============================================================================
   6. Kontrolki 3D
   ============================================================================= */
.molsystem-controls {
    position:   absolute;
    bottom:     0;
    left:       0;
    right:      0;
    z-index:    6;
    background: rgba(210, 220, 248, 0.82);
    border-top: 0.5px solid rgba(190, 205, 240, 0.7);
    display:    flex;
    gap:        4px;
    padding:    6px 9px;
    flex-wrap:  wrap;
}

.ms-btn {
    background:    rgba(255, 255, 255, 0.88);
    border:        0.5px solid rgba(170, 188, 230, 0.7);
    color:         #334;
    padding:       3px 9px;
    border-radius: 6px;
    font-size:     10px;
    cursor:        pointer;
    transition:    all 0.12s;
    font-family:   var(--ms-font);
    line-height:   1.4;
}

.ms-btn:hover       { background: #fff; }
.ms-btn.ms-btn-on   { background: var(--ms-primary-light); border-color: #88aaff; color: var(--ms-info); font-weight: 600; }

/* =============================================================================
   7. Tabs panel
   ============================================================================= */
.molsystem-tabs-wrap {
    background:  var(--ms-bg);
    border-top:  0.5px solid var(--ms-border);
}

.molsystem-tab-header {
    display:        flex;
    border-bottom:  1.5px solid var(--ms-border);
    padding:        0 6px;
    overflow-x:     auto;
    scrollbar-width:none;
    gap:            0;
    background:     var(--ms-bg);
}

.molsystem-tab-header::-webkit-scrollbar { display: none; }

.ms-tab-btn {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    padding:        8px 11px;
    cursor:         pointer;
    border:         none;
    background:     transparent;
    border-bottom:  2.5px solid transparent;
    flex-shrink:    0;
    transition:     all 0.15s;
    font-family:    var(--ms-font);
    font-size:      8.5px;
    font-weight:    500;
    color:          var(--ms-text-3);
    white-space:    nowrap;
    line-height:    1.4;
}

.ms-tab-btn:hover   { background: var(--ms-bg-2); }
.ms-tab-btn.active  { border-bottom-color: var(--ms-primary); color: var(--ms-primary); font-weight: 600; }

.ms-tab-body {
    display:  none;
    padding:  12px 14px 14px;
    animation:ms-fadein 0.15s;
}

.ms-tab-body.active { display: block; }

@keyframes ms-fadein {
    from { opacity: 0; transform: translateY(-3px); }
    to   { opacity: 1; transform: none; }
}

/* =============================================================================
   8. Metric cards (właściwości)
   ============================================================================= */
.ms-prop-grid {
    display:               grid;
    grid-template-columns: repeat(4, 1fr);
    gap:                   6px;
}

.ms-metric-card {
    background:    var(--ms-bg-2);
    border-radius: var(--ms-radius-sm);
    padding:       7px 9px;
    border:        0.5px solid var(--ms-border);
}

.ms-metric-card label {
    font-size:    8px;
    color:        var(--ms-text-3);
    display:      block;
    margin-bottom:2px;
}

.ms-metric-card value {
    font-size:  13px;
    font-weight:600;
    color:      var(--ms-text);
    display:    block;
}

.ms-metric-card a {
    font-size:       12px;
    font-weight:     600;
    color:           var(--ms-primary);
    text-decoration: none;
}

.ms-metric-card a:hover { text-decoration: underline; }

/* =============================================================================
   9. GHS styles (w tabs)
   ============================================================================= */
.ms-sw {
    display:       inline-flex;
    align-items:   center;
    gap:           5px;
    background:    #fff8f0;
    border-left:   3px solid var(--ms-warning);
    border-radius: 0 6px 6px 0;
    color:         #c05000;
    padding:       5px 10px;
    font-size:     10.5px;
    font-weight:   600;
    margin-bottom: 8px;
}

.ms-ghs-big-row {
    display:       flex;
    gap:           8px;
    margin-bottom: 10px;
}

.ms-ghs-big { text-align: center; }

.ms-h2col {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   0 12px;
}

.ms-stmt-hd {
    font-size:    9.5px;
    font-weight:  600;
    margin:       4px 0 3px;
}

.ms-h-stmt {
    font-size:     9px;
    margin:        2px 0;
    padding:       2px 6px 2px 8px;
    background:    #fff5f5;
    border-left:   2px solid #ffaaaa;
    border-radius: 0 3px 3px 0;
    line-height:   1.4;
    color:         var(--ms-danger);
}

.ms-p-stmt {
    font-size:     9px;
    margin:        2px 0;
    padding:       2px 6px 2px 8px;
    background:    #f0fff4;
    border-left:   2px solid #88cc88;
    border-radius: 0 3px 3px 0;
    line-height:   1.4;
    color:         #005500;
}

/* =============================================================================
   10. LD50 styles
   ============================================================================= */
.ms-ld-row {
    background:    var(--ms-bg-2);
    border-left:   3px solid #cc4400;
    border-radius: 0 6px 6px 0;
    padding:       5px 8px;
    margin:        3px 0;
    font-size:     9.5px;
    line-height:   1.5;
}

.ms-ld-row b {
    color:   #882200;
    font-size:10.5px;
    display: block;
}

.ms-disc {
    background:    #fffbf0;
    border:        0.5px solid #ffe08a;
    border-radius: 7px;
    padding:       6px 9px;
    font-size:     8.5px;
    color:         #886600;
    margin-top:    8px;
    line-height:   1.6;
}

/* =============================================================================
   11. GC-MS table
   ============================================================================= */
.ms-gcms-tbl {
    width:           100%;
    border-collapse: collapse;
    font-size:       9.5px;
}

.ms-gcms-tbl th {
    background:   var(--ms-bg-2);
    padding:      4px 6px;
    font-weight:  600;
    font-size:    9px;
    color:        var(--ms-text-2);
    text-align:   left;
    border-bottom:0.5px solid var(--ms-border);
}

.ms-gcms-tbl td {
    padding:      2.5px 6px;
    border-bottom:0.5px solid var(--ms-border);
}

.ms-gcms-tbl tr:hover td { background: var(--ms-bg-2); }
.ms-bp { font-weight: 700; color: #c03518; }

/* HPLC */
.ms-hplc-warn {
    background:    #fffbf0;
    border:        0.5px solid #ffe08a;
    border-radius: 6px;
    padding:       5px 8px;
    font-size:     8.5px;
    color:         #886600;
    margin-bottom: 8px;
}

/* Sources */
.ms-src-conf {
    background:    #e8f0ff;
    border-radius: 6px;
    padding:       5px 9px;
    font-size:     9px;
    color:         var(--ms-info);
    font-weight:   600;
    margin-bottom: 8px;
}

.ms-src-row {
    display:     flex;
    align-items: center;
    gap:         6px;
    margin:      3px 0;
    font-size:   9px;
    line-height: 1.7;
}

.ms-src-dot {
    width:         8px;
    height:        8px;
    border-radius: 50%;
    flex-shrink:   0;
}

.ms-src-row a {
    color:           var(--ms-primary);
    font-size:       9px;
    text-decoration: none;
}

.ms-src-row a:hover { text-decoration: underline; }

.ms-src-note {
    font-size: 8px;
    color:     var(--ms-text-3);
    margin-top:5px;
}

.ms-src-note a {
    color:           var(--ms-primary);
    font-size:       8px;
    text-decoration: none;
}

.ms-src-meta {
    font-size:    7.5px;
    color:        var(--ms-text-3);
    margin-top:   6px;
    border-top:   0.5px solid var(--ms-border);
    padding-top:  5px;
    line-height:  1.7;
    word-break:   break-all;
}

/* =============================================================================
   12. Download bar
   ============================================================================= */
.molsystem-download-bar {
    background: var(--ms-bg-2);
    border-top: 0.5px solid var(--ms-border);
    padding:    7px 14px;
    display:    flex;
    gap:        6px;
    align-items:center;
    flex-wrap:  wrap;
}

.ms-dl-label {
    font-size:   10px;
    color:       var(--ms-text-2);
    font-weight: 600;
    margin-right:2px;
}

.ms-dl-btn {
    background:    var(--ms-bg);
    border:        0.5px solid rgba(190, 205, 235, 0.9);
    color:         var(--ms-text-2);
    padding:       4px 11px;
    border-radius: 7px;
    font-size:     10px;
    cursor:        pointer;
    transition:    all 0.12s;
    font-family:   var(--ms-font);
}

.ms-dl-btn:hover {
    background:   var(--ms-primary-light);
    border-color: #88aaff;
    color:        var(--ms-info);
}

.ms-dl-btn.ms-dl-primary {
    background:  var(--ms-primary-light);
    border-color:#88aaff;
    color:       var(--ms-info);
    font-weight: 600;
}

/* =============================================================================
   13. Loading / Error states
   ============================================================================= */
.molsystem-loading {
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             12px;
    padding:         60px 20px;
    color:           var(--ms-text-3);
    font-size:       13px;
    min-height:      200px;
}

.molsystem-spinner {
    width:          24px;
    height:         24px;
    border-radius:  50%;
    border:         2.5px solid var(--ms-border);
    border-top-color: var(--ms-primary);
    animation:      ms-spin 0.7s linear infinite;
    display:        inline-block;
    flex-shrink:    0;
}

@keyframes ms-spin { to { transform: rotate(360deg); } }

.molsystem-error {
    color:         var(--ms-danger);
    background:    #fff5f5;
    border:        0.5px solid #ffcccc;
    border-radius: var(--ms-radius-sm);
    padding:       10px 14px;
    font-size:     13px;
    margin:        8px;
}

/* =============================================================================
   14. Responsywność
   ============================================================================= */

/* Tablet (≤768px) */
@media (max-width: 768px) {
    .ms-prop-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .ms-hdr-badge {
        display: none; /* skryj badge na małych ekranach */
    }

    .ms-h2col {
        grid-template-columns: 1fr;
    }
}

/* Mobile (≤480px) */
@media (max-width: 480px) {
    .molsystem-widget { font-size: 13px; }

    .ms-hdr-name { font-size: 18px; }

    .ms-prop-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 4px;
    }

    .ms-metric-card { padding: 5px 7px; }
    .ms-metric-card value { font-size: 11px; }

    .molsystem-controls {
        padding: 5px 7px;
        gap:     3px;
    }

    .ms-btn { padding: 3px 7px; font-size: 9.5px; }

    .molsystem-download-bar {
        padding: 5px 10px;
        gap:     4px;
    }

    .ms-dl-btn { padding: 3px 8px; font-size: 9.5px; }

    .ms-tab-btn { padding: 6px 8px; font-size: 8px; }

    .molsystem-glass { max-width: 150px; padding: 6px 9px; }

    .ms-ghs-item img,
    .molsystem-panel-ghs .ms-ghs-item img { width: 36px; height: 36px; }

    .ms-h2col { grid-template-columns: 1fr; }
}

/* Very small (≤360px) */
@media (max-width: 360px) {
    .ms-prop-grid { grid-template-columns: 1fr 1fr; }
    .molsystem-glass { display: none; } /* skryj overlays na mini ekranach */
    .molsystem-panel-ghs { display: none; }
}

/* =============================================================================
   15. Dark mode
   ============================================================================= */
@media (prefers-color-scheme: dark) {
    .molsystem-widget {
        --ms-bg:         #1a1d2e;
        --ms-bg-2:       #222538;
        --ms-bg-3:       #1e2135;
        --ms-border:     rgba(80, 100, 160, 0.4);
        --ms-text:       #e8eeff;
        --ms-text-2:     #b0b8d8;
        --ms-text-3:     #7888aa;
        --ms-glass-bg:   rgba(30, 35, 60, 0.88);
        --ms-glass-border:rgba(80, 100, 160, 0.5);
    }

    .molsystem-stage {
        background: linear-gradient(135deg, #1a2240 0%, #1e2a50 30%, #202848 60%, #1c2640 100%);
    }

    .ms-btn {
        background: rgba(40, 50, 80, 0.88);
        border-color: rgba(80, 100, 160, 0.6);
        color: #b0b8d8;
    }

    .ms-btn.ms-btn-on {
        background: rgba(34, 85, 221, 0.25);
        color: #88aaff;
    }

    .ms-metric-card {
        background: var(--ms-bg-2);
        border-color: var(--ms-border);
    }

    .ms-metric-card value { color: var(--ms-text); }
    .ms-metric-card label { color: var(--ms-text-3); }

    .ms-gcms-tbl th { background: var(--ms-bg-2); color: var(--ms-text-2); }

    .ms-disc     { background: #2a2500; border-color: #554400; color: #ccaa44; }
    .ms-sw       { background: #2a1800; color: #ff9944; }
    .ms-h-stmt   { background: #2a1010; color: #ff8877; }
    .ms-p-stmt   { background: #0a200a; color: #66cc66; }
    .ms-hplc-warn { background: #2a2000; color: #ccaa44; }
}

/* =============================================================================
   16. Breakpoints przez ResizeObserver (klasy dodawane przez JS)
   Niezależne od szerokości okna — reagują na szerokość KOLUMNY widgetu
   ============================================================================= */

/* Medium: 450–699px (np. sidebar WooCommerce, Elementor 1/2) */
.molsystem-widget.ms-bp-medium .molsystem-glass {
    max-width: 160px;
    padding:   7px 9px;
    font-size: 9px;
}
.molsystem-widget.ms-bp-medium .ms-panel-title { font-size: 12px; }
.molsystem-widget.ms-bp-medium .ms-prop-row    { font-size: 8.5px; }
.molsystem-widget.ms-bp-medium .ms-hdr-name    { font-size: 18px; }
.molsystem-widget.ms-bp-medium .ms-hdr-badge   { display: none; }
.molsystem-widget.ms-bp-medium .ms-prop-grid   { grid-template-columns: repeat(2, 1fr); }
.molsystem-widget.ms-bp-medium .ms-tab-btn     { padding: 6px 8px; font-size: 8px; }

/* Small: 320–449px (mobile, Elementor 1/3) */
.molsystem-widget.ms-bp-small .molsystem-glass  { display: none !important; }
.molsystem-widget.ms-bp-small .molsystem-gcbg-canvas { display: none; }
.molsystem-widget.ms-bp-small .ms-hdr-name     { font-size: 16px; }
.molsystem-widget.ms-bp-small .ms-hdr-meta     { font-size: 8.5px; }
.molsystem-widget.ms-bp-small .ms-hdr-badge    { display: none; }
.molsystem-widget.ms-bp-small .ms-prop-grid    { grid-template-columns: 1fr 1fr; gap: 4px; }
.molsystem-widget.ms-bp-small .ms-metric-card  { padding: 5px 6px; }
.molsystem-widget.ms-bp-small .ms-metric-card value { font-size: 11px; }
.molsystem-widget.ms-bp-small .ms-tab-btn      { padding: 5px 7px; font-size: 8px; }
.molsystem-widget.ms-bp-small .molsystem-controls { padding: 4px 7px; }
.molsystem-widget.ms-bp-small .ms-btn          { padding: 2px 7px; font-size: 9px; }
.molsystem-widget.ms-bp-small .molsystem-download-bar { padding: 5px 9px; gap: 4px; }
.molsystem-widget.ms-bp-small .ms-dl-btn       { padding: 3px 7px; font-size: 9px; }
.molsystem-widget.ms-bp-small .ms-h2col        { grid-template-columns: 1fr; }

/* Mini: <320px */
.molsystem-widget.ms-bp-mini .molsystem-glass   { display: none !important; }
.molsystem-widget.ms-bp-mini .molsystem-gcbg-canvas { display: none; }
.molsystem-widget.ms-bp-mini .molsystem-header  { padding: 10px 12px 8px; }
.molsystem-widget.ms-bp-mini .ms-hdr-name       { font-size: 15px; }
.molsystem-widget.ms-bp-mini .ms-hdr-meta       { display: none; }
.molsystem-widget.ms-bp-mini .ms-prop-grid      { grid-template-columns: 1fr 1fr; gap: 3px; }
.molsystem-widget.ms-bp-mini .ms-metric-card    { padding: 4px 5px; }
.molsystem-widget.ms-bp-mini .ms-metric-card value { font-size: 10px; }
.molsystem-widget.ms-bp-mini .ms-tab-btn        { padding: 4px 6px; font-size: 7.5px; }
.molsystem-widget.ms-bp-mini .molsystem-download-bar { display: none; }
.molsystem-widget.ms-bp-mini .ms-ghs-big img   { width: 36px; height: 36px; }
.molsystem-widget.ms-bp-mini .ms-h2col         { grid-template-columns: 1fr; }

/* Touch device optimization */
@media (hover: none) and (pointer: coarse) {
    /* Większe przyciski dla palców */
    .ms-btn    { padding: 6px 12px; font-size: 11px; min-height: 36px; }
    .ms-tab-btn { padding: 10px 12px; }
    .ms-dl-btn  { padding: 6px 12px; min-height: 36px; }

    /* Wyłącz hover efekty na touch */
    .ms-ghs-item img:hover { transform: none; }
}

/* =============================================================================
   17. Placeholder gdy brak geometrii 3D (jony, sole nieorganiczne)
   ============================================================================= */
.molsystem-no3d-placeholder {
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    padding:         40px 20px;
    text-align:      center;
    min-height:      180px;
    background:      linear-gradient(135deg, #e8eeff 0%, #eef1ff 100%);
    width: 100%;
}

.ms-no3d-symbol {
    font-size:    52px;
    font-weight:  700;
    color:        #2255dd;
    letter-spacing: 2px;
    line-height:  1;
    margin-bottom:12px;
    font-family:  monospace;
    text-shadow:  0 2px 8px rgba(34,85,221,0.18);
}

.ms-no3d-name {
    font-size:   16px;
    font-weight: 600;
    color:       var(--ms-text, #1a1a2e);
    margin-bottom: 8px;
}

.ms-no3d-note {
    font-size:  11px;
    color:      var(--ms-text-3, #889);
    background: rgba(255,255,255,0.7);
    padding:    4px 10px;
    border-radius: 10px;
    border:     0.5px solid var(--ms-border, #e0e4f0);
}