/* domain.fs.kg — 设计系统
 * Bento Grid × Neo-Brutalism × SaaS 扁平（与 ip.fs.kg / ns.fs.kg 同族）
 * 硬规则：
 *   1. 每张卡有自己的强调色 --ac，缺省会让色条退回紫色 —— 新增卡片必须配。
 *   2. 数据密的卡不涂底色（结果、时间线、原始 JSON），否则对比度会塌。
 *   3. 任何 var(--x-soft) 必须先在 :root 定义，否则该条声明整条失效（背景会变透明）。
 */

/* 自托管字体（与 ip/ns 同一套，不依赖 Google Fonts） */
@font-face { font-family: 'Space Grotesk'; src: url('/fonts/sg-500.woff') format('woff'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Space Grotesk'; src: url('/fonts/sg-700.woff') format('woff'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('/fonts/jb-400.woff') format('woff'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('/fonts/jb-700.woff') format('woff'); font-weight: 700; font-display: swap; }

:root {
  --paper: #F5EFE1;
  --paper-2: #FFFCF3;
  --ink: #141210;
  --ink-2: #4A423B;
  --ink-3: #7A6E63;

  --violet: #6C4CF1;
  --violet-soft: #E7E1FF;
  --pink: #F2547D;
  --pink-soft: #FFDFE8;
  --sky: #2F9FD8;
  --sky-soft: #D8EEFA;
  --lime: #C8F169;
  --lime-soft: #EDF9CE;
  --coral: #FF6B5A;
  --coral-soft: #FFE0DB;
  --amber: #E8A93C;
  --amber-soft: #FBEBCE;
  --mint: #4FC79B;
  --mint-soft: #D6F4E7;
  --red: #D33129;
  --red-soft: #FBDCD9;

  --bd: 3px solid var(--ink);
  --bd-thin: 2px solid var(--ink);
  --shadow: 7px 7px 0 var(--ink);
  --shadow-sm: 4px 4px 0 var(--ink);
  --r: 14px;
  --r-sm: 9px;

  --font-display: 'Space Grotesk', 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 16px;
  line-height: 1.65;
  background-image:
    linear-gradient(0deg, rgba(20, 18, 16, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(20, 18, 16, .045) 1px, transparent 1px);
  background-size: 28px 28px;
  background-position: -1px -1px;
}

a { color: inherit; text-decoration-color: var(--violet); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }

::selection { background: var(--lime); color: var(--ink); }

.wrap { max-width: 1240px; margin: 0 auto; padding: 0 22px; }

/* ── 顶栏 ───────────────────────────────────────────── */

.top {
  display: flex; align-items: center; gap: 14px;
  padding: 18px 0 14px;
  flex-wrap: wrap;
}

.brand {
  display: inline-flex; align-items: center; gap: 9px;
  font-weight: 700; font-size: 17px; letter-spacing: -.01em;
  text-decoration: none;
}
.brand .mark {
  width: 33px; height: 33px; flex: none;
  display: grid; place-items: center;
  background: var(--violet); color: var(--paper-2);
  border: var(--bd); border-radius: 10px;
  box-shadow: 3px 3px 0 var(--ink);
  font-family: var(--font-mono); font-size: 14px; font-weight: 700;
}
.brand .mark svg { width: 17px; height: 17px; }

.top-nav { display: flex; gap: 8px; margin-left: auto; align-items: center; flex-wrap: wrap; }
.top-nav a {
  font-size: 13.5px; font-weight: 600; text-decoration: none;
  padding: 6px 11px; border: var(--bd-thin); border-radius: 8px;
  background: var(--paper-2);
  box-shadow: 2px 2px 0 var(--ink);
  transition: transform .12s, box-shadow .12s;
}
.top-nav a:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--ink); }
.top-nav a.on { background: var(--ink); color: var(--paper-2); box-shadow: 2px 2px 0 var(--violet); }

.lang-switch {
  display: inline-flex; border: var(--bd-thin); border-radius: 8px;
  overflow: hidden; background: var(--paper-2);
  box-shadow: 2px 2px 0 var(--ink);
  font-family: var(--font-mono); font-size: 12px;
}
.lang-switch a { padding: 6px 9px; text-decoration: none; }
.lang-switch a.on { background: var(--ink); color: var(--paper-2); }

/* ── Hero ───────────────────────────────────────────── */

.eyebrow {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  margin: 0 0 12px;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .02em;
  color: var(--ink-2); text-transform: uppercase;
}
.eyebrow .sq { width: 9px; height: 9px; margin-right: 2px; border: 2px solid var(--ink); }
.sq-violet { background: var(--violet); }
.sq-pink { background: var(--pink); }

.h1 {
  margin: 0 0 14px;
  font-size: clamp(27px, 4.3vw, 44px);
  line-height: 1.16; letter-spacing: -.022em; font-weight: 700;
}
.hl { padding: 0 4px; border-bottom: 3px solid var(--ink); background: transparent; color: inherit; }
.hl-pink { background: var(--pink-soft); }
.hl-sky { background: var(--sky-soft); }
.hl-lime { background: var(--lime-soft); }

.lede { margin: 0 0 4px; max-width: 62ch; color: var(--ink-2); font-size: 15px; }

/* ── 查询框 ─────────────────────────────────────────── */

.search { margin-top: 18px; }

.search-form {
  display: flex; gap: 10px; align-items: stretch;
  flex-wrap: wrap;
}

.field {
  flex: 1 1 320px; min-width: 0;
  display: flex; align-items: center; gap: 9px;
  background: var(--paper-2);
  border: var(--bd); border-radius: var(--r-sm);
  box-shadow: var(--shadow-sm);
  padding: 0 13px;
  transition: box-shadow .14s, transform .14s;
}
.field:focus-within { box-shadow: 5px 5px 0 var(--violet); transform: translate(-1px, -1px); }
.field .i-globe { flex: none; color: var(--ink-3); }
.field input {
  flex: 1 1 auto; min-width: 0;
  border: 0; outline: 0; background: transparent;
  font-family: var(--font-mono); font-size: 15px; color: var(--ink);
  padding: 14px 0;
}
.field input::placeholder { color: var(--ink-3); font-family: var(--font-display); }

.btn-go {
  flex: none;
  font-family: var(--font-display); font-weight: 700; font-size: 15px;
  padding: 0 24px; height: 54px;
  border: var(--bd); border-radius: var(--r-sm);
  background: var(--lime); color: var(--ink);
  box-shadow: var(--shadow-sm); cursor: pointer;
  transition: transform .12s, box-shadow .12s, background .12s;
}
.btn-go:hover { transform: translate(-1px, -1px); box-shadow: 6px 6px 0 var(--ink); }
.btn-go:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.btn-go[disabled] { opacity: .55; cursor: not-allowed; transform: none; box-shadow: var(--shadow-sm); }

.search-hint {
  margin: 10px 0 0; display: flex; gap: 6px; flex-wrap: wrap; align-items: center;
  font-size: 12.5px; color: var(--ink-3);
}
.chip {
  font-family: var(--font-mono); font-size: 12px;
  padding: 2px 8px; border: 2px solid var(--ink); border-radius: 99px;
  background: var(--paper-2); color: var(--ink); cursor: pointer;
  text-decoration: none;
}
.chip:hover { background: var(--lime-soft); }

/* ── Bento 网格 ─────────────────────────────────────── */

.grid {
  display: grid; grid-template-columns: repeat(12, 1fr);
  gap: 16px; margin: 26px 0 0;
}

.cell {
  position: relative;
  background: var(--paper-2);
  border: var(--bd); border-radius: var(--r);
  box-shadow: var(--shadow);
  padding: 20px 22px 22px;
  overflow: hidden;
  grid-column: span 12;
}
.cell::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 6px;
  background: var(--ac, var(--violet));
}

