/* ...existing styles... */
:root { --bg: #fff; --fg: #111; --muted: #666; --card: #f7f7f7; --border: #e6e6e6; --accent: #0f62fe; }
* { box-sizing: border-box; }
html,body { margin:0; padding:0; background:var(--bg); color:var(--fg); font-family:"Noto Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; line-height:1.5; }
.container { max-width: 1100px; margin: 0 auto; padding: 0 16px; }
.site-header { position: sticky; top:0; background: rgba(255,255,255,0.9); backdrop-filter: saturate(120%) blur(8px); border-bottom:1px solid var(--border); z-index: 10; }
.header-inner { display:flex; align-items:center; justify-content:space-between; height:64px; }
.brand { display:flex; align-items:center; gap:10px; font-weight:700; }
.brand-mark { display:inline-grid; place-items:center; width:32px; height:32px; border:1px solid var(--fg); border-radius:8px; font-family:"Space Mono", monospace; }
.nav a { color:var(--fg); text-decoration:none; margin-left:16px; padding:8px 10px; border-radius:8px; }
.nav a:hover { background:var(--card); }
.hero { padding: 56px 0 24px; border-bottom:1px solid var(--border); }
.hero h1 { margin:0 0 8px; font-size: clamp(28px, 3vw, 42px); }
.hero p { margin:0 0 16px; color: var(--muted); }
.search-bar input { width:100%; height:44px; border:1px solid var(--border); border-radius:10px; padding:0 12px; }
.quick-links { margin-top:10px; display:flex; flex-wrap:wrap; gap:8px; }
.chip { display:inline-block; padding:6px 12px; border:1px solid var(--border); border-radius:999px; text-decoration:none; color:var(--fg); }
.section { padding: 32px 0; }
.section-header { display:flex; align-items:center; justify-content:space-between; gap:12px; }
h2 { margin:0 0 10px; font-size: clamp(22px, 2.4vw, 28px); }
.card { background: var(--card); border:1px solid var(--border); border-radius:14px; padding:16px; }
.calculators { display:grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap:16px; }
.stack { display:grid; gap:6px; }
input, select, button { font: inherit; }
input, select { border:1px solid var(--border); border-radius:10px; padding:10px 12px; background:#fff; }
.btn { appearance:none; border:none; cursor:pointer; padding:10px 14px; border-radius:10px; background: var(--fg); color:#fff; transition: transform .04s ease, opacity .2s; }
.btn:hover { opacity: .95; }
.btn:active { transform: translateY(1px); }
.btn.ghost { background: transparent; color: var(--fg); border:1px solid var(--border); }
.btn.small { padding:6px 10px; }
.output { display:block; min-height: 24px; margin-top: 8px; font-family: "Space Mono", monospace; }
.small { color: var(--muted); font-size: 12px; }
.hint { color: var(--muted); font-size: 13px; margin-top: 10px; }

.periodic-grid { display:grid; grid-template-columns: repeat(18, minmax(28px, 1fr)); gap:6px; }
.elem { position:relative; background:#fff; border:1px solid var(--border); border-radius:8px; padding:6px; min-height:56px; display:grid; grid-template-rows:auto 1fr auto; align-items:start; cursor:pointer; transition: box-shadow .2s ease, transform .06s ease; }
.elem:hover { box-shadow: 0 6px 18px rgba(0,0,0,.08); transform: translateY(-1px); }
.elem .Z { font-size:10px; color: var(--muted); }
.elem .symbol { font-weight:700; }
.elem .name { font-size:9px; color: var(--muted); }
.elem[data-cat="alkali"] { border-color:#ffd8a8; }
.elem[data-cat="alkaline"] { border-color:#ffe066; }
.elem[data-cat="transition"] { border-color:#a5d8ff; }
.elem[data-cat="post-transition"] { border-color:#d0ebff; }
.elem[data-cat="metalloid"] { border-color:#b2f2bb; }
.elem[data-cat="nonmetal"] { border-color:#c3fae8; }
.elem[data-cat="halogen"] { border-color:#fcc2d7; }
.elem[data-cat="noble"] { border-color:#eebefa; }
.elem[data-cat="lanthanoid"], .elem[data-cat="actinoid"] { border-style:dashed; }

.modal { position:fixed; inset:0; display:grid; place-items:center; background: rgba(0,0,0,.4); }
.modal[hidden] { display:none; }
.modal-content { width:min(680px, 92vw); background:#fff; border-radius:16px; border:1px solid var(--border); padding:16px; }
.close-modal { position:absolute; margin-left:-6px; margin-top:-6px; transform: translate(6px, -6px); border:none; background:#fff; border-radius:50%; width:32px; height:32px; cursor:pointer; }

.accordion { border:1px solid var(--border); border-radius:12px; padding:10px 12px; background:#fff; margin-bottom:10px; }
.acc-body { padding-top:8px; color:#333; }

.grid2 { display:grid; grid-template-columns: 1fr 1fr; gap:10px; }
@media (max-width: 640px) { .grid2 { grid-template-columns: 1fr; } .nav { display:none; } }

.site-footer { border-top:1px solid var(--border); padding:16px 0; margin-top:24px; }
.footer-inner { display:flex; align-items:center; justify-content:space-between; }
/* ...existing styles... */