/* 遊SIM — 樣式表 v3（設計方向見 DESIGN.md）
   照足 opencode.ai 主站（packages/console/app）嘅設計語言重寫：
   近黑底、面板靠 1px 幼邊分區唔靠陰影、全站 mono 字、[*] 標記、
   interactive 淡黃只准用喺指定位置。零漸變、零陰影、零外部資源。 */
:root {
  /* opencode 主站 dark token（來源：routes/index.css 入面
     [data-page="opencode"] 嘅 prefers-color-scheme: dark 一套；
     hex 係由原 hsl 換算，逐個對照見 DESIGN.md） */
  --bg: #131010;              /* hsl(0, 9%, 7%)   --color-background */
  --bg-weak: #1B1818;         /* hsl(0, 6%, 10%)  --color-background-weak */
  --bg-weak-hover: #292424;   /* hsl(0, 6%, 15%)  --color-background-weak-hover */
  --bg-strong: #F2EDED;       /* hsl(0, 15%, 94%) --color-background-strong */
  --bg-strong-hover: #F8F6F6; /* hsl(0, 15%, 97%) --color-background-strong-hover */
  --interactive: #FDFFCC;     /* hsl(62, 100%, 90%) --color-background-interactive（全站唯一 accent） */
  --interactive-weaker: #181810; /* hsl(60, 20%, 8%) --color-background-interactive-weaker */
  --text: #B8B2B2;            /* hsl(0, 4%, 71%)  --color-text */
  --text-weak: #7F7A7A;       /* hsl(0, 2%, 49%)  --color-text-weak */
  --text-weaker: #4A4545;     /* hsl(0, 3%, 28%)  --color-text-weaker */
  --text-strong: #F2EDED;     /* hsl(0, 15%, 94%) --color-text-strong */
  --inverted: #131010;        /* hsl(0, 9%, 7%)   --color-text-inverted */
  --border: #4A4545;          /* hsl(0, 3%, 28%)  --color-border */
  --border-weak: #3D3838;     /* hsl(0, 4%, 23%)  --color-border-weak */
  --icon: #716B6A;            /* hsl(10, 3%, 43%) --color-icon（[*] 標記用） */
  --error: #FF453A;           /* console token color.css dark --color-danger */
  --white: #FFFFFF;           /* console token --color-white（只准俾 QR 圖底色） */

  /* 字級：opencode token/font.css 原尺 */
  --fs-2xs: 0.6875rem;
  --fs-xs: 0.75rem;
  --fs-sm: 0.8125rem;
  --fs-md: 0.9375rem;
  --fs-lg: 1.125rem;
  --fs-xl: 1.25rem;
  --fs-2xl: 1.5rem;
  --fs-3xl: 1.875rem;
  --heading: 1.375rem;        /* opencode --heading-font-size */

  /* 圓角：opencode 實測值 — 掣 4px、卡／輸入框 6px */
  --radius-btn: 4px;
  --radius-card: 6px;

  /* 間距節奏：opencode --vertical-padding 4rem（手機 3rem）、
     容器闊 67.5rem、內距 5rem（手機 1.5rem） */
  --vpad: 4rem;
  --pad: 5rem;

  /* opencode --font-mono 原堆疊係 "Berkeley Mono", "IBM Plex Mono", ui-monospace…
     我哋唔載外部字型，由 ui-monospace 起頭近似（限制見 DESIGN.md）；
     中文字形跌落 PingFang／Noto Sans TC，同 opencode 個堆疊嘅 fallback 行為一致。
     opencode 本人 --font-sans: var(--font-mono)，即係全站一隻字，我哋跟足。 */
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Monaco, Consolas,
    "Liberation Mono", "Courier New",
    "PingFang HK", "PingFang TC", "Microsoft JhengHei", "Noto Sans TC", monospace;
  --sans: var(--mono);
}

* { box-sizing: border-box; }

html { background: var(--bg); }

body {
  margin: 0;
  font-family: var(--sans);
  color: var(--text);
  background: var(--bg);
  line-height: 2; /* opencode 主站 p 行高 200% */
  -webkit-font-smoothing: antialiased;
}

