/**
 * ssry-nav.css —— 站点通用顶栏与账号弹窗样式
 *
 * 2026-09-01 从 home.html 抽出，与 ssry-nav.js 配套，
 * 供主页与 adv 等页面共用，保证两边顶栏、充值、个人中心长得一样。
 *
 * 含：顶部导航 / 个人资料弹窗 / 登录注册弹窗 / 个人记录弹窗 / 在线充值弹窗
 *
 * 注意：这里的 .nav 等类名沿用主页的命名。引入本文件的页面
 * 若已有同名类（如 adv 的 .header），两边不冲突 —— adv 顶栏用的是
 * 自己的 .header/.nav-menu，本文件的 .nav 只在主页生效。
 */

/* ==== 顶部导航 ==== */
  /* ==== 顶部导航 ==== */
  .nav {
    position: sticky;
    top: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    height: 64px;
    padding: 0 28px;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(12px);
  }
  .nav .logo {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    font-size: 18px;
    letter-spacing: 1px;
  }
  .nav .logo img { display: block; height: 34px; width: auto; }
  .nav .menu {
    display: flex;
    gap: 4px;
    /* 绝对定位到导航正中：margin auto 只是居中「剩余空间」，
       左右两侧宽度不等（右侧按钮多）时视觉上会偏，绝对定位才是真居中 */
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }
  /**
   * 导航项：所有项共用一套视觉，区别只在「选中与否」。
   *
   * 2026-09-04 重做。原来「首页」是灰底方块、「AI 广告」是行内 style 硬涂的
   * 裸金色字，两个视觉语言并排，金色在这儿也没传达任何信息（既不是选中态、
   * 也不是新功能标记），只是为了显眼而显眼，反而显得像临时加的外链。
   * 现在统一成胶囊：选中项白底黑字（与站点黑金基调里的「白」呼应，对比最强），
   * 未选灰字、hover 浮现深灰底。
   */
  .nav .menu a {
    padding: 7px 16px;
    border-radius: 999px;
    color: #9a9a9a;
    font-size: 14.5px;
    letter-spacing: .2px;
    white-space: nowrap;
    transition: color .18s ease, background .18s ease;
  }
  .nav .menu a:hover {
    color: #fff;
    background: rgba(255, 255, 255, .07);
  }
  .nav .menu a.active {
    background: #fff;
    color: #000;
    font-weight: 600;
  }
  /* 选中项 hover 时保持白底，避免叠加出灰蒙蒙的中间态 */
  .nav .menu a.active:hover {
    background: #fff;
    color: #000;
  }

  .nav .right {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-left: auto;   /* menu 脱离文档流后由它自己贴右 */
  }
  .nav .event-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 16px;
    border: 1px solid #b8962e;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(255, 212, 0, 0.12), rgba(255, 212, 0, 0.04));
    color: #f5c518;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
  }
  .nav .event-btn:hover { border-color: #f5c518; }
  .nav .avatar {
    position: relative;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #fff;
    color: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 16px;
    cursor: pointer;
    user-select: none;
  }
  .nav .avatar .dropdown {
    display: none;
    position: absolute;
    right: 0;
    top: 46px;
    min-width: 120px;
    padding: 6px;
    background: #161616;
    border: 1px solid #2a2a2a;
    border-radius: 10px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
  }
  .nav .avatar.open .dropdown { display: block; }
  .nav .avatar .dropdown div {
    padding: 8px 12px;
    border-radius: 6px;
    color: #ddd;
    font-size: 13px;
    font-weight: 400;
    white-space: nowrap;
  }
  .nav .avatar .dropdown div:hover { background: #2a2a2a; }


  /* ==== 个人资料弹窗 ==== */
  #profileMask {
    position: fixed; inset: 0; z-index: 50000; display: none;
    align-items: center; justify-content: center;
    background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(4px);
  }
  #profileMask.show { display: flex; }
  .pf-card {
    position: relative; width: 440px; max-width: 92vw; max-height: 88vh; overflow-y: auto;
    background: #1c1c1c; border: 1px solid #333; border-radius: 16px;
    padding: 24px; color: #eee;
  }
  .pf-card h3 { margin: 0 0 18px; font-size: 18px; }
  .pf-card .close {
    position: absolute; top: 14px; right: 16px; width: 30px; height: 30px;
    border: none; background: none; color: #999; font-size: 22px; cursor: pointer; line-height: 1;
  }
  .pf-card .close:hover { color: #fff; }
  .pf-head { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
  .pf-avatar {
    position: relative; width: 72px; height: 72px; border-radius: 50%;
    background: linear-gradient(135deg, #ffd400, #ffb700);
    display: flex; align-items: center; justify-content: center;
    font-size: 30px; font-weight: 700; color: #000; cursor: pointer;
    overflow: hidden; flex: none;
  }
  .pf-avatar img { width: 100%; height: 100%; object-fit: cover; }
  .pf-avatar-edit {
    position: absolute; left: 0; right: 0; bottom: 0; height: 22px;
    background: rgba(0,0,0,0.55); color: #fff; font-size: 11px;
    display: flex; align-items: center; justify-content: center;
    opacity: 0; transition: opacity 0.15s;
  }
  .pf-avatar:hover .pf-avatar-edit { opacity: 1; }
  .pf-username { font-size: 17px; font-weight: 600; }
  .pf-reg { font-size: 12px; color: #888; margin-top: 4px; }
  .pf-field { margin-bottom: 14px; }
  .pf-field label { display: block; font-size: 12.5px; color: #999; margin-bottom: 6px; }
  .pf-field input, .pf-field textarea {
    width: 100%; box-sizing: border-box; padding: 9px 11px;
    background: #232323; border: 1px solid #3a3a3a; border-radius: 8px;
    color: #eee; font-size: 14px; font-family: inherit; resize: vertical;
  }
  .pf-field input:focus, .pf-field textarea:focus { outline: none; border-color: #ffd400; }
  .pf-actions { display: flex; justify-content: flex-end; margin: 4px 0; }
  .pf-btn-primary {
    padding: 9px 22px; background: #ffd400; border: none; border-radius: 9px;
    color: #000; font-weight: 600; cursor: pointer; font-size: 14px;
  }
  .pf-btn-primary:hover { background: #ffde3d; }
  .pf-btn-ghost {
    padding: 9px 18px; background: none; border: 1px solid #444; border-radius: 9px;
    color: #ccc; cursor: pointer; font-size: 14px;
  }
  .pf-btn-ghost:hover { background: #2a2a2a; color: #fff; }
  .pf-divider { height: 1px; background: #333; margin: 18px 0; }
  .pf-pwd-title { font-size: 14px; font-weight: 600; margin-bottom: 14px; color: #ddd; }
  .pf-msg { margin-top: 10px; font-size: 13px; min-height: 18px; }
  .pf-msg.ok { color: #7ed07e; }
  .pf-msg.err { color: #ff7b7b; }

  .auth-links {
    display: flex; justify-content: space-between; margin-top: 14px;
  }
  .auth-links a { font-size: 13px; color: #888; text-decoration: none; }
  .auth-links a:hover { color: #ffd400; }

  /* ==== 登录弹窗 ==== */
  .modal-mask {
    position: fixed;
    inset: 0;
    /* 50000：要盖过 adv 工作台里那些 9999~10001 的浮层（图片预览、微信支付弹窗等），
       又低于 99999 的全局通知条，让提示始终可见。
       原值 200 是主页的层级，主页没有高 z-index 元素所以够用，
       放到 adv 里就会被工作台浮层盖住 —— 表现为「点了没反应」。 */
    z-index: 50000;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(6px);
  }
  .modal-mask.show { display: flex; }
  .auth-card {
    position: relative;
    width: 340px;
    padding: 32px 28px;
    background: rgba(20, 20, 20, 0.96);
    border: 1px solid #2a2a2a;
    border-radius: 16px;
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.7);
    animation: pop 0.18s ease-out;
  }
  @keyframes pop {
    from { transform: scale(0.94); opacity: 0; }
    to   { transform: scale(1);    opacity: 1; }
  }
  .auth-card .close {
    position: absolute;
    right: 14px;
    top: 12px;
    border: none;
    background: none;
    color: #666;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
  }
  .auth-card .close:hover { color: #fff; }
  .auth-card h3 {
    margin: 0 0 20px;
    font-size: 18px;
    color: #fff;
    text-align: center;
    font-weight: 600;
  }
  .auth-card .tabs {
    display: flex;
    margin-bottom: 20px;
    background: #111;
    border-radius: 8px;
    padding: 3px;
  }
  .auth-card .tabs button {
    flex: 1;
    padding: 8px 0;
    border: none;
    background: none;
    color: #888;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
  }
  .auth-card .tabs button.active {
    background: #2a2a2a;
    color: #fff;
  }
  .auth-card .field { margin-bottom: 14px; }
  .auth-card input {
    width: 100%;
    padding: 11px 12px;
    background: #111;
    border: 1px solid #333;
    border-radius: 8px;
    color: #eee;
    font-size: 14px;
    outline: none;
  }
  .auth-card input:focus { border-color: #ffd400; }
  .auth-card .submit {
    width: 100%;
    padding: 12px 0;
    margin-top: 6px;
    border: none;
    border-radius: 8px;
    background: #ffd400;
    color: #000;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
  }
  .auth-card .submit:disabled { opacity: 0.5; cursor: default; }
  .auth-card .msg {
    min-height: 20px;
    margin-top: 12px;
    text-align: center;
    font-size: 13px;
    color: #ff6b6b;
  }
  .auth-card .hint {
    margin-top: 4px;
    font-size: 12px;
    color: #555;
  }
  .auth-card .modes {
    display: none;
    gap: 6px;
    margin-bottom: 14px;
  }
  .auth-card .modes button {
    flex: 1;
    padding: 7px 0;
    border: 1px solid #333;
    background: #111;
    color: #888;
    border-radius: 8px;
    cursor: pointer;
    font-size: 12px;
  }
  .auth-card .modes button.active {
    border-color: #ffd400;
    color: #ffd400;
  }
  .auth-card .code-row {
    display: flex;
    gap: 8px;
  }
  .auth-card .code-row input { flex: 1; }
  .auth-card .code-btn {
    flex-shrink: 0;
    padding: 0 14px;
    border: 1px solid #333;
    background: #111;
    color: #ccc;
    border-radius: 8px;
    cursor: pointer;
    font-size: 12px;
    white-space: nowrap;
  }
  .auth-card .code-btn:disabled {
    color: #555;
    cursor: default;
  }
  .auth-card .auth-notice {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid #2a2a2a;
    text-align: center;
  }
  .auth-card .auth-notice p {
    margin: 0 0 6px;
    font-size: 12px;
    line-height: 1.7;
    color: #999;
  }
  .auth-card .auth-notice .warn { color: #ffd400; }
  .auth-card .auth-notice .strong {
    display: inline-block;
    margin-top: 6px;
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    background: #d33;
    padding: 3px 12px;
    border-radius: 6px;
  }
  .auth-card .auth-notice .hl {
    font-weight: 700;
    color: #ffd400;
  }
  .auth-card .auth-notice img {
    display: block;
    width: 124px;
    height: 124px;
    margin: 4px auto 6px;
    border-radius: 8px;
    background: #fff;
    padding: 6px;
    box-sizing: border-box;
  }
  .auth-card .auth-notice .qr-tip { font-size: 12px; color: #666; }

  /* ==== 个人记录弹窗 ==== */
  .rec-card {
    position: relative;
    /* 与画布 canvas.html 的内联定义统一为 960px：
       个人记录是 5 列表格（时间/事项/模型/积分变动/余额），720px 下模型名和
       事项会被挤到换行。此文件为 adv/home/index 共用，三处一起加宽。 */
    width: min(960px, 94vw);
    max-height: 82vh;
    display: flex;
    flex-direction: column;
    padding: 26px 24px 18px;
    background: rgba(20, 20, 20, 0.96);
    border: 1px solid #2a2a2a;
    border-radius: 16px;
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.7);
    animation: pop 0.18s ease-out;
  }
  .rec-card .close {
    position: absolute;
    right: 14px;
    top: 12px;
    border: none;
    background: none;
    color: #666;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
  }
  .rec-card .close:hover { color: #fff; }
  .rec-card h3 {
    margin: 0 0 16px;
    font-size: 17px;
    color: #fff;
    font-weight: 600;
  }
  .rec-scroll {
    overflow: auto;
    border: 1px solid #222;
    border-radius: 10px;
  }
  .rec-card table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    white-space: nowrap;
  }
  .rec-card th, .rec-card td {
    padding: 9px 12px;
    text-align: left;
    border-bottom: 1px solid #1e1e1e;
  }
  .rec-card th {
    position: sticky;
    top: 0;
    background: #1a1a1a;
    color: #888;
    font-weight: 500;
  }
  .rec-card td { color: #ccc; }
  .rec-card tr:last-child td { border-bottom: none; }
  .rec-card .delta-neg { color: #ff8b8b; font-weight: 600; }
  .rec-card .delta-pos { color: #7ed07e; font-weight: 600; }
  .rec-card .rec-empty { padding: 32px; text-align: center; color: #666; }
  .rec-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding-top: 12px;
    font-size: 13px;
    color: #888;
  }
  .rec-pager button {
    padding: 6px 14px;
    border: 1px solid #333;
    background: #1a1a1a;
    color: #ccc;
    border-radius: 8px;
    cursor: pointer;
    font-size: 12px;
  }
  .rec-pager button:disabled { color: #555; cursor: default; }

  /* ==== 在线充值弹窗 ==== */
  .pay-card {
    position: relative;
    width: min(760px, 94vw);
    max-height: 86vh;
    overflow: auto;
    padding: 26px 24px 22px;
    background: rgba(20, 20, 20, 0.96);
    border: 1px solid #2a2a2a;
    border-radius: 16px;
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.7);
    animation: pop 0.18s ease-out;
  }
  .pay-card .close {
    position: absolute;
    right: 14px;
    top: 12px;
    border: none;
    background: none;
    color: #666;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
  }
  .pay-card .close:hover { color: #fff; }
  .pay-card h3 {
    margin: 0 0 16px;
    font-size: 17px;
    color: #fff;
    font-weight: 600;
  }
  .pay-pkgs {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
    margin-bottom: 16px;
  }
  .pay-pkg {
    padding: 14px 12px;
    background: #181818;
    border: 1px solid #2c2c2c;
    border-radius: 12px;
    text-align: center;
    cursor: pointer;
    transition: border-color .12s;
  }
  .pay-pkg:hover { border-color: #555; }
  .pay-pkg.active { border-color: #ffd400; background: rgba(255, 212, 0, 0.06); }
  .pay-pkg .p-name { color: #ccc; font-size: 13px; }
  .pay-pkg .p-credits { color: #ffd400; font-size: 20px; font-weight: 700; margin: 6px 0 2px; }
  .pay-pkg .p-price { color: #888; font-size: 13px; }
  .pay-methods { display: flex; gap: 10px; margin-bottom: 14px; }
  .pay-methods button {
    flex: 1;
    padding: 11px 0;
    border: 1px solid #333;
    background: #181818;
    color: #ddd;
    border-radius: 10px;
    cursor: pointer;
    font-size: 14px;
  }
  .pay-methods button:hover { border-color: #555; }
  .pay-methods button:disabled { opacity: 0.5; cursor: default; }
  .pay-methods .m-ali { color: #4da6ff; }
  .pay-methods .m-wx { color: #52c41a; }
  .pay-result { text-align: center; min-height: 24px; }
  .pay-result .qrbox {
    display: inline-block;
    padding: 12px;
    background: #fff;
    border-radius: 10px;
    margin: 8px 0;
  }
  .pay-result .pay-msg { color: #aaa; font-size: 13px; margin-top: 6px; }
  .pay-result .pay-ok { color: #7ed07e; font-size: 15px; font-weight: 600; }
  .pay-cardkey { margin-top: 16px; border-top: 1px solid #232323; padding-top: 12px; }
  .pay-cardkey .ck-title { color: #888; font-size: 13px; margin-bottom: 8px; }
  .pay-cardkey .ck-row { display: flex; gap: 8px; }
  .pay-cardkey input {
    flex: 1;
    padding: 10px 12px;
    background: #181818;
    border: 1px solid #2c2c2c;
    border-radius: 10px;
    color: #eee;
    font-size: 13px;
    letter-spacing: 1px;
    outline: none;
  }
  .pay-cardkey input:focus { border-color: #555; }
  .pay-cardkey button {
    padding: 0 22px;
    border: 1px solid #4a3f10;
    background: rgba(255, 212, 0, 0.08);
    color: #ffd400;
    border-radius: 10px;
    cursor: pointer;
    font-size: 14px;
  }
  .pay-cardkey button:hover { background: rgba(255, 212, 0, 0.14); }
  .pay-cardkey button:disabled { opacity: 0.5; cursor: default; }
  .pay-cardkey .ck-msg { min-height: 18px; margin-top: 8px; font-size: 13px; color: #aaa; }
  .pay-history { margin-top: 16px; border-top: 1px solid #232323; padding-top: 12px; }
  .pay-history .ph-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
  }
  .pay-history .ph-title { color: #888; font-size: 13px; }
  .pay-history .ph-export {
    padding: 4px 12px;
    border: 1px solid #333;
    background: #1a1a1a;
    color: #bbb;
    border-radius: 8px;
    cursor: pointer;
    font-size: 12px;
  }
  .pay-history .ph-export:hover { border-color: #555; color: #fff; }
  .pay-history table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
    white-space: nowrap;
  }
  .pay-history th, .pay-history td {
    padding: 6px 8px;
    text-align: left;
    border-bottom: 1px solid #1d1d1d;
    color: #bbb;
  }
  .pay-history th { color: #777; font-weight: 500; }
  .pay-history tr:last-child td { border-bottom: none; }
  .pay-history .ph-no {
    font-family: ui-monospace, Menlo, Consolas, monospace;
    font-size: 11.5px;
    color: #8a8a8a;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: help;
  }
  .pay-history .st-paid { color: #7ed07e; }
  .pay-history .st-pending { color: #e8b339; }
  .pay-history .st-closed { color: #777; }
  .pay-history .ph-empty { color: #666; text-align: center; padding: 10px; }
  .pay-history .ph-pager {
    display: flex;
    justify-content: center;
    gap: 12px;
    align-items: center;
    padding-top: 8px;
    color: #777;
    font-size: 12px;
  }
  .pay-history .ph-pager button {
    padding: 3px 10px;
    border: 1px solid #333;
    background: #1a1a1a;
    color: #ccc;
    border-radius: 6px;
    cursor: pointer;
    font-size: 12px;
  }
  .pay-history .ph-pager button:disabled { color: #555; cursor: default; }