/* Global warm palette layer — visual styling only. */
:root {
  --bg: #0f0f13;
  --bg-soft: #15151c;
  --card: #1b1b22;
  --card-2: #25252f;
  --line: rgba(255, 225, 184, .11);
  --line-soft: rgba(255, 225, 184, .07);
  /* White text hierarchy: contrast is defined by opacity, not hue. */
  --text: rgba(255, 255, 255, .92);
  --text-2: rgba(255, 255, 255, .72);
  --meta: rgba(255, 255, 255, .48);
  --brand: #ffb338;
  --brand-2: #ffe57f;
  --brand-dk: #df9020;
  --brand-dim: rgba(255, 179, 32, .14);
  --grad: linear-gradient(90deg, #ffe57f 0%, #ffb338 100%);
  --on-brand: #1a1000;
}

body {
  background-color: var(--bg);
  background-image:
    radial-gradient(1120px 560px at 78% -12%, rgba(255, 179, 56, .16), transparent 61%),
    radial-gradient(840px 460px at 8% 112%, rgba(238, 109, 23, .13), transparent 62%),
    radial-gradient(circle at 1px 1px, rgba(255,255,255,.095) 1.15px, transparent 1.3px);
  background-size: auto, auto, 30px 30px;
  background-position: 78% -12%, 8% 112%, 0 0;
  animation: ambient-glow-drift 12s ease-in-out infinite alternate;
}
@keyframes ambient-glow-drift {
  from { background-position: 78% -12%, 8% 112%, 0 0; }
  to { background-position: 68% -12%, 18% 112%, 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  body { animation: none; }
}

/* 首页留白区域的偶发流星：由脚本确保同一时间仅出现一颗。 */
.track-view { position: relative; isolation: isolate; overflow-x: hidden; }
.track-view > :not(.landing-meteor) { position: relative; z-index: 1; }
.landing-meteor {
  position: absolute;
  z-index: 0;
  width: clamp(58px, 6vw, 104px);
  height: 2px;
  border-radius: 999px;
  pointer-events: none;
  opacity: 0;
  transform-origin: right center;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 221, 144, .12) 18%, rgba(255, 202, 82, .72) 68%, #fff4cc 100%);
  filter: drop-shadow(0 0 4px rgba(255, 179, 56, .78)) drop-shadow(0 0 10px rgba(255, 255, 255, .36));
  animation: landing-meteor-fly 1.15s cubic-bezier(.2, .72, .22, 1) both;
}
.landing-meteor::after {
  content: '';
  position: absolute;
  top: 50%;
  right: -2px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #fff9e7;
  box-shadow: 0 0 7px #fff, 0 0 14px rgba(255, 179, 56, .92);
  transform: translateY(-50%);
}
@keyframes landing-meteor-fly {
  0% { opacity: 0; transform: translate3d(0, 0, 0) rotate(var(--meteor-angle)); }
  12%, 72% { opacity: 1; }
  100% { opacity: 0; transform: translate3d(var(--meteor-x), var(--meteor-y), 0) rotate(var(--meteor-angle)); }
}
@media (prefers-reduced-motion: reduce) {
  .landing-meteor { display: none; }
}

/* Let billing inherit the same ambient background used on the home page. */
#billing-view { background: transparent; }
.profile-view { background: transparent; }

.site-header { background: rgba(15, 15, 19, .88); }
.app-sidebar {
  background: linear-gradient(160deg, rgba(35, 35, 44, .98), rgba(24, 24, 31, .98));
  border-color: rgba(255, 255, 255, .13);
  box-shadow: 0 20px 52px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.045);
}

.hdr-btn-primary,
.track-tag.active,
.primary-button,
.portal-primary-btn,
.wallet-action,
.plan-button.is-primary {
  background: var(--grad);
  color: var(--on-brand);
  box-shadow: 0 8px 24px rgba(236, 108, 16, .28);
}

.hdr-btn-primary:hover,
.track-tag.active:hover,
.primary-button:hover,
.portal-primary-btn:hover,
.wallet-action:hover,
.plan-button.is-primary:hover {
  background: var(--grad);
  color: var(--on-brand);
}

/* Filter tabs are flat pills, so they do not inherit the primary-button glow. */
.track-tag.active,
.track-tag.active:hover {
  background: #fff;
  color: #0F0F13;
  border-color: #fff;
  box-shadow: none;
}

/* Primary actions use the exact gradient and foreground from 2Button.svg. */
.guest-start-button,
.auth-submit,
.confirm-btn,
.quality-generate-btn,
.send-btn,
.confirm-ok-btn,
.shot-editor-export-btn,
.storyboard-preview-download,
.video-play-btn,
.shot-video-play,
.membership-upgrade-btn,
.video-feedback-submit,
#billing-view .billing-switch button.active,
#billing-view .plan-card.recommended .plan-button {
  background: var(--grad);
  color: var(--on-brand);
}

