/* a.css — A 版（虛擬網紅工作台設計系統）。每條規則都在 .skin-a 底下，class 一律 a- 前綴。
   顏色、間距、圓角一律用 tokens.css 的變數；看片台用 --lighttable* 那組。 */

.skin-a {
  min-height: 100dvh;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 22px;
  -webkit-tap-highlight-color: transparent;
}
.skin-a h1, .skin-a h2, .skin-a h3, .skin-a p, .skin-a ul, .skin-a ol, .skin-a dl, .skin-a dd, .skin-a figure { margin: 0; padding: 0; }
.skin-a ul, .skin-a ol { list-style: none; }
.skin-a button { cursor: pointer; }
.skin-a button:disabled { cursor: default; }
.skin-a :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.skin-a .a-subtle { color: var(--ink-subtle); }
.skin-a .a-muted { color: var(--ink-muted); }
.skin-a .a-lt-ink { color: var(--lighttable-ink); }
.skin-a .a-lt-muted { color: var(--lighttable-ink-muted); }
.skin-a .a-pre { white-space: pre-wrap; overflow-wrap: anywhere; }
.skin-a .a-h1 { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.skin-a .a-req { color: var(--status-amber); font-weight: 500; }

/* ---------- 外殼：手機單欄，電腦三欄 ---------- */

.skin-a .a-shell { display: flex; flex-direction: column; min-height: 100dvh; }
.skin-a .a-col { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.skin-a .a-main { flex: 1; min-width: 0; padding: 0 var(--space-4) var(--space-6); display: flex; flex-direction: column; gap: var(--space-4); }
.skin-a .a-side, .skin-a .a-filters, .skin-a .a-show-d, .skin-a .a-hide-m { display: none; }

.skin-a .a-topbar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: 48px; padding: var(--space-2) var(--space-4) 0; padding-top: max(var(--space-2), env(safe-area-inset-top, 0px)); }

.skin-a .a-tabbar {
  position: sticky; bottom: 0; z-index: 30; margin-top: auto; flex: none;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  height: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px)); padding-bottom: env(safe-area-inset-bottom, 0px);
  background: var(--surface); border-top: 1px solid var(--line);
}
.skin-a .a-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; }
.skin-a .a-tab[aria-current="page"] { color: var(--ink); }
.skin-a .a-tab[aria-current="page"] .meta { font-weight: 600; }
.skin-a .a-tab:focus-visible { outline-offset: -4px; border-radius: var(--radius-md); }

@media (min-width: 900px) {
  .skin-a .a-shell { flex-direction: row; align-items: stretch; }
  .skin-a .a-side { display: flex; }
  .skin-a .a-filters { display: flex; }
  .skin-a .a-show-d { display: block; }
  .skin-a .a-hide-m { display: inline-flex; }
  .skin-a .a-show-m, .skin-a .a-topbar, .skin-a .a-chips, .skin-a .a-tabbar { display: none; }
  .skin-a .a-main { padding: var(--space-6); gap: var(--space-4); }
}
@media (min-width: 900px) and (max-width: 1199px) {
  .skin-a .a-nofilter .a-filters { display: none; }
}

/* 側欄 */
.skin-a .a-side {
  flex: 0 0 var(--sidebar-w); width: var(--sidebar-w); position: sticky; top: 0; height: 100dvh;
  flex-direction: column; gap: var(--space-4); padding: var(--space-4) var(--space-3);
  background: var(--surface); border-right: 1px solid var(--line); overflow: auto;
}
.skin-a .a-side__brand { padding: var(--space-1) var(--space-2); }
.skin-a .a-side__nav { display: flex; flex-direction: column; gap: var(--space-4); }
.skin-a .a-side__group { display: flex; flex-direction: column; gap: 2px; }
.skin-a .a-side__label { padding: var(--space-1) var(--space-2); }
.skin-a .a-side__foot { margin-top: auto; display: flex; flex-direction: column; gap: var(--space-3); }
.skin-a .a-machine {
  display: flex; flex-direction: column; gap: 6px; padding: var(--space-3);
  background: var(--surface-muted); border: 1px solid var(--line); border-radius: var(--radius-md);
  color: inherit; text-decoration: none;
}
.skin-a a.a-machine:hover { border-color: var(--line-strong); }
.skin-a .a-machine__t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.skin-a .a-skin { display: flex; align-items: center; gap: var(--space-2); }
.skin-a .a-side .a-skin { flex-direction: column; align-items: stretch; gap: 6px; }

/* 篩選欄 */
.skin-a .a-filters {
  flex: 0 0 var(--filter-w); width: var(--filter-w); position: sticky; top: 0; height: 100dvh;
  flex-direction: column; gap: var(--space-5); padding: var(--space-6) var(--space-3);
  border-right: 1px solid var(--line); overflow: auto;
}
.skin-a .a-filters__gap { padding-top: var(--space-4); border-top: 1px solid var(--line); }
.skin-a .a-filters__note { padding: 0 10px; }

