/* ============================================
 * 照妖镜 H5 - 移动端样式
 * ============================================ */

:root {
  --color-bg: #0a0a0f;
  --color-surface: #16161e;
  --color-surface-2: #1e1e28;
  --color-primary: #e8554e;
  --color-primary-light: #ff7670;
  --color-accent: #ffc857;
  --color-text: #f0f0f5;
  --color-text-dim: #8888a0;
  --color-border: #2a2a38;
  --color-success: #4ecdc4;
  --color-warning: #ffc857;
  --color-danger: #e8554e;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --shadow-card: 0 4px 24px rgba(0,0,0,0.4);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html, body {
  height: 100%;
  font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', sans-serif;
  background: var(--color-bg);
  color: var(--color-text);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

#app {
  max-width: 480px;
  margin: 0 auto;
  min-height: 100vh;
  position: relative;
}

/* === View 切换 === */
.view {
  min-height: 100vh;
  padding-bottom: 40px;
  animation: fadeIn 0.3s ease;
}
.view.hidden { display: none !important; }
.hidden { display: none !important; }

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* === Header === */
.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  padding-top: max(12px, env(safe-area-inset-top));
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--color-bg);
}
.header-title {
  font-size: 17px;
  font-weight: 600;
}
.logo {
  display: flex;
  align-items: center;
  gap: 8px;
}
.logo-link {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: opacity 0.2s ease;
}
.logo-link:hover {
  opacity: 0.75;
}
.logo-icon { font-size: 28px; }
.logo-text {
  font-size: 20px;
  font-weight: 700;
  background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.icon-btn {
  background: none;
  border: none;
  color: var(--color-text);
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.back-btn { opacity: 0.8; }

/* 带文字的个人中心按钮 */
.profile-btn {
  gap: 4px;
  padding: 6px 12px;
  border-radius: 20px;
  background: rgba(200, 150, 90, 0.1);
  font-size: 13px;
}
.profile-btn-text {
  font-size: 13px;
  font-weight: 600;
}
.profile-btn:hover {
  background: rgba(200, 150, 90, 0.2);
}

/* === 首页 === */
.home-hero {
  text-align: center;
  padding: 20px 24px 32px;
}
.hero-icon {
  font-size: 48px;
  margin-bottom: 8px;
}
.hero-tag {
  display: inline-block;
  padding: 4px 12px;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: 100px;
  font-size: 12px;
  color: var(--color-text-dim);
  margin-bottom: 16px;
}
.hero-title {
  font-size: 32px;
  font-weight: 800;
  line-height: 1.3;
  background: linear-gradient(135deg, #fff, #aaa);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero-desc {
  font-size: 14px;
  color: var(--color-text-dim);
  margin-top: 12px;
  line-height: 1.8;
}

.home-upload-zone {
  margin: 0 16px;
  padding: 40px 20px;
  background: var(--color-surface);
  border: 2px dashed var(--color-border);
  border-radius: var(--radius-lg);
  text-align: center;
  cursor: pointer;
  transition: all 0.2s;
}
.home-upload-zone:active {
  border-color: var(--color-primary);
  background: var(--color-surface-2);
}
.home-upload-zone.drag-active {
  border-color: var(--color-primary);
  background: var(--color-surface-2);
  transform: scale(1.02);
}
.upload-icon {
  color: var(--color-text-dim);
  margin-bottom: 12px;
}
.upload-text {
  font-size: 17px;
  font-weight: 600;
  color: var(--color-text);
}
.upload-hint {
  font-size: 13px;
  color: var(--color-text-dim);
  margin-top: 4px;
}

/* 拍照指引 */
.photo-guide {
  margin: 0 16px 20px;
  padding: 14px 16px;
  background: var(--color-surface);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
}
.photo-guide-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-dim);
  margin-bottom: 10px;
}
.photo-guide-tips {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.tip-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--color-text-dim);
}
.tip-item strong {
  color: var(--color-text);
  font-weight: 600;
}
.tip-icon {
  font-size: 16px;
  flex-shrink: 0;
}

/* 上传预览页提醒 */
.upload-notice {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 16px 12px;
  padding: 10px 14px;
  background: rgba(255, 200, 87, 0.08);
  border-radius: var(--radius-sm);
  font-size: 12px;
  color: var(--color-warning);
}
.notice-icon {
  flex-shrink: 0;
}

.home-quota {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin: 20px 16px;
  padding: 16px;
  background: var(--color-surface);
  border-radius: var(--radius-md);
}
.quota-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.quota-label {
  font-size: 12px;
  color: var(--color-text-dim);
}
.quota-value {
  font-size: 20px;
  font-weight: 700;
  color: var(--color-accent);
}
.quota-unit {
  font-size: 12px;
  color: var(--color-text-dim);
}
.quota-divider {
  width: 1px;
  height: 32px;
  background: var(--color-border);
}

.home-features {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin: 0 16px;
}
.feature-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 12px 4px;
  background: var(--color-surface);
  border-radius: var(--radius-md);
  font-size: 12px;
  color: var(--color-text-dim);
}
.feature-icon { font-size: 24px; }

.section-title {
  font-size: 16px;
  font-weight: 600;
  margin: 24px 16px 12px;
}

.home-history {
  margin-top: 8px;
}
.history-list {
  margin: 0 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.history-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: var(--color-surface);
  border-radius: var(--radius-md);
  cursor: pointer;
}
.history-item:active { background: var(--color-surface-2); }
.history-thumb {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-sm);
  object-fit: cover;
  background: var(--color-surface-2);
  flex-shrink: 0;
}
.history-info { flex: 1; min-width: 0; }
.history-score {
  font-size: 16px;
  font-weight: 700;
}
.history-score .score-suffix {
  font-size: 12px;
  color: var(--color-text-dim);
  font-weight: 400;
}
.history-meta {
  font-size: 12px;
  color: var(--color-text-dim);
  margin-top: 2px;
}
.history-date {
  font-size: 11px;
  color: var(--color-text-dim);
}

.history-delete-btn {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 22px;
  height: 22px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: var(--color-text-dim);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s, background 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.history-item-root {
  position: relative;
}

.history-item-root:hover .history-delete-btn {
  opacity: 1;
}

.history-delete-btn:hover {
  background: rgba(255, 80, 80, 0.3);
  color: #fff;
}

/* === 历史列表父子树（首次点评为主，下挂换一件/帮挑）=== */
.history-children {
  margin-left: 24px;
  margin-top: 6px;
  border-left: 2px solid var(--color-border, rgba(255,255,255,0.08));
  padding-left: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.history-item-root + .history-children {
  margin-top: -2px;
}

.history-item-child {
  padding: 8px 10px;
  background: var(--color-surface-2, rgba(255,255,255,0.03));
  border-radius: var(--radius-sm);
  position: relative;
}

.history-thumb-small {
  width: 36px;
  height: 36px;
}

.history-score-small {
  font-size: 13px;
}

.history-connector {
  position: absolute;
  left: -14px;
  top: 50%;
  width: 12px;
  height: 2px;
  background: var(--color-border, rgba(255,255,255,0.08));
}

.history-badge {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 8px;
  font-size: 10px;
  font-weight: 600;
  margin-left: 4px;
}

.history-badge-modify {
  background: rgba(59, 130, 246, 0.18);
  color: #60a5fa;
}

.history-badge-wardrobe {
  background: rgba(168, 85, 247, 0.18);
  color: #c084fc;
}

/* === 上传预览页 === */
.upload-preview {
  margin: 16px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-surface);
}
.upload-preview img {
  width: 100%;
  display: block;
  max-height: 500px;
  object-fit: contain;
}

.upload-form {
  margin: 0 16px;
}
.form-field {
  margin-bottom: 20px;
}
.form-field label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--color-text-dim);
}
.form-field input[type="text"] {
  width: 100%;
  padding: 12px 16px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text);
  font-size: 15px;
}
.form-field input:focus {
  outline: none;
  border-color: var(--color-primary);
}

.mode-selector {
  display: flex;
  gap: 8px;
}
.mode-btn {
  flex: 1;
  padding: 12px 8px;
  background: var(--color-surface);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text-dim);
  cursor: pointer;
  text-align: center;
  transition: all 0.2s;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.mode-btn.active {
  border-color: var(--color-primary);
  color: var(--color-text);
  background: var(--color-surface-2);
}
.mode-name { font-size: 13px; font-weight: 600; }
.mode-caption { font-size: 10px; color: var(--color-text-dim); letter-spacing: .08em; }
.mode-mark {
  width: 26px;
  height: 26px;
  position: relative;
  display: inline-block;
  color: var(--color-text-dim);
}
.mode-mark i { position: absolute; display: block; background: currentColor; }
.mode-mark-gentle { border: 1px solid currentColor; border-radius: 50%; }
.mode-mark-gentle i { width: 1px; height: 9px; left: 12px; top: 3px; transform-origin: 50% 10px; }
.mode-mark-gentle i:nth-child(2) { transform: rotate(120deg); }
.mode-mark-gentle i:nth-child(3) { transform: rotate(240deg); }
.mode-mark-savage { transform: rotate(45deg); border: 1px solid currentColor; }
.mode-mark-savage i { width: 12px; height: 1px; left: 6px; top: 12px; transform: rotate(-45deg); }
.mode-mark-savage i:nth-child(2) { width: 1px; height: 12px; left: 12px; top: 6px; transform: rotate(-45deg); }
.mode-mark-savage i:nth-child(3) { width: 4px; height: 4px; right: -3px; bottom: -3px; }
.mode-mark-devil { border-left: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: skewX(-18deg); }
.mode-mark-devil i { width: 13px; height: 1px; right: 2px; top: 7px; transform: rotate(-34deg); }
.mode-mark-devil i:nth-child(2) { width: 13px; height: 1px; right: 2px; bottom: 7px; transform: rotate(34deg); }
.mode-btn.active .mode-mark { color: var(--color-primary); }
.mode-btn.active .mode-caption { color: var(--color-primary-light); }

/* 场合选择器 */
.occasion-selector {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.occasion-btn {
  padding: 8px 14px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 100px;
  color: var(--color-text-dim);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}
.occasion-btn.active {
  border-color: var(--color-primary);
  color: var(--color-text);
  background: rgba(232, 85, 78, 0.1);
}
.occasion-btn:active { opacity: 0.7; }

.upload-actions {
  display: flex;
  gap: 12px;
  margin: 24px 16px;
}
.btn-primary, .btn-secondary {
  flex: 1;
  padding: 14px;
  border-radius: var(--radius-md);
  font-size: 16px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: opacity 0.2s;
}
.btn-primary {
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
  color: #fff;
}
.btn-secondary {
  background: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-border);
}
.btn-primary:active, .btn-secondary:active { opacity: 0.8; }

/* === 等待页 === */
.loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 80vh;
  padding: 40px;
  text-align: center;
}
.loading-mirror {
  margin-bottom: 32px;
}
.mirror-frame {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-surface-2), var(--color-surface));
  border: 3px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  animation: pulse 2s ease infinite;
}
.mirror-emoji { font-size: 48px; }
.mirror-shine {
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(45deg, transparent 40%, rgba(255,255,255,0.1) 50%, transparent 60%);
  animation: shine 2s linear infinite;
}
@keyframes pulse {
  0%, 100% { transform: scale(1); border-color: var(--color-border); }
  50% { transform: scale(1.05); border-color: var(--color-primary); }
}
@keyframes shine {
  0% { transform: translateX(-30%) translateY(-30%) rotate(0deg); }
  100% { transform: translateX(-30%) translateY(-30%) rotate(360deg); }
}
.loading-title {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 24px;
}
.loading-steps {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 24px;
}
.loading-step {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 20px;
  background: var(--color-surface);
  border-radius: var(--radius-md);
  opacity: 0.4;
  transition: all 0.3s;
}
.loading-step.active {
  opacity: 1;
  border: 1px solid var(--color-primary);
}
.loading-step.done {
  opacity: 1;
  border: 1px solid var(--color-success);
}
.step-icon { font-size: 20px; }
.step-text { font-size: 14px; }
.loading-timer {
  font-size: 14px;
  color: var(--color-text-dim);
  margin-bottom: 4px;
}
.loading-hint {
  font-size: 12px;
  color: var(--color-text-dim);
}

/* === 结果页 === */
.score-card {
  margin: 16px;
  padding: 24px;
  background: linear-gradient(135deg, var(--color-surface), var(--color-surface-2));
  border-radius: var(--radius-lg);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.score-card::before {
  content: '';
  position: absolute;
  top: -40%;
  right: -20%;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, rgba(232,85,78,0.15), transparent);
  border-radius: 50%;
}
.score-display {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 4px;
  margin-bottom: 4px;
}
.score-number {
  font-size: 56px;
  font-weight: 800;
  line-height: 1;
  background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.score-max {
  font-size: 20px;
  color: var(--color-text-dim);
}
.score-label {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 8px;
}
.score-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 13px;
  color: var(--color-text-dim);
  flex-wrap: wrap;
}
.meta-dot { opacity: 0.5; }

.issues-card, .report-card, .detail-card {
  margin: 12px 16px;
  padding: 16px;
  background: var(--color-surface);
  border-radius: var(--radius-md);
}
.card-title {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 12px;
}

.issues-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.issue-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 14px;
  line-height: 1.5;
}
.issue-num {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--color-danger);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.report-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  flex-wrap: wrap;
  gap: 8px;
}
.mode-switcher {
  display: flex;
  gap: 4px;
}
.mode-switch-btn {
  padding: 4px 10px;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: 100px;
  color: var(--color-text-dim);
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s;
}
.switch-mark { font-size: 9px; letter-spacing: .06em; opacity: .65; margin-right: 5px; }
.mode-switch-btn.active {
  border-color: var(--color-primary);
  color: var(--color-text);
}
.mode-switch-btn:active { opacity: 0.7; }

.report-segments {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.report-segment {
  border-left: 3px solid var(--color-border);
  padding-left: 12px;
}
.report-segment .seg-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-accent);
  margin-bottom: 4px;
}
.report-segment .seg-content {
  font-size: 14px;
  line-height: 1.7;
  color: var(--color-text);
  white-space: pre-wrap;
}

.detail-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: none;
  border: none;
  color: var(--color-text);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
}
.detail-toggle svg {
  transition: transform 0.2s;
}
.detail-toggle.open svg { transform: rotate(180deg); }
.detail-content {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.detail-content.hidden { display: none !important; }
.detail-item {
  padding: 12px;
  background: var(--color-surface-2);
  border-radius: var(--radius-sm);
}
.detail-item .dt-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-accent);
  margin-bottom: 4px;
}
.detail-item .dt-body {
  font-size: 13px;
  color: var(--color-text-dim);
  line-height: 1.6;
}

.result-actions {
  display: flex;
  gap: 8px;
  margin: 20px 16px;
  padding-bottom: 20px;
}
.btn-action {
  flex: 1;
  padding: 12px 4px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text);
  cursor: pointer;
  text-align: center;
  transition: all 0.2s;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.btn-action:active {
  background: var(--color-surface-2);
  border-color: var(--color-primary);
}
.action-icon { font-size: 20px; }
.btn-action span:last-child { font-size: 12px; }

/* === 个人中心 === */
.profile-card {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 16px;
  padding: 20px;
  background: var(--color-surface);
  border-radius: var(--radius-lg);
}
.profile-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--color-surface-2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
}
.profile-name {
  font-size: 18px;
  font-weight: 700;
}
.profile-membership {
  font-size: 13px;
  color: var(--color-text-dim);
  margin-top: 2px;
}

.profile-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin: 0 16px;
}

.profile-credit-card {
  display:block;
  width:calc(100% - 36px);
  margin:14px 18px 0;
  padding:18px;
  border:1px solid rgba(255,232,224,.2);
  background:linear-gradient(135deg,rgba(110,25,38,.72),rgba(32,11,17,.94));
  color:#f8eee9;
  text-align:left;
  cursor:pointer;
}
.profile-credit-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; font-family:'Songti SC','STSong',serif; font-size:17px; }
.profile-credit-heading small { max-width:65%; color:#c9afb0; font-family:inherit; font-size:11px; font-weight:400; text-align:right; line-height:1.45; }
.profile-credit-stats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); margin-top:16px; padding-top:14px; border-top:1px solid rgba(255,232,224,.16); }
.profile-credit-stats div { min-width:0; text-align:center; }
.profile-credit-stats strong { display:block; color:#ee6472; font-size:25px; line-height:1; }
.profile-credit-stats span { display:block; margin-top:7px; color:#c9afb0; font-size:11px; }
.stat-item {
  text-align: center;
  padding: 12px 4px;
  background: var(--color-surface);
  border-radius: var(--radius-md);
}
.stat-value {
  display: block;
  font-size: 18px;
  font-weight: 700;
  color: var(--color-accent);
}
.stat-label {
  font-size: 11px;
  color: var(--color-text-dim);
}

.profile-section {
  margin-top: 24px;
}

.score-trend {
  margin: 0 16px;
  height: 80px;
  background: var(--color-surface);
  border-radius: var(--radius-md);
  padding: 16px;
  display: flex;
  align-items: flex-end;
  gap: 6px;
}
.trend-bar {
  flex: 1;
  background: linear-gradient(to top, var(--color-primary), var(--color-primary-light));
  border-radius: 4px 4px 0 0;
  min-height: 4px;
  position: relative;
  transition: height 0.3s;
}
.trend-bar .trend-score {
  position: absolute;
  top: -18px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 11px;
  color: var(--color-text-dim);
}

.upgrade-card {
  margin: 0 16px;
  padding: 20px;
  background: linear-gradient(135deg, var(--color-surface), var(--color-surface-2));
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
}
.upgrade-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.upgrade-badge {
  padding: 4px 12px;
  background: var(--color-accent);
  color: #000;
  border-radius: 100px;
  font-size: 12px;
  font-weight: 700;
}
.upgrade-price {
  font-size: 24px;
  font-weight: 800;
  color: var(--color-accent);
}
.upgrade-features {
  list-style: none;
  margin-bottom: 16px;
}
.upgrade-features li {
  padding: 6px 0;
  font-size: 14px;
  color: var(--color-text-dim);
}
.upgrade-features li::before {
  content: '✓ ';
  color: var(--color-success);
}

/* 跨镜共享数据 */
.cross-scene-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin: 0 16px;
}
.cross-scene-item {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.cross-scene-label {
  font-size: 13px;
  color: var(--color-text-dim);
}
.cross-scene-value {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-accent);
}

/* === Modal === */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.modal.hidden { display: none !important; }
.modal-mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(4px);
}
.modal-panel {
  position: relative;
  width: 100%;
  max-width: 480px;
  background: var(--color-bg);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  animation: slideUp 0.3s ease;
}
@keyframes slideUp {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  border-bottom: 1px solid var(--color-border);
}
.modal-title {
  font-size: 16px;
  font-weight: 600;
}
.modal-close {
  font-size: 18px;
  opacity: 0.6;
}