#billing-view [data-billing-panel="coins"] .coin-buy {
  border-color: #fff;
  background: #fff;
  color: #21180f;
  box-shadow: 0 8px 22px rgba(0,0,0,.18);
}

#billing-view .billing-switch button.active {
  background: #fff;
  color: #0f0f13;
}

.guest-start-button {
  box-shadow: 0 12px 34px rgba(255, 179, 56, .32);
}

.track-chip,
.profile-tab.active,
.asset-type-tabs button.active,
.profile-record-filters button.active,
.plan-badge,
.portal-status-chip,
.local-prototype-badge,
.status-pill {
  border-color: rgba(255, 179, 32, .32);
  background: var(--brand-dim);
  color: var(--brand);
}

.sidebar-item.active {
  border-color: transparent;
  background: rgba(255, 255, 255, .05);
  color: var(--brand);
}

.track-chip::before,
.cap-dot,
.tab-dot,
.mention-dot { background: var(--brand); box-shadow: 0 0 10px rgba(255, 179, 32, .7); }

.track-choice-btn:hover:not(:disabled),
.asset-project-card:hover,
.asset-project-card:focus-visible,
.project-card:hover,
.profile-metric-card:hover,
.plan-card.recommended {
  border-color: rgba(255, 179, 32, .56);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .42), 0 0 0 1px rgba(255, 179, 32, .16);
}

.portal-search:focus-within,
.profile-form input:focus,
.profile-form textarea:focus,
.profile-form select:focus,
.auth-field input:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(255, 179, 32, .14);
}

.sidebar-usage {
  border: 1px solid rgba(255,255,255,.14);
  background: linear-gradient(145deg,rgba(68,69,78,.96),rgba(46,47,56,.96));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08),0 10px 24px rgba(0,0,0,.16);
  backdrop-filter: blur(14px);
}
.sidebar-account-avatar, .profile-avatar-large, .header-avatar { background-image: linear-gradient(135deg, var(--brand), var(--brand-2)); }
.profile-back, .portal-eyebrow, .profile-avatar-actions button, .auth-media-copy span { color: var(--brand); }
.asset-library-guide span, .profile-record-icon, .quota-icon { background: var(--brand-dim); color: var(--brand); }
.track-go { color: var(--brand); }

/* Reference navigation hierarchy: quiet idle labels and a neutral selected state. */
.sidebar-item { color: rgba(255,255,255,.56); }
.sidebar-item .sidebar-icon img { opacity: .56; transition: opacity .15s ease; }
.sidebar-item:hover { color: rgba(255,255,255,.78); }
.sidebar-item:hover .sidebar-icon img { opacity: .78; }
.sidebar-item.active { border-color: transparent; background: rgba(255,255,255,.065); color: #fff; }
.sidebar-item.active .sidebar-icon img { opacity: 1; }

/* Profile center: keep the account accents in the warm brand palette. */
.profile-view .local-prototype-badge {
  border-color: rgba(255,179,32,.48);
  background: rgba(255,179,32,.10);
  color: var(--brand);
}
.profile-view .status-pill {
  border-color: rgba(255,255,255,.20);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.92);
}
.profile-view .status-pill.is-exhausted {
  border-color: rgba(240,85,93,.52);
  background: rgba(240,85,93,.12);
  color: #ff8d93;
}
.profile-account-banner {
  border-color: var(--line);
  background: radial-gradient(circle at 50% -30%,rgba(255,179,32,.18),transparent 48%),var(--card);
}
.profile-avatar-large {
  border-color: rgba(255,229,127,.72);
  box-shadow: 0 14px 38px rgba(255,179,32,.30);
}
.profile-view .primary-button { color: #0F0F13; box-shadow: 0 8px 22px rgba(255,179,32,.28); }
.profile-view .secondary-button {
  border-color: rgba(255,179,32,.52);
  background: rgba(255,179,32,.08);
  color: var(--brand);
}
.profile-view .secondary-button:hover {
  border-color: var(--brand);
  background: rgba(255,179,32,.16);
  color: #ffe57f;
}

/* Latest personal-center layout: compact identity row and quiet glass cards. */
#profile-view .profile-card,
#profile-view .profile-metric-card {
  border: 1px solid rgba(255,255,255,.1);
  background: linear-gradient(145deg,rgba(255,255,255,.065),rgba(255,255,255,.022));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07),0 14px 30px rgba(0,0,0,.12);
  backdrop-filter: blur(18px);
}
#profile-view .profile-account-banner {
  min-height: 154px;
  padding: 28px 32px;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 18px;
  background: radial-gradient(76% 110% at 50% -45%,rgba(255,255,255,.11),transparent 64%),linear-gradient(145deg,rgba(255,255,255,.065),rgba(255,255,255,.022));
}
#profile-view .profile-avatar-manager { flex-direction: row; gap: 0; }
#profile-view .profile-avatar-large {
  width: 88px;
  height: 88px;
  flex: 0 0 auto;
  font-size: 30px;
}
#profile-view .profile-account-banner .profile-identity {
  align-items: flex-start;
  text-align: left;
  gap: 3px;
}
#profile-view .profile-account-banner .profile-name-line { justify-content: flex-start; }
#profile-view .profile-account-banner .profile-identity strong { font-size: 22px; }
#profile-view .profile-account-banner .profile-hero-actions {
  margin: 0 0 0 auto;
  flex: 0 0 auto;
  gap: 10px;
}
#profile-view .profile-plan-line span { display: inline; }
#profile-view .profile-plan-card .profile-quota-type { display: none; }
#profile-view .profile-metric-card:hover {
  transform: translateY(-1px);
  border-color: rgba(255,255,255,.18);
  background: linear-gradient(145deg,rgba(255,255,255,.085),rgba(255,255,255,.032));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.09),0 18px 34px rgba(0,0,0,.18);
}
#profile-view .profile-form input,
#profile-view .profile-form textarea,
#profile-view .profile-form select,
#profile-view .profile-record-filters {
  border-color: rgba(255,255,255,.1);
  background: rgba(7,8,12,.26);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}
