:root {
  color-scheme: light;
  --bg: #f5faff;
  --surface: #ffffff;
  --surface-muted: #eaf4ff;
  --ink: #102033;
  --muted: #60758d;
  --line: #cfe0f2;
  --accent: #1479c9;
  --accent-dark: #0b5fa5;
  --accent-soft: #dceeff;
  --warning: #2469a8;
  --warning-soft: #edf6ff;
  --danger: #a63d3d;
  --danger-soft: #fdeaea;
  --success: #166f9e;
  --success-soft: #dff4ff;
  --shadow: 0 18px 60px rgba(20, 121, 201, 0.12);
  font-family:
    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
}

body[data-theme="matrix"] {
  color-scheme: dark;
  --bg: #17060b;
  --surface: #0f1217;
  --surface-muted: #171c24;
  --ink: #f8f5f6;
  --muted: #aebdcb;
  --line: #2b3340;
  --accent: #ff3155;
  --accent-dark: #ff5b73;
  --accent-soft: #321019;
  --warning: #ff3155;
  --warning-soft: #331018;
  --danger: #ff3155;
  --danger-soft: #43131c;
  --success: #4fd49d;
  --success-soft: #10271e;
  --shadow: 0 18px 60px rgba(0, 0, 0, 0.38);
}

body[data-theme="bitrix"] {
  color-scheme: light;
  --bg: #eef3f7;
  --surface: #ffffff;
  --surface-muted: #e8f7ff;
  --ink: #172b4d;
  --muted: #6f7f95;
  --line: #d5e4ef;
  --accent: #2fc6f6;
  --accent-dark: #0a7eb8;
  --accent-soft: #d9f5ff;
  --warning: #ff9f1c;
  --warning-soft: #fff3df;
  --danger: #f15b5b;
  --danger-soft: #ffe8e8;
  --success: #31b86a;
  --success-soft: #e2f8ed;
  --shadow: 0 18px 60px rgba(35, 155, 210, 0.14);
}

body[data-theme="dmsales"] {
  color-scheme: light;
  --bg: #fbfbfd;
  --surface: #ffffff;
  --surface-muted: #f7f3fb;
  --ink: #15151a;
  --muted: #606876;
  --line: #e4e7ec;
  --accent: #d0278d;
  --accent-dark: #9324c2;
  --accent-soft: #f7e8f4;
  --warning: #9324c2;
  --warning-soft: #f3e8fb;
  --danger: #d0278d;
  --danger-soft: #fde8f4;
  --success: #00a9e7;
  --success-soft: #e6f7fd;
  --shadow: 0 18px 60px rgba(147, 36, 194, 0.13);
}

body[data-theme="milestone"] {
  color-scheme: light;
  --bg: #FFFFFF;
  --surface: #FFFFFF;
  --surface-muted: #FAF8F5;
  --ink: #1C1C1E;
  --muted: #5A5A5A;
  --line: #EDEDED;
  --accent: #F4A26B;
  --accent-dark: #E8735A;
  --accent-soft: #FFF0E6;
  --warning: #E8735A;
  --warning-soft: #FFF0E6;
  --danger: #E8735A;
  --danger-soft: #FFF0E6;
  --success: #12A173;
  --success-soft: #E6F7F0;
  --shadow: 0 1px 3px rgba(0,0,0,0.02);
}

/* ── Sidebar ── */
body[data-theme="milestone"] .sidebar {
  background: #FAF8F5;
  border-right: 1px solid #EDEDED;
}

body[data-theme="milestone"] .brand-mark {
  background: linear-gradient(135deg, #F4A26B, #E8735A);
  border-radius: 10px;
}

body[data-theme="milestone"] .nav-tab {
  color: #1C1C1E;
  font-weight: 500;
  border-radius: 8px;
}

body[data-theme="milestone"] .nav-tab.active {
  background: rgba(244, 162, 107, 0.15);
  color: #1C1C1E;
  font-weight: 700;
  position: relative;
}

body[data-theme="milestone"] .quick-stats div {
  background: #FAF8F5;
  border-color: #EDEDED;
}

/* ── Login Screen ── */
body[data-theme="milestone"] .login-screen {
  background:
    radial-gradient(circle at 80% 20%, rgba(242, 196, 168, 0.25) 0%, transparent 60%),
    #FFFFFF;
}

body[data-theme="milestone"] .login-card {
  border: 1px solid #EDEDED;
  box-shadow: 0 8px 32px rgba(244, 162, 107, 0.1);
}

/* ── Top Bar ── */
body[data-theme="milestone"] .session-pill {
  background: #FAF8F5;
  border-color: #EDEDED;
}

body[data-theme="milestone"] .secondary-button {
  border: 1px solid #EDEDED;
  background: #FFFFFF;
  border-radius: 8px;
  font-weight: 600;
}

body[data-theme="milestone"] .primary-button {
  background: #F4A26B;
  color: #FFFFFF;
  border-radius: 8px;
  font-weight: 700;
}

body[data-theme="milestone"] .primary-button:hover,
body[data-theme="milestone"] .primary-button:focus-visible {
  background: #E8735A;
}

/* ── KPI / Metric Cards ── */
body[data-theme="milestone"] .metric-card {
  background: #FFFFFF;
  border: 1px solid #EDEDED;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.02);
}

body[data-theme="milestone"] .metric-card strong {
  font-size: 30px;
  font-weight: 700;
}

/* ── Goal Cards ── */
body[data-theme="milestone"] .goal-card {
  border-radius: 12px;
  border: 1px solid #EDEDED;
  box-shadow: 0 1px 3px rgba(0,0,0,0.02);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

body[data-theme="milestone"] .goal-card:hover {
  box-shadow: 0 4px 16px rgba(244, 162, 107, 0.12);
  transform: translateY(-1px);
}

body[data-theme="milestone"] .goal-card h4 {
  font-size: 17px;
  font-weight: 700;
  color: #1C1C1E;
}

/* ── Badges ── */
body[data-theme="milestone"] .badge.high {
  background: #E8735A;
  color: #FFFFFF;
  font-weight: 700;
  border-radius: 4px;
  text-transform: uppercase;
  font-size: 12px;
}

body[data-theme="milestone"] .badge.medium {
  background: #FFF0E6;
  color: #F4A26B;
}

body[data-theme="milestone"] .badge.low,
body[data-theme="milestone"] .badge.done {
  background: #E6F7F0;
  color: #12A173;
}

body[data-theme="milestone"] .badge.late {
  background: #FFF0E6;
  color: #E8735A;
}

body[data-theme="milestone"] .badge.date-badge {
  background: rgba(242, 196, 168, 0.25);
  color: #1C1C1E;
}

body[data-theme="milestone"] .badge {
  border-radius: 4px;
}

/* ── Progress Bar ── */
body[data-theme="milestone"] .progress-track {
  background: #FAF8F5;
  height: 8px;
  border-radius: 999px;
}

body[data-theme="milestone"] .progress-fill {
  background: #F4A26B;
  border-radius: 999px;
}

/* ── Panels ── */
body[data-theme="milestone"] .panel {
  border: 1px solid #EDEDED;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.02);
}

/* ── Delegation Details ── */
body[data-theme="milestone"] .delegation-details {
  background: #FAF8F5;
  border-color: #EDEDED;
}

/* ── Ring Card ── */
body[data-theme="milestone"] .ring-card {
  background: #FAF8F5;
  border-color: #EDEDED;
}

body[data-theme="milestone"] .percent-ring {
  --ring-color: #F4A26B;
}

/* ── Toolbar / Filters ── */
body[data-theme="milestone"] .toolbar {
  gap: 12px;
}

body[data-theme="milestone"] select {
  border: 1px solid #EDEDED;
  border-radius: 8px;
  background: #FFFFFF;
}

body[data-theme="milestone"] input {
  border: 1px solid #EDEDED;
  border-radius: 8px;
}

/* ── Dialog ── */
body[data-theme="milestone"] .goal-dialog,
body[data-theme="milestone"] .person-dialog {
  border-radius: 12px;
  border: 1px solid #EDEDED;
}

/* ── Eyebrow ── */
body[data-theme="milestone"] .eyebrow {
  color: #F4A26B;
}

/* ── Calendar ── */
body[data-theme="milestone"] .calendar-board-card {
  border-radius: 12px;
}

body[data-theme="milestone"] .calendar-cell.today {
  border-color: #F4A26B;
}

/* ── Small Button ── */
body[data-theme="milestone"] .small-button {
  border: 1px solid #EDEDED;
  border-radius: 8px;
  font-weight: 600;
}

body[data-theme="milestone"] .small-button:hover {
  background: #FAF8F5;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--ink);
}

input[type="checkbox"] {
  accent-color: var(--accent);
}

.login-screen {
  display: grid;
  min-height: 100vh;
  place-items: center;
  padding: 24px;
  background:
    linear-gradient(135deg, rgba(220, 238, 255, 0.9), rgba(255, 255, 255, 0.95)),
    var(--bg);
}

body[data-theme="matrix"] .login-screen {
  background:
    radial-gradient(circle at top left, rgba(255, 49, 85, 0.18), transparent 32rem),
    linear-gradient(135deg, #17060b, #0b0d12 70%);
}

body[data-theme="bitrix"] .login-screen {
  background:
    radial-gradient(circle at top left, rgba(47, 198, 246, 0.28), transparent 34rem),
    linear-gradient(135deg, #eef8ff, #ffffff 72%);
}

body[data-theme="dmsales"] .login-screen {
  background:
    linear-gradient(135deg, rgba(208, 39, 141, 0.06), rgba(0, 169, 231, 0.08)),
    #ffffff;
}

.login-screen[hidden] {
  display: none;
}

.login-card {
  display: grid;
  width: min(420px, 100%);
  gap: 16px;
  padding: 26px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.login-brand {
  margin-bottom: 6px;
}

.login-error {
  min-height: 20px;
  margin: 0;
  color: var(--danger);
  font-weight: 700;
}

.login-hint {
  display: grid;
  gap: 4px;
  padding: 12px;
  border-radius: 8px;
  background: var(--surface-muted);
  color: var(--muted);
  font-size: 13px;
}

body[data-theme="matrix"] .login-hint {
  background: var(--surface-muted);
}

.login-hint strong {
  color: var(--ink);
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

.app-shell {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  min-height: 100vh;
}

.app-shell[hidden] {
  display: none;
}

.sidebar {
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding: 28px 20px;
  border-right: 1px solid var(--line);
  background: #ffffff;
}

body[data-theme="matrix"] .sidebar {
  background: #10050a;
}

body[data-theme="bitrix"] .sidebar {
  background: #153b66;
  color: #ffffff;
}

body[data-theme="bitrix"] .sidebar .brand p,
body[data-theme="bitrix"] .quick-stats small {
  color: rgba(255, 255, 255, 0.72);
}

body[data-theme="bitrix"] .nav-tab {
  color: rgba(255, 255, 255, 0.82);
}

body[data-theme="bitrix"] .nav-tab:hover,
body[data-theme="bitrix"] .nav-tab:focus-visible {
  border-color: rgba(255, 255, 255, 0.24);
  color: #ffffff;
}

body[data-theme="bitrix"] .nav-tab.active {
  background: rgba(47, 198, 246, 0.22);
  color: #ffffff;
}

body[data-theme="bitrix"] .quick-stats div {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.16);
}

body[data-theme="dmsales"] .brand-mark {
  background: linear-gradient(90deg, #00a9e7 0 28%, #9324c2 28% 64%, #d0278d 64% 100%);
}

.brand {
  display: flex;
  gap: 12px;
  align-items: center;
}

.brand-mark {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border-radius: 8px;
  background: var(--accent);
  color: white;
  font-weight: 800;
}

.brand h1,
.brand p,
.topbar h2,
.topbar p,
.panel h3,
.panel h4 {
  margin: 0;
}

.brand h1 {
  font-size: 18px;
}

.brand p {
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
}

.nav-tabs {
  display: grid;
  gap: 8px;
}

.nav-tab {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  text-align: left;
}

.nav-tab:hover,
.nav-tab:focus-visible {
  border-color: var(--line);
  color: var(--ink);
  outline: none;
}

.nav-tab.active {
  background: var(--accent-soft);
  color: var(--accent-dark);
  font-weight: 700;
}

.quick-stats {
  display: grid;
  gap: 12px;
  margin-top: auto;
}

.quick-stats div,
.metric-card,
.panel,
.goal-card,
.person-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.quick-stats div {
  padding: 14px;
}

.quick-stats span {
  display: block;
  font-size: 28px;
  font-weight: 800;
}

.quick-stats small {
  color: var(--muted);
}

.content {
  min-width: 0;
  padding: 28px;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 24px;
}

.eyebrow {
  margin: 0 0 6px;
  color: var(--accent);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

.topbar h2 {
  font-size: 30px;
  line-height: 1.15;
}

.topbar-actions,
.dialog-actions,
.person-form-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.session-pill {
  display: grid;
  min-height: 40px;
  min-width: 150px;
  justify-content: center;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fcff;
  text-align: left;
}

body[data-theme="matrix"] .session-pill {
  background: var(--surface-muted);
}

.session-pill strong,
.session-pill span {
  overflow: hidden;
  max-width: 220px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.session-pill strong {
  font-size: 13px;
}

.session-pill span {
  color: var(--muted);
  font-size: 12px;
}

.primary-button,
.secondary-button,
.danger-button,
.icon-button {
  min-height: 40px;
  border-radius: 8px;
  border: 1px solid transparent;
  font-weight: 700;
}

.primary-button {
  padding: 0 16px;
  background: var(--accent);
  color: white;
}

.primary-button:hover,
.primary-button:focus-visible {
  background: var(--accent-dark);
}

.secondary-button {
  padding: 0 14px;
  border-color: var(--line);
  background: var(--surface);
  color: var(--ink);
}

.secondary-button:hover,
.secondary-button:focus-visible {
  background: var(--surface-muted);
}

.danger-button {
  padding: 0 14px;
  background: var(--danger-soft);
  color: var(--danger);
}

.danger-button:hover,
.danger-button:focus-visible {
  border-color: rgba(179, 65, 56, 0.35);
}

body[data-theme="matrix"] .primary-button {
  background: var(--accent);
  color: #ffffff;
}

body[data-theme="matrix"] .primary-button:hover,
body[data-theme="matrix"] .primary-button:focus-visible {
  background: #ff4968;
}

body[data-theme="dmsales"] .primary-button {
  background: linear-gradient(90deg, #d0278d, #9324c2);
  color: #ffffff;
}

body[data-theme="dmsales"] .primary-button:hover,
body[data-theme="dmsales"] .primary-button:focus-visible {
  background: linear-gradient(90deg, #bd1f80, #7e1cad);
}

body[data-theme="dmsales"] .nav-tab.active {
  background: var(--accent-soft);
  color: var(--accent-dark);
}

body[data-theme="matrix"] .secondary-button,
body[data-theme="matrix"] .small-button,
body[data-theme="matrix"] .icon-button {
  border-color: var(--line);
  background: var(--surface-muted);
  color: var(--ink);
}

body[data-theme="matrix"] .secondary-button:hover,
body[data-theme="matrix"] .secondary-button:focus-visible,
body[data-theme="matrix"] .small-button:hover,
body[data-theme="matrix"] .small-button:focus-visible {
  background: #202634;
}

.icon-button {
  width: 40px;
  padding: 0;
  background: transparent;
  color: var(--muted);
  font-size: 24px;
}

.icon-button:hover,
.icon-button:focus-visible {
  background: var(--surface-muted);
  color: var(--ink);
}

.view {
  display: none;
}

.view.active {
  display: block;
}

.metric-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}

.metric-card {
  padding: 18px;
}

.metric-label {
  display: block;
  margin-bottom: 10px;
  color: var(--muted);
  font-size: 13px;
}

.metric-card strong {
  font-size: 30px;
}

.split-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(280px, 0.8fr);
  gap: 18px;
}

.panel {
  padding: 18px;
  min-width: 0;
}

.panel-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.panel-heading.compact {
  margin-bottom: 10px;
}

.panel h3,
.panel h4 {
  font-size: 17px;
}

select,
input,
textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
}

body[data-theme="matrix"] select,
body[data-theme="matrix"] input,
body[data-theme="matrix"] textarea {
  background: #0b0f14;
}

select,
input {
  height: 42px;
  padding: 0 12px;
}

textarea {
  padding: 10px 12px;
  resize: vertical;
}

label span {
  display: block;
  margin-bottom: 7px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}

.goal-list,
.goal-board,
.people-load,
.person-grid {
  display: grid;
  gap: 12px;
}

.goal-board {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.goal-card {
  display: grid;
  gap: 14px;
  padding: 16px;
}

.goal-card-header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.goal-card h4 {
  margin: 0 0 6px;
  font-size: 17px;
}

.goal-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

.meta-row,
.subtask-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.badge {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 9px;
  border-radius: 999px;
  background: var(--surface-muted);
  color: var(--ink);
  font-size: 12px;
  font-weight: 700;
}

.badge.high {
  background: #d9ecff;
  color: #075a9c;
}

body[data-theme="matrix"] .badge.high {
  background: #2d1018;
  color: #ff7b91;
}

.badge.medium {
  background: var(--warning-soft);
  color: var(--warning);
}

.badge.low,
.badge.done {
  background: var(--success-soft);
  color: var(--success);
}

.badge.date-badge {
  background: #eef7ff;
  color: var(--accent-dark);
}

body[data-theme="matrix"] .badge.date-badge {
  background: #171f2b;
  color: #d9e7f7;
}

.badge.late {
  background: var(--danger-soft);
  color: var(--danger);
}

.progress-block {
  display: grid;
  gap: 8px;
}

.progress-label {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: var(--muted);
  font-size: 13px;
}

.progress-track {
  overflow: hidden;
  height: 9px;
  border-radius: 999px;
  background: var(--surface-muted);
}

.progress-fill {
  height: 100%;
  border-radius: inherit;
  background: var(--accent);
}

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

.ring-card {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-muted);
}

.percent-ring {
  --ring-value: 0;
  --ring-color: var(--accent);
  display: grid;
  flex: 0 0 auto;
  width: 66px;
  height: 66px;
  place-items: center;
  border-radius: 50%;
  background:
    radial-gradient(circle, var(--surface) 58%, transparent 59%),
    conic-gradient(var(--ring-color) calc(var(--ring-value) * 1%), rgba(143, 163, 184, 0.22) 0);
}

.percent-ring strong {
  color: var(--ink);
  font-size: 15px;
}

.ring-card div {
  min-width: 0;
}

.ring-card div > strong,
.ring-card div > span {
  display: block;
}

.ring-card div > strong {
  margin-bottom: 4px;
  font-size: 13px;
}

.ring-card div > span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.delegation-details {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fcff;
}

body[data-theme="matrix"] .delegation-details {
  background: var(--surface-muted);
}

.delegation-details h5 {
  margin: 0 0 10px;
  color: var(--ink);
  font-size: 14px;
}

.delegation-details dl {
  display: grid;
  grid-template-columns: minmax(120px, 0.34fr) minmax(0, 1fr);
  gap: 8px 12px;
  margin: 0;
}

.delegation-details dt {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.delegation-details dd {
  min-width: 0;
  margin: 0;
  line-height: 1.45;
  white-space: pre-line;
}

.goal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.small-button {
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  font-weight: 700;
}

.small-button:hover,
.small-button:focus-visible {
  background: var(--surface-muted);
}

.subtask-list {
  display: grid;
  gap: 8px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.subtask-list li,
.subtask-editor-row,
.person-load-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.subtask-list li {
  align-items: flex-start;
}

.subtask-list input[type="checkbox"] {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
}

.subtask-body {
  display: grid;
  flex: 1;
  gap: 6px;
}

.subtask-title {
  color: var(--ink);
  line-height: 1.35;
}

.subtask-dates {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.subtask-list input:checked + .subtask-body .subtask-title {
  color: var(--muted);
  text-decoration: line-through;
}

.completion-note {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
}

.completion-note strong {
  color: var(--ink);
}

body[data-theme="matrix"] .load-count {
  background: #321019;
  color: #ff7188;
}

.person-load-row {
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}

.person-load-row:last-child {
  border-bottom: 0;
}

.person-load-row strong {
  display: block;
}

.person-load-row span {
  color: var(--muted);
  font-size: 13px;
}

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

.load-count {
  min-width: 42px;
  padding: 7px 10px;
  border-radius: 8px;
  background: var(--accent-soft);
  color: var(--accent-dark);
  text-align: center;
  font-weight: 800;
}

.toolbar {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) minmax(180px, 240px);
  gap: 12px;
  margin-bottom: 16px;
}

.search-field {
  display: block;
}

.calendar-toolbar {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px auto;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.calendar-toolbar h3 {
  margin: 0;
  font-size: 24px;
}

.calendar-nav-button {
  padding: 0;
  font-size: 24px;
  line-height: 1;
}

.calendar-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 14px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.calendar-legend span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.legend-dot {
  width: 12px;
  height: 12px;
  border-radius: 999px;
}

.legend-dot.start {
  background: #0b5fa5;
}

.legend-dot.range {
  background: #8fcfff;
}

.legend-dot.end {
  background: #43a6df;
}

.legend-dot.late {
  background: #d92d20;
}

.legend-dot.has-task {
  background: var(--accent);
}

.legend-dot.highlight {
  background: #d0278d;
}

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(104px, 1fr));
  gap: 8px;
  overflow-x: auto;
  margin-bottom: 16px;
}

.calendar-weekday {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-align: center;
  text-transform: uppercase;
}

.calendar-day {
  min-height: 124px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  cursor: pointer;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease, background 0.16s ease;
}

.calendar-day.other-month {
  background: #f7fbff;
  color: #95a8bd;
}

body[data-theme="matrix"] .calendar-day.other-month {
  background: #10141b;
  color: #657181;
}

.calendar-day.today {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px rgba(20, 121, 201, 0.18);
}

.calendar-day.has-goal {
  border-color: rgba(20, 121, 201, 0.42);
  background:
    linear-gradient(180deg, rgba(20, 121, 201, 0.06), rgba(20, 121, 201, 0.02)),
    var(--surface);
}

.calendar-day.has-late-goal {
  border-color: rgba(217, 45, 32, 0.42);
  background:
    linear-gradient(180deg, rgba(217, 45, 32, 0.08), rgba(217, 45, 32, 0.02)),
    var(--surface);
}

.calendar-day.search-match {
  border-color: rgba(208, 39, 141, 0.7);
  background:
    linear-gradient(135deg, rgba(208, 39, 141, 0.12), rgba(20, 121, 201, 0.08)),
    var(--surface);
  box-shadow: inset 0 0 0 1px rgba(208, 39, 141, 0.24);
}

.calendar-day.selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(20, 121, 201, 0.18);
}

.calendar-day:hover {
  transform: translateY(-1px);
}

.calendar-day:focus-visible {
  outline: 3px solid rgba(20, 121, 201, 0.32);
  outline-offset: 2px;
}

.calendar-day-number {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
  font-weight: 800;
}

.calendar-day-number strong {
  min-width: 24px;
  padding: 3px 7px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-dark);
  font-size: 12px;
  text-align: center;
}

.calendar-day-goals {
  display: grid;
  gap: 5px;
}

.calendar-goal {
  overflow: hidden;
  width: 100%;
  min-height: 25px;
  padding: 0 8px;
  border: 0;
  border-radius: 999px;
  color: var(--ink);
  font-size: 12px;
  font-weight: 800;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.calendar-goal.start {
  background: #d9ecff;
  color: #075a9c;
}

body[data-theme="matrix"] .calendar-goal.start {
  background: #2d1018;
  color: #ff7b91;
}

.calendar-goal.range {
  background: #edf7ff;
  color: #26638f;
}

body[data-theme="matrix"] .calendar-goal.range {
  background: #171f2b;
  color: #d9e7f7;
}

.calendar-goal.end {
  background: #c9eaff;
  color: #075a9c;
}

body[data-theme="matrix"] .calendar-goal.end {
  background: #331018;
  color: #ff7188;
}

.calendar-goal.late {
  background: #fee4e2;
  color: #b42318;
}

body[data-theme="matrix"] .calendar-goal.late {
  background: #43131c;
  color: #ff9aa8;
}

.calendar-goal.highlighted {
  background: linear-gradient(90deg, #d0278d, #9324c2);
  color: #ffffff;
  box-shadow: 0 0 0 2px rgba(208, 39, 141, 0.16);
}

.calendar-goal.late.highlighted {
  background: linear-gradient(90deg, #d92d20, #d0278d);
  color: #ffffff;
}

.calendar-goal:hover,
.calendar-goal:focus-visible {
  outline: 2px solid rgba(20, 121, 201, 0.35);
  outline-offset: 1px;
}

.calendar-more {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.calendar-summary-panel {
  margin-top: 16px;
}

.calendar-day-panel {
  margin-top: 16px;
}

.calendar-day-task-list {
  display: grid;
  gap: 10px;
}

.calendar-day-task-card {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fcff;
}

.calendar-day-task-card.late {
  border-color: rgba(217, 45, 32, 0.42);
  background: #fff7f7;
}

.calendar-day-task-card.highlighted,
.calendar-summary-card.highlighted {
  border-color: rgba(208, 39, 141, 0.5);
  box-shadow: inset 4px 0 0 #d0278d;
}

.calendar-day-task-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.calendar-day-task-header h4,
.calendar-day-task-header p,
.calendar-day-empty-subtasks {
  margin: 0;
}

.calendar-day-task-header h4 {
  margin-bottom: 5px;
}

.calendar-day-task-header p,
.calendar-day-empty-subtasks {
  color: var(--muted);
}

.calendar-day-task-header strong {
  color: var(--accent-dark);
}

.calendar-day-subtasks {
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.calendar-day-subtasks li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 8px;
  background: var(--surface-muted);
}

.calendar-day-subtasks li.done span {
  color: var(--muted);
  text-decoration: line-through;
}

.calendar-day-subtasks small {
  color: var(--muted);
  white-space: nowrap;
}

.calendar-day-task-actions {
  display: flex;
  justify-content: flex-end;
}

.calendar-summary-search {
  margin-bottom: 14px;
  max-width: 520px;
}

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

.calendar-summary-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fcff;
}

.calendar-summary-card h4,
.calendar-summary-card p {
  margin: 0;
}

.calendar-summary-card h4 {
  margin-bottom: 5px;
  font-size: 16px;
}

.calendar-summary-card p {
  color: var(--muted);
}

.calendar-summary-card.late {
  border-color: rgba(217, 45, 32, 0.42);
  background: #fff7f7;
}

body[data-theme="matrix"] .calendar-summary-card.late {
  background: #2a0c14;
}

.calendar-summary-progress {
  display: flex;
  align-items: center;
  gap: 10px;
}

.calendar-summary-progress strong {
  color: var(--accent-dark);
}

#calendarView {
  --calendar-bg: #f8fafc;
  --calendar-surface: #ffffff;
  --calendar-line: #e5e7eb;
  --calendar-ink: #111827;
  --calendar-muted: #6b7280;
  --calendar-accent: #14b8a6;
  --calendar-accent-dark: #0f766e;
  --calendar-accent-soft: #ccfbf1;
  --calendar-danger: #dc2626;
  --calendar-danger-soft: #fee2e2;
  --calendar-info: #2563eb;
  --calendar-info-soft: #dbeafe;
  --calendar-highlight: #7c3aed;
  --calendar-highlight-soft: #ede9fe;
  color: var(--calendar-ink);
}

#calendarView .calendar-hero,
#calendarView .calendar-board-card,
#calendarView .calendar-day-panel,
#calendarView .calendar-summary-panel {
  border: 1px solid var(--calendar-line);
  border-radius: 8px;
  background: var(--calendar-surface);
  box-shadow: 0 14px 40px rgba(15, 23, 42, 0.06);
}

#calendarView .calendar-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 14px;
  padding: 18px;
}

#calendarView .calendar-hero h3 {
  margin: 0;
  font-size: 24px;
  line-height: 1.15;
}

#calendarView .calendar-hero p:not(.eyebrow) {
  max-width: 620px;
  margin: 8px 0 0;
  color: var(--calendar-muted);
  font-size: 14px;
  line-height: 1.45;
}

#calendarView .eyebrow {
  color: var(--calendar-accent-dark);
}

#calendarView .calendar-toolbar {
  display: grid;
  grid-template-columns: 40px minmax(150px, max-content) 40px auto;
  align-items: center;
  gap: 8px;
  margin: 0;
}

#calendarView .calendar-toolbar strong {
  min-width: 160px;
  color: var(--calendar-ink);
  font-size: 16px;
  text-align: center;
}

#calendarView .calendar-nav-button {
  width: 40px;
  min-height: 40px;
  border-color: var(--calendar-line);
  color: var(--calendar-ink);
  font-size: 22px;
}

