/* 雲白天青・主頁所有功能共用的視覺層，後載入以保留 index.css 的版面與互動。 */
:root {
  --ink: #203b49;
  --ink-soft: #526f7d;
  --paper: #ffffff;
  --paper-deep: #f2f8fb;
  --panel: #ffffff;
  --panel-strong: #ffffff;
  --line: #d6e4e9;
  --line-strong: #adc9d6;
  --jade: #478eb1;
  --jade-strong: #2a6684;
  --gold: #a58a54;
  --gold-soft: #e9ddc4;
  --violet: #687a99;
  --danger: #a44e58;
  --shadow: none;
  --shadow-soft: none;
  --radius-lg: 4px;
  --radius-md: 3px;
  --radius-sm: 3px;
  color-scheme: light;
}

html, body {
  background: #ffffff;
  color: var(--ink);
  font-family: "Noto Sans TC", "Microsoft JhengHei", "PingFang TC", sans-serif;
}
button, input, select, textarea { font-family: inherit; }
button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, .break-choice:focus-visible, .quick-card:focus-visible {
  outline: 2px solid #478eb1;
  outline-offset: 3px;
}

/* 素白頁首與山形品牌標誌。 */
.topbar {
  min-height: 86px;
  padding-top: 9px;
  padding-bottom: 9px;
  background: #ffffff;
  border-bottom: 2px solid #c4dce7;
  backdrop-filter: none;
}
.brand-block { gap: 13px; }
.brand-mark {
  display: block;
  width: 68px;
  height: 68px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  object-fit: contain;
  flex: 0 0 68px;
}
.brand-title { color: #285a74; font-family: "Noto Serif TC", "Noto Sans TC", serif; }
.brand-subtitle, .account-label { color: #65808d; }
.avatar {
  display: grid;
  place-items: center;
  background: #eaf4f8;
  border: 1px solid #c4dce7;
  color: #3d7897;
}
.avatar::after { content: "修"; font-size: 16px; font-weight: 700; }
#player-name { color: var(--ink); }
.text-button, .link-button { color: #2d7295; }
.text-button:hover, .link-button:hover { background: #eaf5fa; color: #265d79; }
.test-badge { border-radius: 2px; background: #fff5ef; border: 1px solid #e9c9b4; color: #9a5a44; }

/* 清爽分欄，不以大面積藍色或浮動卡片強調介面。 */
.sidebar {
  background: #f6fafc;
  border-right: 1px solid var(--line);
}
.sidebar-caption { color: #5f7a88; }
.sidebar-note { color: #587481; }
.nav-item {
  border-radius: 3px;
  color: #496977;
  transition: background .15s ease, border-color .15s ease;
}
.nav-item:hover:not(:disabled), .nav-item.active {
  background: #eaf5fa;
  border-color: #bbd5e2;
  color: #235a78;
  box-shadow: none;
}
.nav-primary:not(:disabled) {
  background: #4b91b5;
  border-color: #4b91b5;
  color: #fff;
  box-shadow: none;
}
.nav-primary:hover:not(:disabled) {
  background: #347c9f;
  border-color: #347c9f;
  color: #fff;
  transform: none;
}
.nav-icon { border-radius: 2px; opacity: .85; }
.workspace, .content-view { background: #ffffff; }
.site-footer { background: #ffffff; color: #68828e; border-top: 1px solid var(--line); }

/* 登入、角色、日常、週常、里程碑、功法、行囊、突破、設定共用紙面。 */
.panel, .hero-card, .stats-panel, .quick-card, .cultivation-panel,
.weekly-panel, .resonance-panel, .milestone-panel,
.settings-panel, .inventory-panel, .breakthrough-panel, .techniques-panel,
.slot-panel, .tech-entry, .tech-choice, .modal {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 3px;
  box-shadow: none;
}
.auth-card, .hero-card, .breakthrough-panel, .techniques-panel {
  border-left: 3px solid #92bfd4;
}
.section-kicker, .eyebrow { color: #a58a54; }
.section-heading h1, .section-heading h2, .section-heading h3,
.auth-copy h1, .rank-name { color: #254d62; }
.auth-copy h1 {
  font-family: "Noto Serif TC", "Microsoft JhengHei", serif;
  font-size: clamp(34px, 4.5vw, 58px);
  font-weight: 700;
  letter-spacing: .01em;
  line-height: 1.23;
}
.auth-copy p, .page-header p, .muted, .item-desc,
.item-meta, .quick-desc, .tech-summary, .tech-detail,
.activity-card p, .activity-state, .weekly-score, .resonance-meta,
.cultivation-heading .section-heading p, .weekly-panel .section-heading p,
.resonance-panel .section-heading p { color: var(--ink-soft); }
label, .requirement-label { color: #446d81; }
input, select, textarea {
  background: #ffffff;
  color: var(--ink);
  border: 1px solid #b8d1dc;
  border-radius: 3px;
}
input:focus, select:focus, textarea:focus {
  border-color: #4b91b5;
  box-shadow: 0 0 0 2px #e2f0f6;
}
.action { border-radius: 3px; transition: background .15s ease, border-color .15s ease; }
.action:hover { transform: none; }
.action-primary, .mini-action {
  background: #4b91b5;
  border: 1px solid #4b91b5;
  color: #ffffff;
  box-shadow: none;
  border-radius: 3px;
}
.action-primary:hover:not(:disabled), .mini-action:hover:not(:disabled) {
  background: #347d9f;
  border-color: #347d9f;
}
.action-secondary, .close-btn {
  background: #edf7fb;
  border: 1px solid #b8d4e1;
  border-radius: 3px;
  color: #285e7b;
}
.action-secondary:hover:not(:disabled), .close-btn:hover { background: #dfeff6; }
.action-gold { background: #a58a54; color: #fff; box-shadow: none; }
.action-gold:hover:not(:disabled) { background: #8e7444; }
.danger-button { background: #a44e58; color: #fff; }

.hero-card { background: #ffffff; }
.hero-card::after { content: none; }
.route-pill, .badge { background: #edf6fa; border: 1px solid #d5e6ed; color: #2f6986; border-radius: 3px; }
.status-pill { background: #fff8e8; border: 1px solid #eadcb9; color: #866c3e; border-radius: 3px; }
.progress-track { background: #e4eff4; border-radius: 2px; }
.progress-fill, .resonance-track .progress-fill { background: #75b1ce; border-radius: 2px; }
.quick-card, .stat-card, .wallet-strip > div, .activity-card,
.weekly-tier, .milestone-card, .settings-row, .item-card,
.slot-btn, .tech-entry, .tech-choice {
  background: #fbfdfe;
  border: 1px solid #dce8ed;
  border-radius: 3px;
  box-shadow: none;
}
.quick-card:hover, .tech-entry:hover, .tech-entry.open, .tech-choice:hover,
.slot-btn:hover { background: #eef7fb; border-color: #9fc8db; box-shadow: none; transform: none; }
.activity-card.complete, .weekly-tier.unlocked { background: #f1f8fb; border-color: #b2d5e5; }
.milestone-card.unlocked { background: #fffaf0; border-color: #dfcfaa; }
.activity-order, .tech-level { color: #977b47; }
.stat-label, .wallet-strip span, .milestone-card small, .weekly-tier span { color: #607b88; }
.stat-value, .item-name, .quick-title, .tech-header { color: var(--ink); }
.surge-live { color: #916f30; }
.break-choice, .break-choice.normal, .break-choice.heaven {
  background: #ffffff;
  border: 1px solid #d6e4e9;
  border-left: 3px solid #9dc6d9;
  border-radius: 3px;
  box-shadow: none;
}
.break-choice.heaven { border-left-color: #c1ac7c; background: #fffdf8; }
.break-choice:hover:not(.disabled) { background: #f0f8fb; border-color: #93bed3; box-shadow: none; transform: none; }
.break-choice h3 { color: #2d6482; }
.break-choice-tag { background: #edf6fa; border: 1px solid #d6e8ee; border-radius: 3px; }
.break-choice.disabled { opacity: .65; filter: none; }
.slot-panel { background: #f8fbfc; }
.tech-entry.open { border-left: 3px solid #81b5cf; }
.tech-detail { border-top-color: var(--line); }
.empty-state { border-color: #b8d4df; border-radius: 3px; color: #617f8b; }
.modal-overlay { background: rgba(29, 56, 70, .32); backdrop-filter: none; }
.modal { border-top: 3px solid #8ab9d0; box-shadow: 0 9px 28px rgba(28, 61, 77, .15); }


/* 功法修煉卷：未領悟前只顯示層數；觸發後才顯示已領悟字。 */
.training-path { margin: 14px 0; border: 1px solid #d4e6ed; background: #fbfdfe; padding: 14px; }
.training-progress-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; color: #346e8a; }
.training-progress-head span { font-variant-numeric: tabular-nums; color: #65828f; }
.training-path .progress-track { margin: 9px 0 14px; }
.training-current { border-top: 1px solid #e0ebef; padding-top: 12px; }
.training-current h4 { font-size: 17px; color: #285c77; margin: 7px 0; }
.training-current p { color: #557381; margin: 8px 0; line-height: 1.75; }
.training-success { color: #567d53; font-weight: 700; }
.training-revealed { border-top: 1px solid #dbe7ec; margin-top: 12px; padding-top: 11px; }
.training-revealed small { color: #61818e; }
.training-revealed-list { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 7px; }
.training-revealed-list span { display: inline-grid; place-items: center; width: 29px; height: 29px; color: #2f6d8b; background: #edf6fa; border: 1px solid #bddae7; font-weight: 700; }
.training-revealed-list span { cursor: help; }
.inventory-toolbar { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; padding-bottom:14px; border-bottom:1px solid #e0e9ef; }
.inventory-toolbar p { color:#5a7480; line-height:1.7; margin:0; max-width:620px; }
.inventory-feedback { display:none; margin-top:12px; padding:11px 13px; line-height:1.65; }
.inventory-feedback.is-success, .inventory-feedback.is-error { display:block; }
.inventory-feedback.is-success { background:#f0f8f4; border-left:3px solid #8cad91; color:#416c50; }
.inventory-feedback.is-error { background:#fff7f4; border-left:3px solid #c78b78; color:#895447; }
.inventory-effect-summary { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; padding:14px 0; color:#567584; }
.inventory-effect-summary > div { border:1px solid #d5e6ef; background:#f6fafc; padding:11px 13px; }
.inventory-effect-summary span { display:block; font-size:12px; color:#608396; margin-bottom:5px; }
.inventory-effect-summary strong { display:block; overflow-wrap:anywhere; color:#2c617d; line-height:1.6; font-size:13px; }
.inventory-effect-summary.is-error { display:block; border-left:3px solid #c78b78; background:#fff7f4; color:#895447; }
.inventory-section-title { margin:17px 0 12px; }
.inventory-section-title h3 { margin:5px 0; }
.inventory-section-title p { margin:3px 0; color:#5a7885; line-height:1.7; }
/* 行囊只列實際持有物品。療傷、護身和其餘收藏共用同一種卡片。 */
.item-head { justify-content:flex-start; flex-wrap:wrap; gap:5px 8px; }
.item-head .item-name { min-width:0; overflow-wrap:anywhere; }
.item-head .item-qty { margin-left:auto; white-space:nowrap; font-variant-numeric:tabular-nums; }
.item-qualities { display:inline-flex; flex-wrap:wrap; gap:4px; margin-top:0; min-width:0; }
/* 品質標籤由 /quality-badges.css 共用，與材料列保持一致。 */
.inventory-panel .inventory-section-title[hidden],
.inventory-panel .inventory-grid[hidden],
.inventory-panel .inventory-effect-summary[hidden] { display:none !important; }
.inventory-panel .inventory-use-card { cursor:pointer; transition:border-color .16s, background-color .16s, box-shadow .16s; }
.inventory-panel .inventory-use-card:hover,
.inventory-panel .inventory-use-card:focus-visible {
  border-color:#94bdd1; background:#f6fafc; box-shadow:0 0 0 2px rgba(105,157,186,.12); outline:none;
}
.inventory-panel .inventory-use-card[data-use-available="false"] { cursor:help; }
.inventory-panel .inventory-use-card.is-busy { opacity:.65; pointer-events:none; }
.inventory-panel .item-effect-status { margin-top:8px; color:#718996; font-size:12px; line-height:1.5; }
@media (max-width:720px) {
  .inventory-effect-summary { grid-template-columns:1fr; }
  .inventory-toolbar .action { width:100%; }
}

/* 煉丹／煉器與獨立仙市沿用相同紙頁留白。 */
.crafting-panel { border-left: 3px solid #92bfd4; }
.crafting-overview { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.crafting-overview h2 { margin: 5px 0 8px; color: #295d77; }
.crafting-overview p { color: #587684; margin: 0; line-height: 1.7; }
.crafting-wallet { min-width: 120px; padding: 13px; text-align: center; background: #f1f8fb; border: 1px solid #d4e7ef; border-radius: 3px; }
.crafting-wallet strong { display: block; font-size: 25px; color: #397f9f; font-variant-numeric: tabular-nums; }
.crafting-wallet span { color: #617d8c; font-size: 13px; }
.crafting-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; margin-top: 19px; }
.crafting-toolbar label { font-weight: 700; }
.crafting-toolbar input { width: 80px; padding: 8px; }
.crafting-result { margin-top: 14px; padding: 11px 14px; border-left: 3px solid #9cba8e; background: #f1f8f0; color: #406c52; }
.crafting-section-title { margin: 25px 0 13px; }
.crafting-section-title p { color: #587684; }
.crafting-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(265px, 1fr)); gap: 10px; }
.crafting-recipe { min-width: 0; padding: 15px; border: 1px solid #dbe9ee; border-left: 3px solid #95bfd2; background: #fbfdfe; }
.crafting-recipe .item-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.crafting-recipe .item-head b { color: #2d617b; }
.crafting-recipe p { color: #5a7784; font-size: 14px; line-height: 1.7; }
/* 材料需求改為完整一列：名稱主視覺、品質輕量註記、數量固定靠右。 */
.crafting-materials { display: grid; grid-template-columns: minmax(0, 1fr); gap: 7px; margin-top: 13px; }
.crafting-material {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  align-items: center; gap: 12px; min-width: 0; min-height: 44px;
  padding: 8px 12px; border: 1px solid #dce5e7; border-radius: 9px;
  background: #fff; color: #354e5c; box-shadow: 0 1px 2px rgba(37, 55, 52, .035);
}
.crafting-material.ready { border-color: #c8dfd5; background: #fcfefc; }
.crafting-material-info { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; min-width: 0; }
.crafting-material-name { color: #304b58; font-size: 13px; font-weight: 700; line-height: 1.5; overflow-wrap: anywhere; }
.crafting-material-amount {
  justify-self: end; display: inline-flex; align-items: baseline; gap: 2px;
  white-space: nowrap; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums;
}
.crafting-material-owned { color: #a16356; font-weight: 800; }
.crafting-material.ready .crafting-material-owned { color: #33734e; }
.crafting-material-divider { color: #9aaab2; font-weight: 400; }
.crafting-material-needed { color: #526775; }
/* 各道具和材料皆沿用相同的共用品質標籤。 */
.crafting-recipe .item-head { justify-content: flex-start; flex-wrap: wrap; }
.crafting-recipe .item-head .badge { margin-left: auto; }
.crafting-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 13px 0 7px; }
.crafting-footer small { color: #5f7c8a; }
.crafting-shop { border: 1px solid #dce9ef; }
.crafting-shop-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 15px; border-bottom: 1px solid #e3edf1; background: #fff; }
.crafting-shop-row:last-child { border-bottom: 0; }
.crafting-shop-row > div:first-child { min-width: 0; }
.market-panel .crafting-shop-row > div:first-child { flex: 1 1 240px; }
.market-panel .market-note { margin: 15px 0; line-height: 1.7; }
.market-quote { flex: 0 0 195px; display: grid; gap: 3px; font-size: 13px; color: #496d7e; font-variant-numeric: tabular-nums; }
.market-quote > span { display: flex; justify-content: space-between; gap: 12px; }
.market-quote b { display: inline; color: #284f66; }
.market-quote .market-trend { display: block; color: #627d8a; font-size: 12px; font-weight: 700; }
.market-quote .market-trend.is-up { color: #a55846; }
.market-quote .market-trend.is-down { color: #3c826a; }
.crafting-shop-row b { display: block; color: #315d74; }
.crafting-shop-row small { display: block; color: #69818e; font-size: 12px; line-height: 1.6; }
.crafting-shop-row .small { display: block; font-size: 12px; }
.crafting-shop-actions { display: flex; flex: 0 0 auto; gap: 7px; }
.crafting-shop-actions button { min-height: 38px; padding: 7px 11px; }
.crafting-panel button:disabled { opacity: .45; cursor: not-allowed; }
@media (max-width: 520px) {
  .crafting-overview, .crafting-shop-row { align-items: stretch; flex-direction: column; }
  .crafting-wallet { text-align: left; }
  .crafting-shop-actions { justify-content: flex-start; }
  .market-quote { flex-basis: auto; width: 100%; max-width: 280px; }
  .crafting-grid { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .topbar { min-height: 72px; padding-top: 8px; padding-bottom: 8px; }
  .sidebar { background: #f6fafc; backdrop-filter: none; }
  .brand-mark { width: 52px; height: 52px; flex-basis: 52px; }
  .sidebar { top: 72px; }
  .nav-item, .nav-icon { border-radius: 2px; }
}
@media (max-width: 520px) {
  .topbar { gap: 8px; padding-inline: 10px; }
  .brand-block { gap: 7px; min-width: 0; }
  .brand-title { font-size: 14px; letter-spacing: .07em; white-space: nowrap; }
  .test-badge { font-size: 8px; margin-left: 3px; }
  .account-strip { gap: 4px; min-width: 0; }
  .account-strip .avatar { display: none; }
  .account-copy { min-width: 0; max-width: 75px; }
  #player-name { max-width: 75px; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .auth-layout, .auth-copy, .auth-card { min-width: 0; max-width: 100%; }
  .auth-copy p { max-width: 100%; overflow-wrap: anywhere; }
  .auth-copy h1 { font-size: 34px; line-height: 1.3; }
  .auth-card, .settings-panel, .inventory-panel,
  .breakthrough-panel, .techniques-panel { border-radius: 3px; }
}