/**
 * 用户中心视觉重新设计。同 account.css 的说明：改用当前实际生效的设计变量
 * （tokens.css），跟站点整体的深色玻璃拟态风格保持一致——原来这份文件引用的
 * --wpnav-card-bg / --wpnav-theme-color 等变量在新版设计系统里根本不存在，
 * 页面因此掉回了浏览器默认样式。class名/data属性一个没动，JS交互不受影响。
 */
.wpnav-user-center {
    background: var(--wpnav-bg-elevated, #12141f);
    border: 1px solid var(--wpnav-border, rgba(255,255,255,.08));
    border-radius: var(--wpnav-radius-lg, 24px);
    overflow: hidden;
    box-shadow: var(--wpnav-shadow-card, 0 4px 24px rgba(0,0,0,.35));
}
.wpnav-uc-tabs {
    display: flex;
    gap: 4px;
    padding: 10px;
    border-bottom: 1px solid var(--wpnav-border, rgba(255,255,255,.08));
    background: var(--wpnav-surface, rgba(255,255,255,.03));
    overflow-x: auto;
}
.wpnav-uc-tab {
    background: transparent;
    border: 1px solid transparent;
    padding: 10px 18px;
    font-size: 13.5px;
    font-weight: 600;
    border-radius: var(--wpnav-radius-pill, 999px);
    cursor: pointer;
    color: var(--wpnav-text-dim, #9296ab);
    white-space: nowrap;
    transition: all .16s ease;
}
.wpnav-uc-tab:hover { color: var(--wpnav-text, #e8e9f0); background: var(--wpnav-surface-hover, rgba(255,255,255,.08)); }
.wpnav-uc-tab.is-active {
    color: var(--wpnav-text, #e8e9f0);
    background: var(--wpnav-glass-bg-hover, rgba(255,255,255,.14));
    border: 1px solid var(--wpnav-glass-border-hover, rgba(255,255,255,.28));
    backdrop-filter: var(--wpnav-glass-blur, blur(16px) saturate(180%));
    -webkit-backdrop-filter: var(--wpnav-glass-blur, blur(16px) saturate(180%));
    box-shadow: var(--wpnav-glass-highlight, inset 0 1px 0 rgba(255,255,255,.28));
}
.wpnav-uc-panel { display: none; padding: 26px 28px; color: var(--wpnav-text, #e8e9f0); }
.wpnav-uc-panel.is-active { display: block; }
.wpnav-uc-panel p { color: var(--wpnav-text-dim, #9296ab); font-size: 13.5px; }

/* ---- 我的收藏 ---- */
.wpnav-fav-cat-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.wpnav-fav-cat-tab, .wpnav-fav-cat-add {
    background: var(--wpnav-surface, rgba(255,255,255,.04));
    border: 1px solid var(--wpnav-border, rgba(255,255,255,.08));
    color: var(--wpnav-text, #e8e9f0);
    padding: 7px 16px;
    border-radius: 999px;
    font-size: 12.5px;
    cursor: pointer;
    transition: all .16s ease;
}
.wpnav-fav-cat-tab:hover, .wpnav-fav-cat-add:hover { border-color: var(--wpnav-accent-a, #7c5cff); }
.wpnav-fav-cat-tab.is-active {
    background: var(--wpnav-glass-bg-hover, rgba(255,255,255,.14));
    color: var(--wpnav-text, #e8e9f0);
    border-color: var(--wpnav-glass-border-hover, rgba(255,255,255,.28));
    backdrop-filter: var(--wpnav-glass-blur, blur(16px) saturate(180%));
    -webkit-backdrop-filter: var(--wpnav-glass-blur, blur(16px) saturate(180%));
    box-shadow: var(--wpnav-glass-highlight, inset 0 1px 0 rgba(255,255,255,.28));
    font-weight: 700;
}
.wpnav-fav-cat-add { font-weight: 700; }
.wpnav-fav-cat-panel { display: none; }
.wpnav-fav-cat-panel.is-active { display: block; }
.wpnav-fav-list { list-style: none; margin: 0 0 14px; padding: 0; }
.wpnav-fav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--wpnav-border, rgba(255,255,255,.08));
    border-radius: var(--wpnav-radius-sm, 10px);
    margin-bottom: 8px;
    background: var(--wpnav-surface, rgba(255,255,255,.03));
    transition: border-color .16s ease, background .16s ease;
}
.wpnav-fav-item:hover { background: var(--wpnav-surface-hover, rgba(255,255,255,.06)); border-color: var(--wpnav-border, rgba(255,255,255,.14)); }
.wpnav-fav-drag { color: var(--wpnav-text-faint, #63667a); cursor: grab; }
.wpnav-fav-item a { flex: 1; text-decoration: none; color: inherit; font-size: 13.5px; }
.wpnav-fav-remove { border: none; background: transparent; color: var(--wpnav-text-faint, #63667a); cursor: pointer; font-size: 18px; line-height: 1; padding: 2px 4px; }
.wpnav-fav-remove:hover { color: #f87171; }
.wpnav-fav-import { margin-top: 14px; display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.wpnav-fav-import .description { color: var(--wpnav-text-faint, #63667a); font-size: 12px; }

.wpnav-fav-add-btn,
.wpnav-uc-panel .button {
    padding: 8px 16px;
    border: 1px solid var(--wpnav-border, rgba(255,255,255,.08));
    border-radius: var(--wpnav-radius-sm, 10px);
    background: var(--wpnav-surface, rgba(255,255,255,.04));
    color: var(--wpnav-text, #e8e9f0);
    font-size: 13px;
    cursor: pointer;
    transition: all .16s ease;
}
.wpnav-fav-add-btn:hover,
.wpnav-uc-panel .button:hover { background: var(--wpnav-surface-hover, rgba(255,255,255,.08)); }
.wpnav-uc-panel .button-primary {
    background: var(--wpnav-glass-bg, rgba(255,255,255,.08));
    color: var(--wpnav-text, #e8e9f0);
    border: 1px solid var(--wpnav-glass-border, rgba(255,255,255,.2));
    backdrop-filter: var(--wpnav-glass-blur, blur(16px) saturate(180%));
    -webkit-backdrop-filter: var(--wpnav-glass-blur, blur(16px) saturate(180%));
    box-shadow: var(--wpnav-glass-highlight, inset 0 1px 0 rgba(255,255,255,.28));
    font-weight: 700;
}
.wpnav-uc-panel .button-primary:hover { background: var(--wpnav-glass-bg-hover, rgba(255,255,255,.16)); border-color: var(--wpnav-glass-border-hover, rgba(255,255,255,.4)); }

/* ---- 我的网址 ---- */
.wpnav-my-sites-table { width: 100%; border-collapse: collapse; color: var(--wpnav-text, #e8e9f0); }
.wpnav-my-sites-table th {
    text-align: left;
    padding: 10px 10px;
    font-size: 12px;
    font-weight: 600;
    color: var(--wpnav-text-faint, #63667a);
    border-bottom: 1px solid var(--wpnav-border, rgba(255,255,255,.08));
}
.wpnav-my-sites-table td {
    text-align: left;
    padding: 12px 10px;
    border-bottom: 1px solid var(--wpnav-border, rgba(255,255,255,.06));
    font-size: 13.5px;
}
.wpnav-my-sites-table tr:last-child td { border-bottom: none; }
.wpnav-link-button { border: none; background: transparent; color: #f87171; cursor: pointer; text-decoration: none; padding: 0; font-size: 13px; }
.wpnav-link-button:hover { text-decoration: underline; }

/* ---- 通知 ---- */
.wpnav-notification-list { list-style: none; margin: 0; padding: 0; }
.wpnav-notification-list li {
    padding: 12px 0;
    border-bottom: 1px solid var(--wpnav-border, rgba(255,255,255,.06));
    font-size: 13.5px;
    color: var(--wpnav-text, #e8e9f0);
}
.wpnav-notification-list li:last-child { border-bottom: none; }
.wpnav-notification-time { color: var(--wpnav-text-faint, #63667a); font-size: 12px; margin-right: 12px; }

/* ---- 安全设置 ---- */
.wpnav-uc-panel #wpnav-change-password-form .wpnav-field label { color: var(--wpnav-text-dim, #9296ab); font-size: 12.5px; font-weight: 600; margin-bottom: 7px; display: block; }
.wpnav-uc-panel #wpnav-change-password-form input[type="password"] {
    width: 100%;
    max-width: 320px;
    padding: 11px 14px;
    background: var(--wpnav-surface, rgba(255,255,255,.04));
    border: 1px solid var(--wpnav-border, rgba(255,255,255,.08));
    border-radius: var(--wpnav-radius-sm, 10px);
    color: var(--wpnav-text, #e8e9f0);
    font-size: 14px;
    box-sizing: border-box;
}
.wpnav-uc-panel #wpnav-change-password-form input:focus { outline: none; border-color: var(--wpnav-accent-a, #7c5cff); box-shadow: 0 0 0 3px rgba(124,92,255,.15); }
#wpnav-password-status { margin-left: 10px; font-size: 12.5px; }

.wpnav-user-center-guest {
    max-width: 420px;
    margin: 40px auto;
    padding: 22px 26px;
    text-align: center;
    background: var(--wpnav-bg-elevated, #12141f);
    border: 1px solid var(--wpnav-border, rgba(255,255,255,.08));
    border-radius: var(--wpnav-radius-md, 16px);
    color: var(--wpnav-text, #e8e9f0);
}
.wpnav-user-center-guest a { color: var(--wpnav-accent-a, #7c5cff); font-weight: 600; }

/* =====================================================================
   弹窗（添加分类 / 添加网址）
   ===================================================================== */
.wpnav-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(6,7,12,.6);
    backdrop-filter: blur(6px);
    align-items: center;
    justify-content: center;
    z-index: 100000;
}
.wpnav-modal-overlay.is-visible { display: flex; }
.wpnav-modal {
    background: var(--wpnav-bg-elevated, #12141f);
    border: 1px solid var(--wpnav-border, rgba(255,255,255,.08));
    border-radius: var(--wpnav-radius-lg, 24px);
    padding: 26px 28px;
    width: 100%;
    max-width: 380px;
    color: var(--wpnav-text, #e8e9f0);
    box-shadow: 0 24px 70px rgba(0,0,0,.5), var(--wpnav-shadow-glow, 0 0 0 1px rgba(124,92,255,.25), 0 8px 32px rgba(124,92,255,.18));
}
.wpnav-modal h3 { margin: 0 0 18px; font-size: 16px; }
.wpnav-modal .wpnav-field label { font-size: 12.5px; color: var(--wpnav-text-dim, #9296ab); }
.wpnav-modal .wpnav-field input[type="text"] {
    width: 100%;
    padding: 11px 14px;
    background: var(--wpnav-surface, rgba(255,255,255,.04));
    border: 1px solid var(--wpnav-border, rgba(255,255,255,.08));
    border-radius: var(--wpnav-radius-sm, 10px);
    color: var(--wpnav-text, #e8e9f0);
    font-size: 14px;
    box-sizing: border-box;
}
.wpnav-modal .wpnav-field input:focus { outline: none; border-color: var(--wpnav-accent-a, #7c5cff); box-shadow: 0 0 0 3px rgba(124,92,255,.15); }
.wpnav-modal .wpnav-inline-input { display: flex; gap: 8px; }
.wpnav-modal .wpnav-inline-input input { flex: 1; }
.wpnav-fav-modal-preview { display: flex; align-items: center; gap: 10px; }
.wpnav-fav-icon-preview { flex: 0 0 34px; width: 34px; height: 34px; border-radius: 8px; overflow: hidden; background: var(--wpnav-surface, rgba(255,255,255,.04)); }
.wpnav-fav-icon-preview img { width: 100%; height: 100%; border-radius: 8px; object-fit: cover; }
.wpnav-modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }
.wpnav-modal-actions .button { padding: 9px 18px; border: 1px solid var(--wpnav-border, rgba(255,255,255,.08)); border-radius: var(--wpnav-radius-sm, 10px); background: var(--wpnav-surface, rgba(255,255,255,.04)); color: var(--wpnav-text, #e8e9f0); cursor: pointer; }
.wpnav-modal-actions .button-primary { background: var(--wpnav-glass-bg, rgba(255,255,255,.08)); color: var(--wpnav-text, #e8e9f0); border: 1px solid var(--wpnav-glass-border, rgba(255,255,255,.2)); backdrop-filter: var(--wpnav-glass-blur, blur(16px) saturate(180%)); -webkit-backdrop-filter: var(--wpnav-glass-blur, blur(16px) saturate(180%)); box-shadow: var(--wpnav-glass-highlight, inset 0 1px 0 rgba(255,255,255,.28)); font-weight: 700; }
.wpnav-modal-actions .button-primary:hover { background: var(--wpnav-glass-bg-hover, rgba(255,255,255,.16)); border-color: var(--wpnav-glass-border-hover, rgba(255,255,255,.4)); }

/* 收藏列表项的图标 */
.wpnav-fav-icon {
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    border-radius: 6px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(124,92,255,.14);
}
.wpnav-fav-icon img { width: 100%; height: 100%; object-fit: cover; }
.wpnav-fav-icon-letter { font-size: 11px; font-weight: 700; color: var(--wpnav-accent-a, #7c5cff); }

@media (max-width: 560px) {
    .wpnav-uc-panel { padding: 20px 16px; }
}