.workspace-shell { max-width: 1120px; margin: 36px auto 80px; padding: 0 24px; }
.workspace-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.workspace-heading h1 { font-size: clamp(2rem, 5vw, 3.2rem); margin: 8px 0; }
.workspace-panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 24px; margin: 24px 0; }
.workspace-panel h2 { margin-top: 0; }
.workspace-panel p { line-height: 1.6; color: var(--ink-soft); }
.workspace-panel form { display: flex; gap: 12px; align-items: end; flex-wrap: wrap; margin: 18px 0; }
.workspace-panel input:not([type="checkbox"]), .workspace-panel select { max-width: 100%; border: 1px solid var(--line-dark); border-radius: 8px; padding: 11px; background: white; color: var(--ink); font: inherit; }
.workspace-panel label { display: flex; flex-direction: column; gap: 6px; }
#activation-form { align-items: center; }
#access-code { flex: 1; min-width: 200px; }
#provider-options { width: 100%; display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; border: 0; padding: 12px 0; }
#provider-options label { flex-direction: row; align-items: center; }
#provider-options input { width: 18px; height: 18px; accent-color: var(--green); }
#watch-count { width: 100%; margin: 0; }
.provider-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 16px; margin-top: 20px; }
.provider-card { border: 1px solid var(--line); padding: 18px; border-radius: 12px; overflow-wrap: anywhere; }
.provider-card h3 { margin: 0; }
.provider-card ul { padding-left: 20px; max-height: 220px; overflow: auto; }
.workspace-panel summary { cursor: pointer; padding: 10px 0; font-weight: 600; }
.event-row { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; border-top: 1px solid var(--line); padding: 18px 0; }
.event-row p { margin: 4px 0; }
.event-row button { text-align: left; }
.incident-detail { border-top: 2px solid var(--green); padding-top: 24px; margin-top: 24px; scroll-margin-top: 20px; overflow-wrap: anywhere; }
.incident-update { border-left: 2px solid var(--line-dark); padding: 4px 0 4px 18px; margin: 18px 0; }
.incident-update p { white-space: pre-wrap; }
.workspace-panel pre { white-space: pre-wrap; overflow-wrap: anywhere; background: var(--paper); padding: 16px; border-radius: 10px; }
#api-keys { padding: 0; list-style: none; }
#api-keys li { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
#new-key { padding: 16px; border: 1px solid var(--green); border-radius: 10px; }
#key-value { display: block; width: 100%; margin: 10px 0; font-family: monospace; }
#workspace-message { min-height: 24px; overflow-wrap: anywhere; }
#workspace-message[data-error="true"] { color: var(--red); }
@media (max-width: 600px) { .workspace-shell { padding: 0 16px; } .workspace-panel { padding: 18px; } .workspace-panel form { align-items: stretch; flex-direction: column; } .workspace-panel button { max-width: 100%; } .site-header { gap: 12px; flex-wrap: wrap; } .site-nav { flex-wrap: wrap; } }