/* Global WPA workspace refinements */
:root {
  --wi-space-1: 6px;
  --wi-space-2: 10px;
  --wi-space-3: 14px;
  --wi-space-4: 18px;
  --wi-space-5: 24px;
}

.brand .brand-logo.dark {
  display: none !important;
}

.brand .brand-logo.light {
  display: block !important;
}

[data-variant="v3"] .brand .brand-logo.light {
  display: none !important;
}

[data-variant="v3"] .brand .brand-logo.dark {
  display: block !important;
}

.app[data-sidebar-collapsed] .brand .brand-logo {
  display: none !important;
}

.brand-logo-closed {
  display: none;
  height: 30px;
  object-fit: contain;
  width: 36px;
}

.app[data-sidebar-collapsed] .brand {
  flex-direction: column;
  gap: 8px;
}

.app[data-sidebar-collapsed] .brand .brand-logo-closed.light {
  display: block !important;
}

[data-variant="v3"] .app[data-sidebar-collapsed] .brand .brand-logo-closed.light {
  display: none !important;
}

[data-variant="v3"] .app[data-sidebar-collapsed] .brand .brand-logo-closed.dark {
  display: block !important;
}

.pages {
  padding: 24px;
}

.page-head {
  align-items: center;
  margin-bottom: 20px;
  min-height: 52px;
}

.page-head > div:first-child {
  min-width: 0;
}

.page-head-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}

.profile-tabs {
  margin-top: -2px;
  flex-wrap: wrap;
  overflow: visible;
  scrollbar-width: none;
}

.profile-tabs::-webkit-scrollbar,
html[data-page="profile"] .main::-webkit-scrollbar {
  display: none;
  height: 0;
  width: 0;
}

html[data-page="profile"] .main {
  scrollbar-width: none;
}

body {
  font-size: var(--wdesk-base-font-size, 13.5px);
}

button:not(.iconbtn):not(.brand-collapse):not(.nav-item):not(.timer-btn):not(.profile-chip) {
  font-size: var(--wdesk-button-font-size, 14px);
}

.spec-modebar {
  display: none !important;
}

.spec-document-select,
[data-spec-layout-switch] {
  display: none !important;
}

.spec-block-actions {
  display: none;
}

.spec-blocks-card {
  overflow: hidden;
}

.spec-client-preview {
  gap: 6px;
  padding: 10px 12px;
}

.spec-mini-stats {
  display: flex;
  gap: 8px;
  margin: 10px 0;
}

.spec-block-toggles {
  display: grid;
  gap: 7px;
  max-height: 320px;
  overflow: auto;
  padding-right: 3px;
}

.spec-block-toggle {
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 12px;
  display: grid;
  gap: 8px;
  grid-template-columns: 18px minmax(0, 1fr);
  min-height: 36px;
  padding: 8px 10px;
}

.spec-block-toggle span {
  line-height: 1.25;
  min-width: 0;
}

