html[data-theme="dark"], body[data-theme="dark"] {
  --bg: #0b1020;
  --panel: #111827;
  --panel-2: #1f2937;
  --muted: #94a3b8;
  --text: #e5e7eb;
  --line: rgba(148, 163, 184, 0.18);
  --primary: #38bdf8;
  --warning: #f59e0b;
  --danger: #ef4444;
  --success: #10b981;
  --bg-gradient: radial-gradient(circle at top, #111827 0%, #020617 60%);
  --sidebar-bg: rgba(15, 23, 42, 0.86);
  --card-bg: rgba(17, 24, 39, 0.9);
  --panel-soft: rgba(15, 23, 42, 0.86);
  --surface-bg: rgba(2, 6, 23, 0.42);
  --surface-bg-2: rgba(2, 6, 23, 0.45);
  --input-bg: rgba(2, 6, 23, 0.9);
  --chip-bg: rgba(148, 163, 184, 0.12);
  --chip-text: var(--text);
  --empty-bg: rgba(148, 163, 184, 0.06);
  --task-desc: #d7e3f4;
  --soft-text: #dbe7f8;
  --label-strong: #dbeafe;
  --status-preview-bg: rgba(2, 6, 23, 0.42);
  --status-preview-body-bg: rgba(148, 163, 184, 0.08);
  --utility-bg: rgba(11, 16, 32, 0.7);
  --utility-chip-bg: rgba(148, 163, 184, 0.08);
  --utility-chip-hover: rgba(56, 189, 248, 0.1);
  color-scheme: dark;
}

.ai-task-form.is-dragging-file {
  outline: 2px dashed #38bdf8;
  outline-offset: 4px;
  background: rgba(56, 189, 248, 0.08);
}

.ai-form-actions {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
  align-items: center;
}

.ai-file-strip {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.ai-file-chip,
.ai-task-ref {
  border: 1px solid rgba(14, 165, 233, 0.35);
  background: rgba(14, 165, 233, 0.1);
  color: #0369a1;
  border-radius: 999px;
  padding: 5px 9px;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.ai-file-chip:hover,
.ai-task-ref:hover {
  background: rgba(14, 165, 233, 0.18);
}

.task-preview-modal {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: none;
}

.task-preview-modal:not([hidden]) {
  display: block;
}

.task-preview-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.58);
}

.task-preview-dialog {
  position: relative;
  width: min(760px, calc(100vw - 32px));
  max-height: min(760px, calc(100vh - 32px));
  margin: 16px auto;
  overflow: auto;
  border-radius: 18px;
  border: 1px solid rgba(148, 163, 184, 0.35);
  background: #ffffff;
  color: #0f172a;
  box-shadow: 0 28px 80px rgba(15, 23, 42, 0.28);
}

.task-preview-toolbar {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.24);
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(12px);
}

.task-preview-toolbar h3 {
  margin: 4px 0 0;
}

.task-preview-content {
  padding: 20px;
}

.task-preview-meta-row,
.task-preview-files {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.task-preview-desc {
  margin: 14px 0;
  line-height: 1.7;
  color: #334155;
}

.task-preview-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 16px 0;
}

.task-preview-facts div,
.task-preview-log {
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 10px;
  padding: 10px 12px;
  background: #f8fafc;
  color: #0f172a;
}

.task-preview-facts span,
.task-preview-log span {
  display: block;
  color: #64748b;
  font-size: 12px;
}

.task-preview-facts strong,
.task-preview-log strong {
  color: #0f172a;
}

.task-preview-section {
  margin-top: 18px;
}

.task-preview-section h4 {
  margin: 0 0 10px;
}

.task-preview-log + .task-preview-log {
  margin-top: 8px;
}

.task-preview-log p {
  margin: 6px 0 0;
  line-height: 1.6;
  color: #334155;
}

.task-preview-file {
  border: 1px solid rgba(14, 165, 233, 0.26);
  border-radius: 999px;
  padding: 6px 10px;
  text-decoration: none;
  color: #0369a1;
  font-weight: 700;
}

body.task-preview-open {
  overflow: hidden;
}

