@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Noto+Sans+TC:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

/* 虛擬網紅工作台 元件樣式。顏色、間距、圓角全部取自 tokens.css 的變數。 */

body { margin: 0; font-family: var(--font-sans); font-size: 14px; line-height: 22px; background: var(--bg); color: var(--ink); -webkit-font-smoothing: antialiased; }
.vi-mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.vi-icon { display: block; flex: none; }

/* Button */
.vi-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); height: var(--control-h); padding: 0 var(--space-3); border: 1px solid transparent; border-radius: var(--radius-md); font: inherit; font-size: 13px; line-height: 20px; font-weight: 500; white-space: nowrap; cursor: pointer; box-sizing: border-box; transition: background-color .12s, border-color .12s, color .12s; }
.vi-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.vi-btn:disabled { opacity: .45; cursor: not-allowed; }
.vi-btn--sm { height: var(--control-h-sm); padding: 0 10px; gap: 6px; font-size: 12px; }
.vi-btn--lg { height: 40px; padding: 0 var(--space-4); font-size: 14px; }
.vi-btn--icon { width: var(--control-h); padding: 0; }
.vi-btn--sm.vi-btn--icon { width: var(--control-h-sm); }
.vi-btn--lg.vi-btn--icon { width: 40px; }
.vi-btn--block { flex: 1 1 0; min-width: 0; }
.vi-btn--primary { background: var(--primary); color: var(--on-primary); }
.vi-btn--primary:hover { background: var(--primary-hover); }
.vi-btn--secondary { background: var(--surface); color: var(--ink); border-color: var(--line-strong); }
.vi-btn--secondary:hover { background: var(--surface-hover); }
.vi-btn--ghost { background: transparent; color: var(--ink-muted); }
.vi-btn--ghost:hover { background: var(--surface-hover); color: var(--ink); }
.vi-btn--table { background: var(--lighttable-tile); color: var(--lighttable-ink); border-color: var(--lighttable-line); }
.vi-btn--table:hover { border-color: var(--lighttable-ink-muted); }
.vi-btn--table-primary { background: var(--lighttable-select); color: var(--lighttable-on-select); }
.vi-btn--table:focus-visible, .vi-btn--table-primary:focus-visible { outline-color: var(--lighttable-select); }
@media (pointer: coarse) {
  .vi-btn, .vi-btn--sm { height: 40px; }
  .vi-btn--icon, .vi-btn--sm.vi-btn--icon { width: 40px; }
}

/* Segmented：選中格＝深色實心，與選中的篩選一致 */
.vi-seg { display: inline-flex; gap: 2px; padding: 2px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); box-sizing: border-box; }
.vi-seg--block { display: flex; }
.vi-seg--block .vi-seg__opt { flex: 1 1 0; }
.vi-seg__opt { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 26px; padding: 0 10px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--ink-muted); font: inherit; font-size: 13px; line-height: 20px; font-weight: 500; cursor: pointer; }
.vi-seg--sm .vi-seg__opt { height: 22px; padding: 0 8px; font-size: 12px; }
.vi-seg__opt:hover { color: var(--ink); }
.vi-seg__opt[aria-pressed="true"] { background: var(--primary); color: var(--on-primary); }
.vi-seg__opt:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }

/* TextField */
.vi-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.vi-field__label { display: flex; justify-content: space-between; gap: var(--space-2); font-size: 12px; line-height: 18px; font-weight: 500; color: var(--ink-muted); }
.vi-field__label .vi-mono { font-weight: 400; color: var(--ink-subtle); }
.vi-field__control { display: flex; align-items: center; gap: var(--space-2); min-height: var(--control-h); padding: 0 var(--space-3); border: 1px solid var(--line-strong); border-radius: var(--radius-md); background: var(--surface); color: var(--ink-subtle); box-sizing: border-box; }
.vi-field__control--multi { align-items: flex-start; padding-top: 2px; padding-bottom: 2px; }
.vi-field__control:focus-within { border-color: var(--focus); box-shadow: 0 0 0 1px var(--focus); }
.vi-field input, .vi-field textarea { flex: 1; min-width: 0; padding: 4px 0; border: 0; outline: 0; background: transparent; color: var(--ink); font: inherit; font-size: 14px; line-height: 22px; resize: vertical; }
.vi-field textarea { padding: 6px 0; }
.vi-field input::placeholder, .vi-field textarea::placeholder { color: var(--ink-subtle); opacity: 1; }
.vi-field__suffix { font-size: 12px; color: var(--ink-subtle); }
.vi-field__help { font-size: 12px; line-height: 18px; color: var(--ink-subtle); }
.vi-field--table .vi-field__control { background: var(--lighttable-tile); border-color: var(--lighttable-line); color: var(--lighttable-ink-muted); }
.vi-field--table .vi-field__control:focus-within { border-color: var(--lighttable-select); box-shadow: 0 0 0 1px var(--lighttable-select); }
.vi-field--table input, .vi-field--table textarea { color: var(--lighttable-ink); }
.vi-field--table input::placeholder { color: var(--lighttable-ink-muted); }
@media (pointer: coarse) { .vi-field__control { min-height: var(--touch-min); } }

