/* 20260709 Yantong scheme2 glass UI — V21 design language translated to web */

/* ========== CSS Variables ========== */
:root {
  --yt-blue: #3B82F6;
  --yt-pink: #FF7AC8;
  --yt-ink: #142033;
  --yt-muted: #7B8AA0;
  --yt-bg: #FAFDFF;
  --yt-card-bg: rgba(255,255,255,.86);
  --yt-card-border: rgba(255,255,255,.68);
  --yt-card-shadow: 0 8px 19px rgba(55,112,220,.12);
  --yt-radius-card: 19px;
  --yt-radius-btn: 15px;
  --yt-radius-nav: 23px;
  --yt-gradient: linear-gradient(135deg, var(--yt-blue), var(--yt-pink));
  --yt-hero-gradient: linear-gradient(135deg, #4F8CFF 0%, #7DA8FF 48%, #FF8BD1 100%);
  --yt-font-heavy: 900;
}

/* ========== Reset ========== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-tap-highlight-color: transparent; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  font-weight: 600;
  color: var(--yt-ink);
  line-height: 1.5;
  overflow-x: hidden;
  min-height: 100vh;
  background:
    radial-gradient(circle at 8% 8%, rgba(96,165,250,.25), transparent 26%),
    radial-gradient(circle at 90% 14%, rgba(255,122,200,.21), transparent 30%),
    linear-gradient(180deg, #FAFDFF 0%, #F4F8FF 58%, #FFF7FC 100%);
  background-attachment: fixed;
}

/* ========== App Layout ========== */
#app {
  max-width: 480px;
  margin: 0 auto;
  min-height: 100vh;
  position: relative;
}
#view {
  min-height: calc(100vh - 80px);
  padding-bottom: 80px;
}

/* ========== Screens ========== */
.screen { display: block; }
.screen.active { display: block; animation: fadeInUp .35s ease; }

/* ========== Bottom Tabbar ========== */
.tabbar {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 11px;
  height: 58px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: center;
  background: rgba(255,255,255,.90);
  border: 1px solid rgba(59,130,246,.12);
  border-radius: var(--yt-radius-nav);
  box-shadow: 0 9px 23px rgba(41,93,168,.17);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  z-index: 100;
}
.tabbar .tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 11px;
  font-weight: 600;
  color: var(--yt-muted);
  transition: all .25s ease;
  padding: 6px 0;
}
.tabbar .tab.active {
  color: var(--yt-blue);
  font-weight: 800;
}
.tabbar .tab.active b {
  background: var(--yt-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.tabbar .tab-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
}
.tabbar .tab-icon img {
  width: 20px;
  height: 20px;
  display: block;
}
.tabbar .tab-icon em {
  display: none;
}
.tabbar .tab:active { transform: scale(0.92); }

/* ========== Yantong Home Page ========== */
.yantong-home {
  padding: 0 16px;
}

.yt-app-head {
  padding: 20px 4px 12px;
}
.yt-app-head .yt-mini-brand {
  font-size: 12px;
  font-weight: 800;
  color: var(--yt-blue);
  letter-spacing: 1px;
  display: inline-block;
  margin-bottom: 4px;
}
.yt-app-head h1 {
  font-size: 28px;
  font-weight: var(--yt-font-heavy);
  line-height: 1.2;
  color: var(--yt-ink);
  margin-bottom: 4px;
}
.yt-app-head p {
  font-size: 14px;
  color: var(--yt-muted);
  font-weight: 500;
}
.yt-app-head .circle-btn {
  position: absolute;
  right: 16px;
  top: 22px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(59,130,246,.15);
  background: rgba(255,255,255,.8);
  color: var(--yt-blue);
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Hero input section */
.yt-input-hero {
  position: relative;
  text-align: center;
  padding: 24px 16px 20px;
  margin: 12px 0;
  border-radius: var(--yt-radius-card);
  overflow: hidden;
}
.yt-input-hero .yt-glow {
  position: absolute;
  top: -40%;
  left: 50%;
  transform: translateX(-50%);
  width: 280px;
  height: 280px;
  background: radial-gradient(circle, rgba(59,130,246,.12), transparent 60%);
  pointer-events: none;
}
.yt-input-hero h2 {
  font-size: 22px;
  font-weight: var(--yt-font-heavy);
  color: var(--yt-ink);
  margin-bottom: 6px;
  position: relative;
}
.yt-input-hero > p {
  font-size: 13px;
  color: var(--yt-muted);
  font-weight: 500;
  position: relative;
}

/* Home input pill — fixed above tabbar */
.home-input-pill {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 80px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 6px 6px 16px;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(59,130,246,.12);
  border-radius: 28px;
  box-shadow: 0 6px 20px rgba(41,93,168,.14);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  z-index: 90;
}
.home-input-pill input {
  flex: 1;
  border: none;
  outline: none;
  background: none;
  font-size: 15px;
  font-weight: 600;
  color: var(--yt-ink);
  font-family: inherit;
}
.home-input-pill input::placeholder {
  color: var(--yt-muted);
  font-weight: 500;
}
.home-input-pill button {
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: var(--yt-gradient);
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(59,130,246,.3);
  transition: transform .2s ease, box-shadow .2s ease;
}
.home-input-pill button:active {
  transform: scale(0.90);
  box-shadow: 0 2px 8px rgba(59,130,246,.2);
}

/* Hot prompts section */
.yt-hot-section {
  padding: 8px 4px 140px;
}
.yt-hot-section .section-title {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 12px;
}
.yt-hot-section .section-title h3 {
  font-size: 18px;
  font-weight: 800;
  color: var(--yt-ink);
}
.yt-hot-section .section-title span {
  font-size: 12px;
  color: var(--yt-muted);
  font-weight: 500;
}
.yt-prompts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.yt-prompts .yt-prompt {
  padding: 9px 16px;
  border: 1px solid rgba(255,255,255,.68);
  border-radius: 20px;
  background: rgba(255,255,255,.75);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-size: 13px;
  font-weight: 600;
  color: var(--yt-ink);
  cursor: pointer;
  transition: all .25s ease;
  box-shadow: 0 2px 8px rgba(55,112,220,.06);
}
.yt-prompts .yt-prompt:hover {
  border-color: rgba(59,130,246,.3);
  box-shadow: 0 4px 14px rgba(55,112,220,.12);
  transform: translateY(-1px);
}
.yt-prompts .yt-prompt:active {
  transform: scale(0.95);
}

/* ========== Chat Screen ========== */
.yt-chat-screen {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.yt-chat-head {
  position: sticky;
  top: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 16px 12px;
  background: rgba(255,255,255,.88);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(59,130,246,.08);
}
.yt-chat-head h1 {
  font-size: 20px;
  font-weight: var(--yt-font-heavy);
  color: var(--yt-ink);
}
.yt-chat-head p {
  font-size: 12px;
  color: var(--yt-muted);
}
.yt-chat-head .ghost-btn {
  padding: 7px 14px;
  border: 1px solid rgba(59,130,246,.18);
  border-radius: 14px;
  background: rgba(255,255,255,.7);
  color: var(--yt-blue);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all .2s ease;
}
.yt-chat-head .ghost-btn:active { transform: scale(0.94); }

.yt-chat-flow {
  flex: 1;
  padding: 16px 14px 120px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow-y: auto;
}

.yt-message {
  display: flex;
  gap: 8px;
  animation: fadeInUp .3s ease;
  max-width: 88%;
}
.yt-message.user {
  align-self: flex-end;
  flex-direction: row-reverse;
}
.yt-message.assistant {
  align-self: flex-start;
}

.yt-message .yt-bubble {
  padding: 12px 16px;
  border-radius: 18px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.55;
  word-break: break-word;
}
.yt-message.user .yt-bubble {
  background: var(--yt-gradient);
  color: #fff;
  border-bottom-right-radius: 6px;
  box-shadow: 0 4px 14px rgba(59,130,246,.22);
}
.yt-message.assistant .yt-bubble {
  background: rgba(255,255,255,.86);
  border: 1px solid rgba(255,255,255,.68);
  border-bottom-left-radius: 6px;
  box-shadow: var(--yt-card-shadow);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.yt-message.assistant .yt-speaker {
  font-size: 11px;
  font-weight: 800;
  color: var(--yt-blue);
  margin-bottom: 4px;
}

.yt-avatar {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--yt-hero-gradient);
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Chat fixed composer */
.chat-fixed-composer {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 80px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 6px 6px 16px;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(59,130,246,.12);
  border-radius: 28px;
  box-shadow: 0 6px 20px rgba(41,93,168,.14);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  z-index: 90;
}
.chat-fixed-composer input {
  flex: 1;
  border: none;
  outline: none;
  background: none;
  font-size: 15px;
  font-weight: 600;
  color: var(--yt-ink);
  font-family: inherit;
}
.chat-fixed-composer input::placeholder {
  color: var(--yt-muted);
  font-weight: 500;
}
.chat-fixed-composer button {
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: var(--yt-gradient);
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(59,130,246,.3);
  transition: transform .2s ease;
}
.chat-fixed-composer button:active { transform: scale(0.90); }

/* ========== Tool Pages (Skills / Business) ========== */
.yt-tool-page {
  padding: 0 16px;
}

.yt-page-hero {
  border-radius: var(--yt-radius-card);
  padding: 22px 20px;
  margin: 12px 0 16px;
  background: var(--yt-hero-gradient);
  color: #fff;
  box-shadow: 0 10px 28px rgba(79,140,255,.22);
}
.yt-page-hero h2 {
  font-size: 22px;
  font-weight: var(--yt-font-heavy);
  margin-bottom: 4px;
}
.yt-page-hero p {
  font-size: 13px;
  font-weight: 500;
  opacity: .9;
}
.yt-page-hero.business {
  background: linear-gradient(135deg, #6366F1 0%, #8B5CF6 48%, #FF7AC8 100%);
  box-shadow: 0 10px 28px rgba(99,102,241,.22);
}

/* Chip row */
.yt-chip-row {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding: 4px 0 12px;
  scrollbar-width: none;
}
.yt-chip-row::-webkit-scrollbar { display: none; }
.yt-chip-row span {
  flex-shrink: 0;
  padding: 7px 16px;
  border-radius: 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--yt-muted);
  background: rgba(255,255,255,.7);
  border: 1px solid rgba(59,130,246,.08);
  cursor: pointer;
  transition: all .25s ease;
}
.yt-chip-row span.active {
  background: var(--yt-gradient);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 3px 10px rgba(59,130,246,.25);
}

/* Tool grid */
.yt-tool-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  padding-bottom: 100px;
}

.yt-tool-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 14px;
  border-radius: var(--yt-radius-card);
  background: var(--tool-bg, var(--yt-card-bg));
  border: 1px solid var(--tool-border, var(--yt-card-border));
  box-shadow: var(--yt-card-shadow);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  cursor: pointer;
  transition: all .25s ease;
  text-align: left;
  animation: fadeInUp .35s ease backwards;
}
.yt-tool-card:nth-child(1) { animation-delay: .05s; }
.yt-tool-card:nth-child(2) { animation-delay: .10s; }
.yt-tool-card:nth-child(3) { animation-delay: .15s; }
.yt-tool-card:nth-child(4) { animation-delay: .20s; }
.yt-tool-card:nth-child(5) { animation-delay: .25s; }
.yt-tool-card:nth-child(6) { animation-delay: .30s; }
.yt-tool-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(41,58,51,.14);
}
.yt-tool-card:active { transform: scale(0.97); }

.yt-card-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  margin-bottom: 4px;
  background: var(--tool-accent, #52776c);
  color: #fff;
  flex-shrink: 0;
}
.yt-tool-card b {
  font-size: 15px;
  font-weight: 800;
  color: var(--yt-ink);
}
.yt-tool-card em {
  font-size: 12px;
  font-weight: 500;
  color: var(--yt-muted);
  font-style: normal;
  line-height: 1.4;
}
.yt-tool-card i {
  display: flex;
  gap: 6px;
  margin-top: 6px;
  font-size: 11px;
  font-style: normal;
}
.yt-tool-card i span {
  padding: 2px 8px;
  border-radius: 8px;
  background: rgba(255,255,255,.66);
  color: #374151;
  font-weight: 600;
}
.yt-tool-card i span:last-child {
  background: rgba(255,255,255,.52);
  color: #4b5563;
}

.yt-tool-card.palette-0 { --tool-bg:#e8fff7; --tool-border:#bff3df; --tool-accent:#10b981; }
.yt-tool-card.palette-1 { --tool-bg:#f3edff; --tool-border:#dfd1ff; --tool-accent:#8b5cf6; }
.yt-tool-card.palette-2 { --tool-bg:#fff0e8; --tool-border:#ffd8c5; --tool-accent:#f97316; }
.yt-tool-card.palette-3 { --tool-bg:#fff9d9; --tool-border:#f8e99b; --tool-accent:#eab308; }
.yt-tool-card.palette-4 { --tool-bg:#f1fddb; --tool-border:#d7f1a9; --tool-accent:#65a30d; }
.yt-tool-card.palette-5 { --tool-bg:#e6faf7; --tool-border:#bfece5; --tool-accent:#14b8a6; }
.yt-tool-card.palette-6 { --tool-bg:#eeefff; --tool-border:#d7d9ff; --tool-accent:#6366f1; }
.yt-tool-card.palette-7 { --tool-bg:#fff2dc; --tool-border:#ffdda5; --tool-accent:#f59e0b; }
.yt-tool-card[class*="palette-"] .yt-card-icon { background: var(--tool-accent) !important; box-shadow: 0 8px 18px rgba(84,72,132,.17); }

/* 高级页：鲜亮、多彩、适合年轻用户的创作配色 */
.yt-skills-page .yt-tool-card {
  box-shadow: 0 11px 26px rgba(62, 79, 133, .12);
}
.yt-skills-page .yt-tool-card.palette-0 { --tool-bg:linear-gradient(145deg,#dffaff,#8ee9ff); --tool-border:#55d2f1; --tool-accent:#008bc3; }
.yt-skills-page .yt-tool-card.palette-1 { --tool-bg:linear-gradient(145deg,#fff8c7,#ffd95c); --tool-border:#f4bf2e; --tool-accent:#b86d00; }
.yt-skills-page .yt-tool-card.palette-2 { --tool-bg:linear-gradient(145deg,#f0e7ff,#c5a9ff); --tool-border:#a986f7; --tool-accent:#7045df; }
.yt-skills-page .yt-tool-card.palette-3 { --tool-bg:linear-gradient(145deg,#ffe5db,#ffad8d); --tool-border:#ff8b66; --tool-accent:#e55327; }
.yt-skills-page .yt-tool-card.palette-4 { --tool-bg:linear-gradient(145deg,#efffc8,#bff15d); --tool-border:#9cdd36; --tool-accent:#5d9300; }
.yt-skills-page .yt-tool-card.palette-5 { --tool-bg:linear-gradient(145deg,#e3ecff,#9dbbff); --tool-border:#789cf4; --tool-accent:#365ed5; }
.yt-skills-page .yt-tool-card.palette-6 { --tool-bg:linear-gradient(145deg,#ffe2ef,#ff9dc5); --tool-border:#f77cad; --tool-accent:#db3577; }
.yt-skills-page .yt-tool-card.palette-7 { --tool-bg:linear-gradient(145deg,#fff0d5,#ffc66d); --tool-border:#f5a940; --tool-accent:#ca6f00; }
.yt-skills-page .yt-tool-card.palette-8 { --tool-bg:linear-gradient(145deg,#dffff5,#8aefcf); --tool-border:#58d8b3; --tool-accent:#078d6d; }
.yt-skills-page .yt-tool-card.palette-9 { --tool-bg:linear-gradient(145deg,#f8e5ff,#e3a8ff); --tool-border:#cb83ef; --tool-accent:#9b3fc8; }
.yt-skills-page .yt-tool-card.palette-10 { --tool-bg:linear-gradient(145deg,#e3f5ff,#91d5ff); --tool-border:#67bdf1; --tool-accent:#1679bd; }
.yt-skills-page .yt-tool-card.palette-11 { --tool-bg:linear-gradient(145deg,#fff1bd,#ffcf43); --tool-border:#eeb728; --tool-accent:#a96800; }
.yt-skills-page .yt-tool-card.palette-12 { --tool-bg:linear-gradient(145deg,#e9ffe3,#9ee991); --tool-border:#76d26a; --tool-accent:#388d34; }
.yt-skills-page .yt-tool-card.palette-13 { --tool-bg:linear-gradient(145deg,#ffe9e5,#ffaaa0); --tool-border:#f98d82; --tool-accent:#d94c40; }
.yt-skills-page .yt-tool-card.palette-14 { --tool-bg:linear-gradient(145deg,#e5e9ff,#aab5ff); --tool-border:#8795f3; --tool-accent:#4b59cc; }
.yt-skills-page .yt-tool-card.palette-15 { --tool-bg:linear-gradient(145deg,#e8fff0,#a0efb8); --tool-border:#76d996; --tool-accent:#238a50; }
.yt-skills-page .yt-tool-card .yt-card-icon {
  box-shadow: 0 9px 20px rgba(58, 64, 120, .23) !important;
}

/* 商业页：鲜亮的企业蓝、湖蓝与青绿，和高级页明确区分 */
.yt-business-page .yt-tool-card {
  box-shadow: 0 11px 26px rgba(22, 108, 180, .12);
}
.yt-business-page .yt-tool-card.palette-0 { --tool-bg:linear-gradient(145deg,#def0ff,#91caff); --tool-border:#62afea; --tool-accent:#0873c4; }
.yt-business-page .yt-tool-card.palette-1 { --tool-bg:linear-gradient(145deg,#fff3c9,#ffd065); --tool-border:#edb943; --tool-accent:#a96800; }
.yt-business-page .yt-tool-card.palette-2 { --tool-bg:linear-gradient(145deg,#dcfbff,#88e7f5); --tool-border:#5dcbdc; --tool-accent:#007c95; }
.yt-business-page .yt-tool-card.palette-3 { --tool-bg:linear-gradient(145deg,#ffe8df,#ffb192); --tool-border:#f6906d; --tool-accent:#d9572c; }
.yt-business-page .yt-tool-card.palette-4 { --tool-bg:linear-gradient(145deg,#e8e7ff,#b7b2ff); --tool-border:#9690ed; --tool-accent:#544bc9; }
.yt-business-page .yt-tool-card.palette-5 { --tool-bg:linear-gradient(145deg,#e9ffd9,#aeea78); --tool-border:#8bd054; --tool-accent:#4a8a19; }
.yt-business-page .yt-tool-card.palette-6 { --tool-bg:linear-gradient(145deg,#e4f3ff,#9cd7ff); --tool-border:#71bae9; --tool-accent:#2477aa; }
.yt-business-page .yt-tool-card.palette-7 { --tool-bg:linear-gradient(145deg,#fff0d9,#ffc174); --tool-border:#eea851; --tool-accent:#b86608; }
.yt-business-page .yt-tool-card.palette-8 { --tool-bg:linear-gradient(145deg,#e3fff8,#94ead4); --tool-border:#69d0b5; --tool-accent:#087d64; }
.yt-business-page .yt-tool-card.palette-9 { --tool-bg:linear-gradient(145deg,#ffe4ec,#fca8bd); --tool-border:#ef879f; --tool-accent:#c94061; }
.yt-business-page .yt-tool-card.palette-10 { --tool-bg:linear-gradient(145deg,#f4e8ff,#d5acff); --tool-border:#bd8ce9; --tool-accent:#8544b9; }
.yt-business-page .yt-tool-card.palette-11 { --tool-bg:linear-gradient(145deg,#e5edff,#a6bcff); --tool-border:#7d9bee; --tool-accent:#3d5dc3; }
.yt-business-page .yt-tool-card.palette-12 { --tool-bg:linear-gradient(145deg,#fff7c9,#f8d95d); --tool-border:#e6bf37; --tool-accent:#9e7000; }
.yt-business-page .yt-tool-card.palette-13 { --tool-bg:linear-gradient(145deg,#e4fff0,#99e7ba); --tool-border:#6ecb94; --tool-accent:#2c8051; }
.yt-business-page .yt-tool-card.palette-14 { --tool-bg:linear-gradient(145deg,#e5f7ff,#9ddff3); --tool-border:#73c5dc; --tool-accent:#257d98; }
.yt-business-page .yt-tool-card.palette-15 { --tool-bg:linear-gradient(145deg,#ffebe2,#fdb499); --tool-border:#ee9475; --tool-accent:#c85b34; }
.yt-business-page .yt-tool-card .yt-card-icon {
  box-shadow: 0 9px 20px rgba(14, 105, 178, .23) !important;
}
.yt-skills-page .yt-tool-card b,
.yt-business-page .yt-tool-card b { color:#101828; }
.yt-skills-page .yt-tool-card em,
.yt-business-page .yt-tool-card em { color:#35465c; }

/* Tone variants for card icons */
.yt-tool-card.tone-pink .yt-card-icon { background: linear-gradient(135deg, #FF7AC8, #FFB3DE); }
.yt-tool-card.tone-blue .yt-card-icon { background: linear-gradient(135deg, #3B82F6, #7DA8FF); }
.yt-tool-card.tone-purple .yt-card-icon { background: linear-gradient(135deg, #8B5CF6, #C4B5FD); }
.yt-tool-card.tone-cyan .yt-card-icon { background: linear-gradient(135deg, #06B6D4, #67E8F9); }
.yt-tool-card.tone-indigo .yt-card-icon { background: linear-gradient(135deg, #6366F1, #A5B4FC); }

/* ========== Mine Page ========== */
.yt-mine-page {
  padding: 0 16px;
}

.yt-profile-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px;
  border-radius: var(--yt-radius-card);
  background: var(--yt-hero-gradient);
  color: #fff;
  box-shadow: 0 10px 28px rgba(79,140,255,.22);
  margin: 12px 0;
}
.yt-profile-card .avatar {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: rgba(255,255,255,.25);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 800;
  flex-shrink: 0;
}
.yt-profile-card h2 {
  font-size: 18px;
  font-weight: 800;
  margin-bottom: 2px;
}
.yt-profile-card p {
  font-size: 12px;
  font-weight: 500;
  opacity: .9;
}
.yt-profile-card .primary-mini {
  margin-left: auto;
  padding: 8px 16px;
  border: none;
  border-radius: 14px;
  background: rgba(255,255,255,.95);
  color: var(--yt-blue);
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  transition: transform .2s ease;
}
.yt-profile-card .primary-mini:active { transform: scale(0.93); }

.yt-wallet-card {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px 18px;
  border-radius: var(--yt-radius-card);
  background: var(--yt-card-bg);
  border: 1px solid var(--yt-card-border);
  box-shadow: var(--yt-card-shadow);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  margin-bottom: 12px;
}
.yt-wallet-card span {
  font-size: 13px;
  color: var(--yt-muted);
  font-weight: 600;
}
.yt-wallet-card b {
  font-size: 24px;
  font-weight: var(--yt-font-heavy);
  color: var(--yt-ink);
}
.yt-wallet-card em {
  font-size: 12px;
  color: var(--yt-muted);
  font-style: normal;
  font-weight: 500;
}
.yt-wallet-card button {
  margin-left: auto;
  padding: 8px 14px;
  border: none;
  border-radius: 12px;
  background: var(--yt-gradient);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(59,130,246,.2);
  transition: transform .2s ease;
}
.yt-wallet-card button:active { transform: scale(0.93); }

.yt-mine-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 12px;
}
.yt-mine-grid button {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 14px;
  border-radius: var(--yt-radius-card);
  background: var(--yt-card-bg);
  border: 1px solid var(--yt-card-border);
  box-shadow: var(--yt-card-shadow);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  cursor: pointer;
  transition: all .25s ease;
  text-align: left;
}
.yt-mine-grid button:hover { transform: translateY(-2px); }
.yt-mine-grid button:active { transform: scale(0.97); }
.yt-mine-grid button b {
  font-size: 15px;
  font-weight: 800;
  color: var(--yt-ink);
}
.yt-mine-grid button span {
  font-size: 12px;
  color: var(--yt-muted);
  font-weight: 500;
}

.settings-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
  border-radius: var(--yt-radius-card);
  overflow: hidden;
  background: var(--yt-card-bg);
  border: 1px solid var(--yt-card-border);
  box-shadow: var(--yt-card-shadow);
  margin-bottom: 100px;
}
.settings-list button {
  padding: 14px 18px;
  border: none;
  background: rgba(255,255,255,.6);
  font-size: 14px;
  font-weight: 600;
  color: var(--yt-ink);
  cursor: pointer;
  text-align: left;
  transition: background .2s ease;
}
.settings-list button:not(:last-child) {
  border-bottom: 1px solid rgba(59,130,246,.06);
}
.settings-list button:active { background: rgba(59,130,246,.06); }

/* ========== Tool Detail Page ========== */
.tool-screen {
  padding: 0 16px;
  min-height: 100vh;
}

.back-btn {
  position: sticky;
  top: 12px;
  z-index: 50;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(59,130,246,.12);
  border-radius: 12px;
  background: rgba(255,255,255,.8);
  color: var(--yt-blue);
  font-size: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 12px 0;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: transform .2s ease;
}
.back-btn:active { transform: scale(0.92); }

.tool-hero {
  border-radius: var(--yt-radius-card);
  padding: 22px 20px;
  margin-bottom: 14px;
  background: var(--yt-hero-gradient);
  color: #fff;
  box-shadow: 0 10px 28px rgba(79,140,255,.22);
}
.tool-hero.compact { padding: 18px 16px; }
.tool-hero .tool-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  background: rgba(255,255,255,.25);
  margin-bottom: 8px;
}
.tool-hero .tool-icon.tone-blue { background: rgba(59,130,246,.3); }
.tool-hero h1 {
  font-size: 20px;
  font-weight: var(--yt-font-heavy);
  margin-bottom: 4px;
}
.tool-hero p {
  font-size: 13px;
  font-weight: 500;
  opacity: .9;
}

.yt-form-card {
  padding: 20px 18px;
  border-radius: var(--yt-radius-card);
  background: var(--yt-card-bg);
  border: 1px solid var(--yt-card-border);
  box-shadow: var(--yt-card-shadow);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  margin-bottom: 14px;
}
.yt-form-card h2 {
  font-size: 17px;
  font-weight: 800;
  color: var(--yt-ink);
  margin-bottom: 12px;
}

.yt-flow-list {
  list-style: none;
  counter-reset: flow;
  margin-bottom: 12px;
}
.yt-flow-list li {
  counter-increment: flow;
  position: relative;
  padding: 10px 0 10px 36px;
  font-size: 14px;
  font-weight: 500;
  color: var(--yt-ink);
  border-bottom: 1px solid rgba(59,130,246,.06);
}
.yt-flow-list li:last-child { border-bottom: none; }
.yt-flow-list li::before {
  content: counter(flow);
  position: absolute;
  left: 0;
  top: 9px;
  width: 24px;
  height: 24px;
  border-radius: 8px;
  background: var(--yt-gradient);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}

.yt-form-card .muted {
  font-size: 12px;
  color: var(--yt-muted);
  font-weight: 500;
  margin-bottom: 14px;
}

.primary-btn {
  display: block;
  width: 100%;
  padding: 14px;
  border: none;
  border-radius: var(--yt-radius-btn);
  background: var(--yt-gradient);
  color: #fff;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(59,130,246,.25);
  transition: all .2s ease;
}
.primary-btn:active {
  transform: scale(0.97);
  box-shadow: 0 3px 10px rgba(59,130,246,.18);
}

/* ========== Animations ========== */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ========== Ripple Effect ========== */
.ripple-container {
  position: relative;
  overflow: hidden;
}
.ripple-wave {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,.4);
  pointer-events: none;
  animation: rippleAnim .6s ease-out;
}
@keyframes rippleAnim {
  from {
    transform: scale(0);
    opacity: 0.6;
  }
  to {
    transform: scale(3);
    opacity: 0;
  }
}

/* ========== Scrollbar ========== */
::-webkit-scrollbar { width: 0; height: 0; }

/* ========== Responsive ========== */
@media (max-width: 360px) {
  .yt-app-head h1 { font-size: 24px; }
  .yt-input-hero h2 { font-size: 19px; }
  .yt-tool-grid { gap: 10px; }
  .yt-mine-grid { gap: 10px; }
}

/* ========== V21 project pages and delivery flow ========== */
body.tool-project-open .tabbar { display: none; }
body.tool-project-open #view { padding-bottom: 0; }
body.mine-subpage-open .tabbar { display: none; }
body.mine-subpage-open #view { padding-bottom: 0; }

.yt-project-page {
  min-height: 100vh;
  padding: 0 16px 36px;
  background: linear-gradient(180deg, rgba(247,251,255,.95), rgba(255,248,252,.94));
}
.yt-project-nav {
  position: sticky;
  top: 0;
  z-index: 80;
  display: grid;
  grid-template-columns: 44px minmax(0,1fr) auto;
  align-items: center;
  gap: 10px;
  padding: max(10px, env(safe-area-inset-top)) 0 10px;
  background: rgba(249,252,255,.9);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.yt-project-nav > button {
  width: 40px;
  height: 40px;
  border: 1px solid rgba(59,130,246,.12);
  border-radius: 14px;
  background: #fff;
  color: var(--yt-ink);
  font-size: 28px;
  line-height: 1;
  box-shadow: 0 5px 15px rgba(41,93,168,.1);
}
.yt-project-nav h1 { font-size: 17px; line-height: 1.2; font-weight: 850; }
.yt-project-nav p { margin-top: 2px; overflow: hidden; color: var(--yt-muted); font-size: 11px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.yt-project-nav > span { padding: 6px 10px; border-radius: 12px; background: rgba(59,130,246,.08); color: var(--yt-blue); font-size: 11px; }

.yt-project-hero {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 8px 0 14px;
  padding: 18px;
  border: 1px solid rgba(255,255,255,.75);
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(80,141,255,.96), rgba(255,126,200,.9));
  color: #fff;
  box-shadow: 0 12px 30px rgba(59,130,246,.2);
}
.yt-project-hero .yt-card-icon { margin: 0; background: rgba(255,255,255,.2); }
.yt-project-hero b { display: block; font-size: 18px; font-weight: 850; }
.yt-project-hero p { margin-top: 3px; font-size: 12px; font-weight: 500; opacity: .9; }

.yt-video-workflow {
  display: grid;
  gap: 11px;
  margin: 0 0 14px;
  padding: 15px;
  border: 1px solid rgba(74, 137, 245, .12);
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(239,247,255,.96), rgba(255,244,251,.94));
  box-shadow: 0 9px 26px rgba(67, 111, 193, .09);
}
.yt-video-workflow-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.yt-video-workflow-head small {
  display: block;
  color: var(--yt-muted);
  font-size: 10px;
  font-weight: 650;
}
.yt-video-workflow-head b {
  display: block;
  margin-top: 2px;
  color: var(--yt-ink);
  font-size: 15px;
  font-weight: 900;
}
.yt-video-workflow-head > span {
  flex: 0 0 auto;
  padding: 6px 10px;
  border-radius: 999px;
  background: #fff;
  color: #3b73d1;
  box-shadow: 0 5px 16px rgba(59,130,246,.1);
  font-size: 11px;
  font-weight: 850;
}
.yt-video-workflow-steps {
  display: flex;
  gap: 7px;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: none;
}
.yt-video-workflow-steps::-webkit-scrollbar { display: none; }
.yt-video-workflow-steps > span {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 0 10px 0 6px;
  border-radius: 12px;
  background: rgba(255,255,255,.9);
  color: #31415d;
  font-size: 11px;
  font-weight: 750;
}
.yt-video-workflow-steps i {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: linear-gradient(135deg, #5c9cff, #a071ef 58%, #ef7bbd);
  color: #fff;
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
}
.yt-video-workflow > p {
  color: var(--yt-muted);
  font-size: 10px;
  line-height: 1.55;
}

.yt-project-form,
.yt-project-chat {
  display: grid;
  gap: 13px;
  padding: 17px;
  border: 1px solid rgba(59,130,246,.08);
  border-radius: 20px;
  background: rgba(255,255,255,.9);
  box-shadow: 0 9px 24px rgba(55,112,220,.1);
}
.yt-project-chat { margin-top: 14px; }
.yt-project-field { display: grid; gap: 7px; min-width: 0; }
.yt-project-field > span { color: var(--yt-ink); font-size: 13px; font-weight: 750; }
.yt-project-field > span i { margin-left: 3px; color: #f43f5e; font-style: normal; }
.yt-project-field input,
.yt-project-field select,
.yt-project-field textarea,
.yt-project-chat textarea {
  width: 100%;
  min-height: 46px;
  border: 1px solid rgba(59,130,246,.1);
  border-radius: 14px;
  outline: none;
  background: #f8faff;
  color: var(--yt-ink);
  font: 500 14px/1.5 inherit;
  padding: 12px 13px;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.yt-project-field textarea,
.yt-project-chat textarea { min-height: 96px; resize: vertical; }
.yt-project-field input:focus,
.yt-project-field select:focus,
.yt-project-field textarea:focus,
.yt-project-chat textarea:focus { border-color: rgba(59,130,246,.45); background: #fff; box-shadow: 0 0 0 4px rgba(59,130,246,.08); }

.yt-upload-card {
  min-height: 112px;
  display: grid;
  place-items: center;
  gap: 2px;
  border: 1.5px dashed rgba(59,130,246,.3);
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(239,246,255,.9), rgba(255,241,249,.86));
  color: var(--yt-ink);
  padding: 14px;
}
.yt-upload-card:active { transform: scale(.985); }
.yt-upload-card b { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 12px; background: var(--yt-gradient); color: #fff; font-size: 23px; }
.yt-upload-card strong { margin-top: 4px; font-size: 14px; }
.yt-upload-card small { color: var(--yt-muted); font-size: 11px; font-weight: 500; text-align: center; }
.yt-upload-previews { display: flex; gap: 8px; overflow-x: auto; }
.yt-upload-previews figure { flex: 0 0 76px; min-width: 0; }
.yt-upload-previews img { width: 76px; height: 76px; display: block; border-radius: 12px; object-fit: cover; }
.yt-upload-previews figcaption,
.yt-upload-previews > span { max-width: 92px; overflow: hidden; color: var(--yt-muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }

.yt-human-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 9px; }
.yt-human-card { min-width: 0; padding: 7px; border: 1px solid rgba(59,130,246,.09); border-radius: 14px; background: #f8faff; text-align: left; transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.yt-human-card:active { transform: scale(.96); }
.yt-human-card.selected { border-color: var(--yt-blue); background: #fff; box-shadow: 0 5px 16px rgba(59,130,246,.16); }
.yt-human-card img { width: 100%; aspect-ratio: 1; display: block; border-radius: 10px; object-fit: cover; }
.yt-human-card b { display: block; margin-top: 5px; overflow: hidden; color: var(--yt-ink); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.yt-human-card small { display: block; overflow: hidden; color: var(--yt-muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }

.yt-project-chat .section-title { display: flex; align-items: baseline; justify-content: space-between; }
.yt-project-chat .section-title h2 { font-size: 16px; }
.yt-project-chat .section-title span { color: var(--yt-muted); font-size: 11px; }
.yt-project-messages { display: grid; gap: 8px; }
.yt-project-messages > div { max-width: 88%; padding: 10px 12px; border-radius: 14px; font-size: 13px; line-height: 1.55; }
.yt-project-messages .user { justify-self: end; background: var(--yt-gradient); color: #fff; border-bottom-right-radius: 5px; }
.yt-project-messages .assistant { justify-self: start; background: #f4f7ff; color: var(--yt-ink); border-bottom-left-radius: 5px; }
.empty-chat { color: var(--yt-muted); font-size: 12px; font-weight: 500; }

.yt-complete-card { margin-top: 16px; padding: 16px; border-radius: 20px; background: #fff; box-shadow: var(--yt-card-shadow); }
.yt-complete-title { display: flex; align-items: center; gap: 10px; }
.yt-complete-title > span { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 12px; background: #eafbf3; color: #0f9f61; font-weight: 900; }
.yt-complete-title b { font-size: 16px; }
.yt-complete-title p { margin-top: 2px; color: var(--yt-muted); font-size: 11px; }
.yt-complete-actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; margin-top: 14px; }
.yt-complete-actions button { min-height: 43px; border: 1px solid rgba(59,130,246,.12); border-radius: 13px; background: #f7f9ff; color: var(--yt-ink); font-size: 12px; font-weight: 750; }
.yt-complete-actions button:active { transform: scale(.97); }
.yt-complete-actions .primary { border: 0; background: var(--yt-gradient); color: #fff; }

.yt-mine-main-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
.yt-mine-main-grid button { min-height: 128px; padding: 14px 11px; align-items: flex-start; }
.yt-mine-icon { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 12px; background: var(--yt-gradient); color: #fff !important; font-size: 14px !important; font-weight: 850 !important; }
.yt-product-feed { display: grid; gap: 12px; padding: 0 16px 100px; }
.yt-product-feed .work-card { overflow: hidden; border-radius: 18px; background: #fff; box-shadow: var(--yt-card-shadow); padding: 14px; }
.yt-product-feed img,
.yt-product-feed video { width: 100%; max-height: 360px; display: block; margin: 10px 0; border-radius: 13px; object-fit: cover; }
.yt-product-meta { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.yt-product-meta time { flex: 0 0 auto; color: var(--yt-muted); font-size: 10px; }

@media (min-width: 481px) {
  .tabbar,
  .home-input-pill,
  .chat-fixed-composer { left: calc(50% - 228px); right: calc(50% - 228px); }
}

@media (max-width: 370px) {
  .yt-human-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .yt-mine-main-grid { grid-template-columns: 1fr; }
  .yt-mine-main-grid button { min-height: 96px; }
}

/* ========== V21 Mine and account flows ========== */
.yt-mine-v21 {
  min-height: calc(100vh - 76px);
  padding: max(18px, env(safe-area-inset-top)) 16px 100px;
}
.yt-mine-profile {
  display: grid;
  grid-template-columns: 54px minmax(0,1fr);
  align-items: center;
  gap: 12px;
  padding: 10px 2px 18px;
}
.yt-user-avatar {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  background: linear-gradient(145deg, #4c8eff, #8baeff 56%, #ff91cf);
  color: #fff;
  box-shadow: 0 8px 20px rgba(59,130,246,.22);
  font-size: 20px;
  font-weight: 900;
}
.yt-mine-profile h1 { font-size: 20px; line-height: 1.25; font-weight: 900; }
.yt-mine-profile p { margin-top: 4px; color: var(--yt-muted); font-size: 12px; font-weight: 550; }
.yt-balance-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 142px;
  padding: 22px;
  border: 1px solid rgba(255,255,255,.8);
  border-radius: 22px;
  background: linear-gradient(135deg, #276eea, #6199ff 62%, #ff86c8 135%);
  color: #fff;
  box-shadow: 0 14px 32px rgba(55,112,220,.2);
}
.yt-balance-panel div { display: grid; gap: 2px; }
.yt-balance-panel span { font-size: 13px; opacity: .86; }
.yt-balance-panel b { font-size: 34px; line-height: 1.15; font-weight: 900; }
.yt-balance-panel small { font-size: 11px; opacity: .82; }
.yt-balance-panel button {
  min-height: 42px;
  padding: 0 15px;
  border: 0;
  border-radius: 14px;
  background: #fff;
  color: #286eea;
  font-size: 12px;
  font-weight: 850;
  white-space: nowrap;
}
.yt-mine-section { margin-top: 20px; }
.yt-section-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 2px 11px; }
.yt-section-heading h2 { font-size: 16px; font-weight: 900; }
.yt-section-heading span { color: var(--yt-muted); font-size: 11px; font-weight: 500; }
.yt-mine-actions { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
.yt-mine-actions > button {
  min-width: 0;
  min-height: 112px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 4px;
  padding: 13px;
  border: 1px solid rgba(59,130,246,.08);
  border-radius: 18px;
  background: rgba(255,255,255,.92);
  box-shadow: 0 8px 20px rgba(55,112,220,.09);
  text-align: left;
}
.yt-mine-actions > button:active { transform: scale(.96); }
.yt-mine-actions > button > span {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  margin-bottom: 4px;
  border-radius: 12px;
  color: #fff;
  font-size: 13px;
  font-weight: 900;
}
.yt-mine-actions .tone-blue { background: #4b8cf7; }
.yt-mine-actions .tone-pink { background: #f477b8; }
.yt-mine-actions .tone-purple { background: #8a75ec; }
.yt-mine-actions b { max-width: 100%; font-size: 14px; font-weight: 850; }
.yt-mine-actions small { max-width: 100%; color: var(--yt-muted); font-size: 10px; font-weight: 500; }
.yt-mine-shortcuts,
.yt-settings-group,
.yt-info-list,
.yt-service-actions {
  overflow: hidden;
  border: 1px solid rgba(59,130,246,.08);
  border-radius: 18px;
  background: rgba(255,255,255,.92);
  box-shadow: 0 8px 22px rgba(55,112,220,.08);
}
.yt-setting-row {
  width: 100%;
  min-height: 68px;
  display: grid;
  grid-template-columns: 38px minmax(0,1fr);
  align-items: center;
  gap: 11px;
  padding: 11px 14px;
  border: 0;
  border-bottom: 1px solid rgba(59,130,246,.06);
  background: transparent;
  text-align: left;
}
.yt-setting-row:last-child { border-bottom: 0; }
.yt-setting-row:active { background: rgba(59,130,246,.05); }
.yt-setting-icon {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: #fff;
  font-size: 11px;
  font-weight: 900;
}
.yt-setting-icon.tone-blue { background: #4b8cf7; }
.yt-setting-icon.tone-pink { background: #f477b8; }
.yt-setting-icon.tone-purple { background: #8873e8; }
.yt-setting-row > span:nth-child(2) { min-width: 0; display: grid; gap: 2px; }
.yt-setting-row b { overflow: hidden; font-size: 14px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.yt-setting-row small { overflow: hidden; color: var(--yt-muted); font-size: 10px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }

.yt-mine-subpage {
  min-height: 100vh;
  background: linear-gradient(180deg, #f7fbff 0%, #fff8fc 100%);
}
.yt-subpage-nav {
  position: sticky;
  top: 0;
  z-index: 80;
  display: grid;
  grid-template-columns: 44px minmax(0,1fr) 44px;
  align-items: center;
  gap: 9px;
  min-height: 64px;
  padding: max(10px, env(safe-area-inset-top)) 16px 10px;
  border-bottom: 1px solid rgba(59,130,246,.06);
  background: rgba(249,252,255,.9);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.yt-nav-icon {
  width: 40px;
  height: 40px;
  border: 1px solid rgba(59,130,246,.1);
  border-radius: 14px;
  background: #fff;
  color: var(--yt-ink);
  box-shadow: 0 5px 14px rgba(55,112,220,.09);
  font-size: 20px;
  font-weight: 700;
}
.yt-subpage-nav h1 { font-size: 17px; line-height: 1.2; font-weight: 900; text-align: center; }
.yt-subpage-nav p { margin-top: 2px; overflow: hidden; color: var(--yt-muted); font-size: 10px; font-weight: 500; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.yt-subpage-content { display: grid; gap: 14px; padding: 14px 16px max(34px, env(safe-area-inset-bottom)); }
.yt-loading-state,
.yt-empty-state {
  min-height: 260px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 28px;
  border: 1px solid rgba(59,130,246,.08);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 8px 22px rgba(55,112,220,.08);
  text-align: center;
}
.yt-loading-state > span { width: 28px; height: 28px; border: 3px solid #dbe8ff; border-top-color: #4b8cf7; border-radius: 50%; animation: ytSpin .8s linear infinite; }
.yt-loading-state b,
.yt-empty-state b { font-size: 16px; font-weight: 850; }
.yt-loading-state p,
.yt-empty-state p { max-width: 260px; color: var(--yt-muted); font-size: 12px; font-weight: 500; }
.yt-empty-state > span { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 15px; background: #eef5ff; color: #4b8cf7; font-weight: 900; }
.yt-empty-state.error > span { background: #fff0f3; color: #e34c6c; }
.yt-empty-state button,
.yt-notice-card button,
.yt-primary-wide {
  min-height: 43px;
  padding: 0 18px;
  border: 0;
  border-radius: 14px;
  background: linear-gradient(135deg, #3b82f6, #7c9df7 62%, #f47cbf);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
}
@keyframes ytSpin { to { transform: rotate(360deg); } }

.yt-member-summary {
  min-height: 146px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px;
  border-radius: 22px;
  background: linear-gradient(135deg, #172d58, #315b9d 72%, #667db4);
  color: #fff;
  box-shadow: 0 13px 30px rgba(24,54,103,.2);
}
.yt-member-summary span,
.yt-member-summary p { font-size: 11px; opacity: .76; }
.yt-member-summary h2 { margin: 4px 0; font-size: 22px; font-weight: 900; }
.yt-member-points { flex: 0 0 auto; display: grid; gap: 1px; padding-left: 18px; border-left: 1px solid rgba(255,255,255,.2); text-align: right; }
.yt-member-points small { font-size: 10px; opacity: .75; }
.yt-member-points b { font-size: 26px; font-weight: 900; }
.yt-member-links { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.yt-member-links button {
  min-width: 0;
  display: grid;
  grid-template-columns: 36px minmax(0,1fr);
  gap: 1px 10px;
  align-items: center;
  padding: 13px;
  border: 1px solid rgba(59,130,246,.08);
  border-radius: 17px;
  background: #fff;
  box-shadow: 0 7px 18px rgba(55,112,220,.08);
  text-align: left;
}
.yt-member-links span { grid-row: 1 / 3; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 12px; background: #edf4ff; color: #3b82f6; font-size: 12px; font-weight: 900; }
.yt-member-links b { font-size: 13px; }
.yt-member-links small { overflow: hidden; color: var(--yt-muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.yt-signin-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 17px;
  border: 1px solid rgba(244,124,191,.14);
  border-radius: 18px;
  background: linear-gradient(135deg, #fff, #fff4fa);
  box-shadow: 0 8px 20px rgba(244,124,191,.09);
}
.yt-signin-card div { min-width: 0; display: grid; gap: 2px; }
.yt-signin-card span { color: #e3579f; font-size: 11px; }
.yt-signin-card b { overflow: hidden; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.yt-signin-card small { color: var(--yt-muted); font-size: 10px; }
.yt-signin-card button { flex: 0 0 auto; min-height: 39px; padding: 0 13px; border: 0; border-radius: 13px; background: #f477b8; color: #fff; font-size: 11px; font-weight: 800; }
.yt-signin-card button:disabled { background: #d8dee9; color: #8290a2; }
.yt-plan-list { display: grid; gap: 11px; }
.yt-plan-card { padding: 17px; border: 1px solid rgba(59,130,246,.09); border-radius: 19px; background: #fff; box-shadow: 0 8px 22px rgba(55,112,220,.08); }
.yt-plan-card.hot { border-color: rgba(244,124,191,.32); box-shadow: 0 9px 24px rgba(244,124,191,.12); }
.yt-plan-title { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.yt-plan-title span { display: inline-block; padding: 3px 7px; border-radius: 7px; background: #edf4ff; color: #3b82f6; font-size: 9px; }
.yt-plan-card.hot .yt-plan-title span { background: #fff0f8; color: #e3579f; }
.yt-plan-title h3 { margin-top: 4px; font-size: 17px; font-weight: 900; }
.yt-plan-title strong { color: #1d5fda; font-size: 24px; font-weight: 900; }
.yt-plan-title strong small { margin-right: 2px; font-size: 11px; }
.yt-plan-facts { display: flex; flex-wrap: wrap; gap: 7px; margin: 13px 0; }
.yt-plan-facts span { padding: 6px 9px; border-radius: 10px; background: #f4f7fc; color: #66768c; font-size: 10px; }
.yt-plan-card > button { width: 100%; min-height: 43px; border: 0; border-radius: 14px; background: #3b82f6; color: #fff; font-size: 13px; font-weight: 850; }
.yt-plan-card.hot > button { background: linear-gradient(135deg, #3b82f6, #f477b8); }

.yt-settings-group h2 { padding: 13px 14px 5px; color: var(--yt-muted); font-size: 11px; font-weight: 750; }
.yt-logout-button { min-height: 48px; border: 1px solid rgba(226,67,95,.12); border-radius: 16px; background: #fff; color: #d74361; font-size: 14px; font-weight: 800; }
.yt-account-card { display: flex; align-items: center; gap: 13px; padding: 19px; border-radius: 19px; background: #fff; box-shadow: 0 8px 22px rgba(55,112,220,.08); }
.yt-account-card h2 { font-size: 18px; font-weight: 900; }
.yt-account-card p { margin-top: 3px; color: var(--yt-muted); font-size: 11px; }
.yt-info-list div { min-height: 54px; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 15px; border-bottom: 1px solid rgba(59,130,246,.06); }
.yt-info-list div:last-child { border-bottom: 0; }
.yt-info-list span { color: var(--yt-muted); font-size: 12px; }
.yt-info-list b { max-width: 62%; overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.yt-primary-wide { width: 100%; }
.yt-service-card { padding: 25px 20px; border-radius: 20px; background: linear-gradient(135deg, #3b82f6, #789cf1 68%, #f07bbb); color: #fff; text-align: center; }
.yt-service-card > span { width: 44px; height: 44px; display: grid; place-items: center; margin: 0 auto 10px; border-radius: 15px; background: rgba(255,255,255,.2); font-weight: 900; }
.yt-service-card h2 { font-size: 18px; }
.yt-service-card p { margin-top: 5px; font-size: 11px; opacity: .84; }
.yt-service-actions a,
.yt-service-actions button { min-height: 68px; display: grid; grid-template-columns: 38px minmax(0,1fr); align-items: center; gap: 11px; padding: 11px 14px; border: 0; border-bottom: 1px solid rgba(59,130,246,.06); background: transparent; color: var(--yt-ink); text-align: left; text-decoration: none; }
.yt-service-actions > :last-child { border-bottom: 0; }
.yt-service-actions a > span,
.yt-service-actions button > span { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 12px; background: #edf4ff; color: #3b82f6; font-size: 12px; font-weight: 900; }
.yt-service-actions div { min-width: 0; display: grid; gap: 2px; }
.yt-service-actions b { font-size: 13px; }
.yt-service-actions small { overflow: hidden; color: var(--yt-muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }

.yt-agreement-card { display: grid; gap: 10px; }
.yt-agreement-card section { display: grid; grid-template-columns: 30px minmax(0,1fr); gap: 10px; padding: 16px; border: 1px solid rgba(59,130,246,.08); border-radius: 17px; background: #fff; box-shadow: 0 7px 18px rgba(55,112,220,.07); }
.yt-agreement-card section > span { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 10px; background: #edf4ff; color: #3b82f6; font-size: 11px; font-weight: 900; }
.yt-agreement-card h2 { margin: 1px 0 6px; color: #182338; font-size: 14px; line-height: 1.35; font-weight: 850; }
.yt-agreement-card p { color: #445268; font-size: 13px; font-weight: 520; line-height: 1.75; }
.yt-notice-card { padding: 17px; border: 1px solid rgba(244,124,191,.12); border-radius: 17px; background: #fff7fb; }
.yt-notice-card b { font-size: 14px; }
.yt-notice-card p { margin: 4px 0 12px; color: var(--yt-muted); font-size: 11px; }

.yt-work-feed,
.yt-ledger-list,
.yt-order-list { display: grid; gap: 12px; }
.yt-work-card { position: relative; overflow: hidden; padding: 16px; border: 1px solid rgba(59,130,246,.08); border-radius: 19px; background: #fff; box-shadow: 0 8px 22px rgba(55,112,220,.08); }
.yt-work-open { position: absolute; inset: 0; z-index: 0; border: 0; background: transparent; }
.yt-work-card > :not(.yt-work-open) { position: relative; z-index: 1; pointer-events: none; }
.yt-work-actions button,
.yt-work-card video { pointer-events: auto; }
.yt-work-meta { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.yt-work-meta div { min-width: 0; }
.yt-work-meta span { display: inline-block; padding: 3px 7px; border-radius: 8px; background: #edf4ff; color: #3b82f6; font-size: 9px; }
.yt-work-meta h2 { margin-top: 5px; overflow: hidden; font-size: 16px; font-weight: 900; text-overflow: ellipsis; white-space: nowrap; }
.yt-work-meta time { flex: 0 0 auto; color: var(--yt-muted); font-size: 9px; }
.yt-work-card img,
.yt-work-card video { width: 100%; max-height: 360px; display: block; margin: 12px 0; border-radius: 14px; object-fit: cover; }
.yt-file-delivery { display: flex; align-items: center; gap: 12px; margin: 12px 0; padding: 14px; border: 1px solid rgba(59,130,246,.14); border-radius: 15px; background: linear-gradient(135deg, rgba(219,234,254,.8), rgba(252,231,243,.72)); }
.yt-file-delivery > span { width: 44px; height: 44px; flex: 0 0 44px; display: grid; place-items: center; border-radius: 13px; color: #fff; background: linear-gradient(135deg, #3b82f6, #8b5cf6); font-size: 12px; font-weight: 900; }
.yt-file-delivery b { display: block; color: #172033; font-size: 14px; }
.yt-file-delivery p { margin: 4px 0 0; color: #667085; font-size: 12px; line-height: 1.5; }
.yt-file-delivery.detail { margin-top: 0; padding: 18px; }
.yt-work-preview { max-height: 118px; overflow: hidden; color: #475569; font-size: 12px; font-weight: 500; line-height: 1.65; }
.yt-work-actions { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; margin-top: 13px; }
.yt-work-actions button,
.yt-detail-actions button,
.yt-detail-actions a { min-height: 40px; display: grid; place-items: center; padding: 0 11px; border: 1px solid rgba(59,130,246,.1); border-radius: 12px; background: #f7f9fe; color: var(--yt-ink); font-size: 11px; font-weight: 800; text-decoration: none; }
.yt-work-actions .primary,
.yt-detail-actions .primary { border: 0; background: #3b82f6; color: #fff; }
.yt-detail-media { width: 100%; max-height: 58vh; display: block; border-radius: 18px; object-fit: contain; background: #eef3fb; }
.yt-work-detail { padding: 18px; border: 1px solid rgba(59,130,246,.08); border-radius: 18px; background: #fff; color: #3d4b61; box-shadow: 0 8px 22px rgba(55,112,220,.08); font-size: 13px; font-weight: 500; line-height: 1.75; }
.yt-detail-actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; }
.yt-code-deploy-card,
.yt-code-deploy-status { display: grid; gap: 13px; padding: 17px; border: 1px solid rgba(100,153,235,.15); border-radius: 20px; background: rgba(255,255,255,.94); box-shadow: 0 12px 32px rgba(61,112,185,.09); }
.yt-code-deploy-warning { padding: 14px; border-radius: 15px; background: linear-gradient(135deg,#eef7ff,#fff1f8); }
.yt-code-deploy-warning b { font-size: 15px; }
.yt-code-deploy-warning p { margin-top: 5px; color: #66758b; font-size: 11px; line-height: 1.55; }
.yt-code-deploy-card label { display: grid; gap: 7px; }
.yt-code-deploy-card label > span { color: #435066; font-size: 11px; font-weight: 850; }
.yt-code-deploy-card input[type="text"],
.yt-code-deploy-card input:not([type]) { width: 100%; min-height: 44px; box-sizing: border-box; padding: 0 13px; border: 1px solid #e3ebf7; border-radius: 13px; outline: 0; background: #f8fbff; color: #111827; font-size: 13px; }
.yt-code-deploy-card input:focus { border-color: #84b7ff; box-shadow: 0 0 0 3px rgba(96,165,250,.12); }
.yt-code-deploy-grid { display: grid; grid-template-columns: 1fr 100px; gap: 10px; }
.yt-code-key-upload { padding: 13px; border: 1px dashed #bdd4f4; border-radius: 14px; background: #f8fbff; }
.yt-code-key-upload small { color: #7c899d; font-size: 10px; line-height: 1.45; }
.yt-code-confirm { grid-template-columns: 20px 1fr; align-items: start; padding: 12px; border-radius: 13px; background: #fff8e8; }
.yt-code-confirm input { width: 18px; height: 18px; margin: 0; }
.yt-code-deploy-submit { min-height: 46px; border: 0; border-radius: 14px; background: linear-gradient(135deg,#4d9cff,#8b8bf4 55%,#ed88c2); color: #fff; font-size: 13px; font-weight: 900; box-shadow: 0 10px 24px rgba(102,116,225,.2); }
.yt-code-deploy-submit:disabled { opacity: .55; }
.yt-code-progress { height: 6px; overflow: hidden; border-radius: 999px; background: #edf2fa; }
.yt-code-progress span { height: 100%; display: block; border-radius: inherit; background: linear-gradient(90deg,#58a9ff,#9c87f3,#ef8ec3); transition: width .3s ease; }
.yt-code-deploy-status > b { font-size: 13px; }
.yt-code-deploy-status > p,
.yt-code-deploy-result small { color: #77859a; font-size: 10px; }
.yt-code-deploy-status > button,
.yt-code-deploy-result button { min-height: 38px; border: 0; border-radius: 11px; background: #edf4ff; color: #3769b5; font-weight: 850; }
.yt-code-deploy-result { display: grid; gap: 7px; padding: 13px; border-radius: 14px; background: #ecfdf4; color: #147347; }
.yt-code-deploy-result.error { background: #fff1f2; color: #b4233b; }
.yt-ledger-list article,
.yt-order-list article { padding: 16px; border: 1px solid rgba(59,130,246,.08); border-radius: 18px; background: #fff; box-shadow: 0 7px 20px rgba(55,112,220,.08); }
.yt-ledger-list article { display: grid; grid-template-columns: 38px minmax(0,1fr) auto; align-items: center; gap: 11px; }
.yt-ledger-icon { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 12px; background: #fff0f3; color: #dd4d68; font-size: 18px; font-weight: 900; }
.yt-ledger-icon.refund { background: #eafbf3; color: #0f9f61; }
.yt-ledger-list h2 { overflow: hidden; font-size: 13px; font-weight: 850; text-overflow: ellipsis; white-space: nowrap; }
.yt-ledger-list p { margin-top: 3px; color: var(--yt-muted); font-size: 9px; }
.yt-ledger-list strong { color: #dd4d68; font-size: 12px; font-weight: 900; white-space: nowrap; }
.yt-ledger-list strong.refund { color: #0f9f61; }
.yt-order-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.yt-order-top > span { color: #4a5a70; font-size: 12px; font-weight: 800; }
.yt-order-top > b { padding: 4px 8px; border-radius: 8px; background: #fff5e8; color: #c97a1a; font-size: 9px; }
.yt-order-top > b.status-paid { background: #eafbf3; color: #0f9f61; }
.yt-order-top > b.status-failed,
.yt-order-top > b.status-closed { background: #fff0f3; color: #d94d68; }
.yt-order-list h2 { margin: 13px 0 4px; font-size: 22px; font-weight: 900; }
.yt-order-list p,
.yt-order-list time { display: block; overflow: hidden; color: var(--yt-muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 355px) {
  .yt-mine-actions { grid-template-columns: 1fr; }
  .yt-mine-actions > button { min-height: 82px; display: grid; grid-template-columns: 36px minmax(0,1fr); grid-template-rows: auto auto; gap: 1px 10px; }
  .yt-mine-actions > button > span { grid-row: 1 / 3; margin: 0; }
  .yt-member-summary { align-items: flex-start; flex-direction: column; }
  .yt-member-points { width: 100%; padding: 10px 0 0; border-top: 1px solid rgba(255,255,255,.2); border-left: 0; text-align: left; }
}

/* ========== V21 current app shell and home polish ========== */
#app {
  width: 100%;
  max-width: 430px;
  min-height: 100vh;
  margin: 0 auto;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 8% 4%, rgba(137,196,255,.34), transparent 28%),
    radial-gradient(circle at 92% 10%, rgba(255,190,225,.36), transparent 31%),
    linear-gradient(180deg, #f7fbff 0%, #fff8fc 100%);
}

.tabbar {
  left: 50%;
  right: auto;
  bottom: max(14px, env(safe-area-inset-bottom));
  width: calc(100% - 36px);
  max-width: 394px;
  height: 64px;
  transform: translateX(-50%);
  border-radius: 28px;
  box-shadow: 0 18px 50px rgba(51,92,160,.16);
}
.tabbar .tab { min-width: 0; height: 100%; gap: 4px; padding: 7px 0; }
.tabbar .tab-icon { width: 24px; height: 24px; }
.tabbar .tab-icon img { width: 21px; height: 21px; }

.yantong-home {
  min-height: 100vh;
  padding: max(54px, calc(env(safe-area-inset-top) + 34px)) 22px 164px;
}
.yt-home-brand-title {
  width: 100%;
  margin: 0;
  color: #111827;
  font-size: 19px;
  font-weight: 900;
  line-height: 44px;
  text-align: center;
}
.yt-home-brand-title.chat-title {
  position: sticky;
  top: 0;
  z-index: 5;
  height: 50px;
  padding-top: env(safe-area-inset-top);
  background: rgba(247, 251, 255, .88);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(210, 229, 249, .68);
}
.yt-home-brand { position: relative; padding: 0 2px; animation: ytHomeEnter .5s ease both; }
.yt-home-brand::after {
  content: '';
  position: absolute;
  top: -24px;
  right: -46px;
  width: 126px;
  height: 126px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(244,114,182,.18), transparent 68%);
  pointer-events: none;
}
.yt-home-brand span { color: #3b82f6; font-size: 11px; font-weight: 900; letter-spacing: 1.8px; }
.yt-home-brand h1 { margin-top: 7px; color: #111827; font-size: 32px; line-height: 1.1; font-weight: 950; }
.yt-home-brand p { margin-top: 9px; color: #6b7280; font-size: 14px; font-weight: 520; }
.yt-hot-section { padding: 40px 0 0; }
.yt-hot-section .section-title { align-items: flex-end; justify-content: space-between; margin-bottom: 15px; }
.yt-hot-section .section-title h2 { color: #111827; font-size: 17px; line-height: 1.3; font-weight: 900; }
.yt-hot-section .section-title span { font-size: 11px; }
.yt-prompts { display: grid; grid-template-columns: 1fr; gap: 10px; }
.yt-prompts .yt-prompt {
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0 16px;
  border-color: rgba(220,231,246,.9);
  border-radius: 16px;
  background: rgba(255,255,255,.82);
  box-shadow: 0 8px 22px rgba(91,128,190,.09);
  color: #25324a;
  text-align: left;
  animation: ytPromptEnter .42s ease both;
}
.yt-prompts .yt-prompt:nth-child(2) { animation-delay: .04s; }
.yt-prompts .yt-prompt:nth-child(3) { animation-delay: .08s; }
.yt-prompts .yt-prompt:nth-child(4) { animation-delay: .12s; }
.yt-prompts .yt-prompt:nth-child(5) { animation-delay: .16s; }
.yt-prompts .yt-prompt:nth-child(6) { animation-delay: .20s; }

.home-input-pill,
.chat-fixed-composer {
  left: 50%;
  right: auto;
  bottom: 92px;
  width: calc(100% - 36px);
  max-width: 394px;
  height: 56px;
  padding: 6px 6px 6px 18px;
  transform: translateX(-50%);
  border-color: rgba(226,235,248,.95);
  border-radius: 999px;
  background: rgba(255,255,255,.9);
  box-shadow: 0 18px 44px rgba(73,106,176,.16);
}
.home-input-pill input,
.chat-fixed-composer input { min-width: 0; height: 100%; font-size: 14px; font-weight: 550; }
.home-input-pill button,
.chat-fixed-composer button {
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  font-size: 22px;
  line-height: 1;
  box-shadow: 0 10px 24px rgba(147,92,246,.3);
}
.home-input-pill button span,
.chat-fixed-composer button span { display: block; width: 22px; height: 22px; line-height: 20px; text-align: center; }

.yt-chat-screen { min-height: 100vh; }
.yt-chat-head {
  min-height: 66px;
  padding: max(13px, env(safe-area-inset-top)) 18px 11px;
  background: rgba(249,252,255,.9);
}
.yt-chat-head h1 { font-size: 19px; }
.yt-chat-head p { margin-top: 2px; font-size: 10px; }
.yt-chat-flow {
  min-height: calc(100vh - 66px);
  padding: 20px 16px 170px;
  overflow: visible;
  gap: 16px;
}
.yt-message { max-width: 91%; }
.yt-message .yt-bubble { padding: 13px 15px; border-radius: 18px; line-height: 1.65; }
.yt-message.assistant .yt-bubble { border-bottom-left-radius: 7px; }
.yt-message.user .yt-bubble { border-bottom-right-radius: 7px; }

.yt-tool-page { min-height: 100vh; padding: max(20px, env(safe-area-inset-top)) 16px 102px; }
.yt-page-hero { margin: 0 0 16px; padding: 21px 19px; border-radius: 20px; }
.yt-tool-grid { padding-bottom: 10px; }
.yt-tool-card { min-height: 154px; border-radius: 18px; }
.yt-tool-card:active { transform: scale(.95); }

.yt-project-nav > button {
  width: 38px;
  height: 38px;
  border: 1px solid rgba(226,235,248,.95);
  border-radius: 50%;
  background: rgba(255,255,255,.9);
  color: #111827;
  box-shadow: 0 10px 26px rgba(73,106,176,.14);
  font-size: 19px;
  line-height: 1;
}
.yt-project-chat .primary-btn:disabled { background: #a8b4c5; box-shadow: none; cursor: wait; }
.yt-project-status {
  display: grid;
  grid-template-columns: 40px minmax(0,1fr) auto;
  align-items: center;
  gap: 11px;
  margin: 0 0 14px;
  padding: 14px;
  border: 1px solid rgba(59,130,246,.1);
  border-radius: 17px;
  background: rgba(255,255,255,.92);
  box-shadow: 0 8px 22px rgba(55,112,220,.08);
}
.yt-project-status.generating {
  display: block;
  border-color: rgba(99,102,241,.12);
  background: linear-gradient(145deg, rgba(242,249,255,.98), rgba(255,247,253,.98));
  box-shadow: 0 14px 36px rgba(86,106,214,.12);
}
.yt-generation-head {
  display: flex;
  align-items: center;
  gap: 11px;
}
.yt-generation-head > div { min-width: 0; flex: 1; }
.yt-generation-head > strong {
  color: #4069d8;
  font-size: 14px;
  font-weight: 900;
}
.yt-generation-wave {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  border-radius: 12px;
  background: linear-gradient(135deg, #4d9cff 0%, #8177f5 58%, #ee7dbc 100%);
  box-shadow: 0 9px 20px rgba(105,102,231,.24);
}
.yt-generation-wave i {
  width: 3px;
  height: 9px;
  border-radius: 999px;
  background: #fff;
  animation: ytGenerationWave .9s ease-in-out infinite;
}
.yt-generation-wave i:nth-child(2) { animation-delay: .1s; }
.yt-generation-wave i:nth-child(3) { animation-delay: .2s; }
.yt-generation-wave i:nth-child(4) { animation-delay: .3s; }
@keyframes ytGenerationWave {
  0%, 100% { height: 7px; opacity: .65; }
  50% { height: 18px; opacity: 1; }
}
.yt-generation-progress {
  height: 7px;
  margin-top: 13px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(91,125,190,.12);
}
.yt-generation-progress i {
  position: relative;
  display: block;
  height: 100%;
  min-width: 3%;
  border-radius: inherit;
  background: linear-gradient(90deg, #56a5ff, #7c70f4 58%, #f27cba);
  transition: width .35s ease;
}
.yt-generation-progress i::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 10%, rgba(255,255,255,.72) 50%, transparent 90%);
  transform: translateX(-100%);
  animation: ytProgressShine 1.35s linear infinite;
}
@keyframes ytProgressShine {
  to { transform: translateX(100%); }
}
.yt-generation-meta,
.yt-generation-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.yt-generation-meta {
  margin-top: 8px;
  color: #687891;
  font-size: 10px;
  font-weight: 650;
}
.yt-generation-foot {
  margin-top: 12px;
  padding-top: 11px;
  border-top: 1px solid rgba(91,125,190,.1);
}
.yt-generation-foot small {
  color: #7b899f;
  font-size: 10px;
  line-height: 1.45;
}
.yt-project-plan-ready {
  margin: 0 0 14px;
  padding: 16px;
  border: 1px solid rgba(99,102,241,.12);
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(246,251,255,.98), rgba(255,248,253,.98));
  box-shadow: 0 12px 30px rgba(86,106,214,.1);
}
.yt-plan-ready-title {
  display: flex;
  align-items: center;
  gap: 11px;
}
.yt-plan-ready-title > span {
  width: 39px;
  height: 39px;
  display: grid;
  place-items: center;
  flex: 0 0 39px;
  border-radius: 12px;
  background: linear-gradient(135deg, #559fff, #8a74f4 60%, #ef7fbd);
  color: #fff;
  font-size: 11px;
  font-weight: 900;
}
.yt-plan-ready-title b { font-size: 14px; font-weight: 900; }
.yt-plan-ready-title p { margin-top: 3px; color: #718098; font-size: 10px; line-height: 1.5; }
.yt-plan-ready-summary {
  margin-top: 13px;
  padding: 13px;
  border-radius: 14px;
  background: rgba(255,255,255,.76);
  color: #334258;
  font-size: 11px;
  line-height: 1.75;
}
.yt-plan-ready-meta {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  color: #65758e;
  font-size: 10px;
  font-weight: 750;
}
.yt-project-status > i { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 11px; background: #fff0f3; color: #d94d68; font-style: normal; font-weight: 900; }
.yt-project-status.paused > i { background: #fff5e8; color: #c97a1a; }
.yt-project-status b { font-size: 13px; font-weight: 850; }
.yt-project-status p { margin-top: 2px; color: var(--yt-muted); font-size: 10px; font-weight: 500; }
.yt-project-status button { min-height: 36px; padding: 0 11px; border: 0; border-radius: 12px; background: #3b82f6; color: #fff; font-size: 11px; font-weight: 800; }
.yt-project-preview { overflow: hidden; margin-bottom: 14px; border: 1px solid rgba(59,130,246,.08); border-radius: 20px; background: #fff; box-shadow: 0 9px 24px rgba(55,112,220,.1); }
.yt-project-preview img,
.yt-project-preview video { width: 100%; max-height: 420px; display: block; object-fit: contain; background: #eef3fb; }
.yt-project-preview-copy { padding: 17px; color: #3d4b61; font-size: 12px; line-height: 1.7; }
.yt-project-preview-copy > b { display: block; margin-bottom: 8px; color: var(--yt-ink); font-size: 16px; font-weight: 900; }

.back-btn,
.yt-nav-icon {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(226,235,248,.95);
  background: rgba(255,255,255,.88);
  color: #111827;
  box-shadow: 0 10px 26px rgba(73,106,176,.14);
  line-height: 1;
}
.yt-subpage-nav { grid-template-columns: 40px minmax(0,1fr) 40px; }

@keyframes ytHomeEnter {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes ytPromptEnter {
  from { opacity: 0; transform: translateY(8px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* V21 interaction and mobile UI completion */
html { background: #edf3fb; }
body { background: #edf3fb; }
#app {
  background: linear-gradient(180deg, #f5faff 0%, #fff8fc 100%);
  box-shadow: 0 0 55px rgba(59, 130, 246, .12);
}

.tabbar .tab-icon svg,
.yt-svg-icon {
  width: 100%;
  height: 100%;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.tabbar .tab-icon { color: #8a97aa; }
.tabbar .tab.active .tab-icon { color: #357df2; }

.yantong-home { padding-top: max(48px, calc(env(safe-area-inset-top) + 28px)); }
.yt-home-only-prompts { padding-top: 0; }
.yt-home-only-prompts .section-title { margin-bottom: 18px; }
.yt-home-only-prompts .section-title h2 { font-size: 21px; }
.yt-prompts .yt-prompt {
  position: relative;
  min-height: 52px;
  padding: 0 18px 0 42px;
  border: 1px solid rgba(139, 176, 232, .18);
  background: rgba(255, 255, 255, .88);
  color: #172033;
  font-size: 13px;
  font-weight: 700;
  transition: transform .18s ease, box-shadow .18s ease;
}
.yt-prompts .yt-prompt::before {
  content: '';
  position: absolute;
  left: 17px;
  width: 9px;
  height: 9px;
  border: 3px solid #79b8ff;
  border-radius: 50%;
}
.yt-prompts .yt-prompt:active { transform: scale(.97); box-shadow: 0 4px 12px rgba(70, 116, 188, .08); }

.chat-fixed-composer.home-chat-composer {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px;
  padding-left: 7px;
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
.chat-fixed-composer.home-chat-composer:focus-within {
  border-top-color: rgba(83, 151, 246, .42);
  background: rgba(255, 255, 255, .98);
  box-shadow: 0 -10px 30px rgba(65, 124, 207, .16), 0 0 0 2px rgba(96, 165, 250, .08);
}
.chat-fixed-composer.home-chat-composer input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: #111827;
}
.chat-fixed-composer .home-upload-btn {
  width: 42px;
  min-width: 42px;
  height: 42px;
  min-height: 42px;
  border: 0;
  border-radius: 50%;
  background: #e9f4ff;
  box-shadow: none;
  color: #2879e8;
  font-size: 27px;
  font-weight: 400;
}
.chat-fixed-composer .home-send-btn {
  width: 68px;
  min-width: 68px;
  height: 42px;
  min-height: 42px;
  border: 0;
  border-radius: 14px;
  color: #fff;
  background: linear-gradient(135deg, #62b8ff 0%, #7b9cff 52%, #ee91c9 100%);
  font-size: 13px;
  font-weight: 850;
  letter-spacing: 0;
}
.chat-fixed-composer .home-send-btn span {
  width: auto;
  height: auto;
  line-height: 1;
  white-space: nowrap;
}
.chat-fixed-composer .home-send-btn:disabled { background: #bdc9d9; box-shadow: none; }
.send-loading {
  width: auto !important;
  height: auto !important;
  color: #fff;
  font-size: 11px;
  font-weight: 850;
  animation: ytWaitingText 1.1s ease-in-out infinite;
}
@keyframes ytWaitingText { 0%, 100% { opacity: .58; } 50% { opacity: 1; } }

/* ========== V22 mobile app shell ========== */
:root { --yt-v22-tabbar-height: calc(64px + env(safe-area-inset-bottom)); }

.tabbar {
  left: 50%;
  right: auto;
  bottom: 0;
  width: 100%;
  max-width: 430px;
  height: var(--yt-v22-tabbar-height);
  padding: 0 8px env(safe-area-inset-bottom);
  transform: translateX(-50%);
  border-width: 1px 0 0;
  border-radius: 24px 24px 0 0;
  box-shadow: 0 -10px 34px rgba(51,92,160,.11);
}

.chat-fixed-composer,
.chat-fixed-composer.home-chat-composer {
  left: 50%;
  right: auto;
  bottom: var(--yt-v22-tabbar-height);
  width: 100%;
  max-width: 430px;
  height: 62px;
  gap: 4px;
  padding: 7px 8px;
  transform: translateX(-50%);
  border-width: 1px 0 0;
  border-radius: 22px 22px 0 0;
  box-shadow: 0 -8px 28px rgba(73,106,176,.12);
}

.chat-fixed-composer.home-chat-composer input {
  height: 46px;
  padding: 0 14px;
  border-radius: 12px;
  background: #f2f7ff;
}

.chat-fixed-composer .home-upload-btn {
  width: 44px;
  min-width: 44px;
  height: 46px;
  min-height: 46px;
  border-radius: 14px 8px 8px 14px;
}

.chat-fixed-composer .home-send-btn {
  width: 72px;
  min-width: 72px;
  height: 46px;
  min-height: 46px;
  border-radius: 10px 14px 14px 10px;
}

.yt-chat-flow { padding-bottom: 164px; }
.yantong-home { padding-bottom: 148px; }

.yt-mine-v21 {
  min-height: 100vh;
  padding: max(28px, calc(env(safe-area-inset-top) + 18px)) 16px 96px;
}

.yt-mine-profile,
.yt-balance-panel,
.yt-signin-mine,
.yt-mine-section {
  border: 1px solid rgba(205,224,247,.78);
  border-radius: 20px;
  background: rgba(255,255,255,.9);
  box-shadow: 0 12px 32px rgba(61,105,170,.09);
}

.yt-mine-profile { margin-bottom: 12px; padding: 18px; }
.yt-balance-panel { margin-bottom: 12px; padding: 18px; }
.yt-signin-mine { margin-bottom: 16px; }
.yt-mine-section { padding: 16px; }

.yt-mine-service-list { display: grid; gap: 9px; }
.yt-mine-service-row {
  width: 100%;
  min-height: 68px;
  display: grid;
  grid-template-columns: 42px minmax(0,1fr);
  align-items: center;
  gap: 12px;
  padding: 11px 13px;
  border: 1px solid rgba(220,232,247,.9);
  border-radius: 15px;
  background: linear-gradient(135deg, rgba(247,251,255,.96), rgba(255,248,252,.96));
  color: #111827;
  text-align: left;
  transition: transform .16s ease, box-shadow .16s ease;
}
.yt-mine-service-row:active { transform: scale(.975); box-shadow: 0 6px 14px rgba(70,112,181,.08); }
.yt-mine-service-row:disabled { opacity: .58; }
.yt-mine-service-row .yt-setting-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 13px; }
.yt-mine-service-row .yt-setting-icon svg { width: 21px; height: 21px; }
.yt-service-copy { min-width: 0; display: grid; gap: 3px; }
.yt-service-copy b { font-size: 14px; font-weight: 850; }
.yt-service-copy small { overflow: hidden; color: #7b8799; font-size: 11px; font-weight: 550; text-overflow: ellipsis; white-space: nowrap; }

.yt-pool-balance-strip { display: grid; grid-template-columns: repeat(3,1fr); gap: 9px; margin: 12px 0 16px; }
.yt-pool-balance-strip > div { padding: 13px 10px; border: 1px solid rgba(210,226,247,.84); border-radius: 15px; background: rgba(255,255,255,.9); text-align: center; }
.yt-pool-balance-strip span { display: block; color: #7b8799; font-size: 10px; }
.yt-pool-balance-strip b { display: block; margin-top: 4px; color: #111827; font-size: 20px; }
.yt-quota-package-list { display: grid; gap: 12px; padding-bottom: 20px; }
.yt-quota-package-card { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 14px; padding: 17px; border: 1px solid rgba(207,225,247,.9); border-radius: 19px; background: rgba(255,255,255,.92); box-shadow: 0 9px 25px rgba(66,108,172,.08); }
.yt-quota-package-card > div:last-child { display: grid; align-content: center; justify-items: end; gap: 9px; }
.yt-quota-package-card span { color: #4f83e5; font-size: 10px; font-weight: 800; }
.yt-quota-package-card h2 { margin-top: 4px; font-size: 17px; }
.yt-quota-package-card p { margin-top: 4px; color: #7b8799; font-size: 11px; line-height: 1.5; }
.yt-quota-package-card > div:first-child small { display: block; margin-top: 8px; color: #334155; font-weight: 800; }
.yt-quota-package-card strong { font-size: 21px; }
.yt-quota-package-card strong small { font-size: 11px; }
.yt-quota-package-card button { min-width: 72px; min-height: 36px; border: 0; border-radius: 11px; background: linear-gradient(135deg,#5baeff,#8797ff 55%,#ee8fc8); color: #fff; font-size: 12px; font-weight: 850; }

.yt-slide-in-left { animation: ytSlideFromLeft .36s cubic-bezier(.2,.8,.2,1) both; }
.yt-slide-in-right { animation: ytSlideFromRight .36s cubic-bezier(.2,.8,.2,1) both; }
@keyframes ytSlideFromLeft { from { opacity:0; transform:translateX(-18px); } to { opacity:1; transform:translateX(0); } }
@keyframes ytSlideFromRight { from { opacity:0; transform:translateX(18px); } to { opacity:1; transform:translateX(0); } }

.yt-home-assets {
  position: fixed;
  z-index: 30;
  left: 50%;
  bottom: 154px;
  width: calc(100% - 36px);
  max-width: 394px;
  display: flex;
  gap: 8px;
  padding: 9px;
  transform: translateX(-50%);
  border: 1px solid rgba(190, 213, 246, .65);
  border-radius: 18px;
  background: rgba(255,255,255,.94);
  box-shadow: 0 12px 30px rgba(73,106,176,.13);
  overflow-x: auto;
}
.yt-home-assets figure { position: relative; flex: 0 0 68px; margin: 0; }
.yt-home-assets img,
.yt-home-assets video { width: 68px; height: 54px; display: block; border-radius: 10px; object-fit: cover; background: #eaf1fb; }
.yt-home-assets figcaption { margin-top: 4px; overflow: hidden; color: #526176; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.yt-home-assets button {
  position: absolute;
  top: -5px;
  right: -5px;
  width: 20px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;
  padding: 0;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #27364b;
  color: #fff;
  font-size: 14px;
  line-height: 16px;
  box-shadow: none;
}

.yt-chat-screen { padding-top: env(safe-area-inset-top); }
.yt-chat-flow {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 18px 15px 172px;
  overflow: visible;
}
.yt-message { width: fit-content; max-width: 90%; display: flex; align-items: flex-start; gap: 8px; }
.yt-message.user { align-self: flex-end; justify-content: flex-end; }
.yt-message.assistant { align-self: flex-start; }
.yt-message .yt-bubble,
.yt-project-messages > div {
  border: 1px solid rgba(91, 165, 239, .2);
  background: #cfeaff;
  color: #111827;
  box-shadow: 0 7px 20px rgba(52, 123, 196, .1);
}
.yt-message.user .yt-bubble { background: #a9dcff; color: #111827; }
.yt-message .yt-bubble p,
.yt-message .yt-bubble li,
.yt-message .yt-bubble strong { color: #111827; }
.yt-avatar {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #d9ecff;
  box-shadow: 0 5px 15px rgba(48, 116, 187, .14);
  object-fit: cover;
  object-position: 57% 48%;
}
.yt-chat-disclaimer {
  position: fixed;
  z-index: 29;
  left: 50%;
  bottom: calc(var(--yt-v22-tabbar-height) + 64px);
  width: min(100%, 430px);
  padding: 3px 14px 4px;
  transform: translateX(-50%);
  background: rgba(247, 251, 255, .94);
  color: #718096;
  font-size: 9px;
  font-weight: 500;
  line-height: 1.25;
  text-align: center;
  pointer-events: none;
}
.yt-project-disclaimer {
  display: block;
  margin: -2px 2px 2px;
  color: #7b8799;
  font-size: 10px;
  font-weight: 500;
  line-height: 1.4;
  text-align: center;
}
.yt-message.assistant.loading.thinking .yt-avatar { display: none; }
.yt-message.assistant.loading.thinking .yt-bubble {
  padding: 11px 14px;
  border-color: rgba(91, 165, 239, .18);
  background: linear-gradient(135deg, #e8f5ff, #f4f1ff 68%, #fff1f8);
  box-shadow: 0 8px 22px rgba(78, 131, 196, .11);
}
.thinking-copy {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  color: #30445d;
  font-size: 12px;
  font-weight: 800;
}
.thinking-dots {
  display: inline-block;
  width: 18px;
  color: #527dac;
  letter-spacing: 1px;
}
.thinking-dots::after { content: '.'; animation: ytThinkingDots 1.2s steps(1,end) infinite; }
@keyframes ytThinkingDots { 0% { content: '.'; } 33% { content: '..'; } 66%, 100% { content: '...'; } }
.streaming-caret {
  width: 2px;
  height: 1.05em;
  display: inline-block;
  margin-left: 3px;
  border-radius: 999px;
  background: #397fd8;
  vertical-align: -2px;
  animation: ytStreamingCaret .8s step-end infinite;
}
@keyframes ytStreamingCaret { 50% { opacity: 0; } }

/* 首页聊天采用原生 App 布局：标题和输入区固定，仅消息列表滚动 */
body.home-chat-open {
  height: 100dvh;
  overflow: hidden;
  overscroll-behavior: none;
}
body.home-chat-open #app,
body.home-chat-open #view {
  height: 100dvh;
  overflow: hidden;
}
body.home-chat-open .yt-chat-screen {
  height: 100dvh;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
}
body.home-chat-open .yt-home-brand-title.chat-title {
  position: relative;
  top: auto;
  flex: 0 0 calc(50px + env(safe-area-inset-top));
  height: calc(50px + env(safe-area-inset-top));
  padding-top: env(safe-area-inset-top);
}
body.home-chat-open .yt-chat-flow {
  flex: 1 1 auto;
  min-height: 0;
  margin: 0 0 calc(var(--yt-v22-tabbar-height) + 82px);
  padding: 14px 15px 18px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
body.home-chat-open .yt-chat-flow::-webkit-scrollbar { display: none; }
body.home-chat-open .yt-home-only-prompts {
  width: 100%;
  padding: 8px 2px 2px;
}
body.home-chat-open .yt-home-only-prompts .section-title {
  margin-bottom: 14px;
}

.yt-card-icon { width: 42px; height: 42px; display: grid; place-items: center; }
.yt-card-icon .yt-svg-icon { width: 23px; height: 23px; }
.yt-tool-card { position: relative; overflow: hidden; }
.yt-tool-status {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  padding: 4px 7px;
  border-radius: 999px;
  background: #e9f3ff;
  color: #3479d6;
  font-size: 8px;
  font-weight: 800;
}
.yt-tool-status.status-preview_done,
.yt-tool-status.status-completed { background: #e5f8ee; color: #0e9860; }
.yt-tool-status.status-paused { background: #fff3df; color: #b56e10; }
.yt-tool-status.status-failed { background: #ffebee; color: #cd4058; }
.yt-tool-status.status-stopped,
.yt-tool-status.status-cancelled { background: #eef1f5; color: #657186; }

.tool-hero-card { display: grid; grid-template-columns: 54px minmax(0,1fr); align-items: start; gap: 13px; }
.tool-hero-icon { width: 54px; height: 54px; border-radius: 16px; }
.tool-hero-icon .yt-svg-icon { width: 28px; height: 28px; }
.tool-hero-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; }
.tool-hero-tags span { padding: 4px 7px; border-radius: 7px; background: rgba(255,255,255,.64); color: #445369; font-size: 9px; font-weight: 700; }
.back-pill,
.app-back,
.yt-nav-icon {
  width: 40px !important;
  min-width: 40px !important;
  height: 40px !important;
  min-height: 40px !important;
  padding: 0 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(166, 198, 238, .34) !important;
  border-radius: 14px !important;
  background: rgba(255,255,255,.9) !important;
  color: #182235 !important;
  box-shadow: 0 7px 20px rgba(55,112,220,.12) !important;
}
.back-pill .yt-svg-icon,
.app-back .yt-svg-icon,
.yt-nav-icon .yt-svg-icon { width: 20px; height: 20px; }
.yt-project-messages { display: grid; gap: 10px; }
.yt-project-messages > div { width: fit-content; max-width: 92%; padding: 11px 13px; border-radius: 16px; color: #111827; font-size: 12px; line-height: 1.65; }
.yt-project-messages > .user { justify-self: end; background: #a9dcff; }
.yt-project-messages > .assistant { justify-self: start; }
.yt-project-status .yt-task-status-actions { display: grid; gap: 5px; }
.yt-project-status .yt-task-status-actions button { min-width: 84px; }
.yt-project-status.stopped > i { background: #eef1f5; color: #657186; }
.yt-project-upload-preview { position: relative; }
.yt-project-upload-preview button,
[data-remove-project-asset] { cursor: pointer; }

.yt-mine-v21 { padding-bottom: 120px; }
.yt-mine-profile,
.yt-balance-panel,
.yt-signin-card,
.yt-mine-actions > button,
.yt-setting-row,
.yt-plan-card,
.yt-point-package {
  border: 1px solid rgba(166, 198, 238, .18);
  box-shadow: 0 10px 28px rgba(66, 113, 174, .09);
}
.yt-user-avatar { background: linear-gradient(135deg, #80c6ff, #879cff 55%, #f09acb); }
.yt-mine-actions > button > span { width: 42px; height: 42px; }
.yt-mine-actions > button > span .yt-svg-icon { width: 22px; height: 22px; }
.yt-signin-mine { margin-top: 13px; }
.yt-setting-icon .yt-svg-icon { width: 19px; height: 19px; }
.yt-point-package {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px;
  border-radius: 18px;
  background: #fff;
}
.yt-point-package > div { min-width: 0; display: flex; align-items: center; gap: 11px; }
.yt-point-package > div > span { width: 38px; height: 38px; flex: 0 0 38px; display: grid; place-items: center; border-radius: 12px; background: #eaf4ff; color: #347be2; }
.yt-point-package .yt-svg-icon { width: 20px; height: 20px; }
.yt-point-package b { display: block; font-size: 13px; }
.yt-point-package small { display: block; margin-top: 3px; color: #7a8798; font-size: 9px; }
.yt-point-package button { min-height: 38px; padding: 0 13px; border: 0; border-radius: 12px; background: #3b82f6; color: #fff; font-size: 11px; font-weight: 800; }
.yt-points-heading { margin-top: 20px; }

button, .yt-tool-card, .yt-setting-row { -webkit-tap-highlight-color: transparent; }
button:active, .yt-setting-row:active { transform: scale(.97); }
button:disabled { cursor: not-allowed; opacity: .62; }

@media (max-width: 430px) {
  #app { box-shadow: none; }
  .yt-mine-actions { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .yt-mine-actions > button { min-height: 124px; }
}

@media (max-width: 355px) {
  .yt-mine-actions { grid-template-columns: 1fr; }
  .yt-home-only-prompts .section-title h2 { font-size: 19px; }
}

@media (min-width: 431px) {
  body { background: #edf2f9; }
  #app { box-shadow: 0 0 44px rgba(34,67,120,.14); }
}

@media (max-width: 355px) {
  .yantong-home { padding-right: 17px; padding-left: 17px; }
  .yt-home-brand h1 { font-size: 29px; }
  .yt-prompts .yt-prompt { padding: 0 13px; font-size: 12px; }
}

/* V22 Mine wallet, sign-in and customer support */
.yt-mine-profile {
  background: linear-gradient(135deg, rgba(232,244,255,.96), rgba(255,238,248,.94));
}
.yt-balance-panel {
  display: block;
  min-height: 0;
  padding: 19px;
  border-color: rgba(255,255,255,.52);
  background:
    radial-gradient(circle at 92% 8%, rgba(255,178,222,.62), transparent 32%),
    linear-gradient(135deg, #2678ed 0%, #5d8ff5 56%, #997bdf 100%);
  color: #fff;
  box-shadow: 0 18px 38px rgba(48,107,216,.24);
}
.yt-wallet-head { display: flex !important; align-items: center; justify-content: space-between; gap: 14px; }
.yt-wallet-head > div { display: grid; gap: 2px; }
.yt-wallet-head > div > b { font-size: 35px; }
.yt-wallet-head > button {
  min-width: 68px;
  min-height: 40px;
  border-radius: 12px;
  background: rgba(255,255,255,.94);
  color: #2565d2;
}
.yt-wallet-grid { display: grid !important; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 7px; margin-top: 17px; }
.yt-wallet-grid > div {
  min-width: 0;
  display: grid;
  gap: 4px;
  padding: 10px 6px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 12px;
  background: rgba(255,255,255,.13);
  text-align: center;
  backdrop-filter: blur(8px);
}
.yt-wallet-grid span { overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; opacity: .82; }
.yt-wallet-grid b { overflow: hidden; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
.yt-signin-card.yt-signin-mine {
  display: grid;
  grid-template-columns: 42px minmax(0,1fr) auto;
  gap: 11px;
  padding: 16px;
  border-color: rgba(241,132,190,.2);
  background:
    radial-gradient(circle at 94% 10%, rgba(255,183,222,.45), transparent 34%),
    linear-gradient(135deg, #fff1f8, #eef6ff 70%);
  box-shadow: 0 13px 30px rgba(193,102,164,.12);
}
.yt-signin-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 13px; background: linear-gradient(135deg,#ff8fc6,#8aa9ff); color: #fff; box-shadow: 0 8px 18px rgba(220,109,177,.2); }
.yt-signin-icon .yt-svg-icon { width: 21px; height: 21px; }
.yt-signin-card.yt-signin-mine > div { gap: 3px; }
.yt-signin-card.yt-signin-mine button { min-width: 86px; background: #f0dfe7; color: #111827; opacity: 1; }
.yt-signin-card.yt-signin-mine button:disabled { background: #eadde3; color: #111827; opacity: 1; }
.yt-mine-section { background: rgba(255,255,255,.78); backdrop-filter: blur(14px); }
.yt-pool-balance-strip > .pool-general { background: linear-gradient(145deg,#edf7ff,#f9fcff); }
.yt-pool-balance-strip > .pool-image { background: linear-gradient(145deg,#fff0f7,#fffafd); }
.yt-pool-balance-strip > .pool-video { background: linear-gradient(145deg,#f2efff,#fbfaff); }
.yt-quota-package-card.pool-general { border-left: 4px solid #69a9f6; }
.yt-quota-package-card.pool-image { border-left: 4px solid #ef8abb; }
.yt-quota-package-card.pool-video { border-left: 4px solid #9582e9; }

.yt-support-shell {
  min-height: calc(100vh - 92px - env(safe-area-inset-bottom));
  display: grid;
  grid-template-rows: auto minmax(280px,1fr) auto;
  overflow: hidden;
  border: 1px solid rgba(196,218,245,.86);
  border-radius: 18px;
  background: linear-gradient(180deg,#f2f8ff,#fff8fc);
  box-shadow: 0 14px 34px rgba(58,101,168,.11);
}
.yt-support-status { display: flex; align-items: center; gap: 10px; padding: 13px 15px; border-bottom: 1px solid rgba(207,224,245,.72); background: rgba(255,255,255,.76); }
.yt-support-status > span { width: 10px; height: 10px; border-radius: 50%; background: #24b47e; box-shadow: 0 0 0 4px rgba(36,180,126,.12); }
.yt-support-status div { display: grid; gap: 2px; }
.yt-support-status b { font-size: 13px; }
.yt-support-status small { color: #748297; font-size: 9px; }
.yt-support-messages { display: flex; flex-direction: column; gap: 10px; padding: 16px; overflow-y: auto; overscroll-behavior: contain; }
.yt-support-message { display: grid; gap: 4px; max-width: 84%; }
.yt-support-message.user { align-self: flex-end; justify-items: end; }
.yt-support-message.admin { align-self: flex-start; justify-items: start; }
.yt-support-message > div { padding: 10px 12px; border-radius: 15px; color: #111827; font-size: 12px; line-height: 1.6; white-space: pre-wrap; word-break: break-word; }
.yt-support-message.user > div { border-bottom-right-radius: 5px; background: #a9dcff; }
.yt-support-message.admin > div { border: 1px solid rgba(205,224,247,.8); border-bottom-left-radius: 5px; background: #fff; }
.yt-support-message time { color: #93a0b1; font-size: 8px; }
.yt-support-empty { margin: auto; padding: 24px; text-align: center; }
.yt-support-empty b { font-size: 14px; }
.yt-support-empty p { margin-top: 7px; color: #7a8798; font-size: 10px; line-height: 1.6; }
.yt-support-composer { display: grid; grid-template-columns: minmax(0,1fr) 70px; gap: 8px; padding: 10px; border-top: 1px solid rgba(207,224,245,.8); background: rgba(255,255,255,.9); }
.yt-support-composer textarea { min-height: 44px; max-height: 100px; resize: none; padding: 12px 13px; border: 1px solid #dbe8f7; border-radius: 12px; outline: 0; background: #f5f9ff; color: #111827; font-size: 12px; }
.yt-support-composer textarea:focus { border-color: #78aaf0; box-shadow: 0 0 0 3px rgba(89,147,232,.1); }
.yt-support-composer button { min-height: 44px; border-radius: 12px; background: linear-gradient(135deg,#4d91f4,#e780b9); color: #fff; font-size: 12px; font-weight: 850; }
.yt-loading-state.compact { min-height: 120px; }

@media (max-width: 355px) {
  .yt-wallet-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .yt-signin-card.yt-signin-mine { grid-template-columns: 38px minmax(0,1fr); }
  .yt-signin-card.yt-signin-mine button { grid-column: 1 / -1; width: 100%; }
}
#toast {
  position: fixed;
  left: 50%;
  bottom: calc(86px + env(safe-area-inset-bottom));
  z-index: 1200;
  max-width: min(340px, calc(100vw - 40px));
  padding: 10px 14px;
  border: 1px solid rgba(255,255,255,.8);
  border-radius: 14px;
  background: rgba(20,31,52,.9);
  box-shadow: 0 12px 30px rgba(27,52,96,.2);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.45;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 8px) scale(.98);
  transition: opacity .18s ease, transform .18s ease;
  backdrop-filter: blur(16px);
}

#toast.show {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
}

body.tool-project-open #toast,
body.mine-subpage-open #toast {
  bottom: calc(24px + env(safe-area-inset-bottom));
}
.yt-internal-badge {
  display: inline-flex;
  align-items: center;
  height: 22px;
  margin-left: 8px;
  padding: 0 9px;
  border: 1px solid rgba(245, 158, 11, .3);
  border-radius: 999px;
  background: #fff7d6;
  color: #9a5b00;
  font-size: 11px;
  font-weight: 800;
  vertical-align: middle;
}

.yt-internal-pay-notice {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 14px;
  padding: 14px 16px;
  border: 1px solid #f9d88d;
  border-radius: 14px;
  background: #fff8df;
  color: #5f4308;
}

.yt-internal-pay-notice b { font-size: 14px; }
.yt-internal-pay-notice span { font-size: 12px; line-height: 1.55; }