:root {
  --bg: #080e1a;
  --bg2: #0d1527;
  --bg3: #111d35;
  --border: rgba(106,155,255,0.24);
  --text: #e4efff;
  --dim: #a8bddf;
  --strong-text: #f8fbff;
  --header-title: #c6dcff;
  --header-bg: rgba(8,14,26,0.92);
  --panel-bg: rgba(10,16,32,0.97);
  --tile-border: rgba(255,255,255,0.16);
  --tile-z: #b8cef1;
  --tile-name: #d1e1fa;
  --tile-mass: #9ab3d6;
  --placeholder-border: rgba(165,195,243,0.36);
  --panel-close-border: rgba(150,180,230,0.35);
  --panel-close-text: #bfd4f5;
  --info-bg: rgba(255,255,255,0.06);
  --info-val: #f1f6ff;
  --section-title: #b3c7e6;
  --tooltip-bg: rgba(8,14,30,0.96);
  --tooltip-border: rgba(80,140,255,0.36);
  --tooltip-shadow: 0 4px 24px rgba(0,0,0,0.6);
  --desc-text: #bfd4f4;
  --desc-bg: rgba(255,255,255,0.04);
  --hint-text: #95aed2;
  --grid-line: rgba(50,100,200,0.05);
  --fblock-label: rgba(150,180,230,0.45);
  --period-label: rgba(150,180,230,0.4);
  --table-scroll: rgba(80,140,255,0.22);
  --toggle-bg: rgba(24,43,76,0.7);
  --toggle-text: #e5f0ff;
  --toggle-border: rgba(133,170,233,0.45);
  --toggle-hover: rgba(33,59,100,0.9);
  --atom-canvas-bg-1: #030a18;
  --atom-canvas-bg-2: #01050e;
  --atom-canvas-star: #ffffff;
  --panel-w: 380px;
  /* Category colors */
  --alkali:       #ff5c6a;
  --alkaline:     #ff9a3c;
  --transition:   #3a9fd8;
  --post-trans:   #4ecba0;
  --metalloid:    #b07ff5;
  --nonmetal:     #8ddb5a;
  --halogen:      #f0e050;
  --noble:        #50e0f0;
  --lanthanide:   #f06aaa;
  --actinide:     #f09050;
  --unknown:      #7a90a8;
}

:root[data-theme="light"] {
  --bg: #edf3fb;
  --bg2: #e3edf9;
  --bg3: #d8e7f7;
  --border: rgba(48,83,136,0.24);
  --text: #112543;
  --dim: #405a81;
  --strong-text: #0f2342;
  --header-title: #1b416f;
  --header-bg: rgba(248,252,255,0.92);
  --panel-bg: rgba(245,250,255,0.98);
  --tile-border: rgba(32,69,124,0.34);
  --tile-z: #2f4b75;
  --tile-name: #1f3860;
  --tile-mass: #4c6589;
  --placeholder-border: rgba(57,92,147,0.45);
  --panel-close-border: rgba(54,92,145,0.45);
  --panel-close-text: #2f4f77;
  --info-bg: rgba(255,255,255,0.8);
  --info-val: #0d2340;
  --section-title: #35557d;
  --tooltip-bg: rgba(253,255,255,0.98);
  --tooltip-border: rgba(60,98,152,0.35);
  --tooltip-shadow: 0 10px 30px rgba(29,51,89,0.18);
  --desc-text: #233f65;
  --desc-bg: rgba(255,255,255,0.84);
  --hint-text: #4d678c;
  --grid-line: rgba(59,97,153,0.09);
  --fblock-label: rgba(59,92,143,0.55);
  --period-label: rgba(58,93,146,0.58);
  --table-scroll: rgba(56,93,150,0.36);
  --toggle-bg: rgba(227,238,250,0.96);
  --toggle-text: #183761;
  --toggle-border: rgba(57,93,147,0.44);
  --toggle-hover: rgba(208,226,245,1);
  --atom-canvas-bg-1: #dbe8f7;
  --atom-canvas-bg-2: #cddff4;
  --atom-canvas-star: #7892b5;
}
* { margin:0; padding:0; box-sizing:border-box; }
html, body { width:100%; height:100%; overflow:hidden; background:var(--bg); color:var(--text); font-family:'Rajdhani', sans-serif; }

/* Animated background grid */
body::before {
  content:''; position:fixed; inset:0;
  background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events:none; z-index:0;
}

