.task-modal {
  width: min(1040px, calc(100vw - 40px));
  max-width: calc(100vw - 40px);
  max-height: calc(100dvh - 40px);
  background: var(--panel);
  color: var(--ink);
  border: 1px solid var(--line);
}
.task-modal.maximized {
  width: calc(100vw - 32px);
  max-width: calc(100vw - 32px);
  max-height: calc(100dvh - 32px);
}
.task-modal form.task-form {
  display: flex;
  flex-direction: column;
  height: min(860px, calc(100dvh - 42px));
  max-height: none;
  padding: 0;
  overflow: hidden;
}
.task-modal.maximized form.task-form { height: calc(100dvh - 34px); }
.task-modal .modal-header {
  flex: 0 0 auto;
  align-items: center;
  margin: 0;
  padding: 18px 24px;
  border-bottom: 1px solid var(--line);
  background: var(--panel);
}
.task-modal .modal-header .eyebrow { font-size: 10px; margin-bottom: 4px; }
.task-modal .modal-header h2 { font-size: 18px; line-height: 1.4; }
.task-modal .modal-header-actions { gap: 8px; }
.task-modal .modal-header-actions .icon-button { width: 34px; height: 34px; min-height: 34px; }
.task-dialog-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}
.task-main.form-grid { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 24px; min-width: 0; padding: 24px; }
.task-modal .field { min-width: 0; gap: 8px; }
.task-modal .field > span, .task-modal .field-toolbar-label > span, .sv-field-label { font-size: 12px; font-weight: 600; color: var(--muted); }
.task-modal .field input, .task-modal .field select, .task-modal .field textarea { width: 100%; min-width: 0; border-radius: 5px; font-size: 13px; }
.task-modal .field input, .task-modal .field select { min-height: 40px; }
.task-modal .task-title-field input { min-height: 46px; font-size: 19px; font-weight: 600; }
.task-details { min-width: 0; padding: 24px 20px; border-left: 1px solid var(--line); background: var(--bg); }
.task-details-inner { position: sticky; top: 24px; display: grid; gap: 18px; }
.task-details h3 { margin: 0 0 2px; font-size: 13px; font-weight: 700; }
.task-modal .rich-field { display: block; }
.task-modal .field-toolbar-label { margin-bottom: 10px; min-height: 28px; }
.task-modal .field-toolbar-label .mini-icon { width: 28px; height: 28px; min-height: 28px; background: transparent; }
.task-modal .ql-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 8px; }
.task-modal .ql-toolbar .ql-formats { display: inline-flex; flex-wrap: wrap; align-items: center; max-width: 100%; row-gap: 4px; margin: 0 6px 0 0; }
.task-modal .ql-toolbar button { width: 28px; height: 28px; min-height: 28px; border-radius: 3px; }
.task-modal .ql-toolbar button:hover, .task-modal .ql-toolbar button:focus-visible { background: var(--panel); }
.task-modal .ql-toolbar .ql-picker { height: 28px; font-size: 12px; }
.task-modal .ql-toolbar .ql-picker-label { display: flex; align-items: center; }
.task-modal .ql-toolbar .ql-picker:not(.ql-color-picker):not(.ql-icon-picker) .ql-picker-label { padding-right: 18px; }
.task-modal .ql-toolbar .ql-picker-options { min-width: 110px; }
.task-modal .rich-field .ql-container { height: auto; }
.task-modal .rich-field .ql-editor.html-editor { height: auto; min-height: 280px; max-height: none; padding: 18px; font-size: 14px; line-height: 1.7; }
.editor-history-icon { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.task-modal.maximized .rich-field .ql-editor.html-editor { min-height: 360px; }
.task-modal .task-subtasks-toggle { min-height: 30px; font-size: 13px; margin: 0; }
.task-modal .task-children-panel { margin: 0; border: 0; border-radius: 0; border-top: 1px solid var(--line); padding: 20px 0 0; background: transparent; }
.task-modal .task-children-header { flex-wrap: wrap; }
.task-modal .task-child-row { border-radius: 5px; }
.task-modal .sv-fields { padding-top: 20px; }
.task-modal .sv-fields > .check-field { justify-content: space-between; flex-direction: row-reverse; margin: 0 0 18px; min-height: 28px; color: var(--ink); font-size: 14px; }
.task-modal .sv-fields > .check-field input { appearance: none; position: relative; flex: 0 0 34px; width: 34px; height: 20px; margin: 0; border: 1px solid var(--line); border-radius: 12px; background: var(--panel-muted); cursor: pointer; }
.task-modal .sv-fields > .check-field input::after { content: ''; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--muted); transition: transform 120ms ease; }
.task-modal .sv-fields > .check-field input:checked { border-color: var(--accent); background: var(--accent); }
.task-modal .sv-fields > .check-field input:checked::after { background: var(--panel); transform: translateX(14px); }
.task-modal .sv-fields > .check-field input:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.sv-upload-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.sv-upload-control { position: relative; display: inline-flex; align-items: center; gap: 7px; cursor: pointer; }
.sv-upload-control:focus-within { outline: 2px solid var(--accent); outline-offset: 3px; }
.sv-file-input { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.task-modal .sv-fields [data-sv-details] { gap: 16px; }
.task-modal .sv-upload-status:empty, .task-modal .sv-media-list:empty { display: none; }
.task-modal .sv-fields textarea { min-height: 112px; line-height: 1.6; }
.task-modal .sv-media-item { border-radius: 5px; }
.task-modal .modal-actions { flex: 0 0 auto; margin: 0; padding: 14px 24px; border-top: 1px solid var(--line); background: var(--panel); }
.task-modal .modal-actions .action-group { margin-left: auto; }
.task-modal .modal-actions button { min-height: 38px; font-size: 13px; }
.sv-leave-dialog { color: var(--ink); background: var(--panel); border: 1px solid var(--line); }
.sv-leave-content h2 { margin-bottom: 10px; font-size: 18px; }
.sv-leave-content p { color: var(--muted); font-size: 14px; line-height: 1.6; }
@media (max-width: 760px) {
  .task-modal, .task-modal.maximized { width: calc(100vw - 24px); max-width: calc(100vw - 24px); max-height: calc(100dvh - 24px); }
  .task-modal form.task-form, .task-modal.maximized form.task-form { height: calc(100dvh - 26px); }
  .task-modal .modal-header { padding: 16px; }
  .task-modal .modal-header h2 { font-size: 16px; }
  .task-modal .modal-header-actions { gap: 4px; }
  .task-dialog-body { display: flex; flex-direction: column; gap: 22px; padding: 18px 16px; }
  .task-main.form-grid { display: contents; }
  .task-modal .task-title-field { order: 0; }
  .task-details { order: 1; padding: 0; border: 0; background: transparent; }
  .task-details-inner { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .task-details h3 { display: none; }
  .task-modal .rich-field { order: 2; }
  .task-modal .task-subtasks-toggle { order: 3; }
  .task-modal .task-children-panel { order: 4; }
  .task-modal .sv-fields { order: 5; }
  .task-modal .task-title-field input { font-size: 16px; }
  .task-modal .rich-field .ql-editor.html-editor { min-height: 240px; }
  .task-modal .modal-actions { flex-direction: row; padding: 12px 16px; gap: 8px; }
  .task-modal .modal-actions .action-group { gap: 8px; }
  .task-modal .modal-actions button { padding-left: 12px; padding-right: 12px; }
  .sv-leave-actions { flex-direction: column; }
  .sv-leave-actions button { flex: 0 0 auto; width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .task-modal .sv-fields > .check-field input::after { transition: none; } }