/* ============================================================================
 * 界面皮肤(公开页) · 公路蓝 + 安全橙 + 数据青   (2026-10-04 大哥定案)
 * ---------------------------------------------------------------------------
 * 适用页面: login.php(登录页) 与 home.php(门户首页)。
 *   这两页都不加载 app.css / mobile.css, 也**不加载** skin.css / skin-m.css ——
 *   公开页自成一表, 因为它们与后台存在「同名不同义」的类:
 *     · 后台的 .badge 是文字徽章;  门户页的 .badge 是 36×36 图标块
 *     · 后台侧栏有 .brand(.brand-mark/.brand-text); 门户页导航也有 .brand(.mark/.txt)
 *     · 后台的 .btn 是工具栏按钮;  登录页的 .btn 是撑满整行的提交按钮
 *   共用一份必然互相打坏, 故独立成表, 并用 body 上的 .pg-login / .pg-portal
 *   做作用域硬隔离(本表所有规则都带这两个前缀之一, 永不越界)。
 * 加载方式: 排在页面内联 <style> 之后 —— 覆盖式, 不删任何既有规则;
 *           回滚 = 删掉页头那一行 <link> 即完全恢复原样。
 * 默认主题: 深色(服务端在 <html> 直接输出 data-rk-theme="dark", 见 ns_theme_attr());
 *           用户切浅色时由 assets/js/skin.js 把该属性改成 "light"。
 * ========================================================================== */

/* ============================== 一、公开页令牌 ============================== */
/* 门户页自己也在 <style> 里定义过 --brand/--ink/--muted/--line/--line2/--bg/--shadow;
   本表在其后加载, 同优先级后加载胜出 → 这里就是公开页最终的配色基调。
   已核: app.css / mobile.css 都不使用这些变量名, 故不存在外溢到后台的可能。 */
