@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&display=swap');

:root { --mono:"DM Mono",ui-monospace,monospace; --sans:Manrope,system-ui,sans-serif; --display:var(--sans); --proton:#ee4757; --neutron:#8fa6c9; --electron:#8cebff; --scene-dark:1; --bg:#060b16; --panel:rgba(12,22,42,.76); --panel-solid:#0c162a; --text:#e8f2ff; --muted:#91a5c2; --line:rgba(152,193,255,.14); --accent:#63e3ff; --accent-rgb:99,227,255; --shadow:0 18px 60px rgba(0,0,0,.28); --tile:#0d1a30; --tile-text:#f2f7ff; --scene:radial-gradient(ellipse at 50% 48%,rgba(30,91,141,.32),transparent 58%),linear-gradient(145deg,rgba(3,9,23,.55),rgba(8,21,42,.85)); --zoom:1; }
* { box-sizing:border-box; }
html { min-width:320px; background:var(--bg); }
body { margin:0; min-height:100vh; color:var(--text); background:radial-gradient(circle at 52% -20%, #1b4166 0, transparent 37%), radial-gradient(circle at 100% 100%, rgba(97,46,154,.16), transparent 34%), var(--bg); font:13px/1.45 var(--sans); }
button,input,select { font:inherit; } button,select { color:inherit; } button { cursor:pointer; }
.stars { position:fixed; inset:0; pointer-events:none; opacity:.36; background-image:radial-gradient(#d4f6ff 1px,transparent 1px),radial-gradient(#a990fb 1px,transparent 1px); background-position:0 0, 42px 63px; background-size:83px 83px, 127px 127px; mask-image:linear-gradient(#000,transparent); }

/* Shell and header */
.app-shell { position:relative; z-index:1; max-width:1920px; margin:auto; padding:14px clamp(10px,2vw,32px) 30px; }
.topbar { height:52px; display:flex; align-items:center; gap:22px; margin-bottom:12px; }
.brand { color:var(--text); display:flex; align-items:center; gap:10px; font-size:17px; font-weight:800; text-decoration:none; letter-spacing:1.2px; }
.brand>span:last-child span { color:var(--accent); }
.brand-mark { display:grid; place-items:center; width:31px; height:31px; color:#071220; background:linear-gradient(135deg,#d9f8ff,#52dafb); border-radius:50% 50% 50% 12%; box-shadow:0 0 22px rgba(var(--accent-rgb),.6); font-family:Georgia,serif; font-size:19px; }
.subtitle { margin:0; color:var(--muted); letter-spacing:1.5px; font:10px var(--mono); }
.header-actions { margin-left:auto; display:flex; align-items:center; gap:10px; }
.icon-button,.scene-controls button,.zoom-controls button { min-width:32px; height:32px; border:1px solid var(--line); border-radius:8px; background:var(--panel); color:var(--text); }
.theme-select { display:flex; align-items:center; gap:6px; color:var(--muted); font-size:11px; }
.theme-select select,.filters select,.atom-controls select { padding:7px 8px; border:1px solid var(--line); border-radius:7px; background:color-mix(in srgb,var(--panel-solid) 85%,transparent); outline:none; }
.panel { min-width:0; border:1px solid var(--line); border-radius:16px; background:var(--panel); box-shadow:var(--shadow), inset 0 1px rgba(255,255,255,.04); backdrop-filter:blur(16px); }
.eyebrow { margin:0; color:var(--accent); font:9px var(--mono); letter-spacing:1.3px; }
.count-pill { padding:4px 8px; border:1px solid rgba(var(--accent-rgb),.25); border-radius:20px; color:var(--accent); background:rgba(var(--accent-rgb),.08); font:10px var(--mono); white-space:nowrap; }
kbd { padding:1px 4px; border:1px solid var(--line); border-radius:3px; background:rgba(0,0,0,.2); font:9px var(--mono); }

/* Stage: atom (2/3) + element data (1/3) */
.stage { display:grid; grid-template-columns:minmax(0,2fr) minmax(300px,1fr); gap:14px; margin-bottom:14px; }
.atom-panel { display:flex; flex-direction:column; overflow:hidden; }
.atom-heading { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:10px 18px; padding:14px 16px 12px; border-bottom:1px solid var(--line); }
.atom-heading h2 { margin:1px 0 0; font-size:21px; line-height:1.1; letter-spacing:-.5px; }
.atom-heading h2 span { color:var(--accent); font-weight:600; }
.mode-tabs { display:flex; gap:3px; padding:3px; border:1px solid var(--line); border-radius:10px; background:rgba(0,0,0,.18); }
.mode-tab { padding:6px 12px; color:var(--muted); border:0; border-radius:7px; background:transparent; font-size:11px; font-weight:600; transition:background .15s,color .15s; }
.mode-tab:hover { color:var(--text); }
.mode-tab.active { color:var(--panel-solid); background:var(--accent); box-shadow:0 0 16px rgba(var(--accent-rgb),.35); }
.canvas-wrap { position:relative; flex:1 0 auto; height:clamp(420px,64vh,780px); overflow:hidden; background:var(--scene); }
.canvas-wrap::before { content:""; position:absolute; inset:0; pointer-events:none; opacity:.2; background-image:linear-gradient(rgba(118,210,255,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(118,210,255,.12) 1px,transparent 1px); background-size:38px 38px; mask-image:radial-gradient(circle at center,#000,transparent 70%); }
.canvas-wrap::after { content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(ellipse at center,transparent 55%,rgba(0,0,0,.35)); }
#atomCanvas { position:absolute; inset:0; z-index:1; touch-action:none; cursor:grab; }
#webglCanvas { position:absolute; inset:0; z-index:2; pointer-events:none; }
.canvas-badge { position:absolute; z-index:3; top:12px; left:13px; padding:4px 7px; color:var(--accent); border:1px solid rgba(var(--accent-rgb),.18); border-radius:5px; background:rgba(4,12,27,.5); font:9px var(--mono); letter-spacing:.65px; }
.canvas-identity { position:absolute; z-index:3; top:10px; right:14px; display:flex; gap:6px; align-items:center; pointer-events:none; }
.canvas-identity span { color:var(--accent); font:600 30px var(--mono); text-shadow:0 0 18px rgba(var(--accent-rgb),.45); }
.canvas-identity small { color:var(--muted); font:8px var(--mono); line-height:1.3; }
.scene-legend { position:absolute; z-index:3; bottom:13px; left:13px; display:flex; flex-direction:column; gap:4px; }
.particle-key { display:flex; align-items:center; gap:6px; padding:4px 7px; color:#cadcf5; border:1px solid rgba(255,255,255,.06); border-radius:6px; background:rgba(3,10,22,.55); font-size:10px; text-align:left; }
.particle-key i { width:8px; height:8px; border-radius:50%; background:var(--proton); box-shadow:0 0 8px var(--proton); }
.particle-key.neutron i { background:var(--neutron); box-shadow:0 0 8px var(--neutron); }
.particle-key.electron i { background:var(--electron); box-shadow:0 0 8px var(--electron); }
.particle-key b { color:#fff; margin-left:2px; }
.particle-key.muted { opacity:.35; text-decoration:line-through; }
.scene-controls { position:absolute; z-index:3; right:12px; bottom:12px; display:flex; gap:5px; }
.scene-controls button.active { color:var(--accent); border-color:var(--accent); }
.particle-tooltip { position:absolute; z-index:5; width:235px; padding:10px; opacity:0; pointer-events:none; border:1px solid rgba(var(--accent-rgb),.4); border-radius:9px; background:rgba(4,12,29,.94); box-shadow:var(--shadow); transform:translateY(4px); transition:.18s; }
.particle-tooltip.visible { opacity:1; transform:none; }
.particle-tooltip strong { display:block; color:var(--accent); font-size:12px; }
.particle-tooltip span { display:block; margin-top:3px; color:#d5e2f5; font-size:11px; line-height:1.4; }
.scene-overlay { position:absolute; z-index:4; top:46px; right:14px; width:min(330px,calc(100% - 28px)); max-height:calc(100% - 110px); overflow:auto; padding:12px; border:1px solid var(--line); border-radius:12px; background:color-mix(in srgb,var(--panel-solid) 82%,transparent); backdrop-filter:blur(10px); box-shadow:var(--shadow); }
.scene-overlay[hidden] { display:none; }
.scene-overlay h3 { margin:0 0 8px; font-size:12px; }
.scene-overlay .config-text { margin:0 0 10px; color:var(--accent); font:11px var(--mono); word-spacing:-1px; }
.box-diagram { display:flex; flex-direction:column; gap:5px; }
.box-row { display:flex; align-items:center; gap:7px; }
.box-row > b { width:26px; color:var(--muted); font:500 10px var(--mono); text-align:right; }
.boxes { display:flex; }
.boxes span { display:grid; place-items:center; width:22px; height:22px; margin-left:-1px; border:1px solid rgba(var(--accent-rgb),.35); background:rgba(var(--accent-rgb),.05); color:var(--text); font:12px/1 var(--mono); letter-spacing:-2px; }
.boxes span:first-child { border-radius:4px 0 0 4px; } .boxes span:last-child { border-radius:0 4px 4px 0; }
.boxes span.half { background:rgba(var(--accent-rgb),.14); } .boxes span.full { background:rgba(var(--accent-rgb),.24); }
.atom-controls { display:grid; grid-template-columns:1.5fr 1fr 1fr auto; align-items:end; gap:10px; padding:11px 16px; border-top:1px solid var(--line); }
.atom-controls label { display:flex; flex-direction:column; gap:3px; color:var(--muted); font-size:9px; letter-spacing:.3px; }
.atom-controls select { min-width:0; padding:6px; font-size:11px; }
.speed-control input { accent-color:var(--accent); width:100%; }
.control-button,.favorite-button { padding:7px 10px; color:var(--text); border:1px solid var(--line); border-radius:7px; background:rgba(255,255,255,.04); font-size:11px; white-space:nowrap; }
.orbital-controls { display:flex; gap:5px; overflow-x:auto; padding:9px 16px 4px; border-top:1px solid var(--line); }
.orbital-controls[hidden] { display:none; }
.orbital-button { min-width:44px; padding:5px 8px; color:var(--text); border:1px solid var(--line); border-radius:6px; background:rgba(255,255,255,.025); font:11px var(--mono); }
.orbital-button sup { margin-left:2px; color:var(--muted); font-size:8px; }
.orbital-button.active { color:var(--accent); border-color:var(--accent); background:rgba(var(--accent-rgb),.11); box-shadow:0 0 12px rgba(var(--accent-rgb),.13); }
.shell-row { display:flex; gap:5px; flex-wrap:wrap; padding:6px 16px 13px; }
.shell-button { padding:4px 8px; color:var(--text); border:1px solid rgba(var(--accent-rgb),.2); border-radius:6px; background:rgba(var(--accent-rgb),.06); font:10px var(--mono); }
.shell-button span { color:var(--accent); margin-right:4px; }
.shell-button.off { opacity:.35; text-decoration:line-through; }

/* Element data panel */
.info-panel { height:0; min-height:100%; overflow:auto; padding:16px 18px; scrollbar-width:thin; }
.element-hero { display:grid; grid-template-columns:72px 1fr auto; gap:12px; align-items:center; padding-bottom:14px; border-bottom:1px solid var(--line); }
.hero-symbol { position:relative; display:grid; place-items:center; width:72px; height:78px; color:var(--tile-text); border:1px solid color-mix(in srgb,var(--family) 60%,transparent); border-radius:12px; background:linear-gradient(155deg,color-mix(in srgb,var(--family) 55%,var(--tile)),color-mix(in srgb,var(--family) 14%,var(--tile))); box-shadow:0 8px 26px color-mix(in srgb,var(--family) 28%,transparent); font-size:32px; font-weight:800; }
.hero-symbol small { position:absolute; top:5px; left:7px; font:10px var(--mono); opacity:.85; }
.element-hero h2 { margin:2px 0 0; font-size:20px; line-height:1.1; letter-spacing:-.4px; }
.element-hero p:not(.eyebrow) { margin:3px 0 0; color:var(--muted); font-size:11px; }
.element-hero .eyebrow { color:var(--family); }
.hero-mass { align-self:start; color:var(--text); font:13px var(--mono); text-align:right; }
.hero-mass small { display:block; color:var(--muted); font-size:9px; }
.stats { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin:12px 0; }
.stats div { padding:7px 9px; border:1px solid var(--line); border-radius:8px; background:rgba(255,255,255,.025); }
.stats small { display:block; color:var(--muted); font:8px var(--mono); letter-spacing:.4px; }
.stats b { display:block; color:var(--accent); margin-top:1px; font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
details { border-top:1px solid var(--line); }
summary { padding:10px 0; color:var(--text); cursor:pointer; font-weight:700; font-size:12px; }
dl { display:grid; grid-template-columns:auto 1fr; gap:6px 12px; margin:0 0 12px; }
dt { color:var(--muted); font-size:11px; }
dd { margin:0; text-align:right; color:var(--text); font-size:11px; }
.config { color:var(--accent); font-family:var(--mono); font-size:10px; word-spacing:-2px; }
.info-panel details p { margin:0 0 13px; color:var(--muted); font-size:11px; }
.info-panel dd.safety { text-align:left; line-height:1.4; } .info-panel dd.source-link { text-align:right; } .info-panel dd a { color:var(--accent); }
.unavailable,.status-unavailable { color:var(--muted); font-style:italic; }
.status-measured { color:#76deb1; } .status-estimated { color:#f1bd67; }
.favorite-button { width:100%; margin-top:12px; }
.favorite-button.active { color:#ffdb72; border-color:#c89e39; background:rgba(230,177,59,.08); }
.data-note { color:var(--muted); margin:14px 0 0; font-size:9px; line-height:1.5; } .data-note a { color:var(--accent); }
.isotope-status { display:inline-block; padding:1px 5px; border-radius:4px; font-size:9px; white-space:nowrap; }
.isotope-status.stable { color:#b4f2d0; background:rgba(80,196,132,.15); } .isotope-status.radioactive { color:#ffd487; background:rgba(231,156,50,.16); } .isotope-status.metastable { color:#eba8ff; background:rgba(197,98,234,.17); } .isotope-status.observed,.isotope-status.representative { color:#b4c5dd; background:rgba(159,179,208,.14); }
.isotope-list { display:flex; flex-direction:column; gap:4px; margin-bottom:12px; }
.isotope-item { display:grid; grid-template-columns:62px 1fr auto; align-items:center; gap:8px; width:100%; padding:6px 8px; color:var(--text); border:1px solid var(--line); border-radius:7px; background:rgba(255,255,255,.02); text-align:left; font-size:11px; }
.isotope-item:hover { border-color:rgba(var(--accent-rgb),.45); }
.isotope-item.active { border-color:var(--accent); background:rgba(var(--accent-rgb),.09); }
.isotope-item b { font:500 12px var(--mono); }
.isotope-item b sup { color:var(--muted); font-size:8px; margin-right:1px; }
.isotope-meta { min-width:0; color:var(--muted); font-size:10px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.abundance-bar { position:relative; height:4px; margin-top:3px; border-radius:2px; background:rgba(255,255,255,.07); overflow:hidden; }
.abundance-bar i { position:absolute; inset:0 auto 0 0; border-radius:2px; background:linear-gradient(90deg,var(--accent),#9fffd8); }

/* Periodic table */
.periodic-panel { padding:14px 18px 16px; }
.periodic-toolbar { display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; margin-bottom:12px; }
.periodic-title h1 { margin:1px 0 0; font-size:21px; line-height:1.1; letter-spacing:-.5px; }
.search { flex:1 1 220px; max-width:360px; display:flex; align-items:center; gap:7px; padding:0 10px; border:1px solid var(--line); border-radius:9px; background:color-mix(in srgb,var(--panel-solid) 70%,transparent); color:var(--accent); }
.search input { width:100%; padding:8px 0; color:var(--text); border:0; outline:0; background:transparent; font-size:12px; }
.search input::placeholder { color:var(--muted); }
.filters { display:flex; gap:7px; }
.filters select { min-width:0; font-size:11px; }
.zoom-controls { display:flex; gap:4px; margin-left:auto; }
.zoom-controls .zoom-value { min-width:58px; font:11px var(--mono); }
.table-viewport { overflow:auto; overscroll-behavior-x:contain; padding:4px 2px 8px; scrollbar-width:thin; }
.periodic-table { --gap:clamp(2px,.35vw,5px); display:grid; grid-template-columns:1.6em repeat(18,minmax(0,1fr)); grid-template-rows:1.6em repeat(7,auto) calc(var(--gap) * 3 + 6px) repeat(2,auto); gap:var(--gap); width:calc(100% * var(--zoom)); min-width:calc(330px * var(--zoom)); }
.axis-label { display:grid; place-items:center; color:var(--muted); font:clamp(8px,.75vw,11px) var(--mono); opacity:.75; }
.element-tile,.series-tile { --family:#7f8ea8; position:relative; container-type:inline-size; aspect-ratio:1 / 1.08; min-width:0; padding:0; overflow:hidden; color:var(--tile-text); border:1px solid color-mix(in srgb,var(--family) 38%,transparent); border-radius:10% / 9%; background:linear-gradient(160deg,color-mix(in srgb,var(--family) 30%,var(--tile)) 0%,color-mix(in srgb,var(--family) 8%,var(--tile)) 72%); box-shadow:inset 0 1px rgba(255,255,255,.07),0 1px 2px rgba(0,0,0,.25); transition:transform .16s ease,box-shadow .16s ease,opacity .2s ease,filter .2s ease,border-color .16s; }
.element-tile::before { content:""; position:absolute; inset:0 0 auto; height:max(2px,4cqi); background:var(--family); opacity:.85; }
.element-tile { display:flex; flex-direction:column; align-items:center; justify-content:flex-end; padding:0 4% 8%; }
.element-tile small { position:absolute; top:8cqi; left:8cqi; font:500 max(7px,14cqi)/1 var(--mono); opacity:.8; }
.element-tile strong { margin-bottom:auto; padding-top:24cqi; font-weight:800; font-size:max(9px,30cqi); line-height:1; letter-spacing:-.02em; }
.element-tile span { max-width:100%; overflow:hidden; text-align:center; text-overflow:ellipsis; white-space:nowrap; margin-top:2cqi; font-size:max(6px,11.5cqi); line-height:1.1; font-weight:600; opacity:.92; }
.element-tile em { margin-top:2.5cqi; font:max(6px,10cqi)/1 var(--mono); font-style:normal; opacity:.65; }
@container (max-width:46px) { .element-tile span,.element-tile em { display:none; } .element-tile strong { margin:auto 0; padding-top:14cqi; font-size:38cqi; } .element-tile small { font-size:20cqi; top:6cqi; left:7cqi; } }
@container (max-width:30px) { .element-tile small { display:none; } .element-tile strong { padding-top:8cqi; font-size:46cqi; } }
.element-tile:hover,.element-tile:focus-visible { z-index:2; transform:translateY(-2px) scale(1.07); outline:0; border-color:var(--family); box-shadow:0 6px 18px color-mix(in srgb,var(--family) 35%,transparent),inset 0 1px rgba(255,255,255,.12); }
.element-tile.selected { z-index:3; border-color:#fff; background:linear-gradient(160deg,color-mix(in srgb,var(--family) 75%,var(--tile)),color-mix(in srgb,var(--family) 35%,var(--tile))); box-shadow:0 0 0 2px var(--accent),0 0 26px rgba(var(--accent-rgb),.55); transform:scale(1.06); }
.element-tile.favorite::after { content:"★"; position:absolute; top:5cqi; right:7cqi; color:#ffdb72; font-size:max(7px,13cqi); }
.element-tile.filtered { opacity:.12; filter:grayscale(1); pointer-events:none; }
.periodic-table.highlighting .element-tile:not(.highlight) { opacity:.22; filter:grayscale(.7); }
.series-tile { display:grid; place-items:center; color:var(--family); border-style:dashed; background:color-mix(in srgb,var(--family) 8%,transparent); }
.series-tile span { font:max(6px,14cqi) var(--mono); white-space:nowrap; }
.series-tile:hover { background:color-mix(in srgb,var(--family) 18%,transparent); }
.table-inset { container-type:inline-size; grid-area:2 / 5 / 5 / 14; align-self:center; display:grid; grid-template-columns:auto 1fr; gap:0 4cqi; align-items:center; padding:0 2cqi; pointer-events:none; }
.inset-symbol { position:relative; display:grid; place-items:center; width:19cqi; aspect-ratio:1 / 1.08; color:var(--tile-text); border:1px solid color-mix(in srgb,var(--family) 60%,transparent); border-radius:2cqi; background:linear-gradient(155deg,color-mix(in srgb,var(--family) 55%,var(--tile)),color-mix(in srgb,var(--family) 14%,var(--tile))); box-shadow:0 1cqi 4cqi color-mix(in srgb,var(--family) 30%,transparent); font-size:8cqi; font-weight:800; }
.inset-symbol small { position:absolute; top:1.2cqi; left:1.6cqi; font:2.3cqi var(--mono); opacity:.85; }
.inset-text p { margin:0; } .inset-text .eyebrow { color:var(--family); font-size:2.2cqi; }
.inset-text h3 { margin:.5cqi 0; font-size:5.2cqi; line-height:1.05; letter-spacing:-.02em; }
.inset-text .inset-meta { color:var(--muted); font:2.4cqi/1.5 var(--mono); }
@container (max-width:260px) { .inset-text .inset-meta { display:none; } }
.legend { display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
.legend button { display:flex; align-items:center; gap:6px; padding:4px 9px; color:var(--text); border:1px solid color-mix(in srgb,var(--family) 35%,transparent); border-radius:20px; background:color-mix(in srgb,var(--family) 9%,transparent); font-size:11px; }
.legend button:hover,.legend button.active { background:color-mix(in srgb,var(--family) 24%,transparent); border-color:var(--family); }
.legend-chip { display:flex; align-items:center; gap:6px; padding:4px 9px; color:var(--text); border:1px solid color-mix(in srgb,var(--family) 35%,transparent); border-radius:20px; background:color-mix(in srgb,var(--family) 9%,transparent); font-size:11px; }
.legend-chip .swatch { width:9px; height:9px; border-radius:50%; background:var(--family); }
.legend.scale-legend { align-items:center; gap:8px; }
.scale-label { color:var(--muted); font:10px var(--mono); letter-spacing:.06em; text-transform:uppercase; }
.scale-value { font:11px var(--mono); white-space:nowrap; }
.scale-bar { flex:1 1 160px; max-width:420px; height:10px; border-radius:6px; }
.element-tile.no-data { opacity:.45; }
.periodic-table:not([data-color-mode="category"]) .element-tile em { opacity:.9; font-weight:600; }
.periodic-table:not([data-color-mode="category"]) .element-tile:not(.selected):not(.no-data) { background:linear-gradient(160deg,color-mix(in srgb,var(--family) 66%,var(--tile)),color-mix(in srgb,var(--family) 36%,var(--tile))); border-color:color-mix(in srgb,var(--family) 70%,transparent); }
.color-mode { display:flex; align-items:center; gap:6px; color:var(--muted); font-size:11px; }
.color-mode select { font-size:11px; }
.spectrum { display:block; width:100%; height:auto; margin:4px 0 6px; border-radius:6px; overflow:visible; }
.spectrum .spectrum-bg { fill:#05060a; }
.spectrum rect:not(.spectrum-bg) { mix-blend-mode:screen; }
.spectrum text { fill:var(--muted); font:15px var(--mono); text-anchor:middle; }
.spectrum-note,.empty-note { margin:0 0 10px; color:var(--muted); font-size:11px; line-height:1.5; }
.flame-test { display:flex; align-items:center; gap:10px; margin:6px 0 12px; }
.flame-test i { width:26px; height:38px; border-radius:50% 50% 45% 45% / 62% 62% 38% 38%; background:radial-gradient(circle at 50% 75%,#fff 0 12%,var(--flame) 45%,transparent 72%); filter:drop-shadow(0 0 8px var(--flame)); }
.flame-test small { display:block; color:var(--muted); font-size:10px; } .flame-test b { font-size:12px; }
.source-list { margin:0 0 8px; padding-left:16px; font-size:11px; line-height:1.7; }
.group-popover { --family:var(--accent); position:fixed; z-index:40; width:min(360px,calc(100vw - 20px)); max-height:min(70vh,560px); overflow:auto; padding:14px 16px; color:var(--text); border:1px solid color-mix(in srgb,var(--family) 55%,transparent); border-top:3px solid var(--family); border-radius:12px; background:color-mix(in srgb,var(--panel-solid) 96%,transparent); box-shadow:0 18px 50px rgba(0,0,0,.45); backdrop-filter:blur(14px); font-size:12px; line-height:1.5; pointer-events:auto; animation:popover-in .14s ease-out; }
.group-popover[hidden] { display:none; }
.group-popover .eyebrow { color:var(--family); }
.group-popover h3 { margin:2px 0 6px; font-size:17px; }
.group-popover h4 { margin:10px 0 4px; color:var(--muted); font:10px var(--mono); letter-spacing:.08em; text-transform:uppercase; }
.group-popover p { margin:0 0 6px; } .group-popover ul { margin:0 0 8px; padding-left:17px; } .group-popover li { margin:2px 0; }
.group-popover dl { margin:8px 0; font-size:11.5px; }
.popover-members { display:flex; flex-wrap:wrap; gap:3px; margin-top:8px; }
.popover-members span { min-width:26px; padding:2px 4px; text-align:center; border-radius:5px; background:color-mix(in srgb,var(--family) 22%,transparent); font:600 10.5px var(--mono); }
.popover-hint { margin-top:8px !important; color:var(--muted); font-size:10.5px; }
.group-label { cursor:help; border-radius:4px; } .group-label:hover,.group-label:focus-visible { color:var(--accent); outline:0; background:rgba(var(--accent-rgb),.1); }
@keyframes popover-in { from { opacity:0; transform:translateY(4px); } }
.hero-latin { margin:2px 0 0; color:var(--muted); font-size:11px; }
.swatch { width:8px; height:8px; border-radius:50%; background:var(--family); box-shadow:0 0 6px var(--family); }
.table-hint { margin:9px 0 0; color:var(--muted); font-size:10px; }
.alkali{--family:#fa6e75}.alkaline{--family:#f7ad61}.transition{--family:#5fb8f0}.post-transition{--family:#5fc497}.metalloid{--family:#b38be8}.nonmetal{--family:#7fdcae}.halogen{--family:#d478d8}.noble{--family:#4fd9e0}.lanthanide{--family:#e8b45a}.actinide{--family:#e0718d}

/* Periodic table expanded to the whole screen (Fullscreen API when available, fixed overlay otherwise) */
.periodic-panel.expanded { position:fixed; inset:0; z-index:30; display:flex; flex-direction:column; padding:18px clamp(10px,2.5vw,32px); border:0; border-radius:0; background:var(--bg); overflow:hidden; }
.periodic-panel.expanded .table-viewport { flex:1; display:flex; align-items:safe center; }
body.table-expanded { overflow:hidden; }
.periodic-panel.expanded .periodic-table { width:min(calc(100% * var(--zoom)), calc((100vh - 190px) * 1.62 * var(--zoom))); margin:auto; }

.back-to-atom { position:fixed; z-index:20; right:16px; bottom:16px; padding:9px 14px; color:var(--panel-solid); border:0; border-radius:22px; background:var(--accent); box-shadow:0 6px 24px rgba(var(--accent-rgb),.45); font-weight:700; font-size:12px; }
.back-to-atom[hidden] { display:none; }

dialog { width:min(440px,calc(100vw - 28px)); color:var(--text); border:1px solid var(--line); border-radius:12px; background:var(--panel-solid); box-shadow:0 30px 100px rgba(0,0,0,.6); }
dialog::backdrop { background:rgba(0,0,0,.64); backdrop-filter:blur(3px); }
dialog h2 { margin:3px 0 10px; } dialog p { color:var(--muted); font-size:12px; }
.dialog-close { float:right; color:var(--text); border:0; background:none; font-size:22px; }

/* Themes */
body[data-theme="laboratory"] { --scene-dark:0; --bg:#e8edf2; --panel:rgba(255,255,255,.88); --panel-solid:#fff; --text:#15233a; --muted:#5d6c84; --line:rgba(18,53,93,.16); --accent:#16779b; --accent-rgb:22,119,155; --tile:#f4f8fb; --tile-text:#15233a; --shadow:0 13px 35px rgba(33,63,91,.13); --scene:radial-gradient(ellipse at center,#d2e9f4,transparent 60%),#f8fbfd; background:linear-gradient(140deg,#f7fbff,#dbe6ee); }
body[data-theme="laboratory"] .stars,body[data-theme="minimal"] .stars,body[data-theme="light"] .stars { display:none; }
body[data-theme="cyberpunk"] { --bg:#0a0617; --panel:rgba(17,7,37,.83); --panel-solid:#160b2c; --text:#f4eaff; --muted:#b8a0d2; --line:rgba(238,94,255,.22); --accent:#ff64e5; --accent-rgb:255,100,229; --tile:#1c0a33; background:radial-gradient(circle at 50% 0,#4e126b,transparent 38%),#0a0617; }
body[data-theme="minimal"] { --bg:#101214; --panel:rgba(20,22,24,.92); --panel-solid:#1a1c1f; --text:#f3f3f0; --muted:#a5a6a5; --line:rgba(255,255,255,.12); --accent:#e5e8df; --accent-rgb:229,232,223; --tile:#202224; --scene:radial-gradient(ellipse at center,#24272a,transparent 60%),#141618; background:#101214; }
body[data-theme="holographic"] { --panel:rgba(23,30,65,.48); --panel-solid:#182250; --line:rgba(124,249,255,.26); --accent:#8ef7ff; --accent-rgb:142,247,255; --tile:#16244a; background:radial-gradient(circle at 20% 15%,#4a167b,transparent 30%),radial-gradient(circle at 90% 80%,#075766,transparent 35%),#07132b; }
body[data-theme="light"] { --scene-dark:0; --bg:#fdf9f2; --panel:rgba(255,255,255,.91); --panel-solid:#fff; --text:#25232a; --muted:#67656c; --line:rgba(44,39,54,.16); --accent:#007a8f; --accent-rgb:0,122,143; --tile:#faf7f2; --tile-text:#25232a; --shadow:0 13px 35px rgba(64,54,39,.11); --scene:radial-gradient(ellipse at center,#c9e4e7,transparent 60%),#f7f8f3; background:linear-gradient(135deg,#fffaf0,#e7f5f5); }
body[data-theme="light"] .canvas-wrap::after,body[data-theme="laboratory"] .canvas-wrap::after { display:none; }
body[data-theme="light"] .particle-key,body[data-theme="laboratory"] .particle-key { color:var(--text); background:rgba(255,255,255,.75); } body[data-theme="light"] .particle-key b,body[data-theme="laboratory"] .particle-key b { color:var(--text); }
body[data-theme="light"] .canvas-badge,body[data-theme="laboratory"] .canvas-badge { background:rgba(255,255,255,.7); }
body[data-theme="light"] .isotope-status.stable,body[data-theme="laboratory"] .isotope-status.stable { color:#1d7a4b; } body[data-theme="light"] .isotope-status.radioactive,body[data-theme="laboratory"] .isotope-status.radioactive { color:#9a5a00; } body[data-theme="light"] .isotope-status.metastable,body[data-theme="laboratory"] .isotope-status.metastable { color:#8a2fb0; } body[data-theme="light"] .isotope-status.observed,body[data-theme="light"] .isotope-status.representative,body[data-theme="laboratory"] .isotope-status.observed,body[data-theme="laboratory"] .isotope-status.representative { color:#4a5a72; }
body[data-theme="light"] .status-measured,body[data-theme="laboratory"] .status-measured { color:#1d7a4b; } body[data-theme="light"] .status-estimated,body[data-theme="laboratory"] .status-estimated { color:#9a5a00; }
body[data-theme="light"] .particle-tooltip span,body[data-theme="laboratory"] .particle-tooltip span { color:#d5e2f5; }

/* Responsive: data and atom stack above the table */
@media (max-width:1100px) {
  .stage { grid-template-columns:minmax(0,1.4fr) minmax(280px,1fr); }
  .atom-controls { grid-template-columns:1fr 1fr; }
}
@media (max-width:860px) {
  .app-shell { padding:10px; }
  .topbar { gap:10px; height:46px; margin-bottom:8px; }
  .subtitle { display:none; }
  .stage { grid-template-columns:1fr; gap:10px; margin-bottom:10px; }
  .canvas-wrap { flex:none; height:min(62vh,520px); min-height:320px; }
  .info-panel { height:auto; min-height:0; }
  .periodic-panel { padding:12px; }
  .periodic-toolbar { gap:8px; }
  .search { order:5; flex-basis:100%; max-width:none; }
  .filters { order:6; flex:1 1 100%; flex-wrap:wrap; } .filters select { flex:1; } .color-mode { flex:1 1 100%; } .color-mode select { flex:1; }
  .zoom-controls { margin-left:auto; }
  .theme-select { font-size:0; } .theme-select select { font-size:11px; }
}
@media (max-width:520px) {
  .scale-label { flex-basis:100%; } .scale-bar { flex:1 1 60px; }
  .brand { font-size:14px; }
  .header-actions { gap:4px; }
  .theme-select select { max-width:104px; padding:6px 5px; } #languageSelect { max-width:86px; }
  .atom-heading { padding:12px; } .atom-heading h2 { font-size:18px; }
  .mode-tabs { width:100%; } .mode-tab { flex:1; padding:6px 4px; font-size:10px; }
  .canvas-identity span { font-size:22px; }
  .atom-controls { padding:9px 12px; gap:7px; }
  .shell-row,.orbital-controls { padding-inline:12px; }
  .info-panel { padding:12px; }
  .stats { grid-template-columns:repeat(3,1fr); }
  .scene-overlay { top:auto; bottom:56px; right:10px; max-height:45%; }
  .periodic-title h1 { font-size:18px; }
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; transition-duration:.01ms!important; animation-duration:.01ms!important; } }

@media (max-width:420px) { .brand > span:last-child { display:none; } }