:root {
  --ink: #252523;
  --muted: #777873;
  --faint: #a7a8a2;
  --line: #e7e7e2;
  --paper: #fff;
  --canvas: #f7f7f4;
  --dark: #1f2d2a;
  --mint: #dff3e9;
  --green: #5ba981;
  --coral: #ec765f;
  --amber: #e6a849;
  --blue: #7194d8;
  --violet: #9b80d0;
  --shadow: 0 8px 30px rgba(38, 42, 37, .055);
  --radius: 16px;
  --sidebar: 248px
}

* {
  box-sizing: border-box
}

html {
  color-scheme: light
}

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font: 14px/1.5 "DM Sans", sans-serif
}

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

button,
a {
  transition: .18s ease
}

button {
  color: inherit
}

a {
  text-decoration: none;
  color: inherit
}

svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round
}

.svg-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden
}

.sidebar {
  position: fixed;
  z-index: 20;
  inset: 0 auto 0 0;
  width: var(--sidebar);
  display: flex;
  flex-direction: column;
  padding: 24px 16px 18px;
  background: #f1f2ee;
  border-right: 1px solid #e1e2dd
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 8px 23px;
  font: 800 20px/1 Manrope
}

.brand>span:last-child span {
  color: var(--green)
}

.brand-mark {
  width: 27px;
  height: 27px;
  display: flex;
  align-items: flex-end;
  gap: 2px;
  padding: 5px;
  background: var(--dark);
  border-radius: 8px;
  transform: rotate(-5deg)
}

.brand-mark i {
  display: block;
  width: 4px;
  background: #f4faf6;
  border-radius: 3px
}

.brand-mark i:nth-child(1) {
  height: 8px
}

.brand-mark i:nth-child(2) {
  height: 14px
}

.brand-mark i:nth-child(3) {
  height: 11px
}

.workspace-switcher,
.profile-card {
  width: 100%;
  display: flex;
  align-items: center;
  text-align: left;
  border: 1px solid #dedfd9;
  background: rgba(255, 255, 255, .55);
  border-radius: 12px;
  cursor: pointer
}

.workspace-menu {
  position: relative;
  margin-bottom: 22px
}

.workspace-switcher {
  gap: 10px;
  padding: 9px
}

.workspace-switcher:hover,
.profile-card:hover {
  background: #fff;
  border-color: #ced1c8
}

.workspace-switcher>span:nth-child(2),
.profile-card>span:nth-child(2) {
  display: grid;
  min-width: 0
}

.workspace-switcher strong,
.profile-card strong {
  font-size: 12.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.workspace-switcher small,
.profile-card small {
  font-size: 10.5px;
  color: var(--muted)
}

.workspace-switcher svg {
  width: 16px;
  margin-left: auto;
  transition: transform .18s ease
}

.workspace-switcher[aria-expanded="true"] svg {
  transform: rotate(180deg)
}

.workspace-dropdown {
  position: absolute;
  z-index: 30;
  top: calc(100% + 7px);
  left: 0;
  right: 0;
  max-height: min(320px, 45vh);
  overflow-y: auto;
  padding: 6px;
  background: #fff;
  border: 1px solid #dfe1da;
  border-radius: 12px;
  box-shadow: 0 14px 34px rgba(35, 44, 38, .16)
}

.workspace-dropdown[hidden] {
  display: none
}

.workspace-option {
  width: 100%;
  display: grid;
  grid-template-columns: 31px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 9px;
  padding: 8px;
  border: 0;
  background: transparent;
  border-radius: 8px;
  text-align: left;
  cursor: pointer
}

.workspace-option:hover,
.workspace-option:focus-visible {
  outline: 0;
  background: #f1f5f1
}

.workspace-option[aria-selected="true"] {
  background: #eaf2ed
}

.workspace-option-logo {
  display: grid;
  place-items: center;
  width: 31px;
  height: 31px;
  background: #dfece5;
  color: #315f4b;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase
}

.workspace-option-copy {
  display: grid;
  min-width: 0
}

.workspace-option-copy strong {
  overflow: hidden;
  color: var(--ink);
  font-size: 11.5px;
  text-overflow: ellipsis;
  white-space: nowrap
}

.workspace-option-copy small {
  color: var(--muted);
  font-size: 9.5px;
  text-transform: capitalize
}

.workspace-option-check {
  color: #4d8c6c;
  font-size: 13px;
  font-weight: 800;
  text-align: center
}

.workspace-logo {
  display: grid;
  place-items: center;
  width: 31px;
  height: 31px;
  border-radius: 8px;
  background: #d7e8df;
  color: #315f4b;
  font-weight: 800
}

.side-nav {
  flex: 1;
  overflow-y: auto
}

.nav-label {
  display: block;
  margin: 0 11px 7px;
  color: #a0a29b;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase
}

.nav-label-space {
  margin-top: 21px
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 11px;
  height: 39px;
  padding: 0 11px;
  margin: 2px 0;
  border-radius: 9px;
  color: #656861;
  font-size: 12.5px;
  font-weight: 500
}

.nav-item svg {
  width: 17px
}

.nav-item:hover {
  color: var(--ink);
  background: rgba(255, 255, 255, .65)
}

.nav-item.active {
  background: #fff;
  color: #253d34;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(47, 56, 48, .05)
}

.nav-item.active svg {
  color: #4f9575
}

.nav-item em {
  margin-left: auto;
  display: grid;
  place-items: center;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  background: #e9a78f;
  color: #733a2b;
  border-radius: 20px;
  font-size: 9px;
  font-style: normal;
  font-weight: 700
}

.sidebar-help {
  position: relative;
  padding: 14px 13px 12px 42px;
  margin: 10px 0 11px;
  background: #e4eee8;
  border-radius: 12px
}

.sidebar-help .help-icon {
  position: absolute;
  left: 12px;
  top: 13px;
  display: grid;
  place-items: center;
  width: 23px;
  height: 23px;
  background: #fff;
  color: #4f9575;
  border-radius: 7px
}

.sidebar-help svg {
  width: 13px
}

.sidebar-help strong {
  font-size: 10.5px
}

.sidebar-help p {
  margin: 3px 0 7px;
  color: #6b7971;
  font-size: 9.5px;
  line-height: 1.35
}

.sidebar-help a {
  color: #37745a;
  font-size: 9.5px;
  font-weight: 700
}

.profile-card {
  gap: 9px;
  padding: 9px;
  border-color: transparent;
  background: transparent
}

.avatar {
  display: grid;
  place-items: center;
  width: 31px;
  height: 31px;
  border-radius: 50%;
  background: #283b35;
  color: #fff;
  font-size: 10px;
  font-weight: 700
}

.profile-card .more {
  margin-left: auto;
  color: #999;
  letter-spacing: 1px
}

.user-settings-modal {
  width: min(520px, 100%);
  max-height: calc(100vh - 40px);
  overflow-y: auto
}

.user-settings-modal .modal-header p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 9.5px
}

.user-settings-profile {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line)
}

.user-settings-profile>span:last-child {
  display: grid
}

.user-settings-profile strong {
  font: 700 13px Manrope
}

.user-settings-profile small {
  color: var(--muted);
  font-size: 10px
}

.user-settings-avatar {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  flex: none;
  background: #283b35;
  color: #fff;
  border-radius: 50%;
  font-weight: 800
}

.user-settings-identity {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 11px
}

.user-settings-identity p {
  grid-column: 1 / -1;
  margin: -5px 0 20px;
  color: var(--faint);
  font-size: 8.5px
}

.user-settings-identity .form-control[readonly] {
  color: var(--muted);
  cursor: default
}

.user-settings-section-title {
  margin-bottom: 14px;
  padding-top: 18px;
  border-top: 1px solid var(--line)
}

.user-settings-section-title h3 {
  margin: 0;
  font: 700 13px Manrope
}

.user-settings-section-title p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 9px
}

.user-settings-success {
  margin-bottom: 12px;
  padding: 10px 12px;
  background: #e8f4ed;
  color: #346a50;
  border-radius: 8px;
  font-size: 10px
}

.user-settings-footer {
  justify-content: space-between
}

.user-signout {
  border-color: #edcbc4;
  background: #fff5f2;
  color: #925244
}

.app-shell {
  min-height: 100vh;
  margin-left: var(--sidebar)
}

.topbar {
  position: sticky;
  z-index: 15;
  top: 0;
  height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 32px;
  background: rgba(247, 247, 244, .88);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(12px)
}

.global-search {
  width: min(420px, 45vw);
  height: 38px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 12px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px
}

.global-search svg {
  width: 16px;
  color: #989994
}

.global-search input,
.filter-search input {
  min-width: 0;
  flex: 1;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
  font-size: 12px
}

.global-search input::placeholder {
  color: #a1a29d
}

.global-search kbd {
  padding: 2px 6px;
  background: #f3f3f0;
  border: 1px solid #e5e5e0;
  border-radius: 5px;
  color: #9a9b95;
  font: 9px DM Sans
}

.top-actions {
  display: flex;
  align-items: center;
  gap: 13px
}