.spec-right {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.spec-output {
  max-height: calc(100vh - 300px);
  overflow: auto;
  scroll-behavior: smooth;
}

.spec-output-section {
  border: 1px solid transparent;
  border-radius: 15px;
  margin: 0 0 12px;
  padding: 14px 16px;
  transition: background .18s ease, border-color .18s ease;
}

.spec-output-section h4 {
  color: var(--accent);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
  margin: 0 0 10px;
}

.spec-output-section p {
  margin: 0 0 10px;
}

.spec-output ::selection {
  background: rgba(0, 174, 239, .42);
  color: #fff;
}

.spec-output-section p:last-child {
  margin-bottom: 0;
}

.spec-output-section [data-manual-edited] {
  border-left: 2px solid rgba(148, 163, 184, .45);
  padding-left: 10px;
}

.spec-output [data-spec-focus],
.spec-output-section[data-spec-focus] {
  background: transparent;
  border-color: inherit;
  outline: 0;
}

.spec-output [data-spec-line][data-spec-focus] > [data-spec-line-text],
.spec-output [data-spec-line][data-spec-selected-text] > [data-spec-line-text] {
  background: rgba(0, 174, 239, 0.08);
  border-radius: 6px;
  box-shadow: inset 2px 0 0 rgba(0, 174, 239, 0.7);
  color: var(--text);
  padding: 1px 4px 1px 6px;
}

.spec-var-pill {
  align-items: center;
  border: 1px solid rgba(34, 197, 94, .34);
  border-radius: 999px;
  color: #22c55e;
  display: inline-flex;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  margin-left: 6px;
  padding: 3px 7px;
  vertical-align: middle;
  white-space: nowrap;
}

.spec-var-pill::before {
  content: attr(data-label);
}

.spec-var-pill[data-filled="0"] {
  border-color: rgba(248, 113, 113, .42);
  color: #f87171;
}

.spec-missing-line {
  align-items: center;
  border: 1px dashed rgba(248, 113, 113, .32);
  border-radius: 12px;
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 12px;
}

.spec-missing-line > span {
  color: #f87171;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.spec-missing-line > strong {
  color: var(--text);
}

.spec-other-panel {
  background: rgba(255,255,255,.025);
  border: 1px solid var(--line);
  border-radius: 15px;
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(0, 1fr);
  margin-top: 10px;
  padding: 10px;
}

.spec-other-panel label {
  display: grid;
  gap: 6px;
  margin: 0;
}

.spec-other-panel label span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.spec-other-panel input {
  margin: 0;
}

@media (max-width: 760px) {
  .spec-other-panel {
    grid-template-columns: 1fr;
  }
}

.spec-grid[data-layout="output"] .spec-output {
  max-height: calc(100vh - 250px);
}

.spec-output [data-spec-focus] {
  background: transparent;
  outline: 0;
}

.spec-drafts-modal {
  width: min(760px, 100%);
}

.spec-draft-list {
  display: grid;
  gap: 10px;
  padding: 20px;
}

.spec-draft-row {
  align-items: center;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 15px;
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 12px;
}

.spec-draft-row.current {
  border-color: rgba(0, 180, 255, 0.35);
}

.spec-draft-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.spec-draft-row.disabled {
  opacity: .55;
}

.spec-draft-row strong,
.spec-draft-row span {
  display: block;
}

.spec-draft-row span {
  color: var(--muted);
  font-size: 12px;
}

[data-spec-readonly] [data-spec-layout-switch],
[data-spec-readonly] [data-spec-save-draft],
[data-spec-readonly] [data-spec-save-client],
[data-spec-readonly] [data-spec-regenerate],
[data-spec-readonly] [data-spec-save-preview] {
  display: none !important;
}

[data-spec-readonly] .spec-output {
  cursor: default;
  user-select: text;
}

.profile-grid > [data-tab-panel] {
  display: none;
}

.profile-grid > [data-tab-panel][data-active] {
  display: block;
}

.profile-grid > [data-tab-panel="profile-account"][data-active],
.profile-grid > [data-tab-panel="profile-notifications"][data-active],
.profile-grid > [data-tab-panel="profile-appearance"][data-active] {
  grid-column: 1 / -1;
}

.notes-list-head {
  align-items: center;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 15px;
  display: flex;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
  padding: 12px 16px;
}

.notes-list-head strong {
  color: var(--text);
  display: block;
  font-size: 15px;
  font-weight: 600;
}

.notes-list-head-meta {
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 12px;
}

.notes-list-head-meta span {
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 10px;
}

.note-card-head {
  align-items: flex-start !important;
  border-bottom: 1px solid var(--line);
  display: grid !important;
  gap: 10px !important;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  padding-bottom: 10px;
}

.note-card-title {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.note-card-title strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.note-card-title span {
  color: var(--muted);
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.note-card-head .badge {
  justify-self: end;
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.card,
.data,
.kpi,
.admin-card,
.admin-info-card,
.file-sidebar,
.file-detail,
.task-detail,
.lane,
.note,
.mail-preview,
.manual-editor {
  border-radius: 15px;
  box-shadow: none !important;
}

.card,
.admin-card,
.admin-info-card {
  padding: 20px;
}

.admin-support-grid {
  margin-top: 16px;
}

.admin-summary-compact {
  margin: 12px 0 0;
}

.admin-summary-compact article {
  padding: 10px 12px;
}

.admin-summary-compact strong {
  font-size: 18px;
  margin: 2px 0;
}

.admin-summary-compact span,
.admin-summary-compact i {
  font-size: 10px;
}

.card-head {
  gap: 12px;
  margin-bottom: 16px;
}

.card-head h2,
.admin-card > header strong,
.small-h,
.page-title {
  letter-spacing: 0;
}

.btn,
.btn.xs {
  min-height: 32px;
  padding: 5px 20px;
  font-size: 14px;
  line-height: 1.2;
  border-radius: 50px;
  white-space: nowrap;
}

.btn.ghost,
.btn.primary {
  justify-content: center;
}

.as-button {
  background: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
  font: inherit;
  padding: 0;
}

select.select,
.form-grid input,
.form-grid select,
.form-grid textarea,
.admin-form input,
.admin-form select,
.admin-form textarea,
.qfield input,
.qfield select,
.qfield textarea,
.mini-form input,
.mini-form select {
  min-height: 40px;
  border-radius: 15px;
}

.form-grid textarea {
  resize: vertical;
  width: 100%;
}

.tbl th,
.tbl td {
  vertical-align: middle;
}

.row-actions,
.form-actions,
.admin-actions {
  gap: 10px;
  flex-wrap: wrap;
}

.bulkbar {
  align-items: center;
  border-bottom: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 12px 20px;
}

.bulkbar .chk,
.vacation-entry label {
  align-items: center;
  display: inline-flex;
  gap: 8px;
}

.ops-list-controls {
  align-items: center;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 15px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 14px;
  padding: 12px 16px;
}

.ops-list-controls .chk {
  align-items: center;
  color: var(--text);
  display: inline-flex;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
}

.ops-list-controls .select {
  min-height: 40px;
}

.ops-pagination {
  border: 1px solid var(--line);
  border-radius: 15px;
  justify-content: flex-end;
  margin: -6px 0 14px;
}

.ops-pagination span {
  margin-right: auto;
}

.btn.danger,
.btn.ghost.danger,
.as-button.danger,
.task-play.danger {
  border-color: rgba(255, 107, 102, 0.28);
  color: var(--danger);
}

.task-detail[data-empty] {
  align-content: start;
}

.task-detail[data-empty] h3 {
  color: var(--muted);
}

.board[data-task-view="list"] {
  display: block;
}

.task-list-panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 15px;
  overflow: hidden;
}

.task-list-table td {
  vertical-align: middle;
}

.task-list-table tr[data-task-id] {
  cursor: pointer;
}

.task-list-table tr[data-selected] td {
  background: var(--accent-soft);
}

.card-check {
  align-items: center;
  display: inline-flex;
  gap: 6px;
}

.task-card .card-check {
  position: absolute;
  right: 12px;
  top: 12px;
  z-index: 1;
}

.task-card {
  position: relative;
}

.board[data-task-view="kanban"] .task-card {
  cursor: grab;
  transition: border-color .16s ease, opacity .16s ease, transform .16s ease, background-color .16s ease;
}

.board[data-task-view="kanban"] .task-card:active {
  cursor: grabbing;
}

.board[data-task-view="kanban"] .task-card.is-dragging {
  opacity: .5;
  transform: scale(.985);
}

.board[data-task-view="kanban"] .lane {
  transition: background-color .16s ease, border-color .16s ease;
}

.board[data-task-view="kanban"] .lane.is-drop-target {
  background: rgba(0, 174, 239, .07);
  border-color: rgba(0, 174, 239, .74);
}

.board[data-task-view="kanban"] .lane.is-drop-same {
  background: var(--panel-2);
  border-color: var(--line-strong);
}

[data-theme="light"] .board[data-task-view="kanban"] .lane.is-drop-target {
  background: rgba(0, 132, 204, .08);
  border-color: rgba(0, 132, 204, .55);
}

.task-card .task-card-head {
  padding-right: 30px;
}

.task-card .task-card-actions-row {
  align-items: center;
  border-top: 1px solid var(--line);
  display: flex;
  gap: 10px;
  justify-content: space-between;
  margin-top: 2px;
  padding-top: 10px;
}

.task-card-owner,
.task-card-actions {
  align-items: center;
  display: inline-flex;
  gap: 8px;
  min-width: 0;
}

.task-card-owner {
  color: var(--muted);
  flex: 1 1 auto;
  font-size: 12px;
}

.task-card-owner > span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.task-card-actions {
  flex: 0 0 auto;
  justify-content: flex-end;
}

.task-card .task-play {
  align-items: center;
  display: inline-flex;
  justify-content: center;
  min-height: 32px;
  min-width: 74px;
  padding: 5px 14px;
  font-size: 14px;
  line-height: 1.2;
  white-space: nowrap;
}

.task-detail-actions {
  align-items: center;
  justify-content: flex-end;
  margin-top: 16px;
}

.task-detail-actions .btn {
  flex: 0 0 auto;
}

.task-list-table .row-actions {
  align-items: center;
  display: inline-flex;
  gap: 8px;
  justify-content: flex-end;
  min-width: 170px;
}

.task-list-table .row-actions .btn {
  min-width: 78px;
}

@media (max-width: 1420px) {
  .task-card .task-card-actions-row {
    align-items: stretch;
    flex-direction: column;
  }

  .task-card-actions {
    justify-content: stretch;
  }

  .task-card .task-play {
    flex: 1 1 0;
  }
}

.note header .card-check {
  margin-right: 4px;
}

.page[data-page="notes"] .ops-list-controls {
  background: color-mix(in srgb, var(--panel-2) 86%, var(--bg));
  border-color: var(--line-strong);
  margin-bottom: 18px;
  padding: 14px 16px 14px 18px;
  position: relative;
}

.page[data-page="notes"] .ops-list-controls::before {
  background: var(--muted);
  border-radius: 999px;
  content: "";
  height: calc(100% - 24px);
  left: 8px;
  opacity: .42;
  position: absolute;
  top: 12px;
  width: 3px;
}

.page[data-page="notes"] .ops-list-controls .chk {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 999px;
  min-height: 38px;
  padding: 0 14px;
}

.page[data-page="notes"] .ops-list-controls .chk input[type="checkbox"] {
  height: 16px;
  width: 16px;
}

.page[data-page="offers"] .tbl td {
  padding-bottom: 12px;
  padding-top: 12px;
}

.offer-title-cell {
  max-width: 560px;
  min-width: 280px;
}

.offer-title-cell strong,
.offer-summary,
.offer-amount {
  display: block;
}

.offer-title-cell strong {
  color: var(--text);
  font-size: 14px;
  line-height: 1.3;
  margin-bottom: 5px;
}

.offer-summary {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
  max-width: 62ch;
}

.offer-amount {
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--text);
  font-size: 11px;
  font-weight: 600;
  margin-top: 8px;
  padding: 4px 10px;
  width: fit-content;
}

.offer-actions {
  gap: 8px;
}

.offer-actions .btn.xs {
  min-width: 90px;
  padding-left: 12px;
  padding-right: 12px;
}
.offer-actions a.btn { text-decoration: none; }

.file-workspace.file-workspace-simple {
  grid-template-columns: minmax(0, 1fr) 340px;
}

.file-workspace-simple .file-main {
  min-width: 0;
}

.page[data-page="files"] [data-file-project-filter] {
  min-width: 220px;
}

.page[data-page="files"] .file-toolbar {
  flex-wrap: wrap;
  justify-content: flex-start;
}

.page[data-page="files"] .file-toolbar .search {
  flex: 1 1 320px;
  max-width: 420px;
  min-width: 240px;
}

.page[data-page="files"] .file-type-filter {
  min-width: 170px;
}

.file-row {
  grid-template-columns: auto 40px minmax(0, 1fr) auto auto;
}

.file-row > input[type="checkbox"] {
  justify-self: center;
}

.file-icon {
  flex-direction: column;
  gap: 2px;
  letter-spacing: .02em;
  overflow: hidden;
}

.file-row .file-icon,
.file-row .file-thumb {
  border-radius: 10px;
  height: 34px;
  width: 34px;
}

.file-icon svg {
  fill: none;
  height: 18px;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
  width: 18px;
}

.file-icon span {
  display: block;
  font-size: 8px;
  line-height: 1;
}

.file-icon.large {
  gap: 4px;
}

.file-icon.large svg {
  height: 24px;
  width: 24px;
}

.file-icon.large span {
  font-size: 10px;
}

.file-icon.file-kind-text {
  background: rgba(148, 163, 184, .16);
  color: #cbd5e1;
}

.file-icon.file-kind-document {
  background: rgba(59, 130, 246, .16);
  color: #bfdbfe;
}

.file-icon.file-kind-image {
  background: rgba(0, 174, 239, .16);
  color: #93dcff;
}

.file-icon.file-kind-video {
  background: rgba(217, 70, 239, .15);
  color: #f0abfc;
}

.file-icon.file-kind-archive {
  background: rgba(234, 179, 8, .15);
  color: #fde68a;
}

.file-icon.file-kind-other {
  background: rgba(255, 255, 255, .08);
  color: #d1d5db;
}

.file-thumb {
  align-items: center;
  background: #fff;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 12px;
  display: inline-flex;
  height: 42px;
  justify-content: center;
  overflow: hidden;
  width: 42px;
}

.file-thumb img {
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.file-thumb.large {
  border-radius: 15px;
  height: 58px;
  margin-bottom: 14px;
  width: 58px;
}

.file-row-actions {
  align-items: center;
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  justify-content: flex-end;
}

.file-row-actions .btn.xs {
  padding-left: 14px;
  padding-right: 14px;
}

.file-preview-slot {
  border: 1px solid var(--line);
  border-radius: 15px;
  background: var(--panel-2);
  display: none;
  margin: 14px 0;
  max-height: 360px;
  min-height: 120px;
  overflow: hidden;
}

.file-preview-slot.is-open {
  display: block;
}

.file-preview-slot img,
.file-preview-slot video,
.file-preview-slot iframe {
  background: #fff;
  border: 0;
  display: block;
  height: 360px;
  object-fit: contain;
  width: 100%;
}

.file-preview-slot iframe {
  object-fit: initial;
}

.file-preview-empty {
  align-items: center;
  color: var(--muted);
  display: flex;
  font-size: 13px;
  min-height: 120px;
  padding: 14px;
}

.agenda li {
  grid-template-columns: 64px 1px minmax(0, 1fr);
}

.meet-actions {
  flex-wrap: wrap;
}

.meet-actions .btn.xs {
  line-height: 1;
}

.devlog-live-item {
  grid-template-columns: auto minmax(220px, 0.42fr) minmax(0, 0.58fr);
}

.devlog-live-item .card-check {
  align-self: start;
  margin-top: 3px;
}

[data-variant="v3"] .task-list-panel {
  background: rgba(255, 255, 255, .025);
}

.vacation-summary {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: 14px;
}

.vacation-summary article,
.vacation-list article {
  border: 1px solid var(--line);
  border-radius: 15px;
  background: var(--panel-2);
}

.vacation-summary article {
  padding: 12px;
}

.vacation-summary span,
.vacation-list span {
  color: var(--muted);
  display: block;
  font-size: 12px;
}

.vacation-summary strong {
  display: block;
  font-size: 22px;
  font-weight: 600;
  margin-top: 4px;
}

.vacation-entry {
  grid-template-columns: 1.1fr .7fr .9fr 1.6fr auto;
  margin-top: 12px;
}

.vacation-list {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.page[data-page="attendance"] .mini-form {
  grid-template-columns: minmax(145px, 1fr) repeat(3, minmax(100px, .7fr));
}

.page[data-page="attendance"] .manual-grid {
  align-items: start;
  grid-template-columns: minmax(0, 1fr);
}

.page[data-page="attendance"] .manual-grid > .card {
  min-width: 0;
  overflow: hidden;
}

.page[data-page="attendance"] .mini-form > label,
.page[data-page="attendance"] .mini-form > button {
  min-width: 0;
}

.page[data-page="attendance"] .mini-form > label:nth-child(5) {
  grid-column: span 1;
}

.page[data-page="attendance"] .mini-form > label:nth-child(6) {
  grid-column: span 2;
}

.page[data-page="attendance"] .mini-form > button {
  justify-self: end;
  min-width: 132px;
  width: 100%;
}

.page[data-page="attendance"] .tbl.mini {
  table-layout: fixed;
}

.page[data-page="attendance"] .tbl.mini th:first-child,
.page[data-page="attendance"] .tbl.mini td:first-child {
  width: 46%;
}

.page[data-page="attendance"] .tbl.mini td {
  overflow: hidden;
  text-overflow: ellipsis;
}

.mini-check {
  align-items: center !important;
  flex-direction: row !important;
  gap: 8px !important;
  min-height: 40px;
  padding: 0 4px;
  text-transform: none !important;
}

.mini-check input {
  min-height: auto !important;
  width: auto;
}

.cal-day.is-selected {
  border-color: rgba(0, 195, 255, 0.72);
  background: rgba(0, 174, 239, 0.08);
}

.cal-day.is-day-off .day-bar b {
  background: linear-gradient(90deg, #18d38a, #00aeef);
}

.cal-day.has-overtime em::after {
  content: " +";
  color: var(--accent);
}

.attendance-day-panel {
  width: min(980px, 100%);
}

.attendance-day-grid {
  align-items: end;
}

.attendance-day-grid .switch-row {
  align-self: end;
  min-height: 42px;
  padding: 0 12px;
}

.attendance-entry-section {
  border: 1px solid var(--line);
  border-radius: 15px;
  background: color-mix(in srgb, var(--panel-2) 72%, transparent);
  display: grid;
  gap: 10px;
  padding: 14px;
}

.attendance-entry-head {
  align-items: center;
  display: flex;
  justify-content: space-between;
  gap: 14px;
}

.attendance-entry-head b {
  color: var(--text);
  display: block;
  font-size: 14px;
  font-weight: 600;
}

.attendance-entry-head span {
  color: var(--muted);
  display: block;
  font-size: 12px;
  margin-top: 3px;
}

.attendance-entry-labels,
.attendance-entry-row {
  display: grid;
  gap: 8px;
  grid-template-columns: 96px 96px minmax(150px, 190px) minmax(220px, 1fr) 58px 34px;
  align-items: center;
}

.attendance-entry-labels {
  color: var(--muted);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 0 4px;
  text-transform: uppercase;
}

.attendance-entry-list {
  display: grid;
  gap: 8px;
}

.attendance-entry-row {
  border-radius: 15px;
}

.attendance-entry-row input,
.attendance-entry-row select {
  min-height: 40px;
  padding: 8px 11px;
}

.attendance-entry-row [data-entry-duration] {
  color: var(--text);
  font-size: 13px;
  text-align: right;
}

.attendance-entry-row[data-empty-time] [data-entry-duration] {
  color: var(--danger);
}

.switch-row {
  align-items: center;
  align-self: stretch;
  border: 1px solid var(--line);
  border-radius: 15px;
  flex-direction: row !important;
  gap: 10px !important;
  justify-content: flex-start;
  min-height: 42px;
  padding: 10px 12px;
  text-transform: none !important;
}

.switch-row input {
  min-height: auto !important;
  width: auto !important;
}

.switch-row span {
  color: var(--text);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
}

.attendance-day-summary {
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid var(--line);
  border-radius: 15px;
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding: 14px;
}

.attendance-day-summary span {
  color: var(--muted);
  display: flex;
  flex-direction: column;
  font-size: 12px;
  gap: 4px;
}

.attendance-day-summary b {
  color: var(--text);
  font-family: "JetBrains Mono", monospace;
  font-size: 18px;
  font-weight: 600;
}

.vacation-list article {
  align-items: center;
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1fr) auto auto;
  padding: 10px 12px;
}

.vacation-list b {
  font-weight: 600;
}

.search {
  min-height: 36px;
}

.top-tools > .global-search-results {
  height: auto;
  left: 0;
  right: auto;
  top: 44px;
  width: min(460px, calc(100vw - 40px));
}

.global-search-results button {
  display: grid;
  gap: 3px;
}

.global-search-results button[data-active],
.global-search-results button:focus-visible {
  background: var(--brand-soft);
  border-color: rgba(0, 174, 239, .42);
  outline: none;
}

[data-variant="v3"] .card,
[data-variant="v3"] .data,
[data-variant="v3"] .admin-card,
[data-variant="v3"] .admin-info-card,
[data-variant="v3"] .file-sidebar,
[data-variant="v3"] .file-detail,
[data-variant="v3"] .task-detail,
[data-variant="v3"] .lane,
[data-variant="v3"] .note,
[data-variant="v3"] .mail-preview,
[data-variant="v3"] .manual-editor {
  background: #18181e;
  border-color: #26262d;
}

.inline-status {
  min-width: 132px;
  height: 34px;
  padding: 0 34px 0 12px;
  border-radius: 999px;
  font-size: 13px;
}

.avatar.has-image {
  background-size: cover;
  background-position: center;
  color: transparent;
}

.user-cell {
  align-items: center;
  display: flex;
  gap: 10px;
  min-width: 0;
}

.user-cell > div {
  min-width: 0;
}

.user-avatar-manager {
  width: min(720px, 100%);
}

.avatar-manager-list {
  display: grid;
  gap: 10px;
  max-height: min(58vh, 520px);
  overflow: auto;
  padding: 20px;
}

.avatar-manager-item {
  align-items: center;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 15px;
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 12px;
}

.project-title-cell,
.client-name-cell,
.client-project-inline {
  align-items: center;
  display: flex;
  min-width: 0;
}

.project-title-cell {
  gap: 10px;
}

.client-name-cell {
  align-items: flex-start;
  flex-direction: column;
  gap: 4px;
}

.client-project-inline {
  color: var(--muted);
  gap: 8px;
  font-size: 12px;
  line-height: 1.2;
}

.project-logo {
  align-items: center;
  background: #11141b;
  border: 1px solid #2c313b;
  border-radius: 8px;
  color: #8f98aa;
  display: inline-flex;
  flex: 0 0 44px;
  height: 22px;
  justify-content: center;
  overflow: hidden;
  width: 44px;
}

.project-logo.has-image {
  background-color: #fff;
  background-clip: border-box;
  background-origin: content-box;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  border-color: rgba(255, 255, 255, 0.86);
  box-sizing: border-box;
  color: transparent;
  padding: 5px;
}

.client-project-inline .project-logo {
  border-radius: 6px;
  flex-basis: 32px;
  height: 16px;
  padding: 3px;
  width: 32px;
}

.page[data-page="clients"] .data {
  overflow-x: hidden;
}

.client-table {
  min-width: 0;
  table-layout: fixed;
  width: 100%;
}

.client-table .client-col-check {
  width: 38px;
}

.client-table .client-col-name {
  width: auto;
}

.client-table .client-col-contact {
  width: 180px;
}

.client-table .client-col-owner {
  width: 145px;
}

.client-table .client-col-source {
  width: 118px;
}

.client-table .client-col-status {
  width: 190px;
}

.client-table .client-col-date {
  width: 86px;
}

.client-table .client-col-actions {
  width: 280px;
}

.client-table th,
.client-table td {
  overflow: hidden;
  padding-left: 10px;
  padding-right: 10px;
}

.client-table tbody td {
  height: 58px;
}

.client-table .client-name-cell strong,
.client-table .client-name-cell .sub,
.client-table .client-project-inline span {
  max-width: 100%;
  overflow-wrap: anywhere;
  overflow: hidden;
  text-overflow: ellipsis;
}

.client-table .inline-status {
  max-width: 100%;
  width: 100%;
}

.client-row-actions {
  align-items: center;
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  justify-content: flex-end;
  min-width: 0;
}

.client-table .client-row-actions .btn.xs {
  min-height: 32px;
  padding: 5px 12px !important;
  font-size: 14px;
}

.client-table .pill {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.client-table .num.mono {
  font-size: 12px;
}

@media (max-width: 1500px) {
  .client-table {
    min-width: 1180px;
  }

  .page[data-page="clients"] .data {
    overflow-x: auto;
  }
}

.page[data-page="projects"] .data {
  overflow-x: auto;
}

.project-table {
  min-width: 1120px;
  table-layout: fixed;
}

.project-table .project-col-check {
  width: 42px;
}

.project-table .project-col-name {
  width: 27%;
}

.project-table .project-col-client {
  width: 20%;
}

.project-table .project-col-owner {
  width: 150px;
}

.project-table .project-col-progress {
  width: 210px;
}

.project-table .project-col-date {
  width: 110px;
}

.project-table .project-col-status {
  width: 170px;
}

.project-table .project-col-actions {
  width: 94px;
}

.project-table th,
.project-table td {
  overflow: hidden;
}

.project-table tbody td {
  height: 58px;
}

.project-table .project-name-link {
  display: block;
  line-height: 1.25;
  max-width: 100%;
  overflow-wrap: anywhere;
  text-align: left;
  white-space: normal;
}

.project-table .row-progress {
  max-width: 130px;
  width: calc(100% - 48px);
}

.project-row-actions {
  align-items: center;
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  justify-content: flex-end;
  min-width: 0;
}

.icon-action {
  align-items: center;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--text);
  cursor: pointer;
  display: inline-flex;
  height: 32px;
  justify-content: center;
  padding: 0;
  transition: background .16s ease, border-color .16s ease, color .16s ease;
  width: 32px;
}

.icon-action:hover {
  background: var(--panel-3);
  border-color: var(--line-strong);
}

.icon-action svg {
  fill: none;
  height: 15px;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
  width: 15px;
}

.icon-action.danger {
  border-color: rgba(255, 107, 107, .42);
  color: #ff6b6b;
}

.project-status-inline {
  appearance: none;
  -webkit-appearance: none;
  background-color: var(--panel-2);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='%238e96aa' d='M6 8.5 1.8 4.3h8.4z'/%3E%3C/svg%3E");
  background-position: right 10px center;
  background-repeat: no-repeat;
  background-size: 10px;
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--text);
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  max-width: 150px;
  min-height: 30px;
  padding: 5px 28px 5px 12px;
  width: 100%;
}

.project-status-inline:focus {
  border-color: var(--accent);
  outline: none;
}

.project-status-inline.good {
  background-color: rgba(66, 211, 146, .14);
  color: #9cecc8;
}

.project-status-inline.warn {
  background-color: rgba(249, 188, 71, .15);
  color: #f8d26b;
}

.project-status-inline.info {
  background-color: rgba(0, 184, 255, .14);
  color: #7fdcff;
}

.project-status-inline.pill-done {
  background-color: rgba(66, 211, 146, .14);
  color: #9cecc8;
}

.project-status-inline.pill-call,
.project-status-inline.pill-spec {
  background-color: rgba(249, 188, 71, .15);
  color: #f8d26b;
}

.project-status-inline.pill-dev,
.project-status-inline.pill-design,
.project-status-inline.pill-test,
.project-status-inline.pill-meet {
  background-color: rgba(0, 184, 255, .14);
  color: #7fdcff;
}

.mail-tools {
  align-items: center;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 15px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 14px;
  padding: 12px 16px;
}

.mail-tools .search {
  min-width: min(100%, 280px);
}

.mail-column {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.mail-list article.mail-empty {
  cursor: default;
  grid-template-columns: 1fr;
}

.mail-list article {
  grid-template-columns: auto minmax(0, 1fr) auto;
}

.mail-list article > input[type="checkbox"] {
  align-self: start;
  grid-column: 1;
  grid-row: 1 / span 2;
  margin-top: 2px;
}

.mail-list article strong,
.mail-list article span {
  grid-column: 2;
}

.mail-list article time {
  grid-column: 3;
}

.mail-list article.mail-empty {
  grid-template-columns: 1fr;
}

.mail-tools [data-mail-selected-count] {
  min-width: 72px;
}

.mail-pagination {
  border: 1px solid var(--line);
  border-radius: 15px;
}

.list-pagination,
.mail-pagination {
  align-items: center;
  gap: 10px;
}

.page-size-control {
  align-items: center;
  display: inline-flex;
  gap: 8px;
  margin-left: auto;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}

.page-size-control .select {
  min-height: 36px;
  min-width: 86px;
  padding: 8px 32px 8px 12px;
}

.list-pagination .page-btns,
.mail-pagination .page-btns {
  margin-left: 0;
}

.help-tip {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 17px;
  margin-left: 6px;
  border: 1px solid rgba(0, 195, 255, 0.32);
  border-radius: 50%;
  background: rgba(0, 195, 255, 0.08);
  color: var(--accent);
  cursor: help;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  text-transform: none;
  vertical-align: middle;
}

.help-tip::after {
  content: none;
}

.ui-tooltip {
  position: fixed;
  z-index: 9999;
  max-width: min(300px, calc(100vw - 28px));
  padding: 8px 11px;
  border: 1px solid rgba(0, 195, 255, .22);
  border-radius: 10px;
  background: rgba(18, 18, 23, .98);
  color: var(--text);
  box-shadow: none;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.45;
  opacity: 0;
  pointer-events: none;
  transform: translateY(4px);
  transition: opacity .12s ease, transform .12s ease;
  white-space: normal;
}

.ui-tooltip[data-show] {
  opacity: 1;
  transform: translateY(0);
}

html[data-variant="v1"] .ui-tooltip {
  background: rgba(255, 255, 255, .98);
  border-color: rgba(0, 97, 160, .2);
  color: var(--text);
}

.spec-admin-tree .spec-admin-block {
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr;
  padding: 14px;
}

.spec-admin-tree .spec-admin-block > header,
.spec-admin-question {
  align-items: center;
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1fr) auto;
}

.spec-admin-question-list {
  display: grid;
  gap: 8px;
}

.spec-admin-question,
.spec-admin-empty {
  background: rgba(255, 255, 255, .025);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 12px;
}

.spec-admin-tree .is-inactive {
  opacity: .55;
}

.spec-admin-empty {
  color: var(--muted);
  font-size: 12px;
}

.hidden-file-input {
  height: 1px;
  left: -9999px;
  opacity: 0;
  position: fixed;
  top: -9999px;
  width: 1px;
}

.tbl tr[data-clickable] {
  cursor: pointer;
}

.tbl tr[data-selected] .inline-status {
  border-color: rgba(126, 132, 145, 0.42);
}

[data-calendar-settings] input[type="url"] {
  font-family: inherit;
}

.spec-document-select {
  width: min(340px, 100%);
}

.phase-list li {
  align-items: center;
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.phase-list li small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}

.phase-list li.disabled {
  opacity: 0.54;
}

.spec-grid:not([data-collapsed]) [data-spec-collapse] {
  width: auto;
  min-width: 0;
  justify-content: center;
  padding: 10px 14px;
}

.spec-grid:not([data-collapsed]) [data-spec-collapse] span {
  display: inline;
}

.spec-grid:not([data-collapsed]) .spec-collapse-ic-close {
  display: block !important;
}

.spec-grid:not([data-collapsed]) .spec-collapse-ic-open {
  display: none !important;
}

.spec-grid[data-collapsed] .spec-collapse-ic-close {
  display: none !important;
}

.spec-grid[data-collapsed] .spec-collapse-ic-open {
  display: block !important;
}

.qfield label {
  align-items: center;
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.qfield label span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
}

.qfield.required {
  border-color: rgba(0, 195, 255, 0.22);
}

.spec-output [data-spec-section] {
  scroll-margin-top: 16px;
}

.spec-modebar {
  border: 1px solid var(--line);
  border-radius: 15px;
  background: var(--panel);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 16px;
  padding: 8px;
}

.spec-modebar button {
  border: 1px solid transparent;
  border-radius: 50px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font: inherit;
  font-size: 14px;
  min-height: 38px;
  padding: 8px 18px;
}

.spec-modebar button[data-active] {
  border-color: rgba(0, 195, 255, 0.36);
  background: rgba(0, 195, 255, 0.10);
  color: var(--text);
}

.spec-preview-tools {
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: var(--panel);
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: space-between;
  margin: 0 0 12px;
  padding: 10px;
}

.spec-preview-tools span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}

.spec-preview-tools span[data-manual] {
  color: var(--accent);
}

.spec-history-tools {
  align-items: center;
  display: inline-flex;
  gap: 8px;
}

.spec-history-tools .iconbtn {
  height: 40px;
  min-height: 40px;
  width: 40px;
}

.spec-history-tools [disabled] {
  cursor: not-allowed;
  opacity: .42;
}

.spec-version-modal {
  width: min(760px, 100%);
}

.spec-version-list {
  display: grid;
  gap: 10px;
  padding: 20px;
}

.spec-version-row {
  align-items: center;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 15px;
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1fr) auto auto;
  padding: 12px;
}

.spec-version-row strong,
.spec-version-row span,
.spec-version-row small {
  display: block;
}

.spec-version-row span,
.spec-version-row small {
  color: var(--muted);
  font-size: 12px;
}

.spec-group-intro {
  border: 1px solid var(--line);
  border-radius: 15px;
  background: var(--panel-2);
  display: grid;
  gap: 4px;
  margin-bottom: 16px;
  padding: 14px;
}

.spec-group-intro strong,
.spec-client-preview strong,
.internal-list strong,
.spec-admin-toolbar strong,
.spec-admin-group > header strong {
  font-weight: 600;
}

.spec-group-intro span,
.spec-client-preview span,
.spec-mini-stats,
.internal-list span,
.spec-admin-group small {
  color: var(--muted);
  font-size: 12px;
}

.spec-group-intro.disabled,
.spec-admin-group.disabled {
  opacity: 0.72;
}

.spec-client-preview {
  border: 1px solid var(--line);
  border-radius: 15px;
  background: var(--panel-2);
  display: grid;
  gap: 4px;
  padding: 12px;
}

.spec-client-preview strong {
  margin-bottom: 6px;
  overflow-wrap: anywhere;
}

.spec-left .spec-blocks-card {
  padding: 14px;
}

.spec-left .spec-blocks-card .small-h {
  margin-bottom: 12px;
}

.spec-mini-stats {
  display: grid;
  gap: 6px;
  margin-top: 10px;
}

.spec-block-toggles {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.spec-block-toggle {
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: var(--panel-2);
  cursor: pointer;
  display: flex;
  gap: 10px;
  padding: 10px 12px;
}

.spec-block-toggle input,
.mini-check input {
  accent-color: var(--accent);
}

.spec-block-toggle span {
  font-size: 13px;
  font-weight: 600;
}

.spec-block-toggle.disabled {
  opacity: 0.58;
}

.spec-other-input {
  display: block;
  width: min(100%, 360px);
  margin-top: 10px;
  padding: 10px 14px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.035);
  color: var(--text);
  font-size: 14px;
  line-height: 1.35;
  box-shadow: none;
}

.spec-other-input::placeholder {
  color: var(--muted);
}

.spec-other-input:focus {
  border-color: rgba(0, 195, 255, 0.48);
  outline: none;
}

.qfield input:not([type="checkbox"]):not([type="radio"]),
.qfield select,
.qfield textarea {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.035);
  color: var(--text);
  font: inherit;
  font-size: 14px;
  box-shadow: none;
}

