/* =========================================================
   JSG-Arrow 主页样式（极简编辑风格，基于 JSG WebStyle）
   ---------------------------------------------------------
   想改样式时，不要改这个文件，在 custom.css 里覆盖即可。
   最常用的都在下面的变量里，例如：
     :root { --d-accent:#2563eb; --d-radius:12px; }
   也可以在 /arrow 接口里返回 "custom_css" 字段，页面会自动套用。
   ========================================================= */
:root{
  /* 版式 */
  --d-max:1200px;                  /* 内容最大宽度 */
  --d-section:96px;                /* 区块上下留白 */
  --d-radius:16px;                 /* 发布卡片圆角 */
  --d-btn-radius:10px;             /* 按钮圆角 */
  /* 字号 */
  --d-title:clamp(48px,7vw,92px);  /* 首屏标题 */
  --d-lead:clamp(17px,1.5vw,19px); /* 首屏副标题 */
  /* 颜色 */
  --d-page:#fafaf9;                /* 页面背景 */
  --d-card:#ffffff;                /* 卡片背景 */
  --d-ink:#111111;                 /* 主文字 / 主按钮 */
  --d-ink-text:#ffffff;            /* 主按钮文字 */
  --d-muted:#737373;               /* 次要文字 */
  --d-faint:#a3a3a3;               /* 标题第二行（英文名） */
  --d-line:#e7e5e4;                /* 细分隔线 */
  --d-rule:#111111;                /* 区块顶部粗线 */
  --d-hover:#f5f5f4;               /* 导航悬停底色 */
  --d-accent:#16a34a;              /* 「最新版本」标签 */
  --d-accent-soft:#f0fdf4;
}
[data-theme="dark"]{
  --d-page:#0a0a0a;
  --d-card:#111111;
  --d-ink:#f5f5f5;
  --d-ink-text:#0a0a0a;
  --d-muted:#a3a3a3;
  --d-faint:#525252;
  --d-line:#232323;
  --d-rule:#f5f5f5;
  --d-hover:#171717;
  --d-accent:#4ade80;
  --d-accent-soft:rgba(74,222,128,.1);
}

body{background:var(--d-page);color:var(--d-ink)}
.d-wrap{width:100%;max-width:calc(var(--d-max) + 64px);margin:0 auto;padding:0 32px}
.mono{font-family:var(--mono)}

/* ---------- 品牌 Logo：浅色用 Arrow-Black，深色用 Arrow-White ---------- */
.d-logo-dark{display:none}
[data-theme="dark"] .d-logo-light{display:none}
[data-theme="dark"] .d-logo-dark{display:block}

/* ---------- 导航 ---------- */
.d-nav{background:color-mix(in srgb,var(--d-page) 85%,transparent);border-bottom:1px solid var(--d-line)}
.d-nav .brand span{font-weight:650}
.d-nav .navbar-links{margin-left:8px}
/* 与 blog.jamsg.cn、ds.jamsg.cn 的导航完全一致：灰色链接，当前站点用墨色加粗 */
.d-nav .navbar-links a{font-size:14px;color:var(--d-muted)}
.d-nav .navbar-links a:hover{color:var(--d-ink);background:var(--d-hover)}
.d-nav .navbar-links a.active{color:var(--d-ink);font-weight:600}
@media (max-width:768px){.d-nav .navbar-links{margin-left:0}}
@media (max-width:640px){.d-nav .brand span{white-space:nowrap}}

/* ---------- 按钮 ---------- */
.d-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;padding:0 20px;border-radius:var(--d-btn-radius);font-size:15px;font-weight:600;white-space:nowrap;cursor:pointer;border:1px solid transparent;transition:transform .15s var(--ease),background .15s,border-color .15s}
.d-btn:hover{text-decoration:none;transform:translateY(-1px)}
.d-btn:active{transform:none}
.d-btn-ink{background:var(--d-ink);color:var(--d-ink-text)}
.d-btn-ink:hover{color:var(--d-ink-text)}
.d-btn-line{background:var(--d-card);border-color:var(--d-line);color:var(--d-ink)}
.d-btn-line:hover{border-color:var(--d-muted);color:var(--d-ink)}
.d-btns{display:flex;flex-wrap:wrap;gap:10px;margin-top:36px}
.d-link{display:inline-flex;align-items:center;gap:4px;font-size:14px;font-weight:600;color:var(--d-ink);background:none;border:0;padding:0;cursor:pointer;white-space:nowrap}
.d-link:hover{text-decoration:underline;text-underline-offset:3px;color:var(--d-ink)}
.d-link.muted{color:var(--d-muted);font-weight:500}

