:root{
    --sky:#38bdf8;
    --sky-deep:#0ea5e9;
    --ink:#0f172a;
    --muted:#64748b;
    --bg:#eef2f7;
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  body{
    min-height:100vh;
    display:flex;flex-direction:column;gap:12px;
    background:var(--bg);
    color:var(--ink);
    font-family:"Noto Sans JP","Microsoft YaHei","PingFang SC",system-ui,-apple-system,sans-serif;
    padding:0;                                  /* 左右不留空，区域横向铺满 */
  }

  /* ---------- 顶部控制条（不属于页面区域） ---------- */
  /* ---------- 大区域：只有背景，没有框 ---------- */
  .region{
    position:relative;width:100%;
    border-radius:0;overflow:hidden;
    display:flex;align-items:stretch;gap:22px;      /* 子区域横向间隔拉大 */
  }
  .region .bg{position:absolute;inset:0;z-index:0;}   /* 背景=整块底图，不是元素、不描边 */
  .region > *:not(.bg){position:relative;z-index:1;}

  /* 背景：纯白（真实项目在此处替换为 背景1~背景4 图片） */
  .bg1,.bg2,.bg3,.bg4{background:#ffffff;}

  /* ---------- 区域编号标注（纯文字，不是框） ---------- */
  .cap{
    position:absolute;top:4px;left:14px;z-index:6;
    font-size:11px;font-weight:700;letter-spacing:.08em;
    color:#94a3b8;pointer-events:none;
  }
  .chip{
    position:absolute;top:-9px;right:-6px;z-index:6;      /* 默认浮到元素右上角外侧，不压内容 */
    font-size:10px;line-height:1;font-weight:700;color:#0369a1;
    background:#e0f2fe;border-radius:4px;padding:2px 4px;
    pointer-events:none;letter-spacing:.02em;white-space:nowrap;
  }
  /* 卡片与页脚面板内部有裁剪/居中文字，编号回到内部右上角 */
  .card .chip{top:6px;right:8px;}
  .beian .chip,.contact .chip{top:6px;right:10px;}
  /* ---------- 区域1：置顶 ---------- */
  .r1{
    position:sticky;top:0;z-index:40;
    height:96px;flex:0 0 96px;display:flex;align-items:center;gap:22px;padding:0 26px;
    background:#fff;
  }
  .r1 .logo{
    width:60px;height:60px;border-radius:12px;background:#fff;display:grid;place-items:center;
    border:1px solid #e2e8f0;font-weight:900;color:var(--sky-deep);font-size:20px;flex:0 0 60px;
  }
  /* Logo / 网站名：可点击回首页 */
  a.logo,a.sitname{text-decoration:none;cursor:pointer;transition:.18s;}
  a.logo:hover{border-color:var(--sky);box-shadow:0 6px 16px rgba(15,23,42,.12);}
  a.sitname:hover{color:var(--sky-deep);}
  /* 头像 / 用户名：可点击（未登录→登录页，已登录→用户中心） */
  a.avatar,a.uname{text-decoration:none;}
  a.avatar:hover{border-color:var(--sky);box-shadow:0 0 0 4px rgba(56,189,248,.18);}
  .sitname{
    font-weight:900;font-size:26px;color:var(--ink);letter-spacing:.04em;white-space:nowrap;
  }
  .search{
    flex:1;display:flex;align-items:center;gap:8px;padding:6px 8px 6px 18px;
    background:#f8fafc;border:1px solid #e2e8f0;border-radius:999px;
  }
  .search input{border:0;outline:0;flex:1;font:inherit;font-size:14px;background:transparent;color:#0f172a;}
  .search input::placeholder{color:#94a3b8;}
  .search button{border:0;border-radius:999px;background:var(--sky);color:#fff;font:inherit;font-weight:700;padding:8px 20px;cursor:pointer;}
  .search button:hover{background:var(--sky-deep);}
  .user{display:flex;flex-direction:column;align-items:center;gap:4px;margin-left:6px;}
  .avatar{
    width:54px;height:54px;border-radius:50%;border:2px solid #e2e8f0;
    background:linear-gradient(135deg,#f8fafc,#e2e8f0);display:grid;place-items:center;font-size:22px;
    cursor:pointer;
  }
  .uname{font-size:12px;color:#334155;background:#f1f5f9;border:1px solid #e2e8f0;border-radius:6px;padding:2px 8px;cursor:pointer;}
  .uname:hover{background:var(--sky);border-color:var(--sky);color:#fff;}

  /* ---------- 区域2：三图轮播 ---------- */
  .r2{height:320px;align-items:center;padding:24px 26px;}
  /* 区域2.1 / 2.5：翻页箭头，纵距（高度）调小并垂直居中 */
  .nav-btn{
    width:46px;flex:0 0 46px;align-self:stretch;border:0;border-radius:10px;cursor:pointer;
    background:#f8fafc;border:1px solid #e2e8f0;box-shadow:0 2px 8px rgba(15,23,42,.06);
    display:grid;place-items:center;font:inherit;font-size:22px;color:var(--ink);
    transition:.18s;position:relative;
  }
  .nav-btn:hover{background:var(--sky);color:#fff;transform:translateY(-2px);}
  .nav-btn:hover i{color:#e0f2fe;}
  .nav-btn:active{transform:scale(.97);}
  .cards{display:flex;gap:20px;flex:1;align-self:stretch;}
  .card{
    position:relative;border-radius:12px;overflow:hidden;background:#fff;border:1px solid #e2e8f0;
    display:flex;flex-direction:column;box-shadow:0 6px 16px rgba(15,23,42,.08);transition:.25s;
    cursor:pointer;text-decoration:none;color:inherit; /* 2.2 / 2.3 / 2.4 是链接 */
  }
  .card:hover{box-shadow:0 12px 26px rgba(15,23,42,.16);border-color:var(--sky);}
  .card:hover .c-title{text-decoration:underline;}
  .card .cover{flex:1;position:relative;}
  .card .cover .c-title{position:absolute;left:14px;bottom:10px;right:14px;color:#fff;font-weight:900;font-size:15px;text-shadow:0 2px 8px rgba(0,0,0,.55);}
  .card .meta{padding:8px 12px;background:#fff;border-top:1px solid #eef2f7;}
  .card .meta .t{font-weight:700;font-size:14px;margin-bottom:4px;}
  .card .meta .d{font-size:11px;color:var(--muted);display:flex;justify-content:space-between;}
  .card.main{flex:2.9;}
  .card.main .cover .c-title{font-size:24px;bottom:16px;left:18px;}
  .card.main .meta .t{font-size:16px;}
  .card.side{flex:1.6;}
  .card.side.op1{transform:scale(.97);opacity:.94;}
  .card.side.op2{transform:scale(.94);opacity:.88;}

  /* ---------- 区域3：功能栏 ---------- */
  .r3{height:352px;align-items:stretch;padding:24px 26px;gap:26px;}
  .col{display:flex;flex-direction:column;gap:16px;min-width:0;}   /* 子区域纵向间隔拉大 */
  .c-left{flex:1.05;}
  .c-mid{flex:1.5;}
  .c-right{flex:1.35;}
  .panel{
    position:relative;background:#fff;border:1px solid #e2e8f0;border-radius:12px;
    padding:12px 14px;overflow:hidden;box-shadow:0 4px 14px rgba(15,23,42,.06);
  }
  .panel h3{margin:0 0 8px;font-size:12px;color:var(--sky-deep);letter-spacing:.08em;}
  .panel.tight{padding:9px 12px;}          /* 纵向更紧凑的面板 */
  .panel.tight h3{margin-bottom:6px;}
  /* 3.1 菜单：不要框，只有文本，点击文字即操作 */
  .menu{display:flex;gap:10px;}
  .menu button{
    font:inherit;font-weight:700;font-size:14px;cursor:pointer;
    border:0;background:none;padding:2px 0;color:#334155;transition:.18s;
  }
  .menu button:hover{color:var(--sky-deep);text-decoration:underline;}

  /* 3.2 柱状图 */
  .chart{height:100%;display:flex;align-items:flex-end;justify-content:space-around;gap:10px;padding-top:8px;}
  .chart-empty{width:100%;align-self:center;text-align:center;color:var(--muted);font-size:12px;line-height:1.8;}
  .bar-wrap{flex:1;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:4px;}
  .bar{
    width:100%;max-width:20px;                 /* 柱体变窄的小长方形 */
    border-radius:4px 4px 0 0;
    background:#38bdf8;                        /* 天蓝色纯色 */
    position:relative;transition:.3s;
  }
  .bar:hover{filter:brightness(1.06);}
  .bar b{position:absolute;top:-16px;left:50%;transform:translateX(-50%);font-size:10.5px;color:#0f172a;}
  .bar-wrap i{font-size:11px;color:var(--muted);font-style:normal;}

  /* 3.3 只显示时间（无秒、无日期、无月历） */
  .clockline{display:flex;align-items:baseline;justify-content:space-between;gap:8px;}
  .clockline .now{font-size:21px;font-weight:900;letter-spacing:.02em;line-height:1.1;}
  .clockline .tz{font-size:11px;color:var(--muted);}
  .holiday{margin-top:6px;font-size:11.5px;color:#0f172a;background:#f0f9ff;border-left:3px solid var(--sky);border-radius:6px;padding:5px 10px;line-height:1.45;}

  /* 3.4 留言墙 */
  .wall{height:calc(100% - 24px);display:flex;flex-direction:column;gap:7px;overflow:auto;padding-right:2px;
    -webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 16px),transparent 100%);
    mask-image:linear-gradient(to bottom,#000 calc(100% - 16px),transparent 100%);}
  .msg{background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px;padding:7px 10px;font-size:12px;line-height:1.5;}
  .msg .who{color:var(--sky-deep);font-weight:700;margin-right:6px;}

  /* 3.5 文章栏 */
  .posts{height:calc(100% - 24px);display:flex;flex-direction:column;gap:6px;overflow:auto;
    -webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 16px),transparent 100%);
    mask-image:linear-gradient(to bottom,#000 calc(100% - 16px),transparent 100%);}
  /* 3.5 文章栏：不要框，只有文本 */
  .post{
    display:flex;align-items:center;gap:8px;font-size:13px;padding:7px 10px;border-radius:8px;
    background:#f8fafc;border:1px solid #e2e8f0;
    cursor:pointer;color:#0f172a;text-decoration:none;transition:.15s;
  }
  .post:hover{background:#e0f2fe;border-color:var(--sky);transform:translateX(3px);}
  .post .dot{width:6px;height:6px;border-radius:50%;background:var(--sky);flex:0 0 6px;}
  .post .date{margin-left:auto;font-size:11px;color:var(--muted);}

  /* ---------- 区域4：置底 ---------- */
  .r4{
    position:sticky;bottom:0;z-index:40;margin-top:auto;
    height:78px;display:flex;align-items:center;padding:0 26px;gap:20px;background:#fff;
  }
  .r4 .logo{width:42px;height:42px;border-radius:9px;background:#fff;border:1px solid #e2e8f0;display:grid;place-items:center;font-weight:900;color:var(--sky-deep);font-size:15px;flex:0 0 42px;text-decoration:none;}
  .r4 .sitname{font-size:17px;font-weight:900;text-decoration:none;color:var(--ink);}
  .r4 .beian{flex:1;font-size:12px;color:#475569;text-align:center;background:#f8fafc;border:1px solid #e2e8f0;border-radius:9px;padding:10px;line-height:1.6;}
  .r4 .contact{font-size:12px;color:#475569;text-align:right;line-height:1.7;background:#f8fafc;border:1px solid #e2e8f0;border-radius:9px;padding:10px 12px;}
  .r4 .contact a{color:#0284c7;text-decoration:none;}

  /* ---------- 区域5：右侧边栏（已登录点头像后出现） ---------- */
  .r5{
    position:fixed;top:158px;right:0;bottom:0;width:342px;z-index:60;   /* top 由脚本动态对齐页头下沿 */
    display:flex;flex-direction:column;gap:12px;
    padding:22px 20px 20px;
    background:#fff;border-left:1px solid #e2e8f0;
    box-shadow:-14px 0 34px rgba(15,23,42,.12);
    transform:translateX(105%);transition:transform .3s cubic-bezier(.22,.8,.3,1);
    overflow-y:auto;
  }
  .r5.open{transform:none;}
  .r5 .bg{position:absolute;inset:0;z-index:0;}
  .r5 > *:not(.bg){position:relative;z-index:1;}
  .bg5{background:#ffffff;}
  .s-item{
    position:relative;background:#f8fafc;border:1px solid #e2e8f0;border-radius:10px;
    padding:12px 14px;font-size:14px;color:var(--ink);text-decoration:none;transition:.18s;
  }
  /* 5.2 / 5.3 / 5.4 / 5.6：不要框，只有文本，点击文字即跳转 */
  a.s-item{display:block;font-weight:700;}
  a.s-item:hover{background:#e0f2fe;border-color:var(--sky);transform:translateX(-4px);}
  /* 5.1 积分值：等级 + 积分 */
  .s1{background:#fff;text-align:center;padding:14px 12px;}
  .s1 .lv{font-size:12px;color:var(--sky-deep);font-weight:700;margin-bottom:4px;}
  .s1 .pts{font-size:26px;font-weight:900;line-height:1.1;}
  .s1 .pts span{font-size:12px;color:var(--muted);font-weight:400;margin-left:4px;}
  /* 5.5 只显示时间 */
  .s-time{text-align:center;padding:10px 12px;}
  .s-time b{font-size:21px;font-weight:900;letter-spacing:.02em;}
  /* 背景5：中间留白 */
  .s-gap{flex:1;min-height:20px;}
  /* 5.7 退出 */
  /* 5.7：不要框，只有文本 */
  .s-out{
    align-self:center;                 /* 区域5.7 左右居中 */
    min-width:150px;text-align:center;
    font:inherit;font-weight:700;font-size:14px;cursor:pointer;
    color:#e11d48;background:#fff;border:1px solid #fecdd3;padding:9px 26px;
  }
  .s-out:hover{background:#e11d48;border-color:#e11d48;color:#fff;}
  /* 5.8 日期（当地年月日） */
  .s-date{text-align:center;font-weight:700;font-size:15px;padding:16px 12px;background:#fff;}

  /* 轻提示 */
  .toast{
    position:fixed;left:50%;bottom:104px;transform:translate(-50%,14px);z-index:99;
    background:rgba(15,23,42,.92);color:#fff;font-size:13px;padding:9px 18px;border-radius:999px;
    opacity:0;pointer-events:none;transition:.25s;
  }
  .toast.on{opacity:1;transform:translate(-50%,0);}

/* ================= 移动端适配（首页） ================= */
@media (max-width: 1024px) {
  .r2 { height: auto !important; padding: 12px; gap: 8px; }
  .cards { gap: 8px; }
  .card.side { display: none; }              /* 手机上只保留中间那张大卡 */
  .card.main { flex: 1; }
  .nav-btn { width: 36px; flex: 0 0 36px; height: 64px; align-self: center; font-size: 18px; border-radius: 8px; }
  .r3 { height: auto !important; flex-direction: column; padding: 12px; gap: 12px; }
  .r3 > .col { min-height: 0; }
  .chart { height: 180px; }
  .wall, .posts { height: auto !important; max-height: none !important; overflow: visible; }
  .r5 { width: 88%; }
  .s-gap { min-height: 8px; }
}
@media (max-width: 768px) {
  .card.main .cover { min-height: 150px; }
  .card .cover .c-title { font-size: 20px; }
  .card .meta { padding: 10px 12px; }
  .bar { max-width: 26px; }
  .r5 { width: 100%; padding: 16px 14px 18px; }
}
@media (max-width: 480px) {
  .r2 { padding: 10px; }
  .nav-btn { height: 54px; }
  .card.main .cover { min-height: 128px; }
  .card .cover .c-title { font-size: 17px; }
  .panel h3 { font-size: 11.5px; }
  .bar { max-width: 22px; }
  .bar b { font-size: 10px; }
}


/* ================= 移动端适配（页眉 / 页脚） ================= */
@media (max-width: 1024px) {
  .r1 { height: auto !important; flex: 0 0 auto !important; flex-wrap: wrap; padding: 10px 14px; gap: 10px; }
  .r1 .logo { width: 46px; height: 46px; flex: 0 0 46px; font-size: 17px; border-radius: 10px; }
  .r1 .sitname { font-size: 20px; padding: 2px 6px; }
  .r1 .search { order: 3; flex: 1 0 100%; padding: 5px 6px 5px 14px; }
  .r1 .search input { font-size: 13.5px; }
  .r1 .search button { padding: 7px 16px; font-size: 13px; }
  .r1 .user { flex-direction: row; align-items: center; gap: 8px; margin-left: auto; }
  .r1 .avatar { width: 40px; height: 40px; font-size: 16px; }
  .r1 .uname { font-size: 11px; padding: 2px 6px; }
  .r4 { flex-wrap: wrap; padding: 14px; gap: 10px; }
  .r4 .logo { font-size: 18px; }
  .r4 .beian { flex: 1 0 100%; order: 3; text-align: left; }
  .r4 .contact { text-align: left; margin-left: auto; }
}
@media (max-width: 480px) {
  .r1 { padding: 8px 10px; gap: 8px; }
  .r1 .sitname { font-size: 17px; }
  .r1 .search { padding-left: 12px; }
  .r4 { font-size: 12px; }
}


/* --- 手机端修正：区域2 封面固定高度 --- */
@media (max-width: 1024px) {
  .r2 .card .cover { height: 156px; min-height: 156px; flex: 0 0 auto; }
}
@media (max-width: 480px) {
  .r2 .card .cover { height: 136px; min-height: 136px; }
}


/* ================= 移动端兜底：不允许横向溢出 ================= */
@media (max-width: 1024px) {
  html, body { max-width: 100%; overflow-x: hidden; }
  .r1 .search, .r1 .search input { min-width: 0; }
  .r4 { position: relative !important; margin-top: auto; }   /* 手机上页脚跟随内容：用 relative（不能用 static，否则背景层会铺满整页） */        /* 手机上页脚跟随内容，不吸在屏幕底部 */
  .r4 .beian, .r4 .contact { overflow-wrap: anywhere; }
  .card, .cards, .panel, .col, .row, .item, .msg, .post, .c13, .b2-scroll { min-width: 0; }
  .card .meta .t, .wall .msg, .post .ttl, .row h3, .row p,
  .card .cover .c-title, .paper h1 { overflow-wrap: anywhere; word-break: break-word; }
}