.qfield input:not([type="checkbox"]):not([type="radio"])::placeholder,
.qfield textarea::placeholder {
  color: var(--muted);
}

.qfield input:not([type="checkbox"]):not([type="radio"]):focus,
.qfield select:focus,
.qfield textarea:focus {
  border-color: rgba(0, 195, 255, 0.48);
  outline: none;
  box-shadow: none;
}

.choice-row {
  align-items: center;
  gap: 8px;
}

.chk-pill {
  min-height: 34px;
  padding: 6px 12px;
  border-color: rgba(255, 255, 255, 0.10);
  border-radius: 50px;
  background: rgba(255, 255, 255, 0.03);
  color: var(--muted);
  box-shadow: none;
}

.chk-pill:hover {
  border-color: rgba(0, 195, 255, 0.32);
  color: var(--text);
}

.chk-pill:has(input:checked) {
  border-color: rgba(0, 195, 255, 0.56);
  background: rgba(0, 195, 255, 0.10);
}

.qfield.required {
  border-left: 2px solid var(--accent);
  padding-left: 12px;
}

.qfield label {
  align-items: flex-start;
}

.qfield label span {
  display: block;
  letter-spacing: 0;
  margin-top: 2px;
  text-align: right;
  text-transform: none;
}

.phase-list li {
  min-height: 54px;
}

