/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:       #1a1a2e;
  --card:     #242438;
  --card2:    #2e2e48;
  --line:     rgba(255,255,255,0.08);
  --pink:     #ff3870;
  --pink2:    #ff6090;
  --gold:     #f5a623;
  --purple:   #9b59b6;
  --blue:     #4a90d9;
  --text:     #e8e8f0;
  --text2:    #8080a0;
  --r:        12px;
  --rsm:      8px;
}

html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  min-height: 100vh;
}

/* ── Header ── */
.app-header {
  text-align: center;
  padding: 28px 16px 12px;
}
.app-title {
  font-size: 1.45rem;
  font-weight: 700;
  background: linear-gradient(135deg, #ff3870 0%, #ff7b42 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: 1px;
}
.app-sub {
  font-size: 0.73rem;
  color: var(--text2);
  margin-top: 5px;
}

/* ── Top Tab Bar ── */
.top-tab-bar {
  display: flex;
  max-width: 480px;
  margin: 0 auto;
  padding: 0 12px;
  gap: 0;
  border-bottom: 1px solid var(--line);
}
.top-tab {
  flex: 1;
  padding: 10px 0;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text2);
  font-size: 0.92rem;
  font-family: inherit;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
  margin-bottom: -1px;
}
.top-tab:hover { color: var(--text); }
.top-tab.active {
  color: var(--pink);
  border-bottom-color: var(--pink);
  font-weight: 600;
}

/* ── Tab Pages ── */
.tab-page { display: flex; flex-direction: column; gap: 12px; }
.tab-page.hidden { display: none; }

/* ── Main ── */
.app-main {
  max-width: 480px;
  margin: 0 auto;
  padding: 12px 12px 60px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ── Form Card ── */
.form-card {
  background: var(--card);
  border-radius: var(--r);
  /* overflow: visible so absolute dropdowns aren't clipped by the card boundary */
}

.form-row {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  gap: 16px;
  min-height: 52px;
}
.form-row-col {
  display: flex;
  flex-direction: column;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  gap: 8px;
}
.form-label {
  font-size: 0.88rem;
  color: var(--text);
  white-space: nowrap;
  min-width: 56px;
  flex-shrink: 0;
}
.form-label small {
  color: var(--text2);
  font-weight: 400;
  font-size: 0.72rem;
}

/* ── Toggle Group ── */
.toggle-group {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.toggle-btn {
  padding: 5px 18px;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: var(--rsm);
  color: var(--text2);
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.15s;
  font-family: inherit;
}
.toggle-btn:active { opacity: 0.75; }
.toggle-btn.active {
  background: var(--pink);
  border-color: var(--pink);
  color: #fff;
  font-weight: 600;
}
/* Quality overrides */
.toggle-btn.q-gold.active  { background: var(--gold);   border-color: var(--gold); }
.toggle-btn.q-purple.active{ background: var(--purple); border-color: var(--purple); }
.toggle-btn.q-blue.active  { background: var(--blue);   border-color: var(--blue); }

/* ── Selector Box ── */
.selector-box {
  display: flex;
  align-items: center;
  background: var(--card2);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--rsm);
  padding: 10px 12px;
  cursor: pointer;
  width: 100%;
  text-align: left;
  font-family: inherit;
  color: var(--text);
  min-height: 44px;
  transition: border-color 0.15s;
  gap: 8px;
  /* needed when element is <div> instead of <button> */
  box-sizing: border-box;
  -webkit-user-select: none;
  user-select: none;
}
.selector-box:hover { border-color: rgba(255,255,255,0.22); }
.selector-placeholder {
  flex: 1;
  font-size: 0.85rem;
  color: var(--text2);
}
.selector-arrow {
  color: var(--text2);
  font-size: 1.1rem;
  flex-shrink: 0;
  line-height: 1;
}

/* chips box shares selector-box */
.chips-box { flex-wrap: wrap; align-items: center; min-height: 44px; padding: 8px 12px; }
.chips-inner {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

/* ── Chips ── */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(255,56,112,0.18);
  border: 1px solid rgba(255,56,112,0.45);
  border-radius: 20px;
  padding: 3px 10px;
  font-size: 0.78rem;
  color: var(--pink2);
}
.chip-del {
  background: none;
  border: none;
  color: var(--pink2);
  cursor: pointer;
  font-size: 0.82rem;
  padding: 0;
  line-height: 1;
  opacity: 0.65;
  transition: opacity 0.1s;
}
.chip-del:hover { opacity: 1; }

.char-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--card2);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 20px;
  padding: 2px 10px 2px 3px;
  font-size: 0.8rem;
  color: var(--text);
}
.char-chip-av {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--card2);
  flex-shrink: 0;
}
.char-chip-del {
  background: none;
  border: none;
  color: var(--text2);
  cursor: pointer;
  font-size: 0.78rem;
  padding: 0;
  line-height: 1;
  opacity: 0.65;
}
.char-chip-del:hover { opacity: 1; }

