@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

:root {
  --studio-orange: #ff5100;
  --studio-lime: #dff657;
  --studio-accent: #225e43;
  --hq-paper: #f5f7f3;
  --hq-soft: #e8eee8;
  --hq-ink: #17221e;
  --hq-muted: #50655b;
  --hq-line: #c9d5cc;
  --hq-blush: #e3ece5;
  --studio-panel: #fff;
}

html[data-theme=dark] {
  --studio-accent: var(--studio-lime);
  --hq-paper: #111a17;
  --hq-soft: #22332c;
  --hq-ink: #eff6f1;
  --hq-muted: #b5c9bf;
  --hq-line: #354e44;
  --hq-blush: #263a31;
  --studio-panel: #17231f;
}

html[data-theme] body {
  display: block;
  font-family: Inter, system-ui, sans-serif !important;
}

html[data-theme] body main {
  margin: 0 !important;
  width: 100% !important;
}

html[data-theme] body header.studio-header {
  display: block;
  height: auto;
  padding: 0 !important;
  border-bottom: 1px solid var(--hq-line) !important;
  background: var(--studio-panel) !important;
}

.studio-header-inner,
html[data-theme] body main .content {
  width: calc(100% - 48px);
  max-width: 1136px;
  margin: 0 auto;
}

.studio-header-inner {
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

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

.studio-brand {
  font-size: 16px;
  font-weight: 800;
  color: var(--hq-ink) !important;
  text-decoration: none;
  white-space: nowrap;
}

.studio-brand small {
  display: block;
  margin-top: 3px;
  color: var(--hq-muted) !important;
  font-size: 9px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.studio-mark {
  display: grid;
  place-items: center;
  width: 43px;
  height: 43px;
  border-radius: 12px;
  background: var(--studio-orange);
  color: #171b16 !important;
  font-size: 20px;
  letter-spacing: -1px;
}

.studio-actions { flex-wrap: wrap; justify-content: flex-end; }
.studio-actions :is(a, button) {
  background: transparent !important;
  border: 1px solid var(--hq-line) !important;
  border-radius: 8px;
  color: var(--hq-ink) !important;
  font-size: 12px;
  font-weight: 700;
  padding: 10px 13px;
  text-decoration: none;
}
.studio-actions .saved {
  display: inline-block;
  padding: 6px 10px;
  border-radius: 20px;
  background: var(--hq-soft);
  color: var(--hq-ink) !important;
}

html[data-theme] body main .content { padding: 32px 0 !important; }
.titlebar {
  position: relative;
  overflow: hidden;
  min-height: 211px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 25px;
  padding: 32px 38px !important;
  margin: 0 !important;
  border-radius: 20px;
  background: var(--studio-orange);
  color: #171b16 !important;
}
.titlebar .eyebrow { color: #171b16 !important; }
.titlebar h1#pagetitle {
  color: #171b16 !important;
  font-family: Inter, system-ui, sans-serif !important;
  font-size: clamp(42px, 7vw, 74px) !important;
  font-weight: 900 !important;
  letter-spacing: -.085em !important;
  margin: 12px 0 8px;
}
.studio-period { color: var(--studio-lime); }
html[data-theme] body .titlebar p { color: #171b16 !important; margin: 0; }
.studio-art { position: relative; flex: 0 0 150px; height: 112px; margin-right: 26px; }
.studio-art span { position: absolute; width: 97px; height: 97px; border-radius: 16px; }
.studio-art span:nth-child(1) { left: 2px; top: 10px; border: 1px solid #ffc49d; transform: rotate(-16deg); }
.studio-art span:nth-child(2) { left: 26px; top: 7px; background: #005943; transform: rotate(-6deg); }
.studio-art span:nth-child(3) { left: 46px; top: 5px; padding: 14px 18px; background: var(--studio-lime); color: #005943; font-size: 23px; font-weight: 800; transform: rotate(7deg); }

html[data-theme] body nav.studio-nav {
  display: flex;
  gap: 24px;
  margin: 15px 0 19px;
  padding: 0;
  border-bottom: 1px solid var(--hq-line);
}
html[data-theme] body nav.studio-nav button {
  width: auto;
  padding: 14px 0;
  border: 0 !important;
  border-bottom: 3px solid transparent !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--hq-muted) !important;
  font-weight: 700;
}
html[data-theme] body nav.studio-nav button.active {
  border-bottom-color: var(--studio-orange) !important;
  color: var(--hq-ink) !important;
}

.hq-brief, .hq-metric, .hq-panel, .hq-resources .hq-panel,
html[data-theme] body :is(.import-controls,.import-card,.source-empty,dialog) {
  background: var(--studio-panel) !important;
  border: 1px solid var(--hq-line) !important;
  border-radius: 16px !important;
  color: var(--hq-ink) !important;
}
.hq-brief { padding: 25px; }
.hq-brief h2, .hq-metric strong { font-family: Inter, system-ui, sans-serif; font-weight: 850; }
.hq-brief p, .hq-money p { color: var(--hq-muted) !important; }
.hq-label, .hq-panel>h2, .hq-money h3, .hq-money .hq-status,
.hq-metric.m1 strong, .hq-metric.m2 strong, .hq-deadline strong { color: var(--studio-accent) !important; }
.hq-metric.m2 { background: var(--hq-soft) !important; }
.hq-money a { color: var(--hq-ink); }
.hq-topline { margin-bottom: 10px; }
.hq-brief-foot button, html[data-theme] body .primary {
  background: var(--studio-orange) !important;
  color: #171b16 !important;
  border-color: transparent !important;
  border-radius: 8px;
}
html[data-theme] body .flowtabs button[aria-selected=true] {
  background: var(--studio-lime) !important;
  color: #17221e !important;
}
button:focus-visible, a:focus-visible { outline-color: var(--studio-accent) !important; }

@media (max-width: 650px) {
  .studio-header-inner, html[data-theme] body main .content { width: calc(100% - 32px); }
  .studio-header-inner { padding: 12px 0; align-items: flex-start; }
  .studio-actions { gap: 6px; }
  .studio-actions .saved { display: none; }
  .titlebar { padding: 24px !important; min-height: 160px; }
  .studio-art { display: none; }
}

.week-overview { margin-bottom: 18px; }
.week-header { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.week-header h2 { margin: 6px 0 0; font-size: clamp(25px, 4vw, 34px); letter-spacing: -.045em; }
.week-day { margin-top: 18px; border-top: 1px solid var(--hq-line); padding-top: 13px; }
.week-day h3 { margin: 0; color: var(--studio-accent); font-size: 14px; }
.week-empty { padding: 12px; background: var(--hq-soft); border-radius: 8px; }

.hq-panel.overdue-overview {
  --overdue-text: #942c20;
  margin-bottom: 18px;
  border-color: #d98370 !important;
  border-left: 5px solid #bb4634 !important;
  background: #fff0e9 !important;
}
html[data-theme=dark] .hq-panel.overdue-overview {
  --overdue-text: #ffb3a1;
  border-color: #a75949 !important;
  border-left-color: #ed8a75 !important;
  background: #30211e !important;
}
.overdue-overview .week-header { margin-bottom: 6px; }
.overdue-overview .week-header h2 { margin: 0; }
.overdue-overview .week-header h2,
.overdue-overview .hq-row > span:last-child { color: var(--overdue-text); font-weight: 800; }
.overdue-count {
  padding: 5px 10px;
  border: 1px solid currentColor;
  border-radius: 999px;
  color: var(--overdue-text);
  font-size: 12px;
  font-weight: 700;
}
.overdue-overview .hq-row:last-child { border-bottom: 0 !important; }

.project-assignee b {
  display: inline-block;
  margin-left: 4px;
  color: var(--hq-ink);
  font-weight: 700;
}

.assignee-filter {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 14px;
  margin-bottom: 16px;
}
.assignee-filter label { color: var(--hq-ink); font-size: 13px; font-weight: 700; }
.assignee-filter select {
  max-width: 100%;
  min-width: 160px;
  padding: 8px 12px;
  border: 1px solid var(--hq-line);
  border-radius: 8px;
  background: var(--studio-panel);
  color: var(--hq-ink);
  font: inherit;
}

html[data-theme] body .studio-actions #hqSync {
  background: var(--studio-orange) !important;
  color: #171b16 !important;
  white-space: nowrap;
}

.studio-actions #headerSyncTime[hidden] { display: none; }
@media (max-width: 650px) {
  .studio-actions #headerSyncTime:not([hidden]) {
    display: block;
    flex-basis: 100%;
    text-align: right;
    font-size: 10px;
  }
}

html[data-theme] body #flowtabs:not([hidden]) {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  border: 0;
  padding: 0;
  margin-bottom: 20px;
}
html[data-theme] body #flowtabs button {
  flex: 1 1 140px;
  justify-content: center;
  min-height: 46px;
  white-space: normal;
  border: 1px solid var(--hq-line) !important;
  border-radius: 9px !important;
  background: var(--studio-panel) !important;
  color: var(--hq-ink) !important;
}
html[data-theme] body #flowtabs button:hover {
  border-color: var(--studio-accent) !important;
  background: var(--hq-soft) !important;
}
html[data-theme] body #flowtabs button[aria-selected=true] {
  border-color: var(--studio-lime) !important;
  background: var(--studio-lime) !important;
  color: #17221e !important;
  font-weight: 800;
}