.internal-list {
  display: grid;
  gap: 10px;
}

.internal-list article,
.spec-admin-group,
.spec-admin-group article {
  border: 1px solid var(--line);
  border-radius: 15px;
  background: var(--panel-2);
}

.internal-list article {
  display: grid;
  gap: 4px;
  padding: 12px;
}

.internal-list p {
  margin: 0;
}

.spec-admin-toolbar {
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: var(--panel-2);
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: space-between;
  margin-bottom: 14px;
  padding: 12px;
}

.spec-admin-builder {
  display: grid;
  gap: 12px;
}

.spec-admin-group {
  display: grid;
  gap: 8px;
  padding: 12px;
}

.spec-admin-group > header {
  align-items: center;
  display: flex;
  gap: 10px;
  justify-content: space-between;
  flex-wrap: wrap;
}

.spec-admin-group > header strong {
  margin-right: auto;
}

.mini-check {
  align-items: center;
  color: var(--muted);
  display: inline-flex;
  font-size: 12px;
  gap: 7px;
}

.spec-admin-group article {
  align-items: center;
  display: grid;
  gap: 10px;
  grid-template-columns: auto minmax(0, 1fr) auto auto auto;
  padding: 10px;
}

.spec-admin-group article[draggable="true"] {
  cursor: grab;
}

.drag-handle {
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-size: 11px;
  padding: 4px 8px;
}

.spec-output {
  max-height: calc(100vh - 230px);
  overflow: auto;
}

.ops-empty {
  border: 1px dashed rgba(255, 255, 255, 0.12);
  border-radius: 15px;
  color: var(--muted);
  font-size: 13px;
  padding: 14px;
}

.file-row[data-file-id],
.file-card[data-file-id],
.agenda [data-meeting-id],
.note[data-note-id],
.cal-day[data-work-date] {
  cursor: pointer;
}

.cal-day.is-selected {
  border-color: color-mix(in srgb, var(--accent) 68%, var(--line));
  background: color-mix(in srgb, var(--accent) 9%, var(--panel-2));
}

.cal-day.is-holiday em {
  color: var(--warning, #f6c96b);
}

.cal-day.is-day-off em {
  color: var(--success);
}

.note-editor-panel {
  width: min(860px, calc(100vw - 36px));
}

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

.note-editor-grid textarea[name="body"] {
  min-height: 220px;
  line-height: 1.55;
}

.task-detail-grid label,
.task-notes label {
  display: block;
}

.task-detail-grid label {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel-2);
  padding: 10px;
}

.task-detail-grid label b,
.task-notes label strong {
  display: block;
  color: var(--muted);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 7px;
}

.task-detail-grid select,
.task-notes textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  color: var(--text);
  padding: 10px 12px;
  font: inherit;
}

.task-notes textarea {
  min-height: 86px;
  resize: vertical;
}

.task-notes label + label {
  margin-top: 12px;
}

.wi-modal-panel.client-360-panel {
  width: min(1320px, calc(100vw - 48px));
  max-height: min(820px, calc(100vh - 48px));
}

.client-360-hero {
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(300px, .8fr) minmax(0, 1.7fr);
  padding: 18px 20px 0;
}

.client-360-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  padding: 0;
}

.client-360-primary,
.client-360-grid article,
.client-360-lists section {
  border: 1px solid var(--line);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.025);
  padding: 16px;
}

.client-360-primary {
  display: grid;
  align-content: start;
  gap: 10px;
}

.client-360-primary > p {
  margin-top: -4px;
}

