/**
 * 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 `--ms-*` na `.molgod-widget`
 *   (26 deklaracji; reguły `:root` w tym pliku NIE MA i nigdy nie było —
 *   dodanie jej nic nie da, bo `.molgod-widget` ma wyższą specyficzność)
 * Aby zmienić layout → edytuj sekcję Stage / Glass panels
 * =============================================================================
 */

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

/* =============================================================================
   v1.5.5: CSS ISOLATION RESET — widget jest odporny na motywy WordPress
   Motywy często wstawiają agresywne style na * i elementach — to je anuluje.
   ============================================================================= */
.molgod-widget,
.molgod-widget *,
.molgod-widget *::before,
.molgod-widget *::after {
    box-sizing: border-box !important;
    margin: 0;
    padding: 0;
    text-shadow: none;
    font-family: inherit;
    line-height: inherit;
}
.molgod-widget button,
.molgod-widget input,
.molgod-widget select,
.molgod-widget textarea {
    background: none;
    border: 0;
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    padding: 0;
    text-transform: none;
}
.molgod-widget details summary {
    list-style: none !important;
}
.molgod-widget details summary::-webkit-details-marker {
    display: none !important;
}
.molgod-widget ul,
.molgod-widget ol {
    list-style: none;
}
.molgod-widget img {
    max-width: none;  /* WordPress motywy lubią max-width:100% — psuje mini-viewer */
    height: auto;
}
/* Koniec CSS isolation reset */

.molgod-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
   ============================================================================= */
.molgod-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
   ============================================================================= */
.molgod-header {
    background:    linear-gradient(135deg, #eef4ff 0%, #e3ecfb 100%);
    padding:       13px 18px 11px;
    position:      relative;
    overflow:      hidden;
}

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

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

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

.ms-hdr-name em {
    font-size:   12px;
    font-weight: 400;
    color:       #5a6b8c;
    opacity:     1;
    font-style:  normal;
    margin-left: 8px;
}

.ms-hdr-meta {
    font-size:  9.5px;
    color:      #47557a;
    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;
}

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

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

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

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

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

/* =============================================================================
   5. Panele szklane (glass panels)
   ============================================================================= */
.molgod-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) */
.molgod-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) */
.molgod-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) */
.molgod-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
   ============================================================================= */
.molgod-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
   ============================================================================= */
.molgod-tabs-wrap {
    background:  var(--ms-bg);
    border-top:  0.5px solid var(--ms-border);
}

.molgod-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);
}

.molgod-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
   ============================================================================= */
.molgod-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 (v1.3.1: shimmer skeleton — Material Design style)
   ============================================================================= */
.molgod-loading {
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    gap:             16px;
    padding:         40px 20px;
    color:           var(--ms-text-3);
    font-size:       12px;
    min-height:      200px;
    position:        relative;
    overflow:        hidden;
}

/* Shimmer overlay (Material Design loading skeleton) */
.molgod-loading::before {
    content:    '';
    position:   absolute;
    top:        0;
    left:       -100%;
    width:      200%;
    height:     100%;
    background: linear-gradient(
        90deg,
        transparent 20%,
        rgba(180, 200, 240, 0.15) 40%,
        rgba(180, 200, 240, 0.25) 50%,
        rgba(180, 200, 240, 0.15) 60%,
        transparent 80%
    );
    animation:  ms-shimmer 2.2s ease-in-out infinite;
    z-index:    1;
    pointer-events: none;
}

@keyframes ms-shimmer {
    0%   { transform: translateX(-30%); }
    100% { transform: translateX(30%); }
}

.molgod-spinner {
    width:          20px;
    height:         20px;
    border-radius:  50%;
    border:         2px solid var(--ms-border);
    border-top-color: var(--ms-primary);
    animation:      ms-spin 0.8s linear infinite;
    display:        inline-block;
    flex-shrink:    0;
    opacity:        0.6;
}

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

.molgod-loading span {
    opacity:    0.7;
    letter-spacing: 0.3px;
    font-weight: 500;
}

