/* ============================================================
   common.css
   ?函??梁璅?? - ?遙雿蜓憿€??ａ?梁?蝷極?瑁???   ============================================================ */

/* --- ?梯?皛曉?璇?靽?皛曉?? --- */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* --- 靽?????蝯曹?閮剔鈭桃??--- */
/* ?拍?潭楛?脰??臭???餈唳?摮?敶梁?隤芣??票?摰寧?嚗?*/
.whitespace-pre-line { color: #ffffff; }

/* --- ?梁?內 --- */
.icon-sliders { display: inline-block; width: 22px; height: 22px; background: currentColor; -webkit-mask: url("/skin/img/icons/sliders.svg") center / contain no-repeat; mask: url("/skin/img/icons/sliders.svg") center / contain no-repeat; }

/* --- ?函??頛?恍嚗摨葉憭?favicon --- */
html.app-loading body::before, html.app-loading body::after, html.app-loaded body::before, html.app-loaded body::after { content: ""; position: fixed; z-index: 9999; pointer-events: none; transition: opacity .28s ease, visibility .28s ease; }
html.app-loading body::before, html.app-loaded body::before { inset: 0; background: #050505; }
html.light.app-loading body::before, html.light.app-loaded body::before { background: #ffffff; }
html.dark.app-loading body::before, html.dark.app-loaded body::before { background: #050505; }
html.app-loading body::after, html.app-loaded body::after { left: 50%; top: 50%; width: 216px; height: 216px; background: url("/favicon.png?v=20260730-2") center / contain no-repeat; transform: translate(-50%, -50%); }
html.app-loaded body::before, html.app-loaded body::after { opacity: 0; visibility: hidden; }

/* ============================================================
   ?函??梁霈 (銝餉??冽 Feed ??血?)
   ============================================================ */
:root { --feed-bg: #ffffff; --feed-card: #ffffff; --feed-text: #111111; --feed-muted: #74747c; --feed-line: #ececee; --feed-soft: #f7f7f8; --feed-chip: #f2f2f3; --feed-brand: #ff2f69; --feed-blue: #1d9bf0; --feed-grad-story: linear-gradient(135deg,#756bff 0%,#ff2f69 56%,#ff9a3d 100%); --feed-grad-live: linear-gradient(135deg,#ff2f69 0%,#ff7a3d 100%); }
html.dark { --feed-bg: #09090b; --feed-card: #111116; --feed-text: #f7f7f8; --feed-muted: #a1a1aa; --feed-line: #25252c; --feed-soft: #18181d; --feed-chip: #24242b; }

/* ============================================================
   ?單??刻 (蝯行??∠??刻) - ?函??梁?辣
   ============================================================ */
.hearts-right-col { flex: 0 0 388px; width: 388px; min-height: 100vh; padding: 56px 20px 20px 48px; background: var(--feed-bg); }
.hearts-right-col-stack { position: sticky; top: 56px; display: grid; width: 316px; gap: 16px; }
.hearts-right-col-stack .hearts-right-col-inner { position: static; top: auto; }
.hearts-right-col-inner { position: sticky; top: 56px; width: 316px; min-height: 0; padding: 24px 20px 20px; background: var(--feed-soft); border: 0; border-radius: 18px; box-shadow: none; }
.rec-title { margin-bottom: 16px; color: var(--feed-text); font-size: 20px; font-weight: 800; }
.rec-list { display: block; }
.rec-item { display: flex; gap: 12px; align-items: center; margin-bottom: 16px; padding: 8px 0; }
.rec-avatar { flex: 0 0 auto; width: 52px; height: 52px; overflow: hidden; border-radius: 50%; background: #eee; }
.rec-avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }
.rec-info { min-width: 0; flex: 1; }
.rec-name { overflow: hidden; color: var(--feed-text); font-size: 14px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.rec-handle { overflow: hidden; color: var(--feed-muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.rec-follow-btn { flex: 0 0 auto; min-width: 58px; height: 31px; padding: 0 12px; border: 1px solid #ed3f6a; border-radius: 999px; background: #fff; color: #ed3f6a; font-size: 13px; font-weight: 800; cursor: pointer; white-space: nowrap; }
.rec-item.is-following .rec-follow-btn { background: #ed3f6a; color: #fff; border-color: #ed3f6a; box-shadow: none; }
.rec-info { min-width: 0; color: inherit; text-decoration: none; }
.rec-empty { margin: 0; color: var(--feed-muted); font-size: 13px; }
.rec-see-more { display: inline-flex; margin-top: 4px; color: var(--feed-text); font-size: 14px; font-weight: 700; text-decoration: none; }

.opportunity-card { position: relative; overflow: hidden; padding: 22px 20px; border: 1px solid var(--feed-line); border-radius: 18px; background: var(--feed-card); color: var(--feed-text); }
.opportunity-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 5px; background: linear-gradient(90deg, var(--feed-brand), #ff8a32); }
.opportunity-card-kicker { color: var(--feed-brand); font-size: 11px; font-weight: 900; letter-spacing: .14em; }
.opportunity-card h2 { margin: 8px 0 7px; color: var(--feed-text); font-size: 20px; font-weight: 900; letter-spacing: -.025em; line-height: 1.25; }
.opportunity-card p { margin: 0; color: var(--feed-muted); font-size: 13px; line-height: 1.65; }
.opportunity-card .opportunity-card-intro { margin-bottom: 13px; }
.opportunity-card .opportunity-card-audience-title { margin-bottom: 8px; color: var(--feed-text); font-weight: 850; }
.opportunity-card-audiences { display: grid; gap: 7px; margin: 0 0 14px; padding: 0; list-style: none; }
.opportunity-card-audiences li { position: relative; padding-left: 16px; color: var(--feed-text); font-size: 13px; font-weight: 700; line-height: 1.45; }
.opportunity-card-audiences li::before { content: ""; position: absolute; top: .55em; left: 1px; width: 7px; height: 7px; border-radius: 50%; background: linear-gradient(135deg, var(--feed-brand), #ff8a32); }
.opportunity-card .opportunity-card-invite { margin-bottom: 7px; }
.opportunity-card .opportunity-card-closing { margin-bottom: 16px; color: var(--feed-text); font-weight: 850; }
.opportunity-card-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.opportunity-card-actions a { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; padding: 0 11px; border: 1px solid var(--feed-line); border-radius: 12px; color: var(--feed-text); font-size: 13px; font-weight: 850; text-align: center; text-decoration: none; }
.opportunity-card-actions a:first-child { border-color: transparent; background: linear-gradient(135deg, var(--feed-brand), #ff8a32); color: #fff; }
.opportunity-card-actions a:focus-visible { outline: 3px solid #ffad7a; outline-offset: 2px; }
.opportunity-card.is-mobile { display: none; }

/* 白底模式：右欄共同資訊卡以低飽和螢光綠作為強調，不影響深色模式。 */
html.light .opportunity-card,
html:not(.dark):not(.light) .opportunity-card { border-color: #d8efb5; background: linear-gradient(145deg, #ffffff 0%, #f8ffef 100%); box-shadow: 0 10px 28px rgba(115, 196, 39, .07); }
html.light .opportunity-card::before,
html:not(.dark):not(.light) .opportunity-card::before { background: linear-gradient(90deg, #b8ff2c, #63df38 52%, #c8ff45); }
html.light .opportunity-card-kicker,
html:not(.dark):not(.light) .opportunity-card-kicker { color: #559300; }
html.light .opportunity-card-audiences li::before,
html:not(.dark):not(.light) .opportunity-card-audiences li::before { background: linear-gradient(135deg, #b8ff2c, #62d93d); }
html.light .opportunity-card-actions a,
html:not(.dark):not(.light) .opportunity-card-actions a { border-color: #dbeec3; }
html.light .opportunity-card-actions a:first-child,
html:not(.dark):not(.light) .opportunity-card-actions a:first-child { background: linear-gradient(135deg, #baff2b, #72df3d); color: #183700; }
html.light .opportunity-card-actions a:focus-visible,
html:not(.dark):not(.light) .opportunity-card-actions a:focus-visible { outline-color: #9bea25; }

/* ?踵?撘?甈?*/
@media (max-width: 1024px) { .hearts-right-col { display: none !important; } .opportunity-card.is-mobile { display: block; margin: 12px; } }
@media (max-width: 640px) { .opportunity-card.is-mobile { display: none !important; } .opportunity-card p, .opportunity-card-audiences li { font-size: 15px; } }

@media (min-width: 1280px) {
  .feed-page .opportunity-card.is-mobile.has-visitor-counter { display: block; margin: 12px; padding: 0; overflow: visible; border: 0; border-radius: 0; background: transparent; }
  .feed-page .opportunity-card.is-mobile.has-visitor-counter::before { display: none; }
  .feed-page .opportunity-card.is-mobile.has-visitor-counter > :not(.site-visitor-footer) { display: none; }
  .feed-page .opportunity-card.is-mobile.has-visitor-counter .site-visitor-footer--inside-opportunity { margin: 0; border: 1px solid var(--feed-line); border-radius: 18px; background: var(--feed-card); }
  .feed-page .opportunity-card.is-mobile.has-visitor-counter .site-visitor-footer__inner { padding: 16px; }
}

/* ?內?券?憭芋撘????脰???*/
html.dark .logo-dark-invert { filter: invert(1) brightness(2); }

/* ???蜓??憿蔭銝?*/
@media (max-width: 1023px){ body.feed-page .feed-header { position: sticky; } body.feed-page .feed-title { position: absolute; left: 50%; transform: translateX(-50%); } }

/* 獢??甈蜓憿???銝?*/
@media (min-width: 1024px) { .site-sidebar { display: flex; flex-direction: column; } .site-sidebar > .flex-1 { display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0; } .site-sidebar .sidebar-utility-row { margin-top: auto; flex-shrink: 0; } }

.sidebar-message-link .sidebar-unread-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  margin-left: auto;
  padding: 0 7px;
  border: 2px solid var(--background);
  border-radius: 999px;
  background: #ff9500;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 2px 7px rgba(255, 149, 0, .3);
}

.sidebar-message-link.bg-muted .sidebar-unread-badge {
  border-color: var(--muted);
}
.theme-toggle-icon { display: none; width: 24px; height: 24px; }
.site-sidebar .js-sidebar-member-toggle[aria-expanded="true"] {
  background-color: #fff3c4;
}
html.dark .site-sidebar .js-sidebar-member-toggle[aria-expanded="true"] {
  color: #755000;
  font-weight: 700;
}
html.light .theme-toggle-sun, html:not(.dark):not(.light) .theme-toggle-sun { display: block; }
html.dark .theme-toggle-moon { display: block; }

/* Two desktop advertisement slots above creator recommendations. */
.site-spotlight{display:none;}
@media (min-width:1024px){.site-spotlight{display:grid;gap:10px;width:100%;margin-bottom:16px;}.hearts-right-col-stack .site-spotlight{margin-bottom:0;}.site-spotlight-card{display:block;overflow:hidden;border:1px solid var(--feed-line);border-radius:14px;background:var(--feed-soft);}.site-spotlight-card img{display:block;width:100%;height:auto;aspect-ratio:1672/941;object-fit:cover;}.site-spotlight-card:focus-visible{outline:2px solid var(--feed-brand);outline-offset:3px;}}

/* Pair-based sidebar image carousel. */
.site-spotlight-group{display:grid;gap:10px}.site-spotlight-group[hidden]{display:none}.site-spotlight-controls{display:flex;align-items:center;justify-content:center;gap:8px}.site-spotlight-dot{width:8px;height:8px;padding:0;border:0;border-radius:50%;background:var(--feed-muted);opacity:.35;cursor:pointer}.site-spotlight-dot[aria-pressed="true"]{opacity:1;background:var(--feed-brand)}.site-spotlight-pause{display:inline-flex;align-items:center;justify-content:center;width:28px;height:24px;padding:0;border:0;border-radius:6px;background:transparent;color:var(--feed-muted);cursor:pointer}.site-spotlight-pause svg{width:13px;height:13px}.site-spotlight-pause [data-play],.site-spotlight-pause[aria-pressed="true"] [data-pause]{display:none}.site-spotlight-pause[aria-pressed="true"] [data-play]{display:block}.site-spotlight-controls button:focus-visible{outline:2px solid var(--feed-brand);outline-offset:3px}

/* Native language control: Google assets are loaded only for an opted-in language. */
.site-sidebar .sidebar-utility-row{position:relative;flex-wrap:nowrap;gap:8px}
.site-sidebar .sidebar-utility-row > button,.site-sidebar .sidebar-utility-row > a{flex-shrink:0}
.sidebar-language{display:grid;grid-template-columns:minmax(0,1fr);width:108px;min-width:0;margin-left:auto;align-items:center}
.sidebar-language label{display:none}
.sidebar-language select{width:100%;min-width:0;min-height:36px;padding:5px 7px;border:1px solid #d8dbe3;border-radius:8px;background:#fff;color:#24242a;font:inherit;font-size:13px;cursor:pointer}
.sidebar-language select:focus-visible{outline:2px solid #ff9500;outline-offset:2px}
.sidebar-language-credit{grid-column:2;color:#6b7280;font-size:10px}
.sidebar-language-status{position:absolute;left:4px;right:4px;bottom:100%;padding:4px 0;font-size:11px;line-height:1.5;color:inherit}
.sidebar-language-status:empty{display:none}
.sidebar-language-retry{grid-column:1;justify-self:start;border:0;background:transparent;color:inherit;text-decoration:underline;font-size:12px;cursor:pointer}
.sidebar-language-retry[hidden]{display:none}
html.dark .sidebar-language select{background:#18181d;color:#f5f5f6;border-color:#45454e}
html.dark .sidebar-language-credit{color:#a1a1aa}
#hf-google-translate-engine{position:fixed;left:-10000px;top:0;width:1px;height:1px;overflow:hidden;pointer-events:none}
html.hf-google-translation body{top:0!important}
html.hf-google-translation .goog-te-banner-frame.skiptranslate,html.hf-google-translation iframe.VIpgJd-ZVi9od-ORHb-OEVmcd{display:none!important}
html.hf-google-translation #goog-gt-tt,html.hf-google-translation .goog-te-balloon-frame{display:none!important}