:root {
  --ink: #12251f;
  --muted: #5f716b;
  --forest: #0b6b57;
  --forest-soft: #16816b;
  --paper: #f3f7f5;
  --surface: #ffffff;
  --surface-soft: #f7faf9;
  --line: #d9e5e0;
  --accent: #e8a646;
  --danger: #b34435;
  --navy: #102b32;
  --topbar-offset: 72px;
  --shadow-sm: 0 1px 2px rgba(14, 44, 36, .05), 0 8px 24px rgba(14, 44, 36, .05);
  --shadow-lg: 0 24px 70px rgba(15, 47, 39, .12);
}

html { background: var(--paper); }
body.studio-shell {
  font-family: Inter, "Noto Sans TC", "Noto Sans CJK TC", system-ui, sans-serif;
  background:
    radial-gradient(circle at 8% 0%, rgba(22, 129, 107, .11), transparent 32rem),
    radial-gradient(circle at 92% 15%, rgba(232, 166, 70, .08), transparent 25rem),
    var(--paper);
}

h1, h2, h3, .form-step legend, .review-grid h2, .review-before-submit h3 {
  font-family: Inter, "Noto Sans TC", "Noto Sans CJK TC", system-ui, sans-serif;
  letter-spacing: -.035em;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0 clamp(1rem, 3vw, 2rem);
  min-height: var(--topbar-offset);
  border-color: rgba(217, 229, 224, .82);
  border-bottom: 1px solid rgba(217, 229, 224, .82);
  background: rgba(255, 255, 255, .86);
  box-shadow: 0 1px 0 rgba(18, 37, 31, .03);
  backdrop-filter: blur(18px);
}

.brand {
  display: inline-grid;
  place-items: center;
  min-width: 0;
  text-decoration: none;
}
.brand-mark {
  width: clamp(240px, 36vw, 480px);
  height: auto;
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}
.brand .brand-mark { display: inline-flex; }
.brand-mark img {
  width: 100%;
  height: auto;
  display: block;
}
.brand-wordmark, .brand > span:not(.brand-mark) { display: none; }
.language { padding: .52rem .78rem; border: 1px solid var(--line); border-radius: 999px; background: #fff; }

@media (max-width: 760px) {
  .topbar {
    gap: .5rem;
    padding-inline: .75rem;
  }
  .brand-mark {
    width: clamp(190px, 58vw, 220px);
  }
}

.eyebrow { color: var(--forest); font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; }
.lede { color: var(--muted); }
.disclosure { color: var(--muted); line-height: 1.55; }

.review-card, .evidence-section, .review-grid article, .case-banner {
  border-color: var(--line);
  border-radius: 18px;
  background: rgba(255, 255, 255, .94);
  box-shadow: var(--shadow-sm);
}
.review-card { padding: clamp(1.35rem, 3vw, 2rem); }
.review-card h2 { margin-top: 0; }

.button {
  min-height: 44px;
  padding: .72rem 1.15rem;
  border-radius: 11px;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}
.button.primary { border-color: var(--forest); background: linear-gradient(135deg, var(--forest-soft), var(--forest)); box-shadow: 0 8px 20px rgba(11, 107, 87, .18); }
.button.secondary { background: rgba(255,255,255,.72); }
.button:hover { transform: translateY(-1px); box-shadow: 0 10px 25px rgba(14, 44, 36, .12); filter: none; }

input, select, textarea {
  min-height: 46px;
  border-color: #cbdad4;
  border-radius: 11px;
  background: #fbfdfc;
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
input[type="checkbox"],
input[type="radio"] {
  min-height: 0;
  width: 1rem;
  height: 1rem;
  margin: 0;
  flex: 0 0 auto;
  accent-color: var(--forest);
}
textarea { min-height: 92px; }
input:focus, select:focus, textarea:focus { outline: 0; border-color: var(--forest-soft); background: #fff; box-shadow: 0 0 0 4px rgba(22,129,107,.12); }

.case-home { padding-top: clamp(2rem, 5vw, 4.5rem); }
.case-home-intro { max-width: 820px; }
.case-home-intro h1 { max-width: 720px; font-size: clamp(2.55rem, 6vw, 4.9rem); font-weight: 720; }
.case-home-grid { gap: 1.25rem; }
.case-home-grid > .review-card:first-child { background: linear-gradient(145deg, #102b32, #153d3d); color: #fff; }
.case-home-grid > .review-card:first-child label,
.case-home-grid > .review-card:first-child small { color: #c9ddd7; }
.case-home-grid > .review-card:first-child .button { border-color: #fff; background: #fff; color: var(--navy); box-shadow: none; }

.discovery-layout { grid-template-columns: minmax(285px, 31%) minmax(0, 1fr); }
.journey-panel { background: linear-gradient(160deg, var(--navy), #0d5b50); }
.journey-panel h1 { font-weight: 700; letter-spacing: -.045em; }
.progress-list li { border-color: rgba(255,255,255,.1); }
.progress-list li span { width: 2.2rem; height: 2.2rem; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.2); border-radius: 10px; }
.progress-list li.active span { color: var(--navy); border-color: #fff; background: #fff; }
.form-panel { background: rgba(255,255,255,.9); }
.form-step legend { font-weight: 720; }
.form-actions { position: sticky; bottom: 0; z-index: 5; padding-bottom: .75rem; background: linear-gradient(0deg, #fff 72%, rgba(255,255,255,0)); }

.identity-card {
  margin: 1.15rem 0;
  padding: 1.3rem;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(250px, .75fr);
  gap: 1.1rem;
  align-items: center;
  border: 1px solid #bcded4;
  border-radius: 18px;
  background: linear-gradient(135deg, #effaf6, #fff);
  box-shadow: var(--shadow-sm);
}
.identity-avatar { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 15px; color: #fff; background: linear-gradient(145deg, var(--forest-soft), var(--navy)); font-size: 1.25rem; font-weight: 800; }
.identity-card h2, .identity-card p { margin: .15rem 0; }
.identity-card dl { margin: 0; display: grid; gap: .55rem; }
.identity-card dl div { padding-left: .8rem; border-left: 2px solid #bcded4; }
.identity-card dt { color: var(--muted); font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.identity-card dd { margin: .18rem 0 0; font-size: .84rem; }
.identity-details { margin-top: 1rem; padding-top: 1.2rem; border-top: 1px solid var(--line); }

.status-chip { color: #075645; background: #daf3e9; }
code, .mono { overflow-wrap: anywhere; }

@media (max-width: 760px) {
  .topbar { min-height: 64px; }
  .identity-card { grid-template-columns: auto 1fr; }
  .identity-card dl { grid-column: 1 / -1; }
  .case-home-intro h1 { font-size: clamp(2.35rem, 12vw, 3.5rem); }
}

@media (max-width: 880px) {
  .discovery-layout { grid-template-columns: 1fr; }
  .form-actions { position: static; background: transparent; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}