:root {
  color-scheme: light;
  --bg: #ffffff;
  --surface: #ffffff;
  --surface-raised: #ffffff;
  --soft: #f3f5f7;
  --ink: #202124;
  --muted: #69717c;
  --line: #dfe3e8;
  --accent: #ff315f;
  --accent-soft: #fff0f4;
  --green: #2f9e65;
  --green-soft: #eaf8f0;
  --blue: #315a9f;
  --blue-soft: #edf4ff;
  --orange: #a46412;
  --orange-soft: #fff4e5;
  --shadow: 0 8px 24px rgba(29, 35, 43, 0.06);
  --radius: 8px;
  --chart-hole: #ffffff;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #101214;
  --surface: #171a1f;
  --surface-raised: #20242b;
  --soft: #242931;
  --ink: #f2f4f7;
  --muted: #a4acb7;
  --line: #343a44;
  --accent: #ff4a70;
  --accent-soft: rgba(255, 74, 112, 0.16);
  --green: #63d694;
  --green-soft: rgba(99, 214, 148, 0.16);
  --blue: #8fb7f1;
  --blue-soft: rgba(143, 183, 241, 0.18);
  --orange: #f7b45d;
  --orange-soft: rgba(247, 180, 93, 0.16);
  --shadow: 0 12px 34px rgba(0, 0, 0, 0.28);
  --chart-hole: #20242b;
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  background: var(--bg);
  color: var(--ink);
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: 0;
}

body {
  min-height: 100vh;
  margin: 0;
}

button,
input,
select {
  font: inherit;
}

button {
  cursor: pointer;
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.58;
}

.app-shell {
  width: min(1600px, 100vw);
  margin: 0 auto;
  background: var(--bg);
}

.topbar {
  display: grid;
  grid-template-columns: minmax(170px, 230px) 1fr minmax(170px, 230px);
  gap: 22px;
  align-items: center;
  height: 76px;
  padding: 0 34px;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 92%, transparent);
}

.topbar-actions {
  display: flex;
  align-items: center;
  justify-content: end;
  gap: 12px;
}

.theme-toggle {
  position: relative;
  width: 92px;
  height: 34px;
  padding: 0 12px 0 34px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-raised);
  color: var(--ink);
  font-size: 0.78rem;
  font-weight: 850;
  text-align: left;
}

.theme-toggle::before {
  position: absolute;
  left: 9px;
  top: 50%;
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  border-radius: 50%;
  content: "";
  transform: translateY(-50%);
}

:root[data-theme="dark"] .theme-toggle::before {
  background: currentColor;
  box-shadow: -5px 0 0 1px var(--surface-raised);
}

.media-logo {
  width: 178px;
  max-height: 40px;
}

.loreal-logo {
  justify-self: end;
  width: 180px;
  max-height: 42px;
  object-fit: contain;
}

.title-block strong {
  display: block;
  text-align: center;
  font-size: clamp(1.35rem, 2vw, 1.8rem);
  line-height: 1.1;
}

.title-block strong span {
  display: inline;
  margin-top: 0;
  color: var(--accent);
  font: inherit;
  text-align: inherit;
}

.title-block span {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: 0.9rem;
  text-align: center;
}

.dashboard-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 410px;
  gap: 0;
  transition: grid-template-columns 220ms ease;
}

.app-shell.is-assistant-minimized .dashboard-layout {
  grid-template-columns: minmax(0, 1fr);
}

.app-shell.is-assistant-minimized .workspace {
  padding-right: 34px;
}

.workspace {
  min-width: 0;
  padding: 30px 20px 32px 34px;
}

.global-metrics {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(188px, 220px);
  gap: 12px;
}

.global-metrics article,
.month-overview,
.control-bar,
.project-table,
.assistant-panel {
  border: 1px solid var(--line);
  background: var(--surface);
}

.global-metrics article {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 76px;
  padding: 16px;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.global-metrics .mode-card {
  justify-content: space-between;
}

.mode-card strong {
  margin-top: 2px;
}

.mode-switch {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  align-items: center;
  width: 76px;
  height: 38px;
  padding: 4px;
  border: 1px solid #202124;
  border-radius: 12px;
  background: #202124;
  color: #f6f7f9;
}

.theme-icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 30px;
  height: 28px;
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.76);
}

.theme-icon.sun::before {
  width: 16px;
  height: 16px;
  background: currentColor;
  content: "";
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cpath d='M320 32C328.4 32 336.3 36.4 340.6 43.7L396.1 136.3L500.9 110C509.1 108 517.8 110.4 523.7 116.3C529.6 122.2 532 131 530 139.1L503.7 243.8L596.4 299.3C603.6 303.6 608.1 311.5 608.1 319.9C608.1 328.3 603.7 336.2 596.4 340.5L503.7 396.1L530 500.8C532 509 529.6 517.7 523.7 523.6C517.8 529.5 509 532 500.9 530L396.2 503.7L340.7 596.4C336.4 603.6 328.5 608.1 320.1 608.1C311.7 608.1 303.8 603.7 299.5 596.4L243.9 503.7L139.2 530C131 532 122.4 529.6 116.4 523.7C110.4 517.8 108 509 110 500.8L136.2 396.1L43.6 340.6C36.4 336.2 32 328.4 32 320C32 311.6 36.4 303.7 43.7 299.4L136.3 243.9L110 139.1C108 130.9 110.3 122.3 116.3 116.3C122.3 110.3 131 108 139.2 110L243.9 136.2L299.4 43.6L301.2 41C305.7 35.3 312.6 31.9 320 31.9zM320 176C240.5 176 176 240.5 176 320C176 399.5 240.5 464 320 464C399.5 464 464 399.5 464 320C464 240.5 399.5 176 320 176zM320 416C267 416 224 373 224 320C224 267 267 224 320 224C373 224 416 267 416 320C416 373 373 416 320 416z'/%3E%3C/svg%3E") center / contain no-repeat;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cpath d='M320 32C328.4 32 336.3 36.4 340.6 43.7L396.1 136.3L500.9 110C509.1 108 517.8 110.4 523.7 116.3C529.6 122.2 532 131 530 139.1L503.7 243.8L596.4 299.3C603.6 303.6 608.1 311.5 608.1 319.9C608.1 328.3 603.7 336.2 596.4 340.5L503.7 396.1L530 500.8C532 509 529.6 517.7 523.7 523.6C517.8 529.5 509 532 500.9 530L396.2 503.7L340.7 596.4C336.4 603.6 328.5 608.1 320.1 608.1C311.7 608.1 303.8 603.7 299.5 596.4L243.9 503.7L139.2 530C131 532 122.4 529.6 116.4 523.7C110.4 517.8 108 509 110 500.8L136.2 396.1L43.6 340.6C36.4 336.2 32 328.4 32 320C32 311.6 36.4 303.7 43.7 299.4L136.3 243.9L110 139.1C108 130.9 110.3 122.3 116.3 116.3C122.3 110.3 131 108 139.2 110L243.9 136.2L299.4 43.6L301.2 41C305.7 35.3 312.6 31.9 320 31.9zM320 176C240.5 176 176 240.5 176 320C176 399.5 240.5 464 320 464C399.5 464 464 399.5 464 320C464 240.5 399.5 176 320 176zM320 416C267 416 224 373 224 320C224 267 267 224 320 224C373 224 416 267 416 320C416 373 373 416 320 416z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.theme-icon.sun::after {
  content: none;
}

.theme-icon.moon::before {
  width: 16px;
  height: 16px;
  background: currentColor;
  content: "";
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cpath d='M320 64C178.6 64 64 178.6 64 320C64 461.4 178.6 576 320 576C388.8 576 451.3 548.8 497.3 504.6C504.6 497.6 506.7 486.7 502.6 477.5C498.5 468.3 488.9 462.6 478.8 463.4C473.9 463.8 469 464 464 464C362.4 464 280 381.6 280 280C280 207.9 321.5 145.4 382.1 115.2C391.2 110.7 396.4 100.9 395.2 90.8C394 80.7 386.6 72.5 376.7 70.3C358.4 66.2 339.4 64 320 64z'/%3E%3C/svg%3E") center / contain no-repeat;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cpath d='M320 64C178.6 64 64 178.6 64 320C64 461.4 178.6 576 320 576C388.8 576 451.3 548.8 497.3 504.6C504.6 497.6 506.7 486.7 502.6 477.5C498.5 468.3 488.9 462.6 478.8 463.4C473.9 463.8 469 464 464 464C362.4 464 280 381.6 280 280C280 207.9 321.5 145.4 382.1 115.2C391.2 110.7 396.4 100.9 395.2 90.8C394 80.7 386.6 72.5 376.7 70.3C358.4 66.2 339.4 64 320 64z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.theme-icon.moon::after {
  content: none;
}

:root:not([data-theme="dark"]) .theme-icon.sun,
:root[data-theme="dark"] .theme-icon.moon {
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
}

.metric-glyph {
  position: relative;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: var(--radius);
  background: var(--accent-soft);
}

.metric-glyph::after {
  position: absolute;
  inset: 9px;
  border: 2px solid var(--accent);
  border-radius: 4px;
  content: "";
}

.metric-glyph.clock {
  background: #f4f6f8;
}

.metric-glyph.clock::after {
  border-color: #7a828d;
  border-radius: 50%;
}

.metric-glyph.sparkle::after {
  width: 12px;
  height: 12px;
  inset: 10px;
  transform: rotate(45deg);
}

