.content-grid-full { grid-template-columns: minmax(0, 1fr); }

.asset-studio { display: grid; gap: 16px; min-width: 0; }
.asset-toolbar, .asset-group, .asset-state-card, .asset-disclosure { border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); }
.asset-toolbar { padding: 20px; box-shadow: 0 1px 2px rgba(26,32,55,.03); }
.asset-toolbar-title { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; }
.asset-toolbar-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
.asset-toolbar h2, .asset-state-card h2 { margin: 4px 0 3px; font-size: 22px; line-height: 1.25; }
.asset-toolbar p, .asset-state-card p { margin: 0; color: var(--text-muted); }
.asset-operation-guide { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; margin-top: 18px; padding: 12px 14px; border: 1px solid #c7d2fe; border-radius: 10px; background: var(--primary-soft); color: var(--text); font-size: 13px; }
.asset-operation-guide strong { color: var(--primary-strong); }
.asset-operation-status { color: var(--text-muted); font-weight: 750; }
.asset-kicker { color: var(--primary-strong); font-size: 12px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.asset-filters { display: grid; grid-template-columns: repeat(5, minmax(140px, 1fr)); gap: 12px; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--border); }
.asset-filters label, .asset-field { display: grid; gap: 6px; color: var(--text-muted); font-size: 13px; font-weight: 750; }
.asset-filters select, .asset-field input, .asset-field select, .asset-field textarea { width: 100%; min-height: 46px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--text); font: inherit; }
.asset-field textarea { min-height: 80px; resize: vertical; }
.asset-filters select:focus-visible, .asset-field input:focus-visible, .asset-field select:focus-visible, .asset-field textarea:focus-visible { outline: 3px solid color-mix(in srgb, var(--focus) 25%, transparent); border-color: var(--focus); }
.asset-checkbox { display: flex !important; min-height: 46px; align-items: center; align-self: end; gap: 9px !important; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; color: var(--text) !important; cursor: pointer; }
.asset-checkbox input { width: 18px; height: 18px; margin: 0; accent-color: var(--primary); }
.asset-disclosure { padding: 12px 16px; border-left: 4px solid var(--info); color: var(--text-muted); font-size: 14px; }
.asset-disclosure strong { color: var(--info); }
.asset-live-region { min-height: 24px; margin: 0; color: var(--success); font-size: 14px; font-weight: 750; }

