/* tan.gd.cn unified product UI */
:root {
  color-scheme: light;
  --app-bg: #f5f7fb;
  --app-surface: #ffffff;
  --app-surface-soft: #f8fafc;
  --app-surface-strong: #eef4ff;
  --app-border: #e3e8f0;
  --app-border-strong: #cfd8e6;
  --app-text: #111827;
  --app-muted: #5f6f86;
  --app-muted-soft: #94a3b8;
  --app-primary: #1f5eff;
  --app-primary-dark: #1747c7;
  --app-primary-soft: #edf4ff;
  --app-accent: #0f9f8f;
  --app-danger: #dc2626;
  --app-success: #12805c;
  --app-warning: #b45309;
  --app-radius: 8px;
  --app-shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 18px 40px rgba(30, 64, 175, .10);
  --app-font: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* {
  letter-spacing: 0;
}

html {
  background: var(--app-bg);
}

body {
  max-width: 100%;
  overflow-x: hidden;
  background: var(--app-bg) !important;
  color: var(--app-text) !important;
  font-family: var(--app-font) !important;
  line-height: 1.5;
}

a {
  color: var(--app-primary);
}

.app-page {
  min-height: 100vh;
}

.app-shell,
.container,
.main,
.gallery,
.videos {
  width: 100%;
  max-width: 1220px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.app-shell {
  padding: 0 24px 48px;
}

.app-topbar,
.header {
  position: sticky !important;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, .92) !important;
  border-bottom: 1px solid var(--app-border) !important;
  box-shadow: none !important;
  backdrop-filter: blur(14px);
}

.header {
  padding: 14px 24px !important;
  text-align: left !important;
}

.app-topbar {
  padding: 0 24px;
}

.app-topbar-inner,
.header-inner {
  width: 100%;
  max-width: 1220px !important;
  min-height: 64px;
  margin: 0 auto !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.app-brand {
  min-width: 0;
}

.app-brand-mark {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--app-text);
  text-decoration: none;
}

.app-brand-mark:before {
  content: "";
  width: 28px;
  height: 28px;
  border-radius: 7px;
  background:
    linear-gradient(135deg, rgba(31, 94, 255, .95), rgba(15, 159, 143, .95));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35);
}

.app-brand-title {
  font-size: 16px;
  font-weight: 800;
  color: var(--app-text);
}

.app-brand-subtitle {
  margin-top: 2px;
  color: var(--app-muted);
  font-size: 12px;
}

.app-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.app-btn,
.back,
.back-link {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 0 13px !important;
  color: #344054 !important;
  background: var(--app-surface);
  border: 1px solid var(--app-border-strong);
  border-radius: var(--app-radius);
  text-decoration: none !important;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}

.back,
.back-link {
  width: auto !important;
  margin: 0 !important;
}

.app-btn:hover,
.back:hover,
.back-link:hover {
  color: var(--app-primary) !important;
  border-color: #bfdbfe;
  background: #f8fbff;
}

.app-btn-primary {
  color: #fff !important;
  background: var(--app-primary) !important;
  border-color: var(--app-primary) !important;
}

.app-btn-primary:hover {
  color: #fff !important;
  background: var(--app-primary-dark) !important;
}

.app-hero {
  max-width: 1220px;
  margin: 0 auto;
  padding: 44px 24px 26px;
}

.app-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(280px, .55fr);
  gap: 22px;
  align-items: stretch;
}

.app-hero-main {
  min-height: 220px;
  padding: 34px;
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .96), rgba(246, 250, 255, .96)),
    radial-gradient(circle at 92% 8%, rgba(31, 94, 255, .16), transparent 32%),
    radial-gradient(circle at 80% 80%, rgba(15, 159, 143, .12), transparent 30%);
  box-shadow: var(--app-shadow);
}

.app-eyebrow {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border: 1px solid #dbeafe;
  border-radius: 999px;
  background: #eff6ff;
  color: #1d4ed8;
  font-size: 12px;
  font-weight: 750;
}

