/* ========== MAIN ========== */

.main-content {

  flex: 1;

  min-width: 0;

  display: flex;

  flex-direction: column;

}

.top-bar {

  height: var(--topbar-h);

  display: flex;

  align-items: center;

  gap: 12px;

  padding: 0 20px;

  border-bottom: 2px solid color-mix(in srgb, var(--primary) 55%, var(--outline-variant));

  background: color-mix(in srgb, var(--primary) 6%, var(--surface));

  position: sticky;

  top: 0;

  z-index: 50;

}

.top-bar h1 {

  font-size: 1.1rem;

  font-weight: 500;

  flex: 1;

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;

}

.menu-toggle {

  display: none;

  width: 40px;

  height: 40px;

  border-radius: var(--radius-full);

  align-items: center;

  justify-content: center;

  font-size: 1.3rem;

  color: var(--on-surface-variant);

}

.top-actions {

  display: flex;

  gap: 4px;

}

.admin-bar {

  display: none;

  align-items: center;

  gap: 8px;

  padding: 8px 20px;

  background: var(--primary-container);

  color: var(--on-primary-container);

  font-size: 0.85rem;

  border-bottom: 1px solid var(--outline-variant);

}

.content-area {

  flex: 1;

  padding: 16px 24px 24px;

  max-width: 960px;

  width: 100%;

  margin: 0 auto;

  overflow-x: clip;

}

/* ========== PAGE ========== */

.page {

  display: none;

  animation: fadeIn var(--dur-mid) var(--ease);

  overflow-x: clip;

}

.page.active {

  display: block;

}

/* 页面首个元素去除默认上边距，避免 content-area 顶部出现多余空白 */

.page.active > :first-child {

  margin-top: 0;

}

@keyframes fadeIn {

  from {

    opacity: 0;

    transform: translateY(8px);

  }

  to {

    opacity: 1;

    transform: translateY(0);

  }

}

.page-header {

  margin-bottom: 20px;

}

.page-header h2 {

  font-size: 1.4rem;

  font-weight: 500;

  margin-bottom: 4px;

  padding-bottom: 8px;

  border-bottom: 2px solid var(--primary);

}

.page-header p {

  color: var(--on-surface-variant);

  font-size: 0.9rem;

}

/* ========== CARD ========== */

.card {

  background: var(--surface-container);

  border: 1px solid var(--outline-variant);

  border-radius: var(--radius-md);

  padding: 20px;

  margin-bottom: 16px;

}

.card-title {

  font-size: 1rem;

  font-weight: 500;

  margin-bottom: 14px;

  display: flex;

  align-items: center;

  gap: 8px;

  padding-left: 12px;

  border-left: 3px solid var(--primary);

}

.card-title .mdi {

  font-size: 1.2rem;

  color: var(--primary);

}

/* ========== FORM ========== */

.form-row {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 12px;

  margin-bottom: 12px;

}

.form-group {

  margin-bottom: 12px;

}

.form-label {

  display: block;

  font-size: 0.85rem;

  color: var(--on-surface-variant);

  margin-bottom: 6px;

  font-weight: 400;

}

.form-label .required {

  color: var(--error);

  margin-left: 2px;

}

.form-hint {

  font-size: 0.75rem;

  color: var(--on-surface-variant);

  margin-top: 4px;

}

/* ========== BUTTONS ========== */

.btn {

  display: inline-flex;

  align-items: center;

  gap: 6px;

  padding: 10px 20px;

  border-radius: var(--radius-sm);

  font-size: 0.9rem;

  font-weight: 500;

  transition: all var(--dur-fast) var(--ease);

  justify-content: center;

  white-space: nowrap;

}

.btn:hover {

  filter: brightness(1.1);

}

.btn:active {

  transform: scale(0.97);

}

.btn-primary {

  background: var(--primary);

  color: var(--on-primary);

}

.btn-success {

  background: var(--success);

  color: #0a0a0a;

}

.btn-danger {

  background: var(--error);

  color: var(--on-error);

}

.btn-info {

  background: var(--info);

  color: var(--on-info-container);

}