:root, html[data-theme="light"], body[data-theme="light"] {
  --bg: #edf2f7;
  --panel: #ffffff;
  --panel-2: #f8fafc;
  --muted: #64748b;
  --text: #0f172a;
  --line: rgba(100, 116, 139, 0.2);
  --primary: #0284c7;
  --warning: #d97706;
  --danger: #dc2626;
  --success: #059669;
  --bg-gradient: linear-gradient(180deg, #ffffff 0%, #eef4fb 100%);
  --sidebar-bg: rgba(255, 255, 255, 0.92);
  --card-bg: rgba(255, 255, 255, 0.95);
  --panel-soft: rgba(248, 250, 252, 0.95);
  --surface-bg: rgba(241, 245, 249, 0.92);
  --surface-bg-2: rgba(248, 250, 252, 0.95);
  --input-bg: #ffffff;
  --chip-bg: rgba(226, 232, 240, 0.9);
  --chip-text: #0f172a;
  --empty-bg: rgba(226, 232, 240, 0.6);
  --task-desc: #334155;
  --soft-text: #334155;
  --label-strong: #0f172a;
  --status-preview-bg: rgba(255, 255, 255, 0.95);
  --status-preview-body-bg: rgba(241, 245, 249, 0.92);
  --utility-bg: rgba(255, 255, 255, 0.86);
  --utility-chip-bg: rgba(241, 245, 249, 0.96);
  --utility-chip-hover: rgba(224, 242, 254, 0.95);
  color-scheme: light;
}

html[data-theme="pink"], body[data-theme="pink"] {
  --bg: #fff1f6;
  --panel: #ffffff;
  --panel-2: #fff7fb;
  --muted: #7c5471;
  --text: #4a243f;
  --line: rgba(190, 24, 93, 0.16);
  --primary: #db2777;
  --warning: #ea580c;
  --danger: #e11d48;
  --success: #059669;
  --bg-gradient: linear-gradient(180deg, #fff7fb 0%, #ffe4ee 100%);
  --sidebar-bg: rgba(255, 248, 251, 0.92);
  --card-bg: rgba(255, 255, 255, 0.94);
  --panel-soft: rgba(255, 247, 251, 0.96);
  --surface-bg: rgba(255, 240, 246, 0.88);
  --surface-bg-2: rgba(255, 247, 251, 0.94);
  --input-bg: #fffdfd;
  --chip-bg: rgba(251, 207, 232, 0.55);
  --chip-text: #6b2148;
  --empty-bg: rgba(251, 207, 232, 0.36);
  --task-desc: #6b2148;
  --soft-text: #6b2148;
  --label-strong: #4a243f;
  --status-preview-bg: rgba(255, 255, 255, 0.94);
  --status-preview-body-bg: rgba(255, 240, 246, 0.88);
  --utility-bg: rgba(255, 248, 251, 0.9);
  --utility-chip-bg: rgba(255, 240, 246, 0.9);
  --utility-chip-hover: rgba(251, 207, 232, 0.6);
  color-scheme: light;
}

html[data-theme="green"], body[data-theme="green"] {
  --bg: #eefcf4;
  --panel: #ffffff;
  --panel-2: #f5fff8;
  --muted: #4b6b5a;
  --text: #173127;
  --line: rgba(22, 163, 74, 0.16);
  --primary: #16a34a;
  --warning: #ca8a04;
  --danger: #dc2626;
  --success: #059669;
  --bg-gradient: linear-gradient(180deg, #f7fff9 0%, #ddfbe8 100%);
  --sidebar-bg: rgba(247, 255, 249, 0.92);
  --card-bg: rgba(255, 255, 255, 0.95);
  --panel-soft: rgba(245, 255, 248, 0.96);
  --surface-bg: rgba(236, 253, 245, 0.92);
  --surface-bg-2: rgba(247, 255, 249, 0.94);
  --input-bg: #ffffff;
  --chip-bg: rgba(187, 247, 208, 0.56);
  --chip-text: #14532d;
  --empty-bg: rgba(187, 247, 208, 0.38);
  --task-desc: #22543d;
  --soft-text: #22543d;
  --label-strong: #173127;
  --status-preview-bg: rgba(255, 255, 255, 0.95);
  --status-preview-body-bg: rgba(236, 253, 245, 0.92);
  --utility-bg: rgba(247, 255, 249, 0.88);
  --utility-chip-bg: rgba(236, 253, 245, 0.92);
  --utility-chip-hover: rgba(187, 247, 208, 0.5);
  color-scheme: light;
}

html[data-theme="blue"], body[data-theme="blue"] {
  --bg: #eaf8ff;
  --panel: #ffffff;
  --panel-2: #f3fbff;
  --muted: #466982;
  --text: #123047;
  --line: rgba(14, 165, 233, 0.18);
  --primary: #0ea5e9;
  --warning: #d97706;
  --danger: #dc2626;
  --success: #059669;
  --bg-gradient: linear-gradient(135deg, #f8fcff 0%, #e0f7ff 46%, #cfefff 100%);
  --sidebar-bg: rgba(245, 252, 255, 0.9);
  --card-bg: rgba(255, 255, 255, 0.94);
  --panel-soft: rgba(240, 249, 255, 0.95);
  --surface-bg: rgba(224, 242, 254, 0.74);
  --surface-bg-2: rgba(240, 249, 255, 0.94);
  --input-bg: #ffffff;
  --chip-bg: rgba(186, 230, 253, 0.62);
  --chip-text: #075985;
  --empty-bg: rgba(186, 230, 253, 0.35);
  --task-desc: #1f4f6b;
  --soft-text: #1f4f6b;
  --label-strong: #123047;
  --status-preview-bg: rgba(255, 255, 255, 0.94);
  --status-preview-body-bg: rgba(224, 242, 254, 0.72);
  --utility-bg: rgba(240, 249, 255, 0.86);
  --utility-chip-bg: rgba(224, 242, 254, 0.86);
  --utility-chip-hover: rgba(186, 230, 253, 0.7);
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg-gradient); color: var(--text); font-family: Inter, -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif; transition: background 0.28s ease, color 0.28s ease; }
a { color: inherit; text-decoration: none; }
body { min-height: 100vh; }
.layout { display: flex; min-height: 100vh; }
.sidebar { width: 300px; padding: 24px; border-right: 1px solid var(--line); background: var(--sidebar-bg); backdrop-filter: blur(20px); position: sticky; top: 0; align-self: flex-start; height: 100vh; transition: background 0.28s ease, border-color 0.28s ease; }
.main { flex: 1; padding: 28px; }
.main.full { width: 100%; }
.brand h1 { margin: 12px 0 6px; font-size: 24px; }
.brand p { margin: 0; color: var(--muted); line-height: 1.5; }
.brand-badge, .badge { display: inline-block; padding: 6px 10px; border-radius: 999px; background: rgba(56, 189, 248, 0.12); color: var(--primary); font-size: 12px; font-weight: 700; letter-spacing: 0.04em; }
.nav { display: flex; flex-direction: column; gap: 10px; margin: 28px 0; }
.nav-link { padding: 12px 14px; border-radius: 12px; background: rgba(148, 163, 184, 0.08); border: 1px solid transparent; }
.nav-link:hover { border-color: rgba(56, 189, 248, 0.25); background: rgba(56, 189, 248, 0.08); }
.user-card { padding: 16px; border-radius: 18px; background: rgba(148, 163, 184, 0.08); border: 1px solid var(--line); }
.user-title { color: var(--muted); font-size: 12px; }
.user-name { font-size: 20px; margin: 6px 0; font-weight: 700; }
.user-help { margin: 14px 0 18px; line-height: 1.6; }
.page-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 24px; }
.page-head h2 { margin: 10px 0 8px; font-size: 32px; }
.task-hero { margin-bottom: 18px; }
.task-desc { margin: 0; max-width: 980px; line-height: 1.8; color: var(--task-desc); white-space: pre-wrap; word-break: break-word; }
.muted { color: var(--muted); }
.card { background: var(--card-bg); border: 1px solid var(--line); border-radius: 20px; padding: 20px; margin-bottom: 20px; box-shadow: 0 24px 48px rgba(2, 6, 23, 0.12); transition: background 0.28s ease, border-color 0.28s ease, box-shadow 0.28s ease; }
.card.no-padding { padding: 0; overflow: hidden; }
.form-card.narrow { max-width: 760px; }
.stack-gap { display: flex; flex-direction: column; gap: 14px; }
.inner-form { padding: 16px; border-radius: 16px; border: 1px solid var(--line); background: var(--surface-bg); transition: background 0.28s ease, border-color 0.28s ease; }
.inner-form.compact { margin-bottom: 18px; }
.form-title { font-weight: 700; margin-bottom: 6px; }
.login-shell { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.login-card { width: min(560px, 100%); background: var(--panel-soft); border: 1px solid var(--line); border-radius: 28px; padding: 28px; box-shadow: 0 30px 60px rgba(2, 6, 23, 0.18); transition: background 0.28s ease, border-color 0.28s ease; }
.login-card h2 { font-size: 34px; margin: 14px 0 10px; }
.demo-accounts { margin-top: 20px; padding: 16px; border-radius: 16px; background: var(--chip-bg); line-height: 1.8; }
label { display: flex; flex-direction: column; gap: 8px; font-size: 14px; }
label span { color: var(--muted); }
input, select, textarea, button { font: inherit; }
input, select, textarea { width: 100%; padding: 12px 14px; border-radius: 12px; border: 1px solid rgba(148, 163, 184, 0.24); background: var(--input-bg); color: var(--text); outline: none; transition: background 0.28s ease, border-color 0.28s ease, color 0.28s ease; }
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
button:focus-visible,
a:focus-visible,
summary:focus-visible {
  outline: 3px solid rgba(2, 132, 199, 0.34);
  outline-offset: 2px;
}
input[type="date"], input[type="datetime-local"] { cursor: pointer; color-scheme: inherit; }
.date-picker-field { cursor: pointer; }
.date-picker-field span,
.date-picker-field input { cursor: pointer; }
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator { cursor: pointer; opacity: 0.9; }
input:focus, select:focus, textarea:focus { border-color: rgba(56, 189, 248, 0.5); box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.14); }
textarea { resize: vertical; }
.btn { display: inline-flex; align-items: center; justify-content: center; padding: 11px 16px; border-radius: 12px; border: 1px solid transparent; cursor: pointer; font-weight: 600; }
.btn-block { width: 100%; }
.btn-primary { background: rgba(56, 189, 248, 0.18); color: var(--primary); border-color: rgba(56, 189, 248, 0.35); }
.btn-primary:hover { background: rgba(56, 189, 248, 0.24); }
.btn-secondary { background: rgba(148, 163, 184, 0.12); color: var(--text); border-color: var(--line); }
.btn-secondary:hover { background: rgba(148, 163, 184, 0.16); }
.btn-ghost { background: transparent; color: var(--muted); border-color: var(--line); }
.btn-ghost:hover { color: var(--text); }
.btn-warning { background: rgba(245, 158, 11, 0.16); color: #fbbf24; border-color: rgba(245, 158, 11, 0.3); }
.btn-success { background: rgba(16, 185, 129, 0.16); color: #6ee7b7; border-color: rgba(16, 185, 129, 0.32); }
.btn-success:hover { background: rgba(16, 185, 129, 0.23); }
.btn-danger { background: rgba(239, 68, 68, 0.15); color: #fca5a5; border-color: rgba(239, 68, 68, 0.3); }
.alert { padding: 12px 14px; border-radius: 12px; }
.alert.error { background: rgba(239, 68, 68, 0.14); border: 1px solid rgba(239, 68, 68, 0.32); color: #fda4af; }
.alert.success { background: rgba(16, 185, 129, 0.14); border: 1px solid rgba(16, 185, 129, 0.32); color: #86efac; }
.compact-grid { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
.accounts-top-grid { grid-template-columns: 0.95fr 1.05fr; }
.form-inline-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.info-panel { margin-top: 16px; padding: 16px; border-radius: 16px; background: rgba(2, 6, 23, 0.42); border: 1px solid var(--line); line-height: 1.8; }
.account-table { min-width: 1320px; }
.account-actions { display: flex; flex-direction: column; gap: 10px; min-width: 260px; }
.inline-form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.inline-form input { min-width: 120px; flex: 1; }
.btn-small { padding: 9px 12px; font-size: 13px; }
.status.account-active { background: rgba(16, 185, 129, 0.14); color: #6ee7b7; }
.status.account-inactive { background: rgba(148, 163, 184, 0.14); color: #cbd5e1; }
.status.account-password-set { background: rgba(56, 189, 248, 0.12); color: #7dd3fc; }
.status.account-password-pending { background: rgba(245, 158, 11, 0.15); color: #fbbf24; }
.account-table-wide { min-width: 1480px; }
.compact-note { margin-top: 0; line-height: 1.7; }
.summary-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px; margin-bottom: 20px; }
.summary-card { position: relative; overflow: hidden; padding: 18px; border-radius: 18px; background: var(--panel-soft); border: 1px solid var(--line); transition: background 0.28s ease, border-color 0.28s ease, box-shadow 0.28s ease, transform 0.28s ease; }
.summary-card:hover { border-color: rgba(56, 189, 248, 0.25); }
.summary-number { font-size: 30px; font-weight: 800; }
.summary-label { margin-top: 8px; color: var(--muted); }
.summary-card-action {
  border-color: rgba(248, 113, 113, 0.72);
  background: linear-gradient(135deg, rgba(127, 29, 29, 0.34), rgba(245, 158, 11, 0.14) 58%, var(--panel-soft));
  box-shadow: 0 0 0 1px rgba(248, 113, 113, 0.22) inset, 0 0 26px rgba(248, 113, 113, 0.2);
  animation: summary-action-blink 1.35s ease-in-out infinite;
}
.summary-card-action::before {
  content: "";
  position: absolute;
  inset: -42%;
  background: radial-gradient(circle, rgba(248, 113, 113, 0.28), transparent 58%);
  opacity: 0;
  transform: scale(0.84);
  pointer-events: none;
  animation: summary-action-glow 1.35s ease-in-out infinite;
}
.summary-card-action .summary-number { color: #fecaca; text-shadow: 0 0 16px rgba(248, 113, 113, 0.55); }
.summary-card-action .summary-label { color: #fed7aa; font-weight: 800; }
.summary-action-hint {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 10px;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(239, 68, 68, 0.2);
  color: #fee2e2;
  border: 1px solid rgba(248, 113, 113, 0.34);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.02em;
}
.summary-card-action.summary-status-waiting_owner_confirmation {
  border-color: rgba(251, 191, 36, 0.72);
  background: linear-gradient(135deg, rgba(120, 53, 15, 0.38), rgba(251, 191, 36, 0.16) 58%, var(--panel-soft));
  box-shadow: 0 0 0 1px rgba(251, 191, 36, 0.24) inset, 0 0 26px rgba(251, 191, 36, 0.18);
}
.summary-card-action.summary-status-waiting_owner_confirmation::before { background: radial-gradient(circle, rgba(251, 191, 36, 0.3), transparent 58%); }
.summary-card-action.summary-status-waiting_owner_confirmation .summary-number { color: #fde68a; text-shadow: 0 0 16px rgba(251, 191, 36, 0.52); }
.summary-card-action.summary-status-waiting_owner_confirmation .summary-label { color: #fef3c7; }
.summary-card-action.summary-status-waiting_owner_confirmation .summary-action-hint {
  background: rgba(245, 158, 11, 0.22);
  color: #fffbeb;
  border-color: rgba(251, 191, 36, 0.38);
}
body[data-theme="light"] .summary-card-action,
body[data-theme="blue"] .summary-card-action,
body[data-theme="pink"] .summary-card-action,
body[data-theme="green"] .summary-card-action {
  background: linear-gradient(135deg, rgba(254, 226, 226, 0.96), rgba(255, 237, 213, 0.9) 58%, var(--panel-soft));
}
body[data-theme="light"] .summary-card-action .summary-number,
body[data-theme="blue"] .summary-card-action .summary-number,
body[data-theme="pink"] .summary-card-action .summary-number,
body[data-theme="green"] .summary-card-action .summary-number { color: #b91c1c; }
body[data-theme="light"] .summary-card-action .summary-label,
body[data-theme="blue"] .summary-card-action .summary-label,
body[data-theme="pink"] .summary-card-action .summary-label,
body[data-theme="green"] .summary-card-action .summary-label { color: #9a3412; }
body[data-theme="light"] .summary-action-hint,
body[data-theme="blue"] .summary-action-hint,
body[data-theme="pink"] .summary-action-hint,
body[data-theme="green"] .summary-action-hint {
  color: #991b1b;
  background: rgba(239, 68, 68, 0.12);
}
body[data-theme="light"] .summary-card-action.summary-status-waiting_owner_confirmation,
body[data-theme="blue"] .summary-card-action.summary-status-waiting_owner_confirmation,
body[data-theme="pink"] .summary-card-action.summary-status-waiting_owner_confirmation,
body[data-theme="green"] .summary-card-action.summary-status-waiting_owner_confirmation {
  background: linear-gradient(135deg, rgba(254, 243, 199, 0.96), rgba(255, 251, 235, 0.92) 58%, var(--panel-soft));
}
body[data-theme="light"] .summary-card-action.summary-status-waiting_owner_confirmation .summary-number,
body[data-theme="blue"] .summary-card-action.summary-status-waiting_owner_confirmation .summary-number,
body[data-theme="pink"] .summary-card-action.summary-status-waiting_owner_confirmation .summary-number,
body[data-theme="green"] .summary-card-action.summary-status-waiting_owner_confirmation .summary-number { color: #92400e; }
body[data-theme="light"] .summary-card-action.summary-status-waiting_owner_confirmation .summary-label,
body[data-theme="blue"] .summary-card-action.summary-status-waiting_owner_confirmation .summary-label,
body[data-theme="pink"] .summary-card-action.summary-status-waiting_owner_confirmation .summary-label,
body[data-theme="green"] .summary-card-action.summary-status-waiting_owner_confirmation .summary-label { color: #78350f; }
@keyframes summary-action-blink {
  0%, 100% { transform: translateY(0) scale(1); filter: brightness(1); }
  42% { transform: translateY(-1px) scale(1.025); filter: brightness(1.22); }
  74% { transform: translateY(0) scale(0.99); filter: brightness(0.84); }
}
@keyframes summary-action-glow {
  0%, 100% { opacity: 0; transform: scale(0.86); }
  44% { opacity: 0.82; transform: scale(1.04); }
  74% { opacity: 0.18; transform: scale(1.14); }
}
@media (prefers-reduced-motion: reduce) {
  .summary-card-action,
  .summary-card-action::before {
    animation: none;
  }
}
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip { padding: 8px 12px; border-radius: 999px; background: var(--chip-bg); color: var(--chip-text); border: 1px solid var(--line); transition: background 0.28s ease, border-color 0.28s ease, color 0.28s ease; }
.filter-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: end; }
.filter-row label { min-width: 180px; }
.filter-row .grow { flex: 1; }
.filter-row .filter-check {
  min-width: 0;
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel-soft);
  cursor: pointer;
  white-space: nowrap;
}
.filter-row .filter-check input { width: 16px; height: 16px; }
.filter-row .filter-check span { font-weight: 700; color: var(--text); }
.table-wrap { overflow: auto; }
table { width: 100%; border-collapse: collapse; min-width: 980px; }
th, td { padding: 14px 16px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
th { font-size: 13px; color: var(--muted); font-weight: 600; }
.table-link { font-weight: 700; color: #bfdbfe; }
.clamp { max-width: 320px; line-height: 1.5; }
.empty, .empty-card { color: var(--muted); text-align: center; padding: 24px; border-radius: 14px; background: var(--empty-bg); }
.status { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px; border: 1px solid var(--line); font-size: 12px; font-weight: 700; }
.status.assigned_manager, .status.handed_worker { background: rgba(56, 189, 248, 0.12); color: #7dd3fc; }
.status.in_progress { background: rgba(234, 179, 8, 0.12); color: #facc15; }
.status.waiting_materials { background: rgba(245, 158, 11, 0.15); color: #fbbf24; }
.status.waiting_owner_confirmation { background: rgba(168, 85, 247, 0.14); color: #d8b4fe; }
.status.paused { background: rgba(245, 158, 11, 0.16); color: #fbbf24; border-color: rgba(245, 158, 11, 0.32); }
.status.completed, .status.closed { background: rgba(16, 185, 129, 0.14); color: #6ee7b7; }
.status.cancelled { background: rgba(239, 68, 68, 0.14); color: #fca5a5; }
.detail-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 20px; align-items: start; }
.detail-grid.action-first { grid-template-columns: 1.02fr 0.98fr; }
.detail-grid.lower { grid-template-columns: 0.9fr 1.1fr; }
.meta-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.meta-grid.meta-lower { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.meta-grid > div { padding: 12px 14px; border-radius: 14px; background: var(--surface-bg-2); border: 1px solid var(--line); transition: background 0.28s ease, border-color 0.28s ease; }
.label { display: block; color: var(--muted); font-size: 12px; margin-bottom: 6px; }
.value { display: block; font-weight: 600; }
.value.multiline { line-height: 1.6; }
.attachment-list, .list-group { display: flex; flex-direction: column; gap: 12px; }
.attachment-item, .list-item { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px; border-radius: 14px; background: var(--surface-bg); border: 1px solid var(--line); transition: background 0.28s ease, border-color 0.28s ease; }
.list-item { flex-direction: column; align-items: flex-start; }
.timeline { display: flex; flex-direction: column; gap: 12px; }
.timeline-item { padding: 14px; border-radius: 16px; background: var(--surface-bg); border: 1px solid var(--line); transition: background 0.28s ease, border-color 0.28s ease; }
.timeline-top { display: flex; justify-content: space-between; gap: 16px; margin-bottom: 8px; }
.timeline-action { font-weight: 700; color: #bfdbfe; }
.timeline-title { font-weight: 700; margin-bottom: 4px; }
.timeline-status, .timeline-note { line-height: 1.6; }
.grid-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.triple-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.head-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.priority-pill { display: inline-flex !important; align-items: center; justify-content: center; gap: 8px; min-width: 72px; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--line); font-size: 12px; font-weight: 800; line-height: 1; white-space: nowrap; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 10px 22px rgba(2, 6, 23, 0.18); }
.priority-pill::before { content: ""; width: 8px; height: 8px; border-radius: 999px; background: currentColor; box-shadow: 0 0 12px currentColor; flex: 0 0 8px; }
.priority-low { background: rgba(148, 163, 184, 0.18) !important; color: #e2e8f0 !important; border-color: rgba(148, 163, 184, 0.34) !important; }
.priority-medium { background: rgba(56, 189, 248, 0.18) !important; color: #7dd3fc !important; border-color: rgba(56, 189, 248, 0.32) !important; }
.priority-high { background: rgba(245, 158, 11, 0.2) !important; color: #fbbf24 !important; border-color: rgba(245, 158, 11, 0.34) !important; }
.priority-urgent { background: rgba(239, 68, 68, 0.2) !important; color: #fca5a5 !important; border-color: rgba(239, 68, 68, 0.36) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 10px 26px rgba(127, 29, 29, 0.28); }
.task-head-tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.task-head-tags .chip { background: rgba(2, 6, 23, 0.46); }
.status-flow-card { padding: 22px; }
.status-flow-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 18px; }
.status-flow-head h3 { margin: 10px 0 0; font-size: 24px; }
.status-flow-current { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.status-track-shell { overflow-x: auto; padding-bottom: 8px; margin-bottom: 16px; }
.status-track-shell::-webkit-scrollbar { height: 8px; }
.status-track-shell::-webkit-scrollbar-thumb { background: rgba(148, 163, 184, 0.22); border-radius: 999px; }
.status-track { display: inline-flex; align-items: flex-start; gap: 26px; min-width: max-content; padding: 6px 4px 8px; }
.status-node { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 104px; padding: 0; border: none; background: transparent; color: var(--muted); cursor: pointer; text-align: center; }
.status-node::before { content: ""; position: absolute; top: 11px; left: -26px; width: 26px; height: 2px; background: rgba(148, 163, 184, 0.24); }
.status-node:first-child::before { display: none; }
.status-node-ball { width: 22px; height: 22px; border-radius: 999px; border: 2px solid rgba(56, 189, 248, 0.42); background: rgba(56, 189, 248, 0.18); box-shadow: 0 0 0 4px rgba(56, 189, 248, 0.08); transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, border-color 0.18s ease; }
.status-node.tone-warning .status-node-ball { border-color: rgba(245, 158, 11, 0.42); background: rgba(245, 158, 11, 0.18); box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.08); }
.status-node.tone-danger .status-node-ball { border-color: rgba(239, 68, 68, 0.42); background: rgba(239, 68, 68, 0.18); box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.08); }
.status-node.tone-success .status-node-ball { border-color: rgba(16, 185, 129, 0.42); background: rgba(16, 185, 129, 0.18); box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.08); }
.status-node.tone-neutral .status-node-ball { border-color: rgba(148, 163, 184, 0.42); background: rgba(148, 163, 184, 0.18); box-shadow: 0 0 0 4px rgba(148, 163, 184, 0.08); }
.status-node:hover .status-node-ball,
.status-node:focus-visible .status-node-ball,
.status-node.is-active .status-node-ball { transform: scale(1.14); }
.status-node.is-latest .status-node-ball { box-shadow: 0 0 0 7px rgba(56, 189, 248, 0.12); }
.status-node.tone-warning.is-latest .status-node-ball { box-shadow: 0 0 0 7px rgba(245, 158, 11, 0.14); }
.status-node.tone-danger.is-latest .status-node-ball { box-shadow: 0 0 0 7px rgba(239, 68, 68, 0.14); }
.status-node.tone-success.is-latest .status-node-ball { box-shadow: 0 0 0 7px rgba(16, 185, 129, 0.14); }
.status-node.tone-neutral.is-latest .status-node-ball { box-shadow: 0 0 0 7px rgba(148, 163, 184, 0.14); }
.status-node-label { font-size: 13px; font-weight: 700; line-height: 1.45; color: #dbeafe; }
.status-node-time { font-size: 12px; line-height: 1.4; color: var(--muted); }
.status-node.is-active .status-node-label,
.status-node:hover .status-node-label,
.status-node:focus-visible .status-node-label { color: #ffffff; }
.status-node:focus-visible { outline: none; }
.status-preview-stack { display: grid; margin-bottom: 16px; }
.status-preview-card { display: none; position: relative; overflow: hidden; padding: 18px; border-radius: 18px; border: 1px solid var(--line); background: var(--status-preview-bg); transition: background 0.28s ease, border-color 0.28s ease; }
.status-preview-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: rgba(56, 189, 248, 0.84); }
.status-preview-card.tone-warning::before { background: rgba(245, 158, 11, 0.9); }
.status-preview-card.tone-danger::before { background: rgba(239, 68, 68, 0.9); }
.status-preview-card.tone-success::before { background: rgba(16, 185, 129, 0.9); }
.status-preview-card.tone-neutral::before { background: rgba(148, 163, 184, 0.76); }
.status-preview-card.is-active { display: block; }
.status-preview-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; margin-bottom: 10px; }
.status-preview-title { font-size: 18px; font-weight: 800; line-height: 1.6; margin-bottom: 12px; }
.status-preview-meta { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.status-preview-meta span { display: inline-flex; align-items: center; padding: 8px 12px; border-radius: 999px; background: var(--surface-bg); border: 1px solid var(--line); color: var(--muted); }
.status-preview-body { padding: 14px 16px; border-radius: 16px; background: var(--status-preview-body-bg); border: 1px solid var(--line); }
.status-preview-label { display: inline-flex; align-items: center; justify-content: center; margin-bottom: 10px; padding: 4px 10px; border-radius: 999px; background: rgba(2, 6, 23, 0.48); color: var(--muted); font-size: 12px; font-weight: 700; }
.status-preview-note { white-space: pre-wrap; line-height: 1.8; word-break: break-word; }
.status-flow-tools { display: flex; flex-direction: column; gap: 12px; }
.status-flow-toggle { border: 1px dashed rgba(148, 163, 184, 0.24); border-radius: 16px; background: var(--surface-bg); overflow: hidden; transition: background 0.28s ease, border-color 0.28s ease; }
.status-flow-toggle[open] { border-style: solid; background: var(--surface-bg-2); }
.status-flow-toggle summary { cursor: pointer; list-style: none; padding: 14px 16px; font-weight: 700; color: #dbeafe; }
.status-flow-toggle summary::-webkit-details-marker { display: none; }
.status-flow-toggle-body { padding: 0 16px 16px; }
.status-action-panel { border: 1px solid rgba(56, 189, 248, 0.24); background: linear-gradient(135deg, rgba(56, 189, 248, 0.12), rgba(168, 85, 247, 0.08)); }
.status-action-panel[open] { border-color: rgba(56, 189, 248, 0.36); }
.status-action-summary { display: flex; align-items: center; gap: 14px; padding: 16px 18px !important; }
.status-action-icon { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 12px; background: rgba(56, 189, 248, 0.20); border: 1px solid rgba(56, 189, 248, 0.28); color: #e0f2fe; font-size: 22px; line-height: 1; font-weight: 800; }
.status-action-copy { display: grid; gap: 3px; flex: 1 1 auto; min-width: 0; }
.status-action-title { font-size: 15px; color: var(--text); }
.status-action-subtitle { color: var(--muted); font-size: 12px; font-weight: 600; line-height: 1.45; }
.status-action-pill { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; padding: 7px 11px; border-radius: 999px; background: rgba(56, 189, 248, 0.18); border: 1px solid rgba(56, 189, 248, 0.28); color: #bae6fd; font-size: 12px; font-weight: 800; }
.owner-quick-actions { border-color: rgba(56, 189, 248, 0.22); background: linear-gradient(135deg, rgba(15, 23, 42, 0.65), rgba(56, 189, 248, 0.08)); }
.owner-quick-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.quick-action-buttons { display: flex; flex-wrap: wrap; gap: 10px; }
.inline-action-form { display: inline-flex; margin: 0; }
.owner-action-btn { min-width: 150px; box-shadow: 0 10px 28px rgba(2, 6, 23, 0.16); }
.resume-paused-form { border-color: rgba(245, 158, 11, 0.28); }
.extra-log-toggle { transition: background 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease; }
.extra-log-toggle.has-soft-flash { animation: extra-log-soft-flash 3s ease-out 1; }
.extra-log-toggle.has-soft-flash-loop { animation: extra-log-soft-flash 2.35s ease-in-out infinite; }
.mini-log-list { display: flex; flex-direction: column; gap: 10px; padding: 0 16px 16px; }
.mini-log-item { padding: 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface-bg); transition: background 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease; }
.mini-log-item.has-soft-flash { animation: extra-log-item-soft-flash 3s ease-out 1; }
.mini-log-item.has-soft-flash-loop { animation: extra-log-item-soft-flash 2.35s ease-in-out infinite; }
.mini-log-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 8px; }
.mini-log-title { font-weight: 700; margin-bottom: 6px; }
.mini-log-note { line-height: 1.7; color: var(--soft-text); white-space: pre-wrap; word-break: break-word; }
.mini-log-item.tone-warning { border-color: rgba(245, 158, 11, 0.2); }
.mini-log-item.tone-danger { border-color: rgba(239, 68, 68, 0.2); }
.mini-log-item.tone-success { border-color: rgba(16, 185, 129, 0.2); }
.mini-log-item.tone-neutral { border-color: rgba(148, 163, 184, 0.2); }

@keyframes extra-log-soft-flash {
  0% {
    border-color: rgba(250, 204, 21, 0.88);
    background: rgba(253, 224, 71, 0.18);
    box-shadow: 0 0 0 0 rgba(253, 224, 71, 0.18);
  }
  38% {
    border-color: rgba(250, 204, 21, 0.68);
    background: rgba(253, 224, 71, 0.14);
    box-shadow: 0 0 0 8px rgba(253, 224, 71, 0.08);
  }
  100% {
    border-color: rgba(148, 163, 184, 0.24);
    background: rgba(2, 6, 23, 0.42);
    box-shadow: 0 0 0 0 rgba(253, 224, 71, 0);
  }
}

@keyframes extra-log-item-soft-flash {
  0% {
    border-color: rgba(250, 204, 21, 0.78);
    background: rgba(253, 224, 71, 0.22);
    box-shadow: 0 0 0 0 rgba(253, 224, 71, 0.14);
  }
  38% {
    border-color: rgba(250, 204, 21, 0.56);
    background: rgba(253, 224, 71, 0.14);
    box-shadow: 0 0 0 8px rgba(253, 224, 71, 0.06);
  }
  100% {
    border-color: var(--line);
    background: rgba(2, 6, 23, 0.42);
    box-shadow: 0 0 0 0 rgba(253, 224, 71, 0);
  }
}

.latest-update { position: relative; overflow: hidden; }
.latest-update::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: rgba(56, 189, 248, 0.82); }
.latest-update.latest-warning::before { background: rgba(245, 158, 11, 0.9); }
.latest-update.latest-danger::before { background: rgba(239, 68, 68, 0.9); }
.latest-update.latest-success::before { background: rgba(16, 185, 129, 0.9); }
.latest-update.latest-neutral::before { background: rgba(148, 163, 184, 0.75); }
.latest-update-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 14px; }
.latest-update-head h3 { margin: 10px 0 0; font-size: 24px; }
.latest-update-main { font-size: 20px; font-weight: 800; line-height: 1.6; margin-bottom: 14px; word-break: break-word; }
.latest-update-meta { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
.latest-update-meta span { display: inline-flex; align-items: center; padding: 8px 12px; border-radius: 999px; background: var(--surface-bg); border: 1px solid var(--line); color: var(--muted); }
.list-item-top { width: 100%; display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.timeline-item { position: relative; padding: 14px; border-radius: 16px; background: rgba(2, 6, 23, 0.44); border: 1px solid var(--line); overflow: hidden; }
.timeline-item::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: rgba(56, 189, 248, 0.5); }
.timeline-item.tone-warning::before { background: rgba(245, 158, 11, 0.8); }
.timeline-item.tone-danger::before { background: rgba(239, 68, 68, 0.8); }
.timeline-item.tone-success::before { background: rgba(16, 185, 129, 0.8); }
.timeline-item.tone-neutral::before { background: rgba(148, 163, 184, 0.7); }
.timeline-action { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px; border: 1px solid rgba(56, 189, 248, 0.25); background: rgba(56, 189, 248, 0.12); color: #7dd3fc; font-weight: 700; }
.timeline-item.tone-warning .timeline-action { border-color: rgba(245, 158, 11, 0.3); background: rgba(245, 158, 11, 0.14); color: #fbbf24; }
.timeline-item.tone-danger .timeline-action { border-color: rgba(239, 68, 68, 0.3); background: rgba(239, 68, 68, 0.14); color: #fca5a5; }
.timeline-item.tone-success .timeline-action { border-color: rgba(16, 185, 129, 0.3); background: rgba(16, 185, 129, 0.14); color: #6ee7b7; }
.timeline-item.tone-neutral .timeline-action { border-color: rgba(148, 163, 184, 0.28); background: rgba(148, 163, 184, 0.12); color: #cbd5e1; }
.timeline-summary { font-weight: 700; line-height: 1.7; margin-bottom: 10px; }
.timeline-note { line-height: 1.7; padding: 12px 14px; border-radius: 14px; background: rgba(148, 163, 184, 0.08); border: 1px solid var(--line); word-break: break-word; }
.timeline-note-label { display: inline-flex; align-items: center; justify-content: center; margin-bottom: 8px; padding: 4px 8px; border-radius: 999px; background: rgba(2, 6, 23, 0.44); color: var(--muted); font-size: 12px; font-weight: 700; }
.management-sections { display: flex; flex-direction: column; gap: 12px; }
.management-sections.compact-sections { gap: 10px; }
.management-item { padding: 14px 16px; border-radius: 16px; background: rgba(2, 6, 23, 0.46); border: 1px solid var(--line); }
.management-item.compact-item { padding: 12px 14px; }
.management-label { font-size: 12px; color: var(--muted); margin-bottom: 8px; }
.management-value { font-size: 16px; font-weight: 700; line-height: 1.75; white-space: pre-wrap; word-break: break-word; }
.management-hint { margin-top: 14px; }
.form-help { margin-top: -2px; font-size: 13px; line-height: 1.6; color: var(--muted); }
.inner-divider { height: 1px; background: var(--line); margin: 2px 0; }
.warning-panel { border-color: rgba(245, 158, 11, 0.28); background: rgba(120, 53, 15, 0.16); }
.banner-lines { display: grid; gap: 8px; margin-top: 10px; line-height: 1.7; }
.label-inline { display: inline-flex; align-items: center; justify-content: center; margin-right: 10px; padding: 2px 8px; border-radius: 999px; background: rgba(2, 6, 23, 0.44); color: var(--muted); font-size: 12px; font-weight: 700; }
.neutral-banner { border-style: dashed; background: rgba(56, 189, 248, 0.08); color: #cfe8ff; }
.warning-banner { border-style: dashed; border-color: rgba(245, 158, 11, 0.32); background: rgba(245, 158, 11, 0.12); color: #fde68a; }

.card h3 { margin-top: 0; margin-bottom: 16px; }

@media (max-width: 1180px) {
  .detail-grid, .detail-grid.action-first, .detail-grid.lower, .triple-grid, .grid-two, .meta-grid.meta-lower { grid-template-columns: 1fr; }
}

@media (max-width: 960px) {
  .layout { flex-direction: column; }
  .sidebar { width: 100%; height: auto; position: static; }
  .main { padding: 18px; }
  .page-head { flex-direction: column; }
  .meta-grid { grid-template-columns: 1fr; }
  .status-flow-head { flex-direction: column; }
  .status-track { gap: 20px; }
  .status-node { min-width: 88px; }
  .status-preview-top, .mini-log-top { flex-direction: column; }
}


.live-alert {
  position: fixed;
  top: 24px;
  right: 24px;
  z-index: 9999;
  width: min(420px, calc(100vw - 32px));
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid rgba(148, 163, 184, 0.24);
  color: #e5eefc;
  box-shadow: 0 20px 50px rgba(2, 6, 23, 0.36);
  backdrop-filter: blur(16px);
  transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, color 0.25s ease;
}

.live-alert.state-connected {
  background: linear-gradient(135deg, rgba(6, 78, 59, 0.96), rgba(2, 44, 34, 0.96));
  border-color: rgba(52, 211, 153, 0.42);
  color: #d1fae5;
  box-shadow: 0 20px 50px rgba(2, 44, 34, 0.3);
}

.live-alert.state-connecting,
.live-alert.state-reconnecting {
  background: linear-gradient(135deg, rgba(120, 53, 15, 0.96), rgba(69, 26, 3, 0.96));
  border-color: rgba(251, 191, 36, 0.4);
  color: #fef3c7;
  box-shadow: 0 20px 50px rgba(69, 26, 3, 0.32);
}

.live-alert.state-disconnected,
.live-alert.state-update {
  background: linear-gradient(135deg, rgba(127, 29, 29, 0.96), rgba(69, 10, 10, 0.96));
  border-color: rgba(248, 113, 113, 0.42);
  color: #fee2e2;
  box-shadow: 0 20px 50px rgba(69, 10, 10, 0.36);
}

.live-alert.active {
  animation: live-alert-pulse 1.15s ease-in-out infinite;
}

.live-alert-dot {
  width: 12px;
  height: 12px;
  border-radius: 999px;
  flex: 0 0 12px;
}

.live-alert.state-connected .live-alert-dot {
  background: #6ee7b7;
  box-shadow: 0 0 0 0 rgba(110, 231, 183, 0.7);
}

.live-alert.state-connecting .live-alert-dot,
.live-alert.state-reconnecting .live-alert-dot {
  background: #fbbf24;
  box-shadow: 0 0 0 0 rgba(251, 191, 36, 0.7);
}

.live-alert.state-disconnected .live-alert-dot,
.live-alert.state-update .live-alert-dot {
  background: #fca5a5;
  box-shadow: 0 0 0 0 rgba(252, 165, 165, 0.7);
}

.live-alert.active .live-alert-dot,
.live-alert.state-reconnecting .live-alert-dot,
.live-alert.state-disconnected .live-alert-dot,
.live-alert.state-update .live-alert-dot {
  animation: live-alert-dot-pulse 1.15s ease-in-out infinite;
}

.live-alert-copy {
  min-width: 0;
}

.live-alert-title {
  font-size: 14px;
  font-weight: 800;
  margin-bottom: 4px;
}

.live-alert-message {
  font-size: 13px;
  line-height: 1.5;
  color: inherit;
  opacity: 0.92;
  word-break: break-word;
}

@keyframes live-alert-pulse {
  0%, 100% { opacity: 0.82; transform: translateY(0) scale(1); }
  50% { opacity: 1; transform: translateY(-1px) scale(1.02); }
}

@keyframes live-alert-dot-pulse {
  0% { box-shadow: 0 0 0 0 currentColor; }
  70% { box-shadow: 0 0 0 10px rgba(255, 255, 255, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
}


.latest-demand-box { display: grid; gap: 12px; margin-bottom: 16px; }
.latest-demand-item { padding: 14px 16px; border-radius: 16px; background: rgba(2, 6, 23, 0.46); border: 1px solid var(--line); }
.latest-demand-label { font-size: 12px; color: var(--muted); margin-bottom: 8px; }
.latest-demand-value { font-size: 18px; font-weight: 800; line-height: 1.7; white-space: pre-wrap; word-break: break-word; }
.latest-feedback-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin: 8px 0 12px; }
.latest-update-main { white-space: pre-wrap; }
.timeline-note { white-space: pre-wrap; }
.info-banner { border-style: dashed; background: rgba(56, 189, 248, 0.08); color: #cfe8ff; }

.utility-bar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  width: -moz-fit-content;
  width: fit-content;
  max-width: 100%;
  margin-left: auto;
  margin-bottom: 20px;
  padding: 12px 14px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: var(--utility-bg);
  backdrop-filter: blur(16px);
  position: sticky;
  top: 14px;
  z-index: 25;
}
.utility-bar-public {
  max-width: 720px;
  margin: 18px auto 0;
  margin-left: auto;
  margin-right: auto;
}
.utility-group {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.theme-hover-switcher {
  position: relative;
  flex-wrap: nowrap;
}
.theme-hover-switcher::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 12px;
}
.theme-menu-trigger {
  gap: 8px;
  min-width: 126px;
  justify-content: space-between;
}
.theme-menu-trigger-label {
  color: var(--muted);
  font-weight: 700;
}
.theme-menu-caret {
  display: inline-flex;
  transition: transform 0.2s ease;
}
.theme-menu-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  z-index: 80;
  display: grid;
  gap: 8px;
  min-width: 176px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--card-bg);
  box-shadow: 0 20px 45px rgba(15, 23, 42, 0.18);
  backdrop-filter: blur(18px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-6px) scale(0.98);
  transform-origin: top right;
  transition: opacity 0.18s ease, visibility 0.18s ease, transform 0.18s ease;
}
.theme-hover-switcher:hover .theme-menu-panel,
.theme-hover-switcher:focus-within .theme-menu-panel,
.theme-hover-switcher.is-open .theme-menu-panel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}
.theme-hover-switcher:hover .theme-menu-caret,
.theme-hover-switcher:focus-within .theme-menu-caret,
.theme-hover-switcher.is-open .theme-menu-caret {
  transform: rotate(180deg);
}
.theme-menu-option {
  width: 100%;
  justify-content: space-between;
}
.theme-menu-option.active::after {
  content: "✓";
  font-weight: 900;
}
.utility-label {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}
.utility-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--utility-chip-bg);
  color: var(--text);
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.utility-chip:hover {
  background: var(--utility-chip-hover);
  border-color: rgba(56, 189, 248, 0.35);
  transform: translateY(-1px);
}
.utility-chip.active {
  background: rgba(56, 189, 248, 0.16);
  color: var(--primary);
  border-color: rgba(56, 189, 248, 0.38);
}
.nav-link.active {
  border-color: rgba(56, 189, 248, 0.35);
  background: rgba(56, 189, 248, 0.12);
}
.clickable-row {
  cursor: pointer;
}
.clickable-row:hover td,
.clickable-row:focus td {
  background: rgba(56, 189, 248, 0.06);
}
.clickable-row:focus {
  outline: none;
}
.email-inline-form {
  min-width: 280px;
}
.email-inline-form input {
  min-width: 180px;
}
.account-table-mail {
  min-width: 1680px;
}
input[type="date"],
input[type="datetime-local"] {
  color-scheme: inherit;
}
body[data-theme="light"] .brand-badge,
body[data-theme="blue"] .brand-badge,
body[data-theme="pink"] .brand-badge,
body[data-theme="green"] .brand-badge,
body[data-theme="light"] .badge,
body[data-theme="blue"] .badge,
body[data-theme="pink"] .badge,
body[data-theme="green"] .badge {
  background: rgba(56, 189, 248, 0.12);
}
body[data-theme="light"] .table-link,
body[data-theme="blue"] .table-link,
body[data-theme="pink"] .table-link,
body[data-theme="green"] .table-link,
body[data-theme="light"] .timeline-action,
body[data-theme="blue"] .timeline-action,
body[data-theme="pink"] .timeline-action,
body[data-theme="green"] .timeline-action,
body[data-theme="light"] .status-node-label,
body[data-theme="blue"] .status-node-label,
body[data-theme="pink"] .status-node-label,
body[data-theme="green"] .status-node-label {
  color: var(--primary);
}
body[data-theme="light"] .timeline-item,
body[data-theme="blue"] .timeline-item,
body[data-theme="pink"] .timeline-item,
body[data-theme="green"] .timeline-item,
body[data-theme="light"] .latest-update,
body[data-theme="blue"] .latest-update,
body[data-theme="pink"] .latest-update,
body[data-theme="green"] .latest-update,
body[data-theme="light"] .warning-panel,
body[data-theme="blue"] .warning-panel,
body[data-theme="pink"] .warning-panel,
body[data-theme="green"] .warning-panel,
body[data-theme="light"] .neutral-banner,
body[data-theme="blue"] .neutral-banner,
body[data-theme="pink"] .neutral-banner,
body[data-theme="green"] .neutral-banner,
body[data-theme="light"] .warning-banner,
body[data-theme="blue"] .warning-banner,
body[data-theme="pink"] .warning-banner,
body[data-theme="green"] .warning-banner,
body[data-theme="light"] .info-panel,
body[data-theme="blue"] .info-panel,
body[data-theme="pink"] .info-panel,
body[data-theme="green"] .info-panel {
  background: var(--surface-bg) !important;
  border-color: var(--line) !important;
}
body[data-theme="light"] .status-preview-label,
body[data-theme="blue"] .status-preview-label,
body[data-theme="pink"] .status-preview-label,
body[data-theme="green"] .status-preview-label,
body[data-theme="light"] .latest-update-meta span,
body[data-theme="blue"] .latest-update-meta span,
body[data-theme="pink"] .latest-update-meta span,
body[data-theme="green"] .latest-update-meta span,
body[data-theme="light"] .status-preview-meta span,
body[data-theme="blue"] .status-preview-meta span,
body[data-theme="pink"] .status-preview-meta span,
body[data-theme="green"] .status-preview-meta span {
  background: var(--chip-bg);
}
body[data-theme="light"] .status-flow-toggle summary,
body[data-theme="blue"] .status-flow-toggle summary,
body[data-theme="pink"] .status-flow-toggle summary,
body[data-theme="green"] .status-flow-toggle summary,
body[data-theme="light"] .latest-update-main,
body[data-theme="blue"] .latest-update-main,
body[data-theme="pink"] .latest-update-main,
body[data-theme="green"] .latest-update-main,
body[data-theme="light"] .status-preview-title,
body[data-theme="blue"] .status-preview-title,
body[data-theme="pink"] .status-preview-title,
body[data-theme="green"] .status-preview-title {
  color: var(--text);
}
body[data-theme="light"] .task-desc,
body[data-theme="blue"] .task-desc,
body[data-theme="pink"] .task-desc,
body[data-theme="green"] .task-desc,
body[data-theme="light"] .mini-log-note,
body[data-theme="blue"] .mini-log-note,
body[data-theme="pink"] .mini-log-note,
body[data-theme="green"] .mini-log-note {
  color: var(--soft-text);
}
@media (max-width: 1080px) {
  .utility-bar {
    justify-content: flex-start;
    position: static;
  }
  .email-inline-form {
    min-width: 220px;
  }
}


.dept-chip-list { display: flex; flex-wrap: wrap; gap: 6px; }
.dept-chip { display: inline-flex; align-items: center; padding: 6px 10px; border-radius: 999px; background: var(--surface-bg-2); border: 1px solid var(--line); color: var(--text); font-size: 12px; font-weight: 700; }
.multi-select-box { min-height: 180px; }
.account-dept-editor { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line); }
.dept-check-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px 12px; margin: 10px 0 12px; }
.dept-check-grid label { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-bg); cursor: pointer; }
.dept-check-grid input { width: auto; margin: 0; }
.department-create-grid { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: end; }

.brand-logo{width:88px;height:auto;display:block;margin-bottom:12px;border-radius:18px;box-shadow:0 10px 28px rgba(0,0,0,.28)}
.live-alert-inline{display:flex;align-items:center;gap:12px;padding:10px 14px;border:1px solid rgba(148,163,184,.22);border-radius:18px;background:linear-gradient(135deg,rgba(15,23,42,.92),rgba(10,16,31,.92));box-shadow:0 10px 28px rgba(2,6,23,.18);max-width:380px;margin-right:auto;transition:background .25s ease,border-color .25s ease,box-shadow .25s ease,color .25s ease}
.live-alert-inline .live-alert-dot{position:relative;display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px;min-width:14px;border-radius:999px;flex:0 0 14px;border:2px solid rgba(255,255,255,.72)}
.live-alert-inline .live-alert-dot::after{content:"";position:absolute;inset:-7px;border-radius:inherit;background:currentColor;opacity:.24;filter:blur(6px)}
.live-alert-inline .live-alert-message{color:inherit;opacity:.9}
.live-alert-inline.state-connected{border-color:rgba(34,197,94,.35);background:linear-gradient(135deg,rgba(6,78,59,.22),rgba(3,44,34,.18));color:#dcfce7}
.live-alert-inline.state-connected .live-alert-dot{color:#22c55e;background:#22c55e;box-shadow:0 0 0 0 rgba(34,197,94,.55),0 0 16px rgba(34,197,94,.34);animation:live-alert-dot-pulse 1.8s ease-in-out infinite}
.live-alert-inline.state-connecting,.live-alert-inline.state-reconnecting{border-color:rgba(245,158,11,.35);background:linear-gradient(135deg,rgba(146,64,14,.2),rgba(120,53,15,.14));color:#fde68a}
.live-alert-inline.state-connecting .live-alert-dot,.live-alert-inline.state-reconnecting .live-alert-dot{color:#f59e0b;background:#f59e0b;box-shadow:0 0 0 0 rgba(245,158,11,.55),0 0 16px rgba(245,158,11,.34);animation:live-alert-dot-pulse 1.25s ease-in-out infinite}
.live-alert-inline.state-disconnected{border-color:rgba(239,68,68,.35);background:linear-gradient(135deg,rgba(127,29,29,.22),rgba(69,10,10,.16));color:#fecaca}
.live-alert-inline.state-disconnected .live-alert-dot{color:#ef4444;background:#ef4444;box-shadow:0 0 0 0 rgba(239,68,68,.55),0 0 16px rgba(239,68,68,.34);animation:live-alert-dot-pulse 1.1s ease-in-out infinite}
.live-alert-inline.state-update{border-color:rgba(96,165,250,.35);background:linear-gradient(135deg,rgba(30,64,175,.22),rgba(30,41,59,.18));color:#dbeafe}
.live-alert-inline.state-update .live-alert-dot{color:#60a5fa;background:#60a5fa;box-shadow:0 0 0 0 rgba(96,165,250,.55),0 0 16px rgba(96,165,250,.34);animation:live-alert-dot-pulse 1.2s ease-in-out infinite}
.utility-bar{display:flex;align-items:center;justify-content:flex-end;gap:12px;flex-wrap:wrap;width:-moz-fit-content;width:fit-content;max-width:100%;margin-left:auto}
@media (max-width: 720px) {
  .utility-bar {
    width: 100%;
    margin-left: 0;
    justify-content: flex-start;
  }
  .utility-bar-public {
    width: -moz-fit-content;
    width: fit-content;
    max-width: calc(100% - 24px);
    margin-left: auto;
    margin-right: auto;
  }
}

.chip-link{text-decoration:none}
.sort-link{text-decoration:none;color:inherit;display:inline-flex;align-items:center;gap:6px}.sort-link.active{color:var(--accent)}.sort-indicator{font-size:.9em;line-height:1;opacity:.9}
.form-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:20px}.compact-head{margin-bottom:10px}.attachment-alert{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:999px;background:#dc2626;color:#fff;font-weight:800;font-size:13px;margin-left:8px;vertical-align:middle}
.meta-edit-block{grid-column:1/-1;padding-top:8px}.stretch-form{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.stretch-form select{min-width:220px}
.announcement-list{display:grid;gap:12px}.compact-announcements{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}.announcement-card{position:relative;overflow:hidden;display:block;padding:14px;border:1px solid var(--line);border-radius:16px;background:var(--panel);text-decoration:none;color:inherit;transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease}.announcement-card.unread-announcement{border-color:rgba(248,113,113,.5);box-shadow:0 0 0 0 rgba(248,113,113,0),0 0 0 rgba(248,113,113,0);animation:announcement-unread-card 1.7s ease-in-out infinite}.announcement-card.unread-announcement::before{content:"";position:absolute;inset:-1px;border-radius:inherit;background:radial-gradient(circle at 50% 50%,rgba(248,113,113,.22),rgba(248,113,113,.08) 50%,rgba(248,113,113,0) 78%);border:1px solid rgba(248,113,113,.36);opacity:.12;pointer-events:none;animation:announcement-unread-ghost 1.7s ease-in-out infinite}.announcement-card.unread-announcement::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:0 0 0 rgba(248,113,113,0);animation:announcement-unread-halo 1.7s ease-in-out infinite}.announcement-card.unread-announcement .announcement-top,.announcement-card.unread-announcement .announcement-meta{animation:announcement-unread-content 1.7s ease-in-out infinite}.announcement-card.priority-urgent{border-color:rgba(220,38,38,.5);background:rgba(220,38,38,.08)}.announcement-card.priority-high{border-color:rgba(249,115,22,.5);background:rgba(249,115,22,.08)}.announcement-card.priority-medium{border-color:rgba(234,179,8,.5);background:rgba(234,179,8,.08)}.announcement-top,.announcement-meta{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:10px}.announcement-meta{margin-top:8px;font-size:12px}.announcement-body{position:relative;z-index:1;line-height:1.8;font-size:16px}.reader-list{display:grid;gap:10px}.reader-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:var(--panel)}@keyframes announcement-unread-card{0%{transform:translateY(0);box-shadow:0 0 0 0 rgba(248,113,113,0),0 0 0 rgba(248,113,113,0)}34%{transform:translateY(-1px);box-shadow:0 0 0 1px rgba(248,113,113,.18),0 0 26px rgba(248,113,113,.2),0 8px 22px rgba(248,113,113,.12)}62%{transform:translateY(0);box-shadow:0 0 0 1px rgba(248,113,113,.1),0 0 16px rgba(248,113,113,.12),0 4px 16px rgba(248,113,113,.08)}100%{transform:translateY(0);box-shadow:0 0 0 0 rgba(248,113,113,0),0 0 0 rgba(248,113,113,0)}}@keyframes announcement-unread-ghost{0%{opacity:.06;transform:scale(.988)}32%{opacity:.58;transform:scale(1)}58%{opacity:.24;transform:scale(1.008)}100%{opacity:.04;transform:scale(1.016)}}@keyframes announcement-unread-halo{0%{box-shadow:0 0 0 0 rgba(248,113,113,.0),0 0 0 rgba(248,113,113,.0)}35%{box-shadow:0 0 0 1px rgba(248,113,113,.16),0 0 36px rgba(248,113,113,.24)}100%{box-shadow:0 0 0 10px rgba(248,113,113,0),0 0 6px rgba(248,113,113,0)}}@keyframes announcement-unread-content{0%{filter:none}35%{filter:drop-shadow(0 0 10px rgba(248,113,113,.16))}100%{filter:none}}@media (prefers-reduced-motion: reduce){.announcement-card.unread-announcement,.announcement-card.unread-announcement::before,.announcement-card.unread-announcement::after,.announcement-card.unread-announcement .announcement-top,.announcement-card.unread-announcement .announcement-meta{animation:none}.announcement-card.unread-announcement::before{opacity:.18;box-shadow:none}}
.accounts-grid-fixed{display:grid;grid-template-columns:minmax(360px,1fr) minmax(480px,1.25fr);gap:20px;align-items:start}.accounts-grid-fixed>section:nth-child(1){grid-column:1}.accounts-grid-fixed>section:nth-child(2){grid-column:2;grid-row:1/span 2}.accounts-grid-fixed>section:nth-child(3){grid-column:1}
.account-dept-floating{position:relative;display:inline-block}.floating-panel{position:absolute;top:calc(100% + 8px);left:0;z-index:40;display:none;min-width:320px;max-width:420px;max-height:420px;overflow:auto;padding:14px;border:1px solid var(--line);border-radius:16px;background:var(--panel-elevated, var(--panel));box-shadow:0 18px 50px rgba(0,0,0,.28)}.floating-panel.is-open{display:block}
@media (max-width: 980px){.form-grid-2,.accounts-grid-fixed{grid-template-columns:1fr}.accounts-grid-fixed>section:nth-child(2),.accounts-grid-fixed>section:nth-child(3){grid-column:auto;grid-row:auto}.live-alert-inline{max-width:none;width:100%;order:-1}}

.account-transfer-options { margin: 0; }
.transfer-head { margin-bottom: 14px; }
.account-transfer-options label { align-items: flex-start; }
.account-picker { display: flex; flex-direction: column; gap: 8px; }
.account-transfer-help { margin-top: 0; }
.account-match-note {
  min-height: 22px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--muted);
}
.account-match-note.success { color: var(--success); }
.account-match-note.error { color: var(--danger); }


.attachments-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; margin-bottom: 16px; }
.attachment-item-main { flex: 1; min-width: 0; }
.attachment-name { display: block; line-height: 1.6; word-break: break-word; }
.attachment-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.attachment-actions .btn.is-active, .attachment-actions [data-attachment-preview].is-active { background: rgba(56, 189, 248, 0.16); color: var(--text); border-color: rgba(56, 189, 248, 0.34); }
.attachment-preview-card { margin-top: 18px; padding: 18px; border-radius: 18px; border: 1px solid var(--line); background: var(--surface-bg); }
.attachment-preview-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; margin-bottom: 14px; }
.attachment-preview-title { font-size: 18px; font-weight: 800; line-height: 1.6; margin-top: 8px; }
.attachment-preview-body { min-height: 320px; padding: 14px; border-radius: 16px; border: 1px solid var(--line); background: var(--surface-bg-2); }
.attachment-preview-body.is-empty { display: flex; align-items: center; justify-content: center; }
.attachment-preview-frame { width: 100%; min-height: 72vh; border: 0; border-radius: 12px; background: #ffffff; }
.attachment-preview-image { display: block; max-width: 100%; max-height: 78vh; margin: 0 auto; border-radius: 12px; }
.attachment-preview-video { width: 100%; max-height: 78vh; border-radius: 12px; }
.attachment-preview-audio-wrap { display: flex; align-items: center; justify-content: center; min-height: 160px; }
.attachment-preview-audio { width: min(100%, 680px); }
.attachment-preview-fallback { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 12px; min-height: 240px; }
.compact-empty { width: 100%; }
.btn[aria-disabled="true"] { pointer-events: none; opacity: 0.55; }

@media (max-width: 960px) {
  .attachment-item, .attachment-preview-head, .attachments-head { flex-direction: column; align-items: flex-start; }
  .attachment-actions { width: 100%; }
  .attachment-preview-frame { min-height: 56vh; }
}

html, body { overflow-x: hidden; }
.layout { position: relative; z-index: 1; }

.theme-effects-layer {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.theme-effects-layer--scoped {
  position: absolute;
  inset: 0;
}

.theme-effects-preview-host {
  position: relative;
}

.theme-effects-glow,
.theme-effects-particles {
  position: absolute;
  inset: 0;
}

.theme-effects-glow {
  transition: background 0.35s ease, opacity 0.35s ease;
}

body[data-theme="dark"] > .theme-effects-layer--page .theme-effects-glow,
.effect-preview-shell[data-preview-theme="dark"] .theme-effects-layer--scoped .theme-effects-glow {
  background:
    radial-gradient(circle at 20% 20%, rgba(95, 132, 214, 0.16) 0%, rgba(95, 132, 214, 0) 28%),
    radial-gradient(circle at 80% 30%, rgba(169, 197, 255, 0.12) 0%, rgba(169, 197, 255, 0) 24%);
}

body[data-theme="light"] > .theme-effects-layer--page .theme-effects-glow,
.effect-preview-shell[data-preview-theme="light"] .theme-effects-layer--scoped .theme-effects-glow {
  background:
    radial-gradient(circle at 84% 22%, rgba(248, 220, 232, 0.42) 0%, rgba(248, 220, 232, 0.16) 22%, rgba(248, 220, 232, 0) 44%),
    radial-gradient(circle at 18% 14%, rgba(255, 255, 255, 0.38) 0%, rgba(255, 255, 255, 0) 28%);
}

body[data-theme="pink"] > .theme-effects-layer--page .theme-effects-glow,
.effect-preview-shell[data-preview-theme="pink"] .theme-effects-layer--scoped .theme-effects-glow {
  background:
    radial-gradient(circle at 18% 16%, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0) 26%),
    radial-gradient(circle at 85% 20%, rgba(255, 244, 250, 0.26) 0%, rgba(255, 244, 250, 0) 22%),
    radial-gradient(circle at 50% 0%, rgba(255, 216, 232, 0.18) 0%, rgba(255, 216, 232, 0) 42%);
}

body[data-theme="green"] > .theme-effects-layer--page .theme-effects-glow,
.effect-preview-shell[data-preview-theme="green"] .theme-effects-layer--scoped .theme-effects-glow {
  background:
    radial-gradient(circle at 15% 15%, rgba(255, 255, 255, 0.26) 0%, rgba(255, 255, 255, 0) 26%),
    radial-gradient(circle at 85% 20%, rgba(231, 253, 236, 0.22) 0%, rgba(231, 253, 236, 0) 22%),
    radial-gradient(circle at 50% 0%, rgba(187, 247, 208, 0.14) 0%, rgba(187, 247, 208, 0) 40%);
}

body[data-theme="blue"] > .theme-effects-layer--page .theme-effects-glow,
.effect-preview-shell[data-preview-theme="blue"] .theme-effects-layer--scoped .theme-effects-glow {
  background:
    radial-gradient(circle at 16% 18%, rgba(255, 255, 255, 0.42) 0%, rgba(255, 255, 255, 0) 28%),
    radial-gradient(circle at 82% 20%, rgba(125, 211, 252, 0.24) 0%, rgba(125, 211, 252, 0) 28%),
    radial-gradient(circle at 50% 0%, rgba(56, 189, 248, 0.18) 0%, rgba(56, 189, 248, 0) 42%);
}

.monday-particle {
  position: absolute;
  will-change: transform, opacity;
  pointer-events: none;
  animation: monday-effect-fall var(--duration, 12s) linear var(--delay, 0s) infinite;
}

@keyframes monday-effect-fall {
  0% {
    transform: translate3d(0px, -20px, 0) rotate(var(--r0, 0deg)) scale(var(--s0, 1));
    opacity: var(--o0, 1);
  }
  18% {
    transform: translate3d(var(--x1, 0px), 16vh, 0) rotate(var(--r1, 120deg)) scale(var(--s1, 1));
    opacity: var(--o1, 1);
  }
  42% {
    transform: translate3d(var(--x2, 0px), 38vh, 0) rotate(var(--r2, 220deg)) scale(var(--s2, 1));
    opacity: var(--o2, 1);
  }
  70% {
    transform: translate3d(var(--x3, 0px), 67vh, 0) rotate(var(--r3, 340deg)) scale(var(--s3, 1));
    opacity: var(--o3, 0.8);
  }
  100% {
    transform: translate3d(var(--x4, 0px), 112vh, 0) rotate(var(--r4, 368deg)) scale(var(--s4, 1));
    opacity: var(--o4, 0.2);
  }
}

.monday-shape {
  position: relative;
  display: block;
}

.monday-shape span {
  position: absolute;
  display: block;
}

.monday-shape--petal .monday-petal__body {
  inset: 0;
  background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.98) 0%, var(--shape-color) 58%, rgba(228, 154, 183, 0.92) 100%);
  border-radius: 70% 45% 70% 45% / 70% 40% 70% 40%;
  transform: rotate(-22deg);
  box-shadow: inset -1px -2px 3px rgba(255, 255, 255, 0.35), 0 2px 6px rgba(210, 145, 172, 0.18);
}

.monday-shape--leaf-round .monday-leaf-round__body {
  inset: 0;
  background: radial-gradient(circle at 40% 35%, #ffffff 0%, var(--shape-color) 45%, rgba(95, 168, 112, 0.95) 100%);
  border-radius: 60% 40% 60% 40% / 60% 40% 60% 40%;
  transform: rotate(45deg);
  box-shadow: 0 2px 6px rgba(96, 145, 104, 0.14);
}

.monday-shape--leaf-round .monday-leaf-round__vein {
  left: 50%;
  top: 22%;
  width: 1.5px;
  height: 56%;
  background: rgba(255, 255, 255, 0.7);
  transform: translateX(-50%) rotate(45deg);
  border-radius: 999px;
}

.monday-shape--leaf-slim .monday-leaf-slim__body {
  inset: 0;
  background: linear-gradient(180deg, #f7fff8 0%, var(--shape-color) 35%, rgba(88, 151, 97, 0.95) 100%);
  border-radius: 52% 52% 50% 50% / 18% 18% 82% 82%;
  transform: rotate(12deg);
  box-shadow: 0 2px 6px rgba(83, 130, 89, 0.12);
}

.monday-shape--leaf-slim .monday-leaf-slim__vein {
  left: 49%;
  top: 8%;
  width: 1.5px;
  height: 78%;
  background: rgba(255, 255, 255, 0.65);
  transform: translateX(-50%) rotate(12deg);
  border-radius: 999px;
}

.monday-shape--leaf-bud .monday-leaf-bud__left {
  left: 0;
  top: 18%;
  width: 56%;
  height: 70%;
  background: linear-gradient(180deg, #fbfffb 0%, var(--shape-color) 50%, rgba(111, 181, 116, 0.98) 100%);
  border-radius: 70% 20% 70% 20% / 70% 20% 70% 20%;
  transform: rotate(-28deg);
}

.monday-shape--leaf-bud .monday-leaf-bud__right {
  right: 0;
  top: 18%;
  width: 56%;
  height: 70%;
  background: linear-gradient(180deg, #fbfffb 0%, var(--shape-color) 50%, rgba(103, 170, 110, 0.98) 100%);
  border-radius: 20% 70% 20% 70% / 20% 70% 20% 70%;
  transform: rotate(28deg);
}

.monday-shape--leaf-curved .monday-leaf-curved__body {
  inset: 0;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.9) 0%, var(--shape-color) 42%, rgba(92, 164, 104, 0.95) 100%);
  border-radius: 80% 25% 80% 25% / 70% 30% 70% 30%;
  transform: rotate(-18deg) skewX(-8deg);
  box-shadow: 0 2px 6px rgba(86, 141, 95, 0.13);
}

.monday-shape--leaf-curved .monday-leaf-curved__vein {
  left: 48%;
  top: 14%;
  width: 1.5px;
  height: 62%;
  background: rgba(255, 255, 255, 0.6);
  transform: translateX(-50%) rotate(-22deg);
  border-radius: 999px;
}

.monday-shape--maple.is-twinkle {
  animation: monday-maple-twinkle 1.6s ease-in-out infinite alternate;
}

@keyframes monday-maple-twinkle {
  0% {
    opacity: 0.76;
    transform: scale(0.98);
  }
  100% {
    opacity: 1;
    transform: scale(1.03);
  }
}

.monday-shape--maple .monday-maple__body {
  inset: 0;
  clip-path: polygon(50% 0%, 60% 14%, 77% 7%, 73% 24%, 93% 28%, 79% 42%, 92% 58%, 68% 58%, 72% 82%, 54% 70%, 50% 100%, 46% 70%, 28% 82%, 32% 58%, 8% 58%, 21% 42%, 7% 28%, 27% 24%, 23% 7%, 40% 14%);
}

.monday-shape--maple[data-maple-type="maple-pink-a"] .monday-maple__body,
.monday-shape--maple[data-maple-type="maple-pink-c"] .monday-maple__body {
  background: linear-gradient(165deg, rgba(255, 252, 254, 0.96) 0%, var(--shape-color) 38%, rgba(244, 175, 203, 0.93) 100%);
  border: 1px solid rgba(255, 255, 255, 0.35);
  box-shadow: 0 2px 6px rgba(224, 151, 186, 0.12);
}

.monday-shape--maple[data-maple-type="maple-pink-b"] .monday-maple__body {
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.95) 0%, var(--shape-color) 32%, rgba(244, 170, 201, 0.94) 68%, rgba(255, 233, 242, 0.92) 100%);
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: inset 0 0 8px rgba(255, 255, 255, 0.45), 0 3px 8px rgba(230, 156, 191, 0.16);
}

.monday-shape--maple[data-maple-type="maple-pink-d"] .monday-maple__body {
  background: linear-gradient(165deg, rgba(255, 248, 252, 0.95) 0%, var(--shape-color) 42%, rgba(236, 156, 191, 0.92) 100%);
  border: 1px solid rgba(255, 255, 255, 0.35);
  box-shadow: 0 2px 6px rgba(224, 151, 186, 0.12);
}

.monday-shape--maple .monday-maple__vein {
  background: rgba(255, 255, 255, 0.35);
  border-radius: 999px;
}

.monday-shape--maple .monday-maple__vein--main {
  left: 49.5%;
  top: 15%;
  width: max(1.5px, 6%);
  height: 60%;
  background: rgba(255, 255, 255, 0.55);
  transform: translateX(-50%);
}

.monday-shape--maple .monday-maple__vein--left-top {
  left: 39%;
  top: 28%;
  width: max(1.2px, 4.5%);
  height: 22%;
  transform: rotate(-38deg);
}

.monday-shape--maple .monday-maple__vein--right-top {
  right: 39%;
  top: 28%;
  width: max(1.2px, 4.5%);
  height: 22%;
  transform: rotate(38deg);
}

.monday-shape--maple .monday-maple__vein--left-bottom {
  left: 43%;
  top: 56%;
  width: max(1.2px, 4.2%);
  height: 18%;
  background: rgba(255, 255, 255, 0.25);
  transform: rotate(-28deg);
}

.monday-shape--maple .monday-maple__vein--right-bottom {
  right: 43%;
  top: 56%;
  width: max(1.2px, 4.2%);
  height: 18%;
  background: rgba(255, 255, 255, 0.25);
  transform: rotate(28deg);
}

.monday-shape--maple .monday-maple__stem {
  left: 49.5%;
  bottom: -8%;
  width: max(1.8px, 7%);
  height: 20%;
  background: rgba(194, 123, 155, 0.9);
  transform: translateX(-50%);
  border-radius: 999px;
}

.monday-shape--star .monday-star__v {
  left: 50%;
  top: 50%;
  width: 16%;
  height: 100%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(173, 206, 255, 0.95) 38%, rgba(255, 255, 255, 1) 52%, rgba(173, 206, 255, 0.95) 66%, rgba(255, 255, 255, 0) 100%);
  transform: translate(-50%, -50%);
  border-radius: 999px;
  box-shadow: 0 0 10px rgba(143, 179, 255, 0.35);
}

.monday-shape--star .monday-star__h {
  left: 50%;
  top: 50%;
  width: 100%;
  height: 16%;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(173, 206, 255, 0.95) 38%, rgba(255, 255, 255, 1) 52%, rgba(173, 206, 255, 0.95) 66%, rgba(255, 255, 255, 0) 100%);
  transform: translate(-50%, -50%);
  border-radius: 999px;
  box-shadow: 0 0 10px rgba(143, 179, 255, 0.35);
}

.monday-shape--star .monday-star__core {
  inset: 32%;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.55);
}

.monday-shooting-star {
  position: absolute;
  right: -10%;
  top: var(--top, 18%);
  width: var(--width, 180px);
  height: var(--thickness, 2.4px);
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.98) 0%, rgba(188, 219, 255, 0.7) 12%, rgba(188, 219, 255, 0.28) 34%, rgba(171, 205, 255, 0.08) 68%, rgba(171, 205, 255, 0) 100%);
  border-radius: 999px;
  box-shadow: 0 0 12px rgba(156, 198, 255, 0.32);
  transform: rotate(var(--angle, -24deg));
  transform-origin: left center;
  animation: monday-shooting-star-sweep var(--duration, 7.5s) ease-out var(--delay, 0s) infinite;
  opacity: 0;
}

@keyframes monday-shooting-star-sweep {
  0% {
    opacity: 0;
    transform: translate3d(34vw, -14vh, 0) rotate(var(--angle, -24deg)) scaleX(0.72);
  }
  10% {
    opacity: var(--opacity, 0.95);
  }
  60% {
    opacity: calc(var(--opacity, 0.95) * 0.82);
  }
  100% {
    opacity: 0;
    transform: translate3d(-48vw, 34vh, 0) rotate(var(--angle, -24deg)) scaleX(1.08);
  }
}

.monday-shooting-head {
  position: absolute;
  left: -8px;
  top: -8px;
  width: 16px;
  height: 16px;
  animation: monday-shooting-head-twinkle 0.9s ease-in-out infinite alternate;
}

@keyframes monday-shooting-head-twinkle {
  0% {
    transform: scale(0.92) rotate(0deg);
    opacity: 0.86;
  }
  100% {
    transform: scale(1.08) rotate(8deg);
    opacity: 1;
  }
}

.monday-shooting-head__v {
  left: 50%;
  top: 50%;
  width: 2.2px;
  height: 16px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(205, 229, 255, 0.95) 34%, rgba(255, 255, 255, 1) 50%, rgba(205, 229, 255, 0.95) 66%, rgba(255, 255, 255, 0) 100%);
  transform: translate(-50%, -50%);
  border-radius: 999px;
  box-shadow: 0 0 12px rgba(200, 228, 255, 0.45);
}

.monday-shooting-head__h {
  left: 50%;
  top: 50%;
  width: 16px;
  height: 2.2px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(205, 229, 255, 0.95) 34%, rgba(255, 255, 255, 1) 50%, rgba(205, 229, 255, 0.95) 66%, rgba(255, 255, 255, 0) 100%);
  transform: translate(-50%, -50%);
  border-radius: 999px;
  box-shadow: 0 0 12px rgba(200, 228, 255, 0.45);
}

.monday-shooting-head__core {
  inset: 5.2px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 0 18px rgba(200, 228, 255, 0.88);
}

@media (prefers-reduced-motion: reduce) {
  .theme-effects-layer {
    display: none;
  }
}

.utility-chip:disabled,
.utility-chip.is-disabled {
  opacity: 0.46;
  cursor: not-allowed;
  transform: none;
}

.utility-chip:disabled:hover,
.utility-chip.is-disabled:hover {
  background: var(--utility-chip-bg);
  border-color: var(--line);
  transform: none;
}

.effect-department-bulk-card {
  display: grid;
  gap: 16px;
  margin-top: 18px;
}

.effect-bulk-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
}

.effect-bulk-item {
  display: grid;
  gap: 12px;
  padding: 16px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.02);
}

.effect-bulk-item-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  flex-wrap: wrap;
}

.effect-bulk-account-preview,
.effect-bulk-note {
  line-height: 1.75;
}

.effect-bulk-item form {
  margin: 0;
}

.effect-account-grid {
  display: grid;
  gap: 18px;
  margin-top: 18px;
}

.effect-account-card {
  display: grid;
  gap: 16px;
}

.effect-account-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
  flex-wrap: wrap;
}

.effect-account-head h3 {
  margin: 8px 0 4px;
}

.effect-account-summary {
  min-width: 220px;
}

.effect-chip-list {
  margin-top: 8px;
}

.effect-active-list {
  display: grid;
  gap: 8px;
}

.effect-theme-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.effect-theme-block {
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 14px;
  background: rgba(255, 255, 255, 0.02);
}

.effect-theme-title {
  font-weight: 700;
  margin-bottom: 10px;
}

.effect-check-grid {
  grid-template-columns: 1fr;
}

.effect-form-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.effect-access-note {
  margin-top: 16px;
}

.strong-gap {
  line-height: 1.7;
}

@media (max-width: 900px) {
  .effect-theme-grid {
    grid-template-columns: 1fr;
  }
}

.effect-summary-grid {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.effect-bulk-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.effect-account-card.is-bulk-edited {
  box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.24), 0 20px 48px rgba(14, 165, 233, 0.12);
  transition: box-shadow 0.25s ease;
}

.effect-studio-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.95fr);
  gap: 18px;
  margin-top: 18px;
}

.effect-preview-card,
.effect-upload-card,
.effect-library-card-shell {
  display: grid;
  gap: 16px;
}

.effect-preview-header,
.effect-library-header,
.effect-copy-head,
.effect-library-item-top,
.effect-library-actions,
.effect-preview-meta-wrap,
.effect-library-group-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
  flex-wrap: wrap;
}

.effect-preview-shell {
  position: relative;
  overflow: hidden;
  min-height: 420px;
  border-radius: 28px;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.76), rgba(2, 6, 23, 0.94));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.effect-preview-shell[data-preview-theme="dark"] {
  background: radial-gradient(circle at 50% 20%, #1f2432 0%, #121722 40%, #090d14 100%);
}

.effect-preview-shell[data-preview-theme="light"] {
  background: linear-gradient(180deg, #fcfcfc 0%, #f8f8f8 48%, #f2f2f2 100%);
}

.effect-preview-shell[data-preview-theme="pink"] {
  background: linear-gradient(180deg, #fff8fb 0%, #fff1f7 52%, #fce9f2 100%);
}

.effect-preview-shell[data-preview-theme="green"] {
  background: linear-gradient(180deg, #f7fff8 0%, #eef9f0 52%, #e6f5e8 100%);
}

.effect-preview-shell[data-preview-theme="blue"] {
  background: linear-gradient(135deg, #f8fcff 0%, #e0f7ff 48%, #cfefff 100%);
}

.effect-preview-stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.effect-preview-ui {
  position: relative;
  z-index: 1;
  min-height: 420px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
  pointer-events: none;
}

.effect-preview-window {
  width: min(100%, 520px);
  border-radius: 26px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(18px);
  padding: 28px;
  box-shadow: 0 20px 48px rgba(15, 23, 42, 0.16);
}

.effect-preview-window-badge {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.24);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: rgba(255, 255, 255, 0.92);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.effect-preview-window-title {
  margin-top: 16px;
  font-size: 34px;
  line-height: 1.2;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.96);
}

.effect-preview-window-subtitle {
  margin-top: 12px;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.74);
}

.effect-preview-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.effect-preview-pills span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9px 13px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.9);
  font-size: 13px;
}

.effect-preview-shell[data-preview-theme="light"] .effect-preview-window,
.effect-preview-shell[data-preview-theme="blue"] .effect-preview-window,
.effect-preview-shell[data-preview-theme="pink"] .effect-preview-window,
.effect-preview-shell[data-preview-theme="green"] .effect-preview-window {
  background: rgba(255, 255, 255, 0.46);
  border-color: rgba(255, 255, 255, 0.5);
}

.effect-preview-shell[data-preview-theme="light"] .effect-preview-window-badge,
.effect-preview-shell[data-preview-theme="blue"] .effect-preview-window-badge,
.effect-preview-shell[data-preview-theme="pink"] .effect-preview-window-badge,
.effect-preview-shell[data-preview-theme="green"] .effect-preview-window-badge,
.effect-preview-shell[data-preview-theme="light"] .effect-preview-pills span,
.effect-preview-shell[data-preview-theme="blue"] .effect-preview-pills span,
.effect-preview-shell[data-preview-theme="pink"] .effect-preview-pills span,
.effect-preview-shell[data-preview-theme="green"] .effect-preview-pills span {
  background: rgba(255, 255, 255, 0.62);
  border-color: rgba(255, 255, 255, 0.54);
  color: #334155;
}

.effect-preview-shell[data-preview-theme="light"] .effect-preview-window-title,
.effect-preview-shell[data-preview-theme="blue"] .effect-preview-window-title,
.effect-preview-shell[data-preview-theme="pink"] .effect-preview-window-title,
.effect-preview-shell[data-preview-theme="green"] .effect-preview-window-title {
  color: #334155;
}

.effect-preview-shell[data-preview-theme="light"] .effect-preview-window-subtitle,
.effect-preview-shell[data-preview-theme="blue"] .effect-preview-window-subtitle,
.effect-preview-shell[data-preview-theme="pink"] .effect-preview-window-subtitle,
.effect-preview-shell[data-preview-theme="green"] .effect-preview-window-subtitle {
  color: #475569;
}

.effect-upload-form {
  margin-top: 4px;
}

.effect-format-note,
.effect-description-note {
  line-height: 1.75;
}

.effect-copy-blocks {
  display: grid;
  gap: 14px;
}

.effect-copy-card {
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 14px;
  background: rgba(255, 255, 255, 0.02);
}

.effect-code-area {
  min-height: 210px;
  margin-top: 10px;
  font-family: ui-monospace, SFMono-Regular, SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace;
  font-size: 12px;
  line-height: 1.7;
  white-space: pre;
}

.effect-library-groups {
  display: grid;
  gap: 20px;
}

.effect-library-group {
  display: grid;
  gap: 12px;
}

.effect-library-group h4 {
  margin: 0;
}

.effect-library-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
}

.effect-library-item {
  display: grid;
  gap: 12px;
  padding: 16px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.02);
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.effect-library-item:hover,
.effect-library-item.is-active {
  transform: translateY(-1px);
  border-color: rgba(56, 189, 248, 0.4);
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.1);
  background: rgba(56, 189, 248, 0.06);
}

.effect-library-item-title {
  font-size: 16px;
  font-weight: 800;
  line-height: 1.6;
}

.effect-library-item-summary {
  margin-top: 4px;
  line-height: 1.7;
}

.effect-library-item-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  font-size: 12px;
}

.effect-library-actions form {
  margin: 0;
}

.effect-library-empty {
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px dashed var(--line);
}

.effect-check-grid {
  display: grid;
  gap: 10px;
}

.btn-danger-text {
  color: #ef4444;
}

.btn-danger-text:hover {
  border-color: rgba(239, 68, 68, 0.34);
  background: rgba(239, 68, 68, 0.08);
}

.dept-chip-list.compact {
  gap: 8px;
}

@media (max-width: 1100px) {
  .effect-studio-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .effect-library-grid {
    grid-template-columns: 1fr;
  }

  .effect-preview-window {
    padding: 22px;
  }

  .effect-preview-window-title {
    font-size: 28px;
  }

  .effect-preview-ui {
    padding: 18px;
  }
}

.split-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap}.compact-copy{margin:6px 0 0}.chip-active{border-color:rgba(56,189,248,.38);background:rgba(56,189,248,.12);box-shadow:0 0 0 1px rgba(56,189,248,.12) inset}.calendar-shell{overflow:hidden}.calendar-toolbar{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-bottom:14px}.calendar-toolbar-actions{display:flex;flex-wrap:wrap;gap:10px}.calendar-legend{display:flex;flex-wrap:wrap;gap:12px 14px;margin-bottom:16px}.calendar-legend-item{display:inline-flex;align-items:center;gap:8px;color:var(--muted);font-size:13px}.calendar-grid-wrap{overflow-x:auto;padding-bottom:4px}.dashboard-calendar-grid{display:grid;grid-template-columns:repeat(7,minmax(180px,1fr));gap:1px;min-width:1180px;border:1px solid var(--line);border-radius:20px;overflow:hidden;background:var(--line)}.calendar-weekday{padding:12px 14px;background:var(--panel-soft);font-size:13px;font-weight:700;color:var(--muted);letter-spacing:.02em}.calendar-day{display:flex;flex-direction:column;gap:8px;min-height:172px;padding:12px 12px 14px;background:var(--card-bg);text-decoration:none;color:inherit;transition:border-color .2s ease,background .2s ease,transform .2s ease;position:relative}.calendar-day:hover{transform:translateY(-1px);background:var(--panel-soft)}.calendar-day.is-other-month{opacity:.56}.calendar-day.is-selected{box-shadow:inset 0 0 0 2px rgba(56,189,248,.55);background:rgba(56,189,248,.07)}.calendar-day.is-today .calendar-day-number{box-shadow:0 0 0 1px rgba(56,189,248,.42) inset;background:rgba(56,189,248,.14)}.calendar-day-head{display:flex;align-items:center;justify-content:space-between;gap:10px}.calendar-day-number{display:inline-flex;align-items:center;justify-content:center;min-width:34px;height:34px;padding:0 10px;border-radius:999px;background:rgba(148,163,184,.12);font-weight:700}.calendar-today-pill{display:inline-flex;align-items:center;justify-content:center;padding:4px 8px;border-radius:999px;font-size:12px;font-weight:600;background:rgba(56,189,248,.18);color:var(--text)}.calendar-badge-stack{display:flex;flex-wrap:wrap;gap:6px}.calendar-badge{display:inline-flex;align-items:center;justify-content:center;padding:4px 9px;border-radius:999px;font-size:11px;line-height:1.1;border:1px solid transparent;white-space:nowrap}.calendar-badge.legal{background:rgba(34,197,94,.16);border-color:rgba(34,197,94,.28)}.calendar-badge.observance{background:rgba(245,158,11,.16);border-color:rgba(245,158,11,.26)}.calendar-badge.weekend{background:rgba(148,163,184,.14);border-color:rgba(148,163,184,.22)}.calendar-section-title{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--muted);font-weight:600}.calendar-dot{display:inline-block;width:8px;height:8px;border-radius:999px;flex:0 0 auto}.calendar-dot.due{background:rgba(59,130,246,.9)}.calendar-dot.agenda{background:rgba(236,72,153,.9)}.calendar-entry-list{display:flex;flex-direction:column;gap:6px}.calendar-entry{padding:7px 8px;border-radius:12px;font-size:12px;line-height:1.35;background:rgba(148,163,184,.1);border:1px solid rgba(148,163,184,.12);overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.calendar-entry.task-entry{border-left:3px solid rgba(59,130,246,.52)}.calendar-entry.task-entry.priority-urgent{border-left-color:rgba(220,38,38,.78)}.calendar-entry.task-entry.priority-high{border-left-color:rgba(249,115,22,.78)}.calendar-entry.task-entry.priority-medium{border-left-color:rgba(234,179,8,.78)}.calendar-entry.task-entry.priority-low{border-left-color:rgba(34,197,94,.78)}.calendar-entry.agenda-entry{border-left:3px solid rgba(236,72,153,.56)}.calendar-entry.agenda-entry.is-done{text-decoration:line-through;opacity:.65}.calendar-more{font-size:12px;color:var(--muted);padding-left:2px}.calendar-detail-grid{align-items:start}.detail-badges{margin-top:10px}.day-detail-block+.day-detail-block{margin-top:16px}.day-detail-title{margin-bottom:12px;font-size:14px;font-weight:700;color:var(--text)}.day-task-list,.agenda-item-list{display:grid;gap:10px}.day-task-card{display:block;padding:14px;border:1px solid var(--line);border-radius:16px;background:var(--panel);text-decoration:none;color:inherit;transition:border-color .2s ease,transform .2s ease}.day-task-card:hover{border-color:rgba(56,189,248,.28);transform:translateY(-1px)}.day-task-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px}.agenda-item-card{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:14px;border:1px solid var(--line);border-radius:16px;background:var(--panel)}.agenda-item-card.is-done{opacity:.7}.agenda-item-card.is-done .agenda-item-title{text-decoration:line-through}.agenda-item-main{display:grid;gap:8px;min-width:0}.agenda-item-title{font-weight:700;line-height:1.5}.agenda-time{display:inline-flex;align-items:center;justify-content:center;padding:2px 8px;margin-right:6px;border-radius:999px;font-size:12px;background:rgba(236,72,153,.12);font-weight:600}.agenda-item-actions{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end}.compact-settings-grid{align-items:start}.digest-test-panel{display:flex;align-items:stretch}.digest-test-card{width:100%;text-align:left}.align-end{align-items:end}.inner-form{margin-top:4px}@media (max-width: 1100px){.dashboard-calendar-grid{min-width:980px;grid-template-columns:repeat(7,minmax(150px,1fr))}.calendar-day{min-height:158px}}@media (max-width: 760px){.calendar-toolbar-actions,.calendar-legend{gap:10px}.agenda-item-card{flex-direction:column}.agenda-item-actions{justify-content:flex-start}.day-task-top{align-items:flex-start;flex-direction:column}}

.page-head .form-inline-actions{justify-content:flex-end}
.calendar-day[title]{cursor:pointer}

.calendar-preview-stack {
  display: grid;
  gap: 16px;
}
.calendar-preview-head h3 {
  margin: 8px 0 0;
}
.calendar-modal {
  position: fixed;
  inset: 0;
  display: none;
  z-index: 80;
}
.calendar-modal.is-open {
  display: block;
}
.calendar-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(2, 6, 23, 0.42);
  backdrop-filter: blur(4px);
}
.calendar-modal-dialog {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  min-height: 100%;
  padding: 30px 18px;
}
.calendar-modal-frame {
  width: min(980px, 100%);
  max-height: calc(100vh - 60px);
  overflow: auto;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: linear-gradient(180deg, var(--card-bg), var(--panel-soft));
  color: var(--text);
  box-shadow: 0 28px 80px rgba(2, 6, 23, 0.34);
}
.calendar-modal-toolbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.calendar-modal-toolbar h3 {
  margin: 8px 0 0;
}
.calendar-modal-content {
  display: grid;
  gap: 16px;
}
.calendar-modal-section-card {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface-bg-2);
}
body[data-theme="light"] .calendar-modal-backdrop,
body[data-theme="blue"] .calendar-modal-backdrop,
body[data-theme="pink"] .calendar-modal-backdrop,
body[data-theme="green"] .calendar-modal-backdrop {
  background: rgba(15, 23, 42, 0.24);
}
body[data-theme="light"] .calendar-modal-frame,
body[data-theme="blue"] .calendar-modal-frame,
body[data-theme="pink"] .calendar-modal-frame,
body[data-theme="green"] .calendar-modal-frame {
  box-shadow: 0 28px 80px rgba(15, 23, 42, 0.18);
}
body.calendar-modal-open {
  overflow: hidden;
}
@media (max-width: 760px) {
  .calendar-modal-dialog {
    padding: 16px 10px;
  }
  .calendar-modal-frame {
    max-height: calc(100vh - 32px);
    padding: 14px;
    border-radius: 20px;
  }
  .calendar-modal-toolbar {
    align-items: flex-start;
    flex-direction: column;
  }
}

.dashboard-split-tabs { align-items: center; margin-bottom: 8px; }
.dashboard-split-help { margin: 6px 0 0; }
.compact-card { padding: 16px 18px; }


.file-field { display: flex; flex-direction: column; gap: 8px; }
.file-field-label { color: var(--muted); font-size: 14px; }
.file-dropzone { position: relative; width: 100%; }
.file-drop-input { position: absolute; left: 18px; bottom: 18px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.file-drop-panel { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 118px; padding: 18px; border: 1.5px dashed rgba(56, 189, 248, 0.38); border-radius: 18px; background: var(--surface-bg-2); cursor: pointer; transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; }
.file-drop-panel.compact { min-height: 96px; padding: 16px; }
.file-drop-panel:hover, .file-drop-panel:focus-visible, .file-dropzone.is-dragover .file-drop-panel { border-color: rgba(56, 189, 248, 0.72); background: rgba(56, 189, 248, 0.08); box-shadow: 0 0 0 4px rgba(56, 189, 248, 0.12); transform: translateY(-1px); }
.file-dropzone.is-invalid .file-drop-panel { border-color: rgba(239, 68, 68, 0.72); box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.12); }
.file-drop-text { display: flex; align-items: flex-start; gap: 14px; min-width: 0; }
.file-drop-icon { flex: 0 0 auto; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 14px; background: rgba(56, 189, 248, 0.16); color: var(--primary); border: 1px solid rgba(56, 189, 248, 0.28); font-size: 24px; font-weight: 700; line-height: 1; }
.file-drop-title { color: var(--text); font-weight: 800; line-height: 1.35; }
.file-drop-subtitle { margin-top: 4px; color: var(--muted); font-size: 13px; line-height: 1.55; }
.file-select-btn { flex: 0 0 auto; white-space: nowrap; }
.file-selected-list { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.file-empty { color: var(--muted); font-size: 13px; padding: 0 2px; }
.file-chip { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 10px 10px 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-bg); }
.file-chip-icon { flex: 0 0 auto; opacity: 0.85; }
.file-chip-meta { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; min-width: 0; flex: 1; }
.file-chip-name { min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); font-weight: 700; }
.file-chip-size { color: var(--muted); font-size: 12px; white-space: nowrap; }
.file-remove { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; border-radius: 999px; border: 1px solid rgba(239, 68, 68, 0.32); background: rgba(239, 68, 68, 0.12); color: var(--danger); cursor: pointer; font-size: 20px; font-weight: 800; line-height: 1; }
.file-remove:hover { background: rgba(239, 68, 68, 0.2); border-color: rgba(239, 68, 68, 0.5); }
@media (max-width: 720px) { .file-drop-panel { align-items: stretch; flex-direction: column; } .file-select-btn { width: 100%; } }

/* Dashboard received/published pending-task reminder */
.dashboard-tab-chip {
  position: relative;
  isolation: isolate;
  overflow: visible;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  line-height: 1.2;
}
.dashboard-tab-chip.chip-attention {
  border-color: rgba(56, 189, 248, 0.78);
  background: rgba(56, 189, 248, 0.16);
  animation: dashboard-tab-attention-fade 1.85s ease-in-out infinite;
}
.dashboard-tab-chip.chip-attention::before,
.dashboard-tab-chip.chip-attention::after {
  content: "";
  position: absolute;
  pointer-events: none;
  border-radius: 999px;
  z-index: -1;
}
.dashboard-tab-chip.chip-attention::before {
  inset: -4px;
  background: rgba(56, 189, 248, 0.28);
  filter: blur(10px);
  animation: dashboard-tab-ghost-glow 1.85s ease-in-out infinite;
}
.dashboard-tab-chip.chip-attention::after {
  inset: -9px;
  border: 1px solid rgba(56, 189, 248, 0.42);
  background: rgba(56, 189, 248, 0.08);
  animation: dashboard-tab-phantom-ring 1.85s ease-out infinite;
}
.chip-alert-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(239, 68, 68, 0.18);
  color: #fecaca;
  border: 1px solid rgba(248, 113, 113, 0.32);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}
body[data-theme="light"] .chip-alert-count,
body[data-theme="blue"] .chip-alert-count,
body[data-theme="pink"] .chip-alert-count,
body[data-theme="green"] .chip-alert-count {
  color: #b91c1c;
  background: rgba(239, 68, 68, 0.14);
  border-color: rgba(185, 28, 28, 0.22);
}
.chip-alert-count.chip-count-empty {
  color: var(--muted);
  background: rgba(148, 163, 184, 0.11);
  border-color: rgba(148, 163, 184, 0.24);
}
.chip-paused-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(245, 158, 11, 0.14);
  color: #fcd34d;
  border: 1px solid rgba(245, 158, 11, 0.34);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}
body[data-theme="light"] .chip-paused-count,
body[data-theme="blue"] .chip-paused-count,
body[data-theme="pink"] .chip-paused-count,
body[data-theme="green"] .chip-paused-count {
  color: #92400e;
  background: rgba(245, 158, 11, 0.14);
  border-color: rgba(146, 64, 14, 0.24);
}
@keyframes dashboard-tab-attention-fade {
  0%, 100% {
    opacity: 0.78;
    transform: translateY(0) scale(1);
    box-shadow: 0 0 0 0 rgba(56, 189, 248, 0.0), 0 0 0 rgba(56, 189, 248, 0);
  }
  38% {
    opacity: 1;
    transform: translateY(-1px) scale(1.025);
    box-shadow: 0 0 0 1px rgba(56, 189, 248, 0.24) inset, 0 0 22px rgba(56, 189, 248, 0.34);
  }
  72% {
    opacity: 0.42;
    transform: translateY(0) scale(0.985);
    box-shadow: 0 0 0 0 rgba(56, 189, 248, 0.0), 0 0 0 rgba(56, 189, 248, 0);
  }
}
@keyframes dashboard-tab-ghost-glow {
  0%, 100% { opacity: 0; transform: scale(0.92); }
  28% { opacity: 0.52; transform: scale(1.03); }
  72% { opacity: 0; transform: scale(1.16); }
}
@keyframes dashboard-tab-phantom-ring {
  0% { opacity: 0; transform: scale(0.9); }
  24% { opacity: 0.72; transform: scale(1); }
  68% { opacity: 0; transform: scale(1.24); }
  100% { opacity: 0; transform: scale(1.32); }
}
@media (prefers-reduced-motion: reduce) {
  .dashboard-tab-chip.chip-attention,
  .dashboard-tab-chip.chip-attention::before,
  .dashboard-tab-chip.chip-attention::after {
    animation: none;
  }
  .dashboard-tab-chip.chip-attention::after { display: none; }
}
@media (max-width: 720px) {
  .dashboard-tab-chip { width: 100%; justify-content: space-between; }
}

/* Upload progress: shared by every multipart file-upload form */
.upload-progress {
  margin-top: 12px;
  padding: 12px 14px;
  border: 1px solid rgba(56, 189, 248, 0.26);
  border-radius: 16px;
  background: var(--surface-bg-2);
  box-shadow: 0 12px 34px rgba(2, 6, 23, 0.16);
}
.upload-progress[hidden] { display: none !important; }
.upload-progress-head,
.upload-progress-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.upload-progress-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text);
  font-size: 13px;
  font-weight: 800;
}
.upload-progress-percent {
  flex: 0 0 auto;
  color: var(--primary);
  font-size: 13px;
  font-weight: 900;
}
.upload-progress-track {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 10px;
  margin: 10px 0 8px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.18);
}
.upload-progress-fill {
  display: block;
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(56, 189, 248, 0.9), rgba(34, 197, 94, 0.9));
  transition: width 0.18s ease;
}
.upload-progress-meta {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}
.upload-progress.is-indeterminate .upload-progress-fill {
  width: 42%;
  animation: upload-progress-slide 1.15s ease-in-out infinite;
}
.upload-progress.is-complete {
  border-color: rgba(34, 197, 94, 0.36);
}
.upload-progress.is-error {
  border-color: rgba(239, 68, 68, 0.42);
  background: rgba(239, 68, 68, 0.08);
}
.upload-progress.is-error .upload-progress-percent,
.upload-progress.is-error .upload-progress-title {
  color: var(--danger);
}
@keyframes upload-progress-slide {
  0% { transform: translateX(-110%); }
  100% { transform: translateX(260%); }
}
@media (max-width: 720px) {
  .upload-progress-head,
  .upload-progress-meta {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }
}

/* Recurring agenda additions */
.calendar-recurrence-panel{display:grid;gap:12px;padding:14px;border:1px dashed rgba(148,163,184,.28);border-radius:16px;background:rgba(148,163,184,.08)}
.calendar-dot.recurring{background:rgba(139,92,246,.92)}
.agenda-color-purple{--agenda-accent:rgba(139,92,246,.92);--agenda-soft:rgba(139,92,246,.13);--agenda-border:rgba(139,92,246,.36)}
.agenda-color-blue{--agenda-accent:rgba(59,130,246,.92);--agenda-soft:rgba(59,130,246,.13);--agenda-border:rgba(59,130,246,.36)}
.agenda-color-green{--agenda-accent:rgba(34,197,94,.92);--agenda-soft:rgba(34,197,94,.13);--agenda-border:rgba(34,197,94,.36)}
.agenda-color-orange{--agenda-accent:rgba(249,115,22,.92);--agenda-soft:rgba(249,115,22,.13);--agenda-border:rgba(249,115,22,.36)}
.agenda-color-pink{--agenda-accent:rgba(236,72,153,.92);--agenda-soft:rgba(236,72,153,.13);--agenda-border:rgba(236,72,153,.36)}
.calendar-entry.agenda-entry.is-recurring{border-left-color:var(--agenda-accent);background:var(--agenda-soft)}
.agenda-item-card.is-recurring{border-left:5px solid var(--agenda-accent);background:linear-gradient(90deg,var(--agenda-soft),var(--panel))}
.recurring-badge{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;margin-right:6px;border-radius:999px;font-size:12px;font-weight:700;background:var(--agenda-soft);border:1px solid var(--agenda-border);color:var(--text)}
.recurring-copy{font-size:12px}
.done-check{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;margin-right:6px;border-radius:999px;font-size:13px;font-weight:800;background:rgba(34,197,94,.18);border:1px solid rgba(34,197,94,.34);color:var(--text)}

/* Task creation publish modal */
.task-publish-modal[hidden] { display: none !important; }
.task-publish-modal {
  position: fixed;
  inset: 0;
  z-index: 140;
  display: grid;
  place-items: center;
  padding: 22px;
}
.task-publish-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(2, 6, 23, 0.72);
  backdrop-filter: blur(7px);
}
.task-publish-dialog {
  position: relative;
  z-index: 1;
  width: min(520px, 100%);
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 22px;
  border: 1px solid rgba(56, 189, 248, 0.28);
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.98), rgba(2, 8, 23, 0.98));
  box-shadow: 0 28px 90px rgba(2, 6, 23, 0.66);
}
.task-publish-icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 16px;
  border: 1px solid rgba(56, 189, 248, 0.32);
  background: rgba(56, 189, 248, 0.13);
  color: var(--primary);
  font-size: 24px;
  font-weight: 900;
}
.task-publish-body {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: 10px;
}
.task-publish-body h3 {
  margin: 0;
  font-size: 20px;
}
.task-publish-body p {
  margin: 0;
  line-height: 1.55;
}
.task-publish-track {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 12px;
  margin-top: 2px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.18);
}
.task-publish-fill {
  display: block;
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(56, 189, 248, 0.95), rgba(34, 197, 94, 0.95));
  transition: width 0.18s ease;
}
.task-publish-modal.is-indeterminate .task-publish-fill {
  width: 44%;
  animation: task-publish-slide 1.1s ease-in-out infinite;
}
.task-publish-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}
.task-publish-close {
  justify-self: start;
  margin-top: 2px;
}
.task-publish-modal.is-success .task-publish-dialog {
  border-color: rgba(34, 197, 94, 0.42);
}
.task-publish-modal.is-success .task-publish-icon {
  color: var(--success);
  border-color: rgba(34, 197, 94, 0.38);
  background: rgba(34, 197, 94, 0.14);
}
.task-publish-modal.is-error .task-publish-dialog {
  border-color: rgba(239, 68, 68, 0.46);
}
.task-publish-modal.is-error .task-publish-icon {
  color: var(--danger);
  border-color: rgba(239, 68, 68, 0.42);
  background: rgba(239, 68, 68, 0.14);
}
body.task-publish-modal-open { overflow: hidden; }
@keyframes task-publish-slide {
  0% { transform: translateX(-120%); }
  100% { transform: translateX(260%); }
}
@media (max-width: 620px) {
  .task-publish-modal { padding: 14px; }
  .task-publish-dialog {
    flex-direction: column;
    padding: 18px;
    border-radius: 20px;
  }
  .task-publish-meta {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }
}

