/* Product UI theme layer. Business data and application logic remain separate. */

:root {
  --bg: #dfe6e2;
  --bg-deep: #17231e;
  --surface: #f0f3f1;
  --surface-soft: #e7ece9;
  --surface-alt: #d7e0dc;
  --ink: #17201c;
  --muted: #53635b;
  --muted-strong: #35473f;
  --line: #c1ccc6;
  --line-strong: #8fa49a;
  --green: #246b58;
  --green-dark: #184b3e;
  --green-soft: #dcebe5;
  --green-bright: #68a894;
  --blue: #365f7b;
  --blue-soft: #e2ebf1;
  --amber: #7c571d;
  --amber-soft: #f1e6cf;
  --gold: #a47a2b;
  --gold-soft: #f1e6cf;
  --red: #963f46;
  --red-soft: #f2e1e3;
  --violet: #68568f;
  --violet-soft: #eae5f2;
  --augment-silver-accent: #60737b;
  --augment-silver-soft: #e2e8ea;
  --augment-gold-accent: var(--gold);
  --augment-gold-soft: var(--gold-soft);
  --augment-prismatic-accent: var(--violet);
  --augment-prismatic-soft: var(--violet-soft);
  --teal: #246b58;
  --action-bg: #184b3e;
  --action-bg-hover: #246b58;
  --action-fg: #ffffff;
  --placeholder: #64716b;
  --radius: 4px;
  --shadow: none;
  --shadow-soft: none;
  --type-h1: clamp(1.45rem, 2.4vw, 2rem);
  --type-h2: 1.08rem;
  --type-h3: 0.96rem;
  --type-body: 1rem;
  --type-small: 0.8125rem;
  --type-caption: 0.75rem;
}

html[data-color-theme="dark"] {
  color-scheme: dark;
  --bg: #111713;
  --bg-deep: #0d120f;
  --surface: #18201c;
  --surface-soft: #1d2722;
  --surface-alt: #25332c;
  --ink: #e7eee9;
  --muted: #b0bcb5;
  --muted-strong: #d3ddd7;
  --line: #35463d;
  --line-strong: #63786d;
  --green: #79bea8;
  --green-dark: #b9e4d5;
  --green-soft: #203a32;
  --green-bright: #8dceb9;
  --blue: #9bc5df;
  --blue-soft: #203541;
  --amber: #e4bd70;
  --amber-soft: #3a3020;
  --gold: #e4bd70;
  --gold-soft: #3a3020;
  --red: #f0a0a6;
  --red-soft: #40262a;
  --violet: #c1a9ec;
  --violet-soft: #302941;
  --augment-silver-accent: #c1ced2;
  --augment-silver-soft: #263238;
  --augment-gold-accent: var(--gold);
  --augment-gold-soft: var(--gold-soft);
  --augment-prismatic-accent: var(--violet);
  --augment-prismatic-soft: var(--violet-soft);
  --teal: #79bea8;
  --action-bg: #77b9a4;
  --action-bg-hover: #8dceb9;
  --action-fg: #102019;
  --placeholder: #aab6b0;
}

html {
  background: var(--bg);
  scroll-padding-top: 94px;
}

body {
  background: var(--bg);
  color: var(--ink);
  font-size: var(--type-body);
  font-family: "Microsoft YaHei", "PingFang SC", "Segoe UI", Arial, sans-serif;
}

button,
input,
select,
textarea {
  border-radius: var(--radius);
}

button,
.route-card,
.champion-portrait,
.contact-action {
  transition-property: transform, opacity;
}

button:disabled,
input:disabled,
select:disabled,
textarea:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