#calendarView .today-button {
  border-color: transparent;
  background: var(--calendar-accent);
  color: #ffffff;
}

#calendarView .calendar-legend {
  gap: 8px;
  margin-bottom: 14px;
  font-size: 12px;
  font-weight: 700;
}

#calendarView .calendar-legend span {
  padding: 7px 10px;
  border: 1px solid var(--calendar-line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.78);
  color: var(--calendar-muted);
}

#calendarView .legend-dot {
  width: 9px;
  height: 9px;
}

#calendarView .legend-dot.start,
#calendarView .legend-dot.end {
  background: var(--calendar-info);
}

#calendarView .legend-dot.range,
#calendarView .legend-dot.has-task {
  background: var(--calendar-accent);
}

#calendarView .legend-dot.late {
  background: var(--calendar-danger);
}

#calendarView .legend-dot.highlight {
  background: var(--calendar-highlight);
}

#calendarView .calendar-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 390px);
  align-items: start;
  gap: 16px;
}

#calendarView .calendar-board-card {
  overflow: hidden;
  min-width: 0;
  padding: 14px;
}

#calendarView .calendar-grid {
  grid-template-columns: repeat(7, minmax(104px, 1fr));
  gap: 1px;
  overflow-x: auto;
  margin: 0;
  border: 1px solid var(--calendar-line);
  border-radius: 8px;
  background: var(--calendar-line);
}

#calendarView .calendar-weekday {
  min-height: 34px;
  padding: 10px 8px;
  background: #f8fafc;
  color: var(--calendar-muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0;
}

#calendarView .calendar-day {
  min-height: 132px;
  padding: 10px;
  border: 0;
  border-radius: 0;
  background: #ffffff;
  color: var(--calendar-ink);
  box-shadow: none;
}

#calendarView .calendar-day.other-month {
  background: #f9fafb;
  color: #9ca3af;
}

#calendarView .calendar-day.has-goal {
  background:
    linear-gradient(180deg, rgba(20, 184, 166, 0.08), rgba(255, 255, 255, 0) 58%),
    #ffffff;
}

#calendarView .calendar-day.has-late-goal {
  background:
    linear-gradient(180deg, rgba(220, 38, 38, 0.1), rgba(255, 255, 255, 0) 62%),
    #fffafa;
}

#calendarView .calendar-day.search-match {
  background:
    linear-gradient(180deg, rgba(124, 58, 237, 0.13), rgba(255, 255, 255, 0) 70%),
    #ffffff;
  box-shadow: inset 0 0 0 2px rgba(124, 58, 237, 0.28);
}

#calendarView .calendar-day.today {
  box-shadow: inset 0 0 0 2px rgba(20, 184, 166, 0.45);
}

#calendarView .calendar-day.selected {
  position: relative;
  z-index: 1;
  box-shadow: inset 0 0 0 2px var(--calendar-accent), 0 0 0 3px rgba(20, 184, 166, 0.16);
}

#calendarView .calendar-day:hover {
  transform: none;
  background-color: #f8fafc;
}

#calendarView .calendar-day-number {
  margin-bottom: 10px;
  color: var(--calendar-ink);
  font-size: 14px;
  font-weight: 800;
}

#calendarView .calendar-day-number strong {
  min-width: 24px;
  padding: 3px 7px;
  background: var(--calendar-accent-soft);
  color: var(--calendar-accent-dark);
  font-size: 11px;
}

#calendarView .calendar-day.has-late-goal .calendar-day-number strong {
  background: var(--calendar-danger-soft);
  color: var(--calendar-danger);
}

#calendarView .calendar-day-goals {
  gap: 6px;
}

#calendarView .calendar-goal {
  min-height: 24px;
  padding: 0 9px;
  font-size: 12px;
  font-weight: 700;
}

#calendarView .calendar-goal.start,
#calendarView .calendar-goal.end {
  background: var(--calendar-info-soft);
  color: #1d4ed8;
}

#calendarView .calendar-goal.range {
  background: var(--calendar-accent-soft);
  color: var(--calendar-accent-dark);
}

#calendarView .calendar-goal.late {
  background: var(--calendar-danger-soft);
  color: var(--calendar-danger);
}

#calendarView .calendar-goal.highlighted {
  background: var(--calendar-highlight);
  color: #ffffff;
  box-shadow: none;
}

#calendarView .calendar-goal.late.highlighted {
  background: linear-gradient(90deg, var(--calendar-danger), var(--calendar-highlight));
}

#calendarView .calendar-more {
  padding-left: 8px;
  color: var(--calendar-muted);
  font-size: 12px;
  font-weight: 700;
}

