/* 品牌字体（2026-09-19）：顶栏 logo 改纯文本「AESTHSIA」，用 ReemKufiFun-Bold。
     ★ 相对 url 以本 CSS 文件（assets/css/）为基准 → 必须写 ../fonts/，写成 assets/fonts/ 会 404。
     home.html head 里有对应的 <link rel="preload" as="font">。 */
  @font-face {
    font-family: 'ReemKufiFun';
    src: url('../fonts/ReemKufiFun-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
  }

  :root {
    --ink:      #111111;
    --paper:    #ffffff;
    --gray-50:  #fafafa;
    --gray-100: #f3f3f3;
    --gray-200: #e9e9e9;
    --gray-300: #d9d9d9;
    --gray-500: #767676;
    --gray-700: #444444;
  }

  * { margin: 0; padding: 0; box-sizing: border-box; }

  html { scroll-behavior: smooth; }

  body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",
                 "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
                 "Helvetica Neue", Arial, sans-serif;
    background: var(--paper);
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

  /* ===================== 顶栏 ===================== */
  header {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 64px;
    padding: 0 28px;
    background: rgba(255, 255, 255, .88);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--gray-100);
  }
  .brand { display: flex; align-items: center; }
  /* 品牌文字 AESTHSIA（2026-09-19）：齿轮 img 已删，桌面/手机都只显示这行字
     （旧规则「≤520px 隐藏 .brand span」已随之删除）。字体见文件顶部 @font-face。 */
  .brand span {
    font-family: 'ReemKufiFun', -apple-system, 'PingFang SC', 'Microsoft YaHei', sans-serif;
    font-size: 17px; font-weight: 700; letter-spacing: 2.5px;
  }

  .head-right { display: flex; align-items: center; gap: 14px; }
  .icon-btn {
    position: relative;
    width: 38px; height: 38px;
    display: flex; align-items: center; justify-content: center;
    background: none; border: none; border-radius: 12px;
    cursor: pointer; color: var(--gray-500);
    transition: color .2s, background .2s;
  }
  .icon-btn:hover { color: var(--ink); background: var(--gray-100); }
  .icon-btn svg { width: 20px; height: 20px; }
  .icon-btn .badge {
    position: absolute; top: 8px; right: 9px;
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--ink);
  }
  .avatar {
    position: relative; /* 彩虹光晕伪元素的定位基准 */
    width: 34px; height: 34px; border-radius: 50%;
    background: var(--ink); color: var(--paper);
    display: flex; align-items: center; justify-content: center;
    font-size: 14px; font-weight: 600; user-select: none;
    cursor: pointer; /* 点头像 → 会籍卡「个人资料」 */
    transition: transform .2s cubic-bezier(.22, .61, .36, 1);
  }
  .avatar:hover  { transform: scale(1.06); }
  .avatar:active { transform: scale(.94); }
  .avatar:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
  /* ---------- 头像圆边修平（视觉检查结论）----------
     现象：34px 头像的边缘有一圈深浅不匀的「脏灰边」，看着不圆、不顺滑。
     原因：.avatar 底色是近黑（字母头像需要），而 QQ 头像是方形 JPEG 被裁成圆——
         图片圆角的抗锯齿像素会与黑色底混色，混色深浅随图案变化，于是边缘明暗不匀。
     实测（DPR3，r=17px 边界环）：亮度 177~255、极差 78、标准差 19.7。
     修法：只对「图片头像」在图片之上盖一枚不透明 1px 圆环（::before，z-index 2 >
         .avatar img 的 1），把整条混色带盖成均匀细线 —— 与站内按钮/面板的 1px
         灰描边同一语言。字母头像本来就是 CSS 圆（边缘天然干净），不加环。
     注：:has() 不被支持时整条规则失效 = 退回现状，不会更糟。 */
  .avatar:has(img)::before,
  .m-avatar:has(img)::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px var(--gray-200);
    pointer-events: none;
    z-index: 2;
  }
  /* 图片头像不要近黑底：抗锯齿没有深色可混，残余也只会是白的（从根上消除脏边） */
  .avatar:has(img)   { background: var(--paper); }
  .m-avatar:has(img) { background: var(--paper); }

  /* 游客注册按钮（顶栏 CTA，仅未登录显示） */
  .guest-signup {
    padding: 9px 18px;
    font-size: 13px;
    font-family: inherit;
    font-weight: 600;
    color: var(--paper);
    background: var(--ink);
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: background .2s;
  }
  .guest-signup:hover { background: #000; }

  /* 语言切换按钮与「退出登录」按钮的样式已随元素一起删除（2026-09-19）：
     两者都搬进了「通用 → 设置」（语言用 .seg 分段选择，退出登录用 .btn-signout 右对齐按钮）。
     index.html / register.html 各自有内联的 .lang-btn（那两页没有设置页，保留）。 */

  /* ===================== 侧栏 ===================== */
  .layout { display: flex; }
  aside {
    position: fixed;
    top: 64px; bottom: 0; left: 0;
    width: 196px;
    display: flex; flex-direction: column;
    gap: 4px;
    padding: 20px 12px;
    border-right: 1px solid var(--gray-100);
    background: var(--paper);
    z-index: 20;
  }
  .nav-label {
    padding: 0 12px 8px;
    font-size: 11px; font-weight: 600;
    letter-spacing: 2.5px; text-transform: uppercase;
    color: var(--gray-300);
  }
  .nav-item {
    display: flex; align-items: center; gap: 12px;
    padding: 11px 12px;
    border-radius: 12px;
    font-size: 14.5px; font-weight: 500;
    background: var(--paper); /* 主菜单：未选中 = 白底黑字 */
    color: var(--ink);
    text-decoration: none;
    /* 按钮级菜单项（如「主页」）重置 UA 默认样式；对 <a> 无副作用 */
    border: none;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: background .2s, color .2s;
  }
  .nav-item:hover { background: var(--gray-100); color: var(--ink); }
  .nav-item svg { width: 18px; height: 18px; flex-shrink: 0; }
  .nav-foot { margin-top: auto; padding: 12px; }
  /* 当前视图高亮（画廊 / 通行证 互斥）：
     主菜单选中 = 暗色实底白字；子菜单选中 = 暗色调提示 */
  .nav-item.active { background: var(--ink); color: var(--paper); }
  .nav-sub-item.active { background: var(--gray-200); color: var(--ink); }

  /* 一级「通行证」：可折叠父项 + 二级菜单 */
  .nav-group { display: flex; flex-direction: column; gap: 2px; }
  .nav-parent {
    width: 100%;
    border: none; /* 背景继承 .nav-item 的白底（选中态暗底白字） */
    font-family: inherit;
    text-align: left;
    cursor: pointer;
  }
  .nav-chev { margin-left: auto; transition: transform .2s; }
  .nav-group.closed .nav-chev { transform: rotate(-90deg); }
  /* 游客：通行证菜单整组置灰禁用（灰色 + 阻断点击） */
  .nav-locked { opacity: .4; pointer-events: none; }
  .nav-sub {
    display: flex; flex-direction: column; gap: 2px;
    margin: 2px 0 6px;
    padding-left: 8px;
  }
  .nav-group.closed .nav-sub { display: none; }
  .nav-sub-item {
    display: flex; align-items: center; gap: 12px;
    padding: 8px 12px;
    border-radius: 10px;
    font-size: 13.5px; font-weight: 500;
    color: var(--gray-500);
    text-decoration: none;
    /* button 子项（画廊年份组）重置默认样式；对 <a> 子项无副作用 */
    background: none;
    border: none;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: background .2s, color .2s;
  }
  .nav-sub-item:hover { background: var(--gray-100); color: var(--ink); }
  .nav-sub-item svg { width: 16px; height: 16px; flex-shrink: 0; }

  /* ===================== 主内容 ===================== */
  main {
    flex: 1;
    margin-left: 196px;
    padding: 96px 40px 72px;
  }
  .container { max-width: 960px; margin: 0 auto; }
  /* 画廊视图解除 960 上限：瀑布流铺满 main 内容区（列数上限 5，见 home.js colCountFor()） */
  .container:has(#view-gallery:not([hidden])) { max-width: none; }

  section { scroll-margin-top: 88px; }

  /* 问候区（顶栏那一行）：2026-09-19 起**只有「通用 → 个人资料」子页显示**，
     会籍卡 / 设置整行隐藏（由 home.js 切 hidden）。
     原本贴在右侧的额度 pill 已随会籍卡那条行一起删除 —— 整行现在只有一个元素，
     space-between 留着不碍事，将来要放开第二列也不用改样式。 */
  .greet-row {
    display: flex; align-items: flex-end;
    justify-content: space-between;
    gap: 16px; flex-wrap: wrap;
  }
  .greet-row h2 { font-size: 26px; font-weight: 700; letter-spacing: -.3px; }
  .greet-date { margin-top: 6px; font-size: 14px; color: var(--gray-500); }

  /* 画廊占位（暂无内容） */
  /* 画廊整体入场动画：从下方淡入上移（仅内容动画，导航栏不参与、不移动）
     每次切到画廊视图时 display:none→block 会重新触发 */
  .gallery-wrap { animation: galleryIn .5s cubic-bezier(.22, .61, .36, 1) both; }
  @keyframes galleryIn {
    from { opacity: 0; transform: translateY(28px); }
    to   { opacity: 1; transform: none; }
  }

  /* 画廊：真·瀑布流（JS 最短列贪心）——
     .gallery-grid = 等宽列容器行；.g-col = 一列，列内向下堆叠；
     首批 N 张铺满第一视觉行（左→右 = 配置前 N 张），无行带、无大片空隙 */
  .gallery-grid {
    display: flex;
    gap: 14px;
    margin-top: 24px;
    align-items: stretch;
  }
  .g-col {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
  }
  .g-card {
    width: 100%;
    background: var(--paper);
    border: 1px solid var(--gray-100);
    border-radius: 16px;
    overflow: hidden;
    cursor: pointer;
  }
  .g-card img {
    display: block;
    width: 100%;
    height: auto;
    transition: transform .3s ease;
  }
  .g-card:hover img { transform: scale(1.02); }
  /* 卡片不显示文字（标题在详情查看器里）—— 纯图砖墙 */
  .gallery-empty {
    margin-top: 48px;
    text-align: center;
    font-size: 14px;
    color: var(--gray-500);
  }
  .gallery-empty button {
    display: inline-block;
    margin-top: 14px;
    padding: 9px 20px;
    border: 1px solid var(--gray-300);
    border-radius: 10px;
    background: none;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--gray-500);
    cursor: pointer;
  }
  .gallery-empty button:hover { color: var(--ink); border-color: var(--ink); }

  /* 卡片容器 */
  .panel {
    background: var(--paper);
    border: 1px solid var(--gray-100);
    border-radius: 20px;
    padding: 24px;
  }
  .panel-label {
    font-size: 11px; font-weight: 600;
    letter-spacing: 2.5px; text-transform: uppercase;
    color: var(--gray-500);
  }

  .grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 24px;
  }

  /* 余额卡 */
  .balance-amount {
    margin-top: 14px;
    font-size: 40px; font-weight: 700;
    letter-spacing: -1px;
  }
  .balance-amount .unit {
    font-size: 15px;
    font-weight: 600;
    color: var(--gray-500);
    letter-spacing: 0;
    margin-left: 10px;
  }
  .balance-sub { margin-top: 8px; font-size: 13.5px; color: var(--gray-500); }
  .balance-divider { margin: 20px 0; height: 1px; background: var(--gray-100); }
  .balance-row {
    display: flex; align-items: center; justify-content: space-between;
    font-size: 13.5px;
  }
  .balance-row .k { color: var(--gray-500); }
  .balance-row .v { font-weight: 600; }
  /* 快捷操作 */
  .quick-actions { margin-top: 20px; }
  .qa-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-top: 16px;
  }
  .qa {
    display: flex; flex-direction: column; align-items: center; gap: 10px;
    padding: 18px 8px 14px;
    background: var(--gray-50);
    border: 1px solid var(--gray-100);
    border-radius: 16px;
    cursor: pointer;
    font-size: 12.5px; font-weight: 500; font-family: inherit;
    color: var(--gray-700);
    transition: background .2s, border-color .2s, color .2s;
  }
  .qa:hover { background: var(--gray-100); border-color: var(--gray-300); color: var(--ink); }
  .qa svg { width: 22px; height: 22px; }
  .qa:active { transform: scale(.97); }

  /* 银行卡区 */
  .card-img {
    width: 100%;
    display: block;
    /* drop-shadow 跟随 alpha 轮廓，阴影贴合卡片形状 */
    filter: drop-shadow(0 12px 24px rgba(0, 0, 0, .14))
            drop-shadow(0 2px 6px rgba(0, 0, 0, .05));
    transition: filter .4s ease, opacity .4s ease;
  }
  .card-img.frozen {
    filter: grayscale(1) opacity(.55)
            drop-shadow(0 12px 24px rgba(0, 0, 0, .10));
  }
  .card-meta {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; flex-wrap: wrap;
    margin-top: 18px;
  }
  .card-meta .num { font-size: 15px; font-weight: 600; letter-spacing: 1.5px; }
  .card-meta .sub { margin-top: 4px; font-size: 12px; color: var(--gray-500); letter-spacing: .6px; }
  .status-pill {
    padding: 6px 12px;
    border-radius: 99px;
    font-size: 12px; font-weight: 600;
    background: var(--gray-100); color: var(--gray-500);
  }
  .status-pill.on { background: var(--ink); color: var(--paper); }

  /* 交易记录 */
  .activity { margin-top: 20px; }
  .act-list { margin-top: 14px; }
  .act-item {
    display: flex; align-items: center; gap: 14px;
    padding: 13px 4px;
    border-bottom: 1px solid var(--gray-100);
  }
  .act-item:last-child { border-bottom: none; }
  .act-icon {
    width: 38px; height: 38px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: var(--gray-100);
    border-radius: 12px;
    color: var(--gray-700);
  }
  .act-icon svg { width: 18px; height: 18px; }
  .act-info { flex: 1; min-width: 0; }
  .act-info .t { font-size: 14.5px; font-weight: 500; }
  .act-info .s { margin-top: 2px; font-size: 12.5px; color: var(--gray-500); }
  .act-amt { font-size: 14.5px; font-weight: 600; white-space: nowrap; }
  .act-amt.plus { color: var(--ink); }
  .act-amt.minus { color: var(--gray-500); font-weight: 500; }

  /* 控制区（原「卡片控制 + 会员」两列并排；会员已并入个人资料 → 改单列通栏）。
     「卡片控制」#controls 面板已整段删除（2026-09-19）→ .controls-panel 一并删除；
     .ctrl-row / .ctrl-name 设置页（#settings）仍在用，保留。 */
  .ctrl-row {
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    padding: 14px 2px;
    border-bottom: 1px solid var(--gray-100);
  }
  .ctrl-row:last-child { border-bottom: none; }
  .ctrl-name { font-size: 14.5px; font-weight: 500; }
  /* .ctrl-desc 已随「卡片控制」面板删除（只有它在用） */
  /* 退出登录：**右对齐的独立按钮**（2026-09-19 按需求改，原为 .ctrl-link 通栏行 + 右箭头）。
     通栏行 + 箭头在视觉上像「点进去还有下一级」，而它其实是终点 —— 所以换成靠右按钮、去掉箭头。
     配色沿用全站黑白灰：白底 + 1px 灰边，悬停浅灰底。 */
  .settings-signout { display: flex; justify-content: flex-end; margin-top: 16px; }
  .btn-signout {
    padding: 11px 22px;
    background: var(--paper);
    border: 1px solid var(--gray-200);
    border-radius: 12px;
    font: inherit; font-size: 13px; font-weight: 500;
    color: var(--ink);
    cursor: pointer;
    transition: background .2s, border-color .2s;
  }
  .btn-signout:hover { background: var(--gray-100); border-color: var(--gray-300); }

  /* ===================== 设置页（通用 → 设置） =====================
     只有「标签 + 控件」两列，与 .ctrl-row 共用同一套行距/分隔线；
     语言用分段选择（.seg），邮件通知用开关（.switch），退出登录用右对齐按钮（.btn-signout）。
     刻意不写任何灰色小字说明 —— 保持简洁干练（2026-09-19 按需求定）。 */
  .settings-panel { padding-bottom: 18px; }
  /* 注：.settings-panel .ctrl-row:last-of-type { border-bottom: none } 这条已删——
     退出登录改成独立按钮后，最后一个 .ctrl-row（邮件通知）后面还跟着 .settings-signout，
     它不再是 :last-of-type 了；保留这条规则会永远不匹配，等于死代码。
     现在邮件通知行保留分隔线，正好把按钮与设置项分开。 */

  /* 分段选择（语言）：容器浅灰、选中项白底浮起 —— 与 .switch 同一套黑白灰语言 */
  .seg {
    display: inline-flex; align-items: center;
    gap: 2px; padding: 3px;
    background: var(--gray-100);
    border-radius: 12px;
    flex-shrink: 0;
  }
  .seg-btn {
    padding: 8px 16px;
    border: none; border-radius: 9px;
    background: none;
    font-family: inherit; font-size: 13px; font-weight: 600;
    letter-spacing: .2px;
    color: var(--gray-500);
    cursor: pointer;
    transition: color .2s, background .2s, box-shadow .2s;
  }
  .seg-btn:hover { color: var(--ink); }
  .seg-btn.on {
    background: var(--paper);
    color: var(--ink);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .08);
  }

  /* 开关 */
  .switch {
    width: 44px; height: 26px; flex-shrink: 0;
    border: none; border-radius: 99px;
    background: var(--gray-200);
    position: relative;
    cursor: pointer;
    transition: background .25s;
  }
  .switch::after {
    content: "";
    position: absolute; top: 3px; left: 3px;
    width: 20px; height: 20px; border-radius: 50%;
    background: var(--paper);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
    transition: transform .25s;
  }
  .switch.on { background: var(--ink); }
  .switch.on::after { transform: translateX(18px); }

  /* 会员权益（原「会员」面板的 pill 列表；面板并入个人资料后只留这组样式） */
  .pill-list { margin-top: 16px; display: flex; flex-direction: column; gap: 10px; }
  .pill {
    display: flex; align-items: center; gap: 12px;
    background: var(--gray-50);
    border: 1px solid var(--gray-100);
    border-radius: 14px;
    padding: 13px 16px;
    font-size: 14px; font-weight: 500;
  }
  .pill .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ink); flex-shrink: 0; }
  .pill.off { color: var(--gray-500); font-weight: 400; }
  .pill.off .dot { background: var(--gray-300); }

  /* ===================== 个人资料（会籍卡第一屏） ===================== */
  .profile { margin-top: 24px; }
  .profile-top { display: flex; align-items: center; gap: 16px; margin-top: 16px; }
  /* 页面内的大头像：复用 .avatar 的画法，只换尺寸（圆边修复同样生效） */
  .profile-avatar { width: 68px; height: 68px; font-size: 26px; flex-shrink: 0; cursor: default; }
  .profile-avatar:hover, .profile-avatar:active { transform: none; }
  .profile-idbox { min-width: 0; }
  .profile-name {
    font-size: 22px; font-weight: 700; letter-spacing: -.3px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .profile-sub { margin-top: 4px; font-size: 13px; color: var(--gray-500); }

  /* ---------- 修改资料（二级页面）----------
     表单改为竖向单列并限宽 420px：原来「输入框 + 保存」挤在一行，在 900px 宽的面板里
     输入框会被拉成一条长条，看着像没排完版；限宽后是一块独立的编辑区，
     和站内其他面板的留白语言一致。 */
  .profile-edit { margin-top: 24px; }
  .name-form { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; max-width: 420px; }
  .field-label { font-size: 12.5px; font-weight: 600; color: var(--gray-700); }
  .field-desc { font-size: 12.5px; color: var(--gray-500); line-height: 1.55; }
  .name-input {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--gray-200);
    border-radius: 12px;
    font: inherit; font-size: 15px;
    color: var(--ink);
    background: var(--paper);
    outline: none;
    transition: border-color .2s, background .2s;
  }
  .name-input::placeholder { color: var(--gray-300); }
  .name-input:focus { border-color: var(--ink); }
  .btn-primary {
    align-self: flex-start;
    min-width: 132px;
    margin-top: 4px;
    padding: 12px 26px;
    background: var(--ink); color: var(--paper);
    border: none; border-radius: 12px;
    font: inherit; font-size: 13px; font-weight: 600;
    cursor: pointer;
    transition: opacity .2s;
  }
  .btn-primary:hover { opacity: .85; }
  .btn-primary:disabled { background: var(--gray-200); color: var(--gray-500); cursor: not-allowed; }
  .profile-hint { font-size: 12.5px; color: var(--gray-500); }
  #profile > .profile-hint { margin-top: 14px; }
  .profile-hint.ok  { color: var(--ink); }
  .profile-hint.bad { color: #b3261e; }

  .profile-fields { margin-top: 18px; border-top: 1px solid var(--gray-100); }
  .field-row {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 13px 2px;
    border-bottom: 1px solid var(--gray-100);
  }
  .field-row:last-child { border-bottom: none; }
  .field-row .k { font-size: 13.5px; color: var(--gray-500); flex-shrink: 0; }
  .field-row .v {
    font-size: 14px; font-weight: 600;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }

  /* 点头像进来时的落点动画：一圈向外淡开的光晕（说明「就是这里」）。
     刻意画在 ::after 上，而不是直接给 .profile 加 animation ——
     .profile 自带 .rise 入场动画，一旦覆盖/还原 animation，.rise 会重播
     （面板会莫名再淡入一次）。伪元素与它互不干扰，加/去 .flash 都只影响光圈。 */
  .profile { position: relative; }
  .profile.flash::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;   /* 跟随 .panel 的 20px 圆角 */
    pointer-events: none;
    animation: profileFlash .8s cubic-bezier(.22, .61, .36, 1) both;
  }
  @keyframes profileFlash {
    0%   { box-shadow: 0 0 0 0 rgba(17, 17, 17, .22); }
    60%  { box-shadow: 0 0 0 12px rgba(17, 17, 17, 0); }
    100% { box-shadow: 0 0 0 0 rgba(17, 17, 17, 0); }
  }
  /* 降低动效偏好：只留一圈静态细描边，不做扩散 */
  @media (prefers-reduced-motion: reduce) {
    .profile.flash::after { animation: none; box-shadow: 0 0 0 3px rgba(17, 17, 17, .12); }
  }

  /* Toast */
  .toast {
    position: fixed; bottom: 28px; left: 50%;
    transform: translate(-50%, 12px);
    padding: 11px 20px;
    background: var(--ink); color: var(--paper);
    border-radius: 99px;
    font-size: 13px; font-weight: 500;
    opacity: 0; pointer-events: none;
    transition: opacity .3s, transform .3s;
    z-index: 50;
  }
  .toast.show { opacity: 1; transform: translate(-50%, 0); }

  /* 入场动画（纯 CSS，错峰） */
  .rise { animation: rise .7s cubic-bezier(.22, .61, .36, 1) both; }
  .rise-1 { animation-delay: .05s; }
  .rise-2 { animation-delay: .12s; }
  .rise-3 { animation-delay: .19s; }
  .rise-4 { animation-delay: .26s; }
  .rise-5 { animation-delay: .33s; }
  @keyframes rise {
    from { opacity: 0; transform: translateY(14px); }
  }

  /* 响应式 */
  @media (max-width: 900px) {
    /* 侧栏与主内容改为上下堆叠，并整体让出固定顶栏的高度 */
    .layout { flex-direction: column; padding-top: 64px; }
    aside {
      /* 手机端导航吸顶：下滑时菜单固定在顶栏下方不动（z 高于内容、低于顶栏） */
      position: sticky;
      top: 64px;
      z-index: 25;
      width: 100%;
      height: auto;
      flex-direction: row;
      overflow-x: auto;
      border-right: none;
      border-bottom: 1px solid var(--gray-100);
      padding: 10px 16px;
      gap: 6px;
    }
    .nav-label, .nav-foot { display: none; }
    .nav-item { white-space: nowrap; }
    /* 移动端：二级菜单并入横向滚动条（子项禁换行、父按钮不占满整行、
       与子项同高度对齐——中文标签下排版才不乱） */
    .nav-sub-item { white-space: nowrap; }
    .nav-parent { width: auto; padding: 8px 12px; }
    .nav-group { flex-direction: row; align-items: center; gap: 6px; }
    .nav-sub { flex-direction: row; margin: 0; padding-left: 0; gap: 6px; }
    .nav-chev { display: none; }
    main { margin-left: 0; padding: 20px 20px 56px; }
    section { scroll-margin-top: 124px; }
    .grid-2 { grid-template-columns: 1fr; }
    /* 手机上银行卡优先展示在 Card usage 上方 */
    .grid-2 > div:nth-child(2) { order: -1; }
    /* 画廊：列数与 gap 由 JS 断点控制，此处仅调小间距 */
    .gallery-grid { gap: 12px; }
    .g-col { gap: 12px; }
  }
  @media (max-width: 520px) {
    /* 旧「.brand span{display:none}」已删：品牌改纯文本后手机端也显示 AESTHSIA（2026-09-19） */
    .gallery-grid { gap: 10px; }
    .g-col { gap: 10px; }
    /* 小屏顶栏压缩（顶栏现在只有铃铛 + 头像，按钮一多才需要压缩） */
    .head-right { gap: 8px; }
    /* 设置页：语言分段与中文标签在小屏上收紧一点，避免撑破行 */
    .seg-btn { padding: 7px 11px; font-size: 12.5px; }
    .ctrl-name { font-size: 14px; }
    .qa-grid { grid-template-columns: repeat(2, 1fr); }
    .balance-amount { font-size: 32px; }
    /* 修改资料：编辑区占满宽度，保存按钮也满宽（拇指好点） */
    .name-form { max-width: none; }
    .name-form .btn-primary { align-self: stretch; width: 100%; }
    .profile-avatar { width: 56px; height: 56px; font-size: 22px; }
  }

  @media (prefers-reduced-motion: reduce) {
    * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
    html { scroll-behavior: auto; }
  }

  /* ===================== USE 按钮 / 额度 ===================== */
  .panel-head { display: flex; align-items: center; }
  .use-btn {
    margin-left: auto;
    padding: 8px 20px;
    background: var(--ink);
    color: var(--paper);
    border: none;
    border-radius: 99px;
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    cursor: pointer;
    transition: opacity .2s;
  }
  .use-btn:hover { opacity: .85; }
  .use-btn:disabled { background: var(--gray-200); color: var(--gray-500); cursor: not-allowed; }
  /* 次级按钮（修改资料的「返回」）：白底描边，不与主操作抢视觉 */
  .use-btn.ghost {
    background: var(--paper);
    color: var(--gray-500);
    border: 1px solid var(--gray-300);
  }
  .use-btn.ghost:hover { opacity: 1; color: var(--ink); border-color: var(--ink); }

  /* ---------- 可折叠面板标题（工单支持，默认折叠）----------
     整条标题即按钮（点哪都能开合）；箭头方向沿用侧栏子菜单的约定：
     收起 = 指右（rotate -90deg），展开 = 指下。 */
  .collapse-btn {
    display: flex; align-items: center; gap: 8px;
    padding: 0; margin: 0;
    background: none; border: none; font: inherit;
    color: inherit; cursor: pointer; text-align: left;
  }
  .collapse-chev {
    width: 15px; height: 15px; flex-shrink: 0;
    color: var(--gray-500);
    transition: transform .2s;
  }
  #support.collapsed .collapse-chev { transform: rotate(-90deg); }
  .collapse-btn:hover .collapse-chev,
  .collapse-btn:hover .panel-label { color: var(--ink); }
  /* 收起时的条数提示（展开后能看到列表，就不再显示） */
  .collapse-count {
    display: none;
    align-items: center; justify-content: center;
    min-width: 18px; height: 18px; padding: 0 6px;
    border-radius: 99px;
    background: var(--gray-100); color: var(--gray-500);
    font-size: 11px; font-weight: 700; letter-spacing: 0;
  }
  #support.collapsed .collapse-count:not(:empty) { display: inline-flex; }
  /* .balance-exhausted（那条红字「额度已用完 — 请联系管理员续费」）已随元素删除，
     规则一并清掉（2026-09-19）；home.js 里的赋值也已做空值保护。 */
  .act-empty { padding: 18px 4px; color: var(--gray-500); font-size: 13.5px; }

  /* ===================== 通知徽标（数字） ===================== */
  .icon-btn .badge {
    width: auto;
    height: 16px;
    min-width: 16px;
    padding: 0 4px;
    border-radius: 99px;
    background: var(--ink);
    color: var(--paper);
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    display: none;
    align-items: center;
    justify-content: center;
  }
  .icon-btn .badge.show { display: flex; }

  /* ===================== 通知面板 ===================== */
  .notif-panel {
    position: fixed;
    top: 58px;
    right: 28px;
    width: 340px;
    max-width: calc(100vw - 24px);
    background: var(--paper);
    border: 1px solid var(--gray-100);
    border-radius: 18px;
    box-shadow: 0 14px 36px rgba(0, 0, 0, .12);
    z-index: 40;
    overflow: hidden;
  }
  .notif-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 18px 12px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .5px;
  }
  .notif-readall {
    padding: 3px 10px;
    background: var(--gray-100);
    border: none;
    border-radius: 99px;
    font: inherit;
    font-size: 11px;
    font-weight: 600;
    color: var(--ink);
    cursor: pointer;
    transition: background .15s, opacity .15s;
  }
  .notif-readall:hover:enabled { background: var(--gray-200); }
  .notif-readall:disabled { opacity: .45; cursor: default; }
  .notif-item {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 13px 18px;
    border-top: 1px solid var(--gray-100);
    cursor: pointer;
    transition: background .15s;
  }
  .notif-item:hover { background: var(--gray-50); }
  .notif-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ink);
    margin-top: 5px;
    flex-shrink: 0;
  }
  .notif-item.read .notif-dot { background: var(--gray-300); }
  .notif-item .n-t { font-size: 14px; font-weight: 600; }
  .notif-item .n-s { margin-top: 3px; font-size: 12.5px; color: var(--gray-500); }
  .notif-empty { padding: 26px 18px; text-align: center; color: var(--gray-500); font-size: 13px; }

  /* ===================== 弹窗 ===================== */
  .modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(17, 17, 17, .4);
    backdrop-filter: blur(3px);
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
  }
  .modal {
    width: 100%;
    max-width: 460px;
    max-height: 85vh;
    overflow-y: auto;
    background: var(--paper);
    border-radius: 20px;
    padding: 26px;
    animation: rise .25s ease both;
  }
  .modal h3 { font-size: 20px; font-weight: 700; letter-spacing: -.3px; }
  .modal-sub { margin-top: 8px; font-size: 13.5px; color: var(--gray-500); line-height: 1.5; }
  .modal textarea {
    width: 100%;
    margin-top: 16px;
    border: 1px solid var(--gray-200);
    border-radius: 12px;
    padding: 12px 14px;
    font: inherit;
    font-size: 14px;
    resize: vertical;
    min-height: 100px;
    outline: none;
    transition: border-color .2s;
  }
  .modal textarea:focus { border-color: var(--ink); }
  .req-counter { text-align: right; font-size: 11.5px; color: var(--gray-300); margin-top: 4px; }
  .captcha-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 14px;
  }
  .captcha-img {
    height: 44px;
    width: 132px;
    flex-shrink: 0;
    border: 1px solid var(--gray-200);
    border-radius: 10px;
    background: var(--gray-50);
    cursor: pointer;
  }
  .captcha-q {
    height: 44px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    padding: 0 14px;
    border: 1px solid var(--gray-200);
    border-radius: 10px;
    background: var(--gray-50);
    font-size: 15px;
    font-weight: 600;
  }
  .captcha-refresh {
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    border: 1px solid var(--gray-200);
    border-radius: 10px;
    background: none;
    font-size: 16px;
    color: var(--gray-500);
    cursor: pointer;
    transition: color .2s, border-color .2s;
  }
  .captcha-refresh:hover { color: var(--ink); border-color: var(--ink); }
  .captcha-input {
    flex: 1;
    min-width: 0;
    height: 38px;
    border: 1px solid var(--gray-200);
    border-radius: 10px;
    padding: 0 12px;
    font: inherit;
    font-size: 14px;
    outline: none;
    text-transform: uppercase;
  }
  .captcha-input:focus { border-color: var(--ink); }
  .modal-consume { margin-top: 14px; font-size: 13px; color: var(--gray-500); }
  .modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }
  .btn-ghost {
    padding: 10px 18px;
    border: 1px solid var(--gray-300);
    border-radius: 10px;
    background: none;
    font: inherit;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--gray-500);
    cursor: pointer;
  }
  .btn-ghost:hover { color: var(--ink); border-color: var(--ink); }
  .btn-dark {
    padding: 10px 18px;
    border: none;
    border-radius: 10px;
    background: var(--ink);
    color: var(--paper);
    font: inherit;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
  }
  .btn-dark:disabled { opacity: .4; cursor: not-allowed; }
  .modal-error { margin-top: 12px; font-size: 12.5px; color: #b3261e; min-height: 16px; }
  .label-quote {
    margin-top: 16px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--gray-500);
  }
  .ticket-status { margin-top: 6px; font-size: 12.5px; color: var(--gray-500); }
  .quote {
    margin-top: 6px;
    background: var(--gray-50);
    border: 1px solid var(--gray-100);
    border-radius: 12px;
    padding: 12px 14px;
    font-size: 14px;
    line-height: 1.55;
    white-space: pre-wrap;
    word-break: break-word;
  }
  .quote.reply { background: var(--ink); color: var(--paper); border-color: var(--ink); }
  .quote .reply-time { margin-top: 8px; font-size: 11.5px; opacity: .6; }
  .stat-grid { margin-top: 14px; display: flex; flex-direction: column; }
  .stat-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding: 13px 0;
    border-bottom: 1px solid var(--gray-100);
  }
  .stat-row .k { color: var(--gray-500); }
  .stat-row .v { font-weight: 600; }

  /* 快捷操作改为 2 列（正式功能只剩两个） */
  .qa-grid { grid-template-columns: repeat(2, 1fr); }

  @media (max-width: 520px) {
    .notif-panel { right: 12px; top: 54px; }
  }