/* StatusPill：顏色依「輪到誰」，形狀另外區分（空心環／實心點／時鐘／勾／警示） */
.vi-pill { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; height: 22px; padding: 0 8px; border-radius: var(--radius-full); background: var(--status-neutral-soft); color: var(--status-neutral); font-size: 12px; line-height: 16px; font-weight: 500; white-space: nowrap; box-sizing: border-box; overflow: hidden; }
.vi-pill--block { display: flex; }
.vi-pill__dot { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--status-neutral-dot); }
.vi-pill__dot--ring { width: 7px; height: 7px; background: transparent; box-shadow: inset 0 0 0 1.5px var(--status-neutral-dot); }
.vi-pill__mark { flex: none; }
.vi-pill__label { flex: none; }
.vi-pill__detail { font-family: var(--font-mono); font-weight: 400; font-variant-numeric: tabular-nums; }
.vi-pill__reason { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-weight: 400; }
.vi-pill--amber { background: var(--status-amber-soft); color: var(--status-amber); }
.vi-pill--amber .vi-pill__dot { background: var(--status-amber-dot); }
.vi-pill--green { background: var(--status-green-soft); color: var(--status-green); }
.vi-pill--green .vi-pill__mark { color: var(--status-green-dot); }
.vi-pill--red { background: var(--status-red-soft); color: var(--status-red); }
.vi-pill--red .vi-pill__mark { color: var(--status-red-dot); }

/* Sidebar */
.vi-side { display: flex; flex-direction: column; width: var(--sidebar-w); flex: none; min-height: 100%; background: var(--surface); border-right: 1px solid var(--line); box-sizing: border-box; }
.vi-side__brand { display: flex; align-items: center; height: 56px; padding: 0 var(--space-4); border-bottom: 1px solid var(--line); font-size: 14px; line-height: 20px; font-weight: 600; letter-spacing: .02em; }
.vi-side__nav { flex: 1; display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-3) var(--space-2); overflow: auto; }
.vi-side__group { display: flex; flex-direction: column; gap: 2px; }
.vi-side__group-label { padding: 0 var(--space-2) 2px; font-size: 12px; line-height: 18px; color: var(--ink-subtle); }
.vi-nav { display: flex; align-items: center; gap: 10px; height: var(--control-h); padding: 0 var(--space-2); border-radius: var(--radius-md); color: var(--ink-muted); text-decoration: none; font-size: 13px; line-height: 20px; font-weight: 500; }
.vi-nav:hover { background: var(--surface-hover); color: var(--ink); }
.vi-nav[aria-current="page"] { background: var(--surface-hover); color: var(--ink); font-weight: 600; }
.vi-nav:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.vi-nav__count { margin-left: auto; font-family: var(--font-mono); font-size: 12px; font-weight: 400; color: var(--ink-subtle); }
.vi-side__foot { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-3) var(--space-4) var(--space-4); border-top: 1px solid var(--line); }
.vi-queue { display: flex; flex-direction: column; gap: 2px; font-size: 12px; line-height: 18px; color: var(--ink-muted); }
.vi-queue__title { color: var(--ink-subtle); }
.vi-queue__nums { display: flex; gap: 4px; }
.vi-queue__nums b { font-weight: 500; color: var(--ink); }
.vi-queue__sep { color: var(--ink-subtle); }
.vi-side__user { display: flex; align-items: center; gap: 10px; min-width: 0; }
.vi-side__who { min-width: 0; }
.vi-side__name { font-size: 13px; line-height: 18px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vi-side__role { font-size: 12px; line-height: 16px; color: var(--ink-subtle); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* TabBar（手機） */
.vi-tabbar { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); height: var(--tabbar-h); padding-bottom: env(safe-area-inset-bottom, 0px); background: var(--surface); border-top: 1px solid var(--line); }
.vi-tab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: var(--touch-min); color: var(--ink-subtle); text-decoration: none; font-size: 11px; line-height: 14px; font-weight: 500; }
.vi-tab[aria-current="page"] { color: var(--ink); font-weight: 600; }
.vi-tab:focus-visible { outline: 2px solid var(--focus); outline-offset: -4px; border-radius: var(--radius-md); }

