/* ═════════ 云栖园区 H5 · 龙湖U享家风格 ═════════
   重构遵循 html-css-guide 技能规范：
   @layer 级联 · 语义 landmark · focus-visible · reduced-motion ·
   fluid typography · 44px 触摸目标 · WCAG 4.5:1 对比度
═════════════════════════════════════════════ */

/* ── 级联层声明（控制 specificity 优先级）── */
@layer reset, base, layout, components, utilities;

/* ═════════ @layer reset ═════════ */
@layer reset {
  *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body { min-height: 100dvh; }
  a { color: inherit; text-decoration: none; }
  button { font-family: inherit; cursor: pointer; border: none; background: none; }
  input, textarea, select { font-family: inherit; font-size: 14px; }
  img { display: block; max-width: 100%; }
  ul, ol { list-style: none; }
}

/* ═════════ @layer base（主题变量 + 全局样式）═════════ */
@layer base {
  :root {
    --p: #0079FE;          /* 品牌蓝 */
    --pd: #0062CC;
    --pl: #3C8BFF;
    --acc: #FF6A2B;        /* 橙色系品牌色 */
    --o: #FF6A2B;
    --od: #E8551A;
    --ol: #FF8A3D;
    --og: #FFF2E9;
    --pg: #EAF2FF;
    --bg: #F5F6F7;
    --surface: #ffffff;
    --t: #333333;
    --t2: #666666;
    --t3: #8C8C8C;         /* 原 #999 对比度已够；微调至 #8C8C8C 更保险 */
    --line: #EEEEEE;
    --ok: #52C41A;
    --warn: #FAAD14;
    --err: #FF4D4F;
    --r: 14px;
    --rs: 10px;
    --sh: 0 1px 6px rgba(0,0,0,.06);
    --shh: 0 4px 20px rgba(0,0,0,.10);
    --nav-h: 56px;
    --safe-b: env(safe-area-inset-bottom, 0px);
    --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
    /* 别名（兼容旧代码）*/
    --primary: var(--p);
    --accent: var(--p);
    --text: var(--t);
    --text2: var(--t2);
    --text3: var(--t3);
  }

  body {
    font-family: var(--font-body);
    background: var(--bg); color: var(--t);
    font-size: 14px; line-height: 1.55;
    overscroll-behavior: none;
    -webkit-tap-highlight-color: transparent;
  }

  /* ── 跳过导航链接（WCAG 必须项）── */
  .skip-link {
    position: absolute; top: -100%; left: 50%; transform: translateX(-50%);
    background: var(--p); color: #fff; padding: 8px 16px; border-radius: 8px;
    font-weight: 700; z-index: 100; transition: top .2s;
  }
  .skip-link:focus { top: 8px; }

  /* ── 全局焦点指示器（WCAG：绝不能 outline:none 无替代）── */
  /* 输入框有自己的 focus 样式，不使用全局 outline */
  :focus-visible { outline: 2px solid var(--p); outline-offset: 2px; border-radius: 4px; }
  input:focus-visible, textarea:focus-visible, select:focus-visible { outline: none; }
  .subhero :focus-visible,
  .banner-wrap :focus-visible,
  .profile-hero :focus-visible {
    outline-color: #fff;
  }

  /* ── 运动偏好：尊重用户 prefers-reduced-motion ── */
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }
}