.btn-outline {

  background: transparent;

  border: 1px solid var(--outline);

  color: var(--on-surface);

}

.btn-outline:hover {

  border-color: var(--primary);

  color: var(--primary);

}

.btn-ghost {

  background: transparent;

  color: var(--on-surface-variant);

}

.btn-ghost:hover {

  background: rgba(255, 255, 255, 0.05);

  color: var(--on-surface);

}

.btn-sm {

  padding: 6px 14px;

  font-size: 0.82rem;

}

.btn-lg {

  padding: 12px 28px;

  font-size: 1rem;

  width: 100%;

}

.btn .mdi {

  font-size: 1.1em;

}

/* ========== BANNER ========== */

.banner {

  display: flex;

  gap: 10px;

  padding: 12px 16px;

  border-radius: var(--radius-sm);

  margin-bottom: 12px;

  font-size: 0.85rem;

  line-height: 1.5;

}

.banner .mdi {

  font-size: 1.3rem;

  flex-shrink: 0;

  margin-top: 1px;

}

.banner-warning {

  background: var(--tertiary-container);

  border: 1px solid rgba(255, 180, 0, 0.3);

  color: var(--on-tertiary-container);

}

.banner-info {

  background: var(--info-container);

  border: 1px solid rgba(100, 180, 255, 0.2);

  color: var(--on-info-container);

}

.banner-error {

  background: var(--error-container);

  border: 1px solid rgba(255, 100, 100, 0.3);

  color: var(--on-error-container);

}

/* ========== TABS ========== */

.tabs {

  display: flex;

  gap: 4px;

  margin-bottom: 16px;

  border-bottom: 1px solid var(--outline-variant);

  padding-bottom: -1px;

}

.tab-btn {

  padding: 10px 18px;

  font-size: 0.88rem;

  color: var(--on-surface-variant);

  border-bottom: 2px solid transparent;

  margin-bottom: -1px;

  transition: all var(--dur-fast) var(--ease);

}

.tab-btn:hover {

  color: var(--on-surface);

  background: rgba(255, 255, 255, 0.03);

}

.tab-btn.active {

  color: var(--primary);

  border-bottom-color: var(--primary);

  font-weight: 500;

}

.tab-panel {

  display: none;

}

.tab-panel.active {

  display: block;

  animation: fadeIn var(--dur-mid) var(--ease);

}

/* ========== ADMIN 待处理三分类 TABS ========== */

.admin-tabs {

  display: flex;

  gap: 4px;

  margin-bottom: 16px;

  border-bottom: 1px solid var(--outline-variant);

}

.admin-tab {

  padding: 10px 18px;

  font-size: 0.9rem;

  color: var(--on-surface-variant);

  background: transparent;

  border: none;

  border-bottom: 2px solid transparent;

  margin-bottom: -1px;

  cursor: pointer;

  transition: all var(--dur-fast) var(--ease);

}

.admin-tab:hover {

  color: var(--on-surface);

  background: rgba(255, 255, 255, 0.03);

}

.admin-tab.active {

  color: var(--primary);

  border-bottom-color: var(--primary);

  font-weight: 500;

}

.admin-panel {

  display: none;

}

.admin-panel.active {

  display: block;

  animation: fadeIn var(--dur-mid) var(--ease);

}

/* ========== 界面自适应：约束布局高度，避免页面被无限拉长 ========== */

.app-layout {

  display: flex;

  min-height: 100vh;

  height: 100vh;

  overflow: hidden;

}

.main-content {

  flex: 1;

  min-width: 0;

  display: flex;

  flex-direction: column;

  height: 100vh;

  overflow-y: auto;

}

/* 侧边栏在窄屏下可滚动 */

.sidebar {

  overflow-y: auto;

  max-height: 100vh;

}

@media (max-width: 860px) {

  .app-layout {

    flex-direction: column;

    height: auto;

    overflow: visible;

  }

  .main-content {

    height: auto;

    overflow: visible;

  }

  .sidebar {

    position: static;

    width: 100%;

    max-height: none;

  }

  .admin-tabs {

    flex-wrap: wrap;

  }

  .toolbar-row {

    flex-direction: column;

    align-items: stretch;

  }

}