/* ============================================================
 * 银龄生活 · 邻聚集成模块样式（暖色适老风）
 * 设计语言:暖橙主色/大字号/高对比卡片
 * 挂载点:邻里互助中心 → 🤝 邻里互助分组内 → 🧓 银龄生活 子分组
 * ============================================================ */

/* 分组内子标题：跨满整行，视觉上从属父分组 */
.feature-subtitle{
  grid-column:1 / -1;
  display:flex;align-items:center;gap:8px;
  font-size:12px;font-weight:600;color:#C24E2A;
  margin:10px 2px 2px;padding-top:10px;
  letter-spacing:1px;
  border-top:1px dashed #EBDFD0;
}
.feature-subtitle::before{
  content:"";width:3px;height:12px;border-radius:2px;background:#C24E2A;
}
.yl-wrap{--yl-primary:#C24E2A;--yl-primary-deep:#9E3A17;--yl-soft:#FBEADF;--yl-gold:#B97E14;--yl-gold-soft:#FBF1DC;--yl-green:#2F7D53;--yl-green-soft:#E6F3EB;--yl-blue:#33628F;--yl-blue-soft:#E7EFF7;--yl-line:#EBDFD0;--yl-ink:#33261F;--yl-ink2:#7A6A5E}
.yl-head{
  background:linear-gradient(135deg,#C24E2A,#E8A33D);color:#fff;border-radius:14px;
  padding:16px 18px;margin-bottom:12px;position:relative;overflow:hidden;
}
.yl-head h4{margin:0 0 4px;font-size:17px;display:flex;align-items:center;gap:8px}
.yl-head p{margin:0;font-size:12px;opacity:.92}
.yl-head .yl-head-badge{
  position:absolute;right:14px;top:14px;background:rgba(255,255,255,.22);
  border-radius:12px;padding:3px 10px;font-size:11px;
}
.yl-tabs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
.yl-tab{
  padding:6px 14px;border-radius:16px;border:1px solid var(--yl-line);
  background:#fff;color:var(--yl-ink2);font-size:12.5px;cursor:pointer;transition:all .15s;
}
.yl-tab:hover{border-color:var(--yl-primary);color:var(--yl-primary)}
.yl-tab.active{background:var(--yl-primary);border-color:var(--yl-primary);color:#fff}

.yl-sec-title{
  display:flex;align-items:center;gap:6px;margin:16px 0 8px;font-size:13.5px;font-weight:700;color:var(--yl-ink);
}
.yl-sec-title::before{content:'';width:4px;height:14px;border-radius:2px;background:var(--yl-primary)}
.yl-sec-note{font-size:11.5px;color:var(--yl-ink2);margin:-4px 0 8px}

.yl-card{
  background:#fff;border:1px solid var(--yl-line);border-radius:12px;
  padding:12px 14px;margin-bottom:8px;box-shadow:0 1px 6px rgba(102,68,35,.05);
}
.yl-card-top{display:flex;align-items:flex-start;gap:10px}
.yl-ico{
  width:38px;height:38px;border-radius:10px;flex:none;display:flex;align-items:center;justify-content:center;
  font-size:20px;background:var(--yl-soft);
}
.yl-card-main{flex:1;min-width:0}
.yl-card-title{font-size:13.5px;font-weight:600;color:var(--yl-ink)}
.yl-card-sub{font-size:12px;color:var(--yl-ink2);margin-top:3px;line-height:1.5}
.yl-card-meta{font-size:11.5px;color:var(--yl-gold);margin-top:4px}
.yl-price{color:var(--yl-primary);font-weight:700;font-size:13.5px}
.yl-tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px}
.yl-tag{font-size:10.5px;padding:2px 8px;border-radius:9px;background:var(--yl-soft);color:var(--yl-primary-deep)}
.yl-tag.green{background:var(--yl-green-soft);color:var(--yl-green)}
.yl-tag.blue{background:var(--yl-blue-soft);color:var(--yl-blue)}
.yl-tag.gold{background:var(--yl-gold-soft);color:var(--yl-gold)}

/* 本社区能做什么 —— 服务能力清单 */
.yl-cover-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:8px;margin-top:8px}
.yl-cover{
  display:flex;align-items:flex-start;gap:10px;background:#fff;border:1px solid var(--yl-line);
  border-radius:11px;padding:10px 12px;box-shadow:0 1px 6px rgba(102,68,35,.05);
  transition:border-color .15s,box-shadow .15s;
}
.yl-cover:hover{border-color:var(--yl-primary);box-shadow:0 3px 12px rgba(194,78,42,.12)}
.yl-cover-ico{
  width:32px;height:32px;border-radius:9px;flex:none;display:flex;align-items:center;justify-content:center;
  font-size:17px;background:var(--yl-soft);
}
.yl-cover-main{flex:1;min-width:0}
.yl-cover-name{font-size:12.5px;font-weight:600;color:var(--yl-ink);line-height:1.4}
.yl-cover-note{font-size:11px;color:var(--yl-ink2);margin-top:3px;line-height:1.5}
.yl-cover.off{opacity:.5;background:#FAF8F6}
.yl-cover.off .yl-cover-name{text-decoration:line-through;color:#999}
.yl-cover-badge{
  font-size:10px;padding:1px 7px;border-radius:8px;background:var(--yl-green-soft);
  color:var(--yl-green);margin-left:6px;font-weight:500;vertical-align:1px;white-space:nowrap;
}

.yl-btn{
  border:none;border-radius:9px;padding:7px 16px;font-size:12.5px;cursor:pointer;flex:none;
  background:var(--yl-primary);color:#fff;transition:opacity .15s;
}
.yl-btn:hover{opacity:.88}
.yl-btn:disabled{background:#ccc;cursor:not-allowed}
.yl-btn.ghost{background:#fff;color:var(--yl-primary);border:1px solid var(--yl-primary)}
.yl-btn.small{padding:5px 12px;font-size:11.5px}
.yl-btn.green{background:var(--yl-green)}
.yl-actions{display:flex;gap:8px;align-items:center;margin-top:10px;flex-wrap:wrap}

/* 茶吧时段表 */
.yl-table{width:100%;border-collapse:collapse;font-size:12px;background:#fff;border-radius:10px;overflow:hidden;border:1px solid var(--yl-line)}
.yl-table th{background:var(--yl-soft);color:var(--yl-primary-deep);font-weight:600;padding:8px 10px;text-align:left}
.yl-table td{padding:8px 10px;border-top:1px solid var(--yl-line);color:var(--yl-ink)}
.yl-table .yl-closed{color:#B33A3A}
.yl-slot-grid{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}
.yl-slot{
  border:1.5px solid var(--yl-line);background:#fff;border-radius:10px;padding:8px 12px;
  font-size:12px;cursor:pointer;color:var(--yl-ink);transition:all .15s;
}
.yl-slot small{display:block;color:var(--yl-ink2);font-size:10.5px;margin-top:2px}
.yl-slot.sel{border-color:var(--yl-primary);background:var(--yl-soft);color:var(--yl-primary-deep)}
.yl-slot.disabled{opacity:.45;cursor:not-allowed}

/* 头部英雄区 */
.yl-hero-stats{display:flex;gap:18px;margin-top:10px;flex-wrap:wrap}
.yl-hero-stat b{display:block;font-size:18px}
.yl-hero-stat span{font-size:10.5px;opacity:.85}

/* 积分条 */
.yl-progress{height:8px;border-radius:4px;background:var(--yl-soft);overflow:hidden;margin:6px 0 2px}
.yl-progress i{display:block;height:100%;background:linear-gradient(90deg,#C24E2A,#E8A33D);border-radius:4px}

/* 达人/榜单 */
.yl-rank-row{display:flex;align-items:center;gap:10px;padding:8px 4px;border-bottom:1px dashed var(--yl-line);font-size:12.5px}
.yl-rank-row:last-child{border-bottom:none}
.yl-rank-no{width:22px;height:22px;border-radius:50%;background:var(--yl-soft);color:var(--yl-primary-deep);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12px;flex:none}
.yl-rank-row:nth-child(1) .yl-rank-no{background:#F7D794;color:#7A4E0C}

/* 提示条 */
.yl-note{
  background:var(--yl-gold-soft);border:1px solid #F0E2C0;color:#6B4E0E;border-radius:10px;
  padding:10px 12px;font-size:12px;line-height:1.65;margin-top:12px;
}
.yl-note.blue{background:var(--yl-blue-soft);border-color:#C9DCEC;color:#274F73}
.yl-note.green{background:var(--yl-green-soft);border-color:#CBE4D6;color:#1F5A3B}

/* 我的记录列表 */
.yl-mine-row{display:flex;align-items:center;gap:10px;padding:9px 4px;border-bottom:1px dashed var(--yl-line);font-size:12.5px}
.yl-mine-row:last-child{border-bottom:none}
.yl-mine-icon{font-size:17px;flex:none}
.yl-mine-main{flex:1;min-width:0}
.yl-mine-title{color:var(--yl-ink)}
.yl-mine-sub{font-size:11px;color:var(--yl-ink2);margin-top:1px}
.yl-status{font-size:10.5px;padding:2px 8px;border-radius:9px;flex:none}
.yl-status.active{background:var(--yl-green-soft);color:var(--yl-green)}
.yl-status.cancelled{background:#eee;color:#999}

/* 弹层（预约/报名确认） */
.yl-modal-mask{position:fixed;inset:0;background:rgba(40,25,15,.45);z-index:999;display:flex;align-items:center;justify-content:center}
.yl-modal{background:#fff;border-radius:16px;width:min(420px,92vw);max-height:82vh;overflow:auto;padding:18px}
.yl-modal h4{margin:0 0 12px;font-size:15px;color:var(--yl-ink)}
.yl-modal .yl-modal-body{font-size:13px;color:var(--yl-ink2);line-height:1.7}
.yl-modal-foot{display:flex;gap:10px;justify-content:flex-end;margin-top:16px}

/* 空态 */
.yl-empty{text-align:center;padding:30px 0;color:var(--yl-ink2);font-size:12.5px}

/* ============================================================
 * 零工市场：发布 / 编辑表单
 * ============================================================ */
.yl-form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.yl-form-grid label{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--yl-ink2)}
.yl-input{
  width:100%;box-sizing:border-box;border:1px solid var(--yl-line);border-radius:8px;
  padding:7px 10px;font-size:12.5px;color:var(--yl-ink);background:#fff;
  font-family:inherit;outline:none;transition:border-color .15s;
}
.yl-input:focus{border-color:var(--yl-primary)}
textarea.yl-input{resize:vertical;line-height:1.55}
.yl-form-hint{color:#B33A3A;font-size:12px;min-height:17px;margin-top:8px}
.yl-sec-title .yl-btn{margin-left:auto;flex:none}

/* 后台：零工市场状态徽标 */
.yl-admin-badge{
  display:inline-block;font-size:10.5px;padding:1px 8px;border-radius:9px;
  font-weight:500;vertical-align:1px;margin-left:6px;white-space:nowrap;
}
.yl-admin-badge.ok{background:var(--yl-green-soft);color:var(--yl-green)}
.yl-admin-badge.off{background:#eee;color:#8a8a8a}

/* ============================================================
 * 管理后台 · 银发茶吧配置表单
 * 命名前缀 yl-admin-*，避免与宿主后台样式冲突
 * ============================================================ */
.yl-admin-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:10px}
.yl-admin-grid label{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--yl-ink2)}
.yl-admin-row{
  display:flex;gap:8px;align-items:center;flex-wrap:wrap;
  padding:8px 10px;margin-bottom:6px;background:#fff;
  border:1px solid var(--yl-line);border-radius:10px;
}
.yl-admin-row .modal-input{height:32px;font-size:12.5px}
.yl-w-ico{width:56px;flex:none;text-align:center}
.yl-w-name{width:170px;flex:none}
.yl-w-note{flex:1;min-width:140px}
.yl-w-time{width:130px;flex:none}
.yl-w-plan{width:130px;flex:none}
.yl-w-note2{flex:1;min-width:140px}
.yl-admin-chk{
  display:inline-flex;align-items:center;gap:5px;flex:none;
  font-size:12px;color:var(--yl-ink2);cursor:pointer;user-select:none;
}
.yl-admin-chk input{width:15px;height:15px;cursor:pointer;accent-color:var(--yl-primary)}
#ylCovList .btn-tiny,#ylSlotList .btn-tiny,#ylActList .btn-tiny{flex:none}
.btn-tiny.danger{color:#B33A3A;border-color:#E7C4C4}

/* 移动端适配 */
@media (max-width:768px){
  .yl-head{padding:14px}
  .yl-head h4{font-size:15.5px}
  .yl-modal{width:94vw}
  .yl-w-name,.yl-w-time,.yl-w-plan{width:100%}
  .yl-w-ico{width:48px}
}

/* ============================================================
 * 兴趣社团 · 商业化升级（积分 / 主理人 / 商品 / 作品 / 订单）
 * 仅追加新类，不修改旧类
 * ============================================================ */

/* 社团内子页签：比主 tabs 更轻，视觉上从属 */
.yl-subtabs{margin-bottom:12px;padding-bottom:10px;border-bottom:1px dashed var(--yl-line)}
.yl-subtabs .yl-tab{font-size:12px;padding:5px 11px}

/* 子页签上的数量角标 */
.yl-dot{
  display:inline-block;min-width:15px;height:15px;line-height:15px;padding:0 4px;
  border-radius:8px;background:#C24E2A;color:#fff;font-size:10px;
  text-align:center;vertical-align:top;margin-left:1px;
}

/* 大号积分数字 */
.yl-points-big{color:var(--yl-primary);font-size:17px;font-weight:700}

/* 订单状态徽标 */
.yl-order-status{
  display:inline-block;padding:1px 8px;border-radius:9px;font-size:11px;
  background:#F1EBE4;color:var(--yl-ink2);border:1px solid var(--yl-line);
}
.yl-order-status.gold{background:var(--yl-gold-soft);color:var(--yl-gold);border-color:#EAD9B0}
.yl-order-status.blue{background:var(--yl-blue-soft);color:var(--yl-blue);border-color:#CFE0EF}
.yl-order-status.green{background:var(--yl-green-soft);color:var(--yl-green);border-color:#C9E5D5}

/* 积分明细行 */
.yl-order-row{
  display:flex;gap:8px;align-items:center;
  padding:8px 11px;margin-bottom:6px;background:#fff;
  border:1px solid var(--yl-line);border-radius:10px;
}
.yl-order-row:last-child{margin-bottom:0}

/* 弹层表单 */
.yl-form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:9px;margin-bottom:9px}
.yl-field{display:flex;flex-direction:column;gap:4px;margin-bottom:9px}
.yl-field label{font-size:12px;color:var(--yl-ink2);font-weight:600}
.yl-input{
  width:100%;box-sizing:border-box;padding:8px 11px;font-size:13px;
  border:1px solid var(--yl-line);border-radius:9px;background:#fff;
  color:var(--yl-ink);font-family:inherit;outline:none;
}
.yl-input:focus{border-color:var(--yl-primary);box-shadow:0 0 0 3px rgba(194,78,42,.10)}
textarea.yl-input{resize:vertical;line-height:1.55}

/* 弹层内容区：长表单可滚动 */
.yl-modal-body{max-height:62vh;overflow-y:auto;padding-right:2px}

/* 商品标签补充色（紫色用于积分） */
.yl-tag.purple{background:#F2E9FA;color:#6D3E9E;border-color:#E0CDF0}
.yl-tag.red{background:#FBEAEA;color:#B33A3A;border-color:#EFCACA}

/* 库存/积分提示行 */
.yl-stock{font-size:11px;color:var(--yl-ink2)}
.yl-price-points{font-size:14px;font-weight:700;color:#6D3E9E}

@media (max-width:768px){
  .yl-subtabs .yl-tab{font-size:11.5px;padding:4px 9px}
  .yl-form-grid{grid-template-columns:1fr}
}

/* ============================================================
 * 独立页面（yinling.html）专用样式
 * 作用域：body.yl-page / .yl-page* —— 不影响主站内嵌面板
 * ============================================================ */

/* ============================================================
 * 独立页滚动恢复 —— 关键修复
 *
 * 主站 styles.css 第 24 行有：html,body{height:100%;overflow:hidden}
 * 那是给 SPA 用的（#app{height:100vh;overflow:hidden}，滚动发生在内部容器）。
 * 独立页是常规长文档，必须让【文档自身】能滚。
 *
 * ⚠️ 必须显式覆盖 html，不能只写 body：
 *   真实 Chrome/Edge 下滚动所有权归 <html>，只恢复 body 无效，
 *   表现为「页面滚不动、底部内容看不到」。
 *   这里用 html.yl-page 提升优先级（0,1,1 > 0,0,1），
 *   稳定压过主站的 html,body{...}，不依赖源码顺序。
 * ============================================================ */
html.yl-page, html.yl-page body.yl-page{
  height:auto;
  min-height:100%;
  overflow-x:hidden;
  overflow-y:auto;
  overscroll-behavior-y:none;
}
html.yl-page{ scroll-behavior:smooth }
body.yl-page{
  background:#F7F3EE;
  -webkit-overflow-scrolling:touch;
}
body.yl-page *{box-sizing:border-box}

/* ---------- 模块内「独立页面」入口（主站面板内也可见） ---------- */
/* 靠右下角，避开左侧徽标与标题文字 */
.yl-open-page{
  position:absolute;right:12px;bottom:10px;
  display:inline-flex;align-items:center;
  padding:4px 12px;border-radius:14px;
  background:rgba(255,255,255,.94);color:#9E3A17;
  font-size:11.5px;font-weight:600;letter-spacing:.5px;
  white-space:nowrap;text-decoration:none;cursor:pointer;
  box-shadow:0 2px 8px rgba(120,50,20,.22);
  transition:transform .15s,box-shadow .15s,background .15s;
}
.yl-open-page:hover{background:#fff;transform:translateY(-1px);box-shadow:0 4px 12px rgba(120,50,20,.32)}
.yl-open-page:active{transform:translateY(0)}
/* 有入口链接时，徽标让位到左侧（宿主内置徽标原本在右上角） */
.yl-head .yl-head-badge{right:auto;left:14px}
/* 窄容器（主站右侧面板）里入口按钮占位较大，让它下移一行避免压住标题 */
.yl-head .yl-open-page{display:block;width:fit-content;margin-left:auto}
.yl-head h4{padding-right:0;margin-top:26px}
.yl-head p{padding-right:0}

/* ---------- 顶部栏 ---------- */
.yl-page-head{
  position:sticky;top:0;z-index:60;
  background:linear-gradient(135deg,#C24E2A,#E8A33D);
  box-shadow:0 2px 14px rgba(120,50,20,.18);
}
.yl-page-head-inner{
  width:min(1120px,94vw);margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;padding:12px 0;
}

/* 品牌区 */
.yl-page-brand{
  display:flex;align-items:center;gap:10px;
  color:#fff;text-decoration:none;flex-shrink:0;
}

/* 分隔线：邻聚平台标识 | 模块名 */
.yl-page-brand-split{
  width:1px;height:26px;margin:0 4px;
  background:rgba(255,255,255,.34);
}

/* 模块名（次级标签，视觉弱于平台标识） */
.yl-page-brand-mod{line-height:1.15}
.yl-page-brand-mod strong{
  display:block;font-size:14px;font-weight:700;letter-spacing:1px;
  color:rgba(255,255,255,.94);
}
.yl-page-brand-mod small{
  display:block;font-size:10px;opacity:.78;letter-spacing:.3px;margin-top:2px;
  white-space:nowrap;
}
.yl-page-brand-mark{
  width:42px;height:42px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:21px;line-height:1;
  background:rgba(255,255,255,.24);
  border:1px solid rgba(255,255,255,.4);
  box-shadow:0 4px 12px rgba(90,40,10,.18);
  flex-shrink:0;
}

/* 平台名：主标识，字号大于模块名 */
.yl-page-brand-text strong{
  display:block;font-size:19px;font-weight:700;letter-spacing:2px;
}
.yl-page-brand-text small.yl-page-brand-en{
  display:block;font-size:9.5px;letter-spacing:4px;opacity:.8;
  margin-top:2px;font-weight:600;
}
.yl-page-brand-text small{display:none}
.yl-page-brand-text{line-height:1.15}

/* 用户 + 社区 */
.yl-page-user{
  display:flex;align-items:center;gap:10px;
  background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.28);
  border-radius:24px;padding:6px 14px 6px 6px;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.yl-page-avatar{
  width:36px;height:36px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:#C24E2A;color:#fff;
  font-size:15px;font-weight:700;overflow:hidden;
}
.yl-page-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.yl-page-user-info{line-height:1.25;min-width:0}
.yl-page-nick{
  font-size:13.5px;font-weight:600;color:#fff;
  max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.yl-page-sub{font-size:10.5px;color:rgba(255,255,255,.82);letter-spacing:.3px}

.yl-page-comm{
  display:flex;align-items:center;gap:8px;
  padding-left:12px;margin-left:2px;
  border-left:1px solid rgba(255,255,255,.28);
}
.yl-page-comm-label{font-size:11px;color:rgba(255,255,255,.86);white-space:nowrap;letter-spacing:.5px}
.yl-page-comm-select{
  height:30px;max-width:190px;padding:0 26px 0 10px;
  border:1px solid rgba(255,255,255,.5);border-radius:15px;
  background:rgba(255,255,255,.96);color:#7A3A18;
  font-size:12.5px;font-weight:600;font-family:inherit;cursor:pointer;
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%239E3A17' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center;
  outline:none;
}
.yl-page-comm-select:disabled{opacity:.7;cursor:default}

/* ---------- 中部内容区 ---------- */
.yl-page-main{
  width:min(1120px,94vw);margin:0 auto;
  padding:18px 0 48px;
  min-height:calc(100vh - 260px);
}
/* 独立页里模块用全宽布局，不再受右侧窄面板限制 */
.yl-page-main .yl-wrap{background:transparent}
/* 独立页空间充足，页签放大一号 */
.yl-page-main .yl-tabs{gap:8px;margin-bottom:16px}
.yl-page-main .yl-tab{padding:8px 18px;border-radius:18px;font-size:13.5px}

/* ---------- 页脚 ---------- */
.yl-page-footer{
  padding:30px 20px 38px;text-align:center;
  background:#EFE6DC;border-top:1px solid #E3D6C8;
  font-size:12.5px;color:#8A7767;letter-spacing:.6px;
  display:flex;justify-content:center;align-items:center;
  gap:22px;flex-wrap:wrap;
}
.yl-page-footer a{color:#8A7767;text-decoration:none;transition:color .15s}
.yl-page-footer a:hover{color:#C24E2A}
.yl-page-footer-links{display:inline-flex;align-items:center;gap:16px}

/* ---------- 移动端 ---------- */
@media (max-width:768px){
  .yl-page-head-inner{
    flex-wrap:wrap;padding:10px 0;gap:10px;
  }
  .yl-page-brand-mod small{display:none}
  .yl-page-user{
    flex:1 1 100%;justify-content:flex-start;
    border-radius:16px;padding:6px 12px 6px 6px;
  }
  .yl-page-user-info{flex:1;min-width:0}
  .yl-page-nick{max-width:none}
  .yl-page-comm{
    flex-direction:column;align-items:flex-end;gap:2px;padding-left:10px;
  }
  .yl-page-comm-label{font-size:10px}
  .yl-page-comm-select{max-width:150px;height:28px;font-size:12px}
  .yl-page-main{width:94vw;padding:12px 0 32px}
  .yl-open-page{right:10px;bottom:9px;padding:3px 10px;font-size:11px}
  .yl-head .yl-head-badge{left:10px;font-size:10px;padding:3px 8px}
  .yl-head h4{margin-top:24px}
  .yl-page-footer{font-size:11.5px;gap:12px;padding:24px 16px 30px}
  .yl-page-footer-links{gap:12px}
}