#calendarView .calendar-day-panel,
#calendarView .calendar-summary-panel {
  margin-top: 0;
  padding: 16px;
}

#calendarView .calendar-summary-panel {
  margin-top: 16px;
}

#calendarView .panel-heading {
  align-items: flex-start;
  margin-bottom: 14px;
}

#calendarView .panel-heading h3 {
  font-size: 18px;
}

#calendarView .calendar-day-task-list,
#calendarView .calendar-goal-list {
  gap: 12px;
}

#calendarView .calendar-day-task-card,
#calendarView .calendar-summary-card {
  border-color: var(--calendar-line);
  background: #ffffff;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.05);
}

#calendarView .calendar-day-task-card.late,
#calendarView .calendar-summary-card.late {
  border-color: rgba(220, 38, 38, 0.26);
  background: #fffafa;
}

#calendarView .calendar-day-task-card.highlighted,
#calendarView .calendar-summary-card.highlighted {
  border-color: rgba(124, 58, 237, 0.26);
  box-shadow: inset 4px 0 0 var(--calendar-highlight), 0 8px 22px rgba(15, 23, 42, 0.05);
}

#calendarView .calendar-day-task-header h4,
#calendarView .calendar-summary-card h4 {
  color: var(--calendar-ink);
  font-size: 15px;
  line-height: 1.3;
}

#calendarView .calendar-day-task-header p,
#calendarView .calendar-summary-card p,
#calendarView .calendar-day-empty-subtasks {
  color: var(--calendar-muted);
  font-size: 13px;
  line-height: 1.4;
}

#calendarView .calendar-day-task-header strong,
#calendarView .calendar-summary-progress strong {
  color: var(--calendar-accent-dark);
}

#calendarView .calendar-day-subtasks li {
  background: #f8fafc;
}

#calendarView .calendar-summary-search {
  max-width: 420px;
  margin-bottom: 14px;
}

#calendarView .calendar-summary-search input {
  min-height: 42px;
  background: #ffffff;
}

.admin-metric-grid {
  margin-bottom: 14px;
}

.admin-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 18px;
}

.admin-table,
.admin-alert-list,
.account-list,
.history-list {
  display: grid;
  gap: 10px;
}

.admin-table-row,
.admin-alert-card,
.account-row,
.history-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fcff;
}

.admin-table-row strong,
.admin-alert-card strong,
.account-row strong,
.history-row strong {
  display: block;
  margin-bottom: 5px;
}

.admin-table-row span,
.admin-alert-card span,
.account-row span,
.history-row span {
  color: var(--muted);
  font-size: 13px;
}

.admin-row-actions,
.admin-alert-side {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.admin-alert-card.late {
  border-color: #f1c8c8;
  background: #fff8f8;
}

.access-panel {
  margin-top: 18px;
}

.account-form-row {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(160px, 1fr) minmax(160px, 1fr) auto auto;
  align-items: end;
  gap: 10px;
  margin-bottom: 14px;
}

.theme-settings {
  display: grid;
  grid-template-columns: minmax(220px, 360px) minmax(220px, 1fr);
  align-items: end;
  gap: 14px;
  margin-bottom: 24px;
}

.theme-preview {
  display: grid;
  min-height: 72px;
  grid-template-columns: 52px 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(255, 49, 85, 0.18), transparent),
    #101318;
  color: #ffffff;
}

.theme-preview span {
  display: block;
  width: 42px;
  height: 42px;
  border-radius: 8px;
  background: #ff3155;
}

.theme-preview strong {
  font-size: 18px;
}

.theme-preview small {
  padding: 7px 10px;
  border: 1px solid #ff3155;
  border-radius: 8px;
  color: #ff7188;
  font-weight: 800;
}

.custom-theme-panel {
  display: grid;
  gap: 12px;
  margin: -6px 0 24px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fcff;
}

.custom-theme-panel[hidden] {
  display: none;
}

.custom-theme-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 10px;
}

.custom-theme-grid input[type="color"] {
  height: 46px;
  padding: 4px;
  cursor: pointer;
}

body[data-theme="matrix"] .custom-theme-panel {
  background: var(--surface-muted);
}

body[data-theme="dmsales"] .theme-preview {
  background:
    linear-gradient(90deg, rgba(0, 169, 231, 0.14), rgba(208, 39, 141, 0.16)),
    #ffffff;
  color: #15151a;
}

body[data-theme="dmsales"] .theme-preview span {
  background: linear-gradient(90deg, #00a9e7 0 30%, #9324c2 30% 65%, #d0278d 65% 100%);
}

body[data-theme="dmsales"] .theme-preview small {
  border-color: #d0278d;
  color: #d0278d;
}

body[data-theme="custom"] .theme-preview {
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--accent) 14%, transparent), color-mix(in srgb, var(--success) 12%, transparent)),
    var(--surface);
  color: var(--ink);
}

body[data-theme="custom"] .theme-preview span {
  background: var(--accent);
}

body[data-theme="custom"] .theme-preview small {
  border-color: var(--accent);
  color: var(--accent);
}

.sysop-layout-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.layout-manager {
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fcff;
}

body[data-theme="matrix"] .layout-manager,
body[data-theme="matrix"] .admin-table-row,
body[data-theme="matrix"] .admin-alert-card,
body[data-theme="matrix"] .account-row,
body[data-theme="matrix"] .history-row,
body[data-theme="matrix"] .calendar-summary-card,
body[data-theme="matrix"] .user-metrics article,
body[data-theme="matrix"] .person-details-metrics article,
body[data-theme="matrix"] .person-goal-row {
  background: var(--surface-muted);
}

body[data-theme="bitrix"] .admin-table-row,
body[data-theme="bitrix"] .admin-alert-card,
body[data-theme="bitrix"] .account-row,
body[data-theme="bitrix"] .history-row,
body[data-theme="bitrix"] .calendar-summary-card,
body[data-theme="bitrix"] .user-metrics article,
body[data-theme="bitrix"] .person-details-metrics article,
body[data-theme="bitrix"] .person-goal-row,
body[data-theme="bitrix"] .layout-manager {
  background: #f8fcff;
}

body[data-theme="matrix"] .admin-alert-card.late {
  border-color: var(--accent);
  background: #2a0c14;
}

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

.layout-item {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.layout-item.dragging {
  opacity: 0.55;
}

.layout-index {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 8px;
  background: #e8f4ff;
  color: var(--accent-dark);
  font-weight: 800;
}

body[data-theme="matrix"] .layout-index {
  background: #321019;
  color: #ff7188;
}

.layout-item strong {
  display: block;
  margin-bottom: 4px;
}

.layout-item span {
  color: var(--muted);
  font-size: 13px;
}

.layout-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.user-panel-header {
  display: grid;
  grid-template-columns: minmax(220px, 320px) minmax(0, 1fr);
  align-items: end;
  gap: 16px;
  margin-bottom: 16px;
}

.user-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(120px, 1fr));
  gap: 10px;
}

.user-metrics article {
  min-height: 78px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fcff;
}

.user-metrics span {
  display: block;
  margin-bottom: 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.user-metrics strong {
  font-size: 24px;
}

.person-form-row {
  align-items: end;
  max-width: 620px;
  margin-bottom: 18px;
}

.person-form-row label {
  flex: 1;
}

.person-grid {
  grid-template-columns: repeat(3, minmax(180px, 1fr));
}

.person-card {
  padding: 16px;
}

.person-card h3 {
  margin: 0 0 10px;
  font-size: 18px;
}

.person-card dl {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 7px 12px;
  margin: 0;
  color: var(--muted);
}

.person-card dd {
  margin: 0;
  color: var(--ink);
  font-weight: 800;
}

.goal-dialog,
.person-dialog {
  width: min(860px, calc(100vw - 28px));
  max-height: calc(100vh - 28px);
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow);
}

.goal-dialog::backdrop,
.person-dialog::backdrop {
  background: rgba(31, 42, 44, 0.45);
}

.person-details-panel {
  display: grid;
  gap: 16px;
  padding: 22px;
}

.person-details-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(120px, 1fr));
  gap: 10px;
}

.person-details-metrics article,
.person-goal-row {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fcff;
}

.person-details-metrics article {
  padding: 14px;
}

.person-details-metrics span {
  display: block;
  margin-bottom: 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.person-details-metrics strong {
  font-size: 24px;
}

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

.person-goal-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 14px;
}

.person-goal-row h4,
.person-goal-row p {
  margin: 0;
}

.person-goal-row h4 {
  margin-bottom: 6px;
  font-size: 16px;
}

.person-goal-row p {
  margin-bottom: 10px;
  color: var(--muted);
  line-height: 1.4;
}

.person-goal-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.goal-form {
  display: grid;
  gap: 16px;
  padding: 22px;
}

.dialog-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.dialog-header h3 {
  margin: 0;
  font-size: 24px;
}

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

.full-field {
  display: block;
}

.delegation-editor,
.subtask-editor {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fcff;
}

body[data-theme="matrix"] .delegation-editor,
body[data-theme="matrix"] .subtask-editor {
  background: var(--surface-muted);
}

#subtaskEditorList {
  display: grid;
  gap: 8px;
}

.subtask-editor-row {
  display: grid;
  grid-template-columns: 18px minmax(180px, 1fr) minmax(132px, 0.5fr) minmax(132px, 0.5fr) minmax(104px, 0.38fr) 40px;
  align-items: start;
}

.subtask-editor-row input[type="checkbox"] {
  width: 18px;
  height: 18px;
}

.subtask-editor-note {
  grid-column: 2 / 7;
}

.dialog-actions {
  justify-content: space-between;
  gap: 16px;
}

.dialog-actions > div {
  display: flex;
  gap: 10px;
}

.empty-state {
  padding: 26px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.65);
  color: var(--muted);
  text-align: center;
}

@media (max-width: 1080px) {
  .app-shell {
    grid-template-columns: 1fr;
  }

  .sidebar {
    position: static;
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .nav-tabs {
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  }

  .nav-tab {
    text-align: center;
  }

  .quick-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 0;
  }

  .metric-grid,
  .split-layout,
  .goal-board,
  .person-grid,
  .person-details-metrics,
  .sysop-layout-grid,
  .user-panel-header {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .calendar-grid {
    grid-template-columns: repeat(7, minmax(92px, 1fr));
  }

  #calendarView .calendar-workspace {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .content,
  .sidebar {
    padding: 18px;
  }

  .topbar,
  .goal-card-header,
  .dialog-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .topbar-actions,
  .dialog-actions > div {
    width: 100%;
  }

  .topbar-actions button,
  .dialog-actions button,
  .person-form-row button {
    flex: 1;
  }

  .metric-grid,
  .split-layout,
  .goal-board,
  .goal-rings,
  .person-grid,
  .toolbar,
  .form-grid,
  .delegation-details dl,
  .person-details-metrics,
  .theme-settings,
  .custom-theme-grid,
  .sysop-layout-grid,
  .user-panel-header,
  .user-metrics {
    grid-template-columns: 1fr;
  }

  .admin-table-row,
  .admin-alert-card,
  .account-row,
  .history-row,
  .person-goal-row,
  .layout-item {
    align-items: stretch;
    flex-direction: column;
  }

  .admin-row-actions,
  .admin-alert-side {
    justify-content: flex-start;
  }

  .layout-item {
    grid-template-columns: 1fr;
  }

  .subtask-editor-row {
    grid-template-columns: 22px minmax(0, 1fr) 40px;
  }

  .subtask-editor-row .subtask-start-input,
  .subtask-editor-row .subtask-due-input,
  .subtask-editor-row .subtask-due-time-input,
  .subtask-editor-note {
    grid-column: 2 / 4;
  }

  .layout-actions {
    justify-content: flex-start;
  }

  .person-load-actions,
  .person-goal-actions {
    justify-content: flex-start;
  }

  #calendarView .calendar-hero {
    align-items: stretch;
    flex-direction: column;
  }

  #calendarView .calendar-toolbar {
    grid-template-columns: 40px minmax(0, 1fr) 40px;
  }

  #calendarView .calendar-toolbar #todayCalendarButton {
    grid-column: 1 / -1;
  }

  #calendarView .calendar-grid {
    grid-template-columns: repeat(7, minmax(84px, 1fr));
  }

  #calendarView .calendar-summary-card,
  #calendarView .calendar-day-task-header,
  #calendarView .calendar-day-subtasks li {
    align-items: stretch;
    flex-direction: column;
  }

  #calendarView .calendar-day-subtasks small {
    white-space: normal;
  }

  .account-form-row {
    grid-template-columns: 1fr;
  }

  .person-form-row {
    align-items: stretch;
    flex-direction: column;
  }
}

/* Fresh SaaS redesign applied across every tab. */
:root {
  --bg: #f8fafc;
  --surface: #ffffff;
  --surface-muted: #f1f5f9;
  --ink: #111827;
  --muted: #64748b;
  --line: #e5e7eb;
  --accent: #14b8a6;
  --accent-dark: #0f766e;
  --accent-soft: #ccfbf1;
  --warning: #f59e0b;
  --warning-soft: #fef3c7;
  --danger: #dc2626;
  --danger-soft: #fee2e2;
  --success: #16a34a;
  --success-soft: #dcfce7;
  --info: #2563eb;
  --info-soft: #dbeafe;
  --shadow: 0 18px 50px rgba(15, 23, 42, 0.08);
  --shadow-soft: 0 10px 28px rgba(15, 23, 42, 0.06);
  --radius: 8px;
}

body {
  background: var(--bg);
  color: var(--ink);
  font-size: 15px;
}

.app-shell {
  grid-template-columns: 260px minmax(0, 1fr);
}

.sidebar {
  position: sticky;
  top: 0;
  min-height: 100vh;
  gap: 24px;
  padding: 24px 18px;
  border-right: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.96);
}

body[data-theme="bitrix"] .sidebar,
body[data-theme="matrix"] .sidebar,
body[data-theme="dmsales"] .sidebar {
  background: var(--surface);
  color: var(--ink);
}

body[data-theme="bitrix"] .sidebar .brand p,
body[data-theme="bitrix"] .quick-stats small,
body[data-theme="bitrix"] .nav-tab {
  color: var(--muted);
}

.brand-mark {
  width: 42px;
  height: 42px;
  border-radius: var(--radius);
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
  box-shadow: 0 10px 22px rgba(20, 184, 166, 0.2);
}

.brand h1 {
  font-size: 18px;
  letter-spacing: 0;
}

.brand p {
  max-width: 170px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
}

.nav-tabs {
  gap: 6px;
}

.nav-tab {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 10px 12px;
  border: 0;
  border-radius: var(--radius);
  color: var(--muted);
  font-size: 14px;
  font-weight: 650;
}

.nav-tab::before {
  display: grid;
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 7px;
  background: var(--surface-muted);
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.nav-tab[data-view="dashboard"]::before {
  content: "P";
}

.nav-tab[data-view="goals"]::before {
  content: "C";
}

.nav-tab[data-view="calendar"]::before {
  content: "K";
}

.nav-tab[data-view="admin"]::before {
  content: "A";
}

.nav-tab[data-view="sysop"]::before {
  content: "S";
}

.nav-tab[data-view="archive"]::before {
  content: "H";
}

.nav-tab[data-view="user"]::before {
  content: "U";
}

.nav-tab[data-view="people"]::before {
  content: "O";
}

.nav-tab:hover,
.nav-tab:focus-visible {
  background: var(--surface-muted);
  color: var(--ink);
}

.nav-tab.active,
body[data-theme="bitrix"] .nav-tab.active {
  background: var(--accent-soft);
  color: var(--accent-dark);
  font-weight: 800;
}

.nav-tab.active::before {
  background: var(--accent);
  color: #ffffff;
}

.quick-stats {
  gap: 10px;
}

.quick-stats div {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--surface), var(--surface-muted));
  box-shadow: none;
}

.quick-stats span {
  font-size: 24px;
}

.content {
  min-height: 100vh;
  padding: 28px 32px 48px;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  align-items: flex-start;
  margin: -28px -32px 24px;
  padding: 24px 32px 18px;
  border-bottom: 1px solid rgba(226, 232, 240, 0.72);
  background: rgba(248, 250, 252, 0.94);
}

body[data-theme="matrix"] .topbar {
  background: rgba(23, 6, 11, 0.94);
}

.topbar h2 {
  font-size: 28px;
  letter-spacing: 0;
}

.eyebrow {
  color: var(--accent-dark);
  font-size: 11px;
  letter-spacing: 0;
}

.topbar-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.session-pill {
  min-width: 142px;
  min-height: 44px;
  justify-content: start;
  border-color: var(--line);
  background: var(--surface);
}