/* 全局：任何元素带 hidden 属性必须不可见
   （.greet-row 等 display:flex 类规则会压过 UA 的 [hidden]，导致画廊视图下问候残留） */
[hidden] { display: none !important; }

/* ===================== 画廊图片详情查看器 ===================== */
.viewer {
  position: fixed;
  inset: 0;
  z-index: 45; /* 盖过 notif-panel(40)/header(30)，低于 toast(50)：轮询提示在深色底上仍可见 */
  background: rgba(10, 12, 16, .94);
  display: flex;
  flex-direction: column;
}
/* 手机端关闭按钮：极简半透明毛玻璃，仅 ≤900px 显示
   （放大后图片占满屏幕时点空白退不出去，这是退路） */
.viewer-close {
  display: none;
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 2;
  width: 42px; height: 42px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .25);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: #fff;
  cursor: pointer;
  transition: background .2s;
}
.viewer-close:active { background: rgba(255, 255, 255, .22); }
.viewer-close svg { width: 18px; height: 18px; }
/* 注意：这条必须放在 .viewer-close 基础规则之后（CSS 同优先级后者胜，
   放前面会被基础规则的 display:none 覆盖，按钮在手机端永远不显示） */
@media (max-width: 900px) {
  .viewer-close { display: flex; }
}
.viewer-top {
  display: flex;
  align-items: center;
  padding: 14px 18px;
}
.viewer-title {
  flex: 1;
  min-width: 0;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* 注意：stage 用 display:flex + img margin:auto 居中——
   align-items/justify-content:center 在内容溢出时会把溢出部分
   裁到容器左上不可达（手机端放大后显示不全的根因）；margin:auto
   在溢出时自动归零，内容可完整滚动到四边 */
.viewer-stage {
  flex: 1;
  min-height: 0;
  overflow: auto;
  display: flex;
}
.viewer-stage img {
  margin: auto;
  max-width: 100%;
  max-height: 100%;
  cursor: zoom-in;
  touch-action: manipulation;
  user-select: none;
}
.viewer-stage img.zoomed {
  max-width: none;   /* 必须取消上限，否则放大被默认 max-width:100% 卡死 */
  max-height: none;
  width: auto;
  height: auto;
  cursor: zoom-out;
}
.viewer-hint {
  padding: 10px;
  text-align: center;
  font-size: 12px;
  color: rgba(255, 255, 255, .55);
}

/* ===================== 工单（Support） ===================== */
.ticket-list { margin-top: 14px; }
.tk-item {
  border: 1px solid var(--gray-100);
  border-radius: 16px;
  padding: 16px 18px;
  margin-bottom: 12px;
}
.tk-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tk-id { font-size: 13.5px; font-weight: 700; letter-spacing: .3px; }
.tk-time { font-size: 12px; color: var(--gray-500); }
.tk-status {
  margin-left: auto;
  padding: 4px 11px;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  background: var(--gray-100);
  color: var(--gray-700);
}
.tk-status.replied { background: var(--ink); color: var(--paper); }
.tk-status.closed { background: var(--gray-200); color: var(--gray-500); }
.tk-subject { margin-top: 10px; font-size: 14.5px; font-weight: 600; }
.tk-message {
  margin-top: 4px;
  font-size: 13px;
  color: var(--gray-700);
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
}
.tk-quota { margin-top: 8px; font-size: 12px; color: var(--gray-500); }
.tk-reply {
  margin-top: 10px;
  background: var(--ink);
  color: var(--paper);
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 13px;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
}
.tk-reply .tk-reply-time { display: block; margin-top: 8px; font-size: 11.5px; opacity: .6; }
.tk-empty { padding: 18px 4px; color: var(--gray-500); font-size: 13.5px; }

/* 工单弹窗：标题输入框 */
.modal input.req-subject {
  width: 100%;
  margin-top: 16px;
  border: 1px solid var(--gray-200);
  border-radius: 12px;
  padding: 12px 14px;
  font: inherit;
  font-size: 14px;
  outline: none;
  transition: border-color .2s;
}
.modal input.req-subject:focus { border-color: var(--ink); }

/* ===================== 主页视图：大字号标题 + 成员头像网格 ===================== */
.home-hero { padding-top: 8px; }
/* 醒目大字号：随视口自适应，全实心（现代极简） */
.home-title {
  margin-top: 14px;
  font-size: clamp(64px, 11vw, 132px);
  font-weight: 800;
  letter-spacing: -.05em;
  line-height: .92;
  user-select: none;
}
.home-title span { display: block; }

.home-members { margin-top: 56px; }

/* 成员头像：纯圆形头像，flex 自动换行自适应排布（不滚动），特殊用户排在最前 */
.member-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 16px;
}
.m-avatar {
  position: relative;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--gray-100);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; font-weight: 700; color: var(--gray-500);
  /* 不能 overflow:hidden —— 会裁掉特殊用户的光晕（::after inset:-9px） */
  user-select: none;
}
.m-avatar img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 50%;
  z-index: 1;      /* 在光晕(0)之上 */
}