.client-360-primary > span,
.client-360-grid span,
.client-360-lists h4 {
  display: block;
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.client-360-primary strong,
.client-360-grid strong {
  display: block;
  font-size: 15px;
  font-weight: 600;
}

.client-360-grid p,
.client-360-lists p {
  margin: 7px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.client-360-lists {
  display: block;
  padding: 12px 20px 18px;
}

.client-360-lists section {
  display: grid;
  align-content: start;
  gap: 10px;
  max-height: 360px;
  min-height: 250px;
  overflow: auto;
}

.client-360-lists section[hidden] {
  display: none;
}

.client-360-tabs {
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 16px 20px 0;
}

.client-360-tab {
  align-items: center;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  display: inline-flex;
  font-size: 13px;
  font-weight: 600;
  gap: 8px;
  line-height: 1;
  padding: 7px 14px;
}

.client-360-tab[data-active],
.client-360-tab:hover,
.client-360-tab:focus-visible {
  background: rgba(255, 255, 255, .055);
  border-color: var(--line-strong);
  color: var(--text);
  outline: none;
}

.client-360-tab span {
  align-items: center;
  background: rgba(255, 255, 255, .08);
  border-radius: 999px;
  color: var(--muted);
  display: inline-flex;
  font-size: 11px;
  height: 20px;
  justify-content: center;
  min-width: 20px;
  padding: 0 7px;
}

.client-360-lists .link {
  text-align: left;
}

.client-360-list-row,
.client-360-list-button {
  display: grid;
  gap: 10px;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: var(--panel-2);
  color: var(--text);
  padding: 12px;
  text-align: left;
}

.client-360-person-head {
  display: grid;
  gap: 3px;
}

.client-360-list-button:hover,
.client-360-list-button:focus-visible {
  border-color: var(--accent);
  outline: none;
}

.client-360-list-row strong,
.client-360-list-button strong {
  display: block;
  overflow: hidden;
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.client-360-list-row span,
.client-360-list-button span {
  display: block;
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: normal;
}

.client-360-contact-stack {
  display: grid;
  gap: 8px;
}

.client-360-contact-chip {
  align-items: center;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid var(--line);
  border-radius: 14px;
  color: var(--text);
  display: grid;
  gap: 10px;
  grid-template-columns: 32px minmax(0, 1fr);
  min-height: 44px;
  padding: 8px 10px;
  text-decoration: none;
}

.client-360-contact-chip .ic {
  background: rgba(0, 195, 255, .09);
  border: 1px solid rgba(0, 195, 255, .22);
  border-radius: 10px;
  color: var(--accent);
  height: 32px;
  padding: 7px;
  width: 32px;
}

.client-360-contact-chip span,
.client-360-contact-chip small,
.client-360-contact-chip strong {
  display: block;
  min-width: 0;
}

.client-360-contact-chip small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .08em;
  margin-bottom: 2px;
  text-transform: uppercase;
}

.client-360-contact-chip strong {
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.client-360-contact-chip:hover {
  border-color: rgba(0, 195, 255, .46);
}

.client-360-contact-chip.muted-chip {
  opacity: .62;
}

.client-360-lists p span {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
}

.tbl th[data-sortable] {
  cursor: pointer;
  user-select: none;
}

.tbl th[data-sortable]::after {
  content: "\2195";
  display: inline-block;
  margin-left: 6px;
  color: var(--muted);
  font-size: 10px;
}

.tbl th[data-sort-active]::after {
  content: "\2191";
  color: var(--accent);
}

.tbl th[data-sort-active][data-sort-dir="desc"]::after {
  content: "\2193";
}

.note-checklist-editor {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.025);
}

.note-checklist-editor header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0;
  border: 0;
}

.note-checklist-editor header div {
  display: grid;
  gap: 3px;
}

.note-checklist-editor strong {
  font-size: 14px;
  font-weight: 600;
}

.note-checklist-editor span {
  color: var(--muted);
  font-size: 12px;
}

.note-checklist-list {
  display: grid;
  gap: 8px;
}

.note-check-row {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) 30px;
  gap: 10px;
  align-items: center;
}

.note-check-row input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--accent);
}

.note-check-row input[type="text"] {
  min-height: 38px;
}

.wi-modal {
  position: fixed;
  inset: 0;
  z-index: 950;
  display: grid;
  place-items: center;
  padding: 24px;
}

.wi-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(3, 6, 11, 0.72);
  backdrop-filter: blur(8px);
}

.wi-modal-panel {
  position: relative;
  z-index: 1;
  width: min(720px, 100%);
  max-height: min(760px, calc(100vh - 48px));
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: var(--panel);
  color: var(--text);
  box-shadow: none;
}

.wi-modal-panel header,
.wi-modal-panel footer {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 20px;
  border-bottom: 1px solid var(--line);
}

.wi-modal-panel footer {
  align-items: center;
  justify-content: flex-end;
  border-top: 1px solid var(--line);
  border-bottom: 0;
}

.wi-modal-panel h3 {
  margin: 4px 0 0;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 0;
}

.wi-modal-panel p {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.wi-modal-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  padding: 20px;
}

.wi-modal-grid label {
  display: flex;
  flex-direction: column;
  gap: 7px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.wi-modal-grid label.full {
  grid-column: 1 / -1;
}

.wi-modal-grid .full {
  grid-column: 1 / -1;
}

.meeting-import-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: color-mix(in srgb, var(--panel) 86%, transparent);
}

.meeting-import-toolbar span {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.wi-modal-grid input,
.wi-modal-grid select,
.wi-modal-grid textarea {
  width: 100%;
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: var(--panel-2);
  color: var(--text);
  padding: 10px 12px;
  outline: none;
  text-transform: none;
}

.wi-modal-grid textarea {
  resize: vertical;
  min-height: 96px;
  font-family: inherit;
}

.mail-composer {
  width: min(860px, 100%);
}

.email-template-manager {
  width: min(920px, 100%);
}

.email-template-list {
  display: grid;
  gap: 10px;
  max-height: 310px;
  overflow: auto;
}

.email-template-item {
  align-items: center;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 15px;
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 14px;
}

.email-template-item strong,
.email-template-item p {
  display: block;
}

.email-template-item strong {
  color: var(--text);
  font-size: 15px;
  font-weight: 600;
  margin-top: 8px;
}

.email-template-item p {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
  margin: 4px 0 0;
}

.form-actions.compact {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.mail-compose-meta {
  display: grid;
  gap: 12px;
  grid-column: 1 / -1;
  grid-template-columns: 1fr auto;
  align-items: end;
}

.mail-compose-meta label {
  min-width: 0;
}

.mail-compose-meta label:last-child {
  min-width: 140px;
}

.mail-editor-wrap {
  /* wrapper for toolbar + editor — no transform */
}

.mail-editor-toolbar {
  align-items: center;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-bottom: none;
  border-radius: 12px 12px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
  padding: 6px 10px;
}

.mail-editor-toolbar .iconbtn,
.mail-editor-toolbar .mail-tb-btn {
  height: 30px;
  min-height: 30px;
  width: 30px;
  font-size: 13px;
  border-radius: 8px;
}

.mail-editor-toolbar .sv-tb-sep {
  display: inline-block;
  width: 1px;
  height: 20px;
  background: var(--line);
  margin: 0 2px;
}

.mail-editor {
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-top: none;
  border-radius: 0 0 12px 12px;
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
  line-height: 1.6;
  min-height: 260px;
  outline: none;
  overflow: auto;
  padding: 14px;
  text-transform: none;
  white-space: normal;
  word-break: break-word;
}

.mail-editor hr {
  border: none;
  border-top: 1px solid var(--line);
  margin: 12px 0;
}

.mail-editor:focus {
  border-color: rgba(0, 195, 255, 0.55);
}

.mail-editor-raw {
  display: none;
}

.mail-preview-link {
  color: var(--accent);
  font-size: 12px;
  font-weight: 600;
  text-align: left;
}

.mail-preview-link:hover {
  text-decoration: underline;
}

.wi-modal-grid input:focus,
.wi-modal-grid select:focus,
.wi-modal-grid textarea:focus {
  border-color: rgba(0, 195, 255, 0.55);
}

.ui-toast {
  position: fixed !important;
  right: 26px !important;
  bottom: 26px !important;
  z-index: 999 !important;
  display: grid !important;
  grid-template-columns: 10px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 12px !important;
  width: min(390px, calc(100vw - 36px)) !important;
  max-width: none !important;
  min-height: 54px !important;
  padding: 14px 18px !important;
  border: 1px solid rgba(0, 195, 255, 0.28) !important;
  border-radius: 15px !important;
  background: rgba(18, 19, 25, 0.98) !important;
  color: #f7fbff !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  letter-spacing: 0 !important;
  box-shadow: 0 0 18px rgba(0, 195, 255, 0.16) !important;
  opacity: 0 !important;
  transform: translateY(10px) scale(0.98) !important;
  pointer-events: none !important;
  overflow: hidden !important;
  transition: opacity 0.18s ease, transform 0.18s ease !important;
}

.ui-toast::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #00c3ff;
  box-shadow: 0 0 8px rgba(0, 195, 255, 0.65);
}

.ui-toast[data-show] {
  opacity: 1 !important;
  transform: translateY(0) scale(1) !important;
}

[data-variant="v1"] .ui-toast {
  background: #ffffff !important;
  color: #061019 !important;
  border-color: rgba(0, 163, 224, 0.28) !important;
}

.chat-shell {
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr);
  gap: 16px;
  min-height: calc(100vh - 180px);
}

.chat-sidebar,
.chat-main {
  border: 1px solid var(--line);
  border-radius: 15px;
  background: var(--panel);
}

.chat-sidebar {
  display: grid;
  align-content: start;
  gap: 14px;
  padding: 16px;
}

.chat-side-block {
  display: grid;
  gap: 10px;
}

