:root {
  --v70-bg: #f7f8fa;
  --v70-surface: #ffffff;
  --v70-surface-soft: #fbfcfd;
  --v70-position: #f0f5f3;
  --v70-change: #f3f6fb;
  --v70-text: #18212a;
  --v70-muted: #66737e;
  --v70-line: #e1e6eb;
  --v70-line-strong: #d5dde4;
  --v70-action: #315fca;
  --v70-action-soft: #eaf0ff;
  --v70-good: #2d815c;
  --v70-attention: #846122;
  --v70-attention-soft: #fff8e9;
  --v70-danger: #a43838;
  --v70-danger-soft: #fff1f1;
  --v70-radius-sm: 11px;
  --v70-radius-md: 16px;
  --v70-radius-lg: 22px;
}

html,
body { background: var(--v70-bg); color: var(--v70-text); }
body { font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif; }

button,
input,
select,
textarea { min-width: 0; }

button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[role="button"]:focus-visible {
  outline: 3px solid rgba(49, 95, 202, .22);
  outline-offset: 3px;
}

.topbar {
  background: rgba(255, 255, 255, .84);
  border-bottom-color: rgba(213, 221, 228, .86);
  backdrop-filter: blur(18px) saturate(140%);
}
.topbar-inner,
.container { max-width: 820px; }
.topbar-inner { padding-block: 13px; }
.brand { letter-spacing: -.02em; }
.brand .brand-mark { background: #254f75; border-radius: 12px; }
.privacy-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 32px;
  padding: 5px 10px;
  border: 1px solid #dfe8e4;
  border-radius: 999px;
  background: #f1f7f4;
  color: #446156;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.container { padding-top: 16px; }
.tabs {
  width: 100%;
  margin-bottom: 20px;
  padding: 4px;
  border: 1px solid var(--v70-line);
  border-radius: 14px;
  background: rgba(236, 240, 244, .76);
}
.tab {
  min-height: 42px;
  padding-inline: 14px;
  color: var(--v70-muted);
  transition: color 160ms ease, background-color 160ms ease, transform 160ms ease;
}
.tab.active {
  color: var(--v70-text);
  background: var(--v70-surface);
  box-shadow: 0 2px 8px rgba(23, 36, 48, .07);
}
.tab:active { transform: scale(.98); }

.status-region {
  border: 1px solid transparent;
  border-radius: var(--v70-radius-sm);
}
.status-region.is-success { border-color: #d5e9df; background: #f0f8f4; color: #2e6c50; }
.status-region.is-notice { border-color: #f0e2bd; background: var(--v70-attention-soft); color: var(--v70-attention); }
.status-region.is-error { border-color: #f0d4d4; background: var(--v70-danger-soft); color: var(--v70-danger); }

.coordinate-hero,
.public-coordinate {
  border: 1px solid #d8e6e0;
  border-radius: var(--v70-radius-lg);
  background: var(--v70-position);
  box-shadow: 0 10px 26px rgba(28, 54, 45, .045);
}
.coordinate-hero { padding: 24px; }
.hero-head h1,
.public-coordinate h1 {
  letter-spacing: -.035em;
  font-weight: 740;
}
.hero-head p,
.public-coordinate > p { color: var(--v70-muted); }
.exam-context { margin-top: 20px; }
.coordinate-row > span {
  font-size: clamp(23px, 5vw, 30px);
  font-weight: 650;
  letter-spacing: -.025em;
}
.coordinate-note { color: var(--v70-muted); }

.reading-section,
.section-surface,
.public-history {
  border-color: var(--v70-line);
  border-radius: var(--v70-radius-md);
  background: var(--v70-surface);
  box-shadow: 0 6px 18px rgba(25, 39, 52, .025);
}
.change-section { border-color: #dbe4f2; background: var(--v70-change); }
.section-label { color: var(--v70-muted); }
.change-main strong { letter-spacing: -.02em; }
.human-summary {
  margin: 9px 0 0;
  color: var(--v70-text);
  font-size: 15px;
  line-height: 1.55;
}

.overview-actions {
  display: grid;
  gap: 9px;
  margin-top: 18px;
}
.overview-actions .btn-primary {
  min-height: 48px;
  border-radius: 14px;
  background: var(--v70-action);
  box-shadow: 0 6px 14px rgba(49, 95, 202, .16);
  font-size: 16px;
}
.overview-actions .btn-primary:active { transform: scale(.985); }
.overview-actions .btn-outline {
  justify-self: center;
  border-color: transparent;
  background: transparent;
  color: var(--v70-action);
}

.subject-row,
.change-source-row,
.exam-list-row,
.history-row { border-color: var(--v70-line); }
.subject-row b { font-weight: 680; }
.subject-row span,
.change-source-row small { color: var(--v70-muted); }
.deep-trajectory { border-color: var(--v70-line); border-radius: var(--v70-radius-md); }
.deep-trajectory > summary { min-height: 54px; }
.trajectory-boundary-note {
  margin: 0 0 14px;
  padding: 9px 11px;
  border-radius: var(--v70-radius-sm);
  background: #f7fafc;
  color: var(--v70-muted);
  font-size: 13px;
  line-height: 1.5;
}
.share-summary {
  border-color: #dfe7ed;
  background: #f8fafc;
}
.share-summary > div + div { border-top: 1px solid var(--v70-line); padding-top: 8px; }
.share-scope > label { transition: border-color 160ms ease, background-color 160ms ease; }
.share-scope > label:has(input:checked) { border-color: #c5d7ef; background: var(--v70-action-soft); }
.public-advanced,
.admin-advanced { border-color: var(--v70-line); }

.btn {
  transition: transform 160ms ease, background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}
.btn:active { transform: scale(.98); }
.btn-primary { background: var(--v70-action); }
.btn-primary:hover { filter: none; background: #2b57b9; }

.empty-state .brand-mark { background: #254f75; }

.dialog-backdrop {
  background: rgba(15, 24, 30, .46);
  animation: v70-scrim-in 180ms ease-out both;
}
.dialog {
  box-shadow: 0 -12px 34px rgba(15, 29, 40, .14);
  animation: v70-dialog-in 220ms ease-out both;
}
.entry-stepper span { transition: color 160ms ease, border-color 160ms ease; }
.entry-stepper span.is-active { color: var(--v70-action); border-color: var(--v70-action); }
.entry-navigation [data-entry-hint] { line-height: 1.45; }
.draft-state {
  padding: 8px 10px;
  border: 1px solid #e1e8ee;
  border-radius: var(--v70-radius-sm);
  background: #f7fafc;
  color: var(--v70-muted);
  line-height: 1.45;
}
.error-box,
.notice-box {
  border: 1px solid transparent;
}
.error-box { border-color: #f0d4d4; }
.notice-box { border-color: #f0e2bd; }
.trash-row {
  border-style: solid;
  border-color: #e7e1d2;
  background: #fffdf8;
}

@keyframes v70-scrim-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes v70-dialog-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 760px) {
  .container { padding: 14px 12px 92px; }
  .topbar-inner { padding-inline: 12px; }
  .privacy-pill { min-height: 30px; padding-inline: 8px; font-size: 11px; }
  .tabs {
    position: fixed;
    z-index: 30;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    width: 100%;
    margin: 0;
    padding: 7px 10px calc(7px + env(safe-area-inset-bottom));
    border-width: 1px 0 0;
    border-radius: 0;
    background: rgba(255, 255, 255, .88);
    backdrop-filter: blur(18px) saturate(140%);
  }
  .tab { flex: 1; min-height: 44px; padding-inline: 7px; font-size: 13px; }
  .coordinate-hero { padding: 19px 16px; }
  .hero-head { gap: 12px; }
  .hero-head .btn { align-self: flex-start; }
  .overview-actions .btn-primary { min-height: 50px; }
  .reading-section,
  .section-surface,
  .public-history { margin-top: 12px; padding: 15px; }
}

@media (max-width: 380px) {
  .brand > span { font-size: 14px; }
  .privacy-pill { max-width: 92px; overflow: hidden; text-overflow: ellipsis; }
  .coordinate-hero { padding-inline: 14px; }
}

@media (hover: none) {
  .btn,
  .tab,
  .account-menu > summary,
  .exam-list-row,
  .share-scope > label,
  .deep-trajectory > summary,
  .public-advanced > summary,
  .admin-advanced > summary,
  .advanced > summary,
  .subject-history > summary,
  .subject-advanced > summary { min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
  .tab:active,
  .btn:active,
  .overview-actions .btn-primary:active { transform: none; }
  .dialog-backdrop,
  .dialog { animation: none; }
}

@media (prefers-reduced-transparency: reduce) {
  .topbar,
  .tabs { background: var(--v70-surface); backdrop-filter: none; }
}

@media (prefers-contrast: more) {
  .topbar,
  .tabs,
  .coordinate-hero,
  .reading-section,
  .section-surface,
  .public-history { border-color: currentColor; }
}