/* ============================
   Open API Platform - Common Styles
   ============================ */

:root {
  /* ===== Ant Design 5 Design Tokens ===== */
  --ant-primary-color: #3370FF;
  --ant-primary-color-hover: #1456F0;
  --ant-primary-color-active: #0D47D9;
  --ant-primary-1: #E8F0FE;
  --ant-primary-color-outline: rgba(51,112,255,0.12);
  --ant-success-color: #00A870;
  --ant-warning-color: #E37318;
  --ant-error-color: #E03E4D;
  --ant-text-color: #1F2329;
  --ant-text-color-secondary: #646A73;
  --ant-text-color-tertiary: #8F959E;
  --ant-bg-color-layout: #F5F6F7;
  --ant-bg-color-container: #FFFFFF;
  --ant-border-color-base: #E5E6EB;
  --ant-border-color-split: #F0F1F3;
  --ant-border-radius-lg: 16px;
  --ant-border-radius-base: 12px;
  --ant-font-size-sm: 12px;
  --ant-font-size: 14px;
  --ant-font-size-lg: 16px;
  --ant-font-size-xl: 20px;
  --ant-line-height: 1.5715;

  /* ===== Layout tokens ===== */
  --sidebar-width: 260px;
  --sidebar-right-width: 416px;
  --header-height: 56px;

  /* ===== Sidebar design tokens ===== */
  --sidebar-item-height: 36px;
  --sidebar-level-indent: 16px;
  --sidebar-active-bar-width: 3px;
  --sidebar-active-color: #3370FF;
  --sidebar-active-color-outline: rgba(51,112,255,0.12);
  --sidebar-active-bg: #E8F0FE;
  --sidebar-hover-bg: #F5F6F7;

  /* ===== Shadow & Motion tokens ===== */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md: 0 2px 8px rgba(0,0,0,0.08);
  --shadow-lg: 0 4px 16px rgba(0,0,0,0.12);
  --transition: 0.2s ease;

  /* ===== Backwards-compatible aliases (keep existing var() refs working) ===== */
  --primary: var(--ant-primary-color);
  --primary-dark: var(--ant-primary-color-hover);
  --primary-light: var(--ant-primary-1);
  --color-success: var(--ant-success-color);
  --color-warning: var(--ant-warning-color);
  --color-error: var(--ant-error-color);
  --text-primary: var(--ant-text-color);
  --text-secondary: var(--ant-text-color-secondary);
  --text-tertiary: var(--ant-text-color-tertiary);
  --bg-page: var(--ant-bg-color-layout);
  --bg-white: var(--ant-bg-color-container);
  --border: var(--ant-border-color-base);
  --border-light: var(--ant-border-color-split);
  --radius: var(--ant-border-radius-lg);
  --radius-sm: var(--ant-border-radius-base);
  --font-size-sm: var(--ant-font-size-sm);
  --font-size-base: var(--ant-font-size);
  --font-size-lg: var(--ant-font-size-lg);
  --font-size-xl: var(--ant-font-size-xl);
  --line-height-base: var(--ant-line-height);
}

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

iconify-icon {
  display: inline-flex;
  vertical-align: middle;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  color: var(--text-primary);
  background: var(--bg-page);
  line-height: 1.6;
  min-height: 100vh;
}

a { color: var(--primary); text-decoration: none; }
a:hover { color: var(--primary-dark); }

/* ============================
   HEADER
   ============================ */
.header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  height: var(--header-height);
  background: var(--bg-white);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  padding: 0 24px;
  gap: 32px;
}

.header-logo {
  display: flex; align-items: center; gap: 10px;
  font-size: 18px; font-weight: 700; color: var(--text-primary);
  white-space: nowrap;
  text-decoration: none;
}
.header-logo .logo-icon {
  width: 32px; height: 32px;
  border-radius: 6px;
  object-fit: contain;
}
.header-logo:hover { color: var(--text-primary); }

.logo-icon-inline {
  width: 32px; height: 32px;
  border-radius: 6px;
  object-fit: contain;
  margin-right: 8px; vertical-align: middle;
}

.header-nav {
  display: flex; align-items: center; gap: 4px;
  flex: 1;
}
.header-nav a,
.header-nav button {
  display: inline-flex; align-items: center;
  height: 34px; padding: 0 16px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  cursor: pointer;
  font-family: inherit;
  font-size: 14px; font-weight: 500;
  color: var(--text-secondary);
  transition: var(--transition);
  white-space: nowrap;
}
.header-nav a:hover,
.header-nav a.active,
.header-nav button:hover,
.header-nav button.active {
  color: var(--primary);
  background: var(--primary-light);
}
.header-nav button:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.header-nav-menu { position: relative; }
.header-nav-menu > button[aria-haspopup="menu"] iconify-icon { margin-left: 4px; transition: transform 0.2s ease; }
.header-nav-menu:hover > button[aria-haspopup="menu"] iconify-icon,
.header-nav-menu.is-open > button[aria-haspopup="menu"] iconify-icon { transform: rotate(180deg); }
.header-nav-dropdown {
  display: none;
  position: absolute;
  z-index: 30;
  top: calc(100% + 6px);
  left: 0;
  min-width: 152px;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-white);
  box-shadow: 0 8px 20px rgba(31, 35, 41, 0.12);
}
.header-nav-menu:hover .header-nav-dropdown,
.header-nav-menu.is-open .header-nav-dropdown { display: block; }
.header-nav-dropdown a {
  display: flex;
  height: 34px;
  padding: 0 10px;
  border-radius: 6px;
  color: var(--text-primary);
  text-decoration: none;
}
.header-nav-dropdown a:hover { color: var(--primary); background: var(--primary-light); }
.header-nav-dropdown > span { display: block; padding: 8px 10px; color: var(--text-tertiary); font-size: 13px; white-space: nowrap; }

.header-search {
  position: relative;
  width: 280px;
}
.header-search input {
  width: 100%; height: 34px;
  padding: 0 16px 0 38px;
  border: 1px solid var(--border);
  border-radius: 50px;
  font-size: 13px;
  outline: none;
  background: var(--bg-page);
  transition: var(--transition);
}
.header-search input:focus {
  border-color: var(--primary);
  background: var(--bg-white);
  box-shadow: 0 0 0 2px rgba(51,112,255,0.12);
}
.header-search .search-icon {
  position: absolute; left: 14px; top: 50%;
  transform: translateY(-50%);
  color: var(--text-tertiary);
}

/* ============================
   SIDEBAR (Left)
   ============================ */
.sidebar {
  position: fixed; top: var(--header-height); left: 0; bottom: 0;
  width: var(--sidebar-width);
  background: linear-gradient(180deg, #FAFBFC 0%, var(--bg-white) 8%);
  border-right: 1px solid var(--border);
  overflow-y: auto;
  padding: 16px 0 20px;
}

/* ===== Sidebar Search ===== */
.sidebar-search {
  padding: 0 12px 12px;
}
.sidebar-search input {
  width: 100%; height: 34px;
  padding: 0 12px 0 34px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 13px;
  outline: none;
  background: var(--bg-white);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24'%3E%3Cpath fill='%238F959E' d='M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5A6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5S14 7.01 14 9.5S11.99 14 9.5 14'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left 10px center;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.sidebar-search input:focus {
  border-color: var(--sidebar-active-color);
  box-shadow: 0 0 0 3px rgba(51,112,255,0.10);
}
.sidebar-search input::placeholder {
  color: var(--text-tertiary);
}

/* ===== Business Title ===== */
.sidebar-business-title {
  margin: 0 12px 12px;
  padding: 12px 12px;
  background: linear-gradient(135deg, var(--primary-light) 0%, rgba(232,240,254,0.3) 100%);
  border-radius: 10px;
  border-left: 3px solid var(--sidebar-active-color);
  font-size: 14px; font-weight: 700;
  color: var(--text-primary);
}

/* ===== Arrow indicator ===== */
.sg-arrow, .arrow {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px;
  font-size: 10px; color: var(--text-tertiary);
  flex-shrink: 0;
  transition: transform 0.25s ease, color 0.2s ease;
}
/* Rotate arrow when group is open (not collapsed) */
.sidebar-subgroup:not(.collapsed) > .sidebar-subtitle .sg-arrow,
.sidebar-subsubgroup:not(.collapsed) > .sidebar-subsubtitle .sg-arrow {
  color: var(--sidebar-active-color);
}

/* ===== Level 1: Group ===== */
.sidebar-group { margin-bottom: 2px; }
.sidebar-group + .sidebar-group {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--border-light);
}