/* Multi-assignee task and department agenda enhancements */
.employee-picker-panel {
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.035);
}
.field-label-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 10px;
}
.employee-checkbox-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}
.employee-checkbox-list.compact {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.employee-check-card {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 10px 11px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  cursor: pointer;
}
.employee-check-card input {
  margin-top: 3px;
}
.employee-check-card strong,
.employee-check-card em {
  display: block;
}
.employee-check-card em {
  margin-top: 2px;
  font-style: normal;
  opacity: 0.72;
  font-size: 0.86em;
}
.employee-check-card:has(input:checked) {
  border-color: rgba(104, 211, 145, 0.75);
  box-shadow: 0 0 0 2px rgba(104, 211, 145, 0.12) inset;
}
.assignee-summary-panel {
  border: 1px solid rgba(104, 211, 145, 0.28);
  border-radius: 14px;
  padding: 12px;
  background: rgba(104, 211, 145, 0.08);
}
.assignee-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.assignee-chip {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 5px 9px;
  font-size: 0.88rem;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.06);
}
.assignee-chip.is-accepted {
  border-color: rgba(104, 211, 145, 0.55);
}
.assignee-chip.is-pending {
  border-color: rgba(246, 173, 85, 0.55);
}
.collaboration-notice {
  margin-top: 8px;
  border-radius: 12px;
  padding: 10px 12px;
  background: rgba(246, 173, 85, 0.13);
  border: 1px solid rgba(246, 173, 85, 0.36);
  font-weight: 650;
}
.highlight-action {
  border-color: rgba(246, 173, 85, 0.55) !important;
  box-shadow: 0 0 0 2px rgba(246, 173, 85, 0.12) inset;
}
.agenda-form-shell {
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.agenda-form-shell.is-department-agenda-selected {
  border-color: rgba(99, 179, 237, 0.85) !important;
  box-shadow: 0 0 0 3px rgba(99, 179, 237, 0.18), 0 18px 40px rgba(99, 179, 237, 0.12);
  background: rgba(99, 179, 237, 0.10);
}
.agenda-scope-switch {
  border: 1px dashed rgba(99, 179, 237, 0.42);
  border-radius: 14px;
  padding: 12px;
  background: rgba(99, 179, 237, 0.06);
  cursor: pointer;
  transition: border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}
.agenda-scope-switch:hover,
.agenda-scope-switch:focus-visible {
  border-color: rgba(99, 179, 237, 0.82);
  background: rgba(99, 179, 237, 0.12);
  box-shadow: 0 0 0 3px rgba(99, 179, 237, 0.12);
  outline: none;
}
.department-agenda-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-weight: 700;
  cursor: pointer;
  user-select: none;
}
.department-agenda-toggle input {
  pointer-events: auto;
}
.agenda-department-field {
  margin-top: 10px;
  cursor: default;
}
.calendar-dot.department-agenda {
  background: currentColor;
  border: 2px solid rgba(99, 179, 237, 0.9);
}
.agenda-entry.is-department-agenda,
.agenda-item-card.is-department-agenda {
  border-color: rgba(99, 179, 237, 0.45);
  background: rgba(99, 179, 237, 0.09);
}
.department-agenda-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 2px 7px;
  margin-right: 4px;
  font-size: 0.78rem;
  font-weight: 750;
  border: 1px solid rgba(99, 179, 237, 0.58);
  background: rgba(99, 179, 237, 0.15);
}