.molgod-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) {
    .molgod-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; }

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

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

    .molgod-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; }

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

    .ms-ghs-item img,
    .molgod-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; }
    .molgod-glass { display: none; } /* skryj overlays na mini ekranach */
    .molgod-panel-ghs { display: none; }
}

/* =============================================================================
   15. Dark mode — WYŁĄCZONY (v1.1)
   ============================================================================= */
/* User wymaga zawsze białego tła. Dark mode powodował grafitowe tło na mobile
   gdy system mial dark theme wlaczony. Widget zawsze renderowany na jasnym tle
   dla spojnosci wygladu na wszystkich urzadzeniach. */

/* =============================================================================
   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) */

/* Breakpoint pelny >= 700px (domyslny - Floating Glass ze wszystkimi panelami) */
.molgod-widget.ms-bp-full .molgod-glass {
    display: block;
}
.molgod-widget.ms-bp-full .molgod-controls {
    display: flex;
}
.molgod-widget.ms-bp-full .molgod-download-bar {
    display: flex;
}
.molgod-widget.ms-bp-medium .molgod-glass {
    max-width: 160px;
    padding:   7px 9px;
    font-size: 9px;
}
.molgod-widget.ms-bp-medium .ms-panel-title { font-size: 12px; }
.molgod-widget.ms-bp-medium .ms-prop-row    { font-size: 8.5px; }
.molgod-widget.ms-bp-medium .ms-hdr-name    { font-size: 18px; }
.molgod-widget.ms-bp-medium .ms-hdr-badge   { display: none; }
.molgod-widget.ms-bp-medium .ms-prop-grid   { grid-template-columns: repeat(2, 1fr); }
.molgod-widget.ms-bp-medium .ms-tab-btn     { padding: 6px 8px; font-size: 8px; }

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

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

    /* Pinch-zoom musi działać na canvas — touch-action manipulation */
    .molgod-3d-canvas { touch-action: none; }
}

/* =============================================================================
   16b. Mobile responsive @media (max-width:768px) — v1.1
   Force biale tlo, layout vertical, panele widoczne ale mniejsze.
   ============================================================================= */