/* 手機的線切換：可橫滑的膠囊 */
.skin-a .a-chips {
  display: flex; align-items: center; gap: var(--space-1); overflow-x: auto; scrollbar-width: none;
  padding: 0 var(--space-4); margin-bottom: var(--space-1);
}
.skin-a .a-chips::-webkit-scrollbar { display: none; }
.skin-a .a-chip { flex: none; height: var(--touch-min); padding: 0 2px; border: 0; background: transparent; color: inherit; font: inherit; }
.skin-a .a-chip__in {
  display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 var(--space-3);
  border: 1px solid var(--line-strong); border-radius: var(--radius-full);
  background: var(--surface); color: var(--ink-muted); font-size: 13px; line-height: 20px; font-weight: 500; white-space: nowrap;
}
.skin-a .a-chip[aria-pressed="true"] .a-chip__in { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.skin-a .a-chip__n { color: var(--ink-subtle); }
.skin-a .a-chip[aria-pressed="true"] .a-chip__n { color: var(--on-primary); }
.skin-a .a-chips__sep { flex: none; width: 1px; height: 20px; margin: 0 var(--space-2); background: var(--line-strong); }

/* ---------- 共用：頁首、卡片、狀態 ---------- */

.skin-a .a-pagehead { padding: var(--space-4) 0 var(--space-1); }
.skin-a .a-pagehead__row { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--space-2) var(--space-3); }
.skin-a .a-pagehead__right { margin-left: auto; display: flex; align-items: center; gap: var(--space-3); }
.skin-a .a-pagehead__sum { text-align: right; }
.skin-a .a-btnlink { display: inline-flex; color: inherit; text-decoration: none; }
.skin-a .a-btnlink .vi-btn { pointer-events: none; }
.skin-a .a-show-m .a-btnlink { display: flex; }

.skin-a .a-state {
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2);
  padding: var(--space-4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
}
.skin-a .a-state--error { border-color: var(--status-red-dot); }
.skin-a .a-state--empty { align-items: flex-start; }
.skin-a .a-banner {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding: var(--space-1) var(--space-3); background: var(--status-red-soft); color: var(--status-red); border-radius: var(--radius-md);
}
.skin-a .a-inline-error { color: var(--status-red); }

.skin-a .a-group { display: flex; flex-direction: column; gap: var(--space-2); }
.skin-a .a-group + .a-group { margin-top: var(--space-3); }
.skin-a .a-group__title { display: flex; align-items: baseline; gap: var(--space-2); }

.skin-a .a-card {
  display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; padding: var(--space-3);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
  color: inherit; text-decoration: none; min-height: var(--touch-min);
}
.skin-a .a-card:hover { border-color: var(--line-strong); }
.skin-a .a-card.is-selected { border-color: var(--ink); }
.skin-a .a-card__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); min-width: 0; }
.skin-a .a-card__line { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-muted); }
.skin-a .a-card__title { overflow-wrap: anywhere; }
.skin-a .a-card__lead { color: var(--ink-muted); }
.skin-a .a-card__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.skin-a .a-open { display: inline-flex; align-items: center; gap: 4px; color: var(--ink); text-decoration: none; }

.skin-a .a-thumbs {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-2);
  padding: var(--space-2); background: var(--lighttable); border-radius: var(--radius-md);
}
.skin-a .a-thumbs--1 { grid-template-columns: minmax(0, 96px); }
.skin-a .a-thumbs--2 { grid-template-columns: repeat(2, minmax(0, 96px)); }
.skin-a .a-thumbs--3 { grid-template-columns: repeat(3, minmax(0, 96px)); }
.skin-a .a-thumbs img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: contain; background: var(--lighttable-tile); border-radius: var(--radius-sm); }

.skin-a .a-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-3); }
.skin-a .a-grid--recipes { grid-template-columns: 1fr; }
@media (min-width: 640px) { .skin-a .a-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) {
  .skin-a .a-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
  .skin-a .a-grid--recipes { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
}

.skin-a .a-card-plain {
  display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); min-width: 0;
}

/* 今天：電腦版左清單、右作品 */
.skin-a .a-list { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
@media (min-width: 900px) {
  .skin-a .a-today { display: grid; grid-template-columns: minmax(260px, 340px) minmax(0, 1fr); gap: var(--space-4); align-items: start; }
  .skin-a .a-today .a-list { position: sticky; top: var(--space-6); max-height: calc(100dvh - 2 * var(--space-6)); overflow: auto; padding-right: 2px; }
}
.skin-a .a-works { display: flex; flex-direction: column; gap: var(--space-2); }

/* ---------- 一支作品 ---------- */

.skin-a .a-workview { min-width: 0; }
.skin-a .a-work { display: flex; align-items: flex-start; gap: var(--space-4); }
.skin-a .a-work__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-4); }