.global-metrics strong {
  display: block;
  font-size: 1.45rem;
  line-height: 1;
}

.global-metrics small,
.month-overview span,
.project-row span,
.project-row small,
.assistant-panel span {
  color: var(--muted);
}

.month-strip {
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  gap: 10px;
  align-items: center;
  margin-top: 18px;
}

.mobile-month-picker,
.mobile-action-rail,
.mobile-assistant-fab,
.mobile-brand-footer {
  display: none;
}

.month-strip > button {
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--surface);
  color: var(--ink);
  font-size: 1.8rem;
  line-height: 1;
}

.month-tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  box-shadow: var(--shadow);
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.month-tabs::-webkit-scrollbar {
  display: none;
}

.month-tabs a {
  flex: 0 0 clamp(154px, 15.2vw, 188px);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 44px;
  border-radius: 999px;
  color: var(--ink);
  font-weight: 850;
  text-decoration: none;
  scroll-snap-align: center;
}

.month-tabs a.is-active {
  background: #242424;
  color: #fff;
}

.month-tabs span {
  min-width: 34px;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 0.8rem;
  text-align: center;
}

.month-tabs a.is-active span {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
}

.month-overview {
  display: grid;
  grid-template-columns: repeat(5, minmax(88px, 1fr)) minmax(188px, 1.2fr);
  gap: 12px;
  margin-top: 18px;
  padding: 12px;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.kpi-card,
.chart-card {
  min-height: 142px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.kpi-card small,
.chart-card span {
  display: none;
  color: var(--ink);
  font-weight: 850;
}

.kpi-card strong {
  display: block;
  margin: 28px 0 8px;
  color: var(--ink);
  font-size: 1.85rem;
  font-weight: 850;
  line-height: 1;
}

.kpi-card.total {
  background: rgba(192, 199, 207, 0.5);
  border-color: #c0c7cf;
  color: var(--ink);
}

.kpi-card.approved {
  background: rgba(99, 214, 148, 0.5);
  border-color: #63d694;
  color: var(--ink);
}

.kpi-card.rate {
  background: rgba(245, 150, 56, 0.32);
  border-color: #f59638;
  color: var(--ink);
}

.kpi-card.opera {
  background: rgba(184, 210, 242, 0.5);
  border-color: #b8d2f2;
  color: var(--ink);
}

.kpi-card.review {
  background: rgba(255, 56, 92, 0.5);
  border-color: var(--accent);
  color: var(--ink);
}

.kpi-card span {
  color: var(--ink);
  font-size: 0.84rem;
  font-weight: 800;
  line-height: 1.15;
}

.chart-card {
  display: grid;
  gap: 8px;
  padding: 12px;
}

.chart-card button {
  position: relative;
  min-height: 34px;
  padding: 8px 34px 8px 12px;
  border: 1px solid #d8dde3;
  border-radius: 8px;
  background: #fff;
  color: #4f565e;
  font-size: 0.72rem;
  font-weight: 900;
  line-height: 1.1;
  text-align: left;
  transition:
    background 160ms ease,
    border-color 160ms ease,
    color 160ms ease,
    transform 160ms ease;
}

.chart-card button::before {
  display: none;
}

.chart-card button::after {
  position: absolute;
  right: 13px;
  top: 50%;
  width: 7px;
  height: 7px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  content: "";
  transform: translateY(-50%) rotate(45deg);
}

.chart-card button:hover {
  background: #f3f5f7;
  border-color: #bfc6cf;
  color: var(--ink);
  transform: translateY(-1px);
}

.chart-card button:focus-visible {
  outline: 3px solid rgba(255, 49, 95, 0.28);
  outline-offset: 2px;
}

.control-bar {
  display: grid;
  grid-template-columns: minmax(220px, 1.35fr) repeat(4, minmax(118px, 0.68fr)) auto;
  gap: 12px;
  align-items: end;
  margin-top: 18px;
  padding: 14px;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

label span {
  display: block;
  margin-bottom: 7px;
  color: var(--ink);
  font-size: 0.78rem;
  font-weight: 850;
}

input,
select {
  width: 100%;
  height: 42px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  color: var(--ink);
  padding: 0 12px;
  outline: none;
}

input:focus,
select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(255, 49, 95, 0.14);
}

.clear-button {
  height: 42px;
  min-width: 138px;
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  background: var(--accent);
  color: #fff;
  font-weight: 850;
}

.project-table {
  margin-top: 18px;
  overflow: hidden;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.table-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 18px 14px;
  border-bottom: 1px solid var(--accent);
  background: var(--accent);
  color: #fff;
}

.table-header h2 {
  margin: 0 0 4px;
  font-size: 1.25rem;
}

.table-header span {
  color: rgba(255, 255, 255, 0.88);
}

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

.view-actions button,
.edit-action,
.expand-action,
.assistant-input button {
  height: 38px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  color: var(--ink);
  font-weight: 850;
}

.view-actions button {
  padding: 0 12px;
  border-color: rgba(255, 255, 255, 0.96);
  background: #fff;
  color: var(--accent);
}

.view-actions button:hover {
  background: #fff5f8;
}

.rows {
  display: grid;
}

.project-list {
  display: grid;
  gap: 3px;
  background: var(--line);
}

.project-item {
  background: #fff;
}

.project-head,
.project-row {
  display: grid;
  grid-template-columns: 78px minmax(170px, 1.35fr) minmax(92px, 0.58fr) minmax(120px, 0.76fr) 132px 84px 132px;
  gap: 10px;
  align-items: center;
}

.project-head {
  min-height: 42px;
  padding: 0 18px;
  border-bottom: 1px solid var(--line);
  background: #fafafa;
  color: #34373c;
  font-size: 0.78rem;
  font-weight: 900;
}

.project-row {
  min-height: 78px;
  padding: 12px 18px;
  transition: background 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.project-row:hover {
  background: #fff7f9;
}

.project-row:active {
  transform: translateY(1px);
}

.project-row.is-focus {
  background: #fbfbfc;
  box-shadow: inset 3px 0 0 var(--accent);
}

.project-item.is-open .project-row {
  background: #fbfbfc;
  box-shadow: inset 3px 0 0 var(--accent);
}

.brand-logo-cell {
  position: relative;
  display: block;
  width: 68px;
  height: 46px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
}

.brand-logo-cell img {
  position: absolute;
  inset: 0;
  width: 68px;
  height: 46px;
  object-fit: contain;
  padding: 8px;
  z-index: 1;
}

.brand-logo-cell > span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

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

.project-row strong {
  font-size: 0.96rem;
}

.date-cell {
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 750;
}

.project-row small {
  margin-bottom: 3px;
  font-size: 0.74rem;
  font-weight: 850;
}

.status-pill {
  width: fit-content;
  padding: 7px 10px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 900;
}

.status-pill.approved {
  background: var(--green-soft);
  color: var(--green);
}

.status-pill.review {
  background: var(--accent-soft);
  color: var(--accent);
}

.status-pill.observation {
  background: var(--orange-soft);
  color: var(--orange);
}

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

.edit-action,
.expand-action {
  height: 38px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  color: var(--ink);
  font-weight: 900;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease;
}

.edit-action {
  position: relative;
  width: 38px;
  padding: 0;
}

.edit-action::before {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 18px;
  height: 18px;
  background: currentColor;
  content: "";
  transform: translate(-50%, -50%);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cpath d='M128.1 64C92.8 64 64.1 92.7 64.1 128L64.1 512C64.1 547.3 92.8 576 128.1 576L274.3 576L285.2 521.5C289.5 499.8 300.2 479.9 315.8 464.3L448 332.1L448 234.6C448 217.6 441.3 201.3 429.3 189.3L322.8 82.7C310.8 70.7 294.5 64 277.6 64L128.1 64zM389.6 240L296.1 240C282.8 240 272.1 229.3 272.1 216L272.1 122.5L389.6 240zM332.3 530.9L320.4 590.5C320.2 591.4 320.1 592.4 320.1 593.4C320.1 601.4 326.6 608 334.7 608C335.7 608 336.6 607.9 337.6 607.7L397.2 595.8C409.6 593.3 421 587.2 429.9 578.3L548.8 459.4L468.8 379.4L349.9 498.3C341 507.2 334.9 518.6 332.4 531zM600.1 407.9C622.2 385.8 622.2 350 600.1 327.9C578 305.8 542.2 305.8 520.1 327.9L491.3 356.7L571.3 436.7L600.1 407.9z'/%3E%3C/svg%3E") center / contain no-repeat;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cpath d='M128.1 64C92.8 64 64.1 92.7 64.1 128L64.1 512C64.1 547.3 92.8 576 128.1 576L274.3 576L285.2 521.5C289.5 499.8 300.2 479.9 315.8 464.3L448 332.1L448 234.6C448 217.6 441.3 201.3 429.3 189.3L322.8 82.7C310.8 70.7 294.5 64 277.6 64L128.1 64zM389.6 240L296.1 240C282.8 240 272.1 229.3 272.1 216L272.1 122.5L389.6 240zM332.3 530.9L320.4 590.5C320.2 591.4 320.1 592.4 320.1 593.4C320.1 601.4 326.6 608 334.7 608C335.7 608 336.6 607.9 337.6 607.7L397.2 595.8C409.6 593.3 421 587.2 429.9 578.3L548.8 459.4L468.8 379.4L349.9 498.3C341 507.2 334.9 518.6 332.4 531zM600.1 407.9C622.2 385.8 622.2 350 600.1 327.9C578 305.8 542.2 305.8 520.1 327.9L491.3 356.7L571.3 436.7L600.1 407.9z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.edit-action::after {
  content: none;
}

.expand-action {
  width: 38px;
  padding: 0;
  font-size: 1.35rem;
  line-height: 1;
}

.edit-action:hover,
.expand-action:hover {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
}

.edit-action:active,
.expand-action:active {
  transform: translateY(1px);
}

.project-item.is-open .expand-action {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
}

.project-detail {
  display: none;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  padding: 0 18px 18px 106px;
}

.project-item.is-open .project-detail {
  display: grid;
}

.detail-tile {
  min-width: 0;
  min-height: 70px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #f7f8fa;
}

.detail-tile small,
.detail-tile strong {
  display: block;
}

.detail-tile small {
  margin-bottom: 6px;
  color: var(--ink);
  font-size: 0.76rem;
  font-weight: 900;
}

.detail-tile strong {
  color: #3f454d;
  font-size: 0.9rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.detail-tile a {
  color: var(--ink);
  overflow-wrap: anywhere;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.links-grid {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.link-group {
  min-height: 68px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
}

.link-group strong {
  display: block;
  margin-bottom: 7px;
  font-size: 0.78rem;
}

.link-group div {
  display: grid;
  gap: 6px;
}

.link-group a {
  color: var(--ink);
  font-weight: 800;
  overflow-wrap: anywhere;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.link-group a:hover {
  color: var(--accent);
}

.link-group .empty {
  color: var(--muted);
  font-weight: 750;
}

.empty-row {
  padding: 36px 18px;
  color: var(--muted);
  text-align: center;
  font-weight: 800;
}

.loading-state {
  display: grid;
  justify-items: center;
  min-height: 220px;
  padding: 32px 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  color: var(--muted);
  text-align: center;
}

.loading-state strong {
  margin-top: 16px;
  color: var(--ink);
  font-size: 1.05rem;
}

.loading-state p {
  margin: 6px 0 0;
  font-size: 0.9rem;
}

.loading-spinner {
  display: block;
  width: 44px;
  height: 44px;
  border: 4px solid var(--accent-soft);
  border-top-color: var(--accent);
  border-radius: 999px;
  animation: spin 900ms linear infinite;
}

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

.table-footer {
  display: grid;
  grid-template-columns: 1fr auto 130px;
  gap: 16px;
  align-items: center;
  min-height: 58px;
  padding: 0 18px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.86rem;
}

.pager {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pager button,
.table-footer > button {
  height: 36px;
  min-width: 36px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: transparent;
  color: var(--ink);
  font-weight: 850;
}

.pager .is-current {
  background: var(--ink);
  color: #fff;
}

.page-size-chip {
  pointer-events: none;
}

.table-footer > button {
  border-color: var(--line);
  background: #fff;
}

.assistant-panel {
  position: sticky;
  top: 30px;
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  min-width: 0;
  height: var(--assistant-panel-height, fit-content);
  max-height: none;
  min-height: 0;
  overflow: hidden;
  margin: 30px 22px 32px 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: none;
}

.assistant-panel header {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 22px 18px;
  min-width: 0;
}

.assistant-panel.is-detached {
  position: fixed;
  top: 104px;
  right: 24px;
  z-index: 40;
  width: min(410px, calc(100vw - 48px));
  height: min(760px, calc(100dvh - 128px));
  min-height: 0;
  margin: 0;
  grid-template-rows: auto auto 1fr auto auto;
  border: 1px solid var(--line);
  overflow: hidden;
  box-shadow: 0 24px 80px rgba(17, 24, 39, 0.18);
}

.assistant-panel.is-minimized {
  position: fixed;
  right: 24px;
  bottom: 24px;
  top: auto;
  z-index: 45;
  width: 310px;
  height: auto;
  min-height: 0;
  margin: 0;
  grid-template-rows: auto;
  border: 1px solid var(--line);
  overflow: hidden;
  box-shadow: 0 18px 55px rgba(17, 24, 39, 0.18);
}

.assistant-panel.is-minimized .assistant-meta,
.assistant-panel.is-minimized .conversation,
.assistant-panel.is-minimized .assistant-input {
  display: none;
}

.assistant-panel.is-minimized header {
  padding: 16px;
}

.assistant-panel header strong {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 1rem;
}

.assistant-mark {
  position: relative;
  display: block;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 50%;
  background: var(--accent-soft);
}

.assistant-mark::before {
  position: absolute;
  top: 13px;
  left: 8px;
  width: 22px;
  height: 15px;
  border: 2px solid var(--accent);
  border-radius: 7px;
  background: #fff;
  content: "";
}

.assistant-mark::after {
  position: absolute;
  top: 18px;
  left: 15px;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 8px 0 0 var(--accent);
  content: "";
  animation: assistantEyes 3.2s ease-in-out infinite;
}

.assistant-mark > span {
  position: absolute;
  top: 23px;
  left: 15px;
  width: 9px;
  height: 5px;
  border-bottom: 2px solid var(--accent);
  border-radius: 0 0 999px 999px;
}

.assistant-mark > span::before {
  position: absolute;
  top: -16px;
  left: 3px;
  width: 2px;
  height: 7px;
  border-radius: 2px;
  background: var(--accent);
  content: "";
}

@keyframes assistantEyes {
  0%,
  18%,
  24%,
  55%,
  100% {
    height: 3px;
    transform: translateX(0);
  }

  20% {
    height: 1px;
    transform: translateX(0);
  }

  38%,
  48% {
    transform: translateX(2px);
  }

  70%,
  78% {
    transform: translateX(-2px);
  }
}

.assistant-tools {
  display: flex;
  flex: 0 0 auto;
  gap: 10px;
}

.trash-button,
.logout-button,
.pin-button,
.min-button {
  position: relative;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 6px;
  background: transparent;
}

.trash-button:hover,
.logout-button:hover,
.pin-button:hover,
.min-button:hover {
  background: var(--soft);
}

.trash-button::before {
  position: absolute;
  left: 8px;
  right: 8px;
  top: 10px;
  height: 12px;
  border: 2px solid #6d737c;
  border-top: 0;
  border-radius: 0 0 3px 3px;
  content: "";
}

.trash-button::after {
  position: absolute;
  left: 7px;
  right: 7px;
  top: 7px;
  height: 2px;
  background: #6d737c;
  box-shadow: 5px -3px 0 -1px #6d737c;
  content: "";
}

.logout-button::before {
  position: absolute;
  left: 7px;
  top: 7px;
  width: 10px;
  height: 14px;
  border: 2px solid #6d737c;
  border-right: 0;
  border-radius: 3px 0 0 3px;
  content: "";
}

.logout-button::after {
  position: absolute;
  left: 13px;
  top: 9px;
  width: 9px;
  height: 9px;
  border-top: 2px solid #6d737c;
  border-right: 2px solid #6d737c;
  transform: rotate(45deg);
  content: "";
}

.assistant-panel.is-detached .pin-button {
  background: var(--accent-soft);
}

.assistant-panel.is-minimized .min-button::before {
  left: 8px;
  right: 8px;
}

.assistant-panel.is-minimized .min-button::after {
  position: absolute;
  left: 13px;
  top: 9px;
  width: 2px;
  height: 12px;
  background: #6d737c;
  content: "";
}

.pin-button::before {
  position: absolute;
  inset: 7px 11px 9px;
  border: 2px solid #6d737c;
  border-bottom: 0;
  content: "";
}

.pin-button::after {
  position: absolute;
  left: 13px;
  bottom: 5px;
  width: 2px;
  height: 9px;
  background: #6d737c;
  content: "";
}

.min-button::before {
  position: absolute;
  left: 7px;
  right: 7px;
  top: 14px;
  height: 2px;
  background: #6d737c;
  content: "";
}

.assistant-meta {
  display: grid;
  align-items: center;
  min-height: 29px;
  padding: 0;
  background: var(--accent);
  border-bottom: 0;
  min-width: 0;
}

.assistant-meta span {
  display: block;
  padding: 8px 10px;
  color: #fff;
  font-size: 0.76rem;
  font-weight: 900;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
}

.assistant-beta-note {
  display: block;
  margin: 0;
  padding: 0 4px;
  color: rgba(120, 128, 141, 0.86);
  font-size: 0.58rem;
  font-style: italic;
  font-weight: 400;
  line-height: 1.25;
  text-align: center;
  background: transparent;
  border: 0;
}

.assistant-identity-card {
  display: grid;
  gap: 10px;
}

.assistant-identity-card form {
  display: grid;
  gap: 10px;
}

.assistant-identity-card label {
  display: grid;
  gap: 5px;
  font-size: 0.76rem;
  font-weight: 900;
}

.assistant-identity-card input {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 11px 12px;
  background: var(--input-bg);
  color: var(--text);
  font: inherit;
}

.assistant-identity-card button {
  border: 0;
  border-radius: 8px;
  padding: 12px 14px;
  background: var(--accent);
  color: #fff;
  font-weight: 900;
  cursor: pointer;
}

.assistant-identity-card button:disabled {
  cursor: wait;
  opacity: 0.75;
}

.identity-error {
  color: var(--accent);
  font-weight: 900;
}

.conversation {
  display: grid;
  align-content: start;
  gap: 18px;
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
  height: 100%;
  max-height: none;
  padding: var(--conversation-top-pad, 22px) 18px 18px;
}

.bot-message,
.user-message {
  position: relative;
  min-width: 0;
  max-width: 92%;
  overflow-wrap: anywhere;
  padding: 14px;
  border-radius: var(--radius);
  font-size: 0.88rem;
  line-height: 1.42;
}

.bot-message {
  justify-self: start;
  max-width: calc(100% - 42px);
  margin-left: 42px;
  background: var(--soft);
  overflow: visible;
}

.bot-message::before {
  position: absolute;
  left: -45px;
  top: 3px;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background-color: var(--accent-soft);
  background-image: url("data:image/svg+xml,%3Csvg width='34' height='34' viewBox='0 0 34 34' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23ff315f' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 7v6'/%3E%3Crect x='8' y='13' width='18' height='14' rx='6'/%3E%3Cpath d='M14 23c1.4 1.2 4.6 1.2 6 0'/%3E%3C/g%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 34px 34px;
  content: "";
}

.bot-message::after {
  position: absolute;
  left: -31px;
  top: 20px;
  width: 3px;
  height: 3px;
  border: 0;
  border-radius: 50%;
  background:
    var(--accent);
  box-shadow: 8px 0 0 var(--accent);
  content: "";
  animation: assistantBubbleEyes 3.2s ease-in-out infinite;
}

.bot-message.is-out-of-scope::before {
  background-image: url("data:image/svg+xml,%3Csvg width='34' height='34' viewBox='0 0 34 34' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23ff315f' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 7v6'/%3E%3Crect x='8' y='13' width='18' height='14' rx='6'/%3E%3Cpath d='M13 18l3 2M21 18l-3 2M14 24c1.6-1.2 4.4-1.2 6 0'/%3E%3C/g%3E%3C/svg%3E");
  animation: assistantAngryJump 620ms ease-in-out infinite;
}

.bot-message.is-out-of-scope::after {
  display: none;
}

@keyframes assistantAngryJump {
  0%,
  100% {
    transform: translateY(0) rotate(0deg);
  }

  35% {
    transform: translateY(-8px) rotate(-6deg);
  }

  70% {
    transform: translateY(0) rotate(5deg);
  }
}

@keyframes assistantBubbleEyes {
  0%,
  18%,
  24%,
  55%,
  100% {
    height: 3px;
    transform: translateX(0);
  }

  20% {
    height: 1px;
    transform: translateX(0);
  }

  38%,
  48% {
    transform: translateX(2px);
  }

  70%,
  78% {
    transform: translateX(-2px);
  }
}

.user-message {
  justify-self: end;
  max-width: 88%;
  background: var(--accent);
  color: #fff;
}

.user-message.is-soft {
  background: linear-gradient(135deg, #ffdce5, #f8bdcc);
  color: var(--ink);
}

.bot-message p,
.user-message p {
  margin: 0;
}

.bot-message p + p,
.user-message p + p {
  margin-top: 8px;
}

.bot-message table {
  display: table;
  width: 100%;
  max-width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  font-size: 0.72rem;
  overflow: visible;
  white-space: normal;
}

.bot-message th,
.bot-message td {
  min-width: 0;
  padding: 8px 6px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.bot-message th {
  background: #f7f8fa;
  font-weight: 900;
}

.bot-message thead,
.bot-message tbody,
.bot-message tr {
  width: 100%;
}

.bot-message ul,
.bot-message ol {
  margin: 8px 0 0;
  padding-left: 18px;
}

.bot-message li + li {
  margin-top: 6px;
}

.bot-message time,
.user-message time {
  display: block;
  margin-top: 10px;
  color: var(--muted);
  font-size: 0.72rem;
}

.user-message time {
  color: rgba(255, 255, 255, 0.78);
  text-align: right;
}

.user-message.is-soft time {
  color: var(--muted);
}

.report {
  max-width: 100%;
  margin-left: 0;
  background: #fff;
  border: 1px solid var(--line);
}

.report::before,
.report::after {
  content: none;
}

.report-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.report-header button {
  height: 30px;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-size: 0.78rem;
  font-weight: 850;
}

.summary-table {
  width: 100%;
  border-collapse: collapse;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: 0.78rem;
}

.summary-table th,
.summary-table td {
  padding: 12px 10px;
  border-bottom: 1px solid var(--line);
  text-align: left;
}

.summary-table th {
  width: 44%;
  background: #f7f8fa;
  font-weight: 900;
}

.summary-table tr:last-child th,
.summary-table tr:last-child td {
  border-bottom: 0;
}

.feedback-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.feedback-actions button {
  height: 30px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 0.78rem;
}

.assistant-input {
  display: grid;
  grid-template-columns: 1fr;
  gap: 9px;
  padding: 14px 18px;
  border-top: 1px solid var(--line);
  min-width: 0;
  background: #fff;
}

.assistant-input label {
  min-width: 0;
}

.assistant-input span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.assistant-input button {
  justify-self: stretch;
  width: 100%;
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
}

.assistant-input input {
  width: 100%;
  min-width: 0;
  height: 58px;
  padding: 0 14px;
}

.charts-modal {
  position: fixed;
  inset: 0;
  z-index: 49;
  display: none;
  place-items: center;
  padding: 24px;
}

.charts-modal.is-open {
  display: grid;
}

.charts-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(18, 20, 23, 0.55);
  backdrop-filter: blur(4px);
}

.charts-dialog {
  position: relative;
  z-index: 1;
  width: min(600px, 100%);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 28px 80px rgba(17, 24, 39, 0.28);
}

.charts-dialog header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 20px;
  background: #202124;
  color: #fff;
}

.charts-dialog header strong,
.charts-dialog header span {
  display: block;
}

.charts-dialog header strong {
  font-size: 1.14rem;
  font-weight: 950;
}

.charts-dialog header span {
  margin-top: 4px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.86rem;
  font-weight: 750;
}

.charts-dialog header button {
  width: 42px;
  height: 42px;
  border: 1px solid rgba(255, 255, 255, 0.42);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 1.55rem;
  line-height: 1;
  box-shadow: none;
}

.charts-dialog header button:hover {
  background: rgba(255, 255, 255, 0.22);
}

.charts-dialog header button:focus-visible {
  outline: 3px solid rgba(255, 255, 255, 0.36);
  outline-offset: 2px;
}

.charts-content {
  display: grid;
  grid-template-columns: 210px 1fr;
  gap: 28px;
  align-items: center;
  padding: 28px;
}

.donut-chart {
  position: relative;
  display: grid;
  place-items: center;
  width: 190px;
  height: 190px;
  border-radius: 50%;
  background:
    radial-gradient(circle at center, var(--chart-hole) 0 44%, transparent 45%),
    conic-gradient(var(--green) 0 var(--chart-primary, 0%), var(--accent) var(--chart-primary, 0%) calc(var(--chart-primary, 0%) + var(--chart-secondary, 0%)), #c8ced6 0 100%);
}

.donut-chart strong {
  position: relative;
  z-index: 2;
  display: none;
  color: var(--ink);
  font-size: 2rem;
  font-weight: 950;
}

.donut-labels {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

.donut-labels span {
  position: absolute;
  left: 50%;
  top: 50%;
  display: grid;
  place-items: center;
  min-width: 30px;
  height: 22px;
  padding: 0 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
  color: var(--ink);
  font-size: 0.72rem;
  font-weight: 950;
  box-shadow: 0 4px 12px rgba(17, 24, 39, 0.12);
  transform: translate(calc(-50% + var(--label-x)), calc(-50% + var(--label-y)));
}

.charts-copy h2 {
  max-width: 270px;
  margin: 0 0 16px;
  color: var(--ink);
  font-size: 1.16rem;
  font-weight: 950;
  line-height: 1.08;
}

.charts-legend {
  display: grid;
  gap: 12px;
}

.legend-row {
  display: grid;
  grid-template-columns: 16px 1fr auto;
  gap: 10px;
  align-items: center;
  color: #5d636d;
  font-size: 0.88rem;
  font-weight: 850;
}

.legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--dot-color, var(--accent));
}

.legend-row strong {
  color: #6a6f78;
  font-weight: 950;
  text-align: right;
}

.demo-modal {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: none;
  place-items: center;
  padding: 24px;
}

.demo-modal.is-open {
  display: grid;
}

.demo-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(18, 20, 23, 0.55);
  backdrop-filter: blur(8px);
}

.demo-dialog {
  position: relative;
  z-index: 1;
  width: min(560px, 100%);
  overflow: hidden;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 28px 80px rgba(17, 24, 39, 0.28);
}

.demo-dialog header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 20px;
  background: #202124;
  color: #fff;
}

.demo-dialog header strong,
.demo-dialog header span {
  display: block;
}

.demo-dialog header span {
  margin-top: 4px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.86rem;
}

.demo-dialog header button {
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  font-size: 1.5rem;
  line-height: 1;
}

.demo-edit-form {
  display: grid;
  gap: 14px;
  padding: 20px;
}

.demo-edit-form textarea {
  width: 100%;
  resize: vertical;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px;
  font: inherit;
  outline: none;
}

.demo-edit-form textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(255, 49, 95, 0.14);
}

.edit-feedback {
  min-height: 20px;
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 750;
}

.edit-feedback.is-success {
  color: var(--green);
}

.edit-feedback.is-error {
  color: var(--accent);
}

.demo-edit-form footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding-top: 4px;
}

.ghost-button,
.save-button {
  height: 42px;
  min-width: 128px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-weight: 900;
}

.ghost-button {
  background: #fff;
  color: var(--ink);
}

.save-button {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
}

.demo-toast {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 60;
  max-width: min(360px, calc(100vw - 44px));
  padding: 13px 15px;
  border: 1px solid #ffc8d3;
  border-radius: var(--radius);
  background: #fff;
  color: var(--ink);
  box-shadow: 0 20px 50px rgba(29, 35, 43, 0.18);
  font-size: 0.9rem;
  font-weight: 850;
  opacity: 0;
  pointer-events: none;
  transform: translateY(12px);
  transition: opacity 180ms ease, transform 180ms ease;
}

.demo-toast.is-visible {
  opacity: 1;
  transform: translateY(0);
}

:root[data-theme="dark"] .demo-toast {
  border-color: rgba(255, 74, 112, 0.72);
  background: var(--surface-raised);
  color: var(--ink);
  box-shadow:
    0 0 0 1px rgba(255, 74, 112, 0.16),
    0 22px 54px rgba(0, 0, 0, 0.42);
}

@media (max-width: 1120px) {
  .dashboard-layout {
    grid-template-columns: 1fr;
  }

  .app-shell {
    background: var(--bg);
  }

  .assistant-panel {
    position: static;
    height: auto;
    min-height: 0;
    border-width: 1px;
    border-radius: var(--radius);
    margin: 0 24px 32px;
  }

  .assistant-panel.is-detached,
  .assistant-panel.is-minimized {
    position: static;
    width: auto;
    height: auto;
    margin: 0 24px 32px;
  }
}

@media (max-width: 980px) {
  .topbar {
    grid-template-columns: 1fr 1fr;
    height: auto;
    padding: 14px 18px;
  }

  .media-logo,
  .loreal-logo {
    justify-self: start;
    width: 150px;
  }

  .title-block {
    grid-column: 1 / -1;
  }

  .workspace {
    padding: 18px;
  }

  .global-metrics,
  .month-overview,
  .control-bar {
    grid-template-columns: 1fr;
  }

  .charts-content {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 20px;
  }

  .charts-copy {
    width: 100%;
  }

  .charts-copy h2 {
    max-width: none;
    text-align: center;
  }

  .month-strip {
    grid-template-columns: 1fr;
  }

  .month-strip > button {
    display: none;
  }

  .month-tabs {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    border-radius: var(--radius);
  }

  .month-tabs a {
    flex: initial;
  }

  .project-head {
    display: none;
  }

  .project-row {
    grid-template-columns: 70px 1fr;
  }

  .project-row > :nth-child(n + 3) {
    grid-column: 2;
  }

  .project-detail {
    grid-template-columns: 1fr;
    padding: 0 14px 16px 84px;
  }

  .links-grid {
    grid-template-columns: 1fr;
  }

  .date-cell {
    grid-row: auto;
  }

  .table-footer {
    grid-template-columns: 1fr;
  }

  .view-actions {
    display: none;
  }
}

@media (max-width: 680px) {
  body {
    background: #fff;
  }

  .app-shell {
    width: 100%;
    overflow-x: hidden;
  }

  .topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 20;
    grid-template-columns: 1fr;
    gap: 8px;
    width: 100%;
    padding: 12px 14px 10px;
    background: rgba(255, 255, 255, 0.96);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 8px 24px rgba(17, 24, 39, 0.06);
    backdrop-filter: blur(12px);
  }

  .media-logo,
  .loreal-logo {
    display: none;
  }

  .title-block {
    grid-column: auto;
    order: 0;
  }

  .title-block strong {
    font-size: 1.32rem;
    white-space: nowrap;
  }

  .title-block > span {
    margin-top: 2px;
    font-size: 0.78rem;
  }

  .dashboard-layout {
    display: block;
  }

  .workspace {
    padding: 92px 14px 92px;
  }

  .global-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 0;
  }

  .global-metrics .mode-card {
    order: -1;
    grid-column: 1 / -1;
  }

  .global-metrics article {
    min-height: 72px;
    padding: 12px;
  }

  .metric-glyph {
    width: 34px;
    height: 34px;
  }

  .global-metrics strong {
    font-size: 1.35rem;
  }

  .global-metrics small {
    font-size: 0.76rem;
  }

  .mobile-month-picker {
    position: relative;
    display: block;
    margin-top: 14px;
  }

  .mobile-month-picker > button {
    display: grid;
    grid-template-columns: 1fr auto 20px;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 56px;
    padding: 10px 14px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: #fff;
    box-shadow: var(--shadow);
    color: var(--ink);
    text-align: left;
  }

  .mobile-month-picker > button::after {
    width: 8px;
    height: 8px;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
    content: "";
    transform: rotate(135deg);
    transition: transform 160ms ease;
  }

  .is-mobile-month-open .mobile-month-picker > button::after {
    transform: rotate(-45deg);
  }

  .mobile-month-picker span {
    font-size: 1.06rem;
    font-weight: 900;
  }

  .mobile-month-picker strong,
  .mobile-month-menu strong {
    min-width: 48px;
    padding: 5px 10px;
    border-radius: 999px;
    background: var(--accent-soft);
    color: var(--accent);
    font-size: 0.82rem;
    text-align: center;
  }

  .mobile-month-picker > button > strong {
    background: #242424;
    color: #fff;
  }

  .mobile-month-menu {
    display: none;
    grid-column: 1 / -1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 2px;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 14px 38px rgba(17, 24, 39, 0.12);
  }

  .is-mobile-month-open .mobile-month-menu {
    display: grid;
  }

  .is-mobile-month-open .mobile-action-rail .mobile-month-menu,
  .is-mobile-rail-stuck .mobile-month-picker .mobile-month-menu {
    display: none;
  }

  .is-mobile-month-open.is-mobile-rail-stuck .mobile-action-rail .mobile-month-menu {
    display: grid;
  }

  .mobile-month-menu button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 50px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fff;
    color: var(--ink);
    font-weight: 850;
  }

  .mobile-month-menu button.is-active {
    border-color: #242424;
    background: #242424;
    color: #fff;
  }

  .mobile-month-menu button.is-active strong {
    background: var(--accent);
    color: #fff;
  }

  .month-strip {
    display: none;
  }

  .month-overview {
    display: flex;
    gap: 10px;
    margin: 14px -14px 0;
    padding: 0 14px 4px;
    overflow-x: auto;
    border-radius: 0;
    box-shadow: none;
    scroll-snap-type: x mandatory;
  }

  .month-overview::-webkit-scrollbar {
    display: none;
  }

  .kpi-card,
  .chart-card {
    flex: 0 0 210px;
    min-height: 82px;
    padding: 12px;
    scroll-snap-align: start;
  }

  .month-overview .chart-card {
    display: none;
  }

  .kpi-card {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 12px;
  }

  .kpi-card strong {
    margin: 0;
    font-size: 1.65rem;
  }

  .kpi-card span {
    font-size: 0.78rem;
    line-height: 1.18;
  }

  .chart-card {
    flex-basis: 210px;
    gap: 7px;
  }

  .chart-card button {
    min-height: 32px;
    font-size: 0.68rem;
  }

  .mobile-action-rail {
    position: relative;
    z-index: 19;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
    margin: 12px -14px 0;
    padding: 8px 14px;
    border-bottom: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(12px);
  }

  .is-mobile-rail-stuck .mobile-action-sentinel {
    height: var(--mobile-rail-height, 74px);
  }

  .is-mobile-rail-stuck .mobile-action-rail {
    position: fixed;
    top: var(--mobile-header-height, 72px);
    left: 0;
    right: 0;
    z-index: 19;
    margin: 0;
    box-shadow: 0 10px 22px rgba(17, 24, 39, 0.08);
  }

  .mobile-action-rail button {
    display: grid;
    justify-items: center;
    gap: 5px;
    min-height: 58px;
    padding: 8px 4px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fff;
    color: var(--ink);
    font-size: 0.68rem;
    font-weight: 850;
  }

  .mobile-action-rail .mobile-sticky-month-action {
    display: none !important;
  }

  .is-mobile-rail-stuck .mobile-action-rail {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .is-mobile-rail-stuck .mobile-action-rail .mobile-sticky-month-action {
    display: grid !important;
  }

  .mobile-action-rail button[aria-expanded="true"] {
    border-color: var(--accent);
    background: var(--accent-soft);
    color: var(--accent);
  }

  .rail-icon {
    position: relative;
    width: 20px;
    height: 20px;
    color: #6d737c;
  }

  .rail-icon.calendar::before {
    position: absolute;
    inset: 1px;
    background: currentColor;
    content: "";
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cpath d='M216 64C229.3 64 240 74.7 240 88L240 128L400 128L400 88C400 74.7 410.7 64 424 64C437.3 64 448 74.7 448 88L448 128L480 128C515.3 128 544 156.7 544 192L544 480C544 515.3 515.3 544 480 544L160 544C124.7 544 96 515.3 96 480L96 192C96 156.7 124.7 128 160 128L192 128L192 88C192 74.7 202.7 64 216 64zM216 176L160 176C151.2 176 144 183.2 144 192L144 480C144 488.8 151.2 496 160 496L480 496C488.8 496 496 488.8 496 480L496 192C496 183.2 488.8 176 480 176L216 176zM320 240C333.3 240 344 250.7 344 264L344 312L392 312C405.3 312 416 322.7 416 336C416 349.3 405.3 360 392 360L344 360L344 408C344 421.3 333.3 432 320 432C306.7 432 296 421.3 296 408L296 360L248 360C234.7 360 224 349.3 224 336C224 322.7 234.7 312 248 312L296 312L296 264C296 250.7 306.7 240 320 240z'/%3E%3C/svg%3E") center / contain no-repeat;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cpath d='M216 64C229.3 64 240 74.7 240 88L240 128L400 128L400 88C400 74.7 410.7 64 424 64C437.3 64 448 74.7 448 88L448 128L480 128C515.3 128 544 156.7 544 192L544 480C544 515.3 515.3 544 480 544L160 544C124.7 544 96 515.3 96 480L96 192C96 156.7 124.7 128 160 128L192 128L192 88C192 74.7 202.7 64 216 64zM216 176L160 176C151.2 176 144 183.2 144 192L144 480C144 488.8 151.2 496 160 496L480 496C488.8 496 496 488.8 496 480L496 192C496 183.2 488.8 176 480 176L216 176zM320 240C333.3 240 344 250.7 344 264L344 312L392 312C405.3 312 416 322.7 416 336C416 349.3 405.3 360 392 360L344 360L344 408C344 421.3 333.3 432 320 432C306.7 432 296 421.3 296 408L296 360L248 360C234.7 360 224 349.3 224 336C224 322.7 234.7 312 248 312L296 312L296 264C296 250.7 306.7 240 320 240z'/%3E%3C/svg%3E") center / contain no-repeat;
  }

  .rail-icon.calendar::after {
    display: none;
    content: "";
  }

  .mobile-sticky-month-action[aria-expanded="true"] .rail-icon.calendar::before {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cpath d='M216 64C229.3 64 240 74.7 240 88L240 128L400 128L400 88C400 74.7 410.7 64 424 64C437.3 64 448 74.7 448 88L448 128L480 128C515.3 128 544 156.7 544 192L544 480C544 515.3 515.3 544 480 544L160 544C124.7 544 96 515.3 96 480L96 192C96 156.7 124.7 128 160 128L192 128L192 88C192 74.7 202.7 64 216 64zM216 176L160 176C151.2 176 144 183.2 144 192L144 480C144 488.8 151.2 496 160 496L480 496C488.8 496 496 488.8 496 480L496 192C496 183.2 488.8 176 480 176L216 176zM248 312L392 312C405.3 312 416 322.7 416 336C416 349.3 405.3 360 392 360L248 360C234.7 360 224 349.3 224 336C224 322.7 234.7 312 248 312z'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cpath d='M216 64C229.3 64 240 74.7 240 88L240 128L400 128L400 88C400 74.7 410.7 64 424 64C437.3 64 448 74.7 448 88L448 128L480 128C515.3 128 544 156.7 544 192L544 480C544 515.3 515.3 544 480 544L160 544C124.7 544 96 515.3 96 480L96 192C96 156.7 124.7 128 160 128L192 128L192 88C192 74.7 202.7 64 216 64zM216 176L160 176C151.2 176 144 183.2 144 192L144 480C144 488.8 151.2 496 160 496L480 496C488.8 496 496 488.8 496 480L496 192C496 183.2 488.8 176 480 176L216 176zM248 312L392 312C405.3 312 416 322.7 416 336C416 349.3 405.3 360 392 360L248 360C234.7 360 224 349.3 224 336C224 322.7 234.7 312 248 312z'/%3E%3C/svg%3E");
  }

  .rail-icon.chart::before {
    position: absolute;
    inset: 0;
    background: currentColor;
    content: "";
    mask: url("assets/chart-growth-icon.png") center / contain no-repeat;
    -webkit-mask: url("assets/chart-growth-icon.png") center / contain no-repeat;
  }

  .rail-icon.chart::after {
    display: none;
    content: "";
  }

  .rail-icon.tag::before {
    position: absolute;
    inset: 4px;
    border: 2px solid currentColor;
    border-radius: 4px;
    content: "";
    transform: rotate(-35deg);
  }

  .rail-icon.champion::before {
    position: absolute;
    left: 4px;
    top: 3px;
    width: 14px;
    height: 14px;
    border: 2px solid currentColor;
    border-radius: 50%;
    content: "";
  }

  .rail-icon.champion::after {
    position: absolute;
    left: 2px;
    right: 2px;
    bottom: 2px;
    height: 6px;
    border: 2px solid currentColor;
    border-top: 0;
    border-radius: 0 0 10px 10px;
    content: "";
  }

  .rail-icon.filter::before {
    position: absolute;
    inset: 1px;
    background: currentColor;
    content: "";
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cpath d='M96 128C78.3 128 64 142.3 64 160C64 177.7 78.3 192 96 192L182.7 192C195 220.3 223.2 240 256 240C288.8 240 317 220.3 329.3 192L544 192C561.7 192 576 177.7 576 160C576 142.3 561.7 128 544 128L329.3 128C317 99.7 288.8 80 256 80C223.2 80 195 99.7 182.7 128L96 128zM96 288C78.3 288 64 302.3 64 320C64 337.7 78.3 352 96 352L342.7 352C355 380.3 383.2 400 416 400C448.8 400 477 380.3 489.3 352L544 352C561.7 352 576 337.7 576 320C576 302.3 561.7 288 544 288L489.3 288C477 259.7 448.8 240 416 240C383.2 240 355 259.7 342.7 288L96 288zM96 448C78.3 448 64 462.3 64 480C64 497.7 78.3 512 96 512L150.7 512C163 540.3 191.2 560 224 560C256.8 560 285 540.3 297.3 512L544 512C561.7 512 576 497.7 576 480C576 462.3 561.7 448 544 448L297.3 448C285 419.7 256.8 400 224 400C191.2 400 163 419.7 150.7 448L96 448z'/%3E%3C/svg%3E") center / contain no-repeat;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cpath d='M96 128C78.3 128 64 142.3 64 160C64 177.7 78.3 192 96 192L182.7 192C195 220.3 223.2 240 256 240C288.8 240 317 220.3 329.3 192L544 192C561.7 192 576 177.7 576 160C576 142.3 561.7 128 544 128L329.3 128C317 99.7 288.8 80 256 80C223.2 80 195 99.7 182.7 128L96 128zM96 288C78.3 288 64 302.3 64 320C64 337.7 78.3 352 96 352L342.7 352C355 380.3 383.2 400 416 400C448.8 400 477 380.3 489.3 352L544 352C561.7 352 576 337.7 576 320C576 302.3 561.7 288 544 288L489.3 288C477 259.7 448.8 240 416 240C383.2 240 355 259.7 342.7 288L96 288zM96 448C78.3 448 64 462.3 64 480C64 497.7 78.3 512 96 512L150.7 512C163 540.3 191.2 560 224 560C256.8 560 285 540.3 297.3 512L544 512C561.7 512 576 497.7 576 480C576 462.3 561.7 448 544 448L297.3 448C285 419.7 256.8 400 224 400C191.2 400 163 419.7 150.7 448L96 448z'/%3E%3C/svg%3E") center / contain no-repeat;
  }

  [data-mobile-filter-toggle][aria-expanded="true"] .rail-icon.filter::before {
    inset: 2px;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cpath d='M183.1 137.4C170.6 124.9 150.3 124.9 137.8 137.4C125.3 149.9 125.3 170.2 137.8 182.7L275.2 320L137.9 457.4C125.4 469.9 125.4 490.2 137.9 502.7C150.4 515.2 170.7 515.2 183.2 502.7L320.5 365.3L457.9 502.6C470.4 515.1 490.7 515.1 503.2 502.6C515.7 490.1 515.7 469.8 503.2 457.3L365.8 320L503.1 182.6C515.6 170.1 515.6 149.8 503.1 137.3C490.6 124.8 470.3 124.8 457.8 137.3L320.5 274.7L183.1 137.4z'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cpath d='M183.1 137.4C170.6 124.9 150.3 124.9 137.8 137.4C125.3 149.9 125.3 170.2 137.8 182.7L275.2 320L137.9 457.4C125.4 469.9 125.4 490.2 137.9 502.7C150.4 515.2 170.7 515.2 183.2 502.7L320.5 365.3L457.9 502.6C470.4 515.1 490.7 515.1 503.2 502.6C515.7 490.1 515.7 469.8 503.2 457.3L365.8 320L503.1 182.6C515.6 170.1 515.6 149.8 503.1 137.3C490.6 124.8 470.3 124.8 457.8 137.3L320.5 274.7L183.1 137.4z'/%3E%3C/svg%3E");
  }

  .control-bar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 10px;
    padding: 12px;
    border: 1px solid var(--line);
    box-shadow: none;
  }

  .is-mobile-filters-collapsed .control-bar {
    display: none;
  }

  .is-mobile-rail-stuck:not(.is-mobile-filters-collapsed) .control-bar {
    position: fixed;
    left: 0;
    right: 0;
    top: calc(var(--mobile-header-height, 72px) + var(--mobile-rail-height, 74px));
    z-index: 18;
    margin: 0;
    padding: 12px 14px;
    border-width: 0 0 1px;
    border-radius: 0 0 16px 16px;
    background: #fff;
    box-shadow: 0 18px 34px rgba(17, 24, 39, 0.14);
  }

  .search-field {
    grid-column: 1 / -1;
  }

  .clear-button {
    grid-column: 2;
    min-width: 0;
  }

  .project-table {
    margin-top: 14px;
    border: 1px solid var(--line);
    box-shadow: none;
  }

  .table-header {
    align-items: start;
    padding: 14px;
  }

  .table-header h2 {
    font-size: 1.16rem;
  }

  .view-actions {
    display: flex;
  }

  .view-actions button {
    position: relative;
    width: 44px;
    min-width: 44px;
    padding: 0;
    overflow: hidden;
    color: transparent;
    font-size: 0;
    line-height: 0;
  }

  .view-actions button::before {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 20px;
    height: 20px;
    background: var(--accent);
    content: "";
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cpath d='M552 256L408 256C398.3 256 389.5 250.2 385.8 241.2C382.1 232.2 384.1 221.9 391 215L437.7 168.3C362.4 109.7 253.4 115 184.2 184.2C109.2 259.2 109.2 380.7 184.2 455.7C259.2 530.7 380.7 530.7 455.7 455.7C463.9 447.5 471.2 438.8 477.6 429.6C487.7 415.1 507.7 411.6 522.2 421.7C536.7 431.8 540.2 451.8 530.1 466.3C521.6 478.5 511.9 490.1 501 501C401 601 238.9 601 139 501C39.1 401 39 239 139 139C233.3 44.7 382.7 39.4 483.3 122.8L535 71C541.9 64.1 552.2 62.1 561.2 65.8C570.2 69.5 576 78.3 576 88L576 232C576 245.3 565.3 256 552 256z'/%3E%3C/svg%3E") center / contain no-repeat;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cpath d='M552 256L408 256C398.3 256 389.5 250.2 385.8 241.2C382.1 232.2 384.1 221.9 391 215L437.7 168.3C362.4 109.7 253.4 115 184.2 184.2C109.2 259.2 109.2 380.7 184.2 455.7C259.2 530.7 380.7 530.7 455.7 455.7C463.9 447.5 471.2 438.8 477.6 429.6C487.7 415.1 507.7 411.6 522.2 421.7C536.7 431.8 540.2 451.8 530.1 466.3C521.6 478.5 511.9 490.1 501 501C401 601 238.9 601 139 501C39.1 401 39 239 139 139C233.3 44.7 382.7 39.4 483.3 122.8L535 71C541.9 64.1 552.2 62.1 561.2 65.8C570.2 69.5 576 78.3 576 88L576 232C576 245.3 565.3 256 552 256z'/%3E%3C/svg%3E") center / contain no-repeat;
    transform: translate(-50%, -50%);
  }

  .view-actions button::after {
    display: none;
  }

  .project-list {
    gap: 0;
  }

  .project-row {
    grid-template-columns: 62px minmax(0, 1fr) 78px;
    grid-template-rows: auto auto auto;
    column-gap: 12px;
    row-gap: 6px;
    min-height: 96px;
    padding: 14px;
  }

  .project-row > .brand-logo-cell {
    grid-column: 1;
    grid-row: 1 / span 3;
    align-self: start;
    width: 58px;
    height: 58px;
  }

  .project-row > .brand-logo-cell img {
    width: 58px;
    height: 58px;
    padding: 7px;
  }

  .project-row > div:nth-child(2) {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    max-width: 100%;
    padding-right: 0;
  }

  .project-row > div:nth-child(2) strong,
  .project-row > div:nth-child(2) span {
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .project-row > div:nth-child(2) strong {
    display: -webkit-box;
    max-height: 2.35em;
    line-height: 1.15;
    white-space: normal;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .project-row > div:nth-child(2) span {
    white-space: nowrap;
  }

  .project-row > div:nth-child(4) {
    display: none;
  }

  .project-row > .date-cell {
    display: block;
    grid-column: 2;
    grid-row: 3;
    align-self: center;
    padding-left: 74px;
    font-size: 0.84rem;
  }

  .project-row > .status-pill {
    grid-column: 2;
    grid-row: 2;
    margin-top: 0;
  }

  .project-row > strong:nth-child(6) {
    grid-column: 2;
    grid-row: 3;
    align-self: center;
    font-size: 0.85rem;
  }

  .project-row > .project-actions {
    grid-column: 3;
    grid-row: 1;
    align-self: start;
    justify-self: end;
    display: flex;
    gap: 6px;
  }

  .project-row > .project-actions .edit-action,
  .project-row > .project-actions .expand-action {
    border-color: var(--line);
    background: #fff;
    color: var(--ink);
  }

  .project-row > .project-actions .edit-action:hover,
  .project-row > .project-actions .expand-action:hover {
    border-color: var(--line);
    background: #fff;
    color: var(--ink);
  }

  .project-item.is-open .project-row > .project-actions .expand-action {
    border-color: var(--accent);
    background: var(--accent);
    color: #fff;
  }

  .edit-action,
  .expand-action {
    width: 34px;
    height: 34px;
  }

  .edit-action::before {
    left: 50%;
    top: 50%;
    width: 17px;
    height: 17px;
    transform: translate(-50%, -50%);
  }

  .edit-action::after {
    content: none;
  }

  .project-detail {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 0 14px 14px;
  }

  .detail-tile {
    min-height: 64px;
    padding: 10px;
  }

  .detail-tile:first-child,
  .detail-tile:nth-child(2),
  .detail-tile:nth-child(6),
  .detail-tile:nth-child(9),
  .links-grid {
    grid-column: 1 / -1;
  }

  .links-grid {
    gap: 8px;
  }

  .link-group {
    min-height: 58px;
    padding: 11px;
  }

  .table-footer {
    gap: 10px;
    padding: 12px 14px;
    text-align: center;
  }

  .table-footer > span {
    justify-self: center;
  }

  .pager {
    justify-content: center;
  }

  .page-size-chip {
    justify-self: center;
  }

  .assistant-panel {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    z-index: 44;
    display: none;
    grid-template-rows: auto auto 1fr auto;
    width: 100%;
    height: min(72dvh, 640px);
    min-height: 430px;
    margin: 0;
    border-radius: 22px 22px 0 0;
    border-width: 1px 0 0;
    background: #fff;
    box-shadow: 0 -18px 50px rgba(17, 24, 39, 0.18);
    transform: translateY(100%);
    transition: transform 220ms ease;
  }

  .assistant-panel.is-mobile-open {
    display: grid;
    transform: translateY(0);
  }

  .assistant-panel header {
    padding: 16px 18px;
  }

  .assistant-panel .pin-button {
    display: none;
  }

  .assistant-panel header::before {
    position: absolute;
    left: 50%;
    top: 8px;
    width: 54px;
    height: 5px;
    border-radius: 999px;
    background: #d7dce2;
    content: "";
    transform: translateX(-50%);
  }

  .assistant-panel.is-detached,
  .assistant-panel.is-minimized {
    position: fixed;
    width: 100%;
    height: min(72dvh, 640px);
    margin: 0;
  }

  .mobile-assistant-fab {
    position: fixed;
    right: 18px;
    bottom: 22px;
    z-index: 45;
    display: grid;
    place-items: center;
    width: 62px;
    height: 62px;
    border: 0;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 12px 30px rgba(255, 49, 95, 0.34);
  }

  .mobile-assistant-fab::before {
    position: absolute;
    right: 50%;
    bottom: 72px;
    min-width: 76px;
    padding: 9px 12px;
    border: 1px solid var(--accent);
    border-radius: 999px;
    background: var(--accent);
    color: #fff;
    content: "Hola!!!!";
    font-size: 0.82rem;
    font-weight: 900;
    line-height: 1;
    opacity: 0;
    pointer-events: none;
    text-align: center;
    transform: translate(50%, 8px) scale(0.96);
    animation: mobileAssistantHello 5s ease-in-out infinite;
    box-shadow: 0 10px 24px rgba(255, 49, 95, 0.3);
  }

  .mobile-assistant-fab::after {
    position: absolute;
    right: 50%;
    bottom: 65px;
    width: 12px;
    height: 12px;
    background: var(--accent);
    content: "";
    opacity: 0;
    pointer-events: none;
    transform: translate(50%, 8px) rotate(45deg) scale(0.96);
    animation: mobileAssistantHelloArrow 5s ease-in-out infinite;
  }

  .mobile-assistant-fab .assistant-mark {
    background: #fff;
  }

  .mobile-assistant-fab.is-hidden {
    display: none;
  }

  .mobile-brand-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 6px 24px 96px;
  }

  .mobile-brand-footer img:first-child {
    width: 128px;
    max-height: 34px;
  }

  .mobile-brand-footer img:last-child {
    width: 128px;
    max-height: 34px;
    object-fit: contain;
  }

  .charts-dialog,
  .demo-dialog {
    width: min(100%, 390px);
    max-height: calc(100dvh - 28px);
  }
}