.sidebar-group-title {
  display: flex; align-items: center;
  margin: 0 8px;
  padding: 8px 12px;
  height: var(--sidebar-item-height);
  font-size: 13px; font-weight: 600;
  color: var(--text-primary);
  cursor: pointer;
  user-select: none;
  gap: 4px;
  border-radius: 8px;
  transition: background 0.2s ease;
}
.sidebar-group-title:hover {
  background: var(--sidebar-hover-bg);
}

/* Collapsible items container */
.sidebar-items {
  overflow: hidden;
  max-height: 5000px;
  transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  padding: 2px 0;
}
.sidebar-group.collapsed > .sidebar-items {
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
}

.sidebar-items a {
  display: block;
  margin: 1px 8px;
  padding: 0 12px 0 28px;
  height: var(--sidebar-item-height);
  font-size: 13px; color: var(--text-secondary);
  border-radius: 8px;
  transition: all 0.2s ease;
  line-height: var(--sidebar-item-height);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  position: relative;
}
.sidebar-items a::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 0; height: 0;
  border-radius: 0;
  background: var(--sidebar-active-color);
  transition: all 0.2s ease;
}
.sidebar-items a:hover {
  color: var(--sidebar-active-color);
  background: var(--sidebar-hover-bg);
}
.sidebar-items a.active {
  color: var(--sidebar-active-color);
  background: var(--sidebar-active-bg);
  font-weight: 600;
}
.sidebar-items a.active::before {
  width: 3px; height: 18px;
  border-radius: 2px;
  left: 0;
}

/* Custom API document modules use a quieter, article-oriented hierarchy. */
.api-doc-module-group {
  margin-top: 14px !important;
  padding-top: 10px !important;
}
.api-doc-module-group .sidebar-group-title {
  height: auto;
  min-height: 40px;
  padding: 9px 12px;
  gap: 2px;
  font-size: 14px;
  font-weight: 500;
  line-height: 22px;
}
.api-doc-module-group .sg-arrow {
  width: 16px;
  margin-right: 2px;
}
.api-doc-module-group.collapsed .sg-arrow {
  transform: rotate(-90deg);
}
.api-doc-module-group .sidebar-items {
  padding: 1px 0 8px;
}
.api-doc-module-group .api-doc-tree {
  /* Root nodes are children of the module heading, not peers of it. */
  padding: 2px 8px 10px 24px;
}
.api-doc-module-group .api-doc-tree-node {
  margin: 2px 0;
}
.api-doc-module-group .api-doc-tree-children {
  margin: 2px 0 2px 13px;
  padding-left: 10px;
  border-left: 1px solid #e5e6eb;
}
.api-doc-module-group .api-doc-tree-directory {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 32px;
  gap: 7px;
  padding: 5px 9px;
  border: 0;
  border-radius: 6px;
  color: #4e5969;
  background: transparent;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  line-height: 20px;
  text-align: left;
  cursor: pointer;
}
.api-doc-module-group .api-doc-tree-directory:hover {
  background: #f2f5ff;
  color: #3370ff;
}
.api-doc-module-group .api-doc-directory-arrow {
  flex: 0 0 12px;
  color: #8f959e;
  font-size: 15px;
  line-height: 1;
  text-align: center;
}
.api-doc-module-group .api-doc-tree-directory-node.collapsed > .api-doc-tree-children {
  display: none;
}
.api-doc-module-group .sidebar-items a.api-doc-tree-content {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 32px;
  margin: 0;
  padding: 5px 9px;
  border-radius: 6px;
  color: #5f6670;
  font-size: 13px;
  line-height: 20px;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}
.api-doc-module-group .api-doc-content-spacer {
  flex: 0 0 12px;
}
.api-doc-module-group .sidebar-items a.api-doc-tree-content:hover {
  color: #3370ff;
  background: #f2f5ff;
}
.api-doc-module-group .sidebar-items a.api-doc-tree-content.active {
  color: #3370ff;
  background: #edf3ff;
  font-weight: 600;
}
.api-doc-module-group .sidebar-items a.api-doc-tree-content::before {
  display: none;
}

/* ============================
   SIDEBAR NESTED LEVELS
   ============================ */

/* ===== Level 2: Product (subgroup) ===== */
.sidebar-subgroup { margin: 0; }
.sidebar-subgroup + .sidebar-subgroup {
  margin-top: 2px;
  padding-top: 2px;
}

/* Collapsed subgroup: add horizontal separator below */
.sidebar-subgroup.collapsed {
  border-bottom: 1px solid var(--border-light);
  margin-bottom: 2px;
  padding-bottom: 6px;
}

.sidebar-subtitle {
  display: flex; align-items: center;
  margin: 0 8px;
  padding: 0 8px 0 16px;
  height: var(--sidebar-item-height);
  font-size: 14px; font-weight: 600;
  color: var(--text-primary);
  cursor: pointer; user-select: none;
  gap: 4px;
  border-radius: 8px;
  transition: background 0.2s ease, color 0.2s ease;
}
.sidebar-subtitle:hover { background: var(--sidebar-hover-bg); }

/* Collapsible subitems */
.sidebar-subitems {
  overflow: hidden;
  max-height: 5000px;
  transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  padding: 1px 0;
}
.sidebar-subgroup.collapsed > .sidebar-subitems {
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
}

/* ===== Level 3: Category (subsubgroup) ===== */
.sidebar-subsubgroup { margin: 0; }

/* Collapsed subsubgroup: subtle separator */
.sidebar-subsubgroup.collapsed {
  border-bottom: 1px solid var(--border-light);
  margin-bottom: 2px;
  padding-bottom: 4px;
}

.sidebar-subsubtitle {
  display: flex; align-items: center;
  margin: 0 8px;
  padding: 0 8px 0 52px;
  height: var(--sidebar-item-height);
  font-size: 13px; font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer; user-select: none;
  gap: 4px;
  border-radius: 8px;
  transition: background 0.2s ease, color 0.2s ease;
}
.sidebar-subsubtitle:hover { background: var(--sidebar-hover-bg); color: var(--text-primary); }

/* Collapsible subsubitems */
.sidebar-subsubitems {
  overflow: hidden;
  max-height: 5000px;
  transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  padding: 1px 0;
}
.sidebar-subsubgroup.collapsed > .sidebar-subsubitems {
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
}

