/* MolGod Compare — styles */

/* Grid layout */
.molgod-compare-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.molgod-compare-grid {
    display: grid;
    grid-template-columns: 180px repeat(var(--compare-count, 2), minmax(160px, 1fr));
    gap: 0;
    min-width: 400px;
    font-size: 14px;
}

/* Header */
.molgod-compare-col-header {
    background: #f6f7f7;
    padding: 12px 10px;
    border: 1px solid #ddd;
    font-size: 13px;
    line-height: 1.4;
    text-align: center;
}
.molgod-compare-header-label { background: transparent; border: none; }
.molgod-compare-cas { color: #646970; font-size: 11px; font-family: monospace; }
.molgod-compare-link { font-size: 12px; }

/* Rows */
.molgod-compare-label {
    padding: 8px 10px;
    border: 1px solid #e5e5e5;
    background: #fafafa;
    font-weight: 600;
    color: #1d2327;
    display: flex;
    align-items: center;
}
.molgod-compare-cell {
    padding: 8px 10px;
    border: 1px solid #e5e5e5;
    text-align: center;
    word-break: break-word;
}
.molgod-compare-grid > *:nth-child(even) { background: #fff; }
.molgod-na { color: #aaa; }

/* GHS badges */
.molgod-ghs-signal { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 12px; font-weight: 700; margin-bottom: 4px; }
.molgod-ghs-danger { background: #f56; color: #fff; }
.molgod-ghs-warning { background: #fa0; color: #fff; }
.molgod-ghs-badge { display: inline-block; border: 1px solid #e0a000; background: #fff8e1; color: #7a5a00; border-radius: 3px; font-size: 10px; font-weight: 700; padding: 1px 5px; margin: 1px; }
.molgod-h-codes { font-size: 11px; color: #646970; margin-top: 4px; }

/* Floating bar */
.molgod-compare-bar {
    position: fixed; bottom: 0; left: 0; right: 0;
    background: #1d2327; color: #fff;
    padding: 10px 20px;
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    z-index: 9999;
    box-shadow: 0 -2px 8px rgba(0,0,0,.3);
}
.molgod-compare-bar-items { flex: 1; display: flex; flex-wrap: wrap; gap: 8px; }
.molgod-bar-item { background: #2c3338; padding: 4px 8px; border-radius: 4px; font-size: 13px; display: flex; align-items: center; gap: 4px; }
.molgod-compare-remove { background: none; border: none; color: #aaa; cursor: pointer; font-size: 16px; line-height: 1; padding: 0 2px; }
.molgod-compare-remove:hover { color: #ff6b6b; }
.molgod-compare-bar-go { background: #2271b1; color: #fff; border: none; padding: 6px 16px; border-radius: 4px; cursor: pointer; font-weight: 600; }
.molgod-compare-bar-go:disabled { opacity: .5; cursor: not-allowed; }
.molgod-compare-bar-clear { background: none; border: 1px solid #555; color: #ccc; padding: 5px 12px; border-radius: 4px; cursor: pointer; font-size: 13px; }
.molgod-compare-add.molgod-compare-added { background: #e5f5e0; border-color: #00a32a; color: #00a32a; }

@media (max-width: 768px) {
    .molgod-compare-grid { grid-template-columns: 130px repeat(var(--compare-count, 2), minmax(120px, 1fr)); font-size: 12px; }
}