.agenda-day-card .split-head { align-items: center; }
.agenda-create-panel {
  margin: 0 0 14px;
  padding: 16px;
  border: 1px dashed var(--line);
  border-radius: 18px;
  background: var(--surface-bg);
}
.agenda-create-panel[hidden] { display: none !important; }
.agenda-create-panel.is-open { animation: agendaCreatePanelIn .16s ease-out; }
.agenda-create-panel-head { margin-bottom: 12px; }
.agenda-create-panel-head h4 { margin: 0; font-size: 18px; }
[data-agenda-create-toggle][aria-expanded="true"] { box-shadow: 0 0 0 1px rgba(56,189,248,.32) inset; }
@keyframes agendaCreatePanelIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (max-width:760px){
  .agenda-day-card .split-head { align-items:flex-start; }
  [data-agenda-create-toggle] { width:100%; }
}


.calendar-toolbar-actions-with-jump {
  align-items: flex-end;
}
.calendar-month-nav-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.calendar-jump-form {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--panel-soft);
}
.calendar-jump-field {
  display: grid;
  gap: 5px;
  margin: 0;
  min-width: 104px;
}
.calendar-jump-field span {
  font-size: 12px;
  color: var(--muted);
  font-weight: 700;
}
.calendar-jump-field select {
  min-height: 38px;
  padding: 7px 36px 7px 10px;
  border-radius: 12px;
}
@media (max-width: 760px) {
  .calendar-jump-form,
  .calendar-month-nav-actions {
    width: 100%;
  }
  .calendar-jump-field {
    flex: 1 1 120px;
  }
  .calendar-jump-form .btn {
    flex: 1 1 100%;
  }
}