.icon-button,
.mobile-menu {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 0;
  background: transparent;
  border-radius: 9px;
  cursor: pointer
}

.icon-button:hover,
.mobile-menu:hover {
  background: #e9ece7
}

.icon-button {
  position: relative
}

.icon-button svg {
  width: 17px
}

.icon-button i {
  position: absolute;
  right: 7px;
  top: 6px;
  width: 6px;
  height: 6px;
  background: var(--coral);
  border: 2px solid var(--canvas);
  border-radius: 50%
}

.top-divider {
  width: 1px;
  height: 23px;
  background: var(--line)
}

.quick-create,
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid transparent;
  border-radius: 9px;
  cursor: pointer;
  font-size: 11.5px;
  font-weight: 700
}

.quick-create,
.btn-primary {
  background: var(--dark);
  color: #fff
}

.quick-create:hover,
.btn-primary:hover {
  background: #354a43;
  transform: translateY(-1px)
}

.quick-create svg,
.btn svg {
  width: 15px
}

.btn-secondary {
  background: #fff;
  border-color: var(--line)
}

.btn-secondary:hover {
  border-color: #cfd1ca;
  background: #fdfdfc
}

.btn-ghost {
  background: transparent;
  color: var(--muted)
}

.btn-sm {
  min-height: 32px;
  padding: 0 10px;
  font-size: 10.5px
}

.mobile-menu {
  display: none
}

.content {
  max-width: 1500px;
  margin: 0 auto;
  padding: 31px 34px 60px
}

.page-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 26px
}

.date-line,
.section-kicker,
.eyebrow {
  display: block;
  margin-bottom: 6px;
  color: #9b9d97;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase
}

.page-header h1 {
  margin: 0;
  font: 800 27px/1.2 Manrope
}

.page-header p {
  margin: 7px 0 0;
  color: var(--muted);
  font-size: 12.5px
}

.header-actions {
  display: flex;
  gap: 10px
}

.tiny {
  width: 13px !important
}

.metrics-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 16px
}

.metric-card,
.panel,
.persona-card,
.generated-card,
.trend-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow)
}

.metric-card {
  padding: 17px 18px
}

.metric-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px
}

.metric-icon {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 9px
}

.metric-icon svg {
  width: 16px
}

.metric-icon.mint {
  background: #e0f2e8;
  color: #4d936f
}

.metric-icon.amber {
  background: #f8ead2;
  color: #b27a26
}

.metric-icon.blue {
  background: #e4ecf9;
  color: #6382bd
}

.metric-icon.violet {
  background: #ece6f6;
  color: #856dad
}

.change-up {
  padding: 4px 7px;
  background: #e5f3ea;
  color: #4a8568;
  border-radius: 15px;
  font-size: 8.5px;
  font-weight: 700
}

.metric-card>strong {
  display: block;
  font: 800 26px/1 Manrope
}

.metric-card h3 {
  margin: 8px 0 2px;
  font-size: 11.5px
}

.metric-card p {
  margin: 0;
  color: var(--faint);
  font-size: 9.5px
}

.dashboard-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.75fr) minmax(300px, 1fr);
  gap: 16px
}

.panel {
  min-width: 0
}

.panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 18px 19px 13px
}

.panel-head h2 {
  margin: 0;
  font: 700 14px Manrope
}

.panel-head p {
  margin: 3px 0 0;
  color: var(--faint);
  font-size: 9.5px
}

.panel-head a {
  color: #4d8069;
  font-size: 9.5px;
  font-weight: 700
}

.idea-list {
  padding: 0 10px 10px
}

.idea-row {
  display: grid;
  grid-template-columns: 38px minmax(150px, 1fr) 26px 91px 58px 24px;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border-top: 1px solid #f0f0ed
}

.idea-row:first-child {
  border-top: 0
}

.idea-thumb {
  display: grid;
  place-items: center;
  width: 35px;
  height: 35px;
  border-radius: 10px
}

.idea-thumb svg {
  width: 15px
}

.coral {
  background: #f8dfd9 !important;
  color: #b95947 !important
}

.violet {
  background: #eae2f4 !important;
  color: #785fa4 !important
}

.blue {
  background: #e1e9f7 !important;
  color: #5e7fba !important
}

.green {
  background: #dfeee6 !important;
  color: #4b896a !important
}

.amber {
  background: #f5e7ca !important;
  color: #a87326 !important
}

.idea-copy {
  display: grid;
  min-width: 0
}

.idea-copy strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px
}

.idea-copy span {
  color: var(--faint);
  font-size: 9px
}

.platform-icon {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 1px solid var(--line);
  border-radius: 7px;
  font-size: 8px;
  font-weight: 800
}

.status {
  display: inline-flex;
  width: max-content;
  align-items: center;
  padding: 4px 8px;
  border-radius: 20px;
  font-size: 8.5px;
  font-weight: 700;
  text-transform: capitalize
}

.status.generated {
  background: #efefec;
  color: #75766f
}

.status.shortlisted {
  background: #e5edf9;
  color: #5879b5
}

.status.needs_revision,
.status.needs-revision {
  background: #f9ead4;
  color: #a57328
}

.status.accepted,
.status.ready,
.status.active {
  background: #e1f1e8;
  color: #488266
}

.status.draft {
  background: #efefec;
  color: #74756e
}

.idea-row time {
  color: var(--faint);
  font-size: 8.5px
}

.row-arrow,
.dots {
  border: 0;
  background: transparent;
  color: #9b9c96;
  cursor: pointer
}

.row-arrow svg {
  width: 14px
}

.status-panel {
  padding-bottom: 18px
}

.donut-wrap {
  display: flex;
  align-items: center;
  gap: 25px;
  padding: 8px 20px 15px
}

.donut {
  width: 126px;
  height: 126px;
  display: grid;
  place-items: center;
  flex: none;
  border-radius: 50%;
  background: conic-gradient(#6f9f87 0 42%, #e7af55 42% 50%, #7797d0 50% 68%, #c4c6c1 68%);
  position: relative
}

.donut:before {
  content: "";
  position: absolute;
  inset: 18px;
  background: #fff;
  border-radius: 50%
}

.donut div {
  position: relative;
  display: grid;
  text-align: center
}

.donut strong {
  font: 800 21px Manrope
}

.donut span {
  color: var(--faint);
  font-size: 8px
}

.legend {
  flex: 1;
  display: grid;
  gap: 9px;
  margin: 0;
  padding: 0;
  list-style: none
}

.legend li {
  display: grid;
  grid-template-columns: 8px 1fr 20px 25px;
  align-items: center;
  gap: 6px;
  font-size: 9px
}

.legend li span {
  color: var(--muted)
}

.legend li em {
  color: var(--faint);
  font-style: normal;
  text-align: right
}

.dot {
  display: block;
  width: 7px;
  height: 7px;
  border-radius: 50%
}

.dot.generated {
  background: #c4c6c1
}

.dot.shortlisted {
  background: #7797d0
}

.dot.accepted {
  background: #6f9f87
}

.dot.revision,
.dot.needs-revision {
  background: #e7af55
}

.campaigns-panel,
.schedule-panel {
  padding-bottom: 8px
}

.campaign-row {
  display: grid;
  grid-template-columns: 39px 1fr 35px;
  align-items: center;
  gap: 11px;
  padding: 9px 19px
}

.campaign-art {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  font: 800 13px Manrope
}

.campaign-row>div {
  display: grid
}

.campaign-row strong {
  font-size: 10.5px
}

.campaign-row span {
  color: var(--faint);
  font-size: 8.5px
}

.progress {
  height: 4px;
  margin-top: 6px;
  background: #eee;
  border-radius: 5px;
  overflow: hidden
}

.progress i {
  display: block;
  height: 100%;
  background: #6c9e84;
  border-radius: 5px
}

.campaign-row>em {
  font-size: 9px;
  color: var(--muted);
  font-style: normal
}

.schedule-row {
  display: grid;
  grid-template-columns: 35px 3px 1fr 50px;
  align-items: center;
  gap: 11px;
  padding: 8px 19px
}

.date-block {
  display: grid;
  place-items: center;
  width: 34px;
  height: 37px;
  background: #f5f5f2;
  border-radius: 9px
}

.date-block strong {
  font: 800 13px Manrope
}

.date-block small {
  font-size: 6.5px;
  color: var(--muted)
}

.schedule-line {
  height: 30px;
  border-radius: 4px;
  background: var(--green) !important
}

.schedule-row>div {
  display: grid
}

.schedule-row>div strong {
  font-size: 9.5px
}

.schedule-row>div span,
.schedule-row time {
  color: var(--faint);
  font-size: 8px
}

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

.studio-form {
  padding: 22px;
  height: max-content;
  position: sticky;
  top: 90px
}

.studio-form h2,
.results-head h2 {
  margin: 0 0 19px;
  font: 700 17px Manrope
}

.studio-form label,
.modal label,
.settings-section label {
  display: grid;
  gap: 6px;
  margin-bottom: 14px;
  color: #595b56;
  font-size: 10px;
  font-weight: 700
}

.field-pair,
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px
}

