/* ============================================================
   MCP 商店 · 设计体系
   参照 resend.com 的视觉语言复刻：
   暗色为主(#000) / 发丝边框(alpha 灰) / 大圆角(1rem) / 按钮辉光
   禁用紫色。字体：Inter(正文) · iserif(标题衬线) · jbmono(等宽)
   ============================================================ */

:root {
  /* —— 灰阶（取自 Resend 亮色主题）—— */
  --g1:#ffffff; --g2:#fdfdfd; --g3:#f0f0f0; --g4:#e8e8e8; --g5:#d7d7d7;
  --g6:#bebebe; --g7:#989898; --g8:#7e7e7e; --g9:#656565; --g10:#4c4c4c;
  --g11:#4d4d4d; --g12:#191919;

  --bg:#fdfdfd;
  --bg-elev:#ffffff;
  --bg-inset:#f0f0f0;
  --fg:#191919;
  --fg-muted:#4d4d4d;
  --fg-dim:#7e7e7e;
  --fg-faint:#989898;
  --line:rgba(0,0,0,0.10);
  --line-strong:rgba(0,0,0,0.18);
  --hover:rgba(0,0,0,0.035);
  --active:rgba(0,0,0,0.06);

  --accent:#c2410c;          /* 唯一强调色：烧橙（禁用紫）*/
  --accent-soft:rgba(194,65,12,0.10);
  --ok:#15803d; --warn:#b45309; --bad:#b91c1c;

  --r-xs:.125rem; --r-sm:.25rem; --r-md:.375rem; --r-lg:.5rem; --r-xl:.75rem;
  --r-2xl:1rem; --r-3xl:1.5rem;

  --shadow-btn:0 1px 2px rgba(0,0,0,.06), 0 4px 14px rgba(0,0,0,.06);
  --shadow-pop:0 10px 15px -3px rgba(0,0,0,.10), 0 4px 6px -4px rgba(0,0,0,.10);

  --font-sans:'Inter','Inter Variable',-apple-system,BlinkMacSystemFont,'Segoe UI',
              'PingFang SC','Hiragino Sans GB','Microsoft YaHei',sans-serif;
  --font-serif:'iserif',Georgia,'Songti SC',serif;
  --font-mono:'jbmono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --maxw:1200px;
  --headh:58px;
}

html.dark {
  /* —— 灰阶（取自 Resend 暗色主题）—— */
  --g1:#141517; --g2:#191b1e; --g3:#212629; --g4:#293034; --g5:#333b3e;
  --g6:#3b4345; --g7:#434a4d; --g8:#52595b; --g9:#6e7679; --g10:#878d8f;
  --g11:#a1a4a5; --g12:#f0f0f0;

  --bg:#000000;
  --bg-elev:#0a0b0c;
  --bg-inset:#141517;
  --fg:#f0f0f0;
  --fg-muted:#a1a4a5;
  --fg-dim:#878d8f;
  --fg-faint:#6e7679;
  --line:rgba(214,235,253,0.10);
  --line-strong:rgba(214,235,253,0.19);
  --hover:rgba(255,255,255,0.045);
  --active:rgba(255,255,255,0.075);

  --accent:#f97316;
  --accent-soft:rgba(249,115,22,0.12);
  --ok:#4ade80; --warn:#fbbf24; --bad:#f87171;

  --shadow-btn:0 0 4px rgba(255,255,255,.06), 0 1px 14px rgba(255,255,255,.12),
               0 3px 32px rgba(255,255,255,.18);
  --shadow-pop:0 10px 40px rgba(0,0,0,.6);
}

/* ============ 基础 ============ */
*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%}
body{
  background:var(--bg); color:var(--fg);
  font-family:var(--font-sans);
  font-size:15px; line-height:1.55;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  font-feature-settings:"cv02","cv03","cv04","cv11";
}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font-family:inherit;font-size:inherit;color:inherit}
::selection{background:var(--accent-soft);color:var(--fg)}
h1,h2,h3,h4{margin:0;font-weight:600;letter-spacing:-0.02em;line-height:1.2}
p{margin:0}
.mono{font-family:var(--font-mono)}
.dim{color:var(--fg-dim)}
.muted{color:var(--fg-muted)}
.serif{font-family:var(--font-serif);font-weight:400;letter-spacing:-0.01em}