/* Fast navigation: page switches immediately, data refreshes silently. */
.fast-nav-status {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 1200;
  border: 1px solid rgba(120, 144, 255, 0.38);
  border-radius: 999px;
  padding: 9px 14px;
  background: rgba(15, 23, 42, 0.86);
  color: #e5ecff;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.28);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  backdrop-filter: blur(12px);
}

.fast-nav-status[hidden] {
  display: none !important;
}

.fast-nav-status[data-state="synced"] {
  border-color: rgba(52, 211, 153, 0.45);
}

.fast-nav-status[data-state="failed"] {
  border-color: rgba(248, 113, 113, 0.5);
}

.fast-page-shell {
  min-height: 260px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 12px;
}

.fast-page-spinner {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 3px solid rgba(148, 163, 184, 0.28);
  border-top-color: rgba(96, 165, 250, 0.9);
  animation: fastPageSpin 0.9s linear infinite;
}

@keyframes fastPageSpin {
  to { transform: rotate(360deg); }
}

.attachment-delete-form { margin: 0; display: inline-flex; }

/* Flexible due-date rollover and agenda edit controls */
.checkbox-card {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface-bg);
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}
.checkbox-card input {
  margin-top: 3px;
  flex: 0 0 auto;
}
.checkbox-card strong,
.checkbox-card small {
  display: block;
}
.checkbox-card strong {
  color: var(--text);
  font-weight: 750;
}
.checkbox-card small {
  margin-top: 3px;
  color: var(--muted);
  line-height: 1.45;
}
.checkbox-card:has(input:checked) {
  border-color: rgba(56, 189, 248, 0.58);
  background: rgba(56, 189, 248, 0.10);
  box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.10) inset;
}
.due-roll-toggle.compact {
  min-height: 100%;
}
.due-settings-panel {
  border-color: rgba(56, 189, 248, 0.30) !important;
  background: rgba(56, 189, 248, 0.06);
}
.flexible-due-badge {
  border-color: rgba(56, 189, 248, 0.42) !important;
  background: rgba(56, 189, 248, 0.14) !important;
}
.agenda-item-card {
  flex-wrap: wrap;
}
.agenda-edit-panel {
  flex: 1 0 100%;
  margin-top: 4px;
  padding: 14px;
  border: 1px dashed var(--line);
  border-radius: 16px;
  background: var(--surface-bg);
}
.agenda-edit-panel[hidden] {
  display: none !important;
}
.agenda-edit-panel.is-open {
  animation: agendaCreatePanelIn 0.16s ease-out;
}
.agenda-edit-panel .agenda-form-shell {
  margin-top: 0;
}
.calendar-recurrence-panel.compact-edit-panel {
  padding: 12px;
}
[data-agenda-edit-toggle][aria-expanded="true"] {
  box-shadow: 0 0 0 1px rgba(56, 189, 248, 0.32) inset;
}
@media (max-width: 760px) {
  .checkbox-card {
    width: 100%;
  }
  [data-agenda-edit-toggle] {
    width: 100%;
  }
}
.table-mini-badge {
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
  padding: 2px 7px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 750;
  white-space: nowrap;
}