/* ── Action Row ── */
.action-row {
  display: flex;
  gap: 8px;
  padding: 14px 16px 10px;
  align-items: stretch;
}
.btn-sm {
  flex: 1;
  padding: 10px 0;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: var(--rsm);
  color: var(--text);
  font-size: 0.9rem;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s;
}
.btn-sm:hover { background: rgba(255,255,255,0.06); }
.btn-primary {
  flex: 2;
  padding: 10px 0;
  background: linear-gradient(135deg, #ff3870, #ff6b3d);
  border: none;
  border-radius: var(--rsm);
  color: #fff;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: opacity 0.15s;
}
.btn-primary:not(.is-disabled):hover { opacity: 0.9; }
.btn-primary.is-disabled {
  background: rgba(255,255,255,0.1);
  color: var(--text2);
  cursor: not-allowed;
}

/* ── Status Hint ── */
.status-hint {
  text-align: center;
  font-size: 0.78rem;
  color: var(--text2);
  padding: 2px 16px 10px;
}

/* ── Form Footer ── */
.form-footer {
  text-align: center;
  font-size: 0.7rem;
  color: var(--text2);
  opacity: 0.45;
  padding: 8px 16px 14px;
}

/* ── Results Card ── */
.results-card {
  background: var(--card);
  border-radius: var(--r);
  overflow: hidden;
}

/* ── Summary Section ── */
.summary-section {
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
}
.summary-label {
  font-size: 0.76rem;
  color: var(--text2);
  margin-bottom: 8px;
}
.summary-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.sc {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 0.76rem;
  font-weight: 600;
}
.sc-type   { background: rgba(255,255,255,0.1);   color: var(--text); }
.sc-gold   { background: rgba(245,166,35,0.2);    color: var(--gold); }
.sc-purple { background: rgba(155,89,182,0.22);   color: #cc88f0; }
.sc-blue   { background: rgba(74,144,217,0.2);    color: #80b8f0; }
.sc-main   { background: rgba(255,56,112,0.18);   color: var(--pink2); }
.sc-sub    { background: rgba(255,255,255,0.08);  color: var(--text2); }

/* ── Compare Head ── */
.compare-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  border-bottom: 1px solid var(--line);
}
.compare-head-title {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text);
}
.compare-mode-wrap {
  display: flex;
  gap: 12px;
}
.mode-btn {
  background: none;
  border: none;
  font-family: inherit;
  font-size: 0.73rem;
  color: var(--text2);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0;
}
.mode-btn.active { color: var(--text); }
.mode-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid var(--text2);
  flex-shrink: 0;
  transition: all 0.15s;
}
.mode-btn.active .mode-dot {
  border-color: var(--pink);
  background: var(--pink);
}

/* ── Compare List ── */
.compare-item { border-bottom: 1px solid var(--line); }
.compare-item:last-child { border-bottom: none; }

.compare-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  cursor: pointer;
  transition: background 0.12s;
}
.compare-row:hover { background: rgba(255,255,255,0.03); }

.c-chevron {
  color: var(--text2);
  font-size: 1.1rem;
  flex-shrink: 0;
  line-height: 1;
  transition: transform 0.2s;
  transform: rotate(0deg);
}
.c-chevron.open { transform: rotate(90deg); }