/* ===== Level 4: Document leaf ===== */
.sidebar-leaf {
  display: block;
  margin: 1px 8px;
  padding: 0 12px 0 102px;
  height: var(--sidebar-item-height);
  font-size: 13px; color: var(--text-secondary);
  border-radius: 8px;
  transition: all 0.2s ease;
  line-height: var(--sidebar-item-height);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sidebar-leaf:hover {
  color: var(--sidebar-active-color);
  background: var(--sidebar-hover-bg);
}
.sidebar-leaf.active {
  color: var(--sidebar-active-color);
  background: var(--sidebar-active-bg);
  font-weight: 600;
}

/* ============================
   CONTENT AREA
   ============================ */
.content-area {
  margin-top: var(--header-height);
  min-height: calc(100vh - var(--header-height));
  background: var(--bg-page);
}

/* ============================
   RIGHT SIDEBAR (for API doc pages)
   ============================ */
.right-sidebar {
  position: fixed; top: var(--header-height); right: 0; bottom: 0;
  width: var(--sidebar-right-width);
  background: var(--bg-white);
  border-left: 1px solid var(--border);
  overflow-y: auto;
  padding: 20px;
}

.right-sidebar-section {
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border-light);
}
.right-sidebar-section:last-child { border-bottom: none; }

.right-sidebar-label {
  font-size: 12px; color: var(--text-tertiary);
  margin-bottom: 8px;
  font-weight: 500;
}
.right-sidebar-section-text {
  font-size: 13px; color: var(--text-secondary);
}

.right-sidebar .app-selector {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px;
  background: var(--bg-page);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 13px;
}
.right-sidebar .app-selector .app-icon {
  width: 24px; height: 24px;
  background: var(--primary);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 12px;
}

/* ============================
   COMMON COMPONENTS
   ============================ */

/* Cards */
.card {
  background: var(--bg-white);
  border: 1px solid transparent;
  box-shadow: var(--shadow-sm);
  border-radius: var(--radius);
  padding: 20px;
  transition: var(--transition);
}
.card:hover {
  border-color: var(--primary);
  box-shadow: var(--shadow-md);
}
.card-title {
  font-size: 15px; font-weight: 600;
  margin-bottom: 8px;
  color: var(--text-primary);
}
.card-desc {
  font-size: 13px; color: var(--text-secondary);
  line-height: 1.6;
  margin-top: 4px;
}
.card--detail {
  padding: 32px;
  line-height: 1.8;
  font-size: 14px;
}

/* Compact button variant */
.ant-btn-sm {
  height: 28px;
  font-size: 12px;
  padding: 0 12px;
}

