body {
    font-family: Arial, sans-serif;
    background: #0f172a;
    color: white;
    text-align: center;
    transition: background 1.2s ease;
  }

  body.cosmic-mode {
    background: radial-gradient(ellipse 120% 100% at 50% 0%, #1a0a2e 0%, #0d0630 35%, #050218 70%, #000 100%);
    background-attachment: fixed;
  }

  body.cosmic-mode::before {
    content: "";
    position: fixed;
    inset: 0;
    background-image:
      radial-gradient(2px 2px at 20% 30%, rgba(255,255,255,0.4), transparent),
      radial-gradient(2px 2px at 40% 70%, rgba(255,255,255,0.3), transparent),
      radial-gradient(2px 2px at 60% 20%, rgba(255,255,255,0.35), transparent),
      radial-gradient(2px 2px at 80% 50%, rgba(255,255,255,0.25), transparent),
      radial-gradient(2px 2px at 15% 80%, rgba(255,255,255,0.3), transparent);
    background-size: 200% 200%;
    pointer-events: none;
    z-index: 0;
    opacity: 0.9;
  }

  .cosmic-overlay {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.8s ease;
  }

  .cosmic-overlay.visible {
    opacity: 1;
  }

  .cosmic-text {
    font-size: clamp(1.5rem, 4vw, 2.2rem);
    font-weight: 300;
    letter-spacing: 0.15em;
    color: rgba(255, 255, 255, 0.95);
    text-shadow: 0 0 40px rgba(180, 140, 255, 0.5), 0 0 80px rgba(120, 80, 200, 0.3);
    margin: 0;
    padding: 20px;
  }

  /* Quantum View – schemă orbitală în background */
  .quantum-orbital-bg {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -1;
    opacity: 0;
    transition: opacity 0.5s ease;
  }

  body.quantum-view .quantum-orbital-bg {
    z-index: 0;
    opacity: 1;
  }

  .orbital-scheme {
    position: absolute;
    inset: 10%;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-template-rows: repeat(5, 1fr);
    gap: 8px;
    align-items: center;
    justify-items: center;
    font-size: 14px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.12);
    letter-spacing: 0.05em;
  }

  .orbital-scheme .orb {
    padding: 6px 10px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 4px;
    min-width: 2.5em;
    text-align: center;
  }

  .periodic-table {
    display: grid;
    grid-template-columns: repeat(18, 60px);
    grid-template-rows: repeat(9, 60px);
    gap: 5px;
    justify-content: center;
    margin-top: 30px;
  }

  .element {
    padding: 10px;
    cursor: pointer;
    border-radius: 8px;
    transition: 0.2s;
    background: rgba(30, 41, 59, 0.6);
    backdrop-filter: blur(4px);
  }

  .element:hover {
    transform: scale(1.1);
    filter: brightness(1.2);
  }

  /* Culori pe categorii - toate translucide */
  .element.category-metal-alcalin { background: rgba(255, 102, 0, 0.55); }
  .element.category-metal-alcalin-pamantos { background: rgba(255, 200, 0, 0.55); }
  .element.category-metal-de-tranzitie { background: rgba(255, 80, 80, 0.55); }
  /* Nuanțe subtile pe perioadă (metale de tranziție d) */
  .element.category-metal-de-tranzitie[data-period="4"] { background: rgba(255, 92, 88, 0.52); }
  .element.category-metal-de-tranzitie[data-period="5"] { background: rgba(248, 72, 118, 0.52); }
  .element.category-metal-de-tranzitie[data-period="6"] { background: rgba(238, 88, 128, 0.5); }
  .element.category-metal-de-tranzitie[data-period="7"] { background: rgba(255, 68, 98, 0.52); }
  .element.category-metal-post-tranzitie { background: rgba(140, 180, 220, 0.55); }
  .element.category-lantanid { background: rgba(255, 160, 200, 0.55); }
  .element.category-actinid { background: rgba(255, 120, 180, 0.55); }
  .element.category-semimetal { background: rgba(180, 200, 120, 0.55); }
  .element.category-nemetal { background: rgba(100, 200, 200, 0.55); }
  .element.category-halogen { background: rgba(100, 220, 160, 0.55); }
  .element.category-gaz-rar { background: rgba(180, 140, 255, 0.55); }

  /* Quantum View – tabel pe blocuri s, p, d, f */
  body.quantum-view .periodic-table .element.block-s { box-shadow: inset 0 0 0 2px rgba(100, 200, 255, 0.5); }
  body.quantum-view .periodic-table .element.block-p { box-shadow: inset 0 0 0 2px rgba(150, 255, 150, 0.5); }
  body.quantum-view .periodic-table .element.block-d { box-shadow: inset 0 0 0 2px rgba(255, 200, 100, 0.5); }
  body.quantum-view .periodic-table .element.block-f { box-shadow: inset 0 0 0 2px rgba(255, 150, 255, 0.5); }

  body.quantum-view .periodic-table .element.block-s::after { content: "s"; position: absolute; bottom: 2px; right: 4px; font-size: 8px; opacity: 0.7; }
  body.quantum-view .periodic-table .element.block-p::after { content: "p"; position: absolute; bottom: 2px; right: 4px; font-size: 8px; opacity: 0.7; }
  body.quantum-view .periodic-table .element.block-d::after { content: "d"; position: absolute; bottom: 2px; right: 4px; font-size: 8px; opacity: 0.7; }
  body.quantum-view .periodic-table .element.block-f::after { content: "f"; position: absolute; bottom: 2px; right: 4px; font-size: 8px; opacity: 0.7; }

  body.quantum-view h1,
  body.quantum-view .periodic-table,
  body.quantum-view .legend {
    position: relative;
    z-index: 1;
  }

  /* Highlight categorie din legendă – elementele din altă categorie se estompează */
  .periodic-table.highlight-category-metal-alcalin .element:not(.category-metal-alcalin) { opacity: 0.35; filter: saturate(0.5); }
  .periodic-table.highlight-category-metal-alcalin .element.category-metal-alcalin { box-shadow: 0 0 18px 6px rgba(255, 102, 0, 0.95); opacity: 1; }

  .periodic-table.highlight-category-metal-alcalin-pamantos .element:not(.category-metal-alcalin-pamantos) { opacity: 0.35; filter: saturate(0.5); }
  .periodic-table.highlight-category-metal-alcalin-pamantos .element.category-metal-alcalin-pamantos { box-shadow: 0 0 18px 6px rgba(255, 200, 0, 0.95); opacity: 1; }

  .periodic-table.highlight-category-metal-de-tranzitie .element:not(.category-metal-de-tranzitie) { opacity: 0.35; filter: saturate(0.5); }
  .periodic-table.highlight-category-metal-de-tranzitie .element.category-metal-de-tranzitie { box-shadow: 0 0 18px 6px rgba(255, 80, 80, 0.95); opacity: 1; }

  .periodic-table.highlight-category-metal-post-tranzitie .element:not(.category-metal-post-tranzitie) { opacity: 0.35; filter: saturate(0.5); }
  .periodic-table.highlight-category-metal-post-tranzitie .element.category-metal-post-tranzitie { box-shadow: 0 0 18px 6px rgba(140, 180, 220, 0.95); opacity: 1; }

  .periodic-table.highlight-category-lantanid .element:not(.category-lantanid) { opacity: 0.35; filter: saturate(0.5); }
  .periodic-table.highlight-category-lantanid .element.category-lantanid { box-shadow: 0 0 18px 6px rgba(255, 160, 200, 0.95); opacity: 1; }

  .periodic-table.highlight-category-actinid .element:not(.category-actinid) { opacity: 0.35; filter: saturate(0.5); }
  .periodic-table.highlight-category-actinid .element.category-actinid { box-shadow: 0 0 18px 6px rgba(255, 120, 180, 0.95); opacity: 1; }

  .periodic-table.highlight-category-semimetal .element:not(.category-semimetal) { opacity: 0.35; filter: saturate(0.5); }
  .periodic-table.highlight-category-semimetal .element.category-semimetal { box-shadow: 0 0 18px 6px rgba(180, 200, 120, 0.95); opacity: 1; }

  .periodic-table.highlight-category-nemetal .element:not(.category-nemetal) { opacity: 0.35; filter: saturate(0.5); }
  .periodic-table.highlight-category-nemetal .element.category-nemetal { box-shadow: 0 0 18px 6px rgba(100, 200, 200, 0.95); opacity: 1; }

  .periodic-table.highlight-category-halogen .element:not(.category-halogen) { opacity: 0.35; filter: saturate(0.5); }
  .periodic-table.highlight-category-halogen .element.category-halogen { box-shadow: 0 0 18px 6px rgba(100, 220, 160, 0.95); opacity: 1; }

  .periodic-table.highlight-category-gaz-rar .element:not(.category-gaz-rar) { opacity: 0.35; filter: saturate(0.5); }
  .periodic-table.highlight-category-gaz-rar .element.category-gaz-rar { box-shadow: 0 0 18px 6px rgba(180, 140, 255, 0.95); opacity: 1; }

  /* Evidențiere elemente radioactive */
  .periodic-table.highlight-radioactive .element:not(.radioactive) { opacity: 0.35; filter: saturate(0.5); }
  .periodic-table.highlight-radioactive .element.radioactive { box-shadow: 0 0 18px 6px rgba(0, 220, 120, 0.9); opacity: 1; }

  .element {
    position: relative;
  }

  .element .radioactive-icon {
    position: absolute;
    top: 4px;
    right: 4px;
    font-size: 10px;
    opacity: 0.95;
    line-height: 1;
    pointer-events: none;
  }

  .element .number {
    font-size: 10px;
  }

  .element .mass {
    font-size: 9px;
    opacity: 0.9;
    margin-top: 2px;
  }
  
  .element .symbol {
    font-size: 18px;
    font-weight: bold;
  }
  
  .element-modal {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.7);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 100;
    padding: 20px;
    overflow-y: auto;
  }

  .modal-content {
    background: #1e293b;
    padding: 24px;
    border-radius: 12px;
    width: 100%;
    max-width: 960px;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .modal-content::-webkit-scrollbar {
    display: none;
  }

  .modal-content.modal-glitch {
    animation: modal-glitch 0.2s ease-out;
  }

  @keyframes modal-glitch {
    0%   { transform: translate(0, 0); filter: brightness(1) hue-rotate(0deg); }
    15%  { transform: translate(-2px, 1px); filter: brightness(1.03) hue-rotate(-2deg); }
    30%  { transform: translate(2px, -1px); filter: brightness(0.98) hue-rotate(1deg); }
    45%  { transform: translate(-1px, 0); filter: brightness(1.02) hue-rotate(1deg); }
    60%  { transform: translate(1px, 1px); filter: brightness(0.99) hue-rotate(-1deg); }
    100% { transform: translate(0, 0); filter: brightness(1) hue-rotate(0deg); }
  }

  .close-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    background: none;
    border: none;
    color: rgba(255,255,255,0.8);
    font-size: 20px;
    cursor: pointer;
    padding: 4px;
    line-height: 1;
  }

  .close-btn:hover {
    color: white;
  }

  .modal-header {
    padding-right: 36px;
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255,255,255,0.15);
  }

  .modal-header-top {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 12px;
  }

  .modal-header .color-box {
    width: 70px;
    height: 70px;
    min-width: 70px;
    min-height: 70px;
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: inset -4px -6px 12px rgba(0,0,0,0.25), 2px 4px 8px rgba(0,0,0,0.3);
  }

  .modal-header .element-title {
    font-size: 1.5rem;
    font-weight: bold;
    margin-bottom: 0;
  }

  .modal-header .element-meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 16px;
    font-size: 13px;
    color: rgba(255,255,255,0.9);
  }

  .modal-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 16px;
  }

  .tab-btn {
    flex: 1;
    padding: 10px 12px;
    border: none;
    border-radius: 8px;
    background: rgba(255,255,255,0.1);
    color: white;
    font-size: 14px;
    cursor: pointer;
  }

  .tab-btn:hover {
    background: rgba(255,255,255,0.15);
  }

  .tab-btn.active {
    background: rgba(59, 130, 246, 0.5);
  }

  .modal-nav {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid rgba(255,255,255,0.15);
  }

  .nav-btn {
    flex: 1;
    padding: 10px 16px;
    border: 1px solid rgba(255,255,255,0.25);
    border-radius: 8px;
    background: rgba(255,255,255,0.08);
    color: white;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
  }

  .nav-btn:hover:not(:disabled) {
    background: rgba(255,255,255,0.18);
    border-color: rgba(255,255,255,0.4);
  }

  .nav-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
  }

  .tab-panel {
    display: none;
    font-size: 14px;
    line-height: 1.5;
  }

  .tab-panel.active {
    display: block;
  }

  .modal-section {
    margin-bottom: 20px;
  }

  .modal-section h3 {
    font-size: 14px;
    color: rgba(255,255,255,0.85);
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }

  .modal-section p, .modal-section .config-line {
    margin: 6px 0;
    color: rgba(255,255,255,0.95);
  }

  .config-full, .config-short {
    font-family: Consolas, monospace;
    font-size: 13px;
    background: rgba(0,0,0,0.2);
    padding: 8px 12px;
    border-radius: 6px;
    margin: 6px 0;
  }

  .config-aufbau-hint {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.62);
    line-height: 1.45;
    margin-bottom: 8px;
  }

  .config-note {
    font-size: 12px;
    color: rgba(220, 235, 255, 0.95);
    line-height: 1.5;
    margin-top: 10px;
    padding: 10px 12px;
    background: rgba(59, 130, 246, 0.12);
    border-radius: 6px;
    border-left: 3px solid rgba(96, 165, 250, 0.75);
    text-align: left;
  }

  .quantum-clarification {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.78);
    margin-bottom: 10px;
    line-height: 1.45;
  }

  .shells-list {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .shells-list li {
    padding: 4px 0;
    border-bottom: 1px solid rgba(255,255,255,0.08);
  }

  .orbital-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    flex-wrap: wrap;
  }

  .orbital-label {
    min-width: 36px;
    font-weight: bold;
    color: rgba(255,255,255,0.9);
  }

  .orbital-boxes {
    display: flex;
    gap: 4px;
    align-items: flex-end;
  }

  .orbital-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 28px;
    padding: 4px 2px;
    background: rgba(0,0,0,0.25);
    border-radius: 4px;
    font-size: 14px;
  }

  .orbital-box .m-value {
    font-size: 10px;
    color: rgba(255,255,255,0.6);
    margin-top: 2px;
  }

  .quantum-params {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 16px;
  }

  .quantum-params span {
    background: rgba(0,0,0,0.2);
    padding: 6px 10px;
    border-radius: 6px;
  }

  .bohr-container {
    display: flex;
    justify-content: center;
    margin: 16px 0;
  }

  .bohr-container canvas {
    border-radius: 8px;
    background: rgba(0,0,0,0.2);
  }

  .prop-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 16px;
  }

  .prop-item {
    background: rgba(0,0,0,0.2);
    padding: 8px 12px;
    border-radius: 6px;
  }

  .prop-item strong {
    display: block;
    font-size: 11px;
    color: rgba(255,255,255,0.7);
    margin-bottom: 2px;
  }

  .legend {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 20px;
    justify-content: center;
    margin-top: 24px;
    padding: 16px 24px;
    background: rgba(30, 41, 59, 0.5);
    border-radius: 12px;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
  }

  .legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    cursor: pointer;
    padding: 6px 10px;
    border-radius: 8px;
    transition: background 0.2s;
  }

  .legend-item:hover {
    background: rgba(255, 255, 255, 0.1);
  }

  .legend-item.active {
    background: rgba(255, 255, 255, 0.15);
    outline: 2px solid rgba(255, 255, 255, 0.4);
  }

  .legend-btn-radioactive {
    border: none;
    background: transparent;
    color: inherit;
    font: inherit;
  }

  .legend-btn-radioactive .legend-icon {
    font-size: 16px;
    line-height: 1;
  }

  .legend-color {
    width: 18px;
    height: 18px;
    border-radius: 4px;
    flex-shrink: 0;
  }

  .legend-title {
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 10px;
    width: 100%;
  }

  /* ——— Desktop 2-column layouts (General + Electronic + Isotopes) ——— */
  @media (min-width: 901px) {
    .prop-grid {
      grid-template-columns: repeat(4, 1fr);
    }
    .quantum-params {
      grid-template-columns: repeat(4, 1fr);
    }
    .electronic-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 20px 28px;
    }
    .electronic-col {
      min-width: 0;
    }
    .iso-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 20px 28px;
    }
    .iso-col-left {
      position: sticky;
      top: 0;
      align-self: start;
    }
    .iso-col-right {
      min-width: 0;
    }
  }

  /* ——— Desktop: tabelul rămâne centrat, fără scroll în viewport ——— */
  .periodic-table-scroll {
    overflow: visible;
    width: 100%;
  }

  .mobile-table-hint {
    display: none;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.65);
    margin: 8px auto 0;
    padding: 0 12px;
    max-width: 900px;
    line-height: 1.4;
  }

  /* ——— Mobil: viewport pe tabel cu scroll (deget) ——— */
  @media (max-width: 900px) {
    .mobile-table-hint {
      display: block;
    }

    .periodic-table-scroll {
      overflow: auto;
      -webkit-overflow-scrolling: touch;
      overscroll-behavior: contain;
      touch-action: pan-x pan-y;
      width: 100%;
      max-width: 100%;
      max-height: min(78vh, 720px);
      margin: 0 auto;
      padding: 0 6px;
      border-radius: 12px;
      background: rgba(15, 23, 42, 0.45);
      box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
    }

    .periodic-table {
      grid-template-columns: repeat(18, 48px);
      grid-template-rows: repeat(9, 48px);
      gap: 4px;
      justify-content: start;
      margin-top: 16px;
      margin-bottom: 8px;
      min-width: min-content;
    }

    .element .symbol {
      font-size: 1rem;
    }

    .element .number {
      font-size: 9px;
    }

    .element .mass {
      font-size: 8px;
    }

    .legend {
      margin-top: 16px;
      padding: 12px 14px;
      max-width: 100%;
      max-height: min(40vh, 320px);
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      justify-content: flex-start;
    }

    .legend-title {
      text-align: left;
    }
  }

  /* ——— Modal responsive ——— */
  @media (max-width: 640px) {
    .element-modal {
      padding: 0;
      padding-bottom: env(safe-area-inset-bottom, 0);
      align-items: flex-end;
      justify-content: stretch;
    }

    .modal-content {
      width: 100%;
      max-width: 100%;
      max-height: min(92dvh, 92svh);
      border-radius: 16px 16px 0 0;
      padding: 16px 14px;
      padding-bottom: env(safe-area-inset-bottom, 16px);
    }

    .modal-header {
      padding-right: 40px;
    }

    .modal-header-top {
      flex-direction: column;
      align-items: flex-start;
      gap: 12px;
    }

    .modal-header .color-box {
      width: 56px;
      height: 56px;
      min-width: 56px;
      min-height: 56px;
    }

    .modal-header .element-title {
      font-size: 1.2rem;
    }

    .modal-header .element-meta {
      grid-template-columns: 1fr;
      gap: 6px;
    }

    .modal-tabs {
      flex-wrap: wrap;
      gap: 6px;
    }

    .tab-btn {
      flex: 1 1 calc(33.33% - 6px);
      min-width: 0;
      font-size: 13px;
      padding: 9px 8px;
    }

    .modal-nav {
      flex-direction: column;
      gap: 0.5rem;
    }

    .nav-btn {
      width: 100%;
    }

    .prop-grid,
    .quantum-params {
      grid-template-columns: 1fr;
    }

    .orbital-row {
      flex-direction: column;
      align-items: flex-start;
    }

    .bohr-container {
      width: 100%;
      max-width: 100%;
    }

    /* Dimensiunea efectivă vine din JS (sizeBohrCanvas) + buffer DPR */
    .bohr-container canvas {
      display: block;
      margin: 0 auto;
      max-width: min(420px, 92vw);
      aspect-ratio: 1;
    }
  }

  /* ═══════════════════════════════════════════════════════
     ISOTOPE TAB STYLES
     ═══════════════════════════════════════════════════════ */

  .iso-header-section h3 {
    font-size: 16px;
    margin-bottom: 4px;
  }

  .iso-subtitle {
    font-size: 12px;
    color: rgba(255,255,255,0.55);
    margin-bottom: 12px;
  }

  /* Stability color system */
  .iso-stable { --iso-color: #51cf66; --iso-bg: rgba(81,207,102,0.12); --iso-border: rgba(81,207,102,0.45); }
  .iso-weak { --iso-color: #fcc419; --iso-bg: rgba(252,196,25,0.12); --iso-border: rgba(252,196,25,0.45); }
  .iso-radio { --iso-color: #ff6b6b; --iso-bg: rgba(255,107,107,0.12); --iso-border: rgba(255,107,107,0.45); }

  /* Legend bar */
  .iso-legend-bar {
    display: flex;
    gap: 16px;
    margin-bottom: 16px;
    flex-wrap: wrap;
  }

  .iso-leg {
    font-size: 12px;
    padding: 4px 10px;
    border-radius: 20px;
    background: var(--iso-bg);
    color: var(--iso-color);
    border: 1px solid var(--iso-border);
    font-weight: 600;
    white-space: nowrap;
  }

  /* Slider section */
  .iso-slider-section {
    background: rgba(0,0,0,0.2);
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 16px;
  }

  .iso-slider-label {
    font-size: 12px;
    color: rgba(255,255,255,0.65);
    margin-bottom: 8px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }

  .iso-slider-wrap {
    position: relative;
    padding-bottom: 22px;
  }

  .iso-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 6px;
    border-radius: 3px;
    background: linear-gradient(90deg, #51cf66 0%, #fcc419 50%, #ff6b6b 100%);
    outline: none;
    cursor: pointer;
  }

  .iso-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: white;
    box-shadow: 0 1px 6px rgba(0,0,0,0.4);
    cursor: grab;
    border: 2px solid rgba(255,255,255,0.8);
    transition: transform 0.15s;
  }

  .iso-slider::-webkit-slider-thumb:active {
    transform: scale(1.15);
    cursor: grabbing;
  }

  .iso-slider::-moz-range-thumb {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: white;
    box-shadow: 0 1px 6px rgba(0,0,0,0.4);
    cursor: grab;
    border: 2px solid rgba(255,255,255,0.8);
  }

  .iso-slider-ticks {
    display: flex;
    justify-content: space-between;
    margin-top: 6px;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
  }

  .iso-tick {
    font-size: 11px;
    color: rgba(255,255,255,0.4);
    transition: color 0.2s, transform 0.2s;
    cursor: pointer;
  }

  .iso-tick.active {
    color: white;
    font-weight: bold;
    transform: scale(1.15);
  }

  .iso-slider-current {
    margin-top: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
  }

  .iso-slider-big {
    font-size: 22px;
    font-weight: bold;
    color: var(--iso-color);
  }

  .iso-slider-info {
    font-size: 13px;
    color: rgba(255,255,255,0.7);
  }

  /* Nucleus visualization */
  .iso-nucleus-section {
    background: rgba(0,0,0,0.2);
    border-radius: 10px;
    padding: 14px;
    margin-bottom: 16px;
    text-align: center;
  }

  .iso-nucleus-wrap {
    display: flex;
    justify-content: center;
    margin-bottom: 10px;
  }

  #nucleusCanvas {
    border-radius: 8px;
    background: rgba(0,0,0,0.15);
  }

  .iso-nucleus-legend {
    display: flex;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
  }

  .nuc-leg {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: rgba(255,255,255,0.7);
  }

  .nuc-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    display: inline-block;
  }

  .nuc-proton { background: radial-gradient(circle at 35% 35%, #ff6b6b, #c92a2a); }
  .nuc-neutron { background: radial-gradient(circle at 35% 35%, #adb5bd, #6c757d); }
  .nuc-electron { background: radial-gradient(circle at 35% 35%, #74c0fc, #1971c2); }

  /* Isotope cards */
  .iso-cards {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 16px;
  }

  .iso-card {
    background: var(--iso-bg);
    border: 1px solid rgba(255,255,255,0.08);
    border-left: 4px solid var(--iso-border);
    border-radius: 10px;
    padding: 14px 16px;
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s;
  }

  .iso-card:hover {
    border-color: var(--iso-border);
    box-shadow: 0 0 12px var(--iso-bg);
  }

  .iso-card.iso-card-active {
    border-color: var(--iso-color);
    box-shadow: 0 0 16px var(--iso-bg), inset 0 0 0 1px var(--iso-border);
    transform: scale(1.01);
  }

  .iso-card-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
    flex-wrap: wrap;
  }

  .iso-card-symbol {
    font-size: 20px;
    font-weight: bold;
    color: white;
    min-width: 50px;
  }

  .iso-card-name {
    font-size: 14px;
    color: rgba(255,255,255,0.85);
    flex: 1;
  }

  .iso-card-badge {
    font-size: 11px;
    padding: 3px 10px;
    border-radius: 20px;
    font-weight: 600;
    color: var(--iso-color);
    background: var(--iso-bg);
    border: 1px solid var(--iso-border);
    white-space: nowrap;
  }

  .iso-card-props {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 6px;
    margin-bottom: 10px;
  }

  .iso-prop {
    background: rgba(0,0,0,0.15);
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 13px;
  }

  .iso-prop strong {
    display: block;
    font-size: 10px;
    color: rgba(255,255,255,0.55);
    margin-bottom: 2px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
  }

  .iso-card-uses {
    font-size: 12px;
    color: rgba(255,255,255,0.75);
    margin-bottom: 8px;
  }

  .iso-card-uses strong {
    color: rgba(255,255,255,0.55);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
  }

  .iso-card-uses ul {
    margin: 4px 0 0;
    padding-left: 16px;
    list-style: disc;
  }

  .iso-card-uses li {
    margin-bottom: 2px;
  }

  /* Expand/details */
  .iso-card-expand-btn {
    font-size: 12px;
    color: rgba(255,255,255,0.5);
    cursor: pointer;
    padding: 4px 0;
    text-align: center;
    transition: color 0.2s;
    border-top: 1px solid rgba(255,255,255,0.06);
    margin-top: 4px;
  }

  .iso-card-expand-btn:hover {
    color: rgba(255,255,255,0.85);
  }

  .iso-card-details {
    padding: 10px 0 0;
    font-size: 13px;
    line-height: 1.55;
    color: rgba(255,255,255,0.85);
  }

  .iso-detail-row {
    margin-bottom: 8px;
  }

  .iso-equation {
    font-family: Consolas, monospace;
    font-size: 13px;
    background: rgba(0,0,0,0.2);
    padding: 8px 12px;
    border-radius: 6px;
    color: rgba(255,255,255,0.95);
  }

  /* Compare */
  .iso-compare-check {
    font-size: 12px;
    color: rgba(255,255,255,0.5);
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    cursor: pointer;
  }

  .iso-compare-check:hover {
    color: rgba(255,255,255,0.8);
  }

  .iso-cmp-cb {
    accent-color: #74c0fc;
  }

  .iso-compare-panel {
    background: rgba(0,0,0,0.25);
    border-radius: 10px;
    padding: 16px;
    margin-top: 8px;
    border: 1px solid rgba(100,180,255,0.2);
  }

  .iso-compare-panel h3 {
    font-size: 14px;
    margin-bottom: 12px;
    color: rgba(255,255,255,0.85);
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }

  .iso-compare-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    margin-bottom: 14px;
  }

  .iso-compare-table th, .iso-compare-table td {
    padding: 8px 10px;
    text-align: center;
    border-bottom: 1px solid rgba(255,255,255,0.06);
  }

  .iso-compare-table th {
    font-weight: bold;
    color: var(--iso-color);
    font-size: 15px;
    padding-bottom: 10px;
  }

  .iso-compare-table th small {
    display: block;
    font-size: 11px;
    font-weight: normal;
    color: rgba(255,255,255,0.5);
  }

  .iso-cmp-label {
    text-align: left !important;
    font-weight: 600;
    color: rgba(255,255,255,0.6);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }

  .iso-diff {
    background: rgba(100,180,255,0.08);
    font-weight: 600;
  }

  .iso-compare-uses {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }

  .iso-cmp-uses-col h4 {
    font-size: 14px;
    color: var(--iso-color);
    margin-bottom: 6px;
  }

  .iso-cmp-uses-col ul {
    font-size: 12px;
    color: rgba(255,255,255,0.75);
    padding-left: 16px;
    list-style: disc;
    margin: 0;
  }

  .iso-cmp-uses-col li {
    margin-bottom: 3px;
  }

  @media (max-width: 640px) {
    .iso-card-props {
      grid-template-columns: 1fr 1fr;
    }
    .iso-compare-uses {
      grid-template-columns: 1fr;
    }
    .iso-card-head {
      flex-direction: column;
      align-items: flex-start;
      gap: 6px;
    }
    #nucleusCanvas {
      width: 220px;
      height: 220px;
    }
  }