.chat-side-block header,
.chat-main-head {
  align-items: center;
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.chat-head-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

.chat-side-block header span {
  color: var(--muted);
  font-size: 12px;
}

.chat-thread-list,
.chat-compact-list {
  display: grid;
  gap: 8px;
}

.chat-thread,
.chat-compact-list button {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: var(--panel-2);
  color: var(--text);
  cursor: pointer;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 4px;
  padding: 12px;
  text-align: left;
}

.chat-item-text {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.chat-avatar {
  margin-right: 0;
}

.chat-thread .chat-avatar,
.chat-compact-list .chat-avatar,
.chat-message .chat-avatar {
  color: #fff;
  grid-column: 1;
}

.chat-thread[data-active],
.chat-compact-list button[data-active] {
  border-color: rgba(0, 195, 255, 0.48);
  background: rgba(0, 195, 255, 0.08);
}

.chat-thread strong,
.chat-compact-list strong {
  font-weight: 600;
}

.chat-thread span,
.chat-compact-list span {
  color: var(--muted);
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-thread .chat-avatar,
.chat-compact-list .chat-avatar,
.chat-message .chat-avatar {
  color: #fff;
  font-size: 9.5px;
  overflow: visible;
  white-space: normal;
}

.chat-main {
  display: grid;
  grid-template-rows: auto minmax(340px, 1fr) auto;
  min-width: 0;
  overflow: hidden;
}

.chat-main-head {
  border-bottom: 1px solid var(--line);
  padding: 18px 20px;
}

.chat-main-head h3 {
  align-items: center;
  display: inline-flex;
  gap: 8px;
  font-size: 20px;
  font-weight: 600;
  margin: 2px 0 4px;
}

.chat-main-head p {
  color: var(--muted);
  margin: 0;
}

.chat-messages {
  align-content: start;
  display: grid;
  gap: 12px;
  overflow: auto;
  padding: 20px;
}

.chat-message {
  align-items: start;
  display: grid;
  gap: 10px;
  grid-template-columns: 34px minmax(0, 1fr);
  max-width: min(760px, 92%);
}

.chat-message[data-own] {
  grid-template-columns: minmax(0, 1fr) 34px;
  justify-self: end;
}

.chat-message[data-own] .chat-avatar {
  grid-column: 2;
}

.chat-message[data-own] .chat-bubble {
  background: rgba(0, 195, 255, 0.12);
  border-color: rgba(0, 195, 255, 0.28);
  grid-column: 1;
  grid-row: 1;
}

.chat-bubble {
  border: 1px solid var(--line);
  border-radius: 15px;
  background: var(--panel-2);
  padding: 12px 14px;
  position: relative;
}

.chat-message-delete {
  align-items: center;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  cursor: pointer;
  display: inline-flex;
  font-size: 15px;
  height: 28px;
  justify-content: center;
  line-height: 1;
  opacity: 0;
  padding: 0;
  position: absolute;
  right: 8px;
  top: 8px;
  transition: opacity .16s ease, color .16s ease, border-color .16s ease, background .16s ease;
  width: 28px;
}

.chat-bubble:hover .chat-message-delete,
.chat-message-delete:focus-visible {
  opacity: 1;
}

.chat-message-delete:hover,
.chat-message-delete:focus-visible {
  background: rgba(255, 91, 91, .10);
  border-color: rgba(255, 91, 91, .55);
  color: var(--danger);
}

.chat-bubble header {
  align-items: baseline;
  display: flex;
  gap: 10px;
  margin-bottom: 6px;
  padding-right: 34px;
}

.chat-bubble header strong {
  font-weight: 600;
}

.chat-bubble time {
  color: var(--muted);
  font-size: 12px;
}

.chat-bubble p {
  margin: 0;
  white-space: pre-wrap;
}

.chat-file {
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--text);
  display: inline-flex;
  gap: 8px;
  margin-top: 10px;
  padding: 8px 10px;
  text-decoration: none;
}

.chat-composer {
  border-top: 1px solid var(--line);
  display: grid;
  gap: 10px;
  padding: 14px;
}

.chat-composer textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: var(--panel-2);
  color: var(--text);
  font: inherit;
  min-height: 58px;
  padding: 12px 14px;
  resize: vertical;
}

.chat-composer-actions {
  align-items: center;
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

.chat-attach {
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 50px;
  color: var(--text);
  cursor: pointer;
  display: inline-flex;
  font-size: 16px;
  min-height: 40px;
  padding: 10px 20px;
}

.chat-attach input {
  display: none;
}

.project-access-checks {
  display: grid;
  gap: 10px;
  padding: 2px;
}

.project-access-checks label {
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: var(--panel-2);
  display: flex;
  gap: 12px;
  padding: 12px;
}

.project-access-checks span {
  display: grid;
  gap: 3px;
}

.project-access-checks small {
  color: var(--muted);
}

.project-name-link {
  color: var(--text);
  font-weight: 600;
  text-decoration: none;
}

.project-name-link:hover {
  color: var(--accent);
}

.project-detail-panel {
  display: grid;
  gap: 16px;
}

.project-detail-head {
  align-items: center;
  display: flex;
  gap: 16px;
  justify-content: space-between;
}

.project-detail-title-wrap {
  align-items: center;
  display: flex;
  gap: 12px;
  min-width: 0;
}

.project-detail-title-wrap .project-logo {
  flex: 0 0 64px;
  height: 32px;
  padding: 6px;
  width: 64px;
}

.project-detail-title-wrap h3 {
  color: var(--text);
  font-size: 20px;
  font-weight: 600;
  margin: 0;
}

.project-detail-title-wrap p,
.project-detail-note {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
  margin: 4px 0 0;
}

.project-detail-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.project-detail-card .mile li {
  grid-template-columns: 18px minmax(0, 1fr) auto 28px;
}

.project-detail-card .mile li b {
  font-size: 12.5px;
  font-weight: 600;
  min-width: 0;
}

.project-detail-card .mile li .project-mile-delete {
  height: 26px;
  width: 26px;
}

.project-mile-check {
  display: inline-flex;
}

.project-mile-check input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.project-mile-check span {
  align-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 5px;
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  height: 16px;
  justify-content: center;
  width: 16px;
}

.project-mile-check input:checked + span {
  background: var(--success);
  border-color: var(--success);
}

.project-mile-check input:checked + span::after {
  content: "";
  border-bottom: 2px solid currentColor;
  border-right: 2px solid currentColor;
  height: 8px;
  transform: rotate(45deg) translate(-1px, -1px);
  width: 4px;
}

.project-360-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.project-360-grid > .project-detail-card:last-child:nth-child(4n + 1) {
  grid-column: 1 / -1;
}

.project-360-grid > .project-detail-card:nth-last-child(2):nth-child(4n + 1),
.project-360-grid > .project-detail-card:last-child:nth-child(4n + 2) {
  grid-column: span 2;
}

.project-360-grid > .project-detail-card:nth-last-child(3):nth-child(4n + 1) {
  grid-column: span 2;
}

.project-detail-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 15px;
  min-width: 0;
  padding: 14px;
}

.project-detail-card h3 {
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  margin: 0;
  text-transform: uppercase;
}

.project-card-head {
  align-items: center;
  display: flex;
  gap: 10px;
  justify-content: space-between;
  margin-bottom: 12px;
}

.project-card-open {
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  padding: 5px 12px;
}

.project-card-open:hover,
.project-card-open:focus-visible {
  background: var(--panel-2);
  color: var(--text);
}

.project-info-list {
  display: grid;
  gap: 8px;
}

.project-info-list span {
  border: 1px solid var(--line);
  border-radius: 12px;
  display: grid;
  gap: 3px;
  padding: 9px 10px;
}

.project-info-list b,
.project-info-list i {
  display: block;
  font-style: normal;
}

.project-info-list b {
  color: var(--muted);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.project-info-list i {
  color: var(--text);
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.project-detail-card .mail-list,
.project-detail-card .file-list {
  background: transparent;
  border: 0;
  border-radius: 0;
  display: grid;
  gap: 8px;
  margin-top: 2px;
}

.project-detail-card .mail-list li,
.project-detail-card .file-list li {
  align-items: flex-start;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 12px;
  gap: 12px;
  margin: 0;
  padding: 10px 12px;
  transition: background-color .14s ease, border-color .14s ease;
}

.project-detail-card .mail-list li:first-child,
.project-detail-card .file-list li:first-child,
.project-detail-card .mail-list li,
.project-detail-card .file-list li {
  border-top: 1px solid transparent;
}

.project-detail-card .mail-list li[data-clickable]:hover,
.project-detail-card .file-list li[data-clickable]:hover {
  background: rgba(255, 255, 255, .035);
  border-color: var(--line);
}

.project-detail-card .mail-list div,
.project-detail-card .file-list div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.project-detail-card .mail-list span,
.project-detail-card .file-list span:not(.filetag) {
  color: var(--muted);
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.project-info-modal {
  width: min(880px, calc(100vw - 32px));
}

.project-info-modal-body {
  display: grid;
  gap: 14px;
  max-height: min(68vh, 720px);
  overflow: auto;
  padding: 2px;
}

.project-popup-list {
  display: grid;
  gap: 12px;
}

.project-popup-list article {
  border: 1px solid var(--line);
  border-radius: 15px;
  background: var(--panel-2);
  display: grid;
  gap: 8px;
  padding: 14px;
}

.project-popup-list h4 {
  color: var(--text);
  font-size: 15px;
  font-weight: 600;
  margin: 0;
}

.project-popup-list article > span,
.project-popup-lines {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.project-popup-lines p {
  margin: 0 0 4px;
  overflow-wrap: anywhere;
}

.project-text-view {
  background: rgba(255, 255, 255, .03);
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--text);
  font-family: inherit;
  font-size: 13px;
  line-height: 1.6;
  margin: 4px 0 0;
  max-height: 440px;
  overflow: auto;
  padding: 12px;
  white-space: pre-wrap;
}

.project-popup-checklist {
  color: var(--text);
  display: grid;
  gap: 5px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.file-version-panel {
  width: min(920px, calc(100vw - 36px));
}

.file-version-body {
  display: grid;
  gap: 16px;
  padding: 20px;
}

.file-version-current {
  align-items: center;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 15px;
  display: flex;
  gap: 14px;
  min-width: 0;
  padding: 14px;
}

.file-version-current h4 {
  color: var(--text);
  font-size: 18px;
  font-weight: 600;
  margin: 0;
}

.file-version-current p {
  margin: 5px 0 0;
}

.file-version-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.file-version-grid span {
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 15px;
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 11px 12px;
}

.file-version-grid span.full {
  grid-column: 1 / -1;
}

.file-version-grid b,
.file-version-grid i {
  display: block;
  font-style: normal;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.file-version-grid b {
  color: var(--muted);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.file-version-grid i {
  color: var(--text);
  font-size: 13px;
}

.file-version-list {
  display: grid;
  gap: 10px;
}

.file-version-list-head {
  align-items: center;
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.file-version-list-head strong {
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
}

.file-version-list-head small {
  color: var(--muted);
  font-size: 12px;
}

.file-version-item {
  align-items: center;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 15px;
  display: grid;
  gap: 12px;
  grid-template-columns: 52px minmax(0, 1fr) auto auto auto;
  padding: 12px;
}

.file-version-item.is-current {
  border-color: color-mix(in srgb, var(--accent) 70%, var(--line));
  background: color-mix(in srgb, var(--accent) 9%, var(--panel-2));
}

.file-version-item div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.file-version-item strong {
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.file-version-item span:not(.file-icon) {
  color: var(--muted);
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.file-version-item em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  white-space: nowrap;
}

[data-variant="v3"] .project-detail-card {
  background: rgba(255, 255, 255, .025);
}

.tbl tbody tr[data-row-open],
.tbl tbody tr[data-selected],
.tbl tbody tr[data-clickable][data-selected],
.task-list-table tr[data-selected] {
  background: rgba(15, 23, 42, .055) !important;
  box-shadow: inset 3px 0 0 rgba(100, 116, 139, .85);
}

[data-variant="v3"] .tbl tbody tr[data-row-open],
[data-variant="v3"] .tbl tbody tr[data-selected],
[data-variant="v3"] .tbl tbody tr[data-clickable][data-selected],
[data-variant="v3"] .task-list-table tr[data-selected] {
  background: rgba(255, 255, 255, .055) !important;
  box-shadow: inset 3px 0 0 rgba(154, 154, 168, .75);
}

.tbl tbody tr[data-clickable][data-selected] td,
.tbl tbody tr[data-selected] td,
.task-list-table tr[data-selected] td {
  background: transparent !important;
}

.tbl tbody tr[data-row-open] .link,
.tbl tbody tr[data-selected] .link {
  color: var(--muted);
}

/* Egységes natív űrlap-kontrollok: select/date ikonok és dark-mode felületek. */
select,
.timer-context {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='%23687587' d='M6 8.5L1.5 4h9z'/%3E%3C/svg%3E");
  background-position: right 16px center;
  background-repeat: no-repeat;
  background-size: 10px;
  padding-right: 44px;
}

[data-variant="v3"] select,
[data-variant="v3"] .timer-context {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='%238898b4' d='M6 8.5L1.5 4h9z'/%3E%3C/svg%3E");
  color-scheme: dark;
}

.timer .timer-context,
[data-variant="v3"] .timer .timer-context {
  background-color: transparent !important;
  border-left-color: rgba(255, 255, 255, .08);
  box-shadow: none;
}

select,
select.select,
.wi-modal-grid select,
.form-grid select,
.mini-form select,
.admin-form select,
.qfield select,
.task-detail-grid select,
.timer-context {
  background-position: right 16px center !important;
  background-repeat: no-repeat !important;
  background-size: 10px 10px !important;
  padding-right: 44px !important;
}

[data-variant="v3"] .timer:not([data-running]) .timer-btn {
  color: #ff5b5b;
}

[data-variant="v3"] .timer[data-running] .timer-btn {
  color: var(--accent);
}

[data-variant="v3"] .timer:not([data-running]) .timer-btn .ic {
  filter:
    drop-shadow(0 0 3px rgba(255, 91, 91, .76))
    drop-shadow(0 0 8px rgba(255, 91, 91, .34));
}

[data-variant="v3"] .timer[data-running] .timer-btn .ic {
  filter:
    drop-shadow(0 0 4px rgba(0, 174, 239, .75))
    drop-shadow(0 0 10px rgba(0, 174, 239, .35));
}

.timer[data-running] .timer-ic-play {
  display: block !important;
}

.timer[data-running] .timer-ic-stop {
  display: none !important;
}

.timer:not([data-running]) .timer-ic-stop {
  display: block !important;
}

.timer:not([data-running]) .timer-ic-play {
  display: none !important;
}

input[type="date"],
input[type="datetime-local"],
input[type="month"],
input[type="time"] {
  color-scheme: light;
  padding-right: 44px;
}

.btn,
.btn.xs,
.row-actions .btn.xs,
.form-actions .btn,
.page-head-actions .btn,
.admin-actions .btn,
.devlog-item-actions .btn,
.devlog-form button[type="submit"],
.chat-attach {
  font-size: var(--wdesk-button-font-size, 14px) !important;
  min-height: 32px !important;
  padding: 5px 20px !important;
}

.ui-settings-form {
  grid-template-columns: repeat(2, minmax(0, 240px));
}

.ui-branding-form {
  grid-template-columns: minmax(260px, 520px);
  margin-bottom: 14px;
}

.ui-branding-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: 16px;
}

.ui-branding-grid article {
  align-items: center;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 15px;
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1fr) 54px auto;
  padding: 12px;
}

.ui-branding-grid strong,
.ui-branding-grid span {
  display: block;
}

.ui-branding-grid span {
  color: var(--muted);
  font-size: 12px;
  margin-top: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ui-branding-grid img {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  height: 44px;
  object-fit: contain;
  padding: 6px;
  width: 54px;
}

.ui-settings-preview {
  align-items: center;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  display: flex;
  gap: 18px;
  justify-content: space-between;
  margin-top: 16px;
  padding: 18px;
}

.ui-settings-preview strong,
.ui-settings-preview span {
  display: block;
}

.ui-settings-preview span {
  color: var(--muted);
  margin-top: 4px;
}

.ui-settings-preview-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

@media (max-width: 1180px) {
  .ui-branding-grid {
    grid-template-columns: 1fr;
  }
}

[data-variant="v3"] input[type="date"],
[data-variant="v3"] input[type="datetime-local"],
[data-variant="v3"] input[type="month"],
[data-variant="v3"] input[type="time"] {
  color-scheme: dark;
}

input[type="date"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator,
input[type="month"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: .7;
}

[data-variant="v3"] input[type="date"]::-webkit-calendar-picker-indicator,
[data-variant="v3"] input[type="datetime-local"]::-webkit-calendar-picker-indicator,
[data-variant="v3"] input[type="month"]::-webkit-calendar-picker-indicator,
[data-variant="v3"] input[type="time"]::-webkit-calendar-picker-indicator {
  filter: invert(1);
  opacity: .78;
}

[data-variant="v3"] * {
  scrollbar-color: #5c5c68 #111116;
}

[data-variant="v3"] *::-webkit-scrollbar {
  height: 12px;
  width: 12px;
}

[data-variant="v3"] *::-webkit-scrollbar-track {
  background: #111116;
}

[data-variant="v3"] *::-webkit-scrollbar-thumb {
  background: #50505b;
  border: 3px solid #111116;
  border-radius: 999px;
}

[data-variant="v3"] *::-webkit-scrollbar-button {
  display: none;
  height: 0;
  width: 0;
}

@media (max-width: 980px) {
  .pages {
    padding: 18px;
  }

  .page-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .chat-shell {
    grid-template-columns: 1fr;
  }

  .chat-main {
    min-height: 620px;
  }

  .page-head-actions {
    justify-content: flex-start;
    width: 100%;
  }

  .wi-modal-grid {
    grid-template-columns: 1fr;
  }

  .wi-modal-panel header,
  .wi-modal-panel footer {
    flex-direction: column;
  }

  .project-360-grid {
    grid-template-columns: 1fr;
  }

  .project-360-grid > .project-detail-card {
    grid-column: auto;
  }

  .client-360-hero,
  .client-360-grid,
  .client-360-lists {
    grid-template-columns: 1fr;
  }

  .project-detail-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .file-version-grid {
    grid-template-columns: 1fr;
  }

  .file-version-item {
    align-items: flex-start;
    grid-template-columns: 44px minmax(0, 1fr);
  }

.file-version-item em,
  .file-version-item .btn {
    grid-column: 2;
    justify-self: flex-start;
  }
}

/* Segmented control (card/list toggle) */
.segmented {
  align-items: center;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  display: inline-flex;
  gap: 2px;
  padding: 3px;
}

.segmented button {
  background: transparent;
  border: none;
  border-radius: 999px;
  color: var(--muted);
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 500;
  padding: 4px 12px;
  transition: background .15s, color .15s;
  white-space: nowrap;
}

.segmented button:hover {
  color: var(--text);
}

.segmented button[data-active] {
  background: var(--panel);
  box-shadow: 0 1px 3px rgba(0,0,0,.12);
  color: var(--text);
  font-weight: 600;
}

.notes-view-switch {
  min-height: 34px;
}

.notes-grid.notes-grid-list {
  display: block;
}

.notes-table {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.notes-table-head,
.notes-table-row {
  align-items: center;
  display: grid;
  gap: 14px;
  grid-template-columns: 34px minmax(220px, 1.4fr) minmax(160px, .9fr) minmax(130px, .75fr) 130px auto;
}

.notes-table-head {
  background: var(--panel-2);
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  padding: 10px 14px;
  text-transform: uppercase;
}

.notes-table-row {
  background: var(--panel);
  border-top: 1px solid var(--line);
  padding: 12px 14px;
}

.notes-table-row strong,
.notes-table-row span {
  display: block;
}

.notes-table-row strong {
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
}

.notes-table-row span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.notes-row-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

@media (max-width: 1100px) {
  .notes-table-head {
    display: none;
  }

  .notes-table-row {
    grid-template-columns: 28px minmax(0, 1fr);
  }

  .notes-table-row > *:not(.notes-row-actions):not(input) {
    grid-column: 2;
  }

  .notes-row-actions {
    grid-column: 2;
    justify-content: flex-start;
  }
}

@media (max-width: 1280px) {
  .page[data-page="attendance"] .manual-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .page[data-page="attendance"] .mini-form {
    grid-template-columns: 1fr;
  }

  .page[data-page="attendance"] .mini-form > label:nth-child(5),
  .page[data-page="attendance"] .mini-form > label:nth-child(6),
  .page[data-page="attendance"] .mini-form > button {
    grid-column: 1;
  }

  .page[data-page="attendance"] .mini-form > button {
    justify-self: stretch;
  }
}

/* ── Global overflow / layout containment fixes ──────────────────────────── */
/* Prevent any page from causing a horizontal scrollbar in .main */
.pages,
.page {
  min-width: 0;
  max-width: 100%;
}

/* Calendar grid: use minmax(0,1fr) so cells can shrink below content width */
.cal-row-h,
.cal-grid {
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

/* Page-head title must not push head wider than viewport */
.page-head {
  min-width: 0;
}

.page-head-actions {
  min-width: 0;
  flex-shrink: 0;
}

/* Toolbar wrappers on list pages */
.data-toolbar,
.file-toolbar,
.mail-tools {
  flex-wrap: wrap;
  min-width: 0;
}

/* Tables: prevent wide tables from creating layout overflow */
.data,
.tbl-wrap {
  max-width: 100%;
}


/* ============================================================
   SPEC WRITER v2  -  .sv-* component styles
   ============================================================ */

/* Page layout override */
.page[data-page="spec"][data-active] {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  padding: 0;
}

/* Topbar */
.sv-topbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  height: 50px;
  min-height: 50px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}
.sv-topbar-left {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex-shrink: 0;
}
.sv-topbar-right {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  margin-left: auto;
}
.sv-topbar-sep {
  width: 1px;
  height: 20px;
  background: var(--line);
  margin: 0 4px;
  flex-shrink: 0;
}

/* Title input */
.sv-title-input {
  border: none;
  background: transparent;
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  width: 220px;
  padding: 4px 6px;
  border-radius: var(--radius-sm);
  outline: none;
  transition: background .15s;
}
.sv-title-input:hover { background: var(--panel-2); }
.sv-title-input:focus { background: var(--panel-2); outline: 1.5px solid var(--accent); }

/* Save state */
.sv-save-state,
.sv-doc-save-state {
  font-size: 11px;
  color: var(--muted-2);
  white-space: nowrap;
  flex-shrink: 0;
}
.sv-save-state.saving, .sv-doc-save-state.saving { color: var(--accent); }
.sv-save-state.saved,  .sv-doc-save-state.saved  { color: var(--success); }
.sv-save-state.error,  .sv-doc-save-state.error  { color: var(--danger); }

/* Section nav – prev / counter+title+dropdown / next */
.sv-nav {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1 1 0;
  min-width: 0;
}
.sv-nav-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  flex-shrink: 0;
  transition: background .1s, color .1s, border-color .1s;
}
.sv-nav-arrow:hover:not(:disabled) { background: var(--panel-2); color: var(--text); border-color: var(--line-strong); }
.sv-nav-arrow:disabled { opacity: .35; cursor: not-allowed; }
.sv-nav-arrow .ic { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sv-nav-mid { position: relative; flex: 1; min-width: 0; }
.sv-nav-label {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 5px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--panel-2);
  color: var(--text);
  cursor: pointer;
  font-size: 13px;
  font-family: inherit;
  text-align: left;
  transition: border-color .15s, background .1s;
  white-space: nowrap;
  overflow: hidden;
}
.sv-nav-label:hover { border-color: var(--accent); background: var(--panel); }
.sv-nav-pos {
  font-size: 11px;
  font-weight: 700;
  color: var(--accent);
  background: var(--accent-soft);
  padding: 1px 7px;
  border-radius: 8px;
  flex-shrink: 0;
  white-space: nowrap;
}
.sv-nav-text { flex: 1; overflow: hidden; text-overflow: ellipsis; font-weight: 500; }
.sv-nav-chevron { width: 14px; height: 14px; stroke: var(--muted-2); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.sv-nav-drop {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: var(--panel);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(0,0,0,.14);
  z-index: 200;
  list-style: none;
  margin: 0;
  padding: 5px;
  max-height: 300px;
  overflow-y: auto;
}
.sv-nav-drop[hidden] { display: none; }
.sv-drop-item { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: var(--radius-sm); cursor: pointer; font-size: 13px; color: var(--text); transition: background .1s; }
.sv-drop-item:hover { background: var(--panel-2); }
.sv-drop-item.active { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.sv-drop-pos { font-size: 11px; color: var(--muted-2); min-width: 20px; flex-shrink: 0; }

/* Two-column layout */
.sv-layout {
  display: flex;
  flex: 1 1 0;
  min-height: 0;
  overflow: hidden;
}

/* Left panel */
.sv-left {
  width: 370px;
  min-width: 280px;
  max-width: 430px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--line);
  background: var(--panel);
  overflow: hidden;
}

/* CRM bar */
.sv-crm-bar {
  padding: 7px 14px;
  background: var(--panel-2);
  border-bottom: 1px solid var(--line);
  font-size: 12.5px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  flex-shrink: 0;
}
.sv-crm-info { font-weight: 600; color: var(--text); }
.sv-crm-email { color: var(--muted); }
.sv-badge-status {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  background: var(--accent-soft);
  color: var(--accent);
}

/* Questions panel */
.sv-questions {
  flex: 1 1 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 14px;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.sv-loading { padding: 20px 0; text-align: center; }

.sv-sec-header { margin-bottom: 12px; }
.sv-sec-header h3 { font-size: 14px; font-weight: 700; color: var(--text); margin: 0 0 4px; }
.sv-sec-intro { font-size: 12.5px; color: var(--muted); margin: 0; line-height: 1.5; }

/* Individual question */
.sv-question { margin-bottom: 14px; }
.sv-q-hidden { display: none; }
.sv-q-flash { animation: sv-q-highlight .8s ease; }
@keyframes sv-q-highlight {
  0%   { background: var(--accent-soft); border-radius: var(--radius-sm); }
  100% { background: transparent; }
}
.sv-q-label {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 5px;
  line-height: 1.3;
}
.sv-req { color: var(--danger); font-weight: 700; }
.sv-badge-int {
  display: inline-flex;
  align-items: center;
  padding: 1px 6px;
  border-radius: 8px;
  font-size: 10px;
  font-weight: 600;
  background: var(--brand-soft);
  color: var(--brand);
  margin-left: auto;
}

/* Form controls */
.sv-input,
.sv-textarea,
.sv-select {
  width: 100%;
  padding: 6px 10px;
  font-size: 13px;
  color: var(--text);
  background: var(--panel-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  outline: none;
  transition: border-color .15s, box-shadow .15s;
  box-sizing: border-box;
  font-family: inherit;
}
.sv-input:focus, .sv-textarea:focus, .sv-select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-soft);
}
.sv-textarea { resize: vertical; min-height: 70px; line-height: 1.5; }
.sv-select { cursor: pointer; }

/* Radio/checkbox groups */
.sv-opts { display: flex; flex-direction: column; gap: 4px; }
.sv-opt-label {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 13px;
  color: var(--text);
  line-height: 1.3;
  transition: background .1s;
  border: 1px solid transparent;
}
.sv-opt-label:hover { background: var(--panel-2); }
.sv-opt-label input[type="radio"],
.sv-opt-label input[type="checkbox"] {
  margin-top: 2px;
  accent-color: var(--accent);
  flex-shrink: 0;
  cursor: pointer;
}
.sv-opt-label:has(input:checked) {
  background: var(--accent-soft);
  border-color: var(--accent-soft);
}

/* Custom "Egyeb" input */
.sv-custom-wrap { margin-top: 4px; margin-left: 26px; display: flex; align-items: center; gap: 6px; }
.sv-custom-wrap[hidden] { display: none !important; }
.sv-custom-input { flex: 1; min-width: 0; box-sizing: border-box; }
.sv-custom-ok { flex-shrink: 0; height: 30px; padding: 0 10px; font-size: 12px; }

/* Missing data – document block (last block in right panel) */
.sv-missing-doc {
  margin-top: 32px;
  padding: 14px 16px;
  border: 1.5px dashed color-mix(in srgb, var(--warning) 60%, transparent);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--warning) 6%, transparent);
  user-select: none;
}
.sv-missing-doc-head {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 700;
  color: var(--warning);
  margin-bottom: 10px;
}
.sv-missing-doc-head .ic {
  width: 16px; height: 16px;
  stroke: var(--warning); fill: none; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
  flex-shrink: 0;
}
.sv-missing-doc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.sv-missing-doc-list li { display: contents; }
.sv-missing-link {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
  color: var(--warning);
  background: color-mix(in srgb, var(--warning) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--warning) 25%, transparent);
  cursor: pointer;
  text-decoration: none;
  transition: background .1s;
}
.sv-missing-link:hover { background: color-mix(in srgb, var(--warning) 22%, transparent); }

/* Right panel */
.sv-right {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  overflow: hidden;
  position: relative;
}

/* Toolbar */
.sv-toolbar {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 4px 10px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
  flex-wrap: wrap;
}
.sv-tb-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: var(--radius-sm);
  border: none;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 13px;
  font-family: inherit;
  transition: background .1s, color .1s;
}
.sv-tb-btn:hover { background: var(--panel-2); color: var(--text); }
.sv-tb-btn.active { background: var(--accent-soft); color: var(--accent); }
.sv-tb-btn .ic {
  width: 16px; height: 16px;
  stroke: currentColor; fill: none;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.sv-tb-italic { font-style: italic; }
.sv-tb-sep { width: 1px; height: 20px; background: var(--line); margin: 0 3px; flex-shrink: 0; }
.sv-tb-format {
  height: 28px;
  padding: 0 6px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--panel-2);
  color: var(--text);
  font-size: 12.5px;
  cursor: pointer; outline: none;
}
.sv-tb-format:focus { border-color: var(--accent); }
.sv-tb-spacer { flex: 1; }

/* Document editor */
.sv-document {
  flex: 1 1 0;
  overflow-y: auto;
  padding: 32px 36px 32px 28px;
  outline: none;
  font-size: 14px;
  line-height: 1.7;
  color: var(--text);
  min-height: 0;
  background: var(--panel);
}
.sv-document:empty::before,
.sv-document[data-placeholder]:empty::before {
  content: attr(data-placeholder);
  color: var(--muted-2);
  pointer-events: none;
  font-style: italic;
}
.sv-document h1 { font-size: 20px; font-weight: 700; margin: 16px 0 6px; }
.sv-document h2 { font-size: 16px; font-weight: 700; margin: 14px 0 5px; }
.sv-document h3 { font-size: 14.5px; font-weight: 700; margin: 10px 0 4px; }
.sv-document p  { margin: 0 0 5px; }
.sv-document ul, .sv-document ol { margin: 0 0 6px; padding-left: 20px; }
.sv-document li { margin-bottom: 2px; }
.sv-document a  { color: var(--accent); text-decoration: underline; }

/* Blocks – flowing prose, no cards */
.sv-block {
  margin-bottom: 6px;
  padding-left: 12px;
  border-left: 3px solid transparent;
  position: relative;
  transition: border-color .2s;
}
/* Blocks WITH a heading get extra top space so sections are separated */
.sv-block:has(.sv-block-h) { margin-top: 20px; margin-bottom: 4px; }
.sv-block:first-child { margin-top: 0; }
.sv-block:hover { border-left-color: var(--line-strong); }
.sv-block-edited { border-left-color: var(--accent); }
.sv-block[data-orphaned="true"] { opacity: .55; border-left-color: var(--warning); }

/* Block heading (h3 inside the doc, non-editable) */
.sv-block-h {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 3px;
  user-select: none;
  cursor: default;
}

/* Small dot indicating manual edit */
.sv-edited-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
}

/* ↖ relink button (jumps to left-panel question) */
.sv-block-relink {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 4px;
  border: none;
  background: transparent;
  color: var(--muted-2);
  cursor: pointer;
  font-size: 13px;
  opacity: 0;
  transition: opacity .15s, background .1s, color .1s;
  flex-shrink: 0;
}
.sv-block:hover .sv-block-relink { opacity: 1; }
.sv-block-relink:hover { background: var(--accent-soft); color: var(--accent); }

/* Editable prose area */
.sv-block-body {
  outline: none;
  min-height: 20px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text);
}
.sv-block-body p { margin: 0 0 5px; }
.sv-block-body p:last-child,
.sv-block-body ul:last-child,
.sv-block-body ol:last-child { margin-bottom: 0; }

/* Flash highlight on new/updated block */
@keyframes sv-block-glow {
  0%   { border-left-color: var(--accent); background: var(--accent-soft); }
  70%  { border-left-color: var(--accent); background: var(--accent-soft); }
  100% { border-left-color: transparent; background: transparent; }
}
.sv-block-flash { animation: sv-block-glow 1s ease forwards; }

/* Document picker */
.sv-doc-picker {
  position: absolute;
  top: 50px;
  right: 12px;
  width: 320px;
  max-height: 400px;
  background: var(--panel);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
  display: flex;
  flex-direction: column;
  z-index: 100;
  overflow: hidden;
}
.sv-doc-picker[hidden] { display: none; }
.sv-doc-picker-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
  flex-shrink: 0;
}
.sv-doc-picker-list { list-style: none; margin: 0; padding: 6px; overflow-y: auto; flex: 1; }
.sv-picker-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background .1s;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
.sv-picker-item:hover { background: var(--panel-2); }
.sv-picker-item-meta { font-size: 11px; font-weight: 400; color: var(--muted-2); }
.sv-picker-row { display: flex; align-items: center; gap: 4px; }
.sv-picker-row .sv-picker-item { flex: 1; }
.sv-picker-docx { flex-shrink: 0; font-size: 11px; padding: 2px 8px; height: 26px; }

/* Responsive */
@media (max-width: 900px) {
  .sv-left { width: 300px; min-width: 240px; }
  .sv-document { padding: 18px 20px; }
  .sv-title-input { width: 160px; }
}
@media (max-width: 680px) {
  .sv-topbar { flex-wrap: wrap; height: auto; padding: 6px 10px; }
  .sv-section-nav { order: 3; width: 100%; flex: none; }
  .sv-layout { flex-direction: column; }
  .sv-left { width: 100%; max-width: none; height: 260px; border-right: none; border-bottom: 1px solid var(--line); }
}