/* ===== CSS Variables ===== */
:root {
  --color-primary: #4A90E2;
  --color-primary-hover: #3A7BC8;
  --color-primary-light: #E8F4FF;
  --color-primary-bg: #F0F7FF;
  --color-success: #52C41A;
  --color-success-light: #F6FFED;
  --color-warning: #FA8C16;
  --color-warning-light: #FFF7E6;
  --color-danger: #F5222D;
  --color-danger-light: #FFF1F0;
  --color-bg: #F5F5F5;
  --color-card: #FFFFFF;
  --color-border: #EEEEEE;
  --color-border-light: #F0F0F0;
  --color-border-input: #DDDDDD;
  --color-text: #333333;
  --color-text-secondary: #666666;
  --color-text-hint: #999999;
  --color-text-placeholder: #BBBBBB;
  --color-grade-a: #52C41A;
  --color-grade-b: #4A90E2;
  --color-grade-c: #FA8C16;
  --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
  --font-size-xs: 10px;
  --font-size-sm: 12px;
  --font-size-base: 14px;
  --font-size-md: 15px;
  --font-size-lg: 16px;
  --font-size-xl: 18px;
  --font-size-2xl: 20px;
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 12px;
  --spacing-lg: 16px;
  --spacing-xl: 20px;
  --spacing-2xl: 24px;
  --radius-sm: 6px;
  --radius: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;
  --shadow-sm: 0 1px 4px rgba(0,0,0,0.06);
  --shadow: 0 2px 8px rgba(0,0,0,0.08);
  --shadow-lg: 0 4px 12px rgba(0,0,0,0.12);
  --shadow-card: 0 2px 12px rgba(0,0,0,0.08);
  --z-tab-bar: 1000;
  --z-desktop-nav: 999;
  --z-overlay: 200;
  --z-modal: 2000;
  --z-toast: 9999;
}

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

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
  font-size: 14px;
  color: var(--color-text);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  max-width: 430px;
  margin: 0 auto;
  height: 100dvh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Scroll shell: #app is the only scrollable container on mobile */
#app {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* ===== Home Header ===== */
.home-header {
  background: linear-gradient(135deg, #4A90E2 0%, #67B3E8 100%);
  padding: 20px 16px 24px;
}

.home-title {
  font-size: 18px;
  font-weight: 600;
  color: #fff;
  text-align: center;
  margin-bottom: 16px;
}

.home-search {
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 22px;
  padding: 10px 16px;
  cursor: pointer;
}

.home-search:active {
  background: #fff;
}

.home-search .search-icon {
  width: 20px;
  height: 20px;
  color: var(--color-text-hint);
  margin-right: 8px;
}

.home-search .search-placeholder {
  font-size: 14px;
  color: var(--color-text-hint);
}

/* ===== Home Content ===== */
.home-content {
  padding: 16px;
}

/* ===== Section ===== */
.section {
  margin-bottom: 24px;
}

.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.section-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--color-text);
}

.section-count {
  font-size: 12px;
  color: var(--color-text-hint);
}

.section-more {
  font-size: 12px;
  color: var(--color-primary);
  cursor: pointer;
}

/* ===== Drug Grid (院内药品清单) ===== */
.drug-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.drug-grid-item {
  background: var(--color-card);
  border-radius: var(--radius);
  padding: 12px;
  display: flex;
  align-items: center;
  box-shadow: var(--shadow);
  cursor: pointer;
}

.drug-grid-item:active {
  transform: scale(0.98);
}

.drug-grid-icon {
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, #E8F4FF, #D0E8FF);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 10px;
  flex-shrink: 0;
}

.drug-grid-icon svg {
  width: 24px;
  height: 24px;
  color: var(--color-primary);
}