.app-hero h1 {
  max-width: 740px;
  margin: 18px 0 10px;
  color: var(--app-text) !important;
  font-size: 42px !important;
  line-height: 1.12;
  font-weight: 850 !important;
}

.app-hero p {
  max-width: 650px;
  margin: 0;
  color: var(--app-muted);
  font-size: 16px;
}

.app-hero-side {
  display: grid;
  gap: 12px;
}

.app-status-card,
.app-section-head,
.app-feature-card,
.media-card,
.app-panel {
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius);
  background: var(--app-surface);
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}

.app-status-card {
  padding: 18px;
}

.app-status-card b {
  display: block;
  color: var(--app-text);
  font-size: 24px;
}

.app-status-card span {
  display: block;
  margin-top: 3px;
  color: var(--app-muted);
  font-size: 13px;
}

.app-section-head {
  max-width: 1220px;
  margin: 0 auto 16px;
  padding: 18px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.app-section-head h2 {
  margin: 0;
  color: var(--app-text);
  font-size: 18px;
}

.app-section-head p {
  margin: 4px 0 0;
  color: var(--app-muted);
  font-size: 13px;
}

.app-feature-grid {
  max-width: 1220px;
  margin: 0 auto;
  padding: 0 24px 38px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.app-feature-card,
.nav-item,
.media-card {
  position: relative;
  min-height: 164px;
  padding: 22px !important;
  color: var(--app-text) !important;
  text-decoration: none !important;
  overflow: hidden;
}

.app-feature-card:hover,
.nav-item:hover,
.media-card:hover {
  transform: translateY(-2px) !important;
  border-color: #bfd5ff !important;
  box-shadow: var(--app-shadow) !important;
}

.app-feature-card:after,
.nav-item:after,
.media-card:after {
  content: "";
  position: absolute;
  right: 18px;
  bottom: 18px;
  width: 42px;
  height: 42px;
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(31, 94, 255, .10), rgba(15, 159, 143, .10));
}

.app-feature-kicker,
.nav-num,
.media-card .kicker {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-width: 36px !important;
  width: 36px !important;
  height: 36px !important;
  margin: 0 0 16px !important;
  border-radius: var(--app-radius) !important;
  background: var(--app-primary-soft) !important;
  color: var(--app-primary) !important;
  font-size: 13px !important;
  font-weight: 800 !important;
}

.app-feature-card h3,
.nav-content h3,
.media-card h3 {
  margin: 0 0 8px !important;
  color: var(--app-text) !important;
  font-size: 18px !important;
  font-weight: 800 !important;
}

.app-feature-card p,
.nav-content p,
.media-card p {
  max-width: 420px;
  margin: 0 !important;
  color: var(--app-muted) !important;
  line-height: 1.62 !important;
  font-size: 14px !important;
}

.app-feature-meta,
.media-card .meta-line {
  margin-top: 18px;
  color: var(--app-primary);
  font-size: 13px;
  font-weight: 760;
}

.nav-arrow {
  position: absolute;
  right: 22px;
  top: 22px;
  color: var(--app-muted-soft) !important;
  font-size: 18px !important;
}

.nav-icon {
  display: none !important;
}

.logo,
h1 {
  color: var(--app-text) !important;
  background: none !important;
  -webkit-text-fill-color: initial !important;
  font-weight: 780 !important;
}

.slogan,
.stats,
.meta,
.hint,
.empty,
.empty p {
  color: var(--app-muted) !important;
}

.btn,
button.btn,
.add-btn,
.detail-btn,
.file-actions button {
  border-radius: var(--app-radius) !important;
  font-family: var(--app-font);
  box-shadow: 0 1px 2px rgba(16, 24, 40, .08) !important;
}

.btn,
.btn-primary {
  background: var(--app-primary) !important;
  color: #fff !important;
}

.btn:hover,
.btn-primary:hover {
  transform: none !important;
  background: var(--app-primary-dark) !important;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .08) !important;
}

.btn.secondary,
.btn-secondary,
.btn.small {
  background: var(--app-surface) !important;
  color: #344054 !important;
  border: 1px solid var(--app-border-strong) !important;
}

