/* =====================================================================
   湾流智库 · VIS 视觉识别系统（V2.4）全站共享样式
   核心识别：蓝紫粉六色光谱 / 微软雅黑 + 思源宋体 / 流动 · 智识
   适用：index.html · course/index.html · admin.html 及今后所有新页面
   引入方式（置于各页面 <head> 内联 <style> 之后）：
     <link rel="stylesheet" href="/assets/css/vis.css">
   本文件做了两件事：
     1) 重映射原 navy+copper 主题变量为 VIS 令牌；
     2) 提供 .vis-* 通用组件类，新页面直接复用即可保证视觉统一。
   ===================================================================== */

/* 1. 设计令牌 ---------------------------------------------------------- */
:root{
  /* —— 重映射：原 --nv / --cu 主题 → VIS 蓝紫粉 —— */
  --nv:#1C1635;        /* 标题黑 Ink */
  --nv2:#2A1F4A;       /* 深紫（次级深色） */
  --nv3:#142945;       /* 后台保留 */
  --cu:#8A4FC4;        /* 智库主紫（核心识别） */
  --cu2:#9155C3;       /* 紫罗兰 */
  --cu3:#C949A6;       /* 品红 */
  --wh:#fff;
  --ow:#EFEAF9;        /* 浅紫底 BG2 */
  --bg:#F7F5FC;        /* 页面底 BG */
  --g1:#E4DEF2;        /* 线 LINE */
  --g2:#C9C0E8;
  --g3:#7A7490;        /* 辅助 Muted */
  --td:#403A52;        /* 正文 Body */
  --tm:#7A7490;        /* 辅助 */
  --serif:"Noto Serif SC",serif;
  --sans:"Microsoft YaHei","微软雅黑","PingFang SC","Noto Sans SC",-apple-system,"Segoe UI",sans-serif;
  --s2:0 4px 16px rgba(90,50,160,.10);          /* 紫调投影（禁用纯黑） */
  --s3:0 12px 40px rgba(90,50,160,.16);
  --s1:0 1px 4px rgba(90,50,160,.07);

  /* —— VIS 光谱与功能色 —— */
  --wl-blue:#3267f3;    /* 湾流蓝 */
  --wl-indigo:#6361da; /* 靛蓝 */
  --wl-purple:#8a4fc4; /* 智库主紫 */
  --wl-violet:#9155c3; /* 紫罗兰 */
  --wl-magenta:#c949a6;/* 品红 */
  --wl-pink:#e84493;   /* 湾流玫红 */
  --wl-gradient:linear-gradient(135deg,#3267f3 0%,#6361da 22%,#8a4fc4 45%,#9155c3 62%,#c949a6 82%,#e84493 100%);
  --wl-gradient-h:linear-gradient(90deg,#3267f3 0%,#6361da 20%,#8a4fc4 40%,#9155c3 58%,#c949a6 80%,#e84493 100%);
  --wl-gradient-v:linear-gradient(180deg,#3267f3 0%,#6361da 22%,#8a4fc4 45%,#9155c3 62%,#c949a6 82%,#e84493 100%);
  --wl-deep:linear-gradient(150deg,#1b2a6b 0%,#3a2a8c 38%,#5a2a8e 66%,#7a2270 100%); /* 深底 */
  --wl-ink:#1c1635;--wl-body:#403a52;--wl-muted:#7a7490;
  --wl-bg:#f7f5fc;--wl-bg2:#efeaf9;--wl-line:#e4def2;--wl-paper:#fff;
  --wl-sage:#2d8a5f;--wl-amber:#c98a1e;--wl-ember:#c0392b;
  --wl-radius:14px;--wl-radius-sm:8px;
  --wl-shadow:0 4px 18px rgba(90,50,160,.06);
  --wl-shadow-lg:0 12px 40px rgba(90,50,160,.14);
  --wl-glow:0 10px 30px rgba(138,79,196,.35);
  --wl-grid:linear-gradient(rgba(138,79,196,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(138,79,196,.06) 1px,transparent 1px);
}

/* 2. VIS 通用组件类（新页面复用，保证全站统一） ------------------------ */
.vis-grad{background:var(--wl-gradient-h);-webkit-background-clip:text;background-clip:text;color:transparent}
.vis-grad-v{background:var(--wl-gradient-v);-webkit-background-clip:text;background-clip:text;color:transparent}
.vis-deep{background:var(--wl-deep);color:#fff}
.vis-grid{background-image:var(--wl-grid);background-size:24px 24px}
.vis-rule{height:3px;width:100%;border:0;border-radius:2px;background:var(--wl-gradient-h);margin:11px 0}
.vis-eyebrow{font-family:var(--serif);font-size:13px;color:var(--wl-purple);letter-spacing:.2em;font-weight:700}
.vis-card{background:var(--wl-paper);border:1px solid var(--wl-line);border-radius:var(--wl-radius);box-shadow:var(--wl-shadow);padding:22px;transition:transform .25s,box-shadow .25s,border-color .25s}
.vis-card:hover{transform:translateY(-3px);box-shadow:var(--wl-shadow-lg);border-color:var(--wl-violet)}
.vis-tag{display:inline-block;font-size:11px;letter-spacing:.1em;padding:3px 10px;border:1px solid var(--wl-purple);color:var(--wl-purple);border-radius:999px;font-weight:500}
.vis-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:11px 24px;font-size:14px;font-weight:600;border-radius:10px;transition:all .2s;text-decoration:none;cursor:pointer;border:none}
.vis-btn-primary{background:var(--wl-gradient);color:#fff;box-shadow:var(--wl-glow)}
.vis-btn-primary:hover{filter:brightness(1.06);transform:translateY(-1px)}
.vis-btn-ghost{border:1px solid var(--wl-purple);color:var(--wl-purple);background:transparent}
.vis-btn-ghost:hover{background:var(--wl-gradient);color:#fff;border-color:transparent}
.vis-wave{height:64px;background:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201200%20120'%20preserveAspectRatio='none'%3E%3Cpath%20d='M0%2060%20C200%2020%20400%20100%20600%2060%20C800%2020%201000%20100%201200%2060'%20fill='none'%20stroke='url(%23wg)'%20stroke-width='4'/%3E%3Cdefs%3E%3ClinearGradient%20id='wg'%20x1='0'%20y1='0'%20x2='1'%20y2='0'%3E%3Cstop%20offset='0'%20stop-color='%233267F3'/%3E%3Cstop%20offset='.5'%20stop-color='%238A4FC4'/%3E%3Cstop%20offset='1'%20stop-color='%23E84493'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E") no-repeat center/cover}

/* 3. 全站覆盖：重映射 navy+copper 主题的视觉表现 ---------------------- */
/* 3.1 深色区块 → VIS 深底渐变 */
.ban,.propband,.cta,.sec-dk,footer,.nvb,.pos,.enroll,.plus .pp,#ft,#sidebar{
  background:var(--wl-deep)!important;color:#fff;
}
footer,#ft{border-top:1px solid rgba(255,255,255,.12)}
.cta::before{background:var(--wl-gradient-h)!important}
.nvb{background:var(--wl-deep)!important}
/* 深色区块上的智识网格纹理（原铜色 → 紫调白光） */
.ban::after,.cta::after,.nvb::before,.hero::after,.enroll::after{
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px)!important;
}
/* 首页浅色 hero 的智识网格 + 紫调光晕 */
.hero{position:relative}
.hero-bg{background-image:var(--wl-grid)!important;background-size:52px 52px}
.hero-gl{background:radial-gradient(circle,rgba(138,79,196,.12),transparent 70%)!important}

/* 3.2 渐变高光（标题强调 / 区块分割线 / 导航下划线 / 卡片顶边） */
.bar{background:var(--wl-gradient-h)!important}
.nl::after,.nl.on::after{background:var(--wl-gradient-h)!important}
.ht .ac{background:var(--wl-gradient-h);-webkit-background-clip:text;background-clip:text;color:transparent;font-style:normal}
.h2 .em{background:var(--wl-gradient-h);-webkit-background-clip:text;background-clip:text;color:transparent}
.svc::before{background:var(--wl-gradient-h)!important}
.svc-n{color:rgba(138,79,196,.10)!important}
.cta-t,.ban-t{color:#fff}
.stw{color:#fff}
/* 训练营 hero（首页 hero 为浅底，单独处理避免被深底覆盖） */
.course-hero{background:radial-gradient(120% 90% at 80% -10%,rgba(138,79,196,.22),transparent 55%),var(--wl-deep)!important;color:#fff}
.ey,.eyebrow{color:var(--wl-purple)}

/* 3.3 按钮 → 光谱渐变 */
.ncta{background:var(--wl-gradient)!important;color:#fff;box-shadow:var(--wl-glow);border-radius:8px}
.ncta:hover{filter:brightness(1.06)}
.btn-cu{background:var(--wl-gradient)!important;color:#fff;border:none;box-shadow:var(--wl-glow)}
.btn-cu:hover{filter:brightness(1.06)}
.btn-ol,.btn-oln{border:1px solid var(--wl-purple)!important;color:var(--wl-purple)!important}
.btn-ol:hover,.btn-oln:hover{background:var(--wl-gradient)!important;color:#fff!important;border-color:transparent!important}
.btn-gh{color:#fff}
.btn-pri{background:var(--wl-gradient)!important;color:#fff;box-shadow:0 10px 30px rgba(138,79,196,.40)!important;border:none}
.btn-pri:hover{filter:brightness(1.06)}
.tb-btn-primary{background:var(--wl-gradient)!important;color:#fff;border:none}
.tb-btn-primary:hover{filter:brightness(1.06)}

/* 3.4 标签 / 徽标 / 激活态 */
.ctag{border:1px solid var(--wl-purple);color:var(--wl-purple)}
.tab.on,.tab:hover{color:var(--wl-purple)}
.tab.on{border-bottom-color:var(--wl-purple)}
.hbadge{border:1px solid rgba(138,79,196,.30);background:rgba(138,79,196,.08)}
.hbt,.hdot{color:var(--wl-purple)}
.hdot{background:var(--wl-purple)}
.snumb{color:var(--wl-purple)}
.fi:focus,.fselect:focus,.fld input:focus,.fld textarea:focus,.tcard:hover,.tcard.sel{border-color:var(--wl-purple)!important}
.tcard:hover,.tcard.sel{background:rgba(138,79,196,.05)!important}
.ckl input{accent-color:var(--wl-purple)}
.sb-item.active{background:rgba(138,79,196,.18)!important;color:var(--cu3)}
.sb-item.active::before{background:var(--wl-purple)!important}
.sb-badge{background:var(--wl-purple)}
.sb-logo-mark{background:rgba(138,79,196,.15);border:1px solid rgba(138,79,196,.30)}
.sb-av{background:rgba(138,79,196,.20);border:1px solid rgba(138,79,196,.35);color:var(--cu3)}
.bc-item:hover,.tb-toggle:hover{color:var(--wl-purple)}

/* 3.5 训练营页残留铜色点缀 → 紫调 */
.hs{border-left-color:rgba(201,73,166,.5)!important}
.hs .n small,.hero .tag,.hero h1 .hl{color:var(--cu3)}
.pcard .badge{background:rgba(138,79,196,.10);color:var(--wl-purple)}
.bc .no{color:rgba(138,79,196,.12)!important}
.tier .who{background:rgba(138,79,196,.10);color:var(--wl-purple)}
.tier .tg{color:var(--wl-purple)}
.pos-note{background:rgba(201,73,166,.10);border:1px solid rgba(201,73,166,.30)}
.acc-meta .dur{background:rgba(138,79,196,.10);color:var(--wl-purple)}
.acc-foot{border-left:3px solid var(--wl-purple)}
.impl-card h3 .dot,.impl-card li::before{background:var(--wl-purple)}
.impl-card li::before{color:var(--wl-purple)}
.out{border-top:4px solid var(--wl-purple)}
.out .lv{color:var(--wl-purple)}
#fab{background:var(--wl-gradient)!important;color:#fff;box-shadow:var(--wl-glow)!important}
#fab:hover{filter:brightness(1.06)}
.fb{background:var(--wl-gradient)!important;color:#fff;box-shadow:var(--wl-glow)}
.fb:hover{filter:brightness(1.06)}

/* 3.6 圆角统一（VIS 圆角 14px，禁用直角生硬感） */
.card,.svc,.ec,.fbox,.tcard,.pol,.pcard,.goal,.bc,.tier,.acc,.impl-card,.gc,.out,
.enr-info,.enr-cta,.form,.pf,.vis-card{border-radius:var(--wl-radius)}
.enr-info,.enr-cta,.form{border-radius:18px}

/* 3.7 标题黑 / 正文 直接套用令牌（无需逐个改 HTML） */
.logo-cn,.logo-en,.brand .bc,.brand .be,.ft-brand .bc,.ft-brand .be{color:inherit}
.logo-en,.brand .be,.ft-brand .be{color:var(--wl-purple)}