.skin-a .a-workhead {
  display: flex; align-items: center; gap: var(--space-2);
  margin: 0 calc(-1 * var(--space-4)); padding: var(--space-2) var(--space-3) var(--space-2) var(--space-1);
  padding-top: max(var(--space-2), env(safe-area-inset-top, 0px));
  background: var(--surface); border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 20;
}
.skin-a .a-workhead--plain { position: static; }
.skin-a .a-workhead__t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.skin-a .a-back {
  flex: none; width: var(--touch-min); height: var(--touch-min); display: flex; align-items: center; justify-content: center;
  color: var(--ink); text-decoration: none; border-radius: var(--radius-md);
}
.skin-a .a-back:hover { background: var(--surface-hover); }
.skin-a .a-workhead__open { margin-left: var(--space-2); }
@media (min-width: 900px) {
  .skin-a .a-workhead { margin: 0; padding: 0; background: transparent; border-bottom: 0; position: static; }
  .skin-a .a-workhead .a-back { margin-left: calc(-1 * var(--space-2)); }
}
.skin-a .a-workview.is-embedded .a-workhead { margin: 0; padding: 0; background: transparent; border-bottom: 0; position: static; }

.skin-a .a-steps { display: flex; gap: var(--space-2); overflow-x: auto; scrollbar-width: none; padding: var(--space-1) 0; }
.skin-a .a-steps::-webkit-scrollbar { display: none; }
.skin-a .a-step-li { flex: 1 0 auto; }
.skin-a .a-step {
  display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; min-height: var(--touch-min); padding: 0 var(--space-3);
  border: 1px solid var(--line-strong); border-radius: var(--radius-md); background: var(--surface); color: var(--ink-muted); white-space: nowrap;
}
.skin-a .a-step__mark { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--ink-subtle); color: var(--ink-subtle); }
.skin-a .a-step.is-done { background: var(--surface-hover); border-color: var(--line); }
.skin-a .a-step.is-done .a-step__mark { background: var(--ink-muted); border-color: var(--ink-muted); color: var(--surface); }
.skin-a .a-step.is-cur { color: var(--ink); }
.skin-a .a-step.is-cur .a-step__mark { background: var(--ink); border-color: var(--ink); color: var(--surface); }
.skin-a .a-step.is-todo { color: var(--ink-subtle); border-style: dashed; }
.skin-a .a-step.is-view { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.skin-a .a-step.is-view .a-step__mark { border-color: var(--on-primary); color: var(--on-primary); background: transparent; }
.skin-a .a-step:disabled { opacity: 1; }
@media (min-width: 900px) { .skin-a .a-step { min-height: var(--control-h); } }

.skin-a .a-machinebox { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); background: var(--status-neutral-soft); color: var(--status-neutral); border-radius: var(--radius-lg); }
.skin-a .a-note { padding: var(--space-2) var(--space-3); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); color: var(--ink-muted); }
.skin-a .a-textbtn { min-height: 32px; padding: 0 var(--space-1); border: 0; background: transparent; color: var(--ink); font: inherit; font-size: 13px; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
@media (pointer: coarse) { .skin-a .a-textbtn { min-height: var(--touch-min); padding: 0 var(--space-2); } }

.skin-a .a-dl { display: flex; flex-direction: column; gap: var(--space-3); }
.skin-a .a-dl__row { display: flex; flex-direction: column; gap: 2px; }
.skin-a .a-dl__row dd { min-width: 0; }
.skin-a .a-map { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius-md); }
.skin-a .a-map li { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--line); min-width: 0; flex-wrap: wrap; }
.skin-a .a-map li:last-child { border-bottom: 0; }
.skin-a .a-map__arrow { display: inline-flex; color: var(--ink-subtle); flex: none; }

/* 圖片關 */
.skin-a .a-imgs { display: flex; flex-direction: column; gap: var(--space-2); }
.skin-a .a-imgs__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.skin-a .a-cand-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
@container (min-width: 560px) { .skin-a .a-cand-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.skin-a .a-cell .vi-cand__frame { aspect-ratio: 4 / 5; cursor: zoom-in; }
.skin-a .a-cell .vi-cand__frame img { object-fit: contain; }
.skin-a .a-cell__cap { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); min-width: 0; }
.skin-a .a-cell__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; line-height: 20px; color: var(--lighttable-ink); }
.skin-a .a-cell__src {
  flex: none; min-height: 32px; padding: 0 var(--space-1); border: 0; background: transparent;
  color: var(--lighttable-ink); font: inherit; font-size: 12px; text-decoration: underline; text-underline-offset: 3px;
}
.skin-a .a-cell__src:focus-visible, .skin-a .a-lightbox :focus-visible { outline-color: var(--lighttable-select); }
@media (pointer: coarse) { .skin-a .a-cell__src { min-height: var(--touch-min); padding: 0 var(--space-2); } }
.skin-a .a-cell .vi-cand__actions { min-height: 0; }