.cell-head { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; flex-wrap: wrap; }
.cell-head .h2 { margin: 0; }
.h2 { font-size: 15.5px; font-weight: 700; letter-spacing: -.01em; display: flex; align-items: center; gap: 8px; }
.h2 svg { width: 18px; height: 18px; flex: none; color: var(--ac, var(--violet)); }

.tag {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .02em;
  padding: 1px 7px; border: 2px solid var(--ink); border-radius: 99px;
  background: var(--lime-soft);
}
.tag.ac { background: var(--ac-soft, var(--violet-soft)); }

/* 格子尺寸 */
.c-hero { grid-column: span 12; }
.c-main { grid-column: span 7; }
.c-side { grid-column: span 5; }
.c-half { grid-column: span 6; }
.c-third { grid-column: span 4; }
.c-faq { grid-column: span 7; }
.c-src { grid-column: span 5; }

/* ── 空状态 / 骨架 ──────────────────────────────────── */

.placeholder { color: var(--ink-3); font-size: 14px; }
.skel { height: 13px; border-radius: 4px; background: var(--paper); border: 2px solid rgba(20,18,16,.18); margin: 7px 0; }

/* ── 结果概览 ───────────────────────────────────────── */

.dname {
  font-family: var(--font-mono); font-size: clamp(21px, 3.2vw, 30px); font-weight: 700;
  letter-spacing: -.02em; word-break: break-all; margin: 0 0 4px;
}
.dname .tld { color: var(--violet); }

