* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei", sans-serif; }
body { background: #ffffff; color: #1f2329; }
.app-body { min-height: 100vh; }

a { text-decoration: none; }

.floating-alert-wrap { position: fixed; top: 28px; left: 50%; transform: translateX(-50%); z-index: 99; }
.floating-alert { min-width: 240px; max-width: 420px; text-align: center; padding: 14px 18px; border-radius: 14px; color: #fff; box-shadow: 0 14px 28px rgba(0,0,0,.16); backdrop-filter: blur(10px); }
.floating-alert.success { background: rgba(22, 163, 74, 0.92); }
.floating-alert.error { background: rgba(220, 38, 38, 0.92); }

.auth-shell { min-height: 100vh; display: grid; grid-template-columns: 1.15fr 0.85fr; }
.auth-visual { position: relative; background: linear-gradient(180deg, rgba(42, 123, 255, 0.18), rgba(0, 51, 153, 0.28)), url('https://images.unsplash.com/photo-1506744038136-46273834b3fb?auto=format&fit=crop&w=1400&q=80') center center / cover no-repeat; }
.sky-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; padding: 60px 72px; color: #fff; background: linear-gradient(135deg, rgba(31, 111, 235, 0.18), rgba(8, 34, 92, 0.45)); }
.brand-badge { display: inline-flex; width: fit-content; padding: 8px 14px; border-radius: 999px; background: rgba(255,255,255,0.18); font-size: 12px; letter-spacing: 1.8px; margin-bottom: 18px; backdrop-filter: blur(8px); }
.sky-overlay h1 { margin: 0; font-size: 48px; font-weight: 800; }
.sky-overlay p { margin-top: 16px; font-size: 18px; opacity: 0.92; }
.auth-panel { display: flex; align-items: center; justify-content: center; padding: 32px; background: #ffffff; }
.auth-card { width: 100%; max-width: 430px; background: #ffffff; border-radius: 24px; padding: 34px 30px 28px; box-shadow: 0 18px 50px rgba(32, 72, 143, 0.12); }
.auth-tabs { display: flex; gap: 24px; margin-bottom: 28px; border-bottom: 1px solid #edf1f7; }
.tab-btn { background: transparent; border: none; font-size: 22px; font-weight: 700; color: #9aa7b8; padding: 0 0 14px; cursor: pointer; position: relative; }
.tab-btn.active { color: #1f2329; }
.tab-btn.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; border-radius: 999px; background: #2f73ff; }
.auth-form { display: flex; flex-direction: column; gap: 14px; }
.auth-form label { font-size: 14px; color: #4f5f73; font-weight: 600; }
.auth-form input[type="text"], .auth-form input[type="email"], .auth-form input[type="password"], .modern-form-grid input[type="text"] { height: 48px; border: 1px solid #dbe5f0; border-radius: 14px; padding: 0 14px; font-size: 15px; color: #1f2329; background: #fff; outline: none; transition: all .2s ease; width: 100%; }
.auth-form input:focus, .modern-form-grid input:focus { border-color: #2f73ff; box-shadow: 0 0 0 4px rgba(47,115,255,0.12); }
.form-row { display: flex; align-items: center; justify-content: space-between; margin-top: 2px; margin-bottom: 10px; }
.remember-row { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: #6b7a8d; cursor: pointer; }
.muted-link { font-size: 14px; color: #2f73ff; }
.submit-btn { height: 50px; border: none; border-radius: 14px; background: linear-gradient(135deg, #2f73ff, #4f8dff); color: #fff; font-size: 16px; font-weight: 700; cursor: pointer; box-shadow: 0 12px 28px rgba(47,115,255,0.25); padding: 0 22px; }
.ghost-btn { display: inline-flex; align-items: center; justify-content: center; height: 50px; padding: 0 18px; border-radius: 14px; background: #f5f8fd; color: #5f7084; font-weight: 700; }

.dashboard-shell { min-height: 100vh; display: grid; grid-template-columns: 250px 1fr; background: linear-gradient(180deg, #f7faff 0%, #ffffff 100%); }
.sidebar { border-right: 1px solid #edf1f7; background: rgba(255,255,255,0.82); backdrop-filter: blur(14px); padding: 26px 18px; }
.sidebar-brand { font-size: 24px; font-weight: 800; color: #2f73ff; margin-bottom: 24px; }
.sidebar-nav { display: flex; flex-direction: column; gap: 8px; }
.sidebar-nav a { padding: 12px 14px; border-radius: 14px; color: #607086; font-weight: 600; transition: all .2s ease; }
.sidebar-nav a.active, .sidebar-nav a:hover { background: linear-gradient(135deg, #eef4ff, #f7faff); color: #2f73ff; box-shadow: inset 0 0 0 1px #dbe8ff; }
.dashboard-main { padding: 32px; }
.dashboard-main-soft { display: flex; flex-direction: column; gap: 22px; }
.hero-card { display: grid; grid-template-columns: 1.25fr 0.75fr; gap: 18px; padding: 24px; border-radius: 28px; background: linear-gradient(135deg, #ffffff 0%, #f7fbff 100%); border: 1px solid #eaf1fb; box-shadow: 0 20px 45px rgba(35, 83, 170, 0.08); }
.inner-hero-card { grid-template-columns: 1fr; }
.hero-main { padding: 10px 8px 10px 4px; }
.hero-badge { display: inline-flex; padding: 8px 14px; border-radius: 999px; background: #eef4ff; color: #2f73ff; font-size: 12px; font-weight: 700; margin-bottom: 16px; }
.hero-main h1 { margin: 0; font-size: 34px; line-height: 1.2; }
.hero-main p { margin: 14px 0 0; max-width: 720px; color: #6f7f92; font-size: 15px; line-height: 1.8; }
.hero-side { display: grid; grid-template-columns: 1fr; gap: 14px; }
.mini-stat-card { border-radius: 22px; padding: 22px 20px; color: #fff; box-shadow: 0 18px 34px rgba(80, 120, 220, 0.18); }
.mini-stat-card.blue { background: linear-gradient(135deg, #4d8dff, #2f73ff); }
.mini-stat-card.violet { background: linear-gradient(135deg, #7a7cff, #6158ff); }
.mini-stat-card span { display: block; font-size: 14px; opacity: .92; }
.mini-stat-card strong { display: block; font-size: 34px; margin: 12px 0 10px; }
.mini-stat-card small { opacity: .88; font-size: 13px; }
.content-grid { display: grid; grid-template-columns: 1fr; }
.chart-card, .list-card, .panel-card { background: #ffffff; border: 1px solid #ebf1f8; border-radius: 24px; padding: 22px; box-shadow: 0 14px 34px rgba(15, 34, 68, 0.05); }
.chart-soft-card { padding: 24px 24px 18px; }
.chart-card-full { width: 100%; }
.chart-card-full canvas { display: block; width: 100%; }
.section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.section-head-soft { margin-bottom: 18px; }
.section-head-soft h2, .section-head-soft h3 { margin: 0; font-size: 20px; }
.section-head-soft p { margin: 8px 0 0; color: #8a97a8; font-size: 13px; }
.triple-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.triple-grid-soft { margin-top: 0; }
.soft-card { padding: 22px; }
.simple-list { display: flex; flex-direction: column; gap: 12px; }
.soft-list { gap: 14px; }
.list-item { display: flex; justify-content: space-between; align-items: center; gap: 12px; background: #f8fbff; border: 1px solid #eef3f9; border-radius: 16px; padding: 14px 15px; }
.soft-list-item { background: linear-gradient(135deg, #fbfdff, #f5f9ff); }
.list-item.column { align-items: flex-start; flex-direction: column; gap: 7px; }
.list-item span { word-break: break-all; color: #304154; }
.list-item strong { color: #1f2329; }
.list-item small { color: #7b8794; line-height: 1.6; word-break: break-all; }
.rank-wrap { display: flex; align-items: center; gap: 10px; min-width: 0; }
.rank-badge { width: 26px; height: 26px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: #eaf2ff; color: #2f73ff; font-weight: 700; font-size: 13px; flex-shrink: 0; }

.modern-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.form-card-field { display: flex; flex-direction: column; gap: 10px; padding: 18px; border: 1px solid #eef3f9; border-radius: 18px; background: linear-gradient(135deg, #fcfdff, #f7fbff); }
.form-card-field.full { grid-column: 1 / -1; }
.form-card-field label { font-size: 14px; font-weight: 700; color: #506072; }
.form-switch-row { display: flex; align-items: center; justify-content: space-between; }
.checkbox-label { display: inline-flex; align-items: center; gap: 10px; color: #607086; font-weight: 600; }
.action-row { display: flex; gap: 12px; align-items: center; }
.soft-table-wrap { overflow: auto; }
.soft-table { width: 100%; border-collapse: collapse; }
.soft-table th, .soft-table td { padding: 14px 12px; text-align: left; border-bottom: 1px solid #eef3f9; vertical-align: top; }
.soft-table th { color: #7b8794; font-size: 13px; font-weight: 700; }
.method-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 54px; height: 28px; padding: 0 12px; border-radius: 999px; background: #eaf2ff; color: #2f73ff; font-size: 12px; font-weight: 700; }
.table-actions { display: flex; gap: 14px; flex-wrap: wrap; }
.table-link { color: #2f73ff; font-weight: 700; }
.table-link.danger { color: #e14d4d; }
.api-info-grid { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: 18px; }
.empty-key-card, .key-card { padding: 22px; border-radius: 20px; background: linear-gradient(135deg, #fbfdff, #f6faff); border: 1px solid #eaf1fb; }
.empty-key-card strong, .key-card span { display: block; }
.empty-key-card p { color: #7b8794; margin: 10px 0 18px; line-height: 1.7; }
.key-value { margin: 12px 0 18px; padding: 14px 16px; border-radius: 16px; background: #0f172a; color: #e2e8f0; font-size: 14px; word-break: break-all; }
.doc-info-block { display: flex; flex-direction: column; gap: 14px; }
.doc-line { display: flex; justify-content: space-between; gap: 16px; padding: 14px 16px; border-radius: 16px; background: #f8fbff; border: 1px solid #eef3f9; }
.doc-line span { color: #607086; }
.doc-line strong { color: #1f2329; word-break: break-all; text-align: right; }
.doc-code-block { margin-top: 18px; padding: 18px; border-radius: 18px; background: #0f172a; color: #e2e8f0; font-size: 13px; line-height: 1.8; word-break: break-all; }

@media (max-width: 1200px) {
  .hero-card, .api-info-grid { grid-template-columns: 1fr; }
}

@media (max-width: 1100px) {
  .dashboard-shell { grid-template-columns: 1fr; }
  .sidebar { border-right: none; border-bottom: 1px solid #edf1f7; }
  .triple-grid { grid-template-columns: 1fr; }
  .modern-form-grid { grid-template-columns: 1fr; }
}

@media (max-width: 960px) {
  .auth-shell { grid-template-columns: 1fr; }
  .auth-visual { min-height: 240px; }
  .sky-overlay { padding: 36px 28px; }
  .sky-overlay h1 { font-size: 36px; }
  .dashboard-main { padding: 20px; }
  .form-switch-row, .doc-line { flex-direction: column; align-items: flex-start; }
}