.skin-a .a-lightbox {
  position: fixed; inset: 0; z-index: 100; display: flex; flex-direction: column; gap: var(--space-2);
  padding: max(var(--space-3), env(safe-area-inset-top, 0px)) var(--space-3) max(var(--space-3), env(safe-area-inset-bottom, 0px));
  background: var(--lighttable); color: var(--lighttable-ink);
}
.skin-a .a-lightbox__bar { display: flex; align-items: center; gap: var(--space-2); }
.skin-a .a-lightbox__t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.skin-a .a-lightbox__x, .skin-a .a-lightbox__nav {
  flex: none; display: inline-flex; align-items: center; justify-content: center; width: var(--touch-min); height: var(--touch-min);
  border: 1px solid var(--lighttable-line); border-radius: var(--radius-md); background: var(--lighttable-tile); color: var(--lighttable-ink);
}
.skin-a .a-lightbox__stage { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; gap: var(--space-2); }
.skin-a .a-lightbox__stage img { flex: 1; min-width: 0; max-width: 100%; max-height: 100%; width: 0; height: 100%; object-fit: contain; }
.skin-a .a-lightbox__hint { display: flex; align-items: center; justify-content: center; gap: 6px; color: var(--lighttable-ink-muted); text-align: center; }

/* 影片關 */
.skin-a .a-video { display: flex; flex-direction: column; gap: var(--space-3); }
.skin-a .a-videoitem { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.skin-a .a-vtabs { display: flex; gap: var(--space-2); overflow-x: auto; }
.skin-a .a-vtab { flex: none; min-height: var(--touch-min); padding: 0 var(--space-3); border: 1px solid var(--line-strong); border-radius: var(--radius-md); background: var(--surface); color: var(--ink-muted); font: inherit; font-size: 13px; font-weight: 500; }
.skin-a .a-vtab[aria-pressed="true"] { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.skin-a .a-player { display: flex; justify-content: center; }
.skin-a .a-player__v { display: block; width: 100%; max-height: 70vh; background: var(--lighttable-tile); border-radius: var(--radius-sm); }
.skin-a .a-vtime { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--space-2); }
.skin-a .a-vtime__v { margin-left: auto; }
.skin-a .a-shots { display: flex; gap: 2px; }
.skin-a .a-shot {
  flex: 1 1 0; min-width: 0; height: 36px; padding: 0; border: 1px solid var(--lighttable-line); border-radius: var(--radius-sm);
  background: var(--lighttable-tile); color: var(--lighttable-ink-muted);
}
.skin-a .a-shot.is-on { background: var(--lighttable-select); border-color: var(--lighttable-select); color: var(--lighttable-on-select); }
.skin-a .a-shot:focus-visible { outline-color: var(--lighttable-select); }
@media (pointer: coarse) { .skin-a .a-shot { height: var(--touch-min); } }
.skin-a .a-shotinfo { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); min-height: 20px; }

.skin-a .a-subs { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3) var(--space-4) var(--space-2); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.skin-a .a-subs__head { display: flex; align-items: baseline; justify-content: space-between; }
.skin-a .a-sub { display: flex; align-items: stretch; gap: var(--space-2); border-top: 1px solid var(--line); border-radius: var(--radius-md); }
.skin-a .a-sub:first-child { border-top: 0; }
.skin-a .a-sub.is-on { background: var(--surface-hover); }
.skin-a .a-sub.is-editing { flex-direction: column; gap: var(--space-2); padding: var(--space-3) 0; }
.skin-a .a-sub__t { flex: 1; min-width: 0; display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-2); border: 0; background: transparent; color: inherit; font: inherit; text-align: left; min-height: var(--touch-min); }
.skin-a .a-sub__time { flex: none; width: 40px; padding-top: 3px; }
.skin-a .a-sub__txt { display: flex; flex-direction: column; min-width: 0; overflow-wrap: anywhere; }
.skin-a .a-sub.is-on .a-sub__txt .body-strong { font-weight: 600; }
.skin-a .a-sub__act { flex: none; display: flex; align-items: center; gap: 2px; }
.skin-a .a-sub__editact { display: flex; justify-content: flex-end; gap: var(--space-2); }
.skin-a .a-videosrc { display: flex; }

.skin-a .a-outputs { display: flex; flex-direction: column; }
.skin-a .a-outputs li { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-2) 0; border-top: 1px solid var(--line); }
.skin-a .a-outputs li:first-child { border-top: 0; }