/* === 追问弹窗 === */
.ask-panel { height: 85vh; }

/* v31: 报告段内联 Markdown 粗体高亮 */
.seg-content strong {
  color: var(--color-accent);
  font-weight: 700;
}
.seg-content em { font-style: italic; }

/* v31: 内联追问对话框（取代弹窗） */
.inline-ask-card {
  margin: 16px 0;
  padding: 14px 0 0;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.inline-ask-card .card-title {
  padding: 0 16px 10px;
}
.inline-ask-card .ask-messages {
  max-height: 320px;
  min-height: 60px;
  border-top: 1px solid var(--color-border);
}
.inline-ask-card .ask-msg.ai strong {
  color: var(--color-accent);
  font-weight: 700;
}
.inline-ask-card .ask-msg.user strong { color: #fff; }
.inline-ask-card .ask-input-bar {
  padding: 10px 12px;
}
.ask-messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ask-msg {
  max-width: 80%;
  padding: 10px 14px;
  border-radius: var(--radius-md);
  font-size: 14px;
  line-height: 1.6;
  word-break: break-word;
}
.ask-msg.user {
  align-self: flex-end;
  background: var(--color-primary);
  color: #fff;
  border-radius: var(--radius-md) var(--radius-md) 4px var(--radius-md);
}
.ask-msg.ai {
  align-self: flex-start;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md) var(--radius-md) var(--radius-md) 4px;
}
.ask-msg.typing {
  color: var(--color-text-dim);
  font-style: italic;
}
.ask-input-bar {
  display: flex;
  gap: 8px;
  padding: 12px 16px;
  padding-bottom: max(12px, var(--safe-bottom));
  border-top: 1px solid var(--color-border);
}
.ask-input-bar input {
  flex: 1;
  padding: 10px 16px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 100px;
  color: var(--color-text);
  font-size: 14px;
}
.ask-input-bar input:focus {
  outline: none;
  border-color: var(--color-primary);
}
.btn-send {
  padding: 10px 20px;
  background: var(--color-primary);
  color: #fff;
  border: none;
  border-radius: 100px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.btn-send:active { opacity: 0.8; }
.btn-send:disabled { opacity: 0.5; }

/* === 分享卡弹窗 === */
.share-panel {
  padding-bottom: var(--safe-bottom);
}
.share-canvas-wrapper {
  padding: 16px;
  display: flex;
  justify-content: center;
}
#share-canvas {
  width: 100%;
  max-width: 375px;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
}
.share-actions {
  display: flex;
  gap: 12px;
  padding: 0 16px 20px;
}
.share-panel .modal-title { color:#f5e8dd; font-family:'Songti SC','STSong',serif; letter-spacing:.08em; }
.share-panel .btn-secondary { background:#25171c; border:1px solid #755158; color:#f8eee7; }
.share-panel .btn-primary { background:#df4056; border-color:#df4056; color:#fff; }

/* === Toast === */
.toast {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  padding: 10px 24px;
  background: rgba(0,0,0,0.85);
  color: #fff;
  border-radius: 100px;
  font-size: 14px;
  z-index: 2000;
  white-space: nowrap;
  animation: toastIn 0.3s ease;
}
.toast.hidden { display: none !important; }
@keyframes toastIn {
  from { opacity: 0; transform: translateX(-50%) translateY(10px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* === 额度不足提示 === */
.quota-exceeded {
  margin: 16px;
  padding: 20px;
  background: var(--color-surface);
  border: 1px solid var(--color-danger);
  border-radius: var(--radius-md);
  text-align: center;
}
.quota-exceeded h3 {
  font-size: 16px;
  color: var(--color-danger);
  margin-bottom: 8px;
}
.quota-exceeded p {
  font-size: 14px;
  color: var(--color-text-dim);
  margin-bottom: 16px;
}

/* ========== 错误详情弹窗 ========== */
.error-panel {
  text-align: center;
  padding: 30px 24px 24px;
  max-width: 360px;
}
.error-icon {
  width: 58px;
  height: 58px;
  margin: 0 auto 16px;
  color: var(--color-primary);
  border: 1px solid rgba(232, 85, 78, .58);
  background: linear-gradient(135deg, rgba(232, 85, 78, .18), rgba(90, 12, 29, .18));
  display: grid;
  place-items: center;
  transform: rotate(45deg);
}
.error-icon svg { width: 34px; height: 34px; stroke: currentColor; stroke-width: 2; transform: rotate(-45deg); }
.error-icon.error-icon-service { color: var(--color-warning); border-color: rgba(255, 190, 72, .58); }
.error-icon.error-icon-photo { color: #ef6673; }
.error-icon.error-icon-wardrobe { color: #df9b69; }
.error-icon.error-icon-service svg { stroke-dasharray: 2 2; }
.error-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--color-text);
  letter-spacing: .06em;
  margin-bottom: 18px;
}
.error-eyebrow {
  display: block;
  font-size: 10px;
  color: var(--color-text-dim);
  letter-spacing: .14em;
  text-transform: uppercase;
  text-align: left;
  margin-bottom: 7px;
}
.error-reason-block, .error-why-block {
  text-align: left;
  margin-bottom: 12px;
}
.error-reason {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text);
  line-height: 1.55;
  margin: 0;
  padding: 13px 15px;
  background: linear-gradient(90deg, rgba(199, 42, 61, .20), rgba(255,255,255,.025));
  border-radius: 2px;
  border-left: 3px solid var(--color-primary);
  text-align: left;
}
.error-why {
  color: var(--color-text-dim);
  font-size: 13px;
  line-height: 1.6;
  margin: 0;
  padding: 0 2px;
}
.error-tips-label { margin-top: 20px; }
.error-tips {
  text-align: left;
  margin-bottom: 22px;
  counter-reset: retake;
}
.error-tip {
  font-size: 13px;
  color: var(--color-text);
  padding: 9px 0 9px 27px;
  line-height: 1.5;
  position: relative;
  counter-increment: retake;
}
.error-tip::before {
  content: counter(retake, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 9px;
  color: var(--color-primary-light);
  font-size: 10px;
  letter-spacing: .06em;
}
.error-tip:not(:last-child) {
  border-bottom: 1px dashed var(--color-border);
}

/* ============================================
 * Phase 2: 骨架屏 Skeleton
 * ============================================ */
.skeleton {
  background: linear-gradient(
    90deg,
    var(--color-surface) 25%,
    var(--color-surface-2) 50%,
    var(--color-surface) 75%
  );
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s ease infinite;
  border-radius: 4px;
}

@keyframes skeleton-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.skeleton-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.skeleton-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: var(--color-surface);
  border-radius: var(--radius-md);
}

.skeleton-thumb {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}

.skeleton-lines {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.skeleton-line {
  height: 14px;
  border-radius: 7px;
}

.skeleton-line.w60 { width: 60%; }
.skeleton-line.w40 { width: 40%; }

.skeleton-score {
  display: inline-block;
  width: 120px;
  height: 56px;
  border-radius: var(--radius-sm);
}

.skeleton-text {
  display: inline-block;
  width: 100px;
  height: 16px;
  border-radius: 8px;
}

/* ============================================
 * Phase 2: 上传进度条
 * ============================================ */
.upload-progress {
  display: none;
  align-items: center;
  gap: 12px;
  margin: 0 16px 16px;
  padding: 12px 16px;
  background: var(--color-surface);
  border-radius: var(--radius-md);
}

.upload-progress .progress-bar {
  flex: 1;
  height: 6px;
  background: var(--color-surface-2);
  border-radius: 3px;
  overflow: hidden;
}

.upload-progress .progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--color-primary), var(--color-primary-light));
  border-radius: 3px;
  transition: width 0.2s ease;
  width: 0%;
}

.upload-progress .progress-text {
  font-size: 12px;
  color: var(--color-text-dim);
  white-space: nowrap;
  min-width: 70px;
  text-align: right;
}

/* ============================================
 * Phase 2: 网络状态横幅
 * ============================================ */
.network-banner {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  padding: 8px 16px;
  background: var(--color-danger);
  color: #fff;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  z-index: 3000;
  transform: translateY(-100%);
  transition: transform 0.3s ease;
}

.network-banner.show {
  transform: translateY(0);
}

/* ============================================
 * Phase 2: 8维度雷达图
 * ============================================ */
.radar-container {
  display: flex;
  justify-content: center;
  padding: 8px 0 16px;
}

.radar-chart {
  width: 260px;
  max-width: 100%;
  height: auto;
}

/* ============================================
 * Phase 2: 结果页滑入动画增强
 * ============================================ */
.score-card {
  animation: scoreCardIn 0.5s ease;
}

@keyframes scoreCardIn {
  from { opacity: 0; transform: translateY(20px) scale(0.95); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.issues-card, .report-card, .detail-card {
  animation: fadeInUp 0.4s ease;
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

.result-actions {
  animation: fadeInUp 0.5s ease 0.1s both;
}

/* tip-item-important 高亮 */
.tip-item-important {
  background: rgba(232, 85, 78, 0.08);
  border-radius: var(--radius-sm);
  padding: 6px 8px;
  margin: -2px -8px;
}

/* ============================================
 * Phase 3: 穿搭标签系统
 * ============================================ */
.style-tags-container {
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
}

.style-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
}

.style-tag {
  display: inline-block;
  padding: 3px 10px;
  border: 1px solid;
  border-radius: 100px;
  font-size: 11px;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.03);
}

/* ============================================
 * 最终版: 衣品人格称号 / 潮流契合 / 身材公式 / 成长摘要
 * ============================================ */
.style-title-badge {
  margin-top: 12px;
  padding: 10px 16px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(232, 85, 78, 0.12), rgba(255, 200, 87, 0.08));
  border: 1px solid rgba(232, 85, 78, 0.35);
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
}

.style-title-name {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 1px;
  background: linear-gradient(90deg, #e8554e, #ffc857);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.style-title-tagline {
  font-size: 12px;
  color: var(--color-text-dim);
}

.trend-chip {
  font-size: 11px !important;
  font-weight: 600;
}

.trend-ahead { color: #4ecdc4; }
.trend-on { color: #ffc857; }
.trend-classic { color: #9d9db8; }
.trend-out { color: #e8554e; }

.formula-card {
  margin: 0 16px 16px;
  padding: 16px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.formula-main {
  font-size: 17px;
  font-weight: 800;
  color: #ffc857;
  letter-spacing: 0.5px;
  margin: 8px 0;
}

.formula-note {
  font-size: 12px;
  color: var(--color-text-dim);
  line-height: 1.6;
}

.growth-summary {
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text-dim);
  margin-left: 8px;
}

.growth-summary.growth-up {
  color: #4ecdc4;
}


/* ============================================
 * Phase 3: 用户画像推荐卡
 * ============================================ */
.home-recommendations {
  margin: 0 16px;
}

.recommendation-cards {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.rec-card {
  padding: 16px;
  background: var(--color-surface);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
}

.rec-card-warning {
  border-color: rgba(232, 85, 78, 0.3);
}

.rec-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.rec-card-icon {
  font-size: 20px;
}

.rec-card-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-text);
}

.rec-card-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.rec-do, .rec-dont {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.rec-label {
  font-size: 12px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
  display: inline-block;
  width: fit-content;
  margin-bottom: 4px;
}

.rec-label-do {
  background: rgba(78, 205, 196, 0.15);
  color: var(--color-success);
}

.rec-label-dont {
  background: rgba(232, 85, 78, 0.15);
  color: var(--color-danger);
}

.rec-do ul, .rec-dont ul {
  list-style: none;
  padding-left: 0;
}

.rec-do li, .rec-dont li {
  font-size: 13px;
  color: var(--color-text-dim);
  padding: 3px 0;
  padding-left: 14px;
  position: relative;
  line-height: 1.5;
}

.rec-do li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--color-success);
  font-size: 12px;
}

.rec-dont li::before {
  content: '✗';
  position: absolute;
  left: 0;
  color: var(--color-danger);
  font-size: 12px;
}

.rec-colors {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}

.avoid-color-chip {
  padding: 4px 10px;
  background: rgba(232, 85, 78, 0.12);
  border: 1px solid rgba(232, 85, 78, 0.3);
  border-radius: 100px;
  font-size: 12px;
  color: var(--color-danger);
}

.rec-tip {
  font-size: 13px;
  color: var(--color-text-dim);
  line-height: 1.5;
}

.rec-stats {
  display: flex;
  gap: 24px;
  margin-bottom: 8px;
}

.rec-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.rec-stat-value {
  font-size: 24px;
  font-weight: 800;
  color: var(--color-accent);
}

.rec-stat-label {
  font-size: 11px;
  color: var(--color-text-dim);
}

/* ============================================
 * Phase 3: 评分趋势 SVG 折线图
 * ============================================ */
.trend-chart {
  width: 100%;
  max-width: 320px;
  height: auto;
}

/* ============================================
 * Phase 3: 帮挑结果排名卡
 * ============================================ */
.wardrobe-result {
  margin: 12px 16px;
}

.wardrobe-cards {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.wardrobe-card {
  display: flex;
  gap: 12px;
  padding: 14px;
  background: var(--color-surface);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  align-items: flex-start;
}

.wardrobe-card.rank-1 {
  border-color: rgba(255, 200, 87, 0.4);
  background: linear-gradient(135deg, var(--color-surface), rgba(255, 200, 87, 0.05));
}

.wardrobe-card.rank-2 {
  border-color: rgba(192, 192, 192, 0.2);
}

.wardrobe-card.rank-3 {
  border-color: rgba(205, 127, 50, 0.2);
}

.wardrobe-rank {
  font-size: 28px;
  line-height: 1;
  flex-shrink: 0;
  width: 40px;
  text-align: center;
}

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

.wardrobe-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 4px;
}

.wardrobe-meta {
  display: flex;
  gap: 4px;
  font-size: 12px;
  color: var(--color-text-dim);
  margin-bottom: 6px;
}

.wardrobe-divider {
  opacity: 0.5;
}

.wardrobe-stars {
  display: flex;
  gap: 2px;
  margin-bottom: 6px;
}

.wardrobe-star {
  font-size: 14px;
  color: var(--color-border);
}

.wardrobe-star.filled {
  color: var(--color-accent);
}

.wardrobe-match {
  display: flex;
  gap: 4px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}

.match-badge {
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
}

.match-good {
  background: rgba(78, 205, 196, 0.15);
  color: var(--color-success);
}

.match-bad {
  background: rgba(232, 85, 78, 0.15);
  color: var(--color-danger);
}

.wardrobe-note {
  font-size: 13px;
  color: var(--color-text-dim);
  line-height: 1.5;
}

.wardrobe-score {
  font-size: 24px;
  font-weight: 800;
  color: var(--color-accent);
  flex-shrink: 0;
  align-self: center;
}

.wardrobe-score-max {
  font-size: 12px;
  color: var(--color-text-dim);
  font-weight: 400;
}

.wardrobe-recommendation {
  margin-top: 16px;
  padding: 14px;
  background: linear-gradient(135deg, var(--color-surface), var(--color-surface-2));
  border-radius: var(--radius-md);
  border-left: 3px solid var(--color-accent);
}

.rec-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-accent);
  margin-bottom: 8px;
}

.rec-text {
  font-size: 13px;
  color: var(--color-text);
  line-height: 1.6;
}

.rec-second {
  margin-top: 8px;
  color: var(--color-text-dim);
}

/* v31: AI 文本内联 Markdown 渲染 */
.wardrobe-note strong,
.wardrobe-concerns strong,
.rec-text strong {
  color: var(--color-accent);
  font-weight: 700;
}

.wardrobe-note em,
.wardrobe-concerns em,
.rec-text em {
  font-style: italic;
  color: var(--color-text);
}

/* v31: 帮挑必要性中间态 + 反对意见 */
.match-warn {
  background: rgba(240, 173, 78, 0.18);
  color: #c77d1e;
}

.wardrobe-concerns {
  margin-top: 8px;
  padding: 8px 10px;
  background: rgba(232, 85, 78, 0.07);
  border-left: 2px solid rgba(232, 85, 78, 0.4);
  border-radius: 4px;
}

.concerns-label {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  color: var(--color-danger);
  margin-bottom: 3px;
}

.concerns-item {
  font-size: 12px;
  color: var(--color-text-dim);
  line-height: 1.55;
}

/* ============================================
 * Phase 3: 追问快捷问题
 * ============================================ */
.quick-questions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 0;
  align-self: flex-start;
  width: 100%;
}

.quick-q-chip {
  padding: 6px 12px;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: 100px;
  color: var(--color-text-dim);
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}

.quick-q-chip:active {
  border-color: var(--color-primary);
  color: var(--color-text);
  background: rgba(232, 85, 78, 0.1);
}

/* ============================================
 * Phase 4: 登录页样式
 * ============================================ */

#view-auth {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 20px;
  background: linear-gradient(180deg, var(--color-bg) 0%, #12121a 100%);
}

.auth-container {
  width: 100%;
  max-width: 360px;
}

.auth-logo {
  text-align: center;
  margin-bottom: 12px;
}

.auth-logo-icon {
  font-size: 48px;
  display: block;
  margin-bottom: 8px;
}

.auth-logo-text {
  font-size: 28px;
  font-weight: 700;
  color: var(--color-text);
  letter-spacing: 2px;
}

.auth-tagline {
  text-align: center;
  color: var(--color-text-dim);
  font-size: 13px;
  line-height: 1.6;
  margin-bottom: 32px;
}

.auth-form {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 24px 20px;
  margin-bottom: 16px;
}

.auth-tabs {
  display: flex;
  gap: 4px;
  background: var(--color-surface-2);
  border-radius: var(--radius-sm);
  padding: 4px;
  margin-bottom: 24px;
}

.auth-tab {
  flex: 1;
  padding: 10px;
  border: none;
  background: transparent;
  color: var(--color-text-dim);
  font-size: 14px;
  font-weight: 500;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
}

.auth-tab.active {
  background: var(--color-primary);
  color: #fff;
}

.auth-panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.auth-field {
  position: relative;
}

.auth-field input {
  width: 100%;
  padding: 14px 16px;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  font-size: 15px;
  outline: none;
  transition: border-color 0.2s;
  box-sizing: border-box;
}

.auth-field input:focus {
  border-color: var(--color-primary);
}

.auth-field input::placeholder {
  color: var(--color-text-dim);
}

.auth-code-field {
  display: flex;
  gap: 10px;
}

.auth-code-field input {
  flex: 1;
  letter-spacing: 4px;
  text-align: center;
  font-size: 18px;
  font-weight: 600;
}

.btn-send-code {
  padding: 14px 16px;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-primary);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-send-code:active:not(:disabled) {
  background: rgba(232, 85, 78, 0.1);
}

.btn-send-code:disabled {
  color: var(--color-text-dim);
  cursor: not-allowed;
  opacity: 0.6;
}

.auth-submit {
  margin-top: 8px;
  padding: 14px;
  font-size: 16px;
  font-weight: 600;
}

.btn-text {
  background: none;
  border: none;
  color: var(--color-text-dim);
  font-size: 14px;
  cursor: pointer;
  text-align: center;
  padding: 8px;
  transition: color 0.2s;
}

.btn-text:active {
  color: var(--color-primary);
}

.auth-footer {
  text-align: center;
  color: var(--color-text-dim);
  font-size: 12px;
  margin-top: 16px;
}

.auth-link {
  color: var(--color-primary);
  text-decoration: none;
}

.auth-hint-text {
  margin-top: 12px;
  text-align: center;
  font-size: 12px;
  line-height: 1.6;
  color: var(--color-text-dim);
}

/* ============================================
 * 全站统一登录弹窗 (覆盖在首页/其他视图之上)
 * ============================================ */
.auth-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(6px);
  animation: fadeIn 0.2s ease;
  padding: 16px;
}
.auth-modal-overlay.hidden { display: none !important; }

.auth-modal-mask {
  position: absolute;
  inset: 0;
  cursor: pointer;
}

.auth-modal-panel {
  position: relative;
  width: 100%;
  max-width: 380px;
  max-height: 85vh;
  background: var(--color-bg-card, #1a1a24);
  border-radius: 16px;
  border: 1px solid var(--color-border, rgba(255,255,255,0.08));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: slideUp 0.3s ease;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.auth-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--color-border, rgba(255,255,255,0.06));
}

.auth-modal-title {
  font-size: 17px;
  font-weight: 600;
  color: var(--color-text, #fff);
}

.auth-modal-close {
  background: none;
  border: none;
  color: var(--color-text-dim, #999);
  font-size: 18px;
  cursor: pointer;
  padding: 4px 8px;
  line-height: 1;
}
.auth-modal-close:active { color: var(--color-text, #fff); }

.auth-modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
}

.auth-modal-overlay {
  --auth-gold: #e7d5b1;
  --color-primary: var(--auth-gold);
  --color-primary-light: var(--auth-gold);
  --color-accent: var(--auth-gold);
}

.auth-modal-overlay .auth-tab.active,
.auth-modal-overlay .auth-submit {
  background: var(--auth-gold) !important;
  color: #10080c;
  box-shadow: none;
}

.auth-modal-overlay .auth-field input:focus,
.auth-modal-overlay .btn-send-code {
  border-color: rgba(231, 213, 177, .48);
}

.auth-modal-overlay .btn-send-code,
.auth-modal-overlay .btn-text:active,
.auth-modal-overlay .auth-link {
  color: var(--auth-gold);
}

.auth-modal-overlay .btn-send-code:active:not(:disabled) {
  background: rgba(231, 213, 177, .12);
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideUp {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

/* ============================================
 * Phase 4: 账号安全样式
 * ============================================ */

.account-info {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 4px 16px;
  margin-bottom: 12px;
}

.account-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--color-border);
}

.account-row:last-child {
  border-bottom: none;
}

.account-label {
  color: var(--color-text-dim);
  font-size: 14px;
}

.account-value {
  color: var(--color-text);
  font-size: 14px;
}

.btn-block {
  width: 100%;
  padding: 12px;
  margin-bottom: 8px;
  font-size: 14px;
}

.btn-danger {
  color: var(--color-danger);
  border-color: rgba(232, 85, 78, 0.3);
}

.btn-danger:active {
  background: rgba(232, 85, 78, 0.1);
}

/* 设置密码弹窗 */
.password-panel {
  max-width: 360px;
}

.password-form {
  padding: 20px 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.password-form .auth-field input {
  width: 100%;
}

/* === Phase 5: 购买面板 & 游客模式 === */

/* 购买按钮 */
.btn-purchase {
  background: linear-gradient(135deg, #e8554e, #f08070);
  color: #fff;
  border: none;
  border-radius: 20px;
  padding: 6px 16px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.2s, box-shadow 0.2s;
}
.btn-purchase:active {
  transform: scale(0.95);
}

/* 游客模式 header 按钮 */
.icon-btn.guest-mode {
  position: relative;
}
.icon-btn.guest-mode::after {
  content: '';
  position: absolute;
  top: 4px;
  right: 4px;
  width: 8px;
  height: 8px;
  background: #e8554e;
  border-radius: 50%;
}

/* Modal overlay (purchase panel) */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1100;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  backdrop-filter: blur(4px);
}
.modal-overlay.hidden { display: none !important; }

.modal-content {
  background: var(--color-bg-card, #1a1a24);
  width: 100%;
  max-width: 480px;
  max-height: 85vh;
  border-radius: 16px 16px 0 0;
  display: flex;
  flex-direction: column;
  animation: slideUp 0.3s ease;
}
.modal-content .modal-header h2 {
  font-size: 18px;
  font-weight: 600;
  color: var(--color-text, #fff);
}
.modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
}

/* 购买面板 */
.purchase-loading, .purchase-error {
  text-align: center;
  padding: 40px 20px;
  color: var(--color-text-dim, #888);
  font-size: 14px;
}
.purchase-tier-info {
  background: rgba(232, 85, 78, 0.1);
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 16px;
  font-size: 13px;
  color: var(--color-text-dim, #aaa);
}
.purchase-tier-info strong {
  color: var(--color-primary, #e8554e);
}
.purchase-section {
  margin-bottom: 20px;
}
.purchase-section h3 {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 12px;
  color: var(--color-text, #fff);
}
.purchase-plans-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.purchase-plan-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
  transition: border-color 0.2s, transform 0.2s;
}
.purchase-plan-card:active {
  transform: scale(0.97);
}
.purchase-plan-card.popular {
  border-color: rgba(232, 85, 78, 0.5);
  background: rgba(232, 85, 78, 0.06);
}
.purchase-plan-card.popular::before {
  content: '热门';
  position: absolute;
  top: -8px;
  right: 10px;
  background: #e8554e;
  color: #fff;
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 8px;
  font-weight: 600;
}
.purchase-plan-card.membership-card {
  grid-column: 1 / -1;
  background: linear-gradient(135deg, rgba(232, 85, 78, 0.1), rgba(240, 128, 112, 0.05));
  border-color: rgba(232, 85, 78, 0.3);
}
.plan-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text, #fff);
}
.plan-desc {
  font-size: 12px;
  color: var(--color-text-dim, #888);
}
.plan-benefits ul {
  list-style: none;
  padding: 0;
  margin: 4px 0;
}
.plan-benefits li {
  font-size: 12px;
  color: var(--color-text-dim, #aaa);
  padding: 2px 0;
}
.plan-benefits li::before {
  content: '✓ ';
  color: #4caf50;
}
.plan-price {
  font-size: 22px;
  font-weight: 700;
  color: var(--color-primary, #e8554e);
}
.btn-buy {
  background: var(--color-primary, #e8554e);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  margin-top: 4px;
  transition: opacity 0.2s;
}
.btn-buy:disabled {
  opacity: 0.5;
}
.btn-buy:active {
  transform: scale(0.96);
}
.refund-section {
  margin-top: 18px;
}
.refund-order {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.refund-order div {
  min-width: 0;
}
.refund-order strong,
.refund-order span {
  display: block;
}
.refund-order span,
.refund-state {
  margin-top: 4px;
  color: var(--color-text-dim, #888);
  font-size: 12px;
}
.refund-state {
  flex: none;
  max-width: 118px;
  text-align: right;
}
.btn-refund {
  flex: none;
  padding-inline: 10px;
}
.membership-active {
  text-align: center;
  padding: 20px;
  font-size: 15px;
  color: #4caf50;
  background: rgba(76, 175, 80, 0.1);
  border-radius: 12px;
}
.purchase-cta-register {
  margin-top: 16px;
  padding: 14px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 12px;
  font-size: 13px;
  color: var(--color-text-dim, #aaa);
  text-align: center;
}
.btn-link {
  background: none;
  border: none;
  color: var(--color-primary, #e8554e);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
}

/* 邀请码兑换区域 */
.purchase-invite-section {
  margin-top: 20px;
  padding: 16px;
  background: rgba(78, 205, 196, 0.06);
  border: 1px dashed rgba(78, 205, 196, 0.3);
  border-radius: 12px;
}
.purchase-invite-title {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 4px;
  color: var(--color-text, #fff);
}
.purchase-invite-desc {
  font-size: 12px;
  color: var(--color-text-dim, #888);
  margin-bottom: 12px;
}
.purchase-invite-input-wrap {
  display: flex;
  gap: 8px;
}
.purchase-invite-input-wrap input {
  flex: 1;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  padding: 10px 14px;
  color: var(--color-text, #fff);
  font-size: 15px;
  letter-spacing: 1px;
  outline: none;
  transition: border-color 0.2s;
}
.purchase-invite-input-wrap input:focus {
  border-color: rgba(78, 205, 196, 0.6);
}
.purchase-invite-input-wrap input::placeholder {
  color: var(--color-text-dim, #666);
  letter-spacing: 0;
}
.btn-invite-redeem {
  background: #4ecdc4;
  color: #0a0a0f;
  border: none;
  border-radius: 8px;
  padding: 0 20px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity 0.2s;
}
.btn-invite-redeem:disabled {
  opacity: 0.5;
}
.btn-invite-redeem:active {
  transform: scale(0.96);
}

/* 内测提示弹窗 */
.beta-notice-panel {
  max-width: 360px;
  max-height: none;
  border-radius: 16px;
  padding: 32px 24px 24px;
  text-align: center;
  align-self: center;
  animation: slideUp 0.3s ease;
}
.beta-notice-icon {
  font-size: 48px;
  margin-bottom: 12px;
}
.beta-notice-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--color-text, #fff);
  margin-bottom: 8px;
}
.beta-notice-text {
  font-size: 16px;
  color: var(--color-text, #fff);
  margin-bottom: 8px;
}
.beta-notice-hint {
  font-size: 13px;
  color: var(--color-text-dim, #888);
  margin-bottom: 20px;
  line-height: 1.5;
}

/* ============================================================
   镜面赤曜 / Outfit mirror art direction
   The user photo remains the hero: the interface deliberately uses
   abstract light, glass and red signal lines instead of generated people.
   ============================================================ */
:root {
  --color-bg: #10080c;
  --color-surface: #1a1016;
  --color-surface-2: #28131b;
  --color-primary: #e73c50;
  --color-primary-light: #ff6d70;
  --color-accent: #f0c5a0;
  --color-text: #fff9f5;
  --color-text-dim: #b4a2a9;
  --color-border: rgba(255, 233, 223, 0.16);
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --shadow-card: 0 20px 60px rgba(0, 0, 0, .42);
}

html, body {
  background:
    radial-gradient(ellipse 80% 42% at 95% -5%, rgba(183, 32, 50, .24), transparent 70%),
    radial-gradient(ellipse 70% 30% at 0 70%, rgba(87, 25, 53, .24), transparent 72%),
    #10080c;
  letter-spacing: .015em;
}

#app { isolation: isolate; }
#app::before {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .24;
  background-image: linear-gradient(rgba(255,255,255,.024) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
  background-size: 36px 36px;
  mask-image: linear-gradient(to bottom, #000, transparent 72%);
}

.app-header {
  min-height: 62px; padding: max(10px, env(safe-area-inset-top)) 20px 9px;
  background: linear-gradient(to bottom, rgba(16,8,12,.96), rgba(16,8,12,.72), transparent);
  backdrop-filter: blur(12px);
}
.logo { gap: 7px; }
.logo-icon { font-size: 20px; filter: grayscale(1) contrast(1.5); }
.logo-text, .hero-title {
  background: linear-gradient(105deg, #fff9f5 10%, #f5c7b1 58%, #bd5361 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.logo-text { font-size: 16px; letter-spacing: .055em; }
.icon-btn { color: #fff7f2; border: 1px solid rgba(255,255,255,.14); border-radius: 50%; width: 34px; height: 34px; }
.profile-btn { border-radius: 999px; width: auto; height: 32px; padding: 0 12px; background: rgba(255,255,255,.05); }
.profile-btn:hover { background: rgba(231,60,80,.18); }

/* Mirror navigation: a calm, centered lockup makes both mirrors feel like one system. */
#view-home .app-header { display: grid; grid-template-columns: 36px 1fr 36px; align-items: center; }
.mirror-home-link, .header-actions { width: 36px; height: 36px; display: grid; place-items: center; }
.mirror-home-link { color: #f6d4c7; border: 1px solid rgba(255,232,222,.18); border-radius: 50%; background: rgba(255,255,255,.035); }
.mirror-home-link svg { width: 18px; height: 18px; }
.header-lockup { display: grid; justify-items: center; line-height: 1; pointer-events: none; }
.header-kicker { margin-bottom: 4px; color: rgba(232,178,170,.63); font-size: 7px; font-weight: 700; letter-spacing: .18em; }
.header-brand { color: #fff7f2; font-family: 'Songti SC', 'STSong', serif; font-size: 17px; font-weight: 700; letter-spacing: .2em; transform: translateX(.1em); }
#view-home .header-actions { justify-self: end; }
#view-home .profile-btn { width: 36px; height: 36px; padding: 0; border-radius: 50%; background: rgba(255,255,255,.035); }
#view-home .profile-btn svg { width: 17px; height: 17px; stroke-width: 1.45; }

/* Home hero: the mirror portrait anchors the editorial, while the shard layer
   keeps the interface's red-glass language. */
.home-hero { position: relative; padding: 15px 24px 19px; overflow: hidden; text-align: left; }
.hero-index, .hero-coordinate { display: flex; align-items: center; gap: 8px; color: #c6a4ab; font-size: 9px; font-weight: 700; letter-spacing: .18em; }
.hero-index i { display: block; width: 26px; height: 1px; background: var(--color-primary); }
.hero-mirror { height: 210px; margin: 6px 0 -16px; position: relative; overflow: hidden; border: 1px solid rgba(255,235,228,.22); background: #13090d; transform: perspective(400px) rotateX(2deg); }
.outfit-hero-image { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; filter: saturate(.9) contrast(1.06); }
.hero-mirror::before { content:''; position:absolute; z-index:1; inset:0 auto 0 0; width:39%; background:linear-gradient(90deg,rgba(16,8,12,.98) 0%,rgba(16,8,12,.82) 62%,transparent); pointer-events:none; }
.hero-mirror::after { content: ''; position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg, rgba(16,8,12,.18), rgba(16,8,12,.04) 64%, rgba(16,8,12,.52)); }
.mirror-shard { position: absolute; display: block; border: 1px solid rgba(255,235,228,.25); background: linear-gradient(135deg, rgba(255,255,255,.16), rgba(194,48,65,.045) 45%, rgba(0,0,0,.06)); box-shadow: inset 0 0 35px rgba(255,255,255,.08), 0 15px 30px rgba(0,0,0,.28); }
.shard-a { width: 48%; height: 150px; left: 3%; top: 2px; clip-path: polygon(0 8%, 90% 0, 100% 90%, 11% 100%); transform: rotate(-5deg); }
.shard-b { width: 42%; height: 135px; right: 3%; top: 13px; clip-path: polygon(16% 0, 100% 16%, 84% 100%, 0 78%); transform: rotate(5deg); background: linear-gradient(135deg, rgba(126,34,57,.5), rgba(16,8,12,.08)); }
.shard-c { width: 35%; height: 68px; left: 34%; top: 44px; clip-path: polygon(0 0, 100% 20%, 72% 100%, 8% 79%); }
.mirror-orbit { position: absolute; width: 132px; height: 132px; border: 1px solid rgba(235,81,95,.42); border-radius: 50%; left: 50%; top: 15px; transform: translateX(-50%) rotate(-28deg); box-shadow: 0 0 23px rgba(231,60,80,.14); }
.mirror-orbit::after { content: ''; position: absolute; width: 7px; height: 7px; border-radius: 50%; background: #f6d5ca; right: 6px; top: 20px; box-shadow: 0 0 12px #ed4557; }
.mirror-core { position: absolute; left: 50%; top: 43px; transform: translateX(-50%); color: #fff5f2; font-size: 65px; line-height: 1; text-shadow: 0 0 24px rgba(255,255,255,.65); }
.hero-kicker { position: relative; font-size: 9px; line-height: 1.2; color: #ee6571; font-weight: 700; letter-spacing: .2em; margin: 0 0 5px; }
.hero-title { position: relative; font-family: 'Songti SC', 'STSong', serif; font-size: 35px; letter-spacing: .035em; line-height: 1.12; }
.hero-title span { color: var(--color-primary); -webkit-text-fill-color: var(--color-primary); margin: 0 2px; }
.hero-desc { position: relative; color: #d8bec2; font-size: 14px; margin-top: 9px; letter-spacing: .055em; }
.hero-coordinate { position: relative; justify-content: space-between; margin-top: 15px; border-top: 1px solid rgba(255,255,255,.12); padding-top: 9px; color: rgba(235,207,205,.58); }

.home-upload-zone {
  position: relative; overflow: hidden; margin: 1px 16px 18px; padding: 31px 20px 29px;
  border: 1px solid rgba(255,218,211,.3); border-radius: 4px;
  background: linear-gradient(113deg, rgba(255,255,255,.08), rgba(151,22,46,.15) 50%, rgba(255,255,255,.025)), #190e13;
  box-shadow: 0 22px 45px rgba(0,0,0,.27), inset 0 0 0 1px rgba(255,255,255,.04);
}
.home-upload-zone::before { content: ''; position: absolute; left: -12%; top: -80%; width: 42%; height: 270%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.12), transparent); transform: rotate(25deg); }
.home-upload-zone::after { content: ''; position: absolute; height: 1px; width: 140%; bottom: 17px; left: -20%; background: linear-gradient(90deg, transparent, #e73c50, transparent); transform: rotate(-3deg); opacity: .65; }
.upload-corner { position: absolute; width: 17px; height: 17px; border-color: #f26471; border-style: solid; z-index: 1; }
.upload-corner-a { left: 9px; top: 9px; border-width: 1px 0 0 1px; }.upload-corner-b { right: 9px; bottom: 9px; border-width: 0 1px 1px 0; }
.upload-eyebrow { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 8px; color: #c7a2a7; font-size: 9px; font-weight: 700; letter-spacing: .13em; margin-bottom: 11px; }
.upload-eyebrow span { width: 5px; height: 5px; background: #ee4b5c; border-radius: 50%; box-shadow: 0 0 12px #e73c50; }
.upload-icon { position: relative; z-index: 1; color: #ffe5dc; margin-bottom: 9px; }.upload-icon svg { width: 39px; height: 39px; stroke-width: 1.15; }
.upload-text { position: relative; z-index: 1; font-family: 'Songti SC', 'STSong', serif; font-size: 22px; letter-spacing: .16em; margin-left: .16em; }
.upload-hint { position: relative; z-index: 1; color: #d2b1b5; font-size: 12px; margin-top: 3px; }
.home-upload-zone:active, .home-upload-zone.drag-active { transform: translateY(-2px); border-color: #fb7d85; background: linear-gradient(113deg, rgba(255,255,255,.1), rgba(185,29,55,.28)), #190e13; }
.home-upload-zone.is-compressing { pointer-events: none; opacity: .68; }
.home-upload-zone.is-compressing .upload-hint::after { content: ' · 正在本地压缩…'; color: #ffe5dc; }

.photo-guide { margin: 0 16px 16px; padding: 14px 15px 13px; background: rgba(255,255,255,.027); border: 1px solid rgba(255,255,255,.09); border-left: 2px solid #d83b50; border-radius: 3px; }
.photo-guide-title { color: #f4d8d4; letter-spacing: .08em; }.tip-item { color: #af979d; }.tip-item strong { color: #f5e5e2; }.tip-icon { filter: grayscale(1) sepia(.1); }
.home-features { gap: 0; margin: 0 16px; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.025); }
.feature-item { position: relative; padding: 10px 2px; background: transparent; border-radius: 0; color: #c8adb0; }.feature-item + .feature-item::before { content:''; position:absolute; height: 24px; width:1px; background:rgba(255,255,255,.11); left:0; top:13px; }.feature-icon { font-size: 17px; filter: grayscale(1); }

/* Shared interaction surfaces, upload and report: hard glass panels + signal red. */
.upload-preview, .score-card, .issues-card, .report-card, .detail-card, .inline-ask-card, .profile-card, .profile-stats, .profile-section, .history-item, .formula-card {
  border: 1px solid rgba(255,238,232,.12); border-radius: 5px; background: linear-gradient(140deg, rgba(255,255,255,.06), rgba(255,255,255,.018)); box-shadow: var(--shadow-card);
}
.upload-preview {
  position: relative;
  isolation: isolate;
  border-radius: 3px;
  min-height: 260px;
  padding: 9px;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(255,255,255,.22), rgba(255,255,255,.015) 31%, transparent 32%),
    linear-gradient(145deg, #3a1a22, #120a0e 63%, #30131a);
  box-shadow: 0 19px 42px rgba(0,0,0,.44), 10px 11px 0 -8px rgba(225,53,73,.8);
}
.upload-preview::before,
.upload-preview::after {
  content: ''; position: absolute; z-index: 3; pointer-events: none;
}
.upload-preview::before { inset: 8px; border: 1px solid rgba(255,238,231,.3); }
.upload-preview::after {
  width: 42px; height: 42px; right: 8px; bottom: 8px;
  border-right: 2px solid #f16070; border-bottom: 2px solid #f16070;
}
.upload-preview img {
  position: relative; z-index: 1; width: 100%; min-height: 252px; max-height: 500px;
  display: block; object-fit: contain; background: #10080c;
  filter: contrast(1.03) saturate(.94);
}
.preview-glass { position: absolute; z-index: 2; pointer-events: none; border: 1px solid rgba(255,246,242,.34); background: linear-gradient(130deg, rgba(255,255,255,.21), transparent 42%); mix-blend-mode: screen; }
.preview-glass-a { width: 37%; height: 44%; top: -12%; right: -8%; transform: rotate(24deg); }
.preview-glass-b { width: 28%; height: 33%; left: -10%; bottom: -11%; transform: rotate(-28deg); opacity: .6; }
.preview-scanline { position: absolute; z-index: 2; pointer-events: none; height: 1px; width: 128%; left: -14%; top: 57%; background: linear-gradient(90deg, transparent, rgba(244,86,100,.92), transparent); transform: rotate(-7deg); box-shadow: 0 0 13px rgba(232,60,80,.6); }
.preview-frame-label { position: absolute; z-index: 4; display: flex; align-items: center; justify-content: space-between; gap: 8px; left: 19px; right: 19px; color: rgba(255,247,242,.88); font: 700 8px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .12em; text-shadow: 0 1px 5px rgba(0,0,0,.8); }
.preview-frame-label b { color: #ffacb0; font-weight: 700; }
.preview-frame-top { top: 19px; }.preview-frame-bottom { bottom: 19px; }
.preview-photo-note { display: flex; gap: 10px; align-items: flex-start; margin: -5px 16px 17px; padding: 12px 13px; border-left: 2px solid #e73c50; background: rgba(255,255,255,.035); color: #bca8aa; font-size: 12px; line-height: 1.65; }
.preview-photo-note strong { color: #f7e7e3; font-weight: 700; }.preview-note-mark { width: 7px; height: 7px; margin-top: 6px; flex: 0 0 auto; background: #ef5362; box-shadow: 0 0 12px #e73c50; }
.upload-notice { background: rgba(231,60,80,.08); color: #f3a5ac; border-left: 2px solid #e73c50; border-radius: 2px; }
.form-field label, .card-title, .section-title { color: #f7e7e3; letter-spacing: .06em; }.form-field input[type="text"], .ask-input-bar input { background: rgba(0,0,0,.19); border-radius: 3px; }
.mode-btn, .occasion-btn { background: rgba(255,255,255,.025); border-radius: 3px; }.mode-btn.active, .occasion-btn.active { border-color: #e95060; background: rgba(224,46,65,.13); box-shadow: inset 0 0 18px rgba(231,60,80,.09); }
.btn-primary { border-radius: 3px; letter-spacing: .12em; background: linear-gradient(105deg, #b92037, #ed4d5d 54%, #f29487); box-shadow: 0 11px 24px rgba(178,24,49,.25); }.btn-secondary { border-radius: 3px; background: rgba(255,255,255,.045); }
.score-card { background: linear-gradient(145deg, rgba(101,20,34,.59), rgba(29,14,24,.93)); }.score-card::after { content:'MIRROR REPORT'; position:absolute; right:-4px; bottom:7px; font-size:9px; letter-spacing:.15em; color:rgba(255,235,228,.27); transform:rotate(-90deg); transform-origin:right bottom; }
.result-evidence { position:absolute; z-index:3; top:16px; right:17px; width:70px; padding:0; overflow:hidden; border:1px solid rgba(255,242,235,.4); background:#1c1115; color:#ffece6; cursor:pointer; box-shadow:0 9px 20px rgba(0,0,0,.28); }
.result-evidence img { display:block; width:100%; height:82px; object-fit:cover; }
.result-evidence span { display:block; padding:6px 3px 7px; color:#f7d6cf; font-size:9px; line-height:1; letter-spacing:.12em; }
.result-evidence:active { transform:scale(.96); }
.evidence-overlay { position:fixed; z-index:1000; inset:0; display:grid; place-items:center; padding:24px; background:rgba(5,2,4,.9); backdrop-filter:blur(12px); }
.evidence-full-frame { width:min(100%,430px); max-height:calc(100dvh - 48px); padding:9px; background:linear-gradient(145deg,#39131d,#10090c); border:1px solid rgba(255,229,221,.35); box-shadow:0 22px 65px rgba(0,0,0,.6); }
.evidence-full-frame img { display:block; width:100%; max-height:calc(100dvh - 114px); object-fit:contain; background:#080608; }
.evidence-full-frame p { margin:10px 4px 4px; color:#f4dcd7; font-size:11px; letter-spacing:.18em; text-align:center; }
.evidence-close { position:fixed; z-index:2; top:18px; right:20px; width:40px; height:40px; border:1px solid rgba(255,240,233,.38); border-radius:50%; background:rgba(19,8,12,.8); color:#fff4ef; font-size:27px; line-height:1; cursor:pointer; }
.score-number { background: linear-gradient(135deg, #fff3e6, #ec6873 72%); -webkit-background-clip:text; }.issue-num { background: linear-gradient(135deg, #a9162d, #ef5060); }.result-actions .btn-action { border-radius: 3px; border-color: rgba(255,255,255,.13); background: rgba(255,255,255,.035); }.result-actions .btn-action:active { border-color: #e94c5c; }
.loading-container { min-height:calc(100dvh - 72px); padding:48px 30px 56px; background:radial-gradient(circle at 50% 20%, rgba(187,31,56,.24), transparent 27%), linear-gradient(145deg,#080608,#18090f 54%,#090708); position:relative; overflow:hidden; }
.loading-container::before { content:''; position:absolute; width:560px; height:560px; border:1px solid rgba(255,255,255,.11); border-radius:50%; top:-260px; left:50%; transform:translateX(-50%); box-shadow:0 0 0 38px rgba(202,44,60,.045),0 0 0 92px rgba(202,44,60,.025); }
.loading-eyebrow { position:relative; z-index:1; margin-bottom:30px; color:#d98d98; font-size:10px; font-weight:700; letter-spacing:.24em; }
.loading-mirror { position:relative; z-index:1; margin-bottom:33px; }
.mirror-frame { width:166px; height:166px; overflow:visible; border-radius:50%; transform:none; border:1px solid rgba(255,222,217,.56); background:radial-gradient(circle at 42% 35%,rgba(255,244,236,.28),rgba(100,15,33,.5) 40%,rgba(10,5,8,.92) 72%); box-shadow:0 0 0 12px rgba(245,77,95,.055),0 0 0 42px rgba(245,77,95,.025),inset 0 0 34px rgba(255,224,217,.13),0 24px 50px rgba(0,0,0,.42); }
.mirror-frame::before { content:''; position:absolute; inset:11px; border:1px solid rgba(255,238,229,.24); border-radius:50%; box-shadow:inset 0 0 22px rgba(247,75,94,.2); }
.mirror-sigil { position:absolute; z-index:2; left:50%; top:50%; transform:translate(-50%,-50%); color:#ffddd3; font-family:'Songti SC','STSong',serif; font-size:17px; letter-spacing:.18em; text-shadow:0 0 15px rgba(255,234,228,.72); }
.scan-orbit { position:absolute; left:50%; top:50%; border:1px solid rgba(237,80,96,.65); border-radius:50%; transform:translate(-50%,-50%) rotate(-25deg); }.scan-orbit-a{width:215px;height:70px;animation:orbitSpin 5.5s linear infinite}.scan-orbit-b{width:145px;height:240px;border-color:rgba(255,227,218,.25);animation:orbitSpin 7.2s linear infinite reverse}
.scan-beam { position:absolute; z-index:2; left:8%; right:8%; height:1px; top:17%; background:linear-gradient(90deg,transparent,#ff5d70,transparent); box-shadow:0 0 14px #e94056; animation:beamScan 2.2s ease-in-out infinite; }.mirror-shard-loading { position:absolute; z-index:3; display:block; border:1px solid rgba(255,235,228,.4); background:linear-gradient(135deg,rgba(255,255,255,.15),rgba(154,24,47,.1)); }.shard-load-a{width:58px;height:39px;top:-17px;right:5px;transform:rotate(22deg);clip-path:polygon(0 0,100% 18%,74% 100%,8% 78%)}.shard-load-b{width:48px;height:63px;bottom:-19px;left:4px;transform:rotate(-28deg);clip-path:polygon(18% 0,100% 12%,83% 100%,0 76%)}
@keyframes orbitSpin { to { transform:translate(-50%,-50%) rotate(335deg); } } @keyframes beamScan { 0%,100%{top:17%;opacity:.4}50%{top:79%;opacity:1} }
.loading-title { position:relative; z-index:1; font-family:'Songti SC','STSong',serif; font-size:33px; line-height:1.18; letter-spacing:.1em; margin:0 0 12px; }
.loading-subtitle { position:relative; z-index:1; color:rgba(255,241,235,.57); font-size:12px; letter-spacing:.09em; margin:0 0 34px; }
.loading-steps { position:relative; z-index:1; width:min(100%,330px); gap:0; margin-bottom:27px; border-top:1px solid rgba(255,255,255,.12); }
.loading-step { width:100%; padding:15px 0; border-radius:0; background:transparent; border-bottom:1px solid rgba(255,255,255,.12); opacity:.36; justify-content:flex-start; gap:14px; text-align:left; }
.loading-step.active { opacity:1; border-color:rgba(238,65,87,.8); box-shadow:inset 3px 0 #ed4054; padding-left:12px; }
.loading-step.done { opacity:.75; border-color:rgba(255,255,255,.18); }
.step-icon { width:26px; font-size:10px; letter-spacing:.11em; font-weight:700; color:#f15a6b; }
.step-text { font-size:14px; letter-spacing:.08em; color:#fff7f4; }
.loading-timer { position:relative; z-index:1; color:#f07d8c; font-size:12px; letter-spacing:.12em; margin-bottom:7px; }
.loading-hint { position:relative; z-index:1; color:rgba(255,241,235,.46); font-size:11px; letter-spacing:.05em; }

/* Motion system — every transition is short, interruptible, and respects motion preference. */
.view-enter { animation: mirrorEnter .58s cubic-bezier(.22,.8,.24,1) both; }
@keyframes mirrorEnter { from { opacity:0; transform:translateY(14px) scale(.985); filter:blur(5px); } to { opacity:1; transform:none; filter:none; } }
#view-upload.photo-entered .upload-preview { animation: photoIntoMirror .76s cubic-bezier(.17,.84,.33,1) both; }
#view-upload.photo-entered .preview-scanline { animation: scanProof 1.35s cubic-bezier(.22,.8,.24,1) .18s both; }
@keyframes photoIntoMirror { from { opacity:0; transform:scale(.91) rotate(-1.2deg); clip-path:inset(44% 45% 44% 45%); } to { opacity:1; transform:none; clip-path:inset(0); } }
@keyframes scanProof { 0% { opacity:0; transform:translateY(-50%); } 24% { opacity:1; } 100% { opacity:0; transform:translateY(720px); } }
#view-result.view-enter .score-card { animation: scoreReveal .8s cubic-bezier(.18,.88,.3,1) .08s both; }
#view-result.view-enter .formula-card,#view-result.view-enter .issues-card,#view-result.view-enter .report-card,#view-result.view-enter .detail-card,#view-result.view-enter .inline-ask-card,#view-result.view-enter .result-actions { animation: cardRise .55s cubic-bezier(.2,.8,.24,1) both; }
#view-result.view-enter .formula-card { animation-delay:.14s; } #view-result.view-enter .issues-card { animation-delay:.19s; } #view-result.view-enter .report-card { animation-delay:.25s; } #view-result.view-enter .detail-card { animation-delay:.31s; } #view-result.view-enter .inline-ask-card { animation-delay:.36s; } #view-result.view-enter .result-actions { animation-delay:.41s; }
@keyframes scoreReveal { from { opacity:0; transform:scale(.78); filter:blur(8px); } 65% { transform:scale(1.025); } to { opacity:1; transform:scale(1); filter:none; } }
@keyframes cardRise { from { opacity:0; transform:translateY(18px); } to { opacity:1; transform:none; } }
.report-segment { transition:transform .26s ease,box-shadow .26s ease,border-color .26s ease; transform-origin:center top; }
.report-segment:active { transform:scale(.985) rotateX(1deg); }
.btn-action,.mode-switch-btn,.detail-toggle { transition:transform .2s ease,background .2s ease,border-color .2s ease; }
.btn-action:active,.mode-switch-btn:active,.detail-toggle:active { transform:scale(.97); }
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; } }

@media (min-width: 481px) { body { background-color: #080508; } #app { box-shadow: 0 0 70px rgba(0,0,0,.5); } }

/* Result themes — A: black lacquer editorial; C: contemporary art gallery. */
#view-result { --result-paper:#130b0f; --result-surface:#1a1116; --result-ink:#fff4ef; --result-muted:#c7afb4; --result-line:rgba(255,237,230,.16); --result-accent:#ef5362; }
.result-header-actions { display:flex; align-items:center; gap:8px; }
.result-style-toggle { display:flex; align-items:center; gap:6px; height:32px; padding:0 9px; border:1px solid var(--result-line); border-radius:0; background:rgba(255,255,255,.035); color:var(--result-ink); font-size:10px; letter-spacing:.12em; cursor:pointer; }
.result-style-toggle:active { transform:scale(.96); }.theme-dot{width:7px;height:7px;background:var(--result-accent);box-shadow:0 0 10px var(--result-accent);}
#view-result .app-header { background:linear-gradient(180deg,rgba(20,9,14,.98),rgba(20,9,14,.8)); border-bottom:1px solid var(--result-line); }
#view-result .header-title { font-family:'Songti SC','STSong',serif; letter-spacing:.16em; }
#view-result .score-card,#view-result .formula-card,#view-result .issues-card,#view-result .report-card,#view-result .detail-card,#view-result .inline-ask-card { margin-left:18px; margin-right:18px; border-radius:0; border-color:var(--result-line); background:var(--result-surface); color:var(--result-ink); }
#view-result .score-card { min-height:384px; display:flex; flex-direction:column; justify-content:flex-end; align-items:flex-start; padding:30px 24px 28px; text-align:left; background:linear-gradient(140deg,rgba(97,20,35,.9),rgba(18,11,15,.98)); }
#view-result .score-card::before { content:'OUTFIT REVIEW / 01'; left:24px; top:22px; color:#f2a1a9; }
#view-result .score-display { justify-content:flex-start; margin:0 0 5px; position:relative; z-index:1; }
#view-result .score-number { font-family:Arial,sans-serif; font-size:76px; letter-spacing:0; }
#view-result .score-label { position:relative; z-index:1; color:var(--result-ink); font-family:'Songti SC','STSong',serif; font-size:25px; letter-spacing:.06em; }
#view-result .style-title-badge { position:relative; z-index:1; width:100%; margin:18px 0 14px; padding:13px 15px; border:1px solid rgba(244,126,137,.38); border-radius:0; background:rgba(12,5,8,.19); }
#view-result .style-title-name { color:#ffb0a9; font-size:19px; font-family:'Songti SC','STSong',serif; }
#view-result .score-meta { position:relative; z-index:1; justify-content:flex-start; flex-wrap:wrap; gap:5px; color:#e4c6c2; }
#view-result .style-tags-container { position:relative; z-index:1; margin:15px 0 0; }
#view-result .style-tags { justify-content:flex-start; }
#view-result .result-evidence { top:23px; right:23px; width:122px; padding:5px; border-color:rgba(255,240,231,.45); background:#10090c; }
#view-result .result-evidence img { height:auto; aspect-ratio:4 / 3; object-fit:cover; object-position:center; }
#view-result .result-evidence span { font-size:9px; text-align:left; padding:8px 2px 3px; }
#view-result .formula-card,#view-result .issues-card,#view-result .report-card,#view-result .detail-card,#view-result .inline-ask-card { box-shadow:none; }
#view-result .card-title { font-family:'Songti SC','STSong',serif; color:var(--result-ink); font-size:21px; letter-spacing:.04em; }
#view-result .card-title small { color:var(--result-accent); font-family:Arial,sans-serif; letter-spacing:.12em; font-size:11px; margin-right:8px; }
#view-result .report-segment { border-radius:0; background:transparent; border-left:2px solid rgba(239,83,98,.6); box-shadow:none; }
#view-result .segment-title { color:#f7d7d1; }.result-actions { margin:18px; gap:8px; }.result-actions .btn-action { border-radius:0; }

/* C — quiet contemporary gallery: warm paper, copper rules, generous calm. */
#view-result[data-theme="gallery"] { --result-paper:#f2ede5; --result-surface:#fffcf7; --result-ink:#2f2421; --result-muted:#88766e; --result-line:#d9c8bb; --result-accent:#9c4a3f; background:radial-gradient(circle at 75% 5%,#e8d4c9,transparent 31%),#f2ede5; }
#view-result[data-theme="gallery"] .app-header { background:rgba(250,246,240,.92); border-bottom-color:#d9c8bb; color:#2f2421; }
#view-result[data-theme="gallery"] .icon-btn { color:#4a302a; border-color:#d7c7bc; }
#view-result[data-theme="gallery"] .score-card { min-height:440px; padding:27px 22px 28px; background:linear-gradient(135deg,#fffdf8 0%,#ecddd1 100%); border-color:#cdb6a7; }
#view-result[data-theme="gallery"] .score-card::before { color:#8e5145; }
#view-result[data-theme="gallery"] .score-number { background:linear-gradient(135deg,#813c35,#bc765c); -webkit-background-clip:text; }
#view-result[data-theme="gallery"] .score-label { color:#422c27; }
#view-result[data-theme="gallery"] .style-title-badge { border-color:#cfb9aa; background:rgba(255,255,255,.48); }
#view-result[data-theme="gallery"] .style-title-name { color:#834438; }
#view-result[data-theme="gallery"] .score-meta,#view-result[data-theme="gallery"] .meta-item { color:#765f57; }
#view-result[data-theme="gallery"] .result-evidence { width:calc(100% - 44px); top:74px; right:22px; display:grid; grid-template-columns:138px 1fr; align-items:stretch; padding:0; background:#fffdf8; border-color:#c7ad9d; }
#view-result[data-theme="gallery"] .result-evidence img { width:138px; height:104px; aspect-ratio:auto; }
#view-result[data-theme="gallery"] .result-evidence span { align-self:end; padding:0 13px 13px; color:#6c463c; font-size:11px; letter-spacing:.15em; }
#view-result[data-theme="gallery"] .score-display { margin-top:142px; }
#view-result[data-theme="gallery"] .formula-card,#view-result[data-theme="gallery"] .issues-card,#view-result[data-theme="gallery"] .report-card,#view-result[data-theme="gallery"] .detail-card,#view-result[data-theme="gallery"] .inline-ask-card { background:#fffcf7; border-color:#d9c8bb; color:#2f2421; }
#view-result[data-theme="gallery"] .card-title,#view-result[data-theme="gallery"] .segment-title { color:#382823; }
#view-result[data-theme="gallery"] .report-segment { border-left-color:#a85c4d; }
#view-result[data-theme="gallery"] .result-actions .btn-action { color:#3d2d29; border-color:#cdbbae; background:#fffcf7; }
#view-result[data-theme="gallery"] .result-style-toggle { background:#fffaf4; }
#view-result[data-theme="gallery"] .theme-dot { background:#a95d4c; box-shadow:none; }

@media (max-width:390px) { #view-result .result-evidence { width:106px; } #view-result[data-theme="gallery"] .result-evidence { width:calc(100% - 44px); } }

/* Rebuilt result hierarchy: photo first, one reading axis, no dashboard-chip noise. */
#view-result .style-tags-container { display:none !important; }
#view-result .trend-chip { padding:0; border:0; background:none; color:inherit; font-size:11px !important; letter-spacing:.12em; }
#view-result .meta-dot { display:none; }
#view-result .score-meta { gap:0; }
#view-result .score-meta .meta-item:not([hidden]) { display:flex; align-items:center; }
#view-result .score-meta .meta-item:not([hidden]) + .meta-item:not([hidden])::before { content:'/'; margin:0 8px; opacity:.45; }

/* A — image as a proper editorial spread, never a skinny thumbnail. */
#view-result[data-theme="lacquer"] .score-card { display:block; min-height:414px; padding:31px 52% 27px 25px; }
#view-result[data-theme="lacquer"] .result-evidence { top:0; right:0; width:47%; height:100%; padding:0; border:0; border-left:1px solid rgba(255,235,227,.22); background:#090608; box-shadow:none; }
#view-result[data-theme="lacquer"] .result-evidence::after { content:''; position:absolute; inset:0; background:linear-gradient(180deg,transparent 54%,rgba(4,2,3,.72)); pointer-events:none; }
#view-result[data-theme="lacquer"] .result-evidence img { width:100%; height:100%; aspect-ratio:auto; object-fit:cover; object-position:center top; filter:saturate(.84) contrast(1.03); }
#view-result[data-theme="lacquer"] .result-evidence span { position:absolute; z-index:1; left:15px; bottom:14px; padding:0; color:#fff3ed; font-size:10px; letter-spacing:.19em; }
#view-result[data-theme="lacquer"] .score-display { margin-top:52px; }
#view-result[data-theme="lacquer"] .score-number { font-size:72px; }
#view-result[data-theme="lacquer"] .score-label { max-width:240px; font-size:24px; line-height:1.2; }
#view-result[data-theme="lacquer"] .style-title-badge { width:auto; margin:22px 0 14px; padding:0; border:0; background:transparent; align-items:flex-start; }
#view-result[data-theme="lacquer"] .style-title-name { font-size:19px; color:#f3a75f; }
#view-result[data-theme="lacquer"] .style-title-tagline { display:none; }
#view-result[data-theme="lacquer"] .score-meta { max-width:245px; font-size:11px; line-height:1.7; }

/* Sections become editorial sheets rather than equal-weight cards. */
#view-result .formula-card,#view-result .issues-card,#view-result .report-card,#view-result .detail-card,#view-result .inline-ask-card { padding:26px 24px; margin-top:16px; margin-bottom:0; }
#view-result .formula-card { border-top:2px solid var(--result-accent); }
#view-result .formula-main { font-family:'Songti SC','STSong',serif; font-size:28px; line-height:1.25; letter-spacing:.03em; }
#view-result .formula-note { margin-top:13px; font-size:15px; line-height:1.8; color:var(--result-muted); }
#view-result .issues-list { gap:0; }
#view-result .issue-item { min-height:54px; gap:15px; align-items:center; padding:11px 0; border-top:1px solid var(--result-line); font-size:16px; line-height:1.5; }
#view-result .issue-item:first-child { border-top:0; }
#view-result .issue-num { width:25px; height:25px; border-radius:0; background:transparent; color:var(--result-accent); border:1px solid currentColor; font-family:Georgia,serif; }
#view-result .report-header { align-items:flex-start; margin-bottom:23px; }
#view-result .mode-switcher { gap:0; border:1px solid var(--result-line); }
#view-result .mode-switch-btn { padding:7px 8px; border:0; border-right:1px solid var(--result-line); border-radius:0; background:transparent; font-size:10px; }
#view-result .mode-switch-btn:last-child { border-right:0; }
#view-result .mode-switch-btn.active { background:var(--result-accent); color:#fff; }
#view-result .switch-mark { display:none; }
#view-result .report-segments { gap:0; }
#view-result .report-segment { padding:22px 0 22px 18px; border-left:1px solid var(--result-accent); border-bottom:1px solid var(--result-line); }
#view-result .report-segment:last-child { border-bottom:0; }
#view-result .report-segment .seg-title { margin-bottom:10px; font-family:'Songti SC','STSong',serif; font-size:18px; letter-spacing:.05em; }
#view-result .report-segment .seg-content { font-size:15px; line-height:1.9; color:var(--result-muted); }
#view-result .detail-card { padding:0; }.detail-toggle { padding:20px 24px; font-family:'Songti SC','STSong',serif; font-size:17px; }.detail-content { padding:0 24px 24px; }
#view-result .inline-ask-card { padding:0; }.inline-ask-card .card-title { padding:23px 24px 19px; margin:0; border-bottom:1px solid var(--result-line); }.ask-messages { padding:0 20px; }.ask-input-bar { padding:16px 18px; border-top:1px solid var(--result-line); }.ask-input-bar input { border-radius:0; }.btn-send { border-radius:0; }
#view-result .result-actions { margin:16px 18px 32px; }.result-actions .btn-action { min-height:86px; justify-content:center; gap:10px; }
#view-result .action-icon { font-family:Georgia,serif; font-size:22px; color:var(--result-accent); }.btn-action span:last-child { font-size:13px; letter-spacing:.08em; }

/* C — a true gallery composition: art print at top, score and copy underneath. */
#view-result[data-theme="gallery"] .score-card { display:flex; min-height:620px; padding:0 24px 29px; justify-content:flex-end; align-items:flex-start; }
#view-result[data-theme="gallery"] .score-card::before { top:23px; left:24px; }
#view-result[data-theme="gallery"] .result-evidence { position:absolute; top:62px; right:24px; width:calc(100% - 48px); height:252px; display:block; border:1px solid #c8ae9e; background:#fffdf9; }
#view-result[data-theme="gallery"] .result-evidence img { width:100%; height:100%; object-fit:cover; object-position:center top; }
#view-result[data-theme="gallery"] .result-evidence::after { content:''; position:absolute; inset:0; background:linear-gradient(180deg,transparent 67%,rgba(43,28,24,.5)); pointer-events:none; }
#view-result[data-theme="gallery"] .result-evidence span { position:absolute; z-index:1; left:14px; bottom:12px; padding:0; color:#fffaf5; text-shadow:0 1px 5px rgba(0,0,0,.35); }
#view-result[data-theme="gallery"] .score-display { margin:0 0 5px; }.score-card .score-max { color:var(--result-muted); }
#view-result[data-theme="gallery"] .score-label { font-size:28px; }.score-card .style-title-badge { align-items:flex-start; }.score-card .style-title-tagline { color:var(--result-muted); }
#view-result[data-theme="gallery"] .style-title-badge { width:100%; margin:16px 0 12px; padding:0; border:0; background:transparent; }.style-title-tagline { line-height:1.5; }
#view-result[data-theme="gallery"] .score-meta { font-size:12px; }
#view-result[data-theme="gallery"] .formula-card { border-top-color:#9c4a3f; }
#view-result[data-theme="gallery"] .report-segment { border-left-color:#9c4a3f; }

@media (max-width:390px) { #view-result[data-theme="lacquer"] .score-card { padding-right:50%; } #view-result[data-theme="lacquer"] .result-evidence { width:45%; } #view-result[data-theme="gallery"] .result-evidence { height:225px; } }

/* Outfit Mirror / Black Lacquer Editorial — shared full-product art direction. */
#view-home,#view-upload,#view-result,#view-profile { background:
  radial-gradient(ellipse 100% 44% at 80% -8%,rgba(151,24,47,.23),transparent 68%),
  linear-gradient(160deg,#080608 0%,#16080f 48%,#070506 100%); color:#f8eee9; }
#view-home .app-header,#view-upload .app-header,#view-profile .app-header { background:rgba(10,6,8,.88); border-bottom:1px solid rgba(255,232,224,.15); }
#view-home .header-kicker,#view-upload .header-title,#view-profile .header-title { color:#dca0a8; letter-spacing:.2em; }
#view-home .header-brand { font-family:'Songti SC','STSong',serif; font-size:26px; letter-spacing:.13em; }
.mirror-home-link,.icon-btn { border-radius:0; border-color:rgba(255,232,224,.25); color:#f9e8e1; background:rgba(255,255,255,.02); }
.home-hero { margin:0 18px; padding:26px 0 19px; border-bottom:1px solid rgba(255,232,224,.14); }
.hero-index,.hero-kicker,.hero-coordinate { color:#da8793; font-size:10px; letter-spacing:.24em; }.hero-index i { background:#ef5362; }
.hero-title { font-family:'Songti SC','STSong',serif; font-size:42px; letter-spacing:.05em; }.hero-desc { color:#d6b9b9; }
.hero-mirror { border-radius:0; border:1px solid rgba(255,237,229,.23); box-shadow:none; }
.home-upload-zone { margin:20px 18px 0; min-height:205px; border-radius:0; border-color:rgba(255,225,216,.34); background:linear-gradient(135deg,rgba(106,18,34,.43),rgba(18,9,13,.73)); }
.upload-eyebrow,.upload-hint { color:#d3a9ae; }.upload-text { font-family:'Songti SC','STSong',serif; letter-spacing:.12em; }.upload-icon { border-radius:0; color:#ff6a79; }
.photo-guide { margin:14px 18px; padding:20px 18px; border-radius:0; border:1px solid rgba(255,232,224,.16); background:rgba(255,255,255,.025); }
.photo-guide-title { font-family:'Songti SC','STSong',serif; color:#f9e8e1; }.photo-guide-title small { margin-right:9px; color:#ed5264; font-family:Arial,sans-serif; font-size:11px; letter-spacing:.15em; }.tip-icon { color:#ed5264; font-family:Georgia,serif; font-size:11px; }.tip-item { color:#cdb8b9; }.tip-item strong { color:#f9e8e1; }
.home-features { margin:20px 18px 36px; border:1px solid rgba(255,232,224,.16); background:transparent; }.feature-item { color:#cdb8b9; }.feature-item + .feature-item { border-left-color:rgba(255,232,224,.16); }.feature-icon { color:#ee596b; font-family:Georgia,serif; font-size:15px; }

/* Confirmation screen reads like an editorial contact sheet. */
#view-upload .upload-preview { margin:22px 18px 0; border-radius:0; background:#0b0809; }.preview-photo-note,#view-upload .upload-notice { margin-left:18px; margin-right:18px; border-radius:0; background:rgba(255,255,255,.025); }.preview-photo-note { border-left-color:#ef5362; }.preview-frame-label { font-size:10px; letter-spacing:.17em; }
#view-upload .upload-form { margin:22px 18px 0; padding:0; background:transparent; }.form-field { border-top:1px solid rgba(255,232,224,.15); padding-top:20px; }.form-field label { color:#f8eee9; letter-spacing:.15em; font-size:11px; }.form-field input[type="text"] { border-radius:0; border-color:rgba(255,232,224,.2); color:#fff; }.mode-selector,.occasion-selector { gap:0; border:1px solid rgba(255,232,224,.18); }.mode-btn,.occasion-btn { border:0!important; border-right:1px solid rgba(255,232,224,.18)!important; border-radius:0!important; background:transparent!important; }.mode-btn:last-child,.occasion-btn:last-child { border-right:0!important; }.mode-btn.active,.occasion-btn.active { background:rgba(220,47,68,.18)!important; box-shadow:inset 0 -2px #ef5362!important; }.upload-actions { margin:25px 18px 34px; }.btn-primary,.btn-secondary { border-radius:0; }

/* Deep analysis: a quiet dossier, not a stack of app widgets. */
#view-result .detail-card { margin-top:16px; }.radar-container { padding:18px 0 24px; border-bottom:1px solid var(--result-line); }.radar-chart { width:min(100%,310px); }.detail-content { gap:0; }.detail-item { padding:23px 0; border-radius:0; background:transparent; border-bottom:1px solid var(--result-line); }.detail-item:last-child { border-bottom:0; }.detail-item .dt-title { color:#f2c19b; font-family:'Songti SC','STSong',serif; font-size:18px; letter-spacing:.06em; }.detail-item .dt-body { color:#cbb8b9; font-size:15px; line-height:1.9; }

/* Profile is a private editorial archive, visually aligned with the report. */
#view-profile .profile-card,#view-profile .profile-stats,#view-profile .profile-section { margin-left:18px; margin-right:18px; border-radius:0; border:1px solid rgba(255,232,224,.16); background:rgba(255,255,255,.025); box-shadow:none; }.profile-avatar { border-radius:0; background:rgba(219,60,77,.14); }.profile-name,.section-title { font-family:'Songti SC','STSong',serif; color:#f8eee9; }.profile-membership,.stat-label { color:#c9afb0; }.stat-value { color:#ee6472; }.history-item { border-radius:0; background:transparent; border-color:rgba(255,232,224,.14); }

/* Mobile editorial scale. */
@media (max-width:420px) { .hero-title { font-size:37px; } #view-result[data-theme="lacquer"] .score-card { min-height:398px; } #view-result .formula-main { font-size:25px; } }

/* Profile recommendations follow the same editorial language, without emoji or utility chips. */
#view-home .recommendation-section { margin:28px 18px 40px; border:1px solid rgba(255,232,224,.18); background:rgba(255,255,255,.02); }.recommendation-section summary { display:flex; align-items:center; justify-content:space-between; padding:19px 18px; list-style:none; cursor:pointer; }.recommendation-section summary::-webkit-details-marker { display:none; }.recommendation-section summary span { display:flex; flex-direction:column; gap:7px; color:#f8eee9; font-family:'Songti SC','STSong',serif; font-size:21px; }.recommendation-section summary small { color:#d77785; font-family:Arial,sans-serif; font-size:9px; letter-spacing:.22em; }.recommendation-section summary b { color:#ef6674; font-size:11px; font-weight:500; letter-spacing:.14em; }.recommendation-section[open] summary { border-bottom:1px solid rgba(255,232,224,.13); }.recommendation-section[open] summary b { font-size:0; }.recommendation-section[open] summary b::after { content:'收起'; font-size:11px; }.recommendation-cards { gap:12px; padding:14px; }.rec-card { border-radius:0; border:1px solid rgba(255,232,224,.18); background:rgba(255,255,255,.025); box-shadow:none; }.rec-card-warning { border-color:rgba(239,83,98,.52); }.rec-card-header { padding:18px 18px 13px; border-bottom:1px solid rgba(255,232,224,.13); }.rec-card-icon { width:27px; color:#ef596a; font-family:Georgia,serif; font-size:14px; }.rec-card-title { color:#f8eee9; font-family:'Songti SC','STSong',serif; font-size:19px; }.rec-card-body { padding:16px 18px 19px; }.rec-label { border-radius:0; }.rec-label-do { color:#f3d5a7; background:rgba(239,186,111,.12); }.rec-label-dont { color:#ff7584; background:rgba(239,83,98,.13); }.rec-card li,.rec-tip { color:#cbb7b8; line-height:1.75; }.avoid-color-chip { border-radius:0; border-color:rgba(239,83,98,.45); }.rec-stat-value { color:#f3bba0; font-family:'Songti SC','STSong',serif; }

/* === RESULT PAGE REBUILD / BLACK LACQUER EDITORIAL ===
   One cover image, one verdict, then an intentionally paced reading sequence. */
#view-result { background:#070506; padding-bottom:42px; }
#view-result::before { content:''; position:fixed; z-index:0; inset:0; pointer-events:none; background:radial-gradient(ellipse 80% 36% at 80% 0%,rgba(118,18,40,.24),transparent 68%),linear-gradient(90deg,rgba(255,255,255,.022) 1px,transparent 1px); background-size:auto,80px 80px; opacity:.75; }
#view-result > * { position:relative; z-index:1; }
#view-result .app-header { min-height:74px; padding-left:28px; padding-right:28px; background:rgba(7,5,6,.92); border-bottom:1px solid rgba(255,238,230,.16); }
#view-result .header-title { font-size:24px; font-weight:500; letter-spacing:.24em; transform:translateX(.12em); }
#view-result .icon-btn { width:42px; height:42px; border-radius:50%; }

.editorial-cover { position:relative; min-height:530px; margin:26px 20px 0; overflow:hidden; border:1px solid rgba(255,236,229,.32); background:linear-gradient(140deg,#4c0e20 0%,#230d15 47%,#090607 100%); }
.editorial-cover::before { content:''; position:absolute; z-index:0; width:490px; height:490px; left:-283px; bottom:-328px; border:1px solid rgba(255,222,214,.18); border-radius:50%; box-shadow:0 0 0 33px rgba(227,55,78,.06),0 0 0 74px rgba(227,55,78,.035); }
.cover-signal { position:absolute; z-index:4; top:20px; left:22px; right:22px; display:flex; justify-content:space-between; color:#efadb0; font-family:Arial,sans-serif; font-size:10px; font-weight:700; letter-spacing:.19em; }.cover-signal b{color:#ff566c;font-family:Georgia,serif;font-size:13px;}
.result-evidence { position:absolute; z-index:1; inset:0 0 0 47%; width:53%; padding:0; overflow:hidden; border:0; background:#090708; cursor:zoom-in; box-shadow:none; }
.result-evidence::before { content:''; position:absolute; z-index:1; inset:0; background:linear-gradient(90deg,rgba(16,5,9,.18),transparent 26%,rgba(9,4,6,.16)),linear-gradient(0deg,rgba(6,3,4,.76),transparent 37%); pointer-events:none; }
.result-evidence img { width:100%; height:100%; object-fit:cover; object-position:center top; filter:saturate(.82) contrast(1.04); }
.result-evidence span { position:absolute; z-index:2; left:16px; right:10px; bottom:18px; padding:0; color:#fff1eb; font-size:9px; letter-spacing:.14em; line-height:1.4; text-align:left; }
.cover-copy { position:absolute; z-index:3; left:23px; bottom:31px; width:42%; min-width:0; }
.score-display { justify-content:flex-start; gap:7px; margin:0; }.score-number { font-family:Arial,Helvetica,sans-serif; font-size:82px!important; font-weight:700; letter-spacing:0; line-height:.86; background:linear-gradient(135deg,#fff1e8,#ee5c70 78%)!important; -webkit-background-clip:text; }.score-max { color:#e2afb0!important; font-size:22px!important; }
.score-label { margin-top:18px; color:#fff9f5!important; font-family:'Songti SC','STSong',serif; font-size:29px!important; line-height:1.16; letter-spacing:.02em; }
.style-title-badge { align-items:flex-start!important; width:auto!important; margin:20px 0 14px!important; padding:0!important; border:0!important; background:transparent!important; }.style-title-name { color:#f6a556!important; font-family:'Songti SC','STSong',serif!important; font-size:20px!important; line-height:1.2; -webkit-text-fill-color:initial!important; }.style-title-tagline { display:none; }
.score-meta { justify-content:flex-start!important; gap:0!important; color:#e1c8c4!important; font-size:11px!important; line-height:1.75!important; }.score-meta .meta-item:not([hidden]) + .meta-item:not([hidden])::before { content:'/'; margin:0 6px; opacity:.4; }.meta-dot,.style-tags-container { display:none!important; }
.cover-geometry i { position:absolute; z-index:4; display:block; pointer-events:none; border:1px solid rgba(255,235,229,.4); }.cover-geometry i:nth-child(1) { width:178px; height:112px; top:68px; left:31%; transform:rotate(27deg); }.cover-geometry i:nth-child(2) { width:310px; height:1px; top:51%; left:17%; border-color:#ea3f55; transform:rotate(-28deg); box-shadow:0 0 16px rgba(234,63,85,.3); }.cover-geometry i:nth-child(3) { width:85px; height:85px; right:34px; top:30px; border-radius:50%; border-color:rgba(255,80,99,.52); }

/* The page changes rhythm after the cover: transparent editor sheets, never app cards. */
#view-result .formula-card,#view-result .issues-card,#view-result .report-card,#view-result .detail-card,#view-result .inline-ask-card { margin:0 20px; padding:35px 25px; border:0; border-top:1px solid rgba(255,236,229,.22); border-radius:0; background:transparent; box-shadow:none; }
#view-result .formula-card { margin-top:23px; border-top:3px solid #ef5062; background:linear-gradient(90deg,rgba(104,22,37,.24),transparent 76%); }
#view-result .card-title { margin:0 0 22px; color:#fff7f1; font-family:'Songti SC','STSong',serif; font-size:29px!important; font-weight:500; letter-spacing:.04em; }.card-title small { color:#ef5768!important; font-family:Arial,sans-serif!important; font-size:12px!important; letter-spacing:.16em!important; vertical-align:middle; }
#view-result .formula-main { color:#ffca64; font-family:'Songti SC','STSong',serif; font-size:35px!important; line-height:1.2; letter-spacing:.02em; }.formula-note { max-width:590px; color:#cdb8b8; font-size:16px!important; line-height:1.85!important; }
#view-result .issues-card { padding-bottom:22px; }.issues-list { gap:0!important; }.issue-item { gap:17px!important; min-height:68px; padding:15px 0!important; border-top:1px solid rgba(255,236,229,.13); color:#f4e5df; font-size:17px!important; line-height:1.65!important; }.issue-num { width:28px!important; height:28px!important; flex:0 0 28px; border:1px solid #ef5768; border-radius:50%!important; background:transparent!important; color:#ff6a78!important; font-family:Georgia,serif; }
#view-result .report-card { padding-top:31px; }.report-header { margin-bottom:26px!important; }.mode-switcher { border:1px solid rgba(255,236,229,.22); gap:0!important; }.mode-switch-btn { padding:8px 10px!important; border:0!important; border-right:1px solid rgba(255,236,229,.18)!important; border-radius:0!important; background:transparent!important; color:#cfb8b9!important; }.mode-switch-btn:last-child{border-right:0!important}.mode-switch-btn.active{background:#e94559!important;color:#fff!important}.switch-mark{display:none!important}
#view-result .report-segments { gap:0!important; }.report-segment { padding:27px 0 28px 23px!important; border-left:1px solid #d64a5c!important; border-bottom:1px solid rgba(255,236,229,.15)!important; border-radius:0!important; background:transparent!important; box-shadow:none!important; }.report-segment:last-child{border-bottom:0!important}.report-segment .seg-title { margin-bottom:11px!important; color:#f3c59e!important; font-family:'Songti SC','STSong',serif; font-size:21px!important; letter-spacing:.05em; }.report-segment .seg-content { color:#d2c0c0!important; font-size:16px!important; line-height:1.93!important; }
#view-result .detail-card { padding:0; }.detail-toggle { padding:26px 25px!important; color:#fff7f1!important; font-family:'Songti SC','STSong',serif; font-size:23px!important; font-weight:500!important; }.detail-content { margin:0!important; padding:0 25px 30px!important; gap:0!important; }.radar-container{border-bottom:1px solid rgba(255,236,229,.14)}.detail-item{padding:25px 0!important;border-radius:0!important;border-bottom:1px solid rgba(255,236,229,.13)!important;background:transparent!important}.detail-item .dt-title{color:#f1c29d!important;font-size:18px!important}.detail-item .dt-body{color:#cdb9ba!important;font-size:15px!important;line-height:1.92!important}
#view-result .inline-ask-card { margin-top:24px; padding:0; border:1px solid rgba(255,236,229,.2); }.inline-ask-card .card-title { margin:0; padding:26px 25px 21px; border-bottom:1px solid rgba(255,236,229,.16); }.ask-input-bar{padding:17px 18px!important;border-top:1px solid rgba(255,236,229,.16)}.ask-input-bar input{color:#fff8f4!important;border:1px solid rgba(255,236,229,.25)!important;border-radius:0!important;background:rgba(0,0,0,.2)!important}.btn-send{border-radius:0!important;background:#e94559!important}
#view-result .result-actions { margin:18px 20px 34px!important; gap:8px!important; }.result-actions .btn-action { min-height:88px; border:1px solid rgba(255,236,229,.2)!important; border-radius:0!important; background:rgba(255,255,255,.02)!important; color:#fff8f3!important; }.result-actions .btn-action:active{border-color:#ef5668!important}.action-icon{color:#f05a6c!important;font-family:Georgia,serif!important;font-size:23px!important}
@media (min-width:700px) { #view-result .editorial-cover,#view-result .formula-card,#view-result .issues-card,#view-result .report-card,#view-result .detail-card,#view-result .inline-ask-card,#view-result .result-actions{max-width:720px;margin-left:auto;margin-right:auto}.editorial-cover{min-height:570px}.cover-copy{left:34px;bottom:38px}.cover-signal{top:26px;left:32px;right:32px}.result-evidence{left:49%;width:51%} }
@media (max-width:390px) { .editorial-cover{min-height:498px;margin-left:14px;margin-right:14px}.cover-copy{left:17px;bottom:22px}.result-evidence{left:48%;width:52%}.score-number{font-size:68px!important}.score-label{font-size:25px!important}#view-result .formula-card,#view-result .issues-card,#view-result .report-card,#view-result .detail-card,#view-result .inline-ask-card{margin-left:14px;margin-right:14px;padding-left:19px;padding-right:19px}.card-title{font-size:26px!important}.formula-main{font-size:29px!important} }

/* Reference-led refinement: black, ivory, muted gold, and one deep-red signal. */
#view-result { background:#050608; } #view-result::before { background:radial-gradient(ellipse 64% 46% at 50% -5%,rgba(55,26,25,.18),transparent 70%); opacity:1; }
#view-result .app-header { background:rgba(5,6,8,.96); } #view-result .header-title { color:#e9ddc8; font-family:'Songti SC','STSong',serif; font-size:23px; font-weight:400; letter-spacing:.14em; }
.editorial-cover { min-height:630px; margin:24px 48px 0; border-color:rgba(218,201,169,.63); background:#06080c; }
.editorial-cover::before { display:none; }.cover-signal { top:18px; left:18px; right:auto; color:#d8c8ac; letter-spacing:.12em; font-size:9px; }.cover-signal b { display:none; }
.result-evidence { inset:0 auto 0 0; width:43%; border-right:1px solid rgba(218,201,169,.53); background:#111; }.result-evidence::before { background:linear-gradient(0deg,rgba(3,4,6,.78),transparent 24%); }.result-evidence img { filter:saturate(.72) contrast(.98) brightness(.91); }.result-evidence span { left:13px; right:13px; bottom:16px; color:#dfd0b6; font-family:'Songti SC','STSong',serif; font-size:12px; letter-spacing:.07em; }
.result-evidence span::before { content:''; display:inline-block; width:26px; height:26px; margin:0 10px -8px 0; border:1px solid rgba(221,205,178,.5); background:inherit; }
.cover-copy { left:49%; bottom:auto; top:104px; width:43%; }.score-display { padding-bottom:21px; border-bottom:1px solid rgba(218,201,169,.62); }.score-number { font-family:'Bodoni 72','Times New Roman',serif; font-size:88px!important; font-weight:400; letter-spacing:0; background:linear-gradient(105deg,#f4ecd9,#c9b691)!important; -webkit-background-clip:text; }.score-max { color:#d9c6a7!important; font-family:'Songti SC','STSong',serif; font-size:20px!important; }
.score-label { margin-top:28px; color:#e9ddc8!important; font-size:29px!important; font-weight:400; line-height:1.4; letter-spacing:.03em; }.style-title-badge { margin-top:20px!important; }.style-title-name { color:#cbb58d!important; font-size:16px!important; font-weight:400; }.score-meta { margin-top:28px; padding-top:0; color:#b5a88f!important; font-size:11px!important; line-height:1.9!important; }.trend-chip{display:none!important}.cover-geometry{display:none!important}
#view-result .formula-card,#view-result .issues-card,#view-result .report-card,#view-result .detail-card,#view-result .inline-ask-card { max-width:none; margin-left:48px; margin-right:48px; padding-left:0; padding-right:0; border-color:rgba(218,201,169,.42); }
#view-result .formula-card { margin-top:44px; padding-top:0; border-top:0; background:transparent; }.formula-card .card-title { display:none; }.formula-main { position:relative; padding-top:0; color:#e8dcc5; font-family:'Songti SC','STSong',serif; font-size:28px!important; font-weight:400; }.formula-main::before { content:'整体判断'; display:block; margin-bottom:18px; color:#c8b58f; font-size:17px; letter-spacing:.13em; }.formula-note { max-width:52%; color:#bdb097; font-size:15px!important; line-height:1.9!important; }
#view-result .issues-card { display:grid; grid-template-columns:36% 1fr; column-gap:22px; padding-top:39px; padding-bottom:36px; }.issues-card .card-title { grid-column:1; color:#d9c9ad; font-size:19px!important; letter-spacing:.1em; }.issues-list { grid-column:2; }.issue-item { min-height:0; padding:17px 0!important; color:#d8cbb6; font-size:14px!important; line-height:1.7!important; }.issue-num { width:34px!important; height:34px!important; border:0!important; color:#9e1929!important; font-family:'Bodoni 72','Times New Roman',serif; font-size:33px!important; font-weight:400; }.issue-item:first-child { border-top:1px solid rgba(218,201,169,.42); }
.color-analysis-card { margin:0 48px; padding:30px 0 36px; border-top:1px solid rgba(218,201,169,.42); border-bottom:1px solid rgba(218,201,169,.42); }.color-analysis-heading { display:flex; align-items:center; gap:15px; color:#e7dac1; font-family:'Songti SC','STSong',serif; font-size:24px; letter-spacing:.09em; }.color-analysis-heading i { flex:1; height:1px; background:rgba(218,201,169,.42); }.color-analysis-heading small { color:#b6a78b; font-family:Arial,sans-serif; font-size:10px; letter-spacing:.12em; white-space:nowrap; }.color-swatches { display:flex; gap:8px; margin-top:28px; }.color-swatch { width:70px; height:78px; position:relative; background:var(--swatch); border:1px solid rgba(239,228,205,.22); }.color-swatch b { position:absolute; left:0; right:0; bottom:-21px; overflow:hidden; color:#ab9e88; font-size:9px; font-weight:400; white-space:nowrap; text-align:center; text-overflow:ellipsis; }.color-analysis-note { margin:44px 0 0 auto; max-width:43%; padding-left:17px; border-left:2px solid #9d2030; color:#c4b49b; font-family:'Songti SC','STSong',serif; font-size:15px; line-height:1.85; }
#view-result .report-card { padding-top:37px; }.report-header .card-title { color:#e8dcc5; font-size:24px!important; }.mode-switcher { border-color:rgba(218,201,169,.42); }.mode-switch-btn { color:#b9aa91!important; }.mode-switch-btn.active { background:#861827!important; }.report-segment { border-left:0!important; padding:24px 0!important; }.report-segment .seg-title { color:#cbb58f!important; font-size:18px!important; }.report-segment .seg-content { color:#c9bca6!important; font-family:'Songti SC','STSong',serif; font-size:15px!important; line-height:1.95!important; }
#view-result .detail-toggle { color:#e8dcc5!important; font-size:20px!important; }.detail-item .dt-title { color:#cab68f!important; }.detail-item .dt-body { color:#c6b9a3!important; }.inline-ask-card { padding:0!important; }.inline-ask-card .card-title { color:#e6d7bd!important; font-size:22px!important; }.result-actions .btn-action { border-color:rgba(218,201,169,.42)!important; color:#e4d6bd!important; }.action-icon { color:#a72a3a!important; }
@media (max-width:650px) { .editorial-cover{margin-left:28px;margin-right:28px;min-height:580px}.cover-copy{left:49%;top:93px;width:45%}.score-number{font-size:69px!important}.score-label{font-size:24px!important}.formula-note{max-width:60%}#view-result .formula-card,#view-result .issues-card,#view-result .report-card,#view-result .detail-card,#view-result .inline-ask-card,.color-analysis-card{margin-left:28px;margin-right:28px}.color-swatch{width:54px;height:61px}.color-analysis-note{max-width:52%} }

/* Couture pass for outfit mirror: stronger fashion editorial hierarchy, no copy changes. */
#view-home,
#view-upload,
#view-profile {
  background:
    linear-gradient(90deg, rgba(255, 247, 230, .018) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255, 247, 230, .02) 1px, transparent 1px),
    radial-gradient(ellipse 80% 36% at 86% -8%, rgba(120, 15, 29, .28), transparent 68%),
    radial-gradient(ellipse 68% 30% at 2% 78%, rgba(164, 37, 50, .13), transparent 72%),
    linear-gradient(165deg, #050506 0%, #10070a 49%, #050505 100%);
  background-size: 64px 64px, 64px 64px, auto, auto, auto;
}

#view-home .app-header,
#view-upload .app-header,
#view-profile .app-header {
  min-height: 68px;
  padding-left: 18px;
  padding-right: 18px;
  background: rgba(5, 5, 6, .9);
  border-bottom: 1px solid rgba(226, 210, 180, .24);
  box-shadow: 0 12px 34px rgba(0, 0, 0, .32);
}

#view-home .header-brand,
#view-upload .header-title,
#view-profile .header-title {
  color: #efe4cf;
  font-family: 'Songti SC', 'STSong', serif;
  font-weight: 400;
  letter-spacing: .18em;
}

#view-home .header-brand {
  font-size: 24px;
}

#view-home .header-kicker {
  color: rgba(204, 183, 145, .78);
  font-size: 7px;
  letter-spacing: .22em;
}

#view-home .mirror-home-link,
#view-home .profile-btn,
#view-upload .icon-btn,
#view-profile .icon-btn {
  width: 38px;
  height: 38px;
  border-color: rgba(226, 210, 180, .36);
  background: rgba(255, 255, 255, .018);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .02);
}

#view-home .mirror-home-link svg,
#view-home .profile-btn svg,
#view-upload .icon-btn svg,
#view-profile .icon-btn svg {
  stroke-width: 1.25;
}

#view-home .home-hero {
  margin: 0;
  padding: 28px 18px 22px;
  border-bottom: 0;
}

#view-home .hero-index {
  margin: 4px 0 12px;
  color: #cbb88d;
  letter-spacing: .24em;
}

#view-home .hero-index i {
  width: 34px;
  background: rgba(203, 184, 141, .72);
}

#view-home .hero-mirror {
  height: clamp(262px, 74vw, 370px);
  margin: 0 0 -44px;
  border-color: rgba(226, 210, 180, .42);
  background: #070708;
  transform: none;
  box-shadow: 18px 18px 0 -13px rgba(132, 17, 31, .95);
}

#view-home .hero-mirror::before {
  width: 55%;
  background:
    linear-gradient(90deg, rgba(5, 5, 6, .96) 0%, rgba(5, 5, 6, .58) 72%, transparent),
    linear-gradient(180deg, rgba(5, 5, 6, .12), rgba(5, 5, 6, .56));
}

#view-home .hero-mirror::after {
  z-index: 2;
  background:
    linear-gradient(180deg, transparent 55%, rgba(4, 4, 5, .52) 100%),
    linear-gradient(108deg, transparent 0 46%, rgba(216, 49, 61, .7) 46.2%, transparent 47%);
}

#view-home .outfit-hero-image {
  z-index: 0;
  object-position: 66% center;
  filter: saturate(.9) contrast(1.08) brightness(1.04);
}

#view-home .mirror-shard {
  z-index: 3;
  border-color: rgba(226, 210, 180, .32);
  background: linear-gradient(135deg, rgba(255, 248, 231, .11), rgba(141, 18, 30, .04));
  box-shadow: none;
}

#view-home .mirror-orbit {
  z-index: 4;
  width: 180px;
  height: 180px;
  left: 64%;
  top: 28px;
  border-color: rgba(226, 210, 180, .4);
  box-shadow: none;
}

#view-home .mirror-core {
  display: none;
}

#view-home .hero-kicker {
  margin-top: 18px;
  color: #d14d59;
  font-size: 10px;
  letter-spacing: .27em;
}

#view-home .hero-title {
  max-width: 420px;
  margin-top: 8px;
  color: #fff8ed;
  background: none;
  -webkit-text-fill-color: initial;
  font-size: 48px;
  font-weight: 400;
  letter-spacing: .015em;
  line-height: .98;
  text-shadow: 0 18px 34px rgba(0, 0, 0, .48);
}

#view-home .hero-title span {
  color: #a41d2b;
  -webkit-text-fill-color: #a41d2b;
}

#view-home .hero-desc {
  color: #d4c6ae;
  font-size: 14px;
  letter-spacing: .08em;
  margin-top: 18px;
}

#view-home .hero-coordinate {
  margin-top: 28px;
  padding-top: 14px;
  border-top-color: rgba(226, 210, 180, .34);
  color: rgba(213, 196, 161, .74);
}

#view-home .home-upload-zone {
  min-height: 218px;
  margin: 20px 18px 0;
  padding: 35px 22px 31px;
  border-color: rgba(226, 210, 180, .48);
  background:
    linear-gradient(115deg, rgba(255, 247, 230, .1), transparent 28%),
    linear-gradient(142deg, rgba(117, 14, 28, .35), rgba(4, 4, 5, .82) 62%),
    #080709;
  box-shadow: 0 28px 58px rgba(0, 0, 0, .36), 13px 13px 0 -9px rgba(142, 19, 33, .9);
}

#view-home .home-upload-zone::before {
  left: -26%;
  top: -118%;
  width: 32%;
  height: 350%;
  background: linear-gradient(100deg, transparent, rgba(255, 248, 231, .18), transparent);
}

#view-home .home-upload-zone::after {
  bottom: 24px;
  background: linear-gradient(90deg, transparent, rgba(211, 49, 62, .92), transparent);
}

#view-home .upload-corner {
  width: 22px;
  height: 22px;
  border-color: #d6c29c;
}

#view-home .upload-eyebrow {
  color: #c7b48f;
  letter-spacing: .18em;
}

#view-home .upload-eyebrow span {
  background: #df3348;
  box-shadow: 0 0 16px rgba(223, 51, 72, .75);
}

#view-home .upload-icon {
  color: #e9dac0;
}

#view-home .upload-text {
  color: #fff8ed;
  font-size: 25px;
  font-weight: 400;
  letter-spacing: .18em;
}

#view-home .upload-hint {
  color: #b9aa91;
  margin-top: 7px;
}

#view-home .photo-guide,
#view-home .home-features {
  border-color: rgba(226, 210, 180, .28);
  background: rgba(255, 255, 255, .012);
}

#view-home .photo-guide {
  margin-top: 18px;
  padding: 22px 20px;
  border-left: 0;
}

#view-home .photo-guide-title {
  color: #eadcc5;
  font-size: 17px;
  font-weight: 400;
  letter-spacing: .1em;
}

#view-home .photo-guide-title small,
#view-home .tip-icon,
#view-home .feature-icon {
  color: #9f1828;
}

#view-home .tip-item {
  color: #c5b9a5;
}

#view-home .tip-item-important {
  margin: 4px 0;
  padding: 10px 11px;
  background: rgba(129, 17, 29, .18);
}

#view-home .home-features {
  margin-top: 22px;
}

#view-home .feature-item {
  padding: 14px 3px;
  color: #c6b69a;
}

#view-upload .upload-preview {
  margin: 26px 18px 0;
  padding: 10px;
  border-color: rgba(226, 210, 180, .46);
  background:
    linear-gradient(145deg, rgba(226, 210, 180, .14), transparent 28%),
    #050506;
  box-shadow: 15px 15px 0 -10px rgba(142, 19, 33, .9), 0 28px 58px rgba(0, 0, 0, .44);
}

#view-upload .upload-preview::before {
  border-color: rgba(226, 210, 180, .42);
}

#view-upload .upload-preview::after {
  border-color: #d5bf98;
}

#view-upload .upload-preview img {
  background: #050506;
}

#view-upload .preview-frame-label {
  color: #eee1c8;
}

#view-upload .preview-frame-label b {
  color: #d14856;
}

#view-upload .preview-photo-note,
#view-upload .upload-notice {
  border-left-color: #9f1828;
  color: #c3b59b;
}

#view-upload .form-field {
  border-top-color: rgba(226, 210, 180, .3);
}

#view-upload .form-field label {
  color: #eadcc5;
}

#view-upload .form-field input[type="text"],
#view-upload .mode-selector,
#view-upload .occasion-selector {
  border-color: rgba(226, 210, 180, .35);
}

#view-upload .form-field input[type="text"] {
  background: rgba(255, 255, 255, .012);
}

#view-upload .mode-btn,
#view-upload .occasion-btn {
  color: #c5b59a;
}

#view-upload .mode-btn.active,
#view-upload .occasion-btn.active {
  background: rgba(150, 22, 34, .22) !important;
  box-shadow: inset 0 -2px #9f1828 !important;
  color: #fff3de;
}

#view-upload .mode-btn.active .mode-mark {
  color: #d5bf98;
}

#view-upload .btn-primary {
  background: linear-gradient(100deg, #9f1828, #e14c5a 54%, #f2d0b0);
  color: #fff;
  box-shadow: 0 18px 34px rgba(120, 15, 29, .34);
}

#view-upload .btn-secondary,
#view-profile .btn-secondary {
  border-color: rgba(226, 210, 180, .34);
  background: rgba(255, 255, 255, .012);
  color: #eee1c8;
}

#view-profile .profile-card,
#view-profile .profile-credit-card,
#view-profile .profile-stats,
#view-profile .profile-section {
  border-color: rgba(226, 210, 180, .34);
  background: rgba(255, 255, 255, .012);
}

#view-profile .profile-card {
  align-items: flex-start;
  padding: 22px;
}

#view-profile .profile-avatar {
  position: relative;
  width: 62px;
  height: 62px;
  border: 1px solid rgba(226, 210, 180, .42);
  background: linear-gradient(145deg, rgba(226, 210, 180, .08), rgba(130, 18, 31, .17));
  color: transparent;
  font-size: 0;
}

#view-profile .profile-avatar::before,
#view-profile .profile-avatar::after {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  border: 1px solid #d8c7a5;
}

#view-profile .profile-avatar::before {
  top: 13px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
}

#view-profile .profile-avatar::after {
  bottom: 12px;
  width: 32px;
  height: 18px;
  border-bottom: 0;
  border-radius: 22px 22px 0 0;
}

#view-profile .profile-name,
#view-profile .section-title {
  color: #efe4cf;
  font-weight: 400;
}

#view-profile .profile-credit-card {
  box-shadow: 12px 12px 0 -9px rgba(142, 19, 33, .9);
}

#view-profile .profile-credit-heading,
#view-profile .profile-credit-stats strong,
#view-profile .stat-value {
  color: #d9c59f;
}

#view-profile .profile-credit-heading small,
#view-profile .profile-membership,
#view-profile .stat-label,
#view-profile .account-label,
#view-profile .account-value {
  color: #bdae92;
}

#view-profile .stat-item,
#view-profile .account-info,
#view-profile .score-trend {
  border: 1px solid rgba(226, 210, 180, .22);
  background: rgba(255, 255, 255, .012);
  border-radius: 0;
}

#view-profile .account-row {
  border-bottom-color: rgba(226, 210, 180, .2);
}

@media (min-width: 481px) {
  #view-home .home-hero,
  #view-home .home-upload-zone,
  #view-home .photo-guide,
  #view-home .home-features,
  #view-upload .upload-preview,
  #view-upload .preview-photo-note,
  #view-upload .upload-notice,
  #view-upload .upload-form,
  #view-upload .upload-actions,
  #view-profile .profile-card,
  #view-profile .profile-credit-card,
  #view-profile .profile-stats,
  #view-profile .profile-section {
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
  }

  #view-home .home-hero {
    padding-left: 0;
    padding-right: 0;
  }

  #view-home .hero-mirror {
    height: 420px;
  }
}

@media (max-width: 480px) {
  #view-home .hero-title {
    font-size: 44px;
  }
}

@media (max-width: 390px) {
  #view-home .home-hero {
    padding-left: 15px;
    padding-right: 15px;
  }

  #view-home .hero-mirror {
    height: 248px;
  }

  #view-home .hero-title {
    font-size: 40px;
  }

  #view-home .home-upload-zone {
    min-height: 196px;
  }
}

/* Couture pass v2: make the change visibly structural, not a subtle reskin. */
#view-home .home-hero {
  min-height: 704px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 28px 18px 34px;
  overflow: hidden;
  border-bottom: 1px solid rgba(231, 213, 177, .24);
}

#view-home .home-hero::before {
  content: '';
  position: absolute;
  inset: 86px 18px 138px;
  z-index: 0;
  border: 1px solid rgba(231, 213, 177, .28);
  pointer-events: none;
}

#view-home .home-hero::after {
  content: '';
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 146px;
  z-index: 4;
  height: 2px;
  background: linear-gradient(90deg, #a01424, #e23b4f 58%, transparent);
  pointer-events: none;
}

#view-home .hero-index {
  position: absolute;
  z-index: 5;
  top: 34px;
  left: 18px;
  right: 18px;
  margin: 0;
}

#view-home .hero-mirror {
  position: absolute;
  z-index: 1;
  inset: 86px 18px 138px;
  width: auto;
  height: auto;
  margin: 0;
  border: 0;
  box-shadow: none;
}

#view-home .outfit-hero-image {
  object-position: 92% center;
  filter: saturate(.98) contrast(1.1) brightness(1.08);
}

#view-home .hero-mirror::before {
  z-index: 2;
  width: 100%;
  background:
    linear-gradient(180deg, rgba(3, 3, 4, .02) 0%, rgba(3, 3, 4, .08) 42%, rgba(3, 3, 4, .84) 100%),
    linear-gradient(90deg, rgba(4, 4, 5, .94) 0%, rgba(4, 4, 5, .68) 28%, transparent 54%, rgba(4, 4, 5, .22) 100%);
}

#view-home .hero-mirror::after {
  z-index: 3;
  background:
    linear-gradient(115deg, transparent 0 51%, rgba(223, 48, 64, .82) 51.2%, transparent 52%),
    radial-gradient(circle at 78% 22%, rgba(255, 226, 205, .22), transparent 14%);
}

#view-home .shard-a {
  width: 42%;
  height: 190px;
  left: 9%;
  top: 36px;
  opacity: .42;
}

#view-home .shard-b {
  width: 48%;
  height: 178px;
  right: 0;
  top: 74px;
  opacity: .34;
}

#view-home .shard-c {
  width: 36%;
  height: 92px;
  left: 38%;
  top: 156px;
  opacity: .35;
}

#view-home .mirror-orbit {
  width: 246px;
  height: 246px;
  left: 69%;
  top: 68px;
  opacity: .62;
}

#view-home .hero-kicker,
#view-home .hero-title,
#view-home .hero-desc,
#view-home .hero-coordinate {
  z-index: 6;
}

#view-home .hero-kicker {
  margin: 0 0 9px;
  color: #e24655;
  text-shadow: 0 1px 16px rgba(0, 0, 0, .82);
}

#view-home .hero-title {
  max-width: 100%;
  font-size: 50px;
  line-height: .94;
  color: #fff7e8;
  text-shadow: 0 16px 32px rgba(0, 0, 0, .75);
}

#view-home .hero-desc {
  max-width: 330px;
  margin-top: 18px;
  color: #eadcc1;
  text-shadow: 0 1px 12px rgba(0, 0, 0, .82);
}

#view-home .hero-coordinate {
  margin-top: 38px;
  border-top-color: rgba(231, 213, 177, .48);
}

#view-home .home-upload-zone {
  min-height: 178px;
  margin-top: 28px;
  padding: 29px 24px 25px;
  border: 1px solid rgba(255, 225, 216, .34);
  background:
    linear-gradient(135deg, rgba(106, 18, 34, .43), rgba(18, 9, 13, .73)),
    #12090d;
  color: #ffe5dc;
  box-shadow: 14px 14px 0 -9px #a01424, 0 26px 54px rgba(0, 0, 0, .38);
}

#view-home .home-upload-zone::before {
  opacity: .65;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .12), transparent);
}

#view-home .home-upload-zone::after {
  bottom: 18px;
  background: linear-gradient(90deg, transparent, #a01424, transparent);
}

#view-home .upload-corner {
  border-color: #f26471;
}

#view-home .upload-eyebrow,
#view-home .upload-hint {
  color: #d3a9ae;
}

#view-home .upload-eyebrow span {
  background: #ee4b5c;
  box-shadow: 0 0 12px #e73c50;
}

#view-home .upload-icon,
#view-home .upload-text {
  color: #ffe5dc;
}

#view-home .upload-icon svg {
  width: 44px;
  height: 44px;
  stroke-width: 1.05;
}

#view-home .upload-text {
  font-size: 29px;
}