/* ---------- 首屏 ---------- */
.d-hero{padding:clamp(56px,8vw,104px) 0 clamp(56px,7vw,88px)}
.d-hero-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(32px,5vw,64px);align-items:center}
.d-hero-copy .skeleton{display:block}
.d-ann{display:inline-flex;align-items:center;gap:8px;max-width:100%;height:32px;padding:0 12px 0 4px;border:1px solid var(--d-line);border-radius:99px;background:var(--d-card);font-size:13.5px;color:var(--d-muted);transition:border-color .15s}
.d-ann:hover{border-color:var(--d-muted);text-decoration:none;color:var(--d-ink)}
.d-ann b{flex:none;background:var(--d-ink);color:var(--d-ink-text);font-size:12px;padding:3px 9px;border-radius:99px;font-weight:600}
.d-ann span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.d-hero h1{font-size:var(--d-title);font-weight:700;letter-spacing:-.055em;line-height:.98;margin-top:28px;text-wrap:balance}
.d-hero h1 span{display:block;color:var(--d-faint);font-weight:650}
.d-hero .lead{font-size:var(--d-lead);line-height:1.65;color:var(--d-muted);margin-top:26px;max-width:540px;text-wrap:pretty}

/* 发布卡片 */
.d-release{background:var(--d-card);border:1px solid var(--d-line);border-radius:var(--d-radius);box-shadow:0 1px 2px rgba(0,0,0,.04),0 30px 60px -32px rgba(0,0,0,.28);overflow:hidden}
[data-theme="dark"] .d-release{box-shadow:0 30px 60px -32px rgba(0,0,0,.8)}
.d-release-head{display:flex;align-items:center;gap:12px;padding:16px 18px;border-bottom:1px solid var(--d-line)}
.d-release-head b{display:block;font-size:15px;font-weight:650}
.d-release-head small{display:block;font-family:var(--mono);font-size:12px;color:var(--d-muted);margin-top:2px}
.d-badge{margin-left:auto;flex:none;font-family:var(--mono);font-size:11.5px;font-weight:600;background:var(--d-accent-soft);color:var(--d-accent);padding:4px 9px;border-radius:6px}
.d-release ul{list-style:none;margin:0;padding:16px 18px;display:flex;flex-direction:column;gap:12px}
.d-release li{display:flex;gap:10px;font-size:13.5px;line-height:1.5;color:var(--d-ink)}
.d-release-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 18px;border-top:1px solid var(--d-line);background:color-mix(in srgb,var(--d-page) 60%,var(--d-card));font-family:var(--mono);font-size:12.5px;color:var(--d-muted)}
.d-release-foot .d-link{font-family:var(--font);font-size:13px}

/* 更新类型标签 */
.k{flex:none;font-size:11.5px;font-weight:600;padding:1px 6px;border-radius:5px;height:fit-content;margin-top:1px;white-space:nowrap}
.k.add{background:var(--success-soft);color:var(--success)}
.k.opt{background:var(--primary-soft);color:var(--primary)}
.k.fix{background:var(--warning-soft);color:var(--warning)}
.k.mod{background:var(--surface-2);color:var(--text-2)}
.k.del{background:var(--danger-soft);color:var(--danger)}
.k.etc{background:var(--surface-2);color:var(--text-3)}

/* ---------- 应用图标 ---------- */
.d-icon{width:44px;height:44px;border-radius:11px;object-fit:cover;flex:none;background:var(--surface-2)}
.d-icon.sm{width:40px;height:40px;border-radius:10px}
.d-icon.fb{display:grid;place-items:center;font-weight:700;font-size:17px;color:var(--d-ink-text);background:var(--d-ink)}

