/* ============================================
   LLMWate - Global AI API Gateway
   美国B2B科技风格：深蓝主色 + 专业灰调 + 白留白
   Mobile-First Responsive Design
   ============================================ */

:root {
  /* 主色调 - 深蓝系 */
  --primary: #0F172A;        /* 深空蓝：导航/标题 */
  --primary-light: #1890FF;   /* 科技蓝：按钮/关键数据 */
  --primary-hover: #0373F3;   /* 按钮悬停 */

  /* 背景色 */
  --bg-main: #F5F7FA;        /* 浅灰：页面主背景 */
  --bg-card: #FFFFFF;        /* 纯白：卡片/信息块 */
  --bg-sidebar: #FFFFFF;     /* 纯白：侧边栏 */
  --bg-hover: #F0F4F8;       /* 悬停背景 */

  /* 文字色 */
  --text-dark: #343A40;      /* 深灰：正文 */
  --text-gray: #6B7280;      /* 中灰：辅助文字 */
  --text-light: #9CA3AF;     /* 浅灰：次要信息 */
  --text-white: #FFFFFF;     /* 白色文字 */

  /* 状态色 */
  --success: #22C55E;        /* 青绿：核心CTA（禁用红色） */
  --success-bg: #DCFCE7;
  --warning: #FBBF24;        /* 淡金：关键指标高亮 */
  --warning-bg: #FEF3C7;
  --danger: #EF4444;         /* 红色：仅限错误提示 */
  --danger-bg: #FEE2E2;
  --info: #1890FF;           /* 科技蓝：信息状态 */
  --info-bg: #DBEAFE;

  /* 边框 */
  --border: #E5E7EB;
  --border-light: #F3F4F6;

  /* 阴影 */
  --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 8px 24px rgba(15, 23, 42, 0.10);

  /* 圆角 */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;

  /* 侧边栏宽度 */
  --sidebar-width: 260px;

  /* 别名（dashboard.html 依赖） */
  --accent: #1890FF;        /* 等于 primary-light */
  --accent-soft: rgba(24, 144, 255, 0.08);
  --muted: #6B7280;         /* 等于 text-gray */
  --bg-soft: #F0F4F8;       /* 等于 bg-hover */
  --border-2: #F3F4F6;      /* 等于 border-light */
  --card: #FFFFFF;           /* 等于 bg-card */
}

/* ============================================
   深色模式
   ============================================ */


* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background-color: var(--bg-main);
  color: var(--text-dark);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* === Top Navigation Bar === */
.top-navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 64px;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  padding: 0 1.5rem;
  gap: 2rem;
  z-index: 1000;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.nav-logo {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  text-decoration: none;
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--text-dark);
  flex-shrink: 0;
}

.nav-logo svg {
  flex-shrink: 0;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  overflow-x: auto;
}

.nav-links a {
  padding: 0.5rem 0.75rem;
  color: var(--text-gray);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
  border-radius: 6px;
  white-space: nowrap;
  transition: all 0.2s;
}

.nav-links a:hover {
  color: var(--text-dark);
}

.nav-links a.active {
  background: rgba(24, 144, 255, 0.1);
  color: var(--primary-light);
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;
}

.theme-toggle-btn {
  border: 1px solid var(--border);
  cursor: pointer;
  padding: 0.4rem 0.6rem;
  font-size: 1.1rem;
  line-height: 1;
  border-radius: 6px;
  color: var(--text-gray);
}

.hamburger {
  display: none;
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: var(--text-dark);
  outline: 0;
  padding: 0.5rem;
}

.page-content-wrap {
  padding-top: 80px;
  min-height: 100vh;
}

@media (max-width: 1024px) {
  .nav-links {
    display: none;
  }
  .hamburger {
    display: block;
  }
  .nav-actions .btn {
    display: none;
  }
  .nav-actions .theme-toggle-btn {
    display: block;
  }
}

@media (max-width: 768px) {
  .top-navbar { display: none; }
  .page-content-wrap {
    padding-top: 70px;
  }
}



/* === 滚动条美化 === */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-light); }

/* === 通用布局 === */
.page-container {
  display: flex;
  min-height: 100vh;
}

/* === 移动端顶部栏 === */
.mobile-header {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  height: 60px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  padding: 1rem 1.5rem;
  align-items: center;
  justify-content: space-between;
  z-index: 200;
}

@media (max-width: 768px) {
  .mobile-header { display: flex !important; }
}
@media (min-width: 769px) {
  .mobile-header { display: none !important; }
}



.mobile-header .logo {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--text-dark);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.2rem;
  vertical-align: middle;
}

.mobile-header .logo svg {
  display: block;
  vertical-align: middle;
}

.mobile-header .logo span {
  display: inline-block;
  vertical-align: middle;
  color: var(--primary-light);
  line-height: 1;
}

.hamburger {
  width: 44px;
  height: 44px;
  display: flex;
  flex-direction: column;
  align-items: center;
  outline: 0;
  justify-content: center;
  gap: 5px;
  cursor: pointer;
  border: none;
  background: transparent;
  padding: 0;
}

.hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--text-dark);
  border-radius: 2px;
  transition: all 0.3s ease;
}

.hamburger.active span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}

.hamburger.active span:nth-child(2) {
  opacity: 0;
}

.hamburger.active span:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px);
}


/* === Page Layout (Flex container for sidebar + content) === */
.page-layout {
  display: flex;
  min-height: 100vh;
}

.page-content-wrap {
  margin-left: 0;
  padding-top: 80px; /* Account for fixed masthead height */
}

/* Mobile responsive */
@media (max-width: 768px) {
  .page-content-wrap {
    margin-left: 0;
    padding-top: 60px;
  }
}

/* === 侧边栏 === */
.sidebar {
    background: #fff !important;
  width: var(--sidebar-width);
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-right: 1px solid var(--border);
  position: fixed;
  height: 100vh;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  z-index: 100;
  transition: transform 0.3s ease;
}

.sidebar-logo {
  font-size: 2rem;
  font-weight: 700;
  padding: 1.8rem 1.5rem 1rem;
  color: var(--text-dark);
}

.sidebar-logo span {
  color: var(--primary-light);
}


/* Sidebar Logo Link */
.sidebar-logo-link {
    display: flex;
    align-items: center;
    padding: 1.5rem 1rem 0.8rem;
    text-decoration: none;
}
.sidebar-menu {
  flex: none;
  padding: 0.5rem 0.75rem;
  overflow-y: auto;
}

.sidebar-menu a {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 1rem;
  margin-bottom: 0.25rem;
  border-radius: var(--radius-sm);
  color: var(--text-gray);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
  transition: all 0.2s ease;
  min-height: 48px;
}

.sidebar-menu a:hover {
  background: var(--bg-hover);
  color: var(--text-dark);
}

.sidebar-menu a.active {
  background: rgba(24, 144, 255, 0.1);
  color: var(--primary-light);
}



.sidebar-menu a .icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sidebar-menu a .icon svg {
  width: 18px;
  height: 18px;
}

/* === 主内容区 === */
.main-content {
  max-width: 1400px;
  margin: 0 auto;
  margin-left: 0;
  padding: 0 2rem 1.5rem;
  min-height: 100vh;
  transition: margin 0.3s ease;
}
.main-content.bg-gray {
 background: var(--bg-main);
}

@media (max-width: 768px) {
  .main {
    margin-left: 0;
    padding: 1rem;
  }
}


/* === 移动端遮罩层 === */
.sidebar-overlay {
  display: block;
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.02);
  z-index: 299;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.sidebar-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

/* === 顶部栏 === */
.top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
  flex-wrap: wrap;
  gap: 1rem;
}

.top-bar h1 {
  font-size: 2rem;
  color: var(--text-dark);
}

.top-bar p {
  color: var(--text-gray);
  font-size: 0.85rem;
  margin-top: 0.2rem;
}

.user-badge {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--text-gray);
  font-size: 0.9rem;
}

/* === 卡片 === */
.card {
  background: var(--bg-card);
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  padding: 1.5rem;
}

.card-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-dark);
  margin-bottom: 1.2rem;
}

/* === 按钮 === */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.75rem 1.4rem;
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s ease;
  border: none;
  min-height: 44px;
  touch-action: manipulation;
}

.btn-primary {
  background: var(--primary-light);
  color: #fff;
}

.btn-primary:hover {
  background: var(--primary-hover);
}

.btn-primary:active {
  transform: scale(0.98);
}

.btn-outline {
  background: transparent;
  border: 1.5px solid var(--primary-light);
  color: var(--primary-light);
}

.btn-outline:hover {
  background: var(--primary-light);
  color: #fff;
}

.btn-success {
  background: var(--success);
  color: #fff;
}

.btn-success:hover {
  background: #16A34A;
}

.btn-danger {
  background: var(--danger-bg);
  color: var(--danger);
}



/* === 统计卡片网格 === */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.2rem;
  margin-bottom: 2rem;
}

.stat-card {
  background: var(--bg-card);
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  padding: 1.3rem;
  min-height: 120px;
}

.stat-card .stat-icon {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
  background: rgba(24, 144, 255, 0.1);
}



.stat-card .stat-icon svg {
  width: 20px;
  height: 20px;
}

.stat-card h4 {
  color: var(--text-gray);
  font-size: 0.78rem;
  font-weight: 500;
  margin-bottom: 0.4rem;
}

