/* searchhub 站点样式。浅色、等宽、琥珀色重点。

   琥珀色分三种用途，不能混用：
   --amber       #F0B429  按钮填充、描边、小色块（配深色字 9.8:1）
   --amber-text  #8A5A00  文字里的琥珀色（白底 5.9:1；#F0B429 当文字只有 1.86:1）
   --amber-data  #B87812  图表数据色（dataviz 验证器在深/浅底上均通过）

   文字对比度（白底）：text 18:1 / muted 5.9:1 / faint 4.7:1 */

:root{
  --page:#FFFFFF; --panel:#FFFFFF; --sunken:#F7F8FA; --border:#E3E7EC; --line:#EEF1F4;
  --text:#12161C; --muted:#5A6573; --faint:#6B7583;
  --amber:#F0B429; --amber-text:#8A5A00; --amber-data:#B87812; --amber-ink:#1A1408;
  --amber-wash:#FDF6E3;
  --blue:#0B6BCB; --red:#B42318; --green:#1F7A4A;
  --mono: ui-monospace,"SF Mono","JetBrains Mono",Menlo,Consolas,monospace;
  --maxw:1120px;
}
*{box-sizing:border-box}
html{color-scheme:light; scroll-behavior:smooth}
body{
  margin:0; background:var(--page); color:var(--text);
  font-family:var(--mono); font-size:14px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px}