/* ---------- 区块与表格 ---------- */
.d-section{padding:var(--d-section) 0 0}
.d-section-tight{padding-top:calc(var(--d-section) * .75)}
main{padding-bottom:var(--d-section)}
.d-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap;border-top:1.5px solid var(--d-rule);padding-top:18px}
.d-head h2{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:650}
.d-head>span{font-size:13px;color:var(--d-muted)}
.d-partner-logo{width:22px;height:22px;border-radius:6px;object-fit:cover}
[data-theme="dark"] .d-partner-logo{background:#f5f5f5;padding:2px}
.d-table{margin-top:6px}
.d-row{display:grid;grid-template-columns:minmax(0,2.4fr) minmax(0,1fr) minmax(0,.9fr) minmax(0,1fr) 190px;align-items:center;gap:16px;padding:18px 0;border-bottom:1px solid var(--d-line);font-size:14px}
.d-row.is-sk{display:block}.d-row.is-sk .skeleton{display:block;height:44px}
.d-row .name{display:flex;align-items:center;gap:14px;min-width:0}
.d-row .name b{display:block;font-size:16px;font-weight:650;letter-spacing:-.01em}
.d-row .name small{display:block;font-size:13px;color:var(--d-muted);margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.d-row .cell{font-family:var(--mono);font-size:13px;color:var(--d-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.d-row .acts{display:flex;align-items:center;gap:18px;justify-content:flex-end}

/* ---------- 数字 ---------- */
.d-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:0;border-top:1.5px solid var(--d-rule)}
.d-metrics>div{padding:20px 20px 0 0}
.d-metrics>div+div{padding-left:20px;border-left:1px solid var(--d-line)}
.d-metrics dt{font-size:13px;color:var(--d-muted)}
.d-metrics dd{margin:8px 0 0;font-size:clamp(28px,3.4vw,44px);font-weight:700;letter-spacing:-.04em;font-variant-numeric:tabular-nums;line-height:1.1}

/* ---------- 更新日志抽屉 ---------- */
.d-drawer{width:min(460px,100%)}
.cl-group+.cl-group{margin-top:24px}
.cl-group h4{font-size:13px;font-weight:600;color:var(--text);margin-bottom:10px;font-family:var(--mono)}
.cl-group ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.cl-group li{display:flex;gap:10px;font-size:14px;line-height:1.55;color:var(--text-2)}

/* ---------- 页脚 ---------- */
.d-footer{border-top:1px solid var(--d-line);padding:56px 0 32px;font-size:13px;color:var(--d-muted)}
.d-footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:28px}
.d-footer h4{font-size:13px;font-weight:600;color:var(--d-ink);margin-bottom:12px}
.d-footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.d-footer a{color:var(--d-muted)}
.d-footer a:hover{color:var(--d-ink)}
.d-footer-brand .brand{color:var(--d-ink)}
.d-slogan{margin-top:18px;font-size:15px;font-weight:650;letter-spacing:-.01em;line-height:1.55;color:var(--d-ink)}
.d-slogan span{color:var(--d-faint)}
.d-ilink{display:inline-flex;align-items:center;gap:8px}
.d-ilink img{width:16px;height:16px;flex:none}
.d-footer-bottom{display:flex;justify-content:space-between;align-items:center;gap:10px 24px;flex-wrap:wrap;margin-top:40px;padding-top:20px;border-top:1px solid var(--d-line);font-size:12.5px}
.d-footer-meta{display:flex;gap:6px 20px;flex-wrap:wrap;font-family:var(--mono);font-size:12px}
.d-footer-meta>span{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.d-footer-meta img{width:15px;height:15px}

/* ---------- 错误提示 ---------- */
.d-error{padding:40px 0;color:var(--d-muted);font-size:14px}
.d-error .d-btn{margin-top:14px;height:38px;font-size:14px}

/* ---------- 响应式 ---------- */
@media (max-width:1024px){
  .d-hero-grid{grid-template-columns:1fr}
  .d-release{max-width:560px}
  .d-row{grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr) 170px}
  .d-row .cell.plat{display:none}
  .d-footer-grid{grid-template-columns:1fr 1fr}
  .d-footer-brand{grid-column:1/-1}
}
@media (max-width:640px){
  :root{--d-section:64px;--d-title:clamp(40px,12vw,56px)}
  .d-wrap{padding:0 20px}
  .d-btns .d-btn{flex:1}
  .d-row{grid-template-columns:minmax(0,1fr) auto;gap:10px 16px}
  .d-row .cell{display:none}
  .d-row .cell.dl{display:block;grid-column:1;grid-row:2;padding-left:58px}
  .d-row .acts{grid-column:2;grid-row:1 / span 2;flex-direction:column;align-items:flex-end;gap:8px}
  .d-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}
  .d-metrics>div:nth-child(3){padding-left:0;border-left:0}
  .d-metrics>div:nth-child(n+3){border-top:1px solid var(--d-line);margin-top:20px}
  .d-footer-grid{grid-template-columns:1fr}
}