.project-assignee .assignee-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  vertical-align: middle;
  margin-top: 2px;
  margin-bottom: 2px;
}
.assignee-avatar {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 21px;
  height: 21px;
  overflow: hidden;
  border-radius: 50%;
  background: var(--studio-lime);
  color: #17221e;
  font-size: 11px;
}
.assignee-avatar img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.assignee-avatar img[hidden] { display: none; }

#studioAdmin[hidden], .assignee-filter[hidden] { display: none !important; }

.admin-finance { grid-column: 1 / -1; }
.admin-finance > .hq-grid { margin-top: 16px; }


.card-fields {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 10px 0;
}
.card-field {
  padding: 4px 7px;
  border: 1px solid var(--hq-line);
  border-radius: 6px;
  background: var(--hq-soft);
  color: var(--hq-ink);
  font-size: 12px;
  overflow-wrap: anywhere;
}

.overview-columns {
  display: grid;
  gap: 18px;
  align-items: start;
}
.overview-columns > * { min-width: 0; }
@media (min-width: 900px) {
  .overview-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.project-thumbnail {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 12 / 5;
  margin: 10px 0 12px;
  overflow: hidden;
  border: 1px solid var(--hq-line);
  border-radius: 8px;
  background: var(--hq-soft);
  color: var(--hq-muted);
  font-size: 12px;
}
.project-thumbnail img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--studio-panel);
}
.project-thumbnail img[hidden] { display: none; }

html[data-theme] body #importDetails {
  position: fixed;
  inset: 0;
  margin: auto !important;
  width: min(720px, calc(100vw - 32px));
  max-height: min(85dvh, 850px);
  height: fit-content;
  padding: clamp(18px, 4vw, 32px);
  overscroll-behavior: contain;
}
#importDetails::backdrop { background: rgb(0 0 0 / 62%); }
#importDetails .import-detail-desc { white-space: normal; margin: 16px 0; }
#importDetails .import-detail-desc p { margin: 6px 0; }
#importDetails .import-detail-desc h3 { margin: 18px 0 6px; color: var(--hq-ink); font-size: 16px; }
#importDetails .import-detail-desc :is(ul, ol) { margin: 8px 0 12px; padding-left: 22px; }
#importDetails .import-detail-desc hr { border: 0; border-top: 1px solid var(--hq-line); margin: 16px 0; }
#importDetails .import-detail-desc a { color: var(--studio-accent); }

.import-card > h2 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  overflow-wrap: anywhere;
}

.import-card-top .card-fields {
  justify-content: flex-end;
  margin: 0 0 0 auto;
  min-width: 0;
}
.import-card .import-card-meta .project-assignee {
  margin-left: auto;
  text-align: right;
}