.badges { display: flex; gap: 6px; flex-wrap: wrap; margin: 10px 0 0; }
.badge {
  font-size: 12px; font-weight: 700; padding: 3px 9px;
  border: 2px solid var(--ink); border-radius: 6px;
  background: var(--paper); font-family: var(--font-mono);
}
.badge.ok { background: var(--mint-soft); }
.badge.warn { background: var(--amber-soft); }
.badge.bad { background: var(--red-soft); }
.badge.neutral { background: var(--paper); }

.kv { display: grid; grid-template-columns: minmax(84px, 132px) 1fr; gap: 0; margin: 14px 0 0; }
.kv dt, .kv dd {
  padding: 9px 0; border-top: 2px solid rgba(20, 18, 16, .13);
  font-size: 14px; margin: 0;
}
.kv dt { color: var(--ink-3); font-size: 12.5px; letter-spacing: .02em; }
.kv dd { font-family: var(--font-mono); word-break: break-word; }

.mono { font-family: var(--font-mono); }
.muted { color: var(--ink-3); }

/* 到期进度 */
.expiry { margin-top: 16px; }
.expiry-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 7px; }
.expiry-num { font-family: var(--font-mono); font-size: 21px; font-weight: 700; }
.expiry-num small { font-size: 12.5px; font-weight: 400; color: var(--ink-3); margin-left: 3px; }
.expiry-bar { height: 12px; border: 2px solid var(--ink); border-radius: 99px; background: var(--paper); overflow: hidden; }
.expiry-fill { height: 100%; width: 0; background: var(--violet); transition: width .5s ease; }
.expiry-bar.warn .expiry-fill { background: var(--amber); }
.expiry-bar.bad .expiry-fill { background: var(--coral); }
.expiry-scale { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); margin-top: 5px; }

/* ── 时间线 ─────────────────────────────────────────── */

.timeline { list-style: none; margin: 4px 0 0; padding: 0; }
.timeline li {
  position: relative;
  padding: 0 0 16px 22px;
  border-left: 2px solid var(--ink);
  margin-left: 5px;
}
.timeline li:last-child { padding-bottom: 0; border-left-color: transparent; }
.timeline li::before {
  content: ''; position: absolute; left: -7px; top: 3px;
  width: 10px; height: 10px; border: 2px solid var(--ink); border-radius: 50%;
  background: var(--paper-2);
}
.timeline li.key::before { background: var(--violet); }
.timeline .t-label { font-size: 13.5px; font-weight: 700; }
.timeline .t-date { font-family: var(--font-mono); font-size: 12.5px; color: var(--ink-2); }
.timeline .t-rel { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-3); margin-left: 6px; }

/* ── 列表（NS / 联系人 / 状态码） ───────────────────── */

.rows { list-style: none; margin: 0; padding: 0; }
.rows li {
  display: flex; gap: 10px; align-items: baseline; justify-content: space-between;
  padding: 8px 0; border-top: 2px solid rgba(20,18,16,.13);
  font-size: 13.5px;
}
.rows li:first-child { border-top: 0; }
.rows .k { font-family: var(--font-mono); word-break: break-all; }
.rows .v { font-family: var(--font-mono); color: var(--ink-2); white-space: nowrap; }

.status-list { list-style: none; margin: 0; padding: 0; }
.status-list li {
  display: grid; grid-template-columns: 1fr; gap: 2px;
  padding: 8px 0; border-top: 2px solid rgba(20,18,16,.13);
}
.status-list li:first-child { border-top: 0; }
.status-list .code { font-family: var(--font-mono); font-size: 13px; font-weight: 700; }
.status-list .why { font-size: 12.5px; color: var(--ink-2); }

/* ── 原始 JSON ──────────────────────────────────────── */

.raw-wrap { margin-top: 12px; border-top: 2px solid rgba(20,18,16,.13); padding-top: 10px; }
.raw-toggle {
  display: flex; align-items: center; gap: 8px;
  background: none; border: 0; padding: 0; cursor: pointer;
  font-family: var(--font-display); font-size: 13px; font-weight: 700; color: var(--ink);
  text-decoration: underline; text-underline-offset: 3px;
}
.raw-toggle svg { width: 14px; height: 14px; transition: transform .18s; }
.raw-toggle[aria-expanded="true"] svg { transform: rotate(90deg); }
pre.raw {
  margin: 10px 0 0; padding: 13px; max-height: 340px; overflow: auto;
  background: var(--paper); border: 2px solid var(--ink); border-radius: var(--r-sm);
  font-family: var(--font-mono); font-size: 12px; line-height: 1.55;
  white-space: pre; tab-size: 2;
}

/* ── 提示块 ─────────────────────────────────────────── */

