/* TDesign 设计系统 — 用户端样式 */
:root {
  --td-brand: #0052d9;
  --td-brand-light: #f2f3ff;
  --td-brand-hover: #0044c7;
  --td-brand-active: #003cab;
  --td-success: #00a870;
  --td-success-light: #e8f8f2;
  --td-warning: #ed7b2f;
  --td-warning-light: #fef3e6;
  --td-error: #e34d59;
  --td-error-light: #fdecee;
  --td-bg: #f3f3f3;
  --td-bg-card: #ffffff;
  --td-border: #dcdcdc;
  --td-border-light: #e7e7e7;
  --td-text-primary: rgba(0,0,0,0.9);
  --td-text-secondary: rgba(0,0,0,0.6);
  --td-text-placeholder: rgba(0,0,0,0.4);
  --td-radius-sm: 3px;
  --td-radius: 6px;
  --td-radius-lg: 9px;
  --td-shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
  --td-shadow: 0 1px 4px rgba(0,0,0,0.06);
  --td-shadow-lg: 0 4px 16px rgba(0,0,0,0.08);
  --td-sidebar-bg: #1b1b1b;
  --td-sidebar-text: rgba(255,255,255,0.55);
  --td-sidebar-active: rgba(255,255,255,0.9);
  --td-font: "PingFang SC","Microsoft YaHei","Helvetica Neue",Helvetica,Arial,sans-serif;
}

* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:var(--td-font); font-size:14px; color:var(--td-text-primary); background:var(--td-bg); line-height:1.6; -webkit-font-smoothing:antialiased; }

/* ====== Layout ====== */
.user-layout { display:flex; min-height:100vh; }
.sidebar { position:fixed; top:0; left:0; bottom:0; width:232px; background:var(--td-sidebar-bg); display:flex; flex-direction:column; z-index:100; }
.sidebar-header { padding:20px 24px; display:flex; align-items:center; gap:8px; }
.sidebar-header h2 { font-size:16px; font-weight:600; color:#fff; white-space:nowrap; }
.sidebar-nav { flex:1; padding:8px; overflow-y:auto; }
.nav-item { display:flex; align-items:center; gap:8px; padding:9px 16px; color:var(--td-sidebar-text); text-decoration:none; font-size:14px; border-radius:var(--td-radius); margin-bottom:2px; transition:all .15s; }
.nav-item:hover { color:var(--td-sidebar-active); background:rgba(255,255,255,0.06); }
.nav-item.active { color:var(--td-sidebar-active); background:rgba(255,255,255,0.08); }
.nav-item svg { flex-shrink:0; }
.sidebar-footer { padding:12px 16px; border-top:1px solid rgba(255,255,255,0.06); font-size:13px; }
.sidebar-footer .quota-info { color:var(--td-sidebar-text); margin-bottom:8px; font-size:12px; }
.sidebar-footer .quota-info strong { color:var(--td-brand); }
.sidebar-footer .user-info { color:var(--td-sidebar-active); margin-bottom:6px; }
.sidebar-footer .logout-btn { color:var(--td-sidebar-text); text-decoration:none; font-size:12px; display:inline-flex; align-items:center; gap:4px; }
.sidebar-footer .logout-btn:hover { color:var(--td-error); }

.main-content { margin-left:232px; flex:1; min-width:0; display:flex; flex-direction:column; }
.content-header { background:#fff; padding:16px 24px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--td-border-light); }
.content-header h1 { font-size:18px; font-weight:600; }
.content-body { padding:24px; flex:1; }

/* ====== Stats Cards ====== */
.stats-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); gap:16px; margin-bottom:24px; }
.stat-card { background:var(--td-bg-card); border-radius:var(--td-radius); padding:20px 24px; box-shadow:var(--td-shadow-sm); border:1px solid var(--td-border-light); }
.stat-card .stat-icon { width:40px; height:40px; border-radius:var(--td-radius); display:flex; align-items:center; justify-content:center; margin-bottom:12px; }
.stat-card .stat-value { font-size:28px; font-weight:600; color:var(--td-text-primary); line-height:1.2; }
.stat-card .stat-label { font-size:13px; color:var(--td-text-secondary); margin-top:4px; }