.hq-row.active-project-row { flex-wrap: nowrap; }
.active-project-main strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.active-project-date { flex-shrink: 0; text-align: right; white-space: nowrap; }
.active-project-date.is-overdue { color: #a62f26; font-weight: 700; }
html[data-theme=dark] .active-project-date.is-overdue { color: #ffb3a1; }
.active-project-date b { display: block; margin-bottom: 3px; }

.active-project-date.is-soon { color: #795600; font-weight: 700; }
html[data-theme=dark] .active-project-date.is-soon { color: #ffda67; }

.overview-columns .overview-heading { margin: 0 0 10px; }
.overview-columns .overview-heading h2 {
  margin: 0;
  font-size: clamp(20px, 2.4vw, 26px);
  line-height: 1.2;
}
.overview-count {
  flex-shrink: 0;
  padding: 4px 9px;
  border: 1px solid var(--hq-line);
  border-radius: 999px;
  color: var(--hq-muted);
  font-size: 11px;
  font-weight: 700;
}
.overdue-overview .overview-count { border-color: currentColor; color: var(--overdue-text); }

.overview-schedule {
  display: grid;
  gap: 18px;
}
.overview-schedule > .hq-panel {
  margin: 0;
  border-left: 5px solid var(--hq-line) !important;
}
.overview-schedule > .overdue-overview {
  border-left-color: var(--overdue-text) !important;
}
:is(.overview-schedule > .week-overview, #todoistCards .task-list.week-overview) {
  --week-accent: #795600;
  background: #fff7dc !important;
  border-color: #c5a448 !important;
  border-left-color: #b68b16 !important;
}
html[data-theme=dark] :is(.overview-schedule > .week-overview, #todoistCards .task-list.week-overview) {
  --week-accent: #ffda67;
  background: #302919 !important;
  border-color: #8e7635 !important;
  border-left-color: var(--week-accent) !important;
}
.week-overview :is(.overview-heading h2, .overview-count, .week-day h3) {
  color: var(--week-accent);
}
.week-overview .overview-count { border-color: currentColor; }
.overview-schedule .hq-row:last-child { border-bottom: 0 !important; }
.overview-schedule .week-day:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; }

/* Frosted surfaces and graphite controls. */
:root {
  --studio-orange: #252527;
  --studio-lime: #e8e8e9;
  --studio-accent: #424247;
  --hq-paper: #e2e2e5;
  --hq-soft: #ededf0;
  --hq-ink: #242428;
  --hq-muted: #55555d;
  --hq-line: #c4c4cb;
  --hq-blush: #e5e5e9;
  --studio-panel: rgb(255 255 255 / 86%);
  --studio-action-text: #fff;
  --studio-glass: rgb(255 255 255 / 43%);
  --studio-shadow: 0 12px 34px rgb(25 25 33 / 8%);
  --studio-backdrop: radial-gradient(ellipse at 12% 8%, #fafafb 0%, transparent 48%),
    radial-gradient(ellipse at 90% 4%, #a8a8ae 0%, transparent 46%),
    linear-gradient(138deg, #d4d4d9, #efeff1 44%, #c7c7cd 78%, #e8e8eb);
}
html[data-theme=dark] {
  --studio-orange: #f0f0f2;
  --studio-lime: #f0f0f2;
  --studio-accent: #e4e4e8;
  --hq-paper: #171719;
  --hq-soft: #2d2d32;
  --hq-ink: #f5f5f6;
  --hq-muted: #bcbcc4;
  --hq-line: #46464e;
  --hq-blush: #35353c;
  --studio-panel: rgb(35 35 39 / 96%);
  --studio-action-text: #202024;
  --studio-glass: rgb(43 43 47 / 67%);
  --studio-shadow: 0 12px 34px rgb(0 0 0 / 18%);
  --studio-backdrop: radial-gradient(ellipse at 12% 0%, #47474e 0%, transparent 45%),
    radial-gradient(ellipse at 100% 30%, #37373e 0%, transparent 46%),
    linear-gradient(140deg, #171719, #232326 45%, #161618);
}
html[data-theme] body main {
  min-height: 100vh;
  background: var(--studio-backdrop) !important;
}
html[data-theme] body main .content {
  background: transparent !important;
}
html[data-theme] body header.studio-header {
  background: var(--studio-glass) !important;
  backdrop-filter: blur(12px);
}
.studio-mark {
  background: var(--studio-orange);
  color: var(--studio-action-text) !important;
}
html[data-theme] body :is(.primary, .studio-actions #hqSync) {
  color: var(--studio-action-text) !important;
  background: var(--studio-orange) !important;
}
html[data-theme] body .titlebar {
  border: 1px solid var(--hq-line);
  border-radius: 28px;
  background: var(--studio-glass);
  box-shadow: var(--studio-shadow);
}
html[data-theme] body .titlebar :is(.eyebrow, h1#pagetitle, p) {
  color: var(--hq-ink) !important;
}
.studio-period { color: var(--hq-muted); }
.studio-art span:nth-child(1) { border-color: var(--hq-muted); }
.studio-art span:nth-child(2) { background: #414145; }
.studio-art span:nth-child(3) { background: #f4f4f5; color: #242428; }

html[data-theme] body :is(.hq-panel, .import-card, .source-empty, #importDetails) {
  border-radius: 22px !important;
  box-shadow: var(--studio-shadow) !important;
}
html[data-theme] body #flowtabs button { border-radius: 999px !important; }
html[data-theme] body #flowtabs button[aria-selected=true] {
  background: var(--studio-orange) !important;
  border-color: var(--studio-orange) !important;
  color: var(--studio-action-text) !important;
}
html[data-theme] body :is(.import-count, .import-labels span, .card-field) {
  background: var(--hq-soft);
  color: var(--hq-ink);
}
html[data-theme] body .import-list { color: var(--hq-muted); }
html[data-theme] body .overview-schedule > .week-overview { border-left-color: #b68b16 !important; }
html[data-theme=dark] body .overview-schedule > .week-overview { border-left-color: var(--week-accent) !important; }

 .studio-brand {
  width: clamp(126px, 20vw, 200px);
  flex-shrink: 0;
}
.studio-brand img { display: block; width: 100%; height: auto; }

.personal-tasks-link {
  display: inline-flex;
  align-items: center;
  padding: 14px 0;
  border-bottom: 3px solid transparent;
  color: var(--hq-muted);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}
.personal-tasks-link:hover { color: var(--hq-ink); }

/* Solid workspace surfaces with orange navigation and controls. */
:root {
  --studio-orange: #bd4709;
  --studio-lime: #ffb17c;
  --studio-accent: #9b3808;
  --studio-action-text: #fff;
  --hq-paper: #f0efed;
  --hq-ink: #212123;
  --hq-muted: #55545a;
  --hq-line: #d5d3d0;
  --hq-soft: #eae8e5;
  --hq-blush: #f4e4d9;
  --studio-panel: #fff;
  --studio-glass: #faf9f7;
  --studio-backdrop: #f0efed;
  --studio-shadow: none;
}
html[data-theme=dark] {
  --studio-orange: #ff9959;
  --studio-lime: #ff9959;
  --studio-accent: #ffab76;
  --studio-action-text: #1d1510;
  --hq-paper: #17181a;
  --hq-ink: #f4f3f2;
  --hq-muted: #b9b8bc;
  --hq-line: #414246;
  --hq-soft: #303135;
  --hq-blush: #38291f;
  --studio-panel: #252629;
  --studio-glass: #111214;
  --studio-backdrop: #17181a;
  --studio-shadow: none;
}
html[data-theme] body header.studio-header {
  backdrop-filter: none;
}
html[data-theme] body .titlebar {
  background: var(--studio-panel);
  border-radius: 26px;
}
.studio-period { color: var(--studio-accent); }
html[data-theme] body .studio-actions :is(button, a),
.assignee-filter select { border-radius: 10px; }
html[data-theme] body .studio-actions #hqSync { border-color: transparent !important; }
html[data-theme] body nav.studio-nav button.active {
  border-bottom-color: var(--studio-accent) !important;
}
.personal-tasks-link:hover { color: var(--studio-accent); }
html[data-theme] body #flowtabs button {
  border-radius: 12px !important;
}
html[data-theme] body #flowtabs button[aria-selected=true] .import-count {
  background: rgb(0 0 0 / 18%);
  color: inherit;
}
html[data-theme] body .import-card:hover {
  border-color: var(--studio-accent) !important;
  background: var(--hq-soft) !important;
}
html[data-theme] body :is(.hq-panel, .import-card) {
  border-radius: 24px !important;
}

/* Compact workspace typography. */
html[data-theme] body header.studio-header {
  background: var(--studio-glass) !important;
}
.studio-header-inner { min-height: 76px; }
.studio-header-inner,
html[data-theme] body main .content {
  width: calc(100% - 64px);
  max-width: 1280px;
}
html[data-theme] body .titlebar {
  min-height: 0;
  padding: 6px 0 16px !important;
  background: transparent;
  border: 0;
  border-radius: 0;
}
html[data-theme] body .titlebar h1#pagetitle {
  font-size: clamp(36px, 4vw, 54px) !important;
  font-weight: 650 !important;
  letter-spacing: -.045em !important;
  margin: 7px 0;
}
html[data-theme] body .studio-actions :is(button,a) { border-radius: 999px !important; }
html[data-theme] body nav.studio-nav { margin: 8px 0 22px; gap: 28px; }
html[data-theme] body nav.studio-nav :is(button,a) { font-size: 14px; font-weight: 550; }
html[data-theme] body .assignee-filter select {
  background: var(--hq-soft);
  border-color: transparent;
  font-size: 13px;
  border-radius: 12px;
}
html[data-theme] body #flowtabs button {
  min-height: 42px;
  border-radius: 999px !important;
}
html[data-theme] body :is(.hq-panel,.import-card) { border-radius: 28px !important; }
html[data-theme=dark] body .import-card { border-color: #303135 !important; }
html[data-theme=dark] body .import-card:hover { border-color: var(--studio-accent) !important; }
.import-card > h2 { font-weight: 600; letter-spacing: -.025em; }
@media (max-width: 720px) {
  html[data-theme] body main .content { width: calc(100% - 30px); padding-top: 22px !important; }
  .studio-header-inner { width: calc(100% - 30px); }
  html[data-theme] body nav.studio-nav { gap: 16px; flex-wrap: wrap; }
  html[data-theme] body nav.studio-nav :is(button,a) { font-size: 12px; }
}

html[data-theme] body {
  --studio-orange: #FF5300;
  --studio-lime: #FF5300;
  --studio-action-text: #fff;
}
html[data-theme] body header.studio-header {
  --hq-line: #414246;
  --hq-ink: #f4f3f2;
  --hq-soft: #292a2d;
  --studio-glass: #111214;
}
html[data-theme] body nav.studio-nav button.active {
  border-bottom-color: #FF5300 !important;
}
.studio-period { color: #FF5300; }

html[data-theme] body .import-card {
  padding: 19px;
  border-radius: 24px !important;
}
.import-card .project-thumbnail { border: 0; border-radius: 13px; }
.import-card .import-card-meta { padding-top: 12px; }
.card-progress { margin-top: 12px; }
.card-progress-label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 6px;
  font-size: 12px;
  color: var(--hq-muted);
}
.card-progress-label b { color: var(--hq-ink); font-variant-numeric: tabular-nums; }
.card-progress progress {
  display: block;
  width: 100%;
  height: 5px;
  appearance: none;
  border: 0;
  border-radius: 999px;
  overflow: hidden;
  background: var(--hq-soft);
  accent-color: #FF5300;
}
.card-progress progress::-webkit-progress-bar { background: var(--hq-soft); }
.card-progress progress::-webkit-progress-value { background: #FF5300; border-radius: 999px; }
.card-progress progress::-moz-progress-bar { background: #FF5300; border-radius: 999px; }

.project-card-labels {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--hq-muted);
  font-size: 12px;
  font-weight: 600;
}
.import-card-top:has(.project-card-labels:empty):not(:has(.card-fields)) { display: none; }

.assignee-filter {
  display: grid;
  width: 100%;
  grid-template-columns: minmax(150px, 1.4fr) repeat(4, minmax(0, 1fr));
  align-items: stretch;
}
.filter-control { display: flex; align-items: center; gap: 8px; min-width: 0; }
.filter-control label { white-space: nowrap; }
.assignee-filter .filter-control select { flex: 1; min-width: 0; width: 100%; }
#cardSearch {
  min-width: 0;
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--hq-line);
  border-radius: 12px;
  background: var(--hq-soft);
  color: var(--hq-ink);
  font: inherit;
  font-size: 13px;
}
@media (max-width: 1000px) {
  .assignee-filter { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #cardSearch { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
  .assignee-filter { grid-template-columns: minmax(0, 1fr); }
}

#personalTasks[hidden] { display: none; }
#todoistFrame { display: block; width: 100%; height: min(680px, 80vh); border: 0; border-radius: 20px; }
.personal-help { font-size: 12px; color: var(--hq-muted); }
.personal-help a { color: inherit; }

#todoistCards .task-heading{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:20px}
#todoistCards .task-heading h2{font-size:22px;letter-spacing:-.035em;margin:0}
#todoistCards .action{background:#FF5300;color:#fff;border-radius:999px;font-size:13px}
#todoistCards .task-heading{justify-content:flex-end}
#todoistCards .task-list{min-width:0;margin-bottom:20px;padding:22px;border:1px solid var(--hq-line);border-inline-start-width:5px;border-radius:24px;background:var(--studio-panel)}
#todoistCards .task-lists{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;align-items:start}
#todoistCards .task-list-header{display:flex;justify-content:space-between;gap:10px;align-items:center;margin-bottom:12px}
#todoistCards .task-list-header h2{margin:0;font-size:24px;letter-spacing:-.035em}
#todoistCards .task-grid{display:block;margin:0}
#todoistCards .task-grid li{position:relative;margin:0;padding:0;border:0}
#todoistCards .task-grid li+li{border-top:1px solid var(--hq-line)}
#todoistCards .task-grid li:has(.task-complete) .task-card{padding-left:28px}
#todoistCards .task-complete{position:absolute;left:0;top:50%;transform:translateY(-50%);margin:0;width:17px;height:17px;accent-color:#FF5300;cursor:pointer}
#todoistCards .task-card{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:52px;padding:10px 0;color:var(--hq-ink);text-decoration:none}
#todoistCards .task-grid li[draggable=true] .task-card{cursor:grab}
#todoistCards .task-card:hover{background:var(--hq-soft)}
#todoistCards .task-card:focus-visible{outline:2px solid #FF5300;outline-offset:2px}
#todoistCards .task-card strong{min-width:0;overflow-wrap:anywhere;font-size:14px}
#todoistCards .task-card time{flex-shrink:0;color:var(--hq-muted);font-size:12px;text-align:right}
#todoistCards .add-task{position:relative}
#todoistCards .add-task summary{list-style:none;white-space:nowrap;border:1px solid var(--hq-line);border-radius:999px;padding:6px 10px;color:var(--hq-ink);font-size:12px;cursor:pointer}
#todoistCards .add-task summary:hover{border-color:#FF5300}
#todoistCards .add-task form{position:absolute;z-index:2;right:0;top:calc(100% + 8px);width:min(230px,65vw);padding:12px;background:var(--studio-panel);color:var(--hq-ink);border:1px solid var(--hq-line);border-radius:12px}
#todoistCards .add-task input{display:block;box-sizing:border-box;width:100%;margin:6px 0 10px;padding:8px}
#todoistCards .add-task label{font-size:12px}
#todoistCards .add-task .action{border:0;cursor:pointer}
#todoistCards .task-grid .is-dragging{opacity:.35}
#todoistCards .task-grid .is-drop-target .task-card,#todoistCards .task-list.is-drop-target{outline:2px dashed #FF5300;outline-offset:3px;border-radius:18px}
.task-drag-preview{position:fixed;left:-1000px;top:0;transform:rotate(5deg);background:#FF5300;color:#16110d;font-weight:700;padding:16px;border-radius:14px;width:200px;overflow-wrap:anywhere}

  @media(max-width:950px){#todoistCards .task-lists{grid-template-columns:1fr}
}

#todoistCards ul { list-style:none; padding:0; }

/* Personal Tasks uses the same flat list treatment in every panel. */
#todoistCards .task-list{background:transparent;border:0;border-radius:0;padding:0}
#todoistCards .task-list-header{display:contents}
#todoistCards .task-list-header h2{margin:0 0 12px}
#todoistCards .task-grid{margin:0}
#todoistCards .task-grid li{border-bottom:1px solid var(--hq-line)}
#todoistCards .task-grid li+li{border-top:0}
#todoistCards .task-card{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:4px;min-height:42px;padding-block:10px}
#todoistCards .task-card strong{font-weight:500}
#todoistCards .task-card time{text-align:left}
#todoistCards .task-complete{appearance:none;top:12px;transform:none;border:1px solid var(--hq-muted);border-radius:50%;background:transparent}
#todoistCards .task-complete:checked{background:#FF5300;border-color:#FF5300}
#todoistCards .task-complete:focus-visible{outline:2px solid #FF5300;outline-offset:2px}
#todoistCards .task-list{display:flex;flex-direction:column}
#todoistCards .add-task{order:1;margin-top:6px}
#todoistCards .add-task summary{display:inline-block;border:0;padding:5px 0;color:var(--hq-muted)}
#todoistCards .add-task summary::before{content:'+ ';margin-right:6px}
#todoistCards .add-task form{left:0;right:auto}

#todoistCards .task-heading button.action{padding:9px 15px;border:0;font:inherit;font-size:13px;font-weight:650;cursor:pointer}
#todoistCards .task-heading button.action:disabled{opacity:.65;cursor:wait}
#todoistCards #reorder-status:empty{margin:0}

.bookmark-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 235px), 1fr));
  gap: 16px;
}
.bookmark-card {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 84px;
  padding: 16px;
  border: 1px solid var(--hq-line);
  border-radius: 16px;
  background: var(--studio-panel);
  color: var(--hq-ink);
  text-decoration: none;
}
.bookmark-card:hover, .bookmark-card:focus-visible {
  border-color: var(--studio-accent);
}
.bookmark-icon {
  display: grid;
  place-items: center;
  flex: 0 0 42px;
  height: 42px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--studio-accent) 12%, transparent);
  color: var(--studio-accent);
  font-size: 24px;
  line-height: 1;
}
.bookmark-arrow {
  margin-inline-start: auto;
  color: var(--studio-accent);
}


#todoistCards .todoist-open {
  padding: 8px 14px;
  border: 1px solid var(--hq-line);
  border-radius: 999px;
  color: var(--hq-ink);
  font-size: 13px;
  font-weight: 650;
  text-decoration: none;
}
#todoistCards .todoist-open:hover,
#todoistCards .todoist-open:focus-visible {
  border-color: var(--studio-accent);
}

#todoistCards .task-sort {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  color: var(--hq-muted);
  font-size: 13px;
}
#todoistCards .task-sort select {
  padding: 4px 8px;
  border: 1px solid var(--hq-line);
  border-radius: 8px;
  background: var(--studio-panel);
  color: var(--hq-ink);
  font: inherit;
}

