.workshop-modal { width: min(1080px, calc(100vw - 32px)); max-width: none; max-height: calc(100dvh - 32px); overflow: auto; padding: 28px; }
.workshop-modal h3 { font-size: 1rem; margin: 18px 0 12px; }
.workshop-modal .form-error:empty { display: none; }
.workshop-intro, .workshop-muted { color: var(--text-soft); font-size: .9rem; overflow-wrap: anywhere; }
.workshop-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.workshop-list { display: grid; gap: 12px; }
.workshop-card { padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); min-width: 0; overflow-wrap: anywhere; }
.workshop-card h4 { margin: 0 0 6px; font-size: 1rem; }
.workshop-card p { margin: 6px 0 14px; color: var(--text-soft); font-size: .9rem; }
.workshop-toolbar, .workshop-card-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.workshop-card-actions button { padding: 6px 12px; font-size: .875rem; }
.workshop-section { border-top: 1px solid var(--line); margin-top: 24px; padding-top: 18px; }
.workshop-modal summary { cursor: pointer; min-height: 44px; padding: 8px 0; font-weight: 650; }
.workshop-modal summary:focus-visible, .workshop-modal select:focus-visible { outline: 3px solid var(--ring); outline-offset: 3px; }
.workshop-form { display: grid; gap: 8px; margin-top: 24px; padding: 16px; border: 1px solid var(--line); border-radius: 12px; }
.workshop-form input, .workshop-form textarea, .workshop-form select { min-width: 0; width: 100%; padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--bg); color: var(--text); font: inherit; }
.workshop-form textarea { resize: vertical; }
.workshop-form label { color: var(--text-soft); font-size: .9rem; }
.workshop-form button { justify-self: start; margin-top: 8px; }
.workshop-warning { padding: 14px; background: rgba(245,158,11,.09); border: 1px solid rgba(245,158,11,.3); border-radius: 10px; color: #fde68a; }
.workshop-modal pre { max-height: 340px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; background: var(--bg-deep); padding: 16px; border-radius: 10px; font-size: .8rem; color: var(--text-soft); }
.workshop-frame { width: 100%; height: min(60dvh, 620px); min-height: 280px; border: 1px solid var(--line-strong); border-radius: 12px; background: #fff; }
.workshop-hash { font: .75rem/1.5 monospace; overflow-wrap: anywhere; color: var(--muted); }
.workshop-shortcuts { margin-top: 24px; }
.workshop-shortcuts h2 { font-size: .95rem; }
.workshop-shortcuts p { font-size: .8rem; color: var(--muted); }
#pageShortcuts { display: grid; gap: 8px; }
#workshopCount { border-radius: 99px; background: var(--primary); color: white; padding: 1px 7px; font-size: .8rem; }
.workshop-modal button:disabled { opacity: .5; cursor: not-allowed; }
.tool-modal { width: min(1400px, calc(100vw - 24px)); }
.tool-modal .workshop-frame { height: 70dvh; }
@media (max-width: 650px) {
  .workshop-columns { grid-template-columns: 1fr; gap: 8px; }
  .workshop-modal { padding: 18px; width: calc(100vw - 16px); max-height: calc(100dvh - 16px); }
  #openWorkshop { padding: 0 10px; font-size: .8rem; }
  .topbar { padding-inline: 12px; }
  .topbar .status-pill { display: none; }
  .brand small { display: none; }
}
@media (prefers-reduced-motion: reduce) { .workshop-modal * { animation: none !important; transition: none !important; } }