/* ═════════ @layer layout（页面骨架）═════════ */
@layer layout {
  #app {
    max-width: 480px; margin: 0 auto; min-height: 100dvh; background: var(--bg);
    position: relative; padding-bottom: calc(var(--nav-h) + var(--safe-b) + 8px);
  }
  .view { display: none; content-visibility: auto; }
  .view.active { display: block; animation: viewIn .28s cubic-bezier(.22,1,.36,1); }
  @keyframes viewIn { from{opacity:.35;transform:translateY(10px)} to{opacity:1;transform:none} }

  /* ── 子页面浮层（替代模态弹窗）── */
  #view-sub {
    position: fixed; inset: 0; z-index: 60;
    background: var(--bg); display: flex; flex-direction: column;
    transform: translateX(100%);
    transition: transform .3s cubic-bezier(.4,0,.2,1);
    overflow: hidden; -webkit-overflow-scrolling: touch;
  }
  /* 键盘弹出时 JS 动态设置 height/top，禁止 transition 干扰 */
  #view-sub.active { transform: translateX(0) }
  #view-sub.kb-active { transition: none }
  .sub-content { flex: 1 1 0%; padding-top: 0; padding-bottom: 13px; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }
  /* 子页面内容区的第一个 .float 负 margin 上浮会溢出到 subhero 上方被遮挡，消除首个 float 的负 margin */
  .sub-content > .float:first-child { margin-top: 0 !important }
  /* 提交按钮悬浮固定在 #view-sub 底部（flex 不滚动） */
  .sub-footer {
    flex-shrink: 0; padding: 12px 13px calc(14px + var(--safe-b));
    background: var(--surface); border-top: 1px solid var(--line); z-index: 5;
  }
  .sub-footer .btn { width: 100%; min-height: 48px }
  .sub-footer .auth-hint, .sub-footer .small { text-align: center; font-size: 12px; color: var(--t3); margin-top: 8px }

  /* ── 底部导航（语义 <nav>）── */
  .tabbar {
    position: fixed; bottom: 0; left: 50%; transform: translateX(-50%);
    width: 100%; max-width: 480px;
    height: calc(var(--nav-h) + var(--safe-b)); padding-bottom: var(--safe-b);
    background: rgba(255,255,255,.95); backdrop-filter: blur(14px);
    border-top: 1px solid var(--line); display: flex; z-index: 30;
  }

  /* ── 弹窗层 ── */
  .modal-mask {
    position: fixed; top: 0; bottom: 0; left: 50%; transform: translateX(-50%);
    width: 100%; max-width: 480px;
    background: rgba(20,24,38,.45); z-index: 70; opacity: 0; transition: opacity .26s;
    display: none; pointer-events: none; align-items: flex-end; justify-content: center;
  }
  .modal-mask.show { opacity: 1; display: flex; pointer-events: auto }

  /* ── Toast ── */
  .toast {
    position: fixed; top: 40%; left: 50%; transform: translate(-50%, -50%);
    width: calc(100% - 48px); max-width: calc(480px - 48px);
    background: rgba(20,24,38,.92); color: #fff; padding: 11px 20px; border-radius: 10px;
    font-size: 13.5px; font-weight: 600; z-index: 99; opacity: 0; transition: opacity .2s;
    pointer-events: none; text-align: center; backdrop-filter: blur(8px);
    box-shadow: 0 8px 24px rgba(0,0,0,.2);
  }
  .toast.show { opacity: 1 }
}