#todoistCards .task-list.week-overview {
  padding: 22px;
  border: 1px solid;
  border-inline-start-width: 5px;
  border-radius: 24px;
}
#todoistCards .week-overview .task-list-header {
  display: flex;
}
#todoistCards .week-overview .task-list-header h2,
#todoistCards .week-overview .task-card time {
  margin: 0;
  color: var(--week-accent);
}
#todoistCards .week-overview .task-grid li:last-child {
  border-bottom: 0;
}

#todoistCards .personal-due-schedule {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 350px), 1fr));
  gap: 20px;
  align-items: start;
}
#todoistCards .task-list.overdue-overview {
  padding: 22px;
  border: 1px solid #c87575;
  border-inline-start: 5px solid var(--overdue-text, #a52626);
  border-radius: 24px;
  background: #fff0ef;
  --overdue-text: #a52626;
}
html[data-theme=dark] #todoistCards .task-list.overdue-overview {
  background: #352022;
  border-color: #915356;
  border-inline-start-color: var(--overdue-text);
  --overdue-text: #ff9a9a;
}
#todoistCards .overdue-overview .task-list-header { display: flex; }
#todoistCards .overdue-overview .task-list-header h2,
#todoistCards .overdue-overview .task-card time {
  margin: 0;
  color: var(--overdue-text);
}
#todoistCards .overdue-overview .task-grid li:last-child { border-bottom: 0; }