#view-home .photo-guide {
  display: grid;
  grid-template-columns: 112px 1fr;
  column-gap: 20px;
  padding: 24px 20px;
  border-top-color: rgba(231, 213, 177, .4);
  border-bottom-color: rgba(231, 213, 177, .4);
  border-left: 0;
  border-right: 0;
  background: transparent;
}

#view-home .photo-guide-title {
  margin: 0;
  font-size: 20px;
  line-height: 1.3;
}

#view-home .photo-guide-tips {
  gap: 0;
}

#view-home .tip-item {
  min-height: 43px;
  padding: 10px 0;
  border-top: 1px solid rgba(231, 213, 177, .18);
}

#view-home .tip-item:first-child {
  border-top: 0;
}

#view-home .tip-item-important {
  margin: 0;
  padding: 10px 0;
  background: transparent;
}

#view-home .home-features {
  border-color: rgba(231, 213, 177, .32);
  background: rgba(238, 228, 206, .03);
}

#view-upload .upload-preview {
  aspect-ratio: 1 / 1;
  min-height: 0;
}

#view-upload .upload-preview img {
  height: 100%;
  min-height: 0;
  max-height: none;
  object-fit: cover;
}

#view-upload .mode-btn.active,
#view-upload .occasion-btn.active {
  background: #eee4ce !important;
  box-shadow: inset 0 -3px #a01424 !important;
  color: #090808;
}

