:root {
  --ink: #173247;
  --ink-soft: #335369;
  --muted: #648093;
  --line: rgba(71, 114, 143, 0.11);
  --panel: rgba(255, 255, 255, 0.94);
  --blue: #4e93c4;
  --blue-soft: #eaf5fd;
  --coral: #f08a72;
  --gold-soft: #fff8e8;
  --mint-soft: #edf8f4;
  --shadow: 0 18px 34px rgba(96, 135, 162, 0.09);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: "Aptos", "Trebuchet MS", sans-serif;
  color: var(--ink);
  background:
    radial-gradient(circle at 12% 12%, rgba(240, 138, 114, 0.11), transparent 23%),
    radial-gradient(circle at 88% 14%, rgba(128, 191, 226, 0.18), transparent 28%),
    radial-gradient(circle at 30% 82%, rgba(215, 169, 92, 0.08), transparent 26%),
    linear-gradient(180deg, #fffdfb 0%, #f7fbff 50%, #fcfdff 100%);
}

.hidden {
  display: none !important;
}

.page-shell {
  display: grid;
  grid-template-columns: 360px minmax(0, 1fr);
  min-height: 100vh;
}

.sidebar {
  padding: 1.35rem 1rem;
  background:
    radial-gradient(circle at top right, rgba(123, 189, 226, 0.16), transparent 28%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(244, 249, 253, 0.98) 100%);
  border-right: 1px solid rgba(53, 95, 126, 0.10);
}

.sidebar-ribbon,
.card,
.metric-card,
.hero-panel,
.footer-note,
.empty-state,
.status-banner,
.progress-card {
  border-radius: 24px;
  border: 1px solid var(--line);
  background: var(--panel);
  box-shadow: var(--shadow);
}

.sidebar-ribbon {
  padding: 1rem 1rem 0.95rem;
  margin-bottom: 1rem;
  background: linear-gradient(135deg, rgba(255, 244, 240, 0.98), rgba(238, 247, 255, 0.98));
}

.sidebar-kicker,
.section-kicker,
.hero-kicker {
  text-transform: uppercase;
  letter-spacing: 0.12rem;
  font-size: 0.76rem;
  color: #7f91a1;
}

.sidebar h1,
.hero-title {
  margin: 0.4rem 0;
  font-family: Georgia, "Times New Roman", serif;
}

.sidebar h1 {
  font-size: 1.55rem;
}

.search-form {
  display: flex;
  flex-direction: column;
  gap: 0.95rem;
}

.search-form label {
  display: flex;
  flex-direction: column;
  gap: 0.38rem;
  font-size: 0.94rem;
  color: var(--ink-soft);
}

.search-form input,
.search-form select,
.search-form button,
.search-form textarea {
  width: 100%;
  border: 1px solid rgba(104, 135, 157, 0.22);
  border-radius: 14px;
  padding: 0.72rem 0.82rem;
  background: #fff;
  color: var(--ink);
  font: inherit;
}

.search-form select[multiple] {
  min-height: 12rem;
}

.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem;
}

.check-list {
  display: grid;
  gap: 0.5rem;
}

.dimension-composer {
  display: grid;
  gap: 0.75rem;
  padding: 0.95rem;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(247,250,255,0.95));
  border: 1px solid rgba(104, 135, 157, 0.14);
}

.dimension-head {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  align-items: flex-start;
}

.dimension-copy {
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.45;
  margin-top: 0.28rem;
}

.dimension-count {
  padding: 0.32rem 0.7rem;
  border-radius: 999px;
  background: var(--blue-soft);
  color: #28556f;
  font-size: 0.82rem;
  font-weight: 700;
  white-space: nowrap;
}

.dimension-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.mini-btn {
  width: auto !important;
  padding: 0.5rem 0.8rem !important;
  border-radius: 999px !important;
  border: 1px solid rgba(104, 135, 157, 0.18) !important;
  background: rgba(255, 255, 255, 0.95) !important;
  color: var(--ink) !important;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
}

.mini-btn:hover {
  border-color: rgba(78, 147, 196, 0.35) !important;
  box-shadow: 0 6px 14px rgba(116, 159, 190, 0.08);
}

.mini-btn-muted {
  color: #6f8798 !important;
}

.dimension-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.55rem;
}

.dimension-pill {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.55rem;
  width: 100%;
  padding: 0.7rem 0.8rem;
  border-radius: 16px;
  border: 1px solid rgba(104, 135, 157, 0.16);
  background: rgba(255, 255, 255, 0.92);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  transition: transform 0.14s ease, border-color 0.14s ease, box-shadow 0.14s ease, background 0.14s ease;
}

.dimension-pill:hover {
  transform: translateY(-1px);
  border-color: rgba(78, 147, 196, 0.32);
  box-shadow: 0 10px 18px rgba(116, 159, 190, 0.08);
}

.dimension-pill.active {
  background: linear-gradient(135deg, rgba(234, 245, 253, 0.98), rgba(255, 244, 240, 0.96));
  border-color: rgba(78, 147, 196, 0.38);
}

.dimension-pill-label {
  font-weight: 700;
  letter-spacing: 0.01rem;
}

.dimension-pill-state {
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 999px;
  border: 1px solid rgba(104, 135, 157, 0.22);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: transparent;
  background: rgba(255,255,255,0.9);
  font-size: 0.82rem;
  font-weight: 700;
}