/* Shared workspace styling across the existing views. */
html[data-theme] {
  --studio-orange: #FF5300;
  --studio-action-text: #fff;
  --workspace-radius: 34px;
  --workspace-inner-radius: 19px;
  --workspace-depth: 0 2px 4px #21180f06, 0 10px 28px #21180f09;
}
html[data-theme=light] {
  --studio-backdrop: #f4f2ef;
  --studio-panel: #fffdfa;
  --hq-line: #dedad5;
  --hq-soft: #eeebe7;
}
html[data-theme=dark] {
  --studio-backdrop: #18181a;
  --studio-panel: #232326;
  --hq-line: #3d3d42;
  --hq-soft: #2d2d31;
  --workspace-depth: 0 2px 4px #0002, 0 10px 26px #0002;
}
html[data-theme] body #pagetitle {
  font-family: Inter, system-ui, sans-serif;
  font-weight: 720;
  letter-spacing: -.05em;
}
html[data-theme] body nav.studio-nav {
  gap: 8px;
  padding: 5px;
  border: 1px solid var(--hq-line);
  border-radius: 24px;
  background: var(--studio-panel);
}
html[data-theme] body nav.studio-nav button {
  padding: 10px clamp(11px, 1.35vw, 19px);
  border: 0 !important;
  border-radius: 999px !important;
  font-weight: 650;
}
html[data-theme] body nav.studio-nav button:hover {
  background: var(--hq-soft) !important;
  color: var(--hq-ink) !important;
}
html[data-theme] body nav.studio-nav button.active {
  background: var(--studio-orange) !important;
  color: var(--studio-action-text) !important;
}
html[data-theme] body :is(.hq-panel, .import-card, .import-controls, .source-empty, #importDetails, dialog, .bookmark-card) {
  border-radius: var(--workspace-radius) !important;
  box-shadow: var(--workspace-depth) !important;
}
html[data-theme] body :is(.bookmark-card, .import-card) {
  transition: border-color 150ms ease, background-color 150ms ease;
}
html[data-theme] body .bookmark-card:hover {
  border-color: var(--studio-accent);
}
html[data-theme] body :is(.bookmark-icon, .project-thumbnail) {
  border-radius: var(--workspace-inner-radius);
}
html[data-theme] body :is(#cardSearch, .assignee-filter select, .studio-actions button) {
  border-radius: 999px !important;
}
html[data-theme] body #todoistCards .task-list {
  padding: clamp(16px, 2vw, 24px);
  border: 1px solid var(--hq-line);
  border-radius: var(--workspace-radius);
  background: var(--studio-panel);
  box-shadow: var(--workspace-depth);
}
html[data-theme] body #todoistCards .personal-due-schedule .task-list {
  border-inline-start-width: 5px;
}
html[data-theme] body #todoistCards .task-list.overdue-overview {
  background: #fff0ef;
  border-color: #c87575;
  border-inline-start-color: var(--overdue-text);
}
html[data-theme=dark] body #todoistCards .task-list.overdue-overview {
  background: #352022;
  border-color: #915356;
  border-inline-start-color: var(--overdue-text);
}
#todoistCards .task-list .task-list-header {
  display: flex;
  flex-wrap: wrap;
}
#todoistCards .task-list-header h2,
#todoistCards .task-sort {
  margin: 0;
}
#todoistCards .task-sort select { border-radius: 999px; }
#todoistCards .task-grid li:last-child { border-bottom: 0; }
@media (prefers-reduced-motion: reduce) {
  html[data-theme] body :is(.bookmark-card, .import-card) { transition: none; }
}

html[data-theme] body .overview-schedule > .hq-panel {
  border-left-width: 1px !important;
}
html[data-theme] body #todoistCards .personal-due-schedule .task-list {
  border-inline-start-width: 1px;
}

/* Solid deadline cards use the same silhouette in both themes. */
html[data-theme] body:has(.studio-nav) :is(#todoistCards, .overview-schedule) :is(.week-overview, .overdue-overview) {
  --deadline-fill: #ffc000;
  --hq-ink: #292016;
  --hq-muted: #54442e;
  --hq-line: #b18400;
  --hq-soft: #ffd04d;
  --week-accent: var(--hq-ink);
  --overdue-text: var(--hq-ink);
  background: var(--deadline-fill) !important;
  color: var(--hq-ink) !important;
  border: 0 !important;
  border-radius: var(--workspace-radius) !important;
}
html[data-theme] body:has(.studio-nav) :is(#todoistCards, .overview-schedule) .overdue-overview {
  --deadline-fill: #ff6256;
  --hq-ink: #321c1a;
  --hq-muted: #603d38;
  --hq-line: #b83d35;
  --hq-soft: #ff8278;
}
html[data-theme] body:has(.studio-nav) :is(#todoistCards, .overview-schedule) :is(.week-overview, .overdue-overview)
:is(h2, .hq-row, .hq-row strong, .hq-row small, .hq-row > span, .task-card, time) {
  color: var(--hq-ink) !important;
}

html[data-theme] body:has(.studio-nav) :is(#todoistCards, .overview-schedule) :is(.week-overview, .overdue-overview) .overview-count {
  background: #171414;
  color: #fff !important;
  border-color: transparent;
  font-variant-numeric: tabular-nums;
}

html[data-theme] body:has(.studio-nav) :is(#todoistCards, .overview-schedule)
:is(.week-overview, .overdue-overview) .task-card:is(:hover, :focus-visible) {
  background: var(--hq-soft) !important;
  border-radius: 12px;
}

html[data-theme] body .assignee-filter :is(input, select):hover {
  box-shadow: inset 0 0 0 1px var(--studio-accent);
}

:is(#hq, #workspace) .overview-row-meta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-shrink: 0;
}
:is(#hq, #workspace) .overview-assignees {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0;
  margin: 0;
}
:is(#hq, #workspace) .overview-assignees .assignee-chip {
  display: inline-flex;
  padding: 0;
  background: none;
}
:is(#hq, #workspace) .overview-assignees .assignee-chip + .assignee-chip {
  margin-inline-start: -7px;
}
:is(#hq, #workspace) .overview-assignees .assignee-avatar {
  width: 25px;
  height: 25px;
  border: 2px solid var(--deadline-fill, var(--studio-panel));
  border-radius: 50%;
}
@media (max-width: 480px) {
  :is(#hq, #workspace) .overview-row-meta { gap: 5px; }
  :is(#hq, #workspace) .overview-assignees .assignee-avatar { width: 21px; height: 21px; }
}

html[data-theme] body:has(.studio-nav) #hq .hq-row:is(:hover, :focus-visible) {
  background: transparent !important;
}
:is(#hq, #workspace) .hq-row .active-project-main strong {
  position: relative;
  padding-inline-start: 0;
  transition: padding-inline-start 150ms ease;
}
:is(#hq, #workspace) .hq-row:is(:hover, :focus-visible) .active-project-main strong {
  padding-inline-start: 17px;
  text-decoration: underline;
  text-underline-offset: 4px;
}
:is(#hq, #workspace) .hq-row:is(:hover, :focus-visible) .active-project-main strong::before {
  content: "";
  position: absolute;
  inset-inline-start: 1px;
  top: .42em;
  width: 6px;
  height: 6px;
  border-block-start: 2px solid currentColor;
  border-inline-end: 2px solid currentColor;
  transform: rotate(45deg);
}
@media (prefers-reduced-motion: reduce) {
  :is(#hq, #workspace) .hq-row .active-project-main strong { transition: none; }
}

html[data-theme] body #hq .week-overview .week-empty {
  background: transparent;
  padding: 0;
  color: var(--hq-ink) !important;
  font-size: 15px;
  font-weight: 700;
}

html[data-theme] body #hq .overview-schedule :is(.week-overview, .overdue-overview) .hq-row .active-project-date {
  color: var(--hq-ink) !important;
  font-weight: 700;
}
html[data-theme] body #hq .overview-schedule :is(.week-overview, .overdue-overview) .hq-row .active-project-date b {
  color: inherit !important;
}

html[data-theme] body :is(nav.studio-nav button.active, #flowtabs button[aria-selected=true]) {
  background: var(--studio-orange) !important;
  border-color: var(--studio-orange) !important;
  color: var(--studio-action-text) !important;
}
html[data-theme] body #flowtabs button[aria-selected=true] :is(span, small, b) {
  color: inherit !important;
}