button:disabled {
  transform: none;
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.route-card:focus-visible,
.douyin-topbar-link:focus-visible {
  outline: 3px solid rgba(36, 107, 88, 0.34);
  outline-offset: 2px;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  min-height: 68px;
  padding: 12px clamp(16px, 3vw, 40px);
  background: var(--surface-alt);
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  box-shadow: none;
}

.topbar .eyebrow {
  display: none;
}

.topbar h1 {
  font-size: var(--type-h1);
  font-weight: 800;
}

.brand-mark {
  filter: saturate(0.92) contrast(1.04);
}

.topbar-subtitle {
  margin-top: 4px;
  color: var(--muted);
  font-size: var(--type-small);
}

.version {
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  gap: 2px 10px;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.version span {
  color: var(--muted);
  font-size: var(--type-caption);
}

.version strong {
  color: var(--ink);
  font-size: var(--type-small);
  font-variant-numeric: tabular-nums;
}

.version-actions {
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  flex-wrap: wrap;
}

.version-actions .small-button,
.version-actions .douyin-topbar-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 6px 11px;
  border-color: var(--line-strong);
  background: var(--surface);
  color: var(--green-dark);
  font-size: var(--type-caption);
  font-weight: 800;
  line-height: 1.2;
  text-decoration: none;
}

.version-actions .small-button:hover,
.version-actions .douyin-topbar-link:hover {
  border-color: var(--green-dark);
  background: var(--green-soft);
  box-shadow: none;
}

.version-actions .color-theme-toggle {
  border-color: var(--action-bg);
  background: var(--action-bg);
  color: var(--action-fg);
}

.version-actions .color-theme-toggle:hover,
.version-actions .color-theme-toggle:focus-visible {
  border-color: var(--action-bg-hover);
  background: var(--action-bg-hover);
  color: var(--action-fg);
}

.app-shell {
  grid-template-columns: minmax(292px, 330px) minmax(0, 1fr);
  gap: 0;
  width: min(1500px, 100%);
  margin: 18px auto 32px;
  padding: 0 clamp(12px, 2.5vw, 34px);
}

.control-panel,
.result-area {
  border: 0;
  border-radius: 0;
  background: var(--surface);
  box-shadow: none;
}

.control-panel {
  top: 94px;
  border-right: 1px solid var(--line);
}

.panel-section {
  padding: 16px;
  border-bottom: 0;
}

.section-title {
  margin-bottom: 12px;
}

.section-title h2,
.result-section > h2 {
  font-size: var(--type-h2);
  font-weight: 800;
}

.step {
  width: 22px;
  height: 22px;
  border-radius: 3px;
  background: var(--green);
  font-size: var(--type-caption);
}

.field-label {
  color: var(--muted-strong);
  font-size: var(--type-small);
  font-weight: 700;
}

.text-field,
.select-field {
  min-height: 42px;
  border-color: var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface);
  font-size: var(--type-small);
  box-shadow: none;
}

.text-field::placeholder {
  color: var(--placeholder);
}

.text-field:focus {
  border-color: var(--green);
  box-shadow: none;
}

.role-filter {
  min-height: 48px;
  border-color: var(--line);
  border-radius: var(--radius);
  background: var(--surface-soft);
}

.role-filter-button {
  min-height: 48px;
  border-right-color: var(--line);
  color: var(--muted);
}

.role-filter-button:hover,
.role-filter-button:focus-visible,
.role-filter-button.is-active {
  background: var(--surface-alt);
  color: var(--green-dark);
}

.role-filter-button.is-active::after {
  right: 0;
  left: 0;
  height: 3px;
}

.selected-champion {
  grid-template-columns: 52px minmax(0, 1fr);
  min-height: 68px;
  padding: 10px 0;
  border: 0;
  border-block: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
}

.selected-champion img,
.selected-fallback {
  width: 52px;
  height: 52px;
  border: 1px solid var(--line-strong);
  border-radius: 3px;
}

.selected-name {
  font-size: 1.08rem;
  font-weight: 800;
}

.selected-title {
  color: var(--muted);
  font-size: var(--type-caption);
}

.champion-grid {
  grid-template-columns: repeat(auto-fill, minmax(50px, 1fr));
  grid-auto-rows: 72px;
  gap: 6px;
  max-height: 342px;
  padding: 8px 2px 8px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  scrollbar-color: var(--line-strong) transparent;
}

.champion-tile {
  color: var(--muted-strong);
}

.champion-portrait {
  border-color: var(--line);
  border-radius: 3px;
  background: var(--surface-alt);
}

.champion-tile:hover .champion-portrait,
.champion-tile:focus-visible .champion-portrait {
  border-color: var(--green);
  box-shadow: none;
  transform: translateY(-1px);
}

.champion-tile.is-active .champion-portrait {
  border-color: var(--green);
  box-shadow: inset 0 0 0 2px var(--green);
}

.champion-tile.is-active::after {
  display: none;
}

.champion-tile span,
.empty-champions {
  color: var(--muted);
  font-size: var(--type-caption);
}

.panel-actions {
  padding: 10px 16px;
  border-top: 1px solid var(--line);
  background: var(--surface-soft);
}