#view-upload .mode-btn.active .mode-caption,
#view-upload .mode-btn.active .mode-mark {
  color: #a01424;
}

@media (min-width: 481px) {
  #view-home .home-hero {
    min-height: 740px;
  }

  #view-home .hero-title {
    font-size: 54px;
  }
}

@media (max-width: 390px) {
  #view-home .home-hero {
    min-height: 676px;
  }

  #view-home .hero-title {
    font-size: 42px;
  }

  #view-home .photo-guide {
    grid-template-columns: 1fr;
    row-gap: 14px;
  }
}

/* Mobile polish: preserve complete copy, visible loading feedback and a
   readable result cover on iPhone-sized WebViews. */
#view-home .photo-guide {
  grid-template-columns: max-content minmax(0, 1fr);
  column-gap: 16px;
}

#view-home .photo-guide-title {
  white-space: nowrap;
}

/* Explicit transform keyframes keep the analysis indicator smooth in
   WKWebView, while moving the scan beam without repeated layout work. */
.loading-mirror .scan-orbit {
  display: block;
  transform-origin: 50% 50%;
  will-change: transform, opacity;
  animation-play-state: running;
}

.loading-mirror .scan-beam {
  top: 17%;
  will-change: transform, opacity;
  animation: beamScanMobile 2.2s ease-in-out infinite;
  animation-play-state: running;
}