body > .theme-effects-layer--page {
  display: none;
}

.ai-first-dashboard {
  display: flex;
  flex-direction: column;
}

.ai-first-dashboard .board-ai-panel {
  order: 1;
}

.dashboard-page-head {
  order: 2;
  margin-top: 4px;
  opacity: 0.82;
}

.dashboard-advanced-data {
  order: 3;
  margin-top: 4px;
}

.dashboard-advanced-data > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 44px;
  padding: 11px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-bg);
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  list-style: none;
}

.dashboard-advanced-data > summary::-webkit-details-marker {
  display: none;
}

.dashboard-advanced-data > summary::after {
  content: "+";
  color: var(--primary);
  font-size: 18px;
  line-height: 1;
}

.dashboard-advanced-data[open] > summary::after {
  content: "-";
}

.dashboard-advanced-body {
  display: grid;
  gap: 16px;
  margin-top: 14px;
}

.dashboard-advanced-data:not([open]) .dashboard-advanced-body {
  display: none;
}

.board-ai-panel {
  display: grid;
  gap: 16px;
  margin: 0 0 22px;
  padding: 22px;
  border: 1px solid rgba(2, 132, 199, 0.22);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 252, 0.96));
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08);
}

.board-ai-head h3 {
  margin: 6px 0 4px;
  font-size: 24px;
  line-height: 1.2;
}