@keyframes mobileAssistantHello {
  0%,
  58%,
  100% {
    opacity: 0;
    transform: translate(50%, 8px) scale(0.96);
  }

  8%,
  46% {
    opacity: 1;
    transform: translate(50%, 0) scale(1);
  }
}

@keyframes mobileAssistantHelloArrow {
  0%,
  58%,
  100% {
    opacity: 0;
    transform: translate(50%, 8px) rotate(45deg) scale(0.96);
  }

  8%,
  46% {
    opacity: 1;
    transform: translate(50%, 0) rotate(45deg) scale(1);
  }
}

:root[data-theme="dark"] .media-logo,
:root[data-theme="dark"] .loreal-logo,
:root[data-theme="dark"] .mobile-brand-footer img {
  filter: brightness(0) invert(1);
}

:root[data-theme="dark"] .month-tabs,
:root[data-theme="dark"] .chart-card button,
:root[data-theme="dark"] input,
:root[data-theme="dark"] select,
:root[data-theme="dark"] .view-actions button,
:root[data-theme="dark"] .edit-action,
:root[data-theme="dark"] .expand-action,
:root[data-theme="dark"] .project-item,
:root[data-theme="dark"] .brand-logo-cell,
:root[data-theme="dark"] .link-group,
:root[data-theme="dark"] .assistant-panel,
:root[data-theme="dark"] .assistant-input input,
:root[data-theme="dark"] .demo-dialog,
:root[data-theme="dark"] .charts-dialog,
:root[data-theme="dark"] .mobile-month-picker > button,
:root[data-theme="dark"] .mobile-action-rail,
:root[data-theme="dark"] .mobile-assistant-fab {
  border-color: var(--line);
  background: var(--surface-raised);
  color: var(--ink);
}