.skin-a .a-log { display: flex; flex-direction: column; gap: var(--space-2); padding-top: var(--space-2); }
.skin-a .a-log ul { display: flex; flex-direction: column; }
.skin-a .a-log li { display: grid; grid-template-columns: 76px 52px minmax(0, 1fr); gap: var(--space-2); align-items: baseline; padding: 6px 0; border-top: 1px solid var(--line); }
.skin-a .a-log li:first-child { border-top: 0; }
.skin-a .a-log__what { overflow-wrap: anywhere; }

/* 底部動作列 */
.skin-a .a-actionbar {
  position: sticky; bottom: 0; z-index: 15; display: flex; flex-direction: column; gap: var(--space-2);
  margin: 0 calc(-1 * var(--space-4)); padding: var(--space-3) var(--space-4) calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
  background: var(--surface); border-top: 1px solid var(--line);
}
.skin-a .a-actionbar__btns { display: grid; grid-template-columns: 1fr 2fr; gap: var(--space-2); }
@media (min-width: 900px) {
  .skin-a .a-actionbar { margin: 0; bottom: var(--space-4); padding: var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-lg); }
  .skin-a .a-actionbar__btns { grid-template-columns: auto auto; justify-content: end; }
}

/* ---------- 出處 ---------- */

.skin-a .a-src {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; max-height: 72dvh; overflow: auto;
  display: flex; flex-direction: column; gap: var(--space-4);
  padding: var(--space-4) var(--space-4) calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
  background: var(--surface); border-top: 1px solid var(--line); border-radius: var(--radius-lg) var(--radius-lg) 0 0; box-shadow: var(--shadow-pop);
}
@media (min-width: 900px) {
  .skin-a .a-src {
    position: sticky; top: var(--space-6); left: auto; right: auto; bottom: auto; z-index: 5; flex: 0 0 340px; width: 340px; max-height: calc(100dvh - 2 * var(--space-6));
    padding: var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: none;
  }
}
.skin-a .a-src__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }
.skin-a .a-src__t { display: flex; flex-direction: column; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.skin-a .a-src__sec { display: flex; flex-direction: column; gap: var(--space-2); }
.skin-a .a-chain { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius-md); }
.skin-a .a-chain li { display: flex; flex-direction: column; gap: 2px; padding: var(--space-2) var(--space-3); border-top: 1px solid var(--line); overflow-wrap: anywhere; }
.skin-a .a-chain li:first-child { border-top: 0; }
.skin-a .a-chain__img { display: block; width: 96px; aspect-ratio: 4 / 5; object-fit: contain; margin-top: 4px; background: var(--lighttable); border-radius: var(--radius-sm); }
.skin-a .a-kvs { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius-md); }
.skin-a .a-kv { display: flex; gap: var(--space-3); padding: var(--space-2) var(--space-3); border-top: 1px solid var(--line); }
.skin-a .a-kv:first-child { border-top: 0; }
.skin-a .a-kv__k { flex: none; width: 64px; }
.skin-a .a-kv__v { min-width: 0; overflow-wrap: anywhere; }
.skin-a .a-settings { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; }
.skin-a .a-settings > div { display: flex; flex-direction: column; gap: 2px; padding: var(--space-2) var(--space-3); background: var(--surface); min-width: 0; overflow-wrap: anywhere; }
.skin-a .a-codehead { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.skin-a .a-code {
  margin: 0; padding: var(--space-3); max-height: 240px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere;
  background: var(--surface-muted); border: 1px solid var(--line); border-radius: var(--radius-md);
  font-family: var(--font-mono); font-size: 12px; line-height: 18px; color: var(--ink);
}
.skin-a .a-code--short { max-height: 140px; }
.skin-a .a-refs { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.skin-a .a-refs li { display: flex; flex-direction: column; gap: 4px; width: 72px; }
.skin-a .a-refs img, .skin-a .a-refs__none { display: flex; align-items: center; justify-content: center; width: 72px; aspect-ratio: 4 / 5; object-fit: contain; background: var(--lighttable); color: var(--lighttable-ink-muted); border-radius: var(--radius-sm); }

/* ---------- 配方卡、開新的一支 ---------- */

.skin-a .a-recipe { display: flex; flex-direction: column; min-width: 0; overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); color: inherit; text-decoration: none; }
.skin-a .a-recipe:hover { border-color: var(--line-strong); }
.skin-a .a-recipe__cover { display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 9; background: var(--lighttable); color: var(--lighttable-ink-muted); }
.skin-a .a-recipe__cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
.skin-a .a-recipe__body { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3); }
.skin-a .a-recipe__sum { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.skin-a .a-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.skin-a .a-tag { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 1px var(--space-2); border: 1px solid var(--line-strong); border-radius: var(--radius-full); color: var(--ink-muted); }
.skin-a .a-tag--wrap { white-space: normal; border-radius: var(--radius-md); }

.skin-a .a-newform { display: flex; flex-direction: column; gap: var(--space-4); max-width: 720px; }
.skin-a .a-bullets { display: flex; flex-direction: column; gap: 4px; padding-top: 4px; }
.skin-a .a-bullets li { position: relative; padding-left: var(--space-4); }
.skin-a .a-bullets li::before { content: ""; position: absolute; left: 4px; top: 10px; width: 4px; height: 4px; border-radius: 50%; background: var(--ink-subtle); }
.skin-a .a-form { gap: var(--space-5); }
.skin-a .a-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.skin-a .a-field__top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); }
.skin-a .a-maprows { display: flex; flex-direction: column; gap: var(--space-2); }
.skin-a .a-maprow { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-2); }
.skin-a .a-form__act { display: flex; }
.skin-a .a-form__act .vi-btn { width: 100%; }
@media (min-width: 900px) { .skin-a .a-form__act .vi-btn { width: auto; } }