.form-control {
  width: 100%;
  min-height: 40px;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fbfbf9;
  color: var(--ink);
  outline: 0;
  font-size: 11px
}

.form-control:focus {
  border-color: #779b89;
  box-shadow: 0 0 0 3px rgba(91, 169, 129, .12)
}

textarea.form-control {
  min-height: 88px;
  resize: vertical
}

.risk-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 18px 0
}

.risk-row>span {
  font-size: 10px;
  font-weight: 700
}

.segment,
.tabs {
  display: flex;
  padding: 3px;
  background: #f0f1ed;
  border-radius: 8px
}

.segment button,
.tabs button {
  height: 29px;
  padding: 0 10px;
  border: 0;
  background: transparent;
  border-radius: 6px;
  color: var(--muted);
  font-size: 9px;
  cursor: pointer
}

.segment button.active,
.tabs button.active {
  background: #fff;
  color: var(--ink);
  box-shadow: 0 1px 5px #dfe1db
}

.generate-wide {
  width: 100%;
  min-height: 42px
}

.results-head {
  display: flex;
  justify-content: space-between;
  align-items: center
}

.results-head h2 {
  margin-bottom: 0
}

.ai-label {
  font-size: 9px;
  color: var(--muted)
}

.ai-label i {
  display: inline-block;
  width: 6px;
  height: 6px;
  background: #5baa80;
  border-radius: 50%;
  margin-right: 4px
}

.generated-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px
}

.generated-card {
  padding: 17px
}

.generated-top {
  display: flex;
  justify-content: space-between
}
.campaign-chip { display: inline-flex; max-width: 100%; padding: 4px 8px; border-radius: 999px; color: #526078; background: #eef1f6; font-size: 10px; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.platform-pill {
  display: inline-flex;
  padding: 4px 8px;
  border: 1px solid var(--line);
  border-radius: 20px;
  color: var(--muted);
  font-size: 8.5px
}

.generated-card h3,
.kanban-card h3 {
  margin: 16px 0 7px;
  font: 700 14px/1.35 Manrope
}

.generated-card>p,
.kanban-card p {
  margin: 0;
  color: var(--muted);
  font-size: 10px
}

.idea-detail {
  display: grid;
  gap: 3px;
  margin-top: 15px;
  padding: 10px;
  background: #f7f7f4;
  border-radius: 9px
}

.idea-detail span {
  color: var(--faint);
  font-size: 8px;
  text-transform: uppercase
}

.idea-detail strong {
  font-size: 9.5px;
  font-weight: 500
}

.tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin: 13px 0
}

.tag-row span {
  padding: 3px 6px;
  background: #f2f3ef;
  border-radius: 5px;
  color: #788078;
  font-size: 8px
}

.card-actions {
  display: flex;
  align-items: center;
  border-top: 1px solid #efefeb;
  padding-top: 12px
}

.card-actions .icon-button {
  margin-left: auto
}

.filter-bar,
.collection-toolbar,
.calendar-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px
}

.filter-search {
  height: 37px;
  min-width: 230px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 10px;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 9px
}

.filter-search svg {
  width: 14px;
  color: var(--faint)
}

.filter-bar>button {
  height: 37px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 11px;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 9px;
  font-size: 9.5px;
  cursor: pointer
}

.filter-bar>button svg {
  width: 12px
}

.filter-bar>span {
  flex: 1
}

.filter-bar .view-toggle {
  border-color: transparent;
  background: transparent
}

.filter-bar .view-toggle.active {
  background: #fff;
  border-color: var(--line)
}

.kanban {
  display: grid;
  grid-template-columns: repeat(4, minmax(230px, 1fr));
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 12px
}

.kanban-column {
  padding: 10px;
  background: #f0f1ed;
  border-radius: 13px
}

.column-head {
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 5px;
  font-size: 10px;
  font-weight: 700
}

.column-head span {
  display: flex;
  align-items: center;
  gap: 7px
}

.column-head em {
  display: grid;
  place-items: center;
  width: 19px;
  height: 19px;
  background: #e2e3de;
  border-radius: 6px;
  font-size: 8px;
  font-style: normal
}

.kanban-card {
  padding: 13px;
  margin-bottom: 9px;
  background: #fff;
  border: 1px solid #e4e5df;
  border-radius: 11px;
  box-shadow: 0 3px 10px rgba(40, 45, 38, .04)
}

.kanban-card h3 {
  font-size: 11.5px
}

.kanban-card p {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-size: 9px
}

.kanban-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid #f0f0ed;
  color: var(--muted);
  font-size: 8px
}

.mini-avatar {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  background: #e5eee9;
  color: #4b8068;
  border-radius: 50%;
  font-weight: 700
}

.kanban-meta time {
  margin-left: auto;
  color: var(--faint)
}

.add-card {
  width: 100%;
  height: 33px;
  border: 1px dashed #d0d2ca;
  background: transparent;
  border-radius: 8px;
  color: var(--muted);
  font-size: 9px;
  cursor: pointer
}

.month-nav {
  display: flex;
  align-items: center;
  gap: 7px
}

.month-nav h2 {
  width: 130px;
  margin: 0;
  font: 700 14px Manrope
}

.month-nav button {
  width: 29px;
  height: 29px;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 7px
}

.month-nav .today-btn {
  width: auto;
  padding: 0 10px;
  font-size: 9px
}

.calendar-toolbar {
  justify-content: space-between
}

.calendar-list {
  padding: 0 20px
}

.calendar-day {
  display: grid;
  grid-template-columns: 90px 1fr;
  padding: 18px 0;
  border-bottom: 1px solid var(--line)
}

.calendar-day:last-child {
  border-bottom: 0
}

.calendar-date {
  display: grid;
  grid-template-columns: 28px 1fr;
  align-items: center;
  height: max-content
}

.calendar-date strong {
  font: 800 22px Manrope;
  grid-row: span 2
}

.calendar-date span {
  font-size: 8px;
  font-weight: 700;
  color: var(--muted)
}

.calendar-date small {
  font-size: 8px;
  color: var(--faint)
}

.day-items {
  display: grid;
  gap: 7px
}

.calendar-item {
  display: grid;
  grid-template-columns: 48px 3px 26px 1fr 50px 25px;
  align-items: center;
  gap: 10px;
  padding: 10px;
  background: #fafaf8;
  border: 1px solid #ededE9;
  border-radius: 9px
}

.time-col {
  display: grid;
  font-size: 9px;
  font-weight: 700
}

.time-col small,
.calendar-item div span {
  font-size: 7.5px;
  color: var(--faint)
}

.platform-bar {
  height: 28px;
  background: var(--green) !important;
  border-radius: 3px
}

.calendar-item div {
  display: grid
}

.calendar-item div strong {
  font-size: 10px
}

.collection-toolbar {
  justify-content: space-between
}

.collection-toolbar>span {
  color: var(--muted);
  font-size: 9px
}

.persona-grid,
.account-grid,
.trend-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px
}

.persona-card {
  overflow: hidden
}

.persona-cover {
  height: 105px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative
}

.persona-cover>span {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  background: rgba(255, 255, 255, .7);
  border-radius: 14px;
  font: 800 18px Manrope
}

.persona-cover .dots {
  position: absolute;
  right: 10px;
  top: 8px
}

.persona-body {
  padding: 16px
}

.persona-body h2,
.account-card h2,
.trend-card h2 {
  margin: 0 0 7px;
  font: 700 14px Manrope
}

.persona-body>p {
  height: 44px;
  margin: 0;
  color: var(--muted);
  font-size: 9.5px
}

.persona-body dl,
.account-card dl {
  display: grid;
  gap: 6px;
  margin: 13px 0
}

.persona-body dl div,
.account-card dl div {
  display: grid;
  grid-template-columns: 64px 1fr
}

.persona-body dt,
.account-card dt {
  color: var(--faint);
  font-size: 8px
}

.persona-body dd,
.account-card dd {
  margin: 0;
  font-size: 8.5px
}

.persona-footer {
  display: flex;
  justify-content: space-between;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-size: 8px
}

.persona-footer span {
  color: var(--muted)
}

.persona-footer a,
.account-card a {
  color: #477b64;
  font-weight: 700
}

.campaign-table,
.archive-table {
  overflow: hidden
}

.table-head,
.table-row {
  display: grid;
  grid-template-columns: minmax(280px, 2fr) 1fr .5fr 1fr .7fr 30px;
  align-items: center;
  gap: 12px;
  padding: 11px 17px
}

.table-head {
  background: #f1f2ee;
  color: #90928c;
  font-size: 8px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em
}

