:root{
  /* 门户页面样式：尽量不干扰全站其它样式 */
  --text:#0b1b37;
  --muted:#5b6b8c;
  --white:#ffffff;
  --glass:rgba(255,255,255,.7);
  --glass-strong:rgba(255,255,255,.9);
  --shadow:0 18px 40px rgba(32,59,120,.16);
  --card-radius:28px;
  --brand-blue:#5a7fff;
  --blue-grad:linear-gradient(180deg, #e9f2ff 0%, #ffffff 100%);
}

/* ============ Web 字体引入（请将 woff2 放到 Html/assets/fonts/ 下） ============ */
@font-face{
  font-family:'JiuzhuSans';
  src:url('../fonts/SourceHanSansSC-Regular.woff2') format('woff2');
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'JiuzhuSans';
  src:url('../fonts/SourceHanSansSC-Bold.woff2') format('woff2');
  font-weight:700 900;
  font-style:normal;
  font-display:swap;
}

/* 清除浏览器默认边距，避免四周出现白边 */
html, body { margin:0; padding:0; height:100%; }

.portal-container{position:relative;min-height:100vh;display:flex;flex-direction:column;background:linear-gradient(180deg,#b3e2ff 0%, #e8f4ff 40%, #ffffff 100%);} 
/* 移除全局 body 背景图，避免与容器背景叠加导致重影 */
/* body{background-image:none!important;} */

/* 背景装饰与发光 */
.decor-layer{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.decor-layer .glow{position:absolute;filter:blur(60px);opacity:.45;border-radius:50%;mix-blend-mode:screen}
.decor-layer .g1{width:520px;height:520px;background:radial-gradient(circle,#7cc6ff,transparent 60%);left:-120px;top:-120px}
.decor-layer .g2{width:480px;height:480px;background:radial-gradient(circle,#9b8cff,transparent 60%);right:-100px;top:80px}
.decor-layer .g3{width:560px;height:560px;background:radial-gradient(circle,#67ffd3,transparent 60%);left:40%;bottom:-180px}

/* 细颗粒噪声覆层（柔光） */
.portal-container::after{content:"";position:absolute;inset:0;background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="160" height="160" viewBox="0 0 160 160"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="2" stitchTiles="stitch"/></filter><rect width="100%" height="100%" filter="url(%23n)" opacity="0.035"/></svg>') repeat;mix-blend-mode:soft-light;pointer-events:none;z-index:0}

/* 顶部大标题区 */
.hero{position:relative;padding:72px 20px 32px;display:flex;flex-direction:column;align-items:center;text-align:center}
.hero::before{content:"";position:absolute;inset:0;background:url('assets/img/hero-bg.jpg') center/cover no-repeat;opacity:.15;pointer-events:none}
.hero-title{position:relative;z-index:1;}
.hero-title h1{margin:12px 0 10px;font-size:48px;font-weight:900;letter-spacing:1.1px;font-family:'Heiti SC','SimHei','Microsoft YaHei','PingFang SC','Helvetica Neue',Arial,sans-serif;background:linear-gradient(180deg,#2f66ff 0%, #5aa6ff 100%);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none}
.hero-logo{width:72px;height:72px;border-radius:12px;object-fit:contain;box-shadow:0 8px 20px rgba(196,40,0,.18)}
.hero-title .subtitle{margin:0;color:#3d68b1;opacity:.9}
.user-pill{position:absolute;right:20px;top:18px;background:var(--glass);backdrop-filter:blur(10px);border-radius:999px;padding:8px 12px;font-size:12px;color:#27406a;box-shadow:0 6px 18px rgba(34,78,160,.18);display:flex;gap:10px;align-items:center}
.user-pill .fa-user,.user-pill .fa-key{font-size:14px;color:#27406a;opacity:.9}

.portal-main{flex:1;padding:24px 20px 28px}

/* 五大模块卡片容器 */
.modules{display:grid;grid-template-columns:repeat(5,1fr);gap:24px;max-width:1280px;margin:0 auto}

/* 卡片基样式 */
.card{position:relative;border-radius:24px;overflow:hidden;background:#fff;box-shadow:0 18px 40px rgba(29,57,126,.14);display:flex;flex-direction:column;align-items:center;transition:transform .25s ease, box-shadow .25s ease}
.card:hover{transform:translateY(-6px);box-shadow:0 28px 60px rgba(29,57,126,.2)}
.card .top{width:100%;height:180px;display:flex;align-items:center;justify-content:center}
.card .top .icon{font-size:64px;color:#fff}
.card .title{font-weight:700;font-size:18px;color:#1f3f6b;margin:18px 0 56px}


/* 模块主题色 */
.theme-1 .top{background:linear-gradient(180deg,#d9e7ff,#a8c6ff)}
.theme-2 .top{background:linear-gradient(180deg,#ffe3c4,#ffb47a)}
.theme-3 .top{background:linear-gradient(180deg,#c7f3e7,#42d6aa)}
.theme-4 .top{background:linear-gradient(180deg,#e4d6ff,#b892ff)}
.theme-5 .top{background:linear-gradient(180deg,#d8e9ff,#84c8ff)}

.portal-footer{display:flex;justify-content:center;align-items:center;padding:20px;color:#5b6b8c;font-size:12px}

@media (max-width:1200px){
  .modules{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:760px){
  .modules{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:480px){
  .modules{grid-template-columns:1fr}
}