/* ---------- 配方頁 ---------- */

.skin-a .a-recipepage { display: flex; flex-direction: column; gap: var(--space-4); max-width: 880px; }
.skin-a .a-p + .a-p { margin-top: var(--space-2); }
.skin-a .a-sec { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.skin-a .a-sec__head { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--space-2) var(--space-3); }
.skin-a .a-rows { display: flex; flex-direction: column; }
.skin-a .a-rows > li { display: flex; flex-direction: column; gap: 4px; padding: var(--space-3) 0; border-top: 1px solid var(--line); }
.skin-a .a-rows > li:first-child { border-top: 0; padding-top: 0; }
.skin-a .a-rows__top { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--space-2); }
.skin-a .a-stacks { display: flex; flex-direction: column; gap: var(--space-3); }
.skin-a .a-stack { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); background: var(--surface-muted); border: 1px solid var(--line); border-radius: var(--radius-md); min-width: 0; }
.skin-a .a-stack.is-unused { gap: var(--space-2); }
.skin-a .a-stack.is-unused .title { color: var(--ink-muted); }
.skin-a .a-stack__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.skin-a .a-unverified { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 var(--space-2); border-radius: var(--radius-full); background: var(--status-amber-soft); color: var(--status-amber); font-weight: 500; white-space: nowrap; }
.skin-a .a-unverified .vi-icon { color: var(--status-amber-dot); }
.skin-a .a-unv { padding: var(--space-2) var(--space-3); background: var(--status-amber-soft); border-radius: var(--radius-md); color: var(--ink); }
.skin-a .a-unv__t { color: var(--status-amber); font-weight: 500; }
.skin-a .a-res { display: flex; flex-direction: column; gap: var(--space-2); padding-top: 4px; }
.skin-a .a-res li { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.skin-a .a-path { overflow-wrap: anywhere; color: var(--ink-muted); }

/* ---------- 庫 ---------- */

.skin-a .a-lib { display: flex; flex-direction: column; gap: var(--space-2); max-width: 640px; }
.skin-a .a-libcard { display: flex; align-items: center; gap: var(--space-3); min-height: 64px; padding: var(--space-3) var(--space-4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); color: inherit; text-decoration: none; }
.skin-a a.a-libcard:hover { border-color: var(--line-strong); }
.skin-a .a-libcard.is-off { color: var(--ink-muted); }
.skin-a .a-libcard__ic { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--radius-md); background: var(--surface-hover); color: var(--ink-muted); }
.skin-a .a-libcard__t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.skin-a .a-lib__skin { padding-top: var(--space-4); }

/* ---------- 第二步：挑選、逐格修改、資訊、資產、團隊 ---------- */