/* FilterGroup */
.vi-filters { display: flex; flex-direction: column; gap: 2px; }
.vi-filters__title { padding: 0 10px 4px; font-size: 12px; line-height: 18px; color: var(--ink-subtle); }
.vi-filter { display: flex; align-items: center; gap: var(--space-2); width: 100%; height: 30px; padding: 0 10px; border: 0; border-radius: var(--radius-md); background: transparent; color: var(--ink-muted); font: inherit; font-size: 13px; line-height: 20px; font-weight: 500; text-align: left; cursor: pointer; box-sizing: border-box; }
.vi-filter:hover { background: var(--surface-hover); color: var(--ink); }
.vi-filter[aria-pressed="true"] { background: var(--primary); color: var(--on-primary); }
.vi-filter:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.vi-filter__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vi-filter__count { margin-left: auto; font-family: var(--font-mono); font-size: 12px; font-weight: 400; color: var(--ink-subtle); }
.vi-filter[aria-pressed="true"] .vi-filter__count { color: var(--on-primary); }
.vi-filter__dot { flex: none; width: 6px; height: 6px; border-radius: 50%; }
.vi-filter__dot--neutral { width: 7px; height: 7px; box-shadow: inset 0 0 0 1.5px var(--status-neutral-dot); }
.vi-filter__dot--amber { background: var(--status-amber-dot); }
.vi-filter__dot--green { background: var(--status-green-dot); }
.vi-filter__dot--red { background: var(--status-red-dot); }
@media (pointer: coarse) { .vi-filter { height: var(--touch-min); } }

/* Avatar */
.vi-avatar { display: inline-grid; place-items: center; flex: none; border-radius: 50%; object-fit: cover; background: var(--surface-hover); color: var(--ink-muted); font-weight: 600; line-height: 1; box-sizing: border-box; }
.vi-avatar--ring { box-shadow: 0 0 0 2px var(--surface); }

/* PostCard（月曆貼文卡） */
.vi-post { display: flex; flex-direction: column; min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); color: inherit; text-decoration: none; transition: border-color .12s; }
.vi-post:hover { border-color: var(--line-strong); }
.vi-post:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.vi-post__thumb { position: relative; aspect-ratio: 4 / 5; background: var(--surface-hover); }
.vi-post__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.vi-post__placeholder { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: var(--ink-subtle); font-size: 12px; }
.vi-post__avatar { position: absolute; left: 6px; bottom: 6px; }
.vi-post__body { display: flex; flex-direction: column; gap: 6px; padding: var(--space-2); min-width: 0; }
.vi-post__meta { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 12px; line-height: 16px; color: var(--ink-muted); }
.vi-post__time { font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--ink); }
.vi-post__type { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vi-post__title { font-size: 14px; line-height: 20px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vi-post__status { display: flex; align-items: center; gap: 6px; min-width: 0; flex-wrap: wrap; }
.vi-post__reason { flex: 1 0 100%; font-size: 12px; line-height: 18px; color: var(--status-red); }
.vi-post--row { flex-direction: row; align-items: stretch; }
.vi-post--row .vi-post__thumb { width: 64px; flex: none; aspect-ratio: 3 / 4; }
.vi-post--row .vi-post__body { flex: 1; justify-content: center; padding: var(--space-2) var(--space-3); }

/* LightTable（看片台）：固定中性灰，不隨主題 */
.vi-lt { container-type: inline-size; display: flex; flex-direction: column; gap: var(--space-5); padding: var(--space-4) var(--space-5) var(--space-5); border-radius: var(--radius-lg); background: var(--lighttable); color: var(--lighttable-ink); }
.vi-lt--compact { padding: var(--space-4); gap: var(--space-4); }
.vi-lt__hint { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 12px; line-height: 18px; color: var(--lighttable-ink-muted); }
.vi-slot { display: flex; flex-direction: column; gap: var(--space-3); padding-top: var(--space-5); border-top: 1px solid var(--lighttable-line); }
.vi-lt > .vi-slot:first-child, .vi-lt > :first-child > .vi-slot { padding-top: 0; border-top: 0; }
.vi-slot__head { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.vi-slot__code { display: inline-flex; align-items: center; height: 20px; padding: 0 6px; border: 1px solid var(--lighttable-line); border-radius: 4px; font-family: var(--font-mono); font-size: 12px; color: var(--lighttable-ink-muted); }
.vi-slot__label { font-size: 14px; line-height: 22px; font-weight: 600; }
.vi-slot__meta { margin-left: auto; font-size: 12px; line-height: 18px; color: var(--lighttable-ink-muted); }
.vi-slot__note { margin: -4px 0 0; font-size: 12px; line-height: 18px; color: var(--lighttable-ink-muted); }
.vi-slot__reroll { display: flex; align-items: center; gap: var(--space-2); }
.vi-round { display: flex; flex-direction: column; gap: var(--space-2); }
.vi-round__label { display: flex; gap: 6px; font-size: 12px; line-height: 18px; color: var(--lighttable-ink-muted); }
.vi-round__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); }
@container (max-width: 520px) {
  .vi-round__grid { display: flex; gap: var(--space-3); margin: -4px calc(-1 * var(--space-4)) 0; padding: 4px var(--space-4) 4px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 var(--space-4); scrollbar-width: none; }
  .vi-round__grid > * { flex: 0 0 62%; scroll-snap-align: start; }
  .vi-slot__reroll { flex-direction: column; align-items: stretch; }
}

/* Candidate（候選格） */
.vi-cand { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; margin: 0; }
.vi-cand__frame { position: relative; aspect-ratio: 3 / 4; overflow: hidden; border-radius: var(--radius-md); background: var(--lighttable-tile); }
.vi-cand__frame img { display: block; width: 100%; height: 100%; object-fit: cover; }
.vi-cand--selected .vi-cand__frame { box-shadow: 0 0 0 2px var(--lighttable), 0 0 0 4px var(--lighttable-select); }
.vi-cand--removed .vi-cand__frame img { opacity: .25; }
.vi-cand__state { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: var(--space-2); text-align: center; font-size: 12px; line-height: 18px; color: var(--lighttable-ink-muted); }
.vi-cand__state strong { font-size: 13px; font-weight: 500; color: var(--lighttable-ink); }
.vi-cand__order { position: absolute; top: 8px; left: 8px; min-width: 24px; height: 24px; padding: 0 7px; border-radius: 12px; background: var(--lighttable-select); color: var(--lighttable-on-select); font-family: var(--font-mono); font-size: 12px; line-height: 24px; font-weight: 500; text-align: center; box-sizing: border-box; }
.vi-cand__zoom { position: absolute; top: 6px; right: 6px; background: var(--lighttable); border-color: transparent; }
.vi-cand__actions { display: flex; gap: 6px; min-height: var(--control-h-sm); }
.vi-cand--enter { animation: vi-fade .24s ease-out both; }
@keyframes vi-fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .vi-cand--enter { animation: none; } .vi-btn, .vi-post { transition: none; } }