.loading-mirror .shard-load-a {
  animation: shardFloatA 3.2s ease-in-out infinite;
}

.loading-mirror .shard-load-b {
  animation: shardFloatB 3.6s ease-in-out infinite reverse;
}

@keyframes orbitSpin {
  from { transform: translate(-50%, -50%) rotate(-25deg); }
  to { transform: translate(-50%, -50%) rotate(335deg); }
}

@keyframes beamScanMobile {
  0%, 100% { transform: translate3d(0, 0, 0); opacity: .38; }
  50% { transform: translate3d(0, 103px, 0); opacity: 1; }
}

@keyframes shardFloatA {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(22deg); opacity: .62; }
  50% { transform: translate3d(-5px, 7px, 0) rotate(26deg); opacity: 1; }
}

@keyframes shardFloatB {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-28deg); opacity: .58; }
  50% { transform: translate3d(6px, -6px, 0) rotate(-23deg); opacity: .94; }
}

/* Reduced motion still gets a low-amplitude status pulse, without rotation or
   sweeping movement. */
@media (prefers-reduced-motion: reduce) {
  .loading-mirror .scan-orbit,
  .loading-mirror .scan-beam,
  .loading-mirror .mirror-shard-loading,
  .loading-mirror .mirror-shine {
    animation: none !important;
  }

  .loading-mirror .mirror-frame,
  .loading-mirror .mirror-sigil {
    animation: loadingGlowReduced 2.4s ease-in-out infinite !important;
  }
}