.primary-button,
.secondary-button,
.danger-button,
.icon-button,
.small-button {
  border-radius: var(--radius);
  transition: background 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.primary-button {
  border-color: var(--accent);
  background: var(--accent);
  box-shadow: 0 10px 22px rgba(20, 184, 166, 0.16);
}

.primary-button:hover,
.primary-button:focus-visible {
  background: var(--accent-dark);
  border-color: var(--accent-dark);
  transform: translateY(-1px);
}

.secondary-button,
.small-button {
  border-color: var(--line);
  background: var(--surface);
  color: var(--ink);
}

.secondary-button:hover,
.secondary-button:focus-visible,
.small-button:hover,
.small-button:focus-visible {
  border-color: color-mix(in srgb, var(--accent) 42%, var(--line));
  background: var(--accent-soft);
  color: var(--accent-dark);
}

input,
select,
textarea {
  border-color: var(--line);
  background: var(--surface);
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.02);
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--accent);
  outline: 3px solid color-mix(in srgb, var(--accent) 18%, transparent);
}

.metric-grid {
  gap: 16px;
  margin-bottom: 20px;
}

.quick-stats div,
.metric-card,
.panel,
.goal-card,
.person-card,
.calendar-board-card,
.calendar-day-panel,
.calendar-summary-panel,
.admin-table-row,
.admin-alert-card,
.account-row,
.history-row,
.layout-manager,
.layout-item,
.user-metrics article,
.person-details-metrics article,
.person-goal-row,
.delegation-editor,
.subtask-editor,
.calendar-day-task-card,
.calendar-summary-card,
.ring-card {
  border-color: var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.metric-card,
.panel,
.goal-card,
.person-card {
  box-shadow: var(--shadow-soft);
}

.metric-card {
  position: relative;
  overflow: hidden;
  min-height: 116px;
  padding: 18px 18px 16px;
}

.metric-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 30%, #ffffff));
}

.metric-label {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

.metric-card strong {
  color: var(--ink);
  font-size: 34px;
  letter-spacing: 0;
}

.split-layout {
  grid-template-columns: minmax(0, 1.35fr) minmax(340px, 0.78fr);
  gap: 18px;
}

.panel {
  padding: 20px;
}

.panel-heading {
  align-items: flex-start;
  margin-bottom: 16px;
}

.panel h3,
.panel h4 {
  color: var(--ink);
  font-size: 18px;
}

.toolbar,
.person-form-row,
.account-form-row,
.theme-settings,
.user-panel-header {
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-soft);
}

.toolbar {
  grid-template-columns: minmax(260px, 1fr) minmax(190px, 240px);
  align-items: end;
  margin-bottom: 18px;
}

.goal-board {
  grid-template-columns: repeat(2, minmax(320px, 1fr));
  gap: 16px;
}

.goal-list {
  gap: 14px;
}

.goal-card {
  position: relative;
  gap: 14px;
  padding: 18px;
}

.goal-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  border-radius: var(--radius) 0 0 var(--radius);
  background: var(--accent);
  opacity: 0.7;
}

.goal-card-header {
  align-items: flex-start;
}

.goal-card h4 {
  font-size: 18px;
  line-height: 1.25;
}

.goal-card p {
  color: var(--muted);
  font-size: 14px;
}

.badge {
  min-height: 26px;
  padding: 0 10px;
  background: var(--surface-muted);
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.badge.high {
  background: var(--info-soft);
  color: var(--info);
}

.badge.medium {
  background: var(--warning-soft);
  color: #b45309;
}

.badge.low,
.badge.done {
  background: var(--success-soft);
  color: var(--success);
}

.badge.date-badge {
  background: var(--surface-muted);
  color: var(--accent-dark);
}

.badge.late {
  background: var(--danger-soft);
  color: var(--danger);
}

.progress-track {
  height: 8px;
  background: var(--surface-muted);
}

.progress-fill {
  background: linear-gradient(90deg, var(--accent), var(--accent-dark));
}

.goal-rings {
  gap: 12px;
}

.ring-card {
  background: var(--surface-muted);
}

.percent-ring {
  width: 58px;
  height: 58px;
}

.delegation-details {
  border-color: var(--line);
  background: var(--surface-muted);
}

.subtask-list li {
  padding: 9px 0;
  border-top: 1px solid var(--line);
}

.subtask-list li:first-child {
  border-top: 0;
}

.person-load-row {
  padding: 14px 0;
}

.person-load-row strong,
.admin-table-row strong,
.admin-alert-card strong,
.account-row strong,
.history-row strong {
  color: var(--ink);
  font-size: 15px;
}

.load-count {
  background: var(--accent-soft);
  color: var(--accent-dark);
}

#dashboardView .split-layout {
  align-items: start;
}

#dashboardView .goal-card {
  box-shadow: none;
}

#dashboardView .goal-card .delegation-details,
#dashboardView .goal-card .subtask-list {
  display: none;
}

#goalsView .goal-card {
  min-height: 100%;
}

#calendarView {
  --calendar-bg: var(--bg);
  --calendar-surface: var(--surface);
  --calendar-line: var(--line);
  --calendar-ink: var(--ink);
  --calendar-muted: var(--muted);
  --calendar-accent: var(--accent);
  --calendar-accent-dark: var(--accent-dark);
  --calendar-accent-soft: var(--accent-soft);
  --calendar-danger: var(--danger);
  --calendar-danger-soft: var(--danger-soft);
  --calendar-info: var(--info);
  --calendar-info-soft: var(--info-soft);
  --calendar-highlight: #7c3aed;
  --calendar-highlight-soft: #ede9fe;
}

#calendarView .calendar-hero,
#calendarView .calendar-board-card,
#calendarView .calendar-day-panel,
#calendarView .calendar-summary-panel {
  border-color: var(--line);
  box-shadow: var(--shadow-soft);
}

#calendarView .calendar-hero {
  padding: 20px;
}

#calendarView .calendar-legend span {
  background: var(--surface);
}

#calendarView .calendar-grid {
  border-color: var(--line);
  background: var(--line);
}

#calendarView .calendar-day {
  min-height: 126px;
  border-radius: 0;
  background: var(--surface);
}

#calendarView .calendar-day.has-goal {
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 9%, #ffffff), var(--surface));
}

#calendarView .calendar-day.has-late-goal {
  background: linear-gradient(180deg, color-mix(in srgb, var(--danger) 10%, #ffffff), var(--surface));
}

#calendarView .calendar-summary-card,
#calendarView .calendar-day-task-card {
  background: var(--surface);
}

.admin-actions {
  margin-bottom: 18px;
}

.admin-table-row,
.admin-alert-card,
.account-row,
.history-row {
  background: var(--surface);
  box-shadow: none;
}

.admin-alert-card.late {
  border-color: color-mix(in srgb, var(--danger) 30%, var(--line));
  background: color-mix(in srgb, var(--danger) 6%, var(--surface));
}

.access-panel {
  margin-top: 18px;
}

.theme-settings {
  margin-bottom: 18px;
  box-shadow: none;
}

.theme-preview,
.custom-theme-panel,
.layout-manager {
  border-color: var(--line);
  background: var(--surface-muted);
}

.layout-item {
  grid-template-columns: 8px 38px minmax(0, 1fr) auto;
  background: var(--surface);
}

.layout-item::before {
  content: "";
  width: 6px;
  height: 28px;
  border-radius: 999px;
  background: linear-gradient(var(--line), var(--accent));
  grid-column: 1;
  grid-row: 1;
  justify-self: start;
}

.layout-index {
  margin-left: 0;
  background: var(--surface-muted);
  color: var(--accent-dark);
}

.archive-panel .history-list {
  position: relative;
}

.history-row {
  position: relative;
  align-items: flex-start;
}

.history-row::before {
  content: "";
  width: 8px;
  height: 8px;
  margin-top: 7px;
  border-radius: 50%;
  background: var(--accent);
}

.user-panel-header {
  grid-template-columns: minmax(220px, 300px) minmax(0, 1fr);
  align-items: end;
  margin-bottom: 18px;
  box-shadow: var(--shadow-soft);
}

.user-metrics article {
  background: var(--surface-muted);
}

#userGoalList {
  gap: 14px;
}

.person-form-row {
  max-width: none;
  display: grid;
  grid-template-columns: minmax(260px, 420px) auto;
  align-items: end;
  margin-bottom: 18px;
}

.person-grid {
  grid-template-columns: repeat(3, minmax(260px, 1fr));
  gap: 16px;
}

.person-card {
  position: relative;
  overflow: hidden;
}

.person-card::after {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg, var(--accent), transparent);
}

.person-card dl {
  margin-bottom: 14px;
}

.person-card dt {
  color: var(--muted);
}

.person-card dd {
  color: var(--ink);
}

.goal-dialog,
.person-dialog {
  border-radius: var(--radius);
  box-shadow: 0 28px 80px rgba(15, 23, 42, 0.25);
}

.goal-form,
.person-details-panel {
  padding: 24px;
}

.dialog-header {
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

.delegation-editor,
.subtask-editor {
  background: var(--surface-muted);
}

.empty-state {
  border-color: var(--line);
  background: var(--surface-muted);
}

body[data-theme="matrix"] .metric-card,
body[data-theme="matrix"] .panel,
body[data-theme="matrix"] .goal-card,
body[data-theme="matrix"] .person-card,
body[data-theme="matrix"] .admin-table-row,
body[data-theme="matrix"] .admin-alert-card,
body[data-theme="matrix"] .account-row,
body[data-theme="matrix"] .history-row,
body[data-theme="matrix"] .layout-manager,
body[data-theme="matrix"] .layout-item,
body[data-theme="matrix"] .calendar-day-task-card,
body[data-theme="matrix"] .calendar-summary-card,
body[data-theme="matrix"] .user-metrics article,
body[data-theme="matrix"] .person-details-metrics article,
body[data-theme="matrix"] .person-goal-row,
body[data-theme="matrix"] .ring-card {
  background: var(--surface);
}

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

  .sidebar,
  .topbar {
    position: static;
  }

  .sidebar {
    min-height: auto;
  }

  .split-layout,
  #calendarView .calendar-workspace,
  .user-panel-header,
  .sysop-layout-grid {
    grid-template-columns: 1fr;
  }

  .goal-board,
  .person-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .content {
    padding: 18px;
  }

  .topbar {
    margin: -18px -18px 18px;
    padding: 18px;
  }

  .metric-grid,
  .admin-metric-grid,
  .user-metrics,
  .person-details-metrics {
    grid-template-columns: 1fr;
  }

  .toolbar,
  .person-form-row,
  .account-form-row,
  .theme-settings {
    grid-template-columns: 1fr;
  }

  .goal-rings {
    grid-template-columns: 1fr;
  }

  .layout-item {
    grid-template-columns: 1fr;
  }

  .layout-item::before {
    display: none;
  }
}

/* Keep user colors as accents, but make structural borders calm. */
body {
  --ui-line: color-mix(in srgb, var(--muted) 18%, var(--surface));
}

.sidebar,
.topbar,
.quick-stats div,
.metric-card,
.panel,
.goal-card,
.person-card,
.calendar-board-card,
.calendar-day-panel,
.calendar-summary-panel,
.admin-table-row,
.admin-alert-card,
.account-row,
.history-row,
.layout-manager,
.layout-item,
.user-metrics article,
.person-details-metrics article,
.person-goal-row,
.delegation-editor,
.subtask-editor,
.calendar-day-task-card,
.calendar-summary-card,
.ring-card,
.toolbar,
.person-form-row,
.account-form-row,
.theme-settings,
.theme-preview,
.custom-theme-panel,
input,
select,
textarea,
.secondary-button,
.small-button {
  border-color: var(--ui-line);
}

#calendarView {
  --calendar-line: var(--ui-line);
}

#calendarView .calendar-grid {
  border-color: var(--ui-line);
  background: var(--ui-line);
}

/* Executive / S-Class visual direction: graphite, ivory and restrained champagne accents. */
body[data-theme="executive"] {
  color-scheme: light;
  --bg: #f4f2ee;
  --surface: #fffdf8;
  --surface-muted: #f1eee7;
  --ink: #111111;
  --muted: #706b63;
  --line: #e3ddd1;
  --accent: #b89b5e;
  --accent-dark: #75603a;
  --accent-soft: #efe7d5;
  --warning: #9a6a1b;
  --warning-soft: #f4ead7;
  --danger: #9f1d1d;
  --danger-soft: #f6e4e1;
  --success: #2f6f4f;
  --success-soft: #e2eee6;
  --info: #374151;
  --info-soft: #e8eaed;
  --shadow: 0 24px 70px rgba(18, 18, 18, 0.1);
  --shadow-soft: 0 14px 34px rgba(18, 18, 18, 0.07);
  --ui-line: #e7e2d8;
}

