/* ==========================================================================
   模擬帳號／積分 —— 只服務三個原型頁：
     account.html   註冊／登入／帳號中心
     credits.html   積分包（模擬支付）＋價目表
     unlock.html    消費點（點擊扣分／解鎖／餘額不足）
   --------------------------------------------------------------------------
   刻意「不」依賴 daily-guidance-v2/v4.css：那兩支是正式頁的骨架層，
   這裡只是一組可以隨時整批刪掉的原型，樣式自帶、色票照抄站上那一套，
   免得日後動到正式頁時互相牽扯。
   ========================================================================== */
:root{
  --paper:#0d0a07; --paper2:#15100a; --paper3:#1b140c;
  --gold:#cda65a; --gold2:#efd58b; --ivory:#eee6d6;
  --muted:#b9ab92; --dim:#817664;
  --line:rgba(205,166,90,.24); --line-soft:rgba(205,166,90,.12);
  --green:#9bc988; --red:#dc9578;
  --page:1080px;
}
html,body{margin:0;min-height:100%;background:#080706;color:var(--ivory)}
body.mock{
  font-family:"Times New Roman","Microsoft JhengHei","PingFang TC",system-ui,sans-serif;
  font-size:16px;line-height:1.75;
  background:
    radial-gradient(circle at 50% -8%,rgba(112,76,24,.17),transparent 28%),
    radial-gradient(circle at 12% 34%,rgba(74,49,20,.09),transparent 24%),
    linear-gradient(#0a0907,#080706);
  padding-right:206px;   /* 讓出畫面右側給模擬器工具列（2026-09-17 改成右側直排） */
  /* 【補 417】2026-09-24 使用者指示：這一頁看起來沒有居中。
     原因是上面只留了右邊 206px，內容區因此整體被推向左邊 103px。
     左邊補一份一樣寬的留白，內容才會落在畫面中央（窄螢幕的例外看下面那條 media）。 */
  padding-left:206px;
}
/* 【補 417】視窗不夠寬時，左邊那份對稱留白要讓開，否則內容會被擠得太窄
   （1660 = 1200 內容 + 206×2 留白 + 48 邊距；在這個寬度以上左右各 206，
     內容落在畫面正中央；以下改成只留右邊給工具列）。 */
@media (max-width:1660px){body.mock{padding-left:24px}}
/* 中文標題用楷體（與正式頁同一套寫法） */
body.mock h1,body.mock h2,body.mock h3,body.mock .k{
  font-family:"KaiTi","STKaiti","Kaiti SC","楷体","ReportKaiTi","FixedKaiTi",serif;
  font-weight:400;
}
.wrap{width:var(--page);max-width:calc(100% - 48px);margin:0 auto;padding:36px 0 80px}

/* ---------- 原型提示帶 ---------- */
.mock-flag{
  border:1px dashed rgba(220,149,120,.55);background:rgba(220,149,120,.06);
  color:#e7b49c;font-size:13px;letter-spacing:.04em;
  padding:9px 14px;margin:0 0 26px;
}
.mock-flag b{color:#f0c9b4;font-weight:400}

/* ---------- 抬頭 ---------- */
.hd{display:flex;align-items:baseline;gap:14px;border-bottom:1px solid var(--line);padding-bottom:12px;margin-bottom:22px}
.hd h1{margin:0;font-size:34px;letter-spacing:.06em;color:var(--gold2)}
.hd .en{font-size:12px;letter-spacing:.26em;color:var(--dim);text-transform:uppercase}
.hd .sp{margin-left:auto;font-size:13px;color:var(--muted)}
.hd .sp a{color:var(--gold);text-decoration:none;border-bottom:1px solid var(--line-soft)}

.lead{color:var(--muted);font-size:15px;margin:0 0 26px}

/* ---------- 卡片／欄位 ---------- */
.grid{display:grid;gap:18px}
.g2{grid-template-columns:1fr 1fr}
.g3{grid-template-columns:repeat(3,1fr)}
@media (max-width:900px){.g2,.g3{grid-template-columns:1fr}}
.card{
  position:relative;border:1px solid rgba(205,166,90,.42);background:rgba(0,0,0,.35);
  padding:20px 22px;
}
.card.dim{opacity:.62}
.card h3{margin:0 0 6px;font-size:21px;color:var(--gold2);letter-spacing:.04em}
/* 【補 416】積分包的加成百分比（原本這裡是「入門／標準／深度」的檔次名） */
.card h3.bonus{color:var(--green);font-size:22px;margin:0 0 10px}
.card .sub{color:var(--dim);font-size:12.5px;letter-spacing:.06em;margin:0 0 12px}
.card p{margin:0 0 10px;color:var(--muted);font-size:14.5px}
.card .price{font-size:30px;color:var(--gold2);line-height:1}
.card .price small{font-size:13px;color:var(--dim);margin-left:8px;letter-spacing:.04em}

/* ---------- 表單 ---------- */
.field{margin:0 0 14px}
.field label{display:block;font-size:12.5px;letter-spacing:.14em;color:var(--dim);margin-bottom:6px}
.field input{
  width:100%;padding:11px 12px;font:inherit;font-size:15px;color:var(--ivory);
  background:rgba(255,255,255,.03);border:1px solid var(--line);outline:none;
}
.field input:focus{border-color:var(--gold)}

/* ---------- 按鈕 ---------- */
.btn{
  display:inline-block;cursor:pointer;font:inherit;font-size:14.5px;
  padding:10px 20px;color:var(--gold2);background:transparent;
  border:1px solid rgba(205,166,90,.55);letter-spacing:.06em;
  transition:background .18s,color .18s;
}
.btn:hover{background:rgba(205,166,90,.14)}
.btn.solid{background:rgba(205,166,90,.9);color:#1a1206;border-color:rgba(205,166,90,.9)}
.btn.solid:hover{background:var(--gold2)}
.btn.ghost{border-color:var(--line);color:var(--muted)}
.btn.ghost:hover{background:rgba(255,255,255,.04);color:var(--ivory)}
.btn[disabled]{opacity:.4;cursor:not-allowed}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:14px}

/* ---------- 帳號中心的數字 ---------- */
.stat{display:flex;gap:34px;flex-wrap:wrap;align-items:flex-end}
.stat .n{font-size:44px;color:var(--gold2);line-height:1}
.stat .n em{font-style:normal;font-size:16px;color:var(--dim);margin-left:6px}
.stat .lb{font-size:12.5px;letter-spacing:.16em;color:var(--dim)}

/* ---------- 流水 ---------- */
table.ledger{width:100%;border-collapse:collapse;font-size:14px}
table.ledger th,table.ledger td{
  text-align:left;padding:9px 10px;border-bottom:1px solid var(--line-soft);
}
table.ledger th{font-size:12px;letter-spacing:.14em;color:var(--dim);font-weight:400}
table.ledger td.n{text-align:right;font-variant-numeric:tabular-nums}
.plus{color:var(--green)} .minus{color:var(--red)} .zero{color:var(--dim)}

/* ---------- 價目表 ---------- */
/* ---------- 訂閱方案卡 ---------- */
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px}
/* 【補 425】原本寫死 1fr 1fr（只有兩個方案）。現在有三個方案（見 mock-account.js 的
   MOCK_PLANS），改成 auto-fit：容器夠寬就排滿一列，不夠寬才往下折，
   不必再為了「今天幾個方案」回來改這一行。 */
@media (max-width:900px){.plans{grid-template-columns:1fr}}
.plan{position:relative;border:1px solid rgba(205,166,90,.42);background:rgba(0,0,0,.35);padding:20px 22px}
.plan.best{border-color:var(--gold);background:rgba(205,166,90,.06)}
.plan h3{margin:0 0 4px;font-size:21px;color:var(--gold2);letter-spacing:.04em}
.plan .sub{color:var(--dim);font-size:12.5px;letter-spacing:.06em;margin:0 0 10px}
.plan .price{font-size:30px;color:var(--gold2);line-height:1}
.plan .price small{font-size:13px;color:var(--dim);margin-left:8px;letter-spacing:.04em}
/* 【補 416】積分包的加成百分比：綠色大字。
   原本這裡是「US$10 · 入門 · 原價」——金額與上面那顆大字重複、檔次名也不要了，
   所以那一行整個換成 +0%／+6%／+10%／+12%。 */
.plan .bonus{color:var(--green);font-size:22px;line-height:1.1;letter-spacing:.06em;margin:8px 0 0}
/* 自訂金額的輸入框 */
.plan input.mc-usd{
  display:block;width:100%;box-sizing:border-box;margin-top:12px;padding:11px 14px;
  background:rgba(0,0,0,.45);border:1px solid var(--line);color:var(--ivory);
  font:inherit;font-size:16px;letter-spacing:.06em;text-align:center;
}
.plan input.mc-usd:focus{outline:none;border-color:var(--gold)}
.plan input.mc-usd::placeholder{color:var(--dim);letter-spacing:.04em}
/* 數字欄的上下箭頭在深色底上很醜，直接收掉（金額用鍵盤打就好） */
.plan input.mc-usd::-webkit-outer-spin-button,
.plan input.mc-usd::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.plan input.mc-usd{-moz-appearance:textfield;appearance:textfield}
.plan ul{margin:12px 0 0;padding-left:18px;color:var(--muted);font-size:14.5px}
.plan li{margin:6px 0}
/* ---------- 條列（會員中心） ---------- */
.li{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid var(--line-soft);font-size:14.5px;color:var(--muted)}
.li b{color:var(--gold2);font-weight:400}
.field.sel select{
  width:100%;padding:11px 12px;font:inherit;font-size:15px;color:var(--ivory);
  background:rgba(255,255,255,.03);border:1px solid var(--line);outline:none;
}
.field.sel select:focus{border-color:var(--gold)}
.field.sel select option{background:#12100c;color:var(--ivory)}
table.prices{width:100%;border-collapse:collapse;font-size:14.5px}
table.prices th,table.prices td{padding:10px 10px;border-bottom:1px solid var(--line-soft);text-align:left}
table.prices th{font-size:12px;letter-spacing:.14em;color:var(--dim);font-weight:400}
table.prices td.c{text-align:right;color:var(--gold2);font-variant-numeric:tabular-nums;white-space:nowrap}
table.prices tr.free td{color:var(--dim)}

/* ---------- 解鎖狀態 ---------- */
.tag{
  display:inline-block;font-size:11.5px;letter-spacing:.14em;padding:3px 9px;
  border:1px solid var(--line);color:var(--dim);
}
.tag.on{border-color:rgba(155,201,136,.5);color:var(--green)}
.tag.off{border-color:rgba(220,149,120,.5);color:var(--red)}

/* ---------- 模擬器工具列（浮在底部） ---------- */
/* 站上入口：正式版會掛在根目錄 index.html 頁首右上角（模擬主站深色頁首上的樣子） */
.acct-chip{
  position:fixed;right:18px;top:14px;z-index:120;display:flex;align-items:center;gap:12px;
  padding:8px 14px;text-decoration:none;background:rgba(8,7,5,.72);
  border:1px solid rgba(205,166,90,.5);backdrop-filter:blur(6px);
}
.acct-chip .who{font-size:13.5px;color:var(--ivory);letter-spacing:.04em}
.acct-chip .bal{font-size:12.5px;color:var(--gold2);letter-spacing:.08em}
.acct-chip:hover{border-color:var(--gold2);background:rgba(205,166,90,.12)}
.mock-bar{
  position:fixed;right:14px;top:50%;transform:translateY(-50%);z-index:99;
  display:flex;flex-direction:column;align-items:stretch;gap:7px;
  width:184px;padding:12px 13px;
  background:rgba(10,8,6,.92);border:1px solid var(--line);
  font-size:12px;color:var(--muted);backdrop-filter:blur(6px);
}
.mock-bar .mbt{font-size:10px;letter-spacing:.26em;color:var(--dim);text-align:center;
  border-bottom:1px solid var(--line-soft);padding-bottom:7px;margin-bottom:3px}
.mock-bar .st{display:block;font-size:11.5px;line-height:1.5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mock-bar .row{display:flex;gap:7px}
.mock-bar b{color:var(--gold2);font-weight:400}
.mock-bar .dot{width:8px;height:8px;border-radius:50%;background:var(--dim);display:inline-block;margin-right:6px}
.mock-bar .dot.in{background:var(--green)}
.mock-bar button{
  font:inherit;font-size:12px;cursor:pointer;padding:5px 11px;color:var(--muted);
  background:transparent;border:1px solid var(--line);flex:1 1 0;
}
.mock-bar button:hover{color:var(--gold2);border-color:var(--gold)}
.mock-bar .sp{margin-left:auto;color:var(--dim);font-size:11.5px}

/* 【補 310】mock-bar 拆成「訪客面板」與「開發者面板」兩塊，
   account/* 這幾頁用的是這一支 CSS，所以兩塊的定位也要在這裡補一份。
   訪客面板維持置中；開發者面板釘右下角，上線前整塊刪掉。 */
.mock-bar .note{display:block;font-size:11px;line-height:1.45;color:var(--dim);
  border-top:1px solid var(--line-soft);padding-top:7px;margin-top:2px}
.mock-bar.mock-dev-bar{top:auto;bottom:14px;transform:none;z-index:98}
.mock-bar .row button[data-a="clearcards"]{color:var(--dim)}

/* ---------- 彈窗 ---------- */
.dlg-mask{
  position:fixed;inset:0;z-index:120;background:rgba(4,3,2,.72);
  display:none;align-items:center;justify-content:center;
}
.dlg-mask.on{display:flex}
.dlg{
  width:420px;max-width:calc(100% - 40px);background:#12100c;
  border:1px solid rgba(205,166,90,.55);padding:24px 26px;
}
.dlg h3{margin:0 0 4px;font-size:22px;color:var(--gold2)}
.dlg .sub{color:var(--dim);font-size:12.5px;letter-spacing:.08em;margin:0 0 16px}
.dlg .kv{display:flex;justify-content:space-between;padding:7px 0;border-bottom:1px solid var(--line-soft);font-size:14.5px;color:var(--muted)}
.dlg .kv b{color:var(--gold2);font-weight:400}
.dlg .kv b.warn{color:var(--red)}
.dlg .row{justify-content:flex-end}
.dlg .hint{margin:14px 0 0;font-size:12.5px;color:var(--dim)}


/* ==========================================================================
   【補 417】積分包五卡一列（2026-09-24 使用者指示）
     · 5 張充值卡要排在同一列，原本 minmax(196px,1fr) 在 1916 寬只排得下 4 張。
       改成 minmax(160px,1fr)＋auto-fit：夠寬就是 5 張一列，不夠寬自己降成 4／3／2／1。
     · 卡片內距與字級同時收斂，這樣五分之一寬也塞得下「Recargar US$100」這種長按鈕字。
     · 等高分頁表：五張卡一樣高，按鈕用 margin-top:auto 一律貼齊底部，
       右邊才不會露出一段參差的空白（padding-top 是卡片再矮也要留的最小間隔）。
     · 「最受歡迎」徽章改成貼死卡片右上角，並在卡片頂端留一條 26px 的帶狀空間，
       徽章只會落在那一條裡，不會再壓到「créditos」那一行。
   ========================================================================== */
.packs5{grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px;align-items:stretch}
.packs5>.card,.packs5>.plan{display:flex;flex-direction:column;padding:26px 14px 16px}
.packs5>.card>p,.packs5>.plan>p{font-size:12.5px;line-height:1.6}
.packs5 .price{font-size:27px;letter-spacing:0}
.packs5 .price small{font-size:11.5px;margin-left:5px}
.packs5 .bonus,.packs5 h3.bonus{font-size:19px;letter-spacing:.04em;line-height:1.2;margin:6px 0 0}
.packs5 .btn{display:block;width:100%;box-sizing:border-box;text-align:center;padding:9px 6px;font-size:13px;white-space:nowrap}
.packs5 .row{margin-top:auto;padding-top:12px}
.packs5 input.mc-usd{margin-top:10px;padding:9px 8px;font-size:14px}
.packs5 .mc-badge,.packs5 .tag{font-size:10px;letter-spacing:.05em;padding:2px 6px;line-height:1.35}