/* 照片详情：画布、版本、修复各有自己的空间，覆盖迁移期的通用工具栏布局。 */
@media screen {
  body.theme-c #detail-overlay {
    display:grid;
    grid-template-columns:minmax(0,1fr) 420px;
    grid-template-rows:64px minmax(0,1fr);
    height:100dvh;
    overflow:hidden;
    background:var(--vg-night);
    backdrop-filter:none;
    font:16px/1.65 var(--vg-sans);
  }
  body.theme-c #detail-overlay.pointer-events-none { visibility:hidden; }
  #detail-overlay[data-photo-pending] :is(#detail-sidebar,#detail-creator,#detail-photo-frame,#detail-prompt-wrapper) { visibility:hidden; }
  #detail-load-state[hidden], #detail-retry-btn[hidden] { display:none; }
  .photo-detail-header {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
    padding:8px 24px;
    background:var(--vg-night);
    color:var(--vg-on-night);
    z-index:30;
  }
  body.theme-c #detail-close-btn {
    display:flex;
    align-items:center;
    gap:8px;
    min-width:76px;
    min-height:44px;
    padding:8px 8px;
    border:0;
    border-radius:var(--vg-r-sm);
    background:transparent;
    color:var(--vg-on-night);
    font-size:16px;
    line-height:1.5;
  }
  body.theme-c #detail-close-btn:hover { background:var(--vg-ink2); }
  body.theme-c #detail-creator {
    display:grid;
    grid-template-columns:32px minmax(0,1fr);
    gap:0 12px;
    max-width:calc(100% - 100px);
    line-height:1.45;
  }
  #detail-creator > img { width:32px; height:32px; }
  #detail-creator .photo-creator-name { color:var(--vg-on-night); font-size:14px; }
  #detail-creator .photo-creator-date { color:var(--vg-on-night-dim); font-size:12px; }
  body.theme-c #detail-image-wrap { grid-column:1; grid-row:2; min-width:0; min-height:0; padding:24px 32px 40px; }
  body.theme-c #detail-photo-frame { width:100%; height:100%; min-height:0; }
  body.theme-c #detail-main-img { width:100%; height:100%; object-fit:contain; border-radius:0; box-shadow:none; }
  body.theme-c #detail-sidebar {
    display:flex;
    flex-direction:column;
    grid-column:2;
    grid-row:1 / -1;
    position:relative;
    min-width:0;
    min-height:0;
    width:auto;
    height:auto;
    overflow:hidden;
    border:0;
    border-radius:0;
    background:var(--vg-paper);
    box-shadow:none;
    transform:none;
  }
  .photo-detail-tabs {
    display:flex;
    flex-shrink:0;
    align-items:stretch;
    gap:24px;
    min-height:64px;
    padding:0 24px;
    border-bottom:1px solid var(--vg-line);
  }
  body.theme-c .photo-detail-tabs > button {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    min-height:56px;
    padding:12px 0;
    border:0;
    border-bottom:2px solid transparent;
    background:transparent;
    color:var(--vg-ink2);
    font-size:16px;
    line-height:1.5;
  }
  body.theme-c .photo-detail-tabs > [aria-selected="true"] { color:var(--vg-seal); border-bottom-color:var(--vg-seal); font-weight:600; }
  .photo-detail-panel { flex:1; min-height:0; padding:24px; overflow-y:auto; overscroll-behavior:contain; scrollbar-gutter:stable; }
  .photo-detail-panel[hidden] { display:none; }
  .photo-detail-panel { padding-bottom:max(24px,env(safe-area-inset-bottom)); }
  body.theme-c #detail-info-panel .detail-actions { grid-template-columns:repeat(3,minmax(0,1fr)); gap:4px; padding-bottom:16px; border-bottom:1px solid var(--vg-line); }
  body.theme-c #detail-info-panel .detail-action { min-height:48px; padding:8px 4px; border:0; background:transparent; font-size:16px; gap:4px; }
  #detail-info-panel .detail-action :is(.upvote-count,#detail-comment-button-count) { font-size:12px; }
  #detail-face-toggle-btn:focus-visible { outline:2px solid var(--vg-seal); outline-offset:2px; }
  #detail-face-canvas[hidden] { display:none; }
  .photo-versions-heading { order:2; margin:4px 0 0; color:var(--vg-ink); font:600 20px/1.5 var(--vg-serif); }
  body.theme-c #detail-version-list > .version-card[data-active="1"] { border-color:var(--vg-line); }
  body.theme-c #detail-info-panel .version-card-info { font-size:16px; }
  body.theme-c #detail-info-panel .version-card-date { font-size:14px; }
  .photo-repair-heading { margin-bottom:24px; }
  .photo-repair-heading h2 { margin:0 0 8px; color:var(--vg-ink); font:600 20px/1.5 var(--vg-serif); }
  .photo-repair-heading p, #ai-prompt-help, #ai-availability-note { margin:0; color:var(--vg-ink2); font-size:14px; line-height:1.7; }
  .photo-repair-fields { display:grid; gap:24px; }
  body.theme-c #ai-preset-row { display:flex; flex-wrap:wrap; gap:8px; }
  body.theme-c #ai-preset-row .ai-preset-btn {
    display:flex;
    flex-direction:row;
    align-items:center;
    justify-content:center;
    gap:8px;
    min-width:0;
    min-height:44px;
    padding:8px 12px;
    border:1px solid var(--vg-line);
    border-radius:var(--vg-r-pill);
    background:var(--vg-paper);
    color:var(--vg-ink2);
    font-size:16px;
    line-height:1.5;
    white-space:nowrap;
  }
  #ai-preset-row .ai-preset-btn i { font-size:18px; }
  body.theme-c #ai-preset-row .ai-preset-btn[aria-pressed="true"] { border-color:var(--vg-seal); background:var(--vg-seal-soft); color:var(--vg-seal); font-weight:600; }
  body.theme-c #ai-preset-row .ai-preset-btn:hover:not(:disabled) { border-color:var(--vg-seal); }
  .photo-repair-prompt { display:grid; gap:12px; }
  .photo-repair-label { display:flex; align-items:center; justify-content:space-between; gap:12px; }
  .photo-repair-label label { color:var(--vg-ink); font-size:16px; font-weight:600; }
  #ai-prompt-count { color:var(--vg-ink2); font-size:12px; font-variant-numeric:tabular-nums; }
  body.theme-c #ai-prompt-input {
    display:block;
    width:100%;
    min-height:152px;
    max-height:320px;
    padding:12px 16px;
    border:1px solid var(--vg-line);
    border-radius:var(--vg-r-md);
    background:var(--vg-paper);
    color:var(--vg-ink);
    font-size:16px;
    line-height:1.8;
    resize:vertical;
  }
  .photo-style-presets { display:flex; flex-wrap:wrap; gap:8px; }
  .photo-style-presets[hidden] { display:none; }
  body.theme-c .photo-style-presets .prompt-tpl { min-height:44px; padding:8px 12px; border:1px solid var(--vg-line); border-radius:var(--vg-r-pill); font-size:14px; line-height:1.5; background:var(--vg-paper); }
  .photo-repair-reference:not(.hidden) { display:grid; gap:12px; }
  .photo-repair-reference > p { margin:0; color:var(--vg-ink2); font-size:14px; }
  body.theme-c #ai-ref-add, body.theme-c #ai-ref-remove { min-height:44px; padding:8px 12px; border:1px solid var(--vg-line); border-radius:var(--vg-r-sm); background:var(--vg-paper); color:var(--vg-ink2); font-size:16px; line-height:1.5; }
  .photo-reference-thumb:not(.hidden) { display:flex; align-items:center; gap:12px; }
  #ai-ref-thumb-img { width:48px; height:48px; object-fit:cover; border-radius:var(--vg-r-sm); }
  body.theme-c #ai-spec-row { display:block; padding-top:16px; border-top:1px solid var(--vg-line); }
  body.theme-c #ai-spec-row .ai-spec-btn[data-spec="2k"] {
    display:grid;
    grid-template-columns:24px minmax(0,1fr);
    align-items:center;
    gap:2px 12px;
    width:100%;
    min-height:48px;
    padding:0;
    border:0;
    background:transparent;
    text-align:left;
    cursor:default;
  }
  #ai-spec-row .ai-spec-btn > i { grid-row:1 / 3; color:var(--vg-ink2); font-size:24px; }
  #ai-spec-row .ai-spec-btn > span:first-of-type { color:var(--vg-ink); font-size:14px; line-height:1.5; }
  #ai-spec-row .ai-spec-btn > span:last-of-type { color:var(--vg-ink2); font-size:12px; line-height:1.7; }
  .photo-repair-submit { display:grid; gap:12px; }
  body.theme-c #ai-generate-btn { width:100%; min-height:48px; padding:12px 16px; border:1px solid transparent; border-radius:var(--vg-r-md); background:var(--vg-seal); color:var(--vg-on-seal); font-size:16px; font-weight:600; line-height:1.5; }
  #ai-availability-note { text-align:center; }
  body.theme-c #detail-sidebar #detail-comment-drawer { max-height:100%; }
  @media (max-width:1023px) {
    body.theme-c #detail-overlay { grid-template-columns:minmax(0,1fr); grid-template-rows:56px minmax(140px,34dvh) minmax(0,1fr); }
    .photo-detail-header { padding:4px 16px; }
    body.theme-c #detail-image-wrap { padding:8px 16px 24px; }
    body.theme-c #detail-sidebar { grid-column:1; grid-row:3; }
    .photo-detail-tabs { gap:24px; min-height:56px; padding:0 24px; }
    .photo-detail-panel { padding:24px 24px max(24px,env(safe-area-inset-bottom)); }
    .photo-repair-heading { margin-bottom:24px; }
    .photo-repair-heading h2 { font-size:20px; }
    .photo-repair-fields { gap:24px; }
    body.theme-c #ai-preset-row .ai-preset-btn { gap:4px; padding:8px; }
  }
}