:root[data-theme="dark"] .month-tabs a.is-active,
:root[data-theme="dark"] .charts-dialog header {
  background: #f2f4f7;
  color: #15181d;
}

:root[data-theme="dark"] .demo-dialog header {
  background: var(--accent);
  color: #ffffff;
}

:root[data-theme="dark"] .demo-dialog header span {
  color: rgba(255, 255, 255, 0.82);
}

:root[data-theme="dark"] .month-tabs a.is-active span {
  color: rgba(21, 24, 29, 0.76);
}

:root[data-theme="dark"] .table-header {
  border-bottom-color: var(--accent);
  background: var(--accent);
  color: #ffffff;
}

:root[data-theme="dark"] .table-header span {
  color: rgba(255, 255, 255, 0.88);
}

:root[data-theme="dark"] .project-list {
  background: var(--line);
}

:root[data-theme="dark"] .project-head,
:root[data-theme="dark"] .detail-tile,
:root[data-theme="dark"] .loading-state,
:root[data-theme="dark"] .table-footer,
:root[data-theme="dark"] .bot-message th,
:root[data-theme="dark"] .summary-table th,
:root[data-theme="dark"] .report,
:root[data-theme="dark"] .project-row:hover,
:root[data-theme="dark"] .project-row.is-focus,
:root[data-theme="dark"] .project-item.is-open .project-row,
:root[data-theme="dark"] .empty-row,
:root[data-theme="dark"] .assistant-meta {
  background: var(--soft);
  color: var(--ink);
}