/* ::selection：opencode dark 原式 — interactive 底、inverted 字 */
::selection { background: var(--interactive); color: var(--inverted); }

.wrap {
  max-width: 67.5rem; /* opencode container 67.5rem */
  margin: 0 auto;
  padding: 0 1.5rem;
}
@media (min-width: 60rem) {
  .wrap { padding: 0 var(--pad); }
}
@media (min-width: 65rem) {
  /* opencode container 左右 1px 幼邊（≤65rem 取消，我哋跟足） */
  .wrap {
    border-left: 1px solid var(--border-weak);
    border-right: 1px solid var(--border-weak);
  }
}

a { color: var(--text-strong); }
a:hover {
  text-decoration: underline;
  text-underline-offset: 0.25rem; /* opencode --space-1 */
  text-decoration-thickness: 1px;
  text-decoration-color: var(--interactive); /* accent 只准用喺連結 hover */
}
/* 鍵盤焦點：opencode focus.css 原式 2px text-strong 外框 */
:focus-visible { outline: 2px solid var(--text-strong); outline-offset: 2px; }

strong { color: var(--text-strong); }

/* Header：opencode [data-component="top"] — 80px 高、sticky、底 1px 幼線 */
.site-header {
  background: var(--bg);
  position: sticky;
  top: 0;
  z-index: 10;
  border-bottom: 1px solid var(--border-weak);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 5rem; /* 80px */
}
.brand {
  color: var(--text-strong);
  font-size: var(--fs-xl);
  font-weight: 700;
  text-decoration: none;
}
.brand:hover { text-decoration: none; }
.main-nav a {
  color: var(--text);
  text-decoration: none;
  margin-left: 2rem; /* opencode nav gap 32px */
  font-size: var(--fs-md);
}
.main-nav a:hover {
  color: var(--text-strong);
  text-decoration: underline;
  text-underline-offset: 0.25rem;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--text-strong);
}

/* Hero：opencode [data-component="hero"] — 上距 vertical-padding × 1.5 */
.hero { padding: calc(var(--vpad) * 1.5) 0 var(--vpad); }
.hero-eyebrow {
  font-size: var(--fs-sm);
  color: var(--text-weak);
  text-transform: uppercase;
  margin: 0 0 14px; /* opencode hero 頂標籤 margin-bottom 14px */
}
.hero h1 {
  font-size: 2.375rem; /* opencode hero h1 38px */
  font-weight: 700;
  color: var(--text-strong);
  line-height: 1.3; /* CJK 字形需要，已喺 DESIGN.md 註明同 opencode Latin lh:1 嘅分別 */
  margin: 0 0 0.5rem;
  max-width: 16em;
}
.hero-sub {
  max-width: 82%; /* opencode hero p max-width 82% */
  margin: 0 0 2rem; /* opencode hero p margin-bottom 32px */
  color: var(--text);
}
@media (max-width: 50rem) {
  .hero-sub { max-width: 100%; }
}

/* 掣：主掣跟 opencode「interactive」— 淡黃底、近黑字；
   次掣跟佢「background-strong」— 近白底、近黑字。圓角 4px（主站 CTA 實測）。 */
