/* r53 additions: page-to-page motion and small layout fixes. Detail pages fade only (fixed bars would shift under a transform). */
@keyframes uf-view-forward{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}
@keyframes uf-view-back{from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:none}}
@keyframes uf-view-fade{from{opacity:0}to{opacity:1}}
#view.view-forward{animation:uf-view-forward .22s cubic-bezier(.2,.8,.2,1)}
#view.view-back{animation:uf-view-back .22s cubic-bezier(.2,.8,.2,1)}
#view.view-fade{animation:uf-view-fade .2s ease-out}
@media (prefers-reduced-motion:reduce){#view.view-forward,#view.view-back,#view.view-fade{animation:none}}
/* Narrow English: long stage names, the detail action button and empty-state links wrap instead of overflowing. */
@media (max-width:359px){
  .seg-labels{grid-template-columns:repeat(6,minmax(0,1fr))}
  .seg-labels span{overflow-wrap:anywhere}
  .actbar .main{white-space:normal;line-height:1.25}
  .empty .uf-nav-button,.empty .uf-nav-copy>span{white-space:normal}
}
/* Fundraising card amount: "$" only (no "US"), set larger next to the raised figure at the user's request. */
#app .ufc-ticket .ufc-raised small{font-size:18px;font-weight:650;line-height:1.15}
@media (max-width:380px){#app .ufc-ticket .ufc-raised small{font-size:16px}}
/* Fundraising card "作品介紹": icon, label and arrow centred as one group, like the other card buttons. */
#app .ufc-ticket .ufc-button--story>span:not(.ufc-external-arrow){flex:0 1 auto}
/* r50 narrow-screen layout for the funding panel (column width only, no colours): keeps "距離截止" on one line. */
@media (max-width:370px){#app .ufc-summary{grid-template-columns:48px minmax(0,1fr);gap:12px}#app .ufc-countdown{padding-right:10px}}
/* Narrow screens, Chinese: "作品介紹" stays on one line on fundraising and released cards (tighter icon, gap and padding). */
@media (max-width:370px){
  html:not([lang="en"]) #app .ufc-button--story.uf-nav-button{padding-inline:8px;gap:5px}
  html:not([lang="en"]) #app .ufc-button--story.uf-nav-button .uf-nav-art{width:18px;height:18px}
  html:not([lang="en"]) #app .ufc-button--story.uf-nav-button .uf-nav-arrow{width:13px;height:13px}
  html:not([lang="en"]) #app .ufc-button--story.uf-nav-button .uf-nav-copy{white-space:nowrap}
}
/* Home: every section (熱門好劇 / 募集倒計時 / 最近上線 / 熱榜前十) shares one heading row, type size and spacing. */
#app .home-page .hm-section-head{min-height:44px;margin-bottom:14px;align-items:center;gap:12px}
#app .home-page .hm-section-head h1,#app .home-page .hm-section-head h2{font:700 20px/1.3 var(--sans);letter-spacing:-.3px;margin:0}
#app .home-page>.hm-feature{margin-top:16px}
#app .home-page>.hm-funding,#app .home-page>.hm-live,#app .home-page>.hm-charts{margin-top:32px}
#app .home-page>.hm-funding .sec{padding-top:0}
#app .home-page>.hm-funding .hm-section-head{padding:0 18px}
/* At 350px and below Home's sections use a 13px gutter (home.css); 募集倒計時 follows them. */
@media(max-width:350px){#app .home-page>.hm-funding .hm-section-head{padding:0 13px}#app .home-page>.hm-funding .rail{padding-left:13px;padding-right:13px;scroll-padding-left:13px}#app .home-page>.hm-funding .hm-funding-nav{margin-left:13px;margin-right:13px}}
#app .home-page .hm-section-head>a.uf-nav-button{flex:none;width:116px;justify-content:space-between}
/* Header slogan: one line beside the logo, set off by a hairline. */
#app .site-tagline{flex-direction:row;align-items:center;padding-left:12px;border-left:1px solid rgba(98,48,75,.22);font:500 12px/1.4 var(--sans);color:#6b4a5d}
#app .site-tagline .t-comma{white-space:pre}
/* Keep the complete slogan on one line; compact the header gutters first. */
@media(max-width:429px){#app .site-header{padding-inline:14px;gap:6px}#app .site-brand{gap:6px}#app .site-tagline{padding-left:8px}}
@media(max-width:374px){#app .site-header .locale-tools select{width:72px}}
@media(max-width:429px){html[lang="en"] #app .site-tagline{font-size:11px}html[lang="en"] #app .site-header .locale-tools select{width:68px}}
@media(max-width:374px){html[lang="en"] #app .site-header .up-install-header{display:none}}
@media(max-width:359px){html[lang="en"] #app .site-header{padding-inline:12px;gap:4px}html[lang="en"] #app .site-brand{gap:4px}}
/* Chinese UI: decorative English kickers are not shown (titles, platform names and currency codes stay as they are). */
html:not([lang="en"]) .page-masthead-top>span[lang="en"],
html:not([lang="en"]) .feature-eyebrow,
html:not([lang="en"]) .ops-kicker,
html:not([lang="en"]) .hm-eyebrow{display:none}
/* Earnings position card: platform logo and stage badge (募集中 / 募集完 / 已上線, same pills as Discover) sit right after the title; "詳情" closes the metrics row. */
#app .er-work-head{grid-template-areas:"poster name profit"}
#app .er-work-name{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px}
#app .er-work-name>strong{min-width:0}
#app .er-work-name>.er-work-meta{display:inline-flex;gap:6px}
/* New legend groups keep the original colour of not-yet-released money (no new colours). */
#app .er-composition>i.funding,#app .er-legend i.funding,#app .er-composition>i.awaiting,#app .er-legend i.awaiting{background:var(--er-unreleased)}
#app .er-work .er-metrics{grid-template-columns:repeat(3,minmax(0,1fr)) auto;align-items:center}
#app .er-work .er-metrics>.er-story-button{justify-self:end;margin-left:0}
@media(max-width:370px){#app .er-work-head{grid-template-areas:"poster name" "profit profit"}
  #app .er-work .er-metrics{gap:6px}
  #app .er-work .er-metrics b{font-size:13px;white-space:nowrap;overflow-wrap:normal}
  #app .er-work .er-metrics>.er-story-button.uf-nav-button{padding-inline:6px;gap:3px}
  #app .er-work .er-metrics>.er-story-button.uf-nav-button .uf-nav-art{width:18px;height:18px}
  #app .er-work .er-metrics>.er-story-button.uf-nav-button .uf-nav-arrow{width:14px;height:14px}
}
/* Member profile: locked login email with a single "變更" button; account-security rows reuse the menu row layout. */
#app .profile-login>.profile-email{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px;padding:6px 6px 6px 14px;border:1px solid var(--line);border-radius:10px;background:var(--raised)}
#app .profile-email>b{min-width:0;font:600 14px/1.4 var(--sans);color:var(--ink);overflow-wrap:anywhere}
#app .profile-email>.btn,#app .menu-row>.btn{flex:none}
#app .profile-login>small{display:block;margin-top:6px;font-size:12px;line-height:1.5;color:var(--muted)}
#app .profile-security{margin-top:28px}
#app .profile-security>h2{margin:0 0 10px;font:650 15px/1.4 var(--sans)}
#app .menu>.menu-row{display:flex;align-items:center;gap:12px;min-height:58px;padding:10px 14px 10px 16px;border-bottom:1px solid var(--line)}
#app .menu>.menu-row:last-child{border-bottom:0}
/* 我的 footer (only what was asked): "Upfront" set in the logo's typeface, colours unchanged (muted); 退出登錄 in bold red. */
#app .account-footer{align-items:center}
#app .account-footer-brand{display:flex;align-items:center;gap:6px;min-width:0}
#app .account-footer-brand .upfront-wordmark{font-size:18px;letter-spacing:-.6px;color:inherit}
#app .account-footer-brand>i{font-style:normal}
#app .account-footer-tagline{font:500 12px/1.4 var(--sans);white-space:nowrap}
#app .account-footer .account-logout{padding:10px 0 10px 12px;font:700 14px/1.4 var(--sans);color:var(--down)}
/* 消息中心 → 提醒設置: toggles align with the page text; 我的關注 rows keep one heart button (bells removed), centred on narrow screens. */
#app .inbox-settings{margin:4px 0 0}
@media(max-width:370px){#app .following-list .prow>.icon-btn:last-child{grid-row:1 / span 2;align-self:center}}
/* When the footer wraps (narrow English), 退出登錄 stays on the right. */
#app .account-footer .account-logout{margin-left:auto}
/* 合作生態 now closes the New tab: same 16px gutter and section spacing as the rest of that page. */
#app .radar-page>.partner-footer,#app .home-page>.partner-footer{margin-top:28px;padding:0 16px}
/* Stage icons (募集中 coin box / 募集完 seal / 已上線 clapperboard) replace the dot on every stage pill; sizes follow each pill. */
#app .stage.has-art::before{display:none}
#app .stage>.stage-art{width:16px;height:16px;flex:none;object-fit:contain;margin-left:-3px}
#app .prow .info .stage>.stage-art{width:14px;height:14px}
#app .pc-badge{display:inline-flex;align-items:center;gap:5px}
#app .pc-badge>.stage-art{width:16px;height:16px;flex:none;object-fit:contain}
#app .ufc-stage>.ufc-stage-art{width:19px;height:19px;object-fit:contain;flex:none}
#app .er-release-status>.stage-art{width:18px;height:18px;object-fit:contain}
/* "了解參與 / 登記意向" now carries the handshake: same one-line treatment as 作品介紹 on narrow Chinese screens. */
@media (max-width:370px){
  html:not([lang="en"]) #app .ufc-button--join{padding-inline:8px;gap:5px}
  html:not([lang="en"]) #app .ufc-button--join>.ufc-action-art{width:18px;height:18px}
  html:not([lang="en"]) #app .ufc-button--join>svg{width:13px;height:13px}
  html:not([lang="en"]) #app .ufc-button--join>span{white-space:nowrap}
}
/* 最近上線 cards: the title always takes two lines' height (longer titles end in …), so platform logos line up across cards. */
#app .home-page .hm-project-copy>strong{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;line-height:1.4;min-height:2.8em}
/* Card save / follower counts: filled heart in the existing 已關注 heart colour (brand.css follow heart, no new colour). */
#app .ufc-stat>.ufc-heart{color:rgb(205,70,127)}
/* Unified title sheet (作品介紹): platform pills, the 主創 list and the 關注 + main-action bar. The drawer sits outside
   #app, so these rules are drawer-scoped and reuse existing colours only (drawer greys, follow pinks from brand.css). */
.ufc-drawer .ufc-sheet-platforms{display:inline-flex;flex-wrap:wrap;justify-content:flex-end;gap:6px;margin:0}
.ufc-drawer .ufc-sheet-platforms>span{font-weight:600}
.ufc-drawer .ufc-sheet-logo{display:inline-flex;width:20px;height:20px;flex:none}
.ufc-drawer .ufc-sheet-logo img{width:100%;height:100%;object-fit:contain;border-radius:5px}
.ufc-drawer .ufc-sheet-team{list-style:none;margin:0;padding:0}
.ufc-drawer .ufc-sheet-mystery{margin:0;font-size:13px;line-height:1.8;color:#796270}
.ufc-drawer .ufc-sheet-actions{position:static;display:flex;gap:10px;max-width:none;margin:0;padding:0;background:none;-webkit-backdrop-filter:none;backdrop-filter:none;border:0;box-shadow:none}
.ufc-drawer .ufc-sheet-actions .btn{height:50px}
.ufc-drawer .ufc-sheet-actions .follow{flex:none;padding:0 14px;color:#b23f73}
.ufc-drawer .ufc-sheet-actions .follow[aria-pressed="true"]{color:#cd467f}
.ufc-drawer .ufc-sheet-actions .follow svg{width:20px;height:20px;flex:none}
.ufc-drawer .ufc-sheet-actions .main{flex:1;min-width:0;text-decoration:none}
/* Fundraising titles: the sheet takes the funding card's colours (panel #fff0e5, text #683e30, labels #9b674f,
   dividers #dcb59f, terracotta #9b5339 button), all taken from funding-cards.css; other stages keep the sheet's own. */
.ufc-drawer[data-stage="funding"],.ufc-drawer[data-stage="funding"] .ufc-drawer-header,.ufc-drawer[data-stage="funding"] .ufc-drawer-footer{background:#fff0e5}
.ufc-drawer[data-stage="funding"] .ufc-drawer-header{border-bottom-color:#dcb59f}
.ufc-drawer[data-stage="funding"] .ufc-drawer-footer{border-top-color:#dcb59f}
.ufc-drawer[data-stage="funding"] .ufc-drawer-facts>div,.ufc-drawer[data-stage="funding"] .team li{border-bottom-color:#dcb59f}
.ufc-drawer[data-stage="funding"] .ufc-drawer-facts dt,.ufc-drawer[data-stage="funding"] .ufc-sheet-mystery{color:#9b674f}
.ufc-drawer[data-stage="funding"] .ufc-full-story{color:#683e30}
.ufc-drawer .ufc-sheet-actions .ufc-button{flex:1;min-width:0;height:50px}
.ufc-drawer .ufc-sheet-actions .ufc-button:disabled{opacity:.55;cursor:not-allowed;filter:none}
/* Card buttons: "作品介紹" centres its label like "前往觀看" / "了解參與" (icon left, label centred, arrow right). */
#app .ufc-button--story.uf-nav-button .uf-nav-copy{text-align:center}
/* Released-card counters: the same size as the funding-card counters (r48 sizes); their colours stay as they are. */
#app .ufc-card--released .ufc-stat{min-height:28px;min-width:46px;padding:5px 8px}
#app .ufc-card--released .ufc-stat b{font-size:11px}
#app .ufc-card--released .ufc-stat svg{width:12px;height:12px}
/* 消息中心: one simple row per message (unread dot, title + time, one short line); 作品動態 sits on top. Existing tokens only. */
#app .inbox-list{margin-top:4px;border:1px solid var(--line);border-radius:12px;background:var(--raised);overflow:hidden}
#app .inbox-row{display:flex;align-items:flex-start;gap:10px;width:100%;box-sizing:border-box;padding:12px 14px;border:0;border-bottom:1px solid var(--line);background:none;text-align:left;font:inherit;color:inherit;cursor:pointer;text-decoration:none}
#app .inbox-list>.inbox-row:last-child{border-bottom:0}
#app .inbox-dot{flex:none;width:7px;height:7px;margin-top:7px;border-radius:50%}
#app .inbox-main{flex:1;min-width:0;display:grid;gap:3px}
#app .inbox-top{display:flex;align-items:baseline;justify-content:space-between;gap:10px;min-width:0}
#app .inbox-top b{min-width:0;font-size:14px;font-weight:650;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#app .inbox-row:not(.unread) .inbox-top b{font-weight:500}
#app .inbox-top time{flex:none;font-size:11px;color:var(--muted)}
#app .inbox-main small{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;font-size:12.5px;line-height:1.5;color:var(--ink-2)}
#app .inbox-updates{margin:4px 0 12px;border:1px solid var(--line);border-radius:12px;background:var(--raised)}
#app .inbox-arrow{flex:none;align-self:center;font-size:20px;line-height:1;color:var(--muted)}
/* Title sheet: fact labels never wrap (the platform pills wrap instead); a permanently disabled main action shows not-allowed, as on the title page. */
.ufc-drawer .ufc-drawer-facts dt{flex:none;white-space:nowrap}
.ufc-drawer .ufc-drawer-facts dd{min-width:0}
.ufc-drawer .ufc-sheet-actions .main:disabled{opacity:.55;cursor:not-allowed}
/* A toast shown while the sheet is open sits inside it, just above the sheet's action bar. */
#ufc-drawer>.toast{bottom:calc(92px + env(safe-area-inset-bottom,0px))}
/* 收益 status pill: each state takes its progress-bar colour. 募集完 (and 募集中 / 已上線 with data pending) grey,
   回本中 pink, 已回本 plum; text contrast 7.7 / 5.9 / 5.9. One size, weight and width across states. */
#app .er-status{min-width:64px;box-sizing:border-box;padding:4px 10px;border-radius:999px;font:650 12px/1.35 var(--sans);letter-spacing:.02em;text-align:center;font-variant-numeric:tabular-nums}
#app .er-status.is-production,#app .er-status.is-funding,#app .er-status.is-live{background:var(--er-unreleased);color:#503745}
#app .er-status.is-recovering{background:var(--er-recovering);color:#30202b}
#app .er-status.is-recovered{background:var(--er-recovered);color:#fff}
/* 收益 secondary labels: one step darker in the same plum-grey (contrast 5.8 → 7.8 on the card) and medium weight. */
#app .er-reference{--er-muted:#684657}
#app .er-label,#app .er-metrics small,#app .er-legend,#app .er-section-head p,#app .er-records li small,#app .er-empty p{font-weight:500}
#app .er-records li small{font-size:11.5px;line-height:1.5}
/* Legend: one column per group, the amount under its label, so long amounts never crowd the row. */
#app .er-legend{display:grid;grid-template-columns:repeat(auto-fit,minmax(72px,1fr));gap:10px 12px;margin-top:10px}
#app .er-legend>span{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:start;column-gap:5px;row-gap:2px;min-width:0;white-space:normal}
#app .er-legend>span>i{margin:5px 0 0}
#app .er-legend>span>span{min-width:0;line-height:1.4}
#app .er-legend>span>b{grid-column:1/-1;font:650 13px/1.3 var(--sans);color:var(--ink);white-space:nowrap}
/* Figures never wrap inside a number: earnings-preview.js fitFigures() gives each row of figures one size that fits every column
   (measured), and a card whose figures still do not fit gives 詳情 its own line (is-stacked). */
#app .er-metrics b{white-space:nowrap;overflow-wrap:normal}
#app .er-work .er-metrics.is-stacked{grid-template-columns:repeat(3,minmax(0,1fr))}
#app .er-work .er-metrics.is-stacked>.er-story-button{grid-column:1/-1;justify-self:end}
#app .er-hero>strong.is-xlong{font-size:27px}
#app .er-work-profit>b.is-long{font-size:16px}
#app .er-work-profit>b.is-xlong{font-size:14.5px}
/* 收益記錄: credits in the profit plum, outflows in ink; amounts held or sent to production and estimated 分紅 in the lighter
   plum-grey (#775b6e, the page's earlier label colour), so only money that actually moved reads as a credit or debit. */
#app .er-ledger li.is-out>strong{color:var(--ink)}
#app .er-ledger li.is-hold>strong{color:#775b6e;font-weight:500}
#app .er-ledger li.is-estimate>strong{color:#775b6e;font-weight:600}
#app .er-records>p.er-ledger-note{display:block;border-top:0;padding-top:6px;font-size:11.5px;line-height:1.5}
/* 參與意向: registered interests and followed raises in two groups; every row opens the title sheet. */
#app .er-interests h3{display:flex;align-items:center;gap:6px;margin:16px 0 2px;font:650 12px/1.5 var(--sans);color:var(--er-muted)}
#app .er-interests h2+h3{margin-top:0}
#app .er-interests h3>span{font-weight:500}
#app .er-interests li{display:block;padding:0}
#app .er-interests .er-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 0;color:inherit;text-decoration:none}
#app .er-interests .er-row>span{min-width:0}
#app .er-interests .er-row b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#app .er-interests .er-row>strong{font:650 12.5px/1.5 var(--sans);color:var(--er-profit);white-space:nowrap}
/* Chinese labels: the Windows Chinese font has no 500 face, so weight alone changes nothing there; the labels the owner flagged
   gain a size step instead (12 → 13px above 370px, where the columns have room). 回報率 takes the same step in both languages. */
@media (min-width:371px){
  html:not([lang="en"]) #app :is(.er-label,.er-metrics small,.er-legend>span>span,.er-section-head p){font-size:13px}
}
#app .er-work-profit>small{font-size:13px}
/* Title page story and logline: Chinese source in Chinese, the English tagline in English (member.js byLang). */
html[lang="en"] #app .zh-only,html:not([lang="en"]) #app .en-only{display:none}
/* 登記參與意向 inside the sheet (funding palette only): the raise at a glance, amount chips plus any amount, then 返回 / 確認 in
   the bar, and a confirmation after it. */
.ufc-drawer .ufc-register-work{grid-template-columns:56px minmax(0,1fr);gap:14px;margin-bottom:16px}
.ufc-drawer .ufc-register-work>img{width:56px}
.ufc-drawer .ufc-register-work h3{font-size:18px;margin:4px 0 2px}
.ufc-drawer .ufc-register-left{margin:0;font-size:12px;font-weight:600;color:#9b5339}
.ufc-drawer .ufc-raise{border:1px solid #dcb59f;border-radius:14px;background:#fffaf6;padding:14px 16px;margin:0 0 22px}
.ufc-drawer .ufc-raise-top{display:flex;justify-content:space-between;align-items:flex-end;gap:12px}
.ufc-drawer .ufc-raise-top>div{display:grid;gap:2px;min-width:0}
.ufc-drawer .ufc-raise-top>div+div{text-align:right}
.ufc-drawer .ufc-raise-top span{font-size:12px;color:#9b674f}
.ufc-drawer .ufc-raise-top b{font-size:20px;line-height:1.25;font-weight:700;color:#683e30;font-variant-numeric:tabular-nums;white-space:nowrap}
.ufc-drawer .ufc-raise-top>div+div b{font-size:15px;font-weight:650}
.ufc-drawer .ufc-raise-bar{display:flex;align-items:center;gap:10px;margin-top:12px}
.ufc-drawer .ufc-raise-track{flex:1;height:6px;border-radius:3px;background:#e9d2c3;overflow:hidden}
.ufc-drawer .ufc-raise-track>i{display:block;height:100%;border-radius:inherit;background:#c57350}
.ufc-drawer .ufc-raise-bar>b{font-size:12px;font-weight:650;color:#a25535}
.ufc-drawer .ufc-raise-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(84px,1fr));gap:10px;margin:14px 0 0;padding-top:12px;border-top:1px dashed #dcb59f}
.ufc-drawer .ufc-raise-facts>div{display:grid;gap:2px;min-width:0}
.ufc-drawer .ufc-raise-facts dt{font-size:11.5px;color:#9b674f}
.ufc-drawer .ufc-raise-facts dd{margin:0;font-size:14px;font-weight:650;color:#683e30;font-variant-numeric:tabular-nums}
.ufc-drawer .ufc-raise-note{margin:10px 0 0;font-size:11px;color:#9b674f}
/* A figure the card does not show yet (敬請期待 / TBA) is set as small as the goal. */
.ufc-drawer .ufc-raise-top b.ufc-raise-soon{font-size:15px;font-weight:650;color:#8b6554}
.ufc-drawer .ufc-register fieldset{border:0;margin:0 0 20px;padding:0;min-width:0}
.ufc-drawer .ufc-register legend{display:flex;align-items:baseline;gap:6px;padding:0;margin-bottom:10px;font-size:14px;font-weight:650;color:#683e30}
.ufc-drawer .ufc-register legend small{font-size:11.5px;font-weight:500;color:#9b674f}
.ufc-drawer .ufc-chips{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.ufc-drawer .ufc-chip{position:relative;display:block;min-width:0}
.ufc-drawer .ufc-chip>input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.ufc-drawer .ufc-chip>span{display:flex;align-items:center;justify-content:center;min-height:44px;padding:8px 10px;border:1px solid #dcb59f;border-radius:10px;background:#fffaf6;color:#683e30;font-size:14px;font-weight:650;font-variant-numeric:tabular-nums;text-align:center;white-space:nowrap}
.ufc-drawer .ufc-chip>input:checked+span{background:#9b5339;border-color:#9b5339;color:#fff}
.ufc-drawer .ufc-chip>input:focus-visible+span{outline:3px solid #b74d7e;outline-offset:2px}
.ufc-drawer .ufc-amount-field{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:12px;margin-top:10px}
.ufc-drawer .ufc-amount-field>span:first-child{font-size:13px;color:#683e30}
.ufc-drawer .ufc-amount-input{display:flex;align-items:center;gap:6px;height:46px;padding:0 12px;border:1px solid #d2aa93;border-radius:10px;background:#fffaf6}
.ufc-drawer .ufc-amount-input:focus-within{outline:3px solid #b74d7e;outline-offset:2px}
.ufc-drawer .ufc-amount-input>i{font-style:normal;font-weight:650;color:#9b674f}
.ufc-drawer .ufc-amount-input>input{flex:1;min-width:0;border:0;outline:0;background:none;font:650 16px/1.3 var(--sans);color:#683e30;font-variant-numeric:tabular-nums}
.ufc-drawer .ufc-amount-hint{margin:8px 0 0;font-size:11.5px;color:#9b674f}
.ufc-drawer .ufc-form-error{margin:6px 0 0;font-size:12px;font-weight:600;color:#b43b59}
.ufc-drawer .ufc-check{display:flex;align-items:center;gap:8px;font-size:13px;color:#683e30}
.ufc-drawer .ufc-check input{width:18px;height:18px;margin:0;accent-color:#9b5339}
.ufc-drawer .ufc-withdraw{display:block;margin:14px auto 0;padding:8px 12px;border:0;background:none;font:inherit;font-size:12.5px;font-weight:600;color:#b43b59;cursor:pointer}
.ufc-drawer .ufc-register-actions{display:grid;grid-template-columns:minmax(88px,auto) minmax(0,1fr);gap:10px}
.ufc-drawer .ufc-register-actions .ufc-button{min-height:50px;font-size:13px}
.ufc-drawer .ufc-register-actions .ufc-button:disabled{opacity:.55;cursor:not-allowed}
.ufc-drawer .ufc-done{display:grid;justify-items:center;gap:8px;padding:28px 8px 8px;text-align:center}
.ufc-drawer .ufc-done-mark{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:#9b5339;color:#fff;font-size:24px;font-weight:700}
.ufc-drawer .ufc-done h3{margin:6px 0 0;font-size:18px;color:#683e30}
.ufc-drawer .ufc-done-title{margin:0;font-size:14px;font-weight:650;color:#683e30}
@media (max-width:389px){.ufc-drawer .ufc-chips{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* 登記參與意向 review fixes: a monogram when there is no poster; hints at AA contrast; a 44px 撤回意向. */
.ufc-drawer .ufc-register-work>.ufc-drawer-monogram{width:56px;height:84px;display:grid;place-items:center;border-radius:9px;background:#e9d2c3;color:#683e30;font-size:22px;font-weight:700}
.ufc-drawer .ufc-amount-hint,.ufc-drawer .ufc-register legend small{color:#9b5339}
.ufc-drawer .ufc-withdraw{min-height:44px;padding:12px 16px}
/* One line per label (both languages, 320–440px): the card heading keeps the stage pill and the platform on one line (below
   196px the platform shows as its logo, right after the pill; its name stays in title/aria-label); genre rows show whole tags on one line, so a
   separator never starts a line and cards in a row keep the same rhythm. */
#app .ufc-card .ufc-heading{flex-wrap:nowrap}
#app .ufc-card .ufc-heading>.ufc-platform{min-width:0}
@container (max-width:195px){#app .ufc-card .ufc-platform>span:last-child{display:none}#app .ufc-card .ufc-heading{justify-content:flex-start;gap:10px}}
#app .ufc-card .ufc-tags,#app .ct-card .ct-tags,#app .hm-project-bottom .hm-project-meta{display:flex;flex-wrap:wrap;align-items:baseline;line-height:18px;max-height:18px;overflow:hidden;gap:0}
#app .ufc-card .ufc-tags>span,#app .ct-card .ct-tags>span,#app .hm-project-meta .hm-genre{flex:0 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;overflow-wrap:normal}
#app .ufc-card .ufc-tags>span+span::before{content:"/";margin:0 .4em}
#app .ct-card .ct-tags>span+span::before{content:"·";margin:0 .45em;color:#af7b98}
#app .hm-project-meta .hm-genre+.hm-genre::before{margin:0 .45em}
/* The chart dialog lists every tag; a separator sits at the end of a line, never at the start. */
#app .ct-detail-hero .ct-tags,.ct-dialog .ct-tags{display:flex;flex-wrap:wrap;gap:0}
.ct-detail-hero .ct-tags>span{white-space:nowrap}
.ct-detail-hero .ct-tags>span:not(:last-child)::after{content:"·";margin:0 .45em}
/* Home cards (both languages): genres on their own line, then a full-width 詳情 button (no half-empty row). */
#app .hm-project-bottom{display:grid;grid-template-columns:minmax(0,1fr);gap:8px}
#app .home-page .hm-project-bottom .hm-project-details{justify-self:stretch;margin-left:0}
/* Narrow English cards: the trailing arrow gives its room to the label. */
@media (max-width:360px){html[lang="en"] #app .ufc-actions .ufc-button>svg{display:none}}
#app .ufc-release-episodes strong{white-space:nowrap}
/* Card buttons: the icon and label are centred as one group (the label no longer stretches across the button). */
#app .ufc-actions .ufc-button{justify-content:center}
#app .ufc-actions .ufc-button>span{flex:0 1 auto;min-width:0;text-align:center}
@media (max-width:360px){html[lang="en"] #app .ufc-actions .ufc-button--watch>span:last-child:not(:first-of-type){display:none}}
/* English raise cards in the Home rail: followers · interested on one line, the deadline under it, on every card alike. */
html[lang="en"] #app .pcard .track.funding+.foot{flex-direction:column;align-items:flex-start;gap:2px}
/* Discover stage chips: label and count always read as one centred group. English labels are too long for one line below
   400px, so there every chip stacks the count under the label (before, the count spilled into a half-width column and sat
   at a different distance in each chip). */
#app .pc-stage-tabs>a{flex-wrap:nowrap;justify-content:center;align-items:center}
#app .pc-stage-tabs>a>span{white-space:nowrap}
html[lang="en"] #app .pc-stage-tabs>a{gap:5px}
@media (max-width:400px){
  html[lang="en"] #app .pc-stage-tabs{grid-auto-rows:48px}
  html[lang="en"] #app .pc-stage-tabs>a{flex-direction:column;gap:1px;padding:4px 2px}
  html[lang="en"] #app .pc-stage-tabs>a>span{display:block;min-height:0;font-size:12px;line-height:16px}
  html[lang="en"] #app .pc-stage-tabs>a>small{line-height:16px}
}
/* Sub-page bar on narrow screens: the Home button drops its arrow so page titles such as "Help & feedback" stay on one line. */
@media (max-width:360px){#app .bar.sub .feature-home .uf-nav-arrow{display:none}#app .bar.sub>h1{white-space:nowrap;min-width:0;overflow:hidden;text-overflow:ellipsis}}
/* The sub-page 首頁 pill ends on the page gutter: bar padding 8px + 12px = 20px (8px + 6px = 14px at 360px and below). */
#app .bar.sub .feature-home{margin-right:12px}
@media (max-width:360px){#app .bar.sub .feature-home{margin-right:6px;padding-inline:9px}}
/* Platform header (Home charts, New): on narrow screens "Watch now" drops its ↗ so the market line ("N. America & global")
   keeps one line beside the platform name. */
@media (max-width:360px){#app .catalog-platform-heading>.catalog-watch{padding-inline:8px}#app .catalog-platform-heading>.catalog-watch i{display:none}}
/* Earnings title cards below 400px: three equal metric columns on one row, 詳情 on its own full-width row under them, so
   "Invested / Earned / This week" never wrap or crowd the button. */
@media (max-width:400px){
  #app .er-work .er-metrics{grid-template-columns:repeat(3,minmax(0,1fr))}
  #app .er-work .er-metrics small{white-space:nowrap}
  #app .er-work .er-metrics>.er-story-button{grid-column:1/-1;justify-self:stretch;min-height:40px}
}
/* New / Home platform header at 360px and below: "Watch now" drops its icon too, so the market line stays on one line. */
@media (max-width:360px){#app .catalog-platform-heading>.catalog-watch img{display:none}}
/* Raise cards on Home and in lists: the goal sits on its own line under the raised amount (no line starting with "/"). */
#app .metric .big>small.goal,#app .dc-metric small.goal{display:block;margin:2px 0 0}
/* English Home raise cards: studio, genres and format get two lines instead of being cut off. */
html[lang="en"] #app .pcard p.byline{white-space:normal;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-height:1.45;min-height:2.9em}
/* Title sheet bottom bar on narrow English screens: the main button keeps "Register interest" on one line. */
@media (max-width:360px){html[lang="en"] .ufc-drawer .ufc-sheet-actions .main>svg,html[lang="en"] .ufc-drawer .ufc-sheet-actions .main>.ufc-action-art{display:none}}
/* Help FAQ: a wrapped question lines up under its own text, not under the ▶ marker. */
#app .feature-page .feature-card details>summary{list-style-position:outside;margin-left:1.1em}
/* Discover platforms: always three per row. On narrow screens the buttons shrink (logo above the name, smaller type)
   instead of dropping to two columns and leaving the last platform alone on its row. */
@media (max-width:350px){
  #app .pc-discovery .pc-platforms{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
  #app .pc-discovery .pc-platforms>a{height:auto;min-height:64px;padding:6px 2px;grid-template-rows:auto auto;gap:2px}
  #app .pc-discovery .pc-platforms .pc-platform-name{flex-direction:column;gap:2px;height:auto}
  #app .pc-discovery .pc-platforms .hm-platform-mark,#app .pc-discovery .pc-platforms img{width:20px;height:20px;flex-basis:20px}
  #app .pc-discovery .pc-platforms b{font-size:11.5px;line-height:15px}
  #app .pc-discovery .pc-platforms .pc-platform-count{font-size:11px;line-height:15px;height:auto}
}
/* A raise past its deadline has one full-width Details button (both buttons used to open the same sheet). */
#app .ufc-actions.ufc-actions--single{grid-template-columns:1fr}
/* Profile → account security on narrow screens: the hint takes the row, the button moves under it on the right. */
@media (max-width:360px){#app .menu>.menu-row{flex-wrap:wrap;row-gap:8px}#app .menu>.menu-row>span{flex:1 1 180px;min-width:0}#app .menu>.menu-row>.btn{margin-left:auto}}
/* 我的 → 賬戶 → 消息中心: unread count (the header bell is gone). */
#app .account-settings>a .account-unread,#app .account-settings>a>.account-unread{flex:none;min-width:20px;height:20px;margin-left:auto;padding:0 6px;box-sizing:border-box;border-radius:10px;background:var(--accent,#171013);color:#fff;font:600 11px/20px var(--sans);text-align:center;font-variant-numeric:tabular-nums}
/* Title sheet bar: the raise's main button matches the 15px buttons beside it (it fell back to the card's 12px). */
.ufc-drawer .ufc-sheet-actions .ufc-button{font-size:15px}
@media (max-width:360px){html[lang="en"] .ufc-drawer .ufc-sheet-actions .ufc-button{font-size:14px}}
/* Review fixes: chart cards keep one rhythm (titles always reserve two lines); long words wrap inside a chart card; the
   raise byline gets two lines in both languages with the format kept whole; Earnings title cards always put the name
   above the platform and stage; the registration facts align at the top; the language picker shows 繁體中文 in full. */
#app .ct-card-title{min-height:2.8em}
#app .ct-card .ct-brief{overflow-wrap:anywhere;hyphens:auto}
#app .pcard p.byline{white-space:normal;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-height:1.45;min-height:2.9em}
#app .pcard p.byline .nw{white-space:nowrap}
#app .er-work-name>strong{flex-basis:100%}
.ufc-drawer .ufc-raise-facts{align-items:start}
.site-header .locale-tools select{width:84px}
/* 平臺目錄 at phone widths: the three buttons stack as one column of equal width (English labels differ in length). */
@media (max-width:480px){#app .catalog-directory .catalog-actions{display:grid;grid-template-columns:max-content}}