.btn.danger,
.btn-danger {
  background: var(--app-danger) !important;
  color: #fff !important;
}

input,
select,
textarea,
.form-input,
.form-textarea,
.form-select,
.search-input,
.settings select,
.settings input {
  background: var(--app-surface) !important;
  color: var(--app-text) !important;
  border: 1px solid var(--app-border-strong) !important;
  border-radius: 8px !important;
}

input:focus,
select:focus,
textarea:focus,
.form-input:focus,
.form-textarea:focus,
.form-select:focus,
.search-input:focus {
  outline: none !important;
  border-color: #93c5fd !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .12) !important;
}

.page-login {
  background:
    radial-gradient(circle at 20% 0%, rgba(31, 94, 255, .12), transparent 30%),
    var(--app-bg) !important;
  display: grid;
  place-items: center;
  padding: 24px;
}

.page-login .login {
  width: min(420px, 100%);
  padding: 42px 38px !important;
  background: rgba(255, 255, 255, .96) !important;
  border: 1px solid var(--app-border) !important;
  border-radius: var(--app-radius) !important;
  box-shadow: var(--app-shadow) !important;
  color: var(--app-text) !important;
}

.page-login .logo {
  color: var(--app-text) !important;
  background: none !important;
  -webkit-text-fill-color: initial !important;
  font-size: 28px !important;
  text-align: left !important;
}

.page-login .slogan {
  text-align: left !important;
  color: var(--app-muted) !important;
  margin-bottom: 26px !important;
}

.page-login .input {
  margin-bottom: 14px !important;
}

.page-login input {
  min-height: 44px;
}

.page-login .btn {
  min-height: 44px;
  margin-top: 6px;
}

.page-photos .gallery,
.page-videos .videos {
  padding: 24px !important;
  gap: 18px !important;
}

.photo,
.video-card,
.recipe-card,
.upload-section,
.file-list,
.stat-card,
.api-key-section,
.modal-content {
  background: var(--app-surface) !important;
  border: 1px solid var(--app-border) !important;
  border-radius: var(--app-radius) !important;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04) !important;
  color: var(--app-text) !important;
}

.photo:hover,
.video-card:hover,
.recipe-card:hover {
  transform: none !important;
  border-color: #bfdbfe !important;
  box-shadow: var(--app-shadow) !important;
}

.photo {
  background: #eef3f8 !important;
  border-radius: var(--app-radius) !important;
}

.photo .meta,
.photo:hover .meta {
  color: #fff !important;
}

.video-card {
  overflow: hidden;
}

.video-card .info,
.photo .meta {
  font-size: 13px !important;
}

.thumb-wrap,
.thumb-wrap .placeholder,
.recipe-cover,
.upload-area,
.result .url-box,
.api-key-section .code {
  background: var(--app-surface-soft) !important;
  color: var(--app-muted) !important;
}

.play-btn,
.add-btn {
  background: var(--app-primary) !important;
}

.play-overlay {
  background: transparent !important;
}

.video-card:hover .play-overlay {
  background: rgba(37, 99, 235, .14) !important;
}

.info,
.recipe-info {
  background: var(--app-surface) !important;
}

.title,
.recipe-title,
.file-info .name,
.modal-title,
.detail-title,
.files-section h2,
.api-key-section h3 {
  color: var(--app-text) !important;
}

.recipe-desc,
.detail-desc,
.detail-section p,
.detail-section li,
.file-info .meta,
.settings label,
.form-label {
  color: var(--app-muted) !important;
}

.page-recipes .header {
  text-align: left !important;
  padding-top: 18px !important;
}

.page-recipes .logo {
  font-size: 24px !important;
}

.page-recipes .main {
  max-width: 1220px !important;
  padding: 0 24px 42px !important;
}

.page-recipes .search-bar {
  max-width: 100% !important;
  margin: 0 0 16px !important;
}

.page-recipes .search-input {
  min-height: 44px;
  padding: 0 14px !important;
  border-radius: var(--app-radius) !important;
}