/* Buttons */
.ant-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 6px;
  height: 32px; padding: 0 20px;
  border: none; border-radius: var(--radius-sm);
  font-size: 14px; font-weight: 500;
  cursor: pointer;
  transition: var(--transition);
  text-decoration: none;
}
.ant-btn-primary {
  background: var(--primary);
  color: #fff;
}
.ant-btn-primary:hover { background: var(--primary-dark); color: #fff; }
.ant-btn-default {
  background: var(--bg-white);
  color: var(--text-primary);
  border: 1px solid var(--border);
}
.ant-btn-default:hover {
  color: var(--primary);
  border-color: var(--primary);
}

/* Tags */
.ant-tag {
  display: inline-flex; align-items: center;
  height: 22px; padding: 0 8px;
  border-radius: 11px;
  font-size: 12px; font-weight: 500;
}
.ant-tag-blue { background: var(--primary-light); color: var(--primary); }
.ant-tag-green { background: #E8F8EF; color: #00A870; }
.ant-tag-orange { background: #FFF3E8; color: #E37318; }
.ant-tag-gray { background: #F2F3F5; color: var(--text-secondary); }

/* Section titles */
.section-title {
  font-size: 20px; font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 20px;
}
.section-subtitle {
  font-size: 14px; color: var(--text-secondary);
  margin-bottom: 24px;
}

/* API Table */
.api-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.api-table th, .api-table td {
  text-align: left;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
}
.api-table th {
  background: var(--bg-page);
  font-weight: 600;
  color: var(--text-secondary);
  font-size: 12px;
}
.api-table td { color: var(--text-primary); }

/* ============================
   CONSULTATION TICKETS
   ============================ */
.consultation-page {
  max-width: 1280px;
  min-height: 560px;
  margin: 0 auto;
  /* The shared site header is fixed, so keep page content below it. */
  padding: calc(var(--header-height) + 36px) 24px 56px;
}
.consultation-page-header { margin-bottom: 24px; }
.consultation-page-header h1 { font-size: 24px; color: var(--text-primary); margin-bottom: 6px; }
.consultation-page-header p { font-size: 14px; color: var(--text-secondary); }
.consultation-layout { display:grid; grid-template-columns:184px minmax(0,1fr) 220px; gap:20px; align-items:start; }
.consultation-submit-layout { grid-template-columns:184px minmax(0,1fr) 300px; }
.consultation-side { display:flex; flex-direction:column; gap:4px; padding:8px; background:var(--bg-white); border:1px solid var(--border-light); border-radius:var(--radius-md); }
.consultation-layout > .consultation-side { align-self:stretch; }
.consultation-layout > .consultation-card { margin-bottom:0; }
.consultation-side a { display:block; padding:10px 12px; border-radius:var(--radius-sm); color:var(--text-secondary); text-decoration:none; font-size:14px; }
.consultation-side a:hover, .consultation-side a.active { color:var(--primary); background:rgba(51,112,255,.08); }
.consultation-main { min-width:0; }
.consultation-main:last-child { grid-column:2 / -1; }
.consultation-aside { font-size:13px; line-height:1.6; color:var(--text-secondary); }
.consultation-aside h2 { font-size:15px; color:var(--text-primary); margin-bottom:12px; }
.consultation-aside p { margin-bottom:14px; }
.consultation-aside .consultation-check-link { display:flex; align-items:center; gap:10px; width:100%; padding:12px; border:1px solid transparent; border-radius:var(--radius-sm); background:#f4f8ff; color:var(--text-primary); font:inherit; text-align:left; cursor:pointer; }
.consultation-aside .consultation-check-link:hover, .consultation-aside .consultation-check-link:focus-visible { border-color:var(--primary); background:#eef5ff; }
.consultation-check-document { flex:none; display:grid; place-items:center; width:32px; height:36px; border-radius:6px; background:#fff; color:var(--primary); }
.consultation-check-copy { display:flex; flex:1; flex-direction:column; min-width:0; line-height:1.45; }
.consultation-check-copy strong { color:var(--primary); font-size:14px; }
.consultation-check-copy small { color:var(--text-secondary); font-size:12px; }
.consultation-check-arrow { color:var(--text-tertiary); font-size:22px; line-height:1; }
.consultation-precheck-guide { margin-top:18px; padding-top:16px; border-top:1px solid var(--border-light); }
.consultation-precheck-guide h3 { margin:0 0 12px; color:var(--text-primary); font-size:14px; }
.consultation-precheck-guide ul { display:grid; gap:10px; margin:0; padding:0; list-style:none; }
.consultation-precheck-guide li { display:flex; align-items:flex-start; gap:10px; color:var(--text-primary); font-size:13px; }
.consultation-precheck-guide li::before { content:'✓'; flex:none; display:grid; place-items:center; width:17px; height:17px; margin-top:2px; border-radius:50%; background:var(--primary); color:#fff; font-size:11px; line-height:1; }
.consultation-aside .consultation-precheck-note { margin:18px 0 12px; padding:10px 12px; border:1px solid #d4e4ff; border-radius:var(--radius-sm); background:#f4f8ff; color:var(--primary); font-size:12px; }
.consultation-hint, .consultation-error { font-size:12px; line-height:1.5; }
.consultation-hint { color:var(--text-tertiary); margin-top:12px; }
.consultation-error { color:#cf1322; min-height:1em; }
.consultation-code-input { font-family:monospace!important; min-height:160px!important; }
.consultation-list-header { display:flex; justify-content:space-between; align-items:flex-end; gap:16px; }
.consultation-update { display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-size:12px; color:var(--text-tertiary); }
.consultation-update small { font-size:12px; }
.consultation-filters { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.consultation-filters input, .consultation-filters select, .consultation-pagination select { height:34px; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--bg-white); padding:0 9px; font-size:13px; }
.consultation-filters input { flex:1 1 190px; min-width:150px; }
.consultation-filters select { flex:1 1 125px; min-width:110px; }
.consultation-list-total { margin-bottom:12px; color:var(--text-secondary); font-size:13px; }
.consultation-ellipsis { max-width:180px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.consultation-card { margin-bottom: 20px; }
.consultation-card-header { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:18px; }
.consultation-card-header h2 { font-size:16px; color:var(--text-primary); }
.consultation-form-grid { display:grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap:14px 16px; }
.consultation-field { display:flex; flex-direction:column; gap:7px; }
.consultation-field.full { grid-column:1 / -1; }
.consultation-field label { font-size:13px; color:var(--text-secondary); }
.consultation-field input, .consultation-field select, .consultation-field textarea {
  width:100%; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--bg-white); color:var(--text-primary); font-size:14px; outline:none;
}
.consultation-field input, .consultation-field select { height:34px; padding:0 10px; }
.consultation-field textarea { min-height:100px; padding:10px; resize:vertical; line-height:1.6; font-family:inherit; }
.consultation-field input:focus, .consultation-field select:focus, .consultation-field textarea:focus { border-color:var(--primary); box-shadow:0 0 0 2px rgba(51,112,255,.12); }
.consultation-form-actions { display:flex; justify-content:flex-end; margin-top:16px; }
.consultation-table-wrap { overflow-x:auto; }
.consultation-table { min-width:760px; }
.consultation-table th:last-child, .consultation-table td:last-child { white-space:nowrap; }
.consultation-pagination { display:flex; align-items:center; justify-content:flex-end; gap:6px; padding-top:16px; flex-wrap:wrap; }
.consultation-page-info { font-size:12px; color:var(--text-tertiary); margin:0 4px; }
.consultation-page-ellipsis { color:var(--text-tertiary); padding:0 2px; }
.consultation-empty { padding:32px 16px; text-align:center; color:var(--text-tertiary); font-size:13px; }
.consultation-back { margin-bottom:18px; }
.consultation-ticket-title { font-size:20px; color:var(--text-primary); margin-bottom:8px; }
.consultation-meta { color:var(--text-tertiary); font-size:13px; margin-bottom:18px; }
.consultation-body { white-space:pre-wrap; line-height:1.75; color:var(--text-primary); background:var(--bg-page); border-radius:var(--radius-sm); padding:16px; }
.consultation-thread { margin-top:8px; }
.consultation-reply { padding:14px 0; border-bottom:1px solid var(--border-light); }
.consultation-reply:last-child { border-bottom:none; }
.consultation-reply-head { display:flex; justify-content:space-between; gap:12px; margin-bottom:7px; }
.consultation-reply-author { font-size:13px; font-weight:600; color:var(--text-primary); }
.consultation-reply-time { font-size:12px; color:var(--text-tertiary); }
.consultation-reply-content { white-space:pre-wrap; color:var(--text-secondary); line-height:1.7; font-size:14px; }
.consultation-detail-grid { display:grid; grid-template-columns:minmax(0,1fr) 250px; gap:20px; }
.consultation-detail-grid aside h2 { font-size:15px; margin-bottom:14px; }
.consultation-detail-top { display:flex; align-items:start; justify-content:space-between; gap:16px; }
.consultation-refresh-control { display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:flex-end; }
.consultation-refresh-control .consultation-muted { margin-bottom:0; }
.consultation-muted, .consultation-summary { color:var(--text-tertiary); font-size:13px; }
.consultation-muted { margin-bottom:8px; }
.consultation-summary { display:flex; align-items:center; gap:10px 16px; flex-wrap:wrap; }
#ticket-info > div { display:flex; flex-direction:column; gap:4px; margin:0 0 13px; font-size:13px; }
#ticket-info > div > span { color:var(--text-tertiary); }
#ticket-info > div > strong { color:var(--text-primary); font-weight:500; overflow-wrap:anywhere; }
.consultation-req-resp pre { white-space:pre-wrap; overflow-wrap:anywhere; background:var(--bg-page); border-radius:var(--radius-sm); padding:12px; font-size:12px; }
.consultation-pagination label { display:flex; align-items:center; gap:6px; margin-right:auto; color:var(--text-secondary); font-size:13px; }
@media (max-width: 1050px) {
  .consultation-layout, .consultation-submit-layout { grid-template-columns:160px minmax(0,1fr); }
  .consultation-aside { grid-column:2; }
  .consultation-detail-grid { display:block; }
}
@media (max-width: 720px) {
  .consultation-page { padding:calc(var(--header-height) + 24px) 16px 40px; }
  .consultation-layout { display:block; }
  .consultation-side { flex-direction:row; margin-bottom:16px; }
  .consultation-list-header { display:block; }
  .consultation-update { margin-top:12px; }
  .consultation-form-grid { grid-template-columns:1fr; }
  .consultation-card { padding:16px; }
}

/* Code blocks */
.code-block {
  background: #1E1E1E;
  color: #D4D4D4;
  padding: 16px;
  border-radius: var(--radius-sm);
  font-family: "SF Mono", "Fira Code", "Consolas", monospace;
  font-size: 13px;
  line-height: 1.6;
  overflow-x: auto;
  margin: 12px 0;
  white-space: pre-wrap;
}
.code-block.light {
  background: #F7F8FA;
  color: var(--text-primary);
  border: 1px solid var(--border);
}

/* API sections */
.api-section {
  margin-bottom: 28px;
}
.api-section-title {
  font-size: 16px; font-weight: 600;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-light);
}

/* ============================
   PAGE-SPECIFIC: 文档首页
   ============================ */
.home-hero {
  text-align: center;
  padding: 80px 24px 48px;
  background: linear-gradient(135deg, #E8F0FE 0%, #F0F5FF 100%);
}
.home-hero h1 {
  font-size: 36px; font-weight: 700;
  margin-bottom: 12px;
  color: var(--text-primary);
}
.home-hero p {
  font-size: 16px; color: var(--text-secondary);
  margin-bottom: 32px;
}
.home-hero .hero-search {
  position: relative;
  max-width: 600px; margin: 0 auto;
}
.home-hero .hero-search input {
  width: 100%; height: 48px;
  padding: 0 20px 0 48px;
  border: 1px solid var(--border);
  border-radius: 50px;
  font-size: 15px;
  outline: none;
  box-shadow: var(--shadow-md);
}
.home-hero .hero-search input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(51,112,255,0.12);
}
.home-hero .hero-search .search-icon {
  position: absolute; left: 18px; top: 50%;
  transform: translateY(-50%);
  color: var(--text-tertiary);
}

.home-section {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 24px;
}
.home-section--compact {
  padding-top: 0;
}

/* Step cards (新手入门) */
.step-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 32px;
}
.step-card {
  background: var(--bg-white);
  border: 1px solid transparent;
  box-shadow: var(--shadow-sm);
  border-radius: var(--radius);
  padding: 20px;
  cursor: pointer;
  transition: var(--transition);
  display: flex; flex-direction: column;
  min-height: 155px;
}
.step-card:hover {
  border-color: var(--primary);
  box-shadow: var(--shadow-sm);
}
.step-card .step-num {
  width: 28px; height: 28px;
  background: var(--primary-light);
  color: var(--primary);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700;
  margin-bottom: 12px;
}
.step-card .step-title {
  font-size: 15px; font-weight: 600;
  margin-bottom: 6px;
}
.step-card .step-desc {
  font-size: 12px; color: var(--text-secondary);
}
.step-card .step-links {
  margin-top: 12px;
  display: flex; flex-wrap: wrap; gap: 6px;
}
.step-card .step-links a {
  font-size: 12px;
  padding: 4px 10px;
  background: var(--bg-page);
  border-radius: 8px;
  color: var(--primary);
}

/* API category cards */
.api-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.api-grid--3col {
  grid-template-columns: repeat(3, 1fr);
}
.api-category-card {
  background: var(--bg-white);
  border: 1px solid transparent;
  box-shadow: var(--shadow-sm);
  border-radius: var(--radius);
  padding: 20px;
  cursor: pointer;
  transition: var(--transition);
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center; text-align: left;
  gap: 12px;
  min-height: 155px;
}
.api-category-card:hover {
  border-color: var(--primary);
  box-shadow: var(--shadow-sm);
}
.api-category-card .cat-icon {
  width: 36px; height: 36px;
  background: var(--primary-light);
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
  color: var(--primary);
  flex-shrink: 0;
}
.api-category-card .cat-info h4 {
  font-size: 14px; font-weight: 600;
  margin-bottom: 2px;
}
.api-category-card .cat-info span {
  font-size: 11px; color: var(--text-tertiary);
}

/* ============================
   PAGE-SPECIFIC: 开发教程 / 最佳实践
   ============================ */
.course-layout {
  display: flex;
  padding-top: var(--header-height);
  min-height: calc(100vh - var(--header-height));
}
.course-content {
  margin-left: var(--sidebar-width);
  flex: 1;
  padding: 32px 40px;
  max-width: 1200px;
}
.course-content--wide {
  max-width: none;
}
.course-header {
  margin-bottom: 28px;
}
.course-header h2 {
  font-size: 24px; font-weight: 700;
  margin-bottom: 8px;
}
.course-header p {
  font-size: 14px; color: var(--text-secondary);
}
.tutorial-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.tutorial-card {
  background: var(--bg-white);
  border: 1px solid transparent;
  box-shadow: var(--shadow-sm);
  border-radius: var(--radius);
  padding: 20px;
  cursor: pointer;
  transition: var(--transition);
}
.tutorial-card:hover {
  border-color: var(--primary);
  box-shadow: var(--shadow-sm);
}
.card-header {
  display: flex; justify-content: space-between; align-items: flex-start;
  margin-bottom: 6px;
}
.card-header h4 {
  margin-bottom: 0; flex: 1; min-width: 0;
  overflow-wrap: break-word;
}
.card-header .card-meta {
  margin-bottom: 0; margin-left: 8px; flex-shrink: 0;
}
.tutorial-card .card-meta {
  display: flex; gap: 8px; align-items: center; margin-bottom: 10px;
}
.tutorial-card h4 {
  font-size: 15px; font-weight: 600;
  margin-bottom: 6px;
  line-height: 1.4;
}
.tutorial-card .card-time {
  font-size: 12px; color: var(--text-tertiary);
  margin-top: 8px;
}

/* ============================
   PAGE-SPECIFIC: API文档
   ============================ */
.api-doc-layout {
  display: flex;
  padding-top: var(--header-height);
  min-height: calc(100vh - var(--header-height));
}
.api-doc-main {
  margin-left: var(--sidebar-width);
  flex: 1;
  max-width: calc(100% - var(--sidebar-width) - var(--sidebar-right-width));
  padding: 32px 40px;
  overflow-y: auto;
}
.api-doc-main .api-title {
  font-size: 24px; font-weight: 700;
  margin-bottom: 8px;
}
.api-doc-main .api-subtitle {
  font-size: 14px; color: var(--text-secondary);
  margin-bottom: 24px;
}
.api-doc-main .api-subtitle[data-api-description]:not([data-markdown-rendered="true"]) {
  white-space: pre-wrap;
}
.api-doc-main .api-subtitle[data-api-description] > :first-child { margin-top: 0; }
.api-doc-main .api-subtitle[data-api-description] > :last-child { margin-bottom: 0; }

.api-resource-notice {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
  padding: 12px 16px;
  border: 1px solid #ADC6FF;
  border-radius: var(--radius-sm);
  background: #F0F5FF;
  color: var(--text-primary);
}
.api-resource-notice > iconify-icon {
  flex-shrink: 0;
  color: var(--primary);
}
.api-resource-notice-content {
  flex: 1;
  min-width: 0;
}
.api-resource-notice-title {
  margin-bottom: 2px;
  font-size: 13px;
  font-weight: 600;
}
.api-resource-notice-text {
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.5;
}
.api-resource-notice-link {
  flex-shrink: 0;
}

.doc-markdown-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  font-size: 14px;
}
.api-doc-main > .doc-markdown-actions {
  margin: 4px 0 18px;
}
.doc-markdown-actions a,
.doc-markdown-actions button {
  padding: 0;
  border: 0;
  background: none;
  color: var(--primary);
  font: inherit;
  line-height: 22px;
  cursor: pointer;
}
.doc-markdown-actions a:hover,
.doc-markdown-actions button:hover {
  color: var(--primary-dark);
}
.doc-markdown-actions button:disabled {
  cursor: wait;
  opacity: 0.7;
}
.doc-markdown-actions button.copy-failed {
  color: var(--color-error);
}
.doc-markdown-action-divider {
  color: var(--border);
}

.api-method-tag {
  display: inline-block;
  padding: 2px 8px; border-radius: 8px;
  font-size: 12px; font-weight: 600;
}
.api-method-tag.get { background: #E8F8EF; color: #00A870; }
.api-method-tag.post { background: #FFF3E8; color: #E37318; }
.api-method-tag.put { background: #E8F0FE; color: #3370FF; }
.api-method-tag.delete { background: #FDE8EC; color: #E03E4D; }

/* Right sidebar - API Debug Panel */
.debug-panel .debug-header {
  margin-bottom: 12px;
}
.debug-panel-hint {
  font-size: 12px; color: var(--text-tertiary); margin-bottom: 8px;
}
.debug-panel .param-row {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 8px;
}
.debug-panel .param-row label {
  font-size: 12px; color: var(--text-secondary);
  min-width: 80px;
}
.debug-panel .param-row select,
.debug-panel .param-row input {
  flex: 1; height: 32px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 13px;
  outline: none;
}
.debug-panel .param-row input:focus {
  border-color: var(--primary);
}
.debug-result {
  margin-top: 16px;
}
.debug-result .result-header {
  font-size: 13px; font-weight: 600;
  margin-bottom: 8px;
  display: flex; align-items: center; gap: 8px;
}
.debug-result .status-badge {
  padding: 2px 8px; border-radius: 8px;
  font-size: 12px; font-weight: 500;
}
.debug-result .status-badge.success {
  background: #E8F8EF; color: #00A870;
}

/* Tab switcher */
.tab-bar {
  display: flex; gap: 0;
  border-bottom: 2px solid var(--border-light);
  margin-bottom: 16px;
}
.tab-bar .tab-item {
  padding: 8px 16px;
  font-size: 13px; font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: var(--transition);
}
.tab-bar .tab-item.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
}

/* ============================
   PAGE-SPECIFIC: API 调试台
   ============================ */
.apiexplorer-layout {
  display: flex;
  padding-top: var(--header-height);
  min-height: calc(100vh - var(--header-height));
}
.apiexplorer-main {
  margin-left: var(--sidebar-width);
  flex: 1;
  max-width: calc(100% - var(--sidebar-width) - var(--sidebar-right-width));
  padding: 24px 32px;
  overflow-y: auto;
}
.apiexplorer-main .api-info {
  background: var(--bg-white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 20px;
}
.apiexplorer-main .api-info .endpoint-row {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 12px;
}
.apiexplorer-main .api-info .endpoint-path {
  font-family: "SF Mono", "Fira Code", monospace;
  font-size: 14px; color: var(--text-primary);
}

.apiexplorer-right {
  width: var(--sidebar-right-width);
  background: var(--bg-white);
  border-left: 1px solid var(--border);
  overflow-y: auto;
  padding: 20px;
}

/* ============================
   SUPPORT WIDGET (floating)
   ============================ */
.support-widget {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 200;
  background: var(--bg-white);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-md);
  display: flex; align-items: center; gap: 8px;
  padding: 10px 16px;
  cursor: pointer;
  font-size: 13px; font-weight: 500;
  color: var(--text-secondary);
  transition: var(--transition);
}
.support-widget:hover {
  border-color: var(--primary);
  color: var(--primary);
  box-shadow: 0 4px 20px rgba(51,112,255,0.2);
}
.support-widget .support-icon {
  width: 20px; height: 20px;
  background: var(--primary);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
}

/* ============================
   USEFUL LINKS (API doc pages)
   ============================ */
.useful-links {
  list-style: none;
}
.useful-links li {
  margin-bottom: 6px;
}
.useful-links li a {
  font-size: 13px; color: var(--text-secondary);
  display: flex; align-items: center; gap: 6px;
}
.useful-links li a:hover { color: var(--primary); }
.useful-links li a iconify-icon {
  margin-right: 4px;
  color: var(--text-tertiary);
  font-size: 10px;
}

/* ============================
   TOKENS / BADGES
   ============================ */
.ant-badge {
  display: inline-flex; align-items: center;
  padding: 2px 8px;
  border-radius: 8px;
  font-size: 11px; font-weight: 600;
}
.ant-badge-required {
  background: #FDE8EC; color: #E03E4D;
}
.ant-badge-new {
  background: var(--primary-light);
  color: var(--primary);
}

/* ============================
   SCROLLBAR
   ============================ */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #D0D3D8; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #A8ADB4; }

/* ============================
   Markdown rendered content
   ============================ */
.markdown-body h1,
.markdown-body h2,
.markdown-body h3,
.markdown-body h4,
.markdown-body h5,
.markdown-body h6,
.markdown-body p,
.markdown-body ul,
.markdown-body ol,
.markdown-body li,
.markdown-body pre,
.markdown-body blockquote,
.markdown-body hr,
.markdown-body dl,
.markdown-body dt,
.markdown-body dd { margin: 8px 0; }
.markdown-body ul,
.markdown-body ol { padding-left: 0; padding-inline-start: 0; list-style-position: inside; }
.markdown-body li > p { display: inline; }
.markdown-body img {
  max-width: 100%;
  height: auto;
}
/* ============================
   Markdown rendered tables
   ============================ */
.markdown-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 16px 0;
}
.markdown-body table th,
.markdown-body table td {
  border: 1px solid var(--border);
  padding: 10px 14px;
  text-align: left;
}
.markdown-body table th {
  background: var(--bg-page);
  font-weight: 600;
  font-size: 13px;
}
.markdown-body table td {
  font-size: 13px;
}

/* ============================
   HEADER USER
   ============================ */
.header-user {
  display: flex; align-items: center; gap: 12px;
  font-size: 13px; color: var(--text-secondary);
  white-space: nowrap;
}
.header-user .user-info {
  color: var(--text-primary); font-weight: 500;
}
.header-user a {
  color: var(--primary); font-size: 13px;
}
.header-user .app-selector {
  height: 28px;
  padding: 0 26px 0 10px;
  border: 1px solid var(--border);
  border-radius: 12px;
  font-size: 12px;
  color: var(--text-primary);
  background: var(--bg-page);
  outline: none;
  cursor: pointer;
  max-width: 140px;
  transition: var(--transition);
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24'%3E%3Cpath fill='%238F959E' d='M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6l-6-6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 10px;
}
.header-user .app-selector:hover {
  border-color: var(--primary);
}
.header-user .app-selector:focus {
  border-color: var(--primary);
  background-color: var(--bg-white);
  box-shadow: 0 0 0 2px rgba(51,112,255,0.12);
}

/* ============================
   FOOTER
   ============================ */
.site-footer {
  text-align: center;
  padding: 32px;
  font-size: 12px;
  color: var(--text-tertiary);
  background: var(--bg-page);
  margin-top: 40px;
  border-top: 1px solid var(--border);
}
.site-footer .footer-links {
  display: none;
}
.site-footer .footer-links a {
  margin: 0 12px;
  color: var(--text-secondary);
}
.site-footer .footer-links a:hover {
  color: var(--primary);
}

/* ============================
   CHAT DIALOG
   ============================ */
.chat-dialog {
  display: none;
  position: fixed;
  bottom: 80px; right: 24px;
  width: 380px; height: 500px;
  background: var(--bg-white);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
  z-index: 300;
  flex-direction: column;
}
.chat-dialog.visible {
  display: flex;
}
.chat-dialog-header {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  font-weight: 600; font-size: 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.chat-dialog-close {
  cursor: pointer;
  font-size: 18px;
  color: var(--text-tertiary);
  line-height: 1;
}
.chat-dialog-close:hover {
  color: var(--text-primary);
}
.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 12px 16px;
  font-size: 13px;
}
.chat-input-area {
  padding: 10px 16px;
  border-top: 1px solid var(--border);
  display: flex; gap: 8px;
}
.chat-input-area input {
  flex: 1; height: 36px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  font-size: 13px;
  outline: none;
}
.chat-input-area input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(51,112,255,0.12);
}
.chat-input-area button {
  width: 60px; height: 36px;
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: 12px;
  font-size: 13px;
  cursor: pointer;
  transition: var(--transition);
}
.chat-input-area button:hover {
  background: var(--primary-dark);
}

/* ============================
   UTILITY CLASSES (replaces repeated inline styles)
   ============================ */
.ant-btn-block { width: 100%; }

.empty-state {
  text-align: center;
  padding: 60px 0;
  color: var(--text-tertiary);
}

.meta-separator { margin: 0 8px; color: var(--text-tertiary); }

.inline-endpoint-path {
  font-size: 14px;
  margin-left: 8px;
  color: var(--text-primary);
}
.breadcrumb-bar { margin-bottom: 8px; }

.explorer-summary {
  font-size: 14px; color: var(--text-primary); margin-bottom: 8px;
}
.explorer-desc {
  font-size: 12px; color: var(--text-secondary);
}
.explorer-desc[data-api-description]:not([data-markdown-rendered="true"]) {
  white-space: pre-wrap;
}
.explorer-desc[data-api-description] > :first-child { margin-top: 0; }
.explorer-desc[data-api-description] > :last-child { margin-bottom: 0; }
.debug-section-title {
  font-size: 13px; margin-bottom: 8px;
}
.debug-section-title-mt {
  font-size: 13px; margin-top: 16px; margin-bottom: 8px;
}
.card-section-heading { margin-bottom: 16px; margin-top: 0; }

/* Card download/metadata row */
.card-meta-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 12px;
}
.card-meta-text {
  font-size: 12px; color: var(--text-tertiary);
}

.debug-textarea {
  width: 100%; min-height: 150px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: "SF Mono", "Fira Code", monospace;
  font-size: 13px;
  resize: vertical;
  outline: none;
}

.result-duration {
  margin-top: 8px; font-size: 12px; color: var(--text-tertiary);
}

.ct-meta {
  font-size: 11px; color: var(--text-tertiary); font-weight: 400;
}

.search-form-wrap { margin-bottom: 24px; }
.search-form { display: flex; gap: 8px; }
.search-form-input {
  flex: 1; height: 40px;
  padding: 0 16px;
  border: 1px solid var(--border);
  border-radius: 50px;
  font-size: 14px;
  outline: none;
}
.result-count-bar {
  font-size: 13px; color: var(--text-secondary); margin-bottom: 20px;
}
.search-result-card { margin-bottom: 12px; cursor: pointer; }
.search-result-tag-row { margin-bottom: 6px; }
.search-result-meta { font-size: 12px; color: var(--text-tertiary); margin-left: 8px; }
.search-result-title { font-size: 16px; }
.search-result-desc { margin-top: 4px; }

.api-doc-empty {
  color: var(--text-tertiary); font-size: 14px;
  padding: 60px 0; text-align: center;
}

/* Code block header (language label + copy button) */
.code-block-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 16px;
  background: #2D2D2D;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  font-size: 12px; color: var(--text-tertiary);
}
.code-block-header + .code-block {
  margin-top: 0;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
}

/* Right sidebar shared base (unifies .right-sidebar and .apiexplorer-right) */
.right-sidebar,
.apiexplorer-right {
  background: var(--bg-white);
  border-left: 1px solid var(--border);
  overflow-y: auto;
  padding: 20px;
}

/* Table wrapper for mobile horizontal scroll */
.op-table-wrapper {
  overflow-x: auto;
}

/* API table column classes (for JS-generated cells) */
.api-table-col-name {
  font-family: "SF Mono", "Fira Code", monospace;
  font-size: 12px;
}
.api-table-col-desc {
  color: var(--text-secondary);
  font-size: 12px;
}

/* History item (for JS-generated list) */
.history-item {
  padding: 6px 0;
  border-bottom: 1px solid var(--border-light);
  cursor: pointer;
}
.history-item-title {
  font-size: 12px; font-weight: 500;
}
.history-item-meta {
  font-size: 11px; color: var(--text-tertiary);
}

/* Markdown pre override */
.markdown-body pre {
  font-family: inherit;
  white-space: pre-wrap;
}
.api-doc-heading {
  font-size: 22px; margin-bottom: 8px;
}
.api-doc-heading-desc {
  color: var(--text-secondary); margin-bottom: 24px; font-size: 14px;
}

/* ============================
   PAGE-SPECIFIC: 开发指南 (Docs Index / Hero)
   ============================ */
.docs-hero {
  margin-top: var(--header-height);
  background: linear-gradient(135deg, #E8F0FE 0%, #F0F5FF 50%, #FFF 100%);
  padding: 64px 24px 48px;
  text-align: center;
}
.docs-hero-inner {
  max-width: 640px;
  margin: 0 auto;
}
.docs-hero h1 {
  font-size: 32px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 8px;
}
.docs-hero p {
  font-size: 16px;
  color: var(--text-secondary);
  margin-bottom: 28px;
}
.docs-hero-search {
  position: relative;
  max-width: 520px;
  margin: 0 auto;
}
.docs-hero-search input {
  width: 100%;
  height: 44px;
  padding: 0 20px 0 44px;
  border: 1px solid var(--border);
  border-radius: 50px;
  font-size: 14px;
  outline: none;
  background: var(--bg-white);
  box-shadow: var(--shadow-md);
  transition: var(--transition);
}
.docs-hero-search input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--ant-primary-color-outline);
}
.docs-hero-search .search-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-tertiary);
}

/* Stats bar */
.docs-index-content {
  padding-top: 32px !important;
}
.docs-stats-bar {
  margin-bottom: 24px;
  font-size: 13px;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Enhanced business cards */
.docs-biz-card {
  position: relative;
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.docs-biz-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(51,112,255,0.12);
  border-color: var(--primary);
}
.docs-biz-card .cat-arrow {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-tertiary);
  opacity: 0;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.docs-biz-card:hover .cat-arrow {
  opacity: 1;
  transform: translateY(-50%) translateX(2px);
  color: var(--primary);
}

/* ============================
   PAGE-SPECIFIC: 开发指南 (Docs List)
   ============================ */

/* Breadcrumb */
.docs-breadcrumb {
  font-size: 13px;
  color: var(--text-tertiary);
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.docs-breadcrumb a {
  color: var(--text-secondary);
  display: inline-flex; align-items: center; gap: 4px;
  transition: var(--transition);
}
.docs-breadcrumb a:hover { color: var(--primary); }
.docs-breadcrumb .breadcrumb-sep { color: var(--text-tertiary); }
.docs-breadcrumb .breadcrumb-current { color: var(--text-primary); font-weight: 500; }

/* ===== Biz Banner (hero in business page) ===== */
.docs-biz-banner {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  background: linear-gradient(135deg, #F0F5FF 0%, #FFF 100%);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px 32px;
  margin-bottom: 32px;
}
.docs-biz-banner-icon {
  width: 64px; height: 64px;
  background: var(--bg-white);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: var(--shadow-sm);
}
.docs-biz-banner-body { flex: 1; min-width: 0; }
.docs-biz-banner-body h2 {
  font-size: 24px; font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 6px;
}
.docs-biz-banner-body p {
  font-size: 14px; color: var(--text-secondary);
  margin-bottom: 12px;
  line-height: 1.6;
}
.docs-biz-banner-stats { display: flex; gap: 12px; flex-wrap: wrap; }
.docs-stat-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 12px;
  background: var(--bg-white);
  border: 1px solid var(--border);
  border-radius: 20px;
  font-size: 12px; color: var(--text-secondary);
}

/* ===== Section Header ===== */
.docs-section-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 16px;
}
.docs-section-header h3 {
  font-size: 16px; font-weight: 600;
  color: var(--text-primary);
  display: flex; align-items: center; gap: 6px;
}
.docs-section-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px;
  padding: 0 6px;
  background: var(--bg-page);
  border-radius: 10px;
  font-size: 11px; color: var(--text-secondary);
  font-weight: 500;
}

/* ===== Document Card Grid ===== */
.docs-card-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ===== New Document Card ===== */
.docs-card {
  display: flex;
  align-items: stretch;
  background: var(--bg-white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: all 0.25s ease;
  text-decoration: none;
  color: inherit;
}
.docs-card:hover {
  border-color: var(--primary);
  box-shadow: 0 4px 16px rgba(51,112,255,0.1);
  transform: translateX(2px);
}
.docs-card-accent {
  width: 4px;
  background: var(--primary);
  flex-shrink: 0;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.docs-card:hover .docs-card-accent {
  opacity: 1;
}
.docs-card-body {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 20px 24px;
  flex: 1;
  min-width: 0;
}
.docs-card-icon-wrap {
  width: 44px; height: 44px;
  background: var(--primary-light);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
  flex-shrink: 0;
}
.docs-card-text {
  flex: 1; min-width: 0;
}
.docs-card-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
}
.docs-card-title-row h4 {
  font-size: 15px; font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}
.docs-card-text p {
  font-size: 13px; color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 10px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.docs-card-footer {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 12px; color: var(--text-tertiary);
}
.docs-card-footer span {
  display: inline-flex; align-items: center; gap: 4px;
}
.docs-card-arrow {
  margin-left: auto;
  color: var(--text-tertiary);
  transition: color 0.25s ease;
}
.docs-card:hover .docs-card-arrow {
  color: var(--primary);
}

/* ============================
   PAGE-SPECIFIC: 开发指南 (Document Detail)
   ============================ */

/* Reading progress bar */
.reading-progress {
  position: fixed;
  top: var(--header-height);
  left: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--primary), #85B3FF);
  z-index: 99;
  width: 0%;
  transition: width 0.1s linear;
}

/* Detail layout */
.course-content--detail {
  max-width: none;
  min-width: 0;
  padding: 32px 48px;
  margin-right: 260px;
}
.course-content--detail .card--detail {
  max-width: none;
}
/* API documentation normally reserves space for its own navigation panels.
   When embedded in a development-guide detail page, it fills that page's content area. */
.course-content--detail .embedded-api-doc {
  margin-left: 0;
  max-width: none;
  padding: 0;
  overflow: visible;
}

/* ===== Doc Header Banner ===== */
.doc-header-banner {
  margin-bottom: 28px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border-light);
}
.doc-header-banner h1 {
  font-size: 28px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 12px;
  line-height: 1.4;
}
.doc-meta-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.doc-meta-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  background: var(--bg-page);
  border-radius: 12px;
  font-size: 12px;
  color: var(--text-secondary);
}

/* Document meta bar */
.doc-meta-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.doc-meta-item {
  font-size: 13px;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 4px;
}

/* ============================
   RIGHT TOC (Document Detail)
   ============================ */
.right-toc {
  display: none;
  position: fixed;
  top: calc(var(--header-height) + 32px);
  right: 24px;
  width: 200px;
  max-height: calc(100vh - var(--header-height) - 64px);
  overflow-y: auto;
}
.course-content.docs-partial-loading {
  opacity: 0.55;
  pointer-events: none;
  transition: opacity 0.15s ease;
}
.api-empty-state {
  color: #8f959e;
  font-size: 13px;
}
.api-schema-parent {
  background: #fafafa;
}
.api-req-tag {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 2px;
  font-size: 11px;
  background: #fff1f0;
  color: #cf1322;
}
.api-opt-tag {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 2px;
  font-size: 11px;
  background: #f5f5f5;
  color: #8c8c8c;
}
.api-example-title {
  font-size: 13px;
  margin-bottom: 8px;
}
.right-toc-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 12px;
  padding-left: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.right-toc-nav {
  display: flex;
  flex-direction: column;
}
.toc-link {
  display: block;
  padding: 4px 12px;
  font-size: 12px;
  color: var(--text-tertiary);
  border-left: 2px solid transparent;
  transition: var(--transition);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-decoration: none;
}
.toc-link:hover {
  color: var(--primary);
}
.toc-link.active {
  color: var(--primary);
  border-left-color: var(--primary);
  background: var(--primary-light);
}
.toc-h3 {
  padding-left: 24px;
  font-size: 11px;
}

/* ============================
   DOC NAV (Prev / Next)
   ============================ */
.doc-nav {
  display: flex;
  gap: 16px;
  margin-top: 32px;
  max-width: 760px;
}
.doc-nav-card {
  flex: 1;
  background: var(--bg-white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 20px;
  transition: var(--transition);
  text-decoration: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.doc-nav-card:hover {
  border-color: var(--primary);
  box-shadow: var(--shadow-sm);
}
.doc-nav-label {
  font-size: 12px;
  color: var(--text-tertiary);
  display: flex;
  align-items: center;
  gap: 4px;
}
.doc-nav-next {
  text-align: right;
}
.doc-nav-next .doc-nav-label {
  justify-content: flex-end;
}
.doc-nav-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
}
.doc-nav-empty {
  visibility: hidden;
}

/* ============================
   RESPONSIVE UPDATES (overrides)
   ============================ */
@media (max-width: 1024px) {
  .right-toc { display: none !important; }
  .course-content--detail { padding: 24px 20px; margin-right: 0; }
  .doc-nav { max-width: 100%; }
  .docs-biz-banner { flex-direction: column; padding: 20px; }
  .docs-biz-banner-icon { width: 48px; height: 48px; }
  .docs-biz-banner-body h2 { font-size: 20px; }
}

@media (max-width: 768px) {
  .docs-biz-banner { border-radius: 0; margin: 0 -16px 24px; border-left: none; border-right: none; }
  .docs-card-body { padding: 16px; gap: 12px; }
  .docs-card-icon-wrap { width: 36px; height: 36px; }
  .docs-card-title-row { flex-direction: column; align-items: flex-start; gap: 4px; }
  .docs-card-footer { flex-wrap: wrap; gap: 8px; }
  .docs-hero { padding: 48px 16px 32px; }
  .docs-hero h1 { font-size: 24px; }
  .doc-header-banner h1 { font-size: 22px; }
}

/* ============================
   CONTENT WRAPPER (for pages with top padding)
   ============================ */
.content-wrapper {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 24px;
  padding-top: calc(var(--header-height) + 40px);
}

/* ============================
   RESPONSIVE
   ============================ */
@media (max-width: 1024px) {
  :root {
    --sidebar-width: 220px;
    --sidebar-right-width: 356px;
  }
  .tutorial-grid,
  .api-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .step-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  :root {
    --sidebar-width: 0px;
    --sidebar-right-width: 0px;
  }
  .header {
    padding: 0 12px;
    gap: 12px;
  }
  .header-nav {
    display: none;
  }
  .header-search {
    width: 160px;
  }
  .header-logo {
    font-size: 15px;
  }
  .sidebar {
    display: none;
  }
  .right-sidebar {
    display: none;
  }
  .course-content {
    margin-left: 0;
    padding: 20px 16px;
  }
  .api-doc-main {
    margin-left: 0;
    max-width: 100%;
    padding: 20px 16px;
  }
  .api-resource-notice {
    align-items: flex-start;
    flex-wrap: wrap;
  }
  .api-resource-notice-link {
    margin-left: 30px;
  }
  .apiexplorer-main {
    margin-left: 0;
    max-width: 100%;
    padding: 16px;
  }
  .apiexplorer-right {
    display: none;
  }
  .home-hero {
    padding: 60px 16px 32px;
  }
  .home-hero h1 {
    font-size: 24px;
  }
  .home-hero p {
    font-size: 14px;
  }
  .home-section {
    padding: 24px 16px;
  }
  .section-title {
    font-size: 18px;
  }
  .tutorial-grid,
  .api-grid {
    grid-template-columns: 1fr;
  }
  .step-grid {
    grid-template-columns: 1fr;
  }
  .chat-dialog {
    width: calc(100vw - 32px);
    right: 16px;
    bottom: 72px;
  }
  .content-wrapper {
    padding: 20px 16px;
    padding-top: calc(var(--header-height) + 20px);
  }
  .login-box {
    width: calc(100vw - 32px);
  }
  .support-widget {
    width: 44px; height: 44px;
    padding: 0; border-radius: 50%;
    justify-content: center;
    bottom: 16px; right: 16px;
  }
  .support-widget span:last-child {
    display: none;
  }
}

/* ============================
   SEARCH PAGE
   ============================ */
.search-page {
  max-width: 900px;
  margin: 0 auto;
  padding: 40px 24px;
  padding-top: calc(var(--header-height) + 24px);
}

/* ============================
   DEMO FILTER TAGS
   ============================ */
.demo-filter-bar {
  margin-bottom: 20px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.demo-filter-bar .ant-tag {
  cursor: pointer;
  transition: var(--transition);
  text-decoration: none;
}
.demo-filter-bar .ant-tag:hover {
  opacity: 0.85;
}

/* ============================
   TABLE HOVER
   ============================ */
.api-table tbody tr:hover {
  background: var(--primary-light);
}

.api-description-highlight {
  color: #cf1322;
  font-weight: 600;
}