.icon-button,
.small-button,
.recommendation-view-tabs button,
.special-augment-tabs button,
.route-collapse-button {
  border-color: var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  box-shadow: none;
}

.icon-button:hover,
.small-button:hover,
.recommendation-view-tabs button:hover,
.special-augment-tabs button:hover {
  border-color: var(--line-strong);
  background: var(--surface-alt);
  box-shadow: none;
}

.small-button {
  min-height: 34px;
  font-size: var(--type-small);
  font-weight: 700;
}

.result-area {
  min-width: 0;
}

.load-status {
  border-radius: var(--radius);
  box-shadow: none;
}

.recommendation-band {
  gap: 14px;
  min-height: 0;
  margin: 0;
  padding: 20px 22px;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: var(--surface-soft);
  box-shadow: none;
}

.recommendation-view-tabs {
  width: min(330px, 100%);
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface-alt);
}

.recommendation-view-tabs button {
  min-height: 36px;
  border: 1px solid transparent;
  border-radius: 3px;
  background: var(--surface);
  color: var(--muted-strong);
  font-size: var(--type-small);
  font-weight: 800;
}

.recommendation-view-tabs button:hover,
.recommendation-view-tabs button:focus-visible {
  border-color: var(--green-bright);
  background: var(--green-soft);
  color: var(--green-dark);
}

.recommendation-view-tabs button.is-active {
  border-color: var(--action-bg);
  background: var(--action-bg);
  color: var(--action-fg);
  box-shadow: none;
}

.recommendation-band h2 {
  color: var(--ink);
  font-size: clamp(1.5rem, 2.8vw, 2.2rem);
}

.recommendation-main {
  min-height: 0;
}

.quick-summary {
  gap: 0;
  margin-top: 16px;
  border-top: 1px solid var(--line);
}

.summary-cell {
  min-height: 82px;
  padding: 12px 14px 10px 0;
  border: 0;
  border-right: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
}

.summary-cell:last-child {
  border-right: 0;
  padding-left: 14px;
}

.summary-cell span,
.summary-cell p {
  color: var(--muted);
  font-size: var(--type-caption);
}

.summary-cell strong {
  color: var(--ink);
  font-size: 0.95rem;
}

.summary-cell.is-warning {
  background: transparent;
}

.result-section {
  padding: 20px 22px;
  border-top: 1px solid var(--line);
}

.result-section:first-of-type {
  border-top: 0;
}

.route-list,
.stack-list,
.special-augment-builds,
.special-augment-record,
.breakdown-list,
.item-plan,
.validation-list,
.reason-box {
  gap: 0;
}

.route-card {
  gap: 10px;
  padding: 14px 0;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.route-card:first-child {
  border-top: 0;
}

.route-card.is-top {
  padding-inline: 12px;
  background: var(--green-soft);
}

.route-card:hover,
.route-card:focus-visible {
  background: var(--surface-soft);
  border-color: var(--line);
  box-shadow: none;
}

.route-head h3 {
  font-size: var(--type-h3);
  font-weight: 800;
}

.route-source,
.route-variant-summary,
.variant-chip,
.variant-augment-cell > span {
  color: var(--muted);
  font-size: var(--type-caption);
}

.route-collapse-button {
  min-height: 30px;
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--green-dark);
}

.route-collapse-button:hover,
.route-collapse-button:focus-visible {
  outline: 3px solid rgba(36, 107, 88, 0.25);
}

.variant-chip {
  border-radius: var(--radius);
  background: var(--surface-alt);
}

.item-chip,
.meta-chip,
.match-chip,
.situation-chip,
.special-augment-rarity,
.augment-card-meta span,
.required-route-row strong {
  border-radius: 3px;
}

.item-chip {
  background: var(--amber-soft);
  color: var(--amber);
}

.item-icon,
.augment-icon,
.special-champion-chip {
  border-radius: 3px;
}

.item-plan {
  grid-template-columns: repeat(3, minmax(220px, 1fr));
  gap: 0 16px;
}

.item-plan-stage {
  min-height: 0;
  padding: 12px 0;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
}

.item-plan-stage:first-child {
  gap: 8px 18px;
  padding-top: 0;
  border-top: 0;
}

.item-plan-slot {
  grid-template-rows: auto;
  grid-auto-rows: 74px;
}

.item-plan-entry {
  border-top-color: var(--line);
}