:root[data-theme="dark"] .assistant-beta-note {
  color: rgba(224, 229, 238, 0.7);
}

:root[data-theme="dark"] .conversation {
  background: var(--surface);
  color: var(--ink);
}

:root[data-theme="dark"] .bot-message {
  border: 1px solid #3a414d;
  background: #303640;
  color: #f2f4f7;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
}

:root[data-theme="dark"] .bot-message th {
  background: #252a32;
}

:root[data-theme="dark"] .bot-message td {
  border-bottom-color: #454c58;
}

:root[data-theme="dark"] .detail-tile strong,
:root[data-theme="dark"] .chart-card button,
:root[data-theme="dark"] .project-head,
:root[data-theme="dark"] .bot-message th,
:root[data-theme="dark"] .summary-table th {
  color: var(--ink);
}

:root[data-theme="dark"] .brand-logo-cell {
  background: #ffffff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.72);
}

:root[data-theme="dark"] .brand-logo-cell img {
  filter: none;
}

:root[data-theme="dark"] .brand-logo-cell > span {
  color: #15181d;
}

:root[data-theme="dark"] .pager .is-current {
  background: #f2f4f7;
  color: #15181d;
}

:root[data-theme="dark"] .page-size-chip,
:root[data-theme="dark"] .table-footer > button {
  border-color: var(--line);
  background: var(--surface-raised);
  color: var(--muted);
}