/* ===================== 特殊用户头像：柔光渐变晕染（无硬边内圈 / 无亮面扫光） =====================
   与 contributors.html 同一技术：conic-gradient 起始角绑定自定义属性 --a，
   @keyframes 驱动 --a 从 0deg 转到 360deg，渐变沿圆环旋转流动。
   - 唯一光晕层 ::after：conic 彩虹 + 径向 alpha 遮罩（36% → 71% 平滑衰减、
     止于元素边缘处 alpha≈0）+ blur —— 柔光从头像皮下自然泛起，
     外缘渐隐没有硬边，也没有贴脸的内圈描边；
   - 呼吸脉动 halo-pulse（透明度 + 轻微缩放）；
   - 分层：光晕(0) < 头像图(1)。
   头像本体不缩 —— 与普通头像尺寸完全一致，不错位。
   不支持 @property 的旧浏览器退化为静态光晕，不影响排版。 */
@property --a {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
@keyframes rainbow-spin { to { --a: 360deg; } }
@keyframes halo-pulse {
  from { opacity: .79; transform: scale(1); }
  to   { opacity: 1; transform: scale(1.09); }
}
.rainbow-avatar::after {
  content: "";
  position: absolute;
  inset: -13px;
  border-radius: 50%;
  pointer-events: none;
  --a: 0deg;  /* 无 @property 的旧浏览器也有基础值 → 静态光晕而非整条渐变失效 */
  z-index: 0; /* 垫在头像图(1)之下，透明处自然让位 */
  background: conic-gradient(from var(--a),
    #ff6b6b 0deg, #ffa94d 50deg, #ffd43b 110deg,
    #69db7c 180deg, #4dabf7 245deg, #9775fa 300deg, #ff6b6b 360deg);
  /* 径向 alpha 遮罩：衰减起点藏在头像皮下、终点落在元素边缘（alpha≈0），
     过渡连续无硬边 —— 不再用 mask-composite 圆环 */
  -webkit-mask: radial-gradient(circle, rgba(0,0,0,.95) 43%, rgba(0,0,0,0) 55%);
  mask: radial-gradient(circle, rgba(0,0,0,.95) 43%, rgba(0,0,0,0) 55%);
  filter: blur(20px) saturate(2.5) brightness(1.08);
  animation:
    rainbow-spin 2s linear infinite,
    halo-pulse 1.5s ease-in-out infinite alternate;
  /* 多头像错峰：渲染时给每个头像设 --halo-delay（负数 = 从周期中段开始），
     旋转与呼吸不再全体同步；未设置时默认 0（顶栏单人头像无需错峰） */
  animation-delay: var(--halo-delay, 0s);
}
/* 参数: 光圈大小=13px 最大透明度=1 最小透明度=0.79 动画速度=2s 呼吸周期=1.5s 呼吸幅度=1.09 模糊=20px 衰减=43→55% 饱和度=2.5 亮度=1.08 配色=默认彩虹 */

/* header 头像：QQ 头像图铺满圆形（.avatar 底是纯色，img 盖在上面）；
   提升到光晕层之上，特殊用户头像同样流光描边 */
.avatar img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  border-radius: 50%;
  object-fit: cover;
  z-index: 1;
}

/* ===================== 应用（通用 → 应用）：小卡片启动器 ===================== */
.apps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 14px;
  margin-top: 16px;
}
.app-card {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 18px;
  background: var(--paper);
  border: 1px solid var(--gray-100);
  border-radius: 16px;
  text-decoration: none;
  color: inherit;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.app-card:hover {
  transform: translateY(-2px);
  border-color: var(--gray-300);
  box-shadow: 0 10px 24px rgba(17, 17, 19, .08);
}
.app-icon {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: var(--ink);
  color: var(--paper);
  margin-bottom: 8px;
}
.app-icon svg { width: 20px; height: 20px; }
.app-name { font-size: 15px; font-weight: 700; letter-spacing: .2px; }
.app-desc { font-size: 12.5px; color: var(--gray-500); }

@media (max-width: 520px) {
  .apps-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
}