/* 滚动条 */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:99px;border:3px solid var(--bg)}
::-webkit-scrollbar-thumb:hover{background:var(--fg-faint)}

/* ============ 顶栏 ============ */
.hdr{
  position:sticky;top:0;z-index:60;height:var(--headh);
  background:color-mix(in srgb,var(--bg) 82%,transparent);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--line);
}
.hdr-in{max-width:var(--maxw);margin:0 auto;height:100%;padding:0 24px;
  display:flex;align-items:center;gap:28px}
.brand{display:flex;align-items:center;gap:9px;font-weight:600;font-size:15px;
  letter-spacing:-0.02em;white-space:nowrap}
.brand-mark{width:22px;height:22px;border-radius:7px;background:var(--fg);
  display:grid;place-items:center;flex:none}
.brand-mark i{width:8px;height:8px;border-radius:2.5px;background:var(--bg);display:block}
.nav{display:flex;align-items:center;gap:2px;flex:1;min-width:0}
.nav a{padding:7px 11px;border-radius:var(--r-md);font-size:14px;font-weight:500;
  color:var(--fg-muted);transition:background .15s,color .15s;white-space:nowrap}
.nav a:hover{background:var(--hover);color:var(--fg)}
.nav a.on{color:var(--fg);background:var(--hover)}
.hdr-right{display:flex;align-items:center;gap:10px;flex:none}

/* ============ 按钮（Resend 质感）============ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  height:36px;padding:0 15px;border-radius:var(--r-2xl);
  border:1px solid var(--line);background:var(--bg-elev);color:var(--fg);
  font-size:14px;font-weight:600;letter-spacing:-0.01em;cursor:pointer;
  transition:background .16s,border-color .16s,transform .16s,box-shadow .16s;
  white-space:nowrap;user-select:none;
}
.btn:hover{background:var(--hover);border-color:var(--line-strong)}
.btn:active{transform:translateY(.5px)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* 主按钮：亮色=墨黑实心；暗色=白玻璃+辉光（照搬 Resend 关键词）*/
.btn-pri{
  background:var(--fg);color:var(--bg);border-color:transparent;
  box-shadow:var(--shadow-btn);
}
.btn-pri:hover{background:color-mix(in srgb,var(--fg) 88%,transparent);border-color:transparent}

.btn-lg{height:44px;padding:0 20px;font-size:15px}
.btn-sm{height:30px;padding:0 11px;font-size:13px;border-radius:var(--r-xl)}
.btn-ghost{background:transparent;border-color:transparent;color:var(--fg-muted)}
.btn-ghost:hover{background:var(--hover);color:var(--fg);border-color:transparent}
.btn-danger{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 30%,transparent)}
.btn-danger:hover{background:color-mix(in srgb,var(--bad) 10%,transparent)}
.btn-block{width:100%}

/* ============ 卡片 ============ */
.card{
  background:var(--bg-elev);border:1px solid var(--line);border-radius:var(--r-2xl);
  overflow:hidden;
}
.card-h{padding:16px 20px;border-bottom:1px solid var(--line);display:flex;
  align-items:center;justify-content:space-between;gap:12px}
.card-h h3{font-size:14px;font-weight:600;letter-spacing:-0.01em}
.card-b{padding:20px}
.card-b.tight{padding:0}

/* ============ 表单 ============ */
.field{margin-bottom:14px}
.field > label{display:block;font-size:13px;font-weight:500;color:var(--fg-muted);
  margin-bottom:6px;letter-spacing:-0.005em}
.inp{
  width:100%;height:40px;padding:0 12px;border-radius:var(--r-xl);
  background:var(--bg-elev);border:1px solid var(--line);color:var(--fg);
  transition:border-color .16s,box-shadow .16s,background .16s;
}
textarea.inp{height:auto;padding:11px 12px;line-height:1.6;resize:vertical;min-height:96px}
.inp::placeholder{color:var(--fg-faint)}
.inp:hover{border-color:var(--line-strong)}
.inp:focus{outline:none;border-color:var(--fg-dim);
  box-shadow:0 0 0 3px var(--hover)}
.inp-code{font-family:var(--font-mono);font-size:13px}
select.inp{appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--fg-dim) 50%),
                   linear-gradient(135deg,var(--fg-dim) 50%,transparent 50%);
  background-position:calc(100% - 17px) 17px,calc(100% - 12px) 17px;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:34px}

