/*! ==========================================================================
 *  yp-site.css —— 前台皮肤（纯样式覆盖层，只改外观）
 *
 *  覆盖范围：前台首页 / 、「我的」/user.php、发布页 pub.php、排行榜 rank.php、数据页 shuju.php
 *  色系：单一强调色（深蓝 #1d4ed8）+ 中性灰。全部用实色：不用渐变、不用彩色光晕、不用毛玻璃虚化、
 *        按钮/输入框不描成胶囊——这几样凑在一起就是典型的「AI 生成页面」味。后台皮肤 xiaohai/css/yp-admin.css
 *        仍是原来的紫色系，前台后台互不影响。
 *  说明：不改动任何功能、结构、数据与交互，只调配色 / 圆角 / 阴影 / 字体。
 *  还原：删掉各页面里的 <link href="css/yp-site.css"> 及本文件即可（备份在 /www/backup/xh_ui_20261010/）。
 * ========================================================================== */
:root{
  --yp-primary:#1d4ed8;
  --yp-primary-2:#1d4ed8;
  --yp-primary-tint:#eaf1fb;
  --yp-primary-line:#c9dbf3;
  --yp-bg:#f1f5f9;
  --yp-text:#1e293b;
  --yp-muted:#64748b;
  --yp-line:#e2e8f0;
  --yp-radius:10px;
  --yp-shadow:0 1px 2px rgba(15,23,42,.05),0 2px 8px rgba(15,23,42,.04);
  --yp-shadow-sm:0 1px 2px rgba(15,23,42,.05);
}

/* ============================== 全局 ============================== */
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Microsoft YaHei","PingFang SC",sans-serif;
  font-size:15px;
  color:var(--yp-text);
  background:var(--yp-bg);
  -webkit-font-smoothing:antialiased;
}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:#cbd5e1;border:2px solid transparent;border-radius:6px;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:#94a3b8;background-clip:content-box}
::-webkit-scrollbar-track{background:transparent}

/* ========================= 顶部导航（首页） ========================= */
.yp-nav{
  position:sticky;top:0;z-index:60;
  padding:12px 20px;
  font-family:inherit;
  background:#fff;
  border-bottom:1px solid var(--yp-line);
}
.yp-nav-brand{color:var(--yp-primary-2);font-size:16px;font-weight:700;letter-spacing:.2px}
.yp-nav-brand svg{color:var(--yp-primary)}
.yp-nav-link{
  padding:8px 16px;border:1px solid var(--yp-line);border-radius:6px;
  color:#475569;font-size:14px;font-weight:500;background:#fff;
  transition:border-color .18s ease,color .18s ease,background .18s ease;
}
.yp-nav-link:hover{
  border-color:var(--yp-primary-line);color:var(--yp-primary-2);
  background:var(--yp-primary-tint);
}
.yp-nav-link.on{
  border-color:#1d4ed8;color:#fff;font-weight:600;
  background:#1d4ed8;
}