.btn {
  display: inline-block;
  background: var(--bg-strong);
  color: var(--inverted);
  border: 1px solid var(--bg-strong);
  border-radius: var(--radius-btn);
  padding: 0.75rem 1rem; /* console button.css space-3 / space-4 */
  font-size: var(--fs-md);
  font-weight: 500;
  line-height: 1.25;
  font-family: inherit;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
}
.btn:hover { background: var(--bg-strong-hover); border-color: var(--bg-strong-hover); text-decoration: none; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-hero, .plan-card .btn, .cta-box .btn {
  background: var(--interactive);
  border-color: var(--interactive);
  color: var(--inverted);
}
.btn-hero:hover, .plan-card .btn:hover, .cta-box .btn:hover {
  background: var(--bg-strong);
  border-color: var(--bg-strong);
  color: var(--inverted);
}
.hero-note {
  margin: 1.125rem 0 0;
  font-size: var(--fs-sm);
  color: var(--text-weak);
}

/* Sections：opencode 每節以 1px 幼線分隔，上下 padding 用 vertical-padding */
.section {
  padding: var(--vpad) 0;
  border-top: 1px solid var(--border-weak);
}
main > .section:first-child { border-top: none; } /* 單節子頁唔好同 header 條線疊住 */
.section-alt { /* 舊 class 名保留（HTML 唔改），效果同 .section 一致：全站分節只靠幼線 */ }
.section h1, .section h2 {
  font-size: var(--heading);
  font-weight: 700;
  color: var(--text-strong);
  line-height: 1.4;
  margin: 0 0 1.5rem; /* opencode section-title margin-bottom 24px */
}
/* 每節標題前嘅 [*] 標記：opencode 主站每節都係呢個 icon 起頭，色用 --icon。
   只用喺非文章頁嘅章節／頁面標題；文章內文標題（.article-body 入面）唔加，保持返 opencode 文章嘅平實層次。 */
.section:not(.article-body) h1, .section:not(.article-body) h2 {
  display: flex;
  align-items: baseline;
  gap: 0.75rem; /* opencode 標題列 gap 12px */
}
.section:not(.article-body) h1::before, .section:not(.article-body) h2::before {
  content: "[*]";
  color: var(--icon);
  font-weight: 400;
  flex: none;
}
.section-lead { color: var(--text); margin: 0 0 1.5rem; max-width: 42rem; }

/* 篩選掣：跟 opencode tabs／次掣語言 — 幼邊、hover 入 weak 面、active 用 strong 反白 */
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}
.filter-btn {
  border: 1px solid var(--border-weak);
  background: transparent;
  color: var(--text);
  border-radius: var(--radius-btn);
  padding: 0.5rem 0.75rem; /* console button small：space-2 / space-3 */
  font-size: var(--fs-sm);
  font-family: inherit;
  cursor: pointer;
}
.filter-btn:hover { background: var(--bg-weak); color: var(--text-strong); }
.filter-btn.active {
  background: var(--bg-strong);
  border-color: var(--bg-strong);
  color: var(--inverted);
  font-weight: 500;
}

/* Plan 卡：跟 opencode testimonial 面板 — weak 底、1px 幼邊、6px 圓角、20px 內距 */
.plan-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
.plan-card {
  background: var(--bg-weak);
  border: 1px solid var(--border-weak);
  border-radius: var(--radius-card);
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
}
.plan-card:hover { background: var(--bg-weak-hover); border-color: var(--border); }
.plan-dest {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-strong);
  margin: 0;
}
.plan-data {
  font-size: var(--fs-3xl);
  font-weight: 700;
  color: var(--text-strong);
  line-height: 1.2;
  margin: 0.5rem 0 0;
}
.plan-days {
  font-size: var(--fs-sm);
  color: var(--text-weak);
  margin: 0.25rem 0 1rem;
}
.plan-price {
  font-size: var(--fs-2xl);
  font-weight: 700;
  color: var(--interactive); /* accent 只准用喺價格 */
  line-height: 1.25;
  margin: 0 0 1rem;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.plan-card .btn { margin-top: auto; width: 100%; }
.demo-note { color: var(--text); font-size: var(--fs-sm); margin-top: 1.5rem; }

/* 步驟：面板同 plan 卡同一家人；編號用 accent（規則見 DESIGN.md） */
.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
.steps li {
  background: var(--bg-weak);
  border: 1px solid var(--border-weak);
  border-radius: var(--radius-card);
  padding: 1.25rem;
}
.step-num {
  font-size: var(--fs-xl);
  font-weight: 700;
  color: var(--interactive); /* accent 只准用喺編號 */
  line-height: 1.25;
}
.steps h3 { margin: 0.75rem 0 0.5rem; font-size: 1rem; font-weight: 700; color: var(--text-strong); }
.steps p { margin: 0; color: var(--text); line-height: 1.8; }

/* 提示面板：同卡同一套面板語言，唔用彩色側邊 */
.compat-box {
  background: var(--bg-weak);
  border: 1px solid var(--border-weak);
  border-radius: var(--radius-card);
  padding: 1.25rem;
}
.compat-box p { margin: 0 0 0.625rem; }
.compat-box p:last-child { margin-bottom: 0; }
code {
  background: var(--bg-weak);
  border: 1px solid var(--border-weak);
  color: var(--text-strong);
  padding: 0.125rem 0.5rem;
  border-radius: var(--radius-btn);
  font-size: 0.95em;
  white-space: nowrap;
}
.compat-box code { background: var(--bg); }

/* FAQ：opencode faq 元件原式 — 唔用盒，幼線分隔，答案縮入 40px */
.faq-list details {
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--border-weak);
}
.faq-list details:last-child { border-bottom: none; }
.faq-list summary {
  font-weight: 700;
  color: var(--text-strong);
  cursor: pointer;
}
.faq-list summary::marker { color: var(--icon); }
.faq-list details p {
  margin: 0.5rem 0 0;
  padding-left: 2.5rem; /* opencode faq-answer margin-left 40px */
  color: var(--text);
}
@media (max-width: 60rem) {
  .faq-list details p { padding-left: 1rem; }
}