.page-recipes .category-tabs {
  padding: 8px;
  margin: 0 0 18px !important;
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius);
  background: var(--app-surface);
}

.page-recipes .recipe-grid {
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
  gap: 16px !important;
}

.page-recipes .recipe-card {
  overflow: hidden;
}

.search-bar {
  max-width: 520px !important;
}

.category-tabs {
  justify-content: flex-start !important;
  gap: 8px !important;
}

.cat-tab,
.recipe-tag,
.recipe-category {
  background: var(--app-surface) !important;
  color: #344054 !important;
  border: 1px solid var(--app-border) !important;
  border-radius: 999px !important;
}

.cat-tab.active {
  background: var(--app-primary) !important;
  color: #fff !important;
  border-color: var(--app-primary) !important;
}

.recipe-cover {
  height: 116px !important;
  font-size: 36px !important;
}

.recipe-meta {
  color: var(--app-muted) !important;
}

.recipe-meta span {
  color: var(--app-muted) !important;
}

.modal-content {
  max-width: min(760px, calc(100vw - 32px)) !important;
}

.modal {
  background: rgba(15, 23, 42, .56) !important;
  backdrop-filter: blur(8px);
}

.modal-header {
  border-bottom: 1px solid var(--app-border) !important;
}

.detail-section h4,
.step-title,
.ingredient-category,
.tip-category {
  color: var(--app-primary) !important;
  border-color: var(--app-border) !important;
}

.page-transfer,
.page-upload {
  padding: 0 !important;
}

.page-transfer .container,
.page-upload .container {
  padding: 24px !important;
}

.page-transfer h1,
.page-upload h1 {
  max-width: 1220px;
  margin: 0 auto;
  padding: 28px 24px 12px !important;
  text-align: left !important;
  font-size: 32px !important;
}

.page-transfer > .back,
.page-upload .header {
  display: none !important;
}

.page-transfer .stats,
.page-transfer .upload-section,
.page-transfer .files-section,
.page-transfer .api-key-section,
.page-upload .section {
  max-width: 1220px;
  margin-left: auto !important;
  margin-right: auto !important;
}

.page-transfer .container,
.page-upload .container {
  max-width: 1220px !important;
}

.page-transfer .stats {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.upload-section,
.page-upload .section,
.files-section,
.api-key-section {
  border-radius: var(--app-radius) !important;
}

.page-upload .section {
  padding: 28px !important;
  background: var(--app-surface) !important;
  border: 1px solid var(--app-border) !important;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04) !important;
  color: var(--app-text) !important;
}

.page-upload .section h2 {
  color: var(--app-text) !important;
  font-size: 17px !important;
  margin-bottom: 16px !important;
}

.page-upload .section h2 svg {
  color: var(--app-primary) !important;
  opacity: 1 !important;
}

.page-upload .tabs,
.page-upload .tab {
  border-color: var(--app-border) !important;
}

.page-upload .tab {
  background: var(--app-surface-soft) !important;
  color: var(--app-muted) !important;
}

.page-upload .tab.active {
  background: var(--app-primary) !important;
  color: #fff !important;
  border-color: var(--app-primary) !important;
}

.page-upload .dropzone {
  background: var(--app-surface-soft) !important;
  border: 1px dashed var(--app-border-strong) !important;
}

.page-upload .dropzone p,
.page-upload .progress-text {
  color: var(--app-muted) !important;
}

.page-upload .dropzone svg {
  color: var(--app-primary) !important;
  opacity: .8 !important;
}

.page-transfer .settings {
  border-top: 1px solid var(--app-border) !important;
}

.page-transfer .files-section h2 {
  color: var(--app-text) !important;
}

.upload-area {
  border: 1px dashed var(--app-border-strong) !important;
}

.upload-area:hover,
.upload-area.dragover {
  border-color: var(--app-primary) !important;
  background: var(--app-primary-soft) !important;
  transform: none !important;
}

.upload-area .icon {
  color: var(--app-primary);
  font-size: 32px !important;
  letter-spacing: 0 !important;
  font-weight: 800;
}