/* ========================= 首页头部 / 搜索 ========================= */
.user-top{
  border-bottom:1px solid var(--yp-line);
  background:#fff;
}
.user-ico-div{background:#1d4ed8}
.user-ico-div-1,.user-ico-div-2{background:rgba(255,255,255,.9)}
.user-name{color:var(--yp-muted)}
.user-name-txt{color:var(--yp-text);font-weight:600}

.spcinput{
  height:34px;background:#f8fafc;border:1px solid var(--yp-line);border-radius:6px;
  font-size:14px;color:var(--yp-text);transition:border-color .18s ease,background .18s ease,box-shadow .18s ease;
}
.spcinput::placeholder{color:#94a3b8}
.spcinput:focus{background:#fff;border-color:#9db8e8;box-shadow:0 0 0 3px rgba(29,78,216,.12)}
.s_pcsubmit_1{border-color:var(--yp-primary)}
.s_pcsubmit_2{border-bottom-color:var(--yp-primary)}
.s_pcsubmit:hover{background:var(--yp-primary-tint);opacity:1}
.s_load{background:transparent}
.s_box{overflow:hidden}

/* ============================ 公告条 ============================ */
.user-radio{
  background:var(--yp-primary-tint);color:#24407a;
  border-left:3px solid var(--yp-primary);border-radius:8px;
}
.user-radio-0{background:var(--yp-primary-tint)}
.user-radio a{color:var(--yp-primary-2)}

/* ============================ 文件列表 ============================ */
.user-title{color:#0f172a;font-weight:800;letter-spacing:.5px}
.file-box{
  background:#fff;
  border:1px solid var(--yp-line);border-top:1px solid var(--yp-line);
  border-radius:10px;
  padding:8px 10px;
}
.mbx{padding:0 14px;border-radius:8px;transition:background .18s ease}
.mbx:hover{background:#f8fafc}
.mbxfolder{border-bottom:1px solid #f1f5f9}
#folder{border-top:1px solid #f1f5f9}
.mlink{color:var(--yp-text);padding:14px 0;height:auto}
.mlink:visited{color:var(--yp-text)}
.fileimg{
  display:flex;align-items:center;justify-content:center;
  width:40px;height:40px;background:#f1f5f9;
  border-radius:8px;
}
.fileimg img{border-radius:6px;max-width:100%;height:auto}
.filename{color:#1e293b;font-weight:600;line-height:1.35}
.filename:hover{color:var(--yp-primary-2)}
.filesize{color:#94a3b8}

.filedown{
  color:var(--yp-primary);background:var(--yp-primary-tint);
  border:1px solid var(--yp-primary-line);transition:background .18s ease,color .18s ease,border-color .18s ease;
}
.filedown-1{border-left-color:var(--yp-primary)}
.filedown-2{border-left-color:var(--yp-primary);border-bottom-color:var(--yp-primary)}
.filedown:hover{
  background:#1d4ed8;color:#fff;border-color:#1d4ed8;
}
.filedown:hover .filedown-1{border-left-color:#fff}
.filedown:hover .filedown-2{border-left-color:#fff;border-bottom-color:#fff}
.folderdown{background:var(--yp-primary-tint)}
.folderdown-2{border-left-color:var(--yp-primary-2);border-bottom-color:var(--yp-primary-2)}

#infomores{color:#94a3b8}
#filemore{
  background:#1d4ed8;color:#fff;font-weight:600;
  border-radius:6px;
  transition:background .18s ease;
}
#filemore:hover{background:#1b46c2}
#filemore:active{opacity:.92}

/* 积分徽标（handle.php 输出） */
.yp-jf{display:inline-block;margin-left:6px;padding:2px 9px;border-radius:6px;font-size:12px;font-weight:600;vertical-align:1px}
.yp-jf--pay{background:#fff7ed;color:#c2410c;box-shadow:inset 0 0 0 1px #fed7aa}
.yp-jf--free{background:#ecfdf5;color:#047857;box-shadow:inset 0 0 0 1px #a7f3d0}
.s_ad{background:#1d4ed8;border-radius:6px}

/* ============================ 页脚 / 提示 ============================ */
.n_foot{
  color:#94a3b8;font-size:12px;
  border-top:1px solid var(--yp-line);margin-top:40px;padding:24px 20px;
}
.n_copy{color:#94a3b8;line-height:1.9}
#smsspan{
  background:rgba(15,23,42,.86);border-radius:6px;padding:7px 15px;
}

/* ========================= 「我的」页（user.php） ========================= */
.yp-top{
  background:#fff;
  border-bottom:1px solid var(--yp-line);
  position:sticky;top:0;z-index:50;
}
.yp-logo{color:#0f172a;font-weight:700}
.yp-wrap{max-width:440px;margin:30px auto}
.yp-card{
  border:1px solid var(--yp-line);border-radius:var(--yp-radius);
  padding:24px 22px;
}
.yp-tabs{border-bottom:1px solid var(--yp-line)}
.yp-tabs a{color:var(--yp-muted);font-weight:500;padding:12px 0}
.yp-tabs a.on{color:var(--yp-primary-2);border-bottom-color:var(--yp-primary);font-weight:700}
.yp-item label{color:var(--yp-muted)}
.yp-input{
  border:1px solid var(--yp-line);border-radius:6px;background:#f8fafc;
  transition:border-color .18s ease,background .18s ease,box-shadow .18s ease;
}
.yp-input:focus{border-color:#9db8e8;background:#fff;box-shadow:0 0 0 3px rgba(29,78,216,.12)}
.yp-code button{
  border-radius:6px;background:var(--yp-primary-tint);
  color:var(--yp-primary-2);font-weight:500;
}
.yp-btn{
  border-radius:6px;font-weight:600;
  background:#1d4ed8;
}
.yp-btn:active{opacity:.92}
.yp-btn-2{background:#d97706}
.yp-msg{border-radius:8px}
.yp-third{border-top:1px dashed var(--yp-line)}
.yp-third-btns a{border-color:var(--yp-line);border-radius:6px;transition:border-color .18s ease,background .18s ease,color .18s ease}
.yp-third-btns a:hover{border-color:var(--yp-primary-line);background:var(--yp-primary-tint);color:var(--yp-primary-2)}
.yp-row span{color:var(--yp-muted)}
.yp-tip,.yp-foot{color:#94a3b8}
.yp-box{border-top:1px dashed var(--yp-line)}
.yp-box-d{color:var(--yp-muted)}
.yp-modal-in{border-radius:var(--yp-radius);box-shadow:var(--yp-shadow)}
.yp-dl-item,.yp-bind{border-bottom:1px dashed var(--yp-line)}
.yp-dl-time{color:#94a3b8}
.yp-bind-btn{
  border-color:var(--yp-primary-line);color:var(--yp-primary-2);
  border-radius:6px;transition:border-color .18s ease,background .18s ease,color .18s ease;
}
.yp-bind-btn:hover{background:var(--yp-primary);border-color:var(--yp-primary);color:#fff}
.yp-bind-btn.off{border-color:var(--yp-line);color:#bbb}
/* 「资料设置」里的 QQ 一键授权按钮：比普通绑定按钮更大更醒目 */
.yp-bind-btn-lg{
  display:inline-block;font-size:16px;font-weight:600;
  padding:10px 24px;border-radius:6px;white-space:normal;
}
.yp-bind-tip{border-radius:8px}

/* ========================= 移动端微调 ========================= */
@media (max-width:768px){
  .yp-nav{padding:10px 12px;gap:8px}
  .yp-nav-link{padding:7px 12px;font-size:13px}
  .file-box{border-radius:8px;padding:6px}
  .mbx{padding:0 8px}
}

/* ========================= 头像框 / 称号 / 背景音乐 ========================= */
.yp-av{flex:none}
/* 用户称号：名字旁的深色小标签，称号文字本身是彩色渐变（行内样式在 include/frame.php 的 yp_title_html） */
.yp-title{
  display:inline-block;margin-left:5px;padding:0 9px;
  border-radius:6px;border:1px solid rgba(148,163,184,.35);
  background:#0f172a;
  box-shadow:0 1px 2px rgba(15,23,42,.18);
  font-size:12px;line-height:18px;vertical-align:middle;white-space:nowrap;
}
/* 彩色渐变字体：彩条裁进文字（stops 与 frame.php 的 yp_title_grad() 一致） */
.yp-title-t{
  display:inline-block;
  background-image:linear-gradient(90deg,#ff5d73,#ffa64d,#ffe066,#7ee787,#4dd8ff,#8b9cff,#d18aff);
  -webkit-background-clip:text;background-clip:text;
  color:#ffe066;-webkit-text-fill-color:transparent;
}
/* 背景音乐：播放器是右下角一个可拖动的小圆钮，样式与脚本由 include/music.php 自带 */

/* ========================= 头像框兑换（「我的」页面） ========================= */
.yp-frame-cur{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:10px 12px;margin:10px 0;border:1px solid var(--yp-primary-line);
  border-radius:var(--yp-radius);background:var(--yp-primary-tint);
}
.yp-frame-cur-t{color:var(--yp-primary-2);font-size:13px}
.yp-frame-list{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}
.yp-frame-item{
  width:110px;padding:10px 8px;text-align:center;
  border:1px solid var(--yp-line);border-radius:8px;background:#fff;transition:border-color .18s ease,box-shadow .18s ease;
}
.yp-frame-item:hover{border-color:var(--yp-primary-line);box-shadow:var(--yp-shadow)}
.yp-frame-item.on{border-color:var(--yp-primary);background:var(--yp-primary-tint)}
.yp-frame-pic{
  width:56px;height:56px;margin:0 auto 6px;
  background-position:50%;background-repeat:no-repeat;background-size:100% 100%;
  overflow:hidden;
}
.yp-frame-name{font-size:13px;color:#333;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.yp-frame-cost{font-size:12px;color:#f59e0b;margin:2px 0 8px}
.yp-frame-item .yp-btn{width:100%;min-width:0;padding:6px 0;font-size:13px}

/* ========================= 彩色名字兑换（「我的」页面） ========================= */
.yp-nc-cur{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:10px 12px;margin:10px 0;border:1px solid var(--yp-primary-line);
  border-radius:var(--yp-radius);background:var(--yp-primary-tint);
}
.yp-nc-list{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}
.yp-nc-item{
  width:110px;padding:10px 8px;text-align:center;
  border:1px solid var(--yp-line);border-radius:8px;background:#fff;transition:border-color .18s ease,box-shadow .18s ease;
}
.yp-nc-item:hover{border-color:var(--yp-primary-line);box-shadow:var(--yp-shadow)}
.yp-nc-item.on{border-color:var(--yp-primary);background:var(--yp-primary-tint)}
.yp-nc-dot{
  display:block;width:34px;height:34px;margin:0 auto 6px;border-radius:50%;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.06);
}
.yp-nc-name{display:block;font-size:13px;color:#333;margin-bottom:8px}
.yp-nc-item .yp-btn{width:100%;min-width:0;padding:6px 0;font-size:13px}

/* 底部 tab 导航：样式与图标由 include/tabbar.php 自带（哪个页面 include 都能用） */

/* ==========================================================================
 *  发布页（pub.php）：「我上传的源码」条目 = 封面 + 信息 + 操作
 * ========================================================================== */
.yp-up-item{padding:12px 0}
.yp-up-head{display:flex;align-items:center;gap:12px}
/* 固定小缩略图：原图多大都只显示这个尺寸，不会被撑开 */
.yp-up-cover{
  flex:none;display:block;
  width:56px;height:56px;min-width:56px;min-height:56px;max-width:56px;max-height:56px;
  object-fit:cover;
  border:1px solid var(--yp-line);border-radius:8px;background:#f7f8fa;
}
.yp-up-meta{flex:1;min-width:0}
.yp-up-acts{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:8px 0 0}
@media (max-width:768px){
  .yp-up-cover{width:48px;height:48px;min-width:48px;min-height:48px;max-width:48px;max-height:48px}
}

/* ==========================================================================
 *  源码卡片：封面 + 标题 + 发布者/更新时间 + 点赞 / 评论 / 收藏 / 下载
 * ========================================================================== */
.yp-rcard{padding:6px 14px 0;border-radius:8px}
.yp-rcard .mlink{display:flex;align-items:center;gap:12px;padding:12px 0;width:100%;height:auto}
.yp-rcard .fileimg{
  flex:none;float:none;display:flex;align-items:center;justify-content:center;
  width:56px;height:56px;margin:0;border-radius:8px;
}
.yp-rcard .fileimg img{width:100%;height:100%;object-fit:cover;border-radius:8px}
.yp-rcard .filename{flex:1;min-width:0;float:none;max-width:none;font-size:15px;line-height:1.45}
.yp-rcard .filesize{min-width:0;padding-top:4px;font-size:12px}
.yp-rcard .yp-ract{padding:0 0 12px}
@media (max-width:768px){
  .yp-rcard{padding:6px 8px 0}
  .yp-rcard .fileimg{width:48px;height:48px}
}
.yp-ract{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:0 0 12px}
.yp-act{
  display:inline-flex;align-items:center;gap:5px;
  padding:5px 12px;border:1px solid var(--yp-line);border-radius:6px;
  background:#fff;color:var(--yp-muted);font-size:13px;line-height:1;
  text-decoration:none;cursor:pointer;transition:border-color .18s ease,background .18s ease,color .18s ease;
}
.yp-act:hover{border-color:var(--yp-primary-line);background:var(--yp-primary-tint);color:var(--yp-primary-2)}
.yp-act b{font-weight:600}
.yp-act.on{background:var(--yp-primary-tint);border-color:var(--yp-primary-line);color:var(--yp-primary-2)}
.yp-act svg{display:block;flex:none}
.yp-act-dl{
  margin-left:auto;color:#fff;font-weight:600;
  background:#1d4ed8;border-color:#1d4ed8;
}
.yp-act-dl:hover{color:#fff;background:#1b46c2;border-color:#1b46c2}
.yp-act-dl svg{color:#fff}
@media (max-width:768px){
  .yp-act{padding:4px 10px;font-size:12px}
  .yp-ract{gap:6px}
}

/* ==========================================================================
 *  评论面板（首页 / 发布页 / 「我的」页共用）
 * ========================================================================== */
.yp-cm-mask{position:fixed;left:0;top:0;right:0;bottom:0;background:rgba(15,23,42,.45);z-index:9995;display:none}
.yp-cm-mask.on{display:block}
.yp-cm{
  position:fixed;left:50%;bottom:0;z-index:9996;
  transform:translateX(-50%) translateY(12px);
  width:100%;max-width:560px;max-height:80vh;
  display:none;flex-direction:column;opacity:0;
  background:#fff;border-radius:12px 12px 0 0;
  box-shadow:0 -12px 40px rgba(15,23,42,.22);
  transition:opacity .18s ease,transform .18s ease;
}
.yp-cm.on{display:flex;opacity:1;transform:translateX(-50%) translateY(0)}
.yp-cm-h{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:14px 16px;border-bottom:1px solid var(--yp-line);
  font-size:15px;font-weight:600;color:#0f172a;
}
.yp-cm-x{color:var(--yp-muted);font-size:20px;line-height:1;text-decoration:none;padding:0 4px}
.yp-cm-b{flex:1;overflow:auto;padding:6px 16px}
.yp-cm-item{padding:10px 0;border-bottom:1px dashed var(--yp-line)}
.yp-cm-item:last-child{border-bottom:0}
.yp-cm-meta{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--yp-muted)}
.yp-cm-who{color:#0f172a;font-size:13px;font-weight:600}
.yp-cm-txt{margin-top:5px;font-size:14px;line-height:1.7;color:var(--yp-text);word-break:break-word;white-space:pre-wrap}
.yp-cm-empty{color:var(--yp-muted);font-size:13px;text-align:center;padding:22px 0}
.yp-cm-f{display:flex;gap:8px;padding:10px 16px 16px;border-top:1px solid var(--yp-line)}
.yp-cm-f textarea{
  flex:1;min-height:44px;max-height:120px;resize:none;
  padding:10px 12px;font-size:14px;line-height:1.6;font-family:inherit;
  border:1px solid var(--yp-line);border-radius:8px;background:#f8fafc;outline:none;
  transition:border-color .18s ease,background .18s ease,box-shadow .18s ease;
}
.yp-cm-f textarea:focus{background:#fff;border-color:#9db8e8;box-shadow:0 0 0 3px rgba(29,78,216,.12)}
.yp-cm-f button{
  flex:none;padding:0 18px;border:0;border-radius:8px;cursor:pointer;
  background:#1d4ed8;color:#fff;font-size:14px;font-weight:600;
}
.yp-cm-f button:disabled{opacity:.6;cursor:default}

/* ==========================================================================
 *  「我的」页：功能收进按钮里，点哪个按钮展开哪个功能
 * ========================================================================== */
.yp-menu{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:6px 0}
.yp-menu button,.yp-menu a{
  position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  padding:12px 6px 10px;border:1px solid var(--yp-line);border-radius:8px;
  background:#fff;
  color:#475569;font-size:13px;font-weight:500;font-family:inherit;line-height:1.2;
  text-decoration:none;box-sizing:border-box;cursor:pointer;
  transition:border-color .18s ease,background .18s ease,color .18s ease;
}
.yp-menu button:hover,.yp-menu a:hover{
  border-color:var(--yp-primary-line);color:var(--yp-primary-2);background:var(--yp-primary-tint);
}
.yp-menu button.on,.yp-menu a.on{
  border-color:var(--yp-primary-line);color:var(--yp-primary-2);font-weight:600;
  background:var(--yp-primary-tint);
}
/* 图标不加彩色底块，直接跟随文字色（去掉「圆角彩色图标瓦片」这种典型 AI 生成页特征） */
.yp-menu .yp-menu-ico{display:flex;align-items:center;justify-content:center;color:inherit;transition:color .18s ease}
/* 面板默认全部展开；脚本就绪后 body 上会加 yp-menu-js，才按按钮切换显示（禁用 JS 也不会少功能） */
.yp-menu-js .yp-panel{display:none}
.yp-menu-js .yp-panel.on{display:block;animation:yp-panel-in .18s ease}
@keyframes yp-panel-in{from{opacity:0}to{opacity:1}}

/* ==========================================================================
 *  源码演示图片：卡片里显示（「源码」内容和「点赞 / 评论 / 收藏」中间），点一下全屏放大
 * ========================================================================== */
.yp-demo{display:flex;flex-wrap:wrap;gap:8px;padding:0 0 10px}
.yp-demo img{
  display:block;width:104px;height:104px;object-fit:cover;
  border:1px solid var(--yp-line);border-radius:6px;background:#f8fafc;
  cursor:zoom-in;transition:box-shadow .16s ease;
}
.yp-demo img:hover{box-shadow:0 2px 10px rgba(15,23,42,.16)}
@media (max-width:768px){
  .yp-demo{gap:6px}
  .yp-demo img{width:88px;height:88px}
}

/* 点图放大：全屏黑底，再点一下（或按 Esc）关闭 */
.yp-imgmask{
  position:fixed;left:0;top:0;right:0;bottom:0;z-index:99999;
  background:rgba(15,23,42,.9);display:none;align-items:center;justify-content:center;
  padding:16px;cursor:zoom-out;
}
.yp-imgmask.on{display:flex}
.yp-imgmask img{max-width:96vw;max-height:88vh;border-radius:6px;box-shadow:0 20px 50px rgba(0,0,0,.5);cursor:zoom-out}
.yp-imgmask .yp-imgmask-x{
  position:fixed;right:14px;top:8px;color:#fff;font-size:30px;line-height:1;
  text-decoration:none;opacity:.85;cursor:pointer;
}
.yp-imgmask .yp-imgmask-x:hover{opacity:1}