body[data-theme="executive"] .login-screen {
  background:
    radial-gradient(circle at 20% 15%, rgba(184, 155, 94, 0.24), transparent 28rem),
    linear-gradient(135deg, #0b0d10 0%, #1a1d22 42%, #f4f2ee 42%);
}

body[data-theme="executive"] .login-card {
  border-color: rgba(184, 155, 94, 0.24);
  background: rgba(255, 253, 248, 0.96);
  box-shadow: 0 32px 90px rgba(0, 0, 0, 0.26);
}

body[data-theme="executive"] .app-shell {
  background:
    radial-gradient(circle at 86% 4%, rgba(184, 155, 94, 0.1), transparent 30rem),
    var(--bg);
}

body[data-theme="executive"] .sidebar {
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  background:
    linear-gradient(180deg, #12151a 0%, #090b0e 100%);
  color: #f8f7f3;
}

body[data-theme="executive"] .brand-mark {
  background: linear-gradient(135deg, #d9c28a, #8a6b33);
  color: #111111;
  box-shadow: 0 14px 28px rgba(184, 155, 94, 0.22);
}

body[data-theme="executive"] .sidebar .brand h1 {
  color: #ffffff;
}

body[data-theme="executive"] .sidebar .brand p,
body[data-theme="executive"] .quick-stats small {
  color: rgba(255, 255, 255, 0.58);
}

body[data-theme="executive"] .nav-tab {
  color: rgba(255, 255, 255, 0.66);
}

body[data-theme="executive"] .nav-tab::before {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.64);
}

body[data-theme="executive"] .nav-tab:hover,
body[data-theme="executive"] .nav-tab:focus-visible {
  background: rgba(255, 255, 255, 0.07);
  color: #ffffff;
}

body[data-theme="executive"] .nav-tab.active {
  background: linear-gradient(90deg, rgba(184, 155, 94, 0.2), rgba(255, 255, 255, 0.06));
  color: #ffffff;
  box-shadow: inset 3px 0 0 #b89b5e;
}

body[data-theme="executive"] .nav-tab.active::before {
  background: #b89b5e;
  color: #111111;
}

body[data-theme="executive"] .quick-stats div {
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
}

body[data-theme="executive"] .quick-stats span {
  color: #ffffff;
}

body[data-theme="executive"] .topbar {
  border-bottom-color: rgba(17, 17, 17, 0.08);
  background: rgba(244, 242, 238, 0.94);
}

body[data-theme="executive"] .eyebrow {
  color: var(--accent-dark);
}

body[data-theme="executive"] .metric-card,
body[data-theme="executive"] .panel,
body[data-theme="executive"] .goal-card,
body[data-theme="executive"] .person-card,
body[data-theme="executive"] .toolbar,
body[data-theme="executive"] .person-form-row,
body[data-theme="executive"] .account-form-row,
body[data-theme="executive"] .theme-settings,
body[data-theme="executive"] .user-panel-header,
body[data-theme="executive"] .calendar-hero,
body[data-theme="executive"] .calendar-board-card,
body[data-theme="executive"] .calendar-day-panel,
body[data-theme="executive"] .calendar-summary-panel {
  border-color: var(--ui-line);
  background: linear-gradient(180deg, #fffefa, #fffdf8);
  box-shadow: var(--shadow-soft);
}

body[data-theme="executive"] .metric-card::before {
  height: 2px;
  background: linear-gradient(90deg, #b89b5e, rgba(184, 155, 94, 0));
}

body[data-theme="executive"] .goal-card::before {
  width: 3px;
  background: linear-gradient(180deg, #d5bd83, #8a6b33);
  opacity: 1;
}

body[data-theme="executive"] .primary-button {
  border-color: #111111;
  background: #111111;
  color: #ffffff;
  box-shadow: 0 14px 28px rgba(17, 17, 17, 0.14);
}

body[data-theme="executive"] .primary-button:hover,
body[data-theme="executive"] .primary-button:focus-visible {
  border-color: #2a2a2a;
  background: #2a2a2a;
}

body[data-theme="executive"] .secondary-button,
body[data-theme="executive"] .small-button {
  border-color: var(--ui-line);
  background: rgba(255, 253, 248, 0.88);
  color: #111111;
}

body[data-theme="executive"] .secondary-button:hover,
body[data-theme="executive"] .secondary-button:focus-visible,
body[data-theme="executive"] .small-button:hover,
body[data-theme="executive"] .small-button:focus-visible {
  border-color: rgba(184, 155, 94, 0.5);
  background: var(--accent-soft);
  color: #111111;
}

body[data-theme="executive"] .session-pill {
  border-color: rgba(184, 155, 94, 0.28);
  background: rgba(255, 253, 248, 0.9);
}

body[data-theme="executive"] .badge {
  background: #f0eee8;
  color: #5f5a52;
}

body[data-theme="executive"] .badge.high {
  background: #edeef0;
  color: #23272f;
}

body[data-theme="executive"] .badge.medium {
  background: #f3ead6;
  color: #7a5720;
}

body[data-theme="executive"] .badge.low,
body[data-theme="executive"] .badge.done {
  background: #e2eee6;
  color: #2f6f4f;
}

body[data-theme="executive"] .badge.date-badge {
  background: #f6f1e6;
  color: #75603a;
}

body[data-theme="executive"] .badge.late {
  background: #f6e4e1;
  color: #9f1d1d;
}

body[data-theme="executive"] .progress-track {
  background: #ece7dc;
}

body[data-theme="executive"] .progress-fill {
  background: linear-gradient(90deg, #111111, #b89b5e);
}

body[data-theme="executive"] .ring-card,
body[data-theme="executive"] .delegation-details,
body[data-theme="executive"] .subtask-editor,
body[data-theme="executive"] .delegation-editor,
body[data-theme="executive"] .user-metrics article,
body[data-theme="executive"] .layout-manager,
body[data-theme="executive"] .custom-theme-panel,
body[data-theme="executive"] .admin-table-row,
body[data-theme="executive"] .account-row,
body[data-theme="executive"] .history-row,
body[data-theme="executive"] .person-goal-row {
  border-color: var(--ui-line);
  background: #fbf8f1;
}

body[data-theme="executive"] .admin-alert-card.late,
body[data-theme="executive"] .calendar-summary-card.late,
body[data-theme="executive"] .calendar-day-task-card.late {
  border-color: rgba(159, 29, 29, 0.2);
  background: #fbf0ed;
}

body[data-theme="executive"] input,
body[data-theme="executive"] select,
body[data-theme="executive"] textarea {
  border-color: var(--ui-line);
  background: #fffefa;
}

body[data-theme="executive"] input:focus,
body[data-theme="executive"] select:focus,
body[data-theme="executive"] textarea:focus {
  border-color: rgba(184, 155, 94, 0.7);
  outline-color: rgba(184, 155, 94, 0.18);
}

body[data-theme="executive"] #calendarView {
  --calendar-bg: var(--bg);
  --calendar-surface: #fffdf8;
  --calendar-line: var(--ui-line);
  --calendar-ink: var(--ink);
  --calendar-muted: var(--muted);
  --calendar-accent: #b89b5e;
  --calendar-accent-dark: #75603a;
  --calendar-accent-soft: #efe7d5;
  --calendar-danger: #9f1d1d;
  --calendar-danger-soft: #f6e4e1;
  --calendar-info: #374151;
  --calendar-info-soft: #e8eaed;
  --calendar-highlight: #111111;
  --calendar-highlight-soft: #ebe7dd;
}

body[data-theme="executive"] #calendarView .calendar-day.has-goal {
  background: linear-gradient(180deg, #fffaf0, #fffdf8);
}

body[data-theme="executive"] #calendarView .calendar-day.selected {
  box-shadow: inset 0 0 0 2px #b89b5e, 0 0 0 3px rgba(184, 155, 94, 0.14);
}

body[data-theme="executive"] #calendarView .calendar-goal.range {
  background: #f3ead6;
  color: #6f552b;
}

body[data-theme="executive"] #calendarView .calendar-goal.start,
body[data-theme="executive"] #calendarView .calendar-goal.end {
  background: #e8eaed;
  color: #23272f;
}

body[data-theme="executive"] #calendarView .calendar-goal.highlighted {
  background: linear-gradient(90deg, #111111, #75603a);
  color: #ffffff;
}

body[data-theme="executive"] .theme-preview {
  background:
    linear-gradient(135deg, rgba(184, 155, 94, 0.2), transparent),
    #111318;
  color: #fffdf8;
}

body[data-theme="executive"] .theme-preview span {
  background: linear-gradient(135deg, #d9c28a, #8a6b33);
}

body[data-theme="executive"] .theme-preview small {
  border-color: #b89b5e;
  color: #d9c28a;
}

/* Control Room UI: compact, readable project-dashboard style inspired by the reference screens. */
body[data-theme="control"] {
  color-scheme: light;
  --bg: #eef1f5;
  --surface: #ffffff;
  --surface-muted: #f5f7fa;
  --ink: #1f2933;
  --muted: #6b7684;
  --line: #dfe5ec;
  --accent: #4b8df7;
  --accent-dark: #2563d9;
  --accent-soft: #e8f1ff;
  --warning: #f5b23f;
  --warning-soft: #fff4da;
  --danger: #ef5350;
  --danger-soft: #ffe7e6;
  --success: #45b97c;
  --success-soft: #e4f7ee;
  --info: #4b8df7;
  --info-soft: #e8f1ff;
  --shadow: 0 24px 60px rgba(23, 32, 42, 0.12);
  --shadow-soft: 0 12px 28px rgba(23, 32, 42, 0.08);
  --ui-line: #dde3ea;
  background:
    radial-gradient(circle at 72% 0%, rgba(75, 141, 247, 0.08), transparent 28rem),
    var(--bg);
}

body[data-theme="control"] .login-screen {
  background:
    linear-gradient(135deg, rgba(47, 52, 59, 0.92), rgba(47, 52, 59, 0.72)),
    var(--bg);
}

body[data-theme="control"] .login-card {
  border-color: rgba(255, 255, 255, 0.18);
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.28);
}

body[data-theme="control"] .app-shell {
  grid-template-columns: 230px minmax(0, 1fr);
}

body[data-theme="control"] .sidebar {
  padding: 22px 14px;
  border-right: 0;
  background: linear-gradient(180deg, #323840 0%, #252a31 100%);
  color: #eef3f8;
  box-shadow: 8px 0 24px rgba(27, 33, 41, 0.16);
}

body[data-theme="control"] .brand {
  padding: 0 8px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

body[data-theme="control"] .brand-mark {
  width: 34px;
  height: 34px;
  border-radius: 7px;
  background: linear-gradient(135deg, #5fa8ff, #3d74d8);
  box-shadow: none;
}

body[data-theme="control"] .sidebar .brand h1 {
  color: #ffffff;
  font-size: 15px;
}

body[data-theme="control"] .sidebar .brand p,
body[data-theme="control"] .quick-stats small {
  color: rgba(238, 243, 248, 0.64);
}

body[data-theme="control"] .nav-tabs {
  gap: 3px;
}

body[data-theme="control"] .nav-tab {
  min-height: 38px;
  padding: 8px 10px;
  color: rgba(238, 243, 248, 0.74);
  font-size: 13px;
  font-weight: 650;
}

body[data-theme="control"] .nav-tab::before {
  width: 24px;
  height: 24px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(238, 243, 248, 0.68);
}

body[data-theme="control"] .nav-tab:hover,
body[data-theme="control"] .nav-tab:focus-visible {
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
}

body[data-theme="control"] .nav-tab.active {
  background: #3b424b;
  color: #ffffff;
  box-shadow: inset 3px 0 0 #5fa8ff;
}

body[data-theme="control"] .nav-tab.active::before {
  background: #4b8df7;
  color: #ffffff;
}

body[data-theme="control"] .quick-stats div {
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.06);
}

body[data-theme="control"] .quick-stats span {
  color: #ffffff;
  font-size: 22px;
}

body[data-theme="control"] .content {
  padding: 22px 26px 42px;
}

body[data-theme="control"] .topbar {
  margin: -22px -26px 22px;
  padding: 16px 26px;
  border-bottom: 1px solid var(--line);
  background: rgba(247, 249, 252, 0.96);
  box-shadow: 0 8px 20px rgba(23, 32, 42, 0.04);
}

body[data-theme="control"] .topbar h2 {
  font-size: 24px;
}

body[data-theme="control"] .eyebrow {
  color: #3d74d8;
  font-size: 10px;
}

body[data-theme="control"] .session-pill,
body[data-theme="control"] .secondary-button,
body[data-theme="control"] .small-button {
  border-color: var(--line);
  background: #ffffff;
  color: #1f2933;
}

body[data-theme="control"] .primary-button {
  border-color: #4b8df7;
  background: #4b8df7;
  color: #ffffff;
  box-shadow: 0 10px 20px rgba(75, 141, 247, 0.18);
}

body[data-theme="control"] .primary-button:hover,
body[data-theme="control"] .primary-button:focus-visible {
  border-color: #2563d9;
  background: #2563d9;
}

body[data-theme="control"] .secondary-button:hover,
body[data-theme="control"] .secondary-button:focus-visible,
body[data-theme="control"] .small-button:hover,
body[data-theme="control"] .small-button:focus-visible {
  border-color: #a8c5f7;
  background: #edf4ff;
  color: #1e5fc7;
}

body[data-theme="control"] .metric-grid {
  grid-template-columns: repeat(4, minmax(170px, 1fr));
}

body[data-theme="control"] .metric-card {
  min-height: 110px;
  padding: 18px 18px 16px;
  border: 0;
  color: #ffffff;
  box-shadow: 0 16px 34px rgba(23, 32, 42, 0.16);
}

body[data-theme="control"] .metric-card::before {
  display: none;
}

body[data-theme="control"] .metric-card .metric-label,
body[data-theme="control"] .metric-card strong {
  color: #ffffff;
}

body[data-theme="control"] .metric-card .metric-label {
  opacity: 0.84;
}

body[data-theme="control"] .metric-card:nth-child(1) {
  background: linear-gradient(135deg, #ef5350, #e53935);
}

body[data-theme="control"] .metric-card:nth-child(2) {
  background: linear-gradient(135deg, #f6c046, #f4a62a);
}

body[data-theme="control"] .metric-card:nth-child(3) {
  background: linear-gradient(135deg, #4fc58f, #2da66f);
}

body[data-theme="control"] .metric-card:nth-child(4) {
  background: linear-gradient(135deg, #5fa8ff, #3d74d8);
}

body[data-theme="control"] .panel,
body[data-theme="control"] .goal-card,
body[data-theme="control"] .person-card,
body[data-theme="control"] .toolbar,
body[data-theme="control"] .person-form-row,
body[data-theme="control"] .account-form-row,
body[data-theme="control"] .theme-settings,
body[data-theme="control"] .user-panel-header,
body[data-theme="control"] .calendar-hero,
body[data-theme="control"] .calendar-board-card,
body[data-theme="control"] .calendar-day-panel,
body[data-theme="control"] .calendar-summary-panel {
  border-color: var(--ui-line);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: var(--shadow-soft);
}

body[data-theme="control"] .panel {
  padding: 16px;
}

body[data-theme="control"] .panel-heading {
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}

body[data-theme="control"] .panel h3,
body[data-theme="control"] .panel h4 {
  font-size: 16px;
}

body[data-theme="control"] .split-layout {
  grid-template-columns: minmax(0, 1.45fr) minmax(320px, 0.72fr);
}

body[data-theme="control"] .goal-board {
  grid-template-columns: 1fr;
  gap: 10px;
}

body[data-theme="control"] .goal-card {
  gap: 10px;
  padding: 14px;
  box-shadow: 0 8px 20px rgba(23, 32, 42, 0.06);
}

body[data-theme="control"] .goal-card::before {
  width: 0;
}

body[data-theme="control"] .goal-card-header {
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}

body[data-theme="control"] .goal-card h4 {
  font-size: 16px;
}

body[data-theme="control"] .goal-card p {
  font-size: 13px;
}

body[data-theme="control"] .meta-row {
  gap: 6px;
}

body[data-theme="control"] .badge {
  min-height: 22px;
  padding: 0 8px;
  border-radius: 5px;
  background: #eef2f6;
  color: #4b5563;
  font-size: 11px;
}

body[data-theme="control"] .badge.high {
  background: #e8f1ff;
  color: #2563d9;
}

body[data-theme="control"] .badge.medium {
  background: #fff4da;
  color: #9a6a1b;
}

body[data-theme="control"] .badge.done,
body[data-theme="control"] .badge.low {
  background: #e4f7ee;
  color: #2f855a;
}

body[data-theme="control"] .badge.late {
  background: #ffe7e6;
  color: #d92d20;
}

body[data-theme="control"] .badge.date-badge {
  background: #edf4ff;
  color: #1e5fc7;
}

body[data-theme="control"] .progress-track {
  height: 7px;
  background: #e7ebf0;
}

body[data-theme="control"] .progress-fill {
  background: linear-gradient(90deg, #4b8df7, #2da66f);
}

body[data-theme="control"] .goal-rings {
  grid-template-columns: repeat(2, minmax(0, 210px));
}

body[data-theme="control"] .ring-card,
body[data-theme="control"] .delegation-details,
body[data-theme="control"] .subtask-editor,
body[data-theme="control"] .delegation-editor,
body[data-theme="control"] .user-metrics article,
body[data-theme="control"] .layout-manager,
body[data-theme="control"] .custom-theme-panel,
body[data-theme="control"] .account-row,
body[data-theme="control"] .history-row,
body[data-theme="control"] .person-goal-row {
  border-color: var(--ui-line);
  background: #f8fafc;
}

body[data-theme="control"] .ring-card {
  padding: 9px;
}

body[data-theme="control"] .percent-ring {
  width: 50px;
  height: 50px;
}

body[data-theme="control"] .delegation-details {
  padding: 10px;
}

body[data-theme="control"] .delegation-details dl {
  grid-template-columns: minmax(120px, 0.28fr) minmax(0, 1fr);
}

body[data-theme="control"] .subtask-list {
  overflow: hidden;
  gap: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

body[data-theme="control"] .subtask-list li {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  gap: 8px;
  padding: 8px 10px;
  border-top: 1px solid var(--line);
}

body[data-theme="control"] .subtask-list li:nth-child(even) {
  background: #f8fafc;
}

body[data-theme="control"] .subtask-list li:first-child {
  border-top: 0;
}

body[data-theme="control"] .admin-table-row,
body[data-theme="control"] .admin-alert-card,
body[data-theme="control"] .person-load-row {
  padding: 11px 0;
}

body[data-theme="control"] .admin-table-row,
body[data-theme="control"] .admin-alert-card {
  border-color: var(--line);
  background: #ffffff;
}

body[data-theme="control"] .admin-alert-card.late,
body[data-theme="control"] .calendar-summary-card.late,
body[data-theme="control"] .calendar-day-task-card.late {
  border-color: #ffc6c3;
  background: #fff6f5;
}

body[data-theme="control"] input,
body[data-theme="control"] select,
body[data-theme="control"] textarea {
  border-color: var(--line);
  background: #ffffff;
}

body[data-theme="control"] input:focus,
body[data-theme="control"] select:focus,
body[data-theme="control"] textarea:focus {
  border-color: #7fb0ff;
  outline-color: rgba(75, 141, 247, 0.16);
}

body[data-theme="control"] #calendarView {
  --calendar-bg: var(--bg);
  --calendar-surface: #ffffff;
  --calendar-line: var(--line);
  --calendar-ink: var(--ink);
  --calendar-muted: var(--muted);
  --calendar-accent: #4b8df7;
  --calendar-accent-dark: #2563d9;
  --calendar-accent-soft: #e8f1ff;
  --calendar-danger: #ef5350;
  --calendar-danger-soft: #ffe7e6;
  --calendar-info: #4b8df7;
  --calendar-info-soft: #e8f1ff;
  --calendar-highlight: #2f343b;
  --calendar-highlight-soft: #e6e9ed;
}

body[data-theme="control"] #calendarView .calendar-hero {
  padding: 16px;
}

body[data-theme="control"] #calendarView .calendar-board-card {
  padding: 10px;
}

body[data-theme="control"] #calendarView .calendar-day {
  min-height: 118px;
  background: #ffffff;
}

body[data-theme="control"] #calendarView .calendar-weekday {
  background: #f2f5f8;
}

body[data-theme="control"] #calendarView .calendar-day.has-goal {
  background: linear-gradient(180deg, #f8fbff, #ffffff);
}

body[data-theme="control"] #calendarView .calendar-day.has-late-goal {
  background: linear-gradient(180deg, #fff4f3, #ffffff);
}

body[data-theme="control"] #calendarView .calendar-day.selected {
  box-shadow: inset 0 0 0 2px #4b8df7, 0 0 0 3px rgba(75, 141, 247, 0.12);
}

body[data-theme="control"] #calendarView .calendar-goal {
  border-radius: 5px;
  font-size: 11px;
}

body[data-theme="control"] #calendarView .calendar-goal.range {
  background: #f3f5f8;
  color: #384251;
}

body[data-theme="control"] #calendarView .calendar-goal.start,
body[data-theme="control"] #calendarView .calendar-goal.end {
  background: #e8f1ff;
  color: #2563d9;
}

body[data-theme="control"] #calendarView .calendar-goal.late {
  background: #ffe7e6;
  color: #d92d20;
}