.stat-num {
  font-size: 1.7rem;
  font-weight: 700;
  color: var(--text-dark);
  line-height: 1.2;
}

.stat-tag {
  font-size: 0.75rem;
  margin-top: 0.3rem;
  color: var(--success);
}

.stat-tag.warn {
  color: var(--warning);
}

/* === 表格 === */
.table-wrapper {
  background: var(--bg-card);
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  -webkit-overflow-scrolling: touch;
}

table {
  width: 100%;
  border-collapse: collapse;
  min-width: 600px;
}

thead {
  background: var(--bg-hover);
}



th {
  padding: 1rem;
  text-align: left;
  color: var(--text-gray);
  font-weight: 500;
  font-size: 0.78rem;
  white-space: nowrap;
}

td {
  padding: 1rem;
  border-top: 1px solid var(--border);
  color: var(--text-dark);
  font-size: 0.88rem;
  white-space: nowrap;
}

tr:hover td {
  background: var(--bg-hover);
}

/* === 网格布局 === */
.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

/* === 价格卡片 === */
.price-card {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  padding: 1.8rem;
  position: relative;
  transition: all 0.3s ease;
}

.price-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.price-card.hot {
  border-color: var(--primary-light);
  transform: scale(1.03);
  box-shadow: 0 8px 28px rgba(24, 144, 255, 0.15);
}

.price-card.hot:hover {
  transform: scale(1.03) translateY(-4px);
}

.hot-label {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--primary-light);
  color: #fff;
  padding: 0.3rem 1rem;
  border-radius: 20px;
  font-size: 0.72rem;
  font-weight: 600;
  white-space: nowrap;
}

/* ============================================
   响应式 - 平板 (768px - 1024px)
   ============================================ */
@media (max-width: 1024px) {
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .grid-3 {
    grid-template-columns: repeat(2, 1fr);
  }
  .main-content {
  max-width: 1400px;
  margin: 0 auto;
    padding: 1.8rem 1.5rem;
  }
}

/* ============================================
   响应式 - 手机 (≤768px)
   ============================================ */
@media (max-width: 768px) {
  .mobile-header {
    display: flex;
    align-items: center;
  }
  .sidebar {
    background: #fff !important;
    position: fixed;
    left: 0;
    transform: translateX(-100%);
    width: 280px;
    z-index: 300;
    box-shadow: var(--shadow-lg);
  }
  .sidebar.open { display: flex; 
    transform: translateX(0);
  }
  .sidebar-overlay {
    display: block;
    opacity: 0;
    pointer-events: none;
  }
  .sidebar-overlay.active {
    opacity: 1;
    pointer-events: auto;
  }
  .main-content {
  max-width: 1400px;
  margin: 0 auto;
    margin-left: 0;
    margin-top: 60px;
    padding: 1.2rem 1rem;
    min-height: calc(100vh - 60px);
  }
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }
  .stat-card {
    padding: 1.1rem;
    min-height: 100px;
  }
  .stat-num {
    font-size: 1.4rem;
  }
  .grid-2, .grid-3 {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .top-bar {
    margin-bottom: 1.5rem;
  }
  .top-bar h1 {
    font-size: 1.4rem;
  }
  .card {
    padding: 1.2rem;
    margin-bottom: 1rem;
  }
  .price-card {
    padding: 1.5rem;
  }
  .price-card.hot {
    transform: none;
  }
  .price-card.hot:hover {
    transform: translateY(-4px);
  }
  .price-num {
    font-size: 2rem;
  }
  .table-wrapper {
    margin: 0 -1rem;
    border-left: none;
    border-right: none;
    border-radius: 0;
  }
  table {
    min-width: 500px;
  }
  th, td {
    padding: 0.85rem 0.75rem;
    font-size: 0.82rem;
  }
  .quick-actions {
    grid-template-columns: repeat(3, 1fr);
    gap: 0.8rem;
  }
  .quick-btn {
    padding: 1rem 0.5rem;
  }
  .quick-btn .icon svg {
    width: 24px;
    height: 24px;
  }
  .content-row {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .form-row {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .pagination {
    padding: 1rem;
    gap: 0.4rem;
  }
  .page-btn {
    width: 34px;
    height: 34px;
  }
}

/* ============================================
   响应式 - 小手机 (≤480px)
   ============================================ */
@media (max-width: 480px) {
  body {
    font-size: 14px;
  }
  .main-content {
  max-width: 1400px;
  margin: 0 auto;
    padding: 1rem 0.85rem;
  }
  .stats-grid {
    grid-template-columns: 1fr;
    gap: 0.8rem;
  }
  .stat-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-height: auto;
    padding: 1rem;
  }
  .stat-card .stat-icon {
    width: 38px;
    height: 38px;
    margin-bottom: 0;
    flex-shrink: 0;
  }
  .stat-card .stat-content {
    
  }
  .stat-card h4 {
    margin-bottom: 0.2rem;
  }
  .stat-num {
    font-size: 1.3rem;
  }
  .top-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.8rem;
  }
  .user-info {
    width: 100%;
  }
  .quick-actions {
    grid-template-columns: repeat(3, 1fr);
    gap: 0.6rem;
  }
  .quick-btn {
    padding: 0.8rem 0.4rem;
  }
  .quick-btn .icon svg {
    width: 20px;
    height: 20px;
  }
  .quick-btn .label {
    font-size: 0.7rem;
  }
  .log-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.2rem;
  }
  .log-result {
    width: 100%;
    justify-content: space-between;
  }
  .filter-bar {
    flex-direction: column;
    gap: 0.8rem;
  }
  .filter-bar select,
  .filter-bar input {
    width: 100%;
  }
  .date-range {
    width: 100%;
    flex-wrap: wrap;
  }
  .recharge-layout {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  .money-select {
    grid-template-columns: repeat(3, 1fr);
  }
  .recharge.sidebar {
    background: #fff !important;
    order: -1;
  }
  .docs-layout {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  .docs-nav {
    position: static;
    display: flex;
    flex-wrap: wrap;
    gap: 0.2rem;
    padding: 1rem;
    background: var(--bg-card);
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    margin-bottom: 1.5rem;
  }
  .docs-nav-title {
    display: none;
  }
  .docs-nav-item {
    padding: 0.5rem 0.8rem;
    font-size: 0.8rem;
    background: var(--bg-hover);
    border-radius: 20px;
    margin: 0;
  }
  .profile-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  .profile.sidebar {
    background: #fff !important;
    display: flex;
    align-items: center;
    gap: 1rem;
    text-align: left;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border);
  }
  .avatar-upload {
    width: 60px;
    height: 60px;
    font-size: 1.5rem;
    margin: 0;
    flex-shrink: 0;
  }
  .pay-methods {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
  }
  .pay-method {
    padding: 0.9rem;
    margin: 0;
  }
  .node-item {
    padding: 0.75rem 0;
  }
}

/* ============================================
   触摸优化
   ============================================ */
@media (hover: none) and (pointer: coarse) {
  .btn {
    min-height: 48px;
  }
  .sidebar-menu a {
    min-height: 52px;
  }
  a, button, .clickable {
    min-height: 44px;
    min-width: 44px;
  }
  .btn:hover {
    transform: none;
  }
  .btn:active, .sidebar-menu a:active {
    opacity: 0.8;
  }
}

/* ============================================
   横屏手机
   ============================================ */