#app { position:relative; z-index:1; width:100%; height:100vh; display:flex; flex-direction:column; }

header {
  padding: 12px 24px 8px;
  display:flex; align-items:baseline; gap:16px;
  border-bottom: 1px solid var(--border);
  background: var(--header-bg);
  backdrop-filter: blur(10px);
  flex-shrink:0;
  flex-wrap: wrap;
}
header h1 { font-size:22px; font-weight:700; letter-spacing:4px; color:var(--header-title); font-family:'Share Tech Mono',monospace; }
header p { font-size:11px; color:var(--dim); letter-spacing:2px; text-transform:uppercase; }

.theme-toggle {
  margin-left: auto;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid var(--toggle-border);
  color: var(--toggle-text);
  background: var(--toggle-bg);
  cursor: pointer;
  font-family: 'Share Tech Mono', monospace;
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.theme-toggle:hover {
  background: var(--toggle-hover);
  border-color: color-mix(in srgb, var(--toggle-border) 65%, var(--header-title));
}

.legend {
  display:flex; gap:10px; margin-left:0; flex-wrap:wrap; align-items:center;
}
.legend-item { display:flex; align-items:center; gap:5px; font-size:10px; letter-spacing:1px; color:var(--dim); }
.legend-dot { width:8px; height:8px; border-radius:2px; }

.table-wrap {
  flex:1; overflow:auto; padding:10px 10px 10px 16px;
  display:flex; flex-direction:column; gap:0; align-items:flex-start;
  transition: margin-right 0.3s ease;
}
.table-wrap.panel-open { margin-right: var(--panel-w); }

/* THE TABLE */
.ptable {
  display:grid;
  grid-template-columns: repeat(18, minmax(50px, 56px));
  grid-template-rows: repeat(10, 52px);
  gap: 3px;
  min-width: fit-content;
}

.el {
  border-radius: 4px;
  border: 1px solid var(--tile-border);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  cursor:pointer; position:relative; transition: transform 0.1s, box-shadow 0.15s, border-color 0.15s;
  overflow:hidden; padding:2px;
}
.el::before {
  content:''; position:absolute; inset:0;
  background: var(--cat-color);
  opacity:0.13; transition:opacity 0.15s;
}
.el:hover::before { opacity:0.28; }
.el:hover {
  transform: scale(1.12);
  box-shadow: 0 0 14px var(--cat-color), 0 0 4px rgba(255,255,255,0.1);
  border-color: var(--cat-color);
  z-index: 10;
}
.el.selected {
  border-color: var(--cat-color);
  box-shadow: 0 0 18px var(--cat-color);
  transform: scale(1.08);
  z-index:9;
}

.el .el-z { font-size:9px; color:var(--tile-z); font-family:'Share Tech Mono',monospace; line-height:1; width:100%; text-align:left; padding-left:4px; }
.el .el-sym { font-size:20px; font-weight:700; font-family:'Rajdhani',sans-serif; color:var(--strong-text); line-height:1.1; text-shadow: 0 0 12px var(--cat-color); }
.el .el-name { font-size:7.5px; color:var(--tile-name); letter-spacing:0.3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; text-align:center; }
.el .el-mass { font-size:7px; color:var(--tile-mass); font-family:'Share Tech Mono',monospace; }

/* Placeholder tiles */
.el-placeholder {
  border-radius:4px; border: 1px dashed var(--placeholder-border);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  font-size:9px; color:var(--dim); font-family:'Share Tech Mono',monospace; letter-spacing:1px;
  gap:2px;
}
.el-placeholder span { font-size:7px; opacity:0.6; }

/* Gap row for f-block */
.gap-row { grid-row: 8; grid-column: 1 / -1; height:8px; }
.f-label {
  grid-row:9; grid-column:1;
  display:flex; align-items:center; justify-content:center;
  font-size:9px; color:var(--fblock-label); font-family:'Share Tech Mono',monospace; letter-spacing:1px;
  writing-mode:vertical-rl; text-orientation:mixed;
}

/* SIDE PANEL */
#panel {
  position:fixed; top:0; right: calc(-1 * var(--panel-w) - 10px);
  width:var(--panel-w); height:100vh;
  background: var(--panel-bg);
  border-left: 1px solid var(--border);
  backdrop-filter: blur(20px);
  transition: right 0.3s cubic-bezier(0.4,0,0.2,1);
  z-index:100; display:flex; flex-direction:column; overflow:hidden;
}
#panel.open { right:0; }