/* Footer：opencode footer／legal 原式 — 頂 1px 幼線、置中、連結 text-weak */
.site-footer {
  border-top: 1px solid var(--border-weak);
  color: var(--text-weak);
  text-align: center;
  padding: 2rem 0;
  font-size: var(--fs-sm);
}
.site-footer p { margin: 0 0 0.375rem; }
.site-footer p:last-child { margin-bottom: 0; }
.site-footer a { color: var(--text-weak); text-decoration: none; }
.site-footer a:hover {
  color: var(--text-strong);
  text-decoration: underline;
  text-underline-offset: 0.25rem;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--text-strong);
}
.footer-note { font-size: var(--fs-sm); color: var(--text-weak); }

/* 彈窗：面板靠邊框分層，backdrop 用 --bg 同色加 alpha（唔係新顏色） */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(19, 16, 16, 0.72); /* #131010（--bg）72% */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  z-index: 50;
}
.modal-backdrop[hidden] { display: none; }
.modal {
  background: var(--bg-weak);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 1.5rem;
  max-width: 380px;
  width: 100%;
  text-align: center;
}
.modal h3 { margin: 0 0 0.625rem; font-size: var(--fs-lg); font-weight: 700; color: var(--text-strong); }
.modal p { color: var(--text); margin: 0 0 0.625rem; }

/* 攻略連結：面板同卡同一家人 */
.guide-links { list-style: none; margin: 0; padding: 0; }
.guide-links li {
  background: var(--bg-weak);
  border: 1px solid var(--border-weak);
  border-radius: var(--radius-card);
  padding: 1.25rem;
  margin-bottom: 0.5rem;
}
.guide-links li:hover { background: var(--bg-weak-hover); border-color: var(--border); }
.guide-links a { font-weight: 700; }

/* 麵包屑：跟 opencode legal／nav 嘅弱連結語言 */
.breadcrumb {
  font-size: var(--fs-sm);
  color: var(--text-weak);
  margin: 0 0 1.5rem;
}
.breadcrumb a { color: var(--text-weak); text-decoration: none; }
.breadcrumb a:hover {
  color: var(--text-strong);
  text-decoration: underline;
  text-underline-offset: 0.25rem;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--text-strong);
}

/* 文章頁：標題層次跟返主站同一把尺（--heading／1rem h3），唔另開一套；例外：文章 h1 用 3xl，令標題同節標題分到層次（frontend-design 審查：全頁只得一個最 bold 嘅位） */
.article-body h1 { font-size: var(--fs-3xl); line-height: 1.4; font-weight: 700; color: var(--text-strong); margin: 0 0 1rem; }
.article-body h2 { font-size: var(--heading); line-height: 1.4; font-weight: 700; color: var(--text-strong); margin: 3rem 0 0.75rem; }
.article-body h3 { font-size: 1rem; font-weight: 700; color: var(--text-strong); margin: 1.5rem 0 0.5rem; }
.article-body p { margin: 0 0 1rem; }
.article-body ul, .article-body ol { padding-left: 1.5rem; }
.article-body li { margin-bottom: 0.5rem; }
.article-body .steps li { margin-bottom: 0; }

