/* ============================================
   控制台首页 - 腾讯云风格（大气科技感）
   ============================================ */

/* ── 页面容器 ── */
.c-page { max-width: 1400px; margin: 0 auto; padding: 20px; position: relative; z-index: 1; }



/* body 相对定位，让 hero-bg 绝对定位生效 */
.thunder-console { position: relative; }
.c-hero-bg::after {
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(ellipse at 20% 50%, rgba(255,255,255,0.08) 0%, transparent 60%),
                radial-gradient(ellipse at 80% 30%, rgba(255,255,255,0.05) 0%, transparent 50%);
    pointer-events: none;
}

/* ── 顶部欢迎栏 ── */
.c-topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0 16px;
    border-bottom: 1px solid rgba(255,255,255,.12);
    margin-bottom: 14px;
    margin-top: 55px;
}
.c-greeting { display: flex; align-items: baseline; gap: 12px; }
.c-welcome-text { font-size: .86rem; color: rgba(255,255,255,.85); }
.c-welcome-text strong { font-weight: 600; color: #fff; }
.c-date { font-size: .76rem; color: rgba(255,255,255,.55); }
.c-actions { display: flex; gap: 4px; }
.c-action-link {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 6px 13px; font-size: .78rem; color: rgba(255,255,255,.65);
    text-decoration: none; border-radius: 6px; transition: all .15s;
}
.c-action-link:hover { background: rgba(255,255,255,.12); color: #fff; }

/* ── 提醒横幅 ── */
.c-notice {
    display: flex; align-items: center; gap: 10px;
    padding: 11px 18px; border-radius: 8px;
    font-size: .82rem; line-height: 1.5; margin-bottom: 14px;
}
.c-notice-primary { background: #eff6ff; border: 1px solid #dbeafe; color: #1e40af; }
.c-notice svg { flex-shrink: 0; margin-top: 1px; }
.c-notice-btn {
    display: inline-block; padding: 4px 15px; background: #2563eb; color: #fff;
    border-radius: 5px; font-size: .76rem; font-weight: 500;
    text-decoration: none; margin-left: auto;
}
.c-notice-close {
    background: none; border: none; font-size: 1.15rem;
    cursor: pointer; color: #93c5fd; margin-left: 12px; line-height: 1; opacity: .6;
}
.c-notice-close:hover { opacity: 1; }

/* ── 快捷入口行 ── */
.c-shortcuts {
    display: flex;
    gap: 0; border: 1px solid #e5e7eb; border-radius: 8px;
    overflow: hidden; margin-bottom: 16px;
    background: #fff;
}
.c-sc-item {
    display: flex; align-items: center; gap: 7px;
    padding: 12px 18px; font-size: .82rem; color: #374151;
    text-decoration: none; border-right: 1px solid #f3f4f6;
    transition: all .15s; white-space: nowrap;
    flex: 1;
}
.c-sc-item:last-child { border-right: none; flex: 0 0 auto; min-width: 70px; justify-content: center; }
.c-sc-item:hover { background: #f9fafb; color: #2563eb; }
.c-sc-item svg { flex-shrink: 0; opacity: .6; }
.c-sc-item:hover svg { opacity: 1; }
.c-sc-more { color: #9ca3af; font-size: .78rem; }
.c-sc-more:hover { color: #6b7280; }

/* ── 主布局：左主 + 右侧栏 ── */
.c-layout { display: grid; grid-template-columns: 1fr 347px; gap: 16px; }

/* ── 搜索栏 ── */
.c-search-bar {
    display: flex; align-items: center;
    background: #fff; border: 1px solid #e5e7eb; border-radius: 8px;
    padding: 0 14px; height: 40px; margin-bottom: 14px;
    transition: box-shadow .2s, border-color .2s;
}
.c-search-bar:focus-within { border-color: #93c5fd; box-shadow: 0 0 0 3px rgba(59,130,246,.06); }
.c-search-bar svg { flex-shrink: 0; margin-right: 9px; opacity: .55; }
.c-search-bar input {
    flex: 1; border: none; outline: none; font-size: .84rem; color: #1f2937;
    background: transparent;
}
.c-search-bar input::placeholder { color: #d1d5db; }
.c-search-btn {
    padding: 6px 22px; background: #2563eb; color: #fff; border: none;
    border-radius: 6px; font-size: .81rem; font-weight: 500; cursor: pointer;
    transition: background .15s;
}
.c-search-btn:hover { background: #1d4ed8; }

/* ── Tabs（卡片式标签导航） ── */
.c-tabs-card {
    display: flex; align-items: center; justify-content: space-between;
    background: #fff; border: 1px solid #e5e7eb; border-radius: 10px;
    padding: 4px; margin-bottom: 16px;
}
.c-tabs-inner { display: flex; align-items: stretch; }
.c-tab {
    display: flex; align-items: center; gap: 6px;
    padding: 9px 22px; font-size: .86rem; font-weight: 500;
    color: #6b7280; cursor: pointer; border-radius: 7px;
    transition: all .2s ease; position: relative;
    user-select: none;
}
.c-tab svg { flex-shrink: 0; opacity: .65; transition: opacity .2s; }
.c-tab:hover { color: #374151; background: #f8f9fb; }
.c-tab:hover svg { opacity: 1; }
.c-tab.active {
    color: #1d4ed8; font-weight: 600;
    background: linear-gradient(135deg, #eff6ff, #dbeafe);
    box-shadow: 0 1px 3px rgba(37,99,235,.12);
}
.c-tab.active svg { opacity: 1; color: #2563eb; }
.c-tab-actions { display: flex; align-items: center; gap: 6px; margin-right: 4px; }
.c-ta-btn {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 5px 12px; font-size: .73rem; color: #9ca3af;
    text-decoration: none; border-radius: 6px; transition: all .15s;
}
.c-ta-btn:hover { color: #2563eb; background: #f3f4f6; }

/* ── 资源卡片网格（4列） ── */
.c-resource-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px; margin-bottom: 20px;
}
.c-res-card {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 14px; background: #fff; border: 1px solid #efefef;
    border-radius: 8px; text-decoration: none; color: inherit;
    transition: box-shadow .15s, border-color .15s;
}
.c-res-card:hover { box-shadow: 0 2px 10px rgba(0,0,0,.04); border-color: #ddd; }
.c-res-icon {
    width: 36px; height: 36px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; font-size: 15px;
}
.c-ri-blue   { background: #eff6ff; color: #2563eb; }
.c-ri-purple { background: #faf5ff; color: #7c3aed; }
.c-ri-cyan   { background: #ecfeff; color: #0891b2; }
.c-ri-green  { background: #f0fdf4; color: #15803d; }
.c-ri-orange { background: #fff7ed; color: #c2410c; }
.c-ri-pink   { background: #fdf2f8; color: #be185d; }
.c-ri-gray   { background: #f8fafc; color: #475569; }
.c-res-info { flex: 1; min-width: 0; }
.c-res-name { font-size: .78rem; font-weight: 500; color: #1f2937; line-height: 1.3; }
.c-res-count { font-size: .82rem; font-weight: 600; color: #111827; margin-top: 2px; }
.c-res-unit { font-size: .74rem; font-weight: 400; color: #9ca3af; margin-left: 2px; }
.c-res-badge {
    display: inline-block; font-size: .66rem; font-weight: 600;
    color: #d97706; background: #fef3c7; padding: 1px 6px;
    border-radius: 10px; margin-left: 5px; vertical-align: middle;
}

/* 骨架屏 */
.skel {
    background: linear-gradient(90deg,#f3f4f6 25%,#e5e7eb 50%,#f3f4f6 75%);
    background-size:200% 100%; animation:skel-shim 1.5s ease-in-out infinite;
    border-radius:4px;
}
@keyframes skel-shim{0%{background-position:200% 0}100%{background-position:-200% 0}}
.skel-sm{height:13px}.skel-xs{height:9px}.w-50{width:50%}.w-60{width:60%}.w-70{width:70%}
.w-40{width:40%}.w-45{width:45%}.w-55{width:55%}.w-20{width:20%}.w-25{width:25%}.w-30{width:30%}.w-35{width:35%}
.mt-1{margin-top:4px}.ml-auto{margin-left:auto}
.c-res-skel { display:flex;align-items:center;gap:10px;padding:12px 14px;background:#fff;border:1px solid #efefef;border-radius:8px;height:60px;}
.c-rs-icon{width:36px;height:36px;border-radius:8px;flex-shrink:0}
.c-rs-info{flex:1;display:flex;flex-direction:column;justify-content:center;gap:7px}

/* ── 底部：服务统计 + 安全 ── */
.c-bottom-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.c-section-card { background:#fff;border:1px solid #e5e7eb;border-radius:8px;overflow:hidden }
.c-sc-head { display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-bottom:1px solid #f3f4f6 }
.c-sc-title { font-size:.84rem;font-weight:600;color:#111827 }
.c-sc-extra,.c-sc-more { display:flex;align-items:center;gap:4px;font-size:.74rem;color:#9ca3af;text-decoration:none;cursor:pointer }
.c-sc-filter { cursor:pointer;padding:2px 8px;border-radius:4px;font-size:.76rem;transition:all .15s }
.c-sc-filter:hover,.c-sc-filter.active { background:#eff6ff;color:#2563eb }
.c-stats-row { display:flex;align-items:center;padding:16px 18px;gap:36px }
.c-stat-item { flex:1 }
.c-stat-val { font-size:1.6rem;font-weight:700;color:#111827;line-height:1.2 }
.c-stat-lbl { font-size:.73rem;color:#9ca3af;margin-top:4px }
.c-stat-divider { width:1px;height:42px;background:#eee;flex-shrink:0 }

/* 安全评分环 */
.c-security-row { display:flex;align-items:flex-start;padding:14px 16px;gap:22px }
.c-security-score { display:flex;align-items:center;gap:14px;flex-shrink:0 }
.c-score-ring { position:relative;width:64px;height:64px;flex-shrink:0 }
.c-score-svg { width:64px;height:64px;transform:rotate(-90deg) }
.c-score-num { position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:1rem;font-weight:700;color:#16a34a }
.c-score-label { font-size:.75rem;color:#6b7280;line-height:1.55 }
.c-score-status { font-weight:600;margin:0 2px }
.c-score-ok { color:#16a34a }.c-score-warn { color:#ea580c }.c-score-danger { color:#dc2626 }

/* 监控列表 */
.c-monitor-list,.c-side-list { flex:1;min-width:0; padding: 10px 16px;}
.c-mon-item { display:flex;align-items:center;justify-content:space-between;padding:9px 0;border-bottom:1px dashed #f0f0f0;font-size:.79rem }
.c-mon-item:last-child { border:none }
.c-mon-label { color:#6b7280 }
.c-mon-value { font-weight:600;color:#111827 }
.c-mv-red { color:#dc2626 }.c-mv-green { color:#16a34a }.c-mv-orange { color:#ea580c }
.c-mon-skel { display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px dashed #f0f0f0 }
.c-mon-skel:last-child { border:none }

/* ── 右侧用户面板 ── */
.c-sidebar { display:flex;flex-direction:column;gap:16px }

/* 用户信息卡 */
.c-user-card {
    background:linear-gradient(135deg, #f0f7ff, #ffffff);
    border:1px solid #e2eaf5;border-radius:10px;
    padding:18px 16px;display:flex;align-items:flex-start;gap:14px;
}
.c-user-avatar {
    width:48px;height:48px;border-radius:14px;background:linear-gradient(135deg,#dbeafe,#bfdbfe);
    display:flex;align-items:center;justify-content:center;flex-shrink:0;
    box-shadow:0 1px 3px rgba(37,99,235,.08);
}
.c-user-avatar img {
    width:48px;height:48px;border-radius:14px;
    object-fit:cover;display:block;
}
/* 默认头像（图片加载失败时） */
.c-user-avatar svg {
    width:24px;height:24px;color:#2563eb;
}

.c-user-body { flex:1;min-width:0 }
.c-user-row {
    display:flex;align-items:center;justify-content:space-between;
    gap:8px;margin-bottom:6px;
}
.c-user-name { font-size:.92rem;font-weight:650;color:#111827;letter-spacing:.01em;line-height:1.35 }

.c-user-meta {
    display:flex;align-items:center;gap:8px;
    flex-wrap:wrap;
}
.c-user-id {
    font-size:.72rem;color:#94a3b8;font-family:'SF Mono',Menlo,Monaco,'Courier New',monospace;
    letter-spacing:-.01em;background:#f1f5f9;padding:1px 7px;border-radius:4px;
}

.c-tag { display:inline-block;padding:1px 8px;border-radius:4px;font-size:.66rem;font-weight:600;white-space:nowrap }
.c-tag-green { background:#d1fae5;color:#059669 }
.c-tag-blue  { background:#dbeafe;color:#2563eb }
.c-tag-red   { background:#fee2e2;color:#dc2626 }

/* ════════════════ 费用卡片 ════════════════ */
.c-cost-card {
    background:#fff;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,.03);
}

/* 标题区 */
.c-cost-header {
    display:flex;flex-direction:column;padding:18px 20px 0;
    gap:12px;
}
.c-cost-hd-left { display:flex;align-items:center;gap:8px; }
.c-cost-hd-left svg { flex-shrink:0; }
.c-cost-title { font-size:.88rem;font-weight:650;color:#1f2937;letter-spacing:.2px; }
.c-cost-nav { display:flex;gap:4px;flex-wrap:wrap;padding-bottom:14px;border-bottom:1px solid #f3f4f6; }
.c-cn {
    font-size:.75rem;color:#9ca3af;cursor:pointer;
    padding:6px 14px;border-radius:7px;transition:all .18s ease;
    position: relative;
}
.c-cn:hover { color:#4b5563;background:#f3f4f6; }
.c-cn.active {
    color:#1d4ed8;font-weight:600;background:linear-gradient(135deg,#eff6ff,#dbeafe);
    box-shadow: 0 1px 3px rgba(37,99,235,.1);
}

/* 内容区基础 */
.c-cost-body { padding:20px; }

/* ── 余额区域（渐变卡片） ── */
.c-balance-box {
    border-radius:12px;overflow:hidden;
    background: linear-gradient(145deg, #1e3a8a 0%, #1d4ed8 40%, #3b82f6 100%);
    box-shadow: 0 4px 16px rgba(29,78,216,.28), inset 0 1px 0 rgba(255,255,255,.12);
    margin-bottom: 14px;
}
.c-bl-top {
    display:flex;justify-content:space-between;align-items:center;
    padding:24px 22px 20px;
}
.c-bl-info { flex:1;min-width:0; }
.c-bl-label {
    font-size:.73rem;color:rgba(255,255,255,.68);
    letter-spacing:.5px;display:block;margin-bottom:8px;
    text-transform: uppercase;
}
.c-bl-value-row { display:flex;align-items:baseline;gap:2px; }
.c-bl-currency { font-size:1.1rem;color:rgba(255,255,255,.82);font-weight:500; }
.c-balance-value { font-size:2.1rem;font-weight:700;color:#fff;line-height:1.1;letter-spacing:-.5px; }
.c-recharge-btn {
    display:inline-flex;align-items:center;gap:6px;
    padding:10px 24px;background:rgba(255,255,255,.96);color:#1d4ed8;
    border-radius:10px;font-size:.82rem;font-weight:600;text-decoration:none;
    white-space:nowrap;transition:all .2s ease;box-shadow:0 2px 6px rgba(0,0,0,.08);
    flex-shrink:0;
}
.c-recharge-btn:hover { background:#fff;transform:translateY(-2px);box-shadow:0 4px 14px rgba(0,0,0,.14); }

/* 分割线 */
.c-bl-split { height:1px;background:rgba(255,255,255,.12);margin:0 22px; }

/* 底部统计行 */
.c-bl-items {
    display:grid;grid-template-columns:1fr 1fr;gap:20px;
    padding:16px 22px 22px;
}
.c-bl-item { display:flex;flex-direction:column;gap:4px; }
.c-bl-item-lbl { font-size:.73rem;color:rgba(255,255,255,.58); }
.c-bl-item-val { font-size:1.05rem;font-weight:700;color:rgba(255,255,255,.96); }

/* ── 待支付订单行 ── */
.c-cost-foot {
    display:flex;align-items:center;justify-content:space-between;
    padding:14px 16px;border-radius:10px;
    background: #f8fafc; border: 1px solid #eef1f5;
    transition: box-shadow .15s, border-color .15s;
}
.c-cost-foot:hover { box-shadow: 0 2px 8px rgba(0,0,0,.04); border-color: #dbeafe; }
.c-os-info { display:flex;align-items:center;gap:10px; }
.c-os-icon {
    width:34px;height:34px;border-radius:9px;background:linear-gradient(135deg,#eff6ff,#dbeafe);
    display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.c-os-text { font-size:.81rem;color:#4b5563; }
.c-os-count { font-weight:700;color:#111827;margin-left:3px;font-size:.88rem }
.c-os-btn {
    padding:8px 22px;background:linear-gradient(135deg,#2563eb,#1d4ed8);
    color:#fff;border-radius:8px;font-size:.78rem;font-weight:500;
    text-decoration:none;white-space:nowrap;transition:all .2s;
}
.c-os-btn:hover { transform:translateY(-1.5px);box-shadow:0 4px 12px rgba(37,99,235,.4); }

/* ── 到期提醒 ── */
.c-alert-row {
    display:flex;align-items:center;gap:10px;
    padding:12px 16px;margin-top:12px;
    font-size:.77rem;color:#6b7280;
    background:#fffbeb;border-radius:10px;
    border:1px solid #fef3c7;
}
.c-alert-icon {
    width:32px;height:32px;border-radius:8px;background:linear-gradient(135deg,#fff7ed,#fed7aa);
    display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.c-alert-text strong { color:#ea580c;font-weight:700; }
.c-alert-action {
    color:#ea580c;text-decoration:none;margin-left:auto;font-weight:600;
    font-size:.75rem;white-space:nowrap;transition:color .15s;
}
.c-alert-action:hover { color:#c2410c;text-decoration:underline; }

/* ── 收支明细摘要卡片 ── */
.c-income-summary {
    display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
    margin-bottom: 16px;
}
.c-is-item {
    display: flex; align-items: center; gap: 12px;
    background: #f8fafc; border: 1px solid #eef1f5; border-radius: 10px;
    padding: 14px 16px; transition: box-shadow .15s, border-color .15s;
}
.c-is-item:hover { box-shadow: 0 2px 8px rgba(0,0,0,.04); border-color: #e0e4ea; }
.c-is-icon {
    width: 38px; height: 38px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.c-is-icon-in  { background: linear-gradient(135deg, #dcfce7, #bbf7d0); color: #16a34a; }
.c-is-icon-out { background: linear-gradient(135deg, #fee2e2, #fecaca); color: #dc2626; }
.c-is-body { flex: 1; min-width: 0; }
.c-is-label { display: block; font-size: .73rem; color: #94a3b8; margin-bottom: 3px; }
.c-is-value { font-size: 1.1rem; font-weight: 700; color: #1f2937; }
.c-is-value-red { color: #dc2626; }

/* ── 成本概览统计 ── */
.c-overview-stats {
    display: flex; align-items: center; gap: 28px;
    padding: 18px 16px; background: #f8fafc; border-radius: 10px;
    border: 1px solid #eef1f5; margin-bottom: 14px;
}
.c-ov-item { flex: 1; text-align: center; }
.c-ov-value { display: block; font-size: 1.35rem; font-weight: 700; color: #111827; line-height: 1.2; }
.c-ov-label { display: block; font-size: .73rem; color: #9ca3af; margin-top: 4px; }
.c-ov-divider { width: 1px; height: 36px; background: #e5e7eb; flex-shrink: 0; }

/* ── 成本健康度提示 ── */
.c-overview-tip {
    background: linear-gradient(135deg, #f0fdf4, #ffffff);
    border: 1px solid #dcfce7; border-radius: 10px;
    padding: 16px; line-height: 1.65;
}
.c-ot-head {
    display: flex; align-items: center; gap: 8px;
    font-size: .82rem; color: #374151; margin-bottom: 6px;
}
.c-ot-head strong { color: #16a34a; font-weight: 700; }
.c-ot-desc { font-size: .76rem; color: #6b7280; margin: 0; }

/* 右侧小卡 */
.c-side-card { background:#fff;border:1px solid #e5e7eb;border-radius:8px;overflow:hidden }
.c-sc-head-sm { font-size:.85rem;font-weight:600;color:#1f2937;padding:12px 16px;border-bottom:1px solid #f3f4f6 }

/* 空状态 */
.c-empty { grid-column:1/-1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:48px 0;color:#9ca3af }
.c-empty svg { margin-bottom:12px }
.c-empty p { font-size:.85rem;margin:0 }

/* 资源卡片 badge */
.c-res-badge {
    display:inline-block;font-size:.68rem;font-weight:600;
    color:#d97706;background:#fef3c7;padding:1px 7px;border-radius:10px;margin-left:6px;vertical-align:middle
}

/* ── Tab 面板切换 ── */
.c-tab-pane { display: none; }
.c-tab-pane.active { display: block; }
.c-cost-tab-pane.hidden { display: none !important; }
.c-table-wrap { overflow-x: auto; border-radius: 8px; border: 1px solid #eef1f5; }

/* 费用表格 */
.console-table {
    width: 100%; border-collapse: collapse;
    font-size: .78rem; color: #374151;
}
.console-table thead { background: #f8fafc; }
.console-table th {
    padding: 10px 14px; text-align: left; font-weight: 600;
    color: #6b7280; font-size: .74rem; border-bottom: 1px solid #eef1f5;
}
.console-table td {
    padding: 10px 14px; border-bottom: 1px solid #f3f4f6;
    vertical-align: middle;
}
.console-table tbody tr:last-child td { border-bottom: none; }
.console-table tbody tr:hover { background: #fafbfc; }
.console-table .table-empty {
    text-align: center; color: #9ca3af; padding: 28px 14px;
    font-size: .78rem;
}
.d-block { display: block; }
.text-center { text-align: center; }
.text-muted { color: #9ca3af; }
.text-success { color: #16a34a; }
.mb-1 { margin-bottom: 4px; } .mb-2 { margin-bottom: 8px; } .mb-3 { margin-bottom: 12px; }
.mt-2 { margin-top: 8px; } .mt-3 { margin-top: 12px; }
.fw-bold { font-weight: 700; }

/* 响应式 */
@media (max-width:1100px) {
    .c-layout { grid-template-columns: 1fr 300px; }
    .c-shortcuts { flex-wrap: wrap; }
    .c-sc-item { border-bottom:1px solid #f3f4f6;border-right:none;flex:0 0 auto;padding:10px 14px }
}
@media (max-width:900px) {
    .c-layout { grid-template-columns: 1fr; }
    .c-sidebar { order: -1; }
    .c-bottom-grid { grid-template-columns: 1fr; }
}
@media (max-width:576px) {
    .c-page { padding: 12px; }
    .c-topbar { flex-direction: column; align-items: flex-start; gap: 8px; }
    .c-actions { width:100%; overflow-x:auto; }
    .c-resource-grid { grid-template-columns: 1fr; }
    .c-shortcuts { display:none; }
    .c-tabs-card { flex-wrap: wrap; }
    .c-tab-actions { width:100%; margin-top: 4px; margin-right:0; justify-content: flex-end; padding-right:4px; }
}