.hint{font-size:12px;color:var(--fg-faint);margin-top:6px;line-height:1.5}
.err{font-size:13px;color:var(--bad);margin-top:10px;padding:9px 12px;
  border-radius:var(--r-lg);background:color-mix(in srgb,var(--bad) 9%,transparent);
  border:1px solid color-mix(in srgb,var(--bad) 22%,transparent)}
.good{font-size:13px;color:var(--ok);margin-top:10px;padding:9px 12px;
  border-radius:var(--r-lg);background:color-mix(in srgb,var(--ok) 9%,transparent);
  border:1px solid color-mix(in srgb,var(--ok) 22%,transparent)}

/* ============ 徽标/标签 ============ */
.tag{display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 8px;
  border-radius:99px;font-size:12px;font-weight:500;line-height:1;
  background:var(--hover);color:var(--fg-muted);border:1px solid var(--line)}
.tag-ok{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 26%,transparent);
  background:color-mix(in srgb,var(--ok) 9%,transparent)}
.tag-bad{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 26%,transparent);
  background:color-mix(in srgb,var(--bad) 9%,transparent)}
.tag-acc{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 28%,transparent);
  background:var(--accent-soft)}
.dot{width:6px;height:6px;border-radius:99px;background:currentColor;flex:none}

/* ============ 列表行 ============ */
.list{display:flex;flex-direction:column}
.row{display:flex;align-items:center;gap:14px;padding:14px 20px;
  border-bottom:1px solid var(--line);transition:background .14s}
.row:last-child{border-bottom:none}
.row:hover{background:var(--hover)}
.row-main{flex:1;min-width:0}
.row-title{font-size:14px;font-weight:500;letter-spacing:-0.01em;
  display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.row-sub{font-size:13px;color:var(--fg-dim);margin-top:3px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row-side{display:flex;align-items:center;gap:8px;flex:none;font-size:13px;color:var(--fg-dim)}

/* ============ 统计块 ============ */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-2xl);
  overflow:hidden}
.stat{background:var(--bg-elev);padding:16px 18px}
.stat .n{font-size:23px;font-weight:600;letter-spacing:-0.03em;
  font-variant-numeric:tabular-nums;line-height:1.15}
.stat .l{font-size:12px;color:var(--fg-dim);margin-top:5px}
.stat .n.acc{color:var(--accent)}

/* ============ 表格 ============ */
.tbl{width:100%;border-collapse:collapse;font-size:13px}
.tbl th{text-align:left;font-weight:500;color:var(--fg-dim);font-size:12px;
  padding:9px 20px;border-bottom:1px solid var(--line);background:var(--bg-inset);
  white-space:nowrap}
.tbl td{padding:11px 20px;border-bottom:1px solid var(--line);
  font-variant-numeric:tabular-nums}
.tbl tr:last-child td{border-bottom:none}
.tbl tbody tr:hover{background:var(--hover)}
.tbl .num{text-align:right;font-family:var(--font-mono);font-size:12.5px}
.pos{color:var(--ok)}.neg{color:var(--bad)}

/* ============ 弹层 ============ */
.mask{position:fixed;inset:0;background:rgba(0,0,0,.5);backdrop-filter:blur(3px);
  display:grid;place-items:center;z-index:200;padding:20px;
  animation:fade .16s ease-out}
.modal{background:var(--bg-elev);border:1px solid var(--line);
  border-radius:var(--r-3xl);width:100%;max-width:480px;
  box-shadow:var(--shadow-pop);animation:pop .2s cubic-bezier(.16,1,.3,1);
  max-height:90vh;display:flex;flex-direction:column}
.modal-h{padding:20px 22px 0}
.modal-h h3{font-size:17px}
.modal-h p{font-size:13px;color:var(--fg-dim);margin-top:5px}
.modal-b{padding:18px 22px;overflow:auto}
.modal-f{padding:0 22px 20px;display:flex;gap:9px;justify-content:flex-end}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes pop{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}