/* 電腦版的線切換只留左邊篩選欄（.a-chips 的 display 寫在上面的媒體查詢之後，會蓋掉隱藏） */
@media (min-width: 900px) { .skin-a .a-chips { display: none; } }
.skin-a .a-tabbar { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.skin-a .a-show-m-flex { display: flex; }
@media (min-width: 900px) { .skin-a .a-show-m-flex { display: none; } }
.skin-a .a-who { display: block; padding: 0 var(--space-2); overflow-wrap: anywhere; }
.skin-a .a-link { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

/* 乾淨的佔位圖 */
.skin-a .a-ph { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; width: 100%; height: 100%; min-height: 48px; background: var(--lighttable); color: var(--lighttable-ink-muted); }
.skin-a .a-ph .meta:empty { display: none; }

/* 角標 */
.skin-a .a-badge { position: absolute; left: 6px; top: 6px; z-index: 2; padding: 0 6px; border-radius: var(--radius-full); background: var(--surface); color: var(--ink); font-size: 11px; line-height: 18px; font-weight: 600; box-shadow: 0 0 0 1px var(--line); }
.skin-a .a-badge--redo { background: var(--status-amber-soft); color: var(--status-amber); }
.skin-a .a-badge--old { left: auto; right: 6px; top: auto; bottom: 6px; background: var(--ink); color: var(--surface); box-shadow: none; }

/* 挑選 */
.skin-a .a-cell__frame { position: relative; }
.skin-a .a-cell.is-picked .vi-cand__frame { box-shadow: 0 0 0 3px var(--lighttable-select); border-radius: var(--radius-sm); }
.skin-a .a-cell.is-open .vi-cand__frame { outline: 2px dashed var(--lighttable-select); outline-offset: 2px; }
.skin-a .a-pickmark { position: absolute; right: 6px; top: 6px; z-index: 2; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: var(--lighttable-select); color: var(--lighttable-on-select); }
.skin-a .a-cell__links { flex: none; display: flex; align-items: center; gap: 2px; }
.skin-a .a-cell__src:disabled { opacity: .5; }
.skin-a .a-pickline { padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: var(--surface-hover); color: var(--ink); overflow-wrap: anywhere; }
.skin-a .a-pickline.is-empty { background: var(--status-amber-soft); color: var(--status-amber); }

/* 鏡頭縮圖列 */
.skin-a .a-shotstrip { display: flex; gap: var(--space-2); overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }
.skin-a .a-shotthumb {
  position: relative; flex: 0 0 84px; display: flex; flex-direction: column; gap: 4px; padding: 3px; min-width: 0;
  border: 1px solid var(--lighttable-line); border-radius: var(--radius-md); background: var(--lighttable-tile); color: var(--lighttable-ink); font: inherit; text-align: left;
}
.skin-a .a-shotthumb__img { display: block; width: 100%; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--radius-sm); background: var(--lighttable); }
.skin-a .a-shotthumb__img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.skin-a .a-shotthumb__cap { display: flex; align-items: baseline; gap: 4px; min-width: 0; padding: 0 2px; font-size: 12px; line-height: 16px; }
.skin-a .a-shotthumb__l { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.skin-a .a-shotthumb.is-on { border-color: var(--lighttable-select); box-shadow: 0 0 0 2px var(--lighttable-select); }
.skin-a .a-shotthumb.is-open { background: var(--lighttable-select); color: var(--lighttable-on-select); }
.skin-a .a-shotthumb__now { position: absolute; left: 6px; bottom: 26px; padding: 0 5px; border-radius: var(--radius-full); background: var(--lighttable-select); color: var(--lighttable-on-select); font-size: 11px; line-height: 16px; }
.skin-a .a-shotthumb:focus-visible { outline-color: var(--lighttable-select); }
@media (min-width: 900px) { .skin-a .a-shotthumb { flex-basis: 96px; } }

/* 那一格的面板（電腦右欄、手機下方抽屜，沿用 .a-src） */
.skin-a .a-cellpanel { gap: var(--space-3); }
.skin-a .a-cellpanel__media { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
.skin-a .a-cellpanel__media figure { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.skin-a .a-cellpanel__media img, .skin-a .a-cellpanel__media video, .skin-a .a-cellpanel__media .a-ph { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: contain; background: var(--lighttable); border-radius: var(--radius-sm); }
.skin-a .a-redo { padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: var(--status-amber-soft); color: var(--status-amber); }
.skin-a .a-reviseacts { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.skin-a .a-revisenote { display: flex; flex-direction: column; gap: var(--space-2); }
.skin-a .a-revisenote__act { display: flex; justify-content: flex-end; gap: var(--space-2); }

/* 要改的地方 */
.skin-a .a-changes { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3) var(--space-4); background: var(--surface); border: 1px solid var(--ink); border-radius: var(--radius-lg); }
.skin-a .a-changes__head { display: flex; align-items: baseline; justify-content: space-between; }
.skin-a .a-changes__list li { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding: 4px 0; border-top: 1px solid var(--line); }
.skin-a .a-changes__list li:first-child { border-top: 0; }
.skin-a .a-changes__t { min-width: 0; overflow-wrap: anywhere; }
.skin-a .a-changes__act { display: flex; justify-content: flex-end; gap: var(--space-2); flex-wrap: wrap; }

/* 草稿、出處 */
.skin-a .a-draft { align-self: flex-start; }
.skin-a .a-origin { display: flex; flex-direction: column; gap: 2px; padding: var(--space-3) var(--space-4); background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--ink); border-radius: var(--radius-md); overflow-wrap: anywhere; }
.skin-a .a-recipe__cover .a-ph { aspect-ratio: auto; }

/* 資訊 */
.skin-a .a-info { display: flex; flex-direction: column; gap: var(--space-4); }
.skin-a .a-info__cards { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.skin-a .a-infocards { display: flex; flex-direction: column; gap: var(--space-3); }
.skin-a .a-infocard { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); min-width: 0; overflow-wrap: anywhere; }
.skin-a .a-infocard.is-save { border-color: var(--ink); }
.skin-a .a-infocard.is-skip { opacity: .6; }
.skin-a .a-infocard__kv { display: flex; flex-direction: column; gap: 2px; padding: var(--space-2) var(--space-3); background: var(--surface-muted); border-radius: var(--radius-md); }
.skin-a .a-infocard__foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-2); }
.skin-a .a-infocard__act { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-left: auto; }
.skin-a .a-info__side { min-width: 0; }
@media (min-width: 1100px) {
  .skin-a .a-info { display: grid; grid-template-columns: minmax(0, 1fr) 320px; align-items: start; }
  .skin-a .a-info__side { position: sticky; top: var(--space-6); }
}
.skin-a .a-select { height: var(--control-h); 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); font: inherit; max-width: 100%; }
@media (pointer: coarse) { .skin-a .a-select { min-height: var(--touch-min); } }
.skin-a .a-checks { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); }
.skin-a .a-check { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; cursor: pointer; }
.skin-a .a-check input { width: 16px; height: 16px; accent-color: var(--ink); }
@media (pointer: coarse) { .skin-a .a-check { min-height: var(--touch-min); } }
.skin-a .a-srcform { gap: var(--space-3); padding-top: var(--space-2); border-top: 1px solid var(--line); }