.panel-header {
  padding:20px 20px 14px;
  border-bottom: 1px solid var(--border);
  position:relative; flex-shrink:0;
}
.panel-close {
  position:absolute; top:14px; right:14px;
  background:none; border:1px solid var(--panel-close-border); color:var(--panel-close-text);
  width:26px; height:26px; border-radius:4px; cursor:pointer; font-size:14px;
  display:flex; align-items:center; justify-content:center;
  transition: border-color 0.2s, color 0.2s;
}
.panel-close:hover { border-color:rgba(255,100,100,0.6); color:#ff6060; }

.panel-sym {
  font-size:64px; font-weight:700; font-family:'Rajdhani',sans-serif;
  line-height:1; text-shadow: 0 0 30px var(--el-color);
}
.panel-name { font-size:20px; font-weight:500; letter-spacing:3px; margin-top:2px; text-transform:uppercase; }
.panel-z { font-size:11px; color:var(--dim); font-family:'Share Tech Mono',monospace; letter-spacing:2px; margin-top:4px; }
.cat-badge {
  display:inline-block; padding:3px 10px; border-radius:20px; font-size:10px; letter-spacing:1.5px;
  margin-top:8px; text-transform:uppercase; font-weight:600;
  background: color-mix(in srgb, var(--el-color) 20%, transparent);
  border: 1px solid color-mix(in srgb, var(--el-color) 50%, transparent);
  color: var(--el-color);
}

.panel-body { flex:1; overflow-y:auto; padding:16px 20px; display:flex; flex-direction:column; gap:16px; }
.panel-body::-webkit-scrollbar { width:4px; }
.panel-body::-webkit-scrollbar-track { background:transparent; }
.panel-body::-webkit-scrollbar-thumb { background:var(--table-scroll); border-radius:2px; }

.info-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.info-row { display:flex; flex-direction:column; gap:2px; padding:8px 10px; border-radius:6px; background:var(--info-bg); border:1px solid var(--border); }
.info-label { font-size:9px; color:var(--dim); letter-spacing:2px; text-transform:uppercase; font-family:'Share Tech Mono',monospace; }
.info-val { font-size:15px; font-weight:600; color:var(--info-val); }

.section-title { font-size:10px; letter-spacing:3px; color:var(--section-title); text-transform:uppercase; font-family:'Share Tech Mono',monospace; padding-bottom:6px; border-bottom:1px solid var(--border); }

/* Atom canvas */
#atom-canvas-wrap {
  border-radius:8px; overflow:hidden; border:1px solid var(--border);
  background:var(--atom-canvas-bg-2); position:relative;
}
#atom-canvas { display:block; width:100%; aspect-ratio:1; }
.atom-zoom-ctrl {
  position:absolute; bottom:8px; right:8px;
  display:flex; gap:4px;
}
.atom-zoom-ctrl button {
  background:var(--toggle-bg); border:1px solid var(--toggle-border);
  color:var(--toggle-text); border-radius:4px; width:26px; height:26px;
  cursor:pointer; font-size:14px; display:flex; align-items:center; justify-content:center;
  font-family:'Share Tech Mono',monospace;
}
.atom-zoom-label {
  position:absolute; bottom:8px; left:8px;
  font-size:9px; color:var(--dim); font-family:'Share Tech Mono',monospace;
}
.atom-nucleus-info {
  position:absolute; top:8px; left:8px;
  font-size:9px; color:var(--hint-text); font-family:'Share Tech Mono',monospace;
  line-height:1.7;
}

.electron-config {
  font-family:'Share Tech Mono',monospace; font-size:12px; color:var(--text);
  padding:10px 12px; background:var(--info-bg); border-radius:6px;
  border:1px solid var(--border); line-height:1.6;
}

.tooltip {
  position:fixed; pointer-events:none; z-index:200;
  background:var(--tooltip-bg); border:1px solid var(--tooltip-border);
  border-radius:6px; padding:8px 12px; font-size:11px;
  color:var(--text); backdrop-filter:blur(10px);
  box-shadow: var(--tooltip-shadow);
  transition: opacity 0.1s; opacity:0;
}
.tooltip.show { opacity:1; }
.tooltip strong { font-size:14px; display:block; margin-bottom:2px; color:var(--strong-text); }
.tooltip em { color:var(--dim); font-style:normal; font-size:10px; }