/* ============ 空态 / 加载 ============ */
.empty{padding:56px 24px;text-align:center;color:var(--fg-dim);font-size:14px}
.empty .e-t{font-size:15px;color:var(--fg-muted);font-weight:500;margin-bottom:5px}
.center-box{min-height:100vh;display:grid;place-items:center;padding:24px}
.spinner{width:16px;height:16px;border:2px solid var(--line-strong);
  border-top-color:var(--fg-muted);border-radius:99px;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.skel{background:linear-gradient(90deg,var(--hover),var(--active),var(--hover));
  background-size:200% 100%;animation:sk 1.3s ease-in-out infinite;border-radius:var(--r-md)}
@keyframes sk{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* ============ 代码块 ============ */
.code{background:var(--bg-inset);border:1px solid var(--line);
  border-radius:var(--r-xl);padding:14px 16px;font-family:var(--font-mono);
  font-size:12.5px;line-height:1.7;overflow:auto;white-space:pre;
  color:var(--fg-muted)}
.code-inline{font-family:var(--font-mono);font-size:.9em;padding:2px 6px;
  border-radius:var(--r-sm);background:var(--bg-inset);border:1px solid var(--line)}

/* ============ 排版 ============ */
.page{max-width:var(--maxw);margin:0 auto;padding:32px 24px 80px}
.page-narrow{max-width:560px;margin:0 auto;padding:48px 24px 80px}
.page-h{margin-bottom:26px}
.page-h h1{font-size:26px;letter-spacing:-0.025em}
.page-h p{font-size:14px;color:var(--fg-dim);margin-top:7px}
.sec-t{font-size:12px;font-weight:600;color:var(--fg-faint);
  text-transform:uppercase;letter-spacing:.08em;margin:28px 0 11px}
.divider{height:1px;background:var(--line);margin:20px 0}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}

/* ============ 落地页 Hero ============ */
.hero{position:relative;overflow:hidden;padding:104px 24px 88px;text-align:center}
.hero::before{content:"";position:absolute;left:50%;top:-320px;transform:translateX(-50%);
  width:1300px;height:700px;pointer-events:none;
  background:radial-gradient(ellipse 46% 42% at 50% 42%,var(--accent-soft) 0%,transparent 70%);
  opacity:.85}
html.dark .hero::before{
  background:radial-gradient(ellipse 46% 42% at 50% 40%,rgba(249,115,22,.13) 0%,transparent 70%)}
.hero-in{position:relative;max-width:780px;margin:0 auto}
.hero h1{font-family:var(--font-serif);font-weight:400;
  font-size:clamp(40px,7vw,68px);line-height:1.03;letter-spacing:-0.03em;
  background:linear-gradient(to bottom right,var(--fg) 32%,color-mix(in srgb,var(--fg) 45%,transparent));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  padding-bottom:.08em}
.hero .sub{font-size:16.5px;color:var(--fg-muted);margin:20px auto 0;max-width:520px;
  line-height:1.6}
.hero .cta{display:flex;gap:12px;justify-content:center;margin-top:32px;flex-wrap:wrap}
.pill{display:inline-flex;align-items:center;gap:7px;height:30px;padding:0 13px;
  border-radius:99px;font-size:13px;color:var(--fg-muted);
  border:1px solid var(--line);background:var(--bg-elev);margin-bottom:22px}

/* 卡片网格 */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}
.feature{padding:22px;border:1px solid var(--line);border-radius:var(--r-2xl);
  background:var(--bg-elev);transition:border-color .18s,transform .18s}
.feature:hover{border-color:var(--line-strong);transform:translateY(-1px)}
.feature .ic{width:34px;height:34px;border-radius:var(--r-lg);display:grid;
  place-items:center;background:var(--hover);border:1px solid var(--line);
  margin-bottom:14px;color:var(--fg-muted)}
.feature h3{font-size:14.5px;margin-bottom:6px}
.feature p{font-size:13.5px;color:var(--fg-dim);line-height:1.6}

/* 价格卡 */
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px}
.plan{padding:22px;border:1px solid var(--line);border-radius:var(--r-2xl);
  background:var(--bg-elev);display:flex;flex-direction:column}