.board-ai-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: end;
}

.board-ai-form textarea {
  min-height: 92px;
  border-radius: 8px;
  resize: vertical;
  font-size: 16px;
  line-height: 1.55;
}

.board-ai-form button {
  min-height: 54px;
  min-width: 112px;
}

.board-ai-quick,
.board-ai-task-options,
.ai-next-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.board-ai-quick button,
.board-ai-option,
.ai-next-option {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-bg);
  color: var(--text);
  padding: 7px 11px;
  font-size: 12px;
  font-weight: 750;
  cursor: pointer;
}

.board-ai-quick button:hover,
.board-ai-option:hover,
.ai-next-option:hover,
.ai-next-option.is-selected {
  border-color: rgba(2, 132, 199, 0.38);
  background: rgba(224, 242, 254, 0.82);
  color: var(--primary);
}

.board-ai-answer {
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-bg);
  color: var(--text);
  line-height: 1.6;
}

.board-ai-draft:empty {
  display: none;
}

.board-ai-draft-card {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid rgba(2, 132, 199, 0.28);
  border-radius: 8px;
  background: rgba(224, 242, 254, 0.52);
}

.board-ai-draft-card.is-published {
  border-color: rgba(5, 150, 105, 0.28);
  background: rgba(236, 253, 245, 0.74);
}