@media (max-width: 768px) {
    .molgod-widget {
        --ms-bg:         #ffffff;
        --ms-bg-2:       #f4f6fb;
        --ms-bg-3:       #ffffff;
        --ms-text:       #1a1d2e;
        --ms-text-2:     #444a5c;
        --ms-text-3:     #6a7286;
    }

    /* WYMUSZAM BIALE tlo stage'u na mobile (override gradient) */
    .molgod-stage {
        background: linear-gradient(135deg, #ffffff 0%, #f6f8ff 50%, #eef2ff 100%) !important;
    }

    /* Header trochę mniejszy, bez badge */
    .molgod-widget .ms-hdr-name  { font-size: 17px; line-height: 1.2; }
    .molgod-widget .ms-hdr-meta  { font-size: 9.5px; }
    .molgod-widget .ms-hdr-badge { display: none; }
    .molgod-widget .molgod-header { padding: 11px 14px 9px; }

    /* Panele glass: mniejsze, mniej padding */
    .molgod-widget .molgod-glass {
        max-width: 145px;
        padding: 7px 9px;
        font-size: 9.5px;
    }
    .molgod-widget .ms-panel-title { font-size: 12px; }
    .molgod-widget .ms-prop-row    { font-size: 8.5px; }

    /* Props grid 2 kolumny */
    .molgod-widget .ms-prop-grid { grid-template-columns: 1fr 1fr; gap: 5px; }
    .molgod-widget .ms-metric-card value { font-size: 11px; }

    /* Wieksze przyciski touch */
    .molgod-widget .molgod-controls { padding: 6px 8px; gap: 4px; flex-wrap: wrap; }
    .molgod-widget .ms-btn          { padding: 7px 11px; font-size: 10px; min-height: 38px; }
    .molgod-widget .ms-tab-btn      { padding: 9px 10px; font-size: 9.5px; }
}

/* Bardzo male telefony: <480px — schowac panele info i skel,
   widget jest tylko 3D + header + tabs */
@media (max-width: 480px) {
    .molgod-widget .molgod-panel-info,
    .molgod-widget .molgod-panel-skel,
    .molgod-widget .molgod-panel-leg { display: none !important; }
    .molgod-widget .molgod-gcbg-canvas { display: none !important; }
    /* PLOTNO WYZSZE NA TELEFONIE — 2026-09-08.
       Zmierzone: plotno mialo 300 px przy ekranie 760 px, a paski wokol niego
       725 px. Po scisnieciu przyciskow pasek oddaje okolo 135 px, wiec mimo
       podniesienia plotna o 80 px caly widget i tak sie SKRACA, a molekula
       dostaje wiecej miejsca. */
    .molgod-widget .molgod-stage { min-height: 400px; }
    /* v1.6.2: Mobile action buttons — zapewniają 44px touch target */
    .molgod-widget .molgod-btn-fs,
    .molgod-widget .molgod-btn-close { min-width: 44px !important; min-height: 44px !important; }
    /* Akordeony na mobile — większe padding dla palca */
    .molgod-accordions summary { padding: 16px 18px !important; min-height: 48px; }
}

/* v1.6.2: Landscape mobile (np. iPhone poziomo) — panele info/skel ukryte, widget zajmuje 100% wysokości */
@media (max-height: 500px) and (orientation: landscape) {
    .molgod-widget .molgod-panel-info,
    .molgod-widget .molgod-panel-skel { display: none !important; }
    .molgod-widget .molgod-stage { min-height: 70vh; max-height: 85vh; }
    .molgod-widget .molgod-panel-ghs { top: auto !important; bottom: 8px !important; right: 60px !important; }
}

/* Wymusza biale tlo canvas zawsze (nie tylko mobile) */
.molgod-3d-canvas {
    background: transparent;
}

/* =============================================================================
   16c. Print CSS (v1.3.2) — etykiety bezpieczeństwa, karty produktu
   ============================================================================= */
@media print {
    .molgod-widget {
        break-inside:       avoid;
        page-break-inside:  avoid;
        border:             1px solid #ccc !important;
        box-shadow:         none !important;
    }
    .molgod-3d-canvas,
    .molgod-gcbg-canvas,
    .molgod-controls,
    .molgod-download-bar { display: none !important; }

    .molgod-glass { position: static !important; max-width: 100% !important; }
    .molgod-panel-info { margin-bottom: 10px; }
    .molgod-panel-skel { text-align: center; margin: 10px auto; }
    .molgod-panel-skel img { max-width: 250px; height: auto; }
    .molgod-panel-legend,
    .molgod-panel-ghs { margin-top: 10px; }
    .molgod-header { background: #fff !important; color: #000 !important; padding: 10px !important; }
    .ms-hdr-name { color: #000 !important; }
    .ms-hdr-meta { color: #333 !important; }
    .molgod-tabs-wrap { break-inside: avoid; }
    .ms-tab-header { display: none !important; }
    .ms-tab-body { display: block !important; border: none !important; padding: 10px 0 !important; }
    .ms-tab-body:not(.active) { display: block !important; }
    .molgod-stage { min-height: 0 !important; background: #fff !important; }
    .molgod-product-links { display: none !important; }

    .molgod-no3d-placeholder { background: #fff !important; }
    .ms-no3d-symbol { color: #000 !important; }
}

/* =============================================================================
   17. Placeholder gdy brak geometrii 3D (jony, sole nieorganiczne)
   ============================================================================= */
.molgod-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);
}

/* 2026-07-04 operator: naglowek widgetu — granat #0d1535 byl NIECZYTELNY. Decyzja operatora:
   ZMIANA TLA na jasny pastel (jak akordeony) + ciemny czytelny tekst. Reinforcement !important
   (na wypadek nadpisania przez inne CSS / stary cache). */
.molgod-header { background: linear-gradient(135deg, #eef4ff 0%, #e3ecfb 100%) !important; }
.molgod-header .ms-hdr-name { color: #17203a !important; }
.molgod-header .ms-hdr-name em, .molgod-header .ms-hdr-brand { color: #5a6b8c !important; opacity: 1 !important; }
.molgod-header .ms-hdr-meta { color: #47557a !important; }
.molgod-header a { color: #2952cc !important; }

/* =============================================================================
   18. WARSTWA DOTYKOWA  (.mg-dotyk)  — 2026-09-07

   ZASADA: wszystko, co ma byc inne pod palcem niz pod myszka, wisi na JEDNEJ
   klasie .mg-dotyk. Klase nadaje viewer.js w _onResize (pointer:coarse LUB
   szerokosc <= 768). Jesli cos ma dzialac inaczej pod palcem — dopisz to TUTAJ,
   nie rozpraszaj po innych sekcjach i nie dokladaj drugiego mechanizmu.

   DLACZEGO !important (zmierzone CSSOM-em na zywej stronie 2026-09-07):
   widget-upgrade.css:4 deklaruje
       .molgod-widget .ms-btn { padding: 7px 14px !important; font-size: 12px !important; }
   a w @media(max-width:640px) obniza font do 11px — rowniez !important.
   !important bije KAZDA specyficznosc, wiec czysta reguła (0,3,0) przegrywa.
   Przy dwoch !important rozstrzyga specyficznosc, dlatego .molgod-widget.mg-dotyk
   (0,3,0) wygrywa z .molgod-widget (0,2,0). min-height NIE potrzebuje !important —
   widget-upgrade.css go nie deklaruje (dlatego samo min-height dzialalo, a font nie:
   ten wlasnie rozjazd ujawnil cala mechanike).

   PELNA MAPA KONKURENCJI o rozmiar .ms-btn — SZESC regul w DWOCH plikach:
     viewer.css:360        .ms-btn                        font 10px
     viewer.css:810        @480px .ms-btn                 font 9.5px
     viewer.css:883        .ms-bp-small .ms-btn           font 9px   (0,3,0)
     viewer.css:905        @coarse .ms-btn                font 11px  (0,1,0)
     viewer.css:956        @768px .molgod-widget .ms-btn  font 10px  (0,2,0)
     widget-upgrade.css:4  .molgod-widget .ms-btn         font 12px  (0,2,0) !important  <-- WYGRYWAL
   widget-upgrade.css to warstwa nadpisan oparta na !important — kazda nowa regula
   dotykajaca WYGLADU .ms-btn musi sie z nia liczyc.

   NORMA: 44x44 px (Apple HIG), 48dp (Material), WCAG 2.5.8 minimum 24x24.
   viewer.css sekcja 16 stosowala juz 44px do .molgod-btn-fs/.molgod-btn-close
   (komentarz "v1.6.2") — sekcja 18 domyka to dla POZOSTALYCH przyciskow.
   ============================================================================= */

.molgod-widget.mg-dotyk .ms-btn,
.molgod-widget.mg-dotyk .ms-dl-btn {
    /*
     * CEL DOTYKOWY 34 px — SWIADOMY KOMPROMIS, decyzja Operatora 2026-09-08.
     *
     * Poprzednio 44 px przy foncie 13 px. Zmierzone Playwrightem na publicznej
     * stronie: trzynascie przyciskow zawijalo sie na PIEC rzedow, pasek mial
     * 263 px przy plotnie majacym 300, a wszystkie paski razem 725 px, czyli
     * 242 % wysokosci plotna. Molekula — powod, dla ktorego ktos tu przychodzi —
     * dostawala 29 % pionu widgetu i dotykala gornej krawedzi.
     *
     * 34 px to mniej niz 44 px (Apple HIG) i 48 dp (Material), ale wiecej niz
     * minimum 24x24 px z WCAG 2.5.8 na poziomie AA. Zapisuje to jako kompromis
     * zazadany wprost przez Operatora po obejrzeniu stanu z 44 px, a nie jako
     * przeoczenie normy.
     *
     * Font i padding schodza razem z wysokoscia, bo to one decyduja o liczbie
     * rzedow: 13 przyciskow miesci sie teraz w trzech rzedach zamiast pieciu.
     */
    /* !important konieczne: contrast-fixes.css:222 deklaruje
       `button, ... { min-height: 44px !important; }` - goly selektor
       `button` o specyficznosci (0,0,1), ale Z !important. Deklaracja
       z !important bije kazda bez niego niezaleznie od specyficznosci,
       wiec ta regula (0,3,0) bez !important przegrywala. Miedzy dwiema
       deklaracjami z !important rozstrzyga juz specyficznosc - ta wygrywa.
       Zmierzone: font i padding weszly za pierwszym razem, bo MIALY
       !important, a min-height zostalo na 44 px. Ten wlasnie rozjazd
       wskazal winowajce. */
    min-height: 34px !important;
    padding:    5px 6px !important;
    white-space: normal !important;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size:  11px !important;
    line-height: 1.25 !important;
}

.molgod-widget.mg-dotyk .ms-tab-btn {
    /* Zakladki schodza razem z przyciskami — inaczej pasek zakladek zostaje
       najwyzszym elementem widgetu i problem tylko sie przesuwa. */
    min-height: 36px !important;
    padding:    7px 11px !important;
    font-size:  11.5px !important;
}

/* Odstepy, zeby sasiadujace cele nie zlewaly sie pod palcem */
.molgod-widget.mg-dotyk .molgod-controls {
    /* SIATKA, nie zawijany ciag. Zmierzone i obejrzane: przy flex-wrap
       przyciski mialy rozne szerokosci i strzepily sie na piec nierownych
       rzedow - to wlasnie wygladalo nieporzadnie, nie sama ich liczba.
       Rowne kolumny daja rowne rzedy i prosta krawedz. Etykieta moze zlamac
       sie na dwie linie zamiast rozpychac kolumne, dlatego white-space:normal
       i niski line-height przy przyciskach nizej. */
    display:               grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items:           stretch;
    gap:     5px;
    padding: 6px 8px;
}
.molgod-widget.mg-dotyk .molgod-download-bar { gap: 5px; }

/* PASEK NARZEDZI POD PLOTNEM, NIE NA NIM — 2026-09-08
   Zmierzone po wprowadzeniu celow 44 px: pasek zawija sie na tyle rzedow, ze
   na telefonie 390 zajmowal 86% wysokosci plotna, a na 360 az 103% (byl WYZSZY
   niz samo plotno). elementFromPoint w miejscu KAZDEGO atomu zwracal
   BUTTON.ms-btn zamiast canvas — 4 z 4 atomow bylo nieklikalnych, wiec
   podglad atomu i zaznaczenie wiazania byly na telefonie NIEDOSTEPNE.
   Powiekszenie celow dotykowych BEZ tej zmiany pogarsza uzytecznosc zamiast
   ja poprawiac: wieksze przyciski = wiecej rzedow = wiecej zaslonietej molekuly.
   Na myszy pasek zostaje plywajacy (13% wysokosci, zero zakrytych atomow). */
.molgod-widget.mg-dotyk .molgod-controls {
    position:      static;
    background:    #f7f9fd;
    border-top:    1px solid #e3e9f4;
    border-radius: 0;
    padding:       9px 10px;
}

.molgod-widget.mg-dotyk .molgod-download-bar {
    position:   static;
    background: #f7f9fd;
    padding:    8px 10px 10px;
}

/* =============================================================================
   19. PODGLAD ATOMU Z WIZUALIZATORA  (.mg-ai-*)  — 2026-09-08

   ZASADA: nie budujemy drugiego interfejsu do nauczenia sie. Klikniecie w atom
   juz otwiera panel (viewer.js:_mgWybor). Dokladamy do niego JEDEN przycisk,
   ktory otwiera arkusz z modelem atomu OSADZONY NAD SCENA wizualizatora —
   uzytkownik nie opuszcza strony molekuły i wraca tym samym Escape, ktory zna.

   Logika warstw: .molgod-stage ma position:relative i overflow:hidden, wiec
   arkusz jest przyciety do ramy wizualizatora i nie przykrywa calej strony.

   Sterowanie i legenda modulu atomowego sa WYLACZONE (noControls/noLegend) —
   byly projektowane pod pelny akordeon i na telefonie zaslanialy model
   (panel legendy ma tam sztywne 220 px nad plotnem). Dane opisowe renderujemy
   tutaj, w sekcji .mg-ai-dane, z kontrolowana typografia.
   ============================================================================= */

/* --- wejscie w panelu zaznaczenia --- */
.mg-ai-wejscie {
    display:        flex;
    align-items:    center;
    gap:            9px;
    width:          100%;
    min-height:     44px;
    margin:         10px 0 2px;
    padding:        9px 12px;
    border:         1px solid #cfd8ea;
    border-radius:  10px;
    background:     linear-gradient(180deg, #ffffff 0%, #f4f7fd 100%);
    color:          #1e2a44;
    font-size:      13px;
    font-weight:    600;
    font-family:    inherit;
    cursor:         pointer;
    transition:     border-color .18s, box-shadow .18s, transform .12s;
}
.mg-ai-wejscie:hover  { border-color: #8fa8dc; box-shadow: 0 2px 10px rgba(60,90,180,.15); }
.mg-ai-wejscie:active { transform: translateY(1px); }
.mg-ai-wejscie:focus-visible { outline: 2px solid #3b82f6; outline-offset: 2px; }

.mg-ai-kropka {
    display:        inline-flex;
    align-items:    center;
    justify-content:center;
    width:          26px;
    height:         26px;
    border-radius:  50%;
    background:     #2f6fd0;
    color:          #fff;
    font-size:      12px;
    font-weight:    700;
    flex-shrink:    0;
}

/* --- arkusz nad scena --- */
.mg-ai-arkusz {
    position:   absolute;
    inset:      0;
    z-index:    80;
    display:    flex;
    align-items:center;
    justify-content: center;
    padding:    14px;
}
.mg-ai-tlo {
    position:   absolute;
    inset:      0;
    background: rgba(12, 18, 34, .55);
    backdrop-filter: blur(2px);
    opacity:    0;
    transition: opacity .22s ease;
}
.mg-ai-arkusz.mg-ai-otwarty .mg-ai-tlo { opacity: 1; }

.mg-ai-karta {
    position:      relative;
    width:         100%;
    max-width:     420px;
    max-height:    100%;
    overflow-y:    auto;
    background:    #fff;
    border-radius: 14px;
    box-shadow:    0 18px 48px rgba(10, 20, 45, .32);
    transform:     translateY(14px) scale(.98);
    opacity:       0;
    transition:    transform .22s ease, opacity .22s ease;
}
.mg-ai-arkusz.mg-ai-otwarty .mg-ai-karta { transform: none; opacity: 1; }

.mg-ai-naglowek {
    display:       flex;
    align-items:   center;
    gap:           11px;
    padding:       13px 14px;
    border-bottom: 1px solid #e8edf6;
}
.mg-ai-symbol {
    display:        inline-flex;
    align-items:    center;
    justify-content:center;
    width:          46px;
    height:         46px;
    border-radius:  11px;
    color:          #fff;
    font-size:      21px;
    font-weight:    800;
    letter-spacing: .5px;
    flex-shrink:    0;
    box-shadow:     inset 0 -2px 0 rgba(0,0,0,.14);
}
.mg-ai-tytul          { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.mg-ai-tytul strong   { font-size: 16px; color: #16203a; line-height: 1.2; }
.mg-ai-tytul small    { font-size: 11.5px; color: #61708c; }

.mg-ai-zamknij {
    width:         44px;
    height:        44px;
    flex-shrink:   0;
    border:        1px solid #dfe5f0;
    border-radius: 10px;
    background:    #fff;
    color:         #3c4a66;
    font-size:     22px;
    line-height:   1;
    cursor:        pointer;
    transition:    background .15s, color .15s;
}
.mg-ai-zamknij:hover { background: #eef2fa; color: #16203a; }
.mg-ai-zamknij:focus-visible { outline: 2px solid #3b82f6; outline-offset: 2px; }

/* --- scena 3D: ciemna ramka jako swiadomy akcent, nie przypadek --- */
.mg-ai-scena {
    margin:        12px 14px 0;
    border-radius: 11px;
    overflow:      hidden;
    background:    linear-gradient(135deg, #0A0E27 0%, #1A1E37 100%);
    min-height:    170px;
}
.mg-ai-laduje {
    display:        flex;
    align-items:    center;
    justify-content:center;
    min-height:     170px;
    color:          #a9b6d6;
    font-size:      12.5px;
}
.mg-ai-blad { color: #ffb4a8; }

/* --- dane opisowe --- */
.mg-ai-dane    { padding: 12px 14px 15px; display: flex; flex-direction: column; gap: 12px; }
.mg-ai-sekcja h4 {
    margin:         0 0 6px;
    font-size:      10.5px;
    font-weight:    700;
    letter-spacing: .7px;
    text-transform: uppercase;
    color:          #7d8aa6;
}
.mg-ai-powloki { display: flex; flex-wrap: wrap; gap: 6px; }
.mg-ai-powloka {
    display:       inline-flex;
    align-items:   center;
    gap:           6px;
    padding:       6px 10px;
    border:        1px solid #e3e9f4;
    border-radius: 999px;
    background:    #f7f9fd;
    font-size:     12.5px;
    color:         #22304d;
}
.mg-ai-powloka i  { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.mg-ai-powloka b  { font-weight: 700; }
.mg-ai-powloka em {
    font-style:  normal;
    font-size:   10.5px;
    color:       #b4571f;
    background:  #fdf0e3;
    padding:     1px 6px;
    border-radius: 999px;
}
.mg-ai-ec {
    display:       block;
    font-family:   ui-monospace, Consolas, monospace;
    font-size:     13px;
    color:         #1c3f2c;
    background:    #f1f9f4;
    border:        1px solid #dceee3;
    border-radius: 8px;
    padding:       7px 10px;
}

/* --- telefon: arkusz od dolu, jak natywny sheet --- */
@media (max-width: 560px) {
    .mg-ai-arkusz  { align-items: flex-end; padding: 0; }
    .mg-ai-karta   { max-width: none; border-radius: 16px 16px 0 0; max-height: 92%; transform: translateY(100%); }
    .mg-ai-arkusz.mg-ai-otwarty .mg-ai-karta { transform: none; }
    .mg-ai-scena   { margin: 10px 12px 0; }
    .mg-ai-dane    { padding: 11px 12px 16px; }
}

/* Cele dotykowe spojne z sekcja 18 */
.molgod-widget.mg-dotyk .mg-ai-wejscie { min-height: 46px; font-size: 13.5px; }

@media (prefers-reduced-motion: reduce) {
    .mg-ai-tlo, .mg-ai-karta { transition: none; }
}


/* =============================================================================
   20. REZERWA MIEJSCA NA PRZYCISKI NAGLOWKA — 2026-09-08

   ZMIERZONE Playwrightem na /molekula/81-81-2/, trzy szerokosci:
     telefon 360   .ms-hdr-name x .molgod-btn-fs = 44 px, x .molgod-btn-close = 42 px
     telefon 390   .ms-hdr-name i .ms-hdr-meta x oba przyciski: 44 i 40 px
     desktop 1440  te same nachodzenia: 44 i 36 px

   To NIE jest defekt mobilny — wystepuje na KAZDEJ szerokosci. Na desktopie
   tekst po prostu nie dochodzi tak daleko, wiec nikt go nie zauwazyl; na
   telefonie nazwa z numerem CAS jest przez to ucinana.

   Przyciski pelnego ekranu i zamkniecia sa pozycjonowane bezwzglednie w prawym
   gornym rogu, a pole tekstowe naglowka rozciaga sie na cala szerokosc i biegnie
   POD nimi.

   Wartosc trzymana w JEDNEJ zmiennej. Gdyby przybyl trzeci przycisk, zmienia sie
   jedna liczba zamiast trzech regul — te sama zasade zlamano przy rozmiarze
   .ms-btn, gdzie o jedna wartosc walczy szesc regul w dwoch plikach.
   ============================================================================= */
.molgod-widget {
    /* dwa przyciski po 44 px + odstepy; zmierzone zajecie 88 px, zapas 12 px */
    --mg-rezerwa-naglowka: 100px;
}

.molgod-widget .ms-hdr-name,
.molgod-widget .ms-hdr-meta,
.molgod-widget .ms-hdr-syn {
    padding-right: var(--mg-rezerwa-naglowka);
    box-sizing:    border-box;
}