/* ====== Card / Section ====== */
.card { background:var(--td-bg-card); border-radius:var(--td-radius); padding:24px; margin-bottom:20px; box-shadow:var(--td-shadow-sm); border:1px solid var(--td-border-light); }
.card-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.card-title { font-size:16px; font-weight:600; }

/* ====== Table ====== */
.t-table { width:100%; border-collapse:collapse; background:#fff; border-radius:var(--td-radius); overflow:hidden; }
.t-table th { background:#fafafa; padding:12px 16px; text-align:left; font-weight:600; font-size:13px; color:var(--td-text-secondary); border-bottom:1px solid var(--td-border-light); white-space:nowrap; }
.t-table td { padding:12px 16px; font-size:13px; border-bottom:1px solid var(--td-border-light); color:var(--td-text-primary); }
.t-table tr:hover td { background:#f8f9fb; }
.t-table .empty-cell { text-align:center; padding:48px 16px; color:var(--td-text-placeholder); }

/* ====== Tag ====== */
.t-tag { display:inline-block; padding:2px 8px; border-radius:var(--td-radius-sm); font-size:12px; line-height:20px; }
.t-tag-success { background:var(--td-success-light); color:var(--td-success); }
.t-tag-warning { background:var(--td-warning-light); color:var(--td-warning); }
.t-tag-error { background:var(--td-error-light); color:var(--td-error); }
.t-tag-default { background:#f3f3f3; color:var(--td-text-secondary); }

/* ====== Button ====== */
.t-btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:8px 16px; border:none; border-radius:var(--td-radius); font-size:14px; cursor:pointer; text-decoration:none; font-family:inherit; transition:all .15s; line-height:22px; white-space:nowrap; }
.t-btn-primary { background:var(--td-brand); color:#fff; }
.t-btn-primary:hover { background:var(--td-brand-hover); }
.t-btn-primary:active { background:var(--td-brand-active); }
.t-btn-outline { background:#fff; color:var(--td-brand); border:1px solid var(--td-brand); }
.t-btn-outline:hover { background:var(--td-brand-light); }
.t-btn-text { background:transparent; color:var(--td-text-secondary); }
.t-btn-text:hover { background:#f3f3f3; color:var(--td-text-primary); }
.t-btn-danger { background:var(--td-error); color:#fff; }
.t-btn-danger:hover { background:#c9353f; }
.t-btn-sm { padding:4px 12px; font-size:12px; }
.t-btn-lg { padding:10px 24px; font-size:16px; }
.t-btn-block { display:flex; width:100%; }
.t-btn:disabled { opacity:.5; cursor:not-allowed; pointer-events:none; }

/* ====== Form ====== */
.t-form-item { margin-bottom:20px; }
.t-form-label { display:block; margin-bottom:8px; font-size:13px; color:var(--td-text-primary); font-weight:500; }
.t-form-label .required { color:var(--td-error); margin-left:2px; }
.t-input { width:100%; height:36px; padding:0 12px; border:1px solid var(--td-border); border-radius:var(--td-radius); font-size:14px; font-family:inherit; color:var(--td-text-primary); background:#fff; outline:none; transition:border-color .15s,box-shadow .15s; }
.t-input:focus { border-color:var(--td-brand); box-shadow:0 0 0 2px rgba(0,82,217,0.1); }
.t-input::placeholder { color:var(--td-text-placeholder); }
.t-select { width:100%; height:36px; padding:0 12px; border:1px solid var(--td-border); border-radius:var(--td-radius); font-size:14px; font-family:inherit; background:#fff; outline:none; cursor:pointer; appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5l3 3 3-3' stroke='%23999' stroke-width='1.5' fill='none'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center; padding-right:32px; }
.t-select:focus { border-color:var(--td-brand); box-shadow:0 0 0 2px rgba(0,82,217,0.1); }
.t-textarea { width:100%; min-height:120px; padding:8px 12px; border:1px solid var(--td-border); border-radius:var(--td-radius); font-size:14px; font-family:inherit; resize:vertical; outline:none; transition:border-color .15s,box-shadow .15s; }
.t-textarea:focus { border-color:var(--td-brand); box-shadow:0 0 0 2px rgba(0,82,217,0.1); }

/* ====== Tabs ====== */
.t-tabs { display:flex; border-bottom:1px solid var(--td-border-light); margin-bottom:24px; }
.t-tab-item { padding:8px 16px; cursor:pointer; color:var(--td-text-secondary); font-size:14px; border-bottom:2px solid transparent; margin-bottom:-1px; transition:all .15s; background:none; border-top:none; border-left:none; border-right:none; font-family:inherit; }
.t-tab-item:hover { color:var(--td-brand); }
.t-tab-item.active { color:var(--td-brand); border-bottom-color:var(--td-brand); font-weight:500; }

/* ====== Pagination ====== */
.t-pagination { display:flex; justify-content:center; align-items:center; gap:4px; padding:16px 0; }
.t-pagination a, .t-pagination span { padding:6px 12px; border-radius:var(--td-radius); font-size:13px; text-decoration:none; }
.t-pagination a { color:var(--td-text-secondary); border:1px solid var(--td-border); }
.t-pagination a:hover { color:var(--td-brand); border-color:var(--td-brand); }
.t-pagination .current { background:var(--td-brand); color:#fff; border:1px solid var(--td-brand); }
.t-pagination .info { color:var(--td-text-placeholder); border:none; }

/* ====== Alert ====== */
.t-alert { padding:10px 16px; border-radius:var(--td-radius); font-size:13px; margin-bottom:16px; display:flex; align-items:center; gap:8px; }
.t-alert-error { background:var(--td-error-light); color:var(--td-error); }
.t-alert-success { background:var(--td-success-light); color:var(--td-success); }
.t-alert-warning { background:var(--td-warning-light); color:var(--td-warning); }

/* ====== Progress ====== */
.t-progress { height:6px; background:#f0f0f0; border-radius:3px; overflow:hidden; }
.t-progress-bar { height:100%; background:var(--td-brand); border-radius:3px; transition:width .3s; }

/* ====== Modal/Dialog ====== */
.t-dialog-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.5); z-index:1000; display:flex; align-items:center; justify-content:center; }
.t-dialog { background:#fff; border-radius:var(--td-radius-lg); box-shadow:0 8px 40px rgba(0,0,0,0.12); width:90%; max-width:440px; max-height:85vh; overflow-y:auto; }
.t-dialog-header { display:flex; align-items:center; justify-content:space-between; padding:20px 24px 0; }
.t-dialog-header h3 { font-size:16px; font-weight:600; }
.t-dialog-close { background:none; border:none; font-size:20px; cursor:pointer; color:var(--td-text-secondary); padding:0; line-height:1; }
.t-dialog-close:hover { color:var(--td-text-primary); }
.t-dialog-body { padding:20px 24px; }
.t-dialog-footer { padding:0 24px 20px; display:flex; justify-content:flex-end; gap:8px; }

/* ====== Sidebar Toggle ====== */
.sidebar-toggle { display:none; position:fixed; top:12px; left:12px; z-index:101; width:38px; height:38px; background:var(--td-sidebar-bg); border:none; border-radius:var(--td-radius); cursor:pointer; color:#fff; }

/* ====== Login Page ====== */
.login-page { min-height:100vh; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg, #e8eaed 0%, #d2d6de 100%); padding:20px; }
.login-card { width:420px; background:#fff; border-radius:var(--td-radius-lg); padding:40px; box-shadow:var(--td-shadow-lg); }
.login-logo { text-align:center; margin-bottom:32px; }
.login-logo h1 { font-size:22px; font-weight:600; color:var(--td-text-primary); }
.login-logo p { font-size:13px; color:var(--td-text-secondary); margin-top:4px; }
.login-tabs { display:flex; margin-bottom:24px; border-bottom:1px solid var(--td-border-light); }
.login-tab { flex:1; padding:10px; text-align:center; cursor:pointer; font-size:14px; color:var(--td-text-secondary); border-bottom:2px solid transparent; background:none; font-family:inherit; transition:all .15s; }
.login-tab:hover { color:var(--td-brand); }
.login-tab.active { color:var(--td-brand); border-bottom-color:var(--td-brand); font-weight:500; }
.login-panel { display:none; }
.login-panel.active { display:block; }
.login-form .t-form-item:last-child { margin-bottom:0; }
.login-form .t-btn { margin-top:8px; }
.login-link { text-align:center; margin-top:16px; }
.login-link a { font-size:13px; color:var(--td-text-secondary); text-decoration:none; }
.login-link a:hover { color:var(--td-brand); }

/* ====== Package Cards ====== */
.pkg-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); gap:16px; }
.pkg-card { position:relative; background:#fff; border:1px solid var(--td-border-light); border-radius:var(--td-radius); padding:24px; text-align:center; transition:box-shadow .2s,border-color .2s; cursor:default; overflow:hidden; }
.pkg-card:hover { border-color:var(--td-brand); box-shadow:0 4px 12px rgba(0,82,217,0.08); }
.pkg-card.popular { border-color:var(--td-brand); }
.pkg-card h3 { font-size:15px; font-weight:600; margin-bottom:12px; }
.pkg-card .price { font-size:36px; font-weight:700; color:var(--td-text-primary); }
.pkg-card .price-unit { font-size:14px; font-weight:400; color:var(--td-text-secondary); }
.pkg-card .quota { font-size:13px; color:var(--td-text-secondary); margin:10px 0 6px; }
.pkg-card .desc { font-size:12px; color:var(--td-text-placeholder); margin-bottom:16px; }

/* ====== Payment Modal ====== */
.pay-info-bar { background:#f8f9fb; border-radius:var(--td-radius); padding:12px 16px; margin-bottom:16px; }
.pay-info-row { display:flex; justify-content:space-between; padding:4px 0; font-size:13px; color:var(--td-text-secondary); }
.pay-info-row strong { color:var(--td-text-primary); }
.pay-info-row .price-highlight { color:var(--td-warning); font-size:16px; font-weight:600; }
.pay-type-tabs { display:flex; gap:12px; margin-bottom:20px; }
.pay-type-btn { flex:1; padding:10px; border:1px solid var(--td-border); border-radius:var(--td-radius); background:#fff; cursor:pointer; font-size:14px; color:var(--td-text-secondary); text-align:center; transition:all .15s; font-family:inherit; }
.pay-type-btn:hover { border-color:var(--td-brand); }
.pay-type-btn.active { border-color:var(--td-brand); color:var(--td-brand); background:var(--td-brand-light); }
.qrcode-container { display:flex; flex-direction:column; align-items:center; padding:16px 0; }
.qrcode-container img { width:200px; height:200px; border:1px solid var(--td-border-light); border-radius:var(--td-radius); }
.qrcode-tip { margin-top:12px; font-size:13px; color:var(--td-text-secondary); }
.spinner-sm { width:32px; height:32px; border:3px solid var(--td-border-light); border-top-color:var(--td-brand); border-radius:50%; animation:spin .8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.pay-success { text-align:center; padding:20px 0; }
.pay-success .icon { width:64px; height:64px; background:var(--td-success); border-radius:50%; display:inline-flex; align-items:center; justify-content:center; margin-bottom:16px; }
.pay-success .icon svg { width:32px; height:32px; stroke:#fff; }
.pay-success .text { font-size:18px; font-weight:600; color:var(--td-success); }
.pay-success .sub { font-size:13px; color:var(--td-text-secondary); margin-top:4px; }

/* ====== API Key ====== */
.api-key-display { display:flex; gap:12px; align-items:center; }
.api-key-display code { flex:1; padding:10px 14px; background:#f8f9fb; border:1px solid var(--td-border-light); border-radius:var(--td-radius); font-family:"SF Mono","Monaco","Menlo",monospace; font-size:13px; word-break:break-all; }
.code-block { background:#1e1e1e; color:#d4d4d4; padding:16px; border-radius:var(--td-radius); overflow-x:auto; font-size:13px; line-height:1.5; }
.code-block code { font-family:"SF Mono","Monaco","Menlo",monospace; }

/* ====== Quota Bar ====== */
.quota-summary { display:flex; align-items:center; gap:16px; margin-bottom:20px; padding:16px; background:#f8f9fb; border-radius:var(--td-radius); }
.quota-summary .label { font-size:13px; color:var(--td-text-secondary); }
.quota-summary .value { font-size:20px; font-weight:700; }
.quota-summary .t-progress { flex:1; min-width:120px; }

/* ====== Chart ====== */
.chart-wrap { position:relative; height:200px; max-height:50vh; }
@media (max-width:768px) { .chart-wrap { height:180px; } }

/* ====== Empty State ====== */
.empty-state { text-align:center; padding:48px 20px; color:var(--td-text-placeholder); }
.empty-state svg { width:64px; height:64px; margin-bottom:12px; color:#ddd; }
.empty-state p { font-size:14px; }

/* ====== Performance ====== */
.content-body > .card { contain:layout style; }

/* ====== Mobile Responsive ====== */
@media (max-width:768px) {
  .sidebar { transform:translateX(-100%); transition:transform .2s ease; }
  .sidebar.open { transform:translateX(0) !important; box-shadow:4px 0 20px rgba(0,0,0,0.15); }
  .sidebar-toggle { display:flex !important; align-items:center; justify-content:center; }
  .main-content { margin-left:0; }
  .content-body { padding:12px; }
  .content-header { padding:12px 16px; }
  .content-header h1 { font-size:16px; }

  .stats-grid { grid-template-columns:repeat(2, 1fr); gap:10px; }
  .stat-card { padding:14px 16px; }
  .stat-card .stat-value { font-size:22px; }
  .stat-card .stat-label { font-size:12px; }
  .stat-card .stat-icon { width:32px; height:32px; margin-bottom:8px; }
  .stat-card .stat-icon svg { width:16px; height:16px; }

  .pkg-grid { grid-template-columns:1fr; gap:12px; }
  .pkg-card { padding:20px; }
  .pkg-card .price { font-size:28px; }

  .card { padding:16px; margin-bottom:12px; }
  .card-title { font-size:14px; }

  .t-form-item { margin-bottom:14px; }
  .t-input, .t-select { height:40px; font-size:16px; }
  .t-textarea { font-size:16px; }

  .t-table { font-size:12px; }
  .t-table th, .t-table td { padding:8px 10px; }

  .t-dialog { width:95%; max-width:95%; margin:10px; max-height:90vh; }
  .t-dialog-body { padding:16px; }
  .qrcode-container img { width:160px; height:160px; }

  .login-card { width:100%; max-width:360px; padding:28px 24px; margin:0 12px; }
  .login-logo h1 { font-size:20px; }
  .login-tab { font-size:13px; }

  .t-pagination { flex-wrap:wrap; gap:4px; }
  .t-pagination a, .t-pagination span { padding:4px 10px; font-size:12px; }

  .quota-summary { flex-wrap:wrap; gap:8px; }
  .quota-summary .value { font-size:18px; }
  .quota-summary .t-progress { min-width:80px; }

  .code-block { font-size:11px; padding:12px; }
  .api-key-display { flex-direction:column; }
}