.chem-reference-tabs{display:grid;grid-template-columns:1fr 1fr;gap:.65rem;margin:0 0 1rem}.chem-reference-tabs button{min-height:52px;padding:.7rem 1rem;border:1px solid var(--border);border-radius:14px;background:#fffdf8;color:var(--muted);font:700 .82rem Helvetica,Arial,sans-serif;cursor:pointer;transition:transform .18s ease,border-color .18s ease,background .18s ease,color .18s ease}.chem-reference-tabs button:hover{transform:translateY(-2px);border-color:#8fac9c;color:var(--accent)}.chem-reference-tabs button.active{border-color:var(--accent);background:var(--accent);color:#fff;box-shadow:0 8px 22px rgba(56,108,91,.18)}.chem-reference-view{display:none}.chem-reference-view.active{display:block}.fg-reference{padding:clamp(1rem,2.4vw,1.5rem);border:1px solid var(--border);border-radius:20px;background:linear-gradient(145deg,#fffdf8,#f6f8f3)}.fg-heading span{color:var(--accent);font-size:.62rem;font-weight:800;letter-spacing:.11em;text-transform:uppercase}.fg-heading h2{margin:.25rem 0 .3rem;font:700 clamp(1.45rem,3vw,2rem)/1.1 Helvetica,Arial,sans-serif;letter-spacing:-.035em}.fg-heading p{margin:0;color:var(--muted);font-size:.72rem}.fg-detail{display:grid;grid-template-columns:minmax(150px,.6fr) minmax(250px,1.4fr) minmax(150px,.7fr);align-items:center;gap:.9rem;margin:1rem 0;padding:1rem;border:1px solid #cadbd4;border-radius:17px;background:#fff;box-shadow:0 9px 24px rgba(54,83,68,.07)}.fg-structure span{display:block;color:var(--accent);font:700 clamp(1.35rem,3vw,2rem)/1.1 Helvetica,Arial,sans-serif}.fg-structure small,.fg-example span{display:block;margin-top:.25rem;color:var(--muted);font-size:.56rem;text-transform:uppercase;letter-spacing:.07em}.fg-description h3{margin:.22rem 0 .25rem;font-size:1rem}.fg-description h3 small{color:var(--muted);font-size:.68rem;font-weight:600}.fg-description p{margin:0;color:var(--muted);font-size:.68rem;line-height:1.45}.fg-level{display:inline-block;padding:.18rem .38rem;border-radius:999px;background:#e8f2ed;color:var(--accent);font-size:.52rem;font-weight:800}.fg-example{padding-left:.9rem;border-left:1px solid var(--border)}.fg-example strong,.fg-example small{display:block}.fg-example strong{margin:.2rem 0;font-size:.78rem}.fg-example small{color:var(--accent);font-size:.68rem}.fg-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.55rem}.fg-grid button{display:flex;min-height:112px;flex-direction:column;align-items:flex-start;padding:.72rem;border:1px solid var(--border);border-radius:13px;background:#fffdf8;color:var(--text);text-align:left;cursor:pointer;transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease}.fg-grid button:hover{transform:translateY(-2px);border-color:#8fac9c;box-shadow:0 8px 18px rgba(54,83,68,.08)}.fg-grid button.selected{border-color:var(--accent);background:#edf5f0;box-shadow:0 0 0 2px rgba(56,108,91,.12)}.fg-grid button>span{color:var(--accent);font:750 .92rem Helvetica,Arial,sans-serif}.fg-grid button strong{margin-top:auto;font-size:.7rem}.fg-grid button small{margin-top:.18rem;color:var(--muted);font-size:.55rem}
@media(max-width:850px){.fg-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.fg-detail{grid-template-columns:1fr 1.4fr}.fg-example{grid-column:1/-1;padding:.7rem 0 0;border-top:1px solid var(--border);border-left:0}}
@media(max-width:580px){.chem-reference-tabs{grid-template-columns:1fr}.fg-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.fg-detail{grid-template-columns:1fr}.fg-example{grid-column:auto}.fg-grid button{min-height:105px}}