a{color:var(--blue); text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{margin:0; font-weight:600; letter-spacing:-.005em}
h1{font-size:32px; line-height:1.25}
h2{font-size:20px}
h3{font-size:15px}
p{margin:0 0 12px}
.lede{color:var(--muted); max-width:66ch; font-size:13.5px}

/* ---------- 顶栏 ---------- */
.nav{
  position:sticky; top:0; z-index:20; background:rgba(255,255,255,.92);
  backdrop-filter:blur(8px); border-bottom:1px solid var(--border);
}
.nav-in{display:flex; align-items:center; gap:22px; height:56px}
.brand{display:flex; align-items:center; gap:9px; color:var(--text); font-size:15px}
.brand:hover{text-decoration:none}
.mark{width:10px;height:10px;background:var(--amber);flex:none}
.nav a.link{color:var(--muted); font-size:13.5px}
.nav a.link:hover{color:var(--text); text-decoration:none}
.nav a.link.active{color:var(--text)}
.spacer{flex:1}

/* ---------- 按钮 ---------- */
.btn{
  font:inherit; cursor:pointer; border-radius:2px; padding:8px 15px;
  border:1px solid var(--border); background:var(--panel); color:var(--text);
  white-space:nowrap; font-size:13.5px; display:inline-block;
}
.btn:hover{border-color:var(--faint); text-decoration:none}
.btn-primary{background:var(--amber); color:var(--amber-ink); border-color:var(--amber); font-weight:600}
.btn-primary:hover{background:#FFC53D; border-color:#FFC53D; color:var(--amber-ink)}
.btn-sm{padding:5px 11px; font-size:12.5px}
.btn-ghost{background:transparent}
.btn-danger{color:var(--red)}
.btn:disabled{opacity:.5; cursor:not-allowed}
:focus-visible{outline:2px solid var(--amber-text); outline-offset:2px}

/* ---------- 区块 ---------- */
section{padding:56px 0; border-bottom:1px solid var(--border)}
.eyebrow{font-size:12px; color:var(--amber-text); margin-bottom:10px}
.grid{display:grid; gap:18px}
.g3{grid-template-columns:repeat(3,1fr)}
.g2{grid-template-columns:repeat(2,1fr)}
@media(max-width:820px){.g3,.g2{grid-template-columns:1fr}}

.card{border:1px solid var(--border); background:var(--panel); padding:22px; border-radius:2px}
.card h3{margin-bottom:8px}
.card p{color:var(--muted); font-size:13px; margin:0}

/* ---------- 代码 ---------- */
pre{
  background:var(--sunken); border:1px solid var(--border); border-radius:2px;
  padding:14px 16px; overflow-x:auto; font-size:12.5px; line-height:1.6; margin:0;
}
code{font-family:var(--mono)}
:not(pre)>code{background:var(--sunken); border:1px solid var(--border); border-radius:2px; padding:1px 5px; font-size:12.5px}
.k{color:var(--amber-text)}
.s{color:var(--green)}
.c{color:var(--faint)}

/* ---------- 表 ---------- */
table{width:100%; border-collapse:collapse; font-size:13px}
th{text-align:start; font-weight:500; color:var(--faint); font-size:11.5px;
   padding-block:0 8px; padding-inline:0 12px; border-bottom:1px solid var(--border)}
td{padding-block:9px; padding-inline:0 12px; border-bottom:1px solid var(--line); vertical-align:top}
td.num,th.num{text-align:end; padding-inline-end:0}
/* 右对齐数字列后面紧跟的列要留间距，否则数字会和后面的文字粘连 */
td.num+td, th.num+th{padding-inline-start:20px}
/* 包在卡片里的表格：卡片不留内边距时，首尾列自己留 */
.card.flush{padding:0}
.card.flush th:first-child, .card.flush td:first-child{padding-inline-start:18px}
.card.flush th:last-child, .card.flush td:last-child{padding-inline-end:18px}
.card.flush th{padding-top:12px}
.muted{color:var(--muted)}
.faint{color:var(--faint)}
.mono-sm{font-size:12px; color:var(--muted)}

/* ---------- 标签 ---------- */
.tag{display:inline-block; border:1px solid var(--border); padding:1px 7px; border-radius:2px; font-size:11.5px; color:var(--muted); background:var(--panel)}
.tag-amber{color:var(--amber-text); border-color:#EBD9A8; background:var(--amber-wash)}
.tag-green{color:var(--green); border-color:#C5E3D0; background:#EEF7F1}
.tag-red{color:var(--red); border-color:#F2C9C5; background:#FDF0EF}

/* ---------- 提示条 ---------- */
.toast{position:fixed; inset-inline-end:20px; bottom:20px; z-index:60; display:flex; flex-direction:column; gap:8px}
.toast-item{
  background:var(--panel); border:1px solid var(--border); border-inline-start:2px solid var(--amber);
  padding:10px 14px; font-size:13px; border-radius:2px; max-width:340px;
  box-shadow:0 6px 20px rgba(18,22,28,.10);
}
.toast-item.bad{border-inline-start-color:var(--red)}
.toast-item.good{border-inline-start-color:var(--green)}

/* ---------- 表单 ---------- */
label{display:block; font-size:12px; color:var(--muted); margin:0 0 6px}
input,select{
  font:inherit; color:var(--text); background:var(--panel);
  border:1px solid var(--border); border-radius:2px; padding:9px 11px; width:100%;
}
input::placeholder{color:#9AA3AE}
.row{display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end}
.row>div{flex:1 1 200px}
.msg{margin-top:14px; font-size:13px; padding:9px 12px; border-radius:2px; border:1px solid var(--border); background:var(--sunken)}
.msg.bad{border-color:#F2C9C5; background:#FDF0EF; color:var(--red)}
.msg.good{border-color:#C5E3D0; background:#EEF7F1; color:var(--green)}
.empty{color:var(--faint); font-size:13px; padding:8px 0}
.hidden{display:none}

/* ---------- 页脚 ---------- */
footer{padding:44px 0 60px; color:var(--faint); font-size:12.5px; background:var(--sunken); border-top:1px solid var(--border)}
.foot-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:24px}
@media(max-width:700px){.foot-grid{grid-template-columns:repeat(2,1fr)}}
footer h4{font-size:12px; color:var(--muted); margin:0 0 10px; font-weight:500}
footer ul{list-style:none; margin:0; padding:0}
footer li{margin-bottom:6px}
footer a{color:var(--faint)}
footer a:hover{color:var(--text)}

@media(prefers-reduced-motion:reduce){*{transition:none!important; animation:none!important; scroll-behavior:auto!important}}

/* ---------- 语言菜单 ---------- */
.lang-switch{position:relative}
.lang-switch summary{
  list-style:none; cursor:pointer; display:flex; align-items:center; gap:6px;
  color:var(--muted); font-size:13px; padding:5px 8px; border-radius:2px;
}
.lang-switch summary::-webkit-details-marker{display:none}
.lang-switch summary:hover{color:var(--text); background:var(--sunken)}
.lang-switch ul{
  position:absolute; inset-inline-end:0; top:calc(100% + 6px); z-index:30;
  list-style:none; margin:0; padding:6px 0; min-width:180px;
  background:var(--panel); border:1px solid var(--border); border-radius:2px;
  box-shadow:0 6px 20px rgba(18,22,28,.10);
}
.lang-switch li a{display:block; padding:6px 14px; color:var(--text); font-size:13px}
.lang-switch li a:hover{background:var(--sunken); text-decoration:none}
.lang-switch li a[aria-current]{color:var(--amber-text); font-weight:600}

/* ---------- 从右往左（阿拉伯语） ----------
   布局用的都是 inline-start/end，会自动镜像。
   代码、API 密钥、邮箱这类内容本身是从左往右的，不能跟着翻。 */
pre, pre code{direction:ltr; text-align:left}
:not(pre)>code{unicode-bidi:isolate}
input[type="email"], input[type="password"], svg.bars{direction:ltr}
.mono-sm{unicode-bidi:isolate}
[dir="rtl"] input[type="email"], [dir="rtl"] input[type="password"]{text-align:right}

/* ---------- 字体 ----------
   等宽字体通常不含阿拉伯文和泰文字形，回落后很难看；这两种语言正文改用系统无衬线，代码仍是等宽。 */
html[lang="ar"] body{font-family:"Noto Sans Arabic","Segoe UI",Tahoma,"Geeza Pro",sans-serif; line-height:1.8}
html[lang="th"] body{font-family:"Noto Sans Thai","Leelawadee UI","Thonburi",Tahoma,sans-serif; line-height:1.8}
html[lang="ar"] .btn, html[lang="ar"] input, html[lang="th"] .btn, html[lang="th"] input{font-family:inherit}

/* ---------- 窄屏导航 ----------
   加了语言菜单后，"logo + 文档 + 价格 + 语言 + 登录 + 注册" 在手机宽度放不下。
   窄屏时收起文档 / 价格链接（页脚里都有），语言菜单只留地球图标；仍放不下就换行。 */
@media (max-width:640px){
  .nav-in{gap:10px; flex-wrap:wrap; height:auto; min-height:56px; padding-block:8px}
  .nav a.link{display:none}
  .lang-switch summary span{display:none}
  .lang-switch summary{padding:6px}
  #nav-auth{gap:6px !important}
  #nav-auth .btn{padding:5px 9px; font-size:12px}
}