/* 表格：跟 opencode tabs 面板 — weak 面、幼邊、表頭 strong */
.data-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--bg-weak);
  border: 1px solid var(--border-weak);
  margin: 1rem 0 1.5rem;
  font-size: var(--fs-md);
  line-height: 1.6;
}
.data-table th, .data-table td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border-weak);
  text-align: left;
}
.data-table th {
  background: var(--bg-weak-hover);
  color: var(--text-strong);
  font-weight: 700;
  font-size: var(--fs-sm);
}
.data-table tr:last-child td { border-bottom: none; }

/* 攻略頁 CTA：一個普通 section 面板，唔做反色印章 */
.cta-box {
  background: var(--bg-weak);
  border: 1px solid var(--border-weak);
  border-radius: var(--radius-card);
  padding: 2rem 1.5rem;
  text-align: center;
  margin: 2rem 0 0.375rem;
}
.cta-box h2 { margin-top: 0; }
.cta-box p { color: var(--text); }

/* 表單同通知：全站共用一套（規則見 DESIGN.md）
   輸入框跟 opencode 主站 email 輸入原式：weak 底、6px 圓角、幼邊；
   focus 嗰陣跟佢 dark 做法：邊框轉 interactive、唔用陰影 */
input[type="email"], input[type="text"], input[type="search"], input[type="tel"] {
  display: block;
  width: 100%;
  padding: 1rem 1.25rem; /* opencode space-4 / space-5 */
  font: inherit;
  font-size: 1rem;
  color: var(--text-strong);
  background: var(--bg-weak);
  border: 1px solid var(--border-weak);
  border-radius: var(--radius-card);
}
input::placeholder { color: var(--text-weak); opacity: 1; }
input:focus {
  background: var(--interactive-weaker);
  border-color: var(--interactive);
  outline: none;
}
/* opencode 主站原有嘅 autofill 處理：文字色唔好俾瀏覽器預設搶走 */
input:-webkit-autofill { -webkit-text-fill-color: var(--text-strong) !important; }
input:-moz-autofill { -moz-text-fill-color: var(--text-strong) !important; }
.form-label { display: block; font-weight: 700; color: var(--text-strong); margin: 0.75rem 0 0.375rem; }
.form-label input { margin-top: 0.375rem; }
.form-error { color: var(--error); font-size: var(--fs-md); margin: 0.5rem 0 0; }
.form-note { color: var(--text-weak); font-size: var(--fs-sm); margin: 0.625rem 0 0; }
.btn-block { display: block; width: 100%; margin-top: 0.875rem; }
.notice {
  background: var(--bg-weak);
  border: 1px solid var(--border-weak);
  border-radius: var(--radius-card);
  padding: 0.75rem 1rem;
  margin: 0.875rem 0 0;
  color: var(--text);
}
.checkout-form { text-align: left; }

/* 訂單成功頁 */
.status-big { font-size: var(--fs-lg); font-weight: 700; color: var(--text-strong); }
.qr-img {
  width: 220px;
  height: 220px;
  background: var(--white); /* QR 要白底先掃到：用 console --color-white token，功能需要 */
  border: 1px solid var(--border-weak);
  border-radius: var(--radius-card);
  padding: 0.5rem;
}
.ac-code {
  word-break: break-all;
  background: var(--bg);
  border: 1px solid var(--border-weak);
  border-radius: var(--radius-btn);
  padding: 0.625rem 0.75rem;
  display: block;
  margin: 0.5rem 0;
  color: var(--text-strong);
}

/* 間距工具 */
.mt-16 { margin-top: 1rem; }

/* 細屏：opencode 主站 ≤60rem — 字 15px、行高 180%、直距 3rem、hero h1 22px */
@media (max-width: 60rem) {
  :root { --vpad: 3rem; }
  body { font-size: 15px; line-height: 1.8; }
  .hero h1 { font-size: 1.375rem; }
}

/* 平板／桌面欄數 */
@media (min-width: 40rem) {
  .plan-grid { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 60rem) {
  .plan-grid { grid-template-columns: repeat(3, 1fr); }
  .steps { grid-template-columns: repeat(4, 1fr); }
}