.dimension-pill.active .dimension-pill-state {
  background: linear-gradient(135deg, #4e93c4, #6aadd9);
  border-color: transparent;
  color: #fff;
}

.checkbox-row {
  flex-direction: row !important;
  align-items: center;
  gap: 0.55rem !important;
}

.checkbox-row input {
  width: auto;
}

.section-title {
  font-weight: 700;
  color: var(--ink);
  margin-top: 0.2rem;
}

.primary-btn,
.secondary-btn {
  cursor: pointer;
  font-weight: 700;
}

.primary-btn {
  background: linear-gradient(135deg, #4e93c4, #6aadd9);
  color: white;
  border: none;
}

.secondary-btn {
  background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(244,249,253,0.98));
}

.main-stage {
  padding: 1.85rem;
}

.hero-panel {
  padding: 1.6rem 1.8rem;
  background:
    radial-gradient(circle at 88% 20%, rgba(128, 191, 226, 0.30), transparent 24%),
    radial-gradient(circle at 12% 26%, rgba(240, 138, 114, 0.18), transparent 22%),
    radial-gradient(circle at 42% 88%, rgba(215, 169, 92, 0.14), transparent 24%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.99), rgba(245, 250, 255, 0.97) 58%, rgba(255, 247, 242, 0.97) 100%);
  margin-bottom: 1rem;
}

.hero-title {
  font-size: 2.3rem;
  line-height: 1.08;
}

.hero-subtitle,
.hero-copy {
  color: rgba(47, 73, 93, 0.84);
  line-height: 1.55;
}

.hero-meta,
.badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem 1rem;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.38rem 0.8rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.76);
  border: 1px solid rgba(112, 165, 196, 0.22);
  box-shadow: 0 8px 18px rgba(116, 159, 190, 0.10);
  color: #28556f;
}

.status-banner,
.empty-state,
.footer-note,
.card,
.progress-card {
  padding: 1.15rem 1.2rem;
  margin-bottom: 1rem;
}

.status-banner {
  background: linear-gradient(180deg, rgba(255, 247, 242, 0.98), rgba(255, 255, 255, 0.96));
}

.progress-card {
  background: linear-gradient(180deg, rgba(234, 245, 253, 0.98), rgba(255, 255, 255, 0.96));
}

.progress-head {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
}

.progress-head h3 {
  margin: 0.35rem 0 0;
}

.progress-elapsed {
  padding: 0.4rem 0.8rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid rgba(78, 147, 196, 0.22);
  font-weight: 700;
  color: #28556f;
  min-width: 4.5rem;
  text-align: center;
}

.progress-copy {
  margin: 0.7rem 0 0;
  color: var(--ink-soft);
  line-height: 1.5;
}

.metrics-grid,
.content-grid {
  display: grid;
  gap: 1rem;
}

.metrics-grid {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  margin-bottom: 1rem;
}

.tab-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-bottom: 1rem;
}

.tab-btn {
  width: auto;
  padding: 0.6rem 0.95rem;
  border-radius: 999px;
  border: 1px solid rgba(104, 135, 157, 0.16);
  background: rgba(255, 255, 255, 0.92);
  color: var(--ink-soft);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.tab-btn.active {
  background: linear-gradient(135deg, rgba(234, 245, 253, 0.98), rgba(255, 244, 240, 0.96));
  color: var(--ink);
  border-color: rgba(78, 147, 196, 0.28);
  box-shadow: 0 10px 18px rgba(116, 159, 190, 0.08);
}

.tab-panel {
  margin-bottom: 1rem;
}

.metric-card {
  padding: 1rem;
  position: relative;
  overflow: hidden;
}

.metric-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 5px;
  background: linear-gradient(90deg, var(--blue), #7bbfe0, var(--coral));
}

.metric-label {
  color: #5f7a8d;
  font-weight: 600;
  margin-bottom: 0.45rem;
}

.metric-value {
  font-size: 1.55rem;
  font-weight: 700;
}

.content-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.spotlight {
  padding: 1rem;
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(250,252,255,0.95));
  border: 1px solid rgba(104, 135, 157, 0.18);
  margin-bottom: 1rem;
}

.spotlight-title {
  font-weight: 700;
  margin-bottom: 0.55rem;
}

.spotlight-copy {
  color: var(--ink-soft);
  line-height: 1.55;
}

.table-wrap {
  overflow-x: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th,
td {
  border-bottom: 1px solid rgba(104, 135, 157, 0.16);
  padding: 0.72rem 0.55rem;
  text-align: left;
  vertical-align: top;
}

th {
  color: var(--ink-soft);
  font-size: 0.92rem;
}

.detail-stack {
  display: grid;
  gap: 0.85rem;
  margin-top: 1rem;
}

.detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.detail-item {
  padding: 0.85rem;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(247,250,255,0.94));
  border: 1px solid rgba(104, 135, 157, 0.14);
}

.detail-item strong {
  display: block;
  margin-bottom: 0.32rem;
  color: #5f7a8d;
  font-size: 0.88rem;
}

.json-block {
  padding: 1rem;
  border-radius: 18px;
  background: #f7fbff;
  border: 1px solid rgba(104, 135, 157, 0.16);
  overflow-x: auto;
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--ink);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.table-code {
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 0.84rem;
  line-height: 1.45;
  color: var(--ink);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.chart-image {
  display: block;
  width: 100%;
  border-radius: 18px;
  border: 1px solid rgba(104, 135, 157, 0.16);
  background: #fff;
  margin-top: 0.9rem;
}

.resolved-path,
.inline-status {
  color: var(--muted);
  font-size: 0.9rem;
}

@media (max-width: 1180px) {
  .page-shell {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .main-stage,
  .sidebar {
    padding: 1rem;
  }

  .metrics-grid,
  .content-grid,
  .grid-2,
  .detail-grid,
  .dimension-grid {
    grid-template-columns: 1fr;
  }

  .hero-title {
    font-size: 1.85rem;
  }

  .progress-head {
    flex-direction: column;
    align-items: flex-start;
  }
}