@keyframes loadingGlowReduced {
  0%, 100% { opacity: .72; filter: brightness(.9); }
  50% { opacity: 1; filter: brightness(1.18); }
}

/* A solid score color avoids WebKit painting the important gradient shorthand
   as a rectangle instead of clipping it to the number. */
#view-result .score-number {
  background: none !important;
  color: #e9ddc8 !important;
  -webkit-text-fill-color: #e9ddc8 !important;
}

#view-result .score-number.skeleton {
  width: 108px;
  height: 58px;
  background: linear-gradient(90deg, rgba(233, 221, 200, .08), rgba(233, 221, 200, .23), rgba(233, 221, 200, .08)) !important;
  background-size: 200% 100% !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
}

@media (max-width: 650px) {
  #view-result .editorial-cover {
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  #view-result .result-evidence {
    position: relative;
    inset: auto;
    width: 100%;
    height: clamp(330px, 112vw, 470px);
    flex: 0 0 auto;
    border-right: 0;
    border-bottom: 1px solid rgba(218, 201, 169, .53);
    background: #050608;
  }

  #view-result .result-evidence img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    background: #050608;
  }

  #view-result .cover-signal {
    z-index: 3;
  }

  #view-result .cover-copy {
    position: relative;
    inset: auto;
    width: 100%;
    padding: 30px 22px 34px;
  }

  #view-result .score-display {
    width: 100%;
  }

  #view-result .score-label,
  #view-result .score-meta {
    max-width: none;
  }
}

