:root {
  --atlas-ground: #e1dbd7;
  --atlas-paper: #fff;
  --atlas-field: rgba(244, 241, 236, .71);
  --atlas-window: rgba(255, 255, 255, .3);
  --atlas-slip: rgba(255, 255, 255, .62);
  --atlas-ink: #393633;
  --atlas-value: #46423e;
  --atlas-title: #4c4844;
  --atlas-body: #5e5853;
  --atlas-note: #6b625c;
  --atlas-subtle: #77706a;
  --atlas-muted: #8a8078;
  --atlas-footer: #938a83;
  --atlas-line: rgba(110, 103, 96, .42);
  --atlas-field-line: rgba(143, 134, 126, .4);
  --atlas-track: #d9d1cc;
  --atlas-wood: #b5a19a;
  --atlas-rock: #a95f52;
  --atlas-sedimentary: #c19a55;
  --atlas-metamorphic: #718675;
  --atlas-mineral: #6f8fa6;
  --atlas-mono: "Intel One Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --atlas-sans: Inter, -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; min-width: 320px; min-height: 100vh; color: var(--atlas-ink); background: var(--atlas-ground); font-family: var(--atlas-sans); }
button, input, a { border-radius: 0; color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }

.atlas-page { width: min(1420px, calc(100% - 48px)); margin: 0 auto; padding: 34px 0 84px; }
.atlas-meta-line { display: flex; justify-content: space-between; gap: 24px; margin-bottom: 13px; color: var(--atlas-muted); font: 9px/1.5 var(--atlas-mono); letter-spacing: .05em; }
.atlas-window { min-height: 720px; padding: 36px; border: 3px solid #000; background: var(--atlas-window); }
.atlas-loading, .atlas-error { min-height: 610px; display: grid; place-content: center; text-align: center; }
.atlas-loading span, .atlas-error span { color: var(--atlas-muted); font: 9px/1.5 var(--atlas-mono); letter-spacing: .08em; }
.atlas-loading b, .atlas-error b { margin-top: 12px; font: 20px/1.45 var(--atlas-mono); font-weight: 400; }
.atlas-error button { justify-self: center; margin-top: 20px; padding: 10px 14px; border: 1px solid #000; background: transparent; cursor: pointer; font: 9px var(--atlas-mono); }

.atlas-kicker { margin: 0; color: #756d66; font: 10px/1.45 var(--atlas-mono); letter-spacing: .04em; }
.atlas-title { margin: 9px 0 0; font: 34px/1.2 var(--atlas-mono); font-weight: 400; letter-spacing: .02em; text-wrap: pretty; }
.atlas-lede { max-width: 680px; margin: 8px 0 0; color: var(--atlas-body); font-size: 13px; line-height: 1.75; text-wrap: pretty; }
.atlas-rule { height: 2px; margin-top: 18px; background: var(--atlas-line); }

.overview-hero { display: grid; grid-template-columns: minmax(280px, .82fr) repeat(2, minmax(0, 1fr)); gap: 24px; }
.overview-intro { min-height: 330px; padding: 6px 10px 22px 0; }
.overview-count { display: flex; align-items: baseline; gap: 12px; margin-top: 33px; font-family: var(--atlas-mono); }
.overview-count b { font-size: clamp(68px, 7vw, 104px); font-weight: 400; line-height: .9; }
.overview-count span { color: #756d66; font-size: 12px; }
.progress-label { margin: 22px 0 7px; color: var(--atlas-muted); font: 8px/1.4 var(--atlas-mono); letter-spacing: .06em; }
.progress-track { position: relative; height: 2px; background: var(--atlas-track); }
.progress-fill { position: absolute; top: -2px; left: 0; width: var(--progress, 0%); height: 7px; background: var(--accent, var(--atlas-wood)); }

.object-card { min-height: 330px; display: grid; grid-template-rows: auto 1fr auto; padding: 20px; border: 2px solid var(--atlas-field-line); background: var(--atlas-slip); text-align: left; text-decoration: none; cursor: pointer; font-family: inherit; }
.object-card:hover, .object-card:focus-visible { border-color: #000; outline: 0; }
.object-card[aria-pressed="true"] { border-color: #000; background: rgba(255,255,255,.82); }
.object-card small { color: #756d66; font: 8px var(--atlas-mono); }
.object-card h2 { margin: 10px 0 3px; font: 24px/1.3 var(--atlas-mono); font-weight: 400; }
.object-card p { margin: 0; color: var(--atlas-subtle); font-size: 11px; }
.object-card img { width: 100%; height: 170px; object-fit: contain; }
.object-card .progress-track { margin-top: 17px; }

.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-top: 40px; padding-bottom: 13px; border-bottom: 2px solid var(--atlas-line); }
.section-heading h2 { margin: 0; color: var(--atlas-title); font: 14px/1.5 var(--atlas-mono); font-weight: 400; letter-spacing: .05em; }
.section-heading span { color: var(--atlas-muted); font: 8px var(--atlas-mono); }
.category-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; margin-top: 14px; }
.category-card { min-height: 138px; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto 1fr auto; gap: 5px 22px; padding: 18px; border: 2px solid var(--atlas-field-line); background: var(--atlas-slip); text-decoration: none; }
.category-card:hover, .category-card:focus-visible { border-color: #000; outline: 0; }
.category-card__code { display: flex; align-items: center; gap: 9px; color: var(--atlas-muted); font: 8px var(--atlas-mono); }
.category-card__dot { width: 10px; height: 10px; border: 1px solid rgba(57,54,51,.48); border-radius: 50%; background: var(--accent); }
.category-card h3 { align-self: start; margin: 8px 0 0; font: 19px/1.35 var(--atlas-mono); font-weight: 400; }
.category-card__count { grid-column: 2; grid-row: 1 / span 2; color: var(--atlas-subtle); font: 11px var(--atlas-mono); }
.category-card .progress-track { grid-column: 1 / -1; align-self: end; margin-top: 18px; }

.atlas-toolbar { display: grid; grid-template-columns: auto minmax(220px, 1fr) auto; align-items: center; gap: 14px; margin: 28px 0 22px; }
.atlas-back, .atlas-add { padding: 9px 11px; border: 1px solid #000; background: transparent; text-decoration: none; font: 9px var(--atlas-mono); }
.atlas-search { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
.atlas-search input { min-width: 0; padding: 9px 11px; border: 1px solid rgba(0,0,0,.54); border-right: 0; outline: 0; background: rgba(255,255,255,.38); font: 11px var(--atlas-sans); }
.atlas-search input:focus { border-color: #000; }
.atlas-search button { padding: 0 14px; border: 1px solid #000; background: #000; color: #fff; cursor: pointer; font: 9px var(--atlas-mono); }

.category-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 30px; align-items: end; }
.category-progress { text-align: right; font-family: var(--atlas-mono); }
.category-progress b { display: block; font-size: 28px; font-weight: 400; }
.category-progress span { color: var(--atlas-muted); font-size: 8px; }
.object-tabs { display: flex; gap: 0; margin-top: 24px; }
.object-tab, .category-tab { flex: 0 0 auto; border: 0; color: var(--atlas-muted); background: transparent; text-decoration: none; cursor: pointer; font-family: var(--atlas-mono); white-space: nowrap; }
.object-tab + .object-tab, .category-tab + .category-tab { border-left: 1px solid var(--atlas-field-line); }
.object-tab { min-width: 84px; padding: 7px 12px 8px; text-align: center; font-size: 9px; }
.object-tab[aria-current="true"], .category-tab[aria-current="true"] { border-left-color: transparent; color: #000; outline: 1px solid #000; outline-offset: -1px; }
.object-tab[aria-current="true"] + .object-tab, .category-tab[aria-current="true"] + .category-tab { border-left-color: transparent; }
.category-tabs { display: flex; gap: 0; margin-top: 7px; padding-bottom: 7px; overflow-x: auto; scrollbar-width: thin; }
.category-tab { padding: 7px 9px 8px; font-size: 8px; }

.entry-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; margin-top: 12px; }
.entry-card { min-width: 0; min-height: 128px; display: grid; grid-template-rows: auto 1fr auto; padding: 8px; border: 1px solid #000; background: var(--atlas-paper); text-align: left; text-decoration: none; }
.entry-card[data-lit="false"] { border-color: rgba(143,134,126,.34); background: rgba(244,241,236,.48); }
.entry-card:hover, .entry-card:focus-visible { border-color: #000; outline: 0; }
.entry-card__top { display: flex; justify-content: space-between; gap: 5px; color: #756d66; font: 6px var(--atlas-mono); }
.entry-card__state { width: 7px; height: 7px; flex: 0 0 auto; border: 1px solid #000; border-radius: 50%; background: #000; }
.entry-card[data-lit="false"] .entry-card__state { border-color: rgba(57,54,51,.38); background: transparent; }
.entry-figure { min-height: 68px; display: grid; place-items: center; margin: 3px 0; }
.entry-figure img { width: 100%; height: 66px; object-fit: contain; transition: opacity .15s ease; }
.entry-card[data-lit="false"] .entry-figure img { filter: grayscale(1); opacity: .14; }
.entry-card[data-lit="false"]:hover .entry-figure img, .entry-card[data-lit="false"]:focus-visible .entry-figure img { opacity: .48; }
.entry-placeholder { width: 100%; height: 60px; display: grid; place-content: center; border: 1px solid rgba(143,134,126,.28); color: var(--atlas-muted); text-align: center; font: 6px/1.45 var(--atlas-mono); }
.entry-placeholder b { font-weight: 400; }
.entry-card[data-lit="false"] .entry-placeholder { opacity: .38; }
.entry-card h3 { overflow: hidden; margin: 0; text-align: center; font: 10px/1.25 var(--atlas-mono); font-weight: 400; text-overflow: ellipsis; white-space: nowrap; }
.entry-card[data-lit="false"] h3 { color: var(--atlas-muted); opacity: .65; }
.entry-empty { grid-column: 1 / -1; min-height: 220px; display: grid; place-content: center; border: 1px solid var(--atlas-line); color: var(--atlas-muted); text-align: center; font: 10px/1.7 var(--atlas-mono); }

.collection-path { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 30px; margin-top: 28px; padding: 28px; border: 2px solid var(--atlas-field-line); background: var(--atlas-field); }
.collection-path small { color: #756d66; font: 9px var(--atlas-mono); }
.collection-path h3 { margin: 13px 0 7px; font: 22px/1.4 var(--atlas-mono); font-weight: 400; }
.collection-path p { margin: 0; color: var(--atlas-body); font-size: 11px; line-height: 1.7; }
.collection-path__count { color: var(--atlas-muted); text-align: right; font: 11px var(--atlas-mono); }

.detail-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 28px; align-items: end; padding-bottom: 18px; border-bottom: 2px solid var(--atlas-line); }
.detail-head__state { color: var(--atlas-muted); text-align: right; font: 9px/1.6 var(--atlas-mono); }
.detail-layout { display: grid; grid-template-columns: minmax(0, 2.08fr) minmax(270px, 1fr); gap: 22px; margin-top: 22px; }
.observation-plate { min-height: 520px; display: grid; grid-template-rows: auto 1fr auto; padding: 22px; border: 2px solid var(--atlas-field-line); }
.observation-plate small { color: var(--atlas-muted); font: 8px var(--atlas-mono); }
.observation-plate__figure { min-height: 380px; display: grid; place-items: center; padding: 24px; }
.observation-plate__figure img { width: 100%; height: 360px; object-fit: contain; }
.observation-plate__figure .entry-placeholder { height: 290px; }
.observation-plate p { margin: 0; color: var(--atlas-note); font-size: 11px; line-height: 1.7; }
.detail-side { display: grid; align-content: start; gap: 8px; }
.ai-verify { min-height: 78px; display: grid; grid-template-columns: 64px 1fr; align-items: center; gap: 12px; padding: 8px 0 13px; }
.ai-verify img { width: 64px; height: 59px; object-fit: contain; }
.ai-verify small { color: #657268; font: 8px var(--atlas-mono); }
.ai-verify p { margin: 5px 0 0; color: #455048; font-size: 10px; line-height: 1.5; }
.detail-field { min-height: 74px; padding: 13px 15px; border: 1px solid rgba(143,134,126,.32); background: var(--atlas-field); }
.detail-field dt { color: var(--atlas-muted); font: 7px var(--atlas-mono); }
.detail-field dd { margin: 8px 0 0; color: var(--atlas-value); font-size: 11px; line-height: 1.45; }
.my-specimens { display: block; padding: 16px; border: 2px solid #000; background: var(--atlas-paper); text-decoration: none; }
.my-specimens small { color: #756d66; font: 8px var(--atlas-mono); }
.my-specimens b { display: block; margin-top: 9px; font: 13px var(--atlas-mono); font-weight: 400; }

.notes-head { margin-top: 34px; }
.notes-head h2 { margin: 0; color: var(--atlas-title); font: 14px/1.5 var(--atlas-mono); font-weight: 400; }
.notes-head p { margin: 6px 0 0; color: var(--atlas-note); font-size: 11px; }
.note-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 16px; }
.note-card { min-height: 150px; padding: 18px; border: 2px solid var(--atlas-field-line); background: var(--atlas-field); }
.note-card small { color: var(--atlas-muted); font: 8px var(--atlas-mono); }
.note-card h3 { margin: 20px 0 8px; font: 15px/1.4 var(--atlas-mono); font-weight: 400; }
.note-card p { margin: 0; color: var(--atlas-body); font-size: 10px; line-height: 1.65; }
.detail-bottom { display: grid; grid-template-columns: minmax(0, 2.08fr) minmax(270px, 1fr); gap: 22px; margin-top: 22px; }
.formation-record, .confusion-card { min-height: 220px; padding: 22px; border: 2px solid var(--atlas-field-line); background: rgba(244,241,236,.92); }
.formation-record small, .confusion-card small { color: var(--atlas-muted); font: 8px var(--atlas-mono); }
.formation-record h3, .confusion-card h3 { margin: 16px 0 9px; font: 18px/1.4 var(--atlas-mono); font-weight: 400; }
.formation-record p, .confusion-card p { margin: 0; color: var(--atlas-body); font-size: 11px; line-height: 1.75; }
.confusion-card { border-color: #000; background: var(--atlas-paper); }
.confusion-card a { display: inline-block; margin-top: 20px; font: 9px var(--atlas-mono); }
.specimen-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 20px; }
.specimen-link { min-width: 0; padding: 10px; border: 1px solid var(--atlas-field-line); background: var(--atlas-slip); text-decoration: none; }
.specimen-link img { width: 100%; height: 90px; object-fit: contain; }
.specimen-link b { display: block; overflow: hidden; margin-top: 8px; font: 9px var(--atlas-mono); font-weight: 400; text-overflow: ellipsis; white-space: nowrap; }
.atlas-footer { margin-top: 30px; color: var(--atlas-footer); font: 8px var(--atlas-mono); }

@media (max-width: 1100px) {
  .overview-hero { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .overview-intro { grid-column: 1 / -1; min-height: auto; }
}

@media (max-width: 760px) {
  .atlas-page { width: calc(100% - 28px); padding-top: 22px; }
  .atlas-meta-line { display: grid; gap: 3px; }
  .atlas-window { min-height: 620px; padding: 18px; }
  .overview-hero, .category-grid, .detail-layout, .detail-bottom { grid-template-columns: 1fr; }
  .object-card { min-height: 290px; }
  .category-card { min-height: 150px; }
  .atlas-toolbar { grid-template-columns: auto 1fr; }
  .atlas-search { grid-column: 1 / -1; grid-row: 2; }
  .category-head, .detail-head { grid-template-columns: 1fr; gap: 12px; }
  .category-progress, .detail-head__state { text-align: left; }
  .entry-grid { grid-template-columns: repeat(auto-fill, minmax(74px, 1fr)); gap: 6px; }
  .entry-card { min-height: 116px; padding: 7px; }
  .entry-figure { min-height: 58px; }
  .entry-figure img { height: 56px; }
  .note-grid { grid-template-columns: 1fr; }
  .observation-plate { min-height: 420px; }
  .observation-plate__figure { min-height: 280px; }
  .observation-plate__figure img { height: 260px; }
  .specimen-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 440px) {
  .atlas-window { padding: 14px; }
  .atlas-title { font-size: 27px; }
  .collection-path { grid-template-columns: 1fr; }
  .collection-path__count { text-align: left; }
}