.notice {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 11px 13px; margin: 12px 0 0;
  border: 2px solid var(--ink); border-radius: var(--r-sm);
  background: var(--amber-soft); font-size: 13px;
}
.notice svg { width: 16px; height: 16px; flex: none; margin-top: 2px; }
.notice.bad { background: var(--red-soft); }
.notice.info { background: var(--sky-soft); }
.notice.ok { background: var(--mint-soft); }

.empty {
  padding: 22px 0 6px; text-align: center; color: var(--ink-3);
}
.empty .big { font-size: 34px; line-height: 1; margin-bottom: 10px; }

.error-box {
  margin-top: 14px; padding: 14px 16px;
  border: var(--bd); border-radius: var(--r-sm);
  background: var(--red-soft); box-shadow: var(--shadow-sm);
  font-size: 13.5px;
}
.error-box strong { display: block; margin-bottom: 4px; }
.error-box .code { font-family: var(--font-mono); font-size: 12px; color: var(--ink-2); word-break: break-all; }

/* ── FAQ ────────────────────────────────────────────── */

.faq details {
  border-top: 2px solid rgba(20,18,16,.13);
  padding: 10px 0;
}
.faq details:first-of-type { border-top: 0; }
.faq summary {
  cursor: pointer; font-size: 14px; font-weight: 700; list-style: none;
  display: flex; gap: 8px; align-items: baseline;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before { content: '+'; font-family: var(--font-mono); color: var(--violet); font-weight: 700; }
.faq details[open] summary::before { content: '–'; }
.faq p { margin: 8px 0 2px; font-size: 13.5px; color: var(--ink-2); padding-left: 17px; }

/* ── 姊妹站 ─────────────────────────────────────────── */

.sisters { display: grid; gap: 10px; }
.sister {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 13px; text-decoration: none;
  border: 2px solid var(--ink); border-radius: var(--r-sm);
  background: var(--paper);
  transition: transform .12s, box-shadow .12s;
}
.sister:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--ink); }
.sister .ic {
  width: 32px; height: 32px; flex: none; display: grid; place-items: center;
  border: 2px solid var(--ink); border-radius: 8px; font-family: var(--font-mono);
  font-size: 12px; font-weight: 700;
}
.sister .ic.v { background: var(--violet-soft); }
.sister .ic.b { background: var(--sky-soft); }
.sister .nm { font-family: var(--font-mono); font-weight: 700; font-size: 13.5px; }
.sister .ds { font-size: 12px; color: var(--ink-3); }

/* ── 页脚 ───────────────────────────────────────────── */

.foot {
  margin: 30px 0 40px; padding-top: 18px; border-top: 2px solid rgba(20,18,16,.16);
  display: flex; gap: 14px; flex-wrap: wrap; justify-content: space-between;
  font-size: 12.5px; color: var(--ink-3);
}
.foot .links { display: flex; gap: 14px; flex-wrap: wrap; }
.foot a { text-decoration: none; border-bottom: 2px solid var(--ink-3); }

/* ── 滚动进入 ───────────────────────────────────────── */

html.js .reveal { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; }
html.js .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html.js .reveal { opacity: 1; transform: none; transition: none; }
}

/* ── 响应式 ─────────────────────────────────────────── */

@media (max-width: 1024px) {
  .c-main, .c-side, .c-half, .c-third, .c-faq, .c-src { grid-column: span 12; }
}

@media (max-width: 720px) {
  .wrap { padding: 0 15px; }
  .grid { gap: 13px; }
  .cell { padding: 17px 16px 18px; box-shadow: 5px 5px 0 var(--ink); }
  .btn-go { width: 100%; height: 50px; }
  .field { flex: 1 1 100%; }
  .kv { grid-template-columns: 1fr; }
  .kv dt { padding-bottom: 0; border-top: 2px solid rgba(20,18,16,.13); }
  .kv dd { padding-top: 3px; border-top: 0; }
  /* 顶栏：390px 宽放不下 3 个入口 + 语言切换，缩字号并允许换行，别让 EN 被裁掉 */
  .top { gap: 10px; padding: 14px 0 10px; }
  .top-nav { margin-left: 0; width: 100%; gap: 6px; }
  .top-nav a { font-size: 12.5px; padding: 5px 9px; }
  .lang-switch { font-size: 11px; }
  .lang-switch a { padding: 5px 7px; }
  /* 标题按整行缩短：窄屏去掉「、」分隔符，高亮块整体换行，不然「状态码」会被折成「状态 / 码」 */
  .h1 { font-size: clamp(24px, 7vw, 30px); line-height: 1.3; }
  .h1 .sep { display: none; }
  .h1 .hl { padding: 0 3px; margin-right: 5px; white-space: nowrap; }
  .sisters { gap: 8px; }
}