/* ========== 两个后续决策工具：完整穿搭对比 / 同类单品帮选 ========== */
.next-step-heading {
  margin: 30px 20px 10px;
  border-top: 1px solid rgba(218, 201, 169, .25);
  padding-top: 24px;
}
.next-step-heading span { color:#9e2637; font:11px/1.2 Georgia,serif; letter-spacing:.2em; }
.next-step-heading h3 { margin:8px 0 0; color:#eadfc9; font:400 23px/1.35 'Songti SC','STSong',serif; }
#view-result .result-actions { display:grid; grid-template-columns:1fr; }
#view-result .result-actions .btn-action-primary {
  min-height:96px;
  display:grid;
  grid-template-columns:38px minmax(0,1fr) 24px;
  align-items:center;
  text-align:left;
  padding:17px 18px;
}
.action-copy { display:flex; flex-direction:column; gap:5px; min-width:0; }
.action-copy strong { color:#f4ead7; font-size:18px; font-weight:500; letter-spacing:.05em; }
.action-copy small { color:#a99e8a; font-size:12px; line-height:1.5; }
.action-entitlement {
  width:fit-content;
  max-width:100%;
  margin-top:3px;
  padding:5px 9px;
  border:1px solid rgba(220, 78, 96, .42);
  border-radius:999px;
  background:rgba(157, 34, 51, .16);
  color:#efb7a5;
  font-size:11px;
  line-height:1.35;
  letter-spacing:.02em;
  white-space:normal;
}
.action-entitlement[hidden] { display:none; }
.action-arrow { color:#b8293d; font-size:22px; justify-self:end; }
#view-result .result-actions .btn-action-share { min-height:48px; font-size:13px; }

.tool-flow-view { min-height:100vh; background:#07070a; color:#e9dfce; }
.tool-flow-shell { width:min(100%,720px); margin:0 auto; padding:28px 18px calc(42px + env(safe-area-inset-bottom)); }
.tool-flow-intro { padding:4px 2px 22px; }
.tool-flow-intro > span { color:#a6293a; font:11px/1.2 Georgia,serif; letter-spacing:.2em; }
.tool-flow-intro h2 { margin:10px 0 10px; color:#f1e7d5; font:400 28px/1.28 'Songti SC','STSong',serif; }
.tool-flow-intro p { margin:0; color:#aaa08f; font-size:14px; line-height:1.75; }
.compare-photo-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.tool-photo-card { position:relative; min-width:0; height:360px; margin:0; padding:0; overflow:hidden; border:1px solid rgba(218,201,169,.35); background:#0d0c10; color:inherit; }
.tool-photo-card img { width:100%; height:100%; object-fit:contain; background:#06070a; }
.tool-photo-card figcaption,.tool-photo-caption { position:absolute; left:0; right:0; bottom:0; display:flex; align-items:center; gap:9px; padding:10px 12px; background:linear-gradient(transparent,rgba(0,0,0,.9)); color:#ded3c2; font-size:12px; }
.tool-photo-card figcaption b,.tool-photo-caption b { color:#e34a5e; font:18px/1 Georgia,serif; }
.tool-photo-upload { cursor:pointer; appearance:none; }
.tool-upload-placeholder { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; padding:24px; color:#a89e8e; font-size:13px; line-height:1.5; }
.tool-upload-placeholder b { color:#cc4355; font-size:32px; font-weight:300; }
.tool-form-card,.candidate-section { margin-top:16px; padding:18px; border:1px solid rgba(218,201,169,.24); background:rgba(255,255,255,.018); }
.tool-form-card label { display:block; margin:0 0 8px; color:#cfc2ad; font-size:13px; }
.tool-form-card label:not(:first-child) { margin-top:16px; }
.tool-form-card select,.tool-form-card input { width:100%; box-sizing:border-box; padding:13px 12px; border:1px solid rgba(218,201,169,.25); border-radius:0; background:#0b0b0e; color:#eee2cf; font-size:14px; outline:none; }
.tool-guidance { display:flex; gap:10px; margin:14px 0; padding:14px 16px; border-left:2px solid #a82739; background:rgba(131,28,43,.12); font-size:12px; line-height:1.65; }
.tool-guidance b { color:#d85968; white-space:nowrap; }.tool-guidance span { color:#a99e8c; }
.tool-submit { width:100%; min-height:54px; margin-top:8px; }
.tool-submit:disabled { opacity:.42; cursor:not-allowed; }
.selection-baseline { height:250px; margin:0; position:relative; border:1px solid rgba(218,201,169,.3); overflow:hidden; background:#06070a; }
.selection-baseline img { width:100%; height:100%; object-fit:contain; }
.selection-baseline figcaption { position:absolute; left:12px; bottom:10px; padding:6px 9px; background:rgba(0,0,0,.72); color:#d9cdb9; font-size:11px; letter-spacing:.08em; }
.category-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:7px; }
.category-grid button,.selection-action-toggle button { min-height:40px; border:1px solid rgba(218,201,169,.25); background:#0c0b0f; color:#aaa08f; font-size:12px; }
.category-grid button.active,.selection-action-toggle button.active { border-color:#c23a4d; background:rgba(162,31,49,.18); color:#f1ddc8; }
.selection-action-toggle { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.candidate-heading { display:flex; justify-content:space-between; color:#d8cbb6; font-size:13px; }
.candidate-heading span { color:#9f8f7c; }
.candidate-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-top:12px; }
.candidate-card { position:relative; aspect-ratio:1/1.18; border:1px solid rgba(218,201,169,.28); background:#07080a; overflow:hidden; }
.candidate-card img { width:100%; height:100%; object-fit:contain; }
.candidate-card b { position:absolute; left:6px; top:6px; width:24px; height:24px; display:grid; place-items:center; background:#a92d3f; color:white; font:13px/1 Georgia,serif; }
.candidate-card button { position:absolute; right:5px; top:5px; width:26px; height:26px; padding:0; border:0; border-radius:50%; background:rgba(0,0,0,.75); color:#fff; }
.candidate-add { width:100%; min-height:44px; margin-top:10px; border:1px dashed rgba(218,201,169,.35); background:transparent; color:#b8aa94; }

.decision-result { margin:18px; }
.decision-result-hero { padding:24px 20px; border:1px solid rgba(218,201,169,.3); background:linear-gradient(145deg,rgba(121,22,37,.2),rgba(255,255,255,.015)); }
.decision-result-hero small { color:#bd3549; letter-spacing:.16em; }.decision-result-hero h2 { margin:10px 0; color:#f3e6d2; font:400 27px/1.35 'Songti SC','STSong',serif; }.decision-result-hero p { color:#b8aa96; line-height:1.7; }
.compare-result-images { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:14px; }
.compare-result-images figure { position:relative; height:360px; margin:0; border:1px solid rgba(218,201,169,.3); background:#06070a; overflow:hidden; }.compare-result-images img { width:100%; height:100%; object-fit:contain; }.compare-result-images figcaption { position:absolute; left:8px; bottom:8px; padding:5px 8px; background:rgba(0,0,0,.72); color:#f0e2cd; font-size:12px; }
.decision-section { margin-top:14px; padding:18px; border:1px solid rgba(218,201,169,.22); background:rgba(255,255,255,.015); }.decision-section h3 { margin:0 0 12px; color:#dfcfb7; font-size:17px; }.decision-section p,.decision-section li { color:#b5a996; font-size:14px; line-height:1.75; }
.context-row { display:grid; grid-template-columns:minmax(0,.8fr) 44px minmax(0,1.4fr); gap:10px; padding:11px 0; border-top:1px solid rgba(218,201,169,.14); font-size:13px; }.context-row b { color:#d34d5e; }.context-row span { color:#c9bca8; }.context-row p { margin:0; }
.selection-result-card { display:grid; grid-template-columns:110px minmax(0,1fr); gap:14px; margin-top:12px; padding:12px; border:1px solid rgba(218,201,169,.22); }.selection-result-card img { width:110px; height:140px; object-fit:contain; background:#06070a; }.selection-result-card h4 { margin:0 0 6px; color:#ebddc7; font-size:16px; }.selection-result-card p { margin:0; }
.look-summary-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }.look-summary-grid>div { padding:12px; border:1px solid rgba(218,201,169,.18); }.look-summary-grid p { margin:6px 0; }.look-summary-grid ul { margin:8px 0 0; padding-left:18px; }
.selection-baseline-result figure { margin:10px 0 0; }.selection-baseline-result img { display:block; width:100%; height:320px; object-fit:contain; background:#06070a; }.selection-baseline-result figcaption { padding-top:8px; color:#a99986; font-size:12px; }
@media (max-width:430px) {
  .tool-flow-shell { padding-left:14px; padding-right:14px; }
  .tool-flow-intro h2 { font-size:25px; }
  .tool-photo-card,.compare-result-images figure { height:300px; }
  .category-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .candidate-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .selection-result-card { grid-template-columns:90px minmax(0,1fr); }.selection-result-card img { width:90px; height:120px; }
  .look-summary-grid { grid-template-columns:1fr; }
  .action-entitlement { padding:4px 8px; font-size:10.5px; }
}