.drug-grid-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.drug-grid-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.drug-grid-spec {
  font-size: 11px;
  color: var(--color-text-hint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.drug-status {
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 10px;
  flex-shrink: 0;
}

.drug-status.status-excellent {
  background: #B7EB8F;
  color: #237804;
}

.drug-status.status-good {
  background: #91CAFF;
  color: #1A5C9E;
}

.drug-status.status-warning {
  background: #FFBB96;
  color: #C41A00;
}

/* ===== Record Scroll (药品评价记录) ===== */
.record-scroll {
  display: flex;
  overflow-x: auto;
  gap: 12px;
  padding-bottom: 8px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.record-scroll::-webkit-scrollbar {
  display: none;
}

.record-scroll .record-card {
  width: 120px;
  flex-shrink: 0;
  background: var(--color-card);
  border-radius: var(--radius);
  padding: 12px;
  text-align: center;
  box-shadow: var(--shadow);
  cursor: pointer;
}

.record-scroll .record-card:active {
  transform: scale(0.98);
}

.record-scroll .record-image {
  width: 50px;
  height: 50px;
  margin: 0 auto 8px;
  background: linear-gradient(135deg, #E8F4FF, #D0E8FF);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.record-scroll .record-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.record-scroll .record-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 6px;
}

.record-scroll .record-name {
  font-size: 12px;
  font-weight: 500;
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}

.record-scroll .record-score {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-primary);
}

.record-scroll .record-grade {
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 10px;
}

.record-scroll .record-grade.grade-excellent {
  background: #B7EB8F;
  color: #237804;
}

.record-scroll .record-grade.grade-good {
  background: #91CAFF;
  color: #1A5C9E;
}

.record-scroll .record-grade.grade-warning {
  background: #FFBB96;
  color: #C41A00;
}

/* ===== Knowledge List (知识库) ===== */
.knowledge-list {
  background: var(--color-card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.knowledge-item {
  display: flex;
  align-items: center;
  padding: 14px 12px;
  border-bottom: 1px solid var(--color-border);
  cursor: pointer;
}

.knowledge-item:last-child {
  border-bottom: none;
}

.knowledge-item:active {
  background: #f5f5f5;
}

.knowledge-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 12px;
  font-size: 18px;
  flex-shrink: 0;
}

.knowledge-icon.icon-file {
  background: #FFF1F0;
  color: #FF4D4F;
}

.knowledge-icon.icon-url {
  background: #E6F7FF;
  color: var(--color-primary);
}

.knowledge-icon.icon-text {
  background: #F6FFED;
  color: var(--color-success);
}

.knowledge-icon.icon-image {
  background: #FFF7E6;
  color: var(--color-warning);
}

.knowledge-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.knowledge-info-row { flex-direction: row; align-items: center; }
.knowledge-info-row .knowledge-date { white-space: nowrap; flex-shrink: 0; }

.knowledge-title {
  font-size: 14px;
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.knowledge-date {
  font-size: 11px;
  color: var(--color-text-hint);
  margin-top: 2px;
}

.knowledge-arrow {
  width: 16px;
  height: 16px;
  color: var(--color-text-hint);
  flex-shrink: 0;
}

/* ===== Tab Bar ===== */
.tab-bar-wrapper {
  flex-shrink: 0;
  width: 100%;
  max-width: 430px;
  z-index: 100;
  background: var(--color-card);
  padding-bottom: env(safe-area-inset-bottom);
}
.tab-bar {
  display: flex;
  align-items: center;
  justify-content: space-around;
  height: 56px;
  width: 100%;
  background: var(--color-card);
  border-top: 1px solid var(--color-border);
}

.tab-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  color: var(--color-text-hint);
  text-decoration: none;
  transition: color 0.2s;
}

.tab-item svg {
  width: 22px;
  height: 22px;
}

.tab-item span {
  font-size: 10px;
}

.tab-item.active {
  color: var(--color-primary);
}

/* ===== Vant Overrides ===== */
.van-tabs__nav {
  padding-left: 16px;
  padding-right: 16px;
}

.van-tabs__nav-line {
  background-color: var(--color-primary);
}

.van-tab {
  font-size: 13px;
}

.van-collapse-item__title {
  font-size: 14px;
}

.van-button--large {
  height: 44px;
  line-height: 44px;
}

.van-progress {
  height: 8px !important;
}

/* ===== Empty Tip ===== */
.empty-tip {
  text-align: center;
  padding: 40px 20px;
  color: var(--color-text-hint);
  font-size: 14px;
}

/* ===== Page Header ===== */
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: var(--color-card);
  border-bottom: 1px solid var(--color-border);
}

.back-btn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.back-btn svg {
  width: 20px;
  height: 20px;
  color: var(--color-text);
}

.header-title {
  flex: 1;
  font-size: 16px;
  font-weight: 600;
  text-align: center;
  color: var(--color-text);
}

.header-right {
  width: 32px;
}

/* ===== Main Content ===== */
.main-content, .content {
  padding: 16px;
}

.main-content.with-tabs {
  padding-top: 0;
}

/* ===== Evaluation Page ===== */
.evaluation-page {
  padding-bottom: 100px;
}

.eval-drug-card {
  display: flex;
  background: var(--color-card);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 16px;
  box-shadow: var(--shadow);
}

.eval-drug-image {
  width: 50px;
  height: 50px;
  border-radius: 8px;
  overflow: hidden;
  margin-right: 12px;
  flex-shrink: 0;
}

.eval-drug-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.eval-drug-info {
  flex: 1;
}

.eval-drug-info h3 {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 4px;
}

.eval-drug-info p {
  font-size: 12px;
  color: var(--color-text-hint);
  margin-bottom: 2px;
}

.eval-drug-info .medical-type {
  margin-top: 4px;
  font-size: 11px;
  color: var(--color-primary);
}

.eval-progress {
  background: var(--color-card);
  border-radius: var(--radius);
  padding: 12px 16px;
  margin-bottom: 16px;
}

.eval-progress span {
  display: block;
  font-size: 12px;
  color: var(--color-text-hint);
  margin-bottom: 8px;
}

.eval-categories {
  margin-bottom: 16px;
}

.subcategory-list {
  padding: 8px 0;
}

.subcategory-item {
  padding: 12px 0;
  border-bottom: 1px solid var(--color-border);
}

.subcategory-item:last-child {
  border-bottom: none;
}

.subcategory-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.subcategory-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text);
  flex: 1;
}

.subcategory-score {
  font-size: 12px;
  color: var(--color-primary);
  font-weight: 500;
}

.subcategory-slider {
  margin-bottom: 8px;
}

.subcategory-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.weight-label {
  font-size: 11px;
  color: var(--color-text-hint);
}

.page-actions {
  display: flex;
  gap: 10px;
  padding: 12px 16px;
  max-width: 430px;
  margin: 0 auto;
}
.page-actions .van-button,
.page-actions .btn {
  flex: 1;
}

.submit-btn {
  width: 100%;
  margin-top: 16px;
}
.submit-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.criteria-popup {
  padding: 20px;
}

.criteria-popup h3 {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 16px;
  text-align: center;
}

.criteria-content {
  margin-bottom: 20px;
}

.criteria-content h4 {
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 12px;
  color: var(--color-text);
}

.criteria-content ul {
  padding-left: 20px;
}

.criteria-content li {
  font-size: 13px;
  color: var(--color-text-hint);
  line-height: 1.8;
  margin-bottom: 4px;
}

/* ===== Records Page ===== */
/* ── Filter bar ── */
.page-records .filter-bar {
  padding: 10px 16px;
}

.page-records .filter-row {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
}

.page-records .filter-row:last-child { margin-bottom: 0; }

.page-records .filter-input {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid var(--color-border, #eee);
  border-radius: 18px;
  font-size: 13px;
  outline: none;
  background: #f5f5f5;
}

.page-records .filter-input:focus { border-color: var(--color-primary); background: #fff; }

.page-records .filter-select {
  padding: 8px 10px;
  border: 1px solid var(--color-border, #eee);
  border-radius: 6px;
  font-size: 12px;
  outline: none;
  background: #fff;
  color: var(--color-text);
}

.page-records .filter-date {
  padding: 6px 8px;
  border: 1px solid var(--color-border, #eee);
  border-radius: 6px;
  font-size: 11px;
  outline: none;
  background: #fff;
  color: var(--color-text);
  flex: 1;
}

.page-records .filter-label {
  font-size: 11px;
  color: var(--color-text-hint);
  white-space: nowrap;
}

.page-records .main-content { padding: 12px 16px; }

.page-records .pagination-wrap {
  display: flex;
  justify-content: center;
  padding: 16px 0;
}

.page-records .empty-tip {
  text-align: center;
  padding: 60px 20px;
  color: var(--color-text-hint);
}

/* ── Card list ── */
.records-list {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.record-card {
  flex: 1 0 calc(50% - 6px);
  background: var(--color-card);
  border-radius: var(--radius);
  padding: 14px;
  box-shadow: var(--shadow);
  cursor: pointer;
}

.record-card:active { opacity: 0.9; }

.record-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.record-time { font-size: 10px; color: var(--color-text-hint); }

.record-grade {
  font-size: 9px;
  padding: 2px 6px;
  border-radius: 8px;
}

.record-grade.grade-excellent { background: #F6FFED; color: var(--color-success); }
.record-grade.grade-good { background: #E6F7FF; color: var(--color-primary); }
.record-grade.grade-warning { background: #FFF7E6; color: var(--color-warning); }

.record-drug-image {
  display: block;
  width: 40px;
  height: 40px;
  border-radius: 6px;
  object-fit: cover;
  background: #f0f0f0;
  text-align: center;
  line-height: 40px;
}

.record-image-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 8px;
}

.record-tags {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 24px;
  flex-shrink: 0;
}

.record-tags-row {
  display: flex;
  justify-content: center;
  gap: 4px;
}

.record-drug-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text);
  margin-bottom: 8px;
  line-height: 1.3;
  text-align: center;
}

.record-footer { display: flex; align-items: baseline; justify-content: space-between; }

.record-score-wrap { display: flex; align-items: baseline; gap: 2px; }

.record-score { font-size: 20px; font-weight: 700; }

.record-unit { font-size: 11px; color: var(--color-text-hint); }

.record-evaluator { font-size: 11px; color: var(--color-text-hint); }

.record-rule-badge {
  font-size: 10px;
  color: var(--color-text-hint, #888);
  white-space: nowrap;
}

@media (min-width: 768px) {
  .records-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  }
  .record-card {
    flex: none;
  }
}

/* ── List header (sort + count) ── */
.page-records .record-list-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  flex-wrap: wrap;
  gap: 8px;
}
.page-records .record-result-count {
  font-size: 13px;
  color: var(--color-text-hint);
}
.page-records .record-result-count strong {
  color: var(--color-text);
}
.page-records .sort-select {
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 12px;
  color: var(--color-text-secondary);
  background: #fff;
  outline: none;
  cursor: pointer;
}

/* ── Desktop sidebar + layout ── */
.page-records .record-layout { display: block; }
.page-records .record-sidebar { display: none; }

@media (min-width: 768px) {
  .page-records .filter-bar { display: none; }
  .page-records .record-layout {
    max-width: 720px;
    margin: 0 auto;
    display: flex;
    gap: 24px;
    align-items: flex-start;
    padding-left: 16px;
  }
  .page-records .record-sidebar {
    display: block; width: 200px; flex-shrink: 0; position: sticky; top: 72px;
    background: #fff; border-radius: 12px; padding: 12px 0;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06); max-height: calc(var(--vh, 1vh) * 100 - 80px); overflow-y: auto;
  }

  .page-records .record-layout .main-content {
    flex: 1;
    min-width: 0;
    margin: 0;
  }
}

/* ===== Knowledge Tabs ===== */
.knowledge-tabs {
  background: var(--color-card);
  background-clip: content-box;
  padding: 8px 16px;
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  gap: 8px;
}
.knowledge-tabs .tabs-scroll {
  flex: 1;
  min-width: 0;
}
.knowledge-add-btn {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  color: var(--color-primary);
  cursor: pointer;
  text-decoration: none;
}

/* ===== Knowledge Cards ===== */
.knowledge-card {
  display: flex;
  align-items: flex-start;
  background: var(--color-card);
  border-radius: var(--radius);
  padding: 14px;
  margin-bottom: 12px;
  box-shadow: var(--shadow);
}

.knowledge-icon {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 12px;
  flex-shrink: 0;
}

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

.knowledge-icon.icon-file {
  background: #FFF1F0;
  color: #FF4D4F;
}

.knowledge-icon.icon-url {
  background: #E6F7FF;
  color: var(--color-primary);
}

.knowledge-icon.icon-text {
  background: #F6FFED;
  color: var(--color-success);
}

.knowledge-icon.icon-image {
  background: #FFF7E6;
  color: var(--color-warning);
}

.knowledge-info {
  flex: 1;
  min-width: 0;
  cursor: pointer;
}

.knowledge-card-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
  margin-left: 8px;
  align-self: center;
}

.knowledge-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text);
  margin-bottom: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.knowledge-desc {
  font-size: 12px;
  color: var(--color-text-hint);
  margin-bottom: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.knowledge-meta {
  font-size: 11px;
  color: var(--color-text-hint);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ===== Vant Components Enhancement ===== */
.van-collapse-item__title .van-collapse-item__title-left {
  font-size: 14px;
  font-weight: 600;
}

.van-collapse-item__value {
  font-size: 12px;
  color: var(--color-primary);
}

.van-slider__bar {
  height: 6px;
}

/* ===== Profile Page ===== */
.profile-header {
  background: linear-gradient(135deg, #4A90E2 0%, #67B3E8 100%);
  padding: 30px 16px;
  text-align: center;
}

.profile-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.8);
  margin-bottom: 12px;
}

.profile-name {
  font-size: 18px;
  font-weight: 600;
  color: #fff;
  margin-bottom: 4px;
}

.profile-role {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.8);
}

.profile-menu {
  background: var(--color-card);
  margin: 16px;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.profile-menu-item {
  display: flex;
  align-items: center;
  padding: 14px 16px;
  border-bottom: 1px solid var(--color-border);
  cursor: pointer;
}

.profile-menu-item:last-child {
  border-bottom: none;
}

.profile-menu-item:active {
  background: #f5f5f5;
}

.profile-menu-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 12px;
  color: var(--color-primary);
  background: var(--color-primary-light);
}

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

.profile-menu-text {
  flex: 1;
  font-size: 14px;
  color: var(--color-text);
}

.profile-menu-arrow {
  width: 16px;
  height: 16px;
  color: var(--color-text-hint);
}

.profile-menu-arrow svg {
  width: 16px;
  height: 16px;
}

/* ===== Drug Search Page ===== */
.search-bar {
  background: var(--color-bg);
  padding: 8px 16px;
}

.filter-tabs {
  background: var(--color-card);
  padding: 8px 0;
}

.drug-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.drug-card {
  display: flex;
  background: var(--color-card);
  border-radius: var(--radius);
  padding: 14px;
  box-shadow: var(--shadow);
  cursor: pointer;
  min-width: 0;
  overflow: hidden;
  box-sizing: border-box;
}

.drug-card:active {
  transform: scale(0.98);
}

.drug-image {
  width: 60px;
  height: 60px;
  border-radius: 8px;
  overflow: hidden;
  margin-right: 12px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.drug-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.drug-icon-text {
  font-size: 28px;
}

.drug-info {
  flex: 1;
  min-width: 0;
}

.drug-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.drug-generic {
  font-size: 12px;
  color: var(--color-text-hint);
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.drug-spec {
  font-size: 11px;
  color: var(--color-text-hint);
  margin-bottom: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.drug-tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.tag {
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 10px;
  white-space: nowrap;
}

.tag-blue {
  background: #91CAFF;
  color: #1A5C9E;
}

.tag-green {
  background: #B7EB8F;
  color: #237804;
}

.tag-orange {
  background: #FFBB96;
  color: #C41A00;
}

.type-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
  vertical-align: middle;
  margin-right: 4px;
}

.tag-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}

.drug-score {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 60px;
}

.score-circle {
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}


.score-circle.score-excellent {
  background: linear-gradient(135deg, #B7EB8F, #95DE64);
  color: #237804;
}

.score-circle.score-good {
  background: linear-gradient(135deg, #91CAFF, #69B1FF);
  color: #1A5C9E;
}

.score-circle.score-warning {
  background: linear-gradient(135deg, #FFBB96, #FF9E6D);
  color: #C41A00;
}

.score-label {
  font-size: 10px;
  color: var(--color-text-hint);
}

/* ── Drug search: inline moves ── */
.search-box {
  display: flex; background: #fff; border-radius: 20px; padding: 8px 16px; align-items: center;
}
.search-box svg { width: 20px; height: 20px; color: #999; margin-right: 8px; flex-shrink: 0; }
.search-box input { flex: 1; border: none; outline: none; font-size: 14px; background: transparent; }
.search-box input::placeholder { color: #999; }

.tabs-scroll { display: flex; gap: 8px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.tabs-scroll::-webkit-scrollbar { display: none; }
.tab-btn {
  flex-shrink: 0; padding: 6px 14px; border-radius: 16px; font-size: 13px;
  background: var(--color-bg, #f5f5f5); color: var(--color-text-secondary, #666);
  border: none; cursor: pointer; transition: all 0.2s;
}
.tab-btn.active { background: var(--color-primary, #4A90E2); color: var(--color-card, #fff); }

/* ── Search suggestions ── */
.search-wrapper { position: relative; }
.search-suggestions {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0;
  background: #fff; border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  z-index: 200; max-height: 240px; overflow-y: auto; display: none;
}
.search-suggestions.open { display: block; }
.search-suggestions .sug-item {
  display: flex; align-items: center; padding: 10px 14px; font-size: 13px;
  cursor: pointer; border-bottom: 1px solid #f5f5f5;
}
.search-suggestions .sug-item:last-child { border-bottom: none; }
.search-suggestions .sug-item:hover { background: #f8f9fb; }
.search-suggestions .sug-item svg { width: 16px; height: 16px; color: #999; margin-right: 8px; flex-shrink: 0; }
.search-suggestions .sug-search { color: #4A90E2; font-weight: 500; }
.search-suggestions .sug-drug { color: #333; }

/* ── Drug list header (count + type filters + sort) ── */
.drug-list-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 0; flex-wrap: wrap; gap: 8px;
}
.drug-result-count { font-size: 13px; color: #999; }
.drug-result-count strong { color: #333; }
.drug-type-filters { display: none; }
@media (min-width: 768px) {
  .drug-type-filters {
    display: flex; align-items: center; gap: 2px; margin-left: 12px;
  }
  .filter-tabs { display: none; }
}
.type-filter-btn {
  padding: 2px 10px; border-radius: 10px; font-size: 12px;
  background: transparent; color: #999; border: none; cursor: pointer;
  transition: all 0.15s;
}
.type-filter-btn:hover { color: #666; }
.type-filter-btn.active { color: #4A90E2; font-weight: 600; background: #f0f4ff; }
.drug-list-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.sort-select {
  border: 1px solid #e8e8e8; border-radius: 8px; padding: 6px 10px;
  font-size: 12px; color: #666; background: #fff; outline: none; cursor: pointer;
}
.view-toggle { display: flex; border: 1px solid #e8e8e8; border-radius: 8px; overflow: hidden; }
.view-toggle button {
  border: none; background: #fff; padding: 6px 10px; cursor: pointer;
  color: #999; display: flex; align-items: center; justify-content: center;
}
.view-toggle button.active { background: #f0f4ff; color: #4A90E2; }
.view-toggle button svg { width: 16px; height: 16px; }

/* ── Desktop sidebar + layout ── */
.drug-layout { display: block; }
.drug-sidebar { display: none; }
@media (min-width: 768px) {
  .drug-list-header .atc-select { display: none; }
  .drug-layout {
    max-width: 720px; margin: 0 auto;
    display: flex; gap: 24px; align-items: flex-start;
    padding-left: 16px;
  }
  .drug-layout .main-content.with-tabs { flex: 1; max-width: none; min-width: 0; margin: 0; }
  .drug-sidebar {
    display: block; width: 200px; flex-shrink: 0; position: sticky; top: 72px;
    background: #fff; border-radius: 12px; padding: 12px 0;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06); max-height: calc(var(--vh, 1vh) * 100 - 80px); overflow-y: auto;
  }

  .sidebar-section-title {
    font-size: 11px; font-weight: 600; color: #999; text-transform: uppercase;
    padding: 0 14px 8px; letter-spacing: 0.5px;
  }
  .sidebar-atc {
    display: flex; align-items: center; justify-content: space-between;
    padding: 8px 14px; font-size: 13px; cursor: pointer; color: #555;
    transition: all 0.15s; border-left: 3px solid transparent;
  }
  .sidebar-atc:hover { background: #f8f9fb; color: #333; }
  .sidebar-atc.active { background: #f0f4ff; color: #4A90E2; border-left-color: #4A90E2; font-weight: 500; }
  .sidebar-atc .sidebar-count {
    font-size: 11px; color: #bbb; background: #f5f5f5;
    padding: 0 6px; border-radius: 8px; line-height: 18px;
  }
  .sidebar-atc.active .sidebar-count { background: #e0ecf9; color: #4A90E2; }
}

/* ── Card hover (desktop) ── */
@media (hover: hover) {
  .drug-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.1); transform: translateY(-2px); }
}

/* ── Grid mode overrides ── */
.drug-list.grid-mode .drug-card { flex-direction: column; text-align: center; }
.drug-list.grid-mode .drug-image { margin-right: 0; margin-bottom: 10px; }
.drug-list.grid-mode .drug-score { flex-direction: row; gap: 6px; min-width: auto; margin-top: 8px; }

/* ===== AI Evaluation Page ===== */
.ai-hero {
  text-align: center;
  padding: 24px 16px;
  background: linear-gradient(135deg, #4A90E2 0%, #67B3E8 100%);
  border-radius: var(--radius);
  margin-bottom: 16px;
}

.ai-hero-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 12px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ai-hero-icon svg {
  width: 36px;
  height: 36px;
  color: #fff;
}

.ai-hero h2 {
  font-size: 18px;
  font-weight: 600;
  color: #fff;
  margin-bottom: 4px;
}

.ai-hero p {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.8);
}

.ai-form {
  background: var(--color-card);
  border-radius: var(--radius);
  padding: 20px 16px;
  margin-bottom: 16px;
  box-shadow: var(--shadow);
}

.ai-form-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text);
  margin-bottom: 12px;
}

.ai-result {
  background: var(--color-card);
  border-radius: var(--radius);
  padding: 32px 16px;
  text-align: center;
  box-shadow: var(--shadow);
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.3s ease;
  display: none;
}

.ai-result.show {
  opacity: 1;
  transform: translateY(0);
  display: block;
}

.ai-result-score {
  font-size: 56px;
  font-weight: 700;
  color: var(--color-primary);
  line-height: 1;
}

.ai-result-grade {
  display: inline-block;
  font-size: 14px;
  padding: 6px 16px;
  border-radius: 16px;
  margin-top: 8px;
}

.grade-excellent {
  background: #B7EB8F;
  color: #237804;
}

.grade-good {
  background: #91CAFF;
  color: #1A5C9E;
}

.grade-warning {
  background: #FFBB96;
  color: #C41A00;
}

/* ===== Drug Detail Page ===== */

/* Radar chart — must have height for ECharts */
#radar-chart { height: 280px; min-height: 200px; width: 100%; }
.radar-container { height: 280px; min-height: 200px; width: 100%; }

.score-card {
  background: #fff;
  border-radius: 12px;
  padding: 16px;
  margin: 16px 16px 0;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}

.score-main { padding: 8px 0; }

.score-progress { margin-top: 8px; }
.progress-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.progress-label { font-size: 13px; color: #999; }
.progress-value { font-size: 14px; font-weight: 600; color: #4A90E2; }
.progress-track { height: 6px; background: #f0f0f0; border-radius: 3px; overflow: hidden; }
.progress-fill { height: 100%; border-radius: 3px; transition: width 0.5s ease; }

.score-breakdown { background: #fff; border-radius: 12px; padding: 16px; margin: 16px 16px 0; }
.breakdown-title { font-size: 14px; font-weight: 600; color: #333; margin-bottom: 12px; display: flex; align-items: center; gap: 6px; }
.breakdown-title svg { width: 18px; height: 18px; color: #4A90E2; }
.breakdown-item { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px dashed #f0f0f0; }
.breakdown-item:last-child { border-bottom: none; }
.breakdown-label { font-size: 13px; color: #666; display: flex; align-items: center; gap: 6px; }
.breakdown-percent { font-size: 10px; padding: 2px 6px; background: #f5f5f5; color: #999; border-radius: 4px; }
.breakdown-value { font-size: 14px; font-weight: 600; color: #333; }
.breakdown-total { display: flex; justify-content: space-between; align-items: center; padding-top: 12px; margin-top: 4px; border-top: 1px solid #eee; }
.breakdown-total .breakdown-label { font-weight: 600; color: #333; }
.breakdown-total .breakdown-value { font-size: 18px; font-weight: 700; color: #4A90E2; }

.platform-score-card {
  background: linear-gradient(135deg, #667eea, #764ba2);
  border-radius: 12px; padding: 16px;
  margin: 16px 16px 0; color: #fff;
}
.platform-score-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.platform-score-title { font-size: 14px; font-weight: 600; }
.platform-score-value { font-size: 28px; font-weight: 700; text-align: center; }
.platform-score-dims { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.platform-score-dim { flex: 1; min-width: 80px; text-align: center; font-size: 11px; opacity: 0.9; }
.platform-score-dim span { display: block; font-size: 16px; font-weight: 600; margin-top: 2px; }
.platform-loading { text-align: center; padding: 10px; color: #fff; opacity: 0.7; font-size: 12px; }
.rule-name-bar { margin-top: 8px; font-size: 13px; color: #888; text-align: center; }
.criteria-item-detail.expanded { display: block; }

/* Drug info card */
.drug-detail-row { display: flex; flex-wrap: wrap; gap: 8px; padding: 8px 0; border-top: 1px solid #f0f0f0; margin-top: 8px; }
.drug-detail-item { flex: 1; min-width: 120px; font-size: 12px; color: #666; }
.drug-detail-label { color: #999; margin-right: 4px; }

/* Tag colors (used in drug-info) */
.tag-negotiated { background: #FFF1F0; color: #FF4D4F; }
.tag-chemical { background: #E8F4FF; color: #4A90E2; }
.tag-chinese { background: #FFF7E6; color: #FA8C16; }

/* Score badge */
.score-detail-badge { font-size: 11px; padding: 2px 8px; border-radius: 10px; white-space: nowrap; }
.score-detail-badge.personal { background: #E8F4FF; color: #4A90E2; }
.score-detail-badge.hospital { background: #FFF7E6; color: #FA8C16; }
.score-detail-badge.platform { background: #F0E8FF; color: #722ED1; }

/* Dimension detail list */
.dimension-item { background: #F5F8FF; border-radius: 12px; padding: 12px; margin-bottom: 12px; }
.dimension-top { display: flex; align-items: center; margin-bottom: 8px; }
.dimension-name-wrap { flex: 1; display: flex; align-items: center; justify-content: space-between; }
.dimension-name { font-size: 14px; font-weight: 600; color: #333; }
.dimension-child-item { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; border-bottom: 1px solid #fefefe; font-size: 13px; color: #555; }
.dimension-child-item:first-child { border-top: 1px solid #fefefe; }
.dimension-child-item:last-child { border-bottom: 1px solid #fefefe; }
.dimension-child-max, .score-detail-max { color: #999; font-weight: 400; font-size: 10px; }

/* Record item (score record list) */
.record-bottom { display: flex; align-items: center; gap: 10px; }
.highlight { color: #4A90E2; }

/* Peer review */
.peer-review-btn {
  font-size: 11px; padding: 4px 10px; background: #F0F5FF; color: #4A90E2;
  border: 1px solid #D6E4FF; border-radius: 12px; cursor: pointer;
}
.peer-review-btn:active { background: #D6E4FF; }
.peer-popup-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); z-index: 300; display: none; align-items: center; justify-content: center; }
.peer-popup-overlay.active { display: flex; }
.peer-popup { background: #fff; border-radius: 16px; width: 300px; padding: 24px; text-align: center; box-shadow: 0 8px 24px rgba(0,0,0,0.15); }
.peer-popup-title { font-size: 16px; font-weight: 600; color: #333; margin-bottom: 20px; }
.peer-popup-row { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid #f5f5f5; font-size: 14px; }
.peer-popup-row:last-child { border-bottom: none; }
.peer-popup-label { color: #999; }
.peer-popup-value { font-weight: 600; color: #333; }
.peer-popup-value.highlight { color: #4A90E2; }
.peer-popup-close { margin-top: 20px; padding: 10px 32px; background: #f5f5f5; border: none; border-radius: 20px; font-size: 14px; color: #666; cursor: pointer; }

/* Empty state (no data placeholder) */
.empty-state { padding: 40px; text-align: center; color: #999; font-size: 13px; }
.empty-state-sm { padding: 20px; text-align: center; color: #999; font-size: 12px; }

/* Score detail card (panel overlay) */
.score-detail-card { background: #fff; border-radius: 12px; padding: 14px; margin-bottom: 10px; box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
.score-detail-block-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.score-detail-block-title { font-size: 14px; font-weight: 600; color: #333; }
.score-detail-block-score { font-size: 16px; font-weight: 700; }
.score-detail-weight { font-size: 11px; color: #999; margin-bottom: 8px; }
.score-detail-grade-header { border-radius: 12px; padding: 20px 16px; color: #fff; margin-bottom: 16px; text-align: center; }
.score-detail-grade-label { font-size: 13px; opacity: 0.8; margin-bottom: 4px; }
.score-detail-grade-value { font-size: 36px; font-weight: 700; }
.score-detail-grade-extra { margin-top: 4px; }
.score-detail-grade-extra .score-detail-badge { display: inline-block; }
.score-detail-grade-extra .score-detail-badge + .score-detail-badge { margin-left: 6px; }

/* Knowledge card extras */
.knowledge-item-title { font-size: 14px; color: #333; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.knowledge-item-desc { font-size: 11px; color: #999; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.knowledge-empty { padding: 30px; text-align: center; color: #999; font-size: 13px; }

/* Detail overlay common */
.detail-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); z-index: 200; display: none; }
.detail-overlay.active { display: block; }
.detail-panel { position: fixed; top: 0; right: 0; width: 100%; max-width: 430px; height: 100%; background: var(--color-card, #fff); z-index: 201; transform: translateX(100%); transition: transform 0.3s ease; }
.detail-overlay.active .detail-panel { transform: translateX(0); }
.detail-panel-header { display: flex; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--color-border, #eee); background: var(--color-card, #fff); }
.detail-panel-header .header-title { flex: 1; text-align: center; font-size: 16px; font-weight: 600; }
.detail-body { padding: 16px; height: calc(var(--vh, 1vh) * 100 - 57px); overflow-y: auto; }
.detail-title { font-size: 18px; font-weight: 600; margin-bottom: 12px; color: var(--color-text, #333); }
.detail-desc { color: var(--color-text-secondary, #666); font-size: 14px; line-height: 1.6; margin-bottom: 16px; }
.detail-section { margin-bottom: 20px; }
.detail-section-title { font-size: 14px; font-weight: 600; color: var(--color-text, #333); margin-bottom: 12px; display: flex; align-items: center; gap: 6px; }
.detail-row { display: flex; padding: 10px 0; border-bottom: 1px solid var(--color-bg, #f5f5f5); }
.detail-row:last-child { border-bottom: none; }
.detail-label { width: 90px; font-size: 13px; color: var(--color-text-hint, #999); flex-shrink: 0; }
.detail-value { flex: 1; font-size: 13px; color: var(--color-text, #333); word-break: break-all; }
.detail-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.detail-tag { padding: 4px 10px; font-size: 12px; border-radius: 4px; }
.detail-tag.negotiated { background: #FFF1F0; color: #FF4D4F; }
.detail-tag.essential { background: #E8F8E8; color: #52C41A; }
.detail-tag.chemical { background: #E8F4FF; color: #4A90E2; }
.detail-tag.chinese { background: #FFF7E6; color: #FA8C16; }
.detail-tag.medical-a { background: #E8F8E8; color: #52C41A; }
.detail-tag.medical-b { background: #E8F4FF; color: #4A90E2; }
.detail-tag.medical-c { background: #f5f5f5; color: #999; }
.detail-url { display: flex; align-items: center; gap: 8px; padding: 12px; background: var(--color-bg, #f5f5f5); border-radius: var(--radius, 8px); color: var(--color-primary, #4A90E2); font-size: 14px; cursor: pointer; word-break: break-all; }
.detail-text { font-size: 14px; line-height: 1.8; color: var(--color-text, #333); }
.detail-image { text-align: center; }
.detail-image img { max-width: 100%; border-radius: var(--radius, 8px); }
.detail-file { display: flex; align-items: center; gap: 12px; padding: 20px; background: var(--color-bg, #f5f5f5); border-radius: var(--radius, 8px); }
.detail-item-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px dashed var(--color-border-light, #f0f0f0); font-size: 13px; }
.detail-item-row:last-child { border-bottom: none; }
.detail-item-name { flex: 1; color: var(--color-text-secondary, #666); }
.detail-item-score { font-weight: 600; min-width: 40px; text-align: right; }

/* Slot for dimension icons */
.dimension-icon { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; margin-right: 10px; font-size: 14px; }
.dimension-score { font-size: 16px; font-weight: 600; }

/* ===== Desktop Nav ===== */
.desktop-nav {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 56px;
  background: #fff;
  border-bottom: 1px solid var(--color-border);
  z-index: 999;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}

.desktop-nav-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 20px;
}

.desktop-nav-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 600;
  color: var(--color-primary);
  text-decoration: none;
  margin-right: 32px;
  flex-shrink: 0;
}

.desktop-nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1;
}

.desktop-nav-link {
  padding: 8px 14px;
  font-size: 13px;
  color: var(--color-text-hint);
  text-decoration: none;
  border-radius: 6px;
  transition: all 0.2s;
  white-space: nowrap;
}

.desktop-nav-link:hover {
  background: #f0f4ff;
  color: var(--color-primary);
}

.desktop-nav-link.active {
  background: #E8F4FF;
  color: var(--color-primary);
  font-weight: 500;
}

.desktop-nav-user {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: 16px;
  flex-shrink: 0;
}

.desktop-nav-username {
  font-size: 13px;
  color: var(--color-text);
}

/* ── Trigger ── */

.desktop-nav-user-trigger {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  transition: background 0.2s;
  text-decoration: none;
  color: inherit;
}
.desktop-nav-user-trigger:hover {
  background: var(--color-bg-hover, #f0f4ff);
}
.desktop-nav-user-trigger.active .desktop-nav-chevron {
  transform: rotate(180deg);
}

/* ── Trigger avatar ── */

.desktop-nav-avatar-wrap {
  display: flex;
  align-items: center;
}
.desktop-nav-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  object-fit: cover;
}
.desktop-nav-avatar-icon {
  color: var(--color-text-hint);
  display: block;
}
.desktop-nav-chevron {
  color: var(--color-text-hint);
  transition: transform 0.2s;
  display: block;
}

/* ── Dropdown panel ── */

.desktop-nav-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 210px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  z-index: 1000;
  padding: 6px 0;
  border: 1px solid var(--color-border);
}
.desktop-nav-dropdown.open {
  display: block;
}
.desktop-nav-dropdown::before {
  content: '';
  position: absolute;
  top: -6px;
  right: 24px;
  width: 10px;
  height: 10px;
  background: #fff;
  border-left: 1px solid var(--color-border);
  border-top: 1px solid var(--color-border);
  transform: rotate(45deg);
}

/* ── Dropdown header ── */

.dropdown-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
}
.dropdown-avatar-wrap {
  flex-shrink: 0;
}
.dropdown-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
}
.dropdown-avatar-fallback {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 600;
}
.dropdown-user-info {
  min-width: 0;
}
.dropdown-user-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dropdown-user-role {
  font-size: 12px;
  color: var(--color-text-hint);
  margin-top: 2px;
}

.dropdown-user-hospital {
  font-size: 11px;
  color: var(--color-text-placeholder);
  margin-top: 1px;
}

/* ── Dropdown divider ── */

.dropdown-divider {
  height: 1px;
  background: var(--color-border-light);
  margin: 4px 0;
}

/* ── Dropdown items ── */

.dropdown-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  font-size: 13px;
  color: var(--color-text);
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s;
  white-space: nowrap;
}
.dropdown-item:hover {
  background: #f5f7fa;
}
.dropdown-item-icon {
  flex-shrink: 0;
  color: var(--color-text-hint);
  display: block;
}
.dropdown-item-danger {
  color: #F5222D;
}
.dropdown-item-danger:hover {
  background: #FFF1F0;
}
.dropdown-item-danger .dropdown-item-icon {
  color: #F5222D;
}

/* ── Desktop Nav Search ── */
.desktop-nav-search {
  position: relative; flex-shrink: 0;
}
.desktop-nav-search input {
  width: 140px; height: 32px; border: none; background: #f0f2f5;
  border-radius: 18px; padding: 0 32px 0 12px; font-size: 13px;
  outline: none; transition: all 0.2s;
}
.desktop-nav-search input:focus { background: #e8f0fe; width: 180px; }
.desktop-nav-search svg {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  pointer-events: none;
}

.desktop-search-wrapper {
  position: relative; margin-left: auto; margin-right: 12px;
}
.desktop-search-suggestions {
  position: absolute; top: 100%; left: 0; right: 0; margin-top: 4px;
  background: #fff; border-radius: 8px; box-shadow: 0 4px 16px rgba(0,0,0,0.12);
  max-height: 320px; overflow-y: auto; z-index: 2000; display: none;
}
.desktop-search-suggestions.open { display: block; }
.desktop-search-suggestions .sug-item {
  padding: 10px 12px; cursor: pointer; font-size: 13px; color: #333;
}
.desktop-search-suggestions .sug-item:hover { background: #f5f5f5; }
.desktop-search-suggestions .sug-search {
  color: #666; border-bottom: 1px solid #f0f0f0;
}

.search-clear {
  position: absolute; right: 30px; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px; border-radius: 50%; border: none;
  background: #ccc; color: #fff; font-size: 11px; line-height: 16px;
  text-align: center; cursor: pointer; display: none; padding: 0; z-index: 1;
}
.search-clear:hover { background: #999; }

@media (min-width: 1024px) {
  .desktop-nav-search input { width: 180px; }
  .desktop-nav-search input:focus { width: 240px; }
}

/* PC 端隐藏页面内搜索栏 */
@media (min-width: 768px) {
  .page-search-bar { display: none !important; }
  body.page-home .home-header { display: none; }
}

/* ===== Stats Grid (mobile base) ===== */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.stat-card {
  background: var(--color-card);
  border-radius: 12px;
  padding: 16px 12px;
  text-align: center;
  box-shadow: var(--shadow);
}

.stat-value {
  font-size: 22px;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: 2px;
}

.stat-label {
  font-size: 12px;
  color: var(--color-text-secondary);
}

.stat-unit {
  font-size: 11px;
  color: var(--color-text-hint);
  margin-top: 2px;
}

/* ===== Tablet: 768px ===== */
@media (min-width: 768px) {
  .desktop-nav {
    display: block;
  }

  body {
    padding-top: 56px;
    padding-bottom: 0;
    max-width: 100%;
    height: auto;
    overflow: visible;
    display: block;
  }

  #app {
    overflow: visible;
    min-height: calc(var(--vh, 1vh) * 100 - 57px);
  }

  .tab-bar-wrapper, .tab-bar {
    display: none;
  }

  .main-content, .content {
    max-width: 720px;
    margin: 0 auto;
  }
  .search-bar, .filter-tabs, .filter-bar, .stats-bar,
  .user-info, .tab-nav,
  .add-btn-wrap, .save-btn-wrap, .hospital-header,
  .knowledge-tabs, .drug-filter-section {
    max-width: 720px;
    margin: 0 auto;
  }
  #content-view {
    max-width: 720px;
    margin: 0 auto;
  }

  .home-content {
    max-width: 720px;
    margin: 0 auto;
  }

  .home-header {
    padding: 30px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .home-search {
    width: 360px;
  }

  .stats-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .drug-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .drug-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .knowledge-card {
    margin-bottom: 0;
  }

  .knowledge-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    box-shadow: none;
    background: transparent;
  }
  .knowledge-list.list-mode { display: block; box-shadow: none; background: transparent; }
  .knowledge-list.list-mode .knowledge-info { flex-direction: row; align-items: center; }
  .knowledge-list.list-mode .knowledge-date { white-space: nowrap; flex-shrink: 0; padding-left: 16px; }

  .profile-page {
    max-width: 720px;
    margin: 0 auto;
  }

  .profile-menu {
    max-width: 600px;
    margin: 16px auto;
  }

  .profile-header {
    padding: 24px 16px;
  }

  .ai-hero {
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
  }

  .ai-form {
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
  }

  .ai-result {
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
  }

  .dimensions-section .dimension-list {
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
  }

  .header {
    max-width: 720px;
    margin: 0 auto;
  }

  .score-section,
  .drug-header-section, .dimension-section,
  .criteria-section, .records-section,
  .knowledge-section, .action-buttons {
    max-width: 720px;
    margin: 0 auto;
  }
  .drug-header-section { border-radius: 0 0 var(--radius-lg) var(--radius-lg); }

  .form-item {
    display: flex;
    align-items: flex-start;
  }

  .form-label {
    width: 100px;
    flex-shrink: 0;
    margin-bottom: 0;
    padding-top: 10px;
  }

  .form-input, .form-textarea, .radio-group, .checkbox-group {
    flex: 1;
  }

  .search-form {
    width: 100%;
  }

  .stat-cards {
    grid-template-columns: repeat(4, 1fr);
  }

}

/* ===== Desktop: 1024px ===== */
@media (min-width: 1024px) {
  body {
    max-width: 100%;
    padding-bottom: 0;
  }

  .main-content, .content {
    max-width: 960px;
    margin: 0 auto;
  }
  .search-bar, .filter-tabs, .filter-bar, .stats-bar,
  .user-info, .tab-nav,
  .add-btn-wrap, .save-btn-wrap, .hospital-header,
  .knowledge-tabs, .drug-filter-section {
    max-width: 960px;
    margin: 0 auto;
  }
  .drug-layout {
    max-width: 960px;
    margin: 0 auto;
  }
  .page-records .record-layout {
    max-width: 960px;
    margin: 0 auto;
  }

  .home-content {
    max-width: 960px;
    margin: 0 auto;
  }

  .home-header {
    padding: 40px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .home-search {
    width: 400px;
  }

  .stats-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .drug-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .drug-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    min-width: 0;
    width: 100%;
  }

  .knowledge-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    box-shadow: none;
    background: transparent;
  }
  .knowledge-list.list-mode { display: block; box-shadow: none; background: transparent; }
  .knowledge-list.list-mode .knowledge-info { flex-direction: row; align-items: center; }
  .knowledge-list.list-mode .knowledge-date { white-space: nowrap; flex-shrink: 0; padding-left: 16px; }

  .knowledge-card {
    margin-bottom: 0;
  }

  .profile-page {
    max-width: 960px;
    margin: 0 auto;
  }

  .profile-menu {
    max-width: 400px;
    margin: 16px auto;
  }

  .ai-hero,
  .ai-form,
  .ai-result,
  .dimensions-section .dimension-list {
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
  }

  .header {
    max-width: 960px;
    margin: 0 auto;
  }

  /* Drug detail: flex row layout */
  #content-view[style*="block"] {
    max-width: 960px;
    margin: 0 auto;
  }

  .drug-header-section {
    max-width: 960px;
    margin: 0 auto;
  }

  .score-section {
    max-width: 960px;
    margin: 0 auto;
  }

  .dimension-section {
    max-width: 960px;
    margin: 0 auto;
  }

  .criteria-section {
    max-width: 960px;
    margin: 0 auto;
  }

  .action-buttons {
    max-width: 960px;
    margin: 16px auto 0;
  }

  .records-section {
    max-width: 960px;
    margin: 0 auto;
  }

  .knowledge-section {
    max-width: 960px;
    margin: 0 auto;
  }

  /* Evaluation page: two-column layout */
  .evaluation-page .eval-drug-card {
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
  }

  /* Rule management: widen the editor area */
  .rule-management-page .tree-container {
    max-width: 700px;
    margin: 0 auto;
  }

  .rule-management-page .van-tabs {
    max-width: 960px;
    margin: 0 auto;
  }

  /* Statistics: wider layout */
  .stat-cards {
    grid-template-columns: repeat(4, 1fr);
  }

  /* Hospital & ATC management: two-column list */
}

/* ── Grade aliases (homepage) ── */
.grade-green { background: #B7EB8F; color: #237804; }
.grade-blue { background: #91CAFF; color: #1A5C9E; }
.grade-orange { background: #FFBB96; color: #C41A00; }

/* ===== Homepage ===== */
body.page-home .section { margin-bottom: 20px; }
body.page-home .section-body {
  background: #fff; border-radius: 12px; padding: 16px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
body.page-home .atc-group {
  margin-bottom: 12px; background: #f8f9fb; border-radius: 10px; padding: 12px;
}
body.page-home .atc-group:last-child { margin-bottom: 0; }
body.page-home .section-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 14px; padding-left: 11px; position: relative;
}
body.page-home .section-header::before {
  content: ''; position: absolute; left: 0; top: 3px; bottom: 3px;
  width: 3px; background: linear-gradient(180deg, #4A90E2, #67B3E8);
  border-radius: 2px;
}
body.page-home .section-title {
  font-size: 17px; font-weight: 600; color: #333;
  display: flex; align-items: center; gap: 6px;
}
body.page-home .section-count { font-size: 12px; color: #999; }
body.page-home .section-more {
  font-size: 12px; color: #bbb; cursor: pointer; transition: color .2s;
  display: flex; align-items: center; gap: 2px;
}
body.page-home .section-more:hover { color: #4A90E2; }
body.page-home .section-more::after {
  content: '›'; font-size: 14px; line-height: 1;
}

body.page-home .home-search-form {
  display: flex; align-items: center;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 22px; padding: 4px 4px 4px 16px; width: 100%;
}
body.page-home .home-search-form input {
  flex: 1; border: none; outline: none; font-size: 14px; background: transparent;
}
body.page-home .home-search-form input::placeholder { color: #999; }
body.page-home .home-search-form button {
  padding: 8px 18px; background: #4A90E2; color: #fff;
  border: none; border-radius: 18px; font-size: 14px; cursor: pointer;
}
body.page-home .home-search-form button:active { background: #3A80D2; }

@media (min-width: 768px) { body.page-home .home-search-form { width: 360px; } }
@media (min-width: 1024px) { body.page-home .home-search-form { width: 400px; } }
@media (min-width: 1280px) { body.page-home .home-search-form { width: 440px; } }

body.page-home .atc-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 8px; padding: 0 2px;
}
body.page-home .atc-name { font-size: 14px; font-weight: 600; color: #333; }
body.page-home .atc-sup { font-size: 12px; font-weight: 600; color: #4A90E2; margin-left: 4px; }
body.page-home .atc-count { font-size: 12px; color: #999; }

body.page-home .drug-card {
  background: #fff; border-radius: 8px; padding: 14px 12px; cursor: pointer;
}
body.page-home .drug-card:active { background: #f8f8f8; }
body.page-home .drug-card-inner { display: flex; align-items: center; }
body.page-home .drug-icon {
  width: 40px; height: 40px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  margin-right: 10px; flex-shrink: 0; font-size: 20px;
}
body.page-home .drug-image-wrapper {
  width: 40px; height: 40px; border-radius: 8px; overflow: hidden;
  margin-right: 10px; flex-shrink: 0; background: #f0f0f0;
  display: flex; align-items: center; justify-content: center;
}
body.page-home .drug-image-wrapper img { width: 100%; height: 100%; object-fit: cover; }
body.page-home .icon-text { font-size: 20px; }
body.page-home .drug-info { flex: 1; min-width: 0; }
body.page-home .drug-name { font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.page-home .drug-spec { font-size: 11px; color: #999; margin-top: 2px; }
body.page-home .drug-tag {
  font-size: 10px; padding: 2px 6px; border-radius: 10px;
  margin-top: 4px; display: inline-block;
}

body.page-home .home-eval-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
}
@media (min-width: 768px) {
  body.page-home .home-eval-grid {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  }
}
body.page-home .home-eval-card {
  background: #fff; border-radius: 8px; padding: 14px 10px;
  text-align: center; cursor: pointer; min-width: 0;
}
body.page-home .home-eval-card:active { background: #f8f8f8; }
body.page-home .home-eval-avatar {
  width: 50px; height: 50px;
  background: linear-gradient(135deg, #E8F4FF, #D0E8FF);
  border-radius: 50%; margin: 0 auto 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; overflow: hidden;
}
body.page-home .home-eval-avatar img { width: 100%; height: 100%; object-fit: cover; }
body.page-home .home-eval-fallback { display: none; width: 100%; height: 100%; }
body.page-home .home-eval-fallback-show { display: block; }
body.page-home .home-eval-name {
  font-size: 13px; font-weight: 500;
  margin-bottom: 6px;
  height: 2.8em;
  display: flex;
  align-items: center;
  justify-content: center;
}
body.page-home .home-eval-name span {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.4;
}
body.page-home .home-eval-score {
  font-size: 18px; font-weight: 700; color: #4A90E2;
}

body.page-home .stat-overlay {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.5); z-index: 1000;
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
body.page-home .stat-popup {
  background: #fff; border-radius: 16px; width: 100%;
  max-width: 340px; max-height: 70vh; overflow: hidden;
  animation: homeSlideUp 0.3s ease;
}
@keyframes homeSlideUp {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
body.page-home .stat-popup-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px; border-bottom: 1px solid #eee;
}
body.page-home .stat-popup-title { font-size: 16px; font-weight: 600; color: #333; }
body.page-home .stat-popup-close { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; color: #999; font-size: 18px; cursor: pointer; }
body.page-home .stat-popup-body { padding: 16px; max-height: calc(70vh - 60px); overflow-y: auto; }
body.page-home .stat-detail-section { margin-bottom: 16px; }
body.page-home .stat-detail-title { font-size: 13px; color: #666; margin-bottom: 8px; font-weight: 500; }
body.page-home .stat-detail-item { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid #f5f5f5; font-size: 13px; }
body.page-home .stat-detail-item:last-child { border-bottom: none; }
body.page-home .stat-detail-label { color: #666; }
body.page-home .stat-detail-value { color: #333; font-weight: 500; }
body.page-home .stat-detail-value.green { color: #52C41A; }
body.page-home .stat-detail-value.blue { color: #4A90E2; }
body.page-home .stat-detail-value.orange { color: #FA8C16; }
body.page-home .stat-detail-tip { background: #f0f7ff; padding: 12px; border-radius: 8px; font-size: 12px; color: #666; line-height: 1.6; }

body.page-home .loading-stat { font-size: 12px; color: #999; text-align: center; padding: 10px; }

/* ===== Large Desktop: 1280px ===== */
@media (min-width: 1280px) {
  body {
    max-width: 100%;
  }

  .main-content, .content {
    max-width: 1200px;
    margin: 0 auto;
  }
  .header,
  .search-bar, .filter-tabs, .filter-bar, .stats-bar,
  .user-info, .tab-nav,
  .add-btn-wrap, .save-btn-wrap, .hospital-header,
  .knowledge-tabs, .drug-filter-section {
    max-width: 1200px;
    margin: 0 auto;
  }
  .drug-layout {
    max-width: 1200px;
    margin: 0 auto;
  }
  .page-records .record-layout {
    max-width: 1200px;
    margin: 0 auto;
  }
  .knowledge-list {
    grid-template-columns: repeat(3, 1fr);
  }
  .knowledge-list.list-mode { display: block; box-shadow: none; background: transparent; }

  .stat-cards {
    grid-template-columns: repeat(4, 1fr);
  }

  .drug-header-section,
  .score-section,
  .dimension-section,
  .criteria-section,
  .action-buttons,
  .records-section,
  .knowledge-section,
  #content-view {
    max-width: 1200px;
    margin: 0 auto;
  }

  .profile-menu {
    max-width: 400px;
    margin: 16px auto;
  }

  .profile-page {
    max-width: 1200px;
    margin: 0 auto;
  }
}

/* ===== Button System ===== */
.btn {
  padding: 8px 16px; border-radius: var(--radius); font-size: 13px;
  border: none; cursor: pointer; transition: all 0.2s; font-weight: 500;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
.btn-primary {
  background: linear-gradient(135deg, var(--color-primary) 0%, #67B3E8 100%);
  color: #fff; box-shadow: 0 2px 8px rgba(74,144,226,0.3);
}
.btn-primary:active { transform: translateY(1px); }
.btn-outline {
  background: #fff; color: var(--color-primary); border: 1px solid var(--color-primary);
}
.btn-danger {
  background: linear-gradient(135deg, var(--color-danger) 0%, #FF7875 100%);
  color: #fff; box-shadow: 0 2px 6px rgba(245,34,45,0.25);
}
.btn-success {
  background: linear-gradient(135deg, var(--color-success) 0%, #73D13D 100%);
  color: #fff;
}
.btn-sm { padding: 4px 12px; font-size: 12px; border-radius: 4px; }
.btn-lg { height: 44px; font-size: 15px; border-radius: var(--radius-full); }
.btn-block { width: 100%; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

/* ===== Card System ===== */
.card {
  background: var(--color-card); border-radius: var(--radius-lg);
  padding: 16px; box-shadow: var(--shadow);
}
.card-list { display: flex; flex-direction: column; gap: 12px; }

/* ===== Form System ===== */
.form-group { margin-bottom: 16px; }
.form-label { display: block; font-size: 14px; color: var(--color-text); margin-bottom: 6px; font-weight: 500; }
.form-label .required { color: var(--color-danger); margin-left: 2px; }
.required { color: var(--color-danger); margin-left: 2px; }
.form-input {
  width: 100%; height: 44px; padding: 0 12px;
  border: 1px solid var(--color-border-input); border-radius: var(--radius-sm);
  font-size: 14px; outline: none; background: var(--color-card); transition: border-color 0.2s;
}
.form-input:focus { border-color: var(--color-primary); }
.form-input::placeholder { color: var(--color-text-placeholder); }
.form-textarea {
  width: 100%; padding: 10px 12px;
  border: 1px solid var(--color-border-input); border-radius: var(--radius-sm);
  font-size: 14px; outline: none; resize: vertical; min-height: 100px; font-family: inherit;
}
.form-textarea:focus { border-color: var(--color-primary); }
.radio-group { display: flex; gap: 16px; flex-wrap: wrap; }
.radio-group label { display: flex; align-items: center; gap: 6px; font-size: 14px; cursor: pointer; }
.radio-group input[type="radio"] { width: 16px; height: 16px; accent-color: var(--color-primary); }
.checkbox-group { display: flex; gap: 16px; flex-wrap: wrap; }
.checkbox-group label { display: flex; align-items: center; gap: 6px; font-size: 14px; cursor: pointer; }
.checkbox-group input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--color-primary); }

/* ===== Modal System ===== */
.modal-overlay {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.5); z-index: var(--z-modal);
  display: flex; align-items: center; justify-content: center;
}
.modal {
  background: var(--color-card); border-radius: var(--radius-lg);
  width: 85%; max-width: 360px; max-height: 80vh; overflow-y: auto;
}
.modal-header { font-size: 16px; font-weight: 600; text-align: center; padding: 16px 16px 0; }
.modal-body { padding: 16px; }
.modal-body .field-row { margin-bottom: 12px; }
.modal-body .field-row label { display: block; font-size: 12px; color: var(--color-text-hint); margin-bottom: 4px; }
.modal-body .field-row input,
.modal-body .field-row select {
  width: 100%; height: 40px; border: 1px solid var(--color-border-input);
  border-radius: var(--radius-sm); padding: 0 12px; font-size: 14px; outline: none;
  box-sizing: border-box; background: var(--color-card);
}
.modal-body .field-row input:focus,
.modal-body .field-row select:focus { border-color: var(--color-primary); }
.modal-footer { display: flex; border-top: 1px solid var(--color-border); }
.modal-footer button { flex: 1; height: 44px; border: none; background: var(--color-card); font-size: 15px; cursor: pointer; }
.modal-footer button:active { background: #f5f5f5; }
.modal-btn-cancel { color: var(--color-text-hint); border-right: 1px solid var(--color-border); }
.modal-btn-confirm { color: var(--color-primary); font-weight: 500; }

/* ===== Grade Badge ===== */
.grade-badge {
  display: inline-block; font-size: 10px; padding: 2px 8px; border-radius: var(--radius-full);
}
.grade-excellent { background: #B7EB8F; color: #237804; }
.grade-good { background: #91CAFF; color: #1A5C9E; }
.grade-warning { background: #FFBB96; color: #C41A00; }

/* ===== Color Legend ===== */
.color-legend {
  display: flex; gap: 16px; justify-content: center; align-items: center;
  padding: 12px 16px; margin-top: 24px;
  background: #fafafa; border-radius: var(--radius-lg); font-size: 12px; color: #999;
}
.color-legend .legend-dot {
  display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 4px;
}

/* ===== Infinite Scroll ===== */
.scroll-loading {
  text-align: center; padding: 16px;
  color: var(--color-text-hint); font-size: 12px;
}
.no-more {
  text-align: center; padding: 16px;
  color: var(--color-text-hint); font-size: 12px;
}
.scroll-sentinel {
  height: 1px;
}

/* ── Inline filter buttons inside list header ── */
.record-list-header .record-type-filters {
  display: none;
}
@media (min-width: 768px) {
  .record-list-header .record-type-filters {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    margin-left: 12px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex-shrink: 0;
  }
  .record-list-header .record-type-filters::-webkit-scrollbar { display: none; }
}

/* ── Type filter btn for records page ── */
.page-records .type-filter-btn {
  padding: 2px 10px; border-radius: 10px; font-size: 12px;
  background: transparent; color: #999; border: none; cursor: pointer;
  transition: all 0.15s;
}
.page-records .type-filter-btn:hover { color: #666; }
.page-records .type-filter-btn.active { color: #4A90E2; font-weight: 600; background: #f0f4ff; }

/* ── Sort select inside desktop record layout ── */
.page-records .record-list-actions {
  display: flex; align-items: center; gap: 8px; margin-left: auto;
}

/* ── Pagination bar reused ── */
.page-records .pagination-bar {
  display: flex; justify-content: space-between; align-items: center;
  padding: 16px 0; border-top: 1px solid #f0f0f0; margin-top: 8px;
}
.page-records .pagination-bar .page-info {
  font-size: 13px; color: #999;
}
.page-records .page-btn {
  padding: 6px 16px; border: 1px solid #ddd; border-radius: 6px;
  background: #fff; color: #333; font-size: 13px; cursor: pointer;
}
.page-records .page-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* ── ATC select inside mobile list header ── */
.atc-select {
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 4px 8px;
  font-size: 12px;
  color: var(--color-text-secondary);
  background: #fff;
  outline: none;
  cursor: pointer;
  flex-shrink: 0;
  max-width: 110px;
}

/* ── Mobile: compact spacing ── */
@media (max-width: 767px) {
  .page-records .filter-tabs { padding: 4px 0; }
  .page-records .filter-bar { padding-bottom: 2px; }
  .page-records .main-content { padding-top: 8px; }
}

/* ── Rule Management Page ── */
body.rule-management-page { margin: 0 auto; }

.rule-management-page .content { padding: 16px; }
.rule-management-page .content.hidden { display: none; }

.rule-management-page .section-title {
  font-size: 14px; font-weight: 600; color: var(--color-text);
  margin-bottom: 12px; display: flex; align-items: center; gap: 8px;
}
.rule-management-page .section-title::before { content: ''; width: 4px; height: 16px; background: var(--color-primary); border-radius: 2px; }

.rule-management-page .rule-card {
  background: var(--color-card); border-radius: 12px; padding: 16px;
  margin-bottom: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.rule-management-page .rule-card-header {
  display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px;
}
.rule-management-page .rule-card-title { font-size: 15px; font-weight: 600; color: var(--color-text); }
.rule-management-page .rule-card-meta { font-size: 12px; color: var(--color-text-hint); margin-bottom: 8px; }
.rule-management-page .rule-card-desc { font-size: 13px; color: var(--color-text-secondary); line-height: 1.5; }
.rule-management-page .rule-card-footer {
  display: flex; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--color-border);
  justify-content: flex-end;
}

.rule-management-page .rule-action-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%; cursor: pointer;
  color: var(--color-text-secondary); transition: all 0.2s;
}
.rule-management-page .rule-action-icon:hover { background: var(--color-bg); }
.rule-management-page .rule-action-icon:active { transform: scale(0.9); }
.rule-management-page .rule-action-icon.edit { color: var(--color-primary); }
.rule-management-page .rule-action-icon.delete { color: var(--color-danger); }
.rule-management-page .rule-action-icon.history { color: var(--color-text-hint); }

.rule-management-page .rule-label {
  font-size: 10px; padding: 2px 8px; border-radius: 10px; font-weight: 500; display: inline-block;
}
.rule-management-page .rule-label.platform { background: #E8F4FF; color: var(--color-primary); }
.rule-management-page .rule-label.hospital { background: #E8F8E8; color: var(--color-success); }
.rule-management-page .rule-label.user { background: #FFF7E6; color: var(--color-warning); }
.rule-management-page .rule-label.active { background: #E8F8E8; color: var(--color-success); }
.rule-management-page .rule-label.default { background: #F0F0FF; color: #722ED1; }

.rule-management-page .status-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px; border-radius: 8px; font-size: 13px; margin-bottom: 16px;
}
.rule-management-page .status-bar.warning { background: #FFF7E6; color: #D48806; border: 1px solid #FFE7BA; }
.rule-management-page .status-bar.info { background: #E6F7FF; color: #1890FF; border: 1px solid #BAE7FF; }

.rule-management-page .version-item {
  display: flex; align-items: center; padding: 12px 0;
  border-bottom: 1px solid var(--color-border); cursor: pointer; transition: background 0.2s;
}
.rule-management-page .version-item:active { background: #f5f5f5; }
.rule-management-page .version-item:last-child { border-bottom: none; }
.rule-management-page .version-info { flex: 1; }
.rule-management-page .version-name { font-size: 14px; font-weight: 500; color: var(--color-text); }
.rule-management-page .version-meta { font-size: 12px; color: var(--color-text-hint); margin-top: 2px; }
.rule-management-page .version-arrow { color: var(--color-text-hint); }

.rule-management-page .viewer-block { margin-bottom: 16px; }
.rule-management-page .viewer-block-title { font-size: 14px; font-weight: 600; color: var(--color-primary); margin-bottom: 8px; }
.rule-management-page .viewer-item { font-size: 13px; color: var(--color-text-secondary); padding: 4px 0 4px 16px; border-left: 2px solid var(--color-border); margin-bottom: 4px; }
.rule-management-page .viewer-sub { font-size: 12px; padding: 2px 0 2px 32px; color: var(--color-text-hint); }

.rule-management-page .dimension-card {
  background: var(--color-card); border-radius: 16px; margin-bottom: 12px; overflow: hidden;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08); border: 1px solid var(--color-border);
}
.rule-management-page .dimension-header {
  display: flex; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--color-border); cursor: pointer;
}
.rule-management-page .dimension-icon { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-right: 12px; font-size: 22px; }
.rule-management-page .dimension-info { flex: 1; min-width: 0; }
.rule-management-page .dimension-name { font-size: 16px; font-weight: 600; color: var(--color-text); }
.rule-management-page .dimension-meta { font-size: 12px; color: var(--color-text-hint); margin-top: 4px; }
.rule-management-page .dimension-toggle { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; color: var(--color-text-hint); transition: transform 0.3s; }
.rule-management-page .dimension-toggle.expanded { transform: rotate(180deg); }

.rule-management-page .dim-slider-wrap { display: flex; align-items: center; padding: 12px 16px; gap: 10px; background: #fafafa; }
.rule-management-page .dim-slider-label { font-size: 12px; color: var(--color-text-secondary); min-width: 45px; }
.rule-management-page .dim-slider-container { flex: 1; position: relative; height: 28px; display: flex; align-items: center; }
.rule-management-page .dim-slider-track { position: absolute; left: 0; top: 50%; transform: translateY(-50%); height: 8px; background: #E8E8E8; border-radius: 4px; width: 100%; overflow: hidden; }
.rule-management-page .dim-slider-fill { height: 100%; border-radius: 4px; transition: width 0.15s; }
.rule-management-page .dim-slider-input { position: absolute; width: 100%; height: 28px; -webkit-appearance: none; appearance: none; background: transparent; cursor: pointer; z-index: 2; }
.rule-management-page .dim-slider-input::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,0.2), 0 0 0 2px var(--color-primary); cursor: grab; transition: transform 0.2s, box-shadow 0.2s; }
.rule-management-page .dim-slider-input::-webkit-slider-thumb:hover { transform: scale(1.1); box-shadow: 0 2px 12px rgba(0,0,0,0.25), 0 0 0 3px var(--color-primary); }
.rule-management-page .dim-slider-input::-webkit-slider-thumb:active { cursor: grabbing; transform: scale(1.15); }
.rule-management-page .dim-slider-input::-moz-range-thumb { width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,0.2), 0 0 0 2px var(--color-primary); cursor: grab; border: none; }
.rule-management-page .dim-score { font-size: 14px; font-weight: 700; color: var(--color-primary); min-width: 55px; text-align: right; }
.rule-management-page .dim-balance { font-size: 11px; padding: 3px 8px; border-radius: 10px; font-weight: 500; min-width: 50px; text-align: center; }
.rule-management-page .dim-balance.balanced { background: linear-gradient(135deg, #E8F8E8, #D4F4D4); color: #3CB371; }
.rule-management-page .dim-balance.unbalanced { background: linear-gradient(135deg, #FFE8E8, #FFD4D4); color: #E74C3C; }

.rule-management-page .subcategory-list { display: none; padding: 8px 16px 16px; background: #fafafa; }
.rule-management-page .subcategory-list.expanded { display: block; }
.rule-management-page .subcategory-item { background: #fff; border-radius: 8px; padding: 12px; margin-bottom: 8px; border: 1px solid var(--color-border); }
.rule-management-page .subcategory-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.rule-management-page .subcategory-name { font-size: 14px; font-weight: 500; color: var(--color-text); }
.rule-management-page .subcategory-weight { font-size: 12px; color: var(--color-primary); background: #E8F4FF; padding: 2px 8px; border-radius: 10px; }

.rule-management-page .sub-edit-item { background: var(--color-card); border: 1px solid var(--color-border); border-radius: 12px; padding: 14px; margin-bottom: 10px; }
.rule-management-page .sub-edit-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.rule-management-page .sub-edit-name { flex: 1; padding: 8px 12px; border: 1px solid var(--color-border); border-radius: 8px; font-size: 14px; font-weight: 500; margin-right: 10px; background: #FAFAFA; }
.rule-management-page .sub-edit-name:focus { border-color: var(--color-primary); outline: none; background: #fff; }
.rule-management-page .sub-edit-slider { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.rule-management-page .sub-slider-label { font-size: 12px; color: var(--color-text-secondary); min-width: 55px; }
.rule-management-page .sub-slider { flex: 1; height: 24px; -webkit-appearance: none; appearance: none; background: transparent; position: relative; z-index: 2; }
.rule-management-page .sub-slider-bg { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); height: 6px; background: #E8E8E8; border-radius: 3px; z-index: 1; }
.rule-management-page .sub-slider-fill { position: absolute; left: 0; top: 50%; transform: translateY(-50%); height: 6px; background: var(--color-primary); border-radius: 3px; z-index: 1; }
.rule-management-page .sub-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%; background: #fff; cursor: pointer; box-shadow: 0 2px 6px rgba(0,0,0,0.15), 0 0 0 2px var(--color-primary); position: relative; z-index: 2; }
.rule-management-page .sub-slider::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: #fff; cursor: pointer; border: 2px solid var(--color-primary); }
.rule-management-page .sub-slider-value { min-width: 50px; text-align: right; font-size: 14px; font-weight: 600; color: var(--color-primary); }
.rule-management-page .sub-criteria-input { width: 100%; min-height: 70px; padding: 10px 12px; border: 1px solid var(--color-border); border-radius: 8px; font-size: 13px; resize: vertical; font-family: inherit; background: #FAFAFA; line-height: 1.6; }
.rule-management-page .sub-criteria-input:focus { border-color: var(--color-primary); outline: none; background: #fff; }

.rule-management-page .add-btn {
  width: 100%; padding: 14px; border: 2px dashed var(--color-primary); border-radius: 12px;
  background: linear-gradient(135deg, rgba(74,144,226,0.05), rgba(74,144,226,0.02));
  color: var(--color-primary); font-size: 14px; font-weight: 500; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 8px; transition: all 0.3s;
}
.rule-management-page .add-btn:hover { background: linear-gradient(135deg, rgba(74,144,226,0.1), rgba(74,144,226,0.05)); border-style: solid; }
.rule-management-page .add-btn:active { transform: scale(0.98); }

.rule-management-page .empty-state { text-align: center; padding: 40px 20px; color: var(--color-text-hint); }
.rule-management-page .empty-state-icon { font-size: 48px; margin-bottom: 12px; }

.rule-management-page .add-icon-btn {
  width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--color-primary); font-size: 22px; font-weight: 300; transition: transform 0.2s;
}
.rule-management-page .add-icon-btn:active { transform: scale(0.85); }

/* ===== Modal Dialog ===== */
.modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); z-index: 2000; display: flex; align-items: center; justify-content: center; }
.modal { background: var(--color-card); border-radius: 12px; width: 85%; max-width: 360px; max-height: 80vh; overflow-y: auto; box-shadow: 0 8px 30px rgba(0,0,0,0.15); }
.modal-header { font-size: 16px; font-weight: 600; text-align: center; padding: 16px 16px 0; }
.modal-body { padding: 16px; }
.modal-body .field-row { margin-bottom: 12px; }
.modal-body .field-row label { display: block; font-size: 12px; color: var(--color-text-hint); margin-bottom: 4px; }
.modal-body .field-row input,
.modal-body .field-row select { width: 100%; height: 40px; border: 1px solid #ddd; border-radius: 6px; padding: 0 12px; font-size: 14px; outline: none; box-sizing: border-box; background: var(--color-card); }
.modal-body .field-row input:focus,
.modal-body .field-row select:focus { border-color: var(--color-primary); }
.modal-body .field-row select { cursor: pointer; }
.modal-footer { display: flex; border-top: 1px solid var(--color-border); }
.modal-footer button { flex: 1; height: 44px; border: none; background: var(--color-card); font-size: 15px; cursor: pointer; outline: none; }
.modal-footer button:active { background: var(--color-bg); }
.modal-btn-default { color: var(--color-text-hint); border-right: 1px solid var(--color-border); }
.modal-btn-primary { color: var(--color-primary); font-weight: 500; }

/* ===== User List Item ===== */
.user-item { display: flex; align-items: center; padding: 14px 16px; background: var(--color-card); border-radius: 8px; margin-bottom: 10px; box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
.user-avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--color-primary-light, #E8F4FF); display: flex; align-items: center; justify-content: center; font-size: 16px; color: var(--color-primary); font-weight: 600; margin-right: 12px; flex-shrink: 0; overflow: hidden; }
.user-avatar img { width: 100%; height: 100%; object-fit: cover; }
.user-info { flex: 1; min-width: 0; }
.user-name { font-size: 15px; font-weight: 500; color: var(--color-text); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.user-meta { font-size: 12px; color: var(--color-text-hint); margin-top: 2px; }
.user-role-badge { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 11px; }

/* ===== Form additions ===== */
.form-input:disabled { background: var(--color-bg); color: var(--color-text-hint); }

.rule-management-page .editor-header {
  display: flex; align-items: center; padding: 12px 16px;
  background: var(--color-card); border-bottom: 1px solid var(--color-border);
}
.rule-management-page .editor-back { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.rule-management-page .editor-back svg { width: 20px; height: 20px; color: var(--color-text); }
.rule-management-page .editor-title { flex: 1; text-align: center; font-size: 16px; font-weight: 600; color: var(--color-text); }
.rule-management-page .editor-spacer { width: 32px; }

/* ===== Platform-specific overrides ===== */
.is-desktop .header,
.is-wechat .header {
  display: none !important;
}

.is-wechat .home-title {
  display: none;
}

.desktop-nav-subtitle {
  margin-left: 2px;
  font-size: 13px;
  font-weight: 400;
  color: var(--color-primary);
}
.desktop-nav-subtitle::before {
  content: '·';
  margin-right: 4px;
}

.desktop-action-btn {
  display: none;
}
.is-desktop .desktop-action-btn,
.is-wechat .desktop-action-btn {
  display: inline-flex;
  align-items: center;
}

/* ── Knowledge detail popup (shared) ── */
.file-icon { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; background: var(--color-danger-light); border-radius: var(--radius); color: var(--color-danger); }
.file-icon svg { width: 28px; height: 28px; }
.file-info { flex: 1; }
.file-name { font-size: 14px; font-weight: 500; color: var(--color-text); margin-bottom: 4px; }
.file-size { font-size: 12px; color: var(--color-text-hint); }
.file-action-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%;
  color: var(--color-text-hint); cursor: pointer; transition: all 0.15s;
  text-decoration: none;
}
.file-action-btn:hover { background: var(--color-bg); color: var(--color-text); }
.file-preview { margin-top: 12px; }
.preview-page { position: relative; background: #fff; border: 1px solid #e5e5e5; border-radius: 8px; overflow: hidden; box-shadow: 4px 4px 8px rgba(0,0,0,0.08); padding: 10px; }
.preview-page::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 20px; background: linear-gradient(to bottom, #fff, transparent); pointer-events: none; z-index: 2; }
.preview-page::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 20px; background: linear-gradient(to top, #fff, transparent); pointer-events: none; z-index: 2; }
.preview-image { max-width: 100%; display: block; }
.preview-text { padding: 24px; font-size: 13px; line-height: 1.6; overflow-x: auto; max-height: 400px; overflow-y: auto; white-space: pre-wrap; word-break: break-all; margin: 0; }
.preview-loading { text-align: center; padding: 20px; color: var(--color-text-hint); font-size: 13px; }
.preview-error { text-align: center; padding: 20px; color: var(--color-danger); font-size: 13px; }
.preview-docx { padding: 32px; font-size: 14px; line-height: 1.6; max-height: 500px; overflow-y: auto; }
.preview-xlsx { padding: 16px; overflow-x: auto; max-height: 500px; overflow-y: auto; }
.preview-xlsx table { border-collapse: collapse; width: 100%; font-size: 12px; }
.preview-xlsx td, .preview-xlsx th { border: 1px solid #ddd; padding: 6px 10px; text-align: left; white-space: nowrap; }
.preview-xlsx th { background: var(--color-bg); font-weight: 500; }
.preview-pdf { max-height: 500px; overflow-y: auto; }
.preview-pdf canvas { width: 100%; display: block; margin-bottom: 8px; }
.detail-meta { display: flex; align-items: center; gap: 8px; padding-top: 16px; margin-top: 10px; border-top: 1px solid var(--color-border); font-size: 12px; color: var(--color-text-hint); }
.meta-sep { color: var(--color-text-hint); }
.detail-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.detail-tags .detail-tag { padding: 4px 10px; border-radius: 12px; font-size: 11px; background: var(--color-primary-light); color: var(--color-primary); }