.plan.hot{border-color:color-mix(in srgb,var(--accent) 40%,transparent);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 14%,transparent)}
.plan .amt{font-size:30px;font-weight:600;letter-spacing:-0.03em;margin:9px 0 3px}
.plan .amt small{font-size:14px;font-weight:500;color:var(--fg-dim);letter-spacing:0}
.plan ul{list-style:none;padding:0;margin:14px 0 18px;font-size:13px;color:var(--fg-muted)}
.plan li{padding:5px 0;display:flex;gap:9px;align-items:flex-start}
.plan li::before{content:"";width:4px;height:4px;border-radius:99px;
  background:var(--fg-faint);margin-top:8px;flex:none}

/* 页脚 */
.ftr{border-top:1px solid var(--line);padding:34px 24px;color:var(--fg-faint);
  font-size:13px;text-align:center}

/* ============ 侧栏布局（控制台）============ */
.shell{max-width:var(--maxw);margin:0 auto;padding:26px 24px 80px;
  display:grid;grid-template-columns:202px 1fr;gap:30px;align-items:start}
.side{position:sticky;top:calc(var(--headh) + 26px);display:flex;flex-direction:column;gap:2px}
.side-t{font-size:11px;font-weight:600;color:var(--fg-faint);text-transform:uppercase;
  letter-spacing:.09em;padding:14px 10px 6px}
.side a{display:flex;align-items:center;gap:9px;padding:7px 10px;
  border-radius:var(--r-md);font-size:13.5px;color:var(--fg-muted);
  transition:background .14s,color .14s}
.side a:hover{background:var(--hover);color:var(--fg)}
.side a.on{background:var(--hover);color:var(--fg);font-weight:500}
.main{min-width:0;display:flex;flex-direction:column;gap:18px}

/* ============ 断开/复制小件 ============ */
.copy{display:flex;align-items:center;gap:8px;background:var(--bg-inset);
  border:1px solid var(--line);border-radius:var(--r-xl);padding:9px 12px}
.copy code{flex:1;font-family:var(--font-mono);font-size:12.5px;overflow:auto;
  white-space:nowrap;color:var(--fg-muted)}
.copy button{flex:none}

.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);
  background:var(--fg);color:var(--bg);padding:10px 18px;border-radius:99px;
  font-size:13.5px;font-weight:500;z-index:300;box-shadow:var(--shadow-pop);
  animation:pop .2s cubic-bezier(.16,1,.3,1)}

/* ============ 响应式：手机优先适配 ============ */
@media(max-width:900px){
  .shell{grid-template-columns:1fr;gap:20px;padding:20px 16px 70px}
  .side{position:static;flex-direction:row;overflow-x:auto;gap:4px;
    padding-bottom:8px;margin:0 -16px;padding-left:16px;padding-right:16px;
    border-bottom:1px solid var(--line)}
  .side-t{display:none}
  .side a{white-space:nowrap;padding:7px 12px}
  .grid2,.grid3{grid-template-columns:1fr}
}
@media(max-width:680px){
  body{font-size:14.5px}
  .hdr-in{padding:0 14px;gap:12px}
  .hdr-right .hide-sm{display:none}
  .nav{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .nav::-webkit-scrollbar{display:none}
  .nav a{padding:7px 9px;font-size:13.5px}
  .page{padding:22px 16px 70px}
  .page-narrow{padding:32px 16px 70px}
  .page-h h1{font-size:22px}
  .hero{padding:64px 18px 56px}
  .card-b{padding:16px}
  .card-h{padding:14px 16px}
  .row{padding:12px 16px;gap:10px;flex-wrap:wrap}
  .row-main{flex:1 1 60%}
  /* 关键：侧栏信息整体换到第二行，避免把标题挤成一个字宽 */
  .row-side{flex:1 1 100%;order:9;gap:10px;flex-wrap:wrap}
  .row-title{flex-wrap:wrap}
  .row-title .t{white-space:normal;word-break:break-word}
  .stats{grid-template-columns:repeat(2,1fr)}
  .stat{padding:13px 14px}
  .stat .n{font-size:19px}
  .tbl th,.tbl td{padding:9px 13px}
  .modal{border-radius:var(--r-2xl)}
  .modal-h{padding:18px 18px 0}
  .modal-b{padding:16px 18px}
  .modal-f{padding:0 18px 18px}
  .modal-f .btn{flex:1}
  .plans,.cards{grid-template-columns:1fr}
}
@media(max-width:420px){
  .hide-xs{display:none}
  .btn-lg{height:42px;padding:0 16px}
}