:root[data-theme="dark"] .assistant-input {
  border-top-color: var(--line);
  background: var(--surface);
}

:root[data-theme="dark"] .bot-message table,
:root[data-theme="dark"] .summary-table {
  border-color: var(--line);
}

:root[data-theme="dark"] .mobile-action-rail button,
:root[data-theme="dark"] .mobile-month-menu,
:root[data-theme="dark"] .mobile-month-menu button {
  border-color: var(--line);
  background: var(--surface-raised);
  color: var(--ink);
}

:root[data-theme="dark"] .mobile-action-rail button[aria-expanded="true"],
:root[data-theme="dark"] [data-mobile-filter-toggle][aria-expanded="true"] {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
}

:root[data-theme="dark"] .rail-icon {
  color: var(--muted);
}

:root[data-theme="dark"] .mobile-action-rail button[aria-expanded="true"] .rail-icon,
:root[data-theme="dark"] [data-mobile-filter-toggle][aria-expanded="true"] .rail-icon {
  color: var(--accent);
}

:root[data-theme="dark"] .project-row > .project-actions .edit-action,
:root[data-theme="dark"] .project-row > .project-actions .expand-action {
  border-color: var(--line);
  background: var(--surface-raised);
  color: var(--ink);
}

:root[data-theme="dark"] .ghost-button {
  border-color: #3f4652;
  background: #303640;
  color: #f2f4f7;
}