.campaign-guide { display: grid; gap: 5px; margin: 0 0 18px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 14px; background: linear-gradient(120deg, #f7f8fc, #fff); }
.campaign-guide strong { font: 700 13px Manrope, sans-serif; }
.campaign-guide p { margin: 0; max-width: 850px; color: var(--muted); font-size: 12px; line-height: 1.6; }

.table-row {
  min-height: 61px;
  border-top: 1px solid var(--line);
  font-size: 9.5px
}

.campaign-name {
  display: flex;
  align-items: center;
  gap: 10px
}

.campaign-name>span:last-child,
.archive-table .table-row>div:first-child {
  display: grid;
  min-width: 0
}

.campaign-name strong,
.archive-table .table-row>div strong {
  font-size: 10.5px
}

.campaign-name small,
.archive-table .table-row>div small {
  color: var(--faint);
  font-size: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.campaign-name .campaign-generation {
  color: var(--muted);
  font-weight: 700
}

.campaign-name .campaign-generation.completed { color: var(--green); }
.campaign-name .campaign-generation.pending,
.campaign-name .campaign-generation.generating { color: #9a6c18; }
.campaign-name .campaign-generation.failed,
.campaign-name .campaign-generation.review,
.campaign-name .campaign-generation.partial { color: #a64f43; }

.approval-cell {
  display: grid;
  grid-template-columns: 28px 1fr;
  align-items: center
}

.approval-cell .progress {
  margin: 0
}

.shared-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 15px;
  padding: 13px 15px;
  background: #e6f0ea;
  border: 1px solid #d4e5dc;
  border-radius: 12px
}

.shared-banner>span {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  background: #fff;
  border-radius: 9px;
  color: #4c8a6c
}

.shared-banner strong {
  font-size: 10.5px
}

.shared-banner p {
  margin: 2px 0 0;
  color: #728078;
  font-size: 9px
}

.trend-grid {
  grid-template-columns: repeat(3, 1fr)
}

.trend-card {
  position: relative;
  padding: 18px
}

.trend-score {
  position: absolute;
  right: 15px;
  top: 14px;
  display: grid;
  grid-template-columns: 15px 20px;
  align-items: center
}

.trend-score svg {
  grid-row: span 2;
  width: 13px;
  color: #5b9e7b
}

.trend-score strong {
  font: 800 13px Manrope
}

.trend-score small {
  font-size: 6.5px;
  color: var(--faint)
}

.trend-card h2 {
  margin-top: 15px
}

.trend-card>p {
  height: 36px;
  color: var(--muted);
  font-size: 9.5px
}

.trend-card footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 15px;
  padding-top: 12px;
  border-top: 1px solid var(--line)
}

.trend-card footer span {
  color: var(--faint);
  font-size: 8px
}

.trend-card footer button {
  border: 0;
  background: transparent;
  color: #477b64;
  font-size: 8.5px;
  font-weight: 700;
  cursor: pointer
}

.account-grid {
  grid-template-columns: repeat(4, 1fr)
}

.account-card {
  padding: 17px
}

.account-head {
  display: flex;
  align-items: flex-start
}

.account-head .status {
  margin-left: auto
}

.account-logo {
  display: grid;
  place-items: center;
  width: 39px;
  height: 39px;
  border-radius: 11px;
  font: 800 14px Manrope
}

.account-card h2 {
  margin-top: 15px
}

.account-card>p {
  margin: 0;
  color: var(--muted);
  font-size: 9px
}

.account-card dl {
  padding: 10px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line)
}

.account-card a {
  font-size: 9px
}

.archive-table .table-head,
.archive-table .table-row {
  grid-template-columns: minmax(220px, 2fr) minmax(140px, 1.2fr) minmax(100px, 1fr) .7fr .5fr 1fr 25px
}

.settings-layout {
  display: grid;
  grid-template-columns: 190px minmax(400px, 650px);
  gap: 18px
}

.settings-nav {
  display: grid;
  height: max-content
}

.settings-nav button {
  text-align: left;
  padding: 10px 12px;
  border: 0;
  background: transparent;
  border-radius: 8px;
  color: var(--muted);
  font-size: 10px;
  cursor: pointer
}

.settings-nav button.active {
  background: #fff;
  color: var(--ink);
  font-weight: 700
}

.settings-content {
  padding: 23px
}

.settings-section h2 {
  margin: 0;
  font: 700 15px Manrope
}

.settings-section>p {
  margin: 4px 0 20px;
  color: var(--muted);
  font-size: 9.5px
}

.settings-section label {
  max-width: 420px
}

.auth-note {
  display: flex;
  gap: 12px;
  margin-top: 27px;
  padding-top: 20px;
  border-top: 1px solid var(--line)
}

.auth-note>span {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  background: #e2f0e8;
  color: #4f8c6c;
  border-radius: 9px
}

.auth-note svg {
  width: 14px
}

.auth-note h3 {
  margin: 0;
  font-size: 10.5px
}

.auth-note p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 9px
}

.empty-hero {
  display: grid;
  place-items: center;
  padding: 80px 20px;
  text-align: center
}

.empty-icon {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  background: #e5f0e9;
  color: #4e8c6d;
  border-radius: 14px
}

.empty-hero h2 {
  margin: 18px 0 7px;
  font: 700 17px Manrope
}

.empty-hero p {
  max-width: 430px;
  margin: 0 0 20px;
  color: var(--muted);
  font-size: 10px
}

.hidden {
  display: none !important
}

.auth-gate.denied .gate-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 18px
}

.modal-backdrop {
  position: fixed;
  z-index: 50;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 20px;
  background: rgba(25, 31, 28, .48);
  backdrop-filter: blur(4px)
}

.modal {
  display: flex;
  flex-direction: column;
  flex: 0 1 auto;
  width: min(570px, 100%);
  height: auto;
  max-height: calc(100vh - 40px);
  max-height: calc(100dvh - 40px);
  min-height: 0;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 25px 80px rgba(20, 25, 22, .25);
  overflow: hidden
}

.modal>form {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  overflow: hidden
}

.modal-header,
.modal-footer {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 19px 22px;
  border-bottom: 1px solid var(--line)
}

.modal-header h2 {
  margin: 0;
  font: 700 18px Manrope
}

.modal-close {
  border: 0;
  background: transparent;
  font-size: 24px;
  color: var(--muted);
  cursor: pointer
}

.modal-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 20px 22px
}

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

