.atlas-page main{height:calc(100dvh - 76px);min-height:530px;display:grid;grid-template-columns:256px minmax(0,1fr) 260px;grid-template-rows:minmax(0,1fr) 112px;gap:14px;padding:14px}

.controls,.inspector{padding:20px;background:var(--panel);border:1px solid var(--line);border-radius:14px;overflow:auto;scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.controls h1{font-size:23px}
.controls .intro{font-size:12px;color:var(--muted);line-height:1.7}
.controls section{padding-top:18px;margin-top:22px;border-top:1px solid var(--line)}
.controls section h2{font-size:11px;text-transform:uppercase;letter-spacing:.07em;margin:0 0 12px;font-weight:750}
.inspector .eyebrow{margin-bottom:4px}
#fdi{font-size:64px;font-weight:750;line-height:1;letter-spacing:-.065em;color:var(--accent);margin:22px 0 14px}
.inspector h2{font-size:20px;line-height:1.4;margin:8px 0}
.inspector p{font-size:12px;color:var(--muted);line-height:1.7}
.inspector hr{border:0;border-top:1px solid var(--line);margin:24px 0}
.inspector h3{font-size:12px}
.inspector ul{padding-left:17px;font-size:12px;line-height:1.85;color:var(--muted)}
#structure-list{max-height:200px;overflow:auto}
#selected-label{position:absolute;left:26px;top:117px;color:#d7e8f7;font-size:12px;background:#172c40a8;border:1px solid #496279;border-radius:6px;padding:5px 9px;pointer-events:none;max-width:calc(100% - 52px)}
#study-context{font-size:12px;line-height:1.7;color:var(--muted);border-left:2px solid var(--accent);padding-left:12px;margin-top:22px}
#tissue-legend{position:absolute;left:20px;bottom:108px;max-width:calc(100% - 40px);font-size:11px;padding:8px 12px;border-radius:8px;color:#e4edf5;background:#172c40e8;border:1px solid #496279;pointer-events:none}
#tissue-legend small{display:block;color:#bed0df;font-size:10px}
.chart{grid-column:1/-1;background:var(--panel);border:1px solid var(--line);border-radius:14px;display:flex;align-items:center;justify-content:center;gap:30px;padding:10px 20px}
.chart>div:first-child{font-size:13px;min-width:145px}
.chart small{display:block;font-size:10px;color:var(--muted);line-height:1.8}
.chart>span{font-size:11px;color:var(--muted)}
#tooth-chart{display:grid;grid-template-columns:repeat(14,34px);gap:5px}
#tooth-chart button{font-size:11px;font-weight:600;border-radius:7px;padding:6px 0;min-height:34px;background:var(--soft);font-variant-numeric:tabular-nums}
#tooth-chart button[aria-pressed=true]{background:var(--accent);color:var(--panel);border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}
.tooth-search{margin:18px 0}
.tooth-search label{display:block;font-size:11px;font-weight:650;margin-bottom:7px}
.tooth-search input{width:100%;padding:11px;border:1px solid var(--line);border-radius:9px;background:var(--soft);color:var(--ink);font-size:12px}
.tooth-search input::placeholder{color:var(--muted)}
#search-results{display:grid;gap:5px;margin-top:7px}
#search-results button{text-align:left;font-size:12px}
#search-results p{font-size:12px;color:var(--muted);margin:5px 0}

@media(min-width:1800px){.atlas-page main{grid-template-columns:280px minmax(0,1fr) 285px;gap:18px;padding:18px}
.controls,.inspector{padding:24px}
}

@media(max-width:1200px){.atlas-page main{grid-template-columns:230px minmax(0,1fr);grid-template-rows:minmax(470px,1fr) 112px auto;height:auto;min-height:calc(100dvh - 76px)}
.controls,.stage{height:calc(100dvh - 230px);min-height:470px}
.inspector{grid-column:1/-1;grid-row:3;display:grid;grid-template-columns:1fr 1fr;gap:0 24px}
.inspector hr{display:none}
.inspector>details,.inspector>.missing{grid-column:2;grid-row:auto}
.chart{grid-row:2}
.chart>span{display:none}
}

@media(max-width:760px){.atlas-page main{height:auto;min-height:0;grid-template-columns:1fr;grid-template-rows:auto auto auto auto;gap:10px;padding:10px}
.stage{grid-row:1;height:65svh;min-height:450px}
.controls{grid-row:3;height:auto;min-height:0;padding:20px}
.controls h1 br{display:none}
.controls .intro{margin-bottom:0}
.inspector{grid-row:4;display:block}
.chart{grid-row:2;padding:12px 8px;display:block;overflow:auto}
.chart>div:first-child{display:flex;align-items:center;justify-content:space-between;margin:0 4px 8px;gap:8px;font-size:12px}
#tooth-chart{grid-template-columns:repeat(14,minmax(24px,1fr));gap:3px;min-width:375px}
#tooth-chart button{min-height:36px;font-size:10px}
#selected-label{left:18px;top:112px;font-size:11px;max-width:calc(100% - 36px)}
#study-context{font-size:12px}
#tissue-legend{bottom:108px;font-size:10px}
.chart>span{display:none}
}