#projectLayoutBar {
  position: relative;
  justify-self: end;
  z-index: 3;
}
.assignee-filter:has(#projectLayoutBar:not([hidden])) {
  grid-template-columns: minmax(150px, 1.4fr) repeat(4, minmax(0, 1fr)) auto;
}
#projectLayoutBar summary {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 12px;
  background: var(--hq-soft);
  color: var(--hq-ink);
  font-size: 19px;
  cursor: pointer;
  list-style: none;
}
#projectLayoutBar summary::-webkit-details-marker { display: none; }
.layout-menu {
  position: absolute;
  inset-inline-end: 0;
  top: calc(100% + 8px);
  width: 176px;
  padding: 10px;
  border: 1px solid var(--hq-line);
  border-radius: 24px;
  background: var(--studio-panel);
  box-shadow: 0 12px 26px #0003;
}
.layout-menu > span { display: block; padding: 6px 10px; color: var(--hq-muted); font-size: 12px; }
.layout-menu button {
  display: grid;
  grid-template-columns: 15px 1fr 18px;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 40px;
  padding: 8px 10px;
  border: 0;
  border-radius: 13px;
  background: transparent;
  color: var(--hq-ink);
  text-align: start;
}
.layout-menu button > span { text-align: center; }
.layout-menu button::before {
  content: "";
  width: 10px;
  height: 5px;
  border-inline-start: 2px solid currentColor;
  border-block-end: 2px solid currentColor;
  transform: rotate(-45deg);
  visibility: hidden;
}
.layout-menu button[aria-pressed=true] {
  font-weight: 650;
}
.layout-menu button[aria-pressed=true]::before { visibility: visible; }
#workspace .project-list .active-project-main { display: flex; align-items: center; gap: 24px; }
#workspace .list-thumbnail {
  flex: 0 0 clamp(36px, 8vw, 76px);
}
#workspace .list-thumbnail .project-thumbnail {
  aspect-ratio: 12 / 5;
  overflow: hidden;
  border-radius: 7px;
  margin: 0;
}
#workspace .list-thumbnail img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 950px) {
  .assignee-filter:has(#projectLayoutBar:not([hidden])) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .assignee-filter:has(#projectLayoutBar:not([hidden])) { grid-template-columns: minmax(0, 1fr); }
}
html[data-theme] body #workspace .project-list .hq-row:is(:hover, :focus-visible) {
  background: transparent !important;
}

html[data-theme] body #flowtabs:not([hidden]) {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
html[data-theme] body #flowtabs button {
  display: inline-flex;
  flex: 1 0 120px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 36px;
  width: auto;
  padding: 5px 12px;
  font-size: 13px;
  font-weight: 600;
}
html[data-theme] body #flowtabs button::before { content: none; }
html[data-theme] body #flowtabs button .import-count {
  margin: 0;
  min-width: 19px;
  padding: 2px 5px;
  border-radius: 999px;
  background: var(--hq-soft);
  color: var(--hq-muted);
  font-size: 11px;
  line-height: 1.2;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
html[data-theme] body #flowtabs button[aria-selected=true] .import-count {
  background: #fff3;
  color: inherit;
}

html[data-theme] body #flowtabs #dueTodayToggle {
  flex: 1 0 60px;
  min-width: max-content;
}
html[data-theme] body #flowtabs #dueTodayToggle[aria-checked=true] {
  color: #fff !important;
  background: #c12626 !important;
  border-color: #c12626 !important;
}

.project-card-labels:not(:empty) {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  white-space: normal;
}

html[data-theme] body .project-card-labels .card-field[data-trello-color] {
  background: var(--label-fill, var(--hq-soft));
  color: var(--label-ink, var(--hq-ink));
}
.project-card-labels [data-trello-color="green"] { --label-fill: #216e4e; --label-ink: white; }
.project-card-labels [data-trello-color="yellow"] { --label-fill: #f5cd47; --label-ink: #211900; }
.project-card-labels [data-trello-color="orange"] { --label-fill: #a54800; --label-ink: white; }
.project-card-labels [data-trello-color="red"] { --label-fill: #ae2e24; --label-ink: white; }
.project-card-labels [data-trello-color="purple"] { --label-fill: #5e4db2; --label-ink: white; }
.project-card-labels [data-trello-color="blue"] { --label-fill: #0055cc; --label-ink: white; }
.project-card-labels [data-trello-color="sky"] { --label-fill: #206a83; --label-ink: white; }
.project-card-labels [data-trello-color="lime"] { --label-fill: #4c6b1f; --label-ink: white; }
.project-card-labels [data-trello-color="pink"] { --label-fill: #943d73; --label-ink: white; }
.project-card-labels [data-trello-color="black"] { --label-fill: #45464a; --label-ink: white; }

html[data-theme] body .assignee-filter .filter-control {
  position: relative;
}
html[data-theme] body .assignee-filter .filter-control select {
  appearance: none;
  text-align: center;
  text-align-last: center;
  padding-inline: 24px !important;
}
html[data-theme] body .assignee-filter .filter-control::after {
  content: "";
  position: absolute;
  inset-inline-end: 13px;
  top: 50%;
  width: 5px;
  height: 5px;
  border-inline-end: 1.5px solid var(--hq-ink);
  border-block-end: 1.5px solid var(--hq-ink);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}

#workspace .import-card .import-card-meta { border-top: 0 !important; }
#workspace .import-card-meta .is-overdue { color: #a62f26; font-weight: 700; }
#workspace .import-card-meta .is-soon { color: #795600; font-weight: 700; }
html[data-theme=dark] #workspace .import-card-meta .is-overdue { color: #ff8e83; }
html[data-theme=dark] #workspace .import-card-meta .is-soon { color: #ffda67; }

#workspace .import-card .import-card-meta {
  display: flex;
  align-items: center;
  width: 100%;
}
#workspace .import-card .import-card-meta .project-assignee {
  margin-block: 0;
  margin-inline-start: auto;
  align-self: center;
}

html[data-theme] body .card-field.is-unpaid { color: #a62f26; }
html[data-theme=dark] body .card-field.is-unpaid { color: #ff8e83; }

#workspace .import-card > .project-title-split {
  display: block;
}
.project-title-split > span { display: block; }
.project-title-name {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.studio-heading {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: clamp(9px, 2vw, 22px);
}
.studio-heading .studio-brand { flex-shrink: 0; }
html[data-theme] body .studio-heading #pagetitle {
  margin: 0;
  padding-inline-start: clamp(9px, 2vw, 22px);
  border-inline-start: 1px solid var(--hq-line);
  color: var(--hq-ink);
  font-size: clamp(15px, 2vw, 25px);
  line-height: 1.15;
}
@media (max-width: 700px) {
  .studio-header-inner { flex-wrap: wrap; }
}

html[data-theme] body .assignee-filter:not([hidden]) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
html[data-theme] body .assignee-filter #cardSearch {
  flex: 1 1 170px;
  width: auto;
}
html[data-theme] body .assignee-filter .filter-control select {
  flex: none;
  width: auto;
  field-sizing: content;
  max-width: min(230px, 65vw);
  padding-inline: 19px 28px !important;
}

html[data-theme] body #projectLayoutBar .layout-menu button {
  background: transparent !important;
}

#workspace .import-card > .project-thumbnail { margin-block-end: 6px; }
#workspace .import-card > .project-thumbnail + h2 { margin-block-start: 8px; }
#workspace .import-card .import-card-meta {
  margin-block-start: 12px;
  padding-block-start: 4px;
}

html[data-theme] body nav.studio-nav .studio-chat {
  display: inline-flex;
  align-items: center;
  padding: 10px clamp(11px, 1.35vw, 19px);
  border-radius: 999px;
  background: #015D47;
  color: #fff;
  font-weight: 650;
  text-decoration: none;
}
html[data-theme] body nav.studio-nav .studio-chat:hover { background: #08745a; }

html[data-theme] body nav.studio-nav > :is(button, .studio-chat) {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: auto;
  height: 38px;
  padding: 0 16px;
  line-height: 1.2;
}

html[data-theme] body nav.studio-nav { align-items: center; }
html[data-theme] body nav.studio-nav > :is(button, .studio-chat) {
  margin-block: 0;
  padding-block: 0;
  align-self: center;
}

html[data-theme] body nav.studio-nav .studio-dropbox {
  margin-inline-start: auto;
  background: #0061ff;
}
html[data-theme] body nav.studio-nav .studio-dropbox:hover { background: #0054dc; }
html[data-theme] body nav.studio-nav { flex-wrap: wrap; }

html[data-theme] body nav.studio-nav .studio-gdrive {
  margin-inline-start: 0;
  background: #163d91;
}
html[data-theme] body nav.studio-nav .studio-gdrive:hover { background: #204da9; }

#workspace .import-card-top {
  min-height: 26px;
  align-items: flex-start;
}
#workspace .import-card-top .card-field {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  box-sizing: border-box;
  height: 26px;
  padding: 0 7px;
  border-radius: 6px;
  font-size: 12px;
  line-height: 1;
  white-space: nowrap;
}
#workspace .import-card-top .card-field strong { line-height: inherit; }

#workspace .project-list { overflow-x: auto; }
#workspace .project-list :is(.hq-row, .project-list-heading) {
  display: grid;
  grid-template-columns: 157px minmax(150px, 1fr) minmax(86px, .22fr) 70px minmax(95px, .23fr) minmax(110px, .23fr) 105px 105px 90px;
  align-items: center;
  gap: 14px;
  min-width: 1100px;
  text-align: start;
}
#workspace .project-list-heading {
  padding-block: 5px 12px;
  border-bottom: 1px solid var(--hq-line);
  color: var(--hq-muted);
  font-size: 11px;
  font-weight: 700;
}
#workspace .project-list :is(.active-project-date, .project-list-progress) {
  text-align: start;
  font-variant-numeric: tabular-nums;
}
#workspace .project-list .project-list-payment .card-fields { justify-content: flex-start; margin: 0; }
#workspace .project-list :is(.project-assignee, .project-list-heading > :last-child) { justify-content: start; text-align: start; }

#workspace .project-list .project-list-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#workspace .project-list :is(.project-card-labels, .card-fields) {
  flex-wrap: nowrap;
  overflow: hidden;
  white-space: nowrap;
}
#workspace .project-list .card-field { white-space: nowrap; }

#workspace .project-list .project-list-payment .card-field {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
#workspace .project-list .project-list-payment .card-field strong {
  display: inline;
}

#workspace .project-list {
  --list-thumbnail-width: 76px;
}
#workspace .project-list .list-thumbnail {
  flex-basis: var(--list-thumbnail-width);
}
#workspace .project-list .project-list-heading > :first-child {
  padding-inline-start: calc(var(--list-thumbnail-width) + 24px);
  white-space: nowrap;
}
#workspace .project-list :is(.hq-row, .project-list-heading) {
  column-gap: 16px;
  font-size: 13px;
}
#workspace .project-list .hq-row :is(strong, .active-project-date, .project-list-progress, .card-field, .project-assignee b) {
  font-size: inherit;
}