.workflow-modal { position: relative; width: min(680px, 100%); border: 1px solid rgba(255,255,255,.72); border-radius: 20px; box-shadow: 0 28px 90px rgba(18, 27, 22, .28) }
.workflow-header { align-items: flex-start; gap: 18px; padding: 22px 26px; background: linear-gradient(135deg, #f5f8f4, #fff 74%); }
.workflow-header .modal-title { margin-top: 5px; font-size: 21px; line-height: 1.3; }
.workflow-body { display: flex; flex-direction: column; gap: 18px; padding: 24px 26px; }
.workflow-status-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.workflow-meta { color: var(--muted); font-size: 12px; }
.workflow-insight { margin: 0; color: var(--ink); font-size: 15px; line-height: 1.65; }
.workflow-copy { display: grid; gap: 9px; padding: 18px; border: 1px solid #e4eae4; border-radius: 15px; background: #f8faf8; }
.workflow-copy > span { color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.workflow-copy strong { color: var(--ink); font-size: 16px; line-height: 1.5; }
.workflow-copy p { margin: 0; color: #5d6861; line-height: 1.6; white-space: pre-wrap; }
.workflow-grid { gap: 10px; }
.workflow-grid > div { min-width: 0; padding: 13px 14px; border: 1px solid #edf0ed; border-radius: 12px; background: #fff; }
.workflow-grid span { display: block; margin-bottom: 5px; color: var(--muted); font-size: 11px; }
.workflow-grid strong { display: block; color: var(--ink); font-size: 13px; line-height: 1.45; overflow-wrap: anywhere; }
.feedback-section { display: grid; gap: 12px; padding-top: 3px; }
.feedback-heading h3 { margin: 4px 0 0; font-size: 16px; }
.feedback-section form { display: grid; justify-items: start; gap: 9px; }
.workflow-actions { justify-content: flex-start; flex-wrap: wrap; gap: 9px; padding: 16px 26px; background: #fbfcfb; }
.workflow-actions [data-workflow-close] { margin-left: auto; }
.workflow-form-intro { margin: 0 0 4px; color: var(--muted); font-size: 13px; line-height: 1.55; }
.workflow-backdrop .resource-form { gap: 17px; padding: 24px 26px; }
.workflow-backdrop .modal-footer { gap: 9px; padding: 16px 26px; }
.workflow-generation-overlay { position: absolute; z-index: 3; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 13px; padding: 32px; border-radius: inherit; background: rgba(250, 252, 250, .96); text-align: center; animation: workflow-fade-in .18s ease-out; }
.workflow-generation-overlay strong { color: var(--ink); font: 700 19px Manrope; }
.workflow-generation-overlay p { max-width: 390px; margin: 0; color: #536057; font-size: 14px; line-height: 1.6; }
.workflow-generation-note { max-width: 360px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.workflow-generation-spinner { width: 43px; height: 43px; border: 3px solid #dce7dd; border-top-color: #377c56; border-radius: 50%; animation: workflow-spin .85s linear infinite; }
@keyframes workflow-spin { to { transform: rotate(360deg); } }
@keyframes workflow-fade-in { from { opacity: 0; } to { opacity: 1; } }
.role-summary-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 4px 0 20px; }
.role-summary-grid article { padding: 16px; border: 1px solid #e7ece7; border-radius: 13px; background: #f8faf8; }
.role-summary-grid strong { color: var(--ink); font: 700 14px Manrope; }
.role-summary-grid p { margin: 7px 0 0; color: var(--muted); font-size: 12px; line-height: 1.55; }
.settings-invitations { margin-top: 26px; }
.settings-invitations .settings-title-row { margin-bottom: 12px; }
.settings-invitations h3 { margin: 0; font: 700 16px Manrope; }
.settings-invitations .settings-title-row p { margin: 5px 0 0; color: var(--muted); font-size: 12px; }
.settings-invitation { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 13px 15px; border-top: 1px solid var(--line); }
.settings-invitation > span { display: grid; gap: 4px; min-width: 0; }
.settings-invitation strong { overflow-wrap: anywhere; font-size: 13px; }
.settings-invitation small { color: var(--muted); font-size: 11px; }
.invite-feedback { grid-column: 1 / -1; min-height: 0; font-size: 13px; }
.settings-section > .invite-feedback { margin: 0 0 16px; }
.invite-feedback:not(:empty) { padding: 10px 12px; border-radius: 10px; }
.invite-feedback.is-pending { color: var(--muted); background: var(--surface-soft); }
.invite-feedback.is-success { color: #187653; background: #eaf7f0; }
.invite-feedback.is-error { color: #a43333; background: #fff0ef; }

@media (max-width: 600px) {
  .role-summary-grid { grid-template-columns: 1fr; }
  .settings-invitation { align-items: flex-start; }
  .workflow-backdrop { padding: 10px; }
  .workflow-modal { width: 100%; max-height: calc(100dvh - 20px); border-radius: 17px; }
  .workflow-header, .workflow-body { padding-left: 18px; padding-right: 18px; }
  .workflow-actions { padding: 13px 18px; }
  .workflow-actions [data-workflow-close] { margin-left: 0; }
}

.idea-generation-message {
  margin: 16px 22px 0;
  padding: 11px 13px;
  border-radius: 9px;
  background: #edf5ef;
  color: #365b45;
  font-size: 12px
}

.idea-generation-message.is-error { background: #fff1ee; color: #8f3f31 }
.idea-results { display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0; overflow-y: auto }
.idea-modal.has-results { height: min(740px, calc(100vh - 40px)); height: min(740px, calc(100dvh - 40px)) }
.idea-results-heading { display: flex; align-items: flex-start; justify-content: space-between; padding: 20px 22px 0 }
.idea-results-heading h3 { margin: 3px 0 0; font: 700 16px Manrope }
.idea-result-list { display: grid; flex: 1 1 auto; min-height: 0; gap: 10px; overflow-y: auto; overscroll-behavior: contain; padding: 16px 22px }
.idea-result-card { padding: 13px; border: 1px solid var(--line); border-radius: 11px }
.idea-result-card h3 { margin: 5px 0; font: 700 14px Manrope }
.idea-result-card p, .idea-result-card small { display: block; margin: 5px 0; color: var(--muted); font-size: 11px }
.idea-result-card strong { display: block; margin-top: 8px; font-size: 12px }
.idea-results .modal-footer { position: sticky; bottom: 0; background: white }
.idea-result-warning { margin: 16px 22px 0; color: #805b18; font-size: 12px }

@media (max-width: 600px) {
  .modal-backdrop { align-items: flex-end; padding: 10px }
  .modal { max-height: calc(100vh - 20px); max-height: calc(100dvh - 20px); border-radius: 16px 16px 10px 10px }
  .modal-header, .modal-footer { padding: 15px 17px }
  .modal-body { padding: 17px }
  .idea-modal.has-results { height: min(740px, calc(100vh - 20px)); height: min(740px, calc(100dvh - 20px)) }
}

.form-grid .span-2 {
  grid-column: span 2
}

.toast {
  position: fixed;
  z-index: 100;
  right: 25px;
  bottom: 25px;
  max-width: 320px;
  padding: 11px 15px;
  background: var(--dark);
  color: #fff;
  border-radius: 9px;
  box-shadow: 0 10px 30px rgba(20, 25, 22, .2);
  font-size: 10px;
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none
}

.toast.show {
  opacity: 1;
  transform: translateY(0)
}

@media(max-width:1180px) {

  .persona-grid,
  .account-grid {
    grid-template-columns: repeat(2, 1fr)
  }

  .metrics-grid {
    grid-template-columns: repeat(2, 1fr)
  }

  .dashboard-grid {
    grid-template-columns: 1fr
  }

  .generated-grid {
    grid-template-columns: 1fr
  }

  .trend-grid {
    grid-template-columns: repeat(2, 1fr)
  }
}

@media(max-width:850px) {
  :root {
    --sidebar: 230px
  }

  .sidebar {
    transform: translateX(-100%);
    box-shadow: 10px 0 30px rgba(35, 40, 36, .15);
    transition: transform .22s
  }

  .sidebar.open {
    transform: translateX(0)
  }

  .app-shell {
    margin-left: 0
  }

  .mobile-menu {
    display: grid
  }

  .topbar {
    padding: 0 18px
  }

  .content {
    padding: 25px 20px 45px
  }

  .global-search {
    margin-right: auto;
    margin-left: 10px
  }

  .global-search kbd {
    display: none
  }

  .studio-layout {
    grid-template-columns: 1fr
  }

  .studio-form {
    position: static
  }

  .kanban {
    grid-template-columns: repeat(4, 270px)
  }

  .campaign-table {
    overflow-x: auto
  }

  .campaign-table>* {
    min-width: 800px
  }

  .settings-layout {
    grid-template-columns: 150px 1fr
  }
}

@media(max-width:600px) {
  .quick-create {
    width: 36px;
    padding: 0;
    font-size: 0
  }

  .top-divider {
    display: none
  }

  .content {
    padding: 20px 14px 40px
  }

  .page-header {
    align-items: flex-start;
    gap: 15px
  }

  .page-header h1 {
    font-size: 23px
  }

  .page-header p {
    font-size: 10.5px
  }

  .date-line {
    display: none
  }

  .metrics-grid {
    grid-template-columns: 1fr 1fr;
    gap: 9px
  }

  .metric-card {
    padding: 14px
  }

  .metric-card>strong {
    font-size: 22px
  }

  .idea-row {
    grid-template-columns: 35px 1fr 73px
  }

  .idea-row .platform-icon,
  .idea-row time,
  .idea-row .row-arrow {
    display: none
  }

  .donut-wrap {
    justify-content: center
  }

  .schedule-row {
    grid-template-columns: 35px 3px 1fr
  }

  .schedule-row time {
    display: none
  }

  .persona-grid,
  .account-grid,
  .trend-grid {
    grid-template-columns: 1fr
  }

  .generated-grid {
    grid-template-columns: 1fr
  }

  .filter-bar {
    overflow-x: auto
  }

  .filter-search {
    min-width: 210px
  }

  .calendar-day {
    grid-template-columns: 1fr;
    gap: 10px
  }

  .calendar-date {
    width: 90px
  }

  .calendar-item {
    grid-template-columns: 42px 3px 22px 1fr
  }

  .calendar-item>.status,
  .calendar-item>.dots {
    display: none
  }

  .settings-layout {
    grid-template-columns: 1fr
  }

  .settings-nav {
    display: flex;
    overflow-x: auto
  }

  .form-grid {
    grid-template-columns: 1fr
  }

  .form-grid .span-2 {
    grid-column: auto
  }
}

.archive-campaign { overflow-wrap: anywhere; }

.publication-backdrop { z-index: 1100; }
.publication-preview { margin: 18px 0; padding: 18px; border: 1px solid var(--line); border-radius: 16px; background: #fafbf9; }
.publication-copy { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.65; }
.publication-images { display: flex; gap: 12px; overflow-x: auto; padding: 8px 0; }
.publication-images figure { margin: 0; flex: 0 0 180px; }
.publication-images img { width: 180px; height: 160px; object-fit: contain; background: #eee; border-radius: 10px; }
.publication-images figcaption { font-size: 12px; padding-top: 6px; }
.publication-upload-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(150px,1fr)); gap: 12px; }
.publication-upload-card { min-width: 0; display: grid; gap: 6px; border: 1px solid var(--line); border-radius: 12px; padding: 10px; }
.publication-upload-card img { width: 100%; height: 140px; object-fit: contain; background: #f5f5f5; }
.publication-upload-card small { overflow-wrap: anywhere; }

.publication-images video { width: 260px; max-width: 100%; height: 190px; background: #111; border-radius: 10px; }
.publication-upload-card video { width: 100%; height: 160px; background: #111; }

.calendar-toolbar { flex-wrap: wrap; gap: 16px; }
.calendar-campaign-filter { display: grid; gap: 6px; font-size: 12px; min-width: 180px; max-width: 100%; }
.calendar-campaign-filter select { max-width: 280px; width: 100%; }

.status.failed { background: #fce4e1; color: #a7352a; }
.status.processing, .status.uncertain { background: #fff0d2; color: #855e16; }
.status.published { background: #e1f1e8; color: #35704d; }

/* Idea Studio: explicit persona identity and publishing destination. */
.studio-results { min-width: 0; }
.studio-filters { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)) auto; align-items: end; gap: 12px; margin: 16px 0; }
.studio-filters label { display: grid; gap: 6px; min-width: 0; font-size: 12px; color: var(--muted); }
.studio-filters select { width: 100%; min-width: 0; }
.generated-card[class*="studio-persona-"] { border-top: 4px solid var(--persona-accent); }
.studio-persona-mint { --persona-accent: #448364; --persona-tint: #e4f3eb; }
.studio-persona-blue { --persona-accent: #4874b7; --persona-tint: #e8effb; }
.studio-persona-amber { --persona-accent: #9a6d24; --persona-tint: #fff1d9; }
.studio-persona-coral { --persona-accent: #b35e4c; --persona-tint: #fcebe6; }
.studio-persona-violet { --persona-accent: #7b61a7; --persona-tint: #f0eafa; }
.studio-persona-teal { --persona-accent: #317d83; --persona-tint: #e0f2f3; }
.studio-identity { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; padding: 12px; margin-top: 14px; background: var(--persona-tint); border-radius: 12px; }
.studio-persona-badge { display: flex; align-items: center; gap: 8px; flex: 1 1 140px; min-width: 0; }
.studio-persona-avatar { display: grid; place-items: center; flex: 0 0 32px; height: 32px; border-radius: 10px; color: white; background: var(--persona-accent); font-weight: 700; }
.studio-identity small, .studio-identity strong { display: block; overflow-wrap: anywhere; }
.studio-identity small { color: var(--muted); font-size: 10px; margin-bottom: 3px; }
.studio-identity strong { font-size: 12px; line-height: 1.5; }
.studio-account { flex: 1 1 120px; min-width: 0; }
.studio-pagination { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 14px; margin-top: 20px; font-size: 12px; }
.studio-results .generated-top { gap: 8px; flex-wrap: wrap; }
@media (max-width: 1100px) { .studio-filters { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 600px) { .studio-filters { grid-template-columns: minmax(0,1fr); } }

.account-ai-context { border: 1px solid var(--line); border-radius: 12px; padding: 14px; }
.account-ai-context summary { cursor: pointer; font-weight: 600; font-size: 13px; }
.account-ai-context[open] { display: grid; gap: 14px; }
.account-ai-context label { display: grid; gap: 8px; margin-top: 12px; }

/* Publishing: workspace queue and attempt history. */
.publishing-stats { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; margin-bottom:20px; }
.publishing-stat { display:flex; align-items:flex-start; gap:16px; padding:24px; border:1px solid var(--line); border-radius:20px; background:var(--paper); box-shadow:var(--shadow); }
.publishing-stat-icon { display:grid; place-items:center; flex:0 0 46px; height:46px; border-radius:14px; background:#edf2fc; color:#587bb4; }
.publishing-stat.processing .publishing-stat-icon { background:#e4f3eb; color:#388165; }
.publishing-stat.history .publishing-stat-icon { background:#f0ebf8; color:#8565b5; }
.publishing-stat div>span { color:var(--muted); font-size:12px; font-weight:600; }
.publishing-stat strong { display:block; margin:6px 0 3px; font:700 34px/1.2 Manrope,sans-serif; letter-spacing:-1px; font-variant-numeric:tabular-nums; }
.publishing-stat p { margin:0; font-size:12px; color:var(--muted); }
.publishing-guide { display:flex; align-items:center; gap:14px; padding:18px 22px; margin-bottom:26px; border:1px solid #dce8df; border-radius:16px; background:#edf4ef; }
.publishing-guide-icon { color:#4c8168; flex-shrink:0; }
.publishing-guide strong { font-size:13px; }.publishing-guide p { margin:3px 0 0; font-size:12px; color:#64766a; }
.publishing-guide a { margin-left:auto; white-space:nowrap; font-size:12px; font-weight:700; color:#376a52; }
.publishing-board { background:var(--paper); border:1px solid var(--line); border-radius:22px; box-shadow:var(--shadow); overflow:hidden; }
.publishing-toolbar { display:flex; flex-wrap:wrap; align-items:center; gap:16px; padding:18px 24px; border-bottom:1px solid var(--line); }
.publishing-tabs { display:flex; gap:4px; padding:4px; background:var(--canvas); border:1px solid var(--line); border-radius:12px; }
.publishing-tabs button { display:flex; align-items:center; gap:10px; padding:9px 16px; border:0; border-radius:8px; background:transparent; color:var(--muted); cursor:pointer; font-size:13px; font-weight:600; }
.publishing-tabs button.active { background:var(--dark); color:white; box-shadow:0 2px 5px #1f2d2a12; }
.publishing-tabs button span { padding:1px 7px; border-radius:6px; background:#e9eae5; font-size:11px; font-variant-numeric:tabular-nums; }
.publishing-tabs button.active span { background:#ffffff26; }
.publishing-toolbar label { display:flex; align-items:center; gap:10px; font-size:12px; color:var(--muted); }
.publishing-toolbar select { max-width:210px; padding:9px 12px; min-height:38px; }
.publishing-toolbar [hidden] { display:none; }
.publishing-live { margin-left:auto; display:flex; align-items:center; gap:7px; color:var(--muted); font-size:11px; white-space:nowrap; }
.publishing-live i { height:6px; width:6px; border-radius:50%; background:var(--green); box-shadow:0 0 0 3px #5ba98116; }
.publishing-board-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:22px 26px; background:#fcfcfa; border-bottom:1px solid var(--line); }
.publishing-board-heading h2 { margin:0; font:700 16px Manrope,sans-serif; }.publishing-board-heading p { margin:5px 0 0; font-size:12px; color:var(--muted); }
.publishing-board-heading>span { font-size:10px; color:var(--muted); text-align:right; }
.publishing-board>.api-error { margin:16px 24px; }
.publishing-row { display:grid; grid-template-columns:48px minmax(0,1.6fr) minmax(170px,.8fr) minmax(155px,.65fr); gap:22px; padding:26px; border-bottom:1px solid var(--line); position:relative; }
.publishing-row:last-child { border-bottom:0; }.publishing-row.is-processing { background:linear-gradient(100deg,#f0f8f3 0%,#fff 65%); }
.publishing-row.is-processing::before { content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--green); }
.publishing-order { display:flex; flex-direction:column; align-items:center; align-self:start; gap:3px; padding:9px 4px; background:#f4f5f1; border:1px solid var(--line); border-radius:12px; }
.publishing-order span { font-size:8px; letter-spacing:1px; color:var(--muted); font-weight:700; }.publishing-order strong { font:700 20px Manrope,sans-serif; font-variant-numeric:tabular-nums; }
.is-processing .publishing-order { background:#e0efe5; border-color:#cfe3d7; color:#327452; }
.publishing-content { min-width:0; overflow-wrap:anywhere; }
.publishing-row-top { display:flex; align-items:center; flex-wrap:wrap; gap:7px; }
.publishing-platform,.publishing-format { font-size:10px; padding:3px 8px; border-radius:6px; background:#f4f5f2; color:var(--muted); }
.publishing-platform { color:var(--dark); background:#eaf0eb; text-transform:capitalize; font-weight:700; }
.publishing-content h3 { font:700 16px/1.5 Manrope,sans-serif; margin:10px 0 14px; letter-spacing:-.3px; }
.publishing-identities { display:flex; flex-wrap:wrap; gap:10px 22px; font-size:12px; }
.publishing-identities span { display:grid; gap:3px; }.publishing-identities small { color:var(--faint); font-size:9px; letter-spacing:.7px; font-weight:600; }
.publishing-campaign { font-size:11px; color:var(--muted); margin:12px 0 0; }.publishing-campaign strong { color:#62695e; font-weight:500; margin-left:6px; }
.publishing-content .publishing-error { margin:14px 0 0; padding:10px 12px; background:#fff3ef; border:1px solid #f5dfd6; border-radius:9px; color:#9b4734; font-size:12px; line-height:1.6; }
.publishing-details { margin-top:12px; font-size:11px; color:var(--muted); }.publishing-details summary { cursor:pointer; width:fit-content; }.publishing-details p { padding:8px 10px; background:var(--canvas); border-radius:6px; margin:8px 0; }.publishing-details code { font-size:10px; overflow-wrap:anywhere; }
.publishing-times { display:grid; gap:10px; margin:0; padding-left:20px; border-left:1px solid var(--line); align-content:start; }.publishing-times div { display:grid; gap:2px; }.publishing-times dt { font-size:10px; color:var(--muted); }.publishing-times dd { margin:0; font-size:11px; font-variant-numeric:tabular-nums; }
.publishing-result { display:flex; flex-direction:column; gap:14px; align-items:flex-start; }.publishing-result>.status { display:inline-flex; align-items:center; gap:6px; font-size:10px; line-height:1.5; padding:5px 10px; }
.publishing-result>.status i { width:5px; height:5px; background:currentColor; border-radius:50%; flex-shrink:0; }
.publishing-result small { display:block; color:var(--muted); font-size:11px; line-height:1.6; }.publishing-result .btn { font-size:11px; padding:8px 12px; }
.publishing-progress { width:100%; }.publishing-progress-track { display:block; height:4px; width:100%; background:#e2ede5; border-radius:9px; margin-bottom:10px; overflow:hidden; }
.publishing-progress-track i { display:block; width:35%; height:100%; background:#6aa888; border-radius:9px; animation:publishing-progress 2s ease-in-out infinite alternate; }
@keyframes publishing-progress { from { transform:translateX(-20%); } to { transform:translateX(200%); } }
.publishing-result .status.processing { background:#e1f1e8; color:#367956; }.status.waiting,.status.queued { background:#e8effb; color:#456b9e; }.status.cancelled { background:#eee; color:#666; }
.publishing-result .status.published { background:#e1f1e8; color:#367956; }.publishing-result .status.failed { background:#fae9e3; color:#ad5440; }.publishing-result .status.uncertain { background:#fff1d9; color:#996c24; }
.publishing-empty { display:flex; flex-direction:column; align-items:center; padding:64px 24px; text-align:center; }
.publishing-empty-icon { display:grid; place-items:center; width:60px; height:60px; background:#eef4ef; border:1px solid #e0eae1; border-radius:20px; color:#5b8c70; margin-bottom:18px; }.publishing-empty-icon svg { width:26px; height:26px; }
.publishing-empty h3 { font:700 17px Manrope,sans-serif; margin:0 0 8px; }.publishing-empty p { max-width:400px; margin:0 0 22px; color:var(--muted); font-size:12px; line-height:1.8; }
.publishing-pagination { margin:0; padding:18px 24px; border-top:1px solid var(--line); background:#fcfcfa; }.publishing-pagination span { font-size:11px; color:var(--muted); }
.publishing-tabs button:focus-visible,.publishing-details summary:focus-visible { outline:2px solid #5ba981; outline-offset:3px; }
@media(max-width:1200px) { .publishing-row { grid-template-columns:42px minmax(0,1fr) minmax(155px,.6fr); gap:18px; }.publishing-result { grid-column:2 / -1; flex-direction:row; flex-wrap:wrap; align-items:center; }.publishing-progress { width:auto; flex:1; min-width:150px; max-width:320px; }.publishing-stat { padding:18px; gap:12px; } }
@media(max-width:800px) { .publishing-stats { gap:10px; }.publishing-stat { flex-direction:column; padding:16px; }.publishing-stat strong { font-size:28px; }.publishing-guide { flex-wrap:wrap; }.publishing-guide a { margin-left:34px; }.publishing-board-heading { flex-wrap:wrap; }.publishing-board-heading>span { text-align:left; }.publishing-toolbar { padding:16px; gap:12px; }.publishing-live { margin-left:0; }.publishing-row { padding:20px; } }
@media(max-width:600px) { .publishing-stats { grid-template-columns:1fr; }.publishing-stat { flex-direction:row; align-items:center; }.publishing-stat div { display:grid; grid-template-columns:1fr auto; gap:2px 16px; flex:1; align-items:center; }.publishing-stat strong { grid-column:2; grid-row:1 / 3; margin:0; }.publishing-stat p { grid-column:1; }.publishing-stat-icon { flex-basis:40px; height:40px; }.publishing-guide { padding:16px; }.publishing-guide div { flex:1; }.publishing-row { grid-template-columns:36px minmax(0,1fr); gap:14px; padding:18px 16px; }.publishing-order strong { font-size:17px; }.publishing-order span { font-size:7px; }.publishing-times { grid-column:2; grid-template-columns:repeat(2,minmax(0,1fr)); padding:14px 0 0; border-left:0; border-top:1px solid var(--line); }.publishing-result { grid-column:2; }.publishing-board-heading { padding:18px 16px; }.publishing-pagination { flex-wrap:wrap; gap:12px; padding:16px; }.publishing-pagination .btn { padding:8px 10px; font-size:11px; }.publishing-toolbar label { flex:1; }.publishing-toolbar select { width:100%; }.publishing-live { margin-left:auto; } }
@media(prefers-reduced-motion:reduce) { .publishing-progress-track i { animation:none; } }

.publishing-stat.failed .publishing-stat-icon { background:#fae9e3; color:#ad5440; }
@media(min-width:601px) and (max-width:1200px) { .publishing-stats { grid-template-columns:repeat(2,minmax(0,1fr)); } }

/* Archive library */
.archive-shell { display:grid; gap:28px; }
.archive-guide { display:flex; align-items:center; gap:16px; padding:20px 24px; background:#edf2ed; border:1px solid #dde7dd; border-radius:18px; }
.archive-guide>span { display:grid; place-items:center; width:44px; height:44px; flex-shrink:0; color:#628269; background:#e0eade; border-radius:13px; }
.archive-guide strong { font-size:14px; }.archive-guide p { margin:4px 0 0; color:var(--muted); font-size:12px; }
.archive-tools { display:flex; flex-wrap:wrap; gap:16px; align-items:center; justify-content:space-between; }
.archive-jump { display:flex; flex-wrap:wrap; gap:8px; }.archive-jump a { display:flex; gap:10px; align-items:center; padding:9px 12px; background:var(--paper); border:1px solid var(--line); border-radius:10px; font-size:12px; font-weight:600; }
.archive-jump a:hover { border-color:#a8c6b1; background:#f0f6f1; }.archive-jump span { background:#eff1ec; color:var(--muted); padding:1px 6px; border-radius:5px; font-size:10px; font-variant-numeric:tabular-nums; }
.archive-search { display:flex; align-items:center; gap:10px; padding:10px 13px; background:white; border:1px solid var(--line); border-radius:11px; min-width:260px; }.archive-search svg { width:16px; height:16px; color:var(--muted); }.archive-search input { border:0; outline:0; width:100%; min-width:0; background:transparent; font-size:12px; }.archive-search:focus-within { outline:2px solid #9fc4ad; outline-offset:2px; }
.archive-section { scroll-margin-top:90px; min-width:0; }.archive-section>header { display:flex; align-items:center; gap:12px; margin-bottom:16px; }.archive-section-icon { display:grid; place-items:center; width:38px; height:38px; border:1px solid var(--line); border-radius:12px; background:white; color:#6c7c6c; }.archive-section>header h2 { font:700 17px Manrope,sans-serif; margin:0; }.archive-section>header p { margin:4px 0 0; color:var(--muted); font-size:12px; }.archive-section-total { margin-left:auto; color:var(--muted); font-size:11px; white-space:nowrap; }
.archive-resource-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }.archive-card { display:flex; flex-direction:column; padding:22px; background:var(--paper); border:1px solid var(--line); border-radius:18px; min-width:0; box-shadow:0 4px 18px #262a2504; overflow-wrap:anywhere; }.archive-card[hidden] { display:none; }.archive-card-top { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:14px; }
.archive-avatar { display:grid; place-items:center; width:42px; height:42px; border-radius:13px; background:#f5e7df; color:#ad7058; font:700 13px Manrope,sans-serif; }.archive-avatar.personas { background:#ede9f4; color:#8a73a9; }.archive-avatar.accounts { background:#e3eee6; color:#5b8b68; }.archive-badge { padding:4px 9px; border:1px solid #e6e7e1; border-radius:7px; color:#8b8e82; font-size:10px; background:#f8f9f5; }
.archive-card h3 { font:700 15px/1.6 Manrope,sans-serif; margin:0 0 8px; }.archive-card>p { margin:0 0 16px; font-size:12px; color:var(--muted); line-height:1.8; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.archive-card-tags { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:18px; }.archive-card-tags span,.archive-platform { padding:4px 8px; border-radius:6px; font-size:10px; background:#f0f3ee; color:#687663; }.archive-platform { text-transform:capitalize; }
.archive-card footer { display:flex; flex-wrap:wrap; align-items:center; gap:10px 12px; border-top:1px solid var(--line); padding-top:15px; margin-top:auto; }.archive-card footer .btn { padding:8px 11px; font-size:11px; }.archive-delete { border:0; background:transparent; padding:7px 0; color:#b36553; cursor:pointer; font-size:10px; }.archive-delete:hover { color:#923b2b; text-decoration:underline; }.archive-delete:disabled { opacity:.4; cursor:wait; }.archive-card footer small { font-size:10px; color:var(--muted); line-height:1.7; }.archive-idea-card footer { justify-content:space-between; }
.archive-idea-meta { display:grid; grid-template-columns:1fr; gap:10px; margin:0 0 20px; padding:12px; background:#f8f9f5; border-radius:10px; }.archive-idea-meta dt { font-size:9px; text-transform:uppercase; letter-spacing:.6px; color:var(--faint); }.archive-idea-meta dd { margin:3px 0 0; font-size:11px; color:#606858; }
.archive-empty { grid-column:1 / -1; display:flex; flex-direction:column; align-items:center; text-align:center; padding:36px 20px; border:1px dashed #dcded4; border-radius:16px; background:#fafbf7; }.archive-empty svg { width:24px; height:24px; color:#a2afa0; margin-bottom:12px; }.archive-empty strong { font-size:12px; font-weight:500; color:#737c6c; }.archive-empty p { margin:5px 0 0; font-size:11px; color:var(--faint); }.archive-no-match { padding:24px; text-align:center; color:var(--muted); font-size:12px; background:white; border:1px dashed var(--line); border-radius:12px; }
@media(max-width:1200px) { .archive-resource-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.archive-search { flex:1; } }
@media(max-width:650px) { .archive-resource-grid { grid-template-columns:minmax(0,1fr); }.archive-guide { padding:16px; align-items:flex-start; }.archive-tools { align-items:stretch; }.archive-search { min-width:0; width:100%; }.archive-jump { width:100%; }.archive-jump a { flex:1 1 40%; justify-content:space-between; }.archive-section>header { flex-wrap:wrap; }.archive-section>header>div { flex:1; min-width:0; }.archive-section>header p { font-size:11px; }.archive-card { padding:18px; } }

.status.deleted,.day-count.deleted { background:#eceee9; color:#777f70; }
.publishing-result .threads-delete-button { color:#aa5747; border-color:#edd7d0; background:#fff9f6; }

@media(max-width:600px) { .publishing-tabs { flex-wrap:wrap; }.publishing-tabs button { padding:8px 10px; } }

.thread-text-preview { border:1px solid var(--line); border-radius:12px; padding:14px; background:#f8faf6; }
.thread-text-preview summary { font-size:12px; cursor:pointer; font-weight:600; }
.thread-text-preview article { padding:12px 0; border-top:1px solid var(--line); margin-top:12px; }
.thread-text-preview strong { font-size:11px; color:var(--muted); }
.thread-text-preview p { font-size:12px; white-space:pre-wrap; overflow-wrap:anywhere; margin:8px 0 0; }

/* Per-user workspace notification inbox. */
.notification-menu { position:relative; }
.notification-bell { position:relative; }
.notification-badge { position:absolute; top:0; right:-3px; min-width:17px; padding:1px 4px; border:2px solid var(--canvas); border-radius:20px; background:#d96d57; color:white; font-size:9px; line-height:1.3; text-align:center; }
.notification-badge[hidden],.notification-panel[hidden],.notification-panel [hidden] { display:none; }
.notification-panel { position:absolute; z-index:80; top:calc(100% + 16px); right:0; width:420px; max-width:calc(100vw - 28px); border:1px solid var(--line); border-radius:18px; background:white; box-shadow:0 16px 55px #24332824; overflow:hidden; }
.notification-panel header { display:flex; justify-content:space-between; align-items:center; padding:20px; gap:12px; }
.notification-panel h2 { font:700 17px Manrope,sans-serif; margin:0; }.notification-panel header p { margin:5px 0 0; font-size:11px; color:var(--muted); }
.notification-toolbar { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:10px; padding:0 16px 14px; border-bottom:1px solid var(--line); }
.notification-toolbar>div { display:flex; gap:3px; background:#f2f4ef; border-radius:9px; padding:3px; }.notification-toolbar button { background:transparent; border:0; cursor:pointer; font-size:10px; padding:6px 9px; border-radius:6px; }.notification-toolbar button.active { background:var(--dark); color:white; }.notification-toolbar>button { color:#4d8666; padding:4px 0; }.notification-toolbar>button:disabled { opacity:.4; cursor:default; }
.notification-items { max-height:min(480px,60vh); overflow-y:auto; overscroll-behavior:contain; }
.notification-item { border-bottom:1px solid #eff0eb; padding:0 16px; }.notification-item.unread { background:#f1f7f2; }.notification-item>a { display:flex; align-items:flex-start; gap:11px; padding:16px 0 10px; }.notification-item>a:hover .notification-copy>strong { color:#40805b; }
.notification-icon { display:grid; place-items:center; width:33px; height:33px; flex:0 0 33px; border-radius:10px; color:#698572; background:#e5eee5; }.notification-icon svg { width:17px; height:17px; }.notification-item.error .notification-icon { color:#ac5b47; background:#fae9e1; }.notification-item.warning .notification-icon { color:#a17e38; background:#fbefda; }
.notification-copy { display:flex; flex-direction:column; gap:5px; min-width:0; overflow-wrap:anywhere; }.notification-copy strong { font-size:12px; }.notification-copy>span { font-size:11px; line-height:1.7; color:#72796c; }.notification-copy time { font-size:9px; color:#969e8e; }.notification-unread-dot { margin-top:7px; flex:0 0 6px; height:6px; border-radius:50%; background:#5b9c72; }
.notification-mark { margin:0 0 12px 44px; border:0; border-radius:5px; padding:3px 0; color:#5e896c; background:transparent; font-size:10px; cursor:pointer; }.notification-mark:hover { text-decoration:underline; }
.notification-panel footer { display:flex; justify-content:space-between; gap:12px; align-items:center; padding:12px 16px; background:#fafbf7; }.notification-panel footer small { color:var(--muted); font-size:9px; }.notification-panel footer small:last-child { margin-left:auto; }
.notification-empty { display:flex; flex-direction:column; align-items:center; text-align:center; padding:40px 26px; color:#8b9884; gap:10px; }.notification-empty strong { font-size:13px; color:#63735d; }.notification-empty p { max-width:270px; margin:0; font-size:11px; line-height:1.8; }.notification-feedback { margin:8px 16px; padding:10px; background:#fff0e9; color:#a55c49; font-size:11px; border-radius:8px; }
.notification-panel button:focus-visible,.notification-panel a:focus-visible { outline:2px solid #6d9d7d; outline-offset:2px; }
@media(max-width:600px) { .notification-panel { position:fixed; right:12px; left:12px; top:72px; width:auto; max-width:none; }.notification-items { max-height:calc(100dvh - 270px); } }

/* Workspace-wide title/name search. */
.global-search-shell { position:relative; width:min(440px,45vw); min-width:0; }
.global-search-shell .global-search { width:100%; margin:0; }
.global-search-shell:focus-within .global-search { border-color:#9bbda7; box-shadow:0 0 0 3px #78a68a13; }
.global-search-results { position:absolute; z-index:80; left:0; top:calc(100% + 12px); width:520px; max-width:calc(100vw - 32px); border:1px solid var(--line); background:white; border-radius:16px; box-shadow:0 16px 50px #25342920; overflow:hidden; }
.global-search-results[hidden] { display:none; }
.global-search-summary { padding:15px 18px; font-size:11px; color:var(--muted); line-height:1.7; border-bottom:1px solid var(--line); overflow-wrap:anywhere; }
.global-search-groups { max-height:min(520px,60vh); overflow-y:auto; overscroll-behavior:contain; }
.global-search-group { padding:8px 8px 10px; border-bottom:1px solid #eff0eb; }
.global-search-group h3 { display:flex; align-items:center; gap:8px; margin:6px 10px 8px; color:#85917c; font-size:10px; letter-spacing:.6px; text-transform:uppercase; }
.global-search-group h3 span { padding:1px 5px; border-radius:5px; background:#f1f4ed; font-size:9px; }
.global-search-item { width:100%; display:flex; align-items:center; gap:10px; padding:10px; border:0; border-radius:10px; background:transparent; text-align:left; cursor:pointer; }
.global-search-item:hover,.global-search-item:focus-visible { background:#edf5ee; outline:0; }
.global-search-result-icon { display:grid; place-items:center; flex:0 0 32px; height:32px; color:#6d8a72; background:#eef2e9; border-radius:9px; }.global-search-result-icon svg { width:16px; height:16px; }
.global-search-result-copy { display:grid; gap:3px; min-width:0; flex:1; overflow-wrap:anywhere; }.global-search-result-copy strong { font-size:12px; font-weight:600; }.global-search-result-copy small { color:var(--muted); font-size:10px; }
.global-search-archived { padding:3px 6px; background:#f0ede7; color:#9a8e79; border-radius:5px; font-size:9px; flex-shrink:0; }
.global-search-arrow { width:13px; height:13px; color:#a5afa0; flex-shrink:0; }
.global-search-more { margin:7px 10px 0; font-size:10px; color:var(--muted); }
.global-search-results footer { padding:11px 18px; background:#fafbf7; color:#929a8b; font-size:9px; }
@media(max-width:800px) { .global-search-shell { flex:1; width:auto; margin-left:10px; } }
@media(max-width:600px) { .global-search-results { position:fixed; top:72px; left:12px; right:12px; width:auto; max-width:none; }.global-search-groups { max-height:calc(100dvh - 240px); }.global-search-shell .global-search { padding:0 8px; }.global-search-shell input { font-size:11px; }.global-search-archived { font-size:8px; } }