:root[data-theme="dark"] .ghost-button:hover {
  background: #3a414d;
}

:root[data-theme="dark"] .table-header .view-actions button {
  border-color: rgba(255, 255, 255, 0.22);
  background: #20242b;
  color: #ffffff;
}

:root[data-theme="dark"] .table-header .view-actions button::before {
  background: #ffffff;
}

@media (max-width: 680px) {
  :root[data-theme="dark"] .table-header .view-actions button {
    color: transparent;
  }
}

:root[data-theme="dark"] .charts-dialog {
  border-color: var(--line);
  background: var(--surface);
  color: var(--ink);
}

:root[data-theme="dark"] .charts-dialog header {
  background: var(--accent);
  color: #ffffff;
}

:root[data-theme="dark"] .charts-dialog header span {
  color: rgba(255, 255, 255, 0.82);
}

:root[data-theme="dark"] .charts-dialog header button {
  border-color: rgba(255, 255, 255, 0.4);
  background: rgba(32, 36, 43, 0.62);
  color: #ffffff;
}

:root[data-theme="dark"] .charts-dialog header button:hover {
  background: rgba(32, 36, 43, 0.86);
}

:root[data-theme="dark"] .charts-content {
  background: var(--surface);
}

:root[data-theme="dark"] .donut-chart {
  filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.24));
}