#workspace .project-list-title {
  position: relative;
  box-sizing: border-box;
  transition: padding-inline-start 150ms ease;
}
#workspace .project-list .hq-row:is(:hover, :focus-visible) .project-list-title {
  padding-inline-start: 17px;
}
#workspace .project-list .hq-row:is(:hover, :focus-visible) .project-list-title::before {
  content: "";
  position: absolute;
  inset-inline-start: 2px;
  top: 50%;
  width: 6px;
  height: 6px;
  border-block-start: 2px solid currentColor;
  border-inline-end: 2px solid currentColor;
  transform: translateY(-50%) rotate(45deg);
}
@media (prefers-reduced-motion: reduce) {
  #workspace .project-list-title { transition: none; }
}

#workspace .project-list-stage {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--hq-muted);
}

#workspace .import-card .import-card-meta:has(.is-overdue) {
  position: relative;
}
#workspace .import-card .import-card-meta:has(.is-overdue)::after {
  content: "!";
  position: absolute;
  top: calc(50% + 2px);
  left: 50%;
  translate: -50% -50%;
  display: grid;
  place-items: center;
  width: 23px;
  height: 23px;
  border-radius: 50%;
  background: #b42323;
  color: white;
  font: 800 16px/1 system-ui, sans-serif;
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  #workspace .import-card .import-card-meta:has(.is-overdue)::after {
    animation: overdue-indicator-pulse 1.2s ease-in-out infinite;
  }
}
@keyframes overdue-indicator-pulse {
  0%, 55%, 100% { scale: 1; }
  24% { scale: 1.32; }
}

/* Layered workspace surfaces, shared by both color modes. */
html[data-theme] {
  --workspace-radius: 26px;
  --workspace-inner-radius: 15px;
  --workspace-surface: linear-gradient(145deg, var(--studio-panel), var(--workspace-panel-edge));
  --workspace-ring: color-mix(in srgb, var(--hq-line) 75%, var(--workspace-glow));
}
html[data-theme=dark] {
  --hq-paper: #141414;
  --studio-backdrop: #141414;
  --studio-panel: #202020;
  --workspace-panel-edge: #282828;
  --workspace-glow: #2b2b2b;
  --hq-line: #414141;
  --hq-soft: #303030;
  --hq-ink: #f7f7f7;
  --hq-muted: #c2c2c2;
  --workspace-depth: 0 14px 30px #00000050, inset 0 1px #ffffff0c;
}
html[data-theme=light] {
  --hq-paper: #f4f4f4;
  --studio-backdrop: #f4f4f4;
  --studio-panel: #fff;
  --workspace-panel-edge: #f8f8f8;
  --workspace-glow: #e7e7e7;
  --hq-line: #dadada;
  --hq-soft: #eeeeee;
  --hq-ink: #1c1c1c;
  --hq-muted: #555555;
  --workspace-depth: 0 12px 28px #00000010, inset 0 1px #fff;
}
html[data-theme] body main {
  background: radial-gradient(ellipse at 85% 0%, var(--workspace-glow), transparent 62%) var(--studio-backdrop) !important;
}
html[data-theme] body main .content { background: transparent !important; }
html[data-theme] body header.studio-header {
  background: var(--workspace-surface) !important;
  border-color: var(--workspace-ring);
}
html[data-theme] body nav.studio-nav,
html[data-theme] body #projectLayoutBar .layout-menu {
  background: var(--workspace-surface);
  border-color: var(--workspace-ring);
  box-shadow: var(--workspace-depth);
}
html[data-theme] body #workspace :is(.import-card, .source-empty, .project-list),
html[data-theme] body #hq .hq-panel:not(.week-overview, .overdue-overview),
html[data-theme] body #todoistCards .task-list:not(.week-overview, .overdue-overview),
html[data-theme] body :is(.bookmark-card, #importDetails) {
  background: var(--workspace-surface) !important;
  border-color: var(--workspace-ring) !important;
}
html[data-theme] body #workspace .import-card:hover,
html[data-theme] body .bookmark-card:hover {
  border-color: var(--studio-orange) !important;
}
html[data-theme] body #workspace .import-card :is(.project-thumbnail, .card-progress progress) {
  box-shadow: inset 0 1px 2px #0002;
}
html[data-theme] body .assignee-filter :is(input, select),
html[data-theme] body #projectLayoutBar summary {
  background: var(--hq-soft);
  border: 1px solid var(--workspace-ring);
}
html[data-theme] body #flowtabs button:not([aria-selected=true], [aria-checked=true]) {
  background: var(--workspace-surface) !important;
  border-color: var(--workspace-ring) !important;
}
html[data-theme] body .overview-count {
  font-variant-numeric: tabular-nums;
}