/* OrderStrip（已選排序＝輪播順序） */
.vi-order { display: flex; flex-direction: column; gap: var(--space-2); }
.vi-order__head { display: flex; justify-content: space-between; font-size: 12px; line-height: 18px; color: var(--ink-muted); }
.vi-order__list { display: flex; gap: var(--space-2); margin: 0; padding: 0; list-style: none; overflow-x: auto; }
.vi-order__item { position: relative; display: flex; flex-direction: column; gap: 4px; width: 56px; flex: none; cursor: grab; }
.vi-order__thumb { display: block; aspect-ratio: 3 / 4; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.vi-order__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.vi-order__num { position: absolute; top: 4px; left: 4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--primary); color: var(--on-primary); font-family: var(--font-mono); font-size: 11px; line-height: 18px; text-align: center; box-sizing: border-box; }
.vi-order__code { display: flex; align-items: center; justify-content: center; gap: 2px; font-size: 11px; line-height: 14px; color: var(--ink-subtle); }

/* IgPreview（仿 Buffer 的 IG 預覽） */
.vi-ig { width: 100%; max-width: 360px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); box-sizing: border-box; }
.vi-ig__head { display: flex; align-items: center; gap: 10px; padding: 10px 12px; }
.vi-ig__account { flex: 1; min-width: 0; font-size: 13px; line-height: 18px; font-weight: 600; }
.vi-ig__more { color: var(--ink-muted); }
.vi-ig__media { position: relative; aspect-ratio: 3 / 4; background: var(--lighttable); }
.vi-ig__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.vi-ig__count { position: absolute; top: 10px; right: 10px; height: 22px; padding: 0 8px; border-radius: var(--radius-full); background: var(--lighttable); color: var(--lighttable-ink); font-size: 12px; line-height: 22px; }
.vi-ig__bar { display: flex; align-items: center; gap: 14px; padding: 10px 12px 4px; color: var(--ink); }
.vi-ig__dots { flex: 1; display: flex; justify-content: center; gap: 4px; margin-right: 58px; }
.vi-ig__dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--line-strong); }
.vi-ig__dots i.is-on { background: var(--ink); }
.vi-ig__caption { margin: 0; padding: 4px 12px 8px; font-size: 13px; line-height: 20px; white-space: pre-line; overflow-wrap: anywhere; }
.vi-ig__caption b { font-weight: 600; }
.vi-ig__time { margin: 0; padding: 0 12px 12px; font-size: 12px; line-height: 16px; color: var(--ink-subtle); }