body[data-theme="control"] #calendarView .calendar-goal.highlighted {
  background: #2f343b;
  color: #ffffff;
}

body[data-theme="control"] .calendar-day-task-card,
body[data-theme="control"] .calendar-summary-card {
  background: #ffffff;
}

body[data-theme="control"] .calendar-day-subtasks li {
  background: #f8fafc;
}

body[data-theme="control"] .person-card {
  box-shadow: 0 8px 20px rgba(23, 32, 42, 0.06);
}

body[data-theme="control"] .person-card::after {
  background: linear-gradient(90deg, #4b8df7, transparent);
}

body[data-theme="control"] .theme-preview {
  background:
    linear-gradient(90deg, rgba(75, 141, 247, 0.18), rgba(69, 185, 124, 0.14)),
    #2f343b;
  color: #ffffff;
}

body[data-theme="control"] .theme-preview span {
  background: linear-gradient(135deg, #4b8df7, #45b97c);
}

body[data-theme="control"] .theme-preview small {
  border-color: #5fa8ff;
  color: #d9e9ff;
}

@media (max-width: 1180px) {
  body[data-theme="control"] .app-shell {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  body[data-theme="control"] .content {
    padding: 16px;
  }

  body[data-theme="control"] .topbar {
    margin: -16px -16px 16px;
    padding: 16px;
  }

  body[data-theme="control"] .goal-rings {
    grid-template-columns: 1fr;
  }
}

/* Control Room base applied to every color variant. */
body[data-theme] {
  --cr-app-bg: var(--bg);
  --cr-content-bg: var(--surface);
  --cr-sidebar-bg: linear-gradient(180deg, #323840 0%, #252a31 100%);
  --cr-sidebar-border: rgba(255, 255, 255, 0.08);
  --cr-sidebar-text: rgba(238, 243, 248, 0.74);
  --cr-sidebar-text-strong: #ffffff;
  --cr-sidebar-muted: rgba(238, 243, 248, 0.62);
  --cr-sidebar-hover: rgba(255, 255, 255, 0.08);
  --cr-sidebar-active: #3b424b;
  --cr-sidebar-accent: var(--accent);
  --cr-topbar-bg: rgba(247, 249, 252, 0.96);
  --cr-panel-bg: rgba(255, 255, 255, 0.96);
  --cr-subtle-bg: #f8fafc;
  --cr-kpi-1: linear-gradient(135deg, #ef5350, #e53935);
  --cr-kpi-2: linear-gradient(135deg, #f6c046, #f4a62a);
  --cr-kpi-3: linear-gradient(135deg, #4fc58f, #2da66f);
  --cr-kpi-4: linear-gradient(135deg, #5fa8ff, #3d74d8);
  --cr-focus: rgba(75, 141, 247, 0.16);
  --cr-button-hover: #edf4ff;
  --ui-line: color-mix(in srgb, var(--line) 82%, var(--surface));
  background: var(--cr-app-bg);
  font-size: 14px;
}

body[data-theme="control"] {
  --cr-app-bg:
    radial-gradient(circle at 72% 0%, rgba(75, 141, 247, 0.08), transparent 28rem),
    var(--bg);
  --cr-sidebar-bg: linear-gradient(180deg, #323840 0%, #252a31 100%);
  --cr-sidebar-accent: #5fa8ff;
}

body[data-theme="light"] {
  --cr-app-bg:
    radial-gradient(circle at 72% 0%, rgba(20, 121, 201, 0.1), transparent 28rem),
    var(--bg);
  --cr-sidebar-bg: linear-gradient(180deg, #1f5f8f 0%, #123a5d 100%);
  --cr-sidebar-active: rgba(255, 255, 255, 0.13);
  --cr-sidebar-accent: #8fcfff;
  --cr-kpi-1: linear-gradient(135deg, #43a6df, #1479c9);
  --cr-kpi-2: linear-gradient(135deg, #80c7ff, #2f87d7);
  --cr-kpi-3: linear-gradient(135deg, #4fb3d7, #166f9e);
  --cr-kpi-4: linear-gradient(135deg, #2469a8, #0b5fa5);
}

body[data-theme="executive"] {
  --cr-app-bg: #f4f2ee;
  --cr-sidebar-bg: linear-gradient(180deg, #12151a 0%, #090b0e 100%);
  --cr-sidebar-active: rgba(184, 155, 94, 0.18);
  --cr-sidebar-accent: #b89b5e;
  --cr-topbar-bg: rgba(244, 242, 238, 0.96);
  --cr-panel-bg: rgba(255, 253, 248, 0.96);
  --cr-subtle-bg: #fbf8f1;
  --cr-kpi-1: linear-gradient(135deg, #343840, #111111);
  --cr-kpi-2: linear-gradient(135deg, #d5bd83, #9a793b);
  --cr-kpi-3: linear-gradient(135deg, #6f9f7f, #2f6f4f);
  --cr-kpi-4: linear-gradient(135deg, #6f7480, #374151);
  --cr-button-hover: #efe7d5;
}

body[data-theme="matrix"] {
  --cr-app-bg:
    radial-gradient(circle at 76% 0%, rgba(255, 49, 85, 0.12), transparent 28rem),
    var(--bg);
  --cr-sidebar-bg: linear-gradient(180deg, #141820 0%, #080a0f 100%);
  --cr-sidebar-active: rgba(255, 49, 85, 0.16);
  --cr-sidebar-accent: #ff3155;
  --cr-topbar-bg: rgba(15, 18, 23, 0.96);
  --cr-panel-bg: rgba(15, 18, 23, 0.96);
  --cr-subtle-bg: #171c24;
  --cr-kpi-1: linear-gradient(135deg, #ff3155, #b31935);
  --cr-kpi-2: linear-gradient(135deg, #ff7b91, #ff3155);
  --cr-kpi-3: linear-gradient(135deg, #4fd49d, #1f9e6b);
  --cr-kpi-4: linear-gradient(135deg, #657181, #2b3340);
  --cr-button-hover: #202634;
}

body[data-theme="bitrix"] {
  --cr-app-bg:
    radial-gradient(circle at 72% 0%, rgba(47, 198, 246, 0.16), transparent 28rem),
    var(--bg);
  --cr-sidebar-bg: linear-gradient(180deg, #153b66 0%, #0e2949 100%);
  --cr-sidebar-active: rgba(47, 198, 246, 0.18);
  --cr-sidebar-accent: #2fc6f6;
  --cr-kpi-1: linear-gradient(135deg, #f15b5b, #d93636);
  --cr-kpi-2: linear-gradient(135deg, #ffb84d, #ff9f1c);
  --cr-kpi-3: linear-gradient(135deg, #45d486, #31b86a);
  --cr-kpi-4: linear-gradient(135deg, #2fc6f6, #0a7eb8);
}

body[data-theme="dmsales"] {
  --cr-app-bg:
    radial-gradient(circle at 76% 0%, rgba(208, 39, 141, 0.1), transparent 28rem),
    var(--bg);
  --cr-sidebar-bg: linear-gradient(180deg, #252631 0%, #171821 100%);
  --cr-sidebar-active: rgba(208, 39, 141, 0.18);
  --cr-sidebar-accent: #d0278d;
  --cr-kpi-1: linear-gradient(135deg, #d0278d, #a51b72);
  --cr-kpi-2: linear-gradient(135deg, #9324c2, #6f1c93);
  --cr-kpi-3: linear-gradient(135deg, #00a9e7, #007db0);
  --cr-kpi-4: linear-gradient(135deg, #606876, #15151a);
}

body[data-theme="custom"] {
  --cr-app-bg: var(--bg);
  --cr-sidebar-bg:
    linear-gradient(180deg, color-mix(in srgb, var(--ink) 92%, var(--accent)) 0%, var(--ink) 100%);
  --cr-sidebar-active: color-mix(in srgb, var(--accent) 24%, transparent);
  --cr-sidebar-accent: var(--accent);
  --cr-kpi-1: linear-gradient(135deg, var(--danger), color-mix(in srgb, var(--danger) 70%, #000000));
  --cr-kpi-2: linear-gradient(135deg, var(--warning), color-mix(in srgb, var(--warning) 70%, #000000));
  --cr-kpi-3: linear-gradient(135deg, var(--success), color-mix(in srgb, var(--success) 70%, #000000));
  --cr-kpi-4: linear-gradient(135deg, var(--accent), var(--accent-dark));
}

body[data-theme] .app-shell {
  grid-template-columns: 230px minmax(0, 1fr);
  background: var(--cr-app-bg);
}

body[data-theme] .sidebar {
  position: sticky;
  top: 0;
  min-height: 100vh;
  gap: 18px;
  padding: 22px 14px;
  border-right: 0;
  background: var(--cr-sidebar-bg);
  color: var(--cr-sidebar-text-strong);
  box-shadow: 8px 0 24px rgba(27, 33, 41, 0.16);
}

body[data-theme] .brand {
  padding: 0 8px 12px;
  border-bottom: 1px solid var(--cr-sidebar-border);
}

body[data-theme] .brand-mark {
  width: 34px;
  height: 34px;
  border-radius: 7px;
  background: linear-gradient(135deg, var(--cr-sidebar-accent), color-mix(in srgb, var(--cr-sidebar-accent) 72%, #000000));
  color: #ffffff;
  box-shadow: none;
}

body[data-theme="executive"] .brand-mark {
  color: #111111;
}

body[data-theme] .sidebar .brand h1 {
  color: var(--cr-sidebar-text-strong);
  font-size: 15px;
}

body[data-theme] .sidebar .brand p,
body[data-theme] .quick-stats small {
  color: var(--cr-sidebar-muted);
  font-size: 12px;
}

body[data-theme] .nav-tabs {
  gap: 3px;
}

body[data-theme] .nav-tab {
  min-height: 38px;
  padding: 8px 10px;
  color: var(--cr-sidebar-text);
  font-size: 13px;
  font-weight: 650;
}

body[data-theme] .nav-tab::before {
  width: 24px;
  height: 24px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--cr-sidebar-text);
}

body[data-theme] .nav-tab:hover,
body[data-theme] .nav-tab:focus-visible {
  background: var(--cr-sidebar-hover);
  color: var(--cr-sidebar-text-strong);
}

body[data-theme] .nav-tab.active {
  background: var(--cr-sidebar-active);
  color: var(--cr-sidebar-text-strong);
  box-shadow: inset 3px 0 0 var(--cr-sidebar-accent);
}

body[data-theme] .nav-tab.active::before {
  background: var(--cr-sidebar-accent);
  color: #ffffff;
}

body[data-theme="executive"] .nav-tab.active::before {
  color: #111111;
}

body[data-theme] .quick-stats div {
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.06);
}

body[data-theme] .quick-stats span {
  color: #ffffff;
  font-size: 22px;
}

body[data-theme] .content {
  padding: 22px 26px 42px;
}

body[data-theme] .topbar {
  margin: -22px -26px 22px;
  padding: 16px 26px;
  border-bottom: 1px solid var(--ui-line);
  background: var(--cr-topbar-bg);
  box-shadow: 0 8px 20px rgba(23, 32, 42, 0.04);
}

body[data-theme] .topbar h2 {
  font-size: 24px;
}

body[data-theme] .eyebrow {
  color: var(--accent-dark);
  font-size: 10px;
}

body[data-theme] .primary-button,
body[data-theme] .secondary-button,
body[data-theme] .small-button,
body[data-theme] .session-pill {
  min-height: 36px;
  border-radius: 7px;
  font-size: 13px;
}

body[data-theme] .secondary-button,
body[data-theme] .small-button,
body[data-theme] .session-pill {
  border-color: var(--ui-line);
  background: var(--surface);
  color: var(--ink);
}

body[data-theme] .primary-button {
  border-color: var(--accent);
  background: var(--accent);
  color: #ffffff;
  box-shadow: 0 10px 20px color-mix(in srgb, var(--accent) 24%, transparent);
}

body[data-theme] .secondary-button:hover,
body[data-theme] .secondary-button:focus-visible,
body[data-theme] .small-button:hover,
body[data-theme] .small-button:focus-visible {
  border-color: color-mix(in srgb, var(--accent) 42%, var(--ui-line));
  background: var(--cr-button-hover);
  color: var(--accent-dark);
}

body[data-theme] input,
body[data-theme] select,
body[data-theme] textarea {
  border-color: var(--ui-line);
  border-radius: 7px;
  background: var(--surface);
  font-size: 13px;
}

body[data-theme] input,
body[data-theme] select {
  height: 38px;
}

body[data-theme] input:focus,
body[data-theme] select:focus,
body[data-theme] textarea:focus {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--ui-line));
  outline-color: var(--cr-focus);
}

body[data-theme] label span {
  font-size: 10px;
}

body[data-theme] .metric-grid {
  grid-template-columns: repeat(4, minmax(170px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

body[data-theme] .metric-card {
  min-height: 106px;
  padding: 16px 18px;
  border: 0;
  color: #ffffff;
  box-shadow: 0 16px 34px rgba(23, 32, 42, 0.16);
}

body[data-theme] .metric-card::before {
  display: none;
}

body[data-theme] .metric-card .metric-label,
body[data-theme] .metric-card strong {
  color: #ffffff;
}

body[data-theme] .metric-card .metric-label {
  opacity: 0.86;
}

body[data-theme] .metric-card strong {
  font-size: 30px;
}

body[data-theme] .metric-card:nth-child(1) {
  background: var(--cr-kpi-1);
}

body[data-theme] .metric-card:nth-child(2) {
  background: var(--cr-kpi-2);
}

body[data-theme] .metric-card:nth-child(3) {
  background: var(--cr-kpi-3);
}

body[data-theme] .metric-card:nth-child(4) {
  background: var(--cr-kpi-4);
}

body[data-theme] .panel,
body[data-theme] .goal-card,
body[data-theme] .person-card,
body[data-theme] .toolbar,
body[data-theme] .person-form-row,
body[data-theme] .account-form-row,
body[data-theme] .theme-settings,
body[data-theme] .user-panel-header,
body[data-theme] .calendar-hero,
body[data-theme] .calendar-board-card,
body[data-theme] .calendar-day-panel,
body[data-theme] .calendar-summary-panel {
  border-color: var(--ui-line);
  background: var(--cr-panel-bg);
  box-shadow: var(--shadow-soft);
}

body[data-theme] .panel {
  padding: 16px;
}

body[data-theme] .panel-heading {
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--ui-line);
}

body[data-theme] .panel h3,
body[data-theme] .panel h4 {
  font-size: 16px;
}

body[data-theme] .split-layout {
  grid-template-columns: minmax(0, 1.45fr) minmax(320px, 0.72fr);
  gap: 16px;
}

body[data-theme] .goal-board {
  grid-template-columns: 1fr;
  gap: 10px;
}

body[data-theme] .goal-card {
  gap: 10px;
  padding: 14px;
  box-shadow: 0 8px 20px rgba(23, 32, 42, 0.06);
}

body[data-theme] .goal-card::before {
  display: none;
}

body[data-theme] .goal-card-header {
  padding-bottom: 8px;
  border-bottom: 1px solid var(--ui-line);
}

body[data-theme] .goal-card h4 {
  font-size: 16px;
}

body[data-theme] .goal-card p {
  font-size: 13px;
}

body[data-theme] .meta-row {
  gap: 6px;
}

body[data-theme] .badge {
  min-height: 22px;
  padding: 0 8px;
  border-radius: 5px;
  background: var(--surface-muted);
  color: var(--muted);
  font-size: 11px;
}

body[data-theme] .badge.high {
  background: var(--info-soft);
  color: var(--info);
}

body[data-theme] .badge.medium {
  background: var(--warning-soft);
  color: var(--warning);
}

body[data-theme] .badge.done,
body[data-theme] .badge.low {
  background: var(--success-soft);
  color: var(--success);
}

body[data-theme] .badge.late {
  background: var(--danger-soft);
  color: var(--danger);
}

body[data-theme] .badge.date-badge {
  background: var(--accent-soft);
  color: var(--accent-dark);
}

body[data-theme] .progress-track {
  height: 7px;
  background: color-mix(in srgb, var(--line) 70%, var(--surface));
}

body[data-theme] .progress-fill {
  background: linear-gradient(90deg, var(--accent), var(--success));
}

body[data-theme] .goal-rings {
  grid-template-columns: repeat(2, minmax(0, 210px));
}

body[data-theme] .ring-card,
body[data-theme] .delegation-details,
body[data-theme] .subtask-editor,
body[data-theme] .delegation-editor,
body[data-theme] .user-metrics article,
body[data-theme] .layout-manager,
body[data-theme] .custom-theme-panel,
body[data-theme] .account-row,
body[data-theme] .history-row,
body[data-theme] .person-goal-row {
  border-color: var(--ui-line);
  background: var(--cr-subtle-bg);
}

body[data-theme] .ring-card {
  padding: 9px;
}

body[data-theme] .percent-ring {
  width: 50px;
  height: 50px;
}

body[data-theme] .delegation-details {
  padding: 10px;
}

body[data-theme] .delegation-details dl {
  grid-template-columns: minmax(120px, 0.28fr) minmax(0, 1fr);
}

body[data-theme] .subtask-list {
  overflow: hidden;
  gap: 0;
  border: 1px solid var(--ui-line);
  border-radius: 8px;
  background: var(--surface);
}

body[data-theme] .subtask-list li {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  gap: 8px;
  padding: 8px 10px;
  border-top: 1px solid var(--ui-line);
}

body[data-theme] .subtask-list li:nth-child(even) {
  background: var(--cr-subtle-bg);
}

body[data-theme] .subtask-list li:first-child {
  border-top: 0;
}

body[data-theme] .admin-table-row,
body[data-theme] .admin-alert-card,
body[data-theme] .person-load-row {
  padding: 11px 0;
}

body[data-theme] .admin-table-row,
body[data-theme] .admin-alert-card {
  border-color: var(--ui-line);
  background: var(--surface);
}

body[data-theme] .admin-alert-card.late,
body[data-theme] .calendar-summary-card.late,
body[data-theme] .calendar-day-task-card.late {
  border-color: color-mix(in srgb, var(--danger) 24%, var(--ui-line));
  background: var(--danger-soft);
}

body[data-theme] #calendarView {
  --calendar-bg: var(--bg);
  --calendar-surface: var(--surface);
  --calendar-line: var(--ui-line);
  --calendar-ink: var(--ink);
  --calendar-muted: var(--muted);
  --calendar-accent: var(--accent);
  --calendar-accent-dark: var(--accent-dark);
  --calendar-accent-soft: var(--accent-soft);
  --calendar-danger: var(--danger);
  --calendar-danger-soft: var(--danger-soft);
  --calendar-info: var(--info);
  --calendar-info-soft: var(--info-soft);
}

body[data-theme] #calendarView .calendar-hero {
  padding: 16px;
}

body[data-theme] #calendarView .calendar-board-card {
  padding: 10px;
}

body[data-theme] #calendarView .calendar-day {
  min-height: 118px;
  background: var(--surface);
}

body[data-theme] #calendarView .calendar-weekday {
  background: var(--cr-subtle-bg);
}

body[data-theme] #calendarView .calendar-day.has-goal {
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 6%, var(--surface)), var(--surface));
}

body[data-theme] #calendarView .calendar-day.has-late-goal {
  background: linear-gradient(180deg, color-mix(in srgb, var(--danger) 8%, var(--surface)), var(--surface));
}

body[data-theme] #calendarView .calendar-day.selected {
  box-shadow: inset 0 0 0 2px var(--accent), 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent);
}

body[data-theme] #calendarView .calendar-goal {
  border-radius: 5px;
  font-size: 11px;
}

body[data-theme] #calendarView .calendar-goal.range {
  background: var(--surface-muted);
  color: var(--ink);
}

body[data-theme] #calendarView .calendar-goal.start,
body[data-theme] #calendarView .calendar-goal.end {
  background: var(--accent-soft);
  color: var(--accent-dark);
}

body[data-theme] #calendarView .calendar-goal.late {
  background: var(--danger-soft);
  color: var(--danger);
}

body[data-theme] #calendarView .calendar-goal.highlighted {
  background: var(--ink);
  color: var(--surface);
}

body[data-theme] .calendar-day-task-card,
body[data-theme] .calendar-summary-card {
  background: var(--surface);
}

body[data-theme] .calendar-day-subtasks li {
  background: var(--cr-subtle-bg);
}

body[data-theme] .person-card {
  box-shadow: 0 8px 20px rgba(23, 32, 42, 0.06);
}

body[data-theme] .person-card::after {
  background: linear-gradient(90deg, var(--accent), transparent);
}

body[data-theme] .theme-preview {
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--accent) 22%, transparent), color-mix(in srgb, var(--success) 16%, transparent)),
    var(--ink);
  color: var(--surface);
}

body[data-theme] .theme-preview span {
  background: linear-gradient(135deg, var(--accent), var(--success));
}

body[data-theme] .theme-preview small {
  border-color: var(--accent);
  color: color-mix(in srgb, var(--accent) 44%, #ffffff);
}

@media (max-width: 1180px) {
  body[data-theme] .app-shell {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  body[data-theme] .content {
    padding: 16px;
  }

  body[data-theme] .topbar {
    margin: -16px -16px 16px;
    padding: 16px;
  }

  body[data-theme] .goal-rings {
    grid-template-columns: 1fr;
  }
}

/* ═══════════════════════════════════════════════
   MILESTONE THEME — Overrides Control Room base
   Design spec: design crm.md
   ═══════════════════════════════════════════════ */

/* -- App shell & layout -- */
body[data-theme="milestone"] {
  --cr-app-bg: #FFFFFF;
  --cr-content-bg: #FFFFFF;
  --cr-sidebar-bg: #FAF8F5;
  --cr-sidebar-border: #EDEDED;
  --cr-sidebar-text: #5A5A5A;
  --cr-sidebar-text-strong: #1C1C1E;
  --cr-sidebar-muted: #5A5A5A;
  --cr-sidebar-hover: rgba(244, 162, 107, 0.08);
  --cr-sidebar-active: rgba(244, 162, 107, 0.15);
  --cr-sidebar-accent: #F4A26B;
  --cr-topbar-bg: #FFFFFF;
  --cr-panel-bg: #FFFFFF;
  --cr-subtle-bg: #FAF8F5;
  --cr-kpi-1: #FFFFFF;
  --cr-kpi-2: #FFFFFF;
  --cr-kpi-3: #FFFFFF;
  --cr-kpi-4: #FFFFFF;
  --cr-focus: rgba(244, 162, 107, 0.2);
  --cr-button-hover: #FFF5EE;
  --ui-line: #EDEDED;
  --shadow-soft: 0 1px 3px rgba(0,0,0,0.02);
  --info: #F4A26B;
  --info-soft: #FFF0E6;
}

/* -- Sidebar -- */
body[data-theme="milestone"] .sidebar {
  background: #FFFFFF;
  border-right: 1px solid #EDEDED;
  box-shadow: none;
  color: #1C1C1E;
  display: flex;
  flex-direction: column;
}

body[data-theme="milestone"] .brand {
  border-bottom-color: #EDEDED;
}

body[data-theme="milestone"] .brand-mark {
  background: linear-gradient(135deg, #F4A26B, #E8735A);
  color: #ffffff;
}

body[data-theme="milestone"] .sidebar .brand h1 {
  color: #1C1C1E;
}

body[data-theme="milestone"] .sidebar .brand p,
body[data-theme="milestone"] .quick-stats small {
  color: #5A5A5A;
}

body[data-theme="milestone"] .nav-tab {
  color: #1C1C1E;
  font-weight: 500;
}

body[data-theme="milestone"] .nav-tab::before {
  background: rgba(244, 162, 107, 0.12);
  color: #F4A26B;
}

body[data-theme="milestone"] .nav-tab:hover,
body[data-theme="milestone"] .nav-tab:focus-visible {
  background: rgba(244, 162, 107, 0.08);
  color: #1C1C1E;
}

body[data-theme="milestone"] .nav-tab.active {
  background: rgba(244, 162, 107, 0.15);
  color: #1C1C1E;
  font-weight: 700;
  box-shadow: inset 3px 0 0 #F4A26B;
}

body[data-theme="milestone"] .nav-tab.active::before {
  background: #F4A26B;
  color: #FFFFFF;
}

body[data-theme="milestone"] .quick-stats div {
  background: #FFFFFF;
  border-color: #EDEDED;
}

body[data-theme="milestone"] .quick-stats span {
  color: #1C1C1E;
}

/* -- Top Bar -- */
body[data-theme="milestone"] .topbar {
  background: #FFFFFF;
  border-bottom-color: #EDEDED;
  box-shadow: none;
}

body[data-theme="milestone"] .eyebrow {
  color: #F4A26B;
}

/* -- KPI Metric Cards (white, not colored) -- */
body[data-theme="milestone"] .metric-card {
  background: #FFFFFF;
  border: 1px solid #EDEDED;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.02);
  color: #1C1C1E;
}

body[data-theme="milestone"] .metric-card .metric-label {
  color: #5A5A5A;
  opacity: 1;
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.03em;
}

body[data-theme="milestone"] .metric-card strong {
  color: #1C1C1E;
  font-size: 30px;
  font-weight: 700;
}

body[data-theme="milestone"] .metric-card:nth-child(1),
body[data-theme="milestone"] .metric-card:nth-child(2),
body[data-theme="milestone"] .metric-card:nth-child(3),
body[data-theme="milestone"] .metric-card:nth-child(4) {
  background: #FFFFFF;
}

/* KPI colored numbers per spec */
body[data-theme="milestone"] .metric-card:nth-child(1) .metric-label { color: #5A5A5A; }
body[data-theme="milestone"] .metric-card:nth-child(1) strong { color: #1C1C1E; }

body[data-theme="milestone"] .metric-card:nth-child(2) .metric-label { color: #5A5A5A; }
body[data-theme="milestone"] .metric-card:nth-child(2) strong { color: #E8735A; }

body[data-theme="milestone"] .metric-card:nth-child(3) .metric-label { color: #5A5A5A; }
body[data-theme="milestone"] .metric-card:nth-child(3) strong { color: #F4A26B; }

body[data-theme="milestone"] .metric-card:nth-child(4) .metric-label { color: #5A5A5A; }
body[data-theme="milestone"] .metric-card:nth-child(4) strong { color: #12A173; }

/* -- Buttons -- */
body[data-theme="milestone"] .primary-button {
  background: #F4A26B;
  color: #FFFFFF;
  border-color: #F4A26B;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(244, 162, 107, 0.2);
}

body[data-theme="milestone"] .primary-button:hover,
body[data-theme="milestone"] .primary-button:focus-visible {
  background: #E8735A;
  border-color: #E8735A;
}

body[data-theme="milestone"] .secondary-button,
body[data-theme="milestone"] .small-button {
  border: 1px solid #EDEDED;
  background: #FFFFFF;
  color: #1C1C1E;
  font-weight: 600;
}

body[data-theme="milestone"] .secondary-button:hover,
body[data-theme="milestone"] .secondary-button:focus-visible,
body[data-theme="milestone"] .small-button:hover,
body[data-theme="milestone"] .small-button:focus-visible {
  border-color: #F4A26B;
  background: #FFF5EE;
  color: #E8735A;
}

body[data-theme="milestone"] .session-pill {
  background: #FAF8F5;
  border-color: #EDEDED;
}

/* -- Panels & Cards -- */
body[data-theme="milestone"] .panel,
body[data-theme="milestone"] .goal-card,
body[data-theme="milestone"] .person-card,
body[data-theme="milestone"] .toolbar,
body[data-theme="milestone"] .person-form-row,
body[data-theme="milestone"] .account-form-row,
body[data-theme="milestone"] .theme-settings,
body[data-theme="milestone"] .user-panel-header,
body[data-theme="milestone"] .calendar-hero,
body[data-theme="milestone"] .calendar-board-card,
body[data-theme="milestone"] .calendar-day-panel,
body[data-theme="milestone"] .calendar-summary-panel {
  border-color: #EDEDED;
  background: #FFFFFF;
  box-shadow: 0 1px 3px rgba(0,0,0,0.02);
}

body[data-theme="milestone"] .panel-heading {
  border-bottom-color: #EDEDED;
}

/* -- Goal Cards -- */
body[data-theme="milestone"] .goal-card {
  border-radius: 12px;
  border: 1px solid #EDEDED;
  box-shadow: 0 1px 3px rgba(0,0,0,0.02);
  transition: box-shadow 0.2s ease, transform 0.15s ease;
}

body[data-theme="milestone"] .goal-card:hover {
  box-shadow: 0 6px 20px rgba(244, 162, 107, 0.12);
  transform: translateY(-1px);
}

body[data-theme="milestone"] .goal-card h4 {
  font-size: 17px;
  font-weight: 700;
  color: #1C1C1E;
}

body[data-theme="milestone"] .goal-card-header {
  border-bottom-color: #EDEDED;
}

/* -- Badges per design crm.md -- */
body[data-theme="milestone"] .badge {
  border-radius: 4px;
  font-size: 12px;
  font-weight: 700;
  background: #FAF8F5;
  color: #5A5A5A;
}

body[data-theme="milestone"] .badge.high {
  background: #E8735A;
  color: #FFFFFF;
  text-transform: uppercase;
  border-radius: 4px;
  padding: 4px 12px;
}

body[data-theme="milestone"] .badge.medium {
  background: #FFF0E6;
  color: #F4A26B;
}

body[data-theme="milestone"] .badge.low,
body[data-theme="milestone"] .badge.done {
  background: #E6F7F0;
  color: #12A173;
}

body[data-theme="milestone"] .badge.late {
  background: #FFF0E6;
  color: #E8735A;
}

body[data-theme="milestone"] .badge.date-badge {
  background: rgba(242, 196, 168, 0.25);
  color: #1C1C1E;
}

/* -- Progress Bar -- */
body[data-theme="milestone"] .progress-track {
  background: #FAF8F5;
  height: 8px;
}

body[data-theme="milestone"] .progress-fill {
  background: #F4A26B;
}

/* -- Ring cards & details -- */
body[data-theme="milestone"] .ring-card,
body[data-theme="milestone"] .delegation-details,
body[data-theme="milestone"] .subtask-editor,
body[data-theme="milestone"] .delegation-editor,
body[data-theme="milestone"] .user-metrics article,
body[data-theme="milestone"] .layout-manager,
body[data-theme="milestone"] .custom-theme-panel,
body[data-theme="milestone"] .account-row,
body[data-theme="milestone"] .history-row,
body[data-theme="milestone"] .person-goal-row {
  border-color: #EDEDED;
  background: #FAF8F5;
}

body[data-theme="milestone"] .percent-ring {
  --ring-color: #F4A26B;
}

/* -- Subtask list -- */
body[data-theme="milestone"] .subtask-list {
  border-color: #EDEDED;
}

body[data-theme="milestone"] .subtask-list li:nth-child(even) {
  background: #FAF8F5;
}

/* -- Person card -- */
body[data-theme="milestone"] .person-card::after {
  background: linear-gradient(90deg, #F4A26B, transparent);
}

/* -- Calendar -- */
body[data-theme="milestone"] .calendar-cell.today {
  border-color: #F4A26B;
}

body[data-theme="milestone"] #calendarView .calendar-day {
  background: #FFFFFF;
}

body[data-theme="milestone"] #calendarView .calendar-weekday {
  background: #FAF8F5;
}

body[data-theme="milestone"] #calendarView .calendar-day.has-goal {
  background: linear-gradient(180deg, rgba(244, 162, 107, 0.06), #FFFFFF);
}

body[data-theme="milestone"] #calendarView .calendar-day.has-late-goal {
  background: linear-gradient(180deg, rgba(232, 115, 90, 0.08), #FFFFFF);
}

/* -- Theme preview -- */
body[data-theme="milestone"] .theme-preview {
  background: linear-gradient(90deg, rgba(244, 162, 107, 0.15), rgba(18, 161, 115, 0.1)), #1C1C1E;
}

body[data-theme="milestone"] .theme-preview span {
  background: linear-gradient(135deg, #F4A26B, #12A173);
}

/* -- Login -- */
body[data-theme="milestone"] .login-screen {
  background:
    radial-gradient(circle at 80% 20%, rgba(242, 196, 168, 0.25) 0%, transparent 60%),
    #FFFFFF;
}

body[data-theme="milestone"] .login-card {
  border: 1px solid #EDEDED;
  box-shadow: 0 8px 32px rgba(244, 162, 107, 0.1);
}

/* -- Inputs -- */
body[data-theme="milestone"] input:focus,
body[data-theme="milestone"] select:focus,
body[data-theme="milestone"] textarea:focus {
  border-color: rgba(244, 162, 107, 0.6);
  outline-color: rgba(244, 162, 107, 0.2);
}

/* ── Nav Section Labels ── */
body[data-theme="milestone"] .nav-section-label {
  display: block;
  padding: 16px 10px 6px;
  color: #999;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

body[data-theme="milestone"] .nav-section-label:first-child {
  padding-top: 0;
}

/* ── Nav Tabs (clean, no icons) ── */
body[data-theme="milestone"] .nav-tab {
  display: flex;
  align-items: center;
  color: #1C1C1E;
  font-weight: 500;
  font-size: 14px;
  padding: 10px 12px;
  border-radius: 8px;
  position: relative;
}

body[data-theme="milestone"] .nav-tab::before {
  display: none;
}

body[data-theme="milestone"] .nav-tab.active {
  color: #F4A26B;
  font-weight: 700;
  background: rgba(244, 162, 107, 0.08);
  box-shadow: inset 3px 0 0 #F4A26B;
}

/* ── Nav Badge ── */
body[data-theme="milestone"] .nav-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  margin-left: auto;
  border-radius: 12px;
  background: #F4A26B;
  color: #FFFFFF;
  font-size: 11px;
  font-weight: 700;
}

.nav-section-label {
  display: none;
}
.nav-icon {
  display: none;
}
.nav-badge {
  display: none;
}

body[data-theme="milestone"] .nav-section-label {
  display: block;
}
body[data-theme="milestone"] .nav-icon {
  display: inline-flex;
}
body[data-theme="milestone"] .nav-badge {
  display: inline-flex;
}

/* ── Metric Subtitle ── */
.metric-subtitle {
  display: none;
}

body[data-theme="milestone"] .metric-subtitle {
  display: block;
  color: #999;
  font-size: 12px;
  margin-top: 4px;
  font-weight: 400;
}

body[data-theme="milestone"] .metric-card {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* ── Filter Pills ── */
.filter-pills {
  display: none;
}

body[data-theme="milestone"] .filter-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

body[data-theme="milestone"] .filter-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 18px;
  border: 1px solid #EDEDED;
  border-radius: 20px;
  background: #FFFFFF;
  color: #5A5A5A;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

body[data-theme="milestone"] .filter-pill:hover {
  border-color: #F4A26B;
  color: #F4A26B;
}

body[data-theme="milestone"] .filter-pill.active {
  background: #F4A26B;
  color: #FFFFFF;
  border-color: #F4A26B;
}

body[data-theme="milestone"] .filter-pill-icon {
  margin-left: auto;
}

/* ── Sidebar pure white, flex column for settings button ── */
body[data-theme="milestone"] .sidebar {
  background: #FFFFFF;
  display: flex;
  flex-direction: column;
  height: 100vh;
  min-height: 100vh;
  padding: 22px 14px;
  gap: 12px;
  box-shadow: none;
  border-right: 1px solid #EDEDED;
}

/* ── Badge WYSOKI as text-only per screenshot ── */
body[data-theme="milestone"] .badge.high {
  background: transparent;
  color: #E8735A;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 13px;
  padding: 0;
}

/* ── Cleaner topbar ── */
body[data-theme="milestone"] .topbar {
  border-bottom: none;
  padding-bottom: 8px;
}

body[data-theme="milestone"] .eyebrow {
  background: rgba(244, 162, 107, 0.12);
  color: #E8735A;
  display: inline-block;
  padding: 4px 12px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
}

/* ── Brand Logo Image ── */
.brand-logo {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  object-fit: contain;
  flex-shrink: 0;
}

body[data-theme="milestone"] .brand-logo {
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(244, 162, 107, 0.15);
}

/* ═══════════════════════════════════════
   VIEW TRANSITION ANIMATIONS
   ═══════════════════════════════════════ */

@keyframes viewSlideIn {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes viewChildFadeIn {
  from {
    opacity: 0;
    transform: translateY(15px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Main view entrance */
.view.active.view-enter {
  animation: viewSlideIn 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) both;
}

/* Staggered children — metric cards */
.view.active.view-enter .metric-card {
  opacity: 0;
  animation: viewChildFadeIn 0.3s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
.view.active.view-enter .metric-card:nth-child(1) { animation-delay: 0.06s; }
.view.active.view-enter .metric-card:nth-child(2) { animation-delay: 0.12s; }
.view.active.view-enter .metric-card:nth-child(3) { animation-delay: 0.18s; }
.view.active.view-enter .metric-card:nth-child(4) { animation-delay: 0.24s; }

/* Staggered children — panels */
.view.active.view-enter .panel {
  opacity: 0;
  animation: viewChildFadeIn 0.35s cubic-bezier(0.22, 0.61, 0.36, 1) both;
  animation-delay: 0.15s;
}

.view.active.view-enter .split-layout .panel:nth-child(2) {
  animation-delay: 0.22s;
}

/* Staggered children — goal cards */
.view.active.view-enter .goal-card {
  opacity: 0;
  animation: viewChildFadeIn 0.3s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
.view.active.view-enter .goal-card:nth-child(1) { animation-delay: 0.08s; }
.view.active.view-enter .goal-card:nth-child(2) { animation-delay: 0.14s; }
.view.active.view-enter .goal-card:nth-child(3) { animation-delay: 0.20s; }
.view.active.view-enter .goal-card:nth-child(4) { animation-delay: 0.26s; }
.view.active.view-enter .goal-card:nth-child(5) { animation-delay: 0.32s; }
.view.active.view-enter .goal-card:nth-child(n+6) { animation-delay: 0.36s; }

/* Staggered children — toolbar & filter pills & admin actions */
.view.active.view-enter .toolbar,
.view.active.view-enter .filter-pills,
.view.active.view-enter .admin-actions {
  opacity: 0;
  animation: viewChildFadeIn 0.3s cubic-bezier(0.22, 0.61, 0.36, 1) both;
  animation-delay: 0.05s;
}

/* Calendar hero */
.view.active.view-enter .calendar-hero {
  opacity: 0;
  animation: viewChildFadeIn 0.35s cubic-bezier(0.22, 0.61, 0.36, 1) both;
  animation-delay: 0.08s;
}

.view.active.view-enter .calendar-board-card {
  opacity: 0;
  animation: viewChildFadeIn 0.4s cubic-bezier(0.22, 0.61, 0.36, 1) both;
  animation-delay: 0.18s;
}

/* Topbar title animation */
.view.active.view-enter ~ .topbar,
.view-enter .topbar {
  animation: viewChildFadeIn 0.3s ease both;
}

/* Respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .view.active.view-enter,
  .view.active.view-enter .metric-card,
  .view.active.view-enter .panel,
  .view.active.view-enter .goal-card,
  .view.active.view-enter .toolbar,
  .view.active.view-enter .filter-pills,
  .view.active.view-enter .calendar-hero,
  .view.active.view-enter .calendar-board-card {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* ═══════════════════════════════════════
   SETTINGS DRAWER
   ═══════════════════════════════════════ */

.sidebar-spacer {
  flex: 1;
}

/* Settings button at bottom of sidebar */
.sidebar-settings-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--line, #EDEDED);
  border-radius: 8px;
  background: transparent;
  color: var(--muted, #5A5A5A);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.sidebar-settings-btn svg {
  flex-shrink: 0;
  opacity: 0.6;
}

.sidebar-settings-btn:hover {
  background: rgba(244, 162, 107, 0.08);
  color: var(--ink, #1C1C1E);
  border-color: rgba(244, 162, 107, 0.3);
}

/* Overlay */
.settings-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.25);
  z-index: 999;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.settings-overlay.visible {
  opacity: 1;
}

/* Drawer */
.settings-drawer {
  position: fixed;
  top: 0;
  left: 0;
  width: 320px;
  height: 100vh;
  background: #FFFFFF;
  border-right: 1px solid #EDEDED;
  box-shadow: 8px 0 32px rgba(0, 0, 0, 0.08);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  transform: translateX(-100%);
  transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
  overflow-y: auto;
}

.settings-drawer.open {
  transform: translateX(0);
}

.settings-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 20px 16px;
  border-bottom: 1px solid #EDEDED;
}

.settings-drawer-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: #1C1C1E;
}

.settings-close-btn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #EDEDED;
  border-radius: 8px;
  background: #FFFFFF;
  color: #5A5A5A;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.settings-close-btn:hover {
  background: #FAF8F5;
  color: #1C1C1E;
}

.settings-drawer-body {
  padding: 20px;
  flex: 1;
}

.settings-section {
  margin-bottom: 28px;
}

.settings-section h4 {
  margin: 0 0 6px;
  font-size: 13px;
  font-weight: 700;
  color: #1C1C1E;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.settings-hint {
  margin: 0 0 12px;
  font-size: 12px;
  color: #999;
}

/* Module reorder list */
.module-reorder-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.module-reorder-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid #EDEDED;
  border-radius: 8px;
  background: #FFFFFF;
  font-size: 14px;
  font-weight: 500;
  color: #1C1C1E;
  transition: background 0.15s ease;
}

.module-reorder-item:hover {
  background: #FFF9F5;
}

.module-reorder-item .module-label {
  flex: 1;
}

.module-arrows {
  display: flex;
  gap: 4px;
}

.arrow-btn {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #EDEDED;
  border-radius: 6px;
  background: #FFFFFF;
  color: #5A5A5A;
  font-size: 10px;
  cursor: pointer;
  transition: all 0.15s ease;
  padding: 0;
}

.arrow-btn:hover:not(:disabled) {
  background: #F4A26B;
  color: #FFFFFF;
  border-color: #F4A26B;
}

.arrow-btn:disabled {
  opacity: 0.25;
  cursor: default;
}

.settings-select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #EDEDED;
  border-radius: 8px;
  background: #FFFFFF;
  font-size: 14px;
  color: #1C1C1E;
  cursor: pointer;
}

.settings-drawer-footer {
  padding: 16px 20px;
  border-top: 1px solid #EDEDED;
  position: sticky;
  bottom: 0;
  background: #FFFFFF;
}

.settings-save-btn {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 8px;
  background: #F4A26B;
  color: #FFFFFF;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s ease;
}

.settings-save-btn:hover {
  background: #E8735A;
}

/* ═══════════════════════════════════════
   KNOWLEDGE BASE MODULE
═══════════════════════════════════════ */

.knowledge-upload-form { padding: 0 4px; }

.knowledge-upload-dropzone {
  border: 2px dashed #EDEDED;
  border-radius: 12px;
  padding: 32px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s ease;
  background: #FAFAFA;
  margin-bottom: 16px;
}

.knowledge-upload-dropzone.drag-over { border-color: #F4A26B; background: #FFF9F5; }
.knowledge-upload-dropzone.has-file  { border-color: #F4A26B; border-style: solid; background: #FFF9F5; }

.dropzone-inner {
  display: flex; flex-direction: column; align-items: center;
  gap: 8px; color: #8A8A8E;
}
.dropzone-inner svg { color: #CBCBCB; }
.dropzone-hint { font-size: 12px; color: #CBCBCB; }

.upload-link { color: #F4A26B; cursor: pointer; text-decoration: underline; font-weight: 600; }

.knowledge-meta-form { margin-bottom: 12px; }

.knowledge-action-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding-top: 8px;
}

.upload-status   { font-size: 13px; color: #5A5A5A; flex: 1; }
.upload-status.success { color: #4CAF50; }
.upload-status.error   { color: #E8735A; }
.upload-status.info    { color: #F4A26B; font-weight: 600; }
.upload-status.loading { color: #5A8DEE; }

.ai-key-status { font-size: 13px; color: #8A8A8E; flex: 1; }

.ai-settings-body {
  padding: 16px 0 0; border-top: 1px solid #EDEDED; margin-top: 8px;
}

.knowledge-doc-list { display: flex; flex-direction: column; gap: 8px; }

.knowledge-doc-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; border: 1px solid #EDEDED; border-radius: 10px;
  background: #FAFAFA; transition: background 0.15s ease; gap: 12px;
}
.knowledge-doc-item:hover { background: #FFF9F5; border-color: rgba(244,162,107,0.3); }

.doc-info { display: flex; align-items: flex-start; gap: 12px; flex: 1; min-width: 0; }
.doc-icon  { font-size: 20px; line-height: 1; flex-shrink: 0; }
.doc-info > div { min-width: 0; }
.doc-info strong { display: block; font-size: 14px; font-weight: 600; color: #1C1C1E; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.doc-meta { display: block; font-size: 12px; color: #8A8A8E; margin-top: 2px; }

.doc-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.doc-tag  { display: inline-block; padding: 2px 8px; background: rgba(244,162,107,0.12); color: #E8735A; border-radius: 20px; font-size: 11px; font-weight: 600; }
.category-badge { background: #E8735A; color: #FFF; font-weight: 700; }

.small-btn { padding: 6px 12px; font-size: 12px; white-space: nowrap; }

/* ═══════════════════════════════════════
   PROBLEMS MODULE
═══════════════════════════════════════ */

.problem-form { padding: 4px; }
.problems-filter-row { display: flex; align-items: center; gap: 8px; }
.problems-list { display: flex; flex-direction: column; gap: 12px; }

.problem-card {
  border: 1px solid #EDEDED; border-radius: 12px; padding: 18px 20px;
  background: #FFFFFF; transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
.problem-card:hover { border-color: rgba(244,162,107,0.3); box-shadow: 0 4px 16px rgba(0,0,0,0.06); }

.problem-card-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 10px; }
.problem-card-title  { display: flex; align-items: center; gap: 10px; }

.problem-status-badge { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; white-space: nowrap; }
.problem-card-title strong { font-size: 15px; color: #1C1C1E; }
.problem-goal-ref { font-size: 12px; color: #8A8A8E; white-space: nowrap; flex-shrink: 0; }
.problem-desc { font-size: 14px; color: #4A4A4E; line-height: 1.6; margin: 0 0 14px; }

.ai-suggestion-box {
  background: linear-gradient(135deg, #FFF5EE, #FFF9F5);
  border: 1px solid rgba(244,162,107,0.3);
  border-radius: 10px; padding: 14px 16px; margin-bottom: 14px;
}
.ai-suggestion-header {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
  color: #E8735A; margin-bottom: 10px;
}
.ai-suggestion-body { font-size: 14px; color: #2C2C2E; line-height: 1.7; }

.problem-card-footer { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-top: 12px; border-top: 1px solid #F5F5F5; }
.problem-date { font-size: 12px; color: #AEAEB2; }
.problem-actions { display: flex; gap: 8px; align-items: center; }

.solve-btn {
  background: linear-gradient(135deg, #F4A26B, #E8735A);
  border: none; font-size: 13px; padding: 8px 16px;
}
.solve-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #E8735A, #D4563C);
  transform: translateY(-1px); box-shadow: 0 4px 12px rgba(232,115,90,0.3);
}
.solve-btn:disabled { opacity: 0.6; cursor: wait; }
.empty-state.error { color: #E8735A; }

/* ═══════════════════════════════════════
   MOBILE NAVIGATION (hamburger / off-canvas)
   ═══════════════════════════════════════ */
.mobile-nav-toggle { display: none; }
.topbar-left { display: flex; align-items: center; gap: 12px; min-width: 0; }
.sidebar-overlay { display: none; }

@media (max-width: 1080px) {
  /* show the hamburger button */
  .mobile-nav-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; flex: 0 0 auto; padding: 0;
    border: 1px solid var(--line); border-radius: 12px;
    background: var(--surface); color: inherit; cursor: pointer;
  }
  .mobile-nav-toggle:active { transform: scale(0.95); }

  /* sidebar becomes an off-canvas drawer */
  .sidebar {
    position: fixed; top: 0; left: 0; bottom: 0;
    width: min(84vw, 300px);
    z-index: 1300;
    transform: translateX(-100%);
    transition: transform .28s ease;
    border-right: 1px solid var(--line); border-bottom: 0;
    overflow-y: auto;
    gap: 18px;
    box-shadow: 2px 0 30px rgba(0,0,0,.22);
  }
  .app-shell.nav-open .sidebar { transform: translateX(0); }

  /* clean vertical menu inside the drawer */
  .nav-tabs { display: grid; grid-template-columns: 1fr; }
  .nav-tab { text-align: left; }

  /* dimmed overlay behind the drawer */
  .sidebar-overlay {
    display: block; position: fixed; inset: 0; z-index: 1250;
    background: rgba(0,0,0,.45);
    opacity: 0; pointer-events: none; transition: opacity .25s ease;
  }
  .app-shell.nav-open .sidebar-overlay { opacity: 1; pointer-events: auto; }

  /* lock background scroll while the drawer is open */
  body.nav-locked { overflow: hidden; }
}