:root{
  --brand:#1c5fa8; --brand-md:#3d8ad8; --brand-dk:#0d3f7d; --brand-lt:#eaf2fb;
  --ink:#15232f; --muted:#57697c; --line:#d9e3ef; --line2:#e8eef6; --bg:#e9eff7;
  /* 公开页自己的三色: 蓝=结构 / 橙=告警 / 青=数据 */
  --rkc-cyan:#0b7f9e;
  --rkc-acc:#f07c1f;
  --rkc-hud:ui-monospace,"JetBrains Mono","Cascadia Mono",Consolas,"Liberation Mono",monospace;
  /* 公路标线带(与后台 --rk-band 同款思路, 这里自持一份, 避免跨表依赖) */
  --rkc-band:linear-gradient(90deg,#5b9fe0 0 44%,var(--rkc-cyan) 44% 60%,rgba(255,255,255,.40) 60% 68%,var(--rkc-acc) 68% 100%);
  color-scheme:light;
}
html[data-rk-theme="dark"]{
  --brand:#5ea3e6; --brand-md:#6fb0ea; --brand-dk:#2a6bb0; --brand-lt:#16283c;
  --ink:#e3ebf3; --muted:#9db0c2; --line:#26313e; --line2:#1e2833; --bg:#0e1620;
  --rkc-cyan:#4fd6f5;
  --rkc-band:linear-gradient(90deg,#5b9fe0 0 44%,var(--rkc-cyan) 44% 60%,rgba(255,255,255,.40) 60% 68%,var(--rkc-acc) 68% 100%);
  color-scheme:dark;
}

/* ============================================================================
 * 二、登录页  (.pg-login)
 * ========================================================================== */

/* 底色 + 双光源。注: 登录页 body 是 flex 纵向布局, 这里只加"背景类"属性,
   不动 display/flex-direction/padding, 避免影响原有的垂直居中。 */
.pg-login{
  background:
    radial-gradient(90% 60% at 12% -12%, rgba(28,95,168,.34) 0%, transparent 62%),
    radial-gradient(70% 50% at 100% -6%, rgba(240,124,31,.20) 0%, transparent 58%),
    radial-gradient(80% 55% at 50% 112%, rgba(11,127,158,.24) 0%, transparent 62%),
    linear-gradient(160deg,#15395c 0%,#0f2a44 52%,#0a1f34 100%);
  background-attachment:fixed;
  color:#dbe6f1;
}
/* 底色同时兜到 html —— 登录页 body 是 flex 纵向布局、高度按内容撑,
   某些渲染路径下(尤其 headless 截图, 或内容极短时)会比视口矮, 于是露出 html 的默认白底,
   表现为页面底部一条浅色带。登录页整体是深蓝的, html 也必须是深蓝。
   用 :has() 限定在登录页, 不波及门户页(门户页的 html 应跟随 --bg)。 */
html:has(body.pg-login){
  background:linear-gradient(160deg,#15395c 0%,#0f2a44 52%,#0a1f34 100%);
  background-attachment:fixed;
}
/* 细网格底纹: fixed 层, z-index:0 —— .wrap 与 .foot 原本就是 position:relative;z-index:1,
   因此内容恒在底纹之上; 该层不吃鼠标事件。 */
.pg-login::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:24px 24px;
  -webkit-mask-image:radial-gradient(135% 92% at 50% -8%,#000 26%,transparent 82%);
          mask-image:radial-gradient(135% 92% at 50% -8%,#000 26%,transparent 82%);
}

/* 卡片 */
.pg-login .card{
  width:392px;
  border-radius:18px;
  background:#fff;
  box-shadow:0 34px 74px -24px rgba(0,0,0,.75), 0 0 0 1px rgba(255,255,255,.06);
  position:relative;
}
/* 卡片顶部: 蓝-青-白-橙 四段数据条(与后台顶栏同一条签名标线) */
.pg-login .card::after{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;
  border-radius:18px 18px 0 0;background:var(--rkc-band);
}
/* 原深蓝渐变卡头改为"白底 + 橙竖标标题", 让顶部那条数据条成为唯一视觉重心 */
.pg-login .card-hd{
  background:transparent;color:#15232f;text-align:left;
  padding:30px 34px 4px;box-shadow:none;
}
.pg-login .card-hd b{
  font-size:19px;font-weight:800;letter-spacing:2px;color:#15232f;
}
.pg-login .card-hd b::before{
  content:"";display:inline-block;width:4px;height:16px;border-radius:2px;
  background:var(--rkc-acc);margin-right:11px;vertical-align:-2px;
}
.pg-login .card-hd span{
  display:block;color:#92a1b2;font-size:12px;letter-spacing:.6px;margin-top:9px;padding-left:15px;
}
.pg-login .card-bd{padding:20px 34px 32px}
/* 卡头与表单之间: 一条虚分隔线 */
.pg-login .card-hd + .card-bd::before{
  content:"";display:block;height:1px;margin:4px 0 20px;
  background:repeating-linear-gradient(90deg,#dbe3ec 0 6px,transparent 6px 12px);
}

/* 表单 */
.pg-login .item label{color:#57697c;font-size:13px;font-weight:600}
.pg-login .item input{
  border:1px solid #d9e3ef;border-radius:10px;background:#f4f8fc;color:#15232f;padding:11px 13px;
}
.pg-login .item input:focus{
  border-color:#1c5fa8;background:#fff;
  box-shadow:0 0 0 3px rgba(28,95,168,.15);
}
.pg-login .rm-label{color:#57697c}
.pg-login .rm-label input{accent-color:#1c5fa8}
.pg-login .rm-tip{color:#92a1b2}
.pg-login .btn{
  background:linear-gradient(135deg,#2270bd,#1c5fa8);border-radius:11px;letter-spacing:5px;font-weight:700;
  box-shadow:0 2px 0 rgba(9,38,68,.18), 0 12px 24px -13px rgba(28,95,168,.98);
}
.pg-login .btn:hover{background:linear-gradient(135deg,#1c5fa8,#164c8a)}
.pg-login .err{background:#fdeced;border-color:#f6ccd1;color:#bf2b3a;border-radius:10px}
.pg-login .back a{color:#8ea3b8}
.pg-login .back a:hover{color:#cfe0f2}

/* 页脚 */
.pg-login .foot{color:#8ea6c0}
.pg-login .foot .ft-legal,.pg-login .foot .ft-legal a{color:#8ea6c0}
.pg-login .foot .ft-legal a:hover{color:#d6e5f5}

/* ============================================================================
 * 三、门户首页  (.pg-portal)
 * ========================================================================== */

/* 顶部导航: 原为白底毛玻璃 —— 改为深色玻璃, 与首屏的深蓝连成一片,
   底部压一条蓝-青-橙标线。 */
.pg-portal .nav{
  background:rgba(10,26,44,.74);
  backdrop-filter:saturate(160%) blur(14px);
  -webkit-backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid rgba(255,255,255,.08);
  box-shadow:0 10px 30px -20px rgba(0,0,0,.9);
}
.pg-portal .nav::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;pointer-events:none;
  background:var(--rkc-band);
}
/* 品牌区: 白底 + 左侧橙边的"公路指示牌" */
.pg-portal .brand .mark{
  background:#fff;color:#0f2a44;border-radius:9px;border-left:4px solid var(--rkc-acc);
  font-weight:800;box-shadow:0 6px 16px -8px rgba(0,0,0,.75);
}
.pg-portal .brand b{color:#fff;letter-spacing:.4px}
.pg-portal .brand i{color:#7e9cba}
.pg-portal nav.menu{color:#b6c8db}
.pg-portal nav.menu a:not(.btn-login):hover{color:#fff}
.pg-portal nav.menu a:not(.btn-login)::after{background:linear-gradient(90deg,var(--rkc-cyan),var(--rkc-acc))}
.pg-portal .btn-login{
  background:linear-gradient(135deg,#2a72bd,var(--brand));
  box-shadow:0 8px 22px -11px rgba(28,95,168,.95);
}

/* 首屏: 保留原有的双径向光与网格 ::after, 只在底边压标线 + 补一道青光 */
.pg-portal .hero{
  background:
    linear-gradient(90deg,transparent,rgba(160,232,255,.70),transparent) -35% 100%/30% 3px no-repeat,
    var(--rkc-band) 0 100%/100% 3px no-repeat,
    radial-gradient(760px 380px at 88% 4%, rgba(96,175,255,.40), transparent 68%),
    radial-gradient(560px 340px at 4% 100%, rgba(11,127,158,.30), transparent 72%),
    radial-gradient(460px 320px at 100% 96%, rgba(240,124,31,.20), transparent 70%),
    linear-gradient(135deg,#0a2540 0%,#11406f 46%,#1667c9 100%);
  animation:rkc-sweep 7s cubic-bezier(.45,0,.55,1) infinite;
}
@keyframes rkc-sweep{
  from{background-position:-35% 100%,0 100%,0 0,0 0,0 0,0 0}
  to  {background-position:135% 100%,0 100%,0 0,0 0,0 0,0 0}
}
.pg-portal .eyebrow{color:#bcd9f5}

/* 数据条 */
.pg-portal .stats li b{
  color:var(--brand-dk);font-family:var(--rkc-hud);font-variant-numeric:tabular-nums;
}
.pg-portal .stats li span{color:var(--muted)}

/* 区块标题下的短下划线: 蓝→青→橙 */
.pg-portal .blk h2::after{
  background:linear-gradient(90deg,var(--brand) 0 46%,var(--rkc-cyan) 46% 76%,var(--rkc-acc) 76% 100%);
}

/* 模块卡片: hover 顶线升级为三色; 图标块换青底 */
.pg-portal .card::before{
  background:linear-gradient(90deg,var(--brand),var(--rkc-cyan) 62%,var(--rkc-acc));
}
.pg-portal .card:hover{border-color:#c3daf2}
.pg-portal .card:hover .badge{background:linear-gradient(135deg,#2a72bd,var(--brand))}
.pg-portal .card li{background:#f3f8fd;border-color:#dfeaf5}
.pg-portal .card li:hover{background:var(--brand-lt);border-color:#bedaf2}

/* 平台特点 / 关于 */
.pg-portal .about{position:relative}
.pg-portal .about::before{
  background:linear-gradient(180deg,var(--brand) 0%,var(--rkc-cyan) 58%,var(--rkc-acc) 100%);
  width:3px;
}

/* 页脚 */
.pg-portal footer::before{background:linear-gradient(90deg,#1c5fa8,#0b7f9e 52%,#f07c1f)}
.pg-portal footer .foot-brand{color:#eaf3fc}

/* ============================================================================
 * 四、公开页 · 深色态
 * ========================================================================== */

/* —— 登录页 —— */
html[data-rk-theme="dark"] .pg-login .card{
  background:#161f2a;
  box-shadow:0 34px 74px -24px rgba(0,0,0,.85), 0 0 0 1px rgba(255,255,255,.07);
}
html[data-rk-theme="dark"] .pg-login .card-hd b{color:#e3ebf3}
html[data-rk-theme="dark"] .pg-login .card-hd span{color:#8ea3b8}
html[data-rk-theme="dark"] .pg-login .card-hd + .card-bd::before{
  background:repeating-linear-gradient(90deg,#2b3846 0 6px,transparent 6px 12px);
}
html[data-rk-theme="dark"] .pg-login .item label{color:#9db0c2}
html[data-rk-theme="dark"] .pg-login .item input{
  background:#1c2733;border-color:#2b3846;color:#e3ebf3;
}
html[data-rk-theme="dark"] .pg-login .item input:focus{
  background:#222e3b;border-color:#4a90d9;box-shadow:0 0 0 3px rgba(74,144,217,.18);
}
html[data-rk-theme="dark"] .pg-login .rm-label{color:#9db0c2}
html[data-rk-theme="dark"] .pg-login .rm-label input{accent-color:#4a90d9}
html[data-rk-theme="dark"] .pg-login .rm-tip{color:#6b7f93}
html[data-rk-theme="dark"] .pg-login .err{background:#2c1418;border-color:#5a262c;color:#ff8b96}
html[data-rk-theme="dark"] .pg-login .back a{color:#7f93a8}
html[data-rk-theme="dark"] .pg-login .back a:hover{color:#cfe0f2}

/* —— 门户首页 ——
   顶栏 / 首屏 / 页脚本就是深色, 无需处理; 这里只把"浅底卡片"族统一压深。 */
html[data-rk-theme="dark"] .pg-portal .stats,
html[data-rk-theme="dark"] .pg-portal .card,
html[data-rk-theme="dark"] .pg-portal .feat,
html[data-rk-theme="dark"] .pg-portal .about{
  background:#161f2a;border-color:#26313e;
  box-shadow:0 20px 44px -28px rgba(0,0,0,.9);
}
html[data-rk-theme="dark"] .pg-portal .stats li b{color:#9cc6ee}
html[data-rk-theme="dark"] .pg-portal .card li{
  background:#1c2733;border-color:#2b3846;color:#a9bccd;
}
html[data-rk-theme="dark"] .pg-portal .card li:hover{
  background:#16283c;border-color:#2a4a6b;color:#cfe4f7;
}
html[data-rk-theme="dark"] .pg-portal .card .desc{color:#8b9fb2}
html[data-rk-theme="dark"] .pg-portal .about{color:#c3d2e0}
html[data-rk-theme="dark"] .pg-portal .feat .fi{background:#16283c;color:#7db4e8}
html[data-rk-theme="dark"] .pg-portal .card .badge{background:#16283c;color:#7db4e8}
html[data-rk-theme="dark"] .pg-portal .card:hover .badge{background:linear-gradient(135deg,#2a72bd,#3d8ad8);color:#fff}
/* 首屏的白色主按钮在白卡时代是对的, 深色下仍是"白底按钮" —— 保持不变即可(它在深色 hero 上) */

/* ============================================================================
 * 五、动效降级 / 打印隔离
 * ========================================================================== */
@media (prefers-reduced-motion:reduce){
  .pg-portal .hero{animation:none !important}
  .pg-login *,.pg-portal *{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
}
@media print{
  .pg-login::before{display:none !important}
  .pg-login,.pg-portal .nav,.pg-portal .hero,.pg-portal footer{background:#fff !important;color:#000 !important}
}