/* ============================================================
   account-widget.css —— 共享账号头像 widget 样式
   ------------------------------------------------------------
   从首页 style-account.css 摘出「账号入口 + 账号小弹窗」相关样式，
   供 个人中心(auth) / 管理后台(admin) / 我的数据(datahub) 三页共用，
   顶栏右侧统一成「账号头像 → 点击弹出账号小弹窗」。

   .account-corner 的布局骨架已在 layout-shared.css 里定义，本文件不重复。
   引用顺序：本文件的 <link> 放在 layout-shared.css 之后、各页自身 <style> 之前。
   ============================================================ */

/* ---------- 未登录：登录按钮 ---------- */
.login-btn {
    padding: 8px 20px;
    background: #1a73e8;
    color: #fff;
    border: none;
    border-radius: 20px;
    font-size: 13px;
    cursor: pointer;
}
.login-btn:hover { background: #1765cc; }

/* ---------- 已登录：顶栏小头像 ---------- */
.user-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, #1a73e8, #6a3ddf);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    user-select: none;
    overflow: hidden;
}
.user-avatar:hover { opacity: 0.85; }
.user-avatar img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- 账号小弹窗 ---------- */
.account-modal-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    align-items: flex-start;
    justify-content: flex-end;
    z-index: 200;
}
.account-modal-backdrop.show { display: flex; }

.account-modal {
    background: #fff;
    color: #1d1d1f;
    width: 360px;
    max-width: 92vw;
    margin: 70px 24px 0 0;
    border-radius: 14px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.25);
    overflow: hidden;
    font-family: -apple-system, "Segoe UI", "PingFang SC", sans-serif;
}

.account-modal-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px;
    border-bottom: 1px solid #eee;
    position: relative;
}
.account-modal-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #1a73e8;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 20px;
    flex-shrink: 0;
    overflow: hidden;
}
.account-modal-avatar img { width: 100%; height: 100%; object-fit: cover; }
.account-modal-phone { font-size: 20px; font-weight: 600; }
.account-modal-sub { font-size: 12px; color: #86868b; margin-top: 2px; }
.account-modal-close {
    position: absolute;
    right: 16px;
    top: 16px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    border-radius: 50%;
    color: #86868b;
    font-size: 20px;
    cursor: pointer;
    line-height: 1;
    transition: background-color 0.15s, color 0.15s;
}
.account-modal-close:hover { color: #1d1d1f; background-color: rgba(0,0,0,0.06); }

.account-modal-body { padding: 20px; }

.balance-block {
    background: #f5f5f7;
    border-radius: 10px;
    padding: 16px;
    margin-bottom: 20px;
}
.balance-label { font-size: 12px; color: #86868b; margin-bottom: 6px; }
.balance-value { font-size: 24px; font-weight: 600; color: #1d1d1f; }
.balance-value span { font-variant-numeric: tabular-nums; }

.account-section { margin-bottom: 16px; }
.account-section-title {
    font-size: 12px;
    color: #86868b;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.account-section-title-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}
.account-section-title-row .account-section-title { margin-bottom: 0; }

.pool-mini-list { display: flex; flex-direction: column; gap: 10px; }
.pool-mini-item { background: #f5f5f7; border-radius: 8px; padding: 10px 12px; }
.pool-mini-row { display: flex; justify-content: space-between; align-items: center; font-size: 12px; margin-bottom: 6px; }
.pool-mini-row .pool-mini-name { color: #1d1d1f; font-weight: 500; }
.pool-mini-row .pool-mini-usage { color: #86868b; }
.pool-mini-bar { height: 4px; border-radius: 2px; background: #e5e5ea; overflow: hidden; margin-bottom: 6px; }
.pool-mini-bar-fill { height: 100%; background: #0071e3; border-radius: 2px; transition: width 0.2s; }
.pool-mini-bar-fill.warn { background: #ff3b30; }
.pool-mini-buy { font-size: 12px; color: #0071e3; text-decoration: none; }
.pool-mini-buy:hover { text-decoration: underline; }

.api-key-mini-list { display: flex; flex-direction: column; gap: 8px; }
.api-key-mini-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #f5f5f7;
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 12px;
}
.api-key-mini-item .key-name { color: #1d1d1f; }
.api-key-mini-item .key-prefix {
    font-family: "SF Mono", Consolas, monospace;
    color: #86868b;
    font-size: 11px;
}

.empty-hint-small {
    font-size: 12px;
    color: #86868b;
    text-align: center;
    padding: 16px 0;
}

.account-modal-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid #eee;
}
.link-btn {
    color: #0071e3;
    font-size: 13px;
    text-decoration: none;
}
.link-btn:hover { text-decoration: underline; }
.logout-btn {
    background: none;
    border: 1px solid #d2d2d7;
    color: #86868b;
    padding: 6px 14px;
    border-radius: 6px;
    font-size: 12px;
    cursor: pointer;
}
.logout-btn:hover { color: #1d1d1f; border-color: #86868b; }

/* ========== 移动端：账号弹窗 ========== */
@media (max-width: 768px) {
    .account-modal {
        width: 94%;
        max-width: 380px;
        margin: 40px auto;
    }
}

/* ========== 订阅档位弹窗(内联，不跳转个人中心) ==========
   这些 class 名与 5002auth/static/dashboard.html 内联样式同名，是刻意保持一致
   (弹窗视觉风格统一)，但因为 account-widget.js 是跨页面(home/admin/datahub)独立
   加载的组件，不能依赖 dashboard.html 的内联 <style>，所以这里要有一份自己的定义。 */
.modal-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.35);
    align-items: center;
    justify-content: center;
    z-index: 1000;
}
.modal-backdrop.show { display: flex; }
.modal {
    background: #fff;
    border-radius: 8px;
    padding: 24px;
    width: 420px;
    max-width: 90vw;
    max-height: 85vh;
    overflow-y: auto;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
}
.modal h3 { font-size: 18px; margin: 0 0 12px; color: #1d1d1f; }
.modal .field-hint { font-size: 13px; color: #767676; margin: 0 0 12px; line-height: 1.5; }
.modal .modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }

.plan-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 14px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    margin-bottom: 10px;
}
.plan-item .plan-label { font-size: 14px; color: #333; }
.plan-item .plan-price { font-size: 13px; color: #767676; margin-top: 2px; }
.plan-item-selectable { cursor: pointer; transition: border-color 0.15s, background 0.15s; }
.plan-item-selectable:hover { border-color: #0071e3; }
.plan-item-selectable.selected { border-color: #0071e3; border-width: 2px; background: #f0f6ff; }

.btn-primary, .btn-secondary {
    padding: 8px 18px;
    border-radius: 6px;
    font-size: 14px;
    cursor: pointer;
    border: none;
}
.btn-primary { background: #0071e3; color: #fff; }
.btn-primary:hover { background: #0077ed; }
.btn-secondary { background: #f5f5f7; color: #1d1d1f; }
.btn-secondary:hover { background: #e8e8ed; }