#profile-view .profile-form input:disabled { background: rgba(255,255,255,.025); }
#profile-view .profile-record-row,
#profile-view .setting-row,
#profile-view .toggle-row,
#profile-view .card-heading { border-color: rgba(255,255,255,.08); }

@media (max-width: 620px) {
  #profile-view .profile-account-banner {
    padding: 22px;
    flex-wrap: wrap;
  }
  #profile-view .profile-avatar-large { width: 68px; height: 68px; font-size: 23px; }
  #profile-view .profile-account-banner .profile-hero-actions {
    width: 100%;
    margin-top: 4px;
  }
  #profile-view .profile-account-banner .profile-hero-actions button { flex: 1; }
}

/* Keep asset project cards consistent with the animated gradient border on the home page. */
.asset-project-card:hover,
.asset-project-card:focus-visible {
  border-width: 2px;
  border-color: transparent;
  background:
    linear-gradient(var(--card), var(--card)) padding-box,
    linear-gradient(110deg, #ffb338, #ff7a30, #9c6bff, #6e4dd7, #ffb338) border-box;
  background-size: 100% 100%, 260% 100%;
  animation: track-border-flow 1.35s linear infinite;
  box-shadow: 0 16px 40px rgba(0,0,0,.5), 0 0 18px rgba(255,179,56,.13), 0 0 24px rgba(156,107,255,.1);
}

@media (prefers-reduced-motion: reduce) {
  .asset-project-card:hover,
  .asset-project-card:focus-visible { animation: none; }
}

/* The desktop shell keeps only the language selector; navigation lives in the sidebar. */
@media (min-width: 921px) {
  .site-header {
    height: 0;
    min-height: 0;
    margin-left: 0;
    padding: 0;
    border: 0;
    background: transparent;
  }

  .site-actions {
    position: fixed;
    z-index: 22;
    top: 14px;
    right: 24px;
  }

  .site-actions #new-btn { display: none; }
}

/* Membership plans share a quiet default outline and reveal a flowing brand border on hover. */
#billing-view .plan-card,
#billing-view .plan-card.current,
#billing-view .plan-card.recommended {
  border-color: var(--line);
  box-shadow: none;
}

#billing-view .plan-card:hover {
  border: 2px solid transparent;
  background:
    linear-gradient(var(--card), var(--card)) padding-box,
    linear-gradient(110deg, #ffb338, #ff7a30, #9c6bff, #6e4dd7, #ffb338) border-box;
  background-size: 100% 100%, 260% 100%;
  animation: track-border-flow 1.35s linear infinite;
  box-shadow: 0 16px 40px rgba(0,0,0,.5), 0 0 18px rgba(255,179,56,.13), 0 0 24px rgba(156,107,255,.1);
}

#billing-view .plan-card:not(.current) .plan-button { border: 0; }
#billing-view .plan-card:not(.current):not(.recommended) .plan-button { color: #0f0f13; }
#billing-view .plan-badge { color: #1a102b; }

/* Keep the flexible Pro/Premium offers neutral; the annual Pro plan remains highlighted. */
#billing-view .plan-button[data-plan-code="pro-week"],
#billing-view .plan-button[data-plan-code="premium-week"],
#billing-view .plan-button[data-plan-code="premium-year"] {
  background: #fff;
  color: #141219;
  border-color: #fff;
}

#billing-view .plan-button[data-plan-code="pro-week"]:hover:not(:disabled),
#billing-view .plan-button[data-plan-code="premium-week"]:hover:not(:disabled),
#billing-view .plan-button[data-plan-code="premium-year"]:hover:not(:disabled) {
  background: #f0f0f2;
  color: #141219;
}

@media (prefers-reduced-motion: reduce) {
  #billing-view .plan-card:hover { animation: none; }
}