/* 資產 */
.skin-a .a-libassets { display: flex; flex-direction: column; gap: var(--space-3); }
.skin-a .a-assetgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
@media (min-width: 640px) { .skin-a .a-assetgrid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); } }
.skin-a .a-assetgrid--pick { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
.skin-a .a-asset { position: relative; display: flex; flex-direction: column; min-width: 0; overflow: hidden; padding: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); color: inherit; text-decoration: none; font: inherit; text-align: left; }
.skin-a .a-asset:hover { border-color: var(--line-strong); }
.skin-a .a-asset.is-selected { border-color: var(--ink); box-shadow: 0 0 0 2px var(--ink); }
.skin-a .a-asset .a-pickmark { background: var(--ink); color: var(--surface); }
.skin-a .a-asset__cover { display: block; aspect-ratio: 4 / 5; background: var(--lighttable); }
.skin-a .a-asset__cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
.skin-a .a-asset__body { display: flex; flex-direction: column; gap: 2px; padding: var(--space-2) var(--space-3); min-width: 0; }
.skin-a .a-asset__name, .skin-a .a-asset__sum { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.skin-a .a-assetpage { display: grid; grid-template-columns: 1fr; gap: var(--space-4); }
.skin-a .a-assetpage__cover { aspect-ratio: 4 / 5; max-width: 320px; overflow: hidden; border-radius: var(--radius-md); background: var(--lighttable); }
.skin-a .a-assetpage__cover img { display: block; width: 100%; height: 100%; object-fit: contain; }
.skin-a .a-assetpage__info { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
@media (min-width: 900px) { .skin-a .a-assetpage { grid-template-columns: 280px minmax(0, 1fr); } }
.skin-a .a-assetmedia { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.skin-a .a-assetmedia img, .skin-a .a-assetmedia video, .skin-a .a-assetmedia .a-ph { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: contain; background: var(--lighttable); border-radius: var(--radius-sm); }

/* 團隊 */
.skin-a .a-team { display: flex; flex-direction: column; gap: var(--space-3); max-width: 760px; }
.skin-a .a-member { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); min-width: 0; }
.skin-a .a-member.is-off { opacity: .65; }
.skin-a .a-member__top { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }
.skin-a .a-member__name { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--space-2); min-width: 0; }
.skin-a .a-member__join { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.skin-a .a-member__url { display: block; padding: var(--space-2); background: var(--surface-muted); border-radius: var(--radius-sm); overflow-wrap: anywhere; }
.skin-a .a-member__btns { display: flex; flex-wrap: wrap; gap: var(--space-2); }

@media (prefers-reduced-motion: reduce) {
  .skin-a * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* 要挑的候選：名稱不截斷，下面寫為什麼成立 */
.skin-a .a-cell.is-pickable .a-cell__cap { flex-wrap: wrap; }
.skin-a .a-cell.is-pickable .a-cell__label { white-space: normal; overflow: visible; flex: 1 0 100%; font-weight: 600; }
.skin-a .a-cell__why { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.skin-a .a-cell__why li { font-size: 12px; line-height: 18px; color: var(--lighttable-ink); opacity: 0.8; }

/* 團隊：登入狀況、邀請連結、對外網址、登入紀錄 */
.skin-a .a-member__login { overflow-wrap: anywhere; }
.skin-a .a-warn { color: #8a5a00; }
.skin-a .a-teamurl { gap: var(--space-2); }
.skin-a .a-audit { padding: var(--space-3) var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); }
.skin-a .a-audit summary { cursor: pointer; min-height: 28px; }
.skin-a .a-audit ul { list-style: none; margin: var(--space-2) 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.skin-a .a-who__out { margin-left: var(--space-2); padding: 0; border: 0; background: none; color: inherit; font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }