/* 135编辑器 12周年活动页样式
 *
 * 按页面 DOM 层级编写（层层递进，便于定位）：
 *
 *   L0  站点覆盖 / 变量 / 页面壳
 *   L1  共用：容器 .ty-wrap · 按钮 .ty-btn · 隐藏 .ty-is-hidden
 *   L2  导航 .ty-nav
 *   L3  主视觉 .ty-hero
 *   L4  时间线 .ty-timeline-sec#memory
 *   L5  分区共用 .ty-block / .ty-sec-bar / .ty-banner-strip
 *   L6  Part.01 故事墙 #story · 投稿 #storyForm
 *   L7  图片创作 #ai（隐藏）
 *   L8  排行榜 #rank · 点赞榜/奖励池 #prize
 *   L9  礼品榜 #gift（隐藏）
 *   L10 Part.02 教育版申请 #edu
 *   L11 Part.03 创作大赛 #contest
 *   L12 庆祝页脚 .ty-end / .ty-footer
 *   L13 浮层：toast / 规则弹层 / 分享弹层 / 右侧浮动框 / 新朋友见面礼 / 教育版弹框 / 彩带
 *   L14 响应式（≤980 / ≤480）
 */

/* ========================================================================
   L0 · 站点覆盖 · 变量 · 页面壳
  DOM: html.ty-html / body.ty-page / .twelve-year
   ======================================================================== */

/* --- L0.1 · 隐藏站点顶栏 / 页脚 --- */
#top.header,
header#top.header,
body > .header#top,
body.ty-page .navbar.navbar-fixed-top,
body.ty-page #top { display: none !important; }

/* 站点全局页脚（关于我们 / 联系我们 / 二维码）不展示 */
body.ty-page > footer,
body.ty-page footer:not(.ty-footer),body.ty-page #footer,body.ty-page .footer,body.ty-page #FirstDisplay_box,body.ty-page .FirstDisplay_box { display: none !important; height: 0 !important; overflow: hidden !important; margin: 0 !important; padding: 0 !important; }
#maincontent.maincontent { padding-top: 0 !important; margin-top: 0 !important; overflow-x: hidden; }

/* --- L0.2 · 设计令牌 :root --- */
:root { --ty-orange: #ff8a3d; --ty-orange-deep: #ff5e3a; --ty-blue: #4db8ff; --ty-blue-deep: #3aa0ef; --ty-sky: #f4f8ff; --ty-ink: #1d2b44; --ty-muted: #6b7c95; --ty-line: #d9ecff; --ty-card: #ffffff; --ty-radius: 28px; --ty-maxw: 1400px; --ty-font: "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", system-ui, -apple-system, sans-serif; --ty-shadow: 0 18px 50px rgba(58, 160, 239, 0.12); --ty-purple: #6c2bd9; --ty-gold: #ffb800; --ty-red: #ff4d4f; --ty-ink-soft: #5b6b86; }

/* --- L0.3 · 页面壳 html / body / .twelve-year --- */
html.ty-html,
body.ty-page { overflow-x: hidden !important; max-width: 100%; background: var(--ty-sky); }
.twelve-year { font-family: var(--ty-font); color: var(--ty-ink); background: var(--ty-sky); width: 100%; max-width: 100%; overflow-x: hidden; -webkit-text-size-adjust: 100%; }
.twelve-year *,
.twelve-year *::before,
.twelve-year *::after { box-sizing: border-box; }
.twelve-year a { color: inherit; letter-spacing: 1px; text-decoration: none; }
.twelve-year .ty-nav-right a { color: var(--ty-card); }
.twelve-year button:focus { outline: none; }

/* ========================================================================
   L1 · 共用组件
  DOM: .ty-wrap / .ty-btn / .ty-is-hidden
   ======================================================================== */

/* --- L1.1 · 内容宽度 .ty-wrap --- */
.ty-wrap { width: 100%; max-width: var(--ty-maxw); margin: 0 auto; padding: 0 24px; }

/* --- L1.2 · 按钮 .ty-btn --- */
.ty-btn { border: none; cursor: pointer; font-family: inherit; font-weight: 700; font-size: 15px; padding: 12px 28px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: .2s; }
.ty-btn-primary { color: #fff; background: linear-gradient(90deg, #feb22c, #f83a06); box-shadow: 0 10px 22px rgba(255, 94, 58, 0.35); }
.ty-btn-primary:hover { transform: translateY(-1px); }
.ty-btn-ghost { background: #fff; color: var(--ty-ink); border: 1.5px solid #dbe7f5; }
.ty-btn-soft { background: #eef2f7; color: #6b778c; border: none; box-shadow: none; }
.ty-btn-soft:hover { background: #e4eaf2; }
.ty-btn-sm { padding: 9px 35px; font-size: 13px; }
.ty-btn:disabled { opacity: .55; cursor: not-allowed; transform: none !important; }

/* --- L1.3 · 工具类：默认隐藏模块（设计稿未展示，勿删 DOM） --- */
.ty-is-hidden { display: none !important; }

/* ========================================================================
   L2 · 导航栏
  DOM: nav.ty-nav
   ======================================================================== */

/* --- L2.1 · 结构 .ty-nav / .ty-nav-in --- */
.ty-nav { position: sticky; top: 0; z-index: 80; border-bottom: 1px solid #eef2f7; padding-top: env(safe-area-inset-top, 0); }
.ty-nav-in { height: 60px; display: flex; align-items: center; gap: 20px; min-width: 0; border-bottom: 1px solid var(--ty-white); }

/* --- L2.2 · 品牌 .ty-logo --- */
.ty-logo { display: flex; align-items: center; flex: none; min-width: 0; }
.ty-logo img { height: 28px; width: auto; max-width: 100%; display: block; }

/* --- L2.3 · 锚点链接 .ty-nav-links --- */
.ty-nav-links { flex: 1 1 auto; min-width: 0; display: flex; justify-content: flex-end; gap: 4px; overflow-x: auto; scrollbar-width: none; margin-right: 4px; }
.ty-nav-links::-webkit-scrollbar { display: none; }
.ty-nav-links a { flex: none; padding: 8px 20px; border-radius: 8px; font-size: 14px; font-weight: 500; color: #4a5568; white-space: nowrap; }
.ty-nav-links a:hover { color: var(--ty-blue-deep); background: transparent; font-weight: 700; transition: all .3s; }

/* --- L2.4 · 右侧 CTA .ty-nav-right --- */
.ty-nav-right { flex: none; }

/* ========================================================================
   L3 · 主视觉 Hero
  DOM: header.ty-hero#hero
   ======================================================================== */

/* --- L3.1 · 舞台与背景 .ty-hero-stage / .ty-hero-bg --- */
.ty-hero { background: #cfeaff; overflow: hidden; }
.ty-hero-stage { display: grid; grid-template-columns: 1fr; grid-template-rows: 1fr; width: 100%; aspect-ratio: 1920 / 831; min-height: 520px; max-height: 860px; }
.ty-hero-bg { grid-area: 1 / 1; width: 100%; height: 100%; object-fit: cover; object-position: center center; display: block; pointer-events: none; user-select: none; }
.ty-hero-content { grid-area: 1 / 1; z-index: 2; justify-self: center; align-self: center; box-sizing: border-box; width: 100%; max-width: var(--ty-maxw); /* 1400 居中 */ padding: 0 24px; display: flex; justify-content: left; margin-bottom: 40px; }

/* --- L3.2 · 标题区：便签 icon（flex）+ 背景图内标题 --- */
.ty-hero-head { position: absolute; left: 0px; top: 0px; display: flex; align-items: flex-start; gap: 4px 8px;  /* 占位对齐背景图标题带，便签落在标题左侧 */ min-height: 30%; margin: 0 0 4px; padding-top: 2%; }
.ty-sticky { flex: none; display: flex; align-items: center; justify-content: center;  /* 素材 161×120；略外探叠在卡片左上角 */ width: 161px; aspect-ratio: 161 / 120; height: auto; margin: -18px 0 0 -18px; background: url("/img/twelve_year/sticky_note.png") center / contain no-repeat; pointer-events: none; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.12)); }
.ty-sticky span { display: block; width: 70%; padding: 16% 4% 10%; text-align: center; font-size: 10px; line-height: 1.28; font-weight: 700; color: #7a5a1a; transform: rotate(10deg); }
.ty-hero-underline { display: block; width: min(180px, 100%); height: 12px; margin-top: 2px; object-fit: fill; }

/* --- L3.3 · 窗口卡片 .ty-hero-card（背景图含标题） --- */
.ty-hero-card { position: relative; display: flex; flex-direction: column; box-sizing: border-box; width: min(661px, 100%); aspect-ratio: 661 / 535; min-height: 0; padding: 8% 4% 4.5%; background: url("/img/twelve_year/title_window_card.png") center / 100% 100% no-repeat; border: none; border-radius: 0; box-shadow: none; }
.ty-hero-dots i { width: 11px; height: 11px; border-radius: 50%; display: block; box-shadow: 0 2px 4px rgba(0, 0, 0, .12); }
.ty-hero-dots i:nth-child(1) { background: #ff6b81; }
.ty-hero-dots i:nth-child(2) { background: #ffd166; }
.ty-hero-dots i:nth-child(3) { background: #5ec8ff; }

/* --- L3.4 · 文案 / CTA / 倒计时（隐藏） --- */
.ty-hero-copy { margin-top: 65px; flex: 1 1 auto; color: #3a465c; font-size: 13px; line-height: 1.72; letter-spacing: 0.02em; }
.ty-hero-copy p { margin: 0 0 15px; }
.ty-hero-copy p.help-text { color: darkgray; margin-top: 5px; }
.ty-hero-copy .p1 { color: #3a465c; }

/* 强调数字：2014年 / 2000万 */
.ty-hero-copy strong { }
.ty-hero-copy b { color: #ff4d2e; font-weight: 800; font-size: 22px; letter-spacing: 0; line-height: 1; }

/* 口号行 */
.ty-hero-copy .lead { margin-top: 20px; margin-bottom: 6px; font-size: 15px; font-weight: 800; color: #1d2b44; line-height: 1.45; letter-spacing: 0.04em; }
.ty-hero-copy .wish { margin-bottom: 0; color: #5b6b86; font-size: 13px; }

/* 荧光笔高亮 */
.ty-hero-copy .mark { display: inline; padding: 2px 4px; background: linear-gradient(transparent 55%, #fff7ab 75%); color: #1d2b44; font-weight: 400; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.ty-hero-cta { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 12px; margin-top: 14px; width: 100%; }
.ty-hero-cta .ty-btn { padding: 10px 18px; font-size: 13px; color: white; }
.ty-hero-cta .ty-btn-soft { background: #dde0e9; color: #9da1ab; border: 1.5px dashed #c5cedb; box-shadow: none; }
.ty-hero-cta .ty-btn-soft:hover { background: #e6ebf2; }
.ty-hero-right { margin-left: auto; }

/* 设计稿：右侧蓝色文字链 */
.ty-hero-prize { transition: all .3s; color: #7897ff !important; font-size: 13px; font-weight: 700; margin-left: 15px; white-space: nowrap; padding: 8px 2px; border: none; background: none; }
.ty-hero-prize:hover { color: #3f71ff; text-decoration: underline; }
.ty-hero-link { margin-left: auto; color: #2f9de8; font-size: 13px; font-weight: 700; white-space: nowrap; }
.ty-hero-link span { display: inline-block; margin-left: 2px; transition: transform .15s; }
.ty-hero-link:hover span { transform: translateX(2px); }

/* --- L3.4.1 · 倒计时（隐藏保留） --- */
.ty-countdown { display: flex; gap: 14px; justify-content: center; margin-top: 38px; flex-wrap: wrap; }
.ty-cd-box { background: var(--ty-card); border: 1px solid var(--ty-line); border-radius: 16px; padding: 16px 22px; min-width: 96px; box-shadow: var(--ty-shadow); }
.ty-cd-num { font-size: 40px; font-weight: 900; color: var(--ty-red); line-height: 1; }
.ty-cd-label { font-size: 13px; color: var(--ty-ink-soft); margin-top: 8px; }

/* ========================================================================
   L4 · 时间线
  DOM: section.ty-timeline-sec#memory
   ======================================================================== */
.ty-timeline-sec { padding: 18px 0 32px; }
.ty-wrap-wide { max-width: 1400px; }
.ty-timeline { --wave-top: 28px; --wave-h: 81px; --paw: 44px; --copy-gap: 8px; position: relative; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; max-width: 100%; scrollbar-width: thin;  /* 波谷爪印下方还需标题+副标题高度 */ min-height: calc(var(--wave-top) + var(--wave-h) + 72px); }

/* --- L4.1 · 浮线背景 .ty-tl-wave --- */
.ty-tl-wave { position: absolute; left: 0; top: var(--wave-top); width: 100%; height: var(--wave-h); z-index: 0; pointer-events: none; user-select: none; object-fit: fill; /* 宽拉伸到容器，高固定 81，保持扫描得到的 Y */ }

/* --- L4.2 · 节点轨道 .ty-tl-track / .ty-tl-item --- */
.ty-tl-track { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); width: 100%; min-width: 1180px; min-height: calc(var(--wave-top) + var(--wave-h) + 72px); padding: 0 4px; box-sizing: border-box; }
.ty-tl-item { position: relative; min-width: 0; height: 100%; min-height: inherit; }

/* --- L4.3 · 爪印与文案 .ty-tl-dot / .ty-tl-copy --- */

/* 爪印中心落在浮线对应列的 Y（--paw-y 来自素材实测） */
.ty-tl-dot { position: absolute; left: 50%; top: calc(var(--wave-top) + var(--paw-y) - var(--paw) / 2); width: var(--paw); height: var(--paw); margin-left: calc(var(--paw) / -2); z-index: 2; background: url("/img/twelve_year/icon_paw.png") center / contain no-repeat; filter: drop-shadow(0 3px 6px rgba(255, 140, 40, 0.25)); }

/* 文案统一在爪印正下方 */
.ty-tl-copy { position: absolute; left: 50%; top: calc(var(--wave-top) + var(--paw-y) + var(--paw) / 2 + var(--copy-gap)); transform: translateX(-50%); text-align: center; z-index: 1; width: max-content; max-width: none; }
.ty-tl-title { font-size: 16px; font-weight: 700; color: #2c3e50; line-height: 1.3; white-space: nowrap; }
.ty-tl-text { margin-top: 6px; font-size: 13px; font-weight: 400; line-height: 1.35; color: #8b95a7; white-space: nowrap; }

/* ========================================================================
   L6 · Part.01 故事墙 / 投稿
  DOM: section#story / section#storyForm
   ======================================================================== */

/* --- L6.0 · 故事墙标题条 --- */
.ty-story-sec { padding-top: 40px; padding-bottom: 0; }
.ty-form-sec { padding: 0 0 48px; }
.ty-story-content { height: 150px; width: 100%; position: relative; }
.ty-story-bg { position: relative; display: flex; flex-direction: row; width: 100%; height: 150px; }
.ty-story-base { position: absolute; left: 0; bottom: 27px; right: 203px; height: 68px; z-index: 2; }
.ty-story-pc { position: absolute; right: 0; bottom: 0; width: 203px; height: 150px; z-index: 1; }
.ty-story-head { position: absolute; z-index: 3; left: 0; top: 5px; height: 45px; display: flex; justify-content: space-between; width: 85%; }
.ty-part-label { line-height: 45px; }
.ty-part-label span { color: #58a3ff; font-size: 40px; font-weight: 600; }
.ty-part-label span.text { color: white; background: url(/img/twelve_year/tab_cyan_wide.png); height: 30px; line-height: 30px; display: inline-block; font-size: 20px; padding: 0px 20px 0 15px; background-size: 100% auto; }
.ty-rules-link { color: #666 !important; font-size: 20px; cursor: pointer; }
.ty-rules-link-static { cursor: default; }
.ty-rules-link .ty-qmark { font-style: normal; background: #b5ceed; color: white; width: 30px; display: inline-block; height: 30px; border-radius: 50%; line-height: 30px; text-align: center; margin-left: 10px; font-size: 20px; padding-left: 2px; }
.ty-banner-strip { position: absolute; left: 40px; top: 55px; z-index: 3; height: 36px; line-height: 36px; display: flex; margin-top: 17px; }
.ty-banner-ico { width: 36px; height: 36px; }
.ty-banner-txt { margin-left: 20px; color: white; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); }
.ty-banner-txt b { font-weight: 600; font-size: 32px; }
.ty-banner-txt span { font-size: 17px; font-weight: 300; }

/* --- L6.1 · 赛道卡片 .ty-story-grid / .ty-track-card --- */
.ty-story-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 8px; padding-top: 12px; }
.ty-track-card { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; background: #fff url("/img/twelve_year/card_bg_personal.png") top center / 100% auto no-repeat; border: none; border-radius: 22px; padding: 36px 28px 22px; box-shadow: 0 14px 36px rgba(58, 160, 239, 0.1); min-height: 360px; }
.ty-track-card.enterprise { background-image: url("/img/twelve_year/card_bg_enterprise.png"); }
.ty-track-tag { position: absolute; top: 0; left: 18px; transform: translateY(-50%); padding: 5px 14px; border-radius: 999px; background: #ff6b4a; color: #fff; font-size: 12px; font-weight: 800; letter-spacing: 0.04em; box-shadow: 0 6px 14px rgba(255, 94, 58, 0.28); white-space: nowrap; }
.ty-track-card.enterprise .ty-track-tag { background: #4db8ff; box-shadow: 0 6px 14px rgba(58, 160, 239, 0.28); }
.ty-track-title { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 12px; }
.ty-track-card .ico { width: 58px; height: 58px; object-fit: contain; flex: none; }
.ty-track-title .nm { display: flex; flex-direction: column; align-items: flex-start; }
.ty-track-card h3 { margin: 0; font-size: 22px; font-weight: 900; line-height: 1.2; color: var(--ty-ink); }
.ty-track-title .ul { display: block; width: 118px; height: 8px; margin-top: 2px; object-fit: fill; }
.ty-track-intro { margin: 0 0 14px; font-size: 13px; font-style: normal; line-height: 1.7; color: #666; background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, #ffedc8 15%, #ffedc8 85%, rgba(255, 255, 255, 0) 100%); padding: 5px 10px; }
.enterprise .ty-track-intro { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, #ebf1ff 15%, #ebf1ff 85%, rgba(255, 255, 255, 0) 100%); }
.ty-track-list { list-style: none; margin: 0; padding: 0; width: 100%; }
.ty-track-list li { font-size: 13px; line-height: 2.05; color: #666; font-weight: 400; }
.ty-track-prize { margin-top: auto; padding-top: 18px; font-size: 13px; line-height: 1.6; color: #ff7a3a; }
.ty-track-prize span { font-weight: 700; }
.ty-track-stat { margin-top: 12px; font-size: 13px; color: var(--ty-muted); }
.ty-track-stat b { color: var(--ty-orange-deep); font-size: 18px; }

/* --- L6.2 · 我的投稿条 .ty-mine-banner --- */
.ty-mine-banner { margin-top: 16px; border-radius: 14px; background: #f2f9ff; border: 1px solid var(--ty-line); color: var(--ty-muted); font-size: 13px; display: none; }
.ty-mine-banner .ty-mine-inner { padding: 12px 14px; line-height: 1.5; }
.ty-mine-banner b { color: var(--ty-blue-deep); }

/* --- L6.3 · 投稿表单 .ty-form-card --- */
.ty-form-card { margin-top: 50px; background: #fff url("/img/twelve_year/bg_section_soft.png") top center / 100% auto no-repeat; border: none; border-radius: 20px; padding: 32px 36px 26px; box-shadow: 0 14px 36px rgba(58, 160, 239, 0.1); }
.ty-form-card.is-locked { opacity: .72; }
.ty-form-row { display: grid; grid-template-columns: 1.15fr 1fr; gap: 0 28px; align-items: start; }
.ty-field { min-width: 0; margin-bottom: 22px; }
.ty-form-card > .ty-field { margin-bottom: 18px; }
.ty-field label { display: block; font-size: 16px; font-weight: 800; color: #1d2b44; margin-bottom: 12px; }
.ty-field .hint { margin-top: 6px; font-size: 12px; color: var(--ty-muted); }
.ty-field input,
.ty-field textarea { background: #f4f8ff !important; width: 100%; border: 1.5px solid #d4e4f4; border-radius: 10px; padding: 13px 16px; font: inherit; font-size: 14px; background: #fff; color: var(--ty-ink); resize: vertical; }
.ty-form-card .ty-field input { height: 48px; box-sizing: border-box; background: #f4f8ff; }
.ty-field textarea { min-height: 148px; line-height: 1.7; }
.ty-field input:focus,
.ty-field textarea:focus { outline: none; border-color: var(--ty-blue); }
.ty-field input::placeholder,
.ty-field textarea::placeholder { color: #b7c2d0; }
.ty-track-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; height: 48px; }
.ty-track-pick label { margin: 0; display: flex; align-items: center; justify-content: center; text-align: center; height: 48px; box-sizing: border-box; border: 1.5px solid transparent; background: #eef1f6; border-radius: 10px; padding: 0 10px; cursor: pointer; font-weight: 700; font-size: 14px; color: #5b6b86; }
.ty-track-pick label span { display: flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap; }
.ty-track-pick img { width: 28px; height: 28px; object-fit: contain; flex: none; }
.ty-track-pick input { display: none; }
.ty-track-pick label:has(input:checked) { border-color: #7ec8f5; color: #1d2b44; background: #e8f4ff; }
.ty-track-pick label.is-disabled { opacity: .42; cursor: not-allowed; pointer-events: none; }
.ty-field input.is-error,
.ty-field textarea.is-error { border-color: #ff4d4f !important; }
.ty-field input.is-locked,
.ty-field textarea.is-locked { cursor: default; background: #eef3fa !important; }
.ty-form-submit { display: flex; justify-content: flex-end; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 4px; }
.ty-form-hint { font-size: 12px; color: #999; line-height: 1.4; }
.ty-form-submit .ty-btn { padding: 12px 36px; min-width: 132px; font-size: 15px; background: linear-gradient(90deg, #ffc43a, #ff7a28); box-shadow: 0 8px 18px rgba(255, 138, 61, 0.32); }
.ty-char-count { text-align: right; font-size: 12px; color: var(--ty-muted); margin-top: 6px; }
.ty-char-count.warn { color: var(--ty-orange); }
.ty-char-count.err { color: #ff4d4f; }

/* ========================================================================
   L7 · 图片创作（默认隐藏）
  DOM: section#ai
   ======================================================================== */

/* --- L7.1 · 上传面板 .ty-ai-grid / .ty-upload-zone --- */
.ty-ai-grid { display: grid; grid-template-columns: 420px 1fr; gap: 30px; align-items: start; }
.ty-ai-panel { background: linear-gradient(160deg, #161226, #221538); border-radius: var(--ty-radius); padding: 26px; box-shadow: 0 24px 60px rgba(108, 43, 217, 0.25); border: 1px solid rgba(255, 255, 255, 0.1); color: #fff; }
.ty-ai-panel h3 { font-size: 20px; margin: 0 0 6px; }
.ty-ai-panel .desc { color: rgba(255, 255, 255, 0.6); font-size: 13px; margin-bottom: 20px; line-height: 1.6; }
.ty-upload-zone { border: 2px dashed rgba(255, 255, 255, 0.22); border-radius: 18px; padding: 28px 20px; text-align: center; cursor: pointer; background: rgba(255, 255, 255, 0.04); transition: 0.2s; position: relative; overflow: hidden; }
.ty-upload-zone:hover { border-color: rgba(255, 255, 255, 0.4); background: rgba(255, 255, 255, 0.07); }
.ty-upload-zone.has-img { padding: 0; border-style: solid; border-color: rgba(255, 255, 255, 0.12); }
.ty-upload-zone .plus { font-size: 32px; color: #fff; font-weight: 300; line-height: 1; }
.ty-upload-zone .lbl { font-size: 13px; color: rgba(255, 255, 255, 0.7); margin-top: 10px; }
.ty-upload-zone .hint { font-size: 12px; color: rgba(255, 255, 255, 0.45); margin-top: 6px; }
.ty-upload-zone input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.ty-upload-preview { width: 100%; height: 190px; object-fit: cover; display: block; border-radius: 16px; }
.ty-upload-remove { position: absolute; top: 8px; right: 8px; background: rgba(0, 0, 0, 0.5); color: #fff; border: none; border-radius: 8px; padding: 4px 10px; font-size: 12px; cursor: pointer; z-index: 2; }
.ty-prompt-box { margin-top: 16px; }
.ty-prompt-box label { display: block; font-size: 13px; font-weight: 700; color: rgba(255, 255, 255, 0.8); margin-bottom: 8px; }
.ty-prompt-box textarea { width: 100%; border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 14px; padding: 13px 16px; font-size: 14px; font-family: inherit; background: rgba(255, 255, 255, 0.06); color: #fff; resize: vertical; min-height: 78px; }
.ty-prompt-box textarea::placeholder { color: rgba(255, 255, 255, 0.35); }
.ty-prompt-box textarea:focus { outline: none; border-color: var(--ty-purple); }
.ty-dark-input { width: 100%; border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 14px; padding: 13px 16px; font-size: 14px; font-family: inherit; background: rgba(0, 0, 0, 0.2); color: #fff; box-sizing: border-box; }
.ty-dark-input::placeholder { color: rgba(255, 255, 255, 0.35); }
.ty-dark-input:focus { outline: none; border-color: rgba(255, 107, 53, 0.7); background: rgba(0, 0, 0, 0.25); }
.ty-rank-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ty-prompt-hint { font-size: 12px; color: rgba(255, 255, 255, 0.45); margin-top: 6px; }
.ty-form-title { font-weight: 700; font-size: 13px; margin: 22px 0 12px; color: rgba(255, 255, 255, 0.85); }
.ty-form-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ty-form-opt { border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 14px; padding: 14px 8px; text-align: center; cursor: pointer; background: rgba(255, 255, 255, 0.05); transition: 0.2s; color: rgba(255, 255, 255, 0.8); }
.ty-form-opt .ico { font-size: 26px; }
.ty-form-opt .name { font-weight: 700; font-size: 13px; margin-top: 6px; }
.ty-form-opt .tip { font-size: 10px; color: rgba(255, 255, 255, 0.45); margin-top: 3px; }
.ty-form-opt.active { border-color: var(--ty-purple); background: rgba(108, 43, 217, 0.22); box-shadow: 0 8px 20px rgba(108, 43, 217, 0.25); color: #fff; }
.ty-gen-btn { width: 100%; margin-top: 22px; justify-content: center; background: linear-gradient(135deg, var(--ty-purple), #9b6bff); box-shadow: 0 12px 28px rgba(108, 43, 217, 0.35); }
.ty-progress { margin-top: 16px; display: none; }
.ty-progress.show { display: block; }
.ty-progress-bar { height: 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.12); overflow: hidden; }
.ty-progress-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--ty-gold), var(--ty-orange), var(--ty-purple)); transition: width 0.2s linear; }
.ty-progress-txt { font-size: 12px; color: rgba(255, 255, 255, 0.65); margin-top: 8px; text-align: center; }

/* --- L7.2 · 预览区 .ty-preview-stage --- */
.ty-preview-stage { background: var(--ty-card); border-radius: var(--ty-radius); padding: 28px; min-height: 520px; box-shadow: var(--ty-shadow); border: 2px solid var(--ty-line); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.ty-preview-empty { color: var(--ty-ink-soft); max-width: 360px; }
.ty-preview-empty .big { font-size: 54px; margin-bottom: 14px; }
.ty-preview-result { width: 100%; display: flex; flex-direction: column; align-items: center; }
.ty-preview-result .art { width: 300px; height: 300px; border-radius: 18px; overflow: hidden; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12); background: #f7f7f7; }
.ty-preview-result .art.poster { height: 420px; }
.ty-preview-result svg { width: 100%; height: 100%; display: block; }
.ty-result-meta { margin-top: 18px; }
.ty-result-meta .kw { font-size: 20px; font-weight: 900; }
.ty-result-meta .formname { font-size: 13px; color: var(--ty-ink-soft); margin-top: 4px; }
.ty-result-actions { display: flex; gap: 12px; margin-top: 18px; flex-wrap: wrap; justify-content: center; }

/* ========================================================================
   L8 · 排行榜 · 奖励池
  DOM: section#rank / #prize
   ======================================================================== */

/* --- L8.1 · 标题与 Tab --- */
.ty-rank-sec { padding-top: 40px; padding-bottom: 8px; }
.ty-rank-head { position: relative; text-align: left; margin-bottom: 18px; padding-top: 6px; }
.ty-rank-head::before { content: ""; position: absolute; left: 400px; right: 0; top: 30px; height: 50px; background: url("/img/twelve_year/border_pixel_strip.png") center / auto 100% repeat-x; opacity: 0.45; pointer-events: none; z-index: 0; }
.ty-rank-head h2 { position: relative; z-index: 1; margin: 0; font-size: 26px; font-weight: 900; color: #1d2b44; }
.ty-rank-head .ty-rank-tag { color: white; background: url(/img/twelve_year/tab_cyan_wide.png); height: 30px; line-height: 30px; display: inline-block; font-size: 20px; font-weight: 700; padding: 0px 20px 0 15px; background-size: 100% auto; margin-bottom: 10px; }
.ty-rank-head .ty-rank-sub { color: #425468; font-size: 13px; margin-top: 15px; }
.ty-lb-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px 16px; margin-bottom: 16px; flex-wrap: wrap; }
.ty-lb-bar .help-text { color: darkgray; margin: 5px 0; }
.ty-lb-tabs { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 0; }
.ty-lb-tools { display: flex; align-items: center; gap: 12px; margin-left: auto; min-width: 0; flex: 1 1 280px; justify-content: flex-end; }
.ty-lb-search { position: relative; flex: 1 1 220px; min-width: 180px; max-width: 360px; margin-bottom: 0; }
.ty-lb-search::before { content: ""; position: absolute; left: 12px; top: 50%; width: 14px; height: 14px; transform: translateY(-50%); pointer-events: none; opacity: .5; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%236b7c95' stroke-width='2' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3-3'/%3E%3C/svg%3E") center / contain no-repeat; }
.ty-lb-search input { width: 100%; height: 36px; box-sizing: border-box; border: 1.5px solid #cfe8ff; border-radius: 999px; padding: 0 14px 0 34px; background: #fff; color: #1d2b44; font: inherit; font-size: 13px; outline: none; -webkit-appearance: none; appearance: none; }
.ty-lb-search input::placeholder { color: #b7c2d0; }
.ty-lb-search input:focus { border-color: var(--ty-blue); }
.ty-lb-mine { flex: none; border: none; background: transparent; color: #3aa0ef; font: inherit; font-size: 14px; font-weight: 800; cursor: pointer; white-space: nowrap; padding: 8px 2px; }
.ty-lb-mine:hover { color: #2f8fe0; text-decoration: underline; }
.ty-rank-flag { display: inline-block; width: 12px; height: 12px; background-image: linear-gradient(45deg, #fff 25%, transparent 25%), linear-gradient(-45deg, #fff 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #fff 75%), linear-gradient(-45deg, transparent 75%, #fff 75%); background-size: 6px 6px; background-position: 0 0, 0 3px, 3px -3px, -3px 0; }
.ty-lb-tab { min-width: 108px; text-align: center; padding: 8px 20px; border-radius: 999px; background: #fff; border: 1.5px solid #cfe8ff; color: #6b7c95; font-size: 13px; font-weight: 700; cursor: pointer; font-family: inherit; }
.ty-lb-tab.active { color: #fff; border-color: transparent; background: linear-gradient(90deg, #feb22c, #f83a06); box-shadow: 0 8px 16px rgba(255, 138, 61, 0.28); outline: none; }
.ty-lb-tip { font-size: 12px; color: var(--ty-muted); margin-bottom: 12px; }

/* --- L8.2 · 作品网格 .ty-story-board --- */
.ty-rank-panel { min-height: calc(210px * 2 + 16px + 62px); }
.ty-story-board { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); gap: 16px; height: calc(210px * 2 + 16px); min-height: calc(210px * 2 + 16px); }
.ty-story-board:has(.ty-rank-empty) { display: flex; align-items: center; justify-content: center; }
.ty-story-card { background: #fff; border-radius: 16px; border: none; box-shadow: 0 10px 28px rgba(58, 160, 239, 0.1); padding: 20px 18px 14px; min-height: 0; height: 100%; display: flex; flex-direction: column; }
.ty-story-card .body { flex: 1; min-height: 0; font-size: 14px; line-height: 1.8; color: #3a465c; word-break: break-word; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; cursor: pointer; }
/* 桌面：悬停后在固定卡片高度内滚动 */
@media (hover: hover) and (pointer: fine) {
  .ty-story-card:hover .body { display: block; -webkit-line-clamp: unset; overflow-y: auto; overscroll-behavior: contain; }
}
.ty-story-card.is-expanded .body { display: block; -webkit-line-clamp: unset; overflow: visible; }
.ty-story-card .body::-webkit-scrollbar { width: 6px; }
.ty-story-card .body::-webkit-scrollbar-thumb { background: #c5d8ef; border-radius: 999px; }
.ty-story-card .meta { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 14px; font-size: 13px; color: var(--ty-muted); }
.ty-story-card .meta .author { display: inline-flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; color: #666; font-weight: 700; }
.ty-card-tag { font-style: normal; font-size: 11px; font-weight: 700; border-radius: 999px; padding: 1px 8px; flex: none; }
.ty-card-tag.per { color: #faa24b; background: #fff4db; }
.ty-card-tag.ent { color: #70bbff; background: #e9faff; }
.ty-card-actions { display: inline-flex; align-items: center; gap: 8px; flex: none; }
.ty-story-share { display: inline-flex; align-items: center; justify-content: center; flex: none; margin: 0; padding: 5px 14px; border: 0; border-radius: 20px; background: #eef6ff; color: #3aa0ef; font: inherit; font-size: 13px; font-weight: 700; line-height: 1; white-space: nowrap; cursor: pointer; }
.ty-story-share:hover { background: #e0f0ff; color: #2f8fe0; }
.ty-story-card .like,
button.ty-praise.like { display: inline-flex; align-items: center; gap: 4px; color: #ff6b81; font-weight: 800; flex: none; margin: 0; padding: 0; border: 0; background: transparent; cursor: pointer; font: inherit; line-height: 1; }
.ty-story-card .like img,
button.ty-praise.like img { width: 14px; height: 14px; }
button.ty-praise:disabled { opacity: 0.55; cursor: wait; }
button.ty-praise.like { background: #ffeeee; padding: 5px 15px; border-radius: 20px; }
.ty-rank-empty { grid-column: 1 / -1; padding: 36px 0; text-align: center; }
.ty-story-card.is-image .thumb { width: 100%; height: 110px; object-fit: cover; border-radius: 12px; margin-bottom: 10px; display: block; }
.ty-rank-lower { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 16px; margin-top: 20px; }

/* --- L8.2b · 点赞榜 + 奖励池双栏 --- */
.ty-rank-duo-sec { padding-top: 20px; padding-bottom: 48px; }
.ty-rank-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 0; align-items: stretch; }
.ty-like-board,
.ty-prize-pool { background: #fff; border-radius: 20px; border: 1px solid #d9ecff; box-shadow: 0 12px 32px rgba(58, 160, 239, 0.08); padding: 18px 18px 14px; min-width: 0; }
.ty-like-hd,
.ty-prize-hd { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; min-height: 40px; }
.ty-like-ico,
.ty-prize-ico { width: 40px; height: 40px; object-fit: contain; flex: none; }
.ty-like-hd h3,
.ty-prize-hd h3 { margin: 0; font-size: 18px; font-weight: 900; color: #1d2b44; line-height: 1.2; }
.ty-prize-hd h3 span { font-size: 12px; font-weight: 500; color: #8b95a7; }
.ty-like-tabs { display: flex; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.ty-like-tab { border: 1px solid #d9ecff; background: #fff; color: #6b7c95; font-size: 13px; font-weight: 700; padding: 8px 16px; border-radius: 999px; cursor: pointer; font-family: inherit; }
.ty-like-tab.active { background: linear-gradient(90deg, #ff9040, #ff5e3a); border-color: transparent; color: #fff; box-shadow: 0 8px 16px rgba(255, 94, 58, 0.28); }
.ty-like-list { display: flex; flex-direction: column; gap: 8px; max-height: 500px; overflow-y: auto; padding-right: 4px; scrollbar-width: thin; scrollbar-color: #c5d8ef transparent; }
.ty-like-list .ty-like-poster { width: 100%; height: auto; display: block; border-radius: 12px; }
.ty-like-list::-webkit-scrollbar { width: 6px; }
.ty-like-list::-webkit-scrollbar-thumb { background: #c5d8ef; border-radius: 999px; }
.ty-like-empty { padding: 28px 12px; text-align: center; color: #8b95a7; font-size: 13px; }
.ty-like-row { display: flex; align-items: center; gap: 10px; padding: 10px 10px; border-radius: 12px; background: #f7fbff; }
.ty-like-row:nth-child(even) { background: #fff; border: 1px solid #eef5fb; }
.ty-like-rank { flex: none; width: 28px; height: 28px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; color: #6b7c95; background: #eef2f7; }
.ty-like-rank.r1 { background: #ff8a3d; color: #fff; }
.ty-like-rank.r2 { background: #7ec8f5; color: #fff; }
.ty-like-rank.r3 { background: #ffc9a8; color: #c45a28; }
.ty-like-rank.rn { background: #eef2f7; color: #6b7c95; }
.ty-like-main { flex: 1 1 auto; min-width: 0; }
.ty-like-user { display: flex; align-items: center; gap: 6px; margin-bottom: 2px; flex-wrap: wrap; }
.ty-like-user b { font-size: 13px; color: #1d2b44; font-weight: 800; }
.ty-like-user .tag { font-size: 11px; font-weight: 700; border-radius: 999px; padding: 1px 8px; }
.ty-like-user .tag.per { color: #ff7a3a; background: #ffe8da; }
.ty-like-user .tag.ent { color: #3aa0ef; background: #dff1ff; }
.ty-like-user .time { font-size: 11px; color: #9aa6b8; font-weight: 500; margin-left: auto; }
.ty-like-snip { font-size: 12px; color: #6b7c95; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: default; }
.ty-like-snip.has-full { cursor: pointer; }
.ty-like-fulltip { position: fixed; z-index: 160; box-sizing: border-box; width: auto; height: auto; max-width: none; max-height: none; overflow: visible; padding: 10px 12px; background: #fff; color: #3a465c; font-size: 13px; line-height: 1.65; border-radius: 10px; box-shadow: 0 10px 28px rgba(29, 43, 68, 0.18); border: 1px solid #d9ecff; word-break: break-word; white-space: normal; pointer-events: none; }
.ty-like-heart,
.ty-like-count,
.ty-praise.ty-like-heart { flex: none; display: inline-flex; align-items: center; gap: 4px; color: #ff4d4f; font-size: 13px; font-weight: 800; margin: 0; padding: 0; border: 0; background: transparent; cursor: pointer; font-family: inherit; line-height: 1; }
.ty-like-heart img,
.ty-like-count img,
.ty-praise.ty-like-heart img { width: 16px; height: 16px; }
.ty-prize-pool-list { display: flex; flex-direction: column; gap: 14px; }
.ty-prize-group { display: flex; flex-direction: column; gap: 10px; }
.ty-prize-group-label { font-size: 16px; font-weight: 900; color: #73a8d0; width: 60px; display: inline-block; background-image: linear-gradient(0deg, #e6fbff 0%, transparent 45%); }
.ty-prize-group-label.one { color: #ef944a; background-image: linear-gradient(0deg, #fffac4 0%, transparent 45%); }
.ty-prize-tier { display: flex; align-items: center; gap: 12px; padding: 20px 25px; border-radius: 14px; min-height: 72px; }
.ty-prize-tier.tone-gold { background: linear-gradient(180deg, #ffecb8, #fffaee); position: relative; }
.ty-prize-tier.tone-silver { background: linear-gradient(180deg, #dcebff, #f4f9ff); position: relative; }
.ty-prize-tier.tone-bronze { background: linear-gradient(180deg, #fde7db, #fff9f5); position: relative; }
.ty-prize-tier.tone-join { background: linear-gradient(180deg, #f2f9ff, #f2f9ff); position: relative; }
.ty-prize-tier-body { flex: 1 1 auto; min-width: 0; }
.ty-prize-tier-title { font-size: 18px; font-weight: 900; color: #1d2b44; margin-bottom: 4px; }
.ty-prize-tier-title i { font-style: normal; font-weight: 900; }
.ty-prize-tier .ty-prize-tier-title i { color: #ff4d4d; }

/* .ty-prize-tier.tone-gold .ty-prize-tier-title i { color: #ff4d4d; }
.ty-prize-tier.tone-silver .ty-prize-tier-title i { color: #3aa0ef; }
.ty-prize-tier.tone-bronze .ty-prize-tier-title i { color: #ff7a3a; }
.ty-prize-tier.tone-join .ty-prize-tier-title i { color: #4db8ff; } */
.ty-prize-tier-desc { font-size: 12px; line-height: 1.55; color: #5b6b86; }
.ty-prize-tier-ico { width: 44px; height: 44px; object-fit: contain; flex: none; position: absolute; top: 0; right: 10px; }
.ty-prize-tier.tone-join .ty-prize-tier-ico { position: absolute; right: 0; bottom: 0; top: auto; width: 60px; height: auto; }
.ty-side-card { background: #fff; border-radius: 18px; border: 1px solid var(--ty-line); box-shadow: var(--ty-shadow); padding: 16px; }
.ty-side-card h4 { margin: 0 0 12px; font-size: 16px; display: flex; align-items: center; gap: 8px; }
.ty-side-card h4 img { width: 22px; height: 22px; }

/* --- L8.3 · 热门榜 / 奖项 / 分页 --- */
.ty-hot-list { display: grid; gap: 10px; }
.ty-hot-item { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.ty-hot-item .num { width: 22px; height: 22px; border-radius: 50%; background: #eef7ff; color: var(--ty-blue-deep); display: grid; place-items: center; font-weight: 800; font-size: 12px; flex: none; }
.ty-hot-item.top .num { background: linear-gradient(135deg, #ffd24a, #ff8a3d); color: #fff; }
.ty-hot-item .name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ty-prize-list { display: grid; gap: 12px; }
.ty-prize-item { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; line-height: 1.5; }
.ty-prize-item img { width: 36px; height: auto; flex: none; }
.ty-prize-item b { display: block; margin-bottom: 2px; }
.ty-address-box { margin-top: 0; padding-top: 0; border-top: none; }
.ty-modal-address .ty-address-box { margin-top: 4px; }
.ty-address-box h5 { margin: 0 0 6px; font-size: 15px; font-weight: 800; color: var(--ty-ink); }
.ty-address-tip { margin: 0 0 12px; font-size: 12px; color: var(--ty-muted); line-height: 1.5; }
.ty-address-box .ty-field { margin-bottom: 10px; }
.ty-address-box .ty-field label { font-size: 12px; }
.ty-address-box .ty-field input,
.ty-address-box .ty-field textarea { background: #fff; font-size: 13px; width: 100%; }
.ty-address-actions { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.ty-address-status { font-size: 12px; color: var(--ty-muted); }
.ty-pager { display: flex; justify-content: center; align-items: center; gap: 12px; margin-top: 18px; margin-bottom: 8px; }
.ty-pager button { border: 1px solid var(--ty-line); background: #fff; border-radius: 999px; padding: 8px 16px; cursor: pointer; font-weight: 700; color: var(--ty-muted); }
.ty-pager button:disabled { opacity: .45; cursor: not-allowed; }
.ty-rank-empty { padding: 36px 0; text-align: center; }

/* ========================================================================
   L9 · 礼品榜（默认隐藏）
  DOM: section#gift
   ======================================================================== */
.ty-gift-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.ty-gift-card { background: var(--ty-card); border: 2px solid var(--ty-line); border-radius: 18px; padding: 28px 20px; text-align: center; box-shadow: var(--ty-shadow); transition: 0.25s; }
.ty-gift-card:hover { transform: translateY(-4px); }
.ty-gift-card .lv { font-size: 13px; font-weight: 800; color: var(--ty-orange); }
.ty-gift-card .ico { font-size: 42px; margin: 14px 0; }
.ty-gift-card .nm { font-weight: 900; font-size: 17px; }
.ty-gift-card .cond { font-size: 13px; color: var(--ty-ink-soft); margin-top: 8px; line-height: 1.5; }

/* ========================================================================
   L10 · Part.02 教育版申请
  DOM: section#edu
   ======================================================================== */
.ty-edu-sec { padding-bottom: 8px; }
.ty-edu-panel { margin-top: 8px; display: grid; gap: 40px; grid-template-columns: 1fr 1fr; overflow: hidden; min-height: 420px; }
.ty-edu-promo { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 36px 25px 28px; background-image: url("/img/twelve_year/edu_background.png"); background-repeat: no-repeat; background-size: 100% auto; background-position: 50% 0%; border-radius: 25px; }
.ty-edu-promo-hd { display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 16px; }
.ty-edu-promo-hd h3 { margin: 0; font-size: 22px; font-weight: 900; color: #1d2b44; }
.ty-edu-free { display: inline-block; padding: 2px 10px; background: #ff8a3d; color: #fff; font-size: 12px; font-weight: 800; border-radius: 6px; line-height: 1.5; }
.ty-edu-price { width: 100%; border-radius: 0; padding: 30px 15px 25px; background-image: url("/img/twelve_year/eduTit_background.png");   background-repeat: no-repeat; background-size: 100% auto; background-position: 50% 100%; margin: 0 0 18px; }
.ty-edu-price .now { display: flex; align-items: baseline; justify-content: center; gap: 2px; color: #1d2b44; line-height: 1; }
.ty-edu-price .yen { font-size: 22px; font-weight: 800; }
.ty-edu-price .now b { font-size: 48px; font-weight: 900; letter-spacing: -1px; }
.ty-edu-price .unit { font-size: 16px; font-weight: 700; margin-left: 2px; }
.ty-edu-price .old { margin-top: 8px; color: #9aa6b8; font-size: 13px; text-decoration: line-through; font-weight: 400; }
.ty-edu-feat { list-style: none; margin: 0; padding: 0; width: 100%; text-align: left; }
.ty-edu-feat li { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 14px; line-height: 1.55; color: #3a465c; padding: 10px 0; border-bottom: 1px solid 1px solid rgba(0, 0, 0, .05); }
.ty-edu-feat .check { flex: none; width: 21px; height: 16px; display: block; }
.ty-edu-note { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 30px 0 0; font-size: 12px; color: #8b95a7; }
.ty-edu-note i { flex: none; width: 16px; height: 16px; border-radius: 50%; border: 1px solid #b7c2d0; font-style: normal; font-size: 11px; font-weight: 800; line-height: 14px; color: #8b95a7; }
.ty-edu-btn-learn { width: 96%; margin-top: 22px; height: 48px; font-size: 18px; color: #fff; background: linear-gradient(90deg, #ffb02e, #ff6a1a); box-shadow: 0 10px 22px rgba(255, 106, 26, 0.32); }
.ty-edu-form { display: flex; flex-direction: column; padding: 80px 48px 28px; background-image: url("/img/twelve_year/eduForm_background.png"); background-repeat: no-repeat; background-size: 100% auto; background-position: 50% 0%; border-radius: 25px; }
.ty-edu-field { margin-bottom: 18px; }
.ty-edu-field label { display: block; font-size: 15px; font-weight: 800; color: #1d2b44; margin-bottom: 10px; }
.ty-edu-field .req,
.ty-edu-up-label .req { color: #ff4d4f; margin-right: 2px; }
.ty-edu-field input { width: 100%; height: 46px; box-sizing: border-box; border: 1.5px solid #d4e4f4; border-radius: 10px; padding: 0 14px; font: inherit; font-size: 14px; background: #fff; color: var(--ty-ink); }
.ty-edu-field input:focus { outline: none; border-color: var(--ty-blue); }
.ty-edu-field input::placeholder { color: #b7c2d0; }
.ty-edu-field input.is-error { border-color: #ff4d4f; }
.ty-edu-btn-next { width: 100%; margin-top: auto; height: 48px; font-size: 18px; color: #3a7bd5; background: #d4e6ff; box-shadow: none; }
.ty-edu-btn-next:hover { background: #c6dcff; transform: none; }

/* ========================================================================
   L10.1 · 邀请好友
  DOM: section#invite
   ======================================================================== */
.ty-invite-body { display: flex; flex-direction: column; gap: 60px; margin-top: 50px; }
.ty-invite-panel { background: url("/img/twelve_year/invite_background.png") 0% 0%/100% auto no-repeat, linear-gradient(0deg, transparent 55%, #ffffff 75%); border-radius: 18px; padding: 0px 20px 20px; box-shadow: 0 10px 28px rgba(58, 160, 239, 0.06); }
.ty-invite-panel-hd { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px; margin-bottom: 16px; }
.ty-invite-label { display: inline-flex; align-items: center; height: 30px; padding: 0 16px; border-radius: 999px;  color: #000000; font-size: 22px; font-weight: 800; white-space: nowrap; width: 210px; margin: 10px 0; }
.ty-invite-label span { position: relative; padding: 0 15px; }
.ty-invite-label span::after { position: absolute; left: 0; right: 0; bottom: -3px; height: 6px; width: 100%; background: #FFF0C6; content: ""; display: block; }
.ty-invite-panel-hd p { margin: 0; color: #273156; font-size: 16px; line-height: 1.5; }
.ty-invite-rewards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 70px; padding: 30px 0 0;}
.ty-invite-rewards img { width: 100%; height: auto; display: block; border-radius: 12px; }
.ty-invite-progress-row { display: grid; grid-template-columns: 1fr 280px; gap: 18px; align-items: stretch; }
.ty-invite-progress-main { min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.ty-invite-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 50px; margin: 40px 50px 0px; }
.ty-invite-stat { position: relative; min-height: 150px; border-radius: 14px; padding: 18px 16px; display: flex; align-items: center; overflow: hidden; }
.ty-invite-stat-txt { position: relative; z-index: 1; font-size: 17px; font-weight: 400; color: #2b2b2b; line-height: 2; max-width: 62%; }
.ty-invite-stat-txt b { color: #FF5E5E; font-size: 40px; font-weight: 900; margin: 0 2px; }
.ty-invite-stat-art { position: absolute; inset: 0; z-index: 0; background-repeat: no-repeat; background-position: right center; background-size: contain; pointer-events: none; }
.ty-invite-lock-tip { display: none; margin: 0 0 14px; padding: 10px 14px; border-radius: 10px; background: #fff7e8; color: #c47a12; font-size: 13px; font-weight: 700; line-height: 1.5; }
.ty-invite-panel.is-locked .ty-invite-lock-tip { display: block; }
.ty-invite-panel.is-locked .ty-invite-link-bar input:disabled { color: #9aa6b8; background: #f0f3f6; box-shadow: inset 0 0 0 1px #e1e7ee; cursor: not-allowed; }
.ty-invite-panel.is-locked .ty-invite-copy:disabled,
.ty-invite-copy:disabled { opacity: 1; color: #fff; background: #c9d0da; box-shadow: none; cursor: not-allowed; transform: none; pointer-events: none; }
.ty-invite-track { position: relative; margin: 0px 40px 56px; height: 28px; }
.ty-invite-track-bar { position: absolute; left: 0; right: 0; top: 50%; height: 10px; margin-top: -5px; border-radius: 999px; background: #eceff3; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04); }
.ty-invite-track-fill { position: absolute; left: 0; top: 50%; height: 10px; margin-top: -5px; width: var(--invite-progress, 0%); border-radius: 999px; background: linear-gradient(90deg, #ffd24a, #ffb02e); max-width: 100%; transition: width .35s ease; }
.ty-invite-dot { position: absolute; top: 50%; width: 32px; height: 32px; margin: -16px 0 0 -16px; z-index: 2; }
.ty-invite-dot.is-end { left: 100%; }
.ty-invite-dot img { width: 100%; height: 100%; display: block; filter: grayscale(1); opacity: 0.55; transition: .2s; }
.ty-invite-dot.is-on img { filter: none; opacity: 1; }
.ty-invite-track-labels { position: absolute; left: 0; right: 0; top: 100%; margin-top: 10px; }
.ty-invite-track-labels span { position: absolute; top: 0; transform: translateX(-50%); color: #4a5158; font-size: 13px; font-weight: 600; white-space: nowrap; }
.ty-invite-track-labels .start { left: 0; transform: none; display: none; }
.ty-invite-track-labels .goal { left: 0; top: 0px; transform: none; color: #8b8b8b; font-weight: 700; font-size: 13px; }
.ty-invite-track-labels .end { left: 100%; transform: translateX(-100%); }
.ty-invite-qr { display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 8px; border: 1.5px dashed #c5d8ef; border-radius: 14px; background: #f8fbff; padding: 12px 10px; margin: 40px; }
.ty-invite-qr img { width: 100%; height: 100%; display: block; object-fit: contain; background: #fff; border-radius: 8px; }
.ty-invite-qr span { font-size: 13px; color: #6b7c95; font-weight: 700; }
.ty-invite-link-bar { margin-top: 8px; display: flex; align-items: center; padding: 0px; border-radius: 35px; background: #f6f9ff; border: 1px solid #e7eaf8; overflow: hidden; }
.ty-invite-link-bar label { flex: none; font-size: 15px; font-weight: 800; color: #1d2b44; white-space: nowrap; margin-bottom: 0; background-color: #cee0ff; width: 150px; height: 44px; text-align: center; line-height: 44px; }
.ty-invite-link-bar input { flex: 1; min-width: 0; height: 44px; border: none; border-radius: 10px; padding: 0 14px; background: transparent; font: inherit; font-size: 14px; color: #3a465c; box-shadow: none; margin: 0 20px 0 10px; }
.ty-invite-link-bar input:focus { outline: none; box-shadow: inset 0 0 0 1px var(--ty-blue); background: #fff; }
.ty-invite-link-bar input:disabled { color: #9aa6b8; cursor: not-allowed; }
.ty-invite-copy { width: 160px; height: 32px; line-height: 32px; margin-right: 14px; font-weight: 500; flex: none; min-width: 96px; height: 44px; padding: 0 26px; font-size: 16px; font-weight: 800; color: #fff; border-radius: 999px; background: linear-gradient(90deg, #ffb02e, #ff6a1a); box-shadow: 0 8px 16px rgba(255, 106, 26, 0.28); }
.ty-invite-copy:hover { transform: translateY(-1px); }

/* ========================================================================
   L11 · Part.03 创作大赛
  DOM: section#contest
   ======================================================================== */
.ty-coming { margin-top: 50px; background: url("/img/twelve_year/bg_pattern_tile.png"); border: 1px solid var(--ty-line); border-radius: 22px; min-height: 700px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 48px 20px; box-shadow: var(--ty-shadow); }
.ty-coming img.lock { width: 52px; margin-bottom: 12px; opacity: .8; }
.ty-coming h3 { margin: 0 0 8px; font-size: 22px; color: #546784; }

/* ========================================================================
   L12 · 庆祝页脚
  DOM: .ty-end / .ty-footer
   ======================================================================== */
.ty-end { position: relative; margin-top: 12px; overflow: hidden; }
.ty-end img.banner { width: 100%; max-width: 100%; display: block; }
.ty-end .caption { position: absolute; left: 50%; top: 62%; transform: translate(-50%, -50%); width: min(640px, 88%); display: flex; flex-direction: column; align-items: center; text-align: center; color: #fff; text-shadow: 0 4px 18px rgba(0, 0, 0, 0.28); pointer-events: none; z-index: 2; }
.ty-end .caption b { font-size: 36px; font-weight: 900; letter-spacing: 1px; color: #ffe749; }
.ty-end .caption span { margin-top: 10px; font-size: 18px; opacity: 0.96; line-height: 1.7; }
.ty-footer { text-align: center; padding: 14px 0 22px; color: #5b6b86; font-size: 13px; font-weight: 600; letter-spacing: 1px; background: #e8f4ff; border-top: 1px solid rgba(255, 255, 255, 0.6); }

/* ========================================================================
   L13 · 浮层
  DOM: toast / share modal / confetti
   ======================================================================== */

/* toast / modal */
.ty-toast-wrap { position: fixed; top: 78px; left: 50%; transform: translateX(-50%); z-index: 140; display: grid; gap: 8px; pointer-events: none; }
.ty-toast { background: rgba(29, 43, 68, 0.92); color: #fff; padding: 10px 16px; border-radius: 999px; font-size: 13px; }
.ty-mask { position: fixed; inset: 0; background: rgba(20, 30, 50, 0.45); display: none; align-items: center; justify-content: center; z-index: 110; padding: 16px; }
.ty-mask.show { display: flex; }
.ty-rules-mask { background: rgba(0, 0, 0, 0.55); }
.ty-modal-rules { width: 100%; max-width: min(720px, calc(100% - 20px)); background: transparent; padding: 0; position: relative; }
.ty-modal-rules .ty-modal-close { color: #fff; right: 4px; top: -10px; z-index: 2; }
.ty-rules-frame { position: relative; width: 100%; aspect-ratio: 848 / 558; }
.ty-rules-bg { display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.ty-rules-win-title { position: absolute; left: 9.1%; right: 9.1%; top: 0; height: 9.7%; margin: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 16px; font-weight: 800; letter-spacing: 2px; }
.ty-rules-body { position: absolute; left: 10.5%; right: 10.5%; top: 11.2%; bottom: 5%; overflow-y: auto; text-align: center; -webkit-overflow-scrolling: touch; }
.ty-rules-page { display: none; }
.ty-rules-page.is-active { display: block; }
.ty-rules-turn { position: absolute; right: 11%; bottom: 5%; z-index: 2; border: none; background: transparent; color: #58a3ff; font-size: 13px; font-family: inherit; cursor: pointer; padding: 0; line-height: 1; }
.ty-rules-frame[data-page="1"] #tyRulesPrev { display: none; }
.ty-rules-frame[data-page="2"] #tyRulesNext { display: none; }
.ty-rules-sec { margin: 0 0 10px; }
.ty-rules-h { display: inline-block; margin: 0 0 6px; padding: 3px 16px; background: #ffc43a; color: #fff; border-radius: 999px; font-size: 13px; font-weight: 800; line-height: 1.5; }
.ty-rules-h-orange { background: #ff8a3d; }
.ty-rules-h-blue { background: #4db8ff; }
.ty-rules-p { margin: 0 0 4px; color: #333; font-size: 12px; line-height: 1.7; }
.ty-rules-warn { color: #ff4d4f; }
.ty-rules-final { color: #3aa0ef; }
.ty-rules-sec-note { background: #e8f6ff; border-radius: 14px; padding: 8px 10px 10px; margin-bottom: 0; }
.ty-modal-hd { margin-bottom: 12px; }
.ty-modal-hd h3 { margin: 0 0 6px; font-size: 18px; font-weight: 900; color: #1d2b44; }
.ty-modal-hd p { margin: 0; font-size: 13px; color: #6b7c95; line-height: 1.5; }
.ty-modal-address .ty-modal-hd p + p { margin-top: 4px; line-height: 1.7; }
.ty-modal-mine .ty-modal-hd { text-align: left; }
.ty-modal-share { width: 100%; max-width: min(560px, calc(100% - 24px)); background: transparent; border-radius: 0; padding: 28px 0 8px; position: relative; max-height: 92vh; overflow: auto; text-align: center; }
.ty-modal-share .ty-modal-close { color: #fff; right: 0; top: -4px; }
.ty-share-poster { position: relative; width: 100%; aspect-ratio: 714 / 930; border-radius: 8px; overflow: hidden; }
.ty-share-poster-bg { display: block; width: 100%; height: 100%; object-fit: cover; }
.ty-share-paper { position: absolute; left: 26%; right: 26%; top: 48%; height: 17%; overflow: hidden; text-align: center; display: flex; flex-direction: column; justify-content: flex-start; align-items: center; }
.ty-share-story { color: #1d2b44; width: 100%; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.ty-share-story .t { font-size: 14px; font-weight: 900; margin-bottom: 6px; line-height: 1.4; flex: none; text-align: left; width: 100%; }
.ty-share-story .c { font-size: 12px; line-height: 1.7; white-space: pre-wrap; word-break: break-word; max-height: 100%; overflow: auto; text-align: left; }
.ty-share-qr { position: absolute; left: 18.91%; top: 79.46%; width: 15.41%; height: 11.83%; object-fit: contain; background: #fff; border-radius: 10px; padding: 3px; box-sizing: border-box; pointer-events: none; }
.ty-share-actions { display: flex; position: absolute; left: 26.5%; right: 22%; top: 95.5%; height: 4.5%; gap: 5%; z-index: 3; }
.ty-share-btn { flex: 1; padding: 0; border: none; background: transparent; cursor: pointer; opacity: 0; }
.ty-modal-address { width: 100%; max-width: min(440px, calc(100% - 32px)); background: #fff; border-radius: 18px; padding: 22px 20px 18px; position: relative; max-height: 88vh; overflow: auto; box-shadow: 0 20px 50px rgba(29, 43, 68, 0.18); }
.ty-modal-group { width: 100%; max-width: min(360px, calc(100% - 32px)); background: #fff; border-radius: 18px; padding: 22px 20px 24px; position: relative; max-height: 88vh; overflow: auto; box-shadow: 0 20px 50px rgba(29, 43, 68, 0.18); text-align: center; }
.ty-group-qr { display: flex; align-items: center; justify-content: center; margin: 4px auto 0; width: 220px; height: 220px; padding: 12px; background: #fff; border: 1px solid var(--ty-line); border-radius: 12px; box-sizing: border-box; }
.ty-group-qr img { display: block; width: 100%; height: 100%; object-fit: contain; }
.ty-modal-close { position: absolute; right: 12px; top: 8px; border: none; background: transparent; font-size: 28px; line-height: 1; cursor: pointer; color: #99a6bd; }
.ty-modal-mine { width: 100%; max-width: min(960px, calc(100% - 32px)); background: #f4f8ff; border-radius: 18px; padding: 22px 20px 14px; position: relative; max-height: 88vh; overflow: hidden; box-shadow: 0 20px 50px rgba(29, 43, 68, 0.18); display: flex; flex-direction: column; }
.ty-mine-board { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(2, 1fr); gap: 16px; height: calc(210px * 2 + 16px); min-height: calc(210px * 2 + 16px); }
.ty-mine-board.is-empty { display: flex; align-items: center; justify-content: center; }
.ty-mine-empty { padding: 36px 12px; text-align: center; color: #8b95a7; font-size: 13px; }
.ty-modal-mine .ty-pager { margin-top: 14px; margin-bottom: 4px; }
#tyShareMask { background: rgba(0, 0, 0, 0.72); z-index: 130; }
#tyMineMask { z-index: 125; }
#tyConfetti { position: fixed; inset: 0; pointer-events: none; z-index: 99; }

/* --- L12.2 · 右侧浮动咨询框 --- */
.ty-float-box { position: fixed; right: 15px; top: 50%; z-index: 90; width: 141px; aspect-ratio: 141 / 254; border: none; padding: 0; cursor: pointer; background: url("/img/twelve_year/float_background.png?t=333") center / contain no-repeat; filter: drop-shadow(0 8px 16px rgba(58, 160, 239, 0.28)); transition: transform .2s; }
.ty-float-box-content { position: absolute; left: 2%; top: 47%; width: 96%; height: 53%; }
.ty-float-box-txt { transition: all .3s; color: #2D4352; display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 400; letter-spacing: 0.04em; line-height: 1.2; height: 25%; }
.ty-float-box-txt.active  { background-color: rgba(255, 237, 215, 1); color: rgba(235, 75, 20, 1); }
.ty-float-box-txt:hover { color: rgba(235, 75, 20, 1); }

/* --- L12.3 · 新朋友见面礼弹框 --- */
#tyGiftMask { z-index: 128; background: rgba(0, 0, 0, 0.55); }
.ty-modal-gift { width: 100%; max-width: min(690px, calc(100% - 24px)); background: transparent; padding: 0; position: relative; }
.ty-modal-gift .ty-modal-close { color: #fff; right: 8px; top: -8px; z-index: 2; }
.ty-gift-frame { position: relative; width: 100%; aspect-ratio: 690 / 421; }
.ty-gift-bg { display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.ty-gift-qr { position: absolute; left: 68.3%; top: 41.4%; width: 18.7%; height: 27.7%; object-fit: contain; border-radius: 8px; padding: 4px; box-sizing: border-box; }
.ty-gift-btn { position: absolute; left: 20.5%; top: 85.5%; width: 22.4%; height: 10%; border: none; padding: 0; cursor: pointer; color: #fff !important; font: inherit; font-size: 14px; font-weight: 800; letter-spacing: 0.06em; line-height: 1; text-decoration: none; display: flex; align-items: center; justify-content: center; background: url("/img/twelve_year/gift_button.png") center / 100% 100% no-repeat; }
.ty-gift-btn:hover { filter: brightness(1.06); color: #fff; }

/* --- L13.4 · 教育版弹框（背景 message_background / 关闭 message_close） --- */
#tyEduLearnMask,
#tyEduUploadMask,
#tyEduSuccessMask { z-index: 132; background: rgba(20, 30, 50, 0.55); }
.ty-modal-msg { width: min(640px, calc(100% - 24px)); background: transparent; padding: 36px 0 0; position: relative; }
.ty-modal-msg-upload { width: min(600px, calc(100% - 24px)); }
.ty-msg-close { position: absolute; right: -45px; top: 0; z-index: 3; width: 35px; height: 35px; border: none; padding: 0; background: transparent; cursor: pointer; }
.ty-msg-close img { display: block; width: 35px; height: 35px; }
.ty-msg-frame { position: relative; width: 100%; aspect-ratio: 700 / 650; }
.ty-modal-msg-upload .ty-msg-frame { aspect-ratio: 700 / 900; }
.ty-msg-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; pointer-events: none; }
.ty-msg-body { position: absolute; left: 10%; right: 10%; top: 9%; bottom: 3%; display: flex; flex-direction: column; min-height: 0; }
.ty-modal-msg-upload .ty-msg-body { overflow: auto; -webkit-overflow-scrolling: touch; }
.ty-msg-body-center { align-items: center; text-align: center; top: 22%; }
.ty-msg-body h3 { margin: 0 0 10px; font-size: 22px; font-weight: 900; color: #1d2b44; }
.ty-msg-qr { width: min(230px, 60%); height: auto; margin: 30px 0 10px; display: block; }
.ty-msg-tip { margin: 0; font-size: 16px; line-height: 1.7; color: #080808; }
.ty-edu-btn-ok { width: min(240px, 100%); margin-top: auto; height: 44px; font-size: 17px; color: #fff; background: #58a3ff; padding: 7px 28px; font-weight: 500; }
.ty-edu-btn-ok:hover { background: #3aa0ef; }
.ty-edu-btn-ok.ty-edu-btn-learn { color: #fff; background: linear-gradient(90deg, #ffb02e, #ff6a1a); box-shadow: 0 10px 22px rgba(255, 106, 26, 0.32); }
.ty-edu-btn-ok.ty-edu-btn-learn:hover { background: #fff; }
.ty-edu-up { margin-bottom: 14px; }
.ty-edu-up-label { font-size: 20px; font-weight: 800; color: #1d2b44; margin-bottom: 15px; }
.ty-edu-up-row { display: flex; align-items: center; gap: 25px; }
.ty-edu-up-box { flex: none; width: 195px; height: 140px; border: 2x dashed #e6ebf2; border-radius: 10px; background: #f6f6f6; display: flex; align-items: center; justify-content: center; cursor: pointer; overflow: hidden; position: relative; }
.ty-edu-up-box .plus { font-size: 60px; font-weight: 300; color: #cdcdcd; line-height: 1; }
.ty-edu-up-box.has-img .plus { display: none; }
.ty-edu-up-box .preview { display: none; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.ty-edu-up-box.has-img .preview { display: block; }
.ty-edu-up-side { flex: 1; min-width: 0; }
.ty-edu-up-side p { margin: 0 0 10px; font-size: 15px; line-height: 1.6; color: #9aa6ae; }
.ty-edu-up-btn { height: 32px; padding: 6px 25px; border: 2px solid #efecff; border-radius: 999px; background: #fff; color: #62a8ff; font: inherit; font-size: 17px; font-weight: 700; cursor: pointer; transition: all .3s;}
.ty-edu-up-btn:hover { background: #62a8ff; color: #fff; }
.ty-edu-btn-submit { width: 100%; margin-top: auto; height: 46px; font-size: 16px; }

/* ========================================================================
   L14 · 响应式
  DOM: @media ≤980px / ≤480px
   ======================================================================== */

/* --- L13.1 · 笔记本 ≤1280px — 导航 / Hero / 时间线 / 表单 / 排行 --- */
@media (max-width:1280px) {
   .ty-modal-share {
      max-width: min(520px, calc(100% - 24px));
   }
   .ty-modal-msg-upload .ty-msg-frame { aspect-ratio: 700 / 820; }
   .ty-modal-msg-upload .ty-msg-body { top: 6%; }
   .ty-edu-up-label { margin-bottom: 10px; }
   .ty-edu-up { margin-bottom: 5px; }
}

/* --- L13.2 · 平板 ≤980px — 导航 / Hero / 时间线 / 表单 / 排行 --- */
@media (max-width:980px) {
   .ty-wrap { padding: 0 16px; }
   .ty-nav-in { height: auto; min-height: 56px; flex-wrap: wrap; padding: 8px 0 10px; }
   .ty-nav-links { order: 3; width: 100%; justify-content: flex-start; }
   .ty-hero-stage { aspect-ratio: 16 / 10; min-height: 460px; max-height: none; }
   .ty-hero-left { width: 100%; max-width: var(--ty-maxw); padding: 0 16px; margin: 0; align-self: center; }
   .ty-hero-head { gap: 4px 8px; min-height: 28%; }
   .ty-sticky { width: 161px; aspect-ratio: 161 / 120; height: auto; margin: -12px 0 0 -10px; }
   .ty-sticky span { font-size: 9px; }
   .ty-hero-card { width: min(640px, 100%); padding: 9% 4% 5%; min-height: 0; }
   .ty-hero-copy { margin-top: 48px; font-size: 12px; line-height: 1.65; }
   .ty-hero-copy b { font-size: 15px; }
   .ty-hero-copy .lead { font-size: 14px; }
   .ty-hero-copy strong { font-weight: bolder; color: #000; }
   .ty-hero-cta .ty-btn { padding: 10px 14px; font-size: 12px; }
   .ty-hero-prize { margin-left: 0; width: 100%; text-align: right; }
   .ty-tl-track { min-width: 1100px; }
   .ty-timeline { --wave-top: 22px; --paw: 38px; }
   .ty-tl-title { font-size: 14px; }
   .ty-tl-text { font-size: 12px; }
   .ty-sec-bar h2 { font-size: 22px; }
   .ty-story-head { padding-right: 96px; min-height: 56px; }
   .ty-part-label .tt { font-size: 20px; }
   .ty-story-pc { width: 88px; top: -10px; }
   .ty-banner-strip .txt { flex-direction: column; align-items: flex-start; gap: 2px; padding-right: 48px; }
   .ty-banner-strip .txt b { font-size: 15px; }
   .ty-banner-strip .txt span { font-size: 12px; }
   .ty-banner-strip .pc { width: 64px; }
   .ty-story-grid,
   .ty-story-board,
   .ty-rank-lower,
   .ty-rank-duo { grid-template-columns: 1fr; }
   .ty-lb-bar { align-items: stretch; }
   .ty-lb-tools { width: 100%; flex: 1 1 100%; margin-left: 0; }
   .ty-lb-search { max-width: none; }
   .ty-mine-board { grid-template-columns: 1fr; grid-template-rows: none; height: auto; min-height: 0; }
   .ty-mine-board .ty-story-card { min-height: 168px; height: auto; }
   .ty-rank-panel { min-height: 0; }
   .ty-story-board { grid-template-columns: 1fr; grid-template-rows: none; height: auto; min-height: 0; }
   .ty-story-card { min-height: 168px; height: auto; }
   /* 手机端点击展开：撑开高度显示全文，不出现卡片内滚动条，整页照常滑动 */
   .ty-story-card.is-expanded { height: auto; }
   .ty-story-card.is-expanded .body { flex: none; max-height: none; overflow: visible; }
   .ty-track-card { min-height: 0; padding: 32px 18px 18px; }
   .ty-form-card { padding: 22px 16px 18px; }
   .ty-form-row { grid-template-columns: 1fr; gap: 0; }
   .ty-field { min-width: 0; }
   .ty-track-pick { height: auto; }
   .ty-form-submit { justify-content: flex-end; }
   .ty-end .caption b { font-size: 12px; }
   .ty-end .caption span { font-size: 12px; }
   .ty-float-box { width: 128px; right: 8px; top: auto; bottom: 88px; }
   .ty-float-box-txt { font-size: 12px; }
   .ty-gift-btn { font-size: 11px; }
   .ty-edu-panel { grid-template-columns: 1fr; min-height: 0; }
   .ty-edu-promo { padding: 28px 22px 22px; background-size: 180% auto; }
   .ty-edu-form { padding: 22px 20px 20px; border-left: none; border-top: 1px dashed #c5d8ef; }
   .ty-edu-btn-learn,
   .ty-edu-btn-next { font-size: 16px; }
   .ty-modal-msg,
   .ty-modal-msg-upload { width: min(420px, calc(100% - 20px)); }
   .ty-msg-body h3 { font-size: 18px; }
   .ty-edu-up-box { width: 72px; height: 72px; }
   .ty-invite-body { gap: 24px; margin-top: 24px; }
   .ty-invite-panel { padding: 8px 14px 16px; border-radius: 16px; }
   .ty-invite-panel-hd { flex-direction: column; align-items: flex-start; gap: 4px; margin-bottom: 10px; }
   .ty-invite-label { width: auto; height: auto; margin: 2px 0 0; padding: 0 4px; font-size: 18px; }
   .ty-invite-label span { padding: 0 10px; }
   .ty-invite-panel-hd p { font-size: 12px; line-height: 1.5; }
   .ty-invite-rewards {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 8px;
      padding: 6px 0 2px;
   }
   .ty-invite-rewards img { border-radius: 10px; }
   .ty-invite-lock-tip { margin-bottom: 10px; font-size: 12px; padding: 8px 10px; border-radius: 8px; }
   .ty-invite-progress-row { grid-template-columns: 1fr; gap: 14px; }
   .ty-invite-progress-main { gap: 12px; }
   .ty-invite-stats {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      margin: 0;
      gap: 8px;
   }
   .ty-invite-stat {
      min-height: 0;
      padding: 10px 6px 8px;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      gap: 6px;
      text-align: center;
      overflow: visible;
   }
   .ty-invite-stat-txt {
      max-width: 100%;
      padding: 0;
      font-size: 12px;
      font-weight: 600;
      line-height: 1.35;
   }
   .ty-invite-stat-txt b { font-size: 22px; margin: 0 1px; }
   .ty-invite-stat-art {
      position: static;
      width: 58px;
      height: 48px;
      border-radius: 10px;
      background-size: 220%;
      background-position: 96% 88%;
      box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.04);
   }
   .ty-invite-track {
      margin: 2px 12px 52px;
      height: 22px;
   }
   .ty-invite-track-bar,
   .ty-invite-track-fill { height: 8px; margin-top: -4px; }
   .ty-invite-dot { width: 24px; height: 24px; margin: -12px 0 0 -12px; }
   .ty-invite-track-labels { margin-top: 10px; }
   .ty-invite-track-labels span { font-size: 11px; }
   .ty-invite-track-labels .start { left: 0; transform: none; }
   .ty-invite-track-labels .end { left: 100%; transform: translateX(-100%); }
   .ty-invite-track-labels .goal {
      left: 50%;
      top: 20px;
      transform: translateX(-50%);
      width: max-content;
      max-width: calc(100% + 24px);
      text-align: center;
      white-space: nowrap;
      font-size: 11px;
      font-weight: 700;
   }
   .ty-invite-qr {
      margin: 0 auto;
      width: 100%;
      max-width: 168px;
      padding: 10px;
      gap: 6px;
   }
   .ty-invite-qr img { width: 100%; max-width: 140px; margin: 0 auto; }
   .ty-invite-qr span { font-size: 12px; }
   .ty-invite-link-bar {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr);
      align-items: center;
      border-radius: 14px;
      margin-top: 2px;
   }
   .ty-invite-link-bar label {
      width: auto;
      min-width: 0;
      padding: 0 10px;
      font-size: 12px;
      height: 40px;
      line-height: 40px;
   }
   .ty-invite-link-bar input {
      margin: 0 8px;
      height: 40px;
      font-size: 12px;
      padding: 0 2px;
   }
   .ty-invite-copy {
      grid-column: 1 / -1;
      width: calc(100% - 16px);
      min-width: 0;
      margin: 0 8px 8px;
      height: 40px;
      font-size: 14px;
      box-shadow: none;
   }
}

/* --- L13.3 · 手机 ≤480px — Hero / 时间线缩放 --- */
@media (max-width:480px) {
   .ty-logo img { height: 24px; }
   .ty-hero-stage { aspect-ratio: auto; min-height: 0; height: auto; }
   .ty-hero-bg { object-position: 75% center; }
   .ty-hero-content { width: 100%; max-width: none; padding: 16px 12px 18px; margin: 0; align-self: start; }
   .ty-sticky { width: 76px; margin: -8px 0 0 -6px; }
   .ty-hero-card { width: 100%; aspect-ratio: auto; height: auto; min-height: 0; padding: 72px 16px 30px; }
   .ty-hero-copy { margin-top: 0; flex: none; font-size: 12px; line-height: 1.55; padding: 60px 10px 10px; }
   .ty-hero-copy p { margin: 0 0 8px; }
   .ty-hero-copy b { font-size: 14px; }
   .ty-hero-copy .lead { margin-top: 8px; margin-bottom: 4px; font-size: 13px; }
   .ty-hero-cta { gap: 8px; margin-top: 10px; justify-content: center; }
   .ty-hero-cta .ty-btn { padding: 8px 12px; font-size: 12px; }
   .ty-hero-right { width: 100%; margin: 2px 0 0; display: flex; justify-content: center; gap: 16px; }
   .ty-hero-prize { margin-left: 0; width: auto; text-align: center; padding: 4px 2px; }
   .ty-tl-track { min-width: 980px; }
   .ty-timeline { --wave-top: 18px; --paw: 34px; --copy-gap: 6px; }
   .ty-tl-title { font-size: 13px; }
   .ty-tl-text { font-size: 11px; }
   .ty-story-content .ty-story-bg .ty-story-base,
   .ty-story-content .ty-rules-link,
   .ty-story-content .ty-banner-strip { display: none; }
   .ty-story-content .ty-story-bg .ty-story-pc { margin-top: 30px; }
   .ty-coming { min-height: 180px; margin-top: 16px; padding: 24px 16px; }
   .ty-coming h3 { font-size: 16px; }
   .ty-edu-promo { padding: 22px 16px 18px; }
   .ty-edu-promo-hd h3 { font-size: 18px; }
   .ty-edu-price .now b { font-size: 40px; }
   .ty-edu-feat li { font-size: 13px; }
   .ty-edu-form { padding: 18px 14px 16px; }
   .ty-edu-btn-learn,
   .ty-edu-btn-next,
   .ty-edu-btn-submit,
   .ty-edu-btn-ok { height: 42px; font-size: 15px; }
   .ty-edu-btn-submit.ty-edu-btn-submit { box-shadow: none; }
   .ty-msg-qr { width: min(140px, 64%); margin: 0; }
   .ty-edu-up-row { gap: 8px; }
   .ty-edu-up-box { width: 64px; height: 64px; }
   .ty-edu-up-side p { font-size: 11px; }
   .ty-form-card { padding: 18px 14px 16px; }
   .ty-rules-win-title { font-size: 13px; letter-spacing: 1px; }
   .ty-rules-h { font-size: 11px; padding: 2px 12px; }
   .ty-rules-p { font-size: 11px; line-height: 1.6; }
   .ty-end .caption b { display: none; }
   .ty-float-box { width: 108px; right: 6px; bottom: 72px; }
   .ty-float-box-txt { font-size: 11px; }
   .ty-gift-btn { font-size: 10px; }
   .ty-msg-body { left: 5%; right: 5%;}
   .ty-msg-body-center { top: 25%; bottom: 7%; }
   .ty-msg-body-success { top: 11%; bottom: 8%; }
   .ty-msg-tip { font-size: 12px; display: none; }
   .ty-msg-tip-success { font-size: 12px; display: block; }
   .ty-edu-btn-ok { padding: 5px 20px; font-size: 14px; width: 70%; margin-bottom: 10px; }
   .ty-edu-up-box { width: 60px; height: 60px; }
   .ty-edu-up-side p { font-size: 10px; }
   .ty-edu-up-btn { height: 30px; padding: 4px 20px; font-size: 14px; }
   .ty-edu-up-label { font-size: 18px; margin-bottom: 10px; }
   .ty-edu-up-row { gap: 15px; }
   .ty-msg-close { right: -15px; top: -15px; width: 30px; }
   .ty-edu-price { padding: 16px 12px 10px; }
   .ty-modal-msg-upload .ty-msg-frame { aspect-ratio: 700 / 980; border-radius: 25px; background: white; }
   .ty-invite-body { gap: 18px; margin-top: 16px; }
   .ty-invite-panel { padding: 6px 12px 14px; }
   .ty-invite-label { font-size: 17px; }
   .ty-invite-panel-hd p { font-size: 11px; }
   .ty-invite-rewards { gap: 6px; }
   .ty-invite-stats { gap: 6px; }
   .ty-invite-stat { padding: 8px 4px 6px; gap: 4px; }
   .ty-invite-stat-txt { font-size: 11px; }
   .ty-invite-stat-txt b { font-size: 18px; }
   .ty-invite-stat-art { width: 52px; height: 44px; background-size: 230%; background-position: 98% 90%; }
   .ty-invite-track { margin: 0 10px 48px; }
   .ty-invite-dot { width: 22px; height: 22px; margin: -11px 0 0 -11px; }
   .ty-invite-track-labels span { font-size: 10px; }
   .ty-invite-track-labels .goal { left: 50px; top: 18px; font-size: 10px; letter-spacing: -0.2px; white-space: normal; line-height: 1.3; max-width: 100%; }
   .ty-invite-qr { max-width: 148px; padding: 8px; }
   .ty-invite-qr img { max-width: 124px; }
   .ty-invite-link-bar { gap: 10px; }
   .ty-invite-link-bar label { font-size: 11px; padding: 0 8px; height: 38px; line-height: 38px; }
   .ty-invite-link-bar input { height: 38px; font-size: 11px; margin: 0 6px; }
   .ty-invite-copy { width: calc(100% - 12px); margin: 0 6px 6px; height: 38px; font-size: 13px; }
}