/* ── Char Detail Panel ── */
.char-detail {
  padding: 10px 16px 12px;
  background: rgba(0,0,0,0.2);
  border-top: 1px solid var(--line);
}
.char-detail.hidden { display: none; }
.det-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 3px 0;
  font-size: 0.8rem;
}
.det-label {
  color: var(--text2);
  white-space: nowrap;
  min-width: 72px;
  flex-shrink: 0;
}
.det-val { color: var(--text); }
.det-subs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.det-sub { color: var(--pink2); font-size: 0.78rem; }
.det-sub-zero { color: var(--text2); }
.det-score-row .det-val { color: var(--gold); font-weight: 600; }
.c-rank {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--card2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text2);
  flex-shrink: 0;
}
.c-rank.top1 { background: rgba(245,166,35,0.2);   color: var(--gold); }
.c-rank.top2 { background: rgba(200,200,200,0.12); color: #c8c8c8; }
.c-rank.top3 { background: rgba(205,127,50,0.18);  color: #cd7f32; }
.c-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid rgba(255,255,255,0.1);
  flex-shrink: 0;
  background: var(--card2);
}
.c-info {
  flex: 1;
  min-width: 0;
}
.c-name {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.c-meta {
  font-size: 0.7rem;
  color: var(--text2);
  margin-top: 2px;
}
.c-right { text-align: right; flex-shrink: 0; }
.c-score {
  font-size: 1.15rem;
  font-weight: 700;
}
.c-grade {
  font-size: 0.7rem;
  color: var(--text2);
  margin-top: 1px;
}

/* grade colors: ACE/SSS=紅, SS/S=黃, A=橙(待確認), B=綠, C=亮藍, D=灰 */
.g-ace { color: #ff4444; }
.g-s   { color: #f0c050; }
.g-a   { color: #60d860; }
.g-b   { color: #60d860; }
.g-c   { color: #55ccff; }
.g-d   { color: var(--text2); }

/* ── Panels ── */
.panel-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 200;
  display: flex;
  align-items: flex-end;
}
.panel-sheet {
  background: var(--card);
  width: 100%;
  max-height: 72vh;
  border-radius: 16px 16px 0 0;
  display: flex;
  flex-direction: column;
  animation: slideUp 0.22s ease;
}
@keyframes slideUp {
  from { transform: translateY(100%); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
.panel-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  font-weight: 600;
  font-size: 0.9rem;
  flex-shrink: 0;
}
.panel-close {
  background: none;
  border: none;
  color: var(--text2);
  cursor: pointer;
  font-size: 1rem;
  padding: 4px 6px;
  line-height: 1;
}
.panel-body {
  overflow-y: auto;
  padding: 14px 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-content: flex-start;
}
/* ── 副詞條 Dropdown ── */
.sub-stat-wrap { position: relative; }
.main-stat-wrap { position: relative; }

.stat-dropdown {
  position: absolute;
  top: calc(100% - 2px);
  left: 0;
  right: 0;
  background: var(--card);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: var(--rsm);
  z-index: 50;
  max-height: 320px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 28px rgba(0,0,0,0.55);
  overflow: hidden;
  animation: dropDown 0.18s ease;
}
@keyframes dropDown {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}
.stat-dropdown-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  font-size: 0.85rem;
  font-weight: 600;
  flex-shrink: 0;
}
.stat-dropdown-close {
  background: none;
  border: none;
  color: var(--text2);
  cursor: pointer;
  font-size: 0.9rem;
  padding: 2px 4px;
  line-height: 1;
}
/* 垂直清單 */
.stat-list-body {
  display: block;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
  padding: 0;
}
.stat-list-item {
  display: flex;
  align-items: center;
  padding: 13px 16px;
  font-size: 0.9rem;
  cursor: pointer;
  border-bottom: 1px solid var(--line);
  color: var(--text2);
  transition: background 0.1s, color 0.1s;
}
.stat-list-item:last-child { border-bottom: none; }
.stat-list-item:hover { background: rgba(255,255,255,0.04); }
.stat-list-item.sel {
  color: var(--pink);
  background: rgba(255,56,112,0.08);
  font-weight: 600;
}
.stat-list-item.dim {
  color: rgba(255,255,255,0.18);
  cursor: not-allowed;
}
/* 完成按鈕 */
.stat-dropdown-footer {
  flex-shrink: 0;
  padding: 10px 12px;
  border-top: 1px solid var(--line);
}
.panel-done-btn {
  width: 100%;
  padding: 12px 0;
  background: linear-gradient(135deg, #ff3870, #ff6b3d);
  border: none;
  border-radius: var(--rsm);
  color: #fff;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
}
.panel-done-btn:hover { opacity: 0.9; }
/* arrow 旋轉 */
.selector-arrow.open { display: inline-block; transform: rotate(90deg); }

/* ── 指定角色 Dropdown ── */
.char-sel-wrap { position: relative; }
.char-dropdown { max-height: 360px; }
.char-dropdown-body {
  overflow-y: auto;
  flex: 1;
  min-height: 130px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
  gap: 8px;
  padding: 10px 12px;
}
.char-panel-body {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(68px, 1fr));
  gap: 10px;
}

/* ── Panel Option Buttons ── */
.p-opt {
  padding: 8px 14px;
  background: var(--card2);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--rsm);
  color: var(--text);
  font-size: 0.85rem;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.12s;
}
.p-opt:hover { border-color: var(--pink); color: var(--pink2); }
.p-opt.sel {
  background: rgba(255,56,112,0.18);
  border-color: var(--pink);
  color: var(--pink2);
  font-weight: 600;
}
.p-opt.dim { opacity: 0.35; cursor: not-allowed; pointer-events: none; }

/* ── Section Toggle ── */
.section-toggle { cursor: pointer; user-select: none; }
.section-toggle:hover { background: rgba(255,255,255,0.03); }
.section-arrow-btn {
  color: var(--text2);
  font-size: 1.1rem;
  transition: transform 0.2s;
  display: inline-block;
}
.section-arrow-btn.open { transform: rotate(90deg); }

/* ── Character Grid ── */
.char-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(66px, 1fr));
  gap: 8px;
  padding: 12px;
}
.char-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 8px 4px;
  background: var(--card2);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--rsm);
  cursor: pointer;
  text-align: center;
  position: relative;
  transition: all 0.15s;
}
.char-card:hover { border-color: rgba(255,255,255,0.2); }
.char-card.active {
  border-color: var(--pink);
  background: rgba(255,56,112,0.12);
}
.char-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid rgba(255,255,255,0.1);
  background: var(--card2);
}
.char-name {
  font-size: 0.68rem;
  color: var(--text2);
  line-height: 1.2;
  word-break: keep-all;
}
.char-card.active .char-name { color: var(--text); }
.attr-badge {
  position: absolute;
  top: 3px;
  right: 3px;
  font-size: 0.55rem;
  padding: 1px 3px;
  border-radius: 3px;
  font-weight: 700;
}
.attr-guang { background:#3a2800; color:#f0c050; }
.attr-ling  { background:#1a3a1a; color:#60d860; }
.attr-zhou  { background:#2a1040; color:#c060f0; }
.attr-hun   { background:#1a2a3a; color:#60a0f0; }
.attr-xiang { background:#3a1a00; color:#f08040; }
.attr-an    { background:#1a1a2a; color:#8080c0; }
.char-loading { color: var(--text2); padding: 20px; font-size: 0.85rem; }

/* ── Build Recommendation（角色頁） ── */
#buildRecSection { padding: 14px 14px 16px; }
.char-info-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: var(--card2);
  border-radius: var(--rsm);
  border: 1px solid rgba(255,255,255,0.08);
  margin-bottom: 10px;
}
.info-avatar {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--pink);
  flex-shrink: 0;
}
.info-text { flex: 1; }
.info-name { font-size: 1rem; font-weight: 700; color: var(--text); }
.info-meta { font-size: 0.75rem; color: var(--text2); margin-top: 2px; }
.recommendation-box {
  background: rgba(255,56,112,0.06);
  border: 1px solid rgba(255,56,112,0.2);
  border-radius: var(--rsm);
  padding: 10px 12px;
  font-size: 0.82rem;
  color: var(--text2);
  line-height: 1.8;
}
.rec-title {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--pink2);
  margin-bottom: 6px;
}
.rec-row { display: flex; gap: 8px; align-items: flex-start; margin-bottom: 2px; }
.rec-label { color: var(--pink2); font-weight: 600; min-width: 60px; flex-shrink: 0; font-size: 0.78rem; }
.rec-value { color: var(--text); font-size: 0.8rem; }
.no-rec { color: var(--text2); font-style: italic; font-size: 0.82rem; }

/* ── Character Panel Items ── */
.cp-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 8px 4px;
  background: var(--card2);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--rsm);
  cursor: pointer;
  text-align: center;
  transition: all 0.12s;
}
.cp-item:hover { border-color: rgba(255,255,255,0.2); }
.cp-item.sel {
  border-color: var(--pink);
  background: rgba(255,56,112,0.14);
}
.cp-item.dim { opacity: 0.35; cursor: not-allowed; pointer-events: none; }
.cp-av {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--card);
}
.cp-name {
  font-size: 0.68rem;
  color: var(--text2);
  line-height: 1.2;
  word-break: keep-all;
}
.cp-item.sel .cp-name { color: var(--text); }