@media (max-height: 500px) and (orientation: landscape) {
  .mobile-header {
    height: 50px;
  }
  .main-content {
  max-width: 1400px;
  margin: 0 auto;
    margin-top: 50px;
    padding: 1rem;
  }
  .stats-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ============================================
   iOS 安全区域
   ============================================ */
@supports (padding: env(safe-area-inset-bottom)) {
  .mobile-header {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }
  .main-content {
  max-width: 1400px;
  margin: 0 auto;
    padding-bottom: calc(1rem + env(safe-area-inset-bottom));
  }
  .sidebar {
    background: #fff !important;
    padding-bottom: env(safe-area-inset-bottom);
  }
}

/* ============================================
   首页特殊响应式
   ============================================ */
@media (max-width: 768px) {
  .navbar {
    display: none;
  }
  .hero {
    padding: 4rem 1.5rem 3rem !important;
  }
  .hero-title {
    font-size: 1.8rem !important;
    line-height: 1.3;
  }
  .hero-desc {
    font-size: 0.95rem !important;
    line-height: 1.6;
  }
  .data-box {
    gap: 1.5rem;
  }
  .data-num {
    font-size: 2rem;
  }
  .hero-btns {
    flex-direction: column;
    width: 100%;
    gap: 0.8rem;
  }
  .hero-btns .btn {
    width: 100%;
  }
  .status-bar {
    padding: 0.9rem 1rem;
    flex-direction: column;
    gap: 0.8rem;
    text-align: center;
  }
  .status-list {
    gap: 1.2rem;
  }
  .section {
    padding: 3rem 1.5rem !important;
  }
  .section-head h2 {
    font-size: 1.5rem;
  }
  .section-head p {
    font-size: 0.9rem;
  }
  .advantage-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .model-wrap {
    gap: 0.6rem;
  }
  .model-tag {
    padding: 0.5rem 1rem;
    font-size: 0.82rem;
  }
  .price-grid {
    grid-template-columns: 1fr;
    gap: 1.2rem;
  }
  .price-card.hot {
    transform: none;
  }
  .code-box {
    padding: 1.2rem;
  }
  pre {
    font-size: 0.78rem;
    line-height: 1.6;
  }
  footer {
    padding: 2.5rem 1.5rem 1.5rem;
  }
  .footer-inner {
    flex-direction: column;
    gap: 1.5rem;
  }
  .footer-col {
    width: 100%;
  }
  .footer-col h4 {
    margin-bottom: 0.8rem;
  }
  .footer-col a {
    display: inline-block;
    margin-right: 1rem;
    margin-bottom: 0.4rem;
  }
  .copyright {
    margin-top: 2rem;
    padding-top: 1.5rem;
  }
}
/* === Footer background fix: match status bar dark tone === */
footer, .section.footer-section { background: #FFFFFF; }

/* === Dark mode footer: match status bar #0F172A === */




/* === Dark mode: navbar === */







/* === Dark mode: mobile header === */




/* === Dark mode: sidebar === */







/* === Dark mode: status bar - seamless with hero === */
html






/* === Dark mode: section (light gray → dark) === */
html

/* === Dark mode: cards === */











/* === Dark mode: high contrast key data === */



/* === Dark mode: status labels - high contrast === */





/* === Dark mode: status badge === */


/* === Dark mode: section head === */



/* === Dark mode: endpoint list === */





/* === Dark mode: footer === */





/* === Dark mode: filter tabs === */



/* === Dark mode: code blocks === */
/* === Dark mode: code box (cURL example) === */



/* === Dark mode: copy button === */

/* === Dark mode: quick integration section === */




/* === Dark mode: table === */





/* === Dark mode: input/forms === */



/* === Dark mode: provider card === */




/* === Dark mode: backgrounds (consistent) === */


















































/* === Dark mode: backgrounds === */
html[data-theme="dark"] body { background: #0F172A !important; color: #F1F5F9; }
html[data-theme="dark"] .navbar, html[data-theme="dark"] .top-nav, html[data-theme="dark"] .masthead { background: #0F172A !important; border-color: #334155 !important; }
html[data-theme="dark"] .logo { color: #fff !important; }
html[data-theme="dark"] .hero, html[data-theme="dark"] #heroA, html[data-theme="dark"] #heroB { background: #0F172A !important; }
html[data-theme="dark"] .section, html[data-theme="dark"] .bg-gray, html[data-theme="dark"] section { background: #0F172A !important; }
html[data-theme="dark"] .status-bar, html[data-theme="dark"] #status { background: #0F172A !important; }
html[data-theme="dark"] .card, html[data-theme="dark"] .adv-card, html[data-theme="dark"] .price-card, html[data-theme="dark"] .model-card, html[data-theme="dark"] .provider-card { background: #1E293B !important; border-color: #334155 !important; }
html[data-theme="dark"] .card .n,
html[data-theme="dark"] .card .pr .am { color: #F1F5F9 !important; }
html[data-theme="dark"] .card .pr .pd,
html[data-theme="dark"] .card ul li { color: #F1F5F9 !important; }
html[data-theme="dark"] .card ul li::before { color: #4ADE80 !important; }
html[data-theme="dark"] .card .og { color: #F87171 !important; }
html[data-theme="dark"] .footer { background: #0F172A !important; border-color: #334155 !important; }
html[data-theme="dark"] .api-card { background: #1E293B !important; border-color: #334155 !important; }
html[data-theme="dark"] .cat-tab { background: #1E293B !important; border-color: #334155 !important; color: #94A3AF !important; }
html[data-theme="dark"] .cat-tab.active { background: #1890FF !important; color: #fff !important; }
html[data-theme="dark"] input, html[data-theme="dark"] select { background: #1E293B !important; border-color: #334155 !important; color: #F1F5F9 !important; }
html[data-theme="dark"] table { background: #1E293B; }
html[data-theme="dark"] thead { background: #0F172A; color: #fff; }
html[data-theme="dark"] tbody tr { border-color: #334155; }
html[data-theme="dark"] td { color: #F1F5F9; }
html[data-theme="dark"] .filter-tab { background: #1E293B !important; border-color: #334155 !important; color: #94A3AF !important; }
html[data-theme="dark"] .filter-tab.active { background: #1890FF !important; color: #fff !important; }
html[data-theme="dark"] .btn-primary { background: #1890FF !important; color: #fff !important; }
html[data-theme="dark"] .btn-outline { background: transparent !important; border-color: #1890FF !important; color: #fff !important; }
html[data-theme="dark"] .btn-ghost { background: transparent !important; border-color: #334155 !important; color: #F1F5F9 !important; }
html[data-theme="dark"] .btn-sm { background: #1890FF; color: #fff; }
html[data-theme="dark"] .page-btn { background: #1E293B !important; border-color: #334155 !important; color: #94A3AF; }
html[data-theme="dark"] code, html[data-theme="dark"] pre { background: #0F172A !important; color: #a5f3fc !important; }
html[data-theme="dark"] .code-box { background: #0F172A !important; border-color: #334155; }
html[data-theme="dark"] .sidebar {
    background: #fff !important; background: #1E293B !important; border-color: #334155 !important; }
html[data-theme="dark"] .sidebar-menu a { color: #94A3AF; }
html[data-theme="dark"] .sidebar-menu a:hover { background: #334155; color: #fff; }
html[data-theme="dark"] .sidebar-menu a.active { background: rgba(24,144,255,0.15) !important; color: #60A5FA !important; }
html[data-theme="dark"] .mob-h { background: #0F172A !important; border-color: #334155 !important; }
html[data-theme="dark"] .mobile-menu { background: #1E293B; border-color: #334155; }
html[data-theme="dark"] .mobile-header { background: #0F172A !important; border-color: #334155 !important; }
html[data-theme="dark"] .mobile-menu a { color: #94A3AF; border-color: #334155; }
html[data-theme="dark"] .hamburger span { background: #fff; }
html[data-theme="dark"] .hamburger { background: transparent !important; border-radius: 8px; outline: 0 !important; outline-offset: -100px !important; }
html[data-theme="dark"] .status-label.healthy, html[data-theme="dark"] .status-label.ok { color: #4ADE80 !important; }
html[data-theme="dark"] .status-label.degraded { color: #FBBF24 !important; }
html[data-theme="dark"] .status-label.down { color: #F87171 !important; }

html[data-theme="dark"] .uptime-stat { background: #1E293B !important; border-color: #334155 !important; }
html[data-theme="dark"] .status-hero { background: #1E293B !important; border-color: #334155 !important; }
html[data-theme="dark"] h2, html[data-theme="dark"] h3 { color: #F1F5F9; }
html[data-theme="dark"] p, html[data-theme="dark"] .text-gray { color: #94A3AF; }
html[data-theme="dark"] ::-webkit-scrollbar { width: 8px; height: 8px; }
html[data-theme="dark"] ::-webkit-scrollbar-track { background: #1E293B; }
html[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #334155; border-radius: 4px; }
html[data-theme="dark"] .nav-links a { color: #94A3AF; }
html[data-theme="dark"] .nav-links a:hover { color: #fff; }
html[data-theme="dark"] .top-nav-links a { color: #94A3AF; }
html[data-theme="dark"] .top-nav-links a:hover { color: #fff; }
html[data-theme="dark"] .section-head h2 { color: #fff; }
html[data-theme="dark"] .section-head p { color: #94A3AF; }
html[data-theme="dark"] .endpoint-list { background: #1E293B !important; border-color: #334155 !important; }
html[data-theme="dark"] .endpoint-row { border-color: #334155 !important; }
html[data-theme="dark"] .method { background: #334155; color: #94A3AF; }
html[data-theme="dark"] .code-title { color: #94A3AF; }
html[data-theme="dark"] .page-title { color: #fff; }

/* === Model card readability fix for dark mode (2026-06-25) === */
html[data-theme="dark"] .model-name { color: #F1F5F9 !important; }
html[data-theme="dark"] .model-desc { color: #CBD5E1 !important; }
html[data-theme="dark"] .model-meta-item { color: #94A3B8 !important; }
html[data-theme="dark"] .model-meta-item span { color: #F1F5F9 !important; }
html[data-theme="dark"] .model-meta { border-top-color: #334155 !important; }
html[data-theme="dark"] .model-card-header { color: #F1F5F9; }

/* Provider dot: switch light white halo to dark ring */
html[data-theme="dark"] .provider-dot { box-shadow: 0 0 0 2px rgba(15,23,42,.6); }
html[data-theme="dark"] .provider-dot.offline { background: #475569; }

/* Category badges: dark-tinted bg + bright text (replaces hardcoded light bg) */
html[data-theme="dark"] .cat-general     { background: rgba(59,130,246,.18);  color: #93C5FD; }
html[data-theme="dark"] .cat-coding      { background: rgba(16,185,129,.18);  color: #6EE7B7; }
html[data-theme="dark"] .cat-reasoning   { background: rgba(245,158,11,.18);  color: #FCD34D; }
html[data-theme="dark"] .cat-vision      { background: rgba(236,72,153,.18);  color: #F9A8D4; }
html[data-theme="dark"] .cat-fast        { background: rgba(99,102,241,.18);  color: #A5B4FC; }
html[data-theme="dark"] .cat-cheap       { background: rgba(34,197,94,.18);   color: #86EFAC; }
html[data-theme="dark"] .cat-chinese     { background: rgba(239,68,68,.18);   color: #FCA5A5; }

/* Selected card text contrast boost */
html[data-theme="dark"] .model-card.selected { background: rgba(24,144,255,.12) !important; }

/* Unavailable card: stronger hint, no fading */
html[data-theme="dark"] .model-card.unavailable { opacity: .7; }
html[data-theme="dark"] .model-card.unavailable::after { background: rgba(0,0,0,.85) !important; }

/* === Model card v2: deeper visual hierarchy in dark mode (2026-06-25 23:55) === */
html[data-theme="dark"] .model-card {
  background: linear-gradient(180deg,#1E293B 0%,#182234 100%) !important;
  border: 1px solid #475569 !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.04) !important;
}
html[data-theme="dark"] .model-card:hover {
  border-color: #1890FF !important;
  box-shadow: 0 6px 18px rgba(24,144,255,0.28), inset 0 1px 0 rgba(255,255,255,0.08) !important;
  transform: translateY(-3px);
}
html[data-theme="dark"] .model-card.selected {
  background: linear-gradient(180deg,rgba(24,144,255,0.18) 0%,rgba(24,144,255,0.08) 100%) !important;
  border-color: #1890FF !important;
  box-shadow: 0 0 0 2px rgba(24,144,255,0.35), 0 6px 18px rgba(24,144,255,0.25) !important;
}

/* Stronger text contrast */
html[data-theme="dark"] .model-name { color: #FFFFFF !important; font-weight: 700 !important; letter-spacing: -0.01em; }
html[data-theme="dark"] .model-desc { color: #CBD5E1 !important; line-height: 1.5 !important; }
html[data-theme="dark"] .model-provider {
  background: rgba(96,165,250,0.18) !important;
  color: #93C5FD !important;
  border: 1px solid rgba(96,165,250,0.25);
}
html[data-theme="dark"] .model-provider .provider-dot.ready { background: #4ADE80 !important; }
html[data-theme="dark"] .model-provider .provider-dot.offline { background: #64748B !important; }

/* Meta section: clearer label/value split */
html[data-theme="dark"] .model-meta {
  border-top: 1px solid #334155 !important;
  background: rgba(15,23,42,0.4);
  margin: 0.7rem -1.1rem -0.9rem !important;
  padding: 0.7rem 1.1rem 0.9rem !important;
  border-radius: 0 0 12px 12px;
}
html[data-theme="dark"] .model-meta-item { color: #94A3B8 !important; font-weight: 500; }
html[data-theme="dark"] .model-meta-item span {
  color: #F1F5F9 !important;
  font-weight: 700;
  font-size: 0.85rem;
  background: rgba(24,144,255,0.12);
  padding: 0.1rem 0.45rem;
  border-radius: 4px;
  margin-left: 0.2rem;
}

/* Price highlight: green chip */
html[data-theme="dark"] .model-meta-item:nth-child(2) span {
  color: #4ADE80 !important;
  background: rgba(34,197,94,0.14);
  font-weight: 700;
}

/* Category badges: punchier */
html[data-theme="dark"] .cat-general     { background: rgba(59,130,246,0.25);  color: #BFDBFE; border: 1px solid rgba(59,130,246,0.35); }
html[data-theme="dark"] .cat-coding      { background: rgba(16,185,129,0.25);  color: #A7F3D0; border: 1px solid rgba(16,185,129,0.35); }
html[data-theme="dark"] .cat-reasoning   { background: #92400E;  color: #FEF3C7; border: 1px solid #FBBF24; font-weight: 600; }
html[data-theme="dark"] .cat-vision      { background: rgba(236,72,153,0.25);  color: #FBCFE8; border: 1px solid rgba(236,72,153,0.35); }
html[data-theme="dark"] .cat-fast        { background: rgba(99,102,241,0.25);  color: #C7D2FE; border: 1px solid rgba(99,102,241,0.35); }
html[data-theme="dark"] .cat-cheap       { background: rgba(34,197,94,0.25);   color: #BBF7D0; border: 1px solid rgba(34,197,94,0.35); }
html[data-theme="dark"] .cat-chinese     { background: rgba(239,68,68,0.25);   color: #FECACA; border: 1px solid rgba(239,68,68,0.35); }






/* Key data high contrast */
html[data-theme="dark"] .val, html[data-theme="dark"] .stat-val, html[data-theme="dark"] .data-num, html[data-theme="dark"] .metric-val { color: #60A5FA !important; }
html[data-theme="dark"] .api-status-code, html[data-theme="dark"] .response-code, html[data-theme="dark"] .http-code { color: #4ADE80 !important; font-weight: 700; }
html[data-theme="dark"] .status-label.healthy, html[data-theme="dark"] .status-label.ok { color: #4ADE80 !important; }
html[data-theme="dark"] .status-label.degraded { color: #FBBF24 !important; }
html[data-theme="dark"] .status-label.down { color: #F87171 !important; }
html[data-theme="dark"] .uptime-stat .val { color: #60A5FA; }
html[data-theme="dark"] .uptime-stat .lbl { color: #94A3AF; }
html[data-theme="dark"] .status-hero { background: #1E293B !important; border-color: #334155 !important; }

/* Dark mode: stats section */
html[data-theme="dark"] .stat-card { background: #1E293B !important; border-color: #334155 !important; }
html[data-theme="dark"] .stat-card .stat-icon { background: rgba(24, 144, 255, 0.15); }
html[data-theme="dark"] .stat-card .stat-label { color: #94A3AF; }
html[data-theme="dark"] .stat-card .stat-value { color: #60A5FA; }
html[data-theme="dark"] .stat-icon svg { stroke: #1890FF !important; }
html[data-theme="dark"] .stats-grid { background: #0F172A; }
html[data-theme="dark"] .adv-icon { background: rgba(24, 144, 255, 0.12) !important; border-color: rgba(24, 144, 255, 0.25) !important; }
html[data-theme="dark"] .adv-icon svg { stroke: #1890FF !important; }

/* Dark mode: body class for extra specificity */
body.dark-theme, html[data-theme="dark"] body { background: #0F172A !important; }
body.dark-theme .main-content, html[data-theme="dark"] .main-content {
  max-width: 1400px;
  margin: 0 auto; background: #0F172A !important; }
body.dark-theme .content-area, html[data-theme="dark"] .content-area { background: #0F172A !important; }
body.dark-theme .page-content, html[data-theme="dark"] .page-content { background: #0F172A !important; }
body.dark-theme .container, html[data-theme="dark"] .container { background: #0F172A; }
body.dark-theme .wrapper, html[data-theme="dark"] .wrapper { background: #0F172A; }
/* Dark mode: pricing section on index page */
html[data-theme="dark"] .price-card { background: #1E293B !important; border-color: #334155 !important; }
html[data-theme="dark"] .price-title { color: #F1F5F9 !important; }
html[data-theme="dark"] .price-num { color: #F1F5F9 !important; }
html[data-theme="dark"] .price-list li { color: #CBD5E1 !important; }
html[data-theme="dark"] .price-list li::before { color: #4ADE80 !important; }
html[data-theme="dark"] .price-num small { color: #94A3AF !important; }
/* Dark mode: inner content areas */
html[data-theme="dark"] .card, html[data-theme="dark"] .calc-section, html[data-theme="dark"] .faq-section, html[data-theme="dark"] .models-section, html[data-theme="dark"] .compare, html[data-theme="dark"] .filter-bar { background: #1E293B !important; border-color: #334155 !important; }
html[data-theme="dark"] .card h2, html[data-theme="dark"] .card h3, html[data-theme="dark"] .card h4, html[data-theme="dark"] .card-title { color: #F1F5F9 !important; }
html[data-theme="dark"] .card p, html[data-theme="dark"] .card li { color: #CBD5E1 !important; }
html[data-theme="dark"] .calc-section h2, html[data-theme="dark"] .faq-section h2, html[data-theme="dark"] .models-section h2, html[data-theme="dark"] .compare h2 { color: #F1F5F9 !important; }
html[data-theme="dark"] .cmp th { background: #0F172A !important; color: #fff !important; }
html[data-theme="dark"] .cmp td { color: #F1F5F9 !important; border-color: #334155 !important; }
html[data-theme="dark"] .models-table thead tr { background: #0F172A !important; }
html[data-theme="dark"] .models-table th { background: #0F172A !important; color: #fff !important; border-color: #334155 !important; }
html[data-theme="dark"] .models-table td { color: #F1F5F9 !important; border-color: #334155 !important; }
html[data-theme="dark"] .models-table { background: #1E293B !important; border-color: #334155 !important; }
html[data-theme="dark"] .faq-q { background: #1E293B !important; color: #F1F5F9 !important; border-color: #334155 !important; }
html[data-theme="dark"] .trust-section { background: #1E293B !important; }
html[data-theme="dark"] .trust-card { background: #0F172A !important; border-color: #334155 !important; }
html[data-theme="dark"] .trust-card:hover { border-color: #1890FF !important; }
html[data-theme="dark"] .trust-title { color: #F1F5F9 !important; }
html[data-theme="dark"] .trust-desc { color: #94A3B8 !important; }
html[data-theme="dark"] .trust-icon { background: rgba(24, 144, 255, 0.15) !important; }
html[data-theme="dark"] .faq-a { color: #94A3AF !important; }
html[data-theme="dark"] .field label { color: #94A3AF !important; }
html[data-theme="dark"] .filter-bar select { background: #1E293B !important; color: #F1F5F9 !important; border-color: #334155 !important; }


        /* ===================== MOBILE RESPONSIVE ===================== */
        @media (max-width: 768px) {
            /* Sidebar -> hidden by default on mobile */
            .sidebar {
    background: #fff !important;
                position: fixed;
                left: 0;
                width: 260px;
                height: 100vh;
                z-index: 1000;
                overflow-y: auto;
                transform: translateX(-100%);
                transition: transform 0.3s ease;
            }
            .sidebar.open { display: flex; 
                transform: translateX(0);
            }
            .sidebar-overlay {
                display: block;
                position: fixed;
                left: 0;
                width: 100%;
                height: 100%;
                background: rgba(15, 23, 42, 0.02);
                z-index: 999;
                opacity: 0;
                pointer-events: none;
                transition: opacity 0.3s ease;
            }
            .sidebar-overlay.active {
                opacity: 1;
                pointer-events: auto;
            }
            /* Hamburger visible on mobile */
            .hamburger {
                display: flex;
            }
            /* Section padding */
            .section {
                padding: 3rem 1.5rem;
            }
            .section-head h2 {
                font-size: 1.8rem;
            }
            .section-head p {
                font-size: 0.95rem;
            }
            /* Cards grid -> 1 column */
            .advantage-grid,
            .model-cards-grid,
            .api-grid,
            .price-grid {
                grid-template-columns: 1fr;
            }
            /* Hero text */
            .hero h1 {
                font-size: 2rem;
            }
            .hero p {
                font-size: 1rem;
            }
        }

        @media (max-width: 480px) {
            .section {
                padding: 2rem 1rem;
            }
            .section-head h2 {
                font-size: 1.5rem;
            }
            .section-head p {
                font-size: 0.9rem;
            }
            .hero h1 {
                font-size: 1.6rem;
            }
            .hero-btns {
                flex-direction: column;
                gap: 0.8rem;
            }
        }

/* === Smooth Theme Transition === */
body, body:first-of-type, html {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.navbar, .top-nav, .masthead, .hero, .section, .bg-gray, section, .status-bar, #status,
.card, .adv-card, .price-card, .model-card, .provider-card, .footer, .api-card, .cat-tab,
input, select, table, thead {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* === Theme Toggle Button === */
.theme-toggle {
    background: #F1F5F9;
    border: 1px solid #e2e8f0;
    cursor: pointer;
    padding: 0.3rem 0.5rem;
    font-size: 1.1rem;
    line-height: 1;
    border-radius: 6px;
    color: #0F172A;
    margin-left: 0.3rem;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.theme-toggle:hover {
    background: #e2e8f0;
}
html[data-theme=dark] .theme-toggle {
    background: #1E293B;
    border-color: #334155;
    color: #F1F5F9;
}
html[data-theme=dark] .theme-toggle:hover {
    background: #334155;
}

/* === Markdown Rendered Content === */
.pp-result-body {
    font-family: JetBrains Mono, Fira Code, monospace;
    font-size: 0.8rem;
    line-height: 1.7;
}
.pp-result-body h1, .pp-result-body h2, .pp-result-body h3 {
    margin: 1rem 0 0.5rem;
    color: var(--text-dark);
}
.pp-result-body p {
    margin: 0.5rem 0;
}
.pp-result-body code {
    background: rgba(24, 144, 255, 0.08);
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
    font-size: 0.85em;
}
.pp-result-body pre {
    background: #1e293b;
    border-radius: 8px;
    padding: 1rem;
    overflow-x: auto;
    margin: 0.8rem 0;
}
.pp-result-body pre code {
    background: none;
    padding: 0;
    color: #e2e8f0;
}
.pp-result-body ul, .pp-result-body ol {
    margin: 0.5rem 0;
    padding-left: 1.5rem;
}
.pp-result-body li {
    margin: 0.25rem 0;
}
.pp-result-body blockquote {
    border-left: 3px solid var(--primary-light);
    margin: 0.8rem 0;
    padding-left: 1rem;
    color: var(--text-gray);
}
.pp-result-body table {
    border-collapse: collapse;
    margin: 0.8rem 0;
}
.pp-result-body th, .pp-result-body td {
    border: 1px solid var(--border);
    padding: 0.4rem 0.8rem;
    text-align: left;
}
.pp-result-body th {
    background: var(--bg-hover);
}
/* ================================================
   Webhooks Enhanced UI
   ================================================ */
.webhooks-stats-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-bottom: 16px; }
.webhook-stat-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; display: flex; align-items: center; gap: 12px; }
.webhook-stat-card .stat-icon { font-size: 1.4rem; }
.webhook-stat-card .stat-info { flex: 1; }
.webhook-stat-card .stat-label { font-size: .72rem; color: var(--text-secondary); text-transform: uppercase; letter-spacing: .5px; }
.webhook-stat-card .stat-value { font-size: 1.2rem; font-weight: 700; color: var(--text); }
.webhooks-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.wh-toolbar-left { display: flex; gap: 8px; flex-wrap: wrap; flex: 1; }
.wh-toolbar-right { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.wh-search-input { padding: 7px 12px; border: 1px solid var(--border); border-radius: 7px; background: var(--card-bg); color: var(--text); font-size: .82rem; width: 220px; }
.wh-filter-select { padding: 7px 10px; border: 1px solid var(--border); border-radius: 7px; background: var(--card-bg); color: var(--text); font-size: .82rem; }
.wh-auto-refresh { display: flex; align-items: center; gap: 5px; font-size: .8rem; color: var(--text-secondary); cursor: pointer; }
.wh-auto-refresh input { cursor: pointer; }
.wh-table-wrapper { background: var(--card-bg); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; margin-bottom: 12px; }
.wh-pagination { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 10px; }
.wh-page-btn { padding: 6px 14px; border: 1px solid var(--border); border-radius: 7px; background: var(--card-bg); color: var(--text); font-size: .8rem; cursor: pointer; }
.wh-page-btn:disabled { opacity: .4; cursor: not-allowed; }
.wh-page-info { font-size: .8rem; color: var(--text-secondary); }
.wh-modal { position: fixed; inset: 0; background: rgba(0,0,0,.5); display: flex; align-items: center; justify-content: center; z-index: 9999; }
.wh-modal-content { background: var(--card-bg); border-radius: 12px; width: 560px; max-width: 98vw; max-height: 88vh; overflow: auto; box-shadow: 0 20px 60px rgba(0,0,0,.3); }
.wh-logs-modal-content { width: 720px; }
.wh-modal-header { padding: 16px 20px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; }
.wh-modal-header h3 { margin: 0; font-size: 1rem; font-weight: 700; }
.wh-close-btn { background: none; border: none; font-size: 1.4rem; cursor: pointer; color: var(--text-secondary); }
.wh-modal-body { padding: 18px 20px; }
.wh-modal-footer { padding: 14px 20px; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: 10px; }
.wh-form-group { margin-bottom: 14px; }
.wh-form-group label { display: block; font-size: .8rem; font-weight: 600; margin-bottom: 5px; color: var(--text); }
.wh-form-group .form-input { width: 100%; padding: 8px 12px; border: 1px solid var(--border); border-radius: 7px; background: var(--bg); color: var(--text); font-size: .85rem; box-sizing: border-box; }
.wh-form-group small { font-size: .72rem; color: var(--text-secondary); }
.wh-logs-stats-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--border); }
.wh-log-stat { text-align: center; }
.wh-log-stat-label { display: block; font-size: .7rem; color: var(--text-secondary); text-transform: uppercase; }
.wh-log-stat-value { display: block; font-size: 1.1rem; font-weight: 700; }
.wh-log-stat-success .wh-log-stat-value { color: #22c55e; }
.wh-log-stat-fail .wh-log-stat-value { color: #ef4444; }
.wh-logs-list { max-height: 420px; overflow-y: auto; padding: 10px 12px; }
.wh-log-row { padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; margin-bottom: 8px; cursor: pointer; background: var(--bg); }
.wh-log-header { display: flex; justify-content: space-between; align-items: center; font-size: .8rem; }
.wh-log-status { font-weight: 700; }
.wh-log-time { font-size: .72rem; color: var(--text-secondary); }
.wh-log-detail pre { font-size: .68rem; color: var(--text-secondary); }
.wh-logs-footer { padding: 12px 16px; border-top: 1px solid var(--border); text-align: center; }
.empty-state { display: flex; flex-direction: column; align-items: center; padding: 40px; gap: 10px; color: var(--text-secondary); }
.empty-icon { font-size: 2.5rem; }
.empty-state h3 { margin: 0; font-size: 1rem; color: var(--text); }
.empty-state p { margin: 0; font-size: .82rem; }
.loading-placeholder { display: flex; align-items: center; gap: 10px; padding: 14px; color: var(--text-secondary); font-size: .82rem; }
.spinner { width: 16px; height: 16px; border: 2px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin .6s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.sortable { cursor: pointer; user-select: none; }
.sort-icon { font-size: .7rem; }
.btn-sm { padding: 4px 10px; font-size: .72rem; border-radius: 5px; cursor: pointer; border: 1px solid var(--border); background: var(--bg); color: var(--text); }
.btn-outline { border: 1px solid var(--accent); color: var(--accent); background: transparent; }
.btn-outline:hover { background: var(--accent); color: #fff; }
.btn-danger { border: 1px solid #ef4444; color: #ef4444; background: transparent; }
.btn-danger:hover { background: #ef4444; color: #fff; }
@media (max-width: 768px) {
  .webhooks-stats-row { grid-template-columns: repeat(3, 1fr); }
  .wh-search-input { width: 160px; }
  .wh-toolbar-left { width: 100%; }
  .wh-logs-stats-row { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .webhooks-stats-row { grid-template-columns: repeat(2, 1fr); }
}
/* ===== FAQ Section (light mode) ===== */
.faq-section { background: var(--bg-card); }
.faq-grid { max-width: 820px; margin: 0 auto; }
.faq-item { border: 1px solid var(--border); border-radius: 10px; margin-bottom: 0.7rem; overflow: hidden; background: var(--card); transition: border-color 0.2s; }
.faq-item:hover { border-color: #1890FF; }
.faq-q { width: 100%; background: var(--card); border: none; padding: 1rem 1.2rem; display: flex; justify-content: space-between; align-items: center; font-size: 0.95rem; font-weight: 600; color: var(--d); cursor: pointer; text-align: left; font-family: inherit; transition: background 0.2s; gap: 1rem; }
.faq-q:hover { background: var(--bg); }
.faq-q .arrow { transition: transform 0.3s; font-size: 0.75rem; color: var(--gray); flex-shrink: 0; }
.faq-item.open .faq-q .arrow { transform: rotate(180deg); color: #1890FF; }
.faq-a { max-height: 0; overflow: hidden; transition: max-height 0.3s ease, padding 0.3s ease; font-size: 0.9rem; color: var(--gr); line-height: 1.7; padding: 0 1.2rem; }
.faq-item.open .faq-a { max-height: 400px; padding: 0 1.2rem 1rem 1.2rem; border-top: 1px solid var(--border); margin-top: 0; padding-top: 0.8rem; }
@media (max-width: 768px) {
  .faq-q { font-size: 0.88rem; padding: 0.85rem 1rem; }
  .faq-a { font-size: 0.85rem; }
}

/* ===== Trust Badges Section (light mode) ===== */
.trust-section { background: var(--bg-card); padding: 4rem 2rem; }
.trust-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; max-width: 1100px; margin: 0 auto; }
.trust-card { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 1.5rem 1.2rem; display: flex; align-items: center; gap: 1rem; transition: all 0.25s; }
.trust-card:hover { border-color: #1890FF; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(24, 144, 255, 0.08); }
.trust-icon { width: 48px; height: 48px; border-radius: 10px; background: rgba(24, 144, 255, 0.1); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: #1890FF; }
.trust-icon svg { width: 26px; height: 26px; }
.trust-text { flex: 1; min-width: 0; }
.trust-title { font-size: 0.95rem; font-weight: 600; color: var(--d); margin-bottom: 0.15rem; }
.trust-desc { font-size: 0.78rem; color: var(--gr); line-height: 1.4; }
.trust-cta { text-align: center; margin-top: 2rem; color: var(--gr); font-size: 0.88rem; }
.trust-cta a { color: #1890FF; text-decoration: none; font-weight: 500; }
.trust-cta a:hover { text-decoration: underline; }
@media (max-width: 900px) { .trust-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .trust-grid { grid-template-columns: 1fr; } .trust-card { padding: 1.1rem 1rem; } }

/* ===== Newsletter Section (light mode) ===== */
.newsletter-section { background: #FFFFFF; padding: 4rem 2rem; }
.newsletter-inner { max-width: 640px; margin: 0 auto; text-align: center; }
.newsletter-section .section-head h2 { color: #0F172A; }
.newsletter-section .section-head p { color: #374151; }
.newsletter-form { display: flex; gap: 0.6rem; max-width: 480px; margin: 0 auto; flex-wrap: wrap; }
.newsletter-input { flex: 1; min-width: 220px; padding: 0.85rem 1.1rem; border: 1px solid #E5E7EB; border-radius: 8px; background: #F9FAFB; color: #0F172A; font-size: 0.95rem; font-family: inherit; transition: all 0.2s; outline: 0; }
.newsletter-input::placeholder { color: #9CA3AF; }
.newsletter-input:focus { border-color: #1890FF; background: #FFFFFF; box-shadow: 0 0 0 3px rgba(24, 144, 255, 0.1); }
.newsletter-btn { padding: 0.85rem 1.8rem; background: #1890FF; color: #fff; border: none; border-radius: 8px; font-size: 0.95rem; font-weight: 600; cursor: pointer; transition: all 0.2s; font-family: inherit; white-space: nowrap; }
.newsletter-btn:hover { background: #0373F3; transform: translateY(-1px); }
.newsletter-btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }
.newsletter-msg { margin-top: 0.8rem; font-size: 0.88rem; min-height: 1.2rem; }
.newsletter-msg.success { color: #4ADE80; }
.newsletter-msg.error { color: #F87171; }
.newsletter-privacy { margin-top: 0.8rem; font-size: 0.78rem; color: #6B7280; }
.newsletter-privacy a { color: #1890FF; text-decoration: underline; }
.newsletter-perks { display: flex; gap: 1rem; justify-content: center; margin-top: 1.5rem; flex-wrap: wrap; }
.newsletter-perk { color: #374151; font-size: 0.82rem; display: flex; align-items: center; gap: 0.35rem; }
.newsletter-perk svg { width: 14px; height: 14px; color: #1890FF; }
@media (max-width: 560px) { .newsletter-form { flex-direction: column; } .newsletter-input { min-width: 0; } .newsletter-btn { width: 100%; } }

/* ===== Live Chat Widget (FAB) ===== */
.livechat-fab { position: fixed; right: 24px; bottom: 24px; width: 60px; height: 60px; border-radius: 50%; background: #1890FF; color: #fff; border: none; cursor: pointer; box-shadow: 0 6px 20px rgba(24, 144, 255, 0.35); display: flex; align-items: center; justify-content: center; z-index: 9998; transition: all 0.25s; }
.livechat-fab:hover { background: #0373F3; transform: translateY(-2px); box-shadow: 0 8px 24px rgba(24, 144, 255, 0.5); }
.livechat-fab svg { width: 28px; height: 28px; }
.livechat-fab.open { background: #64748B; transform: rotate(0deg); }
.livechat-fab.open:hover { background: #475569; }
.livechat-fab-badge { position: absolute; top: -2px; right: -2px; width: 18px; height: 18px; border-radius: 50%; background: #22C55E; border: 2px solid #fff; }

.livechat-window { position: fixed; right: 24px; bottom: 100px; width: 360px; max-width: calc(100vw - 48px); background: var(--card); border-radius: 16px; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15); border: 1px solid var(--border); z-index: 9997; overflow: hidden; opacity: 0; transform: translateY(20px) scale(0.95); pointer-events: none; transition: all 0.25s ease; transform-origin: bottom right; }
.livechat-window.open { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.livechat-header { padding: 1.2rem 1.4rem; background: linear-gradient(135deg, #0F172A 0%, #1E293B 100%); color: #fff; }
.livechat-greeting { font-size: 1.05rem; font-weight: 600; margin-bottom: 0.2rem; }
.livechat-subtitle { font-size: 0.82rem; color: rgba(255, 255, 255, 0.75); display: flex; align-items: center; gap: 0.4rem; }
.livechat-online-dot { width: 8px; height: 8px; border-radius: 50%; background: #4ADE80; display: inline-block; box-shadow: 0 0 6px #4ADE80; }
.livechat-body { padding: 0.5rem; }
.livechat-option { display: flex; align-items: center; gap: 0.9rem; padding: 0.85rem 1rem; border-radius: 10px; cursor: pointer; transition: background 0.15s; text-decoration: none; color: var(--d); }
.livechat-option:hover { background: var(--bg); }
.livechat-option-icon { width: 36px; height: 36px; border-radius: 8px; background: rgba(24, 144, 255, 0.1); color: #1890FF; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.livechat-option-icon svg { width: 18px; height: 18px; }
.livechat-option-text { flex: 1; min-width: 0; }
.livechat-option-title { font-size: 0.9rem; font-weight: 600; margin-bottom: 0.1rem; }
.livechat-option-desc { font-size: 0.78rem; color: var(--gr); }
.livechat-option-arrow { color: var(--l); font-size: 1.2rem; flex-shrink: 0; }
.livechat-divider { height: 1px; background: var(--border); margin: 0.3rem 0.8rem; }
.livechat-footer { padding: 0.7rem 1.2rem; background: var(--bg); font-size: 0.74rem; color: var(--gr); text-align: center; border-top: 1px solid var(--border); }
@media (max-width: 480px) {
  .livechat-fab { right: 16px; bottom: 16px; width: 54px; height: 54px; }
  .livechat-window { right: 16px; bottom: 86px; width: calc(100vw - 32px); }
}

/* Dark mode */
html[data-theme="dark"] .livechat-window { box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5); }
html[data-theme="dark"] .livechat-option:hover { background: #1E293B; }

.livechat-fab svg, .livechat-fab span { pointer-events: none; }
.livechat-window a, .livechat-window button { pointer-events: auto; }

/* ===== Integrations Section (light mode) ===== */
.integrations-section { background: var(--bg-main); padding: 4rem 2rem; }
.integrations-tabs { display: flex; gap: 0.4rem; margin-bottom: 1.2rem; flex-wrap: wrap; justify-content: center; }
.integrations-tab { background: var(--card); border: 1px solid var(--border); border-radius: 8px; padding: 0.55rem 1.1rem; font-size: 0.88rem; font-weight: 500; color: var(--gr); cursor: pointer; transition: all 0.2s; font-family: inherit; display: flex; align-items: center; gap: 0.4rem; }
.integrations-tab:hover { color: var(--d); border-color: #1890FF; }
.integrations-tab.active { background: #1890FF; border-color: #1890FF; color: #fff; }
.integrations-tab svg { width: 16px; height: 16px; }
.integrations-panels { max-width: 880px; margin: 0 auto; }
.integrations-panel { display: none; }
.integrations-panel.active { display: block; }
.integrations-code { background: #0F172A; border-radius: 12px; overflow: hidden; border: 1px solid #1E293B; }
.integrations-code-header { padding: 0.7rem 1.2rem; background: #1E293B; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #334155; }
.integrations-code-lang { color: #94A3B8; font-size: 0.82rem; font-weight: 600; }
.integrations-code-copy { background: transparent; border: 1px solid #475569; color: #94A3B8; padding: 0.3rem 0.7rem; border-radius: 6px; font-size: 0.78rem; cursor: pointer; transition: all 0.2s; font-family: inherit; }
.integrations-code-copy:hover { color: #fff; border-color: #94A3B8; }
.integrations-code-copy.copied { background: #22C55E; border-color: #22C55E; color: #fff; }
.integrations-code pre { padding: 1.2rem 1.4rem; margin: 0; color: #E2E8F0; font-size: 0.85rem; line-height: 1.7; font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace; overflow-x: auto; }
.integrations-code pre code { color: inherit; background: transparent; padding: 0; font-family: inherit; }
.integrations-quickstart { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 2rem; max-width: 880px; margin-left: auto; margin-right: auto; }
.integrations-quick { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 1.1rem 1.2rem; display: flex; align-items: center; gap: 0.9rem; transition: all 0.2s; }
.integrations-quick:hover { border-color: #1890FF; transform: translateY(-2px); }
.integrations-quick-icon { width: 38px; height: 38px; border-radius: 8px; background: rgba(24, 144, 255, 0.1); color: #1890FF; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.integrations-quick-icon svg { width: 20px; height: 20px; }
.integrations-quick-text { flex: 1; min-width: 0; }
.integrations-quick-title { font-size: 0.92rem; font-weight: 600; color: var(--d); margin-bottom: 0.1rem; }
.integrations-quick-desc { font-size: 0.78rem; color: var(--gr); }
@media (max-width: 768px) { .integrations-quickstart { grid-template-columns: 1fr; } .integrations-code pre { font-size: 0.78rem; padding: 1rem; } }

/* Dark mode */
html[data-theme="dark"] .integrations-section { background: #1E293B; }
html[data-theme="dark"] .integrations-tab { background: #0F172A; border-color: #334155; }
html[data-theme="dark"] .integrations-tab.active { background: #1890FF; border-color: #1890FF; }


/* === Model card v3: 3-band color-coded design (2026-06-25 23:58) === */
html[data-theme="dark"] .model-card {
  background: #1E293B !important;
  border: 1px solid #475569 !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4) !important;
  overflow: hidden !important;
  padding: 0 !important;
}
html[data-theme="dark"] .model-card:hover {
  border-color: #1890FF !important;
  box-shadow: 0 8px 24px rgba(24,144,255,0.35) !important;
  transform: translateY(-3px);
}
html[data-theme="dark"] .model-card.selected {
  background: #1E293B !important;
  border-color: #1890FF !important;
  box-shadow: 0 0 0 2px rgba(24,144,255,0.5), 0 8px 24px rgba(24,144,255,0.3) !important;
}

/* Header band: slightly darker, padded */
html[data-theme="dark"] .model-card-header {
  background: linear-gradient(180deg, #0F172A 0%, #1E293B 100%);
  padding: 0.9rem 1rem 0.7rem !important;
  margin: 0 !important;
  border-bottom: 1px solid #334155;
  align-items: center !important;
}
html[data-theme="dark"] .model-name {
  color: #FFFFFF !important;
  font-weight: 800 !important;
  font-size: 1rem !important;
  letter-spacing: -0.01em;
}
html[data-theme="dark"] .model-provider {
  background: #1E40AF !important;
  color: #DBEAFE !important;
  border: none !important;
  font-weight: 600;
  padding: 0.3rem 0.6rem !important;
}
html[data-theme="dark"] .model-provider .provider-dot.ready { background: #4ADE80 !important; box-shadow: 0 0 6px #4ADE80; }
html[data-theme="dark"] .model-provider .provider-dot.offline { background: #94A3B8 !important; }

/* Category row */
html[data-theme="dark"] .model-card > div:nth-child(2) {
  padding: 0.6rem 1rem 0.3rem !important;
  margin: 0 !important;
}

/* Description: more spacious */
html[data-theme="dark"] .model-desc {
  color: #E2E8F0 !important;
  padding: 0.2rem 1rem 0.8rem !important;
  margin: 0 !important;
  line-height: 1.55 !important;
  font-size: 0.82rem;
  min-height: 2.6em !important;
}

/* Meta band: distinct dark zone */
html[data-theme="dark"] .model-meta {
  background: #0F172A !important;
  border-top: 1px solid #334155 !important;
  margin: 0 !important;
  padding: 0.65rem 1rem !important;
  border-radius: 0 !important;
  gap: 1rem !important;
  flex-wrap: wrap;
}
html[data-theme="dark"] .model-meta-item {
  color: #94A3B8 !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  font-size: 0.65rem !important;
  letter-spacing: 0.05em;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
html[data-theme="dark"] .model-meta-item span {
  color: #FFFFFF !important;
  font-weight: 700;
  font-size: 0.8rem;
  background: rgba(24,144,255,0.18);
  padding: 0.15rem 0.5rem;
  border-radius: 5px;
  margin-left: 0;
  letter-spacing: normal;
  text-transform: none;
}
html[data-theme="dark"] .model-meta-item:nth-child(2) span {
  color: #4ADE80 !important;
  background: rgba(34,197,94,0.2);
  border: 1px solid rgba(34,197,94,0.4);
}

/* Category badges: solid bright color */
html[data-theme="dark"] .cat-general     { background: #2563EB;  color: #FFFFFF; border: none; font-weight: 700; }
html[data-theme="dark"] .cat-coding      { background: #059669;  color: #FFFFFF; border: none; font-weight: 700; }
html[data-theme="dark"] .cat-reasoning   { background: #B45309;  color: #FFFFFF; border: 1px solid #FBBF24; font-weight: 700; }
html[data-theme="dark"] .cat-vision      { background: #BE185D;  color: #FFFFFF; border: none; font-weight: 700; }
html[data-theme="dark"] .cat-fast        { background: #4F46E5;  color: #FFFFFF; border: none; font-weight: 700; }
html[data-theme="dark"] .cat-cheap       { background: #16A34A;  color: #FFFFFF; border: none; font-weight: 700; }
html[data-theme="dark"] .cat-chinese     { background: #B91C1C;  color: #FFFFFF; border: none; font-weight: 700; }

/* Top gradient bar accent on hover */
html[data-theme="dark"] .model-card:hover::before { opacity: 1 !important; }



/* === KPI cards dark mode (2026-06-26 00:25) === */
html[data-theme="dark"] .kpi-card {
  background: linear-gradient(180deg, #1E293B 0%, #182234 100%) !important;
  border: 1px solid #475569 !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.35) !important;
}
html[data-theme="dark"] .kpi-card:hover {
  border-color: #1890FF !important;
  box-shadow: 0 8px 24px rgba(24,144,255,0.28) !important;
  transform: translateY(-2px);
}
html[data-theme="dark"] .kpi-value {
  color: #FFFFFF !important;
}
html[data-theme="dark"] .kpi-label {
  color: #94A3B8 !important;
}
html[data-theme="dark"] .kpi-sub {
  color: #94A3B8 !important;
}
/* Icon backgrounds: darker but still tinted */
html[data-theme="dark"] .kpi-card .kpi-icon { background: #0F172A !important; }
html[data-theme="dark"] .kpi-card.models .kpi-icon { background: rgba(24,144,255,0.18) !important; }
html[data-theme="dark"] .kpi-card.providers .kpi-icon { background: rgba(34,197,94,0.18) !important; }
html[data-theme="dark"] .kpi-card.ready .kpi-icon { background: rgba(245,158,11,0.18) !important; }
html[data-theme="dark"] .kpi-card.unconfigured .kpi-icon { background: rgba(124,58,237,0.18) !important; }
/* Special color values stay bright */
html[data-theme="dark"] .kpi-card.ready .kpi-value { color: #4ADE80 !important; }
html[data-theme="dark"] .kpi-card.unconfigured .kpi-value { color: #A78BFA !important; }




/* === All 8 filter chips: unify to active blue style in dark mode (2026-06-26 00:52) === */
html[data-theme="dark"] .filter-tab {
  background: rgba(24,144,255,0.15) !important;
  border: 1px solid rgba(24,144,255,0.5) !important;
  color: #FFFFFF !important;
}
html[data-theme="dark"] .filter-tab:hover {
  background: rgba(24,144,255,0.25) !important;
  border-color: rgba(24,144,255,0.7) !important;
}
html[data-theme="dark"] .filter-tab .count {
  background: rgba(24,144,255,0.4) !important;
  color: #FFFFFF !important;
}
html[data-theme="dark"] .filter-tab.active {
  background: rgba(24,144,255,0.30) !important;
  border-color: rgba(24,144,255,0.8) !important;
  box-shadow: 0 0 0 2px rgba(24,144,255,0.2) !important;
}
html[data-theme="dark"] .filter-tab.active .count {
  background: rgba(24,144,255,0.6) !important;
}





/* === Filter bar (chip wrapper) dark mode (2026-06-26 00:46) === */
html[data-theme="dark"] .filter-bar {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}



/* === .pp-card full dark mode (2026-06-26 00:59) === */
/* Main card */
html[data-theme="dark"] .pp-card {
  background-color: #1E293B !important;
  background-image: linear-gradient(180deg, #1E293B 0%, #182234 100%) !important;
  border: 1px solid #475569 !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.35) !important;
}
/* Header */
html[data-theme="dark"] .pp-header {
  background-color: #0F172A !important;
  background-image: linear-gradient(180deg, #0F172A 0%, #1E293B 100%) !important;
  border-bottom: 1px solid #334155 !important;
}
html[data-theme="dark"] .pp-header h3 {
  color: #FFFFFF !important;
}
/* Labels */
html[data-theme="dark"] .pp-label {
  color: #94A3B8 !important;
}
/* Selected Model dropdown button */
html[data-theme="dark"] .model-select-btn {
  background: #0F172A !important;
  border-color: #475569 !important;
  color: #F1F5F9 !important;
}
html[data-theme="dark"] .model-select-btn:hover {
  border-color: #1890FF !important;
}
html[data-theme="dark"] .model-select-btn .placeholder {
  color: #94A3B8 !important;
}
/* Textarea (Prompt) */
html[data-theme="dark"] .pp-textarea {
  background: #0F172A !important;
  border-color: #475569 !important;
  color: #F1F5F9 !important;
}
html[data-theme="dark"] .pp-textarea::placeholder {
  color: #64748B !important;
}
html[data-theme="dark"] .pp-textarea:focus {
  border-color: #1890FF !important;
}
/* Parameter inputs */
html[data-theme="dark"] .pp-param label {
  color: #94A3B8 !important;
}
html[data-theme="dark"] .pp-param input {
  background: #0F172A !important;
  border-color: #475569 !important;
  color: #F1F5F9 !important;
}
html[data-theme="dark"] .pp-param input:focus {
  border-color: #1890FF !important;
}
/* Auto Router section */
html[data-theme="dark"] .auto-router-section {
  background-color: transparent !important;
  background-image: linear-gradient(135deg, rgba(24,144,255,0.10), rgba(139,92,246,0.10)) !important;
  border: 1px solid rgba(24,144,255,0.30) !important;
}
html[data-theme="dark"] .ar-title {
  color: #93C5FD !important;
}
/* Task buttons */
html[data-theme="dark"] .ar-task-btn {
  background: #0F172A !important;
  border-color: #475569 !important;
  color: #F1F5F9 !important;
}
html[data-theme="dark"] .ar-task-btn:hover {
  border-color: #1890FF !important;
  color: #FFFFFF !important;
  background: rgba(24,144,255,0.10) !important;
}
html[data-theme="dark"] .ar-task-btn.active {
  background: rgba(24,144,255,0.20) !important;
  border-color: rgba(24,144,255,0.6) !important;
  color: #FFFFFF !important;
}
/* Auto Detect button - keep special gradient */
html[data-theme="dark"] .ar-detect-btn {
  background-color: transparent !important;
  background-image: linear-gradient(135deg, rgba(24,144,255,0.20), rgba(139,92,246,0.20)) !important;
  border-color: #1890FF !important;
  color: #93C5FD !important;
}
html[data-theme="dark"] .ar-detect-btn:hover {
  background-color: transparent !important;
  background-image: linear-gradient(135deg, rgba(24,144,255,0.35), rgba(139,92,246,0.35)) !important;
  color: #FFFFFF !important;
}
/* Result panel */
html[data-theme="dark"] .pp-result {
  background: #0F172A !important;
  border: 1px solid #334155 !important;
}
html[data-theme="dark"] .pp-result-header {
  color: #94A3B8 !important;
  border-bottom: 1px solid #334155 !important;
}
html[data-theme="dark"] .pp-result-body {
  color: #E2E8F0 !important;
}



/* === ar-suggestion dark mode (2026-06-26 01:10) === */
html[data-theme="dark"] .ar-suggestion {
  color: #CBD5E1 !important;
  font-weight: 500 !important;
  font-size: 0.82rem !important;
  line-height: 1.6 !important;
  padding: 0.5rem 0 !important;
}
html[data-theme="dark"] .ar-suggestion strong {
  color: #FFFFFF !important;
  font-weight: 700 !important;
}
/* Override inline color:var(--primary) used in [cheap] label */
html[data-theme="dark"] .ar-suggestion span[style*="color:var(--primary)"] {
  color: #93C5FD !important;
  background: rgba(24,144,255,0.15) !important;
  padding: 0.1rem 0.4rem !important;
  border-radius: 4px !important;
  font-weight: 600 !important;
  font-size: 0.72rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
}
/* Override inline color:var(--text-gray) for "Also good:" */
html[data-theme="dark"] .ar-suggestion span[style*="color:var(--text-gray)"] {
  color: #94A3B8 !important;
}
/* "Also good:" label highlighted */
html[data-theme="dark"] .ar-suggestion strong + span {
  color: #4ADE80 !important;
  font-weight: 500 !important;
}



/* === Footer full dark mode (2026-06-26 01:16) === */
html[data-theme="dark"] footer,
html[data-theme="dark"] .section.footer-section,
html[data-theme="dark"] .footer {
  background: #0F172A !important;
  border-color: #334155 !important;
  color: #F1F5F9 !important;
}
/* Footer columns */
html[data-theme="dark"] .footer-col h4 {
  color: #FFFFFF !important;
}
html[data-theme="dark"] .footer-col a {
  color: #94A3B8 !important;
}
html[data-theme="dark"] .footer-col a:hover {
  color: #1890FF !important;
}
/* Copyright strip */
html[data-theme="dark"] .footer .copyright,
html[data-theme="dark"] .copyright {
  background: #0F172A !important;
  border-top-color: #334155 !important;
}
html[data-theme="dark"] .footer .copyright p,
html[data-theme="dark"] .copyright p,
html[data-theme="dark"] .copyright {
  color: #94A3B8 !important;
}
/* Brand block text (LLMWate + tagline) */
html[data-theme="dark"] .footer-brand-block p {
  color: #94A3B8 !important;
}
html[data-theme="dark"] .footer-brand-block span[style*="color:#0F172A"] {
  color: #FFFFFF !important;
}
/* Social row icons - keep their colors but adjust background */
html[data-theme="dark"] .social-row a[style*="background:#f1f5f9"] {
  background: #1E293B !important;
}
html[data-theme="dark"] .social-row a svg {
  fill: #94A3B8 !important;
}


/* Tawk.to widget iframe - fix iOS Safari double-tap issue */
#tawkそWidget iframe,
iframe[id^='tawk_'],
.tawk-fluid-container iframe {
  pointer-events: auto !important;
  touch-action: manipulation;
}

/* Remove iOS tap highlight */
a, button, .livechat-fab {
  -webkit-tap-highlight-color: transparent;
}

/* Tawk.to chat button size override */
.tw-h-widget-button,
.tw-c在外面,
iframe[id^='tawkwidget'] {
  width: 60px !important;
  height: 60px !important;
}

/* === Breathing Glow Card Animation === */
.rainbow-card-wrapper {
  position: relative;
  max-width: 680px;
  margin: 0 auto 2rem;
  border-radius: 12px;
  animation: glow-breathe 4s ease-in-out infinite;
}

.rainbow-card-wrapper > div {
  background: #fff;
  border-radius: 8px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

@keyframes glow-breathe {
  0%, 100% {
    box-shadow:
      0 0 8px rgba(0, 240, 255, 0.3),
      0 0 20px rgba(0, 240, 255, 0.15),
      0 0 40px rgba(112, 0, 255, 0.1);
  }
  50% {
    box-shadow:
      0 0 14px rgba(0, 240, 255, 0.5),
      0 0 35px rgba(112, 0, 255, 0.3),
      0 0 60px rgba(112, 0, 255, 0.15);
  }
}

/* Dark mode: Hero rainbow card inner content - dark background */
html[data-theme="dark"] .hero-card-inner, html[data-theme="dark"] .rainbow-card-wrapper > div {
  background: #1E293B !important;
  border: 1px solid #334155 !important;
}
html[data-theme="dark"] .hero-card-inner .hero-title, html[data-theme="dark"] .rainbow-card-wrapper .hero-title {
  color: #F1F5F9 !important;
}
html[data-theme="dark"] .hero-card-inner .hero-desc, html[data-theme="dark"] .rainbow-card-wrapper .hero-desc {
  color: #CBD5E1 !important;
}
html[data-theme="dark"] .hero-card-inner .data-num, html[data-theme="dark"] .rainbow-card-wrapper .data-num {
  color: #60A5FA !important;
}
html[data-theme="dark"] .hero-card-inner .data-text, html[data-theme="dark"] .rainbow-card-wrapper .data-text {
  color: #94A3AF !important;
}
html[data-theme="dark"] .hamburger:focus{outline:0!important;outline-offset:-100px!important}
html[data-theme="dark"] .hamburger:focus-visible{outline:0!important;outline-offset:-100px!important}