/* Deadline surfaces carry the same layered look as the workspace cards. */
html[data-theme] body #hq .overview-schedule > .week-overview,
html[data-theme] body #todoistCards .personal-due-schedule .week-overview {
  --deadline-fill: #fff1cf;
  --hq-ink: #36260a;
  --hq-muted: #674d1b;
  --hq-line: #dac28a;
  --hq-soft: #f5e2b5;
  --deadline-edge: #ffe1a1;
}
html[data-theme] body #hq .overview-schedule > .overdue-overview,
html[data-theme] body #todoistCards .personal-due-schedule .overdue-overview {
  --deadline-fill: #ffe5e8;
  --hq-ink: #441c28;
  --hq-muted: #783746;
  --hq-line: #e7b2bd;
  --hq-soft: #f7cdd5;
  --deadline-edge: #ffc8d0;
}
html[data-theme=dark] body #hq .overview-schedule > .week-overview,
html[data-theme=dark] body #todoistCards .personal-due-schedule .week-overview {
  --deadline-fill: #28251c;
  --hq-ink: #ffdf91;
  --hq-muted: #edcc83;
  --hq-line: #806331;
  --hq-soft: #483824;
  --deadline-edge: #32291b;
}
html[data-theme=dark] body #hq .overview-schedule > .overdue-overview,
html[data-theme=dark] body #todoistCards .personal-due-schedule .overdue-overview {
  --deadline-fill: #2a2020;
  --hq-ink: #ffb7c4;
  --hq-muted: #f0a1b0;
  --hq-line: #805050;
  --hq-soft: #482929;
  --deadline-edge: #392524;
}
html[data-theme] body #hq .overview-schedule > :is(.week-overview, .overdue-overview),
html[data-theme] body #todoistCards .personal-due-schedule :is(.week-overview, .overdue-overview) {
  background: linear-gradient(145deg, var(--deadline-fill), var(--deadline-edge)) !important;
  box-shadow: inset 0 0 0 1px var(--hq-line), var(--workspace-depth) !important;
}
html[data-theme] body #todoistCards .task-list .task-card {
  border-radius: 12px;
}
html[data-theme] body .bookmark-icon {
  background: linear-gradient(145deg, var(--hq-soft), var(--workspace-glow));
}
html[data-theme] body #todoistCards :is(.task-sort select, .todoist-open) {
  background: var(--workspace-surface);
  border-color: var(--workspace-ring);
}

/* Match Projects typography and surfaces across the workspace. */
html[data-theme] body {
  font-family: Inter, system-ui, sans-serif !important;
}
html[data-theme] body :is(#hq .overview-heading h2, #todoistCards .task-list-header h2) {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -.025em;
  line-height: 1.35;
}
html[data-theme] body :is(#hq .hq-row strong, #todoistCards .task-card strong, .bookmark-card strong) {
  font-size: 13px;
  font-weight: 650;
  line-height: 1.4;
}
html[data-theme] body :is(#hq .active-project-date, #todoistCards .task-card time) {
  font-size: 12px;
}
html[data-theme] body :is(#hq, #todoistCards) .overview-count {
  font-size: 12px;
  line-height: 1;
  padding: 5px 8px;
  border-radius: 6px;
}
html[data-theme] body :is(#hq .overview-schedule, #todoistCards .personal-due-schedule)
:is(.week-overview, .overdue-overview) {
  --deadline-accent: #a62f26;
  --deadline-tint: #e37483;
  --hq-ink: #1c1c1c;
  --hq-muted: #555555;
  --hq-line: #dadada;
  --hq-soft: #eeeeee;
  background: linear-gradient(145deg, var(--studio-panel), color-mix(in srgb, var(--workspace-panel-edge), var(--deadline-tint) 12%)) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--hq-line), var(--deadline-tint) 35%), var(--workspace-depth) !important;
}
html[data-theme=dark] body :is(#hq .overview-schedule, #todoistCards .personal-due-schedule)
:is(.week-overview, .overdue-overview) {
  --deadline-accent: #ff9a9a;
  --hq-ink: #f7f7f7;
  --hq-muted: #c2c2c2;
  --hq-line: #414141;
  --hq-soft: #303030;
}
html[data-theme] body :is(#hq .overview-schedule, #todoistCards .personal-due-schedule) .week-overview {
  --deadline-accent: #795600;
  --deadline-tint: #f5bd37;
}
html[data-theme=dark] body :is(#hq .overview-schedule, #todoistCards .personal-due-schedule) .week-overview {
  --deadline-accent: #ffda67;
}
html[data-theme] body :is(#hq .overview-schedule, #todoistCards .personal-due-schedule)
:is(.week-overview, .overdue-overview) :is(h2, .hq-row .active-project-date, .task-card time, .overview-count) {
  color: var(--deadline-accent) !important;
}
html[data-theme] body :is(#hq .overview-schedule, #todoistCards .personal-due-schedule)
:is(.week-overview, .overdue-overview) .overview-count {
  background: var(--hq-soft);
}

html[data-theme] body header.studio-header {
  --hq-ink: #f7f7f7;
  --hq-muted: #c2c2c2;
  --hq-line: #414141;
  --hq-soft: #303030;
  color-scheme: dark;
  background: linear-gradient(145deg, #202020, #282828) !important;
  border-color: var(--hq-line);
}

html[data-theme] body #workspace .project-list-heading > button {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: start;
  white-space: nowrap;
  cursor: pointer;
}
html[data-theme] body #workspace .project-list-heading > button:first-child {
  padding-inline-start: calc(var(--list-thumbnail-width) + 24px);
}
html[data-theme] body #workspace .project-list-heading > button:last-child { justify-content: start; }
html[data-theme] body #workspace .project-list-heading > button:hover { color: var(--hq-ink); }
#workspace .project-list .hq-row > time { white-space: nowrap; color: var(--hq-muted); }

.assignee-filter .filter-control[hidden] { display: none; }
html[data-theme] body #workspace .project-list-heading > #resetListSort {
  grid-area: 1 / 1;
  justify-self: start;
  padding: 0;
  font-size: 17px;
}
html[data-theme] body #workspace .project-list-heading > #resetListSort:disabled {
  opacity: .55;
  cursor: default;
}
html[data-theme] body #workspace .project-list-heading > [data-list-sort="0"] {
  grid-area: 1 / 1;
  justify-self: start;
  margin-inline-start: calc(var(--list-thumbnail-width) + 24px);
}

html[data-theme] body nav.studio-nav .studio-homebase {
  margin-inline-start: auto;
  background: #34435a;
}
html[data-theme] body nav.studio-nav .studio-homebase:hover { background: #435671; }
html[data-theme] body nav.studio-nav .studio-dropbox { margin-inline-start: 0; }

.studio-nav .studio-chat { gap: 7px; }
.studio-nav .shortcut-icon {
  flex: none;
  width: 16px;
  height: 16px;
  object-fit: contain;
  border-radius: 3px;
}

html[data-theme] body nav.studio-nav > a.studio-chat {
  flex: 0 0 38px;
  width: 38px;
  padding: 0;
  background: var(--hq-soft);
  box-shadow: inset 0 0 0 1px var(--hq-line);
}
html[data-theme] body nav.studio-nav > a.studio-chat:is(:hover, :focus-visible) {
  box-shadow: inset 0 0 0 1px var(--studio-accent);
}

html[data-theme] body #importDetails[open] {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
}
#importDetailsBody {
  min-height: 0;
  overflow-y: auto;
  padding: 28px 40px 12px 28px;
}
.card-dialog-actions {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 28px;
  border-bottom: 1px solid var(--hq-line);
  background: var(--studio-panel);
}
#importDetailsActions .source-link { margin: 0; }
html[data-theme] body .card-dialog-actions #closeImportDetails {
  float: none;
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  padding: 0;
  margin: 0;
}