.item-plan-slot .item-plan-entry {
  min-height: 0;
  box-sizing: border-box;
  overflow: hidden;
}

.item-plan-slot .item-plan-entry span {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.augment-recommendations {
  align-items: stretch;
  gap: 18px;
}

.augment-column {
  grid-template-rows: auto minmax(0, 1fr);
  gap: 0;
  height: 100%;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.augment-column h3 {
  padding-bottom: 10px;
  border-bottom-color: var(--line-strong);
  font-size: var(--type-h3);
}

.augment-tier-grid {
  grid-auto-rows: minmax(max-content, 1fr);
  gap: 0;
  height: 100%;
}

.augment-card,
.augment-card.is-silver,
.augment-card.is-gold,
.augment-card.is-prismatic,
.augment-card.is-owned,
.augment-card.is-caution {
  align-content: start;
  gap: 5px;
  height: 100%;
  padding: 10px 0;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
}

.augment-card.is-owned {
  padding-inline: 8px;
  background: var(--green-soft);
}

.augment-card.is-caution {
  padding-inline: 8px;
  background: var(--amber-soft);
}

.augment-card.is-silver,
.variant-chip.is-silver,
.warning-augment-chip.is-silver {
  --augment-rarity-accent: var(--augment-silver-accent);
  --augment-rarity-soft: var(--augment-silver-soft);
}

.augment-card.is-gold,
.variant-chip.is-gold,
.warning-augment-chip.is-gold {
  --augment-rarity-accent: var(--augment-gold-accent);
  --augment-rarity-soft: var(--augment-gold-soft);
}

.augment-card.is-prismatic,
.variant-chip.is-prismatic,
.warning-augment-chip.is-prismatic {
  --augment-rarity-accent: var(--augment-prismatic-accent);
  --augment-rarity-soft: var(--augment-prismatic-soft);
}

.augment-card:is(.is-silver, .is-gold, .is-prismatic) {
  padding-inline: 10px;
  border-top-color: var(--augment-rarity-accent);
  background:
    linear-gradient(90deg, var(--augment-rarity-soft) 0%, transparent 76%),
    var(--augment-state-background, transparent);
  box-shadow: inset 3px 0 0 var(--augment-rarity-accent);
}

.augment-card.is-owned {
  --augment-state-background: var(--green-soft);
}

.augment-card.is-caution {
  --augment-state-background: var(--amber-soft);
}

.augment-card:is(.is-silver, .is-gold, .is-prismatic) .augment-icon,
.variant-chip:is(.is-silver, .is-gold, .is-prismatic) .augment-icon,
.warning-augment-chip:is(.is-silver, .is-gold, .is-prismatic) .augment-icon {
  border-color: var(--augment-rarity-accent);
  box-shadow: 0 0 0 2px var(--augment-rarity-soft);
}

.variant-chip:is(.is-silver, .is-gold, .is-prismatic),
.warning-augment-chip:is(.is-silver, .is-gold, .is-prismatic) {
  border-color: var(--augment-rarity-accent);
  background: var(--augment-rarity-soft);
  color: var(--ink);
}

.augment-card:is(.is-silver, .is-gold, .is-prismatic) .augment-card-meta span:first-child {
  background: var(--augment-rarity-soft);
  color: var(--augment-rarity-accent);
}

.augment-card-meta span {
  font-size: var(--type-caption);
}

.augment-card p,
.special-augment-title p,
.special-augment-summary,
.special-build-card p,
.special-build-row > span {
  color: var(--muted);
  font-size: var(--type-caption);
}

.special-augment-tabs button {
  border-radius: var(--radius);
}

.special-augment-notes span {
  border: 0;
  border-radius: 0;
  background: var(--blue-soft);
  color: var(--blue);
}

.special-build-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 18px;
}

.special-build-card,
.stack-entry,
.breakdown-item,
.stat-tile,
.validation-item {
  padding: 12px 0;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
}

.special-build-card:first-child,
.stack-entry:first-child,
.breakdown-item:first-child,
.validation-item:first-child {
  border-top: 0;
}

.warning-section {
  border-left: 0;
}

.warning-section .stack-entry {
  border-color: var(--line);
  background: transparent;
}

.warning-augment-chip {
  border-color: var(--line-strong);
  border-radius: 3px;
  background: var(--surface);
  color: var(--ink);
  box-shadow: none;
}

.stack-entry p,
.reason-line,
.breakdown-item,
.validation-item {
  color: var(--muted-strong);
}

.reason-line::before,
.validation-item::before {
  border-radius: 2px;
}

.maintenance-section {
  border-left: 0;
}

.stat-tile {
  border-top: 0;
  background: var(--surface-alt);
}

.template-preview,
.debug-preview {
  border-radius: 3px;
}

.douyin-contact-floating {
  display: none;
}

.contact-dialog {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  box-shadow: 0 18px 50px rgba(23, 32, 28, 0.18);
}

.contact-dialog::backdrop {
  background: rgba(23, 32, 28, 0.4);
}

.contact-copy-row,
.contact-dialog-close,
.contact-action {
  border-radius: var(--radius);
  box-shadow: none;
}

.contact-copy-row,
.contact-dialog-close {
  border-color: var(--line);
  background: var(--surface-soft);
  color: var(--ink);
}

.contact-copy-row:hover,
.contact-copy-row:focus-visible,
.contact-dialog-close:hover,
.contact-dialog-close:focus-visible {
  border-color: var(--green);
  background: var(--green-soft);
  color: var(--green-dark);
}

.contact-toast {
  border-radius: var(--radius);
  background: var(--ink);
  color: var(--surface);
  box-shadow: none;
}

.copy-fallback-box {
  border-color: var(--line);
  border-radius: 6px;
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 18px 50px rgba(23, 32, 28, 0.18);
}

.copy-fallback-box textarea {
  border-color: var(--line);
  background: var(--surface-soft);
  color: var(--ink);
}

.copy-fallback-box button {
  border-color: var(--action-bg);
  background: var(--action-bg);
  color: var(--action-fg);
}

@media (max-width: 1100px) {
  .app-shell {
    grid-template-columns: minmax(270px, 300px) minmax(0, 1fr);
  }

  .augment-recommendations,
  .item-plan {
    grid-template-columns: 1fr;
  }

  .augment-column,
  .augment-tier-grid,
  .augment-card {
    height: auto;
  }

  .augment-tier-grid {
    grid-auto-rows: auto;
  }

  .item-plan-stage:first-child {
    grid-template-columns: 1fr;
  }

  .item-plan-slot {
    grid-template-rows: none;
    grid-auto-rows: auto;
  }

  .item-plan-slot .item-plan-entry {
    min-height: 58px;
    overflow: visible;
  }

  .item-plan-slot .item-plan-entry span {
    display: block;
    overflow: visible;
  }
}

@media (max-width: 940px) {
  .topbar {
    align-items: flex-start;
  }

  .version {
    width: 100%;
  }

  .version-actions {
    justify-content: flex-start;
  }

  .app-shell {
    grid-template-columns: 1fr;
    margin-top: 12px;
  }

  .control-panel {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .special-build-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 520px) {
  .topbar {
    padding-inline: 14px;
  }

  .app-shell {
    margin: 0;
    padding: 0;
  }

  .champion-grid {
    grid-template-columns: repeat(auto-fill, minmax(48px, 1fr));
    max-height: 294px;
  }

  .control-panel,
  .result-area {
    border-radius: 0;
  }

  .recommendation-band {
    position: static;
    margin: 0;
    padding: 16px;
    border: 0;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    box-shadow: none;
  }

  .panel-section,
  .result-section {
    padding: 16px;
  }

  .quick-summary {
    border-top: 0;
  }

  .summary-cell,
  .summary-cell:last-child {
    padding: 10px 0;
    border-right: 0;
    border-top: 1px solid var(--line);
  }

  .panel-actions {
    background: var(--surface);
  }

  .route-head,
  .special-augment-head {
    gap: 10px;
  }
}

@media (forced-colors: active) {
  .brand-mark {
    forced-color-adjust: none;
  }

  .champion-tile.is-active .champion-portrait,
  .recommendation-view-tabs button.is-active {
    outline: 2px solid Highlight;
  }
}

@media (max-width: 520px) {
  .version-actions .small-button,
  .version-actions .douyin-topbar-link,
  .panel-actions .small-button,
  .panel-actions .icon-button,
  .recommendation-view-tabs button,
  .special-augment-tabs button,
  .text-field,
  .select-field {
    min-height: 44px;
  }

  .panel-actions .icon-button {
    width: 44px;
    height: 44px;
  }
}