/* ==========================
   Reset & base
   ========================== */
:root{
  --bg:#0f1720; --card:#0b1220; --muted:#94a3b8; --glass: rgba(255,255,255,0.04);
  --accent: #10b981;
  --gap:8px;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:Inter,system-ui,Segoe UI,Roboto,Arial;background:var(--bg);color:#e6eef6}
a{color:inherit}

/* ==========================
   Header / controls
   ========================== */
header{display:flex;align-items:center;gap:12px;padding:18px;backdrop-filter: blur(6px);background:linear-gradient(180deg, rgba(255,255,255,0.02), transparent)}
.brand{display:flex;align-items:center;gap:12px}
.logo{width:44px;height:44px;border-radius:8px;background:linear-gradient(135deg,#0ea5a4,#06b6d4);display:flex;align-items:center;justify-content:center;font-weight:700}
h1{font-size:1.05rem;margin:0}
.controls{margin-left:auto;display:flex;gap:8px;align-items:center}
input[type="search"]{padding:8px 10px;border-radius:8px;border:1px solid rgba(255,255,255,0.06);background:transparent;color:inherit;min-width:200px}
select,button{padding:8px 10px;border-radius:8px;border:1px solid rgba(255,255,255,0.06);background:var(--card);color:inherit}

/* Melhor contraste no menu do select (lista de opções) */
select{appearance:none;-webkit-appearance:none;-moz-appearance:none}
select option{background:var(--card);color:#e6eef6}
select:focus{outline:2px solid rgba(16,185,129,0.5);outline-offset:2px}
/* Edge/IE setinha */
select::-ms-expand{display:none}

/* ==========================
   Periodic table grid
   ========================== */
main{padding:14px}
#table-wrap{overflow:auto;padding-bottom:20px}
#periodic{
  display:grid;
  grid-template-columns: repeat(18, 64px);
  grid-auto-rows: 64px;
  gap: var(--gap);
  width:max-content;
  padding:12px;
  background:linear-gradient(180deg, rgba(255,255,255,0.02), transparent);
  border-radius:12px;
}
.elem{
  border-radius:8px;padding:6px;display:flex;flex-direction:column;justify-content:space-between;cursor:pointer;box-shadow:0 2px 0 rgba(0,0,0,0.4);
  background:var(--card);min-width:64px;min-height:64px;transition:transform .12s ease, box-shadow .12s ease;position:relative;overflow:hidden
}
.elem:hover{transform:translateY(-6px);box-shadow:0 10px 30px rgba(2,6,23,0.6)}
.sym{font-size:1.15rem;font-weight:700}
.num{font-size:0.72rem;color:var(--muted)}
.name{font-size:0.65rem;color:var(--muted)}
.mass{font-size:0.63rem;color:var(--muted);text-align:right}

/* categories colors (soft) */
.cat-alkali{background:linear-gradient(180deg, rgba(255,207,102,0.08), rgba(255,207,102,0.03));border:1px solid rgba(255,207,102,0.06)}
.cat-alkaline{background:linear-gradient(180deg, rgba(244,167,115,0.06), rgba(244,167,115,0.02));border:1px solid rgba(244,167,115,0.05)}
.cat-lanth{background:linear-gradient(180deg, rgba(179,158,255,0.06), rgba(179,158,255,0.02));border:1px solid rgba(179,158,255,0.06)}
.cat-act{background:linear-gradient(180deg, rgba(207,133,255,0.06), rgba(207,133,255,0.02));border:1px solid rgba(207,133,255,0.06)}
.cat-transition{background:linear-gradient(180deg, rgba(170,214,255,0.04), rgba(170,214,255,0.01));border:1px solid rgba(170,214,255,0.04)}
.cat-metalloid{background:linear-gradient(180deg, rgba(164,255,192,0.04), rgba(164,255,192,0.01));border:1px solid rgba(164,255,192,0.04)}
.cat-nonmetal{background:linear-gradient(180deg, rgba(255,172,172,0.04), rgba(255,172,172,0.01));border:1px solid rgba(255,172,172,0.04)}
.cat-halogen{background:linear-gradient(180deg, rgba(255,210,115,0.04), rgba(255,210,115,0.01));border:1px solid rgba(255,210,115,0.04)}
.cat-noble{background:linear-gradient(180deg, rgba(179,248,255,0.04), rgba(179,248,255,0.01));border:1px solid rgba(179,248,255,0.04)}
.cat-post_transition{background:linear-gradient(180deg, rgba(255,192,203,0.04), rgba(255,192,203,0.01));border:1px solid rgba(255,192,203,0.04)}

/* tooltip */
.elem .tooltip{position:absolute;left:8px;top:8px;background:rgba(0,0,0,0.6);padding:6px;border-radius:6px;font-size:0.7rem;display:none}

/* side panel */
#panel{position:fixed;right:20px;top:20px;width:320px;max-height:calc(100vh - 40px);background:var(--card);border-radius:12px;padding:20px;box-shadow:0 20px 40px rgba(0,0,0,0.4);overflow-y:auto;z-index:100}
#panel.hidden{display:none}
#panel .close{float:right;cursor:pointer;padding:6px;border-radius:6px}
#panel .close:hover{background:var(--glass)}
#panel h2{margin:6px 0}
.row{display:flex;justify-content:space-between;gap:8px}
.badge{padding:6px 8px;border-radius:8px;background:var(--glass);font-size:0.85rem}

/* responsive */
@media (max-width:900px){
  #periodic{grid-template-columns: repeat(9, 56px);grid-auto-rows:56px}
  header{flex-wrap:wrap}
  .controls{width:100%;justify-content:space-between}
  #panel{position:fixed;left:8px;right:8px;bottom:8px;top:auto;height:auto}
  
}