.asset-button, .asset-link-button, .asset-dialog-close { min-height: 44px; border: 1px solid transparent; border-radius: 10px; cursor: pointer; font: inherit; font-weight: 800; transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease, box-shadow 180ms ease; }
.asset-button { display: inline-flex; align-items: center; justify-content: center; padding: 10px 15px; color: inherit; text-align: center; text-decoration: none; }
.asset-button-primary { background: var(--primary); color: #fff; }
.asset-button-primary:hover { background: var(--primary-strong); }
.asset-button-secondary { border-color: var(--border); background: var(--surface); color: var(--text); }
.asset-button-secondary:hover { background: var(--surface-muted); }
.asset-button-danger { background: var(--danger); color: #fff; }
.asset-button-danger:hover { filter: brightness(.9); }
.asset-button:disabled { cursor: not-allowed; opacity: .48; }
.asset-button:focus-visible, .asset-link-button:focus-visible, .asset-dialog-close:focus-visible, .asset-group summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.asset-link-button { min-width: 54px; padding: 7px 10px; background: transparent; color: var(--primary-strong); }
.asset-link-button:hover { background: var(--primary-soft); }
.asset-link-danger { color: var(--danger); }

.asset-group-list { display: grid; gap: 12px; }
.asset-group { overflow: clip; }
.asset-group > summary { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(320px, .65fr); align-items: center; gap: 20px; min-height: 92px; padding: 18px 20px; cursor: pointer; list-style: none; }
.asset-group > summary::-webkit-details-marker { display: none; }
.asset-group[open] > summary { border-bottom: 1px solid var(--border); background: #fbfcff; }
.asset-group-heading { display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: start; gap: 12px; min-width: 0; }
.asset-group-heading strong, .asset-group-heading span { display: block; }
.asset-group-heading strong { font-size: 17px; line-height: 1.35; }
.asset-group-heading div > span { margin-top: 5px; color: var(--text-muted); font-size: 13px; overflow-wrap: anywhere; }
.asset-source { display: inline-flex !important; min-width: 72px; justify-content: center; padding: 5px 8px; border-radius: 8px; font-size: 11px; font-weight: 900; letter-spacing: .05em; }
.asset-source-external { background: var(--primary-soft); color: var(--primary-strong); }
.asset-source-manual { background: var(--info-soft); color: var(--info); }
.asset-group-select, .asset-row-select { width: 20px; height: 20px; margin: 0; accent-color: var(--danger); cursor: pointer; }
.asset-group-select:disabled, .asset-row-select:disabled { cursor: not-allowed; opacity: .4; }
.asset-group-summary { display: grid; grid-template-columns: minmax(150px, 1fr) auto 18px; align-items: center; gap: 12px; }
.asset-progress { display: grid; gap: 5px; }
.asset-progress strong { color: var(--text-muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.asset-progress-track { overflow: hidden; height: 7px; border-radius: 99px; background: var(--surface-strong); }
.asset-progress-track span { display: block; height: 100%; border-radius: inherit; background: var(--primary); transition: width 220ms ease; }
.asset-status { display: inline-flex; min-height: 30px; align-items: center; gap: 7px; padding: 5px 9px; border: 1px solid var(--border); border-radius: 999px; white-space: nowrap; font-size: 12px; font-weight: 850; }
.asset-status > span { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.asset-tone-success { border-color: #b8e6c6; background: var(--success-soft); color: var(--success); }
.asset-tone-danger { border-color: #fecaca; background: var(--danger-soft); color: var(--danger); }
.asset-tone-info { border-color: #bae6fd; background: var(--info-soft); color: var(--info); }
.asset-tone-attention { border-color: #f2d29d; background: var(--attention-soft); color: var(--attention); }
.asset-tone-neutral { background: var(--surface-muted); color: var(--text-muted); }
.asset-chevron { width: 10px; height: 10px; border-right: 2px solid var(--text-muted); border-bottom: 2px solid var(--text-muted); transform: rotate(45deg) translateY(-2px); transition: transform 180ms ease; }
.asset-group[open] .asset-chevron { transform: rotate(225deg) translate(-2px, -2px); }
.asset-group-body { display: grid; gap: 16px; padding: 20px; }
.asset-group-context { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(240px, .65fr); gap: 12px; }
.asset-group-context > div { padding: 14px; border-radius: var(--radius-sm); background: var(--surface-muted); }
.asset-group-context span { display: block; margin-bottom: 5px; color: var(--text-muted); font-size: 12px; font-weight: 800; text-transform: uppercase; }
.asset-group-context p { margin: 0; }
.asset-group-context a { display: inline-flex; margin-top: 6px; color: var(--primary-strong); font-weight: 750; }
.asset-group-actions { display: flex; flex-wrap: wrap; gap: 10px; }

.asset-table { display: grid; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.asset-table-head, .asset-table-row { display: grid; grid-template-columns: 38px 56px minmax(240px, 1.35fr) minmax(170px, .8fr) minmax(120px, .55fr) minmax(134px, .55fr); align-items: center; gap: 12px; min-width: 0; padding: 12px 14px; }
.asset-table-head { background: var(--surface-muted); color: var(--text-muted); font-size: 12px; font-weight: 850; text-transform: uppercase; }
.asset-table-row { border-top: 1px solid var(--border); background: var(--surface); }
.asset-table-row > div { min-width: 0; }
.asset-table-row > div > span:not(.asset-status), .asset-row-copy > span { display: block; color: var(--text-muted); font-size: 12px; overflow-wrap: anywhere; }
.asset-table-row > div > strong, .asset-row-copy > strong { display: block; line-height: 1.4; overflow-wrap: anywhere; }
.asset-order { display: grid !important; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--primary-soft); color: var(--primary-strong) !important; font-weight: 900; }
.asset-row-copy { display: grid; gap: 4px; }
.asset-row-reference { display: flex !important; align-items: center; gap: 7px; min-width: 0; }
.asset-reference-thumb { width: 38px; height: 50px; flex: 0 0 auto; border: 1px solid var(--border); border-radius: 7px; background: var(--surface-muted); object-fit: cover; }
.asset-reference-missing { display: inline-flex !important; min-height: 28px; align-items: center; padding: 4px 7px; border: 1px solid #f2d29d; border-radius: 7px; background: var(--attention-soft); color: var(--attention) !important; font-weight: 750; }
.asset-prompt-type { color: var(--primary-strong) !important; font: 750 11px/1.35 ui-monospace, SFMono-Regular, Menlo, monospace; }
.asset-inline-error { display: grid; gap: 2px; margin-top: 5px; padding: 8px 10px; border-left: 3px solid var(--danger); background: var(--danger-soft); color: var(--danger); font-size: 12px; }
.asset-inline-error span { color: var(--text) !important; }
.asset-row-action { display: grid; gap: 8px; }
.asset-row-action .asset-button { width: 100%; min-height: 44px; }

.asset-state-card { display: grid; justify-items: start; gap: 12px; min-height: 270px; align-content: center; padding: 32px; }
.asset-state-empty { justify-items: center; text-align: center; }
.asset-state-error { border-color: #fecaca; background: var(--danger-soft); }
.asset-error-code { color: var(--danger); font: 800 12px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; }
.asset-error-columns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; width: 100%; }
.asset-error-columns p { padding: 14px; border-radius: 10px; background: var(--surface); color: var(--text); }
.asset-error-columns strong { display: block; margin-bottom: 5px; }
.asset-empty-visual { display: grid; grid-template-columns: repeat(3, 42px); gap: 8px; align-items: end; min-height: 74px; }
.asset-empty-visual span { display: block; height: 58px; border: 2px solid #c7d2fe; border-radius: 9px; background: var(--primary-soft); transform: rotate(-5deg); }
.asset-empty-visual span:nth-child(2) { height: 72px; transform: none; }
.asset-empty-visual span:nth-child(3) { transform: rotate(5deg); }
.asset-skeleton { width: min(720px, 100%); height: 54px; border-radius: 10px; background: linear-gradient(90deg, var(--surface-muted), var(--surface-strong), var(--surface-muted)); background-size: 220% 100%; animation: asset-shimmer 1.3s infinite linear; }
.asset-skeleton-title { width: min(360px, 70%); height: 26px; }
@keyframes asset-shimmer { to { background-position: -220% 0; } }

.asset-dialog { width: min(980px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 0; overflow: auto; border: 1px solid var(--border); border-radius: 18px; background: var(--surface); color: var(--text); box-shadow: 0 28px 80px rgba(20,25,45,.28); }
.asset-dialog::backdrop { background: rgba(17, 24, 39, .58); backdrop-filter: blur(2px); }
.asset-dialog form, .asset-dialog-content { display: grid; gap: 20px; padding: 24px; }
.asset-dialog header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.asset-dialog h2, .asset-dialog h3 { margin: 4px 0 5px; }
.asset-dialog header p, .asset-draft-heading p { margin: 0; color: var(--text-muted); }
.asset-dialog-close { flex: 0 0 44px; width: 44px; padding: 0; border-color: var(--border); background: var(--surface); color: var(--text); font-size: 24px; line-height: 1; }
.asset-dialog footer { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 10px; padding-top: 18px; border-top: 1px solid var(--border); }
.asset-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.asset-field-wide { grid-column: 1 / -1; }
.asset-field > span { color: var(--danger); }
.asset-field small { min-height: 18px; color: var(--text-muted); font-weight: 500; }
.asset-source-paste { display: grid; align-content: center; gap: 4px; min-height: 88px; padding: 12px 14px; border: 1px dashed #9badc8; border-radius: 10px; background: #f8fbff; color: var(--text); cursor: text; }
.asset-source-paste strong { color: var(--primary-strong); font-size: 13px; }
.asset-source-paste > span { color: var(--text-muted); font-size: 12px; line-height: 1.4; }
.asset-source-paste small { min-height: 18px; color: var(--text-muted); font-size: 12px; font-weight: 600; }
.asset-source-paste:focus-visible { outline: 3px solid color-mix(in srgb, var(--focus) 25%, transparent); border-color: var(--focus); }
.asset-source-paste:hover { border-color: var(--primary); background: var(--primary-soft); }
.asset-draft-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding-top: 4px; }
.asset-draft-list { display: grid; gap: 12px; }
.asset-draft-row { display: grid; grid-template-columns: 1.25fr .85fr; gap: 12px; padding: 16px; border: 1px solid var(--border); border-radius: 12px; }
.asset-draft-row legend { padding: 0 6px; color: var(--primary-strong); font-weight: 900; }
.asset-draft-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 4px; padding-top: 8px; border-top: 1px solid var(--border); }
.asset-draft-prompt-preview { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; padding: 12px 14px; border: 1px solid #c7d2fe; border-radius: 10px; background: var(--primary-soft); }
.asset-draft-prompt-preview > span { grid-column: 1 / -1; color: var(--primary-strong); font-size: 11px; font-weight: 900; letter-spacing: .05em; text-transform: uppercase; }
.asset-draft-prompt-preview strong { overflow-wrap: anywhere; }
.asset-draft-prompt-preview small { color: var(--text-muted); white-space: nowrap; }
.asset-draft-prompt-preview .asset-reference-thumb { grid-row: span 2; width: 54px; height: 72px; justify-self: end; }
.asset-form-error { min-height: 22px; margin: 0; color: var(--danger); font-weight: 750; }

.asset-prompt-manager { width: min(1040px, calc(100vw - 32px)); }
.asset-prompt-manager-actions { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 16px; border-radius: 12px; background: var(--surface-muted); }
.asset-prompt-manager-actions div { display: grid; gap: 3px; }
.asset-prompt-manager-actions span, .asset-prompt-card-heading p { color: var(--text-muted); font-size: 13px; }
.asset-prompt-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.asset-prompt-card { display: grid; align-content: start; gap: 14px; min-width: 0; padding: 16px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); }
.asset-prompt-card-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.asset-prompt-card h3 { margin: 8px 0 3px; font-size: 17px; }
.asset-prompt-card-heading p { margin: 0; }
.asset-prompt-status { display: inline-flex; padding: 4px 7px; border-radius: 999px; font-size: 10px; font-weight: 900; letter-spacing: .05em; }
.asset-prompt-active { border: 1px solid #b8e6c6; background: var(--success-soft); color: var(--success); }
.asset-prompt-archived { border: 1px solid var(--border); background: var(--surface-muted); color: var(--text-muted); }
.asset-prompt-ratio { display: grid; place-items: center; flex: 0 0 48px; min-height: 44px; border-radius: 10px; background: var(--primary-soft); color: var(--primary-strong); font-variant-numeric: tabular-nums; }
.asset-prompt-reference { display: grid; gap: 4px; padding: 12px; border-left: 3px solid var(--primary); border-radius: 8px; background: var(--primary-soft); }
.asset-prompt-reference span, .asset-prompt-details span { color: var(--text-muted); font-size: 11px; font-weight: 850; text-transform: uppercase; }
.asset-prompt-reference code { width: fit-content; padding: 3px 6px; border-radius: 5px; background: rgba(255,255,255,.7); color: var(--primary-strong); font-size: 12px; overflow-wrap: anywhere; }
.asset-prompt-reference-image { width: 100%; max-height: 220px; border: 1px solid #c7d2fe; border-radius: 8px; background: var(--surface); object-fit: contain; }
.asset-prompt-details { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.asset-prompt-details summary { min-height: 44px; padding: 12px 0; cursor: pointer; color: var(--primary-strong); font-weight: 800; }
.asset-prompt-details > div { display: grid; gap: 5px; padding: 0 0 14px; }
.asset-prompt-details p { margin: 0 0 7px; color: var(--text); line-height: 1.55; overflow-wrap: anywhere; }
.asset-prompt-details small, .asset-prompt-source-note { padding: 10px 12px; border-radius: 8px; background: var(--attention-soft); color: var(--text); }
.asset-prompt-card > footer { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: auto; }
.asset-prompt-editor { width: min(760px, calc(100vw - 32px)); }
.asset-prompt-source-note { margin: 0; }

.asset-row-dialog { width: min(1120px, calc(100vw - 32px)); }
.asset-source-controls { display: grid; gap: 10px; padding: 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-muted); }
.asset-row-editor { display: grid; gap: 10px; padding: 16px; border: 1px solid #c7d2fe; border-radius: 12px; background: var(--primary-soft); }
.asset-row-editor h3, .asset-row-editor p { margin: 0; }
.asset-row-editor p { color: var(--text-muted); }
.asset-row-editor form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, .65fr); align-items: end; gap: 12px; padding: 0; }
.asset-row-editor .asset-form-error, .asset-row-editor form > div { grid-column: 1 / -1; }
.asset-source-controls h3, .asset-source-controls p { margin: 0; }
.asset-source-controls p { color: var(--text-muted); }
.asset-source-controls form { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 12px; padding: 0; }
.asset-source-controls form > div { display: flex; flex-wrap: wrap; gap: 8px; }
.asset-source-controls form > .asset-source-paste { display: grid; }
.asset-source-controls .asset-form-error { grid-column: 1 / -1; }
.asset-compare-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.asset-compare-panel { display: grid; gap: 9px; min-width: 0; }
.asset-compare-panel > span, .asset-compare-panel > small { color: var(--text-muted); font-size: 12px; font-weight: 800; }
.asset-reference-preview, .asset-reference-placeholder { display: grid; width: 100%; min-height: 280px; aspect-ratio: 3 / 4; place-items: center; border-radius: 14px; background: var(--surface-muted); object-fit: contain; }
.asset-reference-preview { border: 1px solid var(--border); }
.asset-reference-placeholder { padding: 22px; border: 2px dashed #9aa4bb; color: var(--text-muted); text-align: center; }
.asset-reference-caption { padding: 10px 12px; border-radius: 10px; background: var(--surface-muted); }
.asset-reference-caption strong { font-size: 14px; line-height: 1.4; overflow-wrap: anywhere; }
.asset-detail-error { display: grid; grid-template-columns: auto repeat(3, minmax(0, 1fr)); gap: 12px; padding: 16px; border: 1px solid #fecaca; border-radius: 12px; background: var(--danger-soft); }
.asset-detail-error > span { color: var(--danger); font: 800 12px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; }
.asset-detail-error strong { display: block; margin-bottom: 4px; }
.asset-detail-error p { margin: 0; font-size: 14px; }
.asset-attempt-section { padding-top: 4px; }
.asset-attempts { display: grid; gap: 0; padding: 0; margin: 12px 0 0; list-style: none; }
.asset-attempts li { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; padding-bottom: 16px; }
.asset-attempts li > span { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--surface-strong); color: var(--text-muted); font-weight: 900; }
.asset-attempts li:not(:last-child) > div { padding-bottom: 16px; border-bottom: 1px solid var(--border); }
.asset-attempts p { margin: 3px 0 0; color: var(--text-muted); }
.asset-muted { color: var(--text-muted); }
.asset-confirm-dialog { width: min(540px, calc(100vw - 32px)); }
.asset-confirm-summary { display: grid; gap: 4px; padding: 16px; border-radius: 12px; background: var(--primary-soft); }
.asset-confirm-summary span { color: var(--text-muted); }

@media (max-width: 1120px) {
  .asset-filters { grid-template-columns: repeat(3, minmax(150px, 1fr)); }
  .asset-group > summary { grid-template-columns: 1fr; gap: 12px; }
  .asset-group-summary { grid-template-columns: minmax(180px, 1fr) auto 18px; }
  .asset-table-head, .asset-table-row { grid-template-columns: 34px 48px minmax(220px, 1.2fr) minmax(150px, .75fr) minmax(116px, .55fr) 126px; }
}

@media (max-width: 800px) {
  .asset-toolbar-title, .asset-draft-heading { display: grid; }
  .asset-toolbar-actions, .asset-prompt-manager-actions { display: grid; width: 100%; }
  .asset-toolbar-title .asset-button, .asset-draft-heading .asset-button, .asset-toolbar-actions .asset-button, .asset-prompt-manager-actions .asset-button { width: 100%; }
  .asset-filters { grid-template-columns: 1fr 1fr; }
  .asset-group-context, .asset-error-columns, .asset-form-grid, .asset-compare-grid, .asset-detail-error { grid-template-columns: 1fr; }
  .asset-operation-guide, .asset-source-controls form, .asset-row-editor form { grid-template-columns: 1fr; }
  .asset-table-head { display: none; }
  .asset-table { gap: 10px; border: 0; overflow: visible; }
  .asset-table-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 15px; border: 1px solid var(--border); border-radius: 12px; }
  .asset-table-row > div::before { content: attr(data-label); display: block; margin-bottom: 5px; color: var(--text-muted); font-size: 11px; font-weight: 850; text-transform: uppercase; }
  .asset-row-copy, .asset-row-action { grid-column: 1 / -1; }
  .asset-draft-row { grid-template-columns: 1fr; }
  .asset-draft-row .asset-field-wide, .asset-draft-actions { grid-column: 1; }
  .asset-reference-preview, .asset-reference-placeholder { min-height: 230px; aspect-ratio: 4 / 3; }
  .asset-detail-error > span { margin-bottom: 2px; }
  .asset-prompt-grid { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
  .asset-toolbar, .asset-group-body, .asset-state-card { padding: 16px; }
  .asset-filters { grid-template-columns: 1fr; }
  .asset-group > summary { padding: 16px; }
  .asset-group-heading { grid-template-columns: auto minmax(0, 1fr); }
  .asset-group-heading > div { grid-column: 1 / -1; }
  .asset-source { justify-self: start; }
  .asset-group-summary { grid-template-columns: 1fr auto; }
  .asset-group-summary .asset-status { grid-column: 1; justify-self: start; }
  .asset-chevron { grid-column: 2; grid-row: 1 / span 2; }
  .asset-group-context { grid-template-columns: 1fr; }
  .asset-group-actions .asset-button { width: 100%; }
  .asset-table-row { grid-template-columns: 1fr; }
  .asset-row-copy, .asset-row-action { grid-column: 1; }
  .asset-dialog { width: calc(100vw - 16px); max-height: calc(100dvh - 16px); }
  .asset-dialog form, .asset-dialog-content { padding: 18px; }
  .asset-dialog footer .asset-button { width: 100%; }
  .asset-draft-prompt-preview { grid-template-columns: 1fr; }
  .asset-draft-prompt-preview small { white-space: normal; }
  .asset-draft-prompt-preview .asset-reference-thumb { grid-row: auto; justify-self: start; }
  .asset-prompt-card > footer .asset-button, .asset-prompt-card > footer .asset-link-button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .asset-skeleton { animation: none; }
  .asset-progress-track span, .asset-chevron { transition: none; }
}

/* Asset Studio refresh: calm, editorial workspace with one clear primary action. */
.asset-studio {
  --asset-ink: #152238;
  --asset-muted: #66738a;
  --asset-line: #dce3ee;
  --asset-canvas: #f6f8fc;
  --asset-accent: #2f6fed;
  --asset-accent-soft: #edf4ff;
  gap: 22px;
}

.asset-toolbar {
  padding: 4px 0 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.asset-toolbar-title {
  align-items: end;
  gap: 28px;
}

.asset-toolbar-intro { max-width: 480px; }
.asset-toolbar h2, .asset-state-card h2 {
  margin: 5px 0 6px;
  color: var(--asset-ink);
  font-size: clamp(24px, 2vw, 30px);
  letter-spacing: -.035em;
}
.asset-toolbar p { max-width: 42ch; font-size: 15px; line-height: 1.55; }
.asset-kicker { color: var(--asset-accent); font-size: 11px; letter-spacing: .12em; }

.asset-toolbar-actions {
  align-items: center;
  gap: 8px;
}
.asset-toolbar-actions .asset-button-primary { order: -1; }
.asset-toolbar-actions .asset-button-danger { order: 3; }

.asset-button, .asset-link-button, .asset-dialog-close {
  border-radius: 9px;
  letter-spacing: -.01em;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}
.asset-button-primary {
  background: var(--asset-ink);
  box-shadow: 0 1px 2px rgba(15, 23, 42, .16);
}
.asset-button-primary:hover { background: #253550; box-shadow: 0 7px 16px rgba(15, 23, 42, .13); transform: translateY(-1px); }
.asset-button-secondary { border-color: var(--asset-line); color: var(--asset-ink); background: #fff; }
.asset-button-secondary:hover { border-color: #bdc9da; background: #f7f9fc; }
.asset-button-danger { border-color: #f2c8c4; background: #fff8f7; color: #b42318; }
.asset-button-danger:hover { border-color: #df958e; background: #fff0ee; filter: none; }
.asset-button:disabled { opacity: .5; }
.asset-button:focus-visible, .asset-link-button:focus-visible, .asset-dialog-close:focus-visible, .asset-group summary:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--asset-accent) 35%, transparent);
  outline-offset: 3px;
}

.asset-operation-guide {
  /* `details` inherited a three-column grid from the legacy guide.  That
     made its summary land in the first 10px track at smaller content widths. */
  display: block;
  width: 100%;
  margin-top: 16px;
  border: 1px solid #d8e5fb;
  border-radius: 10px;
  background: #f8fbff;
  color: var(--asset-muted);
}
.asset-operation-guide summary {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  padding: 9px 12px;
  cursor: pointer;
  list-style: none;
}
.asset-operation-guide summary::-webkit-details-marker { display: none; }
.asset-operation-guide summary > span:nth-child(2) { display: grid; gap: 1px; min-width: 0; }
.asset-operation-guide strong { color: var(--asset-ink); font-size: 13px; }
.asset-operation-guide small { overflow: hidden; color: var(--asset-muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.asset-operation-detail {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 12px 10px 32px;
  color: var(--asset-muted);
  font-size: 12px;
  line-height: 1.45;
}
.asset-operation-indicator { width: 9px; height: 9px; border-radius: 50%; background: #16a36a; box-shadow: 0 0 0 4px #dff7eb; }
.asset-operation-summary-status, .asset-operation-status { color: #31654e; font-size: 11px; font-weight: 800; white-space: nowrap; }

.asset-filters {
  grid-template-columns: 1.25fr 1fr 1fr auto;
  align-items: end;
  gap: 10px;
  margin-top: 18px;
  padding: 14px;
  border: 1px solid var(--asset-line);
  border-radius: 14px;
  background: #fff;
}
.asset-filters label, .asset-field { color: #526078; font-size: 12px; letter-spacing: .01em; }
.asset-filters select, .asset-field input, .asset-field select, .asset-field textarea {
  border-color: var(--asset-line);
  border-radius: 8px;
  box-shadow: none;
}
.asset-filters select { min-height: 42px; background: #fbfcfe; }
.asset-checkbox { min-height: 42px; border-color: var(--asset-line); border-radius: 8px; background: #fbfcfe; }
.asset-checkbox:hover { border-color: #bdc9da; background: #fff; }
.asset-disclosure {
  padding: 10px 14px;
  border: 1px solid #dce6f5;
  border-left: 3px solid var(--asset-accent);
  border-radius: 9px;
  background: #fbfdff;
  color: var(--asset-muted);
  font-size: 13px;
}
.asset-disclosure strong { color: var(--asset-ink); }
.asset-live-region { min-height: 0; margin-top: -10px; color: #177245; font-size: 13px; }

.asset-group-list { gap: 10px; }
.asset-group {
  border-color: var(--asset-line);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(21, 34, 56, .025);
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.asset-group:hover { border-color: #bdc9da; box-shadow: 0 8px 20px rgba(21, 34, 56, .045); }
.asset-group > summary {
  grid-template-columns: minmax(0, 1fr) minmax(300px, .68fr);
  gap: 20px;
  min-height: 0;
  padding: 15px 18px;
}
.asset-group[open] > summary { border-bottom-color: var(--asset-line); background: #f9fbff; }
.asset-group-heading { grid-template-columns: 20px minmax(0, 1fr); align-items: center; gap: 12px; }
.asset-group-copy { display: grid; gap: 6px; min-width: 0; }
.asset-group-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; color: var(--asset-muted); font-size: 12px; }
.asset-group-meta > span:last-child { overflow-wrap: anywhere; }
.asset-group-heading strong { color: var(--asset-ink); font-size: 16px; line-height: 1.35; letter-spacing: -.012em; }
.asset-source { min-width: auto; padding: 3px 7px; border-radius: 5px; font-size: 10px; letter-spacing: .08em; }
.asset-source-external { background: #eef4ff; color: #285dbb; }
.asset-source-manual { background: #e8f7f1; color: #176e50; }
.asset-group-select, .asset-row-select { width: 17px; height: 17px; accent-color: var(--asset-accent); }
.asset-group-summary { grid-template-columns: minmax(130px, 1fr) auto 14px; gap: 12px; }
.asset-progress { gap: 6px; }
.asset-progress strong { color: #546178; font-size: 12px; }
.asset-progress-track { height: 5px; background: #e7ebf2; }
.asset-progress-track span { background: var(--asset-accent); }
.asset-status { min-height: 28px; padding: 4px 8px; font-size: 11px; }
.asset-chevron { width: 8px; height: 8px; border-width: 1.5px; }

.asset-group-body { gap: 14px; padding: 18px; background: #fcfdff; }
.asset-group-context { gap: 10px; }
.asset-group-context > div { padding: 13px 14px; border: 1px solid #e5eaf2; border-radius: 10px; background: #fff; }
.asset-group-context span { color: #69768c; font-size: 10px; letter-spacing: .08em; }
.asset-group-context p { color: var(--asset-ink); font-size: 14px; line-height: 1.55; }
.asset-group-context a { color: #285dbb; }
.asset-group-actions { gap: 8px; padding-top: 2px; }
.asset-group-actions .asset-button { min-height: 40px; padding: 8px 12px; font-size: 13px; }

.asset-table { overflow-x: auto; overscroll-behavior-inline: contain; border-color: #e0e6ef; border-radius: 10px; scrollbar-color: #b8c5d9 transparent; }
.asset-table-head { padding: 10px 14px; background: #f5f7fb; color: #66738a; font-size: 10px; letter-spacing: .06em; }
.asset-table-head, .asset-table-row { grid-template-columns: 26px 36px minmax(178px, 1.25fr) minmax(128px, .82fr) minmax(104px, .5fr) minmax(126px, .62fr); gap: 10px; min-width: 700px; }
.asset-table-row { padding: 13px 12px; background: #fff; }
.asset-table-row:hover { background: #fbfcff; }
.asset-table-row > div > strong, .asset-row-copy > strong { color: var(--asset-ink); }
.asset-order { width: 30px; height: 30px; border-radius: 8px; background: #eef4ff; color: #285dbb !important; }
.asset-reference-thumb { width: 32px; height: 40px; border-radius: 6px; }
.asset-prompt-type { color: #526078 !important; font-size: 10px; }
.asset-row-action { gap: 6px; }
.asset-row-action .asset-button { min-height: 38px; padding: 8px 7px; font-size: 12px; overflow-wrap: anywhere; }
.asset-inline-error { border-radius: 0 7px 7px 0; }

/* Preserve the comparison table on wide screens; below this point a row is a
   readable card so the actions never disappear beyond a clipped sixth column. */
@media (max-width: 1180px) {
  .asset-table { overflow: visible; }
  .asset-table-head { display: none; }
  .asset-table-row {
    grid-template-columns: 26px 36px minmax(0, 1fr);
    grid-template-areas:
      "select order copy"
      "select status status"
      "select prompt prompt"
      "select actions actions";
    min-width: 0;
    gap: 12px;
    padding: 16px;
  }
  .asset-table-row > :nth-child(1) { grid-area: select; align-self: start; }
  .asset-table-row > :nth-child(2) { grid-area: order; }
  .asset-table-row > :nth-child(3) { grid-area: copy; }
  .asset-table-row > :nth-child(4) { grid-area: prompt; }
  .asset-table-row > :nth-child(5) { grid-area: status; }
  .asset-table-row > :nth-child(6) { grid-area: actions; }
  .asset-row-action {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    padding-top: 2px;
  }
  .asset-row-action .asset-button { min-height: 44px; padding: 10px 12px; }
}

.asset-state-card { border-color: var(--asset-line); border-radius: 14px; background: #fff; }
.asset-dialog { border-color: #d4dce8; box-shadow: 0 28px 80px rgba(20, 32, 51, .24); }
.asset-dialog::backdrop { background: rgba(13, 23, 39, .55); }
.asset-draft-row, .asset-prompt-card { border-color: var(--asset-line); }
.asset-draft-row { background: #fff; }
.asset-draft-prompt-preview, .asset-row-editor, .asset-prompt-reference, .asset-confirm-summary { border-color: #d8e5fb; background: #f6f9ff; }
.asset-source-controls { border-color: var(--asset-line); background: #fafbfd; }
.asset-source-paste { border-color: #b9c8df; background: #f8fbff; }

@media (max-width: 1120px) {
  .asset-toolbar-title { align-items: flex-start; flex-direction: column; }
  .asset-toolbar-actions { justify-content: flex-start; }
  .asset-group > summary { grid-template-columns: 1fr; gap: 14px; }
}

@media (max-width: 800px) {
  .asset-studio { gap: 16px; }
  .asset-toolbar { padding-top: 0; }
  .asset-toolbar h2 { font-size: 26px; }
  .asset-toolbar-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .asset-toolbar-actions .asset-button { width: 100%; }
  .asset-toolbar-actions .asset-button-primary { grid-column: 1 / -1; }
  .asset-operation-guide summary { grid-template-columns: 10px minmax(0, 1fr); }
  .asset-operation-summary-status { display: none; }
  .asset-operation-detail { display: grid; gap: 7px; padding-left: 32px; }
  .asset-operation-status { white-space: normal; }
  .asset-filters { grid-template-columns: 1fr 1fr; padding: 12px; }
  .asset-checkbox { align-self: stretch; }
  .asset-group > summary { padding: 15px; }
  .asset-group-summary { grid-template-columns: minmax(120px, 1fr) auto 14px; }
  .asset-group-body { padding: 15px; }
  .asset-table-row { background: #fff; box-shadow: 0 1px 2px rgba(21, 34, 56, .03); }
  .asset-table-row > div::before { color: #6b778b; }
}

@media (max-width: 520px) {
  .asset-toolbar-actions, .asset-filters { grid-template-columns: 1fr; }
  .asset-toolbar-actions .asset-button-primary { grid-column: auto; }
  .asset-operation-guide summary { min-height: 44px; padding: 10px 12px; }
  .asset-operation-guide small { white-space: normal; }
  .asset-group-heading { gap: 10px; }
  .asset-group-meta { gap: 6px; }
  .asset-group-summary { grid-template-columns: 1fr auto; row-gap: 9px; }
  .asset-group-summary .asset-status { grid-column: 1; }
  .asset-chevron { grid-column: 2; grid-row: 1 / span 2; }
  .asset-group-actions .asset-button { width: 100%; min-height: 44px; }
  .asset-group-body { padding: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .asset-group, .asset-button, .asset-link-button, .asset-dialog-close { transition: none; }
}