/* styles.css */
/* ============= Theme ============= */
:root{
  --bg:#0f1217;
  --bg-soft:#0b0f15;
  --card:#141922;
  --card-2:#0f141d;
  --muted:#9aa4b2;
  --text:#e8eef7;
  --accent:#55c7c2;        /* 青綠 */
  --accent-2:#6aa1ff;      /* 藍 */
  --success:#1f8b4c;       /* 綠 */
  --warning:#f2b35b;
  --danger:#e96a6a;
  --border:#202634;
  --ring:#70e1dc;
  --shadow:0 8px 30px rgba(0,0,0,.35);
}

*{ box-sizing:border-box; }
html,body{
  margin:0; padding:0; background:var(--bg); color:var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, "Noto Sans TC","Segoe UI", Roboto, Arial, "Apple Color Emoji","Segoe UI Emoji";
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
img{ max-width:100%; display:block; }
a{ color:var(--accent-2); text-decoration:none; transition:opacity .2s ease; }
a:hover{ opacity:.9; text-decoration:underline; }

/* Focus ring（鍵盤可達性） */
:focus-visible{
  outline:2px solid var(--ring);
  outline-offset:2px;
  border-radius:10px;
}

/* ============= Layout ============= */
.topbar{
  position:sticky; top:0; z-index:10;
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 20px; background:linear-gradient(180deg, var(--bg-soft), rgba(11,15,21,.85));
  border-bottom:1px solid var(--border); backdrop-filter:saturate(140%) blur(8px);
}
.brand{ font-weight:800; letter-spacing:.5px; cursor:pointer; }
.nav{ display:flex; align-items:center; gap:14px; }
.nav a{ color:var(--text); opacity:.92; }
.nav .divider{ width:1px; height:20px; background:var(--border); margin:0 6px; }

.container{ max-width:1120px; margin:24px auto; padding:0 16px; }
.page-title{ margin:6px 0 16px; font-size:28px; letter-spacing:.2px; }

.view.hidden{ display:none; }
.section-title{ margin:0; font-size:20px; }
.status{ margin-bottom:10px; min-height:22px; color:var(--muted); }

/* ============= Cards & Grid ============= */
.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:16px;
  padding:14px;
  margin:14px 0;
  box-shadow:var(--shadow);
}
.card-header{
  display:flex; align-items:center; justify-content:space-between;
  gap:10px; margin-bottom:10px;
}
.grid2{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media (max-width:900px){ .grid2{ grid-template-columns:1fr; } }

/* ============= Buttons & Inputs ============= */
.btn{
  appearance:none; border:1px solid transparent;
  background:var(--accent); color:#042325; padding:9px 14px;
  border-radius:12px; cursor:pointer; font-weight:800; letter-spacing:.3px;
  transition: transform .06s ease, filter .18s ease, box-shadow .18s ease;
  box-shadow:0 4px 16px rgba(85,199,194,.18);
}
.btn:hover{ filter:brightness(1.06); }
.btn:active{ transform:translateY(1px); }
.btn:disabled{ opacity:.55; cursor:not-allowed; }

.btn-outline{
  background:transparent; border-color:var(--border); color:var(--text);
}
.btn-ghost{ background:transparent; color:var(--text); border:none; }

.btn-chip{
  padding:6px 12px;
  background:transparent; border:1px solid var(--border);
  color:var(--text); border-radius:999px; cursor:pointer;
  transition: background .18s ease, border-color .18s ease, transform .06s ease;
}
.btn-chip:hover{ background:#182134; }
.btn-chip:active{ transform:translateY(1px); }
.btn-chip.active{ background:#1e2633; border-color:#2f3a4e; }

/* Wizard Step 狀態色（搭配 JS 的 .done/.current/.pending） */
#wizard-stepper .btn-chip.done{
  background:linear-gradient(180deg, rgba(31,139,76,.95), rgba(31,139,76,.85));
  border-color:transparent; color:#eafff4;
}
#wizard-stepper .btn-chip.current{
  background:#162432;
  border-color:#2a3a4f;
  box-shadow:0 0 0 2px rgba(85,199,194,.35) inset, 0 8px 20px rgba(0,0,0,.35);
}
#wizard-stepper .btn-chip.pending{
  opacity:.8;
}

/* 貨幣 chip（沿用 .btn-chip，強化高亮） */
.currency-switch .btn-chip.active{
  background:#1b2936;
  border-color:#365569;
  box-shadow:0 0 0 1px rgba(106,161,255,.35) inset;
}

/* Input */
.input{
  background:var(--card-2); color:var(--text);
  border:1px solid var(--border); border-radius:12px;
  padding:10px 12px; width:320px; transition:border-color .18s ease, box-shadow .18s ease;
}
.input:focus{ border-color:#2f3a4e; box-shadow:0 0 0 3px rgba(106,161,255,.18); }
.input::placeholder{ color:#7e8897; }

/* Inline search area enhancements */
.search-inline{ display:flex; gap:8px; align-items:center; }

/* ============= Exchange CTA/List ============= */
.exchange-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:12px; }
.exchange{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  background:linear-gradient(180deg, #0e141e, #0c121a);
  border:1px solid var(--border); border-radius:14px; padding:10px 12px;
  transition:transform .08s ease, border-color .18s ease, box-shadow .18s ease;
}
.exchange:hover{ transform:translateY(-1px); border-color:#314056; box-shadow:0 10px 28px rgba(0,0,0,.35); }
.badge{
  display:inline-block; font-size:12px; color:var(--muted);
  background:#0a0f17; padding:2px 8px; border-radius:999px; border:1px solid var(--border);
}

/* ============= Markets ============= */
.market-list{ display:grid; gap:8px; }
.market-row{
  display:grid; grid-template-columns:2fr 1.2fr .8fr .8fr 1.2fr; gap:10px;
  padding:12px; border:1px solid var(--border); border-radius:12px; background:var(--card-2);
  transition:background .18s ease, transform .06s ease, border-color .18s ease;
}
.market-row:hover{ background:#121a26; border-color:#2b3547; transform:translateY(-1px); cursor:pointer; }
.up{ color:#61d4a8; font-weight:700; }
.down{ color:#ff8a8a; font-weight:700; }
.muted{ color:var(--muted); }

/* 表頭列（第一列） */
.market-row.header{
  background:#101620; border-color:#223046; font-weight:700; letter-spacing:.3px;
}
.market-row.header:hover{ transform:none; }

/* ============= Wizard ============= */
.stepper{ display:flex; flex-wrap:wrap; gap:8px; margin:12px 0; }
.wizard-cta{ display:flex; gap:10px; margin:6px 0 10px; }
.wizard-nav{ display:flex; align-items:center; gap:8px; margin-top:10px; }
#wizard-next{ margin-left:auto; }  /* 讓下一步/完成固定在右側 */

/* 固定 Wizard 區高度，避免跳動 */
#wizard-content .wizard-card{
  min-height:420px;          /* 可依需求微調 */
  display:flex;
  flex-direction:column;
}
#wizard-content .wizard-card .wizard-body{
  flex:1;
  overflow:auto;             /* 內容過長時內部滾動 */
  padding:12px;
}

/* 截圖區固定高度（避免跳動） */
#wizard-screens{ min-height:260px; }
.screens{ display:grid; gap:12px; }
.screens .card{ margin:0; }
.screens img{
  border-radius:12px; box-shadow:0 1px 4px rgba(0,0,0,.18);
  border:1px solid #1c2431;
}

/* 截圖占位 */
.screen-ph{
  display:flex; align-items:center; justify-content:center;
  height:180px; border:1px dashed #bbb; border-radius:12px;
  background:#0f141d; color:#cbd5e1;
}

/* 完成頁 */
.done-message{
  text-align:center;
  background:linear-gradient(180deg, #0e1a13, #0b1410);
  border:1px solid #1f3a2b;
  box-shadow:0 6px 20px rgba(0,0,0,.4);
  border-radius:16px;
  padding:20px;
  margin-top:8px;
}
.done-message h2{
  font-size:22px; font-weight:800; margin:0 0 8px;
}
.done-message p{
  font-size:15px; color:var(--muted); margin:0;
}

/* ============= Coin Detail ============= */
.summary{ color:var(--muted); margin-bottom:12px; }
.coin-header{
  display:grid; grid-template-columns:1fr auto auto; align-items:center; gap:10px;
}
.chart-toolbar{ display:flex; gap:8px; margin:6px 0 12px; }
#chart{
  background:linear-gradient(180deg, #0f141d, #0d131b);
  border-radius:14px; border:1px solid #1c2431; padding:8px;
  box-shadow:0 8px 26px rgba(0,0,0,.35);
}

/* ============= Typography ============= */
.prose h2{ margin:12px 0; font-size:20px; }
.prose h3{ margin:10px 0; font-size:16px; }
.prose p{ line-height:1.75; color:#d9e2ee; }
.prose ol,.prose ul{ padding-left:18px; }
.prose li{ margin:6px 0; color:#d9e2ee; }
details{ background:#0e1520; border:1px solid var(--border); border-radius:12px; padding:8px 10px; }
summary{ cursor:pointer; font-weight:700; }

/* ============= Footer ============= */
.footer{
  color:var(--muted); text-align:center; padding:20px 0; border-top:1px solid var(--border);
  margin-top:20px;
}

/* ============= Utilities ============= */
.hidden{ display:none!important; }
.center{ display:flex; align-items:center; justify-content:center; }
.right{ margin-left:auto; }

/* ============= Toast / Status Chips ============= */
.chip{
  display:inline-flex; align-items:center; gap:6px; padding:6px 10px;
  background:#122232; border:1px solid #203141; color:#d9e2ee; border-radius:999px; font-size:12px;
}
.chip.success{ background:#0f1e16; border-color:#214a34; color:#dffae9; }
.chip.warn{ background:#201a0f; border-color:#3f3118; color:#ffe9c2; }
.chip.danger{ background:#231417; border-color:#4a2228; color:#ffd5d9; }

/* ============= Table（若之後需要） ============= */
.table{
  width:100%; border-collapse:separate; border-spacing:0; overflow:hidden;
  border:1px solid var(--border); border-radius:12px;
}
.table th,.table td{ padding:10px 12px; border-bottom:1px solid var(--border); }
.table th{ background:#111823; text-align:left; }
.table tr:last-child td{ border-bottom:none; }