.board-ai-draft-title {
  color: var(--text);
  font-weight: 900;
  line-height: 1.4;
}

.board-ai-draft-meta,
.board-ai-draft-desc {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

.board-ai-draft-desc {
  white-space: pre-wrap;
}

.board-ai-draft-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.board-ai-draft-link {
  color: #047857;
  font-weight: 850;
  text-decoration: none;
}

.board-ai-briefing {
  display: grid;
  gap: 10px;
}

.board-ai-briefing:empty {
  display: none;
}

.board-ai-briefing-title {
  font-size: 18px;
  font-weight: 900;
}

.board-ai-briefing-prompt {
  color: var(--muted);
  line-height: 1.55;
}

.board-ai-briefing-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.board-ai-briefing-card {
  min-height: 72px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(248, 250, 252, 0.78);
}

.board-ai-briefing-card strong,
.board-ai-briefing-card span {
  display: block;
}

.board-ai-briefing-card strong {
  font-size: 24px;
  line-height: 1;
}

.board-ai-briefing-card span {
  margin-top: 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.board-ai-briefing-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.board-ai-briefing-action {
  border: 1px solid rgba(2, 132, 199, 0.24);
  border-radius: 999px;
  background: rgba(224, 242, 254, 0.74);
  color: var(--primary);
  padding: 7px 11px;
  font-size: 12px;
  font-weight: 850;
  cursor: pointer;
}

.board-ai-results {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.board-ai-agenda-results {
  margin-top: -4px;
}

.board-ai-task,
.board-ai-empty {
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-soft);
}

.board-ai-task[data-board-ai-preview-task-id],
.board-ai-task[data-board-agenda-preview-id] {
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}

.board-ai-task[data-board-ai-preview-task-id]:hover,
.board-ai-task[data-board-ai-preview-task-id]:focus-within,
.board-ai-task[data-board-agenda-preview-id]:hover,
.board-ai-task[data-board-agenda-preview-id]:focus-within {
  border-color: rgba(56, 189, 248, 0.42);
  background: rgba(224, 242, 254, 0.18);
  transform: translateY(-1px);
}

.board-ai-agenda-card {
  border-color: rgba(5, 150, 105, 0.24);
  background: rgba(236, 253, 245, 0.72);
}

.board-ai-task-title {
  display: block;
  color: var(--text);
  font-weight: 850;
  line-height: 1.45;
}

.board-ai-task-meta,
.board-ai-task-desc,
.board-ai-task-reason {
  margin-top: 5px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.board-ai-task-desc {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.board-ai-task-options {
  margin-top: 10px;
}

.board-ai-task-reason {
  color: #0f766e;
  font-weight: 800;
}

.board-ai-option-primary {
  border-color: rgba(2, 132, 199, 0.36);
  background: rgba(224, 242, 254, 0.82);
  color: var(--primary);
}

.board-ai-empty {
  grid-column: 1 / -1;
  color: var(--muted);
}

.board-task-preview-modal {
  position: fixed;
  inset: 0;
  z-index: 92;
  display: none;
}

.board-task-preview-modal:not([hidden]) {
  display: block;
}

.board-task-preview-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(2, 6, 23, 0.62);
  backdrop-filter: blur(8px);
}

.board-task-preview-dialog {
  position: absolute;
  top: 18px;
  right: 18px;
  bottom: 18px;
  width: min(1120px, calc(100vw - 36px));
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(15, 23, 42, 0.98), rgba(9, 14, 27, 0.99)),
    radial-gradient(circle at 12% 0%, rgba(56, 189, 248, 0.16), transparent 32%);
  color: #e8eef8;
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.46);
}

.board-task-preview-toolbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 18px 20px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.18);
  background: rgba(2, 6, 23, 0.28);
}

.board-task-preview-toolbar h3 {
  margin: 6px 0 0;
  color: #f8fafc;
  font-size: 20px;
  line-height: 1.35;
}

.board-task-preview-grid {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(360px, 0.85fr);
  gap: 0;
}

.board-task-preview-main,
.board-task-preview-ai {
  min-height: 0;
  overflow: auto;
  padding: 18px;
}

.board-task-preview-main {
  border-right: 1px solid rgba(148, 163, 184, 0.16);
}

.board-task-preview-main .task-preview-desc {
  color: #dbeafe;
}

.board-task-preview-main .task-preview-section h4 {
  color: #f8fafc;
}

.board-task-preview-main .task-preview-files {
  color: #cbd5e1;
}

.board-task-preview-ai {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 12px;
  background: rgba(2, 6, 23, 0.20);
}

.board-task-preview-ai-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}

.board-task-preview-ai-head h4 {
  margin: 6px 0 0;
  color: #f8fafc;
  font-size: 16px;
  line-height: 1.35;
}

.board-task-preview-ai-head span {
  flex: 0 0 auto;
  max-width: 180px;
  border: 1px solid rgba(96, 165, 250, 0.24);
  border-radius: 999px;
  padding: 7px 10px;
  color: #aab8cf;
  font-size: 12px;
  font-weight: 800;
  text-align: right;
}

.board-task-ai-messages {
  min-height: 220px;
  max-height: none;
}

.board-task-ai-form {
  padding-top: 12px;
}

.board-task-ai-form textarea {
  background: rgba(2, 6, 23, 0.72);
  color: #f8fafc;
}

body.board-task-preview-open {
  overflow: hidden;
}

body.board-agenda-preview-open {
  overflow: hidden;
}

@media (max-width: 900px) {
  .board-task-preview-dialog {
    top: 10px;
    right: 10px;
    bottom: 10px;
    width: calc(100vw - 20px);
  }

  .board-task-preview-grid {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0, 1fr) minmax(300px, 0.85fr);
  }

  .board-task-preview-main {
    border-right: 0;
    border-bottom: 1px solid rgba(148, 163, 184, 0.16);
  }

  .board-task-ai-form {
    grid-template-columns: 1fr;
  }
}

body[data-theme="dark"] .board-ai-panel {
  border-color: rgba(96, 165, 250, 0.22);
  background:
    linear-gradient(180deg, rgba(15, 23, 42, 0.94), rgba(11, 16, 32, 0.98)),
    radial-gradient(circle at 18% 0%, rgba(56, 189, 248, 0.12), transparent 34%);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

body[data-theme="dark"] .board-ai-head h3,
body[data-theme="dark"] .board-ai-briefing-title {
  color: #f1f7ff;
}

body[data-theme="dark"] .board-ai-form textarea {
  border-color: rgba(96, 165, 250, 0.26);
  background: rgba(2, 6, 23, 0.86);
  color: #f8fafc;
}

body[data-theme="dark"] .board-ai-answer {
  border-color: rgba(148, 163, 184, 0.20);
  background: rgba(30, 41, 59, 0.66);
  color: #e8eef8;
}

body[data-theme="dark"] .board-ai-briefing-card,
body[data-theme="dark"] .board-ai-task,
body[data-theme="dark"] .board-ai-empty {
  border-color: rgba(148, 163, 184, 0.18);
  background: rgba(17, 24, 39, 0.74);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

body[data-theme="dark"] .board-ai-briefing-card strong {
  color: #f8fafc;
}

body[data-theme="dark"] .board-ai-briefing-card span,
body[data-theme="dark"] .board-ai-task-meta,
body[data-theme="dark"] .board-ai-task-desc {
  color: #aab8cf;
}

body[data-theme="dark"] .board-ai-task-reason {
  color: #5eead4;
}

body[data-theme="dark"] .board-ai-quick button,
body[data-theme="dark"] .board-ai-option,
body[data-theme="dark"] .board-ai-briefing-action {
  border-color: rgba(96, 165, 250, 0.24);
  background: rgba(15, 23, 42, 0.72);
  color: #dbeafe;
}

body[data-theme="dark"] .board-ai-quick button:hover,
body[data-theme="dark"] .board-ai-option:hover,
body[data-theme="dark"] .board-ai-option-primary,
body[data-theme="dark"] .board-ai-briefing-action:hover {
  border-color: rgba(56, 189, 248, 0.48);
  background: rgba(14, 116, 144, 0.24);
  color: #7dd3fc;
}

body[data-theme="dark"] .board-ai-agenda-card {
  border-color: rgba(20, 184, 166, 0.24);
  background: rgba(6, 78, 59, 0.22);
}

body[data-theme="dark"] .dashboard-advanced-data > summary {
  border-color: rgba(148, 163, 184, 0.18);
  background: rgba(15, 23, 42, 0.68);
  color: #aab8cf;
}

.task-ai-only-detail {
  display: flex;
  flex-direction: column;
  max-width: 1180px;
  margin: 0 auto;
}

.task-ai-only-detail .task-hero {
  order: 2;
}

.task-ai-only-detail .ai-task-panel {
  order: 1;
}

.task-ai-only-detail .status-flow-card {
  order: 3;
}

.task-ai-only-detail .detail-grid.action-first {
  order: 4;
}

.task-ai-only-detail > section:not(.ai-task-panel):not(.status-flow-card) {
  order: 5;
}

.task-ai-only-detail .head-actions,
.task-ai-only-detail .status-flow-tools,
.task-ai-only-detail .detail-grid.action-first > section:first-child,
.task-ai-only-detail .attachment-actions,
.task-ai-only-detail .attachment-preview-card,
.task-ai-only-detail .meta-edit-block {
  display: none !important;
}

.task-ai-only-detail form:not(.ai-task-form),
.task-ai-only-detail .btn:not([data-ai-send]) {
  display: none !important;
}

.task-ai-only-detail .detail-grid.action-first {
  display: block;
}

.task-ai-only-detail .latest-update {
  margin-bottom: 20px;
}

.task-ai-only-detail .attachments-head {
  align-items: flex-start;
}

.task-ai-only-detail .attachment-item {
  grid-template-columns: 1fr;
  padding: 14px 16px;
  border-radius: 8px;
}

.task-ai-only-detail .meta-grid.meta-lower {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.task-ai-only-detail .card {
  border-radius: 8px;
  box-shadow: 0 12px 34px rgba(15, 23, 42, 0.07);
}

.ai-task-panel {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 0 0 22px;
  padding: 18px;
  border: 1px solid rgba(2, 132, 199, 0.22);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 252, 0.95)),
    var(--card-bg);
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08);
}

body[data-theme="dark"] .ai-task-panel {
  background:
    linear-gradient(180deg, rgba(15, 23, 42, 0.94), rgba(17, 24, 39, 0.92)),
    var(--card-bg);
  border-color: rgba(56, 189, 248, 0.24);
  box-shadow: 0 22px 46px rgba(2, 6, 23, 0.24);
}

.ai-task-panel-head {
  order: 1;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

.ai-task-panel-title {
  margin: 0;
  font-size: 18px;
  line-height: 1.3;
  color: var(--text);
}

.ai-task-panel-subtitle {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.ai-task-state {
  flex: 0 0 auto;
  max-width: 260px;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-bg);
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
  line-height: 1.3;
  text-align: right;
}

.ai-message-list {
  order: 4;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 440px;
  min-height: 160px;
  overflow: auto;
  padding: 2px 4px 2px 0;
}

.ai-next-actions {
  order: 3;
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-bg);
}

.ai-next-title {
  color: var(--text);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.5;
}

.ai-empty {
  display: grid;
  place-items: center;
  min-height: 140px;
  padding: 18px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  background: var(--surface-bg);
  color: var(--muted);
  text-align: center;
  line-height: 1.6;
}

.ai-message {
  width: min(86%, 820px);
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-bg-2);
}

.ai-message-user {
  align-self: flex-end;
  border-color: rgba(2, 132, 199, 0.28);
  background: rgba(224, 242, 254, 0.75);
}

body[data-theme="dark"] .ai-message-user {
  background: rgba(14, 116, 144, 0.18);
}

.ai-message-assistant {
  align-self: flex-start;
  background: var(--panel-soft);
}

.ai-message-meta {
  margin-bottom: 7px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.ai-message-body {
  color: var(--text);
  font-size: 14px;
  line-height: 1.65;
  white-space: pre-wrap;
  word-break: break-word;
}

.ai-action-result {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  margin-top: 10px;
  padding: 5px 9px;
  border: 1px solid rgba(5, 150, 105, 0.28);
  border-radius: 999px;
  background: rgba(16, 185, 129, 0.10);
  color: var(--success);
  font-size: 12px;
  font-weight: 750;
  line-height: 1.35;
}

.ai-action-result.is-failed {
  border-color: rgba(220, 38, 38, 0.28);
  background: rgba(239, 68, 68, 0.10);
  color: var(--danger);
}

.ai-task-form {
  order: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: end;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.ai-task-form textarea {
  min-height: 126px;
  max-height: 180px;
  resize: vertical;
  border-radius: 8px;
}

.ai-task-form button {
  min-height: 46px;
  white-space: nowrap;
}

.ai-task-form button:disabled,
.ai-task-form textarea:disabled {
  cursor: wait;
  opacity: 0.68;
}

@media (max-width: 760px) {
  .layout:has(.ai-first-dashboard) .sidebar,
  .layout:has(.task-ai-only-detail) .sidebar {
    display: none;
  }
  .main:has(.ai-first-dashboard),
  .main:has(.task-ai-only-detail) {
    padding: 10px;
  }
  .main:has(.ai-first-dashboard) .utility-bar,
  .main:has(.task-ai-only-detail) .utility-bar {
    display: none;
  }
  .dashboard-page-head {
    display: none;
  }
  .board-ai-panel {
    margin-top: 0;
    padding: 14px;
  }
  .board-ai-head h3 {
    font-size: 20px;
  }
  .board-ai-briefing-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .dashboard-advanced-data > summary {
    min-height: 42px;
  }
  .dashboard-advanced-data:not([open]) {
    margin-bottom: 18px;
  }
  .dashboard-advanced-data .table-wrap {
    display: none;
  }
  .board-ai-form,
  .board-ai-results {
    grid-template-columns: 1fr;
  }
  .board-ai-form button {
    width: 100%;
  }
  .ai-task-panel {
    padding: 14px;
  }
  .ai-task-panel-head,
  .ai-task-form {
    grid-template-columns: 1fr;
  }
  .ai-task-panel-head {
    display: grid;
  }
  .ai-task-state {
    max-width: none;
    text-align: left;
  }
  .ai-message {
    width: 100%;
  }
  .ai-task-form button {
    width: 100%;
  }
}