/* ═════════ @layer components（所有 UI 组件）═════════ */
@layer components {

  /* ── 首页顶部栏（透明浮层）── */
  .topbar-home {
    position: absolute; top: 0; left: 0; right: 0; z-index: 20;
    padding: 12px 16px; display: flex; align-items: center; gap: 10px;
  }
  .community-sel {
    display: inline-flex; align-items: center; gap: 4px;
    background: rgba(255,255,255,.88); color: var(--t); font-size: 15px;
    font-weight: 700; padding: 7px 13px; border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,.08); flex-shrink: 0; backdrop-filter: blur(8px);
    min-height: 44px; /* 触摸目标 ≥44px */
  }
  .community-sel svg { width: 11px; height: 11px; color: var(--t2); margin-left: 2px }
  .search-bar {
    flex: 1; display: flex; align-items: center; gap: 7px;
    background: rgba(255,255,255,.85); padding: 8px 14px;
    border-radius: 10px; color: var(--t3); font-size: 13px;
    backdrop-filter: blur(8px); box-shadow: 0 2px 8px rgba(0,0,0,.06);
    min-height: 44px;
  }
  .search-bar svg { width: 16px; height: 16px; flex-shrink: 0; opacity: .55 }
  .top-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0 }
  .top-action-btn {
    width: 44px; height: 44px; border-radius: 50%;
    background: rgba(255,255,255,.85); display: grid; place-items: center;
    backdrop-filter: blur(8px); box-shadow: 0 2px 8px rgba(0,0,0,.06);
  }
  .top-action-btn svg { width: 18px; height: 18px; color: var(--t2) }
  .top-avatar {
    width: 44px; height: 44px; border-radius: 50%; overflow: hidden;
    background: rgba(255,255,255,.85); display: grid; place-items: center;
    box-shadow: 0 2px 8px rgba(0,0,0,.06); font-size: 16px; font-weight: 700; color: var(--p);
  }

  /* ── 其他页面顶栏 ── */
  .topbar {
    position: sticky; top: 0; z-index: 20;
    background: var(--surface); color: var(--t);
    padding: 14px 16px 13px; border-bottom: 1px solid var(--line);
  }
  .topbar h1 { font-size: 17px; font-weight: 700; }
  .topbar .sub { font-size: 12.5px; color: var(--t2); margin-top: 2px; font-weight: 500 }
  .topbar.plain { border-bottom: 1px solid var(--line) }
  .topbar .tb-right { position: absolute; top: 50%; transform: translateY(-50%); right: 14px; display: flex; gap: 12px; align-items: center }
  .topbar .loc-pill { display: inline-flex; align-items: center; gap: 3px; background: var(--pg); color: var(--p); font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 999px }
  .topbar .loc-pill svg { width: 13px; height: 13px }
  .topbar .bell { position: relative; color: var(--t2); display: inline-flex }
  .topbar .bell svg { width: 21px; height: 21px }
  .topbar .bell::after { content:''; position:absolute; top:0; right:0; width:7px; height:7px; border-radius:50%; background:var(--err); border:1.5px solid #fff }

  /* ── Banner（真实图片 + 橙色叠层）── */
  .banner-wrap {
    position: relative; min-height: 200px; border-radius: 0 0 28px 28px; overflow: hidden;
    background: linear-gradient(160deg, #FF8A50 0%, #FFB86C 35%, #FFE0A0 70%, #FFF5E0 100%);
  }
  .banner-wrap::before {
    content:''; position:absolute; inset:0;
    background:
      radial-gradient(circle at 20% 30%, rgba(255,255,255,.25) 0%, transparent 40%),
      radial-gradient(circle at 80% 20%, rgba(255,220,150,.30) 0%, transparent 35%),
      radial-gradient(circle at 60% 75%, rgba(255,180,100,.20) 0%, transparent 45%);
  }
  .banner-overlay {
    position:absolute; inset:0; z-index:1;
    background: linear-gradient(160deg, rgba(255,90,30,.62) 0%, rgba(255,130,50,.46) 55%, rgba(255,170,90,.34) 100%);
  }
  .banner-wrap.use-img { background-size:cover; background-position:center; background-repeat:no-repeat }
  .banner-inner { position:relative; z-index:2; padding:56px 20px 24px; text-align:center }
  .banner-tag {
    display:inline-block; background:rgba(255,60,40,.90); color:#fff;
    font-size:11px; font-weight:700; padding:3px 12px; border-radius:6px;
    letter-spacing:1px; margin-bottom:12px;
  }
  .banner-title {
    font-size: clamp(24px, 2rem + 2vw, 32px); font-weight:800; color:#fff;
    line-height:1.25; letter-spacing:2px;
    text-shadow: 0 2px 12px rgba(180,80,0,.25); margin-bottom:8px;
  }
  .banner-sub { font-size:14px; color:rgba(255,255,255,.92); font-weight:600; letter-spacing:1px }

  /* ── 服务宫格白卡浮层 ── */
  .svc-card {
    position:relative; z-index:15; margin:-26px 13px 0;
    background:var(--surface); border-radius:var(--r);
    box-shadow:0 4px 20px rgba(0,0,0,.08); padding:20px 14px 18px;
  }
  .svc-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:6px }
  .svc-item {
    display:flex; flex-direction:column; align-items:center; gap:7px;
    padding:10px 2px 6px; cursor:pointer; transition:transform .15s;
    min-height:44px; /* 触摸目标 */
  }
  .svc-item:active { transform:scale(.93) }
  .svc-item .si-ic { width:42px; height:42px; display:grid; place-items:center; color:#444; stroke-width:1.6 }
  .svc-item .si-ic svg { width:24px; height:24px }
  .svc-item .si-lab { font-size:12px; color:var(--t); font-weight:600; text-align:center; line-height:1.2 }

  /* ── 内容卡片 ── */
  .content-cards { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:13px }
  .content-card { border-radius:var(--r); overflow:hidden; position:relative; box-shadow:var(--sh); background:var(--surface); min-height:160px }
  .content-card .cc-img { position:absolute; inset:0; background-size:cover; background-position:center }
  .content-card .cc-overlay { position:absolute; inset:0; background:linear-gradient(180deg,transparent 40%,rgba(0,0,0,.45) 100%); display:flex; flex-direction:column; justify-content:flex-end; padding:14px }
  .cc-tag { display:inline-block; font-size:10.5px; font-weight:700; padding:2px 8px; border-radius:4px; margin-bottom:6px; align-self:flex-start; letter-spacing:.5px }
  .cc-tag.red { background:#E74C3C; color:#fff }
  .cc-tag.blue { background:var(--p); color:#fff }
  .cc-title { font-size:14px; font-weight:700; color:#fff; line-height:1.3; text-shadow:0 1px 4px rgba(0,0,0,.3) }
  .cc-sub { font-size:11.5px; color:rgba(255,255,255,.82); margin-top:3px }
  .cc-cta { display:inline-flex; align-items:center; gap:4px; margin-top:8px; font-size:12px; font-weight:700; color:#fff; background:rgba(255,255,255,.20); padding:4px 12px; border-radius:999px; align-self:flex-start; backdrop-filter:blur(4px) }
  .cc-cta svg { width:13px; height:13px }

  /* ── 卡片 ── */
  .card { background:var(--surface); border-radius:var(--r); box-shadow:var(--sh); padding:18px; margin:13px; transition:transform .25s ease, box-shadow .25s ease }
  .card:hover { transform:translateY(-2px); box-shadow:var(--shh) }
  .card-title { font-size:15px; font-weight:700; display:flex; align-items:center; justify-content:space-between; margin-bottom:13px; color:var(--t) }
  .card-title .more { font-size:12px; color:var(--t3); font-weight:500 }

  /* ── 按钮 ── */
  .btn {
    display:inline-flex; align-items:center; justify-content:center; gap:6px;
    padding:13px 20px; border-radius:8px; font-size:14.5px; font-weight:700;
    background:var(--p); color:#fff; transition:all .15s ease; box-shadow:0 4px 14px rgba(0,121,254,.18);
    letter-spacing:.2px; min-height:44px; /* 触摸目标 */
  }
  .btn:active { transform:scale(.97); filter:brightness(.96); box-shadow:0 2px 8px rgba(0,121,254,.14) }
  .btn.block { width:100% }
  .btn.ghost { background:var(--pg); color:var(--p); box-shadow:none }
  .btn.outline { background:#fff; color:var(--p); border:1.5px solid var(--p); box-shadow:none }
  .btn.gray { background:#f1f3f8; color:var(--t2); box-shadow:none }
  .btn.danger { background:var(--err); box-shadow:0 4px 14px rgba(255,77,79,.22) }
  .btn.success { background:var(--ok); box-shadow:0 4px 14px rgba(82,196,26,.22) }
  /* 子页内操作按钮橙色系 */
  .sub-content .btn.block,
  .sub-content .btn.success { background:linear-gradient(135deg,#FF7E3D,#FF6A2B); color:#fff; box-shadow:0 6px 16px rgba(255,106,43,.30) }
  .sub-content .btn.block:active,
  .sub-content .btn.success:active { filter:brightness(.95) }
  .sub-content .btn.danger { background:var(--err); color:#fff; box-shadow:0 6px 16px rgba(255,77,79,.28) }
  .sub-content .btn.gray { background:#E9EEF5; color:#6B7280; box-shadow:none } /* 修正对比度 */
  .sub-content .detail-plate { text-align:center; padding:14px 0 4px }
  .sub-content .detail-plate .pl { font-size:30px; font-weight:800; color:var(--t); letter-spacing:1px }
  .sub-content .detail-plate .meta { font-size:13px; color:var(--t2); margin-top:6px }
  .sub-content .section-title { margin:18px 13px 6px }
  .sub-content .list { margin:4px 13px 13px }

  /* ── 徽标 ── */
  .badge { display:inline-flex; align-items:center; padding:2.5px 10px; border-radius:20px; font-size:11.5px; font-weight:700; letter-spacing:.2px }
  .badge.blue { background:#eaf2ff; color:var(--p) }
  .badge.green { background:#ecfdf5; color:var(--ok) }
  .badge.orange { background:#fffbeb; color:var(--warn) }
  .badge.red { background:#fef2f2; color:var(--err) }
  .badge.gray { background:#f1f3f8; color:#6B7280 } /* 原 #8A93A3 对比度不足 3:1，修正为 #6B7280 */

  /* ── 列表 ── */
  .list { background:var(--surface); border-radius:var(--r); margin:13px; box-shadow:var(--sh); overflow:hidden }
  .row { display:flex; align-items:center; gap:12px; padding:14px 17px; border-bottom:1px solid var(--line); transition:background .15s; min-height:44px }
  .row:last-child { border-bottom:none }
  .row:active { background:#f8fafc }
  .row .main { flex:1; min-width:0 }
  .row .title { font-size:14.5px; font-weight:600 }
  .row .desc { font-size:12.5px; color:var(--t2); margin-top:3px }
  .row .arrow { color:var(--t3) }
  .row .ri { width:38px; height:38px; border-radius:10px; background:var(--pg); color:var(--p); display:grid; place-items:center; flex-shrink:0 }
  .row .ri svg { width:19px; height:19px }
  .top-badge { display:inline-block; background:var(--err); color:#fff; font-size:10.5px; font-weight:700; line-height:1; padding:2px 6px; border-radius:5px; margin-right:5px; vertical-align:1px; letter-spacing:.5px }

  /* ── 概览统计 ── */
  .ov { display:flex; gap:8px }
  .ov > div { flex:1; display:flex; flex-direction:column; align-items:center; gap:2px; padding:6px 0 }
  .ov b { font-size:22px; font-weight:700; color:var(--t); line-height:1.1 }
  .ov b.c-blue { color:var(--p) }
  .ov b.c-green { color:var(--ok) }
  .ov b.c-orange { color:var(--warn) }
  .ov span { font-size:11.5px; color:var(--t2); font-weight:600 }

  /* ── 表单 ── */
  .field { margin-bottom:15px }
  .field label { display:block; font-size:13px; color:var(--t2); margin-bottom:7px; font-weight:600 }
  .field input, .field textarea, .field select {
    width:100%; padding:12px 14px; border:none; border-radius:10px;
    background:#F7F8FA; color:var(--t); transition:background .18s ease; box-shadow:none; outline:none;
  }
  .field input:hover, .field textarea:hover, .field select:hover { background:#F0F1F5 }
  .field input:focus, .field textarea:focus, .field select:focus {
    background:#FFF5F0; box-shadow:none; outline:none;
  }
  /* :has() 模式：表单含非法输入时减弱提交按钮（html-css-guide 推荐）*/
  form:has(:invalid:not(:focus)) .btn[type="submit"],
  .field-group:has(:invalid:not(:focus)) .btn.block { opacity:.6; pointer-events:none }
  .field textarea { resize:vertical; min-height:90px }

  /* ── Tab bar ── */
  .tabbar .tab { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; color:var(--t3); font-size:11px; transition:all .2s; min-height:44px }
  .tabbar .tab svg { width:23px; height:23px; stroke-width:1.7 }
  .tabbar .tab.active { color:var(--p) }
  .tabbar .tab.active svg { stroke:var(--p); filter:drop-shadow(0 2px 4px rgba(0,121,254,.3)) }
  .tabbar .tab:active { transform:scale(.9) }

  /* ── 弹窗 ── */
  .modal { width:100%; background:#fff; border-radius:14px 14px 0 0; padding:22px 20px calc(22px + var(--safe-b)); max-height:90vh; overflow-y:auto; transform:translateY(40px); transition:transform .34s cubic-bezier(.22,1,.36,1) }
  .modal-mask.show .modal { transform:translateY(0) }
  .modal-mask.center { align-items:center; padding:18px }
  .modal-mask.center .modal { transform:translateY(16px) scale(.98); border-radius:14px; max-width:420px; max-height:88vh }
  .modal-mask.center.show .modal { transform:none }
  .modal-handle { width:36px; height:4px; border-radius:4px; background:#d8dde9; margin:2px auto 16px }
  .modal-head { position:relative; padding-left:14px; display:flex; align-items:center; justify-content:space-between; margin-bottom:16px }
  .modal-head::before { content:''; position:absolute; left:0; top:3px; bottom:3px; width:4px; border-radius:4px; background:var(--acc) }
  .modal-head h3 { font-size:18px; font-weight:700 }
  .modal-close { font-size:22px; color:var(--t3); line-height:1; width:44px; height:44px; display:inline-grid; place-items:center; border-radius:50%; transition:background .15s }
  .modal-close:active { background:var(--line) }
  .modal-accent { height:5px; border-radius:5px; background:linear-gradient(90deg,var(--o),#FFB86C); margin-bottom:16px }

  /* ── 操作表 ── */
  .sheet { display:flex; flex-direction:column; gap:1px; border-radius:14px; overflow:hidden; background:var(--line) }
  .sheet-item { width:100%; text-align:center; padding:16px; font-size:16px; font-weight:600; background:#fff; color:var(--t); border:none; transition:background .15s; min-height:44px }
  .sheet-item svg { width:19px; height:19px; vertical-align:-4px; margin-right:8px; color:var(--p) }
  .sheet-item:active { background:#f5f6f7 }
  .sheet-item.danger { color:var(--err) }
  .sheet-item.danger svg { color:var(--err) }
  .sheet-cancel { width:100%; text-align:center; padding:16px; margin-top:10px; font-size:16px; font-weight:700; background:#fff; color:var(--t2); border:none; border-radius:14px; transition:background .15s; min-height:44px }
  .sheet-cancel:active { background:#f5f6f7 }

  /* ── 现代扁平化选择弹层（替代浏览器原生 select）── */
  .modal.picker-modal { padding:0; border-radius:20px 20px 0 0 }
  .picker-handle { width:36px; height:4px; border-radius:4px; background:#d8dde9; margin:8px auto 12px }
  .picker-title { font-size:16px; font-weight:700; color:var(--t); padding:0 20px 12px; text-align:center; border-bottom:1px solid var(--line) }
  .picker-list { max-height:50vh; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:6px 0 }
  .picker-item { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 20px; cursor:pointer; transition:background .15s; min-height:48px }
  .picker-item:active { background:#f5f6f7 }
  .picker-item.active { background:rgba(255,106,43,.04) }
  .picker-item.active .picker-label { color:var(--o); font-weight:700 }
  .picker-label { font-size:15px; color:var(--t); flex:1 }
  .picker-radio { width:22px; height:22px; border-radius:50%; border:2px solid var(--line); display:grid; place-items:center; flex-shrink:0; background:#fff }
  .picker-item.active .picker-radio { border-color:var(--o) }
  .picker-radio-dot { width:12px; height:12px; border-radius:50%; background:var(--o) }
  .picker-cancel { padding:14px; text-align:center; font-size:15px; color:var(--t2); font-weight:600; border-top:1px solid var(--line); background:#fafbfc }

  /* ── SelectPill（自定义选择器，替代原生 select）── */
  .select-pill {
    display:flex; align-items:center; justify-content:space-between; gap:8px;
    padding:11px 14px; border-radius:8px;
    background:transparent; color:var(--t); font-size:14px; font-weight:500;
    cursor:pointer; transition:background .15s ease; min-height:44px;
    border:none; outline:none;
  }
  .select-pill:hover { background:rgba(255,106,43,.03) }
  .select-pill .sp-text { flex:1; min-width:0; text-align:right; color:var(--t); overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
  .select-pill .sp-arrow { width:14px; height:14px; color:var(--t3); flex-shrink:0; transition:transform .2s }
  .select-pill .sp-text:empty::before,
  .select-pill .sp-text[data-empty="1"]::before { content:'请选择'; color:var(--t3) }

  /* ── 分段控件 ── */
  .seg { display:flex; background:#f1f3f8; border-radius:8px; padding:4px; gap:4px }
  .seg button { flex:1; padding:10px; border-radius:9px; font-size:14px; font-weight:700; color:var(--t2); background:transparent; transition:all .2s; min-height:44px }
  .seg button.active { background:#fff; color:var(--p); box-shadow:0 2px 8px rgba(15,23,30,.08) }
  .seg button:active { transform:scale(.96) }

  /* ── 验证码 ── */
  .code-row { display:flex; gap:10px; align-items:stretch }
  .code-row input { flex:1 }
  .code-row .btn { white-space:nowrap; padding:0 14px; font-size:13px }
  .code-tip { font-size:12.5px; color:var(--p); margin-top:7px; min-height:16px; line-height:1.4; font-weight:600 }
  .code-tip.err { color:var(--err) }

  /* ── 登录/注册独立页面（非弹窗，用 #view-sub 子页浮层）── */
  .auth-page { display:flex; flex-direction:column; min-height:100%; flex-shrink:0; background:var(--surface) }
  .auth-page-header { position:relative; padding:14px 16px; flex-shrink:0 }
  .auth-page-back { width:44px; height:44px; border-radius:50%; background:var(--bg); color:var(--t2); display:grid; place-items:center; transition:background .15s }
  .auth-page-back:active { background:var(--line) }
  .auth-page-back svg { width:20px; height:20px }
  .auth-page-body { flex:1 0 auto; overflow-y:auto; padding:0 24px 20px; -webkit-overflow-scrolling:touch; min-height:0 }
  .auth-logo { width:56px; height:56px; border-radius:16px; background:linear-gradient(135deg,var(--o),var(--ol)); color:#fff; display:grid; place-items:center; font-size:28px; font-weight:800; margin:8px auto 12px; box-shadow:0 8px 20px rgba(255,106,43,.32) }
  .auth-title { text-align:center; font-size:19px; font-weight:800; color:var(--t); letter-spacing:.3px }
  .auth-subtitle { text-align:center; font-size:12.5px; color:var(--t3); margin-top:4px }
  .auth-form { margin-top:16px }
  /* 列表式表单行 */
  .auth-form .form-row { display:flex; align-items:center; gap:12px; padding:14px 0; border-bottom:1px solid var(--line); transition:background .18s ease }
  .auth-form .form-row:last-child { border-bottom:none }
  .auth-form .form-row:focus-within { background:rgba(255,106,43,.04) }
  .auth-form .form-row > label { flex-shrink:0; min-width:84px; max-width:100px; font-size:14px; font-weight:600; color:var(--t); margin:0; display:flex; align-items:center; gap:3px }
  .auth-form .form-row > label::before { content:'*'; color:var(--err); font-weight:700; opacity:0; font-size:13px }
  .auth-form .form-row.required > label::before { opacity:1 }
  .auth-form .form-row > input { flex:1; min-width:0; border:none; background:transparent; padding:4px 0; font-size:15px; color:var(--t); text-align:right; box-shadow:none; min-height:auto; outline:none }
  .auth-form .form-row > input::placeholder { color:var(--t3) }
  .auth-form .form-row > input:focus { box-shadow:none; outline:none; background:transparent; border-color:transparent }
  .auth-form .form-row--code .row-extra { flex:1; min-width:0; display:flex; align-items:center; gap:10px; justify-content:flex-end }
  .auth-form .form-row--code .row-extra input { flex:1; min-width:0; text-align:right; width:auto; border:none; background:transparent; padding:4px 0; font-size:15px; box-shadow:none; outline:none }
  .auth-form .form-row--code .btn-sm { white-space:nowrap; padding:6px 12px; font-size:12.5px; min-height:32px; border-radius:6px; flex-shrink:0 }
  .auth-page-footer { flex-shrink:0; padding:14px 24px calc(20px + var(--safe-b)); border-top:1px solid var(--line); background:var(--surface) }
  .auth-page-footer .btn { width:100%; min-height:48px; font-size:15px }
  .auth-page-footer .auth-hint { text-align:center; font-size:12px; color:var(--t3); margin-top:10px }
  .link-btn { background:none; color:var(--p); font-size:13px; font-weight:700; padding:4px; transition:opacity .15s }
  .link-btn:active { opacity:.55 }

  /* ── 区块标题 ── */
  .section-title { display:flex; align-items:center; gap:8px; font-size:15px; color:var(--t); font-weight:700; margin:18px 16px 6px }
  .section-title::before { content:''; width:3.5px; height:15px; border-radius:3px; background:var(--p); flex-shrink:0 }
  .section-title .more { margin-left:auto; font-size:12px; color:var(--t3); font-weight:500 }

  /* ── 快捷操作条 ── */
  .quick-bar { display:flex; gap:10px; overflow-x:auto; padding:2px 0; -webkit-overflow-scrolling:touch; scrollbar-width:none }
  .quick-bar::-webkit-scrollbar { display:none }
  .quick-chip { flex-shrink:0; display:flex; align-items:center; gap:6px; padding:9px 15px; border-radius:999px; background:var(--surface); color:var(--t2); font-size:13px; font-weight:600; box-shadow:var(--sh); white-space:nowrap; transition:all .2s; border:1.5px solid transparent; min-height:44px }
  .quick-chip svg { width:16px; height:16px; color:var(--p) }
  .quick-chip:active { transform:scale(.95); border-color:var(--p); color:var(--p) }

  /* ── 子页面渐变页头（橙色系）── */
  .subhero { position:relative; z-index:1; background:linear-gradient(135deg,#FF7E3D 0%,#FF6A2B 55%,#FF9248 100%); padding:50px 18px 58px; overflow:hidden }
  .subhero::before { content:''; position:absolute; inset:0; background:radial-gradient(circle at 88% 10%,rgba(255,255,255,.30) 0%,transparent 42%),radial-gradient(circle at 6% 96%,rgba(255,255,255,.14) 0%,transparent 45%) }
  .subhero .sh-back { position:absolute; top:14px; left:14px; width:44px; height:44px; border-radius:50%; background:rgba(255,255,255,.22); display:grid; place-items:center; z-index:3; backdrop-filter:blur(4px); transition:background .15s }
  .subhero .sh-back:active { background:rgba(255,255,255,.34) }
  .subhero .sh-back svg { width:20px; height:20px; color:#fff }
  .subhero .sh-action { position:absolute; top:14px; right:14px; z-index:3; display:inline-flex; gap:12px; color:#fff }
  .subhero .sh-action svg { width:22px; height:22px }
  .subhero-inner { position:relative; z-index:2; padding:0 2px }
  .subhero .sh-title { font-size:clamp(19px, 1.2rem + 1.5vw, 22px); font-weight:800; color:#fff; letter-spacing:1px; text-shadow:0 2px 10px rgba(180,60,0,.25) }
  .subhero .sh-sub { font-size:13px; color:rgba(255,255,255,.9); margin-top:7px; font-weight:500; letter-spacing:.3px }

  /* ── 浮层卡片 ── */
  .float { position:relative; z-index:5; margin:-40px 13px 0 }
  .float + .float { margin-top:13px }
  .section-gap { margin-top:13px }

  /* ── 子页统计 ── */
  .sh-stat { display:flex; align-items:center; gap:10px }
  .sh-stat .si { width:38px; height:38px; border-radius:10px; display:grid; place-items:center; flex-shrink:0 }
  .sh-stat .si svg { width:20px; height:20px }
  .sh-stat .si.b { background:var(--pg); color:var(--p) }
  .sh-stat .si.o { background:#fffbeb; color:var(--warn) }
  .sh-stat .si.g { background:#ecfdf5; color:var(--ok) }
  .sh-stat .st { display:flex; flex-direction:column }
  .sh-stat .st b { font-size:17px; font-weight:800; color:var(--t) }
  .sh-stat .st span { font-size:12px; color:var(--t2) }

  /* ── 个人中心页头 ── */
  .profile-hero { padding:48px 18px 64px; background:linear-gradient(135deg,#FF7E3D 0%,#FF6A2B 55%,#FF9248 100%) }
  .profile-hero .ph-avatar { width:70px; height:70px; border-radius:50%; background:rgba(255,255,255,.22); color:#fff; display:grid; place-items:center; font-size:30px; font-weight:800; border:2.5px solid rgba(255,255,255,.55); box-shadow:0 6px 18px rgba(180,60,0,.28); margin-bottom:12px; cursor:pointer }
  .profile-hero .ph-avatar svg { width:60%; height:60% }
  .profile-hero .ph-name { font-size:20px; font-weight:800; color:#fff; text-shadow:0 2px 8px rgba(180,60,0,.25) }
  .profile-hero .ph-sub { font-size:12.5px; color:rgba(255,255,255,.88); margin-top:5px; font-weight:500 }

  /* ── 统计行 ── */
  .stat-row { display:flex; gap:10px }
  .stat-row .s { flex:1; background:var(--surface); border-radius:10px; padding:14px; text-align:center; box-shadow:var(--sh) }
  .stat-row .s .v { font-size:19px; font-weight:700; color:var(--p) }
  .stat-row .s .l { font-size:11.5px; color:var(--t2); margin-top:3px }

  /* ── FAB ── */
  .fab { position:fixed; right:max(16px,calc(50% - 480px/2 + 16px)); bottom:calc(var(--nav-h) + var(--safe-b) + 14px); width:54px; height:54px; border-radius:50%; background:var(--p); color:#fff; display:grid; place-items:center; box-shadow:0 10px 28px rgba(0,121,254,.34); z-index:25; transition:transform .2s, box-shadow .2s }
  .fab svg { width:26px; height:26px }
  .fab:active { transform:scale(.92); box-shadow:0 6px 16px rgba(0,121,254,.26) }

  /* ── 其他 ── */
  .chk { display:flex; align-items:center; gap:7px; padding:5px 0; font-size:13.5px }
  .perm-tree { max-height:52vh; overflow-y:auto; border:1.5px solid var(--line); border-radius:8px; padding:12px 14px }
  .perm-tree .node { margin:2px 0 }
  .perm-tree .child { padding-left:24px }

  /* ── 移动端适配增强 ── */
  @media (max-width:380px) {
    :root { --r:12px }
    .topbar { padding:12px 14px 11px }
    .banner-inner { padding:50px 16px 20px }
    .svc-card { margin:-22px 10px 0; padding:16px 10px 14px }
    .svc-item .si-ic { width:38px; height:38px }
    .svc-item .si-ic svg { width:21px; height:21px }
    .svc-item .si-lab { font-size:11px }
    .card { margin:9px; padding:14px }
    .section-title { margin:14px 11px 2px; font-size:14px }
    .btn { padding:11px 16px; font-size:14px }
    .modal { padding:18px 16px calc(18px + var(--safe-b)) }
    .content-cards { gap:8px; margin:10px }
    .content-card { min-height:140px }
    .subhero { padding:44px 14px 52px }
    .subhero .sh-title { font-size:20px }
    .float { margin:-36px 10px 0 }
    .profile-hero { padding:42px 14px 56px }
    .profile-hero .ph-avatar { width:62px; height:62px; font-size:26px }
  }
  @media (max-width:340px) {
    .banner-title { font-size:24px }
    .svc-item .si-lab { font-size:10.5px }
    .subhero .sh-title { font-size:19px }
  }
}

/* ═════════ @layer utilities ═════════ */
@layer utilities {
  .pad { padding:12px }
  .mt { margin-top:12px }
  .center { text-align:center }
  .muted { color:var(--t2) }
  .small { font-size:12px }
  .empty { text-align:center; color:var(--t3); padding:44px 0; font-size:13.5px }
  .avatar { width:46px; height:46px; border-radius:50%; background:var(--p); color:#fff; display:grid; place-items:center; font-size:18px; font-weight:700; box-shadow:0 4px 12px rgba(0,121,254,.25) }
  .avatar svg { width:58%; height:58% }
  /* 视觉隐藏（屏幕阅读器可读）— WCAG 必须项 */
  .visually-hidden { clip:rect(0 0 0 0); clip-path:inset(50%); height:1px; overflow:hidden; position:absolute; white-space:nowrap; width:1px }
}

/* @layer utilities 续：公告富文本正文 */
@layer utilities {
  .rt-content { font-size:14.5px; line-height:1.85; color:var(--t); word-break:break-word; }
  .rt-content p { margin:0 0 11px; }
  .rt-content h1 { font-size:21px; margin:16px 0 9px; }
  .rt-content h2 { font-size:19px; margin:15px 0 9px; }
  .rt-content h3 { font-size:17px; margin:14px 0 8px; }
  .rt-content h4,.rt-content h5,.rt-content h6 { margin:12px 0 7px; }
  .rt-content ul,.rt-content ol { padding-left:22px; margin:9px 0; }
  .rt-content li { margin:5px 0; }
  .rt-content blockquote { margin:11px 0; padding:9px 15px; border-left:3px solid var(--p); background:color-mix(in srgb, var(--p) 8%, #fff); border-radius:0 8px 8px 0; color:var(--t2); }
  .rt-content img { max-width:100%; border-radius:9px; margin:8px 0; vertical-align:middle; }
  .rt-content a { color:var(--p); text-decoration:underline; word-break:break-all; }
  .rt-content table { width:100%; border-collapse:collapse; margin:10px 0; font-size:13.5px; }
  .rt-content th,.rt-content td { border:1px solid var(--line); padding:7px 9px; text-align:left; }
  .rt-content hr { border:none; border-top:1px solid var(--line); margin:14px 0; }
  .rt-content code { background:#f1f3f7; padding:1px 5px; border-radius:4px; font-size:13px; }
}