/* =====================================================================
   YZF Portal · 系统介绍主页 —— 依据《UI设计规范.md》
   柔和青蓝 · 大留白 · 点阵底纹 · 顶部渐变细线 · 分层柔和阴影
   动效红线: 仅一次性入场(opacity/transform), 零 infinite 常驻
   ===================================================================== */
#portal{min-height:100vh;color:var(--c-text);font-family:var(--font-body)}
html body #portal *,html body #portal *::before,html body #portal *::after{box-sizing:border-box}
#portal a{text-decoration:none}
#portal b,#portal code,#portal .p-term,#portal .p-stats b{font-family:var(--font-mono)!important}
/* ---- nav: 顶部渐变细线 ---- */
.p-nav{max-width:1160px;margin:0 auto;padding:26px 28px 0;display:flex;align-items:center;justify-content:space-between;gap:16px;position:relative}
.p-nav::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--c-primary) 55%,transparent);opacity:.55}
.p-logo{display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-weight:800;letter-spacing:2px;font-size:15.5px;
  background:linear-gradient(120deg,#1f2937 35%,#3d95a8 78%,#5a7fd8);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.p-dot{width:9px;height:9px;border-radius:50%;background:var(--c-primary);box-shadow:0 0 0 4px rgba(90,180,196,.15);display:inline-block}
.p-links{display:flex;align-items:center;gap:22px}
.p-links a{color:var(--c-text-muted);font-size:13.5px;letter-spacing:.5px;transition:color var(--t-fast) var(--ease)}
.p-links a:hover{color:var(--c-primary-deep)}
#p-enter,#p-enter2{background:var(--c-gradient)!important;border:none;color:#ffffff!important;font-family:var(--font-body);font-weight:700;font-size:13.5px;letter-spacing:2px;padding:10px 24px;border-radius:var(--r-md);cursor:pointer;box-shadow:var(--sh-2)!important;transition:box-shadow var(--t-med) var(--ease),transform var(--t-fast) var(--ease-press)}
#p-enter:hover,#p-enter2:hover{box-shadow:0 16px 36px rgba(90,180,196,.35)!important;transform:translateY(-1px)}
/* ---- hero: 渐变底 + 右上光晕(静态) + 渐变标题字 ---- */
.p-hero{max-width:1160px;margin:0 auto;padding:76px 28px 34px;text-align:center;position:relative;overflow:hidden}
.p-hero::after{content:"";position:absolute;right:-40px;top:-60px;width:210px;height:210px;border-radius:50%;
  background:radial-gradient(circle,rgba(34,211,238,.14),transparent 70%);pointer-events:none}
.p-badge{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:11px;letter-spacing:2.5px;color:#4a9cb0;border:1px solid #cfe8ee;border-radius:var(--r-full);padding:6px 16px;margin-bottom:28px;background:rgba(240,253,250,.9)}
.p-hero h1{font-size:clamp(34px,5.6vw,56px);line-height:1.16;letter-spacing:-.5px;font-weight:800;color:var(--c-text);margin:0 0 20px;font-family:var(--font-display)}
.p-hero h1 em{font-style:normal;background:linear-gradient(120deg,#1f2937 35%,#3d95a8 75%,#5a7fd8);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.p-sub{max-width:660px;margin:0 auto 38px;color:var(--c-text-muted);font-size:15px;line-height:1.95}
.p-sub strong{color:var(--c-text);font-weight:700}
.p-actions{display:flex;gap:16px;justify-content:center;margin-bottom:56px}
.p-ghost{display:inline-flex;align-items:center;color:var(--c-text-muted);border:1px solid var(--c-border);border-radius:var(--r-md);padding:10px 26px;font-size:13.5px;background:rgba(255,255,255,.85);transition:color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease)}
.p-ghost:hover{color:var(--c-primary-deep);border-color:var(--c-primary);box-shadow:var(--sh-1)}
/* ---- stats 卡片(规范 data-card: 顶部渐变条) ---- */
.p-stats{max-width:920px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:14px;background:var(--c-card);border:1px solid var(--c-card-border);border-radius:var(--c-radius);padding:26px 24px;box-shadow:var(--sh-card);position:relative;overflow:hidden}
.p-stats::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--c-gradient);opacity:.85}
.p-stats div{display:flex;flex-direction:column;gap:6px;align-items:center;position:relative}
.p-stats b{font-size:26px;color:var(--c-primary-deep);font-family:var(--font-mono)!important;font-weight:700}
.p-stats span{font-size:12px;color:var(--c-text-muted);letter-spacing:.5px}
/* ---- sections ---- */
.p-sec-title{max-width:1160px;margin:72px auto 24px;padding:0 28px 0 14px;font-family:var(--font-mono);font-size:13px;letter-spacing:2.5px;color:#4a9cb0;border-left:3px solid var(--c-primary)}
.p-cards{max-width:1160px;margin:0 auto;padding:0 28px;display:grid;grid-template-columns:repeat(auto-fit,minmax(252px,1fr));gap:16px}
.p-card{background:var(--c-card);border:1px solid var(--c-card-border);border-radius:var(--c-radius);padding:26px 24px;box-shadow:var(--sh-card);position:relative;overflow:hidden;transition:box-shadow var(--t-med) var(--ease),transform var(--t-med) var(--ease)}
.p-card::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--c-gradient);opacity:.85}
.p-card:hover{transform:translateY(-3px);box-shadow:var(--sh-card-hover)}
.p-card h3{margin:0 0 12px;font-size:14.5px;color:var(--c-text);font-weight:700;font-family:var(--font-display)}
.p-card h3 b{color:#4a9cb0;font-family:var(--font-mono)!important;margin-right:6px}
.p-card p{margin:0;font-size:13px;color:var(--c-text-muted);line-height:1.9}
/* ---- arch ---- */
.p-arch{max-width:1160px;margin:0 auto;padding:0 28px;display:grid;grid-template-columns:1.4fr 1fr;gap:16px;align-items:stretch}
.p-term{background:#f4fafb;border:1px solid var(--c-border);border-radius:var(--c-radius);padding:26px 24px;font-family:var(--font-mono)!important;font-size:13px;line-height:2.05;color:var(--c-text);box-shadow:var(--sh-well);white-space:pre-line}
.p-note{background:var(--c-card);border:1px dashed var(--c-border);border-radius:var(--c-radius);padding:24px;font-size:12.5px;color:var(--c-text-muted);line-height:2;box-shadow:var(--sh-1)}
/* ---- faq ---- */
.p-faq{max-width:1160px;margin:0 auto;padding:0 28px;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.p-faq>div{background:var(--c-card);border:1px solid var(--c-card-border);border-radius:var(--c-radius);padding:22px;box-shadow:var(--sh-card);position:relative;overflow:hidden}
.p-faq>div::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--c-gradient);opacity:.85}
.p-faq b{display:block;color:var(--c-text);font-size:13.5px;margin-bottom:10px}
.p-faq p{margin:0;color:var(--c-text-muted);font-size:12.5px;line-height:1.9}
/* ---- bug 反馈 ---- */
.p-bug{max-width:1160px;margin:0 auto;padding:0 28px;display:grid;grid-template-columns:minmax(260px,360px) 1fr;gap:16px;align-items:stretch}
.p-bug-card{background:var(--c-card);border:1px solid var(--c-card-border);border-radius:var(--c-radius);padding:22px 24px;box-shadow:var(--sh-card);position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:center;gap:8px}
.p-bug-card::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--c-gradient);opacity:.85}
.p-bug-label{font-size:12.5px;color:var(--c-text-muted);letter-spacing:1px}
.p-bug-num{font-size:26px;color:var(--c-primary-deep);font-family:var(--font-mono)!important;letter-spacing:1px}
.p-bug-note{background:var(--c-card);border:1px dashed var(--c-border);border-radius:var(--c-radius);padding:24px;font-size:12.5px;color:var(--c-text-muted);line-height:2;box-shadow:var(--sh-1);display:flex;align-items:center}
/* ---- foot ---- */
.p-foot{max-width:1160px;margin:72px auto 0;padding:24px 28px 38px;border-top:1px solid var(--c-border);color:#9aa7b5;font-size:12px;letter-spacing:1.5px;text-align:center;font-family:var(--font-mono)}
/* ---- 响应式: 单断点 768px ---- */
@media(max-width:768px){
  .p-nav{flex-direction:column;gap:18px;padding-top:20px}
  .p-hero{padding-top:52px}
  .p-stats{grid-template-columns:repeat(2,1fr)}
  .p-arch{grid-template-columns:1fr}
  .p-bug{grid-template-columns:1fr;padding-left:16px!important;padding-right:16px!important}
  .p-faq{grid-template-columns:1fr}
  .p-cards{grid-template-columns:1fr}
}
/* ---- 性能红线: 全站零 infinite 动画 ---- */
html body #portal *{animation:none!important}

@media(max-width:768px){
  #portal{overflow-x:hidden!important}
  .p-nav{width:100%!important;max-width:100%!important;flex-wrap:wrap!important;row-gap:12px!important;padding:20px 16px 0!important}
  .p-links{flex-wrap:wrap!important;gap:12px!important;justify-content:flex-start!important}
  #p-enter,#p-enter2{white-space:nowrap!important}
  .p-hero{padding:48px 16px 28px!important}
  .p-hero h1{word-break:break-word!important}
  .p-sub{padding:0 4px!important}
  .p-stats{width:calc(100vw - 32px)!important;max-width:calc(100vw - 32px)!important;box-sizing:border-box!important;padding:18px 14px!important}
  .p-cards,.p-arch,.p-faq{padding-left:16px!important;padding-right:16px!important;box-sizing:border-box!important}
  .p-term,.p-note{word-break:break-word!important}

  /* 手机端: Bug反馈 = 横向数据行(标签左 / 号码右), 号码不换行; 说明卡收紧内边距 */
  .p-bug{gap:12px!important}
  .p-bug-card{flex-direction:row!important;align-items:center!important;justify-content:space-between!important;padding:16px 18px!important;gap:10px!important}
  .p-bug-label{letter-spacing:.5px!important;white-space:nowrap!important}
  .p-bug-num{font-size:22px!important;line-height:1.25!important;letter-spacing:.5px!important;white-space:nowrap!important}
  .p-bug-note{padding:16px 18px!important;line-height:1.9!important;align-items:flex-start!important;word-break:break-word!important}
}