:root[data-theme="dark"] .donut-labels span {
  border: 1px solid #454c58;
  background: var(--surface-raised);
  color: var(--ink);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.32);
}

:root[data-theme="dark"] .charts-copy h2,
:root[data-theme="dark"] .legend-row,
:root[data-theme="dark"] .legend-row strong {
  color: var(--ink);
}

:root[data-theme="dark"] .legend-row {
  opacity: 0.94;
}

@media (max-width: 680px) {
  :root[data-theme="dark"] body,
  :root[data-theme="dark"] .topbar {
    background: var(--bg);
  }

  :root[data-theme="dark"] .mobile-month-picker > button,
  :root[data-theme="dark"] .mobile-month-menu,
  :root[data-theme="dark"] .control-bar,
  :root[data-theme="dark"] .is-mobile-rail-stuck:not(.is-mobile-filters-collapsed) .control-bar {
    border-color: var(--line);
    background: var(--surface-raised);
    color: var(--ink);
  }

  :root[data-theme="dark"] .control-bar label span {
    color: var(--ink);
  }

  :root[data-theme="dark"] .mobile-month-menu {
    box-shadow: 0 18px 38px rgba(0, 0, 0, 0.34);
  }

  :root[data-theme="dark"] .mobile-month-menu button.is-active {
    border-color: var(--accent);
    background: var(--accent-soft);
    color: var(--accent);
  }

  :root[data-theme="dark"] .mobile-month-picker > button > strong,
  :root[data-theme="dark"] .mobile-month-menu button.is-active strong {
    background: var(--accent);
    color: #ffffff;
  }

  :root[data-theme="dark"] .is-mobile-month-open.is-mobile-rail-stuck .mobile-month-picker {
    visibility: hidden;
  }
}

:root[data-theme="dark"] .kpi-card.total {
  border-color: rgba(151, 161, 176, 0.36);
  background: rgba(151, 161, 176, 0.2);
}

:root[data-theme="dark"] .kpi-card.approved {
  border-color: rgba(99, 214, 148, 0.38);
  background: rgba(99, 214, 148, 0.16);
}

:root[data-theme="dark"] .kpi-card.rate {
  border-color: rgba(247, 180, 93, 0.38);
  background: rgba(247, 180, 93, 0.16);
}

:root[data-theme="dark"] .kpi-card.opera {
  border-color: rgba(143, 183, 241, 0.38);
  background: rgba(143, 183, 241, 0.16);
}

:root[data-theme="dark"] .kpi-card.review {
  border-color: rgba(255, 74, 112, 0.42);
  background: rgba(255, 74, 112, 0.16);
}

:root[data-theme="dark"] .charts-backdrop,
:root[data-theme="dark"] .demo-modal-backdrop {
  background: rgba(0, 0, 0, 0.72);
}