/* Shared parts for the photo studio tools (Retro Time Machine, Make It Look Real, Vision Board, ...). */
.st-top { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: 22px; margin-bottom: 22px; }
.st-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; padding: 20px; border-radius: 18px; background: var(--bg-card-subtle); }
.st-field { display: flex; flex-direction: column; gap: 7px; margin: 0; padding: 0; border: 0; min-width: 0; }
.st-field > legend { padding: 0; margin-bottom: 7px; font-size: 13px; font-weight: 600; color: var(--ink-secondary); }
.st-label { margin: 0; font-size: 13px; font-weight: 600; color: var(--ink-secondary); }
.st-field input, .st-field textarea { width: 100%; min-height: 44px; padding: 10px 12px; border-radius: 11px; border: 1px solid var(--border-line); background: var(--bg-card); color: var(--ink-primary); font: 400 16px/1.45 var(--font-body); box-sizing: border-box; }
.st-field textarea { resize: vertical; }

.st-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.st-chip { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1.5px solid var(--border-line); background: var(--bg-card); color: var(--ink-primary); font: 600 14px/1.2 var(--font-body); cursor: pointer; }
.st-chip:hover { border-color: var(--outline-strong); }
.st-chip[aria-pressed="true"] { border-color: var(--st-c, var(--ink-primary)); background: var(--st-c, var(--ink-primary)); color: var(--st-on, var(--bg-paper)); }
.st-seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; padding: 4px; border-radius: 14px; background: var(--bg-card); border: 1px solid var(--border-line); }
.st-seg .st-chip { justify-content: center; border: 0; border-radius: 10px; font: 800 17px/1 var(--font-display); }

.st-out { display: flex; flex-direction: column; gap: 12px; padding: 18px; border-radius: 18px; border: 1px solid var(--border-line); background: var(--bg-card); }
.st-out-h { margin: 0; font: 700 19px/1.25 var(--font-display); color: var(--ink-primary); }
.st-out pre { margin: 0; padding: 14px; border-radius: 12px; background: var(--bg-card-subtle); color: var(--ink-primary); font: 400 15px/1.6 var(--font-body); white-space: pre-wrap; overflow-wrap: anywhere; }
.st-out pre mark { background: var(--accent-light); color: var(--accent-ink); border-radius: 5px; padding: 0 3px; font-weight: 600; }
.st-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.st-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 44px; padding: 0 16px; border-radius: 12px; border: 1px solid var(--border-line); background: var(--bg-card); color: var(--ink-primary); font: 600 14.5px/1.2 var(--font-body); text-decoration: none; cursor: pointer; white-space: nowrap; }
.st-btn:hover { border-color: var(--outline-strong); }
.st-btn-go { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.st-btn-go:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.st-btn-ink { background: var(--ink-primary); border-color: var(--ink-primary); color: var(--bg-paper); }
.st-note { margin: 0; font-size: 12.5px; color: var(--ink-muted); }
.st-sub-h { margin: 26px 0 12px; font: 700 19px/1.25 var(--font-display); color: var(--ink-primary); }

.st-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.st-pc { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 14px; border: 1px solid var(--border-line); border-radius: 16px; background: var(--bg-card); }
.st-pc h4 { margin: 0; font: 700 16px/1.25 var(--font-display); color: var(--ink-primary); }
.st-pc p { flex: 1; margin: 0; font-size: 14px; line-height: 1.55; color: var(--ink-secondary); }
.st-pc .st-btn { align-self: flex-start; min-height: 40px; font-size: 14px; }

.st-links { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; margin: 14px 0; }
.st-link { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--border-line); border-radius: 16px; background: var(--bg-card); color: var(--ink-primary); text-decoration: none; }
.st-link:hover { border-color: var(--outline-strong); }
.st-link img { width: 100%; height: auto; aspect-ratio: 1200 / 630; object-fit: cover; display: block; }
.st-link b { padding: 10px 12px 12px; font: 700 15px/1.3 var(--font-display); }

@media (max-width: 860px) {
  .st-top { grid-template-columns: 1fr; }
  .st-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .st-side { padding: 16px; }
  .st-acts .st-btn { flex: 1 1 100%; }
}
.st-top > figure { align-self: start; }