/* Scrollbar for table */
.table-wrap::-webkit-scrollbar { width:6px; height:6px; }
.table-wrap::-webkit-scrollbar-track { background:transparent; }
.table-wrap::-webkit-scrollbar-thumb { background:var(--table-scroll); border-radius:3px; }

@keyframes fadeIn { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:none} }
.panel-body > * { animation: fadeIn 0.25s ease both; }

/* ─────────────────────────────────────────────
   RESPONSIVE / MOBILE STYLES
   ───────────────────────────────────────────── */

/* Tablets & small desktops */
@media (max-width: 1024px) {
  .table-wrap.panel-open { margin-right: 0; }

  #panel {
    --panel-w: 340px;
    width: var(--panel-w);
    right: calc(-1 * var(--panel-w) - 10px);
  }

  .legend { gap: 6px; }
  .legend-item { font-size: 9px; }
}

/* Mobile landscape / small tablets */
@media (max-width: 768px) {
  html, body { overflow: auto; }

  header {
    padding: 10px 12px 8px;
    flex-direction: column;
    gap: 6px;
    align-items: flex-start;
  }
  header h1 { font-size: 16px; letter-spacing: 2px; }
  header p { font-size: 9px; letter-spacing: 1px; }

  .legend {
    margin-left: 0;
    gap: 6px;
  }
  .theme-toggle {
    margin-left: 0;
  }
  .legend-item { font-size: 8px; gap: 3px; }
  .legend-dot { width: 6px; height: 6px; }

  .table-wrap {
    padding: 6px;
    align-items: stretch;
  }
  .table-wrap.panel-open { margin-right: 0; }

  .ptable {
    grid-template-columns: repeat(18, 36px);
    grid-template-rows: repeat(10, 40px);
    gap: 2px;
  }

  .el .el-z { font-size: 7px; padding-left: 2px; }
  .el .el-sym { font-size: 14px; }
  .el .el-name { font-size: 6px; }
  .el .el-mass { font-size: 5.5px; }

  .el-placeholder { font-size: 7px; }
  .el-placeholder span { font-size: 6px; }

  /* Panel becomes a full-width bottom sheet */
  #panel {
    --panel-w: 100%;
    width: 100%;
    height: 60vh;
    top: auto;
    bottom: -65vh;
    right: 0;
    left: 0;
    border-left: none;
    border-top: 1px solid var(--border);
    border-radius: 16px 16px 0 0;
    transition: bottom 0.3s cubic-bezier(0.4,0,0.2,1);
  }
  #panel.open {
    bottom: 0;
    right: 0;
  }

  .panel-header { padding: 16px 16px 10px; }
  .panel-sym { font-size: 48px; }
  .panel-name { font-size: 16px; letter-spacing: 2px; }
  .panel-z { font-size: 10px; }
  .cat-badge { font-size: 9px; padding: 2px 8px; }

  .panel-body { padding: 12px 16px; }
  .info-val { font-size: 13px; }

  /* Hide tooltip on touch devices - not useful */
  .tooltip { display: none; }
}

/* Small phones (portrait) */
@media (max-width: 480px) {
  header {
    padding: 8px 10px 6px;
  }
  header h1 { font-size: 14px; letter-spacing: 1px; }
  header p { font-size: 8px; }

  .legend { gap: 4px; }
  .legend-item { font-size: 7px; }
  .legend-dot { width: 5px; height: 5px; }

  .table-wrap { padding: 4px; }

  .ptable {
    grid-template-columns: repeat(18, 28px);
    grid-template-rows: repeat(10, 34px);
    gap: 1px;
  }

  .el { border-radius: 2px; padding: 1px; }
  .el .el-z { font-size: 6px; padding-left: 1px; }
  .el .el-sym { font-size: 11px; }
  .el .el-name { display: none; }
  .el .el-mass { display: none; }

  .el-placeholder { font-size: 6px; }
  .el-placeholder span { font-size: 5px; }
  .gap-row { height: 4px; }

  #panel { height: 70vh; bottom: -75vh; }
  #panel.open { bottom: 0; }

  .panel-sym { font-size: 40px; }
  .panel-name { font-size: 14px; }
  .info-grid { grid-template-columns: 1fr 1fr; gap: 6px; }
  .info-row { padding: 6px 8px; }
  .info-label { font-size: 8px; }
  .info-val { font-size: 12px; }

  .electron-config { font-size: 10px; padding: 8px; }

  .atom-zoom-ctrl button { width: 30px; height: 30px; font-size: 16px; }
}