.progress-bar {
  background: #e5e7eb !important;
}

.progress-fill {
  background: var(--app-primary) !important;
}

.result {
  background: var(--app-surface) !important;
  border: 1px solid var(--app-border) !important;
  border-left: 4px solid var(--app-primary) !important;
  color: var(--app-text) !important;
}

.file-item {
  border-color: var(--app-border) !important;
}

.file-item:hover {
  background: var(--app-surface-soft) !important;
}

.stat-card .value {
  color: var(--app-text) !important;
  background: none !important;
  -webkit-text-fill-color: initial !important;
}

.stat-card {
  text-align: left !important;
}

.stat-card .label {
  color: var(--app-muted) !important;
}

.api-key-section .code {
  border: 1px solid var(--app-border);
  color: #344054 !important;
}

.lightbox,
.player-modal {
  background: rgba(15, 23, 42, .94) !important;
}

.toast {
  background: var(--app-surface) !important;
  color: var(--app-text) !important;
  border: 1px solid var(--app-border) !important;
  box-shadow: var(--app-shadow);
}

.page-home .header {
  position: static !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.page-home .app-brand-mark > span,
.page-media-hub .app-brand-mark > span,
.page-transfer .app-brand-mark > span,
.page-upload .app-brand-mark > span,
.page-recipes .app-brand-mark > span,
.page-photos .app-brand-mark > span,
.page-videos .app-brand-mark > span {
  display: block;
  min-width: 0;
}

.page-home .app-brand-subtitle,
.page-media-hub .app-brand-subtitle,
.page-transfer .app-brand-subtitle,
.page-upload .app-brand-subtitle,
.page-recipes .app-brand-subtitle,
.page-photos .app-brand-subtitle,
.page-videos .app-brand-subtitle {
  display: block;
}

.page-home .main,
.page-home .footer {
  max-width: 1220px !important;
}

.page-home .nav-list {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 16px !important;
  margin-top: 0 !important;
}

.page-home .nav-item {
  display: block !important;
  min-height: 170px !important;
  border-left: 1px solid var(--app-border) !important;
  background: var(--app-surface) !important;
  border-radius: var(--app-radius) !important;
}

.page-home .disabled {
  opacity: .58 !important;
}

.page-home .logout {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 13px;
  color: #344054 !important;
  background: var(--app-surface);
  border: 1px solid var(--app-border-strong);
  border-radius: var(--app-radius);
  text-decoration: none;
  font-weight: 700;
}

.page-admin .top {
  border-radius: 0 !important;
}

.page-admin .metric,
.page-admin .card,
.page-admin .tabs,
.page-admin .table-wrap {
  border-radius: var(--app-radius) !important;
}

.page-admin .actions .btn {
  min-height: 36px;
}

@media (max-width: 760px) {
  .app-topbar {
    padding: 0 16px;
  }
  .app-topbar-inner,
  .header-inner {
    min-height: 58px;
  }
  .header {
    padding: 16px !important;
  }
  .header-inner {
    gap: 10px;
  }
  .app-shell,
  .app-hero,
  .app-feature-grid {
    padding-left: 16px;
    padding-right: 16px;
  }
  .app-hero {
    padding-top: 28px;
  }
  .app-hero-grid {
    grid-template-columns: 1fr;
  }
  .app-hero-main {
    min-height: 0;
    padding: 24px;
  }
  .app-hero h1 {
    font-size: 30px !important;
  }
  .app-section-head {
    margin-left: 16px;
    margin-right: 16px;
    align-items: flex-start;
    flex-direction: column;
  }
  .app-feature-grid,
  .page-home .nav-list {
    grid-template-columns: 1fr !important;
  }
  .page-recipes .main,
  .page-transfer .container,
  .page-upload .container,
  .page-photos .gallery,
  .page-videos .videos {
    padding: 16px !important;
  }
  .page-transfer .stats {
    grid-template-columns: 1fr !important;
  }
  .recipe-grid,
  .videos {
    grid-template-columns: 1fr !important;
  }
}